@atom-learning/components 6.4.2 → 6.5.0

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

@@ -1,2 +1,40 @@
-import*as n from"react";import{styled as E}from"../../../styled.js";import{Pagination as z}from"../../pagination/Pagination.js";import{Text as M}from"../../text/Text.js";import{AsyncDataState as $}from"../DataTable.types.js";import{useDataTable as b}from"../DataTableContext.js";const I=E("nav",{base:["flex","flex-col","justify-between","items-center","tabular-nums","flex-wrap","w-full","gap-4","mt-4","md:flex-row"]}),m=({colorScheme:c,...p})=>{const{applyPagination:i,getState:f,getExpandedRowModel:r,getRowModel:d,setPageIndex:u,getTotalRows:s,getPageCount:l,asyncDataState:h,hasAsyncData:t}=b();n.useEffect(()=>{i()},[i]);const{pagination:e}=f(),w=h!==$.PENDING&&s()===0,x=t?l()>1:r().rows.length/e.pageSize>1;if(w||!x)return null;const a=r().rows.length,o=a===0?0:e.pageIndex*e.pageSize+1,g=d().rows.length,P=t?g===0?o:o+g-1:Math.min(o+e.pageSize-1,a),S=D=>{u(D-1)},y=t?l():Math.max(1,Math.ceil(a/e.pageSize));return n.createElement(I,{...p},n.createElement(M,{size:"sm"},`${o} - ${P} of ${t?s():a} items`),n.createElement(z,{colorScheme:c,selectedPage:e.pageIndex+1,pagesCount:y,onSelectedPageChange:S}))};m.displayName="Pagination";export{m as Pagination};
-//# sourceMappingURL=Pagination.js.map
+import { styled as e } from "../../../styled.js";
+import { Text as t } from "../../text/Text.js";
+import { AsyncDataState as n } from "../DataTable.types.js";
+import { useDataTable as r } from "../DataTableContext.js";
+import { Pagination as i } from "../../pagination/Pagination.js";
+import * as a from "react";
+//#region src/components/data-table/pagination/Pagination.tsx
+var o = e("nav", { base: [
+	"flex",
+	"flex-col",
+	"justify-between",
+	"items-center",
+	"tabular-nums",
+	"flex-wrap",
+	"w-full",
+	"gap-4",
+	"mt-4",
+	"md:flex-row"
+] }), s = ({ colorScheme: e, ...s }) => {
+	let { applyPagination: c, getState: l, getExpandedRowModel: u, getRowModel: d, setPageIndex: f, getTotalRows: p, getPageCount: m, asyncDataState: h, hasAsyncData: g } = r();
+	a.useEffect(() => {
+		c();
+	}, [c]);
+	let { pagination: _ } = l(), v = h !== n.PENDING && p() === 0, y = g ? m() > 1 : u().rows.length / _.pageSize > 1;
+	if (v || !y) return null;
+	let b = u().rows.length, x = b === 0 ? 0 : _.pageIndex * _.pageSize + 1, S = d().rows.length, C = g ? S === 0 ? x : x + S - 1 : Math.min(x + _.pageSize - 1, b), w = (e) => {
+		f(e - 1);
+	}, T = g ? m() : Math.max(1, Math.ceil(b / _.pageSize));
+	return /* @__PURE__ */ a.createElement(o, s, /* @__PURE__ */ a.createElement(t, { size: "sm" }, `${x} - ${C} of ${g ? p() : b} items`), /* @__PURE__ */ a.createElement(i, {
+		colorScheme: e,
+		selectedPage: _.pageIndex + 1,
+		pagesCount: T,
+		onSelectedPageChange: w
+	}));
+};
+s.displayName = "Pagination";
+//#endregion
+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 '~/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"],"names":["StyledNav","styled","Pagination","colorScheme","props","applyPagination","getState","getExpandedRowModel","getRowModel","setPageIndex","getTotalRows","getPageCount","asyncDataState","hasAsyncData","useDataTable","React","paginationState","isEmpty","AsyncDataState","showPagination","totalVisibleRows","start","asyncRowCount","end","setPage","index","pageCount","Text","PaginationComponent"],"mappings":"uRAUA,MAAMA,EAAYC,EAAO,MAAO,CAC9B,KAAM,CACJ,OACA,WACA,kBACA,eACA,eACA,YACA,SACA,QACA,OACA,aACF,CACF,CAAC,EAOYC,EAAa,CAAC,CAAE,YAAAC,EAAa,GAAGC,CAAM,IAAuB,CACxE,KAAM,CACJ,gBAAAC,EACA,SAAAC,EACA,oBAAAC,EACA,YAAAC,EACA,aAAAC,EACA,aAAAC,EACA,aAAAC,EACA,eAAAC,EACA,aAAAC,CACF,EAAIC,IAEJC,EAAM,UAAU,IAAM,CACpBV,EAAgB,CAClB,EAAG,CAACA,CAAe,CAAC,EAEpB,KAAM,CAAE,WAAYW,CAAgB,EAAIV,EAAS,EAE3CW,EADYL,IAAmBM,EAAe,SACtBR,MAAmB,EAE3CS,EAAiBN,EACnBF,EAAa,EAAI,EACjBJ,EAAsB,EAAA,KAAK,OAASS,EAAgB,SAAW,EAEnE,GAAIC,GAAW,CAACE,EAAgB,OAAO,KACvC,MAAMC,EAAmBb,EAAoB,EAAE,KAAK,OAE9Cc,EACJD,IAAqB,EACjB,EACAJ,EAAgB,UAAYA,EAAgB,SAAW,EAEvDM,EAAgBd,EAAY,EAAE,KAAK,OACnCe,EAAMV,EACRS,IAAkB,EAChBD,EACAA,EAAQC,EAAgB,EAC1B,KAAK,IAAID,EAAQL,EAAgB,SAAW,EAAGI,CAAgB,EAG7DI,EAAWC,GAAkB,CACjChB,EAAagB,EAAQ,CAAC,CACxB,EAEMC,EAAYb,EACdF,EACA,EAAA,KAAK,IAAI,EAAG,KAAK,KAAKS,EAAmBJ,EAAgB,QAAQ,CAAC,EAEtE,OACED,EAAA,cAACf,EAAA,CAAW,GAAGI,CAAAA,EACbW,EAAA,cAACY,EAAA,CAAK,KAAK,IAAM,EAAA,GAAGN,CAAK,MAAME,CAAG,OAChCV,EAAeH,EAAa,EAAIU,CAClC,QAAS,EACTL,EAAA,cAACa,EAAA,CACC,YAAazB,EACb,aAAca,EAAgB,UAAY,EAC1C,WAAYU,EACZ,qBAAsBF,EACxB,CACF,CAEJ,EAEAtB,EAAW,YAAc"}
+{"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,IAAY,EAAO,OAAO,EAC9B,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EACF,CAAC,EAOW,KAAc,EAAE,gBAAa,GAAG,QAA6B;CACxE,IAAM,EACJ,oBACA,aACA,wBACA,gBACA,iBACA,iBACA,iBACA,mBACA,oBACE,GAAc;AAElB,GAAM,gBAAgB;AACpB,KAAiB;IAChB,CAAC,EAAgB,CAAC;CAErB,IAAM,EAAE,YAAY,MAAoB,GAAU,EAE5C,IADY,MAAmB,EAAe,WACtB,GAAc,KAAK,GAE3C,IAAiB,IACnB,GAAc,GAAG,IACjB,GAAqB,CAAC,KAAK,SAAS,EAAgB,WAAW;AAEnE,KAAI,KAAW,CAAC,EAAgB,QAAO;CACvC,IAAM,IAAmB,GAAqB,CAAC,KAAK,QAE9C,IACJ,MAAqB,IACjB,IACA,EAAgB,YAAY,EAAgB,WAAW,GAEvD,IAAgB,GAAa,CAAC,KAAK,QACnC,IAAM,IACR,MAAkB,IAChB,IACA,IAAQ,IAAgB,IAC1B,KAAK,IAAI,IAAQ,EAAgB,WAAW,GAAG,EAAiB,EAG9D,KAAW,MAAkB;AACjC,IAAa,IAAQ,EAAE;IAGnB,IAAY,IACd,GAAc,GACd,KAAK,IAAI,GAAG,KAAK,KAAK,IAAmB,EAAgB,SAAS,CAAC;AAEvE,QACE,kBAAA,cAAC,GAAc,GACb,kBAAA,cAAC,GAAD,EAAM,MAAK,MAEK,EAFC,GAAG,EAAM,KAAK,EAAI,MACjC,IAAe,GAAc,GAAG,EACjC,QAAe,EAChB,kBAAA,cAAC,GAAD;EACe;EACb,cAAc,EAAgB,YAAY;EAC1C,YAAY;EACZ,sBAAsB;EACtB,CAAA,CACQ;;AAIhB,EAAW,cAAc"}

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

