@stokelp/ui 2.103.0 → 2.104.0

package/dist/components/form/FormControl.cjs

@@ -1,2 +1,2 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),n=require("@stokelp/styled-system/jsx"),s=require("@stokelp/styled-system/recipes"),l=n.styled("div",s.formControl,{defaultProps:{role:"group"}}),u=({isInvalid:r,isRequired:e,...o})=>{const t={...r?{"aria-invalid":!0}:{},...e?{"aria-required":!0}:{}};return i.jsx(l,{...t,...o})};exports.FormControl=u;
-//# sourceMappingURL=FormControl.cjs.map
+"use client";let e=require("@stokelp/styled-system/jsx"),t=require("@stokelp/styled-system/recipes"),n=require("react/jsx-runtime");var r=(0,e.styled)(`div`,t.formControl,{defaultProps:{role:`group`}}),i=({isInvalid:e,isRequired:t,...i})=>(0,n.jsx)(r,{...e?{"aria-invalid":!0}:{},...t?{"aria-required":!0}:{},...i});exports.FormControl=i;
+//# sourceMappingURL=FormControl.cjs.map

package/dist/components/form/FormControl.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"FormControl.cjs","sources":["../../../src/components/form/FormControl.tsx"],"sourcesContent":["import type { ComponentProps, FC } from 'react'\n\nimport { styled } from '@stokelp/styled-system/jsx'\nimport { formControl } from '@stokelp/styled-system/recipes'\n\nconst StyledFormControl = styled('div', formControl, {\n  defaultProps: {\n    role: 'group',\n  },\n})\n\nexport interface FormControlProps extends ComponentProps<typeof StyledFormControl> {\n  isInvalid?: boolean\n  isRequired?: boolean\n}\n\nexport const FormControl: FC<FormControlProps> = ({ isInvalid, isRequired, ...props }) => {\n  const invalidProps = {\n    ...(isInvalid ? { 'aria-invalid': true } : {}),\n    ...(isRequired ? { 'aria-required': true } : {}),\n  }\n\n  return <StyledFormControl {...invalidProps} {...props} />\n}\n"],"names":["StyledFormControl","styled","formControl","FormControl","isInvalid","isRequired","props","invalidProps","jsx"],"mappings":"sNAKMA,EAAoBC,EAAAA,OAAO,MAAOC,cAAa,CACnD,aAAc,CACZ,KAAM,OAAA,CAEV,CAAC,EAOYC,EAAoC,CAAC,CAAE,UAAAC,EAAW,WAAAC,EAAY,GAAGC,KAAY,CACxF,MAAMC,EAAe,CACnB,GAAIH,EAAY,CAAE,eAAgB,EAAA,EAAS,CAAA,EAC3C,GAAIC,EAAa,CAAE,gBAAiB,IAAS,CAAA,CAAC,EAGhD,OAAOG,EAAAA,IAACR,EAAA,CAAmB,GAAGO,EAAe,GAAGD,CAAA,CAAO,CACzD"}
+{"version":3,"file":"FormControl.cjs","names":[],"sources":["../../../src/components/form/FormControl.tsx"],"sourcesContent":["import type { ComponentProps, FC } from 'react'\n\nimport { styled } from '@stokelp/styled-system/jsx'\nimport { formControl } from '@stokelp/styled-system/recipes'\n\nconst StyledFormControl = styled('div', formControl, {\n  defaultProps: {\n    role: 'group',\n  },\n})\n\nexport type FormControlProps = ComponentProps<typeof StyledFormControl> & {\n  isInvalid?: boolean\n  isRequired?: boolean\n}\n\nexport const FormControl: FC<FormControlProps> = ({ isInvalid, isRequired, ...props }) => {\n  const invalidProps = {\n    ...(isInvalid ? { 'aria-invalid': true } : {}),\n    ...(isRequired ? { 'aria-required': true } : {}),\n  }\n\n  return <StyledFormControl {...invalidProps} {...props} />\n}\n"],"mappings":"oIAKA,IAAM,GAAA,EAAA,EAAA,QAA2B,MAAO,EAAA,YAAa,CACnD,aAAc,CACZ,KAAM,OACR,CACF,CAAC,EAOY,GAAqC,CAAE,YAAW,aAAY,GAAG,MAMrE,EAAA,EAAA,KAAC,EAAD,CAJL,GAAI,EAAY,CAAE,eAAgB,EAAK,EAAI,CAAC,EAC5C,GAAI,EAAa,CAAE,gBAAiB,EAAK,EAAI,CAAC,EAGJ,GAAI,CAAQ,CAAA"}

package/dist/components/form/FormControl.d.ts

@@ -2,9 +2,9 @@ import { ComponentProps, FC } from 'react';
 import { StyledComponent } from '@stokelp/styled-system/types';
 import { FormControlVariantProps } from '@stokelp/styled-system/recipes';
 declare const StyledFormControl: StyledComponent<"div", FormControlVariantProps>;
-export interface FormControlProps extends ComponentProps<typeof StyledFormControl> {
+export type FormControlProps = ComponentProps<typeof StyledFormControl> & {
     isInvalid?: boolean;
     isRequired?: boolean;
-}
+};
 export declare const FormControl: FC<FormControlProps>;
 export {};

package/dist/components/form/FormControl.js

@@ -1,19 +1,14 @@
 "use client";
-import { jsx as i } from "react/jsx-runtime";
-import { styled as l } from "@stokelp/styled-system/jsx";
-import { formControl as n } from "@stokelp/styled-system/recipes";
-const m = l("div", n, {
-  defaultProps: {
-    role: "group"
-  }
-}), p = ({ isInvalid: r, isRequired: o, ...t }) => {
-  const e = {
-    ...r ? { "aria-invalid": !0 } : {},
-    ...o ? { "aria-required": !0 } : {}
-  };
-  return /* @__PURE__ */ i(m, { ...e, ...t });
-};
-export {
-  p as FormControl
-};
-//# sourceMappingURL=FormControl.js.map
+import { styled as e } from "@stokelp/styled-system/jsx";
+import { formControl as t } from "@stokelp/styled-system/recipes";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/components/form/FormControl.tsx
+var r = e("div", t, { defaultProps: { role: "group" } }), i = ({ isInvalid: e, isRequired: t, ...i }) => /* @__PURE__ */ n(r, {
+	...e ? { "aria-invalid": !0 } : {},
+	...t ? { "aria-required": !0 } : {},
+	...i
+});
+//#endregion
+export { i as FormControl };
+
+//# sourceMappingURL=FormControl.js.map

package/dist/components/form/FormControl.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormControl.js","sources":["../../../src/components/form/FormControl.tsx"],"sourcesContent":["import type { ComponentProps, FC } from 'react'\n\nimport { styled } from '@stokelp/styled-system/jsx'\nimport { formControl } from '@stokelp/styled-system/recipes'\n\nconst StyledFormControl = styled('div', formControl, {\n  defaultProps: {\n    role: 'group',\n  },\n})\n\nexport interface FormControlProps extends ComponentProps<typeof StyledFormControl> {\n  isInvalid?: boolean\n  isRequired?: boolean\n}\n\nexport const FormControl: FC<FormControlProps> = ({ isInvalid, isRequired, ...props }) => {\n  const invalidProps = {\n    ...(isInvalid ? { 'aria-invalid': true } : {}),\n    ...(isRequired ? { 'aria-required': true } : {}),\n  }\n\n  return <StyledFormControl {...invalidProps} {...props} />\n}\n"],"names":["StyledFormControl","styled","formControl","FormControl","isInvalid","isRequired","props","invalidProps","jsx"],"mappings":";;;;AAKA,MAAMA,IAAoBC,EAAO,OAAOC,GAAa;AAAA,EACnD,cAAc;AAAA,IACZ,MAAM;AAAA,EAAA;AAEV,CAAC,GAOYC,IAAoC,CAAC,EAAE,WAAAC,GAAW,YAAAC,GAAY,GAAGC,QAAY;AACxF,QAAMC,IAAe;AAAA,IACnB,GAAIH,IAAY,EAAE,gBAAgB,GAAA,IAAS,CAAA;AAAA,IAC3C,GAAIC,IAAa,EAAE,iBAAiB,OAAS,CAAA;AAAA,EAAC;AAGhD,SAAO,gBAAAG,EAACR,GAAA,EAAmB,GAAGO,GAAe,GAAGD,EAAA,CAAO;AACzD;"}
+{"version":3,"file":"FormControl.js","names":[],"sources":["../../../src/components/form/FormControl.tsx"],"sourcesContent":["import type { ComponentProps, FC } from 'react'\n\nimport { styled } from '@stokelp/styled-system/jsx'\nimport { formControl } from '@stokelp/styled-system/recipes'\n\nconst StyledFormControl = styled('div', formControl, {\n  defaultProps: {\n    role: 'group',\n  },\n})\n\nexport type FormControlProps = ComponentProps<typeof StyledFormControl> & {\n  isInvalid?: boolean\n  isRequired?: boolean\n}\n\nexport const FormControl: FC<FormControlProps> = ({ isInvalid, isRequired, ...props }) => {\n  const invalidProps = {\n    ...(isInvalid ? { 'aria-invalid': true } : {}),\n    ...(isRequired ? { 'aria-required': true } : {}),\n  }\n\n  return <StyledFormControl {...invalidProps} {...props} />\n}\n"],"mappings":";;;;;AAKA,IAAM,IAAoB,EAAO,OAAO,GAAa,EACnD,cAAc,EACZ,MAAM,QACR,EACF,CAAC,GAOY,KAAqC,EAAE,cAAW,eAAY,GAAG,QAMrE,kBAAC,GAAD;CAJL,GAAI,IAAY,EAAE,gBAAgB,GAAK,IAAI,CAAC;CAC5C,GAAI,IAAa,EAAE,iBAAiB,GAAK,IAAI,CAAC;CAGJ,GAAI;AAAQ,CAAA"}

