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

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

@@ -3,12 +3,11 @@ import { CSS } from '../../stitches';
 import { Table } from '../table';
 import { TableBody } from '../table/TableBody';
 import { DataTableHead } from './DataTableHead';
-export type DataTableTableProps = Omit<React.ComponentProps<typeof Table>, 'children' | 'numberOfStickyColumns' | 'numberOfStickyRows'> & Partial<Pick<React.ComponentProps<typeof DataTableHead>, 'theme' | 'sortable'>> & Partial<Pick<React.ComponentProps<typeof TableBody>, 'striped'>> & {
+export type DataTableTableProps = Omit<React.ComponentProps<typeof Table>, 'children' | 'numberOfStickyColumns'> & Partial<Pick<React.ComponentProps<typeof DataTableHead>, 'theme' | 'sortable'>> & Partial<Pick<React.ComponentProps<typeof TableBody>, 'striped'>> & {
     scrollOptions?: {
         hasStickyHeader?: boolean;
         headerCss?: CSS;
         numberOfStickyColumns?: number;
-        numberOfStickyRows?: number;
         scrollContainerCss?: CSS;
     };
 };

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"DataTableTable.js","sources":["../../../src/components/data-table/DataTableTable.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { CSS } from '~/stitches'\n\nimport { Table } from '../table'\nimport { TableBody } from '../table/TableBody'\nimport { DataTable } from './DataTable'\nimport { AsyncDataState } from './DataTable.types'\nimport { useDataTable } from './DataTableContext'\nimport { DataTableHead } from './DataTableHead'\nimport { DataTableLoading } from './DataTableLoading'\n\nexport type DataTableTableProps = Omit<\n  React.ComponentProps<typeof Table>,\n  'children' | 'numberOfStickyColumns' | 'numberOfStickyRows'\n> &\n  Partial<\n    Pick<React.ComponentProps<typeof DataTableHead>, 'theme' | 'sortable'>\n  > &\n  Partial<Pick<React.ComponentProps<typeof TableBody>, 'striped'>> & {\n    scrollOptions?: {\n      hasStickyHeader?: boolean\n      headerCss?: CSS\n      numberOfStickyColumns?: number\n      numberOfStickyRows?: number\n      scrollContainerCss?: CSS\n    }\n  }\n\nexport const DataTableTable = ({\n  sortable,\n  striped,\n  theme,\n  css,\n  scrollOptions = {\n    numberOfStickyColumns: 0,\n    numberOfStickyRows: 0,\n    hasStickyHeader: false\n  },\n  ...props\n}: DataTableTableProps) => {\n  const { asyncDataState, getTotalRows, getCanSomeRowsExpand, enableRowSelection, tableId } = useDataTable()\n\n  const key = ((): string => {\n    let controlColumnCount = 0\n\n    if (getCanSomeRowsExpand() && !!enableRowSelection) {\n      controlColumnCount = 2\n    } else if (getCanSomeRowsExpand() || !!enableRowSelection) {\n      controlColumnCount = 1\n    }\n\n    return `${tableId}_${controlColumnCount}_control_columns`\n  })()\n\n  const isPending = asyncDataState === AsyncDataState.PENDING\n  const isEmpty = !isPending && getTotalRows() === 0\n\n  if (isEmpty) return null\n\n  return (\n    <>\n      <DataTableLoading />\n\n      <Table\n        key={key}\n        {...props}\n        numberOfStickyColumns={scrollOptions.numberOfStickyColumns}\n        numberOfStickyRows={scrollOptions.numberOfStickyRows}\n        scrollContainerCss={scrollOptions.scrollContainerCss}\n        css={{\n          ...css,\n          ...(isPending && {\n            opacity: 0.5,\n            pointerEvents: 'none',\n            transition: 'opacity 250ms linear 150ms'\n          })\n        }}\n      >\n        <DataTable.Head\n          theme={theme}\n          sortable={sortable}\n          isSticky={scrollOptions.hasStickyHeader}\n          css={scrollOptions.headerCss}\n        />\n        <DataTable.Body striped={striped} />\n      </Table>\n    </>\n  )\n}\n"],"names":["DataTableTable","sortable","striped","theme","css","scrollOptions","props","asyncDataState","getTotalRows","getCanSomeRowsExpand","enableRowSelection","tableId","useDataTable","key","controlColumnCount","isPending","AsyncDataState","React","DataTableLoading","Table","DataTable"],"mappings":"iRA6Ba,MAAAA,EAAiB,CAAC,CAC7B,SAAAC,EACA,QAAAC,EACA,MAAAC,EACA,IAAAC,EACA,cAAAC,EAAgB,CACd,sBAAuB,EACvB,mBAAoB,EACpB,gBAAiB,EACnB,KACGC,CACL,IAA2B,CACzB,KAAM,CAAE,eAAAC,EAAgB,aAAAC,EAAc,qBAAAC,EAAsB,mBAAAC,EAAoB,QAAAC,CAAQ,EAAIC,EAAAA,EAEtFC,GAAO,IAAc,CACzB,IAAIC,EAAqB,EAEzB,OAAIL,EAAqB,GAAK,CAAC,CAACC,EAC9BI,EAAqB,GACZL,EAA0B,GAAA,CAAC,CAACC,KACrCI,EAAqB,GAGhB,GAAGH,KAAWG,mBACvB,GAEMC,EAAAA,EAAYR,IAAmBS,EAAe,QAGpD,MAFgB,CAACD,GAAaP,EAAa,IAAM,EAE7B,KAGlBS,EAAA,cAAAA,EAAA,SAAA,KACEA,EAAA,cAACC,EAAA,IAAiB,EAElBD,EAAA,cAACE,EAAA,CACC,IAAKN,EACJ,GAAGP,EACJ,sBAAuBD,EAAc,sBACrC,mBAAoBA,EAAc,mBAClC,mBAAoBA,EAAc,mBAClC,IAAK,CACH,GAAGD,EACH,GAAIW,GAAa,CACf,QAAS,GACT,cAAe,OACf,WAAY,4BACd,CACF,GAEAE,EAAA,cAACG,EAAU,KAAV,CACC,MAAOjB,EACP,SAAUF,EACV,SAAUI,EAAc,gBACxB,IAAKA,EAAc,SACrB,CAAA,EACAY,EAAA,cAACG,EAAU,KAAV,CAAe,QAASlB,CAAS,CAAA,CACpC,CACF,CAEJ"}
+{"version":3,"file":"DataTableTable.js","sources":["../../../src/components/data-table/DataTableTable.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { CSS } from '~/stitches'\n\nimport { Table } from '../table'\nimport { TableBody } from '../table/TableBody'\nimport { DataTable } from './DataTable'\nimport { AsyncDataState } from './DataTable.types'\nimport { useDataTable } from './DataTableContext'\nimport { DataTableHead } from './DataTableHead'\nimport { DataTableLoading } from './DataTableLoading'\n\nexport type DataTableTableProps = Omit<\n  React.ComponentProps<typeof Table>,\n  'children' | 'numberOfStickyColumns'\n> &\n  Partial<\n    Pick<React.ComponentProps<typeof DataTableHead>, 'theme' | 'sortable'>\n  > &\n  Partial<Pick<React.ComponentProps<typeof TableBody>, 'striped'>> & {\n    scrollOptions?: {\n      hasStickyHeader?: boolean\n      headerCss?: CSS\n      numberOfStickyColumns?: number\n      scrollContainerCss?: CSS\n    }\n  }\n\nexport const DataTableTable = ({\n  sortable,\n  striped,\n  theme,\n  css,\n  scrollOptions = {\n    numberOfStickyColumns: 0,\n    hasStickyHeader: false\n  },\n  ...props\n}: DataTableTableProps) => {\n  const {\n    asyncDataState,\n    getTotalRows,\n    getCanSomeRowsExpand,\n    enableRowSelection,\n    tableId\n  } = useDataTable()\n\n  const isPending = asyncDataState === AsyncDataState.PENDING\n  const isEmpty = !isPending && getTotalRows() === 0\n\n  const buildScrollContainerKey = (): string => {\n    let controlColumnCount = 0\n\n    if (getCanSomeRowsExpand() && !!enableRowSelection) {\n      controlColumnCount = 2\n    } else if (getCanSomeRowsExpand() || !!enableRowSelection) {\n      controlColumnCount = 1\n    }\n\n    return `${tableId}_${controlColumnCount}_control_columns`\n  }\n\n  if (isEmpty) return null\n\n  return (\n    <>\n      <DataTableLoading />\n\n      <Table\n        {...props}\n        numberOfStickyColumns={scrollOptions.numberOfStickyColumns}\n        scrollContainerCss={scrollOptions.scrollContainerCss}\n        scrollContainerkey={buildScrollContainerKey()}\n        css={{\n          ...css,\n          ...(isPending && {\n            opacity: 0.5,\n            pointerEvents: 'none',\n            transition: 'opacity 250ms linear 150ms'\n          })\n        }}\n      >\n        <DataTable.Head\n          theme={theme}\n          sortable={sortable}\n          isSticky={scrollOptions.hasStickyHeader}\n          css={scrollOptions.headerCss}\n        />\n        <DataTable.Body striped={striped} />\n      </Table>\n    </>\n  )\n}\n"],"names":["DataTableTable","sortable","striped","theme","css","scrollOptions","props","asyncDataState","getTotalRows","getCanSomeRowsExpand","enableRowSelection","tableId","useDataTable","isPending","AsyncDataState","isEmpty","buildScrollContainerKey","controlColumnCount","React","DataTableLoading","Table","DataTable"],"mappings":"iRA4BO,MAAMA,EAAiB,CAAC,CAC7B,SAAAC,EACA,QAAAC,EACA,MAAAC,EACA,IAAAC,EACA,cAAAC,EAAgB,CACd,sBAAuB,EACvB,gBAAiB,EACnB,KACGC,CACL,IAA2B,CACzB,KAAM,CACJ,eAAAC,EACA,aAAAC,EACA,qBAAAC,EACA,mBAAAC,EACA,QAAAC,CACF,EAAIC,EAAa,EAEXC,EAAYN,IAAmBO,EAAe,QAC9CC,EAAU,CAACF,GAAaL,EAAmB,IAAA,EAE3CQ,EAA0B,IAAc,CAC5C,IAAIC,EAAqB,EAEzB,OAAIR,EAAAA,GAA0B,CAAC,CAACC,EAC9BO,EAAqB,GACZR,EAAqB,GAAK,CAAC,CAACC,KACrCO,EAAqB,GAGhB,GAAGN,KAAWM,mBACvB,EAEA,OAAIF,EAAgB,KAGlBG,EAAA,cAAAA,EAAA,SACEA,KAAAA,EAAA,cAACC,EAAA,IAAiB,EAElBD,EAAA,cAACE,EAAA,CACE,GAAGd,EACJ,sBAAuBD,EAAc,sBACrC,mBAAoBA,EAAc,mBAClC,mBAAoBW,EAAwB,EAC5C,IAAK,CACH,GAAGZ,EACH,GAAIS,GAAa,CACf,QAAS,GACT,cAAe,OACf,WAAY,4BACd,CACF,CAAA,EAEAK,EAAA,cAACG,EAAU,KAAV,CACC,MAAOlB,EACP,SAAUF,EACV,SAAUI,EAAc,gBACxB,IAAKA,EAAc,SACrB,CAAA,EACAa,EAAA,cAACG,EAAU,KAAV,CAAe,QAASnB,CAAS,CAAA,CACpC,CACF,CAEJ"}

