@atom-learning/components 3.26.5 → 3.26.7

package/CHANGELOG.md

@@ -1,9 +1,9 @@
-## [3.26.5](https://github.com/Atom-Learning/components/compare/v3.26.4...v3.26.5) (2024-07-02)
+## [3.26.7](https://github.com/Atom-Learning/components/compare/v3.26.6...v3.26.7) (2024-07-03)
 
 
 ### Bug Fixes
 
-* do EmptyState sizing via context so it propagates to nested or extended components ([ec054db](https://github.com/Atom-Learning/components/commit/ec054db40524862703bc3f8c86a1275eb7aa429d))
+* add `as` prop for empty state title & body ([e28cf63](https://github.com/Atom-Learning/components/commit/e28cf631f09b1b7fe1e5c1a5fb51fa94277e7211))
 
 # [1.4.0](https://github.com/Atom-Learning/components/compare/v1.3.0...v1.4.0) (2022-04-11)
 

package/dist/components/data-table/DataTable.d.ts

@@ -1040,6 +1040,8 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
     } & {
         numberOfStickyColumns?: number | undefined;
         scrollContainerCss?: import("../..").CSS | undefined;
+        controlColumnCount?: number | undefined;
+        maxRowDepth?: number | undefined;
     }, "children" | "numberOfStickyColumns"> & Partial<Pick<Omit<Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "key" | keyof import("react").HTMLAttributes<HTMLTableSectionElement>> & {
         ref?: ((instance: HTMLTableSectionElement | null) => void) | import("react").RefObject<HTMLTableSectionElement> | null | undefined;
     }, "css" | "theme" | "isSticky"> & import("@stitches/react/types/styled-component").TransformProps<{

package/dist/components/data-table/DataTableTable.js

@@ -1,2 +1,2 @@
-import*as e from"react";import{Table as p}from"../table/Table.js";import{DataTable as r}from"./DataTable.js";import{AsyncDataState as b}from"./DataTable.types.js";import{useDataTable as u}from"./DataTableContext.js";import{DataTableLoading as y}from"./DataTableLoading.js";const f=({sortable:s,striped:o,theme:n,css:l,scrollOptions:t={numberOfStickyColumns:0,hasStickyHeader:!1},...m})=>{const{asyncDataState:i,getTotalRows:c}=u(),a=i===b.PENDING;return!a&&c()===0?null:e.createElement(e.Fragment,null,e.createElement(y,null),e.createElement(p,{...m,numberOfStickyColumns:t.numberOfStickyColumns,scrollContainerCss:t.scrollContainerCss,css:{...l,...a&&{opacity:.5,pointerEvents:"none",transition:"opacity 250ms linear 150ms"}}},e.createElement(r.Head,{theme:n,sortable:s,isSticky:t.hasStickyHeader,css:t.headerCss}),e.createElement(r.Body,{striped:o})))};export{f as DataTableTable};
+import*as e from"react";import{Table as h}from"../table/Table.js";import{DataTable as l}from"./DataTable.js";import{AsyncDataState as D}from"./DataTable.types.js";import{useDataTable as E}from"./DataTableContext.js";import{DataTableLoading as T}from"./DataTableLoading.js";const k=({sortable:m,striped:c,theme:i,css:p,scrollOptions:t={numberOfStickyColumns:0,hasStickyHeader:!1},...d})=>{const{asyncDataState:u,getTotalRows:b,getCanSomeRowsExpand:o,getGroupedRowModel:y,enableRowSelection:r}=E(),n=u===D.PENDING,C=!n&&b()===0,f=()=>y().flatRows.reduce((a,s)=>(s.depth>a&&(a=s.depth),a),0),S=()=>o()&&!!r?2:o()||!!r?1:0;return C?null:e.createElement(e.Fragment,null,e.createElement(T,null),e.createElement(h,{...d,numberOfStickyColumns:t.numberOfStickyColumns,scrollContainerCss:t.scrollContainerCss,controlColumnCount:S(),maxRowDepth:f(),css:{...p,...n&&{opacity:.5,pointerEvents:"none",transition:"opacity 250ms linear 150ms"}}},e.createElement(l.Head,{theme:i,sortable:m,isSticky:t.hasStickyHeader,css:t.headerCss}),e.createElement(l.Body,{striped:c})))};export{k as DataTableTable};
 //# sourceMappingURL=DataTableTable.js.map

package/dist/components/data-table/DataTableTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataTableTable.js","sources":["../../../src/components/data-table/DataTableTable.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { CSS } from '~/stitches'\n\nimport { Table } from '../table'\nimport { TableBody } from '../table/TableBody'\nimport { DataTable } from './DataTable'\nimport { AsyncDataState } from './DataTable.types'\nimport { useDataTable } from './DataTableContext'\nimport { DataTableHead } from './DataTableHead'\nimport { DataTableLoading } from './DataTableLoading'\n\nexport type DataTableTableProps = Omit<\n  React.ComponentProps<typeof Table>,\n  'children' | 'numberOfStickyColumns'\n> &\n  Partial<\n    Pick<React.ComponentProps<typeof DataTableHead>, 'theme' | 'sortable'>\n  > &\n  Partial<Pick<React.ComponentProps<typeof TableBody>, 'striped'>> & {\n    scrollOptions?: {\n      hasStickyHeader?: boolean\n      headerCss?: CSS\n      numberOfStickyColumns?: number\n      scrollContainerCss?: CSS\n    }\n  }\n\nexport const DataTableTable = ({\n  sortable,\n  striped,\n  theme,\n  css,\n  scrollOptions = {\n    numberOfStickyColumns: 0,\n    hasStickyHeader: false\n  },\n  ...props\n}: DataTableTableProps) => {\n  const { asyncDataState, getTotalRows } = useDataTable()\n  const isPending = asyncDataState === AsyncDataState.PENDING\n  const isEmpty = !isPending && getTotalRows() === 0\n\n  if (isEmpty) return null\n\n  return (\n    <>\n      <DataTableLoading />\n\n      <Table\n        {...props}\n        numberOfStickyColumns={scrollOptions.numberOfStickyColumns}\n        scrollContainerCss={scrollOptions.scrollContainerCss}\n        css={{\n          ...css,\n          ...(isPending && {\n            opacity: 0.5,\n            pointerEvents: 'none',\n            transition: 'opacity 250ms linear 150ms'\n          })\n        }}\n      >\n        <DataTable.Head\n          theme={theme}\n          sortable={sortable}\n          isSticky={scrollOptions.hasStickyHeader}\n          css={scrollOptions.headerCss}\n        />\n        <DataTable.Body striped={striped} />\n      </Table>\n    </>\n  )\n}\n"],"names":["DataTableTable","sortable","striped","theme","css","scrollOptions","props","asyncDataState","getTotalRows","useDataTable","isPending","AsyncDataState","React","DataTableLoading","Table","DataTable"],"mappings":"iRA4Ba,MAAAA,EAAiB,CAAC,CAC7B,SAAAC,EACA,QAAAC,EACA,MAAAC,EACA,IAAAC,EACA,cAAAC,EAAgB,CACd,sBAAuB,EACvB,gBAAiB,EACnB,KACGC,CACL,IAA2B,CACzB,KAAM,CAAE,eAAAC,EAAgB,aAAAC,CAAa,EAAIC,EAAa,EAChDC,EAAYH,IAAmBI,EAAe,QAGpD,MAFgB,CAACD,GAAaF,EAAa,IAAM,EAE7B,KAGlBI,EAAA,cAAAA,EAAA,SAAA,KACEA,EAAA,cAACC,EAAA,IAAiB,EAElBD,EAAA,cAACE,EAAA,CACE,GAAGR,EACJ,sBAAuBD,EAAc,sBACrC,mBAAoBA,EAAc,mBAClC,IAAK,CACH,GAAGD,EACH,GAAIM,GAAa,CACf,QAAS,GACT,cAAe,OACf,WAAY,4BACd,CACF,CAAA,EAEAE,EAAA,cAACG,EAAU,KAAV,CACC,MAAOZ,EACP,SAAUF,EACV,SAAUI,EAAc,gBACxB,IAAKA,EAAc,SACrB,CAAA,EACAO,EAAA,cAACG,EAAU,KAAV,CAAe,QAASb,CAAS,CAAA,CACpC,CACF,CAEJ"}
+{"version":3,"file":"DataTableTable.js","sources":["../../../src/components/data-table/DataTableTable.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { CSS } from '~/stitches'\n\nimport { Table } from '../table'\nimport { TableBody } from '../table/TableBody'\nimport { DataTable } from './DataTable'\nimport { AsyncDataState } from './DataTable.types'\nimport { useDataTable } from './DataTableContext'\nimport { DataTableHead } from './DataTableHead'\nimport { DataTableLoading } from './DataTableLoading'\n\nexport type DataTableTableProps = Omit<\n  React.ComponentProps<typeof Table>,\n  'children' | 'numberOfStickyColumns'\n> &\n  Partial<\n    Pick<React.ComponentProps<typeof DataTableHead>, 'theme' | 'sortable'>\n  > &\n  Partial<Pick<React.ComponentProps<typeof TableBody>, 'striped'>> & {\n    scrollOptions?: {\n      hasStickyHeader?: boolean\n      headerCss?: CSS\n      numberOfStickyColumns?: number\n      scrollContainerCss?: CSS\n    }\n  }\n\nexport const DataTableTable = ({\n  sortable,\n  striped,\n  theme,\n  css,\n  scrollOptions = {\n    numberOfStickyColumns: 0,\n    hasStickyHeader: false\n  },\n  ...props\n}: DataTableTableProps) => {\n  const {\n    asyncDataState,\n    getTotalRows,\n    getCanSomeRowsExpand,\n    getGroupedRowModel,\n    enableRowSelection\n  } = useDataTable()\n  const isPending = asyncDataState === AsyncDataState.PENDING\n  const isEmpty = !isPending && getTotalRows() === 0\n\n  const getMaxRowDepth = () => {\n    return getGroupedRowModel().flatRows.reduce((acc, curr) => {\n      if (curr.depth > acc) {\n        acc = curr.depth\n      }\n\n      return acc\n    }, 0)\n  }\n\n  const getControlColumnsCount = (): number => {\n    if (getCanSomeRowsExpand() && !!enableRowSelection) return 2\n\n    if (getCanSomeRowsExpand() || !!enableRowSelection) return 1\n\n    return 0\n  }\n\n  if (isEmpty) return null\n\n  return (\n    <>\n      <DataTableLoading />\n\n      <Table\n        {...props}\n        numberOfStickyColumns={scrollOptions.numberOfStickyColumns}\n        scrollContainerCss={scrollOptions.scrollContainerCss}\n        controlColumnCount={getControlColumnsCount()}\n        maxRowDepth={getMaxRowDepth()}\n        css={{\n          ...css,\n          ...(isPending && {\n            opacity: 0.5,\n            pointerEvents: 'none',\n            transition: 'opacity 250ms linear 150ms'\n          })\n        }}\n      >\n        <DataTable.Head\n          theme={theme}\n          sortable={sortable}\n          isSticky={scrollOptions.hasStickyHeader}\n          css={scrollOptions.headerCss}\n        />\n        <DataTable.Body striped={striped} />\n      </Table>\n    </>\n  )\n}\n"],"names":["DataTableTable","sortable","striped","theme","css","scrollOptions","props","asyncDataState","getTotalRows","getCanSomeRowsExpand","getGroupedRowModel","enableRowSelection","useDataTable","isPending","AsyncDataState","isEmpty","getMaxRowDepth","acc","curr","getControlColumnsCount","React","DataTableLoading","Table","DataTable"],"mappings":"uRA4BaA,EAAiB,CAAC,CAC7B,SAAAC,EACA,QAAAC,EACA,MAAAC,EACA,IAAAC,EACA,cAAAC,EAAgB,CACd,sBAAuB,EACvB,gBAAiB,EACnB,KACGC,CACL,IAA2B,CACzB,KAAM,CACJ,eAAAC,EACA,aAAAC,EACA,qBAAAC,EACA,mBAAAC,EACA,mBAAAC,CACF,EAAIC,EACEC,EAAAA,EAAYN,IAAmBO,EAAe,QAC9CC,EAAU,CAACF,GAAaL,MAAmB,EAE3CQ,EAAiB,IACdN,IAAqB,SAAS,OAAO,CAACO,EAAKC,KAC5CA,EAAK,MAAQD,IACfA,EAAMC,EAAK,OAGND,GACN,CAAC,EAGAE,EAAyB,IACzBV,EAAAA,GAA0B,CAAC,CAACE,EAA2B,EAEvDF,KAA0B,CAAC,CAACE,EAA2B,EAEpD,EAGT,OAAII,EAAgB,KAGlBK,EAAA,cAAAA,EAAA,SAAA,KACEA,EAAA,cAACC,EAAA,IAAiB,EAElBD,EAAA,cAACE,EAAA,CACE,GAAGhB,EACJ,sBAAuBD,EAAc,sBACrC,mBAAoBA,EAAc,mBAClC,mBAAoBc,EAAuB,EAC3C,YAAaH,IACb,IAAK,CACH,GAAGZ,EACH,GAAIS,GAAa,CACf,QAAS,GACT,cAAe,OACf,WAAY,4BACd,CACF,CAEAO,EAAAA,EAAA,cAACG,EAAU,KAAV,CACC,MAAOpB,EACP,SAAUF,EACV,SAAUI,EAAc,gBACxB,IAAKA,EAAc,SAAA,CACrB,EACAe,EAAA,cAACG,EAAU,KAAV,CAAe,QAASrB,CAAS,CAAA,CACpC,CACF,CAEJ"}

package/dist/components/empty-state/EmptyState.d.ts

@@ -1862,6 +1862,8 @@ export declare const EmptyState: {
                 marginBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
             };
         }> | undefined;
+    } & {
+        as?: React.ElementType<any> | React.ComponentType<{}> | undefined;
     }) => JSX.Element;
     Body: (props: Omit<Omit<Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "key" | keyof React.HTMLAttributes<HTMLParagraphElement>> & {
         ref?: ((instance: HTMLParagraphElement | null) => void) | React.RefObject<HTMLParagraphElement> | null | undefined;
@@ -2608,6 +2610,8 @@ export declare const EmptyState: {
                 marginBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
             };
         }> | undefined;
+    } & {
+        as?: React.ElementType<any> | React.ComponentType<{}> | undefined;
     }) => JSX.Element;
 };
 export {};

