@adgytec/adgytec-web-ui-components 2.1.7 → 2.1.8

package/dist/chunks/Radio.map

@@ -1 +1 @@
-{"version":3,"file":"Radio","names":[],"sources":["../../src/components/Input/Radio/context.ts","../../src/components/Input/Radio/radio.module.css","../../src/components/Input/Radio/Radio.tsx","../../src/components/Input/Radio/RadioGroup.tsx"],"sourcesContent":["import { createContext } from \"react\";\nimport type { RadioLabelPlacement } from \"./types\";\n\nexport type RadioGroupContextValue = {\n    labelPlacement?: RadioLabelPlacement;\n    containerStateLayer?: boolean;\n};\n\nexport const RadioGroupContext = createContext<RadioGroupContextValue>({});\n","/* configurable tokens\n*\n* --md-radio-icon-color\n* --md-radio-selected-icon-color\n*\n* --md-radio-interaction-icon-color\n* --md-radio-selected-interaction-icon-color\n*\n* --md-radio-state-layer-color\n* --md-radio-selected-state-layer-color\n*\n* configurable tokens end */\n\n@layer adgytec.comps {\n    .radio-group {\n        /* configurable tokens */\n        --_md-radio-icon-color: var(\n            --md-radio-icon-color,\n            var(--md-sys-color-on-surface-variant)\n        );\n        --_md-radio-selected-icon-color: var(\n            --md-radio-selected-icon-color,\n            var(--md-sys-color-primary)\n        );\n\n        --_md-radio-interaction-icon-color: var(\n            --md-radio-interaction-icon-color,\n            var(--md-sys-color-on-surface)\n        );\n        --_md-radio-selected-interaction-icon-color: var(\n            --md-radio-selected-interaction-icon-color,\n            var(--_md-radio-selected-icon-color)\n        );\n\n        --_md-radio-state-layer-color: var(\n            --md-radio-state-layer-color,\n            var(--md-sys-color-on-surface)\n        );\n        --_md-radio-selected-state-layer-color: var(\n            --md-radio-selected-state-layer-color,\n            var(--_md-radio-selected-icon-color)\n        );\n\n        /* configurable tokens end */\n\n        display: grid;\n        gap: var(--md-sys-layout-space-16);\n\n        &[data-disabled] {\n            color: rgb(\n                from currentcolor r g b /\n                var(--md-sys-state-disabled-content)\n            );\n            cursor: default;\n        }\n    }\n\n    .radio-items {\n        display: grid;\n\n        &[data-orientation=\"horizontal\"] {\n            display: flex;\n        }\n    }\n\n    .radio {\n        /* invalid tokens */\n        --_md-radio-invalid-icon-color: var(--md-sys-color-error);\n        --_md-radio-invalid-state-layer-color: var(\n            --_md-radio-invalid-icon-color\n        );\n\n        /* indicator tokens */\n        --_md-radio-size: calc(20 * var(--dp, 1px));\n        --_md-radio-icon-size: calc(\n            var(--_md-radio-size) -\n            calc(10 * var(--dp, 1px))\n        );\n        --_md-radio-state-layer-size: calc(40 * var(--dp, 1px));\n\n        /* state layer tokens */\n        --_md-radio-pressed-state-layer-color: var(\n            --_md-radio-selected-state-layer-color\n        );\n        --_md-radio-pressed-selected-state-layer-color: var(\n            --_md-radio-state-layer-color\n        );\n\n        --_state-layer-opacity: 0;\n        --_state-color: var(--_md-radio-state-layer-color);\n\n        --_state-layer-color: rgb(\n            from var(--_state-color) r g b /\n            var(--_state-layer-opacity)\n        );\n\n        /* styles */\n        position: relative;\n\n        display: flex;\n        align-items: center;\n        gap: var(--md-sys-layout-space-16);\n\n        color: inherit;\n        cursor: pointer;\n\n        & * {\n            cursor: inherit;\n        }\n\n        &[data-disabled] {\n            cursor: default;\n        }\n\n        &[data-selected] {\n            --_state-color: var(--_md-radio-selected-state-layer-color);\n        }\n\n        &[data-pressed] {\n            --_state-layer-opacity: var(--md-sys-state-pressed);\n            --_state-color: var(--_md-radio-pressed-state-layer-color);\n\n            &[data-selected] {\n                --_state-color: var(\n                    --_md-radio-pressed-selected-state-layer-color\n                );\n            }\n        }\n\n        &[data-invalid] {\n            --_state-color: var(--_md-radio-invalid-state-layer-color);\n\n            &[data-selected] {\n                --_state-color: var(--_md-radio-invalid-state-layer-color);\n            }\n        }\n\n        &[data-hovered] {\n            --_state-layer-opacity: var(--md-sys-state-hover);\n            z-index: 1;\n        }\n\n        &[data-focus-visible] {\n            --_state-layer-opacity: var(--md-sys-state-focus);\n            z-index: 1;\n        }\n    }\n\n    .state-layer::before {\n        content: \"\";\n\n        position: absolute;\n        inset: calc(-1 * var(--md-sys-layout-space-12));\n\n        background-color: var(--_state-layer-color);\n        border-radius: var(--md-sys-shape-corner-radius-extra-small);\n\n        pointer-events: none;\n\n        transition: background-color\n            var(--md-sys-motion-expressive-fast-effects)\n            var(--md-sys-motion-expressive-fast-effects-duration);\n\n        @media (prefers-reduced-motion) {\n            transition: none;\n        }\n    }\n\n    .indicator {\n        --_indicator-color: var(--_md-radio-icon-color);\n\n        position: relative;\n\n        inline-size: var(--_md-radio-size);\n        aspect-ratio: 1 / 1;\n        border-radius: var(--md-sys-shape-corner-radius-full);\n\n        border: var(--md-sys-shape-border-width-thick) solid\n            var(--_indicator-color);\n\n        transition: border-color var(--md-sys-motion-expressive-default-effects)\n            var(--md-sys-motion-expressive-default-effects-duration);\n\n        @media (prefers-reduced-motion) {\n            transition: none;\n        }\n\n        &[data-selected] {\n            --_indicator-color: var(--_md-radio-selected-icon-color);\n        }\n\n        &[data-invalid] {\n            --_indicator-color: var(--_md-radio-invalid-icon-color);\n        }\n\n        &[data-pressed],\n        &[data-hovered],\n        &[data-focus-visible] {\n            --_indicator-color: var(--_md-radio-interaction-icon-color);\n\n            &[data-selected] {\n                --_indicator-color: var(\n                    --_md-radio-selected-interaction-icon-color\n                );\n            }\n\n            &[data-invalid] {\n                --_indicator-color: var(--_md-radio-invalid-icon-color);\n            }\n        }\n\n        &[data-disabled] {\n            --_indicator-color: rgb(\n                from var(--md-sys-color-on-surface) r g b /\n                var(--md-sys-state-disabled-content)\n            );\n\n            &[data-selected] {\n                --_indicator-color: rgb(\n                    from var(--md-sys-color-on-surface) r g b /\n                    var(--md-sys-state-disabled-content)\n                );\n            }\n        }\n    }\n\n    /* state layer */\n    .indicator[data-show-state-layer]::before {\n        content: \"\";\n\n        position: absolute;\n        inset-block-start: 50%;\n        inset-inline-start: 50%;\n        transform: translate(-50%, -50%);\n\n        inline-size: var(--_md-radio-state-layer-size);\n        aspect-ratio: 1 / 1;\n        border-radius: var(--md-sys-shape-corner-radius-full);\n\n        background-color: var(--_state-layer-color);\n\n        transition: background-color\n            var(--md-sys-motion-expressive-default-effects)\n            var(--md-sys-motion-expressive-default-effects-duration);\n\n        @media (prefers-reduced-motion) {\n            transition: none;\n        }\n    }\n\n    /* indicator center icon */\n    .indicator-icon {\n        content: \"\";\n\n        position: absolute;\n        inline-size: var(--_md-radio-icon-size);\n        aspect-ratio: 1 / 1;\n\n        inset-inline-start: 50%;\n        inset-block-start: 50%;\n        translate: -50% -50%;\n\n        background-color: var(--_indicator-color);\n        border-radius: var(--md-sys-shape-corner-radius-full);\n\n        scale: 0;\n\n        transition:\n            background-color var(--md-sys-motion-expressive-default-effects)\n            var(--md-sys-motion-expressive-default-effects-duration),\n            scale var(--md-sys-motion-standard-default-spatial)\n            var(--md-sys-motion-standard-default-spatial-duration);\n\n        @media (prefers-reduced-motion) {\n            transition: none;\n        }\n\n        &[data-selected] {\n            scale: 1;\n        }\n    }\n\n    .indicator[data-focus-visible] {\n        --focus-indicator-color: var(--md-sys-color-secondary);\n        --focus-indicator-thickness: calc(3 * var(--dp, 1px));\n        --focus-indicator-offset: calc(2 * var(--dp, 1px));\n\n        outline-width: var(--focus-indicator-thickness);\n        outline-style: solid;\n        outline-offset: var(--focus-indicator-offset);\n        outline-color: var(--focus-indicator-color);\n    }\n}\n","import { clsx } from \"clsx\";\nimport { useContext } from \"react\";\nimport { Radio as AriaRadio } from \"react-aria-components\";\nimport { typography } from \"@/utils\";\nimport { TapTarget } from \"@/utils/tapTarget\";\nimport { RadioGroupContext } from \"./context\";\nimport styles from \"./radio.module.css\";\nimport type { RadioProps } from \"./types\";\n\nexport const Radio: React.FC<RadioProps> = ({\n    className,\n    children,\n    labelPlacement,\n    containerStateLayer,\n    ...props\n}) => {\n    const {\n        labelPlacement: groupLabelPlacement,\n        containerStateLayer: groupContainerStateLayer,\n    } = useContext(RadioGroupContext);\n    const placement = labelPlacement ?? groupLabelPlacement ?? \"end\";\n    const stateLayer = containerStateLayer ?? groupContainerStateLayer ?? false;\n\n    return (\n        <AriaRadio\n            className={(renderProps) =>\n                clsx(\n                    styles[\"radio\"],\n                    stateLayer && styles[\"state-layer\"],\n                    typography.labelLarge,\n                    typeof className === \"function\"\n                        ? className(renderProps)\n                        : className\n                )\n            }\n            {...props}\n            data-radio\n        >\n            {(renderProps) => {\n                const {\n                    isSelected,\n                    isHovered,\n                    isDisabled,\n                    isFocused,\n                    isFocusVisible,\n                    isPressed,\n                    isInvalid,\n                } = renderProps;\n\n                const dataAttrs = {\n                    \"data-selected\": isSelected || undefined,\n                    \"data-hovered\": isHovered || undefined,\n                    \"data-disabled\": isDisabled || undefined,\n                    \"data-focused\": isFocused || undefined,\n                    \"data-focus-visible\": isFocusVisible || undefined,\n                    \"data-pressed\": isPressed || undefined,\n                    \"data-show-state-layer\": !stateLayer || undefined,\n                    \"data-invalid\": isInvalid || undefined,\n                };\n\n                const label =\n                    typeof children === \"function\"\n                        ? children(renderProps)\n                        : children;\n                return (\n                    <>\n                        {placement === \"start\" && label}\n\n                        <span\n                            className={clsx(styles[\"indicator\"], TapTarget)}\n                            {...dataAttrs}\n                        >\n                            <span\n                                className={clsx(styles[\"indicator-icon\"])}\n                                {...dataAttrs}\n                            ></span>\n                        </span>\n\n                        {placement === \"end\" && label}\n                    </>\n                );\n            }}\n        </AriaRadio>\n    );\n};\n","import { clsx } from \"clsx\";\nimport { RadioGroup as AriaRadioGroup } from \"react-aria-components\";\nimport { Description } from \"../Description\";\nimport { FieldError } from \"../FieldError\";\nimport { Label } from \"../Label\";\nimport { RadioGroupContext } from \"./context\";\nimport styles from \"./radio.module.css\";\nimport type { RadioGroupProps } from \"./types\";\n\nexport const RadioGroup: React.FC<RadioGroupProps> = ({\n    label,\n    description,\n    errorMessage,\n    showDescriptionOnInvalid = false,\n    children,\n    className,\n    radioItemsGap = 24,\n    labelPlacement,\n    containerStateLayer,\n    ...props\n}) => {\n    return (\n        <RadioGroupContext value={{ labelPlacement, containerStateLayer }}>\n            <AriaRadioGroup\n                className={(renderProps) =>\n                    clsx(\n                        styles[\"radio-group\"],\n                        typeof className === \"function\"\n                            ? className(renderProps)\n                            : className\n                    )\n                }\n                {...props}\n                data-radio-group\n            >\n                {({ orientation, isInvalid }) => {\n                    const showDescription =\n                        description &&\n                        (!isInvalid || (isInvalid && showDescriptionOnInvalid));\n\n                    return (\n                        <>\n                            {label && <Label>{label}</Label>}\n\n                            <div\n                                data-orientation={orientation}\n                                className={clsx(styles[\"radio-items\"])}\n                                style={{\n                                    gap: `calc(${radioItemsGap} * var(--dp, 1px))`,\n                                }}\n                            >\n                                {children}\n                            </div>\n\n                            {showDescription && (\n                                <Description>{description}</Description>\n                            )}\n                            <FieldError>{errorMessage}</FieldError>\n                        </>\n                    );\n                }}\n            </AriaRadioGroup>\n        </RadioGroupContext>\n    );\n};\n"],"mappings":";;;;;;;;;;AAQA,IAAa,IAAoB,EAAsC,CAAC,CAAC;;;;;;;GEC5D,KAA+B,EACxC,cACA,aACA,mBACA,wBACA,GAAG,QACD;CACF,IAAM,EACF,gBAAgB,GAChB,qBAAqB,MACrB,EAAW,CAAiB,GAC1B,IAAY,KAAkB,KAAuB,OACrD,IAAa,KAAuB,KAA4B;CAEtE,OACI,kBAAC,GAAD;EACI,YAAY,MACR,EACI,EAAO,OACP,KAAc,EAAO,gBACrB,EAAW,YACX,OAAO,KAAc,aACf,EAAU,CAAW,IACrB,CACV;EAEJ,GAAI;EACJ,cAAA;aAEE,MAAgB;GACd,IAAM,EACF,eACA,cACA,eACA,cACA,mBACA,cACA,iBACA,GAEE,IAAY;IACd,iBAAiB,KAAc,KAAA;IAC/B,gBAAgB,KAAa,KAAA;IAC7B,iBAAiB,KAAc,KAAA;IAC/B,gBAAgB,KAAa,KAAA;IAC7B,sBAAsB,KAAkB,KAAA;IACxC,gBAAgB,KAAa,KAAA;IAC7B,yBAAyB,CAAC,KAAc,KAAA;IACxC,gBAAgB,KAAa,KAAA;GACjC,GAEM,IACF,OAAO,KAAa,aACd,EAAS,CAAW,IACpB;GACV,OACI,kBAAA,GAAA,EAAA,UAAA;IACK,MAAc,WAAW;IAE1B,kBAAC,QAAD;KACI,WAAW,EAAK,EAAO,WAAc,CAAS;KAC9C,GAAI;eAEJ,kBAAC,QAAD;MACI,WAAW,EAAK,EAAO,iBAAiB;MACxC,GAAI;KACD,CAAA;IACL,CAAA;IAEL,MAAc,SAAS;GAC1B,EAAA,CAAA;EAEV;CACO,CAAA;AAEnB,GC3Ea,KAAyC,EAClD,UACA,gBACA,iBACA,8BAA2B,IAC3B,aACA,cACA,mBAAgB,IAChB,mBACA,wBACA,GAAG,QAGC,kBAAC,GAAD;CAAmB,OAAO;EAAE;EAAgB;CAAoB;WAC5D,kBAAC,GAAD;EACI,YAAY,MACR,EACI,EAAO,gBACP,OAAO,KAAc,aACf,EAAU,CAAW,IACrB,CACV;EAEJ,GAAI;EACJ,oBAAA;aAEE,EAAE,gBAAa,mBAAgB;GAC7B,IAAM,IACF,MACC,CAAC,KAAc,KAAa;GAEjC,OACI,kBAAA,GAAA,EAAA,UAAA;IACK,KAAS,kBAAC,GAAD,EAAA,UAAQ,EAAa,CAAA;IAE/B,kBAAC,OAAD;KACI,oBAAkB;KAClB,WAAW,EAAK,EAAO,cAAc;KACrC,OAAO,EACH,KAAK,QAAQ,EAAc,oBAC/B;KAEC;IACA,CAAA;IAEJ,KACG,kBAAC,GAAD,EAAA,UAAc,EAAyB,CAAA;IAE3C,kBAAC,GAAD,EAAA,UAAa,EAAyB,CAAA;GACxC,EAAA,CAAA;EAEV;CACY,CAAA;AACD,CAAA"}
+{"version":3,"file":"Radio","names":["renderProps"],"sources":["../../src/components/Input/Radio/context.ts","../../src/components/Input/Radio/radio.module.css","../../src/components/Input/Radio/Radio.tsx","../../src/components/Input/Radio/RadioGroup.tsx"],"sourcesContent":["import { createContext } from \"react\";\nimport type { RadioLabelPlacement } from \"./types\";\n\nexport type RadioGroupContextValue = {\n    labelPlacement?: RadioLabelPlacement;\n    containerStateLayer?: boolean;\n};\n\nexport const RadioGroupContext = createContext<RadioGroupContextValue>({});\n","/* configurable tokens\n*\n* --md-radio-icon-color\n* --md-radio-selected-icon-color\n*\n* --md-radio-interaction-icon-color\n* --md-radio-selected-interaction-icon-color\n*\n* --md-radio-state-layer-color\n* --md-radio-selected-state-layer-color\n*\n* configurable tokens end */\n\n@layer adgytec.comps {\n    .radio-group {\n        /* configurable tokens */\n        --_md-radio-icon-color: var(\n            --md-radio-icon-color,\n            var(--md-sys-color-on-surface-variant)\n        );\n        --_md-radio-selected-icon-color: var(\n            --md-radio-selected-icon-color,\n            var(--md-sys-color-primary)\n        );\n\n        --_md-radio-interaction-icon-color: var(\n            --md-radio-interaction-icon-color,\n            var(--md-sys-color-on-surface)\n        );\n        --_md-radio-selected-interaction-icon-color: var(\n            --md-radio-selected-interaction-icon-color,\n            var(--_md-radio-selected-icon-color)\n        );\n\n        --_md-radio-state-layer-color: var(\n            --md-radio-state-layer-color,\n            var(--md-sys-color-on-surface)\n        );\n        --_md-radio-selected-state-layer-color: var(\n            --md-radio-selected-state-layer-color,\n            var(--_md-radio-selected-icon-color)\n        );\n\n        /* configurable tokens end */\n\n        display: grid;\n        gap: var(--md-sys-layout-space-16);\n\n        &[data-disabled] {\n            color: rgb(\n                from currentcolor r g b /\n                var(--md-sys-state-disabled-content)\n            );\n            cursor: default;\n        }\n    }\n\n    .radio-items {\n        display: grid;\n\n        &[data-orientation=\"horizontal\"] {\n            display: flex;\n        }\n    }\n\n    .radio {\n        /* invalid tokens */\n        --_md-radio-invalid-icon-color: var(--md-sys-color-error);\n        --_md-radio-invalid-state-layer-color: var(\n            --_md-radio-invalid-icon-color\n        );\n\n        /* indicator tokens */\n        --_md-radio-size: calc(20 * var(--dp, 1px));\n        --_md-radio-icon-size: calc(\n            var(--_md-radio-size) -\n            calc(10 * var(--dp, 1px))\n        );\n        --_md-radio-state-layer-size: calc(40 * var(--dp, 1px));\n\n        /* state layer tokens */\n        --_md-radio-pressed-state-layer-color: var(\n            --_md-radio-selected-state-layer-color\n        );\n        --_md-radio-pressed-selected-state-layer-color: var(\n            --_md-radio-state-layer-color\n        );\n\n        --_state-layer-opacity: 0;\n        --_state-color: var(--_md-radio-state-layer-color);\n\n        --_state-layer-color: rgb(\n            from var(--_state-color) r g b /\n            var(--_state-layer-opacity)\n        );\n\n        /* styles */\n        position: relative;\n\n        display: flex;\n        align-items: center;\n        gap: var(--md-sys-layout-space-16);\n\n        color: inherit;\n        cursor: pointer;\n\n        & * {\n            cursor: inherit;\n        }\n\n        &[data-disabled] {\n            cursor: default;\n        }\n\n        &[data-selected] {\n            --_state-color: var(--_md-radio-selected-state-layer-color);\n        }\n\n        &[data-pressed] {\n            --_state-layer-opacity: var(--md-sys-state-pressed);\n            --_state-color: var(--_md-radio-pressed-state-layer-color);\n\n            &[data-selected] {\n                --_state-color: var(\n                    --_md-radio-pressed-selected-state-layer-color\n                );\n            }\n        }\n\n        &[data-invalid] {\n            --_state-color: var(--_md-radio-invalid-state-layer-color);\n\n            &[data-selected] {\n                --_state-color: var(--_md-radio-invalid-state-layer-color);\n            }\n        }\n\n        &[data-hovered] {\n            --_state-layer-opacity: var(--md-sys-state-hover);\n            z-index: 1;\n        }\n\n        &[data-focus-visible] {\n            --_state-layer-opacity: var(--md-sys-state-focus);\n            z-index: 1;\n        }\n    }\n\n    .state-layer::before {\n        content: \"\";\n\n        position: absolute;\n        inset: calc(-1 * var(--md-sys-layout-space-12));\n\n        background-color: var(--_state-layer-color);\n        border-radius: var(--md-sys-shape-corner-radius-extra-small);\n\n        pointer-events: none;\n\n        transition: background-color\n            var(--md-sys-motion-expressive-fast-effects)\n            var(--md-sys-motion-expressive-fast-effects-duration);\n\n        @media (prefers-reduced-motion) {\n            transition: none;\n        }\n    }\n\n    .indicator {\n        --_indicator-color: var(--_md-radio-icon-color);\n\n        position: relative;\n\n        inline-size: var(--_md-radio-size);\n        aspect-ratio: 1 / 1;\n        border-radius: var(--md-sys-shape-corner-radius-full);\n\n        border: var(--md-sys-shape-border-width-thick) solid\n            var(--_indicator-color);\n\n        transition: border-color var(--md-sys-motion-expressive-default-effects)\n            var(--md-sys-motion-expressive-default-effects-duration);\n\n        @media (prefers-reduced-motion) {\n            transition: none;\n        }\n\n        &[data-selected] {\n            --_indicator-color: var(--_md-radio-selected-icon-color);\n        }\n\n        &[data-invalid] {\n            --_indicator-color: var(--_md-radio-invalid-icon-color);\n        }\n\n        &[data-pressed],\n        &[data-hovered],\n        &[data-focus-visible] {\n            --_indicator-color: var(--_md-radio-interaction-icon-color);\n\n            &[data-selected] {\n                --_indicator-color: var(\n                    --_md-radio-selected-interaction-icon-color\n                );\n            }\n\n            &[data-invalid] {\n                --_indicator-color: var(--_md-radio-invalid-icon-color);\n            }\n        }\n\n        &[data-disabled] {\n            --_indicator-color: rgb(\n                from var(--md-sys-color-on-surface) r g b /\n                var(--md-sys-state-disabled-content)\n            );\n\n            &[data-selected] {\n                --_indicator-color: rgb(\n                    from var(--md-sys-color-on-surface) r g b /\n                    var(--md-sys-state-disabled-content)\n                );\n            }\n        }\n    }\n\n    /* state layer */\n    .indicator[data-show-state-layer]::before {\n        content: \"\";\n\n        position: absolute;\n        inset-block-start: 50%;\n        inset-inline-start: 50%;\n        transform: translate(-50%, -50%);\n\n        inline-size: var(--_md-radio-state-layer-size);\n        aspect-ratio: 1 / 1;\n        border-radius: var(--md-sys-shape-corner-radius-full);\n\n        background-color: var(--_state-layer-color);\n\n        transition: background-color\n            var(--md-sys-motion-expressive-default-effects)\n            var(--md-sys-motion-expressive-default-effects-duration);\n\n        @media (prefers-reduced-motion) {\n            transition: none;\n        }\n    }\n\n    /* indicator center icon */\n    .indicator-icon {\n        content: \"\";\n\n        position: absolute;\n        inline-size: var(--_md-radio-icon-size);\n        aspect-ratio: 1 / 1;\n\n        inset-inline-start: 50%;\n        inset-block-start: 50%;\n        translate: -50% -50%;\n\n        background-color: var(--_indicator-color);\n        border-radius: var(--md-sys-shape-corner-radius-full);\n\n        scale: 0;\n\n        transition:\n            background-color var(--md-sys-motion-expressive-default-effects)\n            var(--md-sys-motion-expressive-default-effects-duration),\n            scale var(--md-sys-motion-standard-default-spatial)\n            var(--md-sys-motion-standard-default-spatial-duration);\n\n        @media (prefers-reduced-motion) {\n            transition: none;\n        }\n\n        &[data-selected] {\n            scale: 1;\n        }\n    }\n\n    .indicator[data-focus-visible] {\n        --focus-indicator-color: var(--md-sys-color-secondary);\n        --focus-indicator-thickness: calc(3 * var(--dp, 1px));\n        --focus-indicator-offset: calc(2 * var(--dp, 1px));\n\n        outline-width: var(--focus-indicator-thickness);\n        outline-style: solid;\n        outline-offset: var(--focus-indicator-offset);\n        outline-color: var(--focus-indicator-color);\n    }\n}\n","import { clsx } from \"clsx\";\nimport { useContext } from \"react\";\nimport { Radio as AriaRadio } from \"react-aria-components\";\nimport { typography } from \"@/utils\";\nimport { TapTarget } from \"@/utils/tapTarget\";\nimport { RadioGroupContext } from \"./context\";\nimport styles from \"./radio.module.css\";\nimport type { RadioProps } from \"./types\";\n\nexport const Radio: React.FC<RadioProps> = ({\n    className,\n    children,\n    labelPlacement,\n    containerStateLayer,\n    ...props\n}) => {\n    const {\n        labelPlacement: groupLabelPlacement,\n        containerStateLayer: groupContainerStateLayer,\n    } = useContext(RadioGroupContext);\n    const placement = labelPlacement ?? groupLabelPlacement ?? \"end\";\n    const stateLayer = containerStateLayer ?? groupContainerStateLayer ?? false;\n\n    return (\n        <AriaRadio\n            className={(renderProps) =>\n                clsx(\n                    styles[\"radio\"],\n                    stateLayer && styles[\"state-layer\"],\n                    typography.labelLarge,\n                    typeof className === \"function\"\n                        ? className(renderProps)\n                        : className\n                )\n            }\n            {...props}\n            data-radio\n        >\n            {(renderProps) => {\n                const {\n                    isSelected,\n                    isHovered,\n                    isDisabled,\n                    isFocused,\n                    isFocusVisible,\n                    isPressed,\n                    isInvalid,\n                } = renderProps;\n\n                const dataAttrs = {\n                    \"data-selected\": isSelected || undefined,\n                    \"data-hovered\": isHovered || undefined,\n                    \"data-disabled\": isDisabled || undefined,\n                    \"data-focused\": isFocused || undefined,\n                    \"data-focus-visible\": isFocusVisible || undefined,\n                    \"data-pressed\": isPressed || undefined,\n                    \"data-show-state-layer\": !stateLayer || undefined,\n                    \"data-invalid\": isInvalid || undefined,\n                };\n\n                const label =\n                    typeof children === \"function\"\n                        ? children(renderProps)\n                        : children;\n                return (\n                    <>\n                        {placement === \"start\" && label}\n\n                        <span\n                            className={clsx(styles[\"indicator\"], TapTarget)}\n                            {...dataAttrs}\n                        >\n                            <span\n                                className={clsx(styles[\"indicator-icon\"])}\n                                {...dataAttrs}\n                            ></span>\n                        </span>\n\n                        {placement === \"end\" && label}\n                    </>\n                );\n            }}\n        </AriaRadio>\n    );\n};\n","import { clsx } from \"clsx\";\nimport { RadioGroup as AriaRadioGroup } from \"react-aria-components\";\nimport { Description } from \"../Description\";\nimport { FieldError } from \"../FieldError\";\nimport { Label } from \"../Label\";\nimport { RadioGroupContext } from \"./context\";\nimport styles from \"./radio.module.css\";\nimport type { RadioGroupProps } from \"./types\";\n\nexport const RadioGroup: React.FC<RadioGroupProps> = ({\n    label,\n    description,\n    errorMessage,\n    showDescriptionOnInvalid = false,\n    children,\n    className,\n    radioItemsGap = 24,\n    labelPlacement,\n    containerStateLayer,\n    ...props\n}) => {\n    return (\n        <RadioGroupContext value={{ labelPlacement, containerStateLayer }}>\n            <AriaRadioGroup\n                className={(renderProps) =>\n                    clsx(\n                        styles[\"radio-group\"],\n                        typeof className === \"function\"\n                            ? className(renderProps)\n                            : className\n                    )\n                }\n                {...props}\n                data-radio-group\n            >\n                {({ orientation, isInvalid }) => {\n                    const showDescription =\n                        description &&\n                        (!isInvalid || (isInvalid && showDescriptionOnInvalid));\n\n                    return (\n                        <>\n                            {label && <Label>{label}</Label>}\n\n                            <div\n                                data-orientation={orientation}\n                                className={clsx(styles[\"radio-items\"])}\n                                style={{\n                                    gap: `calc(${radioItemsGap} * var(--dp, 1px))`,\n                                }}\n                            >\n                                {children}\n                            </div>\n\n                            {showDescription && (\n                                <Description>{description}</Description>\n                            )}\n                            <FieldError>{errorMessage}</FieldError>\n                        </>\n                    );\n                }}\n            </AriaRadioGroup>\n        </RadioGroupContext>\n    );\n};\n"],"mappings":"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"}

