@atom-learning/components 6.17.0 → 8.0.0

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

@@ -1,9 +1,10 @@
 import { ChipGroup } from "../chip/ChipGroup.js";
 import { ToggleGroup } from "../../utilities/radix-overrides/toggle-group/index.js";
 import * as React$1 from "react";
+import { jsx } from "react/jsx-runtime";
 //#region src/components/chip-toggle-group/ChipToggleGroupRoot.tsx
 var ChipToggleGroupRoot = React$1.forwardRef((props, ref) => {
-	return /* @__PURE__ */ React$1.createElement(ChipGroup, {
+	return /* @__PURE__ */ jsx(ChipGroup, {
 		ref,
 		as: ToggleGroup.Root,
 		orientation: "horizontal",

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

@@ -2,14 +2,14 @@ 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;
+        ref?: ((instance: HTMLLIElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLLIElement> | null | undefined;
     }, "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;
+        ref?: ((instance: HTMLInputElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLInputElement> | null | undefined;
     }, "as" | keyof import("@reach/combobox").ComboboxInputProps> & import("@reach/combobox").ComboboxInputProps & {
         as?: "input" | undefined;
     }, "appearance" | "size" | "theme" | "state"> & {
@@ -21,14 +21,14 @@ 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;
+        ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
     }, "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;
+        ref?: ((instance: HTMLUListElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLUListElement> | null | undefined;
     }, "as" | "persistSelection"> & import("@reach/combobox").ComboboxListProps & {
         as?: "ul" | undefined;
     }, never> & {

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

@@ -1,6 +1,6 @@
 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;
+    ref?: ((instance: HTMLInputElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLInputElement> | null | undefined;
 }, "as" | keyof import("@reach/combobox").ComboboxInputProps> & import("@reach/combobox").ComboboxInputProps & {
     as?: "input" | undefined;
 }, "appearance" | "size" | "theme" | "state"> & {
@@ -13,7 +13,7 @@ export declare const StyledComboboxInput: React.ForwardRefExoticComponent<Omit<O
 }>;
 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;
+    ref?: ((instance: HTMLInputElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLInputElement> | null | undefined;
 }, "as" | keyof import("@reach/combobox").ComboboxInputProps> & import("@reach/combobox").ComboboxInputProps & {
     as?: "input" | undefined;
 }, "appearance" | "size" | "theme" | "state"> & {

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,5 +1,5 @@
 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;
+    ref?: ((instance: HTMLUListElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLUListElement> | null | undefined;
 }, "as" | "persistSelection"> & import("@reach/combobox").ComboboxListProps & {
     as?: "ul" | undefined;
 }, never> & {

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

@@ -1,5 +1,5 @@
 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;
+    ref?: ((instance: HTMLLIElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLLIElement> | null | undefined;
 }, "as" | keyof import("@reach/combobox").ComboboxOptionProps> & import("@reach/combobox").ComboboxOptionProps & {
     as?: "li" | undefined;
 }, never> & {

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

@@ -1,5 +1,5 @@
 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;
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
 }, "as" | keyof import("@reach/popover").PopoverProps | "portal"> & import("@reach/combobox").ComboboxPopoverProps & Partial<import("@reach/popover").PopoverProps> & {
     as?: "div" | undefined;
 }, never> & {

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,14 +17,14 @@ 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;
+        ref?: ((instance: HTMLTableSectionElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLTableSectionElement> | null | undefined;
     }, "striped"> & {
         striped?: boolean | undefined;
     } & {
@@ -43,7 +43,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;
+        ref?: ((instance: HTMLTableElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLTableElement> | null | undefined;
     }, "size" | "corners"> & {
         size?: "md" | "lg" | "xl" | undefined;
         corners?: "round" | "square" | undefined;
@@ -55,7 +55,7 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
         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;
+        ref?: ((instance: HTMLTableSectionElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLTableSectionElement> | null | undefined;
     }, "theme" | "isSticky"> & {
         theme?: "primary" | "white" | "primaryDark" | "light" | "primaryLight" | undefined;
         isSticky?: boolean | undefined;
@@ -68,7 +68,7 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
         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;
+        ref?: ((instance: HTMLTableSectionElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLTableSectionElement> | null | undefined;
     }, "striped"> & {
         striped?: boolean | undefined;
     } & {
@@ -109,7 +109,7 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
      * 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;
+        ref?: ((instance: HTMLTableSectionElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLTableSectionElement> | null | undefined;
     }, "theme" | "isSticky"> & {
         theme?: "primary" | "white" | "primaryDark" | "light" | "primaryLight" | undefined;
         isSticky?: boolean | undefined;
@@ -128,7 +128,7 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
      * 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;
+        ref?: ((instance: HTMLTableHeaderCellElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLTableHeaderCellElement> | null | undefined;
     }, never> & {
         as?: import("react").ElementType;
     } & {
@@ -156,7 +156,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;
+            ref?: ((instance: HTMLElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLElement> | null | undefined;
         }, never> & {
             as?: import("react").ElementType;
         } & {
@@ -179,7 +179,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`.
@@ -191,7 +191,7 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
         message?: string;
         size?: "sm" | "md" | "lg";
     }, "ref"> & {
-        ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+        ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
     }, never> & {
         as?: import("react").ElementType;
     }>>) => import("react").JSX.Element | null;
@@ -214,7 +214,7 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
      * 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;
+        ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
     }, "size"> & {
         size?: ("sm" | "md" | "lg" | "xs" | "xl" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "lg" | "xs" | "xl">>) | undefined;
     } & {
@@ -267,7 +267,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;
+        ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
     }, never> & {
         as?: import("react").ElementType;
     }>>>) => import("react").JSX.Element | null) & {

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.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\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,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,6 +1,6 @@
 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;
+    ref?: ((instance: HTMLDivElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLDivElement> | null | undefined;
 }, never> & {
     as?: React.ElementType;
 }>;

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

@@ -6,6 +6,7 @@ import { Badge } from "../badge/Badge.js";
 import { useDataTable } from "./DataTableContext.js";
 import { BulkActionsSelectedRowActions } from "./DataTableBulkActionsSelectedRowActions.js";
 import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Close } from "@atom-learning/icons";
 //#region src/components/data-table/DataTableBulkActionsFloating.tsx
 var StyledContainer = styled("div", { base: [
@@ -44,25 +45,38 @@ var DataTableBulkActionsFloating = Object.assign(({ children, ...rest }) => {
 	}, [rowSelection]);
 	const handleDeselectAllPageRows = () => toggleAllPageRowsSelected(false);
 	if (numberOfSelectedRows === 0) return null;
-	return /* @__PURE__ */ React$1.createElement("section", {
+	return /* @__PURE__ */ jsx("section", {
 		ref: actionBarRef,
-		className: "pointer-events-none sticky bottom-0 left-0 flex justify-center"
-	}, /* @__PURE__ */ React$1.createElement(StyledContainer, rest, /* @__PURE__ */ React$1.createElement("div", { className: "flex flex-auto items-center justify-start gap-2" }, /* @__PURE__ */ React$1.createElement(Badge, {
-		theme: "success",
-		size: "xs",
-		emphasis: "subtle",
-		className: "h-6 min-w-6"
-	}, numberOfSelectedRows), /* @__PURE__ */ React$1.createElement(Text, {
-		size: "sm",
-		weight: "bold",
-		className: "text-white"
-	}, "selected")), /* @__PURE__ */ React$1.createElement("div", { className: "flex flex-auto items-center justify-end gap-3" }, children, /* @__PURE__ */ React$1.createElement(ActionIcon, {
-		appearance: "simple",
-		theme: "white",
-		size: "md",
-		onClick: handleDeselectAllPageRows,
-		label: "close"
-	}, /* @__PURE__ */ React$1.createElement(Icon, { is: Close })))));
+		className: "pointer-events-none sticky bottom-0 left-0 flex justify-center",
+		children: /* @__PURE__ */ jsxs(StyledContainer, {
+			...rest,
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-auto items-center justify-start gap-2",
+				children: [/* @__PURE__ */ jsx(Badge, {
+					theme: "success",
+					size: "xs",
+					emphasis: "subtle",
+					className: "h-6 min-w-6",
+					children: numberOfSelectedRows
+				}), /* @__PURE__ */ jsx(Text, {
+					size: "sm",
+					weight: "bold",
+					className: "text-white",
+					children: "selected"
+				})]
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-auto items-center justify-end gap-3",
+				children: [children, /* @__PURE__ */ jsx(ActionIcon, {
+					appearance: "simple",
+					theme: "white",
+					size: "md",
+					onClick: handleDeselectAllPageRows,
+					label: "close",
+					children: /* @__PURE__ */ jsx(Icon, { is: Close })
+				})]
+			})]
+		})
+	});
 }, { SelectedRowActions: BulkActionsSelectedRowActions });
 //#endregion
 export { DataTableBulkActionsFloating };

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

@@ -1 +1 @@
-{"version":3,"file":"DataTableBulkActionsFloating.js","names":[],"sources":["../../../src/components/data-table/DataTableBulkActionsFloating.tsx"],"sourcesContent":["import { Close } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Badge } from '../badge/Badge'\nimport { Icon } from '../icon/Icon'\nimport { Text } from '../text/Text'\nimport { BulkActionsSelectedRowActions } from './DataTableBulkActionsSelectedRowActions'\nimport { useDataTable } from './DataTableContext'\n\nconst StyledContainer = styled('div', {\n  base: [\n    'flex',\n    'pl-3',\n    'pr-1',\n    'py-2',\n    'mb-4',\n    'mt-2',\n    'justify-between',\n    'items-center',\n    'rounded-lg',\n    'bg-primary-800',\n    'pointer-events-auto',\n    'z-2',\n    'w-full',\n    'mx-4',\n    'shadow-lg',\n    'sm:max-w-200',\n    'lg:max-w-250',\n    'lg:mb-8',\n    'lg:pl-4',\n    'lg:pr-1',\n    'lg:py-3',\n    'xl:max-w-350',\n    'xl:mb-8',\n    'xl:pl-6',\n    'xl:pr-2',\n    'xl:py-4'\n  ]\n})\n\nexport const DataTableBulkActionsFloating = Object.assign(\n  ({\n    children,\n    ...rest\n  }: React.PropsWithChildren<React.ComponentProps<typeof StyledContainer>>) => {\n    const { rowSelection, toggleAllPageRowsSelected } = useDataTable()\n\n    const actionBarRef = React.useRef<HTMLDivElement>(null)\n\n    const numberOfSelectedRows = React.useMemo(() => {\n      return Object.keys(rowSelection || {}).length\n    }, [rowSelection])\n\n    const handleDeselectAllPageRows = () => toggleAllPageRowsSelected(false)\n\n    if (numberOfSelectedRows === 0) return null\n\n    return (\n      <section\n        ref={actionBarRef}\n        className=\"pointer-events-none sticky bottom-0 left-0 flex justify-center\"\n      >\n        <StyledContainer {...rest}>\n          <div className=\"flex flex-auto items-center justify-start gap-2\">\n            <Badge\n              theme=\"success\"\n              size=\"xs\"\n              emphasis=\"subtle\"\n              className=\"h-6 min-w-6\"\n            >\n              {numberOfSelectedRows}\n            </Badge>\n            <Text size=\"sm\" weight=\"bold\" className=\"text-white\">\n              selected\n            </Text>\n          </div>\n          <div className=\"flex flex-auto items-center justify-end gap-3\">\n            {children}\n            <ActionIcon\n              appearance=\"simple\"\n              theme=\"white\"\n              size=\"md\"\n              onClick={handleDeselectAllPageRows}\n              label=\"close\"\n            >\n              <Icon is={Close} />\n            </ActionIcon>\n          </div>\n        </StyledContainer>\n      </section>\n    )\n  },\n  {\n    SelectedRowActions: BulkActionsSelectedRowActions\n  }\n)\n"],"mappings":";;;;;;;;;;AAYA,IAAM,kBAAkB,OAAO,OAAO,EACpC,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EACF,CAAC;AAEF,IAAa,+BAA+B,OAAO,QAChD,EACC,UACA,GAAG,WACwE;CAC3E,MAAM,EAAE,cAAc,8BAA8B,cAAc;CAElE,MAAM,eAAe,QAAM,OAAuB,KAAK;CAEvD,MAAM,uBAAuB,QAAM,cAAc;AAC/C,SAAO,OAAO,KAAK,gBAAgB,EAAE,CAAC,CAAC;IACtC,CAAC,aAAa,CAAC;CAElB,MAAM,kCAAkC,0BAA0B,MAAM;AAExE,KAAI,yBAAyB,EAAG,QAAO;AAEvC,QACE,wBAAA,cAAC,WAAD;EACE,KAAK;EACL,WAAU;EA6BF,EA3BR,wBAAA,cAAC,iBAAoB,MACnB,wBAAA,cAAC,OAAD,EAAK,WAAU,mDAYT,EAXJ,wBAAA,cAAC,OAAD;EACE,OAAM;EACN,MAAK;EACL,UAAS;EACT,WAAU;EAGJ,EADL,qBACK,EACR,wBAAA,cAAC,MAAD;EAAM,MAAK;EAAK,QAAO;EAAO,WAAU;EAEjC,EAF8C,WAE9C,CACH,EACN,wBAAA,cAAC,OAAD,EAAK,WAAU,iDAWT,EAVH,UACD,wBAAA,cAAC,YAAD;EACE,YAAW;EACX,OAAM;EACN,MAAK;EACL,SAAS;EACT,OAAM;EAGK,EADX,wBAAA,cAAC,MAAD,EAAM,IAAI,OAAS,CAAA,CACR,CACT,CACU,CACV;GAGd,EACE,oBAAoB,+BACrB,CACF"}
+{"version":3,"file":"DataTableBulkActionsFloating.js","names":[],"sources":["../../../src/components/data-table/DataTableBulkActionsFloating.tsx"],"sourcesContent":["import { Close } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Badge } from '../badge/Badge'\nimport { Icon } from '../icon/Icon'\nimport { Text } from '../text/Text'\nimport { BulkActionsSelectedRowActions } from './DataTableBulkActionsSelectedRowActions'\nimport { useDataTable } from './DataTableContext'\n\nconst StyledContainer = styled('div', {\n  base: [\n    'flex',\n    'pl-3',\n    'pr-1',\n    'py-2',\n    'mb-4',\n    'mt-2',\n    'justify-between',\n    'items-center',\n    'rounded-lg',\n    'bg-primary-800',\n    'pointer-events-auto',\n    'z-2',\n    'w-full',\n    'mx-4',\n    'shadow-lg',\n    'sm:max-w-200',\n    'lg:max-w-250',\n    'lg:mb-8',\n    'lg:pl-4',\n    'lg:pr-1',\n    'lg:py-3',\n    'xl:max-w-350',\n    'xl:mb-8',\n    'xl:pl-6',\n    'xl:pr-2',\n    'xl:py-4'\n  ]\n})\n\nexport const DataTableBulkActionsFloating = Object.assign(\n  ({\n    children,\n    ...rest\n  }: React.PropsWithChildren<React.ComponentProps<typeof StyledContainer>>) => {\n    const { rowSelection, toggleAllPageRowsSelected } = useDataTable()\n\n    const actionBarRef = React.useRef<HTMLDivElement>(null)\n\n    const numberOfSelectedRows = React.useMemo(() => {\n      return Object.keys(rowSelection || {}).length\n    }, [rowSelection])\n\n    const handleDeselectAllPageRows = () => toggleAllPageRowsSelected(false)\n\n    if (numberOfSelectedRows === 0) return null\n\n    return (\n      <section\n        ref={actionBarRef}\n        className=\"pointer-events-none sticky bottom-0 left-0 flex justify-center\"\n      >\n        <StyledContainer {...rest}>\n          <div className=\"flex flex-auto items-center justify-start gap-2\">\n            <Badge\n              theme=\"success\"\n              size=\"xs\"\n              emphasis=\"subtle\"\n              className=\"h-6 min-w-6\"\n            >\n              {numberOfSelectedRows}\n            </Badge>\n            <Text size=\"sm\" weight=\"bold\" className=\"text-white\">\n              selected\n            </Text>\n          </div>\n          <div className=\"flex flex-auto items-center justify-end gap-3\">\n            {children}\n            <ActionIcon\n              appearance=\"simple\"\n              theme=\"white\"\n              size=\"md\"\n              onClick={handleDeselectAllPageRows}\n              label=\"close\"\n            >\n              <Icon is={Close} />\n            </ActionIcon>\n          </div>\n        </StyledContainer>\n      </section>\n    )\n  },\n  {\n    SelectedRowActions: BulkActionsSelectedRowActions\n  }\n)\n"],"mappings":";;;;;;;;;;;AAYA,IAAM,kBAAkB,OAAO,OAAO,EACpC,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EACF,CAAC;AAEF,IAAa,+BAA+B,OAAO,QAChD,EACC,UACA,GAAG,WACwE;CAC3E,MAAM,EAAE,cAAc,8BAA8B,cAAc;CAElE,MAAM,eAAe,QAAM,OAAuB,KAAK;CAEvD,MAAM,uBAAuB,QAAM,cAAc;AAC/C,SAAO,OAAO,KAAK,gBAAgB,EAAE,CAAC,CAAC;IACtC,CAAC,aAAa,CAAC;CAElB,MAAM,kCAAkC,0BAA0B,MAAM;AAExE,KAAI,yBAAyB,EAAG,QAAO;AAEvC,QACE,oBAAC,WAAD;EACE,KAAK;EACL,WAAU;YAEV,qBAAC,iBAAD;GAAiB,GAAI;aAArB,CACE,qBAAC,OAAD;IAAK,WAAU;cAAf,CACE,oBAAC,OAAD;KACE,OAAM;KACN,MAAK;KACL,UAAS;KACT,WAAU;eAET;KACK,CAAA,EACR,oBAAC,MAAD;KAAM,MAAK;KAAK,QAAO;KAAO,WAAU;eAAa;KAE9C,CAAA,CACH;OACN,qBAAC,OAAD;IAAK,WAAU;cAAf,CACG,UACD,oBAAC,YAAD;KACE,YAAW;KACX,OAAM;KACN,MAAK;KACL,SAAS;KACT,OAAM;eAEN,oBAAC,MAAD,EAAM,IAAI,OAAS,CAAA;KACR,CAAA,CACT;MACU;;EACV,CAAA;GAGd,EACE,oBAAoB,+BACrB,CACF"}

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

@@ -2,18 +2,24 @@ import { Button } from "../button/Button.js";
 import { useDataTable } from "./DataTableContext.js";
 import { Divider } from "../divider/Divider.js";
 import * as React$1 from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/data-table/DataTableBulkActionsSelectedRowActions.tsx
 var BulkActionsSelectedRowActions = ({ cancelLabel = "Cancel", showDividers = true, 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, showDividers && 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,
+		showDividers && React$1.Children.count(children) > 0 && /* @__PURE__ */ jsx(Divider, {
+			orientation: "vertical",
+			className: "mx-4"
+		}),
+		/* @__PURE__ */ jsx(Button, {
+			theme: "neutral",
+			onClick: handleDeselectAllPageRows,
+			children: cancelLabel
+		})
+	] });
 };
 //#endregion
 export { BulkActionsSelectedRowActions };

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

@@ -1 +1 @@
-{"version":3,"file":"DataTableBulkActionsSelectedRowActions.js","names":[],"sources":["../../../src/components/data-table/DataTableBulkActionsSelectedRowActions.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Button } from '../button/Button'\nimport { Divider } from '../divider/Divider'\nimport { useDataTable } from './DataTableContext'\n\nexport const BulkActionsSelectedRowActions = ({\n  cancelLabel = 'Cancel',\n  showDividers = true,\n  children\n}: {\n  cancelLabel?: string\n  showDividers?: boolean\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      {showDividers && 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"],"mappings":";;;;;AAMA,IAAa,iCAAiC,EAC5C,cAAc,UACd,eAAe,MACf,eAKI;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,gBAAgB,QAAM,SAAS,MAAM,SAAS,GAAG,KAChD,wBAAA,cAAC,SAAD;EAAS,aAAY;EAAW,WAAU;EAAS,CAAA,EAErD,wBAAA,cAAC,QAAD;EAAQ,OAAM;EAAU,SAAS;EAExB,EADN,YACM,CACR"}
+{"version":3,"file":"DataTableBulkActionsSelectedRowActions.js","names":[],"sources":["../../../src/components/data-table/DataTableBulkActionsSelectedRowActions.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Button } from '../button/Button'\nimport { Divider } from '../divider/Divider'\nimport { useDataTable } from './DataTableContext'\n\nexport const BulkActionsSelectedRowActions = ({\n  cancelLabel = 'Cancel',\n  showDividers = true,\n  children\n}: {\n  cancelLabel?: string\n  showDividers?: boolean\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      {showDividers && 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"],"mappings":";;;;;;AAMA,IAAa,iCAAiC,EAC5C,cAAc,UACd,eAAe,MACf,eAKI;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,gBAAgB,QAAM,SAAS,MAAM,SAAS,GAAG,KAChD,oBAAC,SAAD;GAAS,aAAY;GAAW,WAAU;GAAS,CAAA;EAErD,oBAAC,QAAD;GAAQ,OAAM;GAAU,SAAS;aAC9B;GACM,CAAA;EACR,EAAA,CAAA"}