package/dist/components/empty-state/EmptyStateBody.d.ts

@@ -743,6 +743,8 @@ declare const StyledEmptyStateBody: import("@stitches/react/types/styled-compone
         marginBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
     };
 }>>;
-declare type EmptyStateBodyProps = React.ComponentProps<typeof StyledEmptyStateBody>;
+declare type EmptyStateBodyProps = React.ComponentProps<typeof StyledEmptyStateBody> & {
+    as?: React.ComponentType | React.ElementType;
+};
 export declare const EmptyStateBody: (props: EmptyStateBodyProps) => JSX.Element;
 export {};

package/dist/components/empty-state/EmptyStateBody.js

@@ -1,2 +1,2 @@
-import*as t from"react";import{Text as m}from"../text/Text.js";import{styled as n}from"../../stitches.js";import{EmptyStateContext as s}from"./EmptyState.context.js";const i=n(m,{color:"$tonal400",fontWeight:"400",variants:{size:{xs:{fontSize:"$sm",mb:"$4"},sm:{fontSize:"$sm",mb:"$4"},md:{fontSize:"$sm",mb:"$4"},lg:{fontSize:"$md",mb:"calc($4 + $2)"},xl:{fontSize:"$md",mb:"calc($4 + $2)"}}}}),r=e=>{const{size:o}=t.useContext(s);return t.createElement(i,{size:o,...e})};export{r as EmptyStateBody};
+import*as t from"react";import{Text as m}from"../text/Text.js";import{styled as s}from"../../stitches.js";import{EmptyStateContext as n}from"./EmptyState.context.js";const i=s(m,{color:"$tonal400",fontWeight:"400",variants:{size:{xs:{fontSize:"$sm",mb:"$4"},sm:{fontSize:"$sm",mb:"$4"},md:{fontSize:"$sm",mb:"$4"},lg:{fontSize:"$md",mb:"calc($4 + $2)"},xl:{fontSize:"$md",mb:"calc($4 + $2)"}}}}),r=e=>{const{size:o}=t.useContext(n);return t.createElement(i,{size:o,...e})};export{r as EmptyStateBody};
 //# sourceMappingURL=EmptyStateBody.js.map

