@atom-learning/components 6.0.0-beta.1 → 6.0.0-beta.10

package/dist/index.d.ts

@@ -1,5 +1,4 @@
 export * from './components';
-export * from './stitches';
-export { ColorScheme } from './experiments/color-scheme';
-export type { TcolorScheme } from './experiments/color-scheme';
-export { createThemeVariants, focusVisibleStyleBlock, NoOverflowWrapper, noOverflowStyleBlock } from './utilities';
+export * from './styled';
+export * from './experiments/color-scheme';
+export { NoOverflowWrapper } from './utilities';

package/dist/index.js

@@ -1,2 +1,2 @@
-import{Accordion as i}from"./components/accordion/Accordion.js";import{ActionIcon as l}from"./components/action-icon/ActionIcon.js";import{AlertDialog as d}from"./components/alert-dialog/AlertDialog.js";import{AlertProvider as u,useAlert as c}from"./components/alert-dialog/alert-context/AlertContext.js";import{Avatar as g}from"./components/avatar/Avatar.js";import{Badge as b}from"./components/badge/Badge.js";import{BannerRegular as F}from"./components/banner/banner-regular/BannerRegular.js";import{BannerSlim as B}from"./components/banner/banner-slim/BannerSlim.js";import{Box as D}from"./components/box/Box.js";import{Button as G,StyledButton as v}from"./components/button/Button.js";import{Carousel as y,useCarousel as P}from"./components/carousel/Carousel.js";import{Checkbox as M}from"./components/checkbox/Checkbox.js";import{CheckboxGroup as R}from"./components/checkbox-group/CheckboxGroup.js";import{CheckboxTree as V}from"./components/checkbox-tree/CheckboxTree.js";import{CheckboxField as O}from"./components/checkbox-field/CheckboxField.js";import{Chip as H}from"./components/chip/Chip.js";import{ChipGroup as j}from"./components/chip/ChipGroup.js";import{ChipDismissibleGroup as z}from"./components/chip-dismissible-group/index.js";import{ChipToggleGroup as Q}from"./components/chip-toggle-group/index.js";import{Combobox as X}from"./components/combobox/Combobox.js";import{CreatePasswordField as Z}from"./components/create-password-field/CreatePasswordField.js";import{useDataTable as $}from"./components/data-table/DataTableContext.js";import{DataTable as ro}from"./components/data-table/DataTable.js";import{DateField as to}from"./components/date-field/DateField.js";import{DateInput as mo}from"./components/date-input/DateInput.js";import{Dialog as fo}from"./components/dialog/Dialog.js";import{Dismissible as ao}from"./components/dismissible/index.js";import{DismissibleGroup as no}from"./components/dismissible-group/index.js";import{Divider as uo}from"./components/divider/Divider.js";import{Drawer as To}from"./components/drawer/Drawer.js";import{DropdownMenu as So}from"./components/dropdown-menu/DropdownMenu.js";import{EmptyState as Co}from"./components/empty-state/EmptyState.js";import{FieldWrapper as ho}from"./components/field-wrapper/FieldWrapper.js";import{InlineFieldWrapper as Io}from"./components/field-wrapper/InlineFieldWrapper.js";import{FileInput as ko}from"./components/file-input/FileInput.js";import{Flex as vo}from"./components/flex/Flex.js";import{Form as yo}from"./components/form/Form.js";import"dlv";import"react-hook-form";import"./components/form/useFormCustomContext.js";import{Grid as Ao}from"./components/grid/Grid.js";import{Heading as No}from"./components/heading/Heading.js";import{Icon as Lo}from"./components/icon/Icon.js";import{Image as Wo}from"./components/image/Image.js";import{InlineMessage as Eo}from"./components/inline-message/InlineMessage.js";import{Input as Ko,InputBackground as jo,InputText as qo}from"./components/input/Input.js";import{InputField as Jo}from"./components/input-field/InputField.js";import{Label as Uo}from"./components/label/Label.js";import{Link as Yo,StyledLink as Zo}from"./components/link/Link.js";import{List as $o}from"./components/list/List.js";import{Loader as rr}from"./components/loader/Loader.js";import{MarkdownContent as tr}from"./components/markdown-content/MarkdownContent.js";import{NavigationMenu as mr}from"./components/navigation/NavigationMenu.js";import{NavigationMenuVertical as fr}from"./components/navigation-menu-vertical/NavigationMenuVertical.js";import{NotificationBadge as ar}from"./components/notification-badge/NotificationBadge.js";import{NumberInput as nr}from"./components/number-input/NumberInput.js";import{NumberInputField as sr}from"./components/number-input-field/NumberInputField.js";import{Pagination as cr}from"./components/pagination/Pagination.js";import{PasswordField as gr}from"./components/password-field/PasswordField.js";import{PasswordInput as br}from"./components/password-input/PasswordInput.js";import{Popover as Fr}from"./components/popover/Popover.js";import{ProgressBar as Br}from"./components/progress-bar/ProgressBar.js";import{RadioButton as Dr}from"./components/radio-button/RadioButton.js";import{RadioButtonGroup as Gr}from"./components/radio-button/RadioButtonGroup.js";import{RadioButtonField as wr}from"./components/radio-button-field/RadioButtonField.js";import{RadioCard as Pr}from"./components/radio-card/RadioCard.js";import{RadioCardGroup as Mr}from"./components/radio-card/RadioCardGroup.js";import{SearchField as Rr}from"./components/search-field/SearchField.js";import{SearchInput as Vr}from"./components/search-input/SearchInput.js";import{SectionMessage as Or}from"./components/section-message/SectionMessage.js";import{Select as Hr}from"./components/select/Select.js";import{SelectField as jr}from"./components/select-field/SelectField.js";import{SideBar as zr}from"./components/side-bar/SideBar.js";import{useSidebarState as Qr}from"./components/side-bar/SideBarContext.js";import{Slider as Xr}from"./components/slider/Slider.js";import{SliderField as Zr}from"./components/slider-field/SliderField.js";import{Sortable as $r}from"./components/sortable/index.js";import{Spacer as re}from"./components/spacer/Spacer.js";import{Stepper as te}from"./components/stepper/Stepper.js";import{Switch as me}from"./components/switch/Switch.js";import{Table as fe}from"./components/table/Table.js";import{Tabs as ae}from"./components/tabs/Tabs.js";import{Text as ne}from"./components/text/Text.js";import{Textarea as se}from"./components/textarea/Textarea.js";import{TextareaField as ce}from"./components/textarea-field/TextareaField.js";import{Tile as ge}from"./components/tile/Tile.js";import{TileGroup as be}from"./components/tile/TileGroup.js";import{TileInteractive as Fe}from"./components/tile-interactive/TileInteractive.js";import{TileToggleGroup as Be}from"./components/tile-toggle-group/index.js";import{Toast as De}from"./components/toast/Toast.js";import{ToastProvider as Ge}from"./components/toast/ToastProvider.js";import{ToggleGroup as we}from"./components/toggle-group/index.js";import{Tooltip as Pe}from"./components/tooltip/Tooltip.js";import{TopBar as Me}from"./components/top-bar/TopBar.js";import{Tree as Re}from"./components/tree/Tree.js";import{Video as Ve}from"./components/video/Video.js";import{KeyboardShortcut as Oe}from"./components/keyboard-shortcut/index.js";import{SegmentedControl as He}from"./components/segmented-control/SegmentedControl.js";import{FileDrop as je}from"./components/file-drop/FileDrop.js";import{useFileDrop as ze}from"./components/file-drop/useFileDrop.js";import{createTheme as Qe,css as Ue,getCssText as Xe,globalCss as Ye,keyframes as Ze,media as _e,styled as $e,theme as ot,utils as rt}from"./stitches.js";import{ColorScheme as tt}from"./experiments/color-scheme/ColorScheme.js";import{createThemeVariants as mt}from"./utilities/create-theme-variants/createThemeVariants.js";import"./utilities/css-wrapper/CSSWrapper.js";import{NoOverflowWrapper as ft,noOverflowStyleBlock as it}from"./utilities/no-overflow-wrapper/NoOverflowWrapper.js";import"color2k";import{focusVisibleStyleBlock as lt}from"./utilities/style/focus-visible-style-block.js";import"./utilities/style/keyframe-animations.js";import{default as dt}from"react-hot-toast";export{i as Accordion,l as ActionIcon,d as AlertDialog,u as AlertProvider,g as Avatar,b as Badge,F as BannerRegular,B as BannerSlim,D as Box,G as Button,y as Carousel,M as Checkbox,O as CheckboxField,R as CheckboxGroup,V as CheckboxTree,H as Chip,z as ChipDismissibleGroup,j as ChipGroup,Q as ChipToggleGroup,tt as ColorScheme,X as Combobox,Z as CreatePasswordField,ro as DataTable,to as DateField,mo as DateInput,fo as Dialog,ao as Dismissible,no as DismissibleGroup,uo as Divider,To as Drawer,So as DropdownMenu,Co as EmptyState,ho as FieldWrapper,je as FileDrop,ko as FileInput,vo as Flex,yo as Form,Ao as Grid,No as Heading,Lo as Icon,Wo as Image,Io as InlineFieldWrapper,Eo as InlineMessage,Ko as Input,jo as InputBackground,Jo as InputField,qo as InputText,Oe as KeyboardShortcut,Uo as Label,Yo as Link,$o as List,rr as Loader,tr as MarkdownContent,mr as NavigationMenu,fr as NavigationMenuVertical,ft as NoOverflowWrapper,ar as NotificationBadge,nr as NumberInput,sr as NumberInputField,cr as Pagination,gr as PasswordField,br as PasswordInput,Fr as Popover,Br as ProgressBar,Dr as RadioButton,wr as RadioButtonField,Gr as RadioButtonGroup,Pr as RadioCard,Mr as RadioCardGroup,Rr as SearchField,Vr as SearchInput,Or as SectionMessage,He as SegmentedControl,Hr as Select,jr as SelectField,zr as SideBar,Xr as Slider,Zr as SliderField,$r as Sortable,re as Spacer,te as Stepper,v as StyledButton,Zo as StyledLink,me as Switch,fe as Table,ae as Tabs,ne as Text,se as Textarea,ce as TextareaField,ge as Tile,be as TileGroup,Fe as TileInteractive,Be as TileToggleGroup,De as Toast,Ge as ToastProvider,we as ToggleGroup,Pe as Tooltip,Me as TopBar,Re as Tree,Ve as Video,Qe as createTheme,mt as createThemeVariants,Ue as css,lt as focusVisibleStyleBlock,Xe as getCssText,Ye as globalCss,Ze as keyframes,_e as media,it as noOverflowStyleBlock,$e as styled,ot as theme,dt as toast,c as useAlert,P as useCarousel,$ as useDataTable,ze as useFileDrop,Qr as useSidebarState,rt as utils};
+import{Accordion as x}from"./components/accordion/Accordion.js";import{ActionIcon as i}from"./components/action-icon/ActionIcon.js";import{AlertDialog as l}from"./components/alert-dialog/AlertDialog.js";import{AlertProvider as d,useAlert as u}from"./components/alert-dialog/alert-context/AlertContext.js";import{Avatar as c}from"./components/avatar/Avatar.js";import{Badge as g}from"./components/badge/Badge.js";import{BannerRegular as b}from"./components/banner/banner-regular/BannerRegular.js";import{BannerSlim as C}from"./components/banner/banner-slim/BannerSlim.js";import{Box as h}from"./components/box/Box.js";import{Button as D,StyledButton as G}from"./components/button/Button.js";import{Carousel as k,useCarousel as w}from"./components/carousel/Carousel.js";import{Checkbox as A}from"./components/checkbox/Checkbox.js";import{CheckboxGroup as N}from"./components/checkbox-group/CheckboxGroup.js";import{CheckboxTree as y}from"./components/checkbox-tree/CheckboxTree.js";import{CheckboxField as W}from"./components/checkbox-field/CheckboxField.js";import{Chip as E}from"./components/chip/Chip.js";import{ChipGroup as K}from"./components/chip/ChipGroup.js";import{ChipDismissibleGroup as j}from"./components/chip-dismissible-group/index.js";import{ChipToggleGroup as z}from"./components/chip-toggle-group/index.js";import{Combobox as Q}from"./components/combobox/Combobox.js";import{CreatePasswordField as X}from"./components/create-password-field/CreatePasswordField.js";import{useDataTable as Z}from"./components/data-table/DataTableContext.js";import{DataTable as $}from"./components/data-table/DataTable.js";import{DateField as ro}from"./components/date-field/DateField.js";import{DateInput as to}from"./components/date-input/DateInput.js";import{Dialog as mo}from"./components/dialog/Dialog.js";import{Dismissible as fo}from"./components/dismissible/index.js";import{DismissibleGroup as ao}from"./components/dismissible-group/index.js";import{Divider as no}from"./components/divider/Divider.js";import{Drawer as so}from"./components/drawer/Drawer.js";import{DropdownMenu as To}from"./components/dropdown-menu/DropdownMenu.js";import{EmptyState as So}from"./components/empty-state/EmptyState.js";import{FieldWrapper as Fo}from"./components/field-wrapper/FieldWrapper.js";import{InlineFieldWrapper as Io}from"./components/field-wrapper/InlineFieldWrapper.js";import{FileInput as Bo}from"./components/file-input/FileInput.js";import{Flex as Go}from"./components/flex/Flex.js";import{Form as ko}from"./components/form/Form.js";import"dlv";import"react-hook-form";import"./components/form/useFormCustomContext.js";import{Grid as Po}from"./components/grid/Grid.js";import{Heading as Mo}from"./components/heading/Heading.js";import{Icon as Ro}from"./components/icon/Icon.js";import{Image as Lo}from"./components/image/Image.js";import{InlineMessage as Vo}from"./components/inline-message/InlineMessage.js";import{Input as Ho,InputBackground as Ko,InputText as Oo}from"./components/input/Input.js";import{InputField as qo}from"./components/input-field/InputField.js";import{Label as Jo}from"./components/label/Label.js";import{Link as Uo,StyledLink as Xo}from"./components/link/Link.js";import{List as Zo}from"./components/list/List.js";import{Loader as $o}from"./components/loader/Loader.js";import{MarkdownContent as rr}from"./components/markdown-content/MarkdownContent.js";import{NavigationMenu as tr}from"./components/navigation/NavigationMenu.js";import{NavigationMenuVertical as mr}from"./components/navigation-menu-vertical/NavigationMenuVertical.js";import{NotificationBadge as fr}from"./components/notification-badge/NotificationBadge.js";import{NumberInput as ar}from"./components/number-input/NumberInput.js";import{NumberInputField as nr}from"./components/number-input-field/NumberInputField.js";import{Pagination as ur}from"./components/pagination/Pagination.js";import{PasswordField as cr}from"./components/password-field/PasswordField.js";import{PasswordInput as gr}from"./components/password-input/PasswordInput.js";import{Popover as br}from"./components/popover/Popover.js";import{ProgressBar as Cr}from"./components/progress-bar/ProgressBar.js";import{RadioButton as hr}from"./components/radio-button/RadioButton.js";import{RadioButtonGroup as Dr}from"./components/radio-button/RadioButtonGroup.js";import{RadioButtonField as vr}from"./components/radio-button-field/RadioButtonField.js";import{RadioCard as wr}from"./components/radio-card/RadioCard.js";import{RadioCardGroup as Ar}from"./components/radio-card/RadioCardGroup.js";import{SearchField as Nr}from"./components/search-field/SearchField.js";import{SearchInput as yr}from"./components/search-input/SearchInput.js";import{SectionMessage as Wr}from"./components/section-message/SectionMessage.js";import{Select as Er}from"./components/select/Select.js";import{SelectField as Kr}from"./components/select-field/SelectField.js";import{SideBar as jr}from"./components/side-bar/SideBar.js";import{useSidebarState as zr}from"./components/side-bar/SideBarContext.js";import{Slider as Qr}from"./components/slider/Slider.js";import{SliderField as Xr}from"./components/slider-field/SliderField.js";import{Sortable as Zr}from"./components/sortable/index.js";import{Spacer as $r}from"./components/spacer/Spacer.js";import{Stepper as re}from"./components/stepper/Stepper.js";import{Switch as te}from"./components/switch/Switch.js";import{Table as me}from"./components/table/Table.js";import{Tabs as fe}from"./components/tabs/Tabs.js";import{Text as ae}from"./components/text/Text.js";import{Textarea as ne}from"./components/textarea/Textarea.js";import{TextareaField as ue}from"./components/textarea-field/TextareaField.js";import{Tile as ce}from"./components/tile/Tile.js";import{TileGroup as ge}from"./components/tile/TileGroup.js";import{TileInteractive as be}from"./components/tile-interactive/TileInteractive.js";import{TileToggleGroup as Ce}from"./components/tile-toggle-group/index.js";import{Toast as he}from"./components/toast/Toast.js";import{ToastProvider as De}from"./components/toast/ToastProvider.js";import{ToggleGroup as ve}from"./components/toggle-group/index.js";import{Tooltip as we}from"./components/tooltip/Tooltip.js";import{TopBar as Ae}from"./components/top-bar/TopBar.js";import{Tree as Ne}from"./components/tree/Tree.js";import{Video as ye}from"./components/video/Video.js";import{KeyboardShortcut as We}from"./components/keyboard-shortcut/index.js";import{SegmentedControl as Ee}from"./components/segmented-control/SegmentedControl.js";import{FileDrop as Ke}from"./components/file-drop/FileDrop.js";import{useFileDrop as je}from"./components/file-drop/useFileDrop.js";import{Theme as ze,createTheme as Je,styled as Qe}from"./styled.js";import{ColorScheme as Xe}from"./experiments/color-scheme/ColorScheme.js";import"./utilities/css-wrapper/CSSWrapper.js";import{NoOverflowWrapper as Ze}from"./utilities/no-overflow-wrapper/NoOverflowWrapper.js";import{default as $e}from"react-hot-toast";export{x as Accordion,i as ActionIcon,l as AlertDialog,d as AlertProvider,c as Avatar,g as Badge,b as BannerRegular,C as BannerSlim,h as Box,D as Button,k as Carousel,A as Checkbox,W as CheckboxField,N as CheckboxGroup,y as CheckboxTree,E as Chip,j as ChipDismissibleGroup,K as ChipGroup,z as ChipToggleGroup,Xe as ColorScheme,Q as Combobox,X as CreatePasswordField,$ as DataTable,ro as DateField,to as DateInput,mo as Dialog,fo as Dismissible,ao as DismissibleGroup,no as Divider,so as Drawer,To as DropdownMenu,So as EmptyState,Fo as FieldWrapper,Ke as FileDrop,Bo as FileInput,Go as Flex,ko as Form,Po as Grid,Mo as Heading,Ro as Icon,Lo as Image,Io as InlineFieldWrapper,Vo as InlineMessage,Ho as Input,Ko as InputBackground,qo as InputField,Oo as InputText,We as KeyboardShortcut,Jo as Label,Uo as Link,Zo as List,$o as Loader,rr as MarkdownContent,tr as NavigationMenu,mr as NavigationMenuVertical,Ze as NoOverflowWrapper,fr as NotificationBadge,ar as NumberInput,nr as NumberInputField,ur as Pagination,cr as PasswordField,gr as PasswordInput,br as Popover,Cr as ProgressBar,hr as RadioButton,vr as RadioButtonField,Dr as RadioButtonGroup,wr as RadioCard,Ar as RadioCardGroup,Nr as SearchField,yr as SearchInput,Wr as SectionMessage,Ee as SegmentedControl,Er as Select,Kr as SelectField,jr as SideBar,Qr as Slider,Xr as SliderField,Zr as Sortable,$r as Spacer,re as Stepper,G as StyledButton,Xo as StyledLink,te as Switch,me as Table,fe as Tabs,ae as Text,ne as Textarea,ue as TextareaField,ze as Theme,ce as Tile,ge as TileGroup,be as TileInteractive,Ce as TileToggleGroup,he as Toast,De as ToastProvider,ve as ToggleGroup,we as Tooltip,Ae as TopBar,Ne as Tree,ye as Video,Je as createTheme,Qe as styled,$e as toast,u as useAlert,w as useCarousel,Z as useDataTable,je as useFileDrop,zr as useSidebarState};
 //# sourceMappingURL=index.js.map

