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

package/dist/cjs/components/builtin/Form/components/Field/components/Checkbox/index.js

@@ -38,9 +38,8 @@ var import_Label = require("../Label");
 var import_FormContext = require("../../../../context/FormContext");
 var import_responsiveField = require("../../services/responsiveField");
 var import_colorToString = require("../../../../../../utils/colorToString");
-var import_use_style = require("../../../../../../../runtimes/react/use-style");
-var import_css = require("@emotion/css");
 var import_responsive_style = require("../../../../../../utils/responsive-style");
+var import_use_style = require("../../../../../../../runtimes/react/css-runtime/hooks/use-style");
 function getCheckmarkColor({
   swatch: { hue: h, saturation: s, lightness: l },
   alpha: a
@@ -49,133 +48,126 @@ function getCheckmarkColor({
 }
 const FAKE_CHECKBOX_CLASS_NAME = "fake-checkbox";
 function FakeCheckbox({ className, style, contrast, error }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    "div",
-    {
-      style,
-      className: (0, import_css.cx)(
-        FAKE_CHECKBOX_CLASS_NAME,
-        (0, import_use_style.useStyle)({
-          position: "absolute",
-          width: "100%",
-          height: "100%",
-          borderStyle: "solid",
-          borderRadius: 4,
-          pointerEvents: "none",
-          borderWidth: 1
-        }),
-        (0, import_use_style.useStyle)(
-          (0, import_responsive_style.useResponsiveStyle)([contrast], ([contrast2 = import_FormContext.Contrasts.LIGHT]) => ({
-            borderColor: (0, import_responsiveField.getContrastBorderColor)(contrast2, error),
-            backgroundColor: (0, import_responsiveField.getContrastBackgroundColor)(contrast2)
-          }))
-        ),
-        className
-      )
-    }
+  const styles = (0, import_use_style.composeStyles)(
+    FAKE_CHECKBOX_CLASS_NAME,
+    (0, import_use_style.useStyle)({
+      position: "absolute",
+      width: "100%",
+      height: "100%",
+      borderStyle: "solid",
+      borderRadius: 4,
+      pointerEvents: "none",
+      borderWidth: 1
+    }),
+    (0, import_use_style.useStyle)(
+      (0, import_responsive_style.useResponsiveStyle)([contrast], ([contrast2 = import_FormContext.Contrasts.LIGHT]) => ({
+        borderColor: (0, import_responsiveField.getContrastBorderColor)(contrast2, error),
+        backgroundColor: (0, import_responsiveField.getContrastBackgroundColor)(contrast2)
+      }))
+    ),
+    className
   );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    styles.styleElements,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style, className: styles.className })
+  ] });
 }
 const HiddenCheckbox = (0, import_react.forwardRef)(function HiddenCheckbox2({ size, brandColor, contrast, error, className, ...restOfProps }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    "input",
-    {
-      ...restOfProps,
-      ref,
-      className: (0, import_css.cx)(
-        (0, import_use_style.useStyle)({
+  const styles = (0, import_use_style.composeStyles)(
+    (0, import_use_style.useStyle)({
+      position: "absolute",
+      opacity: 0,
+      width: "100%",
+      height: "100%",
+      cursor: "pointer",
+      "&:disabled": {
+        cursor: "no-drop",
+        [`& ~ .${FAKE_CHECKBOX_CLASS_NAME}`]: {
+          opacity: 0.5
+        }
+      },
+      [`&:checked ~ .${FAKE_CHECKBOX_CLASS_NAME}`]: {
+        ...(0, import_responsive_style.useResponsiveStyle)(
+          [brandColor],
+          ([{ swatch = { hue: 0, saturation: 0, lightness: 0 }, alpha = 1 } = {}]) => ({
+            backgroundColor: (0, import_colorToString.colorToString)({ swatch, alpha })
+          })
+        ),
+        borderColor: "transparent",
+        "&::after": {
+          content: '""',
           position: "absolute",
-          opacity: 0,
-          width: "100%",
-          height: "100%",
-          cursor: "pointer",
-          "&:disabled": {
-            cursor: "no-drop",
-            [`& ~ .${FAKE_CHECKBOX_CLASS_NAME}`]: {
-              opacity: 0.5
-            }
-          },
-          [`&:checked ~ .${FAKE_CHECKBOX_CLASS_NAME}`]: {
-            ...(0, import_responsive_style.useResponsiveStyle)(
-              [brandColor],
-              ([{ swatch = { hue: 0, saturation: 0, lightness: 0 }, alpha = 1 } = {}]) => ({
-                backgroundColor: (0, import_colorToString.colorToString)({ swatch, alpha })
-              })
-            ),
-            borderColor: "transparent",
-            "&::after": {
-              content: '""',
-              position: "absolute",
-              boxSizing: "content-box",
-              width: "25%",
-              height: "50%",
-              borderStyle: "solid",
-              ...(0, import_responsive_style.useResponsiveStyle)(
-                [size, brandColor],
-                ([
-                  size2 = import_FormContext.Sizes.MEDIUM,
-                  { swatch = { hue: 0, saturation: 0, lightness: 0 }, alpha = 1 } = {}
-                ]) => ({
-                  borderWidth: (0, import_Label.getSizeHeight)(size2) * 0.1,
-                  borderLeft: 0,
-                  borderTop: 0,
-                  borderColor: getCheckmarkColor({ swatch, alpha })
-                })
-              ),
-              transform: "rotate(45deg) translate3d(91%, -23%, 0)"
-            }
-          },
-          "&:not(:disabled)": {
-            [`&:focus ~ .${FAKE_CHECKBOX_CLASS_NAME}`]: (0, import_responsive_style.useResponsiveStyle)(
-              [brandColor],
-              ([brandColor2 = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 }]) => ({
-                borderColor: (0, import_colorToString.colorToString)(brandColor2)
-              })
-            )
-          },
-          "&:not(:disabled):checked": {
-            [`&:focus ~ .${FAKE_CHECKBOX_CLASS_NAME}`]: (0, import_responsive_style.useResponsiveStyle)(
-              [contrast],
-              ([contrast2 = import_FormContext.Contrasts.LIGHT]) => ({
-                borderColor: (0, import_responsiveField.getContrastBorderColor)(contrast2, error)
-              })
-            )
-          }
-        }),
-        className
-      )
-    }
+          boxSizing: "content-box",
+          width: "25%",
+          height: "50%",
+          borderStyle: "solid",
+          ...(0, import_responsive_style.useResponsiveStyle)(
+            [size, brandColor],
+            ([
+              size2 = import_FormContext.Sizes.MEDIUM,
+              { swatch = { hue: 0, saturation: 0, lightness: 0 }, alpha = 1 } = {}
+            ]) => ({
+              borderWidth: (0, import_Label.getSizeHeight)(size2) * 0.1,
+              borderLeft: 0,
+              borderTop: 0,
+              borderColor: getCheckmarkColor({ swatch, alpha })
+            })
+          ),
+          transform: "rotate(45deg) translate3d(91%, -23%, 0)"
+        }
+      },
+      "&:not(:disabled)": {
+        [`&:focus ~ .${FAKE_CHECKBOX_CLASS_NAME}`]: (0, import_responsive_style.useResponsiveStyle)(
+          [brandColor],
+          ([brandColor2 = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 }]) => ({
+            borderColor: (0, import_colorToString.colorToString)(brandColor2)
+          })
+        )
+      },
+      "&:not(:disabled):checked": {
+        [`&:focus ~ .${FAKE_CHECKBOX_CLASS_NAME}`]: (0, import_responsive_style.useResponsiveStyle)(
+          [contrast],
+          ([contrast2 = import_FormContext.Contrasts.LIGHT]) => ({
+            borderColor: (0, import_responsiveField.getContrastBorderColor)(contrast2, error)
+          })
+        )
+      }
+    }),
+    className
   );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    styles.styleElements,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", { ...restOfProps, ref, className: styles.className })