package/dist/chunks/RichTooltip

@@ -1,11 +1,20 @@
-import e from "clsx";
-import { jsx as t } from "react/jsx-runtime";
-import '../assets/RichTooltip.css';var n = { tooltip: "_tooltip_m5ize_9" }, r = ({ className: r, ...i }) => /* @__PURE__ */ t("div", {
-	className: e(n.tooltip, r),
-	...i,
-	"data-rich-tooltip": !0
-});
+import { t as e } from "./compiler-runtime";
+import t from "clsx";
+import { jsx as n } from "react/jsx-runtime";
+import '../assets/RichTooltip.css';//#region src/components/Tooltip/RichTooltip/RichTooltip/richTooltip.module.css
+var r = e(), i = { tooltip: "_tooltip_m5ize_9" }, a = (e) => {
+	let a = (0, r.c)(8), o, s;
+	a[0] === e ? (o = a[1], s = a[2]) : ({className: o, ...s} = e, a[0] = e, a[1] = o, a[2] = s);
+	let c;
+	a[3] === o ? c = a[4] : (c = t(i.tooltip, o), a[3] = o, a[4] = c);
+	let l;
+	return a[5] !== s || a[6] !== c ? (l = /* @__PURE__ */ n("div", {
+		className: c,
+		...s,
+		"data-rich-tooltip": !0
+	}), a[5] = s, a[6] = c, a[7] = l) : l = a[7], l;
+};
 //#endregion