@@ -1,2 +1,23 @@
-import t from"react";const g={pageIndex:0,pageSize:10},p=a=>{const[e,n]=t.useState(!!a),[i,o]=t.useState({...g,...a||{}}),s=t.useCallback(()=>{n(!0)},[]);return{isPaginated:e,paginationState:i,setPaginationState:o,applyPagination:s}};export{p as usePagination};
-//# sourceMappingURL=usePagination.js.map
+import e from "react";
+//#region src/components/data-table/usePagination.ts
+var t = {
+	pageIndex: 0,
+	pageSize: 10
+}, n = (n) => {
+	let [r, i] = e.useState(!!n), [a, o] = e.useState({
+		...t,
+		...n || {}
+	});
+	return {
+		isPaginated: r,
+		paginationState: a,
+		setPaginationState: o,
+		applyPagination: e.useCallback(() => {
+			i(!0);
+		}, [])
+	};
+};
+//#endregion
+export { n as usePagination };
+
+//# sourceMappingURL=usePagination.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"usePagination.js","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"],"names":["defaultPaginationState","usePagination","initialPaginationState","isPaginated","setIsPaginated","React","paginationState","setPaginationState","applyPagination"],"mappings":"qBAGA,MAAMA,EAA0C,CAAE,UAAW,EAAG,SAAU,EAAG,EAChEC,EACXC,GACG,CACH,KAAM,CAACC,EAAaC,CAAc,EAAIC,EAAM,SAC1C,CAAC,CAACH,CACJ,EAEM,CAACI,EAAiBC,CAAkB,EAAIF,EAAM,SAElD,CACA,GAAGL,EACH,GAAIE,GAA0B,CAChC,CAAA,CAAC,EAEKM,EAAkBH,EAAM,YAAY,IAAM,CAC9CD,EAAe,EAAI,CACrB,EAAG,CAAA,CAAE,EAEL,MAAO,CACL,YAAAD,EACA,gBAAAG,EACA,mBAAAC,EACA,gBAAAC,CACF,CACF"}
+{"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,IAA0C;CAAE,WAAW;CAAG,UAAU;CAAI,EACjE,KACX,MACG;CACH,IAAM,CAAC,GAAa,KAAkB,EAAM,SAC1C,CAAC,CAAC,EACH,EAEK,CAAC,GAAiB,KAAsB,EAAM,SAElD;EACA,GAAG;EACH,GAAI,KAA0B,EAAE;EACjC,CAAC;AAMF,QAAO;EACL;EACA;EACA;EACA,iBARsB,EAAM,kBAAkB;AAC9C,KAAe,GAAK;KACnB,EAAE,CAAC;EAOL"}

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

@@ -1,2 +1,18 @@
-import t from"react";const i=e=>{const[o,s]=t.useState(!1),[r,n]=t.useState(e?[{id:e.column,desc:e.direction==="desc"}]:[]);return{isSortable:o,setIsSortable:s,sorting:r,setSorting:n}};export{i as useSortByColumn};
-//# sourceMappingURL=useSorting.js.map
+import e from "react";
+//#region src/components/data-table/useSorting.ts
+var t = (t) => {
+	let [n, r] = e.useState(!1), [i, a] = e.useState(t ? [{
+		id: t.column,
+		desc: t.direction === "desc"
+	}] : []);
+	return {
+		isSortable: n,
+		setIsSortable: r,
+		sorting: i,
+		setSorting: a
+	};
+};
+//#endregion
+export { t as useSortByColumn };
+
+//# sourceMappingURL=useSorting.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"useSorting.js","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"],"names":["useSortByColumn","defaultSort","isSortable","setIsSortable","React","sorting","setSorting"],"mappings":"qBAKa,MAAAA,EAAmBC,GAA0C,CACxE,KAAM,CAACC,EAAYC,CAAa,EAAIC,EAAM,SAAkB,EAAK,EAE3D,CAACC,EAASC,CAAU,EAAIF,EAAM,SAClCH,EACI,CACE,CACE,GAAIA,EAAY,OAChB,KAAMA,EAAY,YAAc,MAClC,CACF,EACA,EACN,EAEA,MAAO,CAAE,WAAAC,EAAY,cAAAC,EAAe,QAAAE,EAAS,WAAAC,CAAW,CAC1D"}
+{"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,KAAmB,MAA0C;CACxE,IAAM,CAAC,GAAY,KAAiB,EAAM,SAAkB,GAAM,EAE5D,CAAC,GAAS,KAAc,EAAM,SAClC,IACI,CACE;EACE,IAAI,EAAY;EAChB,MAAM,EAAY,cAAc;EACjC,CACF,GACD,EAAE,CACP;AAED,QAAO;EAAE;EAAY;EAAe;EAAS;EAAY"}

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

