@atom-learning/components 6.0.0-beta.11 → 6.0.0-beta.13

package/dist/styled.d.ts

@@ -14,8 +14,10 @@ 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 ? {
+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[];
@@ -29,7 +31,12 @@ type StyledConfig<V extends VariantConfig | undefined = undefined> = {
         [K in keyof V]?: VariantValueType<V[K]>;
     } : Record<string, never>;
 };
-export declare const styled: <TElement extends ElementType, V extends VariantConfig | undefined = undefined>(el: TElement, styles: StyledConfig<V>) => React.ForwardRefExoticComponent<React.PropsWithoutRef<Omit<React.ComponentPropsWithRef<TElement>, V extends VariantConfig ? keyof V : never> & VariantProps<V> & {
+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;
-}> & React.RefAttributes<React.ElementRef<TElement>>>;
+}>;
+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

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

package/dist/styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"styled.js","sources":["../src/styled.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport React, { ElementType, ReactElement } from 'react'\nimport { tv } from 'tailwind-variants'\n\ntype Breakpoint = '@initial' | '@sm' | '@md' | '@lg' | '@xl'\n\nexport const Theme = ({\n  children,\n  theme\n}: React.PropsWithChildren<{ theme?: Record<string, string> }>) => (\n  <div className=\"contents\" style={theme}>\n    {children}\n  </div>\n)\n\nexport const createTheme = (config: Record<string, Record<string, string>>) =>\n  Object.fromEntries(\n    Object.values(config).flatMap((tokens) =>\n      Object.entries(tokens).map(([token, value]) => [`--${token}`, value])\n    )\n  )\n\n// ---------------------------------------------------------------------------\n// Local typing for styled()\n// ---------------------------------------------------------------------------\n\n// Responsive variant prop: either a single value or a per-breakpoint map\ntype ResponsiveVariant<V extends string | number | boolean> =\n  | V\n  | Partial<Record<Breakpoint, V>>\n\n// Helpers to derive value type from variant config keys\ntype Keys<V> = keyof V\ntype StringKeys<V> = Extract<Keys<V>, string>\ntype NumberKeys<V> = Extract<Keys<V>, number>\n// Booleans are represented as string keys \"true\"/\"false\" in our VariantConfig,\n// so we only need to detect those in StringKeys.\ntype BooleanKeys<V> = Extract<StringKeys<V>, 'true' | 'false'>\n\ntype HasBoolLikeKeys<V> =\n  BooleanKeys<V> extends never\n    ? Extract<StringKeys<V>, 'true' | 'false'> extends never\n      ? false\n      : true\n    : true\n\n// If a variant's keys are boolean-like, expose the prop as boolean.\n// If it has numeric keys, allow those numbers and their string forms.\n// Otherwise use a string union of the keys.\ntype VariantValueType<V> =\n  HasBoolLikeKeys<V> extends true\n    ? boolean\n    : [NumberKeys<V>] extends [never]\n      ? StringKeys<V>\n      : NumberKeys<V> | `${NumberKeys<V>}`\n\n// Shape of the `variants` section passed to styled()\ntype VariantConfig = Record<string, Record<string | number, string[]>>\n\n// Props derived from a `variants` config\ntype VariantProps<V extends VariantConfig | undefined> = V extends VariantConfig\n  ? {\n      [K in keyof V]?: ResponsiveVariant<VariantValueType<V[K]>>\n    }\n  : 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\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, { twMerge: false })\n\n  type VariantPropsType = VariantProps<V>\n  type BaseProps = React.ComponentPropsWithRef<TElement>\n  // Extract variant keys to omit from BaseProps so variant props override native HTML attributes\n  type VariantKeys = V extends VariantConfig ? keyof V : never\n  type StyledProps = Omit<BaseProps, VariantKeys> &\n    VariantPropsType & { as?: ElementType }\n\n  const Comp = React.forwardRef<React.ElementRef<TElement>, StyledProps>(\n    (props, ref) => {\n      const additionalStyles = variantKeys\n        .map((variantKey) => {\n          const responsiveVariantConfig:\n            | Record<Breakpoint, string>\n            | undefined = props[variantKey]\n          const variantStyles: Record<string, string[]> =\n            styles.variants![variantKey]\n\n          if (\n            typeof responsiveVariantConfig === 'object' &&\n            responsiveVariantConfig\n          ) {\n            return Object.entries(responsiveVariantConfig).flatMap(\n              ([key, val]: [Breakpoint, string]) => {\n                const styleArr: string[] = variantStyles && variantStyles[val]\n\n                if (styleArr) {\n                  return styleArr.flatMap((cls: string) => {\n                    if (key === '@initial') return cls\n                    return `${key.replace('@', '')}:${cls}`\n                  })\n                }\n                return []\n              }\n            )\n          }\n\n          return []\n        })\n        .flat()\n\n      const cls = tvFn(props)\n\n      const filteredProps = Object.fromEntries(\n        Object.entries(props).filter(\n          ([key]) => !variantKeys.includes(key) && key !== 'as'\n        )\n      )\n\n      const mergedClassName = clsx(cls, additionalStyles).trim()\n\n      if (\n        typeof el === 'string' ||\n        typeof el === 'function' ||\n        (el && typeof el === 'object')\n      ) {\n        const elementType = el as ElementType\n\n        // If el is a host string ('div', 'span', etc.) we must not pass variant props to the DOM.\n        if (typeof el === 'string') {\n          return React.createElement(props.as || elementType, {\n            ...filteredProps,\n            ref,\n            className: mergedClassName\n          })\n        }\n\n        // If el is a function component (including forwardRef), pass ALL props through\n        // (the wrapped component may expect variant props), but ensure className and ref are forwarded.\n        const propsForComponent = {\n          ...filteredProps, // original props (includes variant keys)\n          as: props.as,\n          className: clsx((props as any).className, mergedClassName).trim(),\n          ref\n        }\n\n        return React.createElement(elementType, propsForComponent)\n      }\n\n      if (React.isValidElement(el)) {\n        const element = el as ReactElement\n        // Merge existing element className, incoming filteredProps.className and our computed class\n        const existingClass = (element.props as any).className\n        const incomingClass = (filteredProps as any).className\n        const finalClassName = clsx(\n          existingClass,\n          incomingClass,\n          mergedClassName\n        ).trim()\n\n        const cloneProps: any = {\n          // ...element.props,\n          ...filteredProps,\n          as: props.as || element.props.as,\n          className: finalClassName\n        }\n\n        // Forward the ref if provided\n        if (ref) {\n          cloneProps.ref = ref\n        }\n\n        return React.cloneElement(element, cloneProps)\n      }\n\n      console.log({ el, styles })\n      throw Error('Something is wrong')\n    }\n  )\n\n  return Comp\n}\n"],"names":["Theme","children","theme","React","createTheme","config","tokens","token","value","styled","el","styles","variantKeys","tvFn","tv","props","ref","additionalStyles","variantKey","responsiveVariantConfig","variantStyles","key","val","styleArr","cls","filteredProps","mergedClassName","clsx","elementType","propsForComponent","element","existingClass","incomingClass","finalClassName","cloneProps"],"mappings":"sFAMaA,EAAQ,CAAC,CACpB,SAAAC,EACA,MAAAC,CACF,IACEC,EAAA,cAAC,MAAA,CAAI,UAAU,WAAW,MAAOD,CAC9BD,EAAAA,CACH,EAGWG,EAAeC,GAC1B,OAAO,YACL,OAAO,OAAOA,CAAM,EAAE,QAASC,GAC7B,OAAO,QAAQA,CAAM,EAAE,IAAI,CAAC,CAACC,EAAOC,CAAK,IAAM,CAAC,KAAK,OAAAD,CAASC,EAAAA,CAAK,CAAC,CACtE,CACF,EAkEWC,EAAS,CAIpBC,EACAC,IACG,CACH,MAAMC,EAAc,OAAO,KAAKD,EAAO,UAAY,CAAE,CAAA,EAC/CE,EAAOC,EAAGH,EAAe,CAAE,QAAS,EAAM,CAAC,EA+GjD,OAtGaR,EAAM,WACjB,CAACY,EAAOC,IAAQ,CACd,MAAMC,EAAmBL,EACtB,IAAKM,GAAe,CACnB,MAAMC,EAEUJ,EAAMG,CAAU,EAC1BE,EACJT,EAAO,SAAUO,CAAU,EAE7B,OACE,OAAOC,GAA4B,UACnCA,EAEO,OAAO,QAAQA,CAAuB,EAAE,QAC7C,CAAC,CAACE,EAAKC,CAAG,IAA4B,CACpC,MAAMC,EAAqBH,GAAiBA,EAAcE,CAAG,EAE7D,OAAIC,EACKA,EAAS,QAASC,GACnBH,IAAQ,WAAmBG,EACxB,GAAG,OAAAH,EAAI,QAAQ,IAAK,EAAE,EAAC,GAAA,EAAI,OAAAG,CACnC,CAAA,EAEI,CAAA,CACT,CACF,EAGK,CAAA,CACT,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,OAEpD,GACE,OAAOP,GAAO,UACd,OAAOA,GAAO,YACbA,GAAM,OAAOA,GAAO,SACrB,CACA,MAAMkB,EAAclB,EAGpB,GAAI,OAAOA,GAAO,SAChB,OAAOP,EAAM,cAAcY,EAAM,IAAMa,EAAa,CAClD,GAAGH,EACH,IAAAT,EACA,UAAWU,CACb,CAAC,EAKH,MAAMG,EAAoB,CACxB,GAAGJ,EACH,GAAIV,EAAM,GACV,UAAWY,EAAMZ,EAAc,UAAWW,CAAe,EAAE,KAC3D,EAAA,IAAAV,CACF,EAEA,OAAOb,EAAM,cAAcyB,EAAaC,CAAiB,CAC3D,CAEA,GAAI1B,EAAM,eAAeO,CAAE,EAAG,CAC5B,MAAMoB,EAAUpB,EAEVqB,EAAiBD,EAAQ,MAAc,UACvCE,EAAiBP,EAAsB,UACvCQ,EAAiBN,EACrBI,EACAC,EACAN,CACF,EAAE,KAAK,EAEDQ,EAAkB,CAEtB,GAAGT,EACH,GAAIV,EAAM,IAAMe,EAAQ,MAAM,GAC9B,UAAWG,CACb,EAGA,OAAIjB,IACFkB,EAAW,IAAMlB,GAGZb,EAAM,aAAa2B,EAASI,CAAU,CAC/C,CAEA,MAAQ,QAAA,IAAI,CAAE,GAAAxB,EAAI,OAAAC,CAAO,CAAC,EACpB,MAAM,oBAAoB,CAClC,CACF,CAGF"}
+{"version":3,"file":"styled.js","sources":["../src/styled.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport React, { ElementType, ReactElement } from 'react'\nimport { tv } from 'tailwind-variants'\n\ntype Breakpoint = '@initial' | '@sm' | '@md' | '@lg' | '@xl'\n\nexport const Theme = ({\n  children,\n  theme\n}: React.PropsWithChildren<{ theme?: Record<string, string> }>) => (\n  <div className=\"contents\" style={theme}>\n    {children}\n  </div>\n)\n\nexport const createTheme = (config: Record<string, Record<string, string>>) =>\n  Object.fromEntries(\n    Object.values(config).flatMap((tokens) =>\n      Object.entries(tokens).map(([token, value]) => [`--${token}`, value])\n    )\n  )\n\n// ---------------------------------------------------------------------------\n// Local typing for styled()\n// ---------------------------------------------------------------------------\n\n// Responsive variant prop: either a single value or a per-breakpoint map\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[]>>\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[]> =\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[] =\n                      variantStyles && variantStyles[valStr]\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\n      const cls = tvFn(props)\n\n      const filteredProps = Object.fromEntries(\n        Object.entries(props).filter(\n          ([key]) => !variantKeys.includes(key) && key !== 'as'\n        )\n      )\n\n      const mergedClassName = clsx(cls, additionalStyles).trim()\n\n      if (\n        typeof el === 'string' ||\n        typeof el === 'function' ||\n        (el && typeof el === 'object')\n      ) {\n        const elementType = el as ElementType\n\n        // If el is a host string ('div', 'span', etc.) we must not pass variant props to the DOM.\n        if (typeof el === 'string') {\n          return React.createElement(props.as || elementType, {\n            ...filteredProps,\n            ref,\n            className: mergedClassName\n          })\n        }\n\n        // If el is a function component (including forwardRef), pass ALL props through\n        // (the wrapped component may expect variant props), but ensure className and ref are forwarded.\n        const propsForComponent = {\n          ...filteredProps, // original props (includes variant keys)\n          as: props.as,\n          className: clsx((props as any).className, mergedClassName).trim(),\n          ref\n        }\n\n        return React.createElement(elementType, propsForComponent)\n      }\n\n      if (React.isValidElement(el)) {\n        const element = el as ReactElement\n        // Merge existing element className, incoming filteredProps.className and our computed class\n        const existingClass = (element.props as any).className\n        const incomingClass = (filteredProps as any).className\n        const finalClassName = clsx(\n          existingClass,\n          incomingClass,\n          mergedClassName\n        ).trim()\n\n        const cloneProps: any = {\n          // ...element.props,\n          ...filteredProps,\n          as: props.as || element.props.as,\n          className: finalClassName\n        }\n\n        // Forward the ref if provided\n        if (ref) {\n          cloneProps.ref = ref\n        }\n\n        return React.cloneElement(element, cloneProps)\n      }\n\n      console.log({ el, styles })\n      throw Error('Something is wrong')\n    }\n  )\n\n  return Comp\n}\n"],"names":["Theme","children","theme","React","createTheme","config","tokens","token","value","styled","el","styles","options","variantKeys","enabledResponsiveVariants","tvFn","tv","props","ref","additionalStyles","variantKey","responsiveVariantConfig","variantStyles","key","val","valStr","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,OAAI,UAAU,WAAW,MAAOD,CAAAA,EAC9BD,CACH,EAGWG,EAAeC,GAC1B,OAAO,YACL,OAAO,OAAOA,CAAM,EAAE,QAASC,GAC7B,OAAO,QAAQA,CAAM,EAAE,IAAI,CAAC,CAACC,EAAOC,CAAK,IAAM,CAAC,KAAK,OAAAD,GAASC,CAAK,CAAC,CACtE,CACF,EAiHc,SAAAC,EAIdC,EAAcC,EAAyBC,EAAa,CACpD,MAAMC,EAAc,OAAO,KAAKF,EAAO,UAAY,CAAA,CAAE,EAC/CG,GAA4BF,GAAA,YAAAA,EAAS,6BAA8B,GACnEG,EAAOC,EAAGL,CAAa,EAqH7B,OA3GaR,EAAM,WACjB,CAACc,EAAOC,IAAQ,CACd,MAAMC,EAAmBL,EACrBD,EACG,IAAKO,GAAe,CACnB,MAAMC,EAEUJ,EAAMG,CAAU,EAC1BE,EACJX,EAAO,SAAUS,CAAU,EAE7B,OACE,OAAOC,GAA4B,UACnCA,GACA,CAAC,MAAM,QAAQA,CAAuB,EAE/B,OAAO,QAAQA,CAAuB,EAAE,QAC7C,CAAC,CAACE,EAAKC,CAAG,IAAqC,CAC7C,MAAMC,EAAS,OAAOD,CAAG,EACnBE,EACJJ,GAAiBA,EAAcG,CAAM,EAEvC,OAAIC,EACKA,EAAS,QAASC,GACnBJ,IAAQ,WAAmBI,EACxB,GAAG,OAAAJ,EAAI,QAAQ,IAAK,EAAE,EAAC,KAAI,OAAAI,CAAAA,CACnC,EAEI,CAAA,CACT,CACF,EAGK,CACT,CAAA,CAAC,EACA,KAAK,EACR,CAAA,EAEEA,EAAMZ,EAAKE,CAAK,EAEhBW,EAAgB,OAAO,YAC3B,OAAO,QAAQX,CAAK,EAAE,OACpB,CAAC,CAACM,CAAG,IAAM,CAACV,EAAY,SAASU,CAAG,GAAKA,IAAQ,IACnD,CACF,EAEMM,EAAkBC,EAAKH,EAAKR,CAAgB,EAAE,OAEpD,GACE,OAAOT,GAAO,UACd,OAAOA,GAAO,YACbA,GAAM,OAAOA,GAAO,SACrB,CACA,MAAMqB,EAAcrB,EAGpB,GAAI,OAAOA,GAAO,SAChB,OAAOP,EAAM,cAAcc,EAAM,IAAMc,EAAa,CAClD,GAAGH,EACH,IAAAV,EACA,UAAWW,CACb,CAAC,EAKH,MAAMG,EAAoB,CACxB,GAAGJ,EACH,GAAIX,EAAM,GACV,UAAWa,EAAMb,EAAc,UAAWY,CAAe,EAAE,OAC3D,IAAAX,CACF,EAEA,OAAOf,EAAM,cAAc4B,EAAaC,CAAiB,CAC3D,CAEA,GAAI7B,EAAM,eAAeO,CAAE,EAAG,CAC5B,MAAMuB,EAAUvB,EAEVwB,EAAiBD,EAAQ,MAAc,UACvCE,EAAiBP,EAAsB,UACvCQ,EAAiBN,EACrBI,EACAC,EACAN,CACF,EAAE,KAAK,EAEDQ,EAAkB,CAEtB,GAAGT,EACH,GAAIX,EAAM,IAAMgB,EAAQ,MAAM,GAC9B,UAAWG,CACb,EAGA,OAAIlB,IACFmB,EAAW,IAAMnB,GAGZf,EAAM,aAAa8B,EAASI,CAAU,CAC/C,CAEA,MAAA,QAAQ,IAAI,CAAE,GAAA3B,EAAI,OAAAC,CAAO,CAAC,EACpB,MAAM,oBAAoB,CAClC,CACF,CAGF"}

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

@@ -1,5 +1,5 @@
-export declare const NoOverflowWrapper: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+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;
 }, never> & {
     as?: import("react").ElementType;
-}, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+}>;