package/dist/components/index.d.ts

@@ -85,4 +85,3 @@ 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';

package/dist/components/pagination/PaginationPopover.js

@@ -1,2 +1,2 @@
-import{Ellypsis as s}from"@atom-learning/icons";import t from"react";import"../accordion/Accordion.js";import{ActionIcon as c}from"../action-icon/ActionIcon.js";import"../alert-dialog/AlertDialog.js";import"../alert-dialog/alert-context/AlertContext.js";import"../avatar/Avatar.js";import"../badge/Badge.js";import"../banner/banner-regular/BannerRegular.js";import"../banner/banner-slim/BannerSlim.js";import"../box/Box.js";import"../button/Button.js";import"../carousel/Carousel.js";import"../checkbox/Checkbox.js";import"../checkbox-group/CheckboxGroup.js";import"../checkbox-tree/CheckboxTree.js";import"../checkbox-field/CheckboxField.js";import"../chip/Chip.js";import"../chip/ChipGroup.js";import"../chip-dismissible-group/index.js";import"../chip-toggle-group/index.js";import"../combobox/Combobox.js";import"../create-password-field/CreatePasswordField.js";import"../data-table/DataTableContext.js";import"../data-table/DataTable.js";import"../date-field/DateField.js";import"../date-input/DateInput.js";import"../dialog/Dialog.js";import"../dismissible/index.js";import"../dismissible-group/index.js";import"../divider/Divider.js";import"../drawer/Drawer.js";import"../dropdown-menu/DropdownMenu.js";import"../empty-state/EmptyState.js";import"../field-wrapper/FieldWrapper.js";import"../field-wrapper/InlineFieldWrapper.js";import"../file-input/FileInput.js";import{Flex as g}from"../flex/Flex.js";import"../form/Form.js";import"dlv";import"react-hook-form";import"../grid/Grid.js";import"../heading/Heading.js";import{Icon as f}from"../icon/Icon.js";import"../image/Image.js";import"../inline-message/InlineMessage.js";import"../input/Input.js";import"../input-field/InputField.js";import"../label/Label.js";import"../link/Link.js";import"../list/List.js";import"../loader/Loader.js";import"../markdown-content/MarkdownContent.js";import"../navigation/NavigationMenu.js";import"../navigation-menu-vertical/NavigationMenuVertical.js";import"../notification-badge/NotificationBadge.js";import"../number-input/NumberInput.js";import"../number-input-field/NumberInputField.js";import"./Pagination.js";import"../password-field/PasswordField.js";import"../password-input/PasswordInput.js";import{Popover as r}from"../popover/Popover.js";import"../progress-bar/ProgressBar.js";import"../radio-button/RadioButton.js";import"../radio-button/RadioButtonGroup.js";import"../radio-button-field/RadioButtonField.js";import"../radio-card/RadioCard.js";import"@radix-ui/react-radio-group";import"../search-field/SearchField.js";import"../search-input/SearchInput.js";import"../section-message/SectionMessage.js";import"../select/Select.js";import"../select-field/SelectField.js";import"../side-bar/SideBar.js";import"../side-bar/SideBarContext.js";import"../slider/Slider.js";import"../slider-field/SliderField.js";import"../sortable/SortableHandle.js";import"../sortable/SortableItem.js";import"../sortable/SortableRoot.js";import"../spacer/Spacer.js";import"../stepper/Stepper.js";import"../switch/Switch.js";import"../table/Table.js";import"../tabs/Tabs.js";import"../text/Text.js";import"../textarea/Textarea.js";import"../textarea-field/TextareaField.js";import"../tile/Tile.js";import"../tile-interactive/TileInteractive.js";import"../tile-toggle-group/index.js";import"../toast/Toast.js";import"../toast/ToastProvider.js";import"../toggle-group/ToggleGroupButton.js";import"../toggle-group/ToggleGroupItem.js";import"../toggle-group/ToggleGroupRoot.js";import"../tooltip/Tooltip.js";import"../top-bar/TopBar.js";import"../tree/Tree.js";import"../video/Video.js";import"../keyboard-shortcut/index.js";import"../segmented-control/SegmentedControlContext.js";import"../segmented-control/SegmentedControlContent.js";import"../segmented-control/SegmentedControlDescription.js";import"../segmented-control/SegmentedControlHeading.js";import"../segmented-control/SegmentedControlItem.js";import"../segmented-control/SegmentedControlItemList.js";import"../segmented-control/SegmentedControlRoot.js";import"../file-drop/FileDrop.js";import"../file-drop/FileDropContext.js";import"../scrollable-container/ScrollableContainer.js";import"../scrollable-container/ScrollableContainer.context.js";import{PaginationPage as u}from"./PaginationPage.js";import{usePagination as d}from"./usePagination.js";const E=({children:e})=>{const{pagesCount:n,labels:i}=d(),p=Array.from({length:n},(o,l)=>l+1),[a,m]=t.useState(!1);return t.createElement(r,{open:a,onOpenChange:m,defaultOpen:!1},t.createElement(r.Trigger,{asChild:!0},e||t.createElement(c,{hasTooltip:!1,size:"md",theme:"neutral",label:(i==null?void 0:i.popoverTriggerLabel)||"Open pagination popover","data-testid":"pagination_popover_trigger"},t.createElement(f,{is:s}))),t.createElement(r.Content,{size:"md",showCloseButton:!1,css:{p:0}},t.createElement(g,{css:{p:"$4",display:"flex",flexWrap:"wrap",gap:"$1",justifyContent:"center"}},p==null?void 0:p.map(o=>t.createElement(u,{key:o,pageNumber:o,onClick:()=>m(!1)})))))};export{E as PaginationPopover};
+import{Ellypsis as s}from"@atom-learning/icons";import t from"react";import"../accordion/Accordion.js";import{ActionIcon as c}from"../action-icon/ActionIcon.js";import"../alert-dialog/AlertDialog.js";import"../alert-dialog/alert-context/AlertContext.js";import"../avatar/Avatar.js";import"../badge/Badge.js";import"../banner/banner-regular/BannerRegular.js";import"../banner/banner-slim/BannerSlim.js";import"../box/Box.js";import"../button/Button.js";import"../carousel/Carousel.js";import"../checkbox/Checkbox.js";import"../checkbox-group/CheckboxGroup.js";import"../checkbox-tree/CheckboxTree.js";import"../checkbox-field/CheckboxField.js";import"../chip/Chip.js";import"../chip/ChipGroup.js";import"../chip-dismissible-group/index.js";import"../chip-toggle-group/index.js";import"../combobox/Combobox.js";import"../create-password-field/CreatePasswordField.js";import"../data-table/DataTableContext.js";import"../data-table/DataTable.js";import"../date-field/DateField.js";import"../date-input/DateInput.js";import"../dialog/Dialog.js";import"../dismissible/index.js";import"../dismissible-group/index.js";import"../divider/Divider.js";import"../drawer/Drawer.js";import"../dropdown-menu/DropdownMenu.js";import"../empty-state/EmptyState.js";import"../field-wrapper/FieldWrapper.js";import"../field-wrapper/InlineFieldWrapper.js";import"../file-input/FileInput.js";import{Flex as g}from"../flex/Flex.js";import"../form/Form.js";import"dlv";import"react-hook-form";import"../grid/Grid.js";import"../heading/Heading.js";import{Icon as f}from"../icon/Icon.js";import"../image/Image.js";import"../inline-message/InlineMessage.js";import"../input/Input.js";import"../input-field/InputField.js";import"../label/Label.js";import"../link/Link.js";import"../list/List.js";import"../loader/Loader.js";import"../markdown-content/MarkdownContent.js";import"../navigation/NavigationMenu.js";import"../navigation-menu-vertical/NavigationMenuVertical.js";import"../notification-badge/NotificationBadge.js";import"../number-input/NumberInput.js";import"../number-input-field/NumberInputField.js";import"./Pagination.js";import"../password-field/PasswordField.js";import"../password-input/PasswordInput.js";import{Popover as r}from"../popover/Popover.js";import"../progress-bar/ProgressBar.js";import"../radio-button/RadioButton.js";import"../radio-button/RadioButtonGroup.js";import"../radio-button-field/RadioButtonField.js";import"../radio-card/RadioCard.js";import"@radix-ui/react-radio-group";import"../search-field/SearchField.js";import"../search-input/SearchInput.js";import"../section-message/SectionMessage.js";import"../select/Select.js";import"../select-field/SelectField.js";import"../side-bar/SideBar.js";import"../side-bar/SideBarContext.js";import"../slider/Slider.js";import"../slider-field/SliderField.js";import"../sortable/SortableHandle.js";import"../sortable/SortableItem.js";import"../sortable/SortableRoot.js";import"../spacer/Spacer.js";import"../stepper/Stepper.js";import"../switch/Switch.js";import"../table/Table.js";import"../tabs/Tabs.js";import"../text/Text.js";import"../textarea/Textarea.js";import"../textarea-field/TextareaField.js";import"../tile/Tile.js";import"../tile-interactive/TileInteractive.js";import"../tile-toggle-group/index.js";import"../toast/Toast.js";import"../toast/ToastProvider.js";import"../toggle-group/ToggleGroupButton.js";import"../toggle-group/ToggleGroupItem.js";import"../toggle-group/ToggleGroupRoot.js";import"../tooltip/Tooltip.js";import"../top-bar/TopBar.js";import"../tree/Tree.js";import"../video/Video.js";import"../keyboard-shortcut/index.js";import"../segmented-control/SegmentedControlContext.js";import"../segmented-control/SegmentedControlContent.js";import"../segmented-control/SegmentedControlDescription.js";import"../segmented-control/SegmentedControlHeading.js";import"../segmented-control/SegmentedControlItem.js";import"../segmented-control/SegmentedControlItemList.js";import"../segmented-control/SegmentedControlRoot.js";import"../file-drop/FileDrop.js";import"../file-drop/FileDropContext.js";import{PaginationPage as u}from"./PaginationPage.js";import{usePagination as d}from"./usePagination.js";const E=({children:e})=>{const{pagesCount:n,labels:i}=d(),p=Array.from({length:n},(o,l)=>l+1),[a,m]=t.useState(!1);return t.createElement(r,{open:a,onOpenChange:m,defaultOpen:!1},t.createElement(r.Trigger,{asChild:!0},e||t.createElement(c,{hasTooltip:!1,size:"md",theme:"neutral",label:(i==null?void 0:i.popoverTriggerLabel)||"Open pagination popover","data-testid":"pagination_popover_trigger"},t.createElement(f,{is:s}))),t.createElement(r.Content,{size:"md",showCloseButton:!1,css:{p:0}},t.createElement(g,{css:{p:"$4",display:"flex",flexWrap:"wrap",gap:"$1",justifyContent:"center"}},p==null?void 0:p.map(o=>t.createElement(u,{key:o,pageNumber:o,onClick:()=>m(!1)})))))};export{E as PaginationPopover};
 //# sourceMappingURL=PaginationPopover.js.map

package/dist/components/pagination/PaginationPopover.js.map