@@ -1,2 +1,33 @@
-import*as o from"react";import{useFormContext as F}from"react-hook-form";import{DateInput as b}from"../date-input/DateInput.js";import{FieldWrapper as g}from"../field-wrapper/FieldWrapper.js";import{useFieldError as D}from"../form/useFieldError.js";const p=({className:l,hideLabel:m,label:d,name:e,validation:r,prompt:n,description:s,appearance:a,...c})=>{const{register:t,trigger:f}=F(),{error:i}=D(e),u=r?t(r):t;return o.createElement(g,{className:l,description:s,error:i,fieldId:e,hideLabel:m,label:d,prompt:n,required:!!(r!=null&&r.required),appearance:a},o.createElement(b,{id:e,name:e,ref:u,appearance:a,...i&&{state:"error"},...c,revalidate:f}))};p.displayName="DateField";export{p as DateField};
-//# sourceMappingURL=DateField.js.map
+import { useFieldError as e } from "../form/useFieldError.js";
+import { FieldWrapper as t } from "../field-wrapper/FieldWrapper.js";
+import { DateInput as n } from "../date-input/DateInput.js";
+import * as r from "react";
+import { useFormContext as i } from "react-hook-form";
+//#region src/components/date-field/DateField.tsx
+var a = ({ className: a, hideLabel: o, label: s, name: c, validation: l, prompt: u, description: d, appearance: f, ...p }) => {
+	let { register: m, trigger: h } = i(), { error: g } = e(c), _ = l ? m(l) : m;
+	return /* @__PURE__ */ r.createElement(t, {
+		className: a,
+		description: d,
+		error: g,
+		fieldId: c,
+		hideLabel: o,
+		label: s,
+		prompt: u,
+		required: !!l?.required,
+		appearance: f
+	}, /* @__PURE__ */ r.createElement(n, {
+		id: c,
+		name: c,
+		ref: _,
+		appearance: f,
+		...g && { state: "error" },
+		...p,
+		revalidate: h
+	}));
+};
+a.displayName = "DateField";
+//#endregion
+export { a as DateField };
+
+//# sourceMappingURL=DateField.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"DateField.js","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'\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  ...remainingProps\n}: DateFieldProps) => {\n  const { register, trigger } = useFormContext()\n  const { error } = useFieldError(name)\n  const ref = validation ? register(validation) : register\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={appearance}\n    >\n      <DateInput\n        id={name}\n        name={name}\n        ref={ref}\n        appearance={appearance}\n        {...(error && { state: 'error' })}\n        {...remainingProps}\n        revalidate={trigger}\n      />\n    </FieldWrapper>\n  )\n}\n\nDateField.displayName = 'DateField'\n"],"names":["DateField","className","hideLabel","label","name","validation","prompt","description","appearance","remainingProps","register","trigger","useFormContext","error","useFieldError","ref","React","FieldWrapper","DateInput"],"mappings":"yPAYa,MAAAA,EAAY,CAAC,CACxB,UAAAC,EACA,UAAAC,EACA,MAAAC,EACA,KAAAC,EACA,WAAAC,EACA,OAAAC,EACA,YAAAC,EACA,WAAAC,EACA,GAAGC,CACL,IAAsB,CACpB,KAAM,CAAE,SAAAC,EAAU,QAAAC,CAAQ,EAAIC,EAAAA,EACxB,CAAE,MAAAC,CAAM,EAAIC,EAAcV,CAAI,EAC9BW,EAAMV,EAAaK,EAASL,CAAU,EAAIK,EAEhD,OACEM,EAAA,cAACC,EAAA,CACC,UAAWhB,EACX,YAAaM,EACb,MAAOM,EACP,QAAST,EACT,UAAWF,EACX,MAAOC,EACP,OAAQG,EACR,SAAU,CAAQD,EAAAA,GAAA,MAAAA,EAAY,UAC9B,WAAYG,CAAAA,EAEZQ,EAAA,cAACE,EAAA,CACC,GAAId,EACJ,KAAMA,EACN,IAAKW,EACL,WAAYP,EACX,GAAIK,GAAS,CAAE,MAAO,OAAQ,EAC9B,GAAGJ,EACJ,WAAYE,CAAAA,CACd,CACF,CAEJ,EAEAX,EAAU,YAAc"}
+{"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'\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  ...remainingProps\n}: DateFieldProps) => {\n  const { register, trigger } = useFormContext()\n  const { error } = useFieldError(name)\n  const ref = validation ? register(validation) : register\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={appearance}\n    >\n      <DateInput\n        id={name}\n        name={name}\n        ref={ref}\n        appearance={appearance}\n        {...(error && { state: 'error' })}\n        {...remainingProps}\n        revalidate={trigger}\n      />\n    </FieldWrapper>\n  )\n}\n\nDateField.displayName = 'DateField'\n"],"mappings":";;;;;;AAYA,IAAa,KAAa,EACxB,cACA,cACA,UACA,SACA,eACA,WACA,gBACA,eACA,GAAG,QACiB;CACpB,IAAM,EAAE,aAAU,eAAY,GAAgB,EACxC,EAAE,aAAU,EAAc,EAAK,EAC/B,IAAM,IAAa,EAAS,EAAW,GAAG;AAEhD,QACE,kBAAA,cAAC,GAAD;EACa;EACE;EACN;EACP,SAAS;EACE;EACJ;EACC;EACR,UAAU,EAAQ,GAAY;EAClB;EAWC,EATb,kBAAA,cAAC,GAAD;EACE,IAAI;EACE;EACD;EACO;EACZ,GAAK,KAAS,EAAE,OAAO,SAAS;EAChC,GAAI;EACJ,YAAY;EACZ,CAAA,CACW;;AAInB,EAAU,cAAc"}

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