package/dist/styled.d.ts

@@ -0,0 +1,35 @@
+import React, { ElementType } from 'react';
+type Breakpoint = '@initial' | '@sm' | '@md' | '@lg' | '@xl';
+export declare const Theme: ({ children, theme }: React.PropsWithChildren<{
+    theme?: Record<string, string>;
+}>) => React.JSX.Element;
+export declare const createTheme: (config: Record<string, Record<string, string>>) => {
+    [k: string]: string;
+};
+type ResponsiveVariant<V extends string | number | boolean> = V | Partial<Record<Breakpoint, V>>;
+type Keys<V> = keyof V;
+type StringKeys<V> = Extract<Keys<V>, string>;
+type NumberKeys<V> = Extract<Keys<V>, number>;
+type BooleanKeys<V> = Extract<StringKeys<V>, 'true' | 'false'>;
+type HasBoolLikeKeys<V> = BooleanKeys<V> extends never ? Extract<StringKeys<V>, 'true' | 'false'> extends never ? false : true : true;
+type VariantValueType<V> = HasBoolLikeKeys<V> extends true ? boolean : [NumberKeys<V>] extends [never] ? StringKeys<V> : NumberKeys<V> | `${NumberKeys<V>}`;
+type VariantConfig = Record<string, Record<string | number, string[]>>;
+type VariantProps<V extends VariantConfig | undefined> = V extends VariantConfig ? {
+    [K in keyof V]?: ResponsiveVariant<VariantValueType<V[K]>>;
+} : {};
+type StyledConfig<V extends VariantConfig | undefined = undefined> = {
+    base?: string | string[];
+    variants?: V;
+    compoundVariants?: Array<{
+        class?: string | string[];
+    } & (V extends VariantConfig ? {
+        [K in keyof V]?: VariantValueType<V[K]> | VariantValueType<V[K]>[];
+    } : Record<string, never>)>;
+    defaultVariants?: V extends VariantConfig ? {
+        [K in keyof V]?: VariantValueType<V[K]>;
+    } : Record<string, never>;
+};
+export declare const styled: <TElement extends ElementType, V extends VariantConfig | undefined = undefined>(el: TElement, styles: StyledConfig<V>) => React.ForwardRefExoticComponent<React.PropsWithoutRef<Omit<React.ComponentPropsWithRef<TElement>, V extends VariantConfig ? keyof V : never> & VariantProps<V> & {
+    as?: ElementType;
+}> & React.RefAttributes<React.ElementRef<TElement>>>;
+export {};

