@atom-learning/components 3.26.4 → 3.26.6

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

@@ -1,2 +1,2 @@
-import*as t from"react";import{Flex as a}from"../flex/Flex.js";import{styled as n}from"../../stitches.js";import{EmptyStateBody as i}from"./EmptyStateBody.js";import{EmptyStateImage as p}from"./EmptyStateImage.js";import{EmptyStateTitle as o}from"./EmptyStateTitle.js";const y=n(a,{flexDirection:"column",alignItems:"center",textAlign:"center","& > *:last-child":{mb:0},variants:{size:{xs:{p:"$2"},sm:{p:"$3"},md:{p:"$4"},lg:{p:"$5"},xl:{p:"$6"}}}}),r=({size:m="sm",children:l,...s})=>t.createElement(y,{size:m,...s},t.Children.map(l,e=>t.isValidElement(e)&&(e.type===p||e.type===o||e.type===i)?t.cloneElement(e,{...e.props,size:m}):e)),c=Object.assign(r,{Image:p,Title:o,Body:i});r.displayName="EmptyState";export{c as EmptyState};
+import*as e from"react";import{Flex as i}from"../flex/Flex.js";import{styled as o}from"../../stitches.js";import{EmptyStateProvider as p}from"./EmptyState.context.js";import{EmptyStateBody as a}from"./EmptyStateBody.js";import{EmptyStateImage as s}from"./EmptyStateImage.js";import{EmptyStateTitle as l}from"./EmptyStateTitle.js";const n=o(i,{flexDirection:"column",alignItems:"center",textAlign:"center","& > *:last-child":{mb:0},variants:{size:{xs:{p:"$2"},sm:{p:"$3"},md:{p:"$4"},lg:{p:"$5"},xl:{p:"$6"}}}}),m=({size:t="sm",...r})=>e.createElement(p,{size:t},e.createElement(n,{size:t,...r})),y=Object.assign(m,{Image:s,Title:l,Body:a});m.displayName="EmptyState";export{y as EmptyState};
 //# sourceMappingURL=EmptyState.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"EmptyState.js","sources":["../../../src/components/empty-state/EmptyState.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Flex } from '~/components/flex'\nimport { styled } from '~/stitches'\n\nimport { EmptyStateBody } from './EmptyStateBody'\nimport { EmptyStateImage } from './EmptyStateImage'\nimport { EmptyStateTitle } from './EmptyStateTitle'\n\nconst EmptyStateContainer = styled(Flex, {\n  flexDirection: 'column',\n  alignItems: 'center',\n  textAlign: 'center',\n  '& > *:last-child': {\n    mb: 0\n  },\n  variants: {\n    size: {\n      xs: {\n        p: '$2'\n      },\n      sm: {\n        p: '$3'\n      },\n      md: {\n        p: '$4'\n      },\n      lg: {\n        p: '$5'\n      },\n      xl: {\n        p: '$6'\n      }\n    }\n  }\n})\n\ntype EmptyStateProps = React.ComponentProps<typeof EmptyStateContainer>\n\nconst EmptyStateComponent = ({\n  size = 'sm',\n  children,\n  ...props\n}: EmptyStateProps) => (\n  <EmptyStateContainer size={size} {...props}>\n    {React.Children.map(children, (child) => {\n      if (!React.isValidElement(child)) return child\n\n      if (\n        child.type === EmptyStateImage ||\n        child.type === EmptyStateTitle ||\n        child.type === EmptyStateBody\n      ) {\n        return React.cloneElement(child, { ...child.props, size })\n      }\n\n      return child\n    })}\n  </EmptyStateContainer>\n)\n\nexport const EmptyState = Object.assign(EmptyStateComponent, {\n  Image: EmptyStateImage,\n  Title: EmptyStateTitle,\n  Body: EmptyStateBody\n})\n\nEmptyStateComponent.displayName = 'EmptyState'\n"],"names":["EmptyStateContainer","styled","Flex","EmptyStateComponent","size","children","props","React","child","EmptyStateImage","EmptyStateTitle","EmptyStateBody","EmptyState"],"mappings":"6QASA,MAAMA,EAAsBC,EAAOC,EAAM,CACvC,cAAe,SACf,WAAY,SACZ,UAAW,SACX,mBAAoB,CAClB,GAAI,CACN,EACA,SAAU,CACR,KAAM,CACJ,GAAI,CACF,EAAG,IACL,EACA,GAAI,CACF,EAAG,IACL,EACA,GAAI,CACF,EAAG,IACL,EACA,GAAI,CACF,EAAG,IACL,EACA,GAAI,CACF,EAAG,IACL,CACF,CACF,CACF,CAAC,EAIKC,EAAsB,CAAC,CAC3B,KAAAC,EAAO,KACP,SAAAC,KACGC,CACL,IACEC,EAAA,cAACP,EAAA,CAAoB,KAAMI,EAAO,GAAGE,CAAAA,EAClCC,EAAM,SAAS,IAAIF,EAAWG,GACxBD,EAAM,eAAeC,CAAK,IAG7BA,EAAM,OAASC,GACfD,EAAM,OAASE,GACfF,EAAM,OAASG,GAERJ,EAAM,aAAaC,EAAO,CAAE,GAAGA,EAAM,MAAO,KAAAJ,CAAK,CAAC,EAPlBI,CAW1C,CACH,EAGWI,EAAa,OAAO,OAAOT,EAAqB,CAC3D,MAAOM,EACP,MAAOC,EACP,KAAMC,CACR,CAAC,EAEDR,EAAoB,YAAc"}