@@ -1,2 +1,83 @@
-import{CalendarEvent as H}from"@atom-learning/icons";import c from"dayjs";import P from"dayjs/plugin/customParseFormat";import*as e from"react";import{useCallbackRefState as _}from"../../utilities/hooks/useCallbackRef.js";import{getFieldIconSize as B}from"../../utilities/style/get-icon-size.js";import{ActionIcon as U}from"../action-icon/ActionIcon.js";import{Calendar as V}from"../calendar/Calendar.js";import{DEFAULT_LABELS as W}from"../calendar/constants.js";import{Icon as j}from"../icon/Icon.js";import{Input as Y}from"../input/Input.js";import{Popover as u}from"../popover/Popover.js";import{DEFAULT_DATE_FORMAT as C}from"./constants.js";c.extend(P);const g=(n,o=C)=>n?c(n).format(o):"",w=e.forwardRef(({initialDate:n,dateFormat:o=C,firstDayOfWeek:I=1,disabled:f,monthNames:N,weekdayNames:T,size:d="md",labels:k,revalidate:m,onChange:p,minDate:A,maxDate:F,...O},S)=>{const[s,D]=e.useState(n?c(n).toDate():void 0),[l,x]=_();e.useImperativeHandle(S,()=>l);const z=g(s,o),L=e.useCallback(t=>{const r=t.target.value,a=c(r,o),i=a.isValid()?a.toDate():void 0;D(i),p==null||p(i)},[o,p]),E=e.useCallback(t=>{D(t),(()=>{var r;if(!l)return;const a=(r=Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype,"value"))==null?void 0:r.set;a==null||a.call(l,g(t,o));const i=new Event("input",{bubbles:!0});l.dispatchEvent(i)})()},[o,l]),b={...W,...k},[R,v]=e.useState(!1),h=e.useRef(null),y=e.useRef(null),M=e.useMemo(()=>B(d),[d]);return e.createElement("div",{className:"relative h-max"},e.createElement(Y,{name:"date",disabled:f,size:d,...O,onChange:L,ref:x,defaultValue:z}),e.createElement(u,{modal:!0,open:R,onOpenChange:v},e.createElement(u.Trigger,{asChild:!0},e.createElement(U,{disabled:f,label:b.open,size:M,theme:"neutral",hasTooltip:!1,className:"absolute top-1/2 right-0 -translate-y-1/2"},e.createElement(j,{is:H}))),e.createElement(u.Portal,null,e.createElement(u.Content,{side:"bottom",align:"end",showCloseButton:!1,onOpenAutoFocus:t=>{var r,a;t.preventDefault(),s?(r=y.current)==null||r.focus():(a=h.current)==null||a.focus()},className:"z-1147483646 pr-6"},e.createElement(V,{date:s||new Date,selected:s,onDateSelected:async t=>{v(!1),await E(t.date),m&&m()},setYear:async t=>{await E(t),m&&m()},minDate:A,maxDate:F,refDateToday:h,refDateSelected:y,firstDayOfWeek:I,monthNames:N,weekdayNames:T,labels:b})))))});w.displayName="DateInput";export{w as DateInput};
-//# sourceMappingURL=DateInput.js.map
+import { Icon as e } from "../icon/Icon.js";
+import { ActionIcon as t } from "../action-icon/ActionIcon.js";
+import { useCallbackRefState as n } from "../../utilities/hooks/useCallbackRef.js";
+import { Input as r } from "../input/Input.js";
+import { getFieldIconSize as i } from "../../utilities/style/get-icon-size.js";
+import { Popover as a } from "../popover/Popover.js";
+import { DEFAULT_LABELS as o } from "../calendar/constants.js";
+import { Calendar as s } from "../calendar/Calendar.js";
+import { DEFAULT_DATE_FORMAT as c } from "./constants.js";
+import * as l from "react";
+import { CalendarEvent as u } from "@atom-learning/icons";
+import d from "dayjs";
+import f from "dayjs/plugin/customParseFormat";
+//#region src/components/date-input/DateInput.tsx
+d.extend(f);
+var p = (e, t = c) => e ? d(e).format(t) : "", m = l.forwardRef(({ initialDate: f, dateFormat: m = c, firstDayOfWeek: h = 1, disabled: g, monthNames: _, weekdayNames: v, size: y = "md", labels: b, revalidate: x, onChange: S, minDate: C, maxDate: w, ...T }, E) => {
+	let [D, O] = l.useState(f ? d(f).toDate() : void 0), [k, A] = n();
+	l.useImperativeHandle(E, () => k);
+	let j = p(D, m), M = l.useCallback((e) => {
+		let t = e.target.value, n = d(t, m), r = n.isValid() ? n.toDate() : void 0;
+		O(r), S?.(r);
+	}, [m, S]), N = l.useCallback((e) => {
+		O(e), (() => {
+			if (!k) return;
+			(Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value")?.set)?.call(k, p(e, m));
+			let t = new Event("input", { bubbles: !0 });
+			k.dispatchEvent(t);
+		})();
+	}, [m, k]), P = {
+		...o,
+		...b
+	}, [F, I] = l.useState(!1), L = l.useRef(null), R = l.useRef(null), z = l.useMemo(() => i(y), [y]);
+	return /* @__PURE__ */ l.createElement("div", { className: "relative h-max" }, /* @__PURE__ */ l.createElement(r, {
+		name: "date",
+		disabled: g,
+		size: y,
+		...T,
+		onChange: M,
+		ref: A,
+		defaultValue: j
+	}), /* @__PURE__ */ l.createElement(a, {
+		modal: !0,
+		open: F,
+		onOpenChange: I
+	}, /* @__PURE__ */ l.createElement(a.Trigger, { asChild: !0 }, /* @__PURE__ */ l.createElement(t, {
+		disabled: g,
+		label: P.open,
+		size: z,
+		theme: "neutral",
+		hasTooltip: !1,
+		className: "absolute top-1/2 right-0 -translate-y-1/2"
+	}, /* @__PURE__ */ l.createElement(e, { is: u }))), /* @__PURE__ */ l.createElement(a.Portal, null, /* @__PURE__ */ l.createElement(a.Content, {
+		side: "bottom",
+		align: "end",
+		showCloseButton: !1,
+		onOpenAutoFocus: (e) => {
+			e.preventDefault(), D ? R.current?.focus() : L.current?.focus();
+		},
+		className: "z-1147483646 pr-6"
+	}, /* @__PURE__ */ l.createElement(s, {
+		date: D || /* @__PURE__ */ new Date(),
+		selected: D,
+		onDateSelected: async (e) => {
+			I(!1), await N(e.date), x && x();
+		},
+		setYear: async (e) => {
+			await N(e), x && x();
+		},
+		minDate: C,
+		maxDate: w,
+		refDateToday: L,
+		refDateSelected: R,
+		firstDayOfWeek: h,
+		monthNames: _,
+		weekdayNames: v,
+		labels: P
+	})))));
+});
+m.displayName = "DateInput";
+//#endregion
+export { m as DateInput };
+
+//# sourceMappingURL=DateInput.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"DateInput.js","sources":["../../../src/components/date-input/DateInput.tsx"],"sourcesContent":["import { CalendarEvent } from '@atom-learning/icons'\nimport dayjs from 'dayjs'\nimport customParseFormat from 'dayjs/plugin/customParseFormat'\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    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      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          {...remainingProps}\n          onChange={handleInputChange}\n          ref={setInputElRef}\n          defaultValue={dateString}\n        />\n        <Popover modal open={calendarOpen} onOpenChange={setCalendarOpen}>\n          <Popover.Trigger asChild>\n            <ActionIcon\n              disabled={disabled}\n              label={updatedLabels.open}\n              size={iconSize}\n              theme=\"neutral\"\n              hasTooltip={false}\n              className=\"absolute top-1/2 right-0 -translate-y-1/2\"\n            >\n              <Icon is={CalendarEvent} />\n            </ActionIcon>\n          </Popover.Trigger>\n          <Popover.Portal>\n            <Popover.Content\n              side=\"bottom\"\n              align=\"end\"\n              showCloseButton={false}\n              onOpenAutoFocus={(e) => {\n                e.preventDefault()\n                if (date) {\n                  refDateSelected.current?.focus()\n                } else {\n                  refDateToday.current?.focus()\n                }\n              }}\n              className=\"z-1147483646 pr-6\"\n            >\n              <Calendar\n                date={date || new Date()}\n                selected={date}\n                onDateSelected={async (date) => {\n                  setCalendarOpen(false)\n                  await handleCalendarChange(date.date)\n                  if (revalidate) revalidate()\n                }}\n                setYear={async (date) => {\n                  await handleCalendarChange(date)\n                  if (revalidate) revalidate()\n                }}\n                minDate={minDate}\n                maxDate={maxDate}\n                refDateToday={refDateToday}\n                refDateSelected={refDateSelected}\n                firstDayOfWeek={firstDayOfWeek}\n                monthNames={monthNames}\n                weekdayNames={weekdayNames}\n                labels={updatedLabels}\n              />\n            </Popover.Content>\n          </Popover.Portal>\n        </Popover>\n      </div>\n    )\n  }\n)\n\nDateInput.displayName = 'DateInput'\n"],"names":["dayjs","customParseFormat","formatDateToString","date","dateFormat","DEFAULT_DATE_FORMAT","DateInput","React","initialDate","firstDayOfWeek","disabled","monthNames","weekdayNames","size","labels","revalidate","onChange","minDate","maxDate","remainingProps","ref","setDate","inputElRef","setInputElRef","useCallbackRefState","dateString","handleInputChange","event","newDateString","parsedInputDate","newDate","handleCalendarChange","_a","nativeInputValueSetter","updatedLabels","DEFAULT_LABELS","calendarOpen","setCalendarOpen","refDateToday","refDateSelected","iconSize","getFieldIconSize","Input","Popover","ActionIcon","Icon","CalendarEvent","e","_b","Calendar"],"mappings":"qoBAiBAA,EAAM,OAAOC,CAAiB,EAY9B,MAAMC,EAAqB,CAACC,EAAaC,EAAaC,IACpDF,EAAOH,EAAMG,CAAI,EAAE,OAAOC,CAAU,EAAI,GAE7BE,EAAYC,EAAM,WAC7B,CACE,CACE,YAAAC,EACA,WAAAJ,EAAaC,EACb,eAAAI,EAAiB,EACjB,SAAAC,EACA,WAAAC,EACA,aAAAC,EACA,KAAAC,EAAO,KACP,OAAAC,EACA,WAAAC,EACA,SAAAC,EACA,QAAAC,EACA,QAAAC,EACA,GAAGC,CACL,EACAC,IACG,CACH,KAAM,CAACjB,EAAMkB,CAAO,EAAId,EAAM,SAC5BC,EAAcR,EAAMQ,CAAW,EAAE,OAAW,EAAA,MAC9C,EAEM,CAACc,EAAYC,CAAa,EAAIC,IACpCjB,EAAM,oBAAoBa,EAAK,IAAME,CAA8B,EAEnE,MAAMG,EAAavB,EAAmBC,EAAMC,CAAU,EAEhDsB,EAAoBnB,EAAM,YAC7BoB,GAAU,CACT,MAAMC,EAAgBD,EAAM,OAAO,MAC7BE,EAAkB7B,EAAM4B,EAAexB,CAAU,EACjD0B,EAAUD,EAAgB,QAC5BA,EAAAA,EAAgB,SAChB,OACJR,EAAQS,CAAO,EACfd,GAAA,MAAAA,EAAWc,CAAAA,CACb,EACA,CAAC1B,EAAYY,CAAQ,CACvB,EAEMe,EAAuBxB,EAAM,YAChCuB,GAAY,CACXT,EAAQS,CAAO,GAEoB,IAAM,CA7EjD,IAAAE,EA8EU,GAAI,CAACV,EAAY,OAIjB,MAAMW,GAAyBD,EAAA,OAAO,yBACpC,OAAO,iBAAiB,UACxB,OACF,IAH+B,YAAAA,EAG5B,IACHC,GAAA,MAAAA,EAAwB,KACtBX,EACApB,EAAmB4B,EAAS1B,CAAU,CAAA,EAExC,MAAMuB,EAAQ,IAAI,MAAM,QAAS,CAAE,QAAS,EAAK,CAAC,EAClDL,EAAW,cAAcK,CAAK,CAChC,IAEF,EACA,CAACvB,EAAYkB,CAAU,CACzB,EAEMY,EAAgB,CACpB,GAAGC,EACH,GAAGrB,CACL,EAEM,CAACsB,EAAcC,CAAe,EAAI9B,EAAM,SAAS,EAAK,EAEtD+B,EAAe/B,EAAM,OAA0B,IAAI,EACnDgC,EAAkBhC,EAAM,OAA0B,IAAI,EAEtDiC,EAAWjC,EAAM,QAAQ,IAAMkC,EAAiB5B,CAAI,EAAG,CAACA,CAAI,CAAC,EAEnE,OACEN,EAAA,cAAC,MAAA,CAAI,UAAU,gBAAA,EACbA,EAAA,cAACmC,EAAA,CACC,KAAK,OACL,SAAUhC,EACV,KAAMG,EACL,GAAGM,EACJ,SAAUO,EACV,IAAKH,EACL,aAAcE,CAChB,CAAA,EACAlB,EAAA,cAACoC,EAAA,CAAQ,MAAK,GAAC,KAAMP,EAAc,aAAcC,GAC/C9B,EAAA,cAACoC,EAAQ,QAAR,CAAgB,QAAO,IACtBpC,EAAA,cAACqC,EAAA,CACC,SAAUlC,EACV,MAAOwB,EAAc,KACrB,KAAMM,EACN,MAAM,UACN,WAAY,GACZ,UAAU,2CAEVjC,EAAAA,EAAA,cAACsC,EAAA,CAAK,GAAIC,CAAAA,CAAe,CAC3B,CACF,EACAvC,EAAA,cAACoC,EAAQ,OAAR,KACCpC,EAAA,cAACoC,EAAQ,QAAR,CACC,KAAK,SACL,MAAM,MACN,gBAAiB,GACjB,gBAAkBI,GAAM,CA3ItC,IAAAf,EAAAgB,EA4IgBD,EAAE,eAAA,EACE5C,GACF6B,EAAAO,EAAgB,UAAhB,MAAAP,EAAyB,MAEzBgB,GAAAA,EAAAV,EAAa,UAAb,MAAAU,EAAsB,MAAA,CAE1B,EACA,UAAU,mBAEVzC,EAAAA,EAAA,cAAC0C,EAAA,CACC,KAAM9C,GAAQ,IAAI,KAClB,SAAUA,EACV,eAAgB,MAAOA,GAAS,CAC9BkC,EAAgB,EAAK,EACrB,MAAMN,EAAqB5B,EAAK,IAAI,EAChCY,GAAYA,EAAW,CAC7B,EACA,QAAS,MAAOZ,GAAS,CACvB,MAAM4B,EAAqB5B,CAAI,EAC3BY,GAAYA,GAClB,EACA,QAASE,EACT,QAASC,EACT,aAAcoB,EACd,gBAAiBC,EACjB,eAAgB9B,EAChB,WAAYE,EACZ,aAAcC,EACd,OAAQsB,CACV,CAAA,CACF,CACF,CACF,CACF,CAEJ,CACF,EAEA5B,EAAU,YAAc"}
+{"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'\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    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      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          {...remainingProps}\n          onChange={handleInputChange}\n          ref={setInputElRef}\n          defaultValue={dateString}\n        />\n        <Popover modal open={calendarOpen} onOpenChange={setCalendarOpen}>\n          <Popover.Trigger asChild>\n            <ActionIcon\n              disabled={disabled}\n              label={updatedLabels.open}\n              size={iconSize}\n              theme=\"neutral\"\n              hasTooltip={false}\n              className=\"absolute top-1/2 right-0 -translate-y-1/2\"\n            >\n              <Icon is={CalendarEvent} />\n            </ActionIcon>\n          </Popover.Trigger>\n          <Popover.Portal>\n            <Popover.Content\n              side=\"bottom\"\n              align=\"end\"\n              showCloseButton={false}\n              onOpenAutoFocus={(e) => {\n                e.preventDefault()\n                if (date) {\n                  refDateSelected.current?.focus()\n                } else {\n                  refDateToday.current?.focus()\n                }\n              }}\n              className=\"z-1147483646 pr-6\"\n            >\n              <Calendar\n                date={date || new Date()}\n                selected={date}\n                onDateSelected={async (date) => {\n                  setCalendarOpen(false)\n                  await handleCalendarChange(date.date)\n                  if (revalidate) revalidate()\n                }}\n                setYear={async (date) => {\n                  await handleCalendarChange(date)\n                  if (revalidate) revalidate()\n                }}\n                minDate={minDate}\n                maxDate={maxDate}\n                refDateToday={refDateToday}\n                refDateSelected={refDateSelected}\n                firstDayOfWeek={firstDayOfWeek}\n                monthNames={monthNames}\n                weekdayNames={weekdayNames}\n                labels={updatedLabels}\n              />\n            </Popover.Content>\n          </Popover.Portal>\n        </Popover>\n      </div>\n    )\n  }\n)\n\nDateInput.displayName = 'DateInput'\n"],"mappings":";;;;;;;;;;;;;;AAiBA,EAAM,OAAO,EAAkB;AAY/B,IAAM,KAAsB,GAAa,IAAa,MACpD,IAAO,EAAM,EAAK,CAAC,OAAO,EAAW,GAAG,IAE7B,IAAY,EAAM,YAE3B,EACE,gBACA,gBAAa,GACb,oBAAiB,GACjB,aACA,eACA,iBACA,UAAO,MACP,WACA,eACA,aACA,YACA,YACA,GAAG,KAEL,MACG;CACH,IAAM,CAAC,GAAM,KAAW,EAAM,SAC5B,IAAc,EAAM,EAAY,CAAC,QAAQ,GAAG,KAAA,EAC7C,EAEK,CAAC,GAAY,KAAiB,GAAqB;AACzD,GAAM,oBAAoB,SAAW,EAA+B;CAEpE,IAAM,IAAa,EAAmB,GAAM,EAAW,EAEjD,IAAoB,EAAM,aAC7B,MAAU;EACT,IAAM,IAAgB,EAAM,OAAO,OAC7B,IAAkB,EAAM,GAAe,EAAW,EAClD,IAAU,EAAgB,SAAS,GACrC,EAAgB,QAAQ,GACxB,KAAA;AAEJ,EADA,EAAQ,EAAQ,EAChB,IAAW,EAAQ;IAErB,CAAC,GAAY,EAAS,CACvB,EAEK,IAAuB,EAAM,aAChC,MAAY;AAmBX,EAlBA,EAAQ,EAAQ,SAEyB;AACvC,OAAI,CAAC,EAAY;AAQjB,IAJ+B,OAAO,yBACpC,OAAO,iBAAiB,WACxB,QACD,EAAE,MACqB,KACtB,GACA,EAAmB,GAAS,EAAW,CACxC;GACD,IAAM,IAAQ,IAAI,MAAM,SAAS,EAAE,SAAS,IAAM,CAAC;AACnD,KAAW,cAAc,EAAM;MAEL;IAE9B,CAAC,GAAY,EAAW,CACzB,EAEK,IAAgB;EACpB,GAAG;EACH,GAAG;EACJ,EAEK,CAAC,GAAc,KAAmB,EAAM,SAAS,GAAM,EAEvD,IAAe,EAAM,OAA0B,KAAK,EACpD,IAAkB,EAAM,OAA0B,KAAK,EAEvD,IAAW,EAAM,cAAc,EAAiB,EAAK,EAAE,CAAC,EAAK,CAAC;AAEpE,QACE,kBAAA,cAAC,OAAD,EAAK,WAAU,kBA8DT,EA7DJ,kBAAA,cAAC,GAAD;EACE,MAAK;EACK;EACJ;EACN,GAAI;EACJ,UAAU;EACV,KAAK;EACL,cAAc;EACd,CAAA,EACF,kBAAA,cAAC,GAAD;EAAS,OAAA;EAAM,MAAM;EAAc,cAAc;EAmDvC,EAlDR,kBAAA,cAAC,EAAQ,SAAT,EAAiB,SAAA,IAWC,EAVhB,kBAAA,cAAC,GAAD;EACY;EACV,OAAO,EAAc;EACrB,MAAM;EACN,OAAM;EACN,YAAY;EACZ,WAAU;EAGC,EADX,kBAAA,cAAC,GAAD,EAAM,IAAI,GAAiB,CAAA,CAChB,CACG,EAClB,kBAAA,cAAC,EAAQ,QAAA,MACP,kBAAA,cAAC,EAAQ,SAAT;EACE,MAAK;EACL,OAAM;EACN,iBAAiB;EACjB,kBAAkB,MAAM;AAEtB,GADA,EAAE,gBAAgB,EACd,IACF,EAAgB,SAAS,OAAO,GAEhC,EAAa,SAAS,OAAO;;EAGjC,WAAU;EAuBM,EArBhB,kBAAA,cAAC,GAAD;EACE,MAAM,qBAAQ,IAAI,MAAM;EACxB,UAAU;EACV,gBAAgB,OAAO,MAAS;AAG9B,GAFA,EAAgB,GAAM,EACtB,MAAM,EAAqB,EAAK,KAAK,EACjC,KAAY,GAAY;;EAE9B,SAAS,OAAO,MAAS;AAEvB,GADA,MAAM,EAAqB,EAAK,EAC5B,KAAY,GAAY;;EAErB;EACA;EACK;EACG;EACD;EACJ;EACE;EACd,QAAQ;EACR,CAAA,CACc,CACH,CACT,CACN;EAGX;AAED,EAAU,cAAc"}

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

