@makeswift/runtime 0.23.13 → 0.23.14

package/dist/esm/prop-controllers/copy/rich-text.js

@@ -0,0 +1,97 @@
+function copy(value, context) {
+  if (value == null)
+    return value;
+  return { ...value, document: value.document ? copyNode(value.document) : value.document };
+  function copyNode(node) {
+    switch (node.object) {
+      case "document":
+      case "block":
+      case "inline":
+        return copyInline(node);
+      case "text":
+        return { ...node, marks: node.marks?.map(copyMark) };
+      default:
+        return node;
+    }
+  }
+  function copyInline(inline) {
+    switch (inline.type) {
+      case "link":
+        return {
+          ...inline,
+          nodes: inline.nodes?.map(copyNode),
+          data: inline.data ? copyLinkData(inline.data) : inline.data
+        };
+      default:
+        return { ...inline, nodes: inline.nodes?.map(copyNode) };
+    }
+  }
+  function copyLinkData(data) {
+    switch (data.type) {
+      case "OPEN_PAGE": {
+        const pageId = data.payload.pageId;
+        if (pageId == null)
+          return data;
+        return {
+          ...data,
+          payload: {
+            ...data.payload,
+            pageId: context.replacementContext.pageIds.get(pageId) ?? data.payload.pageId
+          }
+        };
+      }
+      case "SCROLL_TO_ELEMENT": {
+        const elementIdConfig = data.payload.elementIdConfig;
+        if (elementIdConfig == null)
+          return data;
+        return {
+          ...data,
+          payload: {
+            ...data.payload,
+            elementIdConfig: {
+              ...elementIdConfig,
+              elementKey: context.replacementContext.elementKeys.get(elementIdConfig.elementKey) ?? elementIdConfig.elementKey
+            }
+          }
+        };
+      }
+      default:
+        return data;
+    }
+  }
+  function copyMark(mark) {
+    switch (mark.type) {
+      case "typography": {
+        const typographyId = mark.data?.value.id;
+        return {
+          ...mark,
+          data: {
+            ...mark.data,
+            value: {
+              ...mark.data?.value,
+              id: context.replacementContext.typographyIds.get(typographyId) ?? typographyId,
+              style: mark.data?.value.style.map((override) => ({
+                ...override,
+                value: {
+                  ...override.value,
+                  color: override.value.color == null ? override.value.color : {
+                    ...override.value.color,
+                    swatchId: context.replacementContext.swatchIds.get(
+                      override.value.color?.swatchId
+                    ) ?? override.value.color?.swatchId
+                  }
+                }
+              }))
+            }
+          }
+        };
+      }
+      default:
+        return mark;
+    }
+  }
+}
+export {
+  copy
+};
+//# sourceMappingURL=rich-text.js.map

