@atom-learning/components 5.2.0-beta.1 → 5.2.0-beta.2

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

@@ -667,9 +667,8 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
      */
     DragAndDropTable: ({ idColumn, onDragAndDrop, sortable, striped, theme, css, ...props }: Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, "ref"> & {
         ref?: ((instance: HTMLTableElement | null) => void) | import("react").RefObject<HTMLTableElement> | null | undefined;
-    }, "size" | "css" | "corners"> & import("@atom-learning/stitches-react/types/styled-component").TransformProps<{
+    }, "size" | "css"> & import("@atom-learning/stitches-react/types/styled-component").TransformProps<{
         size?: "md" | "lg" | "xl" | undefined;
-        corners?: "round" | "square" | undefined;
     }, {
         sm: string;
         md: string;
@@ -1775,7 +1774,9 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
         numberOfStickyColumns?: number;
         numberOfStickyRows?: number;
         scrollContainerCss?: import("../..").CSS;
-    }, "ref"> & import("react").RefAttributes<unknown>, "children" | "numberOfStickyColumns" | "numberOfStickyRows"> & Partial<Pick<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref"> & {
+    }, "ref"> & import("react").RefAttributes<unknown> & {
+        corners: "round" | "square";
+    }, "children" | "numberOfStickyColumns" | "numberOfStickyRows"> & Partial<Pick<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref"> & {
         ref?: ((instance: HTMLTableSectionElement | null) => void) | import("react").RefObject<HTMLTableSectionElement> | null | undefined;
     }, "css" | "theme" | "isSticky"> & import("@atom-learning/stitches-react/types/styled-component").TransformProps<{
         theme?: "light" | "primary" | "white" | "primaryDark" | "primaryLight" | undefined;

package/dist/components/index.d.ts

@@ -85,4 +85,4 @@ export { Video } from './video';
 export { KeyboardShortcut } from './keyboard-shortcut';
 export { SegmentedControl } from './segmented-control';
 export { FileDrop, useFileDrop } from './file-drop';
-export { ScrollableContainer, ScrollableContainerProvider, useScrollableContainer } from './scrollable-container';
+export { ScrollableContainer, useScrollableContainer } from './scrollable-container';

package/dist/components/scrollable-container/ScrollableContainer.context.d.ts

@@ -1,4 +1,9 @@
 import * as React from 'react';
+export interface IScrollableContainerProviderProps {
+    scrollableEl: HTMLElement | null;
+    containerEl: HTMLElement | null;
+    children: React.ReactNode;
+}
 export interface IScrollableContainerContext {
     hasProvider: boolean;
     scrollableContainer?: HTMLDivElement | null;
@@ -13,11 +18,7 @@ export interface IScrollableContainerContext {
     scrollProgressXAxis: number;
     scrollbarWidthXAxis: number;
     scrollableEl?: HTMLElement | null;
-    setScrollableEl?: (HTMLElement: any) => void;
     containerEl?: HTMLElement | null;
-    setContainerEl?: (HTMLElement: any) => void;
 }
 export declare const ScrollableContainerContext: React.Context<IScrollableContainerContext>;
-export declare const ScrollableContainerProvider: ({ children }: {
-    children: React.ReactNode;
-}) => React.JSX.Element;
+export declare const ScrollableContainerProvider: ({ scrollableEl, containerEl, children }: IScrollableContainerProviderProps) => React.JSX.Element;

package/dist/components/scrollable-container/ScrollableContainer.context.js

@@ -1,2 +1,2 @@
-import*as s from"react";import{useCallbackRefState as X}from"../../utilities/hooks/useCallbackRef.js";import{useResizeObserver as H}from"../../utilities/hooks/useResizeObserver.js";const Y=s.createContext({hasProvider:!1,hasScrollYAxis:!1,hasScrolledYAxis:!1,hasScrolledToEndYAxis:!1,hasScrollXAxis:!1,hasScrolledXAxis:!1,hasScrolledToEndXAxis:!1,scrollProgressYAxis:0,scrollbarWidthYAxis:0,scrollProgressXAxis:0,scrollbarWidthXAxis:0}),v=({children:W})=>{const[l,o]=X(),[e,i]=X(),[t,g]=s.useState(!1),[c,T]=s.useState(!1),[a,b]=s.useState(0),[h,u]=s.useState(0);H({delay:0,elements:[e,l],onResize:()=>{!l||!e||(g(l.scrollHeight>l.clientHeight),T(l.scrollWidth>l.clientWidth),b(e.clientHeight-l.clientHeight),u(e.clientWidth-l.clientWidth))}});const[{hasScrolledYAxis:d,hasScrolledToEndYAxis:n,hasScrolledXAxis:x,hasScrolledToEndXAxis:S},m]=s.useState({hasScrolledYAxis:!1,hasScrolledToEndYAxis:!1,hasScrolledXAxis:!1,hasScrolledToEndXAxis:!1}),A=(()=>!l||l.scrollHeight<=l.clientHeight?0:l.scrollTop/(l.scrollHeight-l.clientHeight))(),E=(()=>!l||l.scrollWidth<=l.clientWidth?0:l.scrollLeft/(l.scrollWidth-l.clientWidth))();s.useEffect(()=>{if(!l)return;const r=()=>{m({hasScrolledYAxis:!!l.scrollTop,hasScrolledToEndYAxis:Math.abs(l.scrollHeight-l.clientHeight-l.scrollTop)<1,hasScrolledXAxis:!!l.scrollLeft,hasScrolledToEndXAxis:Math.abs(l.scrollWidth-l.clientWidth-l.scrollLeft)<1})};return r(),l.addEventListener("scroll",r),()=>{l.removeEventListener("scroll",r)}},[l]);const f=s.useMemo(()=>({hasProvider:!0,hasScrollYAxis:t,hasScrolledYAxis:d,hasScrolledToEndYAxis:n,scrollProgressYAxis:A,scrollbarWidthYAxis:a,hasScrollXAxis:c,hasScrolledXAxis:x,hasScrolledToEndXAxis:S,scrollProgressXAxis:E,scrollbarWidthXAxis:h,scrollableEl:l,setScrollableEl:o,containerEl:e,setContainerEl:i}),[t,d,n,A,a,c,x,S,E,h,l,o,e,i]);return s.createElement(Y.Provider,{value:f},W)};export{Y as ScrollableContainerContext,v as ScrollableContainerProvider};
+import*as s from"react";import{useResizeObserver as b}from"../../utilities/hooks/useResizeObserver.js";const S=s.createContext({hasProvider:!1,hasScrollYAxis:!1,hasScrolledYAxis:!1,hasScrolledToEndYAxis:!1,hasScrollXAxis:!1,hasScrolledXAxis:!1,hasScrolledToEndXAxis:!1,scrollProgressYAxis:0,scrollbarWidthYAxis:0,scrollProgressXAxis:0,scrollbarWidthXAxis:0}),H=({scrollableEl:l,containerEl:r,children:E})=>{const[i,X]=s.useState(!1),[t,Y]=s.useState(!1),[c,g]=s.useState(0),[e,T]=s.useState(0),[{hasScrolledYAxis:a,hasScrolledToEndYAxis:h,hasScrolledXAxis:d,hasScrolledToEndXAxis:n},W]=s.useState({hasScrolledYAxis:!1,hasScrolledToEndYAxis:!1,hasScrolledXAxis:!1,hasScrolledToEndXAxis:!1}),o=s.useCallback(()=>{!l||W({hasScrolledYAxis:!!l.scrollTop,hasScrolledToEndYAxis:Math.abs(l.scrollHeight-l.clientHeight-l.scrollTop)<1,hasScrolledXAxis:!!l.scrollLeft,hasScrolledToEndXAxis:Math.abs(l.scrollWidth-l.clientWidth-l.scrollLeft)<1})},[l]);b({delay:0,elements:[r,l],onResize:()=>{!l||!r||(X(l.scrollHeight>l.clientHeight),Y(l.scrollWidth>l.clientWidth),g(r.clientHeight-l.clientHeight),T(r.clientWidth-l.clientWidth),o())}});const x=(()=>!l||l.scrollHeight<=l.clientHeight?0:l.scrollTop/(l.scrollHeight-l.clientHeight))(),A=(()=>!l||l.scrollWidth<=l.clientWidth?0:l.scrollLeft/(l.scrollWidth-l.clientWidth))();s.useEffect(()=>{if(l)return o(),l.addEventListener("scroll",o),()=>{l.removeEventListener("scroll",o)}},[l,o]);const u=s.useMemo(()=>({hasProvider:!0,hasScrollYAxis:i,hasScrolledYAxis:a,hasScrolledToEndYAxis:h,scrollProgressYAxis:x,scrollbarWidthYAxis:c,hasScrollXAxis:t,hasScrolledXAxis:d,hasScrolledToEndXAxis:n,scrollProgressXAxis:A,scrollbarWidthXAxis:e,scrollableEl:l,containerEl:r}),[i,a,h,x,c,t,d,n,A,e,l,r]);return s.createElement(S.Provider,{value:u},E)};export{S as ScrollableContainerContext,H as ScrollableContainerProvider};
 //# sourceMappingURL=ScrollableContainer.context.js.map

package/dist/components/scrollable-container/ScrollableContainer.context.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollableContainer.context.js","sources":["../../../src/components/scrollable-container/ScrollableContainer.context.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useCallbackRefState } from '~/utilities/hooks/useCallbackRef'\nimport { useResizeObserver } from '~/utilities/hooks/useResizeObserver'\n\nexport interface IScrollableContainerContext {\n  hasProvider: boolean\n  scrollableContainer?: HTMLDivElement | null\n  hasScrollYAxis: boolean\n  hasScrolledYAxis: boolean\n  hasScrolledToEndYAxis: boolean\n  hasScrollXAxis: boolean\n  hasScrolledXAxis: boolean\n  hasScrolledToEndXAxis: boolean\n  scrollProgressYAxis: number\n  scrollbarWidthYAxis: number\n  scrollProgressXAxis: number\n  scrollbarWidthXAxis: number\n  scrollableEl?: HTMLElement | null\n  setScrollableEl?: (HTMLElement) => void\n  containerEl?: HTMLElement | null\n  setContainerEl?: (HTMLElement) => void\n}\n\nexport const ScrollableContainerContext = React.createContext<IScrollableContainerContext>({\n  hasProvider: false,\n  hasScrollYAxis: false,\n  hasScrolledYAxis: false,\n  hasScrolledToEndYAxis: false,\n  hasScrollXAxis: false,\n  hasScrolledXAxis: false,\n  hasScrolledToEndXAxis: false,\n  scrollProgressYAxis: 0,\n  scrollbarWidthYAxis: 0,\n  scrollProgressXAxis: 0,\n  scrollbarWidthXAxis: 0\n})\n\nexport const ScrollableContainerProvider = ({ children }: { children: React.ReactNode }) => {\n  const [scrollableEl, setScrollableEl] = useCallbackRefState()\n  const [containerEl, setContainerEl] = useCallbackRefState()\n\n  const [hasScrollYAxis, setHasScrollYAxis] = React.useState<boolean>(false)\n  const [hasScrollXAxis, setHasScrollXAxis] = React.useState<boolean>(false)\n  const [scrollbarWidthYAxis, setScrollbarWidthYAxis] = React.useState<number>(0)\n  const [scrollbarWidthXAxis, setScrollbarWidthXAxis] = React.useState<number>(0)\n\n  useResizeObserver({\n    delay: 0,\n    elements: [containerEl, scrollableEl],\n    onResize: () => {\n      if (!scrollableEl) return\n      if (!containerEl) return\n      setHasScrollYAxis(scrollableEl.scrollHeight > scrollableEl.clientHeight)\n      setHasScrollXAxis(scrollableEl.scrollWidth > scrollableEl.clientWidth)\n      setScrollbarWidthYAxis(containerEl.clientHeight - scrollableEl.clientHeight)\n      setScrollbarWidthXAxis(containerEl.clientWidth - scrollableEl.clientWidth)\n    }\n  })\n\n  const [{ hasScrolledYAxis, hasScrolledToEndYAxis, hasScrolledXAxis, hasScrolledToEndXAxis }, setScrollState] = React.useState<{\n    hasScrolledYAxis: boolean\n    hasScrolledToEndYAxis: boolean\n    hasScrolledXAxis: boolean\n    hasScrolledToEndXAxis: boolean\n  }>({ hasScrolledYAxis: false, hasScrolledToEndYAxis: false, hasScrolledXAxis: false, hasScrolledToEndXAxis: false })\n\n  /** A number between 0-1 for the relative amount of pixels scrolled */\n  const scrollProgressYAxis = (() => {\n    if (!scrollableEl) return 0\n    if (scrollableEl.scrollHeight <= scrollableEl.clientHeight) return 0\n    return scrollableEl.scrollTop / (scrollableEl.scrollHeight - scrollableEl.clientHeight)\n  })()\n\n  const scrollProgressXAxis = (() => {\n    if (!scrollableEl) return 0\n    if (scrollableEl.scrollWidth <= scrollableEl.clientWidth) return 0\n    return scrollableEl.scrollLeft / (scrollableEl.scrollWidth - scrollableEl.clientWidth)\n  })()\n\n  React.useEffect(() => {\n    if (!scrollableEl) return\n    const updateScrollState = () => {\n      setScrollState({\n        hasScrolledYAxis: !!scrollableEl.scrollTop,\n        hasScrolledToEndYAxis:\n          Math.abs(scrollableEl.scrollHeight - scrollableEl.clientHeight - scrollableEl.scrollTop) <\n          1,\n        hasScrolledXAxis: !!scrollableEl.scrollLeft,\n        hasScrolledToEndXAxis:\n          Math.abs(scrollableEl.scrollWidth - scrollableEl.clientWidth - scrollableEl.scrollLeft) <\n          1\n      })\n    }\n    updateScrollState()\n\n    scrollableEl.addEventListener('scroll', updateScrollState)\n\n    return () => {\n      scrollableEl.removeEventListener('scroll', updateScrollState)\n    }\n  }, [scrollableEl])\n\n  const value = React.useMemo<IScrollableContainerContext>(\n    () => ({\n      hasProvider: true,\n      hasScrollYAxis,\n      hasScrolledYAxis,\n      hasScrolledToEndYAxis,\n      scrollProgressYAxis,\n      scrollbarWidthYAxis,\n      hasScrollXAxis,\n      hasScrolledXAxis,\n      hasScrolledToEndXAxis,\n      scrollProgressXAxis,\n      scrollbarWidthXAxis,\n      scrollableEl,\n      setScrollableEl,\n      containerEl,\n      setContainerEl\n    }),\n    [\n      hasScrollYAxis,\n      hasScrolledYAxis,\n      hasScrolledToEndYAxis,\n      scrollProgressYAxis,\n      scrollbarWidthYAxis,\n      hasScrollXAxis,\n      hasScrolledXAxis,\n      hasScrolledToEndXAxis,\n      scrollProgressXAxis,\n      scrollbarWidthXAxis,\n      scrollableEl,\n      setScrollableEl,\n      containerEl,\n      setContainerEl\n    ]\n  )\n\n  return <ScrollableContainerContext.Provider value={value}>{children}</ScrollableContainerContext.Provider>\n}\n"],"names":["ScrollableContainerContext","React","ScrollableContainerProvider","children","scrollableEl","setScrollableEl","useCallbackRefState","containerEl","setContainerEl","hasScrollYAxis","setHasScrollYAxis","hasScrollXAxis","setHasScrollXAxis","scrollbarWidthYAxis","setScrollbarWidthYAxis","scrollbarWidthXAxis","setScrollbarWidthXAxis","useResizeObserver","hasScrolledYAxis","hasScrolledToEndYAxis","hasScrolledXAxis","hasScrolledToEndXAxis","setScrollState","scrollProgressYAxis","scrollProgressXAxis","updateScrollState","value"],"mappings":"2LAuBaA,EAA6BC,EAAM,cAA2C,CACzF,YAAa,GACb,eAAgB,GAChB,iBAAkB,GAClB,sBAAuB,GACvB,eAAgB,GAChB,iBAAkB,GAClB,sBAAuB,GACvB,oBAAqB,EACrB,oBAAqB,EACrB,oBAAqB,EACrB,oBAAqB,CACvB,CAAC,EAEYC,EAA8B,CAAC,CAAE,SAAAC,CAAS,IAAqC,CAC1F,KAAM,CAACC,EAAcC,CAAe,EAAIC,EAClC,EAAA,CAACC,EAAaC,CAAc,EAAIF,EAAoB,EAEpD,CAACG,EAAgBC,CAAiB,EAAIT,EAAM,SAAkB,EAAK,EACnE,CAACU,EAAgBC,CAAiB,EAAIX,EAAM,SAAkB,EAAK,EACnE,CAACY,EAAqBC,CAAsB,EAAIb,EAAM,SAAiB,CAAC,EACxE,CAACc,EAAqBC,CAAsB,EAAIf,EAAM,SAAiB,CAAC,EAE9EgB,EAAkB,CAChB,MAAO,EACP,SAAU,CAACV,EAAaH,CAAY,EACpC,SAAU,IAAM,CACV,CAACA,GACD,CAACG,IACLG,EAAkBN,EAAa,aAAeA,EAAa,YAAY,EACvEQ,EAAkBR,EAAa,YAAcA,EAAa,WAAW,EACrEU,EAAuBP,EAAY,aAAeH,EAAa,YAAY,EAC3EY,EAAuBT,EAAY,YAAcH,EAAa,WAAW,EAC3E,CACF,CAAC,EAED,KAAM,CAAC,CAAE,iBAAAc,EAAkB,sBAAAC,EAAuB,iBAAAC,EAAkB,sBAAAC,CAAsB,EAAGC,CAAc,EAAIrB,EAAM,SAKlH,CAAE,iBAAkB,GAAO,sBAAuB,GAAO,iBAAkB,GAAO,sBAAuB,EAAM,CAAC,EAG7GsB,GAAuB,IACvB,CAACnB,GACDA,EAAa,cAAgBA,EAAa,aAAqB,EAC5DA,EAAa,WAAaA,EAAa,aAAeA,EAAa,iBAGtEoB,GAAuB,IACvB,CAACpB,GACDA,EAAa,aAAeA,EAAa,YAAoB,EAC1DA,EAAa,YAAcA,EAAa,YAAcA,EAAa,cACzE,EAEHH,EAAM,UAAU,IAAM,CACpB,GAAI,CAACG,EAAc,OACnB,MAAMqB,EAAoB,IAAM,CAC9BH,EAAe,CACb,iBAAkB,CAAC,CAAClB,EAAa,UACjC,sBACE,KAAK,IAAIA,EAAa,aAAeA,EAAa,aAAeA,EAAa,SAAS,EACvF,EACF,iBAAkB,CAAC,CAACA,EAAa,WACjC,sBACE,KAAK,IAAIA,EAAa,YAAcA,EAAa,YAAcA,EAAa,UAAU,EACtF,CACJ,CAAC,CACH,EACA,OAAAqB,EAAkB,EAElBrB,EAAa,iBAAiB,SAAUqB,CAAiB,EAElD,IAAM,CACXrB,EAAa,oBAAoB,SAAUqB,CAAiB,CAC9D,CACF,EAAG,CAACrB,CAAY,CAAC,EAEjB,MAAMsB,EAAQzB,EAAM,QAClB,KAAO,CACL,YAAa,GACb,eAAAQ,EACA,iBAAAS,EACA,sBAAAC,EACA,oBAAAI,EACA,oBAAAV,EACA,eAAAF,EACA,iBAAAS,EACA,sBAAAC,EACA,oBAAAG,EACA,oBAAAT,EACA,aAAAX,EACA,gBAAAC,EACA,YAAAE,EACA,eAAAC,CACF,GACA,CACEC,EACAS,EACAC,EACAI,EACAV,EACAF,EACAS,EACAC,EACAG,EACAT,EACAX,EACAC,EACAE,EACAC,CACF,CACF,EAEA,OAAOP,EAAA,cAACD,EAA2B,SAA3B,CAAoC,MAAO0B,CAAAA,EAAQvB,CAAS,CACtE"}
+{"version":3,"file":"ScrollableContainer.context.js","sources":["../../../src/components/scrollable-container/ScrollableContainer.context.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { useResizeObserver } from '~/utilities/hooks/useResizeObserver'\n\nexport interface IScrollableContainerProviderProps {\n  scrollableEl: HTMLElement | null\n  containerEl: HTMLElement | null\n  children: React.ReactNode\n}\n\nexport interface IScrollableContainerContext {\n  hasProvider: boolean\n  scrollableContainer?: HTMLDivElement | null\n  hasScrollYAxis: boolean\n  hasScrolledYAxis: boolean\n  hasScrolledToEndYAxis: boolean\n  hasScrollXAxis: boolean\n  hasScrolledXAxis: boolean\n  hasScrolledToEndXAxis: boolean\n  scrollProgressYAxis: number\n  scrollbarWidthYAxis: number\n  scrollProgressXAxis: number\n  scrollbarWidthXAxis: number\n  scrollableEl?: HTMLElement | null\n  containerEl?: HTMLElement | null\n}\n\nexport const ScrollableContainerContext = React.createContext<IScrollableContainerContext>({\n  hasProvider: false,\n  hasScrollYAxis: false,\n  hasScrolledYAxis: false,\n  hasScrolledToEndYAxis: false,\n  hasScrollXAxis: false,\n  hasScrolledXAxis: false,\n  hasScrolledToEndXAxis: false,\n  scrollProgressYAxis: 0,\n  scrollbarWidthYAxis: 0,\n  scrollProgressXAxis: 0,\n  scrollbarWidthXAxis: 0\n})\n\nexport const ScrollableContainerProvider = ({ scrollableEl, containerEl, children }: IScrollableContainerProviderProps) => {\n  const [hasScrollYAxis, setHasScrollYAxis] = React.useState<boolean>(false)\n  const [hasScrollXAxis, setHasScrollXAxis] = React.useState<boolean>(false)\n  const [scrollbarWidthYAxis, setScrollbarWidthYAxis] = React.useState<number>(0)\n  const [scrollbarWidthXAxis, setScrollbarWidthXAxis] = React.useState<number>(0)\n  const [{ hasScrolledYAxis, hasScrolledToEndYAxis, hasScrolledXAxis, hasScrolledToEndXAxis }, setScrollState] = React.useState<{\n    hasScrolledYAxis: boolean\n    hasScrolledToEndYAxis: boolean\n    hasScrolledXAxis: boolean\n    hasScrolledToEndXAxis: boolean\n  }>({ hasScrolledYAxis: false, hasScrolledToEndYAxis: false, hasScrolledXAxis: false, hasScrolledToEndXAxis: false })\n\n  const updateScrollState = React.useCallback(() => {\n    if (!scrollableEl) return\n    setScrollState({\n      hasScrolledYAxis: !!scrollableEl.scrollTop,\n      hasScrolledToEndYAxis:\n        Math.abs(scrollableEl.scrollHeight - scrollableEl.clientHeight - scrollableEl.scrollTop) <\n        1,\n      hasScrolledXAxis: !!scrollableEl.scrollLeft,\n      hasScrolledToEndXAxis:\n        Math.abs(scrollableEl.scrollWidth - scrollableEl.clientWidth - scrollableEl.scrollLeft) <\n        1\n    })\n  }, [scrollableEl])\n\n  useResizeObserver({\n    delay: 0,\n    elements: [containerEl, scrollableEl],\n    onResize: () => {\n      if (!scrollableEl) return\n      if (!containerEl) return\n      setHasScrollYAxis(scrollableEl.scrollHeight > scrollableEl.clientHeight)\n      setHasScrollXAxis(scrollableEl.scrollWidth > scrollableEl.clientWidth)\n      setScrollbarWidthYAxis(containerEl.clientHeight - scrollableEl.clientHeight)\n      setScrollbarWidthXAxis(containerEl.clientWidth - scrollableEl.clientWidth)\n      updateScrollState()\n    }\n  })\n\n\n  /** A number between 0-1 for the relative amount of pixels scrolled */\n  const scrollProgressYAxis = (() => {\n    if (!scrollableEl) return 0\n    if (scrollableEl.scrollHeight <= scrollableEl.clientHeight) return 0\n    return scrollableEl.scrollTop / (scrollableEl.scrollHeight - scrollableEl.clientHeight)\n  })()\n\n  const scrollProgressXAxis = (() => {\n    if (!scrollableEl) return 0\n    if (scrollableEl.scrollWidth <= scrollableEl.clientWidth) return 0\n    return scrollableEl.scrollLeft / (scrollableEl.scrollWidth - scrollableEl.clientWidth)\n  })()\n\n  React.useEffect(() => {\n    if (!scrollableEl) return\n    updateScrollState()\n\n    scrollableEl.addEventListener('scroll', updateScrollState)\n\n    return () => {\n      scrollableEl.removeEventListener('scroll', updateScrollState)\n    }\n  }, [scrollableEl, updateScrollState])\n\n  const value = React.useMemo<IScrollableContainerContext>(\n    () => ({\n      hasProvider: true,\n      hasScrollYAxis,\n      hasScrolledYAxis,\n      hasScrolledToEndYAxis,\n      scrollProgressYAxis,\n      scrollbarWidthYAxis,\n      hasScrollXAxis,\n      hasScrolledXAxis,\n      hasScrolledToEndXAxis,\n      scrollProgressXAxis,\n      scrollbarWidthXAxis,\n      scrollableEl,\n      containerEl\n    }),\n    [\n      hasScrollYAxis,\n      hasScrolledYAxis,\n      hasScrolledToEndYAxis,\n      scrollProgressYAxis,\n      scrollbarWidthYAxis,\n      hasScrollXAxis,\n      hasScrolledXAxis,\n      hasScrolledToEndXAxis,\n      scrollProgressXAxis,\n      scrollbarWidthXAxis,\n      scrollableEl,\n      containerEl,\n    ]\n  )\n\n  return <ScrollableContainerContext.Provider value={value}>{children}</ScrollableContainerContext.Provider>\n}\n"],"names":["ScrollableContainerContext","React","ScrollableContainerProvider","scrollableEl","containerEl","children","hasScrollYAxis","setHasScrollYAxis","hasScrollXAxis","setHasScrollXAxis","scrollbarWidthYAxis","setScrollbarWidthYAxis","scrollbarWidthXAxis","setScrollbarWidthXAxis","hasScrolledYAxis","hasScrolledToEndYAxis","hasScrolledXAxis","hasScrolledToEndXAxis","setScrollState","updateScrollState","useResizeObserver","scrollProgressYAxis","scrollProgressXAxis","value"],"mappings":"uGA2Ba,MAAAA,EAA6BC,EAAM,cAA2C,CACzF,YAAa,GACb,eAAgB,GAChB,iBAAkB,GAClB,sBAAuB,GACvB,eAAgB,GAChB,iBAAkB,GAClB,sBAAuB,GACvB,oBAAqB,EACrB,oBAAqB,EACrB,oBAAqB,EACrB,oBAAqB,CACvB,CAAC,EAEYC,EAA8B,CAAC,CAAE,aAAAC,EAAc,YAAAC,EAAa,SAAAC,CAAS,IAAyC,CACzH,KAAM,CAACC,EAAgBC,CAAiB,EAAIN,EAAM,SAAkB,EAAK,EACnE,CAACO,EAAgBC,CAAiB,EAAIR,EAAM,SAAkB,EAAK,EACnE,CAACS,EAAqBC,CAAsB,EAAIV,EAAM,SAAiB,CAAC,EACxE,CAACW,EAAqBC,CAAsB,EAAIZ,EAAM,SAAiB,CAAC,EACxE,CAAC,CAAE,iBAAAa,EAAkB,sBAAAC,EAAuB,iBAAAC,EAAkB,sBAAAC,CAAsB,EAAGC,CAAc,EAAIjB,EAAM,SAKlH,CAAE,iBAAkB,GAAO,sBAAuB,GAAO,iBAAkB,GAAO,sBAAuB,EAAM,CAAC,EAE7GkB,EAAoBlB,EAAM,YAAY,IAAM,CAC5C,CAACE,GACLe,EAAe,CACb,iBAAkB,CAAC,CAACf,EAAa,UACjC,sBACE,KAAK,IAAIA,EAAa,aAAeA,EAAa,aAAeA,EAAa,SAAS,EACvF,EACF,iBAAkB,CAAC,CAACA,EAAa,WACjC,sBACE,KAAK,IAAIA,EAAa,YAAcA,EAAa,YAAcA,EAAa,UAAU,EACtF,CACJ,CAAC,CACH,EAAG,CAACA,CAAY,CAAC,EAEjBiB,EAAkB,CAChB,MAAO,EACP,SAAU,CAAChB,EAAaD,CAAY,EACpC,SAAU,IAAM,CACV,CAACA,GACD,CAACC,IACLG,EAAkBJ,EAAa,aAAeA,EAAa,YAAY,EACvEM,EAAkBN,EAAa,YAAcA,EAAa,WAAW,EACrEQ,EAAuBP,EAAY,aAAeD,EAAa,YAAY,EAC3EU,EAAuBT,EAAY,YAAcD,EAAa,WAAW,EACzEgB,EAAkB,EACpB,CACF,CAAC,EAID,MAAME,GAAuB,IACvB,CAAClB,GACDA,EAAa,cAAgBA,EAAa,aAAqB,EAC5DA,EAAa,WAAaA,EAAa,aAAeA,EAAa,iBAGtEmB,GAAuB,IACvB,CAACnB,GACDA,EAAa,aAAeA,EAAa,YAAoB,EAC1DA,EAAa,YAAcA,EAAa,YAAcA,EAAa,gBAG5EF,EAAM,UAAU,IAAM,CACpB,GAAKE,EACL,OAAAgB,EAAAA,EAEAhB,EAAa,iBAAiB,SAAUgB,CAAiB,EAElD,IAAM,CACXhB,EAAa,oBAAoB,SAAUgB,CAAiB,CAC9D,CACF,EAAG,CAAChB,EAAcgB,CAAiB,CAAC,EAEpC,MAAMI,EAAQtB,EAAM,QAClB,KAAO,CACL,YAAa,GACb,eAAAK,EACA,iBAAAQ,EACA,sBAAAC,EACA,oBAAAM,EACA,oBAAAX,EACA,eAAAF,EACA,iBAAAQ,EACA,sBAAAC,EACA,oBAAAK,EACA,oBAAAV,EACA,aAAAT,EACA,YAAAC,CACF,GACA,CACEE,EACAQ,EACAC,EACAM,EACAX,EACAF,EACAQ,EACAC,EACAK,EACAV,EACAT,EACAC,CACF,CACF,EAEA,OAAOH,EAAA,cAACD,EAA2B,SAA3B,CAAoC,MAAOuB,CAAAA,EAAQlB,CAAS,CACtE"}

package/dist/components/scrollable-container/ScrollableContainer.js

@@ -1,2 +1,2 @@
-import{styled as t}from"@atom-learning/stitches-react";import*as e from"react";import{useCallbackRefState as d}from"../../utilities/hooks/useCallbackRef.js";import{Box as l}from"../box/Box.js";import{ScrollableContainerShadow as p}from"./ScrollableContainerShadow.js";import{useScrollableContainer as b}from"./useScrollableContainer.js";const C=t(l,{position:"relative",overflow:"hidden"}),S=t(l,{width:"100%",height:"100%",overflow:"auto"}),a=e.forwardRef(({children:n,scrollContainerCss:i,...s},c)=>{const{setScrollableEl:m,setContainerEl:r}=b(),[o,f]=d();return e.useEffect(()=>r==null?void 0:r(o),[o,r]),e.useImperativeHandle(c,()=>o,[o]),e.createElement(C,{...s,ref:f,"data-testid":"scrollable-container"},e.createElement(S,{ref:m,css:i},n))}),h=Object.assign(a,{Shadow:p});export{h as ScrollableContainer,a as ScrollableContainerComponent};
+import{styled as r}from"@atom-learning/stitches-react";import*as e from"react";import{useCallbackRefState as t}from"../../utilities/hooks/useCallbackRef.js";import{Box as l}from"../box/Box.js";import{ScrollableContainerShadow as p}from"./ScrollableContainerShadow.js";import{ScrollableContainerProvider as b}from"./ScrollableContainer.context.js";const C=r(l,{position:"relative",overflow:"hidden"}),h=r(l,{width:"100%",height:"100%",overflow:"auto"}),a=e.forwardRef(({children:n,scrollContainerCss:i,...c},m)=>{const[o,s]=t(),[d,f]=t();return e.useImperativeHandle(m,()=>o,[o]),e.createElement(b,{scrollableEl:d,containerEl:o},e.createElement(C,{...c,ref:s,"data-testid":"scrollable-container"},e.createElement(h,{ref:f,css:i},n)))}),S=Object.assign(a,{Shadow:p});export{S as ScrollableContainer,a as ScrollableContainerComponent};
 //# sourceMappingURL=ScrollableContainer.js.map

package/dist/components/scrollable-container/ScrollableContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollableContainer.js","sources":["../../../src/components/scrollable-container/ScrollableContainer.tsx"],"sourcesContent":["import { styled } from '@atom-learning/stitches-react'\nimport * as React from 'react'\n\nimport { useCallbackRefState } from '~/utilities/hooks/useCallbackRef'\n\nimport { Box } from '../box'\nimport { ScrollableContainerShadow } from './ScrollableContainerShadow'\nimport { useScrollableContainer } from './useScrollableContainer'\n\nconst ContainerBox = styled(Box, {\n  position: 'relative',\n  overflow: 'hidden'\n})\n\nconst ScrollableBox = styled(Box, {\n  width: '100%',\n  height: '100%',\n  overflow: 'auto'\n})\n\nexport const ScrollableContainerComponent = React.forwardRef<HTMLDivElement, React.ComponentProps<typeof ContainerBox> & {\n  scrollContainerCss?: React.ComponentProps<typeof ScrollableBox>['css']\n}>(({ children, scrollContainerCss, ...rest }, ref\n) => {\n  const { setScrollableEl, setContainerEl: setContainerElContext } = useScrollableContainer()\n  const [containerEl, setContainerEl] = useCallbackRefState()\n  React.useEffect(() => setContainerElContext?.(containerEl), [containerEl, setContainerElContext])\n\n  React.useImperativeHandle(ref, () => containerEl as HTMLDivElement, [containerEl])\n\n  return (\n    <ContainerBox {...rest} ref={setContainerEl} data-testid=\"scrollable-container\">\n      <ScrollableBox ref={setScrollableEl} css={scrollContainerCss}>\n        {children}\n      </ScrollableBox>\n    </ContainerBox>\n  )\n})\n\nexport const ScrollableContainer = Object.assign(ScrollableContainerComponent, {\n  Shadow: ScrollableContainerShadow\n})\n"],"names":["ContainerBox","styled","Box","ScrollableBox","ScrollableContainerComponent","React","children","scrollContainerCss","rest","ref","setScrollableEl","setContainerElContext","useScrollableContainer","containerEl","setContainerEl","useCallbackRefState","ScrollableContainer","ScrollableContainerShadow"],"mappings":"iVASA,MAAMA,EAAeC,EAAOC,EAAK,CAC/B,SAAU,WACV,SAAU,QACZ,CAAC,EAEKC,EAAgBF,EAAOC,EAAK,CAChC,MAAO,OACP,OAAQ,OACR,SAAU,MACZ,CAAC,EAEYE,EAA+BC,EAAM,WAE/C,CAAC,CAAE,SAAAC,EAAU,mBAAAC,KAAuBC,CAAK,EAAGC,IAC1C,CACH,KAAM,CAAE,gBAAAC,EAAiB,eAAgBC,CAAsB,EAAIC,EAC7D,EAAA,CAACC,EAAaC,CAAc,EAAIC,EACtC,EAAA,OAAAV,EAAM,UAAU,IAAMM,GAAA,KAAAA,OAAAA,EAAwBE,CAAc,EAAA,CAACA,EAAaF,CAAqB,CAAC,EAEhGN,EAAM,oBAAoBI,EAAK,IAAMI,EAA+B,CAACA,CAAW,CAAC,EAG/ER,EAAA,cAACL,EAAA,CAAc,GAAGQ,EAAM,IAAKM,EAAgB,cAAY,sBACvDT,EAAAA,EAAA,cAACF,EAAA,CAAc,IAAKO,EAAiB,IAAKH,CACvCD,EAAAA,CACH,CACF,CAEJ,CAAC,EAEYU,EAAsB,OAAO,OAAOZ,EAA8B,CAC7E,OAAQa,CACV,CAAC"}
+{"version":3,"file":"ScrollableContainer.js","sources":["../../../src/components/scrollable-container/ScrollableContainer.tsx"],"sourcesContent":["import { styled } from '@atom-learning/stitches-react'\nimport * as React from 'react'\n\nimport { useCallbackRefState } from '~/utilities/hooks/useCallbackRef'\n\nimport { Box } from '../box'\nimport { ScrollableContainerShadow } from './ScrollableContainerShadow'\nimport { ScrollableContainerProvider } from './ScrollableContainer.context'\n\nconst ContainerBox = styled(Box, {\n  position: 'relative',\n  overflow: 'hidden'\n})\n\nconst ScrollableBox = styled(Box, {\n  width: '100%',\n  height: '100%',\n  overflow: 'auto'\n})\n\nexport const ScrollableContainerComponent = React.forwardRef<HTMLDivElement, React.ComponentProps<typeof ContainerBox> & {\n  scrollContainerCss?: React.ComponentProps<typeof ScrollableBox>['css']\n}>(({ children, scrollContainerCss, ...rest }, ref\n) => {\n  const [containerEl, setContainerEl] = useCallbackRefState()\n  const [scrollableEl, setScrollableEl] = useCallbackRefState()\n\n  React.useImperativeHandle(ref, () => containerEl as HTMLDivElement, [containerEl])\n\n  return (\n    <ScrollableContainerProvider scrollableEl={scrollableEl} containerEl={containerEl}>\n      <ContainerBox {...rest} ref={setContainerEl} data-testid=\"scrollable-container\">\n        <ScrollableBox ref={setScrollableEl} css={scrollContainerCss}>\n          {children}\n        </ScrollableBox>\n      </ContainerBox>\n    </ScrollableContainerProvider>\n  )\n})\n\nexport const ScrollableContainer = Object.assign(ScrollableContainerComponent, {\n  Shadow: ScrollableContainerShadow\n})\n"],"names":["ContainerBox","styled","Box","ScrollableBox","ScrollableContainerComponent","React","children","scrollContainerCss","rest","ref","containerEl","setContainerEl","useCallbackRefState","scrollableEl","setScrollableEl","ScrollableContainerProvider","ScrollableContainer","ScrollableContainerShadow"],"mappings":"2VASA,MAAMA,EAAeC,EAAOC,EAAK,CAC/B,SAAU,WACV,SAAU,QACZ,CAAC,EAEKC,EAAgBF,EAAOC,EAAK,CAChC,MAAO,OACP,OAAQ,OACR,SAAU,MACZ,CAAC,EAEYE,EAA+BC,EAAM,WAE/C,CAAC,CAAE,SAAAC,EAAU,mBAAAC,KAAuBC,CAAK,EAAGC,IAC1C,CACH,KAAM,CAACC,EAAaC,CAAc,EAAIC,EAChC,EAAA,CAACC,EAAcC,CAAe,EAAIF,EAAAA,EAExC,OAAAP,EAAM,oBAAoBI,EAAK,IAAMC,EAA+B,CAACA,CAAW,CAAC,EAG/EL,EAAA,cAACU,EAAA,CAA4B,aAAcF,EAAc,YAAaH,CACpEL,EAAAA,EAAA,cAACL,EAAA,CAAc,GAAGQ,EAAM,IAAKG,EAAgB,cAAY,sBACvDN,EAAAA,EAAA,cAACF,EAAA,CAAc,IAAKW,EAAiB,IAAKP,CACvCD,EAAAA,CACH,CACF,CACF,CAEJ,CAAC,EAEYU,EAAsB,OAAO,OAAOZ,EAA8B,CAC7E,OAAQa,CACV,CAAC"}

package/dist/components/scrollable-container/useScrollableContainer.js

@@ -1,2 +1,2 @@
-import*as o from"react";import{ScrollableContainerContext as r}from"./ScrollableContainer.context.js";const t=()=>{const e=o.useContext(r);return e.hasProvider||console.warn("Ensure that you wrap components with the ScrollableContainerProvider component. Scroll related features may not work as expected."),e};export{t as useScrollableContainer};
+import*as o from"react";import{ScrollableContainerContext as e}from"./ScrollableContainer.context.js";const t=()=>o.useContext(e);export{t as useScrollableContainer};
 //# sourceMappingURL=useScrollableContainer.js.map

package/dist/components/scrollable-container/useScrollableContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"useScrollableContainer.js","sources":["../../../src/components/scrollable-container/useScrollableContainer.ts"],"sourcesContent":["import * as React from 'react'\nimport { ScrollableContainerContext, type IScrollableContainerContext } from './ScrollableContainer.context'\n\nexport const useScrollableContainer = (): IScrollableContainerContext => {\n  const context = React.useContext(ScrollableContainerContext)\n\n  if (!context.hasProvider) {\n    console.warn('Ensure that you wrap components with the ScrollableContainerProvider component. Scroll related features may not work as expected.')\n  }\n\n  return context\n}\n\n"],"names":["useScrollableContainer","context","React","ScrollableContainerContext"],"mappings":"sGAGO,MAAMA,EAAyB,IAAmC,CACvE,MAAMC,EAAUC,EAAM,WAAWC,CAA0B,EAE3D,OAAKF,EAAQ,aACX,QAAQ,KAAK,mIAAmI,EAG3IA,CACT"}
+{"version":3,"file":"useScrollableContainer.js","sources":["../../../src/components/scrollable-container/useScrollableContainer.ts"],"sourcesContent":["import * as React from 'react'\nimport { ScrollableContainerContext, type IScrollableContainerContext } from './ScrollableContainer.context'\n\nexport const useScrollableContainer = (): IScrollableContainerContext => {\n  const context = React.useContext(ScrollableContainerContext)\n  return context\n}\n\n"],"names":["useScrollableContainer","React","ScrollableContainerContext"],"mappings":"sGAGO,MAAMA,EAAyB,IACpBC,EAAM,WAAWC,CAA0B"}

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

@@ -2,7 +2,6 @@ import * as React from 'react';
 import { TableScrollableContainer } from './TableScrollableContainer';
 declare const StyledTable: import("@atom-learning/stitches-react/types/styled-component").StyledComponent<"table", {
     size?: "md" | "lg" | "xl" | undefined;
-    corners?: "round" | "square" | undefined;
 }, {
     sm: string;
     md: string;
@@ -369,8 +368,13 @@ declare const StyledTable: import("@atom-learning/stitches-react/types/styled-co
 }>>;
 type TableProps = React.ComponentProps<typeof StyledTable> & {
     scrollable?: boolean;
-} & React.ComponentProps<typeof TableScrollableContainer>;
-export declare const Table: (({ size, corners, scrollable, numberOfStickyColumns, numberOfStickyRows, scrollContainerCss, css, ...rest }: TableProps) => React.JSX.Element) & {
+} & React.ComponentProps<typeof TableScrollableContainer> & {
+    corners: 'round' | 'square';
+};
+export declare const Table: {
+    ({ size, corners, scrollable, numberOfStickyColumns, numberOfStickyRows, scrollContainerCss, css, ...rest }: TableProps): React.JSX.Element;
+    displayName: string;
+} & {
     Body: {
         ({ striped, ...rest }: Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref"> & {
             ref?: ((instance: HTMLTableSectionElement | null) => void) | React.RefObject<HTMLTableSectionElement> | null | undefined;

package/dist/components/table/Table.js

@@ -1,2 +1,2 @@
-import*as t from"react";import{styled as b}from"../../stitches.js";import{TableBody as f}from"./TableBody.js";import{TableCell as e}from"./TableCell.js";import{TableFooter as p}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 h,TableRow as u}from"./TableRow.js";import{TableScrollableContainer as y}from"./TableScrollableContainer.js";const m=b("table",{borderCollapse:"separate",borderSpacing:0,fontFamily:"$body",color:"$grey800",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"}},[`${h}:last-child`]:{[`${e}:first-child`]:{borderBottomLeftRadius:"$0"},[`${e}:last-child`]:{borderBottomRightRadius:"$0"}}},square:{}}}}),g=({size:l="md",corners:s="round",scrollable:d,numberOfStickyColumns:n,numberOfStickyRows:$,scrollContainerCss:c,css:i,...a})=>d?t.createElement(y,{numberOfStickyColumns:n,numberOfStickyRows:$,scrollContainerCss:c,css:i},t.createElement(m,{size:l,corners:s,...a})):t.createElement(m,{size:l,corners:s,css:i,...a}),R=Object.assign(g,{Body:f,Cell:e,Footer:p,FooterCell:r,Header:C,HeaderCell:o,Row:u});export{R as Table};
+import*as l from"react";import{styled as f}from"../../stitches.js";import{TableBody as C}from"./TableBody.js";import{TableCell as e}from"./TableCell.js";import{TableFooter as u}from"./TableFooter.js";import{TableFooterCell as o}from"./TableFooterCell.js";import{TableHeader as y}from"./TableHeader.js";import{TableHeaderCell as r}from"./TableHeaderCell.js";import{TableRow as g}from"./TableRow.js";import{TableScrollableContainer as T}from"./TableScrollableContainer.js";const m=f("table",{borderCollapse:"separate",borderSpacing:0,fontFamily:"$body",color:"$grey800",fontSize:"$sm",width:"100%",variants:{size:{md:{[`${e}, ${r}, ${o}`]:{height:"$4",padding:"$1 $3"}},lg:{[`${e}, ${r}, ${o}`]:{height:"$5",padding:"$2 $3"}},xl:{[`${e}, ${r}, ${o}`]:{height:"$6",padding:"$4 $3"}}}}}),n=({size:t="md",corners:d="round",scrollable:b,numberOfStickyColumns:$,numberOfStickyRows:c,scrollContainerCss:p,css:a,...i})=>{const s=d==="round";return b?l.createElement(T,{numberOfStickyColumns:$,numberOfStickyRows:c,scrollContainerCss:p,css:{borderRadius:s?"$0":0,...a}},l.createElement(m,{size:t,...i})):l.createElement(m,{size:t,css:{borderRadius:s?"$0":0,overflow:"hidden",...a},...i})},h=Object.assign(n,{Body:C,Cell:e,Footer:u,FooterCell:o,Header:y,HeaderCell:r,Row:g});n.displayName="Table";export{h 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 { 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 { TableScrollableContainer } from './TableScrollableContainer'\n\nconst StyledTable = styled('table', {\n  borderCollapse: 'separate',\n  borderSpacing: 0,\n  fontFamily: '$body',\n  color: '$grey800',\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  scrollable?: boolean\n} & React.ComponentProps<typeof TableScrollableContainer>\n\nconst TableComponent = ({\n  size = 'md',\n  corners = 'round',\n  scrollable,\n  numberOfStickyColumns,\n  numberOfStickyRows,\n  scrollContainerCss,\n  css,\n  ...rest\n}: TableProps) => {\n  if (scrollable) {\n    return (\n      <TableScrollableContainer\n        numberOfStickyColumns={numberOfStickyColumns}\n        numberOfStickyRows={numberOfStickyRows}\n        scrollContainerCss={scrollContainerCss}\n        css={css}\n      >\n        <StyledTable size={size} corners={corners} {...rest} />\n      </TableScrollableContainer>\n    )\n  }\n\n  return <StyledTable size={size} corners={corners} css={css} {...rest} />\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})\n\n// TableComponent.displayName = 'Table'\n"],"names":["StyledTable","styled","TableCell","TableHeaderCell","TableFooterCell","StyledRow","TableComponent","size","corners","scrollable","numberOfStickyColumns","numberOfStickyRows","scrollContainerCss","css","rest","React","TableScrollableContainer","Table","TableBody","TableFooter","TableHeader","TableRow"],"mappings":"seAaA,MAAMA,EAAcC,EAAO,QAAS,CAClC,eAAgB,WAChB,cAAe,EACf,WAAY,QACZ,MAAO,WACP,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,CACV,CAAA,CACF,CACF,CAAC,EAMKI,EAAiB,CAAC,CACtB,KAAAC,EAAO,KACP,QAAAC,EAAU,QACV,WAAAC,EACA,sBAAAC,EACA,mBAAAC,EACA,mBAAAC,EACA,IAAAC,KACGC,CACL,IACML,EAEAM,EAAA,cAACC,EAAA,CACC,sBAAuBN,EACvB,mBAAoBC,EACpB,mBAAoBC,EACpB,IAAKC,CAAAA,EAELE,EAAA,cAACf,EAAA,CAAY,KAAMO,EAAM,QAASC,EAAU,GAAGM,CAAM,CAAA,CACvD,EAIGC,EAAA,cAACf,EAAA,CAAY,KAAMO,EAAM,QAASC,EAAS,IAAKK,EAAM,GAAGC,CAAAA,CAAM,EAG3DG,EAAQ,OAAO,OAAOX,EAAgB,CACjD,KAAMY,EACN,KAAMhB,EACN,OAAQiB,EACR,WAAYf,EACZ,OAAQgB,EACR,WAAYjB,EACZ,IAAKkB,CACP,CAAC"}
+{"version":3,"file":"Table.js","sources":["../../../src/components/table/Table.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { 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 { TableRow } from './TableRow'\nimport { TableScrollableContainer } from './TableScrollableContainer'\n\nconst StyledTable = styled('table', {\n  borderCollapse: 'separate',\n  borderSpacing: 0,\n  fontFamily: '$body',\n  color: '$grey800',\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  }\n})\n\ntype TableProps = React.ComponentProps<typeof StyledTable> & {\n  scrollable?: boolean\n} & React.ComponentProps<typeof TableScrollableContainer> & { corners: 'round' | 'square' }\n\nconst TableComponent = (\n  {\n    size = 'md',\n    corners = 'round',\n    scrollable,\n    numberOfStickyColumns,\n    numberOfStickyRows,\n    scrollContainerCss,\n    css,\n    ...rest\n  }: TableProps\n) => {\n  const hasRoundedCorners = corners === 'round'\n\n  if (scrollable) {\n    return (\n      <TableScrollableContainer\n        numberOfStickyColumns={numberOfStickyColumns}\n        numberOfStickyRows={numberOfStickyRows}\n        scrollContainerCss={scrollContainerCss}\n        css={{ borderRadius: hasRoundedCorners ? '$0' : 0, ...css }}\n      >\n        <StyledTable size={size} {...rest} />\n      </TableScrollableContainer>\n    )\n  }\n\n  return (\n    <StyledTable\n      size={size}\n      css={{ borderRadius: hasRoundedCorners ? '$0' : 0, overflow: 'hidden', ...css }}\n      {...rest}\n    />\n  )\n}\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})\n\nTableComponent.displayName = 'Table'\n"],"names":["StyledTable","styled","TableCell","TableHeaderCell","TableFooterCell","TableComponent","size","corners","scrollable","numberOfStickyColumns","numberOfStickyRows","scrollContainerCss","css","rest","hasRoundedCorners","React","TableScrollableContainer","Table","TableBody","TableFooter","TableHeader","TableRow"],"mappings":"udAaA,MAAMA,EAAcC,EAAO,QAAS,CAClC,eAAgB,WAChB,cAAe,EACf,WAAY,QACZ,MAAO,WACP,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,CACF,CACF,CAAC,EAMKC,EAAiB,CACrB,CACE,KAAAC,EAAO,KACP,QAAAC,EAAU,QACV,WAAAC,EACA,sBAAAC,EACA,mBAAAC,EACA,mBAAAC,EACA,IAAAC,KACGC,CACL,IACG,CACH,MAAMC,EAAoBP,IAAY,QAEtC,OAAIC,EAEAO,EAAA,cAACC,EAAA,CACC,sBAAuBP,EACvB,mBAAoBC,EACpB,mBAAoBC,EACpB,IAAK,CAAE,aAAcG,EAAoB,KAAO,EAAG,GAAGF,CAAI,CAE1DG,EAAAA,EAAA,cAACf,EAAA,CAAY,KAAMM,EAAO,GAAGO,CAAM,CAAA,CACrC,EAKFE,EAAA,cAACf,EAAA,CACC,KAAMM,EACN,IAAK,CAAE,aAAcQ,EAAoB,KAAO,EAAG,SAAU,SAAU,GAAGF,CAAI,EAC7E,GAAGC,CAAAA,CACN,CAEJ,EAGaI,EAAQ,OAAO,OAAOZ,EAAgB,CACjD,KAAMa,EACN,KAAMhB,EACN,OAAQiB,EACR,WAAYf,EACZ,OAAQgB,EACR,WAAYjB,EACZ,IAAKkB,CACP,CAAC,EAEDhB,EAAe,YAAc"}

package/dist/components/table/TableScrollableContainer.js

@@ -1,2 +1,2 @@
-import*as e from"react";import{useCallbackRefState as u}from"../../utilities/hooks/useCallbackRef.js";import{ScrollableContainer as t}from"../scrollable-container/ScrollableContainer.js";import"../scrollable-container/ScrollableContainer.context.js";import{useSticky as S}from"./useSticky.js";const o=e.forwardRef(({numberOfStickyColumns:s=0,numberOfStickyRows:l=0,scrollContainerCss:n,css:i,children:a,...c},m)=>{const[r,f]=u();e.useImperativeHandle(m,()=>r,[r]);const{stickyCss:C,stickyColumnsWidth:p,stickyRowsHeight:b}=S({numberOfStickyColumns:s,numberOfStickyRows:l,wrapperEl:r});return e.createElement(t,{ref:f,scrollContainerCss:n,css:{...C,...i},...c},a,e.createElement(t.Shadow,{inset:{left:p,top:b},css:{zIndex:2}}))});o.displayName="TableScrollableContainer";export{o as TableScrollableContainer};
+import*as e from"react";import{useCallbackRefState as u}from"../../utilities/hooks/useCallbackRef.js";import{ScrollableContainer as r}from"../scrollable-container/ScrollableContainer.js";import"../scrollable-container/ScrollableContainer.context.js";import{useSticky as S}from"./useSticky.js";const o=e.forwardRef(({numberOfStickyColumns:s=0,numberOfStickyRows:l=0,scrollContainerCss:n,css:i,children:a,...c},m)=>{const[t,f]=u();e.useImperativeHandle(m,()=>t,[t]);const{stickyCss:C,stickyColumnsWidth:p,stickyRowsHeight:b}=S({numberOfStickyColumns:s,numberOfStickyRows:l,wrapperEl:t});return e.createElement(r,{ref:f,scrollContainerCss:n,css:{width:"100%",...C,...i},...c},a,e.createElement(r.Shadow,{inset:{left:p,top:b},css:{zIndex:2}}))});o.displayName="TableScrollableContainer";export{o as TableScrollableContainer};
 //# sourceMappingURL=TableScrollableContainer.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"TableScrollableContainer.js","sources":["../../../src/components/table/TableScrollableContainer.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { CSS } from '~/stitches'\nimport { useCallbackRefState } from '~/utilities/hooks/useCallbackRef'\n\nimport { ScrollableContainer } from '../scrollable-container'\nimport { useSticky } from './useSticky'\n\ntype scrollableProps = {\n  numberOfStickyColumns?: number\n  numberOfStickyRows?: number\n  scrollContainerCss?: CSS\n}\n\ntype TableScrollableContainerProps = React.ComponentProps<\n  typeof ScrollableContainer\n> &\n  scrollableProps\n\nexport const TableScrollableContainer = React.forwardRef(\n  (\n    {\n      numberOfStickyColumns = 0,\n      numberOfStickyRows = 0,\n      scrollContainerCss,\n      css,\n      children,\n      ...rest\n    }: TableScrollableContainerProps,\n    ref\n  ) => {\n    const [scrollableEl, setScrollableEl] = useCallbackRefState()\n    React.useImperativeHandle(ref, () => scrollableEl, [scrollableEl])\n\n    const { stickyCss, stickyColumnsWidth, stickyRowsHeight } = useSticky({\n      numberOfStickyColumns,\n      numberOfStickyRows,\n      wrapperEl: scrollableEl\n    })\n\n    return (\n      <ScrollableContainer\n        ref={setScrollableEl}\n        scrollContainerCss={scrollContainerCss}\n        css={{ ...stickyCss, ...css }}\n        {...rest}\n      >\n        {children}\n        <ScrollableContainer.Shadow\n          inset={{ left: stickyColumnsWidth, top: stickyRowsHeight }}\n          css={{ zIndex: 2 }}\n        />\n      </ScrollableContainer>\n    )\n  }\n)\n\nTableScrollableContainer.displayName = 'TableScrollableContainer'\n"],"names":["TableScrollableContainer","React","numberOfStickyColumns","numberOfStickyRows","scrollContainerCss","css","children","rest","ref","scrollableEl","setScrollableEl","useCallbackRefState","stickyCss","stickyColumnsWidth","stickyRowsHeight","useSticky","ScrollableContainer"],"mappings":"qSAmBO,MAAMA,EAA2BC,EAAM,WAC5C,CACE,CACE,sBAAAC,EAAwB,EACxB,mBAAAC,EAAqB,EACrB,mBAAAC,EACA,IAAAC,EACA,SAAAC,KACGC,CACL,EACAC,IACG,CACH,KAAM,CAACC,EAAcC,CAAe,EAAIC,IACxCV,EAAM,oBAAoBO,EAAK,IAAMC,EAAc,CAACA,CAAY,CAAC,EAEjE,KAAM,CAAE,UAAAG,EAAW,mBAAAC,EAAoB,iBAAAC,CAAiB,EAAIC,EAAU,CACpE,sBAAAb,EACA,mBAAAC,EACA,UAAWM,CACb,CAAC,EAED,OACER,EAAA,cAACe,EAAA,CACC,IAAKN,EACL,mBAAoBN,EACpB,IAAK,CAAE,GAAGQ,EAAW,GAAGP,CAAI,EAC3B,GAAGE,CAEHD,EAAAA,EACDL,EAAA,cAACe,EAAoB,OAApB,CACC,MAAO,CAAE,KAAMH,EAAoB,IAAKC,CAAiB,EACzD,IAAK,CAAE,OAAQ,CAAE,CACnB,CAAA,CACF,CAEJ,CACF,EAEAd,EAAyB,YAAc"}
+{"version":3,"file":"TableScrollableContainer.js","sources":["../../../src/components/table/TableScrollableContainer.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { CSS } from '~/stitches'\nimport { useCallbackRefState } from '~/utilities/hooks/useCallbackRef'\n\nimport { ScrollableContainer } from '../scrollable-container'\nimport { useSticky } from './useSticky'\n\ntype scrollableProps = {\n  numberOfStickyColumns?: number\n  numberOfStickyRows?: number\n  scrollContainerCss?: CSS\n}\n\ntype TableScrollableContainerProps = React.ComponentProps<\n  typeof ScrollableContainer\n> &\n  scrollableProps\n\nexport const TableScrollableContainer = React.forwardRef(\n  (\n    {\n      numberOfStickyColumns = 0,\n      numberOfStickyRows = 0,\n      scrollContainerCss,\n      css,\n      children,\n      ...rest\n    }: TableScrollableContainerProps,\n    ref\n  ) => {\n    const [scrollableEl, setScrollableEl] = useCallbackRefState()\n    React.useImperativeHandle(ref, () => scrollableEl, [scrollableEl])\n\n    const { stickyCss, stickyColumnsWidth, stickyRowsHeight } = useSticky({\n      numberOfStickyColumns,\n      numberOfStickyRows,\n      wrapperEl: scrollableEl\n    })\n\n    return (\n      <ScrollableContainer\n        ref={setScrollableEl}\n        scrollContainerCss={scrollContainerCss}\n        css={{ width: '100%', ...stickyCss, ...css }}\n        {...rest}\n      >\n        {children}\n        <ScrollableContainer.Shadow\n          inset={{ left: stickyColumnsWidth, top: stickyRowsHeight }}\n          css={{ zIndex: 2 }}\n        />\n      </ScrollableContainer>\n    )\n  }\n)\n\nTableScrollableContainer.displayName = 'TableScrollableContainer'\n"],"names":["TableScrollableContainer","React","numberOfStickyColumns","numberOfStickyRows","scrollContainerCss","css","children","rest","ref","scrollableEl","setScrollableEl","useCallbackRefState","stickyCss","stickyColumnsWidth","stickyRowsHeight","useSticky","ScrollableContainer"],"mappings":"qSAmBO,MAAMA,EAA2BC,EAAM,WAC5C,CACE,CACE,sBAAAC,EAAwB,EACxB,mBAAAC,EAAqB,EACrB,mBAAAC,EACA,IAAAC,EACA,SAAAC,KACGC,CACL,EACAC,IACG,CACH,KAAM,CAACC,EAAcC,CAAe,EAAIC,EAAAA,EACxCV,EAAM,oBAAoBO,EAAK,IAAMC,EAAc,CAACA,CAAY,CAAC,EAEjE,KAAM,CAAE,UAAAG,EAAW,mBAAAC,EAAoB,iBAAAC,CAAiB,EAAIC,EAAU,CACpE,sBAAAb,EACA,mBAAAC,EACA,UAAWM,CACb,CAAC,EAED,OACER,EAAA,cAACe,EAAA,CACC,IAAKN,EACL,mBAAoBN,EACpB,IAAK,CAAE,MAAO,OAAQ,GAAGQ,EAAW,GAAGP,CAAI,EAC1C,GAAGE,CAAAA,EAEHD,EACDL,EAAA,cAACe,EAAoB,OAApB,CACC,MAAO,CAAE,KAAMH,EAAoB,IAAKC,CAAiB,EACzD,IAAK,CAAE,OAAQ,CAAE,CACnB,CAAA,CACF,CAEJ,CACF,EAEAd,EAAyB,YAAc"}

package/dist/components/table/useSticky.js

@@ -1,2 +1,2 @@
-import*as a from"react";const R=({numberOfStickyColumns:l,numberOfStickyRows:o,wrapperEl:s})=>{const{stickyCss:m,stickyColumnsWidth:C,stickyRowsHeight:f}=a.useMemo(()=>{const{stickyColumnsWidth:g=0,stickyColumnsCss:w={}}=(()=>{if(!s)return{};if(!l)return{};let t=0;const i=s.querySelectorAll("th"),n=Array.from(i||[]).slice(0,l).reduce((h,u,c)=>{const y=c+1,e={...h,[`& td:nth-of-type(${y}), th:nth-of-type(${y})`]:{position:"sticky",left:`${t}px`,width:`${u.clientWidth}px`,zIndex:1}};return t+=(i==null?void 0:i.item(c).clientWidth)||0,e},{});return{stickyColumnsWidth:t,stickyColumnsCss:n}})(),{stickyRowsHeight:x=0,stickyRowsCss:H={}}=(()=>{if(!s)return{};if(!o)return{};let t=0;const i=s.querySelectorAll("thead tr"),n=Array.from(i||[]).slice(0,o),h=o-n.length,u=n.reduce((e,r,k)=>{const d=k+1,p={...e,[`& thead tr:nth-of-type(${d})`]:{position:"sticky",top:`${t}px`,height:`${r.clientHeight}px`,zIndex:2}};return t+=r.clientHeight||0,p},{}),c=s.querySelectorAll("tbody tr"),y=Array.from(c||[]).slice(0,h).reduce((e,r,k)=>{const d=k+1,p={...e,[`& tbody tr:nth-of-type(${d})`]:{position:"sticky",top:`${t}px`,height:`${r.clientHeight}px`,zIndex:2}};return t+=r.clientHeight||0,p},{});return{stickyRowsHeight:t,stickyRowsCss:{...u,...y}}})();return{stickyCss:{...w,...H},stickyColumnsWidth:g,stickyRowsHeight:x}},[l,o,s]);return{stickyCss:m,stickyColumnsWidth:C,stickyRowsHeight:f}};export{R as useSticky};
+import*as o from"react";import{useResizeObserver as x}from"../../utilities/hooks/useResizeObserver.js";const $=({numberOfStickyColumns:u,numberOfStickyRows:l,wrapperEl:i})=>{const[R,S]=o.useState({stickyCss:{},stickyColumnsWidth:0,stickyRowsHeight:0}),[k,w]=o.useState([]),[h,H]=o.useState([]),[m,b]=o.useState([]);o.useEffect(()=>{if(i){if(u){const c=i.querySelectorAll("th"),e=Array.from(c||[]).slice(0,u);w(e)}if(l){const c=i.querySelectorAll("thead tr"),e=Array.from(c||[]).slice(0,l);H(e);const d=l-e.length,f=i.querySelectorAll("tbody tr"),t=Array.from(f||[]).slice(0,d);b(t)}}},[u,l,i]);const g=o.useCallback(()=>{const{stickyColumnsWidth:c=0,stickyColumnsCss:e={}}=(()=>{let t=0;const p=k.reduce((C,r,n)=>{const s=n+1,y={...C,[`& td:nth-of-type(${s}), th:nth-of-type(${s})`]:{position:"sticky",left:`${t}px`,zIndex:1}};return t+=r.clientWidth||0,y},{});return{stickyColumnsWidth:t,stickyColumnsCss:p}})(),{stickyRowsHeight:d=0,stickyRowsCss:f={}}=(()=>{let t=0;const p=h.reduce((r,n,s)=>{const y=s+1,a={...r,[`& thead tr:nth-of-type(${y})`]:{position:"sticky",top:`${t}px`,zIndex:2}};return t+=n.clientHeight||0,a},{}),C=m.reduce((r,n,s)=>{const y=s+1,a={...r,[`& tbody tr:nth-of-type(${y})`]:{position:"sticky",top:`${t}px`,zIndex:2}};return t+=n.clientHeight||0,a},{});return{stickyRowsHeight:t,stickyRowsCss:{...p,...C}}})();S({stickyCss:{...e,...f},stickyColumnsWidth:c,stickyRowsHeight:d})},[m,k,h]);return x({delay:0,elements:[...m,...h,...k],onResize:()=>{g()}}),R};export{$ as useSticky};
 //# sourceMappingURL=useSticky.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"useSticky.js","sources":["../../../src/components/table/useSticky.ts"],"sourcesContent":["import * as React from 'react'\n\nimport { CSS } from '../../stitches'\n\ninterface UseStickyColumnsValue {\n  stickyCss: CSS\n  stickyColumnsWidth: number\n  stickyRowsHeight: number\n}\n\nexport const useSticky = ({\n  numberOfStickyColumns,\n  numberOfStickyRows,\n  wrapperEl\n}: {\n  numberOfStickyColumns: number\n  numberOfStickyRows: number\n  wrapperEl: HTMLElement | null\n}): UseStickyColumnsValue => {\n  const { stickyCss, stickyColumnsWidth, stickyRowsHeight } =\n    React.useMemo(() => {\n      /* COLUMNS */\n      const { stickyColumnsWidth = 0, stickyColumnsCss = {} } = (() => {\n        if (!wrapperEl) return {}\n        if (!numberOfStickyColumns) return {}\n\n        let accStickyColumnsWidth = 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 = wrapperEl.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(\n          0,\n          numberOfStickyColumns\n        )\n\n        const newStickyColumnsCss = stickyColumns.reduce(\n          (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: `${accStickyColumnsWidth}px`,\n                  width: `${column.clientWidth}px`, // fixing width for sticky columns\n                  zIndex: 1\n                }\n            }\n\n            accStickyColumnsWidth +=\n              tableHeaderCells?.item(index).clientWidth || 0\n\n            return cssObject\n          },\n          {} as CSS\n        )\n\n        return {\n          stickyColumnsWidth: accStickyColumnsWidth,\n          stickyColumnsCss: newStickyColumnsCss\n        }\n      })()\n\n      /* ROWS */\n      const { stickyRowsHeight = 0, stickyRowsCss = {} } = (() => {\n        if (!wrapperEl) return {}\n        if (!numberOfStickyRows) return {}\n\n        let accStickyRowsHeight = 0\n\n        // Getting the table header cells elements to use their width to set the left position in the sticky columns.\n        const tableHeaderRows = wrapperEl.querySelectorAll('thead tr')\n        const tableHeaderRowElements = Array.from(tableHeaderRows || [])\n\n        // Getting only the number of sticky columns from the elements array that is what we are interested in.\n        const stickyHeaderRows = tableHeaderRowElements.slice(\n          0,\n          numberOfStickyRows\n        )\n        const remainingStickyRows = numberOfStickyRows - stickyHeaderRows.length\n\n        const newStickyHeaderRowsCss = stickyHeaderRows.reduce(\n          (acc: CSS, row, index) => {\n            const elementNumber = index + 1\n            const cssObject = {\n              ...acc,\n              [`& thead tr:nth-of-type(${elementNumber})`]: {\n                position: 'sticky',\n                top: `${accStickyRowsHeight}px`,\n                height: `${row.clientHeight}px`, // fixing width for sticky rows\n                zIndex: 2\n              }\n            }\n\n            accStickyRowsHeight += row.clientHeight || 0\n\n            return cssObject\n          },\n          {} as CSS\n        )\n\n        const tableBodyRows = wrapperEl.querySelectorAll('tbody tr')\n        const tableBodyRowElements = Array.from(tableBodyRows || [])\n        const stickyBodyRows = tableBodyRowElements.slice(\n          0,\n          remainingStickyRows\n        )\n        const newStickyBodyRowsCss = stickyBodyRows.reduce(\n          (acc: CSS, row, index) => {\n            const elementNumber = index + 1\n            const cssObject = {\n              ...acc,\n              [`& tbody tr:nth-of-type(${elementNumber})`]: {\n                position: 'sticky',\n                top: `${accStickyRowsHeight}px`,\n                height: `${row.clientHeight}px`, // fixing width for sticky rows\n                zIndex: 2\n              }\n            }\n\n            accStickyRowsHeight += row.clientHeight || 0\n\n            return cssObject\n          },\n          {} as CSS\n        )\n\n        return {\n          stickyRowsHeight: accStickyRowsHeight,\n          stickyRowsCss: { ...newStickyHeaderRowsCss, ...newStickyBodyRowsCss }\n        }\n      })()\n\n      return {\n        stickyCss: { ...stickyColumnsCss, ...stickyRowsCss },\n        stickyColumnsWidth,\n        stickyRowsHeight\n      }\n    }, [numberOfStickyColumns, numberOfStickyRows, wrapperEl])\n\n  return {\n    stickyCss,\n    stickyColumnsWidth,\n    stickyRowsHeight\n  }\n}\n"],"names":["useSticky","numberOfStickyColumns","numberOfStickyRows","wrapperEl","stickyCss","stickyColumnsWidth","stickyRowsHeight","React","stickyColumnsCss","accStickyColumnsWidth","tableHeaderCells","newStickyColumnsCss","acc","column","index","elementNumber","cssObject","stickyRowsCss","accStickyRowsHeight","tableHeaderRows","stickyHeaderRows","remainingStickyRows","newStickyHeaderRowsCss","row","tableBodyRows","newStickyBodyRowsCss"],"mappings":"wBAUO,MAAMA,EAAY,CAAC,CACxB,sBAAAC,EACA,mBAAAC,EACA,UAAAC,CACF,IAI6B,CAC3B,KAAM,CAAE,UAAAC,EAAW,mBAAAC,EAAoB,iBAAAC,CAAiB,EACtDC,EAAM,QAAQ,IAAM,CAElB,KAAM,CAAE,mBAAAF,EAAqB,EAAG,iBAAAG,EAAmB,CAAA,CAAG,GAAK,IAAM,CAC/D,GAAI,CAACL,EAAW,MAAO,GACvB,GAAI,CAACF,EAAuB,MAAO,GAEnC,IAAIQ,EAAwB,EAG5B,MAAMC,EAAmBP,EAAU,iBAAiB,IAAI,EASlDQ,EARsB,MAAM,KAAKD,GAAoB,CAAA,CAAE,EAGnB,MACxC,EACAT,CACF,EAE0C,OACxC,CAACW,EAAUC,EAAQC,IAAU,CAC3B,MAAMC,EAAgBD,EAAQ,EACxBE,EAAY,CAChB,GAAGJ,EACH,CAAC,oBAAoBG,sBAAkCA,MACrD,CACE,SAAU,SACV,KAAM,GAAGN,MACT,MAAO,GAAGI,EAAO,gBACjB,OAAQ,CACV,CACJ,EAEA,OAAAJ,IACEC,GAAA,KAAAA,OAAAA,EAAkB,KAAKI,CAAAA,EAAO,cAAe,EAExCE,CACT,EACA,EACF,EAEA,MAAO,CACL,mBAAoBP,EACpB,iBAAkBE,CACpB,CACF,GAAA,EAGM,CAAE,iBAAAL,EAAmB,EAAG,cAAAW,EAAgB,CAAA,CAAG,GAAK,IAAM,CAC1D,GAAI,CAACd,EAAW,MAAO,CAAA,EACvB,GAAI,CAACD,EAAoB,MAAO,CAEhC,EAAA,IAAIgB,EAAsB,EAG1B,MAAMC,EAAkBhB,EAAU,iBAAiB,UAAU,EAIvDiB,EAHyB,MAAM,KAAKD,GAAmB,CAAA,CAAE,EAGf,MAC9C,EACAjB,CACF,EACMmB,EAAsBnB,EAAqBkB,EAAiB,OAE5DE,EAAyBF,EAAiB,OAC9C,CAACR,EAAUW,EAAKT,IAAU,CACxB,MAAMC,EAAgBD,EAAQ,EACxBE,EAAY,CAChB,GAAGJ,EACH,CAAC,0BAA0BG,MAAmB,CAC5C,SAAU,SACV,IAAK,GAAGG,MACR,OAAQ,GAAGK,EAAI,iBACf,OAAQ,CACV,CACF,EAEA,OAAAL,GAAuBK,EAAI,cAAgB,EAEpCP,CACT,EACA,CAAA,CACF,EAEMQ,EAAgBrB,EAAU,iBAAiB,UAAU,EAMrDsB,EALuB,MAAM,KAAKD,GAAiB,CAAA,CAAE,EACf,MAC1C,EACAH,CACF,EAC4C,OAC1C,CAACT,EAAUW,EAAKT,IAAU,CACxB,MAAMC,EAAgBD,EAAQ,EACxBE,EAAY,CAChB,GAAGJ,EACH,CAAC,0BAA0BG,MAAmB,CAC5C,SAAU,SACV,IAAK,GAAGG,MACR,OAAQ,GAAGK,EAAI,iBACf,OAAQ,CACV,CACF,EAEA,OAAAL,GAAuBK,EAAI,cAAgB,EAEpCP,CACT,EACA,CACF,CAAA,EAEA,MAAO,CACL,iBAAkBE,EAClB,cAAe,CAAE,GAAGI,EAAwB,GAAGG,CAAqB,CACtE,CACF,KAEA,MAAO,CACL,UAAW,CAAE,GAAGjB,EAAkB,GAAGS,CAAc,EACnD,mBAAAZ,EACA,iBAAAC,CACF,CACF,EAAG,CAACL,EAAuBC,EAAoBC,CAAS,CAAC,EAE3D,MAAO,CACL,UAAAC,EACA,mBAAAC,EACA,iBAAAC,CACF,CACF"}
+{"version":3,"file":"useSticky.js","sources":["../../../src/components/table/useSticky.ts"],"sourcesContent":["import * as React from 'react'\n\nimport { CSS } from '../../stitches'\nimport { useResizeObserver } from '~/utilities/hooks/useResizeObserver'\n\ninterface UseStickyColumnsValue {\n  stickyCss: CSS\n  stickyColumnsWidth: number\n  stickyRowsHeight: number\n}\n\nexport const useSticky = ({\n  numberOfStickyColumns,\n  numberOfStickyRows,\n  wrapperEl\n}: {\n  numberOfStickyColumns: number\n  numberOfStickyRows: number\n  wrapperEl: HTMLElement | null\n}): UseStickyColumnsValue => {\n  const [value, setValue] = React.useState<UseStickyColumnsValue>({\n    stickyCss: {},\n    stickyColumnsWidth: 0,\n    stickyRowsHeight: 0\n  })\n\n  const [stickyColumnHeaderEls, setStickyColumnHeaderEls] = React.useState<HTMLTableCellElement[]>([])\n  const [stickyHeaderRowEls, setStickyHeaderRowEls] = React.useState<HTMLTableRowElement[]>([])\n  const [stickyBodyRowEls, setStickyBodyRowEls] = React.useState<HTMLTableRowElement[]>([])\n\n  React.useEffect(() => {\n    if (!wrapperEl) return\n    if (numberOfStickyColumns) {\n      const tableHeaderCells = wrapperEl.querySelectorAll<HTMLTableCellElement>('th')\n      const tableHeaderElements = Array.from(tableHeaderCells || [])\n      const stickyColumnsHeaderElements = tableHeaderElements.slice(0, numberOfStickyColumns)\n      setStickyColumnHeaderEls(stickyColumnsHeaderElements)\n    }\n\n    if (numberOfStickyRows) {\n      const tableHeaderRows = wrapperEl.querySelectorAll<HTMLTableRowElement>('thead tr')\n      const tableHeaderRowElements = Array.from(tableHeaderRows || [])\n      const stickyHeaderRowElements = tableHeaderRowElements.slice(0, numberOfStickyRows)\n      setStickyHeaderRowEls(stickyHeaderRowElements)\n\n      const remainingStickyRows = numberOfStickyRows - stickyHeaderRowElements.length\n      const tableBodyRows = wrapperEl.querySelectorAll<HTMLTableRowElement>('tbody tr')\n      const tableBodyRowElements = Array.from(tableBodyRows || [])\n      const stickyBodyRowElements = tableBodyRowElements.slice(0, remainingStickyRows)\n      setStickyBodyRowEls(stickyBodyRowElements)\n    }\n  }, [numberOfStickyColumns, numberOfStickyRows, wrapperEl])\n\n  const runStickyCalcs = React.useCallback(() => {\n    /* COLUMNS */\n    const { stickyColumnsWidth = 0, stickyColumnsCss = {} } = (() => {\n      let accStickyColumnsWidth = 0\n\n      const newStickyColumnsCss = stickyColumnHeaderEls.reduce(\n        (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: `${accStickyColumnsWidth}px`,\n              zIndex: 1\n            }\n          }\n\n          accStickyColumnsWidth += column.clientWidth || 0\n          return cssObject\n        },\n        {} as CSS\n      )\n\n      return {\n        stickyColumnsWidth: accStickyColumnsWidth,\n        stickyColumnsCss: newStickyColumnsCss\n      }\n    })()\n\n    /* ROWS */\n    const { stickyRowsHeight = 0, stickyRowsCss = {} } = (() => {\n      let accStickyRowsHeight = 0\n\n      const newStickyHeaderRowsCss = stickyHeaderRowEls.reduce(\n        (acc: CSS, row, index) => {\n          const elementNumber = index + 1\n          const cssObject = {\n            ...acc,\n            [`& thead tr:nth-of-type(${elementNumber})`]: {\n              position: 'sticky',\n              top: `${accStickyRowsHeight}px`,\n              zIndex: 2\n            }\n          }\n\n          accStickyRowsHeight += row.clientHeight || 0\n\n          return cssObject\n        },\n        {} as CSS\n      )\n\n      const newStickyBodyRowsCss = stickyBodyRowEls.reduce(\n        (acc: CSS, row, index) => {\n          const elementNumber = index + 1\n          const cssObject = {\n            ...acc,\n            [`& tbody tr:nth-of-type(${elementNumber})`]: {\n              position: 'sticky',\n              top: `${accStickyRowsHeight}px`,\n              zIndex: 2\n            }\n          }\n\n          accStickyRowsHeight += row.clientHeight || 0\n\n          return cssObject\n        },\n        {} as CSS\n      )\n\n      return {\n        stickyRowsHeight: accStickyRowsHeight,\n        stickyRowsCss: { ...newStickyHeaderRowsCss, ...newStickyBodyRowsCss }\n      }\n    })()\n\n    setValue({\n      stickyCss: { ...stickyColumnsCss, ...stickyRowsCss },\n      stickyColumnsWidth,\n      stickyRowsHeight\n    })\n  }, [stickyBodyRowEls, stickyColumnHeaderEls, stickyHeaderRowEls])\n\n  useResizeObserver({\n    delay: 0,\n    elements: [...stickyBodyRowEls, ...stickyHeaderRowEls, ...stickyColumnHeaderEls],\n    onResize: () => {\n      runStickyCalcs()\n    }\n  })\n\n  return value\n}\n"],"names":["useSticky","numberOfStickyColumns","numberOfStickyRows","wrapperEl","value","setValue","React","stickyColumnHeaderEls","setStickyColumnHeaderEls","stickyHeaderRowEls","setStickyHeaderRowEls","stickyBodyRowEls","setStickyBodyRowEls","tableHeaderCells","stickyColumnsHeaderElements","tableHeaderRows","stickyHeaderRowElements","remainingStickyRows","tableBodyRows","stickyBodyRowElements","runStickyCalcs","stickyColumnsWidth","stickyColumnsCss","accStickyColumnsWidth","newStickyColumnsCss","acc","column","index","elementNumber","cssObject","stickyRowsHeight","stickyRowsCss","accStickyRowsHeight","newStickyHeaderRowsCss","row","newStickyBodyRowsCss","useResizeObserver"],"mappings":"6GAWaA,EAAY,CAAC,CACxB,sBAAAC,EACA,mBAAAC,EACA,UAAAC,CACF,IAI6B,CAC3B,KAAM,CAACC,EAAOC,CAAQ,EAAIC,EAAM,SAAgC,CAC9D,UAAW,GACX,mBAAoB,EACpB,iBAAkB,CACpB,CAAC,EAEK,CAACC,EAAuBC,CAAwB,EAAIF,EAAM,SAAiC,CAAA,CAAE,EAC7F,CAACG,EAAoBC,CAAqB,EAAIJ,EAAM,SAAgC,CAAE,CAAA,EACtF,CAACK,EAAkBC,CAAmB,EAAIN,EAAM,SAAgC,CAAA,CAAE,EAExFA,EAAM,UAAU,IAAM,CACpB,GAAKH,EACL,CAAA,GAAIF,EAAuB,CACzB,MAAMY,EAAmBV,EAAU,iBAAuC,IAAI,EAExEW,EADsB,MAAM,KAAKD,GAAoB,CAAA,CAAE,EACL,MAAM,EAAGZ,CAAqB,EACtFO,EAAyBM,CAA2B,CACtD,CAEA,GAAIZ,EAAoB,CACtB,MAAMa,EAAkBZ,EAAU,iBAAsC,UAAU,EAE5Ea,EADyB,MAAM,KAAKD,GAAmB,CAAA,CAAE,EACR,MAAM,EAAGb,CAAkB,EAClFQ,EAAsBM,CAAuB,EAE7C,MAAMC,EAAsBf,EAAqBc,EAAwB,OACnEE,EAAgBf,EAAU,iBAAsC,UAAU,EAE1EgB,EADuB,MAAM,KAAKD,GAAiB,CAAA,CAAE,EACR,MAAM,EAAGD,CAAmB,EAC/EL,EAAoBO,CAAqB,CAC3C,EACF,EAAG,CAAClB,EAAuBC,EAAoBC,CAAS,CAAC,EAEzD,MAAMiB,EAAiBd,EAAM,YAAY,IAAM,CAE7C,KAAM,CAAE,mBAAAe,EAAqB,EAAG,iBAAAC,EAAmB,CAAA,CAAG,GAAK,IAAM,CAC/D,IAAIC,EAAwB,EAE5B,MAAMC,EAAsBjB,EAAsB,OAChD,CAACkB,EAAUC,EAAQC,IAAU,CAC3B,MAAMC,EAAgBD,EAAQ,EACxBE,EAAY,CAChB,GAAGJ,EACH,CAAC,oBAAoBG,sBAAkCA,MACvD,CACE,SAAU,SACV,KAAM,GAAGL,MACT,OAAQ,CACV,CACF,EAEA,OAAAA,GAAyBG,EAAO,aAAe,EACxCG,CACT,EACA,CACF,CAAA,EAEA,MAAO,CACL,mBAAoBN,EACpB,iBAAkBC,CACpB,CACF,GAAG,EAGG,CAAE,iBAAAM,EAAmB,EAAG,cAAAC,EAAgB,CAAG,CAAA,GAAK,IAAM,CAC1D,IAAIC,EAAsB,EAE1B,MAAMC,EAAyBxB,EAAmB,OAChD,CAACgB,EAAUS,EAAKP,IAAU,CACxB,MAAMC,EAAgBD,EAAQ,EACxBE,EAAY,CAChB,GAAGJ,EACH,CAAC,0BAA0BG,MAAmB,CAC5C,SAAU,SACV,IAAK,GAAGI,MACR,OAAQ,CACV,CACF,EAEA,OAAAA,GAAuBE,EAAI,cAAgB,EAEpCL,CACT,EACA,CACF,CAAA,EAEMM,EAAuBxB,EAAiB,OAC5C,CAACc,EAAUS,EAAKP,IAAU,CACxB,MAAMC,EAAgBD,EAAQ,EACxBE,EAAY,CAChB,GAAGJ,EACH,CAAC,0BAA0BG,MAAmB,CAC5C,SAAU,SACV,IAAK,GAAGI,MACR,OAAQ,CACV,CACF,EAEA,OAAAA,GAAuBE,EAAI,cAAgB,EAEpCL,CACT,EACA,EACF,EAEA,MAAO,CACL,iBAAkBG,EAClB,cAAe,CAAE,GAAGC,EAAwB,GAAGE,CAAqB,CACtE,CACF,GAEA9B,EAAAA,EAAS,CACP,UAAW,CAAE,GAAGiB,EAAkB,GAAGS,CAAc,EACnD,mBAAAV,EACA,iBAAAS,CACF,CAAC,CACH,EAAG,CAACnB,EAAkBJ,EAAuBE,CAAkB,CAAC,EAEhE,OAAA2B,EAAkB,CAChB,MAAO,EACP,SAAU,CAAC,GAAGzB,EAAkB,GAAGF,EAAoB,GAAGF,CAAqB,EAC/E,SAAU,IAAM,CACda,EACF,CAAA,CACF,CAAC,EAEMhB,CACT"}