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

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

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

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../../../src/components/builtin/Form/components/Field/components/MultipleSelectTableField/index.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useRef,\n  useImperativeHandle,\n  SyntheticEvent,\n  ComponentPropsWithoutRef,\n} from 'react'\n\nimport Label from '../Label'\nimport Checkbox from '../Checkbox'\nimport { cx } from '@emotion/css'\nimport { useStyle } from '../../../../../../../runtimes/react/use-style'\n\nfunction MainLabel({ className, ...restOfProps }: ComponentPropsWithoutRef<typeof Label>) {\n  return <Label {...restOfProps} className={cx(useStyle({ margin: '0 0 4px 0' }), className)} />\n}\n\nfunction StyledLabel({ className, ...restOfProps }: ComponentPropsWithoutRef<typeof Label>) {\n  return (\n    <Label\n      {...restOfProps}\n      className={cx(\n        useStyle({\n          display: 'flex',\n          alignItems: 'center',\n          margin: '8px 0',\n          '&:last-of-type': { marginBottom: 0 },\n        }),\n        className,\n      )}\n    />\n  )\n}\n\nfunction CheckboxContainer({ className, ...restOfProps }: ComponentPropsWithoutRef<'span'>) {\n  return <span {...restOfProps} className={cx(useStyle({ marginRight: 8 }), className)} />\n}\n\ntype Props = {\n  id: string\n  tableColumn: {\n    options: Array<{\n      id: string\n      name: string\n    }>\n  }\n  value?: Array<string>\n  label?: string\n  onChange: (arg0: SyntheticEvent<HTMLInputElement>) => unknown\n  required?: boolean\n  hideLabel?: boolean\n}\n\nexport default forwardRef<\n  {\n    validity: {\n      valueMissing: boolean\n      typeMismatch: boolean\n    }\n  },\n  Props\n>(function MultipleSelectTableField(\n  {\n    tableColumn,\n    label = '',\n    required,\n    value = [],\n    onChange,\n    hideLabel = false,\n    ...restOfProps\n  }: Props,\n  ref,\n) {\n  const handle = useRef({\n    validity: { valueMissing: required === true && value.length === 0, typeMismatch: false },\n  })\n\n  useImperativeHandle(ref, () => handle.current, [])\n\n  function handleChange(event: SyntheticEvent<HTMLInputElement>) {\n    handle.current.validity.valueMissing =\n      required === true &&\n      !event.currentTarget.checked &&\n      value.filter(v => v !== event.currentTarget.value).length === 0\n\n    onChange(event)\n  }\n\n  return (\n    <div>\n      {!hideLabel && <MainLabel>{label}</MainLabel>}\n      {tableColumn.options.map(option => (\n        <StyledLabel key={option.id} htmlFor={option.id}>\n          <CheckboxContainer>\n            <Checkbox\n              {...restOfProps}\n              aria-label={label}\n              onChange={handleChange}\n              checked={value.includes(option.name)}\n              id={option.id}\n              value={option.name}\n            />\n          </CheckboxContainer>\n          {option.name}\n        </StyledLabel>\n      ))}\n    </div>\n  )\n})\n"],"mappings":"AAcS,cA8ED,YA9EC;AAdT;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAGK;AAEP,OAAO,WAAW;AAClB,OAAO,cAAc;AACrB,SAAS,UAAU;AACnB,SAAS,gBAAgB;AAEzB,SAAS,UAAU,EAAE,WAAW,GAAG,YAAY,GAA2C;AACxF,SAAO,oBAAC,SAAO,GAAG,aAAa,WAAW,GAAG,SAAS,EAAE,QAAQ,YAAY,CAAC,GAAG,SAAS,GAAG;AAC9F;AAEA,SAAS,YAAY,EAAE,WAAW,GAAG,YAAY,GAA2C;AAC1F,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW;AAAA,QACT,SAAS;AAAA,UACP,SAAS;AAAA,UACT,YAAY;AAAA,UACZ,QAAQ;AAAA,UACR,kBAAkB,EAAE,cAAc,EAAE;AAAA,QACtC,CAAC;AAAA,QACD;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;AAEA,SAAS,kBAAkB,EAAE,WAAW,GAAG,YAAY,GAAqC;AAC1F,SAAO,oBAAC,UAAM,GAAG,aAAa,WAAW,GAAG,SAAS,EAAE,aAAa,EAAE,CAAC,GAAG,SAAS,GAAG;AACxF;AAiBA,IAAO,mCAAQ,WAQb,SAAS,yBACT;AAAA,EACE;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA,QAAQ,CAAC;AAAA,EACT;AAAA,EACA,YAAY;AAAA,EACZ,GAAG;AACL,GACA,KACA;AACA,QAAM,SAAS,OAAO;AAAA,IACpB,UAAU,EAAE,cAAc,aAAa,QAAQ,MAAM,WAAW,GAAG,cAAc,MAAM;AAAA,EACzF,CAAC;AAED,sBAAoB,KAAK,MAAM,OAAO,SAAS,CAAC,CAAC;AAEjD,WAAS,aAAa,OAAyC;AAC7D,WAAO,QAAQ,SAAS,eACtB,aAAa,QACb,CAAC,MAAM,cAAc,WACrB,MAAM,OAAO,OAAK,MAAM,MAAM,cAAc,KAAK,EAAE,WAAW;AAEhE,aAAS,KAAK;AAAA,EAChB;AAEA,SACE,qBAAC,SACE;AAAA,KAAC,aAAa,oBAAC,aAAW,iBAAM;AAAA,IAChC,YAAY,QAAQ,IAAI,YACvB,qBAAC,eAA4B,SAAS,OAAO,IAC3C;AAAA,0BAAC,qBACC;AAAA,QAAC;AAAA;AAAA,UACE,GAAG;AAAA,UACJ,cAAY;AAAA,UACZ,UAAU;AAAA,UACV,SAAS,MAAM,SAAS,OAAO,IAAI;AAAA,UACnC,IAAI,OAAO;AAAA,UACX,OAAO,OAAO;AAAA;AAAA,MAChB,GACF;AAAA,MACC,OAAO;AAAA,SAXQ,OAAO,EAYzB,CACD;AAAA,KACH;AAEJ,CAAC;","names":[]}
+{"version":3,"sources":["../../../../../../../../../src/components/builtin/Form/components/Field/components/MultipleSelectTableField/index.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useRef,\n  useImperativeHandle,\n  SyntheticEvent,\n  ComponentPropsWithoutRef,\n} from 'react'\n\nimport Label from '../Label'\nimport Checkbox from '../Checkbox'\nimport {\n  composeStyles,\n  useStyle,\n} from '../../../../../../../runtimes/react/css-runtime/hooks/use-style'\n\nfunction MainLabel({ className, ...restOfProps }: ComponentPropsWithoutRef<typeof Label>) {\n  const styles = composeStyles(useStyle({ margin: '0 0 4px 0' }), className)\n  return (\n    <>\n      {styles.styleElements}\n      <Label {...restOfProps} className={styles.className} />\n    </>\n  )\n}\n\nfunction StyledLabel({ className, ...restOfProps }: ComponentPropsWithoutRef<typeof Label>) {\n  const styles = composeStyles(\n    useStyle({\n      display: 'flex',\n      alignItems: 'center',\n      margin: '8px 0',\n      '&:last-of-type': { marginBottom: 0 },\n    }),\n    className,\n  )\n  return (\n    <>\n      {styles.styleElements}\n      <Label {...restOfProps} className={styles.className} />\n    </>\n  )\n}\n\nfunction CheckboxContainer({ className, ...restOfProps }: ComponentPropsWithoutRef<'span'>) {\n  const styles = composeStyles(useStyle({ marginRight: 8 }), className)\n  return (\n    <>\n      {styles.styleElements}\n      <span {...restOfProps} 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?: Array<string>\n  label?: string\n  onChange: (arg0: SyntheticEvent<HTMLInputElement>) => unknown\n  required?: boolean\n  hideLabel?: boolean\n}\n\nexport default forwardRef<\n  {\n    validity: {\n      valueMissing: boolean\n      typeMismatch: boolean\n    }\n  },\n  Props\n>(function MultipleSelectTableField(\n  {\n    tableColumn,\n    label = '',\n    required,\n    value = [],\n    onChange,\n    hideLabel = false,\n    ...restOfProps\n  }: Props,\n  ref,\n) {\n  const handle = useRef({\n    validity: { valueMissing: required === true && value.length === 0, typeMismatch: false },\n  })\n\n  useImperativeHandle(ref, () => handle.current, [])\n\n  function handleChange(event: SyntheticEvent<HTMLInputElement>) {\n    handle.current.validity.valueMissing =\n      required === true &&\n      !event.currentTarget.checked &&\n      value.filter(v => v !== event.currentTarget.value).length === 0\n\n    onChange(event)\n  }\n\n  return (\n    <div>\n      {!hideLabel && <MainLabel>{label}</MainLabel>}\n      {tableColumn.options.map(option => (\n        <StyledLabel key={option.id} htmlFor={option.id}>\n          <CheckboxContainer>\n            <Checkbox\n              {...restOfProps}\n              aria-label={label}\n              onChange={handleChange}\n              checked={value.includes(option.name)}\n              id={option.id}\n              value={option.name}\n            />\n          </CheckboxContainer>\n          {option.name}\n        </StyledLabel>\n      ))}\n    </div>\n  )\n})\n"],"mappings":"AAkBI,mBAEE,KAFF;AAlBJ;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAGK;AAEP,OAAO,WAAW;AAClB,OAAO,cAAc;AACrB;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAEP,SAAS,UAAU,EAAE,WAAW,GAAG,YAAY,GAA2C;AACxF,QAAM,SAAS,cAAc,SAAS,EAAE,QAAQ,YAAY,CAAC,GAAG,SAAS;AACzE,SACE,iCACG;AAAA,WAAO;AAAA,IACR,oBAAC,SAAO,GAAG,aAAa,WAAW,OAAO,WAAW;AAAA,KACvD;AAEJ;AAEA,SAAS,YAAY,EAAE,WAAW,GAAG,YAAY,GAA2C;AAC1F,QAAM,SAAS;AAAA,IACb,SAAS;AAAA,MACP,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,QAAQ;AAAA,MACR,kBAAkB,EAAE,cAAc,EAAE;AAAA,IACtC,CAAC;AAAA,IACD;AAAA,EACF;AACA,SACE,iCACG;AAAA,WAAO;AAAA,IACR,oBAAC,SAAO,GAAG,aAAa,WAAW,OAAO,WAAW;AAAA,KACvD;AAEJ;AAEA,SAAS,kBAAkB,EAAE,WAAW,GAAG,YAAY,GAAqC;AAC1F,QAAM,SAAS,cAAc,SAAS,EAAE,aAAa,EAAE,CAAC,GAAG,SAAS;AACpE,SACE,iCACG;AAAA,WAAO;AAAA,IACR,oBAAC,UAAM,GAAG,aAAa,WAAW,OAAO,WAAW;AAAA,KACtD;AAEJ;AAiBA,IAAO,mCAAQ,WAQb,SAAS,yBACT;AAAA,EACE;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA,QAAQ,CAAC;AAAA,EACT;AAAA,EACA,YAAY;AAAA,EACZ,GAAG;AACL,GACA,KACA;AACA,QAAM,SAAS,OAAO;AAAA,IACpB,UAAU,EAAE,cAAc,aAAa,QAAQ,MAAM,WAAW,GAAG,cAAc,MAAM;AAAA,EACzF,CAAC;AAED,sBAAoB,KAAK,MAAM,OAAO,SAAS,CAAC,CAAC;AAEjD,WAAS,aAAa,OAAyC;AAC7D,WAAO,QAAQ,SAAS,eACtB,aAAa,QACb,CAAC,MAAM,cAAc,WACrB,MAAM,OAAO,OAAK,MAAM,MAAM,cAAc,KAAK,EAAE,WAAW;AAEhE,aAAS,KAAK;AAAA,EAChB;AAEA,SACE,qBAAC,SACE;AAAA,KAAC,aAAa,oBAAC,aAAW,iBAAM;AAAA,IAChC,YAAY,QAAQ,IAAI,YACvB,qBAAC,eAA4B,SAAS,OAAO,IAC3C;AAAA,0BAAC,qBACC;AAAA,QAAC;AAAA;AAAA,UACE,GAAG;AAAA,UACJ,cAAY;AAAA,UACZ,UAAU;AAAA,UACV,SAAS,MAAM,SAAS,OAAO,IAAI;AAAA,UACnC,IAAI,OAAO;AAAA,UACX,OAAO,OAAO;AAAA;AAAA,MAChB,GACF;AAAA,MACC,OAAO;AAAA,SAXQ,OAAO,EAYzB,CACD;AAAA,KACH;AAEJ,CAAC;","names":[]}

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

