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

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>\n              <Tooltip.Trigger\n                render={\n                  <span className={styles.helpIcon}>\n                    <InfoCircledIcon />\n                  </span>\n                }\n              />\n              <Tooltip.Content side='right'>{infoTooltip}</Tooltip.Content>\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;AAiDF;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"}

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

@@ -3,7 +3,6 @@ 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 { forwardRef } from 'react';
 import { Button } from '../button/button.js';
 import { Flex } from '../flex/flex.js';
 import { IconButton } from '../icon-button/icon-button.js';
@@ -21,11 +20,11 @@ function getSwipeDirection(position) {
     }
     return ['right', verticalDirection];
 }
-const ToastRoot = 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 (jsx(Toast.Root, { ref: ref, 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, {}) })] })] }) }));
-});
+    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 };

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

@@ -1 +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 { 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.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;;"}

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

@@ -1,6 +1,8 @@
 import { Toast as ToastPrimitive } from '@base-ui/react';
-export declare const Toast: import("react").ForwardRefExoticComponent<Omit<import("./toast-root").ToastRootProps, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
-    Provider: import("react").ForwardRefExoticComponent<import("./toast-provider").ToastProviderProps & import("react").RefAttributes<HTMLDivElement>>;
+import { ToastProvider } from './toast-provider';
+import { ToastRoot } from './toast-root';
+export declare const Toast: typeof ToastRoot & {
+    Provider: typeof ToastProvider;
     createToastManager: typeof ToastPrimitive.createToastManager;
     useToastManager: typeof ToastPrimitive.useToastManager;
 };

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

@@ -1 +1 @@
-{"version":3,"file":"toast.d.ts","sourceRoot":"","sources":["../../../components/toast/toast.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,IAAI,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAIzD,eAAO,MAAM,KAAK;;;;CAIhB,CAAC;AAEH,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC"}
+{"version":3,"file":"toast.d.ts","sourceRoot":"","sources":["../../../components/toast/toast.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,IAAI,cAAc,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzC,eAAO,MAAM,KAAK;;;;CAIhB,CAAC;AAEH,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/components/toggle/__tests__/toggle.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=toggle.test.d.ts.map

package/dist/components/toggle/__tests__/toggle.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle.test.d.ts","sourceRoot":"","sources":["../../../../components/toggle/__tests__/toggle.test.tsx"],"names":[],"mappings":""}

package/dist/components/toggle/index.d.ts

@@ -0,0 +1,2 @@
+export { Toggle } from './toggle';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/toggle/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC"}

package/dist/components/toggle/toggle.cjs

@@ -0,0 +1,36 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var toggle = require('@base-ui/react/toggle');
+var toggleGroup = require('@base-ui/react/toggle-group');
+var classVarianceAuthority = require('class-variance-authority');
+var toggle_module = require('./toggle.module.css.cjs');
+
+const toggleVariants = classVarianceAuthority.cva(toggle_module.default.toggle, {
+    variants: {
+        size: {
+            1: toggle_module.default['size-1'],
+            2: toggle_module.default['size-2'],
+            3: toggle_module.default['size-3'],
+            4: toggle_module.default['size-4']
+        }
+    },
+    defaultVariants: {
+        size: 3
+    }
+});
+function ToggleRoot({ className, children, size, ...props }) {
+    return (jsxRuntime.jsx(toggle.Toggle, { className: toggleVariants({ size, className }), ...props, children: jsxRuntime.jsx("span", { className: toggle_module.default.toggleContent, children: children }) }));
+}
+ToggleRoot.displayName = 'Toggle';
+function ToggleGroup({ className, ...props }) {
+    return (jsxRuntime.jsx(toggleGroup.ToggleGroup, { className: classVarianceAuthority.cx(toggle_module.default.group, className), ...props }));
+}
+ToggleGroup.displayName = 'Toggle.Group';
+const Toggle = Object.assign(ToggleRoot, {
+    Group: ToggleGroup
+});
+
+exports.Toggle = Toggle;
+//# sourceMappingURL=toggle.cjs.map

package/dist/components/toggle/toggle.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle.cjs","sources":["../../../components/toggle/toggle.tsx"],"sourcesContent":["'use client';\n\nimport { Toggle as TogglePrimitive } from '@base-ui/react/toggle';\nimport { ToggleGroup as ToggleGroupPrimitive } from '@base-ui/react/toggle-group';\nimport { cva, cx, type VariantProps } from 'class-variance-authority';\n\nimport styles from './toggle.module.css';\n\nconst toggleVariants = cva(styles.toggle, {\n  variants: {\n    size: {\n      1: styles['size-1'],\n      2: styles['size-2'],\n      3: styles['size-3'],\n      4: styles['size-4']\n    }\n  },\n  defaultVariants: {\n    size: 3\n  }\n});\n\nexport interface ToggleProps\n  extends TogglePrimitive.Props,\n    VariantProps<typeof toggleVariants> {\n  size?: 1 | 2 | 3 | 4;\n}\n\nfunction ToggleRoot({ className, children, size, ...props }: ToggleProps) {\n  return (\n    <TogglePrimitive className={toggleVariants({ size, className })} {...props}>\n      <span className={styles.toggleContent}>{children}</span>\n    </TogglePrimitive>\n  );\n}\n\nToggleRoot.displayName = 'Toggle';\n\nfunction ToggleGroup({ className, ...props }: ToggleGroupPrimitive.Props) {\n  return (\n    <ToggleGroupPrimitive className={cx(styles.group, className)} {...props} />\n  );\n}\n\nToggleGroup.displayName = 'Toggle.Group';\n\nexport const Toggle = Object.assign(ToggleRoot, {\n  Group: ToggleGroup\n});\n"],"names":[],"mappings":";;;;;;;;;AAQA;AACE;AACE;AACE;AACA;AACA;AACA;AACD;AACF;AACD;AACE;AACD;AACF;AAQD;AACE;AAKF;AAEA;AAEA;AACE;AAGF;AAEA;;AAGE;AACD;;"}

package/dist/components/toggle/toggle.d.ts

@@ -0,0 +1,22 @@
+import { Toggle as TogglePrimitive } from '@base-ui/react/toggle';
+import { ToggleGroup as ToggleGroupPrimitive } from '@base-ui/react/toggle-group';
+import { type VariantProps } from 'class-variance-authority';
+declare const toggleVariants: (props?: ({
+    size?: 1 | 2 | 3 | 4 | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface ToggleProps extends TogglePrimitive.Props, VariantProps<typeof toggleVariants> {
+    size?: 1 | 2 | 3 | 4;
+}
+declare function ToggleRoot({ className, children, size, ...props }: ToggleProps): import("react/jsx-runtime").JSX.Element;
+declare namespace ToggleRoot {
+    var displayName: string;
+}
+declare function ToggleGroup({ className, ...props }: ToggleGroupPrimitive.Props): import("react/jsx-runtime").JSX.Element;
+declare namespace ToggleGroup {
+    var displayName: string;
+}
+export declare const Toggle: typeof ToggleRoot & {
+    Group: typeof ToggleGroup;
+};
+export {};
+//# sourceMappingURL=toggle.d.ts.map

package/dist/components/toggle/toggle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle.d.ts","sourceRoot":"","sources":["../../../components/toggle/toggle.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAClE,OAAO,EAAE,WAAW,IAAI,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AAClF,OAAO,EAAW,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAItE,QAAA,MAAM,cAAc;;8EAYlB,CAAC;AAEH,MAAM,WAAW,WACf,SAAQ,eAAe,CAAC,KAAK,EAC3B,YAAY,CAAC,OAAO,cAAc,CAAC;IACrC,IAAI,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;CACtB;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,EAAE,WAAW,2CAMvE;kBANQ,UAAU;;;AAUnB,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,oBAAoB,CAAC,KAAK,2CAIvE;kBAJQ,WAAW;;;AAQpB,eAAO,MAAM,MAAM;;CAEjB,CAAC"}

package/dist/components/toggle/toggle.js

@@ -0,0 +1,34 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { Toggle as Toggle$1 } from '@base-ui/react/toggle';
+import { ToggleGroup as ToggleGroup$1 } from '@base-ui/react/toggle-group';
+import { cva, cx } from 'class-variance-authority';
+import styles from './toggle.module.css.js';
+
+const toggleVariants = cva(styles.toggle, {
+    variants: {
+        size: {
+            1: styles['size-1'],
+            2: styles['size-2'],
+            3: styles['size-3'],
+            4: styles['size-4']
+        }
+    },
+    defaultVariants: {
+        size: 3
+    }
+});
+function ToggleRoot({ className, children, size, ...props }) {
+    return (jsx(Toggle$1, { className: toggleVariants({ size, className }), ...props, children: jsx("span", { className: styles.toggleContent, children: children }) }));
+}
+ToggleRoot.displayName = 'Toggle';
+function ToggleGroup({ className, ...props }) {
+    return (jsx(ToggleGroup$1, { className: cx(styles.group, className), ...props }));
+}
+ToggleGroup.displayName = 'Toggle.Group';
+const Toggle = Object.assign(ToggleRoot, {
+    Group: ToggleGroup
+});
+
+export { Toggle };
+//# sourceMappingURL=toggle.js.map

package/dist/components/toggle/toggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle.js","sources":["../../../components/toggle/toggle.tsx"],"sourcesContent":["'use client';\n\nimport { Toggle as TogglePrimitive } from '@base-ui/react/toggle';\nimport { ToggleGroup as ToggleGroupPrimitive } from '@base-ui/react/toggle-group';\nimport { cva, cx, type VariantProps } from 'class-variance-authority';\n\nimport styles from './toggle.module.css';\n\nconst toggleVariants = cva(styles.toggle, {\n  variants: {\n    size: {\n      1: styles['size-1'],\n      2: styles['size-2'],\n      3: styles['size-3'],\n      4: styles['size-4']\n    }\n  },\n  defaultVariants: {\n    size: 3\n  }\n});\n\nexport interface ToggleProps\n  extends TogglePrimitive.Props,\n    VariantProps<typeof toggleVariants> {\n  size?: 1 | 2 | 3 | 4;\n}\n\nfunction ToggleRoot({ className, children, size, ...props }: ToggleProps) {\n  return (\n    <TogglePrimitive className={toggleVariants({ size, className })} {...props}>\n      <span className={styles.toggleContent}>{children}</span>\n    </TogglePrimitive>\n  );\n}\n\nToggleRoot.displayName = 'Toggle';\n\nfunction ToggleGroup({ className, ...props }: ToggleGroupPrimitive.Props) {\n  return (\n    <ToggleGroupPrimitive className={cx(styles.group, className)} {...props} />\n  );\n}\n\nToggleGroup.displayName = 'Toggle.Group';\n\nexport const Toggle = Object.assign(ToggleRoot, {\n  Group: ToggleGroup\n});\n"],"names":[],"mappings":";;;;;;;AAQA;AACE;AACE;AACE;AACA;AACA;AACA;AACD;AACF;AACD;AACE;AACD;AACF;AAQD;AACE;AAKF;AAEA;AAEA;AACE;AAGF;AAEA;;AAGE;AACD;;"}

package/dist/components/toggle/toggle.module.css.cjs

@@ -0,0 +1,8 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles = {"toggle":"toggle-module_toggle__4halU","toggleContent":"toggle-module_toggleContent__ySiAE","size-1":"toggle-module_size-1__BldJa","size-2":"toggle-module_size-2__owQW5","size-3":"toggle-module_size-3__RF25u","size-4":"toggle-module_size-4__S9m9K","group":"toggle-module_group__Gii19","size___1":"toggle-module_size-1__BldJa","size___2":"toggle-module_size-2__owQW5","size___3":"toggle-module_size-3__RF25u","size___4":"toggle-module_size-4__S9m9K"};
+
+exports.default = styles;
+//# sourceMappingURL=toggle.module.css.cjs.map

package/dist/components/toggle/toggle.module.css.cjs.map

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

package/dist/components/toggle/toggle.module.css.js

@@ -0,0 +1,4 @@
+var styles = {"toggle":"toggle-module_toggle__4halU","toggleContent":"toggle-module_toggleContent__ySiAE","size-1":"toggle-module_size-1__BldJa","size-2":"toggle-module_size-2__owQW5","size-3":"toggle-module_size-3__RF25u","size-4":"toggle-module_size-4__S9m9K","group":"toggle-module_group__Gii19","size___1":"toggle-module_size-1__BldJa","size___2":"toggle-module_size-2__owQW5","size___3":"toggle-module_size-3__RF25u","size___4":"toggle-module_size-4__S9m9K"};
+
+export { styles as default };
+//# sourceMappingURL=toggle.module.css.js.map