@atom-learning/components 10.0.1 → 10.2.0-beta.0

package/dist/components/chip/Chip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Chip.js","names":[],"sources":["../../../src/components/chip/Chip.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { overrideStyledVariantValue } from '../../utilities/override-styled-variant-value/overrideStyledVariantValue'\nimport { Icon } from '../icon/Icon'\n\nexport const StyledChipContent = styled('span', {\n  base: [\n    'inline-flex',\n    'items-center',\n    'px-1',\n    'grow',\n    'overflow-hidden',\n    'text-ellipsis',\n    'whitespace-nowrap',\n    '*:not-last:mr-1'\n  ]\n})\n\nconst toIconSize = { sm: 'sm', md: 'sm', lg: 'md' }\n\nexport const ChipIcon = (props: React.ComponentProps<typeof Icon>) => {\n  const rootContext = React.use(ChipRootContext)\n  const { size } = rootContext\n  const iconSize = overrideStyledVariantValue(size, (s) => toIconSize[s])\n  return <Icon {...props} size={iconSize} />\n}\n\nconst ChipContent = ({ children, ...rest }) => {\n  const childrenArray = React.Children.toArray(children)\n  const isSingleChild = childrenArray.length <= 1\n  return (\n    <StyledChipContent {...rest}>\n      {\n        childrenArray.map((child, index) => {\n          if (!isSingleChild && typeof child === 'string')\n            return (\n              <span\n                key={child}\n                className=\"overflow-hidden text-ellipsis whitespace-nowrap\"\n              >\n                {child}\n              </span>\n            )\n          if (React.isValidElement(child) && child.type === Icon) {\n            const iconProps = child.props as React.ComponentProps<typeof Icon>\n            return <ChipIcon key={`icon-${index}`} {...iconProps} />\n          }\n          return child\n        }) as React.ReactElement<unknown>[]\n      }\n    </StyledChipContent>\n  )\n}\n\nexport const StyledRoot = styled('div', {\n  base: [\n    'flex',\n    'px-2',\n    'border',\n    'rounded-md',\n    'items-center',\n    'font-body',\n    'max-w-full',\n    'border-primary-800',\n    'text-primary-900',\n    'bg-primary-100',\n    'disabled:opacity-30',\n    'disabled:pointer-events-none'\n  ],\n  variants: {\n    size: {\n      sm: ['h-6', 'text-sm', 'leading-[1.53]', 'capsize-[0.4056]'],\n      md: ['h-8', 'text-sm', 'leading-[1.53]', 'capsize-[0.4056]'],\n      lg: ['h-10', 'text-md', 'leading-normal', 'capsize-[0.3864]']\n    },\n    appearance: {\n      standard: [],\n      modern: ['border-grey-900', 'text-grey-900', 'bg-grey-100']\n    }\n  }\n})\n\nexport type ChipRootContext = React.ComponentProps<typeof StyledRoot>\nexport type ChipRootProviderProps = ChipRootContext\n\nexport const ChipRootContext = React.createContext<ChipRootContext>({})\n\nexport const ChipRootProvider = ({ size, children }: ChipRootProviderProps) => {\n  const value = React.useMemo<ChipRootContext>(() => ({ size }), [size])\n  return <ChipRootContext value={value}>{children}</ChipRootContext>\n}\n\nexport type ChipRootProps = ChipRootProviderProps\n\nconst ChipRoot = ({ ref, size = 'md', ...rest }: ChipRootProps) => (\n  <ChipRootProvider size={size}>\n    <StyledRoot ref={ref} size={size} {...rest} />\n  </ChipRootProvider>\n)\n\nexport const Chip = /* @__PURE__ */ Object.assign(ChipRoot, {\n  Content: ChipContent,\n  Icon: ChipIcon\n})\n"],"mappings":";;;;;;AAMA,IAAa,oBAAoB,OAAO,QAAQ,EAC9C,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,EACF,CAAC;AAED,IAAM,aAAa;CAAE,IAAI;CAAM,IAAI;CAAM,IAAI;AAAK;AAElD,IAAa,YAAY,UAA6C;CAEpE,MAAM,EAAE,SADY,QAAM,IAAI,eACb;CACjB,MAAM,WAAW,2BAA2B,OAAO,MAAM,WAAW,EAAE;CACtE,OAAO,oBAAC,MAAD;EAAM,GAAI;EAAO,MAAM;CAAW,CAAA;AAC3C;AAEA,IAAM,eAAe,EAAE,UAAU,GAAG,WAAW;CAC7C,MAAM,gBAAgB,QAAM,SAAS,QAAQ,QAAQ;CACrD,MAAM,gBAAgB,cAAc,UAAU;CAC9C,OACE,oBAAC,mBAAD;EAAmB,GAAI;YAEnB,cAAc,KAAK,OAAO,UAAU;GAClC,IAAI,CAAC,iBAAiB,OAAO,UAAU,UACrC,OACE,oBAAC,QAAD;IAEE,WAAU;cAET;GACG,GAJC,KAID;GAEV,IAAI,QAAM,eAAe,KAAK,KAAK,MAAM,SAAS,MAAM;IACtD,MAAM,YAAY,MAAM;IACxB,OAAO,oBAAC,UAAD,EAAgC,GAAI,UAAY,GAAjC,QAAQ,OAAyB;GACzD;GACA,OAAO;EACT,CAAC;CAEc,CAAA;AAEvB;AAEA,IAAa,aAAa,OAAO,OAAO;CACtC,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU;EACR,MAAM;GACJ,IAAI;IAAC;IAAO;IAAW;IAAkB;GAAkB;GAC3D,IAAI;IAAC;IAAO;IAAW;IAAkB;GAAkB;GAC3D,IAAI;IAAC;IAAQ;IAAW;IAAkB;GAAkB;EAC9D;EACA,YAAY;GACV,UAAU,CAAC;GACX,QAAQ;IAAC;IAAmB;IAAiB;GAAa;EAC5D;CACF;AACF,CAAC;AAKD,IAAa,kBAAkB,QAAM,cAA+B,CAAC,CAAC;AAEtE,IAAa,oBAAoB,EAAE,MAAM,eAAsC;CAE7E,OAAO,oBAAC,iBAAD;EAAwB,OADjB,QAAM,eAAgC,EAAE,KAAK,IAAI,CAAC,IAAI,CACrC;EAAQ;CAA0B,CAAA;AACnE;AAIA,IAAM,YAAY,EAAE,KAAK,OAAO,MAAM,GAAG,WACvC,oBAAC,kBAAD;CAAwB;WACtB,oBAAC,YAAD;EAAiB;EAAW;EAAM,GAAI;CAAO,CAAA;AAC7B,CAAA;AAGpB,IAAa,OAAuB,uBAAO,OAAO,UAAU;CAC1D,SAAS;CACT,MAAM;AACR,CAAC"}
+{"version":3,"file":"Chip.js","names":[],"sources":["../../../src/components/chip/Chip.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { overrideStyledVariantValue } from '../../utilities/override-styled-variant-value/overrideStyledVariantValue'\nimport { Icon } from '../icon/Icon'\n\nexport const StyledChipContent = styled('span', {\n  base: [\n    'inline-flex',\n    'items-center',\n    'px-1',\n    'grow',\n    'overflow-hidden',\n    'text-ellipsis',\n    'whitespace-nowrap',\n    '*:not-last:mr-1'\n  ]\n})\n\nconst toIconSize = { sm: 'sm', md: 'sm', lg: 'md' }\n\nexport const ChipIcon = (props: React.ComponentProps<typeof Icon>) => {\n  const rootContext = React.use(ChipRootContext)\n  const { size } = rootContext\n  const iconSize = overrideStyledVariantValue(size, (s) => toIconSize[s])\n  return <Icon {...props} size={iconSize} />\n}\n\nconst ChipContent = ({ children, ...rest }) => {\n  const childrenArray = React.Children.toArray(children)\n  const isSingleChild = childrenArray.length <= 1\n  return (\n    <StyledChipContent {...rest}>\n      {\n        childrenArray.map((child) => {\n          if (!isSingleChild && typeof child === 'string')\n            return (\n              <span\n                key={child}\n                className=\"overflow-hidden text-ellipsis whitespace-nowrap\"\n              >\n                {child}\n              </span>\n            )\n          if (React.isValidElement(child) && child.type === Icon) {\n            const iconProps = child.props as React.ComponentProps<typeof Icon>\n            // `React.Children.toArray` already assigns each child a stable key.\n            return <ChipIcon key={child.key} {...iconProps} />\n          }\n          return child\n        }) as React.ReactElement<unknown>[]\n      }\n    </StyledChipContent>\n  )\n}\n\nexport const StyledRoot = styled('div', {\n  base: [\n    'flex',\n    'px-2',\n    'border',\n    'rounded-md',\n    'items-center',\n    'font-body',\n    'max-w-full',\n    'border-primary-800',\n    'text-primary-900',\n    'bg-primary-100',\n    'disabled:opacity-30',\n    'disabled:pointer-events-none'\n  ],\n  variants: {\n    size: {\n      sm: ['h-6', 'text-sm', 'leading-[1.53]', 'capsize-[0.4056]'],\n      md: ['h-8', 'text-sm', 'leading-[1.53]', 'capsize-[0.4056]'],\n      lg: ['h-10', 'text-md', 'leading-normal', 'capsize-[0.3864]']\n    },\n    appearance: {\n      standard: [],\n      modern: ['border-grey-900', 'text-grey-900', 'bg-grey-100']\n    }\n  }\n})\n\nexport type ChipRootContext = React.ComponentProps<typeof StyledRoot>\nexport type ChipRootProviderProps = ChipRootContext\n\nexport const ChipRootContext = React.createContext<ChipRootContext>({})\n\nexport const ChipRootProvider = ({ size, children }: ChipRootProviderProps) => {\n  const value = React.useMemo<ChipRootContext>(() => ({ size }), [size])\n  return <ChipRootContext value={value}>{children}</ChipRootContext>\n}\n\nexport type ChipRootProps = ChipRootProviderProps\n\nconst ChipRoot = ({ ref, size = 'md', ...rest }: ChipRootProps) => (\n  <ChipRootProvider size={size}>\n    <StyledRoot ref={ref} size={size} {...rest} />\n  </ChipRootProvider>\n)\n\nexport const Chip = /* @__PURE__ */ Object.assign(ChipRoot, {\n  Content: ChipContent,\n  Icon: ChipIcon\n})\n"],"mappings":";;;;;;AAMA,IAAa,oBAAoB,OAAO,QAAQ,EAC9C,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,EACF,CAAC;AAED,IAAM,aAAa;CAAE,IAAI;CAAM,IAAI;CAAM,IAAI;AAAK;AAElD,IAAa,YAAY,UAA6C;CAEpE,MAAM,EAAE,SADY,QAAM,IAAI,eACb;CACjB,MAAM,WAAW,2BAA2B,OAAO,MAAM,WAAW,EAAE;CACtE,OAAO,oBAAC,MAAD;EAAM,GAAI;EAAO,MAAM;CAAW,CAAA;AAC3C;AAEA,IAAM,eAAe,EAAE,UAAU,GAAG,WAAW;CAC7C,MAAM,gBAAgB,QAAM,SAAS,QAAQ,QAAQ;CACrD,MAAM,gBAAgB,cAAc,UAAU;CAC9C,OACE,oBAAC,mBAAD;EAAmB,GAAI;YAEnB,cAAc,KAAK,UAAU;GAC3B,IAAI,CAAC,iBAAiB,OAAO,UAAU,UACrC,OACE,oBAAC,QAAD;IAEE,WAAU;cAET;GACG,GAJC,KAID;GAEV,IAAI,QAAM,eAAe,KAAK,KAAK,MAAM,SAAS,MAAM;IACtD,MAAM,YAAY,MAAM;IAExB,OAAO,oBAAC,UAAD,EAA0B,GAAI,UAAY,GAA3B,MAAM,GAAqB;GACnD;GACA,OAAO;EACT,CAAC;CAEc,CAAA;AAEvB;AAEA,IAAa,aAAa,OAAO,OAAO;CACtC,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU;EACR,MAAM;GACJ,IAAI;IAAC;IAAO;IAAW;IAAkB;GAAkB;GAC3D,IAAI;IAAC;IAAO;IAAW;IAAkB;GAAkB;GAC3D,IAAI;IAAC;IAAQ;IAAW;IAAkB;GAAkB;EAC9D;EACA,YAAY;GACV,UAAU,CAAC;GACX,QAAQ;IAAC;IAAmB;IAAiB;GAAa;EAC5D;CACF;AACF,CAAC;AAKD,IAAa,kBAAkB,QAAM,cAA+B,CAAC,CAAC;AAEtE,IAAa,oBAAoB,EAAE,MAAM,eAAsC;CAE7E,OAAO,oBAAC,iBAAD;EAAwB,OADjB,QAAM,eAAgC,EAAE,KAAK,IAAI,CAAC,IAAI,CACrC;EAAQ;CAA0B,CAAA;AACnE;AAIA,IAAM,YAAY,EAAE,KAAK,OAAO,MAAM,GAAG,WACvC,oBAAC,kBAAD;CAAwB;WACtB,oBAAC,YAAD;EAAiB;EAAW;EAAM,GAAI;CAAO,CAAA;AAC7B,CAAA;AAGpB,IAAa,OAAuB,uBAAO,OAAO,UAAU;CAC1D,SAAS;CACT,MAAM;AACR,CAAC"}

package/dist/components/create-password-field/CreatePasswordField.js

@@ -2,10 +2,14 @@ import { InlineMessage } from "../inline-message/InlineMessage.js";
 import { PasswordField } from "../password-field/PasswordField.js";
 import * as React$1 from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import invariant from "invariant";
+import invariant from "tiny-invariant";
 import { throttle } from "throttle-debounce";
 import { useFormContext } from "react-hook-form";
 //#region src/components/create-password-field/CreatePasswordField.tsx
+var getMessageTheme = (result, isFocused) => {
+	if (result) return "success";
+	return isFocused ? "neutral" : "error";
+};
 var CreatePasswordField = ({ validate, defaultValidation, messageDirection = "row", label = "Create a password", name = "password", className, validation, appearance, ...rest }) => {
 	const { formState, control } = useFormContext();
 	const [isFocused, setIsFocused] = React$1.useState(false);
@@ -22,10 +26,6 @@ var CreatePasswordField = ({ validate, defaultValidation, messageDirection = "ro
 		return false;
 	}, [setValidationResult]);
 	const handleChange = React$1.useMemo(() => throttle(500, validatePassword), [validatePassword]);
-	const getMessageTheme = (result, isFocused) => {
-		if (result) return "success";
-		return isFocused ? "neutral" : "error";
-	};
 	const showValidation = control.mode.isOnBlur && (isFocused || touched) || control.mode.isOnSubmit && (isFocused || formState.isSubmitted && error);
 	return /* @__PURE__ */ jsxs("div", {
 		className,

package/dist/components/create-password-field/CreatePasswordField.js.map

@@ -1 +1 @@
-{"version":3,"file":"CreatePasswordField.js","names":[],"sources":["../../../src/components/create-password-field/CreatePasswordField.tsx"],"sourcesContent":["import invariant from 'invariant'\nimport * as React from 'react'\nimport { useFormContext } from 'react-hook-form'\nimport { throttle } from 'throttle-debounce'\n\nimport type { Override } from '../../utilities/types'\nimport type { FieldElementWrapperProps } from '../field-wrapper/FieldWrapper'\nimport { InlineMessage } from '../inline-message/InlineMessage'\nimport { PasswordField } from '../password-field/PasswordField'\nimport { PasswordInput } from '../password-input/PasswordInput'\n\ntype ValidationResult = Record<string, boolean>\n\ntype CreatePasswordFieldProps = Override<\n  React.ComponentProps<typeof PasswordInput> & FieldElementWrapperProps,\n  {\n    label?: string\n    name?: string\n    validate: (\n      password: string\n    ) => Promise<ValidationResult | undefined> | ValidationResult\n    defaultValidation: ValidationResult\n    messageDirection?: 'row' | 'column'\n  }\n>\n\nexport const CreatePasswordField = ({\n  validate,\n  defaultValidation,\n  messageDirection = 'row',\n  label = 'Create a password',\n  name = 'password',\n  className,\n  validation,\n  appearance,\n  ...rest\n}: CreatePasswordFieldProps) => {\n  const { formState, control } = useFormContext()\n  const [isFocused, setIsFocused] = React.useState<boolean>(false)\n  const [validationResult, setValidationResult] =\n    React.useState<ValidationResult>(defaultValidation)\n\n  const touched: boolean = formState.touched[name]\n  const error =\n    formState.errors[name]?.type === 'validate' ||\n    Object.values(validationResult).every((isValid) => !isValid)\n\n  const validatePassword = React.useCallback(\n    async (password: string) => {\n      const result = await validate(password)\n\n      if (result) {\n        invariant(\n          typeof result === 'object',\n          'The validate function must return an object'\n        )\n\n        setValidationResult(result)\n        return Object.values(result).every((isValid) => isValid)\n      }\n\n      return false\n    },\n    [setValidationResult]\n  )\n\n  // useMemo, not useCallback(throttle(...)): the throttler must survive\n  // re-renders or its timing window resets every render.\n  const handleChange = React.useMemo(\n    () => throttle(500, validatePassword),\n    [validatePassword]\n  )\n\n  const getMessageTheme = (result: boolean, isFocused: boolean) => {\n    if (result) return 'success'\n\n    return isFocused ? 'neutral' : 'error'\n  }\n\n  const showValidation: boolean =\n    (control.mode.isOnBlur && (isFocused || touched)) ||\n    (control.mode.isOnSubmit && (isFocused || (formState.isSubmitted && error)))\n\n  return (\n    <div className={className}>\n      <PasswordField\n        label={label}\n        name={name}\n        onChange={(e: React.ChangeEvent<HTMLInputElement>) =>\n          handleChange(e.target.value)\n        }\n        onBlur={() => setIsFocused(false)}\n        onFocus={() => setIsFocused(true)}\n        validation={{ ...validation, validate: validatePassword }}\n        appearance={appearance}\n        {...rest}\n      />\n      {showValidation && (\n        <div\n          style={{ '--direction': messageDirection }}\n          className=\"direction-(--direction) mt-2 flex flex-wrap gap-2\"\n        >\n          {Object.entries(validationResult).map(([message, result]) => (\n            <InlineMessage\n              key={message}\n              theme={getMessageTheme(result, isFocused)}\n            >\n              {message}\n            </InlineMessage>\n          ))}\n        </div>\n      )}\n    </div>\n  )\n}\n\nCreatePasswordField.displayName = 'CreatePasswordField'\n"],"mappings":";;;;;;;;AA0BA,IAAa,uBAAuB,EAClC,UACA,mBACA,mBAAmB,OACnB,QAAQ,qBACR,OAAO,YACP,WACA,YACA,YACA,GAAG,WAC2B;CAC9B,MAAM,EAAE,WAAW,YAAY,eAAe;CAC9C,MAAM,CAAC,WAAW,gBAAgB,QAAM,SAAkB,KAAK;CAC/D,MAAM,CAAC,kBAAkB,uBACvB,QAAM,SAA2B,iBAAiB;CAEpD,MAAM,UAAmB,UAAU,QAAQ;CAC3C,MAAM,QACJ,UAAU,OAAO,KAAK,EAAE,SAAS,cACjC,OAAO,OAAO,gBAAgB,CAAC,CAAC,OAAO,YAAY,CAAC,OAAO;CAE7D,MAAM,mBAAmB,QAAM,YAC7B,OAAO,aAAqB;EAC1B,MAAM,SAAS,MAAM,SAAS,QAAQ;EAEtC,IAAI,QAAQ;GACV,UACE,OAAO,WAAW,UAClB,6CACF;GAEA,oBAAoB,MAAM;GAC1B,OAAO,OAAO,OAAO,MAAM,CAAC,CAAC,OAAO,YAAY,OAAO;EACzD;EAEA,OAAO;CACT,GACA,CAAC,mBAAmB,CACtB;CAIA,MAAM,eAAe,QAAM,cACnB,SAAS,KAAK,gBAAgB,GACpC,CAAC,gBAAgB,CACnB;CAEA,MAAM,mBAAmB,QAAiB,cAAuB;EAC/D,IAAI,QAAQ,OAAO;EAEnB,OAAO,YAAY,YAAY;CACjC;CAEA,MAAM,iBACH,QAAQ,KAAK,aAAa,aAAa,YACvC,QAAQ,KAAK,eAAe,aAAc,UAAU,eAAe;CAEtE,OACE,qBAAC,OAAD;EAAgB;YAAhB,CACE,oBAAC,eAAD;GACS;GACD;GACN,WAAW,MACT,aAAa,EAAE,OAAO,KAAK;GAE7B,cAAc,aAAa,KAAK;GAChC,eAAe,aAAa,IAAI;GAChC,YAAY;IAAE,GAAG;IAAY,UAAU;GAAiB;GAC5C;GACZ,GAAI;EACL,CAAA,GACA,kBACC,oBAAC,OAAD;GACE,OAAO,EAAE,eAAe,iBAAiB;GACzC,WAAU;aAET,OAAO,QAAQ,gBAAgB,CAAC,CAAC,KAAK,CAAC,SAAS,YAC/C,oBAAC,eAAD;IAEE,OAAO,gBAAgB,QAAQ,SAAS;cAEvC;GACY,GAJR,OAIQ,CAChB;EACE,CAAA,CAEJ;;AAET;AAEA,oBAAoB,cAAc"}
+{"version":3,"file":"CreatePasswordField.js","names":[],"sources":["../../../src/components/create-password-field/CreatePasswordField.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useFormContext } from 'react-hook-form'\nimport { throttle } from 'throttle-debounce'\nimport invariant from 'tiny-invariant'\n\nimport type { Override } from '../../utilities/types'\nimport type { FieldElementWrapperProps } from '../field-wrapper/FieldWrapper'\nimport { InlineMessage } from '../inline-message/InlineMessage'\nimport { PasswordField } from '../password-field/PasswordField'\nimport { PasswordInput } from '../password-input/PasswordInput'\n\ntype ValidationResult = Record<string, boolean>\n\nconst getMessageTheme = (result: boolean, isFocused: boolean) => {\n  if (result) return 'success'\n\n  return isFocused ? 'neutral' : 'error'\n}\n\ntype CreatePasswordFieldProps = Override<\n  React.ComponentProps<typeof PasswordInput> & FieldElementWrapperProps,\n  {\n    label?: string\n    name?: string\n    validate: (\n      password: string\n    ) => Promise<ValidationResult | undefined> | ValidationResult\n    defaultValidation: ValidationResult\n    messageDirection?: 'row' | 'column'\n  }\n>\n\nexport const CreatePasswordField = ({\n  validate,\n  defaultValidation,\n  messageDirection = 'row',\n  label = 'Create a password',\n  name = 'password',\n  className,\n  validation,\n  appearance,\n  ...rest\n}: CreatePasswordFieldProps) => {\n  const { formState, control } = useFormContext()\n  const [isFocused, setIsFocused] = React.useState<boolean>(false)\n  const [validationResult, setValidationResult] =\n    React.useState<ValidationResult>(defaultValidation)\n\n  const touched: boolean = formState.touched[name]\n  const error =\n    formState.errors[name]?.type === 'validate' ||\n    Object.values(validationResult).every((isValid) => !isValid)\n\n  const validatePassword = React.useCallback(\n    async (password: string) => {\n      const result = await validate(password)\n\n      if (result) {\n        invariant(\n          typeof result === 'object',\n          'The validate function must return an object'\n        )\n\n        setValidationResult(result)\n        return Object.values(result).every((isValid) => isValid)\n      }\n\n      return false\n    },\n    [setValidationResult]\n  )\n\n  // useMemo, not useCallback(throttle(...)): the throttler must survive\n  // re-renders or its timing window resets every render.\n  const handleChange = React.useMemo(\n    () => throttle(500, validatePassword),\n    [validatePassword]\n  )\n\n  const showValidation: boolean =\n    (control.mode.isOnBlur && (isFocused || touched)) ||\n    (control.mode.isOnSubmit && (isFocused || (formState.isSubmitted && error)))\n\n  return (\n    <div className={className}>\n      <PasswordField\n        label={label}\n        name={name}\n        onChange={(e: React.ChangeEvent<HTMLInputElement>) =>\n          handleChange(e.target.value)\n        }\n        onBlur={() => setIsFocused(false)}\n        onFocus={() => setIsFocused(true)}\n        validation={{ ...validation, validate: validatePassword }}\n        appearance={appearance}\n        {...rest}\n      />\n      {showValidation && (\n        <div\n          style={{ '--direction': messageDirection }}\n          className=\"direction-(--direction) mt-2 flex flex-wrap gap-2\"\n        >\n          {Object.entries(validationResult).map(([message, result]) => (\n            <InlineMessage\n              key={message}\n              theme={getMessageTheme(result, isFocused)}\n            >\n              {message}\n            </InlineMessage>\n          ))}\n        </div>\n      )}\n    </div>\n  )\n}\n\nCreatePasswordField.displayName = 'CreatePasswordField'\n"],"mappings":";;;;;;;;AAaA,IAAM,mBAAmB,QAAiB,cAAuB;CAC/D,IAAI,QAAQ,OAAO;CAEnB,OAAO,YAAY,YAAY;AACjC;AAeA,IAAa,uBAAuB,EAClC,UACA,mBACA,mBAAmB,OACnB,QAAQ,qBACR,OAAO,YACP,WACA,YACA,YACA,GAAG,WAC2B;CAC9B,MAAM,EAAE,WAAW,YAAY,eAAe;CAC9C,MAAM,CAAC,WAAW,gBAAgB,QAAM,SAAkB,KAAK;CAC/D,MAAM,CAAC,kBAAkB,uBACvB,QAAM,SAA2B,iBAAiB;CAEpD,MAAM,UAAmB,UAAU,QAAQ;CAC3C,MAAM,QACJ,UAAU,OAAO,KAAK,EAAE,SAAS,cACjC,OAAO,OAAO,gBAAgB,CAAC,CAAC,OAAO,YAAY,CAAC,OAAO;CAE7D,MAAM,mBAAmB,QAAM,YAC7B,OAAO,aAAqB;EAC1B,MAAM,SAAS,MAAM,SAAS,QAAQ;EAEtC,IAAI,QAAQ;GACV,UACE,OAAO,WAAW,UAClB,6CACF;GAEA,oBAAoB,MAAM;GAC1B,OAAO,OAAO,OAAO,MAAM,CAAC,CAAC,OAAO,YAAY,OAAO;EACzD;EAEA,OAAO;CACT,GACA,CAAC,mBAAmB,CACtB;CAIA,MAAM,eAAe,QAAM,cACnB,SAAS,KAAK,gBAAgB,GACpC,CAAC,gBAAgB,CACnB;CAEA,MAAM,iBACH,QAAQ,KAAK,aAAa,aAAa,YACvC,QAAQ,KAAK,eAAe,aAAc,UAAU,eAAe;CAEtE,OACE,qBAAC,OAAD;EAAgB;YAAhB,CACE,oBAAC,eAAD;GACS;GACD;GACN,WAAW,MACT,aAAa,EAAE,OAAO,KAAK;GAE7B,cAAc,aAAa,KAAK;GAChC,eAAe,aAAa,IAAI;GAChC,YAAY;IAAE,GAAG;IAAY,UAAU;GAAiB;GAC5C;GACZ,GAAI;EACL,CAAA,GACA,kBACC,oBAAC,OAAD;GACE,OAAO,EAAE,eAAe,iBAAiB;GACzC,WAAU;aAET,OAAO,QAAQ,gBAAgB,CAAC,CAAC,KAAK,CAAC,SAAS,YAC/C,oBAAC,eAAD;IAEE,OAAO,gBAAgB,QAAQ,SAAS;cAEvC;GACY,GAJR,OAIQ,CAChB;EACE,CAAA,CAEJ;;AAET;AAEA,oBAAoB,cAAc"}

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

@@ -40,18 +40,18 @@ var SortIcon = ({ direction }) => /* @__PURE__ */ jsx(Icon, {
 	size: "sm",
 	className: "stroke-primary-900 absolute left-1"
 });
+var handleKeyDown = (event, callback) => {
+	if (event.key === "Enter" || event.key === " ") {
+		event.preventDefault();
+		callback(event);
+	}
+};
 var DataTableHeaderCell = ({ header, includeTotal = false, totalSuffix = "items", children, className, ...rest }) => {
 	const sortDirection = header.column.getIsSorted();
 	const { isSortable: isSortableTable, getRowModel } = useDataTable();
 	const isDataColumn = header.column.getCanSort();
 	const totalRows = getRowModel()?.rows?.length;
 	const { hoverProps, isHovered } = useHover({});
-	const handleKeyDown = (event, callback) => {
-		if (event.key === "Enter" || event.key === " ") {
-			event.preventDefault();
-			callback(event);
-		}
-	};
 	const headerSortingHandler = header.column.getToggleSortingHandler();
 	return /* @__PURE__ */ jsx(StyledTableHeaderCell, {
 		isSortable: isSortableTable && isDataColumn,
@@ -70,7 +70,7 @@ var DataTableHeaderCell = ({ header, includeTotal = false, totalSuffix = "items"
 					className: cn("flex", "items-center", "relative", "size-6", "ml-2", isHovered ? "bg-primary-200" : "bg-primary-100", "rounded-sm"),
 					children: /* @__PURE__ */ jsx(SortIcon, { direction: sortDirection })
 				}),
-				includeTotal && /* @__PURE__ */ jsxs(StyledCount, {
+				includeTotal ? /* @__PURE__ */ jsxs(StyledCount, {
 					size: "sm",
 					weight: "normal",
 					children: [
@@ -80,7 +80,7 @@ var DataTableHeaderCell = ({ header, includeTotal = false, totalSuffix = "items"
 						totalSuffix,
 						")"
 					]
-				})
+				}) : null
 			]
 		})
 	});

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

@@ -1 +1 @@
-{"version":3,"file":"DataTableHeaderCell.js","names":[],"sources":["../../../src/components/data-table/DataTableHeaderCell.tsx"],"sourcesContent":["import { ArrowDown, ArrowUp } from '@atom-learning/icons'\nimport type { Header } from '@tanstack/react-table'\nimport { flexRender } from '@tanstack/react-table'\nimport * as React from 'react'\nimport { useHover } from 'react-aria'\n\nimport { styled, cn } from '../../styled'\nimport { Icon } from '../icon/Icon'\nimport { Table } from '../table/Table'\nimport { Text } from '../text/Text'\nimport { useDataTable } from './DataTable.context'\n\ntype DataTableHeaderProps = React.ComponentProps<typeof Table.HeaderCell> & {\n  header: Header<Record<string, unknown>, unknown>\n  includeTotal?: boolean\n  totalSuffix?: string\n}\n\nconst StyledCount = styled(Text, {\n  base: ['text-grey-600', 'whitespace-nowrap', 'hidden', 'min-[800px]:block']\n})\n\nconst StyledTableHeaderCell = styled(Table.HeaderCell, {\n  base: [],\n  variants: {\n    isSortable: {\n      true: [\n        '*:relative',\n        'before:absolute',\n        'before:bg-primary-100',\n        'before:duration-200',\n        'before:ease-in',\n        'before:inset-0',\n        'before:opacity-0',\n        'before:transition-opacity',\n        'cursor-pointer',\n        'hover:before:opacity-50',\n        'relative'\n      ]\n    }\n  }\n})\n\nconst sortIcons = {\n  asc: ArrowUp,\n  desc: ArrowDown\n}\n\nconst SortIcon = ({ direction }: { direction: 'asc' | 'desc' }) => (\n  <Icon\n    is={sortIcons[direction]}\n    size=\"sm\"\n    className=\"stroke-primary-900 absolute left-1\"\n  />\n)\n\nexport const DataTableHeaderCell = ({\n  header,\n  includeTotal = false,\n  totalSuffix = 'items',\n  children,\n  className,\n  ...rest\n}: DataTableHeaderProps) => {\n  const sortDirection = header.column.getIsSorted()\n  const { isSortable: isSortableTable, getRowModel } = useDataTable()\n  // false for display columns, e.g. \"Actions\"\n  const isDataColumn = header.column.getCanSort()\n\n  const totalRows = getRowModel()?.rows?.length\n\n  const { hoverProps, isHovered } = useHover({})\n\n  const handleKeyDown = (\n    event: React.KeyboardEvent<HTMLTableCellElement>,\n    callback: (event: unknown) => void | undefined\n  ) => {\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault()\n      callback(event as unknown)\n    }\n  }\n\n  const headerSortingHandler = header.column.getToggleSortingHandler()\n\n  return (\n    <StyledTableHeaderCell\n      isSortable={isSortableTable && isDataColumn}\n      colSpan={header.colSpan}\n      onClick={\n        isSortableTable && isDataColumn && headerSortingHandler\n          ? headerSortingHandler\n          : undefined\n      }\n      onKeyDown={(event) =>\n        isSortableTable &&\n        isDataColumn &&\n        headerSortingHandler &&\n        handleKeyDown(event, headerSortingHandler)\n      }\n      tabIndex={isSortableTable && isDataColumn ? 0 : -1}\n      {...hoverProps}\n      className={className}\n      {...rest}\n    >\n      <div\n        className={cn(\n          'flex',\n          'gap-1',\n          'items-center',\n          header.colSpan > 1 ? 'justify-center' : 'justify-start'\n        )}\n      >\n        {flexRender(header.column.columnDef.header, header.getContext())}\n        {sortDirection && isSortableTable && (\n          <div\n            className={cn(\n              'flex',\n              'items-center',\n              'relative',\n              'size-6',\n              'ml-2',\n              isHovered ? 'bg-primary-200' : 'bg-primary-100',\n              'rounded-sm'\n            )}\n          >\n            <SortIcon direction={sortDirection} />\n          </div>\n        )}\n        {includeTotal && (\n          <StyledCount size=\"sm\" weight=\"normal\">\n            ({totalRows} {totalSuffix})\n          </StyledCount>\n        )}\n      </div>\n    </StyledTableHeaderCell>\n  )\n}\n"],"mappings":";;;;;;;;;;;AAkBA,IAAM,cAAc,OAAO,MAAM,EAC/B,MAAM;CAAC;CAAiB;CAAqB;CAAU;AAAmB,EAC5E,CAAC;AAED,IAAM,wBAAwB,OAAO,MAAM,YAAY;CACrD,MAAM,CAAC;CACP,UAAU,EACR,YAAY,EACV,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,EACF,EACF;AACF,CAAC;AAED,IAAM,YAAY;CAChB,KAAK;CACL,MAAM;AACR;AAEA,IAAM,YAAY,EAAE,gBAClB,oBAAC,MAAD;CACE,IAAI,UAAU;CACd,MAAK;CACL,WAAU;AACX,CAAA;AAGH,IAAa,uBAAuB,EAClC,QACA,eAAe,OACf,cAAc,SACd,UACA,WACA,GAAG,WACuB;CAC1B,MAAM,gBAAgB,OAAO,OAAO,YAAY;CAChD,MAAM,EAAE,YAAY,iBAAiB,gBAAgB,aAAa;CAElE,MAAM,eAAe,OAAO,OAAO,WAAW;CAE9C,MAAM,YAAY,YAAY,CAAC,EAAE,MAAM;CAEvC,MAAM,EAAE,YAAY,cAAc,SAAS,CAAC,CAAC;CAE7C,MAAM,iBACJ,OACA,aACG;EACH,IAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,KAAK;GAC9C,MAAM,eAAe;GACrB,SAAS,KAAgB;EAC3B;CACF;CAEA,MAAM,uBAAuB,OAAO,OAAO,wBAAwB;CAEnE,OACE,oBAAC,uBAAD;EACE,YAAY,mBAAmB;EAC/B,SAAS,OAAO;EAChB,SACE,mBAAmB,gBAAgB,uBAC/B,uBACA,KAAA;EAEN,YAAY,UACV,mBACA,gBACA,wBACA,cAAc,OAAO,oBAAoB;EAE3C,UAAU,mBAAmB,eAAe,IAAI;EAChD,GAAI;EACO;EACX,GAAI;YAEJ,qBAAC,OAAD;GACE,WAAW,GACT,QACA,SACA,gBACA,OAAO,UAAU,IAAI,mBAAmB,eAC1C;aANF;IAQG,WAAW,OAAO,OAAO,UAAU,QAAQ,OAAO,WAAW,CAAC;IAC9D,iBAAiB,mBAChB,oBAAC,OAAD;KACE,WAAW,GACT,QACA,gBACA,YACA,UACA,QACA,YAAY,mBAAmB,kBAC/B,YACF;eAEA,oBAAC,UAAD,EAAU,WAAW,cAAgB,CAAA;IAClC,CAAA;IAEN,gBACC,qBAAC,aAAD;KAAa,MAAK;KAAK,QAAO;eAA9B;MAAuC;MACnC;MAAU;MAAE;MAAY;KACf;;GAEZ;;CACgB,CAAA;AAE3B"}
+{"version":3,"file":"DataTableHeaderCell.js","names":[],"sources":["../../../src/components/data-table/DataTableHeaderCell.tsx"],"sourcesContent":["import { ArrowDown, ArrowUp } from '@atom-learning/icons'\nimport type { Header } from '@tanstack/react-table'\nimport { flexRender } from '@tanstack/react-table'\nimport * as React from 'react'\nimport { useHover } from 'react-aria'\n\nimport { styled, cn } from '../../styled'\nimport { Icon } from '../icon/Icon'\nimport { Table } from '../table/Table'\nimport { Text } from '../text/Text'\nimport { useDataTable } from './DataTable.context'\n\ntype DataTableHeaderProps = React.ComponentProps<typeof Table.HeaderCell> & {\n  header: Header<Record<string, unknown>, unknown>\n  includeTotal?: boolean\n  totalSuffix?: string\n}\n\nconst StyledCount = styled(Text, {\n  base: ['text-grey-600', 'whitespace-nowrap', 'hidden', 'min-[800px]:block']\n})\n\nconst StyledTableHeaderCell = styled(Table.HeaderCell, {\n  base: [],\n  variants: {\n    isSortable: {\n      true: [\n        '*:relative',\n        'before:absolute',\n        'before:bg-primary-100',\n        'before:duration-200',\n        'before:ease-in',\n        'before:inset-0',\n        'before:opacity-0',\n        'before:transition-opacity',\n        'cursor-pointer',\n        'hover:before:opacity-50',\n        'relative'\n      ]\n    }\n  }\n})\n\nconst sortIcons = {\n  asc: ArrowUp,\n  desc: ArrowDown\n}\n\nconst SortIcon = ({ direction }: { direction: 'asc' | 'desc' }) => (\n  <Icon\n    is={sortIcons[direction]}\n    size=\"sm\"\n    className=\"stroke-primary-900 absolute left-1\"\n  />\n)\n\nconst handleKeyDown = (\n  event: React.KeyboardEvent<HTMLTableCellElement>,\n  callback: (event: unknown) => void | undefined\n) => {\n  if (event.key === 'Enter' || event.key === ' ') {\n    event.preventDefault()\n    callback(event as unknown)\n  }\n}\n\nexport const DataTableHeaderCell = ({\n  header,\n  includeTotal = false,\n  totalSuffix = 'items',\n  children,\n  className,\n  ...rest\n}: DataTableHeaderProps) => {\n  const sortDirection = header.column.getIsSorted()\n  const { isSortable: isSortableTable, getRowModel } = useDataTable()\n  // false for display columns, e.g. \"Actions\"\n  const isDataColumn = header.column.getCanSort()\n\n  const totalRows = getRowModel()?.rows?.length\n\n  const { hoverProps, isHovered } = useHover({})\n\n  const headerSortingHandler = header.column.getToggleSortingHandler()\n\n  return (\n    <StyledTableHeaderCell\n      isSortable={isSortableTable && isDataColumn}\n      colSpan={header.colSpan}\n      onClick={\n        isSortableTable && isDataColumn && headerSortingHandler\n          ? headerSortingHandler\n          : undefined\n      }\n      onKeyDown={(event) =>\n        isSortableTable &&\n        isDataColumn &&\n        headerSortingHandler &&\n        handleKeyDown(event, headerSortingHandler)\n      }\n      tabIndex={isSortableTable && isDataColumn ? 0 : -1}\n      {...hoverProps}\n      className={className}\n      {...rest}\n    >\n      <div\n        className={cn(\n          'flex',\n          'gap-1',\n          'items-center',\n          header.colSpan > 1 ? 'justify-center' : 'justify-start'\n        )}\n      >\n        {flexRender(header.column.columnDef.header, header.getContext())}\n        {sortDirection && isSortableTable && (\n          <div\n            className={cn(\n              'flex',\n              'items-center',\n              'relative',\n              'size-6',\n              'ml-2',\n              isHovered ? 'bg-primary-200' : 'bg-primary-100',\n              'rounded-sm'\n            )}\n          >\n            <SortIcon direction={sortDirection} />\n          </div>\n        )}\n        {includeTotal ? (\n          <StyledCount size=\"sm\" weight=\"normal\">\n            ({totalRows} {totalSuffix})\n          </StyledCount>\n        ) : null}\n      </div>\n    </StyledTableHeaderCell>\n  )\n}\n"],"mappings":";;;;;;;;;;;AAkBA,IAAM,cAAc,OAAO,MAAM,EAC/B,MAAM;CAAC;CAAiB;CAAqB;CAAU;AAAmB,EAC5E,CAAC;AAED,IAAM,wBAAwB,OAAO,MAAM,YAAY;CACrD,MAAM,CAAC;CACP,UAAU,EACR,YAAY,EACV,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,EACF,EACF;AACF,CAAC;AAED,IAAM,YAAY;CAChB,KAAK;CACL,MAAM;AACR;AAEA,IAAM,YAAY,EAAE,gBAClB,oBAAC,MAAD;CACE,IAAI,UAAU;CACd,MAAK;CACL,WAAU;AACX,CAAA;AAGH,IAAM,iBACJ,OACA,aACG;CACH,IAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,KAAK;EAC9C,MAAM,eAAe;EACrB,SAAS,KAAgB;CAC3B;AACF;AAEA,IAAa,uBAAuB,EAClC,QACA,eAAe,OACf,cAAc,SACd,UACA,WACA,GAAG,WACuB;CAC1B,MAAM,gBAAgB,OAAO,OAAO,YAAY;CAChD,MAAM,EAAE,YAAY,iBAAiB,gBAAgB,aAAa;CAElE,MAAM,eAAe,OAAO,OAAO,WAAW;CAE9C,MAAM,YAAY,YAAY,CAAC,EAAE,MAAM;CAEvC,MAAM,EAAE,YAAY,cAAc,SAAS,CAAC,CAAC;CAE7C,MAAM,uBAAuB,OAAO,OAAO,wBAAwB;CAEnE,OACE,oBAAC,uBAAD;EACE,YAAY,mBAAmB;EAC/B,SAAS,OAAO;EAChB,SACE,mBAAmB,gBAAgB,uBAC/B,uBACA,KAAA;EAEN,YAAY,UACV,mBACA,gBACA,wBACA,cAAc,OAAO,oBAAoB;EAE3C,UAAU,mBAAmB,eAAe,IAAI;EAChD,GAAI;EACO;EACX,GAAI;YAEJ,qBAAC,OAAD;GACE,WAAW,GACT,QACA,SACA,gBACA,OAAO,UAAU,IAAI,mBAAmB,eAC1C;aANF;IAQG,WAAW,OAAO,OAAO,UAAU,QAAQ,OAAO,WAAW,CAAC;IAC9D,iBAAiB,mBAChB,oBAAC,OAAD;KACE,WAAW,GACT,QACA,gBACA,YACA,UACA,QACA,YAAY,mBAAmB,kBAC/B,YACF;eAEA,oBAAC,UAAD,EAAU,WAAW,cAAgB,CAAA;IAClC,CAAA;IAEN,eACC,qBAAC,aAAD;KAAa,MAAK;KAAK,QAAO;eAA9B;MAAuC;MACnC;MAAU;MAAE;MAAY;KACf;SACX;GACD;;CACgB,CAAA;AAE3B"}

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

@@ -1 +1 @@
-{"version":3,"file":"DataTableSelectAllRowsCheckbox.js","names":[],"sources":["../../../src/components/data-table/DataTableSelectAllRowsCheckbox.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Checkbox } from '../checkbox/Checkbox'\nimport { Label } from '../label/Label'\nimport { useDataTable } from './DataTable.context'\n\nexport const DataTableSelectAllRowsCheckbox = ({\n  label = 'All rows selection'\n}: {\n  label?: string\n}) => {\n  const {\n    getIsAllPageRowsSelected,\n    getIsSomePageRowsSelected,\n    toggleAllPageRowsSelected,\n    tableId\n  } = useDataTable()\n\n  const getCheckedState = () => {\n    if (getIsSomePageRowsSelected()) return 'indeterminate'\n    if (getIsAllPageRowsSelected()) return true\n    return false\n  }\n\n  const updateCheckedState = () => {\n    if (getIsSomePageRowsSelected()) {\n      return toggleAllPageRowsSelected(false)\n    }\n    return toggleAllPageRowsSelected(!getIsAllPageRowsSelected())\n  }\n\n  return (\n    <>\n      <label htmlFor={`${tableId}_all_rows_selection`} className=\"sr-only\">\n        {label}\n      </label>\n      <Checkbox\n        size=\"lg\"\n        checked={getCheckedState()}\n        onCheckedChange={updateCheckedState}\n        id={`${tableId}_all_rows_selection`}\n        name={`${tableId}_all_rows_selection`}\n      />\n    </>\n  )\n}\n"],"mappings":";;;;;AAMA,IAAa,kCAAkC,EAC7C,QAAQ,2BAGJ;CACJ,MAAM,EACJ,0BACA,2BACA,2BACA,YACE,aAAa;CAEjB,MAAM,wBAAwB;EAC5B,IAAI,0BAA0B,GAAG,OAAO;EACxC,IAAI,yBAAyB,GAAG,OAAO;EACvC,OAAO;CACT;CAEA,MAAM,2BAA2B;EAC/B,IAAI,0BAA0B,GAC5B,OAAO,0BAA0B,KAAK;EAExC,OAAO,0BAA0B,CAAC,yBAAyB,CAAC;CAC9D;CAEA,OACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,SAAD;EAAO,SAAS,GAAG,QAAQ;EAAsB,WAAU;YACxD;CACI,CAAA,GACP,oBAAC,UAAD;EACE,MAAK;EACL,SAAS,gBAAgB;EACzB,iBAAiB;EACjB,IAAI,GAAG,QAAQ;EACf,MAAM,GAAG,QAAQ;CAClB,CAAA,CACD,EAAA,CAAA;AAEN"}
+{"version":3,"file":"DataTableSelectAllRowsCheckbox.js","names":[],"sources":["../../../src/components/data-table/DataTableSelectAllRowsCheckbox.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Checkbox } from '../checkbox/Checkbox'\nimport { useDataTable } from './DataTable.context'\n\nexport const DataTableSelectAllRowsCheckbox = ({\n  label = 'All rows selection'\n}: {\n  label?: string\n}) => {\n  const {\n    getIsAllPageRowsSelected,\n    getIsSomePageRowsSelected,\n    toggleAllPageRowsSelected,\n    tableId\n  } = useDataTable()\n\n  const getCheckedState = () => {\n    if (getIsSomePageRowsSelected()) return 'indeterminate'\n    if (getIsAllPageRowsSelected()) return true\n    return false\n  }\n\n  const updateCheckedState = () => {\n    if (getIsSomePageRowsSelected()) {\n      return toggleAllPageRowsSelected(false)\n    }\n    return toggleAllPageRowsSelected(!getIsAllPageRowsSelected())\n  }\n\n  return (\n    <>\n      <label htmlFor={`${tableId}_all_rows_selection`} className=\"sr-only\">\n        {label}\n      </label>\n      <Checkbox\n        size=\"lg\"\n        checked={getCheckedState()}\n        onCheckedChange={updateCheckedState}\n        id={`${tableId}_all_rows_selection`}\n        name={`${tableId}_all_rows_selection`}\n      />\n    </>\n  )\n}\n"],"mappings":";;;;;AAKA,IAAa,kCAAkC,EAC7C,QAAQ,2BAGJ;CACJ,MAAM,EACJ,0BACA,2BACA,2BACA,YACE,aAAa;CAEjB,MAAM,wBAAwB;EAC5B,IAAI,0BAA0B,GAAG,OAAO;EACxC,IAAI,yBAAyB,GAAG,OAAO;EACvC,OAAO;CACT;CAEA,MAAM,2BAA2B;EAC/B,IAAI,0BAA0B,GAC5B,OAAO,0BAA0B,KAAK;EAExC,OAAO,0BAA0B,CAAC,yBAAyB,CAAC;CAC9D;CAEA,OACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,SAAD;EAAO,SAAS,GAAG,QAAQ;EAAsB,WAAU;YACxD;CACI,CAAA,GACP,oBAAC,UAAD;EACE,MAAK;EACL,SAAS,gBAAgB;EACzB,iBAAiB;EACjB,IAAI,GAAG,QAAQ;EACf,MAAM,GAAG,QAAQ;CAClB,CAAA,CACD,EAAA,CAAA;AAEN"}

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

@@ -1,4 +1,4 @@
-import invariant from "invariant";
+import invariant from "tiny-invariant";
 //#region src/components/data-table/getNewAsyncData.ts
 var getSortDirection = (sorting) => {
 	if (sorting[0]) return sorting[0].desc ? "desc" : "asc";

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

@@ -1 +1 @@
-{"version":3,"file":"getNewAsyncData.js","names":[],"sources":["../../../src/components/data-table/getNewAsyncData.ts"],"sourcesContent":["import type {\n  PaginationState,\n  SortDirection,\n  SortingState\n} from '@tanstack/react-table'\nimport invariant from 'invariant'\n\nimport type {\n  AsyncDataOptions,\n  AsyncDataResult,\n  GetAsyncData\n} from './DataTable.types'\n\nconst getSortDirection = (sorting: SortingState): SortDirection | undefined => {\n  if (sorting[0]) {\n    return sorting[0].desc ? 'desc' : 'asc'\n  }\n  return undefined\n}\n\nexport const getNewAsyncData = async (\n  getAsyncData: GetAsyncData,\n  asyncDataOptions: Partial<AsyncDataOptions>,\n  paginationState: PaginationState,\n  sorting: SortingState,\n  globalFilter: string\n): Promise<AsyncDataResult | undefined> => {\n  const { pageIndex, pageSize } = paginationState\n  const params = {\n    pageIndex: asyncDataOptions?.pageIndex ?? pageIndex,\n    pageSize: asyncDataOptions?.pageSize ?? pageSize,\n    sortBy: asyncDataOptions?.sortBy ?? sorting[0]?.id,\n    sortDirection: asyncDataOptions?.sortDirection ?? getSortDirection(sorting),\n    globalFilter: asyncDataOptions.globalFilter ?? globalFilter\n  }\n\n  const newData = await getAsyncData(params)\n\n  invariant(\n    Array.isArray(newData?.results),\n    'The getAsyncData function must return an object with a property `result` which must be an array'\n  )\n  invariant(\n    newData && Number.isInteger(newData.total) && newData.total >= 0,\n    'The getAsyncData function must return an object with a property `total` which must be a positive integer or zero'\n  )\n\n  return newData\n}\n"],"mappings":";;AAaA,IAAM,oBAAoB,YAAqD;CAC7E,IAAI,QAAQ,IACV,OAAO,QAAQ,EAAE,CAAC,OAAO,SAAS;AAGtC;AAEA,IAAa,kBAAkB,OAC7B,cACA,kBACA,iBACA,SACA,iBACyC;CACzC,MAAM,EAAE,WAAW,aAAa;CAShC,MAAM,UAAU,MAAM,aAAa;EAPjC,WAAW,kBAAkB,aAAa;EAC1C,UAAU,kBAAkB,YAAY;EACxC,QAAQ,kBAAkB,UAAU,QAAQ,EAAE,EAAE;EAChD,eAAe,kBAAkB,iBAAiB,iBAAiB,OAAO;EAC1E,cAAc,iBAAiB,gBAAgB;CAGd,CAAM;CAEzC,UACE,MAAM,QAAQ,SAAS,OAAO,GAC9B,iGACF;CACA,UACE,WAAW,OAAO,UAAU,QAAQ,KAAK,KAAK,QAAQ,SAAS,GAC/D,kHACF;CAEA,OAAO;AACT"}
+{"version":3,"file":"getNewAsyncData.js","names":[],"sources":["../../../src/components/data-table/getNewAsyncData.ts"],"sourcesContent":["import type {\n  PaginationState,\n  SortDirection,\n  SortingState\n} from '@tanstack/react-table'\nimport invariant from 'tiny-invariant'\n\nimport type {\n  AsyncDataOptions,\n  AsyncDataResult,\n  GetAsyncData\n} from './DataTable.types'\n\nconst getSortDirection = (sorting: SortingState): SortDirection | undefined => {\n  if (sorting[0]) {\n    return sorting[0].desc ? 'desc' : 'asc'\n  }\n  return undefined\n}\n\nexport const getNewAsyncData = async (\n  getAsyncData: GetAsyncData,\n  asyncDataOptions: Partial<AsyncDataOptions>,\n  paginationState: PaginationState,\n  sorting: SortingState,\n  globalFilter: string\n): Promise<AsyncDataResult | undefined> => {\n  const { pageIndex, pageSize } = paginationState\n  const params = {\n    pageIndex: asyncDataOptions?.pageIndex ?? pageIndex,\n    pageSize: asyncDataOptions?.pageSize ?? pageSize,\n    sortBy: asyncDataOptions?.sortBy ?? sorting[0]?.id,\n    sortDirection: asyncDataOptions?.sortDirection ?? getSortDirection(sorting),\n    globalFilter: asyncDataOptions.globalFilter ?? globalFilter\n  }\n\n  const newData = await getAsyncData(params)\n\n  invariant(\n    Array.isArray(newData?.results),\n    'The getAsyncData function must return an object with a property `result` which must be an array'\n  )\n  invariant(\n    newData && Number.isInteger(newData.total) && newData.total >= 0,\n    'The getAsyncData function must return an object with a property `total` which must be a positive integer or zero'\n  )\n\n  return newData\n}\n"],"mappings":";;AAaA,IAAM,oBAAoB,YAAqD;CAC7E,IAAI,QAAQ,IACV,OAAO,QAAQ,EAAE,CAAC,OAAO,SAAS;AAGtC;AAEA,IAAa,kBAAkB,OAC7B,cACA,kBACA,iBACA,SACA,iBACyC;CACzC,MAAM,EAAE,WAAW,aAAa;CAShC,MAAM,UAAU,MAAM,aAAa;EAPjC,WAAW,kBAAkB,aAAa;EAC1C,UAAU,kBAAkB,YAAY;EACxC,QAAQ,kBAAkB,UAAU,QAAQ,EAAE,EAAE;EAChD,eAAe,kBAAkB,iBAAiB,iBAAiB,OAAO;EAC1E,cAAc,iBAAiB,gBAAgB;CAGd,CAAM;CAEzC,UACE,MAAM,QAAQ,SAAS,OAAO,GAC9B,iGACF;CACA,UACE,WAAW,OAAO,UAAU,QAAQ,KAAK,KAAK,QAAQ,SAAS,GAC/D,kHACF;CAEA,OAAO;AACT"}

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

package/dist/components/dropdown-menu/DropdownMenu.d.ts

@@ -8,8 +8,9 @@ export declare const DropdownMenu: React.FC<import("@radix-ui/react-dropdown-men
         ({ className, ...rest }: import("@radix-ui/react-dropdown-menu").DropdownMenuLabelProps & React.RefAttributes<HTMLDivElement>): React.JSX.Element;
         displayName: string;
     };
-    LinkItem: ({ children, href, target, rel, download, ...rest }: React.ComponentProps<typeof DropdownMenuItem> & Pick<React.ComponentPropsWithoutRef<'a'>, 'target' | 'rel' | 'download'> & {
+    LinkItem: ({ children, href, reloadDocument, target, rel, download, ...rest }: React.ComponentProps<typeof DropdownMenuItem> & Pick<React.ComponentPropsWithoutRef<'a'>, 'target' | 'rel' | 'download'> & {
         href: string;
+        reloadDocument?: boolean;
     }) => React.JSX.Element;
     Portal: React.FC<import("@radix-ui/react-dropdown-menu").DropdownMenuPortalProps>;
     Separator: import("../..").StyledComponent<React.ForwardRefExoticComponent<import("@radix-ui/react-dropdown-menu").DropdownMenuSeparatorProps & React.RefAttributes<HTMLDivElement>>, unknown>;

package/dist/components/dropdown-menu/DropdownMenuLinkItem.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { DropdownMenuItem } from './DropdownMenuItem';
-export declare const DropdownMenuLinkItem: ({ children, href, target, rel, download, ...rest }: React.ComponentProps<typeof DropdownMenuItem> & Pick<React.ComponentPropsWithoutRef<'a'>, 'target' | 'rel' | 'download'> & {
+export declare const DropdownMenuLinkItem: ({ children, href, reloadDocument, target, rel, download, ...rest }: React.ComponentProps<typeof DropdownMenuItem> & Pick<React.ComponentPropsWithoutRef<'a'>, 'target' | 'rel' | 'download'> & {
     href: string;
+    reloadDocument?: boolean;
 }) => React.JSX.Element;

package/dist/components/dropdown-menu/DropdownMenuLinkItem.js

@@ -1,23 +1,28 @@
 import { styled } from "../../styled.js";
 import { getExternalAnchorProps } from "../../utilities/uri/index.js";
+import { useRouterLinkProps } from "../router-provider/RouterProvider.js";
 import { DropdownMenuItem } from "./DropdownMenuItem.js";
 import "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/dropdown-menu/DropdownMenuLinkItem.tsx
 var StyledLink = styled("a", { base: ["no-underline"] });
-var DropdownMenuLinkItem = ({ children, href, target, rel, download, ...rest }) => /* @__PURE__ */ jsx(DropdownMenuItem, {
-	...rest,
-	asChild: true,
-	children: /* @__PURE__ */ jsx(StyledLink, {
-		href,
-		target,
-		rel,
-		download,
-		role: "menuitem",
-		...getExternalAnchorProps(href),
-		children
-	})
-});
+var DropdownMenuLinkItem = ({ children, href, reloadDocument, target, rel, download, ...rest }) => {
+	const routerLinkProps = useRouterLinkProps(href, { reloadDocument });
+	return /* @__PURE__ */ jsx(DropdownMenuItem, {
+		...rest,
+		asChild: true,
+		children: /* @__PURE__ */ jsx(StyledLink, {
+			as: routerLinkProps.as,
+			href,
+			target,
+			rel,
+			download,
+			role: "menuitem",
+			...getExternalAnchorProps(href),
+			children
+		})
+	});
+};
 //#endregion
 export { DropdownMenuLinkItem };
 

package/dist/components/dropdown-menu/DropdownMenuLinkItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownMenuLinkItem.js","names":[],"sources":["../../../src/components/dropdown-menu/DropdownMenuLinkItem.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { getExternalAnchorProps } from '../../utilities/uri'\nimport { DropdownMenuItem } from './DropdownMenuItem'\n\nconst StyledLink = styled('a', {\n  base: ['no-underline']\n})\n\nexport const DropdownMenuLinkItem = ({\n  children,\n  href,\n  target,\n  rel,\n  download,\n  ...rest\n}: React.ComponentProps<typeof DropdownMenuItem> &\n  Pick<React.ComponentPropsWithoutRef<'a'>, 'target' | 'rel' | 'download'> & {\n    href: string\n  }) => (\n  // Anchor attributes belong on the rendered <a> (StyledLink); the remaining\n  // props are DropdownMenuItem's menu-item behaviour props, which it merges onto\n  // StyledLink via `asChild`. `getExternalAnchorProps` still wins for external\n  // hrefs (security rel/target).\n  <DropdownMenuItem {...rest} asChild>\n    <StyledLink\n      href={href}\n      target={target}\n      rel={rel}\n      download={download}\n      role=\"menuitem\"\n      {...getExternalAnchorProps(href)}\n    >\n      {children}\n    </StyledLink>\n  </DropdownMenuItem>\n)\n"],"mappings":";;;;;;AAMA,IAAM,aAAa,OAAO,KAAK,EAC7B,MAAM,CAAC,cAAc,EACvB,CAAC;AAED,IAAa,wBAAwB,EACnC,UACA,MACA,QACA,KACA,UACA,GAAG,WASH,oBAAC,kBAAD;CAAkB,GAAI;CAAM,SAAA;WAC1B,oBAAC,YAAD;EACQ;EACE;EACH;EACK;EACV,MAAK;EACL,GAAI,uBAAuB,IAAI;EAE9B;CACS,CAAA;AACI,CAAA"}
+{"version":3,"file":"DropdownMenuLinkItem.js","names":[],"sources":["../../../src/components/dropdown-menu/DropdownMenuLinkItem.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { getExternalAnchorProps } from '../../utilities/uri'\nimport { useRouterLinkProps } from '../router-provider/RouterProvider'\nimport { DropdownMenuItem } from './DropdownMenuItem'\n\nconst StyledLink = styled('a', {\n  base: ['no-underline']\n})\n\nexport const DropdownMenuLinkItem = ({\n  children,\n  href,\n  reloadDocument,\n  target,\n  rel,\n  download,\n  ...rest\n}: React.ComponentProps<typeof DropdownMenuItem> &\n  Pick<React.ComponentPropsWithoutRef<'a'>, 'target' | 'rel' | 'download'> & {\n    href: string\n    reloadDocument?: boolean\n  }) => {\n  const routerLinkProps = useRouterLinkProps(href, { reloadDocument })\n\n  return (\n    // Anchor attributes belong on the rendered <a> (StyledLink); the remaining\n    // props are DropdownMenuItem's menu-item behaviour props, which it merges onto\n    // StyledLink via `asChild`. `getExternalAnchorProps` still wins for external\n    // hrefs (security rel/target).\n    <DropdownMenuItem {...rest} asChild>\n      <StyledLink\n        as={routerLinkProps.as}\n        href={href}\n        target={target}\n        rel={rel}\n        download={download}\n        role=\"menuitem\"\n        {...getExternalAnchorProps(href)}\n      >\n        {children}\n      </StyledLink>\n    </DropdownMenuItem>\n  )\n}\n"],"mappings":";;;;;;;AAOA,IAAM,aAAa,OAAO,KAAK,EAC7B,MAAM,CAAC,cAAc,EACvB,CAAC;AAED,IAAa,wBAAwB,EACnC,UACA,MACA,gBACA,QACA,KACA,UACA,GAAG,WAKG;CACN,MAAM,kBAAkB,mBAAmB,MAAM,EAAE,eAAe,CAAC;CAEnE,OAKE,oBAAC,kBAAD;EAAkB,GAAI;EAAM,SAAA;YAC1B,oBAAC,YAAD;GACE,IAAI,gBAAgB;GACd;GACE;GACH;GACK;GACV,MAAK;GACL,GAAI,uBAAuB,IAAI;GAE9B;EACS,CAAA;CACI,CAAA;AAEtB"}

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

@@ -29,12 +29,12 @@ var FileDrop = ({ children, accept, multiple, onDrop, ...rest }) => {
 	const handleDrop = (fileList) => {
 		if (!fileList) return;
 		setIsDragging(false);
-		const files = Array.from(fileList);
+		const files = [...fileList];
 		onDrop(files);
 		setFiles(files);
 	};
 	const handleKeyDown = (event) => {
-		if (["Space", "Enter"].includes(event.key)) fileUploadInputRef.current?.click();
+		if ("Space" === event.key || "Enter" === event.key) fileUploadInputRef.current?.click();
 	};
 	const value = React$1.useMemo(() => ({
 		isDragging,

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

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

package/dist/components/form/useFieldError.js

@@ -1,9 +1,10 @@
 import { useFormContext } from "react-hook-form";
 import delve from "dlv";
 //#region src/components/form/useFieldError.ts
+var FIELD_PATH_SEPARATOR_RE = /[,[\].]+?/;
 var useFieldError = (fieldName) => {
 	const { errors } = useFormContext();
-	const fieldPath = fieldName.split(/[,[\].]+?/).filter(Boolean);
+	const fieldPath = fieldName.split(FIELD_PATH_SEPARATOR_RE).filter(Boolean);
 	const getErrors = () => delve(errors, fieldPath);
 	return { error: getErrors()?.message };
 };

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

@@ -1 +1 @@
-{"version":3,"file":"useFieldError.js","names":[],"sources":["../../../src/components/form/useFieldError.ts"],"sourcesContent":["import delve from 'dlv'\nimport { useFormContext } from 'react-hook-form'\n\nexport const useFieldError = (fieldName: string) => {\n  const { errors } = useFormContext()\n\n  // in case of migration to a newer version of react-hook-form the path needs to updated to account for dynamic fields naming convention\n  const fieldPath = fieldName.split(/[,[\\].]+?/).filter(Boolean)\n\n  const getErrors = () => delve(errors, fieldPath)\n\n  return {\n    error: getErrors()?.message\n  }\n}\n"],"mappings":";;;AAGA,IAAa,iBAAiB,cAAsB;CAClD,MAAM,EAAE,WAAW,eAAe;CAGlC,MAAM,YAAY,UAAU,MAAM,WAAW,CAAC,CAAC,OAAO,OAAO;CAE7D,MAAM,kBAAkB,MAAM,QAAQ,SAAS;CAE/C,OAAO,EACL,OAAO,UAAU,CAAC,EAAE,QACtB;AACF"}
+{"version":3,"file":"useFieldError.js","names":[],"sources":["../../../src/components/form/useFieldError.ts"],"sourcesContent":["import delve from 'dlv'\nimport { useFormContext } from 'react-hook-form'\n\n// Splits react-hook-form field paths on their `,` `[` `]` `.` separators.\nconst FIELD_PATH_SEPARATOR_RE = /[,[\\].]+?/\n\nexport const useFieldError = (fieldName: string) => {\n  const { errors } = useFormContext()\n\n  // in case of migration to a newer version of react-hook-form the path needs to updated to account for dynamic fields naming convention\n  const fieldPath = fieldName.split(FIELD_PATH_SEPARATOR_RE).filter(Boolean)\n\n  const getErrors = () => delve(errors, fieldPath)\n\n  return {\n    error: getErrors()?.message\n  }\n}\n"],"mappings":";;;AAIA,IAAM,0BAA0B;AAEhC,IAAa,iBAAiB,cAAsB;CAClD,MAAM,EAAE,WAAW,eAAe;CAGlC,MAAM,YAAY,UAAU,MAAM,uBAAuB,CAAC,CAAC,OAAO,OAAO;CAEzE,MAAM,kBAAkB,MAAM,QAAQ,SAAS;CAE/C,OAAO,EACL,OAAO,UAAU,CAAC,EAAE,QACtB;AACF"}

package/dist/components/index.d.ts

@@ -61,6 +61,7 @@ export { RadioButton } from './radio-button/RadioButton';
 export { RadioButtonGroup } from './radio-button/RadioButtonGroup';
 export { RadioButtonField } from './radio-button-field/RadioButtonField';
 export { RadioCard } from './radio-card/RadioCard';
+export { Router } from './router-provider/Router';
 export { RadioCardGroup } from './radio-card/RadioCardGroup';
 export { SearchField } from './search-field/SearchField';
 export { SearchInput } from './search-input/SearchInput';

package/dist/components/link/Link.d.ts

@@ -1,13 +1,13 @@
 import * as React from 'react';
 import { type PolymorphicComponent } from '../../styled';
-import type { NavigatorActions } from '../../types/navigatorActions.types';
 import type { Override } from '../../utilities/types';
 export declare const StyledLink: PolymorphicComponent<"a", {
     size?: ("lg" | "md" | "sm" | "xl" | "xs" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "lg" | "md" | "sm" | "xl" | "xs">>) | undefined;
     noCapsize?: (boolean | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", boolean>>) | undefined;
 }>;
-type LinkCustomProps = NavigatorActions & {
+type LinkCustomProps = {
     disabled?: boolean;
+    reloadDocument?: boolean;
 };
 type StyledLinkOwnProps = typeof StyledLink extends PolymorphicComponent<infer _Element extends React.ElementType, infer OwnProps> ? OwnProps : never;
 type LinkOwnProps = Override<StyledLinkOwnProps, LinkCustomProps>;

package/dist/components/link/Link.js

@@ -1,5 +1,6 @@
 import { styled } from "../../styled.js";
 import { getExternalAnchorProps } from "../../utilities/uri/index.js";
+import { useRouterLinkProps } from "../router-provider/RouterProvider.js";
 import "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/link/Link.tsx
@@ -54,15 +55,18 @@ var StyledLink = styled("a", {
 	},
 	defaultVariants: { size: "md" }
 }, { enableResponsiveVariants: true });
-var Link = (({ ref, as, disabled, href, ...rest }) => /* @__PURE__ */ jsx(StyledLink, {
-	as: as || (!href ? "button" : void 0),
-	noCapsize: !href ? true : void 0,
-	href,
-	...disabled && { disabled: true },
-	...rest,
-	...getExternalAnchorProps(href),
-	ref
-}));
+var Link = (({ ref, as, disabled, href, reloadDocument, ...rest }) => {
+	const routerLinkProps = useRouterLinkProps(href, { reloadDocument });
+	return /* @__PURE__ */ jsx(StyledLink, {
+		as: as || routerLinkProps.as || (!href ? "button" : void 0),
+		noCapsize: !href ? true : void 0,
+		href,
+		...disabled && { disabled: true },
+		...rest,
+		...getExternalAnchorProps(href),
+		ref
+	});
+});
 //#endregion
 export { Link, StyledLink };
 

package/dist/components/link/Link.js.map

@@ -1 +1 @@
-{"version":3,"file":"Link.js","names":[],"sources":["../../../src/components/link/Link.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { type PolymorphicComponent, styled } from '../../styled'\nimport type { NavigatorActions } from '../../types/navigatorActions.types'\nimport type { Override } from '../../utilities/types'\nimport { getExternalAnchorProps } from '../../utilities/uri'\n\nexport const StyledLink = styled(\n  'a',\n  {\n    base: [\n      'bg-[unset]',\n      'text-primary-800',\n      'cursor-pointer',\n      'font-body',\n      'no-underline',\n      'focus:text-primary-900',\n      'focus:underline',\n      'hover:text-primary-900',\n      'hover:underline',\n      'active:text-primary-1000',\n      'disabled:cursor-not-allowed',\n      'disabled:opacity-30',\n      'disabled:pointer-events-none',\n      '[p>&,h1>&,h2>&,h3>&,h4>&,li>&,em>&]:after:content-none',\n      '[p>&,h1>&,h2>&,h3>&,h4>&,li>&,em>&]:before:content-none',\n      '[p>&,h1>&,h2>&,h3>&,h4>&,li>&,em>&]:text-[100%]/none'\n    ],\n    variants: {\n      size: {\n        xs: ['text-xs', 'leading-[1.6]', 'capsize-[0.4364]'],\n        sm: ['text-sm', 'leading-[1.53]', 'capsize-[0.4056]'],\n        md: ['text-md', 'leading-normal', 'capsize-[0.3864]'],\n        lg: ['text-lg', 'leading-[1.52]', 'capsize-[0.3983]'],\n        xl: ['text-xl', 'leading-[1.42]', 'capsize-[0.3506]']\n      },\n      noCapsize: {\n        true: ['capsize-none']\n      }\n    },\n    defaultVariants: {\n      size: 'md'\n    }\n  },\n  { enableResponsiveVariants: true }\n)\n\ntype LinkCustomProps = NavigatorActions & { disabled?: boolean }\n\ntype LinkProps = Override<\n  React.ComponentProps<typeof StyledLink>,\n  LinkCustomProps & { as?: React.ElementType }\n>\n\n// Re-expose StyledLink's variant props merged with our own, so the public\n// polymorphic type re-checks props against whatever `as` target is passed\ntype StyledLinkOwnProps =\n  typeof StyledLink extends PolymorphicComponent<\n    infer _Element extends React.ElementType,\n    infer OwnProps\n  >\n    ? OwnProps\n    : never\n\ntype LinkOwnProps = Override<StyledLinkOwnProps, LinkCustomProps>\n\nexport const Link = (({ ref, as, disabled, href, ...rest }: LinkProps) => (\n  <StyledLink\n    as={as || (!href ? 'button' : undefined)}\n    noCapsize={!href ? true : undefined}\n    href={href}\n    {...(disabled && { disabled: true })}\n    {...rest}\n    {...getExternalAnchorProps(href)}\n    ref={ref}\n  />\n)) as PolymorphicComponent<'a', LinkOwnProps>\n"],"mappings":";;;;;AAOA,IAAa,aAAa,OACxB,KACA;CACE,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU;EACR,MAAM;GACJ,IAAI;IAAC;IAAW;IAAiB;GAAkB;GACnD,IAAI;IAAC;IAAW;IAAkB;GAAkB;GACpD,IAAI;IAAC;IAAW;IAAkB;GAAkB;GACpD,IAAI;IAAC;IAAW;IAAkB;GAAkB;GACpD,IAAI;IAAC;IAAW;IAAkB;GAAkB;EACtD;EACA,WAAW,EACT,MAAM,CAAC,cAAc,EACvB;CACF;CACA,iBAAiB,EACf,MAAM,KACR;AACF,GACA,EAAE,0BAA0B,KAAK,CACnC;AAqBA,IAAa,SAAS,EAAE,KAAK,IAAI,UAAU,MAAM,GAAG,WAClD,oBAAC,YAAD;CACE,IAAI,OAAO,CAAC,OAAO,WAAW,KAAA;CAC9B,WAAW,CAAC,OAAO,OAAO,KAAA;CACpB;CACN,GAAK,YAAY,EAAE,UAAU,KAAK;CAClC,GAAI;CACJ,GAAI,uBAAuB,IAAI;CAC1B;AACN,CAAA"}
+{"version":3,"file":"Link.js","names":[],"sources":["../../../src/components/link/Link.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { type PolymorphicComponent, styled } from '../../styled'\nimport type { Override } from '../../utilities/types'\nimport { getExternalAnchorProps } from '../../utilities/uri'\nimport { useRouterLinkProps } from '../router-provider/RouterProvider'\n\nexport const StyledLink = styled(\n  'a',\n  {\n    base: [\n      'bg-[unset]',\n      'text-primary-800',\n      'cursor-pointer',\n      'font-body',\n      'no-underline',\n      'focus:text-primary-900',\n      'focus:underline',\n      'hover:text-primary-900',\n      'hover:underline',\n      'active:text-primary-1000',\n      'disabled:cursor-not-allowed',\n      'disabled:opacity-30',\n      'disabled:pointer-events-none',\n      '[p>&,h1>&,h2>&,h3>&,h4>&,li>&,em>&]:after:content-none',\n      '[p>&,h1>&,h2>&,h3>&,h4>&,li>&,em>&]:before:content-none',\n      '[p>&,h1>&,h2>&,h3>&,h4>&,li>&,em>&]:text-[100%]/none'\n    ],\n    variants: {\n      size: {\n        xs: ['text-xs', 'leading-[1.6]', 'capsize-[0.4364]'],\n        sm: ['text-sm', 'leading-[1.53]', 'capsize-[0.4056]'],\n        md: ['text-md', 'leading-normal', 'capsize-[0.3864]'],\n        lg: ['text-lg', 'leading-[1.52]', 'capsize-[0.3983]'],\n        xl: ['text-xl', 'leading-[1.42]', 'capsize-[0.3506]']\n      },\n      noCapsize: {\n        true: ['capsize-none']\n      }\n    },\n    defaultVariants: {\n      size: 'md'\n    }\n  },\n  { enableResponsiveVariants: true }\n)\n\ntype LinkCustomProps = {\n  disabled?: boolean\n  reloadDocument?: boolean\n}\n\ntype LinkProps = Override<\n  React.ComponentProps<typeof StyledLink>,\n  LinkCustomProps & { as?: React.ElementType }\n>\n\n// Re-expose StyledLink's variant props merged with our own, so the public\n// polymorphic type re-checks props against whatever `as` target is passed\ntype StyledLinkOwnProps =\n  typeof StyledLink extends PolymorphicComponent<\n    infer _Element extends React.ElementType,\n    infer OwnProps\n  >\n    ? OwnProps\n    : never\n\ntype LinkOwnProps = Override<StyledLinkOwnProps, LinkCustomProps>\n\nexport const Link = (({\n  ref,\n  as,\n  disabled,\n  href,\n  reloadDocument,\n  ...rest\n}: LinkProps) => {\n  const routerLinkProps = useRouterLinkProps(href, { reloadDocument })\n\n  return (\n    <StyledLink\n      as={as || routerLinkProps.as || (!href ? 'button' : undefined)}\n      noCapsize={!href ? true : undefined}\n      href={href}\n      {...(disabled && { disabled: true })}\n      {...rest}\n      {...getExternalAnchorProps(href)}\n      ref={ref}\n    />\n  )\n}) as PolymorphicComponent<'a', LinkOwnProps>\n"],"mappings":";;;;;;AAOA,IAAa,aAAa,OACxB,KACA;CACE,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU;EACR,MAAM;GACJ,IAAI;IAAC;IAAW;IAAiB;GAAkB;GACnD,IAAI;IAAC;IAAW;IAAkB;GAAkB;GACpD,IAAI;IAAC;IAAW;IAAkB;GAAkB;GACpD,IAAI;IAAC;IAAW;IAAkB;GAAkB;GACpD,IAAI;IAAC;IAAW;IAAkB;GAAkB;EACtD;EACA,WAAW,EACT,MAAM,CAAC,cAAc,EACvB;CACF;CACA,iBAAiB,EACf,MAAM,KACR;AACF,GACA,EAAE,0BAA0B,KAAK,CACnC;AAwBA,IAAa,SAAS,EACpB,KACA,IACA,UACA,MACA,gBACA,GAAG,WACY;CACf,MAAM,kBAAkB,mBAAmB,MAAM,EAAE,eAAe,CAAC;CAEnE,OACE,oBAAC,YAAD;EACE,IAAI,MAAM,gBAAgB,OAAO,CAAC,OAAO,WAAW,KAAA;EACpD,WAAW,CAAC,OAAO,OAAO,KAAA;EACpB;EACN,GAAK,YAAY,EAAE,UAAU,KAAK;EAClC,GAAI;EACJ,GAAI,uBAAuB,IAAI;EAC1B;CACN,CAAA;AAEL"}

package/dist/components/navigation/NavigationMenu.d.ts

@@ -6,13 +6,14 @@ export declare const NavigationMenu: {
     ({ children, className, ...rest }: React.ComponentProps<typeof StyledMenu>): React.JSX.Element;
     displayName: string;
 } & {
-    Link: ({ ref, children, href, disabled, className, variant, ...rest }: Omit<React.ComponentProps<import("../..").PolymorphicComponent<React.ForwardRefExoticComponent<NavigationMenuPrimitive.NavigationMenuLinkProps & React.RefAttributes<HTMLAnchorElement>>, {
+    Link: ({ ref, children, href, disabled, className, variant, reloadDocument, ...rest }: Omit<React.ComponentProps<import("../..").PolymorphicComponent<React.ForwardRefExoticComponent<NavigationMenuPrimitive.NavigationMenuLinkProps & React.RefAttributes<HTMLAnchorElement>>, {
         elementType?: "dropdownItem" | "link" | undefined;
     }>>, 'elementType'> & {
         disabled?: boolean;
         variant?: React.ComponentProps<import("../..").PolymorphicComponent<React.ForwardRefExoticComponent<NavigationMenuPrimitive.NavigationMenuLinkProps & React.RefAttributes<HTMLAnchorElement>>, {
             elementType?: "dropdownItem" | "link" | undefined;
         }>>['elementType'];
+        reloadDocument?: boolean;
         ref?: React.Ref<HTMLAnchorElement>;
     }) => React.JSX.Element;
     Dropdown: {

package/dist/components/navigation/NavigationMenu.js

@@ -41,7 +41,7 @@ var NavigationMenuComponent = ({ children, className, ...rest }) => {
 	}, [React$1.Children.toArray(children).length]);
 	React$1.useEffect(() => {
 		let timer;
-		if (activeItem === "") timer = setTimeout(() => setOffset(null), 200);
+		if (activeItem === "") timer = setTimeout(setOffset, 200, null);
 		return () => {
 			if (timer !== null) clearTimeout(timer);
 		};

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 * as React from 'react'\n\nimport { styled, cn } from '../../styled'\nimport { colorSchemes as navigationMenuColorSchemes } from './NavigationMenu.colorscheme.config'\nimport { NavigationMenuContext } from './NavigationMenu.context'\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  ...rest\n}: React.ComponentProps<typeof StyledMenu>) => {\n  const [offset, setOffset] = React.useState<number | null | undefined>()\n  const [activeItem, setActiveItem] = React.useState<string | undefined>()\n  const listRef = React.useRef<HTMLUListElement>(null)\n  const listWidthRef = React.useRef(0)\n\n  // Cache the resting list width. It must be measured while the menu is closed:\n  // as a dropdown opens, its content is briefly laid out inline in the trigger\n  // row, so a width read during the open transition is inflated. Held in a ref\n  // (not state) since it only feeds the imperative offset calc below and never\n  // renders. Re-measured when the item count changes; stale on resize.\n  React.useLayoutEffect(() => {\n    if (listRef.current) {\n      listWidthRef.current = 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  // Radix has no built-in way to align the viewport with the active trigger, so\n  // the offset is computed here. https://github.com/radix-ui/primitives/issues/1462\n  const onNodeUpdate = React.useCallback(\n    (trigger: HTMLButtonElement, itemValue: string) => {\n      const listWidth = listWidthRef.current\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    [activeItem]\n  )\n\n  const contextValue = React.useMemo(() => ({ onNodeUpdate }), [onNodeUpdate])\n\n  return (\n    <NavigationMenuContext value={contextValue}>\n      <StyledMenu\n        className={cn(className)}\n        style={navigationMenuColorSchemes['light']}\n        onValueChange={setActiveItem}\n        {...rest}\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>\n  )\n}\n\nexport const NavigationMenu = /* @__PURE__ */ Object.assign(\n  NavigationMenuComponent,\n  {\n    Link: NavigationMenuLink,\n    Dropdown: NavigationMenuDropdown,\n    DropdownContent: NavigationMenuDropdownContent,\n    DropdownItem: NavigationMenuDropdownItem,\n    DropdownItemTitle: NavigationMenuDropdownItemTitle,\n    DropdownTrigger: NavigationMenuDropdownTrigger\n  }\n)\n\nNavigationMenuComponent.displayName = 'NavigationMenu'\n"],"mappings":";;;;;;;;;;;;AAeA,IAAM,aAAa,OAAO,wBAAwB,MAAM,EACtD,MAAM;CAAC;CAAQ;CAAkB;AAAU,EAC7C,CAAC;AAED,IAAM,aAAa,OAAO,wBAAwB,MAAM,EACtD,MAAM;CAAC;CAAQ;CAAkB;CAAgB;CAAS;AAAW,EACvE,CAAC;AAED,IAAM,iBAAiB,OAAO,wBAAwB,UAAU,EAC9D,MAAM,CAAC,cAAc,EACvB,CAAC;AAED,IAAM,mBAAmB,OAAO,OAAO,EACrC,MAAM;CAAC;CAAY;CAAU;CAAY;CAAU;CAAQ;AAAgB,EAC7E,CAAC;AAED,IAAM,2BAA2B,EAC/B,UACA,WACA,GAAG,WAC0C;CAC7C,MAAM,CAAC,QAAQ,aAAa,QAAM,SAAoC;CACtE,MAAM,CAAC,YAAY,iBAAiB,QAAM,SAA6B;CACvE,MAAM,UAAU,QAAM,OAAyB,IAAI;CACnD,MAAM,eAAe,QAAM,OAAO,CAAC;CAOnC,QAAM,sBAAsB;EAC1B,IAAI,QAAQ,SACV,aAAa,UAAU,QAAQ,QAAQ;CAE3C,GAAG,CAAC,QAAM,SAAS,QAAQ,QAAQ,CAAC,CAAC,MAAM,CAAC;CAE5C,QAAM,gBAAgB;EACpB,IAAI;EAIJ,IAAI,eAAe,IACjB,QAAQ,iBAAiB,UAAU,IAAI,GAAG,GAAG;EAG/C,aAAa;GACX,IAAI,UAAU,MACZ,aAAa,KAAK;EAEtB;CACF,GAAG,CAAC,UAAU,CAAC;CAIf,MAAM,eAAe,QAAM,aACxB,SAA4B,cAAsB;EACjD,MAAM,YAAY,aAAa;EAC/B,IAAI,WAAW,aAAa,eAAe,WAAW;GACpD,MAAM,aAAa,YAAY;GAE/B,MAAM,qBACJ,YACA,QAAQ,aACR,QAAQ,cACR,QAAQ,cAAc;GAExB,UAAU,KAAK,MAAM,aAAa,kBAAkB,CAAC;EACvD;EAEA,OAAO;CACT,GACA,CAAC,UAAU,CACb;CAIA,OACE,oBAAC,uBAAD;EAAuB,OAHJ,QAAM,eAAe,EAAE,aAAa,IAAI,CAAC,YAAY,CAG1C;YAC5B,qBAAC,YAAD;GACE,WAAW,GAAG,SAAS;GACvB,OAAO,aAA2B;GAClC,eAAe;GACf,GAAI;aAJN,CAME,oBAAC,YAAD;IAAY,KAAK;IAAU;GAAqB,CAAA,GAChD,oBAAC,kBAAD,EAAA,UACE,oBAAC,gBAAD;IACE,OAAO,EAAE,qCAAqC,GAAG,UAAU,EAAE,IAAI;IACjE,WAAW,GAAG;KACZ;KACA;KACA;IACF,CAAC;GACF,CAAA,EACe,CAAA,CACR;;CACS,CAAA;AAE3B;AAEA,IAAa,iBAAiC,uBAAO,OACnD,yBACA;CACE,MAAM;CACN,UAAU;CACV,iBAAiB;CACjB,cAAc;CACd,mBAAmB;CACnB,iBAAiB;AACnB,CACF;AAEA,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 * as React from 'react'\n\nimport { styled, cn } from '../../styled'\nimport { colorSchemes as navigationMenuColorSchemes } from './NavigationMenu.colorscheme.config'\nimport { NavigationMenuContext } from './NavigationMenu.context'\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  ...rest\n}: React.ComponentProps<typeof StyledMenu>) => {\n  const [offset, setOffset] = React.useState<number | null | undefined>()\n  const [activeItem, setActiveItem] = React.useState<string | undefined>()\n  const listRef = React.useRef<HTMLUListElement>(null)\n  const listWidthRef = React.useRef(0)\n\n  // Cache the resting list width. It must be measured while the menu is closed:\n  // as a dropdown opens, its content is briefly laid out inline in the trigger\n  // row, so a width read during the open transition is inflated. Held in a ref\n  // (not state) since it only feeds the imperative offset calc below and never\n  // renders. Re-measured when the item count changes; stale on resize.\n  React.useLayoutEffect(() => {\n    if (listRef.current) {\n      listWidthRef.current = 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, 200, null)\n    }\n\n    return () => {\n      if (timer !== null) {\n        clearTimeout(timer)\n      }\n    }\n  }, [activeItem])\n\n  // Radix has no built-in way to align the viewport with the active trigger, so\n  // the offset is computed here. https://github.com/radix-ui/primitives/issues/1462\n  const onNodeUpdate = React.useCallback(\n    (trigger: HTMLButtonElement, itemValue: string) => {\n      const listWidth = listWidthRef.current\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    [activeItem]\n  )\n\n  const contextValue = React.useMemo(() => ({ onNodeUpdate }), [onNodeUpdate])\n\n  return (\n    <NavigationMenuContext value={contextValue}>\n      <StyledMenu\n        className={cn(className)}\n        style={navigationMenuColorSchemes['light']}\n        onValueChange={setActiveItem}\n        {...rest}\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>\n  )\n}\n\nexport const NavigationMenu = /* @__PURE__ */ Object.assign(\n  NavigationMenuComponent,\n  {\n    Link: NavigationMenuLink,\n    Dropdown: NavigationMenuDropdown,\n    DropdownContent: NavigationMenuDropdownContent,\n    DropdownItem: NavigationMenuDropdownItem,\n    DropdownItemTitle: NavigationMenuDropdownItemTitle,\n    DropdownTrigger: NavigationMenuDropdownTrigger\n  }\n)\n\nNavigationMenuComponent.displayName = 'NavigationMenu'\n"],"mappings":";;;;;;;;;;;;AAeA,IAAM,aAAa,OAAO,wBAAwB,MAAM,EACtD,MAAM;CAAC;CAAQ;CAAkB;AAAU,EAC7C,CAAC;AAED,IAAM,aAAa,OAAO,wBAAwB,MAAM,EACtD,MAAM;CAAC;CAAQ;CAAkB;CAAgB;CAAS;AAAW,EACvE,CAAC;AAED,IAAM,iBAAiB,OAAO,wBAAwB,UAAU,EAC9D,MAAM,CAAC,cAAc,EACvB,CAAC;AAED,IAAM,mBAAmB,OAAO,OAAO,EACrC,MAAM;CAAC;CAAY;CAAU;CAAY;CAAU;CAAQ;AAAgB,EAC7E,CAAC;AAED,IAAM,2BAA2B,EAC/B,UACA,WACA,GAAG,WAC0C;CAC7C,MAAM,CAAC,QAAQ,aAAa,QAAM,SAAoC;CACtE,MAAM,CAAC,YAAY,iBAAiB,QAAM,SAA6B;CACvE,MAAM,UAAU,QAAM,OAAyB,IAAI;CACnD,MAAM,eAAe,QAAM,OAAO,CAAC;CAOnC,QAAM,sBAAsB;EAC1B,IAAI,QAAQ,SACV,aAAa,UAAU,QAAQ,QAAQ;CAE3C,GAAG,CAAC,QAAM,SAAS,QAAQ,QAAQ,CAAC,CAAC,MAAM,CAAC;CAE5C,QAAM,gBAAgB;EACpB,IAAI;EAIJ,IAAI,eAAe,IACjB,QAAQ,WAAW,WAAW,KAAK,IAAI;EAGzC,aAAa;GACX,IAAI,UAAU,MACZ,aAAa,KAAK;EAEtB;CACF,GAAG,CAAC,UAAU,CAAC;CAIf,MAAM,eAAe,QAAM,aACxB,SAA4B,cAAsB;EACjD,MAAM,YAAY,aAAa;EAC/B,IAAI,WAAW,aAAa,eAAe,WAAW;GACpD,MAAM,aAAa,YAAY;GAE/B,MAAM,qBACJ,YACA,QAAQ,aACR,QAAQ,cACR,QAAQ,cAAc;GAExB,UAAU,KAAK,MAAM,aAAa,kBAAkB,CAAC;EACvD;EAEA,OAAO;CACT,GACA,CAAC,UAAU,CACb;CAIA,OACE,oBAAC,uBAAD;EAAuB,OAHJ,QAAM,eAAe,EAAE,aAAa,IAAI,CAAC,YAAY,CAG1C;YAC5B,qBAAC,YAAD;GACE,WAAW,GAAG,SAAS;GACvB,OAAO,aAA2B;GAClC,eAAe;GACf,GAAI;aAJN,CAME,oBAAC,YAAD;IAAY,KAAK;IAAU;GAAqB,CAAA,GAChD,oBAAC,kBAAD,EAAA,UACE,oBAAC,gBAAD;IACE,OAAO,EAAE,qCAAqC,GAAG,UAAU,EAAE,IAAI;IACjE,WAAW,GAAG;KACZ;KACA;KACA;IACF,CAAC;GACF,CAAA,EACe,CAAA,CACR;;CACS,CAAA;AAE3B;AAEA,IAAa,iBAAiC,uBAAO,OACnD,yBACA;CACE,MAAM;CACN,UAAU;CACV,iBAAiB;CACjB,cAAc;CACd,mBAAmB;CACnB,iBAAiB;AACnB,CACF;AAEA,wBAAwB,cAAc"}

package/dist/components/navigation/NavigationMenuLink.d.ts

@@ -3,9 +3,10 @@ import * as React from 'react';
 declare const StyledLink: import("../..").PolymorphicComponent<React.ForwardRefExoticComponent<NavigationMenuPrimitive.NavigationMenuLinkProps & React.RefAttributes<HTMLAnchorElement>>, {
     elementType?: "dropdownItem" | "link" | undefined;
 }>;
-export declare const NavigationMenuLink: ({ ref, children, href, disabled, className, variant, ...rest }: Omit<React.ComponentProps<typeof StyledLink>, 'elementType'> & {
+export declare const NavigationMenuLink: ({ ref, children, href, disabled, className, variant, reloadDocument, ...rest }: Omit<React.ComponentProps<typeof StyledLink>, 'elementType'> & {
     disabled?: boolean;
     variant?: React.ComponentProps<typeof StyledLink>['elementType'];
+    reloadDocument?: boolean;
     ref?: React.Ref<HTMLAnchorElement>;
 }) => React.JSX.Element;
 export {};

package/dist/components/navigation/NavigationMenuLink.js

@@ -1,5 +1,6 @@
 import { styled } from "../../styled.js";
 import { getExternalAnchorProps } from "../../utilities/uri/index.js";
+import { useRouterLinkProps } from "../router-provider/RouterProvider.js";
 import { navigationMenuBaseItemStyles } from "./NavigationMenu.styles.js";
 import "react";
 import { jsx } from "react/jsx-runtime";
@@ -47,19 +48,33 @@ var StyledLink = styled(NavigationMenuPrimitive.Link, {
 		]
 	} }
 });
-var NavigationMenuLink = ({ ref, children, href, disabled, className, variant = "link", ...rest }) => /* @__PURE__ */ jsx(ListItem, { children: disabled ? /* @__PURE__ */ jsx(DisabledButton, {
-	disabled: true,
-	className,
-	children
-}) : /* @__PURE__ */ jsx(StyledLink, {
-	href,
-	ref,
-	elementType: variant,
-	className,
-	...getExternalAnchorProps(href),
-	...rest,
-	children
-}) });
+var NavigationMenuLink = ({ ref, children, href, disabled, className, variant = "link", reloadDocument, ...rest }) => {
+	const RouterLink = useRouterLinkProps(href, { reloadDocument }).as;
+	return /* @__PURE__ */ jsx(ListItem, { children: disabled ? /* @__PURE__ */ jsx(DisabledButton, {
+		disabled: true,
+		className,
+		children
+	}) : RouterLink ? /* @__PURE__ */ jsx(StyledLink, {
+		href,
+		ref,
+		elementType: variant,
+		className,
+		asChild: true,
+		...rest,
+		children: /* @__PURE__ */ jsx(RouterLink, {
+			href,
+			children
+		})
+	}) : /* @__PURE__ */ jsx(StyledLink, {
+		href,
+		ref,
+		elementType: variant,
+		className,
+		...getExternalAnchorProps(href),
+		...rest,
+		children
+	}) });
+};
 //#endregion
 export { NavigationMenuLink };