@makeswift/runtime 0.13.0 → 0.14.0

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

@@ -0,0 +1,44 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var SingleSelectTableField_exports = {};
+__export(SingleSelectTableField_exports, {
+  default: () => SingleSelectTableField_default
+});
+module.exports = __toCommonJS(SingleSelectTableField_exports);
+var import_jsx_runtime = (
+  // @ts-expect-error: custom ref doesn't match select element
+  require("react/jsx-runtime")
+);
+var import_react = require("react");
+var import_TableColumnRadioButtonGroup = __toESM(require("./components/TableColumnRadioButtonGroup"));
+var import_TableColumnSingleSelect = __toESM(require("./components/TableColumnSingleSelect"));
+var SingleSelectTableField_default = (0, import_react.forwardRef)(function SingleSelectTableField({ type, ...restOfProps }, ref) {
+  return type === "select" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TableColumnSingleSelect.default, { ...restOfProps, ref }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TableColumnRadioButtonGroup.default, { ...restOfProps, ref });
+});
+//# sourceMappingURL=index.js.map

package/dist/cjs/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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAgCI;AAAA;AAAA;AAAA;AAhCJ,mBAA2C;AAE3C,yCAAwC;AACxC,qCAAoC;AAkBpC,IAAO,qCAAQ,yBAQb,SAAS,uBAAuB,EAAE,MAAM,GAAG,YAAY,GAAU,KAAK;AACtE,SAAO,SAAS,WAEd,4CAAC,+BAAAA,SAAA,EAAyB,GAAG,aAAa,KAAU,IAEpD,4CAAC,mCAAAC,SAAA,EAA6B,GAAG,aAAa,KAAU;AAE5D,CAAC;","names":["TableColumnSingleSelect","TableColumnRadioButtonGroup"]}

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

@@ -0,0 +1,55 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var TextArea_exports = {};
+__export(TextArea_exports, {
+  default: () => TextArea_default
+});
+module.exports = __toCommonJS(TextArea_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_css = require("@emotion/css");
+var import_react = require("react");
+var import_use_style = require("../../../../../../../runtimes/react/use-style");
+var import_FormContext = require("../../../../context/FormContext");
+var import_responsiveField = __toESM(require("../../services/responsiveField"));
+var TextArea_default = (0, import_react.forwardRef)(function TextArea({ error = false, form, ...restOfProps }, ref) {
+  const { shape, size, contrast, brandColor } = (0, import_FormContext.useFormContext)();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "textarea",
+    {
+      ...restOfProps,
+      ref,
+      className: (0, import_css.cx)(
+        (0, import_use_style.useStyle)({ resize: "vertical" }),
+        (0, import_use_style.useStyle)((0, import_responsiveField.default)({ error, shape, size, contrast, brandColor }))
+      ),
+      rows: 4
+    }
+  );
+});
+//# sourceMappingURL=index.js.map

package/dist/cjs/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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAiBI;AAjBJ,iBAAmB;AACnB,mBAAqD;AACrD,uBAAyB;AACzB,yBAA+B;AAC/B,6BAA4B;AAM5B,IAAO,uBAAQ,yBAAuC,SAAS,SAC7D,EAAE,QAAQ,OAAO,MAAM,GAAG,YAAY,GACtC,KACA;AACA,QAAM,EAAE,OAAO,MAAM,UAAU,WAAW,QAAI,mCAAe;AAE7D,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA,eAAW;AAAA,YACT,2BAAS,EAAE,QAAQ,WAAW,CAAC;AAAA,YAC/B,+BAAS,uBAAAA,SAAgB,EAAE,OAAO,OAAO,MAAM,UAAU,WAAW,CAAC,CAAC;AAAA,MACxE;AAAA,MACA,MAAM;AAAA;AAAA,EACR;AAEJ,CAAC;","names":["responsiveField"]}

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

@@ -0,0 +1,55 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var URLTableField_exports = {};
+__export(URLTableField_exports, {
+  default: () => URLTableField_default
+});
+module.exports = __toCommonJS(URLTableField_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_Label = __toESM(require("../Label"));
+var import_Input = __toESM(require("../Input"));
+var URLTableField_default = (0, import_react.forwardRef)(function URLTableField({ id, label = "", name, error, hideLabel = false, tableColumn, ...restOfProps }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    !hideLabel && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Label.default, { htmlFor: id, children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_Input.default,
+      {
+        ...restOfProps,
+        "aria-label": label,
+        ref,
+        id,
+        name,
+        type: "url",
+        error: error != null
+      }
+    )
+  ] });
+});
+//# sourceMappingURL=index.js.map