package/dist/styled.js

@@ -0,0 +1,2 @@
+import y from"clsx";import c from"react";import{tv as N}from"tailwind-variants";const O=({children:e,theme:s})=>c.createElement("div",{className:"contents",style:s},e),h=e=>Object.fromEntries(Object.values(e).flatMap(s=>Object.entries(s).map(([n,p])=>["--".concat(n),p]))),v=(e,s)=>{const n=Object.keys(s.variants||{}),p=N(s);return c.forwardRef((a,o)=>{const E=n.map(t=>{const r=a[t],l=s.variants[t];return typeof r=="object"&&r?Object.entries(r).flatMap(([m,f])=>{const b=l&&l[f];return b?b.flatMap(j=>m==="@initial"?j:"".concat(m.replace("@",""),":").concat(j)):[]}):[]}).flat(),d=p(a),i=Object.fromEntries(Object.entries(a).filter(([t])=>!n.includes(t)&&t!=="as")),u=y(d,E).trim();if(typeof e=="string"||typeof e=="function"||e&&typeof e=="object"){const t=e;if(typeof e=="string")return c.createElement(a.as||t,{...i,ref:o,className:u});const r={...i,as:a.as,className:y(a.className,u).trim(),ref:o};return c.createElement(t,r)}if(c.isValidElement(e)){const t=e,r=t.props.className,l=i.className,m=y(r,l,u).trim(),f={...i,as:a.as||t.props.as,className:m};return o&&(f.ref=o),c.cloneElement(t,f)}throw console.log({el:e,styles:s}),Error("Something is wrong")})};export{O as Theme,h as createTheme,v as styled};
+//# sourceMappingURL=styled.js.map

