@makeswift/runtime 0.0.0-e0c0445 → 0.0.0-e5fb3bd

package/dist/esm/components/builtin/Form/components/Field/services/responsiveField.js

@@ -0,0 +1,136 @@
+import { colorToString } from "../../../../../utils/colorToString";
+import {
+  Shapes,
+  Sizes,
+  Contrasts
+} from "../../../context/FormContext";
+import { useResponsiveStyle } from "../../../../../utils/responsive-style";
+function getSizeHeight(size) {
+  switch (size) {
+    case Sizes.SMALL:
+      return 30;
+    case Sizes.MEDIUM:
+      return 38;
+    case Sizes.LARGE:
+      return 48;
+    default:
+      throw new Error(`Invalid form size "${size}"`);
+  }
+}
+function getSizeHorizontalPadding(size) {
+  switch (size) {
+    case Sizes.SMALL:
+      return 8;
+    case Sizes.MEDIUM:
+      return 12;
+    case Sizes.LARGE:
+      return 16;
+    default:
+      throw new Error(`Invalid form size "${size}"`);
+  }
+}
+function getSizeVerticalPadding(size) {
+  switch (size) {
+    case Sizes.SMALL:
+      return 3;
+    case Sizes.MEDIUM:
+      return 7;
+    case Sizes.LARGE:
+      return 11;
+    default:
+      throw new Error(`Invalid form size "${size}"`);
+  }
+}
+function getShapeBorderRadius(shape) {
+  switch (shape) {
+    case Shapes.SQUARE:
+      return 0;
+    case Shapes.ROUNDED:
+      return 4;
+    case Shapes.PILL:
+      return 500;
+    default:
+      throw new Error(`Invalid form shape "${shape}"`);
+  }
+}
+function getContrastBorderColor(contrast, error) {
+  switch (contrast) {
+    case Contrasts.LIGHT:
+      return error ? "rgba(255, 0, 0, 0.7)" : "rgba(0, 0, 0, 0.25)";
+    case Contrasts.DARK:
+      return error ? "rgba(255, 0, 0, 0.7)" : "rgba(255, 255, 255, 0.6)";
+    default:
+      throw new Error(`Invalid form contrast "${contrast}"`);
+  }
+}
+function getContrastBackgroundColor(contrast) {
+  switch (contrast) {
+    case Contrasts.LIGHT:
+      return "white";
+    case Contrasts.DARK:
+      return "rgba(0, 0, 0, 0.7)";
+    default:
+      throw new Error(`Invalid form contrast "${contrast}"`);
+  }
+}
+function getContrastColor(contrast) {
+  switch (contrast) {
+    case Contrasts.LIGHT:
+      return "rgba(0, 0, 0, 0.95)";
+    case Contrasts.DARK:
+      return "white";
+    default:
+      throw new Error(`Invalid form contrast "${contrast}"`);
+  }
+}
+function getContrastPlaceholderColor(contrast) {
+  switch (contrast) {
+    case Contrasts.LIGHT:
+      return "rgba(0, 0, 0, 0.3)";
+    case Contrasts.DARK:
+      return "rgba(255,255,255,0.3)";
+    default:
+      throw new Error(`Invalid form contrast "${contrast}"`);
+  }
+}
+function responsiveField(props) {
+  return {
+    display: "block",
+    width: "100%",
+    outline: "none",
+    borderWidth: 1,
+    borderStyle: "solid",
+    transition: "border-color 200ms",
+    ...useResponsiveStyle(
+      [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 }
+      ]) => ({
+        padding: `${getSizeVerticalPadding(size)}px ${getSizeHorizontalPadding(size)}px`,
+        borderRadius: getShapeBorderRadius(shape),
+        borderColor: getContrastBorderColor(contrast, props.error),
+        color: getContrastColor(contrast),
+        backgroundColor: getContrastBackgroundColor(contrast),
+        ":focus, :focus-within": {
+          borderColor: colorToString(brandColor)
+        },
+        "::placeholder": {
+          color: getContrastPlaceholderColor(contrast)
+        }
+      })
+    )
+  };
+}
+export {
+  responsiveField as default,
+  getContrastBackgroundColor,
+  getContrastBorderColor,
+  getContrastColor,
+  getShapeBorderRadius,
+  getSizeHeight,
+  getSizeHorizontalPadding
+};
+//# sourceMappingURL=responsiveField.js.map

