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

package/dist/cjs/themeProvider.cjs

@@ -0,0 +1,3820 @@
+'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.cjs.map