package/package.json

@@ -4,20 +4,25 @@
   "main": "dist/index.cjs.js",
   "typings": "dist/index.d.ts",
   "module": "dist/index.js",
-  "version": "6.0.0-beta.11",
+  "version": "6.0.0-beta.13",
   "description": "",
   "files": [
     "dist",
-    "src/index.css"
+    "src/index.css",
+    "src/responsive-variant-classes.css",
+    "scripts/vite-plugin-tailwind-responsive-variant-classes.mjs",
+    "scripts/generate-responsive-variant-classes.mjs"
   ],
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js",
+      "style": "./src/index.css",
       "require": "./dist/index.cjs.js",
       "default": "./dist/index.js"
     },
-    "./index.css": "./src/index.css"
+    "./index.css": "./src/index.css",
+    "./vite": "./scripts/vite-plugin-tailwind-responsive-variant-classes.mjs"
   },
   "sideEffects": false,
   "scripts": {
@@ -25,9 +30,10 @@
     "build:lib": "NODE_ENV=production rollup -c",
     "build:types": "NODE_ENV=production tsc --project tsconfig.build.json --emitDeclarationOnly && tsc-alias",
     "build:proptypes": "node ./scripts/generate-component-props.mjs",
+    "build:responsive-variant-classes": "node ./scripts/generate-responsive-variant-classes.mjs",
     "start:sandbox": "vite -c ./sandbox/vite.config.js",
     "add-component": "node ./scripts/add-component.mjs",
-    "prepublishOnly": "run-s clean build:lib build:types build:proptypes",
+    "prepublishOnly": "run-s clean build:responsive-variant-classes build:lib build:types build:proptypes",
     "clean": "del ./dist/",
     "format": "prettier 'src/**/*.{js,ts,tsx}' --write",
     "lint": "eslint 'src/**/*.{js,ts,tsx}' --fix",
@@ -69,7 +75,7 @@
   ],
   "devDependencies": {
     "@atom-learning/icons": "1.20.0",
-    "@atom-learning/theme": "6.0.0-beta.1",
+    "@atom-learning/theme": "6.0.0-beta.3",
     "@commitlint/cli": "^11.0.0",
     "@commitlint/config-conventional": "^11.0.0",
     "@ianvs/prettier-plugin-sort-imports": "^4.7.0",
@@ -111,7 +117,6 @@
     "eslint-plugin-react": "^7.22.0",
     "eslint-plugin-react-hooks": "^4.2.0",
     "eslint-plugin-simple-import-sort": "^7.0.0",
-    "glob": "^7.1.6",
     "husky": "^4.3.8",
     "jest": "^27.0.6",
     "jest-axe": "^4.1.0",
@@ -174,10 +179,12 @@
     "dayjs": "^1.10.7",
     "dayzed": "^3.2.2",
     "dlv": "^1.1.3",
+    "glob": "^7.1.6",
     "invariant": "^2.2.4",
     "mdast-util-directive": "1.0.1",
     "mdast-util-from-markdown": "0.8.5",
     "micromark-extension-directive": "1.4.0",
+    "minimatch": "^10.0.0",
     "prop-types": "^15.8.1",
     "pure-react-carousel": "^1.27.6",
     "react-aria": "^3.29.1",
@@ -189,6 +196,7 @@
     "tailwind-variants": "^3.2.2",
     "tailwindcss": "^4.1.17",
     "throttle-debounce": "^3.0.1",
+    "ts-morph": "^25.0.1",
     "uid": "^2.0.0",
     "use-deep-compare-effect": "^1.8.1"
   },

