@atom-learning/components 6.0.0-beta.9 → 6.0.3

package/dist/components/table/TableRow.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 export declare const TableRow: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, "ref"> & {
     ref?: ((instance: HTMLTableRowElement | null) => void) | React.RefObject<HTMLTableRowElement> | null | undefined;
-} & {
+}, never> & {
     as?: React.ElementType;
-}, "ref"> & React.RefAttributes<HTMLTableRowElement>, "ref"> & React.RefAttributes<HTMLTableRowElement>>;
+}, "ref"> & React.RefAttributes<HTMLTableRowElement>>;

package/dist/components/table/TableStickyColumnsContainer.js

@@ -1,2 +1,2 @@
-import r from"clsx";import t from"react";import{useStickyColumnsCss as c}from"./useStickyColumnsCss.js";const i=({children:h,numberOfStickyColumns:p=0,className:l,...a})=>{const[_,n]=t.useState(!1),x=t.useRef(null),{columnsCss:e}=c({numberOfStickyColumns:p,wrapperRef:x});return t.createElement("div",{onScroll:s=>{const o=s.currentTarget.scrollLeft>0;o!==_&&n(o)},role:"scrollbar",ref:x,className:r("overflow-auto","max-w-full","relative","overscroll-x-contain",e,"[&_td]:bg-inherit",l,p===1&&_&&["[&_td]:nth-[1]:[box-shadow:(--color-alpha-200)_-2px_-3px_9px_1px]","[&_td]:nth-[1]:[clip-path:inset(0px_-10px_0px_0px)","[&_th]:nth-[1]:[box-shadow:(--color-alpha-200)_-2px_-3px_9px_1px]","[&_th]:nth-[1]:[clip-path:inset(0px_-10px_0px_0px)"],p===2&&_&&["[&_td]:nth-[2]:[box-shadow:(--color-alpha-200)_-2px_-3px_9px_1px]","[&_td]:nth-[2]:[clip-path:inset(0px_-10px_0px_0px)","[&_th]:nth-[2]:[box-shadow:(--color-alpha-200)_-2px_-3px_9px_1px]","[&_th]:nth-[2]:[clip-path:inset(0px_-10px_0px_0px)"],p===3&&_&&["[&_td]:nth-[3]:[box-shadow:(--color-alpha-200)_-2px_-3px_9px_1px]","[&_td]:nth-[3]:[clip-path:inset(0px_-10px_0px_0px)","[&_th]:nth-[3]:[box-shadow:(--color-alpha-200)_-2px_-3px_9px_1px]","[&_th]:nth-[3]:[clip-path:inset(0px_-10px_0px_0px)"],p===4&&_&&["[&_td]:nth-[4]:[box-shadow:(--color-alpha-200)_-2px_-3px_9px_1px]","[&_td]:nth-[4]:[clip-path:inset(0px_-10px_0px_0px)","[&_th]:nth-[4]:[box-shadow:(--color-alpha-200)_-2px_-3px_9px_1px]","[&_th]:nth-[4]:[clip-path:inset(0px_-10px_0px_0px)"]),...a},h)};export{i as TableStickyColumnsContainer};
+import c from"clsx";import p from"react";import{useStickyColumnsStyle as i}from"./useStickyColumnsCss.js";const r=({children:n,numberOfStickyColumns:t=0,className:_,...f})=>{const[e,y]=p.useState(!1),o=p.useRef(null),{columnsStyle:l}=i({numberOfStickyColumns:t,wrapperRef:o});return p.createElement("div",{onScroll:s=>{const h=s.currentTarget.scrollLeft>0;h!==e&&y(h)},role:"scrollbar",ref:o,style:l,className:c("overflow-auto","max-w-full","relative","overscroll-x-contain","[&_td,&_th]:bg-inherit",_,t>=1&&["[&_td:nth-of-type(1),&_th:nth-of-type(1)]:sticky","[&_td:nth-of-type(1),&_th:nth-of-type(1)]:left-(--sticky-offset-left-1)","[&_td:nth-of-type(1),&_th:nth-of-type(1)]:min-w-(--sticky-column-width-1)","[&_td:nth-of-type(1),&_th:nth-of-type(1)]:z-2"],t>=2&&["[&_td:nth-of-type(2),&_th:nth-of-type(2)]:sticky","[&_td:nth-of-type(2),&_th:nth-of-type(2)]:left-(--sticky-offset-left-2)","[&_td:nth-of-type(2),&_th:nth-of-type(2)]:min-w-(--sticky-column-width-2)","[&_td:nth-of-type(2),&_th:nth-of-type(2)]:z-2"],t>=3&&["[&_td:nth-of-type(3),&_th:nth-of-type(3)]:sticky","[&_td:nth-of-type(3),&_th:nth-of-type(3)]:left-(--sticky-offset-left-3)","[&_td:nth-of-type(3),&_th:nth-of-type(3)]:min-w-(--sticky-column-width-3)","[&_td:nth-of-type(3),&_th:nth-of-type(3)]:z-2"],t>=4&&["[&_td:nth-of-type(4),&_th:nth-of-type(4)]:sticky","[&_td:nth-of-type(4),&_th:nth-of-type(4)]:left-(--sticky-offset-left-4)","[&_td:nth-of-type(4),&_th:nth-of-type(4)]:min-w-(--sticky-column-width-4)","[&_td:nth-of-type(4),&_th:nth-of-type(4)]:z-2"],t===1&&e&&["[&_td:nth-of-type(1),&_th:nth-of-type(1)]:shadow-[var(--color-alpha-200)_-2px_-3px_9px_1px]","[&_td:nth-of-type(1),&_th:nth-of-type(1)]:[clip-path:inset(-1px_-10px_-1px_0px)]"],t===2&&e&&["[&_td:nth-of-type(2),&_th:nth-of-type(2)]:shadow-[var(--color-alpha-200)_-2px_-3px_9px_1px]","[&_td:nth-of-type(2),&_th:nth-of-type(2)]:[clip-path:inset(-1px_-10px_-1px_0px)]"],t===3&&e&&["[&_td:nth-of-type(3),&_th:nth-of-type(3)]:shadow-[var(--color-alpha-200)_-2px_-3px_9px_1px]","[&_td:nth-of-type(3),&_th:nth-of-type(3)]:[clip-path:inset(-1px_-10px_-1px_0px)]"],t===4&&e&&["[&_td:nth-of-type(4),&_th:nth-of-type(4)]:shadow-[var(--color-alpha-200)_-2px_-3px_9px_1px]","[&_td:nth-of-type(4),&_th:nth-of-type(4)]:[clip-path:inset(-1px_-10px_-1px_0px)]"]),...f},n)};export{r as TableStickyColumnsContainer};
 //# sourceMappingURL=TableStickyColumnsContainer.js.map