@@ -1,2 +1,6 @@
-const D="DD/MM/YYYY";export{D as DEFAULT_DATE_FORMAT};
-//# sourceMappingURL=constants.js.map
+//#region src/components/date-input/constants.ts
+var e = "DD/MM/YYYY";
+//#endregion
+export { e as DEFAULT_DATE_FORMAT };
+
+//# sourceMappingURL=constants.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"constants.js","sources":["../../../src/components/date-input/constants.ts"],"sourcesContent":["export const DEFAULT_DATE_FORMAT = 'DD/MM/YYYY'\n"],"names":["DEFAULT_DATE_FORMAT"],"mappings":"AAAO,MAAMA,EAAsB"}
+{"version":3,"file":"constants.js","names":[],"sources":["../../../src/components/date-input/constants.ts"],"sourcesContent":["export const DEFAULT_DATE_FORMAT = 'DD/MM/YYYY'\n"],"mappings":";AAAA,IAAa,IAAsB"}

package/dist/components/dialog/Dialog.js

@@ -1,2 +1,22 @@
-import{Root as i,Description as r,Title as t,Trigger as e}from"@radix-ui/react-dialog";import{DialogBackground as g}from"./DialogBackground.js";import{DialogClose as a}from"./DialogClose.js";import{DialogContent as m}from"./DialogContent.js";import{DialogFooter as l}from"./DialogFooter.js";import{DialogHeading as n}from"./DialogHeading.js";const o=Object.assign(i,{Background:g,Close:a,Content:m,Heading:n,Footer:l,Description:r,Title:t,Trigger:e});o.displayName="Dialog";export{o as Dialog};
-//# sourceMappingURL=Dialog.js.map
+import { DialogBackground as e } from "./DialogBackground.js";
+import { DialogClose as t } from "./DialogClose.js";
+import { DialogContent as n } from "./DialogContent.js";
+import { DialogFooter as r } from "./DialogFooter.js";
+import { DialogHeading as i } from "./DialogHeading.js";
+import { Description as a, Root as o, Title as s, Trigger as c } from "@radix-ui/react-dialog";
+//#region src/components/dialog/Dialog.tsx
+var l = Object.assign(o, {
+	Background: e,
+	Close: t,
+	Content: n,
+	Heading: i,
+	Footer: r,
+	Description: a,
+	Title: s,
+	Trigger: c
+});
+l.displayName = "Dialog";
+//#endregion
+export { l as Dialog };
+
+//# sourceMappingURL=Dialog.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Dialog.js","sources":["../../../src/components/dialog/Dialog.tsx"],"sourcesContent":["import { Description, Root, Title, Trigger } from '@radix-ui/react-dialog'\n\nimport { DialogBackground } from './DialogBackground'\nimport { DialogClose } from './DialogClose'\nimport { DialogContent } from './DialogContent'\nimport { DialogFooter } from './DialogFooter'\nimport { DialogHeading } from './DialogHeading'\n\nexport const Dialog = Object.assign(Root, {\n  Background: DialogBackground,\n  Close: DialogClose,\n  Content: DialogContent,\n  Heading: DialogHeading,\n  Footer: DialogFooter,\n\n  Description: Description,\n  Title: Title,\n  Trigger: Trigger\n})\n\nDialog.displayName = 'Dialog'\n"],"names":["Dialog","Root","DialogBackground","DialogClose","DialogContent","DialogHeading","DialogFooter","Description","Title","Trigger"],"mappings":"sVAQO,MAAMA,EAAS,OAAO,OAAOC,EAAM,CACxC,WAAYC,EACZ,MAAOC,EACP,QAASC,EACT,QAASC,EACT,OAAQC,EAER,YAAaC,EACb,MAAOC,EACP,QAASC,CACX,CAAC,EAEDT,EAAO,YAAc"}
+{"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 { DialogBackground } from './DialogBackground'\nimport { DialogClose } from './DialogClose'\nimport { DialogContent } from './DialogContent'\nimport { DialogFooter } from './DialogFooter'\nimport { DialogHeading } from './DialogHeading'\n\nexport const Dialog = Object.assign(Root, {\n  Background: DialogBackground,\n  Close: DialogClose,\n  Content: DialogContent,\n  Heading: DialogHeading,\n  Footer: DialogFooter,\n\n  Description: Description,\n  Title: Title,\n  Trigger: Trigger\n})\n\nDialog.displayName = 'Dialog'\n"],"mappings":";;;;;;;AAQA,IAAa,IAAS,OAAO,OAAO,GAAM;CACxC,YAAY;CACZ,OAAO;CACP,SAAS;CACT,SAAS;CACT,QAAQ;CAEK;CACN;CACE;CACV,CAAC;AAEF,EAAO,cAAc"}