@@ -3,59 +3,59 @@ import { useFormContext, Sizes, Shapes } from "../../../../context/FormContext";
 import { getSizeHeight as getLabelSizeHeight } from "../Label";
 import { getSizeHeight as getInputSizeHeight } from "../Input";
 import { getShapeBorderRadius } from "../../services/responsiveField";
-import { useStyle } from "../../../../../../../runtimes/react/use-style";
 import { useResponsiveStyle } from "../../../../../../utils/responsive-style";
-import { cx } from "@emotion/css";
+import {
+  composeStyles,
+  useStyle
+} from "../../../../../../../runtimes/react/css-runtime/hooks/use-style";
 function Label({ size }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: cx(
-        useStyle({
-          display: "block",
-          maxWidth: 120,
-          minWidth: 60,
-          borderRadius: 2,
-          backgroundColor: "#5f49f4",
-          opacity: 0.4
-        }),
-        useStyle(
-          useResponsiveStyle([size], ([size2 = Sizes.MEDIUM]) => ({
-            margin: `calc(0.25 * ${getLabelSizeHeight(size2)}px + 2px) 0`,
-            minHeight: 0.5 * getLabelSizeHeight(size2),
-            maxHeight: 0.5 * getLabelSizeHeight(size2)
-          }))
-        )
-      )
-    }
+  const styles = composeStyles(
+    useStyle({
+      display: "block",
+      maxWidth: 120,
+      minWidth: 60,
+      borderRadius: 2,
+      backgroundColor: "#5f49f4",
+      opacity: 0.4
+    }),
+    useStyle(
+      useResponsiveStyle([size], ([size2 = Sizes.MEDIUM]) => ({
+        margin: `calc(0.25 * ${getLabelSizeHeight(size2)}px + 2px) 0`,
+        minHeight: 0.5 * getLabelSizeHeight(size2),
+        maxHeight: 0.5 * getLabelSizeHeight(size2)
+      }))
+    )
   );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    styles.styleElements,