@@ -1 +1 @@
-{"version":3,"file":"PaginationPopover.js","sources":["../../../src/components/pagination/PaginationPopover.tsx"],"sourcesContent":["import { Ellypsis } from '@atom-learning/icons'\nimport React from 'react'\n\nimport { ActionIcon, Flex, Icon, Popover } from '..'\nimport { PaginationPage } from './PaginationPage'\nimport { usePagination } from './usePagination'\n\nexport const PaginationPopover = ({\n  children\n}: React.PropsWithChildren<unknown>) => {\n  const { pagesCount, labels } = usePagination()\n  const paginationItems = Array.from(\n    { length: pagesCount },\n    (_, index) => index + 1\n  )\n\n  const [isOpen, setIsOpen] = React.useState<boolean>(false)\n\n  return (\n    <Popover open={isOpen} onOpenChange={setIsOpen} defaultOpen={false}>\n      <Popover.Trigger asChild>\n        {children || (\n          <ActionIcon\n            hasTooltip={false}\n            size=\"md\"\n            theme=\"neutral\"\n            label={labels?.popoverTriggerLabel || 'Open pagination popover'}\n            data-testid=\"pagination_popover_trigger\"\n          >\n            <Icon is={Ellypsis} />\n          </ActionIcon>\n        )}\n      </Popover.Trigger>\n      <Popover.Content size=\"md\" showCloseButton={false} css={{ p: 0 }}>\n        <Flex\n          css={{\n            p: '$4',\n            display: 'flex',\n            flexWrap: 'wrap',\n            gap: '$1',\n            justifyContent: 'center'\n          }}\n        >\n          {paginationItems?.map((pageNumber) => {\n            return (\n              <PaginationPage\n                key={pageNumber}\n                pageNumber={pageNumber}\n                onClick={() => setIsOpen(false)}\n              />\n            )\n          })}\n        </Flex>\n      </Popover.Content>\n    </Popover>\n  )\n}\n"],"names":["PaginationPopover","children","pagesCount","labels","usePagination","paginationItems","_","index","isOpen","setIsOpen","React","Popover","ActionIcon","Icon","Ellypsis","Flex","pageNumber","PaginationPage"],"mappings":"isIAOO,MAAMA,EAAoB,CAAC,CAChC,SAAAC,CACF,IAAwC,CACtC,KAAM,CAAE,WAAAC,EAAY,OAAAC,CAAO,EAAIC,EAAc,EACvCC,EAAkB,MAAM,KAC5B,CAAE,OAAQH,CAAW,EACrB,CAACI,EAAGC,IAAUA,EAAQ,CACxB,EAEM,CAACC,EAAQC,CAAS,EAAIC,EAAM,SAAkB,EAAK,EAEzD,OACEA,EAAA,cAACC,EAAA,CAAQ,KAAMH,EAAQ,aAAcC,EAAW,YAAa,EAC3DC,EAAAA,EAAA,cAACC,EAAQ,QAAR,CAAgB,QAAO,EAAA,EACrBV,GACCS,EAAA,cAACE,EAAA,CACC,WAAY,GACZ,KAAK,KACL,MAAM,UACN,OAAOT,GAAA,KAAAA,OAAAA,EAAQ,sBAAuB,0BACtC,cAAY,4BAEZO,EAAAA,EAAA,cAACG,EAAA,CAAK,GAAIC,CAAAA,CAAU,CACtB,CAEJ,EACAJ,EAAA,cAACC,EAAQ,QAAR,CAAgB,KAAK,KAAK,gBAAiB,GAAO,IAAK,CAAE,EAAG,CAAE,CAC7DD,EAAAA,EAAA,cAACK,EAAA,CACC,IAAK,CACH,EAAG,KACH,QAAS,OACT,SAAU,OACV,IAAK,KACL,eAAgB,QAClB,GAECV,GAAA,KAAA,OAAAA,EAAiB,IAAKW,GAEnBN,EAAA,cAACO,EAAA,CACC,IAAKD,EACL,WAAYA,EACZ,QAAS,IAAMP,EAAU,EAAK,EAChC,CAGN,CAAA,CACF,CACF,CAEJ"}
+{"version":3,"file":"PaginationPopover.js","sources":["../../../src/components/pagination/PaginationPopover.tsx"],"sourcesContent":["import { Ellypsis } from '@atom-learning/icons'\nimport React from 'react'\n\nimport { ActionIcon, Flex, Icon, Popover } from '..'\nimport { PaginationPage } from './PaginationPage'\nimport { usePagination } from './usePagination'\n\nexport const PaginationPopover = ({\n  children\n}: React.PropsWithChildren<unknown>) => {\n  const { pagesCount, labels } = usePagination()\n  const paginationItems = Array.from(\n    { length: pagesCount },\n    (_, index) => index + 1\n  )\n\n  const [isOpen, setIsOpen] = React.useState<boolean>(false)\n\n  return (\n    <Popover open={isOpen} onOpenChange={setIsOpen} defaultOpen={false}>\n      <Popover.Trigger asChild>\n        {children || (\n          <ActionIcon\n            hasTooltip={false}\n            size=\"md\"\n            theme=\"neutral\"\n            label={labels?.popoverTriggerLabel || 'Open pagination popover'}\n            data-testid=\"pagination_popover_trigger\"\n          >\n            <Icon is={Ellypsis} />\n          </ActionIcon>\n        )}\n      </Popover.Trigger>\n      <Popover.Content size=\"md\" showCloseButton={false} css={{ p: 0 }}>\n        <Flex\n          css={{\n            p: '$4',\n            display: 'flex',\n            flexWrap: 'wrap',\n            gap: '$1',\n            justifyContent: 'center'\n          }}\n        >\n          {paginationItems?.map((pageNumber) => {\n            return (\n              <PaginationPage\n                key={pageNumber}\n                pageNumber={pageNumber}\n                onClick={() => setIsOpen(false)}\n              />\n            )\n          })}\n        </Flex>\n      </Popover.Content>\n    </Popover>\n  )\n}\n"],"names":["PaginationPopover","children","pagesCount","labels","usePagination","paginationItems","_","index","isOpen","setIsOpen","React","Popover","ActionIcon","Icon","Ellypsis","Flex","pageNumber","PaginationPage"],"mappings":"2kIAOO,MAAMA,EAAoB,CAAC,CAChC,SAAAC,CACF,IAAwC,CACtC,KAAM,CAAE,WAAAC,EAAY,OAAAC,CAAO,EAAIC,EAAc,EACvCC,EAAkB,MAAM,KAC5B,CAAE,OAAQH,CAAW,EACrB,CAACI,EAAGC,IAAUA,EAAQ,CACxB,EAEM,CAACC,EAAQC,CAAS,EAAIC,EAAM,SAAkB,EAAK,EAEzD,OACEA,EAAA,cAACC,EAAA,CAAQ,KAAMH,EAAQ,aAAcC,EAAW,YAAa,EAC3DC,EAAAA,EAAA,cAACC,EAAQ,QAAR,CAAgB,QAAO,EAAA,EACrBV,GACCS,EAAA,cAACE,EAAA,CACC,WAAY,GACZ,KAAK,KACL,MAAM,UACN,OAAOT,GAAA,KAAAA,OAAAA,EAAQ,sBAAuB,0BACtC,cAAY,4BAEZO,EAAAA,EAAA,cAACG,EAAA,CAAK,GAAIC,CAAAA,CAAU,CACtB,CAEJ,EACAJ,EAAA,cAACC,EAAQ,QAAR,CAAgB,KAAK,KAAK,gBAAiB,GAAO,IAAK,CAAE,EAAG,CAAE,CAC7DD,EAAAA,EAAA,cAACK,EAAA,CACC,IAAK,CACH,EAAG,KACH,QAAS,OACT,SAAU,OACV,IAAK,KACL,eAAgB,QAClB,GAECV,GAAA,KAAA,OAAAA,EAAiB,IAAKW,GAEnBN,EAAA,cAACO,EAAA,CACC,IAAKD,EACL,WAAYA,EACZ,QAAS,IAAMP,EAAU,EAAK,EAChC,CAGN,CAAA,CACF,CACF,CAEJ"}

package/dist/components/segmented-control/SegmentedControlItem.js

@@ -1,2 +1,2 @@
-import*as e from"react";import{styled as n}from"../../stitches.js";import{Tabs as d}from"../tabs/Tabs.js";import{useSegmentedControl as m}from"./SegmentedControlContext.js";const p=n(d.Trigger,{position:"relative",bg:"transparent",borderRadius:"$2",p:0,zIndex:2,minWidth:"140px",border:"2px solid transparent",variants:{theme:{primary:{"&[data-state=inactive]:hover":{bg:"$primary300"},"&:focus-visible":{borderColor:"$primary800"}},marsh:{"&[data-state=inactive]:hover":{bg:"$marsh300"},"&:focus-visible":{borderColor:"$marsh800"}}},size:{sm:{flex:"unset",p:"$4 $24",gap:"$3"},md:{flex:1,p:"$24 $4",gap:"$4"},lg:{flex:1,p:"$24 $4",gap:"$4"}}},"& > div":{display:"none"},"&[data-state=active]":{boxShadow:"none",border:"2px solid transparent",fontWeight:600,color:"$textBold","&:focus-visible":{boxShadow:"none",borderColor:"$primary800"}},"&[data-state=inactive]":{fontWeight:400,color:"$grey900"},"&[disabled]":{opacity:.3}}),r=e.forwardRef(({children:t,...o},a)=>{const{size:i,theme:s}=m();return e.createElement(p,{...o,theme:s,size:i,ref:a},t)});r.displayName="SegmentedControlItem";export{r as SegmentedControlItem};
+import*as e from"react";import{styled as s}from"../../stitches.js";import{Tabs as d}from"../tabs/Tabs.js";import{useSegmentedControl as l}from"./SegmentedControlContext.js";const m=s(d.Trigger,{position:"relative",bg:"transparent",borderRadius:"$2",p:0,zIndex:2,minWidth:"140px",border:"2px solid transparent",variants:{theme:{primary:{"&[data-state=inactive]:hover":{bg:"$primary300"},"&:focus-visible":{borderColor:"$primary800"}},marsh:{"&[data-state=inactive]:hover":{bg:"$marsh300"},"&:focus-visible":{borderColor:"$marsh800"}}},size:{sm:{flex:"unset",p:"$4 $24",gap:"$3"},md:{flex:1,p:"$24 $4",gap:"$4"},lg:{flex:1,p:"$24 $4",gap:"$4"}}},"& > div":{display:"none"},"& > span":{display:"flex",flexDirection:"column",alignItems:"center"},"&[data-state=active]":{boxShadow:"none",border:"2px solid transparent",fontWeight:600,color:"$textBold","&:focus-visible":{boxShadow:"none",borderColor:"$primary800"}},"&[data-state=inactive]":{fontWeight:400,color:"$grey900"},"&[disabled]":{opacity:.3}}),r=e.forwardRef(({children:t,...o},a)=>{const{size:i,theme:n}=l();return e.createElement(m,{...o,theme:n,size:i,ref:a},t)});r.displayName="SegmentedControlItem";export{r as SegmentedControlItem};
 //# sourceMappingURL=SegmentedControlItem.js.map

