@makeswift/runtime 0.13.1 → 0.14.1

package/dist/esm/runtimes/react/controls/rich-text-v2/EditableTextV2/useSyncDOMSelection.js

@@ -0,0 +1,39 @@
+import { Range as SlateRange } from "slate";
+import { useIsomorphicLayoutEffect } from "../../../../../components/hooks/useIsomorphicLayoutEffect";
+import { ReactEditor } from "slate-react";
+function useSyncDOMSelection(editor, isEnabled) {
+  useIsomorphicLayoutEffect(() => {
+    if (!isEnabled.current || editor.selection == null || ReactEditor.isFocused(editor))
+      return;
+    try {
+      const root = ReactEditor.findDocumentOrShadowRoot(editor);
+      const domSelection = root.getSelection();
+      const newDomRange = ReactEditor.toDOMRange(editor, editor.selection);
+      if (newDomRange) {
+        if (SlateRange.isBackward(editor.selection)) {
+          domSelection?.setBaseAndExtent(
+            newDomRange.endContainer,
+            newDomRange.endOffset,
+            newDomRange.startContainer,
+            newDomRange.startOffset
+          );
+        } else {
+          domSelection?.setBaseAndExtent(
+            newDomRange.startContainer,
+            newDomRange.startOffset,
+            newDomRange.endContainer,
+            newDomRange.endOffset
+          );
+        }
+      } else {
+        domSelection?.removeAllRanges();
+      }
+    } catch (e) {
+      console.error(e);
+    }
+  });
+}
+export {
+  useSyncDOMSelection
+};
+//# sourceMappingURL=useSyncDOMSelection.js.map

package/dist/esm/runtimes/react/controls/rich-text-v2/EditableTextV2/useSyncDOMSelection.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../src/runtimes/react/controls/rich-text-v2/EditableTextV2/useSyncDOMSelection.tsx"],"sourcesContent":["import { Editor, Range as SlateRange } from 'slate'\nimport { useIsomorphicLayoutEffect } from '../../../../../components/hooks/useIsomorphicLayoutEffect'\nimport { MutableRefObject } from 'react'\nimport { ReactEditor } from 'slate-react'\n\n/**\n * Clicking outside of the host blurs our `<Editable />`.\n * `<Editable />` only updates the DOM's selection to match slate when it is focused.\n * In the case of a panel being clicked this hook updates the DOM selection to match slate.\n */\nexport function useSyncDOMSelection(editor: Editor, isEnabled: MutableRefObject<boolean>) {\n  useIsomorphicLayoutEffect(() => {\n    if (!isEnabled.current || editor.selection == null || ReactEditor.isFocused(editor)) return\n    try {\n      const root = ReactEditor.findDocumentOrShadowRoot(editor) as Document\n      const domSelection = root.getSelection()\n      const newDomRange: Range | null = ReactEditor.toDOMRange(editor, editor.selection)\n\n      if (newDomRange) {\n        if (SlateRange.isBackward(editor.selection!)) {\n          domSelection?.setBaseAndExtent(\n            newDomRange.endContainer,\n            newDomRange.endOffset,\n            newDomRange.startContainer,\n            newDomRange.startOffset,\n          )\n        } else {\n          domSelection?.setBaseAndExtent(\n            newDomRange.startContainer,\n            newDomRange.startOffset,\n            newDomRange.endContainer,\n            newDomRange.endOffset,\n          )\n        }\n      } else {\n        domSelection?.removeAllRanges()\n      }\n    } catch (e) {\n      console.error(e)\n    }\n  })\n}\n"],"mappings":"AAAA,SAAiB,SAAS,kBAAkB;AAC5C,SAAS,iCAAiC;AAE1C,SAAS,mBAAmB;AAOrB,SAAS,oBAAoB,QAAgB,WAAsC;AACxF,4BAA0B,MAAM;AAC9B,QAAI,CAAC,UAAU,WAAW,OAAO,aAAa,QAAQ,YAAY,UAAU,MAAM;AAAG;AACrF,QAAI;AACF,YAAM,OAAO,YAAY,yBAAyB,MAAM;AACxD,YAAM,eAAe,KAAK,aAAa;AACvC,YAAM,cAA4B,YAAY,WAAW,QAAQ,OAAO,SAAS;AAEjF,UAAI,aAAa;AACf,YAAI,WAAW,WAAW,OAAO,SAAU,GAAG;AAC5C,wBAAc;AAAA,YACZ,YAAY;AAAA,YACZ,YAAY;AAAA,YACZ,YAAY;AAAA,YACZ,YAAY;AAAA,UACd;AAAA,QACF,OAAO;AACL,wBAAc;AAAA,YACZ,YAAY;AAAA,YACZ,YAAY;AAAA,YACZ,YAAY;AAAA,YACZ,YAAY;AAAA,UACd;AAAA,QACF;AAAA,MACF,OAAO;AACL,sBAAc,gBAAgB;AAAA,MAChC;AAAA,IACF,SAAS,GAAG;AACV,cAAQ,MAAM,CAAC;AAAA,IACjB;AAAA,EACF,CAAC;AACH;","names":[]}

package/dist/esm/runtimes/react/controls/rich-text-v2/ReadOnlyTextV2.js

