@atom-learning/components 8.0.2 → 9.0.0-beta.0

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

@@ -1,18 +1,14 @@
 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"> & {
-    size?: ("md" | "lg" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "md" | "lg">>) | undefined;
-} & {
-    as?: React.ElementType;
+import type { Override } from '../../utilities/types';
+declare const StyledRadioButton: import("../..").StyledComponent<React.ForwardRefExoticComponent<RadioGroup.RadioGroupItemProps & React.RefAttributes<HTMLButtonElement>>, {
+    size?: ("lg" | "md" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "lg" | "md">>) | undefined;
 }>;
 type RadioButtonProps = Override<React.ComponentProps<typeof StyledRadioButton>, {
-    as?: never;
-} & {
     'aria-label'?: string;
 }>;
-export declare const RadioButton: {
-    ({ size, ...props }: RadioButtonProps): React.JSX.Element;
-    displayName: string;
-};
+export declare function RadioButton({ size, ...rest }: RadioButtonProps): React.JSX.Element;
+export declare namespace RadioButton {
+    var displayName: string;
+}
 export {};

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

@@ -37,7 +37,10 @@ var StyledRadioButton = styled(RadioGroup.Item, {
 		md: ["size-4"],
 		lg: ["-mt-1", "size-6"]
 	} }
-}, { enabledResponsiveVariants: true });
+}, {
+	enablePolymorphism: false,
+	enableResponsiveVariants: true
+});
 var StyledIndicator = styled(RadioGroup.Indicator, {
 	base: [
 		"size-1.5",
@@ -49,14 +52,12 @@ var StyledIndicator = styled(RadioGroup.Indicator, {
 		md: ["size-1.5"],
 		lg: ["size-3"]
 	} }
-}, { enabledResponsiveVariants: true });
-var RadioButton = ({ size, ...props }) => {
-	return /* @__PURE__ */ jsx(StyledRadioButton, {
-		...props,
-		size,
-		children: /* @__PURE__ */ jsx(StyledIndicator, { size })
-	});
-};
+}, { enableResponsiveVariants: true });
+var RadioButton = ({ size, ...rest }) => /* @__PURE__ */ jsx(StyledRadioButton, {
+	...rest,
+	size,
+	children: /* @__PURE__ */ jsx(StyledIndicator, { size })
+});
 RadioButton.displayName = "RadioButton";
 //#endregion
 export { RadioButton };

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,oBAAC,mBAAD;EAAmB,GAAI;EAAa;YAClC,oBAAC,iBAAD,EAAuB,MAAQ,CAAA;EACb,CAAA;;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 type { 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  { enablePolymorphism: false, enableResponsiveVariants: 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  { enableResponsiveVariants: true }\n)\n\ntype RadioButtonProps = Override<\n  React.ComponentProps<typeof StyledRadioButton>,\n  {\n    'aria-label'?: string\n  }\n>\n\nexport const RadioButton = ({ size, ...rest }: RadioButtonProps) => (\n  <StyledRadioButton {...rest} size={size}>\n    <StyledIndicator size={size} />\n  </StyledRadioButton>\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;CACF;CACA,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,QAAQ;EACb,IAAI,CAAC,SAAS,QAAQ;CACxB,EACF;AACF,GACA;CAAE,oBAAoB;CAAO,0BAA0B;AAAK,CAC9D;AAEA,IAAM,kBAAkB,OACtB,WAAW,WACX;CACE,MAAM;EAAC;EAAY;EAAgB;EAAc;CAAU;CAC3D,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,UAAU;EACf,IAAI,CAAC,QAAQ;CACf,EACF;AACF,GACA,EAAE,0BAA0B,KAAK,CACnC;AASA,IAAa,eAAe,EAAE,MAAM,GAAG,WACrC,oBAAC,mBAAD;CAAmB,GAAI;CAAY;WACjC,oBAAC,iBAAD,EAAuB,KAAO,CAAA;AACb,CAAA;AAGrB,YAAY,cAAc"}

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

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

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

@@ -7,7 +7,7 @@ var RadioButtonGroup = styled(RadioGroup.Root, {
 		row: ["*:not-last:mr-8", "flex-row"],
 		column: ["flex-col"]
 	} }
-});
+}, { enablePolymorphism: false });
 RadioButtonGroup.displayName = "RadioButtonGroup";
 //#endregion
 export { RadioButtonGroup };

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

@@ -1 +1 @@
-{"version":3,"file":"RadioButtonGroup.js","names":[],"sources":["../../../src/components/radio-button/RadioButtonGroup.tsx"],"sourcesContent":["import * as RadioGroup from '@radix-ui/react-radio-group'\n\nimport { styled } from '~/styled'\n\nexport const RadioButtonGroup = styled(RadioGroup.Root, {\n  base: ['flex', 'flex-wrap'],\n  variants: {\n    direction: {\n      row: ['*:not-last:mr-8', 'flex-row'],\n      column: ['flex-col']\n    }\n  }\n})\n\nRadioButtonGroup.displayName = 'RadioButtonGroup'\n"],"mappings":";;;AAIA,IAAa,mBAAmB,OAAO,WAAW,MAAM;CACtD,MAAM,CAAC,QAAQ,YAAY;CAC3B,UAAU,EACR,WAAW;EACT,KAAK,CAAC,mBAAmB,WAAW;EACpC,QAAQ,CAAC,WAAW;EACrB,EACF;CACF,CAAC;AAEF,iBAAiB,cAAc"}
+{"version":3,"file":"RadioButtonGroup.js","names":[],"sources":["../../../src/components/radio-button/RadioButtonGroup.tsx"],"sourcesContent":["import * as RadioGroup from '@radix-ui/react-radio-group'\n\nimport { styled } from '../../styled'\n\nexport const RadioButtonGroup = styled(\n  RadioGroup.Root,\n  {\n    base: ['flex', 'flex-wrap'],\n    variants: {\n      direction: {\n        row: ['*:not-last:mr-8', 'flex-row'],\n        column: ['flex-col']\n      }\n    }\n  },\n  { enablePolymorphism: false }\n)\n\nRadioButtonGroup.displayName = 'RadioButtonGroup'\n"],"mappings":";;;AAIA,IAAa,mBAAmB,OAC9B,WAAW,MACX;CACE,MAAM,CAAC,QAAQ,WAAW;CAC1B,UAAU,EACR,WAAW;EACT,KAAK,CAAC,mBAAmB,UAAU;EACnC,QAAQ,CAAC,UAAU;CACrB,EACF;AACF,GACA,EAAE,oBAAoB,MAAM,CAC9B;AAEA,iBAAiB,cAAc"}

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

