@makeswift/runtime 0.13.0 → 0.14.0

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,143 @@
+import { useSwatches, useTypography } from "../hooks/makeswift-api";
+import { colorToString } from "../../../components/utils/colorToString";
+import { useResponsiveStyle } from "../../../components/utils/responsive-style";
+import { findBreakpointOverride, shallowMergeFallbacks } from "../../../state/modules/breakpoints";
+import { isNonNullable } from "../../../utils/isNonNullable";
+import { useStyle } from "../use-style";
+import { useBreakpoints } from "../hooks/use-breakpoints";
+function typographyFragementToTypographyControlData(typography) {
+  if (typography == null)
+    return void 0;
+  return {
+    id: typography.id,
+    style: typography.style.map(({ deviceId, value }) => ({
+      deviceId,
+      value: {
+        fontFamily: value.fontFamily ?? void 0,
+        lineHeight: value.lineHeight ?? void 0,
+        letterSpacing: value.letterSpacing ?? void 0,
+        fontWeight: value.fontWeight ?? void 0,
+        textAlign: value.textAlign ?? void 0,
+        uppercase: value.uppercase ?? void 0,
+        underline: value.underline ?? void 0,
+        strikethrough: value.strikethrough ?? void 0,
+        italic: value.italic ?? void 0,
+        fontSize: value.fontSize ?? void 0,
+        color: value.color ?? void 0
+      }
+    }))
+  };
+}
+function getTypographyStyleSwatchIds(style) {
+  return style?.map((override) => override.value).flatMap((typographyStyle) => typographyStyle.color?.swatchId).filter(isNonNullable) ?? [];
+}
+const withColor = (swatches) => (deviceRawTypographyValue) => {
+  const { value, deviceId } = deviceRawTypographyValue;
+  if (value.color == null) {
+    const { color, ...nextValue } = value;
+    return {
+      deviceId,
+      value: nextValue
+    };
+  }
+  return {
+    deviceId,
+    value: {
+      ...value,
+      color: {
+        swatch: swatches.find((s) => s && s.id === value.color?.swatchId),
+        alpha: value.color?.alpha ?? void 0
+      }
+    }
+  };
+};
+const getDeviceId = ({ deviceId }) => deviceId;
+function useEnhancedTypography(value) {
+  const typography = typographyFragementToTypographyControlData(useTypography(value?.id ?? null));
+  const source = typography?.style ?? [];
+  const override = value?.style ?? [];
+  const breakpoints = useBreakpoints();
+  const swatchIds = [
+    ...getTypographyStyleSwatchIds(value?.style),
+    ...getTypographyStyleSwatchIds(typography?.style)
+  ];
+  const swatches = useSwatches(swatchIds).filter(isNonNullable);
+  const enhancedSource = source.map(withColor(swatches));
+  const enhancedOverride = override.map(withColor(swatches));
+  const devices = [
+    ...new Set(enhancedSource.map(getDeviceId).concat(enhancedOverride.map(getDeviceId)))
+  ];
+  return devices.map((deviceId) => {
+    const deviceSource = findBreakpointOverride(breakpoints, enhancedSource, deviceId)?.value;
+    const deviceOverride = findBreakpointOverride(
+      breakpoints,
+      enhancedOverride,
+      deviceId,
+      (v) => v
+    )?.value;
+    if (deviceSource && deviceOverride) {
+      return {
+        deviceId,
+        value: { ...deviceSource, ...deviceOverride }
+      };
+    } else if (deviceOverride) {
+      return {
+        deviceId,
+        value: deviceOverride
+      };
+    } else if (deviceSource) {
+      return {
+        deviceId,
+        value: deviceSource
+      };
+    }
+    return null;
+  }).filter(isNonNullable);
+}
+function useTypographyClassName(value) {
+  return useStyle(
+    useResponsiveStyle(
+      [value],
+      ([value2]) => {
+        if (value2 === void 0)
+          return {};
+        let styles = {};
+        if (value2.color != null)
+          styles.color = colorToString(value2.color);
+        if (value2.fontFamily != null)
+          styles.fontFamily = value2.fontFamily;
+        if (value2.fontSize != null && value2.fontSize.value != null && value2.fontSize.unit != null)
+          styles.fontSize = `${value2.fontSize.value}${value2.fontSize.unit}`;
+        if (value2.fontWeight != null)
+          styles.fontWeight = value2.fontWeight;
+        if (value2.lineHeight != null)
+          styles.lineHeight = value2.lineHeight;
+        if (value2.letterSpacing != null)
+          styles.letterSpacing = `${value2.letterSpacing / 10}em`;
+        if (value2.uppercase != null)
+          styles.textTransform = value2.uppercase === true ? "uppercase" : "initial";
+        if (value2.underline != null || value2.strikethrough != null)
+          styles.textDecoration = [
+            Boolean(value2.underline) && "underline",
+            Boolean(value2.strikethrough) && "line-through"
+          ].filter(Boolean).join(" ");
+        if (value2.italic != null)
+          styles.fontStyle = value2.italic === true ? "italic" : "initial";
+        return styles;
+      },
+      shallowMergeFallbacks
+    )
+  );
+}
+function useTypographyValue(data) {
+  const enhancedTypography = useEnhancedTypography(data);
+  return useTypographyClassName(enhancedTypography);
+}
+export {
+  useEnhancedTypography as default,
+  getTypographyStyleSwatchIds,
+  typographyFragementToTypographyControlData,
+  useTypographyClassName,
+  useTypographyValue
+};
+//# sourceMappingURL=typography.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/runtimes/react/controls/typography.ts"],"sourcesContent":["import { CSSObject } from '@emotion/serialize'\nimport { TypographyControlData } from '../../../controls/typography'\nimport { useSwatches, useTypography } from '../hooks/makeswift-api'\nimport { Typography, Swatch } from '../../../api'\nimport { colorToString } from '../../../components/utils/colorToString'\nimport { useResponsiveStyle } from '../../../components/utils/responsive-style'\nimport { ColorValue } from '../../../components/utils/types'\nimport { DeviceOverride, ResponsiveValue } from '../../../prop-controllers'\nimport { findBreakpointOverride, shallowMergeFallbacks } from '../../../state/modules/breakpoints'\nimport { isNonNullable } from '../../../utils/isNonNullable'\nimport { useStyle } from '../use-style'\nimport { useBreakpoints } from '../hooks/use-breakpoints'\n\nexport function typographyFragementToTypographyControlData(\n  typography: Typography | null,\n): TypographyControlData[number] | undefined {\n  if (typography == null) return undefined\n  return {\n    id: typography.id,\n    style: typography.style.map(({ deviceId, value }) => ({\n      deviceId,\n      value: {\n        fontFamily: value.fontFamily ?? undefined,\n        lineHeight: value.lineHeight ?? undefined,\n        letterSpacing: value.letterSpacing ?? undefined,\n        fontWeight: value.fontWeight ?? undefined,\n        textAlign: value.textAlign ?? undefined,\n        uppercase: value.uppercase ?? undefined,\n        underline: value.underline ?? undefined,\n        strikethrough: value.strikethrough ?? undefined,\n        italic: value.italic ?? undefined,\n        fontSize: value.fontSize ?? undefined,\n        color: value.color ?? undefined,\n      },\n    })),\n  }\n}\n\ntype EnhancedColor = {\n  color?: ColorValue\n}\n\nexport type TypographyControlDataValue = Exclude<\n  TypographyControlData[number],\n  undefined\n>['style'][number]['value']\n\ntype EnhancedTypographyValue = Omit<TypographyControlDataValue, keyof EnhancedColor> & EnhancedColor\n\nexport type EnhancedTypography = Array<DeviceOverride<EnhancedTypographyValue>>\n\nexport function getTypographyStyleSwatchIds(\n  style:\n    | Exclude<TypographyControlData[number], undefined>['style']\n    | Typography['style']\n    | null\n    | undefined,\n): string[] {\n  return (\n    style\n      ?.map(override => override.value)\n      .flatMap(typographyStyle => typographyStyle.color?.swatchId)\n      .filter(isNonNullable) ?? []\n  )\n}\n\nconst withColor =\n  (swatches: Swatch[]) =>\n  (\n    deviceRawTypographyValue: DeviceOverride<TypographyControlDataValue>,\n  ): DeviceOverride<EnhancedTypographyValue> => {\n    const { value, deviceId } = deviceRawTypographyValue\n\n    if (value.color == null) {\n      const { color, ...nextValue } = value\n      return {\n        deviceId,\n        value: nextValue,\n      }\n    }\n    return {\n      deviceId,\n      value: {\n        ...value,\n        color: {\n          swatch: swatches.find(s => s && s.id === value.color?.swatchId),\n          alpha: value.color?.alpha ?? undefined,\n        },\n      },\n    }\n  }\n\nconst getDeviceId = ({ deviceId }: DeviceOverride<unknown>) => deviceId\n\n/**\n * `enhanced` here just means typography ids have been replaced with the related entity.\n */\nexport default function useEnhancedTypography(\n  value?: TypographyControlData[number] | null,\n): EnhancedTypography {\n  const typography = typographyFragementToTypographyControlData(useTypography(value?.id ?? null))\n  const source = typography?.style ?? []\n  const override = value?.style ?? []\n  const breakpoints = useBreakpoints()\n\n  const swatchIds = [\n    ...getTypographyStyleSwatchIds(value?.style),\n    ...getTypographyStyleSwatchIds(typography?.style),\n  ]\n  const swatches = useSwatches(swatchIds).filter(isNonNullable)\n\n  const enhancedSource = source.map(withColor(swatches))\n  const enhancedOverride = override.map(withColor(swatches))\n\n  const devices = [\n    ...new Set(enhancedSource.map(getDeviceId).concat(enhancedOverride.map(getDeviceId))),\n  ]\n\n  return devices\n    .map(deviceId => {\n      const deviceSource = findBreakpointOverride(breakpoints, enhancedSource, deviceId)?.value\n      const deviceOverride = findBreakpointOverride(\n        breakpoints,\n        enhancedOverride,\n        deviceId,\n        v => v,\n      )?.value\n\n      if (deviceSource && deviceOverride) {\n        return {\n          deviceId,\n          value: { ...deviceSource, ...deviceOverride },\n        }\n      } else if (deviceOverride) {\n        return {\n          deviceId,\n          value: deviceOverride,\n        }\n      } else if (deviceSource) {\n        return {\n          deviceId,\n          value: deviceSource,\n        }\n      }\n      return null\n    })\n    .filter(isNonNullable)\n}\n\nexport function useTypographyClassName(value: EnhancedTypography): string {\n  return useStyle(\n    useResponsiveStyle<\n      EnhancedTypographyValue,\n      [ResponsiveValue<EnhancedTypographyValue> | null | undefined]\n    >(\n      [value],\n      ([value]) => {\n        if (value === undefined) return {}\n\n        let styles: CSSObject = {}\n        if (value.color != null) styles.color = colorToString(value.color)\n        if (value.fontFamily != null) styles.fontFamily = value.fontFamily\n        if (value.fontSize != null && value.fontSize.value != null && value.fontSize.unit != null)\n          styles.fontSize = `${value.fontSize.value}${value.fontSize.unit}`\n        if (value.fontWeight != null) styles.fontWeight = value.fontWeight\n        if (value.lineHeight != null) styles.lineHeight = value.lineHeight\n        if (value.letterSpacing != null) styles.letterSpacing = `${value.letterSpacing / 10}em`\n        if (value.uppercase != null)\n          styles.textTransform = value.uppercase === true ? 'uppercase' : 'initial'\n        if (value.underline != null || value.strikethrough != null)\n          styles.textDecoration = [\n            Boolean(value.underline) && 'underline',\n            Boolean(value.strikethrough) && 'line-through',\n          ]\n            .filter(Boolean)\n            .join(' ')\n        if (value.italic != null) styles.fontStyle = value.italic === true ? 'italic' : 'initial'\n\n        return styles\n      },\n      shallowMergeFallbacks,\n    ),\n  )\n}\n\nexport type TypographyControlValue = string\n\nexport function useTypographyValue(\n  data: TypographyControlData[number] | undefined,\n): TypographyControlValue {\n  // for each breakpoint fetch related resources and merge its value with its override\n  const enhancedTypography = useEnhancedTypography(data)\n\n  // for each breakpoint shallow merge back up through the breakpoints and create a className\n  return useTypographyClassName(enhancedTypography)\n}\n"],"mappings":"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","names":["value"]}

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

