@makeswift/runtime 0.28.10-canary.9 → 0.29.0-canary.19

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

@@ -3,7 +3,7 @@ import { Slate, getBaseBreakpoint } from "@makeswift/controls";
 import { DefaultBreakpointID } from "../../../../../state/modules/breakpoints";
 import { useBreakpoints } from "../../../hooks/use-breakpoints";
 import { RichText } from "../../../../../controls";
-function usePresetValue(definition) {
+function usePresetValue(config) {
   const breakpoints = useBreakpoints();
   return useMemo(
     () => [
@@ -11,8 +11,8 @@ function usePresetValue(definition) {
         type: Slate.BlockType.Default,
         children: [
           {
-            text: definition.config.defaultValue ?? "",
-            ...definition.config.mode === RichText.Mode.Inline ? {} : {
+            text: config.defaultValue ?? "",
+            ...config.mode === RichText.Mode.Inline ? {} : {
               typography: {
                 style: [
                   {
@@ -36,7 +36,7 @@ function usePresetValue(definition) {
         ]
       }
     ],
-    [definition.config.mode, definition.config.defaultValue, breakpoints]
+    [config.mode, config.defaultValue, breakpoints]
   );
 }
 const defaultValue = [

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../src/runtimes/react/controls/rich-text-v2/EditableTextV2/usePresetValue.tsx"],"sourcesContent":["import { useMemo } from 'react'\nimport { Descendant } from 'slate'\nimport { Slate, getBaseBreakpoint } from '@makeswift/controls'\n\nimport { DefaultBreakpointID } from '../../../../../state/modules/breakpoints'\nimport { useBreakpoints } from '../../../hooks/use-breakpoints'\nimport { RichTextV2Definition, RichText } from '../../../../../controls'\n\nexport function usePresetValue(definition: RichTextV2Definition): Descendant[] {\n  const breakpoints = useBreakpoints()\n  return useMemo(\n    () => [\n      {\n        type: Slate.BlockType.Default,\n        children: [\n          {\n            text: definition.config.defaultValue ?? '',\n            ...(definition.config.mode === RichText.Mode.Inline\n              ? {}\n              : {\n                  typography: {\n                    style: [\n                      {\n                        deviceId: getBaseBreakpoint(breakpoints).id,\n                        value: {\n                          fontWeight: 400,\n                          fontSize: { value: 18, unit: 'px' },\n                          lineHeight: 1.5,\n                        },\n                      },\n                      ...(breakpoints.some(({ id }) => id === DefaultBreakpointID.Mobile)\n                        ? [\n                            {\n                              deviceId: DefaultBreakpointID.Mobile,\n                              value: { fontSize: { value: 16, unit: 'px' } },\n                            },\n                          ]\n                        : []),\n                    ],\n                  },\n                }),\n          },\n        ],\n      },\n    ],\n    [definition.config.mode, definition.config.defaultValue, breakpoints],\n  )\n}\n\nexport const defaultValue = [\n  {\n    type: Slate.BlockType.Default,\n    children: [\n      {\n        text: '',\n      },\n    ],\n  },\n]\n"],"mappings":"AAAA,SAAS,eAAe;AAExB,SAAS,OAAO,yBAAyB;AAEzC,SAAS,2BAA2B;AACpC,SAAS,sBAAsB;AAC/B,SAA+B,gBAAgB;AAExC,SAAS,eAAe,YAAgD;AAC7E,QAAM,cAAc,eAAe;AACnC,SAAO;AAAA,IACL,MAAM;AAAA,MACJ;AAAA,QACE,MAAM,MAAM,UAAU;AAAA,QACtB,UAAU;AAAA,UACR;AAAA,YACE,MAAM,WAAW,OAAO,gBAAgB;AAAA,YACxC,GAAI,WAAW,OAAO,SAAS,SAAS,KAAK,SACzC,CAAC,IACD;AAAA,cACE,YAAY;AAAA,gBACV,OAAO;AAAA,kBACL;AAAA,oBACE,UAAU,kBAAkB,WAAW,EAAE;AAAA,oBACzC,OAAO;AAAA,sBACL,YAAY;AAAA,sBACZ,UAAU,EAAE,OAAO,IAAI,MAAM,KAAK;AAAA,sBAClC,YAAY;AAAA,oBACd;AAAA,kBACF;AAAA,kBACA,GAAI,YAAY,KAAK,CAAC,EAAE,GAAG,MAAM,OAAO,oBAAoB,MAAM,IAC9D;AAAA,oBACE;AAAA,sBACE,UAAU,oBAAoB;AAAA,sBAC9B,OAAO,EAAE,UAAU,EAAE,OAAO,IAAI,MAAM,KAAK,EAAE;AAAA,oBAC/C;AAAA,kBACF,IACA,CAAC;AAAA,gBACP;AAAA,cACF;AAAA,YACF;AAAA,UACN;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,IACA,CAAC,WAAW,OAAO,MAAM,WAAW,OAAO,cAAc,WAAW;AAAA,EACtE;AACF;AAEO,MAAM,eAAe;AAAA,EAC1B;AAAA,IACE,MAAM,MAAM,UAAU;AAAA,IACtB,UAAU;AAAA,MACR;AAAA,QACE,MAAM;AAAA,MACR;AAAA,IACF;AAAA,EACF;AACF;","names":[]}
+{"version":3,"sources":["../../../../../../../src/runtimes/react/controls/rich-text-v2/EditableTextV2/usePresetValue.tsx"],"sourcesContent":["import { useMemo } from 'react'\nimport { Descendant } from 'slate'\n\nimport { type ConfigType, Slate, getBaseBreakpoint } from '@makeswift/controls'\n\nimport { DefaultBreakpointID } from '../../../../../state/modules/breakpoints'\nimport { useBreakpoints } from '../../../hooks/use-breakpoints'\nimport { RichTextV2Definition, RichText } from '../../../../../controls'\n\nexport function usePresetValue(config: ConfigType<RichTextV2Definition>): Descendant[] {\n  const breakpoints = useBreakpoints()\n  return useMemo(\n    () => [\n      {\n        type: Slate.BlockType.Default,\n        children: [\n          {\n            text: config.defaultValue ?? '',\n            ...(config.mode === RichText.Mode.Inline\n              ? {}\n              : {\n                  typography: {\n                    style: [\n                      {\n                        deviceId: getBaseBreakpoint(breakpoints).id,\n                        value: {\n                          fontWeight: 400,\n                          fontSize: { value: 18, unit: 'px' },\n                          lineHeight: 1.5,\n                        },\n                      },\n                      ...(breakpoints.some(({ id }) => id === DefaultBreakpointID.Mobile)\n                        ? [\n                            {\n                              deviceId: DefaultBreakpointID.Mobile,\n                              value: { fontSize: { value: 16, unit: 'px' } },\n                            },\n                          ]\n                        : []),\n                    ],\n                  },\n                }),\n          },\n        ],\n      },\n    ],\n    [config.mode, config.defaultValue, breakpoints],\n  )\n}\n\nexport const defaultValue = [\n  {\n    type: Slate.BlockType.Default,\n    children: [\n      {\n        text: '',\n      },\n    ],\n  },\n]\n"],"mappings":"AAAA,SAAS,eAAe;AAGxB,SAA0B,OAAO,yBAAyB;AAE1D,SAAS,2BAA2B;AACpC,SAAS,sBAAsB;AAC/B,SAA+B,gBAAgB;AAExC,SAAS,eAAe,QAAwD;AACrF,QAAM,cAAc,eAAe;AACnC,SAAO;AAAA,IACL,MAAM;AAAA,MACJ;AAAA,QACE,MAAM,MAAM,UAAU;AAAA,QACtB,UAAU;AAAA,UACR;AAAA,YACE,MAAM,OAAO,gBAAgB;AAAA,YAC7B,GAAI,OAAO,SAAS,SAAS,KAAK,SAC9B,CAAC,IACD;AAAA,cACE,YAAY;AAAA,gBACV,OAAO;AAAA,kBACL;AAAA,oBACE,UAAU,kBAAkB,WAAW,EAAE;AAAA,oBACzC,OAAO;AAAA,sBACL,YAAY;AAAA,sBACZ,UAAU,EAAE,OAAO,IAAI,MAAM,KAAK;AAAA,sBAClC,YAAY;AAAA,oBACd;AAAA,kBACF;AAAA,kBACA,GAAI,YAAY,KAAK,CAAC,EAAE,GAAG,MAAM,OAAO,oBAAoB,MAAM,IAC9D;AAAA,oBACE;AAAA,sBACE,UAAU,oBAAoB;AAAA,sBAC9B,OAAO,EAAE,UAAU,EAAE,OAAO,IAAI,MAAM,KAAK,EAAE;AAAA,oBAC/C;AAAA,kBACF,IACA,CAAC;AAAA,gBACP;AAAA,cACF;AAAA,YACF;AAAA,UACN;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,IACA,CAAC,OAAO,MAAM,OAAO,cAAc,WAAW;AAAA,EAChD;AACF;AAEO,MAAM,eAAe;AAAA,EAC1B;AAAA,IACE,MAAM,MAAM,UAAU;AAAA,IACtB,UAAU;AAAA,MACR;AAAA,QACE,MAAM;AAAA,MACR;AAAA,IACF;AAAA,EACF;AACF;","names":[]}

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

@@ -1,14 +1,16 @@
-import { Fragment, jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import { RichText } from "../../../../controls/rich-text-v2";
-import { useStyle } from "../../use-style";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, useMemo } from "react";
+import {
+  RichTextV2Definition,
+  RichText
+} from "../../../../controls/rich-text-v2";
 import { toText } from "../../../../slate/utils";
 import { ControlValue } from "../control";
-const ReadOnlyTextV2 = forwardRef(function ReadOnlyText({ text, definition }, ref) {
-  const descendantsAsString = toText(
-    text?.descendants ?? [],
-    definition?.config.mode ?? RichText.Mode.Block
-  );
+import { useStyle } from "../../css-runtime/hooks/use-style";
+const ReadOnlyTextV2 = forwardRef(function ReadOnlyText({ text, config, parentStylesheetKey }, ref) {
+  const descendants = useMemo(() => text?.descendants ?? [], [text?.descendants]);
+  const plugins = useMemo(() => config ? new RichTextV2Definition(config).plugins : [], [config]);
+  const descendantsAsString = toText(descendants, config?.mode ?? RichText.Mode.Block);
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -26,8 +28,10 @@ const ReadOnlyTextV2 = forwardRef(function ReadOnlyText({ text, definition }, re
       children: descendantsAsString === "" ? /* @__PURE__ */ jsx(Placeholder, {}) : /* @__PURE__ */ jsx(
         Descendants,
         {
-          plugins: definition?.config.plugins ?? [],
-          descendants: text?.descendants ?? []
+          pathComponents: [],
+          parentStylesheetKey,
+          plugins,
+          descendants
         }
       )
     }
@@ -35,50 +39,88 @@ const ReadOnlyTextV2 = forwardRef(function ReadOnlyText({ text, definition }, re
 });
 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
-    }
-  );
+  const { className, styleElement } = useStyle({
+    display: "inline-block",
+    width: 0,
+    maxWidth: "100%",
+    whiteSpace: "nowrap",
+    opacity: 0.333,
+    verticalAlign: "text-top"
+  });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    styleElement,
+    /* @__PURE__ */ jsx("span", { className, children: text })
+  ] });
 }
-function LeafComponent({ plugins, ...props }) {
+function LeafComponent({
+  plugins,
+  pathComponents,
+  parentStylesheetKey,
+  ...props
+}) {
   function initialRenderLeaf({ leaf }) {
     return /* @__PURE__ */ jsx("span", { className: leaf.className, children: leaf.text === "" ? "\uFEFF" : leaf.text });
   }
   const renderLeaf = plugins.reduce(
-    (renderFn, plugin) => (props2) => {
+    (renderFn, plugin, index) => function RenderLeafPlugin(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) });
+      const pseudoElementKey = parentStylesheetKey;
+      const leafPathComponents = [...pathComponents, `plugins`, `${index}`, `leaf`];
+      return /* @__PURE__ */ jsx(
+        ControlValue,
+        {
+          definition: control.definition,
+          data: control.getLeafValue(props2.leaf),
+          elementKey: pseudoElementKey,
+          propPathComponents: leafPathComponents,
+          children: (value) => renderLeaf2(renderFn, value)(props2)
+        }
+      );
     },
     initialRenderLeaf
   );
   return renderLeaf({ attributes: {}, leaf: props.leaf, children: null, text: props.leaf });
 }
-function ElementComponent({ plugins, ...props }) {
+function ElementComponent({
+  plugins,
+  pathComponents,
+  parentStylesheetKey,
+  ...props
+}) {
   function initialRenderElement(props2) {
-    return /* @__PURE__ */ jsx(Descendants, { descendants: props2.element.children, plugins });
+    return /* @__PURE__ */ jsx(
+      Descendants,
+      {
+        descendants: props2.element.children,
+        plugins,
+        pathComponents,
+        parentStylesheetKey
+      }
+    );
   }
   const renderElement = plugins.reduce(
-    (renderFn, plugin) => (props2) => {
+    (renderFn, plugin, index) => function RenderElementPlugin(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) });
+      const pseudoElementKey = parentStylesheetKey;
+      const elementPathComponents = [...pathComponents, `plugins`, `${index}`, `element`];
+      return /* @__PURE__ */ jsx(
+        ControlValue,
+        {
+          definition: control.definition,
+          data: control.getElementValue(props2.element),
+          elementKey: pseudoElementKey,
+          propPathComponents: elementPathComponents,
+          children: (value) => renderElement2(renderFn, value)(props2)
+        }
+      );
     },
     initialRenderElement
   );
@@ -90,14 +132,35 @@ function isText(node) {
   return false;
 }
 function Descendants({
+  pathComponents,
+  parentStylesheetKey,
   descendants,
   plugins
 }) {
   return /* @__PURE__ */ jsx(Fragment, { children: descendants.map((descendant, index) => {
+    const descendantPathComponents = [...pathComponents, `descendants`, `${index}`];
     if (isText(descendant)) {
-      return /* @__PURE__ */ jsx(LeafComponent, { plugins, leaf: descendant }, index);
+      return /* @__PURE__ */ jsx(
+        LeafComponent,
+        {
+          plugins,
+          leaf: descendant,
+          parentStylesheetKey,
+          pathComponents: descendantPathComponents
+        },
+        index
+      );
     }
-    return /* @__PURE__ */ jsx(ElementComponent, { descendant, plugins }, index);
+    return /* @__PURE__ */ jsx(
+      ElementComponent,
+      {
+        descendant,
+        plugins,
+        pathComponents: descendantPathComponents,
+        parentStylesheetKey
+      },
+      index
+    );
   }) });
 }
 export {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/runtimes/react/controls/rich-text-v2/ReadOnlyTextV2.tsx"],"sourcesContent":["import { ForwardedRef, forwardRef, ReactNode } from 'react'\nimport { Descendant, Element, Text } from 'slate'\nimport { RenderElementProps, RenderLeafProps } from 'slate-react'\n\nimport { RichTextV2Definition, RichText } from '../../../../controls/rich-text-v2'\nimport { useStyle } from '../../use-style'\nimport { toText } from '../../../../slate/utils'\nimport { RichTextV2Plugin } from '../../../../controls/rich-text-v2/plugin'\nimport { RichTextDataV2 } from '../../../../controls/rich-text-v2'\n\nimport { ControlValue } from '../control'\n\ntype Props = {\n  text: RichTextDataV2 | undefined\n  definition: RichTextV2Definition | undefined\n}\n\nconst ReadOnlyTextV2 = forwardRef(function ReadOnlyText(\n  { text, definition }: Props,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const descendantsAsString = toText(\n    text?.descendants ?? [],\n    definition?.config.mode ?? RichText.Mode.Block,\n  )\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={definition?.config.plugins ?? []}\n          descendants={text?.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): ReactNode {\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): ReactNode {\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"]}
+{"version":3,"sources":["../../../../../../src/runtimes/react/controls/rich-text-v2/ReadOnlyTextV2.tsx"],"sourcesContent":["import { type ReactNode, type ForwardedRef, forwardRef, useMemo } from 'react'\nimport { type Descendant, type Element, type Text } from 'slate'\nimport { type RenderElementProps, type RenderLeafProps } from 'slate-react'\n\nimport { type ConfigType } from '@makeswift/controls'\n\nimport {\n  type RichTextDataV2,\n  RichTextV2Definition,\n  RichText,\n} from '../../../../controls/rich-text-v2'\nimport { toText } from '../../../../slate/utils'\nimport { RichTextV2Plugin } from '../../../../controls/rich-text-v2/plugin'\n\nimport { ControlValue } from '../control'\nimport { useStyle } from '../../css-runtime/hooks/use-style'\n\ntype Props = {\n  text: RichTextDataV2 | undefined\n  config: ConfigType<RichTextV2Definition> | undefined\n  parentStylesheetKey: string\n}\n\nconst ReadOnlyTextV2 = forwardRef(function ReadOnlyText(\n  { text, config, parentStylesheetKey }: Props,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const descendants = useMemo(() => text?.descendants ?? [], [text?.descendants])\n  const plugins = useMemo(() => (config ? new RichTextV2Definition(config).plugins : []), [config])\n  const descendantsAsString = toText(descendants, config?.mode ?? RichText.Mode.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          pathComponents={[]}\n          parentStylesheetKey={parentStylesheetKey}\n          plugins={plugins}\n          descendants={descendants}\n        />\n      )}\n    </div>\n  )\n})\n\nexport default ReadOnlyTextV2\n\nfunction Placeholder({ text = 'Write some text...' }: { text?: string }) {\n  const { className, styleElement } = useStyle({\n    display: 'inline-block',\n    width: 0,\n    maxWidth: '100%',\n    whiteSpace: 'nowrap',\n    opacity: 0.333,\n    verticalAlign: 'text-top',\n  })\n  return (\n    <>\n      {styleElement}\n      <span className={className}>{text}</span>\n    </>\n  )\n}\n\ntype LeafProps = {\n  pathComponents: string[]\n  parentStylesheetKey: string\n  leaf: Text\n  plugins: RichTextV2Plugin[]\n}\n\nexport function LeafComponent({\n  plugins,\n  pathComponents,\n  parentStylesheetKey,\n  ...props\n}: LeafProps) {\n  function initialRenderLeaf({ leaf }: RenderLeafProps): ReactNode {\n    return <span className={leaf.className}>{leaf.text === '' ? '\\uFEFF' : leaf.text}</span>\n  }\n\n  const renderLeaf = plugins.reduce(\n    (renderFn, plugin, index) =>\n      function RenderLeafPlugin(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        const pseudoElementKey = parentStylesheetKey\n        const leafPathComponents = [...pathComponents, `plugins`, `${index}`, `leaf`]\n\n        return (\n          <ControlValue\n            definition={control.definition}\n            data={control.getLeafValue(props.leaf)}\n            elementKey={pseudoElementKey}\n            propPathComponents={leafPathComponents}\n          >\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  pathComponents: string[]\n  parentStylesheetKey: string\n  descendant: Element\n  plugins: RichTextV2Plugin[]\n}\n\nfunction ElementComponent({\n  plugins,\n  pathComponents,\n  parentStylesheetKey,\n  ...props\n}: ElementProps) {\n  function initialRenderElement(props: RenderElementProps): ReactNode {\n    return (\n      <Descendants\n        descendants={props.element.children}\n        plugins={plugins}\n        pathComponents={pathComponents}\n        parentStylesheetKey={parentStylesheetKey}\n      />\n    )\n  }\n\n  const renderElement = plugins.reduce(\n    (renderFn, plugin, index) =>\n      function RenderElementPlugin(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        const pseudoElementKey = parentStylesheetKey\n        const elementPathComponents = [...pathComponents, `plugins`, `${index}`, `element`]\n\n        return (\n          <ControlValue\n            definition={control.definition}\n            data={control.getElementValue(props.element)}\n            elementKey={pseudoElementKey}\n            propPathComponents={elementPathComponents}\n          >\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  pathComponents,\n  parentStylesheetKey,\n  descendants,\n  plugins,\n}: {\n  pathComponents: string[]\n  parentStylesheetKey: string\n  plugins: RichTextV2Plugin[]\n  descendants: Descendant[]\n}) {\n  return (\n    <>\n      {descendants.map((descendant, index) => {\n        const descendantPathComponents = [...pathComponents, `descendants`, `${index}`]\n        if (isText(descendant)) {\n          return (\n            <LeafComponent\n              key={index}\n              plugins={plugins}\n              leaf={descendant}\n              parentStylesheetKey={parentStylesheetKey}\n              pathComponents={descendantPathComponents}\n            />\n          )\n        }\n\n        return (\n          <ElementComponent\n            key={index}\n            descendant={descendant}\n            plugins={plugins}\n            pathComponents={descendantPathComponents}\n            parentStylesheetKey={parentStylesheetKey}\n          />\n        )\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

@@ -1,2 +1,5 @@
-export * from "./rich-text-v2";
+import { renderRichTextV2 } from "./render-rich-text-v2";
+export {
+  renderRichTextV2
+};
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/runtimes/react/controls/rich-text-v2/index.ts"],"sourcesContent":["export * from './rich-text-v2'\n"],"mappings":"AAAA,cAAc;","names":[]}
+{"version":3,"sources":["../../../../../../src/runtimes/react/controls/rich-text-v2/index.ts"],"sourcesContent":["import { type ReactNode } from 'react'\n\nimport { RichTextV2Definition } from '../../../../controls/rich-text-v2'\n\nexport type RichTextV2ControlValue = ReactNode\nexport type Descriptors = { text?: RichTextV2Definition }\n\nexport { renderRichTextV2 } from './render-rich-text-v2'\n"],"mappings":"AAOA,SAAS,wBAAwB;","names":[]}

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

@@ -0,0 +1,25 @@
+import { jsx } from "react/jsx-runtime";
+import { lazy } from "react";
+import { RichTextV2Definition } from "../../../../controls/rich-text-v2";
+import { RichTextV2Value } from "./rich-text-v2-value";
+const ReadOnlyTextV1 = lazy(() => import("../rich-text/ReadOnlyText"));
+function renderRichTextV2({
+  data,
+  config,
+  control,
+  stylesheet
+}) {
+  return RichTextV2Definition.isV1Data(data) ? /* @__PURE__ */ jsx(ReadOnlyTextV1, { text: data }) : /* @__PURE__ */ jsx(
+    RichTextV2Value,
+    {
+      data,
+      config,
+      instanceKey: control?.instanceKey,
+      parentStylesheetKey: stylesheet.key()
+    }
+  );
+}
+export {
+  renderRichTextV2
+};
+//# sourceMappingURL=render-rich-text-v2.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../src/runtimes/react/controls/rich-text-v2/render-rich-text-v2.tsx"],"sourcesContent":["import { type ReactNode, lazy } from 'react'\n\nimport { type DataType, type ConfigType, Stylesheet } from '@makeswift/controls'\n\nimport { RichTextV2Control, RichTextV2Definition } from '../../../../controls/rich-text-v2'\n\nimport { RichTextV2Value } from './rich-text-v2-value'\n\nconst ReadOnlyTextV1 = lazy(() => import('../rich-text/ReadOnlyText'))\n\nexport function renderRichTextV2({\n  data,\n  config,\n  control,\n  stylesheet,\n}: {\n  data: DataType<RichTextV2Definition> | undefined\n  config: ConfigType<RichTextV2Definition>\n  control: RichTextV2Control | null\n  stylesheet: Stylesheet\n}): ReactNode {\n  // See `renderSlot` comments\n  return RichTextV2Definition.isV1Data(data) ? (\n    <ReadOnlyTextV1 text={data} />\n  ) : (\n    <RichTextV2Value\n      data={data}\n      config={config}\n      instanceKey={control?.instanceKey}\n      parentStylesheetKey={stylesheet.key()}\n    />\n  )\n}\n"],"mappings":"AAuBI;AAvBJ,SAAyB,YAAY;AAIrC,SAA4B,4BAA4B;AAExD,SAAS,uBAAuB;AAEhC,MAAM,iBAAiB,KAAK,MAAM,OAAO,2BAA2B,CAAC;AAE9D,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAKc;AAEZ,SAAO,qBAAqB,SAAS,IAAI,IACvC,oBAAC,kBAAe,MAAM,MAAM,IAE5B;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,aAAa,SAAS;AAAA,MACtB,qBAAqB,WAAW,IAAI;AAAA;AAAA,EACtC;AAEJ;","names":[]}

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

@@ -0,0 +1,26 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { lazy } from "react";
+import { useIsReadOnly } from "../../hooks/use-is-read-only";
+const EditableText = lazy(() => import("./EditableTextV2"));
+const ReadOnlyText = lazy(() => import("./ReadOnlyTextV2"));
+function RichTextV2Value({
+  data,
+  config,
+  instanceKey,
+  parentStylesheetKey
+}) {
+  return useIsReadOnly() ? /* @__PURE__ */ jsx(ReadOnlyText, { text: data, config, parentStylesheetKey }) : /* @__PURE__ */ jsx(
+    EditableText,
+    {
+      text: data,
+      config,
+      instanceKey,
+      parentStylesheetKey
+    }
+  );
+}
+export {
+  RichTextV2Value
+};
+//# sourceMappingURL=rich-text-v2-value.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../src/runtimes/react/controls/rich-text-v2/rich-text-v2-value.tsx"],"sourcesContent":["'use client'\n\nimport { lazy } from 'react'\n\nimport { type ControlInstanceKey, type ConfigType } from '@makeswift/controls'\n\nimport { type RichTextDataV2, RichTextV2Definition } from '../../../../controls/rich-text-v2'\n\nimport { useIsReadOnly } from '../../hooks/use-is-read-only'\n\nconst EditableText = lazy(() => import('./EditableTextV2'))\nconst ReadOnlyText = lazy(() => import('./ReadOnlyTextV2'))\n\nexport function RichTextV2Value({\n  data,\n  config,\n  instanceKey,\n  parentStylesheetKey,\n}: {\n  data: RichTextDataV2 | undefined\n  config: ConfigType<RichTextV2Definition>\n  instanceKey: ControlInstanceKey | undefined\n  parentStylesheetKey: string\n}) {\n  return useIsReadOnly() ? (\n    <ReadOnlyText text={data} config={config} parentStylesheetKey={parentStylesheetKey} />\n  ) : (\n    <EditableText\n      text={data}\n      config={config}\n      instanceKey={instanceKey}\n      parentStylesheetKey={parentStylesheetKey}\n    />\n  )\n}\n"],"mappings":";AAyBI;AAvBJ,SAAS,YAAY;AAMrB,SAAS,qBAAqB;AAE9B,MAAM,eAAe,KAAK,MAAM,OAAO,kBAAkB,CAAC;AAC1D,MAAM,eAAe,KAAK,MAAM,OAAO,kBAAkB,CAAC;AAEnD,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAKG;AACD,SAAO,cAAc,IACnB,oBAAC,gBAAa,MAAM,MAAM,QAAgB,qBAA0C,IAEpF;AAAA,IAAC;AAAA;AAAA,MACC,MAAM;AAAA,MACN;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACF;AAEJ;","names":[]}

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

@@ -1,11 +1,10 @@
 "use client";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import {
   useEffect,
   useState,
   memo
 } from "react";
-import { cx } from "@emotion/css";
 import {
   SlotControl
 } from "@makeswift/controls";
@@ -14,8 +13,9 @@ import { getIndexes } from "../../../../components/utils/columns";
 import { useResponsiveStyle } from "../../../../components/utils/responsive-style";
 import { useIsInBuilder } from "../../hooks/use-is-in-builder";
 import { useControlInstance } from "../../hooks/use-control-instance";
-import { useStyle } from "../../use-style";
 import { pollBoxModel } from "../../poll-box-model";
+import { useStyle } from "../../css-runtime/hooks/use-style";
+import clsx from "clsx";
 import { NodeValue } from "../node-value";
 const SlotValue = memo(function SlotValue2({
   instanceKey,
@@ -43,7 +43,7 @@ function Slot({
 }) {
   const As = as ?? "div";
   const [element, setElement] = useState(null);
-  const baseClassName = useStyle({
+  const { className: baseClassName, styleElement: baseStyleElement } = useStyle({
     display: "flex",
     flexWrap: "wrap",
     width: "100%"
@@ -52,11 +52,14 @@ function Slot({
     if (element == null || control == null)
       return;
     return pollBoxModel({
-      element,
+      getElement: () => element,
       onBoxModelChange: (boxModel) => control.changeContainerBoxModel(boxModel)
     });
   }, [element, control]);
-  return /* @__PURE__ */ jsx(As, { ...restOfProps, ref: setElement, className: cx(baseClassName, className), children });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(As, { ...restOfProps, ref: setElement, className: clsx(baseClassName, className), children }),
+    baseStyleElement
+  ] });
 }
 Slot.Placeholder = SlotPlaceholder;
 Slot.Item = SlotItem;
@@ -71,7 +74,7 @@ function SlotItem({
 }) {
   const As = as ?? "div";
   const [element, setElement] = useState(null);
-  const baseClassName = useStyle({
+  const { className: baseClassName, styleElement: baseStyleElement } = useStyle({
     display: "flex",
     ...useResponsiveStyle([grid], ([{ count = 12, spans = [[12]] } = {}]) => {
       const [rowIndex, columnIndex] = getIndexes(spans, index);
@@ -84,11 +87,14 @@ function SlotItem({
     if (element == null || control == null)
       return;
     return pollBoxModel({
-      element,
+      getElement: () => element,
       onBoxModelChange: (boxModel) => control.changeItemBoxModel(index, boxModel)
     });
   }, [element, control, index]);
-  return /* @__PURE__ */ jsx(As, { ...restOfProps, ref: setElement, className: cx(baseClassName, className), children });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(As, { ...restOfProps, ref: setElement, className: clsx(baseClassName, className), children }),
+    baseStyleElement
+  ] });
 }
 const DEFAULT_SHOW_PLACEHOLDER_IN_BUILDER_ONLY = false;
 const DEFAULT_PLACEHOLDER_HEIGHT_PX = 80;
@@ -103,30 +109,30 @@ function SlotPlaceholder({ control, placeholder }) {
     if (element == null || control == null)
       return;
     return pollBoxModel({
-      element,
+      getElement: () => 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)"
-      }),
-      style: {
-        height: hidePlaceholder ? 0 : placeholderHeight,
-        visibility: hidePlaceholder ? "hidden" : void 0
-      },
-      children: /* @__PURE__ */ jsxs(
-        "svg",
-        {
-          xmlns: "http://www.w3.org/2000/svg",
-          width: "100%",
-          height: "100%",
-          className: useStyle({ overflow: "visible", padding: 8 }),
-          children: [
+  const { className: placeholderClassName, styleElement: placeholderStyleElement } = useStyle({
+    width: "100%",
+    background: "rgba(161, 168, 194, 0.18)"
+  });
+  const { className: svgClassName, styleElement: svgStyleElement } = useStyle({
+    overflow: "visible",
+    padding: 8
+  });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: setElement,
+        className: placeholderClassName,
+        style: {
+          height: hidePlaceholder ? 0 : placeholderHeight,
+          visibility: hidePlaceholder ? "hidden" : void 0
+        },
+        children: [
+          /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", className: svgClassName, children: [
             /* @__PURE__ */ jsx(
               "rect",
               {
@@ -156,11 +162,13 @@ function SlotPlaceholder({ control, placeholder }) {
                 children: text
               }
             )
-          ]
-        }
-      )
-    }
-  );
+          ] }),
+          svgStyleElement
+        ]
+      }
+    ),
+    placeholderStyleElement
+  ] });
 }
 export {
   Slot,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/runtimes/react/controls/slot/slot-value.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ComponentPropsWithoutRef,\n  type ElementType,\n  type ReactNode,\n  useEffect,\n  useState,\n  memo,\n} from 'react'\n\nimport { cx } from '@emotion/css'\n\nimport {\n  SlotDefinition,\n  SlotControl,\n  type DataType,\n  type ControlInstanceKey,\n} from '@makeswift/controls'\n\nimport { type SlotConfig, type SlotPlaceholderConfig } from '../../../../controls/slot'\n\nimport { Element } from '../../components/Element'\nimport { getIndexes } from '../../../../components/utils/columns'\nimport { useResponsiveStyle } from '../../../../components/utils/responsive-style'\n\nimport { useIsInBuilder } from '../../hooks/use-is-in-builder'\nimport { useControlInstance } from '../../hooks/use-control-instance'\n\nimport { useStyle } from '../../use-style'\nimport { pollBoxModel } from '../../poll-box-model'\n\nimport { NodeValue } from '../node-value'\n\nexport const SlotValue = memo(function SlotValue({\n  instanceKey,\n  ...props\n}: {\n  data: DataType<SlotDefinition<ReactNode>> | undefined\n  instanceKey: ControlInstanceKey | undefined\n  config: SlotConfig\n}): ReactNode {\n  return (\n    <NodeValue instanceKey={instanceKey}>\n      <SlotOrPlaceholder instanceKey={instanceKey} {...props} />\n    </NodeValue>\n  )\n})\n\nconst SlotOrPlaceholder = ({\n  data,\n  instanceKey,\n  config,\n}: {\n  data: DataType<SlotDefinition<ReactNode>> | undefined\n  instanceKey: ControlInstanceKey | undefined\n  config: SlotConfig\n}): ReactNode => {\n  const control = useControlInstance(instanceKey, SlotControl)\n\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} placeholder={config.unstable_placeholder} />\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  // @arvin: review for correctness\n  grid: DataType<SlotDefinition<ReactNode>> extends undefined\n    ? undefined\n    : NonNullable<DataType<SlotDefinition<ReactNode>>>['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>>): ReactNode {\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  placeholder?: SlotPlaceholderConfig\n}\n\nconst DEFAULT_SHOW_PLACEHOLDER_IN_BUILDER_ONLY = false\nconst DEFAULT_PLACEHOLDER_HEIGHT_PX = 80\n\nfunction SlotPlaceholder({ control, placeholder }: SlotPlaceholderProps): ReactNode {\n  const isInBuilder = useIsInBuilder()\n  const [element, setElement] = useState<Element | null>(null)\n\n  // TODO: When ready, we can default to only showing the slot placeholder in\n  // the builder\n  const showInBuilderOnly = placeholder?.builderOnly ?? DEFAULT_SHOW_PLACEHOLDER_IN_BUILDER_ONLY\n  const placeholderHeight = placeholder?.height ?? DEFAULT_PLACEHOLDER_HEIGHT_PX\n  const text = placeholder?.text\n\n  const hidePlaceholder = showInBuilderOnly && !isInBuilder\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      })}\n      style={{\n        height: hidePlaceholder ? 0 : placeholderHeight,\n        visibility: hidePlaceholder ? 'hidden' : undefined,\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        {text != null && (\n          <text\n            x=\"50%\"\n            y=\"50%\"\n            dominantBaseline=\"central\"\n            textAnchor=\"middle\"\n            fill=\"rgba(161, 168, 194, 0.80)\"\n            fontSize=\"14px\"\n            fontFamily=\"sans-serif\"\n            style={{ userSelect: 'none' }}\n          >\n            {text}\n          </text>\n        )}\n      </svg>\n    </div>\n  )\n}\n"],"mappings":";AA4CM,cAsKA,YAtKA;AA1CN;AAAA,EAIE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,UAAU;AAEnB;AAAA,EAEE;AAAA,OAGK;AAIP,SAAS,eAAe;AACxB,SAAS,kBAAkB;AAC3B,SAAS,0BAA0B;AAEnC,SAAS,sBAAsB;AAC/B,SAAS,0BAA0B;AAEnC,SAAS,gBAAgB;AACzB,SAAS,oBAAoB;AAE7B,SAAS,iBAAiB;AAEnB,MAAM,YAAY,KAAK,SAASA,WAAU;AAAA,EAC/C;AAAA,EACA,GAAG;AACL,GAIc;AACZ,SACE,oBAAC,aAAU,aACT,8BAAC,qBAAkB,aAA2B,GAAG,OAAO,GAC1D;AAEJ,CAAC;AAED,MAAM,oBAAoB,CAAC;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AACF,MAIiB;AACf,QAAM,UAAU,mBAAmB,aAAa,WAAW;AAI3D,MAAI,QAAQ,QAAQ,KAAK,SAAS,WAAW,GAAG;AAC9C,WAAO,oBAAC,KAAK,aAAL,EAAiB,SAAkB,aAAa,OAAO,sBAAsB;AAAA,EACvF;AAEA,SACE,oBAAC,QAAK,SACH,eAAK,SAAS,IAAI,CAAC,SAAS,MAC3B,oBAAC,KAAK,MAAL,EAA4B,SAAkB,MAAM,KAAK,SAAS,OAAO,GACxE,8BAAC,WAAQ,SAAkB,KADb,QAAQ,GAExB,CACD,GACH;AAEJ;AASO,SAAS,KAAoC;AAAA,EAClD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAyE;AACvE,QAAM,KAAK,MAAM;AACjB,QAAM,CAAC,SAAS,UAAU,IAAI,SAAyB,IAAI;AAC3D,QAAM,gBAAgB,SAAS;AAAA,IAC7B,SAAS;AAAA,IACT,UAAU;AAAA,IACV,OAAO;AAAA,EACT,CAAC;AAED,YAAU,MAAM;AACd,QAAI,WAAW,QAAQ,WAAW;AAAM;AAExC,WAAO,aAAa;AAAA,MAClB;AAAA,MACA,kBAAkB,cAAY,QAAQ,wBAAwB,QAAQ;AAAA,IACxE,CAAC;AAAA,EACH,GAAG,CAAC,SAAS,OAAO,CAAC;AAErB,SACE,oBAAC,MAAI,GAAG,aAAa,KAAK,YAAY,WAAW,GAAG,eAAe,SAAS,GACzE,UACH;AAEJ;AAEA,KAAK,cAAc;AAEnB,KAAK,OAAO;AAcZ,SAAS,SAAwC;AAAA,EAC/C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAA4F;AAC1F,QAAM,KAAK,MAAM;AACjB,QAAM,CAAC,SAAS,UAAU,IAAI,SAAyB,IAAI;AAC3D,QAAM,gBAAgB,SAAS;AAAA,IAC7B,SAAS;AAAA,IACT,GAAG,mBAAmB,CAAC,IAAI,GAAG,CAAC,CAAC,EAAE,QAAQ,IAAI,QAAQ,CAAC,CAAC,EAAE,CAAC,EAAE,IAAI,CAAC,CAAC,MAAM;AACvE,YAAM,CAAC,UAAU,WAAW,IAAI,WAAW,OAAO,KAAK;AACvD,YAAM,OAAO,MAAM,QAAQ,EAAE,WAAW;AACxC,YAAM,YAAY,gBAAgB,OAAO,OAAO,QAAQ,CAAC,CAAC;AAE1D,aAAO,SAAS,IAAI,EAAE,SAAS,OAAO,IAAI,EAAE,WAAW,UAAU,UAAU;AAAA,IAC7E,CAAC;AAAA,EACH,CAAC;AAED,YAAU,MAAM;AACd,QAAI,WAAW,QAAQ,WAAW;AAAM;AAExC,WAAO,aAAa;AAAA,MAClB;AAAA,MACA,kBAAkB,cAAY,QAAQ,mBAAmB,OAAO,QAAQ;AAAA,IAC1E,CAAC;AAAA,EACH,GAAG,CAAC,SAAS,SAAS,KAAK,CAAC;AAE5B,SACE,oBAAC,MAAI,GAAG,aAAa,KAAK,YAAY,WAAW,GAAG,eAAe,SAAS,GACzE,UACH;AAEJ;AAOA,MAAM,2CAA2C;AACjD,MAAM,gCAAgC;AAEtC,SAAS,gBAAgB,EAAE,SAAS,YAAY,GAAoC;AAClF,QAAM,cAAc,eAAe;AACnC,QAAM,CAAC,SAAS,UAAU,IAAI,SAAyB,IAAI;AAI3D,QAAM,oBAAoB,aAAa,eAAe;AACtD,QAAM,oBAAoB,aAAa,UAAU;AACjD,QAAM,OAAO,aAAa;AAE1B,QAAM,kBAAkB,qBAAqB,CAAC;AAE9C,YAAU,MAAM;AACd,QAAI,WAAW,QAAQ,WAAW;AAAM;AAExC,WAAO,aAAa;AAAA,MAClB;AAAA,MACA,kBAAkB,cAAY,QAAQ,wBAAwB,QAAQ;AAAA,IACxE,CAAC;AAAA,EACH,GAAG,CAAC,SAAS,OAAO,CAAC;AAErB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,WAAW,SAAS;AAAA,QAClB,OAAO;AAAA,QACP,YAAY;AAAA,MACd,CAAC;AAAA,MACD,OAAO;AAAA,QACL,QAAQ,kBAAkB,IAAI;AAAA,QAC9B,YAAY,kBAAkB,WAAW;AAAA,MAC3C;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,OAAM;AAAA,UACN,OAAM;AAAA,UACN,QAAO;AAAA,UACP,WAAW,SAAS,EAAE,UAAU,WAAW,SAAS,EAAE,CAAC;AAAA,UAEvD;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,GAAG;AAAA,gBACH,GAAG;AAAA,gBACH,OAAM;AAAA,gBACN,QAAO;AAAA,gBACP,aAAa;AAAA,gBACb,iBAAgB;AAAA,gBAChB,MAAK;AAAA,gBACL,QAAO;AAAA,gBACP,IAAG;AAAA,gBACH,IAAG;AAAA;AAAA,YACL;AAAA,YACC,QAAQ,QACP;AAAA,cAAC;AAAA;AAAA,gBACC,GAAE;AAAA,gBACF,GAAE;AAAA,gBACF,kBAAiB;AAAA,gBACjB,YAAW;AAAA,gBACX,MAAK;AAAA,gBACL,UAAS;AAAA,gBACT,YAAW;AAAA,gBACX,OAAO,EAAE,YAAY,OAAO;AAAA,gBAE3B;AAAA;AAAA,YACH;AAAA;AAAA;AAAA,MAEJ;AAAA;AAAA,EACF;AAEJ;","names":["SlotValue"]}
+{"version":3,"sources":["../../../../../../src/runtimes/react/controls/slot/slot-value.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ComponentPropsWithoutRef,\n  type ElementType,\n  type ReactNode,\n  useEffect,\n  useState,\n  memo,\n} from 'react'\n\nimport {\n  SlotDefinition,\n  SlotControl,\n  type DataType,\n  type ControlInstanceKey,\n} from '@makeswift/controls'\n\nimport { type SlotConfig, type SlotPlaceholderConfig } from '../../../../controls/slot'\n\nimport { Element } from '../../components/Element'\nimport { getIndexes } from '../../../../components/utils/columns'\nimport { useResponsiveStyle } from '../../../../components/utils/responsive-style'\n\nimport { useIsInBuilder } from '../../hooks/use-is-in-builder'\nimport { useControlInstance } from '../../hooks/use-control-instance'\n\nimport { pollBoxModel } from '../../poll-box-model'\nimport { useStyle } from '../../css-runtime/hooks/use-style'\nimport clsx from 'clsx'\n\nimport { NodeValue } from '../node-value'\n\nexport const SlotValue = memo(function SlotValue({\n  instanceKey,\n  ...props\n}: {\n  data: DataType<SlotDefinition<ReactNode>> | undefined\n  instanceKey: ControlInstanceKey | undefined\n  config: SlotConfig\n}): ReactNode {\n  return (\n    <NodeValue instanceKey={instanceKey}>\n      <SlotOrPlaceholder instanceKey={instanceKey} {...props} />\n    </NodeValue>\n  )\n})\n\nconst SlotOrPlaceholder = ({\n  data,\n  instanceKey,\n  config,\n}: {\n  data: DataType<SlotDefinition<ReactNode>> | undefined\n  instanceKey: ControlInstanceKey | undefined\n  config: SlotConfig\n}): ReactNode => {\n  const control = useControlInstance(instanceKey, SlotControl)\n\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} placeholder={config.unstable_placeholder} />\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 { className: baseClassName, styleElement: baseStyleElement } = 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      getElement: () => element,\n      onBoxModelChange: boxModel => control.changeContainerBoxModel(boxModel),\n    })\n  }, [element, control])\n\n  return (\n    <>\n      <As {...restOfProps} ref={setElement} className={clsx(baseClassName, className)}>\n        {children}\n      </As>\n      {baseStyleElement}\n    </>\n  )\n}\n\nSlot.Placeholder = SlotPlaceholder\n\nSlot.Item = SlotItem\n\ntype SlotItemProps<T extends ElementType> = {\n  as?: T\n  control: SlotControl | null\n  // @arvin: review for correctness\n  grid: DataType<SlotDefinition<ReactNode>> extends undefined\n    ? undefined\n    : NonNullable<DataType<SlotDefinition<ReactNode>>>['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>>): ReactNode {\n  const As = as ?? 'div'\n  const [element, setElement] = useState<Element | null>(null)\n  const { className: baseClassName, styleElement: baseStyleElement } = 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      getElement: () => element,\n      onBoxModelChange: boxModel => control.changeItemBoxModel(index, boxModel),\n    })\n  }, [element, control, index])\n\n  return (\n    <>\n      <As {...restOfProps} ref={setElement} className={clsx(baseClassName, className)}>\n        {children}\n      </As>\n      {baseStyleElement}\n    </>\n  )\n}\n\ntype SlotPlaceholderProps = {\n  control: SlotControl | null\n  placeholder?: SlotPlaceholderConfig\n}\n\nconst DEFAULT_SHOW_PLACEHOLDER_IN_BUILDER_ONLY = false\nconst DEFAULT_PLACEHOLDER_HEIGHT_PX = 80\n\nfunction SlotPlaceholder({ control, placeholder }: SlotPlaceholderProps): ReactNode {\n  const isInBuilder = useIsInBuilder()\n  const [element, setElement] = useState<Element | null>(null)\n\n  // TODO: When ready, we can default to only showing the slot placeholder in\n  // the builder\n  const showInBuilderOnly = placeholder?.builderOnly ?? DEFAULT_SHOW_PLACEHOLDER_IN_BUILDER_ONLY\n  const placeholderHeight = placeholder?.height ?? DEFAULT_PLACEHOLDER_HEIGHT_PX\n  const text = placeholder?.text\n\n  const hidePlaceholder = showInBuilderOnly && !isInBuilder\n\n  useEffect(() => {\n    if (element == null || control == null) return\n\n    return pollBoxModel({\n      getElement: () => element,\n      onBoxModelChange: boxModel => control.changeContainerBoxModel(boxModel),\n    })\n  }, [element, control])\n\n  const { className: placeholderClassName, styleElement: placeholderStyleElement } = useStyle({\n    width: '100%',\n    background: 'rgba(161, 168, 194, 0.18)',\n  })\n  const { className: svgClassName, styleElement: svgStyleElement } = useStyle({\n    overflow: 'visible',\n    padding: 8,\n  })\n\n  return (\n    <>\n      <div\n        ref={setElement}\n        className={placeholderClassName}\n        style={{\n          height: hidePlaceholder ? 0 : placeholderHeight,\n          visibility: hidePlaceholder ? 'hidden' : undefined,\n        }}\n      >\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\" className={svgClassName}>\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          {text != null && (\n            <text\n              x=\"50%\"\n              y=\"50%\"\n              dominantBaseline=\"central\"\n              textAnchor=\"middle\"\n              fill=\"rgba(161, 168, 194, 0.80)\"\n              fontSize=\"14px\"\n              fontFamily=\"sans-serif\"\n              style={{ userSelect: 'none' }}\n            >\n              {text}\n            </text>\n          )}\n        </svg>\n        {svgStyleElement}\n      </div>\n      {placeholderStyleElement}\n    </>\n  )\n}\n"],"mappings":"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","names":["SlotValue"]}

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

@@ -6,8 +6,8 @@ import { useSwatches, useTypography } from "../hooks/makeswift-api";
 import { colorToString } from "../../../components/utils/colorToString";
 import { responsiveStyle } from "../../../components/utils/responsive-style";
 import { isNonNullable } from "../../../utils/isNonNullable";
-import { useStyle } from "../use-style";
 import { useBreakpoints } from "../hooks/use-breakpoints";
+import { useStyle } from "../css-runtime/hooks/use-style";
 function typographyFragementToTypographyControlData(fragment) {
   if (fragment == null)
     return void 0;
@@ -130,15 +130,16 @@ function typographyCss(breakpoints, style) {
     shallowMergeFallbacks
   );
 }
-function useTypographyClassName(value) {
+function useTypographyStyle(value) {
   const breakpoints = useBreakpoints();
-  return useStyle(typographyCss(breakpoints, value));
+  const cssObject = typographyCss(breakpoints, value);
+  return useStyle(cssObject);
 }
 export {
   useEnhancedTypography as default,
   getTypographyStyleSwatchIds,
   typographyCss,
   typographyFragementToTypographyControlData,
-  useTypographyClassName
+  useTypographyStyle
 };
 //# sourceMappingURL=typography.js.map