@atom-learning/components 2.44.0 → 2.46.0

package/CHANGELOG.md

@@ -1,14 +1,25 @@
-# [2.44.0](https://github.com/Atom-Learning/components/compare/v2.43.0...v2.44.0) (2023-03-13)
+# [2.46.0](https://github.com/Atom-Learning/components/compare/v2.45.0...v2.46.0) (2023-04-05)
 
 
 ### Bug Fixes
 
-* cast to string in globalFilterFn to make it safe for numbers and booleans ([5b146ec](https://github.com/Atom-Learning/components/commit/5b146ecb8f806f5ca300ea8f0334fd46b76495eb))
+* add check on state to fix tests ([4e713b9](https://github.com/Atom-Learning/components/commit/4e713b93ede99e435450104f6a57e7fd78822f21))
+* bump react-live to use tabMode="focus" prop on Editor ([6ee6c60](https://github.com/Atom-Learning/components/commit/6ee6c605e2b95bb248bb0d1e3de3b0511d298d87))
+* empty state to not load if component is still loading ([a121e62](https://github.com/Atom-Learning/components/commit/a121e62cd8389fd25050e5f3f5627504703ba92a))
+* feedback on variables ([9252e68](https://github.com/Atom-Learning/components/commit/9252e68e0c1fe1f432f863e1828638ef4fb13f16))
+* last instance of variables ([5f6217c](https://github.com/Atom-Learning/components/commit/5f6217ca87728d6cba114fd3871ab8ddf75fe6a5))
+* only appendToWindow if there's actually a selectedOption on CreatableSelectWidget ([ff8179d](https://github.com/Atom-Learning/components/commit/ff8179d6839ba619e959be03e6d5a4b936b72198))
+* remove comments ([5f4047b](https://github.com/Atom-Learning/components/commit/5f4047b38950a06358a1b3c1d310654872be8a18))
+* rename variable for empty ([9f80359](https://github.com/Atom-Learning/components/commit/9f80359001e2b63bc7e324a8b04da8638f89b3d4))
 
 
 ### Features
 
-* enable editorial workflow ([d4da92d](https://github.com/Atom-Learning/components/commit/d4da92d73a0776e8cf6bce1bc1aa6b649b3915d2))
+* add emptystate to DataTable ([d833346](https://github.com/Atom-Learning/components/commit/d833346bcb04c21c1c565dec7aef989446aec61a))
+* Cards component frontend ([bf6af50](https://github.com/Atom-Learning/components/commit/bf6af50d37b9aa38f1918aacffd3ed8f47219b10))
+* CardsEditorComponent ([ab8cb08](https://github.com/Atom-Learning/components/commit/ab8cb089a7110721cfa461bc1f1c887c8def34ea))
+* CreatableSelectWidget ([965304e](https://github.com/Atom-Learning/components/commit/965304ee50edb44e2de901f9975368a3fef79f17))
+* make tables in the docs site white and not striped ([b268eb0](https://github.com/Atom-Learning/components/commit/b268eb0136547cc2be336f43fdfe54636bf19ac6))
 
 # [1.4.0](https://github.com/Atom-Learning/components/compare/v1.3.0...v1.4.0) (2022-04-11)
 

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

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { DataTableBody } from './DataTableBody';
 import { DataTableProvider } from './DataTableContext';
 import { DataTableDataCell } from './DataTableDataCell';
+import { DataTableEmptyState } from './DataTableEmptyState';
 import { DataTableError } from './DataTableError';
 import { DataTableGlobalFilter } from './DataTableGlobalFilter';
 import { DataTableHead } from './DataTableHead';
@@ -88,6 +89,11 @@ declare type TDataTable = React.FC<React.ComponentProps<typeof DataTableProvider
      *
      */
     Error: typeof DataTableError;
+    /** Empty state implementation for `DataTable`.
+     *
+     * Extends the EmptyState component
+     */
+    EmptyState: typeof DataTableEmptyState;
 };
 /** Context provider for DataTable state and logic.
  *

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

@@ -1,2 +1,2 @@
-import*as o from"react";import{DataTableBody as t}from"./DataTableBody.js";import{DataTableProvider as e}from"./DataTableContext.js";import{DataTableDataCell as l}from"./DataTableDataCell.js";import{DataTableError as m}from"./DataTableError.js";import{DataTableGlobalFilter as i}from"./DataTableGlobalFilter.js";import{DataTableHead as b}from"./DataTableHead.js";import{DataTableHeaderCell as D}from"./DataTableHeaderCell.js";import{DataTableLoading as p}from"./DataTableLoading.js";import{DataTableRow as T}from"./DataTableRow.js";import{DataTableTable as f}from"./DataTableTable.js";import{DragAndDropTable as d}from"./drag-and-drop/DragAndDropTable.js";import{Pagination as n}from"./pagination/Pagination.js";const a=r=>o.createElement(e,{...r});a.Body=t,a.DataCell=l,a.DragAndDropTable=d,a.Head=b,a.HeaderCell=D,a.Pagination=n,a.Row=T,a.GlobalFilter=i,a.Table=f,a.Loading=p,a.Error=m;export{a as DataTable};
+import*as o from"react";import{DataTableBody as t}from"./DataTableBody.js";import{DataTableProvider as e}from"./DataTableContext.js";import{DataTableDataCell as l}from"./DataTableDataCell.js";import{DataTableEmptyState as m}from"./DataTableEmptyState.js";import{DataTableError as i}from"./DataTableError.js";import{DataTableGlobalFilter as p}from"./DataTableGlobalFilter.js";import{DataTableHead as b}from"./DataTableHead.js";import{DataTableHeaderCell as D}from"./DataTableHeaderCell.js";import{DataTableLoading as T}from"./DataTableLoading.js";import{DataTableRow as f}from"./DataTableRow.js";import{DataTableTable as d}from"./DataTableTable.js";import{DragAndDropTable as n}from"./drag-and-drop/DragAndDropTable.js";import{Pagination as g}from"./pagination/Pagination.js";const a=r=>o.createElement(e,{...r});a.Body=t,a.DataCell=l,a.DragAndDropTable=n,a.Head=b,a.HeaderCell=D,a.Pagination=g,a.Row=f,a.GlobalFilter=p,a.Table=d,a.Loading=T,a.Error=i,a.EmptyState=m;export{a as DataTable};
 //# sourceMappingURL=DataTable.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"DataTable.js","sources":["../../../src/components/data-table/DataTable.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { DataTableBody } from './DataTableBody'\nimport { DataTableProvider } from './DataTableContext'\nimport { DataTableDataCell } from './DataTableDataCell'\nimport { DataTableError } from './DataTableError'\nimport { DataTableGlobalFilter } from './DataTableGlobalFilter'\nimport { DataTableHead } from './DataTableHead'\nimport { DataTableHeaderCell } from './DataTableHeaderCell'\nimport { DataTableLoading } from './DataTableLoading'\nimport { DataTableRow } from './DataTableRow'\nimport { DataTableTable } from './DataTableTable'\nimport { DragAndDropTable } from './drag-and-drop'\nimport { Pagination } from './pagination'\n\ntype TDataTable = React.FC<React.ComponentProps<typeof DataTableProvider>> & {\n  /** Default table body implementation for `DataTable`.\n   *\n   * Can be configured with alternating colours of rows. If you need more customisation options,\n   * you can build your own implementation with `useDataTable()` and the UI-only `Table` components.\n   */\n  Body: typeof DataTableBody\n\n  /** Default table data cell implementation for `DataTable`\n   *\n   *\n   */\n  DataCell: typeof DataTableDataCell\n  /**\n   * Used in place of `DataTable.Table` to render a table with rows that the user can sort by drag-and-drop\n   */\n  DragAndDropTable: typeof DragAndDropTable\n  /** Default global search implementation for `DataTable`\n   *\n   * If you need more customisation options, you can compose your own implementation with our UI-only input components and `useDataTable`.\n   */\n  GlobalFilter: typeof DataTableGlobalFilter\n\n  /** Default table head implementation\n   *\n   * Can be configured to be sortable and with different visual themes.\n   * If you need more customisation options, you can build your own implementation\n   * with `useDataTable` and the UI-only `Table` components.\n   */\n\n  Head: typeof DataTableHead\n  /** Default header implementation for `DataTable`\n   *\n   * Can be configured to make the column sortable. If you need more customisation options,\n   * you can build your own implementation with the UI-only `Table` components.\n   */\n\n  HeaderCell: typeof DataTableHeaderCell\n  /** Default pagination implementation for `DataTable`\n   *\n   * Can navigate forward, backward, or to any specific page. If you need more customisation options,\n   * you can build your own implementation with `useDataTable` and other UI components.\n   *\n   */\n\n  Pagination: typeof Pagination\n  /** Default row implementation for `DataTable`\n   *\n   * Renders all visible cells as `Table.Cell`. If you need more customisation options,\n   * you can build your own implementation with the UI-only `Table` components.\n   */\n\n  Row: typeof DataTableRow\n\n  /** Default table implementation for `DataTable`.\n   *\n   * Can be configured with sortable columns and different visual themes.\n   *\n   * If you need more customisation options, you can compose your own implementation with\n   * lower-level `DataTable` components or build the whole thing from\n   * scratch with `useDataTable` and the UI-only `Table` components.\n   *\n   */\n  Table: typeof DataTableTable\n\n  /** Default loading implementation for remote data\n   *\n   * Renders a loading component while fetching the paginated data using `getAsyncData`.\n   *\n   * If you need more customisation, you can compose your own implentation, `asyncDataState`\n   * can be retrieved from `useDataTable`\n   */\n  Loading: typeof DataTableLoading\n\n  /** Default error implementation for remote data\n   *\n   * Renders an error component when `getAsyncData` promise rejects.\n   * Children are rendered as a function, it exposes a `runAsyncData` function to the children component.\n   * `runAsyncData()` can be used to retry fetching the paginated data with the current pageIndex, pageSize\n   * and sorting parameters or your own custom paginated options.\n   *\n   * If you need more customisation, you can compose your own implentation, `asyncDataState` and `runAsyncData()`\n   * can be retrieved from `useDataTable`\n   *\n   */\n  Error: typeof DataTableError\n}\n\n/** Context provider for DataTable state and logic.\n *\n * Children can call `useDataTable` to access everything provided by `@tanstack/react-table` plus\n * the functionality we've built on top.\n */\nexport const DataTable: TDataTable = (props) => <DataTableProvider {...props} />\n\nDataTable.Body = DataTableBody\nDataTable.DataCell = DataTableDataCell\nDataTable.DragAndDropTable = DragAndDropTable\nDataTable.Head = DataTableHead\nDataTable.HeaderCell = DataTableHeaderCell\nDataTable.Pagination = Pagination\nDataTable.Row = DataTableRow\nDataTable.GlobalFilter = DataTableGlobalFilter\nDataTable.Table = DataTableTable\nDataTable.Loading = DataTableLoading\nDataTable.Error = DataTableError\n"],"names":["DataTable","props","React","DataTableProvider","DataTableBody","DataTableDataCell","DragAndDropTable","DataTableHead","DataTableHeaderCell","Pagination","DataTableRow","DataTableGlobalFilter","DataTableTable","DataTableLoading","DataTableError"],"mappings":"wsBA4GO,MAAMA,EAAyBC,GAAUC,EAAA,cAACC,EAAA,CAAmB,GAAGF,CAAO,CAAA,EAE9ED,EAAU,KAAOI,EACjBJ,EAAU,SAAWK,EACrBL,EAAU,iBAAmBM,EAC7BN,EAAU,KAAOO,EACjBP,EAAU,WAAaQ,EACvBR,EAAU,WAAaS,EACvBT,EAAU,IAAMU,EAChBV,EAAU,aAAeW,EACzBX,EAAU,MAAQY,EAClBZ,EAAU,QAAUa,EACpBb,EAAU,MAAQc"}
+{"version":3,"file":"DataTable.js","sources":["../../../src/components/data-table/DataTable.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { DataTableBody } from './DataTableBody'\nimport { DataTableProvider } from './DataTableContext'\nimport { DataTableDataCell } from './DataTableDataCell'\nimport { DataTableEmptyState } from './DataTableEmptyState'\nimport { DataTableError } from './DataTableError'\nimport { DataTableGlobalFilter } from './DataTableGlobalFilter'\nimport { DataTableHead } from './DataTableHead'\nimport { DataTableHeaderCell } from './DataTableHeaderCell'\nimport { DataTableLoading } from './DataTableLoading'\nimport { DataTableRow } from './DataTableRow'\nimport { DataTableTable } from './DataTableTable'\nimport { DragAndDropTable } from './drag-and-drop'\nimport { Pagination } from './pagination'\n\ntype TDataTable = React.FC<React.ComponentProps<typeof DataTableProvider>> & {\n  /** Default table body implementation for `DataTable`.\n   *\n   * Can be configured with alternating colours of rows. If you need more customisation options,\n   * you can build your own implementation with `useDataTable()` and the UI-only `Table` components.\n   */\n  Body: typeof DataTableBody\n\n  /** Default table data cell implementation for `DataTable`\n   *\n   *\n   */\n  DataCell: typeof DataTableDataCell\n  /**\n   * Used in place of `DataTable.Table` to render a table with rows that the user can sort by drag-and-drop\n   */\n  DragAndDropTable: typeof DragAndDropTable\n  /** Default global search implementation for `DataTable`\n   *\n   * If you need more customisation options, you can compose your own implementation with our UI-only input components and `useDataTable`.\n   */\n  GlobalFilter: typeof DataTableGlobalFilter\n\n  /** Default table head implementation\n   *\n   * Can be configured to be sortable and with different visual themes.\n   * If you need more customisation options, you can build your own implementation\n   * with `useDataTable` and the UI-only `Table` components.\n   */\n\n  Head: typeof DataTableHead\n  /** Default header implementation for `DataTable`\n   *\n   * Can be configured to make the column sortable. If you need more customisation options,\n   * you can build your own implementation with the UI-only `Table` components.\n   */\n\n  HeaderCell: typeof DataTableHeaderCell\n  /** Default pagination implementation for `DataTable`\n   *\n   * Can navigate forward, backward, or to any specific page. If you need more customisation options,\n   * you can build your own implementation with `useDataTable` and other UI components.\n   *\n   */\n\n  Pagination: typeof Pagination\n  /** Default row implementation for `DataTable`\n   *\n   * Renders all visible cells as `Table.Cell`. If you need more customisation options,\n   * you can build your own implementation with the UI-only `Table` components.\n   */\n\n  Row: typeof DataTableRow\n\n  /** Default table implementation for `DataTable`.\n   *\n   * Can be configured with sortable columns and different visual themes.\n   *\n   * If you need more customisation options, you can compose your own implementation with\n   * lower-level `DataTable` components or build the whole thing from\n   * scratch with `useDataTable` and the UI-only `Table` components.\n   *\n   */\n  Table: typeof DataTableTable\n\n  /** Default loading implementation for remote data\n   *\n   * Renders a loading component while fetching the paginated data using `getAsyncData`.\n   *\n   * If you need more customisation, you can compose your own implentation, `asyncDataState`\n   * can be retrieved from `useDataTable`\n   */\n  Loading: typeof DataTableLoading\n\n  /** Default error implementation for remote data\n   *\n   * Renders an error component when `getAsyncData` promise rejects.\n   * Children are rendered as a function, it exposes a `runAsyncData` function to the children component.\n   * `runAsyncData()` can be used to retry fetching the paginated data with the current pageIndex, pageSize\n   * and sorting parameters or your own custom paginated options.\n   *\n   * If you need more customisation, you can compose your own implentation, `asyncDataState` and `runAsyncData()`\n   * can be retrieved from `useDataTable`\n   *\n   */\n  Error: typeof DataTableError\n\n  /** Empty state implementation for `DataTable`.\n   *\n   * Extends the EmptyState component\n   */\n  EmptyState: typeof DataTableEmptyState\n}\n\n/** Context provider for DataTable state and logic.\n *\n * Children can call `useDataTable` to access everything provided by `@tanstack/react-table` plus\n * the functionality we've built on top.\n */\nexport const DataTable: TDataTable = (props) => <DataTableProvider {...props} />\n\nDataTable.Body = DataTableBody\nDataTable.DataCell = DataTableDataCell\nDataTable.DragAndDropTable = DragAndDropTable\nDataTable.Head = DataTableHead\nDataTable.HeaderCell = DataTableHeaderCell\nDataTable.Pagination = Pagination\nDataTable.Row = DataTableRow\nDataTable.GlobalFilter = DataTableGlobalFilter\nDataTable.Table = DataTableTable\nDataTable.Loading = DataTableLoading\nDataTable.Error = DataTableError\nDataTable.EmptyState = DataTableEmptyState\n"],"names":["DataTable","props","React","DataTableProvider","DataTableBody","DataTableDataCell","DragAndDropTable","DataTableHead","DataTableHeaderCell","Pagination","DataTableRow","DataTableGlobalFilter","DataTableTable","DataTableLoading","DataTableError","DataTableEmptyState"],"mappings":"uwBAmHO,MAAMA,EAAyBC,GAAUC,EAAA,cAACC,EAAA,CAAmB,GAAGF,CAAO,CAAA,EAE9ED,EAAU,KAAOI,EACjBJ,EAAU,SAAWK,EACrBL,EAAU,iBAAmBM,EAC7BN,EAAU,KAAOO,EACjBP,EAAU,WAAaQ,EACvBR,EAAU,WAAaS,EACvBT,EAAU,IAAMU,EAChBV,EAAU,aAAeW,EACzBX,EAAU,MAAQY,EAClBZ,EAAU,QAAUa,EACpBb,EAAU,MAAQc,EAClBd,EAAU,WAAae"}

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

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { EmptyState } from '../empty-state';
+declare type DataTableEmptyStateProps = React.ComponentProps<typeof EmptyState>;
+export declare const DataTableEmptyState: React.FC<DataTableEmptyStateProps>;
+export {};

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

@@ -0,0 +1,2 @@
+import*as r from"react";import{EmptyState as m}from"../empty-state/EmptyState.js";import{AsyncDataState as n}from"./DataTable.types.js";import{useDataTable as l}from"./DataTableContext.js";const p=({children:t,...a})=>{const{asyncDataState:e,getTotalRows:o}=l();return e!==n.PENDING&&o()===0?r.createElement(m,{...a},t):null};export{p as DataTableEmptyState};
+//# sourceMappingURL=DataTableEmptyState.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableEmptyState.js","sources":["../../../src/components/data-table/DataTableEmptyState.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { EmptyState } from '../empty-state'\nimport { AsyncDataState } from './DataTable.types'\nimport { useDataTable } from './DataTableContext'\n\ntype DataTableEmptyStateProps = React.ComponentProps<typeof EmptyState>\n\nexport const DataTableEmptyState: React.FC<DataTableEmptyStateProps> = ({\n  children,\n  ...rest\n}) => {\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"],"names":["DataTableEmptyState","children","rest","asyncDataState","getTotalRows","useDataTable","AsyncDataState","React","EmptyState"],"mappings":"mMAQaA,EAA0D,CAAC,CACtE,SAAAC,KACGC,CACL,IAAM,CACJ,KAAM,CAAE,eAAAC,EAAgB,aAAAC,CAAa,EAAIC,EAKzC,EAAA,OAHkBF,IAAmBG,EAAe,SACtBF,MAAmB,EAI1CG,EAAA,cAACC,EAAA,CAAY,GAAGN,CAAAA,EAAOD,CAAS,EAFlB,IAGvB"}

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

@@ -1,2 +1,2 @@
-import*as e from"react";import{debounce as p}from"throttle-debounce";import{OptionallyVisuallyHiddenContainer as u}from"../../utilities/optionally-visually-hidden-container/OptionallyVisuallyHiddenContainer.js";import{Label as d}from"../label/Label.js";import{SearchInput as f}from"../search-input/SearchInput.js";import{useDataTable as g}from"./DataTableContext.js";const h=({onChange:a,label:t,hideLabel:r=!1,...n})=>{const{setGlobalFilter:o,getState:m,resetPagination:i}=g(),{globalFilter:b}=m(),s=p(250,l=>{const{target:{value:c}}=l;a==null||a(l),i(),o(c)});return e.createElement(e.Fragment,null,e.createElement(u,{hidden:r},e.createElement(d,{css:{mb:"$3"},htmlFor:t},t)),e.createElement(f,{...n,defaultValue:b,onChange:s,name:t}))};export{h as DataTableGlobalFilter};
+import*as t from"react";import{debounce as f}from"throttle-debounce";import{OptionallyVisuallyHiddenContainer as d}from"../../utilities/optionally-visually-hidden-container/OptionallyVisuallyHiddenContainer.js";import{Label as g}from"../label/Label.js";import{SearchInput as h}from"../search-input/SearchInput.js";import{AsyncDataState as D}from"./DataTable.types.js";import{useDataTable as E}from"./DataTableContext.js";const F=({onChange:a,label:e,hideLabel:r=!1,...n})=>{const{setGlobalFilter:o,getState:m,resetPagination:i,getTotalRows:s,asyncDataState:c}=E(),{globalFilter:u}=m();if(c!==D.PENDING&&s()===0)return null;const b=f(250,l=>{const{target:{value:p}}=l;a==null||a(l),i(),o(p)});return t.createElement(t.Fragment,null,t.createElement(d,{hidden:r},t.createElement(g,{css:{mb:"$3"},htmlFor:e},e)),t.createElement(h,{...n,defaultValue:u,onChange:b,name:e}))};export{F as DataTableGlobalFilter};
 //# sourceMappingURL=DataTableGlobalFilter.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"DataTableGlobalFilter.js","sources":["../../../src/components/data-table/DataTableGlobalFilter.tsx"],"sourcesContent":["import * as React from 'react'\nimport { debounce } from 'throttle-debounce'\n\nimport { OptionallyVisuallyHiddenContainer } from '../../utilities/optionally-visually-hidden-container'\nimport { Label } from '../label'\nimport { SearchInput } from '../search-input'\nimport { useDataTable } from './DataTableContext'\n\ntype DataTableSearchProps = React.ComponentProps<typeof SearchInput> & {\n  label: string\n  hideLabel?: boolean\n}\nexport const DataTableGlobalFilter: React.FC<DataTableSearchProps> = ({\n  onChange,\n  label,\n  hideLabel = false,\n  ...props\n}) => {\n  const { setGlobalFilter, getState, resetPagination } = useDataTable()\n  const { globalFilter } = getState()\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      <OptionallyVisuallyHiddenContainer hidden={hideLabel}>\n        <Label css={{ mb: '$3' }} htmlFor={label}>\n          {label}\n        </Label>\n      </OptionallyVisuallyHiddenContainer>\n      <SearchInput\n        {...props}\n        defaultValue={globalFilter}\n        onChange={handleChange}\n        name={label}\n      />\n    </>\n  )\n}\n"],"names":["DataTableGlobalFilter","onChange","label","hideLabel","props","setGlobalFilter","getState","resetPagination","useDataTable","globalFilter","handleChange","debounce","event","value","React","OptionallyVisuallyHiddenContainer","Label","SearchInput"],"mappings":"+WAYa,MAAAA,EAAwD,CAAC,CACpE,SAAAC,EACA,MAAAC,EACA,UAAAC,EAAY,MACTC,CACL,IAAM,CACJ,KAAM,CAAE,gBAAAC,EAAiB,SAAAC,EAAU,gBAAAC,CAAgB,EAAIC,EAAAA,EACjD,CAAE,aAAAC,CAAa,EAAIH,EAEnBI,EAAAA,EAAeC,EAAS,IAAMC,GAAU,CAC5C,KAAM,CACJ,OAAQ,CAAE,MAAAC,CAAM,CAClB,EAAID,EAEJX,GAAA,MAAAA,EAAWW,CAAAA,EACXL,IACAF,EAAgBQ,CAAK,CACvB,CAAC,EAED,OACEC,EAAA,cAAAA,EAAA,SACEA,KAAAA,EAAA,cAACC,EAAA,CAAkC,OAAQZ,GACzCW,EAAA,cAACE,EAAA,CAAM,IAAK,CAAE,GAAI,IAAK,EAAG,QAASd,CAChCA,EAAAA,CACH,CACF,EACAY,EAAA,cAACG,EAAA,CACE,GAAGb,EACJ,aAAcK,EACd,SAAUC,EACV,KAAMR,CACR,CAAA,CACF,CAEJ"}
+{"version":3,"file":"DataTableGlobalFilter.js","sources":["../../../src/components/data-table/DataTableGlobalFilter.tsx"],"sourcesContent":["import * as React from 'react'\nimport { debounce } from 'throttle-debounce'\n\nimport { OptionallyVisuallyHiddenContainer } from '../../utilities/optionally-visually-hidden-container'\nimport { Label } from '../label'\nimport { SearchInput } from '../search-input'\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: React.FC<DataTableSearchProps> = ({\n  onChange,\n  label,\n  hideLabel = false,\n  ...props\n}) => {\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      <OptionallyVisuallyHiddenContainer hidden={hideLabel}>\n        <Label css={{ mb: '$3' }} htmlFor={label}>\n          {label}\n        </Label>\n      </OptionallyVisuallyHiddenContainer>\n      <SearchInput\n        {...props}\n        defaultValue={globalFilter}\n        onChange={handleChange}\n        name={label}\n      />\n    </>\n  )\n}\n"],"names":["DataTableGlobalFilter","onChange","label","hideLabel","props","setGlobalFilter","getState","resetPagination","getTotalRows","asyncDataState","useDataTable","globalFilter","AsyncDataState","handleChange","debounce","event","value","React","OptionallyVisuallyHiddenContainer","Label","SearchInput"],"mappings":"qaAaO,MAAMA,EAAwD,CAAC,CACpE,SAAAC,EACA,MAAAC,EACA,UAAAC,EAAY,MACTC,CACL,IAAM,CACJ,KAAM,CACJ,gBAAAC,EACA,SAAAC,EACA,gBAAAC,EACA,aAAAC,EACA,eAAAC,CACF,EAAIC,EAAa,EACX,CAAE,aAAAC,CAAa,EAAIL,EAAAA,EAKzB,GAHkBG,IAAmBG,EAAe,SACtBJ,EAAAA,IAAmB,EAEpC,OAAO,KAEpB,MAAMK,EAAeC,EAAS,IAAMC,GAAU,CAC5C,KAAM,CACJ,OAAQ,CAAE,MAAAC,CAAM,CAClB,EAAID,EAEJd,GAAA,MAAAA,EAAWc,CAAAA,EACXR,IACAF,EAAgBW,CAAK,CACvB,CAAC,EAED,OACEC,EAAA,cAAAA,EAAA,SAAA,KACEA,EAAA,cAACC,EAAA,CAAkC,OAAQf,CAAAA,EACzCc,EAAA,cAACE,EAAA,CAAM,IAAK,CAAE,GAAI,IAAK,EAAG,QAASjB,CAAAA,EAChCA,CACH,CACF,EACAe,EAAA,cAACG,EAAA,CACE,GAAGhB,EACJ,aAAcO,EACd,SAAUE,EACV,KAAMX,CAAAA,CACR,CACF,CAEJ"}

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

@@ -1,2 +1,2 @@
-import*as e from"react";import{Table as c}from"../table/Table.js";import{DataTable as t}from"./DataTable.js";import{AsyncDataState as p}from"./DataTable.types.js";import{useDataTable as b}from"./DataTableContext.js";import{DataTableLoading as f}from"./DataTableLoading.js";const u=({sortable:a,striped:r,theme:m,css:o,numberOfStickyColumns:n=0,...s})=>{const{asyncDataState:l}=b(),i=l===p.PENDING;return e.createElement(e.Fragment,null,e.createElement(f,null),e.createElement(c,{...s,numberOfStickyColumns:n,css:{...o,...i&&{opacity:.5,pointerEvents:"none",transition:"opacity 250ms linear 150ms"}}},e.createElement(t.Head,{theme:m,sortable:a}),e.createElement(t.Body,{striped:r})))};export{u as DataTableTable};
+import*as e from"react";import{Table as p}from"../table/Table.js";import{DataTable as a}from"./DataTable.js";import{AsyncDataState as b}from"./DataTable.types.js";import{useDataTable as u}from"./DataTableContext.js";import{DataTableLoading as f}from"./DataTableLoading.js";const y=({sortable:r,striped:o,theme:m,css:n,numberOfStickyColumns:l=0,...s})=>{const{asyncDataState:i,getTotalRows:c}=u(),t=i===b.PENDING;return!t&&c()===0?null:e.createElement(e.Fragment,null,e.createElement(f,null),e.createElement(p,{...s,numberOfStickyColumns:l,css:{...n,...t&&{opacity:.5,pointerEvents:"none",transition:"opacity 250ms linear 150ms"}}},e.createElement(a.Head,{theme:m,sortable:r}),e.createElement(a.Body,{striped:o})))};export{y as DataTableTable};
 //# sourceMappingURL=DataTableTable.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"DataTableTable.js","sources":["../../../src/components/data-table/DataTableTable.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Table } from '../table'\nimport { DataTable } from './DataTable'\nimport { AsyncDataState } from './DataTable.types'\nimport { useDataTable } from './DataTableContext'\nimport { DataTableLoading } from './DataTableLoading'\n\nexport type DataTableTableProps = Omit<\n  React.ComponentProps<typeof Table>,\n  'children'\n> &\n  Partial<\n    Pick<React.ComponentProps<typeof DataTable.Head>, 'theme' | 'sortable'>\n  > &\n  Partial<Pick<React.ComponentProps<typeof Table.Body>, 'striped'>>\n\nexport const DataTableTable: React.FC<DataTableTableProps> = ({\n  sortable,\n  striped,\n  theme,\n  css,\n  numberOfStickyColumns = 0,\n  ...props\n}) => {\n  const { asyncDataState } = useDataTable()\n  const isPending = asyncDataState === AsyncDataState.PENDING\n\n  return (\n    <>\n      <DataTableLoading />\n      <Table\n        {...props}\n        numberOfStickyColumns={numberOfStickyColumns}\n        css={{\n          ...css,\n          ...(isPending && {\n            opacity: 0.5,\n            pointerEvents: 'none',\n            transition: 'opacity 250ms linear 150ms'\n          })\n        }}\n      >\n        <DataTable.Head theme={theme} sortable={sortable} />\n        <DataTable.Body striped={striped} />\n      </Table>\n    </>\n  )\n}\n"],"names":["DataTableTable","sortable","striped","theme","css","numberOfStickyColumns","props","asyncDataState","useDataTable","isPending","AsyncDataState","React","DataTableLoading","Table","DataTable"],"mappings":"iRAiBa,MAAAA,EAAgD,CAAC,CAC5D,SAAAC,EACA,QAAAC,EACA,MAAAC,EACA,IAAAC,EACA,sBAAAC,EAAwB,KACrBC,CACL,IAAM,CACJ,KAAM,CAAE,eAAAC,CAAe,EAAIC,EAAa,EAClCC,EAAYF,IAAmBG,EAAe,QAEpD,OACEC,EAAA,cAAAA,EAAA,SACEA,KAAAA,EAAA,cAACC,EAAA,IAAiB,EAClBD,EAAA,cAACE,EAAA,CACE,GAAGP,EACJ,sBAAuBD,EACvB,IAAK,CACH,GAAGD,EACH,GAAIK,GAAa,CACf,QAAS,GACT,cAAe,OACf,WAAY,4BACd,CACF,CAAA,EAEAE,EAAA,cAACG,EAAU,KAAV,CAAe,MAAOX,EAAO,SAAUF,CAAU,CAAA,EAClDU,EAAA,cAACG,EAAU,KAAV,CAAe,QAASZ,CAAAA,CAAS,CACpC,CACF,CAEJ"}
+{"version":3,"file":"DataTableTable.js","sources":["../../../src/components/data-table/DataTableTable.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Table } from '../table'\nimport { DataTable } from './DataTable'\nimport { AsyncDataState } from './DataTable.types'\nimport { useDataTable } from './DataTableContext'\nimport { DataTableLoading } from './DataTableLoading'\n\nexport type DataTableTableProps = Omit<\n  React.ComponentProps<typeof Table>,\n  'children'\n> &\n  Partial<\n    Pick<React.ComponentProps<typeof DataTable.Head>, 'theme' | 'sortable'>\n  > &\n  Partial<Pick<React.ComponentProps<typeof Table.Body>, 'striped'>>\n\nexport const DataTableTable: React.FC<DataTableTableProps> = ({\n  sortable,\n  striped,\n  theme,\n  css,\n  numberOfStickyColumns = 0,\n  ...props\n}) => {\n  const { asyncDataState, getTotalRows } = useDataTable()\n  const isPending = asyncDataState === AsyncDataState.PENDING\n  const isEmpty = !isPending && getTotalRows() === 0\n\n  if (isEmpty) return null\n\n  return (\n    <>\n      <DataTableLoading />\n      <Table\n        {...props}\n        numberOfStickyColumns={numberOfStickyColumns}\n        css={{\n          ...css,\n          ...(isPending && {\n            opacity: 0.5,\n            pointerEvents: 'none',\n            transition: 'opacity 250ms linear 150ms'\n          })\n        }}\n      >\n        <DataTable.Head theme={theme} sortable={sortable} />\n        <DataTable.Body striped={striped} />\n      </Table>\n    </>\n  )\n}\n"],"names":["DataTableTable","sortable","striped","theme","css","numberOfStickyColumns","props","asyncDataState","getTotalRows","useDataTable","isPending","AsyncDataState","React","DataTableLoading","Table","DataTable"],"mappings":"iRAiBa,MAAAA,EAAgD,CAAC,CAC5D,SAAAC,EACA,QAAAC,EACA,MAAAC,EACA,IAAAC,EACA,sBAAAC,EAAwB,KACrBC,CACL,IAAM,CACJ,KAAM,CAAE,eAAAC,EAAgB,aAAAC,CAAa,EAAIC,EAAa,EAChDC,EAAYH,IAAmBI,EAAe,QAGpD,MAFgB,CAACD,GAAaF,EAAa,IAAM,EAE7B,KAGlBI,EAAA,cAAAA,EAAA,SACEA,KAAAA,EAAA,cAACC,EAAA,IAAiB,EAClBD,EAAA,cAACE,EAAA,CACE,GAAGR,EACJ,sBAAuBD,EACvB,IAAK,CACH,GAAGD,EACH,GAAIM,GAAa,CACf,QAAS,GACT,cAAe,OACf,WAAY,4BACd,CACF,GAEAE,EAAA,cAACG,EAAU,KAAV,CAAe,MAAOZ,EAAO,SAAUF,CAAAA,CAAU,EAClDW,EAAA,cAACG,EAAU,KAAV,CAAe,QAASb,CAAAA,CAAS,CACpC,CACF,CAEJ"}

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

@@ -1,2 +1,2 @@
-import*as e from"react";import{styled as E}from"../../../stitches.js";import{Flex as P}from"../../flex/Flex.js";import{Text as I}from"../../text/Text.js";import{AsyncDataState as s}from"../DataTable.types.js";import{useDataTable as b}from"../DataTableContext.js";import{GotoPageSelect as y,DirectionButton as m}from"./PaginationButtons.js";const C=E("nav",{display:"flex",justifyContent:"space-between",alignItems:"center",fontVariantNumeric:"tabular-nums"}),S=c=>{const{applyPagination:n,getState:g,getRowModel:l,getPageCount:o,previousPage:p,nextPage:d,setPageIndex:f,getTotalRows:u,asyncDataState:i}=b();e.useEffect(()=>{n()},[n]);const{pagination:t}=g(),r=t.pageIndex*t.pageSize+1,x=r+l().rows.length-1,a=i===s.PENDING||i===s.REJECTED;return e.createElement(C,{...c},e.createElement(I,{size:"sm"},`${r.toString()} - ${x.toString()} of ${u()} items`),e.createElement(y,{gotoPage:f,pageCount:o(),pageIndex:t.pageIndex,disabled:a}),e.createElement(P,{css:{justifyContent:"flex-end"}},e.createElement(m,{direction:"previous",disabled:t.pageIndex===0||a,onClick:p,css:{mr:"$4"}}),e.createElement(m,{direction:"next",disabled:t.pageIndex===o()-1||a,onClick:d})))};export{S as Pagination};
+import*as e from"react";import{styled as E}from"../../../stitches.js";import{Flex as P}from"../../flex/Flex.js";import{Text as I}from"../../text/Text.js";import{AsyncDataState as o}from"../DataTable.types.js";import{useDataTable as D}from"../DataTableContext.js";import{GotoPageSelect as y,DirectionButton as m}from"./PaginationButtons.js";const C=E("nav",{display:"flex",justifyContent:"space-between",alignItems:"center",fontVariantNumeric:"tabular-nums"}),S=c=>{const{applyPagination:i,getState:g,getRowModel:p,getPageCount:r,previousPage:d,nextPage:f,setPageIndex:u,getTotalRows:s,asyncDataState:n}=D();e.useEffect(()=>{i()},[i]);const{pagination:t}=g();if(n!==o.PENDING&&s()===0)return null;const l=t.pageIndex*t.pageSize+1,x=l+p().rows.length-1,a=n===o.PENDING||n===o.REJECTED;return e.createElement(C,{...c},e.createElement(I,{size:"sm"},`${l.toString()} - ${x.toString()} of ${s()} items`),e.createElement(y,{gotoPage:u,pageCount:r(),pageIndex:t.pageIndex,disabled:a}),e.createElement(P,{css:{justifyContent:"flex-end"}},e.createElement(m,{direction:"previous",disabled:t.pageIndex===0||a,onClick:d,css:{mr:"$4"}}),e.createElement(m,{direction:"next",disabled:t.pageIndex===r()-1||a,onClick:f})))};export{S as Pagination};
 //# sourceMappingURL=Pagination.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Pagination.js","sources":["../../../../src/components/data-table/pagination/Pagination.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/stitches'\n\nimport { Flex } from '../../flex'\nimport { Text } from '../../text'\nimport { AsyncDataState } from '../DataTable.types'\nimport { useDataTable } from '../DataTableContext'\nimport { DirectionButton, GotoPageSelect } from './PaginationButtons'\n\nconst StyledNav = styled('nav', {\n  display: 'flex',\n  justifyContent: 'space-between',\n  alignItems: 'center',\n  fontVariantNumeric: 'tabular-nums'\n})\n\ntype PaginationProps = React.ComponentProps<typeof StyledNav>\n\n/** Applies pagination to parent DataTableProvider and renders UI to switch pages etc */\nexport const Pagination: React.FC<PaginationProps> = (props) => {\n  const {\n    applyPagination,\n    getState,\n    getRowModel,\n    getPageCount,\n    previousPage,\n    nextPage,\n    setPageIndex,\n    getTotalRows,\n    asyncDataState\n  } = useDataTable()\n\n  React.useEffect(() => {\n    applyPagination()\n  }, [applyPagination])\n\n  const { pagination: paginationState } = getState()\n\n  const recordsCountFrom =\n    paginationState.pageIndex * paginationState.pageSize + 1\n  const recordsCountTo = recordsCountFrom + getRowModel().rows.length - 1\n  const isPaginationDisabled =\n    asyncDataState === AsyncDataState.PENDING ||\n    asyncDataState === AsyncDataState.REJECTED\n\n  return (\n    <StyledNav {...props}>\n      <Text size=\"sm\">\n        {`${recordsCountFrom.toString()} - ${recordsCountTo.toString()} of ${getTotalRows()} items`}\n      </Text>\n\n      <GotoPageSelect\n        gotoPage={setPageIndex}\n        pageCount={getPageCount()}\n        pageIndex={paginationState.pageIndex}\n        disabled={isPaginationDisabled}\n      />\n\n      <Flex css={{ justifyContent: 'flex-end' }}>\n        <DirectionButton\n          direction=\"previous\"\n          disabled={paginationState.pageIndex === 0 || isPaginationDisabled}\n          onClick={previousPage}\n          css={{ mr: '$4' }}\n        />\n        <DirectionButton\n          direction=\"next\"\n          disabled={\n            paginationState.pageIndex === getPageCount() - 1 ||\n            isPaginationDisabled\n          }\n          onClick={nextPage}\n        />\n      </Flex>\n    </StyledNav>\n  )\n}\n"],"names":["StyledNav","styled","Pagination","props","applyPagination","getState","getRowModel","getPageCount","previousPage","nextPage","setPageIndex","getTotalRows","asyncDataState","useDataTable","React","paginationState","recordsCountFrom","recordsCountTo","isPaginationDisabled","AsyncDataState","Text","GotoPageSelect","Flex","DirectionButton"],"mappings":"oVAUA,MAAMA,EAAYC,EAAO,MAAO,CAC9B,QAAS,OACT,eAAgB,gBAChB,WAAY,SACZ,mBAAoB,cACtB,CAAC,EAKYC,EAAyCC,GAAU,CAC9D,KAAM,CACJ,gBAAAC,EACA,SAAAC,EACA,YAAAC,EACA,aAAAC,EACA,aAAAC,EACA,SAAAC,EACA,aAAAC,EACA,aAAAC,EACA,eAAAC,CACF,EAAIC,EAAa,EAEjBC,EAAM,UAAU,IAAM,CACpBV,EAAgB,CAClB,EAAG,CAACA,CAAe,CAAC,EAEpB,KAAM,CAAE,WAAYW,CAAgB,EAAIV,IAElCW,EACJD,EAAgB,UAAYA,EAAgB,SAAW,EACnDE,EAAiBD,EAAmBV,IAAc,KAAK,OAAS,EAChEY,EACJN,IAAmBO,EAAe,SAClCP,IAAmBO,EAAe,SAEpC,OACEL,EAAA,cAACd,EAAA,CAAW,GAAGG,CACbW,EAAAA,EAAA,cAACM,EAAA,CAAK,KAAK,IACR,EAAA,GAAGJ,EAAiB,SAAS,OAAOC,EAAe,SAAS,QAAQN,EACvE,SAAA,EAEAG,EAAA,cAACO,EAAA,CACC,SAAUX,EACV,UAAWH,IACX,UAAWQ,EAAgB,UAC3B,SAAUG,EACZ,EAEAJ,EAAA,cAACQ,EAAA,CAAK,IAAK,CAAE,eAAgB,UAAW,CACtCR,EAAAA,EAAA,cAACS,EAAA,CACC,UAAU,WACV,SAAUR,EAAgB,YAAc,GAAKG,EAC7C,QAASV,EACT,IAAK,CAAE,GAAI,IAAK,CAClB,CAAA,EACAM,EAAA,cAACS,EAAA,CACC,UAAU,OACV,SACER,EAAgB,YAAcR,IAAiB,GAC/CW,EAEF,QAAST,CAAAA,CACX,CACF,CACF,CAEJ"}
+{"version":3,"file":"Pagination.js","sources":["../../../../src/components/data-table/pagination/Pagination.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/stitches'\n\nimport { Flex } from '../../flex'\nimport { Text } from '../../text'\nimport { AsyncDataState } from '../DataTable.types'\nimport { useDataTable } from '../DataTableContext'\nimport { DirectionButton, GotoPageSelect } from './PaginationButtons'\n\nconst StyledNav = styled('nav', {\n  display: 'flex',\n  justifyContent: 'space-between',\n  alignItems: 'center',\n  fontVariantNumeric: 'tabular-nums'\n})\n\ntype PaginationProps = React.ComponentProps<typeof StyledNav>\n\n/** Applies pagination to parent DataTableProvider and renders UI to switch pages etc */\nexport const Pagination: React.FC<PaginationProps> = (props) => {\n  const {\n    applyPagination,\n    getState,\n    getRowModel,\n    getPageCount,\n    previousPage,\n    nextPage,\n    setPageIndex,\n    getTotalRows,\n    asyncDataState\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\n  if (isEmpty) return null\n\n  const recordsCountFrom =\n    paginationState.pageIndex * paginationState.pageSize + 1\n  const recordsCountTo = recordsCountFrom + getRowModel().rows.length - 1\n  const isPaginationDisabled =\n    asyncDataState === AsyncDataState.PENDING ||\n    asyncDataState === AsyncDataState.REJECTED\n\n  return (\n    <StyledNav {...props}>\n      <Text size=\"sm\">\n        {`${recordsCountFrom.toString()} - ${recordsCountTo.toString()} of ${getTotalRows()} items`}\n      </Text>\n\n      <GotoPageSelect\n        gotoPage={setPageIndex}\n        pageCount={getPageCount()}\n        pageIndex={paginationState.pageIndex}\n        disabled={isPaginationDisabled}\n      />\n\n      <Flex css={{ justifyContent: 'flex-end' }}>\n        <DirectionButton\n          direction=\"previous\"\n          disabled={paginationState.pageIndex === 0 || isPaginationDisabled}\n          onClick={previousPage}\n          css={{ mr: '$4' }}\n        />\n        <DirectionButton\n          direction=\"next\"\n          disabled={\n            paginationState.pageIndex === getPageCount() - 1 ||\n            isPaginationDisabled\n          }\n          onClick={nextPage}\n        />\n      </Flex>\n    </StyledNav>\n  )\n}\n"],"names":["StyledNav","styled","Pagination","props","applyPagination","getState","getRowModel","getPageCount","previousPage","nextPage","setPageIndex","getTotalRows","asyncDataState","useDataTable","React","paginationState","AsyncDataState","recordsCountFrom","recordsCountTo","isPaginationDisabled","Text","GotoPageSelect","Flex","DirectionButton"],"mappings":"oVAUA,MAAMA,EAAYC,EAAO,MAAO,CAC9B,QAAS,OACT,eAAgB,gBAChB,WAAY,SACZ,mBAAoB,cACtB,CAAC,EAKYC,EAAyCC,GAAU,CAC9D,KAAM,CACJ,gBAAAC,EACA,SAAAC,EACA,YAAAC,EACA,aAAAC,EACA,aAAAC,EACA,SAAAC,EACA,aAAAC,EACA,aAAAC,EACA,eAAAC,CACF,EAAIC,EAEJC,EAAAA,EAAM,UAAU,IAAM,CACpBV,EACF,CAAA,EAAG,CAACA,CAAe,CAAC,EAEpB,KAAM,CAAE,WAAYW,CAAgB,EAAIV,EAAS,EAIjD,GAHkBO,IAAmBI,EAAe,SACtBL,MAAmB,EAEpC,OAAO,KAEpB,MAAMM,EACJF,EAAgB,UAAYA,EAAgB,SAAW,EACnDG,EAAiBD,EAAmBX,EAAc,EAAA,KAAK,OAAS,EAChEa,EACJP,IAAmBI,EAAe,SAClCJ,IAAmBI,EAAe,SAEpC,OACEF,EAAA,cAACd,EAAA,CAAW,GAAGG,CAAAA,EACbW,EAAA,cAACM,EAAA,CAAK,KAAK,IAAA,EACR,GAAGH,EAAiB,SAAgBC,OAAAA,EAAe,iBAAiBP,WACvE,EAEAG,EAAA,cAACO,EAAA,CACC,SAAUX,EACV,UAAWH,IACX,UAAWQ,EAAgB,UAC3B,SAAUI,EACZ,EAEAL,EAAA,cAACQ,EAAA,CAAK,IAAK,CAAE,eAAgB,UAAW,GACtCR,EAAA,cAACS,EAAA,CACC,UAAU,WACV,SAAUR,EAAgB,YAAc,GAAKI,EAC7C,QAASX,EACT,IAAK,CAAE,GAAI,IAAK,CAAA,CAClB,EACAM,EAAA,cAACS,EAAA,CACC,UAAU,OACV,SACER,EAAgB,YAAcR,IAAiB,GAC/CY,EAEF,QAASV,CAAAA,CACX,CACF,CACF,CAEJ"}

package/dist/components/grid/Grid.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { CSS } from '../../stitches';
 declare const GridContainer: import("@stitches/react/types/styled-component").StyledComponent<"div", {
     gap?: number | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "24" | undefined;
 }, {
@@ -217,6 +218,9 @@ declare const GridContainer: import("@stitches/react/types/styled-component").St
 declare type GridProps = React.ComponentProps<typeof GridContainer> & {
     minItemSize?: string;
     maxItemSize?: string;
+} & {
+    css?: CSS;
+    as?: any;
 };
 export declare const Grid: React.FC<GridProps>;
 export {};

package/dist/components/grid/Grid.js

@@ -1,2 +1,2 @@
-import*as s from"react";import{styled as p}from"../../stitches.js";import{createThemeVariants as o}from"../../utilities/create-theme-variants/createThemeVariants.js";const d=p("div",{display:"grid",variants:{gap:o("space",{gap:"$key"})}}),a=({css:t,gap:m=2,minItemSize:e,maxItemSize:i="1fr",...r})=>s.createElement(d,{css:{...e&&{gridTemplateColumns:`repeat(auto-fit, minmax(${e}, ${i}))`},...t},gap:m,...r});a.displayName="Grid";export{a as Grid};
+import*as s from"react";import{styled as p}from"../../stitches.js";import{createThemeVariants as o}from"../../utilities/create-theme-variants/createThemeVariants.js";const n=p("div",{display:"grid",variants:{gap:o("space",{gap:"$key"})}}),a=({css:t,gap:i=2,minItemSize:e,maxItemSize:m="1fr",...r})=>s.createElement(n,{css:{...e&&{gridTemplateColumns:`repeat(auto-fit, minmax(${e}, ${m}))`},...t},gap:i,...r});a.displayName="Grid";export{a as Grid};
 //# sourceMappingURL=Grid.js.map

package/dist/components/grid/Grid.js.map

@@ -1 +1 @@
-{"version":3,"file":"Grid.js","sources":["../../../src/components/grid/Grid.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/stitches'\nimport { createThemeVariants } from '~/utilities'\n\nconst GridContainer = styled('div', {\n  display: 'grid',\n  variants: {\n    gap: createThemeVariants('space', { gap: '$key' })\n  }\n})\n\ntype GridProps = React.ComponentProps<typeof GridContainer> & {\n  minItemSize?: string\n  maxItemSize?: string\n}\n\nexport const Grid: React.FC<GridProps> = ({\n  css,\n  gap = 2,\n  minItemSize,\n  maxItemSize = '1fr',\n  ...remainingProps\n}) => (\n  <GridContainer\n    css={{\n      ...(minItemSize && {\n        gridTemplateColumns: `repeat(auto-fit, minmax(${minItemSize}, ${maxItemSize}))`\n      }),\n      ...(css as any)\n    }}\n    gap={gap}\n    {...remainingProps}\n  />\n)\n\nGrid.displayName = 'Grid'\n"],"names":["GridContainer","styled","createThemeVariants","Grid","css","gap","minItemSize","maxItemSize","remainingProps","React"],"mappings":"sKAKA,MAAMA,EAAgBC,EAAO,MAAO,CAClC,QAAS,OACT,SAAU,CACR,IAAKC,EAAoB,QAAS,CAAE,IAAK,MAAO,CAAC,CACnD,CACF,CAAC,EAOYC,EAA4B,CAAC,CACxC,IAAAC,EACA,IAAAC,EAAM,EACN,YAAAC,EACA,YAAAC,EAAc,SACXC,CACL,IACEC,EAAA,cAACT,EAAA,CACC,IAAK,CACH,GAAIM,GAAe,CACjB,oBAAqB,2BAA2BA,MAAgBC,KAClE,EACA,GAAIH,CACN,EACA,IAAKC,EACJ,GAAGG,CACN,CAAA,EAGFL,EAAK,YAAc"}
+{"version":3,"file":"Grid.js","sources":["../../../src/components/grid/Grid.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { CSS, styled } from '~/stitches'\nimport { createThemeVariants } from '~/utilities'\n\nconst GridContainer = styled('div', {\n  display: 'grid',\n  variants: {\n    gap: createThemeVariants('space', { gap: '$key' })\n  }\n})\n\ntype GridProps = React.ComponentProps<typeof GridContainer> & {\n  minItemSize?: string\n  maxItemSize?: string\n} & {\n  css?: CSS\n  as?: any\n} // (!) `css` and `as` are both props that come from `stitches`. It would be better to figure out and export the appropriate type for them in stitches!\n\nexport const Grid: React.FC<GridProps> = ({\n  css,\n  gap = 2,\n  minItemSize,\n  maxItemSize = '1fr',\n  ...remainingProps\n}) => (\n  <GridContainer\n    css={{\n      ...(minItemSize && {\n        gridTemplateColumns: `repeat(auto-fit, minmax(${minItemSize}, ${maxItemSize}))`\n      }),\n      ...(css as any)\n    }}\n    gap={gap}\n    {...remainingProps}\n  />\n)\n\nGrid.displayName = 'Grid'\n"],"names":["GridContainer","styled","createThemeVariants","Grid","css","gap","minItemSize","maxItemSize","remainingProps","React"],"mappings":"sKAKA,MAAMA,EAAgBC,EAAO,MAAO,CAClC,QAAS,OACT,SAAU,CACR,IAAKC,EAAoB,QAAS,CAAE,IAAK,MAAO,CAAC,CACnD,CACF,CAAC,EAUYC,EAA4B,CAAC,CACxC,IAAAC,EACA,IAAAC,EAAM,EACN,YAAAC,EACA,YAAAC,EAAc,SACXC,CACL,IACEC,EAAA,cAACT,EAAA,CACC,IAAK,CACH,GAAIM,GAAe,CACjB,oBAAqB,2BAA2BA,MAAgBC,KAClE,EACA,GAAIH,CACN,EACA,IAAKC,EACJ,GAAGG,CACN,CAAA,EAGFL,EAAK,YAAc"}