-export { r as t };
+export { a as t };
 
 //# sourceMappingURL=RichTooltip.map

package/dist/chunks/RichTooltip.map

@@ -1 +1 @@
-{"version":3,"file":"RichTooltip","names":[],"sources":["../../src/components/Tooltip/RichTooltip/RichTooltip/richTooltip.module.css","../../src/components/Tooltip/RichTooltip/RichTooltip/RichTooltip.tsx"],"sourcesContent":["/* configurable tokens\n*\n* --md-rich-tooltip-background\n* --md-rich-tooltip-color\n*\n* configurable tokens end */\n\n@layer adgytec.comps {\n    .tooltip {\n        --_md-rich-tooltip-background: var(\n            --md-rich-tooltip-background,\n            var(--md-sys-color-surface-container)\n        );\n        --_md-rich-tooltip-color: var(\n            --md-rich-tooltip-color,\n            var(--md-sys-color-on-surface-variant)\n        );\n\n        display: grid;\n        gap: var(--md-sys-layout-space-12);\n\n        padding-block-start: var(--md-sys-layout-space-12);\n        padding-block-end: var(--md-sys-layout-space-8);\n\n        background-color: var(--_md-rich-tooltip-background);\n        color: var(--_md-rich-tooltip-color);\n\n        border-radius: var(--md-sys-shape-corner-radius-medium);\n        box-shadow: var(--md-sys-elevation-shadow-2);\n\n        max-inline-size: calc(300 * var(--dp, 1px));\n    }\n}\n","// https://m3.material.io/components/tooltips/guidelines#00e87770-86d0-436d-b50b-436ff3cefe75\n// use this with popover, for more details read the article\n\nimport clsx from \"clsx\";\nimport styles from \"./richTooltip.module.css\";\n\nexport const RichTooltip: React.FC<React.ComponentPropsWithRef<\"div\">> = ({\n    className,\n    ...props\n}) => {\n    return (\n        <div\n            className={clsx(styles[\"tooltip\"], className)}\n            {...props}\n            data-rich-tooltip\n        />\n    );\n};\n"],"mappings":";;yCCMa,KAA6D,EACtE,cACA,GAAG,QAGC,kBAAC,OAAD;CACI,WAAW,EAAK,EAAO,SAAY,CAAS;CAC5C,GAAI;CACJ,qBAAA;AACH,CAAA"}
+{"version":3,"file":"RichTooltip","names":[],"sources":["../../src/components/Tooltip/RichTooltip/RichTooltip/richTooltip.module.css","../../src/components/Tooltip/RichTooltip/RichTooltip/RichTooltip.tsx"],"sourcesContent":["/* configurable tokens\n*\n* --md-rich-tooltip-background\n* --md-rich-tooltip-color\n*\n* configurable tokens end */\n\n@layer adgytec.comps {\n    .tooltip {\n        --_md-rich-tooltip-background: var(\n            --md-rich-tooltip-background,\n            var(--md-sys-color-surface-container)\n        );\n        --_md-rich-tooltip-color: var(\n            --md-rich-tooltip-color,\n            var(--md-sys-color-on-surface-variant)\n        );\n\n        display: grid;\n        gap: var(--md-sys-layout-space-12);\n\n        padding-block-start: var(--md-sys-layout-space-12);\n        padding-block-end: var(--md-sys-layout-space-8);\n\n        background-color: var(--_md-rich-tooltip-background);\n        color: var(--_md-rich-tooltip-color);\n\n        border-radius: var(--md-sys-shape-corner-radius-medium);\n        box-shadow: var(--md-sys-elevation-shadow-2);\n\n        max-inline-size: calc(300 * var(--dp, 1px));\n    }\n}\n","// https://m3.material.io/components/tooltips/guidelines#00e87770-86d0-436d-b50b-436ff3cefe75\n// use this with popover, for more details read the article\n\nimport clsx from \"clsx\";\nimport styles from \"./richTooltip.module.css\";\n\nexport const RichTooltip: React.FC<React.ComponentPropsWithRef<\"div\">> = ({\n    className,\n    ...props\n}) => {\n    return (\n        <div\n            className={clsx(styles[\"tooltip\"], className)}\n            {...props}\n            data-rich-tooltip\n        />\n    );\n};\n"],"mappings":";;;;kDCMa,KAA4D,MAAA;CAAA,IAAA,KAAA,GAAA,EAAA,EAAA,CAAA,CAAA,GAAA,GAAA;CAAA,AAAA,EAAA,OAAA,KAGxE,IAAA,EAAA,IAAA,IAAA,EAAA,OAHyE,kBAAA,KAAA,GAGzE,EAAA,KAAA,GAAA,EAAA,KAAA,GAAA,EAAA,KAAA;CAAA,IAAA;CAAA,AAAA,EAAA,OAAA,IAGwD,IAAA,EAAA,MAAlC,IAAA,EAAK,EAAM,SAAa,CAAS,GAAC,EAAA,KAAA,GAAA,EAAA,KAAA;CAAA,IAAA;CAG/C,OAH+C,EAAA,OAAA,KAAA,EAAA,OAAA,KADjD,IAAA,kBAAA,OAAA;EACe,WAAA;EAAkC,GACzC;EACJ,qBAAA;CAAiB,CAAA,GACnB,EAAA,KAAA,GAAA,EAAA,KAAA,GAAA,EAAA,KAAA,KAAA,IAAA,EAAA,IAJF;AAIE"}

package/dist/chunks/RichTooltipActions

@@ -1,10 +1,19 @@
-import e from "clsx";
-import { jsx as t } from "react/jsx-runtime";
-import '../assets/RichTooltipActions.css';var n = { actions: "_actions_yji6y_2" }, r = ({ className: r, ...i }) => /* @__PURE__ */ t("div", {
-	className: e(n.actions, r),
-	...i
-});
+import { t as e } from "./compiler-runtime";
+import t from "clsx";
+import { jsx as n } from "react/jsx-runtime";
+import '../assets/RichTooltipActions.css';//#region src/components/Tooltip/RichTooltip/RichTooltipActions/richTooltipActions.module.css
+var r = e(), i = { actions: "_actions_yji6y_2" }, a = (e) => {
+	let a = (0, r.c)(8), o, s;
+	a[0] === e ? (o = a[1], s = a[2]) : ({className: o, ...s} = e, a[0] = e, a[1] = o, a[2] = s);
+	let c;
+	a[3] === o ? c = a[4] : (c = t(i.actions, o), a[3] = o, a[4] = c);
+	let l;
+	return a[5] !== s || a[6] !== c ? (l = /* @__PURE__ */ n("div", {
+		className: c,
+		...s
+	}), a[5] = s, a[6] = c, a[7] = l) : l = a[7], l;
+};
 //#endregion