@@ -0,0 +1,275 @@
+import { jsx } from "react/jsx-runtime";
+import { useRef } from "react";
+import * as ReactPage from "../../state/react-page";
+import { Props } from "../../prop-controllers";
+import {
+  BorderPropControllerFormat,
+  BorderRadiusPropControllerFormat,
+  MarginPropControllerFormat,
+  PaddingPropControllerFormat,
+  ShadowsPropControllerFormat,
+  WidthPropControllerFormat
+} from "../../prop-controllers/descriptors";
+import {
+  useBoxShadow,
+  useResponsiveColor,
+  useBorder as useBorderData
+} from "../../components/hooks";
+import {
+  useResponsiveBorder,
+  useResponsiveBorderRadius,
+  useResponsiveMargin,
+  useResponsivePadding,
+  useResponsiveShadow,
+  useResponsiveWidth
+} from "../../components/utils/responsive-style";
+import {
+  CheckboxControlType,
+  ColorControlType,
+  ComboboxControlType,
+  ImageControlType,
+  LinkControlType,
+  ListControlType,
+  NumberControlType,
+  SelectControlType,
+  ShapeControlType,
+  SlotControlType,
+  StyleControlType,
+  TextAreaControlType,
+  TextInputControlType,
+  RichTextControlType,
+  RichTextV2ControlType,
+  StyleV2ControlType,
+  TypographyControlType
+} from "../../controls";
+import { useFormattedStyle } from "./controls/style";
+import { ControlValue } from "./controls/control";
+import { RenderHook } from "./components";
+import { useSlot } from "./controls/slot";
+import { useStyle } from "./use-style";
+import { useRichText } from "./controls/rich-text/rich-text";
+import { useRichTextV2 } from "./controls/rich-text-v2";
+import { IconRadioGroupControlType } from "../../controls/icon-radio-group";
+import { useStore } from "./hooks/use-store";
+import { useDocumentKey } from "./hooks/use-document-key";
+import { useSelector } from "./hooks/use-selector";
+function useWidthStyle(value, descriptor) {
+  return useStyle(useResponsiveWidth(value, descriptor.options.defaultValue));
+}
+function usePaddingStyle(value) {
+  return useStyle(useResponsivePadding(value));
+}
+function useMarginStyle(value) {
+  return useStyle(useResponsiveMargin(value));
+}
+function useBorderRadiusStyle(value) {
+  return useStyle(useResponsiveBorderRadius(value));
+}
+function useShadowsStyle(value) {
+  const shadowValue = useBoxShadow(value);
+  return useStyle(useResponsiveShadow(shadowValue ?? void 0));
+}
+function useBorderStyle(value) {
+  const borderData = useBorderData(value);
+  return useStyle(useResponsiveBorder(borderData ?? void 0));
+}
+function PropsValue({ element, children }) {
+  const store = useStore();
+  const propControllerDescriptorsRef = useRef(
+    ReactPage.getComponentPropControllerDescriptors(store.getState(), element.type) ?? {}
+  );
+  const props = element.props;
+  const documentKey = useDocumentKey();
+  const propControllers = useSelector((state) => {
+    if (documentKey == null)
+      return null;
+    return ReactPage.getPropControllers(state, documentKey, element.key);
+  });
+  return Object.entries(propControllerDescriptorsRef.current).reduceRight(
+    (renderFn, [propName, descriptor]) => (propsValue) => {
+      switch (descriptor.type) {
+        case CheckboxControlType:
+        case NumberControlType:
+        case TextInputControlType:
+        case TextAreaControlType:
+        case SelectControlType:
+        case ColorControlType:
+        case IconRadioGroupControlType:
+        case ImageControlType:
+        case ComboboxControlType:
+        case ShapeControlType:
+        case ListControlType:
+        case LinkControlType:
+        case StyleV2ControlType:
+        case TypographyControlType:
+          return /* @__PURE__ */ jsx(
+            ControlValue,
+            {
+              definition: descriptor,
+              data: props[propName],
+              control: propControllers?.[propName],
+              children: (value) => renderFn({ ...propsValue, [propName]: value })
+            }
+          );
+        case StyleControlType: {
+          const control = propControllers?.[propName] ?? null;
+          return /* @__PURE__ */ jsx(
+            RenderHook,
+            {
+              hook: useFormattedStyle,
+              parameters: [props[propName], descriptor, control],
+              children: (value) => renderFn({ ...propsValue, [propName]: value })
+            },
+            descriptor.type
+          );
+        }
+        case RichTextControlType: {
+          const control = propControllers?.[propName] ?? null;
+          return /* @__PURE__ */ jsx(
+            RenderHook,
+            {
+              hook: useRichText,
+              parameters: [props[propName], control],
+              children: (value) => renderFn({ ...propsValue, [propName]: value })
+            },
+            descriptor.type
+          );
+        }
+        case RichTextV2ControlType: {
+          const control = propControllers?.[propName] ?? null;
+          return /* @__PURE__ */ jsx(
+            RenderHook,
+            {
+              hook: useRichTextV2,
+              parameters: [props[propName], descriptor, control],
+              children: (value) => renderFn({ ...propsValue, [propName]: value })
+            },
+            descriptor.type
+          );
+        }
+        case SlotControlType: {
+          const control = propControllers?.[propName] ?? null;
+          return /* @__PURE__ */ jsx(
+            RenderHook,
+            {
+              hook: useSlot,
+              parameters: [props[propName], control],
+              children: (value) => renderFn({ ...propsValue, [propName]: value })
+            },
+            descriptor.type
+          );
+        }
+        case Props.Types.Width:
+          switch (descriptor.options.format) {
+            case WidthPropControllerFormat.ClassName:
+              return /* @__PURE__ */ jsx(
+                RenderHook,
+                {
+                  hook: useWidthStyle,
+                  parameters: [props[propName], descriptor],
+                  children: (value) => renderFn({ ...propsValue, [propName]: value })
+                },
+                descriptor.type
+              );
+            default:
+              return renderFn({ ...propsValue, [propName]: props[propName] });
+          }
+        case Props.Types.Padding:
+          switch (descriptor.options.format) {
+            case PaddingPropControllerFormat.ClassName:
+              return /* @__PURE__ */ jsx(
+                RenderHook,
+                {
+                  hook: usePaddingStyle,
+                  parameters: [props[propName]],
+                  children: (value) => renderFn({ ...propsValue, [propName]: value })
+                },
+                descriptor.type
+              );
+            default:
+              return renderFn({ ...propsValue, [propName]: props[propName] });
+          }
+        case Props.Types.Margin:
+          switch (descriptor.options.format) {
+            case MarginPropControllerFormat.ClassName:
+              return /* @__PURE__ */ jsx(
+                RenderHook,
+                {
+                  hook: useMarginStyle,
+                  parameters: [props[propName]],
+                  children: (value) => renderFn({ ...propsValue, [propName]: value })
+                },
+                descriptor.type
+              );
+            default:
+              return renderFn({ ...propsValue, [propName]: props[propName] });
+          }
+        case Props.Types.BorderRadius:
+          switch (descriptor.options.format) {
+            case BorderRadiusPropControllerFormat.ClassName:
+              return /* @__PURE__ */ jsx(
+                RenderHook,
+                {
+                  hook: useBorderRadiusStyle,
+                  parameters: [props[propName]],
+                  children: (value) => renderFn({ ...propsValue, [propName]: value })
+                },
+                descriptor.type
+              );
+            default:
+              return renderFn({ ...propsValue, [propName]: props[propName] });
+          }
+        case Props.Types.Shadows:
+          switch (descriptor.options.format) {
+            case ShadowsPropControllerFormat.ClassName:
+              return /* @__PURE__ */ jsx(
+                RenderHook,
+                {
+                  hook: useShadowsStyle,
+                  parameters: [props[propName]],
+                  children: (value) => renderFn({ ...propsValue, [propName]: value })
+                },
+                descriptor.type
+              );
+            default:
+              return renderFn({ ...propsValue, [propName]: props[propName] });
+          }
+        case Props.Types.Border:
+          switch (descriptor.options.format) {
+            case BorderPropControllerFormat.ClassName:
+              return /* @__PURE__ */ jsx(
+                RenderHook,
+                {
+                  hook: useBorderStyle,
+                  parameters: [props[propName]],
+                  children: (value) => renderFn({ ...propsValue, [propName]: value })
+                },
+                descriptor.type
+              );
+            default:
+              return renderFn({ ...propsValue, [propName]: props[propName] });
+          }
+        case Props.Types.ResponsiveColor:
+          return /* @__PURE__ */ jsx(
+            RenderHook,
+            {
+              hook: useResponsiveColor,
+              parameters: [props[propName]],
+              children: (value) => renderFn({ ...propsValue, [propName]: value })
+            },
+            descriptor.type
+          );
+        default:
+          return renderFn({ ...propsValue, [propName]: props[propName] });
+      }
+    },
+    children
+  )({});
+}
+export {
+  PropsValue,
+  useBorderRadiusStyle,
+  useBorderStyle,
+  useShadowsStyle
+};
+//# sourceMappingURL=controls.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/runtimes/react/controls.tsx"],"sourcesContent":["import { useRef } from 'react'\n\nimport * as ReactPage from '../../state/react-page'\nimport { Props } from '../../prop-controllers'\nimport {\n  BorderDescriptor,\n  BorderPropControllerFormat,\n  BorderRadiusDescriptor,\n  BorderRadiusPropControllerFormat,\n  BorderRadiusValue,\n  BorderValue,\n  Descriptor,\n  MarginDescriptor,\n  MarginPropControllerFormat,\n  MarginValue,\n  PaddingDescriptor,\n  PaddingPropControllerFormat,\n  PaddingValue,\n  ResolveOptions,\n  ResponsiveValue,\n  ShadowsDescriptor,\n  ShadowsPropControllerFormat,\n  ShadowsValue,\n  WidthPropControllerFormat,\n  WidthDescriptor,\n  WidthValue,\n} from '../../prop-controllers/descriptors'\nimport {\n  useBoxShadow,\n  useResponsiveColor,\n  useBorder as useBorderData,\n} from '../../components/hooks'\nimport type { ColorValue } from '../../components/utils/types'\nimport {\n  useResponsiveBorder,\n  useResponsiveBorderRadius,\n  useResponsiveMargin,\n  useResponsivePadding,\n  useResponsiveShadow,\n  useResponsiveWidth,\n} from '../../components/utils/responsive-style'\nimport {\n  CheckboxControlType,\n  ColorControlType,\n  ComboboxControlType,\n  ImageControlType,\n  LinkControlType,\n  ListControlType,\n  NumberControlType,\n  SelectControlType,\n  ShapeControlType,\n  SlotControl,\n  SlotControlType,\n  StyleControlType,\n  TextAreaControlType,\n  TextInputControlType,\n  RichTextControl,\n  RichTextControlType,\n  StyleControl,\n  RichTextV2Control,\n  RichTextV2ControlType,\n  StyleV2ControlType,\n  TypographyControlType,\n} from '../../controls'\nimport { useFormattedStyle } from './controls/style'\nimport { ControlValue } from './controls/control'\nimport { RenderHook } from './components'\nimport { useSlot } from './controls/slot'\nimport { useStyle } from './use-style'\nimport { useRichText } from './controls/rich-text/rich-text'\nimport { useRichTextV2 } from './controls/rich-text-v2'\nimport { IconRadioGroupControlType } from '../../controls/icon-radio-group'\nimport { useStore } from './hooks/use-store'\nimport { useDocumentKey } from './hooks/use-document-key'\nimport { useSelector } from './hooks/use-selector'\n\nexport type ResponsiveColor = ResponsiveValue<ColorValue>\n\nfunction useWidthStyle(value: WidthValue | undefined, descriptor: WidthDescriptor): string {\n  return useStyle(useResponsiveWidth(value, descriptor.options.defaultValue))\n}\n\nexport type ResolveWidthControlValue<T extends Descriptor> = T extends WidthDescriptor\n  ? undefined extends ResolveOptions<T['options']>['format']\n    ? WidthValue | undefined\n    : ResolveOptions<T['options']>['format'] extends typeof WidthPropControllerFormat.ClassName\n    ? string\n    : ResolveOptions<\n        T['options']\n      >['format'] extends typeof WidthPropControllerFormat.ResponsiveValue\n    ? WidthValue | undefined\n    : never\n  : never\n\nfunction usePaddingStyle(value: PaddingValue | undefined): string {\n  return useStyle(useResponsivePadding(value))\n}\n\nexport type ResolvePaddingControlValue<T extends Descriptor> = T extends PaddingDescriptor\n  ? undefined extends ResolveOptions<T['options']>['format']\n    ? PaddingValue | undefined\n    : ResolveOptions<T['options']>['format'] extends typeof PaddingPropControllerFormat.ClassName\n    ? string\n    : ResolveOptions<\n        T['options']\n      >['format'] extends typeof PaddingPropControllerFormat.ResponsiveValue\n    ? PaddingValue | undefined\n    : never\n  : never\n\nfunction useMarginStyle(value: MarginValue | undefined): string {\n  return useStyle(useResponsiveMargin(value))\n}\n\nexport type ResolveMarginControlValue<T extends Descriptor> = T extends MarginDescriptor\n  ? undefined extends ResolveOptions<T['options']>['format']\n    ? MarginValue | undefined\n    : ResolveOptions<T['options']>['format'] extends typeof MarginPropControllerFormat.ClassName\n    ? string\n    : ResolveOptions<\n        T['options']\n      >['format'] extends typeof MarginPropControllerFormat.ResponsiveValue\n    ? MarginValue | undefined\n    : never\n  : never\n\nexport function useBorderRadiusStyle(value: BorderRadiusValue | undefined): string {\n  return useStyle(useResponsiveBorderRadius(value))\n}\n\nexport function useShadowsStyle(\n  value: ShadowsValue | undefined,\n): string | ShadowsValue | undefined {\n  const shadowValue = useBoxShadow(value)\n\n  return useStyle(useResponsiveShadow(shadowValue ?? undefined))\n}\n\nexport type ResolveBorderRadiusControlValue<T extends Descriptor> = T extends BorderRadiusDescriptor\n  ? undefined extends ResolveOptions<T['options']>['format']\n    ? BorderRadiusValue | undefined\n    : ResolveOptions<\n        T['options']\n      >['format'] extends typeof BorderRadiusPropControllerFormat.ClassName\n    ? string\n    : ResolveOptions<\n        T['options']\n      >['format'] extends typeof BorderRadiusPropControllerFormat.ResponsiveValue\n    ? BorderRadiusValue | undefined\n    : never\n  : never\n\nexport function useBorderStyle(value: BorderValue | undefined): string | BorderValue | undefined {\n  const borderData = useBorderData(value)\n\n  return useStyle(useResponsiveBorder(borderData ?? undefined))\n}\nexport type ResolveShadowsControlValue<T extends Descriptor> = T extends ShadowsDescriptor\n  ? undefined extends ResolveOptions<T['options']>['format']\n    ? ShadowsValue | undefined\n    : ResolveOptions<T['options']>['format'] extends typeof ShadowsPropControllerFormat.ClassName\n    ? string\n    : ResolveOptions<\n        T['options']\n      >['format'] extends typeof ShadowsPropControllerFormat.ResponsiveValue\n    ? ShadowsValue | undefined\n    : never\n  : never\n\nexport type ResolveBorderControlValue<T extends Descriptor> = T extends BorderDescriptor\n  ? undefined extends ResolveOptions<T['options']>['format']\n    ? BorderValue | undefined\n    : ResolveOptions<T['options']>['format'] extends typeof BorderPropControllerFormat.ClassName\n    ? string\n    : ResolveOptions<\n        T['options']\n      >['format'] extends typeof BorderPropControllerFormat.ResponsiveValue\n    ? BorderValue | undefined\n    : never\n  : never\n\ntype PropsValueProps = {\n  element: ReactPage.ElementData\n  children(props: Record<string, unknown>): JSX.Element\n}\n\nexport function PropsValue({ element, children }: PropsValueProps): JSX.Element {\n  const store = useStore()\n  const propControllerDescriptorsRef = useRef(\n    ReactPage.getComponentPropControllerDescriptors(store.getState(), element.type) ?? {},\n  )\n  const props = element.props as Record<string, any>\n  const documentKey = useDocumentKey()\n\n  const propControllers = useSelector(state => {\n    if (documentKey == null) return null\n\n    return ReactPage.getPropControllers(state, documentKey, element.key)\n  })\n\n  return Object.entries(propControllerDescriptorsRef.current).reduceRight(\n    (renderFn, [propName, descriptor]) =>\n      propsValue => {\n        switch (descriptor.type) {\n          case CheckboxControlType:\n          case NumberControlType:\n          case TextInputControlType:\n          case TextAreaControlType:\n          case SelectControlType:\n          case ColorControlType:\n          case IconRadioGroupControlType:\n          case ImageControlType:\n          case ComboboxControlType:\n          case ShapeControlType:\n          case ListControlType:\n          case LinkControlType:\n          case StyleV2ControlType:\n          case TypographyControlType:\n            return (\n              <ControlValue\n                definition={descriptor}\n                data={props[propName]}\n                control={propControllers?.[propName]}\n              >\n                {value => renderFn({ ...propsValue, [propName]: value })}\n              </ControlValue>\n            )\n\n          case StyleControlType: {\n            const control = (propControllers?.[propName] ?? null) as StyleControl | null\n\n            return (\n              <RenderHook\n                key={descriptor.type}\n                hook={useFormattedStyle}\n                parameters={[props[propName], descriptor, control]}\n              >\n                {value => renderFn({ ...propsValue, [propName]: value })}\n              </RenderHook>\n            )\n          }\n\n          case RichTextControlType: {\n            const control = (propControllers?.[propName] ?? null) as RichTextControl | null\n\n            return (\n              <RenderHook\n                key={descriptor.type}\n                hook={useRichText}\n                parameters={[props[propName], control]}\n              >\n                {value => renderFn({ ...propsValue, [propName]: value })}\n              </RenderHook>\n            )\n          }\n\n          case RichTextV2ControlType: {\n            const control = (propControllers?.[propName] ?? null) as RichTextV2Control | null\n\n            return (\n              <RenderHook\n                key={descriptor.type}\n                hook={useRichTextV2}\n                parameters={[props[propName], descriptor, control]}\n              >\n                {value => renderFn({ ...propsValue, [propName]: value })}\n              </RenderHook>\n            )\n          }\n\n          case SlotControlType: {\n            const control = (propControllers?.[propName] ?? null) as SlotControl | null\n\n            return (\n              <RenderHook\n                key={descriptor.type}\n                hook={useSlot}\n                parameters={[props[propName], control]}\n              >\n                {value => renderFn({ ...propsValue, [propName]: value })}\n              </RenderHook>\n            )\n          }\n\n          case Props.Types.Width:\n            switch (descriptor.options.format) {\n              case WidthPropControllerFormat.ClassName:\n                return (\n                  <RenderHook\n                    key={descriptor.type}\n                    hook={useWidthStyle}\n                    parameters={[props[propName], descriptor]}\n                  >\n                    {value => renderFn({ ...propsValue, [propName]: value })}\n                  </RenderHook>\n                )\n\n              default:\n                return renderFn({ ...propsValue, [propName]: props[propName] })\n            }\n\n          case Props.Types.Padding:\n            switch (descriptor.options.format) {\n              case PaddingPropControllerFormat.ClassName:\n                return (\n                  <RenderHook\n                    key={descriptor.type}\n                    hook={usePaddingStyle}\n                    parameters={[props[propName]]}\n                  >\n                    {value => renderFn({ ...propsValue, [propName]: value })}\n                  </RenderHook>\n                )\n\n              default:\n                return renderFn({ ...propsValue, [propName]: props[propName] })\n            }\n\n          case Props.Types.Margin:\n            switch (descriptor.options.format) {\n              case MarginPropControllerFormat.ClassName:\n                return (\n                  <RenderHook\n                    key={descriptor.type}\n                    hook={useMarginStyle}\n                    parameters={[props[propName]]}\n                  >\n                    {value => renderFn({ ...propsValue, [propName]: value })}\n                  </RenderHook>\n                )\n\n              default:\n                return renderFn({ ...propsValue, [propName]: props[propName] })\n            }\n\n          case Props.Types.BorderRadius:\n            switch (descriptor.options.format) {\n              case BorderRadiusPropControllerFormat.ClassName:\n                return (\n                  <RenderHook\n                    key={descriptor.type}\n                    hook={useBorderRadiusStyle}\n                    parameters={[props[propName]]}\n                  >\n                    {value => renderFn({ ...propsValue, [propName]: value })}\n                  </RenderHook>\n                )\n\n              default:\n                return renderFn({ ...propsValue, [propName]: props[propName] })\n            }\n\n          case Props.Types.Shadows:\n            switch (descriptor.options.format) {\n              case ShadowsPropControllerFormat.ClassName:\n                return (\n                  <RenderHook\n                    key={descriptor.type}\n                    hook={useShadowsStyle}\n                    parameters={[props[propName]]}\n                  >\n                    {value => renderFn({ ...propsValue, [propName]: value })}\n                  </RenderHook>\n                )\n\n              default:\n                return renderFn({ ...propsValue, [propName]: props[propName] })\n            }\n\n          case Props.Types.Border:\n            switch (descriptor.options.format) {\n              case BorderPropControllerFormat.ClassName:\n                return (\n                  <RenderHook\n                    key={descriptor.type}\n                    hook={useBorderStyle}\n                    parameters={[props[propName]]}\n                  >\n                    {value => renderFn({ ...propsValue, [propName]: value })}\n                  </RenderHook>\n                )\n\n              default:\n                return renderFn({ ...propsValue, [propName]: props[propName] })\n            }\n\n          case Props.Types.ResponsiveColor:\n            return (\n              <RenderHook\n                key={descriptor.type}\n                hook={useResponsiveColor}\n                parameters={[props[propName]]}\n              >\n                {value => renderFn({ ...propsValue, [propName]: value })}\n              </RenderHook>\n            )\n\n          default:\n            return renderFn({ ...propsValue, [propName]: props[propName] })\n        }\n      },\n    children,\n  )({})\n}\n"],"mappings":"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","names":[]}