+  ] });
 });
 var Checkbox_default = (0, import_react.forwardRef)(function Checkbox({ error, className, style, form, ...restOfProps }, ref) {
   const { size, contrast, brandColor } = (0, import_FormContext.useFormContext)();
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-    "div",
-    {
-      className: (0, import_css.cx)(
-        (0, import_use_style.useStyle)({ position: "relative" }),
-        (0, import_use_style.useStyle)(
-          (0, import_responsive_style.useResponsiveStyle)([size], ([size2 = import_FormContext.Sizes.MEDIUM]) => ({
-            height: (0, import_Label.getSizeHeight)(size2),
-            width: (0, import_Label.getSizeHeight)(size2)
-          }))
-        )
-      ),
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          HiddenCheckbox,
-          {
-            ...restOfProps,
-            type: "checkbox",
-            ref,
-            error,
-            size,
-            contrast,
-            brandColor
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FakeCheckbox, { className, error, contrast, style })
-      ]
-    }
+  const styles = (0, import_use_style.composeStyles)(
+    (0, import_use_style.useStyle)({ position: "relative" }),
+    (0, import_use_style.useStyle)(
+      (0, import_responsive_style.useResponsiveStyle)([size], ([size2 = import_FormContext.Sizes.MEDIUM]) => ({
+        height: (0, import_Label.getSizeHeight)(size2),
+        width: (0, import_Label.getSizeHeight)(size2)
+      }))
+    )
   );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    styles.styleElements,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: styles.className, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        HiddenCheckbox,
+        {
+          ...restOfProps,
+          type: "checkbox",
+          ref,
+          error,
+          size,
+          contrast,
+          brandColor
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FakeCheckbox, { className, error, contrast, style })
+    ] })
+  ] });
 });
 //# sourceMappingURL=index.js.map