package/scripts/generate-responsive-variant-classes.mjs

@@ -0,0 +1,300 @@
+import fs from 'node:fs'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+import g from 'glob'
+import { Project, SyntaxKind } from 'ts-morph'
+
+const { glob } = g
+
+function extractArrayElements(node) {
+  if (node.getKind() !== SyntaxKind.ArrayLiteralExpression) return []
+
+  return node
+    .getElements()
+    .map((element) =>
+      element.getKind() === SyntaxKind.StringLiteral
+        ? element.getLiteralValue()
+        : element.getText().replace(/^['"]|['"]$/g, '')
+    )
+    .filter(Boolean)
+}
+
+function getPropertyValue(obj, propName) {
+  const prop = obj
+    .getProperties()
+    .find(
+      (p) =>
+        p.getKind() === SyntaxKind.PropertyAssignment &&
+        p
+          .asKindOrThrow(SyntaxKind.PropertyAssignment)
+          .getNameNode()
+          .getText()
+          .replace(/['"]/g, '') === propName
+    )
+  return prop?.asKindOrThrow(SyntaxKind.PropertyAssignment).getInitializer()
+}
+
+function isEnabledResponsiveVariants(args) {
+  if (args.length < 3) return false
+  const optionsArg = args[2]
+  if (optionsArg.getKind() !== SyntaxKind.ObjectLiteralExpression) return false
+
+  const enabledProp = getPropertyValue(
+    optionsArg.asKindOrThrow(SyntaxKind.ObjectLiteralExpression),
+    'enabledResponsiveVariants'
+  )
+  return enabledProp?.getKind() === SyntaxKind.TrueKeyword
+}
+
+function extractClasses(optionValue) {
+  if (optionValue.getKind() === SyntaxKind.ArrayLiteralExpression) {
+    return extractArrayElements(optionValue)
+  }
+  if (optionValue.getKind() === SyntaxKind.StringLiteral) {
+    return [optionValue.getLiteralValue()]
+  }
+  return []
+}
+
+function extractVariantsFromAST(sourceFile) {
+  const variants = {}
+
+  for (const call of sourceFile.getDescendantsOfKind(
+    SyntaxKind.CallExpression
+  )) {
+    if (call.getExpression().getText() !== 'styled') continue
+
+    const args = call.getArguments()
+    if (args.length < 2) continue
+
+    const configArg = args[1]
+    if (configArg.getKind() !== SyntaxKind.ObjectLiteralExpression) continue
+
+    if (!isEnabledResponsiveVariants(args)) continue
+
+    const configObj = configArg.asKindOrThrow(
+      SyntaxKind.ObjectLiteralExpression
+    )
+    const variantsValue = getPropertyValue(configObj, 'variants')
+
+    if (
+      !variantsValue ||
+      variantsValue.getKind() !== SyntaxKind.ObjectLiteralExpression
+    ) {
+      continue
+    }
+
+    const variantsObj = variantsValue.asKindOrThrow(
+      SyntaxKind.ObjectLiteralExpression
+    )
+
+    for (const variantProp of variantsObj.getProperties()) {
+      if (variantProp.getKind() !== SyntaxKind.PropertyAssignment) continue
+
+      const variant = variantProp.asKindOrThrow(SyntaxKind.PropertyAssignment)
+      const variantKey = variant.getNameNode().getText().replace(/['"]/g, '')
+      const variantValue = variant.getInitializer()
+
+      if (
+        !variantValue ||
+        variantValue.getKind() !== SyntaxKind.ObjectLiteralExpression
+      ) {
+        continue
+      }
+
+      const variantOptionsObj = variantValue.asKindOrThrow(
+        SyntaxKind.ObjectLiteralExpression
+      )
+      const options = {}
+
+      for (const optionProp of variantOptionsObj.getProperties()) {
+        if (optionProp.getKind() !== SyntaxKind.PropertyAssignment) continue
+
+        const option = optionProp.asKindOrThrow(SyntaxKind.PropertyAssignment)
+        const optionKey = option.getNameNode().getText().replace(/['"]/g, '')
+        const optionValue = option.getInitializer()
+
+        if (!optionValue) continue
+
+        const classes = extractClasses(optionValue)
+        if (classes.length > 0) {
+          options[optionKey] = classes
+        }
+      }
+
+      if (Object.keys(options).length > 0) {
+        variants[variantKey] = options
+      }
+    }
+  }
+
+  return Object.keys(variants).length > 0 ? variants : null
+}
+
+function generateResponsiveVariantClasses(variants) {
+  const breakpoints = ['sm', 'md', 'lg', 'xl']
+  const classes = new Set()
+
+  for (const variantOptions of Object.values(variants)) {
+    for (const classList of Object.values(variantOptions)) {
+      if (Array.isArray(classList)) {
+        for (const cls of classList) {
+          const trimmed = typeof cls === 'string' ? cls.trim() : ''
+          if (trimmed) {
+            classes.add(trimmed)
+            for (const bp of breakpoints) {
+              classes.add(`${bp}:${trimmed}`)
+            }
+          }
+        }
+      }
+    }
+  }
+
+  return Array.from(classes).sort()
+}
+
+function extractUniqueClasses(allClasses) {
+  const uniqueClasses = new Set()
+
+  for (const cls of allClasses) {
+    const match = cls.match(/^(sm|md|lg|xl):(.+)$/)
+    uniqueClasses.add(match ? match[2] : cls)
+  }
+
+  return Array.from(uniqueClasses).sort()
+}
+
+/**
+ * Generate CSS file content with @source inline() patterns
+ */
+function generateCSSFileContent(allClasses) {
+  const uniqueClasses = extractUniqueClasses(allClasses)
+  const breakpointPrefix = `{,sm:,md:,lg:,xl:}`
+  const classPattern = `{${uniqueClasses.join(',')}}`
+  const pattern = `@source inline("${breakpointPrefix}${classPattern}");`
+
+  return `/**
+ * Tailwind Responsive Variant Classes Safelist (CSS Format)
+ * 
+ * ⚠️ AUTO-GENERATED FILE - DO NOT EDIT MANUALLY ⚠️
+ * 
+ * This file is automatically generated by the build script: scripts/generate-responsive-variant-classes.mjs
+ * Run \`yarn build:responsive-variant-classes\` to regenerate this file.
+ * 
+ * This file ensures Tailwind includes dynamically generated responsive classes
+ * when using responsive variants like: gap={{ '@initial': 1, '@sm': 3 }}
+ * 
+ * Uses Tailwind v4's @source inline() pattern syntax for efficient class detection.
+ */
+
+${pattern}
+`
+}
+
+/**
+ * Main function to generate responsive variant classes safelist
+ *
+ * @param {Object} options - Generation options
+ * @param {string} [options.cwd] - Working directory
+ * @param {string|string[]} [options.input] - Input glob pattern(s). Can be a string or array of strings
+ * @param {string} [options.outputPath] - Output file path relative to cwd
+ */
+async function generateResponsiveVariantClassesSafelist(options = {}) {
+  const {
+    cwd = process.cwd(),
+    input = 'src/**/*.{ts,tsx}',
+    outputPath = 'src/responsive-variant-classes.css'
+  } = options
+  try {
+    console.log('🔍 Scanning component files for styled() variants...\n')
+
+    const project = new Project({
+      tsConfigFilePath: path.resolve(cwd, 'tsconfig.json'),
+      skipAddingFilesFromTsConfig: true
+    })
+
+    const patterns = Array.isArray(input) ? input : [input]
+    const ignorePatterns = [
+      '**/*.test.tsx',
+      '**/*.test.ts',
+      '**/__snapshots__/**',
+      '**/node_modules/**',
+      '**/responsive-variant-classes.css'
+    ]
+
+    const files = new Set()
+    for (const pattern of patterns) {
+      const matches = glob.sync(pattern, { cwd, ignore: ignorePatterns })
+      matches.forEach((file) => files.add(file))
+    }
+
+    const fileArray = Array.from(files)
+    console.log(`Found ${fileArray.length} component files to scan\n`)
+
+    const allVariants = {}
+    let processedFiles = 0
+
+    for (const filePath of fileArray) {
+      try {
+        const fullPath = path.isAbsolute(filePath)
+          ? filePath
+          : path.resolve(cwd, filePath)
+
+        if (!fs.readFileSync(fullPath, 'utf-8').includes('styled(')) continue
+
+        const sourceFile = project.addSourceFileAtPath(fullPath)
+        const variants = extractVariantsFromAST(sourceFile)
+
+        if (variants) {
+          console.log(`  ✓ ${path.relative(cwd, fullPath)}`)
+          for (const [key, value] of Object.entries(variants)) {
+            allVariants[key] = allVariants[key]
+              ? { ...allVariants[key], ...value }
+              : value
+          }
+          processedFiles++
+        }
+      } catch (error) {
+        console.warn(`  ⚠️  Error processing ${filePath}:`, error.message)
+      }
+    }
+
+    if (Object.keys(allVariants).length === 0) {
+      console.log('\n⚠️  No variants found in component files')
+      return
+    }
+
+    console.log(`\n📦 Extracted variants from ${processedFiles} files`)
+    console.log(
+      `   Found ${Object.keys(allVariants).length} unique variant keys\n`
+    )
+
+    // Generate all responsive classes
+    const allClasses = generateResponsiveVariantClasses(allVariants)
+
+    console.log(
+      `✨ Generated ${allClasses.length} responsive variant class combinations\n`
+    )
+
+    // Generate and write the CSS file
+    const cssContent = generateCSSFileContent(allClasses)
+    const cssOutputPath = path.resolve(cwd, outputPath)
+    fs.writeFileSync(cssOutputPath, cssContent, 'utf-8')
+
+    console.log(`✅ Generated ${path.relative(cwd, cssOutputPath)}`)
+    console.log(`   Contains ${allClasses.length} variant class combinations\n`)
+  } catch (error) {
+    console.error('❌ Error generating responsive variant classes:', error)
+    process.exit(1)
+  }
+}
+
+// Export the function for use in other modules
+export { generateResponsiveVariantClassesSafelist }
+
+// Run the script if this file is executed directly (not imported)
+const __filename = fileURLToPath(import.meta.url)
+if (process.argv[1] === __filename) {
+  generateResponsiveVariantClassesSafelist()
+}

package/scripts/vite-plugin-tailwind-responsive-variant-classes.mjs

@@ -0,0 +1,92 @@
+import path from 'path'
+import { minimatch } from 'minimatch'
+
+import { generateResponsiveVariantClassesSafelist } from './generate-responsive-variant-classes.mjs'
+
+/**
+ * Vite plugin to automatically generate responsive classes safelist
+ *
+ * @param {Object} options - Plugin options
+ * @param {string[]} [options.files] - Glob patterns to watch for changes. Defaults to ['src/components/**', 'sandbox/**']
+ */
+export function tailwindResponsiveVariantClasses(options = {}) {
+  const {
+    input = 'src/**/*.{ts,tsx}',
+    cwd = process.cwd(),
+    outputPath = 'src/responsive-variant-classes.css'
+  } = options
+  let isGenerating = false
+  let generateTimeout = null
+
+  const matchesPattern = (filePath) => {
+    const relativePath = path.relative(cwd, filePath).replace(/\\/g, '/')
+    return minimatch(relativePath, input)
+  }
+
+  async function generateResponsiveClasses() {
+    if (isGenerating) return Promise.resolve()
+
+    isGenerating = true
+
+    try {
+      await generateResponsiveVariantClassesSafelist({
+        cwd,
+        input,
+        outputPath
+      })
+      console.log('[responsive-classes] ✓ Generated responsive variant classes')
+    } catch (error) {
+      console.error(
+        '[responsive-classes] Error generating classes:',
+        error.message
+      )
+      throw error
+    } finally {
+      isGenerating = false
+    }
+  }
+
+  function debouncedGenerate() {
+    if (generateTimeout) clearTimeout(generateTimeout)
+    generateTimeout = setTimeout(() => {
+      generateResponsiveClasses().catch((error) => {
+        console.warn('[responsive-classes] Generation failed:', error.message)
+      })
+    }, 500)
+  }
+
+  return {
+    name: 'vite-plugin-responsive-classes',
+    enforce: 'pre',
+
+    async configResolved() {
+      try {
+        await generateResponsiveClasses()
+      } catch (error) {
+        console.warn(
+          '[responsive-classes] Initial generation failed:',
+          error.message
+        )
+      }
+    },
+
+    configureServer(server) {
+      const handleFileChange = (file) => {
+        if (matchesPattern(file)) {
+          debouncedGenerate()
+        }
+      }
+
+      server.watcher.on('change', handleFileChange)
+      server.watcher.on('add', handleFileChange)
+      server.watcher.on('unlink', handleFileChange)
+    },
+
+    handleHotUpdate({ file }) {
+      if (matchesPattern(file)) {
+        debouncedGenerate()
+        return []
+      }
+    }
+  }
+}

package/src/index.css

@@ -1,8 +1,5 @@
 @import 'tailwindcss';
-
-@import '@atom-learning/theme/lib/theme-atom.css';
-
-@source '../src/';
+@import './responsive-variant-classes.css';
 
 @theme {
   --default-font-family: var(--font-body);

package/src/responsive-variant-classes.css

@@ -0,0 +1,15 @@
+/**
+ * Tailwind Responsive Variant Classes Safelist (CSS Format)
+ * 
+ * ⚠️ AUTO-GENERATED FILE - DO NOT EDIT MANUALLY ⚠️
+ * 
+ * This file is automatically generated by the build script: scripts/generate-responsive-variant-classes.mjs
+ * Run `yarn build:responsive-variant-classes` to regenerate this file.
+ * 
+ * This file ensures Tailwind includes dynamically generated responsive classes
+ * when using responsive variants like: gap={{ '@initial': 1, '@sm': 3 }}
+ * 
+ * Uses Tailwind v4's @source inline() pattern syntax for efficient class detection.
+ */
+
+@source inline("{,sm:,md:,lg:,xl:}{[--active:rgba(white,0.25)],[--active:var(--color-danger-dark)],[--active:var(--color-primary-1000)],[--active:var(--color-primary-1200)],[--active:var(--color-success-dark)],[--active:var(--color-warning-dark)],[--active:var(--color-white)],[--banner-heading-color:var(--color-foreground-7-plus)],[--banner-text-color:var(--color-grey-100)],[--base:var(--color-danger)],[--base:var(--color-primary-1000)],[--base:var(--color-primary-800)],[--base:var(--color-success)],[--base:var(--color-warning)],[--base:var(--color-white)],[--base:white],[--interact:rgba(white,0.1)],[--interact:var(--color-danger-mid)],[--interact:var(--color-primary-1100)],[--interact:var(--color-primary-900)],[--interact:var(--color-success-mid)],[--interact:var(--color-warning-mid)],[--interact:var(--color-white)],[--text:var(--color-primary-800)],[align-items:first baseline],[align-items:inherit],[align-items:initial],[align-items:last baseline],[align-items:normal],[align-items:revert-layer],[align-items:revert],[align-items:safe],[align-items:self-end],[align-items:self-start],[align-items:unsafe],[align-items:unset],[flex-wrap:inherit],[flex-wrap:initial],[flex-wrap:revert-layer],[flex-wrap:revert],[flex-wrap:unset],[justify-content:inherit],[justify-content:initial],[justify-content:left],[justify-content:revert-layer],[justify-content:revert],[justify-content:right],[justify-content:safe],[justify-content:unsafe],[justify-content:unset],absolute,after:hidden!,before:hidden!,bg-(--base),bg-(--base-1),bg-(--base-11),bg-(--base-3),bg-transparent,border,border-b,border-b-(--border-bottom),border-current,border-white,capsize-[0.2078],capsize-[0.3864],capsize-after-[0.26],capsize-after-[0.2],capsize-before-[0.16],capsize-before-[0.1],cursor-not-allowed opacity-60 pointer-events-none,direction-[inherit],direction-[initial],direction-[revert-layer],direction-[revert],direction-[unset],disabled:cursor-not-allowed,disabled:opacity-30,flex-col,flex-col-reverse,flex-no-wrap,flex-row,flex-row-reverse,flex-wrap,flex-wrap-reverse,font-body,font-display,font-medium,font-mono,font-normal,font-semibold,gap-0.5,gap-1,gap-10,gap-12,gap-16,gap-2,gap-20,gap-3,gap-4,gap-6,gap-8,h-16,h-24,items-baseline,items-center,items-end,items-start,items-stretch,justify-around,justify-between,justify-center,justify-end,justify-evenly,justify-normal,justify-start,justify-stretch,leading-[1.12],leading-[1.14],leading-none,leading-normal,max-w-full,not-disabled:active:bg-(--active),not-disabled:active:text-(--active),not-disabled:focus:bg-(--interact),not-disabled:focus:no-underline,not-disabled:focus:text-(--interact),not-disabled:focus:text-(--text,white),not-disabled:hover:bg-(--interact),not-disabled:hover:no-underline,not-disabled:hover:text-(--interact),not-disabled:hover:text-(--text,white),p-2,px-6,right-4,rounded-full,shadow-[0px_4px_4px_-2px_rgba(31,31,31,0.1)],static,supports-color-mix:backdrop-blur-sm,supports-color-mix:bg-[color-mix(in_hsl,(--base-1)_70%,transparent)],text-(--base),text-(--foreground-7-plus),text-(--text,white),text-3xl,text-4xl,text-lg,text-md,top-0,top-2,top-4,w-full,w-max,w-screen}");