+    /* @__PURE__ */ jsx("div", { className: styles.className })
+  ] });
 }
 function Input({ shape, size }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: cx(
-        useStyle({
-          display: "block",
-          width: "100%",
-          borderWidth: 2,
-          borderStyle: "solid",
-          borderColor: "#5f49f4",
-          opacity: 0.4
-        }),
-        useStyle(
-          useResponsiveStyle(
-            [shape, size],
-            ([shape2 = Shapes.ROUNDED, size2 = Sizes.MEDIUM]) => ({
-              minHeight: getInputSizeHeight(size2),
-              maxHeight: getInputSizeHeight(size2),
-              borderRadius: getShapeBorderRadius(shape2)
-            })
-          )
-        )
+  const styles = composeStyles(
+    useStyle({
+      display: "block",
+      width: "100%",
+      borderWidth: 2,
+      borderStyle: "solid",
+      borderColor: "#5f49f4",
+      opacity: 0.4
+    }),
+    useStyle(
+      useResponsiveStyle(
+        [shape, size],
+        ([shape2 = Shapes.ROUNDED, size2 = Sizes.MEDIUM]) => ({
+          minHeight: getInputSizeHeight(size2),
+          maxHeight: getInputSizeHeight(size2),
+          borderRadius: getShapeBorderRadius(shape2)
+        })
       )
-    }
+    )
   );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    styles.styleElements,
+    /* @__PURE__ */ jsx("div", { className: styles.className })
+  ] });
 }
 function PlaceholderTableField() {
   const { size, shape } = useFormContext();

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../../../src/components/builtin/Form/components/Field/components/PlaceholderTableField/index.tsx"],"sourcesContent":["import { ReactNode } from 'react'\nimport { useFormContext, Sizes, Shapes, Value } from '../../../../context/FormContext'\nimport { getSizeHeight as getLabelSizeHeight } from '../Label'\nimport { getSizeHeight as getInputSizeHeight } from '../Input'\nimport { getShapeBorderRadius } from '../../services/responsiveField'\nimport { useStyle } from '../../../../../../../runtimes/react/use-style'\nimport { useResponsiveStyle } from '../../../../../../utils/responsive-style'\nimport { cx } from '@emotion/css'\n\nfunction Label({ size }: Pick<Value, 'size'>) {\n  return (\n    <div\n      className={cx(\n        useStyle({\n          display: 'block',\n          maxWidth: 120,\n          minWidth: 60,\n          borderRadius: 2,\n          backgroundColor: '#5f49f4',\n          opacity: 0.4,\n        }),\n        useStyle(\n          useResponsiveStyle([size] as const, ([size = Sizes.MEDIUM]) => ({\n            margin: `calc(0.25 * ${getLabelSizeHeight(size)}px + 2px) 0`,\n            minHeight: 0.5 * getLabelSizeHeight(size),\n            maxHeight: 0.5 * getLabelSizeHeight(size),\n          })),\n        ),\n      )}\n    />\n  )\n}\n\nfunction Input({ shape, size }: Pick<Value, 'shape' | 'size'>) {\n  return (\n    <div\n      className={cx(\n        useStyle({\n          display: 'block',\n          width: '100%',\n          borderWidth: 2,\n          borderStyle: 'solid',\n          borderColor: '#5f49f4',\n          opacity: 0.4,\n        }),\n        useStyle(\n          useResponsiveStyle(\n            [shape, size] as const,\n            ([shape = Shapes.ROUNDED, size = Sizes.MEDIUM]) => ({\n              minHeight: getInputSizeHeight(size),\n              maxHeight: getInputSizeHeight(size),\n              borderRadius: getShapeBorderRadius(shape),\n            }),\n          ),\n        ),\n      )}\n    />\n  )\n}\n\nexport default function PlaceholderTableField(): ReactNode {\n  const { size, shape } = useFormContext()\n\n  return (\n    <>\n      <Label size={size} />\n      <Input shape={shape} size={size} />\n    </>\n  )\n}\n"],"mappings":"AAWI,SAqDA,UArDA,KAqDA,YArDA;AAVJ,SAAS,gBAAgB,OAAO,cAAqB;AACrD,SAAS,iBAAiB,0BAA0B;AACpD,SAAS,iBAAiB,0BAA0B;AACpD,SAAS,4BAA4B;AACrC,SAAS,gBAAgB;AACzB,SAAS,0BAA0B;AACnC,SAAS,UAAU;AAEnB,SAAS,MAAM,EAAE,KAAK,GAAwB;AAC5C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT,SAAS;AAAA,UACP,SAAS;AAAA,UACT,UAAU;AAAA,UACV,UAAU;AAAA,UACV,cAAc;AAAA,UACd,iBAAiB;AAAA,UACjB,SAAS;AAAA,QACX,CAAC;AAAA,QACD;AAAA,UACE,mBAAmB,CAAC,IAAI,GAAY,CAAC,CAACA,QAAO,MAAM,MAAM,OAAO;AAAA,YAC9D,QAAQ,eAAe,mBAAmBA,KAAI,CAAC;AAAA,YAC/C,WAAW,MAAM,mBAAmBA,KAAI;AAAA,YACxC,WAAW,MAAM,mBAAmBA,KAAI;AAAA,UAC1C,EAAE;AAAA,QACJ;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;AAEA,SAAS,MAAM,EAAE,OAAO,KAAK,GAAkC;AAC7D,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT,SAAS;AAAA,UACP,SAAS;AAAA,UACT,OAAO;AAAA,UACP,aAAa;AAAA,UACb,aAAa;AAAA,UACb,aAAa;AAAA,UACb,SAAS;AAAA,QACX,CAAC;AAAA,QACD;AAAA,UACE;AAAA,YACE,CAAC,OAAO,IAAI;AAAA,YACZ,CAAC,CAACC,SAAQ,OAAO,SAASD,QAAO,MAAM,MAAM,OAAO;AAAA,cAClD,WAAW,mBAAmBA,KAAI;AAAA,cAClC,WAAW,mBAAmBA,KAAI;AAAA,cAClC,cAAc,qBAAqBC,MAAK;AAAA,YAC1C;AAAA,UACF;AAAA,QACF;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;AAEe,SAAR,wBAAoD;AACzD,QAAM,EAAE,MAAM,MAAM,IAAI,eAAe;AAEvC,SACE,iCACE;AAAA,wBAAC,SAAM,MAAY;AAAA,IACnB,oBAAC,SAAM,OAAc,MAAY;AAAA,KACnC;AAEJ;","names":["size","shape"]}
+{"version":3,"sources":["../../../../../../../../../src/components/builtin/Form/components/Field/components/PlaceholderTableField/index.tsx"],"sourcesContent":["import { ReactNode } from 'react'\nimport { useFormContext, Sizes, Shapes, Value } from '../../../../context/FormContext'\nimport { getSizeHeight as getLabelSizeHeight } from '../Label'\nimport { getSizeHeight as getInputSizeHeight } from '../Input'\nimport { getShapeBorderRadius } from '../../services/responsiveField'\nimport { useResponsiveStyle } from '../../../../../../utils/responsive-style'\nimport {\n  composeStyles,\n  useStyle,\n} from '../../../../../../../runtimes/react/css-runtime/hooks/use-style'\n\nfunction Label({ size }: Pick<Value, 'size'>) {\n  const styles = composeStyles(\n    useStyle({\n      display: 'block',\n      maxWidth: 120,\n      minWidth: 60,\n      borderRadius: 2,\n      backgroundColor: '#5f49f4',\n      opacity: 0.4,\n    }),\n    useStyle(\n      useResponsiveStyle([size] as const, ([size = Sizes.MEDIUM]) => ({\n        margin: `calc(0.25 * ${getLabelSizeHeight(size)}px + 2px) 0`,\n        minHeight: 0.5 * getLabelSizeHeight(size),\n        maxHeight: 0.5 * getLabelSizeHeight(size),\n      })),\n    ),\n  )\n  return (\n    <>\n      {styles.styleElements}\n      <div className={styles.className} />\n    </>\n  )\n}\n\nfunction Input({ shape, size }: Pick<Value, 'shape' | 'size'>) {\n  const styles = composeStyles(\n    useStyle({\n      display: 'block',\n      width: '100%',\n      borderWidth: 2,\n      borderStyle: 'solid',\n      borderColor: '#5f49f4',\n      opacity: 0.4,\n    }),\n    useStyle(\n      useResponsiveStyle(\n        [shape, size] as const,\n        ([shape = Shapes.ROUNDED, size = Sizes.MEDIUM]) => ({\n          minHeight: getInputSizeHeight(size),\n          maxHeight: getInputSizeHeight(size),\n          borderRadius: getShapeBorderRadius(shape),\n        }),\n      ),\n    ),\n  )\n  return (\n    <>\n      {styles.styleElements}\n      <div className={styles.className} />\n    </>\n  )\n}\n\nexport default function PlaceholderTableField(): ReactNode {\n  const { size, shape } = useFormContext()\n\n  return (\n    <>\n      <Label size={size} />\n      <Input shape={shape} size={size} />\n    </>\n  )\n}\n"],"mappings":"AA8BI,mBAEE,KAFF;AA7BJ,SAAS,gBAAgB,OAAO,cAAqB;AACrD,SAAS,iBAAiB,0BAA0B;AACpD,SAAS,iBAAiB,0BAA0B;AACpD,SAAS,4BAA4B;AACrC,SAAS,0BAA0B;AACnC;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAEP,SAAS,MAAM,EAAE,KAAK,GAAwB;AAC5C,QAAM,SAAS;AAAA,IACb,SAAS;AAAA,MACP,SAAS;AAAA,MACT,UAAU;AAAA,MACV,UAAU;AAAA,MACV,cAAc;AAAA,MACd,iBAAiB;AAAA,MACjB,SAAS;AAAA,IACX,CAAC;AAAA,IACD;AAAA,MACE,mBAAmB,CAAC,IAAI,GAAY,CAAC,CAACA,QAAO,MAAM,MAAM,OAAO;AAAA,QAC9D,QAAQ,eAAe,mBAAmBA,KAAI,CAAC;AAAA,QAC/C,WAAW,MAAM,mBAAmBA,KAAI;AAAA,QACxC,WAAW,MAAM,mBAAmBA,KAAI;AAAA,MAC1C,EAAE;AAAA,IACJ;AAAA,EACF;AACA,SACE,iCACG;AAAA,WAAO;AAAA,IACR,oBAAC,SAAI,WAAW,OAAO,WAAW;AAAA,KACpC;AAEJ;AAEA,SAAS,MAAM,EAAE,OAAO,KAAK,GAAkC;AAC7D,QAAM,SAAS;AAAA,IACb,SAAS;AAAA,MACP,SAAS;AAAA,MACT,OAAO;AAAA,MACP,aAAa;AAAA,MACb,aAAa;AAAA,MACb,aAAa;AAAA,MACb,SAAS;AAAA,IACX,CAAC;AAAA,IACD;AAAA,MACE;AAAA,QACE,CAAC,OAAO,IAAI;AAAA,QACZ,CAAC,CAACC,SAAQ,OAAO,SAASD,QAAO,MAAM,MAAM,OAAO;AAAA,UAClD,WAAW,mBAAmBA,KAAI;AAAA,UAClC,WAAW,mBAAmBA,KAAI;AAAA,UAClC,cAAc,qBAAqBC,MAAK;AAAA,QAC1C;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACA,SACE,iCACG;AAAA,WAAO;AAAA,IACR,oBAAC,SAAI,WAAW,OAAO,WAAW;AAAA,KACpC;AAEJ;AAEe,SAAR,wBAAoD;AACzD,QAAM,EAAE,MAAM,MAAM,IAAI,eAAe;AAEvC,SACE,iCACE;AAAA,wBAAC,SAAM,MAAY;AAAA,IACnB,oBAAC,SAAM,OAAc,MAAY;AAAA,KACnC;AAEJ;","names":["size","shape"]}

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

@@ -1,13 +1,15 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import Color from "color";
 import { getSizeHeight as getSize } from "../Label";
 import { useFormContext, Sizes, Contrasts } from "../../../../context/FormContext";
 import { getContrastBorderColor, getContrastBackgroundColor } from "../../services/responsiveField";
 import { colorToString } from "../../../../../../utils/colorToString";
-import { cx } from "@emotion/css";
 import { useResponsiveStyle } from "../../../../../../utils/responsive-style";
-import { useStyle } from "../../../../../../../runtimes/react/use-style";
+import {
+  composeStyles,
+  useStyle
+} from "../../../../../../../runtimes/react/css-runtime/hooks/use-style";
 function getCheckmarkColor({
   swatch: { hue: h, saturation: s, lightness: l } = { hue: 0, saturation: 0, lightness: 0 },
   alpha: a = 1
@@ -15,118 +17,110 @@ function getCheckmarkColor({
   return Color({ h, s, l }).alpha(a).isLight() ? "rgba(0, 0, 0, 0.7)" : "rgba(255, 255, 255, 0.95)";
 }
 function Container({ size, className, ...restOfProps }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      ...restOfProps,
-      className: cx(
-        useStyle({ position: "relative" }),
-        useStyle(
-          useResponsiveStyle([size], ([size2 = Sizes.MEDIUM]) => ({
-            height: getSize(size2),
-            width: getSize(size2)
-          }))
-        ),
-        className
-      )
-    }
+  const styles = composeStyles(
+    useStyle({ position: "relative" }),
+    useStyle(
+      useResponsiveStyle([size], ([size2 = Sizes.MEDIUM]) => ({
+        height: getSize(size2),
+        width: getSize(size2)
+      }))
+    ),
+    className
   );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    styles.styleElements,
+    /* @__PURE__ */ jsx("div", { ...restOfProps, className: styles.className })
+  ] });
 }
 const FAKE_RADIO_BUTTON_CLASS_NAME = "fake-radio-button";
 function FakeRadioButton({ className, contrast, error, ...restOfProps }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      ...restOfProps,
-      className: cx(
-        FAKE_RADIO_BUTTON_CLASS_NAME,
-        useStyle({
-          position: "absolute",
-          width: "100%",
-          height: "100%",
-          borderStyle: "solid",
-          borderRadius: "50%",
-          pointerEvents: "none",
-          borderWidth: 1
-        }),
-        useStyle(
-          useResponsiveStyle([contrast], ([contrast2 = Contrasts.LIGHT]) => ({
-            borderColor: getContrastBorderColor(contrast2, error),
-            backgroundColor: getContrastBackgroundColor(contrast2)
-          }))
-        ),
-        className
-      )
-    }
+  const styles = composeStyles(
+    FAKE_RADIO_BUTTON_CLASS_NAME,
+    useStyle({
+      position: "absolute",
+      width: "100%",
+      height: "100%",
+      borderStyle: "solid",
+      borderRadius: "50%",
+      pointerEvents: "none",
+      borderWidth: 1
+    }),
+    useStyle(
+      useResponsiveStyle([contrast], ([contrast2 = Contrasts.LIGHT]) => ({
+        borderColor: getContrastBorderColor(contrast2, error),
+        backgroundColor: getContrastBackgroundColor(contrast2)
+      }))
+    ),
+    className
   );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    styles.styleElements,
