@smg-automotive/components 27.4.0-components-fix-module-export.2 → 27.4.0-components-fix-module-export.3

package/dist/cjs/themeProvider.js

@@ -1,3820 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var react = require('@chakra-ui/react');
-var anatomy = require('@chakra-ui/react/anatomy');
-
-var Brand;
-(function (Brand) {
-    Brand["AutoScout24"] = "autoscout24";
-    Brand["MotoScout24"] = "motoscout24";
-})(Brand || (Brand = {}));
-
-const zIndex = react.defineTokens.zIndex({
-    hide: { value: -1 },
-    auto: { value: 'auto' },
-    base: { value: 0 },
-    docked: { value: 10 },
-    header: { value: 900 },
-    dropdown: { value: 1000 },
-    sticky: { value: 1100 },
-    banner: { value: 1200 },
-    overlay: { value: 1300 },
-    modal: { value: 1400 },
-    popover: { value: 1500 },
-    skipLink: { value: 1600 },
-    toast: { value: 1700 },
-    fullScreenModal: { value: 2000 },
-    tooltip: { value: 2100 },
-});
-
-const spacing = react.defineTokens.spacing({
-    auto: { value: 'auto' },
-    '0': { value: '0' },
-    xxs: { value: '0.125rem' },
-    xs: { value: '0.25rem' },
-    sm: { value: '0.5rem' },
-    md: { value: '0.75rem' },
-    lg: { value: '1rem' },
-    xl: { value: '1.25rem' },
-    '2xl': { value: '1.5rem' },
-    '3xl': { value: '2rem' },
-    '4xl': { value: '3rem' },
-    '5xl': { value: '4rem' },
-    '6xl': { value: '6rem' },
-    '7xl': { value: '8rem' },
-    'auth0-spacing': { value: '2.5rem' },
-    half: { value: '50%' },
-});
-
-const sizes = react.defineTokens.sizes({
-    0: { value: '0' },
-    auto: { value: 'auto' },
-    xxs: { value: '0.5rem' },
-    xs: { value: '1rem' },
-    sm: { value: '1.5rem' },
-    md: { value: '2.25rem' },
-    lg: { value: '3rem' },
-    xl: { value: '4rem' },
-    '2xl': { value: '6rem' },
-    '3xl': { value: '8rem' },
-    '4xl': { value: '10rem' },
-    '5xl': { value: '15rem' },
-    '6xl': { value: '20rem' },
-    '7xl': { value: '30rem' },
-    '8xl': { value: '45rem' },
-    half: { value: '50%' },
-    full: { value: '100%' },
-    fit: { value: 'fit-content' },
-    container: {
-        sm: { value: '640px' },
-        md: { value: '768px' },
-        lg: { value: '1024px' },
-        xl: { value: '1280px' },
-        '2xl': { value: '1604px' },
-    },
-    'auth0-width': { value: '25rem' },
-    'auth0-height': { value: '33.75rem' },
-    'screen-height': { value: '100vh' },
-});
-
-const shadows = react.defineTokens.shadows({
-    none: { value: 'none' },
-    xs: {
-        value: '0px 1px 2px rgba(0, 0, 0, 0.05), 0px 1px 4px rgba(0, 0, 0, 0.1)',
-    },
-    sm: {
-        value: '0px 4px 12px rgba(0, 0, 0, 0.05), 0px 8px 24px rgba(0, 0, 0, 0.1);',
-    },
-    md: {
-        value: '0px 2px 6px rgba(0, 0, 0, 0.05), 0px 8px 24px rgba(0, 0, 0, 0.1), 0px 20px 48px rgba(0, 0, 0, 0.15)',
-    },
-    lg: {
-        value: '0px 2px 8px rgba(0, 0, 0, 0.04), 0px 4px 16px rgba(0, 0, 0, 0.07), 0px 12px 32px rgba(0, 0, 0, 0.15), 0px 24px 64px rgba(0, 0, 0, 0.2)',
-    },
-    button: { value: '0px 2px 0px {colors.brand.btnShadow};' },
-});
-
-const radii = react.defineTokens.radii({
-    none: { value: '0' },
-    xs: { value: '2px' },
-    sm: { value: '4px' },
-    lg: { value: '8px' },
-    xl: { value: '16px' },
-    max: { value: '9999px' },
-    full: { value: '9999px' },
-});
-
-const opacity = react.defineTokens.opacity({
-    20: { value: '0.2' },
-    40: { value: '0.4' },
-    60: { value: '0.6' },
-    70: { value: '0.7' },
-    80: { value: '0.8' },
-    100: { value: '1' },
-});
-
-const lineHeights = react.defineTokens.lineHeights({
-    xs: { value: 1 },
-    sm: { value: 1.25 },
-    md: { value: 1.5 },
-    full: { value: '100%' },
-});
-
-const fontWeights = react.defineTokens.fontWeights({
-    regular: { value: 400 },
-    bold: { value: 700 },
-});
-
-const fontSizes = react.defineTokens.fontSizes({
-    xs: { value: '0.75rem' },
-    sm: { value: '0.875rem' },
-    base: { value: '1rem' },
-    md: { value: '1.25rem' },
-    lg: { value: '1.5rem' },
-    xl: { value: '2rem' },
-    '2xl': { value: '2.5rem' },
-    '3xl': { value: '3rem' },
-    '4xl': { value: '3.75rem' },
-    '5xl': { value: '4.75rem' },
-});
-
-const fonts = react.defineTokens.fonts({
-    makeItSans: { value: 'var(--font-primary)' },
-});
-
-const durations = react.defineTokens.durations({
-    fast: {
-        value: '150ms',
-    },
-    normal: {
-        value: '200ms',
-    },
-    slow: {
-        value: '350ms',
-    },
-});
-
-const cursor = react.defineTokens.cursor({
-    auto: { value: 'auto' },
-    default: { value: 'default' },
-    pointer: { value: 'pointer' },
-    notAllowed: { value: 'not-allowed' },
-});
-
-const colors = react.defineTokens.colors({
-    white: { value: '#FFFFFF' },
-    black: { value: '#000000' },
-    whiteAlpha: {
-        50: { value: 'rgba(255, 255, 255, 0.04)' },
-        100: { value: 'rgba(255, 255, 255, 0.06)' },
-        200: { value: 'rgba(255, 255, 255, 0.08)' },
-        300: { value: 'rgba(255, 255, 255, 0.16)' },
-        400: { value: 'rgba(255, 255, 255, 0.24)' },
-        500: { value: 'rgba(255, 255, 255, 0.36)' },
-        600: { value: 'rgba(255, 255, 255, 0.48)' },
-        700: { value: 'rgba(255, 255, 255, 0.64)' },
-        800: { value: 'rgba(255, 255, 255, 0.80)' },
-        900: { value: 'rgba(255, 255, 255, 0.92)' },
-    },
-    blackAlpha: {
-        50: { value: 'rgba(0, 0, 0, 0.04)' },
-        100: { value: 'rgba(0, 0, 0, 0.06)' },
-        200: { value: 'rgba(0, 0, 0, 0.08)' },
-        300: { value: 'rgba(0, 0, 0, 0.16)' },
-        400: { value: 'rgba(0, 0, 0, 0.24)' },
-        500: { value: 'rgba(0, 0, 0, 0.36)' },
-        600: { value: 'rgba(0, 0, 0, 0.48)' },
-        700: { value: 'rgba(0, 0, 0, 0.64)' },
-        800: { value: 'rgba(0, 0, 0, 0.80)' },
-        900: { value: 'rgba(0, 0, 0, 0.92)' },
-    },
-    blue: {
-        50: { value: '#F7FAFE' },
-        100: { value: '#DEECFA' },
-        200: { value: '#B3D3F3' },
-        300: { value: '#87B9EC' },
-        400: { value: '#4C97E2' },
-        500: { value: '#2988E1' },
-        600: { value: '#1577DA' },
-        700: { value: '#0E5DAC' },
-        800: { value: '#0A4580' },
-        900: { value: '#13364E' },
-    },
-    teal: {
-        50: { value: '#F1FCFB' },
-        100: { value: '#C4F4ED' },
-        200: { value: '#69E3D2' },
-        300: { value: '#00CBAE' },
-        400: { value: '#00A68E' },
-        500: { value: '#009680' },
-        600: { value: '#008673' },
-        700: { value: '#00695A' },
-        800: { value: '#004E43' },
-        900: { value: '#003B32' },
-    },
-    anthracite: {
-        50: { value: '#F9FAFA' },
-        100: { value: '#E7EBED' },
-        200: { value: '#C7D1D6' },
-        300: { value: '#A7B7BE' },
-        400: { value: '#7F97A1' },
-        500: { value: '#6E8994' },
-        600: { value: '#627B85' },
-        700: { value: '#4C6068' },
-        800: { value: '#38474C' },
-        900: { value: '#2A3539' },
-    },
-    gray: {
-        50: { value: '#F5F5F5' },
-        100: { value: '#EAEAEA' },
-        200: { value: '#CFCFCF' },
-        300: { value: '#B5B5B5' },
-        400: { value: '#939393' },
-        500: { value: '#858585' },
-        600: { value: '#777777' },
-        700: { value: '#5D5D5D' },
-        800: { value: '#444444' },
-        900: { value: '#333333' },
-    },
-    green: {
-        50: { value: '#F4FCF4' },
-        100: { value: '#D2F3D3' },
-        200: { value: '#92E295' },
-        300: { value: '#54CC59' },
-        400: { value: '#44A748' },
-        500: { value: '#3E9741' },
-        600: { value: '#37873A' },
-        700: { value: '#2B692E' },
-        800: { value: '#204E22' },
-        900: { value: '#183B19' },
-    },
-    orange: {
-        50: { value: '#FEF9F5' },
-        100: { value: '#FCE6A3' },
-        200: { value: '#FFC546' },
-        300: { value: '#F6A30E' },
-        400: { value: '#F8811A' },
-        500: { value: '#E76C22' },
-        600: { value: '#D16427' },
-        700: { value: '#B95625' },
-        800: { value: '#944318' },
-        900: { value: '#713217' },
-    },
-    red: {
-        50: { value: '#FFF9F6' },
-        100: { value: '#FFE5DC' },
-        200: { value: '#FFC2AE' },
-        300: { value: '#FF9A7D' },
-        400: { value: '#FF5C3B' },
-        500: { value: '#FD351A' },
-        600: { value: '#EA1C09' },
-        700: { value: '#B5200D' },
-        800: { value: '#831E0E' },
-        900: { value: '#611B0D' },
-    },
-    purple: {
-        50: { value: '#FDF9FC' },
-        100: { value: '#F7E6F3' },
-        200: { value: '#ECC4E2' },
-        300: { value: '#E1A1D1' },
-        400: { value: '#D172BA' },
-        500: { value: '#CA5CAF' },
-        600: { value: '#C344A4' },
-        700: { value: '#9E2F82' },
-        800: { value: '#752361' },
-        900: { value: '#591A49' },
-    },
-    violet: {
-        50: { value: '#FBF9FD' },
-        100: { value: '#EFE7F8' },
-        200: { value: '#DBC8EF' },
-        300: { value: '#C6A9E5' },
-        400: { value: '#AB81D9' },
-        500: { value: '#9F6FD4' },
-        600: { value: '#935DCD' },
-        700: { value: '#7349A0' },
-        800: { value: '#553676' },
-        900: { value: '#402859' },
-    },
-    none: { value: 'none' },
-    inherit: { value: 'inherit' },
-    currentColor: { value: 'currentColor' },
-    transparent: { value: 'transparent' },
-});
-
-const borders = react.defineTokens.borders({
-    none: { value: '0px none' },
-    '1px': { value: '1px solid' },
-    '2px': { value: '2px solid' },
-    '4px': { value: '4px solid' },
-});
-
-const aspectRatios = react.defineTokens.aspectRatios({
-    square: {
-        value: '1 / 1',
-    },
-    landscape: {
-        value: '4 / 3',
-    },
-    portrait: {
-        value: '3 / 4',
-    },
-    wide: {
-        value: '16 / 9',
-    },
-    ultrawide: {
-        value: '18 / 5',
-    },
-    golden: {
-        value: '1.618 / 1',
-    },
-});
-
-const animations = react.defineTokens.animations({
-    skeletonPulse: { value: 'skeletonPulse 1.6s linear infinite' },
-    spin: { value: 'spin 0.8s linear infinite' },
-    'fade-in': { value: 'fade-in var(--fade-in-duration, 0.1s) ease-in' },
-    'fade-out': { value: 'fade-out var(--fade-out-duration, 0.1s) ease-out' },
-});
-
-const textStyles = react.defineTextStyles({
-    display1: {
-        value: {
-            fontFamily: 'makeItSans',
-            fontWeight: 'bold',
-            lineHeight: 'xs',
-            fontSize: '5xl',
-        },
-    },
-    display2: {
-        value: {
-            fontFamily: 'makeItSans',
-            fontWeight: 'bold',
-            lineHeight: 'xs',
-            fontSize: '4xl',
-        },
-    },
-    display3: {
-        value: {
-            fontFamily: 'makeItSans',
-            fontWeight: 'bold',
-            lineHeight: 'xs',
-            fontSize: '3xl',
-        },
-    },
-    display4: {
-        value: {
-            fontFamily: 'makeItSans',
-            fontWeight: 'bold',
-            lineHeight: 'xs',
-            fontSize: '2xl',
-        },
-    },
-    heading1: {
-        value: {
-            fontFamily: 'makeItSans',
-            fontWeight: 'bold',
-            lineHeight: 'sm',
-            fontSize: 'xl',
-        },
-    },
-    heading2: {
-        value: {
-            fontFamily: 'makeItSans',
-            fontWeight: 'bold',
-            lineHeight: 'sm',
-            fontSize: 'lg',
-        },
-    },
-    heading3: {
-        value: {
-            fontFamily: 'makeItSans',
-            fontWeight: 'bold',
-            lineHeight: 'sm',
-            fontSize: 'md',
-        },
-    },
-    heading4: {
-        value: {
-            fontFamily: 'makeItSans',
-            fontWeight: 'bold',
-            lineHeight: 'sm',
-            fontSize: 'base',
-        },
-    },
-    heading5: {
-        value: {
-            fontFamily: 'makeItSans',
-            fontWeight: 'bold',
-            lineHeight: 'sm',
-            fontSize: 'sm',
-        },
-    },
-    heading6: {
-        value: {
-            fontFamily: 'makeItSans',
-            fontWeight: 'bold',
-            lineHeight: 'sm',
-            fontSize: 'xs',
-        },
-    },
-    'body-large': {
-        value: {
-            fontFamily: 'makeItSans',
-            fontWeight: 'regular',
-            lineHeight: 'md',
-            fontSize: 'md',
-        },
-    },
-    body: {
-        value: {
-            fontFamily: 'makeItSans',
-            fontWeight: 'regular',
-            lineHeight: 'md',
-            fontSize: 'base',
-        },
-    },
-    'body-small': {
-        value: {
-            fontFamily: 'makeItSans',
-            fontWeight: 'regular',
-            lineHeight: 'md',
-            fontSize: 'sm',
-        },
-    },
-    'body-xs': {
-        value: {
-            fontFamily: 'makeItSans',
-            fontWeight: 'regular',
-            lineHeight: 'md',
-            fontSize: 'xs',
-        },
-    },
-    button: {
-        value: {
-            fontFamily: 'makeItSans',
-            fontWeight: 'bold',
-            lineHeight: 'sm',
-            fontSize: 'base',
-        },
-    },
-    label: {
-        value: {
-            fontFamily: 'makeItSans',
-            fontWeight: 'bold',
-            lineHeight: 'sm',
-            fontSize: 'base',
-        },
-    },
-});
-
-const wordBreak = 'break-word';
-const vehicleReferenceRecipe = react.defineSlotRecipe({
-    slots: ['carTitle', 'price', 'dealerName', 'dealerAddress'],
-    base: {
-        carTitle: {
-            color: 'gray.900',
-            textStyle: { '2xs': 'heading5', md: 'heading3' },
-            lineClamp: { '2xs': 1, md: 'none' },
-            wordBreak,
-        },
-        price: {
-            color: 'gray.900',
-            textStyle: { '2xs': 'heading3', md: 'heading2' },
-        },
-        dealerName: {
-            color: 'gray.900',
-            textStyle: 'heading4',
-            display: { '2xs': 'none', md: 'flex' },
-            wordBreak,
-        },
-        dealerAddress: {
-            color: 'gray.900',
-            textStyle: 'body',
-            display: { '2xs': 'none', md: 'flex' },
-            wordBreak,
-        },
-    },
-});
-
-const tooltipSlotRecipe = react.defineSlotRecipe({
-    slots: ['trigger', 'arrow', 'arrowTip', 'positioner', 'content'],
-    className: 'chakra-tooltip',
-    base: {
-        content: {
-            '--tooltip-bg': '{colors.gray.900}',
-            bg: 'var(--tooltip-bg)',
-            color: 'white',
-            padding: 'sm',
-            textStyle: 'body',
-            maxWidth: '6xl',
-            zIndex: 'tooltip',
-            transformOrigin: 'var(--transform-origin)',
-            _open: {
-                animationStyle: 'scale-fade-in',
-                animationDuration: 'fast',
-            },
-            _closed: {
-                animationStyle: 'scale-fade-out',
-                animationDuration: 'fast',
-            },
-        },
-        arrow: {
-            '--arrow-size': 'sizes.xxs',
-            '--arrow-background': 'var(--tooltip-bg)',
-        },
-        arrowTip: {
-            borderTop: '1px',
-            borderInlineStart: '1px',
-            borderColor: 'var(--tooltip-bg)',
-        },
-    },
-});
-
-const baseTriggerStyle$1 = react.defineStyle({
-    textStyle: 'body',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    transitionProperty: 'common',
-    transitionDuration: 'normal',
-    '--tabs-border-width': '3px',
-    borderBottomWidth: 'var(--tabs-border-width)',
-    borderBottomStyle: 'var(--tabs-border-style, solid)',
-    borderBottomColor: 'transparent',
-    p: 'md',
-    color: 'gray.600',
-    cursor: 'pointer',
-    _selected: {
-        fontWeight: 'bold',
-        color: 'gray.900',
-        borderBottomWidth: 'var(--tabs-border-width)',
-        borderBottomStyle: 'var(--tabs-border-style, solid)',
-        borderBottomColor: 'currentColor',
-    },
-    _disabled: {
-        _active: { bg: 'none' },
-        cursor: 'notAllowed',
-        color: 'gray.300',
-    },
-});
-const baseListStyle = react.defineStyle({
-    display: 'flex',
-    width: 'full',
-    borderBottom: '1px',
-    borderColor: 'gray.200',
-    justifyContent: 'start',
-});
-const baseContentStyle$1 = react.defineStyle({
-    textStyle: 'body',
-    m: 'sm',
-});
-const tabsRecipe = react.defineSlotRecipe({
-    slots: ['root', 'list', 'trigger', 'content', 'contentGroup'],
-    className: 'chakra-tabs',
-    base: {
-        trigger: baseTriggerStyle$1,
-        list: baseListStyle,
-        content: baseContentStyle$1,
-    },
-    variants: {
-        variant: {
-            default: {
-                trigger: {
-                    display: 'flex',
-                    _selected: {
-                        borderBottomColor: 'currentColor',
-                    },
-                },
-            },
-            spaceBetween: {
-                list: {
-                    justifyContent: 'space-between',
-                },
-                trigger: {
-                    _selected: {
-                        borderBottomColor: 'currentColor',
-                    },
-                },
-            },
-            spaceAround: {
-                list: {
-                    justifyContent: 'space-around',
-                },
-                trigger: {
-                    _selected: {
-                        borderBottomColor: 'currentColor',
-                    },
-                },
-            },
-            enclosed: {
-                list: {
-                    borderBottom: 'none',
-                },
-                trigger: {
-                    color: 'gray.700',
-                    fontWeight: 'bold',
-                    flexBasis: 'full',
-                    border: '1px',
-                    borderColor: 'blue.200',
-                    backgroundColor: 'blue.50',
-                    borderRight: 'none',
-                    '--tabs-border-width': '1px',
-                    _selected: {
-                        backgroundColor: 'transparent',
-                        borderBottomColor: 'transparent',
-                    },
-                    _last: {
-                        borderRight: '1px',
-                        borderRightColor: 'blue.200',
-                    },
-                },
-                content: {
-                    m: '0',
-                },
-            },
-            fullWidth: {
-                trigger: {
-                    flex: 1,
-                    _selected: {
-                        borderBottomColor: 'currentColor',
-                    },
-                },
-                content: {
-                    m: '0',
-                },
-            },
-        },
-    },
-    defaultVariants: {
-        variant: 'default',
-    },
-});
-
-const borderColor = 'colorPalette.200';
-const subtleColor = 'colorPalette.50';
-const tableRecipe = react.defineSlotRecipe({
-    className: 'chakra-table',
-    slots: [
-        'root',
-        'header',
-        'body',
-        'row',
-        'columnHeader',
-        'cell',
-        'footer',
-        'caption',
-    ],
-    base: {
-        root: {
-            fontVariantNumeric: 'lining-nums tabular-nums',
-            borderCollapse: 'collapse',
-            width: 'full',
-            textAlign: 'start',
-            verticalAlign: 'top',
-            colorPalette: 'gray',
-        },
-        cell: {
-            color: 'gray.900',
-            textAlign: 'start',
-            alignItems: 'center',
-        },
-        columnHeader: {
-            color: 'gray.700',
-            fontWeight: 'bold',
-            textTransform: 'uppercase',
-            textAlign: 'start',
-        },
-        caption: {
-            textAlign: 'center',
-        },
-        footer: {
-            borderTop: '1px',
-            '&:last-of-type th': {
-                borderBottom: 'none',
-            },
-        },
-        row: {
-            '&:not(:last-of-type)': {
-                borderBottom: 'none',
-            },
-        },
-    },
-    variants: {
-        interactive: {
-            true: {
-                body: {
-                    '& tr': {
-                        _hover: {
-                            bg: subtleColor,
-                        },
-                    },
-                },
-            },
-        },
-        striped: {
-            true: {
-                row: {
-                    '&:nth-of-type(odd) td': {
-                        bg: subtleColor,
-                    },
-                },
-                cell: {
-                    borderColor: subtleColor,
-                },
-                columnHeader: {
-                    borderColor: subtleColor,
-                },
-            },
-        },
-        showColumnBorder: {
-            true: {
-                columnHeader: {
-                    '&:not(:last-of-type)': {
-                        borderInlineEndWidth: '1px',
-                    },
-                },
-                cell: {
-                    '&:not(:last-of-type)': {
-                        borderInlineEndWidth: '1px',
-                    },
-                },
-            },
-        },
-        variant: {
-            line: {
-                columnHeader: {
-                    borderBottom: '1px',
-                    borderColor,
-                },
-                cell: {
-                    color: 'gray.900',
-                    borderBottom: '1px',
-                    borderColor,
-                },
-                caption: {
-                    color: 'gray.700',
-                },
-            },
-            outline: {
-                columnHeader: {
-                    borderBottom: '1px',
-                    borderColor,
-                },
-                cell: {
-                    borderBottom: '1px',
-                    borderColor,
-                },
-                header: {
-                    bg: subtleColor,
-                },
-                footer: {
-                    borderTop: '1px',
-                    borderColor,
-                },
-            },
-        },
-        size: {
-            sm: {
-                columnHeader: {
-                    px: 'xs',
-                    py: 'xs',
-                    textStyle: 'heading5',
-                },
-                cell: {
-                    px: 'xs',
-                    py: 'xs',
-                    textStyle: 'body',
-                },
-                caption: {
-                    px: 'xs',
-                    py: 'xs',
-                    textStyle: 'body',
-                    fontSize: 'sm',
-                },
-            },
-            md: {
-                columnHeader: {
-                    px: 'md',
-                    py: 'sm',
-                    textStyle: 'heading4',
-                    fontSize: 'sm',
-                },
-                cell: {
-                    px: 'md',
-                    py: 'sm',
-                    textStyle: 'body',
-                },
-                caption: {
-                    px: 'md',
-                    py: 'sm',
-                    textStyle: 'body',
-                },
-            },
-        },
-    },
-    compoundVariants: [
-        {
-            interactive: true,
-            striped: true,
-            css: {
-                row: {
-                    _hover: {
-                        '&:nth-of-type(odd) td': {
-                            bg: 'colorPalette.100',
-                        },
-                    },
-                },
-                body: {
-                    '& tr': {
-                        _hover: {
-                            bg: 'colorPalette.100',
-                        },
-                    },
-                },
-            },
-        },
-        {
-            striped: true,
-            showColumnBorder: true,
-            css: {
-                cell: {
-                    borderColor,
-                },
-                columnHeader: {
-                    borderColor,
-                },
-            },
-        },
-    ],
-    defaultVariants: {
-        variant: 'line',
-        size: 'md',
-    },
-});
-
-const switchRecipe = react.defineSlotRecipe({
-    slots: ['root', 'control', 'thumb', 'label'],
-    className: 'chakra-switch',
-    base: {
-        root: {
-            display: 'inline-flex',
-            gap: 'sm',
-            alignItems: 'center',
-            position: 'relative',
-            verticalAlign: 'middle',
-            '--checkmark-width': '25%',
-            '--checkmark-height': '45%',
-            '--checkmark-top': '50%',
-            '--checkmark-left': '50%',
-            '--checkmark-border-style': 'solid',
-            '--checkmark-border-width': '0 2px 2px 0',
-            '--switch-diff': 'calc(var(--switch-width) - var(--switch-height))',
-            '--switch-width': '1.875rem',
-            '--switch-height': '1rem',
-            '--switch-x': {
-                base: 'var(--switch-diff)',
-                _rtl: 'calc(var(--switch-diff) * -1)',
-            },
-        },
-        control: {
-            bg: 'gray.700',
-            cursor: 'pointer',
-            borderRadius: 'full',
-            position: 'relative',
-            padding: 'xxs',
-            boxSizing: 'content-box',
-            width: 'var(--switch-width)',
-            height: 'var(--switch-height)',
-            flexShrink: 0,
-            _hover: {
-                bg: 'gray.900',
-            },
-            _checked: {
-                bg: 'blue.700',
-                _hover: {
-                    bg: 'blue.800',
-                },
-            },
-            _disabled: {
-                bg: 'gray.400',
-                cursor: 'notAllowed',
-                _checked: {
-                    bg: 'gray.400',
-                },
-            },
-        },
-        thumb: {
-            width: 'xs',
-            height: 'xs',
-            bg: 'white',
-            borderRadius: 'full',
-            position: 'absolute',
-            top: 'xxs',
-            left: 'xxs',
-            _checked: {
-                transform: 'translateX(var(--switch-x))',
-                _after: {
-                    content: '""',
-                    display: 'block',
-                    width: 'var(--checkmark-width)',
-                    height: 'var(--checkmark-height)',
-                    borderStyle: 'var(--checkmark-border-style)',
-                    borderWidth: 'var(--checkmark-border-width)',
-                    position: 'absolute',
-                    top: 'var(--checkmark-top)',
-                    left: 'var(--checkmark-left)',
-                    transform: 'translate(-50%, -50%) rotate(45deg)',
-                    borderColor: 'blue.700',
-                },
-                _groupHover: {
-                    outlineStyle: 'solid',
-                    outlineWidth: '4px',
-                    outlineColor: 'blue.300/40',
-                },
-                _disabled: {
-                    _after: {
-                        borderColor: 'gray.400',
-                    },
-                },
-            },
-        },
-        label: {
-            userSelect: 'none',
-            fontSize: 'base',
-            _disabled: {
-                color: 'gray.600',
-            },
-        },
-    },
-});
-
-const sliderSlotRecipe = react.defineSlotRecipe({
-    className: 'chakra-slider',
-    slots: ['root', 'control', 'track', 'range', 'markerGroup', 'thumb'],
-    base: {
-        root: {
-            display: 'flex',
-            flexDirection: 'column',
-            width: 'full',
-            fontSize: 'base',
-            '--slider-marker-inset': '4px',
-            '--slider-marker-track': '4px',
-            '--slider-thumb-border': '1px',
-            '--slider-thumb-boxShadow': '0 0 0 8px #2988E14D',
-            '--slider-thumb-size': 'var(--chakra-sizes-sm)',
-            overflow: 'visible',
-        },
-        control: {
-            display: 'flex',
-            width: 'full',
-            alignItems: 'center',
-            position: 'relative',
-            overflow: 'visible',
-            paddingY: 'sm',
-            height: 'sm',
-        },
-        track: {
-            flex: '1',
-            width: 'full',
-            height: 'var(--slider-marker-track)',
-            bg: 'gray.200',
-            borderRadius: 'sm',
-        },
-        range: {
-            height: 'var(--slider-marker-track)',
-            bg: 'gray.900',
-            borderRadius: 'sm',
-        },
-        markerGroup: {
-            position: 'absolute!',
-            top: '2xl',
-            insetInline: 'var(--slider-marker-inset)',
-        },
-        thumb: {
-            width: 'sm',
-            height: 'sm',
-            borderRadius: 'full',
-            borderWidth: 'var(--slider-thumb-border)',
-            borderColor: 'gray.400',
-            backgroundColor: 'white',
-            _hover: { cursor: 'pointer' },
-            _active: { boxShadow: 'var(--slider-thumb-boxShadow)' },
-        },
-    },
-});
-
-const simpleHeaderRecipe = react.defineSlotRecipe({
-    className: 'chakra-simple-header',
-    slots: ['header', 'mainContainer', 'title', 'iconWrapper'],
-    base: {
-        header: {
-            color: 'gray.900',
-        },
-        mainContainer: {
-            width: 'full',
-            maxWidth: 'container.lg',
-            flexDirection: 'row',
-            justifyContent: 'space-between',
-            alignItems: 'center',
-            minHeight: { '2xs': 'xl', md: '2xl' },
-            paddingX: { '2xs': 'lg', lg: '0' },
-        },
-        title: {
-            textStyle: { '2xs': 'heading3', md: 'heading1' },
-            wordBreak: 'break-word',
-        },
-        iconWrapper: {
-            alignSelf: 'baseline',
-            paddingLeft: 'md',
-            paddingTop: { md: 'sm' },
-        },
-    },
-});
-
-const variantOutline = react.defineStyle({
-    border: '1px',
-    borderStyle: 'var(--chakra-border-style, solid)',
-    borderColor: 'gray.400',
-    borderRadius: 'sm',
-    bg: 'inherit',
-    color: 'gray.900',
-    _placeholder: {
-        color: 'gray.400',
-    },
-    _hover: {
-        borderColor: 'gray.900',
-    },
-    _focus: {
-        backgroundColor: 'blue.50',
-    },
-    _active: {},
-    _invalid: {
-        borderColor: 'red.500',
-        _hover: {
-            borderColor: 'red.500',
-        },
-    },
-    _disabled: {
-        cursor: 'notAllowed',
-        color: 'gray.300',
-        borderColor: 'gray.200',
-    },
-});
-const fieldBase = react.defineStyle({
-    width: 'full',
-    height: 'var(--input-height)',
-    px: 'var(--input-padding-x)',
-    py: 'var(--input-padding-y)',
-    minWidth: '0',
-    outline: 0,
-    position: 'relative',
-    appearance: 'none',
-    transitionProperty: 'common',
-    transitionDuration: 'normal',
-    display: 'inline-flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    gap: 'xs',
-});
-const fieldSizeLarge = react.defineStyle({
-    textStyle: 'body',
-    '--input-padding-x': 'spacing.md',
-    '--input-padding-y': 'spacing.xs',
-    '--input-height': 'sizes.lg',
-});
-const fieldSizeMedium = react.defineStyle({
-    textStyle: 'body',
-    '--input-padding-x': 'spacing.md',
-    '--input-padding-y': 'spacing.xs',
-    '--input-height': 'sizes.md',
-});
-const inputSlotRecipe = react.defineSlotRecipe({
-    className: 'chakra-input',
-    slots: ['field', 'icon', 'clearButton'],
-    base: {
-        field: fieldBase,
-        clearButton: {
-            display: 'flex',
-        },
-    },
-    variants: {
-        variant: {
-            outline: {
-                field: variantOutline,
-            },
-        },
-        size: {
-            lg: {
-                field: fieldSizeLarge,
-                icon: {
-                    paddingLeft: 'md',
-                },
-                clearButton: {
-                    paddingRight: 'md',
-                },
-            },
-            md: {
-                field: fieldSizeMedium,
-                icon: {
-                    paddingLeft: 'sm',
-                },
-                clearButton: {
-                    paddingRight: 'sm',
-                },
-            },
-        },
-    },
-    defaultVariants: {
-        variant: 'outline',
-        size: 'md',
-    },
-});
-
-const selectSlotRecipe = react.defineSlotRecipe({
-    className: 'chakra-select',
-    slots: ['root', 'field', 'indicator'],
-    base: {
-        root: {
-            position: 'relative',
-            height: 'fit',
-        },
-        field: {
-            ...fieldBase,
-            paddingRight: '3xl',
-        },
-        indicator: {
-            position: 'absolute',
-            top: 'half',
-            right: 'sm',
-            transform: 'translateY(-50%)',
-            display: 'inline-flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            width: 'xs',
-            height: 'xs',
-            pointerEvents: 'none',
-            _disabled: { color: 'gray.200' },
-        },
-    },
-    variants: {
-        // Since we use input component styles, we can use the same variants
-        variant: {
-            outline: { field: variantOutline },
-        },
-        size: {
-            lg: {
-                field: fieldSizeLarge,
-            },
-            md: {
-                field: fieldSizeMedium,
-            },
-        },
-    },
-    defaultVariants: {
-        variant: 'outline',
-        size: 'lg',
-    },
-});
-
-const sectionRecipe = react.defineSlotRecipe({
-    className: 'chakra-section',
-    slots: ['root', 'imageContainer', 'textContainer', 'title', 'text'],
-    base: {
-        root: {
-            flexDirection: { '2xs': 'column', md: 'row' },
-            gap: 'xl',
-        },
-        imageContainer: {
-            flexShrink: '0',
-        },
-        textContainer: {
-            gap: 'md',
-        },
-        title: { color: 'gray.900' },
-        text: { color: 'gray.900' },
-    },
-    variants: {
-        variant: {
-            hero: {
-                title: {
-                    textStyle: 'heading1',
-                },
-                text: {
-                    textStyle: 'body-large',
-                },
-            },
-            regular: {
-                title: {
-                    textStyle: 'heading2',
-                },
-                text: {
-                    textStyle: 'body',
-                },
-            },
-        },
-    },
-    defaultVariants: {
-        variant: 'hero',
-    },
-});
-
-const radioRecipe = react.defineSlotRecipe({
-    className: 'chakra-radio',
-    slots: ['root', 'item', 'control', 'indicator', 'label'],
-    base: {
-        root: {
-            position: 'relative',
-            display: 'inline-flex',
-            alignItems: 'center',
-            '--radio-control-size': '16px',
-            '--radio-indicator-size': '16px',
-            '--radio-border-style': 'solid',
-            '--radio-border-width': '1px',
-        },
-        item: {
-            display: 'flex',
-            alignItems: 'center',
-            gap: 'sm',
-            cursor: 'pointer',
-            px: 'sm',
-            py: 'xxs',
-            listStyle: 'none',
-            padding: '0',
-        },
-        control: {
-            boxSize: 'xs',
-            rounded: 'full',
-            borderStyle: 'var(--radio-border-style)',
-            borderWidth: 'var(--radio-border-width)',
-            borderColor: 'gray.400',
-            bg: 'white',
-            display: 'inline-flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            flexShrink: 0,
-            _checked: {
-                borderColor: 'blue.700',
-            },
-            _hover: {
-                outlineStyle: 'solid',
-                outlineWidth: '2px',
-                outlineColor: 'blue.100',
-                borderColor: 'gray.900',
-                _checked: {
-                    borderColor: 'blue.700',
-                },
-            },
-            _focusVisible: {
-                outlineStyle: 'solid',
-                outlineWidth: '2px',
-                outlineColor: 'blue.300',
-                borderColor: 'gray.900',
-                _checked: {
-                    borderColor: 'blue.700',
-                },
-            },
-            _invalid: { borderColor: 'red.500' },
-            _disabled: {
-                cursor: 'notAllowed',
-                borderColor: 'gray.400',
-                _invalid: { borderColor: 'red.500' },
-            },
-        },
-        indicator: {
-            rounded: 'full',
-            width: 'xxs',
-            height: 'xxs',
-            bg: 'blue.700',
-            opacity: 0,
-            transform: 'scale(0.6)',
-            transition: 'opacity 0.15s ease, transform 0.15s ease',
-            _checked: {
-                opacity: 1,
-                transform: 'scale(1)',
-                _disabled: {
-                    bg: 'gray.400',
-                },
-            },
-        },
-        label: {
-            userSelect: 'none',
-            fontWeight: 'regular',
-            color: 'gray.900',
-            _disabled: { color: 'gray.600' },
-        },
-    },
-    variants: {
-        variant: {
-            fontRegular: {
-                root: {},
-                item: {},
-                control: {},
-                indicator: {},
-                label: { fontWeight: 'regular' },
-            },
-            fontBold: {
-                root: {},
-                item: {},
-                control: {},
-                indicator: {},
-                label: { fontWeight: 'bold' },
-            },
-        },
-        size: {
-            base: {
-                root: {},
-                item: {},
-                control: {},
-                indicator: {},
-                label: { fontSize: 'base' },
-            },
-            md: {
-                root: {},
-                item: {},
-                control: {},
-                indicator: {},
-                label: { fontSize: 'md' },
-            },
-        },
-    },
-    defaultVariants: { variant: 'fontRegular', size: 'base' },
-});
-
-const progressSlotRecipe = react.defineSlotRecipe({
-    className: 'chakra-progress',
-    slots: ['root', 'track', 'range'],
-    base: {
-        track: {
-            height: 'xxs',
-            bg: 'gray.50',
-            borderRadius: 'lg',
-            overflow: 'hidden',
-        },
-        range: {
-            height: 'full',
-            bg: 'gray.900',
-            borderRadius: 'lg',
-        },
-    },
-});
-
-const baseTriggerStyle = react.defineStyle({
-    display: 'flex',
-    justifyContent: 'space-between',
-    flex: 1,
-    minWidth: '0',
-    paddingX: 'md',
-    border: '1px',
-    borderColor: 'gray.100',
-    borderRadius: 'sm',
-    cursor: 'pointer',
-});
-const baseCloseStyle = react.defineStyle({
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    minWidth: 'md',
-    border: '1px',
-    borderRadius: 'sm',
-    backgroundColor: 'gray.900',
-    color: 'white',
-    cursor: 'pointer',
-    _hover: { backgroundColor: 'black' },
-});
-const baseContentStyle = react.defineStyle({
-    width: '6xl',
-    borderRadius: 'sm',
-    backgroundColor: 'white',
-    shadow: 'md',
-    padding: 0,
-    _open: {
-        animationName: 'fade-in',
-        animationDuration: 'normal',
-    },
-    _closed: {
-        animationName: 'fade-out',
-        animationDuration: 'normal',
-    },
-});
-const baseBodyStyle = react.defineStyle({
-    paddingX: '2xl',
-    marginTop: '2xl',
-    overflowY: 'auto',
-});
-const popoverFilterRecipe = react.defineSlotRecipe({
-    slots: ['trigger', 'close', 'content', 'body'],
-    className: 'chakra-popover-filter',
-    base: {
-        trigger: baseTriggerStyle,
-        close: baseCloseStyle,
-        content: baseContentStyle,
-        body: baseBodyStyle,
-    },
-});
-
-const popoverRecipe = react.defineSlotRecipe({
-    slots: anatomy.popoverAnatomy.keys(),
-    base: {
-        content: {
-            padding: '0',
-            _focusVisible: { outline: 'none' },
-            bg: 'white',
-            '--popover-bg': 'white',
-            _open: {
-                animationStyle: 'scale-fade-in',
-                animationDuration: 'normal',
-            },
-            _closed: {
-                animationStyle: 'scale-fade-out',
-                animationDuration: 'normal',
-            },
-        },
-        arrow: {
-            '--arrow-size': '12px',
-            '--arrow-background': 'var(--popover-bg)',
-        },
-        arrowTip: {
-            border: '1px',
-            borderColor: 'white',
-        },
-    },
-    variants: {
-        size: {
-            xl: {
-                content: {
-                    width: '6xl',
-                    p: 'md',
-                },
-            },
-            md: {
-                content: {
-                    width: 'auto',
-                    p: '2xl',
-                },
-            },
-        },
-    },
-    defaultVariants: {
-        size: 'md',
-    },
-});
-
-const paginationRecipe = react.defineSlotRecipe({
-    className: 'chakra-pagination',
-    slots: ['paginationContainer', 'paginationButton', 'dots'],
-    base: {
-        paginationContainer: {
-            display: 'flex',
-            flexWrap: 'wrap',
-            flexDirection: 'row',
-            alignItems: 'center',
-            justifyContent: { base: 'space-evenly', sm: 'center' },
-            textStyle: 'body',
-        },
-        paginationButton: {
-            display: 'inline-flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            verticalAlign: 'middle',
-            textAlign: 'center',
-            minWidth: 'md',
-            height: 'md',
-            borderRadius: 'sm',
-            padding: { base: 'xs', sm: 'sm' },
-            marginX: { base: '0', sm: 'xxs' },
-            cursor: 'pointer',
-            _hover: {
-                backgroundColor: 'gray.100',
-            },
-            _active: {
-                backgroundColor: 'gray.200',
-            },
-            _disabled: {
-                cursor: 'default',
-                color: 'gray.300',
-                _hover: {
-                    backgroundColor: 'inherit',
-                },
-            },
-            _selected: {
-                backgroundColor: 'gray.900',
-                color: 'white',
-                _hover: {
-                    backgroundColor: 'gray.900',
-                },
-            },
-        },
-        dots: {
-            minWidth: { base: '0', sm: 'md' },
-            height: 'auto',
-            textAlign: 'center',
-        },
-    },
-});
-
-const numberInputRecipe = react.defineSlotRecipe({
-    className: 'chakra-number-input',
-    slots: [
-        'root',
-        'input',
-        'control',
-        'incrementTrigger',
-        'decrementTrigger',
-    ],
-    base: {
-        root: {
-            position: 'relative',
-        },
-        input: {
-            w: 'full',
-            minW: '0',
-            outline: 0,
-            pos: 'relative',
-            appearance: 'none',
-            transitionProperty: 'common',
-            transitionDuration: 'normal',
-            px: 'md',
-            py: 'xs',
-            textAlign: 'right',
-        },
-        control: { h: 'full' },
-        incrementTrigger: {},
-        decrementTrigger: {},
-    },
-    variants: {
-        variant: {
-            outline: {
-                input: {
-                    border: '1px',
-                    borderColor: 'gray.400',
-                    borderRadius: 'sm',
-                    bg: 'inherit',
-                    color: 'gray.900',
-                    _placeholder: { color: 'gray.400' },
-                    _hover: { borderColor: 'gray.900' },
-                    _focus: { bg: 'blue.50' },
-                    _invalid: {
-                        borderColor: 'red.500',
-                        _hover: { borderColor: 'red.500' },
-                    },
-                    _disabled: {
-                        cursor: 'notAllowed',
-                        color: 'gray.300',
-                        borderColor: 'gray.200',
-                    },
-                },
-            },
-            inputLeft: {
-                input: {
-                    border: '1px',
-                    borderColor: 'gray.400',
-                    borderRadius: 'sm',
-                    bg: 'inherit',
-                    color: 'gray.900',
-                    _placeholder: { color: 'gray.400' },
-                    _hover: { borderColor: 'gray.900' },
-                    _focus: { bg: 'blue.50' },
-                    _invalid: {
-                        borderColor: 'red.500',
-                        _hover: { borderColor: 'red.500' },
-                    },
-                    _disabled: {
-                        cursor: 'notAllowed',
-                        color: 'gray.300',
-                        borderColor: 'gray.200',
-                    },
-                    borderEndRadius: 'none',
-                    borderEnd: 'none',
-                },
-            },
-            inputRight: {
-                input: {
-                    border: '1px',
-                    borderColor: 'gray.400',
-                    borderRadius: 'sm',
-                    bg: 'inherit',
-                    color: 'gray.900',
-                    _placeholder: { color: 'gray.400' },
-                    _hover: { borderColor: 'gray.900' },
-                    _focus: { bg: 'blue.50' },
-                    _invalid: {
-                        borderColor: 'red.500',
-                        _hover: { borderColor: 'red.500' },
-                    },
-                    _disabled: {
-                        cursor: 'notAllowed',
-                        color: 'gray.300',
-                        borderColor: 'gray.200',
-                    },
-                    borderStartRadius: 'none',
-                },
-            },
-        },
-        size: {
-            lg: { input: { textStyle: 'body-small', h: 'lg' } },
-        },
-    },
-    defaultVariants: {
-        variant: 'outline',
-        size: 'lg',
-    },
-});
-
-const maximumScrollbarWidth = 20;
-const content = react.defineStyle({
-    '--max-width': `calc(100vw - ${maximumScrollbarWidth}px)`,
-    bg: 'white',
-    boxShadow: 'sm',
-    color: 'inherit',
-    minW: '4xl',
-    maxW: 'var(--max-width)',
-    py: 'xxs',
-    zIndex: 'dropdown',
-    borderRadius: 'sm',
-    border: '1px',
-    borderColor: 'gray.200',
-    cursor: 'pointer',
-    _focusVisible: {
-        outline: 'none',
-    },
-    _open: {
-        animationStyle: 'scale-fade-in',
-        animationDuration: 'fast',
-    },
-    _closed: {
-        animationStyle: 'scale-fade-out',
-        animationDuration: 'fast',
-    },
-});
-const item = react.defineStyle({
-    display: 'flex',
-    paddingY: 'md',
-    paddingX: 'lg',
-    cursor: 'pointer',
-    _focus: {
-        bg: 'gray.100',
-    },
-    _focusVisible: {
-        outline: 'none',
-    },
-    _active: {
-        bg: 'blue.100',
-    },
-    _expanded: {
-        bg: 'gray.100',
-    },
-    _hover: {
-        bg: 'gray.100',
-    },
-    _disabled: {
-        opacity: '40',
-        cursor: 'notAllowed',
-    },
-});
-const trigger = react.defineStyle({
-    display: 'inline-flex',
-    padding: '0',
-    cursor: 'pointer',
-    _focusVisible: {
-        outline: 'none',
-    },
-});
-const menuRecipe = react.defineSlotRecipe({
-    slots: ['content', 'item', 'trigger'],
-    className: 'chakra-menu',
-    base: {
-        content,
-        item,
-        trigger,
-    },
-});
-
-const markedTextRecipe = react.defineSlotRecipe({
-    className: 'chakra-marked-text',
-    slots: ['container', 'text', 'mark'],
-    base: {
-        container: {
-            '--container-width': 'max-content',
-            position: 'relative',
-            width: 'var(--container-width)',
-            display: 'inline-flex',
-            alignItems: 'center',
-        },
-        text: {
-            position: 'relative',
-            width: 'full',
-            backgroundColor: 'transparent',
-        },
-        mark: {
-            position: 'absolute',
-            top: 'var(--mark-top)',
-            left: 'var(--mark-left)',
-            width: 'var(--mark-width)',
-            height: 'var(--mark-height)',
-        },
-    },
-    variants: {
-        variant: {
-            highlight: {
-                container: {
-                    '--mark-top': '0',
-                    '--mark-left': '0',
-                    '--mark-width': '100%',
-                    '--mark-height': '100%',
-                    paddingX: 'sm',
-                },
-            },
-            underline: {
-                container: {
-                    '--mark-top': '1.25em',
-                    '--mark-left': '-0.25ch',
-                    '--mark-width': 'calc(100% + 0.5ch)',
-                    '--mark-height': {
-                        md: '8px',
-                        base: '6px',
-                    },
-                    paddingX: 'sm',
-                },
-                text: {
-                    lineHeight: 'sm',
-                },
-            },
-        },
-    },
-    defaultVariants: {
-        variant: 'highlight',
-    },
-});
-
-const listRecipe = react.defineSlotRecipe({
-    className: 'chakra-list',
-    slots: ['root', 'item', 'itemLabel', 'itemValue', 'icon'],
-    base: {
-        icon: {
-            marginEnd: '2',
-            display: 'inline',
-            verticalAlign: 'text-bottom',
-        },
-    },
-    variants: {
-        size: {
-            md: {
-                root: {
-                    textStyle: 'body',
-                },
-            },
-            sm: {
-                root: {
-                    textStyle: 'body-small',
-                },
-            },
-        },
-        variant: {
-            'icon-inside': {
-                root: {
-                    listStylePosition: 'inside',
-                },
-            },
-            'icon-outside': {
-                root: {
-                    listStylePosition: 'outside',
-                    marginInlineStart: '1em',
-                    paddingInlineStart: 0,
-                    display: 'block',
-                },
-            },
-        },
-    },
-    defaultVariants: {
-        size: 'md',
-        variant: 'icon-inside',
-    },
-});
-
-const hoverCardRecipe = react.defineSlotRecipe({
-    slots: anatomy.hoverCardAnatomy.keys(),
-    base: {
-        content: {
-            bg: 'white',
-            '--popover-bg': 'white',
-            _open: {
-                animationStyle: 'scale-fade-in',
-                animationDuration: 'normal',
-            },
-            _closed: {
-                animationStyle: 'scale-fade-out',
-                animationDuration: 'normal',
-            },
-        },
-        arrow: {
-            '--arrow-size': '12px',
-            '--arrow-background': 'var(--popover-bg)',
-        },
-        arrowTip: {
-            border: '1px',
-            borderColor: 'white',
-        },
-    },
-    variants: {
-        size: {
-            xl: {
-                content: {
-                    width: '6xl',
-                    p: 'md',
-                },
-            },
-            md: {
-                content: {
-                    width: 'auto',
-                    p: '2xl',
-                },
-            },
-        },
-    },
-});
-
-const baseStyleContainer = react.defineStyle({
-    color: 'white',
-    px: '2xl',
-    py: 'lg',
-    position: {
-        base: 'fixed',
-        md: 'static',
-    },
-    top: '0',
-    left: '0',
-    right: '0',
-    zIndex: 'docked',
-    bg: 'blackAlpha.600',
-});
-const baseStyleGrid = react.defineStyle({
-    alignItems: 'center',
-});
-const baseStyleCountContainer = react.defineStyle({
-    textAlign: {
-        base: 'left',
-        md: 'center',
-    },
-});
-const baseStyleCloseContainer = react.defineStyle({
-    textAlign: 'right',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'flex-end',
-});
-const slots$2 = [
-    'container',
-    'grid',
-    'countContainer',
-    'closeContainer',
-];
-const galleryHeaderRecipe = react.defineSlotRecipe({
-    slots: slots$2,
-    className: 'chakra-gallery-header',
-    base: {
-        container: baseStyleContainer,
-        grid: baseStyleGrid,
-        countContainer: baseStyleCountContainer,
-        closeContainer: baseStyleCloseContainer,
-    },
-});
-
-const fieldSlotRecipe = react.defineSlotRecipe({
-    className: 'chakra-field',
-    slots: [
-        'root',
-        'errorText',
-        'helperText',
-        'label',
-        'labelRoot',
-        'requiredIndicator',
-        'tooltipWrapper',
-        'tooltipIcon',
-        'button',
-    ],
-    base: {
-        requiredIndicator: {
-            color: 'red.500',
-            lineHeight: 'xs',
-        },
-        root: {
-            width: 'full',
-            position: 'relative',
-        },
-        label: {
-            display: 'flex',
-            color: 'gray.900',
-            alignItems: 'center',
-            textAlign: 'start',
-            textStyle: 'label',
-            fontWeight: 'bold',
-            marginBottom: 'xs',
-            gap: 'xs',
-            userSelect: 'none',
-            _disabled: {
-                color: 'gray.300',
-                cursor: 'notAllowed',
-            },
-        },
-        labelRoot: {
-            display: 'flex',
-            flexDirection: 'row',
-            justifyContent: 'space-between',
-            width: 'full',
-        },
-        errorText: {
-            display: 'inline-flex',
-            alignItems: 'center',
-            fontWeight: 'regular',
-            gap: 'sm',
-            color: 'red.500',
-            textStyle: 'body-small',
-        },
-        helperText: {
-            color: 'gray.400',
-            textStyle: 'body-small',
-        },
-        tooltipWrapper: {
-            display: 'flex',
-            flexDirection: 'row',
-            alignItems: 'center',
-            gap: 'sm',
-        },
-        tooltipIcon: {
-            position: 'relative',
-            bottom: 'xxs',
-        },
-        button: {
-            color: 'blue.700',
-            padding: '0',
-            textStyle: 'body-small',
-        },
-    },
-    variants: {
-        size: {
-            sm: {
-                label: { fontSize: 'sm' },
-            },
-            lg: {
-                label: { fontSize: 'base' },
-            },
-        },
-    },
-    defaultVariants: {
-        size: 'lg',
-    },
-});
-
-const energyLabelRecipe = react.defineSlotRecipe({
-    className: 'chakra-energy-label',
-    slots: ['root', 'triangle', 'textWrapper', 'text'],
-    base: {
-        root: {
-            '--height': '20px',
-            height: 'var(--height)',
-            width: 'md',
-        },
-        triangle: {
-            borderTopColor: 'transparent',
-            borderBottomColor: 'transparent',
-            '--border-width': '10px',
-            borderBottomWidth: 'var(--border-width)',
-            borderTopWidth: 'var(--border-width)',
-            borderRightWidth: 'var(--border-width)',
-            borderRightColor: 'var(--label-color)',
-        },
-        textWrapper: {
-            width: 'full',
-            height: 'full',
-            justifyContent: 'end',
-            alignItems: 'center',
-            paddingRight: 'xs',
-            backgroundColor: 'var(--label-color)',
-        },
-        text: {
-            color: 'white',
-            textStyle: 'heading4',
-        },
-    },
-    variants: {
-        efficiency: {
-            A: {
-                root: {
-                    '--label-color': '#4CA651',
-                },
-            },
-            B: {
-                root: {
-                    '--label-color': '#54B646',
-                },
-            },
-            C: {
-                root: {
-                    '--label-color': '#CAD143',
-                },
-            },
-            D: {
-                root: {
-                    '--label-color': '#FEF050',
-                },
-            },
-            E: {
-                root: {
-                    '--label-color': '#F1AE3D',
-                },
-            },
-            F: {
-                root: {
-                    '--label-color': '#EE6E2D',
-                },
-            },
-            G: {
-                root: {
-                    '--label-color': '#D02F26',
-                },
-            },
-        },
-    },
-});
-
-const drawerRecipe = react.defineSlotRecipe({
-    slots: ['root', 'backdrop', 'positioner', 'content', 'body', 'closeTrigger'],
-    className: 'chakra-drawer',
-    base: {
-        root: {},
-        backdrop: {
-            position: 'fixed',
-            insetInlineStart: '0',
-            top: '0',
-            width: 'full',
-            height: 'full',
-            zIndex: 'overlay',
-            _open: {
-                animation: 'fade-in',
-            },
-            _closed: {
-                animation: 'fade-out',
-            },
-        },
-        positioner: {
-            display: 'flex',
-            width: 'full',
-            height: 'full',
-            position: 'fixed',
-            insetInlineStart: '0',
-            top: '0',
-            zIndex: 'modal',
-        },
-        content: {
-            bg: 'white',
-            boxShadow: 'xs',
-            overflow: 'auto',
-            display: 'flex',
-            flexDirection: 'column',
-        },
-        body: {
-            flex: 1,
-            padding: 'lg',
-            overflowY: 'auto',
-        },
-        closeTrigger: {
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center',
-            width: 'xs',
-            height: 'xs',
-            borderRadius: 'sm',
-            color: 'gray.800',
-            fontSize: 'base',
-            cursor: 'pointer',
-            _hover: {
-                bg: 'gray.100',
-            },
-        },
-    },
-    variants: {
-        placement: {
-            top: {
-                positioner: {
-                    alignItems: 'flex-start',
-                    justifyContent: 'stretch',
-                },
-            },
-            bottom: {
-                positioner: {
-                    alignItems: 'flex-end',
-                    justifyContent: 'stretch',
-                },
-            },
-            left: {
-                positioner: {
-                    alignItems: 'stretch',
-                    justifyContent: 'flex-start',
-                },
-            },
-            right: {
-                positioner: {
-                    alignItems: 'stretch',
-                    justifyContent: 'flex-end',
-                },
-            },
-        },
-        size: {
-            xl: {
-                content: {
-                    width: '4xl',
-                },
-            },
-            half: {
-                content: {
-                    width: 'half',
-                },
-            },
-            full: {
-                content: {
-                    width: 'full',
-                },
-            },
-        },
-    },
-    compoundVariants: [
-        {
-            placement: 'top',
-            size: 'xl',
-            css: {
-                content: {
-                    width: 'full',
-                    height: '2xl',
-                    _open: {
-                        animationName: 'slide-in-from-top',
-                        animationDuration: 'slow',
-                    },
-                    _closed: {
-                        animationName: 'slide-out-to-top',
-                        animationDuration: 'fast',
-                    },
-                },
-            },
-        },
-        {
-            placement: 'top',
-            size: 'half',
-            css: {
-                content: {
-                    width: 'full',
-                    height: 'half',
-                    _open: {
-                        animationName: 'slide-in-from-top',
-                        animationDuration: 'slow',
-                    },
-                    _closed: {
-                        animationName: 'slide-out-to-top',
-                        animationDuration: 'fast',
-                    },
-                },
-            },
-        },
-        {
-            placement: 'top',
-            size: 'full',
-            css: {
-                content: {
-                    width: 'full',
-                    height: 'full',
-                    _open: {
-                        animationName: 'slide-in-from-top',
-                        animationDuration: 'slow',
-                    },
-                    _closed: {
-                        animationName: 'slide-out-to-top',
-                        animationDuration: 'fast',
-                    },
-                },
-            },
-        },
-        {
-            placement: 'right',
-            css: {
-                content: {
-                    _open: {
-                        animationName: 'slide-in-from-right',
-                        animationDuration: 'slow',
-                    },
-                    _closed: {
-                        animationName: 'slide-out-to-right',
-                        animationDuration: 'fast',
-                    },
-                },
-            },
-        },
-        {
-            placement: 'bottom',
-            size: 'xl',
-            css: {
-                content: {
-                    width: 'full',
-                    height: '2xl',
-                    _open: {
-                        animationName: 'slide-in-from-bottom',
-                        animationDuration: 'slow',
-                    },
-                    _closed: {
-                        animationName: 'slide-out-to-bottom',
-                        animationDuration: 'fast',
-                    },
-                },
-            },
-        },
-        {
-            placement: 'bottom',
-            size: 'half',
-            css: {
-                content: {
-                    width: 'full',
-                    height: 'half',
-                    _open: {
-                        animationName: 'slide-in-from-bottom',
-                        animationDuration: 'slow',
-                    },
-                    _closed: {
-                        animationName: 'slide-out-to-bottom',
-                        animationDuration: 'fast',
-                    },
-                },
-            },
-        },
-        {
-            placement: 'bottom',
-            size: 'full',
-            css: {
-                content: {
-                    width: 'full',
-                    height: 'full',
-                    _open: {
-                        animationName: 'slide-in-from-bottom',
-                        animationDuration: 'slow',
-                    },
-                    _closed: {
-                        animationName: 'slide-out-to-bottom',
-                        animationDuration: 'fast',
-                    },
-                },
-            },
-        },
-        {
-            placement: 'left',
-            css: {
-                content: {
-                    _open: {
-                        animationName: 'slide-in-from-left',
-                        animationDuration: 'slow',
-                    },
-                    _closed: {
-                        animationName: 'slide-out-to-left',
-                        animationDuration: 'fast',
-                    },
-                },
-            },
-        },
-    ],
-    defaultVariants: {
-        placement: 'right',
-        size: 'half',
-    },
-});
-
-const baseStyleDialog$1 = react.defineStyle({
-    _open: {
-        animationName: 'fade-in',
-        animationDuration: 'normal',
-    },
-    _closed: {
-        animationName: 'fade-out',
-        animationDuration: 'normal',
-    },
-});
-const dialogFilterRecipe = react.defineSlotRecipe({
-    slots: ['content'],
-    className: 'chakra-dialog',
-    base: {
-        content: baseStyleDialog$1,
-    },
-});
-
-const baseStyleOverlay = react.defineStyle({
-    bg: 'black',
-    zIndex: 'modal',
-    opacity: '40',
-    w: 'full',
-    h: 'full',
-    position: 'fixed',
-    left: '0',
-    top: '0',
-});
-const baseStyleDialogContainer = react.defineStyle({
-    display: 'flex',
-    flexDirection: 'column',
-    width: 'full',
-    height: '100dvh',
-    position: 'fixed',
-    left: '0',
-    top: '0',
-    zIndex: 'modal',
-    justifyContent: 'center',
-    alignItems: 'center',
-    overflow: 'hidden',
-    overscrollBehaviorY: 'none',
-});
-const baseStyleDialog = react.defineStyle({
-    display: 'flex',
-    flexDirection: 'column',
-    position: 'relative',
-    outline: '0',
-    width: 'full',
-    borderRadius: 'sm',
-    bg: { base: 'white', _dark: 'gray.700' },
-    color: 'inherit',
-    zIndex: 'modal',
-    boxShadow: 'lg',
-    _open: {
-        animationName: 'fade-in',
-        animationDuration: 'normal',
-    },
-    _closed: {
-        animationName: 'fade-out',
-        animationDuration: 'normal',
-    },
-});
-const baseStyleHeader = react.defineStyle({
-    px: 'lg',
-    py: 'xl',
-    display: 'flex',
-    gap: 'sm',
-    justifyContent: 'space-between',
-    alignItems: 'space-between',
-    position: 'relative',
-});
-const baseStyleBody = react.defineStyle({
-    p: '2xl',
-    flex: '1',
-    minHeight: '0',
-    overflowY: 'auto',
-});
-const baseStyleFooter = react.defineStyle({
-    px: 'lg',
-    py: 'md',
-    display: 'flex',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-});
-const baseStyleCloseButton = react.defineStyle({
-    width: 'sm',
-    height: 'sm',
-    _hover: { bg: 'gray.100' },
-});
-const sizeContent = (w) => w === 'full'
-    ? react.defineStyle({
-        maxW: { base: 'full', sm: 'full' },
-        minH: { base: 'full', sm: 'full' },
-        my: '0',
-        borderRadius: 'none',
-    })
-    : react.defineStyle({
-        maxW: { base: 'full', sm: w },
-        minH: { base: 'full', sm: '0' },
-        my: { base: '0', sm: 'lg' },
-        borderRadius: { base: 'none', sm: 'sm' },
-    });
-const slots$1 = [
-    'header',
-    'body',
-    'footer',
-    'backdrop',
-    'content',
-    'positioner',
-    'closeTrigger',
-];
-const dialogRecipe = react.defineSlotRecipe({
-    slots: slots$1,
-    className: 'chakra-dialog',
-    base: {
-        positioner: baseStyleDialogContainer,
-        backdrop: baseStyleOverlay,
-        content: baseStyleDialog,
-        header: baseStyleHeader,
-        body: baseStyleBody,
-        footer: baseStyleFooter,
-        closeTrigger: baseStyleCloseButton,
-    },
-    variants: {
-        overlayColor: {
-            gray: { backdrop: { bg: 'gray.100', opacity: '100' } },
-        },
-        scrollBehavior: {
-            outside: {
-                positioner: {
-                    overflow: 'auto',
-                    pointerEvents: 'auto',
-                },
-            },
-        },
-        size: {
-            md: { content: sizeContent('7xl') },
-            lg: { content: sizeContent('8xl') },
-            auth0: { content: sizeContent('auth0-width') },
-            full: { content: sizeContent('full') },
-        },
-        motionPreset: {
-            scale: {
-                content: {
-                    _open: {
-                        animationStyle: 'scale-fade-in',
-                        animationDuration: 'normal',
-                    },
-                    _closed: {
-                        animationStyle: 'scale-fade-out',
-                        animationDuration: 'normal',
-                    },
-                },
-            },
-            none: {},
-        },
-        variant: {
-            fullScreen: {
-                backdrop: {
-                    bg: 'black',
-                    zIndex: 'modal',
-                    width: 'full',
-                },
-                positioner: {
-                    width: 'full',
-                    color: 'white',
-                    zIndex: 'fullScreenModal',
-                },
-                header: baseStyleHeader,
-                closeTrigger: { _hover: { bg: 'none' } },
-                body: {
-                    p: '0',
-                    flex: '1',
-                    minHeight: '0',
-                    overflowY: 'auto',
-                },
-                footer: baseStyleFooter,
-                content: {
-                    maxW: 'full',
-                    minH: 'full',
-                    bg: 'black',
-                    my: '0',
-                },
-            },
-            topScroll: {
-                positioner: {
-                    ...baseStyleDialogContainer,
-                    justifyContent: 'flex-start',
-                    overflowY: 'auto',
-                    overscrollBehaviorY: 'contain',
-                    pt: { base: '0', sm: '5xl' },
-                    pb: { base: '0', sm: 'lg' },
-                },
-                content: {
-                    flexShrink: '0',
-                    my: '0',
-                },
-                body: {
-                    overflowY: 'visible',
-                    flex: 'unset',
-                    minHeight: 'auto',
-                },
-            },
-        },
-    },
-});
-
-const checkboxRecipe = react.defineSlotRecipe({
-    className: 'chakra-checkbox',
-    slots: ['root', 'control', 'label', 'content'],
-    base: {
-        root: {
-            display: 'inline-flex',
-            gap: 'sm',
-            verticalAlign: 'top',
-            position: 'relative',
-        },
-        control: {
-            display: 'inline-flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            width: 'xs',
-            height: 'xs',
-            border: '1px',
-            borderColor: 'gray.400',
-            borderRadius: 'sm',
-            bg: 'white',
-            cursor: 'pointer',
-            '&:hover': {
-                outlineStyle: 'solid',
-                outlineWidth: '2px',
-                outlineColor: 'blue.100',
-                borderColor: 'gray.900',
-            },
-            _focusVisible: {
-                outlineStyle: 'solid',
-                outlineWidth: '2px',
-                outlineColor: 'blue.300',
-                borderColor: 'gray.900',
-            },
-            _icon: {
-                boxSize: 'xs',
-            },
-            '&[data-state=checked], &[data-state=indeterminate]': {
-                color: 'white',
-                borderColor: 'blue.700',
-                bg: 'blue.700',
-            },
-            _invalid: {
-                borderColor: 'red.500',
-                '&:hover': {
-                    outlineStyle: 'none',
-                    outlineWidth: '0',
-                },
-            },
-            _disabled: {
-                borderColor: 'gray.400',
-                cursor: 'notAllowed',
-                '&[data-state=checked], &[data-state=indeterminate]': {
-                    color: 'white',
-                    borderColor: 'gray.400',
-                    bg: 'gray.400',
-                    '&:hover': {
-                        bg: 'gray.400',
-                    },
-                },
-                '&:hover': {
-                    outlineStyle: 'none',
-                    outlineWidth: '0',
-                    borderColor: 'gray.400',
-                    bg: 'inherit',
-                },
-            },
-        },
-        content: {
-            overflow: 'hidden',
-            _open: {
-                animationName: 'fade-in',
-                animationDuration: 'normal',
-            },
-            _closed: {
-                animationName: 'collapse-height',
-                animationDuration: 'normal',
-            },
-        },
-        label: {
-            fontWeight: 'regular',
-            color: 'gray.900',
-            userSelect: 'none',
-            cursor: 'pointer',
-            _disabled: {
-                color: 'gray.600',
-                cursor: 'notAllowed',
-            },
-        },
-    },
-    variants: {
-        variant: {
-            alignCenter: {
-                root: {
-                    alignItems: 'center',
-                },
-            },
-            alignTop: {
-                root: {
-                    alignItems: 'flex-start',
-                },
-                control: {
-                    marginTop: 'xs',
-                },
-            },
-            alignTopForSmallSize: {
-                root: {
-                    alignItems: 'flex-start',
-                },
-                control: {
-                    marginTop: 'xxs',
-                },
-            },
-        },
-    },
-    defaultVariants: {
-        variant: 'alignCenter',
-    },
-});
-
-const slots = [
-    'container',
-    'carousel',
-    'slide',
-    'slideContainer',
-    'buttonContainer',
-    'button',
-    'icon',
-    'pagination',
-    'paginationButton',
-    'paginationIconContainer',
-    'dotsPaginationContainer',
-    'dotsPaginationIndicator',
-    'numbersPaginationButton',
-];
-const baseContainer = react.defineStyle({
-    height: 'full',
-    width: 'full',
-    '--carousel-overlay-weak': 'rgba(51,51,51,0.4)',
-    '--carousel-overlay-strong': 'rgba(51,51,51,0.8)',
-    '--carousel-pagination-height': '7.5rem',
-    '--carousel-numbers-pagination-height': '5rem',
-    '--carousel-dot-size': '6px',
-    '--carousel-dot-size-active': '8px',
-    '--carousel-dot-size-last': '4px',
-    '--carousel-dot-margin-x': '6px',
-});
-const baseCarousel = react.defineStyle({
-    overflow: 'hidden',
-    position: 'relative',
-});
-const baseSlide = react.defineStyle({
-    flexGrow: '0',
-    flexShrink: '0',
-    flexBasis: 'full',
-});
-const baseSlideContainer = react.defineStyle({
-    height: 'full',
-    alignItems: 'center',
-    display: 'flex',
-});
-const baseButtonContainer = react.defineStyle({
-    position: 'absolute',
-    top: '0',
-    width: 'lg',
-    height: 'full',
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    color: 'white',
-    visibility: 'hidden',
-    pointerEvents: 'none',
-    cursor: 'pointer',
-    _groupHover: { md: { visibility: 'visible', pointerEvents: 'auto' } },
-    _focus: {
-        outline: 'none',
-    },
-});
-const baseButton = react.defineStyle({
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    width: 'md',
-    height: 'md',
-    borderRadius: 'sm',
-    backgroundColor: 'var(--carousel-overlay-weak)',
-    color: 'white',
-    _hover: { background: 'var(--carousel-overlay-strong)' },
-});
-const baseIcon = react.defineStyle({
-    boxSize: 'sm',
-});
-const numbersPaginationButton = react.defineStyle({
-    display: 'inline-flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    verticalAlign: 'middle',
-    textAlign: 'center',
-    minWidth: 'md',
-    height: 'md',
-    borderRadius: 'sm',
-    _hover: {
-        backgroundColor: 'gray.100',
-    },
-    '&[aria-current="true"]': {
-        color: 'white',
-        backgroundColor: 'gray.900',
-        _hover: {
-            backgroundColor: 'gray.900',
-        },
-    },
-});
-const dotsPaginationIndicator = react.defineStyle({
-    backgroundColor: 'transparent',
-    touchAction: 'pan-x',
-    display: 'inline-flex',
-    textDecoration: 'none',
-    border: 'none',
-    padding: '0',
-    width: 'var(--carousel-dot-size)',
-    height: 'var(--carousel-dot-size)',
-    marginX: 'var(--carousel-dot-margin-x)',
-    _last: {
-        width: 'var(--carousel-dot-size-last)',
-        height: 'var(--carousel-dot-size-last)',
-        _after: {
-            width: 'full',
-            height: 'var(--carousel-dot-size-last)',
-            content: '""',
-        },
-    },
-    _after: {
-        backgroundColor: 'gray.300',
-        opacity: '40',
-        borderRadius: 'full',
-        width: 'full',
-        height: 'var(--carousel-dot-size)',
-        content: '""',
-    },
-    '&[aria-current="true"]': {
-        width: 'var(--carousel-dot-size-active)',
-        height: 'var(--carousel-dot-size-active)',
-        _last: {
-            width: 'var(--carousel-dot-size-active)',
-            height: 'var(--carousel-dot-size-active)',
-            _after: {
-                width: 'full',
-                height: 'var(--carousel-dot-size-active)',
-                content: '""',
-            },
-        },
-        _after: {
-            backgroundColor: 'white',
-            borderRadius: 'full',
-            opacity: '100',
-            width: 'full',
-            height: 'var(--carousel-dot-size-active)',
-            content: '""',
-        },
-    },
-});
-const fullScreenVariant = {
-    container: react.defineStyle({
-        backgroundColor: 'black',
-        position: {
-            base: 'fixed',
-            md: 'static',
-        },
-    }),
-    carousel: react.defineStyle({
-        paddingX: {
-            md: '5xl',
-        },
-    }),
-    pagination: react.defineStyle({
-        overflow: 'hidden',
-        position: 'relative',
-        paddingX: {
-            base: 'md',
-            md: '5xl',
-        },
-        height: 'var(--carousel-pagination-height)',
-    }),
-    paginationButton: react.defineStyle({
-        position: 'absolute',
-        top: '0',
-        width: 'lg',
-        height: 'full',
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-        color: 'white',
-        backgroundColor: 'transparent',
-    }),
-    paginationIconContainer: react.defineStyle({
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-        width: 'md',
-        height: 'md',
-        borderRadius: 'sm',
-        backgroundColor: 'var(--carousel-overlay-strong)',
-    }),
-    buttonContainer: react.defineStyle({
-        backgroundColor: 'black',
-        width: 'xl',
-        visibility: { base: 'hidden', md: 'visible' },
-        pointerEvents: { base: 'none', md: 'auto' },
-    }),
-    slide: react.defineStyle({
-        height: 'full',
-    }),
-    button: react.defineStyle({
-        opacity: '100',
-        backgroundColor: 'black',
-    }),
-    icon: react.defineStyle({
-        boxSize: 'md',
-    }),
-};
-const carouselRecipe = react.defineSlotRecipe({
-    slots,
-    className: 'chakra-carousel',
-    base: {
-        container: baseContainer,
-        carousel: baseCarousel,
-        slide: baseSlide,
-        slideContainer: baseSlideContainer,
-        buttonContainer: baseButtonContainer,
-        button: baseButton,
-        icon: baseIcon,
-        numbersPaginationButton,
-        dotsPaginationContainer: react.defineStyle({
-            position: 'absolute',
-            width: 'full',
-            bottom: 'lg',
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center',
-        }),
-        dotsPaginationIndicator,
-    },
-    variants: {
-        variant: {
-            fullScreen: fullScreenVariant,
-        },
-    },
-});
-
-const cardRecipe = react.defineSlotRecipe({
-    className: 'chakra-card',
-    slots: ['root', 'header', 'body', 'footer'],
-    base: {
-        root: {
-            backgroundColor: 'white',
-            borderRadius: 'sm',
-            boxShadow: 'xs',
-            overflowWrap: 'break-word',
-            overflow: 'hidden',
-        },
-        header: {
-            paddingX: '2xl',
-            marginY: '2xl',
-        },
-        body: {
-            paddingX: '2xl',
-            marginY: '2xl',
-        },
-        footer: {
-            borderTop: '1px',
-            borderColor: 'gray.100',
-            paddingX: 'lg',
-            paddingY: 'md',
-        },
-    },
-});
-
-const breadcrumbsRecipe = react.defineSlotRecipe({
-    className: 'chakra-breadcrumbs',
-    slots: ['container', 'list', 'link', 'separator'],
-    base: {
-        container: {
-            color: 'gray.900',
-        },
-        list: {
-            display: 'inline-flex',
-            alignItems: 'center',
-        },
-        link: {
-            color: 'blue.700',
-        },
-        separator: {
-            mx: 'sm',
-            color: 'gray.600',
-        },
-    },
-});
-
-const articleTeaserRecipe = react.defineSlotRecipe({
-    slots: ['title', 'text'],
-    base: {
-        title: {
-            textStyle: 'heading3',
-            color: 'blue.700',
-        },
-        text: {
-            textStyle: 'body',
-            color: 'gray.900',
-        },
-    },
-});
-
-const alertRecipe = react.defineSlotRecipe({
-    className: 'chakra-alert',
-    slots: ['root', 'indicator', 'content', 'title', 'description', 'toastClose'],
-    base: {
-        root: {
-            '--alert-fg': 'var(--chakra-colors-blue-700)',
-            '--alert-bg': 'var(--chakra-colors-blue-100)',
-            '--alert-border-start-width': '4px',
-            display: 'flex',
-            flexDirection: 'row',
-            alignItems: 'flex-start',
-            gap: 'lg',
-            padding: 'lg',
-            bg: 'var(--alert-bg)',
-            borderStartWidth: 'var(--alert-border-start-width)',
-            borderStartColor: 'var(--alert-fg)',
-        },
-        indicator: {
-            color: 'var(--alert-fg)',
-            display: 'flex',
-            flexShrink: 0,
-            alignItems: 'center',
-            justifyContent: 'center',
-            w: 'sm',
-            h: 'sm',
-        },
-        content: {
-            flex: '1 1 0%',
-            minWidth: '0',
-            display: 'flex',
-            flexDirection: 'column',
-            gap: 'xs',
-            alignSelf: 'stretch',
-        },
-        title: {
-            textStyle: 'heading4',
-        },
-        description: {
-            textStyle: 'body',
-        },
-    },
-    variants: {
-        status: {
-            info: {
-                root: {
-                    '--alert-fg': 'var(--chakra-colors-blue-700)',
-                    '--alert-bg': 'var(--chakra-colors-blue-100)',
-                },
-            },
-            success: {
-                root: {
-                    '--alert-fg': 'var(--chakra-colors-green-500)',
-                    '--alert-bg': 'var(--chakra-colors-green-100)',
-                },
-            },
-            warning: {
-                root: {
-                    '--alert-fg': 'var(--chakra-colors-orange-500)',
-                    '--alert-bg': 'var(--chakra-colors-orange-100)',
-                },
-            },
-            error: {
-                root: {
-                    '--alert-fg': 'var(--chakra-colors-red-500)',
-                    '--alert-bg': 'var(--chakra-colors-red-100)',
-                },
-            },
-        },
-    },
-    defaultVariants: {
-        status: 'info',
-    },
-});
-
-const accordionRecipe = react.defineSlotRecipe({
-    slots: ['item', 'button', 'indicator', 'content', 'body'],
-    className: 'chakra-accordion',
-    base: {
-        item: {
-            borderTop: '1px',
-            _last: {
-                borderBottom: '1px',
-            },
-        },
-        button: {
-            display: 'flex',
-            alignItems: 'center',
-            width: 'full',
-            textStyle: 'heading4',
-            paddingX: 'lg',
-            paddingY: 'md',
-            _hover: {
-                cursor: 'pointer',
-            },
-        },
-        indicator: {
-            width: 'sm',
-            height: 'sm',
-            _open: {
-                rotate: '180deg',
-            },
-        },
-        content: {
-            width: 'full',
-            overflow: 'hidden',
-            _open: {
-                animationName: 'expand-height',
-                animationDuration: 'normal',
-            },
-            _closed: {
-                animationName: 'collapse-height',
-                animationDuration: 'normal',
-            },
-        },
-        body: {
-            pb: 'md',
-            paddingX: 'lg',
-            fontSize: 'base',
-            fontWeight: 'regular',
-        },
-    },
-    variants: {
-        variant: {
-            light: {
-                item: {
-                    color: 'gray.900',
-                    borderColor: 'gray.200',
-                    _last: {
-                        borderBottom: '1px',
-                        borderColor: 'gray.200',
-                    },
-                },
-                button: {
-                    _hover: {
-                        bg: 'gray.50',
-                    },
-                },
-                body: {
-                    textStyle: 'body',
-                },
-            },
-            dark: {
-                item: {
-                    borderColor: 'gray.700',
-                    bg: 'gray.900',
-                    color: 'white',
-                    _last: {
-                        borderColor: 'gray.700',
-                    },
-                },
-                button: {
-                    textStyle: 'heading5',
-                    _hover: {
-                        bg: 'gray.700',
-                    },
-                },
-                body: {
-                    textStyle: 'body-small',
-                },
-            },
-            minimal: {
-                item: {
-                    borderTop: 'none',
-                    _last: {
-                        borderBottom: 'none',
-                    },
-                },
-                button: {
-                    width: 'auto',
-                    textStyle: 'body',
-                    paddingX: '0',
-                    maxWidth: 'auto',
-                    _hover: {
-                        bg: 'transparent',
-                    },
-                },
-                indicator: {
-                    marginLeft: 'sm',
-                },
-                body: {
-                    pb: 'md',
-                    paddingX: '3xl',
-                    textStyle: 'body',
-                },
-            },
-        },
-    },
-    defaultVariants: {
-        variant: 'light',
-    },
-});
-
-const slotRecipes = {
-    articleTeaser: articleTeaserRecipe,
-    accordion: accordionRecipe,
-    carousel: carouselRecipe,
-    breadcrumbs: breadcrumbsRecipe,
-    card: cardRecipe,
-    energyLabel: energyLabelRecipe,
-    galleryHeader: galleryHeaderRecipe,
-    list: listRecipe,
-    markedText: markedTextRecipe,
-    dialog: dialogRecipe,
-    progress: progressSlotRecipe,
-    simpleHeader: simpleHeaderRecipe,
-    table: tableRecipe,
-    tabs: tabsRecipe,
-    vehicleReference: vehicleReferenceRecipe,
-    tooltip: tooltipSlotRecipe,
-    field: fieldSlotRecipe,
-    section: sectionRecipe,
-    checkbox: checkboxRecipe,
-    switch: switchRecipe,
-    input: inputSlotRecipe,
-    select: selectSlotRecipe,
-    dialogFilter: dialogFilterRecipe,
-    drawer: drawerRecipe,
-    alert: alertRecipe,
-    popoverFilter: popoverFilterRecipe,
-    numberInput: numberInputRecipe,
-    radio: radioRecipe,
-    slider: sliderSlotRecipe,
-    pagination: paginationRecipe,
-    menu: menuRecipe,
-    hoverCard: hoverCardRecipe,
-    popover: popoverRecipe,
-};
-
-const textareaRecipe = react.defineRecipe({
-    base: {
-        width: 'full',
-        paddingX: 'lg',
-        paddingTop: 'md',
-        outline: 0,
-        position: 'relative',
-        appearance: 'none',
-        transitionProperty: 'common',
-        transitionDuration: 'normal',
-        border: '1px',
-        borderColor: 'gray.400',
-        borderRadius: 'sm',
-        color: 'gray.900',
-        background: 'inherit',
-        _placeholder: {
-            color: 'gray.400',
-        },
-        _hover: {
-            borderColor: 'gray.900',
-        },
-        _focus: {
-            backgroundColor: 'blue.50',
-        },
-        _active: {},
-        _invalid: {
-            borderColor: 'red.500',
-        },
-        _disabled: {
-            cursor: 'notAllowed',
-            color: 'gray.300',
-            borderColor: 'gray.200',
-        },
-    },
-});
-
-const spinnerRecipe = react.defineRecipe({
-    className: 'chakra-spinner',
-    base: {
-        display: 'inline-block',
-        borderColor: 'gray.900',
-        border: '2px',
-        borderRadius: 'full',
-        width: 'var(--spinner-size)',
-        height: 'var(--spinner-size)',
-        animation: 'spin',
-        '--spinner-track-color': 'transparent',
-        borderBottomColor: 'var(--spinner-track-color)',
-        borderInlineStartColor: 'var(--spinner-track-color)',
-    },
-    variants: {
-        size: {
-            inherit: { '--spinner-size': 'sizes.sm' },
-            xs: { '--spinner-size': 'sizes.xs' },
-            sm: { '--spinner-size': 'sizes.sm' },
-            md: { '--spinner-size': 'sizes.md' },
-            lg: { '--spinner-size': 'sizes.lg' },
-        },
-    },
-    defaultVariants: {
-        size: 'sm',
-    },
-});
-
-const skeletonRecipe = react.defineRecipe({
-    className: 'chakra-skeleton',
-    base: {
-        borderRadius: 'xs',
-        '--start-color': '{colors.gray.100}',
-        '--end-color': '{colors.gray.400}',
-    },
-    variants: {
-        loading: {
-            true: {
-                opacity: '70',
-                animation: 'skeletonPulse',
-                cursor: 'default',
-                '&::before, &::after, *': {
-                    visibility: 'hidden',
-                },
-            },
-            false: {
-                backgroundColor: 'none',
-                animation: 'fade-in',
-            },
-        },
-    },
-    defaultVariants: {
-        loading: true,
-    },
-});
-
-const separatorRecipe = react.defineRecipe({
-    base: {
-        display: 'block',
-        borderColor: 'gray.100',
-        flexShrink: 0,
-        '--separator-thickness': '1px',
-    },
-    variants: {
-        orientation: {
-            horizontal: {
-                width: '100%',
-                borderWidth: '0 0 var(--separator-thickness) 0',
-            },
-            vertical: {
-                height: '100%',
-                borderWidth: '0 0 0 var(--separator-thickness)',
-            },
-        },
-    },
-    defaultVariants: {
-        orientation: 'horizontal',
-    },
-});
-
-const ratingRecipe = react.defineRecipe({
-    className: 'rating',
-    base: {
-        display: 'inline-block',
-        fontFamily: 'makeItSans',
-        lineHeight: 'xs',
-    },
-    variants: {
-        size: {
-            sm: { fontSize: 'sm' },
-            lg: { fontSize: 'md' },
-        },
-    },
-    defaultVariants: {
-        size: 'lg',
-    },
-});
-
-const radioListItemRecipe = react.defineRecipe({
-    className: 'chakra-radio-list-item',
-    base: {
-        cursor: 'pointer',
-        bg: 'white',
-        borderRadius: 'xs',
-        px: 'lg',
-        py: 'sm',
-        _hover: {
-            bg: 'gray.50',
-        },
-        _checked: {
-            bg: 'blue.100',
-            _hover: {
-                bg: 'blue.100',
-            },
-        },
-    },
-});
-
-const linkRecipe = react.defineRecipe({
-    base: {
-        textStyle: 'body',
-        color: 'blue.700',
-        display: 'inline-flex',
-        gap: 'md',
-        flexDirection: 'row',
-        fontWeight: 'regular',
-        alignItems: 'center',
-        _active: {
-            textDecoration: 'none',
-            color: 'gray.900',
-        },
-    },
-    variants: {
-        variant: {
-            baseLink: {
-                _hover: {
-                    cursor: 'pointer',
-                    textDecoration: 'underline',
-                },
-            },
-            navigationLink: {
-                color: 'gray.900',
-                cursor: 'pointer',
-                fontSize: 'base',
-                _hover: {
-                    textDecoration: 'none',
-                    color: 'blue.700',
-                },
-            },
-            subNavigationLink: {
-                color: 'gray.900',
-                cursor: 'pointer',
-                fontSize: 'base',
-                _hover: {
-                    textDecoration: 'underline',
-                },
-                _focusVisible: {
-                    outline: 'none',
-                },
-            },
-            footerLink: {
-                color: 'white',
-                _hover: {
-                    textDecoration: 'underline',
-                },
-                _active: {
-                    color: 'gray.50',
-                },
-                _visited: {
-                    color: 'white',
-                },
-            },
-        },
-        disabled: {
-            true: {
-                textDecoration: 'none',
-                pointerEvents: 'none',
-                color: 'gray.500',
-                _hover: {
-                    textDecoration: 'none',
-                },
-            },
-        },
-    },
-    defaultVariants: {
-        variant: 'baseLink',
-    },
-});
-
-const countRecipe = react.defineRecipe({
-    className: 'chakra-count',
-    base: {
-        '--dimension': '2.6ch',
-        '--line-height': '1.6ch',
-        display: 'inline-block',
-        textAlign: 'center',
-        textStyle: 'heading5',
-        padding: 'xs',
-        verticalAlign: 'middle',
-        borderRadius: 'full',
-        minW: 'var(--dimension)',
-        minH: 'var(--dimension)',
-        lineHeight: 'var(--line-height)',
-    },
-    variants: {
-        variant: {
-            primary: {
-                bg: 'brand.primary',
-                color: 'black',
-            },
-            inverted: {
-                bg: 'white',
-                color: 'black',
-            },
-            info: {
-                bg: 'blue.100',
-                color: 'blue.500',
-            },
-            success: {
-                bg: 'green.100',
-                color: 'green.500',
-            },
-            warning: {
-                bg: 'orange.100',
-                color: 'orange.400',
-            },
-            error: {
-                bg: 'red.100',
-                color: 'red.400',
-            },
-        },
-    },
-    defaultVariants: {
-        variant: 'primary',
-    },
-});
-
-const closeButtonRecipe = react.defineRecipe({
-    base: {
-        width: 'xs',
-        height: 'xs',
-        color: 'gray.800',
-        borderRadius: 'sm',
-        cursor: 'pointer',
-        _disabled: {
-            opacity: '40',
-            cursor: 'notAllowed',
-            boxShadow: 'none',
-        },
-        _hover: {
-            bg: 'blackAlpha.100',
-        },
-        _active: {
-            bg: 'blackAlpha.200',
-        },
-    },
-});
-
-const chipRecipe = react.defineRecipe({
-    className: 'chakra-chip',
-    base: {
-        display: 'flex',
-        alignItems: 'center',
-        borderRadius: 'full',
-        outline: 'none',
-        cursor: 'pointer',
-        py: 'sm',
-        minH: 'sm',
-        w: 'fit',
-        flexShrink: 0,
-        border: '1px',
-        borderStyle: 'var(--chip-border-style, solid)',
-        _focusVisible: {
-            outline: '2px solid',
-            outlineColor: 'blue.300',
-            outlineOffset: 0,
-        },
-        bg: 'white',
-        px: '2xl',
-        borderColor: 'gray.200',
-    },
-    variants: {
-        variant: {
-            solid: {
-                '--chip-border-style': 'solid',
-            },
-            dashed: {
-                '--chip-border-style': 'dashed',
-            },
-        },
-        selected: {
-            false: {
-                _hover: {
-                    bg: 'white',
-                    borderColor: 'black',
-                    _active: { bg: 'gray.100', borderColor: 'gray.200' },
-                },
-            },
-            true: {
-                bg: 'blue.100',
-                px: 'md',
-                borderColor: 'transparent',
-                _hover: { bg: 'blue.50', _active: { bg: 'blue.200' } },
-            },
-        },
-    },
-    defaultVariants: {
-        variant: 'solid',
-        selected: false,
-    },
-});
-
-const badgeRecipe = react.defineRecipe({
-    base: {
-        textTransform: 'uppercase',
-        fontSize: 'xs',
-        fontWeight: 'bold',
-        background: 'brand.primary',
-        color: 'brand.fg',
-    },
-    variants: {
-        variant: {
-            base: {
-                paddingX: 'xs',
-                paddingY: 'xxs',
-            },
-            navigationLinkBadge: {
-                paddingX: 'xxs',
-                paddingY: 'xxs',
-                position: 'relative',
-                top: '-xs',
-                lineHeight: 'full',
-            },
-        },
-    },
-    defaultVariants: {
-        variant: 'base',
-    },
-});
-
-const avatarRecipe = react.defineRecipe({
-    className: 'chakra-avatar',
-    base: {
-        cursor: 'pointer',
-    },
-});
-
-const recipes = {
-    avatar: avatarRecipe,
-    badge: badgeRecipe,
-    chip: chipRecipe,
-    link: linkRecipe,
-    rating: ratingRecipe,
-    separator: separatorRecipe,
-    skeleton: skeletonRecipe,
-    spinner: spinnerRecipe,
-    textarea: textareaRecipe,
-    count: countRecipe,
-    closeButton: closeButtonRecipe,
-    radioListItem: radioListItemRecipe,
-};
-
-const keyframes = react.defineKeyframes({
-    'expand-height': {
-        from: { height: '0' },
-        to: { height: 'var(--height)' },
-    },
-    'collapse-height': {
-        from: { height: 'var(--height)' },
-        to: { height: '0' },
-    },
-    'slide-in-top': {
-        from: { transform: 'translateY(-100%)' },
-        to: { transform: 'translateY(0)' },
-    },
-    'slide-out-top': {
-        from: { transform: 'translateY(0)' },
-        to: { transform: 'translateY(-100%)' },
-    },
-    'fade-in': {
-        from: { opacity: 0 },
-        to: { opacity: 1 },
-    },
-    'fade-out': {
-        from: {
-            opacity: 1,
-        },
-        to: {
-            opacity: 0,
-        },
-    },
-    skeletonPulse: {
-        '0%': { backgroundColor: 'var(--start-color)' },
-        '50%': { backgroundColor: 'var(--end-color)' },
-        '100%': { backgroundColor: 'var(--start-color)' },
-    },
-    spin: {
-        '0%': { transform: 'rotate(0deg)' },
-        '100%': { transform: 'rotate(360deg)' },
-    },
-    'scale-in': {
-        from: {
-            scale: '0.95',
-        },
-        to: {
-            scale: '1',
-        },
-    },
-    'scale-out': {
-        from: {
-            scale: '1',
-        },
-        to: {
-            scale: '0.95',
-        },
-    },
-    'slide-in-from-top': {
-        from: { transform: 'translateY(-100%)' },
-        to: { transform: 'translateY(0)' },
-    },
-    'slide-in-from-right': {
-        from: { transform: 'translateX(100%)' },
-        to: { transform: 'translateX(0)' },
-    },
-    'slide-in-from-bottom': {
-        from: { transform: 'translateY(100%)' },
-        to: { transform: 'translateY(0)' },
-    },
-    'slide-in-from-left': {
-        from: { transform: 'translateX(-100%)' },
-        to: { transform: 'translateX(0)' },
-    },
-    'slide-out-to-top': {
-        from: { transform: 'translateY(0)' },
-        to: { transform: 'translateY(-100%)' },
-    },
-    'slide-out-to-right': {
-        from: { transform: 'translateX(0)' },
-        to: { transform: 'translateX(100%)' },
-    },
-    'slide-out-to-bottom': {
-        from: { transform: 'translateY(0)' },
-        to: { transform: 'translateY(100%)' },
-    },
-    'slide-out-to-left': {
-        from: { transform: 'translateX(0)' },
-        to: { transform: 'translateX(-100%)' },
-    },
-});
-
-const globalCss = react.defineGlobalStyles({
-    '*, *::before, *::after': {
-        boxSizing: 'border-box',
-    },
-    '*': {
-        margin: 0,
-        WebkitFontSmoothing: 'antialiased',
-    },
-    body: {
-        lineHeight: 'md',
-        textStyle: 'body',
-    },
-    'input, button, textarea, select': {
-        font: 'inherit',
-    },
-});
-
-const convertRemEmToPx = (value) => {
-    const baseFontSize = 16;
-    const unitRemEm = parseFloat(value);
-    return unitRemEm * baseFontSize;
-};
-
-const emBreakpoints = {
-    base: '0em',
-    '2xs': '20em',
-    xs: '22.5em',
-    sm: '48em',
-    md: '64em',
-    lg: '80em',
-    xl: '120em',
-};
-const pxBreakpoints = Object.fromEntries(Object.entries(emBreakpoints).map(([name, emValue]) => [
-    name,
-    `${convertRemEmToPx(emValue)}px`,
-]));
-Object.fromEntries(Object.keys(emBreakpoints).map((name) => [
-    name,
-    {
-        em: parseFloat(emBreakpoints[name]),
-        px: parseFloat(pxBreakpoints[name]),
-    },
-]));
-
-const animationStyles = react.defineAnimationStyles({
-    'scale-fade-in': {
-        value: {
-            transformOrigin: 'var(--transform-origin)',
-            animationName: ['scale-in', 'fade-in'],
-        },
-    },
-    'scale-fade-out': {
-        value: {
-            transformOrigin: 'var(--transform-origin)',
-            animationName: ['scale-out', 'fade-out'],
-        },
-    },
-    'slide-fade-in-top': {
-        value: {
-            animationName: ['fade-in'],
-        },
-    },
-    'slide-fade-out-top': {
-        value: {
-            animationName: ['fade-out'],
-        },
-    },
-});
-
-const getSharedConfig = () => ({
-    strictTokens: false,
-    globalCss,
-    theme: {
-        breakpoints: emBreakpoints,
-        textStyles,
-        keyframes,
-        animationStyles,
-        recipes,
-        slotRecipes,
-        tokens: {
-            zIndex,
-            spacing,
-            sizes,
-            shadows,
-            radii,
-            opacity,
-            lineHeights,
-            fontWeights,
-            fontSizes,
-            fonts,
-            cursor,
-            colors,
-            borders,
-            aspectRatios,
-            animations,
-            durations,
-        },
-    },
-});
-
-const motoScout24Config = react.mergeConfigs(getSharedConfig(), {
-    cssVarsPrefix: 'chakra',
-    theme: {
-        semanticTokens: {
-            colors: {
-                brand: {
-                    fg: { value: '{colors.white}' },
-                    primary: { value: '{colors.brand.400}' },
-                    btnShadow: { value: '{colors.brand.600}' },
-                },
-            },
-        },
-        tokens: {
-            colors: {
-                brand: {
-                    50: { value: '#FFF8F9' },
-                    100: { value: '#FFE4E5' },
-                    200: { value: '#FFC0C2' },
-                    300: { value: '#FD7978' },
-                    400: { value: '#FF4C52' },
-                    500: { value: '#EF474D' },
-                    600: { value: '#D64045' },
-                    700: { value: '#A83236' },
-                    800: { value: '#7D2528' },
-                    900: { value: '#5F1C1E' },
-                },
-            },
-        },
-    },
-});
-var motoScout24System = react.createSystem(react.defaultBaseConfig, motoScout24Config, {
-    preflight: true,
-});
-
-const autoScout24Config = react.mergeConfigs(getSharedConfig(), {
-    cssVarsPrefix: 'chakra',
-    theme: {
-        semanticTokens: {
-            colors: {
-                brand: {
-                    fg: { value: '{colors.black}' },
-                    primary: { value: '{colors.brand.100}' },
-                    btnShadow: { value: '{colors.brand.300}' },
-                },
-            },
-        },
-        tokens: {
-            colors: {
-                brand: {
-                    50: { value: '#FEFCD0' },
-                    100: { value: '#F5F200' },
-                    200: { value: '#DCD500' },
-                    300: { value: '#C1B900' },
-                    400: { value: '#9E9600' },
-                    500: { value: '#908800' },
-                    600: { value: '#827900' },
-                    700: { value: '#665E00' },
-                    800: { value: '#4C4500' },
-                    900: { value: '#3A3400' },
-                },
-            },
-        },
-    },
-});
-var autoScout24System = react.createSystem(react.defaultBaseConfig, autoScout24Config, {
-    preflight: true,
-});
-
-Object.keys(colors).reduce((acc, colorKey) => {
-    const key = colorKey;
-    const colorValue = colors[key];
-    if ('value' in colorValue && typeof colorValue.value === 'string') {
-        acc[key] = colorValue.value;
-    }
-    else {
-        Object.keys(colorValue).forEach((shadeKey) => {
-            const shadeValue = colorValue[shadeKey];
-            if ('value' in shadeValue && typeof shadeValue.value === 'string') {
-                const colorKeyObj = typeof acc[key] === 'object' && acc[key] !== null
-                    ? acc[key]
-                    : {};
-                acc[key] = {
-                    ...colorKeyObj,
-                    [shadeKey]: shadeValue.value,
-                };
-            }
-        });
-    }
-    return acc;
-}, {});
-
-const themes = {
-    [Brand.AutoScout24]: autoScout24System,
-    [Brand.MotoScout24]: motoScout24System,
-};
-const ThemeProvider = ({ children, theme, }) => {
-    return jsxRuntime.jsx(react.ChakraProvider, { value: themes[theme], children: children });
-};
-
-exports.ThemeProvider = ThemeProvider;
-//# sourceMappingURL=themeProvider.js.map