-export { r as t };
+export { a as t };
 
 //# sourceMappingURL=RichTooltipActions.map

package/dist/chunks/RichTooltipActions.map

@@ -1 +1 @@
-{"version":3,"file":"RichTooltipActions","names":[],"sources":["../../src/components/Tooltip/RichTooltip/RichTooltipActions/richTooltipActions.module.css","../../src/components/Tooltip/RichTooltip/RichTooltipActions/RichTooltipActions.tsx"],"sourcesContent":["@layer adgytec.comps {\n    .actions {\n        display: flex;\n        align-items: center;\n        gap: var(--md-sys-layout-space-4);\n    }\n}\n","import clsx from \"clsx\";\nimport styles from \"./richTooltipActions.module.css\";\n\n// use Button color -> text and size -> small\nexport const RichTooltipActions: React.FC<\n    React.ComponentPropsWithRef<\"div\">\n> = ({ className, ...props }) => {\n    return <div className={clsx(styles[\"actions\"], className)} {...props} />;\n};\n"],"mappings":";;yCCIa,KAER,EAAE,cAAW,GAAG,QACV,kBAAC,OAAD;CAAK,WAAW,EAAK,EAAO,SAAY,CAAS;CAAG,GAAI;AAAQ,CAAA"}
+{"version":3,"file":"RichTooltipActions","names":[],"sources":["../../src/components/Tooltip/RichTooltip/RichTooltipActions/richTooltipActions.module.css","../../src/components/Tooltip/RichTooltip/RichTooltipActions/RichTooltipActions.tsx"],"sourcesContent":["@layer adgytec.comps {\n    .actions {\n        display: flex;\n        align-items: center;\n        gap: var(--md-sys-layout-space-4);\n    }\n}\n","import clsx from \"clsx\";\nimport styles from \"./richTooltipActions.module.css\";\n\n// use Button color -> text and size -> small\nexport const RichTooltipActions: React.FC<\n    React.ComponentPropsWithRef<\"div\">\n> = ({ className, ...props }) => {\n    return <div className={clsx(styles[\"actions\"], className)} {...props} />;\n};\n"],"mappings":";;;;kDCIa,KAET,MAAA;CAAA,IAAA,KAAA,GAAA,EAAA,EAAA,CAAA,CAAA,GAAA,GAAA;CAAA,AAAA,EAAA,OAAA,KAAwB,IAAA,EAAA,IAAA,IAAA,EAAA,OAAvB,kBAAA,KAAA,GAAuB,EAAA,KAAA,GAAA,EAAA,KAAA,GAAA,EAAA,KAAA;CAAA,IAAA;CAAA,AAAA,EAAA,OAAA,IACiC,IAAA,EAAA,MAAlC,IAAA,EAAK,EAAM,SAAa,CAAS,GAAC,EAAA,KAAA,GAAA,EAAA,KAAA;CAAA,IAAA;CAAe,OAAf,EAAA,OAAA,KAAA,EAAA,OAAA,KAAlD,IAAA,kBAAA,OAAA;EAAgB,WAAA;EAAkC,GAAM;CAAK,CAAA,GAAI,EAAA,KAAA,GAAA,EAAA,KAAA,GAAA,EAAA,KAAA,KAAA,IAAA,EAAA,IAAjE;AAAiE"}

package/dist/chunks/RichTooltipInfo

@@ -1,10 +1,19 @@
-import e from "clsx";
-import { jsx as t } from "react/jsx-runtime";
-import '../assets/RichTooltipInfo.css';var n = { info: "_info_xsenv_2" }, r = ({ className: r, ...i }) => /* @__PURE__ */ t("div", {
-	className: e(n.info, r),
-	...i
-});
+import { t as e } from "./compiler-runtime";
+import t from "clsx";
+import { jsx as n } from "react/jsx-runtime";
+import '../assets/RichTooltipInfo.css';//#region src/components/Tooltip/RichTooltip/RichTooltipInfo/RichTooltipInfo/richTooltipInfo.module.css
+var r = e(), i = { info: "_info_xsenv_2" }, a = (e) => {
+	let a = (0, r.c)(8), o, s;
+	a[0] === e ? (o = a[1], s = a[2]) : ({className: o, ...s} = e, a[0] = e, a[1] = o, a[2] = s);
+	let c;
+	a[3] === o ? c = a[4] : (c = t(i.info, o), a[3] = o, a[4] = c);
+	let l;
+	return a[5] !== s || a[6] !== c ? (l = /* @__PURE__ */ n("div", {
+		className: c,
+		...s
+	}), a[5] = s, a[6] = c, a[7] = l) : l = a[7], l;
+};
 //#endregion
-export { r as t };
+export { a as t };
 
 //# sourceMappingURL=RichTooltipInfo.map

package/dist/chunks/RichTooltipInfo.map

@@ -1 +1 @@
-{"version":3,"file":"RichTooltipInfo","names":[],"sources":["../../src/components/Tooltip/RichTooltip/RichTooltipInfo/RichTooltipInfo/richTooltipInfo.module.css","../../src/components/Tooltip/RichTooltip/RichTooltipInfo/RichTooltipInfo/RichTooltipInfo.tsx"],"sourcesContent":["@layer adgytec.comps {\n    .info {\n        padding-inline: var(--md-sys-layout-space-16);\n\n        display: grid;\n        gap: var(--md-sys-layout-space-4);\n    }\n}\n","import clsx from \"clsx\";\nimport styles from \"./richTooltipInfo.module.css\";\n\nexport const RichTooltipInfo: React.FC<React.ComponentPropsWithRef<\"div\">> = ({\n    className,\n    ...props\n}) => {\n    return <div className={clsx(styles[\"info\"], className)} {...props} />;\n};\n"],"mappings":";;mCCGa,KAAiE,EAC1E,cACA,GAAG,QAEI,kBAAC,OAAD;CAAK,WAAW,EAAK,EAAO,MAAS,CAAS;CAAG,GAAI;AAAQ,CAAA"}
+{"version":3,"file":"RichTooltipInfo","names":[],"sources":["../../src/components/Tooltip/RichTooltip/RichTooltipInfo/RichTooltipInfo/richTooltipInfo.module.css","../../src/components/Tooltip/RichTooltip/RichTooltipInfo/RichTooltipInfo/RichTooltipInfo.tsx"],"sourcesContent":["@layer adgytec.comps {\n    .info {\n        padding-inline: var(--md-sys-layout-space-16);\n\n        display: grid;\n        gap: var(--md-sys-layout-space-4);\n    }\n}\n","import clsx from \"clsx\";\nimport styles from \"./richTooltipInfo.module.css\";\n\nexport const RichTooltipInfo: React.FC<React.ComponentPropsWithRef<\"div\">> = ({\n    className,\n    ...props\n}) => {\n    return <div className={clsx(styles[\"info\"], className)} {...props} />;\n};\n"],"mappings":";;;;4CCGa,KAAgE,MAAA;CAAA,IAAA,KAAA,GAAA,EAAA,EAAA,CAAA,CAAA,GAAA,GAAA;CAAA,AAAA,EAAA,OAAA,KAG5E,IAAA,EAAA,IAAA,IAAA,EAAA,OAH6E,kBAAA,KAAA,GAG7E,EAAA,KAAA,GAAA,EAAA,KAAA,GAAA,EAAA,KAAA;CAAA,IAAA;CAAA,AAAA,EAAA,OAAA,IACyD,IAAA,EAAA,MAA/B,IAAA,EAAK,EAAM,MAAU,CAAS,GAAC,EAAA,KAAA,GAAA,EAAA,KAAA;CAAA,IAAA;CAAe,OAAf,EAAA,OAAA,KAAA,EAAA,OAAA,KAA/C,IAAA,kBAAA,OAAA;EAAgB,WAAA;EAA+B,GAAM;CAAK,CAAA,GAAI,EAAA,KAAA,GAAA,EAAA,KAAA,GAAA,EAAA,KAAA,KAAA,IAAA,EAAA,IAA9D;AAA8D"}

package/dist/chunks/SearchField.map