package/dist/components/form/FormHelperText.cjs

@@ -1,2 +1,2 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("@stokelp/styled-system/jsx"),t=require("@stokelp/styled-system/recipes"),r=e.styled("p",t.formHelperText,{dataAttr:!0});exports.FormHelperText=r;
-//# sourceMappingURL=FormHelperText.cjs.map
+"use client";let e=require("@stokelp/styled-system/jsx"),t=require("@stokelp/styled-system/recipes");var n=(0,e.styled)(`p`,t.formHelperText,{dataAttr:!0});exports.FormHelperText=n;
+//# sourceMappingURL=FormHelperText.cjs.map

package/dist/components/form/FormHelperText.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"FormHelperText.cjs","sources":["../../../src/components/form/FormHelperText.tsx"],"sourcesContent":["import type { ComponentProps } from 'react'\n\nimport { styled } from '@stokelp/styled-system/jsx'\nimport { formHelperText } from '@stokelp/styled-system/recipes'\n\nexport const FormHelperText = styled('p', formHelperText, {\n  dataAttr: true,\n})\n\nexport interface FormHelperTextProps extends ComponentProps<typeof FormHelperText> {}\n"],"names":["FormHelperText","styled","formHelperText"],"mappings":"uLAKaA,EAAiBC,EAAAA,OAAO,IAAKC,iBAAgB,CACxD,SAAU,EACZ,CAAC"}
+{"version":3,"file":"FormHelperText.cjs","names":[],"sources":["../../../src/components/form/FormHelperText.tsx"],"sourcesContent":["import type { ComponentProps } from 'react'\n\nimport { styled } from '@stokelp/styled-system/jsx'\nimport { formHelperText } from '@stokelp/styled-system/recipes'\n\nexport const FormHelperText = styled('p', formHelperText, {\n  dataAttr: true,\n})\n\nexport interface FormHelperTextProps extends ComponentProps<typeof FormHelperText> {}\n"],"mappings":"qGAKA,IAAa,GAAA,EAAA,EAAA,QAAwB,IAAK,EAAA,eAAgB,CACxD,SAAU,EACZ,CAAC"}

package/dist/components/form/FormHelperText.js

@@ -1,10 +1,9 @@
 "use client";
-import { styled as t } from "@stokelp/styled-system/jsx";
-import { formHelperText as e } from "@stokelp/styled-system/recipes";
-const m = t("p", e, {
-  dataAttr: !0
-});
-export {
-  m as FormHelperText
-};
-//# sourceMappingURL=FormHelperText.js.map
+import { styled as e } from "@stokelp/styled-system/jsx";
+import { formHelperText as t } from "@stokelp/styled-system/recipes";
+//#region src/components/form/FormHelperText.tsx
+var n = e("p", t, { dataAttr: !0 });
+//#endregion
+export { n as FormHelperText };
+
+//# sourceMappingURL=FormHelperText.js.map

package/dist/components/form/FormHelperText.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormHelperText.js","sources":["../../../src/components/form/FormHelperText.tsx"],"sourcesContent":["import type { ComponentProps } from 'react'\n\nimport { styled } from '@stokelp/styled-system/jsx'\nimport { formHelperText } from '@stokelp/styled-system/recipes'\n\nexport const FormHelperText = styled('p', formHelperText, {\n  dataAttr: true,\n})\n\nexport interface FormHelperTextProps extends ComponentProps<typeof FormHelperText> {}\n"],"names":["FormHelperText","styled","formHelperText"],"mappings":";;;AAKO,MAAMA,IAAiBC,EAAO,KAAKC,GAAgB;AAAA,EACxD,UAAU;AACZ,CAAC;"}
+{"version":3,"file":"FormHelperText.js","names":[],"sources":["../../../src/components/form/FormHelperText.tsx"],"sourcesContent":["import type { ComponentProps } from 'react'\n\nimport { styled } from '@stokelp/styled-system/jsx'\nimport { formHelperText } from '@stokelp/styled-system/recipes'\n\nexport const FormHelperText = styled('p', formHelperText, {\n  dataAttr: true,\n})\n\nexport interface FormHelperTextProps extends ComponentProps<typeof FormHelperText> {}\n"],"mappings":";;;;AAKA,IAAa,IAAiB,EAAO,KAAK,GAAgB,EACxD,UAAU,GACZ,CAAC"}

package/dist/components/form/FormLabel.cjs

@@ -1,2 +1,2 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),n=require("@stokelp/styled-system/jsx"),e=require("@stokelp/styled-system/recipes"),t=require("@stokelp/styled-system/css"),h=require("../tooltip/Tooltip.cjs"),x=n.styled("label",e.formLabel),C=c=>{const[i,a]=e.formLabel.splitVariantProps(c),[p,d]=n.splitCssProps(a),{children:m,className:u,addon:l,tooltipInformation:r,...b}=d,o=e.formLabel(i);return s.jsxs(x,{className:t.cx(o.root,t.css(p),u),...b,children:[m,l?s.jsx("span",{className:o.addon,children:l}):null,r?s.jsx(h.Tooltip,{label:r,children:s.jsx("svg",{className:o.icon,width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:s.jsx("path",{d:"M7.33337 4.66659H8.66671V5.99992H7.33337V4.66659ZM7.33337 7.33325H8.66671V11.3333H7.33337V7.33325ZM8.00004 1.33325C4.32004 1.33325 1.33337 4.31992 1.33337 7.99992C1.33337 11.6799 4.32004 14.6666 8.00004 14.6666C11.68 14.6666 14.6667 11.6799 14.6667 7.99992C14.6667 4.31992 11.68 1.33325 8.00004 1.33325ZM8.00004 13.3333C5.06004 13.3333 2.66671 10.9399 2.66671 7.99992C2.66671 5.05992 5.06004 2.66659 8.00004 2.66659C10.94 2.66659 13.3334 5.05992 13.3334 7.99992C13.3334 10.9399 10.94 13.3333 8.00004 13.3333Z",fill:"currentColor"})})}):null]})};exports.FormLabel=C;
-//# sourceMappingURL=FormLabel.cjs.map
+"use client";const e=require("../tooltip/Tooltip.cjs");let t=require("@stokelp/styled-system/jsx"),n=require("@stokelp/styled-system/recipes"),r=require("react/jsx-runtime"),i=require("@stokelp/styled-system/css");var a=(0,t.styled)(`label`,n.formLabel),o=o=>{let[s,c]=n.formLabel.splitVariantProps(o),[l,u]=(0,t.splitCssProps)(c),{children:d,className:f,addon:p,tooltipInformation:m,...h}=u,g=(0,n.formLabel)(s);return(0,r.jsxs)(a,{className:(0,i.cx)(g.root,(0,i.css)(l),f),...h,children:[d,p?(0,r.jsx)(`span`,{className:g.addon,children:p}):null,m?(0,r.jsx)(e.Tooltip,{label:m,children:(0,r.jsx)(`svg`,{className:g.icon,width:`16`,height:`16`,viewBox:`0 0 16 16`,fill:`none`,xmlns:`http://www.w3.org/2000/svg`,children:(0,r.jsx)(`path`,{d:`M7.33337 4.66659H8.66671V5.99992H7.33337V4.66659ZM7.33337 7.33325H8.66671V11.3333H7.33337V7.33325ZM8.00004 1.33325C4.32004 1.33325 1.33337 4.31992 1.33337 7.99992C1.33337 11.6799 4.32004 14.6666 8.00004 14.6666C11.68 14.6666 14.6667 11.6799 14.6667 7.99992C14.6667 4.31992 11.68 1.33325 8.00004 1.33325ZM8.00004 13.3333C5.06004 13.3333 2.66671 10.9399 2.66671 7.99992C2.66671 5.05992 5.06004 2.66659 8.00004 2.66659C10.94 2.66659 13.3334 5.05992 13.3334 7.99992C13.3334 10.9399 10.94 13.3333 8.00004 13.3333Z`,fill:`currentColor`})})}):null]})};exports.FormLabel=o;
+//# sourceMappingURL=FormLabel.cjs.map

