@raystack/apsara 0.56.7 → 1.0.0-rc.1

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/index.d.ts

@@ -1,2 +1,4 @@
-export { toast, ToastContainer } from "./toast";
+export { Toast, toastManager } from './toast';
+export type { ToastPosition, ToastProviderProps } from './toast-provider';
+export type { ToastRootProps } from './toast-root';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/toast/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/toast/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAC,cAAc,EAAE,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/toast/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAC9C,YAAY,EAAE,aAAa,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAC1E,YAAY,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC"}

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

@@ -0,0 +1,9 @@
+"use client";
+'use strict';
+
+var react = require('@base-ui/react');
+
+const toastManager = react.Toast.createToastManager();
+
+exports.toastManager = toastManager;
+//# sourceMappingURL=toast-manager.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"toast-manager.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

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

@@ -0,0 +1,2 @@
+export declare const toastManager: import("@base-ui/react").ToastManager<any>;
+//# sourceMappingURL=toast-manager.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"toast-manager.d.ts","sourceRoot":"","sources":["../../../components/toast/toast-manager.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,YAAY,4CAAsC,CAAC"}

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

@@ -0,0 +1,7 @@
+"use client";
+import { Toast } from '@base-ui/react';
+
+const toastManager = Toast.createToastManager();
+
+export { toastManager };
+//# sourceMappingURL=toast-manager.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"toast-manager.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}

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

@@ -0,0 +1,21 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('@base-ui/react');
+var classVarianceAuthority = require('class-variance-authority');
+var toast_module = require('./toast.module.css.cjs');
+var toastManager = require('./toast-manager.cjs');
+var toastRoot = require('./toast-root.cjs');
+
+function ToastList({ position }) {
+    const { toasts } = react.Toast.useToastManager();
+    return toasts.map(toast => (jsxRuntime.jsx(toastRoot.ToastRoot, { toast: toast, position: position }, toast.id)));
+}
+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;
+//# sourceMappingURL=toast-provider.cjs.map

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

@@ -0,0 +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 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

@@ -0,0 +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 ToastPrimitive.Provider.Props {
+    /**
+     * Position of the toast viewport on screen.
+     * @default "bottom-right"
+     */
+    position?: ToastPosition;
+}
+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

@@ -0,0 +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;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

@@ -0,0 +1,19 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Toast } from '@base-ui/react';
+import { cx } from 'class-variance-authority';
+import styles from './toast.module.css.js';
+import { toastManager } from './toast-manager.js';
+import { ToastRoot } from './toast-root.js';
+
+function ToastList({ position }) {
+    const { toasts } = Toast.useToastManager();
+    return toasts.map(toast => (jsx(ToastRoot, { toast: toast, position: position }, toast.id)));
+}
+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 };
+//# sourceMappingURL=toast-provider.js.map

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

@@ -0,0 +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 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

@@ -0,0 +1,33 @@
+"use client";
+'use strict';
+
+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 button = require('../button/button.cjs');
+var flex = require('../flex/flex.cjs');
+var iconButton = require('../icon-button/icon-button.cjs');
+var toast_module = require('./toast.module.css.cjs');
+
+function getSwipeDirection(position) {
+    const verticalDirection = position.startsWith('top')
+        ? 'up'
+        : 'down';
+    if (position.includes('center')) {
+        return [verticalDirection];
+    }
+    if (position.includes('left')) {
+        return ['left', verticalDirection];
+    }
+    return ['right', verticalDirection];
+}
+function ToastRoot({ toast, className, position = 'bottom-right', ...props }) {
+    const swipeDirection = getSwipeDirection(position);
+    const hasDescription = !!toast.description;
+    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;
+//# sourceMappingURL=toast-root.cjs.map

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

@@ -0,0 +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 { 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

@@ -0,0 +1,10 @@
+import { Toast as ToastPrimitive } from '@base-ui/react';
+import type { ToastPosition } from './toast-provider';
+export interface ToastRootProps extends ToastPrimitive.Root.Props {
+    position?: ToastPosition;
+}
+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

@@ -0,0 +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;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"}

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

@@ -0,0 +1,31 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Toast } from '@base-ui/react';
+import { Cross1Icon } from '@radix-ui/react-icons';
+import { cx } from 'class-variance-authority';
+import { Button } from '../button/button.js';
+import { Flex } from '../flex/flex.js';
+import { IconButton } from '../icon-button/icon-button.js';
+import styles from './toast.module.css.js';
+
+function getSwipeDirection(position) {
+    const verticalDirection = position.startsWith('top')
+        ? 'up'
+        : 'down';
+    if (position.includes('center')) {
+        return [verticalDirection];
+    }
+    if (position.includes('left')) {
+        return ['left', verticalDirection];
+    }
+    return ['right', verticalDirection];
+}
+function ToastRoot({ toast, className, position = 'bottom-right', ...props }) {
+    const swipeDirection = getSwipeDirection(position);
+    const hasDescription = !!toast.description;
+    return (jsx(Toast.Root, { toast: toast, className: cx(styles.root, className), swipeDirection: swipeDirection, "data-position": position, ...props, children: jsxs(Toast.Content, { className: styles.content, children: [jsxs(Flex, { direction: 'column', gap: 1, className: styles.textContainer, children: [toast.title && (jsx(Toast.Title, { className: hasDescription ? styles.title : styles.description, children: toast.title })), hasDescription && (jsx(Toast.Description, { className: styles.description, children: toast.description }))] }), jsxs(Flex, { align: 'center', gap: 3, children: [toast.actionProps && (jsx(Toast.Action, { ...toast.actionProps, render: jsx(Button, { variant: 'text', color: 'neutral', size: 'small' }) })), jsx(Toast.Close, { "aria-label": 'Close toast', render: jsx(IconButton, { size: 2 }), children: jsx(Cross1Icon, {}) })] })] }) }));
+}
+ToastRoot.displayName = 'Toast';
+
+export { ToastRoot };
+//# sourceMappingURL=toast-root.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"toast-root.js","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;;"}