+{"version":3,"file":"EmptyState.js","sources":["../../../src/components/empty-state/EmptyState.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Flex } from '~/components/flex'\nimport { styled } from '~/stitches'\n\nimport { EmptyStateProvider } from './EmptyState.context'\nimport { EmptyStateBody } from './EmptyStateBody'\nimport { EmptyStateImage } from './EmptyStateImage'\nimport { EmptyStateTitle } from './EmptyStateTitle'\n\nconst EmptyStateContainer = styled(Flex, {\n  flexDirection: 'column',\n  alignItems: 'center',\n  textAlign: 'center',\n  '& > *:last-child': {\n    mb: 0\n  },\n  variants: {\n    size: {\n      xs: {\n        p: '$2'\n      },\n      sm: {\n        p: '$3'\n      },\n      md: {\n        p: '$4'\n      },\n      lg: {\n        p: '$5'\n      },\n      xl: {\n        p: '$6'\n      }\n    }\n  }\n})\n\nexport type EmptyStateProps = React.ComponentProps<typeof EmptyStateContainer>\n\nconst EmptyStateComponent = ({ size = 'sm', ...rest }: EmptyStateProps) => (\n  <EmptyStateProvider size={size}>\n    <EmptyStateContainer size={size} {...rest} />\n  </EmptyStateProvider>\n)\n\nexport const EmptyState = Object.assign(EmptyStateComponent, {\n  Image: EmptyStateImage,\n  Title: EmptyStateTitle,\n  Body: EmptyStateBody\n})\n\nEmptyStateComponent.displayName = 'EmptyState'\n"],"names":["EmptyStateContainer","styled","Flex","EmptyStateComponent","size","rest","React","EmptyStateProvider","EmptyState","EmptyStateImage","EmptyStateTitle","EmptyStateBody"],"mappings":"0UAUA,MAAMA,EAAsBC,EAAOC,EAAM,CACvC,cAAe,SACf,WAAY,SACZ,UAAW,SACX,mBAAoB,CAClB,GAAI,CACN,EACA,SAAU,CACR,KAAM,CACJ,GAAI,CACF,EAAG,IACL,EACA,GAAI,CACF,EAAG,IACL,EACA,GAAI,CACF,EAAG,IACL,EACA,GAAI,CACF,EAAG,IACL,EACA,GAAI,CACF,EAAG,IACL,CACF,CACF,CACF,CAAC,EAIKC,EAAsB,CAAC,CAAE,KAAAC,EAAO,QAASC,CAAK,IAClDC,EAAA,cAACC,EAAA,CAAmB,KAAMH,CAAAA,EACxBE,EAAA,cAACN,EAAA,CAAoB,KAAMI,EAAO,GAAGC,CAAAA,CAAM,CAC7C,EAGWG,EAAa,OAAO,OAAOL,EAAqB,CAC3D,MAAOM,EACP,MAAOC,EACP,KAAMC,CACR,CAAC,EAEDR,EAAoB,YAAc"}

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