package/dist/components/table/TableStickyColumnsContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableStickyColumnsContainer.js","sources":["../../../src/components/table/TableStickyColumnsContainer.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport React from 'react'\n\nimport { useStickyColumnsCss } from './useStickyColumnsCss'\n\nexport const TableStickyColumnsContainer = ({\n  children,\n  numberOfStickyColumns = 0,\n  className,\n  ...restProps\n}: React.PropsWithChildren<{\n  numberOfStickyColumns?: number\n  className?: string\n}>) => {\n  const [hasScroll, setHasScroll] = React.useState<boolean>(false)\n  const wrapperRef = React.useRef(null)\n  const { columnsCss } = useStickyColumnsCss({\n    numberOfStickyColumns,\n    wrapperRef\n  })\n\n  const handleScroll = (event: React.UIEvent<HTMLDivElement>) => {\n    const newHasScroll = event.currentTarget.scrollLeft > 0\n    if (newHasScroll !== hasScroll) {\n      setHasScroll(newHasScroll)\n    }\n  }\n\n  return (\n    <div\n      onScroll={handleScroll}\n      role=\"scrollbar\"\n      ref={wrapperRef}\n      className={clsx(\n        'overflow-auto',\n        'max-w-full',\n        'relative',\n        'overscroll-x-contain',\n        columnsCss,\n        '[&_td]:bg-inherit',\n        className,\n        numberOfStickyColumns === 1 &&\n          hasScroll && [\n            '[&_td]:nth-[1]:[box-shadow:(--color-alpha-200)_-2px_-3px_9px_1px]',\n            '[&_td]:nth-[1]:[clip-path:inset(0px_-10px_0px_0px)',\n            '[&_th]:nth-[1]:[box-shadow:(--color-alpha-200)_-2px_-3px_9px_1px]',\n            '[&_th]:nth-[1]:[clip-path:inset(0px_-10px_0px_0px)'\n          ],\n        numberOfStickyColumns === 2 &&\n          hasScroll && [\n            '[&_td]:nth-[2]:[box-shadow:(--color-alpha-200)_-2px_-3px_9px_1px]',\n            '[&_td]:nth-[2]:[clip-path:inset(0px_-10px_0px_0px)',\n            '[&_th]:nth-[2]:[box-shadow:(--color-alpha-200)_-2px_-3px_9px_1px]',\n            '[&_th]:nth-[2]:[clip-path:inset(0px_-10px_0px_0px)'\n          ],\n        numberOfStickyColumns === 3 &&\n          hasScroll && [\n            '[&_td]:nth-[3]:[box-shadow:(--color-alpha-200)_-2px_-3px_9px_1px]',\n            '[&_td]:nth-[3]:[clip-path:inset(0px_-10px_0px_0px)',\n            '[&_th]:nth-[3]:[box-shadow:(--color-alpha-200)_-2px_-3px_9px_1px]',\n            '[&_th]:nth-[3]:[clip-path:inset(0px_-10px_0px_0px)'\n          ],\n        numberOfStickyColumns === 4 &&\n          hasScroll && [\n            '[&_td]:nth-[4]:[box-shadow:(--color-alpha-200)_-2px_-3px_9px_1px]',\n            '[&_td]:nth-[4]:[clip-path:inset(0px_-10px_0px_0px)',\n            '[&_th]:nth-[4]:[box-shadow:(--color-alpha-200)_-2px_-3px_9px_1px]',\n            '[&_th]:nth-[4]:[clip-path:inset(0px_-10px_0px_0px)'\n          ]\n      )}\n      {...restProps}\n    >\n      {children}\n    </div>\n  )\n}\n"],"names":["TableStickyColumnsContainer","children","numberOfStickyColumns","className","restProps","hasScroll","setHasScroll","React","wrapperRef","columnsCss","useStickyColumnsCss","event","newHasScroll","clsx"],"mappings":"wGAKa,MAAAA,EAA8B,CAAC,CAC1C,SAAAC,EACA,sBAAAC,EAAwB,EACxB,UAAAC,EACA,GAAGC,CACL,IAGO,CACL,KAAM,CAACC,EAAWC,CAAY,EAAIC,EAAM,SAAkB,EAAK,EACzDC,EAAaD,EAAM,OAAO,IAAI,EAC9B,CAAE,WAAAE,CAAW,EAAIC,EAAoB,CACzC,sBAAAR,EACA,WAAAM,CACF,CAAC,EASD,OACED,EAAA,cAAC,MACC,CAAA,SATkBI,GAAyC,CAC7D,MAAMC,EAAeD,EAAM,cAAc,WAAa,EAClDC,IAAiBP,GACnBC,EAAaM,CAAY,CAE7B,EAKI,KAAK,YACL,IAAKJ,EACL,UAAWK,EACT,gBACA,aACA,WACA,uBACAJ,EACA,oBACAN,EACAD,IAA0B,GACxBG,GAAa,CACX,oEACA,qDACA,oEACA,oDACF,EACFH,IAA0B,GACxBG,GAAa,CACX,oEACA,qDACA,oEACA,oDACF,EACFH,IAA0B,GACxBG,GAAa,CACX,oEACA,qDACA,oEACA,oDACF,EACFH,IAA0B,GACxBG,GAAa,CACX,oEACA,qDACA,oEACA,oDACF,CACJ,EACC,GAAGD,CAEHH,EAAAA,CACH,CAEJ"}
+{"version":3,"file":"TableStickyColumnsContainer.js","sources":["../../../src/components/table/TableStickyColumnsContainer.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport React from 'react'\n\nimport { useStickyColumnsStyle } from './useStickyColumnsCss'\n\nexport const TableStickyColumnsContainer = ({\n  children,\n  numberOfStickyColumns = 0,\n  className,\n  ...restProps\n}: React.PropsWithChildren<{\n  numberOfStickyColumns?: number\n  className?: string\n}>) => {\n  const [hasScroll, setHasScroll] = React.useState<boolean>(false)\n  const wrapperRef = React.useRef(null)\n  const { columnsStyle } = useStickyColumnsStyle({\n    numberOfStickyColumns,\n    wrapperRef\n  })\n\n  const handleScroll = (event: React.UIEvent<HTMLDivElement>) => {\n    const newHasScroll = event.currentTarget.scrollLeft > 0\n    if (newHasScroll !== hasScroll) {\n      setHasScroll(newHasScroll)\n    }\n  }\n\n  return (\n    <div\n      onScroll={handleScroll}\n      // eslint-disable-next-line jsx-a11y/role-has-required-aria-props\n      role=\"scrollbar\"\n      ref={wrapperRef}\n      style={columnsStyle}\n      className={clsx(\n        'overflow-auto',\n        'max-w-full',\n        'relative',\n        'overscroll-x-contain',\n        '[&_td,&_th]:bg-inherit',\n        className,\n        numberOfStickyColumns >= 1 && [\n          '[&_td:nth-of-type(1),&_th:nth-of-type(1)]:sticky',\n          '[&_td:nth-of-type(1),&_th:nth-of-type(1)]:left-(--sticky-offset-left-1)',\n          '[&_td:nth-of-type(1),&_th:nth-of-type(1)]:min-w-(--sticky-column-width-1)',\n          '[&_td:nth-of-type(1),&_th:nth-of-type(1)]:z-2'\n        ],\n        numberOfStickyColumns >= 2 && [\n          '[&_td:nth-of-type(2),&_th:nth-of-type(2)]:sticky',\n          '[&_td:nth-of-type(2),&_th:nth-of-type(2)]:left-(--sticky-offset-left-2)',\n          '[&_td:nth-of-type(2),&_th:nth-of-type(2)]:min-w-(--sticky-column-width-2)',\n          '[&_td:nth-of-type(2),&_th:nth-of-type(2)]:z-2'\n        ],\n        numberOfStickyColumns >= 3 && [\n          '[&_td:nth-of-type(3),&_th:nth-of-type(3)]:sticky',\n          '[&_td:nth-of-type(3),&_th:nth-of-type(3)]:left-(--sticky-offset-left-3)',\n          '[&_td:nth-of-type(3),&_th:nth-of-type(3)]:min-w-(--sticky-column-width-3)',\n          '[&_td:nth-of-type(3),&_th:nth-of-type(3)]:z-2'\n        ],\n        numberOfStickyColumns >= 4 && [\n          '[&_td:nth-of-type(4),&_th:nth-of-type(4)]:sticky',\n          '[&_td:nth-of-type(4),&_th:nth-of-type(4)]:left-(--sticky-offset-left-4)',\n          '[&_td:nth-of-type(4),&_th:nth-of-type(4)]:min-w-(--sticky-column-width-4)',\n          '[&_td:nth-of-type(4),&_th:nth-of-type(4)]:z-2'\n        ],\n        numberOfStickyColumns === 1 &&\n          hasScroll && [\n            '[&_td:nth-of-type(1),&_th:nth-of-type(1)]:shadow-[var(--color-alpha-200)_-2px_-3px_9px_1px]',\n            '[&_td:nth-of-type(1),&_th:nth-of-type(1)]:[clip-path:inset(-1px_-10px_-1px_0px)]'\n          ],\n        numberOfStickyColumns === 2 &&\n          hasScroll && [\n            '[&_td:nth-of-type(2),&_th:nth-of-type(2)]:shadow-[var(--color-alpha-200)_-2px_-3px_9px_1px]',\n            '[&_td:nth-of-type(2),&_th:nth-of-type(2)]:[clip-path:inset(-1px_-10px_-1px_0px)]'\n          ],\n        numberOfStickyColumns === 3 &&\n          hasScroll && [\n            '[&_td:nth-of-type(3),&_th:nth-of-type(3)]:shadow-[var(--color-alpha-200)_-2px_-3px_9px_1px]',\n            '[&_td:nth-of-type(3),&_th:nth-of-type(3)]:[clip-path:inset(-1px_-10px_-1px_0px)]'\n          ],\n        numberOfStickyColumns === 4 &&\n          hasScroll && [\n            '[&_td:nth-of-type(4),&_th:nth-of-type(4)]:shadow-[var(--color-alpha-200)_-2px_-3px_9px_1px]',\n            '[&_td:nth-of-type(4),&_th:nth-of-type(4)]:[clip-path:inset(-1px_-10px_-1px_0px)]'\n          ]\n      )}\n      {...restProps}\n    >\n      {children}\n    </div>\n  )\n}\n"],"names":["TableStickyColumnsContainer","children","numberOfStickyColumns","className","restProps","hasScroll","setHasScroll","React","wrapperRef","columnsStyle","useStickyColumnsStyle","event","newHasScroll","clsx"],"mappings":"0GAKa,MAAAA,EAA8B,CAAC,CAC1C,SAAAC,EACA,sBAAAC,EAAwB,EACxB,UAAAC,EACA,GAAGC,CACL,IAGO,CACL,KAAM,CAACC,EAAWC,CAAY,EAAIC,EAAM,SAAkB,EAAK,EACzDC,EAAaD,EAAM,OAAO,IAAI,EAC9B,CAAE,aAAAE,CAAa,EAAIC,EAAsB,CAC7C,sBAAAR,EACA,WAAAM,CACF,CAAC,EASD,OACED,EAAA,cAAC,MAAA,CACC,SATkBI,GAAyC,CAC7D,MAAMC,EAAeD,EAAM,cAAc,WAAa,EAClDC,IAAiBP,GACnBC,EAAaM,CAAY,CAE7B,EAMI,KAAK,YACL,IAAKJ,EACL,MAAOC,EACP,UAAWI,EACT,gBACA,aACA,WACA,uBACA,yBACAV,EACAD,GAAyB,GAAK,CAC5B,mDACA,0EACA,4EACA,+CACF,EACAA,GAAyB,GAAK,CAC5B,mDACA,0EACA,4EACA,+CACF,EACAA,GAAyB,GAAK,CAC5B,mDACA,0EACA,4EACA,+CACF,EACAA,GAAyB,GAAK,CAC5B,mDACA,0EACA,4EACA,+CACF,EACAA,IAA0B,GACxBG,GAAa,CACX,8FACA,kFACF,EACFH,IAA0B,GACxBG,GAAa,CACX,8FACA,kFACF,EACFH,IAA0B,GACxBG,GAAa,CACX,8FACA,kFACF,EACFH,IAA0B,GACxBG,GAAa,CACX,8FACA,kFACF,CACJ,EACC,GAAGD,CAAAA,EAEHH,CACH,CAEJ"}

package/dist/components/table/useStickyColumnsCss.d.ts

@@ -1,14 +1,9 @@
 import * as React from 'react';
-type ColumnCss = Record<string, {
-    position: 'sticky';
-    left: string;
-    minWidth: string;
-    zIndex: string;
-}>;
+type ColumnStyle = Record<`--sticky-column-width-${number}` | `--sticky-offset-left-${number}`, string>;
 interface IUseStickyColumnsCss {
-    columnsCss?: ColumnCss;
+    columnsStyle?: ColumnStyle;
 }
