From 67145aa3e2a70e1cb975926009c8ad4126965c98 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?nicole=20miko=C5=82ajczyk?= <git@mkljczk.pl>
Date: Fri, 13 Mar 2026 12:08:35 +0100
Subject: [PATCH] nicolium: styles updates
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>
---
 .../src/components/autosuggest-input.tsx      |   3 +-
 .../src/components/autosuggest-location.tsx   |  11 +-
 packages/nicolium/src/styles/new/forms.scss   | 187 +++++++++---------
 3 files changed, 104 insertions(+), 97 deletions(-)

diff --git a/packages/nicolium/src/components/autosuggest-input.tsx b/packages/nicolium/src/components/autosuggest-input.tsx
index 9fff5994f..dc6a94480 100644
--- a/packages/nicolium/src/components/autosuggest-input.tsx
+++ b/packages/nicolium/src/components/autosuggest-input.tsx
@@ -258,11 +258,10 @@ const AutosuggestInput: React.FC<IAutosuggestInput> = ({
   const visible = !suggestionsHidden && (props.suggestions.length || (props.menu && props.value));
 
   return [
-    <div key='input' className='relative w-full'>
+    <div key='input' className='⁂-autosuggest-input'>
       <Input
         type='text'
         className={props.className}
-        outerClassName='mt-0'
         ref={inputRef}
         disabled={props.disabled}
         placeholder={props.placeholder}
diff --git a/packages/nicolium/src/components/autosuggest-location.tsx b/packages/nicolium/src/components/autosuggest-location.tsx
index 8959b9f3e..40b15845e 100644
--- a/packages/nicolium/src/components/autosuggest-location.tsx
+++ b/packages/nicolium/src/components/autosuggest-location.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 
 import Icon from '@/components/ui/icon';
-import Text from '@/components/ui/text';
 
 import type { Location } from 'pl-api';
 
@@ -27,15 +26,15 @@ const AutosuggestLocation: React.FC<IAutosuggestLocation> = ({ location }) => {
   if (!location) return null;
 
   return (
-    <div className='flex items-center gap-2'>
+    <div className='⁂-autosuggest-location'>
       <Icon src={ADDRESS_ICONS[location.type] || mapPinIcon} />
-      <div className='flex flex-col'>
-        <Text>{location.description}</Text>
-        <Text size='xs' theme='muted'>
+      <div>
+        <p>{location.description}</p>
+        <p>
           {[location.street, location.locality, location.country]
             .filter((val) => val?.trim())
             .join(' · ')}
-        </Text>
+        </p>
       </div>
     </div>
   );
diff --git a/packages/nicolium/src/styles/new/forms.scss b/packages/nicolium/src/styles/new/forms.scss
index 6e7ed1c5a..5db14b5ff 100644
--- a/packages/nicolium/src/styles/new/forms.scss
+++ b/packages/nicolium/src/styles/new/forms.scss
@@ -118,95 +118,6 @@
   }
 }
 
-.⁂-input__wrapper {
-  position: relative;
-  margin-top: 0.25rem;
-  border-radius: 0.375rem;
-
-  &--search {
-    border-radius: 9999px;
-  }
-
-  &__icon {
-    pointer-events: none;
-
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    inset-inline-start: 0;
-
-    display: flex;
-    align-items: center;
-
-    padding-inline-start: 0.75rem;
-
-    svg {
-      width: 1rem;
-      height: 1rem;
-      color: rgb(var(--color-gray-700));
-
-      .dark & {
-        color: rgb(var(--color-gray-600));
-      }
-    }
-  }
-
-  &__prepend {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    inset-inline-start: 0;
-
-    display: flex;
-    align-items: center;
-  }
-
-  &__append {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    inset-inline-end: 0;
-
-    display: flex;
-    align-items: center;
-
-    padding-inline: 0.75rem;
-  }
-
-  &__password-toggle {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    inset-inline-end: 0;
-
-    display: flex;
-    align-items: center;
-
-    button {
-      height: 100%;
-      padding-inline: 0.5rem;
-      color: rgb(var(--color-gray-700));
-
-      &:hover {
-        color: rgb(var(--color-gray-500));
-      }
-
-      &:focus {
-        outline: none;
-        box-shadow: inset 0 0 0 2px rgb(var(--color-primary-500));
-      }
-
-      .dark & {
-        color: rgb(var(--color-gray-600));
-
-        &:hover {
-          color: rgb(var(--color-gray-400));
-        }
-      }
-    }
-  }
-}
-
 .⁂-input {
   display: block;
   width: 100%;
@@ -295,11 +206,109 @@
     padding-inline-end: 2.5rem;
   }
 
+  &__wrapper {
+    position: relative;
+    margin-top: 0.25rem;
+    border-radius: 0.375rem;
+
+    &--search {
+      border-radius: 9999px;
+    }
+
+    &__icon {
+      pointer-events: none;
+
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      inset-inline-start: 0;
+
+      display: flex;
+      align-items: center;
+
+      padding-inline-start: 0.75rem;
+
+      svg {
+        width: 1rem;
+        height: 1rem;
+        color: rgb(var(--color-gray-700));
+
+        .dark & {
+          color: rgb(var(--color-gray-600));
+        }
+      }
+    }
+
+    &__prepend {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      inset-inline-start: 0;
+
+      display: flex;
+      align-items: center;
+    }
+
+    &__append {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      inset-inline-end: 0;
+
+      display: flex;
+      align-items: center;
+
+      padding-inline: 0.75rem;
+    }
+
+    &__password-toggle {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      inset-inline-end: 0;
+
+      display: flex;
+      align-items: center;
+
+      button {
+        height: 100%;
+        padding-inline: 0.5rem;
+        color: rgb(var(--color-gray-700));
+
+        &:hover {
+          color: rgb(var(--color-gray-500));
+        }
+
+        &:focus {
+          outline: none;
+          box-shadow: inset 0 0 0 2px rgb(var(--color-primary-500));
+        }
+
+        .dark & {
+          color: rgb(var(--color-gray-600));
+
+          &:hover {
+            color: rgb(var(--color-gray-400));
+          }
+        }
+      }
+    }
+  }
+
   @media (min-width: variables.$breakpoint-sm) {
     font-size: 0.875rem;
   }
 }
 
+.⁂-autosuggest-input {
+  position: relative;
+  width: 100%;
+
+  .⁂-input__wrapper {
+    margin-top: 0;
+  }
+}
+
 .⁂-form-group {
   &__label {
     display: block;