@makeswift/runtime 0.2.18 → 0.3.0

package/dist/Form.es.js

@@ -31,14 +31,13 @@ var __objRest = (source, exclude) => {
 };
 import * as React from "react";
 import { forwardRef, useRef, useImperativeHandle, useState, useEffect, useMemo } from "react";
-import styled, { css, keyframes } from "styled-components";
 import { Field as Field$1, getIn, Formik } from "formik";
-import { c as cssMediaRules, a as cssWidth, b as cssMargin, i as cssTextStyle, h as cssGridItem } from "./cssMediaRules.es.js";
-import { r as Shapes, s as Sizes, C as Contrasts, p as colorToString, t as useFormContext, u as useIsInBuilder, v as useQuery, T as TABLE_BY_ID, w as useMutation, x as Provider, A as Alignments } from "./index.es.js";
+import { cx, keyframes } from "@emotion/css";
+import { r as responsiveStyle, x as Shapes, y as Sizes, C as Contrasts, v as colorToString, z as useFormContext, q as useStyle, t as responsiveTextStyle, u as useIsInBuilder, A as responsiveGridItem, B as useQuery, T as TABLE_BY_ID, F as useMutation, G as Provider, H as Alignments } from "./index.es.js";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import ColorHelper from "color";
 import Button$1 from "./Button.es.js";
-import { L as Link } from "./index.es3.js";
+import { L as Link } from "./index.es2.js";
 import { g as getBox } from "./box-models.es.js";
 import { gql } from "@apollo/client";
 import "use-sync-external-store/shim/with-selector";
@@ -54,7 +53,6 @@ import "slate";
 import "./graphql.es.js";
 import "./text-input.es.js";
 import "./combobox.es.js";
-import "@emotion/css";
 import "scroll-into-view-if-needed";
 import "react-dom";
 import "html-react-parser";
@@ -184,36 +182,32 @@ function getContrastPlaceholderColor(contrast) {
       throw new Error(`Invalid form contrast "${contrast}"`);
   }
 }
