@atom-learning/components 6.16.0-beta.3 → 6.16.0

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

@@ -1 +1 @@
-{"version":3,"file":"DataTableEmptyState.js","names":[],"sources":["../../../src/components/data-table/DataTableEmptyState.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { EmptyState } from '../empty-state/EmptyState'\nimport { AsyncDataState } from './DataTable.types'\nimport { useDataTable } from './DataTableContext'\n\ntype DataTableEmptyStateProps = React.ComponentProps<typeof EmptyState>\n\nexport const DataTableEmptyState = ({\n  children,\n  ...rest\n}: DataTableEmptyStateProps) => {\n  const { asyncDataState, getTotalRows } = useDataTable()\n\n  const isPending = asyncDataState === AsyncDataState.PENDING\n  const isEmpty = !isPending && getTotalRows() === 0\n\n  if (!isEmpty) return null\n\n  return <EmptyState {...rest}>{children}</EmptyState>\n}\n"],"mappings":";;;;;AAQA,IAAa,uBAAuB,EAClC,UACA,GAAG,WAC2B;CAC9B,MAAM,EAAE,gBAAgB,iBAAiB,aAAa;CAKtD,IAAI,EAFY,EADE,mBAAmB,eAAe,YACtB,aAAa,MAAM,IAEnC,OAAO;CAErB,OAAO,wBAAA,cAAC,YAAe,MAAO,QAAqB;AACrD"}
+{"version":3,"file":"DataTableEmptyState.js","names":[],"sources":["../../../src/components/data-table/DataTableEmptyState.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { EmptyState } from '../empty-state/EmptyState'\nimport { AsyncDataState } from './DataTable.types'\nimport { useDataTable } from './DataTableContext'\n\ntype DataTableEmptyStateProps = React.ComponentProps<typeof EmptyState>\n\nexport const DataTableEmptyState = ({\n  children,\n  ...rest\n}: DataTableEmptyStateProps) => {\n  const { asyncDataState, getTotalRows } = useDataTable()\n\n  const isPending = asyncDataState === AsyncDataState.PENDING\n  const isEmpty = !isPending && getTotalRows() === 0\n\n  if (!isEmpty) return null\n\n  return <EmptyState {...rest}>{children}</EmptyState>\n}\n"],"mappings":";;;;;AAQA,IAAa,uBAAuB,EAClC,UACA,GAAG,WAC2B;CAC9B,MAAM,EAAE,gBAAgB,iBAAiB,cAAc;AAKvD,KAAI,EAFY,EADE,mBAAmB,eAAe,YACtB,cAAc,KAAK,GAEnC,QAAO;AAErB,QAAO,wBAAA,cAAC,YAAe,MAAO,SAAsB"}

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

@@ -1 +1 @@
-{"version":3,"file":"DataTableError.js","names":[],"sources":["../../../src/components/data-table/DataTableError.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { AsyncDataState, DataTableContextType } from './DataTable.types'\nimport { useDataTable } from './DataTableContext'\n\nexport const DataTableError = ({\n  children\n}: {\n  children: (retry?: DataTableContextType['runAsyncData']) => React.ReactElement\n}) => {\n  const { asyncDataState, runAsyncData } = useDataTable()\n\n  if (asyncDataState !== AsyncDataState.REJECTED) return null\n\n  return children(runAsyncData)\n}\n"],"mappings":";;;AAKA,IAAa,kBAAkB,EAC7B,eAGI;CACJ,MAAM,EAAE,gBAAgB,iBAAiB,aAAa;CAEtD,IAAI,mBAAmB,eAAe,UAAU,OAAO;CAEvD,OAAO,SAAS,YAAY;AAC9B"}
+{"version":3,"file":"DataTableError.js","names":[],"sources":["../../../src/components/data-table/DataTableError.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { AsyncDataState, DataTableContextType } from './DataTable.types'\nimport { useDataTable } from './DataTableContext'\n\nexport const DataTableError = ({\n  children\n}: {\n  children: (retry?: DataTableContextType['runAsyncData']) => React.ReactElement\n}) => {\n  const { asyncDataState, runAsyncData } = useDataTable()\n\n  if (asyncDataState !== AsyncDataState.REJECTED) return null\n\n  return children(runAsyncData)\n}\n"],"mappings":";;;AAKA,IAAa,kBAAkB,EAC7B,eAGI;CACJ,MAAM,EAAE,gBAAgB,iBAAiB,cAAc;AAEvD,KAAI,mBAAmB,eAAe,SAAU,QAAO;AAEvD,QAAO,SAAS,aAAa"}

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

@@ -1 +1 @@
-{"version":3,"file":"DataTableGlobalFilter.js","names":[],"sources":["../../../src/components/data-table/DataTableGlobalFilter.tsx"],"sourcesContent":["import * as React from 'react'\nimport { debounce } from 'throttle-debounce'\n\nimport { cn } from '~/styled'\n\nimport { Label } from '../label/Label'\nimport { SearchInput } from '../search-input/SearchInput'\nimport { AsyncDataState } from './DataTable.types'\nimport { useDataTable } from './DataTableContext'\n\ntype DataTableSearchProps = React.ComponentProps<typeof SearchInput> & {\n  label: string\n  hideLabel?: boolean\n}\nexport const DataTableGlobalFilter = ({\n  onChange,\n  label,\n  hideLabel = false,\n  ...props\n}: DataTableSearchProps) => {\n  const {\n    setGlobalFilter,\n    getState,\n    resetPagination,\n    getTotalRows,\n    asyncDataState\n  } = useDataTable()\n  const { globalFilter } = getState()\n\n  const isPending = asyncDataState === AsyncDataState.PENDING\n  const isEmpty = !isPending && getTotalRows() === 0\n\n  if (isEmpty) return null\n\n  const handleChange = debounce(250, (event) => {\n    const {\n      target: { value }\n    } = event\n\n    onChange?.(event)\n    resetPagination()\n    setGlobalFilter(value)\n  })\n\n  return (\n    <>\n      <Label htmlFor={label} className={cn('mb-3', hideLabel && 'sr-only')}>\n        {label}\n      </Label>\n      <SearchInput\n        {...props}\n        defaultValue={globalFilter}\n        onChange={handleChange}\n        name={label}\n      />\n    </>\n  )\n}\n"],"mappings":";;;;;;;;AAcA,IAAa,yBAAyB,EACpC,UACA,OACA,YAAY,OACZ,GAAG,YACuB;CAC1B,MAAM,EACJ,iBACA,UACA,iBACA,cACA,mBACE,aAAa;CACjB,MAAM,EAAE,iBAAiB,SAAS;CAKlC,IAFgB,EADE,mBAAmB,eAAe,YACtB,aAAa,MAAM,GAEpC,OAAO;CAEpB,MAAM,eAAe,SAAS,MAAM,UAAU;EAC5C,MAAM,EACJ,QAAQ,EAAE,YACR;EAEJ,WAAW,KAAK;EAChB,gBAAgB;EAChB,gBAAgB,KAAK;CACvB,CAAC;CAED,OACE,wBAAA,cAAA,QAAA,UAAA,MACE,wBAAA,cAAC,OAAD;EAAO,SAAS;EAAO,WAAW,GAAG,QAAQ,aAAa,SAAS;CAE5D,GADJ,KACI,GACP,wBAAA,cAAC,aAAD;EACE,GAAI;EACJ,cAAc;EACd,UAAU;EACV,MAAM;CACP,CAAA,CACD;AAEN"}
+{"version":3,"file":"DataTableGlobalFilter.js","names":[],"sources":["../../../src/components/data-table/DataTableGlobalFilter.tsx"],"sourcesContent":["import * as React from 'react'\nimport { debounce } from 'throttle-debounce'\n\nimport { cn } from '~/styled'\n\nimport { Label } from '../label/Label'\nimport { SearchInput } from '../search-input/SearchInput'\nimport { AsyncDataState } from './DataTable.types'\nimport { useDataTable } from './DataTableContext'\n\ntype DataTableSearchProps = React.ComponentProps<typeof SearchInput> & {\n  label: string\n  hideLabel?: boolean\n}\nexport const DataTableGlobalFilter = ({\n  onChange,\n  label,\n  hideLabel = false,\n  ...props\n}: DataTableSearchProps) => {\n  const {\n    setGlobalFilter,\n    getState,\n    resetPagination,\n    getTotalRows,\n    asyncDataState\n  } = useDataTable()\n  const { globalFilter } = getState()\n\n  const isPending = asyncDataState === AsyncDataState.PENDING\n  const isEmpty = !isPending && getTotalRows() === 0\n\n  if (isEmpty) return null\n\n  const handleChange = debounce(250, (event) => {\n    const {\n      target: { value }\n    } = event\n\n    onChange?.(event)\n    resetPagination()\n    setGlobalFilter(value)\n  })\n\n  return (\n    <>\n      <Label htmlFor={label} className={cn('mb-3', hideLabel && 'sr-only')}>\n        {label}\n      </Label>\n      <SearchInput\n        {...props}\n        defaultValue={globalFilter}\n        onChange={handleChange}\n        name={label}\n      />\n    </>\n  )\n}\n"],"mappings":";;;;;;;;AAcA,IAAa,yBAAyB,EACpC,UACA,OACA,YAAY,OACZ,GAAG,YACuB;CAC1B,MAAM,EACJ,iBACA,UACA,iBACA,cACA,mBACE,cAAc;CAClB,MAAM,EAAE,iBAAiB,UAAU;AAKnC,KAFgB,EADE,mBAAmB,eAAe,YACtB,cAAc,KAAK,EAEpC,QAAO;CAEpB,MAAM,eAAe,SAAS,MAAM,UAAU;EAC5C,MAAM,EACJ,QAAQ,EAAE,YACR;AAEJ,aAAW,MAAM;AACjB,mBAAiB;AACjB,kBAAgB,MAAM;GACtB;AAEF,QACE,wBAAA,cAAA,QAAA,UAAA,MACE,wBAAA,cAAC,OAAD;EAAO,SAAS;EAAO,WAAW,GAAG,QAAQ,aAAa,UAAU;EAE5D,EADL,MACK,EACR,wBAAA,cAAC,aAAD;EACE,GAAI;EACJ,cAAc;EACd,UAAU;EACV,MAAM;EACN,CAAA,CACD"}

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

@@ -1 +1 @@
-{"version":3,"file":"DataTableHead.js","names":[],"sources":["../../../src/components/data-table/DataTableHead.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { cn } from '~/styled'\n\nimport { Table } from '../table/Table'\nimport { useDataTable } from './DataTableContext'\nimport { DataTableHeaderCell } from './DataTableHeaderCell'\nimport { DataTableSelectAllRowsCheckbox } from './DataTableSelectAllRowsCheckbox'\n\ntype DataTableHeadProps = Omit<\n  React.ComponentProps<typeof Table.Header>,\n  'children'\n> & {\n  sortable?: boolean\n  isSticky?: boolean\n  stickyOffset?: number\n  showTotalInFirstColumn?: boolean\n  totalSuffix?: string\n}\n\nexport const DataTableHead = ({\n  sortable = true,\n  theme = 'light',\n  isSticky = false,\n  stickyOffset = 0,\n  showTotalInFirstColumn,\n  totalSuffix,\n  style,\n  className,\n  ...props\n}: DataTableHeadProps): React.ReactElement => {\n  const {\n    getHeaderGroups,\n    setIsSortable,\n    enableRowSelection,\n    getCanSomeRowsExpand,\n    tablePosition,\n    setTablePosition\n  } = useDataTable()\n\n  React.useEffect(() => {\n    setIsSortable(sortable)\n  }, [sortable, setIsSortable])\n\n  const tableHeaderRowRef = React.useRef<HTMLTableRowElement>(null)\n  const tableRef = React.useRef<HTMLTableElement | null>(null)\n  const headerOffsetRef = React.useRef(0)\n\n  const [headerOffset, setHeaderOffset] = React.useState<number>(0)\n  const [headerHide, setHeaderHide] = React.useState<boolean>(false)\n\n  const tableHeadElement = tableHeaderRowRef?.current?.closest('thead')\n\n  if (tableHeadElement && tablePosition?.offsetTop === null) {\n    const tableHeadHeight = tableHeadElement.getBoundingClientRect().height\n    const intersectionOffset = stickyOffset + tableHeadHeight\n    if (tablePosition) {\n      setTablePosition({ ...tablePosition, offsetTop: intersectionOffset || 0 })\n    }\n  }\n\n  React.useEffect(() => {\n    if (!isSticky) return\n\n    if (!tableRef.current && tableHeaderRowRef.current) {\n      tableRef.current = tableHeaderRowRef.current.closest(\n        'table'\n      ) as HTMLTableElement | null\n    }\n\n    if (tableRef.current) {\n      if (tablePosition?.top !== null && tablePosition?.bottom !== null) {\n        const newOffset =\n          tablePosition?.top != null &&\n          tablePosition?.bottom != null &&\n          tablePosition.top < stickyOffset &&\n          tablePosition.bottom > 100\n            ? -tablePosition.top + stickyOffset\n            : 0\n\n        if (newOffset !== 0) setHeaderHide(true)\n\n        headerOffsetRef.current = newOffset\n        setHeaderOffset(newOffset)\n\n        requestAnimationFrame(() => {\n          setHeaderHide(false)\n        })\n      }\n    }\n  }, [isSticky, stickyOffset, tablePosition])\n\n  return (\n    <Table.Header\n      theme={theme}\n      style={{\n        ...style,\n        '--header-offset': `${headerOffset}px`\n      }}\n      {...props}\n      className={cn(\n        'relative',\n        'z-3',\n        '[&_tr:not(:last-child)>th]:border-b-none',\n        '[&_tr:not(:first-child)>th]:rounded-none!',\n        className\n      )}\n    >\n      {getHeaderGroups().map((headerGroup) => {\n        return (\n          <Table.Row\n            key={headerGroup.id}\n            ref={tableHeaderRowRef}\n            className={\n              isSticky && headerOffset !== 0\n                ? cn(\n                    'translate-y-(--header-offset)',\n                    headerHide\n                      ? 'delay-0ms opacity-0 transition-none'\n                      : 'delay-150ms opacity-100 transition-opacity duration-100',\n                    '[&_th]:last:before:absolute',\n                    '[&_th]:last:before:bottom-0',\n                    '[&_th]:last:before:pointer-events-none',\n                    '[&_th]:last:before:right-0',\n                    '[&_th]:last:before:shadow-sm',\n                    '[&_th]:last:before:top-0',\n                    '[&_th]:last:before:w-full'\n                  )\n                : undefined\n            }\n          >\n            {getCanSomeRowsExpand() && <Table.HeaderCell className=\"w-10\" />}\n            {enableRowSelection && (\n              <Table.HeaderCell className=\"w-10\">\n                <DataTableSelectAllRowsCheckbox />\n              </Table.HeaderCell>\n            )}\n            {headerGroup.headers.map((header, index) => (\n              <DataTableHeaderCell\n                header={header}\n                key={header.id}\n                includeTotal={index === 0 && showTotalInFirstColumn}\n                totalSuffix={totalSuffix}\n              />\n            ))}\n          </Table.Row>\n        )\n      })}\n    </Table.Header>\n  )\n}\n"],"mappings":";;;;;;;AAoBA,IAAa,iBAAiB,EAC5B,WAAW,MACX,QAAQ,SACR,WAAW,OACX,eAAe,GACf,wBACA,aACA,OACA,WACA,GAAG,YACyC;CAC5C,MAAM,EACJ,iBACA,eACA,oBACA,sBACA,eACA,qBACE,aAAa;CAEjB,QAAM,gBAAgB;EACpB,cAAc,QAAQ;CACxB,GAAG,CAAC,UAAU,aAAa,CAAC;CAE5B,MAAM,oBAAoB,QAAM,OAA4B,IAAI;CAChE,MAAM,WAAW,QAAM,OAAgC,IAAI;CAC3D,MAAM,kBAAkB,QAAM,OAAO,CAAC;CAEtC,MAAM,CAAC,cAAc,mBAAmB,QAAM,SAAiB,CAAC;CAChE,MAAM,CAAC,YAAY,iBAAiB,QAAM,SAAkB,KAAK;CAEjE,MAAM,mBAAmB,mBAAmB,SAAS,QAAQ,OAAO;CAEpE,IAAI,oBAAoB,eAAe,cAAc,MAAM;EAEzD,MAAM,qBAAqB,eADH,iBAAiB,sBAAsB,EAAE;EAEjE,IAAI,eACF,iBAAiB;GAAE,GAAG;GAAe,WAAW,sBAAsB;EAAE,CAAC;CAE7E;CAEA,QAAM,gBAAgB;EACpB,IAAI,CAAC,UAAU;EAEf,IAAI,CAAC,SAAS,WAAW,kBAAkB,SACzC,SAAS,UAAU,kBAAkB,QAAQ,QAC3C,OACF;EAGF,IAAI,SAAS;OACP,eAAe,QAAQ,QAAQ,eAAe,WAAW,MAAM;IACjE,MAAM,YACJ,eAAe,OAAO,QACtB,eAAe,UAAU,QACzB,cAAc,MAAM,gBACpB,cAAc,SAAS,MACnB,CAAC,cAAc,MAAM,eACrB;IAEN,IAAI,cAAc,GAAG,cAAc,IAAI;IAEvC,gBAAgB,UAAU;IAC1B,gBAAgB,SAAS;IAEzB,4BAA4B;KAC1B,cAAc,KAAK;IACrB,CAAC;GACH;;CAEJ,GAAG;EAAC;EAAU;EAAc;CAAa,CAAC;CAE1C,OACE,wBAAA,cAAC,MAAM,QAAP;EACS;EACP,OAAO;GACL,GAAG;GACH,mBAAmB,GAAG,aAAa;EACrC;EACA,GAAI;EACJ,WAAW,GACT,YACA,OACA,4CACA,6CACA,SACF;CA0CY,GAxCX,gBAAgB,EAAE,KAAK,gBAAgB;EACtC,OACE,wBAAA,cAAC,MAAM,KAAP;GACE,KAAK,YAAY;GACjB,KAAK;GACL,WACE,YAAY,iBAAiB,IACzB,GACE,iCACA,aACI,wCACA,2DACJ,+BACA,+BACA,0CACA,8BACA,gCACA,4BACA,2BACF,IACA,KAAA;EAiBG,GAdR,qBAAqB,KAAK,wBAAA,cAAC,MAAM,YAAP,EAAkB,WAAU,OAAQ,CAAA,GAC9D,sBACC,wBAAA,cAAC,MAAM,YAAP,EAAkB,WAAU,OAEV,GADhB,wBAAA,cAAC,gCAAA,IAAgC,CACjB,GAEnB,YAAY,QAAQ,KAAK,QAAQ,UAChC,wBAAA,cAAC,qBAAD;GACU;GACR,KAAK,OAAO;GACZ,cAAc,UAAU,KAAK;GAChB;EACd,CAAA,CACF,CACQ;CAEf,CAAC,CACW;AAElB"}
+{"version":3,"file":"DataTableHead.js","names":[],"sources":["../../../src/components/data-table/DataTableHead.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { cn } from '~/styled'\n\nimport { Table } from '../table/Table'\nimport { useDataTable } from './DataTableContext'\nimport { DataTableHeaderCell } from './DataTableHeaderCell'\nimport { DataTableSelectAllRowsCheckbox } from './DataTableSelectAllRowsCheckbox'\n\ntype DataTableHeadProps = Omit<\n  React.ComponentProps<typeof Table.Header>,\n  'children'\n> & {\n  sortable?: boolean\n  isSticky?: boolean\n  stickyOffset?: number\n  showTotalInFirstColumn?: boolean\n  totalSuffix?: string\n}\n\nexport const DataTableHead = ({\n  sortable = true,\n  theme = 'light',\n  isSticky = false,\n  stickyOffset = 0,\n  showTotalInFirstColumn,\n  totalSuffix,\n  style,\n  className,\n  ...props\n}: DataTableHeadProps): React.ReactElement => {\n  const {\n    getHeaderGroups,\n    setIsSortable,\n    enableRowSelection,\n    getCanSomeRowsExpand,\n    tablePosition,\n    setTablePosition\n  } = useDataTable()\n\n  React.useEffect(() => {\n    setIsSortable(sortable)\n  }, [sortable, setIsSortable])\n\n  const tableHeaderRowRef = React.useRef<HTMLTableRowElement>(null)\n  const tableRef = React.useRef<HTMLTableElement | null>(null)\n  const headerOffsetRef = React.useRef(0)\n\n  const [headerOffset, setHeaderOffset] = React.useState<number>(0)\n  const [headerHide, setHeaderHide] = React.useState<boolean>(false)\n\n  const tableHeadElement = tableHeaderRowRef?.current?.closest('thead')\n\n  if (tableHeadElement && tablePosition?.offsetTop === null) {\n    const tableHeadHeight = tableHeadElement.getBoundingClientRect().height\n    const intersectionOffset = stickyOffset + tableHeadHeight\n    if (tablePosition) {\n      setTablePosition({ ...tablePosition, offsetTop: intersectionOffset || 0 })\n    }\n  }\n\n  React.useEffect(() => {\n    if (!isSticky) return\n\n    if (!tableRef.current && tableHeaderRowRef.current) {\n      tableRef.current = tableHeaderRowRef.current.closest(\n        'table'\n      ) as HTMLTableElement | null\n    }\n\n    if (tableRef.current) {\n      if (tablePosition?.top !== null && tablePosition?.bottom !== null) {\n        const newOffset =\n          tablePosition?.top != null &&\n          tablePosition?.bottom != null &&\n          tablePosition.top < stickyOffset &&\n          tablePosition.bottom > 100\n            ? -tablePosition.top + stickyOffset\n            : 0\n\n        if (newOffset !== 0) setHeaderHide(true)\n\n        headerOffsetRef.current = newOffset\n        setHeaderOffset(newOffset)\n\n        requestAnimationFrame(() => {\n          setHeaderHide(false)\n        })\n      }\n    }\n  }, [isSticky, stickyOffset, tablePosition])\n\n  return (\n    <Table.Header\n      theme={theme}\n      style={{\n        ...style,\n        '--header-offset': `${headerOffset}px`\n      }}\n      {...props}\n      className={cn(\n        'relative',\n        'z-3',\n        '[&_tr:not(:last-child)>th]:border-b-none',\n        '[&_tr:not(:first-child)>th]:rounded-none!',\n        className\n      )}\n    >\n      {getHeaderGroups().map((headerGroup) => {\n        return (\n          <Table.Row\n            key={headerGroup.id}\n            ref={tableHeaderRowRef}\n            className={\n              isSticky && headerOffset !== 0\n                ? cn(\n                    'translate-y-(--header-offset)',\n                    headerHide\n                      ? 'delay-0ms opacity-0 transition-none'\n                      : 'delay-150ms opacity-100 transition-opacity duration-100',\n                    '[&_th]:last:before:absolute',\n                    '[&_th]:last:before:bottom-0',\n                    '[&_th]:last:before:pointer-events-none',\n                    '[&_th]:last:before:right-0',\n                    '[&_th]:last:before:shadow-sm',\n                    '[&_th]:last:before:top-0',\n                    '[&_th]:last:before:w-full'\n                  )\n                : undefined\n            }\n          >\n            {getCanSomeRowsExpand() && <Table.HeaderCell className=\"w-10\" />}\n            {enableRowSelection && (\n              <Table.HeaderCell className=\"w-10\">\n                <DataTableSelectAllRowsCheckbox />\n              </Table.HeaderCell>\n            )}\n            {headerGroup.headers.map((header, index) => (\n              <DataTableHeaderCell\n                header={header}\n                key={header.id}\n                includeTotal={index === 0 && showTotalInFirstColumn}\n                totalSuffix={totalSuffix}\n              />\n            ))}\n          </Table.Row>\n        )\n      })}\n    </Table.Header>\n  )\n}\n"],"mappings":";;;;;;;AAoBA,IAAa,iBAAiB,EAC5B,WAAW,MACX,QAAQ,SACR,WAAW,OACX,eAAe,GACf,wBACA,aACA,OACA,WACA,GAAG,YACyC;CAC5C,MAAM,EACJ,iBACA,eACA,oBACA,sBACA,eACA,qBACE,cAAc;AAElB,SAAM,gBAAgB;AACpB,gBAAc,SAAS;IACtB,CAAC,UAAU,cAAc,CAAC;CAE7B,MAAM,oBAAoB,QAAM,OAA4B,KAAK;CACjE,MAAM,WAAW,QAAM,OAAgC,KAAK;CAC5D,MAAM,kBAAkB,QAAM,OAAO,EAAE;CAEvC,MAAM,CAAC,cAAc,mBAAmB,QAAM,SAAiB,EAAE;CACjE,MAAM,CAAC,YAAY,iBAAiB,QAAM,SAAkB,MAAM;CAElE,MAAM,mBAAmB,mBAAmB,SAAS,QAAQ,QAAQ;AAErE,KAAI,oBAAoB,eAAe,cAAc,MAAM;EAEzD,MAAM,qBAAqB,eADH,iBAAiB,uBAAuB,CAAC;AAEjE,MAAI,cACF,kBAAiB;GAAE,GAAG;GAAe,WAAW,sBAAsB;GAAG,CAAC;;AAI9E,SAAM,gBAAgB;AACpB,MAAI,CAAC,SAAU;AAEf,MAAI,CAAC,SAAS,WAAW,kBAAkB,QACzC,UAAS,UAAU,kBAAkB,QAAQ,QAC3C,QACD;AAGH,MAAI,SAAS;OACP,eAAe,QAAQ,QAAQ,eAAe,WAAW,MAAM;IACjE,MAAM,YACJ,eAAe,OAAO,QACtB,eAAe,UAAU,QACzB,cAAc,MAAM,gBACpB,cAAc,SAAS,MACnB,CAAC,cAAc,MAAM,eACrB;AAEN,QAAI,cAAc,EAAG,eAAc,KAAK;AAExC,oBAAgB,UAAU;AAC1B,oBAAgB,UAAU;AAE1B,gCAA4B;AAC1B,mBAAc,MAAM;MACpB;;;IAGL;EAAC;EAAU;EAAc;EAAc,CAAC;AAE3C,QACE,wBAAA,cAAC,MAAM,QAAP;EACS;EACP,OAAO;GACL,GAAG;GACH,mBAAmB,GAAG,aAAa;GACpC;EACD,GAAI;EACJ,WAAW,GACT,YACA,OACA,4CACA,6CACA,UACD;EA0CY,EAxCZ,iBAAiB,CAAC,KAAK,gBAAgB;AACtC,SACE,wBAAA,cAAC,MAAM,KAAP;GACE,KAAK,YAAY;GACjB,KAAK;GACL,WACE,YAAY,iBAAiB,IACzB,GACE,iCACA,aACI,wCACA,2DACJ,+BACA,+BACA,0CACA,8BACA,gCACA,4BACA,4BACD,GACD,KAAA;GAiBI,EAdT,sBAAsB,IAAI,wBAAA,cAAC,MAAM,YAAP,EAAkB,WAAU,QAAS,CAAA,EAC/D,sBACC,wBAAA,cAAC,MAAM,YAAP,EAAkB,WAAU,QAET,EADjB,wBAAA,cAAC,gCAAA,KAAiC,CACjB,EAEpB,YAAY,QAAQ,KAAK,QAAQ,UAChC,wBAAA,cAAC,qBAAD;GACU;GACR,KAAK,OAAO;GACZ,cAAc,UAAU,KAAK;GAChB;GACb,CAAA,CACF,CACQ;GAEd,CACW"}

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