-export declare const useStickyColumnsCss: ({ numberOfStickyColumns, wrapperRef }: {
+export declare const useStickyColumnsStyle: ({ numberOfStickyColumns, wrapperRef }: {
     numberOfStickyColumns: number;
     wrapperRef: React.RefObject<HTMLTableSectionElement>;
 }) => IUseStickyColumnsCss;

package/dist/components/table/useStickyColumnsCss.js

@@ -1,2 +1,2 @@
-import*as n from"react";const y=({numberOfStickyColumns:t,wrapperRef:c})=>{const[i,a]=n.useState({}),r=n.useCallback(()=>{var e;let u=0;const o=(e=c.current)==null?void 0:e.querySelectorAll("th");return Array.from(o||[]).slice(0,t).reduce((f,m,s)=>{const l=s+1,p={...f,["& td:nth-of-type(".concat(l,"), th:nth-of-type(").concat(l,")")]:{position:"sticky",left:"".concat(u,"px"),minWidth:"".concat(m.offsetWidth,"px"),zIndex:"2"}};return u+=(o==null?void 0:o.item(s).clientWidth)||0,p},{})},[t,c]);return n.useLayoutEffect(()=>{if(!t)return;const e=r();a(e)},[t,c,r]),{columnsCss:i}};export{y as useStickyColumnsCss};
+import*as c from"react";const d=({numberOfStickyColumns:e,wrapperRef:r})=>{const[i,f]=c.useState({}),l=c.useCallback(()=>{var t;let s=0;const o=(t=r.current)==null?void 0:t.querySelectorAll("th");return Array.from(o||[]).slice(0,e).reduce((m,y,u)=>{const n=u+1,a={...m,[`--sticky-column-width-${n}`]:`${y.offsetWidth}px`,[`--sticky-offset-left-${n}`]:`${s}px`};return s+=(o==null?void 0:o.item(u).clientWidth)||0,a},{})},[e,r]);return c.useLayoutEffect(()=>{if(!e)return;const t=l();f(t)},[e,r,l]),{columnsStyle:i}};export{d as useStickyColumnsStyle};
 //# sourceMappingURL=useStickyColumnsCss.js.map

package/dist/components/table/useStickyColumnsCss.js.map

@@ -1 +1 @@
-{"version":3,"file":"useStickyColumnsCss.js","sources":["../../../src/components/table/useStickyColumnsCss.ts"],"sourcesContent":["import * as React from 'react'\n\ntype ColumnCss = Record<\n  string,\n  {\n    position: 'sticky'\n    left: string\n    minWidth: string\n    zIndex: string\n  }\n>\n\ninterface IUseStickyColumnsCss {\n  columnsCss?: ColumnCss\n}\n\nexport const useStickyColumnsCss = ({\n  numberOfStickyColumns,\n  wrapperRef\n}: {\n  numberOfStickyColumns: number\n  wrapperRef: React.RefObject<HTMLTableSectionElement>\n}): IUseStickyColumnsCss => {\n  const [columnsCss, setColumnsCss] = React.useState<ColumnCss>({})\n\n  const generateColumnsCss = React.useCallback(() => {\n    let accWidth = 0\n\n    // Getting the table header cells elements to use their width to set the left position in the sticky columns.\n    const tableHeaderCells = wrapperRef.current?.querySelectorAll('th')\n    const tableHeaderElements = Array.from(tableHeaderCells || [])\n\n    // Getting only the number of sticky columns from the elements array that is what we are interested in.\n    const stickyColumns = tableHeaderElements.slice(0, numberOfStickyColumns)\n\n    const newColumnsCss = stickyColumns.reduce((acc, column, index) => {\n      const elementNumber = index + 1\n      const cssObject = {\n        ...acc,\n        [`& td:nth-of-type(${elementNumber}), th:nth-of-type(${elementNumber})`]:\n          {\n            position: 'sticky',\n            left: `${accWidth}px`,\n            minWidth: `${column.offsetWidth}px`, // fixing width for sticky columns\n            zIndex: '2'\n          }\n      }\n\n      accWidth += tableHeaderCells?.item(index).clientWidth || 0\n\n      return cssObject\n    }, {})\n\n    return newColumnsCss\n  }, [numberOfStickyColumns, wrapperRef])\n\n  React.useLayoutEffect(() => {\n    if (!numberOfStickyColumns) return\n    const newColumnsCss = generateColumnsCss()\n\n    setColumnsCss(newColumnsCss)\n  }, [numberOfStickyColumns, wrapperRef, generateColumnsCss])\n\n  return {\n    columnsCss\n  }\n}\n"],"names":["useStickyColumnsCss","numberOfStickyColumns","wrapperRef","columnsCss","setColumnsCss","React","generateColumnsCss","_a","accWidth","tableHeaderCells","acc","column","index","elementNumber","cssObject","newColumnsCss"],"mappings":"wBAgBa,MAAAA,EAAsB,CAAC,CAClC,sBAAAC,EACA,WAAAC,CACF,IAG4B,CAC1B,KAAM,CAACC,EAAYC,CAAa,EAAIC,EAAM,SAAoB,CAAE,CAAA,EAE1DC,EAAqBD,EAAM,YAAY,IAAM,CAzBrD,IAAAE,EA0BI,IAAIC,EAAW,EAGf,MAAMC,GAAmBF,EAAAL,EAAW,UAAX,KAAAK,OAAAA,EAAoB,iBAAiB,IAwB9D,EAAA,OAvB4B,MAAM,KAAKE,GAAoB,CAAE,CAAA,EAGnB,MAAM,EAAGR,CAAqB,EAEpC,OAAO,CAACS,EAAKC,EAAQC,IAAU,CACjE,MAAMC,EAAgBD,EAAQ,EACxBE,EAAY,CAChB,GAAGJ,EACH,CAAC,oBAAoB,OAAAG,EAAa,oBAAA,EAAqB,OAAAA,EAAa,GAAG,CAAA,EACrE,CACE,SAAU,SACV,KAAM,GAAG,OAAAL,EAAQ,IACjB,EAAA,SAAU,GAAG,OAAAG,EAAO,YAAW,IAAA,EAC/B,OAAQ,GACV,CACJ,EAEA,OAAAH,IAAYC,GAAA,KAAAA,OAAAA,EAAkB,KAAKG,CAAAA,EAAO,cAAe,EAElDE,CACT,EAAG,CAAA,CAAE,CAGP,EAAG,CAACb,EAAuBC,CAAU,CAAC,EAEtC,OAAAG,EAAM,gBAAgB,IAAM,CAC1B,GAAI,CAACJ,EAAuB,OAC5B,MAAMc,EAAgBT,EAEtBF,EAAAA,EAAcW,CAAa,CAC7B,EAAG,CAACd,EAAuBC,EAAYI,CAAkB,CAAC,EAEnD,CACL,WAAAH,CACF,CACF"}
+{"version":3,"file":"useStickyColumnsCss.js","sources":["../../../src/components/table/useStickyColumnsCss.ts"],"sourcesContent":["import * as React from 'react'\n\ntype ColumnStyle = Record<\n  `--sticky-column-width-${number}` | `--sticky-offset-left-${number}`,\n  string\n>\n\ninterface IUseStickyColumnsCss {\n  columnsStyle?: ColumnStyle\n}\n\nexport const useStickyColumnsStyle = ({\n  numberOfStickyColumns,\n  wrapperRef\n}: {\n  numberOfStickyColumns: number\n  wrapperRef: React.RefObject<HTMLTableSectionElement>\n}): IUseStickyColumnsCss => {\n  const [columnsStyle, setColumnsStyle] = React.useState<ColumnStyle>({})\n\n  const generateColumnsStyle = React.useCallback(() => {\n    let accWidth = 0\n\n    // Getting the table header cells elements to use their width to set the left position in the sticky columns.\n    const tableHeaderCells = wrapperRef.current?.querySelectorAll('th')\n    const tableHeaderElements = Array.from(tableHeaderCells || [])\n\n    // Getting only the number of sticky columns from the elements array that is what we are interested in.\n    const stickyColumns = tableHeaderElements.slice(0, numberOfStickyColumns)\n\n    const newColumnsStyle = stickyColumns.reduce((acc, column, index) => {\n      const elementNumber = index + 1\n      const styleObject = {\n        ...acc,\n        [`--sticky-column-width-${elementNumber}`]: `${column.offsetWidth}px`,\n        [`--sticky-offset-left-${elementNumber}`]: `${accWidth}px`\n      }\n\n      accWidth += tableHeaderCells?.item(index).clientWidth || 0\n\n      return styleObject\n    }, {})\n\n    return newColumnsStyle\n  }, [numberOfStickyColumns, wrapperRef])\n\n  React.useLayoutEffect(() => {\n    if (!numberOfStickyColumns) return\n    const newColumnsStyle = generateColumnsStyle()\n\n    setColumnsStyle(newColumnsStyle)\n  }, [numberOfStickyColumns, wrapperRef, generateColumnsStyle])\n\n  return {\n    columnsStyle\n  }\n}\n"],"names":["useStickyColumnsStyle","numberOfStickyColumns","wrapperRef","columnsStyle","setColumnsStyle","React","generateColumnsStyle","_a","accWidth","tableHeaderCells","acc","column","index","elementNumber","styleObject","newColumnsStyle"],"mappings":"wBAWa,MAAAA,EAAwB,CAAC,CACpC,sBAAAC,EACA,WAAAC,CACF,IAG4B,CAC1B,KAAM,CAACC,EAAcC,CAAe,EAAIC,EAAM,SAAsB,EAAE,EAEhEC,EAAuBD,EAAM,YAAY,IAAM,CApBvD,IAAAE,EAqBI,IAAIC,EAAW,EAGf,MAAMC,GAAmBF,EAAAL,EAAW,UAAX,KAAAK,OAAAA,EAAoB,iBAAiB,IAAA,EAmB9D,OAlB4B,MAAM,KAAKE,GAAoB,CAAE,CAAA,EAGnB,MAAM,EAAGR,CAAqB,EAElC,OAAO,CAACS,EAAKC,EAAQC,IAAU,CACnE,MAAMC,EAAgBD,EAAQ,EACxBE,EAAc,CAClB,GAAGJ,EACH,CAAC,yBAAyBG,CAAa,EAAE,EAAG,GAAGF,EAAO,WAAW,KACjE,CAAC,wBAAwBE,CAAa,EAAE,EAAG,GAAGL,CAAQ,IACxD,EAEA,OAAAA,IAAYC,GAAA,KAAAA,OAAAA,EAAkB,KAAKG,CAAAA,EAAO,cAAe,EAElDE,CACT,EAAG,CAAE,CAAA,CAGP,EAAG,CAACb,EAAuBC,CAAU,CAAC,EAEtC,OAAAG,EAAM,gBAAgB,IAAM,CAC1B,GAAI,CAACJ,EAAuB,OAC5B,MAAMc,EAAkBT,EAAqB,EAE7CF,EAAgBW,CAAe,CACjC,EAAG,CAACd,EAAuBC,EAAYI,CAAoB,CAAC,EAErD,CACL,aAAAH,CACF,CACF"}

package/dist/components/tabs/Tabs.d.ts

@@ -1,21 +1,21 @@
 import * as React from 'react';
-export declare const Tabs: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-tabs").TabsProps & React.RefAttributes<HTMLDivElement> & {
+export declare const Tabs: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-tabs").TabsProps & React.RefAttributes<HTMLDivElement>, never> & {
     as?: React.ElementType;
-}, "ref"> & React.RefAttributes<HTMLDivElement>> & {
+}> & {
     TriggerList: {
-        ({ children, colorScheme, ...rest }: React.ComponentProps<React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-tabs").TabsListProps & React.RefAttributes<HTMLDivElement> & {
+        ({ children, colorScheme, ...rest }: React.ComponentProps<React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-tabs").TabsListProps & React.RefAttributes<HTMLDivElement>, never> & {
             as?: React.ElementType;
-        }, "ref"> & React.RefAttributes<HTMLDivElement>>> & {
+        }>> & {
             colorScheme?: import("../..").TcolorScheme;
         }): React.JSX.Element;
         displayName: string;
     };
-    Trigger: React.ForwardRefExoticComponent<Omit<Omit<import("@radix-ui/react-tabs").TabsTriggerProps & React.RefAttributes<HTMLButtonElement> & {
+    Trigger: React.ForwardRefExoticComponent<Omit<Omit<import("@radix-ui/react-tabs").TabsTriggerProps & React.RefAttributes<HTMLButtonElement>, never> & {
         as?: React.ElementType;
-    }, "ref"> & React.RefAttributes<HTMLButtonElement> & {
+    } & {
         value: string;
     }, "ref"> & React.RefAttributes<HTMLButtonElement>>;
-    Content: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-tabs").TabsContentProps & React.RefAttributes<HTMLDivElement> & {
+    Content: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-tabs").TabsContentProps & React.RefAttributes<HTMLDivElement>, never> & {
         as?: React.ElementType;
-    }, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    }>;
 };

package/dist/components/tabs/TabsContent.d.ts

@@ -1,3 +1,3 @@
-export declare const TabsContent: import("react").ForwardRefExoticComponent<Omit<import("@radix-ui/react-tabs").TabsContentProps & import("react").RefAttributes<HTMLDivElement> & {
+export declare const TabsContent: import("react").ForwardRefExoticComponent<Omit<import("@radix-ui/react-tabs").TabsContentProps & import("react").RefAttributes<HTMLDivElement>, never> & {
     as?: import("react").ElementType;
-}, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+}>;

