@makeswift/runtime 0.8.11 → 0.9.1

package/dist/Form.cjs.js

@@ -34,33 +34,34 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 var React = require("react");
 var formik = require("formik");
 var css = require("@emotion/css");
+var reactPage = require("./react-page.cjs.js");
 var next = require("./index.cjs.js");
 var jsxRuntime = require("react/jsx-runtime");
 var ColorHelper = require("color");
 var Button$1 = require("./Button.cjs.js");
 var index = require("./index.cjs3.js");
 var boxModels = require("./box-models.cjs.js");
-require("use-sync-external-store/shim/with-selector");
-require("next/dynamic");
-require("./react-page.cjs.js");
 require("redux");
 require("redux-thunk");
 require("./actions.cjs.js");
 require("./state/breakpoints.cjs.js");
+require("@emotion/serialize");
+require("@emotion/utils");
 require("slate");
 require("is-hotkey");
 require("slate-react");
-require("@emotion/serialize");
-require("@emotion/utils");
+require("use-sync-external-store/shim/with-selector");
+require("next/dynamic");
 require("./text-input.cjs.js");
 require("./combobox.cjs.js");
-require("./select.cjs.js");
 require("use-sync-external-store/shim");
 require("./types.cjs.js");
+require("./deepEqual.cjs.js");
 require("scroll-into-view-if-needed");
 require("react-dom");
 require("html-react-parser");
 require("next/head");
+require("zod");
 require("@emotion/server/create-instance");
 require("next/document");
 require("cors");
