@atom-learning/components 6.17.0 → 8.0.0

package/dist/components/password-input/PasswordInput.js

@@ -5,27 +5,32 @@ import { Input } from "../input/Input.js";
 import { getFieldIconSize } from "../../utilities/style/get-icon-size.js";
 import * as React$1 from "react";
 import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Eye, EyeCrossed } from "@atom-learning/icons";
 //#region src/components/password-input/PasswordInput.tsx
 var PasswordInput = React$1.forwardRef(({ className, hidePasswordText = "Hide password", showPasswordText = "Show password", size = "md", ...restProps }, ref) => {
 	const [isPasswordVisible, setIsPasswordVisible] = useState(false);
 	const togglePasswordVisibility = () => setIsPasswordVisible((currentState) => !currentState);
 	const iconSize = React$1.useMemo(() => getFieldIconSize(size), [size]);
-	return /* @__PURE__ */ React$1.createElement("div", { className: cn("relative", className) }, /* @__PURE__ */ React$1.createElement(Input, {
-		...restProps,
-		size,
-		type: isPasswordVisible ? "text" : "password",
-		ref,
-		className: "pr-6"
-	}), /* @__PURE__ */ React$1.createElement(ActionIcon, {
-		appearance: "simple",
-		theme: "neutral",
-		label: isPasswordVisible ? hidePasswordText : showPasswordText,
-		onClick: togglePasswordVisibility,
-		onMouseDown: (e) => e.preventDefault(),
-		size: iconSize,
-		className: cn(size === "lg" ? "bottom-1" : "bottom-0", "absolute", "right-0")
-	}, /* @__PURE__ */ React$1.createElement(Icon, { is: isPasswordVisible ? Eye : EyeCrossed })));
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("relative", className),
+		children: [/* @__PURE__ */ jsx(Input, {
+			...restProps,
+			size,
+			type: isPasswordVisible ? "text" : "password",
+			ref,
+			className: "pr-6"
+		}), /* @__PURE__ */ jsx(ActionIcon, {
+			appearance: "simple",
+			theme: "neutral",
+			label: isPasswordVisible ? hidePasswordText : showPasswordText,
+			onClick: togglePasswordVisibility,
+			onMouseDown: (e) => e.preventDefault(),
+			size: iconSize,
+			className: cn(size === "lg" ? "bottom-1" : "bottom-0", "absolute", "right-0"),
+			children: /* @__PURE__ */ jsx(Icon, { is: isPasswordVisible ? Eye : EyeCrossed })
+		})]
+	});
 });
 PasswordInput.displayName = "PasswordInput";
 //#endregion

package/dist/components/password-input/PasswordInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"PasswordInput.js","names":[],"sources":["../../../src/components/password-input/PasswordInput.tsx"],"sourcesContent":["import { Eye, EyeCrossed } from '@atom-learning/icons'\nimport * as React from 'react'\nimport { useState } from 'react'\n\nimport { ActionIcon } from '~/components/action-icon/ActionIcon'\nimport { Icon } from '~/components/icon/Icon'\nimport type { InputProps } from '~/components/input/Input'\nimport { Input } from '~/components/input/Input'\nimport { cn } from '~/styled'\nimport { getFieldIconSize } from '~/utilities/style/get-icon-size'\n\ntype PasswordInputProps = Omit<InputProps, 'type'> & {\n  hidePasswordText?: string\n  showPasswordText?: string\n}\n\nexport const PasswordInput = React.forwardRef<\n  HTMLInputElement,\n  PasswordInputProps\n>(\n  (\n    {\n      className,\n      hidePasswordText = 'Hide password',\n      showPasswordText = 'Show password',\n      size = 'md',\n      ...restProps\n    },\n    ref\n  ) => {\n    const [isPasswordVisible, setIsPasswordVisible] = useState<boolean>(false)\n    const togglePasswordVisibility = () =>\n      setIsPasswordVisible((currentState) => !currentState)\n\n    const iconSize = React.useMemo(() => getFieldIconSize(size), [size])\n\n    return (\n      <div className={cn('relative', className)}>\n        <Input\n          {...restProps}\n          size={size}\n          type={isPasswordVisible ? 'text' : 'password'}\n          ref={ref}\n          className=\"pr-6\"\n        />\n        <ActionIcon\n          appearance=\"simple\"\n          theme=\"neutral\"\n          label={isPasswordVisible ? hidePasswordText : showPasswordText}\n          onClick={togglePasswordVisibility}\n          onMouseDown={(e) => e.preventDefault()} // prevent focus being lost from password input\n          size={iconSize}\n          className={cn(\n            size === 'lg' ? 'bottom-1' : 'bottom-0',\n            'absolute',\n            'right-0'\n          )}\n        >\n          <Icon is={isPasswordVisible ? Eye : EyeCrossed} />\n        </ActionIcon>\n      </div>\n    )\n  }\n)\n\nPasswordInput.displayName = 'PasswordInput'\n"],"mappings":";;;;;;;;;AAgBA,IAAa,gBAAgB,QAAM,YAK/B,EACE,WACA,mBAAmB,iBACnB,mBAAmB,iBACnB,OAAO,MACP,GAAG,aAEL,QACG;CACH,MAAM,CAAC,mBAAmB,wBAAwB,SAAkB,MAAM;CAC1E,MAAM,iCACJ,sBAAsB,iBAAiB,CAAC,aAAa;CAEvD,MAAM,WAAW,QAAM,cAAc,iBAAiB,KAAK,EAAE,CAAC,KAAK,CAAC;AAEpE,QACE,wBAAA,cAAC,OAAD,EAAK,WAAW,GAAG,YAAY,UAAU,EAuBnC,EAtBJ,wBAAA,cAAC,OAAD;EACE,GAAI;EACE;EACN,MAAM,oBAAoB,SAAS;EAC9B;EACL,WAAU;EACV,CAAA,EACF,wBAAA,cAAC,YAAD;EACE,YAAW;EACX,OAAM;EACN,OAAO,oBAAoB,mBAAmB;EAC9C,SAAS;EACT,cAAc,MAAM,EAAE,gBAAgB;EACtC,MAAM;EACN,WAAW,GACT,SAAS,OAAO,aAAa,YAC7B,YACA,UACD;EAGU,EADX,wBAAA,cAAC,MAAD,EAAM,IAAI,oBAAoB,MAAM,YAAc,CAAA,CACvC,CACT;EAGX;AAED,cAAc,cAAc"}
+{"version":3,"file":"PasswordInput.js","names":[],"sources":["../../../src/components/password-input/PasswordInput.tsx"],"sourcesContent":["import { Eye, EyeCrossed } from '@atom-learning/icons'\nimport * as React from 'react'\nimport { useState } from 'react'\n\nimport { ActionIcon } from '~/components/action-icon/ActionIcon'\nimport { Icon } from '~/components/icon/Icon'\nimport type { InputProps } from '~/components/input/Input'\nimport { Input } from '~/components/input/Input'\nimport { cn } from '~/styled'\nimport { getFieldIconSize } from '~/utilities/style/get-icon-size'\n\ntype PasswordInputProps = Omit<InputProps, 'type'> & {\n  hidePasswordText?: string\n  showPasswordText?: string\n}\n\nexport const PasswordInput = React.forwardRef<\n  HTMLInputElement,\n  PasswordInputProps\n>(\n  (\n    {\n      className,\n      hidePasswordText = 'Hide password',\n      showPasswordText = 'Show password',\n      size = 'md',\n      ...restProps\n    },\n    ref\n  ) => {\n    const [isPasswordVisible, setIsPasswordVisible] = useState<boolean>(false)\n    const togglePasswordVisibility = () =>\n      setIsPasswordVisible((currentState) => !currentState)\n\n    const iconSize = React.useMemo(() => getFieldIconSize(size), [size])\n\n    return (\n      <div className={cn('relative', className)}>\n        <Input\n          {...restProps}\n          size={size}\n          type={isPasswordVisible ? 'text' : 'password'}\n          ref={ref}\n          className=\"pr-6\"\n        />\n        <ActionIcon\n          appearance=\"simple\"\n          theme=\"neutral\"\n          label={isPasswordVisible ? hidePasswordText : showPasswordText}\n          onClick={togglePasswordVisibility}\n          onMouseDown={(e) => e.preventDefault()} // prevent focus being lost from password input\n          size={iconSize}\n          className={cn(\n            size === 'lg' ? 'bottom-1' : 'bottom-0',\n            'absolute',\n            'right-0'\n          )}\n        >\n          <Icon is={isPasswordVisible ? Eye : EyeCrossed} />\n        </ActionIcon>\n      </div>\n    )\n  }\n)\n\nPasswordInput.displayName = 'PasswordInput'\n"],"mappings":";;;;;;;;;;AAgBA,IAAa,gBAAgB,QAAM,YAK/B,EACE,WACA,mBAAmB,iBACnB,mBAAmB,iBACnB,OAAO,MACP,GAAG,aAEL,QACG;CACH,MAAM,CAAC,mBAAmB,wBAAwB,SAAkB,MAAM;CAC1E,MAAM,iCACJ,sBAAsB,iBAAiB,CAAC,aAAa;CAEvD,MAAM,WAAW,QAAM,cAAc,iBAAiB,KAAK,EAAE,CAAC,KAAK,CAAC;AAEpE,QACE,qBAAC,OAAD;EAAK,WAAW,GAAG,YAAY,UAAU;YAAzC,CACE,oBAAC,OAAD;GACE,GAAI;GACE;GACN,MAAM,oBAAoB,SAAS;GAC9B;GACL,WAAU;GACV,CAAA,EACF,oBAAC,YAAD;GACE,YAAW;GACX,OAAM;GACN,OAAO,oBAAoB,mBAAmB;GAC9C,SAAS;GACT,cAAc,MAAM,EAAE,gBAAgB;GACtC,MAAM;GACN,WAAW,GACT,SAAS,OAAO,aAAa,YAC7B,YACA,UACD;aAED,oBAAC,MAAD,EAAM,IAAI,oBAAoB,MAAM,YAAc,CAAA;GACvC,CAAA,CACT;;EAGX;AAED,cAAc,cAAc"}

