@atom-learning/components 6.0.0-beta.5 → 6.0.0-beta.7

package/dist/src/components/tree/TreeCollapsible.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+type TreeCollapsibleContextValue = {
+    triggerRef?: React.MutableRefObject<HTMLElement | null>;
+    setTriggerRef?: (HTMLElement: any) => void;
+};
+export declare const TreeCollapsibleContext: React.Context<TreeCollapsibleContextValue>;
+export declare const TreeCollapsible: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-collapsible").CollapsibleProps & React.RefAttributes<HTMLDivElement> & Omit<import("@radix-ui/react-collapsible").CollapsibleProps & React.RefAttributes<HTMLDivElement> & {
+    as?: React.ElementType;
+}, "ref">, "ref"> & React.RefAttributes<HTMLLIElement>>;
+export {};

package/dist/src/components/tree/TreeCollapsibleContent.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { TreeList } from './TreeList';
+declare const StyledTreeCollapsibleContent: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-collapsible").CollapsibleContentProps & React.RefAttributes<HTMLDivElement> & {
+    as?: React.ElementType;
+}, "ref"> & React.RefAttributes<HTMLDivElement>>;
+type TreeCollapsibleContentProps = React.ComponentProps<typeof StyledTreeCollapsibleContent> & React.ComponentProps<typeof TreeList>;
+export declare const TreeCollapsibleContent: React.ForwardRefExoticComponent<Omit<TreeCollapsibleContentProps, "ref"> & React.RefAttributes<HTMLElement>>;
+export {};

package/dist/src/components/tree/TreeIcon.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+declare const StyledTreeIcon: React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<Omit<React.SVGProps<SVGSVGElement>, "ref"> & {
+    ref?: ((instance: SVGSVGElement | null) => void) | React.RefObject<SVGSVGElement> | null | undefined;
+} & {
+    size?: ("sm" | "md" | "lg" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "lg">>) | undefined;
+} & {
+    as?: React.ElementType;
+}, "ref"> & React.RefAttributes<SVGSVGElement>, "is" | "as"> & {
+    is: React.FC<React.SVGProps<SVGSVGElement>>;
+    as?: never;
+}, "ref"> & React.RefAttributes<SVGSVGElement> & {
+    as?: React.ElementType;
+}, "ref"> & React.RefAttributes<SVGSVGElement>>;
+export declare const TreeIcon: (props: React.ComponentProps<typeof StyledTreeIcon>) => JSX.Element;
+export {};

package/dist/src/components/tree/TreeItemContent.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+export declare const TreeItemContent: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
+} & {
+    direction?: ("row" | "row-reverse" | "column" | "column-reverse" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "row" | "row-reverse" | "column" | "column-reverse" | "inherit" | "initial" | "revert" | "revert-layer" | "unset">>) | undefined;
+    wrap?: ("wrap" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "nowrap" | "wrap-reverse" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "wrap" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "nowrap" | "wrap-reverse">>) | undefined;
+    justify?: ("end" | "start" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "unsafe" | "safe" | "center" | "flex-start" | "flex-end" | "left" | "right" | "space-between" | "space-around" | "space-evenly" | "stretch" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "end" | "start" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "unsafe" | "safe" | "center" | "flex-start" | "flex-end" | "left" | "right" | "space-between" | "space-around" | "space-evenly" | "stretch">>) | undefined;
+    align?: ("end" | "start" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "unsafe" | "safe" | "center" | "flex-start" | "flex-end" | "stretch" | "self-start" | "self-end" | "baseline" | "first baseline" | "last baseline" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "end" | "start" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "unsafe" | "safe" | "center" | "flex-start" | "flex-end" | "stretch" | "self-start" | "self-end" | "baseline" | "first baseline" | "last baseline">>) | undefined;
+    gap?: (0 | 1 | 2 | "0" | 3 | 4 | 5 | 6 | 7 | 8 | 9 | "1" | "2" | "3" | "4" | "24" | "5" | "6" | "7" | "8" | "9" | 24 | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", 0 | 1 | 2 | "0" | 3 | 4 | 5 | 6 | 7 | 8 | 9 | "1" | "2" | "3" | "4" | "24" | "5" | "6" | "7" | "8" | "9" | 24>>) | undefined;
+} & {
+    as?: React.ElementType;
+}, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/src/components/tree/TreeList.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { Flex } from '../../../components/flex';
+type TreeListProps = Omit<React.ComponentProps<typeof Flex>, 'direction'>;
+export declare const TreeList: React.ForwardRefExoticComponent<Omit<TreeListProps, "ref"> & React.RefAttributes<HTMLElement>>;
+export {};

package/dist/src/components/tree/TreeListItem.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+export declare const TreeListItem: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
+} & {
+    direction?: ("row" | "row-reverse" | "column" | "column-reverse" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "row" | "row-reverse" | "column" | "column-reverse" | "inherit" | "initial" | "revert" | "revert-layer" | "unset">>) | undefined;
+    wrap?: ("wrap" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "nowrap" | "wrap-reverse" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "wrap" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "nowrap" | "wrap-reverse">>) | undefined;
+    justify?: ("end" | "start" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "unsafe" | "safe" | "center" | "flex-start" | "flex-end" | "left" | "right" | "space-between" | "space-around" | "space-evenly" | "stretch" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "end" | "start" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "unsafe" | "safe" | "center" | "flex-start" | "flex-end" | "left" | "right" | "space-between" | "space-around" | "space-evenly" | "stretch">>) | undefined;
+    align?: ("end" | "start" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "unsafe" | "safe" | "center" | "flex-start" | "flex-end" | "stretch" | "self-start" | "self-end" | "baseline" | "first baseline" | "last baseline" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "end" | "start" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "unsafe" | "safe" | "center" | "flex-start" | "flex-end" | "stretch" | "self-start" | "self-end" | "baseline" | "first baseline" | "last baseline">>) | undefined;
+    gap?: (0 | 1 | 2 | "0" | 3 | 4 | 5 | 6 | 7 | 8 | 9 | "1" | "2" | "3" | "4" | "24" | "5" | "6" | "7" | "8" | "9" | 24 | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", 0 | 1 | 2 | "0" | 3 | 4 | 5 | 6 | 7 | 8 | 9 | "1" | "2" | "3" | "4" | "24" | "5" | "6" | "7" | "8" | "9" | 24>>) | undefined;
+} & {
+    as?: React.ElementType;
+}, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLLIElement>>;

package/dist/{components → src/components}/tree/TreeText.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Text } from '../../components/text';
+import { Text } from '../../../components/text';
 type TStyledTreeTextProps = React.ComponentProps<typeof Text>;
 export declare const TreeText: (props: TStyledTreeTextProps) => JSX.Element;
 export {};

