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

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

@@ -51,31 +51,6 @@ const commonLabelIconContainerSideMenuLevel2 = {
 const commonLabelSideMenuLevel2 = {
     font_variant: variants_1.TextVariantType.PARAGRAPH_MEDIUM_EXTENDED,
 };
-const commonContainerAchorMenuLevel1 = {
-    ...commonContainer,
-    padding: `${foundations_1.SPACINGS.spacing_150} ${foundations_1.SPACINGS.spacing_300}`,
-};
-const commonLabelIconContainerAchorMenuLevel1 = {
-    display: 'flex',
-    align_items: 'initial',
-};
-const commonLabelAchorMenuLevel1 = {
-    font_variant: variants_1.TextVariantType.PARAGRAPH_CAPTION_EXTENDED,
-};
-const commonContainerAchorMenuLevel2 = {
-    ...commonContainer,
-    padding_top: foundations_1.SPACINGS.spacing_150,
-    padding_bottom: foundations_1.SPACINGS.spacing_150,
-    padding_left: foundations_1.SPACINGS.spacing_400,
-    padding_right: foundations_1.SPACINGS.spacing_300,
-};
-const commonLabelIconContainerAchorMenuLevel2 = {
-    display: 'flex',
-    align_items: 'initial',
-};
-const commonLabelAchorMenuLevel2 = {
-    font_variant: variants_1.TextVariantType.PARAGRAPH_CAPTION_EXTENDED,
-};
 const commonContaineCodeViewerSubtheme = {
     ...commonContainer,
     background_color: foundations_1.COLORS.NEUTRAL.color_neutral_bg_250,
@@ -91,7 +66,7 @@ const commonLabelCodeViewerSubtheme = {
     color: foundations_1.COLORS.NEUTRAL.color_neutral_font_50,
     font_weigh: foundations_1.FONT_WEIGHT.font_weight_400,
 };
-const commonContainerInputSearch = {
+const commonContainerInputOption = {
     ...commonContainer,
     padding: `${foundations_1.SPACINGS.spacing_150} ${foundations_1.SPACINGS.spacing_300}`,
 };
@@ -113,6 +88,7 @@ const commonLabelHightlightedInputSearch = {
 const commonIconInputSearch = {
     width: foundations_1.SIZES.size_250,
     height: foundations_1.SIZES.size_250,
+    color: foundations_1.COLORS.NEUTRAL.color_neutral_icon_50,
 };
 const commonSublabelInputSearch = {
     font_variant: variants_1.TextVariantType.PARAGRAPH_CAPTION_EXTENDED,
@@ -131,11 +107,11 @@ const commonLabelIconContainerHighlighted = {
 const commonLabelHighlighted = {
     font_variant: variants_1.TextVariantType.PARAGRAPH_MEDIUM_EXTENDED,
     color: foundations_1.COLORS.NEUTRAL.color_neutral_font_50,
-    font_weight: foundations_1.FONT_WEIGHT.font_weight_400,
+    font_weight: foundations_1.FONT_WEIGHT.font_weight_600,
 };
 const commonLabelHightlightedHighlighted = {
-    font_variant: variants_1.TextVariantType.PARAGRAPH_CAPTION_EXTENDED,
-    color: foundations_1.COLORS.ACCENT.color_accent_default_font_150,
+    font_variant: variants_1.TextVariantType.PARAGRAPH_MEDIUM_EXTENDED,
+    color: foundations_1.COLORS.NEUTRAL.color_neutral_font_50,
     font_weight: foundations_1.FONT_WEIGHT.font_weight_600,
 };
 const commonIconHighlighted = {
@@ -144,7 +120,7 @@ const commonIconHighlighted = {
     color: foundations_1.COLORS.NEUTRAL.color_neutral_icon_50,
 };
 const commonSublabelHighlighted = {
-    font_variant: variants_1.TextVariantType.PARAGRAPH_CAPTION_EXTENDED,
+    font_variant: variants_1.TextVariantType.PARAGRAPH_MEDIUM_EXTENDED,
     color: foundations_1.COLORS.NEUTRAL.color_neutral_font_50,
     font_weight: foundations_1.FONT_WEIGHT.font_weight_400,
 };
@@ -323,161 +299,6 @@ exports.OPTION_STYLES = {
             },
         },
     },
-    [variants_2.OptionVariantType.SIDE_MENU_LEVEL_1_BLACK]: {
-        [types_1.OptionStateType.DEFAULT]: {
-            container: {
-                ...commonContainerSideMenuLevel1,
-                background_color: foundations_1.COLORS.NEUTRAL.color_neutral_bg_50,
-                padding: foundations_1.SPACINGS.spacing_300,
-            },
-            labelIconContainer: {
-                ...commonLabelIconContainerSideMenuLevel1,
-            },
-            label: {
-                ...commonLabelSideMenuLevel1,
-                color: foundations_1.COLORS.NEUTRAL.color_neutral_font_250,
-                font_weight: foundations_1.FONT_WEIGHT.font_weight_400,
-            },
-            icon: {
-                ...commonIconSideMenuLevel1,
-                color: foundations_1.COLORS.NEUTRAL.color_neutral_icon_250,
-            },
-        },
-        [types_1.OptionStateType.HOVER]: {
-            container: {
-                ...commonContainerSideMenuLevel1,
-                background_color: foundations_1.COLORS.NEUTRAL.color_neutral_bg_200,
-                padding: foundations_1.SPACINGS.spacing_300,
-            },
-            labelIconContainer: {
-                ...commonLabelIconContainerSideMenuLevel1,
-            },
-            label: {
-                ...commonLabelSideMenuLevel1,
-                color: foundations_1.COLORS.NEUTRAL.color_neutral_font_50,
-                font_weight: foundations_1.FONT_WEIGHT.font_weight_400,
-            },
-            icon: {
-                ...commonIconSideMenuLevel1,
-                color: foundations_1.COLORS.NEUTRAL.color_neutral_icon_50,
-            },
-        },
-        [types_1.OptionStateType.SELECTED]: {
-            container: {
-                ...commonContainerSideMenuLevel1,
-                background_color: foundations_1.COLORS.NEUTRAL.color_neutral_bg_200,
-                padding: foundations_1.SPACINGS.spacing_300,
-            },
-            labelIconContainer: {
-                ...commonLabelIconContainerSideMenuLevel1,
-            },
-            label: {
-                ...commonLabelSideMenuLevel1,
-                color: foundations_1.COLORS.NEUTRAL.color_neutral_font_50,
-                font_weight: foundations_1.FONT_WEIGHT.font_weight_600,
-            },
-            icon: {
-                ...commonIconSideMenuLevel1,
-                color: foundations_1.COLORS.NEUTRAL.color_neutral_icon_50,
-            },
-        },
-        [types_1.OptionStateType.SELECTED_HOVER]: {
-            container: {
-                ...commonContainerSideMenuLevel1,
-                background_color: foundations_1.COLORS.NEUTRAL.color_neutral_bg_200,
-                padding: foundations_1.SPACINGS.spacing_300,
-            },
-            labelIconContainer: {
-                ...commonLabelIconContainerSideMenuLevel1,
-            },
-            label: {
-                ...commonLabelSideMenuLevel1,
-                color: foundations_1.COLORS.NEUTRAL.color_neutral_font_50,
-                font_weight: foundations_1.FONT_WEIGHT.font_weight_600,
-            },
-            icon: {
-                ...commonIconSideMenuLevel1,
-                color: foundations_1.COLORS.NEUTRAL.color_neutral_icon_50,
-            },
-        },
-        [types_1.OptionStateType.MULTIPLE_SELECTED]: {
-            container: {
-                ...commonContainerSideMenuLevel1,
-                background_color: foundations_1.COLORS.NEUTRAL.color_neutral_bg_200,
-                padding: foundations_1.SPACINGS.spacing_300,
-            },
-            labelIconContainer: {
-                ...commonLabelIconContainerSideMenuLevel1,
-            },
-            label: {
-                ...commonLabelSideMenuLevel1,
-                color: foundations_1.COLORS.NEUTRAL.color_neutral_font_50,
-                font_weight: foundations_1.FONT_WEIGHT.font_weight_600,
-            },
-            icon: {
-                ...commonIconSideMenuLevel1,
-                color: foundations_1.COLORS.NEUTRAL.color_neutral_icon_50,
-            },
-        },
-        [types_1.OptionStateType.MULTIPLE_SELECTED_HOVER]: {
-            container: {
-                ...commonContainerSideMenuLevel1,
-                background_color: foundations_1.COLORS.NEUTRAL.color_neutral_bg_200,
-                padding: foundations_1.SPACINGS.spacing_300,
-            },
-            labelIconContainer: {
-                ...commonLabelIconContainerSideMenuLevel1,
-            },
-            label: {
-                ...commonLabelSideMenuLevel1,
-                color: foundations_1.COLORS.NEUTRAL.color_neutral_font_50,
-                font_weight: foundations_1.FONT_WEIGHT.font_weight_600,
-            },
-            icon: {
-                ...commonIconSideMenuLevel1,
-                color: foundations_1.COLORS.NEUTRAL.color_neutral_icon_50,
-            },
-        },
-        [types_1.OptionStateType.DISABLED]: {
-            container: {
-                ...commonContainerSideMenuLevel1,
-                background_color: foundations_1.COLORS.NEUTRAL.color_neutral_bg_50,
-                padding: foundations_1.SPACINGS.spacing_300,
-            },
-            labelIconContainer: {
-                ...commonLabelIconContainerSideMenuLevel1,
-            },
-            label: {
-                ...commonLabelSideMenuLevel1,
-                color: foundations_1.COLORS.NEUTRAL.color_neutral_font_250,
-                font_weight: foundations_1.FONT_WEIGHT.font_weight_400,
-                text_decoration: 'line-through',
-            },
-            icon: {
-                ...commonIconSideMenuLevel1,
-                color: foundations_1.COLORS.NEUTRAL.color_neutral_icon_100,
-            },
-        },
-        [types_1.OptionStateType.FILLING]: {
-            container: {
-                ...commonContainerSideMenuLevel1,
-                background_color: foundations_1.COLORS.NEUTRAL.color_neutral_bg_250,
-                padding: foundations_1.SPACINGS.spacing_300,
-            },
-            labelIconContainer: {
-                ...commonLabelIconContainerSideMenuLevel1,
-            },
-            label: {
-                ...commonLabelSideMenuLevel1,
-                color: foundations_1.COLORS.NEUTRAL.color_neutral_font_50,
-                font_weight: foundations_1.FONT_WEIGHT.font_weight_400,
-            },
-            icon: {
-                ...commonIconSideMenuLevel1,
-                color: foundations_1.COLORS.NEUTRAL.color_neutral_icon_50,
-            },
-        },
-    },
     [variants_2.OptionVariantType.SIDE_MENU_LEVEL_2]: {
         [types_1.OptionStateType.DEFAULT]: {
             container: {
@@ -539,291 +360,63 @@ exports.OPTION_STYLES = {
                 font_weight: foundations_1.FONT_WEIGHT.font_weight_400,
             },
         },
-        [types_1.OptionStateType.MULTIPLE_SELECTED]: {
-            container: {
-                ...commonContainerSideMenuLevel2,
-                background_color: foundations_1.COLORS.NEUTRAL.color_neutral_bg_250,
-                border_left: `${foundations_1.BORDERS.border_100} solid ${foundations_1.COLORS.BRAND.color_brand_border_50}`,
-            },
-            labelIconContainer: {
-                ...commonLabelIconContainerSideMenuLevel2,
-            },
-            label: {
-                ...commonLabelSideMenuLevel2,
-                color: foundations_1.COLORS.NEUTRAL.color_neutral_font_50,
-                font_weight: foundations_1.FONT_WEIGHT.font_weight_600,
-            },
-        },
-        [types_1.OptionStateType.MULTIPLE_SELECTED_HOVER]: {
-            container: {
-                ...commonContainerSideMenuLevel2,
-                background_color: foundations_1.COLORS.NEUTRAL.color_neutral_bg_250,
-                border_left: `${foundations_1.BORDERS.border_100} solid ${foundations_1.COLORS.BRAND.color_brand_border_50}`,
-            },
-            labelIconContainer: {
-                ...commonLabelIconContainerSideMenuLevel2,
-            },
-            label: {
-                ...commonLabelSideMenuLevel2,
-                color: foundations_1.COLORS.NEUTRAL.color_neutral_font_50,
-                font_weight: foundations_1.FONT_WEIGHT.font_weight_400,
-            },
-        },
-        [types_1.OptionStateType.DISABLED]: {
-            container: {
-                ...commonContainerSideMenuLevel2,
-                background_color: foundations_1.COLORS.NEUTRAL.color_neutral_bg_250,
-                border_left: `${foundations_1.BORDERS.border_100} solid ${foundations_1.COLORS.NEUTRAL.color_neutral_bg_250}`,
-            },
-            labelIconContainer: {
-                ...commonLabelIconContainerSideMenuLevel2,
-            },
-            label: {
-                ...commonLabelSideMenuLevel2,
-                color: foundations_1.COLORS.NEUTRAL.color_neutral_font_50,
-                font_weight: foundations_1.FONT_WEIGHT.font_weight_400,
-            },
-        },
-        [types_1.OptionStateType.FILLING]: {
-            container: {
-                ...commonContainerSideMenuLevel2,
-                background_color: foundations_1.COLORS.NEUTRAL.color_neutral_bg_250,
-                border_left: `${foundations_1.BORDERS.border_100} solid ${foundations_1.COLORS.NEUTRAL.color_neutral_bg_250}`,
-            },
-            labelIconContainer: {
-                ...commonLabelIconContainerSideMenuLevel2,
-            },
-            label: {
-                ...commonLabelSideMenuLevel2,
-                color: foundations_1.COLORS.NEUTRAL.color_neutral_font_50,
-                font_weight: foundations_1.FONT_WEIGHT.font_weight_400,
-            },
-        },
-    },
-    [variants_2.OptionVariantType.ANCHOR_MENU_LEVEL_1]: {
-        [types_1.OptionStateType.DEFAULT]: {
-            container: {
-                ...commonContainerAchorMenuLevel1,
-                border_left: `${foundations_1.BORDERS.border_50} solid ${foundations_1.COLORS.NEUTRAL.color_neutral_border_200}`,
-            },
-            labelIconContainer: {
-                ...commonLabelIconContainerAchorMenuLevel1,
-            },
-            label: {
-                ...commonLabelAchorMenuLevel1,
-                color: foundations_1.COLORS.BRAND.color_brand_font_100,
-                font_weight: foundations_1.FONT_WEIGHT.font_weight_400,
-            },
-        },
-        [types_1.OptionStateType.HOVER]: {
-            container: {
-                ...commonContainerAchorMenuLevel1,
-                border_left: `${foundations_1.BORDERS.border_100} solid ${foundations_1.COLORS.NEUTRAL.color_neutral_border_200}`,
-            },
-            labelIconContainer: {
-                ...commonLabelIconContainerAchorMenuLevel1,
-            },
-            label: {
-                ...commonLabelAchorMenuLevel1,
-                color: foundations_1.COLORS.BRAND.color_brand_font_100,
-                font_weight: foundations_1.FONT_WEIGHT.font_weight_400,
-            },
-        },
-        [types_1.OptionStateType.SELECTED]: {
-            container: {
-                ...commonContainerAchorMenuLevel1,
-                border_left: `${foundations_1.BORDERS.border_200} solid ${foundations_1.COLORS.BRAND.color_brand_border_50}`,
-            },
-            labelIconContainer: {
-                ...commonLabelIconContainerAchorMenuLevel1,
-            },
-            label: {
-                ...commonLabelAchorMenuLevel1,
-                color: foundations_1.COLORS.BRAND.color_brand_font_100,
-                font_weight: foundations_1.FONT_WEIGHT.font_weight_600,
-            },
-        },
-        [types_1.OptionStateType.SELECTED_HOVER]: {
-            container: {
-                ...commonContainerAchorMenuLevel1,
-                border_left: `${foundations_1.BORDERS.border_200} solid ${foundations_1.COLORS.BRAND.color_brand_border_50}`,
-            },
-            labelIconContainer: {
-                ...commonLabelIconContainerAchorMenuLevel1,
-            },
-            label: {
-                ...commonLabelAchorMenuLevel1,
-                color: foundations_1.COLORS.BRAND.color_brand_font_100,
-                font_weight: foundations_1.FONT_WEIGHT.font_weight_600,
-            },
-        },
-        [types_1.OptionStateType.MULTIPLE_SELECTED]: {
-            container: {
-                ...commonContainerAchorMenuLevel1,
-                border_left: `${foundations_1.BORDERS.border_200} solid ${foundations_1.COLORS.BRAND.color_brand_border_50}`,
-            },
-            labelIconContainer: {
-                ...commonLabelIconContainerAchorMenuLevel1,
-            },
-            label: {
-                ...commonLabelAchorMenuLevel1,
-                color: foundations_1.COLORS.BRAND.color_brand_font_100,
-                font_weight: foundations_1.FONT_WEIGHT.font_weight_600,
-            },
-        },
-        [types_1.OptionStateType.MULTIPLE_SELECTED_HOVER]: {
-            container: {
-                ...commonContainerAchorMenuLevel1,
-                border_left: `${foundations_1.BORDERS.border_200} solid ${foundations_1.COLORS.BRAND.color_brand_border_50}`,
-            },
-            labelIconContainer: {
-                ...commonLabelIconContainerAchorMenuLevel1,
-            },
-            label: {
-                ...commonLabelAchorMenuLevel1,
-                color: foundations_1.COLORS.BRAND.color_brand_font_100,
-                font_weight: foundations_1.FONT_WEIGHT.font_weight_600,
-            },
-        },
-        [types_1.OptionStateType.DISABLED]: {
-            container: {
-                ...commonContainerAchorMenuLevel1,
-                border_left: `${foundations_1.BORDERS.border_50} solid ${foundations_1.COLORS.ACCENT.color_accent_default_bg_150}`,
-            },
-            labelIconContainer: {
-                ...commonLabelIconContainerAchorMenuLevel1,
-            },
-            label: {
-                ...commonLabelAchorMenuLevel1,
-                color: foundations_1.COLORS.BRAND.color_brand_font_100,
-                font_weight: foundations_1.FONT_WEIGHT.font_weight_400,
-            },
-        },
-        [types_1.OptionStateType.FILLING]: {
-            container: {
-                ...commonContainerAchorMenuLevel1,
-                border_left: `${foundations_1.BORDERS.border_50} solid ${foundations_1.COLORS.NEUTRAL.color_neutral_border_200}`,
-            },
-            labelIconContainer: {
-                ...commonLabelIconContainerAchorMenuLevel1,
-            },
-            label: {
-                ...commonLabelAchorMenuLevel1,
-                color: foundations_1.COLORS.BRAND.color_brand_font_100,
-                font_weight: foundations_1.FONT_WEIGHT.font_weight_400,
-            },
-        },
-    },
-    [variants_2.OptionVariantType.ANCHOR_MENU_LEVEL_2]: {
-        [types_1.OptionStateType.DEFAULT]: {
-            container: {
-                ...commonContainerAchorMenuLevel2,
-                border_left: `${foundations_1.BORDERS.border_50} solid ${foundations_1.COLORS.NEUTRAL.color_neutral_border_200}`,
-            },
-            labelIconContainer: {
-                ...commonLabelIconContainerAchorMenuLevel2,
-            },
-            label: {
-                ...commonLabelAchorMenuLevel2,
-                color: foundations_1.COLORS.BRAND.color_brand_font_100,
-                font_weight: foundations_1.FONT_WEIGHT.font_weight_400,
-            },
-        },
-        [types_1.OptionStateType.FILLING]: {
-            container: {
-                ...commonContainerAchorMenuLevel2,
-                border_left: `${foundations_1.BORDERS.border_50} solid ${foundations_1.COLORS.NEUTRAL.color_neutral_border_200}`,
-            },
-            labelIconContainer: {
-                ...commonLabelIconContainerAchorMenuLevel2,
-            },
-            label: {
-                ...commonLabelAchorMenuLevel2,
-                color: foundations_1.COLORS.BRAND.color_brand_font_100,
-                font_weight: foundations_1.FONT_WEIGHT.font_weight_400,
-            },
-        },
-        [types_1.OptionStateType.HOVER]: {
-            container: {
-                ...commonContainerAchorMenuLevel2,
-                border_left: `${foundations_1.BORDERS.border_100} solid ${foundations_1.COLORS.NEUTRAL.color_neutral_border_200}`,
-            },
-            labelIconContainer: {
-                ...commonLabelIconContainerAchorMenuLevel2,
-            },
-            label: {
-                ...commonLabelAchorMenuLevel2,
-                color: foundations_1.COLORS.BRAND.color_brand_font_100,
-                font_weight: foundations_1.FONT_WEIGHT.font_weight_400,
-            },
-        },
-        [types_1.OptionStateType.SELECTED]: {
-            container: {
-                ...commonContainerAchorMenuLevel2,
-                border_left: `${foundations_1.BORDERS.border_200} solid ${foundations_1.COLORS.BRAND.color_brand_border_50}`,
-            },
-            labelIconContainer: {
-                ...commonLabelIconContainerAchorMenuLevel2,
-            },
-            label: {
-                ...commonLabelAchorMenuLevel2,
-                color: foundations_1.COLORS.BRAND.color_brand_font_100,
-                font_weight: foundations_1.FONT_WEIGHT.font_weight_600,
-            },
-        },
-        [types_1.OptionStateType.SELECTED_HOVER]: {
+        [types_1.OptionStateType.MULTIPLE_SELECTED]: {
             container: {
-                ...commonContainerAchorMenuLevel2,
-                border_left: `${foundations_1.BORDERS.border_200} solid ${foundations_1.COLORS.BRAND.color_brand_border_50}`,
+                ...commonContainerSideMenuLevel2,
+                background_color: foundations_1.COLORS.NEUTRAL.color_neutral_bg_250,
+                border_left: `${foundations_1.BORDERS.border_100} solid ${foundations_1.COLORS.BRAND.color_brand_border_50}`,
             },
             labelIconContainer: {
-                ...commonLabelIconContainerAchorMenuLevel2,
+                ...commonLabelIconContainerSideMenuLevel2,
             },
             label: {
-                ...commonLabelAchorMenuLevel2,
-                color: foundations_1.COLORS.BRAND.color_brand_font_100,
+                ...commonLabelSideMenuLevel2,
+                color: foundations_1.COLORS.NEUTRAL.color_neutral_font_50,
                 font_weight: foundations_1.FONT_WEIGHT.font_weight_600,
             },
         },
-        [types_1.OptionStateType.MULTIPLE_SELECTED]: {
+        [types_1.OptionStateType.MULTIPLE_SELECTED_HOVER]: {
             container: {
-                ...commonContainerAchorMenuLevel2,
-                border_left: `${foundations_1.BORDERS.border_200} solid ${foundations_1.COLORS.BRAND.color_brand_border_50}`,
+                ...commonContainerSideMenuLevel2,
+                background_color: foundations_1.COLORS.NEUTRAL.color_neutral_bg_250,
+                border_left: `${foundations_1.BORDERS.border_100} solid ${foundations_1.COLORS.BRAND.color_brand_border_50}`,
             },
             labelIconContainer: {
-                ...commonLabelIconContainerAchorMenuLevel2,
+                ...commonLabelIconContainerSideMenuLevel2,
             },
             label: {
-                ...commonLabelAchorMenuLevel2,
-                color: foundations_1.COLORS.BRAND.color_brand_font_100,
-                font_weight: foundations_1.FONT_WEIGHT.font_weight_600,
+                ...commonLabelSideMenuLevel2,
+                color: foundations_1.COLORS.NEUTRAL.color_neutral_font_50,
+                font_weight: foundations_1.FONT_WEIGHT.font_weight_400,
             },
         },
-        [types_1.OptionStateType.MULTIPLE_SELECTED_HOVER]: {
+        [types_1.OptionStateType.DISABLED]: {
             container: {
-                ...commonContainerAchorMenuLevel2,
-                border_left: `${foundations_1.BORDERS.border_200} solid ${foundations_1.COLORS.BRAND.color_brand_border_50}`,
+                ...commonContainerSideMenuLevel2,
+                background_color: foundations_1.COLORS.NEUTRAL.color_neutral_bg_250,
+                border_left: `${foundations_1.BORDERS.border_100} solid ${foundations_1.COLORS.NEUTRAL.color_neutral_bg_250}`,
             },
             labelIconContainer: {
-                ...commonLabelIconContainerAchorMenuLevel2,
+                ...commonLabelIconContainerSideMenuLevel2,
             },
             label: {
-                ...commonLabelAchorMenuLevel2,
-                color: foundations_1.COLORS.BRAND.color_brand_font_100,
-                font_weight: foundations_1.FONT_WEIGHT.font_weight_600,
+                ...commonLabelSideMenuLevel2,
+                color: foundations_1.COLORS.NEUTRAL.color_neutral_font_50,
+                font_weight: foundations_1.FONT_WEIGHT.font_weight_400,
             },
         },
-        [types_1.OptionStateType.DISABLED]: {
+        [types_1.OptionStateType.FILLING]: {
             container: {
-                ...commonContainerAchorMenuLevel2,
-                border_left: `${foundations_1.BORDERS.border_50} solid ${foundations_1.COLORS.ACCENT.color_accent_default_bg_150}`,
+                ...commonContainerSideMenuLevel2,
+                background_color: foundations_1.COLORS.NEUTRAL.color_neutral_bg_250,
+                border_left: `${foundations_1.BORDERS.border_100} solid ${foundations_1.COLORS.NEUTRAL.color_neutral_bg_250}`,
             },
             labelIconContainer: {
-                ...commonLabelIconContainerAchorMenuLevel2,
+                ...commonLabelIconContainerSideMenuLevel2,
             },
             label: {
-                ...commonLabelAchorMenuLevel2,
-                color: foundations_1.COLORS.BRAND.color_brand_font_100,
+                ...commonLabelSideMenuLevel2,
+                color: foundations_1.COLORS.NEUTRAL.color_neutral_font_50,
                 font_weight: foundations_1.FONT_WEIGHT.font_weight_400,
             },
         },
@@ -1096,208 +689,12 @@ exports.OPTION_STYLES = {
             },
         },
     },
-    [variants_2.OptionVariantType.INPUT_DROPDOWN_DEFAULT]: {
+    [variants_2.OptionVariantType.INPUT_OPTION]: {
         [types_1.OptionStateType.DEFAULT]: {
             container: {
-                ...commonContainerSideMenuLevel1,
-                background_color: foundations_1.COLORS.NEUTRAL.color_neutral_bg_250,
-                border_left: `${foundations_1.BORDERS.border_200} solid ${foundations_1.COLORS.NEUTRAL.color_neutral_bg_250}`,
-                padding: `${foundations_1.SPACINGS.spacing_250} ${foundations_1.SPACINGS.spacing_300}`,
-            },
-            labelIconContainer: {
-                ...commonLabelIconContainerSideMenuLevel1,
-            },
-            label: {
-                ...commonLabelSideMenuLevel1,
-                color: foundations_1.COLORS.NEUTRAL.color_neutral_font_50,
-                font_weight: foundations_1.FONT_WEIGHT.font_weight_400,
-            },
-            labelHightlighted: {
-                ...commonLabelSideMenuLevel1,
-                color: foundations_1.COLORS.NEUTRAL.color_neutral_font_50,
-                font_weight: foundations_1.FONT_WEIGHT.font_weight_600,
-            },
-            icon: {
-                ...commonIconSideMenuLevel1,
-                color: foundations_1.COLORS.NEUTRAL.color_neutral_icon_50,
-            },
-        },
-        [types_1.OptionStateType.HOVER]: {
-            container: {
-                ...commonContainerSideMenuLevel1,
-                background_color: foundations_1.COLORS.NEUTRAL.color_neutral_bg_200,
-                border_left: `${foundations_1.BORDERS.border_200} solid ${foundations_1.COLORS.NEUTRAL.color_neutral_bg_200}`,
-                padding: `${foundations_1.SPACINGS.spacing_250} ${foundations_1.SPACINGS.spacing_300}`,
-            },
-            labelIconContainer: {
-                ...commonLabelIconContainerSideMenuLevel1,
-            },
-            label: {
-                ...commonLabelSideMenuLevel1,
-                color: foundations_1.COLORS.NEUTRAL.color_neutral_font_50,
-                font_weight: foundations_1.FONT_WEIGHT.font_weight_400,
-            },
-            labelHightlighted: {
-                ...commonLabelSideMenuLevel1,
-                color: foundations_1.COLORS.NEUTRAL.color_neutral_font_50,
-                font_weight: foundations_1.FONT_WEIGHT.font_weight_600,
-            },
-            icon: {
-                ...commonIconSideMenuLevel1,
-                color: foundations_1.COLORS.NEUTRAL.color_neutral_icon_50,
-            },
-        },
-        [types_1.OptionStateType.SELECTED]: {
-            container: {
-                ...commonContainerSideMenuLevel1,
-                background_color: foundations_1.COLORS.NEUTRAL.color_neutral_bg_200,
-                border_left: `${foundations_1.BORDERS.border_200} solid ${foundations_1.COLORS.BRAND.color_brand_border_50}`,
-                padding: `${foundations_1.SPACINGS.spacing_250} ${foundations_1.SPACINGS.spacing_300}`,
-            },
-            labelIconContainer: {
-                ...commonLabelIconContainerSideMenuLevel1,
-            },
-            label: {
-                ...commonLabelSideMenuLevel1,
-                color: foundations_1.COLORS.NEUTRAL.color_neutral_font_50,
-                font_weight: foundations_1.FONT_WEIGHT.font_weight_600,
-            },
-            labelHightlighted: {
-                ...commonLabelSideMenuLevel1,
-                color: foundations_1.COLORS.NEUTRAL.color_neutral_font_50,
-                font_weight: foundations_1.FONT_WEIGHT.font_weight_600,
-            },
-            icon: {
-                ...commonIconSideMenuLevel1,
-                color: foundations_1.COLORS.NEUTRAL.color_neutral_icon_50,
-            },
-        },
-        [types_1.OptionStateType.SELECTED_HOVER]: {
-            container: {
-                ...commonContainerSideMenuLevel1,
-                background_color: foundations_1.COLORS.NEUTRAL.color_neutral_bg_200,
-                border_left: `${foundations_1.BORDERS.border_200} solid ${foundations_1.COLORS.BRAND.color_brand_border_50}`,
-                padding: `${foundations_1.SPACINGS.spacing_250} ${foundations_1.SPACINGS.spacing_300}`,
-            },
-            labelIconContainer: {
-                ...commonLabelIconContainerSideMenuLevel1,
-            },
-            label: {
-                ...commonLabelSideMenuLevel1,
-                color: foundations_1.COLORS.NEUTRAL.color_neutral_font_50,
-                font_weight: foundations_1.FONT_WEIGHT.font_weight_600,
-            },
-            labelHightlighted: {
-                ...commonLabelSideMenuLevel1,
-                color: foundations_1.COLORS.NEUTRAL.color_neutral_font_50,
-                font_weight: foundations_1.FONT_WEIGHT.font_weight_600,
-            },
-            icon: {
-                ...commonIconSideMenuLevel1,
-                color: foundations_1.COLORS.NEUTRAL.color_neutral_icon_50,
-            },
-        },
-        [types_1.OptionStateType.MULTIPLE_SELECTED]: {
-            container: {
-                ...commonContainerSideMenuLevel1,
-                background_color: foundations_1.COLORS.NEUTRAL.color_neutral_bg_200,
-                border_left: `${foundations_1.BORDERS.border_200} solid ${foundations_1.COLORS.BRAND.color_brand_border_50}`,
-                padding: `${foundations_1.SPACINGS.spacing_250} ${foundations_1.SPACINGS.spacing_300}`,
-            },
-            labelIconContainer: {
-                ...commonLabelIconContainerSideMenuLevel1,
-            },
-            label: {
-                ...commonLabelSideMenuLevel1,
-                color: foundations_1.COLORS.NEUTRAL.color_neutral_font_50,
-                font_weight: foundations_1.FONT_WEIGHT.font_weight_600,
-            },
-            icon: {
-                ...commonIconSideMenuLevel1,
-                color: foundations_1.COLORS.NEUTRAL.color_neutral_icon_50,
-            },
-        },
-        [types_1.OptionStateType.MULTIPLE_SELECTED_HOVER]: {
-            container: {
-                ...commonContainerSideMenuLevel1,
-                background_color: foundations_1.COLORS.NEUTRAL.color_neutral_bg_200,
-                border_left: `${foundations_1.BORDERS.border_200} solid ${foundations_1.COLORS.BRAND.color_brand_border_50}`,
-                padding: `${foundations_1.SPACINGS.spacing_250} ${foundations_1.SPACINGS.spacing_300}`,
-            },
-            labelIconContainer: {
-                ...commonLabelIconContainerSideMenuLevel1,
-            },
-            label: {
-                ...commonLabelSideMenuLevel1,
-                color: foundations_1.COLORS.NEUTRAL.color_neutral_font_50,
-                font_weight: foundations_1.FONT_WEIGHT.font_weight_600,
-            },
-            labelHightlighted: {
-                ...commonLabelSideMenuLevel1,
-                color: foundations_1.COLORS.NEUTRAL.color_neutral_font_50,
-                font_weight: foundations_1.FONT_WEIGHT.font_weight_600,
-            },
-            icon: {
-                ...commonIconSideMenuLevel1,
-                color: foundations_1.COLORS.NEUTRAL.color_neutral_icon_50,
-            },
-        },
-        [types_1.OptionStateType.DISABLED]: {
-            container: {
-                ...commonContainerSideMenuLevel1,
-                background_color: foundations_1.COLORS.ACCENT.color_accent_default_bg_150,
-                border_left: `${foundations_1.BORDERS.border_200} solid ${foundations_1.COLORS.ACCENT.color_accent_default_bg_150}`,
-                padding: `${foundations_1.SPACINGS.spacing_250} ${foundations_1.SPACINGS.spacing_300}`,
-            },
-            labelIconContainer: {
-                ...commonLabelIconContainerSideMenuLevel1,
-            },
-            label: {
-                ...commonLabelSideMenuLevel1,
-                color: foundations_1.COLORS.NEUTRAL.color_neutral_font_50,
-                font_weight: foundations_1.FONT_WEIGHT.font_weight_400,
-            },
-            labelHightlighted: {
-                ...commonLabelSideMenuLevel1,
-                color: foundations_1.COLORS.NEUTRAL.color_neutral_font_50,
-                font_weight: foundations_1.FONT_WEIGHT.font_weight_400,
-            },
-            icon: {
-                ...commonIconSideMenuLevel1,
-                color: foundations_1.COLORS.NEUTRAL.color_neutral_icon_100,
-            },
-        },
-        [types_1.OptionStateType.FILLING]: {
-            container: {
-                ...commonContainerSideMenuLevel1,
+                ...commonContainerInputOption,
                 background_color: foundations_1.COLORS.NEUTRAL.color_neutral_bg_250,
                 border_left: `${foundations_1.BORDERS.border_200} solid ${foundations_1.COLORS.NEUTRAL.color_neutral_bg_250}`,
-                padding: `${foundations_1.SPACINGS.spacing_250} ${foundations_1.SPACINGS.spacing_300}`,
-            },
-            labelIconContainer: {
-                ...commonLabelIconContainerSideMenuLevel1,
-            },
-            label: {
-                ...commonLabelSideMenuLevel1,
-                color: foundations_1.COLORS.NEUTRAL.color_neutral_font_50,
-                font_weight: foundations_1.FONT_WEIGHT.font_weight_400,
-            },
-            labelHightlighted: {
-                ...commonLabelSideMenuLevel1,
-                color: foundations_1.COLORS.NEUTRAL.color_neutral_font_50,
-                font_weight: foundations_1.FONT_WEIGHT.font_weight_600,
-            },
-            icon: {
-                ...commonIconSideMenuLevel1,
-                color: foundations_1.COLORS.NEUTRAL.color_neutral_icon_50,
-            },
-        },
-    },
-    [variants_2.OptionVariantType.INPUT_SEARCH]: {
-        [types_1.OptionStateType.DEFAULT]: {
-            container: {
-                ...commonContainerInputSearch,
-                background_color: foundations_1.COLORS.NEUTRAL.color_neutral_bg_250,
             },
             labelIconContainer: {
                 ...commonLabelIconContainerInputSearch,
@@ -1315,10 +712,11 @@ exports.OPTION_STYLES = {
                 ...commonSublabelInputSearch,
             },
         },
-        [types_1.OptionStateType.FILLING]: {
+        [types_1.OptionStateType.HOVER]: {
             container: {
-                ...commonContainerInputSearch,
-                background_color: foundations_1.COLORS.NEUTRAL.color_neutral_bg_250,
+                ...commonContainerInputOption,
+                background_color: foundations_1.COLORS.NEUTRAL.color_neutral_bg_200,
+                border_left: `${foundations_1.BORDERS.border_200} solid ${foundations_1.COLORS.NEUTRAL.color_neutral_bg_200}`,
             },
             labelIconContainer: {
                 ...commonLabelIconContainerInputSearch,
@@ -1336,10 +734,11 @@ exports.OPTION_STYLES = {
                 ...commonSublabelInputSearch,
             },
         },
-        [types_1.OptionStateType.HOVER]: {
+        [types_1.OptionStateType.FILLING]: {
             container: {
-                ...commonContainerInputSearch,
-                background_color: foundations_1.COLORS.NEUTRAL.color_neutral_bg_200,
+                ...commonContainerInputOption,
+                background_color: foundations_1.COLORS.NEUTRAL.color_neutral_bg_250,
+                border_left: `${foundations_1.BORDERS.border_200} solid ${foundations_1.COLORS.NEUTRAL.color_neutral_bg_250}`,
             },
             labelIconContainer: {
                 ...commonLabelIconContainerInputSearch,
@@ -1359,8 +758,9 @@ exports.OPTION_STYLES = {
         },
         [types_1.OptionStateType.SELECTED]: {
             container: {
-                ...commonContainerInputSearch,
+                ...commonContainerInputOption,
                 background_color: foundations_1.COLORS.NEUTRAL.color_neutral_bg_200,
+                border_left: `${foundations_1.BORDERS.border_200} solid ${foundations_1.COLORS.BRAND.color_brand_border_50}`,
             },
             labelIconContainer: {
                 ...commonLabelIconContainerInputSearch,
@@ -1381,8 +781,9 @@ exports.OPTION_STYLES = {
         },
         [types_1.OptionStateType.SELECTED_HOVER]: {
             container: {
-                ...commonContainerInputSearch,
+                ...commonContainerInputOption,
                 background_color: foundations_1.COLORS.NEUTRAL.color_neutral_bg_200,
+                border_left: `${foundations_1.BORDERS.border_200} solid ${foundations_1.COLORS.BRAND.color_brand_border_50}`,
             },
             labelIconContainer: {
                 ...commonLabelIconContainerInputSearch,
@@ -1403,8 +804,9 @@ exports.OPTION_STYLES = {
         },
         [types_1.OptionStateType.MULTIPLE_SELECTED]: {
             container: {
-                ...commonContainerInputSearch,
+                ...commonContainerInputOption,
                 background_color: foundations_1.COLORS.NEUTRAL.color_neutral_bg_200,
+                border_left: `${foundations_1.BORDERS.border_200} solid ${foundations_1.COLORS.BRAND.color_brand_border_50}`,
             },
             labelIconContainer: {
                 ...commonLabelIconContainerInputSearch,
@@ -1425,8 +827,9 @@ exports.OPTION_STYLES = {
         },
         [types_1.OptionStateType.MULTIPLE_SELECTED_HOVER]: {
             container: {
-                ...commonContainerInputSearch,
+                ...commonContainerInputOption,
                 background_color: foundations_1.COLORS.NEUTRAL.color_neutral_bg_200,
+                border_left: `${foundations_1.BORDERS.border_200} solid ${foundations_1.COLORS.BRAND.color_brand_border_50}`,
             },
             labelIconContainer: {
                 ...commonLabelIconContainerInputSearch,
@@ -1447,8 +850,9 @@ exports.OPTION_STYLES = {
         },
         [types_1.OptionStateType.DISABLED]: {
             container: {
-                ...commonContainerInputSearch,
+                ...commonContainerInputOption,
                 background_color: foundations_1.COLORS.ACCENT.color_accent_default_bg_150,
+                border_left: `${foundations_1.BORDERS.border_200} solid ${foundations_1.COLORS.ACCENT.color_accent_default_bg_150}`,
             },
             labelIconContainer: {
                 ...commonLabelIconContainerInputSearch,
@@ -1468,11 +872,12 @@ exports.OPTION_STYLES = {
             },
         },
     },
-    [variants_2.OptionVariantType.HIGHLIGHTED]: {
+    [variants_2.OptionVariantType.INPUT_OPTION_HIGHTLIGHTED]: {
         [types_1.OptionStateType.DEFAULT]: {
             container: {
                 ...commonContainerHighlighted,
                 background_color: foundations_1.COLORS.NEUTRAL.color_neutral_bg_250,
+                border_left: `${foundations_1.BORDERS.border_200} solid ${foundations_1.COLORS.NEUTRAL.color_neutral_bg_250}`,
             },
             labelIconContainer: {
                 ...commonLabelIconContainerHighlighted,
@@ -1494,6 +899,7 @@ exports.OPTION_STYLES = {
             container: {
                 ...commonContainerHighlighted,
                 background_color: foundations_1.COLORS.NEUTRAL.color_neutral_bg_250,
+                border_left: `${foundations_1.BORDERS.border_200} solid ${foundations_1.COLORS.NEUTRAL.color_neutral_bg_250}`,
             },
             labelIconContainer: {
                 ...commonLabelIconContainerHighlighted,
@@ -1515,6 +921,7 @@ exports.OPTION_STYLES = {
             container: {
                 ...commonContainerHighlighted,
                 background_color: foundations_1.COLORS.NEUTRAL.color_neutral_bg_200,
+                border_left: `${foundations_1.BORDERS.border_200} solid ${foundations_1.COLORS.NEUTRAL.color_neutral_bg_200}`,
             },
             labelIconContainer: {
                 ...commonLabelIconContainerHighlighted,
@@ -1536,6 +943,7 @@ exports.OPTION_STYLES = {
             container: {
                 ...commonContainerHighlighted,
                 background_color: foundations_1.COLORS.NEUTRAL.color_neutral_bg_200,
+                border_left: `${foundations_1.BORDERS.border_200} solid ${foundations_1.COLORS.NEUTRAL.color_neutral_bg_200}`,
             },
             labelIconContainer: {
                 ...commonLabelIconContainerHighlighted,
@@ -1557,6 +965,7 @@ exports.OPTION_STYLES = {
             container: {
                 ...commonContainerHighlighted,
                 background_color: foundations_1.COLORS.NEUTRAL.color_neutral_bg_200,
+                border_left: `${foundations_1.BORDERS.border_200} solid ${foundations_1.COLORS.NEUTRAL.color_neutral_bg_200}`,
             },
             labelIconContainer: {
                 ...commonLabelIconContainerHighlighted,
@@ -1578,6 +987,7 @@ exports.OPTION_STYLES = {
             container: {
                 ...commonContainerHighlighted,
                 background_color: foundations_1.COLORS.NEUTRAL.color_neutral_bg_200,
+                border_left: `${foundations_1.BORDERS.border_200} solid ${foundations_1.COLORS.NEUTRAL.color_neutral_bg_200}`,
             },
             labelIconContainer: {
                 ...commonLabelIconContainerHighlighted,
@@ -1599,6 +1009,7 @@ exports.OPTION_STYLES = {
             container: {
                 ...commonContainerHighlighted,
                 background_color: foundations_1.COLORS.NEUTRAL.color_neutral_bg_200,
+                border_left: `${foundations_1.BORDERS.border_200} solid ${foundations_1.COLORS.NEUTRAL.color_neutral_bg_200}`,
             },
             labelIconContainer: {
                 ...commonLabelIconContainerHighlighted,
@@ -1620,6 +1031,7 @@ exports.OPTION_STYLES = {
             container: {
                 ...commonContainerHighlighted,
                 background_color: foundations_1.COLORS.ACCENT.color_accent_default_bg_150,
+                border_left: `${foundations_1.BORDERS.border_200} solid ${foundations_1.COLORS.ACCENT.color_accent_default_bg_150}`,
             },
             labelIconContainer: {
                 ...commonLabelIconContainerHighlighted,