package/dist/esm/runtimes/react/element-imperative-handle.js

@@ -0,0 +1,43 @@
+import { isMeasurable, measure } from "../../state/modules/box-models";
+import {
+  isPropControllersHandle
+} from "../../state/modules/prop-controller-handles";
+class ElementImperativeHandle {
+  getCurrent = () => null;
+  lastPropControllers = null;
+  callback(getCurrent) {
+    const current = this.getCurrent();
+    if (current === null)
+      this.setPropControllers(null);
+    this.getCurrent = getCurrent;
+    if (this.lastPropControllers !== null)
+      this.setPropControllers(this.lastPropControllers);
+  }
+  getBoxModel() {
+    const current = this.getCurrent();
+    return isMeasurable(current) ? measure(current) : null;
+  }
+  setPropControllers(propControllers) {
+    const current = this.getCurrent();
+    if (isPropControllersHandle(current))
+      current.setPropControllers(propControllers);
+    this.lastPropControllers = propControllers;
+  }
+  getDomNode() {
+    const current = this.getCurrent();
+    if (isDomNodeHandle(current))
+      return current.getDomNode();
+    return current instanceof Element ? current : null;
+  }
+}
+function isDomNodeHandle(value) {
+  if (typeof value === "object" && value !== null && "getDomNode" in value && typeof value.getDomNode === "function") {
+    return true;
+  }
+  return false;
+}
+export {
+  ElementImperativeHandle,
+  isDomNodeHandle
+};
+//# sourceMappingURL=element-imperative-handle.js.map