@@ -1 +1 @@
-{"version":3,"file":"SearchField","names":[],"sources":["../../src/components/Input/SearchField/searchField.module.css","../../src/components/Input/SearchField/SearchField.tsx"],"sourcesContent":["/* configurable tokens\n*\n* --md-search-field-background\n* --md-search-field-color\n* --md-search-field-supporting-color\n*\n* configurable tokens end */\n\n@layer adgytec.comps {\n    .search-field {\n        --_md-search-field-background: var(\n            --md-search-field-background,\n            var(--md-sys-color-surface-container-high)\n        );\n        --_md-search-field-color: var(\n            --md-search-field-color,\n            var(--md-sys-color-on-surface)\n        );\n        --_md-search-field-supporting-color: var(\n            --md-search-field-supporting-color,\n            var(--md-sys-color-on-surface-variant)\n        );\n\n        display: flex;\n        align-items: center;\n\n        background-color: var(--_md-search-field-background);\n        color: var(--_md-search-field-color);\n\n        box-shadow: var(--md-sys-elevation-shadow-3);\n\n        padding-block: var(--md-sys-layout-space-8);\n        padding-inline-start: var(--md-sys-layout-space-16);\n        padding-inline-end: var(--md-sys-layout-space-8);\n\n        border-radius: var(--md-sys-shape-corner-radius-full);\n\n        &[data-empty] {\n            padding-block: var(--md-sys-layout-space-16);\n        }\n\n        &:has([data-focused]) {\n            --focus-indicator-thickness: calc(3 * var(--dp, 1px));\n            --focus-indicator-offset: calc(2 * var(--dp, 1px));\n            --focus-indicator-color: var(--md-sys-color-secondary);\n\n            outline-width: var(--focus-indicator-thickness);\n            outline-style: solid;\n            outline-offset: var(--focus-indicator-offset);\n            outline-color: var(--focus-indicator-color);\n        }\n\n        &[data-disabled] {\n            --_md-search-field-background: rgb(\n                from var(--md-sys-color-surface-container-high) r g b /\n                var(--md-sys-state-disabled-container)\n            );\n            --_md-search-field-color: rgb(\n                from currentColor r g b /\n                var(--md-sys-state-disabled-content)\n            );\n            box-shadow: none;\n        }\n    }\n\n    .search-field [data-button] {\n        --md-button-color: var(--_md-search-field-supporting-color);\n\n        &[data-disabled] [data-visual-button] {\n            background-color: transparent;\n        }\n    }\n\n    .input {\n        all: unset;\n\n        width: 100%;\n\n        padding-inline-start: var(--md-sys-layout-space-16);\n        padding-inline-end: var(--md-sys-layout-space-8);\n\n        &[data-disabled] {\n            cursor: default;\n        }\n    }\n\n    .input::placeholder {\n        color: var(--_md-search-field-supporting-color);\n    }\n\n    .input[data-disabled]::placeholder {\n        color: rgb(\n            from currentColor r g b /\n            var(--md-sys-state-disabled-content)\n        );\n    }\n}\n","import { clsx } from \"clsx\";\nimport { Search, X } from \"lucide-react\";\nimport { SearchField as AriaSearchField, Input } from \"react-aria-components\";\nimport { IconButton } from \"@/components/Button\";\nimport { Icon } from \"@/components/Icon\";\nimport { typography } from \"@/utils\";\nimport styles from \"./searchField.module.css\";\nimport type { SearchFieldProps } from \"./types\";\n\nexport const SearchField: React.FC<SearchFieldProps> = ({\n    placeholder = \"Search\",\n    className,\n    ...props\n}) => {\n    return (\n        <AriaSearchField\n            className={(renderProps) =>\n                clsx(\n                    styles[\"search-field\"],\n                    typeof className === \"function\"\n                        ? className(renderProps)\n                        : className\n                )\n            }\n            {...props}\n        >\n            {({ isEmpty }) => (\n                <>\n                    <Icon icon={Search} size={24} data-search-icon />\n\n                    <Input\n                        className={clsx(styles[\"input\"], typography.bodyLarge)}\n                        placeholder={placeholder}\n                    />\n\n                    {!isEmpty && (\n                        <IconButton\n                            icon={X}\n                            size=\"small\"\n                            width=\"default\"\n                            color=\"standard\"\n                        />\n                    )}\n                </>\n            )}\n        </AriaSearchField>\n    );\n};\n"],"mappings":";;;;;;;;;;GCSa,KAA2C,EACpD,iBAAc,UACd,cACA,GAAG,QAGC,kBAAC,GAAD;CACI,YAAY,MACR,EACI,EAAO,iBACP,OAAO,KAAc,aACf,EAAU,CAAW,IACrB,CACV;CAEJ,GAAI;YAEF,EAAE,iBACA,kBAAA,GAAA,EAAA,UAAA;EACI,kBAAC,GAAD;GAAM,MAAM;GAAQ,MAAM;GAAI,oBAAA;EAAkB,CAAA;EAEhD,kBAAC,GAAD;GACI,WAAW,EAAK,EAAO,OAAU,EAAW,SAAS;GACxC;EAChB,CAAA;EAEA,CAAC,KACE,kBAAC,GAAD;GACI,MAAM;GACN,MAAK;GACL,OAAM;GACN,OAAM;EACT,CAAA;CAEP,EAAA,CAAA;AAEO,CAAA"}
+{"version":3,"file":"SearchField","names":[],"sources":["../../src/components/Input/SearchField/searchField.module.css","../../src/components/Input/SearchField/SearchField.tsx"],"sourcesContent":["/* configurable tokens\n*\n* --md-search-field-background\n* --md-search-field-color\n* --md-search-field-supporting-color\n*\n* configurable tokens end */\n\n@layer adgytec.comps {\n    .search-field {\n        --_md-search-field-background: var(\n            --md-search-field-background,\n            var(--md-sys-color-surface-container-high)\n        );\n        --_md-search-field-color: var(\n            --md-search-field-color,\n            var(--md-sys-color-on-surface)\n        );\n        --_md-search-field-supporting-color: var(\n            --md-search-field-supporting-color,\n            var(--md-sys-color-on-surface-variant)\n        );\n\n        display: flex;\n        align-items: center;\n\n        background-color: var(--_md-search-field-background);\n        color: var(--_md-search-field-color);\n\n        box-shadow: var(--md-sys-elevation-shadow-3);\n\n        padding-block: var(--md-sys-layout-space-8);\n        padding-inline-start: var(--md-sys-layout-space-16);\n        padding-inline-end: var(--md-sys-layout-space-8);\n\n        border-radius: var(--md-sys-shape-corner-radius-full);\n\n        &[data-empty] {\n            padding-block: var(--md-sys-layout-space-16);\n        }\n\n        &:has([data-focused]) {\n            --focus-indicator-thickness: calc(3 * var(--dp, 1px));\n            --focus-indicator-offset: calc(2 * var(--dp, 1px));\n            --focus-indicator-color: var(--md-sys-color-secondary);\n\n            outline-width: var(--focus-indicator-thickness);\n            outline-style: solid;\n            outline-offset: var(--focus-indicator-offset);\n            outline-color: var(--focus-indicator-color);\n        }\n\n        &[data-disabled] {\n            --_md-search-field-background: rgb(\n                from var(--md-sys-color-surface-container-high) r g b /\n                var(--md-sys-state-disabled-container)\n            );\n            --_md-search-field-color: rgb(\n                from currentColor r g b /\n                var(--md-sys-state-disabled-content)\n            );\n            box-shadow: none;\n        }\n    }\n\n    .search-field [data-button] {\n        --md-button-color: var(--_md-search-field-supporting-color);\n\n        &[data-disabled] [data-visual-button] {\n            background-color: transparent;\n        }\n    }\n\n    .input {\n        all: unset;\n\n        width: 100%;\n\n        padding-inline-start: var(--md-sys-layout-space-16);\n        padding-inline-end: var(--md-sys-layout-space-8);\n\n        &[data-disabled] {\n            cursor: default;\n        }\n    }\n\n    .input::placeholder {\n        color: var(--_md-search-field-supporting-color);\n    }\n\n    .input[data-disabled]::placeholder {\n        color: rgb(\n            from currentColor r g b /\n            var(--md-sys-state-disabled-content)\n        );\n    }\n}\n","import { clsx } from \"clsx\";\nimport { Search, X } from \"lucide-react\";\nimport { SearchField as AriaSearchField, Input } from \"react-aria-components\";\nimport { IconButton } from \"@/components/Button\";\nimport { Icon } from \"@/components/Icon\";\nimport { typography } from \"@/utils\";\nimport styles from \"./searchField.module.css\";\nimport type { SearchFieldProps } from \"./types\";\n\nexport const SearchField: React.FC<SearchFieldProps> = ({\n    placeholder = \"Search\",\n    className,\n    ...props\n}) => {\n    return (\n        <AriaSearchField\n            className={(renderProps) =>\n                clsx(\n                    styles[\"search-field\"],\n                    typeof className === \"function\"\n                        ? className(renderProps)\n                        : className\n                )\n            }\n            {...props}\n        >\n            {({ isEmpty }) => (\n                <>\n                    <Icon icon={Search} size={24} data-search-icon />\n\n                    <Input\n                        className={clsx(styles[\"input\"], typography.bodyLarge)}\n                        placeholder={placeholder}\n                    />\n\n                    {!isEmpty && (\n                        <IconButton\n                            icon={X}\n                            size=\"small\"\n                            width=\"default\"\n                            color=\"standard\"\n                        />\n                    )}\n                </>\n            )}\n        </AriaSearchField>\n    );\n};\n"],"mappings":";;;;;;;;;;GCSa,KAA2C,EACpD,iBAAc,UACd,cACA,GAAG,QAGC,kBAAC,GAAD;CACI,YAAY,MACR,EACI,EAAO,iBACP,OAAO,KAAc,aACf,EAAU,CAAW,IACrB,CACV;CAEJ,GAAI;YAEF,EAAE,iBACA,kBAAA,GAAA,EAAA,UAAA;EACI,kBAAC,GAAD;GAAM,MAAM;GAAQ,MAAM;GAAI,oBAAA;EAAgB,CAAA;EAE9C,kBAAC,GAAD;GACI,WAAW,EAAK,EAAO,OAAU,EAAW,SAAS;GACxC;EAAY,CAAA;EAG5B,CAAC,KACE,kBAAC,GAAD;GACI,MAAM;GACN,MAAK;GACL,OAAM;GACN,OAAM;EAAU,CAAA;CAG5B,EAAA,CAAA;AAES,CAAA"}

package/dist/chunks/SelectPopover

@@ -1,11 +1,20 @@
-import { t as e } from "./Popover";
-import { clsx as t } from "clsx";
-import { jsx as n } from "react/jsx-runtime";
-import '../assets/SelectPopover.css';var r = { popover: "_popover_108ip_2" }, i = ({ className: i, ...a }) => /* @__PURE__ */ n(e, {
-	className: (e) => t(r.popover, typeof i == "function" ? i(e) : i),
-	...a
-});
+import { t as e } from "./compiler-runtime";
+import { t } from "./Popover";
+import { clsx as n } from "clsx";
+import { jsx as r } from "react/jsx-runtime";
+import '../assets/SelectPopover.css';//#region src/components/Input/Select/SelectPopover/selectPopover.module.css
+var i = e(), a = { popover: "_popover_108ip_2" }, o = (e) => {
+	let o = (0, i.c)(8), s, c;
+	o[0] === e ? (s = o[1], c = o[2]) : ({className: s, ...c} = e, o[0] = e, o[1] = s, o[2] = c);
+	let l;
+	o[3] === s ? l = o[4] : (l = (e) => n(a.popover, typeof s == "function" ? s(e) : s), o[3] = s, o[4] = l);
+	let u;
+	return o[5] !== c || o[6] !== l ? (u = /* @__PURE__ */ r(t, {
+		className: l,
+		...c
+	}), o[5] = c, o[6] = l, o[7] = u) : u = o[7], u;
+};
 //#endregion
-export { i as t };
+export { o as t };
 
 //# sourceMappingURL=SelectPopover.map

package/dist/chunks/SelectPopover.map

@@ -1 +1 @@
-{"version":3,"file":"SelectPopover","names":[],"sources":["../../src/components/Input/Select/SelectPopover/selectPopover.module.css","../../src/components/Input/Select/SelectPopover/SelectPopover.tsx"],"sourcesContent":["@layer adgytec.comps {\n    .popover {\n        min-inline-size: var(--trigger-width);\n\n        display: grid;\n        grid-template-rows: 1fr;\n    }\n}\n","import { clsx } from \"clsx\";\nimport { Popover } from \"@/components/Popover\";\nimport styles from \"./selectPopover.module.css\";\n\nexport const SelectPopover: React.FC<\n    React.ComponentPropsWithRef<typeof Popover>\n> = ({ className, ...props }) => {\n    return (\n        <Popover\n            className={(renderProps) =>\n                clsx(\n                    styles[\"popover\"],\n                    typeof className === \"function\"\n                        ? className(renderProps)\n                        : className\n                )\n            }\n            {...props}\n        />\n    );\n};\n"],"mappings":";;;yCCIa,KAER,EAAE,cAAW,GAAG,QAEb,kBAAC,GAAD;CACI,YAAY,MACR,EACI,EAAO,SACP,OAAO,KAAc,aACf,EAAU,CAAW,IACrB,CACV;CAEJ,GAAI;AACP,CAAA"}
+{"version":3,"file":"SelectPopover","names":[],"sources":["../../src/components/Input/Select/SelectPopover/selectPopover.module.css","../../src/components/Input/Select/SelectPopover/SelectPopover.tsx"],"sourcesContent":["@layer adgytec.comps {\n    .popover {\n        min-inline-size: var(--trigger-width);\n\n        display: grid;\n        grid-template-rows: 1fr;\n    }\n}\n","import { clsx } from \"clsx\";\nimport { Popover } from \"@/components/Popover\";\nimport styles from \"./selectPopover.module.css\";\n\nexport const SelectPopover: React.FC<\n    React.ComponentPropsWithRef<typeof Popover>\n> = ({ className, ...props }) => {\n    return (\n        <Popover\n            className={(renderProps) =>\n                clsx(\n                    styles[\"popover\"],\n                    typeof className === \"function\"\n                        ? className(renderProps)\n                        : className\n                )\n            }\n            {...props}\n        />\n    );\n};\n"],"mappings":";;;;;kDCIa,KAET,MAAA;CAAA,IAAA,KAAA,GAAA,EAAA,EAAA,CAAA,CAAA,GAAA,GAAA;CAAA,AAAA,EAAA,OAAA,KAAwB,IAAA,EAAA,IAAA,IAAA,EAAA,OAAvB,kBAAA,KAAA,GAAuB,EAAA,KAAA,GAAA,EAAA,KAAA,GAAA,EAAA,KAAA;CAAA,IAAA;CAAA,AAAA,EAAA,OAAA,IASX,IAAA,EAAA,MANM,KAAA,MACP,EACI,EAAM,SACN,OAAO,KAAc,aACf,EAAU,CACF,IAFd,CAGJ,GAAC,EAAA,KAAA,GAAA,EAAA,KAAA;CAAA,IAAA;CAGP,OAHO,EAAA,OAAA,KAAA,EAAA,OAAA,KAPT,IAAA,kBAAC,GAAD;EACe,WAAA;EAMN,GAED;CAAK,CAAA,GACX,EAAA,KAAA,GAAA,EAAA,KAAA,GAAA,EAAA,KAAA,KAAA,IAAA,EAAA,IAVF;AAUE"}

package/dist/chunks/SelectTrigger