@@ -1 +1 @@
-{"version":3,"file":"DataTableHeaderCell.js","names":[],"sources":["../../../src/components/data-table/DataTableHeaderCell.tsx"],"sourcesContent":["import { ArrowDown, ArrowUp } from '@atom-learning/icons'\nimport type { Header } from '@tanstack/react-table'\nimport { flexRender } from '@tanstack/react-table'\nimport * as React from 'react'\nimport { useHover } from 'react-aria'\n\nimport { styled } from '~/styled'\nimport { cn } from '~/styled'\n\nimport { Icon } from '../icon/Icon'\nimport { Table } from '../table/Table'\nimport { Text } from '../text/Text'\nimport { useDataTable } from './DataTableContext'\n\ntype DataTableHeaderProps = React.ComponentProps<typeof Table.HeaderCell> & {\n  header: Header<Record<string, unknown>, unknown>\n  includeTotal?: boolean\n  totalSuffix?: string\n}\n\nconst StyledCount = styled(Text, {\n  base: ['text-grey-600', 'whitespace-nowrap', 'hidden', 'min-[800px]:block']\n})\n\nconst StyledTableHeaderCell = styled(Table.HeaderCell, {\n  base: [],\n  variants: {\n    isSortable: {\n      true: [\n        '*:relative',\n        'before:absolute',\n        'before:bg-primary-100',\n        'before:duration-200',\n        'before:ease-in',\n        'before:inset-0',\n        'before:opacity-0',\n        'before:transition-opacity',\n        'cursor-pointer',\n        'hover:before:opacity-50',\n        'relative'\n      ]\n    }\n  }\n})\n\nconst sortIcons = {\n  asc: ArrowUp,\n  desc: ArrowDown\n}\n\nconst SortIcon = ({ direction }: { direction: 'asc' | 'desc' }) => (\n  <Icon\n    is={sortIcons[direction]}\n    size=\"sm\"\n    className=\"stroke-primary-900 absolute left-1\"\n  />\n)\n\nexport const DataTableHeaderCell = ({\n  header,\n  includeTotal = false,\n  totalSuffix = 'items',\n  children,\n  className,\n  ...props\n}: DataTableHeaderProps) => {\n  const sortDirection = header.column.getIsSorted()\n  const { isSortable: isSortableTable, getRowModel } = useDataTable()\n  // false for display columns, e.g. \"Actions\"\n  const isDataColumn = header.column.getCanSort()\n\n  const totalRows = getRowModel()?.rows?.length\n\n  const { hoverProps, isHovered } = useHover({})\n\n  const handleKeyDown = (\n    event: React.KeyboardEvent<HTMLTableCellElement>,\n    callback: (event: unknown) => void | undefined\n  ) => {\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault()\n      callback(event as unknown)\n    }\n  }\n\n  const headerSortingHandler = header.column.getToggleSortingHandler()\n\n  return (\n    <StyledTableHeaderCell\n      isSortable={isSortableTable && isDataColumn}\n      colSpan={header.colSpan}\n      onClick={\n        isSortableTable && isDataColumn && headerSortingHandler\n          ? headerSortingHandler\n          : undefined\n      }\n      onKeyDown={(event) =>\n        isSortableTable &&\n        isDataColumn &&\n        headerSortingHandler &&\n        handleKeyDown(event, headerSortingHandler)\n      }\n      tabIndex={isSortableTable && isDataColumn ? 0 : -1}\n      {...hoverProps}\n      className={className}\n      {...props}\n    >\n      <div\n        className={cn(\n          'flex',\n          'gap-1',\n          'items-center',\n          header.colSpan > 1 ? 'justify-center' : 'justify-start'\n        )}\n      >\n        {flexRender(header.column.columnDef.header, header.getContext())}\n        {sortDirection && isSortableTable && (\n          <div\n            className={cn(\n              'flex',\n              'items-center',\n              'relative',\n              'size-6',\n              'ml-2',\n              isHovered ? 'bg-primary-200' : 'bg-primary-100',\n              'rounded-sm'\n            )}\n          >\n            <SortIcon direction={sortDirection} />\n          </div>\n        )}\n        {includeTotal && (\n          <StyledCount size=\"sm\" weight=\"normal\">\n            ({totalRows} {totalSuffix})\n          </StyledCount>\n        )}\n      </div>\n    </StyledTableHeaderCell>\n  )\n}\n"],"mappings":";;;;;;;;;;AAoBA,IAAM,cAAc,OAAO,MAAM,EAC/B,MAAM;CAAC;CAAiB;CAAqB;CAAU;AAAmB,EAC5E,CAAC;AAED,IAAM,wBAAwB,OAAO,MAAM,YAAY;CACrD,MAAM,CAAC;CACP,UAAU,EACR,YAAY,EACV,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,EACF,EACF;AACF,CAAC;AAED,IAAM,YAAY;CAChB,KAAK;CACL,MAAM;AACR;AAEA,IAAM,YAAY,EAAE,gBAClB,wBAAA,cAAC,MAAD;CACE,IAAI,UAAU;CACd,MAAK;CACL,WAAU;AACX,CAAA;AAGH,IAAa,uBAAuB,EAClC,QACA,eAAe,OACf,cAAc,SACd,UACA,WACA,GAAG,YACuB;CAC1B,MAAM,gBAAgB,OAAO,OAAO,YAAY;CAChD,MAAM,EAAE,YAAY,iBAAiB,gBAAgB,aAAa;CAElE,MAAM,eAAe,OAAO,OAAO,WAAW;CAE9C,MAAM,YAAY,YAAY,GAAG,MAAM;CAEvC,MAAM,EAAE,YAAY,cAAc,SAAS,CAAC,CAAC;CAE7C,MAAM,iBACJ,OACA,aACG;EACH,IAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,KAAK;GAC9C,MAAM,eAAe;GACrB,SAAS,KAAgB;EAC3B;CACF;CAEA,MAAM,uBAAuB,OAAO,OAAO,wBAAwB;CAEnE,OACE,wBAAA,cAAC,uBAAD;EACE,YAAY,mBAAmB;EAC/B,SAAS,OAAO;EAChB,SACE,mBAAmB,gBAAgB,uBAC/B,uBACA,KAAA;EAEN,YAAY,UACV,mBACA,gBACA,wBACA,cAAc,OAAO,oBAAoB;EAE3C,UAAU,mBAAmB,eAAe,IAAI;EAChD,GAAI;EACO;EACX,GAAI;CAgCiB,GA9BrB,wBAAA,cAAC,OAAD,EACE,WAAW,GACT,QACA,SACA,gBACA,OAAO,UAAU,IAAI,mBAAmB,eAC1C,EAuBG,GArBF,WAAW,OAAO,OAAO,UAAU,QAAQ,OAAO,WAAW,CAAC,GAC9D,iBAAiB,mBAChB,wBAAA,cAAC,OAAD,EACE,WAAW,GACT,QACA,gBACA,YACA,UACA,QACA,YAAY,mBAAmB,kBAC/B,YACF,EAGG,GADH,wBAAA,cAAC,UAAD,EAAU,WAAW,cAAgB,CAAA,CAClC,GAEN,gBACC,wBAAA,cAAC,aAAD;EAAa,MAAK;EAAK,QAAO;CAEjB,GAF0B,KACnC,WAAU,KAAE,aAAY,GACf,CAEZ,CACgB;AAE3B"}
+{"version":3,"file":"DataTableHeaderCell.js","names":[],"sources":["../../../src/components/data-table/DataTableHeaderCell.tsx"],"sourcesContent":["import { ArrowDown, ArrowUp } from '@atom-learning/icons'\nimport type { Header } from '@tanstack/react-table'\nimport { flexRender } from '@tanstack/react-table'\nimport * as React from 'react'\nimport { useHover } from 'react-aria'\n\nimport { styled } from '~/styled'\nimport { cn } from '~/styled'\n\nimport { Icon } from '../icon/Icon'\nimport { Table } from '../table/Table'\nimport { Text } from '../text/Text'\nimport { useDataTable } from './DataTableContext'\n\ntype DataTableHeaderProps = React.ComponentProps<typeof Table.HeaderCell> & {\n  header: Header<Record<string, unknown>, unknown>\n  includeTotal?: boolean\n  totalSuffix?: string\n}\n\nconst StyledCount = styled(Text, {\n  base: ['text-grey-600', 'whitespace-nowrap', 'hidden', 'min-[800px]:block']\n})\n\nconst StyledTableHeaderCell = styled(Table.HeaderCell, {\n  base: [],\n  variants: {\n    isSortable: {\n      true: [\n        '*:relative',\n        'before:absolute',\n        'before:bg-primary-100',\n        'before:duration-200',\n        'before:ease-in',\n        'before:inset-0',\n        'before:opacity-0',\n        'before:transition-opacity',\n        'cursor-pointer',\n        'hover:before:opacity-50',\n        'relative'\n      ]\n    }\n  }\n})\n\nconst sortIcons = {\n  asc: ArrowUp,\n  desc: ArrowDown\n}\n\nconst SortIcon = ({ direction }: { direction: 'asc' | 'desc' }) => (\n  <Icon\n    is={sortIcons[direction]}\n    size=\"sm\"\n    className=\"stroke-primary-900 absolute left-1\"\n  />\n)\n\nexport const DataTableHeaderCell = ({\n  header,\n  includeTotal = false,\n  totalSuffix = 'items',\n  children,\n  className,\n  ...props\n}: DataTableHeaderProps) => {\n  const sortDirection = header.column.getIsSorted()\n  const { isSortable: isSortableTable, getRowModel } = useDataTable()\n  // false for display columns, e.g. \"Actions\"\n  const isDataColumn = header.column.getCanSort()\n\n  const totalRows = getRowModel()?.rows?.length\n\n  const { hoverProps, isHovered } = useHover({})\n\n  const handleKeyDown = (\n    event: React.KeyboardEvent<HTMLTableCellElement>,\n    callback: (event: unknown) => void | undefined\n  ) => {\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault()\n      callback(event as unknown)\n    }\n  }\n\n  const headerSortingHandler = header.column.getToggleSortingHandler()\n\n  return (\n    <StyledTableHeaderCell\n      isSortable={isSortableTable && isDataColumn}\n      colSpan={header.colSpan}\n      onClick={\n        isSortableTable && isDataColumn && headerSortingHandler\n          ? headerSortingHandler\n          : undefined\n      }\n      onKeyDown={(event) =>\n        isSortableTable &&\n        isDataColumn &&\n        headerSortingHandler &&\n        handleKeyDown(event, headerSortingHandler)\n      }\n      tabIndex={isSortableTable && isDataColumn ? 0 : -1}\n      {...hoverProps}\n      className={className}\n      {...props}\n    >\n      <div\n        className={cn(\n          'flex',\n          'gap-1',\n          'items-center',\n          header.colSpan > 1 ? 'justify-center' : 'justify-start'\n        )}\n      >\n        {flexRender(header.column.columnDef.header, header.getContext())}\n        {sortDirection && isSortableTable && (\n          <div\n            className={cn(\n              'flex',\n              'items-center',\n              'relative',\n              'size-6',\n              'ml-2',\n              isHovered ? 'bg-primary-200' : 'bg-primary-100',\n              'rounded-sm'\n            )}\n          >\n            <SortIcon direction={sortDirection} />\n          </div>\n        )}\n        {includeTotal && (\n          <StyledCount size=\"sm\" weight=\"normal\">\n            ({totalRows} {totalSuffix})\n          </StyledCount>\n        )}\n      </div>\n    </StyledTableHeaderCell>\n  )\n}\n"],"mappings":";;;;;;;;;;AAoBA,IAAM,cAAc,OAAO,MAAM,EAC/B,MAAM;CAAC;CAAiB;CAAqB;CAAU;CAAoB,EAC5E,CAAC;AAEF,IAAM,wBAAwB,OAAO,MAAM,YAAY;CACrD,MAAM,EAAE;CACR,UAAU,EACR,YAAY,EACV,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,EACF,EACF;CACF,CAAC;AAEF,IAAM,YAAY;CAChB,KAAK;CACL,MAAM;CACP;AAED,IAAM,YAAY,EAAE,gBAClB,wBAAA,cAAC,MAAD;CACE,IAAI,UAAU;CACd,MAAK;CACL,WAAU;CACV,CAAA;AAGJ,IAAa,uBAAuB,EAClC,QACA,eAAe,OACf,cAAc,SACd,UACA,WACA,GAAG,YACuB;CAC1B,MAAM,gBAAgB,OAAO,OAAO,aAAa;CACjD,MAAM,EAAE,YAAY,iBAAiB,gBAAgB,cAAc;CAEnE,MAAM,eAAe,OAAO,OAAO,YAAY;CAE/C,MAAM,YAAY,aAAa,EAAE,MAAM;CAEvC,MAAM,EAAE,YAAY,cAAc,SAAS,EAAE,CAAC;CAE9C,MAAM,iBACJ,OACA,aACG;AACH,MAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,KAAK;AAC9C,SAAM,gBAAgB;AACtB,YAAS,MAAiB;;;CAI9B,MAAM,uBAAuB,OAAO,OAAO,yBAAyB;AAEpE,QACE,wBAAA,cAAC,uBAAD;EACE,YAAY,mBAAmB;EAC/B,SAAS,OAAO;EAChB,SACE,mBAAmB,gBAAgB,uBAC/B,uBACA,KAAA;EAEN,YAAY,UACV,mBACA,gBACA,wBACA,cAAc,OAAO,qBAAqB;EAE5C,UAAU,mBAAmB,eAAe,IAAI;EAChD,GAAI;EACO;EACX,GAAI;EAgCkB,EA9BtB,wBAAA,cAAC,OAAD,EACE,WAAW,GACT,QACA,SACA,gBACA,OAAO,UAAU,IAAI,mBAAmB,gBACzC,EAuBG,EArBH,WAAW,OAAO,OAAO,UAAU,QAAQ,OAAO,YAAY,CAAC,EAC/D,iBAAiB,mBAChB,wBAAA,cAAC,OAAD,EACE,WAAW,GACT,QACA,gBACA,YACA,UACA,QACA,YAAY,mBAAmB,kBAC/B,aACD,EAGG,EADJ,wBAAA,cAAC,UAAD,EAAU,WAAW,eAAiB,CAAA,CAClC,EAEP,gBACC,wBAAA,cAAC,aAAD;EAAa,MAAK;EAAK,QAAO;EAEhB,EAFyB,KACnC,WAAU,KAAE,aAAY,IACd,CAEZ,CACgB"}

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

@@ -1 +1 @@
-{"version":3,"file":"DataTableLoading.js","names":[],"sources":["../../../src/components/data-table/DataTableLoading.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { Loader } from '../loader/Loader'\nimport { AsyncDataState } from './DataTable.types'\nimport { useDataTable } from './DataTableContext'\n\nconst PendingState = styled(Loader, {\n  base: [\n    'absolute',\n    'left-1/2',\n    'top-1/2',\n    '-translate-x-1/2',\n    '-translate-y-1/2',\n    'z-1'\n  ]\n})\n\nexport const DataTableLoading = (\n  props: React.ComponentProps<typeof PendingState>\n) => {\n  const { asyncDataState } = useDataTable()\n\n  if (asyncDataState !== AsyncDataState.PENDING) return null\n\n  return <PendingState {...props} />\n}\n"],"mappings":";;;;;;AAQA,IAAM,eAAe,OAAO,QAAQ,EAClC,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;AACF,EACF,CAAC;AAED,IAAa,oBACX,UACG;CACH,MAAM,EAAE,mBAAmB,aAAa;CAExC,IAAI,mBAAmB,eAAe,SAAS,OAAO;CAEtD,OAAO,wBAAA,cAAC,cAAiB,KAAQ;AACnC"}
+{"version":3,"file":"DataTableLoading.js","names":[],"sources":["../../../src/components/data-table/DataTableLoading.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { Loader } from '../loader/Loader'\nimport { AsyncDataState } from './DataTable.types'\nimport { useDataTable } from './DataTableContext'\n\nconst PendingState = styled(Loader, {\n  base: [\n    'absolute',\n    'left-1/2',\n    'top-1/2',\n    '-translate-x-1/2',\n    '-translate-y-1/2',\n    'z-1'\n  ]\n})\n\nexport const DataTableLoading = (\n  props: React.ComponentProps<typeof PendingState>\n) => {\n  const { asyncDataState } = useDataTable()\n\n  if (asyncDataState !== AsyncDataState.PENDING) return null\n\n  return <PendingState {...props} />\n}\n"],"mappings":";;;;;;AAQA,IAAM,eAAe,OAAO,QAAQ,EAClC,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACD,EACF,CAAC;AAEF,IAAa,oBACX,UACG;CACH,MAAM,EAAE,mBAAmB,cAAc;AAEzC,KAAI,mBAAmB,eAAe,QAAS,QAAO;AAEtD,QAAO,wBAAA,cAAC,cAAiB,MAAS"}

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

