@atom-learning/components 6.4.2 → 6.5.0

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

@@ -1 +1 @@
-{"version":3,"file":"RadioButtonField.js","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: ['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"],"names":["Fieldset","styled","RadioButtonFieldComponent","children","className","direction","defaultValue","value","description","label","name","validation","onValueChange","remainingProps","control","useFormContext","ref","onChange","innerValue","useController","error","useFieldError","React","Label","FieldDescription","RadioButtonGroup","newValue","InlineMessage","RadioButtonField","RadioField"],"mappings":"keAaA,MAAMA,EAAWC,EAAO,WAAY,CAClC,KAAM,CAAC,SAAS,CAClB,CAAC,EAKKC,EAA4B,CAAC,CACjC,SAAAC,EACA,UAAAC,EACA,UAAAC,EAAY,SACZ,aAAAC,EACA,MAAAC,EACA,YAAAC,EACA,MAAAC,EACA,KAAAC,EACA,WAAAC,EACA,cAAAC,EACA,GAAGC,CACL,IAA6B,CAC3B,KAAM,CAAE,QAAAC,CAAQ,EAAIC,IACd,CACJ,MAAO,CAAE,IAAAC,EAAK,SAAAC,EAAU,MAAOC,CAAW,CAC5C,EAAIC,EAAc,CAChB,KAAAT,EACA,QAAAI,EACA,MAAOH,EACP,aAAAL,CACF,CAAC,EACK,CAAE,MAAAc,CAAM,EAAIC,EAAcX,CAAI,EAEpC,OAAAY,EAAM,UAAU,IAAM,CAEhB,OAAOf,EAAU,KAAaU,EAASV,CAAK,CAClD,EAAG,CAACA,CAAK,CAAC,EAGRe,EAAA,cAACtB,EAAA,CAAS,UAAWI,GACnBkB,EAAA,cAACC,EAAA,CACC,GAAG,SACH,SAAU,CAAQZ,EAAAA,GAAA,MAAAA,EAAY,UAC9B,UAAU,UAAA,EAETF,CACH,EACCD,GACCc,EAAA,cAACE,EAAA,CAAiB,UAAU,MAAA,EAAQhB,CAAY,EAGlDc,EAAA,cAACG,EAAA,CACC,IAAKT,EACL,UAAWX,EACX,aAAcC,EACd,cAAgBoB,GAAa,CAC3BT,EAASS,CAAQ,EACjBd,GAAA,MAAAA,EAAgBc,CAAAA,CAClB,EACA,MAAOR,EACN,GAAGL,GAEHV,CACH,EAECiB,GAASE,EAAA,cAACK,EAAA,CAAc,UAAU,MAAQP,EAAAA,CAAM,CACnD,CAEJ,EAEaQ,EAAmB,OAAO,OAAO1B,EAA2B,CACvE,KAAM2B,CACR,CAAC,EAED3B,EAA0B,YAAc"}
+{"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: ['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,IAAW,EAAO,YAAY,EAClC,MAAM,CAAC,UAAU,EAClB,CAAC,EAKI,KAA6B,EACjC,aACA,cACA,eAAY,UACZ,iBACA,UACA,gBACA,UACA,SACA,eACA,kBACA,GAAG,QACwB;CAC3B,IAAM,EAAE,eAAY,GAAgB,EAC9B,EACJ,OAAO,EAAE,QAAK,aAAU,OAAO,QAC7B,EAAc;EAChB;EACA;EACA,OAAO;EACP;EACD,CAAC,EACI,EAAE,aAAU,EAAc,EAAK;AAOrC,QALA,EAAM,gBAAgB;AAEpB,EAAW,MAAU,UAAa,EAAS,EAAM;IAChD,CAAC,EAAM,CAAC,EAGT,kBAAA,cAAC,GAAD,EAAqB,cA2BV,EA1BT,kBAAA,cAAC,GAAD;EACE,IAAG;EACH,UAAU,EAAQ,GAAY;EAC9B,WAAU;EAGJ,EADL,EACK,EACP,KACC,kBAAA,cAAC,GAAD,EAAkB,WAAU,QAAuC,EAA/B,EAA+B,EAGrE,kBAAA,cAAC,GAAD;EACO;EACM;EACG;EACd,gBAAgB,MAAa;AAE3B,GADA,EAAS,EAAS,EAClB,IAAgB,EAAS;;EAE3B,OAAO;EACP,GAAI;EAGa,EADhB,EACgB,EAElB,KAAS,kBAAA,cAAC,GAAD,EAAe,WAAU,QAA8B,EAAtB,EAAsB,CACxD;GAIF,IAAmB,OAAO,OAAO,GAA2B,EACvE,MAAM,GACP,CAAC;AAEF,EAA0B,cAAc"}

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

@@ -1,2 +1,16 @@
-import*as e from"react";import{InlineFieldWrapper as r}from"../field-wrapper/InlineFieldWrapper.js";import{RadioButton as t}from"../radio-button/RadioButton.js";const a=({className:l,label:o,value:i,...m})=>e.createElement(r,{className:l,label:o},e.createElement(t,{value:i,...m}));a.displayName="RadioField";export{a as RadioField};
-//# sourceMappingURL=RadioField.js.map
+import { RadioButton as e } from "../radio-button/RadioButton.js";
+import { InlineFieldWrapper as t } from "../field-wrapper/InlineFieldWrapper.js";
+import * as n from "react";
+//#region src/components/radio-button-field/RadioField.tsx
+var r = ({ className: r, label: i, value: a, ...o }) => /* @__PURE__ */ n.createElement(t, {
+	className: r,
+	label: i
+}, /* @__PURE__ */ n.createElement(e, {
+	value: a,
+	...o
+}));
+r.displayName = "RadioField";
+//#endregion
+export { r as RadioField };
+
+//# sourceMappingURL=RadioField.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"RadioField.js","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"],"names":["RadioField","className","label","value","remainingProps","React","InlineFieldWrapper","RadioButton"],"mappings":"iKAca,MAAAA,EAAa,CAAC,CACzB,UAAAC,EACA,MAAAC,EACA,MAAAC,EACA,GAAGC,CACL,IACEC,EAAA,cAACC,EAAA,CAAmB,UAAWL,EAAW,MAAOC,CAC/CG,EAAAA,EAAA,cAACE,EAAA,CAAY,MAAOJ,EAAQ,GAAGC,EAAgB,CACjD,EAGFJ,EAAW,YAAc"}
+{"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,KAAc,EACzB,cACA,UACA,UACA,GAAG,QAEH,kBAAA,cAAC,GAAD;CAA+B;CAAkB;CAE5B,EADnB,kBAAA,cAAC,GAAD;CAAoB;CAAO,GAAI;CAAkB,CAAA,CAC9B;AAGvB,EAAW,cAAc"}

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