package/dist/cjs/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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAoBI;AApBJ,mBAA2B;AAE3B,mBAAkB;AAClB,mBAAkB;AAYlB,IAAO,4BAAQ,yBAAoC,SAAS,cAC1D,EAAE,IAAI,QAAQ,IAAI,MAAM,OAAO,YAAY,OAAO,aAAa,GAAG,YAAY,GAC9E,KACA;AACA,SACE,4EACG;AAAA,KAAC,aAAa,4CAAC,aAAAA,SAAA,EAAM,SAAS,IAAK,iBAAM;AAAA,IAC1C;AAAA,MAAC,aAAAC;AAAA,MAAA;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":["Label","Input"]}

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

@@ -0,0 +1,136 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Field_exports = {};
+__export(Field_exports, {
+  default: () => Field
+});
+module.exports = __toCommonJS(Field_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_formik = require("formik");
+var import_SingleLineTextTableField = __toESM(require("./components/SingleLineTextTableField"));
+var import_LongTextTableField = __toESM(require("./components/LongTextTableField"));
+var import_CheckboxTableField = __toESM(require("./components/CheckboxTableField"));
+var import_MultipleSelectTableField = __toESM(require("./components/MultipleSelectTableField"));
+var import_SingleSelectTableField = __toESM(require("./components/SingleSelectTableField"));
+var import_PhoneNumberTableField = __toESM(require("./components/PhoneNumberTableField"));
+var import_EmailTableField = __toESM(require("./components/EmailTableField"));
+var import_URLTableField = __toESM(require("./components/URLTableField"));
+var import_NumberTableField = __toESM(require("./components/NumberTableField"));
+var import_PlaceholderTableField = __toESM(require("./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 import_SingleLineTextTableField.default;
+    case "LongTextTableColumn":
+      return import_LongTextTableField.default;
+    case "CheckboxTableColumn":
+      return import_CheckboxTableField.default;
+    case "MultipleSelectTableColumn":
+      return import_MultipleSelectTableField.default;
+    case "SingleSelectTableColumn":
+      return import_SingleSelectTableField.default;
+    case "PhoneNumberTableColumn":
+      return import_PhoneNumberTableField.default;
+    case "EmailTableColumn":
+      return import_EmailTableField.default;
+    case "URLTableColumn":
+      return import_URLTableField.default;
+    case "NumberTableColumn":
+      return import_NumberTableField.default;
+    default:
+      return import_SingleLineTextTableField.default;
+  }
+}
+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 = (0, import_react.useRef)(null);
+  if (!tableColumn)
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_PlaceholderTableField.default, {});
+  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__ */ (0, import_jsx_runtime.jsx)(import_formik.Field, { name: formikFieldName, validate, children: ({ field, form }) => hidden ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", { ...field, ref: input, type: "hidden" }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    TableColumnField,
+    {
+      ...field,
+      type,
+      form,
+      tableColumn,
+      ref: input,
+      id,
+      error: (0, import_formik.getIn)(form.touched, field.name) && (0, import_formik.getIn)(form.errors, field.name),
+      label,
+      placeholder,
+      required,
+      hideLabel
+    }
+  ) });
+}
+//# sourceMappingURL=index.js.map