package/dist/components/tabs/TabsTrigger.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-export declare const TabsTrigger: React.ForwardRefExoticComponent<Omit<Omit<import("@radix-ui/react-tabs").TabsTriggerProps & React.RefAttributes<HTMLButtonElement> & {
+export declare const TabsTrigger: React.ForwardRefExoticComponent<Omit<Omit<import("@radix-ui/react-tabs").TabsTriggerProps & React.RefAttributes<HTMLButtonElement>, never> & {
     as?: React.ElementType;
-}, "ref"> & React.RefAttributes<HTMLButtonElement> & {
+} & {
     value: string;
 }, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/tabs/TabsTrigger.js

@@ -1,2 +1,2 @@
-import{Trigger as r}from"@radix-ui/react-tabs";import*as e from"react";import{styled as t}from"../../styled.js";import{Text as d}from"../text/Text.js";const n=t("div",{base:["absolute","inset-0","h-[calc(100%+2px)]","opacity-0","bg-(--interactive-1)"]}),l=t(r,{base:["bg-none","cursor-pointer","shrink-0","p-4","select-none","border-b-2","border-b-transparent","relative","data-[state=active]:border-current","data-[state=active]:font-semibold","data-[state=active]:text-(--interactive-1)","data-[state=active]:tracking-[-0.005em]","disabled:cursor-not-allowed","disabled:opacity-30","not-disabled:active:text-(--interactive-3)","not-disabled:focus-visible:[&_div]:opacity-7","not-disabled:focus-visible:outline-none","not-disabled:focus-visible:relative","not-disabled:focus-visible:shadow-[$colors$primary800_0px_0px_0px_4px]","not-disabled:focus-visible:shadow-[white_0px_0px_0px_2px]","not-disabled:focus-visible:text-(--interactive-2)","not-disabled:focus-visible:z-1","not-disabled:hover:[&_div]:opacity-7","not-disabled:hover:text-(--interactive-2)"]}),i=e.forwardRef(({children:a,...o},s)=>e.createElement(l,{...o,ref:s},e.createElement(d,{size:"sm",as:"span"},a),e.createElement(n,null)));i.displayName="TabsTrigger";export{i as TabsTrigger};
+import{Trigger as r}from"@radix-ui/react-tabs";import*as e from"react";import{styled as t}from"../../styled.js";import{Text as d}from"../text/Text.js";const n=t("div",{base:["absolute","inset-0","h-[calc(100%+2px)]","opacity-0","bg-(--interactive-1)"]}),l=t(r,{base:["bg-none","cursor-pointer","shrink-0","p-4","select-none","border-b-2","border-b-transparent","relative","data-[state=active]:border-current","data-[state=active]:font-semibold","data-[state=active]:text-(--interactive-1)","data-[state=active]:tracking-[-0.005em]","disabled:cursor-not-allowed","disabled:opacity-30","not-disabled:active:text-(--interactive-3)","not-disabled:focus-visible:[&_div]:opacity-7","not-disabled:focus-visible:outline-none","not-disabled:focus-visible:relative","not-disabled:focus-visible:shadow-[var(--color-primary-800)_0px_0px_0px_4px]","not-disabled:focus-visible:shadow-[white_0px_0px_0px_2px]","not-disabled:focus-visible:text-(--interactive-2)","not-disabled:focus-visible:z-1","not-disabled:hover:[&_div]:opacity-7","not-disabled:hover:text-(--interactive-2)"]}),i=e.forwardRef(({children:a,...o},s)=>e.createElement(l,{...o,ref:s},e.createElement(d,{size:"sm",as:"span"},a),e.createElement(n,null)));i.displayName="TabsTrigger";export{i as TabsTrigger};
 //# sourceMappingURL=TabsTrigger.js.map

package/dist/components/tabs/TabsTrigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabsTrigger.js","sources":["../../../src/components/tabs/TabsTrigger.tsx"],"sourcesContent":["import { Trigger } from '@radix-ui/react-tabs'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { Text } from '../text'\n\nconst StyledTabsTriggerHoverBackground = styled('div', {\n  base: [\n    'absolute',\n    'inset-0',\n    'h-[calc(100%+2px)]',\n    'opacity-0',\n    'bg-(--interactive-1)'\n  ]\n})\n\nconst StyledTabsTrigger = styled(Trigger, {\n  base: [\n    'bg-none',\n    'cursor-pointer',\n    'shrink-0',\n    'p-4',\n    'select-none',\n    'border-b-2',\n    'border-b-transparent',\n    'relative',\n    'data-[state=active]:border-current',\n    'data-[state=active]:font-semibold',\n    'data-[state=active]:text-(--interactive-1)',\n    'data-[state=active]:tracking-[-0.005em]',\n    'disabled:cursor-not-allowed',\n    'disabled:opacity-30',\n    'not-disabled:active:text-(--interactive-3)',\n    'not-disabled:focus-visible:[&_div]:opacity-7',\n    'not-disabled:focus-visible:outline-none',\n    'not-disabled:focus-visible:relative',\n    'not-disabled:focus-visible:shadow-[$colors$primary800_0px_0px_0px_4px]',\n    'not-disabled:focus-visible:shadow-[white_0px_0px_0px_2px]',\n    'not-disabled:focus-visible:text-(--interactive-2)',\n    'not-disabled:focus-visible:z-1',\n    'not-disabled:hover:[&_div]:opacity-7',\n    'not-disabled:hover:text-(--interactive-2)'\n  ]\n})\n\nexport const TabsTrigger = React.forwardRef<\n  HTMLButtonElement,\n  React.ComponentProps<typeof StyledTabsTrigger> & { value: string }\n>(({ children, ...rest }, ref) => (\n  <StyledTabsTrigger {...rest} ref={ref}>\n    <Text size=\"sm\" as=\"span\">\n      {children}\n    </Text>\n    <StyledTabsTriggerHoverBackground />\n  </StyledTabsTrigger>\n))\n\nTabsTrigger.displayName = 'TabsTrigger'\n"],"names":["StyledTabsTriggerHoverBackground","styled","StyledTabsTrigger","Trigger","TabsTrigger","React","children","rest","ref","Text"],"mappings":"uJAOA,MAAMA,EAAmCC,EAAO,MAAO,CACrD,KAAM,CACJ,WACA,UACA,qBACA,YACA,sBACF,CACF,CAAC,EAEKC,EAAoBD,EAAOE,EAAS,CACxC,KAAM,CACJ,UACA,iBACA,WACA,MACA,cACA,aACA,uBACA,WACA,qCACA,oCACA,6CACA,0CACA,8BACA,sBACA,6CACA,+CACA,0CACA,sCACA,yEACA,4DACA,oDACA,iCACA,uCACA,2CACF,CACF,CAAC,EAEYC,EAAcC,EAAM,WAG/B,CAAC,CAAE,SAAAC,EAAU,GAAGC,CAAK,EAAGC,IACxBH,EAAA,cAACH,EAAA,CAAmB,GAAGK,EAAM,IAAKC,CAAAA,EAChCH,EAAA,cAACI,EAAA,CAAK,KAAK,KAAK,GAAG,QAChBH,CACH,EACAD,EAAA,cAACL,EAAA,IAAiC,CACpC,CACD,EAEDI,EAAY,YAAc"}
+{"version":3,"file":"TabsTrigger.js","sources":["../../../src/components/tabs/TabsTrigger.tsx"],"sourcesContent":["import { Trigger } from '@radix-ui/react-tabs'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { Text } from '../text'\n\nconst StyledTabsTriggerHoverBackground = styled('div', {\n  base: [\n    'absolute',\n    'inset-0',\n    'h-[calc(100%+2px)]',\n    'opacity-0',\n    'bg-(--interactive-1)'\n  ]\n})\n\nconst StyledTabsTrigger = styled(Trigger, {\n  base: [\n    'bg-none',\n    'cursor-pointer',\n    'shrink-0',\n    'p-4',\n    'select-none',\n    'border-b-2',\n    'border-b-transparent',\n    'relative',\n    'data-[state=active]:border-current',\n    'data-[state=active]:font-semibold',\n    'data-[state=active]:text-(--interactive-1)',\n    'data-[state=active]:tracking-[-0.005em]',\n    'disabled:cursor-not-allowed',\n    'disabled:opacity-30',\n    'not-disabled:active:text-(--interactive-3)',\n    'not-disabled:focus-visible:[&_div]:opacity-7',\n    'not-disabled:focus-visible:outline-none',\n    'not-disabled:focus-visible:relative',\n    'not-disabled:focus-visible:shadow-[var(--color-primary-800)_0px_0px_0px_4px]',\n    'not-disabled:focus-visible:shadow-[white_0px_0px_0px_2px]',\n    'not-disabled:focus-visible:text-(--interactive-2)',\n    'not-disabled:focus-visible:z-1',\n    'not-disabled:hover:[&_div]:opacity-7',\n    'not-disabled:hover:text-(--interactive-2)'\n  ]\n})\n\nexport const TabsTrigger = React.forwardRef<\n  HTMLButtonElement,\n  React.ComponentProps<typeof StyledTabsTrigger> & { value: string }\n>(({ children, ...rest }, ref) => (\n  <StyledTabsTrigger {...rest} ref={ref}>\n    <Text size=\"sm\" as=\"span\">\n      {children}\n    </Text>\n    <StyledTabsTriggerHoverBackground />\n  </StyledTabsTrigger>\n))\n\nTabsTrigger.displayName = 'TabsTrigger'\n"],"names":["StyledTabsTriggerHoverBackground","styled","StyledTabsTrigger","Trigger","TabsTrigger","React","children","rest","ref","Text"],"mappings":"uJAOA,MAAMA,EAAmCC,EAAO,MAAO,CACrD,KAAM,CACJ,WACA,UACA,qBACA,YACA,sBACF,CACF,CAAC,EAEKC,EAAoBD,EAAOE,EAAS,CACxC,KAAM,CACJ,UACA,iBACA,WACA,MACA,cACA,aACA,uBACA,WACA,qCACA,oCACA,6CACA,0CACA,8BACA,sBACA,6CACA,+CACA,0CACA,sCACA,+EACA,4DACA,oDACA,iCACA,uCACA,2CACF,CACF,CAAC,EAEYC,EAAcC,EAAM,WAG/B,CAAC,CAAE,SAAAC,EAAU,GAAGC,CAAK,EAAGC,IACxBH,EAAA,cAACH,EAAA,CAAmB,GAAGK,EAAM,IAAKC,CAAAA,EAChCH,EAAA,cAACI,EAAA,CAAK,KAAK,KAAK,GAAG,QAChBH,CACH,EACAD,EAAA,cAACL,EAAA,IAAiC,CACpC,CACD,EAEDI,EAAY,YAAc"}

package/dist/components/tabs/TabsTriggerList.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
 import { TcolorScheme } from '../../experiments/color-scheme';
-declare const StyledTriggerList: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-tabs").TabsListProps & React.RefAttributes<HTMLDivElement> & {
+declare const StyledTriggerList: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-tabs").TabsListProps & React.RefAttributes<HTMLDivElement>, never> & {
     as?: React.ElementType;
-}, "ref"> & React.RefAttributes<HTMLDivElement>>;
+}>;
 export declare const TabsTriggerList: {
     ({ children, colorScheme, ...rest }: React.ComponentProps<typeof StyledTriggerList> & {
         colorScheme?: TcolorScheme;

package/dist/components/text/Text.d.ts

@@ -1,30 +1,15 @@
 import * as React from 'react';
 import type { Override } from '../../utilities';
-export declare const textVariants: {
-    size: {
-        xs: string[];
-        sm: string[];
-        md: string[];
-        lg: string[];
-        xl: string[];
-    };
-    noCapsize: {
-        true: string[];
-    };
-};
-export declare const getTextVariant: (options: {
-    size: keyof typeof textVariants.size;
-}) => string[];
 export declare const StyledText: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & {
     ref?: ((instance: HTMLParagraphElement | null) => void) | React.RefObject<HTMLParagraphElement> | null | undefined;
-} & {
+}, "size" | "noCapsize" | "weight" | "family"> & {
+    size?: ("sm" | "md" | "lg" | "xs" | "xl" | "2xl" | "3xl" | "4xl" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "lg" | "xs" | "xl" | "2xl" | "3xl" | "4xl">>) | undefined;
+    noCapsize?: (boolean | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", boolean>>) | undefined;
     weight?: ("bold" | "normal" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "bold" | "normal">>) | undefined;
     family?: ("body" | "display" | "mono" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "body" | "display" | "mono">>) | undefined;
-    size?: ("sm" | "md" | "lg" | "xs" | "xl" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "lg" | "xs" | "xl">>) | undefined;
-    noCapsize?: (boolean | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", boolean>>) | undefined;
 } & {
     as?: React.ElementType;
-}, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+}>;
 type TextProps = Override<React.ComponentProps<typeof StyledText>, {
     as?: 'blockquote' | 'caption' | 'dd' | 'dt' | 'figcaption' | 'li' | 'p' | 'span' | 'legend' | React.ComponentType | React.ElementType;
 }>;

package/dist/components/text/Text.js

@@ -1,2 +1,2 @@
-import*as a from"react";import{styled as l}from"../../styled.js";const t={size:{xs:["text-xs","leading-[1.6]","capsize-[0.4364]"],sm:["text-sm","leading-[1.53]","capsize-[0.4056]"],md:["text-md","leading-normal","capsize-[0.3864]"],lg:["text-lg","leading-[1.52]","capsize-[0.3983]"],xl:["text-xl","leading-[1.42]","capsize-[0.3506]"]},noCapsize:{true:["before:hidden!","after:hidden!"]}},m=e=>t.size[e.size],i=l("p",{base:["m-0","[&>&]:before:hidden","[&>&]:after:hidden"],variants:{...t,weight:{normal:["font-normal"],bold:["font-semibold"]},family:{body:["font-body"],display:["font-display"],mono:["font-mono"]}}}),d=a.forwardRef(({size:e="md",family:o="body",...n},s)=>a.createElement(i,{size:e,family:o,...n,ref:s}));d.displayName="Text";export{i as StyledText,d as Text,m as getTextVariant,t as textVariants};
+import*as e from"react";import{styled as o}from"../../styled.js";const a=o("p",{base:["m-0","[&>&]:before:hidden","[&>&]:after:hidden"],variants:{size:{xs:["text-xs","leading-[1.6]","capsize-[0.4364]"],sm:["text-sm","leading-[1.53]","capsize-[0.4056]"],md:["text-md","leading-normal","capsize-[0.3864]"],lg:["text-lg","leading-[1.52]","capsize-[0.3983]"],xl:["text-xl","leading-[1.42]","capsize-[0.3506]"],"2xl":["text-2xl","leading-[1.40]","capsize-[0.3336]"],"3xl":["text-3xl","leading-[1.28]","capsize-[0.2709]"],"4xl":["text-4xl","leading-none","capsize-[0.1309]"]},noCapsize:{true:["before:hidden!","after:hidden!"]},weight:{normal:["font-normal"],bold:["font-semibold"]},family:{body:["font-body"],display:["font-display"],mono:["font-mono"]}}},{enabledResponsiveVariants:!0}),t=e.forwardRef(({size:i="md",family:l="body",...d},n)=>e.createElement(a,{size:i,family:l,...d,ref:n}));t.displayName="Text";export{a as StyledText,t as Text};
 //# sourceMappingURL=Text.js.map

package/dist/components/text/Text.js.map

@@ -1 +1 @@
-{"version":3,"file":"Text.js","sources":["../../../src/components/text/Text.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\nimport type { Override } from '~/utilities'\n\nexport const textVariants = {\n  size: {\n    xs: ['text-xs', 'leading-[1.6]', 'capsize-[0.4364]'],\n    sm: ['text-sm', 'leading-[1.53]', 'capsize-[0.4056]'],\n    md: ['text-md', 'leading-normal', 'capsize-[0.3864]'],\n    lg: ['text-lg', 'leading-[1.52]', 'capsize-[0.3983]'],\n    xl: ['text-xl', 'leading-[1.42]', 'capsize-[0.3506]']\n  },\n  noCapsize: {\n    true: ['before:hidden!', 'after:hidden!']\n  }\n}\n\nexport const getTextVariant = (options: {\n  size: keyof typeof textVariants.size\n}): string[] => textVariants.size[options.size]\n\nexport const StyledText = styled('p', {\n  base: ['m-0', '[&>&]:before:hidden', '[&>&]:after:hidden'],\n  variants: {\n    ...textVariants,\n    weight: {\n      normal: ['font-normal'],\n      bold: ['font-semibold']\n    },\n    family: {\n      body: ['font-body'],\n      display: ['font-display'],\n      mono: ['font-mono']\n    }\n  }\n})\n\ntype TextProps = Override<\n  React.ComponentProps<typeof StyledText>,\n  {\n    as?:\n      | 'blockquote'\n      | 'caption'\n      | 'dd'\n      | 'dt'\n      | 'figcaption'\n      | 'li'\n      | 'p'\n      | 'span'\n      | 'legend'\n      | React.ComponentType\n      | React.ElementType\n  }\n>\n\nexport const Text = React.forwardRef<HTMLParagraphElement, TextProps>(\n  ({ size = 'md', family = 'body', ...remainingProps }, ref) => (\n    <StyledText size={size} family={family} {...remainingProps} ref={ref} />\n  )\n)\n\nText.displayName = 'Text'\n"],"names":["textVariants","getTextVariant","options","StyledText","styled","Text","React","size","family","remainingProps","ref"],"mappings":"iEAKa,MAAAA,EAAe,CAC1B,KAAM,CACJ,GAAI,CAAC,UAAW,gBAAiB,kBAAkB,EACnD,GAAI,CAAC,UAAW,iBAAkB,kBAAkB,EACpD,GAAI,CAAC,UAAW,iBAAkB,kBAAkB,EACpD,GAAI,CAAC,UAAW,iBAAkB,kBAAkB,EACpD,GAAI,CAAC,UAAW,iBAAkB,kBAAkB,CACtD,EACA,UAAW,CACT,KAAM,CAAC,iBAAkB,eAAe,CAC1C,CACF,EAEaC,EAAkBC,GAEfF,EAAa,KAAKE,EAAQ,IAAI,EAEjCC,EAAaC,EAAO,IAAK,CACpC,KAAM,CAAC,MAAO,sBAAuB,oBAAoB,EACzD,SAAU,CACR,GAAGJ,EACH,OAAQ,CACN,OAAQ,CAAC,aAAa,EACtB,KAAM,CAAC,eAAe,CACxB,EACA,OAAQ,CACN,KAAM,CAAC,WAAW,EAClB,QAAS,CAAC,cAAc,EACxB,KAAM,CAAC,WAAW,CACpB,CACF,CACF,CAAC,EAoBYK,EAAOC,EAAM,WACxB,CAAC,CAAE,KAAAC,EAAO,KAAM,OAAAC,EAAS,OAAQ,GAAGC,CAAe,EAAGC,IACpDJ,EAAA,cAACH,EAAA,CAAW,KAAMI,EAAM,OAAQC,EAAS,GAAGC,EAAgB,IAAKC,CAAAA,CAAK,CAE1E,EAEAL,EAAK,YAAc"}
+{"version":3,"file":"Text.js","sources":["../../../src/components/text/Text.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\nimport type { Override } from '~/utilities'\n\nexport const StyledText = styled(\n  'p',\n  {\n    base: ['m-0', '[&>&]:before:hidden', '[&>&]:after:hidden'],\n    variants: {\n      size: {\n        xs: ['text-xs', 'leading-[1.6]', 'capsize-[0.4364]'],\n        sm: ['text-sm', 'leading-[1.53]', 'capsize-[0.4056]'],\n        md: ['text-md', 'leading-normal', 'capsize-[0.3864]'],\n        lg: ['text-lg', 'leading-[1.52]', 'capsize-[0.3983]'],\n        xl: ['text-xl', 'leading-[1.42]', 'capsize-[0.3506]'],\n        '2xl': ['text-2xl', 'leading-[1.40]', 'capsize-[0.3336]'],\n        '3xl': ['text-3xl', 'leading-[1.28]', 'capsize-[0.2709]'],\n        '4xl': ['text-4xl', 'leading-none', 'capsize-[0.1309]']\n      },\n      noCapsize: {\n        true: ['before:hidden!', 'after:hidden!']\n      },\n      weight: {\n        normal: ['font-normal'],\n        bold: ['font-semibold']\n      },\n      family: {\n        body: ['font-body'],\n        display: ['font-display'],\n        mono: ['font-mono']\n      }\n    }\n  },\n  {\n    enabledResponsiveVariants: true\n  }\n)\n\ntype TextProps = Override<\n  React.ComponentProps<typeof StyledText>,\n  {\n    as?:\n      | 'blockquote'\n      | 'caption'\n      | 'dd'\n      | 'dt'\n      | 'figcaption'\n      | 'li'\n      | 'p'\n      | 'span'\n      | 'legend'\n      | React.ComponentType\n      | React.ElementType\n  }\n>\n\nexport const Text = React.forwardRef<HTMLParagraphElement, TextProps>(\n  ({ size = 'md', family = 'body', ...remainingProps }, ref) => (\n    <StyledText size={size} family={family} {...remainingProps} ref={ref} />\n  )\n)\n\nText.displayName = 'Text'\n"],"names":["StyledText","styled","Text","React","size","family","remainingProps","ref"],"mappings":"iEAKO,MAAMA,EAAaC,EACxB,IACA,CACE,KAAM,CAAC,MAAO,sBAAuB,oBAAoB,EACzD,SAAU,CACR,KAAM,CACJ,GAAI,CAAC,UAAW,gBAAiB,kBAAkB,EACnD,GAAI,CAAC,UAAW,iBAAkB,kBAAkB,EACpD,GAAI,CAAC,UAAW,iBAAkB,kBAAkB,EACpD,GAAI,CAAC,UAAW,iBAAkB,kBAAkB,EACpD,GAAI,CAAC,UAAW,iBAAkB,kBAAkB,EACpD,MAAO,CAAC,WAAY,iBAAkB,kBAAkB,EACxD,MAAO,CAAC,WAAY,iBAAkB,kBAAkB,EACxD,MAAO,CAAC,WAAY,eAAgB,kBAAkB,CACxD,EACA,UAAW,CACT,KAAM,CAAC,iBAAkB,eAAe,CAC1C,EACA,OAAQ,CACN,OAAQ,CAAC,aAAa,EACtB,KAAM,CAAC,eAAe,CACxB,EACA,OAAQ,CACN,KAAM,CAAC,WAAW,EAClB,QAAS,CAAC,cAAc,EACxB,KAAM,CAAC,WAAW,CACpB,CACF,CACF,EACA,CACE,0BAA2B,EAC7B,CACF,EAoBaC,EAAOC,EAAM,WACxB,CAAC,CAAE,KAAAC,EAAO,KAAM,OAAAC,EAAS,OAAQ,GAAGC,CAAe,EAAGC,IACpDJ,EAAA,cAACH,EAAW,CAAA,KAAMI,EAAM,OAAQC,EAAS,GAAGC,EAAgB,IAAKC,CAAAA,CAAK,CAE1E,EAEAL,EAAK,YAAc"}

package/dist/components/textarea/Textarea.d.ts

@@ -1,19 +1,19 @@
 import * as React from 'react';
 declare const StyledTextarea: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "ref"> & {
     ref?: ((instance: HTMLTextAreaElement | null) => void) | React.RefObject<HTMLTextAreaElement> | null | undefined;
-} & {
-    appearance?: ("standard" | "modern" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "standard" | "modern">>) | undefined;
-    state?: ("error" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "error">>) | undefined;
+}, "appearance" | "state"> & {
+    appearance?: "standard" | "modern" | undefined;
+    state?: "error" | undefined;
 } & {
     as?: React.ElementType;
-}, "ref"> & React.RefAttributes<HTMLTextAreaElement>>;
+}>;
 export type TextareaProps = React.ComponentProps<typeof StyledTextarea>;
 export declare const Textarea: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "ref"> & {
     ref?: ((instance: HTMLTextAreaElement | null) => void) | React.RefObject<HTMLTextAreaElement> | null | undefined;
-} & {
-    appearance?: ("standard" | "modern" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "standard" | "modern">>) | undefined;
-    state?: ("error" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "error">>) | undefined;
+}, "appearance" | "state"> & {
+    appearance?: "standard" | "modern" | undefined;
+    state?: "error" | undefined;
 } & {
     as?: React.ElementType;
-}, "ref"> & React.RefAttributes<HTMLTextAreaElement>, "ref"> & React.RefAttributes<HTMLTextAreaElement>>;
+}, "ref"> & React.RefAttributes<HTMLTextAreaElement>>;
 export {};

package/dist/components/textarea/Textarea.js

@@ -1,2 +1,2 @@
-import*as e from"react";import{styled as t}from"../../styled.js";const n=t("textarea",{base:["shadow-none","text-md","appearance-none","rounded-md","box-border","text-grey-1000","font-body","font-normal","leading-[1.4]","m-0","min-h-24","px-3","py-3","resize-y","w-full","disabled:bg-grey-200","disabled:cursor-not-allowed","disabled:text-grey-800","placeholder:opacity-100","placeholder:text-grey-700"],variants:{appearance:{standard:["bg-white","border","border-grey-800","focus-within:border-primary-800","focus-within:outline-none"],modern:["bg-grey-100","border-none","focus-within:outline-2","focus-within:outline-blue-800","focus-within:outline-offset-1","focus-within:outline-solid","focus-within:z-1"]},state:{error:[]}},defaultVariants:{appearance:"standard"},compoundVariants:[{state:"error",appearance:"standard",class:["border-danger"]},{state:"error",appearance:"modern",class:["bg-danger-light","focus-within:outline-danger"]}]}),r=e.forwardRef((a,o)=>e.createElement(n,{...a,ref:o}));r.displayName="Textarea";export{r as Textarea};
+import*as e from"react";import{styled as t}from"../../styled.js";const n=t("textarea",{base:["shadow-none","appearance-none","rounded-md","box-border","text-grey-1000","font-body","font-normal","text-md","leading-[1.4]","m-0","min-h-24","px-3","py-3","resize-y","w-full","disabled:bg-grey-200","disabled:cursor-not-allowed","disabled:text-grey-800","placeholder:opacity-100","placeholder:text-grey-700"],variants:{appearance:{standard:["bg-white","border","border-grey-800","focus-within:border-primary-800","focus-within:outline-none"],modern:["bg-grey-100","border-none","focus-within:outline-2","focus-within:outline-blue-800","focus-within:outline-offset-1","focus-within:outline-solid","focus-within:z-1"]},state:{error:[]}},defaultVariants:{appearance:"standard"},compoundVariants:[{state:"error",appearance:"standard",class:["border-danger"]},{state:"error",appearance:"modern",class:["bg-danger-light","focus-within:outline-danger"]}]}),r=e.forwardRef((a,o)=>e.createElement(n,{...a,ref:o}));r.displayName="Textarea";export{r as Textarea};
 //# sourceMappingURL=Textarea.js.map

package/dist/components/textarea/Textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.js","sources":["../../../src/components/textarea/Textarea.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nconst StyledTextarea = styled('textarea', {\n  base: [\n    'shadow-none',\n    'text-md',\n    'appearance-none',\n    'rounded-md',\n    'box-border',\n    'text-grey-1000',\n    'font-body',\n    'font-normal',\n    'leading-[1.4]',\n    'm-0',\n    'min-h-24',\n    'px-3',\n    'py-3',\n    'resize-y',\n    'w-full',\n    'disabled:bg-grey-200',\n    'disabled:cursor-not-allowed',\n    'disabled:text-grey-800',\n    'placeholder:opacity-100',\n    'placeholder:text-grey-700'\n  ],\n  variants: {\n    appearance: {\n      standard: [\n        'bg-white',\n        'border',\n        'border-grey-800',\n        'focus-within:border-primary-800',\n        'focus-within:outline-none'\n      ],\n      modern: [\n        'bg-grey-100',\n        'border-none',\n        'focus-within:outline-2',\n        'focus-within:outline-blue-800',\n        'focus-within:outline-offset-1',\n        'focus-within:outline-solid',\n        'focus-within:z-1'\n      ]\n    },\n    state: {\n      error: []\n    }\n  },\n  defaultVariants: {\n    appearance: 'standard'\n  },\n  compoundVariants: [\n    {\n      state: 'error',\n      appearance: 'standard',\n      class: ['border-danger']\n    },\n    {\n      state: 'error',\n      appearance: 'modern',\n      class: ['bg-danger-light', 'focus-within:outline-danger']\n    }\n  ]\n})\n\nexport type TextareaProps = React.ComponentProps<typeof StyledTextarea>\n\nexport const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(\n  (props, ref) => <StyledTextarea {...props} ref={ref} />\n)\n\nTextarea.displayName = 'Textarea'\n"],"names":["StyledTextarea","styled","Textarea","React","props","ref"],"mappings":"iEAIA,MAAMA,EAAiBC,EAAO,WAAY,CACxC,KAAM,CACJ,cACA,UACA,kBACA,aACA,aACA,iBACA,YACA,cACA,gBACA,MACA,WACA,OACA,OACA,WACA,SACA,uBACA,8BACA,yBACA,0BACA,2BACF,EACA,SAAU,CACR,WAAY,CACV,SAAU,CACR,WACA,SACA,kBACA,kCACA,2BACF,EACA,OAAQ,CACN,cACA,cACA,yBACA,gCACA,gCACA,6BACA,kBACF,CACF,EACA,MAAO,CACL,MAAO,CACT,CAAA,CACF,EACA,gBAAiB,CACf,WAAY,UACd,EACA,iBAAkB,CAChB,CACE,MAAO,QACP,WAAY,WACZ,MAAO,CAAC,eAAe,CACzB,EACA,CACE,MAAO,QACP,WAAY,SACZ,MAAO,CAAC,kBAAmB,6BAA6B,CAC1D,CACF,CACF,CAAC,EAIYC,EAAWC,EAAM,WAC5B,CAACC,EAAOC,IAAQF,EAAA,cAACH,EAAA,CAAgB,GAAGI,EAAO,IAAKC,CAAK,CAAA,CACvD,EAEAH,EAAS,YAAc"}
+{"version":3,"file":"Textarea.js","sources":["../../../src/components/textarea/Textarea.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nconst StyledTextarea = styled('textarea', {\n  base: [\n    'shadow-none',\n    'appearance-none',\n    'rounded-md',\n    'box-border',\n    'text-grey-1000',\n    'font-body',\n    'font-normal',\n    'text-md',\n    'leading-[1.4]',\n    'm-0',\n    'min-h-24',\n    'px-3',\n    'py-3',\n    'resize-y',\n    'w-full',\n    'disabled:bg-grey-200',\n    'disabled:cursor-not-allowed',\n    'disabled:text-grey-800',\n    'placeholder:opacity-100',\n    'placeholder:text-grey-700'\n  ],\n  variants: {\n    appearance: {\n      standard: [\n        'bg-white',\n        'border',\n        'border-grey-800',\n        'focus-within:border-primary-800',\n        'focus-within:outline-none'\n      ],\n      modern: [\n        'bg-grey-100',\n        'border-none',\n        'focus-within:outline-2',\n        'focus-within:outline-blue-800',\n        'focus-within:outline-offset-1',\n        'focus-within:outline-solid',\n        'focus-within:z-1'\n      ]\n    },\n    state: {\n      error: []\n    }\n  },\n  defaultVariants: {\n    appearance: 'standard'\n  },\n  compoundVariants: [\n    {\n      state: 'error',\n      appearance: 'standard',\n      class: ['border-danger']\n    },\n    {\n      state: 'error',\n      appearance: 'modern',\n      class: ['bg-danger-light', 'focus-within:outline-danger']\n    }\n  ]\n})\n\nexport type TextareaProps = React.ComponentProps<typeof StyledTextarea>\n\nexport const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(\n  (props, ref) => <StyledTextarea {...props} ref={ref} />\n)\n\nTextarea.displayName = 'Textarea'\n"],"names":["StyledTextarea","styled","Textarea","React","props","ref"],"mappings":"iEAIA,MAAMA,EAAiBC,EAAO,WAAY,CACxC,KAAM,CACJ,cACA,kBACA,aACA,aACA,iBACA,YACA,cACA,UACA,gBACA,MACA,WACA,OACA,OACA,WACA,SACA,uBACA,8BACA,yBACA,0BACA,2BACF,EACA,SAAU,CACR,WAAY,CACV,SAAU,CACR,WACA,SACA,kBACA,kCACA,2BACF,EACA,OAAQ,CACN,cACA,cACA,yBACA,gCACA,gCACA,6BACA,kBACF,CACF,EACA,MAAO,CACL,MAAO,CACT,CAAA,CACF,EACA,gBAAiB,CACf,WAAY,UACd,EACA,iBAAkB,CAChB,CACE,MAAO,QACP,WAAY,WACZ,MAAO,CAAC,eAAe,CACzB,EACA,CACE,MAAO,QACP,WAAY,SACZ,MAAO,CAAC,kBAAmB,6BAA6B,CAC1D,CACF,CACF,CAAC,EAIYC,EAAWC,EAAM,WAC5B,CAACC,EAAOC,IAAQF,EAAA,cAACH,EAAA,CAAgB,GAAGI,EAAO,IAAKC,CAAK,CAAA,CACvD,EAEAH,EAAS,YAAc"}

package/dist/components/tile/Tile.d.ts

@@ -2,13 +2,13 @@ import React from 'react';
 import { TcolorScheme } from '../../experiments/color-scheme';
 export declare const StyledTile: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
-} & {
+}, "border" | "borderRadius" | "diffused"> & {
     borderRadius?: ("sm" | "md" | "lg" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "lg">>) | undefined;
     border?: (boolean | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", boolean>>) | undefined;
     diffused?: (boolean | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", boolean>>) | undefined;
 } & {
     as?: React.ElementType;
-}, "ref"> & React.RefAttributes<HTMLDivElement>>;
+}>;
 type TTileProps = React.ComponentProps<typeof StyledTile> & {
     colorScheme?: TcolorScheme;
 };

package/dist/components/tile/Tile.js

@@ -1,2 +1,2 @@
-import r from"react";import{ColorScheme as i}from"../../experiments/color-scheme/ColorScheme.js";import{styled as n}from"../../styled.js";const e=n("div",{base:["box-border","flex","flex-col","relative","border","bg-(--base-1)","text-(--foreground)","border-transparent"],variants:{borderRadius:{sm:["rounded-sm"],md:["rounded-md"],lg:["rounded-xl"]},border:{true:["border-(--base-3)"]},diffused:{true:["[@supports(background-color:color-mix(in_hsl,white_50%,transparent))]:bg-[color-mix(in_hsl,(--base-1)_70%,transparent)]","[@supports(background-color:color-mix(in_hsl,white_50%,transparent))]:backdrop-blur-sm]"]}}}),o=r.forwardRef(({children:t,borderRadius:a="lg",colorScheme:d={},...l},s)=>r.createElement(i,{asChild:!0,base:"grey1",accent:"primary2",interactive:"loContrast",...d},r.createElement(e,{ref:s,borderRadius:a,...l},t)));o.displayName="Tile";export{e as StyledTile,o as Tile};
+import e from"react";import{ColorScheme as i}from"../../experiments/color-scheme/ColorScheme.js";import{styled as m}from"../../styled.js";const r=m("div",{base:["box-border","flex","flex-col","relative","border","bg-(--base-1)","text-(--foreground)","border-transparent"],variants:{borderRadius:{sm:["rounded-sm"],md:["rounded-md"],lg:["rounded-lg"]},border:{true:["border-(--base-3)"]},diffused:{true:["supports-color-mix:bg-[color-mix(in_hsl,(--base-1)_70%,transparent)]","supports-color-mix:backdrop-blur-sm"]}}},{enabledResponsiveVariants:!0}),o=e.forwardRef(({children:d,borderRadius:a="lg",colorScheme:t={},...s},l)=>e.createElement(i,{asChild:!0,base:"grey1",accent:"primary2",interactive:"loContrast",...t},e.createElement(r,{ref:l,borderRadius:a,...s},d)));o.displayName="Tile";export{r as StyledTile,o as Tile};
 //# sourceMappingURL=Tile.js.map

package/dist/components/tile/Tile.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tile.js","sources":["../../../src/components/tile/Tile.tsx"],"sourcesContent":["import React from 'react'\n\nimport { ColorScheme, TcolorScheme } from '~/experiments/color-scheme'\nimport { styled } from '~/styled'\n\nexport const StyledTile = styled('div', {\n  base: [\n    'box-border',\n    'flex',\n    'flex-col',\n    'relative',\n    'border',\n    'bg-(--base-1)',\n    'text-(--foreground)',\n    'border-transparent'\n  ],\n  variants: {\n    borderRadius: {\n      sm: ['rounded-sm'],\n      md: ['rounded-md'],\n      lg: ['rounded-xl']\n    },\n    border: {\n      true: ['border-(--base-3)']\n    },\n    diffused: {\n      true: [\n        '[@supports(background-color:color-mix(in_hsl,white_50%,transparent))]:bg-[color-mix(in_hsl,(--base-1)_70%,transparent)]',\n        '[@supports(background-color:color-mix(in_hsl,white_50%,transparent))]:backdrop-blur-sm]'\n      ]\n    }\n  }\n})\n\ntype TTileProps = React.ComponentProps<typeof StyledTile> & {\n  colorScheme?: TcolorScheme\n}\n\nexport const Tile = React.forwardRef<HTMLDivElement, TTileProps>(\n  ({ children, borderRadius = 'lg', colorScheme = {}, ...rest }, ref) => (\n    <ColorScheme\n      asChild\n      base=\"grey1\"\n      accent=\"primary2\"\n      interactive=\"loContrast\"\n      {...colorScheme}\n    >\n      <StyledTile ref={ref} borderRadius={borderRadius} {...rest}>\n        {children}\n      </StyledTile>\n    </ColorScheme>\n  )\n)\n\nTile.displayName = 'Tile'\n"],"names":["StyledTile","styled","Tile","React","children","borderRadius","colorScheme","rest","ref","ColorScheme"],"mappings":"0IAKO,MAAMA,EAAaC,EAAO,MAAO,CACtC,KAAM,CACJ,aACA,OACA,WACA,WACA,SACA,gBACA,sBACA,oBACF,EACA,SAAU,CACR,aAAc,CACZ,GAAI,CAAC,YAAY,EACjB,GAAI,CAAC,YAAY,EACjB,GAAI,CAAC,YAAY,CACnB,EACA,OAAQ,CACN,KAAM,CAAC,mBAAmB,CAC5B,EACA,SAAU,CACR,KAAM,CACJ,0HACA,yFACF,CACF,CACF,CACF,CAAC,EAMYC,EAAOC,EAAM,WACxB,CAAC,CAAE,SAAAC,EAAU,aAAAC,EAAe,KAAM,YAAAC,EAAc,GAAI,GAAGC,CAAK,EAAGC,IAC7DL,EAAA,cAACM,EAAA,CACC,QAAO,GACP,KAAK,QACL,OAAO,WACP,YAAY,aACX,GAAGH,CAAAA,EAEJH,EAAA,cAACH,GAAW,IAAKQ,EAAK,aAAcH,EAAe,GAAGE,CAAAA,EACnDH,CACH,CACF,CAEJ,EAEAF,EAAK,YAAc"}
+{"version":3,"file":"Tile.js","sources":["../../../src/components/tile/Tile.tsx"],"sourcesContent":["import React from 'react'\n\nimport { ColorScheme, TcolorScheme } from '~/experiments/color-scheme'\nimport { styled } from '~/styled'\n\nexport const StyledTile = styled(\n  'div',\n  {\n    base: [\n      'box-border',\n      'flex',\n      'flex-col',\n      'relative',\n      'border',\n      'bg-(--base-1)',\n      'text-(--foreground)',\n      'border-transparent'\n    ],\n    variants: {\n      borderRadius: {\n        sm: ['rounded-sm'],\n        md: ['rounded-md'],\n        lg: ['rounded-lg']\n      },\n      border: {\n        true: ['border-(--base-3)']\n      },\n      diffused: {\n        true: [\n          'supports-color-mix:bg-[color-mix(in_hsl,(--base-1)_70%,transparent)]',\n          'supports-color-mix:backdrop-blur-sm'\n        ]\n      }\n    }\n  },\n  { enabledResponsiveVariants: true }\n)\n\ntype TTileProps = React.ComponentProps<typeof StyledTile> & {\n  colorScheme?: TcolorScheme\n}\n\nexport const Tile = React.forwardRef<HTMLDivElement, TTileProps>(\n  ({ children, borderRadius = 'lg', colorScheme = {}, ...rest }, ref) => (\n    <ColorScheme\n      asChild\n      base=\"grey1\"\n      accent=\"primary2\"\n      interactive=\"loContrast\"\n      {...colorScheme}\n    >\n      <StyledTile ref={ref} borderRadius={borderRadius} {...rest}>\n        {children}\n      </StyledTile>\n    </ColorScheme>\n  )\n)\n\nTile.displayName = 'Tile'\n"],"names":["StyledTile","styled","Tile","React","children","borderRadius","colorScheme","rest","ref","ColorScheme"],"mappings":"0IAKa,MAAAA,EAAaC,EACxB,MACA,CACE,KAAM,CACJ,aACA,OACA,WACA,WACA,SACA,gBACA,sBACA,oBACF,EACA,SAAU,CACR,aAAc,CACZ,GAAI,CAAC,YAAY,EACjB,GAAI,CAAC,YAAY,EACjB,GAAI,CAAC,YAAY,CACnB,EACA,OAAQ,CACN,KAAM,CAAC,mBAAmB,CAC5B,EACA,SAAU,CACR,KAAM,CACJ,uEACA,qCACF,CACF,CACF,CACF,EACA,CAAE,0BAA2B,EAAK,CACpC,EAMaC,EAAOC,EAAM,WACxB,CAAC,CAAE,SAAAC,EAAU,aAAAC,EAAe,KAAM,YAAAC,EAAc,CAAA,EAAI,GAAGC,CAAK,EAAGC,IAC7DL,EAAA,cAACM,EAAA,CACC,QAAO,GACP,KAAK,QACL,OAAO,WACP,YAAY,aACX,GAAGH,CAEJH,EAAAA,EAAA,cAACH,EAAW,CAAA,IAAKQ,EAAK,aAAcH,EAAe,GAAGE,CACnDH,EAAAA,CACH,CACF,CAEJ,EAEAF,EAAK,YAAc"}

package/dist/components/tile/TileGroup.d.ts

@@ -1,6 +1,6 @@
 export declare const TileGroup: 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;
-} & {
+}, "direction" | "align" | "wrap" | "justify" | "gap"> & {
     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;
@@ -8,4 +8,4 @@ export declare const TileGroup: import("react").ForwardRefExoticComponent<Omit<O
     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?: import("react").ElementType;
-}, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+}>;