package/dist/styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styled.js","sources":["../src/styled.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport React, { ElementType, ReactElement } from 'react'\nimport { tv } from 'tailwind-variants'\n\ntype Breakpoint = '@initial' | '@sm' | '@md' | '@lg' | '@xl'\n\nexport const Theme = ({\n  children,\n  theme\n}: React.PropsWithChildren<{ theme?: Record<string, string> }>) => (\n  <div className=\"contents\" style={theme}>\n    {children}\n  </div>\n)\n\nexport const createTheme = (config: Record<string, Record<string, string>>) =>\n  Object.fromEntries(\n    Object.values(config).flatMap((tokens) =>\n      Object.entries(tokens).map(([token, value]) => [`--${token}`, value])\n    )\n  )\n\n// ---------------------------------------------------------------------------\n// Local typing for styled()\n// ---------------------------------------------------------------------------\n\n// Responsive variant prop: either a single value or a per-breakpoint map\ntype ResponsiveVariant<V extends string | number | boolean> =\n  | V\n  | Partial<Record<Breakpoint, V>>\n\n// Helpers to derive value type from variant config keys\ntype Keys<V> = keyof V\ntype StringKeys<V> = Extract<Keys<V>, string>\ntype NumberKeys<V> = Extract<Keys<V>, number>\n// Booleans are represented as string keys \"true\"/\"false\" in our VariantConfig,\n// so we only need to detect those in StringKeys.\ntype BooleanKeys<V> = Extract<StringKeys<V>, 'true' | 'false'>\n\ntype HasBoolLikeKeys<V> =\n  BooleanKeys<V> extends never\n    ? Extract<StringKeys<V>, 'true' | 'false'> extends never\n      ? false\n      : true\n    : true\n\n// If a variant's keys are boolean-like, expose the prop as boolean.\n// If it has numeric keys, allow those numbers and their string forms.\n// Otherwise use a string union of the keys.\ntype VariantValueType<V> =\n  HasBoolLikeKeys<V> extends true\n    ? boolean\n    : [NumberKeys<V>] extends [never]\n      ? StringKeys<V>\n      : NumberKeys<V> | `${NumberKeys<V>}`\n\n// Shape of the `variants` section passed to styled()\ntype VariantConfig = Record<string, Record<string | number, string[]>>\n\n// Props derived from a `variants` config\ntype VariantProps<V extends VariantConfig | undefined> = V extends VariantConfig\n  ? {\n      [K in keyof V]?: ResponsiveVariant<VariantValueType<V[K]>>\n    }\n  : {}\n\n// Typed config for our styled helper.\n// We intentionally *don't* rely on tailwind-variants' TS types here;\n// we only care about enough structure to derive props.\ntype StyledConfig<V extends VariantConfig | undefined = undefined> = {\n  base?: string | string[]\n  variants?: V\n  compoundVariants?: Array<\n    {\n      class?: string | string[]\n    } & (V extends VariantConfig\n      ? {\n          [K in keyof V]?: VariantValueType<V[K]> | VariantValueType<V[K]>[]\n        }\n      : Record<string, never>)\n  >\n  defaultVariants?: V extends VariantConfig\n    ? { [K in keyof V]?: VariantValueType<V[K]> }\n    : Record<string, never>\n}\n\nexport const styled = <\n  TElement extends ElementType,\n  V extends VariantConfig | undefined = undefined\n>(\n  el: TElement,\n  styles: StyledConfig<V>\n) => {\n  const variantKeys = Object.keys(styles.variants || {})\n  const tvFn = tv(styles as any)\n\n  type VariantPropsType = VariantProps<V>\n  type BaseProps = React.ComponentPropsWithRef<TElement>\n  // Extract variant keys to omit from BaseProps so variant props override native HTML attributes\n  type VariantKeys = V extends VariantConfig ? keyof V : never\n  type StyledProps = Omit<BaseProps, VariantKeys> &\n    VariantPropsType & { as?: ElementType }\n\n  const Comp = React.forwardRef<React.ElementRef<TElement>, StyledProps>(\n    (props, ref) => {\n      const additionalStyles = variantKeys\n        .map((variantKey) => {\n          const responsiveVariantConfig:\n            | Record<Breakpoint, string>\n            | undefined = props[variantKey]\n          const variantStyles: Record<string, string[]> =\n            styles.variants![variantKey]\n\n          if (\n            typeof responsiveVariantConfig === 'object' &&\n            responsiveVariantConfig\n          ) {\n            return Object.entries(responsiveVariantConfig).flatMap(\n              ([key, val]: [Breakpoint, string]) => {\n                const styleArr: string[] = variantStyles && variantStyles[val]\n\n                if (styleArr) {\n                  return styleArr.flatMap((cls: string) => {\n                    if (key === '@initial') return cls\n                    return `${key.replace('@', '')}:${cls}`\n                  })\n                }\n                return []\n              }\n            )\n          }\n\n          return []\n        })\n        .flat()\n\n      const cls = tvFn(props)\n\n      const filteredProps = Object.fromEntries(\n        Object.entries(props).filter(\n          ([key]) => !variantKeys.includes(key) && key !== 'as'\n        )\n      )\n\n      const mergedClassName = clsx(cls, additionalStyles).trim()\n\n      if (\n        typeof el === 'string' ||\n        typeof el === 'function' ||\n        (el && typeof el === 'object')\n      ) {\n        const elementType = el as ElementType\n\n        // If el is a host string ('div', 'span', etc.) we must not pass variant props to the DOM.\n        if (typeof el === 'string') {\n          return React.createElement(props.as || elementType, {\n            ...filteredProps,\n            ref,\n            className: mergedClassName\n          })\n        }\n\n        // If el is a function component (including forwardRef), pass ALL props through\n        // (the wrapped component may expect variant props), but ensure className and ref are forwarded.\n        const propsForComponent = {\n          ...filteredProps, // original props (includes variant keys)\n          as: props.as,\n          className: clsx((props as any).className, mergedClassName).trim(),\n          ref\n        }\n\n        return React.createElement(elementType, propsForComponent)\n      }\n\n      if (React.isValidElement(el)) {\n        const element = el as ReactElement\n        // Merge existing element className, incoming filteredProps.className and our computed class\n        const existingClass = (element.props as any).className\n        const incomingClass = (filteredProps as any).className\n        const finalClassName = clsx(\n          existingClass,\n          incomingClass,\n          mergedClassName\n        ).trim()\n\n        const cloneProps: any = {\n          // ...element.props,\n          ...filteredProps,\n          as: props.as || element.props.as,\n          className: finalClassName\n        }\n\n        // Forward the ref if provided\n        if (ref) {\n          cloneProps.ref = ref\n        }\n\n        return React.cloneElement(element, cloneProps)\n      }\n\n      console.log({ el, styles })\n      throw Error('Something is wrong')\n    }\n  )\n\n  return Comp\n}\n"],"names":["Theme","children","theme","React","createTheme","config","tokens","token","value","styled","el","styles","variantKeys","tvFn","tv","props","ref","additionalStyles","variantKey","responsiveVariantConfig","variantStyles","key","val","styleArr","cls","filteredProps","mergedClassName","clsx","elementType","propsForComponent","element","existingClass","incomingClass","finalClassName","cloneProps"],"mappings":"sFAMaA,EAAQ,CAAC,CACpB,SAAAC,EACA,MAAAC,CACF,IACEC,EAAA,cAAC,MAAA,CAAI,UAAU,WAAW,MAAOD,CAC9BD,EAAAA,CACH,EAGWG,EAAeC,GAC1B,OAAO,YACL,OAAO,OAAOA,CAAM,EAAE,QAASC,GAC7B,OAAO,QAAQA,CAAM,EAAE,IAAI,CAAC,CAACC,EAAOC,CAAK,IAAM,CAAC,KAAK,OAAAD,CAASC,EAAAA,CAAK,CAAC,CACtE,CACF,EAkEWC,EAAS,CAIpBC,EACAC,IACG,CACH,MAAMC,EAAc,OAAO,KAAKD,EAAO,UAAY,CAAE,CAAA,EAC/CE,EAAOC,EAAGH,CAAa,EA+G7B,OAtGaR,EAAM,WACjB,CAACY,EAAOC,IAAQ,CACd,MAAMC,EAAmBL,EACtB,IAAKM,GAAe,CACnB,MAAMC,EAEUJ,EAAMG,CAAU,EAC1BE,EACJT,EAAO,SAAUO,CAAU,EAE7B,OACE,OAAOC,GAA4B,UACnCA,EAEO,OAAO,QAAQA,CAAuB,EAAE,QAC7C,CAAC,CAACE,EAAKC,CAAG,IAA4B,CACpC,MAAMC,EAAqBH,GAAiBA,EAAcE,CAAG,EAE7D,OAAIC,EACKA,EAAS,QAASC,GACnBH,IAAQ,WAAmBG,EACxB,GAAG,OAAAH,EAAI,QAAQ,IAAK,EAAE,EAAC,GAAA,EAAI,OAAAG,CAAAA,CACnC,EAEI,CAAA,CACT,CACF,EAGK,CAAA,CACT,CAAC,EACA,OAEGA,EAAMX,EAAKE,CAAK,EAEhBU,EAAgB,OAAO,YAC3B,OAAO,QAAQV,CAAK,EAAE,OACpB,CAAC,CAACM,CAAG,IAAM,CAACT,EAAY,SAASS,CAAG,GAAKA,IAAQ,IACnD,CACF,EAEMK,EAAkBC,EAAKH,EAAKP,CAAgB,EAAE,KAAK,EAEzD,GACE,OAAOP,GAAO,UACd,OAAOA,GAAO,YACbA,GAAM,OAAOA,GAAO,SACrB,CACA,MAAMkB,EAAclB,EAGpB,GAAI,OAAOA,GAAO,SAChB,OAAOP,EAAM,cAAcY,EAAM,IAAMa,EAAa,CAClD,GAAGH,EACH,IAAAT,EACA,UAAWU,CACb,CAAC,EAKH,MAAMG,EAAoB,CACxB,GAAGJ,EACH,GAAIV,EAAM,GACV,UAAWY,EAAMZ,EAAc,UAAWW,CAAe,EAAE,KAAK,EAChE,IAAAV,CACF,EAEA,OAAOb,EAAM,cAAcyB,EAAaC,CAAiB,CAC3D,CAEA,GAAI1B,EAAM,eAAeO,CAAE,EAAG,CAC5B,MAAMoB,EAAUpB,EAEVqB,EAAiBD,EAAQ,MAAc,UACvCE,EAAiBP,EAAsB,UACvCQ,EAAiBN,EACrBI,EACAC,EACAN,CACF,EAAE,KAAK,EAEDQ,EAAkB,CAEtB,GAAGT,EACH,GAAIV,EAAM,IAAMe,EAAQ,MAAM,GAC9B,UAAWG,CACb,EAGA,OAAIjB,IACFkB,EAAW,IAAMlB,GAGZb,EAAM,aAAa2B,EAASI,CAAU,CAC/C,CAEA,MAAQ,QAAA,IAAI,CAAE,GAAAxB,EAAI,OAAAC,CAAO,CAAC,EACpB,MAAM,oBAAoB,CAClC,CACF,CAGF"}

