@atom-learning/components 9.0.0 → 10.0.1

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 type { TcolorScheme } from '../../../experiments/color-scheme/ColorScheme'\nimport { styled } from '../../../styled'\nimport { Pagination as PaginationComponent } from '../../pagination/Pagination'\nimport { Text } from '../../text/Text'\nimport { useDataTable } from '../DataTable.context'\nimport { AsyncDataState } from '../DataTable.types'\n\nconst StyledNav = styled('nav', {\n  base: [\n    'flex',\n    'flex-col',\n    'justify-between',\n    'items-center',\n    'tabular-nums',\n    'flex-wrap',\n    'w-full',\n    'gap-4',\n    'mt-4',\n    'md:flex-row'\n  ]\n})\n\ntype PaginationProps = React.ComponentProps<typeof StyledNav> & {\n  colorScheme?: TcolorScheme\n}\n\n/** Applies pagination to parent DataTableProvider and renders UI to switch pages etc */\nexport const Pagination = ({ colorScheme, ...rest }: PaginationProps) => {\n  const {\n    applyPagination,\n    getState,\n    getExpandedRowModel,\n    getRowModel,\n    setPageIndex,\n    getTotalRows,\n    getPageCount,\n    asyncDataState,\n    hasAsyncData\n  } = useDataTable()\n\n  React.useEffect(() => {\n    applyPagination()\n  }, [applyPagination])\n\n  const { pagination: paginationState } = getState()\n  const isPending = asyncDataState === AsyncDataState.PENDING\n  const isEmpty = !isPending && getTotalRows() === 0\n  // Show pagination only if total pages are more than 1\n  const showPagination = hasAsyncData\n    ? getPageCount() > 1\n    : getExpandedRowModel().rows.length / paginationState.pageSize > 1\n\n  if (isEmpty || !showPagination) return null\n  const totalVisibleRows = getExpandedRowModel().rows.length\n\n  const start =\n    totalVisibleRows === 0\n      ? 0\n      : paginationState.pageIndex * paginationState.pageSize + 1\n\n  const asyncRowCount = getRowModel().rows.length\n  const end = hasAsyncData\n    ? asyncRowCount === 0\n      ? start\n      : start + asyncRowCount - 1\n    : Math.min(start + paginationState.pageSize - 1, totalVisibleRows)\n\n  // indexing for the pagination component is 1 based\n  const setPage = (index: number) => {\n    setPageIndex(index - 1)\n  }\n\n  const pageCount = hasAsyncData\n    ? getPageCount()\n    : Math.max(1, Math.ceil(totalVisibleRows / paginationState.pageSize))\n\n  return (\n    <StyledNav {...rest}>\n      <Text size=\"sm\">{`${start} - ${end} of ${\n        hasAsyncData ? getTotalRows() : totalVisibleRows\n      } items`}</Text>\n      <PaginationComponent\n        colorScheme={colorScheme}\n        selectedPage={paginationState.pageIndex + 1}\n        pagesCount={pageCount}\n        onSelectedPageChange={setPage}\n      />\n    </StyledNav>\n  )\n}\n\nPagination.displayName = 'Pagination'\n"],"mappings":";;;;;;;;AASA,IAAM,YAAY,OAAO,OAAO,EAC9B,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,EACF,CAAC;;AAOD,IAAa,cAAc,EAAE,aAAa,GAAG,WAA4B;CACvE,MAAM,EACJ,iBACA,UACA,qBACA,aACA,cACA,cACA,cACA,gBACA,iBACE,aAAa;CAEjB,QAAM,gBAAgB;EACpB,gBAAgB;CAClB,GAAG,CAAC,eAAe,CAAC;CAEpB,MAAM,EAAE,YAAY,oBAAoB,SAAS;CAEjD,MAAM,UAAU,EADE,mBAAmB,eAAe,YACtB,aAAa,MAAM;CAEjD,MAAM,iBAAiB,eACnB,aAAa,IAAI,IACjB,oBAAoB,CAAC,CAAC,KAAK,SAAS,gBAAgB,WAAW;CAEnE,IAAI,WAAW,CAAC,gBAAgB,OAAO;CACvC,MAAM,mBAAmB,oBAAoB,CAAC,CAAC,KAAK;CAEpD,MAAM,QACJ,qBAAqB,IACjB,IACA,gBAAgB,YAAY,gBAAgB,WAAW;CAE7D,MAAM,gBAAgB,YAAY,CAAC,CAAC,KAAK;CACzC,MAAM,MAAM,eACR,kBAAkB,IAChB,QACA,QAAQ,gBAAgB,IAC1B,KAAK,IAAI,QAAQ,gBAAgB,WAAW,GAAG,gBAAgB;CAGnE,MAAM,WAAW,UAAkB;EACjC,aAAa,QAAQ,CAAC;CACxB;CAEA,MAAM,YAAY,eACd,aAAa,IACb,KAAK,IAAI,GAAG,KAAK,KAAK,mBAAmB,gBAAgB,QAAQ,CAAC;CAEtE,OACE,qBAAC,WAAD;EAAW,GAAI;YAAf,CACE,oBAAC,MAAD;GAAM,MAAK;aAAM,GAAG,MAAM,KAAK,IAAI,MACjC,eAAe,aAAa,IAAI,iBACjC;EAAc,CAAA,GACf,oBAAC,cAAD;GACe;GACb,cAAc,gBAAgB,YAAY;GAC1C,YAAY;GACZ,sBAAsB;EACvB,CAAA,CACQ;;AAEf;AAEA,WAAW,cAAc"}
+{"version":3,"file":"Pagination.js","names":[],"sources":["../../../../src/components/data-table/pagination/Pagination.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport type { TcolorScheme } from '../../../experiments/color-scheme/ColorScheme'\nimport { styled } from '../../../styled'\nimport { Pagination as PaginationComponent } from '../../pagination/Pagination'\nimport { Text } from '../../text/Text'\nimport { useDataTable } from '../DataTable.context'\nimport { AsyncDataState } from '../DataTable.types'\n\nconst StyledNav = styled('nav', {\n  base: [\n    'flex',\n    'flex-col',\n    'justify-between',\n    'items-center',\n    'tabular-nums',\n    'flex-wrap',\n    'w-full',\n    'gap-4',\n    'mt-4',\n    'md:flex-row'\n  ]\n})\n\ntype PaginationProps = React.ComponentProps<typeof StyledNav> & {\n  colorScheme?: TcolorScheme\n}\n\n/** Applies pagination to parent DataTableProvider and renders UI to switch pages etc */\nexport const Pagination = ({ colorScheme, ...rest }: PaginationProps) => {\n  const {\n    applyPagination,\n    removePagination,\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    return () => removePagination()\n  }, [applyPagination, removePagination])\n\n  const { pagination: paginationState } = getState()\n  const isPending = asyncDataState === AsyncDataState.PENDING\n  const isEmpty = !isPending && getTotalRows() === 0\n  // Show pagination only if total pages are more than 1\n  const showPagination = hasAsyncData\n    ? getPageCount() > 1\n    : getExpandedRowModel().rows.length / paginationState.pageSize > 1\n\n  if (isEmpty || !showPagination) return null\n  const totalVisibleRows = getExpandedRowModel().rows.length\n\n  const start =\n    totalVisibleRows === 0\n      ? 0\n      : paginationState.pageIndex * paginationState.pageSize + 1\n\n  const asyncRowCount = getRowModel().rows.length\n  const end = hasAsyncData\n    ? asyncRowCount === 0\n      ? start\n      : start + asyncRowCount - 1\n    : Math.min(start + paginationState.pageSize - 1, totalVisibleRows)\n\n  // indexing for the pagination component is 1 based\n  const setPage = (index: number) => {\n    setPageIndex(index - 1)\n  }\n\n  const pageCount = hasAsyncData\n    ? getPageCount()\n    : Math.max(1, Math.ceil(totalVisibleRows / paginationState.pageSize))\n\n  return (\n    <StyledNav {...rest}>\n      <Text size=\"sm\">{`${start} - ${end} of ${\n        hasAsyncData ? getTotalRows() : totalVisibleRows\n      } items`}</Text>\n      <PaginationComponent\n        colorScheme={colorScheme}\n        selectedPage={paginationState.pageIndex + 1}\n        pagesCount={pageCount}\n        onSelectedPageChange={setPage}\n      />\n    </StyledNav>\n  )\n}\n\nPagination.displayName = 'Pagination'\n"],"mappings":";;;;;;;;AASA,IAAM,YAAY,OAAO,OAAO,EAC9B,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,EACF,CAAC;;AAOD,IAAa,cAAc,EAAE,aAAa,GAAG,WAA4B;CACvE,MAAM,EACJ,iBACA,kBACA,UACA,qBACA,aACA,cACA,cACA,cACA,gBACA,iBACE,aAAa;CAEjB,QAAM,gBAAgB;EACpB,gBAAgB;EAChB,aAAa,iBAAiB;CAChC,GAAG,CAAC,iBAAiB,gBAAgB,CAAC;CAEtC,MAAM,EAAE,YAAY,oBAAoB,SAAS;CAEjD,MAAM,UAAU,EADE,mBAAmB,eAAe,YACtB,aAAa,MAAM;CAEjD,MAAM,iBAAiB,eACnB,aAAa,IAAI,IACjB,oBAAoB,CAAC,CAAC,KAAK,SAAS,gBAAgB,WAAW;CAEnE,IAAI,WAAW,CAAC,gBAAgB,OAAO;CACvC,MAAM,mBAAmB,oBAAoB,CAAC,CAAC,KAAK;CAEpD,MAAM,QACJ,qBAAqB,IACjB,IACA,gBAAgB,YAAY,gBAAgB,WAAW;CAE7D,MAAM,gBAAgB,YAAY,CAAC,CAAC,KAAK;CACzC,MAAM,MAAM,eACR,kBAAkB,IAChB,QACA,QAAQ,gBAAgB,IAC1B,KAAK,IAAI,QAAQ,gBAAgB,WAAW,GAAG,gBAAgB;CAGnE,MAAM,WAAW,UAAkB;EACjC,aAAa,QAAQ,CAAC;CACxB;CAEA,MAAM,YAAY,eACd,aAAa,IACb,KAAK,IAAI,GAAG,KAAK,KAAK,mBAAmB,gBAAgB,QAAQ,CAAC;CAEtE,OACE,qBAAC,WAAD;EAAW,GAAI;YAAf,CACE,oBAAC,MAAD;GAAM,MAAK;aAAM,GAAG,MAAM,KAAK,IAAI,MACjC,eAAe,aAAa,IAAI,iBACjC;EAAc,CAAA,GACf,oBAAC,cAAD;GACe;GACb,cAAc,gBAAgB,YAAY;GAC1C,YAAY;GACZ,sBAAsB;EACvB,CAAA,CACQ;;AAEf;AAEA,WAAW,cAAc"}

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

@@ -5,4 +5,5 @@ export declare const usePagination: (initialPaginationState: Partial<PaginationS
     paginationState: PaginationState | undefined;
     setPaginationState: React.Dispatch<React.SetStateAction<PaginationState | undefined>>;
     applyPagination: () => void;
+    removePagination: () => void;
 };

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

@@ -10,12 +10,17 @@ var usePagination = (initialPaginationState) => {
 		...defaultPaginationState,
 		...initialPaginationState || {}
 	});