package/dist/esm/runtimes/react/element-imperative-handle.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/runtimes/react/element-imperative-handle.ts"],"sourcesContent":["import { BoxModel, BoxModelHandle } from '../../box-model'\nimport { Descriptor } from '../../prop-controllers/descriptors'\nimport { DescriptorsPropControllers } from '../../prop-controllers/instances'\nimport { isMeasurable, measure } from '../../state/modules/box-models'\nimport {\n  isPropControllersHandle,\n  PropControllersHandle,\n} from '../../state/modules/prop-controller-handles'\n\nexport class ElementImperativeHandle<\n  T extends Record<string, Descriptor> = Record<string, Descriptor>,\n> implements BoxModelHandle, PropControllersHandle<T>\n{\n  private getCurrent: () => unknown = () => null\n  private lastPropControllers: DescriptorsPropControllers<T> | null = null\n\n  callback(getCurrent: () => unknown) {\n    const current = this.getCurrent()\n\n    if (current === null) this.setPropControllers(null)\n\n    this.getCurrent = getCurrent\n\n    if (this.lastPropControllers !== null) this.setPropControllers(this.lastPropControllers)\n  }\n\n  getBoxModel(): BoxModel | null {\n    const current = this.getCurrent()\n\n    return isMeasurable(current) ? measure(current) : null\n  }\n\n  setPropControllers(propControllers: DescriptorsPropControllers<T> | null): void {\n    const current = this.getCurrent()\n\n    if (isPropControllersHandle(current)) current.setPropControllers(propControllers)\n\n    this.lastPropControllers = propControllers\n  }\n\n  getDomNode(): Element | null {\n    const current = this.getCurrent()\n\n    if (isDomNodeHandle(current)) return current.getDomNode()\n\n    return current instanceof Element ? current : null\n  }\n}\n\ntype DomNodeHandle = {\n  getDomNode(): Element | null\n}\n\nexport function isDomNodeHandle(value: unknown): value is DomNodeHandle {\n  if (\n    typeof value === 'object' &&\n    value !== null &&\n    'getDomNode' in value &&\n    typeof (value as { getDomNode: unknown }).getDomNode === 'function'\n  ) {\n    return true\n  }\n\n  return false\n}\n"],"mappings":"AAGA,SAAS,cAAc,eAAe;AACtC;AAAA,EACE;AAAA,OAEK;AAEA,MAAM,wBAGb;AAAA,EACU,aAA4B,MAAM;AAAA,EAClC,sBAA4D;AAAA,EAEpE,SAAS,YAA2B;AAClC,UAAM,UAAU,KAAK,WAAW;AAEhC,QAAI,YAAY;AAAM,WAAK,mBAAmB,IAAI;AAElD,SAAK,aAAa;AAElB,QAAI,KAAK,wBAAwB;AAAM,WAAK,mBAAmB,KAAK,mBAAmB;AAAA,EACzF;AAAA,EAEA,cAA+B;AAC7B,UAAM,UAAU,KAAK,WAAW;AAEhC,WAAO,aAAa,OAAO,IAAI,QAAQ,OAAO,IAAI;AAAA,EACpD;AAAA,EAEA,mBAAmB,iBAA6D;AAC9E,UAAM,UAAU,KAAK,WAAW;AAEhC,QAAI,wBAAwB,OAAO;AAAG,cAAQ,mBAAmB,eAAe;AAEhF,SAAK,sBAAsB;AAAA,EAC7B;AAAA,EAEA,aAA6B;AAC3B,UAAM,UAAU,KAAK,WAAW;AAEhC,QAAI,gBAAgB,OAAO;AAAG,aAAO,QAAQ,WAAW;AAExD,WAAO,mBAAmB,UAAU,UAAU;AAAA,EAChD;AACF;AAMO,SAAS,gBAAgB,OAAwC;AACtE,MACE,OAAO,UAAU,YACjB,UAAU,QACV,gBAAgB,SAChB,OAAQ,MAAkC,eAAe,YACzD;AACA,WAAO;AAAA,EACT;AAEA,SAAO;AACT;","names":[]}

