@kubit-ui-web/react-components/dist/cjs/designSystem/kubit/components/inputSearch/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.INPUT_SEARCH_STYLES = void 0;
// types
const inputTheme_1 = require("../../../../components/input/types/inputTheme");
const breakpoints_1 = require("../../../../types/breakpoints/breakpoints");
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("../input/variants");
const variants_2 = require("../listOptions/variants");
const variants_3 = require("../option/variants");
const variants_4 = require("../popover/variants");
const variants_5 = require("../variants");
const variants_6 = require("./variants");
const commonProps = {
    inputVariant: variants_1.InputVariantType.DEFAULT,
    label: {
        font_weight: typography_1.FONT_WEIGHT.font_weight_600,
        font_variant: variants_5.TextVariantType.PARAGRAPH_SMALL_EXTENDED,
    },
    labelContainer: {
        margin_bottom: spacings_1.SPACINGS.spacing_100,
    },
    popoverVariant: {
        [breakpoints_1.DeviceBreakpointsType.DESKTOP]: variants_4.PopoverVariantType.INPUT_SEARCH,
        [breakpoints_1.DeviceBreakpointsType.TABLET]: variants_4.PopoverVariantType.INPUT_SEARCH,
        [breakpoints_1.DeviceBreakpointsType.MOBILE]: variants_4.PopoverVariantType.INPUT_SEARCH,
    },
    useActionBottomSheet: {
        [breakpoints_1.DeviceBreakpointsType.DESKTOP]: false,
        [breakpoints_1.DeviceBreakpointsType.TABLET]: true,
        [breakpoints_1.DeviceBreakpointsType.MOBILE]: true,
    },
    actionBottomSheetVariant: variants_5.ActionBottomSheetVariantType.INPUT_SEARCH,
    searchListContainer: {
        background_color: colors_1.COLORS.NEUTRAL.color_neutral_bg_250,
        margin_top: spacings_1.SPACINGS.spacing_100,
        [breakpoints_1.DeviceBreakpointsType.DESKTOP]: {
            border: `2px solid ${colors_1.COLORS.NEUTRAL.color_neutral_border_50}`,
        },
    },
    noResultsTextContainer: {
        padding: spacings_1.SPACINGS.spacing_300,
        background_color: colors_1.COLORS.NEUTRAL.color_neutral_bg_250,
    },
    noResultsText: {
        font_variant: variants_5.TextVariantType.PARAGRAPH_MEDIUM_EXTENDED,
        font_weight: typography_1.FONT_WEIGHT.font_weight_400,
        color: colors_1.COLORS.NEUTRAL.color_neutral_font_50,
    },
    loadingText: {
        font_variant: variants_5.TextVariantType.PARAGRAPH_MEDIUM_EXTENDED,
        font_weight: typography_1.FONT_WEIGHT.font_weight_400,
        color: colors_1.COLORS.NEUTRAL.color_neutral_font_50,
    },
    loaderExpandedContainer: {
        background_color: colors_1.COLORS.NEUTRAL.color_neutral_bg_250,
        padding: `${spacings_1.SPACINGS.spacing_250} ${spacings_1.SPACINGS.spacing_300}`,
    },
    loaderContractedContainer: {
        background_color: colors_1.COLORS.NEUTRAL.color_neutral_bg_250,
        padding_top: spacings_1.SPACINGS.spacing_600,
        padding_bottom: spacings_1.SPACINGS.spacing_600,
        gap: spacings_1.SPACINGS.spacing_150,
    },
    loader: {
        variant: variants_5.LoaderVariantType.PRIMARY_RED,
        width: sizes_1.SIZES.size_250,
    },
};
exports.INPUT_SEARCH_STYLES = {
    [variants_6.InputSearchVariant.DEFAULT]: {
        [inputTheme_1.InputState.EMPTY]: {
            ...commonProps,
        },
        [inputTheme_1.InputState.FILLED]: {
            ...commonProps,
        },
        [inputTheme_1.InputState.ACTIVE]: {
            ...commonProps,
        },
        [inputTheme_1.InputState.DISABLED_EMPTY]: {
            ...commonProps,
        },
        [inputTheme_1.InputState.DISABLED_FILLED]: {
            ...commonProps,
        },
        [inputTheme_1.InputState.DISABLED_FILLED_WITH_INFO]: {
            ...commonProps,
        },
        [inputTheme_1.InputState.ERROR_EMPTY]: {
            ...commonProps,
        },
        [inputTheme_1.InputState.ERROR_FILLED]: {
            ...commonProps,
        },
        [inputTheme_1.InputState.ERROR_ACTIVE]: {
            ...commonProps,
        },
        listOptions: {
            variant: variants_2.ListOptionsVariantType.INPUT_SEARCH,
            optionVariant: variants_3.OptionVariantType.INPUT_OPTION,
            hightlightedOptionVariant: variants_3.OptionVariantType.INPUT_OPTION_HIGHTLIGHTED,
        },
    },
};
//# sourceMappingURL=styles.js.map