@makeswift/runtime 0.2.2 → 0.2.4

package/dist/Form.cjs.js

@@ -35,11 +35,11 @@ var React = require("react");
 var styled = require("styled-components");
 var formik = require("formik");
 var cssMediaRules = require("./cssMediaRules.cjs.js");
-var index = require("./index.cjs.js");
+var next = require("./index.cjs.js");
 var jsxRuntime = require("react/jsx-runtime");
 var ColorHelper = require("color");
 var Button$1 = require("./Button.cjs.js");
-var index$1 = require("./index.cjs3.js");
+var index = require("./index.cjs3.js");
 var boxModels = require("./box-models.cjs.js");
 var client = require("@apollo/client");
 require("use-sync-external-store/shim/with-selector");
@@ -126,11 +126,11 @@ var SvgCheck12 = function SvgCheck122(props) {
 };
 function getSizeHeight$2(size) {
   switch (size) {
-    case index.Sizes.SMALL:
+    case next.Sizes.SMALL:
       return 30;
-    case index.Sizes.MEDIUM:
+    case next.Sizes.MEDIUM:
       return 38;
-    case index.Sizes.LARGE:
+    case next.Sizes.LARGE:
       return 48;
     default:
       throw new Error(`Invalid form size "${size}"`);
@@ -138,11 +138,11 @@ function getSizeHeight$2(size) {
 }
 function getSizeHorizontalPadding(size) {
   switch (size) {
-    case index.Sizes.SMALL:
+    case next.Sizes.SMALL:
       return 8;
-    case index.Sizes.MEDIUM:
+    case next.Sizes.MEDIUM:
       return 12;
-    case index.Sizes.LARGE:
+    case next.Sizes.LARGE:
       return 16;
     default:
       throw new Error(`Invalid form size "${size}"`);
@@ -150,11 +150,11 @@ function getSizeHorizontalPadding(size) {
 }
 function getSizeVerticalPadding(size) {
   switch (size) {
-    case index.Sizes.SMALL:
+    case next.Sizes.SMALL:
       return 3;
-    case index.Sizes.MEDIUM:
+    case next.Sizes.MEDIUM:
       return 7;
-    case index.Sizes.LARGE:
+    case next.Sizes.LARGE:
       return 11;
     default:
       throw new Error(`Invalid form size "${size}"`);
@@ -162,11 +162,11 @@ function getSizeVerticalPadding(size) {
 }
 function getShapeBorderRadius(shape) {
   switch (shape) {
-    case index.Shapes.SQUARE:
+    case next.Shapes.SQUARE:
       return 0;
-    case index.Shapes.ROUNDED:
+    case next.Shapes.ROUNDED:
       return 4;
-    case index.Shapes.PILL:
+    case next.Shapes.PILL:
       return 500;
     default:
       throw new Error(`Invalid form shape "${shape}"`);
@@ -174,9 +174,9 @@ function getShapeBorderRadius(shape) {
 }
 function getContrastBorderColor(contrast, error) {
   switch (contrast) {
-    case index.Contrasts.LIGHT:
+    case next.Contrasts.LIGHT:
       return error ? "rgba(255, 0, 0, 0.7)" : "rgba(0, 0, 0, 0.25)";
-    case index.Contrasts.DARK:
+    case next.Contrasts.DARK:
       return error ? "rgba(255, 0, 0, 0.7)" : "rgba(255, 255, 255, 0.6)";
     default:
       throw new Error(`Invalid form contrast "${contrast}"`);
@@ -184,9 +184,9 @@ function getContrastBorderColor(contrast, error) {
 }
 function getContrastBackgroundColor(contrast) {
   switch (contrast) {
-    case index.Contrasts.LIGHT:
+    case next.Contrasts.LIGHT:
       return "white";
-    case index.Contrasts.DARK:
+    case next.Contrasts.DARK:
       return "rgba(0, 0, 0, 0.7)";
     default:
       throw new Error(`Invalid form contrast "${contrast}"`);
@@ -194,9 +194,9 @@ function getContrastBackgroundColor(contrast) {
 }
 function getContrastColor$1(contrast) {
   switch (contrast) {
-    case index.Contrasts.LIGHT:
+    case next.Contrasts.LIGHT:
       return "rgba(0, 0, 0, 0.95)";
-    case index.Contrasts.DARK:
+    case next.Contrasts.DARK:
       return "white";
     default:
       throw new Error(`Invalid form contrast "${contrast}"`);
@@ -204,9 +204,9 @@ function getContrastColor$1(contrast) {
 }
 function getContrastPlaceholderColor(contrast) {
   switch (contrast) {
-    case index.Contrasts.LIGHT:
+    case next.Contrasts.LIGHT:
       return "rgba(0, 0, 0, 0.3)";
-    case index.Contrasts.DARK:
+    case next.Contrasts.DARK:
       return "rgba(255,255,255,0.3)";
     default:
       throw new Error(`Invalid form contrast "${contrast}"`);
@@ -221,9 +221,9 @@ function cssField() {
     border-style: solid;
     transition: border-color 200ms;
     ${(props) => cssMediaRules.cssMediaRules([props.shape, props.size, props.contrast, props.brandColor], ([
-    shape = index.Shapes.ROUNDED,
-    size = index.Sizes.MEDIUM,
-    contrast = index.Contrasts.LIGHT,
+    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;
@@ -234,7 +234,7 @@ function cssField() {
 
           :focus,
           :focus-within {
-            border-color: ${index.colorToString(brandColor)};
+            border-color: ${next.colorToString(brandColor)};
           }
 
           ::placeholder {
@@ -245,11 +245,11 @@ function cssField() {
 }
 function getSizeHeight$1(size) {
   switch (size) {
-    case index.Sizes.SMALL:
+    case next.Sizes.SMALL:
       return 36;
-    case index.Sizes.MEDIUM:
+    case next.Sizes.MEDIUM:
       return 42;
-    case index.Sizes.LARGE:
+    case next.Sizes.LARGE:
       return 48;
     default:
       throw new Error(`Invalid form size "${size}"`);
@@ -259,7 +259,7 @@ 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 = index.Sizes.MEDIUM]) => styled.css`
+  ${(props) => cssMediaRules.cssMediaRules([props.size], ([size = next.Sizes.MEDIUM]) => styled.css`
         min-height: ${getSizeHeight$1(size)}px;
         max-height: ${getSizeHeight$1(size)}px;
       `)}
@@ -277,7 +277,7 @@ var Input$2 = React.forwardRef(function Input2(_a, ref) {
     size,
     contrast,
     brandColor
-  } = index.useFormContext();
+  } = next.useFormContext();
   return /* @__PURE__ */ jsxRuntime.jsx(Base$2, __spreadProps(__spreadValues({}, restOfProps), {
     ref,
     error,
@@ -356,11 +356,11 @@ var Placeholder = React.forwardRef(function Placeholder2({
 });
 function getSizeHeight(size) {
   switch (size) {
-    case index.Sizes.SMALL:
+    case next.Sizes.SMALL:
       return 14;
-    case index.Sizes.MEDIUM:
+    case next.Sizes.MEDIUM:
       return 18;
-    case index.Sizes.LARGE:
+    case next.Sizes.LARGE:
       return 22;
     default:
       throw new Error(`Invalid form size "${size}"`);
@@ -368,9 +368,9 @@ function getSizeHeight(size) {
 }
 function getContrastColor(contrast) {
   switch (contrast) {
-    case index.Contrasts.LIGHT:
+    case next.Contrasts.LIGHT:
       return "rgba(0, 0, 0, 0.8)";
-    case index.Contrasts.DARK:
+    case next.Contrasts.DARK:
       return "rgba(255, 255, 255, 0.95)";
     default:
       throw new Error(`Invalid form contrast "${contrast}"`);
@@ -382,9 +382,9 @@ const Base$1 = styled__default["default"].label.withConfig({
   display: block;
   margin: 0 0 0.25em 0;
   ${cssMediaRules.cssTextStyle()}
-  ${(props) => cssMediaRules.cssMediaRules([props.size, props.contrast, props.textColor], ([size = index.Sizes.MEDIUM, contrast = index.Contrasts.LIGHT, textColor]) => styled.css`
+  ${(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) : index.colorToString(textColor)};
+        color: ${textColor == null ? getContrastColor(contrast) : next.colorToString(textColor)};
       `)}
 `;
 function Label$1(props) {
@@ -393,7 +393,7 @@ function Label$1(props) {
     size,
     labelTextStyle,
     labelTextColor
-  } = index.useFormContext();
+  } = next.useFormContext();
   return /* @__PURE__ */ jsxRuntime.jsx(Base$1, __spreadProps(__spreadValues({}, props), {
     contrast,
     size,
@@ -448,7 +448,7 @@ var TextArea = React.forwardRef(function TextArea2(_e, ref) {
     size,
     contrast,
     brandColor
-  } = index.useFormContext();
+  } = next.useFormContext();
   return /* @__PURE__ */ jsxRuntime.jsx(Base, __spreadProps(__spreadValues({}, restOfProps), {
     ref,
     rows: 4,
@@ -501,7 +501,7 @@ const Container$2 = styled__default["default"].div.withConfig({
   shouldForwardProp: (prop) => !["size"].includes(prop)
 })`
   position: relative;
-  ${(props) => cssMediaRules.cssMediaRules([props.size], ([size = index.Sizes.MEDIUM]) => styled.css`
+  ${(props) => cssMediaRules.cssMediaRules([props.size], ([size = next.Sizes.MEDIUM]) => styled.css`
         height: ${getSizeHeight(size)}px;
         width: ${getSizeHeight(size)}px;
       `)}
@@ -516,7 +516,7 @@ const FakeCheckbox = styled__default["default"].div.withConfig({
   border-radius: 4px;
   pointer-events: none;
   border-width: 1px;
-  ${(props) => cssMediaRules.cssMediaRules([props.contrast], ([contrast = index.Contrasts.LIGHT]) => styled.css`
+  ${(props) => cssMediaRules.cssMediaRules([props.contrast], ([contrast = next.Contrasts.LIGHT]) => styled.css`
         border-color: ${getContrastBorderColor(contrast, props.error)};
         background-color: ${getContrastBackgroundColor(contrast)};
       `)}
@@ -547,7 +547,7 @@ const HiddenCheckbox = styled__default["default"].input.withConfig({
   },
   alpha = 1
 } = {}]) => styled.css`
-          background-color: ${index.colorToString({
+          background-color: ${next.colorToString({
   swatch,
   alpha
 })};
@@ -560,7 +560,7 @@ const HiddenCheckbox = styled__default["default"].input.withConfig({
       box-sizing: content-box;
       width: 25%;
       height: 50%;
-      ${(props) => cssMediaRules.cssMediaRules([props.size], ([size = index.Sizes.MEDIUM]) => styled.css`
+      ${(props) => cssMediaRules.cssMediaRules([props.size], ([size = next.Sizes.MEDIUM]) => styled.css`
             border-width: ${getSizeHeight(size) * 0.1}px;
             border-left: 0;
             border-top: 0;
@@ -593,14 +593,14 @@ const HiddenCheckbox = styled__default["default"].input.withConfig({
   },
   alpha: 1
 }]) => styled.css`
-            border-color: ${index.colorToString(brandColor)};
+            border-color: ${next.colorToString(brandColor)};
           `)}
     }
   }
 
   &:not(:disabled):checked {
     &:focus ~ ${FakeCheckbox} {
-      ${(props) => cssMediaRules.cssMediaRules([props.contrast], ([contrast = index.Contrasts.LIGHT]) => styled.css`
+      ${(props) => cssMediaRules.cssMediaRules([props.contrast], ([contrast = next.Contrasts.LIGHT]) => styled.css`
             border-color: ${getContrastBorderColor(contrast, props.error)};
           `)}
     }
@@ -622,7 +622,7 @@ var Checkbox = React.forwardRef(function Checkbox2(_i, ref) {
     size,
     contrast,
     brandColor
-  } = index.useFormContext();
+  } = next.useFormContext();
   return /* @__PURE__ */ jsxRuntime.jsxs(Container$2, {
     size,
     children: [/* @__PURE__ */ jsxRuntime.jsx(HiddenCheckbox, __spreadProps(__spreadValues({}, restOfProps), {
@@ -644,7 +644,7 @@ const StyledLabel$2 = styled__default["default"](Label$1)`
   display: flex;
   align-items: center;
   margin: 0;
-  ${(props) => cssMediaRules.cssMediaRules([props.size], ([size = index.Sizes.MEDIUM]) => styled.css`
+  ${(props) => cssMediaRules.cssMediaRules([props.size], ([size = next.Sizes.MEDIUM]) => styled.css`
         min-height: ${getSizeHeight$1(size)}px;
         max-height: ${getSizeHeight$1(size)}px;
       `)}
@@ -670,7 +670,7 @@ var CheckboxTableField = React.forwardRef(function CheckboxTableField2(_k, ref)
   ]);
   const {
     size
-  } = index.useFormContext();
+  } = next.useFormContext();
   function handleChange(event) {
     form.setFieldValue(name, event.currentTarget.checked);
   }
@@ -770,7 +770,7 @@ const Container$1 = styled__default["default"].div.withConfig({
   shouldForwardProp: (prop) => !["size"].includes(prop.toString())
 })`
   position: relative;
-  ${(props) => cssMediaRules.cssMediaRules([props.size], ([size = index.Sizes.MEDIUM]) => styled.css`
+  ${(props) => cssMediaRules.cssMediaRules([props.size], ([size = next.Sizes.MEDIUM]) => styled.css`
         height: ${getSizeHeight(size)}px;
         width: ${getSizeHeight(size)}px;
       `)}
@@ -785,7 +785,7 @@ const FakeRadioButton = styled__default["default"].div.withConfig({
   border-radius: 50%;
   pointer-events: none;
   border-width: 1px;
-  ${(props) => cssMediaRules.cssMediaRules([props.contrast], ([contrast = index.Contrasts.LIGHT]) => styled.css`
+  ${(props) => cssMediaRules.cssMediaRules([props.contrast], ([contrast = next.Contrasts.LIGHT]) => styled.css`
         border-color: ${getContrastBorderColor(contrast, props.error)};
         background-color: ${getContrastBackgroundColor(contrast)};
       `)}
@@ -818,7 +818,7 @@ const HiddenRadioButton = styled__default["default"].input.withConfig({
   },
   alpha: 1
 }]) => styled.css`
-          background-color: ${index.colorToString(brandColor)};
+          background-color: ${next.colorToString(brandColor)};
         `)}
     border-color: transparent;
 
@@ -855,14 +855,14 @@ const HiddenRadioButton = styled__default["default"].input.withConfig({
   },
   alpha: 1
 }]) => styled.css`
-            border-color: ${index.colorToString(brandColor)};
+            border-color: ${next.colorToString(brandColor)};
           `)}
     }
   }
 
   &:not(:disabled):checked {
     &:focus ~ ${FakeRadioButton} {
-      ${(props) => cssMediaRules.cssMediaRules([props.contrast], ([contrast = index.Contrasts.LIGHT]) => styled.css`
+      ${(props) => cssMediaRules.cssMediaRules([props.contrast], ([contrast = next.Contrasts.LIGHT]) => styled.css`
             border-color: ${getContrastBorderColor(contrast, props.error)};
           `)}
     }
@@ -884,7 +884,7 @@ var RadioButton = React.forwardRef(function RadioButton2(_o, ref) {
     size,
     contrast,
     brandColor
-  } = index.useFormContext();
+  } = next.useFormContext();
   return /* @__PURE__ */ jsxRuntime.jsxs(Container$1, {
     size,
     children: [/* @__PURE__ */ jsxRuntime.jsx(HiddenRadioButton, __spreadProps(__spreadValues({}, restOfProps), {
@@ -972,7 +972,7 @@ const Container = styled__default["default"].div.withConfig({
     border-color: #e54e7f;
   }
 
-  ${(props) => cssMediaRules.cssMediaRules([props.size, props.contrast], ([size = index.Sizes.MEDIUM, contrast = index.Contrasts.LIGHT]) => styled.css`
+  ${(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;
 
@@ -1019,7 +1019,7 @@ var TableColumnSingleSelect = React.forwardRef(function TableColumnSingleSelect2
     size,
     contrast,
     brandColor
-  } = index.useFormContext();
+  } = next.useFormContext();
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [!hideLabel && /* @__PURE__ */ jsxRuntime.jsx(Label$1, {
       htmlFor: id,
@@ -1181,7 +1181,7 @@ const Label = styled__default["default"].div.withConfig({
   border-radius: 2px;
   background-color: #5f49f4;
   opacity: 0.4;
-  ${(props) => cssMediaRules.cssMediaRules([props.size], ([size = index.Sizes.MEDIUM]) => styled.css`
+  ${(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;
@@ -1196,7 +1196,7 @@ const Input = styled__default["default"].div.withConfig({
   border-style: solid;
   border-color: #5f49f4;
   opacity: 0.4;
-  ${(props) => cssMediaRules.cssMediaRules([props.shape, props.size], ([shape = index.Shapes.ROUNDED, size = index.Sizes.MEDIUM]) => styled.css`
+  ${(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;
@@ -1206,7 +1206,7 @@ function PlaceholderTableField() {
   const {
     size,
     shape
-  } = index.useFormContext();
+  } = next.useFormContext();
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [/* @__PURE__ */ jsxRuntime.jsx(Label, {
       size
@@ -1363,7 +1363,7 @@ function Spinner() {
 function useTableFormFieldRefs(propController, { fieldsCount }) {
   const [container, setContainer] = React.useState(null);
   const [items, setItems] = React.useState(Array(fieldsCount + 1).fill(null));
-  const isInBuilder = index.useIsInBuilder();
+  const isInBuilder = next.useIsInBuilder();
   React.useEffect(() => {
     if (!isInBuilder)
       return;
@@ -1392,11 +1392,11 @@ function useTableFormFieldRefs(propController, { fieldsCount }) {
 const LOCAL_STORAGE_NAMESPACE = "@@makeswift/components/form";
 function getSizeFontSize(size) {
   switch (size) {
-    case index.Sizes.SMALL:
+    case next.Sizes.SMALL:
       return 12;
-    case index.Sizes.MEDIUM:
+    case next.Sizes.MEDIUM:
       return 14;
-    case index.Sizes.LARGE:
+    case next.Sizes.LARGE:
       return 18;
     default:
       throw new Error(`Invalid form size "${size}"`);
@@ -1408,7 +1408,7 @@ const GridForm = styled__default["default"].form.withConfig({
   display: flex;
   flex-wrap: wrap;
   width: 100%;
-  ${(props) => cssMediaRules.cssMediaRules([props.size], ([size = index.Sizes.MEDIUM]) => styled.css`
+  ${(props) => cssMediaRules.cssMediaRules([props.size], ([size = next.Sizes.MEDIUM]) => styled.css`
         font-size: ${getSizeFontSize(size)}px;
       `)}
   ${cssMediaRules.cssWidth()}
@@ -1423,9 +1423,9 @@ const GridItem = styled__default["default"].div.withConfig({
 `;
 function getAlignmentMargin(alignment) {
   switch (alignment) {
-    case index.Alignments.LEFT:
+    case next.Alignments.LEFT:
       return "0 auto 0 0";
-    case index.Alignments.RIGHT:
+    case next.Alignments.RIGHT:
       return "0 0 0 auto";
     default:
       return "0 auto";
@@ -1439,7 +1439,7 @@ const StyledButton = styled__default["default"]((props) => /* @__PURE__ */ jsxRu
   display: flex;
   align-items: center;
   justify-content: center;
-  ${(props) => cssMediaRules.cssMediaRules([props.size, props.alignment], ([size = index.Sizes.MEDIUM, alignment = index.Alignments.CENTER]) => styled.css`
+  ${(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)};
@@ -1520,13 +1520,13 @@ const Form = React.forwardRef(function Form2({
     data: {
       table
     } = {}
-  } = index.useQuery(index.TABLE_BY_ID, {
+  } = next.useQuery(next.TABLE_BY_ID, {
     skip: tableId == null,
     variables: {
       id: tableId
     }
   });
-  const [createTableRecord] = index.useMutation(CREATE_TABLE_RECORD);
+  const [createTableRecord] = next.useMutation(CREATE_TABLE_RECORD);
   const [refEl, setRefEl] = React.useState(null);
   const [propControllers, setPropControllers] = React.useState(null);
   const [initialValues, setInitialValues] = React.useState(() => fields.reduce((acc, formField) => {
@@ -1638,7 +1638,7 @@ const Form = React.forwardRef(function Form2({
       return acc;
     }, __spreadValues({}, prev)));
   }, [fields, table]);
-  return /* @__PURE__ */ jsxRuntime.jsx(index.Provider, {
+  return /* @__PURE__ */ jsxRuntime.jsx(next.Provider, {
     value: {
       shape,
       size,
@@ -1716,7 +1716,7 @@ const Form = React.forwardRef(function Form2({
                   })]
                 })]
               })]
-            }), submitLink != null && /* @__PURE__ */ jsxRuntime.jsx(index$1.Link, {
+            }), submitLink != null && /* @__PURE__ */ jsxRuntime.jsx(index.Link, {
               ref: linkRef,
               hidden: true,
               link: submitLink