@makeswift/runtime 0.13.1 → 0.14.0

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../../src/components/builtin/Form/components/Field/components/PlaceholderTableField/index.tsx"],"sourcesContent":["import { 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(): JSX.Element {\n  const { size, shape } = useFormContext()\n\n  return (\n    <>\n      <Label size={size} />\n      <Input shape={shape} size={size} />\n    </>\n  )\n}\n"],"mappings":"AAUI,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,wBAAsD;AAC3D,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

@@ -0,0 +1,150 @@
+import { 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";
+function getCheckmarkColor({
+  swatch: { hue: h, saturation: s, lightness: l } = { hue: 0, saturation: 0, lightness: 0 },
+  alpha: a = 1
+}) {
+  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 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 HiddenRadioButton = forwardRef(function HiddenRadioButton2({ className, brandColor, contrast, error, ...restOfProps }, ref) {
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      ...restOfProps,
+      type: "radio",
+      className: cx(
+        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",
+              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
+    }
+  );
+});
+var RadioButton_default = forwardRef(function RadioButton({ error, className, style, form, ...restOfProps }, ref) {
+  const { size, contrast, brandColor } = useFormContext();
+  return /* @__PURE__ */ jsxs(Container, { size, children: [
+    /* @__PURE__ */ jsx(
+      HiddenRadioButton,
+      {
+        ...restOfProps,
+        ref,
+        error,
+        contrast,
+        brandColor
+      }
+    ),
+    /* @__PURE__ */ jsx(FakeRadioButton, { className, error, contrast, style })
+  ] });
+});
+export {
+  RadioButton_default as default
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +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"]}

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

@@ -0,0 +1,25 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import Label from "../Label";
+import Input from "../Input";
+var SingleLineTextTableField_default = forwardRef(function SingleLineTextTableField({ id, label = "", name, error, hideLabel = false, tableColumn, ...restOfProps }, ref) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    !hideLabel && /* @__PURE__ */ jsx(Label, { htmlFor: id, children: label }),
+    /* @__PURE__ */ jsx(
+      Input,
+      {
+        ...restOfProps,
+        "aria-label": label,
+        ref,
+        id,
+        name,
+        type: "text",
+        error: error != null
+      }
+    )
+  ] });
+});
+export {
+  SingleLineTextTableField_default as default
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../../src/components/builtin/Form/components/Field/components/SingleLineTextTableField/index.tsx"],"sourcesContent":["import { forwardRef } from 'react'\n\nimport Label from '../Label'\nimport Input from '../Input'\nimport { TableColumn } from '../../../../types'\n\ntype Props = {\n  id: string\n  label?: string\n  name: string\n  error?: string\n  hideLabel?: boolean\n  tableColumn?: TableColumn | null\n}\n\nexport default forwardRef<HTMLInputElement, Props>(function SingleLineTextTableField(\n  { id, label = '', name, error, hideLabel = false, tableColumn, ...restOfProps }: Props,\n  ref,\n) {\n  return (\n    <>\n      {!hideLabel && <Label htmlFor={id}>{label}</Label>}\n      <Input\n        {...restOfProps}\n        aria-label={label}\n        ref={ref}\n        id={id}\n        name={name}\n        type=\"text\"\n        error={error != null}\n      />\n    </>\n  )\n})\n"],"mappings":"AAoBI,mBACiB,KADjB;AApBJ,SAAS,kBAAkB;AAE3B,OAAO,WAAW;AAClB,OAAO,WAAW;AAYlB,IAAO,mCAAQ,WAAoC,SAAS,yBAC1D,EAAE,IAAI,QAAQ,IAAI,MAAM,OAAO,YAAY,OAAO,aAAa,GAAG,YAAY,GAC9E,KACA;AACA,SACE,iCACG;AAAA,KAAC,aAAa,oBAAC,SAAM,SAAS,IAAK,iBAAM;AAAA,IAC1C;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,cAAY;AAAA,QACZ;AAAA,QACA;AAAA,QACA;AAAA,QACA,MAAK;AAAA,QACL,OAAO,SAAS;AAAA;AAAA,IAClB;AAAA,KACF;AAEJ,CAAC;","names":[]}

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

@@ -0,0 +1,70 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "@emotion/css";
+import {
+  forwardRef,
+  useRef,
+  useImperativeHandle
+} from "react";
+import { useStyle } from "../../../../../../../../../runtimes/react/use-style";
+import Label from "../../../Label";
+import RadioButton from "../../../RadioButton";
+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
+      )
+    }
+  );
+}
+function RadioButtonContainer({ className, ...restOfProps }) {
+  return /* @__PURE__ */ jsx("span", { ...restOfProps, className: cx(useStyle({ marginRight: 8 }), className) });
+}
+var TableColumnRadioButtonGroup_default = forwardRef(function TableColumnRadioButtonGroup({
+  tableColumn,
+  label = "",
+  value = "",
+  required = false,
+  hideLabel = false,
+  onChange,
+  ...restOfProps
+}, ref) {
+  const handle = useRef({
+    validity: { valueMissing: required === true && value === "", typeMismatch: false }
+  });
+  useImperativeHandle(ref, () => handle.current, []);
+  function handleChange(event) {
+    handle.current.validity.valueMissing = required === true && !event.currentTarget.checked;
+    onChange(event);
+  }
+  return /* @__PURE__ */ jsxs("div", { children: [
+    !hideLabel && /* @__PURE__ */ jsx(Label, { as: "p", children: label }),
+    tableColumn.options.map((option) => /* @__PURE__ */ jsxs(StyledLabel, { htmlFor: option.id, "aria-label": label, children: [
+      /* @__PURE__ */ jsx(RadioButtonContainer, { children: /* @__PURE__ */ jsx(
+        RadioButton,
+        {
+          ...restOfProps,
+          onChange: handleChange,
+          checked: value === option.name,
+          id: option.id,
+          value: option.name
+        }
+      ) }),
+      option.name
+    ] }, option.id))
+  ] });
+});
+export {
+  TableColumnRadioButtonGroup_default as default
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +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":[]}

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

@@ -0,0 +1,115 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "@emotion/css";
+import { forwardRef } from "react";
+import { useStyle } from "../../../../../../../../../runtimes/react/use-style";
+import { useResponsiveStyle } from "../../../../../../../../utils/responsive-style";
+import { useFormContext, Sizes, Contrasts } from "../../../../../../context/FormContext";
+import responsiveField, {
+  getSizeHeight,
+  getSizeHorizontalPadding,
+  getContrastColor
+} from "../../../../services/responsiveField";
+import Label from "../../../Label";
+function Container({
+  shape,
+  size,
+  contrast,
+  brandColor,
+  error,
+  className,
+  ...restOfProps
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...restOfProps,
+      className: cx(
+        useStyle(responsiveField({ shape, size, contrast, brandColor, error })),
+        useStyle({
+          display: "flex",
+          alignItems: "center",
+          position: "relative",
+          userSelect: "none",
+          borderColor: "#f19eb9",
+          "&:focus, &:focus-within": {
+            borderColor: "#e54e7f"
+          },
+          ...useResponsiveStyle(
+            [size, contrast],
+            ([size2 = Sizes.MEDIUM, contrast2 = Contrasts.LIGHT]) => ({
+              minHeight: getSizeHeight(size2),
+              maxHeight: getSizeHeight(size2),
+              "&::after": {
+                content: '""',
+                position: "absolute",
+                right: getSizeHorizontalPadding(size2),
+                top: "50%",
+                transform: "translate3d(0, -25%, 0)",
+                border: "solid 0.35em transparent",
+                borderTopColor: getContrastColor(contrast2)
+              }
+            })
+          )
+        }),
+        className
+      )
+    }
+  );
+}
+const Select = forwardRef(function Select2({ className, ...restOfProps }, ref) {
+  return /* @__PURE__ */ jsx(
+    "select",
+    {
+      ...restOfProps,
+      ref,
+      className: cx(
+        useStyle({
+          appearance: "none",
+          position: "absolute",
+          top: 0,
+          left: 0,
+          opacity: 0,
+          width: "100%",
+          height: "100%"
+        }),
+        className
+      )
+    }
+  );
+});
+var TableColumnSingleSelect_default = forwardRef(function TableColumnSingleSelect({
+  id,
+  tableColumn,
+  value = "",
+  label = "",
+  error = false,
+  hideLabel = false,
+  form,
+  ...restOfProps
+}, ref) {
+  const { shape, size, contrast, brandColor } = useFormContext();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    !hideLabel && /* @__PURE__ */ jsx(Label, { htmlFor: id, children: label }),
+    /* @__PURE__ */ jsxs(
+      Container,
+      {
+        error,
+        shape,
+        size,
+        contrast,
+        brandColor,
+        children: [
+          /* @__PURE__ */ jsx("span", { children: value === "" ? "-" : value }),
+          /* @__PURE__ */ jsxs(Select, { ...restOfProps, "aria-label": label, ref, id, value, children: [
+            /* @__PURE__ */ jsx("option", { value: "", children: "-" }),
+            tableColumn.options.map((option) => /* @__PURE__ */ jsx("option", { value: option.name, children: option.name }, option.id))
+          ] })
+        ]
+      }
+    )
+  ] });
+});
+export {
+  TableColumnSingleSelect_default as default
+};
+//# sourceMappingURL=index.js.map

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

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

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