package/dist/components/form/FormLabel.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"FormLabel.cjs","sources":["../../../src/components/form/FormLabel.tsx"],"sourcesContent":["import type { ComponentProps, FC, ReactNode } from 'react'\n\nimport { splitCssProps, styled } from '@stokelp/styled-system/jsx'\nimport { formLabel } from '@stokelp/styled-system/recipes'\nimport { css, cx } from '@stokelp/styled-system/css'\nimport { Tooltip } from '~/components/tooltip/Tooltip'\n\nconst StyledFormLabel = styled('label', formLabel)\n\nexport interface FormLabelProps extends ComponentProps<typeof StyledFormLabel> {\n  addon?: ReactNode\n  tooltipInformation?: ReactNode\n}\n\nexport const FormLabel: FC<FormLabelProps> = props => {\n  const [variantProps, labelProps] = formLabel.splitVariantProps(props)\n  const [cssProps, localProps] = splitCssProps(labelProps)\n  const { children, className, addon, tooltipInformation, ...rootProps } = localProps\n  const styles = formLabel(variantProps)\n\n  return (\n    <StyledFormLabel className={cx(styles.root, css(cssProps), className)} {...rootProps}>\n      {children}\n      {addon ? <span className={styles.addon}>{addon}</span> : null}\n      {tooltipInformation ? (\n        <Tooltip label={tooltipInformation}>\n          <svg\n            className={styles.icon}\n            width=\"16\"\n            height=\"16\"\n            viewBox=\"0 0 16 16\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              d=\"M7.33337 4.66659H8.66671V5.99992H7.33337V4.66659ZM7.33337 7.33325H8.66671V11.3333H7.33337V7.33325ZM8.00004 1.33325C4.32004 1.33325 1.33337 4.31992 1.33337 7.99992C1.33337 11.6799 4.32004 14.6666 8.00004 14.6666C11.68 14.6666 14.6667 11.6799 14.6667 7.99992C14.6667 4.31992 11.68 1.33325 8.00004 1.33325ZM8.00004 13.3333C5.06004 13.3333 2.66671 10.9399 2.66671 7.99992C2.66671 5.05992 5.06004 2.66659 8.00004 2.66659C10.94 2.66659 13.3334 5.05992 13.3334 7.99992C13.3334 10.9399 10.94 13.3333 8.00004 13.3333Z\"\n              fill=\"currentColor\"\n            />\n          </svg>\n        </Tooltip>\n      ) : null}\n    </StyledFormLabel>\n  )\n}\n"],"names":["StyledFormLabel","styled","formLabel","FormLabel","props","variantProps","labelProps","cssProps","localProps","splitCssProps","children","className","addon","tooltipInformation","rootProps","styles","jsxs","cx","css","jsx","Tooltip"],"mappings":"kSAOMA,EAAkBC,EAAAA,OAAO,QAASC,WAAS,EAOpCC,EAAgCC,GAAS,CACpD,KAAM,CAACC,EAAcC,CAAU,EAAIJ,EAAAA,UAAU,kBAAkBE,CAAK,EAC9D,CAACG,EAAUC,CAAU,EAAIC,EAAAA,cAAcH,CAAU,EACjD,CAAE,SAAAI,EAAU,UAAAC,EAAW,MAAAC,EAAO,mBAAAC,EAAoB,GAAGC,GAAcN,EACnEO,EAASb,EAAAA,UAAUG,CAAY,EAErC,OACEW,EAAAA,KAAChB,EAAA,CAAgB,UAAWiB,EAAAA,GAAGF,EAAO,KAAMG,EAAAA,IAAIX,CAAQ,EAAGI,CAAS,EAAI,GAAGG,EACxE,SAAA,CAAAJ,EACAE,EAAQO,EAAAA,IAAC,OAAA,CAAK,UAAWJ,EAAO,MAAQ,WAAM,EAAU,KACxDF,EACCM,EAAAA,IAACC,EAAAA,QAAA,CAAQ,MAAOP,EACd,SAAAM,EAAAA,IAAC,MAAA,CACC,UAAWJ,EAAO,KAClB,MAAM,KACN,OAAO,KACP,QAAQ,YACR,KAAK,OACL,MAAM,6BAEN,SAAAI,EAAAA,IAAC,OAAA,CACC,EAAE,+fACF,KAAK,cAAA,CAAA,CACP,CAAA,EAEJ,EACE,IAAA,EACN,CAEJ"}
+{"version":3,"file":"FormLabel.cjs","names":[],"sources":["../../../src/components/form/FormLabel.tsx"],"sourcesContent":["import type { ComponentProps, FC, ReactNode } from 'react'\n\nimport { splitCssProps, styled } from '@stokelp/styled-system/jsx'\nimport { formLabel } from '@stokelp/styled-system/recipes'\nimport { css, cx } from '@stokelp/styled-system/css'\nimport { Tooltip } from '~/components/tooltip/Tooltip'\n\nconst StyledFormLabel = styled('label', formLabel)\n\nexport type FormLabelProps = ComponentProps<typeof StyledFormLabel> & {\n  addon?: ReactNode\n  tooltipInformation?: ReactNode\n}\n\nexport const FormLabel: FC<FormLabelProps> = props => {\n  const [variantProps, labelProps] = formLabel.splitVariantProps(props)\n  const [cssProps, localProps] = splitCssProps(labelProps)\n  const { children, className, addon, tooltipInformation, ...rootProps } = localProps\n  const styles = formLabel(variantProps)\n\n  return (\n    <StyledFormLabel className={cx(styles.root, css(cssProps), className)} {...rootProps}>\n      {children}\n      {addon ? <span className={styles.addon}>{addon}</span> : null}\n      {tooltipInformation ? (\n        <Tooltip label={tooltipInformation}>\n          <svg\n            className={styles.icon}\n            width=\"16\"\n            height=\"16\"\n            viewBox=\"0 0 16 16\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              d=\"M7.33337 4.66659H8.66671V5.99992H7.33337V4.66659ZM7.33337 7.33325H8.66671V11.3333H7.33337V7.33325ZM8.00004 1.33325C4.32004 1.33325 1.33337 4.31992 1.33337 7.99992C1.33337 11.6799 4.32004 14.6666 8.00004 14.6666C11.68 14.6666 14.6667 11.6799 14.6667 7.99992C14.6667 4.31992 11.68 1.33325 8.00004 1.33325ZM8.00004 13.3333C5.06004 13.3333 2.66671 10.9399 2.66671 7.99992C2.66671 5.05992 5.06004 2.66659 8.00004 2.66659C10.94 2.66659 13.3334 5.05992 13.3334 7.99992C13.3334 10.9399 10.94 13.3333 8.00004 13.3333Z\"\n              fill=\"currentColor\"\n            />\n          </svg>\n        </Tooltip>\n      ) : null}\n    </StyledFormLabel>\n  )\n}\n"],"mappings":"sNAOA,IAAM,GAAA,EAAA,EAAA,QAAyB,QAAS,EAAA,SAAS,EAOpC,EAAgC,GAAS,CACpD,GAAM,CAAC,EAAc,GAAc,EAAA,UAAU,kBAAkB,CAAK,EAC9D,CAAC,EAAU,IAAA,EAAA,EAAA,eAA4B,CAAU,EACjD,CAAE,WAAU,YAAW,QAAO,qBAAoB,GAAG,GAAc,EACnE,GAAA,EAAA,EAAA,WAAmB,CAAY,EAErC,OACE,EAAA,EAAA,MAAC,EAAD,CAAiB,WAAA,EAAA,EAAA,IAAc,EAAO,MAAA,EAAA,EAAA,KAAU,CAAQ,EAAG,CAAS,EAAG,GAAI,WAA3E,CACG,EACA,GAAQ,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAO,eAAQ,CAAY,CAAA,EAAI,KACxD,GACC,EAAA,EAAA,KAAC,EAAA,QAAD,CAAS,MAAO,YACd,EAAA,EAAA,KAAC,MAAD,CACE,UAAW,EAAO,KAClB,MAAM,KACN,OAAO,KACP,QAAQ,YACR,KAAK,OACL,MAAM,uCAEN,EAAA,EAAA,KAAC,OAAD,CACE,EAAE,+fACF,KAAK,cACN,CAAA,CACE,CAAA,CACE,CAAA,EACP,IACW,GAErB"}

package/dist/components/form/FormLabel.d.ts

@@ -2,9 +2,9 @@ import { ComponentProps, FC, ReactNode } from 'react';
 import { StyledComponent } from '@stokelp/styled-system/types';
 import { FormLabelVariantProps } from '@stokelp/styled-system/recipes';
 declare const StyledFormLabel: StyledComponent<"label", FormLabelVariantProps>;
-export interface FormLabelProps extends ComponentProps<typeof StyledFormLabel> {
+export type FormLabelProps = ComponentProps<typeof StyledFormLabel> & {
     addon?: ReactNode;
     tooltipInformation?: ReactNode;
-}
+};
 export declare const FormLabel: FC<FormLabelProps>;
 export {};

package/dist/components/form/FormLabel.js

@@ -1,35 +1,40 @@
 "use client";
