@atom-learning/components 6.5.4 → 6.5.5

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

@@ -1,14 +1,16 @@
-import { ChipGroup as e } from "../chip/ChipGroup.js";
-import { ToggleGroup as t } from "../../utilities/radix-overrides/toggle-group/index.js";
-import * as n from "react";
+import { ChipGroup } from "../chip/ChipGroup.js";
+import { ToggleGroup } from "../../utilities/radix-overrides/toggle-group/index.js";
+import * as React$1 from "react";
 //#region src/components/chip-toggle-group/ChipToggleGroupRoot.tsx
-var r = n.forwardRef((r, i) => /* @__PURE__ */ n.createElement(e, {
-	ref: i,
-	as: t.Root,
-	orientation: "horizontal",
-	...r
-}));
+var ChipToggleGroupRoot = React$1.forwardRef((props, ref) => {
+	return /* @__PURE__ */ React$1.createElement(ChipGroup, {
+		ref,
+		as: ToggleGroup.Root,
+		orientation: "horizontal",
+		...props
+	});
+});
 //#endregion
-export { r as ChipToggleGroupRoot };
+export { ChipToggleGroupRoot };
 
 //# sourceMappingURL=ChipToggleGroupRoot.js.map

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,IAAsB,EAAM,YAGtC,GAAO,MAEN,kBAAA,cAAC,GAAD;CACO;CACL,IAAI,EAAY;CAChB,aAAY;CACZ,GAAI;CACJ,CAAA,CAEJ"}
+{"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"}

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

@@ -1,9 +1,10 @@
-import { ChipToggleGroupItem as e } from "./ChipToggleGroupItem.js";
-import { ChipToggleGroupRoot as t } from "./ChipToggleGroupRoot.js";
+import { ChipToggleGroupItem } from "./ChipToggleGroupItem.js";
+import { ChipToggleGroupRoot } from "./ChipToggleGroupRoot.js";
 //#region src/components/chip-toggle-group/index.ts
-var n = t;
-n.Item = e, n.displayName = "ChipToggleGroupItem";
+var ChipToggleGroup = ChipToggleGroupRoot;
+ChipToggleGroup.Item = ChipToggleGroupItem;
+ChipToggleGroup.displayName = "ChipToggleGroupItem";
 //#endregion
-export { n as ChipToggleGroup };
+export { ChipToggleGroup };
 
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/chip-toggle-group/index.ts"],"sourcesContent":["import { ChipToggleGroupItem } from './ChipToggleGroupItem'\nimport { ChipToggleGroupRoot } from './ChipToggleGroupRoot'\n\ntype TChipToggleGroup = typeof ChipToggleGroupRoot & {\n  Item: typeof ChipToggleGroupItem\n}\n\nexport const ChipToggleGroup = ChipToggleGroupRoot as TChipToggleGroup\nChipToggleGroup.Item = ChipToggleGroupItem\nChipToggleGroup.displayName = 'ChipToggleGroupItem'\n"],"mappings":";;;AAOA,IAAa,IAAkB;AAC/B,EAAgB,OAAO,GACvB,EAAgB,cAAc"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/chip-toggle-group/index.ts"],"sourcesContent":["import { ChipToggleGroupItem } from './ChipToggleGroupItem'\nimport { ChipToggleGroupRoot } from './ChipToggleGroupRoot'\n\ntype TChipToggleGroup = typeof ChipToggleGroupRoot & {\n  Item: typeof ChipToggleGroupItem\n}\n\nexport const ChipToggleGroup = ChipToggleGroupRoot as TChipToggleGroup\nChipToggleGroup.Item = ChipToggleGroupItem\nChipToggleGroup.displayName = 'ChipToggleGroupItem'\n"],"mappings":";;;AAOA,IAAa,kBAAkB;AAC/B,gBAAgB,OAAO;AACvB,gBAAgB,cAAc"}

package/dist/components/combobox/Combobox.js

@@ -1,18 +1,18 @@
-import { ComboboxInput as e } from "./ComboboxInput.js";
-import { ComboboxList as t } from "./ComboboxList.js";
-import { ComboboxOption as n } from "./ComboboxOption.js";
-import { ComboboxPopover as r } from "./ComboboxPopover.js";
-import { Combobox as i, ComboboxOptionText as a } from "@reach/combobox";
+import { ComboboxInput as ComboboxInput$1 } from "./ComboboxInput.js";
+import { ComboboxList as ComboboxList$1 } from "./ComboboxList.js";
+import { ComboboxOption as ComboboxOption$1 } from "./ComboboxOption.js";
+import { ComboboxPopover as ComboboxPopover$1 } from "./ComboboxPopover.js";
+import { Combobox, ComboboxOptionText } from "@reach/combobox";
 //#region src/components/combobox/Combobox.tsx
