@makeswift/runtime 0.8.4 → 0.8.6

package/dist/Form.cjs.js

@@ -34,30 +34,29 @@ 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("@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("redux");
+require("redux-thunk");
+require("./actions.cjs.js");
 require("./descriptors.cjs.js");
 require("slate");
 require("slate-react");
+require("./state/breakpoints.cjs.js");
 require("./introspection.cjs.js");
-require("./isNonNullable.cjs.js");
+require("@emotion/serialize");
+require("@emotion/utils");
 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");
@@ -71,8 +70,8 @@ require("http-proxy");
 require("set-cookie-parser");
 require("uuid");
 require("corporate-ipsum");
-require("next/link");
 require("css-box-model");
+require("next/link");
 function _interopDefaultLegacy(e) {
   return e && typeof e === "object" && "default" in e ? e : { "default": e };
 }
@@ -221,7 +220,7 @@ function responsiveField(props) {
     borderWidth: 1,
     borderStyle: "solid",
     transition: "border-color 200ms"
-  }, responsiveStyle.responsiveStyle([props.shape, props.size, props.contrast, props.brandColor], ([
+  }, next.useResponsiveStyle([props.shape, props.size, props.contrast, props.brandColor], ([
     shape = next.Shapes.ROUNDED,
     size = next.Sizes.MEDIUM,
     contrast = next.Contrasts.LIGHT,
@@ -233,7 +232,7 @@ function responsiveField(props) {
     color: getContrastColor$1(contrast),
     backgroundColor: getContrastBackgroundColor(contrast),
     ":focus, :focus-within": {
-      borderColor: responsiveStyle.colorToString(brandColor)
+      borderColor: next.colorToString(brandColor)
     },
     "::placeholder": {
       color: getContrastPlaceholderColor(contrast)
@@ -270,13 +269,13 @@ var Input$2 = React.forwardRef(function Input2(_a, ref) {
   } = next.useFormContext();
   return /* @__PURE__ */ jsxRuntime.jsx("input", __spreadProps(__spreadValues({}, restOfProps), {
     ref,
-    className: css.cx(responsiveStyle.useStyle(responsiveField({
+    className: css.cx(next.useStyle(responsiveField({
       shape,
       size,
       contrast,
       brandColor,
       error
-    })), responsiveStyle.useStyle(responsiveStyle.responsiveStyle([size], ([size2 = next.Sizes.MEDIUM]) => ({
+    })), next.useStyle(next.useResponsiveStyle([size], ([size2 = next.Sizes.MEDIUM]) => ({
       minHeight: getSizeHeight$1(size2),
       maxHeight: getSizeHeight$1(size2)
     }))), className)
@@ -284,7 +283,7 @@ var Input$2 = React.forwardRef(function Input2(_a, ref) {
 });
 function Label$2() {
   return /* @__PURE__ */ jsxRuntime.jsx("div", {
-    className: responsiveStyle.useStyle({
+    className: next.useStyle({
       maxWidth: 120,
       minWidth: 60,
       height: 8,
@@ -297,7 +296,7 @@ function Label$2() {
 }
 function Input$1() {
   return /* @__PURE__ */ jsxRuntime.jsx("div", {
-    className: responsiveStyle.useStyle({
+    className: next.useStyle({
       minWidth: 80,
       height: 32,
       borderRadius: 4,
@@ -310,7 +309,7 @@ function Input$1() {
 }
 function Button() {
   return /* @__PURE__ */ jsxRuntime.jsx("div", {
-    className: responsiveStyle.useStyle({
+    className: next.useStyle({
       minWidth: 140,
       height: 32,
       borderRadius: 4,
@@ -326,7 +325,7 @@ var Placeholder = React.forwardRef(function Placeholder2({
 }, ref) {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", {
     ref,
-    className: css.cx(responsiveStyle.useStyle({
+    className: css.cx(next.useStyle({
       display: "flex",
       flexDirection: "column"
     }), width, margin, className),
@@ -392,12 +391,12 @@ function Label$1(_c) {
     labelTextColor
   } = next.useFormContext();
   return /* @__PURE__ */ jsxRuntime.jsx(Component, __spreadProps(__spreadValues({}, restOfProps), {
-    className: css.cx(responsiveStyle.useStyle({
+    className: css.cx(next.useStyle({
       display: "block",
       margin: "0 0 0.25em 0"
-    }), responsiveStyle.useStyle(responsiveStyle.responsiveTextStyle(labelTextStyle)), responsiveStyle.useStyle(responsiveStyle.responsiveStyle([size, contrast, labelTextColor], ([size2 = next.Sizes.MEDIUM, contrast2 = next.Contrasts.LIGHT, textColor]) => ({
+    }), next.useStyle(next.useResponsiveTextStyle(labelTextStyle)), next.useStyle(next.useResponsiveStyle([size, contrast, labelTextColor], ([size2 = next.Sizes.MEDIUM, contrast2 = next.Contrasts.LIGHT, textColor]) => ({
       minHeight: getSizeHeight(size2),
-      color: textColor == null ? getContrastColor(contrast2) : responsiveStyle.colorToString(textColor)
+      color: textColor == null ? getContrastColor(contrast2) : next.colorToString(textColor)
     }))), className)
   }));
 }
@@ -447,9 +446,9 @@ var TextArea = React.forwardRef(function TextArea2(_g2, ref) {
   } = next.useFormContext();
   return /* @__PURE__ */ jsxRuntime.jsx("textarea", __spreadProps(__spreadValues({}, restOfProps), {
     ref,
-    className: css.cx(responsiveStyle.useStyle({
+    className: css.cx(next.useStyle({
       resize: "vertical"
-    }), responsiveStyle.useStyle(responsiveField({
+    }), next.useStyle(responsiveField({
       error,
       shape,
       size,
@@ -508,7 +507,7 @@ function FakeCheckbox({
 }) {
   return /* @__PURE__ */ jsxRuntime.jsx("div", {
     style,
-    className: css.cx(FAKE_CHECKBOX_CLASS_NAME, responsiveStyle.useStyle({
+    className: css.cx(FAKE_CHECKBOX_CLASS_NAME, next.useStyle({
       position: "absolute",
       width: "100%",
       height: "100%",
@@ -516,7 +515,7 @@ function FakeCheckbox({
       borderRadius: 4,
       pointerEvents: "none",
       borderWidth: 1
-    }), responsiveStyle.useStyle(responsiveStyle.responsiveStyle([contrast], ([contrast2 = next.Contrasts.LIGHT]) => ({
+    }), next.useStyle(next.useResponsiveStyle([contrast], ([contrast2 = next.Contrasts.LIGHT]) => ({
       borderColor: getContrastBorderColor(contrast2, error),
       backgroundColor: getContrastBackgroundColor(contrast2)
     }))), className)
@@ -538,7 +537,7 @@ const HiddenCheckbox = React.forwardRef(function HiddenCheckbox2(_k, ref) {
   ]);
   return /* @__PURE__ */ jsxRuntime.jsx("input", __spreadProps(__spreadValues({}, restOfProps), {
     ref,
-    className: css.cx(responsiveStyle.useStyle({
+    className: css.cx(next.useStyle({
       position: "absolute",
       opacity: 0,
       width: "100%",
@@ -550,7 +549,7 @@ const HiddenCheckbox = React.forwardRef(function HiddenCheckbox2(_k, ref) {
           opacity: 0.5
         }
       },
-      [`&:checked ~ .${FAKE_CHECKBOX_CLASS_NAME}`]: __spreadProps(__spreadValues({}, responsiveStyle.responsiveStyle([brandColor], ([{
+      [`&:checked ~ .${FAKE_CHECKBOX_CLASS_NAME}`]: __spreadProps(__spreadValues({}, next.useResponsiveStyle([brandColor], ([{
         swatch = {
           hue: 0,
           saturation: 0,
@@ -558,7 +557,7 @@ const HiddenCheckbox = React.forwardRef(function HiddenCheckbox2(_k, ref) {
         },
         alpha = 1
       } = {}]) => ({
-        backgroundColor: responsiveStyle.colorToString({
+        backgroundColor: next.colorToString({
           swatch,
           alpha
         })
@@ -571,7 +570,7 @@ const HiddenCheckbox = React.forwardRef(function HiddenCheckbox2(_k, ref) {
           width: "25%",
           height: "50%",
           borderStyle: "solid"
-        }, responsiveStyle.responsiveStyle([size, brandColor], ([size2 = next.Sizes.MEDIUM, {
+        }, next.useResponsiveStyle([size, brandColor], ([size2 = next.Sizes.MEDIUM, {
           swatch = {
             hue: 0,
             saturation: 0,
@@ -591,7 +590,7 @@ const HiddenCheckbox = React.forwardRef(function HiddenCheckbox2(_k, ref) {
         })
       }),
       "&:not(:disabled)": {
-        [`&:focus ~ .${FAKE_CHECKBOX_CLASS_NAME}`]: responsiveStyle.responsiveStyle([brandColor], ([brandColor2 = {
+        [`&:focus ~ .${FAKE_CHECKBOX_CLASS_NAME}`]: next.useResponsiveStyle([brandColor], ([brandColor2 = {
           swatch: {
             hue: 0,
             saturation: 0,
@@ -599,11 +598,11 @@ const HiddenCheckbox = React.forwardRef(function HiddenCheckbox2(_k, ref) {
           },
           alpha: 1
         }]) => ({
-          borderColor: responsiveStyle.colorToString(brandColor2)
+          borderColor: next.colorToString(brandColor2)
         }))
       },
       "&:not(:disabled):checked": {
-        [`&:focus ~ .${FAKE_CHECKBOX_CLASS_NAME}`]: responsiveStyle.responsiveStyle([contrast], ([contrast2 = next.Contrasts.LIGHT]) => ({
+        [`&:focus ~ .${FAKE_CHECKBOX_CLASS_NAME}`]: next.useResponsiveStyle([contrast], ([contrast2 = next.Contrasts.LIGHT]) => ({
           borderColor: getContrastBorderColor(contrast2, error)
         }))
       }
@@ -628,9 +627,9 @@ var Checkbox = React.forwardRef(function Checkbox2(_m, ref) {
     brandColor
   } = next.useFormContext();
   return /* @__PURE__ */ jsxRuntime.jsxs("div", {
-    className: css.cx(responsiveStyle.useStyle({
+    className: css.cx(next.useStyle({
       position: "relative"
-    }), responsiveStyle.useStyle(responsiveStyle.responsiveStyle([size], ([size2 = next.Sizes.MEDIUM]) => ({
+    }), next.useStyle(next.useResponsiveStyle([size], ([size2 = next.Sizes.MEDIUM]) => ({
       height: getSizeHeight(size2),
       width: getSizeHeight(size2)
     })))),
@@ -676,17 +675,17 @@ var CheckboxTableField = React.forwardRef(function CheckboxTableField2(_o, ref)
     form.setFieldValue(name, event.currentTarget.checked);
   }
   return /* @__PURE__ */ jsxRuntime.jsxs(Label$1, {
-    className: css.cx(responsiveStyle.useStyle({
+    className: css.cx(next.useStyle({
       display: "flex",
       alignItems: "center",
       margin: 0
-    }), responsiveStyle.useStyle(responsiveStyle.responsiveStyle([size], ([size2 = next.Sizes.MEDIUM]) => ({
+    }), next.useStyle(next.useResponsiveStyle([size], ([size2 = next.Sizes.MEDIUM]) => ({
       minHeight: getSizeHeight$1(size2),
       maxHeight: getSizeHeight$1(size2)
     })))),
     htmlFor: id,
     children: [/* @__PURE__ */ jsxRuntime.jsx("span", {
-      className: responsiveStyle.useStyle({
+      className: next.useStyle({
         marginRight: 8
       }),
       children: /* @__PURE__ */ jsxRuntime.jsx(Checkbox, __spreadProps(__spreadValues({}, restOfProps), {
@@ -707,7 +706,7 @@ function MainLabel(_q) {
     "className"
   ]);
   return /* @__PURE__ */ jsxRuntime.jsx(Label$1, __spreadProps(__spreadValues({}, restOfProps), {
-    className: css.cx(responsiveStyle.useStyle({
+    className: css.cx(next.useStyle({
       margin: "0 0 4px 0"
     }), className)
   }));
@@ -719,7 +718,7 @@ function StyledLabel$1(_s) {
     "className"
   ]);
   return /* @__PURE__ */ jsxRuntime.jsx(Label$1, __spreadProps(__spreadValues({}, restOfProps), {
-    className: css.cx(responsiveStyle.useStyle({
+    className: css.cx(next.useStyle({
       display: "flex",
       alignItems: "center",
       margin: "8px 0",
@@ -736,7 +735,7 @@ function CheckboxContainer(_u) {
     "className"
   ]);
   return /* @__PURE__ */ jsxRuntime.jsx("span", __spreadProps(__spreadValues({}, restOfProps), {
-    className: css.cx(responsiveStyle.useStyle({
+    className: css.cx(next.useStyle({
       marginRight: 8
     }), className)
   }));
@@ -812,9 +811,9 @@ function Container$1(_y) {
     "className"
   ]);
   return /* @__PURE__ */ jsxRuntime.jsx("div", __spreadProps(__spreadValues({}, restOfProps), {
-    className: css.cx(responsiveStyle.useStyle({
+    className: css.cx(next.useStyle({
       position: "relative"
-    }), responsiveStyle.useStyle(responsiveStyle.responsiveStyle([size], ([size2 = next.Sizes.MEDIUM]) => ({
+    }), next.useStyle(next.useResponsiveStyle([size], ([size2 = next.Sizes.MEDIUM]) => ({
       height: getSizeHeight(size2),
       width: getSizeHeight(size2)
     }))), className)
@@ -832,7 +831,7 @@ function FakeRadioButton(_A) {
     "error"
   ]);
   return /* @__PURE__ */ jsxRuntime.jsx("div", __spreadProps(__spreadValues({}, restOfProps), {
-    className: css.cx(FAKE_RADIO_BUTTON_CLASS_NAME, responsiveStyle.useStyle({
+    className: css.cx(FAKE_RADIO_BUTTON_CLASS_NAME, next.useStyle({
       position: "absolute",
       width: "100%",
       height: "100%",
@@ -840,7 +839,7 @@ function FakeRadioButton(_A) {
       borderRadius: "50%",
       pointerEvents: "none",
       borderWidth: 1
-    }), responsiveStyle.useStyle(responsiveStyle.responsiveStyle([contrast], ([contrast2 = next.Contrasts.LIGHT]) => ({
+    }), next.useStyle(next.useResponsiveStyle([contrast], ([contrast2 = next.Contrasts.LIGHT]) => ({
       borderColor: getContrastBorderColor(contrast2, error),
       backgroundColor: getContrastBackgroundColor(contrast2)
     }))), className)
@@ -860,7 +859,7 @@ const HiddenRadioButton = React.forwardRef(function HiddenRadioButton2(_C, ref)
   ]);
   return /* @__PURE__ */ jsxRuntime.jsx("input", __spreadProps(__spreadValues({}, restOfProps), {
     type: "radio",
-    className: css.cx(responsiveStyle.useStyle({
+    className: css.cx(next.useStyle({
       position: "absolute",
       opacity: 0,
       width: "100%",
@@ -872,7 +871,7 @@ const HiddenRadioButton = React.forwardRef(function HiddenRadioButton2(_C, ref)
           opacity: 0.5
         }
       },
-      [`&:checked ~ .${FAKE_RADIO_BUTTON_CLASS_NAME}`]: __spreadProps(__spreadValues({}, responsiveStyle.responsiveStyle([brandColor], ([brandColor2 = {
+      [`&:checked ~ .${FAKE_RADIO_BUTTON_CLASS_NAME}`]: __spreadProps(__spreadValues({}, next.useResponsiveStyle([brandColor], ([brandColor2 = {
         swatch: {
           hue: 0,
           saturation: 0,
@@ -880,7 +879,7 @@ const HiddenRadioButton = React.forwardRef(function HiddenRadioButton2(_C, ref)
         },
         alpha: 1
       }]) => ({
-        backgroundColor: responsiveStyle.colorToString(brandColor2)
+        backgroundColor: next.colorToString(brandColor2)
       }))), {
         borderColor: "transparent",
         "&::after": __spreadValues({
@@ -893,7 +892,7 @@ const HiddenRadioButton = React.forwardRef(function HiddenRadioButton2(_C, ref)
           height: "50%",
           borderRadius: "50%",
           transform: "translate(-50%, -50%)"
-        }, responsiveStyle.responsiveStyle([brandColor], ([brandColor2 = {
+        }, next.useResponsiveStyle([brandColor], ([brandColor2 = {
           swatch: {
             hue: 0,
             saturation: 0,
@@ -905,7 +904,7 @@ const HiddenRadioButton = React.forwardRef(function HiddenRadioButton2(_C, ref)
         })))
       }),
       "&:not(:disabled)": {
-        [`&:focus ~ .${FAKE_RADIO_BUTTON_CLASS_NAME}`]: responsiveStyle.responsiveStyle([brandColor], ([brandColor2 = {
+        [`&:focus ~ .${FAKE_RADIO_BUTTON_CLASS_NAME}`]: next.useResponsiveStyle([brandColor], ([brandColor2 = {
           swatch: {
             hue: 0,
             saturation: 0,
@@ -913,11 +912,11 @@ const HiddenRadioButton = React.forwardRef(function HiddenRadioButton2(_C, ref)
           },
           alpha: 1
         }]) => ({
-          borderColor: responsiveStyle.colorToString(brandColor2)
+          borderColor: next.colorToString(brandColor2)
         }))
       },
       "&:not(:disabled):checked": {
-        [`&:focus ~ .${FAKE_RADIO_BUTTON_CLASS_NAME}`]: responsiveStyle.responsiveStyle([contrast], ([contrast2 = next.Contrasts.LIGHT]) => ({
+        [`&:focus ~ .${FAKE_RADIO_BUTTON_CLASS_NAME}`]: next.useResponsiveStyle([contrast], ([contrast2 = next.Contrasts.LIGHT]) => ({
           borderColor: getContrastBorderColor(contrast2, error)
         }))
       }
@@ -964,7 +963,7 @@ function StyledLabel(_G) {
     "className"
   ]);
   return /* @__PURE__ */ jsxRuntime.jsx(Label$1, __spreadProps(__spreadValues({}, restOfProps), {
-    className: css.cx(responsiveStyle.useStyle({
+    className: css.cx(next.useStyle({
       display: "flex",
       alignItems: "center",
       margin: "8px 0",
@@ -981,7 +980,7 @@ function RadioButtonContainer(_I) {
     "className"
   ]);
   return /* @__PURE__ */ jsxRuntime.jsx("span", __spreadProps(__spreadValues({}, restOfProps), {
-    className: css.cx(responsiveStyle.useStyle({
+    className: css.cx(next.useStyle({
       marginRight: 8
     }), className)
   }));
@@ -1048,13 +1047,13 @@ function Container(_M) {
     "className"
   ]);
   return /* @__PURE__ */ jsxRuntime.jsx("div", __spreadProps(__spreadValues({}, restOfProps), {
-    className: css.cx(responsiveStyle.useStyle(responsiveField({
+    className: css.cx(next.useStyle(responsiveField({
       shape,
       size,
       contrast,
       brandColor,
       error
-    })), responsiveStyle.useStyle(__spreadValues({
+    })), next.useStyle(__spreadValues({
       display: "flex",
       alignItems: "center",
       position: "relative",
@@ -1063,7 +1062,7 @@ function Container(_M) {
       "&:focus, &:focus-within": {
         borderColor: "#e54e7f"
       }
-    }, responsiveStyle.responsiveStyle([size, contrast], ([size2 = next.Sizes.MEDIUM, contrast2 = next.Contrasts.LIGHT]) => ({
+    }, next.useResponsiveStyle([size, contrast], ([size2 = next.Sizes.MEDIUM, contrast2 = next.Contrasts.LIGHT]) => ({
       minHeight: getSizeHeight$2(size2),
       maxHeight: getSizeHeight$2(size2),
       "&::after": {
@@ -1086,7 +1085,7 @@ const Select = React.forwardRef(function Select2(_O, ref) {
   ]);
   return /* @__PURE__ */ jsxRuntime.jsx("select", __spreadProps(__spreadValues({}, restOfProps), {
     ref,
-    className: css.cx(responsiveStyle.useStyle({
+    className: css.cx(next.useStyle({
       appearance: "none",
       position: "absolute",
       top: 0,
@@ -1285,14 +1284,14 @@ function Label({
   size
 }) {
   return /* @__PURE__ */ jsxRuntime.jsx("div", {
-    className: css.cx(responsiveStyle.useStyle({
+    className: css.cx(next.useStyle({
       display: "block",
       maxWidth: 120,
       minWidth: 60,
       borderRadius: 2,
       backgroundColor: "#5f49f4",
       opacity: 0.4
-    }), responsiveStyle.useStyle(responsiveStyle.responsiveStyle([size], ([size2 = next.Sizes.MEDIUM]) => ({
+    }), next.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 +1303,14 @@ function Input({
   size
 }) {
   return /* @__PURE__ */ jsxRuntime.jsx("div", {
-    className: css.cx(responsiveStyle.useStyle({
+    className: css.cx(next.useStyle({
       display: "block",
       width: "100%",
       borderWidth: 2,
       borderStyle: "solid",
       borderColor: "#5f49f4",
       opacity: 0.4
-    }), responsiveStyle.useStyle(responsiveStyle.responsiveStyle([shape, size], ([shape2 = next.Shapes.ROUNDED, size2 = next.Sizes.MEDIUM]) => ({
+    }), next.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 +1473,7 @@ const spin = css.keyframes`
 `;
 function Spinner() {
   return /* @__PURE__ */ jsxRuntime.jsx(SvgSpinner20, {
-    className: responsiveStyle.useStyle({
+    className: next.useStyle({
       display: "inline-flex",
       animation: `${spin} 1s linear infinite`,
       stroke: "currentColor"
@@ -1533,11 +1532,11 @@ const GridForm = React.forwardRef(function GridFrom(_aa, ref) {
   ]);
   return /* @__PURE__ */ jsxRuntime.jsx("form", __spreadProps(__spreadValues({}, restOfProps), {
     ref,
-    className: css.cx(responsiveStyle.useStyle({
+    className: css.cx(next.useStyle({
       display: "flex",
       flexWrap: "wrap",
       width: "100%"
-    }), responsiveStyle.useStyle(responsiveStyle.responsiveStyle([size], ([size2 = next.Sizes.MEDIUM]) => ({
+    }), next.useStyle(next.useResponsiveStyle([size], ([size2 = next.Sizes.MEDIUM]) => ({
       fontSize: getSizeFontSize(size2)
     }))), className)
   }));
@@ -1558,10 +1557,10 @@ const GridItem = React.forwardRef(function GridItem2(_ca, ref) {
   ]);
   return /* @__PURE__ */ jsxRuntime.jsx("div", __spreadProps(__spreadValues({}, restOfProps), {
     ref,
-    className: css.cx(responsiveStyle.useStyle({
+    className: css.cx(next.useStyle({
       alignSelf: "flex-end",
       flexDirection: "column"
-    }), responsiveStyle.useStyle(responsiveStyle.responsiveGridItem({
+    }), next.useStyle(next.useResponsiveGridItem({
       grid,
       index: index2,
       rowGap,
@@ -1591,11 +1590,11 @@ function StyledButton(_ea) {
   ]);
   return /* @__PURE__ */ jsxRuntime.jsx(Button$1["default"], __spreadProps(__spreadValues({}, restOfProps), {
     as: "button",
-    className: css.cx(responsiveStyle.useStyle({
+    className: css.cx(next.useStyle({
       display: "flex",
       alignItems: "center",
       justifyContent: "center"
-    }), responsiveStyle.useStyle(responsiveStyle.responsiveStyle([size, alignment], ([size2 = next.Sizes.MEDIUM, alignment2 = next.Alignments.CENTER]) => ({
+    }), next.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 +1610,7 @@ function ErrorContainer(_ga) {
     "className"
   ]);
   return /* @__PURE__ */ jsxRuntime.jsx("div", __spreadProps(__spreadValues({}, restOfProps), {
-    className: css.cx(responsiveStyle.useStyle({
+    className: css.cx(next.useStyle({
       padding: "8px 16px",
       backgroundColor: "#f19eb9",
       borderRadius: 4,
@@ -1626,7 +1625,7 @@ function IconContainer(_ia) {
     "className"
   ]);
   return /* @__PURE__ */ jsxRuntime.jsx("div", __spreadProps(__spreadValues({}, restOfProps), {
-    className: css.cx(responsiveStyle.useStyle({
+    className: css.cx(next.useStyle({
       fill: "currentColor"
     }), className)
   }));
@@ -1638,7 +1637,7 @@ function ErrorMessage(_ka) {
     "className"
   ]);
   return /* @__PURE__ */ jsxRuntime.jsx("p", __spreadProps(__spreadValues({}, restOfProps), {
-    className: css.cx(responsiveStyle.useStyle({
+    className: css.cx(next.useStyle({
       fontSize: 12,
       margin: "8px 0",
       color: "rgba(127, 0, 0, 0.95)"
@@ -1691,8 +1690,8 @@ const Form = React.forwardRef(function Form2({
     var _a;
     return (_a = fieldsProp == null ? void 0 : fieldsProp.grid) != null ? _a : [];
   }, [fieldsProp]);
-  const table = responsiveStyle.useTable(tableId != null ? tableId : null);
-  const client = responsiveStyle.useMakeswiftClient();
+  const table = next.useTable(tableId != null ? tableId : null);
+  const client = next.useMakeswiftClient();
   const [refEl, setRefEl] = React.useState(null);
   const [propControllers, setPropControllers] = React.useState(null);
   const [initialValues, setInitialValues] = React.useState(() => fields.reduce((acc, formField) => {