@makeswift/runtime 0.13.0 → 0.14.0

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

@@ -0,0 +1,155 @@
+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 { useStyle } from "../../../../../../../runtimes/react/use-style";
+import { cx } from "@emotion/css";
+import { useResponsiveStyle } from "../../../../../../utils/responsive-style";
+function getCheckmarkColor({
+  swatch: { hue: h, saturation: s, lightness: l },
+  alpha: a
+}) {
+  return Color({ h, s, l }).alpha(a).isLight() ? "rgba(0, 0, 0, 0.7)" : "rgba(255, 255, 255, 0.95)";
+}
+const FAKE_CHECKBOX_CLASS_NAME = "fake-checkbox";
+function FakeCheckbox({ className, style, contrast, error }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style,
+      className: cx(
+        FAKE_CHECKBOX_CLASS_NAME,
+        useStyle({
+          position: "absolute",
+          width: "100%",
+          height: "100%",
+          borderStyle: "solid",
+          borderRadius: 4,
+          pointerEvents: "none",
+          borderWidth: 1
+        }),
+        useStyle(
+          useResponsiveStyle([contrast], ([contrast2 = Contrasts.LIGHT]) => ({
+            borderColor: getContrastBorderColor(contrast2, error),
+            backgroundColor: getContrastBackgroundColor(contrast2)
+          }))
+        ),
+        className
+      )
+    }
+  );
+}
+const HiddenCheckbox = forwardRef(function HiddenCheckbox2({ size, brandColor, contrast, error, className, ...restOfProps }, ref) {
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      ...restOfProps,
+      ref,
+      className: cx(
+        useStyle({
+          position: "absolute",
+          opacity: 0,
+          width: "100%",
+          height: "100%",
+          cursor: "pointer",
+          "&:disabled": {
+            cursor: "no-drop",
+            [`& ~ .${FAKE_CHECKBOX_CLASS_NAME}`]: {
+              opacity: 0.5
+            }
+          },
+          [`&:checked ~ .${FAKE_CHECKBOX_CLASS_NAME}`]: {
+            ...useResponsiveStyle(
+              [brandColor],
+              ([{ swatch = { hue: 0, saturation: 0, lightness: 0 }, alpha = 1 } = {}]) => ({
+                backgroundColor: colorToString({ swatch, alpha })
+              })
+            ),
+            borderColor: "transparent",
+            "&::after": {
+              content: '""',
+              position: "absolute",
+              boxSizing: "content-box",
+              width: "25%",
+              height: "50%",
+              borderStyle: "solid",
+              ...useResponsiveStyle(
+                [size, brandColor],
+                ([
+                  size2 = Sizes.MEDIUM,
+                  { swatch = { hue: 0, saturation: 0, lightness: 0 }, alpha = 1 } = {}
+                ]) => ({
+                  borderWidth: getSize(size2) * 0.1,
+                  borderLeft: 0,
+                  borderTop: 0,
+                  borderColor: getCheckmarkColor({ swatch, alpha })
+                })
+              ),
+              transform: "rotate(45deg) translate3d(91%, -23%, 0)"
+            }
+          },
+          "&:not(:disabled)": {
+            [`&:focus ~ .${FAKE_CHECKBOX_CLASS_NAME}`]: useResponsiveStyle(
+              [brandColor],
+              ([brandColor2 = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 }]) => ({
+                borderColor: colorToString(brandColor2)
+              })
+            )
+          },
+          "&:not(:disabled):checked": {
+            [`&:focus ~ .${FAKE_CHECKBOX_CLASS_NAME}`]: useResponsiveStyle(
+              [contrast],
+              ([contrast2 = Contrasts.LIGHT]) => ({
+                borderColor: getContrastBorderColor(contrast2, error)
+              })
+            )
+          }
+        }),
+        className
+      )
+    }
+  );
+});
+var Checkbox_default = forwardRef(function Checkbox({ error, className, style, form, ...restOfProps }, ref) {
+  const { size, contrast, brandColor } = useFormContext();
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cx(
+        useStyle({ position: "relative" }),
+        useStyle(
+          useResponsiveStyle([size], ([size2 = Sizes.MEDIUM]) => ({
+            height: getSize(size2),
+            width: getSize(size2)
+          }))
+        )
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          HiddenCheckbox,
+          {
+            ...restOfProps,
+            type: "checkbox",
+            ref,
+            error,
+            size,
+            contrast,
+            brandColor
+          }
+        ),
+        /* @__PURE__ */ jsx(FakeCheckbox, { className, error, contrast, style })
+      ]
+    }
+  );
+});
+export {
+  Checkbox_default as default
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../../src/components/builtin/Form/components/Field/components/Checkbox/index.tsx"],"sourcesContent":["import { forwardRef, CSSProperties, ComponentPropsWithoutRef, ForwardedRef } from 'react'\nimport Color from 'color'\n\nimport { getSizeHeight as getSize } from '../Label'\nimport {\n  useFormContext,\n  Value as FormContextValue,\n  Sizes,\n  Contrasts,\n} from '../../../../context/FormContext'\nimport { getContrastBorderColor, getContrastBackgroundColor } from '../../services/responsiveField'\nimport { colorToString } from '../../../../../../utils/colorToString'\nimport { SwatchValue } from '../../../../../../utils/types'\nimport { useStyle } from '../../../../../../../runtimes/react/use-style'\nimport { cx } from '@emotion/css'\nimport { useResponsiveStyle } from '../../../../../../utils/responsive-style'\n\nfunction getCheckmarkColor({\n  swatch: { hue: h, saturation: s, lightness: l },\n  alpha: a,\n}: {\n  swatch: SwatchValue\n  alpha: number\n}) {\n  return Color({ h, s, l }).alpha(a).isLight() ? 'rgba(0, 0, 0, 0.7)' : 'rgba(255, 255, 255, 0.95)'\n}\n\ntype FakeCheckboxProps = {\n  className?: string\n  style?: CSSProperties\n  contrast?: FormContextValue['contrast']\n  error?: boolean\n}\n\nconst FAKE_CHECKBOX_CLASS_NAME = 'fake-checkbox'\n\nfunction FakeCheckbox({ className, style, contrast, error }: FakeCheckboxProps) {\n  return (\n    <div\n      style={style}\n      className={cx(\n        FAKE_CHECKBOX_CLASS_NAME,\n        useStyle({\n          position: 'absolute',\n          width: '100%',\n          height: '100%',\n          borderStyle: 'solid',\n          borderRadius: 4,\n          pointerEvents: 'none',\n          borderWidth: 1,\n        }),\n        useStyle(\n          useResponsiveStyle([contrast] as const, ([contrast = Contrasts.LIGHT]) => ({\n            borderColor: getContrastBorderColor(contrast, error),\n            backgroundColor: getContrastBackgroundColor(contrast),\n          })),\n        ),\n        className,\n      )}\n    />\n  )\n}\n\ntype HiddenCheckboxBaseProps = Partial<\n  Pick<FormContextValue, 'size' | 'brandColor' | 'contrast'>\n> & {\n  error?: boolean\n}\n\ntype HiddenCheckboxProps = HiddenCheckboxBaseProps &\n  Omit<ComponentPropsWithoutRef<'input'>, keyof HiddenCheckboxBaseProps>\n\nconst HiddenCheckbox = forwardRef(function HiddenCheckbox(\n  { size, brandColor, contrast, error, className, ...restOfProps }: HiddenCheckboxProps,\n  ref: ForwardedRef<HTMLInputElement>,\n) {\n  return (\n    <input\n      {...restOfProps}\n      ref={ref}\n      className={cx(\n        useStyle({\n          position: 'absolute',\n          opacity: 0,\n          width: '100%',\n          height: '100%',\n          cursor: 'pointer',\n\n          '&:disabled': {\n            cursor: 'no-drop',\n\n            [`& ~ .${FAKE_CHECKBOX_CLASS_NAME}`]: {\n              opacity: 0.5,\n            },\n          },\n\n          [`&:checked ~ .${FAKE_CHECKBOX_CLASS_NAME}`]: {\n            ...useResponsiveStyle(\n              [brandColor] as const,\n              ([{ swatch = { hue: 0, saturation: 0, lightness: 0 }, alpha = 1 } = {}]) => ({\n                backgroundColor: colorToString({ swatch, alpha }),\n              }),\n            ),\n            borderColor: 'transparent',\n\n            '&::after': {\n              content: '\"\"',\n              position: 'absolute',\n              boxSizing: 'content-box',\n              width: '25%',\n              height: '50%',\n              borderStyle: 'solid',\n              ...useResponsiveStyle(\n                [size, brandColor] as const,\n                ([\n                  size = Sizes.MEDIUM,\n                  { swatch = { hue: 0, saturation: 0, lightness: 0 }, alpha = 1 } = {},\n                ]) => ({\n                  borderWidth: getSize(size) * 0.1,\n                  borderLeft: 0,\n                  borderTop: 0,\n                  borderColor: getCheckmarkColor({ swatch, alpha }),\n                }),\n              ),\n              transform: 'rotate(45deg) translate3d(91%, -23%, 0)',\n            },\n          },\n\n          '&:not(:disabled)': {\n            [`&:focus ~ .${FAKE_CHECKBOX_CLASS_NAME}`]: useResponsiveStyle(\n              [brandColor] as const,\n              ([brandColor = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 }]) => ({\n                borderColor: colorToString(brandColor),\n              }),\n            ),\n          },\n\n          '&:not(:disabled):checked': {\n            [`&:focus ~ .${FAKE_CHECKBOX_CLASS_NAME}`]: useResponsiveStyle(\n              [contrast] as const,\n              ([contrast = Contrasts.LIGHT]) => ({\n                borderColor: getContrastBorderColor(contrast, error),\n              }),\n            ),\n          },\n        }),\n        className,\n      )}\n    />\n  )\n})\n\ntype BaseProps = {\n  error?: boolean\n  className?: string\n  style?: CSSProperties\n  form?: unknown\n}\n\ntype Props = BaseProps & Omit<ComponentPropsWithoutRef<typeof HiddenCheckbox>, keyof BaseProps>\n\nexport default forwardRef<HTMLInputElement, Props>(function Checkbox(\n  { error, className, style, form, ...restOfProps }: Props,\n  ref,\n) {\n  const { size, contrast, brandColor } = useFormContext()\n\n  return (\n    <div\n      className={cx(\n        useStyle({ position: 'relative' }),\n        useStyle(\n          useResponsiveStyle([size] as const, ([size = Sizes.MEDIUM]) => ({\n            height: getSize(size),\n            width: getSize(size),\n          })),\n        ),\n      )}\n    >\n      <HiddenCheckbox\n        {...restOfProps}\n        type=\"checkbox\"\n        ref={ref}\n        error={error}\n        size={size}\n        contrast={contrast}\n        brandColor={brandColor}\n      />\n      <FakeCheckbox className={className} error={error} contrast={contrast} style={style} />\n    </div>\n  )\n})\n"],"mappings":"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","names":["contrast","HiddenCheckbox","size","brandColor"]}

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

@@ -0,0 +1,59 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useFormContext, Sizes } from "../../../../context/FormContext";
+import Label from "../Label";
+import { getSizeHeight as getInputSizeHeight } from "../Input";
+import Checkbox from "../Checkbox";
+import { useStyle } from "../../../../../../../runtimes/react/use-style";
+import { useResponsiveStyle } from "../../../../../../utils/responsive-style";
+import { cx } from "@emotion/css";
+var CheckboxTableField_default = forwardRef(function CheckboxTableField({
+  form,
+  id,
+  name,
+  label = "",
+  value = false,
+  error,
+  hideLabel,
+  tableColumn,
+  ...restOfProps
+}, ref) {
+  const { size } = useFormContext();
+  function handleChange(event) {
+    form.setFieldValue(name, event.currentTarget.checked);
+  }
+  return /* @__PURE__ */ jsxs(
+    Label,
+    {
+      className: cx(
+        useStyle({ display: "flex", alignItems: "center", margin: 0 }),
+        useStyle(
+          useResponsiveStyle([size], ([size2 = Sizes.MEDIUM]) => ({
+            minHeight: getInputSizeHeight(size2),
+            maxHeight: getInputSizeHeight(size2)
+          }))
+        )
+      ),
+      htmlFor: id,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: useStyle({ marginRight: 8 }), children: /* @__PURE__ */ jsx(
+          Checkbox,
+          {
+            ...restOfProps,
+            "aria-label": label,
+            checked: value,
+            onChange: handleChange,
+            ref,
+            id,
+            error: error != null
+          }
+        ) }),
+        label
+      ]
+    }
+  );
+});
+export {
+  CheckboxTableField_default as default
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../../src/components/builtin/Form/components/Field/components/CheckboxTableField/index.tsx"],"sourcesContent":["import { ForwardedRef, forwardRef, SyntheticEvent } from 'react'\nimport { FormikProps } from 'formik'\n\nimport { useFormContext, Sizes } from '../../../../context/FormContext'\nimport Label from '../Label'\nimport { getSizeHeight as getInputSizeHeight } from '../Input'\nimport Checkbox from '../Checkbox'\nimport { useStyle } from '../../../../../../../runtimes/react/use-style'\nimport { useResponsiveStyle } from '../../../../../../utils/responsive-style'\nimport { cx } from '@emotion/css'\nimport { TableColumn } from '../../../../types'\n\ntype Props = {\n  form: FormikProps<{\n    [key: string]: boolean\n  }>\n  id: string\n  label?: string\n  name: string\n  value?: boolean\n  error?: string\n  hideLabel?: boolean\n  tableColumn?: TableColumn | null\n}\n\nexport default forwardRef(function CheckboxTableField(\n  {\n    form,\n    id,\n    name,\n    label = '',\n    value = false,\n    error,\n    hideLabel,\n    tableColumn,\n    ...restOfProps\n  }: Props,\n  ref: ForwardedRef<HTMLInputElement>,\n) {\n  const { size } = useFormContext()\n\n  function handleChange(event: SyntheticEvent<HTMLInputElement>) {\n    form.setFieldValue(name, event.currentTarget.checked)\n  }\n\n  return (\n    <Label\n      className={cx(\n        useStyle({ display: 'flex', alignItems: 'center', margin: 0 }),\n        useStyle(\n          useResponsiveStyle([size] as const, ([size = Sizes.MEDIUM]) => ({\n            minHeight: getInputSizeHeight(size),\n            maxHeight: getInputSizeHeight(size),\n          })),\n        ),\n      )}\n      htmlFor={id}\n    >\n      <span className={useStyle({ marginRight: 8 })}>\n        <Checkbox\n          {...restOfProps}\n          aria-label={label}\n          checked={value}\n          onChange={handleChange}\n          ref={ref}\n          id={id}\n          error={error != null}\n        />\n      </span>\n      {label}\n    </Label>\n  )\n})\n"],"mappings":"AA8CI,SAaI,KAbJ;AA9CJ,SAAuB,kBAAkC;AAGzD,SAAS,gBAAgB,aAAa;AACtC,OAAO,WAAW;AAClB,SAAS,iBAAiB,0BAA0B;AACpD,OAAO,cAAc;AACrB,SAAS,gBAAgB;AACzB,SAAS,0BAA0B;AACnC,SAAS,UAAU;AAgBnB,IAAO,6BAAQ,WAAW,SAAS,mBACjC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GACA,KACA;AACA,QAAM,EAAE,KAAK,IAAI,eAAe;AAEhC,WAAS,aAAa,OAAyC;AAC7D,SAAK,cAAc,MAAM,MAAM,cAAc,OAAO;AAAA,EACtD;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT,SAAS,EAAE,SAAS,QAAQ,YAAY,UAAU,QAAQ,EAAE,CAAC;AAAA,QAC7D;AAAA,UACE,mBAAmB,CAAC,IAAI,GAAY,CAAC,CAACA,QAAO,MAAM,MAAM,OAAO;AAAA,YAC9D,WAAW,mBAAmBA,KAAI;AAAA,YAClC,WAAW,mBAAmBA,KAAI;AAAA,UACpC,EAAE;AAAA,QACJ;AAAA,MACF;AAAA,MACA,SAAS;AAAA,MAET;AAAA,4BAAC,UAAK,WAAW,SAAS,EAAE,aAAa,EAAE,CAAC,GAC1C;AAAA,UAAC;AAAA;AAAA,YACE,GAAG;AAAA,YACJ,cAAY;AAAA,YACZ,SAAS;AAAA,YACT,UAAU;AAAA,YACV;AAAA,YACA;AAAA,YACA,OAAO,SAAS;AAAA;AAAA,QAClB,GACF;AAAA,QACC;AAAA;AAAA;AAAA,EACH;AAEJ,CAAC;","names":["size"]}

package/dist/esm/components/builtin/Form/components/Field/components/EmailTableField/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 EmailTableField_default = forwardRef(function EmailTableField({ 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: "email",
+        error: error != null
+      }
+    )
+  ] });
+});
+export {
+  EmailTableField_default as default
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../../src/components/builtin/Form/components/Field/components/EmailTableField/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 EmailTableField(\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=\"email\"\n        error={error != null}\n      />\n    </>\n  )\n})\n"],"mappings":"AAoBI,mBACiB,KADjB;AApBJ,SAAS,kBAAkB;AAE3B,OAAO,WAAW;AAClB,OAAO,WAAW;AAYlB,IAAO,0BAAQ,WAAoC,SAAS,gBAC1D,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/Input/index.js

@@ -0,0 +1,44 @@
+import { jsx } 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 } from "../../../../context/FormContext";
+import responsiveField from "../../services/responsiveField";
+function getSizeHeight(size) {
+  switch (size) {
+    case Sizes.SMALL:
+      return 36;
+    case Sizes.MEDIUM:
+      return 42;
+    case Sizes.LARGE:
+      return 48;
+    default:
+      throw new Error(`Invalid form size "${size}"`);
+  }
+}
+var Input_default = forwardRef(function Input({ error = false, form, className, ...restOfProps }, ref) {
+  const { shape, size, contrast, brandColor } = useFormContext();
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      ...restOfProps,
+      ref,
+      className: cx(
+        useStyle(responsiveField({ shape, size, contrast, brandColor, error })),
+        useStyle(
+          useResponsiveStyle([size], ([size2 = Sizes.MEDIUM]) => ({
+            minHeight: getSizeHeight(size2),
+            maxHeight: getSizeHeight(size2)
+          }))
+        ),
+        className
+      )
+    }
+  );
+});
+export {
+  Input_default as default,
+  getSizeHeight
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../../src/components/builtin/Form/components/Field/components/Input/index.tsx"],"sourcesContent":["import { cx } from '@emotion/css'\nimport { ComponentPropsWithoutRef, ForwardedRef, forwardRef } from 'react'\nimport { useStyle } from '../../../../../../../runtimes/react/use-style'\n\nimport { useResponsiveStyle } from '../../../../../../utils/responsive-style'\nimport { Size, useFormContext, Sizes } from '../../../../context/FormContext'\nimport responsiveField from '../../services/responsiveField'\n\nexport function getSizeHeight(size: Size): number {\n  switch (size) {\n    case Sizes.SMALL:\n      return 36\n\n    case Sizes.MEDIUM:\n      return 42\n\n    case Sizes.LARGE:\n      return 48\n\n    default:\n      throw new Error(`Invalid form size \"${size}\"`)\n  }\n}\n\ntype BaseProps = { error?: boolean; form?: unknown }\n\ntype Props = BaseProps & Omit<ComponentPropsWithoutRef<'input'>, keyof BaseProps>\n\nexport default forwardRef(function Input(\n  { error = false, form, className, ...restOfProps }: Props,\n  ref: ForwardedRef<HTMLInputElement>,\n) {\n  const { shape, size, contrast, brandColor } = useFormContext()\n\n  return (\n    <input\n      {...restOfProps}\n      ref={ref}\n      className={cx(\n        useStyle(responsiveField({ shape, size, contrast, brandColor, error })),\n        useStyle(\n          useResponsiveStyle([size] as const, ([size = Sizes.MEDIUM]) => ({\n            minHeight: getSizeHeight(size),\n            maxHeight: getSizeHeight(size),\n          })),\n        ),\n        className,\n      )}\n    />\n  )\n})\n"],"mappings":"AAmCI;AAnCJ,SAAS,UAAU;AACnB,SAAiD,kBAAkB;AACnE,SAAS,gBAAgB;AAEzB,SAAS,0BAA0B;AACnC,SAAe,gBAAgB,aAAa;AAC5C,OAAO,qBAAqB;AAErB,SAAS,cAAc,MAAoB;AAChD,UAAQ,MAAM;AAAA,IACZ,KAAK,MAAM;AACT,aAAO;AAAA,IAET,KAAK,MAAM;AACT,aAAO;AAAA,IAET,KAAK,MAAM;AACT,aAAO;AAAA,IAET;AACE,YAAM,IAAI,MAAM,sBAAsB,IAAI,GAAG;AAAA,EACjD;AACF;AAMA,IAAO,gBAAQ,WAAW,SAAS,MACjC,EAAE,QAAQ,OAAO,MAAM,WAAW,GAAG,YAAY,GACjD,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,gBAAgB,EAAE,OAAO,MAAM,UAAU,YAAY,MAAM,CAAC,CAAC;AAAA,QACtE;AAAA,UACE,mBAAmB,CAAC,IAAI,GAAY,CAAC,CAACA,QAAO,MAAM,MAAM,OAAO;AAAA,YAC9D,WAAW,cAAcA,KAAI;AAAA,YAC7B,WAAW,cAAcA,KAAI;AAAA,UAC/B,EAAE;AAAA,QACJ;AAAA,QACA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ,CAAC;","names":["size"]}

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

@@ -0,0 +1,64 @@
+import { jsx } from "react/jsx-runtime";
+import { colorToString } from "../../../../../../utils/colorToString";
+import { useFormContext, Sizes, Contrasts } from "../../../../context/FormContext";
+import { cx } from "@emotion/css";
+import { useStyle } from "../../../../../../../runtimes/react/use-style";
+import {
+  useResponsiveStyle,
+  useResponsiveTextStyle
+} from "../../../../../../utils/responsive-style";
+function getSizeHeight(size) {
+  switch (size) {
+    case Sizes.SMALL:
+      return 14;
+    case Sizes.MEDIUM:
+      return 18;
+    case Sizes.LARGE:
+      return 22;
+    default:
+      throw new Error(`Invalid form size "${size}"`);
+  }
+}
+function getContrastColor(contrast) {
+  switch (contrast) {
+    case Contrasts.LIGHT:
+      return "rgba(0, 0, 0, 0.8)";
+    case Contrasts.DARK:
+      return "rgba(255, 255, 255, 0.95)";
+    default:
+      throw new Error(`Invalid form contrast "${contrast}"`);
+  }
+}
+function Label({
+  as,
+  className,
+  ...restOfProps
+}) {
+  const Component = as ?? "label";
+  const { contrast, size, labelTextStyle, labelTextColor } = useFormContext();
+  return /* @__PURE__ */ jsx(
+    Component,
+    {
+      ...restOfProps,
+      className: cx(
+        useStyle({ display: "block", margin: "0 0 0.25em 0" }),
+        useStyle(useResponsiveTextStyle(labelTextStyle)),
+        useStyle(
+          useResponsiveStyle(
+            [size, contrast, labelTextColor],
+            ([size2 = Sizes.MEDIUM, contrast2 = Contrasts.LIGHT, textColor]) => ({
+              minHeight: getSizeHeight(size2),
+              color: textColor == null ? getContrastColor(contrast2) : colorToString(textColor)
+            })
+          )
+        ),
+        className
+      )
+    }
+  );
+}
+export {
+  Label as default,
+  getSizeHeight
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../../src/components/builtin/Form/components/Field/components/Label/index.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, ElementType } from 'react'\nimport { colorToString } from '../../../../../../utils/colorToString'\n\nimport { useFormContext, Size, Sizes, Contrast, Contrasts } from '../../../../context/FormContext'\nimport { cx } from '@emotion/css'\nimport { useStyle } from '../../../../../../../runtimes/react/use-style'\nimport {\n  useResponsiveStyle,\n  useResponsiveTextStyle,\n} from '../../../../../../utils/responsive-style'\n\nexport function getSizeHeight(size: Size): number {\n  switch (size) {\n    case Sizes.SMALL:\n      return 14\n\n    case Sizes.MEDIUM:\n      return 18\n\n    case Sizes.LARGE:\n      return 22\n\n    default:\n      throw new Error(`Invalid form size \"${size}\"`)\n  }\n}\n\nfunction getContrastColor(contrast: Contrast): string {\n  switch (contrast) {\n    case Contrasts.LIGHT:\n      return 'rgba(0, 0, 0, 0.8)'\n\n    case Contrasts.DARK:\n      return 'rgba(255, 255, 255, 0.95)'\n\n    default:\n      throw new Error(`Invalid form contrast \"${contrast}\"`)\n  }\n}\n\ntype BaseProps<T extends ElementType> = {\n  as?: T\n}\n\ntype Props<T extends ElementType> = BaseProps<T> &\n  Omit<ComponentPropsWithoutRef<'label'>, keyof BaseProps<T>>\n\nexport default function Label<T extends ElementType = 'label'>({\n  as,\n  className,\n  ...restOfProps\n}: Props<T>): JSX.Element {\n  const Component = as ?? 'label'\n  const { contrast, size, labelTextStyle, labelTextColor } = useFormContext()\n\n  return (\n    <Component\n      {...restOfProps}\n      className={cx(\n        useStyle({ display: 'block', margin: '0 0 0.25em 0' }),\n        useStyle(useResponsiveTextStyle(labelTextStyle)),\n        useStyle(\n          useResponsiveStyle(\n            [size, contrast, labelTextColor] as const,\n            ([size = Sizes.MEDIUM, contrast = Contrasts.LIGHT, textColor]) => ({\n              minHeight: getSizeHeight(size),\n              color: textColor == null ? getContrastColor(contrast) : colorToString(textColor),\n            }),\n          ),\n        ),\n        className,\n      )}\n    />\n  )\n}\n"],"mappings":"AAwDI;AAvDJ,SAAS,qBAAqB;AAE9B,SAAS,gBAAsB,OAAiB,iBAAiB;AACjE,SAAS,UAAU;AACnB,SAAS,gBAAgB;AACzB;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAEA,SAAS,cAAc,MAAoB;AAChD,UAAQ,MAAM;AAAA,IACZ,KAAK,MAAM;AACT,aAAO;AAAA,IAET,KAAK,MAAM;AACT,aAAO;AAAA,IAET,KAAK,MAAM;AACT,aAAO;AAAA,IAET;AACE,YAAM,IAAI,MAAM,sBAAsB,IAAI,GAAG;AAAA,EACjD;AACF;AAEA,SAAS,iBAAiB,UAA4B;AACpD,UAAQ,UAAU;AAAA,IAChB,KAAK,UAAU;AACb,aAAO;AAAA,IAET,KAAK,UAAU;AACb,aAAO;AAAA,IAET;AACE,YAAM,IAAI,MAAM,0BAA0B,QAAQ,GAAG;AAAA,EACzD;AACF;AASe,SAAR,MAAwD;AAAA,EAC7D;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAA0B;AACxB,QAAM,YAAY,MAAM;AACxB,QAAM,EAAE,UAAU,MAAM,gBAAgB,eAAe,IAAI,eAAe;AAE1E,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW;AAAA,QACT,SAAS,EAAE,SAAS,SAAS,QAAQ,eAAe,CAAC;AAAA,QACrD,SAAS,uBAAuB,cAAc,CAAC;AAAA,QAC/C;AAAA,UACE;AAAA,YACE,CAAC,MAAM,UAAU,cAAc;AAAA,YAC/B,CAAC,CAACA,QAAO,MAAM,QAAQC,YAAW,UAAU,OAAO,SAAS,OAAO;AAAA,cACjE,WAAW,cAAcD,KAAI;AAAA,cAC7B,OAAO,aAAa,OAAO,iBAAiBC,SAAQ,IAAI,cAAc,SAAS;AAAA,YACjF;AAAA,UACF;AAAA,QACF;AAAA,QACA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;","names":["size","contrast"]}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../../src/components/builtin/Form/components/Field/components/LongTextTableField/index.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport { TableColumn } from '../../../../types'\n\nimport Label from '../Label'\nimport TextArea from '../TextArea'\n\ntype Props = {\n  id: string\n  label?: string\n  error?: string\n  hideLabel?: boolean\n  tableColumn?: TableColumn | null\n}\n\nexport default forwardRef<HTMLTextAreaElement, Props>(function LongTextTableField(\n  { id, label = '', error, hideLabel = false, tableColumn, ...restOfProps }: Props,\n  ref,\n) {\n  return (\n    <>\n      {!hideLabel && <Label htmlFor={id}>{label}</Label>}\n      <TextArea {...restOfProps} aria-label={label} ref={ref} id={id} error={error != null} />\n    </>\n  )\n})\n"],"mappings":"AAmBI,mBACiB,KADjB;AAnBJ,SAAS,kBAAkB;AAG3B,OAAO,WAAW;AAClB,OAAO,cAAc;AAUrB,IAAO,6BAAQ,WAAuC,SAAS,mBAC7D,EAAE,IAAI,QAAQ,IAAI,OAAO,YAAY,OAAO,aAAa,GAAG,YAAY,GACxE,KACA;AACA,SACE,iCACG;AAAA,KAAC,aAAa,oBAAC,SAAM,SAAS,IAAK,iBAAM;AAAA,IAC1C,oBAAC,YAAU,GAAG,aAAa,cAAY,OAAO,KAAU,IAAQ,OAAO,SAAS,MAAM;AAAA,KACxF;AAEJ,CAAC;","names":[]}

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

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

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

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