package/dist/esm/components/builtin/Form/components/Field/services/responsiveField.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../src/components/builtin/Form/components/Field/services/responsiveField.ts"],"sourcesContent":["import { colorToString } from '../../../../../utils/colorToString'\n\nimport {\n  Size,\n  Shape,\n  Contrast,\n  Shapes,\n  Sizes,\n  Contrasts,\n  Value,\n} from '../../../context/FormContext'\nimport { useResponsiveStyle } from '../../../../../utils/responsive-style'\nimport { CSSObject } from '@emotion/css'\n\nexport function getSizeHeight(size: Size): number {\n  switch (size) {\n    case Sizes.SMALL:\n      return 30\n\n    case Sizes.MEDIUM:\n      return 38\n\n    case Sizes.LARGE:\n      return 48\n\n    default:\n      throw new Error(`Invalid form size \"${size}\"`)\n  }\n}\n\nexport function getSizeHorizontalPadding(size: Size): number {\n  switch (size) {\n    case Sizes.SMALL:\n      return 8\n\n    case Sizes.MEDIUM:\n      return 12\n\n    case Sizes.LARGE:\n      return 16\n\n    default:\n      throw new Error(`Invalid form size \"${size}\"`)\n  }\n}\n\nfunction getSizeVerticalPadding(size: Size): number {\n  switch (size) {\n    case Sizes.SMALL:\n      return 3\n\n    case Sizes.MEDIUM:\n      return 7\n\n    case Sizes.LARGE:\n      return 11\n\n    default:\n      throw new Error(`Invalid form size \"${size}\"`)\n  }\n}\n\nexport function getShapeBorderRadius(shape: Shape): number {\n  switch (shape) {\n    case Shapes.SQUARE:\n      return 0\n\n    case Shapes.ROUNDED:\n      return 4\n\n    case Shapes.PILL:\n      return 500\n\n    default:\n      throw new Error(`Invalid form shape \"${shape}\"`)\n  }\n}\n\nexport function getContrastBorderColor(contrast: Contrast, error?: boolean): string {\n  switch (contrast) {\n    case Contrasts.LIGHT:\n      return error ? 'rgba(255, 0, 0, 0.7)' : 'rgba(0, 0, 0, 0.25)'\n\n    case Contrasts.DARK:\n      return error ? 'rgba(255, 0, 0, 0.7)' : 'rgba(255, 255, 255, 0.6)'\n\n    default:\n      throw new Error(`Invalid form contrast \"${contrast}\"`)\n  }\n}\n\nexport function getContrastBackgroundColor(contrast: Contrast): string {\n  switch (contrast) {\n    case Contrasts.LIGHT:\n      return 'white'\n\n    case Contrasts.DARK:\n      return 'rgba(0, 0, 0, 0.7)'\n\n    default:\n      throw new Error(`Invalid form contrast \"${contrast}\"`)\n  }\n}\n\nexport function getContrastColor(contrast: Contrast): string {\n  switch (contrast) {\n    case Contrasts.LIGHT:\n      return 'rgba(0, 0, 0, 0.95)'\n\n    case Contrasts.DARK:\n      return 'white'\n\n    default:\n      throw new Error(`Invalid form contrast \"${contrast}\"`)\n  }\n}\n\nfunction getContrastPlaceholderColor(contrast: Contrast) {\n  switch (contrast) {\n    case Contrasts.LIGHT:\n      return 'rgba(0, 0, 0, 0.3)'\n\n    case Contrasts.DARK:\n      return 'rgba(255,255,255,0.3)'\n\n    default:\n      throw new Error(`Invalid form contrast \"${contrast}\"`)\n  }\n}\n\nexport default function responsiveField(\n  props: Pick<Value, 'shape' | 'size' | 'contrast' | 'brandColor'> & { error?: boolean },\n): CSSObject {\n  return {\n    display: 'block',\n    width: '100%',\n    outline: 'none',\n    borderWidth: 1,\n    borderStyle: 'solid',\n    transition: 'border-color 200ms',\n    ...useResponsiveStyle(\n      [props.shape, props.size, props.contrast, props.brandColor] as const,\n      ([\n        shape = Shapes.ROUNDED,\n        size = Sizes.MEDIUM,\n        contrast = Contrasts.LIGHT,\n        brandColor = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 },\n      ]) => ({\n        padding: `${getSizeVerticalPadding(size)}px ${getSizeHorizontalPadding(size)}px`,\n        borderRadius: getShapeBorderRadius(shape),\n        borderColor: getContrastBorderColor(contrast, props.error),\n        color: getContrastColor(contrast),\n        backgroundColor: getContrastBackgroundColor(contrast),\n\n        ':focus, :focus-within': {\n          borderColor: colorToString(brandColor),\n        },\n\n        '::placeholder': {\n          color: getContrastPlaceholderColor(contrast),\n        },\n      }),\n    ),\n  }\n}\n"],"mappings":"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","names":[]}