@@ -1 +1 @@
-{"version":3,"file":"DataTableMetaData.js","names":[],"sources":["../../../src/components/data-table/DataTableMetaData.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Text } from '../text/Text'\nimport { useDataTable } from './DataTableContext'\n\nconst defaultCopy = {\n  sorted_by: 'Sorted by',\n  ascending: 'ascending',\n  descending: 'descending',\n  separator: '-'\n}\n\nexport const DataTableMetaData = ({\n  copy,\n  ...rest\n}: React.ComponentProps<typeof Text> & {\n  copy?: {\n    sorted_by?: string\n    ascending?: string\n    descending?: string\n    separator?: string\n  }\n  sortLabel?: string\n}) => {\n  const { getState, columns, getRowModel, rowSelection } = useDataTable()\n  const { sorting } = getState()\n  const isSorted = sorting.length > 0\n\n  const totalRows = getRowModel()?.rows?.length\n\n  const selectedRows = Object.keys(rowSelection || {}).length\n\n  const copyMerged = { ...defaultCopy, ...copy }\n\n  const getColumnDisplayName = (id: string) => {\n    const sortedColumn = columns.find((col) => col.id === id)\n    return sortedColumn?.header || id\n  }\n\n  const getSortingString = (sorting) => {\n    return `${copyMerged.separator} ${\n      copyMerged.sorted_by\n    } ${getColumnDisplayName(sorting[0].id)} ${\n      sorting[0].desc ? copyMerged.descending : copyMerged.ascending\n    }`\n  }\n\n  return (\n    <Text weight=\"bold\" {...rest}>{`${selectedRows || totalRows} ${\n      (selectedRows || totalRows) === 1 ? 'item' : 'items'\n    } ${selectedRows ? 'selected' : ''} ${\n      isSorted ? getSortingString(sorting) : ''\n    }`}</Text>\n  )\n}\n"],"mappings":";;;;AAKA,IAAM,cAAc;CAClB,WAAW;CACX,WAAW;CACX,YAAY;CACZ,WAAW;AACb;AAEA,IAAa,qBAAqB,EAChC,MACA,GAAG,WASC;CACJ,MAAM,EAAE,UAAU,SAAS,aAAa,iBAAiB,aAAa;CACtE,MAAM,EAAE,YAAY,SAAS;CAC7B,MAAM,WAAW,QAAQ,SAAS;CAElC,MAAM,YAAY,YAAY,GAAG,MAAM;CAEvC,MAAM,eAAe,OAAO,KAAK,gBAAgB,CAAC,CAAC,EAAE;CAErD,MAAM,aAAa;EAAE,GAAG;EAAa,GAAG;CAAK;CAE7C,MAAM,wBAAwB,OAAe;EAE3C,OADqB,QAAQ,MAAM,QAAQ,IAAI,OAAO,EAC/C,GAAc,UAAU;CACjC;CAEA,MAAM,oBAAoB,YAAY;EACpC,OAAO,GAAG,WAAW,UAAU,GAC7B,WAAW,UACZ,GAAG,qBAAqB,QAAQ,GAAG,EAAE,EAAE,GACtC,QAAQ,GAAG,OAAO,WAAW,aAAa,WAAW;CAEzD;CAEA,OACE,wBAAA,cAAC,MAAD;EAAM,QAAO;EAAO,GAAI;CAIf,GAJsB,GAAG,gBAAgB,UAAU,IACzD,gBAAgB,eAAe,IAAI,SAAS,QAC9C,GAAG,eAAe,aAAa,GAAG,GACjC,WAAW,iBAAiB,OAAO,IAAI,IAChC;AAEb"}
+{"version":3,"file":"DataTableMetaData.js","names":[],"sources":["../../../src/components/data-table/DataTableMetaData.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Text } from '../text/Text'\nimport { useDataTable } from './DataTableContext'\n\nconst defaultCopy = {\n  sorted_by: 'Sorted by',\n  ascending: 'ascending',\n  descending: 'descending',\n  separator: '-'\n}\n\nexport const DataTableMetaData = ({\n  copy,\n  ...rest\n}: React.ComponentProps<typeof Text> & {\n  copy?: {\n    sorted_by?: string\n    ascending?: string\n    descending?: string\n    separator?: string\n  }\n  sortLabel?: string\n}) => {\n  const { getState, columns, getRowModel, rowSelection } = useDataTable()\n  const { sorting } = getState()\n  const isSorted = sorting.length > 0\n\n  const totalRows = getRowModel()?.rows?.length\n\n  const selectedRows = Object.keys(rowSelection || {}).length\n\n  const copyMerged = { ...defaultCopy, ...copy }\n\n  const getColumnDisplayName = (id: string) => {\n    const sortedColumn = columns.find((col) => col.id === id)\n    return sortedColumn?.header || id\n  }\n\n  const getSortingString = (sorting) => {\n    return `${copyMerged.separator} ${\n      copyMerged.sorted_by\n    } ${getColumnDisplayName(sorting[0].id)} ${\n      sorting[0].desc ? copyMerged.descending : copyMerged.ascending\n    }`\n  }\n\n  return (\n    <Text weight=\"bold\" {...rest}>{`${selectedRows || totalRows} ${\n      (selectedRows || totalRows) === 1 ? 'item' : 'items'\n    } ${selectedRows ? 'selected' : ''} ${\n      isSorted ? getSortingString(sorting) : ''\n    }`}</Text>\n  )\n}\n"],"mappings":";;;;AAKA,IAAM,cAAc;CAClB,WAAW;CACX,WAAW;CACX,YAAY;CACZ,WAAW;CACZ;AAED,IAAa,qBAAqB,EAChC,MACA,GAAG,WASC;CACJ,MAAM,EAAE,UAAU,SAAS,aAAa,iBAAiB,cAAc;CACvE,MAAM,EAAE,YAAY,UAAU;CAC9B,MAAM,WAAW,QAAQ,SAAS;CAElC,MAAM,YAAY,aAAa,EAAE,MAAM;CAEvC,MAAM,eAAe,OAAO,KAAK,gBAAgB,EAAE,CAAC,CAAC;CAErD,MAAM,aAAa;EAAE,GAAG;EAAa,GAAG;EAAM;CAE9C,MAAM,wBAAwB,OAAe;AAE3C,SADqB,QAAQ,MAAM,QAAQ,IAAI,OAAO,GAAG,EACpC,UAAU;;CAGjC,MAAM,oBAAoB,YAAY;AACpC,SAAO,GAAG,WAAW,UAAU,GAC7B,WAAW,UACZ,GAAG,qBAAqB,QAAQ,GAAG,GAAG,CAAC,GACtC,QAAQ,GAAG,OAAO,WAAW,aAAa,WAAW;;AAIzD,QACE,wBAAA,cAAC,MAAD;EAAM,QAAO;EAAO,GAAI;EAId,EAJqB,GAAG,gBAAgB,UAAU,IACzD,gBAAgB,eAAe,IAAI,SAAS,QAC9C,GAAG,eAAe,aAAa,GAAG,GACjC,WAAW,iBAAiB,QAAQ,GAAG,KAC/B"}

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

@@ -1 +1 @@
-{"version":3,"file":"DataTableRow.js","names":[],"sources":["../../../src/components/data-table/DataTableRow.tsx"],"sourcesContent":["import { ChevronDown, ChevronRight } from '@atom-learning/icons'\nimport type { Row } from '@tanstack/react-table'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\nimport { cn } from '~/styled'\n\nimport { Icon } from '../icon/Icon'\nimport { Table } from '../table/Table'\nimport { useDataTable } from './DataTableContext'\nimport { DataTableDataCell } from './DataTableDataCell'\nimport { DataTableRowSelectionCheckbox } from './DataTableRowSelectionCheckbox'\n\nexport type DataTableRowProps = React.ComponentProps<typeof Table.Row> & {\n  row: Row<Record<string, unknown>>\n  rowAction?: (row: Record<string, unknown>, event: React.MouseEvent) => void\n}\n\nconst StyledRow = styled(Table.Row, {\n  base: ['bg-[initial]', 'relative'],\n  variants: {\n    isSelected: {\n      true: ['bg-primary-100!']\n    },\n    isDisabled: {\n      true: ['opacity-30']\n    },\n    isFocusable: {\n      true: [\n        'translate-y-0',\n        'duration-200',\n        'ease-out',\n        'transition-shadow',\n        'transition-transform',\n        'hover:shadow-[0px_4px_11px_0px_hsla(0,0%,12%,0.12)]',\n        'hover:-translate-y-px',\n        'hover:z-3',\n        'focus:outline-2',\n        'focus:outline-primary-500',\n        'focus:outline-solid',\n        'focus:-outline-offset-4',\n        'focus:[&_td]:bg-transparent'\n      ]\n    }\n  }\n})\n\nconst isElementInteractive = (element: Element | null): boolean => {\n  if (!element) return false\n  if (element.closest('button, a, input, select, textarea')) return true\n  if (element.getAttribute('role') === 'button') return true\n  return false\n}\n\nexport const DataTableRow = ({ row, rowAction }: DataTableRowProps) => {\n  const { enableRowSelection, disabledRows, getCanSomeRowsExpand } =\n    useDataTable()\n\n  const isDisabled = !!disabledRows?.[row.id]\n\n  const toggleExpandHandler = row.getToggleExpandedHandler()\n  const toggleSelectHandler = row.getToggleSelectedHandler()\n\n  const getCheckedState = (): boolean | 'indeterminate' => {\n    if (row.getIsSomeSelected()) return 'indeterminate'\n    return row.getIsSelected()\n  }\n\n  const handleRowClick = (\n    rowData: Row<Record<string, unknown>>,\n    event: React.MouseEvent<HTMLTableRowElement>\n  ) => {\n    if (!rowAction) return\n\n    // Skip if clicking on an interactive element\n    const rowElement = (event.target as Element).closest('tr')\n    if (!rowElement || isElementInteractive(event.target as Element)) {\n      return\n    }\n\n    rowAction(rowData.original, event)\n  }\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLTableRowElement>) => {\n    if (event.key === 'Enter' || event.key === ' ') {\n      if (isElementInteractive(event.target as Element)) {\n        return\n      }\n      event.preventDefault()\n      handleRowClick(\n        row,\n        event as unknown as React.MouseEvent<HTMLTableRowElement>\n      )\n    }\n    if (event.key === 'ArrowDown') {\n      event.preventDefault()\n      const currentRow = (event.target as HTMLElement).closest('tr')\n      const nextRow = currentRow?.nextElementSibling as HTMLElement\n      if (nextRow && nextRow.tagName === 'TR') {\n        nextRow.focus()\n      }\n    }\n    if (event.key === 'ArrowUp') {\n      event.preventDefault()\n      const currentRow = (event.target as HTMLElement).closest('tr')\n      const previousRow = currentRow?.previousElementSibling as HTMLElement\n      if (previousRow && previousRow.tagName === 'TR') {\n        previousRow.focus()\n      }\n    }\n  }\n\n  return (\n    <StyledRow\n      isSelected={row.getIsSelected()}\n      isDisabled={isDisabled}\n      isFocusable={!!rowAction && !isDisabled}\n      {...(rowAction && {\n        onClick: (event) => handleRowClick(row, event),\n        tabIndex: 0,\n        className: 'cursor-pointer',\n        onKeyDown: handleKeyDown\n      })}\n    >\n      {getCanSomeRowsExpand() && (\n        <Table.Cell\n          data-testid={`expand-icon-${row.id}`}\n          onClick={toggleExpandHandler}\n          className={cn(\n            'w-10',\n            row.getCanExpand() ? 'cursor-pointer' : 'cursor-auto'\n          )}\n        >\n          {row.getCanExpand() && (\n            <Icon is={row.getIsExpanded() ? ChevronDown : ChevronRight} />\n          )}\n        </Table.Cell>\n      )}\n\n      {enableRowSelection && (\n        <Table.Cell className=\"w-10\">\n          <DataTableRowSelectionCheckbox\n            row={row}\n            checked={getCheckedState()}\n            onCheckedChange={toggleSelectHandler}\n          />\n        </Table.Cell>\n      )}\n      {row.getVisibleCells().map((cell) => {\n        return <DataTableDataCell key={cell.id} cell={cell} />\n      })}\n    </StyledRow>\n  )\n}\n"],"mappings":";;;;;;;;;AAkBA,IAAM,YAAY,OAAO,MAAM,KAAK;CAClC,MAAM,CAAC,gBAAgB,UAAU;CACjC,UAAU;EACR,YAAY,EACV,MAAM,CAAC,iBAAiB,EAC1B;EACA,YAAY,EACV,MAAM,CAAC,YAAY,EACrB;EACA,aAAa,EACX,MAAM;GACJ;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF,EACF;CACF;AACF,CAAC;AAED,IAAM,wBAAwB,YAAqC;CACjE,IAAI,CAAC,SAAS,OAAO;CACrB,IAAI,QAAQ,QAAQ,oCAAoC,GAAG,OAAO;CAClE,IAAI,QAAQ,aAAa,MAAM,MAAM,UAAU,OAAO;CACtD,OAAO;AACT;AAEA,IAAa,gBAAgB,EAAE,KAAK,gBAAmC;CACrE,MAAM,EAAE,oBAAoB,cAAc,yBACxC,aAAa;CAEf,MAAM,aAAa,CAAC,CAAC,eAAe,IAAI;CAExC,MAAM,sBAAsB,IAAI,yBAAyB;CACzD,MAAM,sBAAsB,IAAI,yBAAyB;CAEzD,MAAM,wBAAmD;EACvD,IAAI,IAAI,kBAAkB,GAAG,OAAO;EACpC,OAAO,IAAI,cAAc;CAC3B;CAEA,MAAM,kBACJ,SACA,UACG;EACH,IAAI,CAAC,WAAW;EAIhB,IAAI,CADgB,MAAM,OAAmB,QAAQ,IAChD,KAAc,qBAAqB,MAAM,MAAiB,GAC7D;EAGF,UAAU,QAAQ,UAAU,KAAK;CACnC;CAEA,MAAM,iBAAiB,UAAoD;EACzE,IAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,KAAK;GAC9C,IAAI,qBAAqB,MAAM,MAAiB,GAC9C;GAEF,MAAM,eAAe;GACrB,eACE,KACA,KACF;EACF;EACA,IAAI,MAAM,QAAQ,aAAa;GAC7B,MAAM,eAAe;GAErB,MAAM,UADc,MAAM,OAAuB,QAAQ,IACzC,GAAY;GAC5B,IAAI,WAAW,QAAQ,YAAY,MACjC,QAAQ,MAAM;EAElB;EACA,IAAI,MAAM,QAAQ,WAAW;GAC3B,MAAM,eAAe;GAErB,MAAM,cADc,MAAM,OAAuB,QAAQ,IACrC,GAAY;GAChC,IAAI,eAAe,YAAY,YAAY,MACzC,YAAY,MAAM;EAEtB;CACF;CAEA,OACE,wBAAA,cAAC,WAAD;EACE,YAAY,IAAI,cAAc;EAClB;EACZ,aAAa,CAAC,CAAC,aAAa,CAAC;EAC7B,GAAK,aAAa;GAChB,UAAU,UAAU,eAAe,KAAK,KAAK;GAC7C,UAAU;GACV,WAAW;GACX,WAAW;EACb;CA6BS,GA3BR,qBAAqB,KACpB,wBAAA,cAAC,MAAM,MAAP;EACE,eAAa,eAAe,IAAI;EAChC,SAAS;EACT,WAAW,GACT,QACA,IAAI,aAAa,IAAI,mBAAmB,aAC1C;CAKU,GAHT,IAAI,aAAa,KAChB,wBAAA,cAAC,MAAD,EAAM,IAAI,IAAI,cAAc,IAAI,cAAc,aAAe,CAAA,CAErD,GAGb,sBACC,wBAAA,cAAC,MAAM,MAAP,EAAY,WAAU,OAMV,GALV,wBAAA,cAAC,+BAAD;EACO;EACL,SAAS,gBAAgB;EACzB,iBAAiB;CAClB,CAAA,CACS,GAEb,IAAI,gBAAgB,EAAE,KAAK,SAAS;EACnC,OAAO,wBAAA,cAAC,mBAAD;GAAmB,KAAK,KAAK;GAAU;EAAO,CAAA;CACvD,CAAC,CACQ;AAEf"}
+{"version":3,"file":"DataTableRow.js","names":[],"sources":["../../../src/components/data-table/DataTableRow.tsx"],"sourcesContent":["import { ChevronDown, ChevronRight } from '@atom-learning/icons'\nimport type { Row } from '@tanstack/react-table'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\nimport { cn } from '~/styled'\n\nimport { Icon } from '../icon/Icon'\nimport { Table } from '../table/Table'\nimport { useDataTable } from './DataTableContext'\nimport { DataTableDataCell } from './DataTableDataCell'\nimport { DataTableRowSelectionCheckbox } from './DataTableRowSelectionCheckbox'\n\nexport type DataTableRowProps = React.ComponentProps<typeof Table.Row> & {\n  row: Row<Record<string, unknown>>\n  rowAction?: (row: Record<string, unknown>, event: React.MouseEvent) => void\n}\n\nconst StyledRow = styled(Table.Row, {\n  base: ['bg-[initial]', 'relative'],\n  variants: {\n    isSelected: {\n      true: ['bg-primary-100!']\n    },\n    isDisabled: {\n      true: ['opacity-30']\n    },\n    isFocusable: {\n      true: [\n        'translate-y-0',\n        'duration-200',\n        'ease-out',\n        'transition-shadow',\n        'transition-transform',\n        'hover:shadow-[0px_4px_11px_0px_hsla(0,0%,12%,0.12)]',\n        'hover:-translate-y-px',\n        'hover:z-3',\n        'focus:outline-2',\n        'focus:outline-primary-500',\n        'focus:outline-solid',\n        'focus:-outline-offset-4',\n        'focus:[&_td]:bg-transparent'\n      ]\n    }\n  }\n})\n\nconst isElementInteractive = (element: Element | null): boolean => {\n  if (!element) return false\n  if (element.closest('button, a, input, select, textarea')) return true\n  if (element.getAttribute('role') === 'button') return true\n  return false\n}\n\nexport const DataTableRow = ({ row, rowAction }: DataTableRowProps) => {\n  const { enableRowSelection, disabledRows, getCanSomeRowsExpand } =\n    useDataTable()\n\n  const isDisabled = !!disabledRows?.[row.id]\n\n  const toggleExpandHandler = row.getToggleExpandedHandler()\n  const toggleSelectHandler = row.getToggleSelectedHandler()\n\n  const getCheckedState = (): boolean | 'indeterminate' => {\n    if (row.getIsSomeSelected()) return 'indeterminate'\n    return row.getIsSelected()\n  }\n\n  const handleRowClick = (\n    rowData: Row<Record<string, unknown>>,\n    event: React.MouseEvent<HTMLTableRowElement>\n  ) => {\n    if (!rowAction) return\n\n    // Skip if clicking on an interactive element\n    const rowElement = (event.target as Element).closest('tr')\n    if (!rowElement || isElementInteractive(event.target as Element)) {\n      return\n    }\n\n    rowAction(rowData.original, event)\n  }\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLTableRowElement>) => {\n    if (event.key === 'Enter' || event.key === ' ') {\n      if (isElementInteractive(event.target as Element)) {\n        return\n      }\n      event.preventDefault()\n      handleRowClick(\n        row,\n        event as unknown as React.MouseEvent<HTMLTableRowElement>\n      )\n    }\n    if (event.key === 'ArrowDown') {\n      event.preventDefault()\n      const currentRow = (event.target as HTMLElement).closest('tr')\n      const nextRow = currentRow?.nextElementSibling as HTMLElement\n      if (nextRow && nextRow.tagName === 'TR') {\n        nextRow.focus()\n      }\n    }\n    if (event.key === 'ArrowUp') {\n      event.preventDefault()\n      const currentRow = (event.target as HTMLElement).closest('tr')\n      const previousRow = currentRow?.previousElementSibling as HTMLElement\n      if (previousRow && previousRow.tagName === 'TR') {\n        previousRow.focus()\n      }\n    }\n  }\n\n  return (\n    <StyledRow\n      isSelected={row.getIsSelected()}\n      isDisabled={isDisabled}\n      isFocusable={!!rowAction && !isDisabled}\n      {...(rowAction && {\n        onClick: (event) => handleRowClick(row, event),\n        tabIndex: 0,\n        className: 'cursor-pointer',\n        onKeyDown: handleKeyDown\n      })}\n    >\n      {getCanSomeRowsExpand() && (\n        <Table.Cell\n          data-testid={`expand-icon-${row.id}`}\n          onClick={toggleExpandHandler}\n          className={cn(\n            'w-10',\n            row.getCanExpand() ? 'cursor-pointer' : 'cursor-auto'\n          )}\n        >\n          {row.getCanExpand() && (\n            <Icon is={row.getIsExpanded() ? ChevronDown : ChevronRight} />\n          )}\n        </Table.Cell>\n      )}\n\n      {enableRowSelection && (\n        <Table.Cell className=\"w-10\">\n          <DataTableRowSelectionCheckbox\n            row={row}\n            checked={getCheckedState()}\n            onCheckedChange={toggleSelectHandler}\n          />\n        </Table.Cell>\n      )}\n      {row.getVisibleCells().map((cell) => {\n        return <DataTableDataCell key={cell.id} cell={cell} />\n      })}\n    </StyledRow>\n  )\n}\n"],"mappings":";;;;;;;;;AAkBA,IAAM,YAAY,OAAO,MAAM,KAAK;CAClC,MAAM,CAAC,gBAAgB,WAAW;CAClC,UAAU;EACR,YAAY,EACV,MAAM,CAAC,kBAAkB,EAC1B;EACD,YAAY,EACV,MAAM,CAAC,aAAa,EACrB;EACD,aAAa,EACX,MAAM;GACJ;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD,EACF;EACF;CACF,CAAC;AAEF,IAAM,wBAAwB,YAAqC;AACjE,KAAI,CAAC,QAAS,QAAO;AACrB,KAAI,QAAQ,QAAQ,qCAAqC,CAAE,QAAO;AAClE,KAAI,QAAQ,aAAa,OAAO,KAAK,SAAU,QAAO;AACtD,QAAO;;AAGT,IAAa,gBAAgB,EAAE,KAAK,gBAAmC;CACrE,MAAM,EAAE,oBAAoB,cAAc,yBACxC,cAAc;CAEhB,MAAM,aAAa,CAAC,CAAC,eAAe,IAAI;CAExC,MAAM,sBAAsB,IAAI,0BAA0B;CAC1D,MAAM,sBAAsB,IAAI,0BAA0B;CAE1D,MAAM,wBAAmD;AACvD,MAAI,IAAI,mBAAmB,CAAE,QAAO;AACpC,SAAO,IAAI,eAAe;;CAG5B,MAAM,kBACJ,SACA,UACG;AACH,MAAI,CAAC,UAAW;AAIhB,MAAI,CADgB,MAAM,OAAmB,QAAQ,KAAK,IACvC,qBAAqB,MAAM,OAAkB,CAC9D;AAGF,YAAU,QAAQ,UAAU,MAAM;;CAGpC,MAAM,iBAAiB,UAAoD;AACzE,MAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,KAAK;AAC9C,OAAI,qBAAqB,MAAM,OAAkB,CAC/C;AAEF,SAAM,gBAAgB;AACtB,kBACE,KACA,MACD;;AAEH,MAAI,MAAM,QAAQ,aAAa;AAC7B,SAAM,gBAAgB;GAEtB,MAAM,UADc,MAAM,OAAuB,QAAQ,KAAK,EAClC;AAC5B,OAAI,WAAW,QAAQ,YAAY,KACjC,SAAQ,OAAO;;AAGnB,MAAI,MAAM,QAAQ,WAAW;AAC3B,SAAM,gBAAgB;GAEtB,MAAM,cADc,MAAM,OAAuB,QAAQ,KAAK,EAC9B;AAChC,OAAI,eAAe,YAAY,YAAY,KACzC,aAAY,OAAO;;;AAKzB,QACE,wBAAA,cAAC,WAAD;EACE,YAAY,IAAI,eAAe;EACnB;EACZ,aAAa,CAAC,CAAC,aAAa,CAAC;EAC7B,GAAK,aAAa;GAChB,UAAU,UAAU,eAAe,KAAK,MAAM;GAC9C,UAAU;GACV,WAAW;GACX,WAAW;GACZ;EA6BS,EA3BT,sBAAsB,IACrB,wBAAA,cAAC,MAAM,MAAP;EACE,eAAa,eAAe,IAAI;EAChC,SAAS;EACT,WAAW,GACT,QACA,IAAI,cAAc,GAAG,mBAAmB,cACzC;EAKU,EAHV,IAAI,cAAc,IACjB,wBAAA,cAAC,MAAD,EAAM,IAAI,IAAI,eAAe,GAAG,cAAc,cAAgB,CAAA,CAErD,EAGd,sBACC,wBAAA,cAAC,MAAM,MAAP,EAAY,WAAU,QAMT,EALX,wBAAA,cAAC,+BAAD;EACO;EACL,SAAS,iBAAiB;EAC1B,iBAAiB;EACjB,CAAA,CACS,EAEd,IAAI,iBAAiB,CAAC,KAAK,SAAS;AACnC,SAAO,wBAAA,cAAC,mBAAD;GAAmB,KAAK,KAAK;GAAU;GAAQ,CAAA;GACtD,CACQ"}

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

