@makeswift/runtime 0.2.19 → 0.3.0

package/dist/Form.cjs.js

@@ -32,14 +32,13 @@ var __objRest = (source, exclude) => {
 };
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 var React = require("react");
-var styled = require("styled-components");
 var formik = require("formik");
-var cssMediaRules = require("./cssMediaRules.cjs.js");
+var css = require("@emotion/css");
 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 index = require("./index.cjs2.js");
 var boxModels = require("./box-models.cjs.js");
 var client = require("@apollo/client");
 require("use-sync-external-store/shim/with-selector");
@@ -55,7 +54,6 @@ require("slate");
 require("./graphql.cjs.js");
 require("./text-input.cjs.js");
 require("./combobox.cjs.js");
-require("@emotion/css");
 require("scroll-into-view-if-needed");
 require("react-dom");
 require("html-react-parser");
@@ -94,7 +92,6 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 var React__namespace = /* @__PURE__ */ _interopNamespace(React);
-var styled__default = /* @__PURE__ */ _interopDefaultLegacy(styled);
 var ColorHelper__default = /* @__PURE__ */ _interopDefaultLegacy(ColorHelper);
 var _path;
 function _extends$1() {
@@ -211,36 +208,32 @@ function getContrastPlaceholderColor(contrast) {
       throw new Error(`Invalid form contrast "${contrast}"`);
   }
 }
