@atom-learning/components 6.6.0-beta.1 → 6.6.0-beta.2

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

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

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

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

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

@@ -1,18 +1,19 @@
-import e from "react";
+import React 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"
+var useSortByColumn = (defaultSort) => {
+	const [isSortable, setIsSortable] = React.useState(false);
+	const [sorting, setSorting] = React.useState(defaultSort ? [{
+		id: defaultSort.column,
+		desc: defaultSort.direction === "desc"
 	}] : []);
 	return {
-		isSortable: n,
-		setIsSortable: r,
-		sorting: i,
-		setSorting: a
+		isSortable,
+		setIsSortable,
+		sorting,
+		setSorting
 	};
 };
 //#endregion
-export { t as useSortByColumn };
+export { useSortByColumn };
 
 //# sourceMappingURL=useSorting.js.map

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

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

@@ -1,33 +1,35 @@
-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";
+import { useFieldError } from "../form/useFieldError.js";
+import { FieldWrapper } from "../field-wrapper/FieldWrapper.js";
+import { DateInput } from "../date-input/DateInput.js";
+import * as React$1 from "react";
+import { useFormContext } 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
+var DateField = ({ className, hideLabel, label, name, validation, prompt, description, appearance, ...remainingProps }) => {
+	const { register, trigger } = useFormContext();
+	const { error } = useFieldError(name);
+	const ref = validation ? register(validation) : register;
+	return /* @__PURE__ */ React$1.createElement(FieldWrapper, {
+		className,
+		description,
+		error,
+		fieldId: name,
+		hideLabel,
+		label,
+		prompt,
+		required: Boolean(validation?.required),
+		appearance
+	}, /* @__PURE__ */ React$1.createElement(DateInput, {
+		id: name,
+		name,
+		ref,
+		appearance,
+		...error && { state: "error" },
+		...remainingProps,
+		revalidate: trigger
 	}));
 };
-a.displayName = "DateField";
+DateField.displayName = "DateField";
 //#endregion
-export { a as DateField };
+export { DateField };
 
 //# sourceMappingURL=DateField.js.map

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'\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"}
+{"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,aAAa,EACxB,WACA,WACA,OACA,MACA,YACA,QACA,aACA,YACA,GAAG,qBACiB;CACpB,MAAM,EAAE,UAAU,YAAY,gBAAgB;CAC9C,MAAM,EAAE,UAAU,cAAc,KAAK;CACrC,MAAM,MAAM,aAAa,SAAS,WAAW,GAAG;AAEhD,QACE,wBAAA,cAAC,cAAD;EACa;EACE;EACN;EACP,SAAS;EACE;EACJ;EACC;EACR,UAAU,QAAQ,YAAY,SAAS;EAC3B;EAWC,EATb,wBAAA,cAAC,WAAD;EACE,IAAI;EACE;EACD;EACO;EACZ,GAAK,SAAS,EAAE,OAAO,SAAS;EAChC,GAAI;EACJ,YAAY;EACZ,CAAA,CACW;;AAInB,UAAU,cAAc"}

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

