@atom-learning/components 6.0.0-beta.2 → 6.0.0-beta.21

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,42 @@
+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 | string[]>>;
+type VariantProps<V extends VariantConfig | undefined, R extends boolean = false> = V extends VariantConfig ? R extends true ? {
+    [K in keyof V]?: ResponsiveVariant<VariantValueType<V[K]>>;
+} : {
+    [K in keyof V]?: VariantValueType<V[K]>;
+} : unknown;
+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 function styled<TElement extends ElementType, V extends VariantConfig>(el: TElement, styles: StyledConfig<V>, options: {
+    enabledResponsiveVariants: true;
+}): React.ForwardRefExoticComponent<Omit<React.ComponentPropsWithRef<TElement>, keyof V> & VariantProps<V, true> & {
+    as?: ElementType;
+}>;
+export declare function styled<TElement extends ElementType, V extends VariantConfig | undefined = undefined>(el: TElement, styles: StyledConfig<V>): React.ForwardRefExoticComponent<Omit<React.ComponentPropsWithRef<TElement>, V extends VariantConfig ? keyof V : never> & VariantProps<V, false> & {
+    as?: ElementType;
+}>;
+export {};

package/dist/styled.js

@@ -0,0 +1,2 @@
+import N from"clsx";import p from"react";import{twMerge as y}from"tailwind-merge";import{defaultConfig as S,tv as M}from"tailwind-variants";S.twMerge=!1;const A=({children:t,theme:n})=>p.createElement("div",{className:"contents",style:n},t),R=t=>Object.fromEntries(Object.values(t).flatMap(n=>Object.entries(n).map(([d,m])=>["--".concat(d),m])));function T(t,n,d){const m=Object.keys(n.variants||{}),w=(d==null?void 0:d.enabledResponsiveVariants)===!0,C=M(n),E=p.forwardRef((o,u)=>{const O=w?m.map(e=>{const l=o[e],c=n.variants[e];return typeof l=="object"&&l&&!Array.isArray(l)?Object.entries(l).flatMap(([r,s])=>{const i=String(s),a=c&&c[i];return a&&Array.isArray(a)?a.flatMap(g=>r==="@initial"?g:"".concat(r.replace("@",""),":").concat(g)):[]}):[]}).flat():[],v=m.length>0?Object.fromEntries(Object.entries(o).filter(([e])=>m.includes(e))):{},h=C(v),b=Object.fromEntries(Object.entries(o).filter(([e])=>!m.includes(e)&&e!=="as"&&e!=="__wrapperClasses")),f=N(h,O).trim(),_=o.className,j=o.__wrapperClasses;if(typeof t=="string"||typeof t=="function"||t&&typeof t=="object"){const e=t;if(typeof t=="string"){const{className:s,...i}=b,a=j?y(j,f,_):y(f,_);return p.createElement(o.as||e,{...i,ref:u,className:a})}const{className:l,...c}=b,r=o.as;if(j){const s=y(j,f),i=y(s,_),a=(typeof e=="function"||typeof e=="object")&&e!==null&&e.__isStyledComponent===!0,g={...c,...r?{as:r}:{},...a?{__wrapperClasses:s}:{},className:i,ref:u};return p.createElement(e,g)}else{const s=(typeof e=="function"||typeof e=="object")&&e!==null&&e.__isStyledComponent===!0,i=s?_:y(f,_),a={...c,...r?{as:r}:{},...s?{__wrapperClasses:f}:{},className:i,ref:u};return p.createElement(e,a)}}if(p.isValidElement(t)){const e=t,l=e.props.className,c=b.className,r=N(l,c,f).trim(),s={...b,as:o.as||e.props.as,className:y(r)};return u&&(s.ref=u),p.cloneElement(e,s)}throw console.log({el:t,styles:n}),Error("Something is wrong")});return E.__isStyledComponent=!0,E}export{A as Theme,R as createTheme,T 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 { twMerge } from 'tailwind-merge'\nimport { defaultConfig, tv } from 'tailwind-variants'\n\ndefaultConfig.twMerge = false\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\n// Each breakpoint can have a different value from the union type V\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 | string[]>>\n\n// Options for styled() function\ntype StyledOptions = {\n  enabledResponsiveVariants?: boolean\n}\n\n// Helper to check if responsive variants are enabled\ntype AreResponsiveVariantsEnabled<O> = O extends {\n  enabledResponsiveVariants: true\n}\n  ? true\n  : false\n\n// Props derived from a `variants` config\n// If enabledResponsiveVariants is true, all variants support responsive values\n// If enabledResponsiveVariants is not provided or false, variants do not support responsive values\ntype VariantProps<\n  V extends VariantConfig | undefined,\n  R extends boolean = false\n> = V extends VariantConfig\n  ? R extends true\n    ? {\n        [K in keyof V]?: ResponsiveVariant<VariantValueType<V[K]>>\n      }\n    : {\n        [K in keyof V]?: VariantValueType<V[K]>\n      }\n  : unknown\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\n// Function overloads for better type inference\nexport function styled<TElement extends ElementType, V extends VariantConfig>(\n  el: TElement,\n  styles: StyledConfig<V>,\n  options: { enabledResponsiveVariants: true }\n): React.ForwardRefExoticComponent<\n  Omit<React.ComponentPropsWithRef<TElement>, keyof V> &\n    VariantProps<V, true> & { as?: ElementType }\n>\n\nexport function styled<\n  TElement extends ElementType,\n  V extends VariantConfig | undefined = undefined\n>(\n  el: TElement,\n  styles: StyledConfig<V>\n): React.ForwardRefExoticComponent<\n  Omit<\n    React.ComponentPropsWithRef<TElement>,\n    V extends VariantConfig ? keyof V : never\n  > &\n    VariantProps<V, false> & { as?: ElementType }\n>\n\n// Implementation\nexport function styled<\n  TElement extends ElementType,\n  V extends VariantConfig | undefined = undefined,\n  O extends StyledOptions | undefined = undefined\n>(el: TElement, styles: StyledConfig<V>, options?: O) {\n  const variantKeys = Object.keys(styles.variants || {})\n  const enabledResponsiveVariants = options?.enabledResponsiveVariants === true\n  const tvFn = tv(styles as any)\n\n  type ResponsiveVariantsEnabled = AreResponsiveVariantsEnabled<O>\n  type VariantPropsType = VariantProps<V, ResponsiveVariantsEnabled>\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 = enabledResponsiveVariants\n        ? variantKeys\n            .map((variantKey) => {\n              const responsiveVariantConfig:\n                | Record<Breakpoint, string | number>\n                | undefined = props[variantKey]\n              const variantStyles: Record<string, string | string[]> =\n                styles.variants![variantKey]\n\n              if (\n                typeof responsiveVariantConfig === 'object' &&\n                responsiveVariantConfig &&\n                !Array.isArray(responsiveVariantConfig)\n              ) {\n                return Object.entries(responsiveVariantConfig).flatMap(\n                  ([key, val]: [Breakpoint, string | number]) => {\n                    const valStr = String(val)\n                    const styleArr: string | string[] =\n                      variantStyles && variantStyles[valStr]\n\n                    if (styleArr && Array.isArray(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\n      // Filter out variant props that don't belong to this component before calling tvFn\n      // This prevents tailwind-variants from processing props meant for wrapped components\n      // Only pass props that are in this component's variant keys\n      const propsForTv =\n        variantKeys.length > 0\n          ? Object.fromEntries(\n              Object.entries(props).filter(([key]) => variantKeys.includes(key))\n            )\n          : {}\n\n      const cls = tvFn(propsForTv)\n\n      const filteredProps = Object.fromEntries(\n        Object.entries(props).filter(\n          ([key]) =>\n            !variantKeys.includes(key) &&\n            key !== 'as' &&\n            key !== '__wrapperClasses'\n        )\n      )\n\n      const mergedClassName = clsx(cls, additionalStyles).trim()\n      const propsClassName = (props as any).className\n      // Check for wrapper classes passed from a parent styled component\n      const wrapperClasses = (props as any).__wrapperClasses\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          const { className: _, ...restFilteredProps } = filteredProps as any\n          // Merge order: wrapper classes (lowest priority) < component classes < user's className (highest priority)\n          // This ensures variant classes from this component override base classes from wrapper\n          const finalClassName = wrapperClasses\n            ? twMerge(wrapperClasses, mergedClassName, propsClassName)\n            : twMerge(mergedClassName, propsClassName)\n          return React.createElement(props.as || elementType, {\n            ...restFilteredProps,\n            ref,\n            className: finalClassName\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        // We need to pass all props (not filteredProps) because the underlying component may have its own variants\n        //\n        // For className merging with wrapped styled components:\n        // Solution: Pass wrapper's classes via __wrapperClasses prop for styled components to merge correctly.\n        // For regular function components, merge wrapper classes with our classes and pass as className.\n        // This ensures:\n        //   - Styled components can merge: wrapper classes < wrapped component classes < user's className\n        //   - Regular components get merged classes directly and don't receive __wrapperClasses\n        // Filter out variant props and __wrapperClasses from props passed to function components\n        // This prevents them from ending up in the DOM.\n        // Note: We filter out variant props that belong to THIS component. Variant props that belong to\n        // the wrapped component will be passed through (they're not in variantKeys), and the wrapped\n        // component will filter them if it's a styled component.\n        // Note: 'as' prop is filtered from filteredProps to prevent it from going to DOM for string elements,\n        // but we add it back for function components since they need it for polymorphism.\n        const { className: _, ...restFilteredProps } = filteredProps as any\n        const asProp = (props as any).as // Extract 'as' prop separately\n        // Note: __wrapperClasses is already filtered out in filteredProps, so restFilteredProps doesn't include it\n\n        // For styled components: Pass wrapper classes via __wrapperClasses so they can merge correctly.\n        // Styled components extract __wrapperClasses from props (before filteredProps) and filter it in filteredProps.\n        // For regular function components: We merge wrapper classes into className, but also pass __wrapperClasses\n        // which they may spread. To prevent it in DOM, we need to ensure it's filtered, but we can't control that.\n        // However, styled components that wrap regular components will filter __wrapperClasses in their filteredProps.\n        if (wrapperClasses) {\n          // We have wrapper classes from parent - this is a nested styled component scenario\n          // Merge order: wrapper classes (base) < this component's classes (variants) < user's className\n          // This ensures variant classes override base classes via twMerge\n          const combinedWrapperClasses = twMerge(\n            wrapperClasses,\n            mergedClassName\n          )\n          const finalClassName = twMerge(combinedWrapperClasses, propsClassName)\n\n          // Check if the wrapped component is a styled component\n          // React.forwardRef components are objects, not functions\n          const isStyledComponent =\n            (typeof elementType === 'function' ||\n              typeof elementType === 'object') &&\n            elementType !== null &&\n            (elementType as any).__isStyledComponent === true\n\n          const propsForComponent = {\n            ...restFilteredProps, // Base props (filters THIS component's variant props, __wrapperClasses, 'as')\n            ...(asProp ? { as: asProp } : {}), // Add 'as' prop back for function components (polymorphic support)\n            // Note: We don't add variant props back - they're already filtered by filteredProps.\n            // If the wrapped component needs variant props, they should be passed as regular props\n            // (not as variant props for THIS component).\n            // Only pass __wrapperClasses to styled components\n            ...(isStyledComponent\n              ? { __wrapperClasses: combinedWrapperClasses }\n              : {}),\n            className: finalClassName, // For all function components (includes user's className)\n            ref\n          } as any\n          return React.createElement(elementType, propsForComponent)\n        } else {\n          // No wrapper classes from parent - we're top-level\n          // For function components: Pass __wrapperClasses so styled components can merge correctly.\n          // Styled components extract __wrapperClasses from their props (before filteredProps) and filter it in filteredProps.\n          // Regular function components will receive __wrapperClasses but should filter it out themselves.\n          // We also merge wrapper classes into className for regular function components.\n          // Note: We pass __wrapperClasses in props (not filteredProps) so styled components can access it,\n          // but styled components filter it in their filteredProps so it won't go to DOM.\n          // Regular function components that spread all props will pass __wrapperClasses to DOM, which is a problem.\n          // But we can't distinguish them, so we rely on styled components filtering it.\n          // Check if the wrapped component is a styled component\n          // elementType is the component itself (e.g., Inner when Outer extends Inner)\n          // React.forwardRef components are objects, not functions, but we can still check the flag\n          const isStyledComponent =\n            (typeof elementType === 'function' ||\n              typeof elementType === 'object') &&\n            elementType !== null &&\n            (elementType as any).__isStyledComponent === true\n\n          // For styled components: Don't merge wrapper classes into className - they use __wrapperClasses instead\n          // This ensures the merge order is: wrapper classes (from __wrapperClasses) < variant classes < user's className\n          // For regular function components: Merge wrapper classes into className\n          const classNameForComponent = isStyledComponent\n            ? propsClassName // Only user's className, not wrapper's classes (styled components use __wrapperClasses)\n            : twMerge(mergedClassName, propsClassName) // Merged classes for regular function components\n\n          const propsForComponent = {\n            ...restFilteredProps, // Filters out __wrapperClasses, variant props, 'as'\n            ...(asProp ? { as: asProp } : {}),\n            // Only pass __wrapperClasses to styled components\n            ...(isStyledComponent ? { __wrapperClasses: mergedClassName } : {}),\n            className: classNameForComponent,\n            ref\n          } as any\n          return React.createElement(elementType, propsForComponent)\n        }\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: twMerge(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  // Mark the component as a styled component so we can detect it later\n  ;(Comp as any).__isStyledComponent = true\n\n  return Comp\n}\n"],"names":["defaultConfig","Theme","children","theme","React","createTheme","config","tokens","token","value","styled","el","styles","options","variantKeys","enabledResponsiveVariants","tvFn","tv","Comp","props","ref","additionalStyles","variantKey","responsiveVariantConfig","variantStyles","key","val","valStr","styleArr","cls","propsForTv","filteredProps","mergedClassName","clsx","propsClassName","wrapperClasses","elementType","_","restFilteredProps","finalClassName","twMerge","asProp","combinedWrapperClasses","isStyledComponent","propsForComponent","classNameForComponent","element","existingClass","incomingClass","cloneProps"],"mappings":"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"}

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';