package/dist/components/dialog/DialogBackground.js

@@ -1,2 +1,7 @@
-import{styled as e}from"../../styled.js";const o=e("div",{base:["w-screen","h-screen"]});export{o as DialogBackground};
-//# sourceMappingURL=DialogBackground.js.map
+import { styled as e } from "../../styled.js";
+//#region src/components/dialog/DialogBackground.tsx
+var t = e("div", { base: ["w-screen", "h-screen"] });
+//#endregion
+export { t as DialogBackground };
+
+//# sourceMappingURL=DialogBackground.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"DialogBackground.js","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"],"names":["DialogBackground","styled"],"mappings":"yCAEO,MAAMA,EAAmBC,EAAO,MAAO,CAC5C,KAAM,CAAC,WAAY,UAAU,CAC/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,IAAmB,EAAO,OAAO,EAC5C,MAAM,CAAC,YAAY,WAAW,EAC/B,CAAC"}

package/dist/components/dialog/DialogClose.js

@@ -1,2 +1,7 @@
-import{Close as o}from"@radix-ui/react-dialog";const e=o;export{e as DialogClose};
-//# sourceMappingURL=DialogClose.js.map
+import { Close as e } from "@radix-ui/react-dialog";
+//#region src/components/dialog/DialogClose.tsx
+var t = e;
+//#endregion
+export { t as DialogClose };
+
+//# sourceMappingURL=DialogClose.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"DialogClose.js","sources":["../../../src/components/dialog/DialogClose.tsx"],"sourcesContent":["import { Close } from '@radix-ui/react-dialog'\n\nexport const DialogClose = Close\n"],"names":["DialogClose","Close"],"mappings":"+CAEO,MAAMA,EAAcC"}
+{"version":3,"file":"DialogClose.js","names":[],"sources":["../../../src/components/dialog/DialogClose.tsx"],"sourcesContent":["import { Close } from '@radix-ui/react-dialog'\n\nexport const DialogClose = Close\n"],"mappings":";;AAEA,IAAa,IAAc"}

package/dist/components/dialog/DialogContent.js