-function cssField() {
-  return styled.css`
-    display: block;
-    width: 100%;
-    outline: none;
-    border-width: 1px;
-    border-style: solid;
-    transition: border-color 200ms;
-    ${(props) => cssMediaRules.cssMediaRules([props.shape, props.size, props.contrast, props.brandColor], ([
+function responsiveField(props) {
+  return __spreadValues({
+    display: "block",
+    width: "100%",
+    outline: "none",
+    borderWidth: 1,
+    borderStyle: "solid",
+    transition: "border-color 200ms"
+  }, next.responsiveStyle([props.shape, props.size, props.contrast, props.brandColor], ([
     shape = next.Shapes.ROUNDED,
     size = next.Sizes.MEDIUM,
     contrast = next.Contrasts.LIGHT,
     brandColor = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 }
-  ]) => styled.css`
-          padding: ${getSizeVerticalPadding(size)}px ${getSizeHorizontalPadding(size)}px;
-          border-radius: ${getShapeBorderRadius(shape)}px;
-          border-color: ${getContrastBorderColor(contrast, props.error)};
-          color: ${getContrastColor$1(contrast)};
-          background-color: ${getContrastBackgroundColor(contrast)};
-
-          :focus,
-          :focus-within {
-            border-color: ${next.colorToString(brandColor)};
-          }
-
-          ::placeholder {
-            color: ${getContrastPlaceholderColor(contrast)};
-          }
-        `)}
-  `;
+  ]) => ({
+    padding: `${getSizeVerticalPadding(size)}px ${getSizeHorizontalPadding(size)}px`,
+    borderRadius: getShapeBorderRadius(shape),
+    borderColor: getContrastBorderColor(contrast, props.error),
+    color: getContrastColor$1(contrast),
+    backgroundColor: getContrastBackgroundColor(contrast),
+    ":focus, :focus-within": {
+      borderColor: next.colorToString(brandColor)
+    },
+    "::placeholder": {
+      color: getContrastPlaceholderColor(contrast)
+    }
+  })));
 }
 function getSizeHeight$1(size) {
   switch (size) {
@@ -254,22 +247,15 @@ function getSizeHeight$1(size) {
       throw new Error(`Invalid form size "${size}"`);
   }
 }
-const Base$2 = styled__default["default"].input.withConfig({
-  shouldForwardProp: (prop, defaultValidator) => !["shape", "size", "contrast", "brandColor", "error"].includes(prop.toString()) && defaultValidator(prop)
-})`
-  ${cssField()}
-  ${(props) => cssMediaRules.cssMediaRules([props.size], ([size = next.Sizes.MEDIUM]) => styled.css`
-        min-height: ${getSizeHeight$1(size)}px;
-        max-height: ${getSizeHeight$1(size)}px;
-      `)}
-`;
 var Input$2 = React.forwardRef(function Input2(_a, ref) {
   var _b = _a, {
     error = false,
-    form
+    form,
+    className
   } = _b, restOfProps = __objRest(_b, [
     "error",
-    "form"
+    "form",
+    "className"
   ]);
   const {
     shape,
@@ -277,58 +263,68 @@ var Input$2 = React.forwardRef(function Input2(_a, ref) {
     contrast,
     brandColor
   } = next.useFormContext();
-  return /* @__PURE__ */ jsxRuntime.jsx(Base$2, __spreadProps(__spreadValues({}, restOfProps), {
+  return /* @__PURE__ */ jsxRuntime.jsx("input", __spreadProps(__spreadValues({}, restOfProps), {
     ref,
-    error,
-    shape,
-    size,
-    contrast,
-    brandColor
+    className: css.cx(next.useStyle(responsiveField({
+      shape,
+      size,
+      contrast,
+      brandColor,
+      error
+    })), next.useStyle(next.responsiveStyle([size], ([size2 = next.Sizes.MEDIUM]) => ({
+      minHeight: getSizeHeight$1(size2),
+      maxHeight: getSizeHeight$1(size2)
+    }))), className)
   }));
 });
-const Container$3 = styled__default["default"].div.withConfig({
-  shouldForwardProp: (prop) => !["width", "margin"].includes(prop.toString())
-})`
-  display: flex;
-  flex-direction: column;
-  ${cssMediaRules.cssWidth()};
-  ${cssMediaRules.cssMargin()};
-`;
-const Label$2 = styled__default["default"].div`
-  max-width: 120px;
-  min-width: 60px;
-  height: 8px;
-  border-radius: 2px;
-  background-color: #a1a8c2;
-  opacity: 0.4;
-  margin-bottom: 8px;
-`;
-const Input$1 = styled__default["default"].div`
-  min-width: 80px;
-  height: 32px;
-  border-radius: 4px;
-  border-width: 2px;
-  border-style: solid;
-  border-color: #a1a8c2;
-  opacity: 0.4;
-`;
-const Button = styled__default["default"].div`
-  min-width: 140px;
-  height: 32px;
-  border-radius: 4px;
-  background-color: #a1a8c2;
-  opacity: 0.4;
-`;
+function Label$2() {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", {
+    className: next.useStyle({
+      maxWidth: 120,
+      minWidth: 60,
+      height: 8,
+      borderRadius: 2,
+      backgroundColor: "#a1a8c2",
+      opacity: 0.4,
+      marginBottom: 8
+    })
+  });
+}
+function Input$1() {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", {
+    className: next.useStyle({
+      minWidth: 80,
+      height: 32,
+      borderRadius: 4,
+      borderWidth: 2,
+      borderStyle: "solid",
+      borderColor: "#a1a8c2",
+      opacity: 0.4
+    })
+  });
+}
+function Button() {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", {
+    className: next.useStyle({
+      minWidth: 140,
+      height: 32,
+      borderRadius: 4,
+      backgroundColor: "#a1a8c2",
+      opacity: 0.4
+    })
+  });
+}
 var Placeholder = React.forwardRef(function Placeholder2({
   className,
   width,
   margin
 }, ref) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(Container$3, {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", {
     ref,
-    className,
-    width,
-    margin,
+    className: css.cx(next.useStyle({
+      display: "flex",
+      flexDirection: "column"
+    }), width, margin, className),
     children: [/* @__PURE__ */ jsxRuntime.jsxs("div", {
       style: {
         display: "flex",
@@ -375,44 +371,46 @@ function getContrastColor(contrast) {
       throw new Error(`Invalid form contrast "${contrast}"`);
   }
 }
-const Base$1 = styled__default["default"].label.withConfig({
-  shouldForwardProp: (prop, defaultValidator) => !["contrast", "size", "textStyle", "textColor"].includes(prop.toString()) && defaultValidator(prop)
-})`
-  display: block;
-  margin: 0 0 0.25em 0;
-  ${cssMediaRules.cssTextStyle()}
-  ${(props) => cssMediaRules.cssMediaRules([props.size, props.contrast, props.textColor], ([size = next.Sizes.MEDIUM, contrast = next.Contrasts.LIGHT, textColor]) => styled.css`
-        min-height: ${getSizeHeight(size)}px;
-        color: ${textColor == null ? getContrastColor(contrast) : next.colorToString(textColor)};
-      `)}
-`;
-function Label$1(props) {
+function Label$1(_c) {
+  var _d = _c, {
+    as,
+    className
+  } = _d, restOfProps = __objRest(_d, [
+    "as",
+    "className"
+  ]);
+  const Component = as != null ? as : "label";
   const {
     contrast,
     size,
     labelTextStyle,
     labelTextColor
   } = next.useFormContext();
-  return /* @__PURE__ */ jsxRuntime.jsx(Base$1, __spreadProps(__spreadValues({}, props), {
-    contrast,
-    size,
-    textStyle: labelTextStyle,
-    textColor: labelTextColor
+  return /* @__PURE__ */ jsxRuntime.jsx(Component, __spreadProps(__spreadValues({}, restOfProps), {
+    className: css.cx(next.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]) => ({
+      minHeight: getSizeHeight(size2),
+      color: textColor == null ? getContrastColor(contrast2) : next.colorToString(textColor)
+    }))), className)
   }));
 }
-var SingleLineTextTableField = React.forwardRef(function SingleLineTextTableField2(_c, ref) {
-  var _d = _c, {
+var SingleLineTextTableField = React.forwardRef(function SingleLineTextTableField2(_e, ref) {
+  var _f = _e, {
     id,
     label = "",
     name,
     error,
-    hideLabel = false
-  } = _d, restOfProps = __objRest(_d, [
+    hideLabel = false,
+    tableColumn
+  } = _f, restOfProps = __objRest(_f, [
     "id",
     "label",
     "name",
     "error",
-    "hideLabel"
+    "hideLabel",
+    "tableColumn"
   ]);
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [!hideLabel && /* @__PURE__ */ jsxRuntime.jsx(Label$1, {
@@ -428,17 +426,11 @@ var SingleLineTextTableField = React.forwardRef(function SingleLineTextTableFiel
     }))]
   });
 });
-const Base = styled__default["default"].textarea.withConfig({
-  shouldForwardProp: (prop, defaultValidator) => !["error", "shape", "size", "contrast", "brandColor"].includes(prop.toString()) && defaultValidator(prop)
-})`
-  resize: vertical;
-  ${cssField()}
-`;
-var TextArea = React.forwardRef(function TextArea2(_e, ref) {
-  var _f = _e, {
+var TextArea = React.forwardRef(function TextArea2(_g2, ref) {
+  var _h = _g2, {
     error = false,
     form
-  } = _f, restOfProps = __objRest(_f, [
+  } = _h, restOfProps = __objRest(_h, [
     "error",
     "form"
   ]);
@@ -448,27 +440,33 @@ var TextArea = React.forwardRef(function TextArea2(_e, ref) {
     contrast,
     brandColor
   } = next.useFormContext();
-  return /* @__PURE__ */ jsxRuntime.jsx(Base, __spreadProps(__spreadValues({}, restOfProps), {
+  return /* @__PURE__ */ jsxRuntime.jsx("textarea", __spreadProps(__spreadValues({}, restOfProps), {
     ref,
-    rows: 4,
-    error,
-    shape,
-    size,
-    contrast,
-    brandColor
+    className: css.cx(next.useStyle({
+      resize: "vertical"
+    }), next.useStyle(responsiveField({
+      error,
+      shape,
+      size,
+      contrast,
+      brandColor
+    }))),
+    rows: 4
   }));
 });
-var LongTextTableField = React.forwardRef(function LongTextTableField2(_g2, ref) {
-  var _h = _g2, {
+var LongTextTableField = React.forwardRef(function LongTextTableField2(_i, ref) {
+  var _j = _i, {
     id,
     label = "",
     error,
-    hideLabel = false
-  } = _h, restOfProps = __objRest(_h, [
+    hideLabel = false,
+    tableColumn
+  } = _j, restOfProps = __objRest(_j, [
     "id",
     "label",
     "error",
-    "hideLabel"
+    "hideLabel",
+    "tableColumn"
   ]);
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [!hideLabel && /* @__PURE__ */ jsxRuntime.jsx(Label$1, {
@@ -496,122 +494,124 @@ function getCheckmarkColor$1({
     l
   }).alpha(a).isLight() ? "rgba(0, 0, 0, 0.7)" : "rgba(255, 255, 255, 0.95)";
 }
-const Container$2 = styled__default["default"].div.withConfig({
-  shouldForwardProp: (prop) => !["size"].includes(prop)
-})`
-  position: relative;
-  ${(props) => cssMediaRules.cssMediaRules([props.size], ([size = next.Sizes.MEDIUM]) => styled.css`
-        height: ${getSizeHeight(size)}px;
-        width: ${getSizeHeight(size)}px;
-      `)}
-`;
-const FakeCheckbox = styled__default["default"].div.withConfig({
-  shouldForwardProp: (prop) => !["contrast", "error"].includes(prop)
-})`
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  border-style: solid;
-  border-radius: 4px;
-  pointer-events: none;
-  border-width: 1px;
-  ${(props) => cssMediaRules.cssMediaRules([props.contrast], ([contrast = next.Contrasts.LIGHT]) => styled.css`
-        border-color: ${getContrastBorderColor(contrast, props.error)};
-        background-color: ${getContrastBackgroundColor(contrast)};
-      `)}
-`;
-const HiddenCheckbox = styled__default["default"].input.withConfig({
-  shouldForwardProp: (prop, defaultValidator) => !["size", "brandColor", "contrast", "error"].includes(prop) && defaultValidator(prop)
-})`
-  position: absolute;
-  opacity: 0;
-  width: 100%;
-  height: 100%;
-  cursor: pointer;
-
-  &:disabled {
-    cursor: no-drop;
-
-    & ~ ${FakeCheckbox} {
-      opacity: 0.5;
-    }
-  }
-
-  &:checked ~ ${FakeCheckbox} {
-    ${(props) => cssMediaRules.cssMediaRules([props.brandColor], ([{
-  swatch = {
-    hue: 0,
-    saturation: 0,
-    lightness: 0
-  },
-  alpha = 1
-} = {}]) => styled.css`
-          background-color: ${next.colorToString({
-  swatch,
-  alpha
-})};
-        `)}
-    border-color: transparent;
-
-    &::after {
-      content: '';
-      position: absolute;
-      box-sizing: content-box;
-      width: 25%;
-      height: 50%;
-      ${(props) => cssMediaRules.cssMediaRules([props.size], ([size = next.Sizes.MEDIUM]) => styled.css`
-            border-width: ${getSizeHeight(size) * 0.1}px;
-            border-left: 0;
-            border-top: 0;
-          `)}
-      border-style: solid;
-      ${(props) => cssMediaRules.cssMediaRules([props.brandColor], ([{
-  swatch = {
-    hue: 0,
-    saturation: 0,
-    lightness: 0
-  },
-  alpha = 1
-} = {}]) => styled.css`
-            border-color: ${getCheckmarkColor$1({
-  swatch,
-  alpha
-})};
-          `)}
-      transform: rotate(45deg) translate3d(91%, -23%, 0);
-    }
-  }
-
-  &:not(:disabled) {
-    &:focus ~ ${FakeCheckbox} {
-      ${(props) => cssMediaRules.cssMediaRules([props.brandColor], ([brandColor = {
-  swatch: {
-    hue: 0,
-    saturation: 0,
-    lightness: 0
-  },
-  alpha: 1
-}]) => styled.css`
-            border-color: ${next.colorToString(brandColor)};
-          `)}
-    }
-  }
-
-  &:not(:disabled):checked {
-    &:focus ~ ${FakeCheckbox} {
-      ${(props) => cssMediaRules.cssMediaRules([props.contrast], ([contrast = next.Contrasts.LIGHT]) => styled.css`
-            border-color: ${getContrastBorderColor(contrast, props.error)};
-          `)}
-    }
-  }
-`;
-var Checkbox = React.forwardRef(function Checkbox2(_i, ref) {
-  var _j = _i, {
+const FAKE_CHECKBOX_CLASS_NAME = "fake-checkbox";
+function FakeCheckbox({
+  className,
+  style,
+  contrast,
+  error
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", {
+    style,
+    className: css.cx(FAKE_CHECKBOX_CLASS_NAME, next.useStyle({
+      position: "absolute",
+      width: "100%",
+      height: "100%",
+      borderStyle: "solid",
+      borderRadius: 4,
+      pointerEvents: "none",
+      borderWidth: 1
+    }), next.useStyle(next.responsiveStyle([contrast], ([contrast2 = next.Contrasts.LIGHT]) => ({
+      borderColor: getContrastBorderColor(contrast2, error),
+      backgroundColor: getContrastBackgroundColor(contrast2)
+    }))), className)
+  });
+}
+const HiddenCheckbox = React.forwardRef(function HiddenCheckbox2(_k, ref) {
+  var _l = _k, {
+    size,
+    brandColor,
+    contrast,
+    error,
+    className
+  } = _l, restOfProps = __objRest(_l, [
+    "size",
+    "brandColor",
+    "contrast",
+    "error",
+    "className"
+  ]);
+  return /* @__PURE__ */ jsxRuntime.jsx("input", __spreadProps(__spreadValues({}, restOfProps), {
+    ref,
+    className: css.cx(next.useStyle({
+      position: "absolute",
+      opacity: 0,
+      width: "100%",
+      height: "100%",
+      cursor: "pointer",
+      "&:disabled": {
+        cursor: "no-drop",
+        [`& ~ .${FAKE_CHECKBOX_CLASS_NAME}`]: {
+          opacity: 0.5
+        }
+      },
+      [`&:checked ~ .${FAKE_CHECKBOX_CLASS_NAME}`]: __spreadProps(__spreadValues({}, next.responsiveStyle([brandColor], ([{
+        swatch = {
+          hue: 0,
+          saturation: 0,
+          lightness: 0
+        },
+        alpha = 1
+      } = {}]) => ({
+        backgroundColor: next.colorToString({
+          swatch,
+          alpha
+        })
+      }))), {
+        borderColor: "transparent",
+        "&::after": __spreadProps(__spreadValues({
+          content: '""',
+          position: "absolute",
+          boxSizing: "content-box",
+          width: "25%",
+          height: "50%",
+          borderStyle: "solid"
+        }, next.responsiveStyle([size, brandColor], ([size2 = next.Sizes.MEDIUM, {
+          swatch = {
+            hue: 0,
+            saturation: 0,
+            lightness: 0
+          },
+          alpha = 1
+        } = {}]) => ({
+          borderWidth: getSizeHeight(size2) * 0.1,
+          borderLeft: 0,
+          borderTop: 0,
+          borderColor: getCheckmarkColor$1({
+            swatch,
+            alpha
+          })
+        }))), {
+          transform: "rotate(45deg) translate3d(91%, -23%, 0)"
+        })
+      }),
+      "&:not(:disabled)": {
+        [`&:focus ~ .${FAKE_CHECKBOX_CLASS_NAME}`]: next.responsiveStyle([brandColor], ([brandColor2 = {
+          swatch: {
+            hue: 0,
+            saturation: 0,
+            lightness: 0
+          },
+          alpha: 1
+        }]) => ({
+          borderColor: next.colorToString(brandColor2)
+        }))
+      },
+      "&:not(:disabled):checked": {
+        [`&:focus ~ .${FAKE_CHECKBOX_CLASS_NAME}`]: next.responsiveStyle([contrast], ([contrast2 = next.Contrasts.LIGHT]) => ({
+          borderColor: getContrastBorderColor(contrast2, error)
+        }))
+      }
+    }), className)
+  }));
+});
+var Checkbox = React.forwardRef(function Checkbox2(_m, ref) {
+  var _n = _m, {
     error,
     className,
     style,
     form
-  } = _j, restOfProps = __objRest(_j, [
+  } = _n, restOfProps = __objRest(_n, [
     "error",
     "className",
     "style",
@@ -622,8 +622,13 @@ var Checkbox = React.forwardRef(function Checkbox2(_i, ref) {
     contrast,
     brandColor
   } = next.useFormContext();
-  return /* @__PURE__ */ jsxRuntime.jsxs(Container$2, {
-    size,
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", {
+    className: css.cx(next.useStyle({
+      position: "relative"
+    }), next.useStyle(next.responsiveStyle([size], ([size2 = next.Sizes.MEDIUM]) => ({
+      height: getSizeHeight(size2),
+      width: getSizeHeight(size2)
+    })))),
     children: [/* @__PURE__ */ jsxRuntime.jsx(HiddenCheckbox, __spreadProps(__spreadValues({}, restOfProps), {
       type: "checkbox",
       ref,
@@ -639,33 +644,25 @@ var Checkbox = React.forwardRef(function Checkbox2(_i, ref) {
     })]
   });
 });
-const StyledLabel$2 = styled__default["default"](Label$1)`
-  display: flex;
-  align-items: center;
-  margin: 0;
-  ${(props) => cssMediaRules.cssMediaRules([props.size], ([size = next.Sizes.MEDIUM]) => styled.css`
-        min-height: ${getSizeHeight$1(size)}px;
-        max-height: ${getSizeHeight$1(size)}px;
-      `)}
-`;
-const CheckboxContainer$1 = styled__default["default"].span`
-  margin-right: 8px;
-`;
-var CheckboxTableField = React.forwardRef(function CheckboxTableField2(_k, ref) {
-  var _l = _k, {
+var CheckboxTableField = React.forwardRef(function CheckboxTableField2(_o, ref) {
+  var _p = _o, {
     form,
     id,
     name,
     label = "",
     value = false,
-    error
-  } = _l, restOfProps = __objRest(_l, [
+    error,
+    hideLabel,
+    tableColumn
+  } = _p, restOfProps = __objRest(_p, [
     "form",
     "id",
     "name",
     "label",
     "value",
-    "error"
+    "error",
+    "hideLabel",
+    "tableColumn"
   ]);
   const {
     size
@@ -673,10 +670,20 @@ var CheckboxTableField = React.forwardRef(function CheckboxTableField2(_k, ref)
   function handleChange(event) {
     form.setFieldValue(name, event.currentTarget.checked);
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs(StyledLabel$2, {
+  return /* @__PURE__ */ jsxRuntime.jsxs(Label$1, {
+    className: css.cx(next.useStyle({
+      display: "flex",
+      alignItems: "center",
+      margin: 0
+    }), next.useStyle(next.responsiveStyle([size], ([size2 = next.Sizes.MEDIUM]) => ({
+      minHeight: getSizeHeight$1(size2),
+      maxHeight: getSizeHeight$1(size2)
+    })))),
     htmlFor: id,
-    size,
-    children: [/* @__PURE__ */ jsxRuntime.jsx(CheckboxContainer$1, {
+    children: [/* @__PURE__ */ jsxRuntime.jsx("span", {
+      className: next.useStyle({
+        marginRight: 8
+      }),
       children: /* @__PURE__ */ jsxRuntime.jsx(Checkbox, __spreadProps(__spreadValues({}, restOfProps), {
         "aria-label": label,
         checked: value,
@@ -688,30 +695,56 @@ var CheckboxTableField = React.forwardRef(function CheckboxTableField2(_k, ref)
     }), label]
   });
 });
-const MainLabel = styled__default["default"](Label$1)`
-  margin: 0 0 4px 0;
-`;
-const StyledLabel$1 = styled__default["default"](Label$1)`
-  display: flex;
-  align-items: center;
-  margin: 8px 0;
-
-  &:last-of-type {
-    margin-bottom: 0;
-  }
-`;
-const CheckboxContainer = styled__default["default"].span`
-  margin-right: 8px;
-`;
-var MultipleSelectTableField = React.forwardRef(function MultipleSelectTableField2(_m, ref) {
-  var _n = _m, {
+function MainLabel(_q) {
+  var _r = _q, {
+    className
+  } = _r, restOfProps = __objRest(_r, [
+    "className"
+  ]);
+  return /* @__PURE__ */ jsxRuntime.jsx(Label$1, __spreadProps(__spreadValues({}, restOfProps), {
+    className: css.cx(next.useStyle({
+      margin: "0 0 4px 0"
+    }), className)
+  }));
+}
+function StyledLabel$1(_s) {
+  var _t = _s, {
+    className
+  } = _t, restOfProps = __objRest(_t, [
+    "className"
+  ]);
+  return /* @__PURE__ */ jsxRuntime.jsx(Label$1, __spreadProps(__spreadValues({}, restOfProps), {
+    className: css.cx(next.useStyle({
+      display: "flex",
+      alignItems: "center",
+      margin: "8px 0",
+      "&:last-of-type": {
+        marginBottom: 0
+      }
+    }), className)
+  }));
+}
+function CheckboxContainer(_u) {
+  var _v = _u, {
+    className
+  } = _v, restOfProps = __objRest(_v, [
+    "className"
+  ]);
+  return /* @__PURE__ */ jsxRuntime.jsx("span", __spreadProps(__spreadValues({}, restOfProps), {
+    className: css.cx(next.useStyle({
+      marginRight: 8
+    }), className)
+  }));
+}
+var MultipleSelectTableField = React.forwardRef(function MultipleSelectTableField2(_w, ref) {
+  var _x = _w, {
     tableColumn,
     label = "",
     required,
     value = [],
     onChange,
     hideLabel = false
-  } = _n, restOfProps = __objRest(_n, [
+  } = _x, restOfProps = __objRest(_x, [
     "tableColumn",
     "label",
     "required",
@@ -765,115 +798,130 @@ function getCheckmarkColor({
     l
   }).alpha(a).isLight() ? "rgba(0, 0, 0, 0.7)" : "rgba(255, 255, 255, 0.95)";
 }
-const Container$1 = styled__default["default"].div.withConfig({
-  shouldForwardProp: (prop) => !["size"].includes(prop.toString())
-})`
-  position: relative;
-  ${(props) => cssMediaRules.cssMediaRules([props.size], ([size = next.Sizes.MEDIUM]) => styled.css`
-        height: ${getSizeHeight(size)}px;
-        width: ${getSizeHeight(size)}px;
-      `)}
-`;
-const FakeRadioButton = styled__default["default"].div.withConfig({
-  shouldForwardProp: (prop) => !["contrast", "error"].includes(prop.toString())
-})`
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  border-style: solid;
-  border-radius: 50%;
-  pointer-events: none;
-  border-width: 1px;
-  ${(props) => cssMediaRules.cssMediaRules([props.contrast], ([contrast = next.Contrasts.LIGHT]) => styled.css`
-        border-color: ${getContrastBorderColor(contrast, props.error)};
-        background-color: ${getContrastBackgroundColor(contrast)};
-      `)}
-`;
-const HiddenRadioButton = styled__default["default"].input.withConfig({
-  shouldForwardProp: (prop) => !["brandColor", "contrast", "error"].includes(prop.toString())
-}).attrs({
-  type: "radio"
-})`
-  position: absolute;
-  opacity: 0;
-  width: 100%;
-  height: 100%;
-  cursor: pointer;
-
-  &:disabled {
-    cursor: no-drop;
-
-    & ~ ${FakeRadioButton} {
-      opacity: 0.5;
-    }
-  }
-
-  &:checked ~ ${FakeRadioButton} {
-    ${(props) => cssMediaRules.cssMediaRules([props.brandColor], ([brandColor = {
-  swatch: {
-    hue: 0,
-    saturation: 0,
-    lightness: 0
-  },
-  alpha: 1
-}]) => styled.css`
-          background-color: ${next.colorToString(brandColor)};
-        `)}
-    border-color: transparent;
-
-    &::after {
-      content: '';
-      position: absolute;
-      box-sizing: content-box;
-      top: 50%;
-      left: 50%;
-      width: 50%;
-      height: 50%;
-      border-radius: 50%;
-      transform: translate(-50%, -50%);
-      ${(props) => cssMediaRules.cssMediaRules([props.brandColor], ([brandColor = {
-  swatch: {
-    hue: 0,
-    saturation: 0,
-    lightness: 0
-  },
-  alpha: 1
-}]) => styled.css`
-            background-color: ${getCheckmarkColor(brandColor)};
-          `)}
-    }
-  }
-
-  &:not(:disabled) {
-    &:focus ~ ${FakeRadioButton} {
-      ${(props) => cssMediaRules.cssMediaRules([props.brandColor], ([brandColor = {
-  swatch: {
-    hue: 0,
-    saturation: 0,
-    lightness: 0
-  },
-  alpha: 1
-}]) => styled.css`
-            border-color: ${next.colorToString(brandColor)};
-          `)}
-    }
-  }
-
-  &:not(:disabled):checked {
-    &:focus ~ ${FakeRadioButton} {
-      ${(props) => cssMediaRules.cssMediaRules([props.contrast], ([contrast = next.Contrasts.LIGHT]) => styled.css`
-            border-color: ${getContrastBorderColor(contrast, props.error)};
-          `)}
-    }
-  }
-`;
-var RadioButton = React.forwardRef(function RadioButton2(_o, ref) {
-  var _p = _o, {
+function Container$1({
+  size
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", {
+    className: css.cx(next.useStyle({
+      position: "relative"
+    }), next.useStyle(next.responsiveStyle([size], ([size2 = next.Sizes.MEDIUM]) => ({
+      height: getSizeHeight(size2),
+      width: getSizeHeight(size2)
+    }))))
+  });
+}
+const FAKE_RADIO_BUTTON_CLASS_NAME = "fake-radio-button";
+function FakeRadioButton(_y) {
+  var _z = _y, {
+    className,
+    contrast,
+    error
+  } = _z, restOfProps = __objRest(_z, [
+    "className",
+    "contrast",
+    "error"
+  ]);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", __spreadProps(__spreadValues({}, restOfProps), {
+    className: css.cx(FAKE_RADIO_BUTTON_CLASS_NAME, next.useStyle({
+      position: "absolute",
+      width: "100%",
+      height: "100%",
+      borderStyle: "solid",
+      borderRadius: "50%",
+      pointerEvents: "none",
+      borderWidth: 1
+    }), next.useStyle(next.responsiveStyle([contrast], ([contrast2 = next.Contrasts.LIGHT]) => ({
+      borderColor: getContrastBorderColor(contrast2, error),
+      backgroundColor: getContrastBackgroundColor(contrast2)
+    }))), className)
+  }));
+}
+const HiddenRadioButton = React.forwardRef(function HiddenRadioButton2(_A, ref) {
+  var _B = _A, {
+    className,
+    brandColor,
+    contrast,
+    error
+  } = _B, restOfProps = __objRest(_B, [
+    "className",
+    "brandColor",
+    "contrast",
+    "error"
+  ]);
+  return /* @__PURE__ */ jsxRuntime.jsx("input", __spreadProps(__spreadValues({}, restOfProps), {
+    type: "radio",
+    className: css.cx(next.useStyle({
+      position: "absolute",
+      opacity: 0,
+      width: "100%",
+      height: "100%",
+      cursor: "pointer",
+      "&:disabled": {
+        cursor: "no-drop",
+        [`& ~ .${FAKE_RADIO_BUTTON_CLASS_NAME}`]: {
+          opacity: 0.5
+        }
+      },
+      [`&:checked ~ .${FAKE_RADIO_BUTTON_CLASS_NAME}`]: __spreadProps(__spreadValues({}, next.responsiveStyle([brandColor], ([brandColor2 = {
+        swatch: {
+          hue: 0,
+          saturation: 0,
+          lightness: 0
+        },
+        alpha: 1
+      }]) => ({
+        backgroundColor: next.colorToString(brandColor2)
+      }))), {
+        borderColor: "transparent",
+        "&::after": __spreadValues({
+          content: '""',
+          position: "absolute",
+          boxSizing: "content-box",
+          top: "50%",
+          left: "50%",
+          width: "50%",
+          height: "50%",
+          borderRadius: "50%",
+          transform: "translate(-50%, -50%)"
+        }, next.responsiveStyle([brandColor], ([brandColor2 = {
+          swatch: {
+            hue: 0,
+            saturation: 0,
+            lightness: 0
+          },
+          alpha: 1
+        }]) => ({
+          backgroundColor: getCheckmarkColor(brandColor2)
+        })))
+      }),
+      "&:not(:disabled)": {
+        [`&:focus ~ .${FAKE_RADIO_BUTTON_CLASS_NAME}`]: next.responsiveStyle([brandColor], ([brandColor2 = {
+          swatch: {
+            hue: 0,
+            saturation: 0,
+            lightness: 0
+          },
+          alpha: 1
+        }]) => ({
+          borderColor: next.colorToString(brandColor2)
+        }))
+      },
+      "&:not(:disabled):checked": {
+        [`&:focus ~ .${FAKE_RADIO_BUTTON_CLASS_NAME}`]: next.responsiveStyle([contrast], ([contrast2 = next.Contrasts.LIGHT]) => ({
+          borderColor: getContrastBorderColor(contrast2, error)
+        }))
+      }
+    }), className),
+    ref
+  }));
+});
+var RadioButton = React.forwardRef(function RadioButton2(_C, ref) {
+  var _D = _C, {
     error,
     className,
     style,
     form
-  } = _p, restOfProps = __objRest(_p, [
+  } = _D, restOfProps = __objRest(_D, [
     "error",
     "className",
     "style",
@@ -899,27 +947,44 @@ var RadioButton = React.forwardRef(function RadioButton2(_o, ref) {
     })]
   });
 });
-const StyledLabel = styled__default["default"](Label$1)`
-  display: flex;
-  align-items: center;
-  margin: 8px 0;
-
-  &:last-of-type {
-    margin-bottom: 0;
-  }
-`;
-const RadioButtonContainer = styled__default["default"].span`
-  margin-right: 8px;
-`;
-var TableColumnRadioButtonGroup = React.forwardRef(function TableColumnRadioButtonGroup2(_q, ref) {
-  var _r = _q, {
+function StyledLabel(_E) {
+  var _F = _E, {
+    className
+  } = _F, restOfProps = __objRest(_F, [
+    "className"
+  ]);
+  return /* @__PURE__ */ jsxRuntime.jsx(Label$1, __spreadProps(__spreadValues({}, restOfProps), {
+    className: css.cx(next.useStyle({
+      display: "flex",
+      alignItems: "center",
+      margin: "8px 0",
+      "&:last-of-type": {
+        marginBottom: 0
+      }
+    }), className)
+  }));
+}
+function RadioButtonContainer(_G) {
+  var _H = _G, {
+    className
+  } = _H, restOfProps = __objRest(_H, [
+    "className"
+  ]);
+  return /* @__PURE__ */ jsxRuntime.jsx("span", __spreadProps(__spreadValues({}, restOfProps), {
+    className: css.cx(next.useStyle({
+      marginRight: 8
+    }), className)
+  }));
+}
+var TableColumnRadioButtonGroup = React.forwardRef(function TableColumnRadioButtonGroup2(_I, ref) {
+  var _J = _I, {
     tableColumn,
     label = "",
     value = "",
     required = false,
     hideLabel = false,
     onChange
-  } = _r, restOfProps = __objRest(_r, [
+  } = _J, restOfProps = __objRest(_J, [
     "tableColumn",
     "label",
     "value",
@@ -956,47 +1021,74 @@ var TableColumnRadioButtonGroup = React.forwardRef(function TableColumnRadioButt
     }, option.id))]
   });
 });
-const Container = styled__default["default"].div.withConfig({
-  shouldForwardProp: (prop) => !["error", "shape", "size", "contrast", "brandColor"].includes(prop.toString())
-})`
-  ${cssField()}
-  display: flex;
-  align-items: center;
-  position: relative;
-  user-select: none;
-  border-color: #f19eb9;
-
-  &:focus,
-  &:focus-within {
-    border-color: #e54e7f;
-  }
-
-  ${(props) => cssMediaRules.cssMediaRules([props.size, props.contrast], ([size = next.Sizes.MEDIUM, contrast = next.Contrasts.LIGHT]) => styled.css`
-        min-height: ${getSizeHeight$2(size)}px;
-        max-height: ${getSizeHeight$2(size)}px;
-
-        &::after {
-          content: '';
-          position: absolute;
-          right: ${getSizeHorizontalPadding(size)}px;
-          top: 50%;
-          transform: translate3d(0, -25%, 0);
-          border: solid 0.35em transparent;
-          border-top-color: ${getContrastColor$1(contrast)};
-        }
-      `)}
-`;
-const Select = styled__default["default"].select`
-  appearance: none;
-  position: absolute;
-  top: 0;
-  left: 0;
-  opacity: 0;
-  width: 100%;
-  height: 100%;
-`;
-var TableColumnSingleSelect = React.forwardRef(function TableColumnSingleSelect2(_s, ref) {
-  var _t = _s, {
+function Container(_K) {
+  var _L = _K, {
+    shape,
+    size,
+    contrast,
+    brandColor,
+    error,
+    className
+  } = _L, restOfProps = __objRest(_L, [
+    "shape",
+    "size",
+    "contrast",
+    "brandColor",
+    "error",
+    "className"
+  ]);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", __spreadProps(__spreadValues({}, restOfProps), {
+    className: css.cx(next.useStyle(responsiveField({
+      shape,
+      size,
+      contrast,
+      brandColor,
+      error
+    })), next.useStyle(__spreadValues({
+      display: "flex",
+      alignItems: "center",
+      position: "relative",
+      userSelect: "none",
+      borderColor: "#f19eb9",
+      "&:focus, &:focus-within": {
+        borderColor: "#e54e7f"
+      }
+    }, next.responsiveStyle([size, contrast], ([size2 = next.Sizes.MEDIUM, contrast2 = next.Contrasts.LIGHT]) => ({
+      minHeight: getSizeHeight$2(size2),
+      maxHeight: getSizeHeight$2(size2),
+      "&::after": {
+        content: '""',
+        position: "absolute",
+        right: getSizeHorizontalPadding(size2),
+        top: "50%",
+        transform: "translate3d(0, -25%, 0)",
+        border: "solid 0.35em transparent",
+        borderTopColor: getContrastColor$1(contrast2)
+      }
+    })))), className)
+  }));
+}
+const Select = React.forwardRef(function Select2(_M, ref) {
+  var _N = _M, {
+    className
+  } = _N, restOfProps = __objRest(_N, [
+    "className"
+  ]);
+  return /* @__PURE__ */ jsxRuntime.jsx("select", __spreadProps(__spreadValues({}, restOfProps), {
+    ref,
+    className: css.cx(next.useStyle({
+      appearance: "none",
+      position: "absolute",
+      top: 0,
+      left: 0,
+      opacity: 0,
+      width: "100%",
+      height: "100%"
+    }), className)
+  }));
+});
+var TableColumnSingleSelect = React.forwardRef(function TableColumnSingleSelect2(_O, ref) {
+  var _P = _O, {
     id,
     tableColumn,
     value = "",
@@ -1004,7 +1096,7 @@ var TableColumnSingleSelect = React.forwardRef(function TableColumnSingleSelect2
     error = false,
     hideLabel = false,
     form
-  } = _t, restOfProps = __objRest(_t, [
+  } = _P, restOfProps = __objRest(_P, [
     "id",
     "tableColumn",
     "value",
@@ -1047,10 +1139,10 @@ var TableColumnSingleSelect = React.forwardRef(function TableColumnSingleSelect2
     })]
   });
 });
-var SingleSelectTableField = React.forwardRef(function SingleSelectTableField2(_u, ref) {
-  var _v = _u, {
+var SingleSelectTableField = React.forwardRef(function SingleSelectTableField2(_Q, ref) {
+  var _R = _Q, {
     type
-  } = _v, restOfProps = __objRest(_v, [
+  } = _R, restOfProps = __objRest(_R, [
     "type"
   ]);
   return type === "select" ? /* @__PURE__ */ jsxRuntime.jsx(TableColumnSingleSelect, __spreadProps(__spreadValues({}, restOfProps), {
@@ -1059,19 +1151,21 @@ var SingleSelectTableField = React.forwardRef(function SingleSelectTableField2(_
     ref
   }));
 });
-var PhoneNumberTableField = React.forwardRef(function PhoneNumberTableField2(_w, ref) {
-  var _x = _w, {
+var PhoneNumberTableField = React.forwardRef(function PhoneNumberTableField2(_S, ref) {
+  var _T = _S, {
     id,
     label = "",
     name,
     error,
-    hideLabel = false
-  } = _x, restOfProps = __objRest(_x, [
+    hideLabel = false,
+    tableColumn
+  } = _T, restOfProps = __objRest(_T, [
     "id",
     "label",
     "name",
     "error",
-    "hideLabel"
+    "hideLabel",
+    "tableColumn"
   ]);
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [!hideLabel && /* @__PURE__ */ jsxRuntime.jsx(Label$1, {
@@ -1087,19 +1181,21 @@ var PhoneNumberTableField = React.forwardRef(function PhoneNumberTableField2(_w,
     }))]
   });
 });
-var EmailTableField = React.forwardRef(function EmailTableField2(_y, ref) {
-  var _z = _y, {
+var EmailTableField = React.forwardRef(function EmailTableField2(_U, ref) {
+  var _V = _U, {
     id,
     label = "",
     name,
     error,
-    hideLabel = false
-  } = _z, restOfProps = __objRest(_z, [
+    hideLabel = false,
+    tableColumn
+  } = _V, restOfProps = __objRest(_V, [
     "id",
     "label",
     "name",
     "error",
-    "hideLabel"
+    "hideLabel",
+    "tableColumn"
   ]);
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [!hideLabel && /* @__PURE__ */ jsxRuntime.jsx(Label$1, {
@@ -1115,19 +1211,21 @@ var EmailTableField = React.forwardRef(function EmailTableField2(_y, ref) {
     }))]
   });
 });
-var URLTableField = React.forwardRef(function URLTableField2(_A, ref) {
-  var _B = _A, {
+var URLTableField = React.forwardRef(function URLTableField2(_W, ref) {
+  var _X = _W, {
     id,
     label = "",
     name,
     error,
-    hideLabel = false
-  } = _B, restOfProps = __objRest(_B, [
+    hideLabel = false,
+    tableColumn
+  } = _X, restOfProps = __objRest(_X, [
     "id",
     "label",
     "name",
     "error",
-    "hideLabel"
+    "hideLabel",
+    "tableColumn"
   ]);
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [!hideLabel && /* @__PURE__ */ jsxRuntime.jsx(Label$1, {
@@ -1143,19 +1241,21 @@ var URLTableField = React.forwardRef(function URLTableField2(_A, ref) {
     }))]
   });
 });
-var NumberTableField = React.forwardRef(function NumberTableField2(_C, ref) {
-  var _D = _C, {
+var NumberTableField = React.forwardRef(function NumberTableField2(_Y, ref) {
+  var _Z = _Y, {
     id,
     label = "",
     name,
     error,
-    hideLabel = false
-  } = _D, restOfProps = __objRest(_D, [
+    hideLabel = false,
+    tableColumn
+  } = _Z, restOfProps = __objRest(_Z, [
     "id",
     "label",
     "name",
     "error",
-    "hideLabel"
+    "hideLabel",
+    "tableColumn"
   ]);
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [!hideLabel && /* @__PURE__ */ jsxRuntime.jsx(Label$1, {
@@ -1171,36 +1271,43 @@ var NumberTableField = React.forwardRef(function NumberTableField2(_C, ref) {
     }))]
   });
 });
-const Label = styled__default["default"].div.withConfig({
-  shouldForwardProp: (prop) => !["size"].includes(prop.toString())
-})`
-  display: block;
-  max-width: 120px;
-  min-width: 60px;
-  border-radius: 2px;
-  background-color: #5f49f4;
-  opacity: 0.4;
-  ${(props) => cssMediaRules.cssMediaRules([props.size], ([size = next.Sizes.MEDIUM]) => styled.css`
-        margin: calc(0.25 * ${getSizeHeight(size)}px + 2px) 0;
-        min-height: ${0.5 * getSizeHeight(size)}px;
-        max-height: ${0.5 * getSizeHeight(size)}px;
-      `)}
-`;
-const Input = styled__default["default"].div.withConfig({
-  shouldForwardProp: (prop) => !["shape", "size"].includes(prop.toString())
-})`
-  display: block;
-  width: 100%;
-  border-width: 2px;
-  border-style: solid;
-  border-color: #5f49f4;
-  opacity: 0.4;
-  ${(props) => cssMediaRules.cssMediaRules([props.shape, props.size], ([shape = next.Shapes.ROUNDED, size = next.Sizes.MEDIUM]) => styled.css`
-        min-height: ${getSizeHeight$1(size)}px;
-        max-height: ${getSizeHeight$1(size)}px;
-        border-radius: ${getShapeBorderRadius(shape)}px;
-      `)}
-`;
+function Label({
+  size
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", {
+    className: css.cx(next.useStyle({
+      display: "block",
+      maxWidth: 120,
+      minWidth: 60,
+      borderRadius: 2,
+      backgroundColor: "#5f49f4",
+      opacity: 0.4
+    }), next.useStyle(next.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)
+    }))))
+  });
+}
+function Input({
+  shape,
+  size
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", {
+    className: css.cx(next.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]) => ({
+      minHeight: getSizeHeight$1(size2),
+      maxHeight: getSizeHeight$1(size2),
+      borderRadius: getShapeBorderRadius(shape2)
+    }))))
+  });
+}
 function PlaceholderTableField() {
   const {
     size,
@@ -1347,7 +1454,7 @@ var SvgSpinner20 = function SvgSpinner202(props) {
     d: "M9 18A9 9 0 0 0 9 0"
   }))));
 };
-const spin = styled.keyframes`
+const spin = css.keyframes`
   from {
     transform: rotate(0deg);
   }
@@ -1355,13 +1462,14 @@ const spin = styled.keyframes`
     transform: rotate(360deg);
   }
 `;
-const Icon = styled__default["default"](SvgSpinner20)`
-  display: inline-flex;
-  animation: ${spin} 1s linear infinite;
-  stroke: currentColor;
-`;
 function Spinner() {
-  return /* @__PURE__ */ jsxRuntime.jsx(Icon, {});
+  return /* @__PURE__ */ jsxRuntime.jsx(SvgSpinner20, {
+    className: next.useStyle({
+      display: "inline-flex",
+      animation: `${spin} 1s linear infinite`,
+      stroke: "currentColor"
+    })
+  });
 }
 function useTableFormFieldRefs(propController, { fieldsCount }) {
   const [container, setContainer] = React.useState(null);
@@ -1405,25 +1513,52 @@ function getSizeFontSize(size) {
       throw new Error(`Invalid form size "${size}"`);
   }
 }
-const GridForm = styled__default["default"].form.withConfig({
-  shouldForwardProp: (prop) => !["size", "width", "margin"].includes(prop)
-})`
-  display: flex;
-  flex-wrap: wrap;
-  width: 100%;
-  ${(props) => cssMediaRules.cssMediaRules([props.size], ([size = next.Sizes.MEDIUM]) => styled.css`
-        font-size: ${getSizeFontSize(size)}px;
-      `)}
-  ${cssMediaRules.cssWidth()}
-  ${cssMediaRules.cssMargin()}
-`;
-const GridItem = styled__default["default"].div.withConfig({
-  shouldForwardProp: (prop) => !["grid", "index", "rowGap", "columnGap"].includes(prop)
-})`
-  align-self: flex-end;
-  flex-direction: column;
-  ${cssMediaRules.cssGridItem()}
-`;
+const GridForm = React.forwardRef(function GridFrom(__, ref) {
+  var _$ = __, {
+    className,
+    size
+  } = _$, restOfProps = __objRest(_$, [
+    "className",
+    "size"
+  ]);
+  return /* @__PURE__ */ jsxRuntime.jsx("form", __spreadProps(__spreadValues({}, restOfProps), {
+    ref,
+    className: css.cx(next.useStyle({
+      display: "flex",
+      flexWrap: "wrap",
+      width: "100%"
+    }), next.useStyle(next.responsiveStyle([size], ([size2 = next.Sizes.MEDIUM]) => ({
+      fontSize: getSizeFontSize(size2)
+    }))), className)
+  }));
+});
+const GridItem = React.forwardRef(function GridItem2(_aa, ref) {
+  var _ba = _aa, {
+    className,
+    grid,
+    index: index2,
+    rowGap,
+    columnGap
+  } = _ba, restOfProps = __objRest(_ba, [
+    "className",
+    "grid",
+    "index",
+    "rowGap",
+    "columnGap"
+  ]);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", __spreadProps(__spreadValues({}, restOfProps), {
+    ref,
+    className: css.cx(next.useStyle({
+      alignSelf: "flex-end",
+      flexDirection: "column"
+    }), next.useStyle(next.responsiveGridItem({
+      grid,
+      index: index2,
+      rowGap,
+      columnGap
+    })), className)
+  }));
+});
 function getAlignmentMargin(alignment) {
   switch (alignment) {
     case next.Alignments.LEFT:
@@ -1434,36 +1569,72 @@ function getAlignmentMargin(alignment) {
       return "0 auto";
   }
 }
-const StyledButton = styled__default["default"]((props) => /* @__PURE__ */ jsxRuntime.jsx(Button$1["default"], __spreadProps(__spreadValues({}, props), {
-  as: "button"
-}))).withConfig({
-  shouldForwardProp: (prop) => !["alignment"].includes(prop.toString())
-})`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  ${(props) => cssMediaRules.cssMediaRules([props.size, props.alignment], ([size = next.Sizes.MEDIUM, alignment = next.Alignments.CENTER]) => styled.css`
-        min-height: ${getSizeHeight$1(size)}px;
-        max-height: ${getSizeHeight$1(size)}px;
-        margin: ${getAlignmentMargin(alignment)};
-        padding-top: 0;
-        padding-bottom: 0;
-      `)}
-`;
-const ErrorContainer = styled__default["default"].div`
-  padding: 8px 16px;
-  background-color: #f19eb9;
-  border-radius: 4px;
-  margin-top: 16px;
-`;
-const IconContainer = styled__default["default"].div`
-  fill: currentColor;
-`;
-const ErrorMessage = styled__default["default"].p`
-  font-size: 12px;
-  margin: 8px 0;
-  color: rgba(127, 0, 0, 0.95);
-`;
+function StyledButton(_ca) {
+  var _da = _ca, {
+    className,
+    size,
+    alignment
+  } = _da, restOfProps = __objRest(_da, [
+    "className",
+    "size",
+    "alignment"
+  ]);
+  return /* @__PURE__ */ jsxRuntime.jsx(Button$1["default"], __spreadProps(__spreadValues({}, restOfProps), {
+    as: "button",
+    className: css.cx(next.useStyle({
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center"
+    }), next.useStyle(next.responsiveStyle([size, alignment], ([size2 = next.Sizes.MEDIUM, alignment2 = next.Alignments.CENTER]) => ({
+      minHeight: getSizeHeight$1(size2),
+      maxHeight: getSizeHeight$1(size2),
+      margin: getAlignmentMargin(alignment2),
+      paddingTop: 0,
+      paddingBottom: 0
+    }))), className)
+  }));
+}
+function ErrorContainer(_ea) {
+  var _fa = _ea, {
+    className
+  } = _fa, restOfProps = __objRest(_fa, [
+    "className"
+  ]);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", __spreadProps(__spreadValues({}, restOfProps), {
+    className: css.cx(next.useStyle({
+      padding: "8px 16px",
+      backgroundColor: "#f19eb9",
+      borderRadius: 4,
+      marginTop: 16
+    }), className)
+  }));
+}
+function IconContainer(_ga) {
+  var _ha = _ga, {
+    className
+  } = _ha, restOfProps = __objRest(_ha, [
+    "className"
+  ]);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", __spreadProps(__spreadValues({}, restOfProps), {
+    className: css.cx(next.useStyle({
+      fill: "currentColor"
+    }), className)
+  }));
+}
+function ErrorMessage(_ia) {
+  var _ja = _ia, {
+    className
+  } = _ja, restOfProps = __objRest(_ja, [
+    "className"
+  ]);
+  return /* @__PURE__ */ jsxRuntime.jsx("p", __spreadProps(__spreadValues({}, restOfProps), {
+    className: css.cx(next.useStyle({
+      fontSize: 12,
+      margin: "8px 0",
+      color: "rgba(127, 0, 0, 0.95)"
+    }), className)
+  }));
+}
 function getTableColumnDefaultValue(tableColumn) {
   switch (tableColumn.__typename) {
     case "CheckboxTableColumn":
@@ -1672,8 +1843,7 @@ const Form = React.forwardRef(function Form2({
             children: [/* @__PURE__ */ jsxRuntime.jsxs(GridForm, {
               ref: setRefEl,
               id,
-              width,
-              margin,
+              className: css.cx(width, margin),
               size,
               onSubmit: formik$1.handleSubmit,
               onReset: formik$1.handleReset,