@@ -1,25 +1,21 @@
 import * as React from 'react';
-import { FieldElementWrapperProps } from '../../components/field-wrapper/FieldWrapper';
-import { RadioButtonGroup } from '../../components/radio-button/RadioButtonGroup';
+import type { FieldElementWrapperProps } from '../field-wrapper/FieldWrapper';
+import { RadioButtonGroup } from '../radio-button/RadioButtonGroup';
 type RadioButtonFieldProps = React.ComponentProps<typeof RadioButtonGroup> & FieldElementWrapperProps;
 export declare const RadioButtonField: {
-    ({ children, className, direction, defaultValue, value, description, label, name, validation, onValueChange, ...remainingProps }: RadioButtonFieldProps): React.JSX.Element;
+    ({ children, className, direction, defaultValue, value, description, label, name, validation, onValueChange, ...rest }: RadioButtonFieldProps): React.JSX.Element;
     displayName: string;
 } & {
     Item: {
-        ({ className, label, value, ...remainingProps }: {
+        ({ className, label, value, ...rest }: {
             className?: string;
             defaultChecked?: boolean;
             error?: string;
             label: string;
             validation?: import("..").ValidationOptions;
-        } & Omit<Omit<import("@radix-ui/react-radio-group").RadioGroupItemProps & React.RefAttributes<HTMLButtonElement>, "size"> & {
-            size?: ("md" | "lg" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "md" | "lg">>) | undefined;
-        } & {
-            as?: React.ElementType;
-        }, "as" | "aria-label"> & {
-            as?: never;
-        } & {
+        } & Omit<{
+            size?: ("lg" | "md" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "lg" | "md">>) | undefined;
+        } & Omit<import("@radix-ui/react-radio-group").RadioGroupItemProps & React.RefAttributes<HTMLButtonElement>, "as" | "size">, "aria-label"> & {
             'aria-label'?: string;
         }): React.JSX.Element;
         displayName: string;

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

@@ -15,7 +15,7 @@ var Fieldset = styled("fieldset", { base: [
 	"m-0",
 	"min-w-0"
 ] });
-var RadioButtonFieldComponent = ({ children, className, direction = "column", defaultValue, value, description, label, name, validation, onValueChange, ...remainingProps }) => {
+var RadioButtonFieldComponent = ({ children, className, direction = "column", defaultValue, value, description, label, name, validation, onValueChange, ...rest }) => {
 	const { control } = useFormContext();
 	const { field: { ref, onChange, value: innerValue } } = useController({
 		name,
@@ -49,7 +49,7 @@ var RadioButtonFieldComponent = ({ children, className, direction = "column", de
 					onValueChange?.(newValue);
 				},
 				value: innerValue,
-				...remainingProps,
+				...rest,
 				children
 			}),
 			error && /* @__PURE__ */ jsx(InlineMessage, {
@@ -59,7 +59,7 @@ var RadioButtonFieldComponent = ({ children, className, direction = "column", de
 		]
 	});
 };
-var RadioButtonField = Object.assign(RadioButtonFieldComponent, { Item: RadioField });
+var RadioButtonField = /* @__PURE__ */ Object.assign(RadioButtonFieldComponent, { Item: RadioField });
 RadioButtonFieldComponent.displayName = "RadioButtonField";
 //#endregion
 export { 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,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"}
+{"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 { styled } from '../../styled'\nimport { Description as FieldDescription } from '../field-wrapper/FieldDescription'\nimport type { FieldElementWrapperProps } from '../field-wrapper/FieldWrapper'\nimport { useFieldError } from '../form/useFieldError'\nimport { InlineMessage } from '../inline-message/InlineMessage'\nimport { Label } from '../label/Label'\nimport { RadioButtonGroup } from '../radio-button/RadioButtonGroup'\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  ...rest\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        {...rest}\n      >\n        {children}\n      </RadioButtonGroup>\n\n      {error && <InlineMessage className=\"mt-2\">{error}</InlineMessage>}\n    </Fieldset>\n  )\n}\n\nexport const RadioButtonField = /* @__PURE__ */ Object.assign(\n  RadioButtonFieldComponent,\n  {\n    Item: RadioField\n  }\n)\n\nRadioButtonFieldComponent.displayName = 'RadioButtonField'\n"],"mappings":";;;;;;;;;;;AAYA,IAAM,WAAW,OAAO,YAAY,EAClC,MAAM;CAAC;CAAY;CAAO;CAAO;AAAS,EAC5C,CAAC;AAKD,IAAM,6BAA6B,EACjC,UACA,WACA,YAAY,UACZ,cACA,OACA,aACA,OACA,MACA,YACA,eACA,GAAG,WACwB;CAC3B,MAAM,EAAE,YAAY,eAAe;CACnC,MAAM,EACJ,OAAO,EAAE,KAAK,UAAU,OAAO,iBAC7B,cAAc;EAChB;EACA;EACA,OAAO;EACP;CACF,CAAC;CACD,MAAM,EAAE,UAAU,cAAc,IAAI;CAEpC,QAAM,gBAAgB;EAEpB,IAAI,OAAO,UAAU,aAAa,SAAS,KAAK;CAClD,GAAG,CAAC,KAAK,CAAC;CAEV,OACE,qBAAC,UAAD;EAAqB;YAArB;GACE,oBAAC,OAAD;IACE,IAAG;IACH,UAAU,QAAQ,YAAY,QAAQ;IACtC,WAAU;cAET;GACI,CAAA;GACN,eACC,oBAAC,aAAD;IAAkB,WAAU;cAAQ;GAA8B,CAAA;GAGpE,oBAAC,kBAAD;IACO;IACM;IACG;IACd,gBAAgB,aAAa;KAC3B,SAAS,QAAQ;KACjB,gBAAgB,QAAQ;IAC1B;IACA,OAAO;IACP,GAAI;IAEH;GACe,CAAA;GAEjB,SAAS,oBAAC,eAAD;IAAe,WAAU;cAAQ;GAAqB,CAAA;EACxD;;AAEd;AAEA,IAAa,mBAAmC,uBAAO,OACrD,2BACA,EACE,MAAM,WACR,CACF;AAEA,0BAA0B,cAAc"}

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { ValidationOptions } from '../../components/form/validation';
-import { RadioButton } from '../../components/radio-button/RadioButton';
+import type { ValidationOptions } from '../form/validation';
+import { RadioButton } from '../radio-button/RadioButton';
 type RadioFieldProps = {
     className?: string;
     defaultChecked?: boolean;
@@ -8,8 +8,8 @@ type RadioFieldProps = {
     label: string;
     validation?: ValidationOptions;
 } & React.ComponentProps<typeof RadioButton>;
-export declare const RadioField: {
-    ({ className, label, value, ...remainingProps }: RadioFieldProps): React.JSX.Element;
-    displayName: string;
-};
+export declare function RadioField({ className, label, value, ...rest }: RadioFieldProps): React.JSX.Element;
+export declare namespace RadioField {
+    var displayName: string;
+}
 export {};

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

@@ -3,12 +3,12 @@ import { InlineFieldWrapper } from "../field-wrapper/InlineFieldWrapper.js";
 import "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/radio-button-field/RadioField.tsx
-var RadioField = ({ className, label, value, ...remainingProps }) => /* @__PURE__ */ jsx(InlineFieldWrapper, {
+var RadioField = ({ className, label, value, ...rest }) => /* @__PURE__ */ jsx(InlineFieldWrapper, {
 	className,
 	label,
 	children: /* @__PURE__ */ jsx(RadioButton, {
 		value,
-		...remainingProps
+		...rest
 	})
 });
 RadioField.displayName = "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,oBAAC,oBAAD;CAA+B;CAAkB;WAC/C,oBAAC,aAAD;EAAoB;EAAO,GAAI;EAAkB,CAAA;CAC9B,CAAA;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 '../field-wrapper/InlineFieldWrapper'\nimport type { ValidationOptions } from '../form/validation'\nimport { RadioButton } from '../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  ...rest\n}: RadioFieldProps) => (\n  <InlineFieldWrapper className={className} label={label}>\n    <RadioButton value={value} {...rest} />\n  </InlineFieldWrapper>\n)\n\nRadioField.displayName = 'RadioField'\n"],"mappings":";;;;;AAcA,IAAa,cAAc,EACzB,WACA,OACA,OACA,GAAG,WAEH,oBAAC,oBAAD;CAA+B;CAAkB;WAC/C,oBAAC,aAAD;EAAoB;EAAO,GAAI;CAAO,CAAA;AACpB,CAAA;AAGtB,WAAW,cAAc"}

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

@@ -1,11 +1,9 @@
 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: import("../..").PolymorphicComponent<React.ForwardRefExoticComponent<RadioGroup.RadioGroupItemProps & React.RefAttributes<HTMLButtonElement>>, {
     align?: "left" | "right" | undefined;
-    size?: "md" | "lg" | undefined;
+    size?: "lg" | "md" | undefined;
     isFullWidth?: boolean | undefined;
-} & {
-    as?: React.ElementType;
 }>;
 type RadioCardProps = React.ComponentProps<typeof StyledRadioCard>;
 export declare const RadioCard: ({ children, isFullWidth, size, align, ...rest }: RadioCardProps) => React.JSX.Element;

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,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"}
+{"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;CACF;CACA,UAAU;EACR,OAAO;GACL,MAAM,CAAC,UAAU;GACjB,OAAO,CAAC,kBAAkB;EAC5B;EACA,MAAM;GACJ,IAAI,CAAC,QAAQ,MAAM;GACnB,IAAI,CAAC,QAAQ,MAAM;EACrB;EACA,aAAa;GACX,MAAM,CAAC,QAAQ;GACf,OAAO,CAAC,OAAO;EACjB;CACF;AACF,CAAC;AAED,IAAM,cAAc,OAAO,OAAO;CAChC,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU;EACR,sBAAsB;GACpB,MAAM,CAAC;GACP,OAAO,CAAC;EACV;EACA,OAAO;GACL,MAAM,CAAC,MAAM;GACb,OAAO,CAAC;EACV;CACF;CACA,kBAAkB,CAChB;EACE,sBAAsB;EACtB,OAAO;EACP,OAAO,CAAC,SAAS;CACnB,GACA;EACE,sBAAsB;EACtB,OAAO;EACP,OAAO,CAAC,MAAM;CAChB,CACF;AACF,CAAC;AAED,IAAM,YAAY,OAAO,WAAW,WAAW,EAC7C,MAAM;CAAC;CAAY;CAAgB;CAAY;AAAU,EAC3D,CAAC;AAID,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,CAAY,CAAA;CACD,CAAA,GACb,oBAAC,OAAD,EAAM,SAAc,CAAA,CACL"}

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,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"}
+{"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'\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":";;;;;;AAYA,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,SAAS;YACnE,QAAM,SAAS,IAAI,WAAW,UAAU;GACvC,IAAI,QAAM,eAAe,KAAK,KAAK,OAAO,SAAS,WACjD,OAAO,QAAM,aACX,OACA;IAAE;IAAM;IAAa;GAAM,CAC7B;GAEF,OAAO;EACT,CAAC;CACE,CAAA;AACU,CAAA"}

package/dist/components/search-field/SearchField.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { FieldElementWrapperProps } from '../../components/field-wrapper/FieldWrapper';
-import { SearchInputProps } from '../../components/search-input/SearchInput';
+import { type FieldElementWrapperProps } from '../field-wrapper/FieldWrapper';
+import { type SearchInputProps } from '../search-input/SearchInput';
 type SearchFieldProps = SearchInputProps & FieldElementWrapperProps;
-export declare const SearchField: {
-    ({ className, hideLabel, label, name, validation, prompt, description, appearance, theme, ...remainingProps }: SearchFieldProps): React.JSX.Element;
-    displayName: string;
-};
+export declare function SearchField({ className, hideLabel, label, name, validation, prompt, description, appearance, theme, ...rest }: SearchFieldProps): React.JSX.Element;
+export declare namespace SearchField {
+    var displayName: string;
+}
 export {};

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

@@ -6,7 +6,7 @@ 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 }) => {
+var SearchField = ({ className, hideLabel, label, name, validation, prompt, description, appearance, theme, ...rest }) => {
 	const { register } = useFormContext();
 	const context = useFormCustomContext();
 	const { error } = useFieldError(name);
@@ -30,7 +30,7 @@ var SearchField = ({ className, hideLabel, label, name, validation, prompt, desc
 			appearance: formAppearance,
 			theme: formTheme,
 			...error && { state: "error" },
-			...remainingProps
+			...rest
 		})
 	});
 };

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,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"}
+{"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  type FieldElementWrapperProps,\n  FieldWrapper\n} from '../field-wrapper/FieldWrapper'\nimport { useFieldError } from '../form/useFieldError'\nimport { useFormCustomContext } from '../form/useFormCustomContext'\nimport { SearchInput, type SearchInputProps } from '../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  ...rest\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        {...rest}\n      />\n    </FieldWrapper>\n  )\n}\n\nSearchField.displayName = 'SearchField'\n"],"mappings":";;;;;;;;AAaA,IAAa,eAAe,EAC1B,WACA,WACA,OACA,MACA,YACA,QACA,aACA,YACA,OACA,GAAG,WACmB;CACtB,MAAM,EAAE,aAAa,eAAe;CACpC,MAAM,UAAU,qBAAqB;CACrC,MAAM,EAAE,UAAU,cAAc,IAAI;CAEpC,MAAM,MAAM,aAAa,SAAS,UAAU,IAAI;CAChD,MAAM,iBAAiB,SAAS,cAAc;CAC9C,MAAM,YAAY,SAAS,SAAS;CAEpC,OACE,oBAAC,cAAD;EACa;EACE;EACN;EACP,SAAS;EACE;EACJ;EACC;EACR,UAAU,QAAQ,YAAY,QAAQ;EACtC,YAAY;YAEZ,oBAAC,aAAD;GACE,IAAI;GACE;GACD;GACL,YAAY;GACZ,OAAO;GACP,GAAK,SAAS,EAAE,OAAO,QAAQ;GAC/B,GAAI;EACL,CAAA;CACW,CAAA;AAElB;AAEA,YAAY,cAAc"}

package/dist/components/search-input/SearchInput.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Input } from '../../components/input/Input';
+import { Input } from '../input/Input';
 export type SearchInputProps = React.ComponentProps<typeof Input> & {
     size?: 'sm' | 'md' | 'lg';
     className?: string;
@@ -9,4 +9,4 @@ export type SearchInputProps = React.ComponentProps<typeof Input> & {
     clearText?: string;
     onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
 };
-export declare const SearchInput: React.ForwardRefExoticComponent<Omit<SearchInputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export declare const SearchInput: ({ ref, size, appearance, theme, className, value, defaultValue, onValueChange, clearText, onChange, ...rest }: SearchInputProps) => React.JSX.Element;

package/dist/components/search-input/SearchInput.js

@@ -2,17 +2,12 @@ import { cn, styled } from "../../styled.js";
 import { Icon } from "../icon/Icon.js";
 import { ActionIcon } from "../action-icon/ActionIcon.js";
 import { useCallbackRef } from "../../utilities/hooks/useCallbackRef.js";
-import { InputBackground, InputText } from "../input/Input.js";
 import { getFieldIconSize } from "../../utilities/style/get-icon-size.js";
+import { InputBackground, InputText } from "../input/Input.js";
 import * as React$1 from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Close, Search } from "@atom-learning/icons";
 //#region src/components/search-input/SearchInput.tsx
-var INPUT_ICON = /* @__PURE__ */ function(INPUT_ICON) {
-	INPUT_ICON["SEARCH"] = "SEARCH";
-	INPUT_ICON["CLEAR"] = "CLEAR";
-	return INPUT_ICON;
-}(INPUT_ICON || {});
 var StyledIcon = styled(Icon, {
 	base: [
 		"text-grey-700",
@@ -25,14 +20,14 @@ var StyledIcon = styled(Icon, {
 		lg: ["right-2.5", "size-5"]
 	} }
 });
-var SearchInput = React$1.forwardRef(({ size = "md", appearance = "standard", theme, className, value, defaultValue = "", onValueChange, clearText = "Clear", onChange, ...remainingProps }, ref) => {
+var SearchInput = ({ ref, size = "md", appearance = "standard", theme, className, value, defaultValue = "", onValueChange, clearText = "Clear", onChange, ...rest }) => {
 	const [inputElRef, setInputElRef] = useCallbackRef();
 	const [innerValue, setInnerValue] = React$1.useState(defaultValue);
-	const [activeIcon, setActiveIcon] = React$1.useState(defaultValue ? INPUT_ICON.CLEAR : INPUT_ICON.SEARCH);
+	const [activeIcon, setActiveIcon] = React$1.useState(defaultValue ? "CLEAR" : "SEARCH");
 	React$1.useEffect(() => {
 		if (typeof value === "undefined") return;
 		setInnerValue(value);
-		setActiveIcon(value ? INPUT_ICON.CLEAR : INPUT_ICON.SEARCH);
+		setActiveIcon(value ? "CLEAR" : "SEARCH");
 	}, [value]);
 	const iconSize = React$1.useMemo(() => getFieldIconSize(size), [size]);
 	React$1.useImperativeHandle(ref, () => inputElRef.current);
@@ -50,10 +45,10 @@ var SearchInput = React$1.forwardRef(({ size = "md", appearance = "standard", th
 		const newValue = event.target.value;
 		setInnerValue(newValue);
 		onValueChange?.(newValue);
-		setActiveIcon(newValue ? INPUT_ICON.CLEAR : INPUT_ICON.SEARCH);
+		setActiveIcon(newValue ? "CLEAR" : "SEARCH");
 	};
 	const getIcon = () => {
-		if (activeIcon === INPUT_ICON.SEARCH) return /* @__PURE__ */ jsx(StyledIcon, {
+		if (activeIcon === "SEARCH") return /* @__PURE__ */ jsx(StyledIcon, {
 			is: Search,
 			size,
 			className: cn(size == "sm" ? "size-4" : "size-5", "top-1/2", "-translate-y-1/2")
@@ -76,14 +71,13 @@ var SearchInput = React$1.forwardRef(({ size = "md", appearance = "standard", th
 			ref: setInputElRef,
 			size,
 			type: "search",
-			...remainingProps,
+			...rest,
 			value: innerValue,
 			onChange: handleOnChange,
 			className: cn(size === "sm" ? "pr-8" : "pr-10", "[&::-webkit-search-decoration]:appearance-none", "[&::-webkit-search-cancel-button]:appearance-none", "[&::-webkit-search-results-button]:appearance-none")
 		}), getIcon()]
 	});
-});
-SearchInput.displayName = "SearchInput";
+};
 //#endregion
 export { SearchInput };
 

package/dist/components/search-input/SearchInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchInput.js","names":[],"sources":["../../../src/components/search-input/SearchInput.tsx"],"sourcesContent":["import { Close, Search } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { ActionIcon } from '~/components/action-icon/ActionIcon'\nimport { Icon } from '~/components/icon/Icon'\nimport { Input, InputBackground, InputText } from '~/components/input/Input'\nimport { styled } from '~/styled'\nimport { cn } from '~/styled'\nimport { useCallbackRef } from '~/utilities/hooks/useCallbackRef'\nimport { getFieldIconSize } from '~/utilities/style/get-icon-size'\n\nexport type SearchInputProps = React.ComponentProps<typeof Input> & {\n  size?: 'sm' | 'md' | 'lg'\n  className?: string\n  value?: string\n  defaultValue?: string\n  onValueChange?: (newValue: string) => void\n  clearText?: string\n  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void\n}\n\nenum INPUT_ICON {\n  SEARCH = 'SEARCH',\n  CLEAR = 'CLEAR'\n}\n\nconst StyledIcon = styled(Icon, {\n  base: ['text-grey-700', 'absolute', 'pointer-events-none'],\n  variants: {\n    size: {\n      sm: ['right-2', 'size-4'],\n      md: ['right-2.5', 'size-5'],\n      lg: ['right-2.5', 'size-5']\n    }\n  }\n})\n\nexport const SearchInput = React.forwardRef<HTMLInputElement, SearchInputProps>(\n  (\n    {\n      size = 'md',\n      appearance = 'standard',\n      theme,\n      className,\n      value,\n      defaultValue = '',\n      onValueChange,\n      clearText = 'Clear',\n      onChange,\n      ...remainingProps\n    },\n    ref\n  ) => {\n    const [inputElRef, setInputElRef] = useCallbackRef()\n    const [innerValue, setInnerValue] = React.useState(defaultValue)\n    const [activeIcon, setActiveIcon] = React.useState<INPUT_ICON>(\n      defaultValue ? INPUT_ICON.CLEAR : INPUT_ICON.SEARCH\n    )\n    React.useEffect(() => {\n      if (typeof value === 'undefined') return\n      setInnerValue(value)\n      setActiveIcon(value ? INPUT_ICON.CLEAR : INPUT_ICON.SEARCH)\n    }, [value])\n\n    const iconSize = React.useMemo(() => getFieldIconSize(size), [size])\n\n    React.useImperativeHandle(ref, () => inputElRef.current as HTMLInputElement)\n\n    const handleClear = () => {\n      const inputEl = inputElRef.current\n      if (!inputEl) return\n\n      // https://stackoverflow.com/a/46012210\n      const nativeInputValueSetter = Object.getOwnPropertyDescriptor(\n        window.HTMLInputElement.prototype,\n        'value'\n      )?.set\n      nativeInputValueSetter?.call?.(inputEl, '')\n      const ev2 = new Event('input', {\n        bubbles: true\n      })\n      inputEl.dispatchEvent(ev2)\n      inputEl.focus()\n      onValueChange?.('')\n    }\n\n    const handleOnChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n      onChange?.(event)\n\n      const newValue = event.target.value\n      setInnerValue(newValue)\n      onValueChange?.(newValue)\n      setActiveIcon(newValue ? INPUT_ICON.CLEAR : INPUT_ICON.SEARCH)\n    }\n\n    const getIcon = () => {\n      if (activeIcon === INPUT_ICON.SEARCH)\n        return (\n          <StyledIcon\n            is={Search}\n            size={size}\n            className={cn(\n              size == 'sm' ? 'size-4' : 'size-5',\n              'top-1/2',\n              '-translate-y-1/2'\n            )}\n          />\n        )\n\n      return (\n        <ActionIcon\n          label={clearText}\n          theme=\"neutral\"\n          size={iconSize}\n          onClick={handleClear}\n          className=\"absolute top-1/2 right-1 -translate-y-1/2\"\n        >\n          <Icon is={Close} />\n        </ActionIcon>\n      )\n    }\n\n    return (\n      <InputBackground\n        size={size}\n        appearance={appearance}\n        theme={theme}\n        className={cn('relative', 'w-auto', className)}\n      >\n        <InputText\n          ref={setInputElRef}\n          size={size}\n          type=\"search\"\n          {...remainingProps}\n          value={innerValue}\n          onChange={handleOnChange}\n          className={cn(\n            size === 'sm' ? 'pr-8' : 'pr-10',\n            '[&::-webkit-search-decoration]:appearance-none',\n            '[&::-webkit-search-cancel-button]:appearance-none',\n            '[&::-webkit-search-results-button]:appearance-none'\n          )}\n        />\n        {getIcon()}\n      </InputBackground>\n    )\n  }\n)\n\nSearchInput.displayName = 'SearchInput'\n"],"mappings":";;;;;;;;;;AAqBA,IAAK,aAAL,yBAAA,YAAA;AACE,YAAA,YAAA;AACA,YAAA,WAAA;;EAFG,cAAA,EAAA,CAGJ;AAED,IAAM,aAAa,OAAO,MAAM;CAC9B,MAAM;EAAC;EAAiB;EAAY;EAAsB;CAC1D,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,WAAW,SAAS;EACzB,IAAI,CAAC,aAAa,SAAS;EAC3B,IAAI,CAAC,aAAa,SAAS;EAC5B,EACF;CACF,CAAC;AAEF,IAAa,cAAc,QAAM,YAE7B,EACE,OAAO,MACP,aAAa,YACb,OACA,WACA,OACA,eAAe,IACf,eACA,YAAY,SACZ,UACA,GAAG,kBAEL,QACG;CACH,MAAM,CAAC,YAAY,iBAAiB,gBAAgB;CACpD,MAAM,CAAC,YAAY,iBAAiB,QAAM,SAAS,aAAa;CAChE,MAAM,CAAC,YAAY,iBAAiB,QAAM,SACxC,eAAe,WAAW,QAAQ,WAAW,OAC9C;AACD,SAAM,gBAAgB;AACpB,MAAI,OAAO,UAAU,YAAa;AAClC,gBAAc,MAAM;AACpB,gBAAc,QAAQ,WAAW,QAAQ,WAAW,OAAO;IAC1D,CAAC,MAAM,CAAC;CAEX,MAAM,WAAW,QAAM,cAAc,iBAAiB,KAAK,EAAE,CAAC,KAAK,CAAC;AAEpE,SAAM,oBAAoB,WAAW,WAAW,QAA4B;CAE5E,MAAM,oBAAoB;EACxB,MAAM,UAAU,WAAW;AAC3B,MAAI,CAAC,QAAS;AAOd,GAJ+B,OAAO,yBACpC,OAAO,iBAAiB,WACxB,QACD,EAAE,MACqB,OAAO,SAAS,GAAG;EAC3C,MAAM,MAAM,IAAI,MAAM,SAAS,EAC7B,SAAS,MACV,CAAC;AACF,UAAQ,cAAc,IAAI;AAC1B,UAAQ,OAAO;AACf,kBAAgB,GAAG;;CAGrB,MAAM,kBAAkB,UAA+C;AACrE,aAAW,MAAM;EAEjB,MAAM,WAAW,MAAM,OAAO;AAC9B,gBAAc,SAAS;AACvB,kBAAgB,SAAS;AACzB,gBAAc,WAAW,WAAW,QAAQ,WAAW,OAAO;;CAGhE,MAAM,gBAAgB;AACpB,MAAI,eAAe,WAAW,OAC5B,QACE,oBAAC,YAAD;GACE,IAAI;GACE;GACN,WAAW,GACT,QAAQ,OAAO,WAAW,UAC1B,WACA,mBACD;GACD,CAAA;AAGN,SACE,oBAAC,YAAD;GACE,OAAO;GACP,OAAM;GACN,MAAM;GACN,SAAS;GACT,WAAU;aAEV,oBAAC,MAAD,EAAM,IAAI,OAAS,CAAA;GACR,CAAA;;AAIjB,QACE,qBAAC,iBAAD;EACQ;EACM;EACL;EACP,WAAW,GAAG,YAAY,UAAU,UAAU;YAJhD,CAME,oBAAC,WAAD;GACE,KAAK;GACC;GACN,MAAK;GACL,GAAI;GACJ,OAAO;GACP,UAAU;GACV,WAAW,GACT,SAAS,OAAO,SAAS,SACzB,kDACA,qDACA,qDACD;GACD,CAAA,EACD,SAAS,CACM;;EAGvB;AAED,YAAY,cAAc"}
+{"version":3,"file":"SearchInput.js","names":[],"sources":["../../../src/components/search-input/SearchInput.tsx"],"sourcesContent":["import { Close, Search } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { styled, cn } from '../../styled'\nimport { useCallbackRef } from '../../utilities/hooks/useCallbackRef'\nimport { getFieldIconSize } from '../../utilities/style/get-icon-size'\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\nimport { Input, InputBackground, InputText } from '../input/Input'\n\nexport type SearchInputProps = React.ComponentProps<typeof Input> & {\n  size?: 'sm' | 'md' | 'lg'\n  className?: string\n  value?: string\n  defaultValue?: string\n  onValueChange?: (newValue: string) => void\n  clearText?: string\n  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void\n}\n\nenum INPUT_ICON {\n  SEARCH = 'SEARCH',\n  CLEAR = 'CLEAR'\n}\n\nconst StyledIcon = styled(Icon, {\n  base: ['text-grey-700', 'absolute', 'pointer-events-none'],\n  variants: {\n    size: {\n      sm: ['right-2', 'size-4'],\n      md: ['right-2.5', 'size-5'],\n      lg: ['right-2.5', 'size-5']\n    }\n  }\n})\n\nexport const SearchInput = ({\n  ref,\n  size = 'md',\n  appearance = 'standard',\n  theme,\n  className,\n  value,\n  defaultValue = '',\n  onValueChange,\n  clearText = 'Clear',\n  onChange,\n  ...rest\n}: SearchInputProps) => {\n  const [inputElRef, setInputElRef] = useCallbackRef()\n  const [innerValue, setInnerValue] = React.useState(defaultValue)\n  const [activeIcon, setActiveIcon] = React.useState<INPUT_ICON>(\n    defaultValue ? INPUT_ICON.CLEAR : INPUT_ICON.SEARCH\n  )\n  React.useEffect(() => {\n    if (typeof value === 'undefined') return\n    setInnerValue(value)\n    setActiveIcon(value ? INPUT_ICON.CLEAR : INPUT_ICON.SEARCH)\n  }, [value])\n\n  const iconSize = React.useMemo(() => getFieldIconSize(size), [size])\n\n  React.useImperativeHandle(ref, () => inputElRef.current as HTMLInputElement)\n\n  const handleClear = () => {\n    const inputEl = inputElRef.current\n    if (!inputEl) return\n\n    // https://stackoverflow.com/a/46012210\n    const nativeInputValueSetter = Object.getOwnPropertyDescriptor(\n      window.HTMLInputElement.prototype,\n      'value'\n    )?.set\n    nativeInputValueSetter?.call?.(inputEl, '')\n    const ev2 = new Event('input', {\n      bubbles: true\n    })\n    inputEl.dispatchEvent(ev2)\n    inputEl.focus()\n    onValueChange?.('')\n  }\n\n  const handleOnChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    onChange?.(event)\n\n    const newValue = event.target.value\n    setInnerValue(newValue)\n    onValueChange?.(newValue)\n    setActiveIcon(newValue ? INPUT_ICON.CLEAR : INPUT_ICON.SEARCH)\n  }\n\n  const getIcon = () => {\n    if (activeIcon === INPUT_ICON.SEARCH)\n      return (\n        <StyledIcon\n          is={Search}\n          size={size}\n          className={cn(\n            size == 'sm' ? 'size-4' : 'size-5',\n            'top-1/2',\n            '-translate-y-1/2'\n          )}\n        />\n      )\n\n    return (\n      <ActionIcon\n        label={clearText}\n        theme=\"neutral\"\n        size={iconSize}\n        onClick={handleClear}\n        className=\"absolute top-1/2 right-1 -translate-y-1/2\"\n      >\n        <Icon is={Close} />\n      </ActionIcon>\n    )\n  }\n\n  return (\n    <InputBackground\n      size={size}\n      appearance={appearance}\n      theme={theme}\n      className={cn('relative', 'w-auto', className)}\n    >\n      <InputText\n        ref={setInputElRef}\n        size={size}\n        type=\"search\"\n        {...rest}\n        value={innerValue}\n        onChange={handleOnChange}\n        className={cn(\n          size === 'sm' ? 'pr-8' : 'pr-10',\n          '[&::-webkit-search-decoration]:appearance-none',\n          '[&::-webkit-search-cancel-button]:appearance-none',\n          '[&::-webkit-search-results-button]:appearance-none'\n        )}\n      />\n      {getIcon()}\n    </InputBackground>\n  )\n}\n"],"mappings":";;;;;;;;;;AAyBA,IAAM,aAAa,OAAO,MAAM;CAC9B,MAAM;EAAC;EAAiB;EAAY;CAAqB;CACzD,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,WAAW,QAAQ;EACxB,IAAI,CAAC,aAAa,QAAQ;EAC1B,IAAI,CAAC,aAAa,QAAQ;CAC5B,EACF;AACF,CAAC;AAED,IAAa,eAAe,EAC1B,KACA,OAAO,MACP,aAAa,YACb,OACA,WACA,OACA,eAAe,IACf,eACA,YAAY,SACZ,UACA,GAAG,WACmB;CACtB,MAAM,CAAC,YAAY,iBAAiB,eAAe;CACnD,MAAM,CAAC,YAAY,iBAAiB,QAAM,SAAS,YAAY;CAC/D,MAAM,CAAC,YAAY,iBAAiB,QAAM,SACxC,eAAA,UAAA,QACF;CACA,QAAM,gBAAgB;EACpB,IAAI,OAAO,UAAU,aAAa;EAClC,cAAc,KAAK;EACnB,cAAc,QAAA,UAAA,QAA4C;CAC5D,GAAG,CAAC,KAAK,CAAC;CAEV,MAAM,WAAW,QAAM,cAAc,iBAAiB,IAAI,GAAG,CAAC,IAAI,CAAC;CAEnE,QAAM,oBAAoB,WAAW,WAAW,OAA2B;CAE3E,MAAM,oBAAoB;EACxB,MAAM,UAAU,WAAW;EAC3B,IAAI,CAAC,SAAS;EAOd,CAJ+B,OAAO,yBACpC,OAAO,iBAAiB,WACxB,OACF,CAAC,EAAE,IAAA,EACqB,OAAO,SAAS,EAAE;EAC1C,MAAM,MAAM,IAAI,MAAM,SAAS,EAC7B,SAAS,KACX,CAAC;EACD,QAAQ,cAAc,GAAG;EACzB,QAAQ,MAAM;EACd,gBAAgB,EAAE;CACpB;CAEA,MAAM,kBAAkB,UAA+C;EACrE,WAAW,KAAK;EAEhB,MAAM,WAAW,MAAM,OAAO;EAC9B,cAAc,QAAQ;EACtB,gBAAgB,QAAQ;EACxB,cAAc,WAAA,UAAA,QAA+C;CAC/D;CAEA,MAAM,gBAAgB;EACpB,IAAI,eAAA,UACF,OACE,oBAAC,YAAD;GACE,IAAI;GACE;GACN,WAAW,GACT,QAAQ,OAAO,WAAW,UAC1B,WACA,kBACF;EACD,CAAA;EAGL,OACE,oBAAC,YAAD;GACE,OAAO;GACP,OAAM;GACN,MAAM;GACN,SAAS;GACT,WAAU;aAEV,oBAAC,MAAD,EAAM,IAAI,MAAQ,CAAA;EACR,CAAA;CAEhB;CAEA,OACE,qBAAC,iBAAD;EACQ;EACM;EACL;EACP,WAAW,GAAG,YAAY,UAAU,SAAS;YAJ/C,CAME,oBAAC,WAAD;GACE,KAAK;GACC;GACN,MAAK;GACL,GAAI;GACJ,OAAO;GACP,UAAU;GACV,WAAW,GACT,SAAS,OAAO,SAAS,SACzB,kDACA,qDACA,oDACF;EACD,CAAA,GACA,QAAQ,CACM;;AAErB"}

package/dist/components/section-message/{SectionMessageContext.d.ts → SectionMessage.context.d.ts}

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import type { SectionMessageTheme } from './SectionMessage';
 export type SectionMessageContextValue = {
     theme: SectionMessageTheme;

package/dist/components/section-message/{SectionMessageContext.js → SectionMessage.context.js}

@@ -1,11 +1,11 @@
-import React from "react";
+import * as React$1 from "react";
 import { jsx } from "react/jsx-runtime";
-//#region src/components/section-message/SectionMessageContext.tsx
-var SectionMessageContext = React.createContext(null);
+//#region src/components/section-message/SectionMessage.context.tsx
+var SectionMessageContext = React$1.createContext(null);
 var SectionMessageProvider = ({ theme = "info", children }) => {
-	const [hasIcon, setHasIcon] = React.useState(false);
-	const [hasDismiss, setHasDismiss] = React.useState(false);
-	const value = React.useMemo(() => ({
+	const [hasIcon, setHasIcon] = React$1.useState(false);
+	const [hasDismiss, setHasDismiss] = React$1.useState(false);
+	const value = React$1.useMemo(() => ({
 		theme,
 		hasIcon,
 		setHasIcon,
@@ -24,11 +24,11 @@ var SectionMessageProvider = ({ theme = "info", children }) => {
 	});
 };
 var useSectionMessageContext = () => {
-	const context = React.useContext(SectionMessageContext);
+	const context = React$1.useContext(SectionMessageContext);
 	if (!context) throw new Error("useSectionMessageContext must be used within a SectionMessageProvider");
 	return context;
 };
 //#endregion
-export { SectionMessageProvider, useSectionMessageContext };
+export { SectionMessageContext, SectionMessageProvider, useSectionMessageContext };
 
-//# sourceMappingURL=SectionMessageContext.js.map
+//# sourceMappingURL=SectionMessage.context.js.map

package/dist/components/section-message/SectionMessage.context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SectionMessage.context.js","names":[],"sources":["../../../src/components/section-message/SectionMessage.context.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport type { SectionMessageTheme } from './SectionMessage'\n\nexport type SectionMessageContextValue = {\n  theme: SectionMessageTheme\n  hasIcon: boolean\n  setHasIcon: React.Dispatch<React.SetStateAction<boolean>>\n  hasDismiss: boolean\n  setHasDismiss: React.Dispatch<React.SetStateAction<boolean>>\n}\nexport type SectionMessageProviderProps = {\n  theme: SectionMessageTheme\n  children: React.ReactNode\n}\n\nexport const SectionMessageContext =\n  React.createContext<SectionMessageContextValue | null>(null)\n\nexport const SectionMessageProvider = ({\n  theme = 'info',\n  children\n}: SectionMessageProviderProps) => {\n  const [hasIcon, setHasIcon] = React.useState(false)\n  const [hasDismiss, setHasDismiss] = React.useState(false)\n\n  const value = React.useMemo<SectionMessageContextValue>(\n    () => ({ theme, hasIcon, setHasIcon, hasDismiss, setHasDismiss }),\n    [theme, hasIcon, setHasIcon, hasDismiss, setHasDismiss]\n  )\n\n  return (\n    <SectionMessageContext.Provider value={value}>\n      {children}\n    </SectionMessageContext.Provider>\n  )\n}\n\nexport const useSectionMessageContext = (): SectionMessageContextValue => {\n  const context = React.useContext(SectionMessageContext)\n\n  if (!context) {\n    throw new Error(\n      'useSectionMessageContext must be used within a SectionMessageProvider'\n    )\n  }\n\n  return context\n}\n"],"mappings":";;;AAgBA,IAAa,wBACX,QAAM,cAAiD,IAAI;AAE7D,IAAa,0BAA0B,EACrC,QAAQ,QACR,eACiC;CACjC,MAAM,CAAC,SAAS,cAAc,QAAM,SAAS,KAAK;CAClD,MAAM,CAAC,YAAY,iBAAiB,QAAM,SAAS,KAAK;CAExD,MAAM,QAAQ,QAAM,eACX;EAAE;EAAO;EAAS;EAAY;EAAY;CAAc,IAC/D;EAAC;EAAO;EAAS;EAAY;EAAY;CAAa,CACxD;CAEA,OACE,oBAAC,sBAAsB,UAAvB;EAAuC;EACpC;CAC6B,CAAA;AAEpC;AAEA,IAAa,iCAA6D;CACxE,MAAM,UAAU,QAAM,WAAW,qBAAqB;CAEtD,IAAI,CAAC,SACH,MAAM,IAAI,MACR,uEACF;CAGF,OAAO;AACT"}

package/dist/components/section-message/SectionMessage.d.ts

@@ -1,12 +1,13 @@
-import React from 'react';
-declare const StyledSectionMessage: React.ForwardRefExoticComponent<Omit<import("../dismissible/DismissibleRoot").IDismissibleRootInternalProps & import("../dismissible/DismissibleRoot").IDismissibleRootProps & {
-    children?: React.ReactNode | undefined;
-}, "theme" | "hasDismiss" | "hasIcon"> & {
-    theme?: "neutral" | "success" | "warning" | "info" | "error" | undefined;
+import * as React from 'react';
+declare const StyledSectionMessage: import("../..").PolymorphicComponent<{
+    ({ disabled, dismissed, onDismiss, ...rest }: React.PropsWithChildren<import("../dismissible/DismissibleRoot").DismissibleRootInternalProps & import("../dismissible/DismissibleRoot").DismissibleRootProps>): React.JSX.Element;
+    displayName: string;
+} & {
+    Trigger: ({ asChild, ...rest }: React.PropsWithChildren<import("../dismissible/DismissibleTrigger").DismissibleTriggerProps>) => React.JSX.Element;
+}, {
+    theme?: "error" | "info" | "neutral" | "success" | "warning" | undefined;
     hasIcon?: boolean | undefined;
     hasDismiss?: boolean | undefined;
-} & {
-    as?: React.ElementType;
 }>;
 declare const SectionMessageRoot: ({ children, ...rest }: React.ComponentProps<typeof StyledSectionMessage> & {
     className?: string;
@@ -15,22 +16,19 @@ export type SectionMessageTheme = 'success' | 'warning' | 'error' | 'neutral' |
 export type SectionMessageProps = React.ComponentProps<typeof SectionMessageRoot> & {
     theme?: SectionMessageTheme;
 };
-export declare const SectionMessage: {
-    ({ theme, ...rest }: SectionMessageProps): React.JSX.Element;
-    Title: (props: React.ComponentProps<typeof import("..").Text>) => React.JSX.Element;
+export declare const SectionMessage: (({ theme, ...rest }: SectionMessageProps) => React.JSX.Element) & {
+    Title: (props: import("../text/Text").TextProps) => React.JSX.Element;
     Description: ({ className, ...rest }: React.ComponentProps<typeof import("..").Text>) => React.JSX.Element;
-    Icon: ({ className, is, ...rest }: Partial<Omit<Omit<Omit<React.SVGProps<SVGSVGElement>, "size"> & {
-        size?: ("sm" | "md" | "lg" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "lg">>) | undefined;
+    Icon: ({ className, is, ...rest }: Partial<Omit<{
+        size?: ("lg" | "md" | "sm" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "lg" | "md" | "sm">>) | undefined;
     } & {
-        as?: React.ElementType;
-    }, "as" | "is"> & {
+        as?: never;
+    } & Omit<React.SVGProps<SVGSVGElement>, "as" | "size">, "as" | "is"> & {
         is: React.FC<React.SVGProps<SVGSVGElement>>;
         as?: never;
-    }, "ref"> & React.RefAttributes<SVGSVGElement>>) => React.JSX.Element;
+    }>) => React.JSX.Element;
     Dismiss: ({ label, className, ...rest }: React.ComponentProps<typeof import("..").ActionIcon>) => React.JSX.Element;
-    Content: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & {
-        as?: React.ElementType;
-    }>;
-    Actions: ({ className, ...rest }: React.ComponentProps<"div">) => React.JSX.Element;
+    Content: import("../..").PolymorphicComponent<"div", unknown>;
+    Actions: ({ className, ...rest }: React.ComponentProps<'div'>) => React.JSX.Element;
 };
 export {};