+    /* @__PURE__ */ jsx("div", { ...restOfProps, className: styles.className })
+  ] });
 }
 const HiddenRadioButton = forwardRef(function HiddenRadioButton2({ className, brandColor, contrast, error, ...restOfProps }, ref) {
-  return /* @__PURE__ */ jsx(
-    "input",
-    {
-      ...restOfProps,
-      type: "radio",
-      className: cx(
-        useStyle({
+  const styles = composeStyles(
+    useStyle({
+      position: "absolute",
+      opacity: 0,
+      width: "100%",
+      height: "100%",
+      cursor: "pointer",
+      "&:disabled": {
+        cursor: "no-drop",
+        [`& ~ .${FAKE_RADIO_BUTTON_CLASS_NAME}`]: {
+          opacity: 0.5
+        }
+      },
+      [`&:checked ~ .${FAKE_RADIO_BUTTON_CLASS_NAME}`]: {
+        ...useResponsiveStyle(
+          [brandColor],
+          ([brandColor2 = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 }]) => ({
+            backgroundColor: colorToString(brandColor2)
+          })
+        ),
+        borderColor: "transparent",
+        "&::after": {
+          content: '""',
           position: "absolute",
-          opacity: 0,
-          width: "100%",
-          height: "100%",
-          cursor: "pointer",
-          "&:disabled": {
-            cursor: "no-drop",
-            [`& ~ .${FAKE_RADIO_BUTTON_CLASS_NAME}`]: {
-              opacity: 0.5
-            }
-          },
-          [`&:checked ~ .${FAKE_RADIO_BUTTON_CLASS_NAME}`]: {
-            ...useResponsiveStyle(
-              [brandColor],
-              ([brandColor2 = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 }]) => ({
-                backgroundColor: colorToString(brandColor2)
-              })
-            ),
-            borderColor: "transparent",
-            "&::after": {
-              content: '""',
-              position: "absolute",
-              boxSizing: "content-box",
-              top: "50%",
-              left: "50%",
-              width: "50%",
-              height: "50%",
-              borderRadius: "50%",
-              transform: "translate(-50%, -50%)",
-              ...useResponsiveStyle(
-                [brandColor],
-                ([brandColor2 = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 }]) => ({
-                  backgroundColor: getCheckmarkColor(brandColor2)
-                })
-              )
-            }
-          },
-          "&:not(:disabled)": {
-            [`&:focus ~ .${FAKE_RADIO_BUTTON_CLASS_NAME}`]: useResponsiveStyle(
-              [brandColor],
-              ([brandColor2 = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 }]) => ({
-                borderColor: colorToString(brandColor2)
-              })
-            )
-          },
-          "&:not(:disabled):checked": {
-            [`&:focus ~ .${FAKE_RADIO_BUTTON_CLASS_NAME}`]: useResponsiveStyle(
-              [contrast],
-              ([contrast2 = Contrasts.LIGHT]) => ({
-                borderColor: getContrastBorderColor(contrast2, error)
-              })
-            )
-          }
-        }),
-        className
-      ),
-      ref
-    }
+          boxSizing: "content-box",
+          top: "50%",
+          left: "50%",
+          width: "50%",
+          height: "50%",
+          borderRadius: "50%",
+          transform: "translate(-50%, -50%)",
+          ...useResponsiveStyle(
+            [brandColor],
+            ([brandColor2 = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 }]) => ({
+              backgroundColor: getCheckmarkColor(brandColor2)
+            })
+          )
+        }
+      },
+      "&:not(:disabled)": {
+        [`&:focus ~ .${FAKE_RADIO_BUTTON_CLASS_NAME}`]: useResponsiveStyle(
+          [brandColor],
+          ([brandColor2 = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 }]) => ({
+            borderColor: colorToString(brandColor2)
+          })
+        )
+      },
+      "&:not(:disabled):checked": {
+        [`&:focus ~ .${FAKE_RADIO_BUTTON_CLASS_NAME}`]: useResponsiveStyle(
+          [contrast],
+          ([contrast2 = Contrasts.LIGHT]) => ({
+            borderColor: getContrastBorderColor(contrast2, error)
+          })
+        )
+      }
+    }),
+    className
   );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    styles.styleElements,
