@atom-learning/components 8.0.3 → 8.1.1

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

@@ -1,13 +1,13 @@
+import { useDataTable } from "../DataTable.context.js";
 import { Table } from "../../table/Table.js";
-import { useDataTable } from "../DataTableContext.js";
 import { DragAndDropTableRow } from "./DragAndDropTableRow.js";
 import "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/data-table/drag-and-drop/DragAndDropTableBody.tsx
-var DragAndDropTableBody = ({ striped = false, idColumn = "id", ...props }) => {
+var DragAndDropTableBody = ({ striped = false, idColumn = "id", ...rest }) => {
 	const { getRowModel } = useDataTable();
 	return /* @__PURE__ */ jsx(Table.Body, {
-		...props,
+		...rest,
 		striped,
 		children: getRowModel().rows.map((row) => {
 			return /* @__PURE__ */ jsx(DragAndDropTableRow, {

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,cAAc;AACtC,QACE,oBAAC,MAAM,MAAP;EAAY,GAAI;EAAgB;YAC7B,aAAa,CAAC,KAAK,KAAK,QAAQ;AAC/B,UACE,oBAAC,qBAAD;IAA0B;IAA4B;IAAY,EAA9B,IAAI,GAA0B;IAEpE;EACS,CAAA"}
+{"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 '../DataTable.context'\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  ...rest\n}: DataTableBodyProps) => {\n  const { getRowModel } = useDataTable()\n  return (\n    <Table.Body {...rest} 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,WACqB;CACxB,MAAM,EAAE,gBAAgB,aAAa;CACrC,OACE,oBAAC,MAAM,MAAP;EAAY,GAAI;EAAe;YAC5B,YAAY,CAAC,CAAC,KAAK,KAAK,QAAQ;GAC/B,OACE,oBAAC,qBAAD;IAA0B;IAA4B;GAAW,GAA7B,IAAI,EAAyB;EAErE,CAAC;CACS,CAAA;AAEhB"}

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 string | number\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,oBAAC,cAAD;EAAe,IAAI;EAAO,SAAA;YACxB,oBAAC,MAAM,KAAP,EAAA,UACG,IAAI,iBAAiB,CAAC,KAAK,MAAM,MAAM;AACtC,OAAI,MAAM,EACR,QACE,qBAAC,MAAM,MAAP,EAAA,UAAA,CACE,oBAAC,gBAAD;IAAiB,UAAU;IAAO,WAAU;IAAiB,CAAA,EAC5D,WAAW,KAAK,OAAO,UAAU,MAAM,KAAK,YAAY,CAAC,CAC/C,EAAA,EAHI,KAAK,GAGT;AAGjB,UAAO,oBAAC,mBAAD,EAAuC,MAAQ,EAAvB,KAAK,GAAkB;IACtD,EACQ,CAAA;EACE,CAAA"}
+{"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 string | number\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,oBAAC,cAAD;EAAe,IAAI;EAAO,SAAA;YACxB,oBAAC,MAAM,KAAP,EAAA,UACG,IAAI,gBAAgB,CAAC,CAAC,KAAK,MAAM,MAAM;GACtC,IAAI,MAAM,GACR,OACE,qBAAC,MAAM,MAAP,EAAA,UAAA,CACE,oBAAC,gBAAD;IAAiB,UAAU;IAAO,WAAU;GAAgB,CAAA,GAC3D,WAAW,KAAK,OAAO,UAAU,MAAM,KAAK,WAAW,CAAC,CAC/C,EAAA,GAHK,KAAK,EAGV;GAGhB,OAAO,oBAAC,mBAAD,EAAuC,KAAO,GAAtB,KAAK,EAAiB;EACvD,CAAC,EACQ,CAAA;CACE,CAAA;AAEnB"}

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

@@ -1,3 +1,3 @@
 import type { PaginationState, SortingState } from '@tanstack/react-table';
-import type { TAsyncDataOptions, TAsyncDataResult, TGetAsyncData } from './DataTable.types';
-export declare const getNewAsyncData: (getAsyncData: TGetAsyncData, asyncDataOptions: Partial<TAsyncDataOptions>, paginationState: PaginationState, sorting: SortingState, globalFilter: string) => Promise<TAsyncDataResult | undefined>;
+import type { AsyncDataOptions, AsyncDataResult, GetAsyncData } from './DataTable.types';
+export declare const getNewAsyncData: (getAsyncData: GetAsyncData, asyncDataOptions: Partial<AsyncDataOptions>, paginationState: PaginationState, sorting: SortingState, globalFilter: string) => Promise<AsyncDataResult | undefined>;

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;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"}
+{"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  AsyncDataOptions,\n  AsyncDataResult,\n  GetAsyncData\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: GetAsyncData,\n  asyncDataOptions: Partial<AsyncDataOptions>,\n  paginationState: PaginationState,\n  sorting: SortingState,\n  globalFilter: string\n): Promise<AsyncDataResult | 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,EAAE,CAAC,OAAO,SAAS;AAGtC;AAEA,IAAa,kBAAkB,OAC7B,cACA,kBACA,iBACA,SACA,iBACyC;CACzC,MAAM,EAAE,WAAW,aAAa;CAShC,MAAM,UAAU,MAAM,aAAa;EAPjC,WAAW,kBAAkB,aAAa;EAC1C,UAAU,kBAAkB,YAAY;EACxC,QAAQ,kBAAkB,UAAU,QAAQ,EAAE,EAAE;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"}

package/dist/components/data-table/pagination/Pagination.d.ts

@@ -1,14 +1,13 @@
 import * as React from 'react';
-import { TcolorScheme } from '../../../experiments/color-scheme/ColorScheme';
+import type { TcolorScheme } from '../../../experiments/color-scheme/ColorScheme';
 declare const StyledNav: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, never> & {
     as?: React.ElementType;
 }>;
 type PaginationProps = React.ComponentProps<typeof StyledNav> & {
     colorScheme?: TcolorScheme;
 };
-/** Applies pagination to parent DataTableProvider and renders UI to switch pages etc */
-export declare const Pagination: {
-    ({ colorScheme, ...props }: PaginationProps): React.JSX.Element | null;
-    displayName: string;
-};
+export declare function Pagination({ colorScheme, ...rest }: PaginationProps): React.JSX.Element | null;
+export declare namespace Pagination {
+    var displayName: string;
+}
 export {};

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

@@ -1,7 +1,7 @@
 import { styled } from "../../../styled.js";
 import { Text } from "../../text/Text.js";
 import { AsyncDataState } from "../DataTable.types.js";
-import { useDataTable } from "../DataTableContext.js";
+import { useDataTable } from "../DataTable.context.js";
 import { Pagination as Pagination$1 } from "../../pagination/Pagination.js";
 import * as React$1 from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -19,7 +19,7 @@ var StyledNav = styled("nav", { base: [
 	"md:flex-row"
 ] });
 /** Applies pagination to parent DataTableProvider and renders UI to switch pages etc */
-var Pagination = ({ colorScheme, ...props }) => {
+var Pagination = ({ colorScheme, ...rest }) => {
 	const { applyPagination, getState, getExpandedRowModel, getRowModel, setPageIndex, getTotalRows, getPageCount, asyncDataState, hasAsyncData } = useDataTable();
 	React$1.useEffect(() => {
 		applyPagination();
@@ -37,7 +37,7 @@ var Pagination = ({ colorScheme, ...props }) => {
 	};
 	const pageCount = hasAsyncData ? getPageCount() : Math.max(1, Math.ceil(totalVisibleRows / paginationState.pageSize));
 	return /* @__PURE__ */ jsxs(StyledNav, {
-		...props,
+		...rest,
 		children: [/* @__PURE__ */ jsx(Text, {
 			size: "sm",
 			children: `${start} - ${end} of ${hasAsyncData ? getTotalRows() : totalVisibleRows} items`

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;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,qBAAC,WAAD;EAAW,GAAI;YAAf,CACE,oBAAC,MAAD;GAAM,MAAK;aAAM,GAAG,MAAM,KAAK,IAAI,MACjC,eAAe,cAAc,GAAG,iBACjC;GAAe,CAAA,EAChB,oBAAC,cAAD;GACe;GACb,cAAc,gBAAgB,YAAY;GAC1C,YAAY;GACZ,sBAAsB;GACtB,CAAA,CACQ;;;AAIhB,WAAW,cAAc"}
+{"version":3,"file":"Pagination.js","names":[],"sources":["../../../../src/components/data-table/pagination/Pagination.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport type { TcolorScheme } from '../../../experiments/color-scheme/ColorScheme'\nimport { styled } from '../../../styled'\nimport { Pagination as PaginationComponent } from '../../pagination/Pagination'\nimport { Text } from '../../text/Text'\nimport { useDataTable } from '../DataTable.context'\nimport { AsyncDataState } from '../DataTable.types'\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, ...rest }: 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 {...rest}>\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":";;;;;;;;AASA,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,WAA4B;CACvE,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,CAAC,CAAC,KAAK,SAAS,gBAAgB,WAAW;CAEnE,IAAI,WAAW,CAAC,gBAAgB,OAAO;CACvC,MAAM,mBAAmB,oBAAoB,CAAC,CAAC,KAAK;CAEpD,MAAM,QACJ,qBAAqB,IACjB,IACA,gBAAgB,YAAY,gBAAgB,WAAW;CAE7D,MAAM,gBAAgB,YAAY,CAAC,CAAC,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,qBAAC,WAAD;EAAW,GAAI;YAAf,CACE,oBAAC,MAAD;GAAM,MAAK;aAAM,GAAG,MAAM,KAAK,IAAI,MACjC,eAAe,aAAa,IAAI,iBACjC;EAAc,CAAA,GACf,oBAAC,cAAD;GACe;GACb,cAAc,gBAAgB,YAAY;GAC1C,YAAY;GACZ,sBAAsB;EACvB,CAAA,CACQ;;AAEf;AAEA,WAAW,cAAc"}

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

@@ -1,5 +1,5 @@
 import type { PaginationState } from '@tanstack/react-table';
-import React from 'react';
+import * as React from 'react';
 export declare const usePagination: (initialPaginationState: PaginationState | undefined) => {
     isPaginated: boolean;
     paginationState: PaginationState | undefined;

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

@@ -1,12 +1,12 @@
-import React from "react";
+import * as React$1 from "react";
 //#region src/components/data-table/usePagination.ts
 var defaultPaginationState = {
 	pageIndex: 0,
 	pageSize: 10
 };
 var usePagination = (initialPaginationState) => {
-	const [isPaginated, setIsPaginated] = React.useState(!!initialPaginationState);
-	const [paginationState, setPaginationState] = React.useState({
+	const [isPaginated, setIsPaginated] = React$1.useState(!!initialPaginationState);
+	const [paginationState, setPaginationState] = React$1.useState({
 		...defaultPaginationState,
 		...initialPaginationState || {}
 	});
@@ -14,7 +14,7 @@ var usePagination = (initialPaginationState) => {
 		isPaginated,
 		paginationState,
 		setPaginationState,
-		applyPagination: React.useCallback(() => {
+		applyPagination: React$1.useCallback(() => {
 			setIsPaginated(true);
 		}, [])
 	};

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;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"}
+{"version":3,"file":"usePagination.js","names":[],"sources":["../../../src/components/data-table/usePagination.ts"],"sourcesContent":["import type { PaginationState } from '@tanstack/react-table'\nimport * as 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,QAAM,SAC1C,CAAC,CAAC,sBACJ;CAEA,MAAM,CAAC,iBAAiB,sBAAsB,QAAM,SAElD;EACA,GAAG;EACH,GAAI,0BAA0B,CAAC;CACjC,CAAC;CAMD,OAAO;EACL;EACA;EACA;EACA,iBARsB,QAAM,kBAAkB;GAC9C,eAAe,IAAI;EACrB,GAAG,CAAC,CAMF;CACF;AACF"}

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

@@ -1,7 +1,7 @@
 import type { SortingState } from '@tanstack/react-table';
-import React from 'react';
-import { TDefaultSort } from './DataTable.types';
-export declare const useSortByColumn: (defaultSort: TDefaultSort | undefined) => {
+import * as React from 'react';
+import type { DefaultSort } from './DataTable.types';
+export declare const useSortByColumn: (defaultSort: DefaultSort | undefined) => {
     isSortable: boolean;
     setIsSortable: React.Dispatch<React.SetStateAction<boolean>>;
     sorting: SortingState;

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

@@ -1,8 +1,8 @@
-import React from "react";
+import * as React$1 from "react";
 //#region src/components/data-table/useSorting.ts
 var useSortByColumn = (defaultSort) => {
-	const [isSortable, setIsSortable] = React.useState(false);
-	const [sorting, setSorting] = React.useState(defaultSort ? [{
+	const [isSortable, setIsSortable] = React$1.useState(false);
+	const [sorting, setSorting] = React$1.useState(defaultSort ? [{
 		id: defaultSort.column,
 		desc: defaultSort.direction === "desc"
 	}] : []);

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,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"}
+{"version":3,"file":"useSorting.js","names":[],"sources":["../../../src/components/data-table/useSorting.ts"],"sourcesContent":["import type { SortingState } from '@tanstack/react-table'\nimport * as React from 'react'\n\nimport type { DefaultSort } from './DataTable.types'\n\nexport const useSortByColumn = (defaultSort: DefaultSort | 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,gBAAyC;CACvE,MAAM,CAAC,YAAY,iBAAiB,QAAM,SAAkB,KAAK;CAEjE,MAAM,CAAC,SAAS,cAAc,QAAM,SAClC,cACI,CACE;EACE,IAAI,YAAY;EAChB,MAAM,YAAY,cAAc;CAClC,CACF,IACA,CAAC,CACP;CAEA,OAAO;EAAE;EAAY;EAAe;EAAS;CAAW;AAC1D"}

package/dist/components/date-field/DateField.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { DateInputProps } from '../../components/date-input/DateInput';
-import { FieldElementWrapperProps } from '../../components/field-wrapper/FieldWrapper';
+import { type DateInputProps } from '../date-input/DateInput';
+import { type FieldElementWrapperProps } from '../field-wrapper/FieldWrapper';
 type DateFieldProps = DateInputProps & FieldElementWrapperProps;
-export declare const DateField: {
-    ({ className, hideLabel, label, name, validation, prompt, description, appearance, theme, ...remainingProps }: DateFieldProps): React.JSX.Element;
-    displayName: string;
-};
+export declare function DateField({ className, hideLabel, label, name, validation, prompt, description, appearance, theme, ...rest }: DateFieldProps): React.JSX.Element;
+export declare namespace DateField {
+    var displayName: string;
+}
 export {};

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

@@ -6,7 +6,7 @@ import "react";
 import { jsx } from "react/jsx-runtime";
 import { useFormContext } from "react-hook-form";
 //#region src/components/date-field/DateField.tsx
-var DateField = ({ className, hideLabel, label, name, validation, prompt, description, appearance, theme, ...remainingProps }) => {
+var DateField = ({ className, hideLabel, label, name, validation, prompt, description, appearance, theme, ...rest }) => {
 	const { register, trigger } = useFormContext();
 	const context = useFormCustomContext();
 	const { error } = useFieldError(name);
@@ -30,7 +30,7 @@ var DateField = ({ className, hideLabel, label, name, validation, prompt, descri
 			appearance: formAppearance,
 			theme: formTheme,
 			...error && { state: "error" },
-			...remainingProps,
+			...rest,
 			revalidate: trigger
 		})
 	});

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,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,oBAAC,cAAD;EACa;EACE;EACN;EACP,SAAS;EACE;EACJ;EACC;EACR,UAAU,QAAQ,YAAY,SAAS;EACvC,YAAY;YAEZ,oBAAC,WAAD;GACE,IAAI;GACE;GACD;GACL,YAAY;GACZ,OAAO;GACP,GAAK,SAAS,EAAE,OAAO,SAAS;GAChC,GAAI;GACJ,YAAY;GACZ,CAAA;EACW,CAAA;;AAInB,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, type DateInputProps } from '../date-input/DateInput'\nimport {\n  type FieldElementWrapperProps,\n  FieldWrapper\n} from '../field-wrapper/FieldWrapper'\nimport { useFieldError } from '../form/useFieldError'\nimport { useFormCustomContext } from '../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  ...rest\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        {...rest}\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,WACiB;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,oBAAC,cAAD;EACa;EACE;EACN;EACP,SAAS;EACE;EACJ;EACC;EACR,UAAU,QAAQ,YAAY,QAAQ;EACtC,YAAY;YAEZ,oBAAC,WAAD;GACE,IAAI;GACE;GACD;GACL,YAAY;GACZ,OAAO;GACP,GAAK,SAAS,EAAE,OAAO,QAAQ;GAC/B,GAAI;GACJ,YAAY;EACb,CAAA;CACW,CAAA;AAElB;AAEA,UAAU,cAAc"}

package/dist/components/date-input/DateInput.d.ts

@@ -1,6 +1,6 @@
 import type { Props as DayzedInterface } from 'dayzed';
 import * as React from 'react';
-import { CalendarTranslationProps } from '../calendar/Calendar';
+import { type CalendarTranslationProps } from '../calendar/Calendar';
 export type DateInputProps = Omit<DayzedInterface, 'onDateSelected'> & CalendarTranslationProps & {
     initialDate?: Date;
     dateFormat?: string;
@@ -15,9 +15,9 @@ export declare const DateInput: React.ForwardRefExoticComponent<Omit<DayzedInter
     initialDate?: Date;
     dateFormat?: string;
     disabled?: boolean;
-    size?: "sm" | "md" | "lg";
-    appearance?: "standard" | "modern";
-    theme?: "white" | "grey";
+    size?: 'sm' | 'md' | 'lg';
+    appearance?: 'standard' | 'modern';
+    theme?: 'white' | 'grey';
     revalidate?: () => Promise<boolean>;
     onChange?: (value?: Date) => void;
 } & React.RefAttributes<HTMLInputElement>>;

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

@@ -1,8 +1,8 @@
 import { Icon } from "../icon/Icon.js";
 import { ActionIcon } from "../action-icon/ActionIcon.js";
 import { useCallbackRefState } from "../../utilities/hooks/useCallbackRef.js";
-import { Input } from "../input/Input.js";
 import { getFieldIconSize } from "../../utilities/style/get-icon-size.js";
+import { Input } from "../input/Input.js";
 import { Popover } from "../popover/Popover.js";
 import { DEFAULT_LABELS } from "../calendar/constants.js";
 import { Calendar } from "../calendar/Calendar.js";
@@ -15,7 +15,7 @@ import customParseFormat from "dayjs/plugin/customParseFormat.js";
 //#region src/components/date-input/DateInput.tsx
 dayjs.extend(customParseFormat);
 var formatDateToString = (date, dateFormat = DEFAULT_DATE_FORMAT) => date ? dayjs(date).format(dateFormat) : "";
-var DateInput = React$1.forwardRef(({ initialDate, dateFormat = DEFAULT_DATE_FORMAT, firstDayOfWeek = 1, disabled, monthNames, weekdayNames, size = "md", appearance, theme, labels, revalidate, onChange, minDate, maxDate, ...remainingProps }, ref) => {
+var DateInput = React$1.forwardRef(({ initialDate, dateFormat = DEFAULT_DATE_FORMAT, firstDayOfWeek = 1, disabled, monthNames, weekdayNames, size = "md", appearance, theme, labels, revalidate, onChange, minDate, maxDate, ...rest }, ref) => {
 	const [date, setDate] = React$1.useState(initialDate ? dayjs(initialDate).toDate() : void 0);
 	const [inputElRef, setInputElRef] = useCallbackRefState();
 	React$1.useImperativeHandle(ref, () => inputElRef);
@@ -53,7 +53,7 @@ var DateInput = React$1.forwardRef(({ initialDate, dateFormat = DEFAULT_DATE_FOR
 			size,
 			appearance,
 			theme,
-			...remainingProps,
+			...rest,
 			onChange: handleInputChange,
 			ref: setInputElRef,
 			defaultValue: dateString

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 as React.ComponentProps<typeof Input>)}\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":";;;;;;;;;;;;;;;AAiBA,MAAM,OAAO,kBAAkB;AAc/B,IAAM,sBAAsB,MAAa,aAAa,wBACpD,OAAO,MAAM,KAAK,CAAC,OAAO,WAAW,GAAG;AAE1C,IAAa,YAAY,QAAM,YAE3B,EACE,aACA,aAAa,qBACb,iBAAiB,GACjB,UACA,YACA,cACA,OAAO,MACP,YACA,OACA,QACA,YACA,UACA,SACA,SACA,GAAG,kBAEL,QACG;CACH,MAAM,CAAC,MAAM,WAAW,QAAM,SAC5B,cAAc,MAAM,YAAY,CAAC,QAAQ,GAAG,KAAA,EAC7C;CAED,MAAM,CAAC,YAAY,iBAAiB,qBAAqB;AACzD,SAAM,oBAAoB,WAAW,WAA+B;CAEpE,MAAM,aAAa,mBAAmB,MAAM,WAAW;CAEvD,MAAM,oBAAoB,QAAM,aAC7B,UAAU;EACT,MAAM,gBAAgB,MAAM,OAAO;EACnC,MAAM,kBAAkB,MAAM,eAAe,WAAW;EACxD,MAAM,UAAU,gBAAgB,SAAS,GACrC,gBAAgB,QAAQ,GACxB,KAAA;AACJ,UAAQ,QAAQ;AAChB,aAAW,QAAQ;IAErB,CAAC,YAAY,SAAS,CACvB;CAED,MAAM,uBAAuB,QAAM,aAChC,YAAY;AACX,UAAQ,QAAQ;EAEhB,MAAM,mCAAmC;AACvC,OAAI,CAAC,WAAY;AAQjB,IAJ+B,OAAO,yBACpC,OAAO,iBAAiB,WACxB,QACD,EAAE,MACqB,KACtB,YACA,mBAAmB,SAAS,WAAW,CACxC;GACD,MAAM,QAAQ,IAAI,MAAM,SAAS,EAAE,SAAS,MAAM,CAAC;AACnD,cAAW,cAAc,MAAM;;AAEjC,8BAA4B;IAE9B,CAAC,YAAY,WAAW,CACzB;CAED,MAAM,gBAAgB;EACpB,GAAG;EACH,GAAG;EACJ;CAED,MAAM,CAAC,cAAc,mBAAmB,QAAM,SAAS,MAAM;CAE7D,MAAM,eAAe,QAAM,OAA0B,KAAK;CAC1D,MAAM,kBAAkB,QAAM,OAA0B,KAAK;CAE7D,MAAM,WAAW,QAAM,cAAc,iBAAiB,KAAK,EAAE,CAAC,KAAK,CAAC;AAEpE,QACE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACE,oBAAC,OAAD;GACE,MAAK;GACK;GACJ;GACM;GACL;GACP,GAAK;GACL,UAAU;GACV,KAAK;GACL,cAAc;GACd,CAAA,EACF,qBAAC,SAAD;GAAS,OAAA;GAAM,MAAM;GAAc,cAAc;aAAjD,CACE,oBAAC,QAAQ,SAAT;IAAiB,SAAA;cACf,oBAAC,YAAD;KACY;KACV,OAAO,cAAc;KACrB,MAAM;KACN,OAAM;KACN,YAAY;KACZ,WAAU;eAEV,oBAAC,MAAD,EAAM,IAAI,eAAiB,CAAA;KAChB,CAAA;IACG,CAAA,EAClB,oBAAC,QAAQ,QAAT,EAAA,UACE,oBAAC,QAAQ,SAAT;IACE,MAAK;IACL,OAAM;IACN,iBAAiB;IACjB,kBAAkB,MAAM;AACtB,OAAE,gBAAgB;AAClB,SAAI,KACF,iBAAgB,SAAS,OAAO;SAEhC,cAAa,SAAS,OAAO;;IAGjC,WAAU;cAEV,oBAAC,UAAD;KACE,MAAM,wBAAQ,IAAI,MAAM;KACxB,UAAU;KACV,gBAAgB,OAAO,SAAS;AAC9B,sBAAgB,MAAM;AACtB,YAAM,qBAAqB,KAAK,KAAK;AACrC,UAAI,WAAY,aAAY;;KAE9B,SAAS,OAAO,SAAS;AACvB,YAAM,qBAAqB,KAAK;AAChC,UAAI,WAAY,aAAY;;KAErB;KACA;KACK;KACG;KACD;KACJ;KACE;KACd,QAAQ;KACR,CAAA;IACc,CAAA,EACH,CAAA,CACT;KACN;;EAGX;AAED,UAAU,cAAc"}
+{"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'\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Calendar, type 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      ...rest\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          {...(rest as React.ComponentProps<typeof Input>)}\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":";;;;;;;;;;;;;;;AAgBA,MAAM,OAAO,iBAAiB;AAc9B,IAAM,sBAAsB,MAAa,aAAa,wBACpD,OAAO,MAAM,IAAI,CAAC,CAAC,OAAO,UAAU,IAAI;AAE1C,IAAa,YAAY,QAAM,YAE3B,EACE,aACA,aAAa,qBACb,iBAAiB,GACjB,UACA,YACA,cACA,OAAO,MACP,YACA,OACA,QACA,YACA,UACA,SACA,SACA,GAAG,QAEL,QACG;CACH,MAAM,CAAC,MAAM,WAAW,QAAM,SAC5B,cAAc,MAAM,WAAW,CAAC,CAAC,OAAO,IAAI,KAAA,CAC9C;CAEA,MAAM,CAAC,YAAY,iBAAiB,oBAAoB;CACxD,QAAM,oBAAoB,WAAW,UAA8B;CAEnE,MAAM,aAAa,mBAAmB,MAAM,UAAU;CAEtD,MAAM,oBAAoB,QAAM,aAC7B,UAAU;EACT,MAAM,gBAAgB,MAAM,OAAO;EACnC,MAAM,kBAAkB,MAAM,eAAe,UAAU;EACvD,MAAM,UAAU,gBAAgB,QAAQ,IACpC,gBAAgB,OAAO,IACvB,KAAA;EACJ,QAAQ,OAAO;EACf,WAAW,OAAO;CACpB,GACA,CAAC,YAAY,QAAQ,CACvB;CAEA,MAAM,uBAAuB,QAAM,aAChC,YAAY;EACX,QAAQ,OAAO;EAEf,MAAM,mCAAmC;GACvC,IAAI,CAAC,YAAY;GAQjB,CAJ+B,OAAO,yBACpC,OAAO,iBAAiB,WACxB,OACF,CAAC,EAAE,IAAA,EACqB,KACtB,YACA,mBAAmB,SAAS,UAAU,CACxC;GACA,MAAM,QAAQ,IAAI,MAAM,SAAS,EAAE,SAAS,KAAK,CAAC;GAClD,WAAW,cAAc,KAAK;EAChC;EACA,2BAA2B;CAC7B,GACA,CAAC,YAAY,UAAU,CACzB;CAEA,MAAM,gBAAgB;EACpB,GAAG;EACH,GAAG;CACL;CAEA,MAAM,CAAC,cAAc,mBAAmB,QAAM,SAAS,KAAK;CAE5D,MAAM,eAAe,QAAM,OAA0B,IAAI;CACzD,MAAM,kBAAkB,QAAM,OAA0B,IAAI;CAE5D,MAAM,WAAW,QAAM,cAAc,iBAAiB,IAAI,GAAG,CAAC,IAAI,CAAC;CAEnE,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACE,oBAAC,OAAD;GACE,MAAK;GACK;GACJ;GACM;GACL;GACP,GAAK;GACL,UAAU;GACV,KAAK;GACL,cAAc;EACf,CAAA,GACD,qBAAC,SAAD;GAAS,OAAA;GAAM,MAAM;GAAc,cAAc;aAAjD,CACE,oBAAC,QAAQ,SAAT;IAAiB,SAAA;cACf,oBAAC,YAAD;KACY;KACV,OAAO,cAAc;KACrB,MAAM;KACN,OAAM;KACN,YAAY;KACZ,WAAU;eAEV,oBAAC,MAAD,EAAM,IAAI,cAAgB,CAAA;IAChB,CAAA;GACG,CAAA,GACjB,oBAAC,QAAQ,QAAT,EAAA,UACE,oBAAC,QAAQ,SAAT;IACE,MAAK;IACL,OAAM;IACN,iBAAiB;IACjB,kBAAkB,MAAM;KACtB,EAAE,eAAe;KACjB,IAAI,MACF,gBAAgB,SAAS,MAAM;UAE/B,aAAa,SAAS,MAAM;IAEhC;IACA,WAAU;cAEV,oBAAC,UAAD;KACE,MAAM,wBAAQ,IAAI,KAAK;KACvB,UAAU;KACV,gBAAgB,OAAO,SAAS;MAC9B,gBAAgB,KAAK;MACrB,MAAM,qBAAqB,KAAK,IAAI;MACpC,IAAI,YAAY,WAAW;KAC7B;KACA,SAAS,OAAO,SAAS;MACvB,MAAM,qBAAqB,IAAI;MAC/B,IAAI,YAAY,WAAW;KAC7B;KACS;KACA;KACK;KACG;KACD;KACJ;KACE;KACd,QAAQ;IACT,CAAA;GACc,CAAA,EACH,CAAA,CACT;IACN;;AAET,CACF;AAEA,UAAU,cAAc"}

package/dist/components/dialog/Dialog.d.ts

@@ -6,9 +6,9 @@ export declare const Dialog: import("react").FC<import("@radix-ui/react-dialog")
         as?: import("react").ElementType;
     }>;
     Close: import("react").ForwardRefExoticComponent<import("@radix-ui/react-dialog").DialogCloseProps & import("react").RefAttributes<HTMLButtonElement>>;
-    Content: ({ size, children, closeDialogText, showCloseButton, ...remainingProps }: Omit<import("@radix-ui/react-dialog").DialogContentProps & import("react").RefAttributes<HTMLDivElement>, "size" | "layout"> & {
-        size?: ("sm" | "md" | "lg" | "xs" | "xl" | "fullscreen" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "lg" | "xs" | "xl" | "fullscreen">>) | undefined;
-        layout?: ("panel" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "panel">>) | undefined;
+    Content: ({ size, children, closeDialogText, showCloseButton, ...rest }: Omit<import("@radix-ui/react-dialog").DialogContentProps & import("react").RefAttributes<HTMLDivElement>, "layout" | "size"> & {
+        size?: ("fullscreen" | "lg" | "md" | "sm" | "xl" | "xs" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "fullscreen" | "lg" | "md" | "sm" | "xl" | "xs">>) | undefined;
+        layout?: ("panel" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "panel">>) | undefined;
     } & {
         as?: import("react").ElementType;
     } & {

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;CACV,CAAC;AAEF,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;AACX,CAAC;AAED,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;CACD,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;AACF,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,WAAW,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,UAAU,EAC/B,CAAC"}

package/dist/components/dialog/DialogContent.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
-declare const StyledDialogContent: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-dialog").DialogContentProps & React.RefAttributes<HTMLDivElement>, "size" | "layout"> & {
-    size?: ("sm" | "md" | "lg" | "xs" | "xl" | "fullscreen" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "lg" | "xs" | "xl" | "fullscreen">>) | undefined;
-    layout?: ("panel" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "panel">>) | undefined;
+declare const StyledDialogContent: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-dialog").DialogContentProps & React.RefAttributes<HTMLDivElement>, "layout" | "size"> & {
+    size?: ("fullscreen" | "lg" | "md" | "sm" | "xl" | "xs" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "fullscreen" | "lg" | "md" | "sm" | "xl" | "xs">>) | undefined;
+    layout?: ("panel" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "panel">>) | undefined;
 } & {
     as?: React.ElementType;
 }>;
@@ -9,5 +9,5 @@ type DialogContentProps = React.ComponentProps<typeof StyledDialogContent> & {
     closeDialogText?: string;
     showCloseButton?: boolean;
 };
-export declare const DialogContent: ({ size, children, closeDialogText, showCloseButton, ...remainingProps }: DialogContentProps) => React.JSX.Element;
+export declare const DialogContent: ({ size, children, closeDialogText, showCloseButton, ...rest }: DialogContentProps) => React.JSX.Element;
 export {};

package/dist/components/dialog/DialogContent.js

@@ -94,15 +94,15 @@ var StyledDialogContent = styled(Content, {
 		] }
 	}
 }, { enabledResponsiveVariants: true });
-var DialogContent = ({ size = "sm", children, closeDialogText = "Close dialog", showCloseButton = true, ...remainingProps }) => /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsxs(StyledDialogOverlay, {
+var DialogContent = ({ size = "sm", children, closeDialogText = "Close dialog", showCloseButton = true, ...rest }) => /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsxs(StyledDialogOverlay, {
 	id: modalOverlayId,
-	children: [React$1.Children.map(children, (child) => child?.type === DialogBackground && child), /* @__PURE__ */ jsxs(StyledDialogContent, {
+	children: [React$1.Children.map(children, (child) => React$1.isValidElement(child) && child.type === DialogBackground ? child : null), /* @__PURE__ */ jsxs(StyledDialogContent, {
 		size,
 		"aria-label": "Dialog",
 		onPointerDownOutside: (event) => {
 			if (event.target?.id !== modalOverlayId) event.preventDefault();
 		},
-		...remainingProps,
+		...rest,
 		children: [showCloseButton && /* @__PURE__ */ jsx(ActionIcon, {
 			as: Close$1,
 			label: closeDialogText,
@@ -111,7 +111,7 @@ var DialogContent = ({ size = "sm", children, closeDialogText = "Close dialog",
 			theme: "neutral",
 			className: "absolute top-4 right-4 size-12",
 			children: /* @__PURE__ */ jsx(Icon, { is: Close })
-		}), React$1.Children.map(children, (child) => child?.type !== DialogBackground && child)]
+		}), React$1.Children.map(children, (child) => React$1.isValidElement(child) && child.type === DialogBackground ? null : child)]
 	})]
 }) });
 //#endregion

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<unknown>) =>\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<unknown>) =>\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,oBAAC,QAAD,EAAA,UACE,qBAAC,qBAAD;CAAqB,IAAI;WAAzB,CACG,QAAM,SAAS,IACd,WACC,UACC,OAAO,SAAS,oBAAoB,MACvC,EACD,qBAAC,qBAAD;EACQ;EACN,cAAW;EACX,uBAAuB,UAAU;AAE/B,OADgB,MAAM,QACT,OAAO,eAClB,OAAM,gBAAgB;;EAG1B,GAAI;YATN,CAWG,mBACC,oBAAC,YAAD;GACE,IAAI;GACJ,OAAO;GACP,YAAY;GACZ,MAAK;GACL,OAAM;GACN,WAAU;aAEV,oBAAC,MAAD,EAAM,IAAI,OAAa,CAAA;GACZ,CAAA,EAEd,QAAM,SAAS,IACd,WACC,UACC,OAAO,SAAS,oBAAoB,MACvC,CACmB;IACF;IACf,CAAA"}
+{"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'\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  ...rest\n}: DialogContentProps) => (\n  <Portal>\n    <StyledDialogOverlay id={modalOverlayId}>\n      {React.Children.map(children, (child) =>\n        React.isValidElement(child) && child.type === DialogBackground\n          ? child\n          : null\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        {...rest}\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(children, (child) =>\n          React.isValidElement(child) && child.type === DialogBackground\n            ? null\n            : child\n        )}\n      </StyledDialogContent>\n    </StyledDialogOverlay>\n  </Portal>\n)\n"],"mappings":";;;;;;;;;;AAUA,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,WAEH,oBAAC,QAAD,EAAA,UACE,qBAAC,qBAAD;CAAqB,IAAI;WAAzB,CACG,QAAM,SAAS,IAAI,WAAW,UAC7B,QAAM,eAAe,KAAK,KAAK,MAAM,SAAS,mBAC1C,QACA,IACN,GACA,qBAAC,qBAAD;EACQ;EACN,cAAW;EACX,uBAAuB,UAAU;GAE/B,IADgB,MAAM,QACT,OAAO,gBAClB,MAAM,eAAe;EAEzB;EACA,GAAI;YATN,CAWG,mBACC,oBAAC,YAAD;GACE,IAAI;GACJ,OAAO;GACP,YAAY;GACZ,MAAK;GACL,OAAM;GACN,WAAU;aAEV,oBAAC,MAAD,EAAM,IAAI,MAAY,CAAA;EACZ,CAAA,GAEb,QAAM,SAAS,IAAI,WAAW,UAC7B,QAAM,eAAe,KAAK,KAAK,MAAM,SAAS,mBAC1C,OACA,KACN,CACmB;GACF;GACf,CAAA"}

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;CAAO,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;AAAM,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,oBAAC,SAAD;CACE,MAAK;CACL,GAAI;CACJ,WAAW,GACT,YACA,qBACA,QACA,QACA,QACA,QACA,SACA,eACA,UACD;CACD,CAAA"}
+{"version":3,"file":"DialogHeading.js","names":[],"sources":["../../../src/components/dialog/DialogHeading.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { cn } from '../../styled'\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":";;;;;AAKA,IAAa,iBAAiB,EAC5B,WACA,GAAG,WAEH,oBAAC,SAAD;CACE,MAAK;CACL,GAAI;CACJ,WAAW,GACT,YACA,qBACA,QACA,QACA,QACA,QACA,SACA,eACA,SACF;AACD,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;CACD,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;AACF,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;CAAM,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;AAAK,EAC3C,CAAC"}

package/dist/components/dismissible/DismissibleRoot.d.ts

@@ -1,21 +1,21 @@
 import * as React from 'react';
-export interface IDismissibleRootContext {
+export interface DismissibleRootContextValue {
     disabled?: boolean;
     isDismissed: boolean;
     setIsDismissed: (boolean: any) => void;
     onDismiss: () => void;
 }
-export declare const DismissibleRootContext: React.Context<IDismissibleRootContext>;
-export interface IDismissibleRootProps {
+export declare const DismissibleRootContext: React.Context<DismissibleRootContextValue>;
+export interface DismissibleRootProps {
     disabled?: boolean;
     dismissed?: boolean;
     onDismiss?: () => void;
 }
-export declare const DismissibleRootProvider: ({ dismissed: controlledIsDismissed, children, disabled, onDismiss }: React.PropsWithChildren<IDismissibleRootProps>) => React.JSX.Element;
-export interface IDismissibleRootInternalProps {
+export declare const DismissibleRootProvider: ({ dismissed: controlledIsDismissed, children, disabled, onDismiss }: React.PropsWithChildren<DismissibleRootProps>) => React.JSX.Element;
+export interface DismissibleRootInternalProps {
     asChild?: boolean;
 }
-export declare const DismissibleRoot: {
-    ({ disabled, dismissed, onDismiss, ...rest }: React.PropsWithChildren<IDismissibleRootInternalProps & IDismissibleRootProps>): React.JSX.Element;
-    displayName: string;
-};
+export declare function DismissibleRoot({ disabled, dismissed, onDismiss, ...rest }: React.PropsWithChildren<DismissibleRootInternalProps & DismissibleRootProps>): React.JSX.Element;
+export declare namespace DismissibleRoot {
+    var displayName: string;
+}

package/dist/components/dismissible/DismissibleRoot.js

@@ -45,6 +45,6 @@ var DismissibleRoot = ({ disabled = false, dismissed, onDismiss, ...rest }) => /
 });
 DismissibleRoot.displayName = "Dismissible";
 //#endregion
-export { DismissibleRoot, DismissibleRootContext };
+export { DismissibleRoot, DismissibleRootContext, DismissibleRootProvider };
 
 //# sourceMappingURL=DismissibleRoot.js.map

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;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,oBAAC,uBAAuB,UAAxB;EAAwC;EACrC;EAC+B,CAAA;;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;AAErE,QAAO,oBADW,UAAU,OAAO,OAC5B,EAAW,GAAI,OAAS,CAAA;;AAGjC,IAAa,mBAAmB,EAC9B,WAAW,OACX,WACA,WACA,GAAG,WAIH,oBAAC,yBAAD;CACa;CACD;CACC;WAEX,oBAAC,yBAAD,EAAyB,GAAI,MAAQ,CAAA;CACb,CAAA;AAG5B,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 DismissibleRootContextValue {\n  disabled?: boolean\n  isDismissed: boolean\n  setIsDismissed: (boolean) => void\n  onDismiss: () => void\n}\n\nexport const DismissibleRootContext =\n  React.createContext<DismissibleRootContextValue>({\n    isDismissed: false,\n    setIsDismissed: () => undefined,\n    onDismiss: () => undefined\n  })\n\nexport interface DismissibleRootProps {\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<DismissibleRootProps>) => {\n  const [isDismissed, setIsDismissed] = React.useState(false)\n\n  const value = React.useMemo<DismissibleRootContextValue>(() => {\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 DismissibleRootInternalProps {\n  asChild?: boolean\n}\n\nconst DismissibleRootInternal = ({\n  asChild = false,\n  ...rest\n}: React.PropsWithChildren<DismissibleRootInternalProps>) => {\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  DismissibleRootInternalProps & DismissibleRootProps\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,cAA2C;CAC/C,aAAa;CACb,sBAAsB,KAAA;CACtB,iBAAiB,KAAA;AACnB,CAAC;AAQH,IAAa,2BAA2B,EACtC,WAAW,uBACX,UACA,UACA,kBAAkB,WACiC;CACnD,MAAM,CAAC,aAAa,kBAAkB,QAAM,SAAS,KAAK;CAE1D,MAAM,QAAQ,QAAM,cAA2C;EAC7D,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,oBAAC,uBAAuB,UAAxB;EAAwC;EACrC;CAC8B,CAAA;AAErC;AAMA,IAAM,2BAA2B,EAC/B,UAAU,OACV,GAAG,WACwD;CAG3D,MAAM,EAAE,aAAa,aAFD,QAAM,WAAW,sBAEH;CAElC,IAAI,aAAa,OAAO;CAExB,MAAM,QAAQ;EAAE,GAAI,YAAY,GAAG,kBAAkB,GAAG;EAAI,GAAG;CAAK;CAEpE,OAAO,oBADW,UAAU,OAAO,OAC5B,EAAW,GAAI,MAAQ,CAAA;AAChC;AAEA,IAAa,mBAAmB,EAC9B,WAAW,OACX,WACA,WACA,GAAG,WAIH,oBAAC,yBAAD;CACa;CACD;CACC;WAEX,oBAAC,yBAAD,EAAyB,GAAI,KAAO,CAAA;AACb,CAAA;AAG3B,gBAAgB,cAAc"}