@makeswift/runtime 0.13.1 → 0.14.0

package/dist/cjs/components/builtin/Form/components/Spinner/index.js

@@ -0,0 +1,48 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Spinner_exports = {};
+__export(Spinner_exports, {
+  default: () => Spinner
+});
+module.exports = __toCommonJS(Spinner_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_css = require("@emotion/css");
+var import_use_style = require("../../../../../runtimes/react/use-style");
+var import_Spinner20 = require("../../../../icons/Spinner20");
+const spin = import_css.keyframes`
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+`;
+function Spinner() {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_Spinner20.Spinner20,
+    {
+      className: (0, import_use_style.useStyle)({
+        display: "inline-flex",
+        animation: `${spin} 1s linear infinite`,
+        stroke: "currentColor"
+      })
+    }
+  );
+}
+//# sourceMappingURL=index.js.map

package/dist/cjs/components/builtin/Form/components/Spinner/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../src/components/builtin/Form/components/Spinner/index.tsx"],"sourcesContent":["import { keyframes } from '@emotion/css'\nimport { useStyle } from '../../../../../runtimes/react/use-style'\nimport { Spinner20 } from '../../../../icons/Spinner20'\n\nconst spin = keyframes`\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n`\n\nexport default function Spinner(): JSX.Element {\n  return (\n    <Spinner20\n      className={useStyle({\n        display: 'inline-flex',\n        animation: `${spin} 1s linear infinite`,\n        stroke: 'currentColor',\n      })}\n    />\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAeI;AAfJ,iBAA0B;AAC1B,uBAAyB;AACzB,uBAA0B;AAE1B,MAAM,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASE,SAAR,UAAwC;AAC7C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAW,2BAAS;AAAA,QAClB,SAAS;AAAA,QACT,WAAW,GAAG,IAAI;AAAA,QAClB,QAAQ;AAAA,MACV,CAAC;AAAA;AAAA,EACH;AAEJ;","names":[]}

package/dist/cjs/components/builtin/Form/context/FormContext.js

@@ -0,0 +1,63 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var FormContext_exports = {};
+__export(FormContext_exports, {
+  Alignments: () => Alignments,
+  Contrasts: () => Contrasts,
+  Provider: () => Provider,
+  Shapes: () => Shapes,
+  Sizes: () => Sizes,
+  useFormContext: () => useFormContext
+});
+module.exports = __toCommonJS(FormContext_exports);
+var import_react = require("react");
+const Alignments = {
+  LEFT: "left",
+  CENTER: "center",
+  RIGHT: "right"
+};
+const Shapes = Object.freeze({
+  SQUARE: "square",
+  ROUNDED: "rounded",
+  PILL: "pill"
+});
+const Sizes = Object.freeze({
+  SMALL: "small",
+  MEDIUM: "medium",
+  LARGE: "large"
+});
+const Contrasts = Object.freeze({
+  LIGHT: "light",
+  DARK: "dark"
+});
+const Context = (0, import_react.createContext)({});
+function useFormContext() {
+  return (0, import_react.useContext)(Context);
+}
+const { Provider } = Context;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Alignments,
+  Contrasts,
+  Provider,
+  Shapes,
+  Sizes,
+  useFormContext
+});
+//# sourceMappingURL=FormContext.js.map

