@makeswift/runtime 0.7.19 → 0.8.1

package/dist/Form.cjs.js

@@ -34,42 +34,45 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 var React = require("react");
 var formik = require("formik");
 var css = require("@emotion/css");
+var responsiveStyle = require("./responsive-style.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("./constants.cjs.js");
+require("@emotion/serialize");
+require("@emotion/utils");
+require("use-sync-external-store/shim");
 require("redux");
 require("redux-thunk");
+require("./types.cjs.js");
 require("./actions.cjs.js");
+require("use-sync-external-store/shim/with-selector");
+require("next/dynamic");
+require("./constants.cjs.js");
 require("./descriptors.cjs.js");
 require("slate");
 require("slate-react");
 require("./introspection.cjs.js");
-require("@emotion/serialize");
-require("@emotion/utils");
+require("./isNonNullable.cjs.js");
 require("./text-input.cjs.js");
 require("./combobox.cjs.js");
-require("use-sync-external-store/shim");
-require("./types.cjs.js");
 require("scroll-into-view-if-needed");
 require("react-dom");
 require("html-react-parser");
 require("next/head");
 require("@emotion/server/create-instance");
 require("next/document");
-require("cookie");
 require("cors");
+require("path-to-regexp");
+require("cookie");
 require("http-proxy");
 require("set-cookie-parser");
 require("uuid");
 require("corporate-ipsum");
-require("css-box-model");
 require("next/link");
+require("css-box-model");
 function _interopDefaultLegacy(e) {
   return e && typeof e === "object" && "default" in e ? e : { "default": e };
 }
@@ -218,7 +221,7 @@ function responsiveField(props) {
     borderWidth: 1,
     borderStyle: "solid",
     transition: "border-color 200ms"
-  }, next.responsiveStyle([props.shape, props.size, props.contrast, props.brandColor], ([
+  }, responsiveStyle.responsiveStyle([props.shape, props.size, props.contrast, props.brandColor], ([
     shape = next.Shapes.ROUNDED,
     size = next.Sizes.MEDIUM,
     contrast = next.Contrasts.LIGHT,
@@ -230,7 +233,7 @@ function responsiveField(props) {
     color: getContrastColor$1(contrast),
     backgroundColor: getContrastBackgroundColor(contrast),
     ":focus, :focus-within": {
-      borderColor: next.colorToString(brandColor)
+      borderColor: responsiveStyle.colorToString(brandColor)
     },
     "::placeholder": {
       color: getContrastPlaceholderColor(contrast)
@@ -267,13 +270,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(responsiveStyle.useStyle(responsiveField({
       shape,
       size,
       contrast,
       brandColor,
       error
-    })), next.useStyle(next.responsiveStyle([size], ([size2 = next.Sizes.MEDIUM]) => ({
+    })), responsiveStyle.useStyle(responsiveStyle.responsiveStyle([size], ([size2 = next.Sizes.MEDIUM]) => ({
       minHeight: getSizeHeight$1(size2),
       maxHeight: getSizeHeight$1(size2)
     }))), className)
@@ -281,7 +284,7 @@ var Input$2 = React.forwardRef(function Input2(_a, ref) {
 });
 function Label$2() {
   return /* @__PURE__ */ jsxRuntime.jsx("div", {
-    className: next.useStyle({
+    className: responsiveStyle.useStyle({
       maxWidth: 120,
       minWidth: 60,
       height: 8,
@@ -294,7 +297,7 @@ function Label$2() {
 }
 function Input$1() {
   return /* @__PURE__ */ jsxRuntime.jsx("div", {
-    className: next.useStyle({
+    className: responsiveStyle.useStyle({
       minWidth: 80,
       height: 32,
       borderRadius: 4,
@@ -307,7 +310,7 @@ function Input$1() {
 }
 function Button() {
   return /* @__PURE__ */ jsxRuntime.jsx("div", {
-    className: next.useStyle({
+    className: responsiveStyle.useStyle({
       minWidth: 140,
       height: 32,
       borderRadius: 4,
@@ -323,7 +326,7 @@ var Placeholder = React.forwardRef(function Placeholder2({
 }, ref) {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", {
     ref,
-    className: css.cx(next.useStyle({
+    className: css.cx(responsiveStyle.useStyle({
       display: "flex",
       flexDirection: "column"
     }), width, margin, className),
@@ -389,12 +392,12 @@ function Label$1(_c) {
     labelTextColor
   } = next.useFormContext();
   return /* @__PURE__ */ jsxRuntime.jsx(Component, __spreadProps(__spreadValues({}, restOfProps), {
-    className: css.cx(next.useStyle({
+    className: css.cx(responsiveStyle.useStyle({
       display: "block",
       margin: "0 0 0.25em 0"
-    }), next.useStyle(next.responsiveTextStyle(labelTextStyle)), next.useStyle(next.responsiveStyle([size, contrast, labelTextColor], ([size2 = next.Sizes.MEDIUM, contrast2 = next.Contrasts.LIGHT, textColor]) => ({
+    }), responsiveStyle.useStyle(responsiveStyle.responsiveTextStyle(labelTextStyle)), responsiveStyle.useStyle(responsiveStyle.responsiveStyle([size, contrast, labelTextColor], ([size2 = next.Sizes.MEDIUM, contrast2 = next.Contrasts.LIGHT, textColor]) => ({
       minHeight: getSizeHeight(size2),
-      color: textColor == null ? getContrastColor(contrast2) : next.colorToString(textColor)
+      color: textColor == null ? getContrastColor(contrast2) : responsiveStyle.colorToString(textColor)
     }))), className)
   }));
 }
@@ -444,9 +447,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(responsiveStyle.useStyle({
       resize: "vertical"
-    }), next.useStyle(responsiveField({
+    }), responsiveStyle.useStyle(responsiveField({
       error,
       shape,
       size,
@@ -505,7 +508,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, responsiveStyle.useStyle({
       position: "absolute",
       width: "100%",
       height: "100%",
@@ -513,7 +516,7 @@ function FakeCheckbox({
       borderRadius: 4,
       pointerEvents: "none",
       borderWidth: 1
-    }), next.useStyle(next.responsiveStyle([contrast], ([contrast2 = next.Contrasts.LIGHT]) => ({
+    }), responsiveStyle.useStyle(responsiveStyle.responsiveStyle([contrast], ([contrast2 = next.Contrasts.LIGHT]) => ({
       borderColor: getContrastBorderColor(contrast2, error),
       backgroundColor: getContrastBackgroundColor(contrast2)
     }))), className)
@@ -535,7 +538,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(responsiveStyle.useStyle({
       position: "absolute",
       opacity: 0,
       width: "100%",
@@ -547,7 +550,7 @@ const HiddenCheckbox = React.forwardRef(function HiddenCheckbox2(_k, ref) {
           opacity: 0.5
         }
       },
-      [`&:checked ~ .${FAKE_CHECKBOX_CLASS_NAME}`]: __spreadProps(__spreadValues({}, next.responsiveStyle([brandColor], ([{
+      [`&:checked ~ .${FAKE_CHECKBOX_CLASS_NAME}`]: __spreadProps(__spreadValues({}, responsiveStyle.responsiveStyle([brandColor], ([{
         swatch = {
           hue: 0,
           saturation: 0,
@@ -555,7 +558,7 @@ const HiddenCheckbox = React.forwardRef(function HiddenCheckbox2(_k, ref) {
         },
         alpha = 1
       } = {}]) => ({
-        backgroundColor: next.colorToString({
+        backgroundColor: responsiveStyle.colorToString({
           swatch,
           alpha
         })
@@ -568,7 +571,7 @@ const HiddenCheckbox = React.forwardRef(function HiddenCheckbox2(_k, ref) {
           width: "25%",
           height: "50%",
           borderStyle: "solid"
-        }, next.responsiveStyle([size, brandColor], ([size2 = next.Sizes.MEDIUM, {
+        }, responsiveStyle.responsiveStyle([size, brandColor], ([size2 = next.Sizes.MEDIUM, {
           swatch = {
             hue: 0,
             saturation: 0,
@@ -588,7 +591,7 @@ const HiddenCheckbox = React.forwardRef(function HiddenCheckbox2(_k, ref) {
         })
       }),
       "&:not(:disabled)": {
-        [`&:focus ~ .${FAKE_CHECKBOX_CLASS_NAME}`]: next.responsiveStyle([brandColor], ([brandColor2 = {
+        [`&:focus ~ .${FAKE_CHECKBOX_CLASS_NAME}`]: responsiveStyle.responsiveStyle([brandColor], ([brandColor2 = {
           swatch: {
             hue: 0,
             saturation: 0,
@@ -596,11 +599,11 @@ const HiddenCheckbox = React.forwardRef(function HiddenCheckbox2(_k, ref) {
           },
           alpha: 1
         }]) => ({
-          borderColor: next.colorToString(brandColor2)
+          borderColor: responsiveStyle.colorToString(brandColor2)
         }))
       },
       "&:not(:disabled):checked": {
-        [`&:focus ~ .${FAKE_CHECKBOX_CLASS_NAME}`]: next.responsiveStyle([contrast], ([contrast2 = next.Contrasts.LIGHT]) => ({
+        [`&:focus ~ .${FAKE_CHECKBOX_CLASS_NAME}`]: responsiveStyle.responsiveStyle([contrast], ([contrast2 = next.Contrasts.LIGHT]) => ({
           borderColor: getContrastBorderColor(contrast2, error)
         }))
       }
@@ -625,9 +628,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(responsiveStyle.useStyle({
       position: "relative"
-    }), next.useStyle(next.responsiveStyle([size], ([size2 = next.Sizes.MEDIUM]) => ({
+    }), responsiveStyle.useStyle(responsiveStyle.responsiveStyle([size], ([size2 = next.Sizes.MEDIUM]) => ({
       height: getSizeHeight(size2),
       width: getSizeHeight(size2)
     })))),
@@ -673,17 +676,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(responsiveStyle.useStyle({
       display: "flex",
       alignItems: "center",
       margin: 0
-    }), next.useStyle(next.responsiveStyle([size], ([size2 = next.Sizes.MEDIUM]) => ({
+    }), responsiveStyle.useStyle(responsiveStyle.responsiveStyle([size], ([size2 = next.Sizes.MEDIUM]) => ({
       minHeight: getSizeHeight$1(size2),
       maxHeight: getSizeHeight$1(size2)
     })))),
     htmlFor: id,
     children: [/* @__PURE__ */ jsxRuntime.jsx("span", {
-      className: next.useStyle({
+      className: responsiveStyle.useStyle({
         marginRight: 8
       }),
       children: /* @__PURE__ */ jsxRuntime.jsx(Checkbox, __spreadProps(__spreadValues({}, restOfProps), {
@@ -704,7 +707,7 @@ function MainLabel(_q) {
     "className"
   ]);
   return /* @__PURE__ */ jsxRuntime.jsx(Label$1, __spreadProps(__spreadValues({}, restOfProps), {
-    className: css.cx(next.useStyle({
+    className: css.cx(responsiveStyle.useStyle({
       margin: "0 0 4px 0"
     }), className)
   }));
@@ -716,7 +719,7 @@ function StyledLabel$1(_s) {
     "className"
   ]);
   return /* @__PURE__ */ jsxRuntime.jsx(Label$1, __spreadProps(__spreadValues({}, restOfProps), {
-    className: css.cx(next.useStyle({
+    className: css.cx(responsiveStyle.useStyle({
       display: "flex",
       alignItems: "center",
       margin: "8px 0",
@@ -733,7 +736,7 @@ function CheckboxContainer(_u) {
     "className"
   ]);
   return /* @__PURE__ */ jsxRuntime.jsx("span", __spreadProps(__spreadValues({}, restOfProps), {
-    className: css.cx(next.useStyle({
+    className: css.cx(responsiveStyle.useStyle({
       marginRight: 8
     }), className)
   }));
@@ -809,9 +812,9 @@ function Container$1(_y) {
     "className"
   ]);
   return /* @__PURE__ */ jsxRuntime.jsx("div", __spreadProps(__spreadValues({}, restOfProps), {
-    className: css.cx(next.useStyle({
+    className: css.cx(responsiveStyle.useStyle({
       position: "relative"
-    }), next.useStyle(next.responsiveStyle([size], ([size2 = next.Sizes.MEDIUM]) => ({
+    }), responsiveStyle.useStyle(responsiveStyle.responsiveStyle([size], ([size2 = next.Sizes.MEDIUM]) => ({
       height: getSizeHeight(size2),
       width: getSizeHeight(size2)
     }))), className)
@@ -829,7 +832,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, responsiveStyle.useStyle({
       position: "absolute",
       width: "100%",
       height: "100%",
@@ -837,7 +840,7 @@ function FakeRadioButton(_A) {
       borderRadius: "50%",
       pointerEvents: "none",
       borderWidth: 1
-    }), next.useStyle(next.responsiveStyle([contrast], ([contrast2 = next.Contrasts.LIGHT]) => ({
+    }), responsiveStyle.useStyle(responsiveStyle.responsiveStyle([contrast], ([contrast2 = next.Contrasts.LIGHT]) => ({
       borderColor: getContrastBorderColor(contrast2, error),
       backgroundColor: getContrastBackgroundColor(contrast2)
     }))), className)
@@ -857,7 +860,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(responsiveStyle.useStyle({
       position: "absolute",
       opacity: 0,
       width: "100%",
@@ -869,7 +872,7 @@ const HiddenRadioButton = React.forwardRef(function HiddenRadioButton2(_C, ref)
           opacity: 0.5
         }
       },
-      [`&:checked ~ .${FAKE_RADIO_BUTTON_CLASS_NAME}`]: __spreadProps(__spreadValues({}, next.responsiveStyle([brandColor], ([brandColor2 = {
+      [`&:checked ~ .${FAKE_RADIO_BUTTON_CLASS_NAME}`]: __spreadProps(__spreadValues({}, responsiveStyle.responsiveStyle([brandColor], ([brandColor2 = {
         swatch: {
           hue: 0,
           saturation: 0,
@@ -877,7 +880,7 @@ const HiddenRadioButton = React.forwardRef(function HiddenRadioButton2(_C, ref)
         },
         alpha: 1
       }]) => ({
-        backgroundColor: next.colorToString(brandColor2)
+        backgroundColor: responsiveStyle.colorToString(brandColor2)
       }))), {
         borderColor: "transparent",
         "&::after": __spreadValues({
@@ -890,7 +893,7 @@ const HiddenRadioButton = React.forwardRef(function HiddenRadioButton2(_C, ref)
           height: "50%",
           borderRadius: "50%",
           transform: "translate(-50%, -50%)"
-        }, next.responsiveStyle([brandColor], ([brandColor2 = {
+        }, responsiveStyle.responsiveStyle([brandColor], ([brandColor2 = {
           swatch: {
             hue: 0,
             saturation: 0,
@@ -902,7 +905,7 @@ const HiddenRadioButton = React.forwardRef(function HiddenRadioButton2(_C, ref)
         })))
       }),
       "&:not(:disabled)": {
-        [`&:focus ~ .${FAKE_RADIO_BUTTON_CLASS_NAME}`]: next.responsiveStyle([brandColor], ([brandColor2 = {
+        [`&:focus ~ .${FAKE_RADIO_BUTTON_CLASS_NAME}`]: responsiveStyle.responsiveStyle([brandColor], ([brandColor2 = {
           swatch: {
             hue: 0,
             saturation: 0,
@@ -910,11 +913,11 @@ const HiddenRadioButton = React.forwardRef(function HiddenRadioButton2(_C, ref)
           },
           alpha: 1
         }]) => ({
-          borderColor: next.colorToString(brandColor2)
+          borderColor: responsiveStyle.colorToString(brandColor2)
         }))
       },
       "&:not(:disabled):checked": {
-        [`&:focus ~ .${FAKE_RADIO_BUTTON_CLASS_NAME}`]: next.responsiveStyle([contrast], ([contrast2 = next.Contrasts.LIGHT]) => ({
+        [`&:focus ~ .${FAKE_RADIO_BUTTON_CLASS_NAME}`]: responsiveStyle.responsiveStyle([contrast], ([contrast2 = next.Contrasts.LIGHT]) => ({
           borderColor: getContrastBorderColor(contrast2, error)
         }))
       }
@@ -961,7 +964,7 @@ function StyledLabel(_G) {
     "className"
   ]);
   return /* @__PURE__ */ jsxRuntime.jsx(Label$1, __spreadProps(__spreadValues({}, restOfProps), {
-    className: css.cx(next.useStyle({
+    className: css.cx(responsiveStyle.useStyle({
       display: "flex",
       alignItems: "center",
       margin: "8px 0",
@@ -978,7 +981,7 @@ function RadioButtonContainer(_I) {
     "className"
   ]);
   return /* @__PURE__ */ jsxRuntime.jsx("span", __spreadProps(__spreadValues({}, restOfProps), {
-    className: css.cx(next.useStyle({
+    className: css.cx(responsiveStyle.useStyle({
       marginRight: 8
     }), className)
   }));
@@ -1045,13 +1048,13 @@ function Container(_M) {
     "className"
   ]);
   return /* @__PURE__ */ jsxRuntime.jsx("div", __spreadProps(__spreadValues({}, restOfProps), {
-    className: css.cx(next.useStyle(responsiveField({
+    className: css.cx(responsiveStyle.useStyle(responsiveField({
       shape,
       size,
       contrast,
       brandColor,
       error
-    })), next.useStyle(__spreadValues({
+    })), responsiveStyle.useStyle(__spreadValues({
       display: "flex",
       alignItems: "center",
       position: "relative",
@@ -1060,7 +1063,7 @@ function Container(_M) {
       "&:focus, &:focus-within": {
         borderColor: "#e54e7f"
       }
-    }, next.responsiveStyle([size, contrast], ([size2 = next.Sizes.MEDIUM, contrast2 = next.Contrasts.LIGHT]) => ({
+    }, responsiveStyle.responsiveStyle([size, contrast], ([size2 = next.Sizes.MEDIUM, contrast2 = next.Contrasts.LIGHT]) => ({
       minHeight: getSizeHeight$2(size2),
       maxHeight: getSizeHeight$2(size2),
       "&::after": {
@@ -1083,7 +1086,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(responsiveStyle.useStyle({
       appearance: "none",
       position: "absolute",
       top: 0,
@@ -1282,14 +1285,14 @@ function Label({
   size
 }) {
   return /* @__PURE__ */ jsxRuntime.jsx("div", {
-    className: css.cx(next.useStyle({
+    className: css.cx(responsiveStyle.useStyle({
       display: "block",
       maxWidth: 120,
       minWidth: 60,
       borderRadius: 2,
       backgroundColor: "#5f49f4",
       opacity: 0.4
-    }), next.useStyle(next.responsiveStyle([size], ([size2 = next.Sizes.MEDIUM]) => ({
+    }), responsiveStyle.useStyle(responsiveStyle.responsiveStyle([size], ([size2 = next.Sizes.MEDIUM]) => ({
       margin: `calc(0.25 * ${getSizeHeight(size2)}px + 2px) 0`,
       minHeight: 0.5 * getSizeHeight(size2),
       maxHeight: 0.5 * getSizeHeight(size2)
@@ -1301,14 +1304,14 @@ function Input({
   size
 }) {
   return /* @__PURE__ */ jsxRuntime.jsx("div", {
-    className: css.cx(next.useStyle({
+    className: css.cx(responsiveStyle.useStyle({
       display: "block",
       width: "100%",
       borderWidth: 2,
       borderStyle: "solid",
       borderColor: "#5f49f4",
       opacity: 0.4
-    }), next.useStyle(next.responsiveStyle([shape, size], ([shape2 = next.Shapes.ROUNDED, size2 = next.Sizes.MEDIUM]) => ({
+    }), responsiveStyle.useStyle(responsiveStyle.responsiveStyle([shape, size], ([shape2 = next.Shapes.ROUNDED, size2 = next.Sizes.MEDIUM]) => ({
       minHeight: getSizeHeight$1(size2),
       maxHeight: getSizeHeight$1(size2),
       borderRadius: getShapeBorderRadius(shape2)
@@ -1471,7 +1474,7 @@ const spin = css.keyframes`
 `;
 function Spinner() {
   return /* @__PURE__ */ jsxRuntime.jsx(SvgSpinner20, {
-    className: next.useStyle({
+    className: responsiveStyle.useStyle({
       display: "inline-flex",
       animation: `${spin} 1s linear infinite`,
       stroke: "currentColor"
@@ -1530,11 +1533,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(responsiveStyle.useStyle({
       display: "flex",
       flexWrap: "wrap",
       width: "100%"
-    }), next.useStyle(next.responsiveStyle([size], ([size2 = next.Sizes.MEDIUM]) => ({
+    }), responsiveStyle.useStyle(responsiveStyle.responsiveStyle([size], ([size2 = next.Sizes.MEDIUM]) => ({
       fontSize: getSizeFontSize(size2)
     }))), className)
   }));
@@ -1555,10 +1558,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(responsiveStyle.useStyle({
       alignSelf: "flex-end",
       flexDirection: "column"
-    }), next.useStyle(next.responsiveGridItem({
+    }), responsiveStyle.useStyle(responsiveStyle.responsiveGridItem({
       grid,
       index: index2,
       rowGap,
@@ -1588,11 +1591,11 @@ function StyledButton(_ea) {
   ]);
   return /* @__PURE__ */ jsxRuntime.jsx(Button$1["default"], __spreadProps(__spreadValues({}, restOfProps), {
     as: "button",
-    className: css.cx(next.useStyle({
+    className: css.cx(responsiveStyle.useStyle({
       display: "flex",
       alignItems: "center",
       justifyContent: "center"
-    }), next.useStyle(next.responsiveStyle([size, alignment], ([size2 = next.Sizes.MEDIUM, alignment2 = next.Alignments.CENTER]) => ({
+    }), responsiveStyle.useStyle(responsiveStyle.responsiveStyle([size, alignment], ([size2 = next.Sizes.MEDIUM, alignment2 = next.Alignments.CENTER]) => ({
       minHeight: getSizeHeight$1(size2),
       maxHeight: getSizeHeight$1(size2),
       margin: getAlignmentMargin(alignment2),
@@ -1608,7 +1611,7 @@ function ErrorContainer(_ga) {
     "className"
   ]);
   return /* @__PURE__ */ jsxRuntime.jsx("div", __spreadProps(__spreadValues({}, restOfProps), {
-    className: css.cx(next.useStyle({
+    className: css.cx(responsiveStyle.useStyle({
       padding: "8px 16px",
       backgroundColor: "#f19eb9",
       borderRadius: 4,
@@ -1623,7 +1626,7 @@ function IconContainer(_ia) {
     "className"
   ]);
   return /* @__PURE__ */ jsxRuntime.jsx("div", __spreadProps(__spreadValues({}, restOfProps), {
-    className: css.cx(next.useStyle({
+    className: css.cx(responsiveStyle.useStyle({
       fill: "currentColor"
     }), className)
   }));
@@ -1635,7 +1638,7 @@ function ErrorMessage(_ka) {
     "className"
   ]);
   return /* @__PURE__ */ jsxRuntime.jsx("p", __spreadProps(__spreadValues({}, restOfProps), {
-    className: css.cx(next.useStyle({
+    className: css.cx(responsiveStyle.useStyle({
       fontSize: 12,
       margin: "8px 0",
       color: "rgba(127, 0, 0, 0.95)"
@@ -1688,8 +1691,8 @@ const Form = React.forwardRef(function Form2({
     var _a;
     return (_a = fieldsProp == null ? void 0 : fieldsProp.grid) != null ? _a : [];
   }, [fieldsProp]);
-  const table = next.useTable(tableId != null ? tableId : null);
-  const client = next.useMakeswiftClient();
+  const table = responsiveStyle.useTable(tableId != null ? tableId : null);
+  const client = responsiveStyle.useMakeswiftClient();
   const [refEl, setRefEl] = React.useState(null);
   const [propControllers, setPropControllers] = React.useState(null);
   const [initialValues, setInitialValues] = React.useState(() => fields.reduce((acc, formField) => {