@@ -0,0 +1,123 @@
+import { Fragment, jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import {
+  RichTextV2Mode
+} from "../../../../controls";
+import { useStyle } from "../../use-style";
+import {
+  BlockPlugin,
+  InlineModePlugin,
+  InlinePlugin,
+  LinkPlugin,
+  TextAlignPlugin,
+  TypographyPlugin,
+  toText
+} from "../../../../slate";
+import { ControlValue } from "../control";
+const ReadOnlyTextV2 = forwardRef(function ReadOnlyText({ text: { descendants }, definition }, ref) {
+  const descendantsAsString = toText(descendants, definition?.config.mode ?? RichTextV2Mode.Block);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      style: {
+        /**
+         * These are the default styles that Slate uses for its editable div.
+         * https://github.com/ianstormtaylor/slate/blob/4bd15ed3950e3a0871f5d0ecb391bb637c05e59d/packages/slate-react/src/components/editable.tsx
+         * Search for `disableDefaultStyles`
+         */
+        position: "relative",
+        whiteSpace: "pre-wrap",
+        wordWrap: "break-word"
+      },
+      children: descendantsAsString === "" ? /* @__PURE__ */ jsx(Placeholder, {}) : /* @__PURE__ */ jsx(
+        Descendants,
+        {
+          plugins: (
+            /**
+             * TODO: we are manually referencing our default plugins for each mode here because
+             * Referencing the real LinkPlugin causes a circular dependency.
+             * When circular dependencies calm down we should update the plugin definition to use real plugins,
+             * and just use the plugins that are defined by our config.
+             */
+            // definition?.config?.plugins ,
+            definition?.config?.mode === RichTextV2Mode.Inline ? [InlineModePlugin()] : [BlockPlugin(), TypographyPlugin(), TextAlignPlugin(), InlinePlugin(), LinkPlugin()]
+          ),
+          descendants
+        }
+      )
+    }
+  );
+});
+var ReadOnlyTextV2_default = ReadOnlyTextV2;
+function Placeholder({ text = "Write some text..." }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: useStyle({
+        display: "inline-block",
+        width: 0,
+        maxWidth: "100%",
+        whiteSpace: "nowrap",
+        opacity: 0.333,
+        verticalAlign: "text-top"
+      }),
+      children: text
+    }
+  );
+}
+function LeafComponent({ plugins, ...props }) {
+  function initialRenderLeaf({ leaf }) {
+    return /* @__PURE__ */ jsx("span", { className: leaf.className, children: leaf.text === "" ? "\uFEFF" : leaf.text });
+  }
+  const renderLeaf = plugins.reduce(
+    (renderFn, plugin) => (props2) => {
+      const { control, renderLeaf: renderLeaf2 } = plugin;
+      if (control?.definition == null || renderLeaf2 == null)
+        return renderFn(props2);
+      if (control.getLeafValue == null)
+        return renderLeaf2(renderFn, void 0)(props2);
+      return /* @__PURE__ */ jsx(ControlValue, { definition: control.definition, data: control.getLeafValue(props2.leaf), children: (value) => renderLeaf2(renderFn, value)(props2) });
+    },
+    initialRenderLeaf
+  );
+  return renderLeaf({ attributes: {}, leaf: props.leaf, children: null, text: props.leaf });
+}
+function ElementComponent({ plugins, ...props }) {
+  function initialRenderElement(props2) {
+    return /* @__PURE__ */ jsx(Descendants, { descendants: props2.element.children, plugins });
+  }
+  const renderElement = plugins.reduce(
+    (renderFn, plugin) => (props2) => {
+      const { control, renderElement: renderElement2 } = plugin;
+      if (control?.definition == null || renderElement2 == null)
+        return renderFn(props2);
+      if (control.getElementValue == null)
+        return renderElement2(renderFn, void 0)(props2);
+      return /* @__PURE__ */ jsx(ControlValue, { definition: control.definition, data: control.getElementValue(props2.element), children: (value) => renderElement2(renderFn, value)(props2) });
+    },
+    initialRenderElement
+  );
+  return renderElement({ attributes: {}, children: null, element: props.descendant });
+}
+function isText(node) {
+  if (typeof node === "object" && "text" in node)
+    return true;
+  return false;
+}
+function Descendants({
+  descendants,
+  plugins
+}) {
+  return /* @__PURE__ */ jsx(Fragment, { children: descendants.map((descendant, index) => {
+    if (isText(descendant)) {
+      return /* @__PURE__ */ jsx(LeafComponent, { plugins, leaf: descendant }, index);
+    }
+    return /* @__PURE__ */ jsx(ElementComponent, { descendant, plugins }, index);
+  }) });
+}
+export {
+  LeafComponent,
+  ReadOnlyTextV2_default as default
+};
+//# sourceMappingURL=ReadOnlyTextV2.js.map