package/dist/components/segmented-control/SegmentedControlItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControlItem.js","sources":["../../../src/components/segmented-control/SegmentedControlItem.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '../../stitches'\nimport { Tabs } from '../tabs'\nimport { useSegmentedControl } from './SegmentedControlContext'\n\nconst StyledItem = styled(Tabs.Trigger, {\n  position: 'relative',\n  bg: 'transparent',\n  borderRadius: '$2',\n  p: 0,\n  zIndex: 2,\n  minWidth: '140px',\n  border: '2px solid transparent',\n  variants: {\n    theme: {\n      primary: {\n        '&[data-state=inactive]:hover': {\n          bg: '$primary300'\n        },\n        '&:focus-visible': {\n          borderColor: '$primary800'\n        }\n      },\n      marsh: {\n        '&[data-state=inactive]:hover': {\n          bg: '$marsh300'\n        },\n        '&:focus-visible': {\n          borderColor: '$marsh800'\n        }\n      }\n    },\n    size: {\n      sm: {\n        flex: 'unset',\n        p: '$4 $24',\n        gap: '$3'\n      },\n      md: {\n        flex: 1,\n        p: '$24 $4',\n        gap: '$4'\n      },\n      lg: {\n        flex: 1,\n        p: '$24 $4',\n        gap: '$4'\n      }\n    }\n  },\n  '& > div': { display: 'none' },\n  '&[data-state=active]': {\n    boxShadow: 'none',\n    border: '2px solid transparent',\n    fontWeight: 600,\n    color: '$textBold',\n    '&:focus-visible': {\n      boxShadow: 'none',\n      borderColor: '$primary800'\n    }\n  },\n  '&[data-state=inactive]': {\n    fontWeight: 400,\n    color: '$grey900'\n  },\n  '&[disabled]': {\n    opacity: 0.3\n  }\n})\n\nexport const SegmentedControlItem = React.forwardRef<\n  HTMLButtonElement,\n  Omit<React.ComponentProps<typeof StyledItem>, 'size'>\n>(({ children, ...props }, ref) => {\n  const { size, theme } = useSegmentedControl()\n\n  return (\n    <StyledItem {...props} theme={theme} size={size} ref={ref}>\n      {children}\n    </StyledItem>\n  )\n})\n\nSegmentedControlItem.displayName = 'SegmentedControlItem'\n"],"names":["StyledItem","styled","Tabs","SegmentedControlItem","React","children","props","ref","size","theme","useSegmentedControl"],"mappings":"6KAMA,MAAMA,EAAaC,EAAOC,EAAK,QAAS,CACtC,SAAU,WACV,GAAI,cACJ,aAAc,KACd,EAAG,EACH,OAAQ,EACR,SAAU,QACV,OAAQ,wBACR,SAAU,CACR,MAAO,CACL,QAAS,CACP,+BAAgC,CAC9B,GAAI,aACN,EACA,kBAAmB,CACjB,YAAa,aACf,CACF,EACA,MAAO,CACL,+BAAgC,CAC9B,GAAI,WACN,EACA,kBAAmB,CACjB,YAAa,WACf,CACF,CACF,EACA,KAAM,CACJ,GAAI,CACF,KAAM,QACN,EAAG,SACH,IAAK,IACP,EACA,GAAI,CACF,KAAM,EACN,EAAG,SACH,IAAK,IACP,EACA,GAAI,CACF,KAAM,EACN,EAAG,SACH,IAAK,IACP,CACF,CACF,EACA,UAAW,CAAE,QAAS,MAAO,EAC7B,uBAAwB,CACtB,UAAW,OACX,OAAQ,wBACR,WAAY,IACZ,MAAO,YACP,kBAAmB,CACjB,UAAW,OACX,YAAa,aACf,CACF,EACA,yBAA0B,CACxB,WAAY,IACZ,MAAO,UACT,EACA,cAAe,CACb,QAAS,EACX,CACF,CAAC,EAEYC,EAAuBC,EAAM,WAGxC,CAAC,CAAE,SAAAC,KAAaC,CAAM,EAAGC,IAAQ,CACjC,KAAM,CAAE,KAAAC,EAAM,MAAAC,CAAM,EAAIC,EAAoB,EAE5C,OACEN,EAAA,cAACJ,EAAA,CAAY,GAAGM,EAAO,MAAOG,EAAO,KAAMD,EAAM,IAAKD,CACnDF,EAAAA,CACH,CAEJ,CAAC,EAEDF,EAAqB,YAAc"}
+{"version":3,"file":"SegmentedControlItem.js","sources":["../../../src/components/segmented-control/SegmentedControlItem.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '../../stitches'\nimport { Tabs } from '../tabs'\nimport { useSegmentedControl } from './SegmentedControlContext'\n\nconst StyledItem = styled(Tabs.Trigger, {\n  position: 'relative',\n  bg: 'transparent',\n  borderRadius: '$2',\n  p: 0,\n  zIndex: 2,\n  minWidth: '140px',\n  border: '2px solid transparent',\n  variants: {\n    theme: {\n      primary: {\n        '&[data-state=inactive]:hover': {\n          bg: '$primary300'\n        },\n        '&:focus-visible': {\n          borderColor: '$primary800'\n        }\n      },\n      marsh: {\n        '&[data-state=inactive]:hover': {\n          bg: '$marsh300'\n        },\n        '&:focus-visible': {\n          borderColor: '$marsh800'\n        }\n      }\n    },\n    size: {\n      sm: {\n        flex: 'unset',\n        p: '$4 $24',\n        gap: '$3'\n      },\n      md: {\n        flex: 1,\n        p: '$24 $4',\n        gap: '$4'\n      },\n      lg: {\n        flex: 1,\n        p: '$24 $4',\n        gap: '$4'\n      }\n    }\n  },\n  '& > div': { display: 'none' },\n  '& > span': {\n    display: 'flex',\n    flexDirection: 'column',\n    alignItems: 'center'\n  },\n  '&[data-state=active]': {\n    boxShadow: 'none',\n    border: '2px solid transparent',\n    fontWeight: 600,\n    color: '$textBold',\n    '&:focus-visible': {\n      boxShadow: 'none',\n      borderColor: '$primary800'\n    }\n  },\n  '&[data-state=inactive]': {\n    fontWeight: 400,\n    color: '$grey900'\n  },\n  '&[disabled]': {\n    opacity: 0.3\n  }\n})\n\nexport const SegmentedControlItem = React.forwardRef<\n  HTMLButtonElement,\n  Omit<React.ComponentProps<typeof StyledItem>, 'size'>\n>(({ children, ...props }, ref) => {\n  const { size, theme } = useSegmentedControl()\n\n  return (\n    <StyledItem {...props} theme={theme} size={size} ref={ref}>\n      {children}\n    </StyledItem>\n  )\n})\n\nSegmentedControlItem.displayName = 'SegmentedControlItem'\n"],"names":["StyledItem","styled","Tabs","SegmentedControlItem","React","children","props","ref","size","theme","useSegmentedControl"],"mappings":"6KAMA,MAAMA,EAAaC,EAAOC,EAAK,QAAS,CACtC,SAAU,WACV,GAAI,cACJ,aAAc,KACd,EAAG,EACH,OAAQ,EACR,SAAU,QACV,OAAQ,wBACR,SAAU,CACR,MAAO,CACL,QAAS,CACP,+BAAgC,CAC9B,GAAI,aACN,EACA,kBAAmB,CACjB,YAAa,aACf,CACF,EACA,MAAO,CACL,+BAAgC,CAC9B,GAAI,WACN,EACA,kBAAmB,CACjB,YAAa,WACf,CACF,CACF,EACA,KAAM,CACJ,GAAI,CACF,KAAM,QACN,EAAG,SACH,IAAK,IACP,EACA,GAAI,CACF,KAAM,EACN,EAAG,SACH,IAAK,IACP,EACA,GAAI,CACF,KAAM,EACN,EAAG,SACH,IAAK,IACP,CACF,CACF,EACA,UAAW,CAAE,QAAS,MAAO,EAC7B,WAAY,CACV,QAAS,OACT,cAAe,SACf,WAAY,QACd,EACA,uBAAwB,CACtB,UAAW,OACX,OAAQ,wBACR,WAAY,IACZ,MAAO,YACP,kBAAmB,CACjB,UAAW,OACX,YAAa,aACf,CACF,EACA,yBAA0B,CACxB,WAAY,IACZ,MAAO,UACT,EACA,cAAe,CACb,QAAS,EACX,CACF,CAAC,EAEYC,EAAuBC,EAAM,WAGxC,CAAC,CAAE,SAAAC,KAAaC,CAAM,EAAGC,IAAQ,CACjC,KAAM,CAAE,KAAAC,EAAM,MAAAC,CAAM,EAAIC,IAExB,OACEN,EAAA,cAACJ,EAAA,CAAY,GAAGM,EAAO,MAAOG,EAAO,KAAMD,EAAM,IAAKD,CACnDF,EAAAA,CACH,CAEJ,CAAC,EAEDF,EAAqB,YAAc"}

package/dist/components/segmented-control/SegmentedControlItemList.js

@@ -1,2 +1,2 @@
-import*as t from"react";import{styled as d}from"../../stitches.js";import{Box as v}from"../box/Box.js";import{Tabs as w}from"../tabs/Tabs.js";import{useSegmentedControl as E}from"./SegmentedControlContext.js";const C=d(w.TriggerList,{position:"relative",p:"$1",borderRadius:"$3",overflow:"hidden",variants:{theme:{primary:{bg:"$primary200"},marsh:{bg:"$marsh200"}}}}),R=d(v,{content:"",position:"absolute",bg:"white",borderRadius:"$2",variants:{interacted:{true:{transition:"all 0.3s ease"},false:{transition:"none"}}}}),L=s=>{const{theme:u,defaultValue:l}=E(),a=t.useRef([]),c=t.Children.toArray(s.children).findIndex(e=>(e==null?void 0:e.props.value)===l),[i,f]=t.useState(c!==-1?c:0),[m,h]=t.useState({left:0,height:0,width:0}),[p,g]=t.useState(!1),b=e=>{f(e),g(!0)},n=t.useCallback(()=>{const e=a.current[i];if(!e)return;const{width:o,height:r}=e.getBoundingClientRect();h({left:e.offsetLeft,height:r,width:o})},[i]);return t.useEffect(()=>{const e=new ResizeObserver(n),o=a.current;return o.forEach(r=>{r&&e.observe(r)}),()=>{o.forEach(r=>{r&&e.unobserve(r)}),e.disconnect()}},[i,n]),t.useEffect(()=>(window.addEventListener("resize",n),()=>{window.removeEventListener("resize",n)}),[n]),t.useEffect(()=>{n()},[i,n]),t.createElement(C,{theme:u,defaultValue:l,...s},t.createElement(R,{css:{...m},interacted:p}),t.Children.map(s.children,(e,o)=>t.cloneElement(e,{onClick:()=>b(o),ref:r=>a.current[o]=r})))};export{L as SegmentedControlItemList};
+import*as t from"react";import{styled as c}from"../../stitches.js";import{Box as g}from"../box/Box.js";import{Tabs as w}from"../tabs/Tabs.js";import{useSegmentedControl as E}from"./SegmentedControlContext.js";const C=c(w.TriggerList,{position:"relative",p:"$1",borderRadius:"$3",overflow:"hidden",variants:{theme:{primary:{bg:"$primary200"},marsh:{bg:"$marsh200"}}},'& > div[role="tablist"]':{position:"relative"},"& > button":{zIndex:2}}),R=c(g,{content:"",position:"absolute",bg:"white",borderRadius:"$2",variants:{interacted:{true:{transition:"all 0.3s ease"},false:{transition:"none"}}}}),L=s=>{const{theme:u,defaultValue:l}=E(),a=t.useRef([]),d=t.Children.toArray(s.children).findIndex(e=>(e==null?void 0:e.props.value)===l),[i,f]=t.useState(d!==-1?d:0),[m,h]=t.useState({left:0,height:0,width:0}),[p,b]=t.useState(!1),v=e=>{f(e),b(!0)},n=t.useCallback(()=>{const e=a.current[i];if(!e)return;const{width:o,height:r}=e.getBoundingClientRect();h({left:e.offsetLeft,height:r,width:o})},[i]);return t.useEffect(()=>{const e=new ResizeObserver(n),o=a.current;return o.forEach(r=>{r&&e.observe(r)}),()=>{o.forEach(r=>{r&&e.unobserve(r)}),e.disconnect()}},[i,n]),t.useEffect(()=>(window.addEventListener("resize",n),()=>{window.removeEventListener("resize",n)}),[n]),t.useEffect(()=>{n()},[i,n]),t.createElement(C,{theme:u,defaultValue:l,...s},t.createElement(R,{css:{...m},interacted:p}),t.Children.map(s.children,(e,o)=>t.cloneElement(e,{onClick:()=>v(o),ref:r=>a.current[o]=r})))};export{L as SegmentedControlItemList};
 //# sourceMappingURL=SegmentedControlItemList.js.map