package/dist/components/empty-state/EmptyStateBody.js.map

@@ -1 +1 @@
-{"version":3,"file":"EmptyStateBody.js","sources":["../../../src/components/empty-state/EmptyStateBody.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Text } from '~/components/text'\nimport { styled } from '~/stitches'\n\nimport { EmptyStateContext } from './EmptyState.context'\n\nconst StyledEmptyStateBody = styled(Text, {\n  color: '$tonal400',\n  fontWeight: '400',\n  variants: {\n    size: {\n      xs: {\n        fontSize: '$sm',\n        mb: '$4'\n      },\n      sm: {\n        fontSize: '$sm',\n        mb: '$4'\n      },\n      md: {\n        fontSize: '$sm',\n        mb: '$4'\n      },\n      lg: {\n        fontSize: '$md',\n        mb: 'calc($4 + $2)'\n      },\n      xl: {\n        fontSize: '$md',\n        mb: 'calc($4 + $2)'\n      }\n    }\n  }\n})\n\ntype EmptyStateBodyProps = React.ComponentProps<typeof StyledEmptyStateBody>\n\nexport const EmptyStateBody = (props: EmptyStateBodyProps) => {\n  const { size } = React.useContext(EmptyStateContext)\n  return <StyledEmptyStateBody size={size} {...props} />\n}\n"],"names":["StyledEmptyStateBody","styled","Text","EmptyStateBody","props","size","React","EmptyStateContext"],"mappings":"sKAOA,MAAMA,EAAuBC,EAAOC,EAAM,CACxC,MAAO,YACP,WAAY,MACZ,SAAU,CACR,KAAM,CACJ,GAAI,CACF,SAAU,MACV,GAAI,IACN,EACA,GAAI,CACF,SAAU,MACV,GAAI,IACN,EACA,GAAI,CACF,SAAU,MACV,GAAI,IACN,EACA,GAAI,CACF,SAAU,MACV,GAAI,eACN,EACA,GAAI,CACF,SAAU,MACV,GAAI,eACN,CACF,CACF,CACF,CAAC,EAIYC,EAAkBC,GAA+B,CAC5D,KAAM,CAAE,KAAAC,CAAK,EAAIC,EAAM,WAAWC,CAAiB,EACnD,OAAOD,EAAA,cAACN,EAAA,CAAqB,KAAMK,EAAO,GAAGD,EAAO,CACtD"}
+{"version":3,"file":"EmptyStateBody.js","sources":["../../../src/components/empty-state/EmptyStateBody.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Text } from '~/components/text'\nimport { styled } from '~/stitches'\n\nimport { EmptyStateContext } from './EmptyState.context'\n\nconst StyledEmptyStateBody = styled(Text, {\n  color: '$tonal400',\n  fontWeight: '400',\n  variants: {\n    size: {\n      xs: {\n        fontSize: '$sm',\n        mb: '$4'\n      },\n      sm: {\n        fontSize: '$sm',\n        mb: '$4'\n      },\n      md: {\n        fontSize: '$sm',\n        mb: '$4'\n      },\n      lg: {\n        fontSize: '$md',\n        mb: 'calc($4 + $2)'\n      },\n      xl: {\n        fontSize: '$md',\n        mb: 'calc($4 + $2)'\n      }\n    }\n  }\n})\n\ntype EmptyStateBodyProps = React.ComponentProps<typeof StyledEmptyStateBody> & {\n  as?: React.ComponentType | React.ElementType\n}\n\nexport const EmptyStateBody = (props: EmptyStateBodyProps) => {\n  const { size } = React.useContext(EmptyStateContext)\n  return <StyledEmptyStateBody size={size} {...props} />\n}\n"],"names":["StyledEmptyStateBody","styled","Text","EmptyStateBody","props","size","React","EmptyStateContext"],"mappings":"sKAOA,MAAMA,EAAuBC,EAAOC,EAAM,CACxC,MAAO,YACP,WAAY,MACZ,SAAU,CACR,KAAM,CACJ,GAAI,CACF,SAAU,MACV,GAAI,IACN,EACA,GAAI,CACF,SAAU,MACV,GAAI,IACN,EACA,GAAI,CACF,SAAU,MACV,GAAI,IACN,EACA,GAAI,CACF,SAAU,MACV,GAAI,eACN,EACA,GAAI,CACF,SAAU,MACV,GAAI,eACN,CACF,CACF,CACF,CAAC,EAMYC,EAAkBC,GAA+B,CAC5D,KAAM,CAAE,KAAAC,CAAK,EAAIC,EAAM,WAAWC,CAAiB,EACnD,OAAOD,EAAA,cAACN,EAAA,CAAqB,KAAMK,EAAO,GAAGD,EAAO,CACtD"}

package/dist/components/empty-state/EmptyStateTitle.d.ts

@@ -368,6 +368,8 @@ declare const StyledEmptyStateTitle: import("@stitches/react/types/styled-compon
         marginBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
     };
 }>>;
-declare type EmptyStateTitleProps = React.ComponentProps<typeof StyledEmptyStateTitle>;
+declare type EmptyStateTitleProps = React.ComponentProps<typeof StyledEmptyStateTitle> & {
+    as?: React.ComponentType | React.ElementType;
+};
 export declare const EmptyStateTitle: (props: EmptyStateTitleProps) => JSX.Element;
 export {};

package/dist/components/empty-state/EmptyStateTitle.js

@@ -1,2 +1,2 @@
-import*as t from"react";import{styled as m}from"../../stitches.js";import{EmptyStateContext as n}from"./EmptyState.context.js";const i=m("h2",{color:"$tonal400",fontFamily:"$body",fontWeight:"600",m:0,variants:{size:{xs:{fontSize:"$md",mb:"$3"},sm:{fontSize:"$md",mb:"$3"},md:{fontSize:"$md",mb:"$3"},lg:{fontSize:"$lg",mb:"$4"},xl:{fontSize:"$lg",mb:"$4"}}}}),r=o=>{const{size:e}=t.useContext(n);return t.createElement(i,{size:e,...o})};export{r as EmptyStateTitle};
+import*as t from"react";import{styled as m}from"../../stitches.js";import{EmptyStateContext as i}from"./EmptyState.context.js";const n=m("h2",{color:"$tonal400",fontFamily:"$body",fontWeight:"600",m:0,variants:{size:{xs:{fontSize:"$md",mb:"$3"},sm:{fontSize:"$md",mb:"$3"},md:{fontSize:"$md",mb:"$3"},lg:{fontSize:"$lg",mb:"$4"},xl:{fontSize:"$lg",mb:"$4"}}}}),r=o=>{const{size:e}=t.useContext(i);return t.createElement(n,{size:e,...o})};export{r as EmptyStateTitle};
 //# sourceMappingURL=EmptyStateTitle.js.map

package/dist/components/empty-state/EmptyStateTitle.js.map