@@ -1 +1 @@
-{"version":3,"file":"DataTableRowSelectionCheckbox.js","names":[],"sources":["../../../src/components/data-table/DataTableRowSelectionCheckbox.tsx"],"sourcesContent":["import type { Row } from '@tanstack/react-table'\nimport * as React from 'react'\n\nimport { Checkbox } from '../checkbox/Checkbox'\nimport { useDataTable } from './DataTableContext'\n\nexport const DataTableRowSelectionCheckbox = ({\n  row,\n  checked,\n  onCheckedChange,\n  label = `Row ${row.id} selection`\n}: {\n  row: Row<Record<string, unknown>>\n  checked: boolean | 'indeterminate'\n  onCheckedChange: (value: boolean) => void\n  label?: string\n}): React.ReactElement => {\n  const { tableId } = useDataTable()\n\n  return (\n    <>\n      <label htmlFor={`${tableId}_row_${row.id}_selection`} className=\"sr-only\">\n        {label}\n      </label>\n      <Checkbox\n        size=\"lg\"\n        style={{ '--depth': row.depth }}\n        checked={checked}\n        onCheckedChange={onCheckedChange}\n        name={`${tableId}_row_${row.id}_selection`}\n        disabled={!row.getCanSelect()}\n        className=\"mr-3 ml-[calc((var(--depth,0)*2)*4px)]\"\n      />\n    </>\n  )\n}\n"],"mappings":";;;;AAMA,IAAa,iCAAiC,EAC5C,KACA,SACA,iBACA,QAAQ,OAAO,IAAI,GAAG,kBAME;CACxB,MAAM,EAAE,YAAY,aAAa;CAEjC,OACE,wBAAA,cAAA,QAAA,UAAA,MACE,wBAAA,cAAC,SAAD;EAAO,SAAS,GAAG,QAAQ,OAAO,IAAI,GAAG;EAAa,WAAU;CAEzD,GADJ,KACI,GACP,wBAAA,cAAC,UAAD;EACE,MAAK;EACL,OAAO,EAAE,WAAW,IAAI,MAAM;EACrB;EACQ;EACjB,MAAM,GAAG,QAAQ,OAAO,IAAI,GAAG;EAC/B,UAAU,CAAC,IAAI,aAAa;EAC5B,WAAU;CACX,CAAA,CACD;AAEN"}
+{"version":3,"file":"DataTableRowSelectionCheckbox.js","names":[],"sources":["../../../src/components/data-table/DataTableRowSelectionCheckbox.tsx"],"sourcesContent":["import type { Row } from '@tanstack/react-table'\nimport * as React from 'react'\n\nimport { Checkbox } from '../checkbox/Checkbox'\nimport { useDataTable } from './DataTableContext'\n\nexport const DataTableRowSelectionCheckbox = ({\n  row,\n  checked,\n  onCheckedChange,\n  label = `Row ${row.id} selection`\n}: {\n  row: Row<Record<string, unknown>>\n  checked: boolean | 'indeterminate'\n  onCheckedChange: (value: boolean) => void\n  label?: string\n}): React.ReactElement => {\n  const { tableId } = useDataTable()\n\n  return (\n    <>\n      <label htmlFor={`${tableId}_row_${row.id}_selection`} className=\"sr-only\">\n        {label}\n      </label>\n      <Checkbox\n        size=\"lg\"\n        style={{ '--depth': row.depth }}\n        checked={checked}\n        onCheckedChange={onCheckedChange}\n        name={`${tableId}_row_${row.id}_selection`}\n        disabled={!row.getCanSelect()}\n        className=\"mr-3 ml-[calc((var(--depth,0)*2)*4px)]\"\n      />\n    </>\n  )\n}\n"],"mappings":";;;;AAMA,IAAa,iCAAiC,EAC5C,KACA,SACA,iBACA,QAAQ,OAAO,IAAI,GAAG,kBAME;CACxB,MAAM,EAAE,YAAY,cAAc;AAElC,QACE,wBAAA,cAAA,QAAA,UAAA,MACE,wBAAA,cAAC,SAAD;EAAO,SAAS,GAAG,QAAQ,OAAO,IAAI,GAAG;EAAa,WAAU;EAExD,EADL,MACK,EACR,wBAAA,cAAC,UAAD;EACE,MAAK;EACL,OAAO,EAAE,WAAW,IAAI,OAAO;EACtB;EACQ;EACjB,MAAM,GAAG,QAAQ,OAAO,IAAI,GAAG;EAC/B,UAAU,CAAC,IAAI,cAAc;EAC7B,WAAU;EACV,CAAA,CACD"}

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

@@ -1 +1 @@
-{"version":3,"file":"DataTableSelectAllRowsCheckbox.js","names":[],"sources":["../../../src/components/data-table/DataTableSelectAllRowsCheckbox.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Checkbox } from '../checkbox/Checkbox'\nimport { Label } from '../label/Label'\nimport { useDataTable } from './DataTableContext'\n\nexport const DataTableSelectAllRowsCheckbox = ({\n  label = 'All rows selection'\n}: {\n  label?: string\n}) => {\n  const {\n    getIsAllPageRowsSelected,\n    getIsSomePageRowsSelected,\n    toggleAllPageRowsSelected,\n    tableId\n  } = useDataTable()\n\n  const getCheckedState = () => {\n    if (getIsSomePageRowsSelected()) return 'indeterminate'\n    if (getIsAllPageRowsSelected()) return true\n    return false\n  }\n\n  const updateCheckedState = () => {\n    if (getIsSomePageRowsSelected()) {\n      return toggleAllPageRowsSelected(false)\n    }\n    return toggleAllPageRowsSelected(!getIsAllPageRowsSelected())\n  }\n\n  return (\n    <>\n      <label htmlFor={`${tableId}_all_rows_selection`} className=\"sr-only\">\n        {label}\n      </label>\n      <Checkbox\n        size=\"lg\"\n        checked={getCheckedState()}\n        onCheckedChange={updateCheckedState}\n        name={`${tableId}_allRowsSelection`}\n      />\n    </>\n  )\n}\n"],"mappings":";;;;AAMA,IAAa,kCAAkC,EAC7C,QAAQ,2BAGJ;CACJ,MAAM,EACJ,0BACA,2BACA,2BACA,YACE,aAAa;CAEjB,MAAM,wBAAwB;EAC5B,IAAI,0BAA0B,GAAG,OAAO;EACxC,IAAI,yBAAyB,GAAG,OAAO;EACvC,OAAO;CACT;CAEA,MAAM,2BAA2B;EAC/B,IAAI,0BAA0B,GAC5B,OAAO,0BAA0B,KAAK;EAExC,OAAO,0BAA0B,CAAC,yBAAyB,CAAC;CAC9D;CAEA,OACE,wBAAA,cAAA,QAAA,UAAA,MACE,wBAAA,cAAC,SAAD;EAAO,SAAS,GAAG,QAAQ;EAAsB,WAAU;CAEpD,GADJ,KACI,GACP,wBAAA,cAAC,UAAD;EACE,MAAK;EACL,SAAS,gBAAgB;EACzB,iBAAiB;EACjB,MAAM,GAAG,QAAQ;CAClB,CAAA,CACD;AAEN"}
+{"version":3,"file":"DataTableSelectAllRowsCheckbox.js","names":[],"sources":["../../../src/components/data-table/DataTableSelectAllRowsCheckbox.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Checkbox } from '../checkbox/Checkbox'\nimport { Label } from '../label/Label'\nimport { useDataTable } from './DataTableContext'\n\nexport const DataTableSelectAllRowsCheckbox = ({\n  label = 'All rows selection'\n}: {\n  label?: string\n}) => {\n  const {\n    getIsAllPageRowsSelected,\n    getIsSomePageRowsSelected,\n    toggleAllPageRowsSelected,\n    tableId\n  } = useDataTable()\n\n  const getCheckedState = () => {\n    if (getIsSomePageRowsSelected()) return 'indeterminate'\n    if (getIsAllPageRowsSelected()) return true\n    return false\n  }\n\n  const updateCheckedState = () => {\n    if (getIsSomePageRowsSelected()) {\n      return toggleAllPageRowsSelected(false)\n    }\n    return toggleAllPageRowsSelected(!getIsAllPageRowsSelected())\n  }\n\n  return (\n    <>\n      <label htmlFor={`${tableId}_all_rows_selection`} className=\"sr-only\">\n        {label}\n      </label>\n      <Checkbox\n        size=\"lg\"\n        checked={getCheckedState()}\n        onCheckedChange={updateCheckedState}\n        name={`${tableId}_allRowsSelection`}\n      />\n    </>\n  )\n}\n"],"mappings":";;;;AAMA,IAAa,kCAAkC,EAC7C,QAAQ,2BAGJ;CACJ,MAAM,EACJ,0BACA,2BACA,2BACA,YACE,cAAc;CAElB,MAAM,wBAAwB;AAC5B,MAAI,2BAA2B,CAAE,QAAO;AACxC,MAAI,0BAA0B,CAAE,QAAO;AACvC,SAAO;;CAGT,MAAM,2BAA2B;AAC/B,MAAI,2BAA2B,CAC7B,QAAO,0BAA0B,MAAM;AAEzC,SAAO,0BAA0B,CAAC,0BAA0B,CAAC;;AAG/D,QACE,wBAAA,cAAA,QAAA,UAAA,MACE,wBAAA,cAAC,SAAD;EAAO,SAAS,GAAG,QAAQ;EAAsB,WAAU;EAEnD,EADL,MACK,EACR,wBAAA,cAAC,UAAD;EACE,MAAK;EACL,SAAS,iBAAiB;EAC1B,iBAAiB;EACjB,MAAM,GAAG,QAAQ;EACjB,CAAA,CACD"}

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

