@makeswift/runtime 0.28.10-canary.8 → 0.29.0-canary.19

package/dist/esm/components/builtin/Form/components/Field/components/SingleSelectTableField/components/TableColumnSingleSelect/index.js

@@ -1,7 +1,5 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { cx } from "@emotion/css";
 import { forwardRef } from "react";
-import { useStyle } from "../../../../../../../../../runtimes/react/use-style";
 import { useResponsiveStyle } from "../../../../../../../../utils/responsive-style";
 import { useFormContext, Sizes, Contrasts } from "../../../../../../context/FormContext";
 import responsiveField, {
@@ -10,6 +8,10 @@ import responsiveField, {
   getContrastColor
 } from "../../../../services/responsiveField";
 import Label from "../../../Label";
+import {
+  composeStyles,
+  useStyle
+} from "../../../../../../../../../runtimes/react/css-runtime/hooks/use-style";
 function Container({
   shape,
   size,
@@ -19,63 +21,58 @@ function Container({
   className,
   ...restOfProps
 }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      ...restOfProps,
-      className: cx(
-        useStyle(responsiveField({ shape, size, contrast, brandColor, error })),
-        useStyle({
-          display: "flex",
-          alignItems: "center",
-          position: "relative",
-          userSelect: "none",
-          borderColor: "#f19eb9",
-          "&:focus, &:focus-within": {
-            borderColor: "#e54e7f"
-          },
-          ...useResponsiveStyle(
-            [size, contrast],
-            ([size2 = Sizes.MEDIUM, contrast2 = Contrasts.LIGHT]) => ({
-              minHeight: getSizeHeight(size2),
-              maxHeight: getSizeHeight(size2),
-              "&::after": {
-                content: '""',
-                position: "absolute",
-                right: getSizeHorizontalPadding(size2),
-                top: "50%",
-                transform: "translate3d(0, -25%, 0)",
-                border: "solid 0.35em transparent",
-                borderTopColor: getContrastColor(contrast2)
-              }
-            })
-          )
-        }),
-        className
+  const styles = composeStyles(
+    useStyle(responsiveField({ shape, size, contrast, brandColor, error })),
+    useStyle({
+      display: "flex",
+      alignItems: "center",
+      position: "relative",
+      userSelect: "none",
+      borderColor: "#f19eb9",
+      "&:focus, &:focus-within": {
+        borderColor: "#e54e7f"
+      },
+      ...useResponsiveStyle(
+        [size, contrast],
+        ([size2 = Sizes.MEDIUM, contrast2 = Contrasts.LIGHT]) => ({
+          minHeight: getSizeHeight(size2),
+          maxHeight: getSizeHeight(size2),
+          "&::after": {
+            content: '""',
+            position: "absolute",
+            right: getSizeHorizontalPadding(size2),
+            top: "50%",
+            transform: "translate3d(0, -25%, 0)",
+            border: "solid 0.35em transparent",
+            borderTopColor: getContrastColor(contrast2)
+          }
+        })
       )
-    }
+    }),
+    className
   );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    styles.styleElements,
+    /* @__PURE__ */ jsx("div", { ...restOfProps, className: styles.className })
+  ] });
 }
 const Select = forwardRef(function Select2({ className, ...restOfProps }, ref) {
-  return /* @__PURE__ */ jsx(
-    "select",
-    {
-      ...restOfProps,
-      ref,
-      className: cx(
-        useStyle({
-          appearance: "none",
-          position: "absolute",
-          top: 0,
-          left: 0,
-          opacity: 0,
-          width: "100%",
-          height: "100%"
-        }),
-        className
-      )
-    }
+  const styles = composeStyles(
+    useStyle({
+      appearance: "none",
+      position: "absolute",
+      top: 0,
+      left: 0,
+      opacity: 0,
+      width: "100%",
+      height: "100%"
+    }),
+    className
   );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    styles.styleElements,
+    /* @__PURE__ */ jsx("select", { ...restOfProps, ref, className: styles.className })
+  ] });
 });
 var TableColumnSingleSelect_default = forwardRef(function TableColumnSingleSelect({
   id,

package/dist/esm/components/builtin/Form/components/Field/components/SingleSelectTableField/components/TableColumnSingleSelect/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../../../../../src/components/builtin/Form/components/Field/components/SingleSelectTableField/components/TableColumnSingleSelect/index.tsx"],"sourcesContent":["import { cx } from '@emotion/css'\nimport { ComponentPropsWithoutRef, ForwardedRef, forwardRef } from 'react'\nimport { useStyle } from '../../../../../../../../../runtimes/react/use-style'\n\nimport { useResponsiveStyle } from '../../../../../../../../utils/responsive-style'\nimport { useFormContext, Sizes, Contrasts, Value } from '../../../../../../context/FormContext'\nimport responsiveField, {\n  getSizeHeight,\n  getSizeHorizontalPadding,\n  getContrastColor,\n} from '../../../../services/responsiveField'\nimport Label from '../../../Label'\n\ntype BaseContainerProps = Value & { error?: boolean }\n\ntype ContainerProps = BaseContainerProps &\n  Omit<ComponentPropsWithoutRef<'div'>, keyof BaseContainerProps>\n\nfunction Container({\n  shape,\n  size,\n  contrast,\n  brandColor,\n  error,\n  className,\n  ...restOfProps\n}: ContainerProps) {\n  return (\n    <div\n      {...restOfProps}\n      className={cx(\n        useStyle(responsiveField({ shape, size, contrast, brandColor, error })),\n        useStyle({\n          display: 'flex',\n          alignItems: 'center',\n          position: 'relative',\n          userSelect: 'none',\n          borderColor: '#f19eb9',\n\n          '&:focus, &:focus-within': {\n            borderColor: '#e54e7f',\n          },\n\n          ...useResponsiveStyle(\n            [size, contrast] as const,\n            ([size = Sizes.MEDIUM, contrast = Contrasts.LIGHT]) => ({\n              minHeight: getSizeHeight(size),\n              maxHeight: getSizeHeight(size),\n\n              '&::after': {\n                content: '\"\"',\n                position: 'absolute',\n                right: getSizeHorizontalPadding(size),\n                top: '50%',\n                transform: 'translate3d(0, -25%, 0)',\n                border: 'solid 0.35em transparent',\n                borderTopColor: getContrastColor(contrast),\n              },\n            }),\n          ),\n        }),\n        className,\n      )}\n    />\n  )\n}\n\nconst Select = forwardRef(function Select(\n  { className, ...restOfProps }: ComponentPropsWithoutRef<'select'>,\n  ref: ForwardedRef<HTMLSelectElement>,\n) {\n  return (\n    <select\n      {...restOfProps}\n      ref={ref}\n      className={cx(\n        useStyle({\n          appearance: 'none',\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          opacity: 0,\n          width: '100%',\n          height: '100%',\n        }),\n        className,\n      )}\n    />\n  )\n})\n\ntype Props = {\n  id: string\n  tableColumn: {\n    options: Array<{\n      id: string\n      name: string\n    }>\n  }\n  value?: string\n  label?: string\n  required?: boolean\n  error?: boolean\n  hideLabel?: boolean\n  form?: unknown\n}\n\nexport default forwardRef<HTMLSelectElement, Props>(function TableColumnSingleSelect(\n  {\n    id,\n    tableColumn,\n    value = '',\n    label = '',\n    error = false,\n    hideLabel = false,\n    form,\n    ...restOfProps\n  }: Props,\n  ref,\n) {\n  const { shape, size, contrast, brandColor } = useFormContext()\n\n  return (\n    <>\n      {!hideLabel && <Label htmlFor={id}>{label}</Label>}\n      <Container\n        error={error}\n        shape={shape}\n        size={size}\n        contrast={contrast}\n        brandColor={brandColor}\n      >\n        <span>{value === '' ? '-' : value}</span>\n        <Select {...restOfProps} aria-label={label} ref={ref} id={id} value={value}>\n          <option value=\"\">-</option>\n          {tableColumn.options.map(option => (\n            <option key={option.id} value={option.name}>\n              {option.name}\n            </option>\n          ))}\n        </Select>\n      </Container>\n    </>\n  )\n})\n"],"mappings":"AA4BI,SA+FA,UA/FA,KAyGI,YAzGJ;AA5BJ,SAAS,UAAU;AACnB,SAAiD,kBAAkB;AACnE,SAAS,gBAAgB;AAEzB,SAAS,0BAA0B;AACnC,SAAS,gBAAgB,OAAO,iBAAwB;AACxD,OAAO;AAAA,EACL;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,OAAO,WAAW;AAOlB,SAAS,UAAU;AAAA,EACjB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAmB;AACjB,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW;AAAA,QACT,SAAS,gBAAgB,EAAE,OAAO,MAAM,UAAU,YAAY,MAAM,CAAC,CAAC;AAAA,QACtE,SAAS;AAAA,UACP,SAAS;AAAA,UACT,YAAY;AAAA,UACZ,UAAU;AAAA,UACV,YAAY;AAAA,UACZ,aAAa;AAAA,UAEb,2BAA2B;AAAA,YACzB,aAAa;AAAA,UACf;AAAA,UAEA,GAAG;AAAA,YACD,CAAC,MAAM,QAAQ;AAAA,YACf,CAAC,CAACA,QAAO,MAAM,QAAQC,YAAW,UAAU,KAAK,OAAO;AAAA,cACtD,WAAW,cAAcD,KAAI;AAAA,cAC7B,WAAW,cAAcA,KAAI;AAAA,cAE7B,YAAY;AAAA,gBACV,SAAS;AAAA,gBACT,UAAU;AAAA,gBACV,OAAO,yBAAyBA,KAAI;AAAA,gBACpC,KAAK;AAAA,gBACL,WAAW;AAAA,gBACX,QAAQ;AAAA,gBACR,gBAAgB,iBAAiBC,SAAQ;AAAA,cAC3C;AAAA,YACF;AAAA,UACF;AAAA,QACF,CAAC;AAAA,QACD;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;AAEA,MAAM,SAAS,WAAW,SAASC,QACjC,EAAE,WAAW,GAAG,YAAY,GAC5B,KACA;AACA,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA,WAAW;AAAA,QACT,SAAS;AAAA,UACP,YAAY;AAAA,UACZ,UAAU;AAAA,UACV,KAAK;AAAA,UACL,MAAM;AAAA,UACN,SAAS;AAAA,UACT,OAAO;AAAA,UACP,QAAQ;AAAA,QACV,CAAC;AAAA,QACD;AAAA,MACF;AAAA;AAAA,EACF;AAEJ,CAAC;AAkBD,IAAO,kCAAQ,WAAqC,SAAS,wBAC3D;AAAA,EACE;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ;AAAA,EACA,GAAG;AACL,GACA,KACA;AACA,QAAM,EAAE,OAAO,MAAM,UAAU,WAAW,IAAI,eAAe;AAE7D,SACE,iCACG;AAAA,KAAC,aAAa,oBAAC,SAAM,SAAS,IAAK,iBAAM;AAAA,IAC1C;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QAEA;AAAA,8BAAC,UAAM,oBAAU,KAAK,MAAM,OAAM;AAAA,UAClC,qBAAC,UAAQ,GAAG,aAAa,cAAY,OAAO,KAAU,IAAQ,OAC5D;AAAA,gCAAC,YAAO,OAAM,IAAG,eAAC;AAAA,YACjB,YAAY,QAAQ,IAAI,YACvB,oBAAC,YAAuB,OAAO,OAAO,MACnC,iBAAO,QADG,OAAO,EAEpB,CACD;AAAA,aACH;AAAA;AAAA;AAAA,IACF;AAAA,KACF;AAEJ,CAAC;","names":["size","contrast","Select"]}
+{"version":3,"sources":["../../../../../../../../../../../src/components/builtin/Form/components/Field/components/SingleSelectTableField/components/TableColumnSingleSelect/index.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, ForwardedRef, forwardRef } from 'react'\n\nimport { useResponsiveStyle } from '../../../../../../../../utils/responsive-style'\nimport { useFormContext, Sizes, Contrasts, Value } from '../../../../../../context/FormContext'\nimport responsiveField, {\n  getSizeHeight,\n  getSizeHorizontalPadding,\n  getContrastColor,\n} from '../../../../services/responsiveField'\nimport Label from '../../../Label'\nimport {\n  composeStyles,\n  useStyle,\n} from '../../../../../../../../../runtimes/react/css-runtime/hooks/use-style'\n\ntype BaseContainerProps = Value & { error?: boolean }\n\ntype ContainerProps = BaseContainerProps &\n  Omit<ComponentPropsWithoutRef<'div'>, keyof BaseContainerProps>\n\nfunction Container({\n  shape,\n  size,\n  contrast,\n  brandColor,\n  error,\n  className,\n  ...restOfProps\n}: ContainerProps) {\n  const styles = composeStyles(\n    useStyle(responsiveField({ shape, size, contrast, brandColor, error })),\n    useStyle({\n      display: 'flex',\n      alignItems: 'center',\n      position: 'relative',\n      userSelect: 'none',\n      borderColor: '#f19eb9',\n\n      '&:focus, &:focus-within': {\n        borderColor: '#e54e7f',\n      },\n\n      ...useResponsiveStyle(\n        [size, contrast] as const,\n        ([size = Sizes.MEDIUM, contrast = Contrasts.LIGHT]) => ({\n          minHeight: getSizeHeight(size),\n          maxHeight: getSizeHeight(size),\n\n          '&::after': {\n            content: '\"\"',\n            position: 'absolute',\n            right: getSizeHorizontalPadding(size),\n            top: '50%',\n            transform: 'translate3d(0, -25%, 0)',\n            border: 'solid 0.35em transparent',\n            borderTopColor: getContrastColor(contrast),\n          },\n        }),\n      ),\n    }),\n    className,\n  )\n  return (\n    <>\n      {styles.styleElements}\n      <div {...restOfProps} className={styles.className} />\n    </>\n  )\n}\n\nconst Select = forwardRef(function Select(\n  { className, ...restOfProps }: ComponentPropsWithoutRef<'select'>,\n  ref: ForwardedRef<HTMLSelectElement>,\n) {\n  const styles = composeStyles(\n    useStyle({\n      appearance: 'none',\n      position: 'absolute',\n      top: 0,\n      left: 0,\n      opacity: 0,\n      width: '100%',\n      height: '100%',\n    }),\n    className,\n  )\n  return (\n    <>\n      {styles.styleElements}\n      <select {...restOfProps} ref={ref} className={styles.className} />\n    </>\n  )\n})\n\ntype Props = {\n  id: string\n  tableColumn: {\n    options: Array<{\n      id: string\n      name: string\n    }>\n  }\n  value?: string\n  label?: string\n  required?: boolean\n  error?: boolean\n  hideLabel?: boolean\n  form?: unknown\n}\n\nexport default forwardRef<HTMLSelectElement, Props>(function TableColumnSingleSelect(\n  {\n    id,\n    tableColumn,\n    value = '',\n    label = '',\n    error = false,\n    hideLabel = false,\n    form,\n    ...restOfProps\n  }: Props,\n  ref,\n) {\n  const { shape, size, contrast, brandColor } = useFormContext()\n\n  return (\n    <>\n      {!hideLabel && <Label htmlFor={id}>{label}</Label>}\n      <Container\n        error={error}\n        shape={shape}\n        size={size}\n        contrast={contrast}\n        brandColor={brandColor}\n      >\n        <span>{value === '' ? '-' : value}</span>\n        <Select {...restOfProps} aria-label={label} ref={ref} id={id} value={value}>\n          <option value=\"\">-</option>\n          {tableColumn.options.map(option => (\n            <option key={option.id} value={option.name}>\n              {option.name}\n            </option>\n          ))}\n        </Select>\n      </Container>\n    </>\n  )\n})\n"],"mappings":"AA+DI,mBAEE,KAFF;AA/DJ,SAAiD,kBAAkB;AAEnE,SAAS,0BAA0B;AACnC,SAAS,gBAAgB,OAAO,iBAAwB;AACxD,OAAO;AAAA,EACL;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,OAAO,WAAW;AAClB;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAOP,SAAS,UAAU;AAAA,EACjB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAmB;AACjB,QAAM,SAAS;AAAA,IACb,SAAS,gBAAgB,EAAE,OAAO,MAAM,UAAU,YAAY,MAAM,CAAC,CAAC;AAAA,IACtE,SAAS;AAAA,MACP,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,UAAU;AAAA,MACV,YAAY;AAAA,MACZ,aAAa;AAAA,MAEb,2BAA2B;AAAA,QACzB,aAAa;AAAA,MACf;AAAA,MAEA,GAAG;AAAA,QACD,CAAC,MAAM,QAAQ;AAAA,QACf,CAAC,CAACA,QAAO,MAAM,QAAQC,YAAW,UAAU,KAAK,OAAO;AAAA,UACtD,WAAW,cAAcD,KAAI;AAAA,UAC7B,WAAW,cAAcA,KAAI;AAAA,UAE7B,YAAY;AAAA,YACV,SAAS;AAAA,YACT,UAAU;AAAA,YACV,OAAO,yBAAyBA,KAAI;AAAA,YACpC,KAAK;AAAA,YACL,WAAW;AAAA,YACX,QAAQ;AAAA,YACR,gBAAgB,iBAAiBC,SAAQ;AAAA,UAC3C;AAAA,QACF;AAAA,MACF;AAAA,IACF,CAAC;AAAA,IACD;AAAA,EACF;AACA,SACE,iCACG;AAAA,WAAO;AAAA,IACR,oBAAC,SAAK,GAAG,aAAa,WAAW,OAAO,WAAW;AAAA,KACrD;AAEJ;AAEA,MAAM,SAAS,WAAW,SAASC,QACjC,EAAE,WAAW,GAAG,YAAY,GAC5B,KACA;AACA,QAAM,SAAS;AAAA,IACb,SAAS;AAAA,MACP,YAAY;AAAA,MACZ,UAAU;AAAA,MACV,KAAK;AAAA,MACL,MAAM;AAAA,MACN,SAAS;AAAA,MACT,OAAO;AAAA,MACP,QAAQ;AAAA,IACV,CAAC;AAAA,IACD;AAAA,EACF;AACA,SACE,iCACG;AAAA,WAAO;AAAA,IACR,oBAAC,YAAQ,GAAG,aAAa,KAAU,WAAW,OAAO,WAAW;AAAA,KAClE;AAEJ,CAAC;AAkBD,IAAO,kCAAQ,WAAqC,SAAS,wBAC3D;AAAA,EACE;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ;AAAA,EACA,GAAG;AACL,GACA,KACA;AACA,QAAM,EAAE,OAAO,MAAM,UAAU,WAAW,IAAI,eAAe;AAE7D,SACE,iCACG;AAAA,KAAC,aAAa,oBAAC,SAAM,SAAS,IAAK,iBAAM;AAAA,IAC1C;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QAEA;AAAA,8BAAC,UAAM,oBAAU,KAAK,MAAM,OAAM;AAAA,UAClC,qBAAC,UAAQ,GAAG,aAAa,cAAY,OAAO,KAAU,IAAQ,OAC5D;AAAA,gCAAC,YAAO,OAAM,IAAG,eAAC;AAAA,YACjB,YAAY,QAAQ,IAAI,YACvB,oBAAC,YAAuB,OAAO,OAAO,MACnC,iBAAO,QADG,OAAO,EAEpB,CACD;AAAA,aACH;AAAA;AAAA;AAAA,IACF;AAAA,KACF;AAEJ,CAAC;","names":["size","contrast","Select"]}

package/dist/esm/components/builtin/Form/components/Field/components/TextArea/index.js

@@ -1,23 +1,21 @@
-import { jsx } from "react/jsx-runtime";
-import { cx } from "@emotion/css";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { useStyle } from "../../../../../../../runtimes/react/use-style";
 import { useFormContext } from "../../../../context/FormContext";
 import responsiveField from "../../services/responsiveField";
+import {
+  composeStyles,
+  useStyle
+} from "../../../../../../../runtimes/react/css-runtime/hooks/use-style";
 var TextArea_default = forwardRef(function TextArea({ error = false, form, ...restOfProps }, ref) {
   const { shape, size, contrast, brandColor } = useFormContext();
-  return /* @__PURE__ */ jsx(
-    "textarea",
-    {
-      ...restOfProps,
-      ref,
-      className: cx(
-        useStyle({ resize: "vertical" }),
-        useStyle(responsiveField({ error, shape, size, contrast, brandColor }))
-      ),
-      rows: 4
-    }
+  const styles = composeStyles(
+    useStyle({ resize: "vertical" }),
+    useStyle(responsiveField({ error, shape, size, contrast, brandColor }))
   );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    styles.styleElements,
+    /* @__PURE__ */ jsx("textarea", { ...restOfProps, ref, className: styles.className, rows: 4 })
+  ] });
 });
 export {
   TextArea_default as default

package/dist/esm/components/builtin/Form/components/Field/components/TextArea/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../../../src/components/builtin/Form/components/Field/components/TextArea/index.tsx"],"sourcesContent":["import { cx } from '@emotion/css'\nimport { forwardRef, ComponentPropsWithoutRef } from 'react'\nimport { useStyle } from '../../../../../../../runtimes/react/use-style'\nimport { useFormContext } from '../../../../context/FormContext'\nimport responsiveField from '../../services/responsiveField'\n\ntype BaseProps = { error?: boolean; form?: unknown }\n\ntype Props = BaseProps & Omit<ComponentPropsWithoutRef<'textarea'>, keyof BaseProps>\n\nexport default forwardRef<HTMLTextAreaElement, Props>(function TextArea(\n  { error = false, form, ...restOfProps }: Props,\n  ref,\n) {\n  const { shape, size, contrast, brandColor } = useFormContext()\n\n  return (\n    <textarea\n      {...restOfProps}\n      ref={ref}\n      className={cx(\n        useStyle({ resize: 'vertical' }),\n        useStyle(responsiveField({ error, shape, size, contrast, brandColor })),\n      )}\n      rows={4}\n    />\n  )\n})\n"],"mappings":"AAiBI;AAjBJ,SAAS,UAAU;AACnB,SAAS,kBAA4C;AACrD,SAAS,gBAAgB;AACzB,SAAS,sBAAsB;AAC/B,OAAO,qBAAqB;AAM5B,IAAO,mBAAQ,WAAuC,SAAS,SAC7D,EAAE,QAAQ,OAAO,MAAM,GAAG,YAAY,GACtC,KACA;AACA,QAAM,EAAE,OAAO,MAAM,UAAU,WAAW,IAAI,eAAe;AAE7D,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA,WAAW;AAAA,QACT,SAAS,EAAE,QAAQ,WAAW,CAAC;AAAA,QAC/B,SAAS,gBAAgB,EAAE,OAAO,OAAO,MAAM,UAAU,WAAW,CAAC,CAAC;AAAA,MACxE;AAAA,MACA,MAAM;AAAA;AAAA,EACR;AAEJ,CAAC;","names":[]}
+{"version":3,"sources":["../../../../../../../../../src/components/builtin/Form/components/Field/components/TextArea/index.tsx"],"sourcesContent":["import { forwardRef, ComponentPropsWithoutRef } from 'react'\nimport { useFormContext } from '../../../../context/FormContext'\nimport responsiveField from '../../services/responsiveField'\nimport {\n  composeStyles,\n  useStyle,\n} from '../../../../../../../runtimes/react/css-runtime/hooks/use-style'\n\ntype BaseProps = { error?: boolean; form?: unknown }\n\ntype Props = BaseProps & Omit<ComponentPropsWithoutRef<'textarea'>, keyof BaseProps>\n\nexport default forwardRef<HTMLTextAreaElement, Props>(function TextArea(\n  { error = false, form, ...restOfProps }: Props,\n  ref,\n) {\n  const { shape, size, contrast, brandColor } = useFormContext()\n  const styles = composeStyles(\n    useStyle({ resize: 'vertical' }),\n    useStyle(responsiveField({ error, shape, size, contrast, brandColor })),\n  )\n\n  return (\n    <>\n      {styles.styleElements}\n      <textarea {...restOfProps} ref={ref} className={styles.className} rows={4} />\n    </>\n  )\n})\n"],"mappings":"AAuBI,mBAEE,KAFF;AAvBJ,SAAS,kBAA4C;AACrD,SAAS,sBAAsB;AAC/B,OAAO,qBAAqB;AAC5B;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAMP,IAAO,mBAAQ,WAAuC,SAAS,SAC7D,EAAE,QAAQ,OAAO,MAAM,GAAG,YAAY,GACtC,KACA;AACA,QAAM,EAAE,OAAO,MAAM,UAAU,WAAW,IAAI,eAAe;AAC7D,QAAM,SAAS;AAAA,IACb,SAAS,EAAE,QAAQ,WAAW,CAAC;AAAA,IAC/B,SAAS,gBAAgB,EAAE,OAAO,OAAO,MAAM,UAAU,WAAW,CAAC,CAAC;AAAA,EACxE;AAEA,SACE,iCACG;AAAA,WAAO;AAAA,IACR,oBAAC,cAAU,GAAG,aAAa,KAAU,WAAW,OAAO,WAAW,MAAM,GAAG;AAAA,KAC7E;AAEJ,CAAC;","names":[]}

package/dist/esm/components/builtin/Form/components/Field/services/responsiveField.js

@@ -114,10 +114,10 @@ function responsiveField(props) {
         borderColor: getContrastBorderColor(contrast, props.error),
         color: getContrastColor(contrast),
         backgroundColor: getContrastBackgroundColor(contrast),
-        ":focus, :focus-within": {
+        "&:focus, &:focus-within": {
           borderColor: colorToString(brandColor)
         },
-        "::placeholder": {
+        "&::placeholder": {
           color: getContrastPlaceholderColor(contrast)
         }
       })

package/dist/esm/components/builtin/Form/components/Field/services/responsiveField.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../../src/components/builtin/Form/components/Field/services/responsiveField.ts"],"sourcesContent":["import { colorToString } from '../../../../../utils/colorToString'\n\nimport {\n  Size,\n  Shape,\n  Contrast,\n  Shapes,\n  Sizes,\n  Contrasts,\n  Value,\n} from '../../../context/FormContext'\nimport { useResponsiveStyle } from '../../../../../utils/responsive-style'\nimport { type CSSObject } from '@emotion/serialize'\n\nexport function getSizeHeight(size: Size): number {\n  switch (size) {\n    case Sizes.SMALL:\n      return 30\n\n    case Sizes.MEDIUM:\n      return 38\n\n    case Sizes.LARGE:\n      return 48\n\n    default:\n      throw new Error(`Invalid form size \"${size}\"`)\n  }\n}\n\nexport function getSizeHorizontalPadding(size: Size): number {\n  switch (size) {\n    case Sizes.SMALL:\n      return 8\n\n    case Sizes.MEDIUM:\n      return 12\n\n    case Sizes.LARGE:\n      return 16\n\n    default:\n      throw new Error(`Invalid form size \"${size}\"`)\n  }\n}\n\nfunction getSizeVerticalPadding(size: Size): number {\n  switch (size) {\n    case Sizes.SMALL:\n      return 3\n\n    case Sizes.MEDIUM:\n      return 7\n\n    case Sizes.LARGE:\n      return 11\n\n    default:\n      throw new Error(`Invalid form size \"${size}\"`)\n  }\n}\n\nexport function getShapeBorderRadius(shape: Shape): number {\n  switch (shape) {\n    case Shapes.SQUARE:\n      return 0\n\n    case Shapes.ROUNDED:\n      return 4\n\n    case Shapes.PILL:\n      return 500\n\n    default:\n      throw new Error(`Invalid form shape \"${shape}\"`)\n  }\n}\n\nexport function getContrastBorderColor(contrast: Contrast, error?: boolean): string {\n  switch (contrast) {\n    case Contrasts.LIGHT:\n      return error ? 'rgba(255, 0, 0, 0.7)' : 'rgba(0, 0, 0, 0.25)'\n\n    case Contrasts.DARK:\n      return error ? 'rgba(255, 0, 0, 0.7)' : 'rgba(255, 255, 255, 0.6)'\n\n    default:\n      throw new Error(`Invalid form contrast \"${contrast}\"`)\n  }\n}\n\nexport function getContrastBackgroundColor(contrast: Contrast): string {\n  switch (contrast) {\n    case Contrasts.LIGHT:\n      return 'white'\n\n    case Contrasts.DARK:\n      return 'rgba(0, 0, 0, 0.7)'\n\n    default:\n      throw new Error(`Invalid form contrast \"${contrast}\"`)\n  }\n}\n\nexport function getContrastColor(contrast: Contrast): string {\n  switch (contrast) {\n    case Contrasts.LIGHT:\n      return 'rgba(0, 0, 0, 0.95)'\n\n    case Contrasts.DARK:\n      return 'white'\n\n    default:\n      throw new Error(`Invalid form contrast \"${contrast}\"`)\n  }\n}\n\nfunction getContrastPlaceholderColor(contrast: Contrast) {\n  switch (contrast) {\n    case Contrasts.LIGHT:\n      return 'rgba(0, 0, 0, 0.3)'\n\n    case Contrasts.DARK:\n      return 'rgba(255,255,255,0.3)'\n\n    default:\n      throw new Error(`Invalid form contrast \"${contrast}\"`)\n  }\n}\n\nexport default function responsiveField(\n  props: Pick<Value, 'shape' | 'size' | 'contrast' | 'brandColor'> & { error?: boolean },\n): CSSObject {\n  return {\n    display: 'block',\n    width: '100%',\n    outline: 'none',\n    borderWidth: 1,\n    borderStyle: 'solid',\n    transition: 'border-color 200ms',\n    ...useResponsiveStyle(\n      [props.shape, props.size, props.contrast, props.brandColor] as const,\n      ([\n        shape = Shapes.ROUNDED,\n        size = Sizes.MEDIUM,\n        contrast = Contrasts.LIGHT,\n        brandColor = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 },\n      ]) => ({\n        padding: `${getSizeVerticalPadding(size)}px ${getSizeHorizontalPadding(size)}px`,\n        borderRadius: getShapeBorderRadius(shape),\n        borderColor: getContrastBorderColor(contrast, props.error),\n        color: getContrastColor(contrast),\n        backgroundColor: getContrastBackgroundColor(contrast),\n\n        ':focus, :focus-within': {\n          borderColor: colorToString(brandColor),\n        },\n\n        '::placeholder': {\n          color: getContrastPlaceholderColor(contrast),\n        },\n      }),\n    ),\n  }\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../../../../../../src/components/builtin/Form/components/Field/services/responsiveField.ts"],"sourcesContent":["import { colorToString } from '../../../../../utils/colorToString'\n\nimport {\n  Size,\n  Shape,\n  Contrast,\n  Shapes,\n  Sizes,\n  Contrasts,\n  Value,\n} from '../../../context/FormContext'\nimport { useResponsiveStyle } from '../../../../../utils/responsive-style'\nimport { type CSSObject } from '@emotion/serialize'\n\nexport function getSizeHeight(size: Size): number {\n  switch (size) {\n    case Sizes.SMALL:\n      return 30\n\n    case Sizes.MEDIUM:\n      return 38\n\n    case Sizes.LARGE:\n      return 48\n\n    default:\n      throw new Error(`Invalid form size \"${size}\"`)\n  }\n}\n\nexport function getSizeHorizontalPadding(size: Size): number {\n  switch (size) {\n    case Sizes.SMALL:\n      return 8\n\n    case Sizes.MEDIUM:\n      return 12\n\n    case Sizes.LARGE:\n      return 16\n\n    default:\n      throw new Error(`Invalid form size \"${size}\"`)\n  }\n}\n\nfunction getSizeVerticalPadding(size: Size): number {\n  switch (size) {\n    case Sizes.SMALL:\n      return 3\n\n    case Sizes.MEDIUM:\n      return 7\n\n    case Sizes.LARGE:\n      return 11\n\n    default:\n      throw new Error(`Invalid form size \"${size}\"`)\n  }\n}\n\nexport function getShapeBorderRadius(shape: Shape): number {\n  switch (shape) {\n    case Shapes.SQUARE:\n      return 0\n\n    case Shapes.ROUNDED:\n      return 4\n\n    case Shapes.PILL:\n      return 500\n\n    default:\n      throw new Error(`Invalid form shape \"${shape}\"`)\n  }\n}\n\nexport function getContrastBorderColor(contrast: Contrast, error?: boolean): string {\n  switch (contrast) {\n    case Contrasts.LIGHT:\n      return error ? 'rgba(255, 0, 0, 0.7)' : 'rgba(0, 0, 0, 0.25)'\n\n    case Contrasts.DARK:\n      return error ? 'rgba(255, 0, 0, 0.7)' : 'rgba(255, 255, 255, 0.6)'\n\n    default:\n      throw new Error(`Invalid form contrast \"${contrast}\"`)\n  }\n}\n\nexport function getContrastBackgroundColor(contrast: Contrast): string {\n  switch (contrast) {\n    case Contrasts.LIGHT:\n      return 'white'\n\n    case Contrasts.DARK:\n      return 'rgba(0, 0, 0, 0.7)'\n\n    default:\n      throw new Error(`Invalid form contrast \"${contrast}\"`)\n  }\n}\n\nexport function getContrastColor(contrast: Contrast): string {\n  switch (contrast) {\n    case Contrasts.LIGHT:\n      return 'rgba(0, 0, 0, 0.95)'\n\n    case Contrasts.DARK:\n      return 'white'\n\n    default:\n      throw new Error(`Invalid form contrast \"${contrast}\"`)\n  }\n}\n\nfunction getContrastPlaceholderColor(contrast: Contrast) {\n  switch (contrast) {\n    case Contrasts.LIGHT:\n      return 'rgba(0, 0, 0, 0.3)'\n\n    case Contrasts.DARK:\n      return 'rgba(255,255,255,0.3)'\n\n    default:\n      throw new Error(`Invalid form contrast \"${contrast}\"`)\n  }\n}\n\nexport default function responsiveField(\n  props: Pick<Value, 'shape' | 'size' | 'contrast' | 'brandColor'> & { error?: boolean },\n): CSSObject {\n  return {\n    display: 'block',\n    width: '100%',\n    outline: 'none',\n    borderWidth: 1,\n    borderStyle: 'solid',\n    transition: 'border-color 200ms',\n    ...useResponsiveStyle(\n      [props.shape, props.size, props.contrast, props.brandColor] as const,\n      ([\n        shape = Shapes.ROUNDED,\n        size = Sizes.MEDIUM,\n        contrast = Contrasts.LIGHT,\n        brandColor = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 },\n      ]) => ({\n        padding: `${getSizeVerticalPadding(size)}px ${getSizeHorizontalPadding(size)}px`,\n        borderRadius: getShapeBorderRadius(shape),\n        borderColor: getContrastBorderColor(contrast, props.error),\n        color: getContrastColor(contrast),\n        backgroundColor: getContrastBackgroundColor(contrast),\n\n        '&:focus, &:focus-within': {\n          borderColor: colorToString(brandColor),\n        },\n\n        '&::placeholder': {\n          color: getContrastPlaceholderColor(contrast),\n        },\n      }),\n    ),\n  }\n}\n"],"mappings":"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","names":[]}

package/dist/esm/components/builtin/Form/components/Placeholder/index.js

@@ -1,77 +1,70 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { cx } from "@emotion/css";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { useStyle } from "../../../../../runtimes/react/use-style";
+import { composeStyles, useStyle } from "../../../../../runtimes/react/css-runtime/hooks/use-style";
 function Label() {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: useStyle({
-        maxWidth: 120,
-        minWidth: 60,
-        height: 8,
-        borderRadius: 2,
-        backgroundColor: "#a1a8c2",
-        opacity: 0.4,
-        marginBottom: 8
-      })
-    }
-  );
+  const labelStyle = useStyle({
+    maxWidth: 120,
+    minWidth: 60,
+    height: 8,
+    borderRadius: 2,
+    backgroundColor: "#a1a8c2",
+    opacity: 0.4,
+    marginBottom: 8
+  });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    labelStyle.styleElement,
+    /* @__PURE__ */ jsx("div", { className: labelStyle.className })
+  ] });
 }
 function Input() {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: useStyle({
-        minWidth: 80,
-        height: 32,
-        borderRadius: 4,
-        borderWidth: 2,
-        borderStyle: "solid",
-        borderColor: "#a1a8c2",
-        opacity: 0.4
-      })
-    }
-  );
+  const inputStyle = useStyle({
+    minWidth: 80,
+    height: 32,
+    borderRadius: 4,
+    borderWidth: 2,
+    borderStyle: "solid",
+    borderColor: "#a1a8c2",
+    opacity: 0.4
+  });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    inputStyle.styleElement,
+    /* @__PURE__ */ jsx("div", { className: inputStyle.className })
+  ] });
 }
 function Button() {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: useStyle({
-        minWidth: 140,
-        height: 32,
-        borderRadius: 4,
-        backgroundColor: "#a1a8c2",
-        opacity: 0.4
-      })
-    }
-  );
+  const buttonStyle = useStyle({
+    minWidth: 140,
+    height: 32,
+    borderRadius: 4,
+    backgroundColor: "#a1a8c2",
+    opacity: 0.4
+  });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    buttonStyle.styleElement,
+    /* @__PURE__ */ jsx("div", { className: buttonStyle.className })
+  ] });
 }
 var Placeholder_default = forwardRef(function Placeholder({ className, width, margin }, ref) {
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      ref,
-      className: cx(
-        useStyle({ display: "flex", flexDirection: "column" }),
-        width,
-        margin,
-        className
-      ),
-      children: [
-        /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", marginBottom: 16 }, children: [
-          /* @__PURE__ */ jsx(Label, {}),
-          /* @__PURE__ */ jsx(Input, {})
-        ] }),
-        /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", marginBottom: 16 }, children: [
-          /* @__PURE__ */ jsx(Label, {}),
-          /* @__PURE__ */ jsx(Input, {})
-        ] }),
-        /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", justifyContent: "flex-end" }, children: /* @__PURE__ */ jsx(Button, {}) })
-      ]
-    }
+  const styles = composeStyles(
+    useStyle({ display: "flex", flexDirection: "column" }),
+    width,
+    margin,
+    className
   );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    styles.styleElements,
