fix: rename outlined bottom to underlined

packages/lsd-react/src/components/Autocomplete/Autocomplete.classes.ts

@@ -16,5 +16,5 @@ export const autocompleteClasses = {
   small: `lsd-autocomplete--small`,
   withIcon: `lsd-autocomplete--with-icon`,
   outlined: `lsd-autocomplete--outlined`,
-  outlinedBottom: `lsd-autocomplete--outlined-bottom`,
+  underlined: `lsd-autocomplete--underlined`,
 }

packages/lsd-react/src/components/Autocomplete/Autocomplete.stories.tsx

@@ -19,7 +19,7 @@ export default {
     variant: {
       type: {
         name: 'enum',
-        value: ['outlined', 'outlined-bottom'],
+        value: ['outlined', 'underlined'],
       },
       defaultValue: 'large',
     },

packages/lsd-react/src/components/Autocomplete/Autocomplete.styles.ts

@@ -114,8 +114,7 @@ export const AutocompleteStyles = css`
     border: 1px solid rgb(var(--lsd-border-primary));
   }
 
-  .${autocompleteClasses.outlinedBottom}
+  .${autocompleteClasses.underlined} .${autocompleteClasses.inputContainer} {
-    .${autocompleteClasses.inputContainer} {
     border: 1px solid transparent;
     border-bottom: 1px solid rgb(var(--lsd-border-primary));
   }

packages/lsd-react/src/components/Autocomplete/Autocomplete.tsx

@@ -27,7 +27,7 @@ export type AutocompleteProps = CommonProps &
     defaultValue?: string
     options?: string[]
     inputProps?: React.InputHTMLAttributes<HTMLInputElement>
-    variant?: 'outlined' | 'outlined-bottom'
+    variant?: 'outlined' | 'underlined'
   }
 
 export const Autocomplete: React.FC<AutocompleteProps> & {
@@ -102,7 +102,7 @@ export const Autocomplete: React.FC<AutocompleteProps> & {
         withIcon && autocompleteClasses.withIcon,
         variant === 'outlined'
           ? autocompleteClasses.outlined
-          : autocompleteClasses.outlinedBottom,
+          : autocompleteClasses.underlined,
       )}
     >
       {label && (

packages/lsd-react/src/components/DateField/DateField.classes.ts

@@ -18,5 +18,5 @@ export const dateFieldClasses = {
   small: `lsd-date-field--small`,
 
   outlined: `lsd-date-field--outlined`,
-  outlinedBottom: `lsd-date-field--outlined-bottom`,
+  underlined: `lsd-date-field--underlined`,
 }

packages/lsd-react/src/components/DateField/DateField.stories.tsx

@@ -15,7 +15,7 @@ export default {
     variant: {
       type: {
         name: 'enum',
-        value: ['outlined', 'outlined-bottom'],
+        value: ['outlined', 'underlined'],
       },
       defaultValue: 'large',
     },
@@ -37,7 +37,7 @@ export const Uncontrolled: StoryObj<DateFieldProps> = {
     error: false,
     errorIcon: false,
     clearButton: true,
-    variant: 'outlined-bottom',
+    variant: 'underlined',
     label: 'Label',
   },
 }
@@ -57,7 +57,7 @@ export const Controlled: StoryObj<DateFieldProps> = {
     error: false,
     errorIcon: false,
     clearButton: true,
-    variant: 'outlined-bottom',
+    variant: 'underlined',
     label: 'Label',
   },
 }

packages/lsd-react/src/components/DateField/DateField.styles.ts

@@ -21,7 +21,7 @@ export const DateFieldStyles = css`
     border: 1px solid rgb(var(--lsd-border-primary));
   }
 
-  .${dateFieldClasses.outlinedBottom} {
+  .${dateFieldClasses.underlined} {
     border-bottom: 1px solid rgb(var(--lsd-border-primary));
   }
 

packages/lsd-react/src/components/DateField/DateField.tsx

@@ -23,7 +23,7 @@ export type DateFieldProps = Omit<
     icon?: React.ReactNode
     onIconClick?: () => void
     inputProps?: React.InputHTMLAttributes<HTMLInputElement>
-    variant?: 'outlined' | 'outlined-bottom'
+    variant?: 'outlined' | 'underlined'
     calendarIconRef?: React.RefObject<HTMLSpanElement>
   }
 
@@ -45,7 +45,7 @@ export const DateField: React.FC<DateFieldProps> & {
   icon,
   onIconClick,
   inputProps = {},
-  variant = 'outlined-bottom',
+  variant = 'underlined',
   ...props
 }) => {
   const ref = useRef<HTMLInputElement>(null)
@@ -87,7 +87,7 @@ export const DateField: React.FC<DateFieldProps> & {
           dateFieldClasses.inputContainer,
           variant === 'outlined'
             ? dateFieldClasses.outlined
-            : dateFieldClasses.outlinedBottom,
+            : dateFieldClasses.underlined,
         )}
       >
         <input

packages/lsd-react/src/components/DatePicker/DatePicker.stories.tsx

@@ -15,7 +15,7 @@ export default {
     variant: {
       type: {
         name: 'enum',
-        value: ['outlined', 'outlined-bottom'],
+        value: ['outlined', 'underlined'],
       },
       defaultValue: 'large',
     },
@@ -38,7 +38,7 @@ export const Uncontrolled: StoryObj<DatePickerProps> = {
     clearButton: true,
     withCalendar: true,
     size: 'large',
-    variant: 'outlined-bottom',
+    variant: 'underlined',
     label: 'Label',
   },
 }