@@ -1,31 +1,41 @@
-import { t as e } from "./base";
-import { t } from "./Icon";
-import { d as n, o as r, s as i } from "./core4";
-import a from "clsx";
-import { useContext as o } from "react";
-import { jsx as s, jsxs as c } from "react/jsx-runtime";
-import { Button as l, SelectStateContext as u, SelectValue as d } from "react-aria-components";
-import { ChevronDown as f } from "lucide-react";
-import '../assets/SelectTrigger.css';var p = {
+import { t as e } from "./compiler-runtime";
+import { t } from "./base";
+import { t as n } from "./Icon";
+import { d as r, o as i, s as a } from "./core4";
+import o from "clsx";
+import { useContext as s } from "react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { Button as u, SelectStateContext as d, SelectValue as f } from "react-aria-components";
+import { ChevronDown as p } from "lucide-react";
+import '../assets/SelectTrigger.css';//#region src/components/Input/Select/SelectTrigger/selectTrigger.module.css
+var m = e(), h = {
 	trigger: "_trigger_pud16_2",
 	"select-value": "_select-value_pud16_37"
-}, m = (m) => {
-	let h = o(u)?.displayValidation.isInvalid;
-	return /* @__PURE__ */ c(l, {
-		className: a(n, i, r, e.bodyLarge, p.trigger),
-		...m,
-		"data-invalid": h || void 0,
+}, g = (e) => {
+	let g = (0, m.c)(6), v = s(d)?.displayValidation.isInvalid, y;
+	g[0] === Symbol.for("react.memo_cache_sentinel") ? (y = o(r, a, i, t.bodyLarge, h.trigger), g[0] = y) : y = g[0];
+	let b = v || void 0, x, S;
+	g[1] === Symbol.for("react.memo_cache_sentinel") ? (x = /* @__PURE__ */ c(f, {
+		className: o(h["select-value"]),
+		children: _
+	}), S = /* @__PURE__ */ c(n, {
+		icon: p,
+		size: 24
+	}), g[1] = x, g[2] = S) : (x = g[1], S = g[2]);
+	let C;
+	return g[3] !== e || g[4] !== b ? (C = /* @__PURE__ */ l(u, {
+		className: y,
+		...e,
+		"data-invalid": b,
 		"data-select-trigger": !0,
-		children: [/* @__PURE__ */ s(d, {
-			className: a(p["select-value"]),
-			children: ({ selectedText: e, isPlaceholder: t, defaultChildren: n }) => t ? n : e
-		}), /* @__PURE__ */ s(t, {
-			icon: f,
-			size: 24
-		})]
-	});
+		children: [x, S]
+	}), g[3] = e, g[4] = b, g[5] = C) : C = g[5], C;
 };
+function _(e) {
+	let { selectedText: t, isPlaceholder: n, defaultChildren: r } = e;
+	return n ? r : t;
+}
 //#endregion
-export { m as t };
+export { g as t };
 
 //# sourceMappingURL=SelectTrigger.map

package/dist/chunks/SelectTrigger.map

@@ -1 +1 @@
-{"version":3,"file":"SelectTrigger","names":[],"sources":["../../src/components/Input/Select/SelectTrigger/selectTrigger.module.css","../../src/components/Input/Select/SelectTrigger/SelectTrigger.tsx"],"sourcesContent":["@layer adgytec.overrides {\n    .trigger {\n        --rotate: 0;\n\n        justify-content: space-between;\n        cursor: pointer;\n\n        &[data-pressed] {\n            --rotate: 180deg;\n        }\n\n        > svg {\n            color: var(--group-color);\n            rotate: var(--rotate);\n            transition: rotate var(--md-sys-motion-expressive-fast-spatial)\n                var(--md-sys-motion-expressive-fast-spatial-duration);\n\n            @media (prefers-reduced-motion) {\n                transition: none;\n            }\n        }\n\n        &[data-pressed] {\n            --outline-color: var(--outline-color-focused-normal);\n            --outline-color-focused: var(--outline-color);\n\n            &[data-invalid] {\n                --outline-color: var(--outline-color-invalid);\n            }\n        }\n\n        &[data-disabled] {\n            cursor: default;\n        }\n    }\n\n    .select-value {\n        flex: 1;\n        text-align: start;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n\n        &[data-placeholder] {\n            color: var(--placeholder-color);\n        }\n    }\n}\n","import clsx from \"clsx\";\nimport { ChevronDown } from \"lucide-react\";\nimport { useContext } from \"react\";\nimport { Button, SelectStateContext, SelectValue } from \"react-aria-components\";\nimport { Icon } from \"@/components/Icon\";\nimport { typography } from \"@/utils\";\nimport {\n    EditorInputStyles,\n    EditorStyles,\n    TextFieldIconSize,\n    UnsetStyles,\n} from \"../../core\";\nimport styles from \"./selectTrigger.module.css\";\n\nexport const SelectTrigger: React.FC<\n    Omit<React.ComponentPropsWithRef<typeof Button>, \"children\">\n> = (props) => {\n    const selectContextVal = useContext(SelectStateContext);\n    const invalid = selectContextVal?.displayValidation.isInvalid;\n\n    return (\n        <Button\n            className={clsx(\n                UnsetStyles,\n                EditorStyles,\n                EditorInputStyles,\n                typography.bodyLarge,\n                styles[\"trigger\"]\n            )}\n            {...props}\n            data-invalid={invalid || undefined}\n            data-select-trigger={true}\n        >\n            <SelectValue className={clsx(styles[\"select-value\"])}>\n                {({ selectedText, isPlaceholder, defaultChildren }) =>\n                    isPlaceholder ? defaultChildren : selectedText\n                }\n            </SelectValue>\n\n            <Icon icon={ChevronDown} size={TextFieldIconSize} />\n        </Button>\n    );\n};\n"],"mappings":";;;;;;;;;;;GCca,KAER,MAAU;CAEX,IAAM,IADmB,EAAW,CACpB,GAAkB,kBAAkB;CAEpD,OACI,kBAAC,GAAD;EACI,WAAW,EACP,GACA,GACA,GACA,EAAW,WACX,EAAO,OACX;EACA,GAAI;EACJ,gBAAc,KAAW,KAAA;EACzB,uBAAqB;YAVzB,CAYI,kBAAC,GAAD;GAAa,WAAW,EAAK,EAAO,eAAe;cAC7C,EAAE,iBAAc,kBAAe,yBAC7B,IAAgB,IAAkB;EAE7B,CAAA,GAEb,kBAAC,GAAD;GAAM,MAAM;GAAa,MAAA;EAA0B,CAAA,CAC/C;;AAEhB"}
+{"version":3,"file":"SelectTrigger","names":["ChevronDown","TextFieldIconSize"],"sources":["../../src/components/Input/Select/SelectTrigger/selectTrigger.module.css","../../src/components/Input/Select/SelectTrigger/SelectTrigger.tsx"],"sourcesContent":["@layer adgytec.overrides {\n    .trigger {\n        --rotate: 0;\n\n        justify-content: space-between;\n        cursor: pointer;\n\n        &[data-pressed] {\n            --rotate: 180deg;\n        }\n\n        > svg {\n            color: var(--group-color);\n            rotate: var(--rotate);\n            transition: rotate var(--md-sys-motion-expressive-fast-spatial)\n                var(--md-sys-motion-expressive-fast-spatial-duration);\n\n            @media (prefers-reduced-motion) {\n                transition: none;\n            }\n        }\n\n        &[data-pressed] {\n            --outline-color: var(--outline-color-focused-normal);\n            --outline-color-focused: var(--outline-color);\n\n            &[data-invalid] {\n                --outline-color: var(--outline-color-invalid);\n            }\n        }\n\n        &[data-disabled] {\n            cursor: default;\n        }\n    }\n\n    .select-value {\n        flex: 1;\n        text-align: start;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n\n        &[data-placeholder] {\n            color: var(--placeholder-color);\n        }\n    }\n}\n","import clsx from \"clsx\";\nimport { ChevronDown } from \"lucide-react\";\nimport { useContext } from \"react\";\nimport { Button, SelectStateContext, SelectValue } from \"react-aria-components\";\nimport { Icon } from \"@/components/Icon\";\nimport { typography } from \"@/utils\";\nimport {\n    EditorInputStyles,\n    EditorStyles,\n    TextFieldIconSize,\n    UnsetStyles,\n} from \"../../core\";\nimport styles from \"./selectTrigger.module.css\";\n\nexport const SelectTrigger: React.FC<\n    Omit<React.ComponentPropsWithRef<typeof Button>, \"children\">\n> = (props) => {\n    const selectContextVal = useContext(SelectStateContext);\n    const invalid = selectContextVal?.displayValidation.isInvalid;\n\n    return (\n        <Button\n            className={clsx(\n                UnsetStyles,\n                EditorStyles,\n                EditorInputStyles,\n                typography.bodyLarge,\n                styles[\"trigger\"]\n            )}\n            {...props}\n            data-invalid={invalid || undefined}\n            data-select-trigger={true}\n        >\n            <SelectValue className={clsx(styles[\"select-value\"])}>\n                {({ selectedText, isPlaceholder, defaultChildren }) =>\n                    isPlaceholder ? defaultChildren : selectedText\n                }\n            </SelectValue>\n\n            <Icon icon={ChevronDown} size={TextFieldIconSize} />\n        </Button>\n    );\n};\n"],"mappings":";;;;;;;;;;;;;GCca,KAET,MAAA;CAAA,IAAA,KAAA,GAAA,EAAA,EAAA,CAAA,CAAA,GAEA,IADyB,EAAW,CACpB,CAAA,EAAgB,kBAA6B,WAAC;CAAA,AAAA,EAAA,OAAA,OAAA,IAAA,2BAAA,KAI3C,IAAA,EACP,GACA,GACA,GACA,EAAU,WACV,EAAM,OACV,GAAC,EAAA,KAAA,KAAA,IAAA,EAAA;CAEa,IAAA,IAAA,KAAA,KAAA,GAAoB,GAAA;CAAA,AAAA,EAAA,OAAA,OAAA,IAAA,2BAAA,KAGlC,IAAA,kBAAC,GAAD;EAAwB,WAAA,EAAK,EAAO,eAAe;YAC9C;CADO,CAAA,GAMZ,IAAA,kBAAC,GAAD;EAAYA,MAAA;EAAmBC,MAAAA;CAAiB,CAAA,GAAI,EAAA,KAAA,GAAA,EAAA,KAAA,MAAA,IAAA,EAAA,IAAA,IAAA,EAAA;CAAA,IAAA;CAC/C,OAD+C,EAAA,OAAA,KAAA,EAAA,OAAA,KAlBxD,IAAA,kBAAC,GAAD;EACe,WAAA;EAMV,GACG;EACU,gBAAA;EACO,uBAAA;YAVzB,CAYI,GAMA,CAlBG;KAmBE,EAAA,KAAA,GAAA,EAAA,KAAA,GAAA,EAAA,KAAA,KAAA,IAAA,EAAA,IAnBT;AAmBS;AAxBb,SAAA,EAAA,GAAA;CAkBc,IAAA,EAAA,iBAAA,kBAAA,uBAAA;CAAgD,OAC9C,IAAA,IAAA;AAA8C"}

package/dist/chunks/SideSheet

@@ -1,13 +1,15 @@
-import { t as e } from "./base";
-import { IconButton as t } from "../components/Button/IconButton/index.js";
-import { DialogContext as n } from "../components/Dialog/core/index.js";
-import { n as r } from "./SideSheetModal";
-import i from "clsx";
-import { useContext as a } from "react";
-import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
-import { Dialog as l, Header as u, Heading as d } from "react-aria-components";
-import { X as f } from "lucide-react";
-import '../assets/SideSheet.css';var p = {
+import { t as e } from "./compiler-runtime";
+import { t } from "./base";
+import { IconButton as n } from "../components/Button/IconButton/index.js";
+import { DialogContext as r } from "../components/Dialog/core/index.js";
+import { n as i } from "./SideSheetModal";
+import a from "clsx";
+import { useContext as o } from "react";
+import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
+import { Dialog as u, Header as d, Heading as f } from "react-aria-components";
+import { X as p } from "lucide-react";
+import '../assets/SideSheet.css';//#region src/components/Sheets/SideSheet/sideSheet.module.css
+var m = e(), h = {
 	"side-sheet-dialog": "_side-sheet-dialog_x6kag_10",
 	"side-sheet": "_side-sheet_x6kag_10",
 	header: "_header_x6kag_70",
@@ -15,51 +17,61 @@ import '../assets/SideSheet.css';var p = {
 	headline: "_headline_x6kag_84",
 	main: "_main_x6kag_88",
 	actions: "_actions_x6kag_95"
-}, m = ({ className: e, ...t }) => {
-	let { layout: o, alignment: c } = a(r);
-	return /* @__PURE__ */ s(n, {
+}, g = (e) => {
+	let t = (0, m.c)(10), n, s;
+	t[0] === e ? (n = t[1], s = t[2]) : ({className: n, ...s} = e, t[0] = e, t[1] = n, t[2] = s);
+	let { layout: l, alignment: d } = o(i), f;
+	t[3] === n ? f = t[4] : (f = a(h["side-sheet-dialog"], n), t[3] = n, t[4] = f);
+	let p;
+	return t[5] !== d || t[6] !== l || t[7] !== s || t[8] !== f ? (p = /* @__PURE__ */ c(r, {
 		value: !0,
-		children: /* @__PURE__ */ s(l, {
-			className: i(p["side-sheet-dialog"], e),
-			"data-alignment": c,
-			"data-layout": o,
-			...t
+		children: /* @__PURE__ */ c(u, {
+			className: f,
+			"data-alignment": d,
+			"data-layout": l,
+			...s
 		})
-	});
-}, h = ({ headline: n, actions: l, className: h, children: g, ..._ }) => {
-	let { alignment: v } = a(r), y = Array.isArray(l) ? l.length > 0 : !!l;
-	return /* @__PURE__ */ s(m, {
-		className: i(p["side-sheet"], h),
-		..._,
-		"data-actions": y || void 0,
-		children: (r) => /* @__PURE__ */ c(o, { children: [
-			/* @__PURE__ */ c(u, {
-				className: i(p.header),
-				"data-headline": !!n || void 0,
-				children: [n && /* @__PURE__ */ s(d, {
-					slot: "title",
-					className: i(p.headline, e.titleLarge),
-					children: n
-				}), /* @__PURE__ */ s(t, {
-					slot: "close",
-					icon: f,
-					color: "standard",
-					className: i(p.close)
-				})]
-			}),
-			/* @__PURE__ */ s("div", {
-				className: i(p.main),
-				children: typeof g == "function" ? g(r) : g
-			}),
-			y && /* @__PURE__ */ s("div", {
-				className: i(p.actions),
-				"data-alignment": v,
-				children: typeof l == "function" ? l(r) : l
-			})
-		] })
-	});
+	}), t[5] = d, t[6] = l, t[7] = s, t[8] = f, t[9] = p) : p = t[9], p;
+}, _ = (e) => {
+	let r = (0, m.c)(19), u, _, v, y, b;
+	r[0] === e ? (u = r[1], _ = r[2], v = r[3], y = r[4], b = r[5]) : ({headline: y, actions: u, className: v, children: _, ...b} = e, r[0] = e, r[1] = u, r[2] = _, r[3] = v, r[4] = y, r[5] = b);
+	let { alignment: x } = o(i), S = Array.isArray(u) ? u.length > 0 : !!u, C;
+	r[6] === v ? C = r[7] : (C = a(h["side-sheet"], v), r[6] = v, r[7] = C);
+	let w = S || void 0, T;
+	r[8] !== u || r[9] !== x || r[10] !== _ || r[11] !== S || r[12] !== y ? (T = (e) => /* @__PURE__ */ l(s, { children: [
+		/* @__PURE__ */ l(d, {
+			className: a(h.header),
+			"data-headline": !!y || void 0,
+			children: [y && /* @__PURE__ */ c(f, {
+				slot: "title",
+				className: a(h.headline, t.titleLarge),
+				children: y
+			}), /* @__PURE__ */ c(n, {
+				slot: "close",
+				icon: p,
+				color: "standard",
+				className: a(h.close)
+			})]
+		}),
+		/* @__PURE__ */ c("div", {
+			className: a(h.main),
+			children: typeof _ == "function" ? _(e) : _
+		}),
+		S && /* @__PURE__ */ c("div", {
+			className: a(h.actions),
+			"data-alignment": x,
+			children: typeof u == "function" ? u(e) : u
+		})
+	] }), r[8] = u, r[9] = x, r[10] = _, r[11] = S, r[12] = y, r[13] = T) : T = r[13];
+	let E;
+	return r[14] !== b || r[15] !== C || r[16] !== w || r[17] !== T ? (E = /* @__PURE__ */ c(g, {
+		className: C,
+		...b,
+		"data-actions": w,
+		children: T
+	}), r[14] = b, r[15] = C, r[16] = w, r[17] = T, r[18] = E) : E = r[18], E;
 };
 //#endregion
-export { m as n, h as t };
+export { g as n, _ as t };
 
 //# sourceMappingURL=SideSheet.map

package/dist/chunks/SideSheet.map

@@ -1 +1 @@
-{"version":3,"file":"SideSheet","names":[],"sources":["../../src/components/Sheets/SideSheet/sideSheet.module.css","../../src/components/Sheets/SideSheet/SideSheetDialog.tsx","../../src/components/Sheets/SideSheet/SideSheet.tsx"],"sourcesContent":["/* configurable tokens\n*\n* --md-side-sheet-background\n* --md-side-sheet-color\n* --md-side-sheet-headline-color\n*\n* configurable tokens end */\n\n@layer adgytec.comps {\n    .side-sheet-dialog {\n        --_md-side-sheet-background: var(\n            --md-side-sheet-background,\n            var(--md-sys-color-surface-container-low)\n        );\n        --_md-side-sheet-color: var(\n            --md-side-sheet-color,\n            var(--md-sys-color-on-surface)\n        );\n        --_md-side-sheet-headline-color: var(\n            --md-side-sheet-headline-color,\n            var(--md-sys-color-on-surface-variant)\n        );\n        --_md-side-sheet-padding-inline: var(--md-sys-layout-space-16);\n        --_max-inline-size: calc(400 * var(--dp, 1px));\n\n        inline-size: min(100svi, var(--_max-inline-size));\n        block-size: 100dvb;\n\n        display: grid;\n        grid-template-rows: 1fr;\n\n        background-color: var(--_md-side-sheet-background);\n        color: var(--_md-side-sheet-color);\n\n        box-shadow: var(--md-sys-elevation-shadow-1);\n        border-radius: var(--md-sys-shape-corner-radius-large);\n\n        outline: none;\n\n        &[data-layout=\"detached\"] {\n            block-size: calc(100dvb - calc(2 * var(--_detached-margin)));\n            inline-size: min(\n                calc(100svi - calc(2 * var(--_detached-margin))),\n                var(--_max-inline-size)\n            );\n        }\n\n        &[data-layout=\"standard\"] {\n            &[data-alignment=\"start\"] {\n                border-start-start-radius: 0;\n                border-end-start-radius: 0;\n            }\n\n            &[data-alignment=\"end\"] {\n                border-start-end-radius: 0;\n                border-end-end-radius: 0;\n            }\n        }\n    }\n\n    .side-sheet {\n        grid-template-rows: auto 1fr;\n        padding-block: var(--md-sys-layout-space-16);\n\n        &[data-actions] {\n            grid-template-rows: auto 1fr auto;\n        }\n    }\n\n    .header {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        gap: var(--md-sys-layout-space-12);\n\n        padding-inline: var(--_md-side-sheet-padding-inline);\n        padding-block-end: var(--md-sys-layout-space-12);\n    }\n\n    .close {\n        margin-inline-start: auto;\n    }\n\n    .headline {\n        color: var(--_md-side-sheet-headline-color);\n    }\n\n    .main {\n        padding-inline: var(--_md-side-sheet-padding-inline);\n        overflow-y: auto;\n\n        padding-block: var(--md-sys-layout-space-12);\n    }\n\n    .actions {\n        --_divider-thickness: calc(1 * var(--dp, 1px));\n        --_divider-color: rgb(\n            from var(--md-sys-color-outline) r g b /\n            var(--md-sys-state-divider)\n        );\n\n        padding-inline: var(--_md-side-sheet-padding-inline);\n        padding-block-start: var(--md-sys-layout-space-12);\n        display: flex;\n        gap: var(--md-sys-layout-space-12);\n\n        border-block-start: var(--_divider-thickness) solid\n            var(--_divider-color);\n\n        /* biome-ignore lint: different elements */\n        &[data-alignment=\"start\"] {\n            justify-content: end;\n        }\n\n        /* biome-ignore lint: different elements */\n        &[data-alignment=\"end\"] {\n            justify-content: start;\n        }\n    }\n}\n","import clsx from \"clsx\";\nimport { useContext } from \"react\";\nimport { Dialog } from \"react-aria-components\";\nimport { DialogContext } from \"@/components/Dialog\";\nimport { SideSheetContext } from \"../SideSheetModal\";\nimport styles from \"./sideSheet.module.css\";\nimport type { SideSheetDialogProps } from \"./types\";\n\nexport const SideSheetDialog: React.FC<SideSheetDialogProps> = ({\n    className,\n    ...props\n}) => {\n    const { layout, alignment } = useContext(SideSheetContext);\n\n    return (\n        <DialogContext value={true}>\n            <Dialog\n                className={clsx(styles[\"side-sheet-dialog\"], className)}\n                data-alignment={alignment}\n                data-layout={layout}\n                {...props}\n            />\n        </DialogContext>\n    );\n};\n","import clsx from \"clsx\";\nimport { X } from \"lucide-react\";\nimport { useContext } from \"react\";\nimport { Header, Heading } from \"react-aria-components\";\nimport { IconButton } from \"@/components/Button\";\nimport { typography } from \"@/utils\";\nimport { SideSheetContext } from \"../SideSheetModal\";\nimport { SideSheetDialog } from \"./SideSheetDialog\";\nimport styles from \"./sideSheet.module.css\";\nimport type { SideSheetProps } from \"./types\";\n\nexport const SideSheet: React.FC<SideSheetProps> = ({\n    headline,\n    actions,\n    className,\n    children,\n    ...props\n}) => {\n    const { alignment } = useContext(SideSheetContext);\n    const hasActions = Array.isArray(actions) ? actions.length > 0 : !!actions;\n\n    return (\n        <SideSheetDialog\n            className={clsx(styles[\"side-sheet\"], className)}\n            {...props}\n            data-actions={hasActions || undefined}\n        >\n            {(renderProps) => (\n                <>\n                    <Header\n                        className={clsx(styles[\"header\"])}\n                        data-headline={!!headline || undefined}\n                    >\n                        {headline && (\n                            <Heading\n                                slot=\"title\"\n                                className={clsx(\n                                    styles[\"headline\"],\n                                    typography.titleLarge\n                                )}\n                            >\n                                {headline}\n                            </Heading>\n                        )}\n\n                        <IconButton\n                            slot=\"close\"\n                            icon={X}\n                            color=\"standard\"\n                            className={clsx(styles[\"close\"])}\n                        />\n                    </Header>\n\n                    <div className={clsx(styles[\"main\"])}>\n                        {typeof children === \"function\"\n                            ? children(renderProps)\n                            : children}\n                    </div>\n\n                    {hasActions && (\n                        <div\n                            className={clsx(styles[\"actions\"])}\n                            data-alignment={alignment}\n                        >\n                            {typeof actions === \"function\"\n                                ? actions(renderProps)\n                                : actions}\n                        </div>\n                    )}\n                </>\n            )}\n        </SideSheetDialog>\n    );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;GCQa,KAAmD,EAC5D,cACA,GAAG,QACD;CACF,IAAM,EAAE,WAAQ,iBAAc,EAAW,CAAgB;CAEzD,OACI,kBAAC,GAAD;EAAe,OAAO;YAClB,kBAAC,GAAD;GACI,WAAW,EAAK,EAAO,sBAAsB,CAAS;GACtD,kBAAgB;GAChB,eAAa;GACb,GAAI;EACP,CAAA;CACU,CAAA;AAEvB,GCba,KAAuC,EAChD,aACA,YACA,cACA,aACA,GAAG,QACD;CACF,IAAM,EAAE,iBAAc,EAAW,CAAgB,GAC3C,IAAa,MAAM,QAAQ,CAAO,IAAI,EAAQ,SAAS,IAAI,CAAC,CAAC;CAEnE,OACI,kBAAC,GAAD;EACI,WAAW,EAAK,EAAO,eAAe,CAAS;EAC/C,GAAI;EACJ,gBAAc,KAAc,KAAA;aAE1B,MACE,kBAAA,GAAA,EAAA,UAAA;GACI,kBAAC,GAAD;IACI,WAAW,EAAK,EAAO,MAAS;IAChC,iBAAe,CAAC,CAAC,KAAY,KAAA;cAFjC,CAIK,KACG,kBAAC,GAAD;KACI,MAAK;KACL,WAAW,EACP,EAAO,UACP,EAAW,UACf;eAEC;IACI,CAAA,GAGb,kBAAC,GAAD;KACI,MAAK;KACL,MAAM;KACN,OAAM;KACN,WAAW,EAAK,EAAO,KAAQ;IAClC,CAAA,CACG;;GAER,kBAAC,OAAD;IAAK,WAAW,EAAK,EAAO,IAAO;cAC9B,OAAO,KAAa,aACf,EAAS,CAAW,IACpB;GACL,CAAA;GAEJ,KACG,kBAAC,OAAD;IACI,WAAW,EAAK,EAAO,OAAU;IACjC,kBAAgB;cAEf,OAAO,KAAY,aACd,EAAQ,CAAW,IACnB;GACL,CAAA;EAEX,EAAA,CAAA;CAEO,CAAA;AAEzB"}
+{"version":3,"file":"SideSheet","names":["alignment","layout","headline","X","alignment"],"sources":["../../src/components/Sheets/SideSheet/sideSheet.module.css","../../src/components/Sheets/SideSheet/SideSheetDialog.tsx","../../src/components/Sheets/SideSheet/SideSheet.tsx"],"sourcesContent":["/* configurable tokens\n*\n* --md-side-sheet-background\n* --md-side-sheet-color\n* --md-side-sheet-headline-color\n*\n* configurable tokens end */\n\n@layer adgytec.comps {\n    .side-sheet-dialog {\n        --_md-side-sheet-background: var(\n            --md-side-sheet-background,\n            var(--md-sys-color-surface-container-low)\n        );\n        --_md-side-sheet-color: var(\n            --md-side-sheet-color,\n            var(--md-sys-color-on-surface)\n        );\n        --_md-side-sheet-headline-color: var(\n            --md-side-sheet-headline-color,\n            var(--md-sys-color-on-surface-variant)\n        );\n        --_md-side-sheet-padding-inline: var(--md-sys-layout-space-16);\n        --_max-inline-size: calc(400 * var(--dp, 1px));\n\n        inline-size: min(100svi, var(--_max-inline-size));\n        block-size: 100dvb;\n\n        display: grid;\n        grid-template-rows: 1fr;\n\n        background-color: var(--_md-side-sheet-background);\n        color: var(--_md-side-sheet-color);\n\n        box-shadow: var(--md-sys-elevation-shadow-1);\n        border-radius: var(--md-sys-shape-corner-radius-large);\n\n        outline: none;\n\n        &[data-layout=\"detached\"] {\n            block-size: calc(100dvb - calc(2 * var(--_detached-margin)));\n            inline-size: min(\n                calc(100svi - calc(2 * var(--_detached-margin))),\n                var(--_max-inline-size)\n            );\n        }\n\n        &[data-layout=\"standard\"] {\n            &[data-alignment=\"start\"] {\n                border-start-start-radius: 0;\n                border-end-start-radius: 0;\n            }\n\n            &[data-alignment=\"end\"] {\n                border-start-end-radius: 0;\n                border-end-end-radius: 0;\n            }\n        }\n    }\n\n    .side-sheet {\n        grid-template-rows: auto 1fr;\n        padding-block: var(--md-sys-layout-space-16);\n\n        &[data-actions] {\n            grid-template-rows: auto 1fr auto;\n        }\n    }\n\n    .header {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        gap: var(--md-sys-layout-space-12);\n\n        padding-inline: var(--_md-side-sheet-padding-inline);\n        padding-block-end: var(--md-sys-layout-space-12);\n    }\n\n    .close {\n        margin-inline-start: auto;\n    }\n\n    .headline {\n        color: var(--_md-side-sheet-headline-color);\n    }\n\n    .main {\n        padding-inline: var(--_md-side-sheet-padding-inline);\n        overflow-y: auto;\n\n        padding-block: var(--md-sys-layout-space-12);\n    }\n\n    .actions {\n        --_divider-thickness: calc(1 * var(--dp, 1px));\n        --_divider-color: rgb(\n            from var(--md-sys-color-outline) r g b /\n            var(--md-sys-state-divider)\n        );\n\n        padding-inline: var(--_md-side-sheet-padding-inline);\n        padding-block-start: var(--md-sys-layout-space-12);\n        display: flex;\n        gap: var(--md-sys-layout-space-12);\n\n        border-block-start: var(--_divider-thickness) solid\n            var(--_divider-color);\n\n        /* biome-ignore lint: different elements */\n        &[data-alignment=\"start\"] {\n            justify-content: end;\n        }\n\n        /* biome-ignore lint: different elements */\n        &[data-alignment=\"end\"] {\n            justify-content: start;\n        }\n    }\n}\n","import clsx from \"clsx\";\nimport { useContext } from \"react\";\nimport { Dialog } from \"react-aria-components\";\nimport { DialogContext } from \"@/components/Dialog\";\nimport { SideSheetContext } from \"../SideSheetModal\";\nimport styles from \"./sideSheet.module.css\";\nimport type { SideSheetDialogProps } from \"./types\";\n\nexport const SideSheetDialog: React.FC<SideSheetDialogProps> = ({\n    className,\n    ...props\n}) => {\n    const { layout, alignment } = useContext(SideSheetContext);\n\n    return (\n        <DialogContext value={true}>\n            <Dialog\n                className={clsx(styles[\"side-sheet-dialog\"], className)}\n                data-alignment={alignment}\n                data-layout={layout}\n                {...props}\n            />\n        </DialogContext>\n    );\n};\n","import clsx from \"clsx\";\nimport { X } from \"lucide-react\";\nimport { useContext } from \"react\";\nimport { Header, Heading } from \"react-aria-components\";\nimport { IconButton } from \"@/components/Button\";\nimport { typography } from \"@/utils\";\nimport { SideSheetContext } from \"../SideSheetModal\";\nimport { SideSheetDialog } from \"./SideSheetDialog\";\nimport styles from \"./sideSheet.module.css\";\nimport type { SideSheetProps } from \"./types\";\n\nexport const SideSheet: React.FC<SideSheetProps> = ({\n    headline,\n    actions,\n    className,\n    children,\n    ...props\n}) => {\n    const { alignment } = useContext(SideSheetContext);\n    const hasActions = Array.isArray(actions) ? actions.length > 0 : !!actions;\n\n    return (\n        <SideSheetDialog\n            className={clsx(styles[\"side-sheet\"], className)}\n            {...props}\n            data-actions={hasActions || undefined}\n        >\n            {(renderProps) => (\n                <>\n                    <Header\n                        className={clsx(styles[\"header\"])}\n                        data-headline={!!headline || undefined}\n                    >\n                        {headline && (\n                            <Heading\n                                slot=\"title\"\n                                className={clsx(\n                                    styles[\"headline\"],\n                                    typography.titleLarge\n                                )}\n                            >\n                                {headline}\n                            </Heading>\n                        )}\n\n                        <IconButton\n                            slot=\"close\"\n                            icon={X}\n                            color=\"standard\"\n                            className={clsx(styles[\"close\"])}\n                        />\n                    </Header>\n\n                    <div className={clsx(styles[\"main\"])}>\n                        {typeof children === \"function\"\n                            ? children(renderProps)\n                            : children}\n                    </div>\n\n                    {hasActions && (\n                        <div\n                            className={clsx(styles[\"actions\"])}\n                            data-alignment={alignment}\n                        >\n                            {typeof actions === \"function\"\n                                ? actions(renderProps)\n                                : actions}\n                        </div>\n                    )}\n                </>\n            )}\n        </SideSheetDialog>\n    );\n};\n"],"mappings":"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"}

package/dist/chunks/SideSheetModal.map

@@ -1 +1 @@
-{"version":3,"file":"SideSheetModal","names":[],"sources":["../../src/components/Sheets/SideSheetModal/context.ts","../../src/components/Sheets/SideSheetModal/sideSheetModal.module.css","../../src/components/Sheets/SideSheetModal/SideSheetModal.tsx"],"sourcesContent":["import { createContext } from \"react\";\nimport type { SheetLayout } from \"../core\";\nimport type { SideSheetAlignment } from \"./types\";\n\nexport type SideSheetContextValue = {\n    layout: SheetLayout;\n    alignment: SideSheetAlignment;\n};\n\nexport const SideSheetContext = createContext<SideSheetContextValue>({\n    layout: \"standard\",\n    alignment: \"end\",\n});\n","@layer adgytec.comps {\n    .modal {\n        --_detached-margin: var(--md-sys-layout-space-16);\n\n        position: fixed;\n\n        &[data-layout=\"detached\"] {\n            margin: var(--_detached-margin);\n        }\n\n        &[data-alignment=\"start\"] {\n            --_from: -100%;\n        }\n\n        &[data-alignment=\"end\"] {\n            --_from: 100%;\n\n            inset-inline-end: 0;\n        }\n\n        transition: translate var(--_modal-motion) var(--_modal-motion-duration);\n\n        @media (prefers-reduced-motion) {\n            transition: none;\n        }\n\n        &[data-entering],\n        &[data-exiting] {\n            translate: var(--_from);\n        }\n    }\n}\n","import clsx from \"clsx\";\nimport { Modal } from \"react-aria-components\";\nimport { SideSheetContext } from \"./context\";\nimport styles from \"./sideSheetModal.module.css\";\nimport type { SideSheetModalProps } from \"./types\";\n\nexport const SideSheetModal: React.FC<SideSheetModalProps> = ({\n    className,\n    alignment = \"end\",\n    layout = \"standard\",\n    ...props\n}) => {\n    return (\n        <SideSheetContext value={{ alignment, layout }}>\n            <Modal\n                data-alignment={alignment}\n                data-layout={layout}\n                className={(renderProps) =>\n                    clsx(\n                        styles[\"modal\"],\n                        typeof className === \"function\"\n                            ? className(renderProps)\n                            : className\n                    )\n                }\n                {...props}\n            />\n        </SideSheetContext>\n    );\n};\n"],"mappings":";;;;;AASA,IAAa,IAAmB,EAAqC;CACjE,QAAQ;CACR,WAAW;AACf,CAAC,oCENY,KAAiD,EAC1D,cACA,eAAY,OACZ,YAAS,YACT,GAAG,QAGC,kBAAC,GAAD;CAAkB,OAAO;EAAE;EAAW;CAAO;WACzC,kBAAC,GAAD;EACI,kBAAgB;EAChB,eAAa;EACb,YAAY,MACR,EACI,EAAO,OACP,OAAO,KAAc,aACf,EAAU,CAAW,IACrB,CACV;EAEJ,GAAI;CACP,CAAA;AACa,CAAA"}
+{"version":3,"file":"SideSheetModal","names":[],"sources":["../../src/components/Sheets/SideSheetModal/context.ts","../../src/components/Sheets/SideSheetModal/sideSheetModal.module.css","../../src/components/Sheets/SideSheetModal/SideSheetModal.tsx"],"sourcesContent":["import { createContext } from \"react\";\nimport type { SheetLayout } from \"../core\";\nimport type { SideSheetAlignment } from \"./types\";\n\nexport type SideSheetContextValue = {\n    layout: SheetLayout;\n    alignment: SideSheetAlignment;\n};\n\nexport const SideSheetContext = createContext<SideSheetContextValue>({\n    layout: \"standard\",\n    alignment: \"end\",\n});\n","@layer adgytec.comps {\n    .modal {\n        --_detached-margin: var(--md-sys-layout-space-16);\n\n        position: fixed;\n\n        &[data-layout=\"detached\"] {\n            margin: var(--_detached-margin);\n        }\n\n        &[data-alignment=\"start\"] {\n            --_from: -100%;\n        }\n\n        &[data-alignment=\"end\"] {\n            --_from: 100%;\n\n            inset-inline-end: 0;\n        }\n\n        transition: translate var(--_modal-motion) var(--_modal-motion-duration);\n\n        @media (prefers-reduced-motion) {\n            transition: none;\n        }\n\n        &[data-entering],\n        &[data-exiting] {\n            translate: var(--_from);\n        }\n    }\n}\n","import clsx from \"clsx\";\nimport { Modal } from \"react-aria-components\";\nimport { SideSheetContext } from \"./context\";\nimport styles from \"./sideSheetModal.module.css\";\nimport type { SideSheetModalProps } from \"./types\";\n\nexport const SideSheetModal: React.FC<SideSheetModalProps> = ({\n    className,\n    alignment = \"end\",\n    layout = \"standard\",\n    ...props\n}) => {\n    return (\n        <SideSheetContext value={{ alignment, layout }}>\n            <Modal\n                data-alignment={alignment}\n                data-layout={layout}\n                className={(renderProps) =>\n                    clsx(\n                        styles[\"modal\"],\n                        typeof className === \"function\"\n                            ? className(renderProps)\n                            : className\n                    )\n                }\n                {...props}\n            />\n        </SideSheetContext>\n    );\n};\n"],"mappings":";;;;;AASA,IAAa,IAAmB,EAAqC;CACjE,QAAQ;CACR,WAAW;AACf,CAAC,oCENY,KAAiD,EAC1D,cACA,eAAY,OACZ,YAAS,YACT,GAAG,QAGC,kBAAC,GAAD;CAAkB,OAAO;EAAE;EAAW;CAAO;WACzC,kBAAC,GAAD;EACI,kBAAgB;EAChB,eAAa;EACb,YAAY,MACR,EACI,EAAO,OACP,OAAO,KAAc,aACf,EAAU,CAAW,IACrB,CACV;EAEJ,GAAI;CAAM,CAAA;AAEA,CAAA"}