package/dist/components/tile-interactive/TileInteractive.d.ts

@@ -2,19 +2,17 @@ import React from 'react';
 import { NavigatorActions } from '../../types';
 declare const StyledTileInteractive: React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
-} & {
+}, "border" | "borderRadius" | "diffused"> & {
     borderRadius?: ("sm" | "md" | "lg" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "lg">>) | undefined;
     border?: (boolean | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", boolean>>) | undefined;
     diffused?: (boolean | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", boolean>>) | undefined;
 } & {
     as?: React.ElementType;
-}, "ref"> & React.RefAttributes<HTMLDivElement> & {
+} & {
     colorScheme?: import("../..").TcolorScheme;
-}, "ref"> & React.RefAttributes<HTMLDivElement> & {
+}, "ref"> & React.RefAttributes<HTMLDivElement>, never> & {
     as?: React.ElementType;
-}, "ref"> & React.RefAttributes<HTMLDivElement>>;
-type TTileInteractiveProps = React.ComponentProps<typeof StyledTileInteractive> & {
-    as?: React.ComponentType | React.ElementType;
-} & React.ButtonHTMLAttributes<HTMLButtonElement> & NavigatorActions;
+}>;
+type TTileInteractiveProps = React.ComponentProps<typeof StyledTileInteractive> & React.ButtonHTMLAttributes<HTMLButtonElement> & NavigatorActions;
 export declare const TileInteractive: React.ForwardRefExoticComponent<Omit<TTileInteractiveProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export {};

package/dist/components/tile-interactive/TileInteractive.js

@@ -1,2 +1,2 @@
-import o from"react";import{Tile as l}from"../tile/Tile.js";import"../flex/Flex.js";import{styled as r}from"../../styled.js";const b=r(l,{base:["disabled:cursor-not-allowed","disabled:opacity-30","not-disabled:active:bg-(--base-2)","not-disabled:after:absolute","not-disabled:after:duration-250","not-disabled:after:ease-out","not-disabled:after:inset-0","not-disabled:after:opacity-0","not-disabled:after:pointer-events-none","not-disabled:after:rounded-[inherit]","not-disabled:after:shadow-lg","not-disabled:after:transition-opacity","not-disabled:cursor-pointer","not-disabled:duration-250","not-disabled:ease-in","not-disabled:focus-visible:outline-none","not-disabled:focus-visible:relative","not-disabled:focus-visible:shadow-[$colors$primary800_0px_0px_0px_4px]","not-disabled:focus-visible:shadow-[white_0px_0px_0px_2px]","not-disabled:focus-visible:z-1","not-disabled:hover:after:opacity-100","not-disabled:hover:-translate-y-0.5","not-disabled:transition-transform","not-disabled:translate-y-0"]}),a=o.forwardRef(({onClick:i,href:e,type:d="button",as:t,...s},n)=>o.createElement(b,{...s,...e?{as:t||"a",href:e,onClick:void 0}:{as:t||"button",type:d,onClick:i},ref:n}));a.displayName="TileInteractive";export{a as TileInteractive};
+import o from"react";import{Tile as l}from"../tile/Tile.js";import"../flex/Flex.js";import{styled as r}from"../../styled.js";const b=r(l,{base:["disabled:cursor-not-allowed","disabled:opacity-30","not-disabled:active:bg-(--base-2)","not-disabled:after:absolute","not-disabled:after:duration-250","not-disabled:after:ease-out","not-disabled:after:inset-0","not-disabled:after:opacity-0","not-disabled:after:pointer-events-none","not-disabled:after:rounded-[inherit]","not-disabled:after:shadow-lg","not-disabled:after:transition-opacity","not-disabled:cursor-pointer","not-disabled:duration-250","not-disabled:ease-in","not-disabled:focus-visible:outline-none","not-disabled:focus-visible:relative","not-disabled:focus-visible:shadow-[var(--color-primary-800)_0px_0px_0px_4px]","not-disabled:focus-visible:shadow-[white_0px_0px_0px_2px]","not-disabled:focus-visible:z-1","not-disabled:hover:after:opacity-100","not-disabled:hover:-translate-y-0.5","not-disabled:transition-transform","not-disabled:translate-y-0"]}),a=o.forwardRef(({onClick:i,href:e,type:d="button",as:t,...s},n)=>o.createElement(b,{...s,...e?{as:t||"a",href:e,onClick:void 0}:{as:t||"button",type:d,onClick:i},ref:n}));a.displayName="TileInteractive";export{a as TileInteractive};
 //# sourceMappingURL=TileInteractive.js.map

package/dist/components/tile-interactive/TileInteractive.js.map

@@ -1 +1 @@
-{"version":3,"file":"TileInteractive.js","sources":["../../../src/components/tile-interactive/TileInteractive.tsx"],"sourcesContent":["import React from 'react'\n\nimport { Tile } from '~/components/tile'\nimport { styled } from '~/styled'\nimport { NavigatorActions } from '~/types'\n\nconst StyledTileInteractive = styled(Tile, {\n  base: [\n    'disabled:cursor-not-allowed',\n    'disabled:opacity-30',\n    'not-disabled:active:bg-(--base-2)',\n    'not-disabled:after:absolute',\n    'not-disabled:after:duration-250',\n    'not-disabled:after:ease-out',\n    'not-disabled:after:inset-0',\n    'not-disabled:after:opacity-0',\n    'not-disabled:after:pointer-events-none',\n    'not-disabled:after:rounded-[inherit]',\n    'not-disabled:after:shadow-lg',\n    'not-disabled:after:transition-opacity',\n    'not-disabled:cursor-pointer',\n    'not-disabled:duration-250',\n    'not-disabled:ease-in',\n    'not-disabled:focus-visible:outline-none',\n    'not-disabled:focus-visible:relative',\n    'not-disabled:focus-visible:shadow-[$colors$primary800_0px_0px_0px_4px]',\n    'not-disabled:focus-visible:shadow-[white_0px_0px_0px_2px]',\n    'not-disabled:focus-visible:z-1',\n    'not-disabled:hover:after:opacity-100',\n    'not-disabled:hover:-translate-y-0.5',\n    'not-disabled:transition-transform',\n    'not-disabled:translate-y-0'\n  ]\n})\n\ntype TTileInteractiveProps = React.ComponentProps<\n  typeof StyledTileInteractive\n> & {\n  as?: React.ComponentType | React.ElementType\n} & React.ButtonHTMLAttributes<HTMLButtonElement> &\n  NavigatorActions\n\nexport const TileInteractive = React.forwardRef<\n  HTMLDivElement,\n  TTileInteractiveProps\n>(({ onClick, href, type = 'button', as, ...rest }, ref) => {\n  const isLink = !!href\n  const elementSpecificProps = isLink\n    ? {\n        as: as || ('a' as React.ElementType),\n        href,\n        onClick: undefined\n      }\n    : { as: as || ('button' as React.ElementType), type, onClick }\n\n  return <StyledTileInteractive {...rest} {...elementSpecificProps} ref={ref} />\n})\n\nTileInteractive.displayName = 'TileInteractive'\n"],"names":["StyledTileInteractive","styled","Tile","TileInteractive","React","onClick","href","type","as","rest","ref"],"mappings":"6HAMA,MAAMA,EAAwBC,EAAOC,EAAM,CACzC,KAAM,CACJ,8BACA,sBACA,oCACA,8BACA,kCACA,8BACA,6BACA,+BACA,yCACA,uCACA,+BACA,wCACA,8BACA,4BACA,uBACA,0CACA,sCACA,yEACA,4DACA,iCACA,uCACA,sCACA,oCACA,4BACF,CACF,CAAC,EASYC,EAAkBC,EAAM,WAGnC,CAAC,CAAE,QAAAC,EAAS,KAAAC,EAAM,KAAAC,EAAO,SAAU,GAAAC,EAAI,GAAGC,CAAK,EAAGC,IAU3CN,EAAA,cAACJ,EAAA,CAAuB,GAAGS,EAAO,GATxBH,EAEb,CACE,GAAIE,GAAO,IACX,KAAAF,EACA,QAAS,MACX,EACA,CAAE,GAAIE,GAAO,SAAgC,KAAAD,EAAM,QAAAF,CAAQ,EAEG,IAAKK,CAAK,CAAA,CAC7E,EAEDP,EAAgB,YAAc"}
+{"version":3,"file":"TileInteractive.js","sources":["../../../src/components/tile-interactive/TileInteractive.tsx"],"sourcesContent":["import React from 'react'\n\nimport { Tile } from '~/components/tile'\nimport { styled } from '~/styled'\nimport { NavigatorActions } from '~/types'\n\nconst StyledTileInteractive = styled(Tile, {\n  base: [\n    'disabled:cursor-not-allowed',\n    'disabled:opacity-30',\n    'not-disabled:active:bg-(--base-2)',\n    'not-disabled:after:absolute',\n    'not-disabled:after:duration-250',\n    'not-disabled:after:ease-out',\n    'not-disabled:after:inset-0',\n    'not-disabled:after:opacity-0',\n    'not-disabled:after:pointer-events-none',\n    'not-disabled:after:rounded-[inherit]',\n    'not-disabled:after:shadow-lg',\n    'not-disabled:after:transition-opacity',\n    'not-disabled:cursor-pointer',\n    'not-disabled:duration-250',\n    'not-disabled:ease-in',\n    'not-disabled:focus-visible:outline-none',\n    'not-disabled:focus-visible:relative',\n    'not-disabled:focus-visible:shadow-[var(--color-primary-800)_0px_0px_0px_4px]',\n    'not-disabled:focus-visible:shadow-[white_0px_0px_0px_2px]',\n    'not-disabled:focus-visible:z-1',\n    'not-disabled:hover:after:opacity-100',\n    'not-disabled:hover:-translate-y-0.5',\n    'not-disabled:transition-transform',\n    'not-disabled:translate-y-0'\n  ]\n})\n\ntype TTileInteractiveProps = React.ComponentProps<\n  typeof StyledTileInteractive\n> &\n  React.ButtonHTMLAttributes<HTMLButtonElement> &\n  NavigatorActions\n\nexport const TileInteractive = React.forwardRef<\n  HTMLDivElement,\n  TTileInteractiveProps\n>(({ onClick, href, type = 'button', as, ...rest }, ref) => {\n  const isLink = !!href\n  const elementSpecificProps = isLink\n    ? {\n        as: as || ('a' as React.ElementType),\n        href,\n        onClick: undefined\n      }\n    : {\n        as: as || ('button' as React.ElementType),\n        type,\n        onClick\n      }\n\n  return <StyledTileInteractive {...rest} {...elementSpecificProps} ref={ref} />\n})\n\nTileInteractive.displayName = 'TileInteractive'\n"],"names":["StyledTileInteractive","styled","Tile","TileInteractive","React","onClick","href","type","as","rest","ref"],"mappings":"6HAMA,MAAMA,EAAwBC,EAAOC,EAAM,CACzC,KAAM,CACJ,8BACA,sBACA,oCACA,8BACA,kCACA,8BACA,6BACA,+BACA,yCACA,uCACA,+BACA,wCACA,8BACA,4BACA,uBACA,0CACA,sCACA,+EACA,4DACA,iCACA,uCACA,sCACA,oCACA,4BACF,CACF,CAAC,EAQYC,EAAkBC,EAAM,WAGnC,CAAC,CAAE,QAAAC,EAAS,KAAAC,EAAM,KAAAC,EAAO,SAAU,GAAAC,EAAI,GAAGC,CAAK,EAAGC,IAc3CN,EAAA,cAACJ,EAAA,CAAuB,GAAGS,EAAO,GAbxBH,EAEb,CACE,GAAIE,GAAO,IACX,KAAAF,EACA,QAAS,MACX,EACA,CACE,GAAIE,GAAO,SACX,KAAAD,EACA,QAAAF,CACF,EAE8D,IAAKK,CAAK,CAAA,CAC7E,EAEDP,EAAgB,YAAc"}

package/dist/components/tile-toggle-group/TileToggleGroupItem.d.ts

@@ -2,21 +2,19 @@ import * as ToggleGroup from '@radix-ui/react-toggle-group';
 import * as React from 'react';
 declare const StyledTileToggleGroupItem: React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
-} & {
+}, "border" | "borderRadius" | "diffused"> & {
     borderRadius?: ("sm" | "md" | "lg" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "lg">>) | undefined;
     border?: (boolean | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", boolean>>) | undefined;
     diffused?: (boolean | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", boolean>>) | undefined;
 } & {
     as?: React.ElementType;
-}, "ref"> & React.RefAttributes<HTMLDivElement> & {
+} & {
     colorScheme?: import("../..").TcolorScheme;
-}, "ref"> & React.RefAttributes<HTMLDivElement> & {
+}, "ref"> & React.RefAttributes<HTMLDivElement>, never> & {
     as?: React.ElementType;
-}, "ref"> & React.RefAttributes<HTMLDivElement> & {
-    as?: React.ComponentType | React.ElementType;
-} & React.ButtonHTMLAttributes<HTMLButtonElement> & import("../../types").NavigatorActions, "ref"> & React.RefAttributes<HTMLDivElement> & {
+} & React.ButtonHTMLAttributes<HTMLButtonElement> & import("../../types").NavigatorActions, "ref"> & React.RefAttributes<HTMLDivElement>, never> & {
     as?: React.ElementType;
-}, "ref"> & React.RefAttributes<HTMLDivElement>>;
+}>;
 type TTileToggleGroupItem = React.ComponentProps<typeof ToggleGroup.Item> & React.ComponentProps<typeof StyledTileToggleGroupItem>;
 export declare const TileToggleGroupItem: ({ children, ...rest }: TTileToggleGroupItem) => React.JSX.Element;
 export {};

package/dist/components/tile-toggle-group/TileToggleGroupItem.js

@@ -1,2 +1,2 @@
-import*as o from"@radix-ui/react-toggle-group";import*as t from"react";import{TileInteractive as r}from"../tile-interactive/TileInteractive.js";import{styled as n}from"../../styled.js";const s=n(r,{base:["not-disabled:data-[state=on]:active:bg-(--interactive-3)","not-disabled:data-[state=on]:hover:bg-(--interactive-2)","data-[state=on]:before:-inset-1","data-[state=on]:before:absolute","data-[state=on]:before:rounded-[inherit]","data-[state=on]:before:shadow-[inset_$colors$accent8_0px_0px_0px_2px]","data-[state=on]:before:z-1","data-[state=on]:bg-(--interactive-1)","data-[state=on]:border-(--accent-8)"]}),i=({children:e,...a})=>t.createElement(o.Item,{...a,asChild:!0},t.createElement(s,{as:"button"},e));export{i as TileToggleGroupItem};
+import*as o from"@radix-ui/react-toggle-group";import*as t from"react";import{TileInteractive as r}from"../tile-interactive/TileInteractive.js";import{styled as n}from"../../styled.js";const i=n(r,{base:["text-left","not-disabled:data-[state=on]:active:bg-(--interactive-3)","not-disabled:data-[state=on]:hover:bg-(--interactive-2)","data-[state=on]:before:-inset-1","data-[state=on]:before:absolute","data-[state=on]:before:rounded-[inherit]","data-[state=on]:before:inset-shadow-[var(--accent-8)_0px_0px_0px_2px]","data-[state=on]:before:z-1","data-[state=on]:bg-(--interactive-1)","data-[state=on]:border-(--accent-8)"]}),s=({children:e,...a})=>t.createElement(o.Item,{...a,asChild:!0},t.createElement(i,{as:"button"},e));export{s as TileToggleGroupItem};
 //# sourceMappingURL=TileToggleGroupItem.js.map

package/dist/components/tile-toggle-group/TileToggleGroupItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"TileToggleGroupItem.js","sources":["../../../src/components/tile-toggle-group/TileToggleGroupItem.tsx"],"sourcesContent":["import * as ToggleGroup from '@radix-ui/react-toggle-group'\nimport * as React from 'react'\n\nimport { TileInteractive } from '~/components/tile-interactive'\nimport { styled } from '~/styled'\n\n// @ts-expect-error - TypeScript union type too complex for styled component inference\nconst StyledTileToggleGroupItem = styled(TileInteractive, {\n  base: [\n    'not-disabled:data-[state=on]:active:bg-(--interactive-3)',\n    'not-disabled:data-[state=on]:hover:bg-(--interactive-2)',\n    'data-[state=on]:before:-inset-1',\n    'data-[state=on]:before:absolute',\n    'data-[state=on]:before:rounded-[inherit]',\n    'data-[state=on]:before:shadow-[inset_$colors$accent8_0px_0px_0px_2px]',\n    'data-[state=on]:before:z-1',\n    'data-[state=on]:bg-(--interactive-1)',\n    'data-[state=on]:border-(--accent-8)'\n  ]\n})\n\ntype TTileToggleGroupItem = React.ComponentProps<typeof ToggleGroup.Item> &\n  React.ComponentProps<typeof StyledTileToggleGroupItem>\n\nexport const TileToggleGroupItem = ({\n  children,\n  ...rest\n}: TTileToggleGroupItem) => {\n  return (\n    <ToggleGroup.Item {...rest} asChild>\n      <StyledTileToggleGroupItem as=\"button\">\n        {children}\n      </StyledTileToggleGroupItem>\n    </ToggleGroup.Item>\n  )\n}\n"],"names":["StyledTileToggleGroupItem","styled","TileInteractive","TileToggleGroupItem","children","rest","React","ToggleGroup"],"mappings":"yLAOA,MAAMA,EAA4BC,EAAOC,EAAiB,CACxD,KAAM,CACJ,2DACA,0DACA,kCACA,kCACA,2CACA,wEACA,6BACA,uCACA,qCACF,CACF,CAAC,EAKYC,EAAsB,CAAC,CAClC,SAAAC,EACA,GAAGC,CACL,IAEIC,EAAA,cAACC,EAAY,KAAZ,CAAkB,GAAGF,EAAM,QAAO,EACjCC,EAAAA,EAAA,cAACN,EAAA,CAA0B,GAAG,QAC3BI,EAAAA,CACH,CACF"}
+{"version":3,"file":"TileToggleGroupItem.js","sources":["../../../src/components/tile-toggle-group/TileToggleGroupItem.tsx"],"sourcesContent":["import * as ToggleGroup from '@radix-ui/react-toggle-group'\nimport * as React from 'react'\n\nimport { TileInteractive } from '~/components/tile-interactive'\nimport { styled } from '~/styled'\n\nconst StyledTileToggleGroupItem = styled(TileInteractive, {\n  base: [\n    'text-left',\n    'not-disabled:data-[state=on]:active:bg-(--interactive-3)',\n    'not-disabled:data-[state=on]:hover:bg-(--interactive-2)',\n    'data-[state=on]:before:-inset-1',\n    'data-[state=on]:before:absolute',\n    'data-[state=on]:before:rounded-[inherit]',\n    'data-[state=on]:before:inset-shadow-[var(--accent-8)_0px_0px_0px_2px]',\n    'data-[state=on]:before:z-1',\n    'data-[state=on]:bg-(--interactive-1)',\n    'data-[state=on]:border-(--accent-8)'\n  ]\n})\n\ntype TTileToggleGroupItem = React.ComponentProps<typeof ToggleGroup.Item> &\n  React.ComponentProps<typeof StyledTileToggleGroupItem>\n\nexport const TileToggleGroupItem = ({\n  children,\n  ...rest\n}: TTileToggleGroupItem) => (\n  <ToggleGroup.Item {...rest} asChild>\n    <StyledTileToggleGroupItem as=\"button\">\n      {children}\n    </StyledTileToggleGroupItem>\n  </ToggleGroup.Item>\n)\n"],"names":["StyledTileToggleGroupItem","styled","TileInteractive","TileToggleGroupItem","children","rest","React","ToggleGroup"],"mappings":"yLAMA,MAAMA,EAA4BC,EAAOC,EAAiB,CACxD,KAAM,CACJ,YACA,2DACA,0DACA,kCACA,kCACA,2CACA,wEACA,6BACA,uCACA,qCACF,CACF,CAAC,EAKYC,EAAsB,CAAC,CAClC,SAAAC,EACA,GAAGC,CACL,IACEC,EAAA,cAACC,EAAY,KAAZ,CAAkB,GAAGF,EAAM,QAAO,EACjCC,EAAAA,EAAA,cAACN,EAAA,CAA0B,GAAG,QAC3BI,EAAAA,CACH,CACF"}