package/dist/esm/components/builtin/Form/components/Placeholder/index.js

@@ -0,0 +1,79 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "@emotion/css";
+import { forwardRef } from "react";
+import { useStyle } from "../../../../../runtimes/react/use-style";
+function Label() {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: useStyle({
+        maxWidth: 120,
+        minWidth: 60,
+        height: 8,
+        borderRadius: 2,
+        backgroundColor: "#a1a8c2",
+        opacity: 0.4,
+        marginBottom: 8
+      })
+    }
+  );
+}
+function Input() {
+  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_default = forwardRef(function Placeholder({ className, width, margin }, ref) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: cx(
+        useStyle({ display: "flex", flexDirection: "column" }),
+        width,
+        margin,
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", marginBottom: 16 }, children: [
+          /* @__PURE__ */ jsx(Label, {}),
+          /* @__PURE__ */ jsx(Input, {})
+        ] }),
+        /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", marginBottom: 16 }, children: [
+          /* @__PURE__ */ jsx(Label, {}),
+          /* @__PURE__ */ jsx(Input, {})
+        ] }),
+        /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", justifyContent: "flex-end" }, children: /* @__PURE__ */ jsx(Button, {}) })
+      ]
+    }
+  );
+});
+export {
+  Placeholder_default as default
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/components/builtin/Form/components/Placeholder/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../src/components/builtin/Form/components/Placeholder/index.tsx"],"sourcesContent":["import { cx } from '@emotion/css'\nimport { forwardRef, Ref } from 'react'\n\nimport { useStyle } from '../../../../../runtimes/react/use-style'\n\nfunction Label() {\n  return (\n    <div\n      className={useStyle({\n        maxWidth: 120,\n        minWidth: 60,\n        height: 8,\n        borderRadius: 2,\n        backgroundColor: '#a1a8c2',\n        opacity: 0.4,\n        marginBottom: 8,\n      })}\n    />\n  )\n}\n\nfunction Input() {\n  return (\n    <div\n      className={useStyle({\n        minWidth: 80,\n        height: 32,\n        borderRadius: 4,\n        borderWidth: 2,\n        borderStyle: 'solid',\n        borderColor: '#a1a8c2',\n        opacity: 0.4,\n      })}\n    />\n  )\n}\n\nfunction Button() {\n  return (\n    <div\n      className={useStyle({\n        minWidth: 140,\n        height: 32,\n        borderRadius: 4,\n        backgroundColor: '#a1a8c2',\n        opacity: 0.4,\n      })}\n    />\n  )\n}\n\ntype Props = {\n  className?: string\n  width?: string\n  margin?: string\n}\n\nexport default forwardRef(function Placeholder(\n  { className, width, margin }: Props,\n  ref: Ref<HTMLDivElement>,\n): JSX.Element {\n  return (\n    <div\n      ref={ref}\n      className={cx(\n        useStyle({ display: 'flex', flexDirection: 'column' }),\n        width,\n        margin,\n        className,\n      )}\n    >\n      <div style={{ display: 'flex', flexDirection: 'column', marginBottom: 16 }}>\n        <Label />\n        <Input />\n      </div>\n      <div style={{ display: 'flex', flexDirection: 'column', marginBottom: 16 }}>\n        <Label />\n        <Input />\n      </div>\n      <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'flex-end' }}>\n        <Button />\n      </div>\n    </div>\n  )\n})\n"],"mappings":"AAOI,cAgEE,YAhEF;AAPJ,SAAS,UAAU;AACnB,SAAS,kBAAuB;AAEhC,SAAS,gBAAgB;AAEzB,SAAS,QAAQ;AACf,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,SAAS;AAAA,QAClB,UAAU;AAAA,QACV,UAAU;AAAA,QACV,QAAQ;AAAA,QACR,cAAc;AAAA,QACd,iBAAiB;AAAA,QACjB,SAAS;AAAA,QACT,cAAc;AAAA,MAChB,CAAC;AAAA;AAAA,EACH;AAEJ;AAEA,SAAS,QAAQ;AACf,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,SAAS;AAAA,QAClB,UAAU;AAAA,QACV,QAAQ;AAAA,QACR,cAAc;AAAA,QACd,aAAa;AAAA,QACb,aAAa;AAAA,QACb,aAAa;AAAA,QACb,SAAS;AAAA,MACX,CAAC;AAAA;AAAA,EACH;AAEJ;AAEA,SAAS,SAAS;AAChB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,SAAS;AAAA,QAClB,UAAU;AAAA,QACV,QAAQ;AAAA,QACR,cAAc;AAAA,QACd,iBAAiB;AAAA,QACjB,SAAS;AAAA,MACX,CAAC;AAAA;AAAA,EACH;AAEJ;AAQA,IAAO,sBAAQ,WAAW,SAAS,YACjC,EAAE,WAAW,OAAO,OAAO,GAC3B,KACa;AACb,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAW;AAAA,QACT,SAAS,EAAE,SAAS,QAAQ,eAAe,SAAS,CAAC;AAAA,QACrD;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MAEA;AAAA,6BAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,eAAe,UAAU,cAAc,GAAG,GACvE;AAAA,8BAAC,SAAM;AAAA,UACP,oBAAC,SAAM;AAAA,WACT;AAAA,QACA,qBAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,eAAe,UAAU,cAAc,GAAG,GACvE;AAAA,8BAAC,SAAM;AAAA,UACP,oBAAC,SAAM;AAAA,WACT;AAAA,QACA,oBAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,eAAe,UAAU,gBAAgB,WAAW,GACjF,8BAAC,UAAO,GACV;AAAA;AAAA;AAAA,EACF;AAEJ,CAAC;","names":[]}

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