@@ -1 +1 @@
-{"version":3,"file":"EmptyStateTitle.js","sources":["../../../src/components/empty-state/EmptyStateTitle.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/stitches'\n\nimport { EmptyStateContext } from './EmptyState.context'\n\nconst StyledEmptyStateTitle = styled('h2', {\n  color: '$tonal400',\n  fontFamily: '$body',\n  fontWeight: '600',\n  m: 0,\n  variants: {\n    size: {\n      xs: {\n        fontSize: '$md',\n        mb: '$3'\n      },\n      sm: {\n        fontSize: '$md',\n        mb: '$3'\n      },\n      md: {\n        fontSize: '$md',\n        mb: '$3'\n      },\n      lg: {\n        fontSize: '$lg',\n        mb: '$4'\n      },\n      xl: {\n        fontSize: '$lg',\n        mb: '$4'\n      }\n    }\n  }\n})\n\ntype EmptyStateTitleProps = React.ComponentProps<typeof StyledEmptyStateTitle>\n\nexport const EmptyStateTitle = (props: EmptyStateTitleProps) => {\n  const { size } = React.useContext(EmptyStateContext)\n  return <StyledEmptyStateTitle size={size} {...props} />\n}\n"],"names":["StyledEmptyStateTitle","styled","EmptyStateTitle","props","size","React","EmptyStateContext"],"mappings":"+HAMA,MAAMA,EAAwBC,EAAO,KAAM,CACzC,MAAO,YACP,WAAY,QACZ,WAAY,MACZ,EAAG,EACH,SAAU,CACR,KAAM,CACJ,GAAI,CACF,SAAU,MACV,GAAI,IACN,EACA,GAAI,CACF,SAAU,MACV,GAAI,IACN,EACA,GAAI,CACF,SAAU,MACV,GAAI,IACN,EACA,GAAI,CACF,SAAU,MACV,GAAI,IACN,EACA,GAAI,CACF,SAAU,MACV,GAAI,IACN,CACF,CACF,CACF,CAAC,EAIYC,EAAmBC,GAAgC,CAC9D,KAAM,CAAE,KAAAC,CAAK,EAAIC,EAAM,WAAWC,CAAiB,EACnD,OAAOD,EAAA,cAACL,EAAA,CAAsB,KAAMI,EAAO,GAAGD,EAAO,CACvD"}
+{"version":3,"file":"EmptyStateTitle.js","sources":["../../../src/components/empty-state/EmptyStateTitle.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/stitches'\n\nimport { EmptyStateContext } from './EmptyState.context'\n\nconst StyledEmptyStateTitle = styled('h2', {\n  color: '$tonal400',\n  fontFamily: '$body',\n  fontWeight: '600',\n  m: 0,\n  variants: {\n    size: {\n      xs: {\n        fontSize: '$md',\n        mb: '$3'\n      },\n      sm: {\n        fontSize: '$md',\n        mb: '$3'\n      },\n      md: {\n        fontSize: '$md',\n        mb: '$3'\n      },\n      lg: {\n        fontSize: '$lg',\n        mb: '$4'\n      },\n      xl: {\n        fontSize: '$lg',\n        mb: '$4'\n      }\n    }\n  }\n})\n\ntype EmptyStateTitleProps = React.ComponentProps<\n  typeof StyledEmptyStateTitle\n> & {\n  as?: React.ComponentType | React.ElementType\n}\n\nexport const EmptyStateTitle = (props: EmptyStateTitleProps) => {\n  const { size } = React.useContext(EmptyStateContext)\n  return <StyledEmptyStateTitle size={size} {...props} />\n}\n"],"names":["StyledEmptyStateTitle","styled","EmptyStateTitle","props","size","React","EmptyStateContext"],"mappings":"+HAMA,MAAMA,EAAwBC,EAAO,KAAM,CACzC,MAAO,YACP,WAAY,QACZ,WAAY,MACZ,EAAG,EACH,SAAU,CACR,KAAM,CACJ,GAAI,CACF,SAAU,MACV,GAAI,IACN,EACA,GAAI,CACF,SAAU,MACV,GAAI,IACN,EACA,GAAI,CACF,SAAU,MACV,GAAI,IACN,EACA,GAAI,CACF,SAAU,MACV,GAAI,IACN,EACA,GAAI,CACF,SAAU,MACV,GAAI,IACN,CACF,CACF,CACF,CAAC,EAQYC,EAAmBC,GAAgC,CAC9D,KAAM,CAAE,KAAAC,CAAK,EAAIC,EAAM,WAAWC,CAAiB,EACnD,OAAOD,EAAA,cAACL,EAAA,CAAsB,KAAMI,EAAO,GAAGD,EAAO,CACvD"}

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

@@ -373,9 +373,11 @@ declare const StyledTable: import("@stitches/react/types/styled-component").Styl
 declare type TableProps = React.ComponentProps<typeof StyledTable> & {
     numberOfStickyColumns?: number;
     scrollContainerCss?: CSS;
+    controlColumnCount?: number;
+    maxRowDepth?: number;
 };
 export declare const Table: {
-    ({ size, corners, numberOfStickyColumns, scrollContainerCss, ...rest }: TableProps): JSX.Element;
+    ({ size, corners, numberOfStickyColumns, scrollContainerCss, controlColumnCount, maxRowDepth, ...rest }: TableProps): JSX.Element;
     displayName: string;
 } & {
     Body: {
@@ -2970,9 +2972,11 @@ export declare const Table: {
             };
         }> | undefined;
     }>;