package/dist/utilities/css-wrapper/CSSWrapper.d.ts

@@ -1,11 +1,10 @@
 import * as React from 'react';
-import type { CSS } from '../../stitches';
 type CssWrapperProps = {
-    css?: CSS;
+    className?: string;
     children: React.ReactNode;
 };
 export declare const CSSWrapper: {
-    ({ css, children }: CssWrapperProps): React.ReactElement;
+    ({ className, children }: CssWrapperProps): React.ReactElement;
     displayName: string;
 };
 export {};

package/dist/utilities/css-wrapper/CSSWrapper.js

@@ -1,2 +1,2 @@
-import*as e from"react";import{Box as m}from"../../components/box/Box.js";const a=({css:r,children:t})=>r?e.createElement(m,{css:r},t):e.createElement(e.Fragment,null,t);a.displayName="CSSWrapper";export{a as CSSWrapper};
+import*as e from"react";const l=({className:a,children:r})=>a?e.createElement("div",{className:a},r):e.createElement(e.Fragment,null,r);l.displayName="CSSWrapper";export{l as CSSWrapper};
 //# sourceMappingURL=CSSWrapper.js.map

package/dist/utilities/css-wrapper/CSSWrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"CSSWrapper.js","sources":["../../../src/utilities/css-wrapper/CSSWrapper.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Box } from '~/components/box'\nimport type { CSS } from '~/stitches'\n\ntype CssWrapperProps = {\n  css?: CSS\n  children: React.ReactNode\n}\n\nexport const CSSWrapper = ({\n  css,\n  children\n}: CssWrapperProps): React.ReactElement =>\n  css ? (\n    <Box css={css}>{children}</Box>\n  ) : (\n    // children could be multiple elements/components,\n    // so we need a fragment here.\n    // eslint-disable-next-line react/jsx-no-useless-fragment\n    <>{children}</>\n  )\n\nCSSWrapper.displayName = 'CSSWrapper'\n"],"names":["CSSWrapper","css","children","React","Box"],"mappings":"0EAUa,MAAAA,EAAa,CAAC,CACzB,IAAAC,EACA,SAAAC,CACF,IACED,EACEE,EAAA,cAACC,EAAA,CAAI,IAAKH,GAAMC,CAAS,EAKzBC,EAAA,cAAAA,EAAA,SAAA,KAAGD,CAAS,EAGhBF,EAAW,YAAc"}
+{"version":3,"file":"CSSWrapper.js","sources":["../../../src/utilities/css-wrapper/CSSWrapper.tsx"],"sourcesContent":["import * as React from 'react'\n\ntype CssWrapperProps = {\n  className?: string\n  children: React.ReactNode\n}\n\nexport const CSSWrapper = ({\n  className,\n  children\n}: CssWrapperProps): React.ReactElement =>\n  className ? (\n    <div className={className}>{children}</div>\n  ) : (\n    // children could be multiple elements/components,\n    // so we need a fragment here.\n    // eslint-disable-next-line react/jsx-no-useless-fragment\n    <>{children}</>\n  )\n\nCSSWrapper.displayName = 'CSSWrapper'\n"],"names":["CSSWrapper","className","children","React"],"mappings":"wBAOO,MAAMA,EAAa,CAAC,CACzB,UAAAC,EACA,SAAAC,CACF,IACED,EACEE,EAAA,cAAC,MAAI,CAAA,UAAWF,CAAYC,EAAAA,CAAS,EAKrCC,EAAA,cAAAA,EAAA,SAAGD,KAAAA,CAAS,EAGhBF,EAAW,YAAc"}