+    /* @__PURE__ */ jsxs("div", { ref, className: styles.className, children: [
+      /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", marginBottom: 16 }, children: [
+        /* @__PURE__ */ jsx(Label, {}),
+        /* @__PURE__ */ jsx(Input, {})
+      ] }),
+      /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", marginBottom: 16 }, children: [
+        /* @__PURE__ */ jsx(Label, {}),
+        /* @__PURE__ */ jsx(Input, {})
+      ] }),
+      /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", justifyContent: "flex-end" }, children: /* @__PURE__ */ jsx(Button, {}) })
+    ] })
+  ] });
 });
 export {
   Placeholder_default as default

package/dist/esm/components/builtin/Form/components/Placeholder/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../src/components/builtin/Form/components/Placeholder/index.tsx"],"sourcesContent":["import { cx } from '@emotion/css'\nimport { forwardRef, Ref, ReactNode } from 'react'\n\nimport { useStyle } from '../../../../../runtimes/react/use-style'\n\nfunction Label() {\n  return (\n    <div\n      className={useStyle({\n        maxWidth: 120,\n        minWidth: 60,\n        height: 8,\n        borderRadius: 2,\n        backgroundColor: '#a1a8c2',\n        opacity: 0.4,\n        marginBottom: 8,\n      })}\n    />\n  )\n}\n\nfunction Input() {\n  return (\n    <div\n      className={useStyle({\n        minWidth: 80,\n        height: 32,\n        borderRadius: 4,\n        borderWidth: 2,\n        borderStyle: 'solid',\n        borderColor: '#a1a8c2',\n        opacity: 0.4,\n      })}\n    />\n  )\n}\n\nfunction Button() {\n  return (\n    <div\n      className={useStyle({\n        minWidth: 140,\n        height: 32,\n        borderRadius: 4,\n        backgroundColor: '#a1a8c2',\n        opacity: 0.4,\n      })}\n    />\n  )\n}\n\ntype Props = {\n  className?: string\n  width?: string\n  margin?: string\n}\n\nexport default forwardRef(function Placeholder(\n  { className, width, margin }: Props,\n  ref: Ref<HTMLDivElement>,\n): ReactNode {\n  return (\n    <div\n      ref={ref}\n      className={cx(\n        useStyle({ display: 'flex', flexDirection: 'column' }),\n        width,\n        margin,\n        className,\n      )}\n    >\n      <div style={{ display: 'flex', flexDirection: 'column', marginBottom: 16 }}>\n        <Label />\n        <Input />\n      </div>\n      <div style={{ display: 'flex', flexDirection: 'column', marginBottom: 16 }}>\n        <Label />\n        <Input />\n      </div>\n      <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'flex-end' }}>\n        <Button />\n      </div>\n    </div>\n  )\n})\n"],"mappings":"AAOI,cAgEE,YAhEF;AAPJ,SAAS,UAAU;AACnB,SAAS,kBAAkC;AAE3C,SAAS,gBAAgB;AAEzB,SAAS,QAAQ;AACf,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,SAAS;AAAA,QAClB,UAAU;AAAA,QACV,UAAU;AAAA,QACV,QAAQ;AAAA,QACR,cAAc;AAAA,QACd,iBAAiB;AAAA,QACjB,SAAS;AAAA,QACT,cAAc;AAAA,MAChB,CAAC;AAAA;AAAA,EACH;AAEJ;AAEA,SAAS,QAAQ;AACf,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,SAAS;AAAA,QAClB,UAAU;AAAA,QACV,QAAQ;AAAA,QACR,cAAc;AAAA,QACd,aAAa;AAAA,QACb,aAAa;AAAA,QACb,aAAa;AAAA,QACb,SAAS;AAAA,MACX,CAAC;AAAA;AAAA,EACH;AAEJ;AAEA,SAAS,SAAS;AAChB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,SAAS;AAAA,QAClB,UAAU;AAAA,QACV,QAAQ;AAAA,QACR,cAAc;AAAA,QACd,iBAAiB;AAAA,QACjB,SAAS;AAAA,MACX,CAAC;AAAA;AAAA,EACH;AAEJ;AAQA,IAAO,sBAAQ,WAAW,SAAS,YACjC,EAAE,WAAW,OAAO,OAAO,GAC3B,KACW;AACX,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAW;AAAA,QACT,SAAS,EAAE,SAAS,QAAQ,eAAe,SAAS,CAAC;AAAA,QACrD;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MAEA;AAAA,6BAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,eAAe,UAAU,cAAc,GAAG,GACvE;AAAA,8BAAC,SAAM;AAAA,UACP,oBAAC,SAAM;AAAA,WACT;AAAA,QACA,qBAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,eAAe,UAAU,cAAc,GAAG,GACvE;AAAA,8BAAC,SAAM;AAAA,UACP,oBAAC,SAAM;AAAA,WACT;AAAA,QACA,oBAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,eAAe,UAAU,gBAAgB,WAAW,GACjF,8BAAC,UAAO,GACV;AAAA;AAAA;AAAA,EACF;AAEJ,CAAC;","names":[]}
+{"version":3,"sources":["../../../../../../../src/components/builtin/Form/components/Placeholder/index.tsx"],"sourcesContent":["import { forwardRef, Ref, ReactNode } from 'react'\nimport { composeStyles, useStyle } from '../../../../../runtimes/react/css-runtime/hooks/use-style'\n\nfunction Label() {\n  const labelStyle = useStyle({\n    maxWidth: 120,\n    minWidth: 60,\n    height: 8,\n    borderRadius: 2,\n    backgroundColor: '#a1a8c2',\n    opacity: 0.4,\n    marginBottom: 8,\n  })\n  return (\n    <>\n      {labelStyle.styleElement}\n      <div className={labelStyle.className} />\n    </>\n  )\n}\n\nfunction Input() {\n  const inputStyle = useStyle({\n    minWidth: 80,\n    height: 32,\n    borderRadius: 4,\n    borderWidth: 2,\n    borderStyle: 'solid',\n    borderColor: '#a1a8c2',\n    opacity: 0.4,\n  })\n  return (\n    <>\n      {inputStyle.styleElement}\n      <div className={inputStyle.className} />\n    </>\n  )\n}\n\nfunction Button() {\n  const buttonStyle = useStyle({\n    minWidth: 140,\n    height: 32,\n    borderRadius: 4,\n    backgroundColor: '#a1a8c2',\n    opacity: 0.4,\n  })\n  return (\n    <>\n      {buttonStyle.styleElement}\n      <div className={buttonStyle.className} />\n    </>\n  )\n}\n\ntype Props = {\n  className?: string\n  width?: string\n  margin?: string\n}\n\nexport default forwardRef(function Placeholder(\n  { className, width, margin }: Props,\n  ref: Ref<HTMLDivElement>,\n): ReactNode {\n  const styles = composeStyles(\n    useStyle({ display: 'flex', flexDirection: 'column' }),\n    width,\n    margin,\n    className,\n  )\n  return (\n    <>\n      {styles.styleElements}\n      <div ref={ref} className={styles.className}>\n        <div style={{ display: 'flex', flexDirection: 'column', marginBottom: 16 }}>\n          <Label />\n          <Input />\n        </div>\n        <div style={{ display: 'flex', flexDirection: 'column', marginBottom: 16 }}>\n          <Label />\n          <Input />\n        </div>\n        <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'flex-end' }}>\n          <Button />\n        </div>\n      </div>\n    </>\n  )\n})\n"],"mappings":"AAcI,mBAEE,KAFF;AAdJ,SAAS,kBAAkC;AAC3C,SAAS,eAAe,gBAAgB;AAExC,SAAS,QAAQ;AACf,QAAM,aAAa,SAAS;AAAA,IAC1B,UAAU;AAAA,IACV,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,cAAc;AAAA,IACd,iBAAiB;AAAA,IACjB,SAAS;AAAA,IACT,cAAc;AAAA,EAChB,CAAC;AACD,SACE,iCACG;AAAA,eAAW;AAAA,IACZ,oBAAC,SAAI,WAAW,WAAW,WAAW;AAAA,KACxC;AAEJ;AAEA,SAAS,QAAQ;AACf,QAAM,aAAa,SAAS;AAAA,IAC1B,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,cAAc;AAAA,IACd,aAAa;AAAA,IACb,aAAa;AAAA,IACb,aAAa;AAAA,IACb,SAAS;AAAA,EACX,CAAC;AACD,SACE,iCACG;AAAA,eAAW;AAAA,IACZ,oBAAC,SAAI,WAAW,WAAW,WAAW;AAAA,KACxC;AAEJ;AAEA,SAAS,SAAS;AAChB,QAAM,cAAc,SAAS;AAAA,IAC3B,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,cAAc;AAAA,IACd,iBAAiB;AAAA,IACjB,SAAS;AAAA,EACX,CAAC;AACD,SACE,iCACG;AAAA,gBAAY;AAAA,IACb,oBAAC,SAAI,WAAW,YAAY,WAAW;AAAA,KACzC;AAEJ;AAQA,IAAO,sBAAQ,WAAW,SAAS,YACjC,EAAE,WAAW,OAAO,OAAO,GAC3B,KACW;AACX,QAAM,SAAS;AAAA,IACb,SAAS,EAAE,SAAS,QAAQ,eAAe,SAAS,CAAC;AAAA,IACrD;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACA,SACE,iCACG;AAAA,WAAO;AAAA,IACR,qBAAC,SAAI,KAAU,WAAW,OAAO,WAC/B;AAAA,2BAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,eAAe,UAAU,cAAc,GAAG,GACvE;AAAA,4BAAC,SAAM;AAAA,QACP,oBAAC,SAAM;AAAA,SACT;AAAA,MACA,qBAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,eAAe,UAAU,cAAc,GAAG,GACvE;AAAA,4BAAC,SAAM;AAAA,QACP,oBAAC,SAAM;AAAA,SACT;AAAA,MACA,oBAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,eAAe,UAAU,gBAAgB,WAAW,GACjF,8BAAC,UAAO,GACV;AAAA,OACF;AAAA,KACF;AAEJ,CAAC;","names":[]}