package/dist/esm/runtimes/react/find-dom-node.js

@@ -0,0 +1,39 @@
+import { Fragment, jsx } from "react/jsx-runtime";
+import {
+  Component,
+  forwardRef,
+  useImperativeHandle,
+  useRef
+} from "react";
+import { findDOMNode } from "react-dom";
+function suppressWarningAndFindDomNode(instance) {
+  const error = console.error;
+  console.error = (...args) => {
+    if (typeof args[0] === "string" && args[0].includes("%s is deprecated in StrictMode."))
+      return;
+    return error.apply(console, args);
+  };
+  const foundDomNode = findDOMNode(instance);
+  console.error = error;
+  return foundDomNode;
+}
+class FindDomNodeClassComponent extends Component {
+  constructor(props) {
+    super(props);
+    this.props.innerRef.current = () => suppressWarningAndFindDomNode(this);
+  }
+  render() {
+    return /* @__PURE__ */ jsx(Fragment, { children: this.props.children });
+  }
+}
+const FindDomNode = forwardRef(
+  function FindDomNode2(props, ref) {
+    const findDomNodeRef = useRef(null);
+    useImperativeHandle(ref, () => () => findDomNodeRef.current?.() ?? null, []);
+    return /* @__PURE__ */ jsx(FindDomNodeClassComponent, { ...props, innerRef: findDomNodeRef });
+  }
+);
+export {
+  FindDomNode
+};
+//# sourceMappingURL=find-dom-node.js.map