package/dist/utilities/hooks/useResizeObserver.js.map

@@ -1 +1 @@
-{"version":3,"file":"useResizeObserver.js","sources":["../../../src/utilities/hooks/useResizeObserver.ts"],"sourcesContent":["import * as React from 'react'\nimport { debounce } from 'throttle-debounce'\n\ntype TUseResizeObserverOptions = {\n  elements: (HTMLElement | undefined | null)[]\n  onResize: (entries: ResizeObserverEntry[]) => void\n  delay?: number\n}\n\ntype TUseResizeObserverOutput = ResizeObserver | null\n\nconst createResizeObserver = (\n  callback: (entries: ResizeObserverEntry[]) => void\n) => {\n  try {\n    return new ResizeObserver(callback)\n  } catch {\n    return null\n  }\n}\n\nexport const useResizeObserver = ({\n  delay = 500,\n  elements,\n  onResize\n}: TUseResizeObserverOptions): TUseResizeObserverOutput => {\n  const observer = React.useMemo(\n    () => createResizeObserver(debounce(delay, onResize)),\n    [delay, onResize]\n  )\n\n  React.useEffect(() => {\n    elements.forEach((element) => {\n      if (element) {\n        observer?.observe(element)\n      }\n    })\n\n    return () => {\n      elements.forEach((element) => element && observer?.unobserve(element))\n    }\n  }, [observer, elements])\n\n  return observer\n}\n"],"names":["createResizeObserver","callback","useResizeObserver","delay","elements","onResize","observer","React","debounce","element"],"mappings":"qEAWA,MAAMA,EACJC,GACG,CACH,GAAI,CACF,OAAO,IAAI,eAAeA,CAAQ,CACpC,OACE,OAAO,IACT,CACF,EAEaC,EAAoB,CAAC,CAChC,MAAAC,EAAQ,IACR,SAAAC,EACA,SAAAC,CACF,IAA2D,CACzD,MAAMC,EAAWC,EAAM,QACrB,IAAMP,EAAqBQ,EAASL,EAAOE,CAAQ,CAAC,EACpD,CAACF,EAAOE,CAAQ,CAClB,EAEA,OAAAE,EAAM,UAAU,KACdH,EAAS,QAASK,GAAY,CACxBA,IACFH,GAAA,MAAAA,EAAU,QAAQG,CAEtB,EAAA,CAAC,EAEM,IAAM,CACXL,EAAS,QAASK,GAAYA,IAAWH,GAAA,KAAA,OAAAA,EAAU,UAAUG,CAAAA,EAAQ,CACvE,GACC,CAACH,EAAUF,CAAQ,CAAC,EAEhBE,CACT"}
+{"version":3,"file":"useResizeObserver.js","sources":["../../../src/utilities/hooks/useResizeObserver.ts"],"sourcesContent":["import * as React from 'react'\nimport { debounce } from 'throttle-debounce'\n\ntype TUseResizeObserverOptions = {\n  elements: (HTMLElement | undefined | null)[]\n  onResize: (entries: ResizeObserverEntry[]) => void\n  delay?: number\n}\n\ntype TUseResizeObserverOutput = ResizeObserver | null\n\nconst createResizeObserver = (\n  callback: (entries: ResizeObserverEntry[]) => void\n) => {\n  try {\n    return new ResizeObserver(callback)\n  } catch {\n    return null\n  }\n}\n\nexport const useResizeObserver = ({\n  delay = 500,\n  elements,\n  onResize\n}: TUseResizeObserverOptions): TUseResizeObserverOutput => {\n  const observer = React.useMemo(\n    () => createResizeObserver(debounce(delay, onResize)),\n    [delay, onResize]\n  )\n\n  React.useEffect(() => {\n    elements.forEach((element) => {\n      if (element) {\n        observer?.observe(element)\n      }\n    })\n\n    return () => {\n      elements.forEach((element) => element && observer?.unobserve(element))\n    }\n  }, [observer, elements])\n\n  return observer\n}\n"],"names":["createResizeObserver","callback","useResizeObserver","delay","elements","onResize","observer","React","debounce","element"],"mappings":"qEAWA,MAAMA,EACJC,GACG,CACH,GAAI,CACF,OAAO,IAAI,eAAeA,CAAQ,CACpC,MAAQ,CACN,OAAO,IACT,CACF,EAEaC,EAAoB,CAAC,CAChC,MAAAC,EAAQ,IACR,SAAAC,EACA,SAAAC,CACF,IAA2D,CACzD,MAAMC,EAAWC,EAAM,QACrB,IAAMP,EAAqBQ,EAASL,EAAOE,CAAQ,CAAC,EACpD,CAACF,EAAOE,CAAQ,CAClB,EAEA,OAAAE,EAAM,UAAU,KACdH,EAAS,QAASK,GAAY,CACxBA,IACFH,GAAA,MAAAA,EAAU,QAAQG,CAEtB,EAAA,CAAC,EAEM,IAAM,CACXL,EAAS,QAASK,GAAYA,IAAWH,GAAA,KAAA,OAAAA,EAAU,UAAUG,CAAAA,EAAQ,CACvE,GACC,CAACH,EAAUF,CAAQ,CAAC,EAEhBE,CACT"}

package/dist/utilities/hooks/useWindowSize.d.ts

@@ -0,0 +1,8 @@
+interface Size {
+    width: number | undefined;
+    height: number | undefined;
+}
+export declare const useWindowSize: ({ delay }?: {
+    delay?: number;
+}) => Size;
+export {};

package/dist/utilities/index.d.ts

@@ -1,5 +1,4 @@
-export * from './create-theme-variants';
 export * from './css-wrapper';
-export { NoOverflowWrapper, noOverflowStyleBlock } from './no-overflow-wrapper';
 export * from './style';
 export * from './types';
+export * from './no-overflow-wrapper';