+    /* @__PURE__ */ jsx("input", { ...restOfProps, type: "radio", className: styles.className, ref })
+  ] });
 });
 var RadioButton_default = forwardRef(function RadioButton({ error, className, style, form, ...restOfProps }, ref) {
   const { size, contrast, brandColor } = useFormContext();

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../../../src/components/builtin/Form/components/Field/components/RadioButton/index.tsx"],"sourcesContent":["import { forwardRef, CSSProperties, ComponentPropsWithoutRef, ForwardedRef } from 'react'\nimport Color from 'color'\n\nimport { getSizeHeight as getSize } from '../Label'\nimport { useFormContext, Sizes, Contrasts, Value } from '../../../../context/FormContext'\nimport { getContrastBorderColor, getContrastBackgroundColor } from '../../services/responsiveField'\nimport { colorToString } from '../../../../../../utils/colorToString'\nimport { ColorValue } from '../../../../../../utils/types'\nimport { cx } from '@emotion/css'\nimport { useResponsiveStyle } from '../../../../../../utils/responsive-style'\nimport { useStyle } from '../../../../../../../runtimes/react/use-style'\n\nfunction getCheckmarkColor({\n  swatch: { hue: h, saturation: s, lightness: l } = { hue: 0, saturation: 0, lightness: 0 },\n  alpha: a = 1,\n}: ColorValue) {\n  return Color({ h, s, l }).alpha(a).isLight() ? 'rgba(0, 0, 0, 0.7)' : 'rgba(255, 255, 255, 0.95)'\n}\n\ntype ContainerBaseProps = Pick<Value, 'size'>\n\ntype ContainerProps = ContainerBaseProps &\n  Omit<ComponentPropsWithoutRef<'div'>, keyof ContainerBaseProps>\n\nfunction Container({ size, className, ...restOfProps }: ContainerProps) {\n  return (\n    <div\n      {...restOfProps}\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        className,\n      )}\n    />\n  )\n}\n\nconst FAKE_RADIO_BUTTON_CLASS_NAME = 'fake-radio-button'\n\ntype FakeRadioButtonBaseProps = Pick<Value, 'contrast'> & { error?: boolean }\n\ntype FakeRadioButtonProps = FakeRadioButtonBaseProps &\n  Omit<ComponentPropsWithoutRef<'div'>, keyof FakeRadioButtonBaseProps>\n\nfunction FakeRadioButton({ className, contrast, error, ...restOfProps }: FakeRadioButtonProps) {\n  return (\n    <div\n      {...restOfProps}\n      className={cx(\n        FAKE_RADIO_BUTTON_CLASS_NAME,\n        useStyle({\n          position: 'absolute',\n          width: '100%',\n          height: '100%',\n          borderStyle: 'solid',\n          borderRadius: '50%',\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 HiddenRadioButtonBaseProps = Partial<Pick<Value, 'brandColor' | 'contrast'>> & {\n  error?: boolean\n}\n\ntype HiddenRadioButtonProps = HiddenRadioButtonBaseProps &\n  Omit<ComponentPropsWithoutRef<'input'>, keyof HiddenRadioButtonBaseProps>\n\nconst HiddenRadioButton = forwardRef(function HiddenRadioButton(\n  { className, brandColor, contrast, error, ...restOfProps }: HiddenRadioButtonProps,\n  ref: ForwardedRef<HTMLInputElement>,\n) {\n  return (\n    <input\n      {...restOfProps}\n      type=\"radio\"\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_RADIO_BUTTON_CLASS_NAME}`]: {\n              opacity: 0.5,\n            },\n          },\n\n          [`&:checked ~ .${FAKE_RADIO_BUTTON_CLASS_NAME}`]: {\n            ...useResponsiveStyle(\n              [brandColor] as const,\n              ([brandColor = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 }]) => ({\n                backgroundColor: colorToString(brandColor),\n              }),\n            ),\n            borderColor: 'transparent',\n\n            '&::after': {\n              content: '\"\"',\n              position: 'absolute',\n              boxSizing: 'content-box',\n              top: '50%',\n              left: '50%',\n              width: '50%',\n              height: '50%',\n              borderRadius: '50%',\n              transform: 'translate(-50%, -50%)',\n              ...useResponsiveStyle(\n                [brandColor] as const,\n                ([brandColor = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 }]) => ({\n                  backgroundColor: getCheckmarkColor(brandColor),\n                }),\n              ),\n            },\n          },\n\n          '&:not(:disabled)': {\n            [`&:focus ~ .${FAKE_RADIO_BUTTON_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_RADIO_BUTTON_CLASS_NAME}`]: useResponsiveStyle(\n              [contrast] as const,\n              ([contrast = Contrasts.LIGHT]) => ({\n                borderColor: getContrastBorderColor(contrast, error),\n              }),\n            ),\n          },\n        }),\n        className,\n      )}\n      ref={ref}\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 HiddenRadioButton>, keyof BaseProps>\n\nexport default forwardRef<HTMLInputElement, Props>(function RadioButton(\n  { error, className, style, form, ...restOfProps }: Props,\n  ref,\n) {\n  const { size, contrast, brandColor } = useFormContext()\n\n  return (\n    <Container size={size}>\n      <HiddenRadioButton\n        {...restOfProps}\n        ref={ref}\n        error={error}\n        contrast={contrast}\n        brandColor={brandColor}\n      />\n      <FakeRadioButton className={className} error={error} contrast={contrast} style={style} />\n    </Container>\n  )\n})\n"],"mappings":"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","names":["size","contrast","HiddenRadioButton","brandColor"]}
+{"version":3,"sources":["../../../../../../../../../src/components/builtin/Form/components/Field/components/RadioButton/index.tsx"],"sourcesContent":["import { forwardRef, CSSProperties, ComponentPropsWithoutRef, ForwardedRef } from 'react'\nimport Color from 'color'\n\nimport { getSizeHeight as getSize } from '../Label'\nimport { useFormContext, Sizes, Contrasts, Value } from '../../../../context/FormContext'\nimport { getContrastBorderColor, getContrastBackgroundColor } from '../../services/responsiveField'\nimport { colorToString } from '../../../../../../utils/colorToString'\nimport { ColorValue } 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 } = { hue: 0, saturation: 0, lightness: 0 },\n  alpha: a = 1,\n}: ColorValue) {\n  return Color({ h, s, l }).alpha(a).isLight() ? 'rgba(0, 0, 0, 0.7)' : 'rgba(255, 255, 255, 0.95)'\n}\n\ntype ContainerBaseProps = Pick<Value, 'size'>\n\ntype ContainerProps = ContainerBaseProps &\n  Omit<ComponentPropsWithoutRef<'div'>, keyof ContainerBaseProps>\n\nfunction Container({ size, className, ...restOfProps }: ContainerProps) {\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    className,\n  )\n  return (\n    <>\n      {styles.styleElements}\n      <div {...restOfProps} className={styles.className} />\n    </>\n  )\n}\n\nconst FAKE_RADIO_BUTTON_CLASS_NAME = 'fake-radio-button'\n\ntype FakeRadioButtonBaseProps = Pick<Value, 'contrast'> & { error?: boolean }\n\ntype FakeRadioButtonProps = FakeRadioButtonBaseProps &\n  Omit<ComponentPropsWithoutRef<'div'>, keyof FakeRadioButtonBaseProps>\n\nfunction FakeRadioButton({ className, contrast, error, ...restOfProps }: FakeRadioButtonProps) {\n  const styles = composeStyles(\n    FAKE_RADIO_BUTTON_CLASS_NAME,\n    useStyle({\n      position: 'absolute',\n      width: '100%',\n      height: '100%',\n      borderStyle: 'solid',\n      borderRadius: '50%',\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 {...restOfProps} className={styles.className} />\n    </>\n  )\n}\n\ntype HiddenRadioButtonBaseProps = Partial<Pick<Value, 'brandColor' | 'contrast'>> & {\n  error?: boolean\n}\n\ntype HiddenRadioButtonProps = HiddenRadioButtonBaseProps &\n  Omit<ComponentPropsWithoutRef<'input'>, keyof HiddenRadioButtonBaseProps>\n\nconst HiddenRadioButton = forwardRef(function HiddenRadioButton(\n  { className, brandColor, contrast, error, ...restOfProps }: HiddenRadioButtonProps,\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_RADIO_BUTTON_CLASS_NAME}`]: {\n          opacity: 0.5,\n        },\n      },\n\n      [`&:checked ~ .${FAKE_RADIO_BUTTON_CLASS_NAME}`]: {\n        ...useResponsiveStyle(\n          [brandColor] as const,\n          ([brandColor = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 }]) => ({\n            backgroundColor: colorToString(brandColor),\n          }),\n        ),\n        borderColor: 'transparent',\n\n        '&::after': {\n          content: '\"\"',\n          position: 'absolute',\n          boxSizing: 'content-box',\n          top: '50%',\n          left: '50%',\n          width: '50%',\n          height: '50%',\n          borderRadius: '50%',\n          transform: 'translate(-50%, -50%)',\n          ...useResponsiveStyle(\n            [brandColor] as const,\n            ([brandColor = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 }]) => ({\n              backgroundColor: getCheckmarkColor(brandColor),\n            }),\n          ),\n        },\n      },\n\n      '&:not(:disabled)': {\n        [`&:focus ~ .${FAKE_RADIO_BUTTON_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_RADIO_BUTTON_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} type=\"radio\" className={styles.className} ref={ref} />\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 HiddenRadioButton>, keyof BaseProps>\n\nexport default forwardRef<HTMLInputElement, Props>(function RadioButton(\n  { error, className, style, form, ...restOfProps }: Props,\n  ref,\n) {\n  const { size, contrast, brandColor } = useFormContext()\n\n  return (\n    <Container size={size}>\n      <HiddenRadioButton\n        {...restOfProps}\n        ref={ref}\n        error={error}\n        contrast={contrast}\n        brandColor={brandColor}\n      />\n      <FakeRadioButton className={className} error={error} contrast={contrast} style={style} />\n    </Container>\n  )\n})\n"],"mappings":"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","names":["size","contrast","HiddenRadioButton","brandColor"]}

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

@@ -1,34 +1,38 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { cx } from "@emotion/css";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import {
   forwardRef,
   useRef,
   useImperativeHandle
 } from "react";
-import { useStyle } from "../../../../../../../../../runtimes/react/use-style";
 import Label from "../../../Label";
 import RadioButton from "../../../RadioButton";
+import {
+  composeStyles,
+  useStyle
+} from "../../../../../../../../../runtimes/react/css-runtime/hooks/use-style";
 function StyledLabel({ className, ...restOfProps }) {
-  return /* @__PURE__ */ jsx(
-    Label,
-    {
-      ...restOfProps,
-      className: cx(
-        useStyle({
-          display: "flex",
-          alignItems: "center",
-          margin: "8px 0",
-          "&:last-of-type": {
-            marginBottom: 0
-          }
-        }),
-        className
-      )
-    }
+  const styles = composeStyles(
+    useStyle({
+      display: "flex",
+      alignItems: "center",
+      margin: "8px 0",
+      "&:last-of-type": {
+        marginBottom: 0
+      }
+    }),
+    className
   );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    styles.styleElements,
+    /* @__PURE__ */ jsx(Label, { ...restOfProps, className: styles.className })
+  ] });
 }
 function RadioButtonContainer({ className, ...restOfProps }) {
-  return /* @__PURE__ */ jsx("span", { ...restOfProps, className: cx(useStyle({ marginRight: 8 }), className) });
+  const styles = composeStyles(useStyle({ marginRight: 8 }), className);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    styles.styleElements,
+    /* @__PURE__ */ jsx("span", { ...restOfProps, className: styles.className })
+  ] });
 }
 var TableColumnRadioButtonGroup_default = forwardRef(function TableColumnRadioButtonGroup({
   tableColumn,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../../../../../src/components/builtin/Form/components/Field/components/SingleSelectTableField/components/TableColumnRadioButtonGroup/index.tsx"],"sourcesContent":["import { cx } from '@emotion/css'\nimport {\n  forwardRef,\n  useRef,\n  useImperativeHandle,\n  SyntheticEvent,\n  ComponentPropsWithoutRef,\n} from 'react'\nimport { useStyle } from '../../../../../../../../../runtimes/react/use-style'\n\nimport Label from '../../../Label'\nimport RadioButton from '../../../RadioButton'\n\nfunction StyledLabel({ className, ...restOfProps }: ComponentPropsWithoutRef<typeof Label>) {\n  return (\n    <Label\n      {...restOfProps}\n      className={cx(\n        useStyle({\n          display: 'flex',\n          alignItems: 'center',\n          margin: '8px 0',\n\n          '&:last-of-type': {\n            marginBottom: 0,\n          },\n        }),\n        className,\n      )}\n    />\n  )\n}\n\nfunction RadioButtonContainer({ className, ...restOfProps }: ComponentPropsWithoutRef<'span'>) {\n  return <span {...restOfProps} className={cx(useStyle({ marginRight: 8 }), className)} />\n}\n\ntype Props = {\n  id: string\n  tableColumn: {\n    options: Array<{\n      id: string\n      name: string\n    }>\n  }\n  label?: string\n  value?: string\n  hideLabel?: boolean\n  onChange: (arg0: SyntheticEvent<HTMLInputElement>) => unknown\n  required?: boolean\n}\n\nexport default forwardRef<\n  {\n    validity: {\n      valueMissing: boolean\n      typeMismatch: boolean\n    }\n  },\n  Props\n>(function TableColumnRadioButtonGroup(\n  {\n    tableColumn,\n    label = '',\n    value = '',\n    required = false,\n    hideLabel = false,\n    onChange,\n    ...restOfProps\n  }: Props,\n  ref,\n) {\n  const handle = useRef({\n    validity: { valueMissing: required === true && value === '', typeMismatch: false },\n  })\n\n  useImperativeHandle(ref, () => handle.current, [])\n\n  function handleChange(event: SyntheticEvent<HTMLInputElement>) {\n    handle.current.validity.valueMissing = required === true && !event.currentTarget.checked\n\n    onChange(event)\n  }\n\n  return (\n    <div>\n      {!hideLabel && <Label as=\"p\">{label}</Label>}\n      {tableColumn.options.map(option => (\n        <StyledLabel key={option.id} htmlFor={option.id} aria-label={label}>\n          <RadioButtonContainer>\n            <RadioButton\n              {...restOfProps}\n              onChange={handleChange}\n              checked={value === option.name}\n              id={option.id}\n              value={option.name}\n            />\n          </RadioButtonContainer>\n          {option.name}\n        </StyledLabel>\n      ))}\n    </div>\n  )\n})\n"],"mappings":"AAeI,cAyEI,YAzEJ;AAfJ,SAAS,UAAU;AACnB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAGK;AACP,SAAS,gBAAgB;AAEzB,OAAO,WAAW;AAClB,OAAO,iBAAiB;AAExB,SAAS,YAAY,EAAE,WAAW,GAAG,YAAY,GAA2C;AAC1F,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW;AAAA,QACT,SAAS;AAAA,UACP,SAAS;AAAA,UACT,YAAY;AAAA,UACZ,QAAQ;AAAA,UAER,kBAAkB;AAAA,YAChB,cAAc;AAAA,UAChB;AAAA,QACF,CAAC;AAAA,QACD;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;AAEA,SAAS,qBAAqB,EAAE,WAAW,GAAG,YAAY,GAAqC;AAC7F,SAAO,oBAAC,UAAM,GAAG,aAAa,WAAW,GAAG,SAAS,EAAE,aAAa,EAAE,CAAC,GAAG,SAAS,GAAG;AACxF;AAiBA,IAAO,sCAAQ,WAQb,SAAS,4BACT;AAAA,EACE;AAAA,EACA,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,WAAW;AAAA,EACX,YAAY;AAAA,EACZ;AAAA,EACA,GAAG;AACL,GACA,KACA;AACA,QAAM,SAAS,OAAO;AAAA,IACpB,UAAU,EAAE,cAAc,aAAa,QAAQ,UAAU,IAAI,cAAc,MAAM;AAAA,EACnF,CAAC;AAED,sBAAoB,KAAK,MAAM,OAAO,SAAS,CAAC,CAAC;AAEjD,WAAS,aAAa,OAAyC;AAC7D,WAAO,QAAQ,SAAS,eAAe,aAAa,QAAQ,CAAC,MAAM,cAAc;AAEjF,aAAS,KAAK;AAAA,EAChB;AAEA,SACE,qBAAC,SACE;AAAA,KAAC,aAAa,oBAAC,SAAM,IAAG,KAAK,iBAAM;AAAA,IACnC,YAAY,QAAQ,IAAI,YACvB,qBAAC,eAA4B,SAAS,OAAO,IAAI,cAAY,OAC3D;AAAA,0BAAC,wBACC;AAAA,QAAC;AAAA;AAAA,UACE,GAAG;AAAA,UACJ,UAAU;AAAA,UACV,SAAS,UAAU,OAAO;AAAA,UAC1B,IAAI,OAAO;AAAA,UACX,OAAO,OAAO;AAAA;AAAA,MAChB,GACF;AAAA,MACC,OAAO;AAAA,SAVQ,OAAO,EAWzB,CACD;AAAA,KACH;AAEJ,CAAC;","names":[]}
+{"version":3,"sources":["../../../../../../../../../../../src/components/builtin/Form/components/Field/components/SingleSelectTableField/components/TableColumnRadioButtonGroup/index.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useRef,\n  useImperativeHandle,\n  SyntheticEvent,\n  ComponentPropsWithoutRef,\n} from 'react'\n\nimport Label from '../../../Label'\nimport RadioButton from '../../../RadioButton'\nimport {\n  composeStyles,\n  useStyle,\n} from '../../../../../../../../../runtimes/react/css-runtime/hooks/use-style'\n\nfunction StyledLabel({ className, ...restOfProps }: ComponentPropsWithoutRef<typeof Label>) {\n  const styles = composeStyles(\n    useStyle({\n      display: 'flex',\n      alignItems: 'center',\n      margin: '8px 0',\n\n      '&:last-of-type': {\n        marginBottom: 0,\n      },\n    }),\n    className,\n  )\n\n  return (\n    <>\n      {styles.styleElements}\n      <Label {...restOfProps} className={styles.className} />\n    </>\n  )\n}\n\nfunction RadioButtonContainer({ className, ...restOfProps }: ComponentPropsWithoutRef<'span'>) {\n  const styles = composeStyles(useStyle({ marginRight: 8 }), className)\n  return (\n    <>\n      {styles.styleElements}\n      <span {...restOfProps} 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  label?: string\n  value?: string\n  hideLabel?: boolean\n  onChange: (arg0: SyntheticEvent<HTMLInputElement>) => unknown\n  required?: boolean\n}\n\nexport default forwardRef<\n  {\n    validity: {\n      valueMissing: boolean\n      typeMismatch: boolean\n    }\n  },\n  Props\n>(function TableColumnRadioButtonGroup(\n  {\n    tableColumn,\n    label = '',\n    value = '',\n    required = false,\n    hideLabel = false,\n    onChange,\n    ...restOfProps\n  }: Props,\n  ref,\n) {\n  const handle = useRef({\n    validity: { valueMissing: required === true && value === '', typeMismatch: false },\n  })\n\n  useImperativeHandle(ref, () => handle.current, [])\n\n  function handleChange(event: SyntheticEvent<HTMLInputElement>) {\n    handle.current.validity.valueMissing = required === true && !event.currentTarget.checked\n\n    onChange(event)\n  }\n\n  return (\n    <div>\n      {!hideLabel && <Label as=\"p\">{label}</Label>}\n      {tableColumn.options.map(option => (\n        <StyledLabel key={option.id} htmlFor={option.id} aria-label={label}>\n          <RadioButtonContainer>\n            <RadioButton\n              {...restOfProps}\n              onChange={handleChange}\n              checked={value === option.name}\n              id={option.id}\n              value={option.name}\n            />\n          </RadioButtonContainer>\n          {option.name}\n        </StyledLabel>\n      ))}\n    </div>\n  )\n})\n"],"mappings":"AA8BI,mBAEE,KAFF;AA9BJ;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAGK;AAEP,OAAO,WAAW;AAClB,OAAO,iBAAiB;AACxB;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAEP,SAAS,YAAY,EAAE,WAAW,GAAG,YAAY,GAA2C;AAC1F,QAAM,SAAS;AAAA,IACb,SAAS;AAAA,MACP,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,QAAQ;AAAA,MAER,kBAAkB;AAAA,QAChB,cAAc;AAAA,MAChB;AAAA,IACF,CAAC;AAAA,IACD;AAAA,EACF;AAEA,SACE,iCACG;AAAA,WAAO;AAAA,IACR,oBAAC,SAAO,GAAG,aAAa,WAAW,OAAO,WAAW;AAAA,KACvD;AAEJ;AAEA,SAAS,qBAAqB,EAAE,WAAW,GAAG,YAAY,GAAqC;AAC7F,QAAM,SAAS,cAAc,SAAS,EAAE,aAAa,EAAE,CAAC,GAAG,SAAS;AACpE,SACE,iCACG;AAAA,WAAO;AAAA,IACR,oBAAC,UAAM,GAAG,aAAa,WAAW,OAAO,WAAW;AAAA,KACtD;AAEJ;AAiBA,IAAO,sCAAQ,WAQb,SAAS,4BACT;AAAA,EACE;AAAA,EACA,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,WAAW;AAAA,EACX,YAAY;AAAA,EACZ;AAAA,EACA,GAAG;AACL,GACA,KACA;AACA,QAAM,SAAS,OAAO;AAAA,IACpB,UAAU,EAAE,cAAc,aAAa,QAAQ,UAAU,IAAI,cAAc,MAAM;AAAA,EACnF,CAAC;AAED,sBAAoB,KAAK,MAAM,OAAO,SAAS,CAAC,CAAC;AAEjD,WAAS,aAAa,OAAyC;AAC7D,WAAO,QAAQ,SAAS,eAAe,aAAa,QAAQ,CAAC,MAAM,cAAc;AAEjF,aAAS,KAAK;AAAA,EAChB;AAEA,SACE,qBAAC,SACE;AAAA,KAAC,aAAa,oBAAC,SAAM,IAAG,KAAK,iBAAM;AAAA,IACnC,YAAY,QAAQ,IAAI,YACvB,qBAAC,eAA4B,SAAS,OAAO,IAAI,cAAY,OAC3D;AAAA,0BAAC,wBACC;AAAA,QAAC;AAAA;AAAA,UACE,GAAG;AAAA,UACJ,UAAU;AAAA,UACV,SAAS,UAAU,OAAO;AAAA,UAC1B,IAAI,OAAO;AAAA,UACX,OAAO,OAAO;AAAA;AAAA,MAChB,GACF;AAAA,MACC,OAAO;AAAA,SAVQ,OAAO,EAWzB,CACD;AAAA,KACH;AAEJ,CAAC;","names":[]}