package/dist/cjs/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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAoH2B;AApH3B,mBAAuB;AACvB,oBAA4C;AAE5C,sCAAqC;AACrC,gCAA+B;AAC/B,gCAA+B;AAC/B,sCAAqC;AACrC,oCAAmC;AACnC,mCAAkC;AAClC,6BAA4B;AAC5B,2BAA0B;AAC1B,8BAA6B;AAC7B,mCAAkC;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,gCAAAA;AAAA,IAET,KAAK;AACH,aAAO,0BAAAC;AAAA,IAET,KAAK;AACH,aAAO,0BAAAC;AAAA,IAET,KAAK;AACH,aAAO,gCAAAC;AAAA,IAET,KAAK;AACH,aAAO,8BAAAC;AAAA,IAET,KAAK;AACH,aAAO,6BAAAC;AAAA,IAET,KAAK;AACH,aAAO,uBAAAC;AAAA,IAET,KAAK;AACH,aAAO,qBAAAC;AAAA,IAET,KAAK;AACH,aAAO,wBAAAC;AAAA,IAET;AACE,aAAO,gCAAAR;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,YAAQ,qBASZ,IAAI;AAEN,MAAI,CAAC;AAAa,WAAO,4CAAC,6BAAAS,SAAA,EAAsB;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,4CAAC,cAAAC,OAAA,EAAY,MAAM,iBAAiB,UACjC,WAAC,EAAE,OAAO,KAAK,MACd,SACE,4CAAC,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,WAAO,qBAAM,KAAK,SAAS,MAAM,IAAI,SAAK,qBAAM,KAAK,QAAQ,MAAM,IAAI;AAAA,MACvE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACF,GAGN;AAEJ;","names":["SingleLineTextTableField","LongTextTableField","CheckboxTableField","MultipleSelectTableField","SingleSelectTableField","PhoneNumberTableField","EmailTableField","URLTableField","NumberTableField","PlaceholderTableField","FormikField"]}

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

@@ -0,0 +1,161 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var responsiveField_exports = {};
+__export(responsiveField_exports, {
+  default: () => responsiveField,
+  getContrastBackgroundColor: () => getContrastBackgroundColor,
+  getContrastBorderColor: () => getContrastBorderColor,
+  getContrastColor: () => getContrastColor,
+  getShapeBorderRadius: () => getShapeBorderRadius,
+  getSizeHeight: () => getSizeHeight,
+  getSizeHorizontalPadding: () => getSizeHorizontalPadding
+});
+module.exports = __toCommonJS(responsiveField_exports);
+var import_colorToString = require("../../../../../utils/colorToString");
+var import_FormContext = require("../../../context/FormContext");
+var import_responsive_style = require("../../../../../utils/responsive-style");
+function getSizeHeight(size) {
+  switch (size) {
+    case import_FormContext.Sizes.SMALL:
+      return 30;
+    case import_FormContext.Sizes.MEDIUM:
+      return 38;
+    case import_FormContext.Sizes.LARGE:
+      return 48;
+    default:
+      throw new Error(`Invalid form size "${size}"`);
+  }
+}
+function getSizeHorizontalPadding(size) {
+  switch (size) {
+    case import_FormContext.Sizes.SMALL:
+      return 8;
+    case import_FormContext.Sizes.MEDIUM:
+      return 12;
+    case import_FormContext.Sizes.LARGE:
+      return 16;
+    default:
+      throw new Error(`Invalid form size "${size}"`);
+  }
+}
+function getSizeVerticalPadding(size) {
+  switch (size) {
+    case import_FormContext.Sizes.SMALL:
+      return 3;
+    case import_FormContext.Sizes.MEDIUM:
+      return 7;
+    case import_FormContext.Sizes.LARGE:
+      return 11;
+    default:
+      throw new Error(`Invalid form size "${size}"`);
+  }
+}
+function getShapeBorderRadius(shape) {
+  switch (shape) {
+    case import_FormContext.Shapes.SQUARE:
+      return 0;
+    case import_FormContext.Shapes.ROUNDED:
+      return 4;
+    case import_FormContext.Shapes.PILL:
+      return 500;
+    default:
+      throw new Error(`Invalid form shape "${shape}"`);
+  }
+}
+function getContrastBorderColor(contrast, error) {
+  switch (contrast) {
+    case import_FormContext.Contrasts.LIGHT:
+      return error ? "rgba(255, 0, 0, 0.7)" : "rgba(0, 0, 0, 0.25)";
+    case import_FormContext.Contrasts.DARK:
+      return error ? "rgba(255, 0, 0, 0.7)" : "rgba(255, 255, 255, 0.6)";
+    default:
+      throw new Error(`Invalid form contrast "${contrast}"`);
+  }
+}
+function getContrastBackgroundColor(contrast) {
+  switch (contrast) {
+    case import_FormContext.Contrasts.LIGHT:
+      return "white";
+    case import_FormContext.Contrasts.DARK:
+      return "rgba(0, 0, 0, 0.7)";
+    default:
+      throw new Error(`Invalid form contrast "${contrast}"`);
+  }
+}
+function getContrastColor(contrast) {
+  switch (contrast) {
+    case import_FormContext.Contrasts.LIGHT:
+      return "rgba(0, 0, 0, 0.95)";
+    case import_FormContext.Contrasts.DARK:
+      return "white";
+    default:
+      throw new Error(`Invalid form contrast "${contrast}"`);
+  }
+}
+function getContrastPlaceholderColor(contrast) {
+  switch (contrast) {
+    case import_FormContext.Contrasts.LIGHT:
+      return "rgba(0, 0, 0, 0.3)";
+    case import_FormContext.Contrasts.DARK:
+      return "rgba(255,255,255,0.3)";
+    default:
+      throw new Error(`Invalid form contrast "${contrast}"`);
+  }
+}
+function responsiveField(props) {
+  return {
+    display: "block",
+    width: "100%",
+    outline: "none",
+    borderWidth: 1,
+    borderStyle: "solid",
+    transition: "border-color 200ms",
+    ...(0, import_responsive_style.useResponsiveStyle)(
+      [props.shape, props.size, props.contrast, props.brandColor],
+      ([
+        shape = import_FormContext.Shapes.ROUNDED,
+        size = import_FormContext.Sizes.MEDIUM,
+        contrast = import_FormContext.Contrasts.LIGHT,
+        brandColor = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 }
+      ]) => ({
+        padding: `${getSizeVerticalPadding(size)}px ${getSizeHorizontalPadding(size)}px`,
+        borderRadius: getShapeBorderRadius(shape),
+        borderColor: getContrastBorderColor(contrast, props.error),
+        color: getContrastColor(contrast),
+        backgroundColor: getContrastBackgroundColor(contrast),
+        ":focus, :focus-within": {
+          borderColor: (0, import_colorToString.colorToString)(brandColor)
+        },
+        "::placeholder": {
+          color: getContrastPlaceholderColor(contrast)
+        }
+      })
+    )
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  getContrastBackgroundColor,
+  getContrastBorderColor,
+  getContrastColor,
+  getShapeBorderRadius,
+  getSizeHeight,
+  getSizeHorizontalPadding
+});
+//# sourceMappingURL=responsiveField.js.map

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

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

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