package/dist/src/components/video/Video.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import ReactPlayer from 'react-player/vimeo';
+import { Override } from '~/utilities/types';
+type VideoProps = Override<React.ComponentProps<typeof ReactPlayer>, {
+    id: string;
+    ratio?: number;
+    className?: string;
+}>;
+export declare const Video: React.ForwardRefExoticComponent<Omit<VideoProps, "ref"> & React.RefAttributes<any>>;
+export {};

package/dist/{experiments/color-scheme/stitches.colorscheme.config.d.ts → src/experiments/color-scheme/ColorScheme.config.d.ts}

@@ -1,4 +1,6 @@
-export declare const colorSchemes: {};
+type ColorSchemeKeys = 'interactive' | 'base' | 'accent' | 'foreground';
+type ColorScheme = Partial<Record<`--${ColorSchemeKeys}` | `--${ColorSchemeKeys}-${string}`, string>>;
+export declare const colorSchemes: Record<string, ColorScheme>;
 export declare const bases: {
     primary1: {
         colorName: string;
@@ -185,3 +187,4 @@ export declare const accents: {
         colorName: string;
     };
 };
+export {};

package/dist/src/experiments/color-scheme/ColorScheme.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { accents, bases } from './ColorScheme.config';
+export type TcolorScheme = {
+    base?: keyof typeof bases;
+    accent?: keyof typeof accents;
+    interactive?: 'loContrast' | 'hiContrast';
+};
+/**
+ * @experimental Component has not been finalised. Further design input required. Use with caution.
+ */
+export declare const ColorScheme: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & TcolorScheme & {
+    asChild?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;

package/dist/src/index.d.ts

@@ -0,0 +1,4 @@
+export * from './components';
+export * from './styled';
+export * from './experiments/color-scheme';
+export { NoOverflowWrapper } from './utilities';

package/dist/src/styled.d.ts

@@ -0,0 +1,32 @@
+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;
+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<React.ComponentPropsWithRef<TElement> & VariantProps<V> & {
+    as?: ElementType;
+}> & React.RefAttributes<React.ElementRef<TElement>>>;
+export {};

package/dist/{utilities → src/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/src/utilities/index.d.ts

@@ -0,0 +1,4 @@
+export * from './css-wrapper';
+export * from './style';
+export * from './types';
+export * from './no-overflow-wrapper';

package/dist/src/utilities/no-overflow-wrapper/NoOverflowWrapper.d.ts

@@ -0,0 +1,5 @@
+export declare const NoOverflowWrapper: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+} & {
+    as?: import("react").ElementType;
+}, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/src/utilities/no-overflow-wrapper/index.d.ts

@@ -0,0 +1 @@
+export { NoOverflowWrapper } from './NoOverflowWrapper';

package/dist/{utilities → src/utilities}/optional-tooltip-wrapper/OptionalTooltipWrapper.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Tooltip } from '../../components/tooltip';
+import { Tooltip } from '../../../components/tooltip';
 export type TOptionalTooltipWrapperProps = {
     hasTooltip?: boolean;
     label?: React.ReactNode;

package/dist/src/utilities/override-styled-variant-value/overrideStyledVariantValue.d.ts

@@ -0,0 +1 @@
+export declare const overrideStyledVariantValue: (prop: any, overrideFunction: (any: any) => any) => any;

package/dist/src/utilities/radix-overrides/toggle-group/ToggleGroupRoot.d.ts

@@ -0,0 +1,7 @@
+import * as ToggleGroup from '@radix-ui/react-toggle-group';
+import * as React from 'react';
+type RootType = {
+    disableDeselect?: boolean;
+};
+export declare const ToggleGroupRoot: React.ForwardRefExoticComponent<(Omit<ToggleGroup.ToggleGroupSingleProps & React.RefAttributes<HTMLDivElement> & RootType, "ref"> | Omit<ToggleGroup.ToggleGroupMultipleProps & React.RefAttributes<HTMLDivElement> & RootType, "ref">) & React.RefAttributes<HTMLDivElement>>;
+export {};

package/dist/src/utilities/radix-overrides/toggle-group/index.d.ts

@@ -0,0 +1,7 @@
+export declare const ToggleGroup: {
+    Root: import("react").ForwardRefExoticComponent<(Omit<import("@radix-ui/react-toggle-group").ToggleGroupSingleProps & import("react").RefAttributes<HTMLDivElement> & {
+        disableDeselect?: boolean;
+    }, "ref"> | Omit<import("@radix-ui/react-toggle-group").ToggleGroupMultipleProps & import("react").RefAttributes<HTMLDivElement> & {
+        disableDeselect?: boolean;
+    }, "ref">) & import("react").RefAttributes<HTMLDivElement>>;
+};

package/dist/src/utilities/style/backdrop-overlay.d.ts

@@ -0,0 +1 @@
+export declare const backdropOverlay: string[];

package/dist/src/utilities/style/index.d.ts

@@ -0,0 +1 @@
+export * from './get-icon-size';

package/dist/styled.js

@@ -0,0 +1,2 @@
+import p from"clsx";import o from"react";import{tv as g}from"tailwind-variants";const j=({children:t,theme:a})=>o.createElement("div",{className:"contents",style:a},t),h=(t,a)=>{const u=Object.keys(a.variants||{}),E=g(a);return o.forwardRef((s,c)=>{const N=u.map(e=>{const r=s[e],l=a.variants[e];return typeof r=="object"&&r?Object.entries(r).flatMap(([m,i])=>{const y=l&&l[i];return y?y.flatMap(d=>m==="@initial"?d:"".concat(m.replace("@",""),":").concat(d)):[]}):[]}).flat(),b=E(s),n=Object.fromEntries(Object.entries(s).filter(([e])=>!u.includes(e)&&e!=="as")),f=p(b,N).trim();if(typeof t=="string"||typeof t=="function"||t&&typeof t=="object"){const e=t;if(typeof t=="string")return o.createElement(s.as||e,{...n,as:s.as,ref:c,className:f});const r={...n,as:s.as,className:p(s.className,f).trim(),ref:c};return o.createElement(e,r)}if(o.isValidElement(t)){const e=t,r=e.props.className,l=n.className,m=p(r,l,f).trim(),i={...n,as:s.as||e.props.as,className:m};return c&&(i.ref=c),o.cloneElement(e,i)}throw console.log({el:t,styles:a}),Error("Something is wrong")})};export{j as Theme,h 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\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  type StyledProps = BaseProps & 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            as: props.as,\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","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":"gFAMO,MAAMA,EAAQ,CAAC,CACpB,SAAAC,EACA,MAAAC,CACF,IACEC,EAAA,cAAC,MAAA,CAAI,UAAU,WAAW,MAAOD,CAAAA,EAC9BD,CACH,EAmEWG,EAAS,CAIpBC,EACAC,IACG,CACH,MAAMC,EAAc,OAAO,KAAKD,EAAO,UAAY,CAAE,CAAA,EAC/CE,EAAOC,EAAGH,CAAa,EA6G7B,OAvGaH,EAAM,WACjB,CAACO,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,CACT,CAAA,CAAC,EACA,KAAK,EAEFA,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,OAAOF,EAAM,cAAcO,EAAM,IAAMa,EAAa,CAClD,GAAGH,EACH,GAAIV,EAAM,GACV,IAAAC,EACA,UAAWU,CACb,CAAC,EAKH,MAAMG,EAAoB,CACxB,GAAGJ,EACH,GAAIV,EAAM,GACV,UAAWY,EAAMZ,EAAc,UAAWW,CAAe,EAAE,KAAK,EAChE,IAAAV,CACF,EAEA,OAAOR,EAAM,cAAcoB,EAAaC,CAAiB,CAC3D,CAEA,GAAIrB,EAAM,eAAeE,CAAE,EAAG,CAC5B,MAAMoB,EAAUpB,EAEVqB,EAAiBD,EAAQ,MAAc,UACvCE,EAAiBP,EAAsB,UACvCQ,EAAiBN,EACrBI,EACAC,EACAN,CACF,EAAE,KAEIQ,EAAAA,EAAkB,CAEtB,GAAGT,EACH,GAAIV,EAAM,IAAMe,EAAQ,MAAM,GAC9B,UAAWG,CACb,EAGA,OAAIjB,IACFkB,EAAW,IAAMlB,GAGZR,EAAM,aAAasB,EAASI,CAAU,CAC/C,CAEA,MAAA,QAAQ,IAAI,CAAE,GAAAxB,EAAI,OAAAC,CAAO,CAAC,EACpB,MAAM,oBAAoB,CAClC,CACF,CAGF"}

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/no-overflow-wrapper/NoOverflowWrapper.js

@@ -1,2 +1,2 @@
-import{Box as e}from"../../components/box/Box.js";import{styled as i}from"../../stitches.js";const o=()=>({size:"100%",borderRadius:"inherit",overflow:"hidden"}),r=i(e,o());r.displayName="NoOverflowWrapper";export{r as NoOverflowWrapper,o as noOverflowStyleBlock};
+import{styled as r}from"../../styled.js";const e=r("div",{base:["size-full","rounded-[inherit]","overflow-hidden"]});e.displayName="NoOverflowWrapper";export{e as NoOverflowWrapper};
 //# sourceMappingURL=NoOverflowWrapper.js.map

package/dist/utilities/no-overflow-wrapper/NoOverflowWrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"NoOverflowWrapper.js","sources":["../../../src/utilities/no-overflow-wrapper/NoOverflowWrapper.tsx"],"sourcesContent":["import { Box } from '~/components/box'\nimport { styled } from '~/stitches'\n\nexport const noOverflowStyleBlock = (): {\n  size: string\n  borderRadius: string\n  overflow: string\n} => {\n  return {\n    size: '100%',\n    borderRadius: 'inherit',\n    overflow: 'hidden'\n  }\n}\n\nexport const NoOverflowWrapper = styled(Box, noOverflowStyleBlock())\n\nNoOverflowWrapper.displayName = 'NoOverflowWrapper'\n"],"names":["noOverflowStyleBlock","NoOverflowWrapper","styled","Box"],"mappings":"6FAGO,MAAMA,EAAuB,KAK3B,CACL,KAAM,OACN,aAAc,UACd,SAAU,QACZ,GAGWC,EAAoBC,EAAOC,EAAKH,EAAqB,CAAC,EAEnEC,EAAkB,YAAc"}
+{"version":3,"file":"NoOverflowWrapper.js","sources":["../../../src/utilities/no-overflow-wrapper/NoOverflowWrapper.tsx"],"sourcesContent":["import { styled } from '~/styled'\n\nexport const NoOverflowWrapper = styled('div', {\n  base: ['size-full', 'rounded-[inherit]', 'overflow-hidden']\n})\n\nNoOverflowWrapper.displayName = 'NoOverflowWrapper'\n"],"names":["NoOverflowWrapper","styled"],"mappings":"yCAEa,MAAAA,EAAoBC,EAAO,MAAO,CAC7C,KAAM,CAAC,YAAa,oBAAqB,iBAAiB,CAC5D,CAAC,EAEDD,EAAkB,YAAc"}

package/dist/utilities/override-styled-variant-value/overrideStyledVariantValue.js

@@ -0,0 +1,2 @@
+const c=(t,a)=>{let e;switch(typeof t){case"object":e={},Object.keys(t).forEach(o=>{const r=t[o];e[o]=r&&a(r)});break;default:e=a(t)}return e};export{c as overrideStyledVariantValue};
+//# sourceMappingURL=overrideStyledVariantValue.js.map

package/dist/utilities/override-styled-variant-value/overrideStyledVariantValue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"overrideStyledVariantValue.js","sources":["../../../src/utilities/override-styled-variant-value/overrideStyledVariantValue.ts"],"sourcesContent":["/*\n * Utility function to allow for overriding responsive variants using logic provided via the `overrideFunction` argument.\n *\n * It was developed out of a design requirement to override and pass through size properties to the <Icon /> component; depending\n * on the size of its parent component. It could be used for various other props where we want to tweak the value but\n * maintain the flexibility of a stitches variant property (which allows for use either via a string or a breakpoint object)\n * Documentation on stitches responsive variants: https://stitches.dev/docs/breakpoints#responsive-variants\n *\n */\nexport const overrideStyledVariantValue = (\n  prop: any,\n  overrideFunction: (any) => any\n) => {\n  let overrideValue\n  switch (typeof prop) {\n    case 'object':\n      overrideValue = {}\n      Object.keys(prop).forEach((breakpoint) => {\n        const propAtBreakpoint = prop[breakpoint]\n        overrideValue[breakpoint] = propAtBreakpoint\n          ? overrideFunction(propAtBreakpoint)\n          : propAtBreakpoint\n      })\n      break\n    default:\n      overrideValue = overrideFunction(prop)\n  }\n\n  return overrideValue\n}\n"],"names":["overrideStyledVariantValue","prop","overrideFunction","overrideValue","breakpoint","propAtBreakpoint"],"mappings":"AASa,MAAAA,EAA6B,CACxCC,EACAC,IACG,CACH,IAAIC,EACJ,OAAQ,OAAOF,EAAAA,CACb,IAAK,SACHE,EAAgB,CAAA,EAChB,OAAO,KAAKF,CAAI,EAAE,QAASG,GAAe,CACxC,MAAMC,EAAmBJ,EAAKG,CAAU,EACxCD,EAAcC,CAAU,EAAIC,GACxBH,EAAiBG,CAAgB,CAEvC,CAAC,EACD,MACF,QACEF,EAAgBD,EAAiBD,CAAI,CACzC,CAEA,OAAOE,CACT"}

package/dist/utilities/radix-overrides/toggle-group/ToggleGroupRoot.js

@@ -1,2 +1,2 @@
-import*as g from"@radix-ui/react-toggle-group";import*as l from"react";const m=l.forwardRef(({disableDeselect:a=!1,onValueChange:t,defaultValue:o,...r},n)=>{const[u,f]=l.useState(o),s=e=>{a&&(e===""||(e==null?void 0:e.length)===0)||(f(e),t==null||t(e))};return l.createElement(g.Root,{ref:n,onValueChange:s,value:u,...r})});export{m as ToggleGroupRoot};
+import*as d from"@radix-ui/react-toggle-group";import*as l from"react";const g=l.forwardRef(({disableDeselect:a=!1,onValueChange:t,defaultValue:o,...r},n)=>{const[u,s]=l.useState(o),f=e=>{a&&(e===""||(e==null?void 0:e.length)===0)||(s(e),t==null||t(e))};return l.createElement(d.Root,{ref:n,onValueChange:f,value:u,...r})});export{g as ToggleGroupRoot};
 //# sourceMappingURL=ToggleGroupRoot.js.map

package/dist/utilities/radix-overrides/toggle-group/ToggleGroupRoot.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleGroupRoot.js","sources":["../../../../src/utilities/radix-overrides/toggle-group/ToggleGroupRoot.tsx"],"sourcesContent":["import * as ToggleGroup from '@radix-ui/react-toggle-group'\nimport * as React from 'react'\n\ntype RootType = {\n  disableDeselect?: boolean\n}\n\ntype ToggleGroupRootProps = React.ComponentProps<typeof ToggleGroup.Root> &\n  RootType\n\nexport const ToggleGroupRoot: React.ForwardRefExoticComponent<ToggleGroupRootProps> =\n  React.forwardRef(\n    (\n      { disableDeselect = false, onValueChange, defaultValue, ...rest },\n      ref\n    ) => {\n      const [internalValue, setInternalValue] =\n        React.useState<ToggleGroupRootProps['value']>(defaultValue)\n      const handleValueChange: ToggleGroupRootProps['onValueChange'] = (\n        newValue\n      ) => {\n        if (disableDeselect && (newValue === '' || newValue?.length === 0))\n          return\n        setInternalValue(newValue)\n        onValueChange?.(newValue)\n      }\n\n      return (\n        // eslint-disable-next-line\n        // @ts-ignore Radix types complain on properties depending on whether `type=\"single\"` or `\"multiple\"`. Works correctly so muting.\n        <ToggleGroup.Root\n          ref={ref}\n          onValueChange={handleValueChange}\n          value={internalValue}\n          {...rest}\n        />\n      )\n    }\n  )\n"],"names":["ToggleGroupRoot","React","disableDeselect","onValueChange","defaultValue","rest","ref","internalValue","setInternalValue","handleValueChange","newValue","ToggleGroup"],"mappings":"uEAUO,MAAMA,EACXC,EAAM,WACJ,CACE,CAAE,gBAAAC,EAAkB,GAAO,cAAAC,EAAe,aAAAC,KAAiBC,CAAK,EAChEC,IACG,CACH,KAAM,CAACC,EAAeC,CAAgB,EACpCP,EAAM,SAAwCG,CAAY,EACtDK,EACJC,GACG,CACCR,IAAoBQ,IAAa,KAAMA,GAAA,KAAAA,OAAAA,EAAU,UAAW,KAEhEF,EAAiBE,CAAQ,EACzBP,GAAA,MAAAA,EAAgBO,CAAAA,EAClB,EAEA,OAGET,EAAA,cAACU,EAAY,KAAZ,CACC,IAAKL,EACL,cAAeG,EACf,MAAOF,EACN,GAAGF,CAAAA,CACN,CAEJ,CACF"}
+{"version":3,"file":"ToggleGroupRoot.js","sources":["../../../../src/utilities/radix-overrides/toggle-group/ToggleGroupRoot.tsx"],"sourcesContent":["import * as ToggleGroup from '@radix-ui/react-toggle-group'\nimport * as React from 'react'\n\ntype RootType = {\n  disableDeselect?: boolean\n}\n\ntype ToggleGroupRootProps = React.ComponentProps<typeof ToggleGroup.Root> &\n  RootType\n\nexport const ToggleGroupRoot = React.forwardRef<\n  HTMLDivElement,\n  ToggleGroupRootProps\n>(({ disableDeselect = false, onValueChange, defaultValue, ...rest }, ref) => {\n  const [internalValue, setInternalValue] =\n    React.useState<ToggleGroupRootProps['value']>(defaultValue)\n  const handleValueChange: ToggleGroupRootProps['onValueChange'] = (\n    newValue\n  ) => {\n    if (disableDeselect && (newValue === '' || newValue?.length === 0)) return\n    setInternalValue(newValue)\n    onValueChange?.(newValue)\n  }\n\n  return (\n    // eslint-disable-next-line\n    // @ts-ignore Radix types complain on properties depending on whether `type=\"single\"` or `\"multiple\"`. Works correctly so muting.\n    <ToggleGroup.Root\n      ref={ref}\n      onValueChange={handleValueChange}\n      value={internalValue}\n      {...rest}\n    />\n  )\n})\n"],"names":["ToggleGroupRoot","React","disableDeselect","onValueChange","defaultValue","rest","ref","internalValue","setInternalValue","handleValueChange","newValue","ToggleGroup"],"mappings":"uEAUO,MAAMA,EAAkBC,EAAM,WAGnC,CAAC,CAAE,gBAAAC,EAAkB,GAAO,cAAAC,EAAe,aAAAC,EAAc,GAAGC,CAAK,EAAGC,IAAQ,CAC5E,KAAM,CAACC,EAAeC,CAAgB,EACpCP,EAAM,SAAwCG,CAAY,EACtDK,EACJC,GACG,CACCR,IAAoBQ,IAAa,KAAMA,GAAA,KAAAA,OAAAA,EAAU,UAAW,KAChEF,EAAiBE,CAAQ,EACzBP,GAAA,MAAAA,EAAgBO,CAAAA,EAClB,EAEA,OAGET,EAAA,cAACU,EAAY,KAAZ,CACC,IAAKL,EACL,cAAeG,EACf,MAAOF,EACN,GAAGF,CAAAA,CACN,CAEJ,CAAC"}

package/dist/utilities/style/backdrop-overlay.js

@@ -1,2 +1,2 @@
-import{DIALOG_Z_INDEX as o}from"../../constants/zIndices.js";import"../../stitches.js";import"../css-wrapper/CSSWrapper.js";import"../no-overflow-wrapper/NoOverflowWrapper.js";import"color2k";import{fadeIn as t,fadeOut as a}from"./keyframe-animations.js";const e={backgroundColor:"$alpha600",position:"fixed",inset:0,zIndex:o,"@allowMotion":{'&[data-state="open"]':{animation:`${t} 250ms ease-out`},'&[data-state="closed"]':{animation:`${a} 550ms ease-out`}}};export{e as backdropOverlay};
+const a=["bg-alpha-600","fixed","inset-0","z-1147483646","motion-safe:data-[state=open]:animate-fade-in","motion-safe:data-[state=closed]:animate-fade-out"];export{a as backdropOverlay};
 //# sourceMappingURL=backdrop-overlay.js.map

package/dist/utilities/style/backdrop-overlay.js.map

@@ -1 +1 @@
-{"version":3,"file":"backdrop-overlay.js","sources":["../../../src/utilities/style/backdrop-overlay.ts"],"sourcesContent":["import { DIALOG_Z_INDEX } from '~/constants/zIndices'\nimport { fadeIn, fadeOut } from '~/utilities'\n\nexport const backdropOverlay = {\n  backgroundColor: '$alpha600',\n  position: 'fixed',\n  inset: 0,\n  zIndex: DIALOG_Z_INDEX,\n  '@allowMotion': {\n    '&[data-state=\"open\"]': {\n      animation: `${fadeIn} 250ms ease-out`\n    },\n    '&[data-state=\"closed\"]': {\n      animation: `${fadeOut} 550ms ease-out`\n    }\n  }\n}\n"],"names":["backdropOverlay","DIALOG_Z_INDEX","fadeIn","fadeOut"],"mappings":"qQAGaA,EAAkB,CAC7B,gBAAiB,YACjB,SAAU,QACV,MAAO,EACP,OAAQC,EACR,eAAgB,CACd,uBAAwB,CACtB,UAAW,GAAGC,kBAChB,EACA,yBAA0B,CACxB,UAAW,GAAGC,kBAChB,CACF,CACF"}
+{"version":3,"file":"backdrop-overlay.js","sources":["../../../src/utilities/style/backdrop-overlay.ts"],"sourcesContent":["export const backdropOverlay = [\n  'bg-alpha-600',\n  'fixed',\n  'inset-0',\n  'z-1147483646',\n  'motion-safe:data-[state=open]:animate-fade-in',\n  'motion-safe:data-[state=closed]:animate-fade-out'\n]\n"],"names":["backdropOverlay"],"mappings":"AAAO,MAAMA,EAAkB,CAC7B,eACA,QACA,UACA,eACA,gDACA,kDACF"}

package/dist/utilities/style/get-icon-size.js

@@ -1,2 +1,2 @@
-import{overrideStitchesVariantValue as i}from"../override-stitches-variant-value/overrideStitchesVariantValue.js";const m={sm:"sm",md:"md",lg:"md"},o=e=>i(e,t=>m[t]);export{o as getFieldIconSize};
+import{overrideStyledVariantValue as o}from"../override-styled-variant-value/overrideStyledVariantValue.js";const t={sm:"sm",md:"md",lg:"md"},d=e=>o(e,m=>t[m]);export{d as getFieldIconSize};
 //# sourceMappingURL=get-icon-size.js.map

package/dist/utilities/style/get-icon-size.js.map

@@ -1 +1 @@
-{"version":3,"file":"get-icon-size.js","sources":["../../../src/utilities/style/get-icon-size.ts"],"sourcesContent":["import { overrideStitchesVariantValue } from '~/utilities/override-stitches-variant-value/overrideStitchesVariantValue'\n\nconst toIconSize = {\n  sm: 'sm',\n  md: 'md',\n  lg: 'md'\n}\n\nexport const getFieldIconSize = (size: any) =>\n  overrideStitchesVariantValue(size, (s) => toIconSize[s])\n"],"names":["toIconSize","getFieldIconSize","size","overrideStitchesVariantValue","s"],"mappings":"kHAEA,MAAMA,EAAa,CACjB,GAAI,KACJ,GAAI,KACJ,GAAI,IACN,EAEaC,EAAoBC,GAC/BC,EAA6BD,EAAOE,GAAMJ,EAAWI,EAAE"}
+{"version":3,"file":"get-icon-size.js","sources":["../../../src/utilities/style/get-icon-size.ts"],"sourcesContent":["import { overrideStyledVariantValue } from '~/utilities/override-styled-variant-value/overrideStyledVariantValue'\n\nconst toIconSize = {\n  sm: 'sm',\n  md: 'md',\n  lg: 'md'\n}\n\nexport const getFieldIconSize = (size: any) =>\n  overrideStyledVariantValue(size, (s) => toIconSize[s])\n"],"names":["toIconSize","getFieldIconSize","size","overrideStyledVariantValue","s"],"mappings":"4GAEA,MAAMA,EAAa,CACjB,GAAI,KACJ,GAAI,KACJ,GAAI,IACN,EAEaC,EAAoBC,GAC/BC,EAA2BD,EAAOE,GAAMJ,EAAWI,CAAC,CAAC"}

package/package.json

@@ -4,11 +4,21 @@
   "main": "dist/index.cjs.js",
   "typings": "dist/index.d.ts",
   "module": "dist/index.js",
-  "version": "6.0.0-beta.5",
+  "version": "6.0.0-beta.7",
   "description": "",
   "files": [
-    "dist"
+    "dist",
+    "src/index.css"
   ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs.js",
+      "default": "./dist/index.js"
+    },
+    "./index.css": "./src/index.css"
+  },
   "sideEffects": false,
   "scripts": {
     "dev": "NODE_ENV=development rollup -c -w",
@@ -59,10 +69,10 @@
   ],
   "devDependencies": {
     "@atom-learning/icons": "1.20.0",
-    "@atom-learning/jest-stitches": "1.0.10",
-    "@atom-learning/theme": "^5.1.0",
+    "@atom-learning/theme": "6.0.0-beta.1",
     "@commitlint/cli": "^11.0.0",
     "@commitlint/config-conventional": "^11.0.0",
+    "@ianvs/prettier-plugin-sort-imports": "^4.7.0",
     "@radix-ui/react-id": "1.0.1",
     "@rollup/plugin-alias": "^3.1.9",
     "@rollup/plugin-commonjs": "^17.1.0",
@@ -89,8 +99,9 @@
     "change-case": "^4.1.2",
     "chokidar": "^3.5.1",
     "del-cli": "^3.0.1",
+    "diffable-html": "^6.0.1",
     "es-jest": "^1.5.0",
-    "esbuild": "^0.14.10",
+    "esbuild": "^0.25.12",
     "eslint": "^7.18.0",
     "eslint-config-prettier": "^7.2.0",
     "eslint-import-resolver-typescript": "^2.3.0",
@@ -107,7 +118,8 @@
     "jest-dom": "^4.0.0",
     "lint-staged": "^10.5.3",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.2.1",
+    "prettier": "^3.6.2",
+    "pretty-format": "^30.2.0",
     "prompts": "^2.4.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
@@ -121,20 +133,18 @@
     "semantic-release-slack-bot": "^4.0.2",
     "semantic-release-yarn": "^3.0.2",
     "size-limit": "^7.0.5",
-    "stitches-reset": "^1.0.0",
     "tsc-alias": "^1.8.10",
     "typescript": "^5.5.4",
-    "vite": "^2.2.4",
+    "vite": "^7.2.2",
     "yargs": "^16.2.0"
   },
   "peerDependencies": {
     "@atom-learning/icons": "^1.0.0",
-    "@atom-learning/theme": "^5",
+    "@atom-learning/theme": "^6",
     "react": "^17 || ^18 || ^19",
     "react-dom": "^17 || ^18 || ^19"
   },
   "dependencies": {
-    "@atom-learning/stitches-react": "^1.4.1",
     "@dnd-kit/core": "^6.0.5",
     "@dnd-kit/modifiers": "^6.0.0",
     "@dnd-kit/sortable": "^7.0.1",
@@ -158,8 +168,9 @@
     "@radix-ui/react-tooltip": "^1.0.7",
     "@radix-ui/react-visually-hidden": "^1.0.3",
     "@reach/combobox": "^0.16.1",
+    "@tailwindcss/vite": "^4.1.17",
     "@tanstack/react-table": "^8.5.11",
-    "color2k": "^2.0.0",
+    "clsx": "^2.1.1",
     "dayjs": "^1.10.7",
     "dayzed": "^3.2.2",
     "dlv": "^1.1.3",
@@ -174,6 +185,9 @@
     "react-hook-form": "^6.15.4",
     "react-hot-toast": "^1.0.2",
     "react-player": "^2.9.0",
+    "tailwind-merge": "^3.4.0",
+    "tailwind-variants": "^3.2.2",
+    "tailwindcss": "^4.1.17",
     "throttle-debounce": "^3.0.1",
     "uid": "^2.0.0",
     "use-deep-compare-effect": "^1.8.1"

package/src/index.css

@@ -0,0 +1,133 @@
+@import 'tailwindcss';
+
+@import '../../node_modules/@atom-learning/theme/lib/theme-atom.css';
+
+@source '../src/';
+
+@theme {
+  --default-font-family: var(--font-body);
+  --easing: cubic-bezier(0.22, 1, 0.36, 1);
+
+  --bg-chevron: url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224px%22%20height%3D%2224px%22%20viewBox%3D%220%200%2024%2024%22%20stroke%3D%22%23757575%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20fill%3D%22none%22%20color%3D%22%23757575%22%3E%3Cpolyline%20points%3D%226%2010%2012%2016%2018%2010%22%2F%3E%3C%2Fsvg%3E);
+
+  --animate-accordion-open: accordion-open 300ms ease-out;
+  --animate-accordion-close: accordion-close 300ms ease-out;
+
+  @keyframes accordion-open {
+    from {
+      height: 0;
+    }
+    to {
+      height: var(--radix-accordion-content-height);
+    }
+  }
+  @keyframes accordion-close {
+    from {
+      height: var(--radix-accordion-content-height);
+    }
+    to {
+      height: 0;
+    }
+  }
+
+  --animate-fade-in: fade-in 550ms var(--easing);
+  --animate-fade-out: fade-out 550ms var(--easing);
+
+  @keyframes fade-in {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+  @keyframes fade-out {
+    0% {
+      opacity: 1;
+    }
+    100% {
+      opacity: 0;
+    }
+  }
+
+  --animate-slide-direction-in: slide-direction-in 225ms ease-out;
+  --animate-slide-direction-out: slide-direction-out 125ms ease-out;
+
+  @keyframes slide-direction-in {
+    0% {
+      opacity: var(--slide-opacity-out, 1);
+      translate: var(--slide-direction-out-x, 0) var(--slide-direction-out-y, 0);
+    }
+    100% {
+      opacity: var(--slide-opacity-in, 1);
+      translate: var(--slide-direction-in-x, 0) var(--slide-direction-in-y, 0);
+    }
+  }
+  @keyframes slide-direction-out {
+    0% {
+      opacity: var(--slide-opacity-in, 1);
+      translate: var(--slide-direction-in-x, 0) var(--slide-direction-in-y, 0);
+    }
+    100% {
+      opacity: var(--slide-opacity-out, 1);
+      translate: var(--slide-direction-out-x, 0) var(--slide-direction-out-y, 0);
+    }
+  }
+
+  --animate-slide-in-center: slide-in-center 550ms var(--easing);
+  --animate-slide-out-center: slide-out-center 550ms var(--easing);
+
+  @keyframes slide-in-center {
+    0% {
+      translate: -50% 50vh;
+    }
+    100% {
+      translate: -50% -50%;
+    }
+  }
+  @keyframes slide-out-center {
+    0% {
+      translate: -50% -50%;
+    }
+    100% {
+      translate: -50% 50vh;
+    }
+  }
+}
+
+@utility animation-delay-* {
+  animation-delay: calc(--value(integer) * 1ms);
+}
+
+@utility animation-duration-* {
+  animation-duration: calc(--value(integer) * 1ms);
+}
+
+@utility capsize-* {
+  &::before {
+    content: '';
+    margin-bottom: calc(-1em * --value([number]));
+    display: table;
+  }
+  &::after {
+    content: '';
+    margin-top: calc(-1em * --value([number]));
+    display: table;
+  }
+}
+
+@utility capsize-before-* {
+  &::before {
+    content: '';
+    margin-bottom: calc(-1em * --value([number]));
+    display: table;
+  }
+}
+
+@utility capsize-after-* {
+  &::after {
+    content: '';
+    margin-top: calc(-1em * --value([number]));
+    display: table;
+  }
+}