package/dist/components/segmented-control/SegmentedControlItemList.js.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControlItemList.js","sources":["../../../src/components/segmented-control/SegmentedControlItemList.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '../../stitches'\nimport { Box } from '../box'\nimport { Tabs } from '../tabs'\nimport { useSegmentedControl } from './SegmentedControlContext'\n\nconst StyledTriggerList = styled(Tabs.TriggerList, {\n  position: 'relative',\n  p: '$1',\n  borderRadius: '$3',\n  overflow: 'hidden',\n  variants: {\n    theme: {\n      primary: { bg: '$primary200' },\n      marsh: { bg: '$marsh200' }\n    }\n  }\n})\n\nconst SelectionIndicator = styled(Box, {\n  content: '',\n  position: 'absolute',\n  bg: 'white',\n  borderRadius: '$2',\n  variants: {\n    interacted: {\n      true: {\n        transition: 'all 0.3s ease'\n      },\n      false: {\n        transition: 'none'\n      }\n    }\n  }\n})\n\nexport const SegmentedControlItemList = (\n  props: React.ComponentProps<typeof Tabs.TriggerList>\n): JSX.Element => {\n  const { theme, defaultValue } = useSegmentedControl()\n\n  const tabsRef = React.useRef<(HTMLElement | null)[]>([])\n\n  const defaultSelectedIndex = React.Children.toArray(props.children).findIndex(\n    (child) => (child as React.ReactElement)?.props.value === defaultValue\n  )\n  const [selectedIndex, setSelectedIndex] = React.useState(\n    defaultSelectedIndex !== -1 ? defaultSelectedIndex : 0\n  )\n  const [indicatorStyles, setIndicatorStyles] = React.useState({\n    left: 0,\n    height: 0,\n    width: 0\n  })\n  const [hasInteracted, setHasInteracted] = React.useState(false)\n\n  const setSelection = (index: number) => {\n    setSelectedIndex(index)\n    setHasInteracted(true)\n  }\n\n  const updateIndicatorPosition = React.useCallback(() => {\n    const currentTab = tabsRef.current[selectedIndex]\n    if (!currentTab) return\n\n    const { width, height } = currentTab.getBoundingClientRect()\n    setIndicatorStyles({ left: currentTab.offsetLeft, height, width })\n  }, [selectedIndex])\n\n  React.useEffect(() => {\n    const resizeObserver = new ResizeObserver(updateIndicatorPosition)\n    const currentTabs = tabsRef.current\n    currentTabs.forEach((tab) => {\n      if (tab) resizeObserver.observe(tab)\n    })\n\n    return () => {\n      currentTabs.forEach((tab) => {\n        if (tab) resizeObserver.unobserve(tab)\n      })\n      resizeObserver.disconnect()\n    }\n  }, [selectedIndex, updateIndicatorPosition])\n\n  React.useEffect(() => {\n    window.addEventListener('resize', updateIndicatorPosition)\n    return () => {\n      window.removeEventListener('resize', updateIndicatorPosition)\n    }\n  }, [updateIndicatorPosition])\n\n  React.useEffect(() => {\n    updateIndicatorPosition()\n  }, [selectedIndex, updateIndicatorPosition])\n\n  return (\n    <StyledTriggerList theme={theme} defaultValue={defaultValue} {...props}>\n      <SelectionIndicator\n        css={{\n          ...indicatorStyles\n        }}\n        interacted={hasInteracted}\n      />\n      {React.Children.map(props.children, (child, index) =>\n        React.cloneElement(child as React.ReactElement, {\n          onClick: () => setSelection(index),\n          ref: (el) => (tabsRef.current[index] = el)\n        })\n      )}\n    </StyledTriggerList>\n  )\n}\n"],"names":["StyledTriggerList","styled","Tabs","SelectionIndicator","Box","SegmentedControlItemList","props","theme","defaultValue","useSegmentedControl","tabsRef","React","defaultSelectedIndex","child","selectedIndex","setSelectedIndex","indicatorStyles","setIndicatorStyles","hasInteracted","setHasInteracted","setSelection","index","updateIndicatorPosition","currentTab","width","height","resizeObserver","currentTabs","tab","el"],"mappings":"iNAOA,MAAMA,EAAoBC,EAAOC,EAAK,YAAa,CACjD,SAAU,WACV,EAAG,KACH,aAAc,KACd,SAAU,SACV,SAAU,CACR,MAAO,CACL,QAAS,CAAE,GAAI,aAAc,EAC7B,MAAO,CAAE,GAAI,WAAY,CAC3B,CACF,CACF,CAAC,EAEKC,EAAqBF,EAAOG,EAAK,CACrC,QAAS,GACT,SAAU,WACV,GAAI,QACJ,aAAc,KACd,SAAU,CACR,WAAY,CACV,KAAM,CACJ,WAAY,eACd,EACA,MAAO,CACL,WAAY,MACd,CACF,CACF,CACF,CAAC,EAEYC,EACXC,GACgB,CAChB,KAAM,CAAE,MAAAC,EAAO,aAAAC,CAAa,EAAIC,EAAoB,EAE9CC,EAAUC,EAAM,OAA+B,CAAE,CAAA,EAEjDC,EAAuBD,EAAM,SAAS,QAAQL,EAAM,QAAQ,EAAE,UACjEO,IAAWA,GAAA,KAAAA,OAAAA,EAA8B,MAAM,SAAUL,CAC5D,EACM,CAACM,EAAeC,CAAgB,EAAIJ,EAAM,SAC9CC,IAAyB,GAAKA,EAAuB,CACvD,EACM,CAACI,EAAiBC,CAAkB,EAAIN,EAAM,SAAS,CAC3D,KAAM,EACN,OAAQ,EACR,MAAO,CACT,CAAC,EACK,CAACO,EAAeC,CAAgB,EAAIR,EAAM,SAAS,EAAK,EAExDS,EAAgBC,GAAkB,CACtCN,EAAiBM,CAAK,EACtBF,EAAiB,EAAI,CACvB,EAEMG,EAA0BX,EAAM,YAAY,IAAM,CACtD,MAAMY,EAAab,EAAQ,QAAQI,GACnC,GAAI,CAACS,EAAY,OAEjB,KAAM,CAAE,MAAAC,EAAO,OAAAC,CAAO,EAAIF,EAAW,wBACrCN,EAAmB,CAAE,KAAMM,EAAW,WAAY,OAAAE,EAAQ,MAAAD,CAAM,CAAC,CACnE,EAAG,CAACV,CAAa,CAAC,EAElB,OAAAH,EAAM,UAAU,IAAM,CACpB,MAAMe,EAAiB,IAAI,eAAeJ,CAAuB,EAC3DK,EAAcjB,EAAQ,QAC5B,OAAAiB,EAAY,QAASC,GAAQ,CACvBA,GAAKF,EAAe,QAAQE,CAAG,CACrC,CAAC,EAEM,IAAM,CACXD,EAAY,QAASC,GAAQ,CACvBA,GAAKF,EAAe,UAAUE,CAAG,CACvC,CAAC,EACDF,EAAe,WACjB,CAAA,CACF,EAAG,CAACZ,EAAeQ,CAAuB,CAAC,EAE3CX,EAAM,UAAU,KACd,OAAO,iBAAiB,SAAUW,CAAuB,EAClD,IAAM,CACX,OAAO,oBAAoB,SAAUA,CAAuB,CAC9D,GACC,CAACA,CAAuB,CAAC,EAE5BX,EAAM,UAAU,IAAM,CACpBW,EAAwB,CAC1B,EAAG,CAACR,EAAeQ,CAAuB,CAAC,EAGzCX,EAAA,cAACX,EAAA,CAAkB,MAAOO,EAAO,aAAcC,EAAe,GAAGF,CAAAA,EAC/DK,EAAA,cAACR,EAAA,CACC,IAAK,CACH,GAAGa,CACL,EACA,WAAYE,EACd,EACCP,EAAM,SAAS,IAAIL,EAAM,SAAU,CAACO,EAAOQ,IAC1CV,EAAM,aAAaE,EAA6B,CAC9C,QAAS,IAAMO,EAAaC,CAAK,EACjC,IAAMQ,GAAQnB,EAAQ,QAAQW,GAASQ,CACzC,CAAC,CACH,CACF,CAEJ"}
+{"version":3,"file":"SegmentedControlItemList.js","sources":["../../../src/components/segmented-control/SegmentedControlItemList.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '../../stitches'\nimport { Box } from '../box'\nimport { Tabs } from '../tabs'\nimport { useSegmentedControl } from './SegmentedControlContext'\n\nconst StyledTriggerList = styled(Tabs.TriggerList, {\n  position: 'relative',\n  p: '$1',\n  borderRadius: '$3',\n  overflow: 'hidden',\n  variants: {\n    theme: {\n      primary: { bg: '$primary200' },\n      marsh: { bg: '$marsh200' }\n    }\n  },\n  '& > div[role=\"tablist\"]': {\n    position: 'relative'\n  },\n  '& > button': {\n    zIndex: 2\n  }\n})\n\nconst SelectionIndicator = styled(Box, {\n  content: '',\n  position: 'absolute',\n  bg: 'white',\n  borderRadius: '$2',\n  variants: {\n    interacted: {\n      true: {\n        transition: 'all 0.3s ease'\n      },\n      false: {\n        transition: 'none'\n      }\n    }\n  }\n})\n\nexport const SegmentedControlItemList = (\n  props: React.ComponentProps<typeof Tabs.TriggerList>\n): JSX.Element => {\n  const { theme, defaultValue } = useSegmentedControl()\n\n  const tabsRef = React.useRef<(HTMLElement | null)[]>([])\n\n  const defaultSelectedIndex = React.Children.toArray(props.children).findIndex(\n    (child) => (child as React.ReactElement)?.props.value === defaultValue\n  )\n  const [selectedIndex, setSelectedIndex] = React.useState(\n    defaultSelectedIndex !== -1 ? defaultSelectedIndex : 0\n  )\n  const [indicatorStyles, setIndicatorStyles] = React.useState({\n    left: 0,\n    height: 0,\n    width: 0\n  })\n  const [hasInteracted, setHasInteracted] = React.useState(false)\n\n  const setSelection = (index: number) => {\n    setSelectedIndex(index)\n    setHasInteracted(true)\n  }\n\n  const updateIndicatorPosition = React.useCallback(() => {\n    const currentTab = tabsRef.current[selectedIndex]\n    if (!currentTab) return\n\n    const { width, height } = currentTab.getBoundingClientRect()\n    setIndicatorStyles({ left: currentTab.offsetLeft, height, width })\n  }, [selectedIndex])\n\n  React.useEffect(() => {\n    const resizeObserver = new ResizeObserver(updateIndicatorPosition)\n    const currentTabs = tabsRef.current\n    currentTabs.forEach((tab) => {\n      if (tab) resizeObserver.observe(tab)\n    })\n\n    return () => {\n      currentTabs.forEach((tab) => {\n        if (tab) resizeObserver.unobserve(tab)\n      })\n      resizeObserver.disconnect()\n    }\n  }, [selectedIndex, updateIndicatorPosition])\n\n  React.useEffect(() => {\n    window.addEventListener('resize', updateIndicatorPosition)\n    return () => {\n      window.removeEventListener('resize', updateIndicatorPosition)\n    }\n  }, [updateIndicatorPosition])\n\n  React.useEffect(() => {\n    updateIndicatorPosition()\n  }, [selectedIndex, updateIndicatorPosition])\n\n  return (\n    <StyledTriggerList theme={theme} defaultValue={defaultValue} {...props}>\n      <SelectionIndicator\n        css={{\n          ...indicatorStyles\n        }}\n        interacted={hasInteracted}\n      />\n      {React.Children.map(props.children, (child, index) =>\n        React.cloneElement(child as React.ReactElement, {\n          onClick: () => setSelection(index),\n          ref: (el) => (tabsRef.current[index] = el)\n        })\n      )}\n    </StyledTriggerList>\n  )\n}\n"],"names":["StyledTriggerList","styled","Tabs","SelectionIndicator","Box","SegmentedControlItemList","props","theme","defaultValue","useSegmentedControl","tabsRef","React","defaultSelectedIndex","child","selectedIndex","setSelectedIndex","indicatorStyles","setIndicatorStyles","hasInteracted","setHasInteracted","setSelection","index","updateIndicatorPosition","currentTab","width","height","resizeObserver","currentTabs","tab","el"],"mappings":"iNAOA,MAAMA,EAAoBC,EAAOC,EAAK,YAAa,CACjD,SAAU,WACV,EAAG,KACH,aAAc,KACd,SAAU,SACV,SAAU,CACR,MAAO,CACL,QAAS,CAAE,GAAI,aAAc,EAC7B,MAAO,CAAE,GAAI,WAAY,CAC3B,CACF,EACA,0BAA2B,CACzB,SAAU,UACZ,EACA,aAAc,CACZ,OAAQ,CACV,CACF,CAAC,EAEKC,EAAqBF,EAAOG,EAAK,CACrC,QAAS,GACT,SAAU,WACV,GAAI,QACJ,aAAc,KACd,SAAU,CACR,WAAY,CACV,KAAM,CACJ,WAAY,eACd,EACA,MAAO,CACL,WAAY,MACd,CACF,CACF,CACF,CAAC,EAEYC,EACXC,GACgB,CAChB,KAAM,CAAE,MAAAC,EAAO,aAAAC,CAAa,EAAIC,EAE1BC,EAAAA,EAAUC,EAAM,OAA+B,CAAE,CAAA,EAEjDC,EAAuBD,EAAM,SAAS,QAAQL,EAAM,QAAQ,EAAE,UACjEO,IAAWA,GAAA,KAAA,OAAAA,EAA8B,MAAM,SAAUL,CAC5D,EACM,CAACM,EAAeC,CAAgB,EAAIJ,EAAM,SAC9CC,IAAyB,GAAKA,EAAuB,CACvD,EACM,CAACI,EAAiBC,CAAkB,EAAIN,EAAM,SAAS,CAC3D,KAAM,EACN,OAAQ,EACR,MAAO,CACT,CAAC,EACK,CAACO,EAAeC,CAAgB,EAAIR,EAAM,SAAS,EAAK,EAExDS,EAAgBC,GAAkB,CACtCN,EAAiBM,CAAK,EACtBF,EAAiB,EAAI,CACvB,EAEMG,EAA0BX,EAAM,YAAY,IAAM,CACtD,MAAMY,EAAab,EAAQ,QAAQI,GACnC,GAAI,CAACS,EAAY,OAEjB,KAAM,CAAE,MAAAC,EAAO,OAAAC,CAAO,EAAIF,EAAW,sBAAA,EACrCN,EAAmB,CAAE,KAAMM,EAAW,WAAY,OAAAE,EAAQ,MAAAD,CAAM,CAAC,CACnE,EAAG,CAACV,CAAa,CAAC,EAElB,OAAAH,EAAM,UAAU,IAAM,CACpB,MAAMe,EAAiB,IAAI,eAAeJ,CAAuB,EAC3DK,EAAcjB,EAAQ,QAC5B,OAAAiB,EAAY,QAASC,GAAQ,CACvBA,GAAKF,EAAe,QAAQE,CAAG,CACrC,CAAC,EAEM,IAAM,CACXD,EAAY,QAASC,GAAQ,CACvBA,GAAKF,EAAe,UAAUE,CAAG,CACvC,CAAC,EACDF,EAAe,WACjB,CAAA,CACF,EAAG,CAACZ,EAAeQ,CAAuB,CAAC,EAE3CX,EAAM,UAAU,KACd,OAAO,iBAAiB,SAAUW,CAAuB,EAClD,IAAM,CACX,OAAO,oBAAoB,SAAUA,CAAuB,CAC9D,GACC,CAACA,CAAuB,CAAC,EAE5BX,EAAM,UAAU,IAAM,CACpBW,EACF,CAAA,EAAG,CAACR,EAAeQ,CAAuB,CAAC,EAGzCX,EAAA,cAACX,EAAA,CAAkB,MAAOO,EAAO,aAAcC,EAAe,GAAGF,GAC/DK,EAAA,cAACR,EAAA,CACC,IAAK,CACH,GAAGa,CACL,EACA,WAAYE,CACd,CAAA,EACCP,EAAM,SAAS,IAAIL,EAAM,SAAU,CAACO,EAAOQ,IAC1CV,EAAM,aAAaE,EAA6B,CAC9C,QAAS,IAAMO,EAAaC,CAAK,EACjC,IAAMQ,GAAQnB,EAAQ,QAAQW,GAASQ,CACzC,CAAC,CACH,CACF,CAEJ"}

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { TableScrollableContainer } from './TableScrollableContainer';
+import { CSS } from '../../stitches';
 declare const StyledTable: import("@atom-learning/stitches-react/types/styled-component").StyledComponent<"table", {
     size?: "md" | "lg" | "xl" | undefined;
     corners?: "round" | "square" | undefined;
@@ -368,9 +368,15 @@ 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) & {
+    numberOfStickyColumns?: number;
+    scrollContainerCss?: CSS;
+    scrollContainerkey?: string;
+    maxRowDepth?: number;
+};
+export declare const Table: {
+    ({ size, corners, numberOfStickyColumns, scrollContainerCss, scrollContainerkey, ...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;
@@ -2942,5 +2948,9 @@ export declare const Table: (({ size, corners, scrollable, numberOfStickyColumns
             };
         }> | undefined;
     }>;
+    StickyColumnsContainer: ({ children, numberOfStickyColumns, css, ...restProps }: React.PropsWithChildren<{
+        numberOfStickyColumns?: number;
+        css?: CSS;
+    }>) => React.JSX.Element;
 };
 export {};

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 i from"react";import{styled as b}from"../../stitches.js";import{TableBody as c}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 u,TableRow as y}from"./TableRow.js";import{TableStickyColumnsContainer as a}from"./TableStickyColumnsContainer.js";const h=b("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"}},[`${u}:last-child`]:{[`${e}:first-child`]:{borderBottomLeftRadius:"$0"},[`${e}:last-child`]:{borderBottomRightRadius:"$0"}}},square:{}}}}),s=({size:m="md",corners:n="round",numberOfStickyColumns:t=0,scrollContainerCss:d,scrollContainerkey:$,...p})=>{const l=i.createElement(h,{size:m,corners:n,...p});return t?i.createElement(a,{key:$,css:d,numberOfStickyColumns:t},l):l},T=Object.assign(s,{Body:c,Cell:e,Footer:f,FooterCell:r,Header:C,HeaderCell:o,Row:y,StickyColumnsContainer:a});s.displayName="Table";export{T 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 { 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  scrollContainerkey?: string\n  maxRowDepth?: number\n}\n\nconst TableComponent = ({\n  size = 'md',\n  corners = 'round',\n  numberOfStickyColumns = 0,\n  scrollContainerCss,\n  scrollContainerkey,\n  ...rest\n}: TableProps) => {\n  const tableComponent = <StyledTable size={size} corners={corners} {...rest} />\n\n  if (numberOfStickyColumns) {\n    return (\n      <TableStickyColumnsContainer\n        key={scrollContainerkey}\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","scrollContainerkey","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,EASKI,EAAiB,CAAC,CACtB,KAAAC,EAAO,KACP,QAAAC,EAAU,QACV,sBAAAC,EAAwB,EACxB,mBAAAC,EACA,mBAAAC,KACGC,CACL,IAAkB,CAChB,MAAMC,EAAiBC,EAAA,cAACd,EAAA,CAAY,KAAMO,EAAM,QAASC,EAAU,GAAGI,CAAM,CAAA,EAE5E,OAAIH,EAEAK,EAAA,cAACC,EAAA,CACC,IAAKJ,EACL,IAAKD,EACL,sBAAuBD,CAAAA,EAEtBI,CACH,EAIGA,CACT,EAEaG,EAAQ,OAAO,OAAOV,EAAgB,CACjD,KAAMW,EACN,KAAMf,EACN,OAAQgB,EACR,WAAYd,EACZ,OAAQe,EACR,WAAYhB,EACZ,IAAKiB,EACL,uBAAwBL,CAC1B,CAAC,EAEDT,EAAe,YAAc"}

package/dist/components/table/TableCell.js

@@ -1,2 +1,2 @@
-import{styled as l}from"../../stitches.js";const e=l("td",{borderBottom:"1px solid $grey200",boxSizing:"border-box",color:"$grey800",fontFamily:"$body",lineHeight:1.5,textAlign:"left",verticalAlign:"middle",background:"inherit","&:first-child":{fontWeight:"600"}});e.displayName="TableCell";export{e as TableCell};
+import{styled as l}from"../../stitches.js";const e=l("td",{borderBottom:"1px solid $grey200",boxSizing:"border-box",color:"$grey800",fontFamily:"$body",lineHeight:1.5,textAlign:"left",verticalAlign:"middle","&:first-child":{fontWeight:"600"}});e.displayName="TableCell";export{e as TableCell};
 //# sourceMappingURL=TableCell.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"TableCell.js","sources":["../../../src/components/table/TableCell.tsx"],"sourcesContent":["import { styled } from '~/stitches'\n\nexport const TableCell = styled('td', {\n  borderBottom: '1px solid $grey200',\n  boxSizing: 'border-box',\n  color: '$grey800',\n  fontFamily: '$body',\n  lineHeight: 1.5,\n  textAlign: 'left',\n  verticalAlign: 'middle',\n  background: 'inherit',\n  '&:first-child': { fontWeight: '600' }\n})\n\nTableCell.displayName = 'TableCell'\n"],"names":["TableCell","styled"],"mappings":"2CAEO,MAAMA,EAAYC,EAAO,KAAM,CACpC,aAAc,qBACd,UAAW,aACX,MAAO,WACP,WAAY,QACZ,WAAY,IACZ,UAAW,OACX,cAAe,SACf,WAAY,UACZ,gBAAiB,CAAE,WAAY,KAAM,CACvC,CAAC,EAEDD,EAAU,YAAc"}
+{"version":3,"file":"TableCell.js","sources":["../../../src/components/table/TableCell.tsx"],"sourcesContent":["import { styled } from '~/stitches'\n\nexport const TableCell = styled('td', {\n  borderBottom: '1px solid $grey200',\n  boxSizing: 'border-box',\n  color: '$grey800',\n  fontFamily: '$body',\n  lineHeight: 1.5,\n  textAlign: 'left',\n  verticalAlign: 'middle',\n  '&:first-child': { fontWeight: '600' }\n})\n\nTableCell.displayName = 'TableCell'\n"],"names":["TableCell","styled"],"mappings":"2CAEO,MAAMA,EAAYC,EAAO,KAAM,CACpC,aAAc,qBACd,UAAW,aACX,MAAO,WACP,WAAY,QACZ,WAAY,IACZ,UAAW,OACX,cAAe,SACf,gBAAiB,CAAE,WAAY,KAAM,CACvC,CAAC,EAEDD,EAAU,YAAc"}

package/dist/components/table/TableFooterCell.js

@@ -1,2 +1,2 @@
-import{styled as t}from"../../stitches.js";const e=t("td",{fontWeight:600,textAlign:"left",verticalAlign:"middle",background:"inherit"});e.displayName="TableFooterCell";export{e as TableFooterCell};
+import{styled as l}from"../../stitches.js";const e=l("td",{color:"$grey800",fontFamily:"$body",fontWeight:600,textAlign:"left",verticalAlign:"middle"});e.displayName="TableFooterCell";export{e as TableFooterCell};
 //# sourceMappingURL=TableFooterCell.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"TableFooterCell.js","sources":["../../../src/components/table/TableFooterCell.tsx"],"sourcesContent":["import { styled } from '~/stitches'\n\nexport const TableFooterCell = styled('td', {\n  fontWeight: 600,\n  textAlign: 'left',\n  verticalAlign: 'middle',\n  background: 'inherit'\n})\n\nTableFooterCell.displayName = 'TableFooterCell'\n"],"names":["TableFooterCell","styled"],"mappings":"iDAEaA,EAAkBC,EAAO,KAAM,CAC1C,WAAY,IACZ,UAAW,OACX,cAAe,SACf,WAAY,SACd,CAAC,EAEDD,EAAgB,YAAc"}
+{"version":3,"file":"TableFooterCell.js","sources":["../../../src/components/table/TableFooterCell.tsx"],"sourcesContent":["import { styled } from '~/stitches'\n\nexport const TableFooterCell = styled('td', {\n  color: '$grey800',\n  fontFamily: '$body',\n  fontWeight: 600,\n  textAlign: 'left',\n  verticalAlign: 'middle'\n})\n\nTableFooterCell.displayName = 'TableFooterCell'\n"],"names":["TableFooterCell","styled"],"mappings":"2CAEO,MAAMA,EAAkBC,EAAO,KAAM,CAC1C,MAAO,WACP,WAAY,QACZ,WAAY,IACZ,UAAW,OACX,cAAe,QACjB,CAAC,EAEDD,EAAgB,YAAc"}

package/dist/components/table/TableHeader.js

@@ -1,2 +1,2 @@
-import a from"react";import{styled as y}from"../../stitches.js";const r={PRIMARY:"primary",PRIMARY_DARK:"primaryDark",PRIMARY_LIGHT:"primaryLight",LIGHT:"light",WHITE:"white"},m=y("thead",{variants:{theme:{[r.PRIMARY]:{bg:"$primary800",color:"white"},[r.PRIMARY_DARK]:{bg:"$primary1000",color:"white"},[r.PRIMARY_LIGHT]:{bg:"$primary200",color:"$grey1000"},[r.LIGHT]:{bg:"$grey100",color:"$grey1000"},[r.WHITE]:{bg:"white",color:"$grey1000"}},isSticky:{true:{position:"sticky",top:0,zIndex:2}}}}),e=({theme:t="primaryDark",isSticky:i=!1,...o})=>a.createElement(m,{theme:t,isSticky:i,...o});e.displayName="TableHeader";export{r as TABLE_HEADER_THEMES,e as TableHeader};
+import m from"react";import{styled as y}from"../../stitches.js";import{TableHeaderCell as e}from"./TableHeaderCell.js";const r={PRIMARY:"primary",PRIMARY_DARK:"primaryDark",PRIMARY_LIGHT:"primaryLight",LIGHT:"light",WHITE:"white"},p=y("thead",{variants:{theme:{[r.PRIMARY]:{[`${e}`]:{bg:"$primary800"}},[r.PRIMARY_DARK]:{[`${e}`]:{bg:"$primary1000"}},[r.PRIMARY_LIGHT]:{[`${e}`]:{bg:"$primary200",color:"$grey1000"}},[r.LIGHT]:{[`${e}`]:{bg:"$grey100",color:"$grey1000"}},[r.WHITE]:{[`${e}`]:{bg:"white",color:"$grey1000"}}},isSticky:{true:{position:"sticky",top:0,zIndex:3}}}}),t=({theme:i="primaryDark",isSticky:a=!1,...o})=>m.createElement(p,{theme:i,isSticky:a,...o});t.displayName="TableHeader";export{r as TABLE_HEADER_THEMES,t as TableHeader};
 //# sourceMappingURL=TableHeader.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"TableHeader.js","sources":["../../../src/components/table/TableHeader.tsx"],"sourcesContent":["import React from 'react'\n\nimport { styled } from '~/stitches'\n\nexport const TABLE_HEADER_THEMES = {\n  PRIMARY: 'primary',\n  PRIMARY_DARK: 'primaryDark',\n  PRIMARY_LIGHT: 'primaryLight',\n  LIGHT: 'light',\n  WHITE: 'white'\n} as const\n\nconst StyledTableHeader = styled('thead', {\n  variants: {\n    theme: {\n      [TABLE_HEADER_THEMES.PRIMARY]: {\n        bg: '$primary800',\n        color: 'white'\n      },\n      [TABLE_HEADER_THEMES.PRIMARY_DARK]: {\n        bg: '$primary1000',\n        color: 'white'\n      },\n      [TABLE_HEADER_THEMES.PRIMARY_LIGHT]: {\n        bg: '$primary200',\n        color: '$grey1000'\n      },\n      [TABLE_HEADER_THEMES.LIGHT]: {\n        bg: '$grey100',\n        color: '$grey1000'\n      },\n      [TABLE_HEADER_THEMES.WHITE]: {\n        bg: 'white',\n        color: '$grey1000'\n      }\n    },\n    isSticky: {\n      true: {\n        position: 'sticky',\n        top: 0,\n        zIndex: 2\n      }\n    }\n  }\n})\n\ntype TableHeaderProps = React.ComponentProps<typeof StyledTableHeader>\n\nexport const TableHeader = ({\n  theme = 'primaryDark',\n  isSticky = false,\n  ...rest\n}: TableHeaderProps) => {\n  return <StyledTableHeader theme={theme} isSticky={isSticky} {...rest} />\n}\n\nTableHeader.displayName = 'TableHeader'\n"],"names":["TABLE_HEADER_THEMES","StyledTableHeader","styled","TableHeader","theme","isSticky","rest","React"],"mappings":"gEAIa,MAAAA,EAAsB,CACjC,QAAS,UACT,aAAc,cACd,cAAe,eACf,MAAO,QACP,MAAO,OACT,EAEMC,EAAoBC,EAAO,QAAS,CACxC,SAAU,CACR,MAAO,CACL,CAACF,EAAoB,SAAU,CAC7B,GAAI,cACJ,MAAO,OACT,EACA,CAACA,EAAoB,cAAe,CAClC,GAAI,eACJ,MAAO,OACT,EACA,CAACA,EAAoB,eAAgB,CACnC,GAAI,cACJ,MAAO,WACT,EACA,CAACA,EAAoB,OAAQ,CAC3B,GAAI,WACJ,MAAO,WACT,EACA,CAACA,EAAoB,OAAQ,CAC3B,GAAI,QACJ,MAAO,WACT,CACF,EACA,SAAU,CACR,KAAM,CACJ,SAAU,SACV,IAAK,EACL,OAAQ,CACV,CACF,CACF,CACF,CAAC,EAIYG,EAAc,CAAC,CAC1B,MAAAC,EAAQ,cACR,SAAAC,EAAW,MACRC,CACL,IACSC,EAAA,cAACN,EAAA,CAAkB,MAAOG,EAAO,SAAUC,EAAW,GAAGC,CAAAA,CAAM,EAGxEH,EAAY,YAAc"}
+{"version":3,"file":"TableHeader.js","sources":["../../../src/components/table/TableHeader.tsx"],"sourcesContent":["import React from 'react'\n\nimport { styled } from '~/stitches'\n\nimport { TableHeaderCell } from './TableHeaderCell'\n\nexport const TABLE_HEADER_THEMES = {\n  PRIMARY: 'primary',\n  PRIMARY_DARK: 'primaryDark',\n  PRIMARY_LIGHT: 'primaryLight',\n  LIGHT: 'light',\n  WHITE: 'white'\n} as const\n\nconst StyledTableHeader = styled('thead', {\n  variants: {\n    theme: {\n      [TABLE_HEADER_THEMES.PRIMARY]: {\n        [`${TableHeaderCell}`]: {\n          bg: '$primary800'\n        }\n      },\n      [TABLE_HEADER_THEMES.PRIMARY_DARK]: {\n        [`${TableHeaderCell}`]: {\n          bg: '$primary1000'\n        }\n      },\n      [TABLE_HEADER_THEMES.PRIMARY_LIGHT]: {\n        [`${TableHeaderCell}`]: {\n          bg: '$primary200',\n          color: '$grey1000'\n        }\n      },\n      [TABLE_HEADER_THEMES.LIGHT]: {\n        [`${TableHeaderCell}`]: {\n          bg: '$grey100',\n          color: '$grey1000'\n        }\n      },\n      [TABLE_HEADER_THEMES.WHITE]: {\n        [`${TableHeaderCell}`]: {\n          bg: 'white',\n          color: '$grey1000'\n        }\n      }\n    },\n    isSticky: {\n      true: {\n        position: 'sticky',\n        top: 0,\n        zIndex: 3\n      }\n    }\n  }\n})\n\ntype TableHeaderProps = React.ComponentProps<typeof StyledTableHeader>\n\nexport const TableHeader = ({\n  theme = 'primaryDark',\n  isSticky = false,\n  ...rest\n}: TableHeaderProps) => {\n  return <StyledTableHeader theme={theme} isSticky={isSticky} {...rest} />\n}\n\nTableHeader.displayName = 'TableHeader'\n"],"names":["TABLE_HEADER_THEMES","StyledTableHeader","styled","TableHeaderCell","TableHeader","theme","isSticky","rest","React"],"mappings":"uHAMa,MAAAA,EAAsB,CACjC,QAAS,UACT,aAAc,cACd,cAAe,eACf,MAAO,QACP,MAAO,OACT,EAEMC,EAAoBC,EAAO,QAAS,CACxC,SAAU,CACR,MAAO,CACL,CAACF,EAAoB,SAAU,CAC7B,CAAC,GAAGG,KAAoB,CACtB,GAAI,aACN,CACF,EACA,CAACH,EAAoB,cAAe,CAClC,CAAC,GAAGG,KAAoB,CACtB,GAAI,cACN,CACF,EACA,CAACH,EAAoB,eAAgB,CACnC,CAAC,GAAGG,KAAoB,CACtB,GAAI,cACJ,MAAO,WACT,CACF,EACA,CAACH,EAAoB,OAAQ,CAC3B,CAAC,GAAGG,KAAoB,CACtB,GAAI,WACJ,MAAO,WACT,CACF,EACA,CAACH,EAAoB,OAAQ,CAC3B,CAAC,GAAGG,KAAoB,CACtB,GAAI,QACJ,MAAO,WACT,CACF,CACF,EACA,SAAU,CACR,KAAM,CACJ,SAAU,SACV,IAAK,EACL,OAAQ,CACV,CACF,CACF,CACF,CAAC,EAIYC,EAAc,CAAC,CAC1B,MAAAC,EAAQ,cACR,SAAAC,EAAW,MACRC,CACL,IACSC,EAAA,cAACP,EAAA,CAAkB,MAAOI,EAAO,SAAUC,EAAW,GAAGC,CAAM,CAAA,EAGxEH,EAAY,YAAc"}

package/dist/components/table/TableHeaderCell.js

@@ -1,2 +1,2 @@
-import{styled as l}from"../../stitches.js";const e=l("th",{borderBottom:"1px solid $grey200",fontWeight:600,lineHeight:1.5,textAlign:"left",verticalAlign:"middle",background:"inherit"});e.displayName="TableHeaderCell";export{e as TableHeaderCell};
+import{styled as l}from"../../stitches.js";const e=l("th",{borderBottom:"1px solid $grey200",color:"white",fontFamily:"$body",fontWeight:600,lineHeight:1.5,textAlign:"left",verticalAlign:"middle"});e.displayName="TableHeaderCell";export{e as TableHeaderCell};
 //# sourceMappingURL=TableHeaderCell.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"TableHeaderCell.js","sources":["../../../src/components/table/TableHeaderCell.tsx"],"sourcesContent":["import { styled } from '~/stitches'\n\nexport const TableHeaderCell = styled('th', {\n  borderBottom: '1px solid $grey200',\n  fontWeight: 600,\n  lineHeight: 1.5,\n  textAlign: 'left',\n  verticalAlign: 'middle',\n  background: 'inherit'\n})\n\nTableHeaderCell.displayName = 'TableHeaderCell'\n"],"names":["TableHeaderCell","styled"],"mappings":"2CAEO,MAAMA,EAAkBC,EAAO,KAAM,CAC1C,aAAc,qBACd,WAAY,IACZ,WAAY,IACZ,UAAW,OACX,cAAe,SACf,WAAY,SACd,CAAC,EAEDD,EAAgB,YAAc"}
+{"version":3,"file":"TableHeaderCell.js","sources":["../../../src/components/table/TableHeaderCell.tsx"],"sourcesContent":["import { styled } from '~/stitches'\n\nexport const TableHeaderCell = styled('th', {\n  borderBottom: '1px solid $grey200',\n  color: 'white',\n  fontFamily: '$body',\n  fontWeight: 600,\n  lineHeight: 1.5,\n  textAlign: 'left',\n  verticalAlign: 'middle'\n})\n\nTableHeaderCell.displayName = 'TableHeaderCell'\n"],"names":["TableHeaderCell","styled"],"mappings":"2CAEa,MAAAA,EAAkBC,EAAO,KAAM,CAC1C,aAAc,qBACd,MAAO,QACP,WAAY,QACZ,WAAY,IACZ,WAAY,IACZ,UAAW,OACX,cAAe,QACjB,CAAC,EAEDD,EAAgB,YAAc"}

package/dist/components/table/TableRow.js

@@ -1,2 +1,2 @@
-import*as e from"react";import{styled as l}from"../../stitches.js";const r=l("tr",{bg:"inherit"}),o=e.forwardRef((t,a)=>e.createElement(r,{...t,ref:a}));o.displayName="TableRow";export{r as StyledRow,o as TableRow};
+import*as e from"react";import{styled as l}from"../../stitches.js";const o=l("tr",{bg:"unset"}),r=e.forwardRef((t,a)=>e.createElement(o,{...t,ref:a}));r.displayName="TableRow";export{o as StyledRow,r as TableRow};
 //# sourceMappingURL=TableRow.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"TableRow.js","sources":["../../../src/components/table/TableRow.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/stitches'\n\nexport const StyledRow = styled('tr', {\n  bg: 'inherit'\n})\n\nexport const TableRow: React.ForwardRefExoticComponent<\n  React.ComponentProps<typeof StyledRow>\n> = React.forwardRef((props, ref) => <StyledRow {...props} ref={ref} />)\n\nTableRow.displayName = 'TableRow'\n"],"names":["StyledRow","styled","TableRow","React","props","ref"],"mappings":"mEAIa,MAAAA,EAAYC,EAAO,KAAM,CACpC,GAAI,SACN,CAAC,EAEYC,EAETC,EAAM,WAAW,CAACC,EAAOC,IAAQF,EAAA,cAACH,EAAA,CAAW,GAAGI,EAAO,IAAKC,CAAAA,CAAK,CAAE,EAEvEH,EAAS,YAAc"}
+{"version":3,"file":"TableRow.js","sources":["../../../src/components/table/TableRow.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/stitches'\n\nexport const StyledRow = styled('tr', {\n  bg: 'unset'\n})\n\nexport const TableRow: React.ForwardRefExoticComponent<\n  React.ComponentProps<typeof StyledRow>\n> = React.forwardRef((props, ref) => <StyledRow {...props} ref={ref} />)\n\nTableRow.displayName = 'TableRow'\n"],"names":["StyledRow","styled","TableRow","React","props","ref"],"mappings":"mEAIa,MAAAA,EAAYC,EAAO,KAAM,CACpC,GAAI,OACN,CAAC,EAEYC,EAETC,EAAM,WAAW,CAACC,EAAOC,IAAQF,EAAA,cAACH,EAAA,CAAW,GAAGI,EAAO,IAAKC,CAAAA,CAAK,CAAE,EAEvEH,EAAS,YAAc"}

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

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

package/dist/components/table/TableStickyColumnsContainer.js

@@ -0,0 +1,2 @@
+import r from"react";import{Box as a}from"../box/Box.js";import{useStickyColumnsCss as m}from"./useStickyColumnsCss.js";const h=({children:s,numberOfStickyColumns:t=0,css:c,...i})=>{const[e,p]=r.useState(!1),o=r.useRef(null),{columnsCss:u}=m({numberOfStickyColumns:t,wrapperRef:o});return r.createElement(a,{onScroll:l=>{const n=l.currentTarget.scrollWidth>l.currentTarget.clientWidth;n!==e&&p(n)},role:"scrollbar",ref:o,css:{overflow:"auto",maxWidth:"100%",...u,[`& 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},s)};export{h as TableStickyColumnsContainer};
+//# sourceMappingURL=TableStickyColumnsContainer.js.map

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

@@ -0,0 +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 wrapperRef = React.useRef(null)\n  const { columnsCss } = useStickyColumnsCss({\n    numberOfStickyColumns,\n    wrapperRef\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","css","restProps","hasScroll","setHasScroll","React","wrapperRef","columnsCss","useStickyColumnsCss","Box","event","newHasScroll"],"mappings":"wHAOa,MAAAA,EAA8B,CAAC,CAC1C,SAAAC,EACA,sBAAAC,EAAwB,EACxB,IAAAC,KACGC,CACL,IAGO,CACL,KAAM,CAACC,EAAWC,CAAY,EAAIC,EAAM,SAAkB,EAAK,EACzDC,EAAaD,EAAM,OAAO,IAAI,EAC9B,CAAE,WAAAE,CAAW,EAAIC,EAAoB,CACzC,sBAAAR,EACA,WAAAM,CACF,CAAC,EAUD,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"}

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

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { CSS } from '../../stitches';
+interface IUseStickyColumnsCss {
+    columnsCss: CSS;
+}
+export declare const useStickyColumnsCss: ({ numberOfStickyColumns, wrapperRef }: {
+    numberOfStickyColumns: number;
+    wrapperRef: React.RefObject<HTMLTableSectionElement>;
+}) => IUseStickyColumnsCss;
+export {};

package/dist/components/table/useStickyColumnsCss.js

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

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

@@ -0,0 +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,\n  wrapperRef\n}: {\n  numberOfStickyColumns: number\n  wrapperRef: React.RefObject<HTMLTableSectionElement>\n}): IUseStickyColumnsCss => {\n  const [columnsCss, setColumnsCss] = React.useState<CSS>({})\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: `${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    return newColumnsCss\n  }, [numberOfStickyColumns, wrapperRef])\n\n  React.useLayoutEffect(() => {\n    if (!numberOfStickyColumns) return\n    const newColumnsCss = generateColumnsCss()\n\n    setColumnsCss(newColumnsCss)\n  }, [numberOfStickyColumns, wrapperRef, generateColumnsCss])\n\n  return {\n    columnsCss\n  }\n}\n"],"names":["useStickyColumnsCss","numberOfStickyColumns","wrapperRef","columnsCss","setColumnsCss","React","generateColumnsCss","_a","accWidth","tableHeaderCells","acc","column","index","elementNumber","cssObject","newColumnsCss"],"mappings":"wBAQa,MAAAA,EAAsB,CAAC,CAClC,sBAAAC,EACA,WAAAC,CACF,IAG4B,CAC1B,KAAM,CAACC,EAAYC,CAAa,EAAIC,EAAM,SAAc,CAAA,CAAE,EAEpDC,EAAqBD,EAAM,YAAY,IAAM,CAjBrD,IAAAE,EAkBI,IAAIC,EAAW,EAGf,MAAMC,GAAmBF,EAAAL,EAAW,UAAX,KAAAK,OAAAA,EAAoB,iBAAiB,IAAA,EAwB9D,OAvB4B,MAAM,KAAKE,GAAoB,CAAE,CAAA,EAGnB,MAAM,EAAGR,CAAqB,EAEpC,OAAO,CAACS,EAAUC,EAAQC,IAAU,CACtE,MAAMC,EAAgBD,EAAQ,EACxBE,EAAY,CAChB,GAAGJ,EACH,CAAC,oBAAoBG,sBAAkCA,MACrD,CACE,SAAU,SACV,KAAM,GAAGL,MACT,SAAU,GAAGG,EAAO,gBACpB,OAAQ,GACV,CACJ,EAEA,OAAAH,IAAYC,GAAA,KAAAA,OAAAA,EAAkB,KAAKG,CAAAA,EAAO,cAAe,EAElDE,CACT,EAAG,EAAS,CAGd,EAAG,CAACb,EAAuBC,CAAU,CAAC,EAEtC,OAAAG,EAAM,gBAAgB,IAAM,CAC1B,GAAI,CAACJ,EAAuB,OAC5B,MAAMc,EAAgBT,EAAmB,EAEzCF,EAAcW,CAAa,CAC7B,EAAG,CAACd,EAAuBC,EAAYI,CAAkB,CAAC,EAEnD,CACL,WAAAH,CACF,CACF"}