package/dist/esm/runtimes/react/controls/rich-text-v2/ReadOnlyTextV2.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../src/runtimes/react/controls/rich-text-v2/ReadOnlyTextV2.tsx"],"sourcesContent":["import { ForwardedRef, forwardRef } from 'react'\nimport {\n  RichTextV2ControlData,\n  RichTextV2ControlDefinition,\n  RichTextV2Mode,\n} from '../../../../controls'\nimport { useStyle } from '../../use-style'\nimport { Descendant, Element, Text } from 'slate'\nimport {\n  BlockPlugin,\n  InlineModePlugin,\n  InlinePlugin,\n  LinkPlugin,\n  TextAlignPlugin,\n  TypographyPlugin,\n  toText,\n} from '../../../../slate'\nimport { ControlValue } from '../control'\nimport { RenderElementProps, RenderLeafProps } from 'slate-react'\nimport { RichTextV2Plugin } from '../../../../controls/rich-text-v2/plugin'\n\ntype Props = {\n  text: RichTextV2ControlData\n  definition: RichTextV2ControlDefinition | null\n}\n\nconst ReadOnlyTextV2 = forwardRef(function ReadOnlyText(\n  { text: { descendants }, definition }: Props,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const descendantsAsString = toText(descendants, definition?.config.mode ?? RichTextV2Mode.Block)\n\n  return (\n    <div\n      ref={ref}\n      style={{\n        /**\n         * These are the default styles that Slate uses for its editable div.\n         * https://github.com/ianstormtaylor/slate/blob/4bd15ed3950e3a0871f5d0ecb391bb637c05e59d/packages/slate-react/src/components/editable.tsx\n         * Search for `disableDefaultStyles`\n         */\n        position: 'relative',\n        whiteSpace: 'pre-wrap',\n        wordWrap: 'break-word',\n      }}\n    >\n      {descendantsAsString === '' ? (\n        <Placeholder />\n      ) : (\n        <Descendants\n          plugins={\n            /**\n             * TODO: we are manually referencing our default plugins for each mode here because\n             * Referencing the real LinkPlugin causes a circular dependency.\n             * When circular dependencies calm down we should update the plugin definition to use real plugins,\n             * and just use the plugins that are defined by our config.\n             */\n            // definition?.config?.plugins ,\n            definition?.config?.mode === RichTextV2Mode.Inline\n              ? [InlineModePlugin()]\n              : [BlockPlugin(), TypographyPlugin(), TextAlignPlugin(), InlinePlugin(), LinkPlugin()]\n          }\n          descendants={descendants}\n        />\n      )}\n    </div>\n  )\n})\n\nexport default ReadOnlyTextV2\n\nfunction Placeholder({ text = 'Write some text...' }: { text?: string }) {\n  return (\n    <span\n      className={useStyle({\n        display: 'inline-block',\n        width: 0,\n        maxWidth: '100%',\n        whiteSpace: 'nowrap',\n        opacity: 0.333,\n        verticalAlign: 'text-top',\n      })}\n    >\n      {text}\n    </span>\n  )\n}\n\ntype LeafProps = {\n  leaf: Text\n  plugins: RichTextV2Plugin[]\n}\n\nexport function LeafComponent({ plugins, ...props }: LeafProps) {\n  function initialRenderLeaf({ leaf }: RenderLeafProps) {\n    return <span className={leaf.className}>{leaf.text === '' ? '\\uFEFF' : leaf.text}</span>\n  }\n\n  const renderLeaf = plugins.reduce(\n    (renderFn, plugin) => (props: RenderLeafProps) => {\n      const { control, renderLeaf } = plugin\n\n      if (control?.definition == null || renderLeaf == null) return renderFn(props)\n\n      if (control.getLeafValue == null) return renderLeaf(renderFn, undefined)(props)\n\n      return (\n        <ControlValue definition={control.definition} data={control.getLeafValue(props.leaf)}>\n          {value => renderLeaf(renderFn, value)(props)}\n        </ControlValue>\n      )\n    },\n    initialRenderLeaf,\n  )\n\n  return renderLeaf({ attributes: {} as any, leaf: props.leaf, children: null, text: props.leaf })\n}\n\ntype ElementProps = {\n  descendant: Element\n  plugins: RichTextV2Plugin[]\n}\n\nfunction ElementComponent({ plugins, ...props }: ElementProps) {\n  function initialRenderElement(props: RenderElementProps) {\n    return <Descendants descendants={props.element.children} plugins={plugins} />\n  }\n\n  const renderElement = plugins.reduce(\n    (renderFn, plugin) => (props: RenderElementProps) => {\n      const { control, renderElement } = plugin\n\n      if (control?.definition == null || renderElement == null) return renderFn(props)\n\n      if (control.getElementValue == null) return renderElement(renderFn, undefined)(props)\n\n      return (\n        <ControlValue definition={control.definition} data={control.getElementValue(props.element)}>\n          {value => renderElement(renderFn, value)(props)}\n        </ControlValue>\n      )\n    },\n    initialRenderElement,\n  )\n\n  return renderElement({ attributes: {} as any, children: null, element: props.descendant })\n}\n\n// reimplemented from slate source for code splitting\nfunction isText(node: Descendant): node is Text {\n  if (typeof node === 'object' && 'text' in node) return true\n\n  return false\n}\n\nfunction Descendants({\n  descendants,\n  plugins,\n}: {\n  plugins: RichTextV2Plugin[]\n  descendants: Descendant[]\n}) {\n  return (\n    <>\n      {descendants.map((descendant, index) => {\n        if (isText(descendant)) {\n          return <LeafComponent key={index} plugins={plugins} leaf={descendant} />\n        }\n\n        return <ElementComponent key={index} descendant={descendant} plugins={plugins} />\n      })}\n    </>\n  )\n}\n"],"mappings":"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","names":["props","renderLeaf","renderElement"]}

package/dist/esm/runtimes/react/controls/rich-text-v2/index.js

@@ -0,0 +1,2 @@
+export * from "./rich-text-v2";
+//# sourceMappingURL=index.js.map

package/dist/esm/runtimes/react/controls/rich-text-v2/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../src/runtimes/react/controls/rich-text-v2/index.ts"],"sourcesContent":["export * from './rich-text-v2'\n"],"mappings":"AAAA,cAAc;","names":[]}

package/dist/esm/runtimes/react/controls/rich-text-v2/rich-text-v2.js

@@ -0,0 +1,27 @@
+import { jsx } from "react/jsx-runtime";
+import {
+  isRichTextV1Data
+} from "../../../../controls";
+import { useIsPreview } from "../../../react";
+import { forwardNextDynamicRef } from "../../../../next/dynamic";
+import dynamic from "next/dynamic";
+const EditableText = forwardNextDynamicRef(
+  (patch) => dynamic(() => patch(import("./EditableTextV2")))
+);
+const ReadOnlyText = forwardNextDynamicRef(
+  (patch) => dynamic(() => patch(import("./ReadOnlyTextV2")))
+);
+const ReadOnlyTextV1 = forwardNextDynamicRef(
+  (patch) => dynamic(() => patch(import("../rich-text/ReadOnlyText")))
+);
+function useRichTextV2(data, definition, control) {
+  const isPreview = useIsPreview();
+  if (isRichTextV1Data(data)) {
+    return /* @__PURE__ */ jsx(ReadOnlyTextV1, { text: data });
+  }
+  return isPreview ? /* @__PURE__ */ jsx(EditableText, { text: data, definition, control }) : /* @__PURE__ */ jsx(ReadOnlyText, { text: data, definition });
+}
+export {
+  useRichTextV2
+};
+//# sourceMappingURL=rich-text-v2.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../src/runtimes/react/controls/rich-text-v2/rich-text-v2.tsx"],"sourcesContent":["import { ReactNode } from 'react'\n\nimport {\n  RichTextControlData,\n  RichTextV2Control,\n  RichTextV2ControlData,\n  RichTextV2ControlDefinition,\n  isRichTextV1Data,\n} from '../../../../controls'\nimport { useIsPreview } from '../../../react'\nimport { forwardNextDynamicRef } from '../../../../next/dynamic'\nimport dynamic from 'next/dynamic'\n\nexport type RichTextV2ControlValue = ReactNode\n\nexport type Descriptors = { text?: RichTextV2ControlDefinition }\n\nconst EditableText = forwardNextDynamicRef(patch =>\n  dynamic(() => patch(import('./EditableTextV2'))),\n)\nconst ReadOnlyText = forwardNextDynamicRef(patch =>\n  dynamic(() => patch(import('./ReadOnlyTextV2'))),\n)\n\nconst ReadOnlyTextV1 = forwardNextDynamicRef(patch =>\n  dynamic(() => patch(import('../rich-text/ReadOnlyText'))),\n)\n\nexport function useRichTextV2(\n  data: RichTextV2ControlData | RichTextControlData,\n  definition: RichTextV2ControlDefinition,\n  control: RichTextV2Control | null,\n) {\n  const isPreview = useIsPreview()\n\n  if (isRichTextV1Data(data)) {\n    return <ReadOnlyTextV1 text={data} />\n  }\n\n  return isPreview ? (\n    <EditableText text={data} definition={definition} control={control} />\n  ) : (\n    <ReadOnlyText text={data} definition={definition} />\n  )\n}\n"],"mappings":"AAoCW;AAlCX;AAAA,EAKE;AAAA,OACK;AACP,SAAS,oBAAoB;AAC7B,SAAS,6BAA6B;AACtC,OAAO,aAAa;AAMpB,MAAM,eAAe;AAAA,EAAsB,WACzC,QAAQ,MAAM,MAAM,OAAO,kBAAkB,CAAC,CAAC;AACjD;AACA,MAAM,eAAe;AAAA,EAAsB,WACzC,QAAQ,MAAM,MAAM,OAAO,kBAAkB,CAAC,CAAC;AACjD;AAEA,MAAM,iBAAiB;AAAA,EAAsB,WAC3C,QAAQ,MAAM,MAAM,OAAO,2BAA2B,CAAC,CAAC;AAC1D;AAEO,SAAS,cACd,MACA,YACA,SACA;AACA,QAAM,YAAY,aAAa;AAE/B,MAAI,iBAAiB,IAAI,GAAG;AAC1B,WAAO,oBAAC,kBAAe,MAAM,MAAM;AAAA,EACrC;AAEA,SAAO,YACL,oBAAC,gBAAa,MAAM,MAAM,YAAwB,SAAkB,IAEpE,oBAAC,gBAAa,MAAM,MAAM,YAAwB;AAEtD;","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,25 @@
+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?.controls.get(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 { ShapeControl, ShapeControlData, ShapeControlDefinition } from '../../../controls/shape'\nimport { ControlDefinitionValue, ControlValue } from './control'\n\nexport type ShapeControlValue<T extends ShapeControlDefinition> = {\n  [K in keyof T['config']['type']]: ControlDefinitionValue<T['config']['type'][K]>\n}\n\ntype ShapeControlValueProps<T extends ShapeControlDefinition> = {\n  definition: T\n  data: ShapeControlData<T> | undefined\n  children(value: ShapeControlValue<T>): JSX.Element\n  control: ShapeControl\n}\n\nexport function ShapeControlValue<T extends ShapeControlDefinition>({\n  definition,\n  data,\n  children,\n  control,\n}: ShapeControlValueProps<T>) {\n  return Object.entries(definition.config.type).reduceRight(\n    (renderFn, [key, controlDefinition]) =>\n      shapeControlValue =>\n        (\n          <ControlValue\n            definition={controlDefinition}\n            data={data?.[key]}\n            control={control?.controls.get(key)}\n          >\n            {value => renderFn({ ...shapeControlValue, [key]: value })}\n          </ControlValue>\n        ),\n    children,\n  )({} as ShapeControlValue<T>)\n}\n"],"mappings":"AAwBU;AAvBV,SAAiC,oBAAoB;AAa9C,SAAS,kBAAoD;AAAA,EAClE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA8B;AAC5B,SAAO,OAAO,QAAQ,WAAW,OAAO,IAAI,EAAE;AAAA,IAC5C,CAAC,UAAU,CAAC,KAAK,iBAAiB,MAChC,uBAEI;AAAA,MAAC;AAAA;AAAA,QACC,YAAY;AAAA,QACZ,MAAM,OAAO,GAAG;AAAA,QAChB,SAAS,SAAS,SAAS,IAAI,GAAG;AAAA,QAEjC,qBAAS,SAAS,EAAE,GAAG,mBAAmB,CAAC,GAAG,GAAG,MAAM,CAAC;AAAA;AAAA,IAC3D;AAAA,IAEN;AAAA,EACF,EAAE,CAAC,CAAyB;AAC9B;","names":[]}

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

@@ -0,0 +1,121 @@
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { Element } from "../components/Element";
+import { getIndexes } from "../../../components/utils/columns";
+import { useResponsiveStyle } from "../../../components/utils/responsive-style";
+import { useStyle } from "../use-style";
+import { cx } from "@emotion/css";
+import { pollBoxModel } from "../poll-box-model";
+function useSlot(data, control) {
+  if (data == null || data.elements.length === 0) {
+    return /* @__PURE__ */ jsx(Slot.Placeholder, { control });
+  }
+  return /* @__PURE__ */ jsx(Slot, { control, children: data.elements.map((element, i) => /* @__PURE__ */ jsx(Slot.Item, { control, grid: data.columns, index: i, children: /* @__PURE__ */ jsx(Element, { element }) }, element.key)) });
+}
+function Slot({
+  as,
+  control,
+  children,
+  className,
+  ...restOfProps
+}) {
+  const As = as ?? "div";
+  const [element, setElement] = useState(null);
+  const baseClassName = useStyle({
+    display: "flex",
+    flexWrap: "wrap",
+    width: "100%"
+  });
+  useEffect(() => {
+    if (element == null || control == null)
+      return;
+    return pollBoxModel({
+      element,
+      onBoxModelChange: (boxModel) => control.changeContainerBoxModel(boxModel)
+    });
+  }, [element, control]);
+  return /* @__PURE__ */ jsx(As, { ...restOfProps, ref: setElement, className: cx(baseClassName, className), children });
+}
+Slot.Placeholder = SlotPlaceholder;
+Slot.Item = SlotItem;
+function SlotItem({
+  as,
+  control,
+  grid,
+  index,
+  children,
+  className,
+  ...restOfProps
+}) {
+  const As = as ?? "div";
+  const [element, setElement] = useState(null);
+  const baseClassName = useStyle({
+    display: "flex",
+    ...useResponsiveStyle([grid], ([{ count = 12, spans = [[12]] } = {}]) => {
+      const [rowIndex, columnIndex] = getIndexes(spans, index);
+      const span = spans[rowIndex][columnIndex];
+      const flexBasis = `calc(100% * ${(span / count).toFixed(5)})`;
+      return span === 0 ? { display: "none" } : { flexBasis, minWidth: flexBasis };
+    })
+  });
+  useEffect(() => {
+    if (element == null || control == null)
+      return;
+    return pollBoxModel({
+      element,
+      onBoxModelChange: (boxModel) => control.changeItemBoxModel(index, boxModel)
+    });
+  }, [element, control, index]);
+  return /* @__PURE__ */ jsx(As, { ...restOfProps, ref: setElement, className: cx(baseClassName, className), children });
+}
+function SlotPlaceholder({ control }) {
+  const [element, setElement] = useState(null);
+  useEffect(() => {
+    if (element == null || control == null)
+      return;
+    return pollBoxModel({
+      element,
+      onBoxModelChange: (boxModel) => control.changeContainerBoxModel(boxModel)
+    });
+  }, [element, control]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: setElement,
+      className: useStyle({
+        width: "100%",
+        background: "rgba(161, 168, 194, 0.18)",
+        height: "80px"
+      }),
+      children: /* @__PURE__ */ jsx(
+        "svg",
+        {
+          xmlns: "http://www.w3.org/2000/svg",
+          width: "100%",
+          height: "100%",
+          className: useStyle({ overflow: "visible", padding: 8 }),
+          children: /* @__PURE__ */ jsx(
+            "rect",
+            {
+              x: 0,
+              y: 0,
+              width: "100%",
+              height: "100%",
+              strokeWidth: 2,
+              strokeDasharray: "4 2",
+              fill: "none",
+              stroke: "rgba(161, 168, 194, 0.40)",
+              rx: "4",
+              ry: "4"
+            }
+          )
+        }
+      )
+    }
+  );
+}
+export {
+  Slot,
+  useSlot
+};
+//# sourceMappingURL=slot.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/runtimes/react/controls/slot.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, ElementType, ReactNode, useEffect, useState } from 'react'\nimport { SlotControl, SlotControlData } from '../../../controls'\n\nimport { Element } from '../components/Element'\nimport { getIndexes } from '../../../components/utils/columns'\nimport { useResponsiveStyle } from '../../../components/utils/responsive-style'\nimport { useStyle } from '../use-style'\nimport { cx } from '@emotion/css'\nimport { pollBoxModel } from '../poll-box-model'\n\nexport type SlotControlValue = ReactNode\n\nexport function useSlot(data: SlotControlData, control: SlotControl | null) {\n  // TODO(miguel): While the UI shouldn't allow the state, we should probably check that at least\n  // one element is visible.\n  if (data == null || data.elements.length === 0) {\n    return <Slot.Placeholder control={control} />\n  }\n\n  return (\n    <Slot control={control}>\n      {data.elements.map((element, i) => (\n        <Slot.Item key={element.key} control={control} grid={data.columns} index={i}>\n          <Element element={element} />\n        </Slot.Item>\n      ))}\n    </Slot>\n  )\n}\n\ntype SlotProps<T extends ElementType> = {\n  as?: T\n  control: SlotControl | null\n  children?: ReactNode\n  className?: string\n}\n\nexport function Slot<T extends ElementType = 'div'>({\n  as,\n  control,\n  children,\n  className,\n  ...restOfProps\n}: SlotProps<T> & Omit<ComponentPropsWithoutRef<T>, keyof SlotProps<T>>) {\n  const As = as ?? 'div'\n  const [element, setElement] = useState<Element | null>(null)\n  const baseClassName = useStyle({\n    display: 'flex',\n    flexWrap: 'wrap',\n    width: '100%',\n  })\n\n  useEffect(() => {\n    if (element == null || control == null) return\n\n    return pollBoxModel({\n      element,\n      onBoxModelChange: boxModel => control.changeContainerBoxModel(boxModel),\n    })\n  }, [element, control])\n\n  return (\n    <As {...restOfProps} ref={setElement} className={cx(baseClassName, className)}>\n      {children}\n    </As>\n  )\n}\n\nSlot.Placeholder = SlotPlaceholder\n\nSlot.Item = SlotItem\n\ntype SlotItemProps<T extends ElementType> = {\n  as?: T\n  control: SlotControl | null\n  grid: SlotControlData['columns']\n  index: number\n  children?: ReactNode\n  className?: string\n}\n\nfunction SlotItem<T extends ElementType = 'div'>({\n  as,\n  control,\n  grid,\n  index,\n  children,\n  className,\n  ...restOfProps\n}: SlotItemProps<T> & Omit<ComponentPropsWithoutRef<T>, keyof SlotItemProps<T>>): JSX.Element {\n  const As = as ?? 'div'\n  const [element, setElement] = useState<Element | null>(null)\n  const baseClassName = useStyle({\n    display: 'flex',\n    ...useResponsiveStyle([grid], ([{ count = 12, spans = [[12]] } = {}]) => {\n      const [rowIndex, columnIndex] = getIndexes(spans, index)\n      const span = spans[rowIndex][columnIndex]\n      const flexBasis = `calc(100% * ${(span / count).toFixed(5)})`\n\n      return span === 0 ? { display: 'none' } : { flexBasis, minWidth: flexBasis }\n    }),\n  })\n\n  useEffect(() => {\n    if (element == null || control == null) return\n\n    return pollBoxModel({\n      element,\n      onBoxModelChange: boxModel => control.changeItemBoxModel(index, boxModel),\n    })\n  }, [element, control, index])\n\n  return (\n    <As {...restOfProps} ref={setElement} className={cx(baseClassName, className)}>\n      {children}\n    </As>\n  )\n}\n\ntype SlotPlaceholderProps = {\n  control: SlotControl | null\n}\n\nfunction SlotPlaceholder({ control }: SlotPlaceholderProps): JSX.Element {\n  const [element, setElement] = useState<Element | null>(null)\n\n  useEffect(() => {\n    if (element == null || control == null) return\n\n    return pollBoxModel({\n      element,\n      onBoxModelChange: boxModel => control.changeContainerBoxModel(boxModel),\n    })\n  }, [element, control])\n\n  return (\n    <div\n      ref={setElement}\n      className={useStyle({\n        width: '100%',\n        background: 'rgba(161, 168, 194, 0.18)',\n        height: '80px',\n      })}\n    >\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"100%\"\n        height=\"100%\"\n        className={useStyle({ overflow: 'visible', padding: 8 })}\n      >\n        <rect\n          x={0}\n          y={0}\n          width=\"100%\"\n          height=\"100%\"\n          strokeWidth={2}\n          strokeDasharray=\"4 2\"\n          fill=\"none\"\n          stroke=\"rgba(161, 168, 194, 0.40)\"\n          rx=\"4\"\n          ry=\"4\"\n        />\n      </svg>\n    </div>\n  )\n}\n"],"mappings":"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","names":[]}

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

@@ -0,0 +1,77 @@
+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, deviceOverrideData) => (responsiveValue) => {
+      return /* @__PURE__ */ jsx(
+        ControlValue,
+        {
+          definition: definition.config.type,
+          data: deviceOverrideData.value,
+          control: control?.control,
+          children: (value) => renderFn([{ ...deviceOverrideData, value }, ...responsiveValue])
+        }
+      );
+    },
+    (value) => {
+      return /* @__PURE__ */ jsx(
+        RenderHook,
+        {
+          hook: useFormattedStyleV2,
+          parameters: [value, definition],
+          children: (value2) => children(value2)
+        },
+        definition.type
+      );
+    }
+  )([]);
+}
+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 { StyleV2Control, StyleV2ControlData, StyleV2ControlDefinition } from '../../../controls'\nimport { useStyle } from '../use-style'\nimport {\n  findBreakpointOverride,\n  getBaseBreakpoint,\n  getBreakpointMediaQuery,\n  mergeOrCoalesceFallbacks,\n} from '../../../state/modules/breakpoints'\nimport { CSSObject } from '@emotion/css'\n\nimport { ControlDefinitionValue, ControlValue } from './control'\nimport { RenderHook } from '../components'\nimport { DeviceOverride } from '../../../controls/types'\nimport { useBreakpoints } from '../hooks/use-breakpoints'\n\nfunction useStyleControlCssObject(\n  styleControlData: StyleV2ControlData,\n  controlDefinition: StyleV2ControlDefinition,\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 type StyleV2ControlFormattedValue = string\n\nexport function useFormattedStyleV2<T extends StyleV2ControlDefinition>(\n  styleControlData: StyleV2ControlData,\n  controlDefinition: T,\n): StyleV2ControlFormattedValue {\n  const styles = useStyleControlCssObject(styleControlData, controlDefinition)\n\n  return useStyle(styles)\n}\n\ntype StyleV2ControlValueProps<T extends StyleV2ControlDefinition> = {\n  definition: T\n  data: StyleV2ControlData | undefined\n  children(value: string): JSX.Element\n  control?: StyleV2Control\n}\n\nexport function StyleV2ControlValue<T extends StyleV2ControlDefinition>({\n  definition,\n  data,\n  children,\n  control,\n}: StyleV2ControlValueProps<T>): JSX.Element {\n  return (data ?? []).reduceRight(\n    (renderFn, deviceOverrideData: DeviceOverride<any>) => responsiveValue => {\n      return (\n        <ControlValue\n          definition={definition.config.type}\n          data={deviceOverrideData.value}\n          control={control?.control}\n        >\n          {value => renderFn([{ ...deviceOverrideData, value }, ...responsiveValue])}\n        </ControlValue>\n      )\n    },\n    (value: StyleV2ControlData) => {\n      return (\n        <RenderHook\n          key={definition.type}\n          hook={useFormattedStyleV2}\n          parameters={[value, definition]}\n        >\n          {value => children(value as ControlDefinitionValue<T>)}\n        </RenderHook>\n      )\n    },\n  )([])\n}\n"],"mappings":"AAyEQ;AAxER,SAAS,gBAAgB;AACzB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAGP,SAAiC,oBAAoB;AACrD,SAAS,kBAAkB;AAE3B,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;AAIO,SAAS,oBACd,kBACA,mBAC8B;AAC9B,QAAM,SAAS,yBAAyB,kBAAkB,iBAAiB;AAE3E,SAAO,SAAS,MAAM;AACxB;AASO,SAAS,oBAAwD;AAAA,EACtE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA6C;AAC3C,UAAQ,QAAQ,CAAC,GAAG;AAAA,IAClB,CAAC,UAAU,uBAA4C,qBAAmB;AACxE,aACE;AAAA,QAAC;AAAA;AAAA,UACC,YAAY,WAAW,OAAO;AAAA,UAC9B,MAAM,mBAAmB;AAAA,UACzB,SAAS,SAAS;AAAA,UAEjB,qBAAS,SAAS,CAAC,EAAE,GAAG,oBAAoB,MAAM,GAAG,GAAG,eAAe,CAAC;AAAA;AAAA,MAC3E;AAAA,IAEJ;AAAA,IACA,CAAC,UAA8B;AAC7B,aACE;AAAA,QAAC;AAAA;AAAA,UAEC,MAAM;AAAA,UACN,YAAY,CAAC,OAAO,UAAU;AAAA,UAE7B,WAAAA,WAAS,SAASA,MAAkC;AAAA;AAAA,QAJhD,WAAW;AAAA,MAKlB;AAAA,IAEJ;AAAA,EACF,EAAE,CAAC,CAAC;AACN;","names":["value"]}

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

@@ -0,0 +1,119 @@
+import { useEffect, useId } from "react";
+import { useBorder } from "../../../components/hooks";
+import { colorToString } from "../../../components/utils/colorToString";
+import { useResponsiveStyle } from "../../../components/utils/responsive-style";
+import {
+  StyleControlProperty
+} from "../../../controls";
+import { useStyle } from "../use-style";
+import { lengthPercentageDataToString } from "../../../css/length-percentage";
+import { marginPropertyDataToStyle } from "../../../css/margin";
+import { paddingPropertyDataToStyle } from "../../../css/padding";
+import { getBox } from "../../../box-model";
+import deepEqual from "../../../utils/deepEqual";
+const defaultMargin = {
+  marginTop: 0,
+  marginRight: "auto",
+  marginBottom: 0,
+  marginLeft: "auto"
+};
+const defaultPadding = {
+  paddingTop: 0,
+  paddingRight: 0,
+  paddingBottom: 0,
+  paddingLeft: 0
+};
+function useStyleControlCssObject(style, controlDefinition) {
+  const { properties } = controlDefinition.config;
+  return {
+    ...properties.includes(StyleControlProperty.Width) && {
+      maxWidth: "100%"
+    },
+    ...useResponsiveStyle(
+      [
+        style?.width,
+        style?.margin,
+        style?.padding,
+        useBorder(style?.border),
+        style?.borderRadius,
+        style?.textStyle
+      ],
+      ([width, margin, padding, border, borderRadius, textStyle]) => ({
+        ...properties.includes(StyleControlProperty.Width) && {
+          width: widthToString(width) ?? "100%"
+        },
+        ...properties.includes(StyleControlProperty.Margin) && marginPropertyDataToStyle(margin ?? defaultMargin, defaultMargin),
+        ...properties.includes(StyleControlProperty.Padding) && paddingPropertyDataToStyle(padding ?? defaultPadding, defaultPadding),
+        ...properties.includes(StyleControlProperty.Border) && {
+          borderTop: borderSideToString(border?.borderTop) ?? "0 solid black",
+          borderRight: borderSideToString(border?.borderRight) ?? "0 solid black",
+          borderBottom: borderSideToString(border?.borderBottom) ?? "0 solid black",
+          borderLeft: borderSideToString(border?.borderLeft) ?? "0 solid black"
+        },
+        ...properties.includes(StyleControlProperty.BorderRadius) && {
+          borderTopLeftRadius: borderRadiusToString(borderRadius?.borderTopLeftRadius) ?? 0,
+          borderTopRightRadius: borderRadiusToString(borderRadius?.borderTopRightRadius) ?? 0,
+          borderBottomRightRadius: borderRadiusToString(borderRadius?.borderBottomRightRadius) ?? 0,
+          borderBottomLeftRadius: borderRadiusToString(borderRadius?.borderBottomLeftRadius) ?? 0
+        },
+        ...properties.includes(StyleControlProperty.TextStyle) && {
+          ...textStyle?.fontFamily && { fontFamily: `"${textStyle.fontFamily}"` },
+          ...textStyle?.letterSpacing && { letterSpacing: textStyle.letterSpacing },
+          ...textStyle?.fontSize && { fontSize: fontSizeToString(textStyle.fontSize) },
+          ...textStyle?.fontWeight && { fontWeight: textStyle.fontWeight },
+          textTransform: textStyle?.textTransform ?? [],
+          fontStyle: textStyle?.fontStyle ?? []
+        }
+      })
+    )
+  };
+  function widthToString(widthProperty) {
+    if (widthProperty == null)
+      return null;
+    return lengthPercentageDataToString(widthProperty);
+  }
+  function borderSideToString(borderSide) {
+    if (borderSide == null)
+      return null;
+    const { width, color, style: style2 } = borderSide;
+    return `${width != null ? width : 0}px ${style2} ${color != null ? colorToString(color) : "black"}`;
+  }
+  function borderRadiusToString(borderRadius) {
+    if (borderRadius == null)
+      return null;
+    return lengthPercentageDataToString(borderRadius);
+  }
+  function fontSizeToString(fontSize) {
+    return `${fontSize.value}${fontSize.unit}`;
+  }
+}
+function useFormattedStyle(styleControlData, controlDefinition, control) {
+  const style = useStyleControlCssObject(styleControlData, controlDefinition);
+  const guid = useId().replaceAll(":", "");
+  const styleClassName = useStyle(style);
+  const classNames = `${styleClassName} ${guid}`;
+  useEffect(() => {
+    let currentBoxModel = null;
+    const handleAnimationFrameRequest = () => {
+      if (control == null)
+        return;
+      const element = document.querySelector(`.${guid}`);
+      const measuredBoxModel = element == null ? null : getBox(element);
+      if (!deepEqual(currentBoxModel, measuredBoxModel)) {
+        currentBoxModel = measuredBoxModel;
+        control.changeBoxModel(currentBoxModel);
+      }
+      animationFrameHandle = requestAnimationFrame(handleAnimationFrameRequest);
+    };
+    let animationFrameHandle = requestAnimationFrame(handleAnimationFrameRequest);
+    return () => {
+      cancelAnimationFrame(animationFrameHandle);
+      control?.changeBoxModel(null);
+    };
+  }, [guid, control]);
+  return classNames;
+}
+export {
+  useFormattedStyle
+};
+//# sourceMappingURL=style.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/runtimes/react/controls/style.ts"],"sourcesContent":["import { CSSObject } from '@emotion/css'\nimport { useEffect, useId } from 'react'\n\nimport { useBorder, BorderSide } from '../../../components/hooks'\nimport { colorToString } from '../../../components/utils/colorToString'\nimport { useResponsiveStyle } from '../../../components/utils/responsive-style'\n\nimport {\n  FontSizePropertyData,\n  StyleControl,\n  StyleControlData,\n  StyleControlDefinition,\n  StyleControlProperty,\n  WidthPropertyData,\n} from '../../../controls'\nimport { useStyle } from '../use-style'\nimport { BorderRadiusLonghandPropertyData } from '../../../css/border-radius'\nimport { lengthPercentageDataToString } from '../../../css/length-percentage'\nimport { marginPropertyDataToStyle } from '../../../css/margin'\nimport { paddingPropertyDataToStyle } from '../../../css/padding'\nimport { BoxModel, getBox } from '../../../box-model'\nimport deepEqual from '../../../utils/deepEqual'\n\nconst defaultMargin = {\n  marginTop: 0,\n  marginRight: 'auto',\n  marginBottom: 0,\n  marginLeft: 'auto',\n}\n\nconst defaultPadding = {\n  paddingTop: 0,\n  paddingRight: 0,\n  paddingBottom: 0,\n  paddingLeft: 0,\n}\n\nfunction useStyleControlCssObject(\n  style: StyleControlData | undefined,\n  controlDefinition: StyleControlDefinition,\n): CSSObject {\n  const { properties } = controlDefinition.config\n\n  return {\n    ...(properties.includes(StyleControlProperty.Width) && {\n      maxWidth: '100%',\n    }),\n    ...useResponsiveStyle(\n      [\n        style?.width,\n        style?.margin,\n        style?.padding,\n        useBorder(style?.border),\n        style?.borderRadius,\n        style?.textStyle,\n      ] as const,\n      ([width, margin, padding, border, borderRadius, textStyle]) => ({\n        ...(properties.includes(StyleControlProperty.Width) && {\n          width: widthToString(width) ?? '100%',\n        }),\n        ...(properties.includes(StyleControlProperty.Margin) &&\n          marginPropertyDataToStyle(margin ?? defaultMargin, defaultMargin)),\n        ...(properties.includes(StyleControlProperty.Padding) &&\n          paddingPropertyDataToStyle(padding ?? defaultPadding, defaultPadding)),\n        ...(properties.includes(StyleControlProperty.Border) && {\n          borderTop: borderSideToString(border?.borderTop) ?? '0 solid black',\n          borderRight: borderSideToString(border?.borderRight) ?? '0 solid black',\n          borderBottom: borderSideToString(border?.borderBottom) ?? '0 solid black',\n          borderLeft: borderSideToString(border?.borderLeft) ?? '0 solid black',\n        }),\n        ...(properties.includes(StyleControlProperty.BorderRadius) && {\n          borderTopLeftRadius: borderRadiusToString(borderRadius?.borderTopLeftRadius) ?? 0,\n          borderTopRightRadius: borderRadiusToString(borderRadius?.borderTopRightRadius) ?? 0,\n          borderBottomRightRadius: borderRadiusToString(borderRadius?.borderBottomRightRadius) ?? 0,\n          borderBottomLeftRadius: borderRadiusToString(borderRadius?.borderBottomLeftRadius) ?? 0,\n        }),\n        ...(properties.includes(StyleControlProperty.TextStyle) && {\n          ...(textStyle?.fontFamily && { fontFamily: `\"${textStyle.fontFamily}\"` }),\n          ...(textStyle?.letterSpacing && { letterSpacing: textStyle.letterSpacing }),\n          ...(textStyle?.fontSize && { fontSize: fontSizeToString(textStyle.fontSize) }),\n          ...(textStyle?.fontWeight && { fontWeight: textStyle.fontWeight }),\n          textTransform: textStyle?.textTransform ?? [],\n          fontStyle: textStyle?.fontStyle ?? [],\n        }),\n      }),\n    ),\n  }\n\n  function widthToString(widthProperty: WidthPropertyData | undefined): string | null {\n    if (widthProperty == null) return null\n\n    return lengthPercentageDataToString(widthProperty)\n  }\n\n  function borderSideToString(borderSide: BorderSide | null | undefined): string | null {\n    if (borderSide == null) return null\n\n    const { width, color, style } = borderSide\n    return `${width != null ? width : 0}px ${style} ${\n      color != null ? colorToString(color) : 'black'\n    }`\n  }\n\n  function borderRadiusToString(\n    borderRadius: BorderRadiusLonghandPropertyData | null | undefined,\n  ): string | null {\n    if (borderRadius == null) return null\n\n    return lengthPercentageDataToString(borderRadius)\n  }\n\n  function fontSizeToString(fontSize: NonNullable<FontSizePropertyData>) {\n    return `${fontSize.value}${fontSize.unit}`\n  }\n}\n\nexport type StyleControlFormattedValue = string\n\nexport function useFormattedStyle(\n  styleControlData: StyleControlData | undefined,\n  controlDefinition: StyleControlDefinition,\n  control: StyleControl | null,\n): StyleControlFormattedValue {\n  const style = useStyleControlCssObject(styleControlData, controlDefinition)\n  // We're removing the colons because useId returns a string wrapped with colons, e.g. \":R3d5sm:\",\n  // and we cannot use colons in a class name.\n  const guid = useId().replaceAll(':', '')\n  const styleClassName = useStyle(style)\n  const classNames = `${styleClassName} ${guid}`\n\n  useEffect(() => {\n    let currentBoxModel: BoxModel | null = null\n\n    const handleAnimationFrameRequest = () => {\n      if (control == null) return\n\n      const element = document.querySelector(`.${guid}`)\n\n      const measuredBoxModel = element == null ? null : getBox(element)\n\n      if (!deepEqual(currentBoxModel, measuredBoxModel)) {\n        currentBoxModel = measuredBoxModel\n\n        control.changeBoxModel(currentBoxModel)\n      }\n\n      animationFrameHandle = requestAnimationFrame(handleAnimationFrameRequest)\n    }\n\n    let animationFrameHandle = requestAnimationFrame(handleAnimationFrameRequest)\n\n    return () => {\n      cancelAnimationFrame(animationFrameHandle)\n\n      control?.changeBoxModel(null)\n    }\n  }, [guid, control])\n\n  return classNames\n}\n"],"mappings":"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","names":["style"]}