@kubit-ui-web/react-components 1.0.0-beta.3 → 1.0.0

package/dist/esm/designSystem/kubit/components/option/styles.js

@@ -48,31 +48,6 @@ const commonLabelIconContainerSideMenuLevel2 = {
 const commonLabelSideMenuLevel2 = {
     font_variant: TextVariantType.PARAGRAPH_MEDIUM_EXTENDED,
 };
-const commonContainerAchorMenuLevel1 = {
-    ...commonContainer,
-    padding: `${SPACINGS.spacing_150} ${SPACINGS.spacing_300}`,
-};
-const commonLabelIconContainerAchorMenuLevel1 = {
-    display: 'flex',
-    align_items: 'initial',
-};
-const commonLabelAchorMenuLevel1 = {
-    font_variant: TextVariantType.PARAGRAPH_CAPTION_EXTENDED,
-};
-const commonContainerAchorMenuLevel2 = {
-    ...commonContainer,
-    padding_top: SPACINGS.spacing_150,
-    padding_bottom: SPACINGS.spacing_150,
-    padding_left: SPACINGS.spacing_400,
-    padding_right: SPACINGS.spacing_300,
-};
-const commonLabelIconContainerAchorMenuLevel2 = {
-    display: 'flex',
-    align_items: 'initial',
-};
-const commonLabelAchorMenuLevel2 = {
-    font_variant: TextVariantType.PARAGRAPH_CAPTION_EXTENDED,
-};
 const commonContaineCodeViewerSubtheme = {
     ...commonContainer,
     background_color: COLORS.NEUTRAL.color_neutral_bg_250,
@@ -88,7 +63,7 @@ const commonLabelCodeViewerSubtheme = {
     color: COLORS.NEUTRAL.color_neutral_font_50,
     font_weigh: FONT_WEIGHT.font_weight_400,
 };
-const commonContainerInputSearch = {
+const commonContainerInputOption = {
     ...commonContainer,
     padding: `${SPACINGS.spacing_150} ${SPACINGS.spacing_300}`,
 };
@@ -110,6 +85,7 @@ const commonLabelHightlightedInputSearch = {
 const commonIconInputSearch = {
     width: SIZES.size_250,
     height: SIZES.size_250,
+    color: COLORS.NEUTRAL.color_neutral_icon_50,
 };
 const commonSublabelInputSearch = {
     font_variant: TextVariantType.PARAGRAPH_CAPTION_EXTENDED,
@@ -128,11 +104,11 @@ const commonLabelIconContainerHighlighted = {
 const commonLabelHighlighted = {
     font_variant: TextVariantType.PARAGRAPH_MEDIUM_EXTENDED,
     color: COLORS.NEUTRAL.color_neutral_font_50,
-    font_weight: FONT_WEIGHT.font_weight_400,
+    font_weight: FONT_WEIGHT.font_weight_600,
 };
 const commonLabelHightlightedHighlighted = {
-    font_variant: TextVariantType.PARAGRAPH_CAPTION_EXTENDED,
-    color: COLORS.ACCENT.color_accent_default_font_150,
+    font_variant: TextVariantType.PARAGRAPH_MEDIUM_EXTENDED,
+    color: COLORS.NEUTRAL.color_neutral_font_50,
     font_weight: FONT_WEIGHT.font_weight_600,
 };
 const commonIconHighlighted = {
@@ -141,7 +117,7 @@ const commonIconHighlighted = {
     color: COLORS.NEUTRAL.color_neutral_icon_50,
 };
 const commonSublabelHighlighted = {
-    font_variant: TextVariantType.PARAGRAPH_CAPTION_EXTENDED,
+    font_variant: TextVariantType.PARAGRAPH_MEDIUM_EXTENDED,
     color: COLORS.NEUTRAL.color_neutral_font_50,
     font_weight: FONT_WEIGHT.font_weight_400,
 };
@@ -320,161 +296,6 @@ export const OPTION_STYLES = {
             },
         },
     },
-    [OptionVariantType.SIDE_MENU_LEVEL_1_BLACK]: {
-        [OptionStateType.DEFAULT]: {
-            container: {
-                ...commonContainerSideMenuLevel1,
-                background_color: COLORS.NEUTRAL.color_neutral_bg_50,
-                padding: SPACINGS.spacing_300,
-            },
-            labelIconContainer: {
-                ...commonLabelIconContainerSideMenuLevel1,
-            },
-            label: {
-                ...commonLabelSideMenuLevel1,
-                color: COLORS.NEUTRAL.color_neutral_font_250,
-                font_weight: FONT_WEIGHT.font_weight_400,
-            },
-            icon: {
-                ...commonIconSideMenuLevel1,
-                color: COLORS.NEUTRAL.color_neutral_icon_250,
-            },
-        },
-        [OptionStateType.HOVER]: {
-            container: {
-                ...commonContainerSideMenuLevel1,
-                background_color: COLORS.NEUTRAL.color_neutral_bg_200,
-                padding: SPACINGS.spacing_300,
-            },
-            labelIconContainer: {
-                ...commonLabelIconContainerSideMenuLevel1,
-            },
-            label: {
-                ...commonLabelSideMenuLevel1,
-                color: COLORS.NEUTRAL.color_neutral_font_50,
-                font_weight: FONT_WEIGHT.font_weight_400,
-            },
-            icon: {
-                ...commonIconSideMenuLevel1,
-                color: COLORS.NEUTRAL.color_neutral_icon_50,
-            },
-        },
-        [OptionStateType.SELECTED]: {
-            container: {
-                ...commonContainerSideMenuLevel1,
-                background_color: COLORS.NEUTRAL.color_neutral_bg_200,
-                padding: SPACINGS.spacing_300,
-            },
-            labelIconContainer: {
-                ...commonLabelIconContainerSideMenuLevel1,
-            },
-            label: {
-                ...commonLabelSideMenuLevel1,
-                color: COLORS.NEUTRAL.color_neutral_font_50,
-                font_weight: FONT_WEIGHT.font_weight_600,
-            },
-            icon: {
-                ...commonIconSideMenuLevel1,
-                color: COLORS.NEUTRAL.color_neutral_icon_50,
-            },
-        },
-        [OptionStateType.SELECTED_HOVER]: {
-            container: {
-                ...commonContainerSideMenuLevel1,
-                background_color: COLORS.NEUTRAL.color_neutral_bg_200,
-                padding: SPACINGS.spacing_300,
-            },
-            labelIconContainer: {
-                ...commonLabelIconContainerSideMenuLevel1,
-            },
-            label: {
-                ...commonLabelSideMenuLevel1,
-                color: COLORS.NEUTRAL.color_neutral_font_50,
-                font_weight: FONT_WEIGHT.font_weight_600,
-            },
-            icon: {
-                ...commonIconSideMenuLevel1,
-                color: COLORS.NEUTRAL.color_neutral_icon_50,
-            },
-        },
-        [OptionStateType.MULTIPLE_SELECTED]: {
-            container: {
-                ...commonContainerSideMenuLevel1,
-                background_color: COLORS.NEUTRAL.color_neutral_bg_200,
-                padding: SPACINGS.spacing_300,
-            },
-            labelIconContainer: {
-                ...commonLabelIconContainerSideMenuLevel1,
-            },
-            label: {
-                ...commonLabelSideMenuLevel1,
-                color: COLORS.NEUTRAL.color_neutral_font_50,
-                font_weight: FONT_WEIGHT.font_weight_600,
-            },
-            icon: {
-                ...commonIconSideMenuLevel1,
-                color: COLORS.NEUTRAL.color_neutral_icon_50,
-            },
-        },
-        [OptionStateType.MULTIPLE_SELECTED_HOVER]: {
-            container: {
-                ...commonContainerSideMenuLevel1,
-                background_color: COLORS.NEUTRAL.color_neutral_bg_200,
-                padding: SPACINGS.spacing_300,
-            },
-            labelIconContainer: {
-                ...commonLabelIconContainerSideMenuLevel1,
-            },
-            label: {
-                ...commonLabelSideMenuLevel1,
-                color: COLORS.NEUTRAL.color_neutral_font_50,
-                font_weight: FONT_WEIGHT.font_weight_600,
-            },
-            icon: {
-                ...commonIconSideMenuLevel1,
-                color: COLORS.NEUTRAL.color_neutral_icon_50,
-            },
-        },
-        [OptionStateType.DISABLED]: {
-            container: {
-                ...commonContainerSideMenuLevel1,
-                background_color: COLORS.NEUTRAL.color_neutral_bg_50,
-                padding: SPACINGS.spacing_300,
-            },
-            labelIconContainer: {
-                ...commonLabelIconContainerSideMenuLevel1,
-            },
-            label: {
-                ...commonLabelSideMenuLevel1,
-                color: COLORS.NEUTRAL.color_neutral_font_250,
-                font_weight: FONT_WEIGHT.font_weight_400,
-                text_decoration: 'line-through',
-            },
-            icon: {
-                ...commonIconSideMenuLevel1,
-                color: COLORS.NEUTRAL.color_neutral_icon_100,
-            },
-        },
-        [OptionStateType.FILLING]: {
-            container: {
-                ...commonContainerSideMenuLevel1,
-                background_color: COLORS.NEUTRAL.color_neutral_bg_250,
-                padding: SPACINGS.spacing_300,
-            },
-            labelIconContainer: {
-                ...commonLabelIconContainerSideMenuLevel1,
-            },
-            label: {
-                ...commonLabelSideMenuLevel1,
-                color: COLORS.NEUTRAL.color_neutral_font_50,
-                font_weight: FONT_WEIGHT.font_weight_400,
-            },
-            icon: {
-                ...commonIconSideMenuLevel1,
-                color: COLORS.NEUTRAL.color_neutral_icon_50,
-            },
-        },
-    },
     [OptionVariantType.SIDE_MENU_LEVEL_2]: {
         [OptionStateType.DEFAULT]: {
             container: {
@@ -536,291 +357,63 @@ export const OPTION_STYLES = {
                 font_weight: FONT_WEIGHT.font_weight_400,
             },
         },
-        [OptionStateType.MULTIPLE_SELECTED]: {
-            container: {
-                ...commonContainerSideMenuLevel2,
-                background_color: COLORS.NEUTRAL.color_neutral_bg_250,
-                border_left: `${BORDERS.border_100} solid ${COLORS.BRAND.color_brand_border_50}`,
-            },
-            labelIconContainer: {
-                ...commonLabelIconContainerSideMenuLevel2,
-            },
-            label: {
-                ...commonLabelSideMenuLevel2,
-                color: COLORS.NEUTRAL.color_neutral_font_50,
-                font_weight: FONT_WEIGHT.font_weight_600,
-            },
-        },
-        [OptionStateType.MULTIPLE_SELECTED_HOVER]: {
-            container: {
-                ...commonContainerSideMenuLevel2,
-                background_color: COLORS.NEUTRAL.color_neutral_bg_250,
-                border_left: `${BORDERS.border_100} solid ${COLORS.BRAND.color_brand_border_50}`,
-            },
-            labelIconContainer: {
-                ...commonLabelIconContainerSideMenuLevel2,
-            },
-            label: {
-                ...commonLabelSideMenuLevel2,
-                color: COLORS.NEUTRAL.color_neutral_font_50,
-                font_weight: FONT_WEIGHT.font_weight_400,
-            },
-        },
-        [OptionStateType.DISABLED]: {
-            container: {
-                ...commonContainerSideMenuLevel2,
-                background_color: COLORS.NEUTRAL.color_neutral_bg_250,
-                border_left: `${BORDERS.border_100} solid ${COLORS.NEUTRAL.color_neutral_bg_250}`,
-            },
-            labelIconContainer: {
-                ...commonLabelIconContainerSideMenuLevel2,
-            },
-            label: {
-                ...commonLabelSideMenuLevel2,
-                color: COLORS.NEUTRAL.color_neutral_font_50,
-                font_weight: FONT_WEIGHT.font_weight_400,
-            },
-        },
-        [OptionStateType.FILLING]: {
-            container: {
-                ...commonContainerSideMenuLevel2,
-                background_color: COLORS.NEUTRAL.color_neutral_bg_250,
-                border_left: `${BORDERS.border_100} solid ${COLORS.NEUTRAL.color_neutral_bg_250}`,
-            },
-            labelIconContainer: {
-                ...commonLabelIconContainerSideMenuLevel2,
-            },
-            label: {
-                ...commonLabelSideMenuLevel2,
-                color: COLORS.NEUTRAL.color_neutral_font_50,
-                font_weight: FONT_WEIGHT.font_weight_400,
-            },
-        },
-    },
-    [OptionVariantType.ANCHOR_MENU_LEVEL_1]: {
-        [OptionStateType.DEFAULT]: {
-            container: {
-                ...commonContainerAchorMenuLevel1,
-                border_left: `${BORDERS.border_50} solid ${COLORS.NEUTRAL.color_neutral_border_200}`,
-            },
-            labelIconContainer: {
-                ...commonLabelIconContainerAchorMenuLevel1,
-            },
-            label: {
-                ...commonLabelAchorMenuLevel1,
-                color: COLORS.BRAND.color_brand_font_100,
-                font_weight: FONT_WEIGHT.font_weight_400,
-            },
-        },
-        [OptionStateType.HOVER]: {
-            container: {
-                ...commonContainerAchorMenuLevel1,
-                border_left: `${BORDERS.border_100} solid ${COLORS.NEUTRAL.color_neutral_border_200}`,
-            },
-            labelIconContainer: {
-                ...commonLabelIconContainerAchorMenuLevel1,
-            },
-            label: {
-                ...commonLabelAchorMenuLevel1,
-                color: COLORS.BRAND.color_brand_font_100,
-                font_weight: FONT_WEIGHT.font_weight_400,
-            },
-        },
-        [OptionStateType.SELECTED]: {
-            container: {
-                ...commonContainerAchorMenuLevel1,
-                border_left: `${BORDERS.border_200} solid ${COLORS.BRAND.color_brand_border_50}`,
-            },
-            labelIconContainer: {
-                ...commonLabelIconContainerAchorMenuLevel1,
-            },
-            label: {
-                ...commonLabelAchorMenuLevel1,
-                color: COLORS.BRAND.color_brand_font_100,
-                font_weight: FONT_WEIGHT.font_weight_600,
-            },
-        },
-        [OptionStateType.SELECTED_HOVER]: {
-            container: {
-                ...commonContainerAchorMenuLevel1,
-                border_left: `${BORDERS.border_200} solid ${COLORS.BRAND.color_brand_border_50}`,
-            },
-            labelIconContainer: {
-                ...commonLabelIconContainerAchorMenuLevel1,
-            },
-            label: {
-                ...commonLabelAchorMenuLevel1,
-                color: COLORS.BRAND.color_brand_font_100,
-                font_weight: FONT_WEIGHT.font_weight_600,
-            },
-        },
-        [OptionStateType.MULTIPLE_SELECTED]: {
-            container: {
-                ...commonContainerAchorMenuLevel1,
-                border_left: `${BORDERS.border_200} solid ${COLORS.BRAND.color_brand_border_50}`,
-            },
-            labelIconContainer: {
-                ...commonLabelIconContainerAchorMenuLevel1,
-            },
-            label: {
-                ...commonLabelAchorMenuLevel1,
-                color: COLORS.BRAND.color_brand_font_100,
-                font_weight: FONT_WEIGHT.font_weight_600,
-            },
-        },
-        [OptionStateType.MULTIPLE_SELECTED_HOVER]: {
-            container: {
-                ...commonContainerAchorMenuLevel1,
-                border_left: `${BORDERS.border_200} solid ${COLORS.BRAND.color_brand_border_50}`,
-            },
-            labelIconContainer: {
-                ...commonLabelIconContainerAchorMenuLevel1,
-            },
-            label: {
-                ...commonLabelAchorMenuLevel1,
-                color: COLORS.BRAND.color_brand_font_100,
-                font_weight: FONT_WEIGHT.font_weight_600,
-            },
-        },
-        [OptionStateType.DISABLED]: {
-            container: {
-                ...commonContainerAchorMenuLevel1,
-                border_left: `${BORDERS.border_50} solid ${COLORS.ACCENT.color_accent_default_bg_150}`,
-            },
-            labelIconContainer: {
-                ...commonLabelIconContainerAchorMenuLevel1,
-            },
-            label: {
-                ...commonLabelAchorMenuLevel1,
-                color: COLORS.BRAND.color_brand_font_100,
-                font_weight: FONT_WEIGHT.font_weight_400,
-            },
-        },
-        [OptionStateType.FILLING]: {
-            container: {
-                ...commonContainerAchorMenuLevel1,
-                border_left: `${BORDERS.border_50} solid ${COLORS.NEUTRAL.color_neutral_border_200}`,
-            },
-            labelIconContainer: {
-                ...commonLabelIconContainerAchorMenuLevel1,
-            },
-            label: {
-                ...commonLabelAchorMenuLevel1,
-                color: COLORS.BRAND.color_brand_font_100,
-                font_weight: FONT_WEIGHT.font_weight_400,
-            },
-        },
-    },
-    [OptionVariantType.ANCHOR_MENU_LEVEL_2]: {
-        [OptionStateType.DEFAULT]: {
-            container: {
-                ...commonContainerAchorMenuLevel2,
-                border_left: `${BORDERS.border_50} solid ${COLORS.NEUTRAL.color_neutral_border_200}`,
-            },
-            labelIconContainer: {
-                ...commonLabelIconContainerAchorMenuLevel2,
-            },
-            label: {
-                ...commonLabelAchorMenuLevel2,
-                color: COLORS.BRAND.color_brand_font_100,
-                font_weight: FONT_WEIGHT.font_weight_400,
-            },
-        },
-        [OptionStateType.FILLING]: {
-            container: {
-                ...commonContainerAchorMenuLevel2,
-                border_left: `${BORDERS.border_50} solid ${COLORS.NEUTRAL.color_neutral_border_200}`,
-            },
-            labelIconContainer: {
-                ...commonLabelIconContainerAchorMenuLevel2,
-            },
-            label: {
-                ...commonLabelAchorMenuLevel2,
-                color: COLORS.BRAND.color_brand_font_100,
-                font_weight: FONT_WEIGHT.font_weight_400,
-            },
-        },
-        [OptionStateType.HOVER]: {
-            container: {
-                ...commonContainerAchorMenuLevel2,
-                border_left: `${BORDERS.border_100} solid ${COLORS.NEUTRAL.color_neutral_border_200}`,
-            },
-            labelIconContainer: {
-                ...commonLabelIconContainerAchorMenuLevel2,
-            },
-            label: {
-                ...commonLabelAchorMenuLevel2,
-                color: COLORS.BRAND.color_brand_font_100,
-                font_weight: FONT_WEIGHT.font_weight_400,
-            },
-        },
-        [OptionStateType.SELECTED]: {
-            container: {
-                ...commonContainerAchorMenuLevel2,
-                border_left: `${BORDERS.border_200} solid ${COLORS.BRAND.color_brand_border_50}`,
-            },
-            labelIconContainer: {
-                ...commonLabelIconContainerAchorMenuLevel2,
-            },
-            label: {
-                ...commonLabelAchorMenuLevel2,
-                color: COLORS.BRAND.color_brand_font_100,
-                font_weight: FONT_WEIGHT.font_weight_600,
-            },
-        },
-        [OptionStateType.SELECTED_HOVER]: {
+        [OptionStateType.MULTIPLE_SELECTED]: {
             container: {
-                ...commonContainerAchorMenuLevel2,
-                border_left: `${BORDERS.border_200} solid ${COLORS.BRAND.color_brand_border_50}`,
+                ...commonContainerSideMenuLevel2,
+                background_color: COLORS.NEUTRAL.color_neutral_bg_250,
+                border_left: `${BORDERS.border_100} solid ${COLORS.BRAND.color_brand_border_50}`,
             },
             labelIconContainer: {
-                ...commonLabelIconContainerAchorMenuLevel2,
+                ...commonLabelIconContainerSideMenuLevel2,
             },
             label: {
-                ...commonLabelAchorMenuLevel2,
-                color: COLORS.BRAND.color_brand_font_100,
+                ...commonLabelSideMenuLevel2,
+                color: COLORS.NEUTRAL.color_neutral_font_50,
                 font_weight: FONT_WEIGHT.font_weight_600,
             },
         },
-        [OptionStateType.MULTIPLE_SELECTED]: {
+        [OptionStateType.MULTIPLE_SELECTED_HOVER]: {
             container: {
-                ...commonContainerAchorMenuLevel2,
-                border_left: `${BORDERS.border_200} solid ${COLORS.BRAND.color_brand_border_50}`,
+                ...commonContainerSideMenuLevel2,
+                background_color: COLORS.NEUTRAL.color_neutral_bg_250,
+                border_left: `${BORDERS.border_100} solid ${COLORS.BRAND.color_brand_border_50}`,
             },
             labelIconContainer: {
-                ...commonLabelIconContainerAchorMenuLevel2,
+                ...commonLabelIconContainerSideMenuLevel2,
             },
             label: {
-                ...commonLabelAchorMenuLevel2,
-                color: COLORS.BRAND.color_brand_font_100,
-                font_weight: FONT_WEIGHT.font_weight_600,
+                ...commonLabelSideMenuLevel2,
+                color: COLORS.NEUTRAL.color_neutral_font_50,
+                font_weight: FONT_WEIGHT.font_weight_400,
             },
         },
-        [OptionStateType.MULTIPLE_SELECTED_HOVER]: {
+        [OptionStateType.DISABLED]: {
             container: {
-                ...commonContainerAchorMenuLevel2,
-                border_left: `${BORDERS.border_200} solid ${COLORS.BRAND.color_brand_border_50}`,
+                ...commonContainerSideMenuLevel2,
+                background_color: COLORS.NEUTRAL.color_neutral_bg_250,
+                border_left: `${BORDERS.border_100} solid ${COLORS.NEUTRAL.color_neutral_bg_250}`,
             },
             labelIconContainer: {
-                ...commonLabelIconContainerAchorMenuLevel2,
+                ...commonLabelIconContainerSideMenuLevel2,
             },
             label: {
-                ...commonLabelAchorMenuLevel2,
-                color: COLORS.BRAND.color_brand_font_100,
-                font_weight: FONT_WEIGHT.font_weight_600,
+                ...commonLabelSideMenuLevel2,
+                color: COLORS.NEUTRAL.color_neutral_font_50,
+                font_weight: FONT_WEIGHT.font_weight_400,
             },
         },
-        [OptionStateType.DISABLED]: {
+        [OptionStateType.FILLING]: {
             container: {
-                ...commonContainerAchorMenuLevel2,
-                border_left: `${BORDERS.border_50} solid ${COLORS.ACCENT.color_accent_default_bg_150}`,
+                ...commonContainerSideMenuLevel2,
+                background_color: COLORS.NEUTRAL.color_neutral_bg_250,
+                border_left: `${BORDERS.border_100} solid ${COLORS.NEUTRAL.color_neutral_bg_250}`,
             },
             labelIconContainer: {
-                ...commonLabelIconContainerAchorMenuLevel2,
+                ...commonLabelIconContainerSideMenuLevel2,
             },
             label: {
-                ...commonLabelAchorMenuLevel2,
-                color: COLORS.BRAND.color_brand_font_100,
+                ...commonLabelSideMenuLevel2,
+                color: COLORS.NEUTRAL.color_neutral_font_50,
                 font_weight: FONT_WEIGHT.font_weight_400,
             },
         },
@@ -1093,208 +686,12 @@ export const OPTION_STYLES = {
             },
         },
     },
-    [OptionVariantType.INPUT_DROPDOWN_DEFAULT]: {
+    [OptionVariantType.INPUT_OPTION]: {
         [OptionStateType.DEFAULT]: {
             container: {
-                ...commonContainerSideMenuLevel1,
-                background_color: COLORS.NEUTRAL.color_neutral_bg_250,
-                border_left: `${BORDERS.border_200} solid ${COLORS.NEUTRAL.color_neutral_bg_250}`,
-                padding: `${SPACINGS.spacing_250} ${SPACINGS.spacing_300}`,
-            },
-            labelIconContainer: {
-                ...commonLabelIconContainerSideMenuLevel1,
-            },
-            label: {
-                ...commonLabelSideMenuLevel1,
-                color: COLORS.NEUTRAL.color_neutral_font_50,
-                font_weight: FONT_WEIGHT.font_weight_400,
-            },
-            labelHightlighted: {
-                ...commonLabelSideMenuLevel1,
-                color: COLORS.NEUTRAL.color_neutral_font_50,
-                font_weight: FONT_WEIGHT.font_weight_600,
-            },
-            icon: {
-                ...commonIconSideMenuLevel1,
-                color: COLORS.NEUTRAL.color_neutral_icon_50,
-            },
-        },
-        [OptionStateType.HOVER]: {
-            container: {
-                ...commonContainerSideMenuLevel1,
-                background_color: COLORS.NEUTRAL.color_neutral_bg_200,
-                border_left: `${BORDERS.border_200} solid ${COLORS.NEUTRAL.color_neutral_bg_200}`,
-                padding: `${SPACINGS.spacing_250} ${SPACINGS.spacing_300}`,
-            },
-            labelIconContainer: {
-                ...commonLabelIconContainerSideMenuLevel1,
-            },
-            label: {
-                ...commonLabelSideMenuLevel1,
-                color: COLORS.NEUTRAL.color_neutral_font_50,
-                font_weight: FONT_WEIGHT.font_weight_400,
-            },
-            labelHightlighted: {
-                ...commonLabelSideMenuLevel1,
-                color: COLORS.NEUTRAL.color_neutral_font_50,
-                font_weight: FONT_WEIGHT.font_weight_600,
-            },
-            icon: {
-                ...commonIconSideMenuLevel1,
-                color: COLORS.NEUTRAL.color_neutral_icon_50,
-            },
-        },
-        [OptionStateType.SELECTED]: {
-            container: {
-                ...commonContainerSideMenuLevel1,
-                background_color: COLORS.NEUTRAL.color_neutral_bg_200,
-                border_left: `${BORDERS.border_200} solid ${COLORS.BRAND.color_brand_border_50}`,
-                padding: `${SPACINGS.spacing_250} ${SPACINGS.spacing_300}`,
-            },
-            labelIconContainer: {
-                ...commonLabelIconContainerSideMenuLevel1,
-            },
-            label: {
-                ...commonLabelSideMenuLevel1,
-                color: COLORS.NEUTRAL.color_neutral_font_50,
-                font_weight: FONT_WEIGHT.font_weight_600,
-            },
-            labelHightlighted: {
-                ...commonLabelSideMenuLevel1,
-                color: COLORS.NEUTRAL.color_neutral_font_50,
-                font_weight: FONT_WEIGHT.font_weight_600,
-            },
-            icon: {
-                ...commonIconSideMenuLevel1,
-                color: COLORS.NEUTRAL.color_neutral_icon_50,
-            },
-        },
-        [OptionStateType.SELECTED_HOVER]: {
-            container: {
-                ...commonContainerSideMenuLevel1,
-                background_color: COLORS.NEUTRAL.color_neutral_bg_200,
-                border_left: `${BORDERS.border_200} solid ${COLORS.BRAND.color_brand_border_50}`,
-                padding: `${SPACINGS.spacing_250} ${SPACINGS.spacing_300}`,
-            },
-            labelIconContainer: {
-                ...commonLabelIconContainerSideMenuLevel1,
-            },
-            label: {
-                ...commonLabelSideMenuLevel1,
-                color: COLORS.NEUTRAL.color_neutral_font_50,
-                font_weight: FONT_WEIGHT.font_weight_600,
-            },
-            labelHightlighted: {
-                ...commonLabelSideMenuLevel1,
-                color: COLORS.NEUTRAL.color_neutral_font_50,
-                font_weight: FONT_WEIGHT.font_weight_600,
-            },
-            icon: {
-                ...commonIconSideMenuLevel1,
-                color: COLORS.NEUTRAL.color_neutral_icon_50,
-            },
-        },
-        [OptionStateType.MULTIPLE_SELECTED]: {
-            container: {
-                ...commonContainerSideMenuLevel1,
-                background_color: COLORS.NEUTRAL.color_neutral_bg_200,
-                border_left: `${BORDERS.border_200} solid ${COLORS.BRAND.color_brand_border_50}`,
-                padding: `${SPACINGS.spacing_250} ${SPACINGS.spacing_300}`,
-            },
-            labelIconContainer: {
-                ...commonLabelIconContainerSideMenuLevel1,
-            },
-            label: {
-                ...commonLabelSideMenuLevel1,
-                color: COLORS.NEUTRAL.color_neutral_font_50,
-                font_weight: FONT_WEIGHT.font_weight_600,
-            },
-            icon: {
-                ...commonIconSideMenuLevel1,
-                color: COLORS.NEUTRAL.color_neutral_icon_50,
-            },
-        },
-        [OptionStateType.MULTIPLE_SELECTED_HOVER]: {
-            container: {
-                ...commonContainerSideMenuLevel1,
-                background_color: COLORS.NEUTRAL.color_neutral_bg_200,
-                border_left: `${BORDERS.border_200} solid ${COLORS.BRAND.color_brand_border_50}`,
-                padding: `${SPACINGS.spacing_250} ${SPACINGS.spacing_300}`,
-            },
-            labelIconContainer: {
-                ...commonLabelIconContainerSideMenuLevel1,
-            },
-            label: {
-                ...commonLabelSideMenuLevel1,
-                color: COLORS.NEUTRAL.color_neutral_font_50,
-                font_weight: FONT_WEIGHT.font_weight_600,
-            },
-            labelHightlighted: {
-                ...commonLabelSideMenuLevel1,
-                color: COLORS.NEUTRAL.color_neutral_font_50,
-                font_weight: FONT_WEIGHT.font_weight_600,
-            },
-            icon: {
-                ...commonIconSideMenuLevel1,
-                color: COLORS.NEUTRAL.color_neutral_icon_50,
-            },
-        },
-        [OptionStateType.DISABLED]: {
-            container: {
-                ...commonContainerSideMenuLevel1,
-                background_color: COLORS.ACCENT.color_accent_default_bg_150,
-                border_left: `${BORDERS.border_200} solid ${COLORS.ACCENT.color_accent_default_bg_150}`,
-                padding: `${SPACINGS.spacing_250} ${SPACINGS.spacing_300}`,
-            },
-            labelIconContainer: {
-                ...commonLabelIconContainerSideMenuLevel1,
-            },
-            label: {
-                ...commonLabelSideMenuLevel1,
-                color: COLORS.NEUTRAL.color_neutral_font_50,
-                font_weight: FONT_WEIGHT.font_weight_400,
-            },
-            labelHightlighted: {
-                ...commonLabelSideMenuLevel1,
-                color: COLORS.NEUTRAL.color_neutral_font_50,
-                font_weight: FONT_WEIGHT.font_weight_400,
-            },
-            icon: {
-                ...commonIconSideMenuLevel1,
-                color: COLORS.NEUTRAL.color_neutral_icon_100,
-            },
-        },
-        [OptionStateType.FILLING]: {
-            container: {
-                ...commonContainerSideMenuLevel1,
+                ...commonContainerInputOption,
                 background_color: COLORS.NEUTRAL.color_neutral_bg_250,
                 border_left: `${BORDERS.border_200} solid ${COLORS.NEUTRAL.color_neutral_bg_250}`,
-                padding: `${SPACINGS.spacing_250} ${SPACINGS.spacing_300}`,
-            },
-            labelIconContainer: {
-                ...commonLabelIconContainerSideMenuLevel1,
-            },
-            label: {
-                ...commonLabelSideMenuLevel1,
-                color: COLORS.NEUTRAL.color_neutral_font_50,
-                font_weight: FONT_WEIGHT.font_weight_400,
-            },
-            labelHightlighted: {
-                ...commonLabelSideMenuLevel1,
-                color: COLORS.NEUTRAL.color_neutral_font_50,
-                font_weight: FONT_WEIGHT.font_weight_600,
-            },
-            icon: {
-                ...commonIconSideMenuLevel1,
-                color: COLORS.NEUTRAL.color_neutral_icon_50,
-            },
-        },
-    },
-    [OptionVariantType.INPUT_SEARCH]: {
-        [OptionStateType.DEFAULT]: {
-            container: {
-                ...commonContainerInputSearch,
-                background_color: COLORS.NEUTRAL.color_neutral_bg_250,
             },
             labelIconContainer: {
                 ...commonLabelIconContainerInputSearch,
@@ -1312,10 +709,11 @@ export const OPTION_STYLES = {
                 ...commonSublabelInputSearch,
             },
         },
-        [OptionStateType.FILLING]: {
+        [OptionStateType.HOVER]: {
             container: {
-                ...commonContainerInputSearch,
-                background_color: COLORS.NEUTRAL.color_neutral_bg_250,
+                ...commonContainerInputOption,
+                background_color: COLORS.NEUTRAL.color_neutral_bg_200,
+                border_left: `${BORDERS.border_200} solid ${COLORS.NEUTRAL.color_neutral_bg_200}`,
             },
             labelIconContainer: {
                 ...commonLabelIconContainerInputSearch,
@@ -1333,10 +731,11 @@ export const OPTION_STYLES = {
                 ...commonSublabelInputSearch,
             },
         },
-        [OptionStateType.HOVER]: {
+        [OptionStateType.FILLING]: {
             container: {
-                ...commonContainerInputSearch,
-                background_color: COLORS.NEUTRAL.color_neutral_bg_200,
+                ...commonContainerInputOption,
+                background_color: COLORS.NEUTRAL.color_neutral_bg_250,
+                border_left: `${BORDERS.border_200} solid ${COLORS.NEUTRAL.color_neutral_bg_250}`,
             },
             labelIconContainer: {
                 ...commonLabelIconContainerInputSearch,
@@ -1356,8 +755,9 @@ export const OPTION_STYLES = {
         },
         [OptionStateType.SELECTED]: {
             container: {
-                ...commonContainerInputSearch,
+                ...commonContainerInputOption,
                 background_color: COLORS.NEUTRAL.color_neutral_bg_200,
+                border_left: `${BORDERS.border_200} solid ${COLORS.BRAND.color_brand_border_50}`,
             },
             labelIconContainer: {
                 ...commonLabelIconContainerInputSearch,
@@ -1378,8 +778,9 @@ export const OPTION_STYLES = {
         },
         [OptionStateType.SELECTED_HOVER]: {
             container: {
-                ...commonContainerInputSearch,
+                ...commonContainerInputOption,
                 background_color: COLORS.NEUTRAL.color_neutral_bg_200,
+                border_left: `${BORDERS.border_200} solid ${COLORS.BRAND.color_brand_border_50}`,
             },
             labelIconContainer: {
                 ...commonLabelIconContainerInputSearch,
@@ -1400,8 +801,9 @@ export const OPTION_STYLES = {
         },
         [OptionStateType.MULTIPLE_SELECTED]: {
             container: {
-                ...commonContainerInputSearch,
+                ...commonContainerInputOption,
                 background_color: COLORS.NEUTRAL.color_neutral_bg_200,
+                border_left: `${BORDERS.border_200} solid ${COLORS.BRAND.color_brand_border_50}`,
             },
             labelIconContainer: {
                 ...commonLabelIconContainerInputSearch,
@@ -1422,8 +824,9 @@ export const OPTION_STYLES = {
         },
         [OptionStateType.MULTIPLE_SELECTED_HOVER]: {
             container: {
-                ...commonContainerInputSearch,
+                ...commonContainerInputOption,
                 background_color: COLORS.NEUTRAL.color_neutral_bg_200,
+                border_left: `${BORDERS.border_200} solid ${COLORS.BRAND.color_brand_border_50}`,
             },
             labelIconContainer: {
                 ...commonLabelIconContainerInputSearch,
@@ -1444,8 +847,9 @@ export const OPTION_STYLES = {
         },
         [OptionStateType.DISABLED]: {
             container: {
-                ...commonContainerInputSearch,
+                ...commonContainerInputOption,
                 background_color: COLORS.ACCENT.color_accent_default_bg_150,
+                border_left: `${BORDERS.border_200} solid ${COLORS.ACCENT.color_accent_default_bg_150}`,
             },
             labelIconContainer: {
                 ...commonLabelIconContainerInputSearch,
@@ -1465,11 +869,12 @@ export const OPTION_STYLES = {
             },
         },
     },
-    [OptionVariantType.HIGHLIGHTED]: {
+    [OptionVariantType.INPUT_OPTION_HIGHTLIGHTED]: {
         [OptionStateType.DEFAULT]: {
             container: {
                 ...commonContainerHighlighted,
                 background_color: COLORS.NEUTRAL.color_neutral_bg_250,
+                border_left: `${BORDERS.border_200} solid ${COLORS.NEUTRAL.color_neutral_bg_250}`,
             },
             labelIconContainer: {
                 ...commonLabelIconContainerHighlighted,
@@ -1491,6 +896,7 @@ export const OPTION_STYLES = {
             container: {
                 ...commonContainerHighlighted,
                 background_color: COLORS.NEUTRAL.color_neutral_bg_250,
+                border_left: `${BORDERS.border_200} solid ${COLORS.NEUTRAL.color_neutral_bg_250}`,
             },
             labelIconContainer: {
                 ...commonLabelIconContainerHighlighted,
@@ -1512,6 +918,7 @@ export const OPTION_STYLES = {
             container: {
                 ...commonContainerHighlighted,
                 background_color: COLORS.NEUTRAL.color_neutral_bg_200,
+                border_left: `${BORDERS.border_200} solid ${COLORS.NEUTRAL.color_neutral_bg_200}`,
             },
             labelIconContainer: {
                 ...commonLabelIconContainerHighlighted,
@@ -1533,6 +940,7 @@ export const OPTION_STYLES = {
             container: {
                 ...commonContainerHighlighted,
                 background_color: COLORS.NEUTRAL.color_neutral_bg_200,
+                border_left: `${BORDERS.border_200} solid ${COLORS.NEUTRAL.color_neutral_bg_200}`,
             },
             labelIconContainer: {
                 ...commonLabelIconContainerHighlighted,
@@ -1554,6 +962,7 @@ export const OPTION_STYLES = {
             container: {
                 ...commonContainerHighlighted,
                 background_color: COLORS.NEUTRAL.color_neutral_bg_200,
+                border_left: `${BORDERS.border_200} solid ${COLORS.NEUTRAL.color_neutral_bg_200}`,
             },
             labelIconContainer: {
                 ...commonLabelIconContainerHighlighted,
@@ -1575,6 +984,7 @@ export const OPTION_STYLES = {
             container: {
                 ...commonContainerHighlighted,
                 background_color: COLORS.NEUTRAL.color_neutral_bg_200,
+                border_left: `${BORDERS.border_200} solid ${COLORS.NEUTRAL.color_neutral_bg_200}`,
             },
             labelIconContainer: {
                 ...commonLabelIconContainerHighlighted,
@@ -1596,6 +1006,7 @@ export const OPTION_STYLES = {
             container: {
                 ...commonContainerHighlighted,
                 background_color: COLORS.NEUTRAL.color_neutral_bg_200,
+                border_left: `${BORDERS.border_200} solid ${COLORS.NEUTRAL.color_neutral_bg_200}`,
             },
             labelIconContainer: {
                 ...commonLabelIconContainerHighlighted,
@@ -1617,6 +1028,7 @@ export const OPTION_STYLES = {
             container: {
                 ...commonContainerHighlighted,
                 background_color: COLORS.ACCENT.color_accent_default_bg_150,
+                border_left: `${BORDERS.border_200} solid ${COLORS.ACCENT.color_accent_default_bg_150}`,
             },
             labelIconContainer: {
                 ...commonLabelIconContainerHighlighted,