@atom-learning/components 7.0.0 → 8.0.1

package/dist/components/chip-toggle-group/ChipToggleGroupRoot.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChipToggleGroupRoot.js","names":[],"sources":["../../../src/components/chip-toggle-group/ChipToggleGroupRoot.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { ChipGroup } from '~/components/chip/ChipGroup'\nimport { ToggleGroup } from '~/utilities/radix-overrides/toggle-group'\n\ntype TChipToggleGroupRootProps = React.ComponentProps<typeof ChipGroup> &\n  React.ComponentProps<typeof ToggleGroup.Root>\n\nexport const ChipToggleGroupRoot = React.forwardRef<\n  HTMLDivElement,\n  TChipToggleGroupRootProps\n>((props, ref) => {\n  return (\n    <ChipGroup\n      ref={ref}\n      as={ToggleGroup.Root}\n      orientation=\"horizontal\"\n      {...props}\n    />\n  )\n})\n"],"mappings":";;;;AAQA,IAAa,sBAAsB,QAAM,YAGtC,OAAO,QAAQ;AAChB,QACE,wBAAA,cAAC,WAAD;EACO;EACL,IAAI,YAAY;EAChB,aAAY;EACZ,GAAI;EACJ,CAAA;EAEJ"}
+{"version":3,"file":"ChipToggleGroupRoot.js","names":[],"sources":["../../../src/components/chip-toggle-group/ChipToggleGroupRoot.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { ChipGroup } from '~/components/chip/ChipGroup'\nimport { ToggleGroup } from '~/utilities/radix-overrides/toggle-group'\n\ntype TChipToggleGroupRootProps = React.ComponentProps<typeof ChipGroup> &\n  React.ComponentProps<typeof ToggleGroup.Root>\n\nexport const ChipToggleGroupRoot = React.forwardRef<\n  HTMLDivElement,\n  TChipToggleGroupRootProps\n>((props, ref) => {\n  return (\n    <ChipGroup\n      ref={ref}\n      as={ToggleGroup.Root}\n      orientation=\"horizontal\"\n      {...props}\n    />\n  )\n})\n"],"mappings":";;;;;AAQA,IAAa,sBAAsB,QAAM,YAGtC,OAAO,QAAQ;AAChB,QACE,oBAAC,WAAD;EACO;EACL,IAAI,YAAY;EAChB,aAAY;EACZ,GAAI;EACJ,CAAA;EAEJ"}

package/dist/components/combobox/Combobox.d.ts

@@ -1,16 +1,12 @@
 import { ComboboxOptionText } from '@reach/combobox';
 export declare const Combobox: import("@reach/utils/polymorphic").ForwardRefComponent<"div", import("@reach/combobox").ComboboxProps> & {
     displayName: string;
-    Option: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & {
-        ref?: ((instance: HTMLLIElement | null) => void) | import("react").RefObject<HTMLLIElement> | null | undefined;
-    }, "as" | keyof import("@reach/combobox").ComboboxOptionProps> & import("@reach/combobox").ComboboxOptionProps & {
+    Option: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "as" | keyof import("@reach/combobox").ComboboxOptionProps> & import("@reach/combobox").ComboboxOptionProps & {
         as?: "li" | undefined;
     }, never> & {
         as?: import("react").ElementType;
     }>;
-    Input: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & {
-        ref?: ((instance: HTMLInputElement | null) => void) | import("react").RefObject<HTMLInputElement> | null | undefined;
-    }, "as" | keyof import("@reach/combobox").ComboboxInputProps> & import("@reach/combobox").ComboboxInputProps & {
+    Input: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "as" | keyof import("@reach/combobox").ComboboxInputProps> & import("@reach/combobox").ComboboxInputProps & {
         as?: "input" | undefined;
     }, "appearance" | "size" | "theme" | "state"> & {
         size?: "sm" | "md" | "lg" | undefined;
@@ -20,16 +16,12 @@ export declare const Combobox: import("@reach/utils/polymorphic").ForwardRefComp
     } & {
         as?: import("react").ElementType;
     }, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
-    Popover: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-    }, "as" | keyof import("@reach/popover").PopoverProps | "portal"> & import("@reach/combobox").ComboboxPopoverProps & Partial<import("@reach/popover").PopoverProps> & {
+    Popover: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "as" | keyof import("@reach/popover").PopoverProps | "portal"> & import("@reach/combobox").ComboboxPopoverProps & Partial<import("@reach/popover").PopoverProps> & {
         as?: "div" | undefined;
     }, never> & {
         as?: import("react").ElementType;
     }>;
-    List: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & {
-        ref?: ((instance: HTMLUListElement | null) => void) | import("react").RefObject<HTMLUListElement> | null | undefined;
-    }, "as" | "persistSelection"> & import("@reach/combobox").ComboboxListProps & {
+    List: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "as" | "persistSelection"> & import("@reach/combobox").ComboboxListProps & {
         as?: "ul" | undefined;
     }, never> & {
         as?: import("react").ElementType;

package/dist/components/combobox/ComboboxInput.d.ts

@@ -1,7 +1,5 @@
 import * as React from 'react';
-export declare const StyledComboboxInput: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & {
-    ref?: ((instance: HTMLInputElement | null) => void) | React.RefObject<HTMLInputElement> | null | undefined;
-}, "as" | keyof import("@reach/combobox").ComboboxInputProps> & import("@reach/combobox").ComboboxInputProps & {
+export declare const StyledComboboxInput: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "as" | keyof import("@reach/combobox").ComboboxInputProps> & import("@reach/combobox").ComboboxInputProps & {
     as?: "input" | undefined;
 }, "appearance" | "size" | "theme" | "state"> & {
     size?: "sm" | "md" | "lg" | undefined;
@@ -12,9 +10,7 @@ export declare const StyledComboboxInput: React.ForwardRefExoticComponent<Omit<O
     as?: React.ElementType;
 }>;
 export type ComboboxInputProps = React.ComponentProps<typeof StyledComboboxInput>;
-export declare const ComboboxInput: React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & {
-    ref?: ((instance: HTMLInputElement | null) => void) | React.RefObject<HTMLInputElement> | null | undefined;
-}, "as" | keyof import("@reach/combobox").ComboboxInputProps> & import("@reach/combobox").ComboboxInputProps & {
+export declare const ComboboxInput: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "as" | keyof import("@reach/combobox").ComboboxInputProps> & import("@reach/combobox").ComboboxInputProps & {
     as?: "input" | undefined;
 }, "appearance" | "size" | "theme" | "state"> & {
     size?: "sm" | "md" | "lg" | undefined;

package/dist/components/combobox/ComboboxInput.js

@@ -1,5 +1,6 @@
 import { styled } from "../../styled.js";
 import * as React$1 from "react";
+import { jsx } from "react/jsx-runtime";
 import { ComboboxInput } from "@reach/combobox";
 //#region src/components/combobox/ComboboxInput.tsx
 var StyledComboboxInput = styled(ComboboxInput, {
@@ -94,7 +95,7 @@ var StyledComboboxInput = styled(ComboboxInput, {
 		}
 	]
 });
-var ComboboxInput$1 = React$1.forwardRef(({ size = "md", appearance = "standard", ...rest }, ref) => /* @__PURE__ */ React$1.createElement(StyledComboboxInput, {
+var ComboboxInput$1 = React$1.forwardRef(({ size = "md", appearance = "standard", ...rest }, ref) => /* @__PURE__ */ jsx(StyledComboboxInput, {
 	size,
 	appearance,
 	...rest,

package/dist/components/combobox/ComboboxInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComboboxInput.js","names":[],"sources":["../../../src/components/combobox/ComboboxInput.tsx"],"sourcesContent":["import { ComboboxInput as BaseComboboxInput } from '@reach/combobox'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nexport const StyledComboboxInput = styled(BaseComboboxInput, {\n  base: [\n    'bg-(image:--bg-chevron)',\n    'bg-position-[right_--spacing(3)_top_50%,0_0]',\n    '[background-repeat:no-repeat,repeat-x]',\n    'bg-size-[--spacing(5)_auto,100%]',\n    'shadow-none',\n    'appearance-none',\n    'rounded-md',\n    'box-border',\n    'text-grey-1000',\n    'cursor-text',\n    'block',\n    'font-body',\n    'h-10',\n    'pl-3',\n    'pr-10',\n    'transition-all',\n    'duration-100',\n    'ease-out',\n    'w-full',\n    'placeholder:opacity-100',\n    'placeholder:text-grey-700',\n    'disabled:bg-grey-200',\n    'disabled:cursor-not-allowed',\n    'disabled:text-grey-800'\n  ],\n\n  variants: {\n    size: {\n      sm: ['h-8', 'text-sm', 'leading-[1.7]'],\n      md: ['h-10', 'text-md', 'leading-loose'],\n      lg: ['h-12', 'text-md', 'leading-loose']\n    },\n    appearance: {\n      standard: [\n        'bg-white',\n        'border',\n        'border-grey-700',\n        'focus-within:border-primary-800',\n        'focus-within:outline-none'\n      ],\n      modern: [\n        'bg-grey-100',\n        'border-none',\n        'focus-within:outline-2',\n        'focus-within:outline-blue-800',\n        'focus-within:outline-offset-1',\n        'focus-within:outline-solid',\n        'focus-within:z-1'\n      ]\n    },\n    theme: {\n      white: [],\n      grey: []\n    },\n    state: {\n      error: []\n    }\n  },\n  compoundVariants: [\n    {\n      state: 'error',\n      appearance: 'standard',\n      class: ['border', 'border-danger']\n    },\n    {\n      state: 'error',\n      appearance: 'modern',\n      class: ['bg-danger-light', 'focus-within:outline-danger']\n    },\n    {\n      appearance: 'modern',\n      theme: 'white',\n      class: ['bg-white']\n    },\n    {\n      appearance: 'modern',\n      theme: 'grey',\n      class: ['bg-grey-100']\n    }\n  ]\n})\n\nexport type ComboboxInputProps = React.ComponentProps<\n  typeof StyledComboboxInput\n>\n\nexport const ComboboxInput = React.forwardRef<\n  HTMLInputElement,\n  ComboboxInputProps\n>(({ size = 'md', appearance = 'standard', ...rest }, ref) => (\n  <StyledComboboxInput\n    size={size}\n    appearance={appearance}\n    {...rest}\n    ref={ref}\n  />\n))\n"],"mappings":";;;;AAKA,IAAa,sBAAsB,OAAO,eAAmB;CAC3D,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CAED,UAAU;EACR,MAAM;GACJ,IAAI;IAAC;IAAO;IAAW;IAAgB;GACvC,IAAI;IAAC;IAAQ;IAAW;IAAgB;GACxC,IAAI;IAAC;IAAQ;IAAW;IAAgB;GACzC;EACD,YAAY;GACV,UAAU;IACR;IACA;IACA;IACA;IACA;IACD;GACD,QAAQ;IACN;IACA;IACA;IACA;IACA;IACA;IACA;IACD;GACF;EACD,OAAO;GACL,OAAO,EAAE;GACT,MAAM,EAAE;GACT;EACD,OAAO,EACL,OAAO,EAAE,EACV;EACF;CACD,kBAAkB;EAChB;GACE,OAAO;GACP,YAAY;GACZ,OAAO,CAAC,UAAU,gBAAgB;GACnC;EACD;GACE,OAAO;GACP,YAAY;GACZ,OAAO,CAAC,mBAAmB,8BAA8B;GAC1D;EACD;GACE,YAAY;GACZ,OAAO;GACP,OAAO,CAAC,WAAW;GACpB;EACD;GACE,YAAY;GACZ,OAAO;GACP,OAAO,CAAC,cAAc;GACvB;EACF;CACF,CAAC;AAMF,IAAa,kBAAgB,QAAM,YAGhC,EAAE,OAAO,MAAM,aAAa,YAAY,GAAG,QAAQ,QACpD,wBAAA,cAAC,qBAAD;CACQ;CACM;CACZ,GAAI;CACC;CACL,CAAA,CACF"}
+{"version":3,"file":"ComboboxInput.js","names":[],"sources":["../../../src/components/combobox/ComboboxInput.tsx"],"sourcesContent":["import { ComboboxInput as BaseComboboxInput } from '@reach/combobox'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nexport const StyledComboboxInput = styled(BaseComboboxInput, {\n  base: [\n    'bg-(image:--bg-chevron)',\n    'bg-position-[right_--spacing(3)_top_50%,0_0]',\n    '[background-repeat:no-repeat,repeat-x]',\n    'bg-size-[--spacing(5)_auto,100%]',\n    'shadow-none',\n    'appearance-none',\n    'rounded-md',\n    'box-border',\n    'text-grey-1000',\n    'cursor-text',\n    'block',\n    'font-body',\n    'h-10',\n    'pl-3',\n    'pr-10',\n    'transition-all',\n    'duration-100',\n    'ease-out',\n    'w-full',\n    'placeholder:opacity-100',\n    'placeholder:text-grey-700',\n    'disabled:bg-grey-200',\n    'disabled:cursor-not-allowed',\n    'disabled:text-grey-800'\n  ],\n\n  variants: {\n    size: {\n      sm: ['h-8', 'text-sm', 'leading-[1.7]'],\n      md: ['h-10', 'text-md', 'leading-loose'],\n      lg: ['h-12', 'text-md', 'leading-loose']\n    },\n    appearance: {\n      standard: [\n        'bg-white',\n        'border',\n        'border-grey-700',\n        'focus-within:border-primary-800',\n        'focus-within:outline-none'\n      ],\n      modern: [\n        'bg-grey-100',\n        'border-none',\n        'focus-within:outline-2',\n        'focus-within:outline-blue-800',\n        'focus-within:outline-offset-1',\n        'focus-within:outline-solid',\n        'focus-within:z-1'\n      ]\n    },\n    theme: {\n      white: [],\n      grey: []\n    },\n    state: {\n      error: []\n    }\n  },\n  compoundVariants: [\n    {\n      state: 'error',\n      appearance: 'standard',\n      class: ['border', 'border-danger']\n    },\n    {\n      state: 'error',\n      appearance: 'modern',\n      class: ['bg-danger-light', 'focus-within:outline-danger']\n    },\n    {\n      appearance: 'modern',\n      theme: 'white',\n      class: ['bg-white']\n    },\n    {\n      appearance: 'modern',\n      theme: 'grey',\n      class: ['bg-grey-100']\n    }\n  ]\n})\n\nexport type ComboboxInputProps = React.ComponentProps<\n  typeof StyledComboboxInput\n>\n\nexport const ComboboxInput = React.forwardRef<\n  HTMLInputElement,\n  ComboboxInputProps\n>(({ size = 'md', appearance = 'standard', ...rest }, ref) => (\n  <StyledComboboxInput\n    size={size}\n    appearance={appearance}\n    {...rest}\n    ref={ref}\n  />\n))\n"],"mappings":";;;;;AAKA,IAAa,sBAAsB,OAAO,eAAmB;CAC3D,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CAED,UAAU;EACR,MAAM;GACJ,IAAI;IAAC;IAAO;IAAW;IAAgB;GACvC,IAAI;IAAC;IAAQ;IAAW;IAAgB;GACxC,IAAI;IAAC;IAAQ;IAAW;IAAgB;GACzC;EACD,YAAY;GACV,UAAU;IACR;IACA;IACA;IACA;IACA;IACD;GACD,QAAQ;IACN;IACA;IACA;IACA;IACA;IACA;IACA;IACD;GACF;EACD,OAAO;GACL,OAAO,EAAE;GACT,MAAM,EAAE;GACT;EACD,OAAO,EACL,OAAO,EAAE,EACV;EACF;CACD,kBAAkB;EAChB;GACE,OAAO;GACP,YAAY;GACZ,OAAO,CAAC,UAAU,gBAAgB;GACnC;EACD;GACE,OAAO;GACP,YAAY;GACZ,OAAO,CAAC,mBAAmB,8BAA8B;GAC1D;EACD;GACE,YAAY;GACZ,OAAO;GACP,OAAO,CAAC,WAAW;GACpB;EACD;GACE,YAAY;GACZ,OAAO;GACP,OAAO,CAAC,cAAc;GACvB;EACF;CACF,CAAC;AAMF,IAAa,kBAAgB,QAAM,YAGhC,EAAE,OAAO,MAAM,aAAa,YAAY,GAAG,QAAQ,QACpD,oBAAC,qBAAD;CACQ;CACM;CACZ,GAAI;CACC;CACL,CAAA,CACF"}

package/dist/components/combobox/ComboboxList.d.ts

@@ -1,6 +1,4 @@
-export declare const ComboboxList: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & {
-    ref?: ((instance: HTMLUListElement | null) => void) | import("react").RefObject<HTMLUListElement> | null | undefined;
-}, "as" | "persistSelection"> & import("@reach/combobox").ComboboxListProps & {
+export declare const ComboboxList: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "as" | "persistSelection"> & import("@reach/combobox").ComboboxListProps & {
     as?: "ul" | undefined;
 }, never> & {
     as?: import("react").ElementType;

package/dist/components/combobox/ComboboxOption.d.ts

@@ -1,6 +1,4 @@
-export declare const ComboboxOption: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & {
-    ref?: ((instance: HTMLLIElement | null) => void) | import("react").RefObject<HTMLLIElement> | null | undefined;
-}, "as" | keyof import("@reach/combobox").ComboboxOptionProps> & import("@reach/combobox").ComboboxOptionProps & {
+export declare const ComboboxOption: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "as" | keyof import("@reach/combobox").ComboboxOptionProps> & import("@reach/combobox").ComboboxOptionProps & {
     as?: "li" | undefined;
 }, never> & {
     as?: import("react").ElementType;

package/dist/components/combobox/ComboboxPopover.d.ts

@@ -1,6 +1,4 @@
-export declare const ComboboxPopover: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, "as" | keyof import("@reach/popover").PopoverProps | "portal"> & import("@reach/combobox").ComboboxPopoverProps & Partial<import("@reach/popover").PopoverProps> & {
+export declare const ComboboxPopover: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "as" | keyof import("@reach/popover").PopoverProps | "portal"> & import("@reach/combobox").ComboboxPopoverProps & Partial<import("@reach/popover").PopoverProps> & {
     as?: "div" | undefined;
 }, never> & {
     as?: import("react").ElementType;

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

@@ -1,6 +1,7 @@
 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 { throttle } from "throttle-debounce";
 import { useFormContext } from "react-hook-form";
@@ -26,25 +27,29 @@ var CreatePasswordField = ({ validate, defaultValidation, messageDirection = "ro
 		return isFocused ? "neutral" : "error";
 	};
 	const showValidation = control.mode.isOnBlur && (isFocused || touched) || control.mode.isOnSubmit && (isFocused || formState.isSubmitted && error);
-	return /* @__PURE__ */ React$1.createElement("div", { className }, /* @__PURE__ */ React$1.createElement(PasswordField, {
-		label,
-		name,
-		onChange: (e) => handleChange(e.target.value),
-		onBlur: () => setIsFocused(false),
-		onFocus: () => setIsFocused(true),
-		validation: {
-			...validation,
-			validate: validatePassword
-		},
-		appearance,
-		...remainingProps
-	}), showValidation && /* @__PURE__ */ React$1.createElement("div", {
-		style: { "--direction": messageDirection },
-		className: "direction-(--direction) mt-2 flex flex-wrap gap-2"
-	}, Object.entries(validationResult).map(([message, result]) => /* @__PURE__ */ React$1.createElement(InlineMessage, {
-		key: message,
-		theme: getMessageTheme(result, isFocused)
-	}, message))));
+	return /* @__PURE__ */ jsxs("div", {
+		className,
+		children: [/* @__PURE__ */ jsx(PasswordField, {
+			label,
+			name,
+			onChange: (e) => handleChange(e.target.value),
+			onBlur: () => setIsFocused(false),
+			onFocus: () => setIsFocused(true),
+			validation: {
+				...validation,
+				validate: validatePassword
+			},
+			appearance,
+			...remainingProps
+		}), showValidation && /* @__PURE__ */ jsx("div", {
+			style: { "--direction": messageDirection },
+			className: "direction-(--direction) mt-2 flex flex-wrap gap-2",
+			children: Object.entries(validationResult).map(([message, result]) => /* @__PURE__ */ jsx(InlineMessage, {
+				theme: getMessageTheme(result, isFocused),
+				children: message
+			}, message))
+		})]
+	});
 };
 CreatePasswordField.displayName = "CreatePasswordField";
 //#endregion

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 { Override } from '~/utilities/types'\n\nimport { 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  ...remainingProps\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  const handleChange = React.useCallback(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        {...remainingProps}\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":";;;;;;;AA2BA,IAAa,uBAAuB,EAClC,UACA,mBACA,mBAAmB,OACnB,QAAQ,qBACR,OAAO,YACP,WACA,YACA,YACA,GAAG,qBAC2B;CAC9B,MAAM,EAAE,WAAW,YAAY,gBAAgB;CAC/C,MAAM,CAAC,WAAW,gBAAgB,QAAM,SAAkB,MAAM;CAChE,MAAM,CAAC,kBAAkB,uBACvB,QAAM,SAA2B,kBAAkB;CAErD,MAAM,UAAmB,UAAU,QAAQ;CAC3C,MAAM,QACJ,UAAU,OAAO,OAAO,SAAS,cACjC,OAAO,OAAO,iBAAiB,CAAC,OAAO,YAAY,CAAC,QAAQ;CAE9D,MAAM,mBAAmB,QAAM,YAC7B,OAAO,aAAqB;EAC1B,MAAM,SAAS,MAAM,SAAS,SAAS;AAEvC,MAAI,QAAQ;AACV,aACE,OAAO,WAAW,UAClB,8CACD;AAED,uBAAoB,OAAO;AAC3B,UAAO,OAAO,OAAO,OAAO,CAAC,OAAO,YAAY,QAAQ;;AAG1D,SAAO;IAET,CAAC,oBAAoB,CACtB;CAED,MAAM,eAAe,QAAM,YAAY,SAAS,KAAK,iBAAiB,EAAE,CACtE,iBACD,CAAC;CAEF,MAAM,mBAAmB,QAAiB,cAAuB;AAC/D,MAAI,OAAQ,QAAO;AAEnB,SAAO,YAAY,YAAY;;CAGjC,MAAM,iBACH,QAAQ,KAAK,aAAa,aAAa,YACvC,QAAQ,KAAK,eAAe,aAAc,UAAU,eAAe;AAEtE,QACE,wBAAA,cAAC,OAAD,EAAgB,WA4BV,EA3BJ,wBAAA,cAAC,eAAD;EACS;EACD;EACN,WAAW,MACT,aAAa,EAAE,OAAO,MAAM;EAE9B,cAAc,aAAa,MAAM;EACjC,eAAe,aAAa,KAAK;EACjC,YAAY;GAAE,GAAG;GAAY,UAAU;GAAkB;EAC7C;EACZ,GAAI;EACJ,CAAA,EACD,kBACC,wBAAA,cAAC,OAAD;EACE,OAAO,EAAE,eAAe,kBAAkB;EAC1C,WAAU;EAUN,EARH,OAAO,QAAQ,iBAAiB,CAAC,KAAK,CAAC,SAAS,YAC/C,wBAAA,cAAC,eAAD;EACE,KAAK;EACL,OAAO,gBAAgB,QAAQ,UAAU;EAG3B,EADb,QACa,CAChB,CACE,CAEJ;;AAIV,oBAAoB,cAAc"}
+{"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 { Override } from '~/utilities/types'\n\nimport { 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  ...remainingProps\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  const handleChange = React.useCallback(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        {...remainingProps}\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":";;;;;;;;AA2BA,IAAa,uBAAuB,EAClC,UACA,mBACA,mBAAmB,OACnB,QAAQ,qBACR,OAAO,YACP,WACA,YACA,YACA,GAAG,qBAC2B;CAC9B,MAAM,EAAE,WAAW,YAAY,gBAAgB;CAC/C,MAAM,CAAC,WAAW,gBAAgB,QAAM,SAAkB,MAAM;CAChE,MAAM,CAAC,kBAAkB,uBACvB,QAAM,SAA2B,kBAAkB;CAErD,MAAM,UAAmB,UAAU,QAAQ;CAC3C,MAAM,QACJ,UAAU,OAAO,OAAO,SAAS,cACjC,OAAO,OAAO,iBAAiB,CAAC,OAAO,YAAY,CAAC,QAAQ;CAE9D,MAAM,mBAAmB,QAAM,YAC7B,OAAO,aAAqB;EAC1B,MAAM,SAAS,MAAM,SAAS,SAAS;AAEvC,MAAI,QAAQ;AACV,aACE,OAAO,WAAW,UAClB,8CACD;AAED,uBAAoB,OAAO;AAC3B,UAAO,OAAO,OAAO,OAAO,CAAC,OAAO,YAAY,QAAQ;;AAG1D,SAAO;IAET,CAAC,oBAAoB,CACtB;CAED,MAAM,eAAe,QAAM,YAAY,SAAS,KAAK,iBAAiB,EAAE,CACtE,iBACD,CAAC;CAEF,MAAM,mBAAmB,QAAiB,cAAuB;AAC/D,MAAI,OAAQ,QAAO;AAEnB,SAAO,YAAY,YAAY;;CAGjC,MAAM,iBACH,QAAQ,KAAK,aAAa,aAAa,YACvC,QAAQ,KAAK,eAAe,aAAc,UAAU,eAAe;AAEtE,QACE,qBAAC,OAAD;EAAgB;YAAhB,CACE,oBAAC,eAAD;GACS;GACD;GACN,WAAW,MACT,aAAa,EAAE,OAAO,MAAM;GAE9B,cAAc,aAAa,MAAM;GACjC,eAAe,aAAa,KAAK;GACjC,YAAY;IAAE,GAAG;IAAY,UAAU;IAAkB;GAC7C;GACZ,GAAI;GACJ,CAAA,EACD,kBACC,oBAAC,OAAD;GACE,OAAO,EAAE,eAAe,kBAAkB;GAC1C,WAAU;aAET,OAAO,QAAQ,iBAAiB,CAAC,KAAK,CAAC,SAAS,YAC/C,oBAAC,eAAD;IAEE,OAAO,gBAAgB,QAAQ,UAAU;cAExC;IACa,EAJT,QAIS,CAChB;GACE,CAAA,CAEJ;;;AAIV,oBAAoB,cAAc"}

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

@@ -17,15 +17,13 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
 } | {
     data?: never;
     getAsyncData: import("./DataTable.types").TGetAsyncData;
-})) => JSX.Element) & {
+})) => React.JSX.Element) & {
     /** Default table body implementation for `DataTable`.
      *
      * Can be configured with alternating colours of rows. If you need more customisation options,
      * you can build your own implementation with `useDataTable()` and the UI-only `Table` components.
      */
-    Body: ({ striped, rowAction, ...props }: Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref"> & {
-        ref?: ((instance: HTMLTableSectionElement | null) => void) | import("react").RefObject<HTMLTableSectionElement> | null | undefined;
-    }, "striped"> & {
+    Body: ({ striped, rowAction, ...props }: Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "striped"> & {
         striped?: boolean | undefined;
     } & {
         as?: import("react").ElementType;
@@ -42,9 +40,7 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
     /**
      * Used in place of `DataTable.Table` to render a table with rows that the user can sort by drag-and-drop
      */
-    DragAndDropTable: ({ idColumn, onDragAndDrop, sortable, striped, theme, className, ...props }: Omit<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, "ref"> & {
-        ref?: ((instance: HTMLTableElement | null) => void) | import("react").RefObject<HTMLTableElement> | null | undefined;
-    }, "size" | "corners"> & {
+    DragAndDropTable: ({ idColumn, onDragAndDrop, sortable, striped, theme, className, ...props }: Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, "size" | "corners"> & {
         size?: "md" | "lg" | "xl" | undefined;
         corners?: "round" | "square" | undefined;
     } & {
@@ -54,9 +50,7 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
         scrollContainerCls?: string | string[];
         scrollContainerkey?: string;
         maxRowDepth?: number;
-    }, "ref"> & import("react").RefAttributes<HTMLTableElement>, "children" | "numberOfStickyColumns"> & Partial<Pick<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref"> & {
-        ref?: ((instance: HTMLTableSectionElement | null) => void) | import("react").RefObject<HTMLTableSectionElement> | null | undefined;
-    }, "theme" | "isSticky"> & {
+    }, "ref"> & import("react").RefAttributes<HTMLTableElement>, "children" | "numberOfStickyColumns"> & Partial<Pick<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "theme" | "isSticky"> & {
         theme?: "primary" | "white" | "primaryDark" | "light" | "primaryLight" | undefined;
         isSticky?: boolean | undefined;
     } & {
@@ -67,9 +61,7 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
         stickyOffset?: number;
         showTotalInFirstColumn?: boolean;
         totalSuffix?: string;
-    }, "theme" | "sortable">> & Partial<Pick<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref"> & {
-        ref?: ((instance: HTMLTableSectionElement | null) => void) | import("react").RefObject<HTMLTableSectionElement> | null | undefined;
-    }, "striped"> & {
+    }, "theme" | "sortable">> & Partial<Pick<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "striped"> & {
         striped?: boolean | undefined;
     } & {
         as?: import("react").ElementType;
@@ -108,9 +100,7 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
      * If you need more customisation options, you can build your own implementation
      * with `useDataTable` and the UI-only `Table` components.
      */
-    Head: ({ sortable, theme, isSticky, stickyOffset, showTotalInFirstColumn, totalSuffix, style, className, ...props }: Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref"> & {
-        ref?: ((instance: HTMLTableSectionElement | null) => void) | import("react").RefObject<HTMLTableSectionElement> | null | undefined;
-    }, "theme" | "isSticky"> & {
+    Head: ({ sortable, theme, isSticky, stickyOffset, showTotalInFirstColumn, totalSuffix, style, className, ...props }: Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "theme" | "isSticky"> & {
         theme?: "primary" | "white" | "primaryDark" | "light" | "primaryLight" | undefined;
         isSticky?: boolean | undefined;
     } & {
@@ -121,15 +111,13 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
         stickyOffset?: number;
         showTotalInFirstColumn?: boolean;
         totalSuffix?: string;
-    }) => React.ReactElement;
+    }) => React.ReactElement<unknown>;
     /** Default header implementation for `DataTable`
      *
      * Can be configured to make the column sortable. If you need more customisation options,
      * you can build your own implementation with the UI-only `Table` components.
      */
-    HeaderCell: ({ header, includeTotal, totalSuffix, children, className, ...props }: Omit<Omit<import("react").DetailedHTMLProps<import("react").ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>, "ref"> & {
-        ref?: ((instance: HTMLTableHeaderCellElement | null) => void) | import("react").RefObject<HTMLTableHeaderCellElement> | null | undefined;
-    }, never> & {
+    HeaderCell: ({ header, includeTotal, totalSuffix, children, className, ...props }: Omit<import("react").DetailedHTMLProps<import("react").ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>, never> & {
         as?: import("react").ElementType;
     } & {
         header: import("@tanstack/table-core").Header<Record<string, unknown>, unknown>;
@@ -155,9 +143,7 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
      *
      */
     Pagination: {
-        ({ colorScheme, ...props }: Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & {
-            ref?: ((instance: HTMLElement | null) => void) | import("react").RefObject<HTMLElement> | null | undefined;
-        }, never> & {
+        ({ colorScheme, ...props }: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never> & {
             as?: import("react").ElementType;
         } & {
             colorScheme?: import("../..").TcolorScheme;
@@ -179,7 +165,7 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
      * scratch with `useDataTable` and the UI-only `Table` components.
      *
      */
-    Table: ({ sortable, striped, theme, className, scrollOptions, rowAction, withContainer, ...props }: import("./DataTableTable").DataTableTableProps) => JSX.Element | null;
+    Table: ({ sortable, striped, theme, className, scrollOptions, rowAction, withContainer, ...props }: import("./DataTableTable").DataTableTableProps) => React.JSX.Element | null;
     /** Default loading implementation for remote data
      *
      * Renders a loading component while fetching the paginated data using `getAsyncData`.
@@ -187,11 +173,9 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
      * If you need more customisation, you can compose your own implentation, `asyncDataState`
      * can be retrieved from `useDataTable`
      */
-    Loading: (props: React.ComponentProps<import("react").ForwardRefExoticComponent<Omit<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+    Loading: (props: React.ComponentProps<import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
         message?: string;
         size?: "sm" | "md" | "lg";
-    }, "ref"> & {
-        ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
     }, never> & {
         as?: import("react").ElementType;
     }>>) => import("react").JSX.Element | null;
@@ -207,15 +191,13 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
      *
      */
     Error: ({ children }: {
-        children: (retry?: import("./DataTable.types").DataTableContextType["runAsyncData"]) => React.ReactElement;
-    }) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
+        children: (retry?: import("./DataTable.types").DataTableContextType["runAsyncData"]) => React.ReactElement<unknown>;
+    }) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | null;
     /** Empty state implementation for `DataTable`.
      *
      * Extends the EmptyState component
      */
-    EmptyState: ({ children, ...rest }: Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-    }, "size"> & {
+    EmptyState: ({ children, ...rest }: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "size"> & {
         size?: ("sm" | "md" | "lg" | "xs" | "xl" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "lg" | "xs" | "xl">>) | undefined;
     } & {
         as?: import("react").ElementType;
@@ -236,27 +218,27 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
         checked: boolean | "indeterminate";
         onCheckedChange: (value: boolean) => void;
         label?: string;
-    }) => React.ReactElement;
+    }) => React.ReactElement<unknown>;
     /** Bulk actions for selected rows.
      *
      * Renders a toolbar with actions that can be applied to all selected rows
      */
     BulkActions: (({ children, ...rest }: {
         children: React.ReactElement<React.ComponentProps<({ children }: {
-            children: React.ReactElement;
-        }) => React.ReactElement | null>> | React.ReactElement<React.ComponentProps<({ cancelLabel, children }: {
+            children: React.ReactElement<unknown>;
+        }) => React.ReactElement<unknown> | null>> | React.ReactElement<React.ComponentProps<({ cancelLabel, children }: {
             cancelLabel?: string;
             children: React.ReactNode;
         }) => import("react").JSX.Element | null>> | [React.ReactElement<React.ComponentProps<({ children }: {
-            children: React.ReactElement;
-        }) => React.ReactElement | null>>, React.ReactElement<React.ComponentProps<({ cancelLabel, children }: {
+            children: React.ReactElement<unknown>;
+        }) => React.ReactElement<unknown> | null>>, React.ReactElement<React.ComponentProps<({ cancelLabel, children }: {
             cancelLabel?: string;
             children: React.ReactNode;
         }) => import("react").JSX.Element | null>>];
     }) => import("react").JSX.Element) & {
         DefaultActions: ({ children }: {
-            children: React.ReactElement;
-        }) => React.ReactElement | null;
+            children: React.ReactElement<unknown>;
+        }) => React.ReactElement<unknown> | null;
         SelectedRowActions: ({ cancelLabel, children }: {
             cancelLabel?: string;
             children: React.ReactNode;
@@ -266,9 +248,7 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
      *
      * Renders a toolbar with actions that can be applied to all selected rows
      */
-    BulkActionsFloating: (({ children, ...rest }: React.PropsWithChildren<React.ComponentProps<import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-    }, never> & {
+    BulkActionsFloating: (({ children, ...rest }: React.PropsWithChildren<React.ComponentProps<import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & {
         as?: import("react").ElementType;
     }>>>) => import("react").JSX.Element | null) & {
         SelectedRowActions: ({ cancelLabel, showDividers, children }: {

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

@@ -1,20 +1,21 @@
 import { Table } from "../table/Table.js";
 import { useDataTable } from "./DataTableContext.js";
 import { DataTableRow } from "./DataTableRow.js";
-import * as React$1 from "react";
+import "react";
+import { jsx } from "react/jsx-runtime";
 //#region src/components/data-table/DataTableBody.tsx
 var DataTableBody = ({ striped = false, rowAction, ...props }) => {
 	const { getRowModel } = useDataTable();
-	return /* @__PURE__ */ React$1.createElement(Table.Body, {
+	return /* @__PURE__ */ jsx(Table.Body, {
 		...props,
-		striped
-	}, getRowModel().rows.map((row) => {
-		return /* @__PURE__ */ React$1.createElement(DataTableRow, {
-			row,
-			key: row.id,
-			rowAction
-		});
-	}));
+		striped,
+		children: getRowModel().rows.map((row) => {
+			return /* @__PURE__ */ jsx(DataTableRow, {
+				row,
+				rowAction
+			}, row.id);
+		})
+	});
 };
 //#endregion
 export { DataTableBody };

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

@@ -1 +1 @@
-{"version":3,"file":"DataTableBody.js","names":[],"sources":["../../../src/components/data-table/DataTableBody.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Table } from '../table/Table'\nimport { useDataTable } from './DataTableContext'\nimport { DataTableRow } from './DataTableRow'\n\ntype DataTableBodyProps = Omit<\n  React.ComponentProps<typeof Table.Body>,\n  'children'\n> & {\n  rowAction?: (row: Record<string, unknown>, event: React.MouseEvent) => void\n}\n\nexport const DataTableBody = ({\n  striped = false,\n  rowAction,\n  ...props\n}: DataTableBodyProps) => {\n  const { getRowModel } = useDataTable()\n\n  return (\n    <Table.Body {...props} striped={striped}>\n      {getRowModel().rows.map((row) => {\n        return <DataTableRow row={row} key={row.id} rowAction={rowAction} />\n      })}\n    </Table.Body>\n  )\n}\n"],"mappings":";;;;;AAaA,IAAa,iBAAiB,EAC5B,UAAU,OACV,WACA,GAAG,YACqB;CACxB,MAAM,EAAE,gBAAgB,cAAc;AAEtC,QACE,wBAAA,cAAC,MAAM,MAAP;EAAY,GAAI;EAAgB;EAInB,EAHV,aAAa,CAAC,KAAK,KAAK,QAAQ;AAC/B,SAAO,wBAAA,cAAC,cAAD;GAAmB;GAAK,KAAK,IAAI;GAAe;GAAa,CAAA;GACpE,CACS"}
+{"version":3,"file":"DataTableBody.js","names":[],"sources":["../../../src/components/data-table/DataTableBody.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Table } from '../table/Table'\nimport { useDataTable } from './DataTableContext'\nimport { DataTableRow } from './DataTableRow'\n\ntype DataTableBodyProps = Omit<\n  React.ComponentProps<typeof Table.Body>,\n  'children'\n> & {\n  rowAction?: (row: Record<string, unknown>, event: React.MouseEvent) => void\n}\n\nexport const DataTableBody = ({\n  striped = false,\n  rowAction,\n  ...props\n}: DataTableBodyProps) => {\n  const { getRowModel } = useDataTable()\n\n  return (\n    <Table.Body {...props} striped={striped}>\n      {getRowModel().rows.map((row) => {\n        return <DataTableRow row={row} key={row.id} rowAction={rowAction} />\n      })}\n    </Table.Body>\n  )\n}\n"],"mappings":";;;;;;AAaA,IAAa,iBAAiB,EAC5B,UAAU,OACV,WACA,GAAG,YACqB;CACxB,MAAM,EAAE,gBAAgB,cAAc;AAEtC,QACE,oBAAC,MAAM,MAAP;EAAY,GAAI;EAAgB;YAC7B,aAAa,CAAC,KAAK,KAAK,QAAQ;AAC/B,UAAO,oBAAC,cAAD;IAAmB;IAA6B;IAAa,EAAhC,IAAI,GAA4B;IACpE;EACS,CAAA"}

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 declare const BulkActionsDefaultActions: ({ children }: {
-    children: React.ReactElement;
-}) => React.ReactElement | null;
+    children: React.ReactElement<unknown>;
+}) => React.ReactElement<unknown> | null;
 declare const BulkActionsSelectedRowActions: ({ cancelLabel, children }: {
     cancelLabel?: string;
     children: React.ReactNode;
@@ -10,8 +10,8 @@ export declare const DataTableBulkActions: (({ children, ...rest }: {
     children: React.ReactElement<React.ComponentProps<typeof BulkActionsDefaultActions>> | React.ReactElement<React.ComponentProps<typeof BulkActionsSelectedRowActions>> | [React.ReactElement<React.ComponentProps<typeof BulkActionsDefaultActions>>, React.ReactElement<React.ComponentProps<typeof BulkActionsSelectedRowActions>>];
 }) => React.JSX.Element) & {
     DefaultActions: ({ children }: {
-        children: React.ReactElement;
-    }) => React.ReactElement | null;
+        children: React.ReactElement<unknown>;
+    }) => React.ReactElement<unknown> | null;
     SelectedRowActions: ({ cancelLabel, children }: {
         cancelLabel?: string;
         children: React.ReactNode;

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

@@ -4,6 +4,7 @@ import { useDataTable } from "./DataTableContext.js";
 import { Divider } from "../divider/Divider.js";
 import { DataTableMetaData } from "./DataTableMetaData.js";
 import * as React$1 from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/data-table/DataTableBulkActions.tsx
 var StyledContainer = styled("div", {
 	base: [
@@ -27,21 +28,29 @@ var BulkActionsSelectedRowActions = ({ cancelLabel = "Cancel", children }) => {
 	const { toggleAllPageRowsSelected, rowSelection } = useDataTable();
 	const handleDeselectAllPageRows = () => toggleAllPageRowsSelected(false);
 	if (Object.keys(rowSelection || {}).length === 0) return null;
-	return /* @__PURE__ */ React$1.createElement(React$1.Fragment, null, children, React$1.Children.count(children) > 0 && /* @__PURE__ */ React$1.createElement(Divider, {
-		orientation: "vertical",
-		className: "mx-4"
-	}), /* @__PURE__ */ React$1.createElement(Button, {
-		theme: "neutral",
-		onClick: handleDeselectAllPageRows
-	}, cancelLabel));
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		children,
+		React$1.Children.count(children) > 0 && /* @__PURE__ */ jsx(Divider, {
+			orientation: "vertical",
+			className: "mx-4"
+		}),
+		/* @__PURE__ */ jsx(Button, {
+			theme: "neutral",
+			onClick: handleDeselectAllPageRows,
+			children: cancelLabel
+		})
+	] });
 };
 var DataTableBulkActions = Object.assign(({ children, ...rest }) => {
 	const { rowSelection } = useDataTable();
-	const isRowSelected = Object.keys(rowSelection || {}).length > 0;
-	return /* @__PURE__ */ React$1.createElement(StyledContainer, {
-		isRowSelected,
-		...rest
-	}, /* @__PURE__ */ React$1.createElement(DataTableMetaData, null), /* @__PURE__ */ React$1.createElement("div", { className: "flex items-center justify-end" }, children));
+	return /* @__PURE__ */ jsxs(StyledContainer, {
+		isRowSelected: Object.keys(rowSelection || {}).length > 0,
+		...rest,
+		children: [/* @__PURE__ */ jsx(DataTableMetaData, {}), /* @__PURE__ */ jsx("div", {
+			className: "flex items-center justify-end",
+			children
+		})]
+	});
 }, {
 	DefaultActions: BulkActionsDefaultActions,
 	SelectedRowActions: BulkActionsSelectedRowActions

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

@@ -1 +1 @@
-{"version":3,"file":"DataTableBulkActions.js","names":[],"sources":["../../../src/components/data-table/DataTableBulkActions.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Button } from '~/components/button/Button'\nimport { Divider } from '~/components/divider/Divider'\nimport { styled } from '~/styled'\n\nimport { useDataTable } from './DataTableContext'\nimport { DataTableMetaData } from './DataTableMetaData'\n\nconst StyledContainer = styled('div', {\n  base: [\n    'flex',\n    'p-2',\n    'w-full',\n    'mb-2',\n    'justify-between',\n    'items-center',\n    'min-h-16',\n    'rounded-t-sm'\n  ],\n  variants: {\n    isRowSelected: {\n      true: ['bg-primary-100']\n    }\n  }\n})\n\nconst BulkActionsDefaultActions = ({\n  children\n}: {\n  children: React.ReactElement\n}): React.ReactElement | null => {\n  const { rowSelection } = useDataTable()\n\n  if (Object.keys(rowSelection || {}).length > 0) return null\n\n  return children\n}\n\nconst BulkActionsSelectedRowActions = ({\n  cancelLabel = 'Cancel',\n  children\n}: {\n  cancelLabel?: string\n  children: React.ReactNode\n}) => {\n  const { toggleAllPageRowsSelected, rowSelection } = useDataTable()\n\n  const handleDeselectAllPageRows = () => toggleAllPageRowsSelected(false)\n\n  if (Object.keys(rowSelection || {}).length === 0) return null\n\n  return (\n    <>\n      {children}\n      {React.Children.count(children) > 0 && (\n        <Divider orientation=\"vertical\" className=\"mx-4\" />\n      )}\n      <Button theme=\"neutral\" onClick={handleDeselectAllPageRows}>\n        {cancelLabel}\n      </Button>\n    </>\n  )\n}\n\nexport const DataTableBulkActions = Object.assign(\n  ({\n    children,\n    ...rest\n  }: {\n    children:\n      | React.ReactElement<\n          React.ComponentProps<typeof BulkActionsDefaultActions>\n        >\n      | React.ReactElement<\n          React.ComponentProps<typeof BulkActionsSelectedRowActions>\n        >\n      | [\n          React.ReactElement<\n            React.ComponentProps<typeof BulkActionsDefaultActions>\n          >,\n          React.ReactElement<\n            React.ComponentProps<typeof BulkActionsSelectedRowActions>\n          >\n        ]\n  }) => {\n    const { rowSelection } = useDataTable()\n\n    const isRowSelected = Object.keys(rowSelection || {}).length > 0\n\n    return (\n      <StyledContainer isRowSelected={isRowSelected} {...rest}>\n        <DataTableMetaData />\n        <div className=\"flex items-center justify-end\">{children}</div>\n      </StyledContainer>\n    )\n  },\n  {\n    DefaultActions: BulkActionsDefaultActions,\n    SelectedRowActions: BulkActionsSelectedRowActions\n  }\n)\n"],"mappings":";;;;;;;AASA,IAAM,kBAAkB,OAAO,OAAO;CACpC,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU,EACR,eAAe,EACb,MAAM,CAAC,iBAAiB,EACzB,EACF;CACF,CAAC;AAEF,IAAM,6BAA6B,EACjC,eAG+B;CAC/B,MAAM,EAAE,iBAAiB,cAAc;AAEvC,KAAI,OAAO,KAAK,gBAAgB,EAAE,CAAC,CAAC,SAAS,EAAG,QAAO;AAEvD,QAAO;;AAGT,IAAM,iCAAiC,EACrC,cAAc,UACd,eAII;CACJ,MAAM,EAAE,2BAA2B,iBAAiB,cAAc;CAElE,MAAM,kCAAkC,0BAA0B,MAAM;AAExE,KAAI,OAAO,KAAK,gBAAgB,EAAE,CAAC,CAAC,WAAW,EAAG,QAAO;AAEzD,QACE,wBAAA,cAAA,QAAA,UAAA,MACG,UACA,QAAM,SAAS,MAAM,SAAS,GAAG,KAChC,wBAAA,cAAC,SAAD;EAAS,aAAY;EAAW,WAAU;EAAS,CAAA,EAErD,wBAAA,cAAC,QAAD;EAAQ,OAAM;EAAU,SAAS;EAExB,EADN,YACM,CACR;;AAIP,IAAa,uBAAuB,OAAO,QACxC,EACC,UACA,GAAG,WAiBC;CACJ,MAAM,EAAE,iBAAiB,cAAc;CAEvC,MAAM,gBAAgB,OAAO,KAAK,gBAAgB,EAAE,CAAC,CAAC,SAAS;AAE/D,QACE,wBAAA,cAAC,iBAAD;EAAgC;EAAe,GAAI;EAGjC,EAFhB,wBAAA,cAAC,mBAAA,KAAoB,EACrB,wBAAA,cAAC,OAAD,EAAK,WAAU,iCAAgD,EAAf,SAAe,CAC/C;GAGtB;CACE,gBAAgB;CAChB,oBAAoB;CACrB,CACF"}
+{"version":3,"file":"DataTableBulkActions.js","names":[],"sources":["../../../src/components/data-table/DataTableBulkActions.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Button } from '~/components/button/Button'\nimport { Divider } from '~/components/divider/Divider'\nimport { styled } from '~/styled'\n\nimport { useDataTable } from './DataTableContext'\nimport { DataTableMetaData } from './DataTableMetaData'\n\nconst StyledContainer = styled('div', {\n  base: [\n    'flex',\n    'p-2',\n    'w-full',\n    'mb-2',\n    'justify-between',\n    'items-center',\n    'min-h-16',\n    'rounded-t-sm'\n  ],\n  variants: {\n    isRowSelected: {\n      true: ['bg-primary-100']\n    }\n  }\n})\n\nconst BulkActionsDefaultActions = ({\n  children\n}: {\n  children: React.ReactElement<unknown>\n}): React.ReactElement<unknown> | null => {\n  const { rowSelection } = useDataTable()\n\n  if (Object.keys(rowSelection || {}).length > 0) return null\n\n  return children\n}\n\nconst BulkActionsSelectedRowActions = ({\n  cancelLabel = 'Cancel',\n  children\n}: {\n  cancelLabel?: string\n  children: React.ReactNode\n}) => {\n  const { toggleAllPageRowsSelected, rowSelection } = useDataTable()\n\n  const handleDeselectAllPageRows = () => toggleAllPageRowsSelected(false)\n\n  if (Object.keys(rowSelection || {}).length === 0) return null\n\n  return (\n    <>\n      {children}\n      {React.Children.count(children) > 0 && (\n        <Divider orientation=\"vertical\" className=\"mx-4\" />\n      )}\n      <Button theme=\"neutral\" onClick={handleDeselectAllPageRows}>\n        {cancelLabel}\n      </Button>\n    </>\n  )\n}\n\nexport const DataTableBulkActions = Object.assign(\n  ({\n    children,\n    ...rest\n  }: {\n    children:\n      | React.ReactElement<\n          React.ComponentProps<typeof BulkActionsDefaultActions>\n        >\n      | React.ReactElement<\n          React.ComponentProps<typeof BulkActionsSelectedRowActions>\n        >\n      | [\n          React.ReactElement<\n            React.ComponentProps<typeof BulkActionsDefaultActions>\n          >,\n          React.ReactElement<\n            React.ComponentProps<typeof BulkActionsSelectedRowActions>\n          >\n        ]\n  }) => {\n    const { rowSelection } = useDataTable()\n\n    const isRowSelected = Object.keys(rowSelection || {}).length > 0\n\n    return (\n      <StyledContainer isRowSelected={isRowSelected} {...rest}>\n        <DataTableMetaData />\n        <div className=\"flex items-center justify-end\">{children}</div>\n      </StyledContainer>\n    )\n  },\n  {\n    DefaultActions: BulkActionsDefaultActions,\n    SelectedRowActions: BulkActionsSelectedRowActions\n  }\n)\n"],"mappings":";;;;;;;;AASA,IAAM,kBAAkB,OAAO,OAAO;CACpC,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU,EACR,eAAe,EACb,MAAM,CAAC,iBAAiB,EACzB,EACF;CACF,CAAC;AAEF,IAAM,6BAA6B,EACjC,eAGwC;CACxC,MAAM,EAAE,iBAAiB,cAAc;AAEvC,KAAI,OAAO,KAAK,gBAAgB,EAAE,CAAC,CAAC,SAAS,EAAG,QAAO;AAEvD,QAAO;;AAGT,IAAM,iCAAiC,EACrC,cAAc,UACd,eAII;CACJ,MAAM,EAAE,2BAA2B,iBAAiB,cAAc;CAElE,MAAM,kCAAkC,0BAA0B,MAAM;AAExE,KAAI,OAAO,KAAK,gBAAgB,EAAE,CAAC,CAAC,WAAW,EAAG,QAAO;AAEzD,QACE,qBAAA,UAAA,EAAA,UAAA;EACG;EACA,QAAM,SAAS,MAAM,SAAS,GAAG,KAChC,oBAAC,SAAD;GAAS,aAAY;GAAW,WAAU;GAAS,CAAA;EAErD,oBAAC,QAAD;GAAQ,OAAM;GAAU,SAAS;aAC9B;GACM,CAAA;EACR,EAAA,CAAA;;AAIP,IAAa,uBAAuB,OAAO,QACxC,EACC,UACA,GAAG,WAiBC;CACJ,MAAM,EAAE,iBAAiB,cAAc;AAIvC,QACE,qBAAC,iBAAD;EAAgC,eAHZ,OAAO,KAAK,gBAAgB,EAAE,CAAC,CAAC,SAAS;EAGd,GAAI;YAAnD,CACE,oBAAC,mBAAD,EAAqB,CAAA,EACrB,oBAAC,OAAD;GAAK,WAAU;GAAiC;GAAe,CAAA,CAC/C;;GAGtB;CACE,gBAAgB;CAChB,oBAAoB;CACrB,CACF"}

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

@@ -1,7 +1,5 @@
 import * as React from 'react';
-declare const StyledContainer: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
-}, never> & {
+declare const StyledContainer: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & {
     as?: React.ElementType;
 }>;
 export declare const DataTableBulkActionsFloating: (({ children, ...rest }: React.PropsWithChildren<React.ComponentProps<typeof StyledContainer>>) => React.JSX.Element | null) & {