@atom-learning/components 6.14.3 → 6.15.0

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

@@ -1,3 +1,4 @@
+import { cn } from "../../../styled.js";
 import { Table } from "../../table/Table.js";
 import { AsyncDataState } from "../DataTable.types.js";
 import { useDataTable } from "../DataTableContext.js";
@@ -5,7 +6,6 @@ import { DataTableHead } from "../DataTableHead.js";
 import { DataTableLoading } from "../DataTableLoading.js";
 import { SortableRoot } from "../../sortable/SortableRoot.js";
 import { DragAndDropTableBody } from "./DragAndDropTableBody.js";
-import clsx from "clsx";
 import * as React$1 from "react";
 import { arrayMove } from "@dnd-kit/sortable";
 //#region src/components/data-table/drag-and-drop/DragAndDropTable.tsx
@@ -36,7 +36,7 @@ var DragAndDropTable = ({ idColumn = "id", onDragAndDrop, sortable, striped, the
 		sortableIds: rowIds
 	}, /* @__PURE__ */ React$1.createElement(DataTableLoading, null), /* @__PURE__ */ React$1.createElement(Table, {
 		...props,
-		className: clsx(className, isPending && [
+		className: cn(className, isPending && [
 			"opacity-50",
 			"pointer-events-none",
 			"transition-opacity,duration-250,linear,delay-150"

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

@@ -1 +1 @@
-{"version":3,"file":"DragAndDropTable.js","names":[],"sources":["../../../../src/components/data-table/drag-and-drop/DragAndDropTable.tsx"],"sourcesContent":["import { arrayMove } from '@dnd-kit/sortable'\nimport clsx from 'clsx'\nimport * as React from 'react'\n\nimport * as Sortable from '../../sortable'\nimport { Table } from '../../table/Table'\nimport { AsyncDataState, TAsyncDataResult } from '../DataTable.types'\nimport { useDataTable } from '../DataTableContext'\nimport { DataTableHead } from '../DataTableHead'\nimport { DataTableLoading } from '../DataTableLoading'\nimport type { DataTableTableProps } from '../DataTableTable'\nimport { DragAndDropTableBody } from './DragAndDropTableBody'\n\ntype DragAndDropTableProps = DataTableTableProps & {\n  className?: string\n  idColumn?: string\n  onDragAndDrop?: (onDragAndDropData: {\n    oldIndex: number\n    newIndex: number\n    newData: TAsyncDataResult\n  }) => void\n}\n\nexport const DragAndDropTable = ({\n  idColumn = 'id',\n  onDragAndDrop,\n  sortable,\n  striped,\n  theme,\n  className,\n  ...props\n}: DragAndDropTableProps) => {\n  const { asyncDataState, data, setData } = useDataTable()\n  const isPending = asyncDataState === AsyncDataState.PENDING\n\n  const rowIds = React.useMemo(\n    () =>\n      data.results.map((row) => {\n        return row[idColumn] as React.ReactText\n      }),\n    [data]\n  )\n  const handleSortChange = React.useCallback(\n    ({ oldIndex, newIndex }) => {\n      const sortedResults = arrayMove(data.results, oldIndex, newIndex)\n      const newData = { results: sortedResults, total: data.total }\n      setData({ results: sortedResults, total: data.total })\n      onDragAndDrop?.({ oldIndex, newIndex, newData })\n    },\n    [data, onDragAndDrop]\n  )\n\n  return (\n    <Sortable.Root onSortChange={handleSortChange} sortableIds={rowIds}>\n      <DataTableLoading />\n      <Table\n        {...props}\n        className={clsx(\n          className,\n          isPending && [\n            'opacity-50',\n            'pointer-events-none',\n            'transition-opacity,duration-250,linear,delay-150'\n          ]\n        )}\n      >\n        <DataTableHead theme={theme} sortable={sortable} />\n        <DragAndDropTableBody striped={striped} idColumn={idColumn} />\n      </Table>\n    </Sortable.Root>\n  )\n}\n"],"mappings":";;;;;;;;;;;AAuBA,IAAa,oBAAoB,EAC/B,WAAW,MACX,eACA,UACA,SACA,OACA,WACA,GAAG,YACwB;CAC3B,MAAM,EAAE,gBAAgB,MAAM,YAAY,cAAc;CACxD,MAAM,YAAY,mBAAmB,eAAe;CAEpD,MAAM,SAAS,QAAM,cAEjB,KAAK,QAAQ,KAAK,QAAQ;AACxB,SAAO,IAAI;GACX,EACJ,CAAC,KAAK,CACP;CACD,MAAM,mBAAmB,QAAM,aAC5B,EAAE,UAAU,eAAe;EAC1B,MAAM,gBAAgB,UAAU,KAAK,SAAS,UAAU,SAAS;EACjE,MAAM,UAAU;GAAE,SAAS;GAAe,OAAO,KAAK;GAAO;AAC7D,UAAQ;GAAE,SAAS;GAAe,OAAO,KAAK;GAAO,CAAC;AACtD,kBAAgB;GAAE;GAAU;GAAU;GAAS,CAAC;IAElD,CAAC,MAAM,cAAc,CACtB;AAED,QACE,wBAAA,cAAC,cAAD;EAAe,cAAc;EAAkB,aAAa;EAgB5C,EAfd,wBAAA,cAAC,kBAAA,KAAmB,EACpB,wBAAA,cAAC,OAAD;EACE,GAAI;EACJ,WAAW,KACT,WACA,aAAa;GACX;GACA;GACA;GACD,CACF;EAIK,EAFN,wBAAA,cAAC,eAAD;EAAsB;EAAiB;EAAY,CAAA,EACnD,wBAAA,cAAC,sBAAD;EAA+B;EAAmB;EAAY,CAAA,CACxD,CACM"}
+{"version":3,"file":"DragAndDropTable.js","names":[],"sources":["../../../../src/components/data-table/drag-and-drop/DragAndDropTable.tsx"],"sourcesContent":["import { arrayMove } from '@dnd-kit/sortable'\nimport * as React from 'react'\n\nimport { cn } from '~/styled'\n\nimport * as Sortable from '../../sortable'\nimport { Table } from '../../table/Table'\nimport { AsyncDataState, TAsyncDataResult } from '../DataTable.types'\nimport { useDataTable } from '../DataTableContext'\nimport { DataTableHead } from '../DataTableHead'\nimport { DataTableLoading } from '../DataTableLoading'\nimport type { DataTableTableProps } from '../DataTableTable'\nimport { DragAndDropTableBody } from './DragAndDropTableBody'\n\ntype DragAndDropTableProps = DataTableTableProps & {\n  className?: string\n  idColumn?: string\n  onDragAndDrop?: (onDragAndDropData: {\n    oldIndex: number\n    newIndex: number\n    newData: TAsyncDataResult\n  }) => void\n}\n\nexport const DragAndDropTable = ({\n  idColumn = 'id',\n  onDragAndDrop,\n  sortable,\n  striped,\n  theme,\n  className,\n  ...props\n}: DragAndDropTableProps) => {\n  const { asyncDataState, data, setData } = useDataTable()\n  const isPending = asyncDataState === AsyncDataState.PENDING\n\n  const rowIds = React.useMemo(\n    () =>\n      data.results.map((row) => {\n        return row[idColumn] as React.ReactText\n      }),\n    [data]\n  )\n  const handleSortChange = React.useCallback(\n    ({ oldIndex, newIndex }) => {\n      const sortedResults = arrayMove(data.results, oldIndex, newIndex)\n      const newData = { results: sortedResults, total: data.total }\n      setData({ results: sortedResults, total: data.total })\n      onDragAndDrop?.({ oldIndex, newIndex, newData })\n    },\n    [data, onDragAndDrop]\n  )\n\n  return (\n    <Sortable.Root onSortChange={handleSortChange} sortableIds={rowIds}>\n      <DataTableLoading />\n      <Table\n        {...props}\n        className={cn(\n          className,\n          isPending && [\n            'opacity-50',\n            'pointer-events-none',\n            'transition-opacity,duration-250,linear,delay-150'\n          ]\n        )}\n      >\n        <DataTableHead theme={theme} sortable={sortable} />\n        <DragAndDropTableBody striped={striped} idColumn={idColumn} />\n      </Table>\n    </Sortable.Root>\n  )\n}\n"],"mappings":";;;;;;;;;;;AAwBA,IAAa,oBAAoB,EAC/B,WAAW,MACX,eACA,UACA,SACA,OACA,WACA,GAAG,YACwB;CAC3B,MAAM,EAAE,gBAAgB,MAAM,YAAY,cAAc;CACxD,MAAM,YAAY,mBAAmB,eAAe;CAEpD,MAAM,SAAS,QAAM,cAEjB,KAAK,QAAQ,KAAK,QAAQ;AACxB,SAAO,IAAI;GACX,EACJ,CAAC,KAAK,CACP;CACD,MAAM,mBAAmB,QAAM,aAC5B,EAAE,UAAU,eAAe;EAC1B,MAAM,gBAAgB,UAAU,KAAK,SAAS,UAAU,SAAS;EACjE,MAAM,UAAU;GAAE,SAAS;GAAe,OAAO,KAAK;GAAO;AAC7D,UAAQ;GAAE,SAAS;GAAe,OAAO,KAAK;GAAO,CAAC;AACtD,kBAAgB;GAAE;GAAU;GAAU;GAAS,CAAC;IAElD,CAAC,MAAM,cAAc,CACtB;AAED,QACE,wBAAA,cAAC,cAAD;EAAe,cAAc;EAAkB,aAAa;EAgB5C,EAfd,wBAAA,cAAC,kBAAA,KAAmB,EACpB,wBAAA,cAAC,OAAD;EACE,GAAI;EACJ,WAAW,GACT,WACA,aAAa;GACX;GACA;GACA;GACD,CACF;EAIK,EAFN,wBAAA,cAAC,eAAD;EAAsB;EAAiB;EAAY,CAAA,EACnD,wBAAA,cAAC,sBAAD;EAA+B;EAAmB;EAAY,CAAA,CACxD,CACM"}

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

@@ -10,7 +10,7 @@ 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";
+import customParseFormat from "dayjs/plugin/customParseFormat.js";
 //#region src/components/date-input/DateInput.tsx
 dayjs.extend(customParseFormat);
 var formatDateToString = (date, dateFormat = DEFAULT_DATE_FORMAT) => date ? dayjs(date).format(dateFormat) : "";

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    appearance?: 'standard' | 'modern'\n    theme?: 'white' | 'grey'\n    revalidate?: () => Promise<boolean>\n    onChange?: (value?: Date) => void\n  }\n\nconst formatDateToString = (date?: Date, dateFormat = DEFAULT_DATE_FORMAT) =>\n  date ? dayjs(date).format(dateFormat) : ''\n\nexport const DateInput = React.forwardRef<HTMLInputElement, DateInputProps>(\n  (\n    {\n      initialDate,\n      dateFormat = DEFAULT_DATE_FORMAT,\n      firstDayOfWeek = 1,\n      disabled,\n      monthNames,\n      weekdayNames,\n      size = 'md',\n      appearance,\n      theme,\n      labels,\n      revalidate,\n      onChange,\n      minDate,\n      maxDate,\n      ...remainingProps\n    },\n    ref\n  ) => {\n    const [date, setDate] = React.useState(\n      initialDate ? dayjs(initialDate).toDate() : undefined\n    )\n\n    const [inputElRef, setInputElRef] = useCallbackRefState()\n    React.useImperativeHandle(ref, () => inputElRef as HTMLInputElement)\n\n    const dateString = formatDateToString(date, dateFormat)\n\n    const handleInputChange = React.useCallback(\n      (event) => {\n        const newDateString = event.target.value\n        const parsedInputDate = dayjs(newDateString, dateFormat)\n        const newDate = parsedInputDate.isValid()\n          ? parsedInputDate.toDate()\n          : undefined\n        setDate(newDate)\n        onChange?.(newDate)\n      },\n      [dateFormat, onChange]\n    )\n\n    const handleCalendarChange = React.useCallback(\n      (newDate) => {\n        setDate(newDate)\n\n        const mirrorChangeToInputElement = () => {\n          if (!inputElRef) return\n\n          // Call the `set` function on the input value directly to mirror the change.\n          // Props to: https://stackoverflow.com/a/46012210\n          const nativeInputValueSetter = Object.getOwnPropertyDescriptor(\n            window.HTMLInputElement.prototype,\n            'value'\n          )?.set\n          nativeInputValueSetter?.call(\n            inputElRef,\n            formatDateToString(newDate, dateFormat)\n          )\n          const event = new Event('input', { bubbles: true })\n          inputElRef.dispatchEvent(event)\n        }\n        mirrorChangeToInputElement()\n      },\n      [dateFormat, inputElRef]\n    )\n\n    const updatedLabels = {\n      ...DEFAULT_LABELS,\n      ...labels\n    }\n\n    const [calendarOpen, setCalendarOpen] = React.useState(false)\n\n    const refDateToday = React.useRef<HTMLButtonElement>(null)\n    const refDateSelected = React.useRef<HTMLButtonElement>(null)\n\n    const iconSize = React.useMemo(() => getFieldIconSize(size), [size])\n\n    return (\n      <div className=\"relative h-max\">\n        <Input\n          name=\"date\"\n          disabled={disabled}\n          size={size}\n          appearance={appearance}\n          theme={theme}\n          {...remainingProps}\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":"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"}
+{"version":3,"file":"DateInput.js","names":[],"sources":["../../../src/components/date-input/DateInput.tsx"],"sourcesContent":["import { CalendarEvent } from '@atom-learning/icons'\nimport dayjs from 'dayjs'\nimport customParseFormat from 'dayjs/plugin/customParseFormat.js'\nimport type { Props as DayzedInterface } from 'dayzed'\nimport * as React from 'react'\n\nimport { useCallbackRefState } from '~/utilities/hooks/useCallbackRef'\nimport { getFieldIconSize } from '~/utilities/style/get-icon-size'\n\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Calendar, CalendarTranslationProps } from '../calendar/Calendar'\nimport { DEFAULT_LABELS } from '../calendar/constants'\nimport { Icon } from '../icon/Icon'\nimport { Input } from '../input/Input'\nimport { Popover } from '../popover/Popover'\nimport { DEFAULT_DATE_FORMAT } from './constants'\n\ndayjs.extend(customParseFormat)\n\nexport type DateInputProps = Omit<DayzedInterface, 'onDateSelected'> &\n  CalendarTranslationProps & {\n    initialDate?: Date\n    dateFormat?: string\n    disabled?: boolean\n    size?: 'sm' | 'md' | 'lg'\n    appearance?: 'standard' | 'modern'\n    theme?: 'white' | 'grey'\n    revalidate?: () => Promise<boolean>\n    onChange?: (value?: Date) => void\n  }\n\nconst formatDateToString = (date?: Date, dateFormat = DEFAULT_DATE_FORMAT) =>\n  date ? dayjs(date).format(dateFormat) : ''\n\nexport const DateInput = React.forwardRef<HTMLInputElement, DateInputProps>(\n  (\n    {\n      initialDate,\n      dateFormat = DEFAULT_DATE_FORMAT,\n      firstDayOfWeek = 1,\n      disabled,\n      monthNames,\n      weekdayNames,\n      size = 'md',\n      appearance,\n      theme,\n      labels,\n      revalidate,\n      onChange,\n      minDate,\n      maxDate,\n      ...remainingProps\n    },\n    ref\n  ) => {\n    const [date, setDate] = React.useState(\n      initialDate ? dayjs(initialDate).toDate() : undefined\n    )\n\n    const [inputElRef, setInputElRef] = useCallbackRefState()\n    React.useImperativeHandle(ref, () => inputElRef as HTMLInputElement)\n\n    const dateString = formatDateToString(date, dateFormat)\n\n    const handleInputChange = React.useCallback(\n      (event) => {\n        const newDateString = event.target.value\n        const parsedInputDate = dayjs(newDateString, dateFormat)\n        const newDate = parsedInputDate.isValid()\n          ? parsedInputDate.toDate()\n          : undefined\n        setDate(newDate)\n        onChange?.(newDate)\n      },\n      [dateFormat, onChange]\n    )\n\n    const handleCalendarChange = React.useCallback(\n      (newDate) => {\n        setDate(newDate)\n\n        const mirrorChangeToInputElement = () => {\n          if (!inputElRef) return\n\n          // Call the `set` function on the input value directly to mirror the change.\n          // Props to: https://stackoverflow.com/a/46012210\n          const nativeInputValueSetter = Object.getOwnPropertyDescriptor(\n            window.HTMLInputElement.prototype,\n            'value'\n          )?.set\n          nativeInputValueSetter?.call(\n            inputElRef,\n            formatDateToString(newDate, dateFormat)\n          )\n          const event = new Event('input', { bubbles: true })\n          inputElRef.dispatchEvent(event)\n        }\n        mirrorChangeToInputElement()\n      },\n      [dateFormat, inputElRef]\n    )\n\n    const updatedLabels = {\n      ...DEFAULT_LABELS,\n      ...labels\n    }\n\n    const [calendarOpen, setCalendarOpen] = React.useState(false)\n\n    const refDateToday = React.useRef<HTMLButtonElement>(null)\n    const refDateSelected = React.useRef<HTMLButtonElement>(null)\n\n    const iconSize = React.useMemo(() => getFieldIconSize(size), [size])\n\n    return (\n      <div className=\"relative h-max\">\n        <Input\n          name=\"date\"\n          disabled={disabled}\n          size={size}\n          appearance={appearance}\n          theme={theme}\n          {...remainingProps}\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":"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"}

package/dist/components/dialog/DialogHeading.js

@@ -1,11 +1,11 @@
+import { cn } from "../../styled.js";
 import { Heading } from "../heading/Heading.js";
-import clsx from "clsx";
 import * as React$1 from "react";
 //#region src/components/dialog/DialogHeading.tsx
 var DialogHeading = ({ className, ...rest }) => /* @__PURE__ */ React$1.createElement(Heading, {
 	size: "sm",
 	...rest,
-	className: clsx("border-b", "border-b-grey-200", "pb-8", "pt-0", "px-8", "mb-8", "-mx-8", "box-content", className)
+	className: cn("border-b", "border-b-grey-200", "pb-8", "pt-0", "px-8", "mb-8", "-mx-8", "box-content", className)
 });
 //#endregion
 export { DialogHeading };

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

@@ -1 +1 @@
-{"version":3,"file":"DialogHeading.js","names":[],"sources":["../../../src/components/dialog/DialogHeading.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport * as React from 'react'\n\nimport { Heading } from '../heading/Heading'\n\nexport const DialogHeading = ({\n  className,\n  ...rest\n}: React.ComponentProps<typeof Heading>) => (\n  <Heading\n    size=\"sm\"\n    {...rest}\n    className={clsx(\n      'border-b',\n      'border-b-grey-200',\n      'pb-8',\n      'pt-0',\n      'px-8',\n      'mb-8',\n      '-mx-8',\n      'box-content',\n      className\n    )}\n  />\n)\n"],"mappings":";;;;AAKA,IAAa,iBAAiB,EAC5B,WACA,GAAG,WAEH,wBAAA,cAAC,SAAD;CACE,MAAK;CACL,GAAI;CACJ,WAAW,KACT,YACA,qBACA,QACA,QACA,QACA,QACA,SACA,eACA,UACD;CACD,CAAA"}
+{"version":3,"file":"DialogHeading.js","names":[],"sources":["../../../src/components/dialog/DialogHeading.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { cn } from '~/styled'\n\nimport { Heading } from '../heading/Heading'\n\nexport const DialogHeading = ({\n  className,\n  ...rest\n}: React.ComponentProps<typeof Heading>) => (\n  <Heading\n    size=\"sm\"\n    {...rest}\n    className={cn(\n      'border-b',\n      'border-b-grey-200',\n      'pb-8',\n      'pt-0',\n      'px-8',\n      'mb-8',\n      '-mx-8',\n      'box-content',\n      className\n    )}\n  />\n)\n"],"mappings":";;;;AAMA,IAAa,iBAAiB,EAC5B,WACA,GAAG,WAEH,wBAAA,cAAC,SAAD;CACE,MAAK;CACL,GAAI;CACJ,WAAW,GACT,YACA,qBACA,QACA,QACA,QACA,QACA,SACA,eACA,UACD;CACD,CAAA"}

package/dist/components/field-wrapper/FieldDescription.js

@@ -1,10 +1,10 @@
+import { cn } from "../../styled.js";
 import { Text } from "../text/Text.js";
-import clsx from "clsx";
 import * as React$1 from "react";
 //#region src/components/field-wrapper/FieldDescription.tsx
 var Description = ({ children, className }) => /* @__PURE__ */ React$1.createElement(Text, {
 	size: "sm",
-	className: clsx("text-grey-700", "max-w-[80ch]", className)
+	className: cn("text-grey-700", "max-w-[80ch]", className)
 }, children);
 //#endregion
 export { Description };

package/dist/components/field-wrapper/FieldDescription.js.map

@@ -1 +1 @@
-{"version":3,"file":"FieldDescription.js","names":[],"sources":["../../../src/components/field-wrapper/FieldDescription.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport * as React from 'react'\n\nimport { Text } from '~/components/text/Text'\n\nexport const Description = ({\n  children,\n  className\n}: React.PropsWithChildren<{ className?: string }>) => (\n  <Text size=\"sm\" className={clsx('text-grey-700', 'max-w-[80ch]', className)}>\n    {children}\n  </Text>\n)\n"],"mappings":";;;;AAKA,IAAa,eAAe,EAC1B,UACA,gBAEA,wBAAA,cAAC,MAAD;CAAM,MAAK;CAAK,WAAW,KAAK,iBAAiB,gBAAgB,UAAU;CAEpE,EADJ,SACI"}
+{"version":3,"file":"FieldDescription.js","names":[],"sources":["../../../src/components/field-wrapper/FieldDescription.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Text } from '~/components/text/Text'\nimport { cn } from '~/styled'\n\nexport const Description = ({\n  children,\n  className\n}: React.PropsWithChildren<{ className?: string }>) => (\n  <Text size=\"sm\" className={cn('text-grey-700', 'max-w-[80ch]', className)}>\n    {children}\n  </Text>\n)\n"],"mappings":";;;;AAKA,IAAa,eAAe,EAC1B,UACA,gBAEA,wBAAA,cAAC,MAAD;CAAM,MAAK;CAAK,WAAW,GAAG,iBAAiB,gBAAgB,UAAU;CAElE,EADJ,SACI"}

package/dist/components/field-wrapper/FieldWrapper.js

@@ -1,11 +1,11 @@
+import { cn } from "../../styled.js";
 import { InlineMessage } from "../inline-message/InlineMessage.js";
 import { Label } from "../label/Label.js";
 import { Description } from "./FieldDescription.js";
 import { Link } from "../link/Link.js";
-import clsx from "clsx";
 import * as React$1 from "react";
 //#region src/components/field-wrapper/FieldWrapper.tsx
-var FieldWrapper = ({ children, error, fieldId, label, prompt, description, required, hideLabel, appearance, ...rest }) => /* @__PURE__ */ React$1.createElement("div", rest, /* @__PURE__ */ React$1.createElement("div", { className: clsx("mb-3", "flex", "items-center", "justify-between", hideLabel && "sr-only") }, /* @__PURE__ */ React$1.createElement(Label, {
+var FieldWrapper = ({ children, error, fieldId, label, prompt, description, required, hideLabel, appearance, ...rest }) => /* @__PURE__ */ React$1.createElement("div", rest, /* @__PURE__ */ React$1.createElement("div", { className: cn("mb-3", "flex", "items-center", "justify-between", hideLabel && "sr-only") }, /* @__PURE__ */ React$1.createElement(Label, {
 	htmlFor: fieldId,
 	required,
 	appearance

package/dist/components/field-wrapper/FieldWrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"FieldWrapper.js","names":[],"sources":["../../../src/components/field-wrapper/FieldWrapper.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport * as React from 'react'\n\nimport { ValidationOptions } from '~/components/form/validation'\nimport { InlineMessage } from '~/components/inline-message/InlineMessage'\nimport { Label } from '~/components/label/Label'\nimport { Link } from '~/components/link/Link'\n\nimport { type LabelProps } from '../label/Label'\nimport { Description } from './FieldDescription'\n\nexport type FieldWrapperProps = {\n  className?: string\n  error?: string\n  fieldId: string\n  label: string\n  prompt?: { link?: string; label: string; onClick?: () => void }\n  description?: string\n  required?: boolean\n  hideLabel?: boolean\n  appearance?: LabelProps['appearance']\n}\n\nexport type FieldElementWrapperProps = Omit<FieldWrapperProps, 'fieldId'> & {\n  name: string\n  validation?: ValidationOptions\n}\n\nexport const FieldWrapper = ({\n  children,\n  error,\n  fieldId,\n  label,\n  prompt,\n  description,\n  required,\n  hideLabel,\n  appearance,\n  ...rest\n}: React.PropsWithChildren<FieldWrapperProps>) => (\n  <div {...rest}>\n    <div\n      className={clsx(\n        'mb-3',\n        'flex',\n        'items-center',\n        'justify-between',\n        hideLabel && 'sr-only'\n      )}\n    >\n      <Label htmlFor={fieldId} required={required} appearance={appearance}>\n        {label}\n      </Label>\n      {prompt && (\n        <Link href={prompt?.link} onClick={prompt?.onClick} size=\"sm\">\n          {prompt.label}\n        </Link>\n      )}\n    </div>\n    {description && <Description className=\"mb-3\">{description}</Description>}\n    {children}\n    {error && <InlineMessage className=\"mt-2\">{error}</InlineMessage>}\n  </div>\n)\n\nFieldWrapper.displayName = 'FieldWrapper'\n"],"mappings":";;;;;;;AA4BA,IAAa,gBAAgB,EAC3B,UACA,OACA,SACA,OACA,QACA,aACA,UACA,WACA,YACA,GAAG,WAEH,wBAAA,cAAC,OAAQ,MACP,wBAAA,cAAC,OAAD,EACE,WAAW,KACT,QACA,QACA,gBACA,mBACA,aAAa,UACd,EAUG,EARJ,wBAAA,cAAC,OAAD;CAAO,SAAS;CAAmB;CAAsB;CAEjD,EADL,MACK,EACP,UACC,wBAAA,cAAC,MAAD;CAAM,MAAM,QAAQ;CAAM,SAAS,QAAQ;CAAS,MAAK;CAElD,EADJ,OAAO,MACH,CAEL,EACL,eAAe,wBAAA,cAAC,aAAD,EAAa,WAAU,QAAkC,EAA1B,YAA0B,EACxE,UACA,SAAS,wBAAA,cAAC,eAAD,EAAe,WAAU,QAA8B,EAAtB,MAAsB,CAC7D;AAGR,aAAa,cAAc"}
+{"version":3,"file":"FieldWrapper.js","names":[],"sources":["../../../src/components/field-wrapper/FieldWrapper.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { ValidationOptions } from '~/components/form/validation'\nimport { InlineMessage } from '~/components/inline-message/InlineMessage'\nimport { Label } from '~/components/label/Label'\nimport { Link } from '~/components/link/Link'\nimport { cn } from '~/styled'\n\nimport { type LabelProps } from '../label/Label'\nimport { Description } from './FieldDescription'\n\nexport type FieldWrapperProps = {\n  className?: string\n  error?: string\n  fieldId: string\n  label: string\n  prompt?: { link?: string; label: string; onClick?: () => void }\n  description?: string\n  required?: boolean\n  hideLabel?: boolean\n  appearance?: LabelProps['appearance']\n}\n\nexport type FieldElementWrapperProps = Omit<FieldWrapperProps, 'fieldId'> & {\n  name: string\n  validation?: ValidationOptions\n}\n\nexport const FieldWrapper = ({\n  children,\n  error,\n  fieldId,\n  label,\n  prompt,\n  description,\n  required,\n  hideLabel,\n  appearance,\n  ...rest\n}: React.PropsWithChildren<FieldWrapperProps>) => (\n  <div {...rest}>\n    <div\n      className={cn(\n        'mb-3',\n        'flex',\n        'items-center',\n        'justify-between',\n        hideLabel && 'sr-only'\n      )}\n    >\n      <Label htmlFor={fieldId} required={required} appearance={appearance}>\n        {label}\n      </Label>\n      {prompt && (\n        <Link href={prompt?.link} onClick={prompt?.onClick} size=\"sm\">\n          {prompt.label}\n        </Link>\n      )}\n    </div>\n    {description && <Description className=\"mb-3\">{description}</Description>}\n    {children}\n    {error && <InlineMessage className=\"mt-2\">{error}</InlineMessage>}\n  </div>\n)\n\nFieldWrapper.displayName = 'FieldWrapper'\n"],"mappings":";;;;;;;AA4BA,IAAa,gBAAgB,EAC3B,UACA,OACA,SACA,OACA,QACA,aACA,UACA,WACA,YACA,GAAG,WAEH,wBAAA,cAAC,OAAQ,MACP,wBAAA,cAAC,OAAD,EACE,WAAW,GACT,QACA,QACA,gBACA,mBACA,aAAa,UACd,EAUG,EARJ,wBAAA,cAAC,OAAD;CAAO,SAAS;CAAmB;CAAsB;CAEjD,EADL,MACK,EACP,UACC,wBAAA,cAAC,MAAD;CAAM,MAAM,QAAQ;CAAM,SAAS,QAAQ;CAAS,MAAK;CAElD,EADJ,OAAO,MACH,CAEL,EACL,eAAe,wBAAA,cAAC,aAAD,EAAa,WAAU,QAAkC,EAA1B,YAA0B,EACxE,UACA,SAAS,wBAAA,cAAC,eAAD,EAAe,WAAU,QAA8B,EAAtB,MAAsB,CAC7D;AAGR,aAAa,cAAc"}

package/dist/components/field-wrapper/InlineFieldWrapper.js

@@ -1,9 +1,9 @@
+import { cn } from "../../styled.js";
 import { Checkbox } from "../checkbox/Checkbox.js";
 import { InlineMessage } from "../inline-message/InlineMessage.js";
 import { Label } from "../label/Label.js";
 import { RadioButton } from "../radio-button/RadioButton.js";
 import { Description } from "./FieldDescription.js";
-import clsx from "clsx";
 import * as React$1 from "react";
 //#region src/components/field-wrapper/InlineFieldWrapper.tsx
 var InlineFieldWrapper = ({ align = "start", children, className, description, direction = "row", error, label, required }) => /* @__PURE__ */ React$1.createElement("div", { className }, /* @__PURE__ */ React$1.createElement(Label, {
@@ -11,7 +11,7 @@ var InlineFieldWrapper = ({ align = "start", children, className, description, d
 	direction,
 	required,
 	type: "inline"
-}, React$1.Children.map(children, (child) => /* @__PURE__ */ React$1.createElement("div", { className: clsx(direction === "reverse" && "ml-3", direction === "row" && "mr-3", (child?.type === Checkbox || child?.type === RadioButton) && child?.props?.size !== "lg" && "translate-y-1") }, child)), label), error && /* @__PURE__ */ React$1.createElement(InlineMessage, { className: "mt-2" }, error), description && /* @__PURE__ */ React$1.createElement(Description, { className: clsx("mt-2", direction === "reverse" && "mr-7", direction === "row" && "ml-7") }, description));
+}, React$1.Children.map(children, (child) => /* @__PURE__ */ React$1.createElement("div", { className: cn(direction === "reverse" && "ml-3", direction === "row" && "mr-3", (child?.type === Checkbox || child?.type === RadioButton) && child?.props?.size !== "lg" && "translate-y-1") }, child)), label), error && /* @__PURE__ */ React$1.createElement(InlineMessage, { className: "mt-2" }, error), description && /* @__PURE__ */ React$1.createElement(Description, { className: cn("mt-2", direction === "reverse" && "mr-7", direction === "row" && "ml-7") }, description));
 InlineFieldWrapper.displayName = "InlineFieldWrapper";
 //#endregion
 export { InlineFieldWrapper };

package/dist/components/field-wrapper/InlineFieldWrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"InlineFieldWrapper.js","names":[],"sources":["../../../src/components/field-wrapper/InlineFieldWrapper.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport * as React from 'react'\n\nimport { Checkbox } from '~/components/checkbox/Checkbox'\nimport { InlineMessage } from '~/components/inline-message/InlineMessage'\nimport { Label } from '~/components/label/Label'\nimport { RadioButton } from '~/components/radio-button/RadioButton'\n\nimport { Description } from './FieldDescription'\n\ntype InlineFieldWrapperProps = {\n  className?: string\n  error?: string\n  label: string\n  required?: boolean\n  align?: 'start' | 'center'\n  direction?: 'row' | 'reverse'\n  description?: string\n}\n\nexport const InlineFieldWrapper = ({\n  align = 'start',\n  children,\n  className,\n  description,\n  direction = 'row',\n  error,\n  label,\n  required\n}: React.PropsWithChildren<InlineFieldWrapperProps>) => (\n  <div className={className}>\n    <Label\n      align={align}\n      direction={direction}\n      required={required}\n      type=\"inline\"\n    >\n      {React.Children.map(children, (child: any) => (\n        <div\n          className={clsx(\n            direction === 'reverse' && 'ml-3',\n            direction === 'row' && 'mr-3',\n            (child?.type === Checkbox || child?.type === RadioButton) &&\n              child?.props?.size !== 'lg' &&\n              'translate-y-1'\n          )}\n        >\n          {child}\n        </div>\n      ))}\n      {label}\n    </Label>\n    {error && <InlineMessage className=\"mt-2\">{error}</InlineMessage>}\n    {description && (\n      <Description\n        className={clsx(\n          'mt-2',\n          direction === 'reverse' && 'mr-7',\n          direction === 'row' && 'ml-7'\n        )}\n      >\n        {description}\n      </Description>\n    )}\n  </div>\n)\n\nInlineFieldWrapper.displayName = 'InlineFieldWrapper'\n"],"mappings":";;;;;;;;AAoBA,IAAa,sBAAsB,EACjC,QAAQ,SACR,UACA,WACA,aACA,YAAY,OACZ,OACA,OACA,eAEA,wBAAA,cAAC,OAAD,EAAgB,WAkCV,EAjCJ,wBAAA,cAAC,OAAD;CACS;CACI;CACD;CACV,MAAK;CAgBC,EAdL,QAAM,SAAS,IAAI,WAAW,UAC7B,wBAAA,cAAC,OAAD,EACE,WAAW,KACT,cAAc,aAAa,QAC3B,cAAc,SAAS,SACtB,OAAO,SAAS,YAAY,OAAO,SAAS,gBAC3C,OAAO,OAAO,SAAS,QACvB,gBACH,EAGG,EADH,MACG,CACN,EACD,MACK,EACP,SAAS,wBAAA,cAAC,eAAD,EAAe,WAAU,QAA8B,EAAtB,MAAsB,EAChE,eACC,wBAAA,cAAC,aAAD,EACE,WAAW,KACT,QACA,cAAc,aAAa,QAC3B,cAAc,SAAS,OACxB,EAGW,EADX,YACW,CAEZ;AAGR,mBAAmB,cAAc"}
+{"version":3,"file":"InlineFieldWrapper.js","names":[],"sources":["../../../src/components/field-wrapper/InlineFieldWrapper.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Checkbox } from '~/components/checkbox/Checkbox'\nimport { InlineMessage } from '~/components/inline-message/InlineMessage'\nimport { Label } from '~/components/label/Label'\nimport { RadioButton } from '~/components/radio-button/RadioButton'\nimport { cn } from '~/styled'\n\nimport { Description } from './FieldDescription'\n\ntype InlineFieldWrapperProps = {\n  className?: string\n  error?: string\n  label: string\n  required?: boolean\n  align?: 'start' | 'center'\n  direction?: 'row' | 'reverse'\n  description?: string\n}\n\nexport const InlineFieldWrapper = ({\n  align = 'start',\n  children,\n  className,\n  description,\n  direction = 'row',\n  error,\n  label,\n  required\n}: React.PropsWithChildren<InlineFieldWrapperProps>) => (\n  <div className={className}>\n    <Label\n      align={align}\n      direction={direction}\n      required={required}\n      type=\"inline\"\n    >\n      {React.Children.map(children, (child: any) => (\n        <div\n          className={cn(\n            direction === 'reverse' && 'ml-3',\n            direction === 'row' && 'mr-3',\n            (child?.type === Checkbox || child?.type === RadioButton) &&\n              child?.props?.size !== 'lg' &&\n              'translate-y-1'\n          )}\n        >\n          {child}\n        </div>\n      ))}\n      {label}\n    </Label>\n    {error && <InlineMessage className=\"mt-2\">{error}</InlineMessage>}\n    {description && (\n      <Description\n        className={cn(\n          'mt-2',\n          direction === 'reverse' && 'mr-7',\n          direction === 'row' && 'ml-7'\n        )}\n      >\n        {description}\n      </Description>\n    )}\n  </div>\n)\n\nInlineFieldWrapper.displayName = 'InlineFieldWrapper'\n"],"mappings":";;;;;;;;AAoBA,IAAa,sBAAsB,EACjC,QAAQ,SACR,UACA,WACA,aACA,YAAY,OACZ,OACA,OACA,eAEA,wBAAA,cAAC,OAAD,EAAgB,WAkCV,EAjCJ,wBAAA,cAAC,OAAD;CACS;CACI;CACD;CACV,MAAK;CAgBC,EAdL,QAAM,SAAS,IAAI,WAAW,UAC7B,wBAAA,cAAC,OAAD,EACE,WAAW,GACT,cAAc,aAAa,QAC3B,cAAc,SAAS,SACtB,OAAO,SAAS,YAAY,OAAO,SAAS,gBAC3C,OAAO,OAAO,SAAS,QACvB,gBACH,EAGG,EADH,MACG,CACN,EACD,MACK,EACP,SAAS,wBAAA,cAAC,eAAD,EAAe,WAAU,QAA8B,EAAtB,MAAsB,EAChE,eACC,wBAAA,cAAC,aAAD,EACE,WAAW,GACT,QACA,cAAc,aAAa,QAC3B,cAAc,SAAS,OACxB,EAGW,EADX,YACW,CAEZ;AAGR,mBAAmB,cAAc"}

package/dist/components/grid/Grid.js

@@ -1,5 +1,4 @@
-import { styled } from "../../styled.js";
-import clsx from "clsx";
+import { cn, styled } from "../../styled.js";
 import * as React$1 from "react";
 //#region src/components/grid/Grid.tsx
 var GridContainer = styled("div", {
@@ -26,7 +25,7 @@ var Grid = ({ className, style, gap = "2", minItemSize, maxItemSize = "1fr", ...
 		...maxItemSize && { "--max-item-size": maxItemSize }
 	},
 	gap,
-	className: clsx(minItemSize && ["grid-cols-[repeat(auto-fit,minmax(var(--min-item-size,0),var(--max-item-size,0)))]"], className)
+	className: cn(minItemSize && ["grid-cols-[repeat(auto-fit,minmax(var(--min-item-size,0),var(--max-item-size,0)))]"], className)
 });
 Grid.displayName = "Grid";
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"Grid.js","names":[],"sources":["../../../src/components/grid/Grid.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nconst GridContainer = styled(\n  'div',\n  {\n    base: ['grid'],\n    variants: {\n      gap: {\n        0: ['gap-0.5'],\n        1: ['gap-1'],\n        2: ['gap-2'],\n        3: ['gap-3'],\n        4: ['gap-4'],\n        24: ['gap-6'],\n        5: ['gap-8'],\n        6: ['gap-10'],\n        7: ['gap-12'],\n        8: ['gap-16'],\n        9: ['gap-20']\n      }\n    }\n  },\n  { enabledResponsiveVariants: true }\n)\n\ntype GridProps = React.ComponentProps<typeof GridContainer> & {\n  minItemSize?: string\n  maxItemSize?: string\n}\n\nexport const Grid = ({\n  className,\n  style,\n  gap = '2',\n  minItemSize,\n  maxItemSize = '1fr',\n  ...remainingProps\n}: GridProps) => (\n  <GridContainer\n    {...remainingProps}\n    style={{\n      ...style,\n      ...(minItemSize && { '--min-item-size': minItemSize }),\n      ...(maxItemSize && { '--max-item-size': maxItemSize })\n    }}\n    gap={gap}\n    className={clsx(\n      minItemSize && [\n        'grid-cols-[repeat(auto-fit,minmax(var(--min-item-size,0),var(--max-item-size,0)))]'\n      ],\n      className\n    )}\n  />\n)\n\nGrid.displayName = 'Grid'\n"],"mappings":";;;;AAKA,IAAM,gBAAgB,OACpB,OACA;CACE,MAAM,CAAC,OAAO;CACd,UAAU,EACR,KAAK;EACH,GAAG,CAAC,UAAU;EACd,GAAG,CAAC,QAAQ;EACZ,GAAG,CAAC,QAAQ;EACZ,GAAG,CAAC,QAAQ;EACZ,GAAG,CAAC,QAAQ;EACZ,IAAI,CAAC,QAAQ;EACb,GAAG,CAAC,QAAQ;EACZ,GAAG,CAAC,SAAS;EACb,GAAG,CAAC,SAAS;EACb,GAAG,CAAC,SAAS;EACb,GAAG,CAAC,SAAS;EACd,EACF;CACF,EACD,EAAE,2BAA2B,MAAM,CACpC;AAOD,IAAa,QAAQ,EACnB,WACA,OACA,MAAM,KACN,aACA,cAAc,OACd,GAAG,qBAEH,wBAAA,cAAC,eAAD;CACE,GAAI;CACJ,OAAO;EACL,GAAG;EACH,GAAI,eAAe,EAAE,mBAAmB,aAAa;EACrD,GAAI,eAAe,EAAE,mBAAmB,aAAa;EACtD;CACI;CACL,WAAW,KACT,eAAe,CACb,qFACD,EACD,UACD;CACD,CAAA;AAGJ,KAAK,cAAc"}
+{"version":3,"file":"Grid.js","names":[],"sources":["../../../src/components/grid/Grid.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\nimport { cn } from '~/styled'\n\nconst GridContainer = styled(\n  'div',\n  {\n    base: ['grid'],\n    variants: {\n      gap: {\n        0: ['gap-0.5'],\n        1: ['gap-1'],\n        2: ['gap-2'],\n        3: ['gap-3'],\n        4: ['gap-4'],\n        24: ['gap-6'],\n        5: ['gap-8'],\n        6: ['gap-10'],\n        7: ['gap-12'],\n        8: ['gap-16'],\n        9: ['gap-20']\n      }\n    }\n  },\n  { enabledResponsiveVariants: true }\n)\n\ntype GridProps = React.ComponentProps<typeof GridContainer> & {\n  minItemSize?: string\n  maxItemSize?: string\n}\n\nexport const Grid = ({\n  className,\n  style,\n  gap = '2',\n  minItemSize,\n  maxItemSize = '1fr',\n  ...remainingProps\n}: GridProps) => (\n  <GridContainer\n    {...remainingProps}\n    style={{\n      ...style,\n      ...(minItemSize && { '--min-item-size': minItemSize }),\n      ...(maxItemSize && { '--max-item-size': maxItemSize })\n    }}\n    gap={gap}\n    className={cn(\n      minItemSize && [\n        'grid-cols-[repeat(auto-fit,minmax(var(--min-item-size,0),var(--max-item-size,0)))]'\n      ],\n      className\n    )}\n  />\n)\n\nGrid.displayName = 'Grid'\n"],"mappings":";;;AAKA,IAAM,gBAAgB,OACpB,OACA;CACE,MAAM,CAAC,OAAO;CACd,UAAU,EACR,KAAK;EACH,GAAG,CAAC,UAAU;EACd,GAAG,CAAC,QAAQ;EACZ,GAAG,CAAC,QAAQ;EACZ,GAAG,CAAC,QAAQ;EACZ,GAAG,CAAC,QAAQ;EACZ,IAAI,CAAC,QAAQ;EACb,GAAG,CAAC,QAAQ;EACZ,GAAG,CAAC,SAAS;EACb,GAAG,CAAC,SAAS;EACb,GAAG,CAAC,SAAS;EACb,GAAG,CAAC,SAAS;EACd,EACF;CACF,EACD,EAAE,2BAA2B,MAAM,CACpC;AAOD,IAAa,QAAQ,EACnB,WACA,OACA,MAAM,KACN,aACA,cAAc,OACd,GAAG,qBAEH,wBAAA,cAAC,eAAD;CACE,GAAI;CACJ,OAAO;EACL,GAAG;EACH,GAAI,eAAe,EAAE,mBAAmB,aAAa;EACrD,GAAI,eAAe,EAAE,mBAAmB,aAAa;EACtD;CACI;CACL,WAAW,GACT,eAAe,CACb,qFACD,EACD,UACD;CACD,CAAA;AAGJ,KAAK,cAAc"}

package/dist/components/loader/Loader.js

@@ -1,5 +1,4 @@
-import { styled } from "../../styled.js";
-import clsx from "clsx";
+import { cn, styled } from "../../styled.js";
 import * as React$1 from "react";
 //#region src/components/loader/Loader.tsx
 var Dot = styled("div", {
@@ -18,7 +17,7 @@ var Dot = styled("div", {
 	} }
 });
 var Loader = ({ className, message = "Loading", size = "md", ...props }) => /* @__PURE__ */ React$1.createElement("div", {
-	className: clsx("flex", "justify-center", className),
+	className: cn("flex", "justify-center", className),
 	role: "alert",
 	...props
 }, /* @__PURE__ */ React$1.createElement("span", { className: "sr-only" }, message), /* @__PURE__ */ React$1.createElement(Dot, { size }), /* @__PURE__ */ React$1.createElement(Dot, { size }), /* @__PURE__ */ React$1.createElement(Dot, { size }));

package/dist/components/loader/Loader.js.map

@@ -1 +1 @@
-{"version":3,"file":"Loader.js","names":[],"sources":["../../../src/components/loader/Loader.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nconst Dot = styled('div', {\n  base: [\n    'animate-pulse',\n    'bg-current',\n    'rounded-full',\n    'animation-duration-900',\n    'nth-3:animation-delay-300',\n    'nth-4:animation-delay-600'\n  ],\n  variants: {\n    size: {\n      sm: ['size-1', 'mx-0.5'],\n      md: ['size-1.5', 'mx-0.5'],\n      lg: ['size-2', 'mx-[3px]']\n    }\n  }\n})\n\ntype LoaderProps = React.ComponentProps<'div'> & {\n  message?: string\n  size?: 'sm' | 'md' | 'lg'\n}\n\nexport const Loader = ({\n  className,\n  message = 'Loading',\n  size = 'md',\n  ...props\n}: LoaderProps) => (\n  <div\n    className={clsx('flex', 'justify-center', className)}\n    role=\"alert\"\n    {...props}\n  >\n    <span className=\"sr-only\">{message}</span>\n    <Dot size={size} />\n    <Dot size={size} />\n    <Dot size={size} />\n  </div>\n)\n"],"mappings":";;;;AAKA,IAAM,MAAM,OAAO,OAAO;CACxB,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,UAAU,SAAS;EACxB,IAAI,CAAC,YAAY,SAAS;EAC1B,IAAI,CAAC,UAAU,WAAW;EAC3B,EACF;CACF,CAAC;AAOF,IAAa,UAAU,EACrB,WACA,UAAU,WACV,OAAO,MACP,GAAG,YAEH,wBAAA,cAAC,OAAD;CACE,WAAW,KAAK,QAAQ,kBAAkB,UAAU;CACpD,MAAK;CACL,GAAI;CAMA,EAJJ,wBAAA,cAAC,QAAD,EAAM,WAAU,WAA0B,EAAf,QAAe,EAC1C,wBAAA,cAAC,KAAD,EAAW,MAAQ,CAAA,EACnB,wBAAA,cAAC,KAAD,EAAW,MAAQ,CAAA,EACnB,wBAAA,cAAC,KAAD,EAAW,MAAQ,CAAA,CACf"}
+{"version":3,"file":"Loader.js","names":[],"sources":["../../../src/components/loader/Loader.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\nimport { cn } from '~/styled'\n\nconst Dot = styled('div', {\n  base: [\n    'animate-pulse',\n    'bg-current',\n    'rounded-full',\n    'animation-duration-900',\n    'nth-3:animation-delay-300',\n    'nth-4:animation-delay-600'\n  ],\n  variants: {\n    size: {\n      sm: ['size-1', 'mx-0.5'],\n      md: ['size-1.5', 'mx-0.5'],\n      lg: ['size-2', 'mx-[3px]']\n    }\n  }\n})\n\ntype LoaderProps = React.ComponentProps<'div'> & {\n  message?: string\n  size?: 'sm' | 'md' | 'lg'\n}\n\nexport const Loader = ({\n  className,\n  message = 'Loading',\n  size = 'md',\n  ...props\n}: LoaderProps) => (\n  <div\n    className={cn('flex', 'justify-center', className)}\n    role=\"alert\"\n    {...props}\n  >\n    <span className=\"sr-only\">{message}</span>\n    <Dot size={size} />\n    <Dot size={size} />\n    <Dot size={size} />\n  </div>\n)\n"],"mappings":";;;AAKA,IAAM,MAAM,OAAO,OAAO;CACxB,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,UAAU,SAAS;EACxB,IAAI,CAAC,YAAY,SAAS;EAC1B,IAAI,CAAC,UAAU,WAAW;EAC3B,EACF;CACF,CAAC;AAOF,IAAa,UAAU,EACrB,WACA,UAAU,WACV,OAAO,MACP,GAAG,YAEH,wBAAA,cAAC,OAAD;CACE,WAAW,GAAG,QAAQ,kBAAkB,UAAU;CAClD,MAAK;CACL,GAAI;CAMA,EAJJ,wBAAA,cAAC,QAAD,EAAM,WAAU,WAA0B,EAAf,QAAe,EAC1C,wBAAA,cAAC,KAAD,EAAW,MAAQ,CAAA,EACnB,wBAAA,cAAC,KAAD,EAAW,MAAQ,CAAA,EACnB,wBAAA,cAAC,KAAD,EAAW,MAAQ,CAAA,CACf"}

package/dist/components/markdown-content/components/MarkdownList.js

@@ -1,10 +1,10 @@
+import { cn } from "../../../styled.js";
 import { List } from "../../list/List.js";
-import clsx from "clsx";
 import * as React$1 from "react";
 //#region src/components/markdown-content/components/MarkdownList.tsx
 var MarkdownList = ({ node, handleNode, className }) => /* @__PURE__ */ React$1.createElement(List, {
 	ordered: node.ordered || void 0,
-	className: clsx("[&_p]:inline", "[&_p]:before:hidden", "[&_p]:after:hidden", className)
+	className: cn("[&_p]:inline", "[&_p]:before:hidden", "[&_p]:after:hidden", className)
 }, node.children?.map(handleNode));
 //#endregion
 export { MarkdownList };

package/dist/components/markdown-content/components/MarkdownList.js.map

@@ -1 +1 @@
-{"version":3,"file":"MarkdownList.js","names":[],"sources":["../../../../src/components/markdown-content/components/MarkdownList.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport type { Content, List as ListType } from 'mdast'\nimport * as React from 'react'\n\nimport { List } from '../../list/List'\n\ntype MarkdownListProps = {\n  node: ListType\n  handleNode: (node: Content) => React.ReactElement\n  className?: string\n}\n\nexport const MarkdownList = ({\n  node,\n  handleNode,\n  className\n}: MarkdownListProps) => (\n  <List\n    ordered={node.ordered || undefined}\n    className={clsx(\n      '[&_p]:inline',\n      '[&_p]:before:hidden',\n      '[&_p]:after:hidden',\n      className\n    )}\n  >\n    {node.children?.map(handleNode)}\n  </List>\n)\n"],"mappings":";;;;AAYA,IAAa,gBAAgB,EAC3B,MACA,YACA,gBAEA,wBAAA,cAAC,MAAD;CACE,SAAS,KAAK,WAAW,KAAA;CACzB,WAAW,KACT,gBACA,uBACA,sBACA,UACD;CAGI,EADJ,KAAK,UAAU,IAAI,WAAW,CAC1B"}
+{"version":3,"file":"MarkdownList.js","names":[],"sources":["../../../../src/components/markdown-content/components/MarkdownList.tsx"],"sourcesContent":["import type { Content, List as ListType } from 'mdast'\nimport * as React from 'react'\n\nimport { cn } from '~/styled'\n\nimport { List } from '../../list/List'\n\ntype MarkdownListProps = {\n  node: ListType\n  handleNode: (node: Content) => React.ReactElement\n  className?: string\n}\n\nexport const MarkdownList = ({\n  node,\n  handleNode,\n  className\n}: MarkdownListProps) => (\n  <List\n    ordered={node.ordered || undefined}\n    className={cn(\n      '[&_p]:inline',\n      '[&_p]:before:hidden',\n      '[&_p]:after:hidden',\n      className\n    )}\n  >\n    {node.children?.map(handleNode)}\n  </List>\n)\n"],"mappings":";;;;AAaA,IAAa,gBAAgB,EAC3B,MACA,YACA,gBAEA,wBAAA,cAAC,MAAD;CACE,SAAS,KAAK,WAAW,KAAA;CACzB,WAAW,GACT,gBACA,uBACA,sBACA,UACD;CAGI,EADJ,KAAK,UAAU,IAAI,WAAW,CAC1B"}

package/dist/components/markdown-content/components/MarkdownThematicBreak.js

@@ -1,8 +1,8 @@
+import { cn } from "../../../styled.js";
 import { Divider } from "../../divider/Divider.js";
-import clsx from "clsx";
 import * as React$1 from "react";
 //#region src/components/markdown-content/components/MarkdownThematicBreak.tsx
-var MarkdownThematicBreak = ({ className }) => /* @__PURE__ */ React$1.createElement(Divider, { className: clsx("w-full", className) });
+var MarkdownThematicBreak = ({ className }) => /* @__PURE__ */ React$1.createElement(Divider, { className: cn("w-full", className) });
 //#endregion
 export { MarkdownThematicBreak };
 

package/dist/components/markdown-content/components/MarkdownThematicBreak.js.map

@@ -1 +1 @@
-{"version":3,"file":"MarkdownThematicBreak.js","names":[],"sources":["../../../../src/components/markdown-content/components/MarkdownThematicBreak.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport * as React from 'react'\n\nimport { Divider } from '../../divider/Divider'\n\ntype MarkdownThematicBreakProps = {\n  className?: string\n}\n\nexport const MarkdownThematicBreak = ({\n  className\n}: MarkdownThematicBreakProps) => (\n  <Divider className={clsx('w-full', className)} />\n)\n"],"mappings":";;;;AASA,IAAa,yBAAyB,EACpC,gBAEA,wBAAA,cAAC,SAAD,EAAS,WAAW,KAAK,UAAU,UAAU,EAAI,CAAA"}
+{"version":3,"file":"MarkdownThematicBreak.js","names":[],"sources":["../../../../src/components/markdown-content/components/MarkdownThematicBreak.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { cn } from '~/styled'\n\nimport { Divider } from '../../divider/Divider'\n\ntype MarkdownThematicBreakProps = {\n  className?: string\n}\n\nexport const MarkdownThematicBreak = ({\n  className\n}: MarkdownThematicBreakProps) => (\n  <Divider className={cn('w-full', className)} />\n)\n"],"mappings":";;;;AAUA,IAAa,yBAAyB,EACpC,gBAEA,wBAAA,cAAC,SAAD,EAAS,WAAW,GAAG,UAAU,UAAU,EAAI,CAAA"}

package/dist/components/navigation/NavigationMenu.js

@@ -1,4 +1,4 @@
-import { styled } from "../../styled.js";
+import { cn, styled } from "../../styled.js";
 import { colorSchemes } from "./NavigationMenu.colorscheme.config.js";
 import { NavigationMenuContext } from "./NavigationMenuContext.js";
 import { NavigationMenuDropdownContent } from "./NavigationMenuDropdownContent.js";
@@ -6,7 +6,6 @@ import { NavigationMenuDropdownTrigger } from "./NavigationMenuDropdownTrigger.j
 import { NavigationMenuDropdown } from "./NavigationMenuDropdown.js";
 import { NavigationMenuLink } from "./NavigationMenuLink.js";
 import { NavigationMenuDropdownItem, NavigationMenuDropdownItemTitle } from "./NavigationMenuDropdownItem.js";
-import clsx from "clsx";
 import React from "react";
 import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
 //#region src/components/navigation/NavigationMenu.tsx
@@ -55,13 +54,13 @@ var NavigationMenuComponent = ({ children, className, ...props }) => {
 		return trigger;
 	};
 	return /* @__PURE__ */ React.createElement(NavigationMenuContext.Provider, { value: { onNodeUpdate } }, /* @__PURE__ */ React.createElement(StyledMenu, {
-		className: clsx(className),
+		className: cn(className),
 		style: colorSchemes["light"],
 		onValueChange: setActiveItem,
 		...props
 	}, /* @__PURE__ */ React.createElement(StyledList, { ref: listRef }, children), /* @__PURE__ */ React.createElement(ViewportPosition, null, /* @__PURE__ */ React.createElement(StyledViewport, {
 		style: { "--navigation-menu-viewport-offset": `${offset || 0}px` },
-		className: clsx([
+		className: cn([
 			"data-[state=open]:animate-fade-in",
 			"data-[state=closed]:animate-fade-out",
 			"translate-x-(--navigation-menu-viewport-offset)"

package/dist/components/navigation/NavigationMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavigationMenu.js","names":[],"sources":["../../../src/components/navigation/NavigationMenu.tsx"],"sourcesContent":["import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu'\nimport clsx from 'clsx'\nimport React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { colorSchemes as navigationMenuColorSchemes } from './NavigationMenu.colorscheme.config'\nimport { NavigationMenuContext } from './NavigationMenuContext'\nimport { NavigationMenuDropdown } from './NavigationMenuDropdown'\nimport { NavigationMenuDropdownContent } from './NavigationMenuDropdownContent'\nimport {\n  NavigationMenuDropdownItem,\n  NavigationMenuDropdownItemTitle\n} from './NavigationMenuDropdownItem'\nimport { NavigationMenuDropdownTrigger } from './NavigationMenuDropdownTrigger'\nimport { NavigationMenuLink } from './NavigationMenuLink'\n\nconst StyledMenu = styled(NavigationMenuPrimitive.Root, {\n  base: ['flex', 'justify-center', 'relative']\n})\n\nconst StyledList = styled(NavigationMenuPrimitive.List, {\n  base: ['flex', 'justify-center', 'items-center', 'gap-1', 'list-none']\n})\n\nconst StyledViewport = styled(NavigationMenuPrimitive.Viewport, {\n  base: ['z-2147483647']\n})\n\nconst ViewportPosition = styled('div', {\n  base: ['absolute', 'left-0', 'top-full', 'w-full', 'flex', 'justify-center']\n})\n\nconst NavigationMenuComponent = ({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<typeof StyledMenu>) => {\n  const [offset, setOffset] = React.useState<number | null | undefined>()\n  const [activeItem, setActiveItem] = React.useState<string | undefined>()\n  const [listWidth, setListWidth] = React.useState(0)\n  const listRef = React.useRef<HTMLUListElement>(null)\n\n  React.useLayoutEffect(() => {\n    if (listRef.current) {\n      setListWidth(listRef.current.offsetWidth)\n    }\n  }, [React.Children.toArray(children).length])\n\n  React.useEffect(() => {\n    let timer: ReturnType<typeof setTimeout>\n\n    // Delay transitioning back to initial position\n    // to allow enough time for fadeOut animation to complete\n    if (activeItem === '') {\n      timer = setTimeout(() => setOffset(null), 200)\n    }\n\n    return () => {\n      if (timer !== null) {\n        clearTimeout(timer)\n      }\n    }\n  }, [activeItem])\n\n  // https://github.com/radix-ui/primitives/issues/1462\n  const onNodeUpdate = (trigger: HTMLButtonElement, itemValue: string) => {\n    if (trigger && listWidth && activeItem === itemValue) {\n      const listCenter = listWidth / 2\n\n      const triggerOffsetRight =\n        listWidth -\n        trigger.offsetLeft -\n        trigger.offsetWidth +\n        trigger.offsetWidth / 2\n\n      setOffset(Math.round(listCenter - triggerOffsetRight))\n    }\n\n    return trigger\n  }\n\n  return (\n    <NavigationMenuContext.Provider value={{ onNodeUpdate }}>\n      <StyledMenu\n        className={clsx(className)}\n        style={navigationMenuColorSchemes['light']}\n        onValueChange={setActiveItem}\n        {...props}\n      >\n        <StyledList ref={listRef}>{children}</StyledList>\n        <ViewportPosition>\n          <StyledViewport\n            style={{ '--navigation-menu-viewport-offset': `${offset || 0}px` }}\n            className={clsx([\n              'data-[state=open]:animate-fade-in',\n              'data-[state=closed]:animate-fade-out',\n              'translate-x-(--navigation-menu-viewport-offset)'\n            ])}\n          />\n        </ViewportPosition>\n      </StyledMenu>\n    </NavigationMenuContext.Provider>\n  )\n}\n\nexport const NavigationMenu = Object.assign(NavigationMenuComponent, {\n  Link: NavigationMenuLink,\n  Dropdown: NavigationMenuDropdown,\n  DropdownContent: NavigationMenuDropdownContent,\n  DropdownItem: NavigationMenuDropdownItem,\n  DropdownItemTitle: NavigationMenuDropdownItemTitle,\n  DropdownTrigger: NavigationMenuDropdownTrigger\n})\n\nNavigationMenuComponent.displayName = 'NavigationMenu'\n"],"mappings":";;;;;;;;;;;;AAiBA,IAAM,aAAa,OAAO,wBAAwB,MAAM,EACtD,MAAM;CAAC;CAAQ;CAAkB;CAAW,EAC7C,CAAC;AAEF,IAAM,aAAa,OAAO,wBAAwB,MAAM,EACtD,MAAM;CAAC;CAAQ;CAAkB;CAAgB;CAAS;CAAY,EACvE,CAAC;AAEF,IAAM,iBAAiB,OAAO,wBAAwB,UAAU,EAC9D,MAAM,CAAC,eAAe,EACvB,CAAC;AAEF,IAAM,mBAAmB,OAAO,OAAO,EACrC,MAAM;CAAC;CAAY;CAAU;CAAY;CAAU;CAAQ;CAAiB,EAC7E,CAAC;AAEF,IAAM,2BAA2B,EAC/B,UACA,WACA,GAAG,YAC0C;CAC7C,MAAM,CAAC,QAAQ,aAAa,MAAM,UAAqC;CACvE,MAAM,CAAC,YAAY,iBAAiB,MAAM,UAA8B;CACxE,MAAM,CAAC,WAAW,gBAAgB,MAAM,SAAS,EAAE;CACnD,MAAM,UAAU,MAAM,OAAyB,KAAK;AAEpD,OAAM,sBAAsB;AAC1B,MAAI,QAAQ,QACV,cAAa,QAAQ,QAAQ,YAAY;IAE1C,CAAC,MAAM,SAAS,QAAQ,SAAS,CAAC,OAAO,CAAC;AAE7C,OAAM,gBAAgB;EACpB,IAAI;AAIJ,MAAI,eAAe,GACjB,SAAQ,iBAAiB,UAAU,KAAK,EAAE,IAAI;AAGhD,eAAa;AACX,OAAI,UAAU,KACZ,cAAa,MAAM;;IAGtB,CAAC,WAAW,CAAC;CAGhB,MAAM,gBAAgB,SAA4B,cAAsB;AACtE,MAAI,WAAW,aAAa,eAAe,WAAW;GACpD,MAAM,aAAa,YAAY;GAE/B,MAAM,qBACJ,YACA,QAAQ,aACR,QAAQ,cACR,QAAQ,cAAc;AAExB,aAAU,KAAK,MAAM,aAAa,mBAAmB,CAAC;;AAGxD,SAAO;;AAGT,QACE,sBAAA,cAAC,sBAAsB,UAAvB,EAAgC,OAAO,EAAE,cAAc,EAmBtB,EAlB/B,sBAAA,cAAC,YAAD;EACE,WAAW,KAAK,UAAU;EAC1B,OAAO,aAA2B;EAClC,eAAe;EACf,GAAI;EAaO,EAXX,sBAAA,cAAC,YAAD,EAAY,KAAK,SAAgC,EAAtB,SAAsB,EACjD,sBAAA,cAAC,kBAAA,MACC,sBAAA,cAAC,gBAAD;EACE,OAAO,EAAE,qCAAqC,GAAG,UAAU,EAAE,KAAK;EAClE,WAAW,KAAK;GACd;GACA;GACA;GACD,CAAC;EACF,CAAA,CACe,CACR,CACkB;;AAIrC,IAAa,iBAAiB,OAAO,OAAO,yBAAyB;CACnE,MAAM;CACN,UAAU;CACV,iBAAiB;CACjB,cAAc;CACd,mBAAmB;CACnB,iBAAiB;CAClB,CAAC;AAEF,wBAAwB,cAAc"}
+{"version":3,"file":"NavigationMenu.js","names":[],"sources":["../../../src/components/navigation/NavigationMenu.tsx"],"sourcesContent":["import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu'\nimport React from 'react'\n\nimport { styled } from '~/styled'\nimport { cn } from '~/styled'\n\nimport { colorSchemes as navigationMenuColorSchemes } from './NavigationMenu.colorscheme.config'\nimport { NavigationMenuContext } from './NavigationMenuContext'\nimport { NavigationMenuDropdown } from './NavigationMenuDropdown'\nimport { NavigationMenuDropdownContent } from './NavigationMenuDropdownContent'\nimport {\n  NavigationMenuDropdownItem,\n  NavigationMenuDropdownItemTitle\n} from './NavigationMenuDropdownItem'\nimport { NavigationMenuDropdownTrigger } from './NavigationMenuDropdownTrigger'\nimport { NavigationMenuLink } from './NavigationMenuLink'\n\nconst StyledMenu = styled(NavigationMenuPrimitive.Root, {\n  base: ['flex', 'justify-center', 'relative']\n})\n\nconst StyledList = styled(NavigationMenuPrimitive.List, {\n  base: ['flex', 'justify-center', 'items-center', 'gap-1', 'list-none']\n})\n\nconst StyledViewport = styled(NavigationMenuPrimitive.Viewport, {\n  base: ['z-2147483647']\n})\n\nconst ViewportPosition = styled('div', {\n  base: ['absolute', 'left-0', 'top-full', 'w-full', 'flex', 'justify-center']\n})\n\nconst NavigationMenuComponent = ({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<typeof StyledMenu>) => {\n  const [offset, setOffset] = React.useState<number | null | undefined>()\n  const [activeItem, setActiveItem] = React.useState<string | undefined>()\n  const [listWidth, setListWidth] = React.useState(0)\n  const listRef = React.useRef<HTMLUListElement>(null)\n\n  React.useLayoutEffect(() => {\n    if (listRef.current) {\n      setListWidth(listRef.current.offsetWidth)\n    }\n  }, [React.Children.toArray(children).length])\n\n  React.useEffect(() => {\n    let timer: ReturnType<typeof setTimeout>\n\n    // Delay transitioning back to initial position\n    // to allow enough time for fadeOut animation to complete\n    if (activeItem === '') {\n      timer = setTimeout(() => setOffset(null), 200)\n    }\n\n    return () => {\n      if (timer !== null) {\n        clearTimeout(timer)\n      }\n    }\n  }, [activeItem])\n\n  // https://github.com/radix-ui/primitives/issues/1462\n  const onNodeUpdate = (trigger: HTMLButtonElement, itemValue: string) => {\n    if (trigger && listWidth && activeItem === itemValue) {\n      const listCenter = listWidth / 2\n\n      const triggerOffsetRight =\n        listWidth -\n        trigger.offsetLeft -\n        trigger.offsetWidth +\n        trigger.offsetWidth / 2\n\n      setOffset(Math.round(listCenter - triggerOffsetRight))\n    }\n\n    return trigger\n  }\n\n  return (\n    <NavigationMenuContext.Provider value={{ onNodeUpdate }}>\n      <StyledMenu\n        className={cn(className)}\n        style={navigationMenuColorSchemes['light']}\n        onValueChange={setActiveItem}\n        {...props}\n      >\n        <StyledList ref={listRef}>{children}</StyledList>\n        <ViewportPosition>\n          <StyledViewport\n            style={{ '--navigation-menu-viewport-offset': `${offset || 0}px` }}\n            className={cn([\n              'data-[state=open]:animate-fade-in',\n              'data-[state=closed]:animate-fade-out',\n              'translate-x-(--navigation-menu-viewport-offset)'\n            ])}\n          />\n        </ViewportPosition>\n      </StyledMenu>\n    </NavigationMenuContext.Provider>\n  )\n}\n\nexport const NavigationMenu = Object.assign(NavigationMenuComponent, {\n  Link: NavigationMenuLink,\n  Dropdown: NavigationMenuDropdown,\n  DropdownContent: NavigationMenuDropdownContent,\n  DropdownItem: NavigationMenuDropdownItem,\n  DropdownItemTitle: NavigationMenuDropdownItemTitle,\n  DropdownTrigger: NavigationMenuDropdownTrigger\n})\n\nNavigationMenuComponent.displayName = 'NavigationMenu'\n"],"mappings":";;;;;;;;;;;AAiBA,IAAM,aAAa,OAAO,wBAAwB,MAAM,EACtD,MAAM;CAAC;CAAQ;CAAkB;CAAW,EAC7C,CAAC;AAEF,IAAM,aAAa,OAAO,wBAAwB,MAAM,EACtD,MAAM;CAAC;CAAQ;CAAkB;CAAgB;CAAS;CAAY,EACvE,CAAC;AAEF,IAAM,iBAAiB,OAAO,wBAAwB,UAAU,EAC9D,MAAM,CAAC,eAAe,EACvB,CAAC;AAEF,IAAM,mBAAmB,OAAO,OAAO,EACrC,MAAM;CAAC;CAAY;CAAU;CAAY;CAAU;CAAQ;CAAiB,EAC7E,CAAC;AAEF,IAAM,2BAA2B,EAC/B,UACA,WACA,GAAG,YAC0C;CAC7C,MAAM,CAAC,QAAQ,aAAa,MAAM,UAAqC;CACvE,MAAM,CAAC,YAAY,iBAAiB,MAAM,UAA8B;CACxE,MAAM,CAAC,WAAW,gBAAgB,MAAM,SAAS,EAAE;CACnD,MAAM,UAAU,MAAM,OAAyB,KAAK;AAEpD,OAAM,sBAAsB;AAC1B,MAAI,QAAQ,QACV,cAAa,QAAQ,QAAQ,YAAY;IAE1C,CAAC,MAAM,SAAS,QAAQ,SAAS,CAAC,OAAO,CAAC;AAE7C,OAAM,gBAAgB;EACpB,IAAI;AAIJ,MAAI,eAAe,GACjB,SAAQ,iBAAiB,UAAU,KAAK,EAAE,IAAI;AAGhD,eAAa;AACX,OAAI,UAAU,KACZ,cAAa,MAAM;;IAGtB,CAAC,WAAW,CAAC;CAGhB,MAAM,gBAAgB,SAA4B,cAAsB;AACtE,MAAI,WAAW,aAAa,eAAe,WAAW;GACpD,MAAM,aAAa,YAAY;GAE/B,MAAM,qBACJ,YACA,QAAQ,aACR,QAAQ,cACR,QAAQ,cAAc;AAExB,aAAU,KAAK,MAAM,aAAa,mBAAmB,CAAC;;AAGxD,SAAO;;AAGT,QACE,sBAAA,cAAC,sBAAsB,UAAvB,EAAgC,OAAO,EAAE,cAAc,EAmBtB,EAlB/B,sBAAA,cAAC,YAAD;EACE,WAAW,GAAG,UAAU;EACxB,OAAO,aAA2B;EAClC,eAAe;EACf,GAAI;EAaO,EAXX,sBAAA,cAAC,YAAD,EAAY,KAAK,SAAgC,EAAtB,SAAsB,EACjD,sBAAA,cAAC,kBAAA,MACC,sBAAA,cAAC,gBAAD;EACE,OAAO,EAAE,qCAAqC,GAAG,UAAU,EAAE,KAAK;EAClE,WAAW,GAAG;GACZ;GACA;GACA;GACD,CAAC;EACF,CAAA,CACe,CACR,CACkB;;AAIrC,IAAa,iBAAiB,OAAO,OAAO,yBAAyB;CACnE,MAAM;CACN,UAAU;CACV,iBAAiB;CACjB,cAAc;CACd,mBAAmB;CACnB,iBAAiB;CAClB,CAAC;AAEF,wBAAwB,cAAc"}

package/dist/components/navigation/NavigationMenuDropdownTrigger.js

@@ -1,8 +1,7 @@
-import { styled } from "../../styled.js";
+import { cn, styled } from "../../styled.js";
 import { Icon } from "../icon/Icon.js";
 import { preventEvent } from "../../utilities/event/preventEvent.js";
 import { navigationMenuActiveItemStyles, navigationMenuBaseItemStyles } from "./NavigationMenu.styles.js";
-import clsx from "clsx";
 import React from "react";
 import { ChevronDown } from "@atom-learning/icons";
 import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
@@ -27,7 +26,7 @@ var NavigationMenuDropdownTrigger = React.forwardRef(({ children, active, ...pro
 }, children, /* @__PURE__ */ React.createElement(Icon, {
 	is: ChevronDown,
 	size: "sm",
-	className: clsx("ml-1", "in-data-[state=open]:-rotate-180", "motion-safe:duration-200", "motion-safe:ease-in", "motion-safe:transition-transform")
+	className: cn("ml-1", "in-data-[state=open]:-rotate-180", "motion-safe:duration-200", "motion-safe:ease-in", "motion-safe:transition-transform")
 })));
 NavigationMenuDropdownTrigger.displayName = "NavigationMenuDropdownTrigger";
 //#endregion

package/dist/components/navigation/NavigationMenuDropdownTrigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavigationMenuDropdownTrigger.js","names":[],"sources":["../../../src/components/navigation/NavigationMenuDropdownTrigger.tsx"],"sourcesContent":["import { ChevronDown } from '@atom-learning/icons'\nimport * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu'\nimport clsx from 'clsx'\nimport React from 'react'\n\nimport { styled } from '~/styled'\nimport { preventEvent } from '~/utilities/event/preventEvent'\n\nimport { Icon } from '../icon/Icon'\nimport {\n  navigationMenuActiveItemStyles,\n  navigationMenuBaseItemStyles\n} from './NavigationMenu.styles'\n\nconst StyledTrigger = styled(NavigationMenuPrimitive.Trigger, {\n  base: [\n    ...navigationMenuBaseItemStyles,\n    'flex',\n    'items-center',\n    'rounded-md',\n    'justify-between',\n    'data-[state=open]:bg-(--trigger-background-open)'\n  ],\n  variants: {\n    active: {\n      true: navigationMenuActiveItemStyles\n    }\n  }\n})\n\nexport const NavigationMenuDropdownTrigger = React.forwardRef<\n  HTMLButtonElement,\n  React.ComponentProps<typeof StyledTrigger>\n>(({ children, active, ...props }, forwardedRef) => (\n  <StyledTrigger\n    active={active}\n    {...props}\n    ref={forwardedRef}\n    onPointerMove={preventEvent}\n    onPointerLeave={preventEvent}\n  >\n    {children}\n    <Icon\n      is={ChevronDown}\n      size=\"sm\"\n      className={clsx(\n        'ml-1',\n        'in-data-[state=open]:-rotate-180',\n        'motion-safe:duration-200',\n        'motion-safe:ease-in',\n        'motion-safe:transition-transform'\n      )}\n    />\n  </StyledTrigger>\n))\n\nNavigationMenuDropdownTrigger.displayName = 'NavigationMenuDropdownTrigger'\n"],"mappings":";;;;;;;;;AAcA,IAAM,gBAAgB,OAAO,wBAAwB,SAAS;CAC5D,MAAM;EACJ,GAAG;EACH;EACA;EACA;EACA;EACA;EACD;CACD,UAAU,EACR,QAAQ,EACN,MAAM,gCACP,EACF;CACF,CAAC;AAEF,IAAa,gCAAgC,MAAM,YAGhD,EAAE,UAAU,QAAQ,GAAG,SAAS,iBACjC,sBAAA,cAAC,eAAD;CACU;CACR,GAAI;CACJ,KAAK;CACL,eAAe;CACf,gBAAgB;CAcF,EAZb,UACD,sBAAA,cAAC,MAAD;CACE,IAAI;CACJ,MAAK;CACL,WAAW,KACT,QACA,oCACA,4BACA,uBACA,mCACD;CACD,CAAA,CACY,CAChB;AAEF,8BAA8B,cAAc"}
+{"version":3,"file":"NavigationMenuDropdownTrigger.js","names":[],"sources":["../../../src/components/navigation/NavigationMenuDropdownTrigger.tsx"],"sourcesContent":["import { ChevronDown } from '@atom-learning/icons'\nimport * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu'\nimport React from 'react'\n\nimport { styled } from '~/styled'\nimport { cn } from '~/styled'\nimport { preventEvent } from '~/utilities/event/preventEvent'\n\nimport { Icon } from '../icon/Icon'\nimport {\n  navigationMenuActiveItemStyles,\n  navigationMenuBaseItemStyles\n} from './NavigationMenu.styles'\n\nconst StyledTrigger = styled(NavigationMenuPrimitive.Trigger, {\n  base: [\n    ...navigationMenuBaseItemStyles,\n    'flex',\n    'items-center',\n    'rounded-md',\n    'justify-between',\n    'data-[state=open]:bg-(--trigger-background-open)'\n  ],\n  variants: {\n    active: {\n      true: navigationMenuActiveItemStyles\n    }\n  }\n})\n\nexport const NavigationMenuDropdownTrigger = React.forwardRef<\n  HTMLButtonElement,\n  React.ComponentProps<typeof StyledTrigger>\n>(({ children, active, ...props }, forwardedRef) => (\n  <StyledTrigger\n    active={active}\n    {...props}\n    ref={forwardedRef}\n    onPointerMove={preventEvent}\n    onPointerLeave={preventEvent}\n  >\n    {children}\n    <Icon\n      is={ChevronDown}\n      size=\"sm\"\n      className={cn(\n        'ml-1',\n        'in-data-[state=open]:-rotate-180',\n        'motion-safe:duration-200',\n        'motion-safe:ease-in',\n        'motion-safe:transition-transform'\n      )}\n    />\n  </StyledTrigger>\n))\n\nNavigationMenuDropdownTrigger.displayName = 'NavigationMenuDropdownTrigger'\n"],"mappings":";;;;;;;;AAcA,IAAM,gBAAgB,OAAO,wBAAwB,SAAS;CAC5D,MAAM;EACJ,GAAG;EACH;EACA;EACA;EACA;EACA;EACD;CACD,UAAU,EACR,QAAQ,EACN,MAAM,gCACP,EACF;CACF,CAAC;AAEF,IAAa,gCAAgC,MAAM,YAGhD,EAAE,UAAU,QAAQ,GAAG,SAAS,iBACjC,sBAAA,cAAC,eAAD;CACU;CACR,GAAI;CACJ,KAAK;CACL,eAAe;CACf,gBAAgB;CAcF,EAZb,UACD,sBAAA,cAAC,MAAD;CACE,IAAI;CACJ,MAAK;CACL,WAAW,GACT,QACA,oCACA,4BACA,uBACA,mCACD;CACD,CAAA,CACY,CAChB;AAEF,8BAA8B,cAAc"}

package/dist/components/navigation-menu-vertical/NavigationMenuVerticalItem.js

@@ -1,9 +1,9 @@
-import clsx from "clsx";
+import { cn } from "../../styled.js";
 import React from "react";
 import { Item } from "@radix-ui/react-navigation-menu";
 //#region src/components/navigation-menu-vertical/NavigationMenuVerticalItem.tsx
 var NavigationMenuVerticalItem = (props) => /* @__PURE__ */ React.createElement(Item, {
-	className: clsx("[ul_li_&]:[--navigation-menu-vertical-item-pl:--spacing(8)]", "[ul_li_&_&]:[--navigation-menu-vertical-item-pl:--spacing(12)]", "[ul_li_&_&_&]:[--navigation-menu-vertical-item-pl:--spacing(16)]"),
+	className: cn("[ul_li_&]:[--navigation-menu-vertical-item-pl:--spacing(8)]", "[ul_li_&_&]:[--navigation-menu-vertical-item-pl:--spacing(12)]", "[ul_li_&_&_&]:[--navigation-menu-vertical-item-pl:--spacing(16)]"),
 	...props
 });
 //#endregion

package/dist/components/navigation-menu-vertical/NavigationMenuVerticalItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavigationMenuVerticalItem.js","names":[],"sources":["../../../src/components/navigation-menu-vertical/NavigationMenuVerticalItem.tsx"],"sourcesContent":["import { Item } from '@radix-ui/react-navigation-menu'\nimport clsx from 'clsx'\nimport React from 'react'\n\n/*\n * (!)\n * NavigationMenu vertical behaviour was buggy so had to build the\n * opening/closing nested Content(Accordion) based on `Collapsible` instead.\n * This means that the `value` prop does nothing, so removing it from typescript\n */\ntype TNavigationMenuVerticalItemProps = Omit<\n  React.ComponentProps<typeof Item>,\n  'value'\n>\n\nexport const NavigationMenuVerticalItem = (\n  props: TNavigationMenuVerticalItemProps\n): JSX.Element => (\n  <Item\n    className={clsx(\n      '[ul_li_&]:[--navigation-menu-vertical-item-pl:--spacing(8)]',\n      '[ul_li_&_&]:[--navigation-menu-vertical-item-pl:--spacing(12)]',\n      '[ul_li_&_&_&]:[--navigation-menu-vertical-item-pl:--spacing(16)]'\n    )}\n    {...props}\n  />\n)\n"],"mappings":";;;;AAeA,IAAa,8BACX,UAEA,sBAAA,cAAC,MAAD;CACE,WAAW,KACT,+DACA,kEACA,mEACD;CACD,GAAI;CACJ,CAAA"}
+{"version":3,"file":"NavigationMenuVerticalItem.js","names":[],"sources":["../../../src/components/navigation-menu-vertical/NavigationMenuVerticalItem.tsx"],"sourcesContent":["import { Item } from '@radix-ui/react-navigation-menu'\nimport React from 'react'\n\nimport { cn } from '~/styled'\n\n/*\n * (!)\n * NavigationMenu vertical behaviour was buggy so had to build the\n * opening/closing nested Content(Accordion) based on `Collapsible` instead.\n * This means that the `value` prop does nothing, so removing it from typescript\n */\ntype TNavigationMenuVerticalItemProps = Omit<\n  React.ComponentProps<typeof Item>,\n  'value'\n>\n\nexport const NavigationMenuVerticalItem = (\n  props: TNavigationMenuVerticalItemProps\n): JSX.Element => (\n  <Item\n    className={cn(\n      '[ul_li_&]:[--navigation-menu-vertical-item-pl:--spacing(8)]',\n      '[ul_li_&_&]:[--navigation-menu-vertical-item-pl:--spacing(12)]',\n      '[ul_li_&_&_&]:[--navigation-menu-vertical-item-pl:--spacing(16)]'\n    )}\n    {...props}\n  />\n)\n"],"mappings":";;;;AAgBA,IAAa,8BACX,UAEA,sBAAA,cAAC,MAAD;CACE,WAAW,GACT,+DACA,kEACA,mEACD;CACD,GAAI;CACJ,CAAA"}

package/dist/components/navigation-menu-vertical/NavigationMenuVerticalItemContent.js

@@ -1,11 +1,11 @@
+import { cn } from "../../styled.js";
 import { Icon } from "../icon/Icon.js";
 import { NavigationMenuVerticalIcon } from "./NavigationMenuVerticalIcon.js";
 import { NavigationMenuVerticalText } from "./NavigationMenuVerticalText.js";
-import clsx from "clsx";
 import * as React$1 from "react";
 //#region src/components/navigation-menu-vertical/NavigationMenuVerticalItemContent.tsx
 var NavigationMenuVerticalItemContent = ({ children, className, ...rest }) => /* @__PURE__ */ React$1.createElement("div", {
-	className: clsx("flex", "gap-2", "items-center", className),
+	className: cn("flex", "gap-2", "items-center", className),
 	...rest
 }, React$1.Children.map(children, (child) => {
 	if (typeof child === "string" || typeof child === "number") return /* @__PURE__ */ React$1.createElement(NavigationMenuVerticalText, null, child);

package/dist/components/navigation-menu-vertical/NavigationMenuVerticalItemContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavigationMenuVerticalItemContent.js","names":[],"sources":["../../../src/components/navigation-menu-vertical/NavigationMenuVerticalItemContent.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport * as React from 'react'\n\nimport { Icon } from '~/components/icon/Icon'\n\nimport { NavigationMenuVerticalIcon } from './NavigationMenuVerticalIcon'\nimport { NavigationMenuVerticalText } from './NavigationMenuVerticalText'\n\ntype TNavigationMenuVerticalItemContentProps = React.ComponentProps<'div'>\n\nexport const NavigationMenuVerticalItemContent = ({\n  children,\n  className,\n  ...rest\n}: TNavigationMenuVerticalItemContentProps): JSX.Element => (\n  <div className={clsx('flex', 'gap-2', 'items-center', className)} {...rest}>\n    {\n      React.Children.map(children, (child) => {\n        if (typeof child === 'string' || typeof child === 'number') {\n          return (\n            <NavigationMenuVerticalText>{child}</NavigationMenuVerticalText>\n          )\n        }\n        if (React.isValidElement(child) && child.type === Icon) {\n          return <NavigationMenuVerticalIcon {...child.props} />\n        }\n        return child\n      }) as React.ReactElement[]\n    }\n  </div>\n)\n"],"mappings":";;;;;;AAUA,IAAa,qCAAqC,EAChD,UACA,WACA,GAAG,WAEH,wBAAA,cAAC,OAAD;CAAK,WAAW,KAAK,QAAQ,SAAS,gBAAgB,UAAU;CAAE,GAAI;CAchE,EAZF,QAAM,SAAS,IAAI,WAAW,UAAU;AACtC,KAAI,OAAO,UAAU,YAAY,OAAO,UAAU,SAChD,QACE,wBAAA,cAAC,4BAAA,MAA4B,MAAmC;AAGpE,KAAI,QAAM,eAAe,MAAM,IAAI,MAAM,SAAS,KAChD,QAAO,wBAAA,cAAC,4BAA+B,MAAM,MAAS;AAExD,QAAO;EACP,CAEA"}
+{"version":3,"file":"NavigationMenuVerticalItemContent.js","names":[],"sources":["../../../src/components/navigation-menu-vertical/NavigationMenuVerticalItemContent.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Icon } from '~/components/icon/Icon'\nimport { cn } from '~/styled'\n\nimport { NavigationMenuVerticalIcon } from './NavigationMenuVerticalIcon'\nimport { NavigationMenuVerticalText } from './NavigationMenuVerticalText'\n\ntype TNavigationMenuVerticalItemContentProps = React.ComponentProps<'div'>\n\nexport const NavigationMenuVerticalItemContent = ({\n  children,\n  className,\n  ...rest\n}: TNavigationMenuVerticalItemContentProps): JSX.Element => (\n  <div className={cn('flex', 'gap-2', 'items-center', className)} {...rest}>\n    {\n      React.Children.map(children, (child) => {\n        if (typeof child === 'string' || typeof child === 'number') {\n          return (\n            <NavigationMenuVerticalText>{child}</NavigationMenuVerticalText>\n          )\n        }\n        if (React.isValidElement(child) && child.type === Icon) {\n          return <NavigationMenuVerticalIcon {...child.props} />\n        }\n        return child\n      }) as React.ReactElement[]\n    }\n  </div>\n)\n"],"mappings":";;;;;;AAUA,IAAa,qCAAqC,EAChD,UACA,WACA,GAAG,WAEH,wBAAA,cAAC,OAAD;CAAK,WAAW,GAAG,QAAQ,SAAS,gBAAgB,UAAU;CAAE,GAAI;CAc9D,EAZF,QAAM,SAAS,IAAI,WAAW,UAAU;AACtC,KAAI,OAAO,UAAU,YAAY,OAAO,UAAU,SAChD,QACE,wBAAA,cAAC,4BAAA,MAA4B,MAAmC;AAGpE,KAAI,QAAM,eAAe,MAAM,IAAI,MAAM,SAAS,KAChD,QAAO,wBAAA,cAAC,4BAA+B,MAAM,MAAS;AAExD,QAAO;EACP,CAEA"}

package/dist/components/number-input/NumberInput.js

@@ -1,8 +1,7 @@
-import { styled } from "../../styled.js";
+import { cn, styled } from "../../styled.js";
 import { Input } from "../input/Input.js";
 import { getFieldIconSize } from "../../utilities/style/get-icon-size.js";
 import { NumberInputStepper } from "./NumberInputStepper.js";
-import clsx from "clsx";
 import * as React$1 from "react";
 import { Minus, Plus } from "@atom-learning/icons";
 //#region src/components/number-input/NumberInput.tsx
@@ -112,7 +111,7 @@ var NumberInput = React$1.forwardRef(({ value, defaultValue = 0, onValueChange,
 		theme,
 		state: externalState || (hasError ? "error" : void 0),
 		"aria-invalid": externalAriaInvalid || hasError || void 0,
-		className: clsx("rounded-none", "w-16", "[&_>_input]:text-center", "disabled:opacity-30", "disabled:pointer-events-none", emphasis === "bold" && [
+		className: cn("rounded-none", "w-16", "[&_>_input]:text-center", "disabled:opacity-30", "disabled:pointer-events-none", emphasis === "bold" && [
 			"rounded-1",
 			"[&_>_input[aria-invalid=true]]:text-danger",
 			"focus-within:[&_>_input]:text-grey-1000"
@@ -138,7 +137,7 @@ var NumberInput = React$1.forwardRef(({ value, defaultValue = 0, onValueChange,
 	}, /* @__PURE__ */ React$1.createElement(NumberInputStepper, {
 		onClick: decrement,
 		icon: Minus,
-		className: clsx(emphasis !== "bold" && "border-r-none rounded-r-none"),
+		className: cn(emphasis !== "bold" && "border-r-none rounded-r-none"),
 		size: iconSize,
 		fieldAppearance: appearance,
 		fieldTheme: theme,
@@ -150,7 +149,7 @@ var NumberInput = React$1.forwardRef(({ value, defaultValue = 0, onValueChange,
 	}), /* @__PURE__ */ React$1.createElement(Input, inputProps), /* @__PURE__ */ React$1.createElement(NumberInputStepper, {
 		onClick: increment,
 		icon: Plus,
-		className: clsx(emphasis !== "bold" && "border-l-none rounded-l-none"),
+		className: cn(emphasis !== "bold" && "border-l-none rounded-l-none"),
 		size: iconSize,
 		fieldAppearance: appearance,
 		fieldTheme: theme,

package/dist/components/number-input/NumberInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"NumberInput.js","names":[],"sources":["../../../src/components/number-input/NumberInput.tsx"],"sourcesContent":["import { Minus, Plus } from '@atom-learning/icons'\nimport clsx from 'clsx'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\nimport { getFieldIconSize } from '~/utilities/style/get-icon-size'\n\nimport { Input } from '../input/Input'\nimport { NumberInputStepper } from './NumberInputStepper'\n\nexport interface NumberInputProps {\n  name: string\n  min?: number\n  max?: number\n  step?: number\n  value?: number\n  defaultValue?: number\n  disabled?: boolean\n  readonly?: boolean\n  size?: 'sm' | 'md' | 'lg'\n  appearance?: 'standard' | 'modern'\n  theme?: 'white' | 'grey'\n  emphasis?: 'bold'\n  onValueChange?: (value: number) => void\n  stepperButtonLabels?: { increment?: string; decrement?: string }\n  disabledTooltipContent?: { increment?: string; decrement?: string }\n  className?: string\n}\n\nconst NumberInputContainer = styled('div', {\n  base: ['flex'],\n  variants: {\n    appearance: {\n      standard: [],\n      modern: ['gap-px']\n    },\n    emphasis: {\n      bold: ['gap-0']\n    }\n  }\n})\n\nexport const NumberInput = React.forwardRef<HTMLInputElement, NumberInputProps>(\n  (\n    {\n      value,\n      defaultValue = 0,\n      onValueChange,\n      min = 0,\n      max = Number.MAX_SAFE_INTEGER,\n      step = 1,\n      disabled: isDisabled = false,\n      readonly: isReadOnly = false,\n      size = 'md',\n      stepperButtonLabels: stepperButtonLabelsProp,\n      disabledTooltipContent: disabledTooltipContentProp,\n      className,\n      appearance = 'standard',\n      theme,\n      emphasis,\n      ...rest\n    },\n    ref\n  ): JSX.Element => {\n    const [internalValue, setInternalValue] = React.useState<number>(\n      value || defaultValue\n    )\n    React.useEffect(() => {\n      // Update the internal value to match what is passed in.\n      if (typeof value !== 'undefined') setInternalValue(value)\n    }, [value])\n\n    const inputRef = React.useRef<HTMLInputElement | null>(null)\n\n    React.useImperativeHandle(ref, () => inputRef.current as HTMLInputElement)\n\n    const iconSize = React.useMemo(() => getFieldIconSize(size), [size])\n\n    const stepperButtonLabels = {\n      increment: 'increment',\n      decrement: 'decrement',\n      ...stepperButtonLabelsProp\n    }\n\n    const disabledTooltipContent = {\n      decrement: `Cannot enter values below ${min}`,\n      increment: `Cannot enter values above ${max}`,\n      ...disabledTooltipContentProp\n    }\n\n    const isAtMax = internalValue >= max\n    const isAtMin = internalValue <= min\n\n    const clamp = React.useCallback(\n      (internalValue: number) => Math.min(Math.max(internalValue, min), max),\n      [max, min]\n    )\n\n    const updateValue = React.useCallback(\n      (newValue: number) => {\n        onValueChange?.(newValue)\n        setInternalValue(newValue)\n      },\n      [onValueChange]\n    )\n\n    const onInputChange = React.useCallback(\n      (event: React.ChangeEvent<HTMLInputElement>) => {\n        const parsedValue = Number(event.target.value.replace(/\\D/g, ''))\n        updateValue(parsedValue)\n      },\n      [updateValue]\n    )\n\n    const increment = React.useCallback(() => {\n      if (isAtMax || isReadOnly) return\n      inputRef?.current?.focus()\n      const newValue = Number(internalValue) + step\n      updateValue(clamp(newValue))\n    }, [clamp, isAtMax, isReadOnly, step, updateValue, internalValue])\n\n    const decrement = React.useCallback(() => {\n      if (isAtMin || isReadOnly) return\n      inputRef?.current?.focus()\n      const newValue = Number(internalValue) - step\n      updateValue(clamp(newValue))\n    }, [clamp, isAtMin, isReadOnly, min, step, updateValue, internalValue])\n\n    const onKeyDown = React.useCallback(\n      (event: React.KeyboardEvent) => {\n        if (event.nativeEvent.isComposing) return\n\n        /**\n         * Keyboard Accessibility\n         *\n         * We want to increase or decrease the input's value\n         * based on if the user the arrow keys.\n         *\n         * @see https://www.w3.org/TR/wai-aria-practices-1.1/#keyboard-interaction-17\n         */\n        const eventKey = event.key\n\n        const keyMap: Record<string, React.KeyboardEventHandler> = {\n          ArrowUp: increment,\n          ArrowRight: increment,\n          ArrowDown: decrement,\n          ArrowLeft: decrement,\n          Home: () => updateValue(min),\n          End: () => updateValue(max)\n        }\n\n        const action = keyMap[eventKey]\n\n        if (action) {\n          event.preventDefault()\n          action(event)\n        }\n      },\n      [increment, decrement, updateValue, min, max]\n    )\n\n    const hasError = internalValue < min || internalValue > max\n    const {\n      state: externalState,\n      'aria-invalid': externalAriaInvalid,\n      ...restProps\n    } = rest as { state?: 'error'; 'aria-invalid'?: boolean } & typeof rest\n\n    const inputProps: React.ComponentProps<typeof Input> = {\n      type: 'number',\n      value: internalValue,\n      ...restProps,\n      onChange: onInputChange,\n      onKeyDown,\n      size,\n      appearance,\n      theme,\n      state: externalState || (hasError ? 'error' : undefined),\n      'aria-invalid': externalAriaInvalid || hasError || undefined,\n      className: clsx(\n        'rounded-none',\n        'w-16',\n        '[&_>_input]:text-center',\n        'disabled:opacity-30',\n        'disabled:pointer-events-none',\n        emphasis === 'bold' && [\n          'rounded-1',\n          '[&_>_input[aria-invalid=true]]:text-danger',\n          'focus-within:[&_>_input]:text-grey-1000'\n        ],\n        emphasis === 'bold' &&\n          appearance === 'standard' && [\n            'border-none',\n            '[&:has([aria-invalid=true])]:border-2',\n            '[&:has([aria-invalid=true])]:border-danger',\n            'focus-within:border-2',\n            'focus-within:border-blue-800'\n          ]\n      ),\n      ref: inputRef,\n      readOnly: isReadOnly,\n      disabled: isDisabled,\n      'aria-valuemin': min,\n      'aria-valuemax': max,\n      'aria-valuenow': internalValue,\n      role: 'spinbutton'\n    }\n\n    return (\n      <NumberInputContainer\n        appearance={appearance}\n        emphasis={emphasis}\n        className={className}\n      >\n        <NumberInputStepper\n          onClick={decrement}\n          icon={Minus}\n          className={clsx(\n            emphasis !== 'bold' && 'border-r-none rounded-r-none'\n          )}\n          size={iconSize}\n          fieldAppearance={appearance}\n          fieldTheme={theme}\n          emphasis={emphasis}\n          disabled={isAtMin || isDisabled}\n          showTooltip={isAtMin && !isDisabled}\n          disabledTooltipContent={disabledTooltipContent.decrement}\n          label={stepperButtonLabels.decrement}\n        />\n        <Input {...inputProps} />\n        <NumberInputStepper\n          onClick={increment}\n          icon={Plus}\n          className={clsx(\n            emphasis !== 'bold' && 'border-l-none rounded-l-none'\n          )}\n          size={iconSize}\n          fieldAppearance={appearance}\n          fieldTheme={theme}\n          emphasis={emphasis}\n          disabled={isAtMax || isDisabled}\n          showTooltip={isAtMax && !isDisabled}\n          disabledTooltipContent={disabledTooltipContent.increment}\n          label={stepperButtonLabels.increment}\n        />\n      </NumberInputContainer>\n    )\n  }\n)\n\nNumberInput.displayName = 'NumberInput'\n"],"mappings":"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"}
+{"version":3,"file":"NumberInput.js","names":[],"sources":["../../../src/components/number-input/NumberInput.tsx"],"sourcesContent":["import { Minus, Plus } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\nimport { cn } from '~/styled'\nimport { getFieldIconSize } from '~/utilities/style/get-icon-size'\n\nimport { Input } from '../input/Input'\nimport { NumberInputStepper } from './NumberInputStepper'\n\nexport interface NumberInputProps {\n  name: string\n  min?: number\n  max?: number\n  step?: number\n  value?: number\n  defaultValue?: number\n  disabled?: boolean\n  readonly?: boolean\n  size?: 'sm' | 'md' | 'lg'\n  appearance?: 'standard' | 'modern'\n  theme?: 'white' | 'grey'\n  emphasis?: 'bold'\n  onValueChange?: (value: number) => void\n  stepperButtonLabels?: { increment?: string; decrement?: string }\n  disabledTooltipContent?: { increment?: string; decrement?: string }\n  className?: string\n}\n\nconst NumberInputContainer = styled('div', {\n  base: ['flex'],\n  variants: {\n    appearance: {\n      standard: [],\n      modern: ['gap-px']\n    },\n    emphasis: {\n      bold: ['gap-0']\n    }\n  }\n})\n\nexport const NumberInput = React.forwardRef<HTMLInputElement, NumberInputProps>(\n  (\n    {\n      value,\n      defaultValue = 0,\n      onValueChange,\n      min = 0,\n      max = Number.MAX_SAFE_INTEGER,\n      step = 1,\n      disabled: isDisabled = false,\n      readonly: isReadOnly = false,\n      size = 'md',\n      stepperButtonLabels: stepperButtonLabelsProp,\n      disabledTooltipContent: disabledTooltipContentProp,\n      className,\n      appearance = 'standard',\n      theme,\n      emphasis,\n      ...rest\n    },\n    ref\n  ): JSX.Element => {\n    const [internalValue, setInternalValue] = React.useState<number>(\n      value || defaultValue\n    )\n    React.useEffect(() => {\n      // Update the internal value to match what is passed in.\n      if (typeof value !== 'undefined') setInternalValue(value)\n    }, [value])\n\n    const inputRef = React.useRef<HTMLInputElement | null>(null)\n\n    React.useImperativeHandle(ref, () => inputRef.current as HTMLInputElement)\n\n    const iconSize = React.useMemo(() => getFieldIconSize(size), [size])\n\n    const stepperButtonLabels = {\n      increment: 'increment',\n      decrement: 'decrement',\n      ...stepperButtonLabelsProp\n    }\n\n    const disabledTooltipContent = {\n      decrement: `Cannot enter values below ${min}`,\n      increment: `Cannot enter values above ${max}`,\n      ...disabledTooltipContentProp\n    }\n\n    const isAtMax = internalValue >= max\n    const isAtMin = internalValue <= min\n\n    const clamp = React.useCallback(\n      (internalValue: number) => Math.min(Math.max(internalValue, min), max),\n      [max, min]\n    )\n\n    const updateValue = React.useCallback(\n      (newValue: number) => {\n        onValueChange?.(newValue)\n        setInternalValue(newValue)\n      },\n      [onValueChange]\n    )\n\n    const onInputChange = React.useCallback(\n      (event: React.ChangeEvent<HTMLInputElement>) => {\n        const parsedValue = Number(event.target.value.replace(/\\D/g, ''))\n        updateValue(parsedValue)\n      },\n      [updateValue]\n    )\n\n    const increment = React.useCallback(() => {\n      if (isAtMax || isReadOnly) return\n      inputRef?.current?.focus()\n      const newValue = Number(internalValue) + step\n      updateValue(clamp(newValue))\n    }, [clamp, isAtMax, isReadOnly, step, updateValue, internalValue])\n\n    const decrement = React.useCallback(() => {\n      if (isAtMin || isReadOnly) return\n      inputRef?.current?.focus()\n      const newValue = Number(internalValue) - step\n      updateValue(clamp(newValue))\n    }, [clamp, isAtMin, isReadOnly, min, step, updateValue, internalValue])\n\n    const onKeyDown = React.useCallback(\n      (event: React.KeyboardEvent) => {\n        if (event.nativeEvent.isComposing) return\n\n        /**\n         * Keyboard Accessibility\n         *\n         * We want to increase or decrease the input's value\n         * based on if the user the arrow keys.\n         *\n         * @see https://www.w3.org/TR/wai-aria-practices-1.1/#keyboard-interaction-17\n         */\n        const eventKey = event.key\n\n        const keyMap: Record<string, React.KeyboardEventHandler> = {\n          ArrowUp: increment,\n          ArrowRight: increment,\n          ArrowDown: decrement,\n          ArrowLeft: decrement,\n          Home: () => updateValue(min),\n          End: () => updateValue(max)\n        }\n\n        const action = keyMap[eventKey]\n\n        if (action) {\n          event.preventDefault()\n          action(event)\n        }\n      },\n      [increment, decrement, updateValue, min, max]\n    )\n\n    const hasError = internalValue < min || internalValue > max\n    const {\n      state: externalState,\n      'aria-invalid': externalAriaInvalid,\n      ...restProps\n    } = rest as { state?: 'error'; 'aria-invalid'?: boolean } & typeof rest\n\n    const inputProps: React.ComponentProps<typeof Input> = {\n      type: 'number',\n      value: internalValue,\n      ...restProps,\n      onChange: onInputChange,\n      onKeyDown,\n      size,\n      appearance,\n      theme,\n      state: externalState || (hasError ? 'error' : undefined),\n      'aria-invalid': externalAriaInvalid || hasError || undefined,\n      className: cn(\n        'rounded-none',\n        'w-16',\n        '[&_>_input]:text-center',\n        'disabled:opacity-30',\n        'disabled:pointer-events-none',\n        emphasis === 'bold' && [\n          'rounded-1',\n          '[&_>_input[aria-invalid=true]]:text-danger',\n          'focus-within:[&_>_input]:text-grey-1000'\n        ],\n        emphasis === 'bold' &&\n          appearance === 'standard' && [\n            'border-none',\n            '[&:has([aria-invalid=true])]:border-2',\n            '[&:has([aria-invalid=true])]:border-danger',\n            'focus-within:border-2',\n            'focus-within:border-blue-800'\n          ]\n      ),\n      ref: inputRef,\n      readOnly: isReadOnly,\n      disabled: isDisabled,\n      'aria-valuemin': min,\n      'aria-valuemax': max,\n      'aria-valuenow': internalValue,\n      role: 'spinbutton'\n    }\n\n    return (\n      <NumberInputContainer\n        appearance={appearance}\n        emphasis={emphasis}\n        className={className}\n      >\n        <NumberInputStepper\n          onClick={decrement}\n          icon={Minus}\n          className={cn(emphasis !== 'bold' && 'border-r-none rounded-r-none')}\n          size={iconSize}\n          fieldAppearance={appearance}\n          fieldTheme={theme}\n          emphasis={emphasis}\n          disabled={isAtMin || isDisabled}\n          showTooltip={isAtMin && !isDisabled}\n          disabledTooltipContent={disabledTooltipContent.decrement}\n          label={stepperButtonLabels.decrement}\n        />\n        <Input {...inputProps} />\n        <NumberInputStepper\n          onClick={increment}\n          icon={Plus}\n          className={cn(emphasis !== 'bold' && 'border-l-none rounded-l-none')}\n          size={iconSize}\n          fieldAppearance={appearance}\n          fieldTheme={theme}\n          emphasis={emphasis}\n          disabled={isAtMax || isDisabled}\n          showTooltip={isAtMax && !isDisabled}\n          disabledTooltipContent={disabledTooltipContent.increment}\n          label={stepperButtonLabels.increment}\n        />\n      </NumberInputContainer>\n    )\n  }\n)\n\nNumberInput.displayName = 'NumberInput'\n"],"mappings":"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"}

package/dist/components/pagination/Pagination.js

@@ -1,9 +1,9 @@
+import { cn } from "../../styled.js";
 import { ColorScheme } from "../../experiments/color-scheme/ColorScheme.js";
 import { VisibleElementsAmount } from "./pagination.constants.js";
 import { PaginationProvider } from "./pagination-context/PaginationContext.js";
 import { PaginationPopover } from "./PaginationPopover.js";
 import { PaginationItems } from "./PaginationItems.js";
-import clsx from "clsx";
 import * as React$1 from "react";
 //#region src/components/pagination/Pagination.tsx
 var PaginationComponent = ({ colorScheme, onSelectedPageChange, selectedPage, visibleElementsCount = VisibleElementsAmount.LESS, pagesCount, indicatedPages = [], disabledPages = [], onItemHover = () => null, labels = {}, children, className, ...rest }) => {
@@ -25,7 +25,7 @@ var PaginationComponent = ({ colorScheme, onSelectedPageChange, selectedPage, vi
 		asChild: true
 	}, /* @__PURE__ */ React$1.createElement("div", {
 		...rest,
-		className: clsx("flex", "gap-1", className)
+		className: cn("flex", "gap-1", className)
 	}, children || /* @__PURE__ */ React$1.createElement(PaginationItems, null))));
 };
 var Pagination = Object.assign(PaginationComponent, { Popover: PaginationPopover });