-    StickyColumnsContainer: ({ children, numberOfStickyColumns, css, ...restProps }: React.PropsWithChildren<{
+    StickyColumnsContainer: ({ children, numberOfStickyColumns, controlColumnCount, maxRowDepth, css, ...restProps }: React.PropsWithChildren<{
         numberOfStickyColumns?: number | undefined;
         css?: CSS | undefined;
+        controlColumnCount?: number | undefined;
+        maxRowDepth?: number | undefined;
     }>) => JSX.Element;
 };
 export {};

package/dist/components/table/Table.js

@@ -1,2 +1,2 @@
-import*as i from"react";import{styled as p}from"../../stitches.js";import{TableBody as b}from"./TableBody.js";import{TableCell as e}from"./TableCell.js";import{TableFooter as f}from"./TableFooter.js";import{TableFooterCell as r}from"./TableFooterCell.js";import{TableHeader as c}from"./TableHeader.js";import{TableHeaderCell as o}from"./TableHeaderCell.js";import{StyledRow as C,TableRow as u}from"./TableRow.js";import{TableStickyColumnsContainer as a}from"./TableStickyColumnsContainer.js";const y=p("table",{borderCollapse:"separate",borderSpacing:0,fontFamily:"$sans",fontSize:"$sm",width:"100%",variants:{size:{md:{[`${e}, ${o}, ${r}`]:{height:"$4",padding:"$1 $3"}},lg:{[`${e}, ${o}, ${r}`]:{height:"$5",padding:"$2 $3"}},xl:{[`${e}, ${o}, ${r}`]:{height:"$6",padding:"$4 $3"}}},corners:{round:{[`${o}`]:{"&:first-of-type":{borderTopLeftRadius:"$0"},"&:last-of-type":{borderTopRightRadius:"$0"}},[`${C}:last-child`]:{[`${e}:first-child`]:{borderBottomLeftRadius:"$0"},[`${e}:last-child`]:{borderBottomRightRadius:"$0"}}},square:{}}}}),s=({size:m="md",corners:d="round",numberOfStickyColumns:t=0,scrollContainerCss:n,...$})=>{const l=i.createElement(y,{size:m,corners:d,...$});return t?i.createElement(a,{css:n,numberOfStickyColumns:t},l):l},h=Object.assign(s,{Body:b,Cell:e,Footer:f,FooterCell:r,Header:c,HeaderCell:o,Row:u,StickyColumnsContainer:a});s.displayName="Table";export{h as Table};
+import*as a from"react";import{styled as b}from"../../stitches.js";import{TableBody as f}from"./TableBody.js";import{TableCell as o}from"./TableCell.js";import{TableFooter as C}from"./TableFooter.js";import{TableFooterCell as r}from"./TableFooterCell.js";import{TableHeader as u}from"./TableHeader.js";import{TableHeaderCell as e}from"./TableHeaderCell.js";import{StyledRow as h,TableRow as y}from"./TableRow.js";import{TableStickyColumnsContainer as i}from"./TableStickyColumnsContainer.js";const T=b("table",{borderCollapse:"separate",borderSpacing:0,fontFamily:"$sans",fontSize:"$sm",width:"100%",variants:{size:{md:{[`${o}, ${e}, ${r}`]:{height:"$4",padding:"$1 $3"}},lg:{[`${o}, ${e}, ${r}`]:{height:"$5",padding:"$2 $3"}},xl:{[`${o}, ${e}, ${r}`]:{height:"$6",padding:"$4 $3"}}},corners:{round:{[`${e}`]:{"&:first-of-type":{borderTopLeftRadius:"$0"},"&:last-of-type":{borderTopRightRadius:"$0"}},[`${h}:last-child`]:{[`${o}:first-child`]:{borderBottomLeftRadius:"$0"},[`${o}:last-child`]:{borderBottomRightRadius:"$0"}}},square:{}}}}),m=({size:s="md",corners:n="round",numberOfStickyColumns:t=0,scrollContainerCss:d,controlColumnCount:$,maxRowDepth:p,...c})=>{const l=a.createElement(T,{size:s,corners:n,...c});return t?a.createElement(i,{css:d,numberOfStickyColumns:t,controlColumnCount:$,maxRowDepth:p},l):l},g=Object.assign(m,{Body:f,Cell:o,Footer:C,FooterCell:r,Header:u,HeaderCell:e,Row:y,StickyColumnsContainer:i});m.displayName="Table";export{g as Table};
 //# sourceMappingURL=Table.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Table.js","sources":["../../../src/components/table/Table.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { CSS, styled } from '~/stitches'\n\nimport { TableBody } from './TableBody'\nimport { TableCell } from './TableCell'\nimport { TableFooter } from './TableFooter'\nimport { TableFooterCell } from './TableFooterCell'\nimport { TableHeader } from './TableHeader'\nimport { TableHeaderCell } from './TableHeaderCell'\nimport { StyledRow, TableRow } from './TableRow'\nimport { TableStickyColumnsContainer } from './TableStickyColumnsContainer'\n\nconst StyledTable = styled('table', {\n  borderCollapse: 'separate',\n  borderSpacing: 0,\n  fontFamily: '$sans',\n  fontSize: '$sm',\n  width: '100%',\n  variants: {\n    size: {\n      md: {\n        [`${TableCell}, ${TableHeaderCell}, ${TableFooterCell}`]: {\n          height: '$4',\n          padding: '$1 $3'\n        }\n      },\n      lg: {\n        [`${TableCell}, ${TableHeaderCell}, ${TableFooterCell}`]: {\n          height: '$5',\n          padding: '$2 $3'\n        }\n      },\n      xl: {\n        [`${TableCell}, ${TableHeaderCell}, ${TableFooterCell}`]: {\n          height: '$6',\n          padding: '$4 $3'\n        }\n      }\n    },\n    corners: {\n      round: {\n        [`${TableHeaderCell}`]: {\n          '&:first-of-type': { borderTopLeftRadius: '$0' },\n          '&:last-of-type': { borderTopRightRadius: '$0' }\n        },\n        [`${StyledRow}:last-child`]: {\n          [`${TableCell}:first-child`]: { borderBottomLeftRadius: '$0' },\n          [`${TableCell}:last-child`]: { borderBottomRightRadius: '$0' }\n        }\n      },\n      square: {}\n    }\n  }\n})\n\ntype TableProps = React.ComponentProps<typeof StyledTable> & {\n  numberOfStickyColumns?: number\n  scrollContainerCss?: CSS\n}\n\nconst TableComponent = ({\n  size = 'md',\n  corners = 'round',\n  numberOfStickyColumns = 0,\n  scrollContainerCss,\n  ...rest\n}: TableProps) => {\n  const tableComponent = <StyledTable size={size} corners={corners} {...rest} />\n\n  if (numberOfStickyColumns) {\n    return (\n      <TableStickyColumnsContainer\n        css={scrollContainerCss}\n        numberOfStickyColumns={numberOfStickyColumns}\n      >\n        {tableComponent}\n      </TableStickyColumnsContainer>\n    )\n  }\n\n  return tableComponent\n}\n\nexport const Table = Object.assign(TableComponent, {\n  Body: TableBody,\n  Cell: TableCell,\n  Footer: TableFooter,\n  FooterCell: TableFooterCell,\n  Header: TableHeader,\n  HeaderCell: TableHeaderCell,\n  Row: TableRow,\n  StickyColumnsContainer: TableStickyColumnsContainer\n})\n\nTableComponent.displayName = 'Table'\n"],"names":["StyledTable","styled","TableCell","TableHeaderCell","TableFooterCell","StyledRow","TableComponent","size","corners","numberOfStickyColumns","scrollContainerCss","rest","tableComponent","React","TableStickyColumnsContainer","Table","TableBody","TableFooter","TableHeader","TableRow"],"mappings":"4eAaA,MAAMA,EAAcC,EAAO,QAAS,CAClC,eAAgB,WAChB,cAAe,EACf,WAAY,QACZ,SAAU,MACV,MAAO,OACP,SAAU,CACR,KAAM,CACJ,GAAI,CACF,CAAC,GAAGC,MAAcC,MAAoBC,KAAoB,CACxD,OAAQ,KACR,QAAS,OACX,CACF,EACA,GAAI,CACF,CAAC,GAAGF,MAAcC,MAAoBC,KAAoB,CACxD,OAAQ,KACR,QAAS,OACX,CACF,EACA,GAAI,CACF,CAAC,GAAGF,MAAcC,MAAoBC,KAAoB,CACxD,OAAQ,KACR,QAAS,OACX,CACF,CACF,EACA,QAAS,CACP,MAAO,CACL,CAAC,GAAGD,KAAoB,CACtB,kBAAmB,CAAE,oBAAqB,IAAK,EAC/C,iBAAkB,CAAE,qBAAsB,IAAK,CACjD,EACA,CAAC,GAAGE,gBAAyB,CAC3B,CAAC,GAAGH,iBAA0B,CAAE,uBAAwB,IAAK,EAC7D,CAAC,GAAGA,gBAAyB,CAAE,wBAAyB,IAAK,CAC/D,CACF,EACA,OAAQ,CAAA,CACV,CACF,CACF,CAAC,EAOKI,EAAiB,CAAC,CACtB,KAAAC,EAAO,KACP,QAAAC,EAAU,QACV,sBAAAC,EAAwB,EACxB,mBAAAC,KACGC,CACL,IAAkB,CAChB,MAAMC,EAAiBC,EAAA,cAACb,EAAA,CAAY,KAAMO,EAAM,QAASC,EAAU,GAAGG,CAAAA,CAAM,EAE5E,OAAIF,EAEAI,EAAA,cAACC,EAAA,CACC,IAAKJ,EACL,sBAAuBD,CAEtBG,EAAAA,CACH,EAIGA,CACT,EAEaG,EAAQ,OAAO,OAAOT,EAAgB,CACjD,KAAMU,EACN,KAAMd,EACN,OAAQe,EACR,WAAYb,EACZ,OAAQc,EACR,WAAYf,EACZ,IAAKgB,EACL,uBAAwBL,CAC1B,CAAC,EAEDR,EAAe,YAAc"}
+{"version":3,"file":"Table.js","sources":["../../../src/components/table/Table.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { CSS, styled } from '~/stitches'\n\nimport { TableBody } from './TableBody'\nimport { TableCell } from './TableCell'\nimport { TableFooter } from './TableFooter'\nimport { TableFooterCell } from './TableFooterCell'\nimport { TableHeader } from './TableHeader'\nimport { TableHeaderCell } from './TableHeaderCell'\nimport { StyledRow, TableRow } from './TableRow'\nimport { TableStickyColumnsContainer } from './TableStickyColumnsContainer'\n\nconst StyledTable = styled('table', {\n  borderCollapse: 'separate',\n  borderSpacing: 0,\n  fontFamily: '$sans',\n  fontSize: '$sm',\n  width: '100%',\n  variants: {\n    size: {\n      md: {\n        [`${TableCell}, ${TableHeaderCell}, ${TableFooterCell}`]: {\n          height: '$4',\n          padding: '$1 $3'\n        }\n      },\n      lg: {\n        [`${TableCell}, ${TableHeaderCell}, ${TableFooterCell}`]: {\n          height: '$5',\n          padding: '$2 $3'\n        }\n      },\n      xl: {\n        [`${TableCell}, ${TableHeaderCell}, ${TableFooterCell}`]: {\n          height: '$6',\n          padding: '$4 $3'\n        }\n      }\n    },\n    corners: {\n      round: {\n        [`${TableHeaderCell}`]: {\n          '&:first-of-type': { borderTopLeftRadius: '$0' },\n          '&:last-of-type': { borderTopRightRadius: '$0' }\n        },\n        [`${StyledRow}:last-child`]: {\n          [`${TableCell}:first-child`]: { borderBottomLeftRadius: '$0' },\n          [`${TableCell}:last-child`]: { borderBottomRightRadius: '$0' }\n        }\n      },\n      square: {}\n    }\n  }\n})\n\ntype TableProps = React.ComponentProps<typeof StyledTable> & {\n  numberOfStickyColumns?: number\n  scrollContainerCss?: CSS\n  controlColumnCount?: number\n  maxRowDepth?: number\n}\n\nconst TableComponent = ({\n  size = 'md',\n  corners = 'round',\n  numberOfStickyColumns = 0,\n  scrollContainerCss,\n  controlColumnCount,\n  maxRowDepth,\n  ...rest\n}: TableProps) => {\n  const tableComponent = <StyledTable size={size} corners={corners} {...rest} />\n\n  if (numberOfStickyColumns) {\n    return (\n      <TableStickyColumnsContainer\n        css={scrollContainerCss}\n        numberOfStickyColumns={numberOfStickyColumns}\n        controlColumnCount={controlColumnCount}\n        maxRowDepth={maxRowDepth}\n      >\n        {tableComponent}\n      </TableStickyColumnsContainer>\n    )\n  }\n\n  return tableComponent\n}\n\nexport const Table = Object.assign(TableComponent, {\n  Body: TableBody,\n  Cell: TableCell,\n  Footer: TableFooter,\n  FooterCell: TableFooterCell,\n  Header: TableHeader,\n  HeaderCell: TableHeaderCell,\n  Row: TableRow,\n  StickyColumnsContainer: TableStickyColumnsContainer\n})\n\nTableComponent.displayName = 'Table'\n"],"names":["StyledTable","styled","TableCell","TableHeaderCell","TableFooterCell","StyledRow","TableComponent","size","corners","numberOfStickyColumns","scrollContainerCss","controlColumnCount","maxRowDepth","rest","tableComponent","React","TableStickyColumnsContainer","Table","TableBody","TableFooter","TableHeader","TableRow"],"mappings":"4eAaA,MAAMA,EAAcC,EAAO,QAAS,CAClC,eAAgB,WAChB,cAAe,EACf,WAAY,QACZ,SAAU,MACV,MAAO,OACP,SAAU,CACR,KAAM,CACJ,GAAI,CACF,CAAC,GAAGC,MAAcC,MAAoBC,KAAoB,CACxD,OAAQ,KACR,QAAS,OACX,CACF,EACA,GAAI,CACF,CAAC,GAAGF,MAAcC,MAAoBC,KAAoB,CACxD,OAAQ,KACR,QAAS,OACX,CACF,EACA,GAAI,CACF,CAAC,GAAGF,MAAcC,MAAoBC,KAAoB,CACxD,OAAQ,KACR,QAAS,OACX,CACF,CACF,EACA,QAAS,CACP,MAAO,CACL,CAAC,GAAGD,KAAoB,CACtB,kBAAmB,CAAE,oBAAqB,IAAK,EAC/C,iBAAkB,CAAE,qBAAsB,IAAK,CACjD,EACA,CAAC,GAAGE,gBAAyB,CAC3B,CAAC,GAAGH,iBAA0B,CAAE,uBAAwB,IAAK,EAC7D,CAAC,GAAGA,gBAAyB,CAAE,wBAAyB,IAAK,CAC/D,CACF,EACA,OAAQ,EACV,CACF,CACF,CAAC,EASKI,EAAiB,CAAC,CACtB,KAAAC,EAAO,KACP,QAAAC,EAAU,QACV,sBAAAC,EAAwB,EACxB,mBAAAC,EACA,mBAAAC,EACA,YAAAC,KACGC,CACL,IAAkB,CAChB,MAAMC,EAAiBC,EAAA,cAACf,EAAA,CAAY,KAAMO,EAAM,QAASC,EAAU,GAAGK,CAAAA,CAAM,EAE5E,OAAIJ,EAEAM,EAAA,cAACC,EAAA,CACC,IAAKN,EACL,sBAAuBD,EACvB,mBAAoBE,EACpB,YAAaC,CAAAA,EAEZE,CACH,EAIGA,CACT,EAEaG,EAAQ,OAAO,OAAOX,EAAgB,CACjD,KAAMY,EACN,KAAMhB,EACN,OAAQiB,EACR,WAAYf,EACZ,OAAQgB,EACR,WAAYjB,EACZ,IAAKkB,EACL,uBAAwBL,CAC1B,CAAC,EAEDV,EAAe,YAAc"}

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

@@ -1,6 +1,8 @@
 import React from 'react';
 import { CSS } from '../../stitches';
-export declare const TableStickyColumnsContainer: ({ children, numberOfStickyColumns, css, ...restProps }: React.PropsWithChildren<{
+export declare const TableStickyColumnsContainer: ({ children, numberOfStickyColumns, controlColumnCount, maxRowDepth, css, ...restProps }: React.PropsWithChildren<{
     numberOfStickyColumns?: number | undefined;
     css?: CSS | undefined;
+    controlColumnCount?: number | undefined;
+    maxRowDepth?: number | undefined;
 }>) => JSX.Element;

package/dist/components/table/TableStickyColumnsContainer.js

@@ -1,2 +1,2 @@
-import r from"react";import{Box as p}from"../box/Box.js";import{useStickyColumnsCss as u}from"./useStickyColumnsCss.js";const m=({children:n,numberOfStickyColumns:t=0,css:c,...i})=>{const[e,a]=r.useState(!1),o=r.useRef(null),{columnsCss:h}=u(t,o);return r.createElement(p,{onScroll:l=>{const s=l.currentTarget.scrollWidth>l.currentTarget.clientWidth;s!==e&&a(s)},role:"scrollbar",ref:o,css:{overflow:"auto",maxWidth:"100%",...h,[`& td:nth-child(${t}), th:nth-child(${t})`]:{...e&&{boxShadow:"$colors$alpha200 -2px -3px 9px 1px",clipPath:"inset(0px -10px 0px 0px)"}},"& td":{bg:"inherit"},...c},...i},n)};export{m as TableStickyColumnsContainer};
+import o from"react";import{Box as h}from"../box/Box.js";import{useStickyColumnsCss as x}from"./useStickyColumnsCss.js";const C=({children:c,numberOfStickyColumns:t=0,controlColumnCount:s,maxRowDepth:m,css:u,...i})=>{const[r,p]=o.useState(!1),e=o.useRef(null),{columnsCss:a}=x({numberOfStickyColumns:t,wrapperRef:e,controlColumnCount:s,maxRowDepth:m});return o.createElement(h,{onScroll:n=>{const l=n.currentTarget.scrollWidth>n.currentTarget.clientWidth;l!==r&&p(l)},role:"scrollbar",ref:e,css:{overflow:"auto",maxWidth:"100%",...a,[`& td:nth-child(${t}), th:nth-child(${t})`]:{...r&&{boxShadow:"$colors$alpha200 -2px -3px 9px 1px",clipPath:"inset(0px -10px 0px 0px)"}},"& td":{bg:"inherit"},...u},...i},c)};export{C 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 React from 'react'\n\nimport { CSS } from '~/stitches'\n\nimport { Box } from '../box'\nimport { useStickyColumnsCss } from './useStickyColumnsCss'\n\nexport const TableStickyColumnsContainer = ({\n  children,\n  numberOfStickyColumns = 0,\n  css,\n  ...restProps\n}: React.PropsWithChildren<{\n  numberOfStickyColumns?: number\n  css?: CSS\n}>) => {\n  const [hasScroll, setHasScroll] = React.useState<boolean>(false)\n  const scrollContainerRef = React.useRef(null)\n  const { columnsCss } = useStickyColumnsCss(\n    numberOfStickyColumns,\n    scrollContainerRef\n  )\n\n  const handleScroll = (event: React.UIEvent<HTMLDivElement>) => {\n    const newHasScroll =\n      event.currentTarget.scrollWidth > event.currentTarget.clientWidth\n    if (newHasScroll !== hasScroll) {\n      setHasScroll(newHasScroll)\n    }\n  }\n\n  return (\n    <Box\n      onScroll={handleScroll}\n      role=\"scrollbar\"\n      ref={scrollContainerRef}\n      css={{\n        overflow: 'auto',\n        maxWidth: '100%',\n        ...columnsCss,\n        [`& td:nth-child(${numberOfStickyColumns}), th:nth-child(${numberOfStickyColumns})`]:\n          {\n            ...(hasScroll && {\n              boxShadow: '$colors$alpha200 -2px -3px 9px 1px',\n              clipPath: 'inset(0px -10px 0px 0px)'\n            })\n          },\n        '& td': {\n          bg: 'inherit'\n        },\n        ...css\n      }}\n      {...restProps}\n    >\n      {children}\n    </Box>\n  )\n}\n"],"names":["TableStickyColumnsContainer","children","numberOfStickyColumns","css","restProps","hasScroll","setHasScroll","React","scrollContainerRef","columnsCss","useStickyColumnsCss","Box","event","newHasScroll"],"mappings":"wHAOO,MAAMA,EAA8B,CAAC,CAC1C,SAAAC,EACA,sBAAAC,EAAwB,EACxB,IAAAC,KACGC,CACL,IAGO,CACL,KAAM,CAACC,EAAWC,CAAY,EAAIC,EAAM,SAAkB,EAAK,EACzDC,EAAqBD,EAAM,OAAO,IAAI,EACtC,CAAE,WAAAE,CAAW,EAAIC,EACrBR,EACAM,CACF,EAUA,OACED,EAAA,cAACI,EAAA,CACC,SAVkBC,GAAyC,CAC7D,MAAMC,EACJD,EAAM,cAAc,YAAcA,EAAM,cAAc,YACpDC,IAAiBR,GACnBC,EAAaO,CAAY,CAE7B,EAKI,KAAK,YACL,IAAKL,EACL,IAAK,CACH,SAAU,OACV,SAAU,OACV,GAAGC,EACH,CAAC,kBAAkBP,oBAAwCA,MACzD,CACE,GAAIG,GAAa,CACf,UAAW,qCACX,SAAU,0BACZ,CACF,EACF,OAAQ,CACN,GAAI,SACN,EACA,GAAGF,CACL,EACC,GAAGC,CAEHH,EAAAA,CACH,CAEJ"}
+{"version":3,"file":"TableStickyColumnsContainer.js","sources":["../../../src/components/table/TableStickyColumnsContainer.tsx"],"sourcesContent":["import React from 'react'\n\nimport { CSS } from '~/stitches'\n\nimport { Box } from '../box'\nimport { useStickyColumnsCss } from './useStickyColumnsCss'\n\nexport const TableStickyColumnsContainer = ({\n  children,\n  numberOfStickyColumns = 0,\n  controlColumnCount,\n  maxRowDepth,\n  css,\n  ...restProps\n}: React.PropsWithChildren<{\n  numberOfStickyColumns?: number\n  css?: CSS\n  controlColumnCount?: number\n  maxRowDepth?: number\n}>) => {\n  const [hasScroll, setHasScroll] = React.useState<boolean>(false)\n  const wrapperRef = React.useRef(null)\n  const { columnsCss } = useStickyColumnsCss({\n    numberOfStickyColumns,\n    wrapperRef,\n    controlColumnCount,\n    maxRowDepth\n  })\n\n  const handleScroll = (event: React.UIEvent<HTMLDivElement>) => {\n    const newHasScroll =\n      event.currentTarget.scrollWidth > event.currentTarget.clientWidth\n    if (newHasScroll !== hasScroll) {\n      setHasScroll(newHasScroll)\n    }\n  }\n\n  return (\n    <Box\n      onScroll={handleScroll}\n      role=\"scrollbar\"\n      ref={wrapperRef}\n      css={{\n        overflow: 'auto',\n        maxWidth: '100%',\n        ...columnsCss,\n        [`& td:nth-child(${numberOfStickyColumns}), th:nth-child(${numberOfStickyColumns})`]:\n          {\n            ...(hasScroll && {\n              boxShadow: '$colors$alpha200 -2px -3px 9px 1px',\n              clipPath: 'inset(0px -10px 0px 0px)'\n            })\n          },\n        '& td': {\n          bg: 'inherit'\n        },\n        ...css\n      }}\n      {...restProps}\n    >\n      {children}\n    </Box>\n  )\n}\n"],"names":["TableStickyColumnsContainer","children","numberOfStickyColumns","controlColumnCount","maxRowDepth","css","restProps","hasScroll","setHasScroll","React","wrapperRef","columnsCss","useStickyColumnsCss","Box","event","newHasScroll"],"mappings":"wHAOO,MAAMA,EAA8B,CAAC,CAC1C,SAAAC,EACA,sBAAAC,EAAwB,EACxB,mBAAAC,EACA,YAAAC,EACA,IAAAC,KACGC,CACL,IAKO,CACL,KAAM,CAACC,EAAWC,CAAY,EAAIC,EAAM,SAAkB,EAAK,EACzDC,EAAaD,EAAM,OAAO,IAAI,EAC9B,CAAE,WAAAE,CAAW,EAAIC,EAAoB,CACzC,sBAAAV,EACA,WAAAQ,EACA,mBAAAP,EACA,YAAAC,CACF,CAAC,EAUD,OACEK,EAAA,cAACI,EAAA,CACC,SAVkBC,GAAyC,CAC7D,MAAMC,EACJD,EAAM,cAAc,YAAcA,EAAM,cAAc,YACpDC,IAAiBR,GACnBC,EAAaO,CAAY,CAE7B,EAKI,KAAK,YACL,IAAKL,EACL,IAAK,CACH,SAAU,OACV,SAAU,OACV,GAAGC,EACH,CAAC,kBAAkBT,oBAAwCA,MACzD,CACE,GAAIK,GAAa,CACf,UAAW,qCACX,SAAU,0BACZ,CACF,EACF,OAAQ,CACN,GAAI,SACN,EACA,GAAGF,CACL,EACC,GAAGC,CAEHL,EAAAA,CACH,CAEJ"}

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

@@ -3,5 +3,10 @@ import { CSS } from '../../stitches';
 interface IUseStickyColumnsCss {
     columnsCss: CSS;
 }
-export declare const useStickyColumnsCss: (numberOfStickyColumns: number, wrapperRef: React.RefObject<HTMLTableSectionElement>) => IUseStickyColumnsCss;
+export declare const useStickyColumnsCss: ({ numberOfStickyColumns, wrapperRef, controlColumnCount, maxRowDepth }: {
+    numberOfStickyColumns: number;
+    wrapperRef: React.RefObject<HTMLTableSectionElement>;
+    controlColumnCount?: number | undefined;
+    maxRowDepth?: number | undefined;
+}) => IUseStickyColumnsCss;
 export {};

package/dist/components/table/useStickyColumnsCss.js

@@ -1,2 +1,2 @@
-import*as u from"react";const p=(t,n)=>{const[c,l]=u.useState({});return u.useLayoutEffect(()=>{var r;if(!t)return;let o=0;const e=(r=n.current)==null?void 0:r.querySelectorAll("th"),f=Array.from(e||[]).slice(0,t).reduce((d,m,s)=>{const i=s+1,h={...d,[`& td:nth-of-type(${i}), th:nth-of-type(${i})`]:{position:"sticky",left:`${o}px`,minWidth:`${m.offsetWidth}px`,zIndex:"2"}};return o+=(e==null?void 0:e.item(s).clientWidth)||0,h},{});l(f)},[t,n]),{columnsCss:c}};export{p as useStickyColumnsCss};
+import*as l from"react";const a=40,x=8,S=({numberOfStickyColumns:e,wrapperRef:u,controlColumnCount:t=0,maxRowDepth:c})=>{const[y,C]=l.useState({}),f=(o,s)=>{const r=s+1;return t&&r<=t&&!c?a:t&&r<=t&&c?a+c*x:o.offsetWidth},i=l.useCallback(()=>{var o;let s=0;const r=(o=u.current)==null?void 0:o.querySelectorAll("th");return Array.from(r||[]).slice(0,e).reduce((d,m,n)=>{const p=n+1,h={...d,[`& td:nth-of-type(${p}), th:nth-of-type(${p})`]:{position:"sticky",left:t&&n===0?0:`${s}px`,minWidth:`${f(m,n)}px`,zIndex:"2"}};return s+=f(m,n),h},{})},[e,u,t]);return l.useLayoutEffect(()=>{if(!e)return;const o=i();C(o)},[e,u,i]),{columnsCss:y}};export{S as useStickyColumnsCss};
 //# 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\nimport { CSS } from '../../stitches'\n\ninterface IUseStickyColumnsCss {\n  columnsCss: CSS\n}\n\nexport const useStickyColumnsCss = (\n  numberOfStickyColumns: number,\n  wrapperRef: React.RefObject<HTMLTableSectionElement>\n): IUseStickyColumnsCss => {\n  const [columnsCss, setColumnsCss] = React.useState<CSS>({})\n\n  React.useLayoutEffect(() => {\n    if (!numberOfStickyColumns) return\n\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: CSS, 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    }, {} as CSS)\n\n    setColumnsCss(newColumnsCss)\n  }, [numberOfStickyColumns, wrapperRef])\n\n  return {\n    columnsCss\n  }\n}\n"],"names":["useStickyColumnsCss","numberOfStickyColumns","wrapperRef","columnsCss","setColumnsCss","React","_a","accWidth","tableHeaderCells","newColumnsCss","acc","column","index","elementNumber","cssObject"],"mappings":"wBAQO,MAAMA,EAAsB,CACjCC,EACAC,IACyB,CACzB,KAAM,CAACC,EAAYC,CAAa,EAAIC,EAAM,SAAc,EAAE,EAE1D,OAAAA,EAAM,gBAAgB,IAAM,CAd9B,IAAAC,EAeI,GAAI,CAACL,EAAuB,OAE5B,IAAIM,EAAW,EAGf,MAAMC,GAAmBF,EAAAJ,EAAW,UAAX,KAAA,OAAAI,EAAoB,iBAAiB,MAMxDG,EALsB,MAAM,KAAKD,GAAoB,EAAE,EAGnB,MAAM,EAAGP,CAAqB,EAEpC,OAAO,CAACS,EAAUC,EAAQC,IAAU,CACtE,MAAMC,EAAgBD,EAAQ,EACxBE,EAAY,CAChB,GAAGJ,EACH,CAAC,oBAAoBG,sBAAkCA,MACrD,CACE,SAAU,SACV,KAAM,GAAGN,MACT,SAAU,GAAGI,EAAO,gBACpB,OAAQ,GACV,CACJ,EAEA,OAAAJ,IAAYC,GAAA,KAAA,OAAAA,EAAkB,KAAKI,GAAO,cAAe,EAElDE,CACT,EAAG,EAAS,EAEZV,EAAcK,CAAa,CAC7B,EAAG,CAACR,EAAuBC,CAAU,CAAC,EAE/B,CACL,WAAAC,CACF,CACF"}
+{"version":3,"file":"useStickyColumnsCss.js","sources":["../../../src/components/table/useStickyColumnsCss.ts"],"sourcesContent":["import * as React from 'react'\n\nimport { CSS } from '../../stitches'\n\ninterface IUseStickyColumnsCss {\n  columnsCss: CSS\n}\n\nconst CONTROL_ELEMENT_WIDTH = 40\nconst SUBROW_PROGRESSIVE_OFFSET_STEP = 8\n\nexport const useStickyColumnsCss = ({\n  numberOfStickyColumns,\n  wrapperRef,\n  controlColumnCount = 0,\n  maxRowDepth\n}: {\n  numberOfStickyColumns: number\n  wrapperRef: React.RefObject<HTMLTableSectionElement>\n  controlColumnCount?: number\n  maxRowDepth?: number\n}): IUseStickyColumnsCss => {\n  const [columnsCss, setColumnsCss] = React.useState<CSS>({})\n\n  const getColumnWidth = (\n    column: HTMLTableCellElement,\n    columnIndex: number\n  ) => {\n    const elementNumber = columnIndex + 1\n\n    if (\n      controlColumnCount &&\n      elementNumber <= controlColumnCount &&\n      !maxRowDepth\n    ) {\n      return CONTROL_ELEMENT_WIDTH\n    }\n    if (\n      controlColumnCount &&\n      elementNumber <= controlColumnCount &&\n      maxRowDepth\n    ) {\n      return (\n        CONTROL_ELEMENT_WIDTH + maxRowDepth * SUBROW_PROGRESSIVE_OFFSET_STEP\n      )\n    }\n    return column.offsetWidth\n  }\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: CSS, 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: controlColumnCount && index === 0 ? 0 : `${accWidth}px`,\n            minWidth: `${getColumnWidth(column, index)}px`, // fixing width for sticky columns\n            zIndex: '2'\n          }\n      }\n\n      accWidth += getColumnWidth(column, index)\n\n      return cssObject\n    }, {} as CSS)\n\n    return newColumnsCss\n  }, [numberOfStickyColumns, wrapperRef, controlColumnCount])\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":["CONTROL_ELEMENT_WIDTH","SUBROW_PROGRESSIVE_OFFSET_STEP","useStickyColumnsCss","numberOfStickyColumns","wrapperRef","controlColumnCount","maxRowDepth","columnsCss","setColumnsCss","React","getColumnWidth","column","columnIndex","elementNumber","generateColumnsCss","_a","accWidth","tableHeaderCells","acc","index","cssObject","newColumnsCss"],"mappings":"wBAQA,MAAMA,EAAwB,GACxBC,EAAiC,EAE1BC,EAAsB,CAAC,CAClC,sBAAAC,EACA,WAAAC,EACA,mBAAAC,EAAqB,EACrB,YAAAC,CACF,IAK4B,CAC1B,KAAM,CAACC,EAAYC,CAAa,EAAIC,EAAM,SAAc,CAAA,CAAE,EAEpDC,EAAiB,CACrBC,EACAC,IACG,CACH,MAAMC,EAAgBD,EAAc,EAEpC,OACEP,GACAQ,GAAiBR,GACjB,CAACC,EAEMN,EAGPK,GACAQ,GAAiBR,GACjBC,EAGEN,EAAwBM,EAAcL,EAGnCU,EAAO,WAChB,EAEMG,EAAqBL,EAAM,YAAY,IAAM,CAjDrD,IAAAM,EAkDI,IAAIC,EAAW,EAGf,MAAMC,GAAmBF,EAAAX,EAAW,UAAX,KAAA,OAAAW,EAAoB,iBAAiB,MAwB9D,OAvB4B,MAAM,KAAKE,GAAoB,CAAA,CAAE,EAGnB,MAAM,EAAGd,CAAqB,EAEpC,OAAO,CAACe,EAAUP,EAAQQ,IAAU,CACtE,MAAMN,EAAgBM,EAAQ,EACxBC,EAAY,CAChB,GAAGF,EACH,CAAC,oBAAoBL,sBAAkCA,MACrD,CACE,SAAU,SACV,KAAMR,GAAsBc,IAAU,EAAI,EAAI,GAAGH,MACjD,SAAU,GAAGN,EAAeC,EAAQQ,CAAK,MACzC,OAAQ,GACV,CACJ,EAEA,OAAAH,GAAYN,EAAeC,EAAQQ,CAAK,EAEjCC,CACT,EAAG,CAAS,CAAA,CAGd,EAAG,CAACjB,EAAuBC,EAAYC,CAAkB,CAAC,EAE1D,OAAAI,EAAM,gBAAgB,IAAM,CAC1B,GAAI,CAACN,EAAuB,OAC5B,MAAMkB,EAAgBP,IAEtBN,EAAca,CAAa,CAC7B,EAAG,CAAClB,EAAuBC,EAAYU,CAAkB,CAAC,EAEnD,CACL,WAAAP,CACF,CACF"}