package/dist/cjs/components/builtin/Form/context/FormContext.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../src/components/builtin/Form/context/FormContext.ts"],"sourcesContent":["import { createContext, useContext } from 'react'\n\nimport { ResponsiveValue, TextStyleValue } from '../../../../prop-controllers/descriptors'\nimport { ResponsiveColor } from '../../../../runtimes/react/controls'\nimport { ColorValue } from '../../../utils/types'\n\nexport const Alignments = {\n  LEFT: 'left',\n  CENTER: 'center',\n  RIGHT: 'right',\n} as const\n\nexport type Alignment = typeof Alignments[keyof typeof Alignments]\n\nexport const Shapes = Object.freeze({\n  SQUARE: 'square',\n  ROUNDED: 'rounded',\n  PILL: 'pill',\n} as const)\n\nexport type Shape = typeof Shapes[keyof typeof Shapes]\n\nexport const Sizes = Object.freeze({\n  SMALL: 'small',\n  MEDIUM: 'medium',\n  LARGE: 'large',\n} as const)\n\nexport type Size = typeof Sizes[keyof typeof Sizes]\n\nexport const Contrasts = Object.freeze({\n  LIGHT: 'light',\n  DARK: 'dark',\n} as const)\n\nexport type Contrast = typeof Contrasts[keyof typeof Contrasts]\n\nexport type Value = {\n  shape: ResponsiveValue<Shape> | null | undefined\n  size: ResponsiveValue<Size> | null | undefined\n  contrast: ResponsiveValue<Contrast> | null | undefined\n  brandColor: ResponsiveValue<ColorValue> | null | undefined\n  labelTextStyle?: TextStyleValue\n  labelTextColor?: ResponsiveColor | null\n}\n\nconst Context = createContext<Value>({} as Value)\n\nexport function useFormContext(): Value {\n  return useContext(Context)\n}\n\nconst { Provider } = Context\n\nexport { Provider }\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA0C;AAMnC,MAAM,aAAa;AAAA,EACxB,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,OAAO;AACT;AAIO,MAAM,SAAS,OAAO,OAAO;AAAA,EAClC,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,MAAM;AACR,CAAU;AAIH,MAAM,QAAQ,OAAO,OAAO;AAAA,EACjC,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AACT,CAAU;AAIH,MAAM,YAAY,OAAO,OAAO;AAAA,EACrC,OAAO;AAAA,EACP,MAAM;AACR,CAAU;AAaV,MAAM,cAAU,4BAAqB,CAAC,CAAU;AAEzC,SAAS,iBAAwB;AACtC,aAAO,yBAAW,OAAO;AAC3B;AAEA,MAAM,EAAE,SAAS,IAAI;","names":[]}

package/dist/cjs/components/builtin/Form/index.js

@@ -0,0 +1,35 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Form_exports = {};
+__export(Form_exports, {
+  default: () => import_Form.default
+});
+module.exports = __toCommonJS(Form_exports);
+var import_Form = __toESM(require("./Form"));
+//# sourceMappingURL=index.js.map

package/dist/cjs/components/builtin/Form/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/builtin/Form/index.tsx"],"sourcesContent":["export { default } from './Form'\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAAwB;","names":[]}

package/dist/cjs/components/builtin/Form/register.js