package/dist/cjs/components/builtin/Form/components/Field/components/Checkbox/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../../../src/components/builtin/Form/components/Field/components/Checkbox/index.tsx"],"sourcesContent":["import { forwardRef, CSSProperties, ComponentPropsWithoutRef, ForwardedRef } from 'react'\nimport Color from 'color'\n\nimport { getSizeHeight as getSize } from '../Label'\nimport {\n  useFormContext,\n  Value as FormContextValue,\n  Sizes,\n  Contrasts,\n} from '../../../../context/FormContext'\nimport { getContrastBorderColor, getContrastBackgroundColor } from '../../services/responsiveField'\nimport { colorToString } from '../../../../../../utils/colorToString'\nimport { SwatchValue } from '../../../../../../utils/types'\nimport { useStyle } from '../../../../../../../runtimes/react/use-style'\nimport { cx } from '@emotion/css'\nimport { useResponsiveStyle } from '../../../../../../utils/responsive-style'\n\nfunction getCheckmarkColor({\n  swatch: { hue: h, saturation: s, lightness: l },\n  alpha: a,\n}: {\n  swatch: SwatchValue\n  alpha: number\n}) {\n  return Color({ h, s, l }).alpha(a).isLight() ? 'rgba(0, 0, 0, 0.7)' : 'rgba(255, 255, 255, 0.95)'\n}\n\ntype FakeCheckboxProps = {\n  className?: string\n  style?: CSSProperties\n  contrast?: FormContextValue['contrast']\n  error?: boolean\n}\n\nconst FAKE_CHECKBOX_CLASS_NAME = 'fake-checkbox'\n\nfunction FakeCheckbox({ className, style, contrast, error }: FakeCheckboxProps) {\n  return (\n    <div\n      style={style}\n      className={cx(\n        FAKE_CHECKBOX_CLASS_NAME,\n        useStyle({\n          position: 'absolute',\n          width: '100%',\n          height: '100%',\n          borderStyle: 'solid',\n          borderRadius: 4,\n          pointerEvents: 'none',\n          borderWidth: 1,\n        }),\n        useStyle(\n          useResponsiveStyle([contrast] as const, ([contrast = Contrasts.LIGHT]) => ({\n            borderColor: getContrastBorderColor(contrast, error),\n            backgroundColor: getContrastBackgroundColor(contrast),\n          })),\n        ),\n        className,\n      )}\n    />\n  )\n}\n\ntype HiddenCheckboxBaseProps = Partial<\n  Pick<FormContextValue, 'size' | 'brandColor' | 'contrast'>\n> & {\n  error?: boolean\n}\n\ntype HiddenCheckboxProps = HiddenCheckboxBaseProps &\n  Omit<ComponentPropsWithoutRef<'input'>, keyof HiddenCheckboxBaseProps>\n\nconst HiddenCheckbox = forwardRef(function HiddenCheckbox(\n  { size, brandColor, contrast, error, className, ...restOfProps }: HiddenCheckboxProps,\n  ref: ForwardedRef<HTMLInputElement>,\n) {\n  return (\n    <input\n      {...restOfProps}\n      ref={ref}\n      className={cx(\n        useStyle({\n          position: 'absolute',\n          opacity: 0,\n          width: '100%',\n          height: '100%',\n          cursor: 'pointer',\n\n          '&:disabled': {\n            cursor: 'no-drop',\n\n            [`& ~ .${FAKE_CHECKBOX_CLASS_NAME}`]: {\n              opacity: 0.5,\n            },\n          },\n\n          [`&:checked ~ .${FAKE_CHECKBOX_CLASS_NAME}`]: {\n            ...useResponsiveStyle(\n              [brandColor] as const,\n              ([{ swatch = { hue: 0, saturation: 0, lightness: 0 }, alpha = 1 } = {}]) => ({\n                backgroundColor: colorToString({ swatch, alpha }),\n              }),\n            ),\n            borderColor: 'transparent',\n\n            '&::after': {\n              content: '\"\"',\n              position: 'absolute',\n              boxSizing: 'content-box',\n              width: '25%',\n              height: '50%',\n              borderStyle: 'solid',\n              ...useResponsiveStyle(\n                [size, brandColor] as const,\n                ([\n                  size = Sizes.MEDIUM,\n                  { swatch = { hue: 0, saturation: 0, lightness: 0 }, alpha = 1 } = {},\n                ]) => ({\n                  borderWidth: getSize(size) * 0.1,\n                  borderLeft: 0,\n                  borderTop: 0,\n                  borderColor: getCheckmarkColor({ swatch, alpha }),\n                }),\n              ),\n              transform: 'rotate(45deg) translate3d(91%, -23%, 0)',\n            },\n          },\n\n          '&:not(:disabled)': {\n            [`&:focus ~ .${FAKE_CHECKBOX_CLASS_NAME}`]: useResponsiveStyle(\n              [brandColor] as const,\n              ([brandColor = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 }]) => ({\n                borderColor: colorToString(brandColor),\n              }),\n            ),\n          },\n\n          '&:not(:disabled):checked': {\n            [`&:focus ~ .${FAKE_CHECKBOX_CLASS_NAME}`]: useResponsiveStyle(\n              [contrast] as const,\n              ([contrast = Contrasts.LIGHT]) => ({\n                borderColor: getContrastBorderColor(contrast, error),\n              }),\n            ),\n          },\n        }),\n        className,\n      )}\n    />\n  )\n})\n\ntype BaseProps = {\n  error?: boolean\n  className?: string\n  style?: CSSProperties\n  form?: unknown\n}\n\ntype Props = BaseProps & Omit<ComponentPropsWithoutRef<typeof HiddenCheckbox>, keyof BaseProps>\n\nexport default forwardRef<HTMLInputElement, Props>(function Checkbox(\n  { error, className, style, form, ...restOfProps }: Props,\n  ref,\n) {\n  const { size, contrast, brandColor } = useFormContext()\n\n  return (\n    <div\n      className={cx(\n        useStyle({ position: 'relative' }),\n        useStyle(\n          useResponsiveStyle([size] as const, ([size = Sizes.MEDIUM]) => ({\n            height: getSize(size),\n            width: getSize(size),\n          })),\n        ),\n      )}\n    >\n      <HiddenCheckbox\n        {...restOfProps}\n        type=\"checkbox\"\n        ref={ref}\n        error={error}\n        size={size}\n        contrast={contrast}\n        brandColor={brandColor}\n      />\n      <FakeCheckbox className={className} error={error} contrast={contrast} style={style} />\n    </div>\n  )\n})\n"],"mappings":"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","names":["Color","contrast","HiddenCheckbox","size","getSize","brandColor"]}
+{"version":3,"sources":["../../../../../../../../../src/components/builtin/Form/components/Field/components/Checkbox/index.tsx"],"sourcesContent":["import { forwardRef, CSSProperties, ComponentPropsWithoutRef, ForwardedRef } from 'react'\nimport Color from 'color'\n\nimport { getSizeHeight as getSize } from '../Label'\nimport {\n  useFormContext,\n  Value as FormContextValue,\n  Sizes,\n  Contrasts,\n} from '../../../../context/FormContext'\nimport { getContrastBorderColor, getContrastBackgroundColor } from '../../services/responsiveField'\nimport { colorToString } from '../../../../../../utils/colorToString'\nimport { SwatchValue } from '../../../../../../utils/types'\nimport { useResponsiveStyle } from '../../../../../../utils/responsive-style'\nimport {\n  composeStyles,\n  useStyle,\n} from '../../../../../../../runtimes/react/css-runtime/hooks/use-style'\n\nfunction getCheckmarkColor({\n  swatch: { hue: h, saturation: s, lightness: l },\n  alpha: a,\n}: {\n  swatch: SwatchValue\n  alpha: number\n}) {\n  return Color({ h, s, l }).alpha(a).isLight() ? 'rgba(0, 0, 0, 0.7)' : 'rgba(255, 255, 255, 0.95)'\n}\n\ntype FakeCheckboxProps = {\n  className?: string\n  style?: CSSProperties\n  contrast?: FormContextValue['contrast']\n  error?: boolean\n}\n\nconst FAKE_CHECKBOX_CLASS_NAME = 'fake-checkbox'\n\nfunction FakeCheckbox({ className, style, contrast, error }: FakeCheckboxProps) {\n  const styles = composeStyles(\n    FAKE_CHECKBOX_CLASS_NAME,\n    useStyle({\n      position: 'absolute',\n      width: '100%',\n      height: '100%',\n      borderStyle: 'solid',\n      borderRadius: 4,\n      pointerEvents: 'none',\n      borderWidth: 1,\n    }),\n    useStyle(\n      useResponsiveStyle([contrast] as const, ([contrast = Contrasts.LIGHT]) => ({\n        borderColor: getContrastBorderColor(contrast, error),\n        backgroundColor: getContrastBackgroundColor(contrast),\n      })),\n    ),\n    className,\n  )\n  return (\n    <>\n      {styles.styleElements}\n      <div style={style} className={styles.className} />\n    </>\n  )\n}\n\ntype HiddenCheckboxBaseProps = Partial<\n  Pick<FormContextValue, 'size' | 'brandColor' | 'contrast'>\n> & {\n  error?: boolean\n}\n\ntype HiddenCheckboxProps = HiddenCheckboxBaseProps &\n  Omit<ComponentPropsWithoutRef<'input'>, keyof HiddenCheckboxBaseProps>\n\nconst HiddenCheckbox = forwardRef(function HiddenCheckbox(\n  { size, brandColor, contrast, error, className, ...restOfProps }: HiddenCheckboxProps,\n  ref: ForwardedRef<HTMLInputElement>,\n) {\n  const styles = composeStyles(\n    useStyle({\n      position: 'absolute',\n      opacity: 0,\n      width: '100%',\n      height: '100%',\n      cursor: 'pointer',\n\n      '&:disabled': {\n        cursor: 'no-drop',\n\n        [`& ~ .${FAKE_CHECKBOX_CLASS_NAME}`]: {\n          opacity: 0.5,\n        },\n      },\n\n      [`&:checked ~ .${FAKE_CHECKBOX_CLASS_NAME}`]: {\n        ...useResponsiveStyle(\n          [brandColor] as const,\n          ([{ swatch = { hue: 0, saturation: 0, lightness: 0 }, alpha = 1 } = {}]) => ({\n            backgroundColor: colorToString({ swatch, alpha }),\n          }),\n        ),\n        borderColor: 'transparent',\n\n        '&::after': {\n          content: '\"\"',\n          position: 'absolute',\n          boxSizing: 'content-box',\n          width: '25%',\n          height: '50%',\n          borderStyle: 'solid',\n          ...useResponsiveStyle(\n            [size, brandColor] as const,\n            ([\n              size = Sizes.MEDIUM,\n              { swatch = { hue: 0, saturation: 0, lightness: 0 }, alpha = 1 } = {},\n            ]) => ({\n              borderWidth: getSize(size) * 0.1,\n              borderLeft: 0,\n              borderTop: 0,\n              borderColor: getCheckmarkColor({ swatch, alpha }),\n            }),\n          ),\n          transform: 'rotate(45deg) translate3d(91%, -23%, 0)',\n        },\n      },\n\n      '&:not(:disabled)': {\n        [`&:focus ~ .${FAKE_CHECKBOX_CLASS_NAME}`]: useResponsiveStyle(\n          [brandColor] as const,\n          ([brandColor = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 }]) => ({\n            borderColor: colorToString(brandColor),\n          }),\n        ),\n      },\n\n      '&:not(:disabled):checked': {\n        [`&:focus ~ .${FAKE_CHECKBOX_CLASS_NAME}`]: useResponsiveStyle(\n          [contrast] as const,\n          ([contrast = Contrasts.LIGHT]) => ({\n            borderColor: getContrastBorderColor(contrast, error),\n          }),\n        ),\n      },\n    }),\n    className,\n  )\n  return (\n    <>\n      {styles.styleElements}\n      <input {...restOfProps} ref={ref} className={styles.className} />\n    </>\n  )\n})\n\ntype BaseProps = {\n  error?: boolean\n  className?: string\n  style?: CSSProperties\n  form?: unknown\n}\n\ntype Props = BaseProps & Omit<ComponentPropsWithoutRef<typeof HiddenCheckbox>, keyof BaseProps>\n\nexport default forwardRef<HTMLInputElement, Props>(function Checkbox(\n  { error, className, style, form, ...restOfProps }: Props,\n  ref,\n) {\n  const { size, contrast, brandColor } = useFormContext()\n  const styles = composeStyles(\n    useStyle({ position: 'relative' }),\n    useStyle(\n      useResponsiveStyle([size] as const, ([size = Sizes.MEDIUM]) => ({\n        height: getSize(size),\n        width: getSize(size),\n      })),\n    ),\n  )\n\n  return (\n    <>\n      {styles.styleElements}\n      <div className={styles.className}>\n        <HiddenCheckbox\n          {...restOfProps}\n          type=\"checkbox\"\n          ref={ref}\n          error={error}\n          size={size}\n          contrast={contrast}\n          brandColor={brandColor}\n        />\n        <FakeCheckbox className={className} error={error} contrast={contrast} style={style} />\n      </div>\n    </>\n  )\n})\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA2DI;AA3DJ,mBAAkF;AAClF,mBAAkB;AAElB,mBAAyC;AACzC,yBAKO;AACP,6BAAmE;AACnE,2BAA8B;AAE9B,8BAAmC;AACnC,uBAGO;AAEP,SAAS,kBAAkB;AAAA,EACzB,QAAQ,EAAE,KAAK,GAAG,YAAY,GAAG,WAAW,EAAE;AAAA,EAC9C,OAAO;AACT,GAGG;AACD,aAAO,aAAAA,SAAM,EAAE,GAAG,GAAG,EAAE,CAAC,EAAE,MAAM,CAAC,EAAE,QAAQ,IAAI,uBAAuB;AACxE;AASA,MAAM,2BAA2B;AAEjC,SAAS,aAAa,EAAE,WAAW,OAAO,UAAU,MAAM,GAAsB;AAC9E,QAAM,aAAS;AAAA,IACb;AAAA,QACA,2BAAS;AAAA,MACP,UAAU;AAAA,MACV,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,aAAa;AAAA,MACb,cAAc;AAAA,MACd,eAAe;AAAA,MACf,aAAa;AAAA,IACf,CAAC;AAAA,QACD;AAAA,UACE,4CAAmB,CAAC,QAAQ,GAAY,CAAC,CAACC,YAAW,6BAAU,KAAK,OAAO;AAAA,QACzE,iBAAa,+CAAuBA,WAAU,KAAK;AAAA,QACnD,qBAAiB,mDAA2BA,SAAQ;AAAA,MACtD,EAAE;AAAA,IACJ;AAAA,IACA;AAAA,EACF;AACA,SACE,4EACG;AAAA,WAAO;AAAA,IACR,4CAAC,SAAI,OAAc,WAAW,OAAO,WAAW;AAAA,KAClD;AAEJ;AAWA,MAAM,qBAAiB,yBAAW,SAASC,gBACzC,EAAE,MAAM,YAAY,UAAU,OAAO,WAAW,GAAG,YAAY,GAC/D,KACA;AACA,QAAM,aAAS;AAAA,QACb,2BAAS;AAAA,MACP,UAAU;AAAA,MACV,SAAS;AAAA,MACT,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,QAAQ;AAAA,MAER,cAAc;AAAA,QACZ,QAAQ;AAAA,QAER,CAAC,QAAQ,wBAAwB,EAAE,GAAG;AAAA,UACpC,SAAS;AAAA,QACX;AAAA,MACF;AAAA,MAEA,CAAC,gBAAgB,wBAAwB,EAAE,GAAG;AAAA,QAC5C,OAAG;AAAA,UACD,CAAC,UAAU;AAAA,UACX,CAAC,CAAC,EAAE,SAAS,EAAE,KAAK,GAAG,YAAY,GAAG,WAAW,EAAE,GAAG,QAAQ,EAAE,IAAI,CAAC,CAAC,OAAO;AAAA,YAC3E,qBAAiB,oCAAc,EAAE,QAAQ,MAAM,CAAC;AAAA,UAClD;AAAA,QACF;AAAA,QACA,aAAa;AAAA,QAEb,YAAY;AAAA,UACV,SAAS;AAAA,UACT,UAAU;AAAA,UACV,WAAW;AAAA,UACX,OAAO;AAAA,UACP,QAAQ;AAAA,UACR,aAAa;AAAA,UACb,OAAG;AAAA,YACD,CAAC,MAAM,UAAU;AAAA,YACjB,CAAC;AAAA,cACCC,QAAO,yBAAM;AAAA,cACb,EAAE,SAAS,EAAE,KAAK,GAAG,YAAY,GAAG,WAAW,EAAE,GAAG,QAAQ,EAAE,IAAI,CAAC;AAAA,YACrE,OAAO;AAAA,cACL,iBAAa,aAAAC,eAAQD,KAAI,IAAI;AAAA,cAC7B,YAAY;AAAA,cACZ,WAAW;AAAA,cACX,aAAa,kBAAkB,EAAE,QAAQ,MAAM,CAAC;AAAA,YAClD;AAAA,UACF;AAAA,UACA,WAAW;AAAA,QACb;AAAA,MACF;AAAA,MAEA,oBAAoB;AAAA,QAClB,CAAC,cAAc,wBAAwB,EAAE,OAAG;AAAA,UAC1C,CAAC,UAAU;AAAA,UACX,CAAC,CAACE,cAAa,EAAE,QAAQ,EAAE,KAAK,GAAG,YAAY,GAAG,WAAW,EAAE,GAAG,OAAO,EAAE,CAAC,OAAO;AAAA,YACjF,iBAAa,oCAAcA,WAAU;AAAA,UACvC;AAAA,QACF;AAAA,MACF;AAAA,MAEA,4BAA4B;AAAA,QAC1B,CAAC,cAAc,wBAAwB,EAAE,OAAG;AAAA,UAC1C,CAAC,QAAQ;AAAA,UACT,CAAC,CAACJ,YAAW,6BAAU,KAAK,OAAO;AAAA,YACjC,iBAAa,+CAAuBA,WAAU,KAAK;AAAA,UACrD;AAAA,QACF;AAAA,MACF;AAAA,IACF,CAAC;AAAA,IACD;AAAA,EACF;AACA,SACE,4EACG;AAAA,WAAO;AAAA,IACR,4CAAC,WAAO,GAAG,aAAa,KAAU,WAAW,OAAO,WAAW;AAAA,KACjE;AAEJ,CAAC;AAWD,IAAO,uBAAQ,yBAAoC,SAAS,SAC1D,EAAE,OAAO,WAAW,OAAO,MAAM,GAAG,YAAY,GAChD,KACA;AACA,QAAM,EAAE,MAAM,UAAU,WAAW,QAAI,mCAAe;AACtD,QAAM,aAAS;AAAA,QACb,2BAAS,EAAE,UAAU,WAAW,CAAC;AAAA,QACjC;AAAA,UACE,4CAAmB,CAAC,IAAI,GAAY,CAAC,CAACE,QAAO,yBAAM,MAAM,OAAO;AAAA,QAC9D,YAAQ,aAAAC,eAAQD,KAAI;AAAA,QACpB,WAAO,aAAAC,eAAQD,KAAI;AAAA,MACrB,EAAE;AAAA,IACJ;AAAA,EACF;AAEA,SACE,4EACG;AAAA,WAAO;AAAA,IACR,6CAAC,SAAI,WAAW,OAAO,WACrB;AAAA;AAAA,QAAC;AAAA;AAAA,UACE,GAAG;AAAA,UACJ,MAAK;AAAA,UACL;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA;AAAA,MACF;AAAA,MACA,4CAAC,gBAAa,WAAsB,OAAc,UAAoB,OAAc;AAAA,OACtF;AAAA,KACF;AAEJ,CAAC;","names":["Color","contrast","HiddenCheckbox","size","getSize","brandColor"]}

package/dist/cjs/components/builtin/Form/components/Field/components/CheckboxTableField/index.js

@@ -37,9 +37,8 @@ var import_FormContext = require("../../../../context/FormContext");
 var import_Label = __toESM(require("../Label"));
 var import_Input = require("../Input");
 var import_Checkbox = __toESM(require("../Checkbox"));
-var import_use_style = require("../../../../../../../runtimes/react/use-style");
 var import_responsive_style = require("../../../../../../utils/responsive-style");
-var import_css = require("@emotion/css");
+var import_use_style = require("../../../../../../../runtimes/react/css-runtime/hooks/use-style");
 var CheckboxTableField_default = (0, import_react.forwardRef)(function CheckboxTableField({
   form,
   id,
@@ -55,35 +54,34 @@ var CheckboxTableField_default = (0, import_react.forwardRef)(function CheckboxT
   function handleChange(event) {
     form.setFieldValue(name, event.currentTarget.checked);
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-    import_Label.default,
-    {
-      className: (0, import_css.cx)(
-        (0, import_use_style.useStyle)({ display: "flex", alignItems: "center", margin: 0 }),
-        (0, import_use_style.useStyle)(
-          (0, import_responsive_style.useResponsiveStyle)([size], ([size2 = import_FormContext.Sizes.MEDIUM]) => ({
-            minHeight: (0, import_Input.getSizeHeight)(size2),
-            maxHeight: (0, import_Input.getSizeHeight)(size2)
-          }))
-        )
-      ),
-      htmlFor: id,
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: (0, import_use_style.useStyle)({ marginRight: 8 }), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          import_Checkbox.default,
-          {
-            ...restOfProps,
-            "aria-label": label,
-            checked: value,
-            onChange: handleChange,
-            ref,
-            id,
-            error: error != null
-          }
-        ) }),
-        label
-      ]
-    }
+  const labelStyles = (0, import_use_style.composeStyles)(
+    (0, import_use_style.useStyle)({ display: "flex", alignItems: "center", margin: 0 }),
+    (0, import_use_style.useStyle)(
+      (0, import_responsive_style.useResponsiveStyle)([size], ([size2 = import_FormContext.Sizes.MEDIUM]) => ({
+        minHeight: (0, import_Input.getSizeHeight)(size2),
+        maxHeight: (0, import_Input.getSizeHeight)(size2)
+      }))
+    )
   );
+  const spanStyle = (0, import_use_style.useStyle)({ marginRight: 8 });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    labelStyles.styleElements,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Label.default, { className: labelStyles.className, htmlFor: id, children: [
+      spanStyle.styleElement,
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: spanStyle.className, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_Checkbox.default,
+        {
+          ...restOfProps,
+          "aria-label": label,
+          checked: value,
+          onChange: handleChange,
+          ref,
+          id,
+          error: error != null
+        }
+      ) }),
+      label
+    ] })
+  ] });
 });
 //# sourceMappingURL=index.js.map