package/dist/components/tile-toggle-group/TileToggleGroupRoot.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 export declare const TileToggleGroupRoot: React.ForwardRefExoticComponent<(Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
-} & {
+}, "direction" | "align" | "wrap" | "justify" | "gap"> & {
     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;
@@ -9,11 +9,11 @@ export declare const TileToggleGroupRoot: React.ForwardRefExoticComponent<(Omit<
     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> & Omit<import("@radix-ui/react-toggle-group").ToggleGroupSingleProps & React.RefAttributes<HTMLDivElement> & {
+} & Omit<import("@radix-ui/react-toggle-group").ToggleGroupSingleProps & React.RefAttributes<HTMLDivElement> & {
     disableDeselect?: boolean;
-}, "ref">, "ref"> | Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+}, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> | Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
-} & {
+}, "direction" | "align" | "wrap" | "justify" | "gap"> & {
     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;
@@ -21,6 +21,6 @@ export declare const TileToggleGroupRoot: React.ForwardRefExoticComponent<(Omit<
     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> & Omit<import("@radix-ui/react-toggle-group").ToggleGroupMultipleProps & React.RefAttributes<HTMLDivElement> & {
+} & Omit<import("@radix-ui/react-toggle-group").ToggleGroupMultipleProps & React.RefAttributes<HTMLDivElement> & {
     disableDeselect?: boolean;
-}, "ref">, "ref">) & React.RefAttributes<HTMLDivElement>>;
+}, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">) & React.RefAttributes<HTMLDivElement>>;

