@makeswift/runtime 0.19.4 → 0.20.0

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

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

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

@@ -21,11 +21,8 @@ __export(text_area_exports, {
   useTextAreaValue: () => useTextAreaValue
 });
 module.exports = __toCommonJS(text_area_exports);
-var import_ts_pattern = require("ts-pattern");
-var import_controls = require("@makeswift/controls");
 function useTextAreaValue(data, definition) {
-  const value = (0, import_ts_pattern.match)(data).with({ [import_controls.TextAreaControlDataTypeKey]: import_controls.TextAreaControlDataTypeValueV1 }, (val) => val.value).otherwise((val) => val) ?? definition.config.defaultValue;
-  return value;
+  return definition.fromData(data) ?? definition.config.defaultValue;
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

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

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

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

@@ -21,11 +21,8 @@ __export(text_input_exports, {
   useTextInputValue: () => useTextInputValue
 });
 module.exports = __toCommonJS(text_input_exports);
-var import_ts_pattern = require("ts-pattern");
-var import_controls = require("@makeswift/controls");
 function useTextInputValue(data, definition) {
-  const value = (0, import_ts_pattern.match)(data).with({ [import_controls.TextInputControlDataTypeKey]: import_controls.TextInputControlDataTypeValueV1 }, (val) => val.value).otherwise((val) => val) ?? definition.config.defaultValue;
-  return value;
+  return definition.fromData(data) ?? definition.config.defaultValue;
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/runtimes/react/controls/text-input.ts"],"sourcesContent":["import { match } from 'ts-pattern'\nimport {\n  TextInputControlData,\n  TextInputControlDataTypeKey,\n  TextInputControlDataTypeValueV1,\n  TextInputControlDefinition,\n} from '@makeswift/controls'\n\nexport type TextInputControlValue<T extends TextInputControlDefinition> =\n  undefined extends T['config']['defaultValue'] ? string | undefined : string\n\nexport function useTextInputValue<T extends TextInputControlDefinition>(\n  data: TextInputControlData | undefined,\n  definition: T,\n): TextInputControlValue<T> {\n  const value: string | undefined =\n    match(data)\n      .with({ [TextInputControlDataTypeKey]: TextInputControlDataTypeValueV1 }, val => val.value)\n      .otherwise(val => val) ?? definition.config.defaultValue\n\n  return value as TextInputControlValue<T>\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAAsB;AACtB,sBAKO;AAKA,SAAS,kBACd,MACA,YAC0B;AAC1B,QAAM,YACJ,yBAAM,IAAI,EACP,KAAK,EAAE,CAAC,2CAA2B,GAAG,gDAAgC,GAAG,SAAO,IAAI,KAAK,EACzF,UAAU,SAAO,GAAG,KAAK,WAAW,OAAO;AAEhD,SAAO;AACT;","names":[]}
+{"version":3,"sources":["../../../../../src/runtimes/react/controls/text-input.ts"],"sourcesContent":["import { type DataType, type ResolvedValueType } from '@makeswift/controls'\n\nimport { TextInputDefinition } from '../../../controls'\n\nexport function useTextInputValue(\n  data: DataType<TextInputDefinition> | undefined,\n  definition: TextInputDefinition,\n): ResolvedValueType<TextInputDefinition> {\n  return definition.fromData(data) ?? definition.config.defaultValue\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAIO,SAAS,kBACd,MACA,YACwC;AACxC,SAAO,WAAW,SAAS,IAAI,KAAK,WAAW,OAAO;AACxD;","names":[]}

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

@@ -1 +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"]}
+{"version":3,"sources":["../../../../../src/runtimes/react/controls/typography.ts"],"sourcesContent":["import { CSSObject } from '@emotion/serialize'\nimport { unstable_TypographyDefinition, type DataType } from '@makeswift/controls'\n\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): DataType<unstable_TypographyDefinition> | 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  DataType<unstable_TypographyDefinition>,\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<DataType<unstable_TypographyDefinition>, 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?: DataType<unstable_TypographyDefinition> | 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: DataType<unstable_TypographyDefinition> | 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/cjs/runtimes/react/controls.js

@@ -36,11 +36,10 @@ __export(controls_exports, {
 module.exports = __toCommonJS(controls_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
-var import_controls = require("@makeswift/controls");
 var ReactPage = __toESM(require("../../state/react-page"));
 var import_hooks = require("../../components/hooks");
 var import_responsive_style = require("../../components/utils/responsive-style");
-var import_controls2 = require("../../controls");
+var import_controls = require("../../controls");
 var import_style = require("./controls/style");
 var import_control = require("./controls/control");
 var import_components = require("./components");
@@ -52,6 +51,7 @@ var import_use_store = require("./hooks/use-store");
 var import_use_document_key = require("./hooks/use-document-key");
 var import_use_selector = require("./hooks/use-selector");
 var import_prop_controllers = require("@makeswift/prop-controllers");
+var import_descriptors = require("../../prop-controllers/descriptors");
 var import_useResponsiveLengthPropControllerData = require("../../components/hooks/useResponsiveLengthPropControllerData");
 var import_useNumberPropControllerData = require("../../components/hooks/useNumberPropControllerData");
 var import_useResponsiveColorPropControllerData = require("../../components/hooks/useResponsiveColorPropControllerData");
@@ -105,78 +105,84 @@ function PropsValue({ element, children }) {
   });
   return Object.entries(propControllerDescriptorsRef.current).reduceRight(
     (renderFn, [propName, descriptor]) => (propsValue) => {
-      switch (descriptor.type) {
-        case import_controls.CheckboxControlType:
-        case import_controls.NumberControlType:
-        case import_controls.TextInputControlType:
-        case import_controls.TextAreaControlType:
-        case import_controls2.SelectControlType:
-        case import_controls2.ColorControlType:
-        case import_controls.IconRadioGroupControlType:
-        case import_controls2.ImageControlType:
-        case import_controls2.ComboboxControlType:
-        case import_controls2.ShapeControlType:
-        case import_controls2.ListControlType:
-        case import_controls2.LinkControlType:
-        case import_controls2.StyleV2ControlType:
-        case import_controls2.TypographyControlType:
-          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_control.ControlValue,
-            {
-              definition: descriptor,
-              data: props[propName],
-              control: propControllers?.[propName],
-              children: (value) => renderFn({ ...propsValue, [propName]: value })
-            }
-          );
-        case import_controls2.StyleControlType: {
-          const control = propControllers?.[propName] ?? null;
-          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_components.RenderHook,
-            {
-              hook: import_style.useFormattedStyle,
-              parameters: [props[propName], descriptor, control],
-              children: (value) => renderFn({ ...propsValue, [propName]: value })
-            },
-            descriptor.type
-          );
-        }
-        case import_controls2.RichTextControlType: {
-          const control = propControllers?.[propName] ?? null;
-          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_components.RenderHook,
-            {
-              hook: import_rich_text.useRichText,
-              parameters: [props[propName], control],
-              children: (value) => renderFn({ ...propsValue, [propName]: value })
-            },
-            descriptor.type
-          );
-        }
-        case import_controls2.RichTextV2ControlType: {
-          const control = propControllers?.[propName] ?? null;
-          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_components.RenderHook,
-            {
-              hook: import_rich_text_v2.useRichTextV2,
-              parameters: [props[propName], descriptor, control],
-              children: (value) => renderFn({ ...propsValue, [propName]: value })
-            },
-            descriptor.type
-          );
-        }
-        case import_controls2.SlotControlType: {
-          const control = propControllers?.[propName] ?? null;
-          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_components.RenderHook,
-            {
-              hook: import_slot.useSlot,
-              parameters: [props[propName], control],
-              children: (value) => renderFn({ ...propsValue, [propName]: value })
-            },
-            descriptor.type
-          );
+      if (!(0, import_descriptors.isLegacyDescriptor)(descriptor)) {
+        switch (descriptor.controlType) {
+          case import_controls.CheckboxDefinition.type:
+          case import_controls.NumberDefinition.type:
+          case import_controls.TextInputDefinition.type:
+          case import_controls.TextAreaDefinition.type:
+          case import_controls.SelectDefinition.type:
+          case import_controls.ColorDefinition.type:
+          case import_controls.IconRadioGroupDefinition.type:
+          case import_controls.ImageDefinition.type:
+          case import_controls.ComboboxDefinition.type:
+          case import_controls.ShapeDefinition.type:
+          case import_controls.ListDefinition.type:
+          case import_controls.LinkDefinition.type:
+          case import_controls.StyleV2Definition.type:
+          case import_controls.unstable_TypographyDefinition.type:
+            return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_control.ControlValue,
+              {
+                definition: descriptor,
+                data: props[propName],
+                control: propControllers?.[propName],
+                children: (value) => renderFn({ ...propsValue, [propName]: value })
+              }
+            );
+          case import_controls.StyleDefinition.type: {
+            const control = propControllers?.[propName] ?? null;
+            return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_components.RenderHook,
+              {
+                hook: import_style.useFormattedStyle,
+                parameters: [props[propName], descriptor, control],
+                children: (value) => renderFn({ ...propsValue, [propName]: value })
+              },
+              descriptor.controlType
+            );
+          }
+          case import_controls.RichTextV1Definition.type: {
+            const control = propControllers?.[propName] ?? null;
+            return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_components.RenderHook,
+              {
+                hook: import_rich_text.useRichText,
+                parameters: [props[propName], control],
+                children: (value) => renderFn({ ...propsValue, [propName]: value })
+              },
+              descriptor.controlType
+            );
+          }
+          case import_controls.RichTextV2Definition.type: {
+            const control = propControllers?.[propName] ?? null;
+            return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_components.RenderHook,
+              {
+                hook: import_rich_text_v2.useRichTextV2,
+                parameters: [props[propName], descriptor, control],
+                children: (value) => renderFn({ ...propsValue, [propName]: value })
+              },
+              descriptor.controlType
+            );
+          }
+          case import_controls.SlotDefinition.type: {
+            const control = propControllers?.[propName] ?? null;
+            return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_components.RenderHook,
+              {
+                hook: import_slot.useSlot,
+                parameters: [props[propName], control],
+                children: (value) => renderFn({ ...propsValue, [propName]: value })
+              },
+              descriptor.controlType
+            );
+          }
         }
+        console.error(`Unknown control type: ${descriptor.controlType}`);
+        return renderFn({ ...propsValue, [propName]: props[propName] });
+      }
+      switch (descriptor.type) {
         case import_prop_controllers.Types.Width:
           switch (descriptor.options.format) {
             case import_prop_controllers.WidthPropControllerFormat.ClassName:

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/runtimes/react/controls.tsx"],"sourcesContent":["import { useRef } from 'react'\nimport {\n  CheckboxControlType,\n  IconRadioGroupControlType,\n  NumberControlType,\n  TextInputControlType,\n  TextAreaControlType,\n} from '@makeswift/controls'\n\nimport * as ReactPage from '../../state/react-page'\n\nimport {\n  useBoxShadow,\n  useBorder as useBorderData,\n  useLinkPropControllerData,\n  useCheckboxPropControllerData,\n  useDatePropControllerData,\n  useFontPropControllerData,\n  useVideoPropControllerData,\n  useTablePropControllerData,\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  ColorControlType,\n  ComboboxControlType,\n  ImageControlType,\n  LinkControlType,\n  ListControlType,\n  SelectControlType,\n  ShapeControlType,\n  SlotControl,\n  SlotControlType,\n  StyleControlType,\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 { useStore } from './hooks/use-store'\nimport { useDocumentKey } from './hooks/use-document-key'\nimport { useSelector } from './hooks/use-selector'\nimport {\n  Types as PropControllerTypes,\n  getShadowsPropControllerDataResponsiveShadowsData,\n  ShadowsPropControllerData,\n  Shadows,\n  ResponsiveValue,\n  BorderPropControllerFormat,\n  ResponsiveBorderData,\n  BorderPropControllerData,\n  getBorderPropControllerDataResponsiveBorderData,\n  getBorderRadiusPropControllerDataResponsiveBorderRadiusData,\n  BorderRadiusPropControllerData,\n  BorderRadiusPropControllerFormat,\n  MarginPropControllerFormat,\n  MarginPropControllerData,\n  getMarginPropControllerDataResponsiveMarginData,\n  PaddingPropControllerData,\n  getPaddingPropControllerDataResponsivePaddingData,\n  PaddingPropControllerFormat,\n  WidthPropControllerData,\n  getWidthPropControllerDataResponsiveLengthData,\n  WidthPropControllerFormat,\n  WidthDescriptor,\n  GapX,\n  ResponsiveNumber,\n  ResponsiveIconRadioGroup,\n  ResponsiveSelect,\n  ResponsiveOpacity,\n  getSocialLinksPropControllerDataSocialLinksData,\n} from '@makeswift/prop-controllers'\nimport { useResponsiveLengthPropControllerData } from '../../components/hooks/useResponsiveLengthPropControllerData'\nimport { useNumberPropControllerData } from '../../components/hooks/useNumberPropControllerData'\nimport { useResponsiveColorPropControllerData } from '../../components/hooks/useResponsiveColorPropControllerData'\nimport { useTextStylePropControllerData } from '../../components/hooks/useTextStylePropControllerData'\nimport { useNavigationLinksPropControllerData } from '../../components/hooks/useNavigationLinksPropControllerData'\nimport { useTextAreaPropControllerData } from '../../components/hooks/useTextAreaPropControllerData'\nimport { usePropValue } from '../../components/hooks/usePropValue'\nimport { useGapYPropControllerData } from '../../components/hooks/useGapYPropControllerData'\nimport { useElementIDPropControllerData } from '../../components/hooks/useElementIDPropControllerData'\nimport { useTableFormFieldsPropControllerData } from '../../components/hooks/useTableFormFieldsPropControllerData'\nimport { useGridPropControllerData } from '../../components/hooks/useGridPropControllerData'\nimport { useImagePropControllerData } from '../../components/hooks/useImagePropControllerData'\nimport { useImagesPropControllerData } from '../../components/hooks/useImagesPropControllerData'\nimport { useBackgroundsPropControllerData } from '../../components/hooks/useBackgroundsPropControllerData'\nimport { useTextInputPropControllerData } from '../../components/hooks/useTextInputPropControllerData'\n\nexport type ResponsiveColor = ResponsiveValue<ColorValue>\n\nfunction useWidthStyle(\n  data: WidthPropControllerData | undefined,\n  descriptor: WidthDescriptor,\n): string {\n  const value = getWidthPropControllerDataResponsiveLengthData(data)\n\n  return useStyle(useResponsiveWidth(value, descriptor.options.defaultValue))\n}\n\nfunction usePaddingStyle(data: PaddingPropControllerData | undefined): string {\n  const value = getPaddingPropControllerDataResponsivePaddingData(data)\n\n  return useStyle(useResponsivePadding(value))\n}\n\nfunction useMarginStyle(data: MarginPropControllerData | undefined): string {\n  const value = getMarginPropControllerDataResponsiveMarginData(data)\n\n  return useStyle(useResponsiveMargin(value))\n}\n\nexport function useBorderRadiusStyle(data: BorderRadiusPropControllerData | undefined): string {\n  const value = getBorderRadiusPropControllerDataResponsiveBorderRadiusData(data)\n\n  return useStyle(useResponsiveBorderRadius(value))\n}\n\nexport function useShadowsStyle(data: ShadowsPropControllerData | undefined): string {\n  return useStyle(useResponsiveShadow(useBoxShadow(data) ?? undefined))\n}\n\nexport function useBorderStyle(\n  data: BorderPropControllerData | undefined,\n): string | ResponsiveBorderData | undefined {\n  const value = getBorderPropControllerDataResponsiveBorderData(data)\n  const borderData = useBorderData(value)\n\n  return useStyle(useResponsiveBorder(borderData ?? undefined))\n}\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 PropControllerTypes.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              case WidthPropControllerFormat.ResponsiveValue:\n              default:\n                return renderFn({\n                  ...propsValue,\n                  [propName]: getWidthPropControllerDataResponsiveLengthData(props[propName]),\n                })\n            }\n\n          case PropControllerTypes.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              case PaddingPropControllerFormat.ResponsiveValue:\n              default:\n                return renderFn({\n                  ...propsValue,\n                  [propName]: getPaddingPropControllerDataResponsivePaddingData(props[propName]),\n                })\n            }\n\n          case PropControllerTypes.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              case MarginPropControllerFormat.ResponsiveValue:\n              default:\n                return renderFn({\n                  ...propsValue,\n                  [propName]: getMarginPropControllerDataResponsiveMarginData(props[propName]),\n                })\n            }\n\n          case PropControllerTypes.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              case BorderRadiusPropControllerFormat.ResponsiveValue:\n              default:\n                return renderFn({\n                  ...propsValue,\n                  [propName]: getBorderRadiusPropControllerDataResponsiveBorderRadiusData(\n                    props[propName],\n                  ),\n                })\n            }\n\n          case PropControllerTypes.Backgrounds:\n            return (\n              <RenderHook\n                key={descriptor.type}\n                hook={useBackgroundsPropControllerData}\n                parameters={[props[propName]]}\n              >\n                {value => renderFn({ ...propsValue, [propName]: value })}\n              </RenderHook>\n            )\n\n          case PropControllerTypes.Image:\n            return (\n              <RenderHook\n                key={descriptor.type}\n                hook={useImagePropControllerData}\n                parameters={[props[propName]]}\n              >\n                {value => renderFn({ ...propsValue, [propName]: value })}\n              </RenderHook>\n            )\n\n          case PropControllerTypes.Images:\n            return (\n              <RenderHook\n                key={descriptor.type}\n                hook={useImagesPropControllerData}\n                parameters={[props[propName]]}\n              >\n                {value => renderFn({ ...propsValue, [propName]: value })}\n              </RenderHook>\n            )\n\n          case PropControllerTypes.Number:\n            return (\n              <RenderHook\n                key={descriptor.type}\n                hook={useNumberPropControllerData}\n                parameters={[props[propName]]}\n              >\n                {value => renderFn({ ...propsValue, [propName]: value })}\n              </RenderHook>\n            )\n\n          case PropControllerTypes.ResponsiveNumber:\n            return (\n              <RenderHook\n                key={descriptor.type}\n                hook={data => usePropValue(ResponsiveNumber, data)}\n                parameters={[props[propName]]}\n              >\n                {value => renderFn({ ...propsValue, [propName]: value })}\n              </RenderHook>\n            )\n\n          case PropControllerTypes.ResponsiveIconRadioGroup:\n            return (\n              <RenderHook\n                key={descriptor.type}\n                hook={data => usePropValue(ResponsiveIconRadioGroup, data)}\n                parameters={[props[propName]]}\n              >\n                {value => renderFn({ ...propsValue, [propName]: value })}\n              </RenderHook>\n            )\n\n          case PropControllerTypes.ResponsiveSelect:\n            return (\n              <RenderHook\n                key={descriptor.type}\n                hook={data => usePropValue(ResponsiveSelect, data)}\n                parameters={[props[propName]]}\n              >\n                {value => renderFn({ ...propsValue, [propName]: value })}\n              </RenderHook>\n            )\n\n          case PropControllerTypes.ResponsiveOpacity:\n            return (\n              <RenderHook\n                key={descriptor.type}\n                hook={data => usePropValue(ResponsiveOpacity, data)}\n                parameters={[props[propName]]}\n              >\n                {value => renderFn({ ...propsValue, [propName]: value })}\n              </RenderHook>\n            )\n\n          case PropControllerTypes.ResponsiveLength:\n            return (\n              <RenderHook\n                key={descriptor.type}\n                hook={useResponsiveLengthPropControllerData}\n                parameters={[props[propName]]}\n              >\n                {value => renderFn({ ...propsValue, [propName]: value })}\n              </RenderHook>\n            )\n\n          case PropControllerTypes.Shadows:\n            switch (descriptor.options.format) {\n              case Shadows.Format.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              case Shadows.Format.ResponsiveValue:\n              default:\n                return renderFn({\n                  ...propsValue,\n                  [propName]: getShadowsPropControllerDataResponsiveShadowsData(props[propName]),\n                })\n            }\n\n          case PropControllerTypes.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              case BorderPropControllerFormat.ResponsiveValue:\n              default:\n                return renderFn({\n                  ...propsValue,\n                  [propName]: getBorderPropControllerDataResponsiveBorderData(props[propName]),\n                })\n            }\n\n          case PropControllerTypes.ResponsiveColor:\n            return (\n              <RenderHook\n                key={descriptor.type}\n                hook={useResponsiveColorPropControllerData}\n                parameters={[props[propName]]}\n              >\n                {value => renderFn({ ...propsValue, [propName]: value })}\n              </RenderHook>\n            )\n\n          case PropControllerTypes.Link:\n            return (\n              <RenderHook\n                key={descriptor.type}\n                hook={useLinkPropControllerData}\n                parameters={[props[propName]]}\n              >\n                {value => renderFn({ ...propsValue, [propName]: value })}\n              </RenderHook>\n            )\n\n          case PropControllerTypes.Checkbox:\n            return (\n              <RenderHook\n                key={descriptor.type}\n                hook={useCheckboxPropControllerData}\n                parameters={[props[propName]]}\n              >\n                {value => renderFn({ ...propsValue, [propName]: value })}\n              </RenderHook>\n            )\n\n          case PropControllerTypes.Date:\n            return (\n              <RenderHook\n                key={descriptor.type}\n                hook={useDatePropControllerData}\n                parameters={[props[propName]]}\n              >\n                {value => renderFn({ ...propsValue, [propName]: value })}\n              </RenderHook>\n            )\n\n          case PropControllerTypes.Font:\n            return (\n              <RenderHook\n                key={descriptor.type}\n                hook={useFontPropControllerData}\n                parameters={[props[propName]]}\n              >\n                {value => renderFn({ ...propsValue, [propName]: value })}\n              </RenderHook>\n            )\n\n          case PropControllerTypes.Video:\n            return (\n              <RenderHook\n                key={descriptor.type}\n                hook={useVideoPropControllerData}\n                parameters={[props[propName]]}\n              >\n                {value => renderFn({ ...propsValue, [propName]: value })}\n              </RenderHook>\n            )\n\n          case PropControllerTypes.Table:\n            return (\n              <RenderHook\n                key={descriptor.type}\n                hook={useTablePropControllerData}\n                parameters={[props[propName]]}\n              >\n                {value => renderFn({ ...propsValue, [propName]: value })}\n              </RenderHook>\n            )\n\n          case PropControllerTypes.TextStyle:\n            return (\n              <RenderHook\n                key={descriptor.type}\n                hook={useTextStylePropControllerData}\n                parameters={[props[propName]]}\n              >\n                {value => renderFn({ ...propsValue, [propName]: value })}\n              </RenderHook>\n            )\n\n          case PropControllerTypes.NavigationLinks:\n            return (\n              <RenderHook\n                key={descriptor.type}\n                hook={useNavigationLinksPropControllerData}\n                parameters={[props[propName]]}\n              >\n                {value => renderFn({ ...propsValue, [propName]: value })}\n              </RenderHook>\n            )\n\n          case PropControllerTypes.TextInput:\n            return (\n              <RenderHook\n                key={descriptor.type}\n                hook={useTextInputPropControllerData}\n                parameters={[props[propName]]}\n              >\n                {value => renderFn({ ...propsValue, [propName]: value })}\n              </RenderHook>\n            )\n\n          case PropControllerTypes.TextArea:\n            return (\n              <RenderHook\n                key={descriptor.type}\n                hook={useTextAreaPropControllerData}\n                parameters={[props[propName]]}\n              >\n                {value => renderFn({ ...propsValue, [propName]: value })}\n              </RenderHook>\n            )\n\n          case PropControllerTypes.GapX:\n            return (\n              <RenderHook\n                key={descriptor.type}\n                hook={data => usePropValue(GapX, data)}\n                parameters={[props[propName]]}\n              >\n                {value => renderFn({ ...propsValue, [propName]: value })}\n              </RenderHook>\n            )\n\n          case PropControllerTypes.GapY:\n            return (\n              <RenderHook\n                key={descriptor.type}\n                hook={useGapYPropControllerData}\n                parameters={[props[propName]]}\n              >\n                {value => renderFn({ ...propsValue, [propName]: value })}\n              </RenderHook>\n            )\n\n          case PropControllerTypes.ElementID:\n            return (\n              <RenderHook\n                key={descriptor.type}\n                hook={useElementIDPropControllerData}\n                parameters={[props[propName]]}\n              >\n                {value => renderFn({ ...propsValue, [propName]: value })}\n              </RenderHook>\n            )\n\n          case PropControllerTypes.TableFormFields:\n            return (\n              <RenderHook\n                key={descriptor.type}\n                hook={useTableFormFieldsPropControllerData}\n                parameters={[props[propName]]}\n              >\n                {value => renderFn({ ...propsValue, [propName]: value })}\n              </RenderHook>\n            )\n\n          case PropControllerTypes.SocialLinks:\n            return renderFn({\n              ...propsValue,\n              [propName]: getSocialLinksPropControllerDataSocialLinksData(props[propName]),\n            })\n\n          case PropControllerTypes.Grid:\n            return (\n              <RenderHook\n                key={descriptor.type}\n                hook={useGridPropControllerData}\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":["import_controls","useBorderData","PropControllerTypes"]}
+{"version":3,"sources":["../../../../src/runtimes/react/controls.tsx"],"sourcesContent":["import { useRef } from 'react'\n\nimport * as ReactPage from '../../state/react-page'\n\nimport {\n  useBoxShadow,\n  useBorder as useBorderData,\n  useLinkPropControllerData,\n  useCheckboxPropControllerData,\n  useDatePropControllerData,\n  useFontPropControllerData,\n  useVideoPropControllerData,\n  useTablePropControllerData,\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'\n\nimport {\n  CheckboxDefinition,\n  NumberDefinition,\n  RichTextV2Definition,\n  RichTextV2Control,\n  ColorDefinition,\n  ComboboxDefinition,\n  IconRadioGroupDefinition,\n  ImageDefinition,\n  LinkDefinition,\n  ListDefinition,\n  RichTextV1Definition,\n  RichTextV1Control,\n  SelectDefinition,\n  ShapeDefinition,\n  SlotDefinition,\n  SlotControl,\n  StyleDefinition,\n  StyleControl,\n  StyleV2Definition,\n  TextAreaDefinition,\n  TextInputDefinition,\n  unstable_TypographyDefinition,\n} from '../../controls'\n\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 { useStore } from './hooks/use-store'\nimport { useDocumentKey } from './hooks/use-document-key'\nimport { useSelector } from './hooks/use-selector'\nimport {\n  Types as PropControllerTypes,\n  getShadowsPropControllerDataResponsiveShadowsData,\n  ShadowsPropControllerData,\n  Shadows,\n  ResponsiveValue,\n  BorderPropControllerFormat,\n  ResponsiveBorderData,\n  BorderPropControllerData,\n  getBorderPropControllerDataResponsiveBorderData,\n  getBorderRadiusPropControllerDataResponsiveBorderRadiusData,\n  BorderRadiusPropControllerData,\n  BorderRadiusPropControllerFormat,\n  MarginPropControllerFormat,\n  MarginPropControllerData,\n  getMarginPropControllerDataResponsiveMarginData,\n  PaddingPropControllerData,\n  getPaddingPropControllerDataResponsivePaddingData,\n  PaddingPropControllerFormat,\n  WidthPropControllerData,\n  getWidthPropControllerDataResponsiveLengthData,\n  WidthPropControllerFormat,\n  WidthDescriptor,\n  GapX,\n  ResponsiveNumber,\n  ResponsiveIconRadioGroup,\n  ResponsiveSelect,\n  ResponsiveOpacity,\n  getSocialLinksPropControllerDataSocialLinksData,\n} from '@makeswift/prop-controllers'\n\nimport { isLegacyDescriptor } from '../../prop-controllers/descriptors'\nimport { useResponsiveLengthPropControllerData } from '../../components/hooks/useResponsiveLengthPropControllerData'\nimport { useNumberPropControllerData } from '../../components/hooks/useNumberPropControllerData'\nimport { useResponsiveColorPropControllerData } from '../../components/hooks/useResponsiveColorPropControllerData'\nimport { useTextStylePropControllerData } from '../../components/hooks/useTextStylePropControllerData'\nimport { useNavigationLinksPropControllerData } from '../../components/hooks/useNavigationLinksPropControllerData'\nimport { useTextAreaPropControllerData } from '../../components/hooks/useTextAreaPropControllerData'\nimport { usePropValue } from '../../components/hooks/usePropValue'\nimport { useGapYPropControllerData } from '../../components/hooks/useGapYPropControllerData'\nimport { useElementIDPropControllerData } from '../../components/hooks/useElementIDPropControllerData'\nimport { useTableFormFieldsPropControllerData } from '../../components/hooks/useTableFormFieldsPropControllerData'\nimport { useGridPropControllerData } from '../../components/hooks/useGridPropControllerData'\nimport { useImagePropControllerData } from '../../components/hooks/useImagePropControllerData'\nimport { useImagesPropControllerData } from '../../components/hooks/useImagesPropControllerData'\nimport { useBackgroundsPropControllerData } from '../../components/hooks/useBackgroundsPropControllerData'\nimport { useTextInputPropControllerData } from '../../components/hooks/useTextInputPropControllerData'\n\nexport type ResponsiveColor = ResponsiveValue<ColorValue>\n\nfunction useWidthStyle(\n  data: WidthPropControllerData | undefined,\n  descriptor: WidthDescriptor,\n): string {\n  const value = getWidthPropControllerDataResponsiveLengthData(data)\n\n  return useStyle(useResponsiveWidth(value, descriptor.options.defaultValue))\n}\n\nfunction usePaddingStyle(data: PaddingPropControllerData | undefined): string {\n  const value = getPaddingPropControllerDataResponsivePaddingData(data)\n\n  return useStyle(useResponsivePadding(value))\n}\n\nfunction useMarginStyle(data: MarginPropControllerData | undefined): string {\n  const value = getMarginPropControllerDataResponsiveMarginData(data)\n\n  return useStyle(useResponsiveMargin(value))\n}\n\nexport function useBorderRadiusStyle(data: BorderRadiusPropControllerData | undefined): string {\n  const value = getBorderRadiusPropControllerDataResponsiveBorderRadiusData(data)\n\n  return useStyle(useResponsiveBorderRadius(value))\n}\n\nexport function useShadowsStyle(data: ShadowsPropControllerData | undefined): string {\n  return useStyle(useResponsiveShadow(useBoxShadow(data) ?? undefined))\n}\n\nexport function useBorderStyle(\n  data: BorderPropControllerData | undefined,\n): string | ResponsiveBorderData | undefined {\n  const value = getBorderPropControllerDataResponsiveBorderData(data)\n  const borderData = useBorderData(value)\n\n  return useStyle(useResponsiveBorder(borderData ?? undefined))\n}\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        if (!isLegacyDescriptor(descriptor)) {\n          switch (descriptor.controlType) {\n            case CheckboxDefinition.type:\n            case NumberDefinition.type:\n            case TextInputDefinition.type:\n            case TextAreaDefinition.type:\n            case SelectDefinition.type:\n            case ColorDefinition.type:\n            case IconRadioGroupDefinition.type:\n            case ImageDefinition.type:\n            case ComboboxDefinition.type:\n            case ShapeDefinition.type:\n            case ListDefinition.type:\n            case LinkDefinition.type:\n            case StyleV2Definition.type:\n            case unstable_TypographyDefinition.type:\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 StyleDefinition.type: {\n              const control = (propControllers?.[propName] ?? null) as StyleControl | null\n\n              return (\n                <RenderHook\n                  key={descriptor.controlType}\n                  hook={useFormattedStyle}\n                  parameters={[props[propName], descriptor as StyleDefinition, control]}\n                >\n                  {value => renderFn({ ...propsValue, [propName]: value })}\n                </RenderHook>\n              )\n            }\n\n            case RichTextV1Definition.type: {\n              const control = (propControllers?.[propName] ?? null) as RichTextV1Control | null\n\n              return (\n                <RenderHook\n                  key={descriptor.controlType}\n                  hook={useRichText}\n                  parameters={[props[propName], control]}\n                >\n                  {value => renderFn({ ...propsValue, [propName]: value })}\n                </RenderHook>\n              )\n            }\n\n            case RichTextV2Definition.type: {\n              const control = (propControllers?.[propName] ?? null) as RichTextV2Control | null\n\n              return (\n                <RenderHook\n                  key={descriptor.controlType}\n                  hook={useRichTextV2}\n                  parameters={[props[propName], descriptor as RichTextV2Definition, control]}\n                >\n                  {value => renderFn({ ...propsValue, [propName]: value })}\n                </RenderHook>\n              )\n            }\n\n            case SlotDefinition.type: {\n              const control = (propControllers?.[propName] ?? null) as SlotControl | null\n\n              return (\n                <RenderHook\n                  key={descriptor.controlType}\n                  hook={useSlot}\n                  parameters={[props[propName], control]}\n                >\n                  {value => renderFn({ ...propsValue, [propName]: value })}\n                </RenderHook>\n              )\n            }\n          }\n\n          console.error(`Unknown control type: ${descriptor.controlType}`)\n          return renderFn({ ...propsValue, [propName]: props[propName] })\n        }\n\n        switch (descriptor.type) {\n          case PropControllerTypes.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              case WidthPropControllerFormat.ResponsiveValue:\n              default:\n                return renderFn({\n                  ...propsValue,\n                  [propName]: getWidthPropControllerDataResponsiveLengthData(props[propName]),\n                })\n            }\n\n          case PropControllerTypes.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              case PaddingPropControllerFormat.ResponsiveValue:\n              default:\n                return renderFn({\n                  ...propsValue,\n                  [propName]: getPaddingPropControllerDataResponsivePaddingData(props[propName]),\n                })\n            }\n\n          case PropControllerTypes.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              case MarginPropControllerFormat.ResponsiveValue:\n              default:\n                return renderFn({\n                  ...propsValue,\n                  [propName]: getMarginPropControllerDataResponsiveMarginData(props[propName]),\n                })\n            }\n\n          case PropControllerTypes.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              case BorderRadiusPropControllerFormat.ResponsiveValue:\n              default:\n                return renderFn({\n                  ...propsValue,\n                  [propName]: getBorderRadiusPropControllerDataResponsiveBorderRadiusData(\n                    props[propName],\n                  ),\n                })\n            }\n\n          case PropControllerTypes.Backgrounds:\n            return (\n              <RenderHook\n                key={descriptor.type}\n                hook={useBackgroundsPropControllerData}\n                parameters={[props[propName]]}\n              >\n                {value => renderFn({ ...propsValue, [propName]: value })}\n              </RenderHook>\n            )\n\n          case PropControllerTypes.Image:\n            return (\n              <RenderHook\n                key={descriptor.type}\n                hook={useImagePropControllerData}\n                parameters={[props[propName]]}\n              >\n                {value => renderFn({ ...propsValue, [propName]: value })}\n              </RenderHook>\n            )\n\n          case PropControllerTypes.Images:\n            return (\n              <RenderHook\n                key={descriptor.type}\n                hook={useImagesPropControllerData}\n                parameters={[props[propName]]}\n              >\n                {value => renderFn({ ...propsValue, [propName]: value })}\n              </RenderHook>\n            )\n\n          case PropControllerTypes.Number:\n            return (\n              <RenderHook\n                key={descriptor.type}\n                hook={useNumberPropControllerData}\n                parameters={[props[propName]]}\n              >\n                {value => renderFn({ ...propsValue, [propName]: value })}\n              </RenderHook>\n            )\n\n          case PropControllerTypes.ResponsiveNumber:\n            return (\n              <RenderHook\n                key={descriptor.type}\n                hook={data => usePropValue(ResponsiveNumber, data)}\n                parameters={[props[propName]]}\n              >\n                {value => renderFn({ ...propsValue, [propName]: value })}\n              </RenderHook>\n            )\n\n          case PropControllerTypes.ResponsiveIconRadioGroup:\n            return (\n              <RenderHook\n                key={descriptor.type}\n                hook={data => usePropValue(ResponsiveIconRadioGroup, data)}\n                parameters={[props[propName]]}\n              >\n                {value => renderFn({ ...propsValue, [propName]: value })}\n              </RenderHook>\n            )\n\n          case PropControllerTypes.ResponsiveSelect:\n            return (\n              <RenderHook\n                key={descriptor.type}\n                hook={data => usePropValue(ResponsiveSelect, data)}\n                parameters={[props[propName]]}\n              >\n                {value => renderFn({ ...propsValue, [propName]: value })}\n              </RenderHook>\n            )\n\n          case PropControllerTypes.ResponsiveOpacity:\n            return (\n              <RenderHook\n                key={descriptor.type}\n                hook={data => usePropValue(ResponsiveOpacity, data)}\n                parameters={[props[propName]]}\n              >\n                {value => renderFn({ ...propsValue, [propName]: value })}\n              </RenderHook>\n            )\n\n          case PropControllerTypes.ResponsiveLength:\n            return (\n              <RenderHook\n                key={descriptor.type}\n                hook={useResponsiveLengthPropControllerData}\n                parameters={[props[propName]]}\n              >\n                {value => renderFn({ ...propsValue, [propName]: value })}\n              </RenderHook>\n            )\n\n          case PropControllerTypes.Shadows:\n            switch (descriptor.options.format) {\n              case Shadows.Format.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              case Shadows.Format.ResponsiveValue:\n              default:\n                return renderFn({\n                  ...propsValue,\n                  [propName]: getShadowsPropControllerDataResponsiveShadowsData(props[propName]),\n                })\n            }\n\n          case PropControllerTypes.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              case BorderPropControllerFormat.ResponsiveValue:\n              default:\n                return renderFn({\n                  ...propsValue,\n                  [propName]: getBorderPropControllerDataResponsiveBorderData(props[propName]),\n                })\n            }\n\n          case PropControllerTypes.ResponsiveColor:\n            return (\n              <RenderHook\n                key={descriptor.type}\n                hook={useResponsiveColorPropControllerData}\n                parameters={[props[propName]]}\n              >\n                {value => renderFn({ ...propsValue, [propName]: value })}\n              </RenderHook>\n            )\n\n          case PropControllerTypes.Link:\n            return (\n              <RenderHook\n                key={descriptor.type}\n                hook={useLinkPropControllerData}\n                parameters={[props[propName]]}\n              >\n                {value => renderFn({ ...propsValue, [propName]: value })}\n              </RenderHook>\n            )\n\n          case PropControllerTypes.Checkbox:\n            return (\n              <RenderHook\n                key={descriptor.type}\n                hook={useCheckboxPropControllerData}\n                parameters={[props[propName]]}\n              >\n                {value => renderFn({ ...propsValue, [propName]: value })}\n              </RenderHook>\n            )\n\n          case PropControllerTypes.Date:\n            return (\n              <RenderHook\n                key={descriptor.type}\n                hook={useDatePropControllerData}\n                parameters={[props[propName]]}\n              >\n                {value => renderFn({ ...propsValue, [propName]: value })}\n              </RenderHook>\n            )\n\n          case PropControllerTypes.Font:\n            return (\n              <RenderHook\n                key={descriptor.type}\n                hook={useFontPropControllerData}\n                parameters={[props[propName]]}\n              >\n                {value => renderFn({ ...propsValue, [propName]: value })}\n              </RenderHook>\n            )\n\n          case PropControllerTypes.Video:\n            return (\n              <RenderHook\n                key={descriptor.type}\n                hook={useVideoPropControllerData}\n                parameters={[props[propName]]}\n              >\n                {value => renderFn({ ...propsValue, [propName]: value })}\n              </RenderHook>\n            )\n\n          case PropControllerTypes.Table:\n            return (\n              <RenderHook\n                key={descriptor.type}\n                hook={useTablePropControllerData}\n                parameters={[props[propName]]}\n              >\n                {value => renderFn({ ...propsValue, [propName]: value })}\n              </RenderHook>\n            )\n\n          case PropControllerTypes.TextStyle:\n            return (\n              <RenderHook\n                key={descriptor.type}\n                hook={useTextStylePropControllerData}\n                parameters={[props[propName]]}\n              >\n                {value => renderFn({ ...propsValue, [propName]: value })}\n              </RenderHook>\n            )\n\n          case PropControllerTypes.NavigationLinks:\n            return (\n              <RenderHook\n                key={descriptor.type}\n                hook={useNavigationLinksPropControllerData}\n                parameters={[props[propName]]}\n              >\n                {value => renderFn({ ...propsValue, [propName]: value })}\n              </RenderHook>\n            )\n\n          case PropControllerTypes.TextInput:\n            return (\n              <RenderHook\n                key={descriptor.type}\n                hook={useTextInputPropControllerData}\n                parameters={[props[propName]]}\n              >\n                {value => renderFn({ ...propsValue, [propName]: value })}\n              </RenderHook>\n            )\n\n          case PropControllerTypes.TextArea:\n            return (\n              <RenderHook\n                key={descriptor.type}\n                hook={useTextAreaPropControllerData}\n                parameters={[props[propName]]}\n              >\n                {value => renderFn({ ...propsValue, [propName]: value })}\n              </RenderHook>\n            )\n\n          case PropControllerTypes.GapX:\n            return (\n              <RenderHook\n                key={descriptor.type}\n                hook={data => usePropValue(GapX, data)}\n                parameters={[props[propName]]}\n              >\n                {value => renderFn({ ...propsValue, [propName]: value })}\n              </RenderHook>\n            )\n\n          case PropControllerTypes.GapY:\n            return (\n              <RenderHook\n                key={descriptor.type}\n                hook={useGapYPropControllerData}\n                parameters={[props[propName]]}\n              >\n                {value => renderFn({ ...propsValue, [propName]: value })}\n              </RenderHook>\n            )\n\n          case PropControllerTypes.ElementID:\n            return (\n              <RenderHook\n                key={descriptor.type}\n                hook={useElementIDPropControllerData}\n                parameters={[props[propName]]}\n              >\n                {value => renderFn({ ...propsValue, [propName]: value })}\n              </RenderHook>\n            )\n\n          case PropControllerTypes.TableFormFields:\n            return (\n              <RenderHook\n                key={descriptor.type}\n                hook={useTableFormFieldsPropControllerData}\n                parameters={[props[propName]]}\n              >\n                {value => renderFn({ ...propsValue, [propName]: value })}\n              </RenderHook>\n            )\n\n          case PropControllerTypes.SocialLinks:\n            return renderFn({\n              ...propsValue,\n              [propName]: getSocialLinksPropControllerDataSocialLinksData(props[propName]),\n            })\n\n          case PropControllerTypes.Grid:\n            return (\n              <RenderHook\n                key={descriptor.type}\n                hook={useGridPropControllerData}\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":["useBorderData","PropControllerTypes"]}

package/dist/cjs/runtimes/react/hooks/use-store.js

@@ -24,8 +24,8 @@ __export(use_store_exports, {
 });
 module.exports = __toCommonJS(use_store_exports);
 var import_react = require("react");
-var import_react_runtime = require("../react-runtime");
-const StoreContext = (0, import_react.createContext)(import_react_runtime.ReactRuntime.store);
+var import_runtime_core = require("../runtime-core");
+const StoreContext = (0, import_react.createContext)(import_runtime_core.RuntimeCore.store);
 function useStore() {
   return (0, import_react.useContext)(StoreContext);
 }

package/dist/cjs/runtimes/react/hooks/use-store.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/runtimes/react/hooks/use-store.ts"],"sourcesContent":["'use client'\n\nimport { createContext, useContext } from 'react'\nimport { ReactRuntime } from '../react-runtime'\nimport { Store } from '../../../state/react-page'\n\nexport const StoreContext = createContext(ReactRuntime.store)\n\nexport function useStore(): Store {\n  return useContext(StoreContext)\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,mBAA0C;AAC1C,2BAA6B;AAGtB,MAAM,mBAAe,4BAAc,kCAAa,KAAK;AAErD,SAAS,WAAkB;AAChC,aAAO,yBAAW,YAAY;AAChC;","names":[]}
+{"version":3,"sources":["../../../../../src/runtimes/react/hooks/use-store.ts"],"sourcesContent":["'use client'\n\nimport { createContext, useContext } from 'react'\nimport { RuntimeCore } from '../runtime-core'\nimport { Store } from '../../../state/react-page'\n\nexport const StoreContext = createContext(RuntimeCore.store)\n\nexport function useStore(): Store {\n  return useContext(StoreContext)\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,mBAA0C;AAC1C,0BAA4B;AAGrB,MAAM,mBAAe,4BAAc,gCAAY,KAAK;AAEpD,SAAS,WAAkB;AAChC,aAAO,yBAAW,YAAY;AAChC;","names":[]}

package/dist/cjs/runtimes/react/poll-box-model.js

@@ -39,7 +39,7 @@ function pollBoxModel({
 }) {
   let currentBoxModel = null;
   const handleAnimationFrameRequest = () => {
-    const measuredBoxModel = (0, import_box_models.getBox)(element);
+    const measuredBoxModel = element == null ? null : (0, import_box_models.getBox)(element);
     if (!(0, import_deepEqual.default)(currentBoxModel, measuredBoxModel)) {
       currentBoxModel = measuredBoxModel;
       onBoxModelChange(currentBoxModel);

package/dist/cjs/runtimes/react/poll-box-model.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/runtimes/react/poll-box-model.ts"],"sourcesContent":["import { BoxModel, getBox } from '../../state/modules/box-models'\nimport deepEqual from '../../utils/deepEqual'\n\nexport function pollBoxModel({\n  element,\n  onBoxModelChange,\n}: {\n  element: Element\n  onBoxModelChange(boxModel: BoxModel | null): void\n}): () => void {\n  let currentBoxModel: BoxModel | null = null\n\n  const handleAnimationFrameRequest = () => {\n    const measuredBoxModel = getBox(element)\n\n    if (!deepEqual(currentBoxModel, measuredBoxModel)) {\n      currentBoxModel = measuredBoxModel\n\n      onBoxModelChange(currentBoxModel)\n    }\n\n    animationFrameHandle = requestAnimationFrame(handleAnimationFrameRequest)\n  }\n\n  let animationFrameHandle = requestAnimationFrame(handleAnimationFrameRequest)\n\n  return () => {\n    cancelAnimationFrame(animationFrameHandle)\n\n    onBoxModelChange(null)\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAAiC;AACjC,uBAAsB;AAEf,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AACF,GAGe;AACb,MAAI,kBAAmC;AAEvC,QAAM,8BAA8B,MAAM;AACxC,UAAM,uBAAmB,0BAAO,OAAO;AAEvC,QAAI,KAAC,iBAAAA,SAAU,iBAAiB,gBAAgB,GAAG;AACjD,wBAAkB;AAElB,uBAAiB,eAAe;AAAA,IAClC;AAEA,2BAAuB,sBAAsB,2BAA2B;AAAA,EAC1E;AAEA,MAAI,uBAAuB,sBAAsB,2BAA2B;AAE5E,SAAO,MAAM;AACX,yBAAqB,oBAAoB;AAEzC,qBAAiB,IAAI;AAAA,EACvB;AACF;","names":["deepEqual"]}
+{"version":3,"sources":["../../../../src/runtimes/react/poll-box-model.ts"],"sourcesContent":["import { BoxModel, getBox } from '../../state/modules/box-models'\nimport deepEqual from '../../utils/deepEqual'\n\nexport function pollBoxModel({\n  element,\n  onBoxModelChange,\n}: {\n  element: Element | null\n  onBoxModelChange(boxModel: BoxModel | null): void\n}): () => void {\n  let currentBoxModel: BoxModel | null = null\n\n  const handleAnimationFrameRequest = () => {\n    const measuredBoxModel = element == null ? null : getBox(element)\n\n    if (!deepEqual(currentBoxModel, measuredBoxModel)) {\n      currentBoxModel = measuredBoxModel\n\n      onBoxModelChange(currentBoxModel)\n    }\n\n    animationFrameHandle = requestAnimationFrame(handleAnimationFrameRequest)\n  }\n\n  let animationFrameHandle = requestAnimationFrame(handleAnimationFrameRequest)\n\n  return () => {\n    cancelAnimationFrame(animationFrameHandle)\n\n    onBoxModelChange(null)\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAAiC;AACjC,uBAAsB;AAEf,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AACF,GAGe;AACb,MAAI,kBAAmC;AAEvC,QAAM,8BAA8B,MAAM;AACxC,UAAM,mBAAmB,WAAW,OAAO,WAAO,0BAAO,OAAO;AAEhE,QAAI,KAAC,iBAAAA,SAAU,iBAAiB,gBAAgB,GAAG;AACjD,wBAAkB;AAElB,uBAAiB,eAAe;AAAA,IAClC;AAEA,2BAAuB,sBAAsB,2BAA2B;AAAA,EAC1E;AAEA,MAAI,uBAAuB,sBAAsB,2BAA2B;AAE5E,SAAO,MAAM;AACX,yBAAqB,oBAAoB;AAEzC,qBAAiB,IAAI;AAAA,EACvB;AACF;","names":["deepEqual"]}

package/dist/cjs/runtimes/react/react-runtime.js

@@ -23,14 +23,12 @@ __export(react_runtime_exports, {
 module.exports = __toCommonJS(react_runtime_exports);
 var import_register = require("../../components/builtin/register");
 var import_actions = require("../../state/actions");
-var import_breakpoints = require("../../state/modules/breakpoints");
 var import_components_meta = require("../../state/modules/components-meta");
-var import_react_page = require("../../state/react-page");
-class ReactRuntime {
+var import_runtime_core = require("./runtime-core");
+class ReactRuntime extends import_runtime_core.RuntimeCore {
   // TODO: the static methods here are deprecated and only keep here for backward-compatibility purpose.
   // We will remove them when we release a new breaking change.
   // ------------------ Deprecated API ------------------ //
-  static store = (0, import_react_page.configureStore)();
   static registerComponent(component, {
     type,
     label,
@@ -49,20 +47,7 @@ class ReactRuntime {
       unregisterReactComponent();
     };
   }
-  static copyElementTree(elementTree, replacementContext) {
-    return (0, import_react_page.copyElementTree)(this.store.getState(), elementTree, replacementContext);
-  }
-  static getBreakpoints() {
-    return (0, import_react_page.getBreakpoints)(this.store.getState());
-  }
-  static getTranslatableData(elementTree) {
-    return (0, import_react_page.getElementTreeTranslatableData)(this.store.getState(), elementTree);
-  }
-  static mergeTranslatedData(elementTree, translatedData) {
-    return (0, import_react_page.mergeElementTreeTranslatedData)(this.store.getState(), elementTree, translatedData);
-  }
   // ------------------ Deprecated API ends here ------------------ //
-  store;
   registerComponent(component, {
     type,
     label,
@@ -81,24 +66,10 @@ class ReactRuntime {
       unregisterReactComponent();
     };
   }
-  copyElementTree(elementTree, replacementContext) {
-    return (0, import_react_page.copyElementTree)(this.store.getState(), elementTree, replacementContext);
-  }
-  getBreakpoints() {
-    return (0, import_react_page.getBreakpoints)(this.store.getState());
-  }
   constructor({ breakpoints } = {}) {
-    this.store = (0, import_react_page.configureStore)({
-      breakpoints: breakpoints ? (0, import_breakpoints.parseBreakpointsInput)(breakpoints) : void 0
-    });
+    super({ breakpoints });
     (0, import_register.registerBuiltinComponents)(this);
   }
-  getTranslatableData(elementTree) {
-    return (0, import_react_page.getElementTreeTranslatableData)(this.store.getState(), elementTree);
-  }
-  mergeTranslatedData(elementTree, translatedData) {
-    return (0, import_react_page.mergeElementTreeTranslatedData)(this.store.getState(), elementTree, translatedData);
-  }
 }
 (0, import_register.registerBuiltinComponents)(ReactRuntime);
 // Annotate the CommonJS export names for ESM import in node: