@measured/puck-plugin-heading-analyzer 0.14.2-canary.e6e01c6 → 0.14.3-canary.061cc2a

package/dist/index.js

@@ -34978,36 +34978,33 @@ function querySelectorAll(parentNode, selector) {
 function getOptions(shared2, fromBinding) {
   return __spreadValues(__spreadValues({}, shared2), fromBinding);
 }
-function bindEvent(el, binding, options) {
+function bindEvent(win, binding, options) {
   let timer;
-  if (el.nodeName === "IFRAME") {
+  if (!loaded) {
     timer = setInterval(() => {
-      const currentWin = getWin(el);
-      if ((currentWin == null ? void 0 : currentWin.document.readyState) === "complete") {
-        currentWin.addEventListener(binding.eventName, binding.fn, options);
-        clearInterval(timer);
+      if (win.document.readyState === "complete") {
+        win.addEventListener(binding.eventName, binding.fn, options);
+        loaded = true;
       }
     }, 100);
-    return timer;
+  } else {
+    win.addEventListener(binding.eventName, binding.fn, options);
   }
-  const win = getWin(el);
-  win == null ? void 0 : win.addEventListener(binding.eventName, binding.fn, options);
   return timer;
 }
 function bindEvents(el, bindings, sharedOptions) {
   const unbindings = bindings.flatMap((binding) => {
     const iframes = querySelectorAll(window.document, "[data-rfd-iframe]");
-    const els = [el, ...iframes];
-    return els.map((currentEl) => {
-      if (!currentEl)
+    const windows = [el, ...iframes.map((iframe) => iframe.contentWindow)];
+    return windows.map((win) => {
+      if (!win)
         return function unbind() {
         };
       const options = getOptions(sharedOptions, binding.options);
-      const timer = bindEvent(currentEl, binding, options);
+      const timer = bindEvent(win, binding, options);
       return function unbind() {
         clearInterval(timer);
-        const win = getWin(currentEl);
-        win == null ? void 0 : win.removeEventListener(binding.eventName, binding.fn, options);
+        win.removeEventListener(binding.eventName, binding.fn, options);
       };
     });
   });
@@ -35207,6 +35204,26 @@ function getFurthestAway({
   }).sort((a2, b) => b.distance - a2.distance);
   return sorted[0] ? sorted[0].id : null;
 }
+function normalizeFamilies(pageBorderBox, candidates) {
+  const families = candidates.reduce((acc, candidate) => {
+    var _a3;
+    const familyName = ((_a3 = candidate.parents[0]) == null ? void 0 : _a3.id) || candidate.descriptor.id;
+    const family = acc[familyName] || [];
+    const generation = candidate.parents.length;
+    family[generation] = [...family[generation] || [], candidate];
+    return __spreadProps(__spreadValues({}, acc), {
+      [familyName]: family
+    });
+  }, {});
+  return Object.keys(families).map((familyName) => {
+    const family = families[familyName].flat();
+    const reversedFamily = [...family].reverse();
+    const chosenMember = reversedFamily.find((member) => {
+      return pageBorderBox.center.x < member.page.borderBox.right && pageBorderBox.center.x > member.page.borderBox.left && pageBorderBox.center.y > member.page.borderBox.top && pageBorderBox.center.y < member.page.borderBox.bottom;
+    });
+    return chosenMember || family[0];
+  });
+}
 function getDroppableOver({
   pageBorderBox,
   draggable: draggable2,
@@ -35247,10 +35264,14 @@ function getDroppableOver({
   if (candidates.length === 1) {
     return candidates[0].descriptor.id;
   }
+  const normalizedCandidates = normalizeFamilies(pageBorderBox, candidates);
+  if (normalizedCandidates.length === 1) {
+    return normalizedCandidates[0].descriptor.id;
+  }
   return getFurthestAway({
     pageBorderBox,
     draggable: draggable2,
-    candidates
+    candidates: normalizedCandidates
   });
 }
 function getIsDisplaced({
@@ -35935,20 +35956,22 @@ function offsetPoint(x, y, win) {
   let offsetY = 0;
   if (win.parent !== win.self) {
     const iframe = win.frameElement;
-    const rect = iframe.getBoundingClientRect();
-    const transform = getTransform(iframe);
-    offsetX = rect.left;
-    offsetY = rect.top;
-    if (transform) {
-      const {
-        x: transformedX,
-        y: transformedY
-      } = applyTransformPoint(x, y, transform.matrix, transform.origin);
-      const point2 = {
-        x: transformedX + offsetX,
-        y: transformedY + offsetY
-      };
-      return point2;
+    if (iframe) {
+      const rect = iframe.getBoundingClientRect();
+      const transform = getTransform(iframe);
+      offsetX = rect.left;
+      offsetY = rect.top;
+      if (transform) {
+        const {
+          x: transformedX,
+          y: transformedY
+        } = applyTransformPoint(x, y, transform.matrix, transform.origin);
+        const point2 = {
+          x: transformedX + offsetX,
+          y: transformedY + offsetY
+        };
+        return point2;
+      }
     }
   }
   const point = {
@@ -37621,7 +37644,7 @@ function getBody() {
   !document.body ? process.env.NODE_ENV !== "production" ? invariant2(false, "document.body is not ready") : invariant2(false) : void 0;
   return document.body;
 }
-var import_react5, import_react_dom2, isProduction$1, spacesAndTabs, lineStartWithSpaces, clean$2, getDevMessage, getFormattedMessage, isDisabledFlag, warning2, error, getWin, isProduction2, prefix$1, RbdInvariant, ErrorBoundary, dragHandleUsageInstructions, position, onDragStart, withLocation, withCombine, onDragUpdate, returnedToStart, onDragEnd, preset, preset$1, origin, add, subtract, isEqual$1, negate, patch, distance2, closest$1, apply, executeClip, offsetByPosition, getCorners, noSpacing2, scroll$1, increase, clip2, getSubject, scrollDroppable, toDroppableMap, toDraggableMap, toDroppableList, toDraggableList, getDraggablesInsideDroppable, removeDraggableFromList, moveToNextCombine, isHomeOf, noDisplacedBy, emptyGroups, noImpact, noImpact$1, isWithin, isPartiallyVisibleThroughFrame, isTotallyVisibleThroughFrame, vertical, horizontal, isTotallyVisibleThroughFrameOnAxis, getDroppableDisplaced, isVisibleInDroppable, isVisibleInViewport, isVisible$1, isPartiallyVisible, isTotallyVisible, isTotallyVisibleOnAxis, getShouldAnimate, fromCombine, fromReorder, moveToNextIndex, getCombinedItemDisplacement, whenCombining, distanceFromStartToBorderBoxCenter, distanceFromEndToBorderBoxCenter, getCrossAxisBorderBoxCenter, goAfter, goBefore, goIntoStart, whenReordering, withDroppableDisplacement, getResultWithoutDroppableDisplacement, getPageBorderBoxCenterFromImpact, scrollViewport, speculativelyIncrease, withViewportDisplacement, getClientFromPageBorderBoxCenter, isTotallyVisibleInNewLocation, moveToNextPlace, getKnownActive, getBestCrossAxisDroppable, getCurrentPageBorderBoxCenter, getCurrentPageBorderBox, getClosestDraggable, getDisplacedBy, getRequiredGrowthForPlaceholder, withMaxScroll, addPlaceholder, removePlaceholder, moveToNewDroppable, moveCrossAxis, whatIsDraggedOver, getDroppableOver$1, moveInDirection, offsetRectByPosition, withDroppableScroll, getReorderImpact, combineThresholdDivisor, getCombineImpact, getDragImpact, patchDroppableMap, clearUnusedPlaceholder, recomputePlaceholders, update, recompute, getClientBorderBoxCenter, refreshSnap, getHomeLocation, getLiftEffect, patchDimensionMap, start, finish, offsetDraggable, getFrame, adjustAdditionsForScrollChanges, timingsKey, publishWhileDraggingInVirtual, isSnapping, postDroppableChange, idle$2, reducer, beforeInitialCapture, lift$1, initialPublish, publishWhileDragging, collectionStarting, updateDroppableScroll, updateDroppableIsEnabled, updateDroppableIsCombineEnabled, move, moveByWindowScroll, updateViewportMaxScroll, moveUp, moveDown, moveRight, moveLeft, flush, animateDrop, completeDrop, drop$1, dropPending, dropAnimationFinished, lift, style, curves, combine, timings, outOfTheWayTiming, transitions, moveTo, transforms, minDropTime, maxDropTime, dropTimeRange, maxDropTimeAtDistance, cancelDropModifier, getDropDuration, getNewHomeClientOffset, getDropImpact, dropMiddleware, drop, getWindowScroll3, shouldEnd, scrollListener, scrollListener$1, getExpiringAnnounce, getAsyncMarshal, areLocationsEqual, isCombineEqual, isCriticalEqual, withTimings, getDragStart, getPublisher, responders, dropAnimationFinishMiddleware, dropAnimationFinish, dropAnimationFlushOnScrollMiddleware, dropAnimationFlushOnScroll, dimensionMarshalStopper, focus, shouldStop, autoScroll, pendingDrop, pendingDrop$1, composeEnhancers, createStore2, clean$1, getMaxScroll, getDocumentElement, getMaxWindowScroll, getViewport, getInitialPublish, createDimensionMarshal, canStartDrag, scrollWindow, getScrollableDroppables, getScrollableDroppableOver, getBestScrollableDroppable, defaultAutoScrollerOptions, getDistanceThresholds, getPercentage, minScroll, getValueFromDistance, dampenValueByTime, getValue, getScrollOnAxis, adjustForSizeLimits, clean, getScroll$1, smallestSigned, getOverlap, canPartiallyScroll, canScrollWindow, getWindowOverlap, canScrollDroppable, getDroppableOverlap, getWindowScrollChange, getDroppableScrollChange, iframeCache, createCol, matrixPattern, getMatrix, getOrigin, findNearestTransform, defaultTransform, getTransform, applyTransformPoint, applyTransformRect, applyTransformSpacing, applyTransformBox, resetToOrigin, getIframeScroll, scroll, createFluidScroller, createJumpScroller, createAutoScroller, prefix2, dragHandle, draggable, droppable, scrollContainer, makeGetSelector, getStyles, noPointerEvents, getStyles$1, useIsomorphicLayoutEffect2, useLayoutEffect2, getHead, createStyleEl, alwaysDataAttr, dynamicDataAttr, getWindowFromEl, dragHandleCache, StoreContext, getBodyElement, visuallyHidden, visuallyHidden$1, getId, count$1, defaults, useUniqueId$1, AppContext, peerDependencies, semver, getVersion, isSatisfied, checkReactVersion, suffix, checkDoctype, tab, enter, escape, space, pageUp, pageDown, end, home, arrowLeft, arrowUp, arrowRight, arrowDown, preventedKeys, preventStandardKeyEvents, supportedEventName, supportedPageVisibilityEventName, primaryButton, sloppyClickThreshold, idle$1, scrollJumpKeys, idle, timeForLongPress, forcePressThreshold, interactiveTagNames, getBorderBoxCenterPosition, supportedMatchesName, defaultSensors, createResponders, createAutoScrollerOptions, count, useUniqueContextId$1, zIndexOptions, getDraggingTransition, getDraggingOpacity, getShouldDraggingAnimate, applyOffsetBox, DroppableContext, Draggable, Draggable$1, isStrictEqual, whatIsDraggedOverFromResult, getCombineWithFromResult, getCombineWithFromImpact, atRest, makeMapStateToProps$1, mapDispatchToProps$1, ConnectedDraggable, ConnectedDraggable$1, getScroll, isEqual2, isScroll, isAuto, isVisible, isEither, isBoth, isElementScrollable, isBodyScrollable, getClosestScrollable, getClosestScrollable$1, getIsFixed, getEnv, getDroppableDimension, getClient, getDimension, immediate, delayed, getListenerOptions, getScrollable, getClosestScrollableFromDrag, empty, getSize, getStyle, Placeholder, Placeholder$1, shared, standard, virtual, AnimateInOut, Droppable, Droppable$1, defaultProps, attachDefaultPropsToOwnProps, isMatchingType, getDraggable, makeMapStateToProps, mapDispatchToProps, ConnectedDroppable, ConnectedDroppable$1;
+var import_react5, import_react_dom2, isProduction$1, spacesAndTabs, lineStartWithSpaces, clean$2, getDevMessage, getFormattedMessage, isDisabledFlag, warning2, error, loaded, isProduction2, prefix$1, RbdInvariant, ErrorBoundary, dragHandleUsageInstructions, position, onDragStart, withLocation, withCombine, onDragUpdate, returnedToStart, onDragEnd, preset, preset$1, origin, add, subtract, isEqual$1, negate, patch, distance2, closest$1, apply, executeClip, offsetByPosition, getCorners, noSpacing2, scroll$1, increase, clip2, getSubject, scrollDroppable, toDroppableMap, toDraggableMap, toDroppableList, toDraggableList, getDraggablesInsideDroppable, removeDraggableFromList, moveToNextCombine, isHomeOf, noDisplacedBy, emptyGroups, noImpact, noImpact$1, isWithin, isPartiallyVisibleThroughFrame, isTotallyVisibleThroughFrame, vertical, horizontal, isTotallyVisibleThroughFrameOnAxis, getDroppableDisplaced, isVisibleInDroppable, isVisibleInViewport, isVisible$1, isPartiallyVisible, isTotallyVisible, isTotallyVisibleOnAxis, getShouldAnimate, fromCombine, fromReorder, moveToNextIndex, getCombinedItemDisplacement, whenCombining, distanceFromStartToBorderBoxCenter, distanceFromEndToBorderBoxCenter, getCrossAxisBorderBoxCenter, goAfter, goBefore, goIntoStart, whenReordering, withDroppableDisplacement, getResultWithoutDroppableDisplacement, getPageBorderBoxCenterFromImpact, scrollViewport, speculativelyIncrease, withViewportDisplacement, getClientFromPageBorderBoxCenter, isTotallyVisibleInNewLocation, moveToNextPlace, getKnownActive, getBestCrossAxisDroppable, getCurrentPageBorderBoxCenter, getCurrentPageBorderBox, getClosestDraggable, getDisplacedBy, getRequiredGrowthForPlaceholder, withMaxScroll, addPlaceholder, removePlaceholder, moveToNewDroppable, moveCrossAxis, whatIsDraggedOver, getDroppableOver$1, moveInDirection, offsetRectByPosition, withDroppableScroll, getReorderImpact, combineThresholdDivisor, getCombineImpact, getDragImpact, patchDroppableMap, clearUnusedPlaceholder, recomputePlaceholders, update, recompute, getClientBorderBoxCenter, refreshSnap, getHomeLocation, getLiftEffect, patchDimensionMap, start, finish, offsetDraggable, getFrame, adjustAdditionsForScrollChanges, timingsKey, publishWhileDraggingInVirtual, isSnapping, postDroppableChange, idle$2, reducer, beforeInitialCapture, lift$1, initialPublish, publishWhileDragging, collectionStarting, updateDroppableScroll, updateDroppableIsEnabled, updateDroppableIsCombineEnabled, move, moveByWindowScroll, updateViewportMaxScroll, moveUp, moveDown, moveRight, moveLeft, flush, animateDrop, completeDrop, drop$1, dropPending, dropAnimationFinished, lift, style, curves, combine, timings, outOfTheWayTiming, transitions, moveTo, transforms, minDropTime, maxDropTime, dropTimeRange, maxDropTimeAtDistance, cancelDropModifier, getDropDuration, getNewHomeClientOffset, getDropImpact, dropMiddleware, drop, getWindowScroll3, shouldEnd, scrollListener, scrollListener$1, getExpiringAnnounce, getAsyncMarshal, areLocationsEqual, isCombineEqual, isCriticalEqual, withTimings, getDragStart, getPublisher, responders, dropAnimationFinishMiddleware, dropAnimationFinish, dropAnimationFlushOnScrollMiddleware, dropAnimationFlushOnScroll, dimensionMarshalStopper, focus, shouldStop, autoScroll, pendingDrop, pendingDrop$1, composeEnhancers, createStore2, clean$1, getMaxScroll, getDocumentElement, getMaxWindowScroll, getViewport, getInitialPublish, createDimensionMarshal, canStartDrag, scrollWindow, getScrollableDroppables, getScrollableDroppableOver, getBestScrollableDroppable, defaultAutoScrollerOptions, getDistanceThresholds, getPercentage, minScroll, getValueFromDistance, dampenValueByTime, getValue, getScrollOnAxis, adjustForSizeLimits, clean, getScroll$1, smallestSigned, getOverlap, canPartiallyScroll, canScrollWindow, getWindowOverlap, canScrollDroppable, getDroppableOverlap, getWindowScrollChange, getDroppableScrollChange, iframeCache, createCol, matrixPattern, getMatrix, getOrigin, findNearestTransform, defaultTransform, getTransform, applyTransformPoint, applyTransformRect, applyTransformSpacing, applyTransformBox, resetToOrigin, getIframeScroll, scroll, createFluidScroller, createJumpScroller, createAutoScroller, prefix2, dragHandle, draggable, droppable, scrollContainer, makeGetSelector, getStyles, noPointerEvents, getStyles$1, useIsomorphicLayoutEffect2, useLayoutEffect2, getHead, createStyleEl, alwaysDataAttr, dynamicDataAttr, getWindowFromEl, dragHandleCache, StoreContext, getBodyElement, visuallyHidden, visuallyHidden$1, getId, count$1, defaults, useUniqueId$1, AppContext, peerDependencies, semver, getVersion, isSatisfied, checkReactVersion, suffix, checkDoctype, tab, enter, escape, space, pageUp, pageDown, end, home, arrowLeft, arrowUp, arrowRight, arrowDown, preventedKeys, preventStandardKeyEvents, supportedEventName, supportedPageVisibilityEventName, primaryButton, sloppyClickThreshold, idle$1, scrollJumpKeys, idle, timeForLongPress, forcePressThreshold, interactiveTagNames, getBorderBoxCenterPosition, supportedMatchesName, defaultSensors, createResponders, createAutoScrollerOptions, count, useUniqueContextId$1, zIndexOptions, getDraggingTransition, getDraggingOpacity, getShouldDraggingAnimate, applyOffsetBox, DroppableContext, Draggable, Draggable$1, isStrictEqual, whatIsDraggedOverFromResult, getCombineWithFromResult, getCombineWithFromImpact, atRest, makeMapStateToProps$1, mapDispatchToProps$1, ConnectedDraggable, ConnectedDraggable$1, getScroll, isEqual2, isScroll, isAuto, isVisible, isEither, isBoth, isElementScrollable, isBodyScrollable, getClosestScrollable, getClosestScrollable$1, getIsFixed, getEnv, getDroppableDimension, getClient, getParents, getDimension, immediate, delayed, getListenerOptions, getScrollable, getClosestScrollableFromDrag, empty, getSize, getStyle, Placeholder, Placeholder$1, shared, standard, virtual, AnimateInOut, Droppable, Droppable$1, defaultProps, attachDefaultPropsToOwnProps, isMatchingType, getDraggable, makeMapStateToProps, mapDispatchToProps, ConnectedDroppable, ConnectedDroppable$1;
 var init_dnd_esm = __esm({
   "../../node_modules/@measured/dnd/dist/dnd.esm.js"() {
     init_react_import();
@@ -37650,13 +37673,7 @@ var init_dnd_esm = __esm({
     isDisabledFlag = "__@hello-pangea/dnd-disable-dev-warnings";
     warning2 = log.bind(null, "warn");
     error = log.bind(null, "error");
-    getWin = (el) => {
-      let win = el;
-      if (el.nodeName === "IFRAME") {
-        win = el.contentWindow;
-      }
-      return win;
-    };
+    loaded = false;
     isProduction2 = process.env.NODE_ENV === "production";
     prefix$1 = "Invariant failed";
     RbdInvariant = class extends Error {
@@ -41035,7 +41052,7 @@ var init_dnd_esm = __esm({
       }
       if (!el.parentElement) {
         const refWindow = el.ownerDocument.defaultView;
-        if (refWindow && refWindow.self !== refWindow.parent) {
+        if (refWindow && refWindow.self !== refWindow.parent && refWindow.frameElement) {
           const iframe = refWindow.frameElement;
           return findNearestTransform(iframe);
         }
@@ -41157,7 +41174,7 @@ var init_dnd_esm = __esm({
     }) => {
       const el = querySelectorAllIframe(`[data-rfd-draggable-id="${state.critical.draggable.id}"]`)[0];
       const win = (el == null ? void 0 : el.ownerDocument.defaultView) || window;
-      const isInIframe = win !== window;
+      const isInIframe = win !== window && win.frameElement;
       if (isInIframe) {
         const iframe = win.frameElement;
         const viewportBox = getBox(iframe);
@@ -41996,7 +42013,8 @@ var init_dnd_esm = __esm({
       client,
       page,
       closest: closest2,
-      transform
+      transform,
+      parents
     }) => {
       const frame = (() => {
         if (!closest2) {
@@ -42045,7 +42063,8 @@ var init_dnd_esm = __esm({
         page,
         frame,
         subject,
-        transform
+        transform,
+        parents
       };
       return dimension;
     };
@@ -42082,6 +42101,27 @@ var init_dnd_esm = __esm({
       });
       return client;
     };
+    getParents = (ref2) => {
+      var _a3;
+      const contextId = ref2.getAttribute(`${prefix2}-droppable-context-id`);
+      const parentDescriptors = [];
+      if (!contextId)
+        return [];
+      let currentEl = ref2;
+      while (currentEl) {
+        currentEl = (_a3 = currentEl.parentElement) == null ? void 0 : _a3.closest(`[${prefix2}-droppable-context-id="${contextId}"]`);
+        const id = currentEl == null ? void 0 : currentEl.getAttribute(`${prefix2}-droppable-id`);
+        if (id) {
+          parentDescriptors.push({
+            id,
+            mode: "standard",
+            type: "DEFAULT"
+          });
+        }
+      }
+      parentDescriptors.reverse();
+      return parentDescriptors;
+    };
     getDimension = ({
       ref: ref2,
       descriptor,
@@ -42117,6 +42157,7 @@ var init_dnd_esm = __esm({
           shouldClipSubject
         };
       })();
+      const parents = getParents(ref2);
       const dimension = getDroppableDimension({
         descriptor,
         isEnabled: !isDropDisabled,
@@ -42126,7 +42167,8 @@ var init_dnd_esm = __esm({
         client,
         page,
         closest: closest2,
-        transform
+        transform,
+        parents
       });
       return dimension;
     };
@@ -42597,6 +42639,1291 @@ var init_dnd_esm = __esm({
   }
 });
 
+// ../../node_modules/ua-parser-js/src/ua-parser.js
+var require_ua_parser = __commonJS({
+  "../../node_modules/ua-parser-js/src/ua-parser.js"(exports, module2) {
+    init_react_import();
+    (function(window2, undefined2) {
+      "use strict";
+      var LIBVERSION = "1.0.37", EMPTY = "", UNKNOWN = "?", FUNC_TYPE = "function", UNDEF_TYPE = "undefined", OBJ_TYPE = "object", STR_TYPE = "string", MAJOR = "major", MODEL = "model", NAME = "name", TYPE2 = "type", VENDOR = "vendor", VERSION = "version", ARCHITECTURE = "architecture", CONSOLE = "console", MOBILE = "mobile", TABLET = "tablet", SMARTTV = "smarttv", WEARABLE = "wearable", EMBEDDED = "embedded", UA_MAX_LENGTH = 500;
+      var AMAZON = "Amazon", APPLE = "Apple", ASUS = "ASUS", BLACKBERRY = "BlackBerry", BROWSER = "Browser", CHROME = "Chrome", EDGE = "Edge", FIREFOX = "Firefox", GOOGLE = "Google", HUAWEI = "Huawei", LG = "LG", MICROSOFT = "Microsoft", MOTOROLA = "Motorola", OPERA = "Opera", SAMSUNG = "Samsung", SHARP = "Sharp", SONY = "Sony", XIAOMI = "Xiaomi", ZEBRA = "Zebra", FACEBOOK = "Facebook", CHROMIUM_OS = "Chromium OS", MAC_OS = "Mac OS";
+      var extend = function(regexes2, extensions) {
+        var mergedRegexes = {};
+        for (var i2 in regexes2) {
+          if (extensions[i2] && extensions[i2].length % 2 === 0) {
+            mergedRegexes[i2] = extensions[i2].concat(regexes2[i2]);
+          } else {
+            mergedRegexes[i2] = regexes2[i2];
+          }
+        }
+        return mergedRegexes;
+      }, enumerize = function(arr) {
+        var enums = {};
+        for (var i2 = 0; i2 < arr.length; i2++) {
+          enums[arr[i2].toUpperCase()] = arr[i2];
+        }
+        return enums;
+      }, has = function(str1, str2) {
+        return typeof str1 === STR_TYPE ? lowerize(str2).indexOf(lowerize(str1)) !== -1 : false;
+      }, lowerize = function(str) {
+        return str.toLowerCase();
+      }, majorize = function(version2) {
+        return typeof version2 === STR_TYPE ? version2.replace(/[^\d\.]/g, EMPTY).split(".")[0] : undefined2;
+      }, trim = function(str, len) {
+        if (typeof str === STR_TYPE) {
+          str = str.replace(/^\s\s*/, EMPTY);
+          return typeof len === UNDEF_TYPE ? str : str.substring(0, UA_MAX_LENGTH);
+        }
+      };
+      var rgxMapper = function(ua, arrays) {
+        var i2 = 0, j, k, p, q, matches, match;
+        while (i2 < arrays.length && !matches) {
+          var regex = arrays[i2], props = arrays[i2 + 1];
+          j = k = 0;
+          while (j < regex.length && !matches) {
+            if (!regex[j]) {
+              break;
+            }
+            matches = regex[j++].exec(ua);
+            if (!!matches) {
+              for (p = 0; p < props.length; p++) {
+                match = matches[++k];
+                q = props[p];
+                if (typeof q === OBJ_TYPE && q.length > 0) {
+                  if (q.length === 2) {
+                    if (typeof q[1] == FUNC_TYPE) {
+                      this[q[0]] = q[1].call(this, match);
+                    } else {
+                      this[q[0]] = q[1];
+                    }
+                  } else if (q.length === 3) {
+                    if (typeof q[1] === FUNC_TYPE && !(q[1].exec && q[1].test)) {
+                      this[q[0]] = match ? q[1].call(this, match, q[2]) : undefined2;
+                    } else {
+                      this[q[0]] = match ? match.replace(q[1], q[2]) : undefined2;
+                    }
+                  } else if (q.length === 4) {
+                    this[q[0]] = match ? q[3].call(this, match.replace(q[1], q[2])) : undefined2;
+                  }
+                } else {
+                  this[q] = match ? match : undefined2;
+                }
+              }
+            }
+          }
+          i2 += 2;
+        }
+      }, strMapper = function(str, map) {
+        for (var i2 in map) {
+          if (typeof map[i2] === OBJ_TYPE && map[i2].length > 0) {
+            for (var j = 0; j < map[i2].length; j++) {
+              if (has(map[i2][j], str)) {
+                return i2 === UNKNOWN ? undefined2 : i2;
+              }
+            }
+          } else if (has(map[i2], str)) {
+            return i2 === UNKNOWN ? undefined2 : i2;
+          }
+        }
+        return str;
+      };
+      var oldSafariMap = {
+        "1.0": "/8",
+        "1.2": "/1",
+        "1.3": "/3",
+        "2.0": "/412",
+        "2.0.2": "/416",
+        "2.0.3": "/417",
+        "2.0.4": "/419",
+        "?": "/"
+      }, windowsVersionMap = {
+        "ME": "4.90",
+        "NT 3.11": "NT3.51",
+        "NT 4.0": "NT4.0",
+        "2000": "NT 5.0",
+        "XP": ["NT 5.1", "NT 5.2"],
+        "Vista": "NT 6.0",
+        "7": "NT 6.1",
+        "8": "NT 6.2",
+        "8.1": "NT 6.3",
+        "10": ["NT 6.4", "NT 10.0"],
+        "RT": "ARM"
+      };
+      var regexes = {
+        browser: [
+          [
+            /\b(?:crmo|crios)\/([\w\.]+)/i
+            // Chrome for Android/iOS
+          ],
+          [VERSION, [NAME, "Chrome"]],
+          [
+            /edg(?:e|ios|a)?\/([\w\.]+)/i
+            // Microsoft Edge
+          ],
+          [VERSION, [NAME, "Edge"]],
+          [
+            // Presto based
+            /(opera mini)\/([-\w\.]+)/i,
+            // Opera Mini
+            /(opera [mobiletab]{3,6})\b.+version\/([-\w\.]+)/i,
+            // Opera Mobi/Tablet
+            /(opera)(?:.+version\/|[\/ ]+)([\w\.]+)/i
+            // Opera
+          ],
+          [NAME, VERSION],
+          [
+            /opios[\/ ]+([\w\.]+)/i
+            // Opera mini on iphone >= 8.0
+          ],
+          [VERSION, [NAME, OPERA + " Mini"]],
+          [
+            /\bopr\/([\w\.]+)/i
+            // Opera Webkit
+          ],
+          [VERSION, [NAME, OPERA]],
+          [
+            // Mixed
+            /\bb[ai]*d(?:uhd|[ub]*[aekoprswx]{5,6})[\/ ]?([\w\.]+)/i
+            // Baidu
+          ],
+          [VERSION, [NAME, "Baidu"]],
+          [
+            /(kindle)\/([\w\.]+)/i,
+            // Kindle
+            /(lunascape|maxthon|netfront|jasmine|blazer)[\/ ]?([\w\.]*)/i,
+            // Lunascape/Maxthon/Netfront/Jasmine/Blazer
+            // Trident based
+            /(avant|iemobile|slim)\s?(?:browser)?[\/ ]?([\w\.]*)/i,
+            // Avant/IEMobile/SlimBrowser
+            /(?:ms|\()(ie) ([\w\.]+)/i,
+            // Internet Explorer
+            // Webkit/KHTML based                                               // Flock/RockMelt/Midori/Epiphany/Silk/Skyfire/Bolt/Iron/Iridium/PhantomJS/Bowser/QupZilla/Falkon
+            /(flock|rockmelt|midori|epiphany|silk|skyfire|bolt|iron|vivaldi|iridium|phantomjs|bowser|quark|qupzilla|falkon|rekonq|puffin|brave|whale(?!.+naver)|qqbrowserlite|qq|duckduckgo)\/([-\w\.]+)/i,
+            // Rekonq/Puffin/Brave/Whale/QQBrowserLite/QQ, aka ShouQ
+            /(heytap|ovi)browser\/([\d\.]+)/i,
+            // Heytap/Ovi
+            /(weibo)__([\d\.]+)/i
+            // Weibo
+          ],
+          [NAME, VERSION],
+          [
+            /(?:\buc? ?browser|(?:juc.+)ucweb)[\/ ]?([\w\.]+)/i
+            // UCBrowser
+          ],
+          [VERSION, [NAME, "UC" + BROWSER]],
+          [
+            /microm.+\bqbcore\/([\w\.]+)/i,
+            // WeChat Desktop for Windows Built-in Browser
+            /\bqbcore\/([\w\.]+).+microm/i,
+            /micromessenger\/([\w\.]+)/i
+            // WeChat
+          ],
+          [VERSION, [NAME, "WeChat"]],
+          [
+            /konqueror\/([\w\.]+)/i
+            // Konqueror
+          ],
+          [VERSION, [NAME, "Konqueror"]],
+          [
+            /trident.+rv[: ]([\w\.]{1,9})\b.+like gecko/i
+            // IE11
+          ],
+          [VERSION, [NAME, "IE"]],
+          [
+            /ya(?:search)?browser\/([\w\.]+)/i
+            // Yandex
+          ],
+          [VERSION, [NAME, "Yandex"]],
+          [
+            /slbrowser\/([\w\.]+)/i
+            // Smart Lenovo Browser
+          ],
+          [VERSION, [NAME, "Smart Lenovo " + BROWSER]],
+          [
+            /(avast|avg)\/([\w\.]+)/i
+            // Avast/AVG Secure Browser
+          ],
+          [[NAME, /(.+)/, "$1 Secure " + BROWSER], VERSION],
+          [
+            /\bfocus\/([\w\.]+)/i
+            // Firefox Focus
+          ],
+          [VERSION, [NAME, FIREFOX + " Focus"]],
+          [
+            /\bopt\/([\w\.]+)/i
+            // Opera Touch
+          ],
+          [VERSION, [NAME, OPERA + " Touch"]],
+          [
+            /coc_coc\w+\/([\w\.]+)/i
+            // Coc Coc Browser
+          ],
+          [VERSION, [NAME, "Coc Coc"]],
+          [
+            /dolfin\/([\w\.]+)/i
+            // Dolphin
+          ],
+          [VERSION, [NAME, "Dolphin"]],
+          [
+            /coast\/([\w\.]+)/i
+            // Opera Coast
+          ],
+          [VERSION, [NAME, OPERA + " Coast"]],
+          [
+            /miuibrowser\/([\w\.]+)/i
+            // MIUI Browser
+          ],
+          [VERSION, [NAME, "MIUI " + BROWSER]],
+          [
+            /fxios\/([-\w\.]+)/i
+            // Firefox for iOS
+          ],
+          [VERSION, [NAME, FIREFOX]],
+          [
+            /\bqihu|(qi?ho?o?|360)browser/i
+            // 360
+          ],
+          [[NAME, "360 " + BROWSER]],
+          [
+            /(oculus|sailfish|huawei|vivo)browser\/([\w\.]+)/i
+          ],
+          [[NAME, /(.+)/, "$1 " + BROWSER], VERSION],
+          [
+            // Oculus/Sailfish/HuaweiBrowser/VivoBrowser
+            /samsungbrowser\/([\w\.]+)/i
+            // Samsung Internet
+          ],
+          [VERSION, [NAME, SAMSUNG + " Internet"]],
+          [
+            /(comodo_dragon)\/([\w\.]+)/i
+            // Comodo Dragon
+          ],
+          [[NAME, /_/g, " "], VERSION],
+          [
+            /metasr[\/ ]?([\d\.]+)/i
+            // Sogou Explorer
+          ],
+          [VERSION, [NAME, "Sogou Explorer"]],
+          [
+            /(sogou)mo\w+\/([\d\.]+)/i
+            // Sogou Mobile
+          ],
+          [[NAME, "Sogou Mobile"], VERSION],
+          [
+            /(electron)\/([\w\.]+) safari/i,
+            // Electron-based App
+            /(tesla)(?: qtcarbrowser|\/(20\d\d\.[-\w\.]+))/i,
+            // Tesla
+            /m?(qqbrowser|2345Explorer)[\/ ]?([\w\.]+)/i
+            // QQBrowser/2345 Browser
+          ],
+          [NAME, VERSION],
+          [
+            /(lbbrowser)/i,
+            // LieBao Browser
+            /\[(linkedin)app\]/i
+            // LinkedIn App for iOS & Android
+          ],
+          [NAME],
+          [
+            // WebView
+            /((?:fban\/fbios|fb_iab\/fb4a)(?!.+fbav)|;fbav\/([\w\.]+);)/i
+            // Facebook App for iOS & Android
+          ],
+          [[NAME, FACEBOOK], VERSION],
+          [
+            /(Klarna)\/([\w\.]+)/i,
+            // Klarna Shopping Browser for iOS & Android
+            /(kakao(?:talk|story))[\/ ]([\w\.]+)/i,
+            // Kakao App
+            /(naver)\(.*?(\d+\.[\w\.]+).*\)/i,
+            // Naver InApp
+            /safari (line)\/([\w\.]+)/i,
+            // Line App for iOS
+            /\b(line)\/([\w\.]+)\/iab/i,
+            // Line App for Android
+            /(alipay)client\/([\w\.]+)/i,
+            // Alipay
+            /(chromium|instagram|snapchat)[\/ ]([-\w\.]+)/i
+            // Chromium/Instagram/Snapchat
+          ],
+          [NAME, VERSION],
+          [
+            /\bgsa\/([\w\.]+) .*safari\//i
+            // Google Search Appliance on iOS
+          ],
+          [VERSION, [NAME, "GSA"]],
+          [
+            /musical_ly(?:.+app_?version\/|_)([\w\.]+)/i
+            // TikTok
+          ],
+          [VERSION, [NAME, "TikTok"]],
+          [
+            /headlesschrome(?:\/([\w\.]+)| )/i
+            // Chrome Headless
+          ],
+          [VERSION, [NAME, CHROME + " Headless"]],
+          [
+            / wv\).+(chrome)\/([\w\.]+)/i
+            // Chrome WebView
+          ],
+          [[NAME, CHROME + " WebView"], VERSION],
+          [
+            /droid.+ version\/([\w\.]+)\b.+(?:mobile safari|safari)/i
+            // Android Browser
+          ],
+          [VERSION, [NAME, "Android " + BROWSER]],
+          [
+            /(chrome|omniweb|arora|[tizenoka]{5} ?browser)\/v?([\w\.]+)/i
+            // Chrome/OmniWeb/Arora/Tizen/Nokia
+          ],
+          [NAME, VERSION],
+          [
+            /version\/([\w\.\,]+) .*mobile\/\w+ (safari)/i
+            // Mobile Safari
+          ],
+          [VERSION, [NAME, "Mobile Safari"]],
+          [
+            /version\/([\w(\.|\,)]+) .*(mobile ?safari|safari)/i
+            // Safari & Safari Mobile
+          ],
+          [VERSION, NAME],
+          [
+            /webkit.+?(mobile ?safari|safari)(\/[\w\.]+)/i
+            // Safari < 3.0
+          ],
+          [NAME, [VERSION, strMapper, oldSafariMap]],
+          [
+            /(webkit|khtml)\/([\w\.]+)/i
+          ],
+          [NAME, VERSION],
+          [
+            // Gecko based
+            /(navigator|netscape\d?)\/([-\w\.]+)/i
+            // Netscape
+          ],
+          [[NAME, "Netscape"], VERSION],
+          [
+            /mobile vr; rv:([\w\.]+)\).+firefox/i
+            // Firefox Reality
+          ],
+          [VERSION, [NAME, FIREFOX + " Reality"]],
+          [
+            /ekiohf.+(flow)\/([\w\.]+)/i,
+            // Flow
+            /(swiftfox)/i,
+            // Swiftfox
+            /(icedragon|iceweasel|camino|chimera|fennec|maemo browser|minimo|conkeror|klar)[\/ ]?([\w\.\+]+)/i,
+            // IceDragon/Iceweasel/Camino/Chimera/Fennec/Maemo/Minimo/Conkeror/Klar
+            /(seamonkey|k-meleon|icecat|iceape|firebird|phoenix|palemoon|basilisk|waterfox)\/([-\w\.]+)$/i,
+            // Firefox/SeaMonkey/K-Meleon/IceCat/IceApe/Firebird/Phoenix
+            /(firefox)\/([\w\.]+)/i,
+            // Other Firefox-based
+            /(mozilla)\/([\w\.]+) .+rv\:.+gecko\/\d+/i,
+            // Mozilla
+            // Other
+            /(polaris|lynx|dillo|icab|doris|amaya|w3m|netsurf|sleipnir|obigo|mosaic|(?:go|ice|up)[\. ]?browser)[-\/ ]?v?([\w\.]+)/i,
+            // Polaris/Lynx/Dillo/iCab/Doris/Amaya/w3m/NetSurf/Sleipnir/Obigo/Mosaic/Go/ICE/UP.Browser
+            /(links) \(([\w\.]+)/i,
+            // Links
+            /panasonic;(viera)/i
+            // Panasonic Viera
+          ],
+          [NAME, VERSION],
+          [
+            /(cobalt)\/([\w\.]+)/i
+            // Cobalt
+          ],
+          [NAME, [VERSION, /master.|lts./, ""]]
+        ],
+        cpu: [
+          [
+            /(?:(amd|x(?:(?:86|64)[-_])?|wow|win)64)[;\)]/i
+            // AMD64 (x64)
+          ],
+          [[ARCHITECTURE, "amd64"]],
+          [
+            /(ia32(?=;))/i
+            // IA32 (quicktime)
+          ],
+          [[ARCHITECTURE, lowerize]],
+          [
+            /((?:i[346]|x)86)[;\)]/i
+            // IA32 (x86)
+          ],
+          [[ARCHITECTURE, "ia32"]],
+          [
+            /\b(aarch64|arm(v?8e?l?|_?64))\b/i
+            // ARM64
+          ],
+          [[ARCHITECTURE, "arm64"]],
+          [
+            /\b(arm(?:v[67])?ht?n?[fl]p?)\b/i
+            // ARMHF
+          ],
+          [[ARCHITECTURE, "armhf"]],
+          [
+            // PocketPC mistakenly identified as PowerPC
+            /windows (ce|mobile); ppc;/i
+          ],
+          [[ARCHITECTURE, "arm"]],
+          [
+            /((?:ppc|powerpc)(?:64)?)(?: mac|;|\))/i
+            // PowerPC
+          ],
+          [[ARCHITECTURE, /ower/, EMPTY, lowerize]],
+          [
+            /(sun4\w)[;\)]/i
+            // SPARC
+          ],
+          [[ARCHITECTURE, "sparc"]],
+          [
+            /((?:avr32|ia64(?=;))|68k(?=\))|\barm(?=v(?:[1-7]|[5-7]1)l?|;|eabi)|(?=atmel )avr|(?:irix|mips|sparc)(?:64)?\b|pa-risc)/i
+            // IA64, 68K, ARM/64, AVR/32, IRIX/64, MIPS/64, SPARC/64, PA-RISC
+          ],
+          [[ARCHITECTURE, lowerize]]
+        ],
+        device: [
+          [
+            //////////////////////////
+            // MOBILES & TABLETS
+            /////////////////////////
+            // Samsung
+            /\b(sch-i[89]0\d|shw-m380s|sm-[ptx]\w{2,4}|gt-[pn]\d{2,4}|sgh-t8[56]9|nexus 10)/i
+          ],
+          [MODEL, [VENDOR, SAMSUNG], [TYPE2, TABLET]],
+          [
+            /\b((?:s[cgp]h|gt|sm)-\w+|sc[g-]?[\d]+a?|galaxy nexus)/i,
+            /samsung[- ]([-\w]+)/i,
+            /sec-(sgh\w+)/i
+          ],
+          [MODEL, [VENDOR, SAMSUNG], [TYPE2, MOBILE]],
+          [
+            // Apple
+            /(?:\/|\()(ip(?:hone|od)[\w, ]*)(?:\/|;)/i
+            // iPod/iPhone
+          ],
+          [MODEL, [VENDOR, APPLE], [TYPE2, MOBILE]],
+          [
+            /\((ipad);[-\w\),; ]+apple/i,
+            // iPad
+            /applecoremedia\/[\w\.]+ \((ipad)/i,
+            /\b(ipad)\d\d?,\d\d?[;\]].+ios/i
+          ],
+          [MODEL, [VENDOR, APPLE], [TYPE2, TABLET]],
+          [
+            /(macintosh);/i
+          ],
+          [MODEL, [VENDOR, APPLE]],
+          [
+            // Sharp
+            /\b(sh-?[altvz]?\d\d[a-ekm]?)/i
+          ],
+          [MODEL, [VENDOR, SHARP], [TYPE2, MOBILE]],
+          [
+            // Huawei
+            /\b((?:ag[rs][23]?|bah2?|sht?|btv)-a?[lw]\d{2})\b(?!.+d\/s)/i
+          ],
+          [MODEL, [VENDOR, HUAWEI], [TYPE2, TABLET]],
+          [
+            /(?:huawei|honor)([-\w ]+)[;\)]/i,
+            /\b(nexus 6p|\w{2,4}e?-[atu]?[ln][\dx][012359c][adn]?)\b(?!.+d\/s)/i
+          ],
+          [MODEL, [VENDOR, HUAWEI], [TYPE2, MOBILE]],
+          [
+            // Xiaomi
+            /\b(poco[\w ]+|m2\d{3}j\d\d[a-z]{2})(?: bui|\))/i,
+            // Xiaomi POCO
+            /\b; (\w+) build\/hm\1/i,
+            // Xiaomi Hongmi 'numeric' models
+            /\b(hm[-_ ]?note?[_ ]?(?:\d\w)?) bui/i,
+            // Xiaomi Hongmi
+            /\b(redmi[\-_ ]?(?:note|k)?[\w_ ]+)(?: bui|\))/i,
+            // Xiaomi Redmi
+            /oid[^\)]+; (m?[12][0-389][01]\w{3,6}[c-y])( bui|; wv|\))/i,
+            // Xiaomi Redmi 'numeric' models
+            /\b(mi[-_ ]?(?:a\d|one|one[_ ]plus|note lte|max|cc)?[_ ]?(?:\d?\w?)[_ ]?(?:plus|se|lite)?)(?: bui|\))/i
+            // Xiaomi Mi
+          ],
+          [[MODEL, /_/g, " "], [VENDOR, XIAOMI], [TYPE2, MOBILE]],
+          [
+            /oid[^\)]+; (2\d{4}(283|rpbf)[cgl])( bui|\))/i,
+            // Redmi Pad
+            /\b(mi[-_ ]?(?:pad)(?:[\w_ ]+))(?: bui|\))/i
+            // Mi Pad tablets
+          ],
+          [[MODEL, /_/g, " "], [VENDOR, XIAOMI], [TYPE2, TABLET]],
+          [
+            // OPPO
+            /; (\w+) bui.+ oppo/i,
+            /\b(cph[12]\d{3}|p(?:af|c[al]|d\w|e[ar])[mt]\d0|x9007|a101op)\b/i
+          ],
+          [MODEL, [VENDOR, "OPPO"], [TYPE2, MOBILE]],
+          [
+            // Vivo
+            /vivo (\w+)(?: bui|\))/i,
+            /\b(v[12]\d{3}\w?[at])(?: bui|;)/i
+          ],
+          [MODEL, [VENDOR, "Vivo"], [TYPE2, MOBILE]],
+          [
+            // Realme
+            /\b(rmx[1-3]\d{3})(?: bui|;|\))/i
+          ],
+          [MODEL, [VENDOR, "Realme"], [TYPE2, MOBILE]],
+          [
+            // Motorola
+            /\b(milestone|droid(?:[2-4x]| (?:bionic|x2|pro|razr))?:?( 4g)?)\b[\w ]+build\//i,
+            /\bmot(?:orola)?[- ](\w*)/i,
+            /((?:moto[\w\(\) ]+|xt\d{3,4}|nexus 6)(?= bui|\)))/i
+          ],
+          [MODEL, [VENDOR, MOTOROLA], [TYPE2, MOBILE]],
+          [
+            /\b(mz60\d|xoom[2 ]{0,2}) build\//i
+          ],
+          [MODEL, [VENDOR, MOTOROLA], [TYPE2, TABLET]],
+          [
+            // LG
+            /((?=lg)?[vl]k\-?\d{3}) bui| 3\.[-\w; ]{10}lg?-([06cv9]{3,4})/i
+          ],
+          [MODEL, [VENDOR, LG], [TYPE2, TABLET]],
+          [
+            /(lm(?:-?f100[nv]?|-[\w\.]+)(?= bui|\))|nexus [45])/i,
+            /\blg[-e;\/ ]+((?!browser|netcast|android tv)\w+)/i,
+            /\blg-?([\d\w]+) bui/i
+          ],
+          [MODEL, [VENDOR, LG], [TYPE2, MOBILE]],
+          [
+            // Lenovo
+            /(ideatab[-\w ]+)/i,
+            /lenovo ?(s[56]000[-\w]+|tab(?:[\w ]+)|yt[-\d\w]{6}|tb[-\d\w]{6})/i
+          ],
+          [MODEL, [VENDOR, "Lenovo"], [TYPE2, TABLET]],
+          [
+            // Nokia
+            /(?:maemo|nokia).*(n900|lumia \d+)/i,
+            /nokia[-_ ]?([-\w\.]*)/i
+          ],
+          [[MODEL, /_/g, " "], [VENDOR, "Nokia"], [TYPE2, MOBILE]],
+          [
+            // Google
+            /(pixel c)\b/i
+            // Google Pixel C
+          ],
+          [MODEL, [VENDOR, GOOGLE], [TYPE2, TABLET]],
+          [
+            /droid.+; (pixel[\daxl ]{0,6})(?: bui|\))/i
+            // Google Pixel
+          ],
+          [MODEL, [VENDOR, GOOGLE], [TYPE2, MOBILE]],
+          [
+            // Sony
+            /droid.+ (a?\d[0-2]{2}so|[c-g]\d{4}|so[-gl]\w+|xq-a\w[4-7][12])(?= bui|\).+chrome\/(?![1-6]{0,1}\d\.))/i
+          ],
+          [MODEL, [VENDOR, SONY], [TYPE2, MOBILE]],
+          [
+            /sony tablet [ps]/i,
+            /\b(?:sony)?sgp\w+(?: bui|\))/i
+          ],
+          [[MODEL, "Xperia Tablet"], [VENDOR, SONY], [TYPE2, TABLET]],
+          [
+            // OnePlus
+            / (kb2005|in20[12]5|be20[12][59])\b/i,
+            /(?:one)?(?:plus)? (a\d0\d\d)(?: b|\))/i
+          ],
+          [MODEL, [VENDOR, "OnePlus"], [TYPE2, MOBILE]],
+          [
+            // Amazon
+            /(alexa)webm/i,
+            /(kf[a-z]{2}wi|aeo[c-r]{2})( bui|\))/i,
+            // Kindle Fire without Silk / Echo Show
+            /(kf[a-z]+)( bui|\)).+silk\//i
+            // Kindle Fire HD
+          ],
+          [MODEL, [VENDOR, AMAZON], [TYPE2, TABLET]],
+          [
+            /((?:sd|kf)[0349hijorstuw]+)( bui|\)).+silk\//i
+            // Fire Phone
+          ],
+          [[MODEL, /(.+)/g, "Fire Phone $1"], [VENDOR, AMAZON], [TYPE2, MOBILE]],
+          [
+            // BlackBerry
+            /(playbook);[-\w\),; ]+(rim)/i
+            // BlackBerry PlayBook
+          ],
+          [MODEL, VENDOR, [TYPE2, TABLET]],
+          [
+            /\b((?:bb[a-f]|st[hv])100-\d)/i,
+            /\(bb10; (\w+)/i
+            // BlackBerry 10
+          ],
+          [MODEL, [VENDOR, BLACKBERRY], [TYPE2, MOBILE]],
+          [
+            // Asus
+            /(?:\b|asus_)(transfo[prime ]{4,10} \w+|eeepc|slider \w+|nexus 7|padfone|p00[cj])/i
+          ],
+          [MODEL, [VENDOR, ASUS], [TYPE2, TABLET]],
+          [
+            / (z[bes]6[027][012][km][ls]|zenfone \d\w?)\b/i
+          ],
+          [MODEL, [VENDOR, ASUS], [TYPE2, MOBILE]],
+          [
+            // HTC
+            /(nexus 9)/i
+            // HTC Nexus 9
+          ],
+          [MODEL, [VENDOR, "HTC"], [TYPE2, TABLET]],
+          [
+            /(htc)[-;_ ]{1,2}([\w ]+(?=\)| bui)|\w+)/i,
+            // HTC
+            // ZTE
+            /(zte)[- ]([\w ]+?)(?: bui|\/|\))/i,
+            /(alcatel|geeksphone|nexian|panasonic(?!(?:;|\.))|sony(?!-bra))[-_ ]?([-\w]*)/i
+            // Alcatel/GeeksPhone/Nexian/Panasonic/Sony
+          ],
+          [VENDOR, [MODEL, /_/g, " "], [TYPE2, MOBILE]],
+          [
+            // Acer
+            /droid.+; ([ab][1-7]-?[0178a]\d\d?)/i
+          ],
+          [MODEL, [VENDOR, "Acer"], [TYPE2, TABLET]],
+          [
+            // Meizu
+            /droid.+; (m[1-5] note) bui/i,
+            /\bmz-([-\w]{2,})/i
+          ],
+          [MODEL, [VENDOR, "Meizu"], [TYPE2, MOBILE]],
+          [
+            // Ulefone
+            /; ((?:power )?armor(?:[\w ]{0,8}))(?: bui|\))/i
+          ],
+          [MODEL, [VENDOR, "Ulefone"], [TYPE2, MOBILE]],
+          [
+            // MIXED
+            /(blackberry|benq|palm(?=\-)|sonyericsson|acer|asus|dell|meizu|motorola|polytron|infinix|tecno)[-_ ]?([-\w]*)/i,
+            // BlackBerry/BenQ/Palm/Sony-Ericsson/Acer/Asus/Dell/Meizu/Motorola/Polytron
+            /(hp) ([\w ]+\w)/i,
+            // HP iPAQ
+            /(asus)-?(\w+)/i,
+            // Asus
+            /(microsoft); (lumia[\w ]+)/i,
+            // Microsoft Lumia
+            /(lenovo)[-_ ]?([-\w]+)/i,
+            // Lenovo
+            /(jolla)/i,
+            // Jolla
+            /(oppo) ?([\w ]+) bui/i
+            // OPPO
+          ],
+          [VENDOR, MODEL, [TYPE2, MOBILE]],
+          [
+            /(kobo)\s(ereader|touch)/i,
+            // Kobo
+            /(archos) (gamepad2?)/i,
+            // Archos
+            /(hp).+(touchpad(?!.+tablet)|tablet)/i,
+            // HP TouchPad
+            /(kindle)\/([\w\.]+)/i,
+            // Kindle
+            /(nook)[\w ]+build\/(\w+)/i,
+            // Nook
+            /(dell) (strea[kpr\d ]*[\dko])/i,
+            // Dell Streak
+            /(le[- ]+pan)[- ]+(\w{1,9}) bui/i,
+            // Le Pan Tablets
+            /(trinity)[- ]*(t\d{3}) bui/i,
+            // Trinity Tablets
+            /(gigaset)[- ]+(q\w{1,9}) bui/i,
+            // Gigaset Tablets
+            /(vodafone) ([\w ]+)(?:\)| bui)/i
+            // Vodafone
+          ],
+          [VENDOR, MODEL, [TYPE2, TABLET]],
+          [
+            /(surface duo)/i
+            // Surface Duo
+          ],
+          [MODEL, [VENDOR, MICROSOFT], [TYPE2, TABLET]],
+          [
+            /droid [\d\.]+; (fp\du?)(?: b|\))/i
+            // Fairphone
+          ],
+          [MODEL, [VENDOR, "Fairphone"], [TYPE2, MOBILE]],
+          [
+            /(u304aa)/i
+            // AT&T
+          ],
+          [MODEL, [VENDOR, "AT&T"], [TYPE2, MOBILE]],
+          [
+            /\bsie-(\w*)/i
+            // Siemens
+          ],
+          [MODEL, [VENDOR, "Siemens"], [TYPE2, MOBILE]],
+          [
+            /\b(rct\w+) b/i
+            // RCA Tablets
+          ],
+          [MODEL, [VENDOR, "RCA"], [TYPE2, TABLET]],
+          [
+            /\b(venue[\d ]{2,7}) b/i
+            // Dell Venue Tablets
+          ],
+          [MODEL, [VENDOR, "Dell"], [TYPE2, TABLET]],
+          [
+            /\b(q(?:mv|ta)\w+) b/i
+            // Verizon Tablet
+          ],
+          [MODEL, [VENDOR, "Verizon"], [TYPE2, TABLET]],
+          [
+            /\b(?:barnes[& ]+noble |bn[rt])([\w\+ ]*) b/i
+            // Barnes & Noble Tablet
+          ],
+          [MODEL, [VENDOR, "Barnes & Noble"], [TYPE2, TABLET]],
+          [
+            /\b(tm\d{3}\w+) b/i
+          ],
+          [MODEL, [VENDOR, "NuVision"], [TYPE2, TABLET]],
+          [
+            /\b(k88) b/i
+            // ZTE K Series Tablet
+          ],
+          [MODEL, [VENDOR, "ZTE"], [TYPE2, TABLET]],
+          [
+            /\b(nx\d{3}j) b/i
+            // ZTE Nubia
+          ],
+          [MODEL, [VENDOR, "ZTE"], [TYPE2, MOBILE]],
+          [
+            /\b(gen\d{3}) b.+49h/i
+            // Swiss GEN Mobile
+          ],
+          [MODEL, [VENDOR, "Swiss"], [TYPE2, MOBILE]],
+          [
+            /\b(zur\d{3}) b/i
+            // Swiss ZUR Tablet
+          ],
+          [MODEL, [VENDOR, "Swiss"], [TYPE2, TABLET]],
+          [
+            /\b((zeki)?tb.*\b) b/i
+            // Zeki Tablets
+          ],
+          [MODEL, [VENDOR, "Zeki"], [TYPE2, TABLET]],
+          [
+            /\b([yr]\d{2}) b/i,
+            /\b(dragon[- ]+touch |dt)(\w{5}) b/i
+            // Dragon Touch Tablet
+          ],
+          [[VENDOR, "Dragon Touch"], MODEL, [TYPE2, TABLET]],
+          [
+            /\b(ns-?\w{0,9}) b/i
+            // Insignia Tablets
+          ],
+          [MODEL, [VENDOR, "Insignia"], [TYPE2, TABLET]],
+          [
+            /\b((nxa|next)-?\w{0,9}) b/i
+            // NextBook Tablets
+          ],
+          [MODEL, [VENDOR, "NextBook"], [TYPE2, TABLET]],
+          [
+            /\b(xtreme\_)?(v(1[045]|2[015]|[3469]0|7[05])) b/i
+            // Voice Xtreme Phones
+          ],
+          [[VENDOR, "Voice"], MODEL, [TYPE2, MOBILE]],
+          [
+            /\b(lvtel\-)?(v1[12]) b/i
+            // LvTel Phones
+          ],
+          [[VENDOR, "LvTel"], MODEL, [TYPE2, MOBILE]],
+          [
+            /\b(ph-1) /i
+            // Essential PH-1
+          ],
+          [MODEL, [VENDOR, "Essential"], [TYPE2, MOBILE]],
+          [
+            /\b(v(100md|700na|7011|917g).*\b) b/i
+            // Envizen Tablets
+          ],
+          [MODEL, [VENDOR, "Envizen"], [TYPE2, TABLET]],
+          [
+            /\b(trio[-\w\. ]+) b/i
+            // MachSpeed Tablets
+          ],
+          [MODEL, [VENDOR, "MachSpeed"], [TYPE2, TABLET]],
+          [
+            /\btu_(1491) b/i
+            // Rotor Tablets
+          ],
+          [MODEL, [VENDOR, "Rotor"], [TYPE2, TABLET]],
+          [
+            /(shield[\w ]+) b/i
+            // Nvidia Shield Tablets
+          ],
+          [MODEL, [VENDOR, "Nvidia"], [TYPE2, TABLET]],
+          [
+            /(sprint) (\w+)/i
+            // Sprint Phones
+          ],
+          [VENDOR, MODEL, [TYPE2, MOBILE]],
+          [
+            /(kin\.[onetw]{3})/i
+            // Microsoft Kin
+          ],
+          [[MODEL, /\./g, " "], [VENDOR, MICROSOFT], [TYPE2, MOBILE]],
+          [
+            /droid.+; (cc6666?|et5[16]|mc[239][23]x?|vc8[03]x?)\)/i
+            // Zebra
+          ],
+          [MODEL, [VENDOR, ZEBRA], [TYPE2, TABLET]],
+          [
+            /droid.+; (ec30|ps20|tc[2-8]\d[kx])\)/i
+          ],
+          [MODEL, [VENDOR, ZEBRA], [TYPE2, MOBILE]],
+          [
+            ///////////////////
+            // SMARTTVS
+            ///////////////////
+            /smart-tv.+(samsung)/i
+            // Samsung
+          ],
+          [VENDOR, [TYPE2, SMARTTV]],
+          [
+            /hbbtv.+maple;(\d+)/i
+          ],
+          [[MODEL, /^/, "SmartTV"], [VENDOR, SAMSUNG], [TYPE2, SMARTTV]],
+          [
+            /(nux; netcast.+smarttv|lg (netcast\.tv-201\d|android tv))/i
+            // LG SmartTV
+          ],
+          [[VENDOR, LG], [TYPE2, SMARTTV]],
+          [
+            /(apple) ?tv/i
+            // Apple TV
+          ],
+          [VENDOR, [MODEL, APPLE + " TV"], [TYPE2, SMARTTV]],
+          [
+            /crkey/i
+            // Google Chromecast
+          ],
+          [[MODEL, CHROME + "cast"], [VENDOR, GOOGLE], [TYPE2, SMARTTV]],
+          [
+            /droid.+aft(\w+)( bui|\))/i
+            // Fire TV
+          ],
+          [MODEL, [VENDOR, AMAZON], [TYPE2, SMARTTV]],
+          [
+            /\(dtv[\);].+(aquos)/i,
+            /(aquos-tv[\w ]+)\)/i
+            // Sharp
+          ],
+          [MODEL, [VENDOR, SHARP], [TYPE2, SMARTTV]],
+          [
+            /(bravia[\w ]+)( bui|\))/i
+            // Sony
+          ],
+          [MODEL, [VENDOR, SONY], [TYPE2, SMARTTV]],
+          [
+            /(mitv-\w{5}) bui/i
+            // Xiaomi
+          ],
+          [MODEL, [VENDOR, XIAOMI], [TYPE2, SMARTTV]],
+          [
+            /Hbbtv.*(technisat) (.*);/i
+            // TechniSAT
+          ],
+          [VENDOR, MODEL, [TYPE2, SMARTTV]],
+          [
+            /\b(roku)[\dx]*[\)\/]((?:dvp-)?[\d\.]*)/i,
+            // Roku
+            /hbbtv\/\d+\.\d+\.\d+ +\([\w\+ ]*; *([\w\d][^;]*);([^;]*)/i
+            // HbbTV devices
+          ],
+          [[VENDOR, trim], [MODEL, trim], [TYPE2, SMARTTV]],
+          [
+            /\b(android tv|smart[- ]?tv|opera tv|tv; rv:)\b/i
+            // SmartTV from Unidentified Vendors
+          ],
+          [[TYPE2, SMARTTV]],
+          [
+            ///////////////////
+            // CONSOLES
+            ///////////////////
+            /(ouya)/i,
+            // Ouya
+            /(nintendo) ([wids3utch]+)/i
+            // Nintendo
+          ],
+          [VENDOR, MODEL, [TYPE2, CONSOLE]],
+          [
+            /droid.+; (shield) bui/i
+            // Nvidia
+          ],
+          [MODEL, [VENDOR, "Nvidia"], [TYPE2, CONSOLE]],
+          [
+            /(playstation [345portablevi]+)/i
+            // Playstation
+          ],
+          [MODEL, [VENDOR, SONY], [TYPE2, CONSOLE]],
+          [
+            /\b(xbox(?: one)?(?!; xbox))[\); ]/i
+            // Microsoft Xbox
+          ],
+          [MODEL, [VENDOR, MICROSOFT], [TYPE2, CONSOLE]],
+          [
+            ///////////////////
+            // WEARABLES
+            ///////////////////
+            /((pebble))app/i
+            // Pebble
+          ],
+          [VENDOR, MODEL, [TYPE2, WEARABLE]],
+          [
+            /(watch)(?: ?os[,\/]|\d,\d\/)[\d\.]+/i
+            // Apple Watch
+          ],
+          [MODEL, [VENDOR, APPLE], [TYPE2, WEARABLE]],
+          [
+            /droid.+; (glass) \d/i
+            // Google Glass
+          ],
+          [MODEL, [VENDOR, GOOGLE], [TYPE2, WEARABLE]],
+          [
+            /droid.+; (wt63?0{2,3})\)/i
+          ],
+          [MODEL, [VENDOR, ZEBRA], [TYPE2, WEARABLE]],
+          [
+            /(quest( 2| pro)?)/i
+            // Oculus Quest
+          ],
+          [MODEL, [VENDOR, FACEBOOK], [TYPE2, WEARABLE]],
+          [
+            ///////////////////
+            // EMBEDDED
+            ///////////////////
+            /(tesla)(?: qtcarbrowser|\/[-\w\.]+)/i
+            // Tesla
+          ],
+          [VENDOR, [TYPE2, EMBEDDED]],
+          [
+            /(aeobc)\b/i
+            // Echo Dot
+          ],
+          [MODEL, [VENDOR, AMAZON], [TYPE2, EMBEDDED]],
+          [
+            ////////////////////
+            // MIXED (GENERIC)
+            ///////////////////
+            /droid .+?; ([^;]+?)(?: bui|; wv\)|\) applew).+? mobile safari/i
+            // Android Phones from Unidentified Vendors
+          ],
+          [MODEL, [TYPE2, MOBILE]],
+          [
+            /droid .+?; ([^;]+?)(?: bui|\) applew).+?(?! mobile) safari/i
+            // Android Tablets from Unidentified Vendors
+          ],
+          [MODEL, [TYPE2, TABLET]],
+          [
+            /\b((tablet|tab)[;\/]|focus\/\d(?!.+mobile))/i
+            // Unidentifiable Tablet
+          ],
+          [[TYPE2, TABLET]],
+          [
+            /(phone|mobile(?:[;\/]| [ \w\/\.]*safari)|pda(?=.+windows ce))/i
+            // Unidentifiable Mobile
+          ],
+          [[TYPE2, MOBILE]],
+          [
+            /(android[-\w\. ]{0,9});.+buil/i
+            // Generic Android Device
+          ],
+          [MODEL, [VENDOR, "Generic"]]
+        ],
+        engine: [
+          [
+            /windows.+ edge\/([\w\.]+)/i
+            // EdgeHTML
+          ],
+          [VERSION, [NAME, EDGE + "HTML"]],
+          [
+            /webkit\/537\.36.+chrome\/(?!27)([\w\.]+)/i
+            // Blink
+          ],
+          [VERSION, [NAME, "Blink"]],
+          [
+            /(presto)\/([\w\.]+)/i,
+            // Presto
+            /(webkit|trident|netfront|netsurf|amaya|lynx|w3m|goanna)\/([\w\.]+)/i,
+            // WebKit/Trident/NetFront/NetSurf/Amaya/Lynx/w3m/Goanna
+            /ekioh(flow)\/([\w\.]+)/i,
+            // Flow
+            /(khtml|tasman|links)[\/ ]\(?([\w\.]+)/i,
+            // KHTML/Tasman/Links
+            /(icab)[\/ ]([23]\.[\d\.]+)/i,
+            // iCab
+            /\b(libweb)/i
+          ],
+          [NAME, VERSION],
+          [
+            /rv\:([\w\.]{1,9})\b.+(gecko)/i
+            // Gecko
+          ],
+          [VERSION, NAME]
+        ],
+        os: [
+          [
+            // Windows
+            /microsoft (windows) (vista|xp)/i
+            // Windows (iTunes)
+          ],
+          [NAME, VERSION],
+          [
+            /(windows (?:phone(?: os)?|mobile))[\/ ]?([\d\.\w ]*)/i
+            // Windows Phone
+          ],
+          [NAME, [VERSION, strMapper, windowsVersionMap]],
+          [
+            /windows nt 6\.2; (arm)/i,
+            // Windows RT
+            /windows[\/ ]?([ntce\d\. ]+\w)(?!.+xbox)/i,
+            /(?:win(?=3|9|n)|win 9x )([nt\d\.]+)/i
+          ],
+          [[VERSION, strMapper, windowsVersionMap], [NAME, "Windows"]],
+          [
+            // iOS/macOS
+            /ip[honead]{2,4}\b(?:.*os ([\w]+) like mac|; opera)/i,
+            // iOS
+            /(?:ios;fbsv\/|iphone.+ios[\/ ])([\d\.]+)/i,
+            /cfnetwork\/.+darwin/i
+          ],
+          [[VERSION, /_/g, "."], [NAME, "iOS"]],
+          [
+            /(mac os x) ?([\w\. ]*)/i,
+            /(macintosh|mac_powerpc\b)(?!.+haiku)/i
+            // Mac OS
+          ],
+          [[NAME, MAC_OS], [VERSION, /_/g, "."]],
+          [
+            // Mobile OSes
+            /droid ([\w\.]+)\b.+(android[- ]x86|harmonyos)/i
+            // Android-x86/HarmonyOS
+          ],
+          [VERSION, NAME],
+          [
+            // Android/WebOS/QNX/Bada/RIM/Maemo/MeeGo/Sailfish OS
+            /(android|webos|qnx|bada|rim tablet os|maemo|meego|sailfish)[-\/ ]?([\w\.]*)/i,
+            /(blackberry)\w*\/([\w\.]*)/i,
+            // Blackberry
+            /(tizen|kaios)[\/ ]([\w\.]+)/i,
+            // Tizen/KaiOS
+            /\((series40);/i
+            // Series 40
+          ],
+          [NAME, VERSION],
+          [
+            /\(bb(10);/i
+            // BlackBerry 10
+          ],
+          [VERSION, [NAME, BLACKBERRY]],
+          [
+            /(?:symbian ?os|symbos|s60(?=;)|series60)[-\/ ]?([\w\.]*)/i
+            // Symbian
+          ],
+          [VERSION, [NAME, "Symbian"]],
+          [
+            /mozilla\/[\d\.]+ \((?:mobile|tablet|tv|mobile; [\w ]+); rv:.+ gecko\/([\w\.]+)/i
+            // Firefox OS
+          ],
+          [VERSION, [NAME, FIREFOX + " OS"]],
+          [
+            /web0s;.+rt(tv)/i,
+            /\b(?:hp)?wos(?:browser)?\/([\w\.]+)/i
+            // WebOS
+          ],
+          [VERSION, [NAME, "webOS"]],
+          [
+            /watch(?: ?os[,\/]|\d,\d\/)([\d\.]+)/i
+            // watchOS
+          ],
+          [VERSION, [NAME, "watchOS"]],
+          [
+            // Google Chromecast
+            /crkey\/([\d\.]+)/i
+            // Google Chromecast
+          ],
+          [VERSION, [NAME, CHROME + "cast"]],
+          [
+            /(cros) [\w]+(?:\)| ([\w\.]+)\b)/i
+            // Chromium OS
+          ],
+          [[NAME, CHROMIUM_OS], VERSION],
+          [
+            // Smart TVs
+            /panasonic;(viera)/i,
+            // Panasonic Viera
+            /(netrange)mmh/i,
+            // Netrange
+            /(nettv)\/(\d+\.[\w\.]+)/i,
+            // NetTV
+            // Console
+            /(nintendo|playstation) ([wids345portablevuch]+)/i,
+            // Nintendo/Playstation
+            /(xbox); +xbox ([^\);]+)/i,
+            // Microsoft Xbox (360, One, X, S, Series X, Series S)
+            // Other
+            /\b(joli|palm)\b ?(?:os)?\/?([\w\.]*)/i,
+            // Joli/Palm
+            /(mint)[\/\(\) ]?(\w*)/i,
+            // Mint
+            /(mageia|vectorlinux)[; ]/i,
+            // Mageia/VectorLinux
+            /([kxln]?ubuntu|debian|suse|opensuse|gentoo|arch(?= linux)|slackware|fedora|mandriva|centos|pclinuxos|red ?hat|zenwalk|linpus|raspbian|plan 9|minix|risc os|contiki|deepin|manjaro|elementary os|sabayon|linspire)(?: gnu\/linux)?(?: enterprise)?(?:[- ]linux)?(?:-gnu)?[-\/ ]?(?!chrom|package)([-\w\.]*)/i,
+            // Ubuntu/Debian/SUSE/Gentoo/Arch/Slackware/Fedora/Mandriva/CentOS/PCLinuxOS/RedHat/Zenwalk/Linpus/Raspbian/Plan9/Minix/RISCOS/Contiki/Deepin/Manjaro/elementary/Sabayon/Linspire
+            /(hurd|linux) ?([\w\.]*)/i,
+            // Hurd/Linux
+            /(gnu) ?([\w\.]*)/i,
+            // GNU
+            /\b([-frentopcghs]{0,5}bsd|dragonfly)[\/ ]?(?!amd|[ix346]{1,2}86)([\w\.]*)/i,
+            // FreeBSD/NetBSD/OpenBSD/PC-BSD/GhostBSD/DragonFly
+            /(haiku) (\w+)/i
+            // Haiku
+          ],
+          [NAME, VERSION],
+          [
+            /(sunos) ?([\w\.\d]*)/i
+            // Solaris
+          ],
+          [[NAME, "Solaris"], VERSION],
+          [
+            /((?:open)?solaris)[-\/ ]?([\w\.]*)/i,
+            // Solaris
+            /(aix) ((\d)(?=\.|\)| )[\w\.])*/i,
+            // AIX
+            /\b(beos|os\/2|amigaos|morphos|openvms|fuchsia|hp-ux|serenityos)/i,
+            // BeOS/OS2/AmigaOS/MorphOS/OpenVMS/Fuchsia/HP-UX/SerenityOS
+            /(unix) ?([\w\.]*)/i
+            // UNIX
+          ],
+          [NAME, VERSION]
+        ]
+      };
+      var UAParser2 = function(ua, extensions) {
+        if (typeof ua === OBJ_TYPE) {
+          extensions = ua;
+          ua = undefined2;
+        }
+        if (!(this instanceof UAParser2)) {
+          return new UAParser2(ua, extensions).getResult();
+        }
+        var _navigator = typeof window2 !== UNDEF_TYPE && window2.navigator ? window2.navigator : undefined2;
+        var _ua = ua || (_navigator && _navigator.userAgent ? _navigator.userAgent : EMPTY);
+        var _uach = _navigator && _navigator.userAgentData ? _navigator.userAgentData : undefined2;
+        var _rgxmap = extensions ? extend(regexes, extensions) : regexes;
+        var _isSelfNav = _navigator && _navigator.userAgent == _ua;
+        this.getBrowser = function() {
+          var _browser = {};
+          _browser[NAME] = undefined2;
+          _browser[VERSION] = undefined2;
+          rgxMapper.call(_browser, _ua, _rgxmap.browser);
+          _browser[MAJOR] = majorize(_browser[VERSION]);
+          if (_isSelfNav && _navigator && _navigator.brave && typeof _navigator.brave.isBrave == FUNC_TYPE) {
+            _browser[NAME] = "Brave";
+          }
+          return _browser;
+        };
+        this.getCPU = function() {
+          var _cpu = {};
+          _cpu[ARCHITECTURE] = undefined2;
+          rgxMapper.call(_cpu, _ua, _rgxmap.cpu);
+          return _cpu;
+        };
+        this.getDevice = function() {
+          var _device = {};
+          _device[VENDOR] = undefined2;
+          _device[MODEL] = undefined2;
+          _device[TYPE2] = undefined2;
+          rgxMapper.call(_device, _ua, _rgxmap.device);
+          if (_isSelfNav && !_device[TYPE2] && _uach && _uach.mobile) {
+            _device[TYPE2] = MOBILE;
+          }
+          if (_isSelfNav && _device[MODEL] == "Macintosh" && _navigator && typeof _navigator.standalone !== UNDEF_TYPE && _navigator.maxTouchPoints && _navigator.maxTouchPoints > 2) {
+            _device[MODEL] = "iPad";
+            _device[TYPE2] = TABLET;
+          }
+          return _device;
+        };
+        this.getEngine = function() {
+          var _engine = {};
+          _engine[NAME] = undefined2;
+          _engine[VERSION] = undefined2;
+          rgxMapper.call(_engine, _ua, _rgxmap.engine);
+          return _engine;
+        };
+        this.getOS = function() {
+          var _os = {};
+          _os[NAME] = undefined2;
+          _os[VERSION] = undefined2;
+          rgxMapper.call(_os, _ua, _rgxmap.os);
+          if (_isSelfNav && !_os[NAME] && _uach && _uach.platform != "Unknown") {
+            _os[NAME] = _uach.platform.replace(/chrome os/i, CHROMIUM_OS).replace(/macos/i, MAC_OS);
+          }
+          return _os;
+        };
+        this.getResult = function() {
+          return {
+            ua: this.getUA(),
+            browser: this.getBrowser(),
+            engine: this.getEngine(),
+            os: this.getOS(),
+            device: this.getDevice(),
+            cpu: this.getCPU()
+          };
+        };
+        this.getUA = function() {
+          return _ua;
+        };
+        this.setUA = function(ua2) {
+          _ua = typeof ua2 === STR_TYPE && ua2.length > UA_MAX_LENGTH ? trim(ua2, UA_MAX_LENGTH) : ua2;
+          return this;
+        };
+        this.setUA(_ua);
+        return this;
+      };
+      UAParser2.VERSION = LIBVERSION;
+      UAParser2.BROWSER = enumerize([NAME, VERSION, MAJOR]);
+      UAParser2.CPU = enumerize([ARCHITECTURE]);
+      UAParser2.DEVICE = enumerize([MODEL, VENDOR, TYPE2, CONSOLE, MOBILE, SMARTTV, TABLET, WEARABLE, EMBEDDED]);
+      UAParser2.ENGINE = UAParser2.OS = enumerize([NAME, VERSION]);
+      if (typeof exports !== UNDEF_TYPE) {
+        if (typeof module2 !== UNDEF_TYPE && module2.exports) {
+          exports = module2.exports = UAParser2;
+        }
+        exports.UAParser = UAParser2;
+      } else {
+        if (typeof define === FUNC_TYPE && define.amd) {
+          define(function() {
+            return UAParser2;
+          });
+        } else if (typeof window2 !== UNDEF_TYPE) {
+          window2.UAParser = UAParser2;
+        }
+      }
+      var $ = typeof window2 !== UNDEF_TYPE && (window2.jQuery || window2.Zepto);
+      if ($ && !$.ua) {
+        var parser = new UAParser2();
+        $.ua = parser.getResult();
+        $.ua.get = function() {
+          return parser.getUA();
+        };
+        $.ua.set = function(ua) {
+          parser.setUA(ua);
+          var result = parser.getResult();
+          for (var prop in result) {
+            $.ua[prop] = result[prop];
+          }
+        };
+      }
+    })(typeof window === "object" ? window : exports);
+  }
+});
+
 // ../../node_modules/use-debounce/dist/index.module.js
 var index_module_exports = {};
 __export(index_module_exports, {
@@ -44480,189 +45807,6 @@ var require_object_hash = __commonJS({
   }
 });
 
-// ../../node_modules/@measured/auto-frame-component/dist/index.js
-var require_dist = __commonJS({
-  "../../node_modules/@measured/auto-frame-component/dist/index.js"(exports, module2) {
-    "use strict";
-    init_react_import();
-    var __create2 = Object.create;
-    var __defProp2 = Object.defineProperty;
-    var __defProps2 = Object.defineProperties;
-    var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
-    var __getOwnPropDescs2 = Object.getOwnPropertyDescriptors;
-    var __getOwnPropNames2 = Object.getOwnPropertyNames;
-    var __getOwnPropSymbols2 = Object.getOwnPropertySymbols;
-    var __getProtoOf2 = Object.getPrototypeOf;
-    var __hasOwnProp2 = Object.prototype.hasOwnProperty;
-    var __propIsEnum2 = Object.prototype.propertyIsEnumerable;
-    var __defNormalProp2 = (obj, key, value) => key in obj ? __defProp2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-    var __spreadValues2 = (a2, b) => {
-      for (var prop in b || (b = {}))
-        if (__hasOwnProp2.call(b, prop))
-          __defNormalProp2(a2, prop, b[prop]);
-      if (__getOwnPropSymbols2)
-        for (var prop of __getOwnPropSymbols2(b)) {
-          if (__propIsEnum2.call(b, prop))
-            __defNormalProp2(a2, prop, b[prop]);
-        }
-      return a2;
-    };
-    var __spreadProps2 = (a2, b) => __defProps2(a2, __getOwnPropDescs2(b));
-    var __objRest2 = (source, exclude) => {
-      var target = {};
-      for (var prop in source)
-        if (__hasOwnProp2.call(source, prop) && exclude.indexOf(prop) < 0)
-          target[prop] = source[prop];
-      if (source != null && __getOwnPropSymbols2)
-        for (var prop of __getOwnPropSymbols2(source)) {
-          if (exclude.indexOf(prop) < 0 && __propIsEnum2.call(source, prop))
-            target[prop] = source[prop];
-        }
-      return target;
-    };
-    var __export2 = (target, all) => {
-      for (var name in all)
-        __defProp2(target, name, { get: all[name], enumerable: true });
-    };
-    var __copyProps2 = (to, from, except, desc) => {
-      if (from && typeof from === "object" || typeof from === "function") {
-        for (let key of __getOwnPropNames2(from))
-          if (!__hasOwnProp2.call(to, key) && key !== except)
-            __defProp2(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc2(from, key)) || desc.enumerable });
-      }
-      return to;
-    };
-    var __toESM2 = (mod, isNodeMode, target) => (target = mod != null ? __create2(__getProtoOf2(mod)) : {}, __copyProps2(
-      // If the importer is in node compatibility mode or this is not an ESM
-      // file that has been converted to a CommonJS file using a Babel-
-      // compatible transform (i.e. "__esModule" has not been set), then set
-      // "default" to the CommonJS "module.exports" for node compatibility.
-      isNodeMode || !mod || !mod.__esModule ? __defProp2(target, "default", { value: mod, enumerable: true }) : target,
-      mod
-    ));
-    var __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: true }), mod);
-    var auto_frame_component_exports = {};
-    __export2(auto_frame_component_exports, {
-      default: () => AutoFrameComponent_default
-    });
-    module2.exports = __toCommonJS2(auto_frame_component_exports);
-    var import_react13 = __toESM2(require("react"));
-    var import_react22 = __toESM2(require("react"));
-    var import_react_frame_component = __toESM2(require_lib());
-    var import_object_hash = __toESM2(require_object_hash());
-    var import_jsx_runtime8 = require("react/jsx-runtime");
-    var styleSelector = 'style, link[as="style"], link[rel="stylesheet"]';
-    var collectStyles = (doc) => {
-      const collected = [];
-      doc.head.querySelectorAll(styleSelector).forEach((style2) => {
-        collected.push(style2);
-      });
-      return collected;
-    };
-    var CopyHostStyles = ({
-      children,
-      debug = false,
-      onStylesLoaded = () => null
-    }) => {
-      const { document: doc, window: win } = (0, import_react_frame_component.useFrame)();
-      (0, import_react22.useLayoutEffect)(() => {
-        if (!win || !doc) {
-          return () => {
-          };
-        }
-        const elements = [];
-        const lookupEl = (el) => elements.findIndex((elementMap) => elementMap.original === el);
-        const addEl = (el, onLoad = () => {
-        }) => {
-          const index = lookupEl(el);
-          if (index > -1) {
-            if (debug)
-              console.log(
-                `Tried to add an element that was already mirrored. Updating instead...`
-              );
-            elements[index].mirror.innerText = el.innerText;
-            onLoad();
-            return;
-          }
-          const elHash = (0, import_object_hash.default)(el.outerHTML);
-          const existingHashes = collectStyles(doc).map(
-            (existingStyle) => (0, import_object_hash.default)(existingStyle.outerHTML)
-          );
-          if (existingHashes.indexOf(elHash) > -1) {
-            if (debug)
-              console.log(
-                `iframe already contains element that is being mirrored. Skipping...`
-              );
-            onLoad();
-            return;
-          }
-          const mirror = el.cloneNode(true);
-          mirror.onload = onLoad;
-          doc.head.append(mirror);
-          elements.push({ original: el, mirror });
-          if (debug)
-            console.log(`Added style node ${el.outerHTML}`);
-        };
-        const removeEl = (el) => {
-          const index = lookupEl(el);
-          if (index === -1) {
-            if (debug)
-              console.log(
-                `Tried to remove an element that did not exist. Skipping...`
-              );
-            return;
-          }
-          elements[index].mirror.remove();
-          if (debug)
-            console.log(`Removed style node ${el.outerHTML}`);
-        };
-        const observer = new MutationObserver((mutations) => {
-          mutations.forEach((mutation) => {
-            if (mutation.type === "childList") {
-              mutation.addedNodes.forEach((node) => {
-                if (node.nodeType === Node.TEXT_NODE || node.nodeType === Node.ELEMENT_NODE) {
-                  const el = node.nodeType === Node.TEXT_NODE ? node.parentElement : node;
-                  if (el && el.matches(styleSelector)) {
-                    addEl(el);
-                  }
-                }
-              });
-              mutation.removedNodes.forEach((node) => {
-                if (node.nodeType === Node.TEXT_NODE || node.nodeType === Node.ELEMENT_NODE) {
-                  const el = node.nodeType === Node.TEXT_NODE ? node.parentElement : node;
-                  if (el && el.matches(styleSelector)) {
-                    removeEl(el);
-                  }
-                }
-              });
-            }
-          });
-        });
-        const parentDocument = win.parent.document;
-        const collectedStyles = collectStyles(parentDocument);
-        let mountedCounter = 0;
-        collectedStyles.forEach((styleNode) => {
-          addEl(styleNode, () => {
-            mountedCounter += 1;
-            if (mountedCounter === collectedStyles.length) {
-              onStylesLoaded();
-            }
-          });
-        });
-        observer.observe(parentDocument.head, { childList: true, subtree: true });
-        return () => {
-          observer.disconnect();
-        };
-      }, []);
-      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_jsx_runtime8.Fragment, { children });
-    };
-    var AutoFrameComponent_default = import_react22.default.forwardRef(function(_a3, ref2) {
-      var _b = _a3, { children, debug, onStylesLoaded } = _b, props = __objRest2(_b, ["children", "debug", "onStylesLoaded"]);
-      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_frame_component.default, __spreadProps2(__spreadValues2({}, props), { ref: ref2, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CopyHostStyles, { debug, onStylesLoaded, children }) }));
-    });
-  }
-});
-
 // ../../node_modules/react-hotkeys-hook/dist/react-hotkeys-hook.esm.js
 var react_hotkeys_hook_esm_exports = {};
 __export(react_hotkeys_hook_esm_exports, {
@@ -45132,7 +46276,7 @@ var init_react_hotkeys_hook_esm = __esm({
 });
 
 // ../core/dist/index.js
-var require_dist2 = __commonJS({
+var require_dist = __commonJS({
   "../core/dist/index.js"(exports, module2) {
     "use strict";
     init_react_import();
@@ -53156,9 +54300,9 @@ var require_dist2 = __commonJS({
             if (typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== "undefined" && typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart === "function") {
               __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(new Error());
             }
-            var React210 = require("react");
+            var React32 = require("react");
             var Scheduler = require_scheduler2();
-            var ReactSharedInternals = React210.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
+            var ReactSharedInternals = React32.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
             var suppressWarning = false;
             function setSuppressWarning(newSuppressWarning) {
               {
@@ -53207,7 +54351,7 @@ var require_dist2 = __commonJS({
             var HostPortal = 4;
             var HostComponent = 5;
             var HostText = 6;
-            var Fragment17 = 7;
+            var Fragment18 = 7;
             var Mode = 8;
             var ContextConsumer = 9;
             var ContextProvider = 10;
@@ -54363,7 +55507,7 @@ var require_dist2 = __commonJS({
                   return "DehydratedFragment";
                 case ForwardRef:
                   return getWrappedName$1(type, type.render, "ForwardRef");
-                case Fragment17:
+                case Fragment18:
                   return "Fragment";
                 case HostComponent:
                   return type;
@@ -54763,7 +55907,7 @@ var require_dist2 = __commonJS({
               {
                 if (props.value == null) {
                   if (typeof props.children === "object" && props.children !== null) {
-                    React210.Children.forEach(props.children, function(child) {
+                    React32.Children.forEach(props.children, function(child) {
                       if (child == null) {
                         return;
                       }
@@ -63210,7 +64354,7 @@ var require_dist2 = __commonJS({
               }
             }
             var fakeInternalInstance = {};
-            var emptyRefsObject = new React210.Component().refs;
+            var emptyRefsObject = new React32.Component().refs;
             var didWarnAboutStateAssignmentForComponent;
             var didWarnAboutUninitializedState;
             var didWarnAboutGetSnapshotBeforeUpdateWithoutDidUpdate;
@@ -64034,7 +65178,7 @@ var require_dist2 = __commonJS({
                 }
               }
               function updateFragment2(returnFiber, current2, fragment, lanes, key) {
-                if (current2 === null || current2.tag !== Fragment17) {
+                if (current2 === null || current2.tag !== Fragment18) {
                   var created = createFiberFromFragment(fragment, returnFiber.mode, lanes, key);
                   created.return = returnFiber;
                   return created;
@@ -64437,7 +65581,7 @@ var require_dist2 = __commonJS({
                   if (child.key === key) {
                     var elementType = element.type;
                     if (elementType === REACT_FRAGMENT_TYPE) {
-                      if (child.tag === Fragment17) {
+                      if (child.tag === Fragment18) {
                         deleteRemainingChildren(returnFiber, child.sibling);
                         var existing = useFiber(child, element.props.children);
                         existing.return = returnFiber;
@@ -68612,7 +69756,7 @@ var require_dist2 = __commonJS({
                   var _resolvedProps2 = workInProgress2.elementType === type ? _unresolvedProps2 : resolveDefaultProps(type, _unresolvedProps2);
                   return updateForwardRef(current2, workInProgress2, type, _resolvedProps2, renderLanes2);
                 }
-                case Fragment17:
+                case Fragment18:
                   return updateFragment(current2, workInProgress2, renderLanes2);
                 case Mode:
                   return updateMode(current2, workInProgress2, renderLanes2);
@@ -68885,7 +70029,7 @@ var require_dist2 = __commonJS({
                 case SimpleMemoComponent:
                 case FunctionComponent:
                 case ForwardRef:
-                case Fragment17:
+                case Fragment18:
                 case Mode:
                 case Profiler:
                 case ContextConsumer:
@@ -73144,7 +74288,7 @@ var require_dist2 = __commonJS({
               return fiber;
             }
             function createFiberFromFragment(elements, mode, lanes, key) {
-              var fiber = createFiber(Fragment17, elements, key, mode);
+              var fiber = createFiber(Fragment18, elements, key, mode);
               fiber.lanes = lanes;
               return fiber;
             }
@@ -74400,9 +75544,10 @@ var require_dist2 = __commonJS({
       { width: 768, height: "auto", icon: "Tablet", label: "Medium" },
       { width: 1280, height: "auto", icon: "Monitor", label: "Large" }
     ];
+    var import_ua_parser_js2 = require_ua_parser();
     var import_jsx_runtime22 = require("react/jsx-runtime");
     var defaultAppState2 = {
-      data: { content: [], root: { props: { title: "" } } },
+      data: { content: [], root: { props: {} } },
       ui: {
         leftSideBarVisible: true,
         rightSideBarVisible: true,
@@ -74439,7 +75584,8 @@ var require_dist2 = __commonJS({
       setZoomConfig: () => null,
       status: "LOADING",
       setStatus: () => null,
-      iframe: {}
+      iframe: {},
+      safariFallbackMode: false
     };
     var appContext2 = (0, import_react32.createContext)(defaultContext2);
     var AppProvider = ({
@@ -74451,10 +75597,34 @@ var require_dist2 = __commonJS({
       (0, import_react32.useEffect)(() => {
         setStatus("MOUNTED");
       }, []);
+      const [safariFallbackMode, setSafariFallbackMode] = (0, import_react32.useState)(false);
+      (0, import_react32.useEffect)(() => {
+        var _a3, _b, _c;
+        const ua = new import_ua_parser_js2.UAParser(navigator.userAgent);
+        const { browser } = ua.getResult();
+        if (browser.name === "Safari" && (((_a3 = browser.version) == null ? void 0 : _a3.indexOf("17.2.")) || ((_b = browser.version) == null ? void 0 : _b.indexOf("17.3.")) || ((_c = browser.version) == null ? void 0 : _c.indexOf("17.4.")))) {
+          if (process.env.NODE_ENV !== "production" && value.iframe.enabled) {
+            console.warn(
+              `Detected Safari ${browser.version}, which contains a bug that prevents Puck DropZones from detecting a mouseover event within an iframe. This affects Safari versions 17.2, 17.3 and 17.4.
+
+Running in compatibility mode, which may have some DropZone side-effects. Alternatively, consider disabling iframes: https://puckeditor.com/docs/integrating-puck/viewports#opting-out-of-iframes.
+
+See https://github.com/measuredco/puck/issues/411 for more information. This message will not show in production.`
+            );
+          }
+          setSafariFallbackMode(true);
+        }
+      }, []);
       return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
         appContext2.Provider,
         {
-          value: __spreadProps2(__spreadValues2({}, value), { zoomConfig, setZoomConfig, status, setStatus }),
+          value: __spreadProps2(__spreadValues2({}, value), {
+            zoomConfig,
+            setZoomConfig,
+            status,
+            setStatus,
+            safariFallbackMode
+          }),
           children
         }
       );
@@ -75176,7 +76346,11 @@ var require_dist2 = __commonJS({
       let isEnabled = userWillDrag;
       if (userIsDragging) {
         if (draggingNewComponent) {
-          isEnabled = hoveringOverArea;
+          if (appContext22.safariFallbackMode) {
+            isEnabled = true;
+          } else {
+            isEnabled = hoveringOverArea;
+          }
         } else {
           isEnabled = draggingOverArea && hoveringOverZone;
         }
@@ -75471,7 +76645,7 @@ var require_dist2 = __commonJS({
       return el;
     };
     init_react_import2();
-    var import_react28 = require("react");
+    var import_react29 = require("react");
     init_react_import2();
     var import_react112 = require("react");
     init_react_import2();
@@ -76102,7 +77276,7 @@ var require_dist2 = __commonJS({
       const [componentState, setComponentState] = (0, import_react132.useState)({});
       const deferredSetStates = {};
       const setComponentLoading = (0, import_react132.useCallback)(
-        (id, loading, defer = 0) => {
+        (id, loading, defer2 = 0) => {
           if (deferredSetStates[id]) {
             clearTimeout(deferredSetStates[id]);
             delete deferredSetStates[id];
@@ -76112,7 +77286,7 @@ var require_dist2 = __commonJS({
               [id]: __spreadProps2(__spreadValues2({}, prev[id]), { loading })
             }));
             delete deferredSetStates[id];
-          }, defer);
+          }, defer2);
         },
         []
       );
@@ -76192,7 +77366,7 @@ var require_dist2 = __commonJS({
     var getClassName9 = get_class_name_factory_default2("MenuBar", styles_module_default7);
     var MenuBar = ({
       appState,
-      data = { content: [], root: { props: { title: "" } } },
+      data = { content: [], root: {} },
       dispatch,
       menuOpen = false,
       onPublish,
@@ -76902,7 +78076,7 @@ var require_dist2 = __commonJS({
                       onChange(e2.currentTarget.value);
                     },
                     disabled: readOnly,
-                    defaultChecked: value === option.value
+                    checked: value === option.value
                   }
                 ),
                 /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: getClassName14("radioInner"), children: option.label || option.value })
@@ -76942,7 +78116,7 @@ var require_dist2 = __commonJS({
               disabled: readOnly,
               onChange: (e2) => {
                 if (e2.currentTarget.value === "true" || e2.currentTarget.value === "false") {
-                  onChange(Boolean(e2.currentTarget.value));
+                  onChange(JSON.parse(e2.currentTarget.value));
                   return;
                 }
                 onChange(e2.currentTarget.value);
@@ -77434,15 +78608,212 @@ var require_dist2 = __commonJS({
       return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Wrapper, { children: componentList ? componentList : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(ComponentList, { id: "all" }) });
     };
     init_react_import2();
-    var import_react222 = require("react");
-    var import_auto_frame_component = __toESM2(require_dist());
+    var import_react23 = require("react");
     init_react_import2();
-    var styles_module_default16 = { "PuckPreview": "_PuckPreview_rxwlr_1", "PuckPreview-frame": "_PuckPreview-frame_rxwlr_5" };
+    var import_react222 = __toESM2(require("react"));
+    var import_react_frame_component = __toESM2(require_lib());
+    var import_object_hash = __toESM2(require_object_hash());
     var import_jsx_runtime29 = require("react/jsx-runtime");
+    var styleSelector = 'style, link[rel="stylesheet"]';
+    var collectStyles = (doc) => {
+      const collected = [];
+      doc.head.querySelectorAll(styleSelector).forEach((style2) => {
+        collected.push(style2);
+      });
+      return collected;
+    };
+    var getStyleSheet = (el) => {
+      return Array.from(document.styleSheets).find((ss) => {
+        const ownerNode = ss.ownerNode;
+        return ownerNode.href === el.href;
+      });
+    };
+    var getStyles2 = (styleSheet) => {
+      if (styleSheet) {
+        try {
+          return [...styleSheet.cssRules].map((rule) => rule.cssText).join("");
+        } catch (e2) {
+          console.warn(
+            "Access to stylesheet %s is denied. Ignoring\u2026",
+            styleSheet.href
+          );
+        }
+      }
+      return "";
+    };
+    var defer = (fn) => setTimeout(fn, 0);
+    var CopyHostStyles = ({
+      children,
+      debug = false,
+      onStylesLoaded = () => null
+    }) => {
+      const { document: doc, window: win } = (0, import_react_frame_component.useFrame)();
+      (0, import_react222.useEffect)(() => {
+        if (!win || !doc) {
+          return () => {
+          };
+        }
+        let elements = [];
+        const hashes = {};
+        const lookupEl = (el) => elements.findIndex((elementMap) => elementMap.original === el);
+        const mirrorEl = (el, inlineStyles = false) => __async2(void 0, null, function* () {
+          let mirror;
+          if (el.nodeName === "LINK" && inlineStyles) {
+            mirror = document.createElement("style");
+            mirror.type = "text/css";
+            let styleSheet = getStyleSheet(el);
+            if (!styleSheet) {
+              yield new Promise((resolve) => {
+                const fn = () => {
+                  resolve();
+                  el.removeEventListener("load", fn);
+                };
+                el.addEventListener("load", fn);
+              });
+              styleSheet = getStyleSheet(el);
+            }
+            const styles = getStyles2(styleSheet);
+            if (!styles) {
+              if (debug) {
+                console.warn(
+                  `Tried to load styles for link element, but couldn't find them. Skipping...`
+                );
+              }
+              return;
+            }
+            mirror.innerHTML = styles;
+            mirror.setAttribute("data-href", el.getAttribute("href"));
+          } else {
+            mirror = el.cloneNode(true);
+          }
+          return mirror;
+        });
+        const addEl = (el) => __async2(void 0, null, function* () {
+          const index = lookupEl(el);
+          if (index > -1) {
+            if (debug)
+              console.log(
+                `Tried to add an element that was already mirrored. Updating instead...`
+              );
+            elements[index].mirror.innerText = el.innerText;
+            return;
+          }
+          const mirror = yield mirrorEl(el);
+          if (!mirror) {
+            return;
+          }
+          const elHash = (0, import_object_hash.default)(mirror.outerHTML);
+          if (hashes[elHash]) {
+            if (debug)
+              console.log(
+                `iframe already contains element that is being mirrored. Skipping...`
+              );
+            return;
+          }
+          hashes[elHash] = true;
+          doc.head.append(mirror);
+          elements.push({ original: el, mirror });
+          if (debug)
+            console.log(`Added style node ${el.outerHTML}`);
+        });
+        const removeEl = (el) => {
+          var _a3, _b;
+          const index = lookupEl(el);
+          if (index === -1) {
+            if (debug)
+              console.log(
+                `Tried to remove an element that did not exist. Skipping...`
+              );
+            return;
+          }
+          const elHash = (0, import_object_hash.default)(el.outerHTML);
+          (_b = (_a3 = elements[index]) == null ? void 0 : _a3.mirror) == null ? void 0 : _b.remove();
+          delete hashes[elHash];
+          if (debug)
+            console.log(`Removed style node ${el.outerHTML}`);
+        };
+        const observer = new MutationObserver((mutations) => {
+          mutations.forEach((mutation) => {
+            if (mutation.type === "childList") {
+              mutation.addedNodes.forEach((node) => {
+                if (node.nodeType === Node.TEXT_NODE || node.nodeType === Node.ELEMENT_NODE) {
+                  const el = node.nodeType === Node.TEXT_NODE ? node.parentElement : node;
+                  if (el && el.matches(styleSelector)) {
+                    defer(() => addEl(el));
+                  }
+                }
+              });
+              mutation.removedNodes.forEach((node) => {
+                if (node.nodeType === Node.TEXT_NODE || node.nodeType === Node.ELEMENT_NODE) {
+                  const el = node.nodeType === Node.TEXT_NODE ? node.parentElement : node;
+                  if (el && el.matches(styleSelector)) {
+                    defer(() => removeEl(el));
+                  }
+                }
+              });
+            }
+          });
+        });
+        const parentDocument = win.parent.document;
+        const collectedStyles = collectStyles(parentDocument);
+        const hrefs = [];
+        let stylesLoaded = 0;
+        Promise.all(
+          collectedStyles.map((styleNode, i2) => __async2(void 0, null, function* () {
+            if (styleNode.nodeName === "LINK") {
+              const linkHref = styleNode.href;
+              if (hrefs.indexOf(linkHref) > -1) {
+                return;
+              }
+              hrefs.push(linkHref);
+            }
+            const mirror = yield mirrorEl(styleNode);
+            if (!mirror)
+              return;
+            elements.push({ original: styleNode, mirror });
+            return mirror;
+          }))
+        ).then((mirrorStyles) => {
+          const filtered = mirrorStyles.filter(
+            (el) => typeof el !== "undefined"
+          );
+          filtered.forEach((mirror) => {
+            mirror.onload = () => {
+              stylesLoaded = stylesLoaded + 1;
+              if (stylesLoaded >= elements.length) {
+                onStylesLoaded();
+              }
+            };
+          });
+          doc.head.innerHTML = "";
+          doc.head.append(...filtered);
+          observer.observe(parentDocument.head, { childList: true, subtree: true });
+          filtered.forEach((el) => {
+            const elHash = (0, import_object_hash.default)(el.outerHTML);
+            hashes[elHash] = true;
+          });
+        });
+        return () => {
+          observer.disconnect();
+        };
+      }, []);
+      return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_jsx_runtime29.Fragment, { children });
+    };
+    var AutoFrameComponent = import_react222.default.forwardRef(
+      function(_a3, ref2) {
+        var _b = _a3, { children, debug, onStylesLoaded } = _b, props = __objRest2(_b, ["children", "debug", "onStylesLoaded"]);
+        return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react_frame_component.default, __spreadProps2(__spreadValues2({}, props), { ref: ref2, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(CopyHostStyles, { debug, onStylesLoaded, children }) }));
+      }
+    );
+    AutoFrameComponent.displayName = "AutoFrameComponent";
+    var AutoFrame_default = AutoFrameComponent;
+    init_react_import2();
+    var styles_module_default16 = { "PuckPreview": "_PuckPreview_rxwlr_1", "PuckPreview-frame": "_PuckPreview-frame_rxwlr_5" };
+    var import_jsx_runtime30 = require("react/jsx-runtime");
     var getClassName21 = get_class_name_factory_default2("PuckPreview", styles_module_default16);
     var Preview = ({ id = "puck-preview" }) => {
       const { config, dispatch, state, setStatus, iframe } = useAppContext2();
-      const Page = (0, import_react222.useCallback)(
+      const Page = (0, import_react23.useCallback)(
         (pageProps) => {
           var _a3, _b;
           return ((_a3 = config.root) == null ? void 0 : _a3.render) ? (_b = config.root) == null ? void 0 : _b.render(__spreadProps2(__spreadValues2({
@@ -77450,13 +78821,13 @@ var require_dist2 = __commonJS({
           }, pageProps), {
             editMode: true,
             puck: { renderDropZone: DropZone }
-          })) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_jsx_runtime29.Fragment, { children: pageProps.children });
+          })) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_jsx_runtime30.Fragment, { children: pageProps.children });
         },
         [config.root]
       );
       const rootProps = state.data.root.props || state.data.root;
-      const ref2 = (0, import_react222.useRef)(null);
-      return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+      const ref2 = (0, import_react23.useRef)(null);
+      return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
         "div",
         {
           className: getClassName21(),
@@ -77464,8 +78835,8 @@ var require_dist2 = __commonJS({
           onClick: () => {
             dispatch({ type: "setUi", ui: __spreadProps2(__spreadValues2({}, state.ui), { itemSelector: null }) });
           },
-          children: iframe.enabled ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-            import_auto_frame_component.default,
+          children: iframe.enabled ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+            AutoFrame_default,
             {
               id: "preview-frame",
               className: getClassName21("frame"),
@@ -77474,9 +78845,9 @@ var require_dist2 = __commonJS({
               onStylesLoaded: () => {
                 setStatus("READY");
               },
-              children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Page, __spreadProps2(__spreadValues2({ dispatch, state }, rootProps), { children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(DropZone, { zone: rootDroppableId2 }) }))
+              children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Page, __spreadProps2(__spreadValues2({ dispatch, state }, rootProps), { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(DropZone, { zone: rootDroppableId2 }) }))
             }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { id: "preview-frame", className: getClassName21("frame"), children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Page, __spreadProps2(__spreadValues2({ dispatch, state }, rootProps), { children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(DropZone, { zone: rootDroppableId2 }) })) })
+          ) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { id: "preview-frame", className: getClassName21("frame"), children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Page, __spreadProps2(__spreadValues2({ dispatch, state }, rootProps), { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(DropZone, { zone: rootDroppableId2 }) })) })
         }
       );
     };
@@ -77508,7 +78879,7 @@ var require_dist2 = __commonJS({
         el.style.scrollMargin = oldStyle.scrollMargin || "";
       }
     };
-    var import_react23 = require("react");
+    var import_react24 = require("react");
     init_react_import2();
     var isChildOfZone = (item, maybeChild, ctx) => {
       var _a3;
@@ -77518,7 +78889,7 @@ var require_dist2 = __commonJS({
         return area === item.props.id;
       })) : false;
     };
-    var import_jsx_runtime30 = require("react/jsx-runtime");
+    var import_jsx_runtime31 = require("react/jsx-runtime");
     var getClassName222 = get_class_name_factory_default2("LayerTree", styles_module_default17);
     var getClassNameLayer = get_class_name_factory_default2("Layer", styles_module_default17);
     var LayerTree = ({
@@ -77531,15 +78902,15 @@ var require_dist2 = __commonJS({
       label
     }) => {
       const zones = data.zones || {};
-      const ctx = (0, import_react23.useContext)(dropZoneContext2);
-      return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_jsx_runtime30.Fragment, { children: [
-        label && /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: getClassName222("zoneTitle"), children: [
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: getClassName222("zoneIcon"), children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Layers, { size: "16" }) }),
+      const ctx = (0, import_react24.useContext)(dropZoneContext2);
+      return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
+        label && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: getClassName222("zoneTitle"), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: getClassName222("zoneIcon"), children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Layers, { size: "16" }) }),
           " ",
           label
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("ul", { className: getClassName222(), children: [
-          zoneContent.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: getClassName222("helper"), children: "No items" }),
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("ul", { className: getClassName222(), children: [
+          zoneContent.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: getClassName222("helper"), children: "No items" }),
           zoneContent.map((item, i2) => {
             var _a3;
             const isSelected = (itemSelector == null ? void 0 : itemSelector.index) === i2 && (itemSelector.zone === zone || itemSelector.zone === rootDroppableId2 && !zone);
@@ -77555,7 +78926,7 @@ var require_dist2 = __commonJS({
             const selectedItem = itemSelector && data ? getItem2(itemSelector, data) : null;
             const isHovering = hoveringComponent === item.props.id;
             const childIsSelected = isChildOfZone(item, selectedItem, ctx);
-            return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+            return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
               "li",
               {
                 className: getClassNameLayer({
@@ -77565,7 +78936,7 @@ var require_dist2 = __commonJS({
                   childIsSelected
                 }),
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: getClassNameLayer("inner"), children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+                  /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: getClassNameLayer("inner"), children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
                     "button",
                     {
                       className: getClassNameLayer("clickable"),
@@ -77597,22 +78968,22 @@ var require_dist2 = __commonJS({
                         setHoveringComponent(null);
                       },
                       children: [
-                        containsZone && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+                        containsZone && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
                           "div",
                           {
                             className: getClassNameLayer("chevron"),
                             title: isSelected ? "Collapse" : "Expand",
-                            children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(ChevronDown, { size: "12" })
+                            children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(ChevronDown, { size: "12" })
                           }
                         ),
-                        /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: getClassNameLayer("title"), children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: getClassNameLayer("icon"), children: item.type === "Text" || item.type === "Heading" ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Type, { size: "16" }) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(LayoutGrid, { size: "16" }) }),
-                          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: getClassNameLayer("name"), children: (_a3 = config.components[item.type]["label"]) != null ? _a3 : item.type })
+                        /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: getClassNameLayer("title"), children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: getClassNameLayer("icon"), children: item.type === "Text" || item.type === "Heading" ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Type, { size: "16" }) : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(LayoutGrid, { size: "16" }) }),
+                          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: getClassNameLayer("name"), children: (_a3 = config.components[item.type]["label"]) != null ? _a3 : item.type })
                         ] })
                       ]
                     }
                   ) }),
-                  containsZone && Object.keys(zonesForItem).map((zoneKey, idx) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: getClassNameLayer("zones"), children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+                  containsZone && Object.keys(zonesForItem).map((zoneKey, idx) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: getClassNameLayer("zones"), children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
                     LayerTree,
                     {
                       config,
@@ -77632,13 +79003,13 @@ var require_dist2 = __commonJS({
         ] })
       ] });
     };
-    var import_react24 = require("react");
-    var import_jsx_runtime31 = require("react/jsx-runtime");
+    var import_react25 = require("react");
+    var import_jsx_runtime322 = require("react/jsx-runtime");
     var Outline = () => {
       const { dispatch, state, overrides, config } = useAppContext2();
       const { data, ui } = state;
       const { itemSelector } = ui;
-      const setItemSelector = (0, import_react24.useCallback)(
+      const setItemSelector = (0, import_react25.useCallback)(
         (newItemSelector) => {
           dispatch({
             type: "setUi",
@@ -77647,9 +79018,9 @@ var require_dist2 = __commonJS({
         },
         []
       );
-      const Wrapper = (0, import_react24.useMemo)(() => overrides.outline || "div", [overrides]);
-      return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Wrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(dropZoneContext2.Consumer, { children: (ctx) => /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
-        (ctx == null ? void 0 : ctx.activeZones) && (ctx == null ? void 0 : ctx.activeZones[rootDroppableId2]) && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+      const Wrapper = (0, import_react25.useMemo)(() => overrides.outline || "div", [overrides]);
+      return /* @__PURE__ */ (0, import_jsx_runtime322.jsx)(Wrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime322.jsx)(dropZoneContext2.Consumer, { children: (ctx) => /* @__PURE__ */ (0, import_jsx_runtime322.jsxs)(import_jsx_runtime322.Fragment, { children: [
+        (ctx == null ? void 0 : ctx.activeZones) && (ctx == null ? void 0 : ctx.activeZones[rootDroppableId2]) && /* @__PURE__ */ (0, import_jsx_runtime322.jsx)(
           LayerTree,
           {
             config,
@@ -77662,7 +79033,7 @@ var require_dist2 = __commonJS({
         ),
         Object.entries(findZonesForArea(data, "root")).map(
           ([zoneKey, zone]) => {
-            return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+            return /* @__PURE__ */ (0, import_jsx_runtime322.jsx)(
               LayerTree,
               {
                 config,
@@ -77741,12 +79112,12 @@ var require_dist2 = __commonJS({
       };
     }
     init_react_import2();
-    var import_react25 = require("react");
+    var import_react26 = require("react");
     var import_use_debounce3 = (init_index_module(), __toCommonJS(index_module_exports));
     var EMPTY_HISTORY_INDEX = -1;
     function useHistoryStore() {
-      const [histories, setHistories] = (0, import_react25.useState)([]);
-      const [index, setIndex] = (0, import_react25.useState)(EMPTY_HISTORY_INDEX);
+      const [histories, setHistories] = (0, import_react26.useState)([]);
+      const [index, setIndex] = (0, import_react26.useState)(EMPTY_HISTORY_INDEX);
       const hasPast = index > EMPTY_HISTORY_INDEX;
       const hasFuture = index < histories.length - 1;
       const currentHistory = histories[index];
@@ -77896,16 +79267,16 @@ var require_dist2 = __commonJS({
       var styles = window.getComputedStyle(el);
       return calculateBox3(borderBox, styles);
     };
-    var import_react27 = require("react");
+    var import_react28 = require("react");
     init_react_import2();
-    var import_react26 = require("react");
+    var import_react27 = require("react");
     init_react_import2();
     var styles_module_default18 = { "ViewportControls": "_ViewportControls_3zdvn_1", "ViewportControls-divider": "_ViewportControls-divider_3zdvn_15", "ViewportControls-zoomSelect": "_ViewportControls-zoomSelect_3zdvn_21", "ViewportButton--isActive": "_ViewportButton--isActive_3zdvn_33", "ViewportButton-inner": "_ViewportButton-inner_3zdvn_33" };
-    var import_jsx_runtime322 = require("react/jsx-runtime");
+    var import_jsx_runtime33 = require("react/jsx-runtime");
     var icons = {
-      Smartphone: /* @__PURE__ */ (0, import_jsx_runtime322.jsx)(Smartphone, { size: 16 }),
-      Tablet: /* @__PURE__ */ (0, import_jsx_runtime322.jsx)(Tablet, { size: 16 }),
-      Monitor: /* @__PURE__ */ (0, import_jsx_runtime322.jsx)(Monitor, { size: 16 })
+      Smartphone: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Smartphone, { size: 16 }),
+      Tablet: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Tablet, { size: 16 }),
+      Monitor: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Monitor, { size: 16 })
     };
     var getClassName23 = get_class_name_factory_default2("ViewportControls", styles_module_default18);
     var getClassNameButton = get_class_name_factory_default2("ViewportButton", styles_module_default18);
@@ -77917,11 +79288,11 @@ var require_dist2 = __commonJS({
       onClick
     }) => {
       const { state } = useAppContext2();
-      const [isActive2, setIsActive] = (0, import_react26.useState)(false);
-      (0, import_react26.useEffect)(() => {
+      const [isActive2, setIsActive] = (0, import_react27.useState)(false);
+      (0, import_react27.useEffect)(() => {
         setIsActive(width === state.ui.viewports.current.width);
       }, [width, state.ui.viewports.current.width]);
-      return /* @__PURE__ */ (0, import_jsx_runtime322.jsx)("span", { className: getClassNameButton({ isActive: isActive2 }), children: /* @__PURE__ */ (0, import_jsx_runtime322.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: getClassNameButton({ isActive: isActive2 }), children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
         IconButton,
         {
           title,
@@ -77930,7 +79301,7 @@ var require_dist2 = __commonJS({
             e2.stopPropagation();
             onClick({ width, height });
           },
-          children: /* @__PURE__ */ (0, import_jsx_runtime322.jsx)("span", { className: getClassNameButton("inner"), children })
+          children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: getClassNameButton("inner"), children })
         }
       ) });
     };
@@ -77954,7 +79325,7 @@ var require_dist2 = __commonJS({
       const defaultsContainAutoZoom = defaultZoomOptions.find(
         (option) => option.value === autoZoom
       );
-      const zoomOptions = (0, import_react26.useMemo)(
+      const zoomOptions = (0, import_react27.useMemo)(
         () => [
           ...defaultZoomOptions,
           ...defaultsContainAutoZoom ? [] : [
@@ -77966,8 +79337,8 @@ var require_dist2 = __commonJS({
         ].filter((a2) => a2.value <= autoZoom).sort((a2, b) => a2.value > b.value ? 1 : -1),
         [autoZoom]
       );
-      return /* @__PURE__ */ (0, import_jsx_runtime322.jsxs)("div", { className: getClassName23(), children: [
-        viewports.map((viewport, i2) => /* @__PURE__ */ (0, import_jsx_runtime322.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: getClassName23(), children: [
+        viewports.map((viewport, i2) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
           ViewportButton,
           {
             height: viewport.height,
@@ -77978,8 +79349,8 @@ var require_dist2 = __commonJS({
           },
           i2
         )),
-        /* @__PURE__ */ (0, import_jsx_runtime322.jsx)("div", { className: getClassName23("divider") }),
-        /* @__PURE__ */ (0, import_jsx_runtime322.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: getClassName23("divider") }),
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
           IconButton,
           {
             title: "Zoom viewport out",
@@ -77993,10 +79364,10 @@ var require_dist2 = __commonJS({
                 )].value
               );
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime322.jsx)(ZoomOut, { size: 16 })
+            children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ZoomOut, { size: 16 })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime322.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
           IconButton,
           {
             title: "Zoom viewport in",
@@ -78010,11 +79381,11 @@ var require_dist2 = __commonJS({
                 )].value
               );
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime322.jsx)(ZoomIn, { size: 16 })
+            children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ZoomIn, { size: 16 })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime322.jsx)("div", { className: getClassName23("divider") }),
-        /* @__PURE__ */ (0, import_jsx_runtime322.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: getClassName23("divider") }),
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
           "select",
           {
             className: getClassName23("zoomSelect"),
@@ -78022,7 +79393,7 @@ var require_dist2 = __commonJS({
             onChange: (e2) => {
               onZoom(parseFloat(e2.currentTarget.value));
             },
-            children: zoomOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime322.jsx)(
+            children: zoomOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
               "option",
               {
                 value: option.value,
@@ -78064,24 +79435,24 @@ var require_dist2 = __commonJS({
       }
       return { autoZoom, rootHeight, zoom };
     };
-    var import_jsx_runtime33 = require("react/jsx-runtime");
+    var import_jsx_runtime34 = require("react/jsx-runtime");
     var getClassName24 = get_class_name_factory_default2("PuckCanvas", styles_module_default19);
     var ZOOM_ON_CHANGE = true;
     var Canvas = () => {
       const { status, iframe } = useAppContext2();
       const { dispatch, state, overrides, setUi, zoomConfig, setZoomConfig } = useAppContext2();
       const { ui } = state;
-      const frameRef = (0, import_react27.useRef)(null);
-      const [showTransition, setShowTransition] = (0, import_react27.useState)(false);
-      const defaultRender = (0, import_react27.useMemo)(() => {
-        const PuckDefault = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_jsx_runtime33.Fragment, { children });
+      const frameRef = (0, import_react28.useRef)(null);
+      const [showTransition, setShowTransition] = (0, import_react28.useState)(false);
+      const defaultRender = (0, import_react28.useMemo)(() => {
+        const PuckDefault = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_jsx_runtime34.Fragment, { children });
         return PuckDefault;
       }, []);
-      const CustomPreview = (0, import_react27.useMemo)(
+      const CustomPreview = (0, import_react28.useMemo)(
         () => overrides.preview || defaultRender,
         [overrides]
       );
-      const getFrameDimensions = (0, import_react27.useCallback)(() => {
+      const getFrameDimensions = (0, import_react28.useCallback)(() => {
         if (frameRef.current) {
           const frame = frameRef.current;
           const box = getBox3(frame);
@@ -78089,7 +79460,7 @@ var require_dist2 = __commonJS({
         }
         return { width: 0, height: 0 };
       }, [frameRef]);
-      const resetAutoZoom = (0, import_react27.useCallback)(
+      const resetAutoZoom = (0, import_react28.useCallback)(
         (ui2 = state.ui) => {
           if (frameRef.current) {
             setZoomConfig(
@@ -78099,11 +79470,11 @@ var require_dist2 = __commonJS({
         },
         [frameRef, zoomConfig, state.ui]
       );
-      (0, import_react27.useEffect)(() => {
+      (0, import_react28.useEffect)(() => {
         setShowTransition(false);
         resetAutoZoom();
       }, [frameRef, ui.leftSideBarVisible, ui.rightSideBarVisible]);
-      (0, import_react27.useEffect)(() => {
+      (0, import_react28.useEffect)(() => {
         const { height: frameHeight } = getFrameDimensions();
         if (ui.viewports.current.height === "auto") {
           setZoomConfig(__spreadProps2(__spreadValues2({}, zoomConfig), {
@@ -78111,7 +79482,7 @@ var require_dist2 = __commonJS({
           }));
         }
       }, [zoomConfig.zoom]);
-      (0, import_react27.useEffect)(() => {
+      (0, import_react28.useEffect)(() => {
         const observer = new ResizeObserver(() => {
           setShowTransition(false);
           resetAutoZoom();
@@ -78123,7 +79494,7 @@ var require_dist2 = __commonJS({
           observer.disconnect();
         };
       }, []);
-      return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
         "div",
         {
           className: getClassName24({
@@ -78135,7 +79506,7 @@ var require_dist2 = __commonJS({
             recordHistory: true
           }),
           children: [
-            ui.viewports.controlsVisible && iframe.enabled && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: getClassName24("controls"), children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+            ui.viewports.controlsVisible && iframe.enabled && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: getClassName24("controls"), children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
               ViewportControls,
               {
                 autoZoom: zoomConfig.autoZoom,
@@ -78160,7 +79531,7 @@ var require_dist2 = __commonJS({
                 }
               }
             ) }),
-            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: getClassName24("inner"), ref: frameRef, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: getClassName24("inner"), ref: frameRef, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
               "div",
               {
                 className: getClassName24("root"),
@@ -78172,19 +79543,19 @@ var require_dist2 = __commonJS({
                   overflow: iframe.enabled ? void 0 : "auto"
                 },
                 suppressHydrationWarning: true,
-                children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(CustomPreview, { children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Preview, {}) })
+                children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(CustomPreview, { children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Preview, {}) })
               }
             ) })
           ]
         }
       );
     };
-    var import_jsx_runtime34 = require("react/jsx-runtime");
+    var import_jsx_runtime35 = require("react/jsx-runtime");
     var getClassName25 = get_class_name_factory_default2("Puck", styles_module_default8);
     function Puck({
       children,
       config,
-      data: initialData = { content: [], root: { props: { title: "" } } },
+      data: initialData = { content: [], root: {} },
       ui: initialUi,
       onChange,
       onPublish,
@@ -78197,15 +79568,16 @@ var require_dist2 = __commonJS({
       viewports = defaultViewports2,
       iframe = {
         enabled: true
-      }
+      },
+      dnd
     }) {
       var _a3;
       const historyStore = useHistoryStore();
-      const [reducer2] = (0, import_react28.useState)(
+      const [reducer2] = (0, import_react29.useState)(
         () => createReducer({ config, record: historyStore.record })
       );
-      const [initialAppState] = (0, import_react28.useState)(() => {
-        var _a22, _b, _c, _d;
+      const [initialAppState] = (0, import_react29.useState)(() => {
+        var _a22, _b, _c, _d, _e;
         const initial = __spreadValues2(__spreadValues2({}, defaultAppState2.ui), initialUi);
         let clientUiState = {};
         if (typeof window !== "undefined") {
@@ -78232,8 +79604,12 @@ var require_dist2 = __commonJS({
             };
           }
         }
+        const rootProps2 = initialData.root.props || initialData.root;
+        const defaultedRootProps = __spreadValues2(__spreadValues2({}, (_e = config.root) == null ? void 0 : _e.defaultProps), rootProps2);
         return __spreadProps2(__spreadValues2({}, defaultAppState2), {
-          data: initialData,
+          data: __spreadProps2(__spreadValues2({}, initialData), {
+            root: defaultedRootProps
+          }),
           ui: __spreadProps2(__spreadValues2(__spreadValues2({}, initial), clientUiState), {
             // Store categories under componentList on state to allow render functions and plugins to modify
             componentList: config.categories ? Object.entries(config.categories).reduce(
@@ -78252,7 +79628,7 @@ var require_dist2 = __commonJS({
           })
         });
       });
-      const [appState, dispatch] = (0, import_react28.useReducer)(
+      const [appState, dispatch] = (0, import_react29.useReducer)(
         reducer2,
         flushZones(initialAppState)
       );
@@ -78263,9 +79639,9 @@ var require_dist2 = __commonJS({
         config,
         dispatch
       );
-      const [menuOpen, setMenuOpen] = (0, import_react28.useState)(false);
+      const [menuOpen, setMenuOpen] = (0, import_react29.useState)(false);
       const { itemSelector, leftSideBarVisible, rightSideBarVisible } = ui;
-      const setItemSelector = (0, import_react28.useCallback)(
+      const setItemSelector = (0, import_react29.useCallback)(
         (newItemSelector) => {
           if (newItemSelector === itemSelector)
             return;
@@ -78278,21 +79654,21 @@ var require_dist2 = __commonJS({
         [itemSelector]
       );
       const selectedItem = itemSelector ? getItem2(itemSelector, data) : null;
-      (0, import_react28.useEffect)(() => {
+      (0, import_react29.useEffect)(() => {
         if (onChange)
           onChange(data);
       }, [data]);
       const { onDragStartOrUpdate, placeholderStyle } = usePlaceholderStyle();
-      const [draggedItem, setDraggedItem] = (0, import_react28.useState)();
+      const [draggedItem, setDraggedItem] = (0, import_react29.useState)();
       const rootProps = data.root.props || data.root;
-      (0, import_react28.useEffect)(() => {
+      (0, import_react29.useEffect)(() => {
         if (Object.keys(data.root).length > 0 && !data.root.props) {
           console.error(
             "Warning: Defining props on `root` is deprecated. Please use `root.props`. This will be a breaking change in a future release."
           );
         }
       }, []);
-      const toggleSidebars = (0, import_react28.useCallback)(
+      const toggleSidebars = (0, import_react29.useCallback)(
         (sidebar) => {
           const widerViewport = window.matchMedia("(min-width: 638px)").matches;
           const sideBarVisible = sidebar === "left" ? leftSideBarVisible : rightSideBarVisible;
@@ -78306,7 +79682,7 @@ var require_dist2 = __commonJS({
         },
         [dispatch, leftSideBarVisible, rightSideBarVisible]
       );
-      (0, import_react28.useEffect)(() => {
+      (0, import_react29.useEffect)(() => {
         if (!window.matchMedia("(min-width: 638px)").matches) {
           dispatch({
             type: "setUi",
@@ -78329,11 +79705,11 @@ var require_dist2 = __commonJS({
           window.removeEventListener("resize", handleResize);
         };
       }, []);
-      const defaultRender = (0, import_react28.useMemo)(() => {
-        const PuckDefault = ({ children: children2 }) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_jsx_runtime34.Fragment, { children: children2 });
+      const defaultRender = (0, import_react29.useMemo)(() => {
+        const PuckDefault = ({ children: children2 }) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_jsx_runtime35.Fragment, { children: children2 });
         return PuckDefault;
       }, []);
-      const defaultHeaderRender = (0, import_react28.useMemo)(() => {
+      const defaultHeaderRender = (0, import_react29.useMemo)(() => {
         if (renderHeader) {
           console.warn(
             "`renderHeader` is deprecated. Please use `overrides.header` and the `usePuck` hook instead"
@@ -78341,45 +79717,45 @@ var require_dist2 = __commonJS({
           const RenderHeader = (_a22) => {
             var _b = _a22, { actions } = _b, props = __objRest2(_b, ["actions"]);
             const Comp = renderHeader;
-            return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Comp, __spreadProps2(__spreadValues2({}, props), { dispatch, state: appState, children: actions }));
+            return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Comp, __spreadProps2(__spreadValues2({}, props), { dispatch, state: appState, children: actions }));
           };
           return RenderHeader;
         }
         return defaultRender;
       }, [renderHeader]);
-      const defaultHeaderActionsRender = (0, import_react28.useMemo)(() => {
+      const defaultHeaderActionsRender = (0, import_react29.useMemo)(() => {
         if (renderHeaderActions) {
           console.warn(
             "`renderHeaderActions` is deprecated. Please use `overrides.headerActions` and the `usePuck` hook instead."
           );
           const RenderHeader = (props) => {
             const Comp = renderHeaderActions;
-            return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Comp, __spreadProps2(__spreadValues2({}, props), { dispatch, state: appState }));
+            return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Comp, __spreadProps2(__spreadValues2({}, props), { dispatch, state: appState }));
           };
           return RenderHeader;
         }
         return defaultRender;
       }, [renderHeader]);
-      const loadedOverrides = (0, import_react28.useMemo)(() => {
+      const loadedOverrides = (0, import_react29.useMemo)(() => {
         return loadOverrides({ overrides, plugins });
       }, [plugins]);
-      const CustomPuck = (0, import_react28.useMemo)(
+      const CustomPuck = (0, import_react29.useMemo)(
         () => loadedOverrides.puck || defaultRender,
         [loadedOverrides]
       );
-      const CustomHeader = (0, import_react28.useMemo)(
+      const CustomHeader = (0, import_react29.useMemo)(
         () => loadedOverrides.header || defaultHeaderRender,
         [loadedOverrides]
       );
-      const CustomHeaderActions = (0, import_react28.useMemo)(
+      const CustomHeaderActions = (0, import_react29.useMemo)(
         () => loadedOverrides.headerActions || defaultHeaderActionsRender,
         [loadedOverrides]
       );
-      const [mounted, setMounted] = (0, import_react28.useState)(false);
-      (0, import_react28.useEffect)(() => {
+      const [mounted, setMounted] = (0, import_react29.useState)(false);
+      (0, import_react29.useEffect)(() => {
         setMounted(true);
       }, []);
-      return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "Puck", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "Puck", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
         AppProvider,
         {
           value: {
@@ -78394,9 +79770,10 @@ var require_dist2 = __commonJS({
             viewports,
             iframe
           },
-          children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
             DragDropContext2,
             {
+              autoScrollerOptions: { disabled: dnd == null ? void 0 : dnd.disableAutoScroll },
               onDragUpdate: (update2) => {
                 setDraggedItem(__spreadValues2(__spreadValues2({}, draggedItem), update2));
                 onDragStartOrUpdate(update2);
@@ -78449,7 +79826,7 @@ var require_dist2 = __commonJS({
                   });
                 }
               },
-              children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
                 DropZoneProvider,
                 {
                   value: {
@@ -78463,7 +79840,7 @@ var require_dist2 = __commonJS({
                     mode: "edit",
                     areaId: "root"
                   },
-                  children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(CustomPuck, { children: children || /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(CustomPuck, { children: children || /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
                     "div",
                     {
                       className: getClassName25({
@@ -78473,65 +79850,65 @@ var require_dist2 = __commonJS({
                         rightSideBarVisible
                       }),
                       children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: getClassName25("layout"), children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                        /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: getClassName25("layout"), children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
                             CustomHeader,
                             {
-                              actions: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
-                                /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(CustomHeaderActions, {}),
-                                /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                              actions: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
+                                /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(CustomHeaderActions, {}),
+                                /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
                                   Button,
                                   {
                                     onClick: () => {
                                       onPublish && onPublish(data);
                                     },
-                                    icon: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Globe, { size: "14px" }),
+                                    icon: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Globe, { size: "14px" }),
                                     children: "Publish"
                                   }
                                 )
                               ] }),
-                              children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("header", { className: getClassName25("header"), children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: getClassName25("headerInner"), children: [
-                                /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: getClassName25("headerToggle"), children: [
-                                  /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: getClassName25("leftSideBarToggle"), children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                              children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("header", { className: getClassName25("header"), children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: getClassName25("headerInner"), children: [
+                                /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: getClassName25("headerToggle"), children: [
+                                  /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: getClassName25("leftSideBarToggle"), children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
                                     IconButton,
                                     {
                                       onClick: () => {
                                         toggleSidebars("left");
                                       },
                                       title: "Toggle left sidebar",
-                                      children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(PanelLeft, { focusable: "false" })
+                                      children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(PanelLeft, { focusable: "false" })
                                     }
                                   ) }),
-                                  /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: getClassName25("rightSideBarToggle"), children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                                  /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: getClassName25("rightSideBarToggle"), children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
                                     IconButton,
                                     {
                                       onClick: () => {
                                         toggleSidebars("right");
                                       },
                                       title: "Toggle right sidebar",
-                                      children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(PanelRight, { focusable: "false" })
+                                      children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(PanelRight, { focusable: "false" })
                                     }
                                   ) })
                                 ] }),
-                                /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: getClassName25("headerTitle"), children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(Heading2, { rank: 2, size: "xs", children: [
+                                /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: getClassName25("headerTitle"), children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(Heading2, { rank: 2, size: "xs", children: [
                                   headerTitle || rootProps.title || "Page",
-                                  headerPath && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
+                                  headerPath && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
                                     " ",
-                                    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("code", { className: getClassName25("headerPath"), children: headerPath })
+                                    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("code", { className: getClassName25("headerPath"), children: headerPath })
                                   ] })
                                 ] }) }),
-                                /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: getClassName25("headerTools"), children: [
-                                  /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: getClassName25("menuButton"), children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                                /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: getClassName25("headerTools"), children: [
+                                  /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: getClassName25("menuButton"), children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
                                     IconButton,
                                     {
                                       onClick: () => {
                                         return setMenuOpen(!menuOpen);
                                       },
                                       title: "Toggle menu bar",
-                                      children: menuOpen ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ChevronUp, { focusable: "false" }) : /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ChevronDown, { focusable: "false" })
+                                      children: menuOpen ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ChevronUp, { focusable: "false" }) : /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ChevronDown, { focusable: "false" })
                                     }
                                   ) }),
-                                  /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                                  /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
                                     MenuBar,
                                     {
                                       appState,
@@ -78539,7 +79916,7 @@ var require_dist2 = __commonJS({
                                       dispatch,
                                       onPublish,
                                       menuOpen,
-                                      renderHeaderActions: () => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(CustomHeaderActions, {}),
+                                      renderHeaderActions: () => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(CustomHeaderActions, {}),
                                       setMenuOpen
                                     }
                                   )
@@ -78547,23 +79924,23 @@ var require_dist2 = __commonJS({
                               ] }) })
                             }
                           ),
-                          /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: getClassName25("leftSideBar"), children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(SidebarSection2, { title: "Components", noBorderTop: true, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Components, {}) }),
-                            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(SidebarSection2, { title: "Outline", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Outline, {}) })
+                          /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: getClassName25("leftSideBar"), children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(SidebarSection2, { title: "Components", noBorderTop: true, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Components, {}) }),
+                            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(SidebarSection2, { title: "Outline", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Outline, {}) })
                           ] }),
-                          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Canvas, {}),
-                          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: getClassName25("rightSideBar"), children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Canvas, {}),
+                          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: getClassName25("rightSideBar"), children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
                             SidebarSection2,
                             {
                               noPadding: true,
                               noBorderTop: true,
                               showBreadcrumbs: true,
                               title: selectedItem ? (_a3 = config.components[selectedItem.type]["label"]) != null ? _a3 : selectedItem.type : "Page",
-                              children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Fields, {})
+                              children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Fields, {})
                             }
                           ) })
                         ] }),
-                        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
                           "div",
                           {
                             id: "puck-portal-root",
@@ -78585,7 +79962,7 @@ var require_dist2 = __commonJS({
     Puck.Outline = Outline;
     Puck.Preview = Preview;
     init_react_import2();
-    var import_jsx_runtime35 = require("react/jsx-runtime");
+    var import_jsx_runtime36 = require("react/jsx-runtime");
     function Render({
       config,
       data
@@ -78594,7 +79971,7 @@ var require_dist2 = __commonJS({
       const rootProps = data.root.props || data.root;
       const title = (rootProps == null ? void 0 : rootProps.title) || "";
       if ((_a3 = config.root) == null ? void 0 : _a3.render) {
-        return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(DropZoneProvider, { value: { data, config, mode: "render" }, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(DropZoneProvider, { value: { data, config, mode: "render" }, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
           config.root.render,
           __spreadProps2(__spreadValues2({}, rootProps), {
             puck: {
@@ -78603,11 +79980,11 @@ var require_dist2 = __commonJS({
             title,
             editMode: false,
             id: "puck-root",
-            children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(DropZone, { zone: rootDroppableId2 })
+            children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(DropZone, { zone: rootDroppableId2 })
           })
         ) });
       }
-      return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(DropZoneProvider, { value: { data, config, mode: "render" }, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(DropZone, { zone: rootDroppableId2 }) });
+      return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(DropZoneProvider, { value: { data, config, mode: "render" }, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(DropZone, { zone: rootDroppableId2 }) });
     }
     init_react_import2();
     var migrations = [
@@ -78772,7 +80149,7 @@ init_react_import();
 // src/HeadingAnalyzer.tsx
 init_react_import();
 var import_react12 = require("react");
-var import_puck = __toESM(require_dist2());
+var import_puck = __toESM(require_dist());
 
 // ../core/components/SidebarSection/index.tsx
 init_react_import();
@@ -78957,9 +80334,10 @@ var defaultViewports = [
 ];
 
 // ../core/components/Puck/context.tsx
+var import_ua_parser_js = __toESM(require_ua_parser());
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var defaultAppState = {
-  data: { content: [], root: { props: { title: "" } } },
+  data: { content: [], root: { props: {} } },
   ui: {
     leftSideBarVisible: true,
     rightSideBarVisible: true,
@@ -78996,7 +80374,8 @@ var defaultContext = {
   setZoomConfig: () => null,
   status: "LOADING",
   setStatus: () => null,
-  iframe: {}
+  iframe: {},
+  safariFallbackMode: false
 };
 var appContext = (0, import_react10.createContext)(defaultContext);
 function useAppContext() {