@@ -0,0 +1,28 @@
+import { jsx } from "react/jsx-runtime";
+import { keyframes } from "@emotion/css";
+import { useStyle } from "../../../../../runtimes/react/use-style";
+import { Spinner20 } from "../../../../icons/Spinner20";
+const spin = keyframes`
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+`;
+function Spinner() {
+  return /* @__PURE__ */ jsx(
+    Spinner20,
+    {
+      className: useStyle({
+        display: "inline-flex",
+        animation: `${spin} 1s linear infinite`,
+        stroke: "currentColor"
+      })
+    }
+  );
+}
+export {
+  Spinner as default
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/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":"AAeI;AAfJ,SAAS,iBAAiB;AAC1B,SAAS,gBAAgB;AACzB,SAAS,iBAAiB;AAE1B,MAAM,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASE,SAAR,UAAwC;AAC7C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,SAAS;AAAA,QAClB,SAAS;AAAA,QACT,WAAW,GAAG,IAAI;AAAA,QAClB,QAAQ;AAAA,MACV,CAAC;AAAA;AAAA,EACH;AAEJ;","names":[]}

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

@@ -0,0 +1,35 @@
+"use client";
+import { createContext, useContext } from "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 = createContext({});
+function useFormContext() {
+  return useContext(Context);
+}
+const { Provider } = Context;
+export {
+  Alignments,
+  Contrasts,
+  Provider,
+  Shapes,
+  Sizes,
+  useFormContext
+};
+//# sourceMappingURL=FormContext.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../src/components/builtin/Form/context/FormContext.ts"],"sourcesContent":["'use client'\n\nimport { 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":";AAEA,SAAS,eAAe,kBAAkB;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,UAAU,cAAqB,CAAC,CAAU;AAEzC,SAAS,iBAAwB;AACtC,SAAO,WAAW,OAAO;AAC3B;AAEA,MAAM,EAAE,SAAS,IAAI;","names":[]}

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

@@ -0,0 +1,5 @@
+import { default as default2 } from "./Form";
+export {
+  default2 as default
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/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,SAAS,WAAAA,gBAAe;","names":["default"]}

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

@@ -0,0 +1,146 @@
+import { Props } from "../../../prop-controllers";
+import { findBreakpointOverride, getBaseBreakpoint } from "../../../state/modules/breakpoints";
+import { MakeswiftComponentType } from "../constants";
+import { Alignments, Contrasts, Shapes, Sizes } from "./context/FormContext";
+import { ComponentIcon } from "../../../state/modules/components-meta";
+import { lazy } from "react";
+function registerComponent(runtime) {
+  return runtime.registerComponent(
+    lazy(() => import("./Form")),
+    {
+      type: MakeswiftComponentType.Form,
+      label: "Form",
+      icon: ComponentIcon.Form,
+      props: {
+        id: Props.ElementID(),
+        tableId: Props.Table(),
+        fields: Props.TableFormFields(),
+        submitLink: 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: Props.GapY((props) => ({
+          preset: [
+            {
+              deviceId: getBaseBreakpoint(runtime.getBreakpoints()).id,
+              value: { value: 10, unit: "px" }
+            }
+          ],
+          label: "Gap",
+          defaultValue: { value: 0, unit: "px" },
+          hidden: props.tableId == null
+        })),
+        shape: Props.ResponsiveIconRadioGroup((props) => ({
+          label: "Shape",
+          options: [
+            { label: "Pill", value: Shapes.PILL, icon: "ButtonPill16" },
+            { label: "Rounded", value: Shapes.ROUNDED, icon: "ButtonRounded16" },
+            { label: "Square", value: Shapes.SQUARE, icon: "ButtonSquare16" }
+          ],
+          defaultValue: Shapes.ROUNDED,
+          hidden: props.tableId == null
+        })),
+        size: Props.ResponsiveIconRadioGroup((props) => ({
+          label: "Size",
+          options: [
+            { label: "Small", value: Sizes.SMALL, icon: "SizeSmall16" },
+            { label: "Medium", value: Sizes.MEDIUM, icon: "SizeMedium16" },
+            { label: "Large", value: Sizes.LARGE, icon: "SizeLarge16" }
+          ],
+          defaultValue: Sizes.MEDIUM,
+          hidden: props?.tableId == null
+        })),
+        contrast: Props.ResponsiveIconRadioGroup((props) => ({
+          label: "Color",
+          options: [
+            { label: "Light mode", value: Contrasts.LIGHT, icon: "Sun16" },
+            { label: "Dark mode", value: Contrasts.DARK, icon: "Moon16" }
+          ],
+          defaultValue: Contrasts.LIGHT,
+          hidden: props.tableId == null
+        })),
+        labelTextStyle: Props.TextStyle({ label: "Label text style" }),
+        labelTextColor: Props.ResponsiveColor((props, device) => {
+          const hidden = props.tableId == null;
+          const responsiveContrast = props.contrast;
+          const contrast = findBreakpointOverride(
+            runtime.getBreakpoints(),
+            responsiveContrast,
+            device
+          );
+          return {
+            hidden,
+            label: "Label text color",
+            placeholder: contrast?.value === Contrasts.DARK ? "rgba(255,255,255,0.95)" : "rgba(0,0,0,0.8)"
+          };
+        }),
+        submitTextStyle: Props.TextStyle({ label: "Button text style" }),
+        brandColor: Props.ResponsiveColor((props) => ({
+          label: "Button color",
+          placeholder: "black",
+          hidden: props.tableId == null
+          // TODO: Add hideAlphaSlider
+        })),
+        submitTextColor: Props.ResponsiveColor((props) => ({
+          label: "Button text color",
+          placeholder: "white",
+          hidden: props.tableId == null
+        })),
+        submitLabel: Props.TextInput((props) => ({
+          label: "Button label",
+          placeholder: "Submit",
+          hidden: props.tableId == null
+        })),
+        submitVariant: 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: Props.ResponsiveLength((props) => ({
+          label: "Button width",
+          hidden: props.tableId == null
+          // TODO: Add placeholder: { value: 'auto' }
+        })),
+        submitAlignment: Props.ResponsiveIconRadioGroup((props) => ({
+          label: "Button alignment",
+          options: [
+            { label: "Left", value: Alignments.LEFT, icon: "AlignLeft16" },
+            { label: "Center", value: Alignments.CENTER, icon: "AlignCenter16" },
+            { label: "Right", value: Alignments.RIGHT, icon: "AlignRight16" }
+          ],
+          defaultValue: Alignments.CENTER,
+          hidden: props.tableId == null
+        })),
+        width: Props.Width({
+          preset: [
+            {
+              deviceId: getBaseBreakpoint(runtime.getBreakpoints()).id,
+              value: { value: 550, unit: "px" }
+            }
+          ],
+          defaultValue: { value: 100, unit: "%" },
+          format: Props.Width.Format.ClassName
+        }),
+        margin: Props.Margin({ format: Props.Margin.Format.ClassName })
+      }
+    }
+  );
+}
+export {
+  registerComponent
+};
+//# sourceMappingURL=register.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/builtin/Form/register.ts"],"sourcesContent":["import { 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'\nimport { lazy } from 'react'\n\nexport function registerComponent(runtime: ReactRuntime) {\n  return runtime.registerComponent(\n    lazy(() => 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":[]}

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

@@ -0,0 +1 @@
+//# sourceMappingURL=types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

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

@@ -0,0 +1,123 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useState, useEffect, forwardRef } from "react";
+import NextImage from "next/image";
+import { findBreakpointOverride } from "../../../state/modules/breakpoints";
+import { placeholders } from "../../utils/placeholders";
+import { Link } from "../../shared/Link";
+import { cx } from "@emotion/css";
+import { useStyle } from "../../../runtimes/react/use-style";
+import { useResponsiveStyle, useResponsiveWidth } from "../../utils/responsive-style";
+import { useFile } from "../../../runtimes/react/hooks/makeswift-api";
+import { major as nextMajorVersion } from "../../../next/next-version";
+import { useBreakpoints } from "../../../runtimes/react";
+import { match, P } from "ts-pattern";
+const NextLegacyImage = NextImage;
+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 && findBreakpointOverride(breakpoints, width, baseDevice.id);
+  const baseWidthSize = baseWidth == null || baseWidth.value.unit !== "px" ? "100vw" : `${baseWidth.value.value}px`;
+  return breakpoints.map((breakpoint) => {
+    const override = 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 = forwardRef(function Image2({
+  id,
+  width,
+  margin,
+  padding,
+  file,
+  border,
+  borderRadius,
+  altText,
+  link,
+  opacity,
+  boxShadow,
+  placeholder = placeholders.image,
+  className,
+  priority
+}, ref) {
+  const fileId = match(file).with(P.string, (v) => v).with({ type: "makeswift-file", version: 1 }, (v) => v.id).otherwise(() => null);
+  const fileData = useFile(fileId);
+  const imageSrc = match([file, fileData]).with([P.any, P.not(P.nullish)], ([, fileData2]) => fileData2.publicUrl).with([{ type: "external-file", version: 1 }, P.any], ([file2]) => file2.url).otherwise(() => placeholder.src);
+  const dataDimensions = match([file, fileData, imageSrc]).with(
+    [{ type: "external-file", version: 1, width: P.number, height: P.number }, P.any, P.any],
+    ([externalFile]) => ({ width: externalFile.width, height: externalFile.height })
+  ).with([P.any, P.not(P.nullish), P.any], ([, data]) => data.dimensions).with([P.any, P.any, placeholder.src], () => placeholder.dimensions).otherwise(() => null);
+  const [measuredDimensions, setMeasuredDimensions] = useState(null);
+  const breakpoints = useBreakpoints();
+  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 ? Link : "div";
+  const containerClassName = cx(
+    useStyle({ lineHeight: 0, overflow: "hidden" }),
+    useStyle(useResponsiveWidth(width, dimensions?.width)),
+    useStyle(useResponsiveStyle([opacity], ([opacity2 = 1]) => ({ opacity: opacity2 }))),
+    margin,
+    padding,
+    border,
+    borderRadius,
+    boxShadow,
+    className
+  );
+  if (!dimensions)
+    return null;
+  return /* @__PURE__ */ jsx(Container, { link, ref, id, className: containerClassName, children: nextMajorVersion < 13 ? /* @__PURE__ */ jsx(
+    NextLegacyImage,
+    {
+      layout: "responsive",
+      src: imageSrc,
+      sizes: imageSizes(breakpoints, width),
+      alt: altText,
+      width: dimensions.width,
+      height: dimensions.height,
+      priority
+    }
+  ) : /* @__PURE__ */ jsx(
+    NextImage,
+    {
+      src: imageSrc,
+      priority,
+      sizes: imageSizes(breakpoints, width),
+      alt: altText ?? "",
+      width: dimensions.width,
+      height: dimensions.height,
+      style: {
+        width: "100%",
+        height: "auto"
+      }
+    }
+  ) });
+});
+var Image_default = ImageComponent;
+export {
+  Image_default as default
+};
+//# sourceMappingURL=Image.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/builtin/Image/Image.tsx"],"sourcesContent":["'use client'\n\nimport { 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":["Image","fileData","file","opacity"]}

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

@@ -0,0 +1,5 @@
+import { default as default2 } from "./Image";
+export {
+  default2 as default
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/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,SAAS,WAAAA,gBAAe;","names":["default"]}