+	const applyPagination = React$1.useCallback(() => {
+		setIsPaginated(true);
+	}, []);
+	const wasInitiallyPaginated = React$1.useRef(!!initialPaginationState);
 	return {
 		isPaginated,
 		paginationState,
 		setPaginationState,
-		applyPagination: React$1.useCallback(() => {
-			setIsPaginated(true);
+		applyPagination,
+		removePagination: React$1.useCallback(() => {
+			setIsPaginated(wasInitiallyPaginated.current);
 		}, [])
 	};
 };

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 * as React from 'react'\n\nconst defaultPaginationState: PaginationState = { pageIndex: 0, pageSize: 10 }\nexport const usePagination = (\n  // Initial pagination may be partial (e.g. just `pageSize`); defaults below\n  // fill the rest, so the working `paginationState` stays a full PaginationState.\n  initialPaginationState: Partial<PaginationState> | undefined\n) => {\n  const [isPaginated, setIsPaginated] = React.useState<boolean>(\n    !!initialPaginationState\n  )\n\n  const [paginationState, setPaginationState] = React.useState<\n    PaginationState | undefined\n  >({\n    ...defaultPaginationState,\n    ...(initialPaginationState || {})\n  })\n\n  const applyPagination = React.useCallback(() => {\n    setIsPaginated(true)\n  }, [])\n\n  return {\n    isPaginated,\n    paginationState,\n    setPaginationState,\n    applyPagination\n  }\n}\n"],"mappings":";;AAGA,IAAM,yBAA0C;CAAE,WAAW;CAAG,UAAU;AAAG;AAC7E,IAAa,iBAGX,2BACG;CACH,MAAM,CAAC,aAAa,kBAAkB,QAAM,SAC1C,CAAC,CAAC,sBACJ;CAEA,MAAM,CAAC,iBAAiB,sBAAsB,QAAM,SAElD;EACA,GAAG;EACH,GAAI,0BAA0B,CAAC;CACjC,CAAC;CAMD,OAAO;EACL;EACA;EACA;EACA,iBARsB,QAAM,kBAAkB;GAC9C,eAAe,IAAI;EACrB,GAAG,CAAC,CAMF;CACF;AACF"}
+{"version":3,"file":"usePagination.js","names":[],"sources":["../../../src/components/data-table/usePagination.ts"],"sourcesContent":["import type { PaginationState } from '@tanstack/react-table'\nimport * as React from 'react'\n\nconst defaultPaginationState: PaginationState = { pageIndex: 0, pageSize: 10 }\nexport const usePagination = (\n  // Initial pagination may be partial (e.g. just `pageSize`); defaults below\n  // fill the rest, so the working `paginationState` stays a full PaginationState.\n  initialPaginationState: Partial<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  // Lets <Pagination> undo applyPagination when it unmounts, restoring\n  // whatever the provider was configured with initially.\n  const wasInitiallyPaginated = React.useRef(!!initialPaginationState)\n  const removePagination = React.useCallback(() => {\n    setIsPaginated(wasInitiallyPaginated.current)\n  }, [])\n\n  return {\n    isPaginated,\n    paginationState,\n    setPaginationState,\n    applyPagination,\n    removePagination\n  }\n}\n"],"mappings":";;AAGA,IAAM,yBAA0C;CAAE,WAAW;CAAG,UAAU;AAAG;AAC7E,IAAa,iBAGX,2BACG;CACH,MAAM,CAAC,aAAa,kBAAkB,QAAM,SAC1C,CAAC,CAAC,sBACJ;CAEA,MAAM,CAAC,iBAAiB,sBAAsB,QAAM,SAElD;EACA,GAAG;EACH,GAAI,0BAA0B,CAAC;CACjC,CAAC;CAED,MAAM,kBAAkB,QAAM,kBAAkB;EAC9C,eAAe,IAAI;CACrB,GAAG,CAAC,CAAC;CAIL,MAAM,wBAAwB,QAAM,OAAO,CAAC,CAAC,sBAAsB;CAKnE,OAAO;EACL;EACA;EACA;EACA;EACA,kBATuB,QAAM,kBAAkB;GAC/C,eAAe,sBAAsB,OAAO;EAC9C,GAAG,CAAC,CAOF;CACF;AACF"}

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

@@ -8,6 +8,7 @@ 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 { useComposedRefs } from "@radix-ui/react-compose-refs";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { CalendarEvent } from "@atom-learning/icons";
 import dayjs from "dayjs";
@@ -18,7 +19,7 @@ var formatDateToString = (date, dateFormat = DEFAULT_DATE_FORMAT) => date ? dayj
 var DateInput = ({ ref, initialDate, dateFormat = DEFAULT_DATE_FORMAT, firstDayOfWeek = 1, disabled, monthNames, weekdayNames, size = "md", appearance, theme, labels, revalidate, onChange, minDate, maxDate, ...rest }) => {
 	const [date, setDate] = React$1.useState(initialDate ? dayjs(initialDate).toDate() : void 0);
 	const [inputElRef, setInputElRef] = useCallbackRefState();
-	React$1.useImperativeHandle(ref, () => inputElRef);
+	const composedInputRef = useComposedRefs(ref, setInputElRef);
 	const dateString = formatDateToString(date, dateFormat);
 	const handleInputChange = React$1.useCallback((event) => {
 		const newDateString = event.target.value;
@@ -44,7 +45,7 @@ var DateInput = ({ ref, initialDate, dateFormat = DEFAULT_DATE_FORMAT, firstDayO
 	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]);
+	const iconSize = getFieldIconSize(size);
 	return /* @__PURE__ */ jsxs("div", {
 		className: "relative h-max",
 		children: [/* @__PURE__ */ jsx(Input, {
@@ -55,7 +56,7 @@ var DateInput = ({ ref, initialDate, dateFormat = DEFAULT_DATE_FORMAT, firstDayO
 			theme,
 			...rest,
 			onChange: handleInputChange,
-			ref: setInputElRef,
+			ref: composedInputRef,
 			defaultValue: dateString
 		}), /* @__PURE__ */ jsxs(Popover, {
 			modal: true,

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

@@ -1 +1 @@
-{"version":3,"file":"DateInput.js","names":[],"sources":["../../../src/components/date-input/DateInput.tsx"],"sourcesContent":["import { CalendarEvent } from '@atom-learning/icons'\nimport dayjs from 'dayjs'\nimport customParseFormat from 'dayjs/plugin/customParseFormat.js'\nimport type { Props as DayzedInterface } from 'dayzed'\nimport * as React from 'react'\n\nimport { useCallbackRefState } from '../../utilities/hooks/useCallbackRef'\nimport { getFieldIconSize } from '../../utilities/style/get-icon-size'\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Calendar, type CalendarTranslationProps } from '../calendar/Calendar'\nimport { DEFAULT_LABELS } from '../calendar/constants'\nimport { Icon } from '../icon/Icon'\nimport { Input } from '../input/Input'\nimport { Popover } from '../popover/Popover'\nimport { DEFAULT_DATE_FORMAT } from './constants'\n\ndayjs.extend(customParseFormat)\n\nexport type DateInputProps = Omit<DayzedInterface, 'onDateSelected'> &\n  CalendarTranslationProps & {\n    initialDate?: Date\n    dateFormat?: string\n    disabled?: boolean\n    size?: 'sm' | 'md' | 'lg'\n    appearance?: 'standard' | 'modern'\n    theme?: 'white' | 'grey'\n    revalidate?: () => Promise<boolean>\n    onChange?: (value?: Date) => void\n    ref?: React.Ref<HTMLInputElement>\n  }\n\nconst formatDateToString = (date?: Date, dateFormat = DEFAULT_DATE_FORMAT) =>\n  date ? dayjs(date).format(dateFormat) : ''\n\nexport const DateInput = ({\n  ref,\n  initialDate,\n  dateFormat = DEFAULT_DATE_FORMAT,\n  firstDayOfWeek = 1,\n  disabled,\n  monthNames,\n  weekdayNames,\n  size = 'md',\n  appearance,\n  theme,\n  labels,\n  revalidate,\n  onChange,\n  minDate,\n  maxDate,\n  ...rest\n}: DateInputProps) => {\n  const [date, setDate] = React.useState(\n    initialDate ? dayjs(initialDate).toDate() : undefined\n  )\n\n  const [inputElRef, setInputElRef] = useCallbackRefState()\n  React.useImperativeHandle(ref, () => inputElRef as HTMLInputElement)\n\n  const dateString = formatDateToString(date, dateFormat)\n\n  const handleInputChange = React.useCallback(\n    (event) => {\n      const newDateString = event.target.value\n      const parsedInputDate = dayjs(newDateString, dateFormat)\n      const newDate = parsedInputDate.isValid()\n        ? parsedInputDate.toDate()\n        : undefined\n      setDate(newDate)\n      onChange?.(newDate)\n    },\n    [dateFormat, onChange]\n  )\n\n  const handleCalendarChange = React.useCallback(\n    (newDate) => {\n      setDate(newDate)\n\n      const mirrorChangeToInputElement = () => {\n        if (!inputElRef) return\n\n        // Call the `set` function on the input value directly to mirror the change.\n        // Props to: https://stackoverflow.com/a/46012210\n        const nativeInputValueSetter = Object.getOwnPropertyDescriptor(\n          window.HTMLInputElement.prototype,\n          'value'\n        )?.set\n        nativeInputValueSetter?.call(\n          inputElRef,\n          formatDateToString(newDate, dateFormat)\n        )\n        const event = new Event('input', { bubbles: true })\n        inputElRef.dispatchEvent(event)\n      }\n      mirrorChangeToInputElement()\n    },\n    [dateFormat, inputElRef]\n  )\n\n  const updatedLabels = {\n    ...DEFAULT_LABELS,\n    ...labels\n  }\n\n  const [calendarOpen, setCalendarOpen] = React.useState(false)\n\n  const refDateToday = React.useRef<HTMLButtonElement>(null)\n  const refDateSelected = React.useRef<HTMLButtonElement>(null)\n\n  const iconSize = React.useMemo(() => getFieldIconSize(size), [size])\n\n  return (\n    <div className=\"relative h-max\">\n      <Input\n        name=\"date\"\n        disabled={disabled}\n        size={size}\n        appearance={appearance}\n        theme={theme}\n        {...(rest as React.ComponentProps<typeof Input>)}\n        onChange={handleInputChange}\n        ref={setInputElRef}\n        defaultValue={dateString}\n      />\n      <Popover modal open={calendarOpen} onOpenChange={setCalendarOpen}>\n        <Popover.Trigger asChild>\n          <ActionIcon\n            disabled={disabled}\n            label={updatedLabels.open}\n            size={iconSize}\n            theme=\"neutral\"\n            hasTooltip={false}\n            className=\"absolute top-1/2 right-0 -translate-y-1/2\"\n          >\n            <Icon is={CalendarEvent} />\n          </ActionIcon>\n        </Popover.Trigger>\n        <Popover.Portal>\n          <Popover.Content\n            side=\"bottom\"\n            align=\"end\"\n            showCloseButton={false}\n            onOpenAutoFocus={(e) => {\n              e.preventDefault()\n              if (date) {\n                refDateSelected.current?.focus()\n              } else {\n                refDateToday.current?.focus()\n              }\n            }}\n            className=\"z-1147483646 pr-6\"\n          >\n            <Calendar\n              date={date || new Date()}\n              selected={date}\n              onDateSelected={async (date) => {\n                setCalendarOpen(false)\n                await handleCalendarChange(date.date)\n                if (revalidate) revalidate()\n              }}\n              setYear={async (date) => {\n                await handleCalendarChange(date)\n                if (revalidate) revalidate()\n              }}\n              minDate={minDate}\n              maxDate={maxDate}\n              refDateToday={refDateToday}\n              refDateSelected={refDateSelected}\n              firstDayOfWeek={firstDayOfWeek}\n              monthNames={monthNames}\n              weekdayNames={weekdayNames}\n              labels={updatedLabels}\n            />\n          </Popover.Content>\n        </Popover.Portal>\n      </Popover>\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;AAgBA,MAAM,OAAO,iBAAiB;AAe9B,IAAM,sBAAsB,MAAa,aAAa,wBACpD,OAAO,MAAM,IAAI,CAAC,CAAC,OAAO,UAAU,IAAI;AAE1C,IAAa,aAAa,EACxB,KACA,aACA,aAAa,qBACb,iBAAiB,GACjB,UACA,YACA,cACA,OAAO,MACP,YACA,OACA,QACA,YACA,UACA,SACA,SACA,GAAG,WACiB;CACpB,MAAM,CAAC,MAAM,WAAW,QAAM,SAC5B,cAAc,MAAM,WAAW,CAAC,CAAC,OAAO,IAAI,KAAA,CAC9C;CAEA,MAAM,CAAC,YAAY,iBAAiB,oBAAoB;CACxD,QAAM,oBAAoB,WAAW,UAA8B;CAEnE,MAAM,aAAa,mBAAmB,MAAM,UAAU;CAEtD,MAAM,oBAAoB,QAAM,aAC7B,UAAU;EACT,MAAM,gBAAgB,MAAM,OAAO;EACnC,MAAM,kBAAkB,MAAM,eAAe,UAAU;EACvD,MAAM,UAAU,gBAAgB,QAAQ,IACpC,gBAAgB,OAAO,IACvB,KAAA;EACJ,QAAQ,OAAO;EACf,WAAW,OAAO;CACpB,GACA,CAAC,YAAY,QAAQ,CACvB;CAEA,MAAM,uBAAuB,QAAM,aAChC,YAAY;EACX,QAAQ,OAAO;EAEf,MAAM,mCAAmC;GACvC,IAAI,CAAC,YAAY;GAQjB,CAJ+B,OAAO,yBACpC,OAAO,iBAAiB,WACxB,OACF,CAAC,EAAE,IAAA,EACqB,KACtB,YACA,mBAAmB,SAAS,UAAU,CACxC;GACA,MAAM,QAAQ,IAAI,MAAM,SAAS,EAAE,SAAS,KAAK,CAAC;GAClD,WAAW,cAAc,KAAK;EAChC;EACA,2BAA2B;CAC7B,GACA,CAAC,YAAY,UAAU,CACzB;CAEA,MAAM,gBAAgB;EACpB,GAAG;EACH,GAAG;CACL;CAEA,MAAM,CAAC,cAAc,mBAAmB,QAAM,SAAS,KAAK;CAE5D,MAAM,eAAe,QAAM,OAA0B,IAAI;CACzD,MAAM,kBAAkB,QAAM,OAA0B,IAAI;CAE5D,MAAM,WAAW,QAAM,cAAc,iBAAiB,IAAI,GAAG,CAAC,IAAI,CAAC;CAEnE,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACE,oBAAC,OAAD;GACE,MAAK;GACK;GACJ;GACM;GACL;GACP,GAAK;GACL,UAAU;GACV,KAAK;GACL,cAAc;EACf,CAAA,GACD,qBAAC,SAAD;GAAS,OAAA;GAAM,MAAM;GAAc,cAAc;aAAjD,CACE,oBAAC,QAAQ,SAAT;IAAiB,SAAA;cACf,oBAAC,YAAD;KACY;KACV,OAAO,cAAc;KACrB,MAAM;KACN,OAAM;KACN,YAAY;KACZ,WAAU;eAEV,oBAAC,MAAD,EAAM,IAAI,cAAgB,CAAA;IAChB,CAAA;GACG,CAAA,GACjB,oBAAC,QAAQ,QAAT,EAAA,UACE,oBAAC,QAAQ,SAAT;IACE,MAAK;IACL,OAAM;IACN,iBAAiB;IACjB,kBAAkB,MAAM;KACtB,EAAE,eAAe;KACjB,IAAI,MACF,gBAAgB,SAAS,MAAM;UAE/B,aAAa,SAAS,MAAM;IAEhC;IACA,WAAU;cAEV,oBAAC,UAAD;KACE,MAAM,wBAAQ,IAAI,KAAK;KACvB,UAAU;KACV,gBAAgB,OAAO,SAAS;MAC9B,gBAAgB,KAAK;MACrB,MAAM,qBAAqB,KAAK,IAAI;MACpC,IAAI,YAAY,WAAW;KAC7B;KACA,SAAS,OAAO,SAAS;MACvB,MAAM,qBAAqB,IAAI;MAC/B,IAAI,YAAY,WAAW;KAC7B;KACS;KACA;KACK;KACG;KACD;KACJ;KACE;KACd,QAAQ;IACT,CAAA;GACc,CAAA,EACH,CAAA,CACT;IACN;;AAET"}
+{"version":3,"file":"DateInput.js","names":[],"sources":["../../../src/components/date-input/DateInput.tsx"],"sourcesContent":["import { CalendarEvent } from '@atom-learning/icons'\nimport { useComposedRefs } from '@radix-ui/react-compose-refs'\nimport dayjs from 'dayjs'\nimport customParseFormat from 'dayjs/plugin/customParseFormat.js'\nimport type { Props as DayzedInterface } from 'dayzed'\nimport * as React from 'react'\n\nimport { useCallbackRefState } from '../../utilities/hooks/useCallbackRef'\nimport { getFieldIconSize } from '../../utilities/style/get-icon-size'\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Calendar, type CalendarTranslationProps } from '../calendar/Calendar'\nimport { DEFAULT_LABELS } from '../calendar/constants'\nimport { Icon } from '../icon/Icon'\nimport { Input } from '../input/Input'\nimport { Popover } from '../popover/Popover'\nimport { DEFAULT_DATE_FORMAT } from './constants'\n\ndayjs.extend(customParseFormat)\n\nexport type DateInputProps = Omit<DayzedInterface, 'onDateSelected'> &\n  CalendarTranslationProps & {\n    initialDate?: Date\n    dateFormat?: string\n    disabled?: boolean\n    size?: 'sm' | 'md' | 'lg'\n    appearance?: 'standard' | 'modern'\n    theme?: 'white' | 'grey'\n    revalidate?: () => Promise<boolean>\n    onChange?: (value?: Date) => void\n    ref?: React.Ref<HTMLInputElement>\n  }\n\nconst formatDateToString = (date?: Date, dateFormat = DEFAULT_DATE_FORMAT) =>\n  date ? dayjs(date).format(dateFormat) : ''\n\nexport const DateInput = ({\n  ref,\n  initialDate,\n  dateFormat = DEFAULT_DATE_FORMAT,\n  firstDayOfWeek = 1,\n  disabled,\n  monthNames,\n  weekdayNames,\n  size = 'md',\n  appearance,\n  theme,\n  labels,\n  revalidate,\n  onChange,\n  minDate,\n  maxDate,\n  ...rest\n}: DateInputProps) => {\n  const [date, setDate] = React.useState(\n    initialDate ? dayjs(initialDate).toDate() : undefined\n  )\n\n  const [inputElRef, setInputElRef] = useCallbackRefState()\n  const composedInputRef = useComposedRefs(\n    ref as React.Ref<HTMLElement>,\n    setInputElRef\n  )\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 = getFieldIconSize(size)\n\n  return (\n    <div className=\"relative h-max\">\n      <Input\n        name=\"date\"\n        disabled={disabled}\n        size={size}\n        appearance={appearance}\n        theme={theme}\n        {...(rest as React.ComponentProps<typeof Input>)}\n        onChange={handleInputChange}\n        ref={composedInputRef}\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"],"mappings":";;;;;;;;;;;;;;;;AAiBA,MAAM,OAAO,iBAAiB;AAe9B,IAAM,sBAAsB,MAAa,aAAa,wBACpD,OAAO,MAAM,IAAI,CAAC,CAAC,OAAO,UAAU,IAAI;AAE1C,IAAa,aAAa,EACxB,KACA,aACA,aAAa,qBACb,iBAAiB,GACjB,UACA,YACA,cACA,OAAO,MACP,YACA,OACA,QACA,YACA,UACA,SACA,SACA,GAAG,WACiB;CACpB,MAAM,CAAC,MAAM,WAAW,QAAM,SAC5B,cAAc,MAAM,WAAW,CAAC,CAAC,OAAO,IAAI,KAAA,CAC9C;CAEA,MAAM,CAAC,YAAY,iBAAiB,oBAAoB;CACxD,MAAM,mBAAmB,gBACvB,KACA,aACF;CAEA,MAAM,aAAa,mBAAmB,MAAM,UAAU;CAEtD,MAAM,oBAAoB,QAAM,aAC7B,UAAU;EACT,MAAM,gBAAgB,MAAM,OAAO;EACnC,MAAM,kBAAkB,MAAM,eAAe,UAAU;EACvD,MAAM,UAAU,gBAAgB,QAAQ,IACpC,gBAAgB,OAAO,IACvB,KAAA;EACJ,QAAQ,OAAO;EACf,WAAW,OAAO;CACpB,GACA,CAAC,YAAY,QAAQ,CACvB;CAEA,MAAM,uBAAuB,QAAM,aAChC,YAAY;EACX,QAAQ,OAAO;EAEf,MAAM,mCAAmC;GACvC,IAAI,CAAC,YAAY;GAQjB,CAJ+B,OAAO,yBACpC,OAAO,iBAAiB,WACxB,OACF,CAAC,EAAE,IAAA,EACqB,KACtB,YACA,mBAAmB,SAAS,UAAU,CACxC;GACA,MAAM,QAAQ,IAAI,MAAM,SAAS,EAAE,SAAS,KAAK,CAAC;GAClD,WAAW,cAAc,KAAK;EAChC;EACA,2BAA2B;CAC7B,GACA,CAAC,YAAY,UAAU,CACzB;CAEA,MAAM,gBAAgB;EACpB,GAAG;EACH,GAAG;CACL;CAEA,MAAM,CAAC,cAAc,mBAAmB,QAAM,SAAS,KAAK;CAE5D,MAAM,eAAe,QAAM,OAA0B,IAAI;CACzD,MAAM,kBAAkB,QAAM,OAA0B,IAAI;CAE5D,MAAM,WAAW,iBAAiB,IAAI;CAEtC,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACE,oBAAC,OAAD;GACE,MAAK;GACK;GACJ;GACM;GACL;GACP,GAAK;GACL,UAAU;GACV,KAAK;GACL,cAAc;EACf,CAAA,GACD,qBAAC,SAAD;GAAS,OAAA;GAAM,MAAM;GAAc,cAAc;aAAjD,CACE,oBAAC,QAAQ,SAAT;IAAiB,SAAA;cACf,oBAAC,YAAD;KACY;KACV,OAAO,cAAc;KACrB,MAAM;KACN,OAAM;KACN,YAAY;KACZ,WAAU;eAEV,oBAAC,MAAD,EAAM,IAAI,cAAgB,CAAA;IAChB,CAAA;GACG,CAAA,GACjB,oBAAC,QAAQ,QAAT,EAAA,UACE,oBAAC,QAAQ,SAAT;IACE,MAAK;IACL,OAAM;IACN,iBAAiB;IACjB,kBAAkB,MAAM;KACtB,EAAE,eAAe;KACjB,IAAI,MACF,gBAAgB,SAAS,MAAM;UAE/B,aAAa,SAAS,MAAM;IAEhC;IACA,WAAU;cAEV,oBAAC,UAAD;KACE,MAAM,wBAAQ,IAAI,KAAK;KACvB,UAAU;KACV,gBAAgB,OAAO,SAAS;MAC9B,gBAAgB,KAAK;MACrB,MAAM,qBAAqB,KAAK,IAAI;MACpC,IAAI,YAAY,WAAW;KAC7B;KACA,SAAS,OAAO,SAAS;MACvB,MAAM,qBAAqB,IAAI;MAC/B,IAAI,YAAY,WAAW;KAC7B;KACS;KACA;KACK;KACG;KACD;KACJ;KACE;KACd,QAAQ;IACT,CAAA;GACc,CAAA,EACH,CAAA,CACT;IACN;;AAET"}

package/dist/components/dismissible/DismissibleRoot.js

@@ -9,27 +9,26 @@ var DismissibleRootContext = React$1.createContext({
 });
 var DismissibleRootProvider = ({ dismissed: controlledIsDismissed, children, disabled, onDismiss = () => null }) => {
 	const [isDismissed, setIsDismissed] = React$1.useState(false);
-	const value = React$1.useMemo(() => {
-		const isControlled = typeof controlledIsDismissed === "boolean";
-		return {
+	return /* @__PURE__ */ jsx(DismissibleRootContext, {
+		value: React$1.useMemo(() => {
+			const isControlled = typeof controlledIsDismissed === "boolean";
+			return {
+				disabled,
+				isDismissed: isControlled ? controlledIsDismissed : isDismissed,
+				setIsDismissed: isControlled ? () => null : setIsDismissed,
+				onDismiss
+			};
+		}, [
 			disabled,
-			isDismissed: isControlled ? controlledIsDismissed : isDismissed,
-			setIsDismissed: isControlled ? () => null : setIsDismissed,
-			onDismiss
-		};
-	}, [
-		disabled,
-		isDismissed,
-		onDismiss,
-		controlledIsDismissed
-	]);
-	return /* @__PURE__ */ jsx(DismissibleRootContext.Provider, {
-		value,
+			isDismissed,
+			onDismiss,
+			controlledIsDismissed
+		]),
 		children
 	});
 };
 var DismissibleRootInternal = ({ asChild = false, ...rest }) => {
-	const { isDismissed, disabled } = React$1.useContext(DismissibleRootContext);
+	const { isDismissed, disabled } = React$1.use(DismissibleRootContext);
 	if (isDismissed) return null;
 	const props = {
 		...disabled && { [`data-disabled`]: "" },

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

@@ -1 +1 @@
-{"version":3,"file":"DismissibleRoot.js","names":[],"sources":["../../../src/components/dismissible/DismissibleRoot.tsx"],"sourcesContent":["import { Slot } from '@radix-ui/react-slot'\nimport * as React from 'react'\n\nexport interface DismissibleRootContextValue {\n  disabled?: boolean\n  isDismissed: boolean\n  setIsDismissed: (boolean) => void\n  onDismiss: () => void\n}\n\nexport const DismissibleRootContext =\n  React.createContext<DismissibleRootContextValue>({\n    isDismissed: false,\n    setIsDismissed: () => undefined,\n    onDismiss: () => undefined\n  })\n\nexport interface DismissibleRootProps {\n  disabled?: boolean\n  dismissed?: boolean\n  onDismiss?: () => void\n}\n\nexport const DismissibleRootProvider = ({\n  dismissed: controlledIsDismissed,\n  children,\n  disabled,\n  onDismiss = () => null\n}: React.PropsWithChildren<DismissibleRootProps>) => {\n  const [isDismissed, setIsDismissed] = React.useState(false)\n\n  const value = React.useMemo<DismissibleRootContextValue>(() => {\n    const isControlled = typeof controlledIsDismissed === 'boolean'\n    return {\n      disabled,\n      isDismissed: isControlled\n        ? (controlledIsDismissed as boolean)\n        : isDismissed,\n      setIsDismissed: isControlled ? () => null : setIsDismissed,\n      onDismiss\n    }\n  }, [disabled, isDismissed, onDismiss, controlledIsDismissed])\n\n  return (\n    <DismissibleRootContext.Provider value={value}>\n      {children}\n    </DismissibleRootContext.Provider>\n  )\n}\n\nexport interface DismissibleRootInternalProps {\n  asChild?: boolean\n}\n\nconst DismissibleRootInternal = ({\n  asChild = false,\n  ...rest\n}: React.PropsWithChildren<DismissibleRootInternalProps>) => {\n  const rootContext = React.useContext(DismissibleRootContext)\n\n  const { isDismissed, disabled } = rootContext\n\n  if (isDismissed) return null\n\n  const props = { ...(disabled && { [`data-disabled`]: '' }), ...rest }\n  const Component = asChild ? Slot : 'div'\n  return <Component {...props} />\n}\n\nexport const DismissibleRoot = ({\n  disabled = false,\n  dismissed,\n  onDismiss,\n  ...rest\n}: React.PropsWithChildren<\n  DismissibleRootInternalProps & DismissibleRootProps\n>) => (\n  <DismissibleRootProvider\n    dismissed={dismissed}\n    disabled={disabled}\n    onDismiss={onDismiss}\n  >\n    <DismissibleRootInternal {...rest} />\n  </DismissibleRootProvider>\n)\n\nDismissibleRoot.displayName = 'Dismissible'\n"],"mappings":";;;;AAUA,IAAa,yBACX,QAAM,cAA2C;CAC/C,aAAa;CACb,sBAAsB,KAAA;CACtB,iBAAiB,KAAA;AACnB,CAAC;AAQH,IAAa,2BAA2B,EACtC,WAAW,uBACX,UACA,UACA,kBAAkB,WACiC;CACnD,MAAM,CAAC,aAAa,kBAAkB,QAAM,SAAS,KAAK;CAE1D,MAAM,QAAQ,QAAM,cAA2C;EAC7D,MAAM,eAAe,OAAO,0BAA0B;EACtD,OAAO;GACL;GACA,aAAa,eACR,wBACD;GACJ,gBAAgB,qBAAqB,OAAO;GAC5C;EACF;CACF,GAAG;EAAC;EAAU;EAAa;EAAW;CAAqB,CAAC;CAE5D,OACE,oBAAC,uBAAuB,UAAxB;EAAwC;EACrC;CAC8B,CAAA;AAErC;AAMA,IAAM,2BAA2B,EAC/B,UAAU,OACV,GAAG,WACwD;CAG3D,MAAM,EAAE,aAAa,aAFD,QAAM,WAAW,sBAEH;CAElC,IAAI,aAAa,OAAO;CAExB,MAAM,QAAQ;EAAE,GAAI,YAAY,GAAG,kBAAkB,GAAG;EAAI,GAAG;CAAK;CAEpE,OAAO,oBADW,UAAU,OAAO,OAC5B,EAAW,GAAI,MAAQ,CAAA;AAChC;AAEA,IAAa,mBAAmB,EAC9B,WAAW,OACX,WACA,WACA,GAAG,WAIH,oBAAC,yBAAD;CACa;CACD;CACC;WAEX,oBAAC,yBAAD,EAAyB,GAAI,KAAO,CAAA;AACb,CAAA;AAG3B,gBAAgB,cAAc"}
+{"version":3,"file":"DismissibleRoot.js","names":[],"sources":["../../../src/components/dismissible/DismissibleRoot.tsx"],"sourcesContent":["import { Slot } from '@radix-ui/react-slot'\nimport * as React from 'react'\n\nexport interface DismissibleRootContextValue {\n  disabled?: boolean\n  isDismissed: boolean\n  setIsDismissed: (boolean) => void\n  onDismiss: () => void\n}\n\nexport const DismissibleRootContext =\n  React.createContext<DismissibleRootContextValue>({\n    isDismissed: false,\n    setIsDismissed: () => undefined,\n    onDismiss: () => undefined\n  })\n\nexport interface DismissibleRootProps {\n  disabled?: boolean\n  dismissed?: boolean\n  onDismiss?: () => void\n}\n\nexport const DismissibleRootProvider = ({\n  dismissed: controlledIsDismissed,\n  children,\n  disabled,\n  onDismiss = () => null\n}: React.PropsWithChildren<DismissibleRootProps>) => {\n  const [isDismissed, setIsDismissed] = React.useState(false)\n\n  const value = React.useMemo<DismissibleRootContextValue>(() => {\n    const isControlled = typeof controlledIsDismissed === 'boolean'\n    return {\n      disabled,\n      isDismissed: isControlled\n        ? (controlledIsDismissed as boolean)\n        : isDismissed,\n      setIsDismissed: isControlled ? () => null : setIsDismissed,\n      onDismiss\n    }\n  }, [disabled, isDismissed, onDismiss, controlledIsDismissed])\n\n  return (\n    <DismissibleRootContext value={value}>{children}</DismissibleRootContext>\n  )\n}\n\nexport interface DismissibleRootInternalProps {\n  asChild?: boolean\n}\n\nconst DismissibleRootInternal = ({\n  asChild = false,\n  ...rest\n}: React.PropsWithChildren<DismissibleRootInternalProps>) => {\n  const rootContext = React.use(DismissibleRootContext)\n\n  const { isDismissed, disabled } = rootContext\n\n  if (isDismissed) return null\n\n  const props = { ...(disabled && { [`data-disabled`]: '' }), ...rest }\n  const Component = asChild ? Slot : 'div'\n  return <Component {...props} />\n}\n\nexport const DismissibleRoot = ({\n  disabled = false,\n  dismissed,\n  onDismiss,\n  ...rest\n}: React.PropsWithChildren<\n  DismissibleRootInternalProps & DismissibleRootProps\n>) => (\n  <DismissibleRootProvider\n    dismissed={dismissed}\n    disabled={disabled}\n    onDismiss={onDismiss}\n  >\n    <DismissibleRootInternal {...rest} />\n  </DismissibleRootProvider>\n)\n\nDismissibleRoot.displayName = 'Dismissible'\n"],"mappings":";;;;AAUA,IAAa,yBACX,QAAM,cAA2C;CAC/C,aAAa;CACb,sBAAsB,KAAA;CACtB,iBAAiB,KAAA;AACnB,CAAC;AAQH,IAAa,2BAA2B,EACtC,WAAW,uBACX,UACA,UACA,kBAAkB,WACiC;CACnD,MAAM,CAAC,aAAa,kBAAkB,QAAM,SAAS,KAAK;CAc1D,OACE,oBAAC,wBAAD;EAA+B,OAbnB,QAAM,cAA2C;GAC7D,MAAM,eAAe,OAAO,0BAA0B;GACtD,OAAO;IACL;IACA,aAAa,eACR,wBACD;IACJ,gBAAgB,qBAAqB,OAAO;IAC5C;GACF;EACF,GAAG;GAAC;GAAU;GAAa;GAAW;EAAqB,CAG1B;EAAQ;CAAiC,CAAA;AAE5E;AAMA,IAAM,2BAA2B,EAC/B,UAAU,OACV,GAAG,WACwD;CAG3D,MAAM,EAAE,aAAa,aAFD,QAAM,IAAI,sBAEI;CAElC,IAAI,aAAa,OAAO;CAExB,MAAM,QAAQ;EAAE,GAAI,YAAY,GAAG,kBAAkB,GAAG;EAAI,GAAG;CAAK;CAEpE,OAAO,oBADW,UAAU,OAAO,OAC5B,EAAW,GAAI,MAAQ,CAAA;AAChC;AAEA,IAAa,mBAAmB,EAC9B,WAAW,OACX,WACA,WACA,GAAG,WAIH,oBAAC,yBAAD;CACa;CACD;CACC;WAEX,oBAAC,yBAAD,EAAyB,GAAI,KAAO,CAAA;AACb,CAAA;AAG3B,gBAAgB,cAAc"}

package/dist/components/dismissible/DismissibleTrigger.js

@@ -9,7 +9,7 @@ var DefaultTrigger = (props) => /* @__PURE__ */ jsx("button", {
 	children: "Dismiss"
 });
 var DismissibleTrigger = ({ asChild = false, ...rest }) => {
-	const context = React$1.useContext(DismissibleRootContext);
+	const context = React$1.use(DismissibleRootContext);
 	if (context === void 0) throw new Error("Dismissible.Trigger can only be used within a Dismissible.Item");
 	const { setIsDismissed, disabled, onDismiss } = context;
 	const handleDismiss = () => {

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

@@ -1 +1 @@
-{"version":3,"file":"DismissibleTrigger.js","names":[],"sources":["../../../src/components/dismissible/DismissibleTrigger.tsx"],"sourcesContent":["import { Slot } from '@radix-ui/react-slot'\nimport * as React from 'react'\n\nimport { DismissibleRootContext } from './DismissibleRoot'\n\nexport interface DismissibleTriggerProps {\n  asChild?: boolean\n}\n\nconst DefaultTrigger = (props) => (\n  <button type=\"button\" {...props}>\n    Dismiss\n  </button>\n)\n\nexport const DismissibleTrigger = ({\n  asChild = false,\n  ...rest\n}: React.PropsWithChildren<DismissibleTriggerProps>) => {\n  const context = React.useContext(DismissibleRootContext)\n  if (context === undefined) {\n    throw new Error(\n      'Dismissible.Trigger can only be used within a Dismissible.Item'\n    )\n  }\n\n  const { setIsDismissed, disabled, onDismiss } = context\n\n  const handleDismiss = () => {\n    setIsDismissed(true)\n    onDismiss?.()\n  }\n\n  const props = {\n    disabled: disabled,\n    onClick: handleDismiss,\n    ...rest\n  }\n\n  const Component = asChild ? Slot : DefaultTrigger\n  return <Component {...props} />\n}\n"],"mappings":";;;;;AASA,IAAM,kBAAkB,UACtB,oBAAC,UAAD;CAAQ,MAAK;CAAS,GAAI;WAAO;AAEzB,CAAA;AAGV,IAAa,sBAAsB,EACjC,UAAU,OACV,GAAG,WACmD;CACtD,MAAM,UAAU,QAAM,WAAW,sBAAsB;CACvD,IAAI,YAAY,KAAA,GACd,MAAM,IAAI,MACR,gEACF;CAGF,MAAM,EAAE,gBAAgB,UAAU,cAAc;CAEhD,MAAM,sBAAsB;EAC1B,eAAe,IAAI;EACnB,YAAY;CACd;CAEA,MAAM,QAAQ;EACF;EACV,SAAS;EACT,GAAG;CACL;CAGA,OAAO,oBADW,UAAU,OAAO,gBAC5B,EAAW,GAAI,MAAQ,CAAA;AAChC"}
+{"version":3,"file":"DismissibleTrigger.js","names":[],"sources":["../../../src/components/dismissible/DismissibleTrigger.tsx"],"sourcesContent":["import { Slot } from '@radix-ui/react-slot'\nimport * as React from 'react'\n\nimport { DismissibleRootContext } from './DismissibleRoot'\n\nexport interface DismissibleTriggerProps {\n  asChild?: boolean\n}\n\nconst DefaultTrigger = (props) => (\n  <button type=\"button\" {...props}>\n    Dismiss\n  </button>\n)\n\nexport const DismissibleTrigger = ({\n  asChild = false,\n  ...rest\n}: React.PropsWithChildren<DismissibleTriggerProps>) => {\n  const context = React.use(DismissibleRootContext)\n  if (context === undefined) {\n    throw new Error(\n      'Dismissible.Trigger can only be used within a Dismissible.Item'\n    )\n  }\n\n  const { setIsDismissed, disabled, onDismiss } = context\n\n  const handleDismiss = () => {\n    setIsDismissed(true)\n    onDismiss?.()\n  }\n\n  const props = {\n    disabled: disabled,\n    onClick: handleDismiss,\n    ...rest\n  }\n\n  const Component = asChild ? Slot : DefaultTrigger\n  return <Component {...props} />\n}\n"],"mappings":";;;;;AASA,IAAM,kBAAkB,UACtB,oBAAC,UAAD;CAAQ,MAAK;CAAS,GAAI;WAAO;AAEzB,CAAA;AAGV,IAAa,sBAAsB,EACjC,UAAU,OACV,GAAG,WACmD;CACtD,MAAM,UAAU,QAAM,IAAI,sBAAsB;CAChD,IAAI,YAAY,KAAA,GACd,MAAM,IAAI,MACR,gEACF;CAGF,MAAM,EAAE,gBAAgB,UAAU,cAAc;CAEhD,MAAM,sBAAsB;EAC1B,eAAe,IAAI;EACnB,YAAY;CACd;CAEA,MAAM,QAAQ;EACF;EACV,SAAS;EACT,GAAG;CACL;CAGA,OAAO,oBADW,UAAU,OAAO,gBAC5B,EAAW,GAAI,MAAQ,CAAA;AAChC"}

package/dist/components/dismissible-group/DismissibleGroupItem.js

@@ -4,7 +4,7 @@ import * as React$1 from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/dismissible-group/DismissibleGroupItem.tsx
 var DismissibleGroupItem = ({ children, value, disabled: itemDisabled = false, ...rest }) => {
-	const groupContext = React$1.useContext(DismissibleGroupContext);
+	const groupContext = React$1.use(DismissibleGroupContext);
 	if (groupContext === void 0) throw new Error("DismissibleGroup.Item can only be used within a DismissibleGroup");
 	const { onDismiss, disabled: groupDisabled } = groupContext;
 	return /* @__PURE__ */ jsx(Dismissible, {

package/dist/components/dismissible-group/DismissibleGroupItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"DismissibleGroupItem.js","names":[],"sources":["../../../src/components/dismissible-group/DismissibleGroupItem.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Dismissible } from '../dismissible'\nimport { DismissibleGroupContext } from './DismissibleGroupRoot'\n\nexport type DismissibleGroupItemProps = React.ComponentProps<\n  typeof Dismissible\n> & {\n  value: string | number\n  disabled?: boolean\n}\n\nexport const DismissibleGroupItem = ({\n  children,\n  value,\n  disabled: itemDisabled = false,\n  ...rest\n}: React.PropsWithChildren<DismissibleGroupItemProps>) => {\n  const groupContext = React.useContext(DismissibleGroupContext)\n  if (groupContext === undefined) {\n    throw new Error(\n      'DismissibleGroup.Item can only be used within a DismissibleGroup'\n    )\n  }\n  const { onDismiss, disabled: groupDisabled } = groupContext\n  return (\n    <Dismissible\n      disabled={groupDisabled || itemDisabled}\n      {...rest}\n      onDismiss={() => onDismiss(value)}\n    >\n      {children}\n    </Dismissible>\n  )\n}\n"],"mappings":";;;;;AAYA,IAAa,wBAAwB,EACnC,UACA,OACA,UAAU,eAAe,OACzB,GAAG,WACqD;CACxD,MAAM,eAAe,QAAM,WAAW,uBAAuB;CAC7D,IAAI,iBAAiB,KAAA,GACnB,MAAM,IAAI,MACR,kEACF;CAEF,MAAM,EAAE,WAAW,UAAU,kBAAkB;CAC/C,OACE,oBAAC,aAAD;EACE,UAAU,iBAAiB;EAC3B,GAAI;EACJ,iBAAiB,UAAU,KAAK;EAE/B;CACU,CAAA;AAEjB"}
+{"version":3,"file":"DismissibleGroupItem.js","names":[],"sources":["../../../src/components/dismissible-group/DismissibleGroupItem.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Dismissible } from '../dismissible'\nimport { DismissibleGroupContext } from './DismissibleGroupRoot'\n\nexport type DismissibleGroupItemProps = React.ComponentProps<\n  typeof Dismissible\n> & {\n  value: string | number\n  disabled?: boolean\n}\n\nexport const DismissibleGroupItem = ({\n  children,\n  value,\n  disabled: itemDisabled = false,\n  ...rest\n}: React.PropsWithChildren<DismissibleGroupItemProps>) => {\n  const groupContext = React.use(DismissibleGroupContext)\n  if (groupContext === undefined) {\n    throw new Error(\n      'DismissibleGroup.Item can only be used within a DismissibleGroup'\n    )\n  }\n  const { onDismiss, disabled: groupDisabled } = groupContext\n  return (\n    <Dismissible\n      disabled={groupDisabled || itemDisabled}\n      {...rest}\n      onDismiss={() => onDismiss(value)}\n    >\n      {children}\n    </Dismissible>\n  )\n}\n"],"mappings":";;;;;AAYA,IAAa,wBAAwB,EACnC,UACA,OACA,UAAU,eAAe,OACzB,GAAG,WACqD;CACxD,MAAM,eAAe,QAAM,IAAI,uBAAuB;CACtD,IAAI,iBAAiB,KAAA,GACnB,MAAM,IAAI,MACR,kEACF;CAEF,MAAM,EAAE,WAAW,UAAU,kBAAkB;CAC/C,OACE,oBAAC,aAAD;EACE,UAAU,iBAAiB;EAC3B,GAAI;EACJ,iBAAiB,UAAU,KAAK;EAE/B;CACU,CAAA;AAEjB"}

package/dist/components/dismissible-group/DismissibleGroupRoot.js

@@ -3,12 +3,11 @@ import { jsx } from "react/jsx-runtime";
 //#region src/components/dismissible-group/DismissibleGroupRoot.tsx
 var DismissibleGroupContext = React$1.createContext({ onDismiss: () => null });
 var DismissibleGroupProvider = ({ children, disabled, onDismiss }) => {
-	const value = React$1.useMemo(() => ({
-		disabled,
-		onDismiss
-	}), [disabled, onDismiss]);
-	return /* @__PURE__ */ jsx(DismissibleGroupContext.Provider, {
-		value,
+	return /* @__PURE__ */ jsx(DismissibleGroupContext, {
+		value: React$1.useMemo(() => ({
+			disabled,
+			onDismiss
+		}), [disabled, onDismiss]),
 		children
 	});
 };

package/dist/components/dismissible-group/DismissibleGroupRoot.js.map

@@ -1 +1 @@
-{"version":3,"file":"DismissibleGroupRoot.js","names":[],"sources":["../../../src/components/dismissible-group/DismissibleGroupRoot.tsx"],"sourcesContent":["import * as React from 'react'\n\nexport interface DismissibleGroupContextValue {\n  disabled?: boolean\n  onDismiss: (value: string | number) => void\n}\nexport const DismissibleGroupContext =\n  React.createContext<DismissibleGroupContextValue>({\n    onDismiss: () => null\n  })\n\nexport interface DismissibleGroupProps {\n  disabled?: boolean\n  onDismiss: (value: string | number) => void\n}\n\nexport const DismissibleGroupProvider = ({\n  children,\n  disabled,\n  onDismiss\n}: React.PropsWithChildren<DismissibleGroupProps>) => {\n  const value = React.useMemo<DismissibleGroupContextValue>(\n    () => ({ disabled, onDismiss }),\n    [disabled, onDismiss]\n  )\n  return (\n    <DismissibleGroupContext.Provider value={value}>\n      {children}\n    </DismissibleGroupContext.Provider>\n  )\n}\n\nexport interface DismissibleGroupRootProps extends DismissibleGroupProps {\n  as?: React.ElementType\n  ref?: React.Ref<HTMLDivElement>\n}\n\nexport const DismissibleGroupRoot = ({\n  as: Component = 'div',\n  disabled,\n  onDismiss,\n  ...rest\n}: React.PropsWithChildren<DismissibleGroupRootProps>) => (\n  <DismissibleGroupProvider disabled={disabled} onDismiss={onDismiss}>\n    <Component {...rest} />\n  </DismissibleGroupProvider>\n)\n\nDismissibleGroupRoot.displayName = 'DismissibleGroup'\n"],"mappings":";;;AAMA,IAAa,0BACX,QAAM,cAA4C,EAChD,iBAAiB,KACnB,CAAC;AAOH,IAAa,4BAA4B,EACvC,UACA,UACA,gBACoD;CACpD,MAAM,QAAQ,QAAM,eACX;EAAE;EAAU;CAAU,IAC7B,CAAC,UAAU,SAAS,CACtB;CACA,OACE,oBAAC,wBAAwB,UAAzB;EAAyC;EACtC;CAC+B,CAAA;AAEtC;AAOA,IAAa,wBAAwB,EACnC,IAAI,YAAY,OAChB,UACA,WACA,GAAG,WAEH,oBAAC,0BAAD;CAAoC;CAAqB;WACvD,oBAAC,WAAD,EAAW,GAAI,KAAO,CAAA;AACE,CAAA;AAG5B,qBAAqB,cAAc"}
+{"version":3,"file":"DismissibleGroupRoot.js","names":[],"sources":["../../../src/components/dismissible-group/DismissibleGroupRoot.tsx"],"sourcesContent":["import * as React from 'react'\n\nexport interface DismissibleGroupContextValue {\n  disabled?: boolean\n  onDismiss: (value: string | number) => void\n}\nexport const DismissibleGroupContext =\n  React.createContext<DismissibleGroupContextValue>({\n    onDismiss: () => null\n  })\n\nexport interface DismissibleGroupProps {\n  disabled?: boolean\n  onDismiss: (value: string | number) => void\n}\n\nexport const DismissibleGroupProvider = ({\n  children,\n  disabled,\n  onDismiss\n}: React.PropsWithChildren<DismissibleGroupProps>) => {\n  const value = React.useMemo<DismissibleGroupContextValue>(\n    () => ({ disabled, onDismiss }),\n    [disabled, onDismiss]\n  )\n  return (\n    <DismissibleGroupContext value={value}>{children}</DismissibleGroupContext>\n  )\n}\n\nexport interface DismissibleGroupRootProps extends DismissibleGroupProps {\n  as?: React.ElementType\n  ref?: React.Ref<HTMLDivElement>\n}\n\nexport const DismissibleGroupRoot = ({\n  as: Component = 'div',\n  disabled,\n  onDismiss,\n  ...rest\n}: React.PropsWithChildren<DismissibleGroupRootProps>) => (\n  <DismissibleGroupProvider disabled={disabled} onDismiss={onDismiss}>\n    <Component {...rest} />\n  </DismissibleGroupProvider>\n)\n\nDismissibleGroupRoot.displayName = 'DismissibleGroup'\n"],"mappings":";;;AAMA,IAAa,0BACX,QAAM,cAA4C,EAChD,iBAAiB,KACnB,CAAC;AAOH,IAAa,4BAA4B,EACvC,UACA,UACA,gBACoD;CAKpD,OACE,oBAAC,yBAAD;EAAgC,OALpB,QAAM,eACX;GAAE;GAAU;EAAU,IAC7B,CAAC,UAAU,SAAS,CAGY;EAAQ;CAAkC,CAAA;AAE9E;AAOA,IAAa,wBAAwB,EACnC,IAAI,YAAY,OAChB,UACA,WACA,GAAG,WAEH,oBAAC,0BAAD;CAAoC;CAAqB;WACvD,oBAAC,WAAD,EAAW,GAAI,KAAO,CAAA;AACE,CAAA;AAG5B,qBAAqB,cAAc"}

package/dist/components/drawer/Drawer.context.js

@@ -3,9 +3,8 @@ import { jsx } from "react/jsx-runtime";
 //#region src/components/drawer/Drawer.context.tsx
 var DrawerContext = React$1.createContext({ position: "left" });
 var DrawerProvider = ({ position = "left", ...rest }) => {
-	const value = React$1.useMemo(() => ({ position }), [position]);
-	return /* @__PURE__ */ jsx(DrawerContext.Provider, {
-		value,
+	return /* @__PURE__ */ jsx(DrawerContext, {
+		value: React$1.useMemo(() => ({ position }), [position]),
 		...rest
 	});
 };

package/dist/components/drawer/Drawer.context.js.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.context.js","names":[],"sources":["../../../src/components/drawer/Drawer.context.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { StyledContent } from './DrawerContent'\n\ntype DrawerProviderProps = {\n  position?: React.ComponentProps<typeof StyledContent>['position']\n}\n\ntype DrawerContext = DrawerProviderProps\n\nexport const DrawerContext = React.createContext<DrawerContext>({\n  position: 'left'\n})\n\nexport const DrawerProvider = ({\n  position = 'left',\n  ...rest\n}: React.PropsWithChildren<DrawerProviderProps>) => {\n  const value = React.useMemo<DrawerContext>(() => ({ position }), [position])\n  return <DrawerContext.Provider value={value} {...rest} />\n}\n"],"mappings":";;;AAUA,IAAa,gBAAgB,QAAM,cAA6B,EAC9D,UAAU,OACZ,CAAC;AAED,IAAa,kBAAkB,EAC7B,WAAW,QACX,GAAG,WAC+C;CAClD,MAAM,QAAQ,QAAM,eAA8B,EAAE,SAAS,IAAI,CAAC,QAAQ,CAAC;CAC3E,OAAO,oBAAC,cAAc,UAAf;EAA+B;EAAO,GAAI;CAAO,CAAA;AAC1D"}
+{"version":3,"file":"Drawer.context.js","names":[],"sources":["../../../src/components/drawer/Drawer.context.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { StyledContent } from './DrawerContent'\n\ntype DrawerProviderProps = {\n  position?: React.ComponentProps<typeof StyledContent>['position']\n}\n\ntype DrawerContext = DrawerProviderProps\n\nexport const DrawerContext = React.createContext<DrawerContext>({\n  position: 'left'\n})\n\nexport const DrawerProvider = ({\n  position = 'left',\n  ...rest\n}: React.PropsWithChildren<DrawerProviderProps>) => {\n  const value = React.useMemo<DrawerContext>(() => ({ position }), [position])\n  return <DrawerContext value={value} {...rest} />\n}\n"],"mappings":";;;AAUA,IAAa,gBAAgB,QAAM,cAA6B,EAC9D,UAAU,OACZ,CAAC;AAED,IAAa,kBAAkB,EAC7B,WAAW,QACX,GAAG,WAC+C;CAElD,OAAO,oBAAC,eAAD;EAAsB,OADf,QAAM,eAA8B,EAAE,SAAS,IAAI,CAAC,QAAQ,CAC7C;EAAO,GAAI;CAAO,CAAA;AACjD"}

package/dist/components/drawer/DrawerContent.js

@@ -60,7 +60,7 @@ var StyledContent = styled(Content, {
 	}
 });
 var DrawerContent = ({ children, ...rest }) => {
-	const { position } = React$1.useContext(DrawerContext);
+	const { position } = React$1.use(DrawerContext);
 	return /* @__PURE__ */ jsxs(Portal, { children: [/* @__PURE__ */ jsx(DrawerOverlay, {}), /* @__PURE__ */ jsx(ColorScheme, {
 		base: "grey1",
 		accent: "primary1",

package/dist/components/drawer/DrawerContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"DrawerContent.js","names":[],"sources":["../../../src/components/drawer/DrawerContent.tsx"],"sourcesContent":["import { Content, Portal } from '@radix-ui/react-dialog'\nimport * as React from 'react'\n\nimport { ColorScheme } from '../../experiments/color-scheme/ColorScheme'\nimport { styled } from '../../styled'\nimport { DrawerContext } from './Drawer.context'\nimport { DrawerOverlay } from './DrawerOverlay'\n\nexport const StyledContent = styled(Content, {\n  base: [\n    'bg-(--base-1)',\n    'shadow-lg',\n    'fixed',\n    'z-1147483646',\n    'motion-safe:data-[state=open]:animate-slide-direction-in',\n    'motion-safe:data-[state=closed]:animate-slide-direction-out'\n  ],\n  variants: {\n    position: {\n      top: [\n        '[--slide-direction-out-y:-100%]',\n        'top-0',\n        'left-0',\n        'w-full',\n        'max-h-17/20'\n      ],\n      right: [\n        '[--slide-direction-out-x:100%]',\n        'right-0',\n        'top-0',\n        'h-full',\n        'w-(--drawer-content-width,100%)',\n        'max-w-full'\n      ],\n      bottom: [\n        '[--slide-direction-out-y:100%]',\n        'bottom-0',\n        'left-0',\n        'w-full',\n        'max-h-17/20'\n      ],\n      left: [\n        '[--slide-direction-out-x:-100%]',\n        'left-0',\n        'top-0',\n        'h-full',\n        'w-(--drawer-content-width,100%)',\n        'max-w-full'\n      ]\n    },\n    size: {\n      xs: ['[--drawer-content-width:240px]'],\n      sm: ['[--drawer-content-width:256px]'],\n      md: ['[--drawer-content-width:288px]'],\n      lg: ['[--drawer-content-width:304px]'],\n      xl: ['[--drawer-content-width:320px]'],\n      '2xl': ['[--drawer-content-width:720px]'],\n      '3xl': ['[--drawer-content-width:1000px]']\n    }\n  }\n})\n\nexport const DrawerContent = ({\n  children,\n  ...rest\n}: React.ComponentProps<typeof StyledContent>) => {\n  const { position } = React.useContext(DrawerContext)\n\n  return (\n    <Portal>\n      <DrawerOverlay />\n      <ColorScheme base=\"grey1\" accent=\"primary1\" asChild>\n        <StyledContent size=\"lg\" position={position} {...rest} asChild>\n          <div className=\"flex flex-col\">{children}</div>\n        </StyledContent>\n      </ColorScheme>\n    </Portal>\n  )\n}\n"],"mappings":";;;;;;;;AAQA,IAAa,gBAAgB,OAAO,SAAS;CAC3C,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU;EACR,UAAU;GACR,KAAK;IACH;IACA;IACA;IACA;IACA;GACF;GACA,OAAO;IACL;IACA;IACA;IACA;IACA;IACA;GACF;GACA,QAAQ;IACN;IACA;IACA;IACA;IACA;GACF;GACA,MAAM;IACJ;IACA;IACA;IACA;IACA;IACA;GACF;EACF;EACA,MAAM;GACJ,IAAI,CAAC,gCAAgC;GACrC,IAAI,CAAC,gCAAgC;GACrC,IAAI,CAAC,gCAAgC;GACrC,IAAI,CAAC,gCAAgC;GACrC,IAAI,CAAC,gCAAgC;GACrC,OAAO,CAAC,gCAAgC;GACxC,OAAO,CAAC,iCAAiC;EAC3C;CACF;AACF,CAAC;AAED,IAAa,iBAAiB,EAC5B,UACA,GAAG,WAC6C;CAChD,MAAM,EAAE,aAAa,QAAM,WAAW,aAAa;CAEnD,OACE,qBAAC,QAAD,EAAA,UAAA,CACE,oBAAC,eAAD,CAAgB,CAAA,GAChB,oBAAC,aAAD;EAAa,MAAK;EAAQ,QAAO;EAAW,SAAA;YAC1C,oBAAC,eAAD;GAAe,MAAK;GAAe;GAAU,GAAI;GAAM,SAAA;aACrD,oBAAC,OAAD;IAAK,WAAU;IAAiB;GAAc,CAAA;EACjC,CAAA;CACJ,CAAA,CACP,EAAA,CAAA;AAEZ"}
+{"version":3,"file":"DrawerContent.js","names":[],"sources":["../../../src/components/drawer/DrawerContent.tsx"],"sourcesContent":["import { Content, Portal } from '@radix-ui/react-dialog'\nimport * as React from 'react'\n\nimport { ColorScheme } from '../../experiments/color-scheme/ColorScheme'\nimport { styled } from '../../styled'\nimport { DrawerContext } from './Drawer.context'\nimport { DrawerOverlay } from './DrawerOverlay'\n\nexport const StyledContent = styled(Content, {\n  base: [\n    'bg-(--base-1)',\n    'shadow-lg',\n    'fixed',\n    'z-1147483646',\n    'motion-safe:data-[state=open]:animate-slide-direction-in',\n    'motion-safe:data-[state=closed]:animate-slide-direction-out'\n  ],\n  variants: {\n    position: {\n      top: [\n        '[--slide-direction-out-y:-100%]',\n        'top-0',\n        'left-0',\n        'w-full',\n        'max-h-17/20'\n      ],\n      right: [\n        '[--slide-direction-out-x:100%]',\n        'right-0',\n        'top-0',\n        'h-full',\n        'w-(--drawer-content-width,100%)',\n        'max-w-full'\n      ],\n      bottom: [\n        '[--slide-direction-out-y:100%]',\n        'bottom-0',\n        'left-0',\n        'w-full',\n        'max-h-17/20'\n      ],\n      left: [\n        '[--slide-direction-out-x:-100%]',\n        'left-0',\n        'top-0',\n        'h-full',\n        'w-(--drawer-content-width,100%)',\n        'max-w-full'\n      ]\n    },\n    size: {\n      xs: ['[--drawer-content-width:240px]'],\n      sm: ['[--drawer-content-width:256px]'],\n      md: ['[--drawer-content-width:288px]'],\n      lg: ['[--drawer-content-width:304px]'],\n      xl: ['[--drawer-content-width:320px]'],\n      '2xl': ['[--drawer-content-width:720px]'],\n      '3xl': ['[--drawer-content-width:1000px]']\n    }\n  }\n})\n\nexport const DrawerContent = ({\n  children,\n  ...rest\n}: React.ComponentProps<typeof StyledContent>) => {\n  const { position } = React.use(DrawerContext)\n\n  return (\n    <Portal>\n      <DrawerOverlay />\n      <ColorScheme base=\"grey1\" accent=\"primary1\" asChild>\n        <StyledContent size=\"lg\" position={position} {...rest} asChild>\n          <div className=\"flex flex-col\">{children}</div>\n        </StyledContent>\n      </ColorScheme>\n    </Portal>\n  )\n}\n"],"mappings":";;;;;;;;AAQA,IAAa,gBAAgB,OAAO,SAAS;CAC3C,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU;EACR,UAAU;GACR,KAAK;IACH;IACA;IACA;IACA;IACA;GACF;GACA,OAAO;IACL;IACA;IACA;IACA;IACA;IACA;GACF;GACA,QAAQ;IACN;IACA;IACA;IACA;IACA;GACF;GACA,MAAM;IACJ;IACA;IACA;IACA;IACA;IACA;GACF;EACF;EACA,MAAM;GACJ,IAAI,CAAC,gCAAgC;GACrC,IAAI,CAAC,gCAAgC;GACrC,IAAI,CAAC,gCAAgC;GACrC,IAAI,CAAC,gCAAgC;GACrC,IAAI,CAAC,gCAAgC;GACrC,OAAO,CAAC,gCAAgC;GACxC,OAAO,CAAC,iCAAiC;EAC3C;CACF;AACF,CAAC;AAED,IAAa,iBAAiB,EAC5B,UACA,GAAG,WAC6C;CAChD,MAAM,EAAE,aAAa,QAAM,IAAI,aAAa;CAE5C,OACE,qBAAC,QAAD,EAAA,UAAA,CACE,oBAAC,eAAD,CAAgB,CAAA,GAChB,oBAAC,aAAD;EAAa,MAAK;EAAQ,QAAO;EAAW,SAAA;YAC1C,oBAAC,eAAD;GAAe,MAAK;GAAe;GAAU,GAAI;GAAM,SAAA;aACrD,oBAAC,OAAD;IAAK,WAAU;IAAiB;GAAc,CAAA;EACjC,CAAA;CACJ,CAAA,CACP,EAAA,CAAA;AAEZ"}

package/dist/components/empty-state/EmptyState.context.js

@@ -3,9 +3,8 @@ import { jsx } from "react/jsx-runtime";
 //#region src/components/empty-state/EmptyState.context.tsx
 var EmptyStateContext = React$1.createContext({});
 var EmptyStateProvider = ({ size, children }) => {
-	const value = React$1.useMemo(() => ({ size }), [size]);
-	return /* @__PURE__ */ jsx(EmptyStateContext.Provider, {
-		value,
+	return /* @__PURE__ */ jsx(EmptyStateContext, {
+		value: React$1.useMemo(() => ({ size }), [size]),
 		children
 	});
 };

package/dist/components/empty-state/EmptyState.context.js.map

@@ -1 +1 @@
-{"version":3,"file":"EmptyState.context.js","names":[],"sources":["../../../src/components/empty-state/EmptyState.context.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport type { EmptyStateProps } from './EmptyState'\n\ntype EmptyStateProviderProps = {\n  size?: EmptyStateProps['size']\n}\n\ntype EmptyStateContextValue = EmptyStateProviderProps\n\nexport const EmptyStateContext = React.createContext<EmptyStateContextValue>({})\n\nexport const EmptyStateProvider = ({\n  size,\n  children\n}: React.PropsWithChildren<EmptyStateProviderProps>) => {\n  const value = React.useMemo<EmptyStateContextValue>(() => ({ size }), [size])\n  return (\n    <EmptyStateContext.Provider value={value}>\n      {children}\n    </EmptyStateContext.Provider>\n  )\n}\n"],"mappings":";;;AAUA,IAAa,oBAAoB,QAAM,cAAsC,CAAC,CAAC;AAE/E,IAAa,sBAAsB,EACjC,MACA,eACsD;CACtD,MAAM,QAAQ,QAAM,eAAuC,EAAE,KAAK,IAAI,CAAC,IAAI,CAAC;CAC5E,OACE,oBAAC,kBAAkB,UAAnB;EAAmC;EAChC;CACyB,CAAA;AAEhC"}
+{"version":3,"file":"EmptyState.context.js","names":[],"sources":["../../../src/components/empty-state/EmptyState.context.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport type { EmptyStateProps } from './EmptyState'\n\ntype EmptyStateProviderProps = {\n  size?: EmptyStateProps['size']\n}\n\ntype EmptyStateContextValue = EmptyStateProviderProps\n\nexport const EmptyStateContext = React.createContext<EmptyStateContextValue>({})\n\nexport const EmptyStateProvider = ({\n  size,\n  children\n}: React.PropsWithChildren<EmptyStateProviderProps>) => {\n  const value = React.useMemo<EmptyStateContextValue>(() => ({ size }), [size])\n  return <EmptyStateContext value={value}>{children}</EmptyStateContext>\n}\n"],"mappings":";;;AAUA,IAAa,oBAAoB,QAAM,cAAsC,CAAC,CAAC;AAE/E,IAAa,sBAAsB,EACjC,MACA,eACsD;CAEtD,OAAO,oBAAC,mBAAD;EAA0B,OADnB,QAAM,eAAuC,EAAE,KAAK,IAAI,CAAC,IAAI,CAC1C;EAAQ;CAA4B,CAAA;AACvE"}

package/dist/components/empty-state/EmptyStateBody.js

@@ -15,7 +15,7 @@ var StyledEmptyStateBody = styled(Text, {
 	} }
 }, { enableResponsiveVariants: true });
 var EmptyStateBody = (props) => {
-	const { size } = React$1.useContext(EmptyStateContext);
+	const { size } = React$1.use(EmptyStateContext);
 	return /* @__PURE__ */ jsx(StyledEmptyStateBody, {
 		...props,
 		size

package/dist/components/empty-state/EmptyStateBody.js.map

@@ -1 +1 @@
-{"version":3,"file":"EmptyStateBody.js","names":[],"sources":["../../../src/components/empty-state/EmptyStateBody.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { Text } from '../text/Text'\nimport { EmptyStateContext } from './EmptyState.context'\n\nconst StyledEmptyStateBody = styled(\n  Text,\n  {\n    base: ['text-grey-800', 'font-normal'],\n    variants: {\n      size: {\n        xs: ['mb-4', 'text-sm'],\n        sm: ['mb-4', 'text-sm'],\n        md: ['mb-4', 'text-sm'],\n        lg: ['mb-6', 'text-md'],\n        xl: ['mb-6', 'text-md']\n      }\n    }\n  },\n  { enableResponsiveVariants: true }\n)\n\ntype EmptyStateBodyProps = React.ComponentProps<typeof StyledEmptyStateBody>\n\nexport const EmptyStateBody = (props: EmptyStateBodyProps) => {\n  const { size } = React.useContext(EmptyStateContext)\n  return <StyledEmptyStateBody {...props} size={size} />\n}\n"],"mappings":";;;;;;AAMA,IAAM,uBAAuB,OAC3B,MACA;CACE,MAAM,CAAC,iBAAiB,aAAa;CACrC,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,QAAQ,SAAS;EACtB,IAAI,CAAC,QAAQ,SAAS;EACtB,IAAI,CAAC,QAAQ,SAAS;EACtB,IAAI,CAAC,QAAQ,SAAS;EACtB,IAAI,CAAC,QAAQ,SAAS;CACxB,EACF;AACF,GACA,EAAE,0BAA0B,KAAK,CACnC;AAIA,IAAa,kBAAkB,UAA+B;CAC5D,MAAM,EAAE,SAAS,QAAM,WAAW,iBAAiB;CACnD,OAAO,oBAAC,sBAAD;EAAsB,GAAI;EAAa;CAAO,CAAA;AACvD"}
+{"version":3,"file":"EmptyStateBody.js","names":[],"sources":["../../../src/components/empty-state/EmptyStateBody.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { Text } from '../text/Text'\nimport { EmptyStateContext } from './EmptyState.context'\n\nconst StyledEmptyStateBody = styled(\n  Text,\n  {\n    base: ['text-grey-800', 'font-normal'],\n    variants: {\n      size: {\n        xs: ['mb-4', 'text-sm'],\n        sm: ['mb-4', 'text-sm'],\n        md: ['mb-4', 'text-sm'],\n        lg: ['mb-6', 'text-md'],\n        xl: ['mb-6', 'text-md']\n      }\n    }\n  },\n  { enableResponsiveVariants: true }\n)\n\ntype EmptyStateBodyProps = React.ComponentProps<typeof StyledEmptyStateBody>\n\nexport const EmptyStateBody = (props: EmptyStateBodyProps) => {\n  const { size } = React.use(EmptyStateContext)\n  return <StyledEmptyStateBody {...props} size={size} />\n}\n"],"mappings":";;;;;;AAMA,IAAM,uBAAuB,OAC3B,MACA;CACE,MAAM,CAAC,iBAAiB,aAAa;CACrC,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,QAAQ,SAAS;EACtB,IAAI,CAAC,QAAQ,SAAS;EACtB,IAAI,CAAC,QAAQ,SAAS;EACtB,IAAI,CAAC,QAAQ,SAAS;EACtB,IAAI,CAAC,QAAQ,SAAS;CACxB,EACF;AACF,GACA,EAAE,0BAA0B,KAAK,CACnC;AAIA,IAAa,kBAAkB,UAA+B;CAC5D,MAAM,EAAE,SAAS,QAAM,IAAI,iBAAiB;CAC5C,OAAO,oBAAC,sBAAD;EAAsB,GAAI;EAAa;CAAO,CAAA;AACvD"}

package/dist/components/empty-state/EmptyStateImage.js

@@ -35,7 +35,7 @@ var StyledEmptyStateImage = styled(Image, {
 	} }
 }, { enableResponsiveVariants: true });
 var EmptyStateImage = (props) => {
-	const { size } = React$1.useContext(EmptyStateContext);
+	const { size } = React$1.use(EmptyStateContext);
 	return /* @__PURE__ */ jsx(StyledEmptyStateImage, {
 		size,
 		...props

package/dist/components/empty-state/EmptyStateImage.js.map

@@ -1 +1 @@
-{"version":3,"file":"EmptyStateImage.js","names":[],"sources":["../../../src/components/empty-state/EmptyStateImage.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { Image } from '../image/Image'\nimport { EmptyStateContext } from './EmptyState.context'\n\nconst StyledEmptyStateImage = styled(\n  Image,\n  {\n    base: [],\n    variants: {\n      size: {\n        xs: ['max-h-8', 'max-w-14', 'mb-4'],\n        sm: ['max-h-12', 'max-w-21', 'mb-4'],\n        md: ['max-h-18', 'max-w-[126px]', 'mb-4'],\n        lg: ['max-h-[142px]', 'max-w-[190px]', 'mb-6'],\n        xl: ['max-h-[213px]', 'max-w-[285px]', 'mb-6']\n      }\n    }\n  },\n  { enableResponsiveVariants: true }\n)\n\ntype EmptyStateImageProps = React.ComponentProps<typeof StyledEmptyStateImage>\n\nexport const EmptyStateImage = (props: EmptyStateImageProps) => {\n  const { size } = React.useContext(EmptyStateContext)\n  return <StyledEmptyStateImage size={size} {...props} />\n}\n"],"mappings":";;;;;;AAMA,IAAM,wBAAwB,OAC5B,OACA;CACE,MAAM,CAAC;CACP,UAAU,EACR,MAAM;EACJ,IAAI;GAAC;GAAW;GAAY;EAAM;EAClC,IAAI;GAAC;GAAY;GAAY;EAAM;EACnC,IAAI;GAAC;GAAY;GAAiB;EAAM;EACxC,IAAI;GAAC;GAAiB;GAAiB;EAAM;EAC7C,IAAI;GAAC;GAAiB;GAAiB;EAAM;CAC/C,EACF;AACF,GACA,EAAE,0BAA0B,KAAK,CACnC;AAIA,IAAa,mBAAmB,UAAgC;CAC9D,MAAM,EAAE,SAAS,QAAM,WAAW,iBAAiB;CACnD,OAAO,oBAAC,uBAAD;EAA6B;EAAM,GAAI;CAAQ,CAAA;AACxD"}
+{"version":3,"file":"EmptyStateImage.js","names":[],"sources":["../../../src/components/empty-state/EmptyStateImage.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { Image } from '../image/Image'\nimport { EmptyStateContext } from './EmptyState.context'\n\nconst StyledEmptyStateImage = styled(\n  Image,\n  {\n    base: [],\n    variants: {\n      size: {\n        xs: ['max-h-8', 'max-w-14', 'mb-4'],\n        sm: ['max-h-12', 'max-w-21', 'mb-4'],\n        md: ['max-h-18', 'max-w-[126px]', 'mb-4'],\n        lg: ['max-h-[142px]', 'max-w-[190px]', 'mb-6'],\n        xl: ['max-h-[213px]', 'max-w-[285px]', 'mb-6']\n      }\n    }\n  },\n  { enableResponsiveVariants: true }\n)\n\ntype EmptyStateImageProps = React.ComponentProps<typeof StyledEmptyStateImage>\n\nexport const EmptyStateImage = (props: EmptyStateImageProps) => {\n  const { size } = React.use(EmptyStateContext)\n  return <StyledEmptyStateImage size={size} {...props} />\n}\n"],"mappings":";;;;;;AAMA,IAAM,wBAAwB,OAC5B,OACA;CACE,MAAM,CAAC;CACP,UAAU,EACR,MAAM;EACJ,IAAI;GAAC;GAAW;GAAY;EAAM;EAClC,IAAI;GAAC;GAAY;GAAY;EAAM;EACnC,IAAI;GAAC;GAAY;GAAiB;EAAM;EACxC,IAAI;GAAC;GAAiB;GAAiB;EAAM;EAC7C,IAAI;GAAC;GAAiB;GAAiB;EAAM;CAC/C,EACF;AACF,GACA,EAAE,0BAA0B,KAAK,CACnC;AAIA,IAAa,mBAAmB,UAAgC;CAC9D,MAAM,EAAE,SAAS,QAAM,IAAI,iBAAiB;CAC5C,OAAO,oBAAC,uBAAD;EAA6B;EAAM,GAAI;CAAQ,CAAA;AACxD"}

package/dist/components/empty-state/EmptyStateTitle.js

@@ -19,7 +19,7 @@ var StyledEmptyStateTitle = styled("h2", {
 	} }
 }, { enableResponsiveVariants: true });
 var EmptyStateTitle = (props) => {
-	const { size } = React$1.useContext(EmptyStateContext);
+	const { size } = React$1.use(EmptyStateContext);
 	return /* @__PURE__ */ jsx(StyledEmptyStateTitle, {
 		size,
 		...props

package/dist/components/empty-state/EmptyStateTitle.js.map

@@ -1 +1 @@
-{"version":3,"file":"EmptyStateTitle.js","names":[],"sources":["../../../src/components/empty-state/EmptyStateTitle.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '../../styled'\nimport type { Override } from '../../utilities/types'\nimport { EmptyStateContext } from './EmptyState.context'\n\nconst StyledEmptyStateTitle = styled(\n  'h2',\n  {\n    base: ['text-grey-800', 'font-body', 'font-semibold', 'm-0'],\n    variants: {\n      size: {\n        xs: ['mb-3', 'text-md'],\n        sm: ['mb-3', 'text-md'],\n        md: ['mb-3', 'text-md'],\n        lg: ['mb-4', 'text-lg'],\n        xl: ['mb-4', 'text-lg']\n      }\n    }\n  },\n  { enableResponsiveVariants: true }\n)\n\n// Override, not intersection: ComponentProps yields `as?: never`, and\n// intersecting that with ElementType silently collapses `as` to undefined\ntype EmptyStateTitleProps = Override<\n  React.ComponentProps<typeof StyledEmptyStateTitle>,\n  {\n    as?: React.ComponentType | React.ElementType\n  }\n>\n\nexport const EmptyStateTitle = (props: EmptyStateTitleProps) => {\n  const { size } = React.useContext(EmptyStateContext)\n  return <StyledEmptyStateTitle size={size} {...props} />\n}\n"],"mappings":";;;;;AAMA,IAAM,wBAAwB,OAC5B,MACA;CACE,MAAM;EAAC;EAAiB;EAAa;EAAiB;CAAK;CAC3D,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,QAAQ,SAAS;EACtB,IAAI,CAAC,QAAQ,SAAS;EACtB,IAAI,CAAC,QAAQ,SAAS;EACtB,IAAI,CAAC,QAAQ,SAAS;EACtB,IAAI,CAAC,QAAQ,SAAS;CACxB,EACF;AACF,GACA,EAAE,0BAA0B,KAAK,CACnC;AAWA,IAAa,mBAAmB,UAAgC;CAC9D,MAAM,EAAE,SAAS,QAAM,WAAW,iBAAiB;CACnD,OAAO,oBAAC,uBAAD;EAA6B;EAAM,GAAI;CAAQ,CAAA;AACxD"}
+{"version":3,"file":"EmptyStateTitle.js","names":[],"sources":["../../../src/components/empty-state/EmptyStateTitle.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '../../styled'\nimport type { Override } from '../../utilities/types'\nimport { EmptyStateContext } from './EmptyState.context'\n\nconst StyledEmptyStateTitle = styled(\n  'h2',\n  {\n    base: ['text-grey-800', 'font-body', 'font-semibold', 'm-0'],\n    variants: {\n      size: {\n        xs: ['mb-3', 'text-md'],\n        sm: ['mb-3', 'text-md'],\n        md: ['mb-3', 'text-md'],\n        lg: ['mb-4', 'text-lg'],\n        xl: ['mb-4', 'text-lg']\n      }\n    }\n  },\n  { enableResponsiveVariants: true }\n)\n\n// Override, not intersection: ComponentProps yields `as?: never`, and\n// intersecting that with ElementType silently collapses `as` to undefined\ntype EmptyStateTitleProps = Override<\n  React.ComponentProps<typeof StyledEmptyStateTitle>,\n  {\n    as?: React.ComponentType | React.ElementType\n  }\n>\n\nexport const EmptyStateTitle = (props: EmptyStateTitleProps) => {\n  const { size } = React.use(EmptyStateContext)\n  return <StyledEmptyStateTitle size={size} {...props} />\n}\n"],"mappings":";;;;;AAMA,IAAM,wBAAwB,OAC5B,MACA;CACE,MAAM;EAAC;EAAiB;EAAa;EAAiB;CAAK;CAC3D,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,QAAQ,SAAS;EACtB,IAAI,CAAC,QAAQ,SAAS;EACtB,IAAI,CAAC,QAAQ,SAAS;EACtB,IAAI,CAAC,QAAQ,SAAS;EACtB,IAAI,CAAC,QAAQ,SAAS;CACxB,EACF;AACF,GACA,EAAE,0BAA0B,KAAK,CACnC;AAWA,IAAa,mBAAmB,UAAgC;CAC9D,MAAM,EAAE,SAAS,QAAM,IAAI,iBAAiB;CAC5C,OAAO,oBAAC,uBAAD;EAA6B;EAAM,GAAI;CAAQ,CAAA;AACxD"}

package/dist/components/file-drop/FileDrop.js

@@ -36,11 +36,11 @@ var FileDrop = ({ children, accept, multiple, onDrop, ...rest }) => {
 	const handleKeyDown = (event) => {
 		if (["Space", "Enter"].includes(event.key)) fileUploadInputRef.current?.click();
 	};
-	const value = {
+	const value = React$1.useMemo(() => ({
 		isDragging,
 		files
-	};
-	return /* @__PURE__ */ jsx(FileDropContext.Provider, {
+	}), [isDragging, files]);
+	return /* @__PURE__ */ jsx(FileDropContext, {
 		value,
 		children: /* @__PURE__ */ jsxs(StyledContainer, {
 			onDragOver: handleDragOver,

package/dist/components/file-drop/FileDrop.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileDrop.js","names":[],"sources":["../../../src/components/file-drop/FileDrop.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { FileDropContext } from './FileDrop.context'\nimport { type FileDropContextValue } from './types'\n\ninterface FileDropProps extends Omit<\n  React.ComponentProps<'div'>,\n  'onDrop' | 'ref' | 'children'\n> {\n  onDrop: (files: File[]) => void\n  children?:\n    | React.ReactNode\n    | ((value: FileDropContextValue) => React.ReactNode)\n  accept?: React.InputHTMLAttributes<HTMLInputElement>['accept']\n  multiple?: React.InputHTMLAttributes<HTMLInputElement>['multiple']\n}\n\nconst StyledContainer = styled('div', {\n  base: [\n    'flex',\n    'flex-col',\n    'gap-6',\n    'items-center',\n    'border',\n    'border-dashed',\n    'border-grey-500',\n    'px-12',\n    'py-8',\n    'rounded-md',\n    'cursor-pointer',\n    '**:pointer-events-none'\n  ]\n})\n\nexport const FileDrop = ({\n  children,\n  accept,\n  multiple,\n  onDrop,\n  ...rest\n}: FileDropProps) => {\n  const [isDragging, setIsDragging] = React.useState(false)\n  const [files, setFiles] = React.useState<File[]>([])\n  const fileUploadInputRef = React.useRef<HTMLInputElement>(null)\n\n  const handleDragOver = (event: React.DragEvent<HTMLDivElement>) => {\n    event.preventDefault()\n    setIsDragging(true)\n  }\n\n  const handleDragLeave = () => setIsDragging(false)\n\n  const handleDrop = (fileList: FileList | null) => {\n    if (!fileList) return\n\n    setIsDragging(false)\n\n    const files = Array.from(fileList)\n    onDrop(files)\n    setFiles(files)\n  }\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    if (['Space', 'Enter'].includes(event.key)) {\n      fileUploadInputRef.current?.click()\n    }\n  }\n\n  const value: FileDropContextValue = { isDragging, files }\n\n  return (\n    <FileDropContext.Provider value={value}>\n      <StyledContainer\n        onDragOver={handleDragOver}\n        onDragLeave={handleDragLeave}\n        onDrop={(event) => {\n          event.preventDefault()\n          handleDrop(event.dataTransfer.files)\n        }}\n        onClick={() => fileUploadInputRef.current?.click()}\n        role=\"button\"\n        onKeyDown={handleKeyDown}\n        tabIndex={0}\n        {...rest}\n      >\n        {typeof children === 'function' ? children(value) : children}\n        <input\n          type=\"file\"\n          ref={fileUploadInputRef}\n          style={{ visibility: 'hidden' }}\n          accept={accept}\n          multiple={multiple}\n          onChange={(event) => {\n            handleDrop(event.target.files)\n          }}\n        />\n      </StyledContainer>\n    </FileDropContext.Provider>\n  )\n}\n\nFileDrop.displayName = 'FileDrop'\n"],"mappings":";;;;;AAkBA,IAAM,kBAAkB,OAAO,OAAO,EACpC,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,EACF,CAAC;AAED,IAAa,YAAY,EACvB,UACA,QACA,UACA,QACA,GAAG,WACgB;CACnB,MAAM,CAAC,YAAY,iBAAiB,QAAM,SAAS,KAAK;CACxD,MAAM,CAAC,OAAO,YAAY,QAAM,SAAiB,CAAC,CAAC;CACnD,MAAM,qBAAqB,QAAM,OAAyB,IAAI;CAE9D,MAAM,kBAAkB,UAA2C;EACjE,MAAM,eAAe;EACrB,cAAc,IAAI;CACpB;CAEA,MAAM,wBAAwB,cAAc,KAAK;CAEjD,MAAM,cAAc,aAA8B;EAChD,IAAI,CAAC,UAAU;EAEf,cAAc,KAAK;EAEnB,MAAM,QAAQ,MAAM,KAAK,QAAQ;EACjC,OAAO,KAAK;EACZ,SAAS,KAAK;CAChB;CAEA,MAAM,iBAAiB,UAA+C;EACpE,IAAI,CAAC,SAAS,OAAO,CAAC,CAAC,SAAS,MAAM,GAAG,GACvC,mBAAmB,SAAS,MAAM;CAEtC;CAEA,MAAM,QAA8B;EAAE;EAAY;CAAM;CAExD,OACE,oBAAC,gBAAgB,UAAjB;EAAiC;YAC/B,qBAAC,iBAAD;GACE,YAAY;GACZ,aAAa;GACb,SAAS,UAAU;IACjB,MAAM,eAAe;IACrB,WAAW,MAAM,aAAa,KAAK;GACrC;GACA,eAAe,mBAAmB,SAAS,MAAM;GACjD,MAAK;GACL,WAAW;GACX,UAAU;GACV,GAAI;aAXN,CAaG,OAAO,aAAa,aAAa,SAAS,KAAK,IAAI,UACpD,oBAAC,SAAD;IACE,MAAK;IACL,KAAK;IACL,OAAO,EAAE,YAAY,SAAS;IACtB;IACE;IACV,WAAW,UAAU;KACnB,WAAW,MAAM,OAAO,KAAK;IAC/B;GACD,CAAA,CACc;;CACO,CAAA;AAE9B;AAEA,SAAS,cAAc"}
+{"version":3,"file":"FileDrop.js","names":[],"sources":["../../../src/components/file-drop/FileDrop.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { FileDropContext } from './FileDrop.context'\nimport { type FileDropContextValue } from './types'\n\ninterface FileDropProps extends Omit<\n  React.ComponentProps<'div'>,\n  'onDrop' | 'ref' | 'children'\n> {\n  onDrop: (files: File[]) => void\n  children?:\n    | React.ReactNode\n    | ((value: FileDropContextValue) => React.ReactNode)\n  accept?: React.InputHTMLAttributes<HTMLInputElement>['accept']\n  multiple?: React.InputHTMLAttributes<HTMLInputElement>['multiple']\n}\n\nconst StyledContainer = styled('div', {\n  base: [\n    'flex',\n    'flex-col',\n    'gap-6',\n    'items-center',\n    'border',\n    'border-dashed',\n    'border-grey-500',\n    'px-12',\n    'py-8',\n    'rounded-md',\n    'cursor-pointer',\n    '**:pointer-events-none'\n  ]\n})\n\nexport const FileDrop = ({\n  children,\n  accept,\n  multiple,\n  onDrop,\n  ...rest\n}: FileDropProps) => {\n  const [isDragging, setIsDragging] = React.useState(false)\n  const [files, setFiles] = React.useState<File[]>([])\n  const fileUploadInputRef = React.useRef<HTMLInputElement>(null)\n\n  const handleDragOver = (event: React.DragEvent<HTMLDivElement>) => {\n    event.preventDefault()\n    setIsDragging(true)\n  }\n\n  const handleDragLeave = () => setIsDragging(false)\n\n  const handleDrop = (fileList: FileList | null) => {\n    if (!fileList) return\n\n    setIsDragging(false)\n\n    const files = Array.from(fileList)\n    onDrop(files)\n    setFiles(files)\n  }\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    if (['Space', 'Enter'].includes(event.key)) {\n      fileUploadInputRef.current?.click()\n    }\n  }\n\n  // Memoized: consumers otherwise re-render at drag-over event frequency.\n  const value = React.useMemo<FileDropContextValue>(\n    () => ({ isDragging, files }),\n    [isDragging, files]\n  )\n\n  return (\n    <FileDropContext value={value}>\n      <StyledContainer\n        onDragOver={handleDragOver}\n        onDragLeave={handleDragLeave}\n        onDrop={(event) => {\n          event.preventDefault()\n          handleDrop(event.dataTransfer.files)\n        }}\n        onClick={() => fileUploadInputRef.current?.click()}\n        role=\"button\"\n        onKeyDown={handleKeyDown}\n        tabIndex={0}\n        {...rest}\n      >\n        {typeof children === 'function' ? children(value) : children}\n        <input\n          type=\"file\"\n          ref={fileUploadInputRef}\n          style={{ visibility: 'hidden' }}\n          accept={accept}\n          multiple={multiple}\n          onChange={(event) => {\n            handleDrop(event.target.files)\n          }}\n        />\n      </StyledContainer>\n    </FileDropContext>\n  )\n}\n\nFileDrop.displayName = 'FileDrop'\n"],"mappings":";;;;;AAkBA,IAAM,kBAAkB,OAAO,OAAO,EACpC,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,EACF,CAAC;AAED,IAAa,YAAY,EACvB,UACA,QACA,UACA,QACA,GAAG,WACgB;CACnB,MAAM,CAAC,YAAY,iBAAiB,QAAM,SAAS,KAAK;CACxD,MAAM,CAAC,OAAO,YAAY,QAAM,SAAiB,CAAC,CAAC;CACnD,MAAM,qBAAqB,QAAM,OAAyB,IAAI;CAE9D,MAAM,kBAAkB,UAA2C;EACjE,MAAM,eAAe;EACrB,cAAc,IAAI;CACpB;CAEA,MAAM,wBAAwB,cAAc,KAAK;CAEjD,MAAM,cAAc,aAA8B;EAChD,IAAI,CAAC,UAAU;EAEf,cAAc,KAAK;EAEnB,MAAM,QAAQ,MAAM,KAAK,QAAQ;EACjC,OAAO,KAAK;EACZ,SAAS,KAAK;CAChB;CAEA,MAAM,iBAAiB,UAA+C;EACpE,IAAI,CAAC,SAAS,OAAO,CAAC,CAAC,SAAS,MAAM,GAAG,GACvC,mBAAmB,SAAS,MAAM;CAEtC;CAGA,MAAM,QAAQ,QAAM,eACX;EAAE;EAAY;CAAM,IAC3B,CAAC,YAAY,KAAK,CACpB;CAEA,OACE,oBAAC,iBAAD;EAAwB;YACtB,qBAAC,iBAAD;GACE,YAAY;GACZ,aAAa;GACb,SAAS,UAAU;IACjB,MAAM,eAAe;IACrB,WAAW,MAAM,aAAa,KAAK;GACrC;GACA,eAAe,mBAAmB,SAAS,MAAM;GACjD,MAAK;GACL,WAAW;GACX,UAAU;GACV,GAAI;aAXN,CAaG,OAAO,aAAa,aAAa,SAAS,KAAK,IAAI,UACpD,oBAAC,SAAD;IACE,MAAK;IACL,KAAK;IACL,OAAO,EAAE,YAAY,SAAS;IACtB;IACE;IACV,WAAW,UAAU;KACnB,WAAW,MAAM,OAAO,KAAK;IAC/B;GACD,CAAA,CACc;;CACF,CAAA;AAErB;AAEA,SAAS,cAAc"}

package/dist/components/file-drop/useFileDrop.js

@@ -1,7 +1,7 @@
 import { FileDropContext } from "./FileDrop.context.js";
 import * as React$1 from "react";
 //#region src/components/file-drop/useFileDrop.ts
-var useFileDrop = () => React$1.useContext(FileDropContext);
+var useFileDrop = () => React$1.use(FileDropContext);
 //#endregion
 export { useFileDrop };
 

package/dist/components/file-drop/useFileDrop.js.map

@@ -1 +1 @@
-{"version":3,"file":"useFileDrop.js","names":[],"sources":["../../../src/components/file-drop/useFileDrop.ts"],"sourcesContent":["import * as React from 'react'\n\nimport { FileDropContext } from './FileDrop.context'\nimport type { FileDropContextValue } from './types'\n\nexport const useFileDrop = (): FileDropContextValue =>\n  React.useContext(FileDropContext)\n"],"mappings":";;;AAKA,IAAa,oBACX,QAAM,WAAW,eAAe"}
+{"version":3,"file":"useFileDrop.js","names":[],"sources":["../../../src/components/file-drop/useFileDrop.ts"],"sourcesContent":["import * as React from 'react'\n\nimport { FileDropContext } from './FileDrop.context'\nimport type { FileDropContextValue } from './types'\n\nexport const useFileDrop = (): FileDropContextValue =>\n  React.use(FileDropContext)\n"],"mappings":";;;AAKA,IAAa,oBACX,QAAM,IAAI,eAAe"}

package/dist/components/file-input/FileInput.js

@@ -1,6 +1,6 @@
 import { cn } from "../../styled.js";
-import { Button } from "../button/Button.js";
 import { Icon } from "../icon/Icon.js";
+import { Button } from "../button/Button.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Upload } from "@atom-learning/icons";

package/dist/components/form/Form.js

@@ -1,5 +1,5 @@
 import { FormCustomContext } from "./useFormCustomContext.js";
-import "react";
+import * as React$1 from "react";
 import { jsx } from "react/jsx-runtime";
 import { FormProvider, useForm } from "react-hook-form";
 //#region src/components/form/Form.tsx
@@ -9,13 +9,14 @@ var Form = (props) => {
 		defaultValues,
 		mode: validationMode
 	});
+	const customContextValue = React$1.useMemo(() => ({
+		appearance,
+		theme
+	}), [appearance, theme]);
 	return /* @__PURE__ */ jsx(FormProvider, {
 		...methods,
-		children: /* @__PURE__ */ jsx(FormCustomContext.Provider, {
-			value: {
-				appearance,
-				theme
-			},
+		children: /* @__PURE__ */ jsx(FormCustomContext, {
+			value: customContextValue,
 			children: /* @__PURE__ */ jsx("form", {
 				"aria-label": "form",
 				onSubmit: methods.handleSubmit(onSubmit, onError),

package/dist/components/form/Form.js.map

@@ -1 +1 @@
-{"version":3,"file":"Form.js","names":[],"sources":["../../../src/components/form/Form.tsx"],"sourcesContent":["import * as React from 'react'\nimport type {\n  DefaultValues,\n  FieldValues,\n  Mode,\n  SubmitErrorHandler,\n  SubmitHandler,\n  UseFormMethods\n} from 'react-hook-form'\nimport { FormProvider, useForm } from 'react-hook-form'\n\nimport {\n  type FormCustomContextType,\n  FormCustomContext\n} from './useFormCustomContext'\n\ntype FormProps<TFormData extends FieldValues> = Omit<\n  React.HTMLAttributes<HTMLFormElement>,\n  'onSubmit' | 'onError' | 'children'\n> & {\n  defaultValues?: DefaultValues<TFormData>\n  validationMode?: Mode\n  onSubmit: SubmitHandler<TFormData>\n  onError?: SubmitErrorHandler<TFormData>\n  noValidate?: boolean\n  children:\n    | React.ReactNode\n    | ((methods: UseFormMethods<TFormData>) => React.ReactNode)\n}\n\nexport const Form = <TFormData extends FieldValues>(\n  props: FormProps<TFormData> & FormCustomContextType\n) => {\n  const {\n    children,\n    defaultValues,\n    validationMode = 'onBlur',\n    onSubmit,\n    onError,\n    appearance,\n    theme,\n    ...rest\n  } = props\n\n  const methods = useForm<TFormData>({\n    defaultValues,\n    mode: validationMode\n  })\n\n  return (\n    <FormProvider {...methods}>\n      <FormCustomContext.Provider value={{ appearance, theme }}>\n        <form\n          aria-label=\"form\"\n          onSubmit={methods.handleSubmit(onSubmit, onError)}\n          {...rest}\n        >\n          {typeof children === 'function' ? children(methods) : children}\n        </form>\n      </FormCustomContext.Provider>\n    </FormProvider>\n  )\n}\n\nForm.displayName = 'Form'\n"],"mappings":";;;;;AA8BA,IAAa,QACX,UACG;CACH,MAAM,EACJ,UACA,eACA,iBAAiB,UACjB,UACA,SACA,YACA,OACA,GAAG,SACD;CAEJ,MAAM,UAAU,QAAmB;EACjC;EACA,MAAM;CACR,CAAC;CAED,OACE,oBAAC,cAAD;EAAc,GAAI;YAChB,oBAAC,kBAAkB,UAAnB;GAA4B,OAAO;IAAE;IAAY;GAAM;aACrD,oBAAC,QAAD;IACE,cAAW;IACX,UAAU,QAAQ,aAAa,UAAU,OAAO;IAChD,GAAI;cAEH,OAAO,aAAa,aAAa,SAAS,OAAO,IAAI;GAClD,CAAA;EACoB,CAAA;CAChB,CAAA;AAElB;AAEA,KAAK,cAAc"}
+{"version":3,"file":"Form.js","names":[],"sources":["../../../src/components/form/Form.tsx"],"sourcesContent":["import * as React from 'react'\nimport type {\n  DefaultValues,\n  FieldValues,\n  Mode,\n  SubmitErrorHandler,\n  SubmitHandler,\n  UseFormMethods\n} from 'react-hook-form'\nimport { FormProvider, useForm } from 'react-hook-form'\n\nimport {\n  type FormCustomContextType,\n  FormCustomContext\n} from './useFormCustomContext'\n\ntype FormProps<TFormData extends FieldValues> = Omit<\n  React.HTMLAttributes<HTMLFormElement>,\n  'onSubmit' | 'onError' | 'children'\n> & {\n  defaultValues?: DefaultValues<TFormData>\n  validationMode?: Mode\n  onSubmit: SubmitHandler<TFormData>\n  onError?: SubmitErrorHandler<TFormData>\n  noValidate?: boolean\n  children:\n    | React.ReactNode\n    | ((methods: UseFormMethods<TFormData>) => React.ReactNode)\n}\n\nexport const Form = <TFormData extends FieldValues>(\n  props: FormProps<TFormData> & FormCustomContextType\n) => {\n  const {\n    children,\n    defaultValues,\n    validationMode = 'onBlur',\n    onSubmit,\n    onError,\n    appearance,\n    theme,\n    ...rest\n  } = props\n\n  const methods = useForm<TFormData>({\n    defaultValues,\n    mode: validationMode\n  })\n\n  // Memoized: the form re-renders on every RHF state change and would\n  // otherwise push a fresh context value to every consumer each time.\n  const customContextValue = React.useMemo(\n    () => ({ appearance, theme }),\n    [appearance, theme]\n  )\n\n  return (\n    <FormProvider {...methods}>\n      <FormCustomContext value={customContextValue}>\n        <form\n          aria-label=\"form\"\n          onSubmit={methods.handleSubmit(onSubmit, onError)}\n          {...rest}\n        >\n          {typeof children === 'function' ? children(methods) : children}\n        </form>\n      </FormCustomContext>\n    </FormProvider>\n  )\n}\n\nForm.displayName = 'Form'\n"],"mappings":";;;;;AA8BA,IAAa,QACX,UACG;CACH,MAAM,EACJ,UACA,eACA,iBAAiB,UACjB,UACA,SACA,YACA,OACA,GAAG,SACD;CAEJ,MAAM,UAAU,QAAmB;EACjC;EACA,MAAM;CACR,CAAC;CAID,MAAM,qBAAqB,QAAM,eACxB;EAAE;EAAY;CAAM,IAC3B,CAAC,YAAY,KAAK,CACpB;CAEA,OACE,oBAAC,cAAD;EAAc,GAAI;YAChB,oBAAC,mBAAD;GAAmB,OAAO;aACxB,oBAAC,QAAD;IACE,cAAW;IACX,UAAU,QAAQ,aAAa,UAAU,OAAO;IAChD,GAAI;cAEH,OAAO,aAAa,aAAa,SAAS,OAAO,IAAI;GAClD,CAAA;EACW,CAAA;CACP,CAAA;AAElB;AAEA,KAAK,cAAc"}

package/dist/components/form/useFormCustomContext.js

@@ -1,7 +1,7 @@
 import * as React$1 from "react";
 //#region src/components/form/useFormCustomContext.ts
 var FormCustomContext = React$1.createContext({ appearance: "standard" });
-var useFormCustomContext = () => React$1.useContext(FormCustomContext);
+var useFormCustomContext = () => React$1.use(FormCustomContext);
 //#endregion
 export { FormCustomContext, useFormCustomContext };
 

package/dist/components/form/useFormCustomContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"useFormCustomContext.js","names":[],"sources":["../../../src/components/form/useFormCustomContext.ts"],"sourcesContent":["import * as React from 'react'\n\nimport type { InputProps } from '../input/Input'\n\nexport type FormCustomContextType =\n  | {\n      appearance?: InputProps['appearance']\n      theme?: InputProps['theme']\n    }\n  | undefined\n\nexport const FormCustomContext = React.createContext<FormCustomContextType>({\n  appearance: 'standard'\n})\n\nexport const useFormCustomContext = () => React.useContext(FormCustomContext)\n"],"mappings":";;AAWA,IAAa,oBAAoB,QAAM,cAAqC,EAC1E,YAAY,WACd,CAAC;AAED,IAAa,6BAA6B,QAAM,WAAW,iBAAiB"}
+{"version":3,"file":"useFormCustomContext.js","names":[],"sources":["../../../src/components/form/useFormCustomContext.ts"],"sourcesContent":["import * as React from 'react'\n\nimport type { InputProps } from '../input/Input'\n\nexport type FormCustomContextType =\n  | {\n      appearance?: InputProps['appearance']\n      theme?: InputProps['theme']\n    }\n  | undefined\n\nexport const FormCustomContext = React.createContext<FormCustomContextType>({\n  appearance: 'standard'\n})\n\nexport const useFormCustomContext = () => React.use(FormCustomContext)\n"],"mappings":";;AAWA,IAAa,oBAAoB,QAAM,cAAqC,EAC1E,YAAY,WACd,CAAC;AAED,IAAa,6BAA6B,QAAM,IAAI,iBAAiB"}

package/dist/components/index.d.ts

@@ -3,9 +3,7 @@ export { Accordion } from './accordion/Accordion';
 export { ActionIcon } from './action-icon/ActionIcon';
 export { AlertDialog } from './alert-dialog/AlertDialog';
 export { useAlert } from './alert-dialog/AlertDialog.context';
-export declare const Alert: {
-    Provider: ({ children }: React.PropsWithChildren<unknown>) => import("react").JSX.Element;
-};
+export { Alert } from './alert-dialog/Alert';
 export { Avatar } from './avatar/Avatar';
 export { Badge, type BadgeProps } from './badge/Badge';
 export { BannerRegular } from './banner/banner-regular/BannerRegular';

package/dist/components/inline-message/InlineMessage.js

@@ -1,6 +1,6 @@
 import { styled } from "../../styled.js";
-import { Text } from "../text/Text.js";
 import { Icon } from "../icon/Icon.js";
+import { Text } from "../text/Text.js";
 import { INLINE_MESSAGE_ICONS } from "./InlineMessage.config.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/components/input/Input.js

@@ -1,7 +1,7 @@
 import { styled } from "../../styled.js";
 import { Text } from "../text/Text.js";
 import { overrideStyledVariantValue } from "../../utilities/override-styled-variant-value/overrideStyledVariantValue.js";
-import * as React$1 from "react";
+import "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/input/Input.tsx
 var InputBackground = styled("div", {
@@ -91,7 +91,7 @@ var toTextSize = {
 	xl: "lg"
 };
 var InputText = ({ ref, type = "text", size, ...rest }) => {
-	const textSize = React$1.useMemo(() => overrideStyledVariantValue(size, (s) => toTextSize[s]), [size]);
+	const textSize = overrideStyledVariantValue(size, (s) => toTextSize[s]);
 	return /* @__PURE__ */ jsx(StyledInputText, {
 		ref,
 		as: "input",