-function cssField() {
-  return css`
-    display: block;
-    width: 100%;
-    outline: none;
-    border-width: 1px;
-    border-style: solid;
-    transition: border-color 200ms;
-    ${(props) => 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"
+  }, responsiveStyle([props.shape, props.size, props.contrast, props.brandColor], ([
     shape = Shapes.ROUNDED,
     size = Sizes.MEDIUM,
     contrast = Contrasts.LIGHT,
     brandColor = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 }
-  ]) => 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: ${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: colorToString(brandColor)
+    },
+    "::placeholder": {
+      color: getContrastPlaceholderColor(contrast)
+    }
+  })));
 }
 function getSizeHeight$1(size) {
   switch (size) {
@@ -227,22 +221,15 @@ function getSizeHeight$1(size) {
       throw new Error(`Invalid form size "${size}"`);
   }
 }
-const Base$2 = styled.input.withConfig({
-  shouldForwardProp: (prop, defaultValidator) => !["shape", "size", "contrast", "brandColor", "error"].includes(prop.toString()) && defaultValidator(prop)
-})`
-  ${cssField()}
-  ${(props) => cssMediaRules([props.size], ([size = Sizes.MEDIUM]) => css`
-        min-height: ${getSizeHeight$1(size)}px;
-        max-height: ${getSizeHeight$1(size)}px;
-      `)}
-`;
 var Input$2 = forwardRef(function Input(_a, ref) {
   var _b = _a, {
     error = false,
-    form
+    form,
+    className
   } = _b, restOfProps = __objRest(_b, [
     "error",
-    "form"
+    "form",
+    "className"
   ]);
   const {
     shape,
@@ -250,58 +237,68 @@ var Input$2 = forwardRef(function Input(_a, ref) {
     contrast,
     brandColor
   } = useFormContext();
-  return /* @__PURE__ */ jsx(Base$2, __spreadProps(__spreadValues({}, restOfProps), {
+  return /* @__PURE__ */ jsx("input", __spreadProps(__spreadValues({}, restOfProps), {
     ref,
-    error,
-    shape,
-    size,
-    contrast,
-    brandColor
+    className: cx(useStyle(responsiveField({
+      shape,
+      size,
+      contrast,
+      brandColor,
+      error
+    })), useStyle(responsiveStyle([size], ([size2 = Sizes.MEDIUM]) => ({
+      minHeight: getSizeHeight$1(size2),
+      maxHeight: getSizeHeight$1(size2)
+    }))), className)
   }));
 });
-const Container$3 = styled.div.withConfig({
-  shouldForwardProp: (prop) => !["width", "margin"].includes(prop.toString())
-})`
-  display: flex;
-  flex-direction: column;
-  ${cssWidth()};
-  ${cssMargin()};
-`;
-const Label$2 = styled.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.div`
-  min-width: 80px;
-  height: 32px;
-  border-radius: 4px;
-  border-width: 2px;
-  border-style: solid;
-  border-color: #a1a8c2;
-  opacity: 0.4;
-`;
-const Button = styled.div`
-  min-width: 140px;
-  height: 32px;
-  border-radius: 4px;
-  background-color: #a1a8c2;
-  opacity: 0.4;
-`;
+function Label$2() {
+  return /* @__PURE__ */ jsx("div", {
+    className: useStyle({
+      maxWidth: 120,
+      minWidth: 60,
+      height: 8,
+      borderRadius: 2,
+      backgroundColor: "#a1a8c2",
+      opacity: 0.4,
+      marginBottom: 8
+    })
+  });
+}
+function Input$1() {
+  return /* @__PURE__ */ jsx("div", {
+    className: useStyle({
+      minWidth: 80,
+      height: 32,
+      borderRadius: 4,
+      borderWidth: 2,
+      borderStyle: "solid",
+      borderColor: "#a1a8c2",
+      opacity: 0.4
+    })
+  });
+}
+function Button() {
+  return /* @__PURE__ */ jsx("div", {
+    className: useStyle({
+      minWidth: 140,
+      height: 32,
+      borderRadius: 4,
+      backgroundColor: "#a1a8c2",
+      opacity: 0.4
+    })
+  });
+}
 var Placeholder = forwardRef(function Placeholder2({
   className,
   width,
   margin
 }, ref) {
-  return /* @__PURE__ */ jsxs(Container$3, {
+  return /* @__PURE__ */ jsxs("div", {
     ref,
-    className,
-    width,
-    margin,
+    className: cx(useStyle({
+      display: "flex",
+      flexDirection: "column"
+    }), width, margin, className),
     children: [/* @__PURE__ */ jsxs("div", {
       style: {
         display: "flex",
@@ -348,44 +345,46 @@ function getContrastColor(contrast) {
       throw new Error(`Invalid form contrast "${contrast}"`);
   }
 }
-const Base$1 = styled.label.withConfig({
-  shouldForwardProp: (prop, defaultValidator) => !["contrast", "size", "textStyle", "textColor"].includes(prop.toString()) && defaultValidator(prop)
-})`
-  display: block;
-  margin: 0 0 0.25em 0;
-  ${cssTextStyle()}
-  ${(props) => cssMediaRules([props.size, props.contrast, props.textColor], ([size = Sizes.MEDIUM, contrast = Contrasts.LIGHT, textColor]) => css`
-        min-height: ${getSizeHeight(size)}px;
-        color: ${textColor == null ? getContrastColor(contrast) : 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
   } = useFormContext();
-  return /* @__PURE__ */ jsx(Base$1, __spreadProps(__spreadValues({}, props), {
-    contrast,
-    size,
-    textStyle: labelTextStyle,
-    textColor: labelTextColor
+  return /* @__PURE__ */ jsx(Component, __spreadProps(__spreadValues({}, restOfProps), {
+    className: cx(useStyle({
+      display: "block",
+      margin: "0 0 0.25em 0"
+    }), useStyle(responsiveTextStyle(labelTextStyle)), useStyle(responsiveStyle([size, contrast, labelTextColor], ([size2 = Sizes.MEDIUM, contrast2 = Contrasts.LIGHT, textColor]) => ({
+      minHeight: getSizeHeight(size2),
+      color: textColor == null ? getContrastColor(contrast2) : colorToString(textColor)
+    }))), className)
   }));
 }
-var SingleLineTextTableField = forwardRef(function SingleLineTextTableField2(_c, ref) {
-  var _d = _c, {
+var SingleLineTextTableField = 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__ */ jsxs(Fragment, {
     children: [!hideLabel && /* @__PURE__ */ jsx(Label$1, {
@@ -401,17 +400,11 @@ var SingleLineTextTableField = forwardRef(function SingleLineTextTableField2(_c,
     }))]
   });
 });
-const Base = styled.textarea.withConfig({
-  shouldForwardProp: (prop, defaultValidator) => !["error", "shape", "size", "contrast", "brandColor"].includes(prop.toString()) && defaultValidator(prop)
-})`
-  resize: vertical;
-  ${cssField()}
-`;
-var TextArea = forwardRef(function TextArea2(_e, ref) {
-  var _f = _e, {
+var TextArea = forwardRef(function TextArea2(_g2, ref) {
+  var _h = _g2, {
     error = false,
     form
-  } = _f, restOfProps = __objRest(_f, [
+  } = _h, restOfProps = __objRest(_h, [
     "error",
     "form"
   ]);
@@ -421,27 +414,33 @@ var TextArea = forwardRef(function TextArea2(_e, ref) {
     contrast,
     brandColor
   } = useFormContext();
-  return /* @__PURE__ */ jsx(Base, __spreadProps(__spreadValues({}, restOfProps), {
+  return /* @__PURE__ */ jsx("textarea", __spreadProps(__spreadValues({}, restOfProps), {
     ref,
-    rows: 4,
-    error,
-    shape,
-    size,
-    contrast,
-    brandColor
+    className: cx(useStyle({
+      resize: "vertical"
+    }), useStyle(responsiveField({
+      error,
+      shape,
+      size,
+      contrast,
+      brandColor
+    }))),
+    rows: 4
   }));
 });
-var LongTextTableField = forwardRef(function LongTextTableField2(_g2, ref) {
-  var _h = _g2, {
+var LongTextTableField = 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__ */ jsxs(Fragment, {
     children: [!hideLabel && /* @__PURE__ */ jsx(Label$1, {
@@ -469,122 +468,124 @@ function getCheckmarkColor$1({
     l
   }).alpha(a).isLight() ? "rgba(0, 0, 0, 0.7)" : "rgba(255, 255, 255, 0.95)";
 }
-const Container$2 = styled.div.withConfig({
-  shouldForwardProp: (prop) => !["size"].includes(prop)
-})`
-  position: relative;
-  ${(props) => cssMediaRules([props.size], ([size = Sizes.MEDIUM]) => css`
-        height: ${getSizeHeight(size)}px;
-        width: ${getSizeHeight(size)}px;
-      `)}
-`;
-const FakeCheckbox = styled.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([props.contrast], ([contrast = Contrasts.LIGHT]) => css`
-        border-color: ${getContrastBorderColor(contrast, props.error)};
-        background-color: ${getContrastBackgroundColor(contrast)};
-      `)}
-`;
-const HiddenCheckbox = styled.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([props.brandColor], ([{
-  swatch = {
-    hue: 0,
-    saturation: 0,
-    lightness: 0
-  },
-  alpha = 1
-} = {}]) => css`
-          background-color: ${colorToString({
-  swatch,
-  alpha
-})};
-        `)}
-    border-color: transparent;
-
-    &::after {
-      content: '';
-      position: absolute;
-      box-sizing: content-box;
-      width: 25%;
-      height: 50%;
-      ${(props) => cssMediaRules([props.size], ([size = Sizes.MEDIUM]) => css`
-            border-width: ${getSizeHeight(size) * 0.1}px;
-            border-left: 0;
-            border-top: 0;
-          `)}
-      border-style: solid;
-      ${(props) => cssMediaRules([props.brandColor], ([{
-  swatch = {
-    hue: 0,
-    saturation: 0,
-    lightness: 0
-  },
-  alpha = 1
-} = {}]) => css`
-            border-color: ${getCheckmarkColor$1({
-  swatch,
-  alpha
-})};
-          `)}
-      transform: rotate(45deg) translate3d(91%, -23%, 0);
-    }
-  }
-
-  &:not(:disabled) {
-    &:focus ~ ${FakeCheckbox} {
-      ${(props) => cssMediaRules([props.brandColor], ([brandColor = {
-  swatch: {
-    hue: 0,
-    saturation: 0,
-    lightness: 0
-  },
-  alpha: 1
-}]) => css`
-            border-color: ${colorToString(brandColor)};
-          `)}
-    }
-  }
-
-  &:not(:disabled):checked {
-    &:focus ~ ${FakeCheckbox} {
-      ${(props) => cssMediaRules([props.contrast], ([contrast = Contrasts.LIGHT]) => css`
-            border-color: ${getContrastBorderColor(contrast, props.error)};
-          `)}
-    }
-  }
-`;
-var Checkbox = forwardRef(function Checkbox2(_i, ref) {
-  var _j = _i, {
+const FAKE_CHECKBOX_CLASS_NAME = "fake-checkbox";
+function FakeCheckbox({
+  className,
+  style,
+  contrast,
+  error
+}) {
+  return /* @__PURE__ */ jsx("div", {
+    style,
+    className: cx(FAKE_CHECKBOX_CLASS_NAME, useStyle({
+      position: "absolute",
+      width: "100%",
+      height: "100%",
+      borderStyle: "solid",
+      borderRadius: 4,
+      pointerEvents: "none",
+      borderWidth: 1
+    }), useStyle(responsiveStyle([contrast], ([contrast2 = Contrasts.LIGHT]) => ({
+      borderColor: getContrastBorderColor(contrast2, error),
+      backgroundColor: getContrastBackgroundColor(contrast2)
+    }))), className)
+  });
+}
+const HiddenCheckbox = forwardRef(function HiddenCheckbox2(_k, ref) {
+  var _l = _k, {
+    size,
+    brandColor,
+    contrast,
+    error,
+    className
+  } = _l, restOfProps = __objRest(_l, [
+    "size",
+    "brandColor",
+    "contrast",
+    "error",
+    "className"
+  ]);
+  return /* @__PURE__ */ jsx("input", __spreadProps(__spreadValues({}, restOfProps), {
+    ref,
+    className: cx(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({}, responsiveStyle([brandColor], ([{
+        swatch = {
+          hue: 0,
+          saturation: 0,
+          lightness: 0
+        },
+        alpha = 1
+      } = {}]) => ({
+        backgroundColor: colorToString({
+          swatch,
+          alpha
+        })
+      }))), {
+        borderColor: "transparent",
+        "&::after": __spreadProps(__spreadValues({
+          content: '""',
+          position: "absolute",
+          boxSizing: "content-box",
+          width: "25%",
+          height: "50%",
+          borderStyle: "solid"
+        }, responsiveStyle([size, brandColor], ([size2 = 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}`]: responsiveStyle([brandColor], ([brandColor2 = {
+          swatch: {
+            hue: 0,
+            saturation: 0,
+            lightness: 0
+          },
+          alpha: 1
+        }]) => ({
+          borderColor: colorToString(brandColor2)
+        }))
+      },
+      "&:not(:disabled):checked": {
+        [`&:focus ~ .${FAKE_CHECKBOX_CLASS_NAME}`]: responsiveStyle([contrast], ([contrast2 = Contrasts.LIGHT]) => ({
+          borderColor: getContrastBorderColor(contrast2, error)
+        }))
+      }
+    }), className)
+  }));
+});
+var Checkbox = forwardRef(function Checkbox2(_m, ref) {
+  var _n = _m, {
     error,
     className,
     style,
     form
-  } = _j, restOfProps = __objRest(_j, [
+  } = _n, restOfProps = __objRest(_n, [
     "error",
     "className",
     "style",
@@ -595,8 +596,13 @@ var Checkbox = forwardRef(function Checkbox2(_i, ref) {
     contrast,
     brandColor
   } = useFormContext();
-  return /* @__PURE__ */ jsxs(Container$2, {
-    size,
+  return /* @__PURE__ */ jsxs("div", {
+    className: cx(useStyle({
+      position: "relative"
+    }), useStyle(responsiveStyle([size], ([size2 = Sizes.MEDIUM]) => ({
+      height: getSizeHeight(size2),
+      width: getSizeHeight(size2)
+    })))),
     children: [/* @__PURE__ */ jsx(HiddenCheckbox, __spreadProps(__spreadValues({}, restOfProps), {
       type: "checkbox",
       ref,
@@ -612,33 +618,25 @@ var Checkbox = forwardRef(function Checkbox2(_i, ref) {
     })]
   });
 });
-const StyledLabel$2 = styled(Label$1)`
-  display: flex;
-  align-items: center;
-  margin: 0;
-  ${(props) => cssMediaRules([props.size], ([size = Sizes.MEDIUM]) => css`
-        min-height: ${getSizeHeight$1(size)}px;
-        max-height: ${getSizeHeight$1(size)}px;
-      `)}
-`;
-const CheckboxContainer$1 = styled.span`
-  margin-right: 8px;
-`;
-var CheckboxTableField = forwardRef(function CheckboxTableField2(_k, ref) {
-  var _l = _k, {
+var CheckboxTableField = 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
@@ -646,10 +644,20 @@ var CheckboxTableField = forwardRef(function CheckboxTableField2(_k, ref) {
   function handleChange(event) {
     form.setFieldValue(name, event.currentTarget.checked);
   }
-  return /* @__PURE__ */ jsxs(StyledLabel$2, {
+  return /* @__PURE__ */ jsxs(Label$1, {
+    className: cx(useStyle({
+      display: "flex",
+      alignItems: "center",
+      margin: 0
+    }), useStyle(responsiveStyle([size], ([size2 = Sizes.MEDIUM]) => ({
+      minHeight: getSizeHeight$1(size2),
+      maxHeight: getSizeHeight$1(size2)
+    })))),
     htmlFor: id,
-    size,
-    children: [/* @__PURE__ */ jsx(CheckboxContainer$1, {
+    children: [/* @__PURE__ */ jsx("span", {
+      className: useStyle({
+        marginRight: 8
+      }),
       children: /* @__PURE__ */ jsx(Checkbox, __spreadProps(__spreadValues({}, restOfProps), {
         "aria-label": label,
         checked: value,
@@ -661,30 +669,56 @@ var CheckboxTableField = forwardRef(function CheckboxTableField2(_k, ref) {
     }), label]
   });
 });
-const MainLabel = styled(Label$1)`
-  margin: 0 0 4px 0;
-`;
-const StyledLabel$1 = styled(Label$1)`
-  display: flex;
-  align-items: center;
-  margin: 8px 0;
-
-  &:last-of-type {
-    margin-bottom: 0;
-  }
-`;
-const CheckboxContainer = styled.span`
-  margin-right: 8px;
-`;
-var MultipleSelectTableField = forwardRef(function MultipleSelectTableField2(_m, ref) {
-  var _n = _m, {
+function MainLabel(_q) {
+  var _r = _q, {
+    className
+  } = _r, restOfProps = __objRest(_r, [
+    "className"
+  ]);
+  return /* @__PURE__ */ jsx(Label$1, __spreadProps(__spreadValues({}, restOfProps), {
+    className: cx(useStyle({
+      margin: "0 0 4px 0"
+    }), className)
+  }));
+}
+function StyledLabel$1(_s) {
+  var _t = _s, {
+    className
+  } = _t, restOfProps = __objRest(_t, [
+    "className"
+  ]);
+  return /* @__PURE__ */ jsx(Label$1, __spreadProps(__spreadValues({}, restOfProps), {
+    className: cx(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__ */ jsx("span", __spreadProps(__spreadValues({}, restOfProps), {
+    className: cx(useStyle({
+      marginRight: 8
+    }), className)
+  }));
+}
+var MultipleSelectTableField = 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",
@@ -738,115 +772,130 @@ function getCheckmarkColor({
     l
   }).alpha(a).isLight() ? "rgba(0, 0, 0, 0.7)" : "rgba(255, 255, 255, 0.95)";
 }
-const Container$1 = styled.div.withConfig({
-  shouldForwardProp: (prop) => !["size"].includes(prop.toString())
-})`
-  position: relative;
-  ${(props) => cssMediaRules([props.size], ([size = Sizes.MEDIUM]) => css`
-        height: ${getSizeHeight(size)}px;
-        width: ${getSizeHeight(size)}px;
-      `)}
-`;
-const FakeRadioButton = styled.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([props.contrast], ([contrast = Contrasts.LIGHT]) => css`
-        border-color: ${getContrastBorderColor(contrast, props.error)};
-        background-color: ${getContrastBackgroundColor(contrast)};
-      `)}
-`;
-const HiddenRadioButton = styled.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([props.brandColor], ([brandColor = {
-  swatch: {
-    hue: 0,
-    saturation: 0,
-    lightness: 0
-  },
-  alpha: 1
-}]) => css`
-          background-color: ${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([props.brandColor], ([brandColor = {
-  swatch: {
-    hue: 0,
-    saturation: 0,
-    lightness: 0
-  },
-  alpha: 1
-}]) => css`
-            background-color: ${getCheckmarkColor(brandColor)};
-          `)}
-    }
-  }
-
-  &:not(:disabled) {
-    &:focus ~ ${FakeRadioButton} {
-      ${(props) => cssMediaRules([props.brandColor], ([brandColor = {
-  swatch: {
-    hue: 0,
-    saturation: 0,
-    lightness: 0
-  },
-  alpha: 1
-}]) => css`
-            border-color: ${colorToString(brandColor)};
-          `)}
-    }
-  }
-
-  &:not(:disabled):checked {
-    &:focus ~ ${FakeRadioButton} {
-      ${(props) => cssMediaRules([props.contrast], ([contrast = Contrasts.LIGHT]) => css`
-            border-color: ${getContrastBorderColor(contrast, props.error)};
-          `)}
-    }
-  }
-`;
-var RadioButton = forwardRef(function RadioButton2(_o, ref) {
-  var _p = _o, {
+function Container$1({
+  size
+}) {
+  return /* @__PURE__ */ jsx("div", {
+    className: cx(useStyle({
+      position: "relative"
+    }), useStyle(responsiveStyle([size], ([size2 = 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__ */ jsx("div", __spreadProps(__spreadValues({}, restOfProps), {
+    className: cx(FAKE_RADIO_BUTTON_CLASS_NAME, useStyle({
+      position: "absolute",
+      width: "100%",
+      height: "100%",
+      borderStyle: "solid",
+      borderRadius: "50%",
+      pointerEvents: "none",
+      borderWidth: 1
+    }), useStyle(responsiveStyle([contrast], ([contrast2 = Contrasts.LIGHT]) => ({
+      borderColor: getContrastBorderColor(contrast2, error),
+      backgroundColor: getContrastBackgroundColor(contrast2)
+    }))), className)
+  }));
+}
+const HiddenRadioButton = forwardRef(function HiddenRadioButton2(_A, ref) {
+  var _B = _A, {
+    className,
+    brandColor,
+    contrast,
+    error
+  } = _B, restOfProps = __objRest(_B, [
+    "className",
+    "brandColor",
+    "contrast",
+    "error"
+  ]);
+  return /* @__PURE__ */ jsx("input", __spreadProps(__spreadValues({}, restOfProps), {
+    type: "radio",
+    className: cx(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({}, responsiveStyle([brandColor], ([brandColor2 = {
+        swatch: {
+          hue: 0,
+          saturation: 0,
+          lightness: 0
+        },
+        alpha: 1
+      }]) => ({
+        backgroundColor: 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%)"
+        }, responsiveStyle([brandColor], ([brandColor2 = {
+          swatch: {
+            hue: 0,
+            saturation: 0,
+            lightness: 0
+          },
+          alpha: 1
+        }]) => ({
+          backgroundColor: getCheckmarkColor(brandColor2)
+        })))
+      }),
+      "&:not(:disabled)": {
+        [`&:focus ~ .${FAKE_RADIO_BUTTON_CLASS_NAME}`]: responsiveStyle([brandColor], ([brandColor2 = {
+          swatch: {
+            hue: 0,
+            saturation: 0,
+            lightness: 0
+          },
+          alpha: 1
+        }]) => ({
+          borderColor: colorToString(brandColor2)
+        }))
+      },
+      "&:not(:disabled):checked": {
+        [`&:focus ~ .${FAKE_RADIO_BUTTON_CLASS_NAME}`]: responsiveStyle([contrast], ([contrast2 = Contrasts.LIGHT]) => ({
+          borderColor: getContrastBorderColor(contrast2, error)
+        }))
+      }
+    }), className),
+    ref
+  }));
+});
+var RadioButton = forwardRef(function RadioButton2(_C, ref) {
+  var _D = _C, {
     error,
     className,
     style,
     form
-  } = _p, restOfProps = __objRest(_p, [
+  } = _D, restOfProps = __objRest(_D, [
     "error",
     "className",
     "style",
@@ -872,27 +921,44 @@ var RadioButton = forwardRef(function RadioButton2(_o, ref) {
     })]
   });
 });
-const StyledLabel = styled(Label$1)`
-  display: flex;
-  align-items: center;
-  margin: 8px 0;
-
-  &:last-of-type {
-    margin-bottom: 0;
-  }
-`;
-const RadioButtonContainer = styled.span`
-  margin-right: 8px;
-`;
-var TableColumnRadioButtonGroup = forwardRef(function TableColumnRadioButtonGroup2(_q, ref) {
-  var _r = _q, {
+function StyledLabel(_E) {
+  var _F = _E, {
+    className
+  } = _F, restOfProps = __objRest(_F, [
+    "className"
+  ]);
+  return /* @__PURE__ */ jsx(Label$1, __spreadProps(__spreadValues({}, restOfProps), {
+    className: cx(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__ */ jsx("span", __spreadProps(__spreadValues({}, restOfProps), {
+    className: cx(useStyle({
+      marginRight: 8
+    }), className)
+  }));
+}
+var TableColumnRadioButtonGroup = 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",
@@ -929,47 +995,74 @@ var TableColumnRadioButtonGroup = forwardRef(function TableColumnRadioButtonGrou
     }, option.id))]
   });
 });
-const Container = styled.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([props.size, props.contrast], ([size = Sizes.MEDIUM, contrast = Contrasts.LIGHT]) => 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.select`
-  appearance: none;
-  position: absolute;
-  top: 0;
-  left: 0;
-  opacity: 0;
-  width: 100%;
-  height: 100%;
-`;
-var TableColumnSingleSelect = 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__ */ jsx("div", __spreadProps(__spreadValues({}, restOfProps), {
+    className: cx(useStyle(responsiveField({
+      shape,
+      size,
+      contrast,
+      brandColor,
+      error
+    })), useStyle(__spreadValues({
+      display: "flex",
+      alignItems: "center",
+      position: "relative",
+      userSelect: "none",
+      borderColor: "#f19eb9",
+      "&:focus, &:focus-within": {
+        borderColor: "#e54e7f"
+      }
+    }, responsiveStyle([size, contrast], ([size2 = Sizes.MEDIUM, contrast2 = 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 = forwardRef(function Select2(_M, ref) {
+  var _N = _M, {
+    className
+  } = _N, restOfProps = __objRest(_N, [
+    "className"
+  ]);
+  return /* @__PURE__ */ jsx("select", __spreadProps(__spreadValues({}, restOfProps), {
+    ref,
+    className: cx(useStyle({
+      appearance: "none",
+      position: "absolute",
+      top: 0,
+      left: 0,
+      opacity: 0,
+      width: "100%",
+      height: "100%"
+    }), className)
+  }));
+});
+var TableColumnSingleSelect = forwardRef(function TableColumnSingleSelect2(_O, ref) {
+  var _P = _O, {
     id,
     tableColumn,
     value = "",
@@ -977,7 +1070,7 @@ var TableColumnSingleSelect = forwardRef(function TableColumnSingleSelect2(_s, r
     error = false,
     hideLabel = false,
     form
-  } = _t, restOfProps = __objRest(_t, [
+  } = _P, restOfProps = __objRest(_P, [
     "id",
     "tableColumn",
     "value",
@@ -1020,10 +1113,10 @@ var TableColumnSingleSelect = forwardRef(function TableColumnSingleSelect2(_s, r
     })]
   });
 });
-var SingleSelectTableField = forwardRef(function SingleSelectTableField2(_u, ref) {
-  var _v = _u, {
+var SingleSelectTableField = forwardRef(function SingleSelectTableField2(_Q, ref) {
+  var _R = _Q, {
     type
-  } = _v, restOfProps = __objRest(_v, [
+  } = _R, restOfProps = __objRest(_R, [
     "type"
   ]);
   return type === "select" ? /* @__PURE__ */ jsx(TableColumnSingleSelect, __spreadProps(__spreadValues({}, restOfProps), {
@@ -1032,19 +1125,21 @@ var SingleSelectTableField = forwardRef(function SingleSelectTableField2(_u, ref
     ref
   }));
 });
-var PhoneNumberTableField = forwardRef(function PhoneNumberTableField2(_w, ref) {
-  var _x = _w, {
+var PhoneNumberTableField = 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__ */ jsxs(Fragment, {
     children: [!hideLabel && /* @__PURE__ */ jsx(Label$1, {
@@ -1060,19 +1155,21 @@ var PhoneNumberTableField = forwardRef(function PhoneNumberTableField2(_w, ref)
     }))]
   });
 });
-var EmailTableField = forwardRef(function EmailTableField2(_y, ref) {
-  var _z = _y, {
+var EmailTableField = 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__ */ jsxs(Fragment, {
     children: [!hideLabel && /* @__PURE__ */ jsx(Label$1, {
@@ -1088,19 +1185,21 @@ var EmailTableField = forwardRef(function EmailTableField2(_y, ref) {
     }))]
   });
 });
-var URLTableField = forwardRef(function URLTableField2(_A, ref) {
-  var _B = _A, {
+var URLTableField = 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__ */ jsxs(Fragment, {
     children: [!hideLabel && /* @__PURE__ */ jsx(Label$1, {
@@ -1116,19 +1215,21 @@ var URLTableField = forwardRef(function URLTableField2(_A, ref) {
     }))]
   });
 });
-var NumberTableField = forwardRef(function NumberTableField2(_C, ref) {
-  var _D = _C, {
+var NumberTableField = 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__ */ jsxs(Fragment, {
     children: [!hideLabel && /* @__PURE__ */ jsx(Label$1, {
@@ -1144,36 +1245,43 @@ var NumberTableField = forwardRef(function NumberTableField2(_C, ref) {
     }))]
   });
 });
-const Label = styled.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([props.size], ([size = Sizes.MEDIUM]) => 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 Input2 = styled.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([props.shape, props.size], ([shape = Shapes.ROUNDED, size = Sizes.MEDIUM]) => css`
-        min-height: ${getSizeHeight$1(size)}px;
-        max-height: ${getSizeHeight$1(size)}px;
-        border-radius: ${getShapeBorderRadius(shape)}px;
-      `)}
-`;
+function Label({
+  size
+}) {
+  return /* @__PURE__ */ jsx("div", {
+    className: cx(useStyle({
+      display: "block",
+      maxWidth: 120,
+      minWidth: 60,
+      borderRadius: 2,
+      backgroundColor: "#5f49f4",
+      opacity: 0.4
+    }), useStyle(responsiveStyle([size], ([size2 = Sizes.MEDIUM]) => ({
+      margin: `calc(0.25 * ${getSizeHeight(size2)}px + 2px) 0`,
+      minHeight: 0.5 * getSizeHeight(size2),
+      maxHeight: 0.5 * getSizeHeight(size2)
+    }))))
+  });
+}
+function Input2({
+  shape,
+  size
+}) {
+  return /* @__PURE__ */ jsx("div", {
+    className: cx(useStyle({
+      display: "block",
+      width: "100%",
+      borderWidth: 2,
+      borderStyle: "solid",
+      borderColor: "#5f49f4",
+      opacity: 0.4
+    }), useStyle(responsiveStyle([shape, size], ([shape2 = Shapes.ROUNDED, size2 = Sizes.MEDIUM]) => ({
+      minHeight: getSizeHeight$1(size2),
+      maxHeight: getSizeHeight$1(size2),
+      borderRadius: getShapeBorderRadius(shape2)
+    }))))
+  });
+}
 function PlaceholderTableField() {
   const {
     size,
@@ -1328,13 +1436,14 @@ const spin = keyframes`
     transform: rotate(360deg);
   }
 `;
-const Icon = styled(SvgSpinner20)`
-  display: inline-flex;
-  animation: ${spin} 1s linear infinite;
-  stroke: currentColor;
-`;
 function Spinner() {
-  return /* @__PURE__ */ jsx(Icon, {});
+  return /* @__PURE__ */ jsx(SvgSpinner20, {
+    className: useStyle({
+      display: "inline-flex",
+      animation: `${spin} 1s linear infinite`,
+      stroke: "currentColor"
+    })
+  });
 }
 function useTableFormFieldRefs(propController, { fieldsCount }) {
   const [container, setContainer] = useState(null);
@@ -1378,25 +1487,52 @@ function getSizeFontSize(size) {
       throw new Error(`Invalid form size "${size}"`);
   }
 }
-const GridForm = styled.form.withConfig({
-  shouldForwardProp: (prop) => !["size", "width", "margin"].includes(prop)
-})`
-  display: flex;
-  flex-wrap: wrap;
-  width: 100%;
-  ${(props) => cssMediaRules([props.size], ([size = Sizes.MEDIUM]) => css`
-        font-size: ${getSizeFontSize(size)}px;
-      `)}
-  ${cssWidth()}
-  ${cssMargin()}
-`;
-const GridItem = styled.div.withConfig({
-  shouldForwardProp: (prop) => !["grid", "index", "rowGap", "columnGap"].includes(prop)
-})`
-  align-self: flex-end;
-  flex-direction: column;
-  ${cssGridItem()}
-`;
+const GridForm = forwardRef(function GridFrom(__, ref) {
+  var _$ = __, {
+    className,
+    size
+  } = _$, restOfProps = __objRest(_$, [
+    "className",
+    "size"
+  ]);
+  return /* @__PURE__ */ jsx("form", __spreadProps(__spreadValues({}, restOfProps), {
+    ref,
+    className: cx(useStyle({
+      display: "flex",
+      flexWrap: "wrap",
+      width: "100%"
+    }), useStyle(responsiveStyle([size], ([size2 = Sizes.MEDIUM]) => ({
+      fontSize: getSizeFontSize(size2)
+    }))), className)
+  }));
+});
+const GridItem = forwardRef(function GridItem2(_aa, ref) {
+  var _ba = _aa, {
+    className,
+    grid,
+    index,
+    rowGap,
+    columnGap
+  } = _ba, restOfProps = __objRest(_ba, [
+    "className",
+    "grid",
+    "index",
+    "rowGap",
+    "columnGap"
+  ]);
+  return /* @__PURE__ */ jsx("div", __spreadProps(__spreadValues({}, restOfProps), {
+    ref,
+    className: cx(useStyle({
+      alignSelf: "flex-end",
+      flexDirection: "column"
+    }), useStyle(responsiveGridItem({
+      grid,
+      index,
+      rowGap,
+      columnGap
+    })), className)
+  }));
+});
 function getAlignmentMargin(alignment) {
   switch (alignment) {
     case Alignments.LEFT:
@@ -1407,36 +1543,72 @@ function getAlignmentMargin(alignment) {
       return "0 auto";
   }
 }
-const StyledButton = styled((props) => /* @__PURE__ */ jsx(Button$1, __spreadProps(__spreadValues({}, props), {
-  as: "button"
-}))).withConfig({
-  shouldForwardProp: (prop) => !["alignment"].includes(prop.toString())
-})`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  ${(props) => cssMediaRules([props.size, props.alignment], ([size = Sizes.MEDIUM, alignment = Alignments.CENTER]) => 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.div`
-  padding: 8px 16px;
-  background-color: #f19eb9;
-  border-radius: 4px;
-  margin-top: 16px;
-`;
-const IconContainer = styled.div`
-  fill: currentColor;
-`;
-const ErrorMessage = styled.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__ */ jsx(Button$1, __spreadProps(__spreadValues({}, restOfProps), {
+    as: "button",
+    className: cx(useStyle({
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center"
+    }), useStyle(responsiveStyle([size, alignment], ([size2 = Sizes.MEDIUM, alignment2 = 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__ */ jsx("div", __spreadProps(__spreadValues({}, restOfProps), {
+    className: cx(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__ */ jsx("div", __spreadProps(__spreadValues({}, restOfProps), {
+    className: cx(useStyle({
+      fill: "currentColor"
+    }), className)
+  }));
+}
+function ErrorMessage(_ia) {
+  var _ja = _ia, {
+    className
+  } = _ja, restOfProps = __objRest(_ja, [
+    "className"
+  ]);
+  return /* @__PURE__ */ jsx("p", __spreadProps(__spreadValues({}, restOfProps), {
+    className: cx(useStyle({
+      fontSize: 12,
+      margin: "8px 0",
+      color: "rgba(127, 0, 0, 0.95)"
+    }), className)
+  }));
+}
 function getTableColumnDefaultValue(tableColumn) {
   switch (tableColumn.__typename) {
     case "CheckboxTableColumn":
@@ -1645,8 +1817,7 @@ const Form = forwardRef(function Form2({
             children: [/* @__PURE__ */ jsxs(GridForm, {
               ref: setRefEl,
               id,
-              width,
-              margin,
+              className: cx(width, margin),
               size,
               onSubmit: formik.handleSubmit,
               onReset: formik.handleReset,