@@ -0,0 +1,14 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import TableColumnRadioButtonGroup from "./components/TableColumnRadioButtonGroup";
+import TableColumnSingleSelect from "./components/TableColumnSingleSelect";
+var SingleSelectTableField_default = forwardRef(function SingleSelectTableField({ type, ...restOfProps }, ref) {
+  return type === "select" ? (
+    // @ts-expect-error: custom ref doesn't match select element
+    /* @__PURE__ */ jsx(TableColumnSingleSelect, { ...restOfProps, ref })
+  ) : /* @__PURE__ */ jsx(TableColumnRadioButtonGroup, { ...restOfProps, ref });
+});
+export {
+  SingleSelectTableField_default as default
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../../src/components/builtin/Form/components/Field/components/SingleSelectTableField/index.tsx"],"sourcesContent":["import { forwardRef, SyntheticEvent } from 'react'\n\nimport TableColumnRadioButtonGroup from './components/TableColumnRadioButtonGroup'\nimport TableColumnSingleSelect from './components/TableColumnSingleSelect'\n\ntype Props = {\n  id: string\n  name: string\n  tableColumn: {\n    options: Array<{\n      id: string\n      name: string\n    }>\n  }\n  label?: string\n  value?: string\n  onChange: (arg0: SyntheticEvent<HTMLInputElement>) => unknown\n  required?: boolean\n  type: 'select' | 'radio'\n}\n\nexport default forwardRef<\n  {\n    readonly validity: {\n      readonly valueMissing: boolean\n      readonly typeMismatch: boolean\n    }\n  },\n  Props\n>(function SingleSelectTableField({ type, ...restOfProps }: Props, ref) {\n  return type === 'select' ? (\n    // @ts-expect-error: custom ref doesn't match select element\n    <TableColumnSingleSelect {...restOfProps} ref={ref} />\n  ) : (\n    <TableColumnRadioButtonGroup {...restOfProps} ref={ref} />\n  )\n})\n"],"mappings":"AAgCI;AAhCJ,SAAS,kBAAkC;AAE3C,OAAO,iCAAiC;AACxC,OAAO,6BAA6B;AAkBpC,IAAO,iCAAQ,WAQb,SAAS,uBAAuB,EAAE,MAAM,GAAG,YAAY,GAAU,KAAK;AACtE,SAAO,SAAS;AAAA;AAAA,IAEd,oBAAC,2BAAyB,GAAG,aAAa,KAAU;AAAA,MAEpD,oBAAC,+BAA6B,GAAG,aAAa,KAAU;AAE5D,CAAC;","names":[]}

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

@@ -0,0 +1,25 @@
+import { jsx } from "react/jsx-runtime";
+import { cx } from "@emotion/css";
+import { forwardRef } from "react";
+import { useStyle } from "../../../../../../../runtimes/react/use-style";
+import { useFormContext } from "../../../../context/FormContext";
+import responsiveField from "../../services/responsiveField";
+var TextArea_default = forwardRef(function TextArea({ error = false, form, ...restOfProps }, ref) {
+  const { shape, size, contrast, brandColor } = useFormContext();
+  return /* @__PURE__ */ jsx(
+    "textarea",
+    {
+      ...restOfProps,
+      ref,
+      className: cx(
+        useStyle({ resize: "vertical" }),
+        useStyle(responsiveField({ error, shape, size, contrast, brandColor }))
+      ),
+      rows: 4
+    }
+  );
+});
+export {
+  TextArea_default as default
+};
+//# sourceMappingURL=index.js.map

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

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

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

@@ -0,0 +1,25 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import Label from "../Label";
+import Input from "../Input";
+var URLTableField_default = forwardRef(function URLTableField({ id, label = "", name, error, hideLabel = false, tableColumn, ...restOfProps }, ref) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    !hideLabel && /* @__PURE__ */ jsx(Label, { htmlFor: id, children: label }),
+    /* @__PURE__ */ jsx(
+      Input,
+      {
+        ...restOfProps,
+        "aria-label": label,
+        ref,
+        id,
+        name,
+        type: "url",
+        error: error != null
+      }
+    )
+  ] });
+});
+export {
+  URLTableField_default as default
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../../src/components/builtin/Form/components/Field/components/URLTableField/index.tsx"],"sourcesContent":["import { forwardRef } from 'react'\n\nimport Label from '../Label'\nimport Input from '../Input'\nimport { TableColumn } from '../../../../types'\n\ntype Props = {\n  id: string\n  label?: string\n  name: string\n  error?: string\n  hideLabel?: boolean\n  tableColumn?: TableColumn | null\n}\n\nexport default forwardRef<HTMLInputElement, Props>(function URLTableField(\n  { id, label = '', name, error, hideLabel = false, tableColumn, ...restOfProps }: Props,\n  ref,\n) {\n  return (\n    <>\n      {!hideLabel && <Label htmlFor={id}>{label}</Label>}\n      <Input\n        {...restOfProps}\n        aria-label={label}\n        ref={ref}\n        id={id}\n        name={name}\n        type=\"url\"\n        error={error != null}\n      />\n    </>\n  )\n})\n"],"mappings":"AAoBI,mBACiB,KADjB;AApBJ,SAAS,kBAAkB;AAE3B,OAAO,WAAW;AAClB,OAAO,WAAW;AAYlB,IAAO,wBAAQ,WAAoC,SAAS,cAC1D,EAAE,IAAI,QAAQ,IAAI,MAAM,OAAO,YAAY,OAAO,aAAa,GAAG,YAAY,GAC9E,KACA;AACA,SACE,iCACG;AAAA,KAAC,aAAa,oBAAC,SAAM,SAAS,IAAK,iBAAM;AAAA,IAC1C;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,cAAY;AAAA,QACZ;AAAA,QACA;AAAA,QACA;AAAA,QACA,MAAK;AAAA,QACL,OAAO,SAAS;AAAA;AAAA,IAClB;AAAA,KACF;AAEJ,CAAC;","names":[]}

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

@@ -0,0 +1,106 @@
+import { jsx } from "react/jsx-runtime";
+import { useRef } from "react";
+import { Field as FormikField, getIn } from "formik";
+import SingleLineTextTableField from "./components/SingleLineTextTableField";
+import LongTextTableField from "./components/LongTextTableField";
+import CheckboxTableField from "./components/CheckboxTableField";
+import MultipleSelectTableField from "./components/MultipleSelectTableField";
+import SingleSelectTableField from "./components/SingleSelectTableField";
+import PhoneNumberTableField from "./components/PhoneNumberTableField";
+import EmailTableField from "./components/EmailTableField";
+import URLTableField from "./components/URLTableField";
+import NumberTableField from "./components/NumberTableField";
+import PlaceholderTableField from "./components/PlaceholderTableField";
+function getTypeMismatchErrorMessage(tableColumn, label) {
+  switch ((tableColumn || {}).__typename) {
+    case "PhoneNumberTableColumn":
+      return `${label} field must be a valid phone number.`;
+    case "EmailTableColumn":
+      return `${label} field must be a valid email.`;
+    case "URLTableColumn":
+      return `${label} field must be a valid URL.`;
+    case "NumberTableColumn":
+      return `${label} field must be a valid number.`;
+    case "SingleLineTextTableColumn":
+    case "LongTextTableColumn":
+    case "CheckboxTableColumn":
+    default:
+      return `${label} field is invalid.`;
+  }
+}
+function getTableColumnField(tableColumn) {
+  switch ((tableColumn || {}).__typename) {
+    case "SingleLineTextTableColumn":
+      return SingleLineTextTableField;
+    case "LongTextTableColumn":
+      return LongTextTableField;
+    case "CheckboxTableColumn":
+      return CheckboxTableField;
+    case "MultipleSelectTableColumn":
+      return MultipleSelectTableField;
+    case "SingleSelectTableColumn":
+      return SingleSelectTableField;
+    case "PhoneNumberTableColumn":
+      return PhoneNumberTableField;
+    case "EmailTableColumn":
+      return EmailTableField;
+    case "URLTableColumn":
+      return URLTableField;
+    case "NumberTableColumn":
+      return NumberTableField;
+    default:
+      return SingleLineTextTableField;
+  }
+}
+function escapeCharacters(string) {
+  return string.replace(/[[\]']/g, "\\$&");
+}
+function Field({
+  tableColumn,
+  tableFormField: {
+    id,
+    label = "",
+    placeholder,
+    required = false,
+    hidden = false,
+    type = "radio",
+    hideLabel = false
+  }
+}) {
+  const TableColumnField = getTableColumnField(tableColumn);
+  const input = useRef(null);
+  if (!tableColumn)
+    return /* @__PURE__ */ jsx(PlaceholderTableField, {});
+  function validate() {
+    let errorMessage;
+    if (input.current) {
+      const { validity = {} } = input.current;
+      if (validity.valueMissing)
+        errorMessage = `${label} is required.`;
+      if (validity.typeMismatch)
+        errorMessage = getTypeMismatchErrorMessage(tableColumn, label);
+    }
+    return errorMessage;
+  }
+  const formikFieldName = `['${escapeCharacters(tableColumn.name)}']`;
+  return /* @__PURE__ */ jsx(FormikField, { name: formikFieldName, validate, children: ({ field, form }) => hidden ? /* @__PURE__ */ jsx("input", { ...field, ref: input, type: "hidden" }) : /* @__PURE__ */ jsx(
+    TableColumnField,
+    {
+      ...field,
+      type,
+      form,
+      tableColumn,
+      ref: input,
+      id,
+      error: getIn(form.touched, field.name) && getIn(form.errors, field.name),
+      label,
+      placeholder,
+      required,
+      hideLabel
+    }
+  ) });
+}
+export {
+  Field as default
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../src/components/builtin/Form/components/Field/index.tsx"],"sourcesContent":["import { useRef } from 'react'\nimport { Field as FormikField, getIn } from 'formik'\n\nimport SingleLineTextTableField from './components/SingleLineTextTableField'\nimport LongTextTableField from './components/LongTextTableField'\nimport CheckboxTableField from './components/CheckboxTableField'\nimport MultipleSelectTableField from './components/MultipleSelectTableField'\nimport SingleSelectTableField from './components/SingleSelectTableField'\nimport PhoneNumberTableField from './components/PhoneNumberTableField'\nimport EmailTableField from './components/EmailTableField'\nimport URLTableField from './components/URLTableField'\nimport NumberTableField from './components/NumberTableField'\nimport PlaceholderTableField from './components/PlaceholderTableField'\nimport { TableColumn } from '../../types'\n\nfunction getTypeMismatchErrorMessage(tableColumn: TableColumn | null | undefined, label: string) {\n  switch ((tableColumn || {}).__typename) {\n    case 'PhoneNumberTableColumn':\n      return `${label} field must be a valid phone number.`\n\n    case 'EmailTableColumn':\n      return `${label} field must be a valid email.`\n\n    case 'URLTableColumn':\n      return `${label} field must be a valid URL.`\n\n    case 'NumberTableColumn':\n      return `${label} field must be a valid number.`\n\n    case 'SingleLineTextTableColumn':\n    case 'LongTextTableColumn':\n    case 'CheckboxTableColumn':\n    default:\n      return `${label} field is invalid.`\n  }\n}\n\nfunction getTableColumnField(tableColumn: TableColumn | null | undefined) {\n  switch ((tableColumn || {}).__typename) {\n    case 'SingleLineTextTableColumn':\n      return SingleLineTextTableField\n\n    case 'LongTextTableColumn':\n      return LongTextTableField\n\n    case 'CheckboxTableColumn':\n      return CheckboxTableField\n\n    case 'MultipleSelectTableColumn':\n      return MultipleSelectTableField\n\n    case 'SingleSelectTableColumn':\n      return SingleSelectTableField\n\n    case 'PhoneNumberTableColumn':\n      return PhoneNumberTableField\n\n    case 'EmailTableColumn':\n      return EmailTableField\n\n    case 'URLTableColumn':\n      return URLTableField\n\n    case 'NumberTableColumn':\n      return NumberTableField\n\n    default:\n      return SingleLineTextTableField\n  }\n}\n\ntype TableFormField = {\n  id: string\n  tableColumnId: string\n  label?: string\n  placeholder?: string\n  required?: boolean\n  hidden?: boolean\n  type?: 'select' | 'radio'\n  hideLabel?: boolean\n}\n\ntype Props = {\n  tableColumn: TableColumn | null | undefined\n  tableFormField: TableFormField\n}\n\n// Escape characters: [ ] '\nfunction escapeCharacters(string: string) {\n  return string.replace(/[[\\]']/g, '\\\\$&')\n}\n\nexport default function Field({\n  tableColumn,\n  tableFormField: {\n    id,\n    label = '',\n    placeholder,\n    required = false,\n    hidden = false,\n    type = 'radio',\n    hideLabel = false,\n  },\n}: Props): JSX.Element {\n  const TableColumnField = getTableColumnField(tableColumn)\n  const input = useRef<\n    | {\n        validity: {\n          valueMissing: boolean\n          typeMismatch: boolean\n        }\n      }\n    | null\n    | undefined\n  >(null)\n\n  if (!tableColumn) return <PlaceholderTableField />\n\n  function validate() {\n    let errorMessage\n\n    if (input.current) {\n      const { validity = {} as ValidityState } = input.current\n\n      if (validity.valueMissing) errorMessage = `${label} is required.`\n\n      if (validity.typeMismatch) errorMessage = getTypeMismatchErrorMessage(tableColumn, label)\n    }\n\n    return errorMessage\n  }\n\n  // We're using `['${tableColumn.name}']` to avoid default Formik nested object behavior\n  // which was causing an issue for table column names containing a dot.\n  // https://formik.org/docs/guides/arrays#avoid-nesting\n  // We need to escape square brackets [ ] because it's also used by Lodash\n  // set array: https://lodash.com/docs/4.17.15#set, which is used by Formik.\n  // We need to escape ' because otherwise Formik will wrap the field name inside a ''\n  // for example, if we have hello'world, Formik will name the field 'hello'world'\n  const formikFieldName = `['${escapeCharacters(tableColumn.name)}']`\n\n  return (\n    <FormikField name={formikFieldName} validate={validate}>\n      {({ field, form }: any) =>\n        hidden ? (\n          <input {...field} ref={input} type=\"hidden\" />\n        ) : (\n          <TableColumnField\n            {...field}\n            type={type}\n            form={form}\n            tableColumn={tableColumn}\n            ref={input}\n            id={id}\n            error={getIn(form.touched, field.name) && getIn(form.errors, field.name)}\n            label={label}\n            placeholder={placeholder}\n            required={required}\n            hideLabel={hideLabel}\n          />\n        )\n      }\n    </FormikField>\n  )\n}\n"],"mappings":"AAoH2B;AApH3B,SAAS,cAAc;AACvB,SAAS,SAAS,aAAa,aAAa;AAE5C,OAAO,8BAA8B;AACrC,OAAO,wBAAwB;AAC/B,OAAO,wBAAwB;AAC/B,OAAO,8BAA8B;AACrC,OAAO,4BAA4B;AACnC,OAAO,2BAA2B;AAClC,OAAO,qBAAqB;AAC5B,OAAO,mBAAmB;AAC1B,OAAO,sBAAsB;AAC7B,OAAO,2BAA2B;AAGlC,SAAS,4BAA4B,aAA6C,OAAe;AAC/F,WAAS,eAAe,CAAC,GAAG,YAAY;AAAA,IACtC,KAAK;AACH,aAAO,GAAG,KAAK;AAAA,IAEjB,KAAK;AACH,aAAO,GAAG,KAAK;AAAA,IAEjB,KAAK;AACH,aAAO,GAAG,KAAK;AAAA,IAEjB,KAAK;AACH,aAAO,GAAG,KAAK;AAAA,IAEjB,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL;AACE,aAAO,GAAG,KAAK;AAAA,EACnB;AACF;AAEA,SAAS,oBAAoB,aAA6C;AACxE,WAAS,eAAe,CAAC,GAAG,YAAY;AAAA,IACtC,KAAK;AACH,aAAO;AAAA,IAET,KAAK;AACH,aAAO;AAAA,IAET,KAAK;AACH,aAAO;AAAA,IAET,KAAK;AACH,aAAO;AAAA,IAET,KAAK;AACH,aAAO;AAAA,IAET,KAAK;AACH,aAAO;AAAA,IAET,KAAK;AACH,aAAO;AAAA,IAET,KAAK;AACH,aAAO;AAAA,IAET,KAAK;AACH,aAAO;AAAA,IAET;AACE,aAAO;AAAA,EACX;AACF;AAmBA,SAAS,iBAAiB,QAAgB;AACxC,SAAO,OAAO,QAAQ,WAAW,MAAM;AACzC;AAEe,SAAR,MAAuB;AAAA,EAC5B;AAAA,EACA,gBAAgB;AAAA,IACd;AAAA,IACA,QAAQ;AAAA,IACR;AAAA,IACA,WAAW;AAAA,IACX,SAAS;AAAA,IACT,OAAO;AAAA,IACP,YAAY;AAAA,EACd;AACF,GAAuB;AACrB,QAAM,mBAAmB,oBAAoB,WAAW;AACxD,QAAM,QAAQ,OASZ,IAAI;AAEN,MAAI,CAAC;AAAa,WAAO,oBAAC,yBAAsB;AAEhD,WAAS,WAAW;AAClB,QAAI;AAEJ,QAAI,MAAM,SAAS;AACjB,YAAM,EAAE,WAAW,CAAC,EAAmB,IAAI,MAAM;AAEjD,UAAI,SAAS;AAAc,uBAAe,GAAG,KAAK;AAElD,UAAI,SAAS;AAAc,uBAAe,4BAA4B,aAAa,KAAK;AAAA,IAC1F;AAEA,WAAO;AAAA,EACT;AASA,QAAM,kBAAkB,KAAK,iBAAiB,YAAY,IAAI,CAAC;AAE/D,SACE,oBAAC,eAAY,MAAM,iBAAiB,UACjC,WAAC,EAAE,OAAO,KAAK,MACd,SACE,oBAAC,WAAO,GAAG,OAAO,KAAK,OAAO,MAAK,UAAS,IAE5C;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA,KAAK;AAAA,MACL;AAAA,MACA,OAAO,MAAM,KAAK,SAAS,MAAM,IAAI,KAAK,MAAM,KAAK,QAAQ,MAAM,IAAI;AAAA,MACvE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACF,GAGN;AAEJ;","names":[]}