@@ -0,0 +1,181 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var register_exports = {};
+__export(register_exports, {
+  registerComponent: () => registerComponent
+});
+module.exports = __toCommonJS(register_exports);
+var import_dynamic = __toESM(require("next/dynamic"));
+var import_dynamic2 = require("../../../next/dynamic");
+var import_prop_controllers = require("../../../prop-controllers");
+var import_breakpoints = require("../../../state/modules/breakpoints");
+var import_constants = require("../constants");
+var import_FormContext = require("./context/FormContext");
+var import_components_meta = require("../../../state/modules/components-meta");
+function registerComponent(runtime) {
+  return runtime.registerComponent(
+    (0, import_dynamic2.forwardNextDynamicRef)((patch) => (0, import_dynamic.default)(() => patch(import("./Form")))),
+    {
+      type: import_constants.MakeswiftComponentType.Form,
+      label: "Form",
+      icon: import_components_meta.ComponentIcon.Form,
+      props: {
+        id: import_prop_controllers.Props.ElementID(),
+        tableId: import_prop_controllers.Props.Table(),
+        fields: import_prop_controllers.Props.TableFormFields(),
+        submitLink: import_prop_controllers.Props.Link((props) => ({
+          label: "Redirect to",
+          // TODO: This option is hardcoded. We should import it from LinkPanelOptions
+          options: [
+            { value: "OPEN_PAGE", label: "Open page" },
+            { value: "OPEN_URL", label: "Open URL" }
+          ],
+          hidden: props.tableId == null
+        })),
+        gap: import_prop_controllers.Props.GapY((props) => ({
+          preset: [
+            {
+              deviceId: (0, import_breakpoints.getBaseBreakpoint)(runtime.getBreakpoints()).id,
+              value: { value: 10, unit: "px" }
+            }
+          ],
+          label: "Gap",
+          defaultValue: { value: 0, unit: "px" },
+          hidden: props.tableId == null
+        })),
+        shape: import_prop_controllers.Props.ResponsiveIconRadioGroup((props) => ({
+          label: "Shape",
+          options: [
+            { label: "Pill", value: import_FormContext.Shapes.PILL, icon: "ButtonPill16" },
+            { label: "Rounded", value: import_FormContext.Shapes.ROUNDED, icon: "ButtonRounded16" },
+            { label: "Square", value: import_FormContext.Shapes.SQUARE, icon: "ButtonSquare16" }
+          ],
+          defaultValue: import_FormContext.Shapes.ROUNDED,
+          hidden: props.tableId == null
+        })),
+        size: import_prop_controllers.Props.ResponsiveIconRadioGroup((props) => ({
+          label: "Size",
+          options: [
+            { label: "Small", value: import_FormContext.Sizes.SMALL, icon: "SizeSmall16" },
+            { label: "Medium", value: import_FormContext.Sizes.MEDIUM, icon: "SizeMedium16" },
+            { label: "Large", value: import_FormContext.Sizes.LARGE, icon: "SizeLarge16" }
+          ],
+          defaultValue: import_FormContext.Sizes.MEDIUM,
+          hidden: props?.tableId == null
+        })),
+        contrast: import_prop_controllers.Props.ResponsiveIconRadioGroup((props) => ({
+          label: "Color",
+          options: [
+            { label: "Light mode", value: import_FormContext.Contrasts.LIGHT, icon: "Sun16" },
+            { label: "Dark mode", value: import_FormContext.Contrasts.DARK, icon: "Moon16" }
+          ],
+          defaultValue: import_FormContext.Contrasts.LIGHT,
+          hidden: props.tableId == null
+        })),
+        labelTextStyle: import_prop_controllers.Props.TextStyle({ label: "Label text style" }),
+        labelTextColor: import_prop_controllers.Props.ResponsiveColor((props, device) => {
+          const hidden = props.tableId == null;
+          const responsiveContrast = props.contrast;
+          const contrast = (0, import_breakpoints.findBreakpointOverride)(
+            runtime.getBreakpoints(),
+            responsiveContrast,
+            device
+          );
+          return {
+            hidden,
+            label: "Label text color",
+            placeholder: contrast?.value === import_FormContext.Contrasts.DARK ? "rgba(255,255,255,0.95)" : "rgba(0,0,0,0.8)"
+          };
+        }),
+        submitTextStyle: import_prop_controllers.Props.TextStyle({ label: "Button text style" }),
+        brandColor: import_prop_controllers.Props.ResponsiveColor((props) => ({
+          label: "Button color",
+          placeholder: "black",
+          hidden: props.tableId == null
+          // TODO: Add hideAlphaSlider
+        })),
+        submitTextColor: import_prop_controllers.Props.ResponsiveColor((props) => ({
+          label: "Button text color",
+          placeholder: "white",
+          hidden: props.tableId == null
+        })),
+        submitLabel: import_prop_controllers.Props.TextInput((props) => ({
+          label: "Button label",
+          placeholder: "Submit",
+          hidden: props.tableId == null
+        })),
+        submitVariant: import_prop_controllers.Props.ResponsiveSelect((props) => ({
+          label: "Button style",
+          options: [
+            { value: "flat", label: "Flat" },
+            { value: "outline", label: "Outline" },
+            { value: "shadow", label: "Floating" },
+            { value: "clear", label: "Clear" },
+            { value: "blocky", label: "Blocky" },
+            { value: "bubbly", label: "Bubbly" },
+            { value: "skewed", label: "Skewed" }
+          ],
+          defaultValue: "flat",
+          hidden: props.tableId == null
+        })),
+        submitWidth: import_prop_controllers.Props.ResponsiveLength((props) => ({
+          label: "Button width",
+          hidden: props.tableId == null
+          // TODO: Add placeholder: { value: 'auto' }
+        })),
+        submitAlignment: import_prop_controllers.Props.ResponsiveIconRadioGroup((props) => ({
+          label: "Button alignment",
+          options: [
+            { label: "Left", value: import_FormContext.Alignments.LEFT, icon: "AlignLeft16" },
+            { label: "Center", value: import_FormContext.Alignments.CENTER, icon: "AlignCenter16" },
+            { label: "Right", value: import_FormContext.Alignments.RIGHT, icon: "AlignRight16" }
+          ],
+          defaultValue: import_FormContext.Alignments.CENTER,
+          hidden: props.tableId == null
+        })),
+        width: import_prop_controllers.Props.Width({
+          preset: [
+            {
+              deviceId: (0, import_breakpoints.getBaseBreakpoint)(runtime.getBreakpoints()).id,
+              value: { value: 550, unit: "px" }
+            }
+          ],
+          defaultValue: { value: 100, unit: "%" },
+          format: import_prop_controllers.Props.Width.Format.ClassName
+        }),
+        margin: import_prop_controllers.Props.Margin({ format: import_prop_controllers.Props.Margin.Format.ClassName })
+      }
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  registerComponent
+});
+//# sourceMappingURL=register.js.map

package/dist/cjs/components/builtin/Form/register.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/builtin/Form/register.ts"],"sourcesContent":["import dynamic from 'next/dynamic'\n\nimport { forwardNextDynamicRef } from '../../../next/dynamic'\nimport { Props, ResponsiveValue } from '../../../prop-controllers'\nimport { ReactRuntime } from '../../../runtimes/react'\nimport { findBreakpointOverride, getBaseBreakpoint } from '../../../state/modules/breakpoints'\nimport { MakeswiftComponentType } from '../constants'\nimport { Alignments, Contrast, Contrasts, Shapes, Sizes } from './context/FormContext'\nimport { ComponentIcon } from '../../../state/modules/components-meta'\n\nexport function registerComponent(runtime: ReactRuntime) {\n  return runtime.registerComponent(\n    forwardNextDynamicRef(patch => dynamic(() => patch(import('./Form')))),\n    {\n      type: MakeswiftComponentType.Form,\n      label: 'Form',\n      icon: ComponentIcon.Form,\n      props: {\n        id: Props.ElementID(),\n        tableId: Props.Table(),\n        fields: Props.TableFormFields(),\n        submitLink: Props.Link(props => ({\n          label: 'Redirect to',\n          // TODO: This option is hardcoded. We should import it from LinkPanelOptions\n          options: [\n            { value: 'OPEN_PAGE', label: 'Open page' },\n            { value: 'OPEN_URL', label: 'Open URL' },\n          ],\n          hidden: props.tableId == null,\n        })),\n        gap: Props.GapY(props => ({\n          preset: [\n            {\n              deviceId: getBaseBreakpoint(runtime.getBreakpoints()).id,\n              value: { value: 10, unit: 'px' },\n            },\n          ],\n          label: 'Gap',\n          defaultValue: { value: 0, unit: 'px' },\n          hidden: props.tableId == null,\n        })),\n        shape: Props.ResponsiveIconRadioGroup(props => ({\n          label: 'Shape',\n          options: [\n            { label: 'Pill', value: Shapes.PILL, icon: 'ButtonPill16' },\n            { label: 'Rounded', value: Shapes.ROUNDED, icon: 'ButtonRounded16' },\n            { label: 'Square', value: Shapes.SQUARE, icon: 'ButtonSquare16' },\n          ],\n          defaultValue: Shapes.ROUNDED,\n          hidden: props.tableId == null,\n        })),\n        size: Props.ResponsiveIconRadioGroup(props => ({\n          label: 'Size',\n          options: [\n            { label: 'Small', value: Sizes.SMALL, icon: 'SizeSmall16' },\n            { label: 'Medium', value: Sizes.MEDIUM, icon: 'SizeMedium16' },\n            { label: 'Large', value: Sizes.LARGE, icon: 'SizeLarge16' },\n          ],\n          defaultValue: Sizes.MEDIUM,\n          hidden: props?.tableId == null,\n        })),\n        contrast: Props.ResponsiveIconRadioGroup(props => ({\n          label: 'Color',\n          options: [\n            { label: 'Light mode', value: Contrasts.LIGHT, icon: 'Sun16' },\n            { label: 'Dark mode', value: Contrasts.DARK, icon: 'Moon16' },\n          ],\n          defaultValue: Contrasts.LIGHT,\n          hidden: props.tableId == null,\n        })),\n        labelTextStyle: Props.TextStyle({ label: 'Label text style' }),\n        labelTextColor: Props.ResponsiveColor((props, device) => {\n          const hidden = props.tableId == null\n          const responsiveContrast = props.contrast as ResponsiveValue<Contrast>\n          const contrast = findBreakpointOverride<Contrast>(\n            runtime.getBreakpoints(),\n            responsiveContrast,\n            device,\n          )\n\n          return {\n            hidden,\n            label: 'Label text color',\n            placeholder:\n              contrast?.value === Contrasts.DARK ? 'rgba(255,255,255,0.95)' : 'rgba(0,0,0,0.8)',\n          }\n        }),\n        submitTextStyle: Props.TextStyle({ label: 'Button text style' }),\n        brandColor: Props.ResponsiveColor(props => ({\n          label: 'Button color',\n          placeholder: 'black',\n          hidden: props.tableId == null,\n          // TODO: Add hideAlphaSlider\n        })),\n        submitTextColor: Props.ResponsiveColor(props => ({\n          label: 'Button text color',\n          placeholder: 'white',\n          hidden: props.tableId == null,\n        })),\n        submitLabel: Props.TextInput(props => ({\n          label: 'Button label',\n          placeholder: 'Submit',\n          hidden: props.tableId == null,\n        })),\n        submitVariant: Props.ResponsiveSelect(props => ({\n          label: 'Button style',\n          options: [\n            { value: 'flat', label: 'Flat' },\n            { value: 'outline', label: 'Outline' },\n            { value: 'shadow', label: 'Floating' },\n            { value: 'clear', label: 'Clear' },\n            { value: 'blocky', label: 'Blocky' },\n            { value: 'bubbly', label: 'Bubbly' },\n            { value: 'skewed', label: 'Skewed' },\n          ],\n          defaultValue: 'flat',\n          hidden: props.tableId == null,\n        })),\n        submitWidth: Props.ResponsiveLength(props => ({\n          label: 'Button width',\n          hidden: props.tableId == null,\n          // TODO: Add placeholder: { value: 'auto' }\n        })),\n        submitAlignment: Props.ResponsiveIconRadioGroup(props => ({\n          label: 'Button alignment',\n          options: [\n            { label: 'Left', value: Alignments.LEFT, icon: 'AlignLeft16' },\n            { label: 'Center', value: Alignments.CENTER, icon: 'AlignCenter16' },\n            { label: 'Right', value: Alignments.RIGHT, icon: 'AlignRight16' },\n          ],\n          defaultValue: Alignments.CENTER,\n          hidden: props.tableId == null,\n        })),\n        width: Props.Width({\n          preset: [\n            {\n              deviceId: getBaseBreakpoint(runtime.getBreakpoints()).id,\n              value: { value: 550, unit: 'px' },\n            },\n          ],\n          defaultValue: { value: 100, unit: '%' },\n          format: Props.Width.Format.ClassName,\n        }),\n        margin: Props.Margin({ format: Props.Margin.Format.ClassName }),\n      },\n    },\n  )\n}\n"],"mappings":"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","names":["import_dynamic","dynamic"]}

package/dist/cjs/components/builtin/Form/types.js

@@ -0,0 +1,17 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var types_exports = {};
+module.exports = __toCommonJS(types_exports);
+//# sourceMappingURL=types.js.map

package/dist/cjs/components/builtin/Form/types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/builtin/Form/types.ts"],"sourcesContent":["export type SingleLineTextTableColumn = {\n  id: string\n  name: string\n  __typename: 'SingleLineTextTableColumn'\n}\n\nexport type LongTextTableColumn = {\n  id: string\n  name: string\n  __typename: 'LongTextTableColumn'\n}\n\nexport type CheckboxTableColumn = {\n  id: string\n  name: string\n  __typename: 'CheckboxTableColumn'\n}\n\nexport type MultipleSelectTableColumnOption = {\n  id: string\n  name: string\n}\n\nexport type MultipleSelectTableColumn = {\n  id: string\n  name: string\n  options: Array<MultipleSelectTableColumnOption>\n  __typename: 'MultipleSelectTableColumn'\n}\n\nexport type SingleSelectTableColumnOption = {\n  id: string\n  name: string\n}\n\nexport type SingleSelectTableColumn = {\n  id: string\n  name: string\n  options: Array<SingleSelectTableColumnOption>\n  __typename: 'SingleSelectTableColumn'\n}\n\nexport type PhoneNumberTableColumn = {\n  id: string\n  name: string\n  __typename: 'PhoneNumberTableColumn'\n}\n\nexport type EmailTableColumn = {\n  id: string\n  name: string\n  __typename: 'EmailTableColumn'\n}\n\nexport type URLTableColumn = {\n  id: string\n  name: string\n  __typename: 'URLTableColumn'\n}\n\nexport type NumberTableColumn = {\n  id: string\n  name: string\n  __typename: 'NumberTableColumn'\n}\n\nexport type TableColumn =\n  | SingleLineTextTableColumn\n  | LongTextTableColumn\n  | CheckboxTableColumn\n  | MultipleSelectTableColumn\n  | SingleSelectTableColumn\n  | PhoneNumberTableColumn\n  | EmailTableColumn\n  | URLTableColumn\n  | NumberTableColumn\n\nexport type Table = {\n  id: string\n  name: string\n  columns: Array<TableColumn>\n}\n"],"mappings":";;;;;;;;;;;;;;AAAA;AAAA;","names":[]}

package/dist/cjs/components/builtin/Image/Image.js

@@ -0,0 +1,152 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Image_exports = {};
+__export(Image_exports, {
+  default: () => Image_default
+});
+module.exports = __toCommonJS(Image_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_image = __toESM(require("next/image"));
+var import_breakpoints = require("../../../state/modules/breakpoints");
+var import_placeholders = require("../../utils/placeholders");
+var import_Link = require("../../shared/Link");
+var import_css = require("@emotion/css");
+var import_use_style = require("../../../runtimes/react/use-style");
+var import_responsive_style = require("../../utils/responsive-style");
+var import_makeswift_api = require("../../../runtimes/react/hooks/makeswift-api");
+var import_next_version = require("../../../next/next-version");
+var import_react2 = require("../../../runtimes/react");
+var import_ts_pattern = require("ts-pattern");
+const NextLegacyImage = import_image.default;
+function loadImage(src) {
+  return new Promise((resolve, reject) => {
+    const image = new Image();
+    image.onload = () => resolve(image);
+    image.onerror = reject;
+    image.src = src;
+  });
+}
+function imageSizes(breakpoints, width) {
+  const baseDevice = breakpoints.find((breakpoint) => breakpoint.maxWidth == null);
+  const baseWidth = baseDevice && width && (0, import_breakpoints.findBreakpointOverride)(breakpoints, width, baseDevice.id);
+  const baseWidthSize = baseWidth == null || baseWidth.value.unit !== "px" ? "100vw" : `${baseWidth.value.value}px`;
+  return breakpoints.map((breakpoint) => {
+    const override = (0, import_breakpoints.findBreakpointOverride)(breakpoints, width, breakpoint.id);
+    if (override == null || breakpoint.maxWidth == null || override.value.unit !== "px") {
+      return null;
+    }
+    return `(max-width: ${breakpoint.maxWidth}px) ${Math.min(
+      breakpoint.maxWidth,
+      override.value.value
+    )}px`;
+  }).filter((size) => size != null).reduce((sourceSizes, sourceSize) => `${sourceSize}, ${sourceSizes}`, baseWidthSize);
+}
+const ImageComponent = (0, import_react.forwardRef)(function Image2({
+  id,
+  width,
+  margin,
+  padding,
+  file,
+  border,
+  borderRadius,
+  altText,
+  link,
+  opacity,
+  boxShadow,
+  placeholder = import_placeholders.placeholders.image,
+  className,
+  priority
+}, ref) {
+  const fileId = (0, import_ts_pattern.match)(file).with(import_ts_pattern.P.string, (v) => v).with({ type: "makeswift-file", version: 1 }, (v) => v.id).otherwise(() => null);
+  const fileData = (0, import_makeswift_api.useFile)(fileId);
+  const imageSrc = (0, import_ts_pattern.match)([file, fileData]).with([import_ts_pattern.P.any, import_ts_pattern.P.not(import_ts_pattern.P.nullish)], ([, fileData2]) => fileData2.publicUrl).with([{ type: "external-file", version: 1 }, import_ts_pattern.P.any], ([file2]) => file2.url).otherwise(() => placeholder.src);
+  const dataDimensions = (0, import_ts_pattern.match)([file, fileData, imageSrc]).with(
+    [{ type: "external-file", version: 1, width: import_ts_pattern.P.number, height: import_ts_pattern.P.number }, import_ts_pattern.P.any, import_ts_pattern.P.any],
+    ([externalFile]) => ({ width: externalFile.width, height: externalFile.height })
+  ).with([import_ts_pattern.P.any, import_ts_pattern.P.not(import_ts_pattern.P.nullish), import_ts_pattern.P.any], ([, data]) => data.dimensions).with([import_ts_pattern.P.any, import_ts_pattern.P.any, placeholder.src], () => placeholder.dimensions).otherwise(() => null);
+  const [measuredDimensions, setMeasuredDimensions] = (0, import_react.useState)(null);
+  const breakpoints = (0, import_react2.useBreakpoints)();
+  (0, import_react.useEffect)(() => {
+    if (dataDimensions)
+      return;
+    let cleanedUp = false;
+    loadImage(imageSrc).then((image) => {
+      if (!cleanedUp) {
+        setMeasuredDimensions({ width: image.naturalWidth, height: image.naturalHeight });
+      }
+    }).catch(console.error);
+    return () => {
+      cleanedUp = true;
+    };
+  }, [dataDimensions, imageSrc]);
+  const dimensions = dataDimensions ?? measuredDimensions;
+  const Container = link ? import_Link.Link : "div";
+  const containerClassName = (0, import_css.cx)(
+    (0, import_use_style.useStyle)({ lineHeight: 0, overflow: "hidden" }),
+    (0, import_use_style.useStyle)((0, import_responsive_style.useResponsiveWidth)(width, dimensions?.width)),
+    (0, import_use_style.useStyle)((0, import_responsive_style.useResponsiveStyle)([opacity], ([opacity2 = 1]) => ({ opacity: opacity2 }))),
+    margin,
+    padding,
+    border,
+    borderRadius,
+    boxShadow,
+    className
+  );
+  if (!dimensions)
+    return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Container, { link, ref, id, className: containerClassName, children: import_next_version.major < 13 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    NextLegacyImage,
+    {
+      layout: "responsive",
+      src: imageSrc,
+      sizes: imageSizes(breakpoints, width),
+      alt: altText,
+      width: dimensions.width,
+      height: dimensions.height,
+      priority
+    }
+  ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_image.default,
+    {
+      src: imageSrc,
+      priority,
+      sizes: imageSizes(breakpoints, width),
+      alt: altText ?? "",
+      width: dimensions.width,
+      height: dimensions.height,
+      style: {
+        width: "100%",
+        height: "auto"
+      }
+    }
+  ) });
+});
+var Image_default = ImageComponent;
+//# sourceMappingURL=Image.js.map

package/dist/cjs/components/builtin/Image/Image.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/builtin/Image/Image.tsx"],"sourcesContent":["import { useState, useEffect, Ref, forwardRef } from 'react'\nimport NextImage from 'next/image'\nimport type NextLegacyImageType from 'next/legacy/image'\n\nimport {\n  ElementIDValue,\n  ImageValue,\n  LinkValue,\n  ResponsiveOpacityValue,\n  TextInputValue,\n  WidthValue,\n} from '../../../prop-controllers/descriptors'\nimport { Breakpoints, findBreakpointOverride } from '../../../state/modules/breakpoints'\nimport { placeholders } from '../../utils/placeholders'\nimport { Link } from '../../shared/Link'\nimport { cx } from '@emotion/css'\nimport { useStyle } from '../../../runtimes/react/use-style'\nimport { useResponsiveStyle, useResponsiveWidth } from '../../utils/responsive-style'\nimport { useFile } from '../../../runtimes/react/hooks/makeswift-api'\nimport { major as nextMajorVersion } from '../../../next/next-version'\nimport { useBreakpoints } from '../../../runtimes/react'\nimport { match, P } from 'ts-pattern'\n\nconst NextLegacyImage = NextImage as typeof NextLegacyImageType\n\ntype Props = {\n  id?: ElementIDValue\n  file?: ImageValue\n  altText?: TextInputValue\n  link?: LinkValue\n  width?: WidthValue\n  margin?: string\n  padding?: string\n  border?: string\n  borderRadius?: string\n  boxShadow?: string\n  opacity?: ResponsiveOpacityValue\n  placeholder?: { src: string; dimensions: { width: number; height: number } }\n  className?: string\n  priority?: boolean\n}\n\nfunction loadImage(src: string): Promise<HTMLImageElement> {\n  return new Promise<HTMLImageElement>((resolve, reject) => {\n    const image = new Image()\n\n    image.onload = () => resolve(image)\n    image.onerror = reject\n    image.src = src\n  })\n}\n\nfunction imageSizes(breakpoints: Breakpoints, width?: Props['width']): string {\n  const baseDevice = breakpoints.find(breakpoint => breakpoint.maxWidth == null)\n  const baseWidth = baseDevice && width && findBreakpointOverride(breakpoints, width, baseDevice.id)\n  const baseWidthSize =\n    baseWidth == null || baseWidth.value.unit !== 'px' ? '100vw' : `${baseWidth.value.value}px`\n\n  return breakpoints\n    .map(breakpoint => {\n      const override = findBreakpointOverride(breakpoints, width, breakpoint.id)\n\n      if (override == null || breakpoint.maxWidth == null || override.value.unit !== 'px') {\n        return null\n      }\n\n      return `(max-width: ${breakpoint.maxWidth}px) ${Math.min(\n        breakpoint.maxWidth,\n        override.value.value,\n      )}px`\n    })\n    .filter((size): size is NonNullable<typeof size> => size != null)\n    .reduce((sourceSizes, sourceSize) => `${sourceSize}, ${sourceSizes}`, baseWidthSize)\n}\n\ntype Dimensions = {\n  width: number\n  height: number\n}\n\nconst ImageComponent = forwardRef(function Image(\n  {\n    id,\n    width,\n    margin,\n    padding,\n    file,\n    border,\n    borderRadius,\n    altText,\n    link,\n    opacity,\n    boxShadow,\n    placeholder = placeholders.image,\n    className,\n    priority,\n  }: Props,\n  ref: Ref<HTMLAnchorElement & HTMLDivElement>,\n) {\n  const fileId = match(file)\n    .with(P.string, v => v)\n    .with({ type: 'makeswift-file', version: 1 }, v => v.id)\n    .otherwise(() => null)\n  const fileData = useFile(fileId)\n  const imageSrc = match([file, fileData])\n    .with([P.any, P.not(P.nullish)], ([, fileData]) => fileData.publicUrl)\n    .with([{ type: 'external-file', version: 1 }, P.any], ([file]) => file.url)\n    .otherwise(() => placeholder.src)\n  const dataDimensions = match([file, fileData, imageSrc])\n    .with(\n      [{ type: 'external-file', version: 1, width: P.number, height: P.number }, P.any, P.any],\n      ([externalFile]) => ({ width: externalFile.width, height: externalFile.height }),\n    )\n    .with([P.any, P.not(P.nullish), P.any], ([, data]) => data.dimensions)\n    .with([P.any, P.any, placeholder.src], () => placeholder.dimensions)\n    .otherwise(() => null)\n  const [measuredDimensions, setMeasuredDimensions] = useState<Dimensions | null>(null)\n  const breakpoints = useBreakpoints()\n\n  useEffect(() => {\n    if (dataDimensions) return\n\n    let cleanedUp = false\n\n    loadImage(imageSrc)\n      .then(image => {\n        if (!cleanedUp) {\n          setMeasuredDimensions({ width: image.naturalWidth, height: image.naturalHeight })\n        }\n      })\n      .catch(console.error)\n\n    return () => {\n      cleanedUp = true\n    }\n  }, [dataDimensions, imageSrc])\n\n  const dimensions = dataDimensions ?? measuredDimensions\n  const Container = link ? Link : 'div'\n  const containerClassName = cx(\n    useStyle({ lineHeight: 0, overflow: 'hidden' }),\n    useStyle(useResponsiveWidth(width, dimensions?.width)),\n    useStyle(useResponsiveStyle([opacity] as const, ([opacity = 1]) => ({ opacity }))),\n    margin,\n    padding,\n    border,\n    borderRadius,\n    boxShadow,\n    className,\n  )\n\n  if (!dimensions) return null\n\n  return (\n    <Container link={link} ref={ref} id={id} className={containerClassName}>\n      {nextMajorVersion < 13 ? (\n        <NextLegacyImage\n          layout=\"responsive\"\n          src={imageSrc}\n          sizes={imageSizes(breakpoints, width)}\n          alt={altText}\n          width={dimensions.width}\n          height={dimensions.height}\n          priority={priority}\n        />\n      ) : (\n        <NextImage\n          src={imageSrc}\n          priority={priority}\n          sizes={imageSizes(breakpoints, width)}\n          alt={altText ?? ''}\n          width={dimensions.width}\n          height={dimensions.height}\n          style={{\n            width: '100%',\n            height: 'auto',\n          }}\n        />\n      )}\n    </Container>\n  )\n})\n\nexport default ImageComponent\n"],"mappings":"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","names":["import_react","NextImage","Image","fileData","file","opacity","nextMajorVersion"]}

package/dist/cjs/components/builtin/Image/index.js

@@ -0,0 +1,35 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Image_exports = {};
+__export(Image_exports, {
+  default: () => import_Image.default
+});
+module.exports = __toCommonJS(Image_exports);
+var import_Image = __toESM(require("./Image"));
+//# sourceMappingURL=index.js.map

package/dist/cjs/components/builtin/Image/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/builtin/Image/index.tsx"],"sourcesContent":["export { default } from './Image'\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAwB;","names":[]}