@@ -94,14 +94,14 @@ var DataTableTable = ({ sortable, striped, theme = "white", className, scrollOpt
 		numberOfStickyColumns: scrollOptions.numberOfStickyColumns,
 		scrollContainerCls: scrollOptions.scrollContainerCls,
 		scrollContainerkey: buildScrollContainerKey(),
-		className: cn(className, isPending && [
+		className: cn(isPending && [
 			"opacity-50",
 			"pointer-events-none",
 			"transition-opacity",
 			"duration-250",
 			"linear",
 			"delay-150"
-		])
+		], className)
 	}, /* @__PURE__ */ React$1.createElement(DataTableHead, {
 		theme,
 		sortable,

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

@@ -1 +1 @@
-{"version":3,"file":"DataTableTable.js","names":[],"sources":["../../../src/components/data-table/DataTableTable.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\nimport { cn } from '~/styled'\n\nimport { Table } from '../table/Table'\nimport { TableBody } from '../table/TableBody'\nimport { AsyncDataState } from './DataTable.types'\nimport { DataTableBody } from './DataTableBody'\nimport { useDataTable } from './DataTableContext'\nimport { DataTableHead } from './DataTableHead'\nimport { DataTableLoading } from './DataTableLoading'\n\nconst TableContainer = styled('div', {\n  base: ['p-2', 'bg-white', 'rounded-lg']\n})\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      stickyHeaderOffset?: number\n      headerCss?: string\n      numberOfStickyColumns?: number\n      scrollContainerCls?: string | string[]\n      showTotalInFirstColumn?: boolean\n      totalSuffix?: string\n    }\n    rowAction?: (row: Record<string, unknown>, event: React.MouseEvent) => void\n    withContainer?: boolean\n  }\n\nexport const DataTableTable = ({\n  sortable,\n  striped,\n  theme = 'white',\n  className,\n  scrollOptions = {\n    numberOfStickyColumns: 0,\n    stickyHeaderOffset: 0,\n    hasStickyHeader: false,\n    showTotalInFirstColumn: true,\n    totalSuffix: 'items'\n  },\n  rowAction,\n  withContainer = false,\n  ...props\n}: DataTableTableProps): JSX.Element | null => {\n  const {\n    asyncDataState,\n    getTotalRows,\n    getCanSomeRowsExpand,\n    rowSelection,\n    enableRowSelection,\n    tableId,\n    setTablePosition\n  } = useDataTable()\n\n  const tableRef = React.useRef<HTMLTableElement | null>(null)\n  const isTableVisible = React.useRef(false)\n  const isScrolling = React.useRef<boolean>(false)\n\n  const scrollTarget = React.useMemo(() => {\n    if (typeof window === 'undefined') return null\n    return window\n  }, [])\n\n  React.useEffect(() => {\n    if (!scrollTarget || typeof IntersectionObserver === 'undefined') {\n      return\n    }\n\n    const updatePosition = () => {\n      if (tableRef.current) {\n        const tableTop = tableRef.current.getBoundingClientRect().top\n        const tableBottom = tableRef.current.getBoundingClientRect().bottom\n\n        setTablePosition((prevPosition) => ({\n          ...prevPosition,\n          top: tableTop,\n          bottom: tableBottom\n        }))\n      }\n      isScrolling.current = false\n    }\n\n    const handleScroll = () => {\n      if (!isScrolling.current) {\n        requestAnimationFrame(updatePosition)\n        isScrolling.current = true\n      }\n    }\n\n    if (!tableRef.current) return\n\n    const observerOffset = scrollOptions?.stickyHeaderOffset || 0\n\n    const observerOptions = {\n      rootMargin: `-${observerOffset}px 0px -${observerOffset}px 0px`,\n      threshold: 0\n    }\n\n    const handleTableIntersection = (entries: IntersectionObserverEntry[]) => {\n      if (!entries || entries.length === 0) return\n      const entry = entries[0]\n\n      isTableVisible.current = entry.isIntersecting\n\n      if (scrollTarget) {\n        if (entry.isIntersecting) {\n          // add scroll listener\n          scrollTarget?.addEventListener('scroll', handleScroll)\n        } else {\n          // remove scroll listener\n          scrollTarget?.removeEventListener('scroll', handleScroll)\n        }\n      }\n\n      setTablePosition((prevPosition) => ({\n        ...prevPosition,\n        isVisible: entry.isIntersecting\n      }))\n    }\n\n    const tableObserver = new IntersectionObserver(\n      handleTableIntersection,\n      observerOptions\n    )\n\n    //only track table position if we have a sticky header or bulk actions active\n    if (\n      tableRef.current &&\n      (scrollOptions.hasStickyHeader ||\n        Object.keys(rowSelection || {}).length > 0)\n    ) {\n      tableObserver.observe(tableRef.current)\n    }\n\n    return () => {\n      tableObserver.disconnect()\n      if (scrollTarget) {\n        scrollTarget?.removeEventListener('scroll', handleScroll)\n      }\n    }\n  }, [\n    rowSelection,\n    scrollOptions.hasStickyHeader,\n    scrollOptions?.stickyHeaderOffset,\n    scrollTarget,\n    setTablePosition\n  ])\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  const tableComponent = (\n    <Table\n      corners=\"round\"\n      size=\"lg\"\n      {...props}\n      ref={tableRef}\n      numberOfStickyColumns={scrollOptions.numberOfStickyColumns}\n      scrollContainerCls={scrollOptions.scrollContainerCls}\n      scrollContainerkey={buildScrollContainerKey()}\n      className={cn(\n        className,\n        isPending && [\n          'opacity-50',\n          'pointer-events-none',\n          'transition-opacity',\n          'duration-250',\n          'linear',\n          'delay-150'\n        ]\n      )}\n    >\n      <DataTableHead\n        theme={theme}\n        sortable={sortable}\n        isSticky={scrollOptions.hasStickyHeader}\n        stickyOffset={scrollOptions.stickyHeaderOffset}\n        className={scrollOptions.headerCss}\n        showTotalInFirstColumn={scrollOptions.showTotalInFirstColumn}\n        totalSuffix={scrollOptions.totalSuffix}\n      />\n      <DataTableBody striped={striped} rowAction={rowAction} />\n    </Table>\n  )\n\n  return (\n    <>\n      <DataTableLoading />\n      {withContainer ? (\n        <TableContainer\n          className={cn(\n            scrollOptions.numberOfStickyColumns === 0 && 'overflow-x-auto'\n          )}\n        >\n          {tableComponent}\n        </TableContainer>\n      ) : (\n        tableComponent\n      )}\n    </>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"DataTableTable.js","names":[],"sources":["../../../src/components/data-table/DataTableTable.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\nimport { cn } from '~/styled'\n\nimport { Table } from '../table/Table'\nimport { TableBody } from '../table/TableBody'\nimport { AsyncDataState } from './DataTable.types'\nimport { DataTableBody } from './DataTableBody'\nimport { useDataTable } from './DataTableContext'\nimport { DataTableHead } from './DataTableHead'\nimport { DataTableLoading } from './DataTableLoading'\n\nconst TableContainer = styled('div', {\n  base: ['p-2', 'bg-white', 'rounded-lg']\n})\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      stickyHeaderOffset?: number\n      headerCss?: string\n      numberOfStickyColumns?: number\n      scrollContainerCls?: string | string[]\n      showTotalInFirstColumn?: boolean\n      totalSuffix?: string\n    }\n    rowAction?: (row: Record<string, unknown>, event: React.MouseEvent) => void\n    withContainer?: boolean\n  }\n\nexport const DataTableTable = ({\n  sortable,\n  striped,\n  theme = 'white',\n  className,\n  scrollOptions = {\n    numberOfStickyColumns: 0,\n    stickyHeaderOffset: 0,\n    hasStickyHeader: false,\n    showTotalInFirstColumn: true,\n    totalSuffix: 'items'\n  },\n  rowAction,\n  withContainer = false,\n  ...props\n}: DataTableTableProps): JSX.Element | null => {\n  const {\n    asyncDataState,\n    getTotalRows,\n    getCanSomeRowsExpand,\n    rowSelection,\n    enableRowSelection,\n    tableId,\n    setTablePosition\n  } = useDataTable()\n\n  const tableRef = React.useRef<HTMLTableElement | null>(null)\n  const isTableVisible = React.useRef(false)\n  const isScrolling = React.useRef<boolean>(false)\n\n  const scrollTarget = React.useMemo(() => {\n    if (typeof window === 'undefined') return null\n    return window\n  }, [])\n\n  React.useEffect(() => {\n    if (!scrollTarget || typeof IntersectionObserver === 'undefined') {\n      return\n    }\n\n    const updatePosition = () => {\n      if (tableRef.current) {\n        const tableTop = tableRef.current.getBoundingClientRect().top\n        const tableBottom = tableRef.current.getBoundingClientRect().bottom\n\n        setTablePosition((prevPosition) => ({\n          ...prevPosition,\n          top: tableTop,\n          bottom: tableBottom\n        }))\n      }\n      isScrolling.current = false\n    }\n\n    const handleScroll = () => {\n      if (!isScrolling.current) {\n        requestAnimationFrame(updatePosition)\n        isScrolling.current = true\n      }\n    }\n\n    if (!tableRef.current) return\n\n    const observerOffset = scrollOptions?.stickyHeaderOffset || 0\n\n    const observerOptions = {\n      rootMargin: `-${observerOffset}px 0px -${observerOffset}px 0px`,\n      threshold: 0\n    }\n\n    const handleTableIntersection = (entries: IntersectionObserverEntry[]) => {\n      if (!entries || entries.length === 0) return\n      const entry = entries[0]\n\n      isTableVisible.current = entry.isIntersecting\n\n      if (scrollTarget) {\n        if (entry.isIntersecting) {\n          // add scroll listener\n          scrollTarget?.addEventListener('scroll', handleScroll)\n        } else {\n          // remove scroll listener\n          scrollTarget?.removeEventListener('scroll', handleScroll)\n        }\n      }\n\n      setTablePosition((prevPosition) => ({\n        ...prevPosition,\n        isVisible: entry.isIntersecting\n      }))\n    }\n\n    const tableObserver = new IntersectionObserver(\n      handleTableIntersection,\n      observerOptions\n    )\n\n    //only track table position if we have a sticky header or bulk actions active\n    if (\n      tableRef.current &&\n      (scrollOptions.hasStickyHeader ||\n        Object.keys(rowSelection || {}).length > 0)\n    ) {\n      tableObserver.observe(tableRef.current)\n    }\n\n    return () => {\n      tableObserver.disconnect()\n      if (scrollTarget) {\n        scrollTarget?.removeEventListener('scroll', handleScroll)\n      }\n    }\n  }, [\n    rowSelection,\n    scrollOptions.hasStickyHeader,\n    scrollOptions?.stickyHeaderOffset,\n    scrollTarget,\n    setTablePosition\n  ])\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  const tableComponent = (\n    <Table\n      corners=\"round\"\n      size=\"lg\"\n      {...props}\n      ref={tableRef}\n      numberOfStickyColumns={scrollOptions.numberOfStickyColumns}\n      scrollContainerCls={scrollOptions.scrollContainerCls}\n      scrollContainerkey={buildScrollContainerKey()}\n      className={cn(\n        isPending && [\n          'opacity-50',\n          'pointer-events-none',\n          'transition-opacity',\n          'duration-250',\n          'linear',\n          'delay-150'\n        ],\n        className\n      )}\n    >\n      <DataTableHead\n        theme={theme}\n        sortable={sortable}\n        isSticky={scrollOptions.hasStickyHeader}\n        stickyOffset={scrollOptions.stickyHeaderOffset}\n        className={scrollOptions.headerCss}\n        showTotalInFirstColumn={scrollOptions.showTotalInFirstColumn}\n        totalSuffix={scrollOptions.totalSuffix}\n      />\n      <DataTableBody striped={striped} rowAction={rowAction} />\n    </Table>\n  )\n\n  return (\n    <>\n      <DataTableLoading />\n      {withContainer ? (\n        <TableContainer\n          className={cn(\n            scrollOptions.numberOfStickyColumns === 0 && 'overflow-x-auto'\n          )}\n        >\n          {tableComponent}\n        </TableContainer>\n      ) : (\n        tableComponent\n      )}\n    </>\n  )\n}\n"],"mappings":"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"}

package/dist/components/data-table/drag-and-drop/DragAndDropTable.js

@@ -36,11 +36,14 @@ var DragAndDropTable = ({ idColumn = "id", onDragAndDrop, sortable, striped, the
 		sortableIds: rowIds
 	}, /* @__PURE__ */ React$1.createElement(DataTableLoading, null), /* @__PURE__ */ React$1.createElement(Table, {
 		...props,
-		className: cn(className, isPending && [
+		className: cn(isPending && [
 			"opacity-50",
 			"pointer-events-none",
-			"transition-opacity,duration-250,linear,delay-150"
-		])
+			"transition-opacity",
+			"duration-250",
+			"linear",
+			"delay-150"
+		], className)
 	}, /* @__PURE__ */ React$1.createElement(DataTableHead, {
 		theme,
 		sortable

package/dist/components/data-table/drag-and-drop/DragAndDropTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"DragAndDropTable.js","names":[],"sources":["../../../../src/components/data-table/drag-and-drop/DragAndDropTable.tsx"],"sourcesContent":["import { arrayMove } from '@dnd-kit/sortable'\nimport * as React from 'react'\n\nimport { cn } from '~/styled'\n\nimport * as Sortable from '../../sortable'\nimport { Table } from '../../table/Table'\nimport { AsyncDataState, TAsyncDataResult } from '../DataTable.types'\nimport { useDataTable } from '../DataTableContext'\nimport { DataTableHead } from '../DataTableHead'\nimport { DataTableLoading } from '../DataTableLoading'\nimport type { DataTableTableProps } from '../DataTableTable'\nimport { DragAndDropTableBody } from './DragAndDropTableBody'\n\ntype DragAndDropTableProps = DataTableTableProps & {\n  className?: string\n  idColumn?: string\n  onDragAndDrop?: (onDragAndDropData: {\n    oldIndex: number\n    newIndex: number\n    newData: TAsyncDataResult\n  }) => void\n}\n\nexport const DragAndDropTable = ({\n  idColumn = 'id',\n  onDragAndDrop,\n  sortable,\n  striped,\n  theme,\n  className,\n  ...props\n}: DragAndDropTableProps) => {\n  const { asyncDataState, data, setData } = useDataTable()\n  const isPending = asyncDataState === AsyncDataState.PENDING\n\n  const rowIds = React.useMemo(\n    () =>\n      data.results.map((row) => {\n        return row[idColumn] as React.ReactText\n      }),\n    [data]\n  )\n  const handleSortChange = React.useCallback(\n    ({ oldIndex, newIndex }) => {\n      const sortedResults = arrayMove(data.results, oldIndex, newIndex)\n      const newData = { results: sortedResults, total: data.total }\n      setData({ results: sortedResults, total: data.total })\n      onDragAndDrop?.({ oldIndex, newIndex, newData })\n    },\n    [data, onDragAndDrop]\n  )\n\n  return (\n    <Sortable.Root onSortChange={handleSortChange} sortableIds={rowIds}>\n      <DataTableLoading />\n      <Table\n        {...props}\n        className={cn(\n          className,\n          isPending && [\n            'opacity-50',\n            'pointer-events-none',\n            'transition-opacity,duration-250,linear,delay-150'\n          ]\n        )}\n      >\n        <DataTableHead theme={theme} sortable={sortable} />\n        <DragAndDropTableBody striped={striped} idColumn={idColumn} />\n      </Table>\n    </Sortable.Root>\n  )\n}\n"],"mappings":";;;;;;;;;;;AAwBA,IAAa,oBAAoB,EAC/B,WAAW,MACX,eACA,UACA,SACA,OACA,WACA,GAAG,YACwB;CAC3B,MAAM,EAAE,gBAAgB,MAAM,YAAY,aAAa;CACvD,MAAM,YAAY,mBAAmB,eAAe;CAEpD,MAAM,SAAS,QAAM,cAEjB,KAAK,QAAQ,KAAK,QAAQ;EACxB,OAAO,IAAI;CACb,CAAC,GACH,CAAC,IAAI,CACP;CACA,MAAM,mBAAmB,QAAM,aAC5B,EAAE,UAAU,eAAe;EAC1B,MAAM,gBAAgB,UAAU,KAAK,SAAS,UAAU,QAAQ;EAChE,MAAM,UAAU;GAAE,SAAS;GAAe,OAAO,KAAK;EAAM;EAC5D,QAAQ;GAAE,SAAS;GAAe,OAAO,KAAK;EAAM,CAAC;EACrD,gBAAgB;GAAE;GAAU;GAAU;EAAQ,CAAC;CACjD,GACA,CAAC,MAAM,aAAa,CACtB;CAEA,OACE,wBAAA,cAAC,cAAD;EAAe,cAAc;EAAkB,aAAa;CAgB7C,GAfb,wBAAA,cAAC,kBAAA,IAAkB,GACnB,wBAAA,cAAC,OAAD;EACE,GAAI;EACJ,WAAW,GACT,WACA,aAAa;GACX;GACA;GACA;EACF,CACF;CAIK,GAFL,wBAAA,cAAC,eAAD;EAAsB;EAAiB;CAAW,CAAA,GAClD,wBAAA,cAAC,sBAAD;EAA+B;EAAmB;CAAW,CAAA,CACxD,CACM;AAEnB"}
+{"version":3,"file":"DragAndDropTable.js","names":[],"sources":["../../../../src/components/data-table/drag-and-drop/DragAndDropTable.tsx"],"sourcesContent":["import { arrayMove } from '@dnd-kit/sortable'\nimport * as React from 'react'\n\nimport { cn } from '~/styled'\n\nimport * as Sortable from '../../sortable'\nimport { Table } from '../../table/Table'\nimport { AsyncDataState, TAsyncDataResult } from '../DataTable.types'\nimport { useDataTable } from '../DataTableContext'\nimport { DataTableHead } from '../DataTableHead'\nimport { DataTableLoading } from '../DataTableLoading'\nimport type { DataTableTableProps } from '../DataTableTable'\nimport { DragAndDropTableBody } from './DragAndDropTableBody'\n\ntype DragAndDropTableProps = DataTableTableProps & {\n  className?: string\n  idColumn?: string\n  onDragAndDrop?: (onDragAndDropData: {\n    oldIndex: number\n    newIndex: number\n    newData: TAsyncDataResult\n  }) => void\n}\n\nexport const DragAndDropTable = ({\n  idColumn = 'id',\n  onDragAndDrop,\n  sortable,\n  striped,\n  theme,\n  className,\n  ...props\n}: DragAndDropTableProps) => {\n  const { asyncDataState, data, setData } = useDataTable()\n  const isPending = asyncDataState === AsyncDataState.PENDING\n\n  const rowIds = React.useMemo(\n    () =>\n      data.results.map((row) => {\n        return row[idColumn] as React.ReactText\n      }),\n    [data]\n  )\n  const handleSortChange = React.useCallback(\n    ({ oldIndex, newIndex }) => {\n      const sortedResults = arrayMove(data.results, oldIndex, newIndex)\n      const newData = { results: sortedResults, total: data.total }\n      setData({ results: sortedResults, total: data.total })\n      onDragAndDrop?.({ oldIndex, newIndex, newData })\n    },\n    [data, onDragAndDrop]\n  )\n\n  return (\n    <Sortable.Root onSortChange={handleSortChange} sortableIds={rowIds}>\n      <DataTableLoading />\n      <Table\n        {...props}\n        className={cn(\n          isPending && [\n            'opacity-50',\n            'pointer-events-none',\n            'transition-opacity',\n            'duration-250',\n            'linear',\n            'delay-150'\n          ],\n          className\n        )}\n      >\n        <DataTableHead theme={theme} sortable={sortable} />\n        <DragAndDropTableBody striped={striped} idColumn={idColumn} />\n      </Table>\n    </Sortable.Root>\n  )\n}\n"],"mappings":";;;;;;;;;;;AAwBA,IAAa,oBAAoB,EAC/B,WAAW,MACX,eACA,UACA,SACA,OACA,WACA,GAAG,YACwB;CAC3B,MAAM,EAAE,gBAAgB,MAAM,YAAY,cAAc;CACxD,MAAM,YAAY,mBAAmB,eAAe;CAEpD,MAAM,SAAS,QAAM,cAEjB,KAAK,QAAQ,KAAK,QAAQ;AACxB,SAAO,IAAI;GACX,EACJ,CAAC,KAAK,CACP;CACD,MAAM,mBAAmB,QAAM,aAC5B,EAAE,UAAU,eAAe;EAC1B,MAAM,gBAAgB,UAAU,KAAK,SAAS,UAAU,SAAS;EACjE,MAAM,UAAU;GAAE,SAAS;GAAe,OAAO,KAAK;GAAO;AAC7D,UAAQ;GAAE,SAAS;GAAe,OAAO,KAAK;GAAO,CAAC;AACtD,kBAAgB;GAAE;GAAU;GAAU;GAAS,CAAC;IAElD,CAAC,MAAM,cAAc,CACtB;AAED,QACE,wBAAA,cAAC,cAAD;EAAe,cAAc;EAAkB,aAAa;EAmB5C,EAlBd,wBAAA,cAAC,kBAAA,KAAmB,EACpB,wBAAA,cAAC,OAAD;EACE,GAAI;EACJ,WAAW,GACT,aAAa;GACX;GACA;GACA;GACA;GACA;GACA;GACD,EACD,UACD;EAIK,EAFN,wBAAA,cAAC,eAAD;EAAsB;EAAiB;EAAY,CAAA,EACnD,wBAAA,cAAC,sBAAD;EAA+B;EAAmB;EAAY,CAAA,CACxD,CACM"}

package/dist/components/data-table/drag-and-drop/DragAndDropTableBody.js.map

@@ -1 +1 @@
-{"version":3,"file":"DragAndDropTableBody.js","names":[],"sources":["../../../../src/components/data-table/drag-and-drop/DragAndDropTableBody.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Table } from '../../table/Table'\nimport { useDataTable } from '../DataTableContext'\nimport { DragAndDropTableRow } from './DragAndDropTableRow'\n\ntype DataTableBodyProps = Omit<\n  React.ComponentProps<typeof Table.Body>,\n  'children'\n> & {\n  idColumn?: string\n}\n\nexport const DragAndDropTableBody = ({\n  striped = false,\n  idColumn = 'id',\n  ...props\n}: DataTableBodyProps) => {\n  const { getRowModel } = useDataTable()\n  return (\n    <Table.Body {...props} striped={striped}>\n      {getRowModel().rows.map((row) => {\n        return (\n          <DragAndDropTableRow row={row} key={row.id} idColumn={idColumn} />\n        )\n      })}\n    </Table.Body>\n  )\n}\n"],"mappings":";;;;;AAaA,IAAa,wBAAwB,EACnC,UAAU,OACV,WAAW,MACX,GAAG,YACqB;CACxB,MAAM,EAAE,gBAAgB,aAAa;CACrC,OACE,wBAAA,cAAC,MAAM,MAAP;EAAY,GAAI;EAAgB;CAMpB,GALT,YAAY,EAAE,KAAK,KAAK,QAAQ;EAC/B,OACE,wBAAA,cAAC,qBAAD;GAA0B;GAAK,KAAK,IAAI;GAAc;EAAW,CAAA;CAErE,CAAC,CACS;AAEhB"}
+{"version":3,"file":"DragAndDropTableBody.js","names":[],"sources":["../../../../src/components/data-table/drag-and-drop/DragAndDropTableBody.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Table } from '../../table/Table'\nimport { useDataTable } from '../DataTableContext'\nimport { DragAndDropTableRow } from './DragAndDropTableRow'\n\ntype DataTableBodyProps = Omit<\n  React.ComponentProps<typeof Table.Body>,\n  'children'\n> & {\n  idColumn?: string\n}\n\nexport const DragAndDropTableBody = ({\n  striped = false,\n  idColumn = 'id',\n  ...props\n}: DataTableBodyProps) => {\n  const { getRowModel } = useDataTable()\n  return (\n    <Table.Body {...props} striped={striped}>\n      {getRowModel().rows.map((row) => {\n        return (\n          <DragAndDropTableRow row={row} key={row.id} idColumn={idColumn} />\n        )\n      })}\n    </Table.Body>\n  )\n}\n"],"mappings":";;;;;AAaA,IAAa,wBAAwB,EACnC,UAAU,OACV,WAAW,MACX,GAAG,YACqB;CACxB,MAAM,EAAE,gBAAgB,cAAc;AACtC,QACE,wBAAA,cAAC,MAAM,MAAP;EAAY,GAAI;EAAgB;EAMnB,EALV,aAAa,CAAC,KAAK,KAAK,QAAQ;AAC/B,SACE,wBAAA,cAAC,qBAAD;GAA0B;GAAK,KAAK,IAAI;GAAc;GAAY,CAAA;GAEpE,CACS"}

package/dist/components/data-table/drag-and-drop/DragAndDropTableRow.js.map

@@ -1 +1 @@
-{"version":3,"file":"DragAndDropTableRow.js","names":[],"sources":["../../../../src/components/data-table/drag-and-drop/DragAndDropTableRow.tsx"],"sourcesContent":["import type { Row } from '@tanstack/react-table'\nimport { flexRender } from '@tanstack/react-table'\nimport * as React from 'react'\n\nimport * as Sortable from '../../sortable'\nimport { Table } from '../../table/Table'\nimport { DataTableDataCell } from '../DataTableDataCell'\n\nexport type DataTableDraggableRowProps = React.ComponentProps<\n  typeof Table.Row\n> & {\n  row: Row<Record<string, unknown>>\n  idColumn?: string\n}\n\nexport const DragAndDropTableRow = ({\n  row,\n  idColumn = 'id'\n}: DataTableDraggableRowProps) => {\n  const rowId = row.original[idColumn] as React.ReactText\n  return (\n    <Sortable.Item id={rowId} asChild>\n      <Table.Row>\n        {row.getVisibleCells().map((cell, i) => {\n          if (i === 0) {\n            return (\n              <Table.Cell key={cell.id}>\n                <Sortable.Handle targetId={rowId} className=\"inline-block\" />\n                {flexRender(cell.column.columnDef.cell, cell.getContext())}\n              </Table.Cell>\n            )\n          }\n          return <DataTableDataCell key={cell.id} cell={cell} />\n        })}\n      </Table.Row>\n    </Sortable.Item>\n  )\n}\n"],"mappings":";;;;;;;AAeA,IAAa,uBAAuB,EAClC,KACA,WAAW,WACqB;CAChC,MAAM,QAAQ,IAAI,SAAS;CAC3B,OACE,wBAAA,cAAC,cAAD;EAAe,IAAI;EAAO,SAAA;CAcX,GAbb,wBAAA,cAAC,MAAM,KAAA,MACJ,IAAI,gBAAgB,EAAE,KAAK,MAAM,MAAM;EACtC,IAAI,MAAM,GACR,OACE,wBAAA,cAAC,MAAM,MAAP,EAAY,KAAK,KAAK,GAGV,GAFV,wBAAA,cAAC,gBAAD;GAAiB,UAAU;GAAO,WAAU;EAAgB,CAAA,GAC3D,WAAW,KAAK,OAAO,UAAU,MAAM,KAAK,WAAW,CAAC,CAC/C;EAGhB,OAAO,wBAAA,cAAC,mBAAD;GAAmB,KAAK,KAAK;GAAU;EAAO,CAAA;CACvD,CAAC,CACQ,CACE;AAEnB"}
+{"version":3,"file":"DragAndDropTableRow.js","names":[],"sources":["../../../../src/components/data-table/drag-and-drop/DragAndDropTableRow.tsx"],"sourcesContent":["import type { Row } from '@tanstack/react-table'\nimport { flexRender } from '@tanstack/react-table'\nimport * as React from 'react'\n\nimport * as Sortable from '../../sortable'\nimport { Table } from '../../table/Table'\nimport { DataTableDataCell } from '../DataTableDataCell'\n\nexport type DataTableDraggableRowProps = React.ComponentProps<\n  typeof Table.Row\n> & {\n  row: Row<Record<string, unknown>>\n  idColumn?: string\n}\n\nexport const DragAndDropTableRow = ({\n  row,\n  idColumn = 'id'\n}: DataTableDraggableRowProps) => {\n  const rowId = row.original[idColumn] as React.ReactText\n  return (\n    <Sortable.Item id={rowId} asChild>\n      <Table.Row>\n        {row.getVisibleCells().map((cell, i) => {\n          if (i === 0) {\n            return (\n              <Table.Cell key={cell.id}>\n                <Sortable.Handle targetId={rowId} className=\"inline-block\" />\n                {flexRender(cell.column.columnDef.cell, cell.getContext())}\n              </Table.Cell>\n            )\n          }\n          return <DataTableDataCell key={cell.id} cell={cell} />\n        })}\n      </Table.Row>\n    </Sortable.Item>\n  )\n}\n"],"mappings":";;;;;;;AAeA,IAAa,uBAAuB,EAClC,KACA,WAAW,WACqB;CAChC,MAAM,QAAQ,IAAI,SAAS;AAC3B,QACE,wBAAA,cAAC,cAAD;EAAe,IAAI;EAAO,SAAA;EAcV,EAbd,wBAAA,cAAC,MAAM,KAAA,MACJ,IAAI,iBAAiB,CAAC,KAAK,MAAM,MAAM;AACtC,MAAI,MAAM,EACR,QACE,wBAAA,cAAC,MAAM,MAAP,EAAY,KAAK,KAAK,IAGT,EAFX,wBAAA,cAAC,gBAAD;GAAiB,UAAU;GAAO,WAAU;GAAiB,CAAA,EAC5D,WAAW,KAAK,OAAO,UAAU,MAAM,KAAK,YAAY,CAAC,CAC/C;AAGjB,SAAO,wBAAA,cAAC,mBAAD;GAAmB,KAAK,KAAK;GAAU;GAAQ,CAAA;GACtD,CACQ,CACE"}

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

@@ -1 +1 @@
-{"version":3,"file":"getNewAsyncData.js","names":[],"sources":["../../../src/components/data-table/getNewAsyncData.ts"],"sourcesContent":["import type {\n  PaginationState,\n  SortDirection,\n  SortingState\n} from '@tanstack/react-table'\nimport invariant from 'invariant'\n\nimport type {\n  TAsyncDataOptions,\n  TAsyncDataResult,\n  TGetAsyncData\n} from './DataTable.types'\n\nconst getSortDirection = (sorting: SortingState): SortDirection | undefined => {\n  if (sorting[0]) {\n    return sorting[0].desc ? 'desc' : 'asc'\n  }\n  return undefined\n}\n\nexport const getNewAsyncData = async (\n  getAsyncData: TGetAsyncData,\n  asyncDataOptions: Partial<TAsyncDataOptions>,\n  paginationState: PaginationState,\n  sorting: SortingState,\n  globalFilter: string\n): Promise<TAsyncDataResult | undefined> => {\n  const { pageIndex, pageSize } = paginationState\n  const params = {\n    pageIndex: asyncDataOptions?.pageIndex ?? pageIndex,\n    pageSize: asyncDataOptions?.pageSize ?? pageSize,\n    sortBy: asyncDataOptions?.sortBy ?? sorting[0]?.id,\n    sortDirection: asyncDataOptions?.sortDirection ?? getSortDirection(sorting),\n    globalFilter: asyncDataOptions.globalFilter ?? globalFilter\n  }\n\n  const newData = await getAsyncData(params)\n\n  invariant(\n    Array.isArray(newData?.results),\n    'The getAsyncData function must return an object with a property `result` which must be an array'\n  )\n  invariant(\n    newData && Number.isInteger(newData.total) && newData.total >= 0,\n    'The getAsyncData function must return an object with a property `total` which must be a positive integer or zero'\n  )\n\n  return newData\n}\n"],"mappings":";;AAaA,IAAM,oBAAoB,YAAqD;CAC7E,IAAI,QAAQ,IACV,OAAO,QAAQ,GAAG,OAAO,SAAS;AAGtC;AAEA,IAAa,kBAAkB,OAC7B,cACA,kBACA,iBACA,SACA,iBAC0C;CAC1C,MAAM,EAAE,WAAW,aAAa;CAShC,MAAM,UAAU,MAAM,aAAa;EAPjC,WAAW,kBAAkB,aAAa;EAC1C,UAAU,kBAAkB,YAAY;EACxC,QAAQ,kBAAkB,UAAU,QAAQ,IAAI;EAChD,eAAe,kBAAkB,iBAAiB,iBAAiB,OAAO;EAC1E,cAAc,iBAAiB,gBAAgB;CAGd,CAAM;CAEzC,UACE,MAAM,QAAQ,SAAS,OAAO,GAC9B,iGACF;CACA,UACE,WAAW,OAAO,UAAU,QAAQ,KAAK,KAAK,QAAQ,SAAS,GAC/D,kHACF;CAEA,OAAO;AACT"}
+{"version":3,"file":"getNewAsyncData.js","names":[],"sources":["../../../src/components/data-table/getNewAsyncData.ts"],"sourcesContent":["import type {\n  PaginationState,\n  SortDirection,\n  SortingState\n} from '@tanstack/react-table'\nimport invariant from 'invariant'\n\nimport type {\n  TAsyncDataOptions,\n  TAsyncDataResult,\n  TGetAsyncData\n} from './DataTable.types'\n\nconst getSortDirection = (sorting: SortingState): SortDirection | undefined => {\n  if (sorting[0]) {\n    return sorting[0].desc ? 'desc' : 'asc'\n  }\n  return undefined\n}\n\nexport const getNewAsyncData = async (\n  getAsyncData: TGetAsyncData,\n  asyncDataOptions: Partial<TAsyncDataOptions>,\n  paginationState: PaginationState,\n  sorting: SortingState,\n  globalFilter: string\n): Promise<TAsyncDataResult | undefined> => {\n  const { pageIndex, pageSize } = paginationState\n  const params = {\n    pageIndex: asyncDataOptions?.pageIndex ?? pageIndex,\n    pageSize: asyncDataOptions?.pageSize ?? pageSize,\n    sortBy: asyncDataOptions?.sortBy ?? sorting[0]?.id,\n    sortDirection: asyncDataOptions?.sortDirection ?? getSortDirection(sorting),\n    globalFilter: asyncDataOptions.globalFilter ?? globalFilter\n  }\n\n  const newData = await getAsyncData(params)\n\n  invariant(\n    Array.isArray(newData?.results),\n    'The getAsyncData function must return an object with a property `result` which must be an array'\n  )\n  invariant(\n    newData && Number.isInteger(newData.total) && newData.total >= 0,\n    'The getAsyncData function must return an object with a property `total` which must be a positive integer or zero'\n  )\n\n  return newData\n}\n"],"mappings":";;AAaA,IAAM,oBAAoB,YAAqD;AAC7E,KAAI,QAAQ,GACV,QAAO,QAAQ,GAAG,OAAO,SAAS;;AAKtC,IAAa,kBAAkB,OAC7B,cACA,kBACA,iBACA,SACA,iBAC0C;CAC1C,MAAM,EAAE,WAAW,aAAa;CAShC,MAAM,UAAU,MAAM,aARP;EACb,WAAW,kBAAkB,aAAa;EAC1C,UAAU,kBAAkB,YAAY;EACxC,QAAQ,kBAAkB,UAAU,QAAQ,IAAI;EAChD,eAAe,kBAAkB,iBAAiB,iBAAiB,QAAQ;EAC3E,cAAc,iBAAiB,gBAAgB;EAChD,CAEyC;AAE1C,WACE,MAAM,QAAQ,SAAS,QAAQ,EAC/B,kGACD;AACD,WACE,WAAW,OAAO,UAAU,QAAQ,MAAM,IAAI,QAAQ,SAAS,GAC/D,mHACD;AAED,QAAO"}

package/dist/components/data-table/pagination/Pagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.js","names":[],"sources":["../../../../src/components/data-table/pagination/Pagination.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { TcolorScheme } from '../../../experiments/color-scheme/ColorScheme'\nimport { Pagination as PaginationComponent } from '../../pagination/Pagination'\nimport { Text } from '../../text/Text'\nimport { AsyncDataState } from '../DataTable.types'\nimport { useDataTable } from '../DataTableContext'\n\nconst StyledNav = styled('nav', {\n  base: [\n    'flex',\n    'flex-col',\n    'justify-between',\n    'items-center',\n    'tabular-nums',\n    'flex-wrap',\n    'w-full',\n    'gap-4',\n    'mt-4',\n    'md:flex-row'\n  ]\n})\n\ntype PaginationProps = React.ComponentProps<typeof StyledNav> & {\n  colorScheme?: TcolorScheme\n}\n\n/** Applies pagination to parent DataTableProvider and renders UI to switch pages etc */\nexport const Pagination = ({ colorScheme, ...props }: PaginationProps) => {\n  const {\n    applyPagination,\n    getState,\n    getExpandedRowModel,\n    getRowModel,\n    setPageIndex,\n    getTotalRows,\n    getPageCount,\n    asyncDataState,\n    hasAsyncData\n  } = useDataTable()\n\n  React.useEffect(() => {\n    applyPagination()\n  }, [applyPagination])\n\n  const { pagination: paginationState } = getState()\n  const isPending = asyncDataState === AsyncDataState.PENDING\n  const isEmpty = !isPending && getTotalRows() === 0\n  // Show pagination only if total pages are more than 1\n  const showPagination = hasAsyncData\n    ? getPageCount() > 1\n    : getExpandedRowModel().rows.length / paginationState.pageSize > 1\n\n  if (isEmpty || !showPagination) return null\n  const totalVisibleRows = getExpandedRowModel().rows.length\n\n  const start =\n    totalVisibleRows === 0\n      ? 0\n      : paginationState.pageIndex * paginationState.pageSize + 1\n\n  const asyncRowCount = getRowModel().rows.length\n  const end = hasAsyncData\n    ? asyncRowCount === 0\n      ? start\n      : start + asyncRowCount - 1\n    : Math.min(start + paginationState.pageSize - 1, totalVisibleRows)\n\n  // indexing for the pagination component is 1 based\n  const setPage = (index: number) => {\n    setPageIndex(index - 1)\n  }\n\n  const pageCount = hasAsyncData\n    ? getPageCount()\n    : Math.max(1, Math.ceil(totalVisibleRows / paginationState.pageSize))\n\n  return (\n    <StyledNav {...props}>\n      <Text size=\"sm\">{`${start} - ${end} of ${\n        hasAsyncData ? getTotalRows() : totalVisibleRows\n      } items`}</Text>\n      <PaginationComponent\n        colorScheme={colorScheme}\n        selectedPage={paginationState.pageIndex + 1}\n        pagesCount={pageCount}\n        onSelectedPageChange={setPage}\n      />\n    </StyledNav>\n  )\n}\n\nPagination.displayName = 'Pagination'\n"],"mappings":";;;;;;;AAUA,IAAM,YAAY,OAAO,OAAO,EAC9B,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,EACF,CAAC;;AAOD,IAAa,cAAc,EAAE,aAAa,GAAG,YAA6B;CACxE,MAAM,EACJ,iBACA,UACA,qBACA,aACA,cACA,cACA,cACA,gBACA,iBACE,aAAa;CAEjB,QAAM,gBAAgB;EACpB,gBAAgB;CAClB,GAAG,CAAC,eAAe,CAAC;CAEpB,MAAM,EAAE,YAAY,oBAAoB,SAAS;CAEjD,MAAM,UAAU,EADE,mBAAmB,eAAe,YACtB,aAAa,MAAM;CAEjD,MAAM,iBAAiB,eACnB,aAAa,IAAI,IACjB,oBAAoB,EAAE,KAAK,SAAS,gBAAgB,WAAW;CAEnE,IAAI,WAAW,CAAC,gBAAgB,OAAO;CACvC,MAAM,mBAAmB,oBAAoB,EAAE,KAAK;CAEpD,MAAM,QACJ,qBAAqB,IACjB,IACA,gBAAgB,YAAY,gBAAgB,WAAW;CAE7D,MAAM,gBAAgB,YAAY,EAAE,KAAK;CACzC,MAAM,MAAM,eACR,kBAAkB,IAChB,QACA,QAAQ,gBAAgB,IAC1B,KAAK,IAAI,QAAQ,gBAAgB,WAAW,GAAG,gBAAgB;CAGnE,MAAM,WAAW,UAAkB;EACjC,aAAa,QAAQ,CAAC;CACxB;CAEA,MAAM,YAAY,eACd,aAAa,IACb,KAAK,IAAI,GAAG,KAAK,KAAK,mBAAmB,gBAAgB,QAAQ,CAAC;CAEtE,OACE,wBAAA,cAAC,WAAc,OACb,wBAAA,cAAC,MAAD,EAAM,MAAK,KAEI,GAFE,GAAG,MAAM,KAAK,IAAI,MACjC,eAAe,aAAa,IAAI,iBACjC,OAAc,GACf,wBAAA,cAAC,cAAD;EACe;EACb,cAAc,gBAAgB,YAAY;EAC1C,YAAY;EACZ,sBAAsB;CACvB,CAAA,CACQ;AAEf;AAEA,WAAW,cAAc"}
+{"version":3,"file":"Pagination.js","names":[],"sources":["../../../../src/components/data-table/pagination/Pagination.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { TcolorScheme } from '../../../experiments/color-scheme/ColorScheme'\nimport { Pagination as PaginationComponent } from '../../pagination/Pagination'\nimport { Text } from '../../text/Text'\nimport { AsyncDataState } from '../DataTable.types'\nimport { useDataTable } from '../DataTableContext'\n\nconst StyledNav = styled('nav', {\n  base: [\n    'flex',\n    'flex-col',\n    'justify-between',\n    'items-center',\n    'tabular-nums',\n    'flex-wrap',\n    'w-full',\n    'gap-4',\n    'mt-4',\n    'md:flex-row'\n  ]\n})\n\ntype PaginationProps = React.ComponentProps<typeof StyledNav> & {\n  colorScheme?: TcolorScheme\n}\n\n/** Applies pagination to parent DataTableProvider and renders UI to switch pages etc */\nexport const Pagination = ({ colorScheme, ...props }: PaginationProps) => {\n  const {\n    applyPagination,\n    getState,\n    getExpandedRowModel,\n    getRowModel,\n    setPageIndex,\n    getTotalRows,\n    getPageCount,\n    asyncDataState,\n    hasAsyncData\n  } = useDataTable()\n\n  React.useEffect(() => {\n    applyPagination()\n  }, [applyPagination])\n\n  const { pagination: paginationState } = getState()\n  const isPending = asyncDataState === AsyncDataState.PENDING\n  const isEmpty = !isPending && getTotalRows() === 0\n  // Show pagination only if total pages are more than 1\n  const showPagination = hasAsyncData\n    ? getPageCount() > 1\n    : getExpandedRowModel().rows.length / paginationState.pageSize > 1\n\n  if (isEmpty || !showPagination) return null\n  const totalVisibleRows = getExpandedRowModel().rows.length\n\n  const start =\n    totalVisibleRows === 0\n      ? 0\n      : paginationState.pageIndex * paginationState.pageSize + 1\n\n  const asyncRowCount = getRowModel().rows.length\n  const end = hasAsyncData\n    ? asyncRowCount === 0\n      ? start\n      : start + asyncRowCount - 1\n    : Math.min(start + paginationState.pageSize - 1, totalVisibleRows)\n\n  // indexing for the pagination component is 1 based\n  const setPage = (index: number) => {\n    setPageIndex(index - 1)\n  }\n\n  const pageCount = hasAsyncData\n    ? getPageCount()\n    : Math.max(1, Math.ceil(totalVisibleRows / paginationState.pageSize))\n\n  return (\n    <StyledNav {...props}>\n      <Text size=\"sm\">{`${start} - ${end} of ${\n        hasAsyncData ? getTotalRows() : totalVisibleRows\n      } items`}</Text>\n      <PaginationComponent\n        colorScheme={colorScheme}\n        selectedPage={paginationState.pageIndex + 1}\n        pagesCount={pageCount}\n        onSelectedPageChange={setPage}\n      />\n    </StyledNav>\n  )\n}\n\nPagination.displayName = 'Pagination'\n"],"mappings":";;;;;;;AAUA,IAAM,YAAY,OAAO,OAAO,EAC9B,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EACF,CAAC;;AAOF,IAAa,cAAc,EAAE,aAAa,GAAG,YAA6B;CACxE,MAAM,EACJ,iBACA,UACA,qBACA,aACA,cACA,cACA,cACA,gBACA,iBACE,cAAc;AAElB,SAAM,gBAAgB;AACpB,mBAAiB;IAChB,CAAC,gBAAgB,CAAC;CAErB,MAAM,EAAE,YAAY,oBAAoB,UAAU;CAElD,MAAM,UAAU,EADE,mBAAmB,eAAe,YACtB,cAAc,KAAK;CAEjD,MAAM,iBAAiB,eACnB,cAAc,GAAG,IACjB,qBAAqB,CAAC,KAAK,SAAS,gBAAgB,WAAW;AAEnE,KAAI,WAAW,CAAC,eAAgB,QAAO;CACvC,MAAM,mBAAmB,qBAAqB,CAAC,KAAK;CAEpD,MAAM,QACJ,qBAAqB,IACjB,IACA,gBAAgB,YAAY,gBAAgB,WAAW;CAE7D,MAAM,gBAAgB,aAAa,CAAC,KAAK;CACzC,MAAM,MAAM,eACR,kBAAkB,IAChB,QACA,QAAQ,gBAAgB,IAC1B,KAAK,IAAI,QAAQ,gBAAgB,WAAW,GAAG,iBAAiB;CAGpE,MAAM,WAAW,UAAkB;AACjC,eAAa,QAAQ,EAAE;;CAGzB,MAAM,YAAY,eACd,cAAc,GACd,KAAK,IAAI,GAAG,KAAK,KAAK,mBAAmB,gBAAgB,SAAS,CAAC;AAEvE,QACE,wBAAA,cAAC,WAAc,OACb,wBAAA,cAAC,MAAD,EAAM,MAAK,MAEK,EAFC,GAAG,MAAM,KAAK,IAAI,MACjC,eAAe,cAAc,GAAG,iBACjC,QAAe,EAChB,wBAAA,cAAC,cAAD;EACe;EACb,cAAc,gBAAgB,YAAY;EAC1C,YAAY;EACZ,sBAAsB;EACtB,CAAA,CACQ;;AAIhB,WAAW,cAAc"}

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

@@ -1 +1 @@
-{"version":3,"file":"usePagination.js","names":[],"sources":["../../../src/components/data-table/usePagination.ts"],"sourcesContent":["import type { PaginationState } from '@tanstack/react-table'\nimport React from 'react'\n\nconst defaultPaginationState: PaginationState = { pageIndex: 0, pageSize: 10 }\nexport const usePagination = (\n  initialPaginationState: PaginationState | undefined\n) => {\n  const [isPaginated, setIsPaginated] = React.useState<boolean>(\n    !!initialPaginationState\n  )\n\n  const [paginationState, setPaginationState] = React.useState<\n    PaginationState | undefined\n  >({\n    ...defaultPaginationState,\n    ...(initialPaginationState || {})\n  })\n\n  const applyPagination = React.useCallback(() => {\n    setIsPaginated(true)\n  }, [])\n\n  return {\n    isPaginated,\n    paginationState,\n    setPaginationState,\n    applyPagination\n  }\n}\n"],"mappings":";;AAGA,IAAM,yBAA0C;CAAE,WAAW;CAAG,UAAU;AAAG;AAC7E,IAAa,iBACX,2BACG;CACH,MAAM,CAAC,aAAa,kBAAkB,MAAM,SAC1C,CAAC,CAAC,sBACJ;CAEA,MAAM,CAAC,iBAAiB,sBAAsB,MAAM,SAElD;EACA,GAAG;EACH,GAAI,0BAA0B,CAAC;CACjC,CAAC;CAMD,OAAO;EACL;EACA;EACA;EACA,iBARsB,MAAM,kBAAkB;GAC9C,eAAe,IAAI;EACrB,GAAG,CAAC,CAMF;CACF;AACF"}
+{"version":3,"file":"usePagination.js","names":[],"sources":["../../../src/components/data-table/usePagination.ts"],"sourcesContent":["import type { PaginationState } from '@tanstack/react-table'\nimport React from 'react'\n\nconst defaultPaginationState: PaginationState = { pageIndex: 0, pageSize: 10 }\nexport const usePagination = (\n  initialPaginationState: PaginationState | undefined\n) => {\n  const [isPaginated, setIsPaginated] = React.useState<boolean>(\n    !!initialPaginationState\n  )\n\n  const [paginationState, setPaginationState] = React.useState<\n    PaginationState | undefined\n  >({\n    ...defaultPaginationState,\n    ...(initialPaginationState || {})\n  })\n\n  const applyPagination = React.useCallback(() => {\n    setIsPaginated(true)\n  }, [])\n\n  return {\n    isPaginated,\n    paginationState,\n    setPaginationState,\n    applyPagination\n  }\n}\n"],"mappings":";;AAGA,IAAM,yBAA0C;CAAE,WAAW;CAAG,UAAU;CAAI;AAC9E,IAAa,iBACX,2BACG;CACH,MAAM,CAAC,aAAa,kBAAkB,MAAM,SAC1C,CAAC,CAAC,uBACH;CAED,MAAM,CAAC,iBAAiB,sBAAsB,MAAM,SAElD;EACA,GAAG;EACH,GAAI,0BAA0B,EAAE;EACjC,CAAC;AAMF,QAAO;EACL;EACA;EACA;EACA,iBARsB,MAAM,kBAAkB;AAC9C,kBAAe,KAAK;KACnB,EAAE,CAAC;EAOL"}

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

@@ -1 +1 @@
-{"version":3,"file":"useSorting.js","names":[],"sources":["../../../src/components/data-table/useSorting.ts"],"sourcesContent":["import type { SortingState } from '@tanstack/react-table'\nimport React from 'react'\n\nimport { TDefaultSort } from './DataTable.types'\n\nexport const useSortByColumn = (defaultSort: TDefaultSort | undefined) => {\n  const [isSortable, setIsSortable] = React.useState<boolean>(false)\n\n  const [sorting, setSorting] = React.useState<SortingState>(\n    defaultSort\n      ? [\n          {\n            id: defaultSort.column,\n            desc: defaultSort.direction === 'desc'\n          }\n        ]\n      : []\n  )\n\n  return { isSortable, setIsSortable, sorting, setSorting }\n}\n"],"mappings":";;AAKA,IAAa,mBAAmB,gBAA0C;CACxE,MAAM,CAAC,YAAY,iBAAiB,MAAM,SAAkB,KAAK;CAEjE,MAAM,CAAC,SAAS,cAAc,MAAM,SAClC,cACI,CACE;EACE,IAAI,YAAY;EAChB,MAAM,YAAY,cAAc;CAClC,CACF,IACA,CAAC,CACP;CAEA,OAAO;EAAE;EAAY;EAAe;EAAS;CAAW;AAC1D"}
+{"version":3,"file":"useSorting.js","names":[],"sources":["../../../src/components/data-table/useSorting.ts"],"sourcesContent":["import type { SortingState } from '@tanstack/react-table'\nimport React from 'react'\n\nimport { TDefaultSort } from './DataTable.types'\n\nexport const useSortByColumn = (defaultSort: TDefaultSort | undefined) => {\n  const [isSortable, setIsSortable] = React.useState<boolean>(false)\n\n  const [sorting, setSorting] = React.useState<SortingState>(\n    defaultSort\n      ? [\n          {\n            id: defaultSort.column,\n            desc: defaultSort.direction === 'desc'\n          }\n        ]\n      : []\n  )\n\n  return { isSortable, setIsSortable, sorting, setSorting }\n}\n"],"mappings":";;AAKA,IAAa,mBAAmB,gBAA0C;CACxE,MAAM,CAAC,YAAY,iBAAiB,MAAM,SAAkB,MAAM;CAElE,MAAM,CAAC,SAAS,cAAc,MAAM,SAClC,cACI,CACE;EACE,IAAI,YAAY;EAChB,MAAM,YAAY,cAAc;EACjC,CACF,GACD,EAAE,CACP;AAED,QAAO;EAAE;EAAY;EAAe;EAAS;EAAY"}

package/dist/components/date-field/DateField.js.map

@@ -1 +1 @@
-{"version":3,"file":"DateField.js","names":[],"sources":["../../../src/components/date-field/DateField.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useFormContext } from 'react-hook-form'\n\nimport { DateInput, DateInputProps } from '~/components/date-input/DateInput'\nimport {\n  FieldElementWrapperProps,\n  FieldWrapper\n} from '~/components/field-wrapper/FieldWrapper'\nimport { useFieldError } from '~/components/form/useFieldError'\nimport { useFormCustomContext } from '~/components/form/useFormCustomContext'\n\ntype DateFieldProps = DateInputProps & FieldElementWrapperProps\n\nexport const DateField = ({\n  className,\n  hideLabel,\n  label,\n  name,\n  validation,\n  prompt,\n  description,\n  appearance,\n  theme,\n  ...remainingProps\n}: DateFieldProps) => {\n  const { register, trigger } = useFormContext()\n  const context = useFormCustomContext()\n  const { error } = useFieldError(name)\n  const ref = validation ? register(validation) : register\n\n  const formAppearance = context?.appearance || appearance\n  const formTheme = context?.theme ?? theme\n\n  return (\n    <FieldWrapper\n      className={className}\n      description={description}\n      error={error}\n      fieldId={name}\n      hideLabel={hideLabel}\n      label={label}\n      prompt={prompt}\n      required={Boolean(validation?.required)}\n      appearance={formAppearance}\n    >\n      <DateInput\n        id={name}\n        name={name}\n        ref={ref}\n        appearance={formAppearance}\n        theme={formTheme}\n        {...(error && { state: 'error' })}\n        {...remainingProps}\n        revalidate={trigger}\n      />\n    </FieldWrapper>\n  )\n}\n\nDateField.displayName = 'DateField'\n"],"mappings":";;;;;;;AAaA,IAAa,aAAa,EACxB,WACA,WACA,OACA,MACA,YACA,QACA,aACA,YACA,OACA,GAAG,qBACiB;CACpB,MAAM,EAAE,UAAU,YAAY,eAAe;CAC7C,MAAM,UAAU,qBAAqB;CACrC,MAAM,EAAE,UAAU,cAAc,IAAI;CACpC,MAAM,MAAM,aAAa,SAAS,UAAU,IAAI;CAEhD,MAAM,iBAAiB,SAAS,cAAc;CAC9C,MAAM,YAAY,SAAS,SAAS;CAEpC,OACE,wBAAA,cAAC,cAAD;EACa;EACE;EACN;EACP,SAAS;EACE;EACJ;EACC;EACR,UAAU,QAAQ,YAAY,QAAQ;EACtC,YAAY;CAYA,GAVZ,wBAAA,cAAC,WAAD;EACE,IAAI;EACE;EACD;EACL,YAAY;EACZ,OAAO;EACP,GAAK,SAAS,EAAE,OAAO,QAAQ;EAC/B,GAAI;EACJ,YAAY;CACb,CAAA,CACW;AAElB;AAEA,UAAU,cAAc"}
+{"version":3,"file":"DateField.js","names":[],"sources":["../../../src/components/date-field/DateField.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useFormContext } from 'react-hook-form'\n\nimport { DateInput, DateInputProps } from '~/components/date-input/DateInput'\nimport {\n  FieldElementWrapperProps,\n  FieldWrapper\n} from '~/components/field-wrapper/FieldWrapper'\nimport { useFieldError } from '~/components/form/useFieldError'\nimport { useFormCustomContext } from '~/components/form/useFormCustomContext'\n\ntype DateFieldProps = DateInputProps & FieldElementWrapperProps\n\nexport const DateField = ({\n  className,\n  hideLabel,\n  label,\n  name,\n  validation,\n  prompt,\n  description,\n  appearance,\n  theme,\n  ...remainingProps\n}: DateFieldProps) => {\n  const { register, trigger } = useFormContext()\n  const context = useFormCustomContext()\n  const { error } = useFieldError(name)\n  const ref = validation ? register(validation) : register\n\n  const formAppearance = context?.appearance || appearance\n  const formTheme = context?.theme ?? theme\n\n  return (\n    <FieldWrapper\n      className={className}\n      description={description}\n      error={error}\n      fieldId={name}\n      hideLabel={hideLabel}\n      label={label}\n      prompt={prompt}\n      required={Boolean(validation?.required)}\n      appearance={formAppearance}\n    >\n      <DateInput\n        id={name}\n        name={name}\n        ref={ref}\n        appearance={formAppearance}\n        theme={formTheme}\n        {...(error && { state: 'error' })}\n        {...remainingProps}\n        revalidate={trigger}\n      />\n    </FieldWrapper>\n  )\n}\n\nDateField.displayName = 'DateField'\n"],"mappings":";;;;;;;AAaA,IAAa,aAAa,EACxB,WACA,WACA,OACA,MACA,YACA,QACA,aACA,YACA,OACA,GAAG,qBACiB;CACpB,MAAM,EAAE,UAAU,YAAY,gBAAgB;CAC9C,MAAM,UAAU,sBAAsB;CACtC,MAAM,EAAE,UAAU,cAAc,KAAK;CACrC,MAAM,MAAM,aAAa,SAAS,WAAW,GAAG;CAEhD,MAAM,iBAAiB,SAAS,cAAc;CAC9C,MAAM,YAAY,SAAS,SAAS;AAEpC,QACE,wBAAA,cAAC,cAAD;EACa;EACE;EACN;EACP,SAAS;EACE;EACJ;EACC;EACR,UAAU,QAAQ,YAAY,SAAS;EACvC,YAAY;EAYC,EAVb,wBAAA,cAAC,WAAD;EACE,IAAI;EACE;EACD;EACL,YAAY;EACZ,OAAO;EACP,GAAK,SAAS,EAAE,OAAO,SAAS;EAChC,GAAI;EACJ,YAAY;EACZ,CAAA,CACW;;AAInB,UAAU,cAAc"}

package/dist/components/date-input/DateInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"DateInput.js","names":[],"sources":["../../../src/components/date-input/DateInput.tsx"],"sourcesContent":["import { CalendarEvent } from '@atom-learning/icons'\nimport dayjs from 'dayjs'\nimport customParseFormat from 'dayjs/plugin/customParseFormat.js'\nimport type { Props as DayzedInterface } from 'dayzed'\nimport * as React from 'react'\n\nimport { useCallbackRefState } from '~/utilities/hooks/useCallbackRef'\nimport { getFieldIconSize } from '~/utilities/style/get-icon-size'\n\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Calendar, CalendarTranslationProps } from '../calendar/Calendar'\nimport { DEFAULT_LABELS } from '../calendar/constants'\nimport { Icon } from '../icon/Icon'\nimport { Input } from '../input/Input'\nimport { Popover } from '../popover/Popover'\nimport { DEFAULT_DATE_FORMAT } from './constants'\n\ndayjs.extend(customParseFormat)\n\nexport type DateInputProps = Omit<DayzedInterface, 'onDateSelected'> &\n  CalendarTranslationProps & {\n    initialDate?: Date\n    dateFormat?: string\n    disabled?: boolean\n    size?: 'sm' | 'md' | 'lg'\n    appearance?: 'standard' | 'modern'\n    theme?: 'white' | 'grey'\n    revalidate?: () => Promise<boolean>\n    onChange?: (value?: Date) => void\n  }\n\nconst formatDateToString = (date?: Date, dateFormat = DEFAULT_DATE_FORMAT) =>\n  date ? dayjs(date).format(dateFormat) : ''\n\nexport const DateInput = React.forwardRef<HTMLInputElement, DateInputProps>(\n  (\n    {\n      initialDate,\n      dateFormat = DEFAULT_DATE_FORMAT,\n      firstDayOfWeek = 1,\n      disabled,\n      monthNames,\n      weekdayNames,\n      size = 'md',\n      appearance,\n      theme,\n      labels,\n      revalidate,\n      onChange,\n      minDate,\n      maxDate,\n      ...remainingProps\n    },\n    ref\n  ) => {\n    const [date, setDate] = React.useState(\n      initialDate ? dayjs(initialDate).toDate() : undefined\n    )\n\n    const [inputElRef, setInputElRef] = useCallbackRefState()\n    React.useImperativeHandle(ref, () => inputElRef as HTMLInputElement)\n\n    const dateString = formatDateToString(date, dateFormat)\n\n    const handleInputChange = React.useCallback(\n      (event) => {\n        const newDateString = event.target.value\n        const parsedInputDate = dayjs(newDateString, dateFormat)\n        const newDate = parsedInputDate.isValid()\n          ? parsedInputDate.toDate()\n          : undefined\n        setDate(newDate)\n        onChange?.(newDate)\n      },\n      [dateFormat, onChange]\n    )\n\n    const handleCalendarChange = React.useCallback(\n      (newDate) => {\n        setDate(newDate)\n\n        const mirrorChangeToInputElement = () => {\n          if (!inputElRef) return\n\n          // Call the `set` function on the input value directly to mirror the change.\n          // Props to: https://stackoverflow.com/a/46012210\n          const nativeInputValueSetter = Object.getOwnPropertyDescriptor(\n            window.HTMLInputElement.prototype,\n            'value'\n          )?.set\n          nativeInputValueSetter?.call(\n            inputElRef,\n            formatDateToString(newDate, dateFormat)\n          )\n          const event = new Event('input', { bubbles: true })\n          inputElRef.dispatchEvent(event)\n        }\n        mirrorChangeToInputElement()\n      },\n      [dateFormat, inputElRef]\n    )\n\n    const updatedLabels = {\n      ...DEFAULT_LABELS,\n      ...labels\n    }\n\n    const [calendarOpen, setCalendarOpen] = React.useState(false)\n\n    const refDateToday = React.useRef<HTMLButtonElement>(null)\n    const refDateSelected = React.useRef<HTMLButtonElement>(null)\n\n    const iconSize = React.useMemo(() => getFieldIconSize(size), [size])\n\n    return (\n      <div className=\"relative h-max\">\n        <Input\n          name=\"date\"\n          disabled={disabled}\n          size={size}\n          appearance={appearance}\n          theme={theme}\n          {...remainingProps}\n          onChange={handleInputChange}\n          ref={setInputElRef}\n          defaultValue={dateString}\n        />\n        <Popover modal open={calendarOpen} onOpenChange={setCalendarOpen}>\n          <Popover.Trigger asChild>\n            <ActionIcon\n              disabled={disabled}\n              label={updatedLabels.open}\n              size={iconSize}\n              theme=\"neutral\"\n              hasTooltip={false}\n              className=\"absolute top-1/2 right-0 -translate-y-1/2\"\n            >\n              <Icon is={CalendarEvent} />\n            </ActionIcon>\n          </Popover.Trigger>\n          <Popover.Portal>\n            <Popover.Content\n              side=\"bottom\"\n              align=\"end\"\n              showCloseButton={false}\n              onOpenAutoFocus={(e) => {\n                e.preventDefault()\n                if (date) {\n                  refDateSelected.current?.focus()\n                } else {\n                  refDateToday.current?.focus()\n                }\n              }}\n              className=\"z-1147483646 pr-6\"\n            >\n              <Calendar\n                date={date || new Date()}\n                selected={date}\n                onDateSelected={async (date) => {\n                  setCalendarOpen(false)\n                  await handleCalendarChange(date.date)\n                  if (revalidate) revalidate()\n                }}\n                setYear={async (date) => {\n                  await handleCalendarChange(date)\n                  if (revalidate) revalidate()\n                }}\n                minDate={minDate}\n                maxDate={maxDate}\n                refDateToday={refDateToday}\n                refDateSelected={refDateSelected}\n                firstDayOfWeek={firstDayOfWeek}\n                monthNames={monthNames}\n                weekdayNames={weekdayNames}\n                labels={updatedLabels}\n              />\n            </Popover.Content>\n          </Popover.Portal>\n        </Popover>\n      </div>\n    )\n  }\n)\n\nDateInput.displayName = 'DateInput'\n"],"mappings":"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"}
+{"version":3,"file":"DateInput.js","names":[],"sources":["../../../src/components/date-input/DateInput.tsx"],"sourcesContent":["import { CalendarEvent } from '@atom-learning/icons'\nimport dayjs from 'dayjs'\nimport customParseFormat from 'dayjs/plugin/customParseFormat.js'\nimport type { Props as DayzedInterface } from 'dayzed'\nimport * as React from 'react'\n\nimport { useCallbackRefState } from '~/utilities/hooks/useCallbackRef'\nimport { getFieldIconSize } from '~/utilities/style/get-icon-size'\n\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Calendar, CalendarTranslationProps } from '../calendar/Calendar'\nimport { DEFAULT_LABELS } from '../calendar/constants'\nimport { Icon } from '../icon/Icon'\nimport { Input } from '../input/Input'\nimport { Popover } from '../popover/Popover'\nimport { DEFAULT_DATE_FORMAT } from './constants'\n\ndayjs.extend(customParseFormat)\n\nexport type DateInputProps = Omit<DayzedInterface, 'onDateSelected'> &\n  CalendarTranslationProps & {\n    initialDate?: Date\n    dateFormat?: string\n    disabled?: boolean\n    size?: 'sm' | 'md' | 'lg'\n    appearance?: 'standard' | 'modern'\n    theme?: 'white' | 'grey'\n    revalidate?: () => Promise<boolean>\n    onChange?: (value?: Date) => void\n  }\n\nconst formatDateToString = (date?: Date, dateFormat = DEFAULT_DATE_FORMAT) =>\n  date ? dayjs(date).format(dateFormat) : ''\n\nexport const DateInput = React.forwardRef<HTMLInputElement, DateInputProps>(\n  (\n    {\n      initialDate,\n      dateFormat = DEFAULT_DATE_FORMAT,\n      firstDayOfWeek = 1,\n      disabled,\n      monthNames,\n      weekdayNames,\n      size = 'md',\n      appearance,\n      theme,\n      labels,\n      revalidate,\n      onChange,\n      minDate,\n      maxDate,\n      ...remainingProps\n    },\n    ref\n  ) => {\n    const [date, setDate] = React.useState(\n      initialDate ? dayjs(initialDate).toDate() : undefined\n    )\n\n    const [inputElRef, setInputElRef] = useCallbackRefState()\n    React.useImperativeHandle(ref, () => inputElRef as HTMLInputElement)\n\n    const dateString = formatDateToString(date, dateFormat)\n\n    const handleInputChange = React.useCallback(\n      (event) => {\n        const newDateString = event.target.value\n        const parsedInputDate = dayjs(newDateString, dateFormat)\n        const newDate = parsedInputDate.isValid()\n          ? parsedInputDate.toDate()\n          : undefined\n        setDate(newDate)\n        onChange?.(newDate)\n      },\n      [dateFormat, onChange]\n    )\n\n    const handleCalendarChange = React.useCallback(\n      (newDate) => {\n        setDate(newDate)\n\n        const mirrorChangeToInputElement = () => {\n          if (!inputElRef) return\n\n          // Call the `set` function on the input value directly to mirror the change.\n          // Props to: https://stackoverflow.com/a/46012210\n          const nativeInputValueSetter = Object.getOwnPropertyDescriptor(\n            window.HTMLInputElement.prototype,\n            'value'\n          )?.set\n          nativeInputValueSetter?.call(\n            inputElRef,\n            formatDateToString(newDate, dateFormat)\n          )\n          const event = new Event('input', { bubbles: true })\n          inputElRef.dispatchEvent(event)\n        }\n        mirrorChangeToInputElement()\n      },\n      [dateFormat, inputElRef]\n    )\n\n    const updatedLabels = {\n      ...DEFAULT_LABELS,\n      ...labels\n    }\n\n    const [calendarOpen, setCalendarOpen] = React.useState(false)\n\n    const refDateToday = React.useRef<HTMLButtonElement>(null)\n    const refDateSelected = React.useRef<HTMLButtonElement>(null)\n\n    const iconSize = React.useMemo(() => getFieldIconSize(size), [size])\n\n    return (\n      <div className=\"relative h-max\">\n        <Input\n          name=\"date\"\n          disabled={disabled}\n          size={size}\n          appearance={appearance}\n          theme={theme}\n          {...remainingProps}\n          onChange={handleInputChange}\n          ref={setInputElRef}\n          defaultValue={dateString}\n        />\n        <Popover modal open={calendarOpen} onOpenChange={setCalendarOpen}>\n          <Popover.Trigger asChild>\n            <ActionIcon\n              disabled={disabled}\n              label={updatedLabels.open}\n              size={iconSize}\n              theme=\"neutral\"\n              hasTooltip={false}\n              className=\"absolute top-1/2 right-0 -translate-y-1/2\"\n            >\n              <Icon is={CalendarEvent} />\n            </ActionIcon>\n          </Popover.Trigger>\n          <Popover.Portal>\n            <Popover.Content\n              side=\"bottom\"\n              align=\"end\"\n              showCloseButton={false}\n              onOpenAutoFocus={(e) => {\n                e.preventDefault()\n                if (date) {\n                  refDateSelected.current?.focus()\n                } else {\n                  refDateToday.current?.focus()\n                }\n              }}\n              className=\"z-1147483646 pr-6\"\n            >\n              <Calendar\n                date={date || new Date()}\n                selected={date}\n                onDateSelected={async (date) => {\n                  setCalendarOpen(false)\n                  await handleCalendarChange(date.date)\n                  if (revalidate) revalidate()\n                }}\n                setYear={async (date) => {\n                  await handleCalendarChange(date)\n                  if (revalidate) revalidate()\n                }}\n                minDate={minDate}\n                maxDate={maxDate}\n                refDateToday={refDateToday}\n                refDateSelected={refDateSelected}\n                firstDayOfWeek={firstDayOfWeek}\n                monthNames={monthNames}\n                weekdayNames={weekdayNames}\n                labels={updatedLabels}\n              />\n            </Popover.Content>\n          </Popover.Portal>\n        </Popover>\n      </div>\n    )\n  }\n)\n\nDateInput.displayName = 'DateInput'\n"],"mappings":"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"}

package/dist/components/dialog/Dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.js","names":[],"sources":["../../../src/components/dialog/Dialog.tsx"],"sourcesContent":["import { Description, Root, Title, Trigger } from '@radix-ui/react-dialog'\n\nimport { DialogActionBar } from './DialogActionBar'\nimport { DialogBackground } from './DialogBackground'\nimport { DialogClose } from './DialogClose'\nimport { DialogContent } from './DialogContent'\nimport { DialogFooter } from './DialogFooter'\nimport { DialogHeading } from './DialogHeading'\nimport { DialogNavigationBar } from './DialogNavigationBar'\nimport { DialogScrollableContent } from './DialogScrollableContent'\n\nexport const Dialog = Object.assign(Root, {\n  ActionBar: DialogActionBar,\n  Background: DialogBackground,\n  Close: DialogClose,\n  Content: DialogContent,\n  Heading: DialogHeading,\n  Footer: DialogFooter,\n  NavigationBar: DialogNavigationBar,\n  ScrollableContent: DialogScrollableContent,\n\n  Description: Description,\n  Title: Title,\n  Trigger: Trigger\n})\n\nDialog.displayName = 'Dialog'\n"],"mappings":";;;;;;;;;;AAWA,IAAa,SAAS,OAAO,OAAO,MAAM;CACxC,WAAW;CACX,YAAY;CACZ,OAAO;CACP,SAAS;CACT,SAAS;CACT,QAAQ;CACR,eAAe;CACf,mBAAmB;CAEN;CACN;CACE;AACX,CAAC;AAED,OAAO,cAAc"}
+{"version":3,"file":"Dialog.js","names":[],"sources":["../../../src/components/dialog/Dialog.tsx"],"sourcesContent":["import { Description, Root, Title, Trigger } from '@radix-ui/react-dialog'\n\nimport { DialogActionBar } from './DialogActionBar'\nimport { DialogBackground } from './DialogBackground'\nimport { DialogClose } from './DialogClose'\nimport { DialogContent } from './DialogContent'\nimport { DialogFooter } from './DialogFooter'\nimport { DialogHeading } from './DialogHeading'\nimport { DialogNavigationBar } from './DialogNavigationBar'\nimport { DialogScrollableContent } from './DialogScrollableContent'\n\nexport const Dialog = Object.assign(Root, {\n  ActionBar: DialogActionBar,\n  Background: DialogBackground,\n  Close: DialogClose,\n  Content: DialogContent,\n  Heading: DialogHeading,\n  Footer: DialogFooter,\n  NavigationBar: DialogNavigationBar,\n  ScrollableContent: DialogScrollableContent,\n\n  Description: Description,\n  Title: Title,\n  Trigger: Trigger\n})\n\nDialog.displayName = 'Dialog'\n"],"mappings":";;;;;;;;;;AAWA,IAAa,SAAS,OAAO,OAAO,MAAM;CACxC,WAAW;CACX,YAAY;CACZ,OAAO;CACP,SAAS;CACT,SAAS;CACT,QAAQ;CACR,eAAe;CACf,mBAAmB;CAEN;CACN;CACE;CACV,CAAC;AAEF,OAAO,cAAc"}

package/dist/components/dialog/DialogActionBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"DialogActionBar.js","names":[],"sources":["../../../src/components/dialog/DialogActionBar.tsx"],"sourcesContent":["import { styled } from '~/styled'\n\nexport const DialogActionBar = styled('div', {\n  base: [\n    'border-t',\n    'border-grey-300',\n    'p-4',\n    'flex',\n    'gap-4',\n    'shadow-[0_-6px_6px_-1px_rgba(51,51,51,0.05)]'\n  ]\n})\n"],"mappings":";;AAEA,IAAa,kBAAkB,OAAO,OAAO,EAC3C,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;AACF,EACF,CAAC"}
+{"version":3,"file":"DialogActionBar.js","names":[],"sources":["../../../src/components/dialog/DialogActionBar.tsx"],"sourcesContent":["import { styled } from '~/styled'\n\nexport const DialogActionBar = styled('div', {\n  base: [\n    'border-t',\n    'border-grey-300',\n    'p-4',\n    'flex',\n    'gap-4',\n    'shadow-[0_-6px_6px_-1px_rgba(51,51,51,0.05)]'\n  ]\n})\n"],"mappings":";;AAEA,IAAa,kBAAkB,OAAO,OAAO,EAC3C,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACD,EACF,CAAC"}

package/dist/components/dialog/DialogBackground.js.map

@@ -1 +1 @@
-{"version":3,"file":"DialogBackground.js","names":[],"sources":["../../../src/components/dialog/DialogBackground.tsx"],"sourcesContent":["import { styled } from '~/styled'\n\nexport const DialogBackground = styled('div', {\n  base: ['w-screen', 'h-screen']\n})\n"],"mappings":";;AAEA,IAAa,mBAAmB,OAAO,OAAO,EAC5C,MAAM,CAAC,YAAY,UAAU,EAC/B,CAAC"}
+{"version":3,"file":"DialogBackground.js","names":[],"sources":["../../../src/components/dialog/DialogBackground.tsx"],"sourcesContent":["import { styled } from '~/styled'\n\nexport const DialogBackground = styled('div', {\n  base: ['w-screen', 'h-screen']\n})\n"],"mappings":";;AAEA,IAAa,mBAAmB,OAAO,OAAO,EAC5C,MAAM,CAAC,YAAY,WAAW,EAC/B,CAAC"}

package/dist/components/dialog/DialogContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"DialogContent.js","names":[],"sources":["../../../src/components/dialog/DialogContent.tsx"],"sourcesContent":["import { Close as CloseIcon } from '@atom-learning/icons'\nimport { Close, Content, Overlay, Portal } from '@radix-ui/react-dialog'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\nimport { backdropOverlay } from '~/utilities/style/backdrop-overlay'\n\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\nimport { DialogBackground } from './DialogBackground'\n\nconst modalOverlayId = 'modal_overlay'\n\nconst StyledDialogOverlay = styled(Overlay, {\n  base: backdropOverlay\n})\n\nconst StyledDialogContent = styled(\n  Content,\n  {\n    base: [\n      // `transform: translate()` is required for `floating-ui` to\n      // correctly position elements within the Dialog component.\n      // we can't use the translate property directly\n      'transform-[translate(-50%,-50%)]',\n      'bg-white',\n      'shadow-xl',\n      'box-border',\n      'left-1/2',\n      'h-auto',\n      'max-w-[90vw]',\n      'max-h-[90vh]',\n      'overflow-y-auto',\n      'rounded-md',\n      'p-8',\n      'fixed',\n      'top-1/2',\n      'z-1147483646',\n      'focus:outline-none',\n      'motion-safe:data-[state=open]:animate-slide-in-center',\n      'motion-safe:data-[state=closed]:animate-slide-out-center'\n    ],\n    variants: {\n      size: {\n        xs: [\n          'rounded-md',\n          'size-auto',\n          'max-w-[90vw]',\n          'max-h-[90vh]',\n          'supports-svh:h-auto',\n          'supports-svh:max-h-[90vh]',\n          'w-95'\n        ],\n        sm: [\n          'rounded-md',\n          'size-auto',\n          'max-w-[90vw]',\n          'max-h-[90vh]',\n          'supports-svh:h-auto',\n          'supports-svh:max-h-[90vh]',\n          'w-120'\n        ],\n        md: [\n          'rounded-md',\n          'size-auto',\n          'max-w-[90vw]',\n          'max-h-[90vh]',\n          'supports-svh:h-auto',\n          'supports-svh:max-h-[90vh]',\n          'w-150'\n        ],\n        lg: [\n          'rounded-md',\n          'size-auto',\n          'max-w-[90vw]',\n          'max-h-[90vh]',\n          'supports-svh:h-auto',\n          'supports-svh:max-h-[90vh]',\n          'w-200'\n        ],\n        xl: [\n          'rounded-md',\n          'size-auto',\n          'max-w-[90vw]',\n          'max-h-[90vh]',\n          'supports-svh:h-auto',\n          'supports-svh:max-h-[90vh]',\n          'w-275'\n        ],\n        fullscreen: [\n          'rounded-none',\n          'w-screen',\n          'h-screen',\n          'max-w-screen',\n          'max-h-screen',\n          'supports-svh:h-svh',\n          'supports-svh:max-h-svh'\n        ]\n      },\n      layout: {\n        panel: ['flex', 'flex-col', 'p-0']\n      }\n    }\n  },\n  { enabledResponsiveVariants: true }\n)\n\ntype DialogContentProps = React.ComponentProps<typeof StyledDialogContent> & {\n  closeDialogText?: string\n  showCloseButton?: boolean\n}\n\nexport const DialogContent = ({\n  size = 'sm',\n  children,\n  closeDialogText = 'Close dialog',\n  showCloseButton = true,\n  ...remainingProps\n}: DialogContentProps) => (\n  <Portal>\n    <StyledDialogOverlay id={modalOverlayId}>\n      {React.Children.map(\n        children,\n        (child?: React.ReactElement) =>\n          child?.type === DialogBackground && child\n      )}\n      <StyledDialogContent\n        size={size}\n        aria-label=\"Dialog\"\n        onPointerDownOutside={(event) => {\n          const element = event.target as HTMLElement\n          if (element?.id !== modalOverlayId) {\n            event.preventDefault()\n          }\n        }}\n        {...remainingProps}\n      >\n        {showCloseButton && (\n          <ActionIcon\n            as={Close}\n            label={closeDialogText}\n            hasTooltip={false}\n            size=\"md\"\n            theme=\"neutral\"\n            className=\"absolute top-4 right-4 size-12\"\n          >\n            <Icon is={CloseIcon} />\n          </ActionIcon>\n        )}\n        {React.Children.map(\n          children,\n          (child?: React.ReactElement) =>\n            child?.type !== DialogBackground && child\n        )}\n      </StyledDialogContent>\n    </StyledDialogOverlay>\n  </Portal>\n)\n"],"mappings":";;;;;;;;;AAWA,IAAM,iBAAiB;AAEvB,IAAM,sBAAsB,OAAO,SAAS,EAC1C,MAAM,gBACR,CAAC;AAED,IAAM,sBAAsB,OAC1B,SACA;CACE,MAAM;EAIJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU;EACR,MAAM;GACJ,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,YAAY;IACV;IACA;IACA;IACA;IACA;IACA;IACA;GACF;EACF;EACA,QAAQ,EACN,OAAO;GAAC;GAAQ;GAAY;EAAK,EACnC;CACF;AACF,GACA,EAAE,2BAA2B,KAAK,CACpC;AAOA,IAAa,iBAAiB,EAC5B,OAAO,MACP,UACA,kBAAkB,gBAClB,kBAAkB,MAClB,GAAG,qBAEH,wBAAA,cAAC,QAAA,MACC,wBAAA,cAAC,qBAAD,EAAqB,IAAI,eAmCJ,GAlClB,QAAM,SAAS,IACd,WACC,UACC,OAAO,SAAS,oBAAoB,KACxC,GACA,wBAAA,cAAC,qBAAD;CACQ;CACN,cAAW;CACX,uBAAuB,UAAU;EAE/B,IADgB,MAAM,QACT,OAAO,gBAClB,MAAM,eAAe;CAEzB;CACA,GAAI;AAmBe,GAjBlB,mBACC,wBAAA,cAAC,YAAD;CACE,IAAI;CACJ,OAAO;CACP,YAAY;CACZ,MAAK;CACL,OAAM;CACN,WAAU;AAGA,GADV,wBAAA,cAAC,MAAD,EAAM,IAAI,MAAY,CAAA,CACZ,GAEb,QAAM,SAAS,IACd,WACC,UACC,OAAO,SAAS,oBAAoB,KACxC,CACmB,CACF,CACf"}
+{"version":3,"file":"DialogContent.js","names":[],"sources":["../../../src/components/dialog/DialogContent.tsx"],"sourcesContent":["import { Close as CloseIcon } from '@atom-learning/icons'\nimport { Close, Content, Overlay, Portal } from '@radix-ui/react-dialog'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\nimport { backdropOverlay } from '~/utilities/style/backdrop-overlay'\n\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\nimport { DialogBackground } from './DialogBackground'\n\nconst modalOverlayId = 'modal_overlay'\n\nconst StyledDialogOverlay = styled(Overlay, {\n  base: backdropOverlay\n})\n\nconst StyledDialogContent = styled(\n  Content,\n  {\n    base: [\n      // `transform: translate()` is required for `floating-ui` to\n      // correctly position elements within the Dialog component.\n      // we can't use the translate property directly\n      'transform-[translate(-50%,-50%)]',\n      'bg-white',\n      'shadow-xl',\n      'box-border',\n      'left-1/2',\n      'h-auto',\n      'max-w-[90vw]',\n      'max-h-[90vh]',\n      'overflow-y-auto',\n      'rounded-md',\n      'p-8',\n      'fixed',\n      'top-1/2',\n      'z-1147483646',\n      'focus:outline-none',\n      'motion-safe:data-[state=open]:animate-slide-in-center',\n      'motion-safe:data-[state=closed]:animate-slide-out-center'\n    ],\n    variants: {\n      size: {\n        xs: [\n          'rounded-md',\n          'size-auto',\n          'max-w-[90vw]',\n          'max-h-[90vh]',\n          'supports-svh:h-auto',\n          'supports-svh:max-h-[90vh]',\n          'w-95'\n        ],\n        sm: [\n          'rounded-md',\n          'size-auto',\n          'max-w-[90vw]',\n          'max-h-[90vh]',\n          'supports-svh:h-auto',\n          'supports-svh:max-h-[90vh]',\n          'w-120'\n        ],\n        md: [\n          'rounded-md',\n          'size-auto',\n          'max-w-[90vw]',\n          'max-h-[90vh]',\n          'supports-svh:h-auto',\n          'supports-svh:max-h-[90vh]',\n          'w-150'\n        ],\n        lg: [\n          'rounded-md',\n          'size-auto',\n          'max-w-[90vw]',\n          'max-h-[90vh]',\n          'supports-svh:h-auto',\n          'supports-svh:max-h-[90vh]',\n          'w-200'\n        ],\n        xl: [\n          'rounded-md',\n          'size-auto',\n          'max-w-[90vw]',\n          'max-h-[90vh]',\n          'supports-svh:h-auto',\n          'supports-svh:max-h-[90vh]',\n          'w-275'\n        ],\n        fullscreen: [\n          'rounded-none',\n          'w-screen',\n          'h-screen',\n          'max-w-screen',\n          'max-h-screen',\n          'supports-svh:h-svh',\n          'supports-svh:max-h-svh'\n        ]\n      },\n      layout: {\n        panel: ['flex', 'flex-col', 'p-0']\n      }\n    }\n  },\n  { enabledResponsiveVariants: true }\n)\n\ntype DialogContentProps = React.ComponentProps<typeof StyledDialogContent> & {\n  closeDialogText?: string\n  showCloseButton?: boolean\n}\n\nexport const DialogContent = ({\n  size = 'sm',\n  children,\n  closeDialogText = 'Close dialog',\n  showCloseButton = true,\n  ...remainingProps\n}: DialogContentProps) => (\n  <Portal>\n    <StyledDialogOverlay id={modalOverlayId}>\n      {React.Children.map(\n        children,\n        (child?: React.ReactElement) =>\n          child?.type === DialogBackground && child\n      )}\n      <StyledDialogContent\n        size={size}\n        aria-label=\"Dialog\"\n        onPointerDownOutside={(event) => {\n          const element = event.target as HTMLElement\n          if (element?.id !== modalOverlayId) {\n            event.preventDefault()\n          }\n        }}\n        {...remainingProps}\n      >\n        {showCloseButton && (\n          <ActionIcon\n            as={Close}\n            label={closeDialogText}\n            hasTooltip={false}\n            size=\"md\"\n            theme=\"neutral\"\n            className=\"absolute top-4 right-4 size-12\"\n          >\n            <Icon is={CloseIcon} />\n          </ActionIcon>\n        )}\n        {React.Children.map(\n          children,\n          (child?: React.ReactElement) =>\n            child?.type !== DialogBackground && child\n        )}\n      </StyledDialogContent>\n    </StyledDialogOverlay>\n  </Portal>\n)\n"],"mappings":";;;;;;;;;AAWA,IAAM,iBAAiB;AAEvB,IAAM,sBAAsB,OAAO,SAAS,EAC1C,MAAM,iBACP,CAAC;AAEF,IAAM,sBAAsB,OAC1B,SACA;CACE,MAAM;EAIJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU;EACR,MAAM;GACJ,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;IACA;IACD;GACD,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;IACA;IACD;GACD,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;IACA;IACD;GACD,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;IACA;IACD;GACD,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;IACA;IACD;GACD,YAAY;IACV;IACA;IACA;IACA;IACA;IACA;IACA;IACD;GACF;EACD,QAAQ,EACN,OAAO;GAAC;GAAQ;GAAY;GAAM,EACnC;EACF;CACF,EACD,EAAE,2BAA2B,MAAM,CACpC;AAOD,IAAa,iBAAiB,EAC5B,OAAO,MACP,UACA,kBAAkB,gBAClB,kBAAkB,MAClB,GAAG,qBAEH,wBAAA,cAAC,QAAA,MACC,wBAAA,cAAC,qBAAD,EAAqB,IAAI,gBAmCH,EAlCnB,QAAM,SAAS,IACd,WACC,UACC,OAAO,SAAS,oBAAoB,MACvC,EACD,wBAAA,cAAC,qBAAD;CACQ;CACN,cAAW;CACX,uBAAuB,UAAU;AAE/B,MADgB,MAAM,QACT,OAAO,eAClB,OAAM,gBAAgB;;CAG1B,GAAI;CAmBgB,EAjBnB,mBACC,wBAAA,cAAC,YAAD;CACE,IAAI;CACJ,OAAO;CACP,YAAY;CACZ,MAAK;CACL,OAAM;CACN,WAAU;CAGC,EADX,wBAAA,cAAC,MAAD,EAAM,IAAI,OAAa,CAAA,CACZ,EAEd,QAAM,SAAS,IACd,WACC,UACC,OAAO,SAAS,oBAAoB,MACvC,CACmB,CACF,CACf"}

package/dist/components/dialog/DialogFooter.js.map

@@ -1 +1 @@
-{"version":3,"file":"DialogFooter.js","names":[],"sources":["../../../src/components/dialog/DialogFooter.tsx"],"sourcesContent":["import { styled } from '~/styled'\n\nexport const DialogFooter = styled('footer', {\n  base: ['flex', 'justify-end', 'gap-3', 'pt-4']\n})\n"],"mappings":";;AAEA,IAAa,eAAe,OAAO,UAAU,EAC3C,MAAM;CAAC;CAAQ;CAAe;CAAS;AAAM,EAC/C,CAAC"}
+{"version":3,"file":"DialogFooter.js","names":[],"sources":["../../../src/components/dialog/DialogFooter.tsx"],"sourcesContent":["import { styled } from '~/styled'\n\nexport const DialogFooter = styled('footer', {\n  base: ['flex', 'justify-end', 'gap-3', 'pt-4']\n})\n"],"mappings":";;AAEA,IAAa,eAAe,OAAO,UAAU,EAC3C,MAAM;CAAC;CAAQ;CAAe;CAAS;CAAO,EAC/C,CAAC"}

package/dist/components/dialog/DialogHeading.js.map

@@ -1 +1 @@
-{"version":3,"file":"DialogHeading.js","names":[],"sources":["../../../src/components/dialog/DialogHeading.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { cn } from '~/styled'\n\nimport { Heading } from '../heading/Heading'\n\nexport const DialogHeading = ({\n  className,\n  ...rest\n}: React.ComponentProps<typeof Heading>) => (\n  <Heading\n    size=\"sm\"\n    {...rest}\n    className={cn(\n      'border-b',\n      'border-b-grey-200',\n      'pb-8',\n      'pt-0',\n      'px-8',\n      'mb-8',\n      '-mx-8',\n      'box-content',\n      className\n    )}\n  />\n)\n"],"mappings":";;;;AAMA,IAAa,iBAAiB,EAC5B,WACA,GAAG,WAEH,wBAAA,cAAC,SAAD;CACE,MAAK;CACL,GAAI;CACJ,WAAW,GACT,YACA,qBACA,QACA,QACA,QACA,QACA,SACA,eACA,SACF;AACD,CAAA"}
+{"version":3,"file":"DialogHeading.js","names":[],"sources":["../../../src/components/dialog/DialogHeading.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { cn } from '~/styled'\n\nimport { Heading } from '../heading/Heading'\n\nexport const DialogHeading = ({\n  className,\n  ...rest\n}: React.ComponentProps<typeof Heading>) => (\n  <Heading\n    size=\"sm\"\n    {...rest}\n    className={cn(\n      'border-b',\n      'border-b-grey-200',\n      'pb-8',\n      'pt-0',\n      'px-8',\n      'mb-8',\n      '-mx-8',\n      'box-content',\n      className\n    )}\n  />\n)\n"],"mappings":";;;;AAMA,IAAa,iBAAiB,EAC5B,WACA,GAAG,WAEH,wBAAA,cAAC,SAAD;CACE,MAAK;CACL,GAAI;CACJ,WAAW,GACT,YACA,qBACA,QACA,QACA,QACA,QACA,SACA,eACA,UACD;CACD,CAAA"}

package/dist/components/dialog/DialogNavigationBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"DialogNavigationBar.js","names":[],"sources":["../../../src/components/dialog/DialogNavigationBar.tsx"],"sourcesContent":["import { styled } from '~/styled'\n\nexport const DialogNavigationBar = styled('div', {\n  base: [\n    'flex',\n    'justify-between',\n    'items-center',\n    'border-b',\n    'border-grey-300',\n    'p-4'\n  ]\n})\n"],"mappings":";;AAEA,IAAa,sBAAsB,OAAO,OAAO,EAC/C,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;AACF,EACF,CAAC"}
+{"version":3,"file":"DialogNavigationBar.js","names":[],"sources":["../../../src/components/dialog/DialogNavigationBar.tsx"],"sourcesContent":["import { styled } from '~/styled'\n\nexport const DialogNavigationBar = styled('div', {\n  base: [\n    'flex',\n    'justify-between',\n    'items-center',\n    'border-b',\n    'border-grey-300',\n    'p-4'\n  ]\n})\n"],"mappings":";;AAEA,IAAa,sBAAsB,OAAO,OAAO,EAC/C,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACD,EACF,CAAC"}

package/dist/components/dialog/DialogScrollableContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"DialogScrollableContent.js","names":[],"sources":["../../../src/components/dialog/DialogScrollableContent.tsx"],"sourcesContent":["import { styled } from '~/styled'\n\nexport const DialogScrollableContent = styled('div', {\n  base: ['overflow-scroll', 'flex-1', 'p-4']\n})\n"],"mappings":";;AAEA,IAAa,0BAA0B,OAAO,OAAO,EACnD,MAAM;CAAC;CAAmB;CAAU;AAAK,EAC3C,CAAC"}
+{"version":3,"file":"DialogScrollableContent.js","names":[],"sources":["../../../src/components/dialog/DialogScrollableContent.tsx"],"sourcesContent":["import { styled } from '~/styled'\n\nexport const DialogScrollableContent = styled('div', {\n  base: ['overflow-scroll', 'flex-1', 'p-4']\n})\n"],"mappings":";;AAEA,IAAa,0BAA0B,OAAO,OAAO,EACnD,MAAM;CAAC;CAAmB;CAAU;CAAM,EAC3C,CAAC"}

package/dist/components/dismissible/DismissibleRoot.js.map

@@ -1 +1 @@
-{"version":3,"file":"DismissibleRoot.js","names":[],"sources":["../../../src/components/dismissible/DismissibleRoot.tsx"],"sourcesContent":["import { Slot } from '@radix-ui/react-slot'\nimport * as React from 'react'\n\nexport interface IDismissibleRootContext {\n  disabled?: boolean\n  isDismissed: boolean\n  setIsDismissed: (boolean) => void\n  onDismiss: () => void\n}\n\nexport const DismissibleRootContext =\n  React.createContext<IDismissibleRootContext>({\n    isDismissed: false,\n    setIsDismissed: () => undefined,\n    onDismiss: () => undefined\n  })\n\nexport interface IDismissibleRootProps {\n  disabled?: boolean\n  dismissed?: boolean\n  onDismiss?: () => void\n}\n\nexport const DismissibleRootProvider = ({\n  dismissed: controlledIsDismissed,\n  children,\n  disabled,\n  onDismiss = () => null\n}: React.PropsWithChildren<IDismissibleRootProps>) => {\n  const [isDismissed, setIsDismissed] = React.useState(false)\n\n  const value = React.useMemo<IDismissibleRootContext>(() => {\n    const isControlled = typeof controlledIsDismissed === 'boolean'\n    return {\n      disabled,\n      isDismissed: isControlled\n        ? (controlledIsDismissed as boolean)\n        : isDismissed,\n      setIsDismissed: isControlled ? () => null : setIsDismissed,\n      onDismiss\n    }\n  }, [disabled, isDismissed, onDismiss, controlledIsDismissed])\n\n  return (\n    <DismissibleRootContext.Provider value={value}>\n      {children}\n    </DismissibleRootContext.Provider>\n  )\n}\n\nexport interface IDismissibleRootInternalProps {\n  asChild?: boolean\n}\n\nconst DismissibleRootInternal = ({\n  asChild = false,\n  ...rest\n}: React.PropsWithChildren<IDismissibleRootInternalProps>) => {\n  const rootContext = React.useContext(DismissibleRootContext)\n\n  const { isDismissed, disabled } = rootContext\n\n  if (isDismissed) return null\n\n  const props = { ...(disabled && { [`data-disabled`]: '' }), ...rest }\n  const Component = asChild ? Slot : 'div'\n  return <Component {...props} />\n}\n\nexport const DismissibleRoot = ({\n  disabled = false,\n  dismissed,\n  onDismiss,\n  ...rest\n}: React.PropsWithChildren<\n  IDismissibleRootInternalProps & IDismissibleRootProps\n>) => (\n  <DismissibleRootProvider\n    dismissed={dismissed}\n    disabled={disabled}\n    onDismiss={onDismiss}\n  >\n    <DismissibleRootInternal {...rest} />\n  </DismissibleRootProvider>\n)\n\nDismissibleRoot.displayName = 'Dismissible'\n"],"mappings":";;;AAUA,IAAa,yBACX,QAAM,cAAuC;CAC3C,aAAa;CACb,sBAAsB,KAAA;CACtB,iBAAiB,KAAA;AACnB,CAAC;AAQH,IAAa,2BAA2B,EACtC,WAAW,uBACX,UACA,UACA,kBAAkB,WACkC;CACpD,MAAM,CAAC,aAAa,kBAAkB,QAAM,SAAS,KAAK;CAE1D,MAAM,QAAQ,QAAM,cAAuC;EACzD,MAAM,eAAe,OAAO,0BAA0B;EACtD,OAAO;GACL;GACA,aAAa,eACR,wBACD;GACJ,gBAAgB,qBAAqB,OAAO;GAC5C;EACF;CACF,GAAG;EAAC;EAAU;EAAa;EAAW;CAAqB,CAAC;CAE5D,OACE,wBAAA,cAAC,uBAAuB,UAAxB,EAAwC,MAEP,GAD9B,QAC8B;AAErC;AAMA,IAAM,2BAA2B,EAC/B,UAAU,OACV,GAAG,WACyD;CAG5D,MAAM,EAAE,aAAa,aAFD,QAAM,WAAW,sBAEH;CAElC,IAAI,aAAa,OAAO;CAExB,MAAM,QAAQ;EAAE,GAAI,YAAY,GAAG,kBAAkB,GAAG;EAAI,GAAG;CAAK;CACpE,MAAM,YAAY,UAAU,OAAO;CACnC,OAAO,wBAAA,cAAC,WAAc,KAAQ;AAChC;AAEA,IAAa,mBAAmB,EAC9B,WAAW,OACX,WACA,WACA,GAAG,WAIH,wBAAA,cAAC,yBAAD;CACa;CACD;CACC;AAGY,GADvB,wBAAA,cAAC,yBAA4B,IAAO,CACb;AAG3B,gBAAgB,cAAc"}
+{"version":3,"file":"DismissibleRoot.js","names":[],"sources":["../../../src/components/dismissible/DismissibleRoot.tsx"],"sourcesContent":["import { Slot } from '@radix-ui/react-slot'\nimport * as React from 'react'\n\nexport interface IDismissibleRootContext {\n  disabled?: boolean\n  isDismissed: boolean\n  setIsDismissed: (boolean) => void\n  onDismiss: () => void\n}\n\nexport const DismissibleRootContext =\n  React.createContext<IDismissibleRootContext>({\n    isDismissed: false,\n    setIsDismissed: () => undefined,\n    onDismiss: () => undefined\n  })\n\nexport interface IDismissibleRootProps {\n  disabled?: boolean\n  dismissed?: boolean\n  onDismiss?: () => void\n}\n\nexport const DismissibleRootProvider = ({\n  dismissed: controlledIsDismissed,\n  children,\n  disabled,\n  onDismiss = () => null\n}: React.PropsWithChildren<IDismissibleRootProps>) => {\n  const [isDismissed, setIsDismissed] = React.useState(false)\n\n  const value = React.useMemo<IDismissibleRootContext>(() => {\n    const isControlled = typeof controlledIsDismissed === 'boolean'\n    return {\n      disabled,\n      isDismissed: isControlled\n        ? (controlledIsDismissed as boolean)\n        : isDismissed,\n      setIsDismissed: isControlled ? () => null : setIsDismissed,\n      onDismiss\n    }\n  }, [disabled, isDismissed, onDismiss, controlledIsDismissed])\n\n  return (\n    <DismissibleRootContext.Provider value={value}>\n      {children}\n    </DismissibleRootContext.Provider>\n  )\n}\n\nexport interface IDismissibleRootInternalProps {\n  asChild?: boolean\n}\n\nconst DismissibleRootInternal = ({\n  asChild = false,\n  ...rest\n}: React.PropsWithChildren<IDismissibleRootInternalProps>) => {\n  const rootContext = React.useContext(DismissibleRootContext)\n\n  const { isDismissed, disabled } = rootContext\n\n  if (isDismissed) return null\n\n  const props = { ...(disabled && { [`data-disabled`]: '' }), ...rest }\n  const Component = asChild ? Slot : 'div'\n  return <Component {...props} />\n}\n\nexport const DismissibleRoot = ({\n  disabled = false,\n  dismissed,\n  onDismiss,\n  ...rest\n}: React.PropsWithChildren<\n  IDismissibleRootInternalProps & IDismissibleRootProps\n>) => (\n  <DismissibleRootProvider\n    dismissed={dismissed}\n    disabled={disabled}\n    onDismiss={onDismiss}\n  >\n    <DismissibleRootInternal {...rest} />\n  </DismissibleRootProvider>\n)\n\nDismissibleRoot.displayName = 'Dismissible'\n"],"mappings":";;;AAUA,IAAa,yBACX,QAAM,cAAuC;CAC3C,aAAa;CACb,sBAAsB,KAAA;CACtB,iBAAiB,KAAA;CAClB,CAAC;AAQJ,IAAa,2BAA2B,EACtC,WAAW,uBACX,UACA,UACA,kBAAkB,WACkC;CACpD,MAAM,CAAC,aAAa,kBAAkB,QAAM,SAAS,MAAM;CAE3D,MAAM,QAAQ,QAAM,cAAuC;EACzD,MAAM,eAAe,OAAO,0BAA0B;AACtD,SAAO;GACL;GACA,aAAa,eACR,wBACD;GACJ,gBAAgB,qBAAqB,OAAO;GAC5C;GACD;IACA;EAAC;EAAU;EAAa;EAAW;EAAsB,CAAC;AAE7D,QACE,wBAAA,cAAC,uBAAuB,UAAxB,EAAwC,OAEN,EAD/B,SAC+B;;AAQtC,IAAM,2BAA2B,EAC/B,UAAU,OACV,GAAG,WACyD;CAG5D,MAAM,EAAE,aAAa,aAFD,QAAM,WAAW,uBAAuB;AAI5D,KAAI,YAAa,QAAO;CAExB,MAAM,QAAQ;EAAE,GAAI,YAAY,GAAG,kBAAkB,IAAI;EAAG,GAAG;EAAM;CACrE,MAAM,YAAY,UAAU,OAAO;AACnC,QAAO,wBAAA,cAAC,WAAc,MAAS;;AAGjC,IAAa,mBAAmB,EAC9B,WAAW,OACX,WACA,WACA,GAAG,WAIH,wBAAA,cAAC,yBAAD;CACa;CACD;CACC;CAGa,EADxB,wBAAA,cAAC,yBAA4B,KAAQ,CACb;AAG5B,gBAAgB,cAAc"}