package/dist/esm/prop-controllers/copy/rich-text.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/prop-controllers/copy/rich-text.ts"],"sourcesContent":["import { NodeJSON, InlineJSON, MarkJSON } from '../../controls'\nimport { CopyContext } from '../../state/react-page'\nimport { RichTextValue } from '../descriptors'\n\nexport function copy(\n  value: RichTextValue | undefined,\n  context: CopyContext,\n): RichTextValue | undefined {\n  if (value == null) return value\n\n  return { ...value, document: value.document ? copyNode(value.document) : value.document }\n\n  function copyNode<T extends NodeJSON>(node: T): T {\n    switch (node.object) {\n      case 'document':\n      case 'block':\n      case 'inline':\n        // @ts-expect-error: TypeScript can't refine the generic type T, even though it can\n        // refine NodeJSON.\n        return copyInline(node)\n\n      case 'text':\n        return { ...node, marks: node.marks?.map(copyMark) }\n\n      default:\n        return node\n    }\n  }\n\n  function copyInline(inline: InlineJSON): InlineJSON {\n    switch (inline.type) {\n      case 'link':\n        return {\n          ...inline,\n          nodes: inline.nodes?.map(copyNode),\n          data: inline.data ? copyLinkData(inline.data as any) : inline.data,\n        }\n\n      default:\n        return { ...inline, nodes: inline.nodes?.map(copyNode) }\n    }\n  }\n\n  function copyLinkData(data: any): any {\n    switch (data.type) {\n      case 'OPEN_PAGE': {\n        const pageId = data.payload.pageId\n\n        if (pageId == null) return data\n\n        return {\n          ...data,\n          payload: {\n            ...data.payload,\n            pageId: context.replacementContext.pageIds.get(pageId) ?? data.payload.pageId,\n          },\n        }\n      }\n\n      case 'SCROLL_TO_ELEMENT': {\n        const elementIdConfig = data.payload.elementIdConfig\n\n        if (elementIdConfig == null) return data\n\n        return {\n          ...data,\n          payload: {\n            ...data.payload,\n            elementIdConfig: {\n              ...elementIdConfig,\n              elementKey:\n                context.replacementContext.elementKeys.get(elementIdConfig.elementKey) ??\n                elementIdConfig.elementKey,\n            },\n          },\n        }\n      }\n\n      default:\n        return data\n    }\n  }\n\n  function copyMark(mark: MarkJSON): MarkJSON {\n    switch (mark.type) {\n      case 'typography': {\n        const typographyId = mark.data?.value.id\n\n        return {\n          ...mark,\n          data: {\n            ...mark.data,\n            value: {\n              ...mark.data?.value,\n              id: context.replacementContext.typographyIds.get(typographyId) ?? typographyId,\n              style: mark.data?.value.style.map((override: any) => ({\n                ...override,\n                value: {\n                  ...override.value,\n                  color:\n                    override.value.color == null\n                      ? override.value.color\n                      : {\n                          ...override.value.color,\n                          swatchId:\n                            context.replacementContext.swatchIds.get(\n                              override.value.color?.swatchId,\n                            ) ?? override.value.color?.swatchId,\n                        },\n                },\n              })),\n            },\n          },\n        }\n      }\n\n      default:\n        return mark\n    }\n  }\n}\n"],"mappings":"AAIO,SAAS,KACd,OACA,SAC2B;AAC3B,MAAI,SAAS;AAAM,WAAO;AAE1B,SAAO,EAAE,GAAG,OAAO,UAAU,MAAM,WAAW,SAAS,MAAM,QAAQ,IAAI,MAAM,SAAS;AAExF,WAAS,SAA6B,MAAY;AAChD,YAAQ,KAAK,QAAQ;AAAA,MACnB,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAGH,eAAO,WAAW,IAAI;AAAA,MAExB,KAAK;AACH,eAAO,EAAE,GAAG,MAAM,OAAO,KAAK,OAAO,IAAI,QAAQ,EAAE;AAAA,MAErD;AACE,eAAO;AAAA,IACX;AAAA,EACF;AAEA,WAAS,WAAW,QAAgC;AAClD,YAAQ,OAAO,MAAM;AAAA,MACnB,KAAK;AACH,eAAO;AAAA,UACL,GAAG;AAAA,UACH,OAAO,OAAO,OAAO,IAAI,QAAQ;AAAA,UACjC,MAAM,OAAO,OAAO,aAAa,OAAO,IAAW,IAAI,OAAO;AAAA,QAChE;AAAA,MAEF;AACE,eAAO,EAAE,GAAG,QAAQ,OAAO,OAAO,OAAO,IAAI,QAAQ,EAAE;AAAA,IAC3D;AAAA,EACF;AAEA,WAAS,aAAa,MAAgB;AACpC,YAAQ,KAAK,MAAM;AAAA,MACjB,KAAK,aAAa;AAChB,cAAM,SAAS,KAAK,QAAQ;AAE5B,YAAI,UAAU;AAAM,iBAAO;AAE3B,eAAO;AAAA,UACL,GAAG;AAAA,UACH,SAAS;AAAA,YACP,GAAG,KAAK;AAAA,YACR,QAAQ,QAAQ,mBAAmB,QAAQ,IAAI,MAAM,KAAK,KAAK,QAAQ;AAAA,UACzE;AAAA,QACF;AAAA,MACF;AAAA,MAEA,KAAK,qBAAqB;AACxB,cAAM,kBAAkB,KAAK,QAAQ;AAErC,YAAI,mBAAmB;AAAM,iBAAO;AAEpC,eAAO;AAAA,UACL,GAAG;AAAA,UACH,SAAS;AAAA,YACP,GAAG,KAAK;AAAA,YACR,iBAAiB;AAAA,cACf,GAAG;AAAA,cACH,YACE,QAAQ,mBAAmB,YAAY,IAAI,gBAAgB,UAAU,KACrE,gBAAgB;AAAA,YACpB;AAAA,UACF;AAAA,QACF;AAAA,MACF;AAAA,MAEA;AACE,eAAO;AAAA,IACX;AAAA,EACF;AAEA,WAAS,SAAS,MAA0B;AAC1C,YAAQ,KAAK,MAAM;AAAA,MACjB,KAAK,cAAc;AACjB,cAAM,eAAe,KAAK,MAAM,MAAM;AAEtC,eAAO;AAAA,UACL,GAAG;AAAA,UACH,MAAM;AAAA,YACJ,GAAG,KAAK;AAAA,YACR,OAAO;AAAA,cACL,GAAG,KAAK,MAAM;AAAA,cACd,IAAI,QAAQ,mBAAmB,cAAc,IAAI,YAAY,KAAK;AAAA,cAClE,OAAO,KAAK,MAAM,MAAM,MAAM,IAAI,CAAC,cAAmB;AAAA,gBACpD,GAAG;AAAA,gBACH,OAAO;AAAA,kBACL,GAAG,SAAS;AAAA,kBACZ,OACE,SAAS,MAAM,SAAS,OACpB,SAAS,MAAM,QACf;AAAA,oBACE,GAAG,SAAS,MAAM;AAAA,oBAClB,UACE,QAAQ,mBAAmB,UAAU;AAAA,sBACnC,SAAS,MAAM,OAAO;AAAA,oBACxB,KAAK,SAAS,MAAM,OAAO;AAAA,kBAC/B;AAAA,gBACR;AAAA,cACF,EAAE;AAAA,YACJ;AAAA,UACF;AAAA,QACF;AAAA,MACF;AAAA,MAEA;AACE,eAAO;AAAA,IACX;AAAA,EACF;AACF;","names":[]}

package/dist/esm/prop-controllers/copy/table-form-fields.js

@@ -0,0 +1,15 @@
+function copy(value, context) {
+  if (value == null)
+    return value;
+  return { ...value, fields: value.fields.map(copyFormFieldsPanelItem) };
+  function copyFormFieldsPanelItem(item) {
+    return {
+      ...item,
+      tableColumnId: context.replacementContext.tableColumnIds.get(item.tableColumnId) ?? item.tableColumnId
+    };
+  }
+}
+export {
+  copy
+};
+//# sourceMappingURL=table-form-fields.js.map

package/dist/esm/prop-controllers/copy/table-form-fields.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/prop-controllers/copy/table-form-fields.ts"],"sourcesContent":["import { CopyContext } from '../../state/react-page'\nimport { TableFormFieldsValue } from '../descriptors'\n\nexport function copy(\n  value: TableFormFieldsValue | undefined,\n  context: CopyContext,\n): TableFormFieldsValue | undefined {\n  if (value == null) return value\n\n  return { ...value, fields: value.fields.map(copyFormFieldsPanelItem) }\n\n  function copyFormFieldsPanelItem(item: any): any {\n    return {\n      ...item,\n      tableColumnId:\n        context.replacementContext.tableColumnIds.get(item.tableColumnId) ?? item.tableColumnId,\n    }\n  }\n}\n"],"mappings":"AAGO,SAAS,KACd,OACA,SACkC;AAClC,MAAI,SAAS;AAAM,WAAO;AAE1B,SAAO,EAAE,GAAG,OAAO,QAAQ,MAAM,OAAO,IAAI,uBAAuB,EAAE;AAErE,WAAS,wBAAwB,MAAgB;AAC/C,WAAO;AAAA,MACL,GAAG;AAAA,MACH,eACE,QAAQ,mBAAmB,eAAe,IAAI,KAAK,aAAa,KAAK,KAAK;AAAA,IAC9E;AAAA,EACF;AACF;","names":[]}

package/dist/esm/prop-controllers/copy/table.js

@@ -0,0 +1,9 @@
+function copy(value, context) {
+  if (value == null)
+    return value;
+  return context.replacementContext.tableIds.get(value) ?? value;
+}
+export {
+  copy
+};
+//# sourceMappingURL=table.js.map

package/dist/esm/prop-controllers/copy/table.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/prop-controllers/copy/table.ts"],"sourcesContent":["import { CopyContext } from '../../state/react-page'\nimport { TableValue } from '../descriptors'\n\nexport function copy(value: TableValue | undefined, context: CopyContext): TableValue | undefined {\n  if (value == null) return value\n\n  return context.replacementContext.tableIds.get(value) ?? value\n}\n"],"mappings":"AAGO,SAAS,KAAK,OAA+B,SAA8C;AAChG,MAAI,SAAS;AAAM,WAAO;AAE1B,SAAO,QAAQ,mBAAmB,SAAS,IAAI,KAAK,KAAK;AAC3D;","names":[]}

package/dist/esm/runtimes/react/components/DocumentReference.js

@@ -0,0 +1,18 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef, memo } from "react";
+import { useDocument } from "../hooks/use-document";
+import { FallbackComponent } from "../../../components/shared/FallbackComponent";
+import { Document } from "./Document";
+const DocumentReference = memo(
+  forwardRef(function DocumentReference2({ documentReference }, ref) {
+    const document = useDocument(documentReference.key);
+    if (document == null) {
+      return /* @__PURE__ */ jsx(FallbackComponent, { ref, text: "Document not found" });
+    }
+    return /* @__PURE__ */ jsx(Document, { ref, document });
+  })
+);
+export {
+  DocumentReference
+};
+//# sourceMappingURL=DocumentReference.js.map

package/dist/esm/runtimes/react/components/DocumentReference.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/runtimes/react/components/DocumentReference.tsx"],"sourcesContent":["import { Ref, forwardRef, memo } from 'react'\nimport { DocumentReference as ReactPageDocumentReference } from '../../../state/react-page'\nimport { ElementImperativeHandle } from '../element-imperative-handle'\nimport { useDocument } from '../hooks/use-document'\nimport { FallbackComponent } from '../../../components/shared/FallbackComponent'\nimport { Document } from './Document'\n\ntype DocumentReferenceProps = {\n  documentReference: ReactPageDocumentReference\n}\n\nexport const DocumentReference = memo(\n  forwardRef(function DocumentReference(\n    { documentReference }: DocumentReferenceProps,\n    ref: Ref<ElementImperativeHandle>,\n  ): JSX.Element {\n    const document = useDocument(documentReference.key)\n\n    if (document == null) {\n      return <FallbackComponent ref={ref as Ref<HTMLDivElement>} text=\"Document not found\" />\n    }\n\n    return <Document ref={ref} document={document} />\n  }),\n)\n"],"mappings":"AAmBa;AAnBb,SAAc,YAAY,YAAY;AAGtC,SAAS,mBAAmB;AAC5B,SAAS,yBAAyB;AAClC,SAAS,gBAAgB;AAMlB,MAAM,oBAAoB;AAAA,EAC/B,WAAW,SAASA,mBAClB,EAAE,kBAAkB,GACpB,KACa;AACb,UAAM,WAAW,YAAY,kBAAkB,GAAG;AAElD,QAAI,YAAY,MAAM;AACpB,aAAO,oBAAC,qBAAkB,KAAiC,MAAK,sBAAqB;AAAA,IACvF;AAEA,WAAO,oBAAC,YAAS,KAAU,UAAoB;AAAA,EACjD,CAAC;AACH;","names":["DocumentReference"]}

package/dist/esm/runtimes/react/controls/checkbox.js

@@ -0,0 +1,13 @@
+import { match } from "ts-pattern";
+import {
+  CheckboxControlDataTypeKey,
+  CheckboxControlDataTypeValueV1
+} from "@makeswift/controls";
+function useCheckboxControlValue(data, definition) {
+  const value = match(data).with({ [CheckboxControlDataTypeKey]: CheckboxControlDataTypeValueV1 }, (val) => val.value).otherwise((val) => val) ?? definition.config.defaultValue;
+  return value;
+}
+export {
+  useCheckboxControlValue
+};
+//# sourceMappingURL=checkbox.js.map

package/dist/esm/runtimes/react/controls/checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/runtimes/react/controls/checkbox.ts"],"sourcesContent":["import { match } from 'ts-pattern'\nimport {\n  CheckboxControlData,\n  CheckboxControlDataTypeKey,\n  CheckboxControlDataTypeValueV1,\n  CheckboxControlDefinition,\n} from '@makeswift/controls'\n\nexport type CheckboxControlValue<T extends CheckboxControlDefinition> =\n  undefined extends T['config']['defaultValue'] ? boolean | undefined : boolean\n\nexport function useCheckboxControlValue<T extends CheckboxControlDefinition>(\n  data: CheckboxControlData | undefined,\n  definition: T,\n): CheckboxControlValue<T> {\n  const value: boolean | undefined =\n    match(data)\n      .with({ [CheckboxControlDataTypeKey]: CheckboxControlDataTypeValueV1 }, val => val.value)\n      .otherwise(val => val) ?? definition.config.defaultValue\n\n  return value as CheckboxControlValue<T>\n}\n"],"mappings":"AAAA,SAAS,aAAa;AACtB;AAAA,EAEE;AAAA,EACA;AAAA,OAEK;AAKA,SAAS,wBACd,MACA,YACyB;AACzB,QAAM,QACJ,MAAM,IAAI,EACP,KAAK,EAAE,CAAC,0BAA0B,GAAG,+BAA+B,GAAG,SAAO,IAAI,KAAK,EACvF,UAAU,SAAO,GAAG,KAAK,WAAW,OAAO;AAEhD,SAAO;AACT;","names":[]}

package/dist/esm/runtimes/react/controls/color.js

@@ -0,0 +1,24 @@
+import Color from "color";
+import { useSwatch } from "../hooks/makeswift-api";
+function useColorValue(data, definition) {
+  const swatchId = data?.swatchId ?? null;
+  const swatch = useSwatch(swatchId);
+  const alpha = data?.alpha ?? 1;
+  if (swatch == null) {
+    const { defaultValue } = definition.config;
+    if (defaultValue === void 0)
+      return void 0;
+    let defaultColor;
+    try {
+      defaultColor = Color(definition.config.defaultValue);
+    } catch {
+      defaultColor = Color();
+    }
+    return defaultColor.rgb().string();
+  }
+  return Color({ h: swatch.hue, s: swatch.saturation, l: swatch.lightness }).alpha(alpha).rgb().string();
+}
+export {
+  useColorValue
+};
+//# sourceMappingURL=color.js.map

package/dist/esm/runtimes/react/controls/color.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/runtimes/react/controls/color.ts"],"sourcesContent":["import Color from 'color'\n\nimport { type DataType, type ResolvedValueType } from '@makeswift/controls'\n\nimport { ColorDefinition } from '../../../controls'\n\nimport { useSwatch } from '../hooks/makeswift-api'\n\nexport function useColorValue(\n  data: DataType<ColorDefinition> | undefined,\n  definition: ColorDefinition,\n): ResolvedValueType<ColorDefinition> {\n  const swatchId = data?.swatchId ?? null\n  const swatch = useSwatch(swatchId)\n  const alpha = data?.alpha ?? 1\n\n  if (swatch == null) {\n    const { defaultValue } = definition.config\n\n    if (defaultValue === undefined) return undefined\n\n    let defaultColor\n    try {\n      defaultColor = Color(definition.config.defaultValue)\n    } catch {\n      defaultColor = Color()\n    }\n\n    return defaultColor.rgb().string()\n  }\n\n  return Color({ h: swatch.hue, s: swatch.saturation, l: swatch.lightness })\n    .alpha(alpha)\n    .rgb()\n    .string()\n}\n"],"mappings":"AAAA,OAAO,WAAW;AAMlB,SAAS,iBAAiB;AAEnB,SAAS,cACd,MACA,YACoC;AACpC,QAAM,WAAW,MAAM,YAAY;AACnC,QAAM,SAAS,UAAU,QAAQ;AACjC,QAAM,QAAQ,MAAM,SAAS;AAE7B,MAAI,UAAU,MAAM;AAClB,UAAM,EAAE,aAAa,IAAI,WAAW;AAEpC,QAAI,iBAAiB;AAAW,aAAO;AAEvC,QAAI;AACJ,QAAI;AACF,qBAAe,MAAM,WAAW,OAAO,YAAY;AAAA,IACrD,QAAQ;AACN,qBAAe,MAAM;AAAA,IACvB;AAEA,WAAO,aAAa,IAAI,EAAE,OAAO;AAAA,EACnC;AAEA,SAAO,MAAM,EAAE,GAAG,OAAO,KAAK,GAAG,OAAO,YAAY,GAAG,OAAO,UAAU,CAAC,EACtE,MAAM,KAAK,EACX,IAAI,EACJ,OAAO;AACZ;","names":[]}

package/dist/esm/runtimes/react/controls/combobox.js

@@ -0,0 +1,7 @@
+function useComboboxControlValue(data) {
+  return data?.value;
+}
+export {
+  useComboboxControlValue
+};
+//# sourceMappingURL=combobox.js.map

package/dist/esm/runtimes/react/controls/combobox.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/runtimes/react/controls/combobox.ts"],"sourcesContent":["import {\n  ComboboxControlData,\n  ComboboxControlDefinition,\n  ComboboxControlDefinitionOption,\n} from '../../../controls'\n\nexport type ComboboxControlValue<T extends ComboboxControlDefinition> =\n  | ComboboxControlDefinitionOption<T>\n  | undefined\n\nexport function useComboboxControlValue<T extends ComboboxControlDefinition>(\n  data: ComboboxControlData<T> | undefined,\n): ComboboxControlValue<T> {\n  return data?.value\n}\n"],"mappings":"AAUO,SAAS,wBACd,MACyB;AACzB,SAAO,MAAM;AACf;","names":[]}

package/dist/esm/runtimes/react/controls/icon-radio-group.js

@@ -0,0 +1,7 @@
+function useIconRadioGroupValue(iconRadioGroupControlData, controlDefinition) {
+  return iconRadioGroupControlData ?? controlDefinition.config.defaultValue;
+}
+export {
+  useIconRadioGroupValue
+};
+//# sourceMappingURL=icon-radio-group.js.map

package/dist/esm/runtimes/react/controls/icon-radio-group.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/runtimes/react/controls/icon-radio-group.ts"],"sourcesContent":["import { IconRadioGroupControlData, IconRadioGroupControlDefinition } from '@makeswift/controls'\n\nexport type IconRadioGroupControlValue<T extends IconRadioGroupControlDefinition> =\n  undefined extends T['config']['defaultValue']\n    ? IconRadioGroupControlData | undefined\n    : IconRadioGroupControlData\n\nexport function useIconRadioGroupValue<T extends IconRadioGroupControlDefinition>(\n  iconRadioGroupControlData: IconRadioGroupControlData | undefined,\n  controlDefinition: T,\n): IconRadioGroupControlValue<T> {\n  return (iconRadioGroupControlData ??\n    controlDefinition.config.defaultValue) as IconRadioGroupControlValue<T>\n}\n"],"mappings":"AAOO,SAAS,uBACd,2BACA,mBAC+B;AAC/B,SAAQ,6BACN,kBAAkB,OAAO;AAC7B;","names":[]}

package/dist/esm/runtimes/react/controls/image.js

@@ -0,0 +1,29 @@
+import { P, match } from "ts-pattern";
+import { Image } from "../../../controls";
+import { useFile } from "../hooks/makeswift-api";
+function useImageControlValue(data, definition) {
+  const format = definition.config.format ?? Image.Format.URL;
+  const fileId = match(data).with(P.string, (id) => id).with({ type: "makeswift-file" }, ({ id }) => id).otherwise(() => null);
+  const file = useFile(fileId);
+  return match([file, data, format]).with([{ __typename: "File" }, P.any, Image.Format.URL], ([file2]) => file2.publicUrl).with(
+    [{ __typename: "File", dimensions: P.not(P.nullish) }, P.any, Image.Format.WithDimensions],
+    ([file2]) => ({
+      url: file2.publicUrl,
+      dimensions: file2.dimensions
+    })
+  ).with([P.any, { type: "external-file" }, Image.Format.URL], ([, d]) => d.url).with(
+    [
+      P.any,
+      { type: "external-file", width: P.number, height: P.number },
+      Image.Format.WithDimensions
+    ],
+    ([, d]) => ({
+      url: d.url,
+      dimensions: { width: d.width, height: d.height }
+    })
+  ).otherwise(() => void 0);
+}
+export {
+  useImageControlValue
+};
+//# sourceMappingURL=image.js.map

package/dist/esm/runtimes/react/controls/image.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/runtimes/react/controls/image.ts"],"sourcesContent":["import { P, match } from 'ts-pattern'\n\nimport { type DataType, type ResolvedValueType } from '@makeswift/controls'\n\nimport { Image, ImageDefinition } from '../../../controls'\n\nimport { useFile } from '../hooks/makeswift-api'\n\nexport function useImageControlValue(\n  data: DataType<ImageDefinition> | undefined,\n  definition: ImageDefinition,\n): ResolvedValueType<ImageDefinition> {\n  const format = definition.config.format ?? Image.Format.URL\n\n  const fileId = match(data)\n    .with(P.string, id => id)\n    .with({ type: 'makeswift-file' }, ({ id }) => id)\n    .otherwise(() => null)\n\n  const file = useFile(fileId)\n\n  return match([file, data, format])\n    .with([{ __typename: 'File' }, P.any, Image.Format.URL], ([file]) => file.publicUrl)\n    .with(\n      [{ __typename: 'File', dimensions: P.not(P.nullish) }, P.any, Image.Format.WithDimensions],\n      ([file]) => ({\n        url: file.publicUrl,\n        dimensions: file.dimensions,\n      }),\n    )\n    .with([P.any, { type: 'external-file' }, Image.Format.URL], ([, d]) => d.url)\n    .with(\n      [\n        P.any,\n        { type: 'external-file', width: P.number, height: P.number },\n        Image.Format.WithDimensions,\n      ],\n      ([, d]) => ({\n        url: d.url,\n        dimensions: { width: d.width, height: d.height },\n      }),\n    )\n    .otherwise(() => undefined)\n}\n"],"mappings":"AAAA,SAAS,GAAG,aAAa;AAIzB,SAAS,aAA8B;AAEvC,SAAS,eAAe;AAEjB,SAAS,qBACd,MACA,YACoC;AACpC,QAAM,SAAS,WAAW,OAAO,UAAU,MAAM,OAAO;AAExD,QAAM,SAAS,MAAM,IAAI,EACtB,KAAK,EAAE,QAAQ,QAAM,EAAE,EACvB,KAAK,EAAE,MAAM,iBAAiB,GAAG,CAAC,EAAE,GAAG,MAAM,EAAE,EAC/C,UAAU,MAAM,IAAI;AAEvB,QAAM,OAAO,QAAQ,MAAM;AAE3B,SAAO,MAAM,CAAC,MAAM,MAAM,MAAM,CAAC,EAC9B,KAAK,CAAC,EAAE,YAAY,OAAO,GAAG,EAAE,KAAK,MAAM,OAAO,GAAG,GAAG,CAAC,CAACA,KAAI,MAAMA,MAAK,SAAS,EAClF;AAAA,IACC,CAAC,EAAE,YAAY,QAAQ,YAAY,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,EAAE,KAAK,MAAM,OAAO,cAAc;AAAA,IACzF,CAAC,CAACA,KAAI,OAAO;AAAA,MACX,KAAKA,MAAK;AAAA,MACV,YAAYA,MAAK;AAAA,IACnB;AAAA,EACF,EACC,KAAK,CAAC,EAAE,KAAK,EAAE,MAAM,gBAAgB,GAAG,MAAM,OAAO,GAAG,GAAG,CAAC,CAAC,EAAE,CAAC,MAAM,EAAE,GAAG,EAC3E;AAAA,IACC;AAAA,MACE,EAAE;AAAA,MACF,EAAE,MAAM,iBAAiB,OAAO,EAAE,QAAQ,QAAQ,EAAE,OAAO;AAAA,MAC3D,MAAM,OAAO;AAAA,IACf;AAAA,IACA,CAAC,CAAC,EAAE,CAAC,OAAO;AAAA,MACV,KAAK,EAAE;AAAA,MACP,YAAY,EAAE,OAAO,EAAE,OAAO,QAAQ,EAAE,OAAO;AAAA,IACjD;AAAA,EACF,EACC,UAAU,MAAM,MAAS;AAC9B;","names":["file"]}

package/dist/esm/runtimes/react/controls/link.js

@@ -0,0 +1,76 @@
+import { useCallback, useMemo } from "react";
+import scrollIntoView from "scroll-into-view-if-needed";
+import { useElementId } from "../";
+import { usePagePathnameSlice } from "../hooks/makeswift-api";
+function useLinkControlValue(link, _definition) {
+  const pageId = link && link.type === "OPEN_PAGE" ? link.payload.pageId : null;
+  const page = usePagePathnameSlice(pageId ?? null);
+  const elementKey = link?.type === "SCROLL_TO_ELEMENT" ? link.payload.elementIdConfig?.elementKey : null;
+  const elementId = useElementId(elementKey);
+  let href = "#";
+  let target;
+  let block;
+  if (link) {
+    switch (link.type) {
+      case "OPEN_PAGE": {
+        if (page)
+          href = `/${page.localizedPathname ?? page.pathname}`;
+        target = link.payload.openInNewTab ? "_blank" : "_self";
+        break;
+      }
+      case "OPEN_URL": {
+        href = link.payload.url;
+        target = link.payload.openInNewTab ? "_blank" : "_self";
+        break;
+      }
+      case "SEND_EMAIL": {
+        const { to, subject = "", body = "" } = link.payload;
+        if (to != null)
+          href = `mailto:${to}?subject=${subject}&body=${body}`;
+        break;
+      }
+      case "CALL_PHONE": {
+        href = `tel:${link.payload.phoneNumber}`;
+        break;
+      }
+      case "SCROLL_TO_ELEMENT": {
+        href = `#${elementId ?? ""}`;
+        block = link.payload.block;
+        break;
+      }
+      default:
+        throw new RangeError(`Invalid link type "${link.type}."`);
+    }
+  }
+  const handleClick = useCallback(
+    (event) => {
+      if (event.defaultPrevented)
+        return;
+      if (link && link.type === "SCROLL_TO_ELEMENT") {
+        let hash;
+        try {
+          hash = new URL(`http://www.example.com/${href}`).hash;
+        } catch (error) {
+          console.error(`Link received invalid href: ${href}`, error);
+        }
+        if (href != null && href === hash) {
+          event.preventDefault();
+          const view = event.view;
+          scrollIntoView(view.document.querySelector(hash), {
+            behavior: "smooth",
+            block
+          });
+          if (view.location.hash !== hash)
+            view.history.pushState({}, "", hash);
+        }
+      }
+    },
+    [link, href, block]
+  );
+  const res = useMemo(() => ({ href, target, onClick: handleClick }), [href, target, handleClick]);
+  return res;
+}
+export {
+  useLinkControlValue
+};
+//# sourceMappingURL=link.js.map

package/dist/esm/runtimes/react/controls/link.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/runtimes/react/controls/link.ts"],"sourcesContent":["import { MouseEvent, useCallback, useMemo } from 'react'\n\nimport { type DataType, type ResolvedValueType } from '@makeswift/controls'\n\nimport { LinkDefinition } from '../../../controls'\n\nimport scrollIntoView from 'scroll-into-view-if-needed'\nimport { useElementId } from '../'\nimport { usePagePathnameSlice } from '../hooks/makeswift-api'\n\nexport function useLinkControlValue(\n  link: DataType<LinkDefinition> | undefined,\n  _definition: LinkDefinition,\n): ResolvedValueType<LinkDefinition> {\n  const pageId = link && link.type === 'OPEN_PAGE' ? link.payload.pageId : null\n  const page = usePagePathnameSlice(pageId ?? null)\n\n  const elementKey =\n    link?.type === 'SCROLL_TO_ELEMENT' ? link.payload.elementIdConfig?.elementKey : null\n  const elementId = useElementId(elementKey)\n\n  let href = '#'\n  let target: '_blank' | '_self' | undefined\n  let block: 'start' | 'center' | 'end' | undefined\n\n  if (link) {\n    switch (link.type) {\n      case 'OPEN_PAGE': {\n        if (page) href = `/${page.localizedPathname ?? page.pathname}`\n\n        target = link.payload.openInNewTab ? '_blank' : '_self'\n\n        break\n      }\n\n      case 'OPEN_URL': {\n        href = link.payload.url\n\n        target = link.payload.openInNewTab ? '_blank' : '_self'\n\n        break\n      }\n\n      case 'SEND_EMAIL': {\n        const { to, subject = '', body = '' } = link.payload\n\n        if (to != null) href = `mailto:${to}?subject=${subject}&body=${body}`\n\n        break\n      }\n\n      case 'CALL_PHONE': {\n        href = `tel:${link.payload.phoneNumber}`\n\n        break\n      }\n\n      case 'SCROLL_TO_ELEMENT': {\n        href = `#${elementId ?? ''}`\n        block = link.payload.block\n\n        break\n      }\n\n      default:\n        throw new RangeError(`Invalid link type \"${(link as any).type}.\"`)\n    }\n  }\n\n  const handleClick = useCallback(\n    (event: MouseEvent<Element>) => {\n      if (event.defaultPrevented) return\n\n      if (link && link.type === 'SCROLL_TO_ELEMENT') {\n        let hash: string | undefined\n\n        try {\n          hash = new URL(`http://www.example.com/${href}`).hash\n        } catch (error) {\n          console.error(`Link received invalid href: ${href}`, error)\n        }\n\n        if (href != null && href === hash) {\n          event.preventDefault()\n          const view = event.view as unknown as Window\n\n          scrollIntoView(view.document.querySelector(hash)!, {\n            behavior: 'smooth',\n            block,\n          })\n\n          if (view.location.hash !== hash) view.history.pushState({}, '', hash)\n        }\n      }\n    },\n    [link, href, block],\n  )\n\n  const res = useMemo(() => ({ href, target, onClick: handleClick }), [href, target, handleClick])\n\n  return res\n}\n"],"mappings":"AAAA,SAAqB,aAAa,eAAe;AAMjD,OAAO,oBAAoB;AAC3B,SAAS,oBAAoB;AAC7B,SAAS,4BAA4B;AAE9B,SAAS,oBACd,MACA,aACmC;AACnC,QAAM,SAAS,QAAQ,KAAK,SAAS,cAAc,KAAK,QAAQ,SAAS;AACzE,QAAM,OAAO,qBAAqB,UAAU,IAAI;AAEhD,QAAM,aACJ,MAAM,SAAS,sBAAsB,KAAK,QAAQ,iBAAiB,aAAa;AAClF,QAAM,YAAY,aAAa,UAAU;AAEzC,MAAI,OAAO;AACX,MAAI;AACJ,MAAI;AAEJ,MAAI,MAAM;AACR,YAAQ,KAAK,MAAM;AAAA,MACjB,KAAK,aAAa;AAChB,YAAI;AAAM,iBAAO,IAAI,KAAK,qBAAqB,KAAK,QAAQ;AAE5D,iBAAS,KAAK,QAAQ,eAAe,WAAW;AAEhD;AAAA,MACF;AAAA,MAEA,KAAK,YAAY;AACf,eAAO,KAAK,QAAQ;AAEpB,iBAAS,KAAK,QAAQ,eAAe,WAAW;AAEhD;AAAA,MACF;AAAA,MAEA,KAAK,cAAc;AACjB,cAAM,EAAE,IAAI,UAAU,IAAI,OAAO,GAAG,IAAI,KAAK;AAE7C,YAAI,MAAM;AAAM,iBAAO,UAAU,EAAE,YAAY,OAAO,SAAS,IAAI;AAEnE;AAAA,MACF;AAAA,MAEA,KAAK,cAAc;AACjB,eAAO,OAAO,KAAK,QAAQ,WAAW;AAEtC;AAAA,MACF;AAAA,MAEA,KAAK,qBAAqB;AACxB,eAAO,IAAI,aAAa,EAAE;AAC1B,gBAAQ,KAAK,QAAQ;AAErB;AAAA,MACF;AAAA,MAEA;AACE,cAAM,IAAI,WAAW,sBAAuB,KAAa,IAAI,IAAI;AAAA,IACrE;AAAA,EACF;AAEA,QAAM,cAAc;AAAA,IAClB,CAAC,UAA+B;AAC9B,UAAI,MAAM;AAAkB;AAE5B,UAAI,QAAQ,KAAK,SAAS,qBAAqB;AAC7C,YAAI;AAEJ,YAAI;AACF,iBAAO,IAAI,IAAI,0BAA0B,IAAI,EAAE,EAAE;AAAA,QACnD,SAAS,OAAO;AACd,kBAAQ,MAAM,+BAA+B,IAAI,IAAI,KAAK;AAAA,QAC5D;AAEA,YAAI,QAAQ,QAAQ,SAAS,MAAM;AACjC,gBAAM,eAAe;AACrB,gBAAM,OAAO,MAAM;AAEnB,yBAAe,KAAK,SAAS,cAAc,IAAI,GAAI;AAAA,YACjD,UAAU;AAAA,YACV;AAAA,UACF,CAAC;AAED,cAAI,KAAK,SAAS,SAAS;AAAM,iBAAK,QAAQ,UAAU,CAAC,GAAG,IAAI,IAAI;AAAA,QACtE;AAAA,MACF;AAAA,IACF;AAAA,IACA,CAAC,MAAM,MAAM,KAAK;AAAA,EACpB;AAEA,QAAM,MAAM,QAAQ,OAAO,EAAE,MAAM,QAAQ,SAAS,YAAY,IAAI,CAAC,MAAM,QAAQ,WAAW,CAAC;AAE/F,SAAO;AACT;","names":[]}

package/dist/esm/runtimes/react/controls/list.js

@@ -0,0 +1,34 @@
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { ControlValue } from "./control";
+function ListControlValue({
+  definition,
+  data,
+  children,
+  control
+}) {
+  const [controls, setControls] = useState(/* @__PURE__ */ new Map());
+  useEffect(() => {
+    if (control == null || data == null)
+      return;
+    const childControls = control.childControls(data.map((item) => item.id));
+    control.setChildControls(childControls);
+    setControls(childControls);
+  }, [data, control]);
+  return (data ?? []).reduce(
+    (renderFn, item) => (listControlValue) => /* @__PURE__ */ jsx(
+      ControlValue,
+      {
+        definition: definition.config.type,
+        data: item.value,
+        control: controls?.get(item.id),
+        children: (value) => renderFn([value, ...listControlValue])
+      }
+    ),
+    children
+  )([]);
+}
+export {
+  ListControlValue
+};
+//# sourceMappingURL=list.js.map

package/dist/esm/runtimes/react/controls/list.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/runtimes/react/controls/list.tsx"],"sourcesContent":["import { useEffect, useState } from 'react'\n\nimport { ControlInstance, type DataType, type ResolvedValueType } from '@makeswift/controls'\n\nimport { ListDefinition, ListControl } from '../../../controls'\n\nimport { ControlValue } from './control'\n\ntype ListControlValueProps = {\n  definition: ListDefinition\n  data: DataType<ListDefinition> | undefined\n  children(value: ResolvedValueType<ListDefinition>): JSX.Element\n  control: ListControl\n}\n\nexport function ListControlValue({\n  definition,\n  data,\n  children,\n  control,\n}: ListControlValueProps): JSX.Element {\n  const [controls, setControls] = useState<Map<string, ControlInstance> | undefined>(new Map())\n\n  useEffect(() => {\n    if (control == null || data == null) return\n\n    // This is not ideal because we're setting the itemsControl from the ListControlValue.\n    // This is because right now we don't have a subscribeToValue function inside the control.\n    // We can improve this by adding the subscribeToValue to createPropController and by\n    // moving the setItemsControl to the control itself.\n    const childControls = control.childControls(data.map(item => item.id))\n    control.setChildControls(childControls)\n    setControls(childControls)\n  }, [data, control])\n\n  return (data ?? []).reduce(\n    (renderFn, item) => listControlValue => (\n      <ControlValue\n        definition={definition.config.type}\n        data={item.value}\n        control={controls?.get(item.id)}\n      >\n        {value => renderFn([value, ...listControlValue])}\n      </ControlValue>\n    ),\n    children,\n  )([])\n}\n"],"mappings":"AAqCM;AArCN,SAAS,WAAW,gBAAgB;AAMpC,SAAS,oBAAoB;AAStB,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAuC;AACrC,QAAM,CAAC,UAAU,WAAW,IAAI,SAAmD,oBAAI,IAAI,CAAC;AAE5F,YAAU,MAAM;AACd,QAAI,WAAW,QAAQ,QAAQ;AAAM;AAMrC,UAAM,gBAAgB,QAAQ,cAAc,KAAK,IAAI,UAAQ,KAAK,EAAE,CAAC;AACrE,YAAQ,iBAAiB,aAAa;AACtC,gBAAY,aAAa;AAAA,EAC3B,GAAG,CAAC,MAAM,OAAO,CAAC;AAElB,UAAQ,QAAQ,CAAC,GAAG;AAAA,IAClB,CAAC,UAAU,SAAS,sBAClB;AAAA,MAAC;AAAA;AAAA,QACC,YAAY,WAAW,OAAO;AAAA,QAC9B,MAAM,KAAK;AAAA,QACX,SAAS,UAAU,IAAI,KAAK,EAAE;AAAA,QAE7B,qBAAS,SAAS,CAAC,OAAO,GAAG,gBAAgB,CAAC;AAAA;AAAA,IACjD;AAAA,IAEF;AAAA,EACF,EAAE,CAAC,CAAC;AACN;","names":[]}

package/dist/esm/runtimes/react/controls/number.js

@@ -0,0 +1,13 @@
+import { match } from "ts-pattern";
+import {
+  NumberControlDataTypeKey,
+  NumberControlDataTypeValueV1
+} from "@makeswift/controls";
+function useNumber(data, definition) {
+  const value = match(data).with({ [NumberControlDataTypeKey]: NumberControlDataTypeValueV1 }, (val) => val.value).otherwise((val) => val) ?? definition.config.defaultValue;
+  return value;
+}
+export {
+  useNumber
+};
+//# sourceMappingURL=number.js.map

package/dist/esm/runtimes/react/controls/number.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/runtimes/react/controls/number.ts"],"sourcesContent":["import { match } from 'ts-pattern'\nimport {\n  NumberControlData,\n  NumberControlDataTypeKey,\n  NumberControlDataTypeValueV1,\n  NumberControlDefinition,\n} from '@makeswift/controls'\n\nexport type NumberControlValue<T extends NumberControlDefinition> =\n  undefined extends T['config']['defaultValue'] ? number | undefined : number\n\nexport function useNumber<T extends NumberControlDefinition>(\n  data: NumberControlData | undefined,\n  definition: T,\n): NumberControlValue<T> {\n  const value: number | undefined =\n    match(data)\n      .with({ [NumberControlDataTypeKey]: NumberControlDataTypeValueV1 }, val => val.value)\n      .otherwise(val => val) ?? definition.config.defaultValue\n\n  return value as NumberControlValue<T>\n}\n"],"mappings":"AAAA,SAAS,aAAa;AACtB;AAAA,EAEE;AAAA,EACA;AAAA,OAEK;AAKA,SAAS,UACd,MACA,YACuB;AACvB,QAAM,QACJ,MAAM,IAAI,EACP,KAAK,EAAE,CAAC,wBAAwB,GAAG,6BAA6B,GAAG,SAAO,IAAI,KAAK,EACnF,UAAU,SAAO,GAAG,KAAK,WAAW,OAAO;AAEhD,SAAO;AACT;","names":[]}

package/dist/esm/runtimes/react/controls/select.js

@@ -0,0 +1,7 @@
+function useSelectControlValue(data, definition) {
+  return data ?? definition?.config.defaultValue;
+}
+export {
+  useSelectControlValue
+};
+//# sourceMappingURL=select.js.map

package/dist/esm/runtimes/react/controls/select.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/runtimes/react/controls/select.ts"],"sourcesContent":["import {\n  SelectControlData,\n  SelectControlDefinition,\n  SelectControlDefinitionOption,\n} from '../../../controls'\n\nexport type SelectControlValue<T extends SelectControlDefinition> =\n  undefined extends T['config']['defaultValue']\n    ? SelectControlDefinitionOption<T> | undefined\n    : SelectControlDefinitionOption<T>\n\nexport function useSelectControlValue<T extends SelectControlDefinition>(\n  data: SelectControlData<T> | undefined,\n  definition: T,\n): SelectControlValue<T> {\n  return (data ?? definition?.config.defaultValue) as SelectControlValue<T>\n}\n"],"mappings":"AAWO,SAAS,sBACd,MACA,YACuB;AACvB,SAAQ,QAAQ,YAAY,OAAO;AACrC;","names":[]}

package/dist/esm/runtimes/react/controls/shape.js

@@ -0,0 +1,20 @@
+import { jsx } from "react/jsx-runtime";
+import { ControlValue } from "./control";
+function ShapeControlValue({ definition, data, children, control }) {
+  return Object.entries(definition.config.type).reduceRight(
+    (renderFn, [key, controlDefinition]) => (shapeControlValue) => /* @__PURE__ */ jsx(
+      ControlValue,
+      {
+        definition: controlDefinition,
+        data: data?.[key],
+        control: control?.child(key),
+        children: (value) => renderFn({ ...shapeControlValue, [key]: value })
+      }
+    ),
+    children
+  )({});
+}
+export {
+  ShapeControlValue
+};
+//# sourceMappingURL=shape.js.map

package/dist/esm/runtimes/react/controls/shape.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/runtimes/react/controls/shape.tsx"],"sourcesContent":["import { type DataType, type ResolvedValueType } from '@makeswift/controls'\n\nimport { ShapeControl, ShapeDefinition } from '../../../controls'\n\nimport { ControlValue } from './control'\n\ntype ShapeControlValueProps = {\n  definition: ShapeDefinition\n  data: DataType<ShapeDefinition> | undefined\n  children(value: ResolvedValueType<ShapeDefinition>): JSX.Element\n  control: ShapeControl\n}\n\nexport function ShapeControlValue({ definition, data, children, control }: ShapeControlValueProps) {\n  return Object.entries(definition.config.type).reduceRight(\n    (renderFn, [key, controlDefinition]) =>\n      shapeControlValue => (\n        <ControlValue\n          definition={controlDefinition}\n          data={data?.[key]}\n          control={control?.child(key)}\n        >\n          {value => renderFn({ ...shapeControlValue, [key]: value })}\n        </ControlValue>\n      ),\n    children,\n  )({} as ResolvedValueType<ShapeDefinition>)\n}\n"],"mappings":"AAiBQ;AAbR,SAAS,oBAAoB;AAStB,SAAS,kBAAkB,EAAE,YAAY,MAAM,UAAU,QAAQ,GAA2B;AACjG,SAAO,OAAO,QAAQ,WAAW,OAAO,IAAI,EAAE;AAAA,IAC5C,CAAC,UAAU,CAAC,KAAK,iBAAiB,MAChC,uBACE;AAAA,MAAC;AAAA;AAAA,QACC,YAAY;AAAA,QACZ,MAAM,OAAO,GAAG;AAAA,QAChB,SAAS,SAAS,MAAM,GAAG;AAAA,QAE1B,qBAAS,SAAS,EAAE,GAAG,mBAAmB,CAAC,GAAG,GAAG,MAAM,CAAC;AAAA;AAAA,IAC3D;AAAA,IAEJ;AAAA,EACF,EAAE,CAAC,CAAuC;AAC5C;","names":[]}

package/dist/esm/runtimes/react/controls/style-v2.js

@@ -0,0 +1,72 @@
+import { jsx } from "react/jsx-runtime";
+import { useStyle } from "../use-style";
+import {
+  findBreakpointOverride,
+  getBaseBreakpoint,
+  getBreakpointMediaQuery,
+  mergeOrCoalesceFallbacks
+} from "../../../state/modules/breakpoints";
+import { ControlValue } from "./control";
+import { RenderHook } from "../components";
+import { useBreakpoints } from "../hooks/use-breakpoints";
+function useStyleControlCssObject(styleControlData, controlDefinition) {
+  const breakpoints = useBreakpoints();
+  return {
+    ...controlDefinition.config.getStyle(
+      findBreakpointOverride(
+        breakpoints,
+        styleControlData,
+        getBaseBreakpoint(breakpoints).id,
+        mergeOrCoalesceFallbacks
+      )?.value
+    ),
+    ...breakpoints.reduce((styles, breakpoint) => {
+      return {
+        ...styles,
+        [getBreakpointMediaQuery(breakpoint)]: controlDefinition.config.getStyle(
+          findBreakpointOverride(
+            breakpoints,
+            styleControlData,
+            breakpoint.id,
+            mergeOrCoalesceFallbacks
+          )?.value
+        )
+      };
+    }, {})
+  };
+}
+function useFormattedStyleV2(styleControlData, controlDefinition) {
+  const styles = useStyleControlCssObject(styleControlData, controlDefinition);
+  return useStyle(styles);
+}
+function StyleV2ControlValue({
+  definition,
+  data,
+  children,
+  control
+}) {
+  return (data ?? []).reduceRight(
+    (renderFn, { deviceId, value }) => (responsiveValue) => {
+      return /* @__PURE__ */ jsx(ControlValue, { definition: definition.config.type, data: value, control: control?.child(), children: (value2) => renderFn([
+        { deviceId, value: value2 },
+        ...responsiveValue
+      ]) });
+    },
+    (value) => {
+      return /* @__PURE__ */ jsx(
+        RenderHook,
+        {
+          hook: useFormattedStyleV2,
+          parameters: [value, definition],
+          children: (value2) => children(value2)
+        },
+        definition.controlType
+      );
+    }
+  )([]);
+}
+export {
+  StyleV2ControlValue,
+  useFormattedStyleV2
+};
+//# sourceMappingURL=style-v2.js.map

package/dist/esm/runtimes/react/controls/style-v2.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/runtimes/react/controls/style-v2.tsx"],"sourcesContent":["import { CSSObject } from '@emotion/css'\nimport {\n  type ResponsiveValue,\n  type ResolvedValueType,\n  type DataType,\n  type DeviceOverride,\n} from '@makeswift/controls'\n\nimport { StyleV2Definition, StyleV2Control } from '../../../controls/style-v2/style-v2'\n\nimport { useStyle } from '../use-style'\nimport {\n  findBreakpointOverride,\n  getBaseBreakpoint,\n  getBreakpointMediaQuery,\n  mergeOrCoalesceFallbacks,\n} from '../../../state/modules/breakpoints'\n\nimport { ControlValue } from './control'\nimport { RenderHook } from '../components'\nimport { useBreakpoints } from '../hooks/use-breakpoints'\n\nfunction useStyleControlCssObject(\n  styleControlData: ResponsiveValue<ResolvedValueType<StyleV2Definition>>,\n  controlDefinition: StyleV2Definition,\n): CSSObject {\n  const breakpoints = useBreakpoints()\n\n  return {\n    ...controlDefinition.config.getStyle(\n      findBreakpointOverride(\n        breakpoints,\n        styleControlData,\n        getBaseBreakpoint(breakpoints).id,\n        mergeOrCoalesceFallbacks,\n      )?.value,\n    ),\n    ...breakpoints.reduce((styles, breakpoint) => {\n      return {\n        ...styles,\n        [getBreakpointMediaQuery(breakpoint)]: controlDefinition.config.getStyle(\n          findBreakpointOverride(\n            breakpoints,\n            styleControlData,\n            breakpoint.id,\n            mergeOrCoalesceFallbacks,\n          )?.value,\n        ),\n      }\n    }, {}),\n  }\n}\n\nexport function useFormattedStyleV2(\n  styleControlData: ResponsiveValue<ResolvedValueType<StyleV2Definition>>,\n  controlDefinition: StyleV2Definition,\n): ResolvedValueType<StyleV2Definition> {\n  const styles = useStyleControlCssObject(styleControlData, controlDefinition)\n\n  return useStyle(styles)\n}\n\ntype ValueProps = {\n  definition: StyleV2Definition\n  data: DataType<StyleV2Definition> | undefined\n  children(value: string): JSX.Element\n  control?: StyleV2Control\n}\n\nexport function StyleV2ControlValue({\n  definition,\n  data,\n  children,\n  control,\n}: ValueProps): JSX.Element {\n  return (data ?? []).reduceRight(\n    (renderFn, { deviceId, value }: DeviceOverride<DataType<StyleV2Definition>>) =>\n      responsiveValue => {\n        return (\n          <ControlValue definition={definition.config.type} data={value} control={control?.child()}>\n            {value =>\n              renderFn([\n                { deviceId, value: value as ResolvedValueType<typeof definition.config.type> },\n                ...responsiveValue,\n              ])\n            }\n          </ControlValue>\n        )\n      },\n    (value: ResponsiveValue<ResolvedValueType<StyleV2Definition>>) => {\n      return (\n        <RenderHook\n          key={definition.controlType}\n          hook={useFormattedStyleV2}\n          parameters={[value, definition]}\n        >\n          {value => children(value)}\n        </RenderHook>\n      )\n    },\n  )([])\n}\n"],"mappings":"AA+EU;AArEV,SAAS,gBAAgB;AACzB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,oBAAoB;AAC7B,SAAS,kBAAkB;AAC3B,SAAS,sBAAsB;AAE/B,SAAS,yBACP,kBACA,mBACW;AACX,QAAM,cAAc,eAAe;AAEnC,SAAO;AAAA,IACL,GAAG,kBAAkB,OAAO;AAAA,MAC1B;AAAA,QACE;AAAA,QACA;AAAA,QACA,kBAAkB,WAAW,EAAE;AAAA,QAC/B;AAAA,MACF,GAAG;AAAA,IACL;AAAA,IACA,GAAG,YAAY,OAAO,CAAC,QAAQ,eAAe;AAC5C,aAAO;AAAA,QACL,GAAG;AAAA,QACH,CAAC,wBAAwB,UAAU,CAAC,GAAG,kBAAkB,OAAO;AAAA,UAC9D;AAAA,YACE;AAAA,YACA;AAAA,YACA,WAAW;AAAA,YACX;AAAA,UACF,GAAG;AAAA,QACL;AAAA,MACF;AAAA,IACF,GAAG,CAAC,CAAC;AAAA,EACP;AACF;AAEO,SAAS,oBACd,kBACA,mBACsC;AACtC,QAAM,SAAS,yBAAyB,kBAAkB,iBAAiB;AAE3E,SAAO,SAAS,MAAM;AACxB;AASO,SAAS,oBAAoB;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA4B;AAC1B,UAAQ,QAAQ,CAAC,GAAG;AAAA,IAClB,CAAC,UAAU,EAAE,UAAU,MAAM,MAC3B,qBAAmB;AACjB,aACE,oBAAC,gBAAa,YAAY,WAAW,OAAO,MAAM,MAAM,OAAO,SAAS,SAAS,MAAM,GACpF,WAAAA,WACC,SAAS;AAAA,QACP,EAAE,UAAU,OAAOA,OAA0D;AAAA,QAC7E,GAAG;AAAA,MACL,CAAC,GAEL;AAAA,IAEJ;AAAA,IACF,CAAC,UAAiE;AAChE,aACE;AAAA,QAAC;AAAA;AAAA,UAEC,MAAM;AAAA,UACN,YAAY,CAAC,OAAO,UAAU;AAAA,UAE7B,WAAAA,WAAS,SAASA,MAAK;AAAA;AAAA,QAJnB,WAAW;AAAA,MAKlB;AAAA,IAEJ;AAAA,EACF,EAAE,CAAC,CAAC;AACN;","names":["value"]}

package/dist/esm/runtimes/react/controls/text-area.js

@@ -0,0 +1,13 @@
+import { match } from "ts-pattern";
+import {
+  TextAreaControlDataTypeKey,
+  TextAreaControlDataTypeValueV1
+} from "@makeswift/controls";
+function useTextAreaValue(data, definition) {
+  const value = match(data).with({ [TextAreaControlDataTypeKey]: TextAreaControlDataTypeValueV1 }, (val) => val.value).otherwise((val) => val) ?? definition.config.defaultValue;
+  return value;
+}
+export {
+  useTextAreaValue
+};
+//# sourceMappingURL=text-area.js.map

package/dist/esm/runtimes/react/controls/text-area.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/runtimes/react/controls/text-area.ts"],"sourcesContent":["import { match } from 'ts-pattern'\nimport {\n  TextAreaControlData,\n  TextAreaControlDataTypeKey,\n  TextAreaControlDataTypeValueV1,\n  TextAreaControlDefinition,\n} from '@makeswift/controls'\n\nexport type TextAreaControlValue<T extends TextAreaControlDefinition> =\n  undefined extends T['config']['defaultValue'] ? string | undefined : string\n\nexport function useTextAreaValue<T extends TextAreaControlDefinition>(\n  data: TextAreaControlData | undefined,\n  definition: T,\n): TextAreaControlValue<T> {\n  const value: string | undefined =\n    match(data)\n      .with({ [TextAreaControlDataTypeKey]: TextAreaControlDataTypeValueV1 }, val => val.value)\n      .otherwise(val => val) ?? definition.config.defaultValue\n\n  return value as TextAreaControlValue<T>\n}\n"],"mappings":"AAAA,SAAS,aAAa;AACtB;AAAA,EAEE;AAAA,EACA;AAAA,OAEK;AAKA,SAAS,iBACd,MACA,YACyB;AACzB,QAAM,QACJ,MAAM,IAAI,EACP,KAAK,EAAE,CAAC,0BAA0B,GAAG,+BAA+B,GAAG,SAAO,IAAI,KAAK,EACvF,UAAU,SAAO,GAAG,KAAK,WAAW,OAAO;AAEhD,SAAO;AACT;","names":[]}

package/dist/esm/runtimes/react/controls/text-input.js

@@ -0,0 +1,13 @@
+import { match } from "ts-pattern";
+import {
+  TextInputControlDataTypeKey,
+  TextInputControlDataTypeValueV1
+} from "@makeswift/controls";
+function useTextInputValue(data, definition) {
+  const value = match(data).with({ [TextInputControlDataTypeKey]: TextInputControlDataTypeValueV1 }, (val) => val.value).otherwise((val) => val) ?? definition.config.defaultValue;
+  return value;
+}
+export {
+  useTextInputValue
+};
+//# sourceMappingURL=text-input.js.map

package/dist/esm/runtimes/react/controls/text-input.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/runtimes/react/controls/text-input.ts"],"sourcesContent":["import { match } from 'ts-pattern'\nimport {\n  TextInputControlData,\n  TextInputControlDataTypeKey,\n  TextInputControlDataTypeValueV1,\n  TextInputControlDefinition,\n} from '@makeswift/controls'\n\nexport type TextInputControlValue<T extends TextInputControlDefinition> =\n  undefined extends T['config']['defaultValue'] ? string | undefined : string\n\nexport function useTextInputValue<T extends TextInputControlDefinition>(\n  data: TextInputControlData | undefined,\n  definition: T,\n): TextInputControlValue<T> {\n  const value: string | undefined =\n    match(data)\n      .with({ [TextInputControlDataTypeKey]: TextInputControlDataTypeValueV1 }, val => val.value)\n      .otherwise(val => val) ?? definition.config.defaultValue\n\n  return value as TextInputControlValue<T>\n}\n"],"mappings":"AAAA,SAAS,aAAa;AACtB;AAAA,EAEE;AAAA,EACA;AAAA,OAEK;AAKA,SAAS,kBACd,MACA,YAC0B;AAC1B,QAAM,QACJ,MAAM,IAAI,EACP,KAAK,EAAE,CAAC,2BAA2B,GAAG,gCAAgC,GAAG,SAAO,IAAI,KAAK,EACzF,UAAU,SAAO,GAAG,KAAK,WAAW,OAAO;AAEhD,SAAO;AACT;","names":[]}

package/dist/esm/runtimes/react/hooks/use-document-key.js

@@ -0,0 +1,11 @@
+"use client";
+import { createContext, useContext } from "react";
+const DocumentContext = createContext(null);
+function useDocumentKey() {
+  return useContext(DocumentContext);
+}
+export {
+  DocumentContext,
+  useDocumentKey
+};
+//# sourceMappingURL=use-document-key.js.map

package/dist/esm/runtimes/react/hooks/use-document-key.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/runtimes/react/hooks/use-document-key.ts"],"sourcesContent":["'use client'\n\nimport { createContext, useContext } from 'react'\n\nexport const DocumentContext = createContext<string | null>(null)\n\nexport function useDocumentKey(): string | null {\n  return useContext(DocumentContext)\n}\n"],"mappings":";AAEA,SAAS,eAAe,kBAAkB;AAEnC,MAAM,kBAAkB,cAA6B,IAAI;AAEzD,SAAS,iBAAgC;AAC9C,SAAO,WAAW,eAAe;AACnC;","names":[]}