-import { jsxs as h, jsx as o } from "react/jsx-runtime";
-import { splitCssProps as C, styled as f } from "@stokelp/styled-system/jsx";
-import { formLabel as l } from "@stokelp/styled-system/recipes";
-import { cx as P, css as b } from "@stokelp/styled-system/css";
-import { Tooltip as w } from "../tooltip/Tooltip.js";
-const x = f("label", l), M = (n) => {
-  const [e, a] = l.splitVariantProps(n), [i, c] = C(a), { children: p, className: m, addon: r, tooltipInformation: t, ...d } = c, s = l(e);
-  return /* @__PURE__ */ h(x, { className: P(s.root, b(i), m), ...d, children: [
-    p,
-    r ? /* @__PURE__ */ o("span", { className: s.addon, children: r }) : null,
-    t ? /* @__PURE__ */ o(w, { label: t, children: /* @__PURE__ */ o(
-      "svg",
-      {
-        className: s.icon,
-        width: "16",
-        height: "16",
-        viewBox: "0 0 16 16",
-        fill: "none",
-        xmlns: "http://www.w3.org/2000/svg",
-        children: /* @__PURE__ */ o(
-          "path",
-          {
-            d: "M7.33337 4.66659H8.66671V5.99992H7.33337V4.66659ZM7.33337 7.33325H8.66671V11.3333H7.33337V7.33325ZM8.00004 1.33325C4.32004 1.33325 1.33337 4.31992 1.33337 7.99992C1.33337 11.6799 4.32004 14.6666 8.00004 14.6666C11.68 14.6666 14.6667 11.6799 14.6667 7.99992C14.6667 4.31992 11.68 1.33325 8.00004 1.33325ZM8.00004 13.3333C5.06004 13.3333 2.66671 10.9399 2.66671 7.99992C2.66671 5.05992 5.06004 2.66659 8.00004 2.66659C10.94 2.66659 13.3334 5.05992 13.3334 7.99992C13.3334 10.9399 10.94 13.3333 8.00004 13.3333Z",
-            fill: "currentColor"
-          }
-        )
-      }
-    ) }) : null
-  ] });
+import { Tooltip as e } from "../tooltip/Tooltip.js";
+import { splitCssProps as t, styled as n } from "@stokelp/styled-system/jsx";
+import { formLabel as r } from "@stokelp/styled-system/recipes";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { css as o, cx as s } from "@stokelp/styled-system/css";
+//#region src/components/form/FormLabel.tsx
+var c = n("label", r), l = (n) => {
+	let [l, u] = r.splitVariantProps(n), [d, f] = t(u), { children: p, className: m, addon: h, tooltipInformation: g, ..._ } = f, v = r(l);
+	return /* @__PURE__ */ a(c, {
+		className: s(v.root, o(d), m),
+		..._,
+		children: [
+			p,
+			h ? /* @__PURE__ */ i("span", {
+				className: v.addon,
+				children: h
+			}) : null,
+			g ? /* @__PURE__ */ i(e, {
+				label: g,
+				children: /* @__PURE__ */ i("svg", {
+					className: v.icon,
+					width: "16",
+					height: "16",
+					viewBox: "0 0 16 16",
+					fill: "none",
+					xmlns: "http://www.w3.org/2000/svg",
+					children: /* @__PURE__ */ i("path", {
+						d: "M7.33337 4.66659H8.66671V5.99992H7.33337V4.66659ZM7.33337 7.33325H8.66671V11.3333H7.33337V7.33325ZM8.00004 1.33325C4.32004 1.33325 1.33337 4.31992 1.33337 7.99992C1.33337 11.6799 4.32004 14.6666 8.00004 14.6666C11.68 14.6666 14.6667 11.6799 14.6667 7.99992C14.6667 4.31992 11.68 1.33325 8.00004 1.33325ZM8.00004 13.3333C5.06004 13.3333 2.66671 10.9399 2.66671 7.99992C2.66671 5.05992 5.06004 2.66659 8.00004 2.66659C10.94 2.66659 13.3334 5.05992 13.3334 7.99992C13.3334 10.9399 10.94 13.3333 8.00004 13.3333Z",
+						fill: "currentColor"
+					})
+				})
+			}) : null
+		]
+	});
 };
-export {
-  M as FormLabel
-};
-//# sourceMappingURL=FormLabel.js.map
+//#endregion
+export { l as FormLabel };
+
+//# sourceMappingURL=FormLabel.js.map

package/dist/components/form/FormLabel.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormLabel.js","sources":["../../../src/components/form/FormLabel.tsx"],"sourcesContent":["import type { ComponentProps, FC, ReactNode } from 'react'\n\nimport { splitCssProps, styled } from '@stokelp/styled-system/jsx'\nimport { formLabel } from '@stokelp/styled-system/recipes'\nimport { css, cx } from '@stokelp/styled-system/css'\nimport { Tooltip } from '~/components/tooltip/Tooltip'\n\nconst StyledFormLabel = styled('label', formLabel)\n\nexport interface FormLabelProps extends ComponentProps<typeof StyledFormLabel> {\n  addon?: ReactNode\n  tooltipInformation?: ReactNode\n}\n\nexport const FormLabel: FC<FormLabelProps> = props => {\n  const [variantProps, labelProps] = formLabel.splitVariantProps(props)\n  const [cssProps, localProps] = splitCssProps(labelProps)\n  const { children, className, addon, tooltipInformation, ...rootProps } = localProps\n  const styles = formLabel(variantProps)\n\n  return (\n    <StyledFormLabel className={cx(styles.root, css(cssProps), className)} {...rootProps}>\n      {children}\n      {addon ? <span className={styles.addon}>{addon}</span> : null}\n      {tooltipInformation ? (\n        <Tooltip label={tooltipInformation}>\n          <svg\n            className={styles.icon}\n            width=\"16\"\n            height=\"16\"\n            viewBox=\"0 0 16 16\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              d=\"M7.33337 4.66659H8.66671V5.99992H7.33337V4.66659ZM7.33337 7.33325H8.66671V11.3333H7.33337V7.33325ZM8.00004 1.33325C4.32004 1.33325 1.33337 4.31992 1.33337 7.99992C1.33337 11.6799 4.32004 14.6666 8.00004 14.6666C11.68 14.6666 14.6667 11.6799 14.6667 7.99992C14.6667 4.31992 11.68 1.33325 8.00004 1.33325ZM8.00004 13.3333C5.06004 13.3333 2.66671 10.9399 2.66671 7.99992C2.66671 5.05992 5.06004 2.66659 8.00004 2.66659C10.94 2.66659 13.3334 5.05992 13.3334 7.99992C13.3334 10.9399 10.94 13.3333 8.00004 13.3333Z\"\n              fill=\"currentColor\"\n            />\n          </svg>\n        </Tooltip>\n      ) : null}\n    </StyledFormLabel>\n  )\n}\n"],"names":["StyledFormLabel","styled","formLabel","FormLabel","props","variantProps","labelProps","cssProps","localProps","splitCssProps","children","className","addon","tooltipInformation","rootProps","styles","jsxs","cx","css","jsx","Tooltip"],"mappings":";;;;;;AAOA,MAAMA,IAAkBC,EAAO,SAASC,CAAS,GAOpCC,IAAgC,CAAAC,MAAS;AACpD,QAAM,CAACC,GAAcC,CAAU,IAAIJ,EAAU,kBAAkBE,CAAK,GAC9D,CAACG,GAAUC,CAAU,IAAIC,EAAcH,CAAU,GACjD,EAAE,UAAAI,GAAU,WAAAC,GAAW,OAAAC,GAAO,oBAAAC,GAAoB,GAAGC,MAAcN,GACnEO,IAASb,EAAUG,CAAY;AAErC,SACE,gBAAAW,EAAChB,GAAA,EAAgB,WAAWiB,EAAGF,EAAO,MAAMG,EAAIX,CAAQ,GAAGI,CAAS,GAAI,GAAGG,GACxE,UAAA;AAAA,IAAAJ;AAAA,IACAE,IAAQ,gBAAAO,EAAC,QAAA,EAAK,WAAWJ,EAAO,OAAQ,aAAM,IAAU;AAAA,IACxDF,IACC,gBAAAM,EAACC,GAAA,EAAQ,OAAOP,GACd,UAAA,gBAAAM;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWJ,EAAO;AAAA,QAClB,OAAM;AAAA,QACN,QAAO;AAAA,QACP,SAAQ;AAAA,QACR,MAAK;AAAA,QACL,OAAM;AAAA,QAEN,UAAA,gBAAAI;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,GAAE;AAAA,YACF,MAAK;AAAA,UAAA;AAAA,QAAA;AAAA,MACP;AAAA,IAAA,GAEJ,IACE;AAAA,EAAA,GACN;AAEJ;"}
+{"version":3,"file":"FormLabel.js","names":[],"sources":["../../../src/components/form/FormLabel.tsx"],"sourcesContent":["import type { ComponentProps, FC, ReactNode } from 'react'\n\nimport { splitCssProps, styled } from '@stokelp/styled-system/jsx'\nimport { formLabel } from '@stokelp/styled-system/recipes'\nimport { css, cx } from '@stokelp/styled-system/css'\nimport { Tooltip } from '~/components/tooltip/Tooltip'\n\nconst StyledFormLabel = styled('label', formLabel)\n\nexport type FormLabelProps = ComponentProps<typeof StyledFormLabel> & {\n  addon?: ReactNode\n  tooltipInformation?: ReactNode\n}\n\nexport const FormLabel: FC<FormLabelProps> = props => {\n  const [variantProps, labelProps] = formLabel.splitVariantProps(props)\n  const [cssProps, localProps] = splitCssProps(labelProps)\n  const { children, className, addon, tooltipInformation, ...rootProps } = localProps\n  const styles = formLabel(variantProps)\n\n  return (\n    <StyledFormLabel className={cx(styles.root, css(cssProps), className)} {...rootProps}>\n      {children}\n      {addon ? <span className={styles.addon}>{addon}</span> : null}\n      {tooltipInformation ? (\n        <Tooltip label={tooltipInformation}>\n          <svg\n            className={styles.icon}\n            width=\"16\"\n            height=\"16\"\n            viewBox=\"0 0 16 16\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              d=\"M7.33337 4.66659H8.66671V5.99992H7.33337V4.66659ZM7.33337 7.33325H8.66671V11.3333H7.33337V7.33325ZM8.00004 1.33325C4.32004 1.33325 1.33337 4.31992 1.33337 7.99992C1.33337 11.6799 4.32004 14.6666 8.00004 14.6666C11.68 14.6666 14.6667 11.6799 14.6667 7.99992C14.6667 4.31992 11.68 1.33325 8.00004 1.33325ZM8.00004 13.3333C5.06004 13.3333 2.66671 10.9399 2.66671 7.99992C2.66671 5.05992 5.06004 2.66659 8.00004 2.66659C10.94 2.66659 13.3334 5.05992 13.3334 7.99992C13.3334 10.9399 10.94 13.3333 8.00004 13.3333Z\"\n              fill=\"currentColor\"\n            />\n          </svg>\n        </Tooltip>\n      ) : null}\n    </StyledFormLabel>\n  )\n}\n"],"mappings":";;;;;;;AAOA,IAAM,IAAkB,EAAO,SAAS,CAAS,GAOpC,KAAgC,MAAS;CACpD,IAAM,CAAC,GAAc,KAAc,EAAU,kBAAkB,CAAK,GAC9D,CAAC,GAAU,KAAc,EAAc,CAAU,GACjD,EAAE,aAAU,cAAW,UAAO,uBAAoB,GAAG,MAAc,GACnE,IAAS,EAAU,CAAY;CAErC,OACE,kBAAC,GAAD;EAAiB,WAAW,EAAG,EAAO,MAAM,EAAI,CAAQ,GAAG,CAAS;EAAG,GAAI;YAA3E;GACG;GACA,IAAQ,kBAAC,QAAD;IAAM,WAAW,EAAO;cAAQ;GAAY,CAAA,IAAI;GACxD,IACC,kBAAC,GAAD;IAAS,OAAO;cACd,kBAAC,OAAD;KACE,WAAW,EAAO;KAClB,OAAM;KACN,QAAO;KACP,SAAQ;KACR,MAAK;KACL,OAAM;eAEN,kBAAC,QAAD;MACE,GAAE;MACF,MAAK;KACN,CAAA;IACE,CAAA;GACE,CAAA,IACP;EACW;;AAErB"}

package/dist/components/heading/Heading.cjs

@@ -1,2 +1,2 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),i=require("@stokelp/styled-system/jsx"),c=require("@stokelp/styled-system/recipes"),o=require("react"),u=s=>{const{as:e="h2",...t}=s,n=o.useMemo(()=>i.styled(e,c.heading),[e]);return r.jsx(n,{size:e,...t})};exports.Heading=u;
-//# sourceMappingURL=Heading.cjs.map
+"use client";let e=require("@stokelp/styled-system/jsx"),t=require("@stokelp/styled-system/recipes"),n=require("react"),r=require("react/jsx-runtime");var i=i=>{let{as:a=`h2`,...o}=i;return(0,r.jsx)((0,n.useMemo)(()=>(0,e.styled)(a,t.heading),[a]),{size:a,...o})};exports.Heading=i;
+//# sourceMappingURL=Heading.cjs.map

package/dist/components/heading/Heading.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Heading.cjs","sources":["../../../src/components/heading/Heading.tsx"],"sourcesContent":["import { type HTMLStyledProps, styled, type StyledComponent } from '@stokelp/styled-system/jsx'\nimport { heading, type HeadingVariantProps } from '@stokelp/styled-system/recipes'\nimport { useMemo } from 'react'\n\ntype As = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'\n\nexport type HeadingProps = {\n  as?: As\n} & HeadingVariantProps &\n  HTMLStyledProps<As>\n\nexport const Heading = (props: HeadingProps) => {\n  const { as = 'h2', ...localProps } = props\n  const Dynamic = useMemo(() => styled(as, heading) as StyledComponent<As>, [as])\n\n  return <Dynamic size={as} {...localProps} />\n}\n"],"names":["Heading","props","as","localProps","Dynamic","useMemo","styled","heading","jsx"],"mappings":"yOAWaA,EAAWC,GAAwB,CAC9C,KAAM,CAAE,GAAAC,EAAK,KAAM,GAAGC,GAAeF,EAC/BG,EAAUC,EAAAA,QAAQ,IAAMC,EAAAA,OAAOJ,EAAIK,SAAO,EAA0B,CAACL,CAAE,CAAC,EAE9E,OAAOM,EAAAA,IAACJ,EAAA,CAAQ,KAAMF,EAAK,GAAGC,EAAY,CAC5C"}
+{"version":3,"file":"Heading.cjs","names":[],"sources":["../../../src/components/heading/Heading.tsx"],"sourcesContent":["import { type HTMLStyledProps, styled, type StyledComponent } from '@stokelp/styled-system/jsx'\nimport { heading, type HeadingVariantProps } from '@stokelp/styled-system/recipes'\nimport { useMemo } from 'react'\n\ntype As = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'\n\nexport type HeadingProps = {\n  as?: As\n} & HeadingVariantProps &\n  HTMLStyledProps<As>\n\nexport const Heading = (props: HeadingProps) => {\n  const { as = 'h2', ...localProps } = props\n  const Dynamic = useMemo(() => styled(as, heading) as StyledComponent<As>, [as])\n\n  return <Dynamic size={as} {...localProps} />\n}\n"],"mappings":"uJAWA,IAAa,EAAW,GAAwB,CAC9C,GAAM,CAAE,KAAK,KAAM,GAAG,GAAe,EAGrC,OAAO,EAAA,EAAA,MAAA,EAAA,EAAA,cAAA,EAAA,EAAA,QAF8B,EAAI,EAAA,OAAO,EAA0B,CAAC,CAAE,CAErE,EAAD,CAAS,KAAM,EAAI,GAAI,CAAa,CAAA,CAC7C"}

package/dist/components/heading/Heading.js

@@ -1,13 +1,17 @@
 "use client";
-import { jsx as m } from "react/jsx-runtime";
-import { styled as s } from "@stokelp/styled-system/jsx";
-import { heading as i } from "@stokelp/styled-system/recipes";
+import { styled as e } from "@stokelp/styled-system/jsx";
+import { heading as t } from "@stokelp/styled-system/recipes";
 import { useMemo as n } from "react";
-const l = (r) => {
-  const { as: o = "h2", ...t } = r, e = n(() => s(o, i), [o]);
-  return /* @__PURE__ */ m(e, { size: o, ...t });
+import { jsx as r } from "react/jsx-runtime";
+//#region src/components/heading/Heading.tsx
+var i = (i) => {
+	let { as: a = "h2", ...o } = i;
+	return /* @__PURE__ */ r(n(() => e(a, t), [a]), {
+		size: a,
+		...o
+	});
 };
-export {
-  l as Heading
-};
-//# sourceMappingURL=Heading.js.map
+//#endregion
+export { i as Heading };
+
+//# sourceMappingURL=Heading.js.map

package/dist/components/heading/Heading.js.map

@@ -1 +1 @@
-{"version":3,"file":"Heading.js","sources":["../../../src/components/heading/Heading.tsx"],"sourcesContent":["import { type HTMLStyledProps, styled, type StyledComponent } from '@stokelp/styled-system/jsx'\nimport { heading, type HeadingVariantProps } from '@stokelp/styled-system/recipes'\nimport { useMemo } from 'react'\n\ntype As = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'\n\nexport type HeadingProps = {\n  as?: As\n} & HeadingVariantProps &\n  HTMLStyledProps<As>\n\nexport const Heading = (props: HeadingProps) => {\n  const { as = 'h2', ...localProps } = props\n  const Dynamic = useMemo(() => styled(as, heading) as StyledComponent<As>, [as])\n\n  return <Dynamic size={as} {...localProps} />\n}\n"],"names":["Heading","props","as","localProps","Dynamic","useMemo","styled","heading","jsx"],"mappings":";;;;;AAWO,MAAMA,IAAU,CAACC,MAAwB;AAC9C,QAAM,EAAE,IAAAC,IAAK,MAAM,GAAGC,MAAeF,GAC/BG,IAAUC,EAAQ,MAAMC,EAAOJ,GAAIK,CAAO,GAA0B,CAACL,CAAE,CAAC;AAE9E,SAAO,gBAAAM,EAACJ,GAAA,EAAQ,MAAMF,GAAK,GAAGC,GAAY;AAC5C;"}
+{"version":3,"file":"Heading.js","names":[],"sources":["../../../src/components/heading/Heading.tsx"],"sourcesContent":["import { type HTMLStyledProps, styled, type StyledComponent } from '@stokelp/styled-system/jsx'\nimport { heading, type HeadingVariantProps } from '@stokelp/styled-system/recipes'\nimport { useMemo } from 'react'\n\ntype As = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'\n\nexport type HeadingProps = {\n  as?: As\n} & HeadingVariantProps &\n  HTMLStyledProps<As>\n\nexport const Heading = (props: HeadingProps) => {\n  const { as = 'h2', ...localProps } = props\n  const Dynamic = useMemo(() => styled(as, heading) as StyledComponent<As>, [as])\n\n  return <Dynamic size={as} {...localProps} />\n}\n"],"mappings":";;;;;;AAWA,IAAa,KAAW,MAAwB;CAC9C,IAAM,EAAE,QAAK,MAAM,GAAG,MAAe;CAGrC,OAAO,kBAFS,QAAc,EAAO,GAAI,CAAO,GAA0B,CAAC,CAAE,CAErE,GAAD;EAAS,MAAM;EAAI,GAAI;CAAa,CAAA;AAC7C"}

package/dist/components/icon/Icon.cjs

@@ -1,2 +1,2 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),s=require("@ark-ui/react"),n=require("react"),o=require("@stokelp/styled-system/jsx"),i=require("@stokelp/styled-system/recipes"),u=o.styled(s.ark.svg,i.icon),e=n.forwardRef((r,t)=>c.jsx(u,{ref:t,asChild:!0,...r}));e.displayName="Icon";exports.Icon=e;
-//# sourceMappingURL=Icon.cjs.map
+"use client";let e=require("@ark-ui/react"),t=require("@stokelp/styled-system/jsx"),n=require("@stokelp/styled-system/recipes"),r=require("react"),i=require("react/jsx-runtime");var a=(0,t.styled)(e.ark.svg,n.icon),o=(0,r.forwardRef)((e,t)=>(0,i.jsx)(a,{ref:t,asChild:!0,...e}));o.displayName=`Icon`,exports.Icon=o;
+//# sourceMappingURL=Icon.cjs.map

package/dist/components/icon/Icon.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.cjs","sources":["../../../src/components/icon/Icon.tsx"],"sourcesContent":["import { ark } from '@ark-ui/react'\nimport type { FC, ReactElement, ReactNode } from 'react'\nimport { forwardRef } from 'react'\n\nimport { type HTMLStyledProps, styled } from '@stokelp/styled-system/jsx'\nimport { icon, type IconVariantProps } from '@stokelp/styled-system/recipes'\n\nexport interface IconProps extends IconVariantProps, HTMLStyledProps<'svg'> {\n  children: ReactElement | ReactNode\n}\n\nconst StyledIcon = styled(ark.svg, icon)\n\nexport const Icon = forwardRef<SVGSVGElement, IconProps>((props, ref) => {\n  return <StyledIcon ref={ref} asChild {...props} />\n}) as FC<IconProps>\n\nIcon.displayName = 'Icon'\n"],"names":["StyledIcon","styled","ark","icon","Icon","forwardRef","props","ref"],"mappings":"oQAWMA,EAAaC,EAAAA,OAAOC,MAAI,IAAKC,EAAAA,IAAI,EAE1BC,EAAOC,EAAAA,WAAqC,CAACC,EAAOC,UACvDP,EAAA,CAAW,IAAAO,EAAU,QAAO,GAAE,GAAGD,EAAO,CACjD,EAEDF,EAAK,YAAc"}
+{"version":3,"file":"Icon.cjs","names":[],"sources":["../../../src/components/icon/Icon.tsx"],"sourcesContent":["import { ark } from '@ark-ui/react'\nimport type { FC, ReactElement, ReactNode } from 'react'\nimport { forwardRef } from 'react'\n\nimport { type HTMLStyledProps, styled } from '@stokelp/styled-system/jsx'\nimport { icon, type IconVariantProps } from '@stokelp/styled-system/recipes'\n\nexport type IconProps = IconVariantProps &\n  HTMLStyledProps<'svg'> & {\n    children: ReactElement | ReactNode\n  }\n\nconst StyledIcon = styled(ark.svg, icon)\n\nexport const Icon = forwardRef<SVGSVGElement, IconProps>((props, ref) => {\n  return <StyledIcon ref={ref} asChild {...props} />\n}) as FC<IconProps>\n\nIcon.displayName = 'Icon'\n"],"mappings":"kLAYA,IAAM,GAAA,EAAA,EAAA,QAAoB,EAAA,IAAI,IAAK,EAAA,IAAI,EAE1B,GAAA,EAAA,EAAA,aAA6C,EAAO,KACxD,EAAA,EAAA,KAAC,EAAD,CAAiB,MAAK,QAAA,GAAQ,GAAI,CAAQ,CAAA,CAClD,EAED,EAAK,YAAc"}

package/dist/components/icon/Icon.d.ts

@@ -1,7 +1,7 @@
 import { FC, ReactElement, ReactNode } from 'react';
 import { HTMLStyledProps } from '@stokelp/styled-system/jsx';
 import { IconVariantProps } from '@stokelp/styled-system/recipes';
-export interface IconProps extends IconVariantProps, HTMLStyledProps<'svg'> {
+export type IconProps = IconVariantProps & HTMLStyledProps<'svg'> & {
     children: ReactElement | ReactNode;
-}
+};
 export declare const Icon: FC<IconProps>;

package/dist/components/icon/Icon.js

@@ -1,12 +1,17 @@
 "use client";
-import { jsx as t } from "react/jsx-runtime";
-import { ark as m } from "@ark-ui/react";
-import { forwardRef as e } from "react";
-import { styled as i } from "@stokelp/styled-system/jsx";
+import { ark as e } from "@ark-ui/react";
+import { styled as t } from "@stokelp/styled-system/jsx";
 import { icon as n } from "@stokelp/styled-system/recipes";
-const s = i(m.svg, n), c = e((o, r) => /* @__PURE__ */ t(s, { ref: r, asChild: !0, ...o }));
-c.displayName = "Icon";
-export {
-  c as Icon
-};
-//# sourceMappingURL=Icon.js.map
+import { forwardRef as r } from "react";
+import { jsx as i } from "react/jsx-runtime";
+//#region src/components/icon/Icon.tsx
+var a = t(e.svg, n), o = r((e, t) => /* @__PURE__ */ i(a, {
+	ref: t,
+	asChild: !0,
+	...e
+}));
+o.displayName = "Icon";
+//#endregion
+export { o as Icon };
+
+//# sourceMappingURL=Icon.js.map

package/dist/components/icon/Icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.js","sources":["../../../src/components/icon/Icon.tsx"],"sourcesContent":["import { ark } from '@ark-ui/react'\nimport type { FC, ReactElement, ReactNode } from 'react'\nimport { forwardRef } from 'react'\n\nimport { type HTMLStyledProps, styled } from '@stokelp/styled-system/jsx'\nimport { icon, type IconVariantProps } from '@stokelp/styled-system/recipes'\n\nexport interface IconProps extends IconVariantProps, HTMLStyledProps<'svg'> {\n  children: ReactElement | ReactNode\n}\n\nconst StyledIcon = styled(ark.svg, icon)\n\nexport const Icon = forwardRef<SVGSVGElement, IconProps>((props, ref) => {\n  return <StyledIcon ref={ref} asChild {...props} />\n}) as FC<IconProps>\n\nIcon.displayName = 'Icon'\n"],"names":["StyledIcon","styled","ark","icon","Icon","forwardRef","props","ref"],"mappings":";;;;;;AAWA,MAAMA,IAAaC,EAAOC,EAAI,KAAKC,CAAI,GAE1BC,IAAOC,EAAqC,CAACC,GAAOC,wBACvDP,GAAA,EAAW,KAAAO,GAAU,SAAO,IAAE,GAAGD,GAAO,CACjD;AAEDF,EAAK,cAAc;"}
+{"version":3,"file":"Icon.js","names":[],"sources":["../../../src/components/icon/Icon.tsx"],"sourcesContent":["import { ark } from '@ark-ui/react'\nimport type { FC, ReactElement, ReactNode } from 'react'\nimport { forwardRef } from 'react'\n\nimport { type HTMLStyledProps, styled } from '@stokelp/styled-system/jsx'\nimport { icon, type IconVariantProps } from '@stokelp/styled-system/recipes'\n\nexport type IconProps = IconVariantProps &\n  HTMLStyledProps<'svg'> & {\n    children: ReactElement | ReactNode\n  }\n\nconst StyledIcon = styled(ark.svg, icon)\n\nexport const Icon = forwardRef<SVGSVGElement, IconProps>((props, ref) => {\n  return <StyledIcon ref={ref} asChild {...props} />\n}) as FC<IconProps>\n\nIcon.displayName = 'Icon'\n"],"mappings":";;;;;;;AAYA,IAAM,IAAa,EAAO,EAAI,KAAK,CAAI,GAE1B,IAAO,GAAsC,GAAO,MACxD,kBAAC,GAAD;CAAiB;CAAK,SAAA;CAAQ,GAAI;AAAQ,CAAA,CAClD;AAED,EAAK,cAAc"}

package/dist/components/icon-button/IconButton.cjs

@@ -1,2 +1,2 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("@stokelp/styled-system/jsx"),e=require("@stokelp/styled-system/recipes"),o=t.styled("button",e.iconButton);exports.IconButton=o;
-//# sourceMappingURL=IconButton.cjs.map
+"use client";let e=require("@stokelp/styled-system/jsx"),t=require("@stokelp/styled-system/recipes");var n=(0,e.styled)(`button`,t.iconButton);exports.IconButton=n;
+//# sourceMappingURL=IconButton.cjs.map

package/dist/components/icon-button/IconButton.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.cjs","sources":["../../../src/components/icon-button/IconButton.tsx"],"sourcesContent":["import { styled } from '@stokelp/styled-system/jsx'\nimport { iconButton, type IconButtonVariantProps } from '@stokelp/styled-system/recipes'\nimport type { Assign, StyledComponent } from '@stokelp/styled-system/types'\nimport type { ComponentProps } from 'react'\n\nexport const IconButton = styled('button', iconButton) as StyledComponent<\n  'button',\n  IconButtonVariantProps & { 'aria-label': string }\n>\n\nexport interface IconButtonProps extends Assign<ComponentProps<typeof IconButton>, { 'aria-label': string }> {}\n"],"names":["IconButton","styled","iconButton"],"mappings":"uLAKaA,EAAaC,EAAAA,OAAO,SAAUC,EAAAA,UAAU"}
+{"version":3,"file":"IconButton.cjs","names":[],"sources":["../../../src/components/icon-button/IconButton.tsx"],"sourcesContent":["import { styled } from '@stokelp/styled-system/jsx'\nimport { iconButton, type IconButtonVariantProps } from '@stokelp/styled-system/recipes'\nimport type { Assign, StyledComponent } from '@stokelp/styled-system/types'\nimport type { ComponentProps } from 'react'\n\nexport const IconButton = styled('button', iconButton) as StyledComponent<\n  'button',\n  IconButtonVariantProps & { 'aria-label': string }\n>\n\nexport type IconButtonProps = Assign<ComponentProps<typeof IconButton>, { 'aria-label': string }>\n"],"mappings":"qGAKA,IAAa,GAAA,EAAA,EAAA,QAAoB,SAAU,EAAA,UAAU"}

package/dist/components/icon-button/IconButton.d.ts

@@ -4,7 +4,6 @@ import { ComponentProps } from 'react';
 export declare const IconButton: StyledComponent<"button", IconButtonVariantProps & {
     "aria-label": string;
 }>;
-export interface IconButtonProps extends Assign<ComponentProps<typeof IconButton>, {
+export type IconButtonProps = Assign<ComponentProps<typeof IconButton>, {
     'aria-label': string;
-}> {
-}
+}>;

package/dist/components/icon-button/IconButton.js

@@ -1,8 +1,9 @@
 "use client";
-import { styled as t } from "@stokelp/styled-system/jsx";
-import { iconButton as o } from "@stokelp/styled-system/recipes";
-const c = t("button", o);
-export {
-  c as IconButton
-};
-//# sourceMappingURL=IconButton.js.map
+import { styled as e } from "@stokelp/styled-system/jsx";
+import { iconButton as t } from "@stokelp/styled-system/recipes";
+//#region src/components/icon-button/IconButton.tsx
+var n = e("button", t);
+//#endregion
+export { n as IconButton };
+
+//# sourceMappingURL=IconButton.js.map

package/dist/components/icon-button/IconButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.js","sources":["../../../src/components/icon-button/IconButton.tsx"],"sourcesContent":["import { styled } from '@stokelp/styled-system/jsx'\nimport { iconButton, type IconButtonVariantProps } from '@stokelp/styled-system/recipes'\nimport type { Assign, StyledComponent } from '@stokelp/styled-system/types'\nimport type { ComponentProps } from 'react'\n\nexport const IconButton = styled('button', iconButton) as StyledComponent<\n  'button',\n  IconButtonVariantProps & { 'aria-label': string }\n>\n\nexport interface IconButtonProps extends Assign<ComponentProps<typeof IconButton>, { 'aria-label': string }> {}\n"],"names":["IconButton","styled","iconButton"],"mappings":";;;AAKO,MAAMA,IAAaC,EAAO,UAAUC,CAAU;"}
+{"version":3,"file":"IconButton.js","names":[],"sources":["../../../src/components/icon-button/IconButton.tsx"],"sourcesContent":["import { styled } from '@stokelp/styled-system/jsx'\nimport { iconButton, type IconButtonVariantProps } from '@stokelp/styled-system/recipes'\nimport type { Assign, StyledComponent } from '@stokelp/styled-system/types'\nimport type { ComponentProps } from 'react'\n\nexport const IconButton = styled('button', iconButton) as StyledComponent<\n  'button',\n  IconButtonVariantProps & { 'aria-label': string }\n>\n\nexport type IconButtonProps = Assign<ComponentProps<typeof IconButton>, { 'aria-label': string }>\n"],"mappings":";;;;AAKA,IAAa,IAAa,EAAO,UAAU,CAAU"}

package/dist/components/illustration/Illustration.cjs

@@ -1,2 +1,2 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("@ark-ui/react"),u=require("@stokelp/styled-system/jsx"),c=require("@stokelp/styled-system/recipes"),a=require("react"),t=require("./patterns.cjs"),l=u.styled(i.ark.div,c.illustration),o=r=>{switch(r){case"neutral":return e.jsx(t.NeutralPattern,{});case"fish":return e.jsx(t.FishPattern,{});case"meat":return e.jsx(t.MeatPattern,{});case"fruit":return e.jsx(t.FruitPattern,{});case"vegetable":return e.jsx(t.VegetablePattern,{});case"cereal":return e.jsx(t.CerealPattern,{});case"oil":return e.jsx(t.OilPattern,{});case"aromatic":return e.jsx(t.AromaticPattern,{});default:throw new Error(`Invalid pattern given: "${r}"`)}},j=r=>{const n=a.useRef(null);return a.useLayoutEffect(()=>{if(n.current){const s=n.current.parentElement;s&&getComputedStyle(s).position==="static"&&(s.style.position="relative")}},[]),e.jsx(l,{ref:n,...r,children:o(r.pattern)})};exports.Illustration=j;
-//# sourceMappingURL=Illustration.cjs.map
+"use client";const e=require("./patterns.cjs");let t=require("@ark-ui/react"),n=require("@stokelp/styled-system/jsx"),r=require("@stokelp/styled-system/recipes"),i=require("react"),a=require("react/jsx-runtime");var o=(0,n.styled)(t.ark.div,r.illustration),s=t=>{switch(t){case`neutral`:return(0,a.jsx)(e.NeutralPattern,{});case`fish`:return(0,a.jsx)(e.FishPattern,{});case`meat`:return(0,a.jsx)(e.MeatPattern,{});case`fruit`:return(0,a.jsx)(e.FruitPattern,{});case`vegetable`:return(0,a.jsx)(e.VegetablePattern,{});case`cereal`:return(0,a.jsx)(e.CerealPattern,{});case`oil`:return(0,a.jsx)(e.OilPattern,{});case`aromatic`:return(0,a.jsx)(e.AromaticPattern,{});default:throw Error(`Invalid pattern given: "${t}"`)}},c=e=>{let t=(0,i.useRef)(null);return(0,i.useLayoutEffect)(()=>{if(t.current){let e=t.current.parentElement;e&&getComputedStyle(e).position===`static`&&(e.style.position=`relative`)}},[]),(0,a.jsx)(o,{ref:t,...e,children:s(e.pattern)})};exports.Illustration=c;
+//# sourceMappingURL=Illustration.cjs.map

package/dist/components/illustration/Illustration.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Illustration.cjs","sources":["../../../src/components/illustration/Illustration.tsx"],"sourcesContent":["import { ark } from '@ark-ui/react'\nimport { HTMLArkProps } from '@ark-ui/react/factory'\nimport { styled } from '@stokelp/styled-system/jsx'\nimport { illustration, type IllustrationVariantProps } from '@stokelp/styled-system/recipes'\nimport { Assign, JsxStyleProps } from '@stokelp/styled-system/types'\nimport { type FC, useLayoutEffect, useRef } from 'react'\nimport * as Patterns from '~/components/illustration/patterns'\n\nexport type IllustrationProps = Omit<Assign<JsxStyleProps, HTMLArkProps<'div'>>, 'children'> & IllustrationVariantProps\n\nconst StyledIllustration = styled(ark.div, illustration)\n\nconst getIllustrationForPattern = (pattern: IllustrationVariantProps['pattern']) => {\n  switch (pattern) {\n    case 'neutral':\n      return <Patterns.NeutralPattern />\n    case 'fish':\n      return <Patterns.FishPattern />\n    case 'meat':\n      return <Patterns.MeatPattern />\n    case 'fruit':\n      return <Patterns.FruitPattern />\n    case 'vegetable':\n      return <Patterns.VegetablePattern />\n    case 'cereal':\n      return <Patterns.CerealPattern />\n    case 'oil':\n      return <Patterns.OilPattern />\n    case 'aromatic':\n      return <Patterns.AromaticPattern />\n    default:\n      throw new Error(`Invalid pattern given: \"${pattern}\"`)\n  }\n}\n\nexport const Illustration: FC<IllustrationProps> = (props: IllustrationProps) => {\n  const $element = useRef<HTMLDivElement>(null)\n\n  useLayoutEffect(() => {\n    if ($element.current) {\n      const $parent = $element.current.parentElement\n      if ($parent) {\n        if (getComputedStyle($parent).position === 'static') {\n          $parent.style.position = 'relative'\n        }\n      }\n    }\n  }, [])\n\n  return (\n    <StyledIllustration ref={$element} {...props}>\n      {getIllustrationForPattern(props.pattern)}\n    </StyledIllustration>\n  )\n}\n"],"names":["StyledIllustration","styled","ark","illustration","getIllustrationForPattern","pattern","jsx","Patterns.NeutralPattern","Patterns.FishPattern","Patterns.MeatPattern","Patterns.FruitPattern","Patterns.VegetablePattern","Patterns.CerealPattern","Patterns.OilPattern","Patterns.AromaticPattern","Illustration","props","$element","useRef","useLayoutEffect","$parent"],"mappings":"gSAUMA,EAAqBC,EAAAA,OAAOC,MAAI,IAAKC,EAAAA,YAAY,EAEjDC,EAA6BC,GAAiD,CAClF,OAAQA,EAAA,CACN,IAAK,UACH,OAAOC,EAAAA,IAACC,EAAAA,eAAA,EAAwB,EAClC,IAAK,OACH,OAAOD,EAAAA,IAACE,EAAAA,YAAA,EAAqB,EAC/B,IAAK,OACH,OAAOF,EAAAA,IAACG,EAAAA,YAAA,EAAqB,EAC/B,IAAK,QACH,OAAOH,EAAAA,IAACI,EAAAA,aAAA,EAAsB,EAChC,IAAK,YACH,OAAOJ,EAAAA,IAACK,EAAAA,iBAAA,EAA0B,EACpC,IAAK,SACH,OAAOL,EAAAA,IAACM,EAAAA,cAAA,EAAuB,EACjC,IAAK,MACH,OAAON,EAAAA,IAACO,EAAAA,WAAA,EAAoB,EAC9B,IAAK,WACH,OAAOP,EAAAA,IAACQ,EAAAA,gBAAA,EAAyB,EACnC,QACE,MAAM,IAAI,MAAM,2BAA2BT,CAAO,GAAG,CAAA,CAE3D,EAEaU,EAAuCC,GAA6B,CAC/E,MAAMC,EAAWC,EAAAA,OAAuB,IAAI,EAE5CC,OAAAA,EAAAA,gBAAgB,IAAM,CACpB,GAAIF,EAAS,QAAS,CACpB,MAAMG,EAAUH,EAAS,QAAQ,cAC7BG,GACE,iBAAiBA,CAAO,EAAE,WAAa,WACzCA,EAAQ,MAAM,SAAW,WAG/B,CACF,EAAG,CAAA,CAAE,EAGHd,MAACN,GAAmB,IAAKiB,EAAW,GAAGD,EACpC,SAAAZ,EAA0BY,EAAM,OAAO,CAAA,CAC1C,CAEJ"}
+{"version":3,"file":"Illustration.cjs","names":[],"sources":["../../../src/components/illustration/Illustration.tsx"],"sourcesContent":["import { ark } from '@ark-ui/react'\nimport { HTMLArkProps } from '@ark-ui/react/factory'\nimport { styled } from '@stokelp/styled-system/jsx'\nimport { illustration, type IllustrationVariantProps } from '@stokelp/styled-system/recipes'\nimport { Assign, JsxStyleProps } from '@stokelp/styled-system/types'\nimport { type FC, useLayoutEffect, useRef } from 'react'\nimport * as Patterns from '~/components/illustration/patterns'\n\nexport type IllustrationProps = Omit<Assign<JsxStyleProps, HTMLArkProps<'div'>>, 'children'> & IllustrationVariantProps\n\nconst StyledIllustration = styled(ark.div, illustration)\n\nconst getIllustrationForPattern = (pattern: IllustrationVariantProps['pattern']) => {\n  switch (pattern) {\n    case 'neutral':\n      return <Patterns.NeutralPattern />\n    case 'fish':\n      return <Patterns.FishPattern />\n    case 'meat':\n      return <Patterns.MeatPattern />\n    case 'fruit':\n      return <Patterns.FruitPattern />\n    case 'vegetable':\n      return <Patterns.VegetablePattern />\n    case 'cereal':\n      return <Patterns.CerealPattern />\n    case 'oil':\n      return <Patterns.OilPattern />\n    case 'aromatic':\n      return <Patterns.AromaticPattern />\n    default:\n      throw new Error(`Invalid pattern given: \"${pattern}\"`)\n  }\n}\n\nexport const Illustration: FC<IllustrationProps> = (props: IllustrationProps) => {\n  const $element = useRef<HTMLDivElement>(null)\n\n  useLayoutEffect(() => {\n    if ($element.current) {\n      const $parent = $element.current.parentElement\n      if ($parent) {\n        if (getComputedStyle($parent).position === 'static') {\n          $parent.style.position = 'relative'\n        }\n      }\n    }\n  }, [])\n\n  return (\n    <StyledIllustration ref={$element} {...props}>\n      {getIllustrationForPattern(props.pattern)}\n    </StyledIllustration>\n  )\n}\n"],"mappings":"oNAUA,IAAM,GAAA,EAAA,EAAA,QAA4B,EAAA,IAAI,IAAK,EAAA,YAAY,EAEjD,EAA6B,GAAiD,CAClF,OAAQ,EAAR,CACE,IAAK,UACH,OAAO,EAAA,EAAA,KAAA,EAAA,eAAA,CAA0B,CAAA,EACnC,IAAK,OACH,OAAO,EAAA,EAAA,KAAA,EAAA,YAAA,CAAuB,CAAA,EAChC,IAAK,OACH,OAAO,EAAA,EAAA,KAAA,EAAA,YAAA,CAAuB,CAAA,EAChC,IAAK,QACH,OAAO,EAAA,EAAA,KAAA,EAAA,aAAA,CAAwB,CAAA,EACjC,IAAK,YACH,OAAO,EAAA,EAAA,KAAA,EAAA,iBAAA,CAA4B,CAAA,EACrC,IAAK,SACH,OAAO,EAAA,EAAA,KAAA,EAAA,cAAA,CAAyB,CAAA,EAClC,IAAK,MACH,OAAO,EAAA,EAAA,KAAA,EAAA,WAAA,CAAsB,CAAA,EAC/B,IAAK,WACH,OAAO,EAAA,EAAA,KAAA,EAAA,gBAAA,CAA2B,CAAA,EACpC,QACE,MAAU,MAAM,2BAA2B,EAAQ,EAAE,CACzD,CACF,EAEa,EAAuC,GAA6B,CAC/E,IAAM,GAAA,EAAA,EAAA,QAAkC,IAAI,EAa5C,OAXA,EAAA,EAAA,qBAAsB,CACpB,GAAI,EAAS,QAAS,CACpB,IAAM,EAAU,EAAS,QAAQ,cAC7B,GACE,iBAAiB,CAAO,EAAE,WAAa,WACzC,EAAQ,MAAM,SAAW,WAG/B,CACF,EAAG,CAAC,CAAC,GAGH,EAAA,EAAA,KAAC,EAAD,CAAoB,IAAK,EAAU,GAAI,WACpC,EAA0B,EAAM,OAAO,CACtB,CAAA,CAExB"}

package/dist/components/illustration/Illustration.js

@@ -1,41 +1,37 @@
 "use client";
-import { jsx as t } from "react/jsx-runtime";
-import { ark as a } from "@ark-ui/react";
-import { styled as i } from "@stokelp/styled-system/jsx";
-import { illustration as o } from "@stokelp/styled-system/recipes";
-import { useRef as l, useLayoutEffect as s } from "react";
-import { AromaticPattern as u, OilPattern as c, CerealPattern as m, VegetablePattern as f, FruitPattern as p, MeatPattern as P, FishPattern as d, NeutralPattern as g } from "./patterns.js";
-const h = i(a.div, o), v = (e) => {
-  switch (e) {
-    case "neutral":
-      return /* @__PURE__ */ t(g, {});
-    case "fish":
-      return /* @__PURE__ */ t(d, {});
-    case "meat":
-      return /* @__PURE__ */ t(P, {});
-    case "fruit":
-      return /* @__PURE__ */ t(p, {});
-    case "vegetable":
-      return /* @__PURE__ */ t(f, {});
-    case "cereal":
-      return /* @__PURE__ */ t(m, {});
-    case "oil":
-      return /* @__PURE__ */ t(c, {});
-    case "aromatic":
-      return /* @__PURE__ */ t(u, {});
-    default:
-      throw new Error(`Invalid pattern given: "${e}"`);
-  }
-}, b = (e) => {
-  const r = l(null);
-  return s(() => {
-    if (r.current) {
-      const n = r.current.parentElement;
-      n && getComputedStyle(n).position === "static" && (n.style.position = "relative");
-    }
-  }, []), /* @__PURE__ */ t(h, { ref: r, ...e, children: v(e.pattern) });
+import { AromaticPattern as e, CerealPattern as t, FishPattern as n, FruitPattern as r, MeatPattern as i, NeutralPattern as a, OilPattern as o, VegetablePattern as s } from "./patterns.js";
+import { ark as c } from "@ark-ui/react";
+import { styled as l } from "@stokelp/styled-system/jsx";
+import { illustration as u } from "@stokelp/styled-system/recipes";
+import { useLayoutEffect as d, useRef as f } from "react";
+import { jsx as p } from "react/jsx-runtime";
+//#region src/components/illustration/Illustration.tsx
+var m = l(c.div, u), h = (c) => {
+	switch (c) {
+		case "neutral": return /* @__PURE__ */ p(a, {});
+		case "fish": return /* @__PURE__ */ p(n, {});
+		case "meat": return /* @__PURE__ */ p(i, {});
+		case "fruit": return /* @__PURE__ */ p(r, {});
+		case "vegetable": return /* @__PURE__ */ p(s, {});
+		case "cereal": return /* @__PURE__ */ p(t, {});
+		case "oil": return /* @__PURE__ */ p(o, {});
+		case "aromatic": return /* @__PURE__ */ p(e, {});
+		default: throw Error(`Invalid pattern given: "${c}"`);
+	}
+}, g = (e) => {
+	let t = f(null);
+	return d(() => {
+		if (t.current) {
+			let e = t.current.parentElement;
+			e && getComputedStyle(e).position === "static" && (e.style.position = "relative");
+		}
+	}, []), /* @__PURE__ */ p(m, {
+		ref: t,
+		...e,
+		children: h(e.pattern)
+	});
 };
-export {
-  b as Illustration
-};
-//# sourceMappingURL=Illustration.js.map
+//#endregion
+export { g as Illustration };
+
+//# sourceMappingURL=Illustration.js.map