package/dist/esm/components/builtin/Form/components/Spinner/index.js

@@ -1,26 +1,26 @@
-import { jsx } from "react/jsx-runtime";
-import { keyframes } from "@emotion/css";
-import { useStyle } from "../../../../../runtimes/react/use-style";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Spinner20 } from "../../../../icons/Spinner20";
-const spin = keyframes`
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-`;
+import { useKeyframes } from "../../../../../runtimes/react/css-runtime/hooks/use-keyframes";
+import { useStyle } from "../../../../../runtimes/react/css-runtime/hooks/use-style";
 function Spinner() {
-  return /* @__PURE__ */ jsx(
-    Spinner20,
-    {
-      className: useStyle({
-        display: "inline-flex",
-        animation: `${spin} 1s linear infinite`,
-        stroke: "currentColor"
-      })
+  const keyframesStyle = useKeyframes(`
+    from {
+      transform: rotate(0deg);
     }
-  );
+    to {
+      transform: rotate(360deg);
+    }
+  `);
+  const spinnerStyle = useStyle({
+    display: "inline-flex",
+    animation: `${keyframesStyle.keyframesName} 1s linear infinite`,
+    stroke: "currentColor"
+  });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    keyframesStyle.styleElement,
+    spinnerStyle.styleElement,
+    /* @__PURE__ */ jsx(Spinner20, { className: spinnerStyle.className })
+  ] });
 }
 export {
   Spinner as default

package/dist/esm/components/builtin/Form/components/Spinner/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../src/components/builtin/Form/components/Spinner/index.tsx"],"sourcesContent":["import { ReactNode } from 'react'\nimport { keyframes } from '@emotion/css'\nimport { useStyle } from '../../../../../runtimes/react/use-style'\nimport { Spinner20 } from '../../../../icons/Spinner20'\n\nconst spin = keyframes`\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n`\n\nexport default function Spinner(): ReactNode {\n  return (\n    <Spinner20\n      className={useStyle({\n        display: 'inline-flex',\n        animation: `${spin} 1s linear infinite`,\n        stroke: 'currentColor',\n      })}\n    />\n  )\n}\n"],"mappings":"AAgBI;AAfJ,SAAS,iBAAiB;AAC1B,SAAS,gBAAgB;AACzB,SAAS,iBAAiB;AAE1B,MAAM,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASE,SAAR,UAAsC;AAC3C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,SAAS;AAAA,QAClB,SAAS;AAAA,QACT,WAAW,GAAG,IAAI;AAAA,QAClB,QAAQ;AAAA,MACV,CAAC;AAAA;AAAA,EACH;AAEJ;","names":[]}
+{"version":3,"sources":["../../../../../../../src/components/builtin/Form/components/Spinner/index.tsx"],"sourcesContent":["import { ReactNode } from 'react'\nimport { Spinner20 } from '../../../../icons/Spinner20'\nimport { useKeyframes } from '../../../../../runtimes/react/css-runtime/hooks/use-keyframes'\nimport { useStyle } from '../../../../../runtimes/react/css-runtime/hooks/use-style'\n\nexport default function Spinner(): ReactNode {\n  const keyframesStyle = useKeyframes(`\n    from {\n      transform: rotate(0deg);\n    }\n    to {\n      transform: rotate(360deg);\n    }\n  `)\n  const spinnerStyle = useStyle({\n    display: 'inline-flex',\n    animation: `${keyframesStyle.keyframesName} 1s linear infinite`,\n    stroke: 'currentColor',\n  })\n  return (\n    <>\n      {keyframesStyle.styleElement}\n      {spinnerStyle.styleElement}\n      <Spinner20 className={spinnerStyle.className} />\n    </>\n  )\n}\n"],"mappings":"AAoBI,mBAGE,KAHF;AAnBJ,SAAS,iBAAiB;AAC1B,SAAS,oBAAoB;AAC7B,SAAS,gBAAgB;AAEV,SAAR,UAAsC;AAC3C,QAAM,iBAAiB,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAOnC;AACD,QAAM,eAAe,SAAS;AAAA,IAC5B,SAAS;AAAA,IACT,WAAW,GAAG,eAAe,aAAa;AAAA,IAC1C,QAAQ;AAAA,EACV,CAAC;AACD,SACE,iCACG;AAAA,mBAAe;AAAA,IACf,aAAa;AAAA,IACd,oBAAC,aAAU,WAAW,aAAa,WAAW;AAAA,KAChD;AAEJ;","names":[]}

package/dist/esm/components/builtin/Image/Image.js

@@ -1,16 +1,20 @@
 "use client";
-import { jsx } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useState, useEffect, forwardRef } from "react";
 import { findBreakpointOverride } from "@makeswift/controls";
 import { placeholders } from "../../utils/placeholders";
 import { Link } from "../../shared/Link";