@@ -270,13 +271,13 @@ var Input$2 = React.forwardRef(function Input2(_a, ref) {
   } = next.useFormContext();
   return /* @__PURE__ */ jsxRuntime.jsx("input", __spreadProps(__spreadValues({}, restOfProps), {
     ref,
-    className: css.cx(next.useStyle(responsiveField({
+    className: css.cx(reactPage.useStyle(responsiveField({
       shape,
       size,
       contrast,
       brandColor,
       error
-    })), next.useStyle(next.useResponsiveStyle([size], ([size2 = next.Sizes.MEDIUM]) => ({
+    })), reactPage.useStyle(next.useResponsiveStyle([size], ([size2 = next.Sizes.MEDIUM]) => ({
       minHeight: getSizeHeight$1(size2),
       maxHeight: getSizeHeight$1(size2)
     }))), className)
@@ -284,7 +285,7 @@ var Input$2 = React.forwardRef(function Input2(_a, ref) {
 });
 function Label$2() {
   return /* @__PURE__ */ jsxRuntime.jsx("div", {
-    className: next.useStyle({
+    className: reactPage.useStyle({
       maxWidth: 120,
       minWidth: 60,
       height: 8,
@@ -297,7 +298,7 @@ function Label$2() {
 }
 function Input$1() {
   return /* @__PURE__ */ jsxRuntime.jsx("div", {
-    className: next.useStyle({
+    className: reactPage.useStyle({
       minWidth: 80,
       height: 32,
       borderRadius: 4,
@@ -310,7 +311,7 @@ function Input$1() {
 }
 function Button() {
   return /* @__PURE__ */ jsxRuntime.jsx("div", {
-    className: next.useStyle({
+    className: reactPage.useStyle({
       minWidth: 140,
       height: 32,
       borderRadius: 4,
@@ -326,7 +327,7 @@ var Placeholder = React.forwardRef(function Placeholder2({
 }, ref) {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", {
     ref,
-    className: css.cx(next.useStyle({
+    className: css.cx(reactPage.useStyle({
       display: "flex",
       flexDirection: "column"
     }), width, margin, className),
@@ -392,10 +393,10 @@ function Label$1(_c) {
     labelTextColor
   } = next.useFormContext();
   return /* @__PURE__ */ jsxRuntime.jsx(Component, __spreadProps(__spreadValues({}, restOfProps), {
-    className: css.cx(next.useStyle({
+    className: css.cx(reactPage.useStyle({
       display: "block",
       margin: "0 0 0.25em 0"
-    }), next.useStyle(next.useResponsiveTextStyle(labelTextStyle)), next.useStyle(next.useResponsiveStyle([size, contrast, labelTextColor], ([size2 = next.Sizes.MEDIUM, contrast2 = next.Contrasts.LIGHT, textColor]) => ({
+    }), reactPage.useStyle(next.useResponsiveTextStyle(labelTextStyle)), reactPage.useStyle(next.useResponsiveStyle([size, contrast, labelTextColor], ([size2 = next.Sizes.MEDIUM, contrast2 = next.Contrasts.LIGHT, textColor]) => ({
       minHeight: getSizeHeight(size2),
       color: textColor == null ? getContrastColor(contrast2) : next.colorToString(textColor)
     }))), className)
@@ -447,9 +448,9 @@ var TextArea = React.forwardRef(function TextArea2(_g2, ref) {
   } = next.useFormContext();
   return /* @__PURE__ */ jsxRuntime.jsx("textarea", __spreadProps(__spreadValues({}, restOfProps), {
     ref,
-    className: css.cx(next.useStyle({
+    className: css.cx(reactPage.useStyle({
       resize: "vertical"
-    }), next.useStyle(responsiveField({
+    }), reactPage.useStyle(responsiveField({
       error,
       shape,
       size,
@@ -508,7 +509,7 @@ function FakeCheckbox({
 }) {
   return /* @__PURE__ */ jsxRuntime.jsx("div", {
     style,
-    className: css.cx(FAKE_CHECKBOX_CLASS_NAME, next.useStyle({
+    className: css.cx(FAKE_CHECKBOX_CLASS_NAME, reactPage.useStyle({
       position: "absolute",
       width: "100%",
       height: "100%",
@@ -516,7 +517,7 @@ function FakeCheckbox({
       borderRadius: 4,
       pointerEvents: "none",
       borderWidth: 1
-    }), next.useStyle(next.useResponsiveStyle([contrast], ([contrast2 = next.Contrasts.LIGHT]) => ({
+    }), reactPage.useStyle(next.useResponsiveStyle([contrast], ([contrast2 = next.Contrasts.LIGHT]) => ({
       borderColor: getContrastBorderColor(contrast2, error),
       backgroundColor: getContrastBackgroundColor(contrast2)
     }))), className)
@@ -538,7 +539,7 @@ const HiddenCheckbox = React.forwardRef(function HiddenCheckbox2(_k, ref) {
   ]);
   return /* @__PURE__ */ jsxRuntime.jsx("input", __spreadProps(__spreadValues({}, restOfProps), {
     ref,
-    className: css.cx(next.useStyle({
+    className: css.cx(reactPage.useStyle({
       position: "absolute",
       opacity: 0,
       width: "100%",
@@ -628,9 +629,9 @@ var Checkbox = React.forwardRef(function Checkbox2(_m, ref) {
     brandColor
   } = next.useFormContext();
   return /* @__PURE__ */ jsxRuntime.jsxs("div", {
-    className: css.cx(next.useStyle({
+    className: css.cx(reactPage.useStyle({
       position: "relative"
-    }), next.useStyle(next.useResponsiveStyle([size], ([size2 = next.Sizes.MEDIUM]) => ({
+    }), reactPage.useStyle(next.useResponsiveStyle([size], ([size2 = next.Sizes.MEDIUM]) => ({
       height: getSizeHeight(size2),
       width: getSizeHeight(size2)
     })))),
@@ -676,17 +677,17 @@ var CheckboxTableField = React.forwardRef(function CheckboxTableField2(_o, ref)
     form.setFieldValue(name, event.currentTarget.checked);
   }
   return /* @__PURE__ */ jsxRuntime.jsxs(Label$1, {
-    className: css.cx(next.useStyle({
+    className: css.cx(reactPage.useStyle({
       display: "flex",
       alignItems: "center",
       margin: 0
-    }), next.useStyle(next.useResponsiveStyle([size], ([size2 = next.Sizes.MEDIUM]) => ({
+    }), reactPage.useStyle(next.useResponsiveStyle([size], ([size2 = next.Sizes.MEDIUM]) => ({
       minHeight: getSizeHeight$1(size2),
       maxHeight: getSizeHeight$1(size2)
     })))),
     htmlFor: id,
     children: [/* @__PURE__ */ jsxRuntime.jsx("span", {
-      className: next.useStyle({
+      className: reactPage.useStyle({
         marginRight: 8
       }),
       children: /* @__PURE__ */ jsxRuntime.jsx(Checkbox, __spreadProps(__spreadValues({}, restOfProps), {
@@ -707,7 +708,7 @@ function MainLabel(_q) {
     "className"
   ]);
   return /* @__PURE__ */ jsxRuntime.jsx(Label$1, __spreadProps(__spreadValues({}, restOfProps), {
-    className: css.cx(next.useStyle({
+    className: css.cx(reactPage.useStyle({
       margin: "0 0 4px 0"
     }), className)
   }));
@@ -719,7 +720,7 @@ function StyledLabel$1(_s) {
     "className"
   ]);
   return /* @__PURE__ */ jsxRuntime.jsx(Label$1, __spreadProps(__spreadValues({}, restOfProps), {
-    className: css.cx(next.useStyle({
+    className: css.cx(reactPage.useStyle({
       display: "flex",
       alignItems: "center",
       margin: "8px 0",
@@ -736,7 +737,7 @@ function CheckboxContainer(_u) {
     "className"
   ]);
   return /* @__PURE__ */ jsxRuntime.jsx("span", __spreadProps(__spreadValues({}, restOfProps), {
-    className: css.cx(next.useStyle({
+    className: css.cx(reactPage.useStyle({
       marginRight: 8
     }), className)
   }));
@@ -812,9 +813,9 @@ function Container$1(_y) {
     "className"
   ]);
   return /* @__PURE__ */ jsxRuntime.jsx("div", __spreadProps(__spreadValues({}, restOfProps), {
-    className: css.cx(next.useStyle({
+    className: css.cx(reactPage.useStyle({
       position: "relative"
-    }), next.useStyle(next.useResponsiveStyle([size], ([size2 = next.Sizes.MEDIUM]) => ({
+    }), reactPage.useStyle(next.useResponsiveStyle([size], ([size2 = next.Sizes.MEDIUM]) => ({
       height: getSizeHeight(size2),
       width: getSizeHeight(size2)
     }))), className)
@@ -832,7 +833,7 @@ function FakeRadioButton(_A) {
     "error"
   ]);
   return /* @__PURE__ */ jsxRuntime.jsx("div", __spreadProps(__spreadValues({}, restOfProps), {
-    className: css.cx(FAKE_RADIO_BUTTON_CLASS_NAME, next.useStyle({
+    className: css.cx(FAKE_RADIO_BUTTON_CLASS_NAME, reactPage.useStyle({
       position: "absolute",
       width: "100%",
       height: "100%",
@@ -840,7 +841,7 @@ function FakeRadioButton(_A) {
       borderRadius: "50%",
       pointerEvents: "none",
       borderWidth: 1
-    }), next.useStyle(next.useResponsiveStyle([contrast], ([contrast2 = next.Contrasts.LIGHT]) => ({
+    }), reactPage.useStyle(next.useResponsiveStyle([contrast], ([contrast2 = next.Contrasts.LIGHT]) => ({
       borderColor: getContrastBorderColor(contrast2, error),
       backgroundColor: getContrastBackgroundColor(contrast2)
     }))), className)
@@ -860,7 +861,7 @@ const HiddenRadioButton = React.forwardRef(function HiddenRadioButton2(_C, ref)
   ]);
   return /* @__PURE__ */ jsxRuntime.jsx("input", __spreadProps(__spreadValues({}, restOfProps), {
     type: "radio",
-    className: css.cx(next.useStyle({
+    className: css.cx(reactPage.useStyle({
       position: "absolute",
       opacity: 0,
       width: "100%",
@@ -964,7 +965,7 @@ function StyledLabel(_G) {
     "className"
   ]);
   return /* @__PURE__ */ jsxRuntime.jsx(Label$1, __spreadProps(__spreadValues({}, restOfProps), {
-    className: css.cx(next.useStyle({
+    className: css.cx(reactPage.useStyle({
       display: "flex",
       alignItems: "center",
       margin: "8px 0",
@@ -981,7 +982,7 @@ function RadioButtonContainer(_I) {
     "className"
   ]);
   return /* @__PURE__ */ jsxRuntime.jsx("span", __spreadProps(__spreadValues({}, restOfProps), {
-    className: css.cx(next.useStyle({
+    className: css.cx(reactPage.useStyle({
       marginRight: 8
     }), className)
   }));
@@ -1048,13 +1049,13 @@ function Container(_M) {
     "className"
   ]);
   return /* @__PURE__ */ jsxRuntime.jsx("div", __spreadProps(__spreadValues({}, restOfProps), {
-    className: css.cx(next.useStyle(responsiveField({
+    className: css.cx(reactPage.useStyle(responsiveField({
       shape,
       size,
       contrast,
       brandColor,
       error
-    })), next.useStyle(__spreadValues({
+    })), reactPage.useStyle(__spreadValues({
       display: "flex",
       alignItems: "center",
       position: "relative",
@@ -1086,7 +1087,7 @@ const Select = React.forwardRef(function Select2(_O, ref) {
   ]);
   return /* @__PURE__ */ jsxRuntime.jsx("select", __spreadProps(__spreadValues({}, restOfProps), {
     ref,
-    className: css.cx(next.useStyle({
+    className: css.cx(reactPage.useStyle({
       appearance: "none",
       position: "absolute",
       top: 0,
@@ -1285,14 +1286,14 @@ function Label({
   size
 }) {
   return /* @__PURE__ */ jsxRuntime.jsx("div", {
-    className: css.cx(next.useStyle({
+    className: css.cx(reactPage.useStyle({
       display: "block",
       maxWidth: 120,
       minWidth: 60,
       borderRadius: 2,
       backgroundColor: "#5f49f4",
       opacity: 0.4
-    }), next.useStyle(next.useResponsiveStyle([size], ([size2 = next.Sizes.MEDIUM]) => ({
+    }), reactPage.useStyle(next.useResponsiveStyle([size], ([size2 = next.Sizes.MEDIUM]) => ({
       margin: `calc(0.25 * ${getSizeHeight(size2)}px + 2px) 0`,
       minHeight: 0.5 * getSizeHeight(size2),
       maxHeight: 0.5 * getSizeHeight(size2)
@@ -1304,14 +1305,14 @@ function Input({
   size
 }) {
   return /* @__PURE__ */ jsxRuntime.jsx("div", {
-    className: css.cx(next.useStyle({
+    className: css.cx(reactPage.useStyle({
       display: "block",
       width: "100%",
       borderWidth: 2,
       borderStyle: "solid",
       borderColor: "#5f49f4",
       opacity: 0.4
-    }), next.useStyle(next.useResponsiveStyle([shape, size], ([shape2 = next.Shapes.ROUNDED, size2 = next.Sizes.MEDIUM]) => ({
+    }), reactPage.useStyle(next.useResponsiveStyle([shape, size], ([shape2 = next.Shapes.ROUNDED, size2 = next.Sizes.MEDIUM]) => ({
       minHeight: getSizeHeight$1(size2),
       maxHeight: getSizeHeight$1(size2),
       borderRadius: getShapeBorderRadius(shape2)
@@ -1474,7 +1475,7 @@ const spin = css.keyframes`
 `;
 function Spinner() {
   return /* @__PURE__ */ jsxRuntime.jsx(SvgSpinner20, {
-    className: next.useStyle({
+    className: reactPage.useStyle({
       display: "inline-flex",
       animation: `${spin} 1s linear infinite`,
       stroke: "currentColor"
@@ -1533,11 +1534,11 @@ const GridForm = React.forwardRef(function GridFrom(_aa, ref) {
   ]);
   return /* @__PURE__ */ jsxRuntime.jsx("form", __spreadProps(__spreadValues({}, restOfProps), {
     ref,
-    className: css.cx(next.useStyle({
+    className: css.cx(reactPage.useStyle({
       display: "flex",
       flexWrap: "wrap",
       width: "100%"
-    }), next.useStyle(next.useResponsiveStyle([size], ([size2 = next.Sizes.MEDIUM]) => ({
+    }), reactPage.useStyle(next.useResponsiveStyle([size], ([size2 = next.Sizes.MEDIUM]) => ({
       fontSize: getSizeFontSize(size2)
     }))), className)
   }));
@@ -1558,10 +1559,10 @@ const GridItem = React.forwardRef(function GridItem2(_ca, ref) {
   ]);
   return /* @__PURE__ */ jsxRuntime.jsx("div", __spreadProps(__spreadValues({}, restOfProps), {
     ref,
-    className: css.cx(next.useStyle({
+    className: css.cx(reactPage.useStyle({
       alignSelf: "flex-end",
       flexDirection: "column"
-    }), next.useStyle(next.useResponsiveGridItem({
+    }), reactPage.useStyle(next.useResponsiveGridItem({
       grid,
       index: index2,
       rowGap,
@@ -1591,11 +1592,11 @@ function StyledButton(_ea) {
   ]);
   return /* @__PURE__ */ jsxRuntime.jsx(Button$1["default"], __spreadProps(__spreadValues({}, restOfProps), {
     as: "button",
-    className: css.cx(next.useStyle({
+    className: css.cx(reactPage.useStyle({
       display: "flex",
       alignItems: "center",
       justifyContent: "center"
-    }), next.useStyle(next.useResponsiveStyle([size, alignment], ([size2 = next.Sizes.MEDIUM, alignment2 = next.Alignments.CENTER]) => ({
+    }), reactPage.useStyle(next.useResponsiveStyle([size, alignment], ([size2 = next.Sizes.MEDIUM, alignment2 = next.Alignments.CENTER]) => ({
       minHeight: getSizeHeight$1(size2),
       maxHeight: getSizeHeight$1(size2),
       margin: getAlignmentMargin(alignment2),
@@ -1611,7 +1612,7 @@ function ErrorContainer(_ga) {
     "className"
   ]);
   return /* @__PURE__ */ jsxRuntime.jsx("div", __spreadProps(__spreadValues({}, restOfProps), {
-    className: css.cx(next.useStyle({
+    className: css.cx(reactPage.useStyle({
       padding: "8px 16px",
       backgroundColor: "#f19eb9",
       borderRadius: 4,
@@ -1626,7 +1627,7 @@ function IconContainer(_ia) {
     "className"
   ]);
   return /* @__PURE__ */ jsxRuntime.jsx("div", __spreadProps(__spreadValues({}, restOfProps), {
-    className: css.cx(next.useStyle({
+    className: css.cx(reactPage.useStyle({
       fill: "currentColor"
     }), className)
   }));
@@ -1638,7 +1639,7 @@ function ErrorMessage(_ka) {
     "className"
   ]);
   return /* @__PURE__ */ jsxRuntime.jsx("p", __spreadProps(__spreadValues({}, restOfProps), {
-    className: css.cx(next.useStyle({
+    className: css.cx(reactPage.useStyle({
       fontSize: 12,
       margin: "8px 0",
       color: "rgba(127, 0, 0, 0.95)"