package/dist/components/tile-toggle-group/TileToggleGroupRoot.js

@@ -1,2 +1,2 @@
-import l from"clsx";import*as e from"react";import{ToggleGroup as t}from"../../utilities/radix-overrides/toggle-group/index.js";const a=e.forwardRef((o,r)=>e.createElement(t.Root,{ref:r,...o,className:l(o.className,"flex","gap-2",o.orientation==="horizontal"?"flex-row":"flex-col","flex-wrap")}));export{a as TileToggleGroupRoot};
+import t from"clsx";import*as e from"react";import{ToggleGroup as a}from"../../utilities/radix-overrides/toggle-group/index.js";const l=e.forwardRef((o,r)=>e.createElement(a.Root,{ref:r,...o,className:t(o.className,"flex","gap-2",o.orientation==="horizontal"&&"flex-row",o.orientation==="vertical"&&"flex-col","flex-wrap")}));export{l as TileToggleGroupRoot};
 //# sourceMappingURL=TileToggleGroupRoot.js.map

package/dist/components/tile-toggle-group/TileToggleGroupRoot.js.map

@@ -1 +1 @@
-{"version":3,"file":"TileToggleGroupRoot.js","sources":["../../../src/components/tile-toggle-group/TileToggleGroupRoot.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport * as React from 'react'\n\nimport { TileGroup } from '~/components/tile'\nimport { ToggleGroup } from '~/utilities/radix-overrides/toggle-group'\n\ntype TTileToggleGroupRootProps = React.ComponentProps<typeof TileGroup> &\n  React.ComponentProps<typeof ToggleGroup.Root>\n\nexport const TileToggleGroupRoot = React.forwardRef<\n  HTMLDivElement,\n  TTileToggleGroupRootProps\n>((props, ref) => (\n  <ToggleGroup.Root\n    ref={ref}\n    {...props}\n    className={clsx(\n      props.className,\n      'flex',\n      'gap-2',\n      props.orientation === 'horizontal' ? 'flex-row' : 'flex-col',\n      'flex-wrap'\n    )}\n  />\n))\n"],"names":["TileToggleGroupRoot","React","props","ref","ToggleGroup","clsx"],"mappings":"gIASO,MAAMA,EAAsBC,EAAM,WAGvC,CAACC,EAAOC,IACRF,EAAA,cAACG,EAAY,KAAZ,CACC,IAAKD,EACJ,GAAGD,EACJ,UAAWG,EACTH,EAAM,UACN,OACA,QACAA,EAAM,cAAgB,aAAe,WAAa,WAClD,WACF,EACF,CACD"}
+{"version":3,"file":"TileToggleGroupRoot.js","sources":["../../../src/components/tile-toggle-group/TileToggleGroupRoot.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport * as React from 'react'\n\nimport { TileGroup } from '~/components/tile'\nimport { ToggleGroup } from '~/utilities/radix-overrides/toggle-group'\n\ntype TTileToggleGroupRootProps = React.ComponentProps<typeof TileGroup> &\n  React.ComponentProps<typeof ToggleGroup.Root>\n\nexport const TileToggleGroupRoot = React.forwardRef<\n  HTMLDivElement,\n  TTileToggleGroupRootProps\n>((props, ref) => (\n  <ToggleGroup.Root\n    ref={ref}\n    {...props}\n    className={clsx(\n      props.className,\n      'flex',\n      'gap-2',\n      props.orientation === 'horizontal' && 'flex-row',\n      props.orientation === 'vertical' && 'flex-col',\n      'flex-wrap'\n    )}\n  />\n))\n"],"names":["TileToggleGroupRoot","React","props","ref","ToggleGroup","clsx"],"mappings":"gIASa,MAAAA,EAAsBC,EAAM,WAGvC,CAACC,EAAOC,IACRF,EAAA,cAACG,EAAY,KAAZ,CACC,IAAKD,EACJ,GAAGD,EACJ,UAAWG,EACTH,EAAM,UACN,OACA,QACAA,EAAM,cAAgB,cAAgB,WACtCA,EAAM,cAAgB,YAAc,WACpC,WACF,EACF,CACD"}