package/dist/components/popover/Popover.d.ts

@@ -1,5 +1,7 @@
 export declare const Popover: import("react").FC<import("@radix-ui/react-popover").PopoverProps> & {
-    Content: ({ children, side, sideOffset, closePopoverText, showCloseButton, size, ...remainingProps }: Omit<import("@radix-ui/react-popover").PopoverContentProps & import("react").RefAttributes<HTMLDivElement>, "size"> & {
+    Content: ({ children, side, sideOffset, closePopoverText, showCloseButton, size, ...remainingProps }: Omit<Omit<import("@radix-ui/react-popover").PopoverContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
+        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" | undefined;
     } & {
         as?: import("react").ElementType;

package/dist/components/popover/PopoverContent.d.ts

@@ -1,6 +1,8 @@
 import { Content } from '@radix-ui/react-popover';
 import * as React from 'react';
-declare const StyledContent: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-popover").PopoverContentProps & React.RefAttributes<HTMLDivElement>, "size"> & {
+declare const StyledContent: React.ForwardRefExoticComponent<Omit<Omit<import("@radix-ui/react-popover").PopoverContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    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;
+}, "size"> & {
     size?: "sm" | "md" | "lg" | undefined;
 } & {
     as?: React.ElementType;

package/dist/components/popover/PopoverContent.js

@@ -1,7 +1,8 @@
 import { styled } from "../../styled.js";
 import { Icon } from "../icon/Icon.js";
 import { ActionIcon } from "../action-icon/ActionIcon.js";
-import * as React$1 from "react";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Close } from "@atom-learning/icons";
 import { Arrow, Close as Close$1, Content } from "@radix-ui/react-popover";
 //#region src/components/popover/PopoverContent.tsx
@@ -37,22 +38,28 @@ var StyledArrow = styled(Arrow, { base: [
 	"z-1",
 	"in-data-[align=end]:mx-6"
 ] });
-var PopoverContent = ({ children, side = "top", sideOffset = 8, closePopoverText = "Close popover", showCloseButton = true, size = "md", ...remainingProps }) => /* @__PURE__ */ React$1.createElement(StyledContent, {
+var PopoverContent = ({ children, side = "top", sideOffset = 8, closePopoverText = "Close popover", showCloseButton = true, size = "md", ...remainingProps }) => /* @__PURE__ */ jsxs(StyledContent, {
 	size,
 	side,
 	sideOffset,
-	...remainingProps
-}, showCloseButton && /* @__PURE__ */ React$1.createElement(ActionIcon, {
-	as: Close$1,
-	label: closePopoverText,
-	size: "md",
-	hasTooltip: false,
-	theme: "neutral",
-	className: "absolute top-0.5 right-0.5"
-}, /* @__PURE__ */ React$1.createElement(Icon, { is: Close })), children, /* @__PURE__ */ React$1.createElement(StyledArrow, {
-	width: 16,
-	height: 8
-}));
+	...remainingProps,
+	children: [
+		showCloseButton && /* @__PURE__ */ jsx(ActionIcon, {
+			as: Close$1,
+			label: closePopoverText,
+			size: "md",
+			hasTooltip: false,
+			theme: "neutral",
+			className: "absolute top-0.5 right-0.5",
+			children: /* @__PURE__ */ jsx(Icon, { is: Close })
+		}),
+		children,
+		/* @__PURE__ */ jsx(StyledArrow, {
+			width: 16,
+			height: 8
+		})
+	]
+});
 //#endregion
 export { PopoverContent };
 

package/dist/components/popover/PopoverContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"PopoverContent.js","names":[],"sources":["../../../src/components/popover/PopoverContent.tsx"],"sourcesContent":["import { Close as CloseIcon } from '@atom-learning/icons'\nimport { Arrow, Close, Content } from '@radix-ui/react-popover'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\n\nconst StyledContent = styled(Content, {\n  base: [\n    'bg-white',\n    'rounded-md',\n    'shadow-lg',\n    'max-w-[90vw]',\n    'p-6',\n    'pr-10',\n    'relative',\n    'z-10',\n    'will-change-transform',\n    'will-change-opacity',\n    'animation-duration-75',\n    '[--slide-opacity-out:0]',\n    'data-[side=top]:[--slide-direction-out-y:-4px]',\n    'data-[side=right]:[--slide-direction-out-x:4px]',\n    'data-[side=bottom]:[--slide-direction-out-y:4px]',\n    'data-[side=left]:[--slide-direction-out-x:-4px]',\n    'motion-safe:data-[state=open]:animate-slide-direction-in',\n    'motion-safe:data-[state=closed]:animate-slide-direction-out'\n  ],\n  variants: {\n    size: {\n      sm: ['max-w-50'],\n      md: ['max-w-100'],\n      lg: ['max-w-150']\n    }\n  }\n})\n\nconst StyledArrow = styled(Arrow, {\n  base: ['fill-white', 'z-1', 'in-data-[align=end]:mx-6']\n})\n\ntype PopoverContentProps = React.ComponentProps<typeof StyledContent> &\n  React.ComponentProps<typeof Content> & {\n    closePopoverText?: string\n    showCloseButton?: boolean\n  }\n\nexport const PopoverContent = ({\n  children,\n  side = 'top',\n  sideOffset = 8,\n  closePopoverText = 'Close popover',\n  showCloseButton = true,\n  size = 'md',\n  ...remainingProps\n}: PopoverContentProps) => (\n  <StyledContent\n    size={size}\n    side={side}\n    sideOffset={sideOffset}\n    {...remainingProps}\n  >\n    {showCloseButton && (\n      <ActionIcon\n        as={Close}\n        label={closePopoverText}\n        size=\"md\"\n        hasTooltip={false}\n        theme=\"neutral\"\n        className=\"absolute top-0.5 right-0.5\"\n      >\n        <Icon is={CloseIcon} />\n      </ActionIcon>\n    )}\n    {children}\n    <StyledArrow width={16} height={8} />\n  </StyledContent>\n)\n"],"mappings":";;;;;;;AASA,IAAM,gBAAgB,OAAO,SAAS;CACpC,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,WAAW;EAChB,IAAI,CAAC,YAAY;EACjB,IAAI,CAAC,YAAY;EAClB,EACF;CACF,CAAC;AAEF,IAAM,cAAc,OAAO,OAAO,EAChC,MAAM;CAAC;CAAc;CAAO;CAA2B,EACxD,CAAC;AAQF,IAAa,kBAAkB,EAC7B,UACA,OAAO,OACP,aAAa,GACb,mBAAmB,iBACnB,kBAAkB,MAClB,OAAO,MACP,GAAG,qBAEH,wBAAA,cAAC,eAAD;CACQ;CACA;CACM;CACZ,GAAI;CAgBU,EAdb,mBACC,wBAAA,cAAC,YAAD;CACE,IAAI;CACJ,OAAO;CACP,MAAK;CACL,YAAY;CACZ,OAAM;CACN,WAAU;CAGC,EADX,wBAAA,cAAC,MAAD,EAAM,IAAI,OAAa,CAAA,CACZ,EAEd,UACD,wBAAA,cAAC,aAAD;CAAa,OAAO;CAAI,QAAQ;CAAK,CAAA,CACvB"}
+{"version":3,"file":"PopoverContent.js","names":[],"sources":["../../../src/components/popover/PopoverContent.tsx"],"sourcesContent":["import { Close as CloseIcon } from '@atom-learning/icons'\nimport { Arrow, Close, Content } from '@radix-ui/react-popover'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\n\nconst StyledContent = styled(Content, {\n  base: [\n    'bg-white',\n    'rounded-md',\n    'shadow-lg',\n    'max-w-[90vw]',\n    'p-6',\n    'pr-10',\n    'relative',\n    'z-10',\n    'will-change-transform',\n    'will-change-opacity',\n    'animation-duration-75',\n    '[--slide-opacity-out:0]',\n    'data-[side=top]:[--slide-direction-out-y:-4px]',\n    'data-[side=right]:[--slide-direction-out-x:4px]',\n    'data-[side=bottom]:[--slide-direction-out-y:4px]',\n    'data-[side=left]:[--slide-direction-out-x:-4px]',\n    'motion-safe:data-[state=open]:animate-slide-direction-in',\n    'motion-safe:data-[state=closed]:animate-slide-direction-out'\n  ],\n  variants: {\n    size: {\n      sm: ['max-w-50'],\n      md: ['max-w-100'],\n      lg: ['max-w-150']\n    }\n  }\n})\n\nconst StyledArrow = styled(Arrow, {\n  base: ['fill-white', 'z-1', 'in-data-[align=end]:mx-6']\n})\n\ntype PopoverContentProps = React.ComponentProps<typeof StyledContent> &\n  React.ComponentProps<typeof Content> & {\n    closePopoverText?: string\n    showCloseButton?: boolean\n  }\n\nexport const PopoverContent = ({\n  children,\n  side = 'top',\n  sideOffset = 8,\n  closePopoverText = 'Close popover',\n  showCloseButton = true,\n  size = 'md',\n  ...remainingProps\n}: PopoverContentProps) => (\n  <StyledContent\n    size={size}\n    side={side}\n    sideOffset={sideOffset}\n    {...remainingProps}\n  >\n    {showCloseButton && (\n      <ActionIcon\n        as={Close}\n        label={closePopoverText}\n        size=\"md\"\n        hasTooltip={false}\n        theme=\"neutral\"\n        className=\"absolute top-0.5 right-0.5\"\n      >\n        <Icon is={CloseIcon} />\n      </ActionIcon>\n    )}\n    {children}\n    <StyledArrow width={16} height={8} />\n  </StyledContent>\n)\n"],"mappings":";;;;;;;;AASA,IAAM,gBAAgB,OAAO,SAAS;CACpC,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,WAAW;EAChB,IAAI,CAAC,YAAY;EACjB,IAAI,CAAC,YAAY;EAClB,EACF;CACF,CAAC;AAEF,IAAM,cAAc,OAAO,OAAO,EAChC,MAAM;CAAC;CAAc;CAAO;CAA2B,EACxD,CAAC;AAQF,IAAa,kBAAkB,EAC7B,UACA,OAAO,OACP,aAAa,GACb,mBAAmB,iBACnB,kBAAkB,MAClB,OAAO,MACP,GAAG,qBAEH,qBAAC,eAAD;CACQ;CACA;CACM;CACZ,GAAI;WAJN;EAMG,mBACC,oBAAC,YAAD;GACE,IAAI;GACJ,OAAO;GACP,MAAK;GACL,YAAY;GACZ,OAAM;GACN,WAAU;aAEV,oBAAC,MAAD,EAAM,IAAI,OAAa,CAAA;GACZ,CAAA;EAEd;EACD,oBAAC,aAAD;GAAa,OAAO;GAAI,QAAQ;GAAK,CAAA;EACvB"}

package/dist/components/progress-bar/ProgressBar.d.ts

@@ -1,6 +1,8 @@
 import * as Progress from '@radix-ui/react-progress';
 import * as React from 'react';
-declare const StyledProgressBar: React.ForwardRefExoticComponent<Omit<Progress.ProgressProps & React.RefAttributes<HTMLDivElement>, "size" | "theme"> & {
+declare const StyledProgressBar: React.ForwardRefExoticComponent<Omit<Omit<Progress.ProgressProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    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;
+}, "size" | "theme"> & {
     size?: ("sm" | "md" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md">>) | undefined;
     theme?: ("primary" | "neutral" | "success" | "warning" | "danger" | "info" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "primary" | "neutral" | "success" | "warning" | "danger" | "info">>) | undefined;
 } & {

package/dist/components/progress-bar/ProgressBar.js

@@ -1,5 +1,6 @@
 import { styled } from "../../styled.js";
-import * as React$1 from "react";
+import "react";
+import { jsx } from "react/jsx-runtime";
 import * as Progress from "@radix-ui/react-progress";
 //#region src/components/progress-bar/ProgressBar.tsx
 var StyledProgressBar = styled(Progress.Root, {
@@ -35,16 +36,17 @@ var StyledIndicator = styled(Progress.Indicator, { base: [
 	"duration-300",
 	"ease-out"
 ] });
-var ProgressBar = ({ value, max = 100, size = "md", theme = "primary", ...remainingProps }) => /* @__PURE__ */ React$1.createElement(StyledProgressBar, {
+var ProgressBar = ({ value, max = 100, size = "md", theme = "primary", ...remainingProps }) => /* @__PURE__ */ jsx(StyledProgressBar, {
 	value,
 	max,
 	theme,
 	size,
-	...remainingProps
-}, /* @__PURE__ */ React$1.createElement(StyledIndicator, {
-	className: "w-full translate-x-(--progress)",
-	style: { "--progress": `-${100 - (value || 0) / max * 100}%` }
-}));
+	...remainingProps,
+	children: /* @__PURE__ */ jsx(StyledIndicator, {
+		className: "w-full translate-x-(--progress)",
+		style: { "--progress": `-${100 - (value || 0) / max * 100}%` }
+	})
+});
 ProgressBar.displayName = "ProgressBar";
 //#endregion
 export { ProgressBar };

package/dist/components/progress-bar/ProgressBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressBar.js","names":[],"sources":["../../../src/components/progress-bar/ProgressBar.tsx"],"sourcesContent":["import * as Progress from '@radix-ui/react-progress'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nconst StyledProgressBar = styled(\n  Progress.Root,\n  {\n    base: [\n      'rounded-full',\n      'bg-grey-200',\n      'relative',\n      'overflow-hidden',\n      'w-full'\n    ],\n    variants: {\n      size: {\n        sm: ['h-1'],\n        md: ['h-2']\n      },\n      theme: {\n        primary: ['text-primary-800'],\n        info: ['text-info'],\n        success: ['text-success'],\n        warning: ['text-warning'],\n        danger: ['text-danger'],\n        neutral: ['bg-grey-400', 'text-grey-800']\n      }\n    }\n  },\n  { enabledResponsiveVariants: true }\n)\n\nconst StyledIndicator = styled(Progress.Indicator, {\n  base: [\n    'bg-current',\n    'rounded-full',\n    'box-border',\n    'h-full',\n    'absolute',\n    'transition-all',\n    'duration-300',\n    'ease-out'\n  ]\n})\n\ntype ProgressBarProps = React.ComponentPropsWithoutRef<\n  typeof StyledProgressBar\n> &\n  (\n    | { id: string; 'aria-label'?: string }\n    | { 'aria-label': string; id?: string }\n  )\n\nexport const ProgressBar = ({\n  value,\n  max = 100,\n  size = 'md',\n  theme = 'primary',\n  ...remainingProps\n}: ProgressBarProps) => (\n  <StyledProgressBar\n    value={value}\n    max={max}\n    theme={theme}\n    size={size}\n    {...remainingProps}\n  >\n    <StyledIndicator\n      className=\"w-full translate-x-(--progress)\"\n      style={{\n        '--progress': `-${100 - ((value || 0) / max) * 100}%`\n      }}\n    />\n  </StyledProgressBar>\n)\n\nProgressBar.displayName = 'ProgressBar'\n"],"mappings":";;;;AAKA,IAAM,oBAAoB,OACxB,SAAS,MACT;CACE,MAAM;EACJ;EACA;EACA;EACA;EACA;EACD;CACD,UAAU;EACR,MAAM;GACJ,IAAI,CAAC,MAAM;GACX,IAAI,CAAC,MAAM;GACZ;EACD,OAAO;GACL,SAAS,CAAC,mBAAmB;GAC7B,MAAM,CAAC,YAAY;GACnB,SAAS,CAAC,eAAe;GACzB,SAAS,CAAC,eAAe;GACzB,QAAQ,CAAC,cAAc;GACvB,SAAS,CAAC,eAAe,gBAAgB;GAC1C;EACF;CACF,EACD,EAAE,2BAA2B,MAAM,CACpC;AAED,IAAM,kBAAkB,OAAO,SAAS,WAAW,EACjD,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EACF,CAAC;AAUF,IAAa,eAAe,EAC1B,OACA,MAAM,KACN,OAAO,MACP,QAAQ,WACR,GAAG,qBAEH,wBAAA,cAAC,mBAAD;CACS;CACF;CACE;CACD;CACN,GAAI;CAQc,EANlB,wBAAA,cAAC,iBAAD;CACE,WAAU;CACV,OAAO,EACL,cAAc,IAAI,OAAQ,SAAS,KAAK,MAAO,IAAI,IACpD;CACD,CAAA,CACgB;AAGtB,YAAY,cAAc"}
+{"version":3,"file":"ProgressBar.js","names":[],"sources":["../../../src/components/progress-bar/ProgressBar.tsx"],"sourcesContent":["import * as Progress from '@radix-ui/react-progress'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nconst StyledProgressBar = styled(\n  Progress.Root,\n  {\n    base: [\n      'rounded-full',\n      'bg-grey-200',\n      'relative',\n      'overflow-hidden',\n      'w-full'\n    ],\n    variants: {\n      size: {\n        sm: ['h-1'],\n        md: ['h-2']\n      },\n      theme: {\n        primary: ['text-primary-800'],\n        info: ['text-info'],\n        success: ['text-success'],\n        warning: ['text-warning'],\n        danger: ['text-danger'],\n        neutral: ['bg-grey-400', 'text-grey-800']\n      }\n    }\n  },\n  { enabledResponsiveVariants: true }\n)\n\nconst StyledIndicator = styled(Progress.Indicator, {\n  base: [\n    'bg-current',\n    'rounded-full',\n    'box-border',\n    'h-full',\n    'absolute',\n    'transition-all',\n    'duration-300',\n    'ease-out'\n  ]\n})\n\ntype ProgressBarProps = React.ComponentPropsWithoutRef<\n  typeof StyledProgressBar\n> &\n  (\n    | { id: string; 'aria-label'?: string }\n    | { 'aria-label': string; id?: string }\n  )\n\nexport const ProgressBar = ({\n  value,\n  max = 100,\n  size = 'md',\n  theme = 'primary',\n  ...remainingProps\n}: ProgressBarProps) => (\n  <StyledProgressBar\n    value={value}\n    max={max}\n    theme={theme}\n    size={size}\n    {...remainingProps}\n  >\n    <StyledIndicator\n      className=\"w-full translate-x-(--progress)\"\n      style={{\n        '--progress': `-${100 - ((value || 0) / max) * 100}%`\n      }}\n    />\n  </StyledProgressBar>\n)\n\nProgressBar.displayName = 'ProgressBar'\n"],"mappings":";;;;;AAKA,IAAM,oBAAoB,OACxB,SAAS,MACT;CACE,MAAM;EACJ;EACA;EACA;EACA;EACA;EACD;CACD,UAAU;EACR,MAAM;GACJ,IAAI,CAAC,MAAM;GACX,IAAI,CAAC,MAAM;GACZ;EACD,OAAO;GACL,SAAS,CAAC,mBAAmB;GAC7B,MAAM,CAAC,YAAY;GACnB,SAAS,CAAC,eAAe;GACzB,SAAS,CAAC,eAAe;GACzB,QAAQ,CAAC,cAAc;GACvB,SAAS,CAAC,eAAe,gBAAgB;GAC1C;EACF;CACF,EACD,EAAE,2BAA2B,MAAM,CACpC;AAED,IAAM,kBAAkB,OAAO,SAAS,WAAW,EACjD,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EACF,CAAC;AAUF,IAAa,eAAe,EAC1B,OACA,MAAM,KACN,OAAO,MACP,QAAQ,WACR,GAAG,qBAEH,oBAAC,mBAAD;CACS;CACF;CACE;CACD;CACN,GAAI;WAEJ,oBAAC,iBAAD;EACE,WAAU;EACV,OAAO,EACL,cAAc,IAAI,OAAQ,SAAS,KAAK,MAAO,IAAI,IACpD;EACD,CAAA;CACgB,CAAA;AAGtB,YAAY,cAAc"}

package/dist/components/radio-button/RadioButton.d.ts

@@ -1,7 +1,9 @@
 import * as RadioGroup from '@radix-ui/react-radio-group';
 import * as React from 'react';
 import { Override } from '../../utilities/types';
-declare const StyledRadioButton: React.ForwardRefExoticComponent<Omit<RadioGroup.RadioGroupItemProps & React.RefAttributes<HTMLButtonElement>, "size"> & {
+declare const StyledRadioButton: React.ForwardRefExoticComponent<Omit<Omit<RadioGroup.RadioGroupItemProps & React.RefAttributes<HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | 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<HTMLButtonElement> | null | undefined;
+}, "size"> & {
     size?: ("md" | "lg" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "md" | "lg">>) | undefined;
 } & {
     as?: React.ElementType;

package/dist/components/radio-button/RadioButton.js

@@ -1,5 +1,6 @@
 import { styled } from "../../styled.js";
-import * as React$1 from "react";
+import "react";
+import { jsx } from "react/jsx-runtime";
 import * as RadioGroup from "@radix-ui/react-radio-group";
 //#region src/components/radio-button/RadioButton.tsx
 var StyledRadioButton = styled(RadioGroup.Item, {
@@ -50,10 +51,11 @@ var StyledIndicator = styled(RadioGroup.Indicator, {
 	} }
 }, { enabledResponsiveVariants: true });
 var RadioButton = ({ size, ...props }) => {
-	return /* @__PURE__ */ React$1.createElement(StyledRadioButton, {
+	return /* @__PURE__ */ jsx(StyledRadioButton, {
 		...props,
-		size
-	}, /* @__PURE__ */ React$1.createElement(StyledIndicator, { size }));
+		size,
+		children: /* @__PURE__ */ jsx(StyledIndicator, { size })
+	});
 };
 RadioButton.displayName = "RadioButton";
 //#endregion

package/dist/components/radio-button/RadioButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioButton.js","names":[],"sources":["../../../src/components/radio-button/RadioButton.tsx"],"sourcesContent":["import * as RadioGroup from '@radix-ui/react-radio-group'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\nimport { Override } from '~/utilities/types'\n\nconst StyledRadioButton = styled(\n  RadioGroup.Item,\n  {\n    base: [\n      'items-center',\n      'appearance-none',\n      'bg-transparent',\n      'border',\n      'border-grey-800',\n      'rounded-full',\n      'text-white',\n      'cursor-pointer',\n      'flex',\n      'justify-center',\n      'p-0',\n      'size-4',\n      'transition-all',\n      'duration-50',\n      'ease-out',\n      'focus:outline-2',\n      'focus:outline-offset-1',\n      'focus:outline-primary-800',\n      'focus:outline-solid',\n      'data-[state=checked]:bg-primary-800',\n      'data-[state=checked]:border-primary-800',\n      'disabled:bg-grey-200',\n      'disabled:border-grey-800',\n      'disabled:cursor-not-allowed',\n      'disabled:text-grey-800',\n      'disabled:data-[state=checked]:bg-grey-800',\n      'disabled:data-[state=checked]:border-grey-800'\n    ],\n    variants: {\n      size: {\n        md: ['size-4'],\n        lg: ['-mt-1', 'size-6']\n      }\n    }\n  },\n  { enabledResponsiveVariants: true }\n)\n\nconst StyledIndicator = styled(\n  RadioGroup.Indicator,\n  {\n    base: ['size-1.5', 'rounded-full', 'bg-current', 'absolute'],\n    variants: {\n      size: {\n        md: ['size-1.5'],\n        lg: ['size-3']\n      }\n    }\n  },\n  { enabledResponsiveVariants: true }\n)\n\ntype RadioButtonProps = Override<\n  React.ComponentProps<typeof StyledRadioButton>,\n  {\n    as?: never\n  } & {\n    'aria-label'?: string\n  }\n>\n\nexport const RadioButton = ({ size, ...props }: RadioButtonProps) => {\n  return (\n    <StyledRadioButton {...props} size={size}>\n      <StyledIndicator size={size} />\n    </StyledRadioButton>\n  )\n}\n\nRadioButton.displayName = 'RadioButton'\n"],"mappings":";;;;AAMA,IAAM,oBAAoB,OACxB,WAAW,MACX;CACE,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;EACD;CACD,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,SAAS;EACd,IAAI,CAAC,SAAS,SAAS;EACxB,EACF;CACF,EACD,EAAE,2BAA2B,MAAM,CACpC;AAED,IAAM,kBAAkB,OACtB,WAAW,WACX;CACE,MAAM;EAAC;EAAY;EAAgB;EAAc;EAAW;CAC5D,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,WAAW;EAChB,IAAI,CAAC,SAAS;EACf,EACF;CACF,EACD,EAAE,2BAA2B,MAAM,CACpC;AAWD,IAAa,eAAe,EAAE,MAAM,GAAG,YAA8B;AACnE,QACE,wBAAA,cAAC,mBAAD;EAAmB,GAAI;EAAa;EAEhB,EADlB,wBAAA,cAAC,iBAAD,EAAuB,MAAQ,CAAA,CACb;;AAIxB,YAAY,cAAc"}
+{"version":3,"file":"RadioButton.js","names":[],"sources":["../../../src/components/radio-button/RadioButton.tsx"],"sourcesContent":["import * as RadioGroup from '@radix-ui/react-radio-group'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\nimport { Override } from '~/utilities/types'\n\nconst StyledRadioButton = styled(\n  RadioGroup.Item,\n  {\n    base: [\n      'items-center',\n      'appearance-none',\n      'bg-transparent',\n      'border',\n      'border-grey-800',\n      'rounded-full',\n      'text-white',\n      'cursor-pointer',\n      'flex',\n      'justify-center',\n      'p-0',\n      'size-4',\n      'transition-all',\n      'duration-50',\n      'ease-out',\n      'focus:outline-2',\n      'focus:outline-offset-1',\n      'focus:outline-primary-800',\n      'focus:outline-solid',\n      'data-[state=checked]:bg-primary-800',\n      'data-[state=checked]:border-primary-800',\n      'disabled:bg-grey-200',\n      'disabled:border-grey-800',\n      'disabled:cursor-not-allowed',\n      'disabled:text-grey-800',\n      'disabled:data-[state=checked]:bg-grey-800',\n      'disabled:data-[state=checked]:border-grey-800'\n    ],\n    variants: {\n      size: {\n        md: ['size-4'],\n        lg: ['-mt-1', 'size-6']\n      }\n    }\n  },\n  { enabledResponsiveVariants: true }\n)\n\nconst StyledIndicator = styled(\n  RadioGroup.Indicator,\n  {\n    base: ['size-1.5', 'rounded-full', 'bg-current', 'absolute'],\n    variants: {\n      size: {\n        md: ['size-1.5'],\n        lg: ['size-3']\n      }\n    }\n  },\n  { enabledResponsiveVariants: true }\n)\n\ntype RadioButtonProps = Override<\n  React.ComponentProps<typeof StyledRadioButton>,\n  {\n    as?: never\n  } & {\n    'aria-label'?: string\n  }\n>\n\nexport const RadioButton = ({ size, ...props }: RadioButtonProps) => {\n  return (\n    <StyledRadioButton {...props} size={size}>\n      <StyledIndicator size={size} />\n    </StyledRadioButton>\n  )\n}\n\nRadioButton.displayName = 'RadioButton'\n"],"mappings":";;;;;AAMA,IAAM,oBAAoB,OACxB,WAAW,MACX;CACE,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;EACD;CACD,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,SAAS;EACd,IAAI,CAAC,SAAS,SAAS;EACxB,EACF;CACF,EACD,EAAE,2BAA2B,MAAM,CACpC;AAED,IAAM,kBAAkB,OACtB,WAAW,WACX;CACE,MAAM;EAAC;EAAY;EAAgB;EAAc;EAAW;CAC5D,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,WAAW;EAChB,IAAI,CAAC,SAAS;EACf,EACF;CACF,EACD,EAAE,2BAA2B,MAAM,CACpC;AAWD,IAAa,eAAe,EAAE,MAAM,GAAG,YAA8B;AACnE,QACE,oBAAC,mBAAD;EAAmB,GAAI;EAAa;YAClC,oBAAC,iBAAD,EAAuB,MAAQ,CAAA;EACb,CAAA;;AAIxB,YAAY,cAAc"}

package/dist/components/radio-button/RadioButtonGroup.d.ts

@@ -1,5 +1,7 @@
 import * as RadioGroup from '@radix-ui/react-radio-group';
-export declare const RadioButtonGroup: import("react").ForwardRefExoticComponent<Omit<RadioGroup.RadioGroupProps & import("react").RefAttributes<HTMLDivElement>, "direction"> & {
+export declare const RadioButtonGroup: import("react").ForwardRefExoticComponent<Omit<Omit<RadioGroup.RadioGroupProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
+    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;
+}, "direction"> & {
     direction?: "row" | "column" | undefined;
 } & {
     as?: import("react").ElementType;

package/dist/components/radio-button-field/RadioButtonField.d.ts

@@ -13,7 +13,9 @@ export declare const RadioButtonField: {
             error?: string;
             label: string;
             validation?: import("..").ValidationOptions;
-        } & Omit<Omit<import("@radix-ui/react-radio-group").RadioGroupItemProps & React.RefAttributes<HTMLButtonElement>, "size"> & {
+        } & Omit<Omit<Omit<import("@radix-ui/react-radio-group").RadioGroupItemProps & React.RefAttributes<HTMLButtonElement>, "ref"> & {
+            ref?: ((instance: HTMLButtonElement | 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<HTMLButtonElement> | null | undefined;
+        }, "size"> & {
             size?: ("md" | "lg" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "md" | "lg">>) | undefined;
         } & {
             as?: React.ElementType;

package/dist/components/radio-button-field/RadioButtonField.js

@@ -6,6 +6,7 @@ import { useFieldError } from "../form/useFieldError.js";
 import { RadioButtonGroup } from "../radio-button/RadioButtonGroup.js";
 import { RadioField } from "./RadioField.js";
 import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useController, useFormContext } from "react-hook-form";
 //#region src/components/radio-button-field/RadioButtonField.tsx
 var Fieldset = styled("fieldset", { base: [
@@ -26,21 +27,37 @@ var RadioButtonFieldComponent = ({ children, className, direction = "column", de
 	React$1.useEffect(() => {
 		if (typeof value !== "undefined") onChange(value);
 	}, [value]);
-	return /* @__PURE__ */ React$1.createElement(Fieldset, { className }, /* @__PURE__ */ React$1.createElement(Label, {
-		as: "legend",
-		required: Boolean(validation?.required),
-		className: "mb-3 p-0"
-	}, label), description && /* @__PURE__ */ React$1.createElement(Description, { className: "mb-3" }, description), /* @__PURE__ */ React$1.createElement(RadioButtonGroup, {
-		ref,
-		direction,
-		defaultValue,
-		onValueChange: (newValue) => {
-			onChange(newValue);
-			onValueChange?.(newValue);
-		},
-		value: innerValue,
-		...remainingProps
-	}, children), error && /* @__PURE__ */ React$1.createElement(InlineMessage, { className: "mt-2" }, error));
+	return /* @__PURE__ */ jsxs(Fieldset, {
+		className,
+		children: [
+			/* @__PURE__ */ jsx(Label, {
+				as: "legend",
+				required: Boolean(validation?.required),
+				className: "mb-3 p-0",
+				children: label
+			}),
+			description && /* @__PURE__ */ jsx(Description, {
+				className: "mb-3",
+				children: description
+			}),
+			/* @__PURE__ */ jsx(RadioButtonGroup, {
+				ref,
+				direction,
+				defaultValue,
+				onValueChange: (newValue) => {
+					onChange(newValue);
+					onValueChange?.(newValue);
+				},
+				value: innerValue,
+				...remainingProps,
+				children
+			}),
+			error && /* @__PURE__ */ jsx(InlineMessage, {
+				className: "mt-2",
+				children: error
+			})
+		]
+	});
 };
 var RadioButtonField = Object.assign(RadioButtonFieldComponent, { Item: RadioField });
 RadioButtonFieldComponent.displayName = "RadioButtonField";

package/dist/components/radio-button-field/RadioButtonField.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioButtonField.js","names":[],"sources":["../../../src/components/radio-button-field/RadioButtonField.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useController, useFormContext } from 'react-hook-form'\n\nimport { Description as FieldDescription } from '~/components/field-wrapper/FieldDescription'\nimport { FieldElementWrapperProps } from '~/components/field-wrapper/FieldWrapper'\nimport { useFieldError } from '~/components/form/useFieldError'\nimport { InlineMessage } from '~/components/inline-message/InlineMessage'\nimport { Label } from '~/components/label/Label'\nimport { RadioButtonGroup } from '~/components/radio-button/RadioButtonGroup'\nimport { styled } from '~/styled'\n\nimport { RadioField } from './RadioField'\n\nconst Fieldset = styled('fieldset', {\n  base: ['border-0', 'p-0', 'm-0', 'min-w-0']\n})\n\ntype RadioButtonFieldProps = React.ComponentProps<typeof RadioButtonGroup> &\n  FieldElementWrapperProps\n\nconst RadioButtonFieldComponent = ({\n  children,\n  className,\n  direction = 'column',\n  defaultValue,\n  value,\n  description,\n  label,\n  name,\n  validation,\n  onValueChange,\n  ...remainingProps\n}: RadioButtonFieldProps) => {\n  const { control } = useFormContext()\n  const {\n    field: { ref, onChange, value: innerValue }\n  } = useController({\n    name,\n    control,\n    rules: validation,\n    defaultValue\n  })\n  const { error } = useFieldError(name)\n\n  React.useEffect(() => {\n    // Update the react-hook-form inner value to match what is passed in.\n    if (typeof value !== 'undefined') onChange(value)\n  }, [value])\n\n  return (\n    <Fieldset className={className}>\n      <Label\n        as=\"legend\"\n        required={Boolean(validation?.required)}\n        className=\"mb-3 p-0\"\n      >\n        {label}\n      </Label>\n      {description && (\n        <FieldDescription className=\"mb-3\">{description}</FieldDescription>\n      )}\n\n      <RadioButtonGroup\n        ref={ref}\n        direction={direction}\n        defaultValue={defaultValue}\n        onValueChange={(newValue) => {\n          onChange(newValue)\n          onValueChange?.(newValue)\n        }}\n        value={innerValue}\n        {...remainingProps}\n      >\n        {children}\n      </RadioButtonGroup>\n\n      {error && <InlineMessage className=\"mt-2\">{error}</InlineMessage>}\n    </Fieldset>\n  )\n}\n\nexport const RadioButtonField = Object.assign(RadioButtonFieldComponent, {\n  Item: RadioField\n})\n\nRadioButtonFieldComponent.displayName = 'RadioButtonField'\n"],"mappings":";;;;;;;;;;AAaA,IAAM,WAAW,OAAO,YAAY,EAClC,MAAM;CAAC;CAAY;CAAO;CAAO;CAAU,EAC5C,CAAC;AAKF,IAAM,6BAA6B,EACjC,UACA,WACA,YAAY,UACZ,cACA,OACA,aACA,OACA,MACA,YACA,eACA,GAAG,qBACwB;CAC3B,MAAM,EAAE,YAAY,gBAAgB;CACpC,MAAM,EACJ,OAAO,EAAE,KAAK,UAAU,OAAO,iBAC7B,cAAc;EAChB;EACA;EACA,OAAO;EACP;EACD,CAAC;CACF,MAAM,EAAE,UAAU,cAAc,KAAK;AAErC,SAAM,gBAAgB;AAEpB,MAAI,OAAO,UAAU,YAAa,UAAS,MAAM;IAChD,CAAC,MAAM,CAAC;AAEX,QACE,wBAAA,cAAC,UAAD,EAAqB,WA2BV,EA1BT,wBAAA,cAAC,OAAD;EACE,IAAG;EACH,UAAU,QAAQ,YAAY,SAAS;EACvC,WAAU;EAGJ,EADL,MACK,EACP,eACC,wBAAA,cAAC,aAAD,EAAkB,WAAU,QAAuC,EAA/B,YAA+B,EAGrE,wBAAA,cAAC,kBAAD;EACO;EACM;EACG;EACd,gBAAgB,aAAa;AAC3B,YAAS,SAAS;AAClB,mBAAgB,SAAS;;EAE3B,OAAO;EACP,GAAI;EAGa,EADhB,SACgB,EAElB,SAAS,wBAAA,cAAC,eAAD,EAAe,WAAU,QAA8B,EAAtB,MAAsB,CACxD;;AAIf,IAAa,mBAAmB,OAAO,OAAO,2BAA2B,EACvE,MAAM,YACP,CAAC;AAEF,0BAA0B,cAAc"}
+{"version":3,"file":"RadioButtonField.js","names":[],"sources":["../../../src/components/radio-button-field/RadioButtonField.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useController, useFormContext } from 'react-hook-form'\n\nimport { Description as FieldDescription } from '~/components/field-wrapper/FieldDescription'\nimport { FieldElementWrapperProps } from '~/components/field-wrapper/FieldWrapper'\nimport { useFieldError } from '~/components/form/useFieldError'\nimport { InlineMessage } from '~/components/inline-message/InlineMessage'\nimport { Label } from '~/components/label/Label'\nimport { RadioButtonGroup } from '~/components/radio-button/RadioButtonGroup'\nimport { styled } from '~/styled'\n\nimport { RadioField } from './RadioField'\n\nconst Fieldset = styled('fieldset', {\n  base: ['border-0', 'p-0', 'm-0', 'min-w-0']\n})\n\ntype RadioButtonFieldProps = React.ComponentProps<typeof RadioButtonGroup> &\n  FieldElementWrapperProps\n\nconst RadioButtonFieldComponent = ({\n  children,\n  className,\n  direction = 'column',\n  defaultValue,\n  value,\n  description,\n  label,\n  name,\n  validation,\n  onValueChange,\n  ...remainingProps\n}: RadioButtonFieldProps) => {\n  const { control } = useFormContext()\n  const {\n    field: { ref, onChange, value: innerValue }\n  } = useController({\n    name,\n    control,\n    rules: validation,\n    defaultValue\n  })\n  const { error } = useFieldError(name)\n\n  React.useEffect(() => {\n    // Update the react-hook-form inner value to match what is passed in.\n    if (typeof value !== 'undefined') onChange(value)\n  }, [value])\n\n  return (\n    <Fieldset className={className}>\n      <Label\n        as=\"legend\"\n        required={Boolean(validation?.required)}\n        className=\"mb-3 p-0\"\n      >\n        {label}\n      </Label>\n      {description && (\n        <FieldDescription className=\"mb-3\">{description}</FieldDescription>\n      )}\n\n      <RadioButtonGroup\n        ref={ref}\n        direction={direction}\n        defaultValue={defaultValue}\n        onValueChange={(newValue) => {\n          onChange(newValue)\n          onValueChange?.(newValue)\n        }}\n        value={innerValue}\n        {...remainingProps}\n      >\n        {children}\n      </RadioButtonGroup>\n\n      {error && <InlineMessage className=\"mt-2\">{error}</InlineMessage>}\n    </Fieldset>\n  )\n}\n\nexport const RadioButtonField = Object.assign(RadioButtonFieldComponent, {\n  Item: RadioField\n})\n\nRadioButtonFieldComponent.displayName = 'RadioButtonField'\n"],"mappings":";;;;;;;;;;;AAaA,IAAM,WAAW,OAAO,YAAY,EAClC,MAAM;CAAC;CAAY;CAAO;CAAO;CAAU,EAC5C,CAAC;AAKF,IAAM,6BAA6B,EACjC,UACA,WACA,YAAY,UACZ,cACA,OACA,aACA,OACA,MACA,YACA,eACA,GAAG,qBACwB;CAC3B,MAAM,EAAE,YAAY,gBAAgB;CACpC,MAAM,EACJ,OAAO,EAAE,KAAK,UAAU,OAAO,iBAC7B,cAAc;EAChB;EACA;EACA,OAAO;EACP;EACD,CAAC;CACF,MAAM,EAAE,UAAU,cAAc,KAAK;AAErC,SAAM,gBAAgB;AAEpB,MAAI,OAAO,UAAU,YAAa,UAAS,MAAM;IAChD,CAAC,MAAM,CAAC;AAEX,QACE,qBAAC,UAAD;EAAqB;YAArB;GACE,oBAAC,OAAD;IACE,IAAG;IACH,UAAU,QAAQ,YAAY,SAAS;IACvC,WAAU;cAET;IACK,CAAA;GACP,eACC,oBAAC,aAAD;IAAkB,WAAU;cAAQ;IAA+B,CAAA;GAGrE,oBAAC,kBAAD;IACO;IACM;IACG;IACd,gBAAgB,aAAa;AAC3B,cAAS,SAAS;AAClB,qBAAgB,SAAS;;IAE3B,OAAO;IACP,GAAI;IAEH;IACgB,CAAA;GAElB,SAAS,oBAAC,eAAD;IAAe,WAAU;cAAQ;IAAsB,CAAA;GACxD;;;AAIf,IAAa,mBAAmB,OAAO,OAAO,2BAA2B,EACvE,MAAM,YACP,CAAC;AAEF,0BAA0B,cAAc"}

package/dist/components/radio-button-field/RadioField.js

@@ -1,14 +1,16 @@
 import { RadioButton } from "../radio-button/RadioButton.js";
 import { InlineFieldWrapper } from "../field-wrapper/InlineFieldWrapper.js";
-import * as React$1 from "react";
+import "react";
+import { jsx } from "react/jsx-runtime";
 //#region src/components/radio-button-field/RadioField.tsx
-var RadioField = ({ className, label, value, ...remainingProps }) => /* @__PURE__ */ React$1.createElement(InlineFieldWrapper, {
+var RadioField = ({ className, label, value, ...remainingProps }) => /* @__PURE__ */ jsx(InlineFieldWrapper, {
 	className,
-	label
-}, /* @__PURE__ */ React$1.createElement(RadioButton, {
-	value,
-	...remainingProps
-}));
+	label,
+	children: /* @__PURE__ */ jsx(RadioButton, {
+		value,
+		...remainingProps
+	})
+});
 RadioField.displayName = "RadioField";
 //#endregion
 export { RadioField };

package/dist/components/radio-button-field/RadioField.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioField.js","names":[],"sources":["../../../src/components/radio-button-field/RadioField.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { InlineFieldWrapper } from '~/components/field-wrapper/InlineFieldWrapper'\nimport { ValidationOptions } from '~/components/form/validation'\nimport { RadioButton } from '~/components/radio-button/RadioButton'\n\ntype RadioFieldProps = {\n  className?: string\n  defaultChecked?: boolean\n  error?: string\n  label: string\n  validation?: ValidationOptions\n} & React.ComponentProps<typeof RadioButton>\n\nexport const RadioField = ({\n  className,\n  label,\n  value,\n  ...remainingProps\n}: RadioFieldProps) => (\n  <InlineFieldWrapper className={className} label={label}>\n    <RadioButton value={value} {...remainingProps} />\n  </InlineFieldWrapper>\n)\n\nRadioField.displayName = 'RadioField'\n"],"mappings":";;;;AAcA,IAAa,cAAc,EACzB,WACA,OACA,OACA,GAAG,qBAEH,wBAAA,cAAC,oBAAD;CAA+B;CAAkB;CAE5B,EADnB,wBAAA,cAAC,aAAD;CAAoB;CAAO,GAAI;CAAkB,CAAA,CAC9B;AAGvB,WAAW,cAAc"}
+{"version":3,"file":"RadioField.js","names":[],"sources":["../../../src/components/radio-button-field/RadioField.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { InlineFieldWrapper } from '~/components/field-wrapper/InlineFieldWrapper'\nimport { ValidationOptions } from '~/components/form/validation'\nimport { RadioButton } from '~/components/radio-button/RadioButton'\n\ntype RadioFieldProps = {\n  className?: string\n  defaultChecked?: boolean\n  error?: string\n  label: string\n  validation?: ValidationOptions\n} & React.ComponentProps<typeof RadioButton>\n\nexport const RadioField = ({\n  className,\n  label,\n  value,\n  ...remainingProps\n}: RadioFieldProps) => (\n  <InlineFieldWrapper className={className} label={label}>\n    <RadioButton value={value} {...remainingProps} />\n  </InlineFieldWrapper>\n)\n\nRadioField.displayName = 'RadioField'\n"],"mappings":";;;;;AAcA,IAAa,cAAc,EACzB,WACA,OACA,OACA,GAAG,qBAEH,oBAAC,oBAAD;CAA+B;CAAkB;WAC/C,oBAAC,aAAD;EAAoB;EAAO,GAAI;EAAkB,CAAA;CAC9B,CAAA;AAGvB,WAAW,cAAc"}

package/dist/components/radio-card/RadioCard.d.ts

@@ -1,6 +1,8 @@
 import * as RadioGroup from '@radix-ui/react-radio-group';
 import * as React from 'react';
-declare const StyledRadioCard: React.ForwardRefExoticComponent<Omit<RadioGroup.RadioGroupItemProps & React.RefAttributes<HTMLButtonElement>, "size" | "align" | "isFullWidth"> & {
+declare const StyledRadioCard: React.ForwardRefExoticComponent<Omit<Omit<RadioGroup.RadioGroupItemProps & React.RefAttributes<HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | 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<HTMLButtonElement> | null | undefined;
+}, "size" | "align" | "isFullWidth"> & {
     align?: "left" | "right" | undefined;
     size?: "md" | "lg" | undefined;
     isFullWidth?: boolean | undefined;

package/dist/components/radio-card/RadioCard.js

@@ -1,5 +1,6 @@
 import { styled } from "../../styled.js";
-import * as React$1 from "react";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import * as RadioGroup from "@radix-ui/react-radio-group";
 //#region src/components/radio-card/RadioCard.tsx
 var StyledRadioCard = styled(RadioGroup.Item, {
@@ -77,15 +78,17 @@ var Indicator = styled(RadioGroup.Indicator, { base: [
 	"absolute",
 	"size-1.5"
 ] });
-var RadioCard = ({ children, isFullWidth = false, size = "md", align = "left", ...rest }) => /* @__PURE__ */ React$1.createElement(StyledRadioCard, {
+var RadioCard = ({ children, isFullWidth = false, size = "md", align = "left", ...rest }) => /* @__PURE__ */ jsxs(StyledRadioCard, {
 	...rest,
 	align,
 	isFullWidth,
-	size
-}, /* @__PURE__ */ React$1.createElement(RadioButton, {
-	align,
-	containerIsFullWidth: isFullWidth
-}, /* @__PURE__ */ React$1.createElement(Indicator, null)), /* @__PURE__ */ React$1.createElement("div", null, children));
+	size,
+	children: [/* @__PURE__ */ jsx(RadioButton, {
+		align,
+		containerIsFullWidth: isFullWidth,
+		children: /* @__PURE__ */ jsx(Indicator, {})
+	}), /* @__PURE__ */ jsx("div", { children })]
+});
 //#endregion
 export { RadioCard };
 

package/dist/components/radio-card/RadioCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioCard.js","names":[],"sources":["../../../src/components/radio-card/RadioCard.tsx"],"sourcesContent":["import * as RadioGroup from '@radix-ui/react-radio-group'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nconst StyledRadioCard = styled(RadioGroup.Item, {\n  base: [\n    'items-center',\n    'bg-white',\n    'border',\n    'border-grey-600',\n    'rounded-sm',\n    'cursor-pointer',\n    'flex',\n    'text-left',\n    'data-[state=checked]:-outline-offset-2',\n    'data-[state=checked]:outline-2',\n    'data-[state=checked]:outline-primary-800',\n    'data-[state=checked]:outline-solid'\n  ],\n  variants: {\n    align: {\n      left: ['flex-row'],\n      right: ['flex-row-reverse']\n    },\n    size: {\n      md: ['px-4', 'py-3'],\n      lg: ['px-8', 'py-4']\n    },\n    isFullWidth: {\n      true: ['w-full'],\n      false: ['w-max']\n    }\n  }\n})\n\nconst RadioButton = styled('div', {\n  base: [\n    'items-center',\n    'appearance-none',\n    'bg-transparent',\n    'border',\n    'border-grey-900',\n    'rounded-full',\n    'flex',\n    'shrink-0',\n    'justify-center',\n    'p-0',\n    'size-4',\n    'transition-all',\n    'duration-50',\n    'ease-out',\n    'in-data-[state=checked]:bg-primary-800',\n    'in-data-[state=checked]:border-primary-800'\n  ],\n  variants: {\n    containerIsFullWidth: {\n      true: [],\n      false: []\n    },\n    align: {\n      left: ['mr-4'],\n      right: []\n    }\n  },\n  compoundVariants: [\n    {\n      containerIsFullWidth: true,\n      align: 'right',\n      class: ['ml-auto']\n    },\n    {\n      containerIsFullWidth: false,\n      align: 'right',\n      class: ['ml-4']\n    }\n  ]\n})\n\nconst Indicator = styled(RadioGroup.Indicator, {\n  base: ['bg-white', 'rounded-full', 'absolute', 'size-1.5']\n})\n\ntype RadioCardProps = React.ComponentProps<typeof StyledRadioCard>\n\nexport const RadioCard = ({\n  children,\n  isFullWidth = false,\n  size = 'md',\n  align = 'left',\n  ...rest\n}: RadioCardProps) => (\n  <StyledRadioCard\n    {...rest}\n    align={align}\n    isFullWidth={isFullWidth}\n    size={size}\n  >\n    <RadioButton align={align} containerIsFullWidth={isFullWidth}>\n      <Indicator />\n    </RadioButton>\n    <div>{children}</div>\n  </StyledRadioCard>\n)\n"],"mappings":";;;;AAKA,IAAM,kBAAkB,OAAO,WAAW,MAAM;CAC9C,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU;EACR,OAAO;GACL,MAAM,CAAC,WAAW;GAClB,OAAO,CAAC,mBAAmB;GAC5B;EACD,MAAM;GACJ,IAAI,CAAC,QAAQ,OAAO;GACpB,IAAI,CAAC,QAAQ,OAAO;GACrB;EACD,aAAa;GACX,MAAM,CAAC,SAAS;GAChB,OAAO,CAAC,QAAQ;GACjB;EACF;CACF,CAAC;AAEF,IAAM,cAAc,OAAO,OAAO;CAChC,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU;EACR,sBAAsB;GACpB,MAAM,EAAE;GACR,OAAO,EAAE;GACV;EACD,OAAO;GACL,MAAM,CAAC,OAAO;GACd,OAAO,EAAE;GACV;EACF;CACD,kBAAkB,CAChB;EACE,sBAAsB;EACtB,OAAO;EACP,OAAO,CAAC,UAAU;EACnB,EACD;EACE,sBAAsB;EACtB,OAAO;EACP,OAAO,CAAC,OAAO;EAChB,CACF;CACF,CAAC;AAEF,IAAM,YAAY,OAAO,WAAW,WAAW,EAC7C,MAAM;CAAC;CAAY;CAAgB;CAAY;CAAW,EAC3D,CAAC;AAIF,IAAa,aAAa,EACxB,UACA,cAAc,OACd,OAAO,MACP,QAAQ,QACR,GAAG,WAEH,wBAAA,cAAC,iBAAD;CACE,GAAI;CACG;CACM;CACP;CAMU,EAJhB,wBAAA,cAAC,aAAD;CAAoB;CAAO,sBAAsB;CAEnC,EADZ,wBAAA,cAAC,WAAA,KAAY,CACD,EACd,wBAAA,cAAC,OAAA,MAAK,SAAe,CACL"}
+{"version":3,"file":"RadioCard.js","names":[],"sources":["../../../src/components/radio-card/RadioCard.tsx"],"sourcesContent":["import * as RadioGroup from '@radix-ui/react-radio-group'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nconst StyledRadioCard = styled(RadioGroup.Item, {\n  base: [\n    'items-center',\n    'bg-white',\n    'border',\n    'border-grey-600',\n    'rounded-sm',\n    'cursor-pointer',\n    'flex',\n    'text-left',\n    'data-[state=checked]:-outline-offset-2',\n    'data-[state=checked]:outline-2',\n    'data-[state=checked]:outline-primary-800',\n    'data-[state=checked]:outline-solid'\n  ],\n  variants: {\n    align: {\n      left: ['flex-row'],\n      right: ['flex-row-reverse']\n    },\n    size: {\n      md: ['px-4', 'py-3'],\n      lg: ['px-8', 'py-4']\n    },\n    isFullWidth: {\n      true: ['w-full'],\n      false: ['w-max']\n    }\n  }\n})\n\nconst RadioButton = styled('div', {\n  base: [\n    'items-center',\n    'appearance-none',\n    'bg-transparent',\n    'border',\n    'border-grey-900',\n    'rounded-full',\n    'flex',\n    'shrink-0',\n    'justify-center',\n    'p-0',\n    'size-4',\n    'transition-all',\n    'duration-50',\n    'ease-out',\n    'in-data-[state=checked]:bg-primary-800',\n    'in-data-[state=checked]:border-primary-800'\n  ],\n  variants: {\n    containerIsFullWidth: {\n      true: [],\n      false: []\n    },\n    align: {\n      left: ['mr-4'],\n      right: []\n    }\n  },\n  compoundVariants: [\n    {\n      containerIsFullWidth: true,\n      align: 'right',\n      class: ['ml-auto']\n    },\n    {\n      containerIsFullWidth: false,\n      align: 'right',\n      class: ['ml-4']\n    }\n  ]\n})\n\nconst Indicator = styled(RadioGroup.Indicator, {\n  base: ['bg-white', 'rounded-full', 'absolute', 'size-1.5']\n})\n\ntype RadioCardProps = React.ComponentProps<typeof StyledRadioCard>\n\nexport const RadioCard = ({\n  children,\n  isFullWidth = false,\n  size = 'md',\n  align = 'left',\n  ...rest\n}: RadioCardProps) => (\n  <StyledRadioCard\n    {...rest}\n    align={align}\n    isFullWidth={isFullWidth}\n    size={size}\n  >\n    <RadioButton align={align} containerIsFullWidth={isFullWidth}>\n      <Indicator />\n    </RadioButton>\n    <div>{children}</div>\n  </StyledRadioCard>\n)\n"],"mappings":";;;;;AAKA,IAAM,kBAAkB,OAAO,WAAW,MAAM;CAC9C,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU;EACR,OAAO;GACL,MAAM,CAAC,WAAW;GAClB,OAAO,CAAC,mBAAmB;GAC5B;EACD,MAAM;GACJ,IAAI,CAAC,QAAQ,OAAO;GACpB,IAAI,CAAC,QAAQ,OAAO;GACrB;EACD,aAAa;GACX,MAAM,CAAC,SAAS;GAChB,OAAO,CAAC,QAAQ;GACjB;EACF;CACF,CAAC;AAEF,IAAM,cAAc,OAAO,OAAO;CAChC,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU;EACR,sBAAsB;GACpB,MAAM,EAAE;GACR,OAAO,EAAE;GACV;EACD,OAAO;GACL,MAAM,CAAC,OAAO;GACd,OAAO,EAAE;GACV;EACF;CACD,kBAAkB,CAChB;EACE,sBAAsB;EACtB,OAAO;EACP,OAAO,CAAC,UAAU;EACnB,EACD;EACE,sBAAsB;EACtB,OAAO;EACP,OAAO,CAAC,OAAO;EAChB,CACF;CACF,CAAC;AAEF,IAAM,YAAY,OAAO,WAAW,WAAW,EAC7C,MAAM;CAAC;CAAY;CAAgB;CAAY;CAAW,EAC3D,CAAC;AAIF,IAAa,aAAa,EACxB,UACA,cAAc,OACd,OAAO,MACP,QAAQ,QACR,GAAG,WAEH,qBAAC,iBAAD;CACE,GAAI;CACG;CACM;CACP;WAJR,CAME,oBAAC,aAAD;EAAoB;EAAO,sBAAsB;YAC/C,oBAAC,WAAD,EAAa,CAAA;EACD,CAAA,EACd,oBAAC,OAAD,EAAM,UAAe,CAAA,CACL"}

package/dist/components/radio-card/RadioCardGroup.js

@@ -1,16 +1,23 @@
 import { cn } from "../../styled.js";
 import { RadioCard } from "./RadioCard.js";
 import * as React$1 from "react";
+import { jsx } from "react/jsx-runtime";
 import * as RadioGroup from "@radix-ui/react-radio-group";
 //#region src/components/radio-card/RadioCardGroup.tsx
-var RadioCardGroup = ({ className, children, size, isFullWidth, align, ...rest }) => /* @__PURE__ */ React$1.createElement(RadioGroup.Root, rest, /* @__PURE__ */ React$1.createElement("div", { className: cn("flex", "flex-row", "flex-wrap", "gap-3", className) }, React$1.Children.map(children, (child) => {
-	if (React$1.isValidElement(child) && child?.type === RadioCard) return React$1.cloneElement(child, {
-		size,
-		isFullWidth,
-		align
-	});
-	return child;
-})));
+var RadioCardGroup = ({ className, children, size, isFullWidth, align, ...rest }) => /* @__PURE__ */ jsx(RadioGroup.Root, {
+	...rest,
+	children: /* @__PURE__ */ jsx("div", {
+		className: cn("flex", "flex-row", "flex-wrap", "gap-3", className),
+		children: React$1.Children.map(children, (child) => {
+			if (React$1.isValidElement(child) && child?.type === RadioCard) return React$1.cloneElement(child, {
+				size,
+				isFullWidth,
+				align
+			});
+			return child;
+		})
+	})
+});
 //#endregion
 export { RadioCardGroup };
 

package/dist/components/radio-card/RadioCardGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioCardGroup.js","names":[],"sources":["../../../src/components/radio-card/RadioCardGroup.tsx"],"sourcesContent":["import * as RadioGroup from '@radix-ui/react-radio-group'\nimport * as React from 'react'\n\nimport { cn } from '~/styled'\nimport type { Override } from '~/utilities/types'\n\nimport { RadioCard } from './RadioCard'\n\ntype RadioCardGroupProps = Override<\n  React.ComponentProps<typeof RadioCard>,\n  React.ComponentProps<typeof RadioGroup.Root>\n>\n\nexport const RadioCardGroup = ({\n  className,\n  children,\n  size,\n  isFullWidth,\n  align,\n  ...rest\n}: RadioCardGroupProps) => (\n  <RadioGroup.Root {...rest}>\n    <div className={cn('flex', 'flex-row', 'flex-wrap', 'gap-3', className)}>\n      {React.Children.map(children, (child) => {\n        if (React.isValidElement(child) && child?.type === RadioCard) {\n          return React.cloneElement(\n            child as React.ReactElement<React.ComponentProps<typeof RadioCard>>,\n            { size, isFullWidth, align }\n          )\n        }\n        return child\n      })}\n    </div>\n  </RadioGroup.Root>\n)\n"],"mappings":";;;;;AAaA,IAAa,kBAAkB,EAC7B,WACA,UACA,MACA,aACA,OACA,GAAG,WAEH,wBAAA,cAAC,WAAW,MAAS,MACnB,wBAAA,cAAC,OAAD,EAAK,WAAW,GAAG,QAAQ,YAAY,aAAa,SAAS,UAAU,EAUjE,EATH,QAAM,SAAS,IAAI,WAAW,UAAU;AACvC,KAAI,QAAM,eAAe,MAAM,IAAI,OAAO,SAAS,UACjD,QAAO,QAAM,aACX,OACA;EAAE;EAAM;EAAa;EAAO,CAC7B;AAEH,QAAO;EACP,CACE,CACU"}
+{"version":3,"file":"RadioCardGroup.js","names":[],"sources":["../../../src/components/radio-card/RadioCardGroup.tsx"],"sourcesContent":["import * as RadioGroup from '@radix-ui/react-radio-group'\nimport * as React from 'react'\n\nimport { cn } from '~/styled'\nimport type { Override } from '~/utilities/types'\n\nimport { RadioCard } from './RadioCard'\n\ntype RadioCardGroupProps = Override<\n  React.ComponentProps<typeof RadioCard>,\n  React.ComponentProps<typeof RadioGroup.Root>\n>\n\nexport const RadioCardGroup = ({\n  className,\n  children,\n  size,\n  isFullWidth,\n  align,\n  ...rest\n}: RadioCardGroupProps) => (\n  <RadioGroup.Root {...rest}>\n    <div className={cn('flex', 'flex-row', 'flex-wrap', 'gap-3', className)}>\n      {React.Children.map(children, (child) => {\n        if (React.isValidElement(child) && child?.type === RadioCard) {\n          return React.cloneElement(\n            child as React.ReactElement<React.ComponentProps<typeof RadioCard>>,\n            { size, isFullWidth, align }\n          )\n        }\n        return child\n      })}\n    </div>\n  </RadioGroup.Root>\n)\n"],"mappings":";;;;;;AAaA,IAAa,kBAAkB,EAC7B,WACA,UACA,MACA,aACA,OACA,GAAG,WAEH,oBAAC,WAAW,MAAZ;CAAiB,GAAI;WACnB,oBAAC,OAAD;EAAK,WAAW,GAAG,QAAQ,YAAY,aAAa,SAAS,UAAU;YACpE,QAAM,SAAS,IAAI,WAAW,UAAU;AACvC,OAAI,QAAM,eAAe,MAAM,IAAI,OAAO,SAAS,UACjD,QAAO,QAAM,aACX,OACA;IAAE;IAAM;IAAa;IAAO,CAC7B;AAEH,UAAO;IACP;EACE,CAAA;CACU,CAAA"}

package/dist/components/search-field/SearchField.js

@@ -2,7 +2,8 @@ import { useFieldError } from "../form/useFieldError.js";
 import { FieldWrapper } from "../field-wrapper/FieldWrapper.js";
 import { useFormCustomContext } from "../form/useFormCustomContext.js";
 import { SearchInput } from "../search-input/SearchInput.js";
-import * as React$1 from "react";
+import "react";
+import { jsx } from "react/jsx-runtime";
 import { useFormContext } from "react-hook-form";
 //#region src/components/search-field/SearchField.tsx
 var SearchField = ({ className, hideLabel, label, name, validation, prompt, description, appearance, theme, ...remainingProps }) => {
@@ -12,7 +13,7 @@ var SearchField = ({ className, hideLabel, label, name, validation, prompt, desc
 	const ref = validation ? register(validation) : register;
 	const formAppearance = context?.appearance || appearance;
 	const formTheme = context?.theme ?? theme;
-	return /* @__PURE__ */ React$1.createElement(FieldWrapper, {
+	return /* @__PURE__ */ jsx(FieldWrapper, {
 		className,
 		description,
 		error,
@@ -21,16 +22,17 @@ var SearchField = ({ className, hideLabel, label, name, validation, prompt, desc
 		label,
 		prompt,
 		required: Boolean(validation?.required),
-		appearance: formAppearance
-	}, /* @__PURE__ */ React$1.createElement(SearchInput, {
-		id: name,
-		name,
-		ref,
 		appearance: formAppearance,
-		theme: formTheme,
-		...error && { state: "error" },
-		...remainingProps
-	}));
+		children: /* @__PURE__ */ jsx(SearchInput, {
+			id: name,
+			name,
+			ref,
+			appearance: formAppearance,
+			theme: formTheme,
+			...error && { state: "error" },
+			...remainingProps
+		})
+	});
 };
 SearchField.displayName = "SearchField";
 //#endregion

package/dist/components/search-field/SearchField.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchField.js","names":[],"sources":["../../../src/components/search-field/SearchField.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useFormContext } from 'react-hook-form'\n\nimport {\n  FieldElementWrapperProps,\n  FieldWrapper\n} from '~/components/field-wrapper/FieldWrapper'\nimport { useFieldError } from '~/components/form/useFieldError'\nimport { useFormCustomContext } from '~/components/form/useFormCustomContext'\nimport {\n  SearchInput,\n  SearchInputProps\n} from '~/components/search-input/SearchInput'\n\ntype SearchFieldProps = SearchInputProps & FieldElementWrapperProps\n\nexport const SearchField = ({\n  className,\n  hideLabel,\n  label,\n  name,\n  validation,\n  prompt,\n  description,\n  appearance,\n  theme,\n  ...remainingProps\n}: SearchFieldProps) => {\n  const { register } = useFormContext()\n  const context = useFormCustomContext()\n  const { error } = useFieldError(name)\n\n  const ref = validation ? register(validation) : register\n  const formAppearance = context?.appearance || appearance\n  const formTheme = context?.theme ?? theme\n\n  return (\n    <FieldWrapper\n      className={className}\n      description={description}\n      error={error}\n      fieldId={name}\n      hideLabel={hideLabel}\n      label={label}\n      prompt={prompt}\n      required={Boolean(validation?.required)}\n      appearance={formAppearance}\n    >\n      <SearchInput\n        id={name}\n        name={name}\n        ref={ref}\n        appearance={formAppearance}\n        theme={formTheme}\n        {...(error && { state: 'error' })}\n        {...remainingProps}\n      />\n    </FieldWrapper>\n  )\n}\n\nSearchField.displayName = 'SearchField'\n"],"mappings":";;;;;;;AAgBA,IAAa,eAAe,EAC1B,WACA,WACA,OACA,MACA,YACA,QACA,aACA,YACA,OACA,GAAG,qBACmB;CACtB,MAAM,EAAE,aAAa,gBAAgB;CACrC,MAAM,UAAU,sBAAsB;CACtC,MAAM,EAAE,UAAU,cAAc,KAAK;CAErC,MAAM,MAAM,aAAa,SAAS,WAAW,GAAG;CAChD,MAAM,iBAAiB,SAAS,cAAc;CAC9C,MAAM,YAAY,SAAS,SAAS;AAEpC,QACE,wBAAA,cAAC,cAAD;EACa;EACE;EACN;EACP,SAAS;EACE;EACJ;EACC;EACR,UAAU,QAAQ,YAAY,SAAS;EACvC,YAAY;EAWC,EATb,wBAAA,cAAC,aAAD;EACE,IAAI;EACE;EACD;EACL,YAAY;EACZ,OAAO;EACP,GAAK,SAAS,EAAE,OAAO,SAAS;EAChC,GAAI;EACJ,CAAA,CACW;;AAInB,YAAY,cAAc"}
+{"version":3,"file":"SearchField.js","names":[],"sources":["../../../src/components/search-field/SearchField.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useFormContext } from 'react-hook-form'\n\nimport {\n  FieldElementWrapperProps,\n  FieldWrapper\n} from '~/components/field-wrapper/FieldWrapper'\nimport { useFieldError } from '~/components/form/useFieldError'\nimport { useFormCustomContext } from '~/components/form/useFormCustomContext'\nimport {\n  SearchInput,\n  SearchInputProps\n} from '~/components/search-input/SearchInput'\n\ntype SearchFieldProps = SearchInputProps & FieldElementWrapperProps\n\nexport const SearchField = ({\n  className,\n  hideLabel,\n  label,\n  name,\n  validation,\n  prompt,\n  description,\n  appearance,\n  theme,\n  ...remainingProps\n}: SearchFieldProps) => {\n  const { register } = useFormContext()\n  const context = useFormCustomContext()\n  const { error } = useFieldError(name)\n\n  const ref = validation ? register(validation) : register\n  const formAppearance = context?.appearance || appearance\n  const formTheme = context?.theme ?? theme\n\n  return (\n    <FieldWrapper\n      className={className}\n      description={description}\n      error={error}\n      fieldId={name}\n      hideLabel={hideLabel}\n      label={label}\n      prompt={prompt}\n      required={Boolean(validation?.required)}\n      appearance={formAppearance}\n    >\n      <SearchInput\n        id={name}\n        name={name}\n        ref={ref}\n        appearance={formAppearance}\n        theme={formTheme}\n        {...(error && { state: 'error' })}\n        {...remainingProps}\n      />\n    </FieldWrapper>\n  )\n}\n\nSearchField.displayName = 'SearchField'\n"],"mappings":";;;;;;;;AAgBA,IAAa,eAAe,EAC1B,WACA,WACA,OACA,MACA,YACA,QACA,aACA,YACA,OACA,GAAG,qBACmB;CACtB,MAAM,EAAE,aAAa,gBAAgB;CACrC,MAAM,UAAU,sBAAsB;CACtC,MAAM,EAAE,UAAU,cAAc,KAAK;CAErC,MAAM,MAAM,aAAa,SAAS,WAAW,GAAG;CAChD,MAAM,iBAAiB,SAAS,cAAc;CAC9C,MAAM,YAAY,SAAS,SAAS;AAEpC,QACE,oBAAC,cAAD;EACa;EACE;EACN;EACP,SAAS;EACE;EACJ;EACC;EACR,UAAU,QAAQ,YAAY,SAAS;EACvC,YAAY;YAEZ,oBAAC,aAAD;GACE,IAAI;GACE;GACD;GACL,YAAY;GACZ,OAAO;GACP,GAAK,SAAS,EAAE,OAAO,SAAS;GAChC,GAAI;GACJ,CAAA;EACW,CAAA;;AAInB,YAAY,cAAc"}