package/dist/cjs/components/builtin/Form/components/Field/components/CheckboxTableField/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../../../src/components/builtin/Form/components/Field/components/CheckboxTableField/index.tsx"],"sourcesContent":["import { ForwardedRef, forwardRef, SyntheticEvent } from 'react'\nimport { FormikProps } from 'formik'\n\nimport { useFormContext, Sizes } from '../../../../context/FormContext'\nimport Label from '../Label'\nimport { getSizeHeight as getInputSizeHeight } from '../Input'\nimport Checkbox from '../Checkbox'\nimport { useStyle } from '../../../../../../../runtimes/react/use-style'\nimport { useResponsiveStyle } from '../../../../../../utils/responsive-style'\nimport { cx } from '@emotion/css'\nimport { TableColumn } from '../../../../types'\n\ntype Props = {\n  form: FormikProps<{\n    [key: string]: boolean\n  }>\n  id: string\n  label?: string\n  name: string\n  value?: boolean\n  error?: string\n  hideLabel?: boolean\n  tableColumn?: TableColumn | null\n}\n\nexport default forwardRef(function CheckboxTableField(\n  {\n    form,\n    id,\n    name,\n    label = '',\n    value = false,\n    error,\n    hideLabel,\n    tableColumn,\n    ...restOfProps\n  }: Props,\n  ref: ForwardedRef<HTMLInputElement>,\n) {\n  const { size } = useFormContext()\n\n  function handleChange(event: SyntheticEvent<HTMLInputElement>) {\n    form.setFieldValue(name, event.currentTarget.checked)\n  }\n\n  return (\n    <Label\n      className={cx(\n        useStyle({ display: 'flex', alignItems: 'center', margin: 0 }),\n        useStyle(\n          useResponsiveStyle([size] as const, ([size = Sizes.MEDIUM]) => ({\n            minHeight: getInputSizeHeight(size),\n            maxHeight: getInputSizeHeight(size),\n          })),\n        ),\n      )}\n      htmlFor={id}\n    >\n      <span className={useStyle({ marginRight: 8 })}>\n        <Checkbox\n          {...restOfProps}\n          aria-label={label}\n          checked={value}\n          onChange={handleChange}\n          ref={ref}\n          id={id}\n          error={error != null}\n        />\n      </span>\n      {label}\n    </Label>\n  )\n})\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA8CI;AA9CJ,mBAAyD;AAGzD,yBAAsC;AACtC,mBAAkB;AAClB,mBAAoD;AACpD,sBAAqB;AACrB,uBAAyB;AACzB,8BAAmC;AACnC,iBAAmB;AAgBnB,IAAO,iCAAQ,yBAAW,SAAS,mBACjC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GACA,KACA;AACA,QAAM,EAAE,KAAK,QAAI,mCAAe;AAEhC,WAAS,aAAa,OAAyC;AAC7D,SAAK,cAAc,MAAM,MAAM,cAAc,OAAO;AAAA,EACtD;AAEA,SACE;AAAA,IAAC,aAAAA;AAAA,IAAA;AAAA,MACC,eAAW;AAAA,YACT,2BAAS,EAAE,SAAS,QAAQ,YAAY,UAAU,QAAQ,EAAE,CAAC;AAAA,YAC7D;AAAA,cACE,4CAAmB,CAAC,IAAI,GAAY,CAAC,CAACC,QAAO,yBAAM,MAAM,OAAO;AAAA,YAC9D,eAAW,aAAAC,eAAmBD,KAAI;AAAA,YAClC,eAAW,aAAAC,eAAmBD,KAAI;AAAA,UACpC,EAAE;AAAA,QACJ;AAAA,MACF;AAAA,MACA,SAAS;AAAA,MAET;AAAA,oDAAC,UAAK,eAAW,2BAAS,EAAE,aAAa,EAAE,CAAC,GAC1C;AAAA,UAAC,gBAAAE;AAAA,UAAA;AAAA,YACE,GAAG;AAAA,YACJ,cAAY;AAAA,YACZ,SAAS;AAAA,YACT,UAAU;AAAA,YACV;AAAA,YACA;AAAA,YACA,OAAO,SAAS;AAAA;AAAA,QAClB,GACF;AAAA,QACC;AAAA;AAAA;AAAA,EACH;AAEJ,CAAC;","names":["Label","size","getInputSizeHeight","Checkbox"]}
+{"version":3,"sources":["../../../../../../../../../src/components/builtin/Form/components/Field/components/CheckboxTableField/index.tsx"],"sourcesContent":["import { ForwardedRef, forwardRef, SyntheticEvent } from 'react'\nimport { FormikProps } from 'formik'\n\nimport { useFormContext, Sizes } from '../../../../context/FormContext'\nimport Label from '../Label'\nimport { getSizeHeight as getInputSizeHeight } from '../Input'\nimport Checkbox from '../Checkbox'\nimport { useResponsiveStyle } from '../../../../../../utils/responsive-style'\nimport { TableColumn } from '../../../../types'\nimport {\n  composeStyles,\n  useStyle,\n} from '../../../../../../../runtimes/react/css-runtime/hooks/use-style'\n\ntype Props = {\n  form: FormikProps<{\n    [key: string]: boolean\n  }>\n  id: string\n  label?: string\n  name: string\n  value?: boolean\n  error?: string\n  hideLabel?: boolean\n  tableColumn?: TableColumn | null\n}\n\nexport default forwardRef(function CheckboxTableField(\n  {\n    form,\n    id,\n    name,\n    label = '',\n    value = false,\n    error,\n    hideLabel,\n    tableColumn,\n    ...restOfProps\n  }: Props,\n  ref: ForwardedRef<HTMLInputElement>,\n) {\n  const { size } = useFormContext()\n\n  function handleChange(event: SyntheticEvent<HTMLInputElement>) {\n    form.setFieldValue(name, event.currentTarget.checked)\n  }\n\n  const labelStyles = composeStyles(\n    useStyle({ display: 'flex', alignItems: 'center', margin: 0 }),\n    useStyle(\n      useResponsiveStyle([size] as const, ([size = Sizes.MEDIUM]) => ({\n        minHeight: getInputSizeHeight(size),\n        maxHeight: getInputSizeHeight(size),\n      })),\n    ),\n  )\n  const spanStyle = useStyle({ marginRight: 8 })\n\n  return (\n    <>\n      {labelStyles.styleElements}\n      <Label className={labelStyles.className} htmlFor={id}>\n        {spanStyle.styleElement}\n        <span className={spanStyle.className}>\n          <Checkbox\n            {...restOfProps}\n            aria-label={label}\n            checked={value}\n            onChange={handleChange}\n            ref={ref}\n            id={id}\n            error={error != null}\n          />\n        </span>\n        {label}\n      </Label>\n    </>\n  )\n})\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA2DI;AA3DJ,mBAAyD;AAGzD,yBAAsC;AACtC,mBAAkB;AAClB,mBAAoD;AACpD,sBAAqB;AACrB,8BAAmC;AAEnC,uBAGO;AAeP,IAAO,iCAAQ,yBAAW,SAAS,mBACjC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GACA,KACA;AACA,QAAM,EAAE,KAAK,QAAI,mCAAe;AAEhC,WAAS,aAAa,OAAyC;AAC7D,SAAK,cAAc,MAAM,MAAM,cAAc,OAAO;AAAA,EACtD;AAEA,QAAM,kBAAc;AAAA,QAClB,2BAAS,EAAE,SAAS,QAAQ,YAAY,UAAU,QAAQ,EAAE,CAAC;AAAA,QAC7D;AAAA,UACE,4CAAmB,CAAC,IAAI,GAAY,CAAC,CAACA,QAAO,yBAAM,MAAM,OAAO;AAAA,QAC9D,eAAW,aAAAC,eAAmBD,KAAI;AAAA,QAClC,eAAW,aAAAC,eAAmBD,KAAI;AAAA,MACpC,EAAE;AAAA,IACJ;AAAA,EACF;AACA,QAAM,gBAAY,2BAAS,EAAE,aAAa,EAAE,CAAC;AAE7C,SACE,4EACG;AAAA,gBAAY;AAAA,IACb,6CAAC,aAAAE,SAAA,EAAM,WAAW,YAAY,WAAW,SAAS,IAC/C;AAAA,gBAAU;AAAA,MACX,4CAAC,UAAK,WAAW,UAAU,WACzB;AAAA,QAAC,gBAAAC;AAAA,QAAA;AAAA,UACE,GAAG;AAAA,UACJ,cAAY;AAAA,UACZ,SAAS;AAAA,UACT,UAAU;AAAA,UACV;AAAA,UACA;AAAA,UACA,OAAO,SAAS;AAAA;AAAA,MAClB,GACF;AAAA,MACC;AAAA,OACH;AAAA,KACF;AAEJ,CAAC;","names":["size","getInputSizeHeight","Label","Checkbox"]}

package/dist/cjs/components/builtin/Form/components/Field/components/Input/index.js

@@ -33,12 +33,11 @@ __export(Input_exports, {
 });
 module.exports = __toCommonJS(Input_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_css = require("@emotion/css");
 var import_react = require("react");
-var import_use_style = require("../../../../../../../runtimes/react/use-style");
 var import_responsive_style = require("../../../../../../utils/responsive-style");
 var import_FormContext = require("../../../../context/FormContext");
 var import_responsiveField = __toESM(require("../../services/responsiveField"));
+var import_use_style = require("../../../../../../../runtimes/react/css-runtime/hooks/use-style");
 function getSizeHeight(size) {
   switch (size) {
     case import_FormContext.Sizes.SMALL:
@@ -53,23 +52,20 @@ function getSizeHeight(size) {
 }
 var Input_default = (0, import_react.forwardRef)(function Input({ error = false, form, className, ...restOfProps }, ref) {
   const { shape, size, contrast, brandColor } = (0, import_FormContext.useFormContext)();
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    "input",
-    {
-      ...restOfProps,
-      ref,
-      className: (0, import_css.cx)(
-        (0, import_use_style.useStyle)((0, import_responsiveField.default)({ shape, size, contrast, brandColor, error })),
-        (0, import_use_style.useStyle)(
-          (0, import_responsive_style.useResponsiveStyle)([size], ([size2 = import_FormContext.Sizes.MEDIUM]) => ({
-            minHeight: getSizeHeight(size2),
-            maxHeight: getSizeHeight(size2)
-          }))
-        ),
-        className
-      )
-    }
+  const styles = (0, import_use_style.composeStyles)(
+    (0, import_use_style.useStyle)((0, import_responsiveField.default)({ shape, size, contrast, brandColor, error })),
+    (0, import_use_style.useStyle)(
+      (0, import_responsive_style.useResponsiveStyle)([size], ([size2 = import_FormContext.Sizes.MEDIUM]) => ({
+        minHeight: getSizeHeight(size2),
+        maxHeight: getSizeHeight(size2)
+      }))
+    ),
+    className
   );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    styles.styleElements,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", { ...restOfProps, ref, className: styles.className })
+  ] });
 });
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/cjs/components/builtin/Form/components/Field/components/Input/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../../../src/components/builtin/Form/components/Field/components/Input/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 { Size, useFormContext, Sizes } from '../../../../context/FormContext'\nimport responsiveField from '../../services/responsiveField'\n\nexport function getSizeHeight(size: Size): number {\n  switch (size) {\n    case Sizes.SMALL:\n      return 36\n\n    case Sizes.MEDIUM:\n      return 42\n\n    case Sizes.LARGE:\n      return 48\n\n    default:\n      throw new Error(`Invalid form size \"${size}\"`)\n  }\n}\n\ntype BaseProps = { error?: boolean; form?: unknown }\n\ntype Props = BaseProps & Omit<ComponentPropsWithoutRef<'input'>, keyof BaseProps>\n\nexport default forwardRef(function Input(\n  { error = false, form, className, ...restOfProps }: Props,\n  ref: ForwardedRef<HTMLInputElement>,\n) {\n  const { shape, size, contrast, brandColor } = useFormContext()\n\n  return (\n    <input\n      {...restOfProps}\n      ref={ref}\n      className={cx(\n        useStyle(responsiveField({ shape, size, contrast, brandColor, error })),\n        useStyle(\n          useResponsiveStyle([size] as const, ([size = Sizes.MEDIUM]) => ({\n            minHeight: getSizeHeight(size),\n            maxHeight: getSizeHeight(size),\n          })),\n        ),\n        className,\n      )}\n    />\n  )\n})\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAmCI;AAnCJ,iBAAmB;AACnB,mBAAmE;AACnE,uBAAyB;AAEzB,8BAAmC;AACnC,yBAA4C;AAC5C,6BAA4B;AAErB,SAAS,cAAc,MAAoB;AAChD,UAAQ,MAAM;AAAA,IACZ,KAAK,yBAAM;AACT,aAAO;AAAA,IAET,KAAK,yBAAM;AACT,aAAO;AAAA,IAET,KAAK,yBAAM;AACT,aAAO;AAAA,IAET;AACE,YAAM,IAAI,MAAM,sBAAsB,IAAI,GAAG;AAAA,EACjD;AACF;AAMA,IAAO,oBAAQ,yBAAW,SAAS,MACjC,EAAE,QAAQ,OAAO,MAAM,WAAW,GAAG,YAAY,GACjD,KACA;AACA,QAAM,EAAE,OAAO,MAAM,UAAU,WAAW,QAAI,mCAAe;AAE7D,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA,eAAW;AAAA,YACT,+BAAS,uBAAAA,SAAgB,EAAE,OAAO,MAAM,UAAU,YAAY,MAAM,CAAC,CAAC;AAAA,YACtE;AAAA,cACE,4CAAmB,CAAC,IAAI,GAAY,CAAC,CAACC,QAAO,yBAAM,MAAM,OAAO;AAAA,YAC9D,WAAW,cAAcA,KAAI;AAAA,YAC7B,WAAW,cAAcA,KAAI;AAAA,UAC/B,EAAE;AAAA,QACJ;AAAA,QACA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ,CAAC;","names":["responsiveField","size"]}
+{"version":3,"sources":["../../../../../../../../../src/components/builtin/Form/components/Field/components/Input/index.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, ForwardedRef, forwardRef } from 'react'\n\nimport { useResponsiveStyle } from '../../../../../../utils/responsive-style'\nimport { Size, useFormContext, Sizes } from '../../../../context/FormContext'\nimport responsiveField from '../../services/responsiveField'\nimport {\n  composeStyles,\n  useStyle,\n} from '../../../../../../../runtimes/react/css-runtime/hooks/use-style'\n\nexport function getSizeHeight(size: Size): number {\n  switch (size) {\n    case Sizes.SMALL:\n      return 36\n\n    case Sizes.MEDIUM:\n      return 42\n\n    case Sizes.LARGE:\n      return 48\n\n    default:\n      throw new Error(`Invalid form size \"${size}\"`)\n  }\n}\n\ntype BaseProps = { error?: boolean; form?: unknown }\n\ntype Props = BaseProps & Omit<ComponentPropsWithoutRef<'input'>, keyof BaseProps>\n\nexport default forwardRef(function Input(\n  { error = false, form, className, ...restOfProps }: Props,\n  ref: ForwardedRef<HTMLInputElement>,\n) {\n  const { shape, size, contrast, brandColor } = useFormContext()\n  const styles = composeStyles(\n    useStyle(responsiveField({ shape, size, contrast, brandColor, error })),\n    useStyle(\n      useResponsiveStyle([size] as const, ([size = Sizes.MEDIUM]) => ({\n        minHeight: getSizeHeight(size),\n        maxHeight: getSizeHeight(size),\n      })),\n    ),\n    className,\n  )\n\n  return (\n    <>\n      {styles.styleElements}\n      <input {...restOfProps} ref={ref} className={styles.className} />\n    </>\n  )\n})\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA+CI;AA/CJ,mBAAmE;AAEnE,8BAAmC;AACnC,yBAA4C;AAC5C,6BAA4B;AAC5B,uBAGO;AAEA,SAAS,cAAc,MAAoB;AAChD,UAAQ,MAAM;AAAA,IACZ,KAAK,yBAAM;AACT,aAAO;AAAA,IAET,KAAK,yBAAM;AACT,aAAO;AAAA,IAET,KAAK,yBAAM;AACT,aAAO;AAAA,IAET;AACE,YAAM,IAAI,MAAM,sBAAsB,IAAI,GAAG;AAAA,EACjD;AACF;AAMA,IAAO,oBAAQ,yBAAW,SAAS,MACjC,EAAE,QAAQ,OAAO,MAAM,WAAW,GAAG,YAAY,GACjD,KACA;AACA,QAAM,EAAE,OAAO,MAAM,UAAU,WAAW,QAAI,mCAAe;AAC7D,QAAM,aAAS;AAAA,QACb,+BAAS,uBAAAA,SAAgB,EAAE,OAAO,MAAM,UAAU,YAAY,MAAM,CAAC,CAAC;AAAA,QACtE;AAAA,UACE,4CAAmB,CAAC,IAAI,GAAY,CAAC,CAACC,QAAO,yBAAM,MAAM,OAAO;AAAA,QAC9D,WAAW,cAAcA,KAAI;AAAA,QAC7B,WAAW,cAAcA,KAAI;AAAA,MAC/B,EAAE;AAAA,IACJ;AAAA,IACA;AAAA,EACF;AAEA,SACE,4EACG;AAAA,WAAO;AAAA,IACR,4CAAC,WAAO,GAAG,aAAa,KAAU,WAAW,OAAO,WAAW;AAAA,KACjE;AAEJ,CAAC;","names":["responsiveField","size"]}

package/dist/cjs/components/builtin/Form/components/Field/components/Label/index.js

@@ -25,9 +25,8 @@ module.exports = __toCommonJS(Label_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_colorToString = require("../../../../../../utils/colorToString");
 var import_FormContext = require("../../../../context/FormContext");
-var import_css = require("@emotion/css");
-var import_use_style = require("../../../../../../../runtimes/react/use-style");
 var import_responsive_style = require("../../../../../../utils/responsive-style");
+var import_use_style = require("../../../../../../../runtimes/react/css-runtime/hooks/use-style");
 function getSizeHeight(size) {
   switch (size) {
     case import_FormContext.Sizes.SMALL:
@@ -57,26 +56,24 @@ function Label({
 }) {
   const Component = as ?? "label";
   const { contrast, size, labelTextStyle, labelTextColor } = (0, import_FormContext.useFormContext)();
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    Component,
-    {
-      ...restOfProps,
-      className: (0, import_css.cx)(
-        (0, import_use_style.useStyle)({ display: "block", margin: "0 0 0.25em 0" }),
-        (0, import_use_style.useStyle)((0, import_responsive_style.useResponsiveTextStyle)(labelTextStyle)),
-        (0, import_use_style.useStyle)(
-          (0, import_responsive_style.useResponsiveStyle)(
-            [size, contrast, labelTextColor],
-            ([size2 = import_FormContext.Sizes.MEDIUM, contrast2 = import_FormContext.Contrasts.LIGHT, textColor]) => ({
-              minHeight: getSizeHeight(size2),
-              color: textColor == null ? getContrastColor(contrast2) : (0, import_colorToString.colorToString)(textColor)
-            })
-          )
-        ),
-        className
+  const styles = (0, import_use_style.composeStyles)(
+    (0, import_use_style.useStyle)({ display: "block", margin: "0 0 0.25em 0" }),
+    (0, import_use_style.useStyle)((0, import_responsive_style.useResponsiveTextStyle)(labelTextStyle)),
+    (0, import_use_style.useStyle)(
+      (0, import_responsive_style.useResponsiveStyle)(
+        [size, contrast, labelTextColor],
+        ([size2 = import_FormContext.Sizes.MEDIUM, contrast2 = import_FormContext.Contrasts.LIGHT, textColor]) => ({
+          minHeight: getSizeHeight(size2),
+          color: textColor == null ? getContrastColor(contrast2) : (0, import_colorToString.colorToString)(textColor)
+        })
       )
-    }
+    ),
+    className
   );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    styles.styleElements,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { ...restOfProps, className: styles.className })
+  ] });
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/cjs/components/builtin/Form/components/Field/components/Label/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../../../src/components/builtin/Form/components/Field/components/Label/index.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, ElementType, ReactNode } from 'react'\nimport { colorToString } from '../../../../../../utils/colorToString'\n\nimport { useFormContext, Size, Sizes, Contrast, Contrasts } from '../../../../context/FormContext'\nimport { cx } from '@emotion/css'\nimport { useStyle } from '../../../../../../../runtimes/react/use-style'\nimport {\n  useResponsiveStyle,\n  useResponsiveTextStyle,\n} from '../../../../../../utils/responsive-style'\n\nexport function getSizeHeight(size: Size): number {\n  switch (size) {\n    case Sizes.SMALL:\n      return 14\n\n    case Sizes.MEDIUM:\n      return 18\n\n    case Sizes.LARGE:\n      return 22\n\n    default:\n      throw new Error(`Invalid form size \"${size}\"`)\n  }\n}\n\nfunction getContrastColor(contrast: Contrast): string {\n  switch (contrast) {\n    case Contrasts.LIGHT:\n      return 'rgba(0, 0, 0, 0.8)'\n\n    case Contrasts.DARK:\n      return 'rgba(255, 255, 255, 0.95)'\n\n    default:\n      throw new Error(`Invalid form contrast \"${contrast}\"`)\n  }\n}\n\ntype BaseProps<T extends ElementType> = {\n  as?: T\n}\n\ntype Props<T extends ElementType> = BaseProps<T> &\n  Omit<ComponentPropsWithoutRef<'label'>, keyof BaseProps<T>>\n\nexport default function Label<T extends ElementType = 'label'>({\n  as,\n  className,\n  ...restOfProps\n}: Props<T>): ReactNode {\n  const Component = as ?? 'label'\n  const { contrast, size, labelTextStyle, labelTextColor } = useFormContext()\n\n  return (\n    <Component\n      {...restOfProps}\n      className={cx(\n        useStyle({ display: 'block', margin: '0 0 0.25em 0' }),\n        useStyle(useResponsiveTextStyle(labelTextStyle)),\n        useStyle(\n          useResponsiveStyle(\n            [size, contrast, labelTextColor] as const,\n            ([size = Sizes.MEDIUM, contrast = Contrasts.LIGHT, textColor]) => ({\n              minHeight: getSizeHeight(size),\n              color: textColor == null ? getContrastColor(contrast) : colorToString(textColor),\n            }),\n          ),\n        ),\n        className,\n      )}\n    />\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAwDI;AAvDJ,2BAA8B;AAE9B,yBAAiE;AACjE,iBAAmB;AACnB,uBAAyB;AACzB,8BAGO;AAEA,SAAS,cAAc,MAAoB;AAChD,UAAQ,MAAM;AAAA,IACZ,KAAK,yBAAM;AACT,aAAO;AAAA,IAET,KAAK,yBAAM;AACT,aAAO;AAAA,IAET,KAAK,yBAAM;AACT,aAAO;AAAA,IAET;AACE,YAAM,IAAI,MAAM,sBAAsB,IAAI,GAAG;AAAA,EACjD;AACF;AAEA,SAAS,iBAAiB,UAA4B;AACpD,UAAQ,UAAU;AAAA,IAChB,KAAK,6BAAU;AACb,aAAO;AAAA,IAET,KAAK,6BAAU;AACb,aAAO;AAAA,IAET;AACE,YAAM,IAAI,MAAM,0BAA0B,QAAQ,GAAG;AAAA,EACzD;AACF;AASe,SAAR,MAAwD;AAAA,EAC7D;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAwB;AACtB,QAAM,YAAY,MAAM;AACxB,QAAM,EAAE,UAAU,MAAM,gBAAgB,eAAe,QAAI,mCAAe;AAE1E,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,eAAW;AAAA,YACT,2BAAS,EAAE,SAAS,SAAS,QAAQ,eAAe,CAAC;AAAA,YACrD,+BAAS,gDAAuB,cAAc,CAAC;AAAA,YAC/C;AAAA,cACE;AAAA,YACE,CAAC,MAAM,UAAU,cAAc;AAAA,YAC/B,CAAC,CAACA,QAAO,yBAAM,QAAQC,YAAW,6BAAU,OAAO,SAAS,OAAO;AAAA,cACjE,WAAW,cAAcD,KAAI;AAAA,cAC7B,OAAO,aAAa,OAAO,iBAAiBC,SAAQ,QAAI,oCAAc,SAAS;AAAA,YACjF;AAAA,UACF;AAAA,QACF;AAAA,QACA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;","names":["size","contrast"]}
+{"version":3,"sources":["../../../../../../../../../src/components/builtin/Form/components/Field/components/Label/index.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, ElementType, ReactNode } from 'react'\nimport { colorToString } from '../../../../../../utils/colorToString'\n\nimport { useFormContext, Size, Sizes, Contrast, Contrasts } from '../../../../context/FormContext'\nimport {\n  useResponsiveStyle,\n  useResponsiveTextStyle,\n} from '../../../../../../utils/responsive-style'\nimport {\n  composeStyles,\n  useStyle,\n} from '../../../../../../../runtimes/react/css-runtime/hooks/use-style'\n\nexport function getSizeHeight(size: Size): number {\n  switch (size) {\n    case Sizes.SMALL:\n      return 14\n\n    case Sizes.MEDIUM:\n      return 18\n\n    case Sizes.LARGE:\n      return 22\n\n    default:\n      throw new Error(`Invalid form size \"${size}\"`)\n  }\n}\n\nfunction getContrastColor(contrast: Contrast): string {\n  switch (contrast) {\n    case Contrasts.LIGHT:\n      return 'rgba(0, 0, 0, 0.8)'\n\n    case Contrasts.DARK:\n      return 'rgba(255, 255, 255, 0.95)'\n\n    default:\n      throw new Error(`Invalid form contrast \"${contrast}\"`)\n  }\n}\n\ntype BaseProps<T extends ElementType> = {\n  as?: T\n}\n\ntype Props<T extends ElementType> = BaseProps<T> &\n  Omit<ComponentPropsWithoutRef<'label'>, keyof BaseProps<T>>\n\nexport default function Label<T extends ElementType = 'label'>({\n  as,\n  className,\n  ...restOfProps\n}: Props<T>): ReactNode {\n  const Component = as ?? 'label'\n  const { contrast, size, labelTextStyle, labelTextColor } = useFormContext()\n  const styles = composeStyles(\n    useStyle({ display: 'block', margin: '0 0 0.25em 0' }),\n    useStyle(useResponsiveTextStyle(labelTextStyle)),\n    useStyle(\n      useResponsiveStyle(\n        [size, contrast, labelTextColor] as const,\n        ([size = Sizes.MEDIUM, contrast = Contrasts.LIGHT, textColor]) => ({\n          minHeight: getSizeHeight(size),\n          color: textColor == null ? getContrastColor(contrast) : colorToString(textColor),\n        }),\n      ),\n    ),\n    className,\n  )\n\n  return (\n    <>\n      {styles.styleElements}\n      <Component {...restOfProps} className={styles.className} />\n    </>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAwEI;AAvEJ,2BAA8B;AAE9B,yBAAiE;AACjE,8BAGO;AACP,uBAGO;AAEA,SAAS,cAAc,MAAoB;AAChD,UAAQ,MAAM;AAAA,IACZ,KAAK,yBAAM;AACT,aAAO;AAAA,IAET,KAAK,yBAAM;AACT,aAAO;AAAA,IAET,KAAK,yBAAM;AACT,aAAO;AAAA,IAET;AACE,YAAM,IAAI,MAAM,sBAAsB,IAAI,GAAG;AAAA,EACjD;AACF;AAEA,SAAS,iBAAiB,UAA4B;AACpD,UAAQ,UAAU;AAAA,IAChB,KAAK,6BAAU;AACb,aAAO;AAAA,IAET,KAAK,6BAAU;AACb,aAAO;AAAA,IAET;AACE,YAAM,IAAI,MAAM,0BAA0B,QAAQ,GAAG;AAAA,EACzD;AACF;AASe,SAAR,MAAwD;AAAA,EAC7D;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAwB;AACtB,QAAM,YAAY,MAAM;AACxB,QAAM,EAAE,UAAU,MAAM,gBAAgB,eAAe,QAAI,mCAAe;AAC1E,QAAM,aAAS;AAAA,QACb,2BAAS,EAAE,SAAS,SAAS,QAAQ,eAAe,CAAC;AAAA,QACrD,+BAAS,gDAAuB,cAAc,CAAC;AAAA,QAC/C;AAAA,UACE;AAAA,QACE,CAAC,MAAM,UAAU,cAAc;AAAA,QAC/B,CAAC,CAACA,QAAO,yBAAM,QAAQC,YAAW,6BAAU,OAAO,SAAS,OAAO;AAAA,UACjE,WAAW,cAAcD,KAAI;AAAA,UAC7B,OAAO,aAAa,OAAO,iBAAiBC,SAAQ,QAAI,oCAAc,SAAS;AAAA,QACjF;AAAA,MACF;AAAA,IACF;AAAA,IACA;AAAA,EACF;AAEA,SACE,4EACG;AAAA,WAAO;AAAA,IACR,4CAAC,aAAW,GAAG,aAAa,WAAW,OAAO,WAAW;AAAA,KAC3D;AAEJ;","names":["size","contrast"]}

package/dist/cjs/components/builtin/Form/components/Field/components/MultipleSelectTableField/index.js

@@ -35,30 +35,35 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 var import_Label = __toESM(require("../Label"));
 var import_Checkbox = __toESM(require("../Checkbox"));
-var import_css = require("@emotion/css");
-var import_use_style = require("../../../../../../../runtimes/react/use-style");
+var import_use_style = require("../../../../../../../runtimes/react/css-runtime/hooks/use-style");
 function MainLabel({ className, ...restOfProps }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Label.default, { ...restOfProps, className: (0, import_css.cx)((0, import_use_style.useStyle)({ margin: "0 0 4px 0" }), className) });
+  const styles = (0, import_use_style.composeStyles)((0, import_use_style.useStyle)({ margin: "0 0 4px 0" }), className);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    styles.styleElements,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Label.default, { ...restOfProps, className: styles.className })
+  ] });
 }
 function StyledLabel({ className, ...restOfProps }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_Label.default,
-    {
-      ...restOfProps,
-      className: (0, import_css.cx)(
-        (0, import_use_style.useStyle)({
-          display: "flex",
-          alignItems: "center",
-          margin: "8px 0",
-          "&:last-of-type": { marginBottom: 0 }
-        }),
-        className
-      )
-    }
+  const styles = (0, import_use_style.composeStyles)(
+    (0, import_use_style.useStyle)({
+      display: "flex",
+      alignItems: "center",
+      margin: "8px 0",
+      "&:last-of-type": { marginBottom: 0 }
+    }),
+    className
   );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    styles.styleElements,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Label.default, { ...restOfProps, className: styles.className })
+  ] });
 }
 function CheckboxContainer({ className, ...restOfProps }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { ...restOfProps, className: (0, import_css.cx)((0, import_use_style.useStyle)({ marginRight: 8 }), className) });
+  const styles = (0, import_use_style.composeStyles)((0, import_use_style.useStyle)({ marginRight: 8 }), className);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    styles.styleElements,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { ...restOfProps, className: styles.className })
+  ] });
 }
 var MultipleSelectTableField_default = (0, import_react.forwardRef)(function MultipleSelectTableField({
   tableColumn,