@@ -1,2 +1,87 @@
-import*as i from"@radix-ui/react-radio-group";import*as e from"react";import{styled as t}from"../../styled.js";const d=t(i.Item,{base:["items-center","bg-white","border","border-grey-600","rounded-sm","cursor-pointer","flex","text-left","data-[state=checked]:-outline-offset-2","data-[state=checked]:outline-2","data-[state=checked]:outline-primary-800","data-[state=checked]:outline-solid"],variants:{align:{left:["flex-row"],right:["flex-row-reverse"]},size:{md:["px-4","py-3"],lg:["px-8","py-4"]},isFullWidth:{true:["w-full"],false:["w-max"]}}}),o=t("div",{base:["items-center","appearance-none","border","border-grey-900","rounded-full","flex","shrink-0","justify-center","size-4","transition-all","duration-50","ease-out","in-data-[state=checked]:bg-primary-800","in-data-[state=checked]:border-primary-800"],variants:{containerIsFullWidth:{true:[],false:[]},align:{left:["mr-4"],right:[]}},compoundVariants:[{containerIsFullWidth:!0,align:"right",class:["ml-auto"]},{containerIsFullWidth:!1,align:"right",class:["ml-4"]}]}),c=t(i.Indicator,{base:["bg-white","rounded-full","absolute","size-1.5"]}),u=({children:l,isFullWidth:a=!1,size:n="md",align:r="left",...s})=>e.createElement(d,{...s,align:r,isFullWidth:a,size:n},e.createElement(o,{align:r,containerIsFullWidth:a},e.createElement(c,null)),e.createElement("div",null,l));export{u as RadioCard};
-//# sourceMappingURL=RadioCard.js.map
+import { styled as e } from "../../styled.js";
+import * as t from "react";
+import * as n from "@radix-ui/react-radio-group";
+//#region src/components/radio-card/RadioCard.tsx
+var r = e(n.Item, {
+	base: [
+		"items-center",
+		"bg-white",
+		"border",
+		"border-grey-600",
+		"rounded-sm",
+		"cursor-pointer",
+		"flex",
+		"text-left",
+		"data-[state=checked]:-outline-offset-2",
+		"data-[state=checked]:outline-2",
+		"data-[state=checked]:outline-primary-800",
+		"data-[state=checked]:outline-solid"
+	],
+	variants: {
+		align: {
+			left: ["flex-row"],
+			right: ["flex-row-reverse"]
+		},
+		size: {
+			md: ["px-4", "py-3"],
+			lg: ["px-8", "py-4"]
+		},
+		isFullWidth: {
+			true: ["w-full"],
+			false: ["w-max"]
+		}
+	}
+}), i = e("div", {
+	base: [
+		"items-center",
+		"appearance-none",
+		"border",
+		"border-grey-900",
+		"rounded-full",
+		"flex",
+		"shrink-0",
+		"justify-center",
+		"size-4",
+		"transition-all",
+		"duration-50",
+		"ease-out",
+		"in-data-[state=checked]:bg-primary-800",
+		"in-data-[state=checked]:border-primary-800"
+	],
+	variants: {
+		containerIsFullWidth: {
+			true: [],
+			false: []
+		},
+		align: {
+			left: ["mr-4"],
+			right: []
+		}
+	},
+	compoundVariants: [{
+		containerIsFullWidth: !0,
+		align: "right",
+		class: ["ml-auto"]
+	}, {
+		containerIsFullWidth: !1,
+		align: "right",
+		class: ["ml-4"]
+	}]
+}), a = e(n.Indicator, { base: [
+	"bg-white",
+	"rounded-full",
+	"absolute",
+	"size-1.5"
+] }), o = ({ children: e, isFullWidth: n = !1, size: o = "md", align: s = "left", ...c }) => /* @__PURE__ */ t.createElement(r, {
+	...c,
+	align: s,
+	isFullWidth: n,
+	size: o
+}, /* @__PURE__ */ t.createElement(i, {
+	align: s,
+	containerIsFullWidth: n
+}, /* @__PURE__ */ t.createElement(a, null)), /* @__PURE__ */ t.createElement("div", null, e));
+//#endregion
+export { o as RadioCard };
+
+//# sourceMappingURL=RadioCard.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"RadioCard.js","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    'border',\n    'border-grey-900',\n    'rounded-full',\n    'flex',\n    'shrink-0',\n    'justify-center',\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"],"names":["StyledRadioCard","styled","RadioGroup","RadioButton","Indicator","RadioCard","children","isFullWidth","size","align","rest","React"],"mappings":"+GAKA,MAAMA,EAAkBC,EAAOC,EAAW,KAAM,CAC9C,KAAM,CACJ,eACA,WACA,SACA,kBACA,aACA,iBACA,OACA,YACA,yCACA,iCACA,2CACA,oCACF,EACA,SAAU,CACR,MAAO,CACL,KAAM,CAAC,UAAU,EACjB,MAAO,CAAC,kBAAkB,CAC5B,EACA,KAAM,CACJ,GAAI,CAAC,OAAQ,MAAM,EACnB,GAAI,CAAC,OAAQ,MAAM,CACrB,EACA,YAAa,CACX,KAAM,CAAC,QAAQ,EACf,MAAO,CAAC,OAAO,CACjB,CACF,CACF,CAAC,EAEKC,EAAcF,EAAO,MAAO,CAChC,KAAM,CACJ,eACA,kBACA,SACA,kBACA,eACA,OACA,WACA,iBACA,SACA,iBACA,cACA,WACA,yCACA,4CACF,EACA,SAAU,CACR,qBAAsB,CACpB,KAAM,CAAA,EACN,MAAO,CACT,CAAA,EACA,MAAO,CACL,KAAM,CAAC,MAAM,EACb,MAAO,EACT,CACF,EACA,iBAAkB,CAChB,CACE,qBAAsB,GACtB,MAAO,QACP,MAAO,CAAC,SAAS,CACnB,EACA,CACE,qBAAsB,GACtB,MAAO,QACP,MAAO,CAAC,MAAM,CAChB,CACF,CACF,CAAC,EAEKG,EAAYH,EAAOC,EAAW,UAAW,CAC7C,KAAM,CAAC,WAAY,eAAgB,WAAY,UAAU,CAC3D,CAAC,EAIYG,EAAY,CAAC,CACxB,SAAAC,EACA,YAAAC,EAAc,GACd,KAAAC,EAAO,KACP,MAAAC,EAAQ,OACR,GAAGC,CACL,IACEC,EAAA,cAACX,EAAA,CACE,GAAGU,EACJ,MAAOD,EACP,YAAaF,EACb,KAAMC,CAAAA,EAENG,EAAA,cAACR,EAAA,CAAY,MAAOM,EAAO,qBAAsBF,GAC/CI,EAAA,cAACP,EAAA,IAAU,CACb,EACAO,EAAA,cAAC,MAAKL,KAAAA,CAAS,CACjB"}
+{"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    'border',\n    'border-grey-900',\n    'rounded-full',\n    'flex',\n    'shrink-0',\n    'justify-center',\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,IAAkB,EAAO,EAAW,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,EAEI,IAAc,EAAO,OAAO;CAChC,MAAM;EACJ;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,EAEI,IAAY,EAAO,EAAW,WAAW,EAC7C,MAAM;CAAC;CAAY;CAAgB;CAAY;CAAW,EAC3D,CAAC,EAIW,KAAa,EACxB,aACA,iBAAc,IACd,UAAO,MACP,WAAQ,QACR,GAAG,QAEH,kBAAA,cAAC,GAAD;CACE,GAAI;CACG;CACM;CACP;CAMU,EAJhB,kBAAA,cAAC,GAAD;CAAoB;CAAO,sBAAsB;CAEnC,EADZ,kBAAA,cAAC,GAAA,KAAY,CACD,EACd,kBAAA,cAAC,OAAA,MAAK,EAAe,CACL"}

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