@@ -1,2 +1,103 @@
-import{Close as p}from"@atom-learning/icons";import{Overlay as u,Content as d,Portal as v,Close as x}from"@radix-ui/react-dialog";import*as o from"react";import{styled as a}from"../../styled.js";import{backdropOverlay as c}from"../../utilities/style/backdrop-overlay.js";import{ActionIcon as w}from"../action-icon/ActionIcon.js";import{Icon as f}from"../icon/Icon.js";import{DialogBackground as r}from"./DialogBackground.js";const m="modal_overlay",z=a(u,{base:c}),g=a(d,{base:["transform-[translate(-50%,-50%)]","bg-white","shadow-xl","left-1/2","h-auto","max-w-[90vw]","max-h-[90vh]","overflow-y-auto","rounded-md","p-8","fixed","top-1/2","z-1147483646","focus:outline-none","motion-safe:data-[state=open]:animate-slide-in-center","motion-safe:data-[state=closed]:animate-slide-out-center"],variants:{size:{xs:["rounded-md","size-auto","max-w-[90vw]","max-h-[90vh]","supports-svh:h-auto","supports-svh:max-h-[90vh]","w-95"],sm:["rounded-md","size-auto","max-w-[90vw]","max-h-[90vh]","supports-svh:h-auto","supports-svh:max-h-[90vh]","w-120"],md:["rounded-md","size-auto","max-w-[90vw]","max-h-[90vh]","supports-svh:h-auto","supports-svh:max-h-[90vh]","w-150"],lg:["rounded-md","size-auto","max-w-[90vw]","max-h-[90vh]","supports-svh:h-auto","supports-svh:max-h-[90vh]","w-200"],xl:["rounded-md","size-auto","max-w-[90vw]","max-h-[90vh]","supports-svh:h-auto","supports-svh:max-h-[90vh]","w-275"],fullscreen:["rounded-none","w-screen","h-screen","max-w-screen","max-h-screen","supports-svh:h-svh","supports-svh:max-h-svh"]}}},{enabledResponsiveVariants:!0}),C=({size:n="sm",children:s,closeDialogText:h="Close dialog",showCloseButton:l=!0,...i})=>o.createElement(v,null,o.createElement(z,{id:m},o.Children.map(s,e=>(e==null?void 0:e.type)===r&&e),o.createElement(g,{size:n,"aria-label":"Dialog",onPointerDownOutside:e=>{const t=e.target;(t==null?void 0:t.id)!==m&&e.preventDefault()},...i},l&&o.createElement(w,{as:x,label:h,hasTooltip:!1,size:"md",theme:"neutral",className:"absolute top-4 right-4 size-12"},o.createElement(f,{is:p})),o.Children.map(s,e=>(e==null?void 0:e.type)!==r&&e))));export{C as DialogContent};
-//# sourceMappingURL=DialogContent.js.map
+import { styled as e } from "../../styled.js";
+import { Icon as t } from "../icon/Icon.js";
+import { ActionIcon as n } from "../action-icon/ActionIcon.js";
+import { DialogBackground as r } from "./DialogBackground.js";
+import { backdropOverlay as i } from "../../utilities/style/backdrop-overlay.js";
+import * as a from "react";
+import { Close as o } from "@atom-learning/icons";
+import { Close as s, Content as c, Overlay as l, Portal as u } from "@radix-ui/react-dialog";
+//#region src/components/dialog/DialogContent.tsx
+var d = "modal_overlay", f = e(l, { base: i }), p = e(c, {
+	base: [
+		"transform-[translate(-50%,-50%)]",
+		"bg-white",
+		"shadow-xl",
+		"left-1/2",
+		"h-auto",
+		"max-w-[90vw]",
+		"max-h-[90vh]",
+		"overflow-y-auto",
+		"rounded-md",
+		"p-8",
+		"fixed",
+		"top-1/2",
+		"z-1147483646",
+		"focus:outline-none",
+		"motion-safe:data-[state=open]:animate-slide-in-center",
+		"motion-safe:data-[state=closed]:animate-slide-out-center"
+	],
+	variants: { size: {
+		xs: [
+			"rounded-md",
+			"size-auto",
+			"max-w-[90vw]",
+			"max-h-[90vh]",
+			"supports-svh:h-auto",
+			"supports-svh:max-h-[90vh]",
+			"w-95"
+		],
+		sm: [
+			"rounded-md",
+			"size-auto",
+			"max-w-[90vw]",
+			"max-h-[90vh]",
+			"supports-svh:h-auto",
+			"supports-svh:max-h-[90vh]",
+			"w-120"
+		],
+		md: [
+			"rounded-md",
+			"size-auto",
+			"max-w-[90vw]",
+			"max-h-[90vh]",
+			"supports-svh:h-auto",
+			"supports-svh:max-h-[90vh]",
+			"w-150"
+		],
+		lg: [
+			"rounded-md",
+			"size-auto",
+			"max-w-[90vw]",
+			"max-h-[90vh]",
+			"supports-svh:h-auto",
+			"supports-svh:max-h-[90vh]",
+			"w-200"
+		],
+		xl: [
+			"rounded-md",
+			"size-auto",
+			"max-w-[90vw]",
+			"max-h-[90vh]",
+			"supports-svh:h-auto",
+			"supports-svh:max-h-[90vh]",
+			"w-275"
+		],
+		fullscreen: [
+			"rounded-none",
+			"w-screen",
+			"h-screen",
+			"max-w-screen",
+			"max-h-screen",
+			"supports-svh:h-svh",
+			"supports-svh:max-h-svh"
+		]
+	} }
+}, { enabledResponsiveVariants: !0 }), m = ({ size: e = "sm", children: i, closeDialogText: c = "Close dialog", showCloseButton: l = !0, ...m }) => /* @__PURE__ */ a.createElement(u, null, /* @__PURE__ */ a.createElement(f, { id: d }, a.Children.map(i, (e) => e?.type === r && e), /* @__PURE__ */ a.createElement(p, {
+	size: e,
+	"aria-label": "Dialog",
+	onPointerDownOutside: (e) => {
+		e.target?.id !== d && e.preventDefault();
+	},
+	...m
+}, l && /* @__PURE__ */ a.createElement(n, {
+	as: s,
+	label: c,
+	hasTooltip: !1,
+	size: "md",
+	theme: "neutral",
+	className: "absolute top-4 right-4 size-12"
+}, /* @__PURE__ */ a.createElement(t, { is: o })), a.Children.map(i, (e) => e?.type !== r && e))));
+//#endregion
+export { m as DialogContent };
+
+//# sourceMappingURL=DialogContent.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"DialogContent.js","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      '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    }\n  },\n  { enabledResponsiveVariants: true }\n)\n\ntype DialogContentProps = React.ComponentProps<typeof StyledDialogContent> & {\n  closeDialogText?: string\n  showCloseButton?: boolean\n}\n\nexport const DialogContent = ({\n  size = 'sm',\n  children,\n  closeDialogText = 'Close dialog',\n  showCloseButton = true,\n  ...remainingProps\n}: DialogContentProps) => (\n  <Portal>\n    <StyledDialogOverlay id={modalOverlayId}>\n      {React.Children.map(\n        children,\n        (child?: React.ReactElement) =>\n          child?.type === DialogBackground && child\n      )}\n      <StyledDialogContent\n        size={size}\n        aria-label=\"Dialog\"\n        onPointerDownOutside={(event) => {\n          const element = event.target as HTMLElement\n          if (element?.id !== modalOverlayId) {\n            event.preventDefault()\n          }\n        }}\n        {...remainingProps}\n      >\n        {showCloseButton && (\n          <ActionIcon\n            as={Close}\n            label={closeDialogText}\n            hasTooltip={false}\n            size=\"md\"\n            theme=\"neutral\"\n            className=\"absolute top-4 right-4 size-12\"\n          >\n            <Icon is={CloseIcon} />\n          </ActionIcon>\n        )}\n        {React.Children.map(\n          children,\n          (child?: React.ReactElement) =>\n            child?.type !== DialogBackground && child\n        )}\n      </StyledDialogContent>\n    </StyledDialogOverlay>\n  </Portal>\n)\n"],"names":["modalOverlayId","StyledDialogOverlay","styled","Overlay","backdropOverlay","StyledDialogContent","Content","DialogContent","size","children","closeDialogText","showCloseButton","remainingProps","React","Portal","child","DialogBackground","event","element","ActionIcon","Close","Icon","CloseIcon"],"mappings":"yaAWA,MAAMA,EAAiB,gBAEjBC,EAAsBC,EAAOC,EAAS,CAC1C,KAAMC,CACR,CAAC,EAEKC,EAAsBH,EAC1BI,EACA,CACE,KAAM,CAIJ,mCACA,WACA,YACA,WACA,SACA,eACA,eACA,kBACA,aACA,MACA,QACA,UACA,eACA,qBACA,wDACA,0DACF,EACA,SAAU,CACR,KAAM,CACJ,GAAI,CACF,aACA,YACA,eACA,eACA,sBACA,4BACA,MACF,EACA,GAAI,CACF,aACA,YACA,eACA,eACA,sBACA,4BACA,OACF,EACA,GAAI,CACF,aACA,YACA,eACA,eACA,sBACA,4BACA,OACF,EACA,GAAI,CACF,aACA,YACA,eACA,eACA,sBACA,4BACA,OACF,EACA,GAAI,CACF,aACA,YACA,eACA,eACA,sBACA,4BACA,OACF,EACA,WAAY,CACV,eACA,WACA,WACA,eACA,eACA,qBACA,wBACF,CACF,CACF,CACF,EACA,CAAE,0BAA2B,EAAK,CACpC,EAOaC,EAAgB,CAAC,CAC5B,KAAAC,EAAO,KACP,SAAAC,EACA,gBAAAC,EAAkB,eAClB,gBAAAC,EAAkB,GAClB,GAAGC,CACL,IACEC,EAAA,cAACC,EAAA,KACCD,EAAA,cAACZ,EAAA,CAAoB,GAAID,CACtBa,EAAAA,EAAM,SAAS,IACdJ,EACCM,IACCA,GAAA,KAAA,OAAAA,EAAO,QAASC,GAAoBD,CACxC,EACAF,EAAA,cAACR,EAAA,CACC,KAAMG,EACN,aAAW,SACX,qBAAuBS,GAAU,CAC/B,MAAMC,EAAUD,EAAM,QAClBC,GAAA,KAAAA,OAAAA,EAAS,MAAOlB,GAClBiB,EAAM,eAAA,CAEV,EACC,GAAGL,CAAAA,EAEHD,GACCE,EAAA,cAACM,EAAA,CACC,GAAIC,EACJ,MAAOV,EACP,WAAY,GACZ,KAAK,KACL,MAAM,UACN,UAAU,gCAEVG,EAAAA,EAAA,cAACQ,EAAA,CAAK,GAAIC,CAAW,CAAA,CACvB,EAEDT,EAAM,SAAS,IACdJ,EACCM,IACCA,GAAA,KAAA,OAAAA,EAAO,QAASC,GAAoBD,CACxC,CACF,CACF,CACF"}
+{"version":3,"file":"DialogContent.js","names":[],"sources":["../../../src/components/dialog/DialogContent.tsx"],"sourcesContent":["import { Close as CloseIcon } from '@atom-learning/icons'\nimport { Close, Content, Overlay, Portal } from '@radix-ui/react-dialog'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\nimport { backdropOverlay } from '~/utilities/style/backdrop-overlay'\n\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\nimport { DialogBackground } from './DialogBackground'\n\nconst modalOverlayId = 'modal_overlay'\n\nconst StyledDialogOverlay = styled(Overlay, {\n  base: backdropOverlay\n})\n\nconst StyledDialogContent = styled(\n  Content,\n  {\n    base: [\n      // `transform: translate()` is required for `floating-ui` to\n      // correctly position elements within the Dialog component.\n      // we can't use the translate property directly\n      'transform-[translate(-50%,-50%)]',\n      'bg-white',\n      'shadow-xl',\n      '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    }\n  },\n  { enabledResponsiveVariants: true }\n)\n\ntype DialogContentProps = React.ComponentProps<typeof StyledDialogContent> & {\n  closeDialogText?: string\n  showCloseButton?: boolean\n}\n\nexport const DialogContent = ({\n  size = 'sm',\n  children,\n  closeDialogText = 'Close dialog',\n  showCloseButton = true,\n  ...remainingProps\n}: DialogContentProps) => (\n  <Portal>\n    <StyledDialogOverlay id={modalOverlayId}>\n      {React.Children.map(\n        children,\n        (child?: React.ReactElement) =>\n          child?.type === DialogBackground && child\n      )}\n      <StyledDialogContent\n        size={size}\n        aria-label=\"Dialog\"\n        onPointerDownOutside={(event) => {\n          const element = event.target as HTMLElement\n          if (element?.id !== modalOverlayId) {\n            event.preventDefault()\n          }\n        }}\n        {...remainingProps}\n      >\n        {showCloseButton && (\n          <ActionIcon\n            as={Close}\n            label={closeDialogText}\n            hasTooltip={false}\n            size=\"md\"\n            theme=\"neutral\"\n            className=\"absolute top-4 right-4 size-12\"\n          >\n            <Icon is={CloseIcon} />\n          </ActionIcon>\n        )}\n        {React.Children.map(\n          children,\n          (child?: React.ReactElement) =>\n            child?.type !== DialogBackground && child\n        )}\n      </StyledDialogContent>\n    </StyledDialogOverlay>\n  </Portal>\n)\n"],"mappings":";;;;;;;;;AAWA,IAAM,IAAiB,iBAEjB,IAAsB,EAAO,GAAS,EAC1C,MAAM,GACP,CAAC,EAEI,IAAsB,EAC1B,GACA;CACE,MAAM;EAIJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU,EACR,MAAM;EACJ,IAAI;GACF;GACA;GACA;GACA;GACA;GACA;GACA;GACD;EACD,IAAI;GACF;GACA;GACA;GACA;GACA;GACA;GACA;GACD;EACD,IAAI;GACF;GACA;GACA;GACA;GACA;GACA;GACA;GACD;EACD,IAAI;GACF;GACA;GACA;GACA;GACA;GACA;GACA;GACD;EACD,IAAI;GACF;GACA;GACA;GACA;GACA;GACA;GACA;GACD;EACD,YAAY;GACV;GACA;GACA;GACA;GACA;GACA;GACA;GACD;EACF,EACF;CACF,EACD,EAAE,2BAA2B,IAAM,CACpC,EAOY,KAAiB,EAC5B,UAAO,MACP,aACA,qBAAkB,gBAClB,qBAAkB,IAClB,GAAG,QAEH,kBAAA,cAAC,GAAA,MACC,kBAAA,cAAC,GAAD,EAAqB,IAAI,GAmCH,EAlCnB,EAAM,SAAS,IACd,IACC,MACC,GAAO,SAAS,KAAoB,EACvC,EACD,kBAAA,cAAC,GAAD;CACQ;CACN,cAAW;CACX,uBAAuB,MAAU;AAE/B,EADgB,EAAM,QACT,OAAO,KAClB,EAAM,gBAAgB;;CAG1B,GAAI;CAmBgB,EAjBnB,KACC,kBAAA,cAAC,GAAD;CACE,IAAI;CACJ,OAAO;CACP,YAAY;CACZ,MAAK;CACL,OAAM;CACN,WAAU;CAGC,EADX,kBAAA,cAAC,GAAD,EAAM,IAAI,GAAa,CAAA,CACZ,EAEd,EAAM,SAAS,IACd,IACC,MACC,GAAO,SAAS,KAAoB,EACvC,CACmB,CACF,CACf"}

package/dist/components/dialog/DialogFooter.js

@@ -1,2 +1,12 @@
-import{styled as o}from"../../styled.js";const t=o("footer",{base:["flex","justify-end","gap-3","pt-4"]});export{t as DialogFooter};
-//# sourceMappingURL=DialogFooter.js.map
+import { styled as e } from "../../styled.js";
+//#region src/components/dialog/DialogFooter.tsx
+var t = e("footer", { base: [
+	"flex",
+	"justify-end",
+	"gap-3",
+	"pt-4"
+] });
+//#endregion
+export { t as DialogFooter };
+
+//# sourceMappingURL=DialogFooter.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"DialogFooter.js","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"],"names":["DialogFooter","styled"],"mappings":"yCAEO,MAAMA,EAAeC,EAAO,SAAU,CAC3C,KAAM,CAAC,OAAQ,cAAe,QAAS,MAAM,CAC/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,IAAe,EAAO,UAAU,EAC3C,MAAM;CAAC;CAAQ;CAAe;CAAS;CAAO,EAC/C,CAAC"}