-import { cx } from "@emotion/css";
-import { useStyle } from "../../../runtimes/react/use-style";
 import { useResponsiveStyle, useResponsiveWidth } from "../../utils/responsive-style";
 import { useFile } from "../../../runtimes/react/hooks/makeswift-api";
 import { useBreakpoints } from "../../../runtimes/react/hooks/use-breakpoints";
 import { useFrameworkContext } from "../../../runtimes/react/components/hooks/use-framework-context";
 import { match, P } from "ts-pattern";
+const aspectRatioValues = {
+  "16:9": "16 / 9",
+  "4:3": "4 / 3",
+  "1:1": "1 / 1"
+};
+import { composeStyles, useStyle } from "../../../runtimes/react/css-runtime/hooks/use-style";
 function loadImage(src) {
   return new Promise((resolve, reject) => {
     const image = new Image();
@@ -46,6 +50,7 @@ const ImageComponent = forwardRef(function Image2({
   link,
   opacity,
   boxShadow,
+  aspectRatio,
   placeholder = placeholders.image,
   className,
   priority
@@ -74,7 +79,7 @@ const ImageComponent = forwardRef(function Image2({
   }, [dataDimensions, imageSrc]);
   const dimensions = dataDimensions ?? measuredDimensions;
   const Container = link ? Link : "div";
-  const containerClassName = cx(
+  const containerStyles = composeStyles(
     useStyle({ lineHeight: 0, overflow: "hidden" }),
     useStyle(useResponsiveWidth(width, dimensions?.width)),
     useStyle(useResponsiveStyle([opacity], ([opacity2 = 1]) => ({ opacity: opacity2 }))),
@@ -86,23 +91,34 @@ const ImageComponent = forwardRef(function Image2({
     className
   );
   const { Image: Image3 } = useFrameworkContext();
+  const { className: imageClassName, styleElement: imageStyleElement } = useStyle(
+    useResponsiveStyle([aspectRatio], ([aspectRatio2 = "original"]) => ({
+      width: "100%",
+      height: "auto",
+      ...aspectRatio2 !== "original" && {
+        aspectRatio: aspectRatioValues[aspectRatio2],
+        objectFit: "cover"
+      }
+    }))
+  );
   if (!dimensions)
     return null;
-  return /* @__PURE__ */ jsx(Container, { link, ref, id, className: containerClassName, children: /* @__PURE__ */ jsx(
-    Image3,
-    {
-      src: imageSrc,
-      priority,
-      sizes: imageSizes(breakpoints, width),
-      alt: altText ?? "",
-      width: dimensions.width,
-      height: dimensions.height,
-      style: {
-        width: "100%",
-        height: "auto"
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    containerStyles.styleElements,
+    imageStyleElement,
+    /* @__PURE__ */ jsx(Container, { link, ref, id, className: containerStyles.className, children: /* @__PURE__ */ jsx(
+      Image3,
+      {
+        src: imageSrc,
+        priority,
+        sizes: imageSizes(breakpoints, width),
+        alt: altText ?? "",
+        width: dimensions.width,
+        height: dimensions.height,
+        className: imageClassName
       }
-    }
-  ) });
+    ) })
+  ] });
 });
 var Image_default = ImageComponent;
 export {

package/dist/esm/components/builtin/Image/Image.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/builtin/Image/Image.tsx"],"sourcesContent":["'use client'\n\nimport { useState, useEffect, Ref, forwardRef } from 'react'\n\nimport {\n  LinkData,\n  ResponsiveLengthData,\n  ImageData,\n  ResponsiveOpacityValue,\n} from '@makeswift/prop-controllers'\nimport { type Breakpoints, findBreakpointOverride } from '@makeswift/controls'\n\nimport { placeholders } from '../../utils/placeholders'\nimport { Link } from '../../shared/Link'\nimport { cx } from '@emotion/css'\nimport { useStyle } from '../../../runtimes/react/use-style'\nimport { useResponsiveStyle, useResponsiveWidth } from '../../utils/responsive-style'\nimport { useFile } from '../../../runtimes/react/hooks/makeswift-api'\nimport { useBreakpoints } from '../../../runtimes/react/hooks/use-breakpoints'\nimport { useFrameworkContext } from '../../../runtimes/react/components/hooks/use-framework-context'\nimport { match, P } from 'ts-pattern'\n\ntype Props = {\n  id?: string\n  file?: ImageData\n  altText?: string\n  link?: LinkData\n  width?: ResponsiveLengthData\n  margin?: string\n  padding?: string\n  border?: string\n  borderRadius?: string\n  boxShadow?: string\n  opacity?: ResponsiveOpacityValue\n  placeholder?: { src: string; dimensions: { width: number; height: number } }\n  className?: string\n  priority?: boolean\n}\n\nfunction loadImage(src: string): Promise<HTMLImageElement> {\n  return new Promise<HTMLImageElement>((resolve, reject) => {\n    const image = new Image()\n\n    image.onload = () => resolve(image)\n    image.onerror = reject\n    image.src = src\n  })\n}\n\nfunction imageSizes(breakpoints: Breakpoints, width?: Props['width']): string {\n  const baseDevice = breakpoints.find(breakpoint => breakpoint.maxWidth == null)\n  const baseWidth = baseDevice && width && findBreakpointOverride(breakpoints, width, baseDevice.id)\n  const baseWidthSize =\n    baseWidth == null || baseWidth.value.unit !== 'px' ? '100vw' : `${baseWidth.value.value}px`\n\n  return breakpoints\n    .map(breakpoint => {\n      const override = findBreakpointOverride(breakpoints, width, breakpoint.id)\n\n      if (override == null || breakpoint.maxWidth == null || override.value.unit !== 'px') {\n        return null\n      }\n\n      return `(max-width: ${breakpoint.maxWidth}px) ${Math.min(\n        breakpoint.maxWidth,\n        override.value.value,\n      )}px`\n    })\n    .filter((size): size is NonNullable<typeof size> => size != null)\n    .reduce((sourceSizes, sourceSize) => `${sourceSize}, ${sourceSizes}`, baseWidthSize)\n}\n\ntype Dimensions = {\n  width: number\n  height: number\n}\n\nconst ImageComponent = forwardRef(function Image(\n  {\n    id,\n    width,\n    margin,\n    padding,\n    file,\n    border,\n    borderRadius,\n    altText,\n    link,\n    opacity,\n    boxShadow,\n    placeholder = placeholders.image,\n    className,\n    priority,\n  }: Props,\n  ref: Ref<HTMLAnchorElement & HTMLDivElement>,\n) {\n  const fileId = match(file)\n    .with(P.string, v => v)\n    .with({ type: 'makeswift-file', version: 1 }, v => v.id)\n    .otherwise(() => null)\n  const fileData = useFile(fileId)\n  const imageSrc = match([file, fileData])\n    .with([P.any, P.not(P.nullish)], ([, fileData]) => fileData.publicUrl)\n    .with([{ type: 'external-file', version: 1 }, P.any], ([file]) => file.url)\n    .otherwise(() => placeholder.src)\n  const dataDimensions = match([file, fileData, imageSrc])\n    .with(\n      [{ type: 'external-file', version: 1, width: P.number, height: P.number }, P.any, P.any],\n      ([externalFile]) => ({ width: externalFile.width, height: externalFile.height }),\n    )\n    .with([P.any, P.not(P.nullish), P.any], ([, data]) => data.dimensions)\n    .with([P.any, P.any, placeholder.src], () => placeholder.dimensions)\n    .otherwise(() => null)\n  const [measuredDimensions, setMeasuredDimensions] = useState<Dimensions | null>(null)\n  const breakpoints = useBreakpoints()\n\n  useEffect(() => {\n    if (dataDimensions) return\n\n    let cleanedUp = false\n\n    loadImage(imageSrc)\n      .then(image => {\n        if (!cleanedUp) {\n          setMeasuredDimensions({ width: image.naturalWidth, height: image.naturalHeight })\n        }\n      })\n      .catch(console.error)\n\n    return () => {\n      cleanedUp = true\n    }\n  }, [dataDimensions, imageSrc])\n\n  const dimensions = dataDimensions ?? measuredDimensions\n  const Container = link ? Link : 'div'\n  const containerClassName = cx(\n    useStyle({ lineHeight: 0, overflow: 'hidden' }),\n    useStyle(useResponsiveWidth(width, dimensions?.width)),\n    useStyle(useResponsiveStyle([opacity] as const, ([opacity = 1]) => ({ opacity }))),\n    margin,\n    padding,\n    border,\n    borderRadius,\n    boxShadow,\n    className,\n  )\n\n  const { Image } = useFrameworkContext()\n\n  if (!dimensions) return null\n\n  return (\n    <Container link={link} ref={ref} id={id} className={containerClassName}>\n      <Image\n        src={imageSrc}\n        priority={priority}\n        sizes={imageSizes(breakpoints, width)}\n        alt={altText ?? ''}\n        width={dimensions.width}\n        height={dimensions.height}\n        style={{\n          width: '100%',\n          height: 'auto',\n        }}\n      />\n    </Container>\n  )\n})\n\nexport default ImageComponent\n"],"mappings":"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","names":["Image","fileData","file","opacity"]}
+{"version":3,"sources":["../../../../../src/components/builtin/Image/Image.tsx"],"sourcesContent":["'use client'\n\nimport { useState, useEffect, Ref, forwardRef } from 'react'\n\nimport {\n  LinkData,\n  ResponsiveLengthData,\n  ImageData,\n  ResponsiveOpacityValue,\n  ResponsiveSelectValue,\n} from '@makeswift/prop-controllers'\nimport { type Breakpoints, findBreakpointOverride } from '@makeswift/controls'\n\nimport { placeholders } from '../../utils/placeholders'\nimport { Link } from '../../shared/Link'\nimport { useResponsiveStyle, useResponsiveWidth } from '../../utils/responsive-style'\nimport { useFile } from '../../../runtimes/react/hooks/makeswift-api'\nimport { useBreakpoints } from '../../../runtimes/react/hooks/use-breakpoints'\nimport { useFrameworkContext } from '../../../runtimes/react/components/hooks/use-framework-context'\nimport { match, P } from 'ts-pattern'\n\ntype AspectRatio = 'original' | '16:9' | '4:3' | '1:1'\n\nconst aspectRatioValues: Record<Exclude<AspectRatio, 'original'>, string> = {\n  '16:9': '16 / 9',\n  '4:3': '4 / 3',\n  '1:1': '1 / 1',\n}\nimport { composeStyles, useStyle } from '../../../runtimes/react/css-runtime/hooks/use-style'\n\ntype Props = {\n  id?: string\n  file?: ImageData\n  altText?: string\n  link?: LinkData\n  width?: ResponsiveLengthData\n  aspectRatio?: ResponsiveSelectValue<AspectRatio>\n  margin?: string\n  padding?: string\n  border?: string\n  borderRadius?: string\n  boxShadow?: string\n  opacity?: ResponsiveOpacityValue\n  placeholder?: { src: string; dimensions: { width: number; height: number } }\n  className?: string\n  priority?: boolean\n}\n\nfunction loadImage(src: string): Promise<HTMLImageElement> {\n  return new Promise<HTMLImageElement>((resolve, reject) => {\n    const image = new Image()\n\n    image.onload = () => resolve(image)\n    image.onerror = reject\n    image.src = src\n  })\n}\n\nfunction imageSizes(breakpoints: Breakpoints, width?: Props['width']): string {\n  const baseDevice = breakpoints.find(breakpoint => breakpoint.maxWidth == null)\n  const baseWidth = baseDevice && width && findBreakpointOverride(breakpoints, width, baseDevice.id)\n  const baseWidthSize =\n    baseWidth == null || baseWidth.value.unit !== 'px' ? '100vw' : `${baseWidth.value.value}px`\n\n  return breakpoints\n    .map(breakpoint => {\n      const override = findBreakpointOverride(breakpoints, width, breakpoint.id)\n\n      if (override == null || breakpoint.maxWidth == null || override.value.unit !== 'px') {\n        return null\n      }\n\n      return `(max-width: ${breakpoint.maxWidth}px) ${Math.min(\n        breakpoint.maxWidth,\n        override.value.value,\n      )}px`\n    })\n    .filter((size): size is NonNullable<typeof size> => size != null)\n    .reduce((sourceSizes, sourceSize) => `${sourceSize}, ${sourceSizes}`, baseWidthSize)\n}\n\ntype Dimensions = {\n  width: number\n  height: number\n}\n\nconst ImageComponent = forwardRef(function Image(\n  {\n    id,\n    width,\n    margin,\n    padding,\n    file,\n    border,\n    borderRadius,\n    altText,\n    link,\n    opacity,\n    boxShadow,\n    aspectRatio,\n    placeholder = placeholders.image,\n    className,\n    priority,\n  }: Props,\n  ref: Ref<HTMLAnchorElement & HTMLDivElement>,\n) {\n  const fileId = match(file)\n    .with(P.string, v => v)\n    .with({ type: 'makeswift-file', version: 1 }, v => v.id)\n    .otherwise(() => null)\n  const fileData = useFile(fileId)\n  const imageSrc = match([file, fileData])\n    .with([P.any, P.not(P.nullish)], ([, fileData]) => fileData.publicUrl)\n    .with([{ type: 'external-file', version: 1 }, P.any], ([file]) => file.url)\n    .otherwise(() => placeholder.src)\n  const dataDimensions = match([file, fileData, imageSrc])\n    .with(\n      [{ type: 'external-file', version: 1, width: P.number, height: P.number }, P.any, P.any],\n      ([externalFile]) => ({ width: externalFile.width, height: externalFile.height }),\n    )\n    .with([P.any, P.not(P.nullish), P.any], ([, data]) => data.dimensions)\n    .with([P.any, P.any, placeholder.src], () => placeholder.dimensions)\n    .otherwise(() => null)\n  const [measuredDimensions, setMeasuredDimensions] = useState<Dimensions | null>(null)\n  const breakpoints = useBreakpoints()\n\n  useEffect(() => {\n    if (dataDimensions) return\n\n    let cleanedUp = false\n\n    loadImage(imageSrc)\n      .then(image => {\n        if (!cleanedUp) {\n          setMeasuredDimensions({ width: image.naturalWidth, height: image.naturalHeight })\n        }\n      })\n      .catch(console.error)\n\n    return () => {\n      cleanedUp = true\n    }\n  }, [dataDimensions, imageSrc])\n\n  const dimensions = dataDimensions ?? measuredDimensions\n  const Container = link ? Link : 'div'\n  const containerStyles = composeStyles(\n    useStyle({ lineHeight: 0, overflow: 'hidden' }),\n    useStyle(useResponsiveWidth(width, dimensions?.width)),\n    useStyle(useResponsiveStyle([opacity] as const, ([opacity = 1]) => ({ opacity }))),\n    margin,\n    padding,\n    border,\n    borderRadius,\n    boxShadow,\n    className,\n  )\n\n  const { Image } = useFrameworkContext()\n\n  const { className: imageClassName, styleElement: imageStyleElement } = useStyle(\n    useResponsiveStyle([aspectRatio] as const, ([aspectRatio = 'original']) => ({\n      width: '100%',\n      height: 'auto',\n      ...(aspectRatio !== 'original' && {\n        aspectRatio: aspectRatioValues[aspectRatio],\n        objectFit: 'cover',\n      }),\n    })),\n  )\n\n  if (!dimensions) return null\n\n  return (\n    <>\n      {containerStyles.styleElements}\n      {imageStyleElement}\n      <Container link={link} ref={ref} id={id} className={containerStyles.className}>\n        <Image\n          src={imageSrc}\n          priority={priority}\n          sizes={imageSizes(breakpoints, width)}\n          alt={altText ?? ''}\n          width={dimensions.width}\n          height={dimensions.height}\n          className={imageClassName}\n        />\n      </Container>\n    </>\n  )\n})\n\nexport default ImageComponent\n"],"mappings":";AA8KI,mBAII,KAJJ;AA5KJ,SAAS,UAAU,WAAgB,kBAAkB;AASrD,SAA2B,8BAA8B;AAEzD,SAAS,oBAAoB;AAC7B,SAAS,YAAY;AACrB,SAAS,oBAAoB,0BAA0B;AACvD,SAAS,eAAe;AACxB,SAAS,sBAAsB;AAC/B,SAAS,2BAA2B;AACpC,SAAS,OAAO,SAAS;AAIzB,MAAM,oBAAsE;AAAA,EAC1E,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,OAAO;AACT;AACA,SAAS,eAAe,gBAAgB;AAoBxC,SAAS,UAAU,KAAwC;AACzD,SAAO,IAAI,QAA0B,CAAC,SAAS,WAAW;AACxD,UAAM,QAAQ,IAAI,MAAM;AAExB,UAAM,SAAS,MAAM,QAAQ,KAAK;AAClC,UAAM,UAAU;AAChB,UAAM,MAAM;AAAA,EACd,CAAC;AACH;AAEA,SAAS,WAAW,aAA0B,OAAgC;AAC5E,QAAM,aAAa,YAAY,KAAK,gBAAc,WAAW,YAAY,IAAI;AAC7E,QAAM,YAAY,cAAc,SAAS,uBAAuB,aAAa,OAAO,WAAW,EAAE;AACjG,QAAM,gBACJ,aAAa,QAAQ,UAAU,MAAM,SAAS,OAAO,UAAU,GAAG,UAAU,MAAM,KAAK;AAEzF,SAAO,YACJ,IAAI,gBAAc;AACjB,UAAM,WAAW,uBAAuB,aAAa,OAAO,WAAW,EAAE;AAEzE,QAAI,YAAY,QAAQ,WAAW,YAAY,QAAQ,SAAS,MAAM,SAAS,MAAM;AACnF,aAAO;AAAA,IACT;AAEA,WAAO,eAAe,WAAW,QAAQ,OAAO,KAAK;AAAA,MACnD,WAAW;AAAA,MACX,SAAS,MAAM;AAAA,IACjB,CAAC;AAAA,EACH,CAAC,EACA,OAAO,CAAC,SAA2C,QAAQ,IAAI,EAC/D,OAAO,CAAC,aAAa,eAAe,GAAG,UAAU,KAAK,WAAW,IAAI,aAAa;AACvF;AAOA,MAAM,iBAAiB,WAAW,SAASA,OACzC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc,aAAa;AAAA,EAC3B;AAAA,EACA;AACF,GACA,KACA;AACA,QAAM,SAAS,MAAM,IAAI,EACtB,KAAK,EAAE,QAAQ,OAAK,CAAC,EACrB,KAAK,EAAE,MAAM,kBAAkB,SAAS,EAAE,GAAG,OAAK,EAAE,EAAE,EACtD,UAAU,MAAM,IAAI;AACvB,QAAM,WAAW,QAAQ,MAAM;AAC/B,QAAM,WAAW,MAAM,CAAC,MAAM,QAAQ,CAAC,EACpC,KAAK,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,CAAC,GAAG,CAAC,CAAC,EAAEC,SAAQ,MAAMA,UAAS,SAAS,EACpE,KAAK,CAAC,EAAE,MAAM,iBAAiB,SAAS,EAAE,GAAG,EAAE,GAAG,GAAG,CAAC,CAACC,KAAI,MAAMA,MAAK,GAAG,EACzE,UAAU,MAAM,YAAY,GAAG;AAClC,QAAM,iBAAiB,MAAM,CAAC,MAAM,UAAU,QAAQ,CAAC,EACpD;AAAA,IACC,CAAC,EAAE,MAAM,iBAAiB,SAAS,GAAG,OAAO,EAAE,QAAQ,QAAQ,EAAE,OAAO,GAAG,EAAE,KAAK,EAAE,GAAG;AAAA,IACvF,CAAC,CAAC,YAAY,OAAO,EAAE,OAAO,aAAa,OAAO,QAAQ,aAAa,OAAO;AAAA,EAChF,EACC,KAAK,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,GAAG,EAAE,GAAG,GAAG,CAAC,CAAC,EAAE,IAAI,MAAM,KAAK,UAAU,EACpE,KAAK,CAAC,EAAE,KAAK,EAAE,KAAK,YAAY,GAAG,GAAG,MAAM,YAAY,UAAU,EAClE,UAAU,MAAM,IAAI;AACvB,QAAM,CAAC,oBAAoB,qBAAqB,IAAI,SAA4B,IAAI;AACpF,QAAM,cAAc,eAAe;AAEnC,YAAU,MAAM;AACd,QAAI;AAAgB;AAEpB,QAAI,YAAY;AAEhB,cAAU,QAAQ,EACf,KAAK,WAAS;AACb,UAAI,CAAC,WAAW;AACd,8BAAsB,EAAE,OAAO,MAAM,cAAc,QAAQ,MAAM,cAAc,CAAC;AAAA,MAClF;AAAA,IACF,CAAC,EACA,MAAM,QAAQ,KAAK;AAEtB,WAAO,MAAM;AACX,kBAAY;AAAA,IACd;AAAA,EACF,GAAG,CAAC,gBAAgB,QAAQ,CAAC;AAE7B,QAAM,aAAa,kBAAkB;AACrC,QAAM,YAAY,OAAO,OAAO;AAChC,QAAM,kBAAkB;AAAA,IACtB,SAAS,EAAE,YAAY,GAAG,UAAU,SAAS,CAAC;AAAA,IAC9C,SAAS,mBAAmB,OAAO,YAAY,KAAK,CAAC;AAAA,IACrD,SAAS,mBAAmB,CAAC,OAAO,GAAY,CAAC,CAACC,WAAU,CAAC,OAAO,EAAE,SAAAA,SAAQ,EAAE,CAAC;AAAA,IACjF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,QAAM,EAAE,OAAAH,OAAM,IAAI,oBAAoB;AAEtC,QAAM,EAAE,WAAW,gBAAgB,cAAc,kBAAkB,IAAI;AAAA,IACrE,mBAAmB,CAAC,WAAW,GAAY,CAAC,CAACI,eAAc,UAAU,OAAO;AAAA,MAC1E,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,GAAIA,iBAAgB,cAAc;AAAA,QAChC,aAAa,kBAAkBA,YAAW;AAAA,QAC1C,WAAW;AAAA,MACb;AAAA,IACF,EAAE;AAAA,EACJ;AAEA,MAAI,CAAC;AAAY,WAAO;AAExB,SACE,iCACG;AAAA,oBAAgB;AAAA,IAChB;AAAA,IACD,oBAAC,aAAU,MAAY,KAAU,IAAQ,WAAW,gBAAgB,WAClE;AAAA,MAACJ;AAAA,MAAA;AAAA,QACC,KAAK;AAAA,QACL;AAAA,QACA,OAAO,WAAW,aAAa,KAAK;AAAA,QACpC,KAAK,WAAW;AAAA,QAChB,OAAO,WAAW;AAAA,QAClB,QAAQ,WAAW;AAAA,QACnB,WAAW;AAAA;AAAA,IACb,GACF;AAAA,KACF;AAEJ,CAAC;AAED,IAAO,gBAAQ;","names":["Image","fileData","file","opacity","aspectRatio"]}