@makeswift/runtime 0.9.0 → 0.9.2

package/dist/react-page.cjs.js

@@ -22,18 +22,41 @@ var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
+var _a;
 var redux = require("redux");
 var thunk = require("redux-thunk");
 var actions = require("./actions.cjs.js");
 var state_breakpoints = require("./state/breakpoints.cjs.js");
+var React = require("react");
+var css = require("@emotion/css");
+var serialize = require("@emotion/serialize");
+var utils = require("@emotion/utils");
 var slate = require("slate");
-var isHotkey = require("is-hotkey");
-require("slate-react");
 function _interopDefaultLegacy(e) {
   return e && typeof e === "object" && "default" in e ? e : { "default": e };
 }
+function _interopNamespace(e) {
+  if (e && e.__esModule)
+    return e;
+  var n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    Object.keys(e).forEach(function(k) {
+      if (k !== "default") {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function() {
+            return e[k];
+          }
+        });
+      }
+    });
+  }
+  n["default"] = e;
+  return Object.freeze(n);
+}
 var thunk__default = /* @__PURE__ */ _interopDefaultLegacy(thunk);
-var isHotkey__default = /* @__PURE__ */ _interopDefaultLegacy(isHotkey);
+var React__namespace = /* @__PURE__ */ _interopNamespace(React);
 const ComponentIcon = {
   Billing: "billing",
   Bolt: "bolt",
@@ -101,8 +124,8 @@ function getDocuments(state) {
   return state;
 }
 function getDocument$1(state, documentKey) {
-  var _a;
-  return (_a = getDocuments(state).get(documentKey)) != null ? _a : null;
+  var _a2;
+  return (_a2 = getDocuments(state).get(documentKey)) != null ? _a2 : null;
 }
 function reducer$8(state = getInitialState$7(), action) {
   switch (action.type) {
@@ -126,8 +149,8 @@ function getReactComponents(state) {
   return state;
 }
 function getReactComponent$1(state, type) {
-  var _a;
-  return (_a = getReactComponents(state).get(type)) != null ? _a : null;
+  var _a2;
+  return (_a2 = getReactComponents(state).get(type)) != null ? _a2 : null;
 }
 function reducer$7(state = getInitialState$6(), action) {
   switch (action.type) {
@@ -151,8 +174,8 @@ function getPropControllerDescriptors$1(state) {
   return state;
 }
 function getComponentPropControllerDescriptors$1(state, componentType) {
-  var _a;
-  return (_a = getPropControllerDescriptors$1(state).get(componentType)) != null ? _a : null;
+  var _a2;
+  return (_a2 = getPropControllerDescriptors$1(state).get(componentType)) != null ? _a2 : null;
 }
 function reducer$6(state = getInitialState$5(), action) {
   switch (action.type) {
@@ -177,24 +200,24 @@ function getInitialState$4() {
   return { handles: /* @__PURE__ */ new Map(), instances: /* @__PURE__ */ new Map() };
 }
 function getPropControllersHandle(state, documentKey, elementKey) {
-  var _a, _b;
-  return (_b = (_a = state.handles.get(documentKey)) == null ? void 0 : _a.get(elementKey)) != null ? _b : null;
+  var _a2, _b;
+  return (_b = (_a2 = state.handles.get(documentKey)) == null ? void 0 : _a2.get(elementKey)) != null ? _b : null;
 }
 function getPropControllers$1(state, documentKey, elementKey) {
-  var _a, _b;
-  return (_b = (_a = state.instances.get(documentKey)) == null ? void 0 : _a.get(elementKey)) != null ? _b : null;
+  var _a2, _b;
+  return (_b = (_a2 = state.instances.get(documentKey)) == null ? void 0 : _a2.get(elementKey)) != null ? _b : null;
 }
 function getPropController(state, documentKey, elementKey, propName) {
-  var _a, _b;
-  return (_b = (_a = getPropControllers$1(state, documentKey, elementKey)) == null ? void 0 : _a[propName]) != null ? _b : null;
+  var _a2, _b;
+  return (_b = (_a2 = getPropControllers$1(state, documentKey, elementKey)) == null ? void 0 : _a2[propName]) != null ? _b : null;
 }
 function reducer$5(state = getInitialState$4(), action) {
-  var _a, _b, _c, _d;
+  var _a2, _b, _c, _d;
   switch (action.type) {
     case actions.ActionTypes.REGISTER_PROP_CONTROLLERS_HANDLE: {
       const { documentKey, elementKey, handle } = action.payload;
       return __spreadProps(__spreadValues({}, state), {
-        handles: new Map(state.handles).set(documentKey, new Map((_a = state.handles.get(documentKey)) != null ? _a : []).set(elementKey, handle))
+        handles: new Map(state.handles).set(documentKey, new Map((_a2 = state.handles.get(documentKey)) != null ? _a2 : []).set(elementKey, handle))
       });
     }
     case actions.ActionTypes.UNREGISTER_PROP_CONTROLLERS_HANDLE: {
@@ -259,9 +282,9 @@ function reducer$2(state = getInitialState$1(), action) {
   }
 }
 function getInitialState(initialState) {
-  var _a, _b, _c;
+  var _a2, _b, _c;
   return {
-    locales: (_a = initialState == null ? void 0 : initialState.locales) != null ? _a : [],
+    locales: (_a2 = initialState == null ? void 0 : initialState.locales) != null ? _a2 : [],
     locale: (_b = initialState == null ? void 0 : initialState.locale) != null ? _b : null,
     defaultLocale: (_c = initialState == null ? void 0 : initialState.defaultLocale) != null ? _c : null
   };
@@ -291,99 +314,206 @@ function Color(config = {}) {
   return { type: ColorControlType, config };
 }
 function copyColorData(value, context) {
-  var _a;
+  var _a2;
   if (value == null)
     return value;
   return __spreadProps(__spreadValues({}, value), {
-    swatchId: (_a = context.replacementContext.swatchIds.get(value.swatchId)) != null ? _a : value.swatchId
+    swatchId: (_a2 = context.replacementContext.swatchIds.get(value.swatchId)) != null ? _a2 : value.swatchId
   });
 }
-const ImageControlType = "makeswift::controls::image";
-const ImageControlValueFormat = {
-  URL: "makeswift::controls::image::format::url",
-  WithDimensions: "makeswift::controls::image::format::with-dimensions"
-};
-function Image$1(config = {}) {
-  return { type: ImageControlType, config };
-}
-Image$1.Format = ImageControlValueFormat;
-function copyImageData(value, context) {
-  var _a;
-  if (value == null)
-    return value;
-  return (_a = context.replacementContext.fileIds.get(value)) != null ? _a : value;
+class PropController {
+  constructor(send) {
+    __publicField(this, "send");
+    this.send = send;
+  }
 }
-if (void 0) {
-  const { describe, test, expect } = void 0;
-  describe.concurrent("image copy", () => {
-    test("image is replaced by a one in replacement context", () => {
-      const data = "file-id";
-      const expected = "testing";
-      const replacementContext = {
-        elementHtmlIds: /* @__PURE__ */ new Set(),
-        elementKeys: /* @__PURE__ */ new Map(),
-        swatchIds: /* @__PURE__ */ new Map(),
-        fileIds: /* @__PURE__ */ new Map([["file-id", "testing"]]),
-        typographyIds: /* @__PURE__ */ new Map(),
-        tableIds: /* @__PURE__ */ new Map(),
-        tableColumnIds: /* @__PURE__ */ new Map(),
-        pageIds: /* @__PURE__ */ new Map(),
-        globalElementIds: /* @__PURE__ */ new Map(),
-        globalElementData: /* @__PURE__ */ new Map()
-      };
-      const result = copyImageData(data, {
-        replacementContext,
-        copyElement: (node) => node
-      });
-      expect(result).toMatchObject(expected);
-    });
-  });
+const StyleControlType = "makeswift::controls::style";
+const StyleControlProperty = {
+  Width: "makeswift::controls::style::property::width",
+  Margin: "makeswift::controls::style::property::margin",
+  Padding: "makeswift::controls::style::property::padding",
+  Border: "makeswift::controls::style::property::border",
+  BorderRadius: "makeswift::controls::style::property::border-radius",
+  TextStyle: "makeswift::controls::style::property::text-style"
+};
+const StyleControlDefaultProperties = [
+  StyleControlProperty.Width,
+  StyleControlProperty.Margin
+];
+const AllStyleControlProperties = [
+  StyleControlProperty.Width,
+  StyleControlProperty.Margin,
+  StyleControlProperty.Padding,
+  StyleControlProperty.Border,
+  StyleControlProperty.BorderRadius,
+  StyleControlProperty.TextStyle
+];
+function Style(params) {
+  var _a2;
+  return {
+    type: StyleControlType,
+    config: { properties: (_a2 = params == null ? void 0 : params.properties) != null ? _a2 : StyleControlDefaultProperties }
+  };
 }
-const LinkControlType = "makeswift::controls::link";
-function Link$1(config = {}) {
-  return { type: LinkControlType, config };
+Style.Default = StyleControlDefaultProperties;
+Style.All = AllStyleControlProperties;
+Style.Width = StyleControlProperty.Width;
+Style.Margin = StyleControlProperty.Margin;
+Style.Padding = StyleControlProperty.Padding;
+Style.Border = StyleControlProperty.Border;
+Style.BorderRadius = StyleControlProperty.BorderRadius;
+Style.TextStyle = StyleControlProperty.TextStyle;
+const StyleControlMessageType = {
+  CHANGE_BOX_MODEL: "makeswift::controls::style::message::change-box-model"
+};
+class StyleControl extends PropController {
+  constructor(send) {
+    super(send);
+  }
+  changeBoxModel(boxModel) {
+    this.send({ type: StyleControlMessageType.CHANGE_BOX_MODEL, payload: { boxModel } });
+  }
+  recv() {
+  }
 }
-function copyLinkData(value, context) {
-  var _a;
+function copyStyleData(value, context) {
   if (value == null)
     return value;
-  if (value.type === "OPEN_PAGE") {
-    const pageId = value.payload.pageId;
-    if (pageId != null) {
-      return __spreadProps(__spreadValues({}, value), {
-        payload: __spreadProps(__spreadValues({}, value.payload), {
-          pageId: (_a = context.replacementContext.pageIds.get(pageId)) != null ? _a : pageId
-        })
+  function copyResponsiveBorder(responsiveBorder) {
+    if (responsiveBorder == null)
+      return void 0;
+    return responsiveBorder.map((deviceBorder) => __spreadProps(__spreadValues({}, deviceBorder), {
+      value: copyBorder(deviceBorder.value)
+    }));
+  }
+  function copyBorder(border) {
+    function copyBorderSide(side) {
+      if (side == null)
+        return null;
+      if (side.color == null)
+        return side;
+      return __spreadProps(__spreadValues({}, side), {
+        color: copyColorData(side.color, context)
       });
     }
+    return {
+      borderTop: copyBorderSide(border.borderTop),
+      borderBottom: copyBorderSide(border.borderBottom),
+      borderRight: copyBorderSide(border.borderRight),
+      borderLeft: copyBorderSide(border.borderLeft)
+    };
   }
-  return value;
+  return __spreadProps(__spreadValues({}, value), { border: copyResponsiveBorder(value.border) });
 }
 if (void 0) {
   const { describe, test, expect } = void 0;
-  describe.concurrent("link", () => {
-    test("page id is replaced by one in replacement context", () => {
-      const data = {
-        type: "OPEN_PAGE",
-        payload: {
-          pageId: "UGFnZTpmNTdmMjQ2MS0wMGY3LTQzZWUtYmIwOS03ODdiNTUyYzUyYWQ=",
-          openInNewTab: false
-        }
+  describe.concurrent("style copy", () => {
+    test("colors are replaced", () => {
+      const value = {
+        width: [
+          {
+            value: {
+              unit: "px",
+              value: 100
+            },
+            deviceId: "desktop"
+          }
+        ],
+        border: [
+          {
+            value: {
+              borderTop: {
+                color: {
+                  alpha: 1,
+                  swatchId: "U3dhdGNoOmJjMDkwZWJjLTZkZDUtNDY1NS1hMDY0LTg3ZDAxM2U4YTFhNA=="
+                },
+                style: "solid",
+                width: 9
+              },
+              borderLeft: {
+                color: {
+                  alpha: 1,
+                  swatchId: "U3dhdGNoOmJjMDkwZWJjLTZkZDUtNDY1NS1hMDY0LTg3ZDAxM2U4YTFhNA=="
+                },
+                style: "solid",
+                width: 9
+              },
+              borderRight: {
+                color: {
+                  alpha: 1,
+                  swatchId: "U3dhdGNoOmJjMDkwZWJjLTZkZDUtNDY1NS1hMDY0LTg3ZDAxM2U4YTFhNA=="
+                },
+                style: "solid",
+                width: 9
+              },
+              borderBottom: {
+                color: {
+                  alpha: 1,
+                  swatchId: "U3dhdGNoOmJjMDkwZWJjLTZkZDUtNDY1NS1hMDY0LTg3ZDAxM2U4YTFhNA=="
+                },
+                style: "solid",
+                width: 9
+              }
+            },
+            deviceId: "desktop"
+          }
+        ],
+        textStyle: [
+          {
+            value: {
+              fontSize: {
+                unit: "px",
+                value: 46
+              },
+              fontStyle: [],
+              fontFamily: "Oswald",
+              fontWeight: 400,
+              letterSpacing: 5.2,
+              textTransform: []
+            },
+            deviceId: "desktop"
+          }
+        ],
+        borderRadius: [
+          {
+            value: {
+              borderTopLeftRadius: {
+                unit: "px",
+                value: 4
+              },
+              borderTopRightRadius: {
+                unit: "px",
+                value: 4
+              },
+              borderBottomLeftRadius: {
+                unit: "px",
+                value: 4
+              },
+              borderBottomRightRadius: {
+                unit: "px",
+                value: 4
+              }
+            },
+            deviceId: "desktop"
+          }
+        ]
       };
-      const expected = JSON.parse(JSON.stringify(data).replace("UGFnZTpmNTdmMjQ2MS0wMGY3LTQzZWUtYmIwOS03ODdiNTUyYzUyYWQ=", "testing"));
+      const expected = JSON.parse(JSON.stringify(value).replaceAll("U3dhdGNoOmJjMDkwZWJjLTZkZDUtNDY1NS1hMDY0LTg3ZDAxM2U4YTFhNA==", "testing"));
       const replacementContext = {
         elementHtmlIds: /* @__PURE__ */ new Set(),
         elementKeys: /* @__PURE__ */ new Map(),
-        swatchIds: /* @__PURE__ */ new Map(),
-        pageIds: /* @__PURE__ */ new Map([["UGFnZTpmNTdmMjQ2MS0wMGY3LTQzZWUtYmIwOS03ODdiNTUyYzUyYWQ=", "testing"]]),
+        swatchIds: /* @__PURE__ */ new Map([
+          ["U3dhdGNoOmJjMDkwZWJjLTZkZDUtNDY1NS1hMDY0LTg3ZDAxM2U4YTFhNA==", "testing"]
+        ]),
+        fileIds: /* @__PURE__ */ new Map(),
         typographyIds: /* @__PURE__ */ new Map(),
         tableIds: /* @__PURE__ */ new Map(),
         tableColumnIds: /* @__PURE__ */ new Map(),
-        fileIds: /* @__PURE__ */ new Map(),
+        pageIds: /* @__PURE__ */ new Map(),
         globalElementIds: /* @__PURE__ */ new Map(),
         globalElementData: /* @__PURE__ */ new Map()
       };
-      const result = copyLinkData(data, {
+      const result = copyStyleData(value, {
         replacementContext,
         copyElement: (node) => node
       });
@@ -391,28 +521,338 @@ if (void 0) {
     });
   });
 }
-class PropController {
-  constructor(send) {
-    __publicField(this, "send");
-    this.send = send;
-  }
-}
-const RichTextPropControllerMessageType = {
-  CHANGE_BUILDER_EDIT_MODE: "CHANGE_BUILDER_EDIT_MODE",
-  INITIALIZE_EDITOR: "INITIALIZE_EDITOR",
-  CHANGE_EDITOR_VALUE: "CHANGE_EDITOR_VALUE",
-  FOCUS: "FOCUS",
-  BLUR: "BLUR",
-  UNDO: "UNDO",
-  REDO: "REDO",
-  CHANGE_BOX_MODEL: "CHANGE_BOX_MODEL"
-};
-class DefaultPropController extends PropController {
-  constructor() {
-    super(...arguments);
-    __publicField(this, "recv", (_message) => {
-    });
-  }
+const Types = {
+  Backgrounds: "Backgrounds",
+  Border: "Border",
+  BorderRadius: "BorderRadius",
+  Checkbox: "Checkbox",
+  Date: "Date",
+  ElementID: "ElementID",
+  Font: "Font",
+  GapX: "GapX",
+  GapY: "GapY",
+  Grid: "Grid",
+  Image: "Image",
+  Images: "Images",
+  Link: "Link",
+  List: "List",
+  Margin: "Margin",
+  NavigationLinks: "NavigationLinks",
+  Number: "Number",
+  Padding: "Padding",
+  ResponsiveColor: "ResponsiveColor",
+  ResponsiveIconRadioGroup: "ResponsiveIconRadioGroup",
+  ResponsiveLength: "ResponsiveLength",
+  ResponsiveNumber: "ResponsiveNumber",
+  ResponsiveOpacity: "ResponsiveOpacity",
+  ResponsiveSelect: "ResponsiveSelect",
+  RichText: "RichText",
+  Shadows: "Shadows",
+  Shape: "Shape",
+  SocialLinks: "SocialLinks",
+  Table: "Table",
+  TableFormFields: "TableFormFields",
+  Typeahead: "Typeahead",
+  TextArea: "TextArea",
+  TextInput: "TextInput",
+  TextStyle: "TextStyle",
+  Video: "Video",
+  Width: "Width",
+  Style: StyleControlType
+};
+function Backgrounds(options = {}) {
+  return { type: Types.Backgrounds, options };
+}
+const BorderPropControllerFormat = {
+  ClassName: "makeswift::prop-controllers::border::format::class-name",
+  ResponsiveValue: "makeswift::prop-controllers:border::format::responsive-value"
+};
+function Border(options = {}) {
+  return { type: Types.Border, options };
+}
+Border.Format = BorderPropControllerFormat;
+const BorderRadiusPropControllerFormat = {
+  ClassName: "makeswift::prop-controllers::border-radius::format::class-name",
+  ResponsiveValue: "makeswift::prop-controllers::border-radius::format::responsive-value"
+};
+function BorderRadius(options = {}) {
+  return { type: Types.BorderRadius, options };
+}
+BorderRadius.Format = BorderRadiusPropControllerFormat;
+function Checkbox(options) {
+  return { type: Types.Checkbox, options };
+}
+function Date(options = {}) {
+  return { type: Types.Date, options };
+}
+function ElementID(options = {}) {
+  return { type: Types.ElementID, options };
+}
+function Font(options = {}) {
+  return { type: Types.Font, options };
+}
+function GapX(options = {}) {
+  return { type: Types.GapX, options };
+}
+function GapY(options = {}) {
+  return { type: Types.GapY, options };
+}
+function Grid(options = {}) {
+  return { type: Types.Grid, options };
+}
+function Image$1(options = {}) {
+  return { type: Types.Image, options };
+}
+function Images(options = {}) {
+  return { type: Types.Images, options };
+}
+function Link$1(options = {}) {
+  return { type: Types.Link, options };
+}
+function List$1(options) {
+  return { type: Types.List, options };
+}
+const MarginPropControllerFormat = {
+  ClassName: "makeswift::prop-controllers::margin::format::class-name",
+  ResponsiveValue: "makeswift::prop-controllers::margin::format::responsive-value"
+};
+function Margin(options = {}) {
+  return { type: Types.Margin, options };
+}
+Margin.Format = MarginPropControllerFormat;
+function NavigationLinks(options = {}) {
+  return { type: Types.NavigationLinks, options };
+}
+function Number(options = {}) {
+  return { type: Types.Number, options };
+}
+const PaddingPropControllerFormat = {
+  ClassName: "makeswift::prop-controllers::padding::format::class-name",
+  ResponsiveValue: "makeswift::prop-controllers::padding::format::responsive-value"
+};
+function Padding(options = {}) {
+  return { type: Types.Padding, options };
+}
+Padding.Format = PaddingPropControllerFormat;
+function ResponsiveColor(options = {}) {
+  return { type: Types.ResponsiveColor, options };
+}
+function ResponsiveIconRadioGroup(options) {
+  return { type: Types.ResponsiveIconRadioGroup, options };
+}
+function ResponsiveLength(options = {}) {
+  return { type: Types.ResponsiveLength, options };
+}
+function ResponsiveNumber(options = {}) {
+  return { type: Types.ResponsiveNumber, options };
+}
+function ResponsiveOpacity(options = {}) {
+  return { type: Types.ResponsiveOpacity, options };
+}
+function ResponsiveSelect(options) {
+  return { type: Types.ResponsiveSelect, options };
+}
+function RichText$1(options = {}) {
+  return { type: Types.RichText, options };
+}
+const ShadowsPropControllerFormat = {
+  ClassName: "makeswift::prop-controllers::shadows::format::class-name",
+  ResponsiveValue: "makeswift::prop-controllers::shadows::format::responsive-value"
+};
+function Shadows(options = {}) {
+  return { type: Types.Shadows, options };
+}
+Shadows.Format = ShadowsPropControllerFormat;
+function Shape$1(options) {
+  return { type: Types.Shape, options };
+}
+function SocialLinks(options = {}) {
+  return { type: Types.SocialLinks, options };
+}
+function Table(options = {}) {
+  return { type: Types.Table, options };
+}
+function TableFormFields(options = {}) {
+  return { type: Types.TableFormFields, options };
+}
+function Typeahead(options) {
+  return { type: Types.Typeahead, options };
+}
+function TextArea(options = {}) {
+  return { type: Types.TextArea, options };
+}
+function TextInput(options = {}) {
+  return { type: Types.TextInput, options };
+}
+function TextStyle(options = {}) {
+  return { type: Types.TextStyle, options };
+}
+function Video(options = {}) {
+  return { type: Types.Video, options };
+}
+const WidthPropControllerFormat = {
+  ClassName: "makeswift::prop-controllers::width::format::class-name",
+  ResponsiveValue: "makeswift::prop-controllers::width::format::responsive-value"
+};
+function Width(options = {}) {
+  return { type: Types.Width, options };
+}
+Width.Format = WidthPropControllerFormat;
+var descriptors = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  Types,
+  Backgrounds,
+  BorderPropControllerFormat,
+  Border,
+  BorderRadiusPropControllerFormat,
+  BorderRadius,
+  Checkbox,
+  Date,
+  ElementID,
+  Font,
+  GapX,
+  GapY,
+  Grid,
+  Image: Image$1,
+  Images,
+  Link: Link$1,
+  List: List$1,
+  MarginPropControllerFormat,
+  Margin,
+  NavigationLinks,
+  Number,
+  PaddingPropControllerFormat,
+  Padding,
+  ResponsiveColor,
+  ResponsiveIconRadioGroup,
+  ResponsiveLength,
+  ResponsiveNumber,
+  ResponsiveOpacity,
+  ResponsiveSelect,
+  RichText: RichText$1,
+  ShadowsPropControllerFormat,
+  Shadows,
+  Shape: Shape$1,
+  SocialLinks,
+  Table,
+  TableFormFields,
+  Typeahead,
+  TextArea,
+  TextInput,
+  TextStyle,
+  Video,
+  WidthPropControllerFormat,
+  Width
+}, Symbol.toStringTag, { value: "Module" }));
+const ImageControlType = "makeswift::controls::image";
+const ImageControlValueFormat = {
+  URL: "makeswift::controls::image::format::url",
+  WithDimensions: "makeswift::controls::image::format::with-dimensions"
+};
+function Image(config = {}) {
+  return { type: ImageControlType, config };
+}
+Image.Format = ImageControlValueFormat;
+function copyImageData(value, context) {
+  var _a2;
+  if (value == null)
+    return value;
+  return (_a2 = context.replacementContext.fileIds.get(value)) != null ? _a2 : value;
+}
+if (void 0) {
+  const { describe, test, expect } = void 0;
+  describe.concurrent("image copy", () => {
+    test("image is replaced by a one in replacement context", () => {
+      const data = "file-id";
+      const expected = "testing";
+      const replacementContext = {
+        elementHtmlIds: /* @__PURE__ */ new Set(),
+        elementKeys: /* @__PURE__ */ new Map(),
+        swatchIds: /* @__PURE__ */ new Map(),
+        fileIds: /* @__PURE__ */ new Map([["file-id", "testing"]]),
+        typographyIds: /* @__PURE__ */ new Map(),
+        tableIds: /* @__PURE__ */ new Map(),
+        tableColumnIds: /* @__PURE__ */ new Map(),
+        pageIds: /* @__PURE__ */ new Map(),
+        globalElementIds: /* @__PURE__ */ new Map(),
+        globalElementData: /* @__PURE__ */ new Map()
+      };
+      const result = copyImageData(data, {
+        replacementContext,
+        copyElement: (node) => node
+      });
+      expect(result).toMatchObject(expected);
+    });
+  });
+}
+const LinkControlType = "makeswift::controls::link";
+function Link(config = {}) {
+  return { type: LinkControlType, config };
+}
+function copyLinkData(value, context) {
+  var _a2;
+  if (value == null)
+    return value;
+  if (value.type === "OPEN_PAGE") {
+    const pageId = value.payload.pageId;
+    if (pageId != null) {
+      return __spreadProps(__spreadValues({}, value), {
+        payload: __spreadProps(__spreadValues({}, value.payload), {
+          pageId: (_a2 = context.replacementContext.pageIds.get(pageId)) != null ? _a2 : pageId
+        })
+      });
+    }
+  }
+  return value;
+}
+if (void 0) {
+  const { describe, test, expect } = void 0;
+  describe.concurrent("link", () => {
+    test("page id is replaced by one in replacement context", () => {
+      const data = {
+        type: "OPEN_PAGE",
+        payload: {
+          pageId: "UGFnZTpmNTdmMjQ2MS0wMGY3LTQzZWUtYmIwOS03ODdiNTUyYzUyYWQ=",
+          openInNewTab: false
+        }
+      };
+      const expected = JSON.parse(JSON.stringify(data).replace("UGFnZTpmNTdmMjQ2MS0wMGY3LTQzZWUtYmIwOS03ODdiNTUyYzUyYWQ=", "testing"));
+      const replacementContext = {
+        elementHtmlIds: /* @__PURE__ */ new Set(),
+        elementKeys: /* @__PURE__ */ new Map(),
+        swatchIds: /* @__PURE__ */ new Map(),
+        pageIds: /* @__PURE__ */ new Map([["UGFnZTpmNTdmMjQ2MS0wMGY3LTQzZWUtYmIwOS03ODdiNTUyYzUyYWQ=", "testing"]]),
+        typographyIds: /* @__PURE__ */ new Map(),
+        tableIds: /* @__PURE__ */ new Map(),
+        tableColumnIds: /* @__PURE__ */ new Map(),
+        fileIds: /* @__PURE__ */ new Map(),
+        globalElementIds: /* @__PURE__ */ new Map(),
+        globalElementData: /* @__PURE__ */ new Map()
+      };
+      const result = copyLinkData(data, {
+        replacementContext,
+        copyElement: (node) => node
+      });
+      expect(result).toMatchObject(expected);
+    });
+  });
+}
+const RichTextPropControllerMessageType = {
+  CHANGE_BUILDER_EDIT_MODE: "CHANGE_BUILDER_EDIT_MODE",
+  INITIALIZE_EDITOR: "INITIALIZE_EDITOR",
+  CHANGE_EDITOR_VALUE: "CHANGE_EDITOR_VALUE",
+  FOCUS: "FOCUS",
+  BLUR: "BLUR",
+  UNDO: "UNDO",
+  REDO: "REDO",
+  CHANGE_BOX_MODEL: "CHANGE_BOX_MODEL"
+};
+class DefaultPropController extends PropController {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "recv", (_message) => {
+    });
+  }
 }
 class RichTextPropController extends PropController {
   constructor() {
@@ -505,12 +945,14 @@ function createPropController(descriptor, send) {
       return new ShapeControl(send, descriptor);
     case StyleControlType:
       return new StyleControl(send);
+    case StyleV2ControlType:
+      return new StyleV2Control(send, descriptor);
     default:
       return new DefaultPropController(send);
   }
 }
 const ListControlType = "makeswift::controls::list";
-function List$1(config) {
+function List(config) {
   return { type: ListControlType, config };
 }
 const ListControlMessageType = {
@@ -561,15 +1003,15 @@ class ListControl extends PropController {
     this.controls = /* @__PURE__ */ new Map();
   }
 }
-function copyListData(definition2, value, context) {
+function copyListData(definition, value, context) {
   if (value == null)
     return value;
   return value && value.map((item) => __spreadProps(__spreadValues({}, item), {
-    value: copy(definition2.config.type, item.value, context)
+    value: copy(definition.config.type, item.value, context)
   }));
 }
 const ShapeControlType = "makeswift::controls::shape";
-function Shape$1(config) {
+function Shape(config) {
   return { type: ShapeControlType, config };
 }
 const ShapeControlMessageType = {
@@ -611,210 +1053,16 @@ class ShapeControl extends PropController {
     this.setControls();
   }
 }
-function copyShapeData(definition2, value, context) {
+function copyShapeData(definition, value, context) {
   if (value == null)
     return value;
   const newValue = {};
-  for (const [key, itemDefinition] of Object.entries(definition2.config.type)) {
+  for (const [key, itemDefinition] of Object.entries(definition.config.type)) {
     const prop = value[key];
     newValue[key] = copy(itemDefinition, prop, context);
   }
   return newValue;
 }
-const StyleControlType = "makeswift::controls::style";
-const StyleControlProperty = {
-  Width: "makeswift::controls::style::property::width",
-  Margin: "makeswift::controls::style::property::margin",
-  Padding: "makeswift::controls::style::property::padding",
-  Border: "makeswift::controls::style::property::border",
-  BorderRadius: "makeswift::controls::style::property::border-radius",
-  TextStyle: "makeswift::controls::style::property::text-style"
-};
-const StyleControlDefaultProperties = [
-  StyleControlProperty.Width,
-  StyleControlProperty.Margin
-];
-const AllStyleControlProperties = [
-  StyleControlProperty.Width,
-  StyleControlProperty.Margin,
-  StyleControlProperty.Padding,
-  StyleControlProperty.Border,
-  StyleControlProperty.BorderRadius,
-  StyleControlProperty.TextStyle
-];
-function Style(params) {
-  var _a;
-  return {
-    type: StyleControlType,
-    config: { properties: (_a = params == null ? void 0 : params.properties) != null ? _a : StyleControlDefaultProperties }
-  };
-}
-Style.Default = StyleControlDefaultProperties;
-Style.All = AllStyleControlProperties;
-Style.Width = StyleControlProperty.Width;
-Style.Margin = StyleControlProperty.Margin;
-Style.Padding = StyleControlProperty.Padding;
-Style.Border = StyleControlProperty.Border;
-Style.BorderRadius = StyleControlProperty.BorderRadius;
-Style.TextStyle = StyleControlProperty.TextStyle;
-const StyleControlMessageType = {
-  CHANGE_BOX_MODEL: "makeswift::controls::style::message::change-box-model"
-};
-class StyleControl extends PropController {
-  constructor(send) {
-    super(send);
-  }
-  changeBoxModel(boxModel) {
-    this.send({ type: StyleControlMessageType.CHANGE_BOX_MODEL, payload: { boxModel } });
-  }
-  recv() {
-  }
-}
-function copyStyleData(value, context) {
-  if (value == null)
-    return value;
-  function copyResponsiveBorder(responsiveBorder) {
-    if (responsiveBorder == null)
-      return void 0;
-    return responsiveBorder.map((deviceBorder) => __spreadProps(__spreadValues({}, deviceBorder), {
-      value: copyBorder(deviceBorder.value)
-    }));
-  }
-  function copyBorder(border) {
-    function copyBorderSide(side) {
-      if (side == null)
-        return null;
-      if (side.color == null)
-        return side;
-      return __spreadProps(__spreadValues({}, side), {
-        color: copyColorData(side.color, context)
-      });
-    }
-    return {
-      borderTop: copyBorderSide(border.borderTop),
-      borderBottom: copyBorderSide(border.borderBottom),
-      borderRight: copyBorderSide(border.borderRight),
-      borderLeft: copyBorderSide(border.borderLeft)
-    };
-  }
-  return __spreadProps(__spreadValues({}, value), { border: copyResponsiveBorder(value.border) });
-}
-if (void 0) {
-  const { describe, test, expect } = void 0;
-  describe.concurrent("style copy", () => {
-    test("colors are replaced", () => {
-      const value = {
-        width: [
-          {
-            value: {
-              unit: "px",
-              value: 100
-            },
-            deviceId: "desktop"
-          }
-        ],
-        border: [
-          {
-            value: {
-              borderTop: {
-                color: {
-                  alpha: 1,
-                  swatchId: "U3dhdGNoOmJjMDkwZWJjLTZkZDUtNDY1NS1hMDY0LTg3ZDAxM2U4YTFhNA=="
-                },
-                style: "solid",
-                width: 9
-              },
-              borderLeft: {
-                color: {
-                  alpha: 1,
-                  swatchId: "U3dhdGNoOmJjMDkwZWJjLTZkZDUtNDY1NS1hMDY0LTg3ZDAxM2U4YTFhNA=="
-                },
-                style: "solid",
-                width: 9
-              },
-              borderRight: {
-                color: {
-                  alpha: 1,
-                  swatchId: "U3dhdGNoOmJjMDkwZWJjLTZkZDUtNDY1NS1hMDY0LTg3ZDAxM2U4YTFhNA=="
-                },
-                style: "solid",
-                width: 9
-              },
-              borderBottom: {
-                color: {
-                  alpha: 1,
-                  swatchId: "U3dhdGNoOmJjMDkwZWJjLTZkZDUtNDY1NS1hMDY0LTg3ZDAxM2U4YTFhNA=="
-                },
-                style: "solid",
-                width: 9
-              }
-            },
-            deviceId: "desktop"
-          }
-        ],
-        textStyle: [
-          {
-            value: {
-              fontSize: {
-                unit: "px",
-                value: 46
-              },
-              fontStyle: [],
-              fontFamily: "Oswald",
-              fontWeight: 400,
-              letterSpacing: 5.2,
-              textTransform: []
-            },
-            deviceId: "desktop"
-          }
-        ],
-        borderRadius: [
-          {
-            value: {
-              borderTopLeftRadius: {
-                unit: "px",
-                value: 4
-              },
-              borderTopRightRadius: {
-                unit: "px",
-                value: 4
-              },
-              borderBottomLeftRadius: {
-                unit: "px",
-                value: 4
-              },
-              borderBottomRightRadius: {
-                unit: "px",
-                value: 4
-              }
-            },
-            deviceId: "desktop"
-          }
-        ]
-      };
-      const expected = JSON.parse(JSON.stringify(value).replaceAll("U3dhdGNoOmJjMDkwZWJjLTZkZDUtNDY1NS1hMDY0LTg3ZDAxM2U4YTFhNA==", "testing"));
-      const replacementContext = {
-        elementHtmlIds: /* @__PURE__ */ new Set(),
-        elementKeys: /* @__PURE__ */ new Map(),
-        swatchIds: /* @__PURE__ */ new Map([
-          ["U3dhdGNoOmJjMDkwZWJjLTZkZDUtNDY1NS1hMDY0LTg3ZDAxM2U4YTFhNA==", "testing"]
-        ]),
-        fileIds: /* @__PURE__ */ new Map(),
-        typographyIds: /* @__PURE__ */ new Map(),
-        tableIds: /* @__PURE__ */ new Map(),
-        tableColumnIds: /* @__PURE__ */ new Map(),
-        pageIds: /* @__PURE__ */ new Map(),
-        globalElementIds: /* @__PURE__ */ new Map(),
-        globalElementData: /* @__PURE__ */ new Map()
-      };
-      const result = copyStyleData(value, {
-        replacementContext,
-        copyElement: (node) => node
-      });
-      expect(result).toMatchObject(expected);
-    });
-  });
-}
 const SlotControlType = "makeswift::controls::slot";
 function Slot() {
   return { type: SlotControlType };
@@ -864,22 +1112,22 @@ function copy$e(value, context) {
     return value;
   return value.map((override) => __spreadProps(__spreadValues({}, override), {
     value: override.value.map((backgroundItem) => {
-      var _a, _b;
+      var _a2, _b;
       switch (backgroundItem.type) {
         case "color":
           return __spreadProps(__spreadValues({}, backgroundItem), {
             payload: backgroundItem.payload === null ? null : __spreadProps(__spreadValues({}, backgroundItem.payload), {
-              swatchId: (_a = context.replacementContext.swatchIds.get(backgroundItem.payload.swatchId)) != null ? _a : backgroundItem.payload.swatchId
+              swatchId: (_a2 = context.replacementContext.swatchIds.get(backgroundItem.payload.swatchId)) != null ? _a2 : backgroundItem.payload.swatchId
             })
           });
         case "gradient":
           return __spreadProps(__spreadValues({}, backgroundItem), {
             payload: __spreadProps(__spreadValues({}, backgroundItem.payload), {
               stops: backgroundItem.payload.stops.map((stop) => {
-                var _a2;
+                var _a3;
                 return __spreadProps(__spreadValues({}, stop), {
                   color: stop.color == null ? null : __spreadProps(__spreadValues({}, stop.color), {
-                    swatchId: (_a2 = context.replacementContext.swatchIds.get(stop.color.swatchId)) != null ? _a2 : stop.color.swatchId
+                    swatchId: (_a3 = context.replacementContext.swatchIds.get(stop.color.swatchId)) != null ? _a3 : stop.color.swatchId
                   })
                 });
               })
@@ -905,7 +1153,7 @@ function copy$d(value, context) {
   });
 }
 function copy$c(value, context) {
-  var _a, _b;
+  var _a2, _b;
   if (value == null)
     return value;
   switch (value.type) {
@@ -915,7 +1163,7 @@ function copy$c(value, context) {
         return value;
       return __spreadProps(__spreadValues({}, value), {
         payload: __spreadProps(__spreadValues({}, value.payload), {
-          pageId: (_a = context.replacementContext.pageIds.get(pageId)) != null ? _a : pageId
+          pageId: (_a2 = context.replacementContext.pageIds.get(pageId)) != null ? _a2 : pageId
         })
       });
     }
@@ -948,10 +1196,10 @@ function copy$b(value, context) {
           payload: __spreadProps(__spreadValues({}, item.payload), {
             link: link != null ? copy$c(link, context) : void 0,
             color: color != null ? color.map((override) => {
-              var _a;
+              var _a2;
               return __spreadProps(__spreadValues({}, override), {
                 value: __spreadProps(__spreadValues({}, override.value), {
-                  swatchId: (_a = context.replacementContext.swatchIds.get(override.value.swatchId)) != null ? _a : override.value.swatchId
+                  swatchId: (_a2 = context.replacementContext.swatchIds.get(override.value.swatchId)) != null ? _a2 : override.value.swatchId
                 })
               });
             }) : void 0
@@ -1009,14 +1257,14 @@ function copy$a(value, context) {
     return value;
   return value.map((override) => __spreadProps(__spreadValues({}, override), { value: override.value.map(copyShadowItem) }));
   function copyShadowItem(item) {
-    var _a;
+    var _a2;
     const { color } = item.payload;
     if (color == null)
       return item;
     return __spreadProps(__spreadValues({}, item), {
       payload: __spreadProps(__spreadValues({}, item.payload), {
         color: __spreadProps(__spreadValues({}, color), {
-          swatchId: (_a = context.replacementContext.swatchIds.get(color.swatchId)) != null ? _a : color.swatchId
+          swatchId: (_a2 = context.replacementContext.swatchIds.get(color.swatchId)) != null ? _a2 : color.swatchId
         })
       })
     });
@@ -1070,10 +1318,10 @@ if (void 0) {
   });
 }
 function copy$9(value, context) {
-  var _a;
+  var _a2;
   if (value == null)
     return value;
-  return (_a = context.replacementContext.fileIds.get(value)) != null ? _a : value;
+  return (_a2 = context.replacementContext.fileIds.get(value)) != null ? _a2 : value;
 }
 if (void 0) {
   const { describe, test, expect } = void 0;
@@ -1106,13 +1354,13 @@ function copy$8(value, context) {
     return value;
   return value.map(copyImagesPanelItem);
   function copyImagesPanelItem(imagesPanelItem) {
-    var _a;
+    var _a2;
     const { file } = imagesPanelItem.props;
     if (file == null)
       return imagesPanelItem;
     return __spreadProps(__spreadValues({}, imagesPanelItem), {
       props: __spreadProps(__spreadValues({}, imagesPanelItem.props), {
-        file: (_a = context.replacementContext.fileIds.get(file)) != null ? _a : file
+        file: (_a2 = context.replacementContext.fileIds.get(file)) != null ? _a2 : file
       })
     });
   }
@@ -1161,9 +1409,9 @@ function copy$7(value, context) {
     return value;
   return value.map((override) => __spreadProps(__spreadValues({}, override), { value: copyColorValue(override.value) }));
   function copyColorValue(colorValue) {
-    var _a;
+    var _a2;
     return __spreadProps(__spreadValues({}, colorValue), {
-      swatchId: (_a = context.replacementContext.swatchIds.get(colorValue.swatchId)) != null ? _a : colorValue.swatchId
+      swatchId: (_a2 = context.replacementContext.swatchIds.get(colorValue.swatchId)) != null ? _a2 : colorValue.swatchId
     });
   }
 }
@@ -1172,9 +1420,9 @@ function copy$6(value, context) {
     return value;
   return __spreadProps(__spreadValues({}, value), { fields: value.fields.map(copyFormFieldsPanelItem) });
   function copyFormFieldsPanelItem(item) {
-    var _a;
+    var _a2;
     return __spreadProps(__spreadValues({}, item), {
-      tableColumnId: (_a = context.replacementContext.tableColumnIds.get(item.tableColumnId)) != null ? _a : item.tableColumnId
+      tableColumnId: (_a2 = context.replacementContext.tableColumnIds.get(item.tableColumnId)) != null ? _a2 : item.tableColumnId
     });
   }
 }
@@ -1228,10 +1476,10 @@ if (void 0) {
   });
 }
 function copy$5(value, context) {
-  var _a;
+  var _a2;
   if (value == null)
     return value;
-  return (_a = context.replacementContext.tableIds.get(value)) != null ? _a : value;
+  return (_a2 = context.replacementContext.tableIds.get(value)) != null ? _a2 : value;
 }
 if (void 0) {
   const { describe, test, expect } = void 0;
@@ -1273,13 +1521,13 @@ function copy$4(value, context) {
     };
   }
   function copyBorderSide(borderSide) {
-    var _a;
+    var _a2;
     const { color } = borderSide;
     if (color == null)
       return borderSide;
     return __spreadProps(__spreadValues({}, borderSide), {
       color: __spreadProps(__spreadValues({}, color), {
-        swatchId: (_a = context.replacementContext.swatchIds.get(color.swatchId)) != null ? _a : color.swatchId
+        swatchId: (_a2 = context.replacementContext.swatchIds.get(color.swatchId)) != null ? _a2 : color.swatchId
       })
     });
   }
@@ -1393,24 +1641,24 @@ function copy$3(value, context) {
     return value;
   return __spreadProps(__spreadValues({}, value), { document: value.document ? copyNode(value.document) : value.document });
   function copyNode(node) {
-    var _a;
+    var _a2;
     switch (node.object) {
       case "document":
       case "block":
       case "inline":
         return copyInline(node);
       case "text":
-        return __spreadProps(__spreadValues({}, node), { marks: (_a = node.marks) == null ? void 0 : _a.map(copyMark) });
+        return __spreadProps(__spreadValues({}, node), { marks: (_a2 = node.marks) == null ? void 0 : _a2.map(copyMark) });
       default:
         return node;
     }
   }
   function copyInline(inline) {
-    var _a, _b;
+    var _a2, _b;
     switch (inline.type) {
       case "link":
         return __spreadProps(__spreadValues({}, inline), {
-          nodes: (_a = inline.nodes) == null ? void 0 : _a.map(copyNode),
+          nodes: (_a2 = inline.nodes) == null ? void 0 : _a2.map(copyNode),
           data: inline.data ? copyLinkData2(inline.data) : inline.data
         });
       default:
@@ -1418,7 +1666,7 @@ function copy$3(value, context) {
     }
   }
   function copyLinkData2(data) {
-    var _a, _b;
+    var _a2, _b;
     switch (data.type) {
       case "OPEN_PAGE": {
         const pageId = data.payload.pageId;
@@ -1426,7 +1674,7 @@ function copy$3(value, context) {
           return data;
         return __spreadProps(__spreadValues({}, data), {
           payload: __spreadProps(__spreadValues({}, data.payload), {
-            pageId: (_a = context.replacementContext.pageIds.get(pageId)) != null ? _a : data.payload.pageId
+            pageId: (_a2 = context.replacementContext.pageIds.get(pageId)) != null ? _a2 : data.payload.pageId
           })
         });
       }
@@ -1447,20 +1695,20 @@ function copy$3(value, context) {
     }
   }
   function copyMark(mark) {
-    var _a, _b, _c, _d;
+    var _a2, _b, _c, _d;
     switch (mark.type) {
       case "typography": {
-        const typographyId = (_a = mark.data) == null ? void 0 : _a.value.id;
+        const typographyId = (_a2 = mark.data) == null ? void 0 : _a2.value.id;
         return __spreadProps(__spreadValues({}, mark), {
           data: __spreadProps(__spreadValues({}, mark.data), {
             value: __spreadProps(__spreadValues({}, (_b = mark.data) == null ? void 0 : _b.value), {
               id: (_c = context.replacementContext.typographyIds.get(typographyId)) != null ? _c : typographyId,
               style: (_d = mark.data) == null ? void 0 : _d.value.style.map((override) => {
-                var _a2, _b2, _c2;
+                var _a3, _b2, _c2;
                 return __spreadProps(__spreadValues({}, override), {
                   value: __spreadProps(__spreadValues({}, override.value), {
                     color: override.value.color == null ? override.value.color : __spreadProps(__spreadValues({}, override.value.color), {
-                      swatchId: (_c2 = context.replacementContext.swatchIds.get((_a2 = override.value.color) == null ? void 0 : _a2.swatchId)) != null ? _c2 : (_b2 = override.value.color) == null ? void 0 : _b2.swatchId
+                      swatchId: (_c2 = context.replacementContext.swatchIds.get((_a3 = override.value.color) == null ? void 0 : _a3.swatchId)) != null ? _c2 : (_b2 = override.value.color) == null ? void 0 : _b2.swatchId
                     })
                   })
                 });
@@ -1611,8 +1859,8 @@ function copy$1(descriptor, value, context) {
 function copyElementReference(value, context) {
   return context.replacementContext.globalElementIds.get(value) || value;
 }
-function copy(definition2, value, context) {
-  switch (definition2.type) {
+function copy(definition, value, context) {
+  switch (definition.type) {
     case Types.Backgrounds:
     case Types.Grid:
     case Types.NavigationLinks:
@@ -1626,7 +1874,7 @@ function copy(definition2, value, context) {
     case Types.Border:
     case Types.RichText:
     case Types.ElementID:
-      return copy$1(definition2, value, context);
+      return copy$1(definition, value, context);
     case ColorControlType:
       return copyColorData(value, context);
     case ImageControlType:
@@ -1634,9 +1882,9 @@ function copy(definition2, value, context) {
     case LinkControlType:
       return copyLinkData(value, context);
     case ShapeControlType:
-      return copyShapeData(definition2, value, context);
+      return copyShapeData(definition, value, context);
     case ListControlType:
-      return copyListData(definition2, value, context);
+      return copyListData(definition, value, context);
     case StyleControlType:
       return copyStyleData(value, context);
     case SlotControlType:
@@ -1645,17 +1893,62 @@ function copy(definition2, value, context) {
       return value;
   }
 }
-function merge(definition2, a, b = a, context) {
-  switch (definition2.type) {
+function merge(definition, a, b = a, context) {
+  switch (definition.type) {
     case SlotControlType:
       return mergeSlotData(a, b, context);
     default:
       return b;
   }
 }
-const SelectControlType = "makeswift::controls::select";
-function Select(config) {
-  return { type: SelectControlType, config };
+const isServer = typeof window === "undefined";
+const useInsertionEffectSpecifier = "useInsertionEffect";
+const useInsertionEffect = (_a = React__namespace[useInsertionEffectSpecifier]) != null ? _a : React__namespace.useLayoutEffect;
+function useStyle(style) {
+  const serialized = serialize.serializeStyles([style], css.cache.registered);
+  utils.registerStyles(css.cache, serialized, false);
+  useInsertionEffect(() => {
+    utils.insertStyles(css.cache, serialized, false);
+  });
+  if (isServer)
+    utils.insertStyles(css.cache, serialized, false);
+  return `${css.cache.key}-${serialized.name}`;
+}
+const StyleV2ControlType = "makeswift::controls::style-v2";
+const unstable_useStyleV2ClassName = useStyle;
+function unstable_StyleV2(config) {
+  return { type: StyleV2ControlType, config };
+}
+const StyleV2ControlMessageType = {
+  CHANGE_BOX_MODEL: "makeswift::controls::style::message::change-box-model",
+  STYLE_V2_CONTROL_CHILD_CONTROL_MESSAGE: "makeswift::controls::style-v2::message::child-control-message"
+};
+class StyleV2Control extends PropController {
+  constructor(send, descriptor) {
+    super(send);
+    __publicField(this, "control");
+    this.control = createPropController(descriptor.config.type, (message) => {
+      console.log("message you are supposed to be sending in styleV2 control", { message });
+      this.send({
+        type: StyleV2ControlMessageType.STYLE_V2_CONTROL_CHILD_CONTROL_MESSAGE,
+        payload: { message }
+      });
+    });
+  }
+  changeBoxModel(boxModel) {
+    this.send({ type: StyleV2ControlMessageType.CHANGE_BOX_MODEL, payload: { boxModel } });
+  }
+  recv(message) {
+    switch (message.type) {
+      case StyleV2ControlMessageType.STYLE_V2_CONTROL_CHILD_CONTROL_MESSAGE: {
+        const control = this.control;
+        if (control == null)
+          return;
+        const recv = control.recv;
+        recv(message.payload.message);
+      }
+    }
+  }
 }
 const ObjectType = {
   Value: "value",
@@ -1694,698 +1987,22 @@ const InlineType = {
   Code: "code",
   SuperScript: "superscript",
   SubScript: "subscript",
-  Link: "link"
-};
-const BlockTextAlignment = {
-  Left: "left",
-  Center: "center",
-  Right: "right",
-  Justify: "justify"
-};
-const ElementUtils = {
-  isRootBlock(node) {
-    return slate.Element.isElement(node) && (slate.Element.isElementType(node, BlockType.Paragraph) || slate.Element.isElementType(node, BlockType.Heading1) || slate.Element.isElementType(node, BlockType.Heading2) || slate.Element.isElementType(node, BlockType.Heading3) || slate.Element.isElementType(node, BlockType.Heading3) || slate.Element.isElementType(node, BlockType.Heading4) || slate.Element.isElementType(node, BlockType.Heading5) || slate.Element.isElementType(node, BlockType.Heading6) || slate.Element.isElementType(node, BlockType.BlockQuote) || slate.Element.isElementType(node, BlockType.UnorderedList) || slate.Element.isElementType(node, BlockType.OrderedList) || slate.Element.isElementType(node, BlockType.Text) || slate.Element.isElementType(node, BlockType.Default));
-  },
-  isBlock(node) {
-    return slate.Element.isElement(node) && (this.isRootBlock(node) || slate.Element.isElementType(node, BlockType.ListItem) || slate.Element.isElementType(node, BlockType.ListItemChild));
-  },
-  isInline(node) {
-    return slate.Element.isElementType(node, InlineType.Code) || slate.Element.isElementType(node, InlineType.Link) || slate.Element.isElementType(node, InlineType.SubScript) || slate.Element.isElementType(node, InlineType.SuperScript);
-  },
-  isConvertibleToListTextNode(node) {
-    return !this.isList(node) && !this.isListItem(node) && !this.isListItemChild(node);
-  },
-  isList(node) {
-    return slate.Element.isElementType(node, BlockType.OrderedList) || slate.Element.isElementType(node, BlockType.UnorderedList);
-  },
-  isListItem(node) {
-    return slate.Element.isElementType(node, BlockType.ListItem);
-  },
-  isListItemChild(node) {
-    return slate.Element.isElementType(node, BlockType.ListItemChild);
-  },
-  createText() {
-    return { text: "" };
-  },
-  createParagraph() {
-    return {
-      children: [this.createText()],
-      type: BlockType.Paragraph
-    };
-  },
-  createList(type = BlockType.UnorderedList) {
-    return { children: [this.createText()], type };
-  },
-  createListItem() {
-    return {
-      children: [this.createListItemChild()],
-      type: BlockType.ListItem
-    };
-  },
-  createListItemChild() {
-    return {
-      children: [this.createText()],
-      type: BlockType.ListItemChild
-    };
-  }
-};
-function unhangRange(editor, range) {
-  let [start, end] = slate.Range.edges(range);
-  if (start.offset !== 0 || end.offset !== 0 || slate.Range.isCollapsed(range)) {
-    return range;
-  }
-  const endBlock = slate.Editor.above(editor, {
-    at: end,
-    match: (n) => slate.Element.isElement(n) && slate.Editor.isBlock(editor, n)
-  });
-  const blockPath = endBlock ? endBlock[1] : [];
-  const first = slate.Editor.start(editor, start);
-  const before = { anchor: first, focus: end };
-  let skip = true;
-  for (const [node, path] of slate.Editor.nodes(editor, {
-    at: before,
-    match: slate.Text.isText,
-    reverse: true
-  })) {
-    if (skip) {
-      skip = false;
-      continue;
-    }
-    if (node.text !== "" || slate.Path.isBefore(path, blockPath)) {
-      end = { path, offset: node.text.length };
-      break;
-    }
-  }
-  return { anchor: start, focus: end };
-}
-function getSelection(editor) {
-  if (editor.selection)
-    return unhangRange(editor, editor.selection);
-  return {
-    anchor: slate.Editor.start(editor, []),
-    focus: slate.Editor.end(editor, [])
-  };
-}
-function getBlocksInSelection(editor) {
-  return Array.from(slate.Editor.nodes(editor, {
-    at: getSelection(editor),
-    match: (node) => ElementUtils.isRootBlock(node)
-  })).filter((entry) => ElementUtils.isRootBlock(entry[0]));
-}
-function getActiveBlockType(editor) {
-  var _a;
-  const rootBlocks = getBlocksInSelection(editor).map(([node]) => node.type);
-  return rootBlocks.reduce((a, b) => a === b ? b : null, (_a = rootBlocks.at(0)) != null ? _a : null);
-}
-function setBlockKeyForDevice(editor, breakpoints, deviceId, key, value, options) {
-  var _a, _b;
-  const at = (_a = options == null ? void 0 : options.at) != null ? _a : editor.selection;
-  if (!at)
-    return;
-  const rootElements = getBlocksInSelection(editor);
-  for (const [node, path] of rootElements) {
-    if (ElementUtils.isBlock(node)) {
-      const deviceValues = (_b = node[key]) != null ? _b : [];
-      const currentDeviceValue = state_breakpoints.findBreakpointOverride(breakpoints, deviceValues, deviceId, (v) => v);
-      const nextDeviceValue = __spreadProps(__spreadValues({}, currentDeviceValue), {
-        deviceId,
-        value
-      });
-      slate.Transforms.setNodes(editor, {
-        [key]: [...deviceValues.filter((v) => v.deviceId !== deviceId), nextDeviceValue]
-      }, { at: path });
-    }
-  }
-}
-function clearBlockKeyForDevice(editor, deviceId, key) {
-  var _a;
-  const rootElements = getBlocksInSelection(editor);
-  for (const [node, path] of rootElements) {
-    if (ElementUtils.isBlock(node)) {
-      const deviceOverrides = (_a = node[key]) != null ? _a : [];
-      slate.Transforms.setNodes(editor, {
-        [key]: deviceOverrides.filter((v) => v.deviceId !== deviceId)
-      }, { at: path });
-    }
-  }
-}
-function wrapInline(editor, inline) {
-  slate.Transforms.wrapNodes(editor, inline, {
-    at: getSelection(editor),
-    split: true
-  });
-}
-function unwrapInline(editor, type) {
-  slate.Transforms.unwrapNodes(editor, {
-    match: (node) => ElementUtils.isInline(node) && node.type === type,
-    at: getSelection(editor)
-  });
-}
-const EditorUtils = {
-  getFirstAncestorList(editor, path) {
-    try {
-      const parentList = slate.Editor.above(editor, {
-        at: path,
-        match: (node) => ElementUtils.isList(node)
-      });
-      return parentList != null ? parentList : null;
-    } catch (e) {
-      return null;
-    }
-  },
-  getFirstAncestorListItem(editor, path) {
-    try {
-      const parentListItem = slate.Editor.above(editor, {
-        at: path,
-        match: (node) => ElementUtils.isListItem(node)
-      });
-      return parentListItem != null ? parentListItem : null;
-    } catch (e) {
-      return null;
-    }
-  }
-};
-const LIST_ITEM_CHILD_POSITION = 0;
-const LIST_ITEM_LIST_POSITION = 1;
-function filterForSubtreeRoots(entries) {
-  return entries.filter(([, nodePath]) => !slate.Path.ancestors(nodePath).some((ancestor) => {
-    return entries.some(([, path]) => slate.Path.equals(path, ancestor));
-  }));
-}
-function unwrapPath(editor, listItemPath) {
-  const parentList = EditorUtils.getFirstAncestorList(editor, listItemPath);
-  const listItemContainingParentList = EditorUtils.getFirstAncestorListItem(editor, listItemPath);
-  if (!parentList || listItemContainingParentList)
-    return;
-  slate.Editor.withoutNormalizing(editor, () => {
-    const listItemTextPath = [...listItemPath, LIST_ITEM_CHILD_POSITION];
-    const listItemNestedListPath = [...listItemPath, LIST_ITEM_LIST_POSITION];
-    if (slate.Node.has(editor, listItemNestedListPath)) {
-      slate.Transforms.setNodes(editor, { type: parentList[0].type }, { at: listItemNestedListPath });
-      slate.Transforms.liftNodes(editor, { at: listItemNestedListPath });
-      slate.Transforms.liftNodes(editor, { at: slate.Path.next(listItemPath) });
-    }
-    if (slate.Node.has(editor, listItemTextPath)) {
-      slate.Transforms.setNodes(editor, { type: BlockType.Paragraph }, {
-        at: listItemTextPath
-      });
-      slate.Transforms.liftNodes(editor, { at: listItemTextPath });
-      slate.Transforms.liftNodes(editor, { at: listItemPath });
-    }
-  });
-}
-function unwrapList(editor, options) {
-  var _a;
-  const at = (_a = options == null ? void 0 : options.at) != null ? _a : editor.selection;
-  if (!at)
-    return;
-  const listItems = Array.from(slate.Editor.nodes(editor, {
-    at,
-    match: (node) => {
-      return slate.Element.isElement(node) && ElementUtils.isListItem(node);
-    }
-  }));
-  const subRoots = filterForSubtreeRoots(listItems);
-  const refs = subRoots.map(([_, path]) => slate.Editor.pathRef(editor, path));
-  refs.forEach((ref) => {
-    if (ref.current) {
-      unwrapPath(editor, ref.current);
-    }
-    ref.unref();
-  });
-}
-function wrapList(editor, options = { type: BlockType.UnorderedList }) {
-  var _a;
-  const at = (_a = options.at) != null ? _a : editor.selection;
-  if (!at)
-    return;
-  const nonListEntries = Array.from(slate.Editor.nodes(editor, {
-    at,
-    match: (node) => {
-      return slate.Element.isElement(node) && ElementUtils.isConvertibleToListTextNode(node);
-    }
-  }));
-  const refs = nonListEntries.map(([_, path]) => slate.Editor.pathRef(editor, path));
-  refs.forEach((ref) => {
-    const path = ref.current;
-    if (path) {
-      slate.Editor.withoutNormalizing(editor, () => {
-        slate.Transforms.setNodes(editor, { type: BlockType.ListItemChild }, {
-          at: path
-        });
-        slate.Transforms.wrapNodes(editor, ElementUtils.createListItem(), {
-          match: (node) => ElementUtils.isListItemChild(node),
-          at: path
-        });
-        slate.Transforms.wrapNodes(editor, ElementUtils.createList(options.type), {
-          at: path
-        });
-      });
-    }
-    ref.unref();
-  });
-}
-const LocationUtils = {
-  getStartPath(location) {
-    if (slate.Range.isRange(location))
-      return slate.Range.start(location).path;
-    if (slate.Point.isPoint(location))
-      return location.path;
-    return location;
-  }
-};
-function getSelectedListItems(editor) {
-  var _a, _b;
-  if (!editor.selection)
-    return [];
-  const start = LocationUtils.getStartPath(editor.selection);
-  const listItems = slate.Editor.nodes(editor, {
-    at: editor.selection,
-    match: (node) => ElementUtils.isListItem(node)
-  });
-  const firstAncestorPath = (_b = (_a = EditorUtils.getFirstAncestorListItem(editor, start)) == null ? void 0 : _a[1]) != null ? _b : [];
-  return Array.from(listItems).filter((node) => slate.Path.isDescendant(start, node[1]) ? slate.Path.equals(node[1], firstAncestorPath) : !slate.Path.isAfter(start, node[1]));
-}
-function indentPath(editor, path) {
-  const parent = slate.Node.parent(editor, path);
-  if (!path || !slate.Path.hasPrevious(path) || !ElementUtils.isList(parent))
-    return;
-  const previosPath = slate.Path.previous(path);
-  const previousChildListPath = [...previosPath, LIST_ITEM_LIST_POSITION];
-  const previousHasChildList = slate.Node.has(editor, previousChildListPath);
-  slate.Editor.withoutNormalizing(editor, () => {
-    if (!previousHasChildList) {
-      slate.Transforms.insertNodes(editor, ElementUtils.createList(parent.type), {
-        at: previousChildListPath
-      });
-    }
-    const previousChildList = slate.Node.get(editor, previousChildListPath);
-    if (ElementUtils.isList(previousChildList)) {
-      const index = previousHasChildList ? previousChildList.children.length : 0;
-      slate.Transforms.moveNodes(editor, {
-        at: path,
-        to: [...previousChildListPath, index]
-      });
-    }
-  });
-}
-function indent(editor) {
-  if (!editor.selection)
-    return;
-  const listItems = getSelectedListItems(editor);
-  const subRoots = filterForSubtreeRoots(listItems);
-  const refs = subRoots.map(([_, path]) => slate.Editor.pathRef(editor, path));
-  refs.forEach((ref) => {
-    if (ref.current) {
-      indentPath(editor, ref.current);
-    }
-    ref.unref();
-  });
-}
-function dedentPath(editor, listItemPath) {
-  const parentList = EditorUtils.getFirstAncestorList(editor, listItemPath);
-  const listItemContainingParentList = EditorUtils.getFirstAncestorListItem(editor, listItemPath);
-  if (!parentList || !listItemContainingParentList)
-    return;
-  const [parentListNode, parentListPath] = parentList;
-  const [_, listItemContainingParentListPath] = listItemContainingParentList;
-  const listItemPosition = listItemPath[listItemPath.length - 1];
-  const previousSiblings = parentListNode.children.slice(0, listItemPosition);
-  const nextSiblings = parentListNode.children.slice(listItemPosition + 1);
-  slate.Editor.withoutNormalizing(editor, () => {
-    nextSiblings.forEach(() => {
-      const nextSiblingPath = [...parentListPath, listItemPosition + 1];
-      indentPath(editor, nextSiblingPath);
-    });
-    slate.Transforms.moveNodes(editor, {
-      at: listItemPath,
-      to: slate.Path.next(listItemContainingParentListPath)
-    });
-    if (previousSiblings.length === 0) {
-      slate.Transforms.removeNodes(editor, { at: parentListPath });
-    }
-  });
-}
-function dedent(editor) {
-  if (!editor.selection)
-    return;
-  const listItems = getSelectedListItems(editor);
-  const subRoots = filterForSubtreeRoots(listItems);
-  const refs = subRoots.map(([_, path]) => slate.Editor.pathRef(editor, path));
-  refs.forEach((ref) => {
-    if (ref.current) {
-      dedentPath(editor, ref.current);
-    }
-    ref.unref();
-  });
-}
-function toggleList(editor, options = { type: BlockType.UnorderedList }) {
-  var _a;
-  const at = (_a = options.at) != null ? _a : editor.selection;
-  if (at == null)
-    return;
-  const start = LocationUtils.getStartPath(at);
-  const ancestorPath = slate.Path.ancestors(start).at(1);
-  if (!ancestorPath || !slate.Node.has(editor, ancestorPath))
-    return;
-  const ancestor = slate.Node.get(editor, ancestorPath);
-  if (!ElementUtils.isList(ancestor)) {
-    return wrapList(editor, { type: options.type, at });
-  }
-  if (ancestor.type === options.type) {
-    unwrapList(editor, { at });
-  } else {
-    slate.Transforms.setNodes(editor, { type: options.type }, { at: ancestorPath });
-  }
-}
-const BlockActions = {
-  setBlockKeyForDevice,
-  clearBlockKeyForDevice,
-  wrapInline,
-  unwrapInline
-};
-const ListActions = {
-  unwrapList,
-  wrapList,
-  indent,
-  dedent,
-  toggleList
-};
-function onKeyDown(e, editor) {
-  if (!editor.selection || Array.from(slate.Editor.nodes(editor, { match: (node) => ElementUtils.isListItem(node) })).length === 0)
-    return;
-  if (isHotkey__default["default"]("shift+tab", e)) {
-    e.preventDefault();
-    ListActions.dedent(editor);
-  }
-  if (isHotkey__default["default"]("tab", e)) {
-    e.preventDefault();
-    ListActions.indent(editor);
-  }
-  if (isHotkey__default["default"]("backspace", e)) {
-    if (!editor.selection)
-      return;
-    if (slate.Range.isExpanded(editor.selection))
-      return;
-    const listItem = EditorUtils.getFirstAncestorListItem(editor, editor.selection.anchor.path);
-    if (editor.selection.anchor.offset === 0 && listItem) {
-      e.preventDefault();
-      const parentListItem = EditorUtils.getFirstAncestorListItem(editor, listItem[1]);
-      const list = EditorUtils.getFirstAncestorList(editor, listItem[1]);
-      if (parentListItem) {
-        ListActions.dedent(editor);
-      } else if (list) {
-        ListActions.unwrapList(editor);
-      }
-      return;
-    }
-  }
-  if (isHotkey__default["default"]("enter", e)) {
-    e.preventDefault();
-    if (!editor.selection)
-      return;
-    if (slate.Range.isExpanded(editor.selection)) {
-      slate.Transforms.delete(editor);
-      return;
-    }
-    const listItem = EditorUtils.getFirstAncestorListItem(editor, editor.selection.anchor.path);
-    if (editor.selection.anchor.offset === 0 && listItem && slate.Editor.string(editor, listItem[1]) === "") {
-      const parentListItem = EditorUtils.getFirstAncestorListItem(editor, listItem[1]);
-      if (parentListItem) {
-        ListActions.dedent(editor);
-      } else {
-        ListActions.unwrapList(editor);
-      }
-      return;
-    }
-    slate.Transforms.splitNodes(editor, {
-      at: editor.selection,
-      always: true,
-      match: (node) => ElementUtils.isListItem(node)
-    });
-  }
-  if (isHotkey__default["default"]("shift+enter", e)) {
-    e.preventDefault();
-    editor.insertText("\n");
-  }
-}
-function withBlock(editor) {
-  const { normalizeNode } = editor;
-  editor.isInline = (entry) => {
-    return ElementUtils.isInline(entry);
-  };
-  editor.normalizeNode = (entry) => {
-    var _a;
-    const [normalizationNode, normalizationPath] = entry;
-    if (ElementUtils.isBlock(normalizationNode) && ((_a = normalizationNode == null ? void 0 : normalizationNode.textAlign) == null ? void 0 : _a.length) == 0) {
-      slate.Transforms.unsetNodes(editor, "textAlign", { at: normalizationPath });
-      return;
-    }
-    if (ElementUtils.isListItem(normalizationNode)) {
-      const pathToListItemText = [...normalizationPath, LIST_ITEM_CHILD_POSITION];
-      if (slate.Node.has(editor, pathToListItemText)) {
-        const nodeInListItemTextPosition = slate.Node.get(editor, pathToListItemText);
-        if (ElementUtils.isRootBlock(nodeInListItemTextPosition)) {
-          slate.Transforms.setNodes(editor, { type: BlockType.ListItemChild }, {
-            at: pathToListItemText
-          });
-          return;
-        }
-      } else {
-        slate.Transforms.insertNodes(editor, ElementUtils.createListItem(), {
-          at: pathToListItemText
-        });
-        return;
-      }
-    }
-    if (!slate.Text.isText(normalizationNode)) {
-      const mergeableChildren = Array.from(slate.Node.children(editor, normalizationPath)).map((child, index, children) => {
-        const potentialNodeToBeMerged = children.at(index + 1);
-        if (!potentialNodeToBeMerged || !ElementUtils.isList(potentialNodeToBeMerged[0]) || !ElementUtils.isList(child[0]) || potentialNodeToBeMerged[0].type !== child[0].type) {
-          return null;
-        }
-        return [
-          slate.Editor.pathRef(editor, child[1]),
-          slate.Editor.pathRef(editor, potentialNodeToBeMerged[1])
-        ];
-      }).filter((mergeableNodes) => Boolean(mergeableNodes));
-      if (mergeableChildren.length !== 0) {
-        mergeableChildren.reverse().forEach(([nodePathRef, nodeToBeMergedPathRef]) => {
-          const nodePath = nodePathRef.current;
-          const nodeToBeMergedPath = nodeToBeMergedPathRef.current;
-          if (nodePath == null || nodeToBeMergedPath == null)
-            return;
-          const nodeChildren = Array.from(slate.Node.children(editor, nodePath));
-          const childrenToBeMerged = Array.from(slate.Node.children(editor, nodeToBeMergedPath));
-          slate.Editor.withoutNormalizing(editor, () => {
-            childrenToBeMerged.reverse().forEach(([_, childPath]) => {
-              slate.Transforms.moveNodes(editor, {
-                at: childPath,
-                to: [...nodePath, nodeChildren.length]
-              });
-            });
-            slate.Transforms.removeNodes(editor, { at: nodeToBeMergedPath });
-          });
-          nodePathRef.unref();
-          nodeToBeMergedPathRef.unref();
-        });
-        return;
-      }
-    }
-    normalizeNode(entry);
-  };
-  return editor;
-}
-const definition = Select({
-  label: "Block",
-  labelOrientation: "horizontal",
-  options: [
-    {
-      value: BlockType.Paragraph,
-      label: "Paragraph"
-    },
-    {
-      value: BlockType.Heading1,
-      label: "Heading 1"
-    },
-    {
-      value: BlockType.Heading2,
-      label: "Heading 2"
-    },
-    {
-      value: BlockType.Heading3,
-      label: "Heading 3"
-    },
-    {
-      value: BlockType.Heading4,
-      label: "Heading 4"
-    },
-    {
-      value: BlockType.Heading5,
-      label: "Heading 5"
-    },
-    {
-      value: BlockType.Heading6,
-      label: "Heading 6"
-    },
-    {
-      value: BlockType.UnorderedList,
-      label: "Bulleted list"
-    },
-    {
-      value: BlockType.OrderedList,
-      label: "Numbered list"
-    },
-    {
-      value: BlockType.BlockQuote,
-      label: "Quote"
-    }
-  ],
-  defaultValue: BlockType.Paragraph
-});
-function BlockPlugin() {
-  return createRichTextV2Plugin({
-    withPlugin: withBlock,
-    onKeyDown,
-    control: {
-      definition,
-      onChange: (editor, value) => {
-        const activeBlockType = getActiveBlockType(editor);
-        if (value === BlockType.UnorderedList || value === BlockType.OrderedList) {
-          ListActions.toggleList(editor, {
-            type: value,
-            at: getSelection(editor)
-          });
-        } else if (activeBlockType === value) {
-          slate.Transforms.setNodes(editor, {
-            type: BlockType.Default
-          }, { at: getSelection(editor) });
-        } else {
-          ListActions.unwrapList(editor, {
-            at: getSelection(editor)
-          });
-          slate.Transforms.setNodes(editor, {
-            type: value != null ? value : BlockType.Default
-          }, { at: getSelection(editor) });
-        }
-      },
-      getValue: (editor) => {
-        const activeBlock = getActiveBlockType(editor);
-        if (activeBlock === RootBlockType.Text || activeBlock === RootBlockType.Default)
-          return void 0;
-        return activeBlock;
-      }
-    }
-  });
-}
-const RichTextV2ControlType = "makeswift::controls::rich-text-v2";
-const RichTextV2Mode = {
-  Inline: "makeswift::controls::rich-text-v2::mode::inline",
-  Block: "makeswift::controls::rich-text-v2::mode::block"
-};
-function createRichTextV2Plugin({
-  control,
-  withPlugin,
-  onKeyDown: onKeyDown2
-}) {
-  return { control, withPlugin, onKeyDown: onKeyDown2 };
-}
-function unstable_RichTextV2(config = {}) {
-  return { type: RichTextV2ControlType, config };
-}
-const RichTextV2ControlMessageType = {
-  RESET_VALUE: "RESET_VALUE",
-  FOCUS: "FOCUS",
-  RUN_PLUGIN_CONTROL_ACTION: "RUN_PLUGIN_CONTROL_ACTION",
-  SET_DEFAULT_VALUE: "SET_DEFAULT_VALUE",
-  SET_PLUGIN_CONTROL_VALUE: "SET_PLUGIN_CONTROL_VALUE",
-  ON_CHANGE: "ON_CHANGE",
-  SELECT: "SELECT",
-  SWITCH_TO_BUILD_MODE: "SWITCH_TO_BUILD_MODE",
-  CHANGE_BOX_MODEL: "CHANGE_BOX_MODEL"
-};
-class RichTextV2Control extends PropController {
-  constructor(send, descriptor) {
-    super(send);
-    __publicField(this, "editor", null);
-    __publicField(this, "defaultValue", null);
-    __publicField(this, "descriptor");
-    __publicField(this, "recv", (message) => {
-      var _a, _b, _c;
-      if (!this.editor)
-        return;
-      switch (message.type) {
-        case RichTextV2ControlMessageType.FOCUS: {
-          this.editor.focusAndSelectAll();
-          break;
-        }
-        case RichTextV2ControlMessageType.RESET_VALUE: {
-          if (this.defaultValue) {
-            this.editor.selection = null;
-            this.editor.children = this.defaultValue;
-            this.editor.onChange();
-          }
-          break;
-        }
-        case RichTextV2ControlMessageType.RUN_PLUGIN_CONTROL_ACTION: {
-          (_c = (_b = (_a = this.descriptor.config.plugins) == null ? void 0 : _a.at(message.pluginIndex)) == null ? void 0 : _b.control) == null ? void 0 : _c.onChange(this.editor, message.value);
-          break;
-        }
-      }
-    });
-    this.descriptor = descriptor;
-    this.send = send;
-  }
-  setEditor(editor) {
-    var _a, _b, _c;
-    this.editor = editor;
-    this.send({
-      type: RichTextV2ControlMessageType.SET_PLUGIN_CONTROL_VALUE,
-      value: (_c = (_b = (_a = this.descriptor.config) == null ? void 0 : _a.plugins) == null ? void 0 : _b.map((plugin) => {
-        var _a2;
-        return (_a2 = plugin == null ? void 0 : plugin.control) == null ? void 0 : _a2.getValue(editor);
-      })) != null ? _c : []
-    });
-  }
-  setDefaultValue(defaultValue) {
-    this.defaultValue = defaultValue;
-    this.send({ type: RichTextV2ControlMessageType.SET_DEFAULT_VALUE, value: defaultValue });
-  }
-  select() {
-    this.send({ type: RichTextV2ControlMessageType.SELECT });
-  }
-  switchToBuildMode() {
-    this.send({ type: RichTextV2ControlMessageType.SWITCH_TO_BUILD_MODE });
-  }
-  onChange(value) {
-    var _a, _b, _c;
-    const editor = this.editor;
-    if (editor == null)
-      return;
-    this.send({
-      type: RichTextV2ControlMessageType.ON_CHANGE,
-      value
-    });
-    this.send({
-      type: RichTextV2ControlMessageType.SET_PLUGIN_CONTROL_VALUE,
-      value: (_c = (_b = (_a = this.descriptor.config) == null ? void 0 : _a.plugins) == null ? void 0 : _b.map((plugin) => {
-        var _a2;
-        return (_a2 = plugin == null ? void 0 : plugin.control) == null ? void 0 : _a2.getValue(editor);
-      })) != null ? _c : []
-    });
-  }
-  changeBoxModel(boxModel) {
-    this.send({ type: RichTextV2ControlMessageType.CHANGE_BOX_MODEL, payload: { boxModel } });
-  }
-}
+  Link: "link"
+};
+const BlockTextAlignment = {
+  Left: "left",
+  Center: "center",
+  Right: "right",
+  Justify: "justify"
+};
 function isText(node) {
   if (typeof node === "object" && "text" in node)
     return true;
   return false;
 }
 function toTextDAO(node) {
-  var _a, _b, _c, _d;
-  const typographyMark = (_a = node.marks) == null ? void 0 : _a.find((mark) => mark.type === "typography");
+  var _a2, _b, _c, _d;
+  const typographyMark = (_a2 = node.marks) == null ? void 0 : _a2.find((mark) => mark.type === "typography");
   return [
     {
       text: (_b = node.text) != null ? _b : "",
@@ -2394,12 +2011,12 @@ function toTextDAO(node) {
   ];
 }
 function toInlineDAO(node) {
-  var _a, _b, _c, _d;
+  var _a2, _b, _c, _d;
   switch (node.type) {
     case InlineType.Link:
       return [
         {
-          children: (_b = (_a = node.nodes) == null ? void 0 : _a.flatMap(toInlineOrTextDAO)) != null ? _b : [],
+          children: (_b = (_a2 = node.nodes) == null ? void 0 : _a2.flatMap(toInlineOrTextDAO)) != null ? _b : [],
           [node.type]: node.data,
           type: node.type
         }
@@ -2428,7 +2045,7 @@ function toInlineOrTextDAO(node) {
   }
 }
 function toNodeDAO(node) {
-  var _a, _b;
+  var _a2, _b;
   switch (node.object) {
     case ObjectType.Inline:
     case ObjectType.Text:
@@ -2438,7 +2055,7 @@ function toNodeDAO(node) {
         {
           type: node.type,
           textAlign: (node == null ? void 0 : node.data) && "textAlign" in node.data ? node == null ? void 0 : node.data.textAlign : void 0,
-          children: (_b = (_a = node.nodes) == null ? void 0 : _a.flatMap(toNodeDAO)) != null ? _b : []
+          children: (_b = (_a2 = node.nodes) == null ? void 0 : _a2.flatMap(toNodeDAO)) != null ? _b : []
         }
       ];
     default:
@@ -2446,8 +2063,8 @@ function toNodeDAO(node) {
   }
 }
 function richTextDTOtoSelection(data) {
-  var _a, _b, _c, _d;
-  if (((_b = (_a = data.selection) == null ? void 0 : _a.anchor) == null ? void 0 : _b.offset) != null && data.selection.anchor.path != null && ((_d = (_c = data.selection) == null ? void 0 : _c.focus) == null ? void 0 : _d.offset) != null && data.selection.focus.path != null)
+  var _a2, _b, _c, _d;
+  if (((_b = (_a2 = data.selection) == null ? void 0 : _a2.anchor) == null ? void 0 : _b.offset) != null && data.selection.anchor.path != null && ((_d = (_c = data.selection) == null ? void 0 : _c.focus) == null ? void 0 : _d.offset) != null && data.selection.focus.path != null)
     return {
       anchor: {
         offset: data.selection.anchor.offset,
@@ -2461,8 +2078,8 @@ function richTextDTOtoSelection(data) {
   return null;
 }
 function richTextDTOtoDAO(data) {
-  var _a, _b, _c;
-  return (_c = (_b = (_a = data.document) == null ? void 0 : _a.nodes) == null ? void 0 : _b.flatMap(toNodeDAO)) != null ? _c : [];
+  var _a2, _b, _c;
+  return (_c = (_b = (_a2 = data.document) == null ? void 0 : _a2.nodes) == null ? void 0 : _b.flatMap(toNodeDAO)) != null ? _c : [];
 }
 function toInlineOrTextDTO(node) {
   if (isText(node)) {
@@ -2506,7 +2123,7 @@ function toInlineOrTextDTO(node) {
   }
 }
 function toNodeDTO(node) {
-  var _a, _b;
+  var _a2, _b;
   if (isText(node))
     return toInlineOrTextDTO(node);
   switch (node.type) {
@@ -2531,7 +2148,7 @@ function toNodeDTO(node) {
             textAlign: node.textAlign
           } : {},
           object: "block",
-          nodes: (_b = (_a = node.children) == null ? void 0 : _a.flatMap(toNodeDTO)) != null ? _b : []
+          nodes: (_b = (_a2 = node.children) == null ? void 0 : _a2.flatMap(toNodeDTO)) != null ? _b : []
         }
       ];
     default:
@@ -2539,330 +2156,209 @@ function toNodeDTO(node) {
   }
 }
 function toSelectionDTO(selection) {
-  if (selection == null)
-    return void 0;
-  return {
-    isFocused: false,
-    marks: void 0,
-    object: "selection",
-    anchor: {
-      offset: selection.anchor.offset,
-      path: selection.anchor.path,
-      object: "point"
-    },
-    focus: {
-      offset: selection.focus.offset,
-      path: selection.focus.path,
-      object: "point"
-    }
-  };
-}
-function richTextDAOToDTO(children, selection) {
-  return {
-    document: {
-      data: void 0,
-      nodes: children.flatMap(toNodeDTO),
-      object: "document"
-    },
-    object: "value",
-    selection: toSelectionDTO(selection),
-    annotations: void 0,
-    data: void 0
-  };
-}
-const RichTextControlType = "makeswift::controls::rich-text";
-function RichText$1() {
-  return { type: RichTextControlType };
-}
-const RichTextControlMessageType = {
-  CHANGE_BUILDER_EDIT_MODE: "CHANGE_BUILDER_EDIT_MODE",
-  INITIALIZE_EDITOR: "INITIALIZE_EDITOR",
-  CHANGE_EDITOR_VALUE: "CHANGE_EDITOR_VALUE",
-  FOCUS: "FOCUS",
-  BLUR: "BLUR",
-  UNDO: "UNDO",
-  REDO: "REDO",
-  CHANGE_BOX_MODEL: "CHANGE_BOX_MODEL"
-};
-class RichTextControl extends PropController {
-  constructor() {
-    super(...arguments);
-    __publicField(this, "editor", null);
-    __publicField(this, "recv", (message) => {
-      if (!this.editor)
-        return;
-      switch (message.type) {
-        case RichTextControlMessageType.CHANGE_BUILDER_EDIT_MODE: {
-          switch (message.editMode) {
-            case BuilderEditMode.BUILD:
-            case BuilderEditMode.INTERACT:
-              this.editor.deselectAndBlur();
-          }
-          break;
-        }
-        case RichTextControlMessageType.FOCUS: {
-          this.editor.focusAndSelectAll();
-          break;
-        }
-      }
-    });
-  }
-  setSlateEditor(editor) {
-    this.editor = editor;
-    this.send({
-      type: RichTextControlMessageType.INITIALIZE_EDITOR,
-      value: richTextDAOToDTO(editor.children, editor.selection)
-    });
-    const _onChange = editor.onChange;
-    this.editor.onChange = (options) => {
-      _onChange(options);
-      if ((options == null ? void 0 : options.operation) != null) {
-        this.send({
-          type: RichTextControlMessageType.CHANGE_EDITOR_VALUE,
-          value: richTextDAOToDTO(editor.children, editor.selection)
-        });
-      }
-    };
-  }
-  focus() {
-    this.send({ type: RichTextControlMessageType.FOCUS });
-  }
-  blur() {
-    this.send({ type: RichTextControlMessageType.BLUR });
-  }
-  undo() {
-    this.send({ type: RichTextControlMessageType.UNDO });
-  }
-  redo() {
-    this.send({ type: RichTextControlMessageType.REDO });
-  }
-  changeBoxModel(boxModel) {
-    this.send({ type: RichTextControlMessageType.CHANGE_BOX_MODEL, payload: { boxModel } });
-  }
-}
-const Types = {
-  Backgrounds: "Backgrounds",
-  Border: "Border",
-  BorderRadius: "BorderRadius",
-  Checkbox: "Checkbox",
-  Date: "Date",
-  ElementID: "ElementID",
-  Font: "Font",
-  GapX: "GapX",
-  GapY: "GapY",
-  Grid: "Grid",
-  Image: "Image",
-  Images: "Images",
-  Link: "Link",
-  List: "List",
-  Margin: "Margin",
-  NavigationLinks: "NavigationLinks",
-  Number: "Number",
-  Padding: "Padding",
-  ResponsiveColor: "ResponsiveColor",
-  ResponsiveIconRadioGroup: "ResponsiveIconRadioGroup",
-  ResponsiveLength: "ResponsiveLength",
-  ResponsiveNumber: "ResponsiveNumber",
-  ResponsiveOpacity: "ResponsiveOpacity",
-  ResponsiveSelect: "ResponsiveSelect",
-  RichText: "RichText",
-  Shadows: "Shadows",
-  Shape: "Shape",
-  SocialLinks: "SocialLinks",
-  Table: "Table",
-  TableFormFields: "TableFormFields",
-  Typeahead: "Typeahead",
-  TextArea: "TextArea",
-  TextInput: "TextInput",
-  TextStyle: "TextStyle",
-  Video: "Video",
-  Width: "Width",
-  Style: StyleControlType
-};
-function Backgrounds(options = {}) {
-  return { type: Types.Backgrounds, options };
-}
-const BorderPropControllerFormat = {
-  ClassName: "makeswift::prop-controllers::border::format::class-name",
-  ResponsiveValue: "makeswift::prop-controllers:border::format::responsive-value"
-};
-function Border(options = {}) {
-  return { type: Types.Border, options };
-}
-Border.Format = BorderPropControllerFormat;
-const BorderRadiusPropControllerFormat = {
-  ClassName: "makeswift::prop-controllers::border-radius::format::class-name",
-  ResponsiveValue: "makeswift::prop-controllers::border-radius::format::responsive-value"
-};
-function BorderRadius(options = {}) {
-  return { type: Types.BorderRadius, options };
-}
-BorderRadius.Format = BorderRadiusPropControllerFormat;
-function Checkbox(options) {
-  return { type: Types.Checkbox, options };
-}
-function Date(options = {}) {
-  return { type: Types.Date, options };
-}
-function ElementID(options = {}) {
-  return { type: Types.ElementID, options };
-}
-function Font(options = {}) {
-  return { type: Types.Font, options };
-}
-function GapX(options = {}) {
-  return { type: Types.GapX, options };
-}
-function GapY(options = {}) {
-  return { type: Types.GapY, options };
-}
-function Grid(options = {}) {
-  return { type: Types.Grid, options };
-}
-function Image(options = {}) {
-  return { type: Types.Image, options };
-}
-function Images(options = {}) {
-  return { type: Types.Images, options };
-}
-function Link(options = {}) {
-  return { type: Types.Link, options };
-}
-function List(options) {
-  return { type: Types.List, options };
-}
-const MarginPropControllerFormat = {
-  ClassName: "makeswift::prop-controllers::margin::format::class-name",
-  ResponsiveValue: "makeswift::prop-controllers::margin::format::responsive-value"
-};
-function Margin(options = {}) {
-  return { type: Types.Margin, options };
-}
-Margin.Format = MarginPropControllerFormat;
-function NavigationLinks(options = {}) {
-  return { type: Types.NavigationLinks, options };
-}
-function Number(options = {}) {
-  return { type: Types.Number, options };
-}
-const PaddingPropControllerFormat = {
-  ClassName: "makeswift::prop-controllers::padding::format::class-name",
-  ResponsiveValue: "makeswift::prop-controllers::padding::format::responsive-value"
-};
-function Padding(options = {}) {
-  return { type: Types.Padding, options };
-}
-Padding.Format = PaddingPropControllerFormat;
-function ResponsiveColor(options = {}) {
-  return { type: Types.ResponsiveColor, options };
-}
-function ResponsiveIconRadioGroup(options) {
-  return { type: Types.ResponsiveIconRadioGroup, options };
-}
-function ResponsiveLength(options = {}) {
-  return { type: Types.ResponsiveLength, options };
-}
-function ResponsiveNumber(options = {}) {
-  return { type: Types.ResponsiveNumber, options };
-}
-function ResponsiveOpacity(options = {}) {
-  return { type: Types.ResponsiveOpacity, options };
-}
-function ResponsiveSelect(options) {
-  return { type: Types.ResponsiveSelect, options };
-}
-function RichText(options = {}) {
-  return { type: Types.RichText, options };
-}
-const ShadowsPropControllerFormat = {
-  ClassName: "makeswift::prop-controllers::shadows::format::class-name",
-  ResponsiveValue: "makeswift::prop-controllers::shadows::format::responsive-value"
-};
-function Shadows(options = {}) {
-  return { type: Types.Shadows, options };
-}
-Shadows.Format = ShadowsPropControllerFormat;
-function Shape(options) {
-  return { type: Types.Shape, options };
-}
-function SocialLinks(options = {}) {
-  return { type: Types.SocialLinks, options };
-}
-function Table(options = {}) {
-  return { type: Types.Table, options };
-}
-function TableFormFields(options = {}) {
-  return { type: Types.TableFormFields, options };
+  if (selection == null)
+    return void 0;
+  return {
+    isFocused: false,
+    marks: void 0,
+    object: "selection",
+    anchor: {
+      offset: selection.anchor.offset,
+      path: selection.anchor.path,
+      object: "point"
+    },
+    focus: {
+      offset: selection.focus.offset,
+      path: selection.focus.path,
+      object: "point"
+    }
+  };
 }
-function Typeahead(options) {
-  return { type: Types.Typeahead, options };
+function richTextDAOToDTO(children, selection) {
+  return {
+    document: {
+      data: void 0,
+      nodes: children.flatMap(toNodeDTO),
+      object: "document"
+    },
+    object: "value",
+    selection: toSelectionDTO(selection),
+    annotations: void 0,
+    data: void 0
+  };
 }
-function TextArea(options = {}) {
-  return { type: Types.TextArea, options };
+const RichTextControlType = "makeswift::controls::rich-text";
+function RichText() {
+  return { type: RichTextControlType };
 }
-function TextInput(options = {}) {
-  return { type: Types.TextInput, options };
+const RichTextControlMessageType = {
+  CHANGE_BUILDER_EDIT_MODE: "CHANGE_BUILDER_EDIT_MODE",
+  INITIALIZE_EDITOR: "INITIALIZE_EDITOR",
+  CHANGE_EDITOR_VALUE: "CHANGE_EDITOR_VALUE",
+  FOCUS: "FOCUS",
+  BLUR: "BLUR",
+  UNDO: "UNDO",
+  REDO: "REDO",
+  CHANGE_BOX_MODEL: "CHANGE_BOX_MODEL"
+};
+class RichTextControl extends PropController {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "editor", null);
+    __publicField(this, "recv", (message) => {
+      if (!this.editor)
+        return;
+      switch (message.type) {
+        case RichTextControlMessageType.CHANGE_BUILDER_EDIT_MODE: {
+          switch (message.editMode) {
+            case BuilderEditMode.BUILD:
+            case BuilderEditMode.INTERACT:
+              this.editor.deselectAndBlur();
+          }
+          break;
+        }
+        case RichTextControlMessageType.FOCUS: {
+          this.editor.focusAndSelectAll();
+          break;
+        }
+      }
+    });
+  }
+  setSlateEditor(editor) {
+    this.editor = editor;
+    this.send({
+      type: RichTextControlMessageType.INITIALIZE_EDITOR,
+      value: richTextDAOToDTO(editor.children, editor.selection)
+    });
+    const _onChange = editor.onChange;
+    this.editor.onChange = (options) => {
+      _onChange(options);
+      if ((options == null ? void 0 : options.operation) != null) {
+        this.send({
+          type: RichTextControlMessageType.CHANGE_EDITOR_VALUE,
+          value: richTextDAOToDTO(editor.children, editor.selection)
+        });
+      }
+    };
+  }
+  focus() {
+    this.send({ type: RichTextControlMessageType.FOCUS });
+  }
+  blur() {
+    this.send({ type: RichTextControlMessageType.BLUR });
+  }
+  undo() {
+    this.send({ type: RichTextControlMessageType.UNDO });
+  }
+  redo() {
+    this.send({ type: RichTextControlMessageType.REDO });
+  }
+  changeBoxModel(boxModel) {
+    this.send({ type: RichTextControlMessageType.CHANGE_BOX_MODEL, payload: { boxModel } });
+  }
 }
-function TextStyle(options = {}) {
-  return { type: Types.TextStyle, options };
+const RichTextV2ControlType = "makeswift::controls::rich-text-v2";
+const RichTextV2Mode = {
+  Inline: "makeswift::controls::rich-text-v2::mode::inline",
+  Block: "makeswift::controls::rich-text-v2::mode::block"
+};
+function createRichTextV2Plugin({
+  control,
+  withPlugin,
+  onKeyDown,
+  renderElement,
+  renderLeaf
+}) {
+  return { control, withPlugin, onKeyDown, renderElement, renderLeaf };
 }
-function Video(options = {}) {
-  return { type: Types.Video, options };
+function unstable_RichTextV2(config = {}) {
+  return { type: RichTextV2ControlType, config };
 }
-const WidthPropControllerFormat = {
-  ClassName: "makeswift::prop-controllers::width::format::class-name",
-  ResponsiveValue: "makeswift::prop-controllers::width::format::responsive-value"
+const RichTextV2ControlMessageType = {
+  RESET_VALUE: "RESET_VALUE",
+  FOCUS: "FOCUS",
+  RUN_PLUGIN_CONTROL_ACTION: "RUN_PLUGIN_CONTROL_ACTION",
+  SET_DEFAULT_VALUE: "SET_DEFAULT_VALUE",
+  SET_PLUGIN_CONTROL_VALUE: "SET_PLUGIN_CONTROL_VALUE",
+  ON_CHANGE: "ON_CHANGE",
+  SELECT: "SELECT",
+  SWITCH_TO_BUILD_MODE: "SWITCH_TO_BUILD_MODE",
+  CHANGE_BOX_MODEL: "CHANGE_BOX_MODEL"
 };
-function Width(options = {}) {
-  return { type: Types.Width, options };
+class RichTextV2Control extends PropController {
+  constructor(send, descriptor) {
+    super(send);
+    __publicField(this, "editor", null);
+    __publicField(this, "defaultValue", null);
+    __publicField(this, "descriptor");
+    __publicField(this, "recv", (message) => {
+      var _a2, _b, _c;
+      if (!this.editor)
+        return;
+      switch (message.type) {
+        case RichTextV2ControlMessageType.FOCUS: {
+          this.editor.focusAndSelectAll();
+          break;
+        }
+        case RichTextV2ControlMessageType.RESET_VALUE: {
+          if (this.defaultValue) {
+            this.editor.selection = null;
+            this.editor.children = this.defaultValue;
+            this.editor.onChange();
+          }
+          break;
+        }
+        case RichTextV2ControlMessageType.RUN_PLUGIN_CONTROL_ACTION: {
+          (_c = (_b = (_a2 = this.descriptor.config.plugins) == null ? void 0 : _a2.at(message.pluginIndex)) == null ? void 0 : _b.control) == null ? void 0 : _c.onChange(this.editor, message.value);
+          break;
+        }
+      }
+    });
+    this.descriptor = descriptor;
+    this.send = send;
+  }
+  setEditor(editor) {
+    var _a2, _b, _c;
+    this.editor = editor;
+    this.send({
+      type: RichTextV2ControlMessageType.SET_PLUGIN_CONTROL_VALUE,
+      value: (_c = (_b = (_a2 = this.descriptor.config) == null ? void 0 : _a2.plugins) == null ? void 0 : _b.map((plugin) => {
+        var _a3;
+        return (_a3 = plugin == null ? void 0 : plugin.control) == null ? void 0 : _a3.getValue(editor);
+      })) != null ? _c : []
+    });
+  }
+  setDefaultValue(defaultValue) {
+    this.defaultValue = defaultValue;
+    this.send({ type: RichTextV2ControlMessageType.SET_DEFAULT_VALUE, value: defaultValue });
+  }
+  select() {
+    this.send({ type: RichTextV2ControlMessageType.SELECT });
+  }
+  switchToBuildMode() {
+    this.send({ type: RichTextV2ControlMessageType.SWITCH_TO_BUILD_MODE });
+  }
+  onChange(value) {
+    var _a2, _b, _c;
+    const editor = this.editor;
+    if (editor == null)
+      return;
+    this.send({
+      type: RichTextV2ControlMessageType.ON_CHANGE,
+      value
+    });
+    this.send({
+      type: RichTextV2ControlMessageType.SET_PLUGIN_CONTROL_VALUE,
+      value: (_c = (_b = (_a2 = this.descriptor.config) == null ? void 0 : _a2.plugins) == null ? void 0 : _b.map((plugin) => {
+        var _a3;
+        return (_a3 = plugin == null ? void 0 : plugin.control) == null ? void 0 : _a3.getValue(editor);
+      })) != null ? _c : []
+    });
+  }
+  changeBoxModel(boxModel) {
+    this.send({ type: RichTextV2ControlMessageType.CHANGE_BOX_MODEL, payload: { boxModel } });
+  }
 }
-Width.Format = WidthPropControllerFormat;
-var descriptors = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
-  __proto__: null,
-  Types,
-  Backgrounds,
-  BorderPropControllerFormat,
-  Border,
-  BorderRadiusPropControllerFormat,
-  BorderRadius,
-  Checkbox,
-  Date,
-  ElementID,
-  Font,
-  GapX,
-  GapY,
-  Grid,
-  Image,
-  Images,
-  Link,
-  List,
-  MarginPropControllerFormat,
-  Margin,
-  NavigationLinks,
-  Number,
-  PaddingPropControllerFormat,
-  Padding,
-  ResponsiveColor,
-  ResponsiveIconRadioGroup,
-  ResponsiveLength,
-  ResponsiveNumber,
-  ResponsiveOpacity,
-  ResponsiveSelect,
-  RichText,
-  ShadowsPropControllerFormat,
-  Shadows,
-  Shape,
-  SocialLinks,
-  Table,
-  TableFormFields,
-  Typeahead,
-  TextArea,
-  TextInput,
-  TextStyle,
-  Video,
-  WidthPropControllerFormat,
-  Width
-}, Symbol.toStringTag, { value: "Module" }));
 function isNonNullable(value) {
   return value != null;
 }
@@ -2895,51 +2391,51 @@ function getElementId$1(descriptor, prop) {
   }
 }
 function getBackgroundsSwatchIds(value) {
-  var _a;
-  return (_a = value == null ? void 0 : value.flatMap((override) => override.value).flatMap((backgroundItem) => {
-    var _a2;
+  var _a2;
+  return (_a2 = value == null ? void 0 : value.flatMap((override) => override.value).flatMap((backgroundItem) => {
+    var _a3;
     switch (backgroundItem.type) {
       case "color":
-        return ((_a2 = backgroundItem.payload) == null ? void 0 : _a2.swatchId) == null ? [] : [backgroundItem.payload.swatchId];
+        return ((_a3 = backgroundItem.payload) == null ? void 0 : _a3.swatchId) == null ? [] : [backgroundItem.payload.swatchId];
       case "gradient":
         return backgroundItem.payload.stops.flatMap((stop) => stop.color == null ? [] : stop.color.swatchId);
       default:
         return [];
     }
-  })) != null ? _a : [];
+  })) != null ? _a2 : [];
 }
 function getBorderSwatchIds(value) {
-  var _a;
-  return (_a = value == null ? void 0 : value.flatMap((override) => override.value).flatMap((borderValue) => {
-    var _a2, _b, _c, _d, _e, _f, _g, _h;
+  var _a2;
+  return (_a2 = value == null ? void 0 : value.flatMap((override) => override.value).flatMap((borderValue) => {
+    var _a3, _b, _c, _d, _e, _f, _g, _h;
     return [
-      (_b = (_a2 = borderValue.borderTop) == null ? void 0 : _a2.color) == null ? void 0 : _b.swatchId,
+      (_b = (_a3 = borderValue.borderTop) == null ? void 0 : _a3.color) == null ? void 0 : _b.swatchId,
       (_d = (_c = borderValue.borderRight) == null ? void 0 : _c.color) == null ? void 0 : _d.swatchId,
       (_f = (_e = borderValue.borderBottom) == null ? void 0 : _e.color) == null ? void 0 : _f.swatchId,
       (_h = (_g = borderValue.borderLeft) == null ? void 0 : _g.color) == null ? void 0 : _h.swatchId
     ].filter((swatchId) => swatchId != null);
-  })) != null ? _a : [];
+  })) != null ? _a2 : [];
 }
 function getBoxShadowsSwatchIds(value) {
-  var _a;
-  return (_a = value == null ? void 0 : value.flatMap((override) => override.value).map((item) => {
-    var _a2;
-    return (_a2 = item.payload.color) == null ? void 0 : _a2.swatchId;
-  }).filter((swatchId) => swatchId != null)) != null ? _a : [];
+  var _a2;
+  return (_a2 = value == null ? void 0 : value.flatMap((override) => override.value).map((item) => {
+    var _a3;
+    return (_a3 = item.payload.color) == null ? void 0 : _a3.swatchId;
+  }).filter((swatchId) => swatchId != null)) != null ? _a2 : [];
 }
 function getResponsiveColorSwatchIds(value) {
-  var _a;
-  return (_a = value == null ? void 0 : value.map((override) => override.value).map((color) => color.swatchId)) != null ? _a : [];
+  var _a2;
+  return (_a2 = value == null ? void 0 : value.map((override) => override.value).map((color) => color.swatchId)) != null ? _a2 : [];
 }
 function getTypographyStyleSwatchIds(style) {
-  var _a;
-  return (_a = style == null ? void 0 : style.map((override) => override.value).flatMap((typographyStyle) => {
-    var _a2;
-    return (_a2 = typographyStyle.color) == null ? void 0 : _a2.swatchId;
-  }).filter(isNonNullable)) != null ? _a : [];
+  var _a2;
+  return (_a2 = style == null ? void 0 : style.map((override) => override.value).flatMap((typographyStyle) => {
+    var _a3;
+    return (_a3 = typographyStyle.color) == null ? void 0 : _a3.swatchId;
+  }).filter(isNonNullable)) != null ? _a2 : [];
 }
 function getElementSwatchIds(descriptor, prop) {
-  var _a;
+  var _a2;
   if (prop == null)
     return [];
   switch (descriptor.type) {
@@ -2949,17 +2445,17 @@ function getElementSwatchIds(descriptor, prop) {
       return getBorderSwatchIds(prop);
     case Types.NavigationLinks: {
       const value = prop;
-      return (_a = value == null ? void 0 : value.flatMap((item) => {
-        var _a2, _b, _c, _d;
+      return (_a2 = value == null ? void 0 : value.flatMap((item) => {
+        var _a3, _b, _c, _d;
         switch (item.type) {
           case "button":
           case "dropdown":
             return [
-              ...(_b = (_a2 = item.payload.color) == null ? void 0 : _a2.map((override) => override.value).map((color) => color.swatchId)) != null ? _b : [],
+              ...(_b = (_a3 = item.payload.color) == null ? void 0 : _a3.map((override) => override.value).map((color) => color.swatchId)) != null ? _b : [],
               ...(_d = (_c = item.payload.textColor) == null ? void 0 : _c.map((override) => override.value).map((color) => color.swatchId)) != null ? _d : []
             ];
         }
-      })) != null ? _a : [];
+      })) != null ? _a2 : [];
     }
     case Types.ResponsiveColor:
       return getResponsiveColorSwatchIds(prop);
@@ -2967,20 +2463,20 @@ function getElementSwatchIds(descriptor, prop) {
       return getBoxShadowsSwatchIds(prop);
     case Types.RichText: {
       let getNodeSwatchIds = function(node) {
-        var _a2, _b, _c, _d;
+        var _a3, _b, _c, _d;
         switch (node.object) {
           case "document":
           case "block":
           case "inline":
-            return (_b = (_a2 = node.nodes) == null ? void 0 : _a2.flatMap(getNodeSwatchIds)) != null ? _b : [];
+            return (_b = (_a3 = node.nodes) == null ? void 0 : _a3.flatMap(getNodeSwatchIds)) != null ? _b : [];
           case "text":
             return (_d = (_c = node.marks) == null ? void 0 : _c.flatMap(getMarkSwatchIds)) != null ? _d : [];
           default:
             return [];
         }
       }, getMarkSwatchIds = function(mark) {
-        var _a2, _b;
-        return getTypographyStyleSwatchIds((_b = (_a2 = mark.data) == null ? void 0 : _a2.value) == null ? void 0 : _b.style);
+        var _a3, _b;
+        return getTypographyStyleSwatchIds((_b = (_a3 = mark.data) == null ? void 0 : _a3.value) == null ? void 0 : _b.style);
       };
       const value = prop;
       if (value == null || value.document == null)
@@ -2991,23 +2487,56 @@ function getElementSwatchIds(descriptor, prop) {
       const value = prop;
       return (value == null ? void 0 : value.swatchId) == null ? [] : [value.swatchId];
     }
+    case StyleV2ControlType: {
+      const value = prop;
+      return value.flatMap((value2) => getElementSwatchIds(descriptor.config.type, value2.value));
+    }
+    case RichTextV2ControlType: {
+      let getDescendantSwatchIds = function(descendant) {
+        if (slate.Element.isElement(descendant)) {
+          return [
+            ...getSlateElementSwatchIds(descendant),
+            ...descendant.children.flatMap((d) => getDescendantSwatchIds(d))
+          ];
+        }
+        if (slate.Text.isText(descendant)) {
+          return getTextSwatchIds(descendant);
+        }
+        return [];
+      }, getSlateElementSwatchIds = function(descendant) {
+        var _a3;
+        return (_a3 = plugins == null ? void 0 : plugins.flatMap((plugin) => {
+          var _a4;
+          return ((_a4 = plugin.control) == null ? void 0 : _a4.definition) && plugin.control.getElementValue ? getElementSwatchIds(plugin.control.definition, plugin.control.getElementValue(descendant)) : [];
+        })) != null ? _a3 : [];
+      }, getTextSwatchIds = function(text) {
+        var _a3;
+        return (_a3 = plugins == null ? void 0 : plugins.flatMap((plugin) => {
+          var _a4;
+          return ((_a4 = plugin.control) == null ? void 0 : _a4.definition) && plugin.control.getLeafValue ? getElementSwatchIds(plugin.control.definition, plugin.control.getLeafValue(text)) : [];
+        })) != null ? _a3 : [];
+      };
+      const descendants = prop;
+      const plugins = descriptor.config.plugins;
+      return descendants.flatMap((d) => getDescendantSwatchIds(d));
+    }
     default:
       return [];
   }
 }
 function getBackgroundsFileIds(value) {
-  var _a;
-  return (_a = value == null ? void 0 : value.flatMap((override) => override.value).flatMap((backgroundItem) => {
+  var _a2;
+  return (_a2 = value == null ? void 0 : value.flatMap((override) => override.value).flatMap((backgroundItem) => {
     switch (backgroundItem.type) {
       case "image":
         return [backgroundItem.payload.imageId];
       default:
         return [];
     }
-  })) != null ? _a : [];
+  })) != null ? _a2 : [];
 }
 function getFileIds(descriptor, prop) {
-  var _a;
+  var _a2;
   if (prop == null)
     return [];
   switch (descriptor.type) {
@@ -3019,7 +2548,7 @@ function getFileIds(descriptor, prop) {
     }
     case Types.Images: {
       const value = prop;
-      return (_a = value == null ? void 0 : value.flatMap((item) => item.props.file == null ? [] : [item.props.file])) != null ? _a : [];
+      return (_a2 = value == null ? void 0 : value.flatMap((item) => item.props.file == null ? [] : [item.props.file])) != null ? _a2 : [];
     }
     case ImageControlType: {
       const value = prop;
@@ -3035,20 +2564,20 @@ function getTypographyIds(descriptor, prop) {
   switch (descriptor.type) {
     case Types.RichText: {
       let getNodeTypographyIds = function(node) {
-        var _a, _b, _c, _d;
+        var _a2, _b, _c, _d;
         switch (node.object) {
           case "document":
           case "block":
           case "inline":
-            return (_b = (_a = node.nodes) == null ? void 0 : _a.flatMap(getNodeTypographyIds)) != null ? _b : [];
+            return (_b = (_a2 = node.nodes) == null ? void 0 : _a2.flatMap(getNodeTypographyIds)) != null ? _b : [];
           case "text":
             return (_d = (_c = node.marks) == null ? void 0 : _c.flatMap(getMarkTypographyIds)) != null ? _d : [];
           default:
             return [];
         }
       }, getMarkTypographyIds = function(mark) {
-        var _a, _b;
-        return [(_b = (_a = mark.data) == null ? void 0 : _a.value) == null ? void 0 : _b.id].filter((id) => id != null);
+        var _a2, _b;
+        return [(_b = (_a2 = mark.data) == null ? void 0 : _a2.value) == null ? void 0 : _b.id].filter((id) => id != null);
       };
       const value = prop;
       if (value == null || value.document == null)
@@ -3072,7 +2601,7 @@ function getTableIds(descriptor, prop) {
   }
 }
 function getPageIds(descriptor, prop) {
-  var _a;
+  var _a2;
   if (prop == null)
     return [];
   switch (descriptor.type) {
@@ -3091,8 +2620,8 @@ function getPageIds(descriptor, prop) {
       const value = prop;
       if (value == null)
         return [];
-      return (_a = value == null ? void 0 : value.flatMap((item) => {
-        var _a2, _b;
+      return (_a2 = value == null ? void 0 : value.flatMap((item) => {
+        var _a3, _b;
         switch (item.type) {
           case "button": {
             if (item.payload.link == null)
@@ -3105,7 +2634,7 @@ function getPageIds(descriptor, prop) {
             }
           }
           case "dropdown": {
-            return (_b = (_a2 = item.payload.links) == null ? void 0 : _a2.flatMap((link) => {
+            return (_b = (_a3 = item.payload.links) == null ? void 0 : _a3.flatMap((link) => {
               if (link.payload.link == null)
                 return [];
               switch (link.payload.link.type) {
@@ -3117,25 +2646,25 @@ function getPageIds(descriptor, prop) {
             })) != null ? _b : [];
           }
         }
-      })) != null ? _a : [];
+      })) != null ? _a2 : [];
     }
     case Types.RichText: {
       let getNodePageIds = function(node) {
-        var _a2, _b;
+        var _a3, _b;
         switch (node.object) {
           case "document":
           case "block":
-            return (_b = (_a2 = node.nodes) == null ? void 0 : _a2.flatMap(getNodePageIds)) != null ? _b : [];
+            return (_b = (_a3 = node.nodes) == null ? void 0 : _a3.flatMap(getNodePageIds)) != null ? _b : [];
           case "inline":
             return getInlinePageIds(node);
           default:
             return [];
         }
       }, getInlinePageIds = function(inline) {
-        var _a2, _b, _c, _d;
+        var _a3, _b, _c, _d;
         switch (inline.type) {
           case "link": {
-            const nodePageIds = (_b = (_a2 = inline.nodes) == null ? void 0 : _a2.flatMap(getNodePageIds)) != null ? _b : [];
+            const nodePageIds = (_b = (_a3 = inline.nodes) == null ? void 0 : _a3.flatMap(getNodePageIds)) != null ? _b : [];
             const dataPageIds = inline.data ? getLinkDataPageIds(inline.data) : [];
             return [...nodePageIds, ...dataPageIds];
           }
@@ -3250,14 +2779,14 @@ function getDocumentKeysSortedByDepth(state) {
     elements.set(key, getDocumentElements(state, key));
   });
   keys.sort((a, b) => {
-    var _a;
-    return ((_a = elements.get(a)) == null ? void 0 : _a.has(b)) ? -1 : 1;
+    var _a2;
+    return ((_a2 = elements.get(a)) == null ? void 0 : _a2.has(b)) ? -1 : 1;
   });
   return keys;
 }
 function getElement(state, documentKey, elementKey) {
-  var _a;
-  return (_a = getDocumentElements(state, documentKey).get(elementKey)) != null ? _a : null;
+  var _a2;
+  return (_a2 = getDocumentElements(state, documentKey).get(elementKey)) != null ? _a2 : null;
 }
 function getElementPropControllerDescriptors(state, documentKey, elementKey) {
   const element = getElement(state, documentKey, elementKey);
@@ -3344,8 +2873,6 @@ function configureStore({
   }), redux.applyMiddleware(thunk__default["default"]));
 }
 exports.Backgrounds = Backgrounds;
-exports.BlockActions = BlockActions;
-exports.BlockPlugin = BlockPlugin;
 exports.BlockTextAlignment = BlockTextAlignment;
 exports.BlockType = BlockType;
 exports.Border = Border;
@@ -3359,22 +2886,20 @@ exports.ColorControlType = ColorControlType;
 exports.ComponentIcon = ComponentIcon;
 exports.Date = Date;
 exports.ElementID = ElementID;
-exports.ElementUtils = ElementUtils;
 exports.Font = Font;
 exports.GapX = GapX;
 exports.GapY = GapY;
 exports.Grid = Grid;
-exports.Image = Image;
-exports.Image$1 = Image$1;
+exports.Image = Image$1;
+exports.Image$1 = Image;
 exports.ImageControlType = ImageControlType;
 exports.ImageControlValueFormat = ImageControlValueFormat;
 exports.Images = Images;
 exports.InlineType = InlineType;
-exports.Link = Link;
-exports.Link$1 = Link$1;
+exports.Link = Link$1;
+exports.Link$1 = Link;
 exports.LinkControlType = LinkControlType;
-exports.List = List$1;
-exports.ListActions = ListActions;
+exports.List = List;
 exports.ListControl = ListControl;
 exports.ListControlMessageType = ListControlMessageType;
 exports.ListControlType = ListControlType;
@@ -3391,8 +2916,8 @@ exports.ResponsiveLength = ResponsiveLength;
 exports.ResponsiveNumber = ResponsiveNumber;
 exports.ResponsiveOpacity = ResponsiveOpacity;
 exports.ResponsiveSelect = ResponsiveSelect;
-exports.RichText = RichText;
-exports.RichText$1 = RichText$1;
+exports.RichText = RichText$1;
+exports.RichText$1 = RichText;
 exports.RichTextControl = RichTextControl;
 exports.RichTextControlMessageType = RichTextControlMessageType;
 exports.RichTextControlType = RichTextControlType;
@@ -3402,11 +2927,9 @@ exports.RichTextV2ControlMessageType = RichTextV2ControlMessageType;
 exports.RichTextV2ControlType = RichTextV2ControlType;
 exports.RichTextV2Mode = RichTextV2Mode;
 exports.RootBlockType = RootBlockType;
-exports.Select = Select;
-exports.SelectControlType = SelectControlType;
 exports.Shadows = Shadows;
 exports.ShadowsPropControllerFormat = ShadowsPropControllerFormat;
-exports.Shape = Shape$1;
+exports.Shape = Shape;
 exports.ShapeControl = ShapeControl;
 exports.ShapeControlMessageType = ShapeControlMessageType;
 exports.ShapeControlType = ShapeControlType;
@@ -3420,6 +2943,9 @@ exports.StyleControl = StyleControl;
 exports.StyleControlMessageType = StyleControlMessageType;
 exports.StyleControlProperty = StyleControlProperty;
 exports.StyleControlType = StyleControlType;
+exports.StyleV2Control = StyleV2Control;
+exports.StyleV2ControlMessageType = StyleV2ControlMessageType;
+exports.StyleV2ControlType = StyleV2ControlType;
 exports.Table = Table;
 exports.TableFormFields = TableFormFields;
 exports.TableFormFieldsMessageType = TableFormFieldsMessageType;
@@ -3483,7 +3009,6 @@ exports.isNonNullable = isNonNullable;
 exports.isPropControllersHandle = isPropControllersHandle;
 exports.merge = merge;
 exports.mergeSlotData = mergeSlotData;
-exports.onKeyDown = onKeyDown;
 exports.reducer = reducer$8;
 exports.reducer$1 = reducer$7;
 exports.reducer$2 = reducer$9;
@@ -3498,5 +3023,7 @@ exports.richTextDTOtoDAO = richTextDTOtoDAO;
 exports.richTextDTOtoSelection = richTextDTOtoSelection;
 exports.toSelectionDTO = toSelectionDTO;
 exports.unstable_RichTextV2 = unstable_RichTextV2;
-exports.withBlock = withBlock;
+exports.unstable_StyleV2 = unstable_StyleV2;
+exports.unstable_useStyleV2ClassName = unstable_useStyleV2ClassName;
+exports.useStyle = useStyle;
 //# sourceMappingURL=react-page.cjs.js.map