-var o = Object.assign(i, {
+var Combobox$1 = Object.assign(Combobox, {
 	displayName: "Combobox",
-	Option: n,
-	Input: e,
-	Popover: r,
-	List: t,
-	OptionText: a
+	Option: ComboboxOption$1,
+	Input: ComboboxInput$1,
+	Popover: ComboboxPopover$1,
+	List: ComboboxList$1,
+	OptionText: ComboboxOptionText
 });
 //#endregion
-export { o as Combobox };
+export { Combobox$1 as Combobox };
 
 //# sourceMappingURL=Combobox.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Combobox.js","names":[],"sources":["../../../src/components/combobox/Combobox.tsx"],"sourcesContent":["import { Combobox as BaseCombobox, ComboboxOptionText } from '@reach/combobox'\n\nimport { ComboboxInput } from './ComboboxInput'\nimport { ComboboxList } from './ComboboxList'\nimport { ComboboxOption } from './ComboboxOption'\nimport { ComboboxPopover } from './ComboboxPopover'\n\n// ':root': { '--reach-combobox': 1 }\n\nexport const Combobox = Object.assign(BaseCombobox, {\n  displayName: 'Combobox',\n  Option: ComboboxOption,\n  Input: ComboboxInput,\n  Popover: ComboboxPopover,\n  List: ComboboxList,\n  OptionText: ComboboxOptionText\n})\n"],"mappings":";;;;;;AASA,IAAa,IAAW,OAAO,OAAO,GAAc;CAClD,aAAa;CACb,QAAQ;CACR,OAAO;CACP,SAAS;CACT,MAAM;CACN,YAAY;CACb,CAAC"}
+{"version":3,"file":"Combobox.js","names":[],"sources":["../../../src/components/combobox/Combobox.tsx"],"sourcesContent":["import { Combobox as BaseCombobox, ComboboxOptionText } from '@reach/combobox'\n\nimport { ComboboxInput } from './ComboboxInput'\nimport { ComboboxList } from './ComboboxList'\nimport { ComboboxOption } from './ComboboxOption'\nimport { ComboboxPopover } from './ComboboxPopover'\n\n// ':root': { '--reach-combobox': 1 }\n\nexport const Combobox = Object.assign(BaseCombobox, {\n  displayName: 'Combobox',\n  Option: ComboboxOption,\n  Input: ComboboxInput,\n  Popover: ComboboxPopover,\n  List: ComboboxList,\n  OptionText: ComboboxOptionText\n})\n"],"mappings":";;;;;;AASA,IAAa,aAAW,OAAO,OAAO,UAAc;CAClD,aAAa;CACb,QAAQ;CACR,OAAO;CACP,SAAS;CACT,MAAM;CACN,YAAY;CACb,CAAC"}

package/dist/components/combobox/ComboboxInput.js

@@ -1,9 +1,39 @@
-import { styled as e } from "../../styled.js";
-import * as t from "react";
-import { ComboboxInput as n } from "@reach/combobox";
+import { styled } from "../../styled.js";
+import * as React$1 from "react";
+import { ComboboxInput } from "@reach/combobox";
 //#region src/components/combobox/ComboboxInput.tsx
-var r = e(n, {
-	base: /* @__PURE__ */ "bg-white.bg-(image:--bg-chevron).bg-position-[right_--spacing(3)_top_50%,0_0].[background-repeat:no-repeat,repeat-x].bg-size-[--spacing(5)_auto,100%].shadow-none.appearance-none.border.border-grey-700.rounded-md.text-grey-1000.cursor-text.block.font-body.h-10.pl-3.pr-10.transition-all.duration-100.ease-out.w-full.placeholder:opacity-100.placeholder:text-grey-700.focus-within:border-primary-800.focus-within:outline-none.disabled:bg-grey-200.disabled:cursor-not-allowed.disabled:text-grey-800".split("."),
+var StyledComboboxInput = styled(ComboboxInput, {
+	base: [
+		"bg-white",
+		"bg-(image:--bg-chevron)",
+		"bg-position-[right_--spacing(3)_top_50%,0_0]",
+		"[background-repeat:no-repeat,repeat-x]",
+		"bg-size-[--spacing(5)_auto,100%]",
+		"shadow-none",
+		"appearance-none",
+		"border",
+		"border-grey-700",
+		"rounded-md",
+		"box-border",
+		"text-grey-1000",
+		"cursor-text",
+		"block",
+		"font-body",
+		"h-10",
+		"pl-3",
+		"pr-10",
+		"transition-all",
+		"duration-100",
+		"ease-out",
+		"w-full",
+		"placeholder:opacity-100",
+		"placeholder:text-grey-700",
+		"focus-within:border-primary-800",
+		"focus-within:outline-none",
+		"disabled:bg-grey-200",
+		"disabled:cursor-not-allowed",
+		"disabled:text-grey-800"
+	],
 	variants: {
 		size: {
 			sm: [
@@ -24,12 +54,13 @@ var r = e(n, {
 		},
 		state: { error: ["border", "border-danger"] }
 	}
-}), i = t.forwardRef(({ size: e = "md", ...n }, i) => /* @__PURE__ */ t.createElement(r, {
-	size: e,
-	...n,
-	ref: i
+});
+var ComboboxInput$1 = React$1.forwardRef(({ size = "md", ...rest }, ref) => /* @__PURE__ */ React$1.createElement(StyledComboboxInput, {
+	size,
+	...rest,
+	ref
 }));
 //#endregion
-export { i as ComboboxInput };
+export { ComboboxInput$1 as ComboboxInput };
 
 //# sourceMappingURL=ComboboxInput.js.map

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-white',\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    'border',\n    'border-grey-700',\n    'rounded-md',\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    'focus-within:border-primary-800',\n    'focus-within:outline-none',\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    state: {\n      error: ['border', 'border-danger']\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', ...rest }, ref) => (\n  <StyledComboboxInput\n    size={size as React.ComponentProps<typeof StyledComboboxInput>['size']}\n    {...rest}\n    ref={ref}\n  />\n))\n"],"mappings":";;;;AAKA,IAAa,IAAsB,EAAO,GAAmB;CAC3D,MAAM,2gBA6BL;CAED,UAAU;EACR,MAAM;GACJ,IAAI;IAAC;IAAO;IAAW;IAAgB;GACvC,IAAI;IAAC;IAAQ;IAAW;IAAgB;GACxC,IAAI;IAAC;IAAQ;IAAW;IAAgB;GACzC;EACD,OAAO,EACL,OAAO,CAAC,UAAU,gBAAgB,EACnC;EACF;CACF,CAAC,EAMW,IAAgB,EAAM,YAGhC,EAAE,UAAO,MAAM,GAAG,KAAQ,MAC3B,kBAAA,cAAC,GAAD;CACQ;CACN,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-white',\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    'border',\n    'border-grey-700',\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    'focus-within:border-primary-800',\n    'focus-within:outline-none',\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    state: {\n      error: ['border', 'border-danger']\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', ...rest }, ref) => (\n  <StyledComboboxInput\n    size={size as React.ComponentProps<typeof StyledComboboxInput>['size']}\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;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,OAAO,EACL,OAAO,CAAC,UAAU,gBAAgB,EACnC;EACF;CACF,CAAC;AAMF,IAAa,kBAAgB,QAAM,YAGhC,EAAE,OAAO,MAAM,GAAG,QAAQ,QAC3B,wBAAA,cAAC,qBAAD;CACQ;CACN,GAAI;CACC;CACL,CAAA,CACF"}

package/dist/components/combobox/ComboboxList.js

@@ -1,8 +1,13 @@
-import { styled as e } from "../../styled.js";
-import { ComboboxList as t } from "@reach/combobox";
+import { styled } from "../../styled.js";
+import { ComboboxList } from "@reach/combobox";
 //#region src/components/combobox/ComboboxList.tsx
-var n = e(t, { base: ["select-none"] });
+var ComboboxList$1 = styled(ComboboxList, { base: [
+	"list-none",
+	"m-0",
+	"p-0",
+	"select-none"
+] });
 //#endregion
-export { n as ComboboxList };
+export { ComboboxList$1 as ComboboxList };
 
 //# sourceMappingURL=ComboboxList.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ComboboxList.js","names":[],"sources":["../../../src/components/combobox/ComboboxList.tsx"],"sourcesContent":["import { ComboboxList as BaseComboboxList } from '@reach/combobox'\n\nimport { styled } from '~/styled'\n\nexport const ComboboxList = styled(BaseComboboxList, {\n  base: ['select-none']\n})\n"],"mappings":";;;AAIA,IAAa,IAAe,EAAO,GAAkB,EACnD,MAAM,CAAC,cAAc,EACtB,CAAC"}
+{"version":3,"file":"ComboboxList.js","names":[],"sources":["../../../src/components/combobox/ComboboxList.tsx"],"sourcesContent":["import { ComboboxList as BaseComboboxList } from '@reach/combobox'\n\nimport { styled } from '~/styled'\n\nexport const ComboboxList = styled(BaseComboboxList, {\n  base: ['list-none', 'm-0', 'p-0', 'select-none']\n})\n"],"mappings":";;;AAIA,IAAa,iBAAe,OAAO,cAAkB,EACnD,MAAM;CAAC;CAAa;CAAO;CAAO;CAAc,EACjD,CAAC"}

package/dist/components/combobox/ComboboxOption.js

@@ -1,9 +1,10 @@
-import { styled as e } from "../../styled.js";
-import { ComboboxOption as t } from "@reach/combobox";
+import { styled } from "../../styled.js";
+import { ComboboxOption } from "@reach/combobox";
 //#region src/components/combobox/ComboboxOption.tsx
-var n = e(t, { base: [
+var ComboboxOption$1 = styled(ComboboxOption, { base: [
 	"text-grey-900",
 	"cursor-pointer",
+	"m-0",
 	"p-2",
 	"hover:bg-grey-100",
 	"hover:rounded-sm",
@@ -12,6 +13,6 @@ var n = e(t, { base: [
 	"data-user-value:text-primary-800"
 ] });
 //#endregion
-export { n as ComboboxOption };
+export { ComboboxOption$1 as ComboboxOption };
 
 //# sourceMappingURL=ComboboxOption.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ComboboxOption.js","names":[],"sources":["../../../src/components/combobox/ComboboxOption.tsx"],"sourcesContent":["import { ComboboxOption as BaseComboboxOption } from '@reach/combobox'\n\nimport { styled } from '~/styled'\n\nexport const ComboboxOption = styled(BaseComboboxOption, {\n  base: [\n    'text-grey-900',\n    'cursor-pointer',\n    'p-2',\n    'hover:bg-grey-100',\n    'hover:rounded-sm',\n    'aria-selected:bg-grey-100',\n    'aria-selected:rounded-sm',\n    'data-user-value:text-primary-800'\n  ]\n})\n"],"mappings":";;;AAIA,IAAa,IAAiB,EAAO,GAAoB,EACvD,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EACF,CAAC"}
+{"version":3,"file":"ComboboxOption.js","names":[],"sources":["../../../src/components/combobox/ComboboxOption.tsx"],"sourcesContent":["import { ComboboxOption as BaseComboboxOption } from '@reach/combobox'\n\nimport { styled } from '~/styled'\n\nexport const ComboboxOption = styled(BaseComboboxOption, {\n  base: [\n    'text-grey-900',\n    'cursor-pointer',\n    'm-0',\n    'p-2',\n    'hover:bg-grey-100',\n    'hover:rounded-sm',\n    'aria-selected:bg-grey-100',\n    'aria-selected:rounded-sm',\n    'data-user-value:text-primary-800'\n  ]\n})\n"],"mappings":";;;AAIA,IAAa,mBAAiB,OAAO,gBAAoB,EACvD,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EACF,CAAC"}

package/dist/components/combobox/ComboboxPopover.js

@@ -1,12 +1,13 @@
-import { styled as e } from "../../styled.js";
-import { ComboboxPopover as t } from "@reach/combobox";
+import { styled } from "../../styled.js";
+import { ComboboxPopover } from "@reach/combobox";
 //#region src/components/combobox/ComboboxPopover.tsx
-var n = e(t, { base: [
+var ComboboxPopover$1 = styled(ComboboxPopover, { base: [
 	"bg-white",
 	"border",
 	"border-grey-200",
 	"rounded-md",
 	"shadow-md",
+	"box-border",
 	"font-body",
 	"text-md",
 	"outline-none",
@@ -14,6 +15,6 @@ var n = e(t, { base: [
 	"translate-y-2"
 ] });
 //#endregion
-export { n as ComboboxPopover };
+export { ComboboxPopover$1 as ComboboxPopover };
 
 //# sourceMappingURL=ComboboxPopover.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ComboboxPopover.js","names":[],"sources":["../../../src/components/combobox/ComboboxPopover.tsx"],"sourcesContent":["import { ComboboxPopover as BaseComboboxPopover } from '@reach/combobox'\n\nimport { styled } from '~/styled'\n\nexport const ComboboxPopover = styled(BaseComboboxPopover, {\n  base: [\n    'bg-white',\n    'border',\n    'border-grey-200',\n    'rounded-md',\n    'shadow-md',\n    'font-body',\n    'text-md',\n    'outline-none',\n    'p-1',\n    'translate-y-2'\n  ]\n})\n"],"mappings":";;;AAIA,IAAa,IAAkB,EAAO,GAAqB,EACzD,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EACF,CAAC"}
+{"version":3,"file":"ComboboxPopover.js","names":[],"sources":["../../../src/components/combobox/ComboboxPopover.tsx"],"sourcesContent":["import { ComboboxPopover as BaseComboboxPopover } from '@reach/combobox'\n\nimport { styled } from '~/styled'\n\nexport const ComboboxPopover = styled(BaseComboboxPopover, {\n  base: [\n    'bg-white',\n    'border',\n    'border-grey-200',\n    'rounded-md',\n    'shadow-md',\n    'box-border',\n    'font-body',\n    'text-md',\n    'outline-none',\n    'p-1',\n    'translate-y-2'\n  ]\n})\n"],"mappings":";;;AAIA,IAAa,oBAAkB,OAAO,iBAAqB,EACzD,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EACF,CAAC"}

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

@@ -1,37 +1,53 @@
-import { InlineMessage as e } from "../inline-message/InlineMessage.js";
-import { PasswordField as t } from "../password-field/PasswordField.js";
-import * as n from "react";
-import r from "invariant";
-import { throttle as i } from "throttle-debounce";
-import { useFormContext as a } from "react-hook-form";
+import { InlineMessage } from "../inline-message/InlineMessage.js";
+import { PasswordField } from "../password-field/PasswordField.js";
+import * as React$1 from "react";
+import invariant from "invariant";
+import { throttle } from "throttle-debounce";
+import { useFormContext } from "react-hook-form";
 //#region src/components/create-password-field/CreatePasswordField.tsx
-var o = ({ validate: o, defaultValidation: s, messageDirection: c = "row", label: l = "Create a password", name: u = "password", className: d, validation: f, appearance: p, ...m }) => {
-	let { formState: h, control: g } = a(), [_, v] = n.useState(!1), [y, b] = n.useState(s), x = h.touched[u], S = h.errors[u]?.type === "validate" || Object.values(y).every((e) => !e), C = n.useCallback(async (e) => {
-		let t = await o(e);
-		return t ? (r(typeof t == "object", "The validate function must return an object"), b(t), Object.values(t).every((e) => e)) : !1;
-	}, [b]), w = n.useCallback(i(500, C), [C]), T = (e, t) => e ? "success" : t ? "neutral" : "error", E = g.mode.isOnBlur && (_ || x) || g.mode.isOnSubmit && (_ || h.isSubmitted && S);
-	return /* @__PURE__ */ n.createElement("div", { className: d }, /* @__PURE__ */ n.createElement(t, {
-		label: l,
-		name: u,
-		onChange: (e) => w(e.target.value),
-		onBlur: () => v(!1),
-		onFocus: () => v(!0),
+var CreatePasswordField = ({ validate, defaultValidation, messageDirection = "row", label = "Create a password", name = "password", className, validation, appearance, ...remainingProps }) => {
+	const { formState, control } = useFormContext();
+	const [isFocused, setIsFocused] = React$1.useState(false);
+	const [validationResult, setValidationResult] = React$1.useState(defaultValidation);
+	const touched = formState.touched[name];
+	const error = formState.errors[name]?.type === "validate" || Object.values(validationResult).every((isValid) => !isValid);
+	const validatePassword = React$1.useCallback(async (password) => {
+		const result = await validate(password);
+		if (result) {
+			invariant(typeof result === "object", "The validate function must return an object");
+			setValidationResult(result);
+			return Object.values(result).every((isValid) => isValid);
+		}
+		return false;
+	}, [setValidationResult]);
+	const handleChange = React$1.useCallback(throttle(500, validatePassword), [validatePassword]);
+	const getMessageTheme = (result, isFocused) => {
+		if (result) return "success";
+		return isFocused ? "neutral" : "error";
+	};
+	const showValidation = control.mode.isOnBlur && (isFocused || touched) || control.mode.isOnSubmit && (isFocused || formState.isSubmitted && error);
+	return /* @__PURE__ */ 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: {
-			...f,
-			validate: C
+			...validation,
+			validate: validatePassword
 		},
-		appearance: p,
-		...m
-	}), E && /* @__PURE__ */ n.createElement("div", {
-		style: { "--direction": c },
+		appearance,
+		...remainingProps
+	}), showValidation && /* @__PURE__ */ React$1.createElement("div", {
+		style: { "--direction": messageDirection },
 		className: "direction-(--direction) mt-2 flex flex-wrap gap-2"
-	}, Object.entries(y).map(([t, r]) => /* @__PURE__ */ n.createElement(e, {
-		key: t,
-		theme: T(r, _)
-	}, t))));
+	}, Object.entries(validationResult).map(([message, result]) => /* @__PURE__ */ React$1.createElement(InlineMessage, {
+		key: message,
+		theme: getMessageTheme(result, isFocused)
+	}, message))));
 };
-o.displayName = "CreatePasswordField";
+CreatePasswordField.displayName = "CreatePasswordField";
 //#endregion
-export { o as CreatePasswordField };
+export { CreatePasswordField };
 
 //# sourceMappingURL=CreatePasswordField.js.map

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,KAAuB,EAClC,aACA,sBACA,sBAAmB,OACnB,WAAQ,qBACR,UAAO,YACP,cACA,eACA,eACA,GAAG,QAC2B;CAC9B,IAAM,EAAE,cAAW,eAAY,GAAgB,EACzC,CAAC,GAAW,KAAgB,EAAM,SAAkB,GAAM,EAC1D,CAAC,GAAkB,KACvB,EAAM,SAA2B,EAAkB,EAE/C,IAAmB,EAAU,QAAQ,IACrC,IACJ,EAAU,OAAO,IAAO,SAAS,cACjC,OAAO,OAAO,EAAiB,CAAC,OAAO,MAAY,CAAC,EAAQ,EAExD,IAAmB,EAAM,YAC7B,OAAO,MAAqB;EAC1B,IAAM,IAAS,MAAM,EAAS,EAAS;AAYvC,SAVI,KACF,EACE,OAAO,KAAW,UAClB,8CACD,EAED,EAAoB,EAAO,EACpB,OAAO,OAAO,EAAO,CAAC,OAAO,MAAY,EAAQ,IAGnD;IAET,CAAC,EAAoB,CACtB,EAEK,IAAe,EAAM,YAAY,EAAS,KAAK,EAAiB,EAAE,CACtE,EACD,CAAC,EAEI,KAAmB,GAAiB,MACpC,IAAe,YAEZ,IAAY,YAAY,SAG3B,IACH,EAAQ,KAAK,aAAa,KAAa,MACvC,EAAQ,KAAK,eAAe,KAAc,EAAU,eAAe;AAEtE,QACE,kBAAA,cAAC,OAAD,EAAgB,cA4BV,EA3BJ,kBAAA,cAAC,GAAD;EACS;EACD;EACN,WAAW,MACT,EAAa,EAAE,OAAO,MAAM;EAE9B,cAAc,EAAa,GAAM;EACjC,eAAe,EAAa,GAAK;EACjC,YAAY;GAAE,GAAG;GAAY,UAAU;GAAkB;EAC7C;EACZ,GAAI;EACJ,CAAA,EACD,KACC,kBAAA,cAAC,OAAD;EACE,OAAO,EAAE,eAAe,GAAkB;EAC1C,WAAU;EAUN,EARH,OAAO,QAAQ,EAAiB,CAAC,KAAK,CAAC,GAAS,OAC/C,kBAAA,cAAC,GAAD;EACE,KAAK;EACL,OAAO,EAAgB,GAAQ,EAAU;EAG3B,EADb,EACa,CAChB,CACE,CAEJ;;AAIV,EAAoB,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,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"}

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

@@ -1,42 +1,47 @@
-import { DataTableProvider as e } from "./DataTableContext.js";
-import { DataTableDataCell as t } from "./DataTableDataCell.js";
-import { DataTableRowSelectionCheckbox as n } from "./DataTableRowSelectionCheckbox.js";
-import { DataTableRow as r } from "./DataTableRow.js";
-import { DataTableBody as i } from "./DataTableBody.js";
-import { DataTableMetaData as a } from "./DataTableMetaData.js";
-import { DataTableBulkActions as o } from "./DataTableBulkActions.js";
-import { DataTableBulkActionsFloating as s } from "./DataTableBulkActionsFloating.js";
-import { DataTableEmptyState as c } from "./DataTableEmptyState.js";
-import { DataTableError as l } from "./DataTableError.js";
-import { DataTableGlobalFilter as u } from "./DataTableGlobalFilter.js";
-import { DataTableHeaderCell as d } from "./DataTableHeaderCell.js";
-import { DataTableSelectAllRowsCheckbox as f } from "./DataTableSelectAllRowsCheckbox.js";
-import { DataTableHead as p } from "./DataTableHead.js";
-import { DataTableLoading as m } from "./DataTableLoading.js";
-import { DataTableTable as h } from "./DataTableTable.js";
-import { DragAndDropTable as g } from "./drag-and-drop/DragAndDropTable.js";
-import { Pagination as _ } from "./pagination/Pagination.js";
+import { DataTableProvider } from "./DataTableContext.js";
+import { DataTableDataCell } from "./DataTableDataCell.js";
+import { DataTableRowSelectionCheckbox } from "./DataTableRowSelectionCheckbox.js";
+import { DataTableRow } from "./DataTableRow.js";
+import { DataTableBody } from "./DataTableBody.js";
+import { DataTableMetaData } from "./DataTableMetaData.js";
+import { DataTableBulkActions } from "./DataTableBulkActions.js";
+import { DataTableBulkActionsFloating } from "./DataTableBulkActionsFloating.js";
+import { DataTableEmptyState } from "./DataTableEmptyState.js";
+import { DataTableError } from "./DataTableError.js";
+import { DataTableGlobalFilter } from "./DataTableGlobalFilter.js";
+import { DataTableHeaderCell } from "./DataTableHeaderCell.js";
+import { DataTableSelectAllRowsCheckbox } from "./DataTableSelectAllRowsCheckbox.js";
+import { DataTableHead } from "./DataTableHead.js";
+import { DataTableLoading } from "./DataTableLoading.js";
+import { DataTableTable } from "./DataTableTable.js";
+import { DragAndDropTable } from "./drag-and-drop/DragAndDropTable.js";
+import { Pagination } from "./pagination/Pagination.js";
 //#region src/components/data-table/DataTable.tsx
-var v = Object.assign(e, {
-	Body: i,
-	DataCell: t,
-	DragAndDropTable: g,
-	GlobalFilter: u,
-	Head: p,
-	HeaderCell: d,
-	MetaData: a,
-	Pagination: _,
-	Row: r,
-	Table: h,
-	Loading: m,
-	Error: l,
-	EmptyState: c,
-	SelectAllRowsCheckbox: f,
-	RowSelectionCheckbox: n,
-	BulkActions: o,
-	BulkActionsFloating: s
+/** Context provider for DataTable state and logic.
+*
+* Children can call `useDataTable` to access everything provided by `@tanstack/react-table` plus
+* the functionality we've built on top.
+*/
+var DataTable = Object.assign(DataTableProvider, {
+	Body: DataTableBody,
+	DataCell: DataTableDataCell,
+	DragAndDropTable,
+	GlobalFilter: DataTableGlobalFilter,
+	Head: DataTableHead,
+	HeaderCell: DataTableHeaderCell,
+	MetaData: DataTableMetaData,
+	Pagination,
+	Row: DataTableRow,
+	Table: DataTableTable,
+	Loading: DataTableLoading,
+	Error: DataTableError,
+	EmptyState: DataTableEmptyState,
+	SelectAllRowsCheckbox: DataTableSelectAllRowsCheckbox,
+	RowSelectionCheckbox: DataTableRowSelectionCheckbox,
+	BulkActions: DataTableBulkActions,
+	BulkActionsFloating: DataTableBulkActionsFloating
 });
 //#endregion
-export { v as DataTable };
+export { DataTable };
 
 //# sourceMappingURL=DataTable.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"DataTable.js","names":[],"sources":["../../../src/components/data-table/DataTable.tsx"],"sourcesContent":["import { DataTableBody } from './DataTableBody'\nimport { DataTableBulkActions } from './DataTableBulkActions'\nimport { DataTableBulkActionsFloating } from './DataTableBulkActionsFloating'\nimport { DataTableProvider } from './DataTableContext'\nimport { DataTableDataCell } from './DataTableDataCell'\nimport { DataTableEmptyState } from './DataTableEmptyState'\nimport { DataTableError } from './DataTableError'\nimport { DataTableGlobalFilter } from './DataTableGlobalFilter'\nimport { DataTableHead } from './DataTableHead'\nimport { DataTableHeaderCell } from './DataTableHeaderCell'\nimport { DataTableLoading } from './DataTableLoading'\nimport { DataTableMetaData } from './DataTableMetaData'\nimport { DataTableRow } from './DataTableRow'\nimport { DataTableRowSelectionCheckbox } from './DataTableRowSelectionCheckbox'\nimport { DataTableSelectAllRowsCheckbox } from './DataTableSelectAllRowsCheckbox'\nimport { DataTableTable } from './DataTableTable'\nimport { DragAndDropTable } from './drag-and-drop/DragAndDropTable'\nimport { Pagination } from './pagination/Pagination'\n\n/** Context provider for DataTable state and logic.\n *\n * Children can call `useDataTable` to access everything provided by `@tanstack/react-table` plus\n * the functionality we've built on top.\n */\nexport const DataTable = Object.assign(DataTableProvider, {\n  /** Default table body implementation for `DataTable`.\n   *\n   * Can be configured with alternating colours of rows. If you need more customisation options,\n   * you can build your own implementation with `useDataTable()` and the UI-only `Table` components.\n   */\n  Body: DataTableBody,\n\n  /** Default table data cell implementation for `DataTable`\n   *\n   *\n   */\n  DataCell: DataTableDataCell,\n\n  /**\n   * Used in place of `DataTable.Table` to render a table with rows that the user can sort by drag-and-drop\n   */\n  DragAndDropTable: DragAndDropTable,\n\n  /** Default global search implementation for `DataTable`\n   *\n   * If you need more customisation options, you can compose your own implementation with our UI-only input components and `useDataTable`.\n   */\n  GlobalFilter: DataTableGlobalFilter,\n\n  /** Default table head implementation\n   *\n   * Can be configured to be sortable and with different visual themes.\n   * If you need more customisation options, you can build your own implementation\n   * with `useDataTable` and the UI-only `Table` components.\n   */\n  Head: DataTableHead,\n\n  /** Default header implementation for `DataTable`\n   *\n   * Can be configured to make the column sortable. If you need more customisation options,\n   * you can build your own implementation with the UI-only `Table` components.\n   */\n  HeaderCell: DataTableHeaderCell,\n\n  /** Default pagination implementation for `DataTable`\n   *\n   * Can navigate forward, backward, or to any specific page. If you need more customisation options,\n   * you can build your own implementation with `useDataTable` and other UI components.\n   *\n   */\n  MetaData: DataTableMetaData,\n\n  /** Default display of amount of items and current sorting status for 'DataTable'\n   *\n   */\n  Pagination: Pagination,\n\n  /** Default row implementation for `DataTable`\n   *\n   * Renders all visible cells as `Table.Cell`. If you need more customisation options,\n   * you can build your own implementation with the UI-only `Table` components.\n   */\n  Row: DataTableRow,\n\n  /** Default table implementation for `DataTable`.\n   *\n   * Can be configured with sortable columns and different visual themes.\n   *\n   * If you need more customisation options, you can compose your own implementation with\n   * lower-level `DataTable` components or build the whole thing from\n   * scratch with `useDataTable` and the UI-only `Table` components.\n   *\n   */\n  Table: DataTableTable,\n\n  /** Default loading implementation for remote data\n   *\n   * Renders a loading component while fetching the paginated data using `getAsyncData`.\n   *\n   * If you need more customisation, you can compose your own implentation, `asyncDataState`\n   * can be retrieved from `useDataTable`\n   */\n  Loading: DataTableLoading,\n\n  /** Default error implementation for remote data\n   *\n   * Renders an error component when `getAsyncData` promise rejects.\n   * Children are rendered as a function, it exposes a `runAsyncData` function to the children component.\n   * `runAsyncData()` can be used to retry fetching the paginated data with the current pageIndex, pageSize\n   * and sorting parameters or your own custom paginated options.\n   *\n   * If you need more customisation, you can compose your own implentation, `asyncDataState` and `runAsyncData()`\n   * can be retrieved from `useDataTable`\n   *\n   */\n  Error: DataTableError,\n\n  /** Empty state implementation for `DataTable`.\n   *\n   * Extends the EmptyState component\n   */\n  EmptyState: DataTableEmptyState,\n\n  /** Select all rows checkbox.\n   *\n   * Renders a checkbox on the header, allowing for bulk selection/deselection of all selectable rows\n   */\n  SelectAllRowsCheckbox: DataTableSelectAllRowsCheckbox,\n\n  /** Individual row selection checkbox.\n   *\n   * Renders a checkbox on each row, allowing for individual selection/deselection of any selectable row\n   */\n  RowSelectionCheckbox: DataTableRowSelectionCheckbox,\n\n  /** Bulk actions for selected rows.\n   *\n   * Renders a toolbar with actions that can be applied to all selected rows\n   */\n  BulkActions: DataTableBulkActions,\n\n  /** Bulk actions for selected rows.\n   *\n   * Renders a toolbar with actions that can be applied to all selected rows\n   */\n  BulkActionsFloating: DataTableBulkActionsFloating\n})\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAwBA,IAAa,IAAY,OAAO,OAAO,GAAmB;CAMxD,MAAM;CAMN,UAAU;CAKQ;CAMlB,cAAc;CAQd,MAAM;CAON,YAAY;CAQZ,UAAU;CAKE;CAOZ,KAAK;CAWL,OAAO;CASP,SAAS;CAaT,OAAO;CAMP,YAAY;CAMZ,uBAAuB;CAMvB,sBAAsB;CAMtB,aAAa;CAMb,qBAAqB;CACtB,CAAC"}
+{"version":3,"file":"DataTable.js","names":[],"sources":["../../../src/components/data-table/DataTable.tsx"],"sourcesContent":["import { DataTableBody } from './DataTableBody'\nimport { DataTableBulkActions } from './DataTableBulkActions'\nimport { DataTableBulkActionsFloating } from './DataTableBulkActionsFloating'\nimport { DataTableProvider } from './DataTableContext'\nimport { DataTableDataCell } from './DataTableDataCell'\nimport { DataTableEmptyState } from './DataTableEmptyState'\nimport { DataTableError } from './DataTableError'\nimport { DataTableGlobalFilter } from './DataTableGlobalFilter'\nimport { DataTableHead } from './DataTableHead'\nimport { DataTableHeaderCell } from './DataTableHeaderCell'\nimport { DataTableLoading } from './DataTableLoading'\nimport { DataTableMetaData } from './DataTableMetaData'\nimport { DataTableRow } from './DataTableRow'\nimport { DataTableRowSelectionCheckbox } from './DataTableRowSelectionCheckbox'\nimport { DataTableSelectAllRowsCheckbox } from './DataTableSelectAllRowsCheckbox'\nimport { DataTableTable } from './DataTableTable'\nimport { DragAndDropTable } from './drag-and-drop/DragAndDropTable'\nimport { Pagination } from './pagination/Pagination'\n\n/** Context provider for DataTable state and logic.\n *\n * Children can call `useDataTable` to access everything provided by `@tanstack/react-table` plus\n * the functionality we've built on top.\n */\nexport const DataTable = Object.assign(DataTableProvider, {\n  /** Default table body implementation for `DataTable`.\n   *\n   * Can be configured with alternating colours of rows. If you need more customisation options,\n   * you can build your own implementation with `useDataTable()` and the UI-only `Table` components.\n   */\n  Body: DataTableBody,\n\n  /** Default table data cell implementation for `DataTable`\n   *\n   *\n   */\n  DataCell: DataTableDataCell,\n\n  /**\n   * Used in place of `DataTable.Table` to render a table with rows that the user can sort by drag-and-drop\n   */\n  DragAndDropTable: DragAndDropTable,\n\n  /** Default global search implementation for `DataTable`\n   *\n   * If you need more customisation options, you can compose your own implementation with our UI-only input components and `useDataTable`.\n   */\n  GlobalFilter: DataTableGlobalFilter,\n\n  /** Default table head implementation\n   *\n   * Can be configured to be sortable and with different visual themes.\n   * If you need more customisation options, you can build your own implementation\n   * with `useDataTable` and the UI-only `Table` components.\n   */\n  Head: DataTableHead,\n\n  /** Default header implementation for `DataTable`\n   *\n   * Can be configured to make the column sortable. If you need more customisation options,\n   * you can build your own implementation with the UI-only `Table` components.\n   */\n  HeaderCell: DataTableHeaderCell,\n\n  /** Default pagination implementation for `DataTable`\n   *\n   * Can navigate forward, backward, or to any specific page. If you need more customisation options,\n   * you can build your own implementation with `useDataTable` and other UI components.\n   *\n   */\n  MetaData: DataTableMetaData,\n\n  /** Default display of amount of items and current sorting status for 'DataTable'\n   *\n   */\n  Pagination: Pagination,\n\n  /** Default row implementation for `DataTable`\n   *\n   * Renders all visible cells as `Table.Cell`. If you need more customisation options,\n   * you can build your own implementation with the UI-only `Table` components.\n   */\n  Row: DataTableRow,\n\n  /** Default table implementation for `DataTable`.\n   *\n   * Can be configured with sortable columns and different visual themes.\n   *\n   * If you need more customisation options, you can compose your own implementation with\n   * lower-level `DataTable` components or build the whole thing from\n   * scratch with `useDataTable` and the UI-only `Table` components.\n   *\n   */\n  Table: DataTableTable,\n\n  /** Default loading implementation for remote data\n   *\n   * Renders a loading component while fetching the paginated data using `getAsyncData`.\n   *\n   * If you need more customisation, you can compose your own implentation, `asyncDataState`\n   * can be retrieved from `useDataTable`\n   */\n  Loading: DataTableLoading,\n\n  /** Default error implementation for remote data\n   *\n   * Renders an error component when `getAsyncData` promise rejects.\n   * Children are rendered as a function, it exposes a `runAsyncData` function to the children component.\n   * `runAsyncData()` can be used to retry fetching the paginated data with the current pageIndex, pageSize\n   * and sorting parameters or your own custom paginated options.\n   *\n   * If you need more customisation, you can compose your own implentation, `asyncDataState` and `runAsyncData()`\n   * can be retrieved from `useDataTable`\n   *\n   */\n  Error: DataTableError,\n\n  /** Empty state implementation for `DataTable`.\n   *\n   * Extends the EmptyState component\n   */\n  EmptyState: DataTableEmptyState,\n\n  /** Select all rows checkbox.\n   *\n   * Renders a checkbox on the header, allowing for bulk selection/deselection of all selectable rows\n   */\n  SelectAllRowsCheckbox: DataTableSelectAllRowsCheckbox,\n\n  /** Individual row selection checkbox.\n   *\n   * Renders a checkbox on each row, allowing for individual selection/deselection of any selectable row\n   */\n  RowSelectionCheckbox: DataTableRowSelectionCheckbox,\n\n  /** Bulk actions for selected rows.\n   *\n   * Renders a toolbar with actions that can be applied to all selected rows\n   */\n  BulkActions: DataTableBulkActions,\n\n  /** Bulk actions for selected rows.\n   *\n   * Renders a toolbar with actions that can be applied to all selected rows\n   */\n  BulkActionsFloating: DataTableBulkActionsFloating\n})\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAwBA,IAAa,YAAY,OAAO,OAAO,mBAAmB;CAMxD,MAAM;CAMN,UAAU;CAKQ;CAMlB,cAAc;CAQd,MAAM;CAON,YAAY;CAQZ,UAAU;CAKE;CAOZ,KAAK;CAWL,OAAO;CASP,SAAS;CAaT,OAAO;CAMP,YAAY;CAMZ,uBAAuB;CAMvB,sBAAsB;CAMtB,aAAa;CAMb,qBAAqB;CACtB,CAAC"}

package/dist/components/data-table/DataTable.types.js

@@ -1,8 +1,12 @@
 //#region src/components/data-table/DataTable.types.ts
-var e = /* @__PURE__ */ function(e) {
-	return e.NONE = "none", e.PENDING = "pending", e.FULFILLED = "fulfilled", e.REJECTED = "rejected", e;
+var AsyncDataState = /* @__PURE__ */ function(AsyncDataState) {
+	AsyncDataState["NONE"] = "none";
+	AsyncDataState["PENDING"] = "pending";
+	AsyncDataState["FULFILLED"] = "fulfilled";
+	AsyncDataState["REJECTED"] = "rejected";
+	return AsyncDataState;
 }({});
 //#endregion
-export { e as AsyncDataState };
+export { AsyncDataState };
 
 //# sourceMappingURL=DataTable.types.js.map

package/dist/components/data-table/DataTable.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataTable.types.js","names":[],"sources":["../../../src/components/data-table/DataTable.types.ts"],"sourcesContent":["import type {\n  ColumnOrderTableState,\n  ColumnPinningTableState,\n  ColumnSizingTableState,\n  ExpandedTableState,\n  FiltersTableState,\n  GroupingTableState,\n  PaginationTableState,\n  Row,\n  RowSelectionState,\n  RowSelectionTableState,\n  SortDirection,\n  SortingTableState,\n  Table,\n  VisibilityTableState\n} from '@tanstack/react-table'\nimport * as React from 'react'\n\nexport enum AsyncDataState {\n  NONE = 'none',\n  PENDING = 'pending',\n  FULFILLED = 'fulfilled',\n  REJECTED = 'rejected'\n}\n\nexport type TAsyncDataResult = {\n  total: number\n  results: TableData\n}\n\nexport type TAsyncDataOptions = {\n  pageIndex: number\n  pageSize: number\n  sortBy?: string\n  sortDirection?: SortDirection\n  globalFilter?: string\n}\n\nexport type TGetAsyncData = (\n  options: TAsyncDataOptions\n) => Promise<TAsyncDataResult | undefined>\n\nexport type TablePosition = {\n  top: number | null\n  bottom: number | null\n  offsetTop: number\n  isVisible: boolean\n}\n\nexport type DataTableContextType<T = unknown> = Table<T> & {\n  setIsSortable: React.Dispatch<React.SetStateAction<boolean>>\n  applyPagination: () => void\n  getTotalRows: () => number\n  isSortable: boolean\n  asyncDataState?: AsyncDataState\n  runAsyncData?: (options: Partial<TAsyncDataOptions>) => Promise<void>\n  hasAsyncData: boolean\n  disabledRows?: Record<string, boolean>\n  enableRowSelection?: boolean | ((row: Row<unknown>) => boolean)\n  rowSelection: RowSelectionState\n  tablePosition?: TablePosition\n  setTablePosition: React.Dispatch<React.SetStateAction<TablePosition>>\n  data: TAsyncDataResult\n  columns: any\n  tableId: string\n  /**\n   * Directly update the data array that the table rows are built from.\n   * This is useful when re-ordering rows, but is high-risk if you're not sure what you're doing!\n   *\n   *  Note in particular that this value is also updated if you update the value of the `DataTable`'s `data` prop\n   *  — it's probably best to only use one of those two methods for any given table.\n   */\n  setData: React.Dispatch<React.SetStateAction<TAsyncDataResult>>\n}\n\nexport type TableData = Array<Record<string, unknown>>\n\nexport type InitialState = Partial<\n  VisibilityTableState &\n    ColumnOrderTableState &\n    ColumnPinningTableState &\n    FiltersTableState &\n    SortingTableState &\n    ExpandedTableState &\n    GroupingTableState &\n    ColumnSizingTableState &\n    PaginationTableState &\n    RowSelectionTableState\n>\n\nexport type TDefaultSort = { column: string; direction: SortDirection }\n"],"mappings":";AAkBA,IAAY,IAAL,yBAAA,GAAA;QACL,EAAA,OAAA,QACA,EAAA,UAAA,WACA,EAAA,YAAA,aACA,EAAA,WAAA;KACD"}
+{"version":3,"file":"DataTable.types.js","names":[],"sources":["../../../src/components/data-table/DataTable.types.ts"],"sourcesContent":["import type {\n  ColumnOrderTableState,\n  ColumnPinningTableState,\n  ColumnSizingTableState,\n  ExpandedTableState,\n  FiltersTableState,\n  GroupingTableState,\n  PaginationTableState,\n  Row,\n  RowSelectionState,\n  RowSelectionTableState,\n  SortDirection,\n  SortingTableState,\n  Table,\n  VisibilityTableState\n} from '@tanstack/react-table'\nimport * as React from 'react'\n\nexport enum AsyncDataState {\n  NONE = 'none',\n  PENDING = 'pending',\n  FULFILLED = 'fulfilled',\n  REJECTED = 'rejected'\n}\n\nexport type TAsyncDataResult = {\n  total: number\n  results: TableData\n}\n\nexport type TAsyncDataOptions = {\n  pageIndex: number\n  pageSize: number\n  sortBy?: string\n  sortDirection?: SortDirection\n  globalFilter?: string\n}\n\nexport type TGetAsyncData = (\n  options: TAsyncDataOptions\n) => Promise<TAsyncDataResult | undefined>\n\nexport type TablePosition = {\n  top: number | null\n  bottom: number | null\n  offsetTop: number\n  isVisible: boolean\n}\n\nexport type DataTableContextType<T = unknown> = Table<T> & {\n  setIsSortable: React.Dispatch<React.SetStateAction<boolean>>\n  applyPagination: () => void\n  getTotalRows: () => number\n  isSortable: boolean\n  asyncDataState?: AsyncDataState\n  runAsyncData?: (options: Partial<TAsyncDataOptions>) => Promise<void>\n  hasAsyncData: boolean\n  disabledRows?: Record<string, boolean>\n  enableRowSelection?: boolean | ((row: Row<unknown>) => boolean)\n  rowSelection: RowSelectionState\n  tablePosition?: TablePosition\n  setTablePosition: React.Dispatch<React.SetStateAction<TablePosition>>\n  data: TAsyncDataResult\n  columns: any\n  tableId: string\n  /**\n   * Directly update the data array that the table rows are built from.\n   * This is useful when re-ordering rows, but is high-risk if you're not sure what you're doing!\n   *\n   *  Note in particular that this value is also updated if you update the value of the `DataTable`'s `data` prop\n   *  — it's probably best to only use one of those two methods for any given table.\n   */\n  setData: React.Dispatch<React.SetStateAction<TAsyncDataResult>>\n}\n\nexport type TableData = Array<Record<string, unknown>>\n\nexport type InitialState = Partial<\n  VisibilityTableState &\n    ColumnOrderTableState &\n    ColumnPinningTableState &\n    FiltersTableState &\n    SortingTableState &\n    ExpandedTableState &\n    GroupingTableState &\n    ColumnSizingTableState &\n    PaginationTableState &\n    RowSelectionTableState\n>\n\nexport type TDefaultSort = { column: string; direction: SortDirection }\n"],"mappings":";AAkBA,IAAY,iBAAL,yBAAA,gBAAA;AACL,gBAAA,UAAA;AACA,gBAAA,aAAA;AACA,gBAAA,eAAA;AACA,gBAAA,cAAA;;KACD"}

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

@@ -1,20 +1,22 @@
-import { Table as e } from "../table/Table.js";
-import { useDataTable as t } from "./DataTableContext.js";
-import { DataTableRow as n } from "./DataTableRow.js";
-import * as r from "react";
+import { Table } from "../table/Table.js";
+import { useDataTable } from "./DataTableContext.js";
+import { DataTableRow } from "./DataTableRow.js";
+import * as React$1 from "react";
 //#region src/components/data-table/DataTableBody.tsx
-var i = ({ striped: i = !1, rowAction: a, ...o }) => {
-	let { getRowModel: s } = t();
-	return /* @__PURE__ */ r.createElement(e.Body, {
-		...o,
-		striped: i
-	}, s().rows.map((e) => /* @__PURE__ */ r.createElement(n, {
-		row: e,
-		key: e.id,
-		rowAction: a
-	})));
+var DataTableBody = ({ striped = false, rowAction, ...props }) => {
+	const { getRowModel } = useDataTable();
+	return /* @__PURE__ */ React$1.createElement(Table.Body, {
+		...props,
+		striped
+	}, getRowModel().rows.map((row) => {
+		return /* @__PURE__ */ React$1.createElement(DataTableRow, {
+			row,
+			key: row.id,
+			rowAction
+		});
+	}));
 };
 //#endregion
-export { i as DataTableBody };
+export { DataTableBody };
 
 //# sourceMappingURL=DataTableBody.js.map

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,KAAiB,EAC5B,aAAU,IACV,cACA,GAAG,QACqB;CACxB,IAAM,EAAE,mBAAgB,GAAc;AAEtC,QACE,kBAAA,cAAC,EAAM,MAAP;EAAY,GAAI;EAAgB;EAInB,EAHV,GAAa,CAAC,KAAK,KAAK,MAChB,kBAAA,cAAC,GAAD;EAAmB;EAAK,KAAK,EAAI;EAAe;EAAa,CAAA,CACpE,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,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"}