@@ -1,83 +1,102 @@
-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";
+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 { Popover } from "../popover/Popover.js";
+import { DEFAULT_LABELS } from "../calendar/constants.js";
+import { Calendar } from "../calendar/Calendar.js";
+import { DEFAULT_DATE_FORMAT } from "./constants.js";
+import * as React$1 from "react";
+import { CalendarEvent } from "@atom-learning/icons";
+import dayjs from "dayjs";
+import customParseFormat 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, {
+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", labels, revalidate, onChange, minDate, maxDate, ...remainingProps }, ref) => {
+	const [date, setDate] = React$1.useState(initialDate ? dayjs(initialDate).toDate() : void 0);
+	const [inputElRef, setInputElRef] = useCallbackRefState();
+	React$1.useImperativeHandle(ref, () => inputElRef);
+	const dateString = formatDateToString(date, dateFormat);
+	const handleInputChange = React$1.useCallback((event) => {
+		const newDateString = event.target.value;
+		const parsedInputDate = dayjs(newDateString, dateFormat);
+		const newDate = parsedInputDate.isValid() ? parsedInputDate.toDate() : void 0;
+		setDate(newDate);
+		onChange?.(newDate);
+	}, [dateFormat, onChange]);
+	const handleCalendarChange = React$1.useCallback((newDate) => {
+		setDate(newDate);
+		const mirrorChangeToInputElement = () => {
+			if (!inputElRef) return;
+			(Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value")?.set)?.call(inputElRef, formatDateToString(newDate, dateFormat));
+			const event = new Event("input", { bubbles: true });
+			inputElRef.dispatchEvent(event);
+		};
+		mirrorChangeToInputElement();
+	}, [dateFormat, inputElRef]);
+	const updatedLabels = {
+		...DEFAULT_LABELS,
+		...labels
+	};
+	const [calendarOpen, setCalendarOpen] = React$1.useState(false);
+	const refDateToday = React$1.useRef(null);
+	const refDateSelected = React$1.useRef(null);
+	const iconSize = React$1.useMemo(() => getFieldIconSize(size), [size]);
+	return /* @__PURE__ */ React$1.createElement("div", { className: "relative h-max" }, /* @__PURE__ */ React$1.createElement(Input, {
 		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,
+		disabled,
+		size,
+		...remainingProps,
+		onChange: handleInputChange,
+		ref: setInputElRef,
+		defaultValue: dateString
+	}), /* @__PURE__ */ React$1.createElement(Popover, {
+		modal: true,
+		open: calendarOpen,
+		onOpenChange: setCalendarOpen
+	}, /* @__PURE__ */ React$1.createElement(Popover.Trigger, { asChild: true }, /* @__PURE__ */ React$1.createElement(ActionIcon, {
+		disabled,
+		label: updatedLabels.open,
+		size: iconSize,
 		theme: "neutral",
-		hasTooltip: !1,
+		hasTooltip: false,
 		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, {
+	}, /* @__PURE__ */ React$1.createElement(Icon, { is: CalendarEvent }))), /* @__PURE__ */ React$1.createElement(Popover.Portal, null, /* @__PURE__ */ React$1.createElement(Popover.Content, {
 		side: "bottom",
 		align: "end",
-		showCloseButton: !1,
+		showCloseButton: false,
 		onOpenAutoFocus: (e) => {
-			e.preventDefault(), D ? R.current?.focus() : L.current?.focus();
+			e.preventDefault();
+			if (date) refDateSelected.current?.focus();
+			else refDateToday.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();
+	}, /* @__PURE__ */ React$1.createElement(Calendar, {
+		date: date || /* @__PURE__ */ new Date(),
+		selected: date,
+		onDateSelected: async (date) => {
+			setCalendarOpen(false);
+			await handleCalendarChange(date.date);
+			if (revalidate) revalidate();
 		},
-		setYear: async (e) => {
-			await N(e), x && x();
+		setYear: async (date) => {
+			await handleCalendarChange(date);
+			if (revalidate) revalidate();
 		},
-		minDate: C,
-		maxDate: w,
-		refDateToday: L,
-		refDateSelected: R,
-		firstDayOfWeek: h,
-		monthNames: _,
-		weekdayNames: v,
-		labels: P
+		minDate,
+		maxDate,
+		refDateToday,
+		refDateSelected,
+		firstDayOfWeek,
+		monthNames,
+		weekdayNames,
+		labels: updatedLabels
 	})))));
 });
-m.displayName = "DateInput";
+DateInput.displayName = "DateInput";
 //#endregion
-export { m as DateInput };
+export { DateInput };
 
 //# sourceMappingURL=DateInput.js.map

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'\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"}
+{"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,MAAM,OAAO,kBAAkB;AAY/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,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,wBAAA,cAAC,OAAD,EAAK,WAAU,kBA8DT,EA7DJ,wBAAA,cAAC,OAAD;EACE,MAAK;EACK;EACJ;EACN,GAAI;EACJ,UAAU;EACV,KAAK;EACL,cAAc;EACd,CAAA,EACF,wBAAA,cAAC,SAAD;EAAS,OAAA;EAAM,MAAM;EAAc,cAAc;EAmDvC,EAlDR,wBAAA,cAAC,QAAQ,SAAT,EAAiB,SAAA,MAWC,EAVhB,wBAAA,cAAC,YAAD;EACY;EACV,OAAO,cAAc;EACrB,MAAM;EACN,OAAM;EACN,YAAY;EACZ,WAAU;EAGC,EADX,wBAAA,cAAC,MAAD,EAAM,IAAI,eAAiB,CAAA,CAChB,CACG,EAClB,wBAAA,cAAC,QAAQ,QAAA,MACP,wBAAA,cAAC,QAAQ,SAAT;EACE,MAAK;EACL,OAAM;EACN,iBAAiB;EACjB,kBAAkB,MAAM;AACtB,KAAE,gBAAgB;AAClB,OAAI,KACF,iBAAgB,SAAS,OAAO;OAEhC,cAAa,SAAS,OAAO;;EAGjC,WAAU;EAuBM,EArBhB,wBAAA,cAAC,UAAD;EACE,MAAM,wBAAQ,IAAI,MAAM;EACxB,UAAU;EACV,gBAAgB,OAAO,SAAS;AAC9B,mBAAgB,MAAM;AACtB,SAAM,qBAAqB,KAAK,KAAK;AACrC,OAAI,WAAY,aAAY;;EAE9B,SAAS,OAAO,SAAS;AACvB,SAAM,qBAAqB,KAAK;AAChC,OAAI,WAAY,aAAY;;EAErB;EACA;EACK;EACG;EACD;EACJ;EACE;EACd,QAAQ;EACR,CAAA,CACc,CACH,CACT,CACN;EAGX;AAED,UAAU,cAAc"}

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

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

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

@@ -1 +1 @@
-{"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"}
+{"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,sBAAsB"}

package/dist/components/dialog/Dialog.js

@@ -1,22 +1,22 @@
-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";
+import { DialogBackground } from "./DialogBackground.js";
+import { DialogClose } from "./DialogClose.js";
+import { DialogContent } from "./DialogContent.js";
+import { DialogFooter } from "./DialogFooter.js";
+import { DialogHeading } from "./DialogHeading.js";
+import { Description, Root, Title, Trigger } 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
+var Dialog = Object.assign(Root, {
+	Background: DialogBackground,
+	Close: DialogClose,
+	Content: DialogContent,
+	Heading: DialogHeading,
+	Footer: DialogFooter,
+	Description,
+	Title,
+	Trigger
 });
-l.displayName = "Dialog";
+Dialog.displayName = "Dialog";
 //#endregion
-export { l as Dialog };
+export { Dialog };
 
 //# sourceMappingURL=Dialog.js.map

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 { 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"}
+{"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,SAAS,OAAO,OAAO,MAAM;CACxC,YAAY;CACZ,OAAO;CACP,SAAS;CACT,SAAS;CACT,QAAQ;CAEK;CACN;CACE;CACV,CAAC;AAEF,OAAO,cAAc"}

package/dist/components/dialog/DialogBackground.js

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

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,IAAmB,EAAO,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,WAAW,EAC/B,CAAC"}

package/dist/components/dialog/DialogClose.js

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

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

@@ -1 +1 @@
-{"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"}
+{"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,cAAc"}

package/dist/components/dialog/DialogContent.js

@@ -1,13 +1,15 @@
-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";
+import { styled } from "../../styled.js";
+import { Icon } from "../icon/Icon.js";
+import { ActionIcon } from "../action-icon/ActionIcon.js";
+import { DialogBackground } from "./DialogBackground.js";
+import { backdropOverlay } from "../../utilities/style/backdrop-overlay.js";
+import * as React$1 from "react";
+import { Close } from "@atom-learning/icons";
+import { Close as Close$1, Content, Overlay, Portal } from "@radix-ui/react-dialog";
 //#region src/components/dialog/DialogContent.tsx
-var d = "modal_overlay", f = e(l, { base: i }), p = e(c, {
+var modalOverlayId = "modal_overlay";
+var StyledDialogOverlay = styled(Overlay, { base: backdropOverlay });
+var StyledDialogContent = styled(Content, {
 	base: [
 		"transform-[translate(-50%,-50%)]",
 		"bg-white",
@@ -83,22 +85,23 @@ var d = "modal_overlay", f = e(l, { base: i }), p = e(c, {
 			"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,
+}, { enabledResponsiveVariants: true });
+var DialogContent = ({ size = "sm", children, closeDialogText = "Close dialog", showCloseButton = true, ...remainingProps }) => /* @__PURE__ */ React$1.createElement(Portal, null, /* @__PURE__ */ React$1.createElement(StyledDialogOverlay, { id: modalOverlayId }, React$1.Children.map(children, (child) => child?.type === DialogBackground && child), /* @__PURE__ */ React$1.createElement(StyledDialogContent, {
+	size,
 	"aria-label": "Dialog",
-	onPointerDownOutside: (e) => {
-		e.target?.id !== d && e.preventDefault();
+	onPointerDownOutside: (event) => {
+		if (event.target?.id !== modalOverlayId) event.preventDefault();
 	},
-	...m
-}, l && /* @__PURE__ */ a.createElement(n, {
-	as: s,
-	label: c,
-	hasTooltip: !1,
+	...remainingProps
+}, showCloseButton && /* @__PURE__ */ React$1.createElement(ActionIcon, {
+	as: Close$1,
+	label: closeDialogText,
+	hasTooltip: false,
 	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))));
+}, /* @__PURE__ */ React$1.createElement(Icon, { is: Close })), React$1.Children.map(children, (child) => child?.type !== DialogBackground && child))));
 //#endregion
-export { m as DialogContent };
+export { DialogContent };
 
 //# sourceMappingURL=DialogContent.js.map

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    }\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;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"}
+{"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    }\n  },\n  { enabledResponsiveVariants: true }\n)\n\ntype DialogContentProps = React.ComponentProps<typeof StyledDialogContent> & {\n  closeDialogText?: string\n  showCloseButton?: boolean\n}\n\nexport const DialogContent = ({\n  size = 'sm',\n  children,\n  closeDialogText = 'Close dialog',\n  showCloseButton = true,\n  ...remainingProps\n}: DialogContentProps) => (\n  <Portal>\n    <StyledDialogOverlay id={modalOverlayId}>\n      {React.Children.map(\n        children,\n        (child?: React.ReactElement) =>\n          child?.type === DialogBackground && child\n      )}\n      <StyledDialogContent\n        size={size}\n        aria-label=\"Dialog\"\n        onPointerDownOutside={(event) => {\n          const element = event.target as HTMLElement\n          if (element?.id !== modalOverlayId) {\n            event.preventDefault()\n          }\n        }}\n        {...remainingProps}\n      >\n        {showCloseButton && (\n          <ActionIcon\n            as={Close}\n            label={closeDialogText}\n            hasTooltip={false}\n            size=\"md\"\n            theme=\"neutral\"\n            className=\"absolute top-4 right-4 size-12\"\n          >\n            <Icon is={CloseIcon} />\n          </ActionIcon>\n        )}\n        {React.Children.map(\n          children,\n          (child?: React.ReactElement) =>\n            child?.type !== DialogBackground && child\n        )}\n      </StyledDialogContent>\n    </StyledDialogOverlay>\n  </Portal>\n)\n"],"mappings":";;;;;;;;;AAWA,IAAM,iBAAiB;AAEvB,IAAM,sBAAsB,OAAO,SAAS,EAC1C,MAAM,iBACP,CAAC;AAEF,IAAM,sBAAsB,OAC1B,SACA;CACE,MAAM;EAIJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU,EACR,MAAM;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,MAAM,CACpC;AAOD,IAAa,iBAAiB,EAC5B,OAAO,MACP,UACA,kBAAkB,gBAClB,kBAAkB,MAClB,GAAG,qBAEH,wBAAA,cAAC,QAAA,MACC,wBAAA,cAAC,qBAAD,EAAqB,IAAI,gBAmCH,EAlCnB,QAAM,SAAS,IACd,WACC,UACC,OAAO,SAAS,oBAAoB,MACvC,EACD,wBAAA,cAAC,qBAAD;CACQ;CACN,cAAW;CACX,uBAAuB,UAAU;AAE/B,MADgB,MAAM,QACT,OAAO,eAClB,OAAM,gBAAgB;;CAG1B,GAAI;CAmBgB,EAjBnB,mBACC,wBAAA,cAAC,YAAD;CACE,IAAI;CACJ,OAAO;CACP,YAAY;CACZ,MAAK;CACL,OAAM;CACN,WAAU;CAGC,EADX,wBAAA,cAAC,MAAD,EAAM,IAAI,OAAa,CAAA,CACZ,EAEd,QAAM,SAAS,IACd,WACC,UACC,OAAO,SAAS,oBAAoB,MACvC,CACmB,CACF,CACf"}