@@ -1,2 +1,14 @@
-import*as s from"@radix-ui/react-radio-group";import d from"clsx";import*as l from"react";import{RadioCard as n}from"./RadioCard.js";const p=({className:i,children:a,size:r,isFullWidth:t,align:m,...o})=>l.createElement(s.Root,{...o},l.createElement("div",{className:d("flex","flex-row","flex-wrap","gap-3",i)},l.Children.map(a,e=>l.isValidElement(e)&&(e==null?void 0:e.type)===n?l.cloneElement(e,{size:r,isFullWidth:t,align:m}):e)));export{p as RadioCardGroup};
-//# sourceMappingURL=RadioCardGroup.js.map
+import { RadioCard as e } from "./RadioCard.js";
+import t from "clsx";
+import * as n from "react";
+import * as r from "@radix-ui/react-radio-group";
+//#region src/components/radio-card/RadioCardGroup.tsx
+var i = ({ className: i, children: a, size: o, isFullWidth: s, align: c, ...l }) => /* @__PURE__ */ n.createElement(r.Root, l, /* @__PURE__ */ n.createElement("div", { className: t("flex", "flex-row", "flex-wrap", "gap-3", i) }, n.Children.map(a, (t) => n.isValidElement(t) && t?.type === e ? n.cloneElement(t, {
+	size: o,
+	isFullWidth: s,
+	align: c
+}) : t)));
+//#endregion
+export { i as RadioCardGroup };
+
+//# sourceMappingURL=RadioCardGroup.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"RadioCardGroup.js","sources":["../../../src/components/radio-card/RadioCardGroup.tsx"],"sourcesContent":["import * as RadioGroup from '@radix-ui/react-radio-group'\nimport clsx from 'clsx'\nimport * as React from 'react'\n\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={clsx('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"],"names":["RadioCardGroup","className","children","size","isFullWidth","align","rest","React","RadioGroup","clsx","child","RadioCard"],"mappings":"qIAaa,MAAAA,EAAiB,CAAC,CAC7B,UAAAC,EACA,SAAAC,EACA,KAAAC,EACA,YAAAC,EACA,MAAAC,EACA,GAAGC,CACL,IACEC,EAAA,cAACC,EAAW,KAAX,CAAiB,GAAGF,CACnBC,EAAAA,EAAA,cAAC,MAAA,CAAI,UAAWE,EAAK,OAAQ,WAAY,YAAa,QAASR,CAAS,CAAA,EACrEM,EAAM,SAAS,IAAIL,EAAWQ,GACzBH,EAAM,eAAeG,CAAK,IAAKA,GAAA,KAAAA,OAAAA,EAAO,QAASC,EAC1CJ,EAAM,aACXG,EACA,CAAE,KAAAP,EAAM,YAAAC,EAAa,MAAAC,CAAM,CAC7B,EAEKK,CACR,CACH,CACF"}
+{"version":3,"file":"RadioCardGroup.js","names":[],"sources":["../../../src/components/radio-card/RadioCardGroup.tsx"],"sourcesContent":["import * as RadioGroup from '@radix-ui/react-radio-group'\nimport clsx from 'clsx'\nimport * as React from 'react'\n\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={clsx('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,KAAkB,EAC7B,cACA,aACA,SACA,gBACA,UACA,GAAG,QAEH,kBAAA,cAAC,EAAW,MAAS,GACnB,kBAAA,cAAC,OAAD,EAAK,WAAW,EAAK,QAAQ,YAAY,aAAa,SAAS,EAAU,EAUnE,EATH,EAAM,SAAS,IAAI,IAAW,MACzB,EAAM,eAAe,EAAM,IAAI,GAAO,SAAS,IAC1C,EAAM,aACX,GACA;CAAE;CAAM;CAAa;CAAO,CAC7B,GAEI,EACP,CACE,CACU"}

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

@@ -1,2 +1,33 @@
-import*as i from"react";import{useFormContext as h}from"react-hook-form";import{FieldWrapper as b}from"../field-wrapper/FieldWrapper.js";import{useFieldError as x}from"../form/useFieldError.js";import{useFormCustomContext as C}from"../form/useFormCustomContext.js";import{SearchInput as E}from"../search-input/SearchInput.js";const m=({className:l,hideLabel:n,label:s,name:e,validation:r,prompt:d,description:c,appearance:u,...f})=>{const{register:a}=h(),o=C(),{error:t}=x(e),F=r?a(r):a,p=(o==null?void 0:o.appearance)||u;return i.createElement(b,{className:l,description:c,error:t,fieldId:e,hideLabel:n,label:s,prompt:d,required:!!(r!=null&&r.required),appearance:p},i.createElement(E,{id:e,name:e,ref:F,appearance:p,...t&&{state:"error"},...f}))};m.displayName="SearchField";export{m as SearchField};
-//# sourceMappingURL=SearchField.js.map
+import { useFieldError as e } from "../form/useFieldError.js";
+import { FieldWrapper as t } from "../field-wrapper/FieldWrapper.js";
+import { useFormCustomContext as n } from "../form/useFormCustomContext.js";
+import { SearchInput as r } from "../search-input/SearchInput.js";
+import * as i from "react";
+import { useFormContext as a } from "react-hook-form";
+//#region src/components/search-field/SearchField.tsx
+var o = ({ className: o, hideLabel: s, label: c, name: l, validation: u, prompt: d, description: f, appearance: p, ...m }) => {
+	let { register: h } = a(), g = n(), { error: _ } = e(l), v = u ? h(u) : h, y = g?.appearance || p;
+	return /* @__PURE__ */ i.createElement(t, {
+		className: o,
+		description: f,
+		error: _,
+		fieldId: l,
+		hideLabel: s,
+		label: c,
+		prompt: d,
+		required: !!u?.required,
+		appearance: y
+	}, /* @__PURE__ */ i.createElement(r, {
+		id: l,
+		name: l,
+		ref: v,
+		appearance: y,
+		..._ && { state: "error" },
+		...m
+	}));
+};
+o.displayName = "SearchField";
+//#endregion
+export { o as SearchField };
+
+//# sourceMappingURL=SearchField.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"SearchField.js","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  ...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\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        {...(error && { state: 'error' })}\n        {...remainingProps}\n      />\n    </FieldWrapper>\n  )\n}\n\nSearchField.displayName = 'SearchField'\n"],"names":["SearchField","className","hideLabel","label","name","validation","prompt","description","appearance","remainingProps","register","useFormContext","context","useFormCustomContext","error","useFieldError","ref","formAppearance","React","FieldWrapper","SearchInput"],"mappings":"sUAgBa,MAAAA,EAAc,CAAC,CAC1B,UAAAC,EACA,UAAAC,EACA,MAAAC,EACA,KAAAC,EACA,WAAAC,EACA,OAAAC,EACA,YAAAC,EACA,WAAAC,EACA,GAAGC,CACL,IAAwB,CACtB,KAAM,CAAE,SAAAC,CAAS,EAAIC,IACfC,EAAUC,EAAqB,EAC/B,CAAE,MAAAC,CAAM,EAAIC,EAAcX,CAAI,EAE9BY,EAAMX,EAAaK,EAASL,CAAU,EAAIK,EAC1CO,GAAiBL,GAAA,KAAAA,OAAAA,EAAS,aAAcJ,EAE9C,OACEU,EAAA,cAACC,EAAA,CACC,UAAWlB,EACX,YAAaM,EACb,MAAOO,EACP,QAASV,EACT,UAAWF,EACX,MAAOC,EACP,OAAQG,EACR,SAAU,CAAQD,EAAAA,GAAA,MAAAA,EAAY,UAC9B,WAAYY,CAEZC,EAAAA,EAAA,cAACE,EAAA,CACC,GAAIhB,EACJ,KAAMA,EACN,IAAKY,EACL,WAAYC,EACX,GAAIH,GAAS,CAAE,MAAO,OAAQ,EAC9B,GAAGL,CACN,CAAA,CACF,CAEJ,EAEAT,EAAY,YAAc"}
+{"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  ...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\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        {...(error && { state: 'error' })}\n        {...remainingProps}\n      />\n    </FieldWrapper>\n  )\n}\n\nSearchField.displayName = 'SearchField'\n"],"mappings":";;;;;;;AAgBA,IAAa,KAAe,EAC1B,cACA,cACA,UACA,SACA,eACA,WACA,gBACA,eACA,GAAG,QACmB;CACtB,IAAM,EAAE,gBAAa,GAAgB,EAC/B,IAAU,GAAsB,EAChC,EAAE,aAAU,EAAc,EAAK,EAE/B,IAAM,IAAa,EAAS,EAAW,GAAG,GAC1C,IAAiB,GAAS,cAAc;AAE9C,QACE,kBAAA,cAAC,GAAD;EACa;EACE;EACN;EACP,SAAS;EACE;EACJ;EACC;EACR,UAAU,EAAQ,GAAY;EAC9B,YAAY;EAUC,EARb,kBAAA,cAAC,GAAD;EACE,IAAI;EACE;EACD;EACL,YAAY;EACZ,GAAK,KAAS,EAAE,OAAO,SAAS;EAChC,GAAI;EACJ,CAAA,CACW;;AAInB,EAAY,cAAc"}

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