@@ -1,6 +1,6 @@
-/// <reference types="react" />
-export declare const EmptyStateBody: import("@stitches/react/types/styled-component").StyledComponent<import("react").ForwardRefExoticComponent<Omit<Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "key" | keyof import("react").HTMLAttributes<HTMLParagraphElement>> & {
-    ref?: ((instance: HTMLParagraphElement | null) => void) | import("react").RefObject<HTMLParagraphElement> | null | undefined;
+import * as React from 'react';
+declare const StyledEmptyStateBody: import("@stitches/react/types/styled-component").StyledComponent<React.ForwardRefExoticComponent<Omit<Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "key" | keyof React.HTMLAttributes<HTMLParagraphElement>> & {
+    ref?: ((instance: HTMLParagraphElement | null) => void) | React.RefObject<HTMLParagraphElement> | null | undefined;
 }, "size" | "css" | "noCapsize"> & import("@stitches/react/types/styled-component").TransformProps<{
     size?: "sm" | "md" | "lg" | "xl" | "xs" | undefined;
     noCapsize?: boolean | "true" | undefined;
@@ -373,7 +373,7 @@ export declare const EmptyStateBody: import("@stitches/react/types/styled-compon
         };
     }> | undefined;
 }, "as"> & {
-    as?: import("react").ElementType<any> | import("react").ComponentType<{}> | undefined;
+    as?: React.ElementType<any> | React.ComponentType<{}> | undefined;
 }>, {
     size?: "sm" | "md" | "lg" | "xl" | "xs" | undefined;
 }, {
@@ -743,3 +743,6 @@ export declare const EmptyStateBody: import("@stitches/react/types/styled-compon
         marginBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
     };
 }>>;
+declare type EmptyStateBodyProps = React.ComponentProps<typeof StyledEmptyStateBody>;
+export declare const EmptyStateBody: (props: EmptyStateBodyProps) => JSX.Element;
+export {};

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

@@ -1,2 +1,2 @@
-import{Text as t}from"../text/Text.js";import{styled as m}from"../../stitches.js";const o=m(t,{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)"}}}});export{o as EmptyStateBody};
+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};
 //# 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 { Text } from '~/components/text'\nimport { styled } from '~/stitches'\n\nexport const EmptyStateBody = 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"],"names":["EmptyStateBody","styled","Text"],"mappings":"kFAGa,MAAAA,EAAiBC,EAAOC,EAAM,CACzC,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"}
+{"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"}

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

@@ -1,5 +1,4 @@
 import React from 'react';