@@ -59,7 +59,7 @@ export const Controlled: StoryObj<DatePickerProps> = {
     clearButton: true,
     withCalendar: true,
     size: 'large',
-    variant: 'outlined-bottom',
+    variant: 'underlined',
     label: 'Label',
   },
 }

packages/lsd-react/src/components/DatePicker/DatePicker.tsx

@@ -27,7 +27,7 @@ export type DatePickerProps = Omit<
     defaultValue?: string
     placeholder?: string
     size?: 'large' | 'medium' | 'small'
-    variant?: 'outlined' | 'outlined-bottom'
+    variant?: 'outlined' | 'underlined'
     inputProps?: React.InputHTMLAttributes<HTMLInputElement>
   }
 
@@ -39,7 +39,7 @@ export const DatePicker: React.FC<DatePickerProps> & {
   value: valueProp,
   onChange,
   withCalendar = true,
-  variant = 'outlined-bottom',
+  variant = 'underlined',
   ...props
 }) => {
   const ref = useRef<HTMLDivElement>(null)

packages/lsd-react/src/components/Dropdown/Dropdown.classes.ts

@@ -20,5 +20,5 @@ export const dropdownClasses = {
   medium: `lsd-dropdown--medium`,
   large: `lsd-dropdown--large`,
   outlined: `lsd-dropdown--outlined`,
-  outlinedBottom: `lsd-dropdown--outlined-bottom`,
+  underlined: `lsd-dropdown--underlined`,
 }

packages/lsd-react/src/components/Dropdown/Dropdown.stories.tsx

@@ -8,7 +8,7 @@ export default {
     variant: {
       type: {
         name: 'enum',
-        value: ['outlined', 'outlined-bottom'],
+        value: ['outlined', 'underlined'],
       },
       defaultValue: 'large',
     },

packages/lsd-react/src/components/Dropdown/Dropdown.styles.ts

@@ -135,7 +135,7 @@ export const DropdownStyles = css`
     }
   }
 
-  .${dropdownClasses.outlinedBottom} {
+  .${dropdownClasses.underlined} {
     .${dropdownClasses.buttonContainer} {
       border: 1px solid transparent;
       border-bottom: 1px solid rgb(var(--lsd-border-primary));

packages/lsd-react/src/components/Dropdown/Dropdown.tsx

@@ -31,7 +31,7 @@ export type DropdownProps = CommonProps &
     options?: DropdownOption[]
     value?: string | string[]
     onChange?: (value: string | string[]) => void
-    variant?: 'outlined' | 'outlined-bottom'
+    variant?: 'outlined' | 'underlined'
     isOpen?: boolean
     onToggle?: (open: boolean) => void
   }
@@ -103,7 +103,7 @@ export const Dropdown: React.FC<DropdownProps> & {
         openState && dropdownClasses.open,
         variant === 'outlined'
           ? dropdownClasses.outlined
-          : dropdownClasses.outlinedBottom,
+          : dropdownClasses.underlined,
       )}
     >
       {label && (

packages/lsd-react/src/components/TextField/TextField.classes.ts

@@ -13,5 +13,5 @@ export const textFieldClasses = {
   large: `lsd-text-field--large`,
   medium: `lsd-text-field--medium`,
   outlined: `lsd-text-field--outlined`,
-  outlinedBottom: `lsd-text-field--outlined-bottom`,
+  underlined: `lsd-text-field--underlined`,
 }

packages/lsd-react/src/components/TextField/TextField.stories.tsx

@@ -23,7 +23,7 @@ export default {
     variant: {
       type: {
         name: 'enum',
-        value: ['outlined', 'outlined-bottom'],
+        value: ['outlined', 'underlined'],
       },
       defaultValue: 'large',
     },
@@ -48,7 +48,7 @@ export const Root: StoryObj<Omit<TextFieldProps, 'icon'> & { icon: string }> = {
     error: false,
     errorIcon: false,
     icon: 'None',
-    variant: 'outlined-bottom',
+    variant: 'underlined',
     clearButton: true,
     placeholder: 'Placeholder',
     defaultValue: 'default value',

packages/lsd-react/src/components/TextField/TextField.styles.ts

@@ -60,7 +60,7 @@ export const TextFieldStyles = css`
     border: 1px solid rgb(var(--lsd-border-primary));
   }
 
-  .${textFieldClasses.outlinedBottom} {
+  .${textFieldClasses.underlined} {
     border: 1px solid transparent;
     border-bottom: 1px solid rgb(var(--lsd-border-primary));
   }

packages/lsd-react/src/components/TextField/TextField.tsx

@@ -25,7 +25,7 @@ export type TextFieldProps = CommonProps &
     defaultValue?: string
     placeholder?: string
     inputProps?: React.InputHTMLAttributes<HTMLInputElement>
-    variant?: 'outlined' | 'outlined-bottom'
+    variant?: 'outlined' | 'underlined'
   }
 
 export const TextField: React.FC<TextFieldProps> & {
@@ -44,7 +44,7 @@ export const TextField: React.FC<TextFieldProps> & {
   disabled,
   onChange,
   inputProps = {},
-  variant = 'outlined-bottom',
+  variant = 'underlined',
   ...props
 }) => {
   const commonProps = useCommonProps(props)
@@ -66,7 +66,7 @@ export const TextField: React.FC<TextFieldProps> & {
         error && textFieldClasses.error,
         variant === 'outlined'
           ? textFieldClasses.outlined
-          : textFieldClasses.outlinedBottom,
+          : textFieldClasses.underlined,
       )}
     >
       <div className={textFieldClasses.inputContainer}>