@@ -1,2 +1,70 @@
-import{Search as k,Close as L}from"@atom-learning/icons";import i from"clsx";import*as t from"react";import{ActionIcon as N}from"../action-icon/ActionIcon.js";import{Icon as h}from"../icon/Icon.js";import{InputBackground as x,InputText as T}from"../input/Input.js";import{styled as M}from"../../styled.js";import{useCallbackRef as O}from"../../utilities/hooks/useCallbackRef.js";import{getFieldIconSize as V}from"../../utilities/style/get-icon-size.js";var j=(e=>(e.SEARCH="SEARCH",e.CLEAR="CLEAR",e))(j||{});const B=M(h,{base:["text-grey-700","absolute","pointer-events-none"],variants:{size:{sm:["right-2","size-4"],md:["right-2.5","size-5"],lg:["right-2.5","size-5"]}}}),E=t.forwardRef(({size:e="md",appearance:f="standard",className:C,value:r,defaultValue:c="",onValueChange:s,clearText:b="Clear",onChange:u,...g},v)=>{const[m,R]=O(),[A,p]=t.useState(c),[S,d]=t.useState(c?"CLEAR":"SEARCH");t.useEffect(()=>{typeof r>"u"||(p(r),d(r?"CLEAR":"SEARCH"))},[r]);const z=t.useMemo(()=>V(e),[e]);t.useImperativeHandle(v,()=>m.current);const y=()=>{var n,a;const o=m.current;if(!o)return;const l=(n=Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype,"value"))==null?void 0:n.set;(a=l==null?void 0:l.call)==null||a.call(l,o,"");const H=new Event("input",{bubbles:!0});o.dispatchEvent(H),o.focus(),s==null||s("")},I=n=>{u==null||u(n);const a=n.target.value;p(a),s==null||s(a),d(a?"CLEAR":"SEARCH")},w=()=>S==="SEARCH"?t.createElement(B,{is:k,size:e,className:i(e=="sm"?"size-4":"size-5","top-1/2","-translate-y-1/2")}):t.createElement(N,{label:b,theme:"neutral",size:z,onClick:y,className:"absolute top-1/2 right-1 -translate-y-1/2"},t.createElement(h,{is:L}));return t.createElement(x,{size:e,appearance:f,className:i("relative","w-auto",C)},t.createElement(T,{ref:R,size:e,type:"search",...g,value:A,onChange:I,className:i(e==="sm"?"pr-8":"pr-10","[-webkit-search-decoration:hidden]","[-webkit-search-cancel-button:hidden]","[-webkit-search-results-button:hidden]")}),w())});E.displayName="SearchInput";export{E as SearchInput};
-//# sourceMappingURL=SearchInput.js.map
+import { styled as e } from "../../styled.js";
+import { Icon as t } from "../icon/Icon.js";
+import { ActionIcon as n } from "../action-icon/ActionIcon.js";
+import { useCallbackRef as r } from "../../utilities/hooks/useCallbackRef.js";
+import { InputBackground as i, InputText as a } from "../input/Input.js";
+import { getFieldIconSize as o } from "../../utilities/style/get-icon-size.js";
+import s from "clsx";
+import * as c from "react";
+import { Close as l, Search as u } from "@atom-learning/icons";
+//#region src/components/search-input/SearchInput.tsx
+var d = /* @__PURE__ */ function(e) {
+	return e.SEARCH = "SEARCH", e.CLEAR = "CLEAR", e;
+}(d || {}), f = e(t, {
+	base: [
+		"text-grey-700",
+		"absolute",
+		"pointer-events-none"
+	],
+	variants: { size: {
+		sm: ["right-2", "size-4"],
+		md: ["right-2.5", "size-5"],
+		lg: ["right-2.5", "size-5"]
+	} }
+}), p = c.forwardRef(({ size: e = "md", appearance: p = "standard", className: m, value: h, defaultValue: g = "", onValueChange: _, clearText: v = "Clear", onChange: y, ...b }, x) => {
+	let [S, C] = r(), [w, T] = c.useState(g), [E, D] = c.useState(g ? d.CLEAR : d.SEARCH);
+	c.useEffect(() => {
+		h !== void 0 && (T(h), D(h ? d.CLEAR : d.SEARCH));
+	}, [h]);
+	let O = c.useMemo(() => o(e), [e]);
+	c.useImperativeHandle(x, () => S.current);
+	let k = () => {
+		let e = S.current;
+		if (!e) return;
+		(Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value")?.set)?.call?.(e, "");
+		let t = new Event("input", { bubbles: !0 });
+		e.dispatchEvent(t), e.focus(), _?.("");
+	}, A = (e) => {
+		y?.(e);
+		let t = e.target.value;
+		T(t), _?.(t), D(t ? d.CLEAR : d.SEARCH);
+	}, j = () => E === d.SEARCH ? /* @__PURE__ */ c.createElement(f, {
+		is: u,
+		size: e,
+		className: s(e == "sm" ? "size-4" : "size-5", "top-1/2", "-translate-y-1/2")
+	}) : /* @__PURE__ */ c.createElement(n, {
+		label: v,
+		theme: "neutral",
+		size: O,
+		onClick: k,
+		className: "absolute top-1/2 right-1 -translate-y-1/2"
+	}, /* @__PURE__ */ c.createElement(t, { is: l }));
+	return /* @__PURE__ */ c.createElement(i, {
+		size: e,
+		appearance: p,
+		className: s("relative", "w-auto", m)
+	}, /* @__PURE__ */ c.createElement(a, {
+		ref: C,
+		size: e,
+		type: "search",
+		...b,
+		value: w,
+		onChange: A,
+		className: s(e === "sm" ? "pr-8" : "pr-10", "[-webkit-search-decoration:hidden]", "[-webkit-search-cancel-button:hidden]", "[-webkit-search-results-button:hidden]")
+	}), j());
+});
+p.displayName = "SearchInput";
+//#endregion
+export { p as SearchInput };
+
+//# sourceMappingURL=SearchInput.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"SearchInput.js","sources":["../../../src/components/search-input/SearchInput.tsx"],"sourcesContent":["import { Close, Search } from '@atom-learning/icons'\nimport clsx from 'clsx'\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 { 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      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={clsx(\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        className={clsx('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={clsx(\n            size === 'sm' ? 'pr-8' : 'pr-10',\n            '[-webkit-search-decoration:hidden]',\n            '[-webkit-search-cancel-button:hidden]',\n            '[-webkit-search-results-button:hidden]'\n          )}\n        />\n        {getIcon()}\n      </InputBackground>\n    )\n  }\n)\n\nSearchInput.displayName = 'SearchInput'\n"],"names":["INPUT_ICON","M","StyledIcon","styled","Icon","SearchInput","React","size","appearance","className","value","defaultValue","onValueChange","clearText","onChange","remainingProps","ref","inputElRef","setInputElRef","useCallbackRef","innerValue","setInnerValue","activeIcon","setActiveIcon","iconSize","getFieldIconSize","handleClear","_a","_b","inputEl","nativeInputValueSetter","ev2","handleOnChange","event","newValue","getIcon","Search","clsx","ActionIcon","Close","InputBackground","InputText"],"mappings":"qcAqBA,IAAKA,GAAAA,IACHA,EAAA,OAAS,SACTA,EAAA,MAAQ,QAFLA,IAAAC,GAAA,CAAA,CAAA,EAKL,MAAMC,EAAaC,EAAOC,EAAM,CAC9B,KAAM,CAAC,gBAAiB,WAAY,qBAAqB,EACzD,SAAU,CACR,KAAM,CACJ,GAAI,CAAC,UAAW,QAAQ,EACxB,GAAI,CAAC,YAAa,QAAQ,EAC1B,GAAI,CAAC,YAAa,QAAQ,CAC5B,CACF,CACF,CAAC,EAEYC,EAAcC,EAAM,WAC/B,CACE,CACE,KAAAC,EAAO,KACP,WAAAC,EAAa,WACb,UAAAC,EACA,MAAAC,EACA,aAAAC,EAAe,GACf,cAAAC,EACA,UAAAC,EAAY,QACZ,SAAAC,EACA,GAAGC,CACL,EACAC,IACG,CACH,KAAM,CAACC,EAAYC,CAAa,EAAIC,EAC9B,EAAA,CAACC,EAAYC,CAAa,EAAIf,EAAM,SAASK,CAAY,EACzD,CAACW,EAAYC,CAAa,EAAIjB,EAAM,SACxCK,EAAe,QAAmB,QACpC,EACAL,EAAM,UAAU,IAAM,CAChB,OAAOI,EAAU,MACrBW,EAAcX,CAAK,EACnBa,EAAcb,EAAQ,QAAmB,QAAiB,EAC5D,EAAG,CAACA,CAAK,CAAC,EAEV,MAAMc,EAAWlB,EAAM,QAAQ,IAAMmB,EAAiBlB,CAAI,EAAG,CAACA,CAAI,CAAC,EAEnED,EAAM,oBAAoBU,EAAK,IAAMC,EAAW,OAA2B,EAE3E,MAAMS,EAAc,IAAM,CAnE9B,IAAAC,EAAAC,EAoEM,MAAMC,EAAUZ,EAAW,QAC3B,GAAI,CAACY,EAAS,OAGd,MAAMC,GAAyBH,EAAA,OAAO,yBACpC,OAAO,iBAAiB,UACxB,OACF,IAH+B,YAAAA,EAG5B,KACHC,EAAAE,GAAA,KAAA,OAAAA,EAAwB,OAAxB,MAAAF,EAAA,KAAAE,EAA+BD,EAAS,EAAA,EACxC,MAAME,EAAM,IAAI,MAAM,QAAS,CAC7B,QAAS,EACX,CAAC,EACDF,EAAQ,cAAcE,CAAG,EACzBF,EAAQ,MAAM,EACdjB,GAAA,MAAAA,EAAgB,EAClB,CAAA,EAEMoB,EAAkBC,GAA+C,CACrEnB,GAAA,MAAAA,EAAWmB,CAEX,EAAA,MAAMC,EAAWD,EAAM,OAAO,MAC9BZ,EAAca,CAAQ,EACtBtB,GAAA,MAAAA,EAAgBsB,CAChBX,EAAAA,EAAcW,EAAW,QAAmB,QAAiB,CAC/D,EAEMC,EAAU,IACVb,IAAe,SAEfhB,EAAA,cAACJ,EAAA,CACC,GAAIkC,EACJ,KAAM7B,EACN,UAAW8B,EACT9B,GAAQ,KAAO,SAAW,SAC1B,UACA,kBACF,EACF,EAIFD,EAAA,cAACgC,EAAA,CACC,MAAOzB,EACP,MAAM,UACN,KAAMW,EACN,QAASE,EACT,UAAU,2CAEVpB,EAAAA,EAAA,cAACF,EAAA,CAAK,GAAImC,CAAO,CAAA,CACnB,EAIJ,OACEjC,EAAA,cAACkC,EAAA,CACC,KAAMjC,EACN,WAAYC,EACZ,UAAW6B,EAAK,WAAY,SAAU5B,CAAS,CAE/CH,EAAAA,EAAA,cAACmC,EAAA,CACC,IAAKvB,EACL,KAAMX,EACN,KAAK,SACJ,GAAGQ,EACJ,MAAOK,EACP,SAAUY,EACV,UAAWK,EACT9B,IAAS,KAAO,OAAS,QACzB,qCACA,wCACA,wCACF,CAAA,CACF,EACC4B,EAAQ,CACX,CAEJ,CACF,EAEA9B,EAAY,YAAc"}
+{"version":3,"file":"SearchInput.js","names":[],"sources":["../../../src/components/search-input/SearchInput.tsx"],"sourcesContent":["import { Close, Search } from '@atom-learning/icons'\nimport clsx from 'clsx'\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 { 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      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={clsx(\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        className={clsx('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={clsx(\n            size === 'sm' ? 'pr-8' : 'pr-10',\n            '[-webkit-search-decoration:hidden]',\n            '[-webkit-search-cancel-button:hidden]',\n            '[-webkit-search-results-button:hidden]'\n          )}\n        />\n        {getIcon()}\n      </InputBackground>\n    )\n  }\n)\n\nSearchInput.displayName = 'SearchInput'\n"],"mappings":";;;;;;;;;;AAqBA,IAAK,IAAL,yBAAA,GAAA;QACE,EAAA,SAAA,UACA,EAAA,QAAA;EAFG,KAAA,EAAA,CAGJ,EAEK,IAAa,EAAO,GAAM;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,EAEW,IAAc,EAAM,YAE7B,EACE,UAAO,MACP,gBAAa,YACb,cACA,UACA,kBAAe,IACf,kBACA,eAAY,SACZ,aACA,GAAG,KAEL,MACG;CACH,IAAM,CAAC,GAAY,KAAiB,GAAgB,EAC9C,CAAC,GAAY,KAAiB,EAAM,SAAS,EAAa,EAC1D,CAAC,GAAY,KAAiB,EAAM,SACxC,IAAe,EAAW,QAAQ,EAAW,OAC9C;AACD,GAAM,gBAAgB;AAChB,EAAO,MAAU,WACrB,EAAc,EAAM,EACpB,EAAc,IAAQ,EAAW,QAAQ,EAAW,OAAO;IAC1D,CAAC,EAAM,CAAC;CAEX,IAAM,IAAW,EAAM,cAAc,EAAiB,EAAK,EAAE,CAAC,EAAK,CAAC;AAEpE,GAAM,oBAAoB,SAAW,EAAW,QAA4B;CAE5E,IAAM,UAAoB;EACxB,IAAM,IAAU,EAAW;AAC3B,MAAI,CAAC,EAAS;AAOd,GAJ+B,OAAO,yBACpC,OAAO,iBAAiB,WACxB,QACD,EAAE,MACqB,OAAO,GAAS,GAAG;EAC3C,IAAM,IAAM,IAAI,MAAM,SAAS,EAC7B,SAAS,IACV,CAAC;AAGF,EAFA,EAAQ,cAAc,EAAI,EAC1B,EAAQ,OAAO,EACf,IAAgB,GAAG;IAGf,KAAkB,MAA+C;AACrE,MAAW,EAAM;EAEjB,IAAM,IAAW,EAAM,OAAO;AAG9B,EAFA,EAAc,EAAS,EACvB,IAAgB,EAAS,EACzB,EAAc,IAAW,EAAW,QAAQ,EAAW,OAAO;IAG1D,UACA,MAAe,EAAW,SAE1B,kBAAA,cAAC,GAAD;EACE,IAAI;EACE;EACN,WAAW,EACT,KAAQ,OAAO,WAAW,UAC1B,WACA,mBACD;EACD,CAAA,GAIJ,kBAAA,cAAC,GAAD;EACE,OAAO;EACP,OAAM;EACN,MAAM;EACN,SAAS;EACT,WAAU;EAGC,EADX,kBAAA,cAAC,GAAD,EAAM,IAAI,GAAS,CAAA,CACR;AAIjB,QACE,kBAAA,cAAC,GAAD;EACQ;EACM;EACZ,WAAW,EAAK,YAAY,UAAU,EAAU;EAiBhC,EAfhB,kBAAA,cAAC,GAAD;EACE,KAAK;EACC;EACN,MAAK;EACL,GAAI;EACJ,OAAO;EACP,UAAU;EACV,WAAW,EACT,MAAS,OAAO,SAAS,SACzB,sCACA,yCACA,yCACD;EACD,CAAA,EACD,GAAS,CACM;EAGvB;AAED,EAAY,cAAc"}

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

@@ -1,2 +1,47 @@
-import{TooltipProvider as m}from"@radix-ui/react-tooltip";import t from"react";import{styled as a}from"../../styled.js";import{Dismissible as c}from"../dismissible/index.js";import{SectionMessageProvider as g,useSectionMessageContext as l}from"./SectionMessageContext.js";import{SectionMessageDescription as h}from"./SectionMessageDescription.js";import{SectionMessageDismiss as f}from"./SectionMessageDismiss.js";import{SectionMessageIcon as p}from"./SectionMessageIcon.js";import{SectionMessageContent as d,SectionMessageActions as u}from"./SectionMessageLayout.js";import{SectionMessageTitle as b}from"./SectionMessageTitle.js";const x=a(c,{base:["relative","rounded-md","flex","shrink-0","min-h-12","p-4","border","border-white"],variants:{theme:{success:["bg-success-light","text-success-dark"],warning:["bg-warning-light","text-warning-text"],error:["bg-danger-light","text-danger-dark"],neutral:["bg-grey-100","text-grey-1000"],info:["bg-info-light","text-info-dark"]},hasIcon:{true:["pl-10"]},hasDismiss:{true:["pr-12"]}}}),M=({children:s,...i})=>{const{theme:r,hasIcon:o,hasDismiss:n}=l();return t.createElement(x,{...i,theme:r,hasIcon:o,hasDismiss:n},t.createElement("div",{className:"flex grow justify-between gap-3"},s))},e=({theme:s="info",...i})=>t.createElement(m,null,t.createElement(g,{theme:s},t.createElement(M,{...i})));e.Title=b,e.Description=h,e.Icon=p,e.Dismiss=f,e.Content=d,e.Actions=u;export{e as SectionMessage};
-//# sourceMappingURL=SectionMessage.js.map
+import { styled as e } from "../../styled.js";
+import { Dismissible as t } from "../dismissible/index.js";
+import { SectionMessageProvider as n, useSectionMessageContext as r } from "./SectionMessageContext.js";
+import { SectionMessageDescription as i } from "./SectionMessageDescription.js";
+import { SectionMessageDismiss as a } from "./SectionMessageDismiss.js";
+import { SectionMessageIcon as o } from "./SectionMessageIcon.js";
+import { SectionMessageActions as s, SectionMessageContent as c } from "./SectionMessageLayout.js";
+import { SectionMessageTitle as l } from "./SectionMessageTitle.js";
+import u from "react";
+import { TooltipProvider as d } from "@radix-ui/react-tooltip";
+//#region src/components/section-message/SectionMessage.tsx
+var f = e(t, {
+	base: [
+		"relative",
+		"rounded-md",
+		"flex",
+		"shrink-0",
+		"min-h-12",
+		"p-4",
+		"border",
+		"border-white"
+	],
+	variants: {
+		theme: {
+			success: ["bg-success-light", "text-success-dark"],
+			warning: ["bg-warning-light", "text-warning-text"],
+			error: ["bg-danger-light", "text-danger-dark"],
+			neutral: ["bg-grey-100", "text-grey-1000"],
+			info: ["bg-info-light", "text-info-dark"]
+		},
+		hasIcon: { true: ["pl-10"] },
+		hasDismiss: { true: ["pr-12"] }
+	}
+}), p = ({ children: e, ...t }) => {
+	let { theme: n, hasIcon: i, hasDismiss: a } = r();
+	return /* @__PURE__ */ u.createElement(f, {
+		...t,
+		theme: n,
+		hasIcon: i,
+		hasDismiss: a
+	}, /* @__PURE__ */ u.createElement("div", { className: "flex grow justify-between gap-3" }, e));
+}, m = ({ theme: e = "info", ...t }) => /* @__PURE__ */ u.createElement(d, null, /* @__PURE__ */ u.createElement(n, { theme: e }, /* @__PURE__ */ u.createElement(p, t)));
+m.Title = l, m.Description = i, m.Icon = o, m.Dismiss = a, m.Content = c, m.Actions = s;
+//#endregion
+export { m as SectionMessage };
+
+//# sourceMappingURL=SectionMessage.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"SectionMessage.js","sources":["../../../src/components/section-message/SectionMessage.tsx"],"sourcesContent":["import { TooltipProvider } from '@radix-ui/react-tooltip'\nimport React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { Dismissible } from '../dismissible'\nimport {\n  SectionMessageProvider,\n  useSectionMessageContext\n} from './SectionMessageContext'\nimport { SectionMessageDescription } from './SectionMessageDescription'\nimport { SectionMessageDismiss } from './SectionMessageDismiss'\nimport { SectionMessageIcon } from './SectionMessageIcon'\nimport {\n  SectionMessageActions,\n  SectionMessageContent\n} from './SectionMessageLayout'\nimport { SectionMessageTitle } from './SectionMessageTitle'\n\nconst StyledSectionMessage = styled(Dismissible, {\n  base: [\n    'relative',\n    'rounded-md',\n    'flex',\n    'shrink-0',\n    'min-h-12',\n    'p-4',\n    'border',\n    'border-white'\n  ],\n  variants: {\n    theme: {\n      success: ['bg-success-light', 'text-success-dark'],\n      warning: ['bg-warning-light', 'text-warning-text'],\n      error: ['bg-danger-light', 'text-danger-dark'],\n      neutral: ['bg-grey-100', 'text-grey-1000'],\n      info: ['bg-info-light', 'text-info-dark']\n    },\n    hasIcon: {\n      true: ['pl-10']\n    },\n    hasDismiss: {\n      true: ['pr-12']\n    }\n  }\n})\n\nconst SectionMessageRoot = ({\n  children,\n  ...rest\n}: React.ComponentProps<typeof StyledSectionMessage> & {\n  className?: string\n}) => {\n  const { theme, hasIcon, hasDismiss } = useSectionMessageContext()\n\n  return (\n    <StyledSectionMessage\n      {...rest}\n      theme={theme}\n      hasIcon={hasIcon}\n      hasDismiss={hasDismiss}\n    >\n      <div className=\"flex grow justify-between gap-3\">{children}</div>\n    </StyledSectionMessage>\n  )\n}\n\nexport type SectionMessageTheme =\n  | 'success'\n  | 'warning'\n  | 'error'\n  | 'neutral'\n  | 'info'\n\nexport type SectionMessageProps = React.ComponentProps<\n  typeof SectionMessageRoot\n> & {\n  theme?: SectionMessageTheme\n}\n\nexport const SectionMessage = ({\n  theme = 'info',\n  ...rest\n}: SectionMessageProps) => (\n  <TooltipProvider>\n    <SectionMessageProvider theme={theme}>\n      <SectionMessageRoot {...rest} />\n    </SectionMessageProvider>\n  </TooltipProvider>\n)\n\nSectionMessage.Title = SectionMessageTitle\nSectionMessage.Description = SectionMessageDescription\nSectionMessage.Icon = SectionMessageIcon\nSectionMessage.Dismiss = SectionMessageDismiss\nSectionMessage.Content = SectionMessageContent\nSectionMessage.Actions = SectionMessageActions\n"],"names":["StyledSectionMessage","styled","Dismissible","SectionMessageRoot","children","rest","theme","hasIcon","hasDismiss","useSectionMessageContext","React","SectionMessage","TooltipProvider","SectionMessageProvider","SectionMessageTitle","SectionMessageDescription","SectionMessageIcon","SectionMessageDismiss","SectionMessageContent","SectionMessageActions"],"mappings":"unBAmBA,MAAMA,EAAuBC,EAAOC,EAAa,CAC/C,KAAM,CACJ,WACA,aACA,OACA,WACA,WACA,MACA,SACA,cACF,EACA,SAAU,CACR,MAAO,CACL,QAAS,CAAC,mBAAoB,mBAAmB,EACjD,QAAS,CAAC,mBAAoB,mBAAmB,EACjD,MAAO,CAAC,kBAAmB,kBAAkB,EAC7C,QAAS,CAAC,cAAe,gBAAgB,EACzC,KAAM,CAAC,gBAAiB,gBAAgB,CAC1C,EACA,QAAS,CACP,KAAM,CAAC,OAAO,CAChB,EACA,WAAY,CACV,KAAM,CAAC,OAAO,CAChB,CACF,CACF,CAAC,EAEKC,EAAqB,CAAC,CAC1B,SAAAC,EACA,GAAGC,CACL,IAEM,CACJ,KAAM,CAAE,MAAAC,EAAO,QAAAC,EAAS,WAAAC,CAAW,EAAIC,IAEvC,OACEC,EAAA,cAACV,EAAA,CACE,GAAGK,EACJ,MAAOC,EACP,QAASC,EACT,WAAYC,CAAAA,EAEZE,EAAA,cAAC,MAAA,CAAI,UAAU,iCAAA,EAAmCN,CAAS,CAC7D,CAEJ,EAeaO,EAAiB,CAAC,CAC7B,MAAAL,EAAQ,OACR,GAAGD,CACL,IACEK,EAAA,cAACE,EAAA,KACCF,EAAA,cAACG,EAAA,CAAuB,MAAOP,GAC7BI,EAAA,cAACP,EAAA,CAAoB,GAAGE,EAAM,CAChC,CACF,EAGFM,EAAe,MAAQG,EACvBH,EAAe,YAAcI,EAC7BJ,EAAe,KAAOK,EACtBL,EAAe,QAAUM,EACzBN,EAAe,QAAUO,EACzBP,EAAe,QAAUQ"}
+{"version":3,"file":"SectionMessage.js","names":[],"sources":["../../../src/components/section-message/SectionMessage.tsx"],"sourcesContent":["import { TooltipProvider } from '@radix-ui/react-tooltip'\nimport React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { Dismissible } from '../dismissible'\nimport {\n  SectionMessageProvider,\n  useSectionMessageContext\n} from './SectionMessageContext'\nimport { SectionMessageDescription } from './SectionMessageDescription'\nimport { SectionMessageDismiss } from './SectionMessageDismiss'\nimport { SectionMessageIcon } from './SectionMessageIcon'\nimport {\n  SectionMessageActions,\n  SectionMessageContent\n} from './SectionMessageLayout'\nimport { SectionMessageTitle } from './SectionMessageTitle'\n\nconst StyledSectionMessage = styled(Dismissible, {\n  base: [\n    'relative',\n    'rounded-md',\n    'flex',\n    'shrink-0',\n    'min-h-12',\n    'p-4',\n    'border',\n    'border-white'\n  ],\n  variants: {\n    theme: {\n      success: ['bg-success-light', 'text-success-dark'],\n      warning: ['bg-warning-light', 'text-warning-text'],\n      error: ['bg-danger-light', 'text-danger-dark'],\n      neutral: ['bg-grey-100', 'text-grey-1000'],\n      info: ['bg-info-light', 'text-info-dark']\n    },\n    hasIcon: {\n      true: ['pl-10']\n    },\n    hasDismiss: {\n      true: ['pr-12']\n    }\n  }\n})\n\nconst SectionMessageRoot = ({\n  children,\n  ...rest\n}: React.ComponentProps<typeof StyledSectionMessage> & {\n  className?: string\n}) => {\n  const { theme, hasIcon, hasDismiss } = useSectionMessageContext()\n\n  return (\n    <StyledSectionMessage\n      {...rest}\n      theme={theme}\n      hasIcon={hasIcon}\n      hasDismiss={hasDismiss}\n    >\n      <div className=\"flex grow justify-between gap-3\">{children}</div>\n    </StyledSectionMessage>\n  )\n}\n\nexport type SectionMessageTheme =\n  | 'success'\n  | 'warning'\n  | 'error'\n  | 'neutral'\n  | 'info'\n\nexport type SectionMessageProps = React.ComponentProps<\n  typeof SectionMessageRoot\n> & {\n  theme?: SectionMessageTheme\n}\n\nexport const SectionMessage = ({\n  theme = 'info',\n  ...rest\n}: SectionMessageProps) => (\n  <TooltipProvider>\n    <SectionMessageProvider theme={theme}>\n      <SectionMessageRoot {...rest} />\n    </SectionMessageProvider>\n  </TooltipProvider>\n)\n\nSectionMessage.Title = SectionMessageTitle\nSectionMessage.Description = SectionMessageDescription\nSectionMessage.Icon = SectionMessageIcon\nSectionMessage.Dismiss = SectionMessageDismiss\nSectionMessage.Content = SectionMessageContent\nSectionMessage.Actions = SectionMessageActions\n"],"mappings":";;;;;;;;;;;AAmBA,IAAM,IAAuB,EAAO,GAAa;CAC/C,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU;EACR,OAAO;GACL,SAAS,CAAC,oBAAoB,oBAAoB;GAClD,SAAS,CAAC,oBAAoB,oBAAoB;GAClD,OAAO,CAAC,mBAAmB,mBAAmB;GAC9C,SAAS,CAAC,eAAe,iBAAiB;GAC1C,MAAM,CAAC,iBAAiB,iBAAiB;GAC1C;EACD,SAAS,EACP,MAAM,CAAC,QAAQ,EAChB;EACD,YAAY,EACV,MAAM,CAAC,QAAQ,EAChB;EACF;CACF,CAAC,EAEI,KAAsB,EAC1B,aACA,GAAG,QAGC;CACJ,IAAM,EAAE,UAAO,YAAS,kBAAe,GAA0B;AAEjE,QACE,kBAAA,cAAC,GAAD;EACE,GAAI;EACG;EACE;EACG;EAGS,EADrB,kBAAA,cAAC,OAAD,EAAK,WAAU,mCAAkD,EAAf,EAAe,CAC5C;GAiBd,KAAkB,EAC7B,WAAQ,QACR,GAAG,QAEH,kBAAA,cAAC,GAAA,MACC,kBAAA,cAAC,GAAD,EAA+B,UAEN,EADvB,kBAAA,cAAC,GAAuB,EAAQ,CACT,CACT;AAGpB,EAAe,QAAQ,GACvB,EAAe,cAAc,GAC7B,EAAe,OAAO,GACtB,EAAe,UAAU,GACzB,EAAe,UAAU,GACzB,EAAe,UAAU"}

package/dist/components/section-message/SectionMessageContext.js

@@ -1,2 +1,26 @@
-import e from"react";const s=e.createContext(null),u=({theme:t="info",children:a})=>{const[o,n]=e.useState(!1),[r,i]=e.useState(!1),c=e.useMemo(()=>({theme:t,hasIcon:o,setHasIcon:n,hasDismiss:r,setHasDismiss:i}),[t,o,n,r,i]);return e.createElement(s.Provider,{value:c},a)},m=()=>{const t=e.useContext(s);if(!t)throw new Error("useSectionMessageContext must be used within a SectionMessageProvider");return t};export{s as SectionMessageContext,u as SectionMessageProvider,m as useSectionMessageContext};
-//# sourceMappingURL=SectionMessageContext.js.map
+import e from "react";
+//#region src/components/section-message/SectionMessageContext.tsx
+var t = e.createContext(null), n = ({ theme: n = "info", children: r }) => {
+	let [i, a] = e.useState(!1), [o, s] = e.useState(!1), c = e.useMemo(() => ({
+		theme: n,
+		hasIcon: i,
+		setHasIcon: a,
+		hasDismiss: o,
+		setHasDismiss: s
+	}), [
+		n,
+		i,
+		a,
+		o,
+		s
+	]);
+	return /* @__PURE__ */ e.createElement(t.Provider, { value: c }, r);
+}, r = () => {
+	let n = e.useContext(t);
+	if (!n) throw Error("useSectionMessageContext must be used within a SectionMessageProvider");
+	return n;
+};
+//#endregion
+export { n as SectionMessageProvider, r as useSectionMessageContext };
+
+//# sourceMappingURL=SectionMessageContext.js.map

package/dist/components/section-message/SectionMessageContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"SectionMessageContext.js","sources":["../../../src/components/section-message/SectionMessageContext.tsx"],"sourcesContent":["import 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): JSX.Element => {\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"],"names":["SectionMessageContext","React","SectionMessageProvider","theme","children","hasIcon","setHasIcon","hasDismiss","setHasDismiss","value","useSectionMessageContext","context"],"mappings":"qBAgBO,MAAMA,EACXC,EAAM,cAAiD,IAAI,EAEhDC,EAAyB,CAAC,CACrC,MAAAC,EAAQ,OACR,SAAAC,CACF,IAAgD,CAC9C,KAAM,CAACC,EAASC,CAAU,EAAIL,EAAM,SAAS,EAAK,EAC5C,CAACM,EAAYC,CAAa,EAAIP,EAAM,SAAS,EAAK,EAElDQ,EAAQR,EAAM,QAClB,KAAO,CAAE,MAAAE,EAAO,QAAAE,EAAS,WAAAC,EAAY,WAAAC,EAAY,cAAAC,CAAc,GAC/D,CAACL,EAAOE,EAASC,EAAYC,EAAYC,CAAa,CACxD,EAEA,OACEP,EAAA,cAACD,EAAsB,SAAtB,CAA+B,MAAOS,CAAAA,EACpCL,CACH,CAEJ,EAEaM,EAA2B,IAAkC,CACxE,MAAMC,EAAUV,EAAM,WAAWD,CAAqB,EAEtD,GAAI,CAACW,EACH,MAAM,IAAI,MACR,uEACF,EAGF,OAAOA,CACT"}
+{"version":3,"file":"SectionMessageContext.js","names":[],"sources":["../../../src/components/section-message/SectionMessageContext.tsx"],"sourcesContent":["import 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): JSX.Element => {\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,IACX,EAAM,cAAiD,KAAK,EAEjD,KAA0B,EACrC,WAAQ,QACR,kBAC8C;CAC9C,IAAM,CAAC,GAAS,KAAc,EAAM,SAAS,GAAM,EAC7C,CAAC,GAAY,KAAiB,EAAM,SAAS,GAAM,EAEnD,IAAQ,EAAM,eACX;EAAE;EAAO;EAAS;EAAY;EAAY;EAAe,GAChE;EAAC;EAAO;EAAS;EAAY;EAAY;EAAc,CACxD;AAED,QACE,kBAAA,cAAC,EAAsB,UAAvB,EAAuC,UAEN,EAD9B,EAC8B;GAIxB,UAA6D;CACxE,IAAM,IAAU,EAAM,WAAW,EAAsB;AAEvD,KAAI,CAAC,EACH,OAAU,MACR,wEACD;AAGH,QAAO"}

package/dist/components/section-message/SectionMessageDescription.js

@@ -1,2 +1,13 @@
-import m from"clsx";import o from"react";import{Text as r}from"../text/Text.js";const s=({className:e,...t})=>o.createElement(r,{size:"sm",...t,className:m("text-grey-900",e)});export{s as SectionMessageDescription};
-//# sourceMappingURL=SectionMessageDescription.js.map
+import { Text as e } from "../text/Text.js";
+import t from "clsx";
+import n from "react";
+//#region src/components/section-message/SectionMessageDescription.tsx
+var r = ({ className: r, ...i }) => /* @__PURE__ */ n.createElement(e, {
+	size: "sm",
+	...i,
+	className: t("text-grey-900", r)
+});
+//#endregion
+export { r as SectionMessageDescription };
+
+//# sourceMappingURL=SectionMessageDescription.js.map

package/dist/components/section-message/SectionMessageDescription.js.map

@@ -1 +1 @@
-{"version":3,"file":"SectionMessageDescription.js","sources":["../../../src/components/section-message/SectionMessageDescription.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport React from 'react'\n\nimport { Text } from '../text/Text'\n\nexport const SectionMessageDescription = ({\n  className,\n  ...rest\n}: React.ComponentProps<typeof Text>): JSX.Element => (\n  <Text size=\"sm\" {...rest} className={clsx('text-grey-900', className)} />\n)\n"],"names":["SectionMessageDescription","className","rest","React","Text","clsx"],"mappings":"gFAKO,MAAMA,EAA4B,CAAC,CACxC,UAAAC,EACA,GAAGC,CACL,IACEC,EAAA,cAACC,EAAA,CAAK,KAAK,KAAM,GAAGF,EAAM,UAAWG,EAAK,gBAAiBJ,CAAS,CAAG,CAAA"}
+{"version":3,"file":"SectionMessageDescription.js","names":[],"sources":["../../../src/components/section-message/SectionMessageDescription.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport React from 'react'\n\nimport { Text } from '../text/Text'\n\nexport const SectionMessageDescription = ({\n  className,\n  ...rest\n}: React.ComponentProps<typeof Text>): JSX.Element => (\n  <Text size=\"sm\" {...rest} className={clsx('text-grey-900', className)} />\n)\n"],"mappings":";;;;AAKA,IAAa,KAA6B,EACxC,cACA,GAAG,QAEH,kBAAA,cAAC,GAAD;CAAM,MAAK;CAAK,GAAI;CAAM,WAAW,EAAK,iBAAiB,EAAU;CAAI,CAAA"}

package/dist/components/section-message/SectionMessageDismiss.js

@@ -1,2 +1,23 @@
-import{Close as i}from"@atom-learning/icons";import r from"clsx";import s,{useEffect as a}from"react";import{ActionIcon as l}from"../action-icon/ActionIcon.js";import{Dismissible as c}from"../dismissible/index.js";import{Icon as n}from"../icon/Icon.js";import{useSectionMessageContext as p}from"./SectionMessageContext.js";const f=({label:t="Dismiss",className:m,...o})=>{const{setHasDismiss:e}=p();return a(()=>(e(!0),()=>e(!1)),[e]),s.createElement(c.Trigger,{asChild:!0},s.createElement(l,{label:t,size:"sm",appearance:"simple",theme:"neutral",...o,className:r("m-auto","absolute","top-2","right-2",m)},s.createElement(n,{is:i})))};export{f as SectionMessageDismiss};
-//# sourceMappingURL=SectionMessageDismiss.js.map
+import { Icon as e } from "../icon/Icon.js";
+import { ActionIcon as t } from "../action-icon/ActionIcon.js";
+import { Dismissible as n } from "../dismissible/index.js";
+import { useSectionMessageContext as r } from "./SectionMessageContext.js";
+import i from "clsx";
+import a, { useEffect as o } from "react";
+import { Close as s } from "@atom-learning/icons";
+//#region src/components/section-message/SectionMessageDismiss.tsx
+var c = ({ label: c = "Dismiss", className: l, ...u }) => {
+	let { setHasDismiss: d } = r();
+	return o(() => (d(!0), () => d(!1)), [d]), /* @__PURE__ */ a.createElement(n.Trigger, { asChild: !0 }, /* @__PURE__ */ a.createElement(t, {
+		label: c,
+		size: "sm",
+		appearance: "simple",
+		theme: "neutral",
+		...u,
+		className: i("m-auto", "absolute", "top-2", "right-2", l)
+	}, /* @__PURE__ */ a.createElement(e, { is: s })));
+};
+//#endregion
+export { c as SectionMessageDismiss };
+
+//# sourceMappingURL=SectionMessageDismiss.js.map

package/dist/components/section-message/SectionMessageDismiss.js.map

@@ -1 +1 @@
-{"version":3,"file":"SectionMessageDismiss.js","sources":["../../../src/components/section-message/SectionMessageDismiss.tsx"],"sourcesContent":["import { Close } from '@atom-learning/icons'\nimport clsx from 'clsx'\nimport React, { useEffect } from 'react'\n\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Dismissible } from '../dismissible'\nimport { Icon } from '../icon/Icon'\nimport { useSectionMessageContext } from './SectionMessageContext'\n\nexport const SectionMessageDismiss = ({\n  label = 'Dismiss',\n  className,\n  ...rest\n}: React.ComponentProps<typeof ActionIcon>): JSX.Element => {\n  const { setHasDismiss } = useSectionMessageContext()\n\n  useEffect(() => {\n    setHasDismiss(true)\n    return () => setHasDismiss(false)\n  }, [setHasDismiss])\n\n  return (\n    <Dismissible.Trigger asChild>\n      <ActionIcon\n        label={label}\n        size=\"sm\"\n        appearance=\"simple\"\n        theme=\"neutral\"\n        {...rest}\n        className={clsx('m-auto', 'absolute', 'top-2', 'right-2', className)}\n      >\n        <Icon is={Close} />\n      </ActionIcon>\n    </Dismissible.Trigger>\n  )\n}\n"],"names":["SectionMessageDismiss","label","className","rest","setHasDismiss","useSectionMessageContext","useEffect","React","Dismissible","ActionIcon","clsx","Icon","Close"],"mappings":"mUASa,MAAAA,EAAwB,CAAC,CACpC,MAAAC,EAAQ,UACR,UAAAC,EACA,GAAGC,CACL,IAA4D,CAC1D,KAAM,CAAE,cAAAC,CAAc,EAAIC,EAAyB,EAEnD,OAAAC,EAAU,KACRF,EAAc,EAAI,EACX,IAAMA,EAAc,EAAK,GAC/B,CAACA,CAAa,CAAC,EAGhBG,EAAA,cAACC,EAAY,QAAZ,CAAoB,QAAO,IAC1BD,EAAA,cAACE,EAAA,CACC,MAAOR,EACP,KAAK,KACL,WAAW,SACX,MAAM,UACL,GAAGE,EACJ,UAAWO,EAAK,SAAU,WAAY,QAAS,UAAWR,CAAS,CAAA,EAEnEK,EAAA,cAACI,EAAA,CAAK,GAAIC,CAAAA,CAAO,CACnB,CACF,CAEJ"}
+{"version":3,"file":"SectionMessageDismiss.js","names":[],"sources":["../../../src/components/section-message/SectionMessageDismiss.tsx"],"sourcesContent":["import { Close } from '@atom-learning/icons'\nimport clsx from 'clsx'\nimport React, { useEffect } from 'react'\n\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Dismissible } from '../dismissible'\nimport { Icon } from '../icon/Icon'\nimport { useSectionMessageContext } from './SectionMessageContext'\n\nexport const SectionMessageDismiss = ({\n  label = 'Dismiss',\n  className,\n  ...rest\n}: React.ComponentProps<typeof ActionIcon>): JSX.Element => {\n  const { setHasDismiss } = useSectionMessageContext()\n\n  useEffect(() => {\n    setHasDismiss(true)\n    return () => setHasDismiss(false)\n  }, [setHasDismiss])\n\n  return (\n    <Dismissible.Trigger asChild>\n      <ActionIcon\n        label={label}\n        size=\"sm\"\n        appearance=\"simple\"\n        theme=\"neutral\"\n        {...rest}\n        className={clsx('m-auto', 'absolute', 'top-2', 'right-2', className)}\n      >\n        <Icon is={Close} />\n      </ActionIcon>\n    </Dismissible.Trigger>\n  )\n}\n"],"mappings":";;;;;;;;AASA,IAAa,KAAyB,EACpC,WAAQ,WACR,cACA,GAAG,QACuD;CAC1D,IAAM,EAAE,qBAAkB,GAA0B;AAOpD,QALA,SACE,EAAc,GAAK,QACN,EAAc,GAAM,GAChC,CAAC,EAAc,CAAC,EAGjB,kBAAA,cAAC,EAAY,SAAb,EAAqB,SAAA,IAWC,EAVpB,kBAAA,cAAC,GAAD;EACS;EACP,MAAK;EACL,YAAW;EACX,OAAM;EACN,GAAI;EACJ,WAAW,EAAK,UAAU,YAAY,SAAS,WAAW,EAAU;EAGzD,EADX,kBAAA,cAAC,GAAD,EAAM,IAAI,GAAS,CAAA,CACR,CACO"}

package/dist/components/section-message/SectionMessageIcon.js

@@ -1,2 +1,25 @@
-import{OkCircle as c,Danger as m,Error as a,Info as t}from"@atom-learning/icons";import i from"clsx";import f,{useEffect as u}from"react";import{Icon as l}from"../icon/Icon.js";import{useSectionMessageContext as p}from"./SectionMessageContext.js";const I={success:c,warning:m,error:a,neutral:t,info:t},g=({className:o,is:r,...s})=>{const{theme:n,setHasIcon:e}=p();return u(()=>(e(!0),()=>e(!1)),[e]),f.createElement(l,{is:r||I[n],size:"sm",...s,className:i("m-auto","absolute","left-4","top-4","text-current",o)})};export{g as SectionMessageIcon};
-//# sourceMappingURL=SectionMessageIcon.js.map
+import { Icon as e } from "../icon/Icon.js";
+import { useSectionMessageContext as t } from "./SectionMessageContext.js";
+import n from "clsx";
+import r, { useEffect as i } from "react";
+import { Danger as a, Error as o, Info as s, OkCircle as c } from "@atom-learning/icons";
+//#region src/components/section-message/SectionMessageIcon.tsx
+var l = {
+	success: c,
+	warning: a,
+	error: o,
+	neutral: s,
+	info: s
+}, u = ({ className: a, is: o, ...s }) => {
+	let { theme: c, setHasIcon: u } = t();
+	return i(() => (u(!0), () => u(!1)), [u]), /* @__PURE__ */ r.createElement(e, {
+		is: o || l[c],
+		size: "sm",
+		...s,
+		className: n("m-auto", "absolute", "left-4", "top-4", "text-current", a)
+	});
+};
+//#endregion
+export { u as SectionMessageIcon };
+
+//# sourceMappingURL=SectionMessageIcon.js.map