@@ -0,0 +1,99 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Placeholder_exports = {};
+__export(Placeholder_exports, {
+  default: () => Placeholder_default
+});
+module.exports = __toCommonJS(Placeholder_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_css = require("@emotion/css");
+var import_react = require("react");
+var import_use_style = require("../../../../../runtimes/react/use-style");
+function Label() {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      className: (0, import_use_style.useStyle)({
+        maxWidth: 120,
+        minWidth: 60,
+        height: 8,
+        borderRadius: 2,
+        backgroundColor: "#a1a8c2",
+        opacity: 0.4,
+        marginBottom: 8
+      })
+    }
+  );
+}
+function Input() {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      className: (0, import_use_style.useStyle)({
+        minWidth: 80,
+        height: 32,
+        borderRadius: 4,
+        borderWidth: 2,
+        borderStyle: "solid",
+        borderColor: "#a1a8c2",
+        opacity: 0.4
+      })
+    }
+  );
+}
+function Button() {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      className: (0, import_use_style.useStyle)({
+        minWidth: 140,
+        height: 32,
+        borderRadius: 4,
+        backgroundColor: "#a1a8c2",
+        opacity: 0.4
+      })
+    }
+  );
+}
+var Placeholder_default = (0, import_react.forwardRef)(function Placeholder({ className, width, margin }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      ref,
+      className: (0, import_css.cx)(
+        (0, import_use_style.useStyle)({ display: "flex", flexDirection: "column" }),
+        width,
+        margin,
+        className
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", flexDirection: "column", marginBottom: 16 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Label, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Input, {})
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", flexDirection: "column", marginBottom: 16 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Label, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Input, {})
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { display: "flex", flexDirection: "column", justifyContent: "flex-end" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, {}) })
+      ]
+    }
+  );
+});
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../src/components/builtin/Form/components/Placeholder/index.tsx"],"sourcesContent":["import { cx } from '@emotion/css'\nimport { forwardRef, Ref } from 'react'\n\nimport { useStyle } from '../../../../../runtimes/react/use-style'\n\nfunction Label() {\n  return (\n    <div\n      className={useStyle({\n        maxWidth: 120,\n        minWidth: 60,\n        height: 8,\n        borderRadius: 2,\n        backgroundColor: '#a1a8c2',\n        opacity: 0.4,\n        marginBottom: 8,\n      })}\n    />\n  )\n}\n\nfunction Input() {\n  return (\n    <div\n      className={useStyle({\n        minWidth: 80,\n        height: 32,\n        borderRadius: 4,\n        borderWidth: 2,\n        borderStyle: 'solid',\n        borderColor: '#a1a8c2',\n        opacity: 0.4,\n      })}\n    />\n  )\n}\n\nfunction Button() {\n  return (\n    <div\n      className={useStyle({\n        minWidth: 140,\n        height: 32,\n        borderRadius: 4,\n        backgroundColor: '#a1a8c2',\n        opacity: 0.4,\n      })}\n    />\n  )\n}\n\ntype Props = {\n  className?: string\n  width?: string\n  margin?: string\n}\n\nexport default forwardRef(function Placeholder(\n  { className, width, margin }: Props,\n  ref: Ref<HTMLDivElement>,\n): JSX.Element {\n  return (\n    <div\n      ref={ref}\n      className={cx(\n        useStyle({ display: 'flex', flexDirection: 'column' }),\n        width,\n        margin,\n        className,\n      )}\n    >\n      <div style={{ display: 'flex', flexDirection: 'column', marginBottom: 16 }}>\n        <Label />\n        <Input />\n      </div>\n      <div style={{ display: 'flex', flexDirection: 'column', marginBottom: 16 }}>\n        <Label />\n        <Input />\n      </div>\n      <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'flex-end' }}>\n        <Button />\n      </div>\n    </div>\n  )\n})\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAOI;AAPJ,iBAAmB;AACnB,mBAAgC;AAEhC,uBAAyB;AAEzB,SAAS,QAAQ;AACf,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAW,2BAAS;AAAA,QAClB,UAAU;AAAA,QACV,UAAU;AAAA,QACV,QAAQ;AAAA,QACR,cAAc;AAAA,QACd,iBAAiB;AAAA,QACjB,SAAS;AAAA,QACT,cAAc;AAAA,MAChB,CAAC;AAAA;AAAA,EACH;AAEJ;AAEA,SAAS,QAAQ;AACf,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAW,2BAAS;AAAA,QAClB,UAAU;AAAA,QACV,QAAQ;AAAA,QACR,cAAc;AAAA,QACd,aAAa;AAAA,QACb,aAAa;AAAA,QACb,aAAa;AAAA,QACb,SAAS;AAAA,MACX,CAAC;AAAA;AAAA,EACH;AAEJ;AAEA,SAAS,SAAS;AAChB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAW,2BAAS;AAAA,QAClB,UAAU;AAAA,QACV,QAAQ;AAAA,QACR,cAAc;AAAA,QACd,iBAAiB;AAAA,QACjB,SAAS;AAAA,MACX,CAAC;AAAA;AAAA,EACH;AAEJ;AAQA,IAAO,0BAAQ,yBAAW,SAAS,YACjC,EAAE,WAAW,OAAO,OAAO,GAC3B,KACa;AACb,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,eAAW;AAAA,YACT,2BAAS,EAAE,SAAS,QAAQ,eAAe,SAAS,CAAC;AAAA,QACrD;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MAEA;AAAA,qDAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,eAAe,UAAU,cAAc,GAAG,GACvE;AAAA,sDAAC,SAAM;AAAA,UACP,4CAAC,SAAM;AAAA,WACT;AAAA,QACA,6CAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,eAAe,UAAU,cAAc,GAAG,GACvE;AAAA,sDAAC,SAAM;AAAA,UACP,4CAAC,SAAM;AAAA,WACT;AAAA,QACA,4CAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,eAAe,UAAU,gBAAgB,WAAW,GACjF,sDAAC,UAAO,GACV;AAAA;AAAA;AAAA,EACF;AAEJ,CAAC;","names":[]}