@kubit-ui-web/react-components/dist/cjs/designSystem/kubit/components/option/styles.js

Kubit React Components is a customizable, accessible library of React web components, designed to enhance your application's user experience

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.OPTION_STYLES = void 0;
const state_1 = require("../../../../components/option/types/state");
const breakpoints_1 = require("../../../../types/breakpoints/breakpoints");
const borders_1 = require("../../foundations/borders");
const colors_1 = require("../../foundations/colors");
const sizes_1 = require("../../foundations/sizes");
const spacings_1 = require("../../foundations/spacings");
const typography_1 = require("../../foundations/typography");
const variants_1 = require("../text/variants");
const variants_2 = require("./variants");
const commonContainer = {
    position: 'relative',
    display: 'flex',
    cursor: 'pointer',
    width: '100%',
    text_decoration: 'none',
};
const commonContainerSideMenuLevel1 = {
    ...commonContainer,
    padding: `${spacings_1.SPACINGS.spacing_150} ${spacings_1.SPACINGS.spacing_300}`,
};
const commonContainerInverted = {
    ...commonContainer,
    padding_top: spacings_1.SPACINGS.spacing_250,
    padding_bottom: spacings_1.SPACINGS.spacing_250,
    padding_left: spacings_1.SPACINGS.spacing_50,
    padding_right: spacings_1.SPACINGS.spacing_50,
    border_radius: borders_1.RADIUS.radius_50,
};
const commonLabelIconContainerSideMenuLevel1 = {
    display: 'flex',
    align_items: 'initial',
    gap: spacings_1.SPACINGS.spacing_150,
};
const commonLabelSideMenuLevel1 = {
    font_variant: variants_1.TextVariantType.PARAGRAPH_MEDIUM_EXTENDED,
};
const commonIconSideMenuLevel1 = {
    width: sizes_1.SIZES.size_250,
    height: sizes_1.SIZES.size_250,
};
const commonContainerSideMenuLevel2 = {
    ...commonContainer,
    padding_top: spacings_1.SPACINGS.spacing_150,
    padding_bottom: spacings_1.SPACINGS.spacing_150,
    padding_left: spacings_1.SPACINGS.spacing_400,
    padding_right: spacings_1.SPACINGS.spacing_150,
};
const commonLabelIconContainerSideMenuLevel2 = {
    display: 'flex',
    align_items: 'initial',
};
const commonLabelSideMenuLevel2 = {
    font_variant: variants_1.TextVariantType.PARAGRAPH_MEDIUM_EXTENDED,
};
const commonContaineCodeViewerSubtheme = {
    ...commonContainer,
    background_color: colors_1.COLORS.NEUTRAL.color_neutral_bg_250,
    padding: `${spacings_1.SPACINGS.spacing_250} ${spacings_1.SPACINGS.spacing_300}`,
    border_left: `${borders_1.BORDERS.border_200} solid ${colors_1.COLORS.NEUTRAL.color_neutral_bg_250}`,
};
const commonLabelIconContainerCodeViewerSubtheme = {
    display: 'flex',
    align_items: 'initial',
};
const commonLabelCodeViewerSubtheme = {
    font_variant: variants_1.TextVariantType.PARAGRAPH_MEDIUM_EXTENDED,
    color: colors_1.COLORS.NEUTRAL.color_neutral_font_50,
    font_weigh: typography_1.FONT_WEIGHT.font_weight_400,
};
const commonContainerInputOption = {
    ...commonContainer,
    padding: `${spacings_1.SPACINGS.spacing_150} ${spacings_1.SPACINGS.spacing_300}`,
};
const commonLabelIconContainerInputSearch = {
    display: 'flex',
    align_items: 'initial',
    gap: spacings_1.SPACINGS.spacing_150,
};
const commonLabelInputSearch = {
    font_variant: variants_1.TextVariantType.PARAGRAPH_MEDIUM_EXTENDED,
    color: colors_1.COLORS.NEUTRAL.color_neutral_font_50,
    font_weight: typography_1.FONT_WEIGHT.font_weight_400,
};
const commonLabelHightlightedInputSearch = {
    font_variant: variants_1.TextVariantType.PARAGRAPH_MEDIUM_EXTENDED,
    color: colors_1.COLORS.NEUTRAL.color_neutral_font_50,
    font_weight: typography_1.FONT_WEIGHT.font_weight_600,
};
const commonIconInputSearch = {
    width: sizes_1.SIZES.size_250,
    height: sizes_1.SIZES.size_250,
    color: colors_1.COLORS.NEUTRAL.color_neutral_icon_50,
};
const commonSublabelInputSearch = {
    font_variant: variants_1.TextVariantType.PARAGRAPH_CAPTION_EXTENDED,
    color: colors_1.COLORS.NEUTRAL.color_neutral_font_50,
    font_weight: typography_1.FONT_WEIGHT.font_weight_400,
};
const commonContainerHighlighted = {
    ...commonContainer,
    padding: `${spacings_1.SPACINGS.spacing_150} ${spacings_1.SPACINGS.spacing_300}`,
};
const commonLabelIconContainerHighlighted = {
    display: 'flex',
    align_items: 'initial',
    gap: spacings_1.SPACINGS.spacing_150,
};
const commonLabelHighlighted = {
    font_variant: variants_1.TextVariantType.PARAGRAPH_MEDIUM_EXTENDED,
    color: colors_1.COLORS.NEUTRAL.color_neutral_font_50,
    font_weight: typography_1.FONT_WEIGHT.font_weight_600,
};
const commonLabelHightlightedHighlighted = {
    font_variant: variants_1.TextVariantType.PARAGRAPH_MEDIUM_EXTENDED,
    color: colors_1.COLORS.NEUTRAL.color_neutral_font_50,
    font_weight: typography_1.FONT_WEIGHT.font_weight_600,
};
const commonIconHighlighted = {
    width: sizes_1.SIZES.size_250,
    height: sizes_1.SIZES.size_250,
    color: colors_1.COLORS.NEUTRAL.color_neutral_icon_50,
};
const commonSublabelHighlighted = {
    font_variant: variants_1.TextVariantType.PARAGRAPH_MEDIUM_EXTENDED,
    color: colors_1.COLORS.NEUTRAL.color_neutral_font_50,
    font_weight: typography_1.FONT_WEIGHT.font_weight_400,
};
const commonContainerTopbar = {
    ...commonContainer,
    padding_left: spacings_1.SPACINGS.spacing_150,
    padding_top: spacings_1.SPACINGS.spacing_100,
};
const commonLabelIconContainerTopbar = {
    display: 'flex',
    align_items: 'initial',
};
const commonLabelTopbar = {
    font_variant: variants_1.TextVariantType.PARAGRAPH_CAPTION_EXTENDED,
};
const commonTopbar = {
    container: {
        ...commonContainerTopbar,
    },
    labelIconContainer: {
        ...commonLabelIconContainerTopbar,
    },
};
exports.OPTION_STYLES = {
    [variants_2.OptionVariantType.SIDE_MENU_LEVEL_1]: {
        [state_1.OptionStateType.DEFAULT]: {
            container: {
                ...commonContainerSideMenuLevel1,
                background_color: colors_1.COLORS.NEUTRAL.color_neutral_bg_250,
                border_left: `${borders_1.BORDERS.border_200} solid ${colors_1.COLORS.NEUTRAL.color_neutral_bg_250}`,
            },
            labelIconContainer: {
                ...commonLabelIconContainerSideMenuLevel1,
            },
            label: {
                ...commonLabelSideMenuLevel1,
                color: colors_1.COLORS.NEUTRAL.color_neutral_font_50,
                font_weight: typography_1.FONT_WEIGHT.font_weight_400,
            },
            icon: {
                ...commonIconSideMenuLevel1,
                color: colors_1.COLORS.NEUTRAL.color_neutral_icon_50,
            },
        },
        [state_1.OptionStateType.HOVER]: {
            container: {
                ...commonContainerSideMenuLevel1,
                background_color: colors_1.COLORS.NEUTRAL.color_neutral_bg_200,
                border_left: `${borders_1.BORDERS.border_200} solid ${colors_1.COLORS.NEUTRAL.color_neutral_bg_200}`,
            },
            labelIconContainer: {
                ...commonLabelIconContainerSideMenuLevel1,
            },
            label: {
                ...commonLabelSideMenuLevel1,
                color: colors_1.COLORS.NEUTRAL.color_neutral_font_50,
                font_weight: typography_1.FONT_WEIGHT.font_weight_400,
            },
            icon: {
                ...commonIconSideMenuLevel1,
                color: colors_1.COLORS.NEUTRAL.color_neutral_icon_50,
            },
        },
        [state_1.OptionStateType.SELECTED]: {
            container: {
                ...commonContainerSideMenuLevel1,
                background_color: colors_1.COLORS.NEUTRAL.color_neutral_bg_200,
                border_left: `${borders_1.BORDERS.border_200} solid ${colors_1.COLORS.BRAND.color_brand_border_50}`,
            },
            labelIconContainer: {
                ...commonLabelIconContainerSideMenuLevel1,
            },
            label: {
                ...commonLabelSideMenuLevel1,
                color: colors_1.COLORS.NEUTRAL.color_neutral_font_50,
                font_weight: typography_1.FONT_WEIGHT.font_weight_600,
            },
            icon: {
                ...commonIconSideMenuLevel1,
                color: colors_1.COLORS.NEUTRAL.color_neutral_icon_50,
            },
        },
        [state_1.OptionStateType.SELECTED_HOVER]: {
            container: {
                ...commonContainerSideMenuLevel1,
                background_color: colors_1.COLORS.NEUTRAL.color_neutral_bg_200,
                border_left: `${borders_1.BORDERS.border_200} solid ${colors_1.COLORS.BRAND.color_brand_border_50}`,
            },
            labelIconContainer: {
                ...commonLabelIconContainerSideMenuLevel1,
            },
            label: {
                ...commonLabelSideMenuLevel1,
                color: colors_1.COLORS.NEUTRAL.color_neutral_font_50,
                font_weight: typography_1.FONT_WEIGHT.font_weight_600,
            },
            icon: {
                ...commonIconSideMenuLevel1,
                color: colors_1.COLORS.NEUTRAL.color_neutral_icon_50,
            },
        },
        [state_1.OptionStateType.MULTIPLE_SELECTED]: {
            container: {
                ...commonContainerSideMenuLevel1,
                background_color: colors_1.COLORS.NEUTRAL.color_neutral_bg_200,
                border_left: `${borders_1.BORDERS.border_200} solid ${colors_1.COLORS.BRAND.color_brand_border_50}`,
            },
            labelIconContainer: {
                ...commonLabelIconContainerSideMenuLevel1,
            },
            label: {
                ...commonLabelSideMenuLevel1,
                color: colors_1.COLORS.NEUTRAL.color_neutral_font_50,
                font_weight: typography_1.FONT_WEIGHT.font_weight_600,
            },
            icon: {
                ...commonIconSideMenuLevel1,
                color: colors_1.COLORS.NEUTRAL.color_neutral_icon_50,
            },
        },
        [state_1.OptionStateType.MULTIPLE_SELECTED_HOVER]: {
            container: {
                ...commonContainerSideMenuLevel1,
                background_color: colors_1.COLORS.NEUTRAL.color_neutral_bg_200,
                border_left: `${borders_1.BORDERS.border_200} solid ${colors_1.COLORS.BRAND.color_brand_border_50}`,
            },
            labelIconContainer: {
                ...commonLabelIconContainerSideMenuLevel1,
            },
            label: {
                ...commonLabelSideMenuLevel1,
                color: colors_1.COLORS.NEUTRAL.color_neutral_font_50,
                font_weight: typography_1.FONT_WEIGHT.font_weight_600,
            },
            icon: {
                ...commonIconSideMenuLevel1,
                color: colors_1.COLORS.NEUTRAL.color_neutral_icon_50,
            },
        },
        [state_1.OptionStateType.DISABLED]: {
            container: {
                ...commonContainerSideMenuLevel1,
                background_color: colors_1.COLORS.ACCENT.color_accent_default_bg_150,
                border_left: `${borders_1.BORDERS.border_200} solid ${colors_1.COLORS.ACCENT.color_accent_default_bg_150}`,
            },
            labelIconContainer: {
                ...commonLabelIconContainerSideMenuLevel1,
            },
            label: {
                ...commonLabelSideMenuLevel1,
                color: colors_1.COLORS.NEUTRAL.color_neutral_font_50,
                font_weight: typography_1.FONT_WEIGHT.font_weight_400,
            },
            icon: {
                ...commonIconSideMenuLevel1,
                color: colors_1.COLORS.NEUTRAL.color_neutral_icon_100,
            },
        },
        [state_1.OptionStateType.FILLING]: {
            container: {
                ...commonContainerSideMenuLevel1,
                background_color: colors_1.COLORS.NEUTRAL.color_neutral_bg_250,
                border_left: `${borders_1.BORDERS.border_200} solid ${colors_1.COLORS.NEUTRAL.color_neutral_bg_250}`,
            },
            labelIconContainer: {
                ...commonLabelIconContainerSideMenuLevel1,
            },
            label: {
                ...commonLabelSideMenuLevel1,
                color: colors_1.COLORS.NEUTRAL.color_neutral_font_50,
                font_weight: typography_1.FONT_WEIGHT.font_weight_400,
            },
            icon: {
                ...commonIconSideMenuLevel1,
                color: colors_1.COLORS.NEUTRAL.color_neutral_icon_50,
            },
        },
    },
    [variants_2.OptionVariantType.SIDE_MENU_LEVEL_2]: {
        [state_1.OptionStateType.DEFAULT]: {
            container: {
                ...commonContainerSideMenuLevel2,
                background_color: colors_1.COLORS.NEUTRAL.color_neutral_bg_250,
                border_left: `${borders_1.BORDERS.border_100} solid ${colors_1.COLORS.NEUTRAL.color_neutral_bg_250}`,
            },
            labelIconContainer: {
                ...commonLabelIconContainerSideMenuLevel2,
            },
            label: {
                ...commonLabelSideMenuLevel2,
                color: colors_1.COLORS.NEUTRAL.color_neutral_font_50,
                font_weight: typography_1.FONT_WEIGHT.font_weight_400,
            },
        },
        [state_1.OptionStateType.HOVER]: {
            container: {
                ...commonContainerSideMenuLevel2,
                background_color: colors_1.COLORS.NEUTRAL.color_neutral_bg_250,
                border_left: `${borders_1.BORDERS.border_100} solid ${colors_1.COLORS.NEUTRAL.color_neutral_icon_200}`,
            },
            labelIconContainer: {
                ...commonLabelIconContainerSideMenuLevel2,
            },
            label: {
                ...commonLabelSideMenuLevel2,
                color: colors_1.COLORS.NEUTRAL.color_neutral_font_50,
                font_weight: typography_1.FONT_WEIGHT.font_weight_400,
            },
        },
        [state_1.OptionStateType.SELECTED]: {
            container: {
                ...commonContainerSideMenuLevel2,
                background_color: colors_1.COLORS.NEUTRAL.color_neutral_bg_250,
                border_left: `${borders_1.BORDERS.border_100} solid ${colors_1.COLORS.BRAND.color_brand_border_50}`,
            },
            labelIconContainer: {
                ...commonLabelIconContainerSideMenuLevel2,
            },
            label: {
                ...commonLabelSideMenuLevel2,
                color: colors_1.COLORS.NEUTRAL.color_neutral_font_50,
                font_weight: typography_1.FONT_WEIGHT.font_weight_600,
            },
        },
        [state_1.OptionStateType.SELECTED_HOVER]: {
            container: {
                ...commonContainerSideMenuLevel2,
                background_color: colors_1.COLORS.NEUTRAL.color_neutral_bg_250,
                border_left: `${borders_1.BORDERS.border_100} solid ${colors_1.COLORS.BRAND.color_brand_border_50}`,
            },
            labelIconContainer: {
                ...commonLabelIconContainerSideMenuLevel2,
            },
            label: {
                ...commonLabelSideMenuLevel2,
                color: colors_1.COLORS.NEUTRAL.color_neutral_font_50,
                font_weight: typography_1.FONT_WEIGHT.font_weight_400,
            },
        },
        [state_1.OptionStateType.MULTIPLE_SELECTED]: {
            container: {
                ...commonContainerSideMenuLevel2,
                background_color: colors_1.COLORS.NEUTRAL.color_neutral_bg_250,
                border_left: `${borders_1.BORDERS.border_100} solid ${colors_1.COLORS.BRAND.color_brand_border_50}`,
            },
            labelIconContainer: {
                ...commonLabelIconContainerSideMenuLevel2,
            },
            label: {
                ...commonLabelSideMenuLevel2,
                color: colors_1.COLORS.NEUTRAL.color_neutral_font_50,
                font_weight: typography_1.FONT_WEIGHT.font_weight_600,
            },
        },
        [state_1.OptionStateType.MULTIPLE_SELECTED_HOVER]: {
            container: {
                ...commonContainerSideMenuLevel2,
                background_color: colors_1.COLORS.NEUTRAL.color_neutral_bg_250,
                border_left: `${borders_1.BORDERS.border_100} solid ${colors_1.COLORS.BRAND.color_brand_border_50}`,
            },
            labelIconContainer: {
                ...commonLabelIconContainerSideMenuLevel2,
            },
            label: {
                ...commonLabelSideMenuLevel2,
                color: colors_1.COLORS.NEUTRAL.color_neutral_font_50,
                font_weight: typography_1.FONT_WEIGHT.font_weight_400,
            },
        },
        [state_1.OptionStateType.DISABLED]: {
            container: {
                ...commonContainerSideMenuLevel2,
                background_color: colors_1.COLORS.NEUTRAL.color_neutral_bg_250,
                border_left: `${borders_1.BORDERS.border_100} solid ${colors_1.COLORS.NEUTRAL.color_neutral_bg_250}`,
            },
            labelIconContainer: {
                ...commonLabelIconContainerSideMenuLevel2,
            },
            label: {
                ...commonLabelSideMenuLevel2,
                color: colors_1.COLORS.NEUTRAL.color_neutral_font_50,
                font_weight: typography_1.FONT_WEIGHT.font_weight_400,
            },
        },
        [state_1.OptionStateType.FILLING]: {
            container: {
                ...commonContainerSideMenuLevel2,
                background_color: colors_1.COLORS.NEUTRAL.color_neutral_bg_250,
                border_left: `${borders_1.BORDERS.border_100} solid ${colors_1.COLORS.NEUTRAL.color_neutral_bg_250}`,
            },
            labelIconContainer: {
                ...commonLabelIconContainerSideMenuLevel2,
            },
            label: {
                ...commonLabelSideMenuLevel2,
                color: colors_1.COLORS.NEUTRAL.color_neutral_font_50,
                font_weight: typography_1.FONT_WEIGHT.font_weight_400,
            },
        },
    },
    [variants_2.OptionVariantType.CODE_VIEWER_SUBTHEME]: {
        [state_1.OptionStateType.DEFAULT]: {
            container: {
                ...commonContaineCodeViewerSubtheme,
            },
            labelIconContainer: {
                ...commonLabelIconContainerCodeViewerSubtheme,
            },
            label: {
                ...commonLabelCodeViewerSubtheme,
            },
        },
        [state_1.OptionStateType.HOVER]: {
            container: {
                ...commonContaineCodeViewerSubtheme,
                background_color: colors_1.COLORS.NEUTRAL.color_neutral_bg_200,
                border_left: `${borders_1.BORDERS.border_200} solid ${colors_1.COLORS.NEUTRAL.color_neutral_border_200}`,
            },
            labelIconContainer: {
                ...commonLabelIconContainerCodeViewerSubtheme,
            },
            label: {
                ...commonLabelCodeViewerSubtheme,
            },
        },
        [state_1.OptionStateType.SELECTED]: {
            container: {
                ...commonContaineCodeViewerSubtheme,
                background_color: colors_1.COLORS.NEUTRAL.color_neutral_bg_200,
                border_left: `${borders_1.BORDERS.border_200} solid ${colors_1.COLORS.BRAND.color_brand_border_50}`,
            },
            labelIconContainer: {
                ...commonLabelIconContainerCodeViewerSubtheme,
            },
            label: {
                ...commonLabelCodeViewerSubtheme,
                font_weight: typography_1.FONT_WEIGHT.font_weight_600,
            },
        },
        [state_1.OptionStateType.SELECTED_HOVER]: {
            container: {
                ...commonContaineCodeViewerSubtheme,
                background_color: colors_1.COLORS.NEUTRAL.color_neutral_bg_200,
                border_left: `${borders_1.BORDERS.border_200} solid ${colors_1.COLORS.BRAND.color_brand_border_50}`,
            },
            labelIconContainer: {
                ...commonLabelIconContainerCodeViewerSubtheme,
            },
            label: {
                ...commonLabelCodeViewerSubtheme,
                font_weight: typography_1.FONT_WEIGHT.font_weight_600,
            },
        },
        [state_1.OptionStateType.MULTIPLE_SELECTED]: {
            container: {
                ...commonContaineCodeViewerSubtheme,
                background_color: colors_1.COLORS.NEUTRAL.color_neutral_bg_200,
                border_left: `${borders_1.BORDERS.border_200} solid ${colors_1.COLORS.BRAND.color_brand_border_50}`,
            },
            labelIconContainer: {
                ...commonLabelIconContainerCodeViewerSubtheme,
            },
            label: {
                ...commonLabelCodeViewerSubtheme,
                font_weight: typography_1.FONT_WEIGHT.font_weight_600,
            },
        },
        [state_1.OptionStateType.MULTIPLE_SELECTED_HOVER]: {
            container: {
                ...commonContaineCodeViewerSubtheme,
                background_color: colors_1.COLORS.NEUTRAL.color_neutral_bg_200,
                border_left: `${borders_1.BORDERS.border_200} solid ${colors_1.COLORS.BRAND.color_brand_border_50}`,
            },
            labelIconContainer: {
                ...commonLabelIconContainerCodeViewerSubtheme,
            },
            label: {
                ...commonLabelCodeViewerSubtheme,
                font_weight: typography_1.FONT_WEIGHT.font_weight_600,
            },
        },
        [state_1.OptionStateType.DISABLED]: {
            container: {
                ...commonContaineCodeViewerSubtheme,
            },
            labelIconContainer: {
                ...commonLabelIconContainerCodeViewerSubtheme,
            },
            label: {
                ...commonLabelCodeViewerSubtheme,
            },
        },
        [state_1.OptionStateType.FILLING]: {
            container: {
                ...commonContaineCodeViewerSubtheme,
                border_left: `${borders_1.BORDERS.border_50} solid ${colors_1.COLORS.NEUTRAL.color_neutral_bg_200}`,
            },
            labelIconContainer: {
                ...commonLabelIconContainerCodeViewerSubtheme,
            },
            label: {
                ...commonLabelCodeViewerSubtheme,
                font_weight: typography_1.FONT_WEIGHT.font_weight_400,
            },
        },
    },
    [variants_2.OptionVariantType.INPUT_DROPDOWN]: {
        [state_1.OptionStateType.DEFAULT]: {
            container: {
                ...commonContainerSideMenuLevel1,
                background_color: colors_1.COLORS.NEUTRAL.color_neutral_bg_250,
                border_left: `${borders_1.BORDERS.border_200} solid ${colors_1.COLORS.NEUTRAL.color_neutral_bg_250}`,
                padding: spacings_1.SPACINGS.spacing_300,
            },
            labelIconContainer: {
                ...commonLabelIconContainerSideMenuLevel1,
            },
            label: {
                ...commonLabelSideMenuLevel1,
                color: colors_1.COLORS.NEUTRAL.color_neutral_font_50,
                font_weight: typography_1.FONT_WEIGHT.font_weight_400,
            },
            icon: {
                ...commonIconSideMenuLevel1,
                color: colors_1.COLORS.NEUTRAL.color_neutral_icon_50,
            },
        },
        [state_1.OptionStateType.HOVER]: {
            container: {
                ...commonContainerSideMenuLevel1,
                background_color: colors_1.COLORS.NEUTRAL.color_neutral_bg_200,
                border_left: `${borders_1.BORDERS.border_200} solid ${colors_1.COLORS.NEUTRAL.color_neutral_bg_200}`,
                padding: spacings_1.SPACINGS.spacing_300,
            },
            labelIconContainer: {
                ...commonLabelIconContainerSideMenuLevel1,
            },
            label: {
                ...commonLabelSideMenuLevel1,
                color: colors_1.COLORS.NEUTRAL.color_neutral_font_50,
                font_weight: typography_1.FONT_WEIGHT.font_weight_400,
            },
            icon: {
                ...commonIconSideMenuLevel1,
                color: colors_1.COLORS.NEUTRAL.color_neutral_icon_50,
            },
        },
        [state_1.OptionStateType.SELECTED]: {
            container: {
                ...commonContainerSideMenuLevel1,
                background_color: colors_1.COLORS.NEUTRAL.color_neutral_bg_200,
                border_left: `${borders_1.BORDERS.border_200} solid ${colors_1.COLORS.BRAND.color_brand_border_50}`,
                padding: spacings_1.SPACINGS.spacing_300,
            },
            labelIconContainer: {
                ...commonLabelIconContainerSideMenuLevel1,
            },
            label: {
                ...commonLabelSideMenuLevel1,
                color: colors_1.COLORS.NEUTRAL.color_neutral_font_50,
                font_weight: typography_1.FONT_WEIGHT.font_weight_600,
            },
            icon: {
                ...commonIconSideMenuLevel1,
                color: colors_1.COLORS.NEUTRAL.color_neutral_icon_50,
            },
        },
        [state_1.OptionStateType.SELECTED_HOVER]: {
            container: {
                ...commonContainerSideMenuLevel1,
                background_color: colors_1.COLORS.NEUTRAL.color_neutral_bg_200,
                border_left: `${borders_1.BORDERS.border_200} solid ${colors_1.COLORS.BRAND.color_brand_border_50}`,
                padding: spacings_1.SPACINGS.spacing_300,
            },
            labelIconContainer: {
                ...commonLabelIconContainerSideMenuLevel1,
            },
            label: {
                ...commonLabelSideMenuLevel1,
                color: colors_1.COLORS.NEUTRAL.color_neutral_font_50,
                font_weight: typography_1.FONT_WEIGHT.font_weight_600,
            },
            icon: {
                ...commonIconSideMenuLevel1,
                color: colors_1.COLORS.NEUTRAL.color_neutral_icon_50,
            },
        },
        [state_1.OptionStateType.MULTIPLE_SELECTED]: {
            container: {
                ...commonContainerSideMenuLevel1,
                background_color: colors_1.COLORS.NEUTRAL.color_neutral_bg_200,
                border_left: `${borders_1.BORDERS.border_200} solid ${colors_1.COLORS.BRAND.color_brand_border_50}`,
                padding: spacings_1.SPACINGS.spacing_300,
            },
            labelIconContainer: {
                ...commonLabelIconContainerSideMenuLevel1,
            },
            label: {
                ...commonLabelSideMenuLevel1,
                color: colors_1.COLORS.NEUTRAL.color_neutral_font_50,
                font_weight: typography_1.FONT_WEIGHT.font_weight_600,
            },
            icon: {
                ...commonIconSideMenuLevel1,
                color: colors_1.COLORS.NEUTRAL.color_neutral_icon_50,
            },
        },
        [state_1.OptionStateType.MULTIPLE_SELECTED_HOVER]: {
            container: {
                ...commonContainerSideMenuLevel1,
                background_color: colors_1.COLORS.NEUTRAL.color_neutral_bg_200,
                border_left: `${borders_1.BORDERS.border_200} solid ${colors_1.COLORS.BRAND.color_brand_border_50}`,
                padding: spacings_1.SPACINGS.spacing_300,
            },
            labelIconContainer: {
                ...commonLabelIconContainerSideMenuLevel1,
            },
            label: {
                ...commonLabelSideMenuLevel1,
                color: colors_1.COLORS.NEUTRAL.color_neutral_font_50,
                font_weight: typography_1.FONT_WEIGHT.font_weight_600,
            },
            icon: {
                ...commonIconSideMenuLevel1,
                color: colors_1.COLORS.NEUTRAL.color_neutral_icon_50,
            },
        },
        [state_1.OptionStateType.DISABLED]: {
            container: {
                ...commonContainerSideMenuLevel1,
                background_color: colors_1.COLORS.ACCENT.color_accent_default_bg_150,
                border_left: `${borders_1.BORDERS.border_200} solid ${colors_1.COLORS.ACCENT.color_accent_default_bg_150}`,
                padding: spacings_1.SPACINGS.spacing_300,
            },
            labelIconContainer: {
                ...commonLabelIconContainerSideMenuLevel1,
            },
            label: {
                ...commonLabelSideMenuLevel1,
                color: colors_1.COLORS.NEUTRAL.color_neutral_font_50,
                font_weight: typography_1.FONT_WEIGHT.font_weight_400,
            },
            icon: {
                ...commonIconSideMenuLevel1,
                color: colors_1.COLORS.NEUTRAL.color_neutral_icon_100,
            },
        },
        [state_1.OptionStateType.FILLING]: {
            container: {
                ...commonContainerSideMenuLevel1,
                background_color: colors_1.COLORS.NEUTRAL.color_neutral_bg_250,
                border_left: `${borders_1.BORDERS.border_200} solid ${colors_1.COLORS.NEUTRAL.color_neutral_bg_250}`,
                padding: spacings_1.SPACINGS.spacing_300,
            },
            labelIconContainer: {
                ...commonLabelIconContainerSideMenuLevel1,
            },
            label: {
                ...commonLabelSideMenuLevel1,
                color: colors_1.COLORS.NEUTRAL.color_neutral_font_50,
                font_weight: typography_1.FONT_WEIGHT.font_weight_400,
            },
            icon: {
                ...commonIconSideMenuLevel1,
                color: colors_1.COLORS.NEUTRAL.color_neutral_icon_50,
            },
        },
    },
    [variants_2.OptionVariantType.INPUT_OPTION]: {
        [state_1.OptionStateType.DEFAULT]: {
            container: {
                ...commonContainerInputOption,
                background_color: colors_1.COLORS.NEUTRAL.color_neutral_bg_250,
                border_left: `${borders_1.BORDERS.border_200} solid ${colors_1.COLORS.NEUTRAL.color_neutral_bg_250}`,
            },
            labelIconContainer: {
                ...commonLabelIconContainerInputSearch,
            },
            label: {
                ...commonLabelInputSearch,
            },
            labelHightlighted: {
                ...commonLabelHightlightedInputSearch,
            },
            icon: {
                ...commonIconInputSearch,
            },
            sublabel: {
                ...commonSublabelInputSearch,
            },
        },
        [state_1.OptionStateType.HOVER]: {
            container: {
                ...commonContainerInputOption,
                background_color: colors_1.COLORS.NEUTRAL.color_neutral_bg_200,
                border_left: `${borders_1.BORDERS.border_200} solid ${colors_1.COLORS.NEUTRAL.color_neutral_bg_200}`,
            },
            labelIconContainer: {
                ...commonLabelIconContainerInputSearch,
            },
            label: {
                ...commonLabelInputSearch,
            },
            labelHightlighted: {
                ...commonLabelHightlightedInputSearch,
            },
            icon: {
                ...commonIconInputSearch,
            },
            sublabel: {
                ...commonSublabelInputSearch,
            },
        },
        [state_1.OptionStateType.FILLING]: {
            container: {
                ...commonContainerInputOption,
                background_color: colors_1.COLORS.NEUTRAL.color_neutral_bg_250,
                border_left: `${borders_1.BORDERS.border_200} solid ${colors_1.COLORS.NEUTRAL.color_neutral_bg_250}`,
            },
            labelIconContainer: {
                ...commonLabelIconContainerInputSearch,
            },
            label: {
                ...commonLabelInputSearch,
            },
            labelHightlighted: {
                ...commonLabelHightlightedInputSearch,
            },
            icon: {
                ...commonIconInputSearch,
            },
            sublabel: {
                ...commonSublabelInputSearch,
            },
        },
        [state_1.OptionStateType.SELECTED]: {
            container: {
                ...commonContainerInputOption,
                background_color: colors_1.COLORS.NEUTRAL.color_neutral_bg_200,
                border_left: `${borders_1.BORDERS.border_200} solid ${colors_1.COLORS.BRAND.color_brand_border_50}`,
            },
            labelIconContainer: {
                ...commonLabelIconContainerInputSearch,
            },
            label: {
                ...commonLabelInputSearch,
                font_weight: typography_1.FONT_WEIGHT.font_weight_600,
            },
            labelHightlighted: {
                ...commonLabelHightlightedInputSearch,
            },
            icon: {
                ...commonIconInputSearch,
            },
            sublabel: {
                ...commonSublabelInputSearch,
            },
        },
        [state_1.OptionStateType.SELECTED_HOVER]: {
            container: {
                ...commonContainerInputOption,
                background_color: colors_1.COLORS.NEUTRAL.color_neutral_bg_200,
                border_left: `${borders_1.BORDERS.border_200} solid ${colors_1.COLORS.BRAND.color_brand_border_50}`,
            },
            labelIconContainer: {
                ...commonLabelIconContainerInputSearch,
            },
            label: {
                ...commonLabelInputSearch,
                font_weight: typography_1.FONT_WEIGHT.font_weight_600,
            },
            labelHightlighted: {
                ...commonLabelHightlightedInputSearch,
            },
            icon: {
                ...commonIconInputSearch,
            },
            sublabel: {
                ...commonSublabelInputSearch,
            },
        },
        [state_1.OptionStateType.MULTIPLE_SELECTED]: {
            container: {
                ...commonContainerInputOption,
                background_color: colors_1.COLORS.NEUTRAL.color_neutral_bg_200,
                border_left: `${borders_1.BORDERS.border_200} solid ${colors_1.COLORS.BRAND.color_brand_border_50}`,
            },
            labelIconContainer: {
                ...commonLabelIconContainerInputSearch,
            },
            label: {
                ...commonLabelInputSearch,
                font_weight: typography_1.FONT_WEIGHT.font_weight_600,
            },
            labelHightlighted: {
                ...commonLabelHightlightedInputSearch,
            },
            icon: {
                ...commonIconInputSearch,
            },
            sublabel: {
                ...commonSublabelInputSearch,
            },
        },
        [state_1.OptionStateType.MULTIPLE_SELECTED_HOVER]: {
            container: {
                ...commonContainerInputOption,
                background_color: colors_1.COLORS.NEUTRAL.color_neutral_bg_200,
                border_left: `${borders_1.BORDERS.border_200} solid ${colors_1.COLORS.BRAND.color_brand_border_50}`,
            },
            labelIconContainer: {
                ...commonLabelIconContainerInputSearch,
            },
            label: {
                ...commonLabelInputSearch,
                font_weight: typography_1.FONT_WEIGHT.font_weight_600,
            },
            labelHightlighted: {
                ...commonLabelHightlightedInputSearch,
            },
            icon: {
                ...commonIconInputSearch,
            },
            sublabel: {
                ...commonSublabelInputSearch,
            },
        },
        [state_1.OptionStateType.DISABLED]: {
            container: {
                ...commonContainerInputOption,
                background_color: colors_1.COLORS.ACCENT.color_accent_default_bg_150,
                border_left: `${borders_1.BORDERS.border_200} solid ${colors_1.COLORS.ACCENT.color_accent_default_bg_150}`,
            },
            labelIconContainer: {
                ...commonLabelIconContainerInputSearch,
            },
            label: {
                ...commonLabelInputSearch,
            },
            labelHightlighted: {
                ...commonLabelHightlightedInputSearch,
            },
            icon: {
                ...commonIconInputSearch,
                color: colors_1.COLORS.NEUTRAL.color_neutral_icon_100,
            },
            sublabel: {
                ...commonSublabelInputSearch,
            },
        },
        [state_1.OptionStateType.FOCUS]: {
            container: {
                ...commonContainerInputOption,
                background_color: colors_1.COLORS.NEUTRAL.color_neutral_bg_200,
                border_left: `${borders_1.BORDERS.border_200} solid ${colors_1.COLORS.BRAND.color_brand_border_50}`,
            },
            labelIconContainer: {
                ...commonLabelIconContainerInputSearch,
            },
            label: {
                ...commonLabelInputSearch,
                font_weight: typography_1.FONT_WEIGHT.font_weight_600,
            },
            labelHightlighted: {
                ...commonLabelHightlightedInputSearch,
            },
            icon: {
                ...commonIconInputSearch,
            },
            sublabel: {
                ...commonSublabelInputSearch,
            },
        },
    },
    [variants_2.OptionVariantType.INPUT_OPTION_HIGHTLIGHTED]: {
        [state_1.OptionStateType.DEFAULT]: {
            container: {
                ...commonContainerHighlighted,
                background_color: colors_1.COLORS.NEUTRAL.color_neutral_bg_250,
                border_left: `${borders_1.BORDERS.border_200} solid ${colors_1.COLORS.NEUTRAL.color_neutral_bg_250}`,
            },
            labelIconContainer: {
                ...commonLabelIconContainerHighlighted,
            },
            label: {
                ...commonLabelHighlighted,
            },
            labelHightlighted: {
                ...commonLabelHightlightedHighlighted,
            },
            icon: {
                ...commonIconHighlighted,
            },
            sublabel: {
                ...commonSublabelHighlighted,
            },
        },
        [state_1.OptionStateType.FILLING]: {
            container: {
                ...commonContainerHighlighted,
                background_color: colors_1.COLORS.NEUTRAL.color_neutral_bg_250,
                border_left: `${borders_1.BORDERS.border_200} solid ${colors_1.COLORS.NEUTRAL.color_neutral_bg_250}`,
            },
            labelIconContainer: {
                ...commonLabelIconContainerHighlighted,
            },
            label: {
                ...commonLabelHighlighted,
            },
            labelHightlighted: {
                ...commonLabelHightlightedHighlighted,
            },
            icon: {
                ...commonIconHighlighted,
            },
            sublabel: {
                ...commonSublabelHighlighted,
            },
        },
        [state_1.OptionStateType.HOVER]: {
            container: {
                ...commonContainerHighlighted,
                background_color: colors_1.COLORS.NEUTRAL.color_neutral_bg_200,
                border_left: `${borders_1.BORDERS.border_200} solid ${colors_1.COLORS.NEUTRAL.color_neutral_bg_200}`,
            },
            labelIconContainer: {
                ...commonLabelIconContainerHighlighted,
            },
            label: {
                ...commonLabelHighlighted,
            },
            labelHightlighted: {
                ...commonLabelHightlightedHighlighted,
            },
            icon: {
                ...commonIconHighlighted,
            },
            sublabel: {
                ...commonSublabelHighlighted,
            },
        },
        [state_1.OptionStateType.SELECTED]: {
            container: {
                ...commonContainerHighlighted,
                background_color: colors_1.COLORS.NEUTRAL.color_neutral_bg_200,
                border_left: `${borders_1.BORDERS.border_200} solid ${colors_1.COLORS.NEUTRAL.color_neutral_bg_200}`,
            },
            labelIconContainer: {
                ...commonLabelIconContainerHighlighted,
            },
            label: {
                ...commonLabelHighlighted,
            },
            labelHightlighted: {
                ...commonLabelHightlightedHighlighted,
            },
            icon: {
                ...commonIconHighlighted,
            },
            sublabel: {
                ...commonSublabelHighlighted,
            },
        },
        [state_1.OptionStateType.SELECTED_HOVER]: {
            container: {
                ...commonContainerHighlighted,
                background_color: colors_1.COLORS.NEUTRAL.color_neutral_bg_200,
                border_left: `${borders_1.BORDERS.border_200} solid ${colors_1.COLORS.NEUTRAL.color_neutral_bg_200}`,
            },
            labelIconContainer: {
                ...commonLabelIconContainerHighlighted,
            },
            label: {
                ...commonLabelHighlighted,
            },
            labelHightlighted: {
                ...commonLabelHightlightedHighlighted,
            },
            icon: {
                ...commonIconHighlighted,
            },
            sublabel: {
                ...commonSublabelHighlighted,
            },
        },
        [state_1.OptionStateType.MULTIPLE_SELECTED]: {
            container: {
                ...commonContainerHighlighted,
                background_color: colors_1.COLORS.NEUTRAL.color_neutral_bg_200,
                border_left: `${borders_1.BORDERS.border_200} solid ${colors_1.COLORS.NEUTRAL.color_neutral_bg_200}`,
            },
            labelIconContainer: {
                ...commonLabelIconContainerHighlighted,
            },
            label: {
                ...commonLabelHighlighted,
            },
            labelHightlighted: {
                ...commonLabelHightlightedHighlighted,
            },
            icon: {
                ...commonIconHighlighted,
            },
            sublabel: {
                ...commonSublabelHighlighted,
            },
        },
        [state_1.OptionStateType.MULTIPLE_SELECTED_HOVER]: {
            container: {
                ...commonContainerHighlighted,
                background_color: colors_1.COLORS.NEUTRAL.color_neutral_bg_200,
                border_left: `${borders_1.BORDERS.border_200} solid ${colors_1.COLORS.NEUTRAL.color_neutral_bg_200}`,
            },
            labelIconContainer: {
                ...commonLabelIconContainerHighlighted,
            },
            label: {
                ...commonLabelHighlighted,
            },
            labelHightlighted: {
                ...commonLabelHightlightedHighlighted,
            },
            icon: {
                ...commonIconHighlighted,
            },
            sublabel: {
                ...commonSublabelHighlighted,
            },
        },
        [state_1.OptionStateType.DISABLED]: {
            container: {
                ...commonContainerHighlighted,
                background_color: colors_1.COLORS.ACCENT.color_accent_default_bg_150,
                border_left: `${borders_1.BORDERS.border_200} solid ${colors_1.COLORS.ACCENT.color_accent_default_bg_150}`,
            },
            labelIconContainer: {
                ...commonLabelIconContainerHighlighted,
            },
            label: {
                ...commonLabelHighlighted,
            },
            labelHightlighted: {
                ...commonLabelHightlightedHighlighted,
            },
            icon: {
                ...commonIconHighlighted,
            },
            sublabel: {
                ...commonSublabelHighlighted,
            },
        },
        [state_1.OptionStateType.FOCUS]: {
            container: {
                ...commonContainerInputOption,
                background_color: colors_1.COLORS.NEUTRAL.color_neutral_bg_200,
                border_left: `${borders_1.BORDERS.border_200} solid ${colors_1.COLORS.BRAND.color_brand_border_50}`,
            },
            labelIconContainer: {
                ...commonLabelIconContainerInputSearch,
            },
            label: {
                ...commonLabelInputSearch,
                font_weight: typography_1.FONT_WEIGHT.font_weight_600,
            },
            labelHightlighted: {
                ...commonLabelHightlightedInputSearch,
            },
            icon: {
                ...commonIconInputSearch,
            },
            sublabel: {
                ...commonSublabelInputSearch,
            },
        },
    },
    [variants_2.OptionVariantType.INVERTED]: {
        [state_1.OptionStateType.DEFAULT]: {
            container: {
                ...commonContainerInverted,
                background_color: colors_1.COLORS.NEUTRAL.color_neutral_bg_200,
            },
            containerBefore: {
                right: spacings_1.SPACINGS.spacing_300,
            },
            containerFocusVisible: {},
            labelIconContainer: {},
            label: {
                font_variant: variants_1.TextVariantType.PARAGRAPH_CAPTION_EXTENDED,
                color: colors_1.COLORS.NEUTRAL.color_neutral_bg_100,
                font_weight: typography_1.FONT_WEIGHT.font_weight_400,
            },
            labelHightlighted: {},
        },
        [state_1.OptionStateType.FILLING]: {
            container: {
                ...commonContainerInverted,
            },
            containerBefore: {
                right: spacings_1.SPACINGS.spacing_50,
            },
            containerFocusVisible: {},
            labelIconContainer: {},
            label: {},
            labelHightlighted: {},
        },
        [state_1.OptionStateType.HOVER]: {
            container: {
                ...commonContainerInverted,
            },
            containerBefore: {
                right: spacings_1.SPACINGS.spacing_50,
            },
            containerFocusVisible: {},
            labelIconContainer: {},
            label: {},
            labelHightlighted: {},
        },
        [state_1.OptionStateType.SELECTED]: {
            container: {
                ...commonContainerInverted,
            },
            containerBefore: {},
            containerFocusVisible: {},
            labelIconContainer: {},
            label: {},
            labelHightlighted: {},
        },
        [state_1.OptionStateType.SELECTED_HOVER]: {
            container: {
                ...commonContainerInverted,
            },
            containerBefore: {},
            containerFocusVisible: {},
            labelIconContainer: {},
            label: {},
            labelHightlighted: {},
        },
        [state_1.OptionStateType.MULTIPLE_SELECTED]: {
            container: {
                ...commonContainerInverted,
            },
            containerBefore: {},
            containerFocusVisible: {},
            labelIconContainer: {},
            label: {},
            labelHightlighted: {},
        },
        [state_1.OptionStateType.MULTIPLE_SELECTED_HOVER]: {
            container: {
                ...commonContainerInverted,
            },
            containerBefore: {},
            containerFocusVisible: {},
            labelIconContainer: {},
            label: {},
            labelHightlighted: {},
        },
        [state_1.OptionStateType.DISABLED]: {
            container: {
                ...commonContainerInverted,
                cursor: 'auto',
                pointer_events: 'none',
            },
            containerBefore: {
                right: spacings_1.SPACINGS.spacing_50,
            },
            containerFocusVisible: {},
            labelIconContainer: {},
            label: {},
            labelHightlighted: {},
        },
    },
    [variants_2.OptionVariantType.TOPBAR]: {
        [state_1.OptionStateType.DEFAULT]: {
            ...commonTopbar,
            label: {
                ...commonLabelTopbar,
                color: colors_1.COLORS.NEUTRAL.color_neutral_font_250,
                font_weight: typography_1.FONT_WEIGHT.font_weight_400,
            },
            labelHightlighted: {
                ...commonLabelTopbar,
                font_weight: typography_1.FONT_WEIGHT.font_weight_400,
            },
        },
        [state_1.OptionStateType.FILLING]: {
            ...commonTopbar,
            label: {
                ...commonLabelTopbar,
                color: colors_1.COLORS.NEUTRAL.color_neutral_font_250,
                font_weight: typography_1.FONT_WEIGHT.font_weight_400,
            },
            labelHightlighted: {
                ...commonLabelTopbar,
                font_weight: typography_1.FONT_WEIGHT.font_weight_400,
            },
        },
        [state_1.OptionStateType.HOVER]: {
            ...commonTopbar,
            label: {
                ...commonLabelTopbar,
                color: colors_1.COLORS.NEUTRAL.color_neutral_font_250,
            },
            labelHightlighted: {
                ...commonLabelTopbar,
                font_weight: typography_1.FONT_WEIGHT.font_weight_400,
            },
        },
        [state_1.OptionStateType.SELECTED]: {
            ...commonTopbar,
            label: {
                ...commonLabelTopbar,
                color: colors_1.COLORS.NEUTRAL.color_neutral_font_250,
            },
            labelHightlighted: {
                ...commonLabelTopbar,
                font_weight: typography_1.FONT_WEIGHT.font_weight_400,
            },
        },
        [state_1.OptionStateType.SELECTED_HOVER]: {
            ...commonTopbar,
            label: {
                ...commonLabelTopbar,
                color: colors_1.COLORS.NEUTRAL.color_neutral_font_250,
            },
            labelHightlighted: {
                ...commonLabelTopbar,
                font_weight: typography_1.FONT_WEIGHT.font_weight_400,
            },
        },
        [state_1.OptionStateType.MULTIPLE_SELECTED]: {
            ...commonTopbar,
            label: {
                ...commonLabelTopbar,
                color: colors_1.COLORS.NEUTRAL.color_neutral_font_250,
            },
            labelHightlighted: {
                ...commonLabelTopbar,
                font_weight: typography_1.FONT_WEIGHT.font_weight_400,
            },
        },
        [state_1.OptionStateType.MULTIPLE_SELECTED_HOVER]: {