@makeswift/runtime 0.8.4 → 0.8.6

package/dist/Form.es.js

@@ -33,30 +33,29 @@ import * as React from "react";
 import { forwardRef, useRef, useImperativeHandle, useState, useEffect, useMemo } from "react";
 import { Field as Field$1, getIn, Formik } from "formik";
 import { cx, keyframes } from "@emotion/css";
-import { r as responsiveStyle, i as colorToString, e as useStyle, z as responsiveTextStyle, A as responsiveGridItem, B as useTable, u as useMakeswiftClient } from "./responsive-style.es.js";
-import { S as Shapes, o as Sizes, C as Contrasts, p as useFormContext, u as useIsInBuilder, q as Provider, A as Alignments } from "./index.es.js";
+import { o as useResponsiveStyle, S as Shapes, t as Sizes, C as Contrasts, r as colorToString, v as useFormContext, n as useStyle, q as useResponsiveTextStyle, u as useIsInBuilder, w as useResponsiveGridItem, x as useTable, y as useMakeswiftClient, z as Provider, A 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 { g as getBox } from "./box-models.es.js";
-import "@emotion/serialize";
-import "@emotion/utils";
-import "use-sync-external-store/shim";
-import "redux";
-import "redux-thunk";
-import "./types.es.js";
-import "./actions.es.js";
 import "use-sync-external-store/shim/with-selector";
 import "next/dynamic";
 import "./constants.es.js";
+import "redux";
+import "redux-thunk";
+import "./actions.es.js";
 import "./descriptors.es.js";
 import "slate";
 import "slate-react";
+import "./state/breakpoints.es.js";
 import "./introspection.es.js";
-import "./isNonNullable.es.js";
+import "@emotion/serialize";
+import "@emotion/utils";
 import "./text-input.es.js";
 import "./combobox.es.js";
+import "use-sync-external-store/shim";
+import "./types.es.js";
 import "scroll-into-view-if-needed";
 import "react-dom";
 import "html-react-parser";
@@ -70,8 +69,8 @@ import "http-proxy";
 import "set-cookie-parser";
 import "uuid";
 import "corporate-ipsum";
-import "next/link";
 import "css-box-model";
+import "next/link";
 var _path;
 function _extends$1() {
   _extends$1 = Object.assign || function(target) {
@@ -195,7 +194,7 @@ function responsiveField(props) {
     borderWidth: 1,
     borderStyle: "solid",
     transition: "border-color 200ms"
-  }, responsiveStyle([props.shape, props.size, props.contrast, props.brandColor], ([
+  }, useResponsiveStyle([props.shape, props.size, props.contrast, props.brandColor], ([
     shape = Shapes.ROUNDED,
     size = Sizes.MEDIUM,
     contrast = Contrasts.LIGHT,
@@ -250,7 +249,7 @@ var Input$2 = forwardRef(function Input(_a, ref) {
       contrast,
       brandColor,
       error
-    })), useStyle(responsiveStyle([size], ([size2 = Sizes.MEDIUM]) => ({
+    })), useStyle(useResponsiveStyle([size], ([size2 = Sizes.MEDIUM]) => ({
       minHeight: getSizeHeight$1(size2),
       maxHeight: getSizeHeight$1(size2)
     }))), className)
@@ -369,7 +368,7 @@ function Label$1(_c) {
     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]) => ({
+    }), useStyle(useResponsiveTextStyle(labelTextStyle)), useStyle(useResponsiveStyle([size, contrast, labelTextColor], ([size2 = Sizes.MEDIUM, contrast2 = Contrasts.LIGHT, textColor]) => ({
       minHeight: getSizeHeight(size2),
       color: textColor == null ? getContrastColor(contrast2) : colorToString(textColor)
     }))), className)
@@ -490,7 +489,7 @@ function FakeCheckbox({
       borderRadius: 4,
       pointerEvents: "none",
       borderWidth: 1
-    }), useStyle(responsiveStyle([contrast], ([contrast2 = Contrasts.LIGHT]) => ({
+    }), useStyle(useResponsiveStyle([contrast], ([contrast2 = Contrasts.LIGHT]) => ({
       borderColor: getContrastBorderColor(contrast2, error),
       backgroundColor: getContrastBackgroundColor(contrast2)
     }))), className)
@@ -524,7 +523,7 @@ const HiddenCheckbox = forwardRef(function HiddenCheckbox2(_k, ref) {
           opacity: 0.5
         }
       },
-      [`&:checked ~ .${FAKE_CHECKBOX_CLASS_NAME}`]: __spreadProps(__spreadValues({}, responsiveStyle([brandColor], ([{
+      [`&:checked ~ .${FAKE_CHECKBOX_CLASS_NAME}`]: __spreadProps(__spreadValues({}, useResponsiveStyle([brandColor], ([{
         swatch = {
           hue: 0,
           saturation: 0,
@@ -545,7 +544,7 @@ const HiddenCheckbox = forwardRef(function HiddenCheckbox2(_k, ref) {
           width: "25%",
           height: "50%",
           borderStyle: "solid"
-        }, responsiveStyle([size, brandColor], ([size2 = Sizes.MEDIUM, {
+        }, useResponsiveStyle([size, brandColor], ([size2 = Sizes.MEDIUM, {
           swatch = {
             hue: 0,
             saturation: 0,
@@ -565,7 +564,7 @@ const HiddenCheckbox = forwardRef(function HiddenCheckbox2(_k, ref) {
         })
       }),
       "&:not(:disabled)": {
-        [`&:focus ~ .${FAKE_CHECKBOX_CLASS_NAME}`]: responsiveStyle([brandColor], ([brandColor2 = {
+        [`&:focus ~ .${FAKE_CHECKBOX_CLASS_NAME}`]: useResponsiveStyle([brandColor], ([brandColor2 = {
           swatch: {
             hue: 0,
             saturation: 0,
@@ -577,7 +576,7 @@ const HiddenCheckbox = forwardRef(function HiddenCheckbox2(_k, ref) {
         }))
       },
       "&:not(:disabled):checked": {
-        [`&:focus ~ .${FAKE_CHECKBOX_CLASS_NAME}`]: responsiveStyle([contrast], ([contrast2 = Contrasts.LIGHT]) => ({
+        [`&:focus ~ .${FAKE_CHECKBOX_CLASS_NAME}`]: useResponsiveStyle([contrast], ([contrast2 = Contrasts.LIGHT]) => ({
           borderColor: getContrastBorderColor(contrast2, error)
         }))
       }
@@ -604,7 +603,7 @@ var Checkbox = forwardRef(function Checkbox2(_m, ref) {
   return /* @__PURE__ */ jsxs("div", {
     className: cx(useStyle({
       position: "relative"
-    }), useStyle(responsiveStyle([size], ([size2 = Sizes.MEDIUM]) => ({
+    }), useStyle(useResponsiveStyle([size], ([size2 = Sizes.MEDIUM]) => ({
       height: getSizeHeight(size2),
       width: getSizeHeight(size2)
     })))),
@@ -654,7 +653,7 @@ var CheckboxTableField = forwardRef(function CheckboxTableField2(_o, ref) {
       display: "flex",
       alignItems: "center",
       margin: 0
-    }), useStyle(responsiveStyle([size], ([size2 = Sizes.MEDIUM]) => ({
+    }), useStyle(useResponsiveStyle([size], ([size2 = Sizes.MEDIUM]) => ({
       minHeight: getSizeHeight$1(size2),
       maxHeight: getSizeHeight$1(size2)
     })))),
@@ -788,7 +787,7 @@ function Container$1(_y) {
   return /* @__PURE__ */ jsx("div", __spreadProps(__spreadValues({}, restOfProps), {
     className: cx(useStyle({
       position: "relative"
-    }), useStyle(responsiveStyle([size], ([size2 = Sizes.MEDIUM]) => ({
+    }), useStyle(useResponsiveStyle([size], ([size2 = Sizes.MEDIUM]) => ({
       height: getSizeHeight(size2),
       width: getSizeHeight(size2)
     }))), className)
@@ -814,7 +813,7 @@ function FakeRadioButton(_A) {
       borderRadius: "50%",
       pointerEvents: "none",
       borderWidth: 1
-    }), useStyle(responsiveStyle([contrast], ([contrast2 = Contrasts.LIGHT]) => ({
+    }), useStyle(useResponsiveStyle([contrast], ([contrast2 = Contrasts.LIGHT]) => ({
       borderColor: getContrastBorderColor(contrast2, error),
       backgroundColor: getContrastBackgroundColor(contrast2)
     }))), className)
@@ -846,7 +845,7 @@ const HiddenRadioButton = forwardRef(function HiddenRadioButton2(_C, ref) {
           opacity: 0.5
         }
       },
-      [`&:checked ~ .${FAKE_RADIO_BUTTON_CLASS_NAME}`]: __spreadProps(__spreadValues({}, responsiveStyle([brandColor], ([brandColor2 = {
+      [`&:checked ~ .${FAKE_RADIO_BUTTON_CLASS_NAME}`]: __spreadProps(__spreadValues({}, useResponsiveStyle([brandColor], ([brandColor2 = {
         swatch: {
           hue: 0,
           saturation: 0,
@@ -867,7 +866,7 @@ const HiddenRadioButton = forwardRef(function HiddenRadioButton2(_C, ref) {
           height: "50%",
           borderRadius: "50%",
           transform: "translate(-50%, -50%)"
-        }, responsiveStyle([brandColor], ([brandColor2 = {
+        }, useResponsiveStyle([brandColor], ([brandColor2 = {
           swatch: {
             hue: 0,
             saturation: 0,
@@ -879,7 +878,7 @@ const HiddenRadioButton = forwardRef(function HiddenRadioButton2(_C, ref) {
         })))
       }),
       "&:not(:disabled)": {
-        [`&:focus ~ .${FAKE_RADIO_BUTTON_CLASS_NAME}`]: responsiveStyle([brandColor], ([brandColor2 = {
+        [`&:focus ~ .${FAKE_RADIO_BUTTON_CLASS_NAME}`]: useResponsiveStyle([brandColor], ([brandColor2 = {
           swatch: {
             hue: 0,
             saturation: 0,
@@ -891,7 +890,7 @@ const HiddenRadioButton = forwardRef(function HiddenRadioButton2(_C, ref) {
         }))
       },
       "&:not(:disabled):checked": {
-        [`&:focus ~ .${FAKE_RADIO_BUTTON_CLASS_NAME}`]: responsiveStyle([contrast], ([contrast2 = Contrasts.LIGHT]) => ({
+        [`&:focus ~ .${FAKE_RADIO_BUTTON_CLASS_NAME}`]: useResponsiveStyle([contrast], ([contrast2 = Contrasts.LIGHT]) => ({
           borderColor: getContrastBorderColor(contrast2, error)
         }))
       }
@@ -1037,7 +1036,7 @@ function Container(_M) {
       "&:focus, &:focus-within": {
         borderColor: "#e54e7f"
       }
-    }, responsiveStyle([size, contrast], ([size2 = Sizes.MEDIUM, contrast2 = Contrasts.LIGHT]) => ({
+    }, useResponsiveStyle([size, contrast], ([size2 = Sizes.MEDIUM, contrast2 = Contrasts.LIGHT]) => ({
       minHeight: getSizeHeight$2(size2),
       maxHeight: getSizeHeight$2(size2),
       "&::after": {
@@ -1266,7 +1265,7 @@ function Label({
       borderRadius: 2,
       backgroundColor: "#5f49f4",
       opacity: 0.4
-    }), useStyle(responsiveStyle([size], ([size2 = Sizes.MEDIUM]) => ({
+    }), useStyle(useResponsiveStyle([size], ([size2 = Sizes.MEDIUM]) => ({
       margin: `calc(0.25 * ${getSizeHeight(size2)}px + 2px) 0`,
       minHeight: 0.5 * getSizeHeight(size2),
       maxHeight: 0.5 * getSizeHeight(size2)
@@ -1285,7 +1284,7 @@ function Input2({
       borderStyle: "solid",
       borderColor: "#5f49f4",
       opacity: 0.4
-    }), useStyle(responsiveStyle([shape, size], ([shape2 = Shapes.ROUNDED, size2 = Sizes.MEDIUM]) => ({
+    }), useStyle(useResponsiveStyle([shape, size], ([shape2 = Shapes.ROUNDED, size2 = Sizes.MEDIUM]) => ({
       minHeight: getSizeHeight$1(size2),
       maxHeight: getSizeHeight$1(size2),
       borderRadius: getShapeBorderRadius(shape2)
@@ -1511,7 +1510,7 @@ const GridForm = forwardRef(function GridFrom(_aa, ref) {
       display: "flex",
       flexWrap: "wrap",
       width: "100%"
-    }), useStyle(responsiveStyle([size], ([size2 = Sizes.MEDIUM]) => ({
+    }), useStyle(useResponsiveStyle([size], ([size2 = Sizes.MEDIUM]) => ({
       fontSize: getSizeFontSize(size2)
     }))), className)
   }));
@@ -1535,7 +1534,7 @@ const GridItem = forwardRef(function GridItem2(_ca, ref) {
     className: cx(useStyle({
       alignSelf: "flex-end",
       flexDirection: "column"
-    }), useStyle(responsiveGridItem({
+    }), useStyle(useResponsiveGridItem({
       grid,
       index,
       rowGap,
@@ -1569,7 +1568,7 @@ function StyledButton(_ea) {
       display: "flex",
       alignItems: "center",
       justifyContent: "center"
-    }), useStyle(responsiveStyle([size, alignment], ([size2 = Sizes.MEDIUM, alignment2 = Alignments.CENTER]) => ({
+    }), useStyle(useResponsiveStyle([size, alignment], ([size2 = Sizes.MEDIUM, alignment2 = Alignments.CENTER]) => ({
       minHeight: getSizeHeight$1(size2),
       maxHeight: getSizeHeight$1(size2),
       margin: getAlignmentMargin(alignment2),