package/dist/esm/components/builtin/Form/components/Field/components/NumberTableField/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 NumberTableField_default = forwardRef(function NumberTableField({ 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: "number",
+        error: error != null
+      }
+    )
+  ] });
+});
+export {
+  NumberTableField_default as default
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../../src/components/builtin/Form/components/Field/components/NumberTableField/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 NumberTableField(\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=\"number\"\n        error={error != null}\n      />\n    </>\n  )\n})\n"],"mappings":"AAoBI,mBACiB,KADjB;AApBJ,SAAS,kBAAkB;AAE3B,OAAO,WAAW;AAClB,OAAO,WAAW;AAYlB,IAAO,2BAAQ,WAAoC,SAAS,iBAC1D,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/PhoneNumberTableField/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 PhoneNumberTableField_default = forwardRef(function PhoneNumberTableField({ 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: "tel",
+        error: error != null
+      }
+    )
+  ] });
+});
+export {
+  PhoneNumberTableField_default as default
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../../src/components/builtin/Form/components/Field/components/PhoneNumberTableField/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 PhoneNumberTableField(\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=\"tel\"\n        error={error != null}\n      />\n    </>\n  )\n})\n"],"mappings":"AAoBI,mBACiB,KADjB;AApBJ,SAAS,kBAAkB;AAE3B,OAAO,WAAW;AAClB,OAAO,WAAW;AAYlB,IAAO,gCAAQ,WAAoC,SAAS,sBAC1D,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/PlaceholderTableField/index.js

@@ -0,0 +1,70 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+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";
+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)
+          }))
+        )
+      )
+    }
+  );
+}
+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)
+            })
+          )
+        )
+      )
+    }
+  );
+}
+function PlaceholderTableField() {
+  const { size, shape } = useFormContext();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Label, { size }),
+    /* @__PURE__ */ jsx(Input, { shape, size })
+  ] });
+}
+export {
+  PlaceholderTableField as default
+};
+//# sourceMappingURL=index.js.map