package/dist/esm/runtimes/react/find-dom-node.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/runtimes/react/find-dom-node.tsx"],"sourcesContent":["import {\n  Component,\n  MutableRefObject,\n  ReactInstance,\n  ReactNode,\n  forwardRef,\n  useImperativeHandle,\n  useRef,\n} from 'react'\nimport { findDOMNode } from 'react-dom'\n\n/**\n * @see https://github.com/facebook/react/blob/a2505792ed17fd4d7ddc69561053c3ac90899491/packages/react-reconciler/src/ReactFiberReconciler.new.js#L179-L244\n */\nfunction suppressWarningAndFindDomNode(\n  instance: ReactInstance | null | undefined,\n): Element | Text | null {\n  const error = console.error\n\n  console.error = (...args) => {\n    if (typeof args[0] === 'string' && args[0].includes('%s is deprecated in StrictMode.')) return\n\n    return error.apply(console, args)\n  }\n\n  const foundDomNode = findDOMNode(instance)\n\n  console.error = error\n\n  return foundDomNode\n}\n\ntype FindDomNodeClassComponentProps = {\n  innerRef: MutableRefObject<(() => Element | Text | null) | null>\n  children?: ReactNode\n}\n\nclass FindDomNodeClassComponent extends Component<FindDomNodeClassComponentProps> {\n  constructor(props: FindDomNodeClassComponentProps) {\n    super(props)\n\n    this.props.innerRef.current = () => suppressWarningAndFindDomNode(this)\n  }\n\n  render() {\n    return <>{this.props.children}</>\n  }\n}\n\ntype FindDomNodeProps = {\n  children?: ReactNode\n}\n\nexport const FindDomNode = forwardRef<() => Element | Text | null, FindDomNodeProps>(\n  function FindDomNode(props, ref) {\n    const findDomNodeRef = useRef<() => Element | Text | null>(null)\n\n    useImperativeHandle(ref, () => () => findDomNodeRef.current?.() ?? null, [])\n\n    return <FindDomNodeClassComponent {...props} innerRef={findDomNodeRef} />\n  },\n)\n"],"mappings":"AA6CW;AA7CX;AAAA,EACE;AAAA,EAIA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,mBAAmB;AAK5B,SAAS,8BACP,UACuB;AACvB,QAAM,QAAQ,QAAQ;AAEtB,UAAQ,QAAQ,IAAI,SAAS;AAC3B,QAAI,OAAO,KAAK,CAAC,MAAM,YAAY,KAAK,CAAC,EAAE,SAAS,iCAAiC;AAAG;AAExF,WAAO,MAAM,MAAM,SAAS,IAAI;AAAA,EAClC;AAEA,QAAM,eAAe,YAAY,QAAQ;AAEzC,UAAQ,QAAQ;AAEhB,SAAO;AACT;AAOA,MAAM,kCAAkC,UAA0C;AAAA,EAChF,YAAY,OAAuC;AACjD,UAAM,KAAK;AAEX,SAAK,MAAM,SAAS,UAAU,MAAM,8BAA8B,IAAI;AAAA,EACxE;AAAA,EAEA,SAAS;AACP,WAAO,gCAAG,eAAK,MAAM,UAAS;AAAA,EAChC;AACF;AAMO,MAAM,cAAc;AAAA,EACzB,SAASA,aAAY,OAAO,KAAK;AAC/B,UAAM,iBAAiB,OAAoC,IAAI;AAE/D,wBAAoB,KAAK,MAAM,MAAM,eAAe,UAAU,KAAK,MAAM,CAAC,CAAC;AAE3E,WAAO,oBAAC,6BAA2B,GAAG,OAAO,UAAU,gBAAgB;AAAA,EACzE;AACF;","names":["FindDomNode"]}