-import { Image } from '../../components/image';
 declare const StyledEmptyStateImage: import("@stitches/react/types/styled-component").StyledComponent<{
     (props: Omit<Pick<Omit<Pick<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "key" | keyof React.ImgHTMLAttributes<HTMLImageElement>> & {
         ref?: ((instance: HTMLImageElement | null) => void) | React.RefObject<HTMLImageElement> | null | undefined;
@@ -746,6 +745,6 @@ declare const StyledEmptyStateImage: import("@stitches/react/types/styled-compon
         marginBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
     };
 }>>;
-declare type EmptyStateImageProps = React.ComponentProps<typeof StyledEmptyStateImage> & React.ComponentProps<typeof Image>;
+declare type EmptyStateImageProps = React.ComponentProps<typeof StyledEmptyStateImage>;
 export declare const EmptyStateImage: (props: EmptyStateImageProps) => JSX.Element;
 export {};

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

@@ -1,2 +1,2 @@
-import t from"react";import{Image as x}from"../image/Image.js";import{styled as a}from"../../stitches.js";const e=a(x,{variants:{size:{xs:{maxWidth:"56px",maxHeight:"32px",mb:"$4"},sm:{maxWidth:"84px",maxHeight:"48px",mb:"$4"},md:{maxWidth:"126px",maxHeight:"72px",mb:"$4"},lg:{maxWidth:"190px",maxHeight:"142px",mb:"calc($4 + $2)"},xl:{maxWidth:"285px",maxHeight:"213px",mb:"calc($4 + $2)"}}}}),p=m=>t.createElement(e,{...m});export{p as EmptyStateImage};
+import t from"react";import{Image as x}from"../image/Image.js";import{styled as a}from"../../stitches.js";import{EmptyStateContext as i}from"./EmptyState.context.js";const p=a(x,{variants:{size:{xs:{maxWidth:"56px",maxHeight:"32px",mb:"$4"},sm:{maxWidth:"84px",maxHeight:"48px",mb:"$4"},md:{maxWidth:"126px",maxHeight:"72px",mb:"$4"},lg:{maxWidth:"190px",maxHeight:"142px",mb:"calc($4 + $2)"},xl:{maxWidth:"285px",maxHeight:"213px",mb:"calc($4 + $2)"}}}}),o=m=>{const{size:e}=t.useContext(i);return t.createElement(p,{size:e,...m})};export{o as EmptyStateImage};
 //# sourceMappingURL=EmptyStateImage.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"EmptyStateImage.js","sources":["../../../src/components/empty-state/EmptyStateImage.tsx"],"sourcesContent":["import React from 'react'\n\nimport { Image } from '~/components/image'\nimport { styled } from '~/stitches'\n\nconst StyledEmptyStateImage = styled(Image, {\n  variants: {\n    size: {\n      xs: {\n        maxWidth: '56px',\n        maxHeight: '32px',\n        mb: '$4'\n      },\n      sm: {\n        maxWidth: '84px',\n        maxHeight: '48px',\n        mb: '$4'\n      },\n      md: {\n        maxWidth: '126px',\n        maxHeight: '72px',\n        mb: '$4'\n      },\n      lg: {\n        maxWidth: '190px',\n        maxHeight: '142px',\n        mb: 'calc($4 + $2)'\n      },\n      xl: {\n        maxWidth: '285px',\n        maxHeight: '213px',\n        mb: 'calc($4 + $2)'\n      }\n    }\n  }\n})\n\ntype EmptyStateImageProps = React.ComponentProps<typeof StyledEmptyStateImage> &\n  React.ComponentProps<typeof Image>\n\nexport const EmptyStateImage = (props: EmptyStateImageProps) => (\n  <StyledEmptyStateImage {...props} />\n)\n"],"names":["StyledEmptyStateImage","styled","Image","EmptyStateImage","props","React"],"mappings":"0GAKA,MAAMA,EAAwBC,EAAOC,EAAO,CAC1C,SAAU,CACR,KAAM,CACJ,GAAI,CACF,SAAU,OACV,UAAW,OACX,GAAI,IACN,EACA,GAAI,CACF,SAAU,OACV,UAAW,OACX,GAAI,IACN,EACA,GAAI,CACF,SAAU,QACV,UAAW,OACX,GAAI,IACN,EACA,GAAI,CACF,SAAU,QACV,UAAW,QACX,GAAI,eACN,EACA,GAAI,CACF,SAAU,QACV,UAAW,QACX,GAAI,eACN,CACF,CACF,CACF,CAAC,EAKYC,EAAmBC,GAC9BC,EAAA,cAACL,EAAA,CAAuB,GAAGI,CAAO,CAAA"}
+{"version":3,"file":"EmptyStateImage.js","sources":["../../../src/components/empty-state/EmptyStateImage.tsx"],"sourcesContent":["import React from 'react'\n\nimport { Image } from '~/components/image'\nimport { styled } from '~/stitches'\n\nimport { EmptyStateContext } from './EmptyState.context'\n\nconst StyledEmptyStateImage = styled(Image, {\n  variants: {\n    size: {\n      xs: {\n        maxWidth: '56px',\n        maxHeight: '32px',\n        mb: '$4'\n      },\n      sm: {\n        maxWidth: '84px',\n        maxHeight: '48px',\n        mb: '$4'\n      },\n      md: {\n        maxWidth: '126px',\n        maxHeight: '72px',\n        mb: '$4'\n      },\n      lg: {\n        maxWidth: '190px',\n        maxHeight: '142px',\n        mb: 'calc($4 + $2)'\n      },\n      xl: {\n        maxWidth: '285px',\n        maxHeight: '213px',\n        mb: 'calc($4 + $2)'\n      }\n    }\n  }\n})\n\ntype EmptyStateImageProps = React.ComponentProps<typeof StyledEmptyStateImage>\n\nexport const EmptyStateImage = (props: EmptyStateImageProps) => {\n  const { size } = React.useContext(EmptyStateContext)\n  return <StyledEmptyStateImage size={size} {...props} />\n}\n"],"names":["StyledEmptyStateImage","styled","Image","EmptyStateImage","props","size","React","EmptyStateContext"],"mappings":"sKAOA,MAAMA,EAAwBC,EAAOC,EAAO,CAC1C,SAAU,CACR,KAAM,CACJ,GAAI,CACF,SAAU,OACV,UAAW,OACX,GAAI,IACN,EACA,GAAI,CACF,SAAU,OACV,UAAW,OACX,GAAI,IACN,EACA,GAAI,CACF,SAAU,QACV,UAAW,OACX,GAAI,IACN,EACA,GAAI,CACF,SAAU,QACV,UAAW,QACX,GAAI,eACN,EACA,GAAI,CACF,SAAU,QACV,UAAW,QACX,GAAI,eACN,CACF,CACF,CACF,CAAC,EAIYC,EAAmBC,GAAgC,CAC9D,KAAM,CAAE,KAAAC,CAAK,EAAIC,EAAM,WAAWC,CAAiB,EACnD,OAAOD,EAAA,cAACN,EAAA,CAAsB,KAAMK,EAAO,GAAGD,CAAAA,CAAO,CACvD"}

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

@@ -1,4 +1,5 @@
-export declare const EmptyStateTitle: import("@stitches/react/types/styled-component").StyledComponent<"h2", {
+import * as React from 'react';
+declare const StyledEmptyStateTitle: import("@stitches/react/types/styled-component").StyledComponent<"h2", {
     size?: "sm" | "md" | "lg" | "xl" | "xs" | undefined;
 }, {
     sm: string;
@@ -367,3 +368,6 @@ export declare const EmptyStateTitle: import("@stitches/react/types/styled-compo
         marginBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
     };
 }>>;
+declare type EmptyStateTitleProps = React.ComponentProps<typeof StyledEmptyStateTitle>;
+export declare const EmptyStateTitle: (props: EmptyStateTitleProps) => JSX.Element;
+export {};

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

@@ -1,2 +1,2 @@
-import{styled as t}from"../../stitches.js";const m=t("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"}}}});export{m as EmptyStateTitle};
+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};
 //# 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 { styled } from '~/stitches'\n\nexport const EmptyStateTitle = 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"],"names":["EmptyStateTitle","styled"],"mappings":"2CAEa,MAAAA,EAAkBC,EAAO,KAAM,CAC1C,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"}
+{"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"}

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"}