@raystack/apsara 1.0.0-rc.0 → 1.0.0-rc.1

package/dist/components/text/text.js

@@ -1,6 +1,5 @@
 import { jsx } from 'react/jsx-runtime';
 import { cva } from 'class-variance-authority';
-import { forwardRef } from 'react';
 import styles from './text.module.css.js';
 
 const textVariants = cva(styles.text, {
@@ -90,7 +89,7 @@ const textVariants = cva(styles.text, {
         }
     ]
 });
-const Text = forwardRef(({ className, size, variant, weight, transform, align, lineClamp, underline, strikeThrough, italic, as: Component = 'span', children, ...rest }, ref) => {
+function Text({ className, size, variant, weight, transform, align, lineClamp, underline, strikeThrough, italic, as: Component = 'span', children, ...rest }) {
     const textClassName = textVariants({
         size,
         className,
@@ -103,8 +102,10 @@ const Text = forwardRef(({ className, size, variant, weight, transform, align, l
         strikeThrough,
         italic
     });
-    return (jsx(Component, { ref: ref, className: textClassName, ...rest, children: children }));
-});
+    return (
+    // @ts-expect-error polymorphic ref
+    jsx(Component, { className: textClassName, ...rest, children: children }));
+}
 Text.displayName = 'Text';
 
 export { Text, textVariants };

package/dist/components/text/text.js.map

@@ -1 +1 @@
-{"version":3,"file":"text.js","sources":["../../../components/text/text.tsx"],"sourcesContent":["import { type VariantProps, cva } from 'class-variance-authority';\nimport { ComponentPropsWithoutRef, forwardRef } from 'react';\nimport styles from './text.module.css';\n\nexport const textVariants = cva(styles.text, {\n  variants: {\n    variant: {\n      primary: styles['text-primary'],\n      secondary: styles['text-secondary'],\n      tertiary: styles['text-tertiary'],\n      emphasis: styles['text-emphasis'],\n      accent: styles['text-accent'],\n      attention: styles['text-attention'],\n      danger: styles['text-danger'],\n      success: styles['text-success']\n    },\n    size: {\n      micro: styles['text-micro'],\n      mini: styles['text-mini'],\n      small: styles['text-small'],\n      regular: styles['text-regular'],\n      large: styles['text-large'],\n      1: styles['text-1'],\n      2: styles['text-2'],\n      3: styles['text-3'],\n      4: styles['text-4'],\n      5: styles['text-5'],\n      6: styles['text-6'],\n      7: styles['text-7'],\n      8: styles['text-8'],\n      9: styles['text-9'],\n      10: styles['text-10']\n    },\n    weight: {\n      regular: styles['text-weight-regular'],\n      medium: styles['text-weight-medium'],\n      bold: styles['text-weight-bold'],\n      bolder: styles['text-weight-bolder'],\n      normal: styles['text-weight-normal'],\n      lighter: styles['text-weight-lighter'],\n      100: styles['text-weight-100'],\n      200: styles['text-weight-200'],\n      300: styles['text-weight-300'],\n      400: styles['text-weight-400'],\n      500: styles['text-weight-500'],\n      600: styles['text-weight-600'],\n      700: styles['text-weight-700'],\n      800: styles['text-weight-800'],\n      900: styles['text-weight-900']\n    },\n    transform: {\n      capitalize: styles['text-transform-capitalize'],\n      uppercase: styles['text-transform-uppercase'],\n      lowercase: styles['text-transform-lowercase']\n    },\n    align: {\n      center: styles['text-align-center'],\n      start: styles['text-align-start'],\n      end: styles['text-align-end'],\n      justify: styles['text-align-justify']\n    },\n    lineClamp: {\n      1: [styles['text-line-clamp'], styles['text-line-clamp-1']],\n      2: [styles['text-line-clamp'], styles['text-line-clamp-2']],\n      3: [styles['text-line-clamp'], styles['text-line-clamp-3']],\n      4: [styles['text-line-clamp'], styles['text-line-clamp-4']],\n      5: [styles['text-line-clamp'], styles['text-line-clamp-5']]\n    },\n    underline: {\n      true: styles['text-underline']\n    },\n    strikeThrough: {\n      true: styles['text-strike-through']\n    },\n    italic: {\n      true: styles['text-italic']\n    }\n  },\n  defaultVariants: {\n    variant: 'primary',\n    size: 'small',\n    weight: 'regular'\n  },\n  compoundVariants: [\n    {\n      strikeThrough: true,\n      underline: true,\n      className: styles['text-italic-strike-through']\n    }\n  ]\n});\n\nexport type TextBaseProps = VariantProps<typeof textVariants> & {\n  /**\n   * @remarks Use \"micro\" | \"mini\" | \"small\" | \"regular\" | \"large\"\n   */\n  size?:\n    | 1\n    | 2\n    | 3\n    | 4\n    | 5\n    | 6\n    | 7\n    | 8\n    | 9\n    | 10\n    | 'micro'\n    | 'mini'\n    | 'small'\n    | 'regular'\n    | 'large';\n  /**\n   * @remarks Use \"regular\" | \"medium\"\n   */\n  weight?:\n    | 'regular'\n    | 'medium'\n    | 'bold'\n    | 'bolder'\n    | 'normal'\n    | 'lighter'\n    | 100\n    | 200\n    | 300\n    | 400\n    | 500\n    | 600\n    | 700\n    | 800\n    | 900;\n};\n\ntype TextSpanProps = { as?: 'span' } & ComponentPropsWithoutRef<'span'>;\ntype TextDivProps = { as: 'div' } & ComponentPropsWithoutRef<'div'>;\ntype TextLabelProps = { as: 'label' } & ComponentPropsWithoutRef<'label'>;\ntype TextPProps = { as: 'p' } & ComponentPropsWithoutRef<'p'>;\ntype TextAProps = { as: 'a' } & ComponentPropsWithoutRef<'a'>;\nexport type TextProps = TextBaseProps &\n  (TextSpanProps | TextDivProps | TextLabelProps | TextPProps | TextAProps);\ntype TextRef =\n  | HTMLSpanElement\n  | HTMLParagraphElement\n  | HTMLDivElement\n  | HTMLLabelElement\n  | HTMLAnchorElement;\n\nexport const Text = forwardRef<TextRef, TextProps>(\n  (\n    {\n      className,\n      size,\n      variant,\n      weight,\n      transform,\n      align,\n      lineClamp,\n      underline,\n      strikeThrough,\n      italic,\n      as: Component = 'span',\n      children,\n      ...rest\n    },\n    ref\n  ) => {\n    const textClassName = textVariants({\n      size,\n      className,\n      weight,\n      variant,\n      transform,\n      align,\n      lineClamp,\n      underline,\n      strikeThrough,\n      italic\n    });\n\n    return (\n      <Component ref={ref} className={textClassName} {...rest}>\n        {children}\n      </Component>\n    );\n  }\n);\n\nText.displayName = 'Text';\n"],"names":["_jsx"],"mappings":"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"}
+{"version":3,"file":"text.js","sources":["../../../components/text/text.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport { ComponentProps } from 'react';\nimport styles from './text.module.css';\n\nexport const textVariants = cva(styles.text, {\n  variants: {\n    variant: {\n      primary: styles['text-primary'],\n      secondary: styles['text-secondary'],\n      tertiary: styles['text-tertiary'],\n      emphasis: styles['text-emphasis'],\n      accent: styles['text-accent'],\n      attention: styles['text-attention'],\n      danger: styles['text-danger'],\n      success: styles['text-success']\n    },\n    size: {\n      micro: styles['text-micro'],\n      mini: styles['text-mini'],\n      small: styles['text-small'],\n      regular: styles['text-regular'],\n      large: styles['text-large'],\n      1: styles['text-1'],\n      2: styles['text-2'],\n      3: styles['text-3'],\n      4: styles['text-4'],\n      5: styles['text-5'],\n      6: styles['text-6'],\n      7: styles['text-7'],\n      8: styles['text-8'],\n      9: styles['text-9'],\n      10: styles['text-10']\n    },\n    weight: {\n      regular: styles['text-weight-regular'],\n      medium: styles['text-weight-medium'],\n      bold: styles['text-weight-bold'],\n      bolder: styles['text-weight-bolder'],\n      normal: styles['text-weight-normal'],\n      lighter: styles['text-weight-lighter'],\n      100: styles['text-weight-100'],\n      200: styles['text-weight-200'],\n      300: styles['text-weight-300'],\n      400: styles['text-weight-400'],\n      500: styles['text-weight-500'],\n      600: styles['text-weight-600'],\n      700: styles['text-weight-700'],\n      800: styles['text-weight-800'],\n      900: styles['text-weight-900']\n    },\n    transform: {\n      capitalize: styles['text-transform-capitalize'],\n      uppercase: styles['text-transform-uppercase'],\n      lowercase: styles['text-transform-lowercase']\n    },\n    align: {\n      center: styles['text-align-center'],\n      start: styles['text-align-start'],\n      end: styles['text-align-end'],\n      justify: styles['text-align-justify']\n    },\n    lineClamp: {\n      1: [styles['text-line-clamp'], styles['text-line-clamp-1']],\n      2: [styles['text-line-clamp'], styles['text-line-clamp-2']],\n      3: [styles['text-line-clamp'], styles['text-line-clamp-3']],\n      4: [styles['text-line-clamp'], styles['text-line-clamp-4']],\n      5: [styles['text-line-clamp'], styles['text-line-clamp-5']]\n    },\n    underline: {\n      true: styles['text-underline']\n    },\n    strikeThrough: {\n      true: styles['text-strike-through']\n    },\n    italic: {\n      true: styles['text-italic']\n    }\n  },\n  defaultVariants: {\n    variant: 'primary',\n    size: 'small',\n    weight: 'regular'\n  },\n  compoundVariants: [\n    {\n      strikeThrough: true,\n      underline: true,\n      className: styles['text-italic-strike-through']\n    }\n  ]\n});\n\nexport type TextBaseProps = VariantProps<typeof textVariants> & {\n  /**\n   * @remarks Use \"micro\" | \"mini\" | \"small\" | \"regular\" | \"large\"\n   */\n  size?:\n    | 1\n    | 2\n    | 3\n    | 4\n    | 5\n    | 6\n    | 7\n    | 8\n    | 9\n    | 10\n    | 'micro'\n    | 'mini'\n    | 'small'\n    | 'regular'\n    | 'large';\n  /**\n   * @remarks Use \"regular\" | \"medium\"\n   */\n  weight?:\n    | 'regular'\n    | 'medium'\n    | 'bold'\n    | 'bolder'\n    | 'normal'\n    | 'lighter'\n    | 100\n    | 200\n    | 300\n    | 400\n    | 500\n    | 600\n    | 700\n    | 800\n    | 900;\n};\n\ntype TextSpanProps = { as?: 'span' } & ComponentProps<'span'>;\ntype TextDivProps = { as: 'div' } & ComponentProps<'div'>;\ntype TextLabelProps = { as: 'label' } & ComponentProps<'label'>;\ntype TextPProps = { as: 'p' } & ComponentProps<'p'>;\ntype TextAProps = { as: 'a' } & ComponentProps<'a'>;\nexport type TextProps = TextBaseProps &\n  (TextSpanProps | TextDivProps | TextLabelProps | TextPProps | TextAProps);\n\nexport function Text({\n  className,\n  size,\n  variant,\n  weight,\n  transform,\n  align,\n  lineClamp,\n  underline,\n  strikeThrough,\n  italic,\n  as: Component = 'span',\n  children,\n  ...rest\n}: TextProps) {\n  const textClassName = textVariants({\n    size,\n    className,\n    weight,\n    variant,\n    transform,\n    align,\n    lineClamp,\n    underline,\n    strikeThrough,\n    italic\n  });\n\n  return (\n    // @ts-expect-error polymorphic ref\n    <Component className={textClassName} {...rest}>\n      {children}\n    </Component>\n  );\n}\n\nText.displayName = 'Text';\n"],"names":["_jsx"],"mappings":";;;;MAIa,YAAY,GAAG,GAAG,CAAC,MAAM,CAAC,IAAI,EAAE;AAC3C,IAAA,QAAQ,EAAE;AACR,QAAA,OAAO,EAAE;AACP,YAAA,OAAO,EAAE,MAAM,CAAC,cAAc,CAAC;AAC/B,YAAA,SAAS,EAAE,MAAM,CAAC,gBAAgB,CAAC;AACnC,YAAA,QAAQ,EAAE,MAAM,CAAC,eAAe,CAAC;AACjC,YAAA,QAAQ,EAAE,MAAM,CAAC,eAAe,CAAC;AACjC,YAAA,MAAM,EAAE,MAAM,CAAC,aAAa,CAAC;AAC7B,YAAA,SAAS,EAAE,MAAM,CAAC,gBAAgB,CAAC;AACnC,YAAA,MAAM,EAAE,MAAM,CAAC,aAAa,CAAC;AAC7B,YAAA,OAAO,EAAE,MAAM,CAAC,cAAc,CAAC;AAChC,SAAA;AACD,QAAA,IAAI,EAAE;AACJ,YAAA,KAAK,EAAE,MAAM,CAAC,YAAY,CAAC;AAC3B,YAAA,IAAI,EAAE,MAAM,CAAC,WAAW,CAAC;AACzB,YAAA,KAAK,EAAE,MAAM,CAAC,YAAY,CAAC;AAC3B,YAAA,OAAO,EAAE,MAAM,CAAC,cAAc,CAAC;AAC/B,YAAA,KAAK,EAAE,MAAM,CAAC,YAAY,CAAC;AAC3B,YAAA,CAAC,EAAE,MAAM,CAAC,QAAQ,CAAC;AACnB,YAAA,CAAC,EAAE,MAAM,CAAC,QAAQ,CAAC;AACnB,YAAA,CAAC,EAAE,MAAM,CAAC,QAAQ,CAAC;AACnB,YAAA,CAAC,EAAE,MAAM,CAAC,QAAQ,CAAC;AACnB,YAAA,CAAC,EAAE,MAAM,CAAC,QAAQ,CAAC;AACnB,YAAA,CAAC,EAAE,MAAM,CAAC,QAAQ,CAAC;AACnB,YAAA,CAAC,EAAE,MAAM,CAAC,QAAQ,CAAC;AACnB,YAAA,CAAC,EAAE,MAAM,CAAC,QAAQ,CAAC;AACnB,YAAA,CAAC,EAAE,MAAM,CAAC,QAAQ,CAAC;AACnB,YAAA,EAAE,EAAE,MAAM,CAAC,SAAS,CAAC;AACtB,SAAA;AACD,QAAA,MAAM,EAAE;AACN,YAAA,OAAO,EAAE,MAAM,CAAC,qBAAqB,CAAC;AACtC,YAAA,MAAM,EAAE,MAAM,CAAC,oBAAoB,CAAC;AACpC,YAAA,IAAI,EAAE,MAAM,CAAC,kBAAkB,CAAC;AAChC,YAAA,MAAM,EAAE,MAAM,CAAC,oBAAoB,CAAC;AACpC,YAAA,MAAM,EAAE,MAAM,CAAC,oBAAoB,CAAC;AACpC,YAAA,OAAO,EAAE,MAAM,CAAC,qBAAqB,CAAC;AACtC,YAAA,GAAG,EAAE,MAAM,CAAC,iBAAiB,CAAC;AAC9B,YAAA,GAAG,EAAE,MAAM,CAAC,iBAAiB,CAAC;AAC9B,YAAA,GAAG,EAAE,MAAM,CAAC,iBAAiB,CAAC;AAC9B,YAAA,GAAG,EAAE,MAAM,CAAC,iBAAiB,CAAC;AAC9B,YAAA,GAAG,EAAE,MAAM,CAAC,iBAAiB,CAAC;AAC9B,YAAA,GAAG,EAAE,MAAM,CAAC,iBAAiB,CAAC;AAC9B,YAAA,GAAG,EAAE,MAAM,CAAC,iBAAiB,CAAC;AAC9B,YAAA,GAAG,EAAE,MAAM,CAAC,iBAAiB,CAAC;AAC9B,YAAA,GAAG,EAAE,MAAM,CAAC,iBAAiB,CAAC;AAC/B,SAAA;AACD,QAAA,SAAS,EAAE;AACT,YAAA,UAAU,EAAE,MAAM,CAAC,2BAA2B,CAAC;AAC/C,YAAA,SAAS,EAAE,MAAM,CAAC,0BAA0B,CAAC;AAC7C,YAAA,SAAS,EAAE,MAAM,CAAC,0BAA0B,CAAC;AAC9C,SAAA;AACD,QAAA,KAAK,EAAE;AACL,YAAA,MAAM,EAAE,MAAM,CAAC,mBAAmB,CAAC;AACnC,YAAA,KAAK,EAAE,MAAM,CAAC,kBAAkB,CAAC;AACjC,YAAA,GAAG,EAAE,MAAM,CAAC,gBAAgB,CAAC;AAC7B,YAAA,OAAO,EAAE,MAAM,CAAC,oBAAoB,CAAC;AACtC,SAAA;AACD,QAAA,SAAS,EAAE;YACT,CAAC,EAAE,CAAC,MAAM,CAAC,iBAAiB,CAAC,EAAE,MAAM,CAAC,mBAAmB,CAAC,CAAC;YAC3D,CAAC,EAAE,CAAC,MAAM,CAAC,iBAAiB,CAAC,EAAE,MAAM,CAAC,mBAAmB,CAAC,CAAC;YAC3D,CAAC,EAAE,CAAC,MAAM,CAAC,iBAAiB,CAAC,EAAE,MAAM,CAAC,mBAAmB,CAAC,CAAC;YAC3D,CAAC,EAAE,CAAC,MAAM,CAAC,iBAAiB,CAAC,EAAE,MAAM,CAAC,mBAAmB,CAAC,CAAC;YAC3D,CAAC,EAAE,CAAC,MAAM,CAAC,iBAAiB,CAAC,EAAE,MAAM,CAAC,mBAAmB,CAAC,CAAC;AAC5D,SAAA;AACD,QAAA,SAAS,EAAE;AACT,YAAA,IAAI,EAAE,MAAM,CAAC,gBAAgB,CAAC;AAC/B,SAAA;AACD,QAAA,aAAa,EAAE;AACb,YAAA,IAAI,EAAE,MAAM,CAAC,qBAAqB,CAAC;AACpC,SAAA;AACD,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,MAAM,CAAC,aAAa,CAAC;AAC5B,SAAA;AACF,KAAA;AACD,IAAA,eAAe,EAAE;AACf,QAAA,OAAO,EAAE,SAAS;AAClB,QAAA,IAAI,EAAE,OAAO;AACb,QAAA,MAAM,EAAE,SAAS;AAClB,KAAA;AACD,IAAA,gBAAgB,EAAE;AAChB,QAAA;AACE,YAAA,aAAa,EAAE,IAAI;AACnB,YAAA,SAAS,EAAE,IAAI;AACf,YAAA,SAAS,EAAE,MAAM,CAAC,4BAA4B,CAAC;AAChD,SAAA;AACF,KAAA;AACF,CAAA,EAAE;AAmDa,SAAA,IAAI,CAAC,EACnB,SAAS,EACT,IAAI,EACJ,OAAO,EACP,MAAM,EACN,SAAS,EACT,KAAK,EACL,SAAS,EACT,SAAS,EACT,aAAa,EACb,MAAM,EACN,EAAE,EAAE,SAAS,GAAG,MAAM,EACtB,QAAQ,EACR,GAAG,IAAI,EACG,EAAA;IACV,MAAM,aAAa,GAAG,YAAY,CAAC;QACjC,IAAI;QACJ,SAAS;QACT,MAAM;QACN,OAAO;QACP,SAAS;QACT,KAAK;QACL,SAAS;QACT,SAAS;QACT,aAAa;QACb,MAAM;AACP,KAAA,CAAC,CAAC;IAEH;;IAEEA,GAAC,CAAA,SAAS,EAAC,EAAA,SAAS,EAAE,aAAa,EAAM,GAAA,IAAI,EAC1C,QAAA,EAAA,QAAQ,EACC,CAAA,EACZ;AACJ,CAAC;AAED,IAAI,CAAC,WAAW,GAAG,MAAM;;;;"}

package/dist/components/text-area/text-area.cjs

@@ -4,29 +4,9 @@
 var jsxRuntime = require('react/jsx-runtime');
 var reactIcons = require('@radix-ui/react-icons');
 var classVarianceAuthority = require('class-variance-authority');
-var React = require('react');
 var tooltip = require('../tooltip/tooltip.cjs');
 var textArea_module = require('./text-area.module.css.cjs');
 
-function _interopNamespaceDefault(e) {
-    var n = Object.create(null);
-    if (e) {
-        Object.keys(e).forEach(function (k) {
-            if (k !== 'default') {
-                var d = Object.getOwnPropertyDescriptor(e, k);
-                Object.defineProperty(n, k, d.get ? d : {
-                    enumerable: true,
-                    get: function () { return e[k]; }
-                });
-            }
-        });
-    }
-    n.default = e;
-    return Object.freeze(n);
-}
-
-var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
-
 const textArea = classVarianceAuthority.cva(textArea_module.default.textarea, {
     variants: {
         error: {
@@ -34,9 +14,9 @@ const textArea = classVarianceAuthority.cva(textArea_module.default.textarea, {
         }
     }
 });
-const TextArea = React__namespace.forwardRef(({ className, style, label, required, infoTooltip, helperText, error, disabled, width = '100%', value, onChange, placeholder, ...props }, ref) => {
-    return (jsxRuntime.jsxs("div", { className: textArea_module.default.container, style: { width }, children: [label && (jsxRuntime.jsxs("div", { className: textArea_module.default.labelContainer, children: [jsxRuntime.jsxs("label", { className: classVarianceAuthority.cx(textArea_module.default.label, disabled && textArea_module.default.labelDisabled), children: [label, !required && jsxRuntime.jsx("span", { className: textArea_module.default.optional, children: "(optional)" })] }), infoTooltip && (jsxRuntime.jsx(tooltip.Tooltip, { message: infoTooltip, side: 'right', children: jsxRuntime.jsx("span", { className: textArea_module.default.helpIcon, children: jsxRuntime.jsx(reactIcons.InfoCircledIcon, {}) }) }))] })), jsxRuntime.jsx("textarea", { className: classVarianceAuthority.cx(textArea({ error }), disabled && textArea_module.default.disabled, className), ref: ref, value: value, onChange: onChange, required: required, disabled: disabled, placeholder: placeholder, style: style, ...props }), helperText && (jsxRuntime.jsx("span", { className: classVarianceAuthority.cx(textArea_module.default.helperText, error && textArea_module.default.helperTextError, disabled && textArea_module.default.helperTextDisabled), children: helperText }))] }));
-});
+function TextArea({ className, style, label, required, infoTooltip, helperText, error, disabled, width = '100%', value, onChange, placeholder, ...props }) {
+    return (jsxRuntime.jsxs("div", { className: textArea_module.default.container, style: { width }, children: [label && (jsxRuntime.jsxs("div", { className: textArea_module.default.labelContainer, children: [jsxRuntime.jsxs("label", { className: classVarianceAuthority.cx(textArea_module.default.label, disabled && textArea_module.default.labelDisabled), children: [label, !required && jsxRuntime.jsx("span", { className: textArea_module.default.optional, children: "(optional)" })] }), infoTooltip && (jsxRuntime.jsx(tooltip.Tooltip, { message: infoTooltip, side: 'right', children: jsxRuntime.jsx("span", { className: textArea_module.default.helpIcon, children: jsxRuntime.jsx(reactIcons.InfoCircledIcon, {}) }) }))] })), jsxRuntime.jsx("textarea", { className: classVarianceAuthority.cx(textArea({ error }), disabled && textArea_module.default.disabled, className), value: value, onChange: onChange, required: required, disabled: disabled, placeholder: placeholder, style: style, ...props }), helperText && (jsxRuntime.jsx("span", { className: classVarianceAuthority.cx(textArea_module.default.helperText, error && textArea_module.default.helperTextError, disabled && textArea_module.default.helperTextDisabled), children: helperText }))] }));
+}
 TextArea.displayName = 'TextArea';
 
 exports.TextArea = TextArea;

package/dist/components/text-area/text-area.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"text-area.cjs","sources":["../../../components/text-area/text-area.tsx"],"sourcesContent":["'use client';\n\nimport { InfoCircledIcon } from '@radix-ui/react-icons';\nimport { cva, cx } from 'class-variance-authority';\nimport * as React from 'react';\nimport { HTMLAttributes, PropsWithChildren } from 'react';\nimport { Tooltip } from '../tooltip';\n\nimport styles from './text-area.module.css';\n\nconst textArea = cva(styles.textarea, {\n  variants: {\n    error: {\n      true: styles.error\n    }\n  }\n});\n\nexport interface TextAreaProps\n  extends PropsWithChildren<HTMLAttributes<HTMLTextAreaElement>> {\n  label?: string;\n  required?: boolean;\n  infoTooltip?: string;\n  helperText?: string;\n  error?: boolean;\n  disabled?: boolean;\n  width?: string | number;\n  value?: string;\n  onChange?: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;\n}\n\nconst TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(\n  (\n    {\n      className,\n      style,\n      label,\n      required,\n      infoTooltip,\n      helperText,\n      error,\n      disabled,\n      width = '100%',\n      value,\n      onChange,\n      placeholder,\n      ...props\n    },\n    ref\n  ) => {\n    return (\n      <div className={styles.container} style={{ width }}>\n        {label && (\n          <div className={styles.labelContainer}>\n            <label\n              className={cx(styles.label, disabled && styles.labelDisabled)}\n            >\n              {label}\n              {!required && <span className={styles.optional}>(optional)</span>}\n            </label>\n            {infoTooltip && (\n              <Tooltip message={infoTooltip} side='right'>\n                <span className={styles.helpIcon}>\n                  <InfoCircledIcon />\n                </span>\n              </Tooltip>\n            )}\n          </div>\n        )}\n        <textarea\n          className={cx(\n            textArea({ error }),\n            disabled && styles.disabled,\n            className\n          )}\n          ref={ref}\n          value={value}\n          onChange={onChange}\n          required={required}\n          disabled={disabled}\n          placeholder={placeholder}\n          style={style}\n          {...props}\n        />\n        {helperText && (\n          <span\n            className={cx(\n              styles.helperText,\n              error && styles.helperTextError,\n              disabled && styles.helperTextDisabled\n            )}\n          >\n            {helperText}\n          </span>\n        )}\n      </div>\n    );\n  }\n);\n\nTextArea.displayName = 'TextArea';\n\nexport { TextArea };\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAUA;AACE;AACE;;AAEC;AACF;AACF;AAeD;AAmBI;AA+CF;AAGF;;"}
+{"version":3,"file":"text-area.cjs","sources":["../../../components/text-area/text-area.tsx"],"sourcesContent":["'use client';\n\nimport { InfoCircledIcon } from '@radix-ui/react-icons';\nimport { cva, cx } from 'class-variance-authority';\nimport { ChangeEvent, ComponentProps } from 'react';\nimport { Tooltip } from '../tooltip';\n\nimport styles from './text-area.module.css';\n\nconst textArea = cva(styles.textarea, {\n  variants: {\n    error: {\n      true: styles.error\n    }\n  }\n});\n\nexport interface TextAreaProps extends ComponentProps<'textarea'> {\n  label?: string;\n  required?: boolean;\n  infoTooltip?: string;\n  helperText?: string;\n  error?: boolean;\n  disabled?: boolean;\n  width?: string | number;\n  value?: string;\n  onChange?: (event: ChangeEvent<HTMLTextAreaElement>) => void;\n}\n\nfunction TextArea({\n  className,\n  style,\n  label,\n  required,\n  infoTooltip,\n  helperText,\n  error,\n  disabled,\n  width = '100%',\n  value,\n  onChange,\n  placeholder,\n  ...props\n}: TextAreaProps) {\n  return (\n    <div className={styles.container} style={{ width }}>\n      {label && (\n        <div className={styles.labelContainer}>\n          <label className={cx(styles.label, disabled && styles.labelDisabled)}>\n            {label}\n            {!required && <span className={styles.optional}>(optional)</span>}\n          </label>\n          {infoTooltip && (\n            <Tooltip message={infoTooltip} side='right'>\n              <span className={styles.helpIcon}>\n                <InfoCircledIcon />\n              </span>\n            </Tooltip>\n          )}\n        </div>\n      )}\n      <textarea\n        className={cx(\n          textArea({ error }),\n          disabled && styles.disabled,\n          className\n        )}\n        value={value}\n        onChange={onChange}\n        required={required}\n        disabled={disabled}\n        placeholder={placeholder}\n        style={style}\n        {...props}\n      />\n      {helperText && (\n        <span\n          className={cx(\n            styles.helperText,\n            error && styles.helperTextError,\n            disabled && styles.helperTextDisabled\n          )}\n        >\n          {helperText}\n        </span>\n      )}\n    </div>\n  );\n}\n\nTextArea.displayName = 'TextArea';\n\nexport { TextArea };\n"],"names":[],"mappings":";;;;;;;;;AASA;AACE;AACE;;AAEC;AACF;AACF;AAcD;AAeE;AA4CF;AAEA;;"}

package/dist/components/text-area/text-area.d.ts

@@ -1,6 +1,5 @@
-import * as React from 'react';
-import { HTMLAttributes, PropsWithChildren } from 'react';
-export interface TextAreaProps extends PropsWithChildren<HTMLAttributes<HTMLTextAreaElement>> {
+import { ChangeEvent, ComponentProps } from 'react';
+export interface TextAreaProps extends ComponentProps<'textarea'> {
     label?: string;
     required?: boolean;
     infoTooltip?: string;
@@ -9,8 +8,11 @@ export interface TextAreaProps extends PropsWithChildren<HTMLAttributes<HTMLText
     disabled?: boolean;
     width?: string | number;
     value?: string;
-    onChange?: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;
+    onChange?: (event: ChangeEvent<HTMLTextAreaElement>) => void;
+}
+declare function TextArea({ className, style, label, required, infoTooltip, helperText, error, disabled, width, value, onChange, placeholder, ...props }: TextAreaProps): import("react/jsx-runtime").JSX.Element;
+declare namespace TextArea {
+    var displayName: string;
 }
-declare const TextArea: React.ForwardRefExoticComponent<TextAreaProps & React.RefAttributes<HTMLTextAreaElement>>;
 export { TextArea };
 //# sourceMappingURL=text-area.d.ts.map

package/dist/components/text-area/text-area.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"text-area.d.ts","sourceRoot":"","sources":["../../../components/text-area/text-area.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,cAAc,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAa1D,MAAM,WAAW,aACf,SAAQ,iBAAiB,CAAC,cAAc,CAAC,mBAAmB,CAAC,CAAC;IAC9D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,WAAW,CAAC,mBAAmB,CAAC,KAAK,IAAI,CAAC;CACpE;AAED,QAAA,MAAM,QAAQ,2FAmEb,CAAC;AAIF,OAAO,EAAE,QAAQ,EAAE,CAAC"}
+{"version":3,"file":"text-area.d.ts","sourceRoot":"","sources":["../../../components/text-area/text-area.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAapD,MAAM,WAAW,aAAc,SAAQ,cAAc,CAAC,UAAU,CAAC;IAC/D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,mBAAmB,CAAC,KAAK,IAAI,CAAC;CAC9D;AAED,iBAAS,QAAQ,CAAC,EAChB,SAAS,EACT,KAAK,EACL,KAAK,EACL,QAAQ,EACR,WAAW,EACX,UAAU,EACV,KAAK,EACL,QAAQ,EACR,KAAc,EACd,KAAK,EACL,QAAQ,EACR,WAAW,EACX,GAAG,KAAK,EACT,EAAE,aAAa,2CA6Cf;kBA3DQ,QAAQ;;;AA+DjB,OAAO,EAAE,QAAQ,EAAE,CAAC"}

package/dist/components/text-area/text-area.js

@@ -2,7 +2,6 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { InfoCircledIcon } from '@radix-ui/react-icons';
 import { cva, cx } from 'class-variance-authority';
-import * as React from 'react';
 import { Tooltip } from '../tooltip/tooltip.js';
 import styles from './text-area.module.css.js';
 
@@ -13,9 +12,9 @@ const textArea = cva(styles.textarea, {
         }
     }
 });
-const TextArea = React.forwardRef(({ className, style, label, required, infoTooltip, helperText, error, disabled, width = '100%', value, onChange, placeholder, ...props }, ref) => {
-    return (jsxs("div", { className: styles.container, style: { width }, children: [label && (jsxs("div", { className: styles.labelContainer, children: [jsxs("label", { className: cx(styles.label, disabled && styles.labelDisabled), children: [label, !required && jsx("span", { className: styles.optional, children: "(optional)" })] }), infoTooltip && (jsx(Tooltip, { message: infoTooltip, side: 'right', children: jsx("span", { className: styles.helpIcon, children: jsx(InfoCircledIcon, {}) }) }))] })), jsx("textarea", { className: cx(textArea({ error }), disabled && styles.disabled, className), ref: ref, value: value, onChange: onChange, required: required, disabled: disabled, placeholder: placeholder, style: style, ...props }), helperText && (jsx("span", { className: cx(styles.helperText, error && styles.helperTextError, disabled && styles.helperTextDisabled), children: helperText }))] }));
-});
+function TextArea({ className, style, label, required, infoTooltip, helperText, error, disabled, width = '100%', value, onChange, placeholder, ...props }) {
+    return (jsxs("div", { className: styles.container, style: { width }, children: [label && (jsxs("div", { className: styles.labelContainer, children: [jsxs("label", { className: cx(styles.label, disabled && styles.labelDisabled), children: [label, !required && jsx("span", { className: styles.optional, children: "(optional)" })] }), infoTooltip && (jsx(Tooltip, { message: infoTooltip, side: 'right', children: jsx("span", { className: styles.helpIcon, children: jsx(InfoCircledIcon, {}) }) }))] })), jsx("textarea", { className: cx(textArea({ error }), disabled && styles.disabled, className), value: value, onChange: onChange, required: required, disabled: disabled, placeholder: placeholder, style: style, ...props }), helperText && (jsx("span", { className: cx(styles.helperText, error && styles.helperTextError, disabled && styles.helperTextDisabled), children: helperText }))] }));
+}
 TextArea.displayName = 'TextArea';
 
 export { TextArea };

package/dist/components/text-area/text-area.js.map

@@ -1 +1 @@
-{"version":3,"file":"text-area.js","sources":["../../../components/text-area/text-area.tsx"],"sourcesContent":["'use client';\n\nimport { InfoCircledIcon } from '@radix-ui/react-icons';\nimport { cva, cx } from 'class-variance-authority';\nimport * as React from 'react';\nimport { HTMLAttributes, PropsWithChildren } from 'react';\nimport { Tooltip } from '../tooltip';\n\nimport styles from './text-area.module.css';\n\nconst textArea = cva(styles.textarea, {\n  variants: {\n    error: {\n      true: styles.error\n    }\n  }\n});\n\nexport interface TextAreaProps\n  extends PropsWithChildren<HTMLAttributes<HTMLTextAreaElement>> {\n  label?: string;\n  required?: boolean;\n  infoTooltip?: string;\n  helperText?: string;\n  error?: boolean;\n  disabled?: boolean;\n  width?: string | number;\n  value?: string;\n  onChange?: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;\n}\n\nconst TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(\n  (\n    {\n      className,\n      style,\n      label,\n      required,\n      infoTooltip,\n      helperText,\n      error,\n      disabled,\n      width = '100%',\n      value,\n      onChange,\n      placeholder,\n      ...props\n    },\n    ref\n  ) => {\n    return (\n      <div className={styles.container} style={{ width }}>\n        {label && (\n          <div className={styles.labelContainer}>\n            <label\n              className={cx(styles.label, disabled && styles.labelDisabled)}\n            >\n              {label}\n              {!required && <span className={styles.optional}>(optional)</span>}\n            </label>\n            {infoTooltip && (\n              <Tooltip message={infoTooltip} side='right'>\n                <span className={styles.helpIcon}>\n                  <InfoCircledIcon />\n                </span>\n              </Tooltip>\n            )}\n          </div>\n        )}\n        <textarea\n          className={cx(\n            textArea({ error }),\n            disabled && styles.disabled,\n            className\n          )}\n          ref={ref}\n          value={value}\n          onChange={onChange}\n          required={required}\n          disabled={disabled}\n          placeholder={placeholder}\n          style={style}\n          {...props}\n        />\n        {helperText && (\n          <span\n            className={cx(\n              styles.helperText,\n              error && styles.helperTextError,\n              disabled && styles.helperTextDisabled\n            )}\n          >\n            {helperText}\n          </span>\n        )}\n      </div>\n    );\n  }\n);\n\nTextArea.displayName = 'TextArea';\n\nexport { TextArea };\n"],"names":[],"mappings":";;;;;;;;AAUA;AACE;AACE;;AAEC;AACF;AACF;AAeD;AAmBI;AA+CF;AAGF;;"}
+{"version":3,"file":"text-area.js","sources":["../../../components/text-area/text-area.tsx"],"sourcesContent":["'use client';\n\nimport { InfoCircledIcon } from '@radix-ui/react-icons';\nimport { cva, cx } from 'class-variance-authority';\nimport { ChangeEvent, ComponentProps } from 'react';\nimport { Tooltip } from '../tooltip';\n\nimport styles from './text-area.module.css';\n\nconst textArea = cva(styles.textarea, {\n  variants: {\n    error: {\n      true: styles.error\n    }\n  }\n});\n\nexport interface TextAreaProps extends ComponentProps<'textarea'> {\n  label?: string;\n  required?: boolean;\n  infoTooltip?: string;\n  helperText?: string;\n  error?: boolean;\n  disabled?: boolean;\n  width?: string | number;\n  value?: string;\n  onChange?: (event: ChangeEvent<HTMLTextAreaElement>) => void;\n}\n\nfunction TextArea({\n  className,\n  style,\n  label,\n  required,\n  infoTooltip,\n  helperText,\n  error,\n  disabled,\n  width = '100%',\n  value,\n  onChange,\n  placeholder,\n  ...props\n}: TextAreaProps) {\n  return (\n    <div className={styles.container} style={{ width }}>\n      {label && (\n        <div className={styles.labelContainer}>\n          <label className={cx(styles.label, disabled && styles.labelDisabled)}>\n            {label}\n            {!required && <span className={styles.optional}>(optional)</span>}\n          </label>\n          {infoTooltip && (\n            <Tooltip message={infoTooltip} side='right'>\n              <span className={styles.helpIcon}>\n                <InfoCircledIcon />\n              </span>\n            </Tooltip>\n          )}\n        </div>\n      )}\n      <textarea\n        className={cx(\n          textArea({ error }),\n          disabled && styles.disabled,\n          className\n        )}\n        value={value}\n        onChange={onChange}\n        required={required}\n        disabled={disabled}\n        placeholder={placeholder}\n        style={style}\n        {...props}\n      />\n      {helperText && (\n        <span\n          className={cx(\n            styles.helperText,\n            error && styles.helperTextError,\n            disabled && styles.helperTextDisabled\n          )}\n        >\n          {helperText}\n        </span>\n      )}\n    </div>\n  );\n}\n\nTextArea.displayName = 'TextArea';\n\nexport { TextArea };\n"],"names":[],"mappings":";;;;;;;AASA;AACE;AACE;;AAEC;AACF;AACF;AAcD;AAeE;AA4CF;AAEA;;"}

package/dist/components/theme-provider/theme.cjs

@@ -10,13 +10,14 @@ const isServer = typeof window === 'undefined';
 const ThemeContext = React.createContext(undefined);
 const defaultContext = { setTheme: _ => { }, themes: [] };
 const useTheme = () => React.useContext(ThemeContext) ?? defaultContext;
-const ThemeProvider = props => {
+function ThemeProvider(props) {
     const context = React.useContext(ThemeContext);
     // Ignore nested context providers, just passthrough children
     if (context)
         return jsxRuntime.jsx(React.Fragment, { children: props.children });
     return jsxRuntime.jsx(Theme, { ...props });
-};
+}
+ThemeProvider.displayName = 'ThemeProvider';
 const defaultThemes = ['light', 'dark'];
 const Theme = ({ forcedTheme, disableTransitionOnChange = false, enableSystem = true, enableColorScheme = true, storageKey = 'theme', themes = defaultThemes, defaultTheme = enableSystem ? 'system' : 'light', attribute = 'data-theme', value, children, nonce, style = 'modern', accentColor = 'indigo', grayColor = 'gray' }) => {
     const [theme, setThemeState] = React.useState(() => getTheme(storageKey, defaultTheme));
@@ -134,7 +135,7 @@ const Theme = ({ forcedTheme, disableTransitionOnChange = false, enableSystem =
         accentColor,
         grayColor
     ]);
-    return (jsxRuntime.jsxs(ThemeContext.Provider, { value: providerValue, children: [jsxRuntime.jsx(ThemeScript, { forcedTheme,
+    return (jsxRuntime.jsxs(ThemeContext, { value: providerValue, children: [jsxRuntime.jsx(ThemeScript, { forcedTheme,
                 disableTransitionOnChange,
                 enableSystem,
                 enableColorScheme,

package/dist/components/theme-provider/theme.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"theme.cjs","sources":["../../../components/theme-provider/theme.tsx"],"sourcesContent":["'use client';\n\nimport React, {\n  createContext,\n  Fragment,\n  memo,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useState\n} from 'react';\n\nimport type { ThemeProviderProps, UseThemeProps } from './types';\n\nconst colorSchemes = ['light', 'dark'];\nconst MEDIA = '(prefers-color-scheme: dark)';\nconst isServer = typeof window === 'undefined';\nconst ThemeContext = createContext<UseThemeProps | undefined>(undefined);\nconst defaultContext: UseThemeProps = { setTheme: _ => {}, themes: [] };\n\nexport const useTheme = () => useContext(ThemeContext) ?? defaultContext;\n\nexport const ThemeProvider: React.FC<ThemeProviderProps> = props => {\n  const context = useContext(ThemeContext);\n\n  // Ignore nested context providers, just passthrough children\n  if (context) return <Fragment>{props.children}</Fragment>;\n  return <Theme {...props} />;\n};\n\nconst defaultThemes = ['light', 'dark'];\n\nconst Theme: React.FC<ThemeProviderProps> = ({\n  forcedTheme,\n  disableTransitionOnChange = false,\n  enableSystem = true,\n  enableColorScheme = true,\n  storageKey = 'theme',\n  themes = defaultThemes,\n  defaultTheme = enableSystem ? 'system' : 'light',\n  attribute = 'data-theme',\n  value,\n  children,\n  nonce,\n  style = 'modern',\n  accentColor = 'indigo',\n  grayColor = 'gray'\n}) => {\n  const [theme, setThemeState] = useState(() =>\n    getTheme(storageKey, defaultTheme)\n  );\n  const [resolvedTheme, setResolvedTheme] = useState(() =>\n    getTheme(storageKey)\n  );\n  const attrs = !value ? themes : Object.values(value);\n\n  const applyTheme = useCallback(\n    (theme: string) => {\n      let resolved = theme;\n      if (!resolved) return;\n\n      // If theme is system, resolve it before setting theme\n      if (theme === 'system' && enableSystem) {\n        resolved = getSystemTheme();\n      }\n\n      const name = value ? value[resolved] : resolved;\n      const enable = disableTransitionOnChange ? disableAnimation() : null;\n      const d = document.documentElement;\n\n      if (attribute === 'class') {\n        d.classList.remove(...attrs);\n\n        if (name) d.classList.add(name);\n      } else {\n        if (name) {\n          d.setAttribute(attribute, name);\n        } else {\n          d.removeAttribute(attribute);\n        }\n      }\n\n      d.setAttribute('data-style', style);\n      d.setAttribute('data-accent-color', accentColor);\n      d.setAttribute('data-gray-color', grayColor);\n\n      if (enableColorScheme) {\n        const fallback = colorSchemes.includes(defaultTheme)\n          ? defaultTheme\n          : null;\n        const colorScheme = colorSchemes.includes(resolved)\n          ? resolved\n          : fallback;\n        // @ts-ignore\n        d.style.colorScheme = colorScheme;\n      }\n\n      enable?.();\n    },\n    [\n      style,\n      accentColor,\n      grayColor,\n      attribute,\n      attrs,\n      value,\n      enableSystem,\n      enableColorScheme,\n      defaultTheme\n    ]\n  );\n\n  const setTheme = useCallback(\n    (theme: string) => {\n      setThemeState(theme);\n\n      // Save to storage\n      try {\n        localStorage.setItem(storageKey, theme);\n      } catch (e) {\n        // Unsupported\n      }\n    },\n    [forcedTheme]\n  );\n\n  const handleMediaQuery = useCallback(\n    (e: MediaQueryListEvent | MediaQueryList) => {\n      const resolved = getSystemTheme(e);\n      setResolvedTheme(resolved);\n\n      if (theme === 'system' && enableSystem && !forcedTheme) {\n        applyTheme('system');\n      }\n    },\n    [theme, forcedTheme]\n  );\n\n  // Always listen to System preference\n  useEffect(() => {\n    const media = window.matchMedia(MEDIA);\n\n    media.addEventListener('change', handleMediaQuery);\n    handleMediaQuery(media);\n\n    return () => media.removeEventListener('change', handleMediaQuery);\n  }, [handleMediaQuery]);\n\n  // localStorage event handling\n  useEffect(() => {\n    const handleStorage = (e: StorageEvent) => {\n      if (e.key !== storageKey) {\n        return;\n      }\n\n      // If default theme set, use it if localstorage === null (happens on local storage manual deletion)\n      const theme = e.newValue || defaultTheme;\n      setTheme(theme);\n    };\n\n    window.addEventListener('storage', handleStorage);\n    return () => window.removeEventListener('storage', handleStorage);\n  }, [setTheme]);\n\n  // Whenever theme or forcedTheme changes, apply it\n  useEffect(() => {\n    // @ts-ignore\n    applyTheme(forcedTheme ?? theme);\n  }, [forcedTheme, theme]);\n\n  const providerValue = useMemo(\n    () => ({\n      theme,\n      setTheme,\n      forcedTheme,\n      resolvedTheme: theme === 'system' ? resolvedTheme : theme,\n      themes: enableSystem ? [...themes, 'system'] : themes,\n      systemTheme: (enableSystem ? resolvedTheme : undefined) as\n        | 'light'\n        | 'dark'\n        | undefined,\n      style,\n      accentColor,\n      grayColor\n    }),\n    [\n      theme,\n      setTheme,\n      forcedTheme,\n      resolvedTheme,\n      enableSystem,\n      themes,\n      style,\n      accentColor,\n      grayColor\n    ]\n  );\n\n  return (\n    <ThemeContext.Provider value={providerValue}>\n      <ThemeScript\n        {...{\n          forcedTheme,\n          disableTransitionOnChange,\n          enableSystem,\n          enableColorScheme,\n          storageKey,\n          themes,\n          defaultTheme,\n          attribute,\n          value,\n          children,\n          attrs,\n          nonce,\n          style,\n          accentColor,\n          grayColor\n        }}\n      />\n      {children}\n    </ThemeContext.Provider>\n  );\n};\n\nconst ThemeScript = memo(\n  ({\n    forcedTheme,\n    storageKey,\n    attribute,\n    enableSystem,\n    enableColorScheme,\n    defaultTheme,\n    value,\n    attrs,\n    nonce,\n    style,\n    accentColor,\n    grayColor\n  }: ThemeProviderProps & { attrs: string[]; defaultTheme: string }) => {\n    const defaultSystem = defaultTheme === 'system';\n\n    // Code-golfing the amount of characters in the script\n    const optimization = (() => {\n      if (attribute === 'class') {\n        const removeClasses = `c.remove(${attrs\n          .map((t: string) => `'${t}'`)\n          .join(',')})`;\n\n        return `var d=document.documentElement,c=d.classList;${removeClasses};`;\n      } else {\n        return `var d=document.documentElement,n='${attribute}',s='setAttribute';`;\n      }\n    })();\n\n    const fallbackColorScheme = (() => {\n      if (!enableColorScheme) {\n        return '';\n      }\n\n      const fallback = colorSchemes.includes(defaultTheme)\n        ? defaultTheme\n        : null;\n\n      if (fallback) {\n        return `if(e==='light'||e==='dark'||!e)d.style.colorScheme=e||'${defaultTheme}'`;\n      } else {\n        return `if(e==='light'||e==='dark')d.style.colorScheme=e`;\n      }\n    })();\n\n    const updateDOM = (\n      name: string,\n      literal: boolean = false,\n      setColorScheme = true\n    ) => {\n      const resolvedName = value ? value[name] : name;\n      const val = literal ? name + `|| ''` : `'${resolvedName}'`;\n      let text = '';\n\n      // MUCH faster to set colorScheme alongside HTML attribute/class\n      // as it only incurs 1 style recalculation rather than 2\n      // This can save over 250ms of work for pages with big DOM\n      if (\n        enableColorScheme &&\n        setColorScheme &&\n        !literal &&\n        colorSchemes.includes(name)\n      ) {\n        text += `d.style.colorScheme = '${name}';`;\n      }\n\n      if (attribute === 'class') {\n        if (literal || resolvedName) {\n          text += `c.add(${val})`;\n        } else {\n          text += `null`;\n        }\n      } else {\n        if (resolvedName) {\n          text += `d[s](n,${val})`;\n        }\n      }\n\n      return text;\n    };\n\n    const scriptSrc = (() => {\n      if (forcedTheme) {\n        return `!function(){${optimization}${updateDOM(forcedTheme)};d.setAttribute('data-style','${style}');d.setAttribute('data-accent-color','${accentColor}');d.setAttribute('data-gray-color','${grayColor}');}()`;\n      }\n\n      if (enableSystem) {\n        return `!function(){try{${optimization}var e=localStorage.getItem('${storageKey}');if('system'===e||(!e&&${defaultSystem})){var t='${MEDIA}',m=window.matchMedia(t);if(m.media!==t||m.matches){${updateDOM(\n          'dark'\n        )}}else{${updateDOM('light')}}}else if(e){${\n          value ? `var x=${JSON.stringify(value)};` : ''\n        }${updateDOM(value ? `x[e]` : 'e', true)}}${\n          !defaultSystem\n            ? `else{` + updateDOM(defaultTheme, false, false) + '}'\n            : ''\n        }${fallbackColorScheme};d.setAttribute('data-style','${style}');d.setAttribute('data-accent-color','${accentColor}');d.setAttribute('data-gray-color','${grayColor}');}catch(e){}}()`;\n      }\n\n      return `!function(){try{${optimization}var e=localStorage.getItem('${storageKey}');if(e){${\n        value ? `var x=${JSON.stringify(value)};` : ''\n      }${updateDOM(value ? `x[e]` : 'e', true)}}else{${updateDOM(\n        defaultTheme,\n        false,\n        false\n      )};}${fallbackColorScheme};d.setAttribute('data-style','${style}');d.setAttribute('data-accent-color','${accentColor}');d.setAttribute('data-gray-color','${grayColor}');}catch(t){}}();`;\n    })();\n\n    return (\n      <script nonce={nonce} dangerouslySetInnerHTML={{ __html: scriptSrc }} />\n    );\n  },\n  // Never re-render this component\n  () => true\n);\n\n// Helpers\nconst getTheme = (key: string, fallback?: string) => {\n  if (isServer) return undefined;\n  let theme;\n  try {\n    theme = localStorage.getItem(key) || undefined;\n  } catch (e) {\n    // Unsupported\n  }\n  return theme || fallback;\n};\n\nconst disableAnimation = () => {\n  const css = document.createElement('style');\n  css.appendChild(\n    document.createTextNode(\n      `*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}`\n    )\n  );\n  document.head.appendChild(css);\n\n  return () => {\n    // Force restyle\n    (() => window.getComputedStyle(document.body))();\n\n    // Wait for next tick before removing\n    setTimeout(() => {\n      document.head.removeChild(css);\n    }, 1);\n  };\n};\n\nconst getSystemTheme = (e?: MediaQueryList | MediaQueryListEvent) => {\n  if (!e) e = window.matchMedia(MEDIA);\n  const isDark = e.matches;\n  const systemTheme = isDark ? 'dark' : 'light';\n  return systemTheme;\n};\n"],"names":[],"mappings":";;;;;;AAeA;AACA;AACA;AACA;AACA;AAEO;AAEM;AACX;;AAGA;AAAa;AACb;AACF;AAEA;AAEA;AAgBE;AAGA;AAGA;AAEA;;AAGI;;;AAGA;;;AAIA;AACA;AACA;AAEA;;AAGE;AAAU;;;;AAGR;;;AAEA;;;AAIJ;AACA;AACA;;AAGE;AACE;;AAEF;AACE;;;AAGF;;;AAIJ;;;;;;;;;;AAWC;AAGH;;;AAKI;AACE;;;;;AAIJ;AAIF;AAEI;;;;;AAMF;;;;AAQA;;;AAIF;;;AAIE;AACE;;;;AAKA;;AAEF;AAEA;;AAEF;;;;AAKE;AACF;AAEA;;;;;AAMI;;;;;AAQD;;;;;;;;;;AAWA;AAGH;;;;;;;;;;;;;;AAkBQ;AAMV;AAEA;AAeI;;AAGA;AACE;;;AAGK;;;;;;;AAQP;;AAEI;;AAGF;AACE;;;;;;AAMA;;;AAIJ;AAKE;AACA;;;;;AAMA;;AAGE;AACA;AAEA;;AAGF;AACE;AACE;;;;;;;;AAMA;;;AAIJ;AACF;AAEA;;AAEI;;;;AAUI;;;;;AAcR;AAGF;AACA;AACA;AAGF;AACA;AACE;AAAc;AACd;AACA;;;;;;;AAMF;AAEA;;;AAOE;AAEA;;AAEE;;;AAIE;;AAEJ;AACF;AAEA;AACE;AAAQ;AACR;;AAEA;AACF;;;"}
+{"version":3,"file":"theme.cjs","sources":["../../../components/theme-provider/theme.tsx"],"sourcesContent":["'use client';\n\nimport {\n  createContext,\n  Fragment,\n  memo,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useState\n} from 'react';\n\nimport type { ThemeProviderProps, UseThemeProps } from './types';\n\nconst colorSchemes = ['light', 'dark'];\nconst MEDIA = '(prefers-color-scheme: dark)';\nconst isServer = typeof window === 'undefined';\nconst ThemeContext = createContext<UseThemeProps | undefined>(undefined);\nconst defaultContext: UseThemeProps = { setTheme: _ => {}, themes: [] };\n\nexport const useTheme = () => useContext(ThemeContext) ?? defaultContext;\n\nexport function ThemeProvider(props: ThemeProviderProps) {\n  const context = useContext(ThemeContext);\n\n  // Ignore nested context providers, just passthrough children\n  if (context) return <Fragment>{props.children}</Fragment>;\n  return <Theme {...props} />;\n}\n\nThemeProvider.displayName = 'ThemeProvider';\n\nconst defaultThemes = ['light', 'dark'];\n\nconst Theme = ({\n  forcedTheme,\n  disableTransitionOnChange = false,\n  enableSystem = true,\n  enableColorScheme = true,\n  storageKey = 'theme',\n  themes = defaultThemes,\n  defaultTheme = enableSystem ? 'system' : 'light',\n  attribute = 'data-theme',\n  value,\n  children,\n  nonce,\n  style = 'modern',\n  accentColor = 'indigo',\n  grayColor = 'gray'\n}: ThemeProviderProps) => {\n  const [theme, setThemeState] = useState(() =>\n    getTheme(storageKey, defaultTheme)\n  );\n  const [resolvedTheme, setResolvedTheme] = useState(() =>\n    getTheme(storageKey)\n  );\n  const attrs = !value ? themes : Object.values(value);\n\n  const applyTheme = useCallback(\n    (theme: string) => {\n      let resolved = theme;\n      if (!resolved) return;\n\n      // If theme is system, resolve it before setting theme\n      if (theme === 'system' && enableSystem) {\n        resolved = getSystemTheme();\n      }\n\n      const name = value ? value[resolved] : resolved;\n      const enable = disableTransitionOnChange ? disableAnimation() : null;\n      const d = document.documentElement;\n\n      if (attribute === 'class') {\n        d.classList.remove(...attrs);\n\n        if (name) d.classList.add(name);\n      } else {\n        if (name) {\n          d.setAttribute(attribute, name);\n        } else {\n          d.removeAttribute(attribute);\n        }\n      }\n\n      d.setAttribute('data-style', style);\n      d.setAttribute('data-accent-color', accentColor);\n      d.setAttribute('data-gray-color', grayColor);\n\n      if (enableColorScheme) {\n        const fallback = colorSchemes.includes(defaultTheme)\n          ? defaultTheme\n          : null;\n        const colorScheme = colorSchemes.includes(resolved)\n          ? resolved\n          : fallback;\n        // @ts-ignore\n        d.style.colorScheme = colorScheme;\n      }\n\n      enable?.();\n    },\n    [\n      style,\n      accentColor,\n      grayColor,\n      attribute,\n      attrs,\n      value,\n      enableSystem,\n      enableColorScheme,\n      defaultTheme\n    ]\n  );\n\n  const setTheme = useCallback(\n    (theme: string) => {\n      setThemeState(theme);\n\n      // Save to storage\n      try {\n        localStorage.setItem(storageKey, theme);\n      } catch (e) {\n        // Unsupported\n      }\n    },\n    [forcedTheme]\n  );\n\n  const handleMediaQuery = useCallback(\n    (e: MediaQueryListEvent | MediaQueryList) => {\n      const resolved = getSystemTheme(e);\n      setResolvedTheme(resolved);\n\n      if (theme === 'system' && enableSystem && !forcedTheme) {\n        applyTheme('system');\n      }\n    },\n    [theme, forcedTheme]\n  );\n\n  // Always listen to System preference\n  useEffect(() => {\n    const media = window.matchMedia(MEDIA);\n\n    media.addEventListener('change', handleMediaQuery);\n    handleMediaQuery(media);\n\n    return () => media.removeEventListener('change', handleMediaQuery);\n  }, [handleMediaQuery]);\n\n  // localStorage event handling\n  useEffect(() => {\n    const handleStorage = (e: StorageEvent) => {\n      if (e.key !== storageKey) {\n        return;\n      }\n\n      // If default theme set, use it if localstorage === null (happens on local storage manual deletion)\n      const theme = e.newValue || defaultTheme;\n      setTheme(theme);\n    };\n\n    window.addEventListener('storage', handleStorage);\n    return () => window.removeEventListener('storage', handleStorage);\n  }, [setTheme]);\n\n  // Whenever theme or forcedTheme changes, apply it\n  useEffect(() => {\n    // @ts-ignore\n    applyTheme(forcedTheme ?? theme);\n  }, [forcedTheme, theme]);\n\n  const providerValue = useMemo(\n    () => ({\n      theme,\n      setTheme,\n      forcedTheme,\n      resolvedTheme: theme === 'system' ? resolvedTheme : theme,\n      themes: enableSystem ? [...themes, 'system'] : themes,\n      systemTheme: (enableSystem ? resolvedTheme : undefined) as\n        | 'light'\n        | 'dark'\n        | undefined,\n      style,\n      accentColor,\n      grayColor\n    }),\n    [\n      theme,\n      setTheme,\n      forcedTheme,\n      resolvedTheme,\n      enableSystem,\n      themes,\n      style,\n      accentColor,\n      grayColor\n    ]\n  );\n\n  return (\n    <ThemeContext value={providerValue}>\n      <ThemeScript\n        {...{\n          forcedTheme,\n          disableTransitionOnChange,\n          enableSystem,\n          enableColorScheme,\n          storageKey,\n          themes,\n          defaultTheme,\n          attribute,\n          value,\n          children,\n          attrs,\n          nonce,\n          style,\n          accentColor,\n          grayColor\n        }}\n      />\n      {children}\n    </ThemeContext>\n  );\n};\n\nconst ThemeScript = memo(\n  ({\n    forcedTheme,\n    storageKey,\n    attribute,\n    enableSystem,\n    enableColorScheme,\n    defaultTheme,\n    value,\n    attrs,\n    nonce,\n    style,\n    accentColor,\n    grayColor\n  }: ThemeProviderProps & { attrs: string[]; defaultTheme: string }) => {\n    const defaultSystem = defaultTheme === 'system';\n\n    // Code-golfing the amount of characters in the script\n    const optimization = (() => {\n      if (attribute === 'class') {\n        const removeClasses = `c.remove(${attrs\n          .map((t: string) => `'${t}'`)\n          .join(',')})`;\n\n        return `var d=document.documentElement,c=d.classList;${removeClasses};`;\n      } else {\n        return `var d=document.documentElement,n='${attribute}',s='setAttribute';`;\n      }\n    })();\n\n    const fallbackColorScheme = (() => {\n      if (!enableColorScheme) {\n        return '';\n      }\n\n      const fallback = colorSchemes.includes(defaultTheme)\n        ? defaultTheme\n        : null;\n\n      if (fallback) {\n        return `if(e==='light'||e==='dark'||!e)d.style.colorScheme=e||'${defaultTheme}'`;\n      } else {\n        return `if(e==='light'||e==='dark')d.style.colorScheme=e`;\n      }\n    })();\n\n    const updateDOM = (\n      name: string,\n      literal: boolean = false,\n      setColorScheme = true\n    ) => {\n      const resolvedName = value ? value[name] : name;\n      const val = literal ? name + `|| ''` : `'${resolvedName}'`;\n      let text = '';\n\n      // MUCH faster to set colorScheme alongside HTML attribute/class\n      // as it only incurs 1 style recalculation rather than 2\n      // This can save over 250ms of work for pages with big DOM\n      if (\n        enableColorScheme &&\n        setColorScheme &&\n        !literal &&\n        colorSchemes.includes(name)\n      ) {\n        text += `d.style.colorScheme = '${name}';`;\n      }\n\n      if (attribute === 'class') {\n        if (literal || resolvedName) {\n          text += `c.add(${val})`;\n        } else {\n          text += `null`;\n        }\n      } else {\n        if (resolvedName) {\n          text += `d[s](n,${val})`;\n        }\n      }\n\n      return text;\n    };\n\n    const scriptSrc = (() => {\n      if (forcedTheme) {\n        return `!function(){${optimization}${updateDOM(forcedTheme)};d.setAttribute('data-style','${style}');d.setAttribute('data-accent-color','${accentColor}');d.setAttribute('data-gray-color','${grayColor}');}()`;\n      }\n\n      if (enableSystem) {\n        return `!function(){try{${optimization}var e=localStorage.getItem('${storageKey}');if('system'===e||(!e&&${defaultSystem})){var t='${MEDIA}',m=window.matchMedia(t);if(m.media!==t||m.matches){${updateDOM(\n          'dark'\n        )}}else{${updateDOM('light')}}}else if(e){${\n          value ? `var x=${JSON.stringify(value)};` : ''\n        }${updateDOM(value ? `x[e]` : 'e', true)}}${\n          !defaultSystem\n            ? `else{` + updateDOM(defaultTheme, false, false) + '}'\n            : ''\n        }${fallbackColorScheme};d.setAttribute('data-style','${style}');d.setAttribute('data-accent-color','${accentColor}');d.setAttribute('data-gray-color','${grayColor}');}catch(e){}}()`;\n      }\n\n      return `!function(){try{${optimization}var e=localStorage.getItem('${storageKey}');if(e){${\n        value ? `var x=${JSON.stringify(value)};` : ''\n      }${updateDOM(value ? `x[e]` : 'e', true)}}else{${updateDOM(\n        defaultTheme,\n        false,\n        false\n      )};}${fallbackColorScheme};d.setAttribute('data-style','${style}');d.setAttribute('data-accent-color','${accentColor}');d.setAttribute('data-gray-color','${grayColor}');}catch(t){}}();`;\n    })();\n\n    return (\n      <script nonce={nonce} dangerouslySetInnerHTML={{ __html: scriptSrc }} />\n    );\n  },\n  // Never re-render this component\n  () => true\n);\n\n// Helpers\nconst getTheme = (key: string, fallback?: string) => {\n  if (isServer) return undefined;\n  let theme;\n  try {\n    theme = localStorage.getItem(key) || undefined;\n  } catch (e) {\n    // Unsupported\n  }\n  return theme || fallback;\n};\n\nconst disableAnimation = () => {\n  const css = document.createElement('style');\n  css.appendChild(\n    document.createTextNode(\n      `*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}`\n    )\n  );\n  document.head.appendChild(css);\n\n  return () => {\n    // Force restyle\n    (() => window.getComputedStyle(document.body))();\n\n    // Wait for next tick before removing\n    setTimeout(() => {\n      document.head.removeChild(css);\n    }, 1);\n  };\n};\n\nconst getSystemTheme = (e?: MediaQueryList | MediaQueryListEvent) => {\n  if (!e) e = window.matchMedia(MEDIA);\n  const isDark = e.matches;\n  const systemTheme = isDark ? 'dark' : 'light';\n  return systemTheme;\n};\n"],"names":[],"mappings":";;;;;;AAeA;AACA;AACA;AACA;AACA;AAEO;AAED;AACJ;;AAGA;AAAa;AACb;AACF;AAEA;AAEA;AAEA;AAgBE;AAGA;AAGA;AAEA;;AAGI;;;AAGA;;;AAIA;AACA;AACA;AAEA;;AAGE;AAAU;;;;AAGR;;;AAEA;;;AAIJ;AACA;AACA;;AAGE;AACE;;AAEF;AACE;;;AAGF;;;AAIJ;;;;;;;;;;AAWC;AAGH;;;AAKI;AACE;;;;;AAIJ;AAIF;AAEI;;;;;AAMF;;;;AAQA;;;AAIF;;;AAIE;AACE;;;;AAKA;;AAEF;AAEA;;AAEF;;;;AAKE;AACF;AAEA;;;;;AAMI;;;;;AAQD;;;;;;;;;;AAWA;;;;;;;;;;;;;;;AAqBK;AAMV;AAEA;AAeI;;AAGA;AACE;;;AAGK;;;;;;;AAQP;;AAEI;;AAGF;AACE;;;;;;AAMA;;;AAIJ;AAKE;AACA;;;;;AAMA;;AAGE;AACA;AAEA;;AAGF;AACE;AACE;;;;;;;;AAMA;;;AAIJ;AACF;AAEA;;AAEI;;;;AAUI;;;;;AAcR;AAGF;AACA;AACA;AAGF;AACA;AACE;AAAc;AACd;AACA;;;;;;;AAMF;AAEA;;;AAOE;AAEA;;AAEE;;;AAIE;;AAEJ;AACF;AAEA;AACE;AAAQ;AACR;;AAEA;AACF;;;"}

package/dist/components/theme-provider/theme.d.ts

@@ -1,5 +1,7 @@
-import React from 'react';
 import type { ThemeProviderProps, UseThemeProps } from './types';
 export declare const useTheme: () => UseThemeProps;
-export declare const ThemeProvider: React.FC<ThemeProviderProps>;
+export declare function ThemeProvider(props: ThemeProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace ThemeProvider {
+    var displayName: string;
+}
 //# sourceMappingURL=theme.d.ts.map

package/dist/components/theme-provider/theme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../components/theme-provider/theme.tsx"],"names":[],"mappings":"AAEA,OAAO,KASN,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,kBAAkB,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAQjE,eAAO,MAAM,QAAQ,qBAAmD,CAAC;AAEzE,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAMtD,CAAC"}
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../components/theme-provider/theme.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,kBAAkB,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAQjE,eAAO,MAAM,QAAQ,qBAAmD,CAAC;AAEzE,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,2CAMtD;yBANe,aAAa"}

package/dist/components/theme-provider/theme.js

@@ -8,13 +8,14 @@ const isServer = typeof window === 'undefined';
 const ThemeContext = createContext(undefined);
 const defaultContext = { setTheme: _ => { }, themes: [] };
 const useTheme = () => useContext(ThemeContext) ?? defaultContext;
-const ThemeProvider = props => {
+function ThemeProvider(props) {
     const context = useContext(ThemeContext);
     // Ignore nested context providers, just passthrough children
     if (context)
         return jsx(Fragment, { children: props.children });
     return jsx(Theme, { ...props });
-};
+}
+ThemeProvider.displayName = 'ThemeProvider';
 const defaultThemes = ['light', 'dark'];
 const Theme = ({ forcedTheme, disableTransitionOnChange = false, enableSystem = true, enableColorScheme = true, storageKey = 'theme', themes = defaultThemes, defaultTheme = enableSystem ? 'system' : 'light', attribute = 'data-theme', value, children, nonce, style = 'modern', accentColor = 'indigo', grayColor = 'gray' }) => {
     const [theme, setThemeState] = useState(() => getTheme(storageKey, defaultTheme));
@@ -132,7 +133,7 @@ const Theme = ({ forcedTheme, disableTransitionOnChange = false, enableSystem =
         accentColor,
         grayColor
     ]);
-    return (jsxs(ThemeContext.Provider, { value: providerValue, children: [jsx(ThemeScript, { forcedTheme,
+    return (jsxs(ThemeContext, { value: providerValue, children: [jsx(ThemeScript, { forcedTheme,
                 disableTransitionOnChange,
                 enableSystem,
                 enableColorScheme,

package/dist/components/theme-provider/theme.js.map

@@ -1 +1 @@
-{"version":3,"file":"theme.js","sources":["../../../components/theme-provider/theme.tsx"],"sourcesContent":["'use client';\n\nimport React, {\n  createContext,\n  Fragment,\n  memo,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useState\n} from 'react';\n\nimport type { ThemeProviderProps, UseThemeProps } from './types';\n\nconst colorSchemes = ['light', 'dark'];\nconst MEDIA = '(prefers-color-scheme: dark)';\nconst isServer = typeof window === 'undefined';\nconst ThemeContext = createContext<UseThemeProps | undefined>(undefined);\nconst defaultContext: UseThemeProps = { setTheme: _ => {}, themes: [] };\n\nexport const useTheme = () => useContext(ThemeContext) ?? defaultContext;\n\nexport const ThemeProvider: React.FC<ThemeProviderProps> = props => {\n  const context = useContext(ThemeContext);\n\n  // Ignore nested context providers, just passthrough children\n  if (context) return <Fragment>{props.children}</Fragment>;\n  return <Theme {...props} />;\n};\n\nconst defaultThemes = ['light', 'dark'];\n\nconst Theme: React.FC<ThemeProviderProps> = ({\n  forcedTheme,\n  disableTransitionOnChange = false,\n  enableSystem = true,\n  enableColorScheme = true,\n  storageKey = 'theme',\n  themes = defaultThemes,\n  defaultTheme = enableSystem ? 'system' : 'light',\n  attribute = 'data-theme',\n  value,\n  children,\n  nonce,\n  style = 'modern',\n  accentColor = 'indigo',\n  grayColor = 'gray'\n}) => {\n  const [theme, setThemeState] = useState(() =>\n    getTheme(storageKey, defaultTheme)\n  );\n  const [resolvedTheme, setResolvedTheme] = useState(() =>\n    getTheme(storageKey)\n  );\n  const attrs = !value ? themes : Object.values(value);\n\n  const applyTheme = useCallback(\n    (theme: string) => {\n      let resolved = theme;\n      if (!resolved) return;\n\n      // If theme is system, resolve it before setting theme\n      if (theme === 'system' && enableSystem) {\n        resolved = getSystemTheme();\n      }\n\n      const name = value ? value[resolved] : resolved;\n      const enable = disableTransitionOnChange ? disableAnimation() : null;\n      const d = document.documentElement;\n\n      if (attribute === 'class') {\n        d.classList.remove(...attrs);\n\n        if (name) d.classList.add(name);\n      } else {\n        if (name) {\n          d.setAttribute(attribute, name);\n        } else {\n          d.removeAttribute(attribute);\n        }\n      }\n\n      d.setAttribute('data-style', style);\n      d.setAttribute('data-accent-color', accentColor);\n      d.setAttribute('data-gray-color', grayColor);\n\n      if (enableColorScheme) {\n        const fallback = colorSchemes.includes(defaultTheme)\n          ? defaultTheme\n          : null;\n        const colorScheme = colorSchemes.includes(resolved)\n          ? resolved\n          : fallback;\n        // @ts-ignore\n        d.style.colorScheme = colorScheme;\n      }\n\n      enable?.();\n    },\n    [\n      style,\n      accentColor,\n      grayColor,\n      attribute,\n      attrs,\n      value,\n      enableSystem,\n      enableColorScheme,\n      defaultTheme\n    ]\n  );\n\n  const setTheme = useCallback(\n    (theme: string) => {\n      setThemeState(theme);\n\n      // Save to storage\n      try {\n        localStorage.setItem(storageKey, theme);\n      } catch (e) {\n        // Unsupported\n      }\n    },\n    [forcedTheme]\n  );\n\n  const handleMediaQuery = useCallback(\n    (e: MediaQueryListEvent | MediaQueryList) => {\n      const resolved = getSystemTheme(e);\n      setResolvedTheme(resolved);\n\n      if (theme === 'system' && enableSystem && !forcedTheme) {\n        applyTheme('system');\n      }\n    },\n    [theme, forcedTheme]\n  );\n\n  // Always listen to System preference\n  useEffect(() => {\n    const media = window.matchMedia(MEDIA);\n\n    media.addEventListener('change', handleMediaQuery);\n    handleMediaQuery(media);\n\n    return () => media.removeEventListener('change', handleMediaQuery);\n  }, [handleMediaQuery]);\n\n  // localStorage event handling\n  useEffect(() => {\n    const handleStorage = (e: StorageEvent) => {\n      if (e.key !== storageKey) {\n        return;\n      }\n\n      // If default theme set, use it if localstorage === null (happens on local storage manual deletion)\n      const theme = e.newValue || defaultTheme;\n      setTheme(theme);\n    };\n\n    window.addEventListener('storage', handleStorage);\n    return () => window.removeEventListener('storage', handleStorage);\n  }, [setTheme]);\n\n  // Whenever theme or forcedTheme changes, apply it\n  useEffect(() => {\n    // @ts-ignore\n    applyTheme(forcedTheme ?? theme);\n  }, [forcedTheme, theme]);\n\n  const providerValue = useMemo(\n    () => ({\n      theme,\n      setTheme,\n      forcedTheme,\n      resolvedTheme: theme === 'system' ? resolvedTheme : theme,\n      themes: enableSystem ? [...themes, 'system'] : themes,\n      systemTheme: (enableSystem ? resolvedTheme : undefined) as\n        | 'light'\n        | 'dark'\n        | undefined,\n      style,\n      accentColor,\n      grayColor\n    }),\n    [\n      theme,\n      setTheme,\n      forcedTheme,\n      resolvedTheme,\n      enableSystem,\n      themes,\n      style,\n      accentColor,\n      grayColor\n    ]\n  );\n\n  return (\n    <ThemeContext.Provider value={providerValue}>\n      <ThemeScript\n        {...{\n          forcedTheme,\n          disableTransitionOnChange,\n          enableSystem,\n          enableColorScheme,\n          storageKey,\n          themes,\n          defaultTheme,\n          attribute,\n          value,\n          children,\n          attrs,\n          nonce,\n          style,\n          accentColor,\n          grayColor\n        }}\n      />\n      {children}\n    </ThemeContext.Provider>\n  );\n};\n\nconst ThemeScript = memo(\n  ({\n    forcedTheme,\n    storageKey,\n    attribute,\n    enableSystem,\n    enableColorScheme,\n    defaultTheme,\n    value,\n    attrs,\n    nonce,\n    style,\n    accentColor,\n    grayColor\n  }: ThemeProviderProps & { attrs: string[]; defaultTheme: string }) => {\n    const defaultSystem = defaultTheme === 'system';\n\n    // Code-golfing the amount of characters in the script\n    const optimization = (() => {\n      if (attribute === 'class') {\n        const removeClasses = `c.remove(${attrs\n          .map((t: string) => `'${t}'`)\n          .join(',')})`;\n\n        return `var d=document.documentElement,c=d.classList;${removeClasses};`;\n      } else {\n        return `var d=document.documentElement,n='${attribute}',s='setAttribute';`;\n      }\n    })();\n\n    const fallbackColorScheme = (() => {\n      if (!enableColorScheme) {\n        return '';\n      }\n\n      const fallback = colorSchemes.includes(defaultTheme)\n        ? defaultTheme\n        : null;\n\n      if (fallback) {\n        return `if(e==='light'||e==='dark'||!e)d.style.colorScheme=e||'${defaultTheme}'`;\n      } else {\n        return `if(e==='light'||e==='dark')d.style.colorScheme=e`;\n      }\n    })();\n\n    const updateDOM = (\n      name: string,\n      literal: boolean = false,\n      setColorScheme = true\n    ) => {\n      const resolvedName = value ? value[name] : name;\n      const val = literal ? name + `|| ''` : `'${resolvedName}'`;\n      let text = '';\n\n      // MUCH faster to set colorScheme alongside HTML attribute/class\n      // as it only incurs 1 style recalculation rather than 2\n      // This can save over 250ms of work for pages with big DOM\n      if (\n        enableColorScheme &&\n        setColorScheme &&\n        !literal &&\n        colorSchemes.includes(name)\n      ) {\n        text += `d.style.colorScheme = '${name}';`;\n      }\n\n      if (attribute === 'class') {\n        if (literal || resolvedName) {\n          text += `c.add(${val})`;\n        } else {\n          text += `null`;\n        }\n      } else {\n        if (resolvedName) {\n          text += `d[s](n,${val})`;\n        }\n      }\n\n      return text;\n    };\n\n    const scriptSrc = (() => {\n      if (forcedTheme) {\n        return `!function(){${optimization}${updateDOM(forcedTheme)};d.setAttribute('data-style','${style}');d.setAttribute('data-accent-color','${accentColor}');d.setAttribute('data-gray-color','${grayColor}');}()`;\n      }\n\n      if (enableSystem) {\n        return `!function(){try{${optimization}var e=localStorage.getItem('${storageKey}');if('system'===e||(!e&&${defaultSystem})){var t='${MEDIA}',m=window.matchMedia(t);if(m.media!==t||m.matches){${updateDOM(\n          'dark'\n        )}}else{${updateDOM('light')}}}else if(e){${\n          value ? `var x=${JSON.stringify(value)};` : ''\n        }${updateDOM(value ? `x[e]` : 'e', true)}}${\n          !defaultSystem\n            ? `else{` + updateDOM(defaultTheme, false, false) + '}'\n            : ''\n        }${fallbackColorScheme};d.setAttribute('data-style','${style}');d.setAttribute('data-accent-color','${accentColor}');d.setAttribute('data-gray-color','${grayColor}');}catch(e){}}()`;\n      }\n\n      return `!function(){try{${optimization}var e=localStorage.getItem('${storageKey}');if(e){${\n        value ? `var x=${JSON.stringify(value)};` : ''\n      }${updateDOM(value ? `x[e]` : 'e', true)}}else{${updateDOM(\n        defaultTheme,\n        false,\n        false\n      )};}${fallbackColorScheme};d.setAttribute('data-style','${style}');d.setAttribute('data-accent-color','${accentColor}');d.setAttribute('data-gray-color','${grayColor}');}catch(t){}}();`;\n    })();\n\n    return (\n      <script nonce={nonce} dangerouslySetInnerHTML={{ __html: scriptSrc }} />\n    );\n  },\n  // Never re-render this component\n  () => true\n);\n\n// Helpers\nconst getTheme = (key: string, fallback?: string) => {\n  if (isServer) return undefined;\n  let theme;\n  try {\n    theme = localStorage.getItem(key) || undefined;\n  } catch (e) {\n    // Unsupported\n  }\n  return theme || fallback;\n};\n\nconst disableAnimation = () => {\n  const css = document.createElement('style');\n  css.appendChild(\n    document.createTextNode(\n      `*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}`\n    )\n  );\n  document.head.appendChild(css);\n\n  return () => {\n    // Force restyle\n    (() => window.getComputedStyle(document.body))();\n\n    // Wait for next tick before removing\n    setTimeout(() => {\n      document.head.removeChild(css);\n    }, 1);\n  };\n};\n\nconst getSystemTheme = (e?: MediaQueryList | MediaQueryListEvent) => {\n  if (!e) e = window.matchMedia(MEDIA);\n  const isDark = e.matches;\n  const systemTheme = isDark ? 'dark' : 'light';\n  return systemTheme;\n};\n"],"names":[],"mappings":";;;;AAeA;AACA;AACA;AACA;AACA;AAEO;AAEM;AACX;;AAGA;AAAa;AACb;AACF;AAEA;AAEA;AAgBE;AAGA;AAGA;AAEA;;AAGI;;;AAGA;;;AAIA;AACA;AACA;AAEA;;AAGE;AAAU;;;;AAGR;;;AAEA;;;AAIJ;AACA;AACA;;AAGE;AACE;;AAEF;AACE;;;AAGF;;;AAIJ;;;;;;;;;;AAWC;AAGH;;;AAKI;AACE;;;;;AAIJ;AAIF;AAEI;;;;;AAMF;;;;AAQA;;;AAIF;;;AAIE;AACE;;;;AAKA;;AAEF;AAEA;;AAEF;;;;AAKE;AACF;AAEA;;;;;AAMI;;;;;AAQD;;;;;;;;;;AAWA;AAGH;;;;;;;;;;;;;;AAkBQ;AAMV;AAEA;AAeI;;AAGA;AACE;;;AAGK;;;;;;;AAQP;;AAEI;;AAGF;AACE;;;;;;AAMA;;;AAIJ;AAKE;AACA;;;;;AAMA;;AAGE;AACA;AAEA;;AAGF;AACE;AACE;;;;;;;;AAMA;;;AAIJ;AACF;AAEA;;AAEI;;;;AAUI;;;;;AAcR;AAGF;AACA;AACA;AAGF;AACA;AACE;AAAc;AACd;AACA;;;;;;;AAMF;AAEA;;;AAOE;AAEA;;AAEE;;;AAIE;;AAEJ;AACF;AAEA;AACE;AAAQ;AACR;;AAEA;AACF;;"}
+{"version":3,"file":"theme.js","sources":["../../../components/theme-provider/theme.tsx"],"sourcesContent":["'use client';\n\nimport {\n  createContext,\n  Fragment,\n  memo,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useState\n} from 'react';\n\nimport type { ThemeProviderProps, UseThemeProps } from './types';\n\nconst colorSchemes = ['light', 'dark'];\nconst MEDIA = '(prefers-color-scheme: dark)';\nconst isServer = typeof window === 'undefined';\nconst ThemeContext = createContext<UseThemeProps | undefined>(undefined);\nconst defaultContext: UseThemeProps = { setTheme: _ => {}, themes: [] };\n\nexport const useTheme = () => useContext(ThemeContext) ?? defaultContext;\n\nexport function ThemeProvider(props: ThemeProviderProps) {\n  const context = useContext(ThemeContext);\n\n  // Ignore nested context providers, just passthrough children\n  if (context) return <Fragment>{props.children}</Fragment>;\n  return <Theme {...props} />;\n}\n\nThemeProvider.displayName = 'ThemeProvider';\n\nconst defaultThemes = ['light', 'dark'];\n\nconst Theme = ({\n  forcedTheme,\n  disableTransitionOnChange = false,\n  enableSystem = true,\n  enableColorScheme = true,\n  storageKey = 'theme',\n  themes = defaultThemes,\n  defaultTheme = enableSystem ? 'system' : 'light',\n  attribute = 'data-theme',\n  value,\n  children,\n  nonce,\n  style = 'modern',\n  accentColor = 'indigo',\n  grayColor = 'gray'\n}: ThemeProviderProps) => {\n  const [theme, setThemeState] = useState(() =>\n    getTheme(storageKey, defaultTheme)\n  );\n  const [resolvedTheme, setResolvedTheme] = useState(() =>\n    getTheme(storageKey)\n  );\n  const attrs = !value ? themes : Object.values(value);\n\n  const applyTheme = useCallback(\n    (theme: string) => {\n      let resolved = theme;\n      if (!resolved) return;\n\n      // If theme is system, resolve it before setting theme\n      if (theme === 'system' && enableSystem) {\n        resolved = getSystemTheme();\n      }\n\n      const name = value ? value[resolved] : resolved;\n      const enable = disableTransitionOnChange ? disableAnimation() : null;\n      const d = document.documentElement;\n\n      if (attribute === 'class') {\n        d.classList.remove(...attrs);\n\n        if (name) d.classList.add(name);\n      } else {\n        if (name) {\n          d.setAttribute(attribute, name);\n        } else {\n          d.removeAttribute(attribute);\n        }\n      }\n\n      d.setAttribute('data-style', style);\n      d.setAttribute('data-accent-color', accentColor);\n      d.setAttribute('data-gray-color', grayColor);\n\n      if (enableColorScheme) {\n        const fallback = colorSchemes.includes(defaultTheme)\n          ? defaultTheme\n          : null;\n        const colorScheme = colorSchemes.includes(resolved)\n          ? resolved\n          : fallback;\n        // @ts-ignore\n        d.style.colorScheme = colorScheme;\n      }\n\n      enable?.();\n    },\n    [\n      style,\n      accentColor,\n      grayColor,\n      attribute,\n      attrs,\n      value,\n      enableSystem,\n      enableColorScheme,\n      defaultTheme\n    ]\n  );\n\n  const setTheme = useCallback(\n    (theme: string) => {\n      setThemeState(theme);\n\n      // Save to storage\n      try {\n        localStorage.setItem(storageKey, theme);\n      } catch (e) {\n        // Unsupported\n      }\n    },\n    [forcedTheme]\n  );\n\n  const handleMediaQuery = useCallback(\n    (e: MediaQueryListEvent | MediaQueryList) => {\n      const resolved = getSystemTheme(e);\n      setResolvedTheme(resolved);\n\n      if (theme === 'system' && enableSystem && !forcedTheme) {\n        applyTheme('system');\n      }\n    },\n    [theme, forcedTheme]\n  );\n\n  // Always listen to System preference\n  useEffect(() => {\n    const media = window.matchMedia(MEDIA);\n\n    media.addEventListener('change', handleMediaQuery);\n    handleMediaQuery(media);\n\n    return () => media.removeEventListener('change', handleMediaQuery);\n  }, [handleMediaQuery]);\n\n  // localStorage event handling\n  useEffect(() => {\n    const handleStorage = (e: StorageEvent) => {\n      if (e.key !== storageKey) {\n        return;\n      }\n\n      // If default theme set, use it if localstorage === null (happens on local storage manual deletion)\n      const theme = e.newValue || defaultTheme;\n      setTheme(theme);\n    };\n\n    window.addEventListener('storage', handleStorage);\n    return () => window.removeEventListener('storage', handleStorage);\n  }, [setTheme]);\n\n  // Whenever theme or forcedTheme changes, apply it\n  useEffect(() => {\n    // @ts-ignore\n    applyTheme(forcedTheme ?? theme);\n  }, [forcedTheme, theme]);\n\n  const providerValue = useMemo(\n    () => ({\n      theme,\n      setTheme,\n      forcedTheme,\n      resolvedTheme: theme === 'system' ? resolvedTheme : theme,\n      themes: enableSystem ? [...themes, 'system'] : themes,\n      systemTheme: (enableSystem ? resolvedTheme : undefined) as\n        | 'light'\n        | 'dark'\n        | undefined,\n      style,\n      accentColor,\n      grayColor\n    }),\n    [\n      theme,\n      setTheme,\n      forcedTheme,\n      resolvedTheme,\n      enableSystem,\n      themes,\n      style,\n      accentColor,\n      grayColor\n    ]\n  );\n\n  return (\n    <ThemeContext value={providerValue}>\n      <ThemeScript\n        {...{\n          forcedTheme,\n          disableTransitionOnChange,\n          enableSystem,\n          enableColorScheme,\n          storageKey,\n          themes,\n          defaultTheme,\n          attribute,\n          value,\n          children,\n          attrs,\n          nonce,\n          style,\n          accentColor,\n          grayColor\n        }}\n      />\n      {children}\n    </ThemeContext>\n  );\n};\n\nconst ThemeScript = memo(\n  ({\n    forcedTheme,\n    storageKey,\n    attribute,\n    enableSystem,\n    enableColorScheme,\n    defaultTheme,\n    value,\n    attrs,\n    nonce,\n    style,\n    accentColor,\n    grayColor\n  }: ThemeProviderProps & { attrs: string[]; defaultTheme: string }) => {\n    const defaultSystem = defaultTheme === 'system';\n\n    // Code-golfing the amount of characters in the script\n    const optimization = (() => {\n      if (attribute === 'class') {\n        const removeClasses = `c.remove(${attrs\n          .map((t: string) => `'${t}'`)\n          .join(',')})`;\n\n        return `var d=document.documentElement,c=d.classList;${removeClasses};`;\n      } else {\n        return `var d=document.documentElement,n='${attribute}',s='setAttribute';`;\n      }\n    })();\n\n    const fallbackColorScheme = (() => {\n      if (!enableColorScheme) {\n        return '';\n      }\n\n      const fallback = colorSchemes.includes(defaultTheme)\n        ? defaultTheme\n        : null;\n\n      if (fallback) {\n        return `if(e==='light'||e==='dark'||!e)d.style.colorScheme=e||'${defaultTheme}'`;\n      } else {\n        return `if(e==='light'||e==='dark')d.style.colorScheme=e`;\n      }\n    })();\n\n    const updateDOM = (\n      name: string,\n      literal: boolean = false,\n      setColorScheme = true\n    ) => {\n      const resolvedName = value ? value[name] : name;\n      const val = literal ? name + `|| ''` : `'${resolvedName}'`;\n      let text = '';\n\n      // MUCH faster to set colorScheme alongside HTML attribute/class\n      // as it only incurs 1 style recalculation rather than 2\n      // This can save over 250ms of work for pages with big DOM\n      if (\n        enableColorScheme &&\n        setColorScheme &&\n        !literal &&\n        colorSchemes.includes(name)\n      ) {\n        text += `d.style.colorScheme = '${name}';`;\n      }\n\n      if (attribute === 'class') {\n        if (literal || resolvedName) {\n          text += `c.add(${val})`;\n        } else {\n          text += `null`;\n        }\n      } else {\n        if (resolvedName) {\n          text += `d[s](n,${val})`;\n        }\n      }\n\n      return text;\n    };\n\n    const scriptSrc = (() => {\n      if (forcedTheme) {\n        return `!function(){${optimization}${updateDOM(forcedTheme)};d.setAttribute('data-style','${style}');d.setAttribute('data-accent-color','${accentColor}');d.setAttribute('data-gray-color','${grayColor}');}()`;\n      }\n\n      if (enableSystem) {\n        return `!function(){try{${optimization}var e=localStorage.getItem('${storageKey}');if('system'===e||(!e&&${defaultSystem})){var t='${MEDIA}',m=window.matchMedia(t);if(m.media!==t||m.matches){${updateDOM(\n          'dark'\n        )}}else{${updateDOM('light')}}}else if(e){${\n          value ? `var x=${JSON.stringify(value)};` : ''\n        }${updateDOM(value ? `x[e]` : 'e', true)}}${\n          !defaultSystem\n            ? `else{` + updateDOM(defaultTheme, false, false) + '}'\n            : ''\n        }${fallbackColorScheme};d.setAttribute('data-style','${style}');d.setAttribute('data-accent-color','${accentColor}');d.setAttribute('data-gray-color','${grayColor}');}catch(e){}}()`;\n      }\n\n      return `!function(){try{${optimization}var e=localStorage.getItem('${storageKey}');if(e){${\n        value ? `var x=${JSON.stringify(value)};` : ''\n      }${updateDOM(value ? `x[e]` : 'e', true)}}else{${updateDOM(\n        defaultTheme,\n        false,\n        false\n      )};}${fallbackColorScheme};d.setAttribute('data-style','${style}');d.setAttribute('data-accent-color','${accentColor}');d.setAttribute('data-gray-color','${grayColor}');}catch(t){}}();`;\n    })();\n\n    return (\n      <script nonce={nonce} dangerouslySetInnerHTML={{ __html: scriptSrc }} />\n    );\n  },\n  // Never re-render this component\n  () => true\n);\n\n// Helpers\nconst getTheme = (key: string, fallback?: string) => {\n  if (isServer) return undefined;\n  let theme;\n  try {\n    theme = localStorage.getItem(key) || undefined;\n  } catch (e) {\n    // Unsupported\n  }\n  return theme || fallback;\n};\n\nconst disableAnimation = () => {\n  const css = document.createElement('style');\n  css.appendChild(\n    document.createTextNode(\n      `*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}`\n    )\n  );\n  document.head.appendChild(css);\n\n  return () => {\n    // Force restyle\n    (() => window.getComputedStyle(document.body))();\n\n    // Wait for next tick before removing\n    setTimeout(() => {\n      document.head.removeChild(css);\n    }, 1);\n  };\n};\n\nconst getSystemTheme = (e?: MediaQueryList | MediaQueryListEvent) => {\n  if (!e) e = window.matchMedia(MEDIA);\n  const isDark = e.matches;\n  const systemTheme = isDark ? 'dark' : 'light';\n  return systemTheme;\n};\n"],"names":[],"mappings":";;;;AAeA;AACA;AACA;AACA;AACA;AAEO;AAED;AACJ;;AAGA;AAAa;AACb;AACF;AAEA;AAEA;AAEA;AAgBE;AAGA;AAGA;AAEA;;AAGI;;;AAGA;;;AAIA;AACA;AACA;AAEA;;AAGE;AAAU;;;;AAGR;;;AAEA;;;AAIJ;AACA;AACA;;AAGE;AACE;;AAEF;AACE;;;AAGF;;;AAIJ;;;;;;;;;;AAWC;AAGH;;;AAKI;AACE;;;;;AAIJ;AAIF;AAEI;;;;;AAMF;;;;AAQA;;;AAIF;;;AAIE;AACE;;;;AAKA;;AAEF;AAEA;;AAEF;;;;AAKE;AACF;AAEA;;;;;AAMI;;;;;AAQD;;;;;;;;;;AAWA;;;;;;;;;;;;;;;AAqBK;AAMV;AAEA;AAeI;;AAGA;AACE;;;AAGK;;;;;;;AAQP;;AAEI;;AAGF;AACE;;;;;;AAMA;;;AAIJ;AAKE;AACA;;;;;AAMA;;AAGE;AACA;AAEA;;AAGF;AACE;AACE;;;;;;;;AAMA;;;AAIJ;AACF;AAEA;;AAEI;;;;AAUI;;;;;AAcR;AAGF;AACA;AACA;AAGF;AACA;AACE;AAAc;AACd;AACA;;;;;;;AAMF;AAEA;;;AAOE;AAEA;;AAEE;;;AAIE;;AAEJ;AACF;AAEA;AACE;AAAQ;AACR;;AAEA;AACF;;"}

package/dist/components/toast/toast-provider.cjs

@@ -4,7 +4,6 @@
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('@base-ui/react');
 var classVarianceAuthority = require('class-variance-authority');
-var React = require('react');
 var toast_module = require('./toast.module.css.cjs');
 var toastManager = require('./toast-manager.cjs');
 var toastRoot = require('./toast-root.cjs');
@@ -13,9 +12,9 @@ function ToastList({ position }) {
     const { toasts } = react.Toast.useToastManager();
     return toasts.map(toast => (jsxRuntime.jsx(toastRoot.ToastRoot, { toast: toast, position: position }, toast.id)));
 }
-const ToastProvider = React.forwardRef(({ position = 'bottom-right', children, ...props }, ref) => {
-    return (jsxRuntime.jsxs(react.Toast.Provider, { toastManager: toastManager.toastManager, ...props, children: [children, jsxRuntime.jsx(react.Toast.Portal, { children: jsxRuntime.jsx(react.Toast.Viewport, { ref: ref, className: classVarianceAuthority.cx(toast_module.default.viewport, toast_module.default[`viewport-${position}`]), children: jsxRuntime.jsx(ToastList, { position: position }) }) })] }));
-});
+function ToastProvider({ position = 'bottom-right', children, ...props }) {
+    return (jsxRuntime.jsxs(react.Toast.Provider, { toastManager: toastManager.toastManager, ...props, children: [children, jsxRuntime.jsx(react.Toast.Portal, { children: jsxRuntime.jsx(react.Toast.Viewport, { className: classVarianceAuthority.cx(toast_module.default.viewport, toast_module.default[`viewport-${position}`]), children: jsxRuntime.jsx(ToastList, { position: position }) }) })] }));
+}
 ToastProvider.displayName = 'Toast.Provider';
 
 exports.ToastProvider = ToastProvider;

package/dist/components/toast/toast-provider.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"toast-provider.cjs","sources":["../../../components/toast/toast-provider.tsx"],"sourcesContent":["'use client';\n\nimport { Toast as ToastPrimitive } from '@base-ui/react';\nimport { cx } from 'class-variance-authority';\nimport { type ElementRef, forwardRef } from 'react';\nimport styles from './toast.module.css';\nimport { toastManager } from './toast-manager';\nimport { ToastRoot } from './toast-root';\n\nexport type ToastPosition =\n  | 'top-left'\n  | 'top-center'\n  | 'top-right'\n  | 'bottom-left'\n  | 'bottom-center'\n  | 'bottom-right';\n\nexport interface ToastProviderProps\n  extends Omit<ToastPrimitive.Provider.Props, 'toastManager'> {\n  /**\n   * Position of the toast viewport on screen.\n   * @default \"bottom-right\"\n   */\n  position?: ToastPosition;\n}\n\nfunction ToastList({ position }: { position: ToastPosition }) {\n  const { toasts } = ToastPrimitive.useToastManager();\n  return toasts.map(toast => (\n    <ToastRoot key={toast.id} toast={toast} position={position} />\n  ));\n}\n\nexport const ToastProvider = forwardRef<\n  ElementRef<typeof ToastPrimitive.Viewport>,\n  ToastProviderProps\n>(({ position = 'bottom-right', children, ...props }, ref) => {\n  return (\n    <ToastPrimitive.Provider toastManager={toastManager} {...props}>\n      {children}\n      <ToastPrimitive.Portal>\n        <ToastPrimitive.Viewport\n          ref={ref}\n          className={cx(styles.viewport, styles[`viewport-${position}`])}\n        >\n          <ToastList position={position} />\n        </ToastPrimitive.Viewport>\n      </ToastPrimitive.Portal>\n    </ToastPrimitive.Provider>\n  );\n});\n\nToastProvider.displayName = 'Toast.Provider';\n"],"names":[],"mappings":";;;;;;;;;;;AA0BA;;;AAKA;;;AAmBA;AAEA;;"}
+{"version":3,"file":"toast-provider.cjs","sources":["../../../components/toast/toast-provider.tsx"],"sourcesContent":["'use client';\n\nimport { Toast as ToastPrimitive } from '@base-ui/react';\nimport { cx } from 'class-variance-authority';\nimport styles from './toast.module.css';\nimport { toastManager } from './toast-manager';\nimport { ToastRoot } from './toast-root';\n\nexport type ToastPosition =\n  | 'top-left'\n  | 'top-center'\n  | 'top-right'\n  | 'bottom-left'\n  | 'bottom-center'\n  | 'bottom-right';\n\nexport interface ToastProviderProps extends ToastPrimitive.Provider.Props {\n  /**\n   * Position of the toast viewport on screen.\n   * @default \"bottom-right\"\n   */\n  position?: ToastPosition;\n}\n\nfunction ToastList({ position }: { position: ToastPosition }) {\n  const { toasts } = ToastPrimitive.useToastManager();\n  return toasts.map(toast => (\n    <ToastRoot key={toast.id} toast={toast} position={position} />\n  ));\n}\n\nexport function ToastProvider({\n  position = 'bottom-right',\n  children,\n  ...props\n}: ToastProviderProps) {\n  return (\n    <ToastPrimitive.Provider toastManager={toastManager} {...props}>\n      {children}\n      <ToastPrimitive.Portal>\n        <ToastPrimitive.Viewport\n          className={cx(styles.viewport, styles[`viewport-${position}`])}\n        >\n          <ToastList position={position} />\n        </ToastPrimitive.Viewport>\n      </ToastPrimitive.Portal>\n    </ToastPrimitive.Provider>\n  );\n}\n\nToastProvider.displayName = 'Toast.Provider';\n"],"names":[],"mappings":";;;;;;;;;;AAwBA;;;AAKA;AAEgB;;AAiBhB;AAEA;;"}

package/dist/components/toast/toast-provider.d.ts

@@ -1,11 +1,14 @@
 import { Toast as ToastPrimitive } from '@base-ui/react';
 export type ToastPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
-export interface ToastProviderProps extends Omit<ToastPrimitive.Provider.Props, 'toastManager'> {
+export interface ToastProviderProps extends ToastPrimitive.Provider.Props {
     /**
      * Position of the toast viewport on screen.
      * @default "bottom-right"
      */
     position?: ToastPosition;
 }
-export declare const ToastProvider: import("react").ForwardRefExoticComponent<ToastProviderProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare function ToastProvider({ position, children, ...props }: ToastProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace ToastProvider {
+    var displayName: string;
+}
 //# sourceMappingURL=toast-provider.d.ts.map

package/dist/components/toast/toast-provider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toast-provider.d.ts","sourceRoot":"","sources":["../../../components/toast/toast-provider.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,IAAI,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAOzD,MAAM,MAAM,aAAa,GACrB,UAAU,GACV,YAAY,GACZ,WAAW,GACX,aAAa,GACb,eAAe,GACf,cAAc,CAAC;AAEnB,MAAM,WAAW,kBACf,SAAQ,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,KAAK,EAAE,cAAc,CAAC;IAC3D;;;OAGG;IACH,QAAQ,CAAC,EAAE,aAAa,CAAC;CAC1B;AASD,eAAO,MAAM,aAAa,+GAiBxB,CAAC"}
+{"version":3,"file":"toast-provider.d.ts","sourceRoot":"","sources":["../../../components/toast/toast-provider.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,IAAI,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAMzD,MAAM,MAAM,aAAa,GACrB,UAAU,GACV,YAAY,GACZ,WAAW,GACX,aAAa,GACb,eAAe,GACf,cAAc,CAAC;AAEnB,MAAM,WAAW,kBAAmB,SAAQ,cAAc,CAAC,QAAQ,CAAC,KAAK;IACvE;;;OAGG;IACH,QAAQ,CAAC,EAAE,aAAa,CAAC;CAC1B;AASD,wBAAgB,aAAa,CAAC,EAC5B,QAAyB,EACzB,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,kBAAkB,2CAapB;yBAjBe,aAAa"}

package/dist/components/toast/toast-provider.js

@@ -2,7 +2,6 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { Toast } from '@base-ui/react';
 import { cx } from 'class-variance-authority';
-import { forwardRef } from 'react';
 import styles from './toast.module.css.js';
 import { toastManager } from './toast-manager.js';
 import { ToastRoot } from './toast-root.js';
@@ -11,9 +10,9 @@ function ToastList({ position }) {
     const { toasts } = Toast.useToastManager();
     return toasts.map(toast => (jsx(ToastRoot, { toast: toast, position: position }, toast.id)));
 }
-const ToastProvider = forwardRef(({ position = 'bottom-right', children, ...props }, ref) => {
-    return (jsxs(Toast.Provider, { toastManager: toastManager, ...props, children: [children, jsx(Toast.Portal, { children: jsx(Toast.Viewport, { ref: ref, className: cx(styles.viewport, styles[`viewport-${position}`]), children: jsx(ToastList, { position: position }) }) })] }));
-});
+function ToastProvider({ position = 'bottom-right', children, ...props }) {
+    return (jsxs(Toast.Provider, { toastManager: toastManager, ...props, children: [children, jsx(Toast.Portal, { children: jsx(Toast.Viewport, { className: cx(styles.viewport, styles[`viewport-${position}`]), children: jsx(ToastList, { position: position }) }) })] }));
+}
 ToastProvider.displayName = 'Toast.Provider';
 
 export { ToastProvider };

package/dist/components/toast/toast-provider.js.map

@@ -1 +1 @@
-{"version":3,"file":"toast-provider.js","sources":["../../../components/toast/toast-provider.tsx"],"sourcesContent":["'use client';\n\nimport { Toast as ToastPrimitive } from '@base-ui/react';\nimport { cx } from 'class-variance-authority';\nimport { type ElementRef, forwardRef } from 'react';\nimport styles from './toast.module.css';\nimport { toastManager } from './toast-manager';\nimport { ToastRoot } from './toast-root';\n\nexport type ToastPosition =\n  | 'top-left'\n  | 'top-center'\n  | 'top-right'\n  | 'bottom-left'\n  | 'bottom-center'\n  | 'bottom-right';\n\nexport interface ToastProviderProps\n  extends Omit<ToastPrimitive.Provider.Props, 'toastManager'> {\n  /**\n   * Position of the toast viewport on screen.\n   * @default \"bottom-right\"\n   */\n  position?: ToastPosition;\n}\n\nfunction ToastList({ position }: { position: ToastPosition }) {\n  const { toasts } = ToastPrimitive.useToastManager();\n  return toasts.map(toast => (\n    <ToastRoot key={toast.id} toast={toast} position={position} />\n  ));\n}\n\nexport const ToastProvider = forwardRef<\n  ElementRef<typeof ToastPrimitive.Viewport>,\n  ToastProviderProps\n>(({ position = 'bottom-right', children, ...props }, ref) => {\n  return (\n    <ToastPrimitive.Provider toastManager={toastManager} {...props}>\n      {children}\n      <ToastPrimitive.Portal>\n        <ToastPrimitive.Viewport\n          ref={ref}\n          className={cx(styles.viewport, styles[`viewport-${position}`])}\n        >\n          <ToastList position={position} />\n        </ToastPrimitive.Viewport>\n      </ToastPrimitive.Portal>\n    </ToastPrimitive.Provider>\n  );\n});\n\nToastProvider.displayName = 'Toast.Provider';\n"],"names":[],"mappings":";;;;;;;;;AA0BA;;;AAKA;;;AAmBA;AAEA;;"}
+{"version":3,"file":"toast-provider.js","sources":["../../../components/toast/toast-provider.tsx"],"sourcesContent":["'use client';\n\nimport { Toast as ToastPrimitive } from '@base-ui/react';\nimport { cx } from 'class-variance-authority';\nimport styles from './toast.module.css';\nimport { toastManager } from './toast-manager';\nimport { ToastRoot } from './toast-root';\n\nexport type ToastPosition =\n  | 'top-left'\n  | 'top-center'\n  | 'top-right'\n  | 'bottom-left'\n  | 'bottom-center'\n  | 'bottom-right';\n\nexport interface ToastProviderProps extends ToastPrimitive.Provider.Props {\n  /**\n   * Position of the toast viewport on screen.\n   * @default \"bottom-right\"\n   */\n  position?: ToastPosition;\n}\n\nfunction ToastList({ position }: { position: ToastPosition }) {\n  const { toasts } = ToastPrimitive.useToastManager();\n  return toasts.map(toast => (\n    <ToastRoot key={toast.id} toast={toast} position={position} />\n  ));\n}\n\nexport function ToastProvider({\n  position = 'bottom-right',\n  children,\n  ...props\n}: ToastProviderProps) {\n  return (\n    <ToastPrimitive.Provider toastManager={toastManager} {...props}>\n      {children}\n      <ToastPrimitive.Portal>\n        <ToastPrimitive.Viewport\n          className={cx(styles.viewport, styles[`viewport-${position}`])}\n        >\n          <ToastList position={position} />\n        </ToastPrimitive.Viewport>\n      </ToastPrimitive.Portal>\n    </ToastPrimitive.Provider>\n  );\n}\n\nToastProvider.displayName = 'Toast.Provider';\n"],"names":[],"mappings":";;;;;;;;AAwBA;;;AAKA;AAEgB;;AAiBhB;AAEA;;"}

package/dist/components/toast/toast-root.cjs

@@ -5,7 +5,6 @@ var jsxRuntime = require('react/jsx-runtime');
 var react = require('@base-ui/react');
 var reactIcons = require('@radix-ui/react-icons');
 var classVarianceAuthority = require('class-variance-authority');
-var React = require('react');
 var button = require('../button/button.cjs');
 var flex = require('../flex/flex.cjs');
 var iconButton = require('../icon-button/icon-button.cjs');
@@ -23,11 +22,11 @@ function getSwipeDirection(position) {
     }
     return ['right', verticalDirection];
 }
-const ToastRoot = React.forwardRef(({ toast, className, position = 'bottom-right', ...props }, ref) => {
+function ToastRoot({ toast, className, position = 'bottom-right', ...props }) {
     const swipeDirection = getSwipeDirection(position);
     const hasDescription = !!toast.description;
-    return (jsxRuntime.jsx(react.Toast.Root, { ref: ref, toast: toast, className: classVarianceAuthority.cx(toast_module.default.root, className), swipeDirection: swipeDirection, "data-position": position, ...props, children: jsxRuntime.jsxs(react.Toast.Content, { className: toast_module.default.content, children: [jsxRuntime.jsxs(flex.Flex, { direction: 'column', gap: 1, className: toast_module.default.textContainer, children: [toast.title && (jsxRuntime.jsx(react.Toast.Title, { className: hasDescription ? toast_module.default.title : toast_module.default.description, children: toast.title })), hasDescription && (jsxRuntime.jsx(react.Toast.Description, { className: toast_module.default.description, children: toast.description }))] }), jsxRuntime.jsxs(flex.Flex, { align: 'center', gap: 3, children: [toast.actionProps && (jsxRuntime.jsx(react.Toast.Action, { ...toast.actionProps, render: jsxRuntime.jsx(button.Button, { variant: 'text', color: 'neutral', size: 'small' }) })), jsxRuntime.jsx(react.Toast.Close, { "aria-label": 'Close toast', render: jsxRuntime.jsx(iconButton.IconButton, { size: 2 }), children: jsxRuntime.jsx(reactIcons.Cross1Icon, {}) })] })] }) }));
-});
+    return (jsxRuntime.jsx(react.Toast.Root, { toast: toast, className: classVarianceAuthority.cx(toast_module.default.root, className), swipeDirection: swipeDirection, "data-position": position, ...props, children: jsxRuntime.jsxs(react.Toast.Content, { className: toast_module.default.content, children: [jsxRuntime.jsxs(flex.Flex, { direction: 'column', gap: 1, className: toast_module.default.textContainer, children: [toast.title && (jsxRuntime.jsx(react.Toast.Title, { className: hasDescription ? toast_module.default.title : toast_module.default.description, children: toast.title })), hasDescription && (jsxRuntime.jsx(react.Toast.Description, { className: toast_module.default.description, children: toast.description }))] }), jsxRuntime.jsxs(flex.Flex, { align: 'center', gap: 3, children: [toast.actionProps && (jsxRuntime.jsx(react.Toast.Action, { ...toast.actionProps, render: jsxRuntime.jsx(button.Button, { variant: 'text', color: 'neutral', size: 'small' }) })), jsxRuntime.jsx(react.Toast.Close, { "aria-label": 'Close toast', render: jsxRuntime.jsx(iconButton.IconButton, { size: 2 }), children: jsxRuntime.jsx(reactIcons.Cross1Icon, {}) })] })] }) }));
+}
 ToastRoot.displayName = 'Toast';
 
 exports.ToastRoot = ToastRoot;

package/dist/components/toast/toast-root.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"toast-root.cjs","sources":["../../../components/toast/toast-root.tsx"],"sourcesContent":["'use client';\n\nimport { Toast as ToastPrimitive } from '@base-ui/react';\nimport { Cross1Icon } from '@radix-ui/react-icons';\nimport { cx } from 'class-variance-authority';\nimport { type ElementRef, forwardRef } from 'react';\nimport { Button } from '../button';\nimport { Flex } from '../flex';\nimport { IconButton } from '../icon-button';\nimport styles from './toast.module.css';\nimport type { ToastPosition } from './toast-provider';\n\ntype SwipeDirection = 'up' | 'down' | 'left' | 'right';\n\nfunction getSwipeDirection(position: ToastPosition): SwipeDirection[] {\n  const verticalDirection: SwipeDirection = position.startsWith('top')\n    ? 'up'\n    : 'down';\n\n  if (position.includes('center')) {\n    return [verticalDirection];\n  }\n\n  if (position.includes('left')) {\n    return ['left', verticalDirection];\n  }\n\n  return ['right', verticalDirection];\n}\n\nexport interface ToastRootProps\n  extends Omit<ToastPrimitive.Root.Props, 'toast'> {\n  toast: ToastPrimitive.Root.Props['toast'];\n  position?: ToastPosition;\n}\n\nexport const ToastRoot = forwardRef<\n  ElementRef<typeof ToastPrimitive.Root>,\n  ToastRootProps\n>(({ toast, className, position = 'bottom-right', ...props }, ref) => {\n  const swipeDirection = getSwipeDirection(position);\n  const hasDescription = !!toast.description;\n\n  return (\n    <ToastPrimitive.Root\n      ref={ref}\n      toast={toast}\n      className={cx(styles.root, className)}\n      swipeDirection={swipeDirection}\n      data-position={position}\n      {...props}\n    >\n      <ToastPrimitive.Content className={styles.content}>\n        <Flex direction='column' gap={1} className={styles.textContainer}>\n          {toast.title && (\n            <ToastPrimitive.Title\n              className={hasDescription ? styles.title : styles.description}\n            >\n              {toast.title}\n            </ToastPrimitive.Title>\n          )}\n          {hasDescription && (\n            <ToastPrimitive.Description className={styles.description}>\n              {toast.description}\n            </ToastPrimitive.Description>\n          )}\n        </Flex>\n        <Flex align='center' gap={3}>\n          {toast.actionProps && (\n            <ToastPrimitive.Action\n              {...toast.actionProps}\n              render={<Button variant='text' color='neutral' size='small' />}\n            />\n          )}\n          <ToastPrimitive.Close\n            aria-label='Close toast'\n            render={<IconButton size={2} />}\n          >\n            <Cross1Icon />\n          </ToastPrimitive.Close>\n        </Flex>\n      </ToastPrimitive.Content>\n    </ToastPrimitive.Root>\n  );\n});\n\nToastRoot.displayName = 'Toast';\n"],"names":[],"mappings":";;;;;;;;;;;;;AAcA;AACE;AACE;;AAGF;;;AAIA;AACE;;AAGF;AACF;;AAYE;AACA;AAEA;AAyCF;AAEA;;"}
+{"version":3,"file":"toast-root.cjs","sources":["../../../components/toast/toast-root.tsx"],"sourcesContent":["'use client';\n\nimport { Toast as ToastPrimitive } from '@base-ui/react';\nimport { Cross1Icon } from '@radix-ui/react-icons';\nimport { cx } from 'class-variance-authority';\nimport { Button } from '../button';\nimport { Flex } from '../flex';\nimport { IconButton } from '../icon-button';\nimport styles from './toast.module.css';\nimport type { ToastPosition } from './toast-provider';\n\ntype SwipeDirection = 'up' | 'down' | 'left' | 'right';\n\nfunction getSwipeDirection(position: ToastPosition): SwipeDirection[] {\n  const verticalDirection: SwipeDirection = position.startsWith('top')\n    ? 'up'\n    : 'down';\n\n  if (position.includes('center')) {\n    return [verticalDirection];\n  }\n\n  if (position.includes('left')) {\n    return ['left', verticalDirection];\n  }\n\n  return ['right', verticalDirection];\n}\n\nexport interface ToastRootProps extends ToastPrimitive.Root.Props {\n  position?: ToastPosition;\n}\n\nexport function ToastRoot({\n  toast,\n  className,\n  position = 'bottom-right',\n  ...props\n}: ToastRootProps) {\n  const swipeDirection = getSwipeDirection(position);\n  const hasDescription = !!toast.description;\n\n  return (\n    <ToastPrimitive.Root\n      toast={toast}\n      className={cx(styles.root, className)}\n      swipeDirection={swipeDirection}\n      data-position={position}\n      {...props}\n    >\n      <ToastPrimitive.Content className={styles.content}>\n        <Flex direction='column' gap={1} className={styles.textContainer}>\n          {toast.title && (\n            <ToastPrimitive.Title\n              className={hasDescription ? styles.title : styles.description}\n            >\n              {toast.title}\n            </ToastPrimitive.Title>\n          )}\n          {hasDescription && (\n            <ToastPrimitive.Description className={styles.description}>\n              {toast.description}\n            </ToastPrimitive.Description>\n          )}\n        </Flex>\n        <Flex align='center' gap={3}>\n          {toast.actionProps && (\n            <ToastPrimitive.Action\n              {...toast.actionProps}\n              render={<Button variant='text' color='neutral' size='small' />}\n            />\n          )}\n          <ToastPrimitive.Close\n            aria-label='Close toast'\n            render={<IconButton size={2} />}\n          >\n            <Cross1Icon />\n          </ToastPrimitive.Close>\n        </Flex>\n      </ToastPrimitive.Content>\n    </ToastPrimitive.Root>\n  );\n}\n\nToastRoot.displayName = 'Toast';\n"],"names":[],"mappings":";;;;;;;;;;;;AAaA;AACE;AACE;;AAGF;;;AAIA;AACE;;AAGF;AACF;AAMgB;AAMd;AACA;AAEA;AAwCF;AAEA;;"}

package/dist/components/toast/toast-root.d.ts

@@ -1,8 +1,10 @@
 import { Toast as ToastPrimitive } from '@base-ui/react';
 import type { ToastPosition } from './toast-provider';
-export interface ToastRootProps extends Omit<ToastPrimitive.Root.Props, 'toast'> {
-    toast: ToastPrimitive.Root.Props['toast'];
+export interface ToastRootProps extends ToastPrimitive.Root.Props {
     position?: ToastPosition;
 }
-export declare const ToastRoot: import("react").ForwardRefExoticComponent<Omit<ToastRootProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare function ToastRoot({ toast, className, position, ...props }: ToastRootProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace ToastRoot {
+    var displayName: string;
+}
 //# sourceMappingURL=toast-root.d.ts.map

package/dist/components/toast/toast-root.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toast-root.d.ts","sourceRoot":"","sources":["../../../components/toast/toast-root.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,IAAI,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAQzD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAoBtD,MAAM,WAAW,cACf,SAAQ,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,KAAK,EAAE,OAAO,CAAC;IAChD,KAAK,EAAE,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IAC1C,QAAQ,CAAC,EAAE,aAAa,CAAC;CAC1B;AAED,eAAO,MAAM,SAAS,wHAgDpB,CAAC"}
+{"version":3,"file":"toast-root.d.ts","sourceRoot":"","sources":["../../../components/toast/toast-root.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,IAAI,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAOzD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAoBtD,MAAM,WAAW,cAAe,SAAQ,cAAc,CAAC,IAAI,CAAC,KAAK;IAC/D,QAAQ,CAAC,EAAE,aAAa,CAAC;CAC1B;AAED,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,SAAS,EACT,QAAyB,EACzB,GAAG,KAAK,EACT,EAAE,cAAc,2CA4ChB;yBAjDe,SAAS"}