@likec4/diagram 1.34.2 → 1.35.0

package/bundle/{chunk-Dd7et66b.js → chunk-C0Eg81Gj.js}

@@ -193,7 +193,7 @@ function normalizeHTMLProps(props) {
   return Object.fromEntries(Object.entries(props).map(([key, value]) => [convert(key), value]));
 }
 normalizeHTMLProps.keys = htmlProps;
-const conditionsStr = "_hover,_focus,_focusWithin,_focusVisible,_disabled,_active,_visited,_target,_readOnly,_readWrite,_empty,_checked,_enabled,_expanded,_highlighted,_complete,_incomplete,_dragging,_before,_after,_firstLetter,_firstLine,_marker,_selection,_file,_backdrop,_first,_last,_only,_even,_odd,_firstOfType,_lastOfType,_onlyOfType,_peerFocus,_peerHover,_peerActive,_peerFocusWithin,_peerFocusVisible,_peerDisabled,_peerChecked,_peerInvalid,_peerExpanded,_peerPlaceholderShown,_groupFocus,_groupHover,_groupActive,_groupFocusWithin,_groupFocusVisible,_groupDisabled,_groupChecked,_groupExpanded,_groupInvalid,_indeterminate,_required,_valid,_invalid,_autofill,_inRange,_outOfRange,_placeholder,_placeholderShown,_pressed,_selected,_grabbed,_underValue,_overValue,_atValue,_default,_optional,_open,_closed,_fullscreen,_loading,_hidden,_current,_currentPage,_currentStep,_today,_unavailable,_rangeStart,_rangeEnd,_now,_topmost,_motionReduce,_motionSafe,_print,_landscape,_portrait,_dark,_light,_osDark,_osLight,_highContrast,_lessContrast,_moreContrast,_ltr,_rtl,_scrollbar,_scrollbarThumb,_scrollbarTrack,_horizontal,_vertical,_icon,_starting,_reduceGraphics,_reduceGraphicsOnPan,_noReduceGraphics,_whenPanning,_smallZoom,_compoundTransparent,_edgeActive,_whenHovered,_whenSelected,_whenDimmed,_whenFocused,_shapeSizeXs,_shapeSizeSm,_shapeSizeMd,_shapeSizeLg,_shapeSizeXl,_shapeRectangle,_shapePerson,_shapeBrowser,_shapeMobile,_shapeCylinder,_shapeStorage,_shapeQueue,_p3,_srgb,_rec2020,xs,xsOnly,xsDown,sm,smOnly,smDown,md,mdOnly,mdDown,lg,lgOnly,lgDown,xl,xlOnly,xlDown,xsToSm,xsToMd,xsToLg,xsToXl,smToMd,smToLg,smToXl,mdToLg,mdToXl,lgToXl,base", conditions = new Set(conditionsStr.split(",")), conditionRegex = /^@|&|&$/;
+const conditionsStr = "_hover,_focus,_focusWithin,_focusVisible,_disabled,_active,_visited,_target,_readOnly,_readWrite,_empty,_checked,_enabled,_expanded,_highlighted,_complete,_incomplete,_dragging,_before,_after,_firstLetter,_firstLine,_marker,_selection,_file,_backdrop,_first,_last,_only,_even,_odd,_firstOfType,_lastOfType,_onlyOfType,_peerFocus,_peerHover,_peerActive,_peerFocusWithin,_peerFocusVisible,_peerDisabled,_peerChecked,_peerInvalid,_peerExpanded,_peerPlaceholderShown,_groupFocus,_groupHover,_groupActive,_groupFocusWithin,_groupFocusVisible,_groupDisabled,_groupChecked,_groupExpanded,_groupInvalid,_indeterminate,_required,_valid,_invalid,_autofill,_inRange,_outOfRange,_placeholder,_placeholderShown,_pressed,_selected,_grabbed,_underValue,_overValue,_atValue,_default,_optional,_open,_closed,_fullscreen,_loading,_hidden,_current,_currentPage,_currentStep,_today,_unavailable,_rangeStart,_rangeEnd,_now,_topmost,_motionReduce,_motionSafe,_print,_landscape,_portrait,_dark,_light,_osDark,_osLight,_highContrast,_lessContrast,_moreContrast,_ltr,_rtl,_scrollbar,_scrollbarThumb,_scrollbarTrack,_horizontal,_vertical,_icon,_starting,_notDisabled,_reduceGraphics,_reduceGraphicsOnPan,_noReduceGraphics,_whenPanning,_smallZoom,_compoundTransparent,_edgeActive,_whenHovered,_whenSelected,_whenDimmed,_whenFocused,_shapeSizeXs,_shapeSizeSm,_shapeSizeMd,_shapeSizeLg,_shapeSizeXl,_shapeRectangle,_shapePerson,_shapeBrowser,_shapeMobile,_shapeCylinder,_shapeStorage,_shapeQueue,_p3,_srgb,_rec2020,xs,xsOnly,xsDown,sm,smOnly,smDown,md,mdOnly,mdDown,lg,lgOnly,lgDown,xl,xlOnly,xlDown,xsToSm,xsToMd,xsToLg,xsToXl,smToMd,smToLg,smToXl,mdToLg,mdToXl,lgToXl,base", conditions = new Set(conditionsStr.split(",")), conditionRegex = /^@|&|&$/;
 function isCondition(value) {
   return conditions.has(value) || conditionRegex.test(value);
 }
@@ -246,9 +246,9 @@ const defaults = (conf) => ({
   ...conf
 });
 function cva(config) {
-  const { base, variants, defaultVariants, compoundVariants } = defaults(config), getVariantProps = (variants2) => ({ ...defaultVariants, ...compact(variants2) });
+  const { base, variants, defaultVariants, compoundVariants } = defaults(config), getVariantProps2 = (variants2) => ({ ...defaultVariants, ...compact(variants2) });
   function resolve(props = {}) {
-    const computedVariants = getVariantProps(props);
+    const computedVariants = getVariantProps2(props);
     let variantCss = { ...base };
     for (const [key, value] of Object.entries(computedVariants))
       variants[key]?.[value] && (variantCss = mergeCss(variantCss, variants[key][value]));
@@ -282,7 +282,7 @@ function cva(config) {
     config,
     merge,
     splitVariantProps,
-    getVariantProps
+    getVariantProps: getVariantProps2
   });
 }
 function getCompoundVariantCss(compoundVariants, variantMap) {
@@ -310,7 +310,7 @@ function sva(config) {
   function splitVariantProps(props) {
     return splitProps(props, variantKeys);
   }
-  const getVariantProps = (variants2) => ({ ...defaultVariants || {}, ...compact(variants2) }), variantMap = Object.fromEntries(
+  const getVariantProps2 = (variants2) => ({ ...defaultVariants || {}, ...compact(variants2) }), variantMap = Object.fromEntries(
     Object.entries(variants).map(([key, value]) => [key, Object.keys(value)])
   );
   return Object.assign(memo(svaFn), {
@@ -319,7 +319,7 @@ function sva(config) {
     variantMap,
     variantKeys,
     splitVariantProps,
-    getVariantProps
+    getVariantProps: getVariantProps2
   });
 }
 var __assign = function() {
@@ -1016,20 +1016,20 @@ function useCallbackRef(callback) {
   }), useMemo(() => (...args) => callbackRef.current?.(...args), []);
 }
 const DEFAULT_EVENTS = ["mousedown", "touchstart"];
-function useClickOutside(handler, events, nodes) {
-  const ref = useRef(null);
+function useClickOutside(callback, events, nodes) {
+  const ref = useRef(null), eventsList = events || DEFAULT_EVENTS;
   return useEffect(() => {
     const listener = (event) => {
       const { target } = event ?? {};
       if (Array.isArray(nodes)) {
-        const shouldIgnore = target?.hasAttribute("data-ignore-outside-clicks") || !document.body.contains(target) && target.tagName !== "HTML";
-        nodes.every((node) => !!node && !event.composedPath().includes(node)) && !shouldIgnore && handler();
-      } else ref.current && !ref.current.contains(target) && handler();
+        const shouldIgnore = !document.body.contains(target) && target.tagName !== "HTML";
+        nodes.every((node) => !!node && !event.composedPath().includes(node)) && !shouldIgnore && callback();
+      } else ref.current && !ref.current.contains(target) && callback();
     };
-    return (events || DEFAULT_EVENTS).forEach((fn) => document.addEventListener(fn, listener)), () => {
-      (events || DEFAULT_EVENTS).forEach((fn) => document.removeEventListener(fn, listener));
+    return eventsList.forEach((fn) => document.addEventListener(fn, listener)), () => {
+      eventsList.forEach((fn) => document.removeEventListener(fn, listener));
     };
-  }, [ref, handler, nodes]), ref;
+  }, [ref, callback, nodes]), ref;
 }
 function attachMediaListener(query, callback) {
   try {
@@ -1219,11 +1219,13 @@ function clampUseMovePosition(position) {
   };
 }
 function useMove(onChange, handlers, dir = "ltr") {
-  const mounted = useRef(!1), isSliding = useRef(!1), frame2 = useRef(0), [active, setActive] = useState(!1);
+  const mounted = useRef(!1), isSliding = useRef(!1), frame2 = useRef(0), [active, setActive] = useState(!1), cleanupRef = useRef(null);
   return useEffect(() => {
     mounted.current = !0;
   }, []), { ref: useCallback(
     (node) => {
+      if (cleanupRef.current && (cleanupRef.current(), cleanupRef.current = null), !node)
+        return;
       const onScrub = ({ x, y: y2 }) => {
         cancelAnimationFrame(frame2.current), frame2.current = requestAnimationFrame(() => {
           if (mounted.current && node) {
@@ -1255,8 +1257,8 @@ function useMove(onChange, handlers, dir = "ltr") {
       }, onTouchMove = (event) => {
         event.cancelable && event.preventDefault(), onScrub({ x: event.changedTouches[0].clientX, y: event.changedTouches[0].clientY });
       };
-      return node?.addEventListener("mousedown", onMouseDown), node?.addEventListener("touchstart", onTouchStart, { passive: !1 }), () => {
-        node && (node.removeEventListener("mousedown", onMouseDown), node.removeEventListener("touchstart", onTouchStart));
+      node.addEventListener("mousedown", onMouseDown), node.addEventListener("touchstart", onTouchStart, { passive: !1 }), cleanupRef.current = () => {
+        node.removeEventListener("mousedown", onMouseDown), node.removeEventListener("touchstart", onTouchStart);
       };
     },
     [dir, onChange]
@@ -2267,7 +2269,8 @@ function useStyles({
   classNames,
   styles,
   vars,
-  varsResolver: varsResolver2
+  varsResolver: varsResolver2,
+  attributes
 }) {
   const theme = useMantineTheme(), classNamesPrefix = useMantineClassNamesPrefix(), withStaticClasses = useMantineWithStaticClasses(), headless = useMantineIsHeadless(), themeName = (Array.isArray(name) ? name : [name]).filter((n2) => n2), { withStylesTransform, getTransformedStyles } = useStylesTransform({
     props,
@@ -2306,7 +2309,8 @@ function useStyles({
       varsResolver: varsResolver2,
       headless,
       withStylesTransform
-    })
+    }),
+    ...attributes?.[selector2]
   });
 }
 function useProps(component, defaultProps2, props) {
@@ -2617,7 +2621,7 @@ function parseStyleProps({
         acc.hasResponsiveStyles = !0;
         const breakpoints = getBreakpointKeys(styleProps[styleProp]);
         return properties2.forEach((property) => {
-          baseValue && (acc.styles[property] = resolvers[propertyData.type](baseValue, theme)), breakpoints.forEach((breakpoint) => {
+          baseValue != null && (acc.styles[property] = resolvers[propertyData.type](baseValue, theme)), breakpoints.forEach((breakpoint) => {
             const bp = `(min-width: ${theme.breakpoints[breakpoint]})`;
             acc.media[bp] = {
               ...acc.media[bp],
@@ -5041,11 +5045,11 @@ function toInt(value) {
   return value ? parseInt(value, 10) : 0;
 }
 var classes$i = { root: "m_87cf2631" };
-const defaultProps$A = {
+const defaultProps$k = {
   __staticSelector: "UnstyledButton"
 }, UnstyledButton = polymorphicFactory(
   (_props, ref) => {
-    const props = useProps("UnstyledButton", defaultProps$A, _props), {
+    const props = useProps("UnstyledButton", defaultProps$k, _props), {
       className,
       component = "button",
       __staticSelector,
@@ -5053,6 +5057,7 @@ const defaultProps$A = {
       classNames,
       styles,
       style: style2,
+      attributes,
       ...others
     } = props, getStyles2 = useStyles({
       name: __staticSelector,
@@ -5062,7 +5067,8 @@ const defaultProps$A = {
       style: style2,
       classNames,
       styles,
-      unstyled
+      unstyled,
+      attributes
     });
     return /* @__PURE__ */ jsx(
       Box$1,
@@ -5079,8 +5085,8 @@ const defaultProps$A = {
 UnstyledButton.classes = classes$i;
 UnstyledButton.displayName = "@mantine/core/UnstyledButton";
 var classes$h = { root: "m_515a97f8" };
-const defaultProps$z = {}, VisuallyHidden = factory((_props, ref) => {
-  const props = useProps("VisuallyHidden", defaultProps$z, _props), { classNames, className, style: style2, styles, unstyled, vars, ...others } = props, getStyles2 = useStyles({
+const VisuallyHidden = factory((_props, ref) => {
+  const props = useProps("VisuallyHidden", null, _props), { classNames, className, style: style2, styles, unstyled, vars, attributes, ...others } = props, getStyles2 = useStyles({
     name: "VisuallyHidden",
     classes: classes$h,
     props,
@@ -5088,20 +5094,21 @@ const defaultProps$z = {}, VisuallyHidden = factory((_props, ref) => {
     style: style2,
     classNames,
     styles,
-    unstyled
+    unstyled,
+    attributes
   });
   return /* @__PURE__ */ jsx(Box$1, { component: "span", ref, ...getStyles2("root"), ...others });
 });
 VisuallyHidden.classes = classes$h;
 VisuallyHidden.displayName = "@mantine/core/VisuallyHidden";
 var classes$g = { root: "m_1b7284a3" };
-const defaultProps$y = {}, varsResolver$j = (_, { radius, shadow }) => ({
+const varsResolver$j = (_, { radius, shadow }) => ({
   root: {
     "--paper-radius": radius === void 0 ? void 0 : getRadius(radius),
     "--paper-shadow": getShadow(shadow)
   }
 }), Paper = polymorphicFactory((_props, ref) => {
-  const props = useProps("Paper", defaultProps$y, _props), {
+  const props = useProps("Paper", null, _props), {
     classNames,
     className,
     style: style2,
@@ -5113,6 +5120,7 @@ const defaultProps$y = {}, varsResolver$j = (_, { radius, shadow }) => ({
     shadow,
     variant,
     mod,
+    attributes,
     ...others
   } = props, getStyles2 = useStyles({
     name: "Paper",
@@ -5123,6 +5131,7 @@ const defaultProps$y = {}, varsResolver$j = (_, { radius, shadow }) => ({
     classNames,
     styles,
     unstyled,
+    attributes,
     vars,
     varsResolver: varsResolver$j
   });
@@ -5243,7 +5252,7 @@ function getFloatingPosition(dir, position) {
   return position;
 }
 var classes$f = { root: "m_9814e45f" };
-const defaultProps$x = {
+const defaultProps$j = {
   zIndex: getDefaultZIndex("modal")
 }, varsResolver$i = (_, { gradient, color: color2, backgroundOpacity, blur, radius, zIndex }) => ({
   root: {
@@ -5253,7 +5262,7 @@ const defaultProps$x = {
     "--overlay-z-index": zIndex?.toString()
   }
 }), Overlay$1 = polymorphicFactory((_props, ref) => {
-  const props = useProps("Overlay", defaultProps$x, _props), {
+  const props = useProps("Overlay", defaultProps$j, _props), {
     classNames,
     className,
     style: style2,
@@ -5270,6 +5279,7 @@ const defaultProps$x = {
     color: color2,
     backgroundOpacity,
     mod,
+    attributes,
     ...others
   } = props, getStyles2 = useStyles({
     name: "Overlay",
@@ -5280,6 +5290,7 @@ const defaultProps$x = {
     classNames,
     styles,
     unstyled,
+    attributes,
     vars,
     varsResolver: varsResolver$i
   });
@@ -5303,10 +5314,10 @@ function getTargetNode({ target, reuseTargetNode, ...others }) {
   }
   return createPortalNode(others);
 }
-const defaultProps$w = {
+const defaultProps$i = {
   reuseTargetNode: !0
 }, Portal = factory((props, ref) => {
-  const { children: children2, target, reuseTargetNode, ...others } = useProps("Portal", defaultProps$w, props), [mounted, setMounted] = useState(!1), nodeRef = useRef(null);
+  const { children: children2, target, reuseTargetNode, ...others } = useProps("Portal", defaultProps$i, props), [mounted, setMounted] = useState(!1), nodeRef = useRef(null);
   return useIsomorphicEffect(() => (setMounted(!0), nodeRef.current = getTargetNode({ target, reuseTargetNode, ...others }), assignRef(ref, nodeRef.current), !target && !reuseTargetNode && nodeRef.current && document.body.appendChild(nodeRef.current), () => {
     !target && !reuseTargetNode && nodeRef.current && document.body.removeChild(nodeRef.current);
   }), [target]), !mounted || !nodeRef.current ? null : createPortal(/* @__PURE__ */ jsx(Fragment$1, { children: children2 }), nodeRef.current);
@@ -5573,8 +5584,8 @@ FocusTrap.displayName = "@mantine/core/FocusTrap";
 FocusTrapInitialFocus.displayName = "@mantine/core/FocusTrapInitialFocus";
 FocusTrap.InitialFocus = FocusTrapInitialFocus;
 var classes$e = { dropdown: "m_38a85659", arrow: "m_a31dc6c1", overlay: "m_3d7bc908" };
-const defaultProps$v = {}, PopoverDropdown = factory((_props, ref) => {
-  const props = useProps("PopoverDropdown", defaultProps$v, _props), {
+const PopoverDropdown = factory((_props, ref) => {
+  const props = useProps("PopoverDropdown", null, _props), {
     className,
     style: style2,
     vars,
@@ -5668,13 +5679,13 @@ const defaultProps$v = {}, PopoverDropdown = factory((_props, ref) => {
 });
 PopoverDropdown.classes = classes$e;
 PopoverDropdown.displayName = "@mantine/core/PopoverDropdown";
-const defaultProps$u = {
+const defaultProps$h = {
   refProp: "ref",
   popupType: "dialog"
 }, PopoverTarget = factory((props, ref) => {
   const { children: children2, refProp, popupType, ...others } = useProps(
     "PopoverTarget",
-    defaultProps$u,
+    defaultProps$h,
     props
   );
   if (!isElement$1(children2))
@@ -5697,7 +5708,11 @@ const defaultProps$u = {
       children2.props.className
     ),
     [refProp]: targetRef,
-    ...ctx.controlled ? null : { onClick: ctx.onToggle }
+    ...ctx.controlled ? null : {
+      onClick: () => {
+        ctx.onToggle(), children2.props.onClick?.();
+      }
+    }
   });
 });
 PopoverTarget.displayName = "@mantine/core/PopoverTarget";
@@ -5780,7 +5795,7 @@ function usePopover(options) {
     onToggle
   };
 }
-const defaultProps$t = {
+const defaultProps$g = {
   position: "bottom",
   offset: 8,
   positionDependencies: [],
@@ -5809,7 +5824,7 @@ const defaultProps$t = {
   }
 });
 function Popover(_props) {
-  const props = useProps("Popover", defaultProps$t, _props), {
+  const props = useProps("Popover", defaultProps$g, _props), {
     children: children2,
     position,
     offset: offset2,
@@ -5857,6 +5872,7 @@ function Popover(_props) {
     withOverlay,
     overlayProps,
     hideDetached,
+    attributes,
     preventPositionChangeWhenVisible,
     ...others
   } = props, getStyles2 = useStyles({
@@ -5866,6 +5882,7 @@ function Popover(_props) {
     classNames,
     styles,
     unstyled,
+    attributes,
     rootSelector: "dropdown",
     vars,
     varsResolver: varsResolver$h
@@ -6010,7 +6027,7 @@ const defaultLoaders = {
   bars: Bars,
   oval: Oval,
   dots: Dots
-}, defaultProps$s = {
+}, defaultProps$f = {
   loaders: defaultLoaders,
   type: "oval"
 }, varsResolver$g = (theme, { size: size2, color: color2 }) => ({
@@ -6019,7 +6036,7 @@ const defaultLoaders = {
     "--loader-color": color2 ? getThemeColor(color2, theme) : void 0
   }
 }), Loader = factory((_props, ref) => {
-  const props = useProps("Loader", defaultProps$s, _props), {
+  const props = useProps("Loader", defaultProps$f, _props), {
     size: size2,
     color: color2,
     type,
@@ -6032,6 +6049,7 @@ const defaultLoaders = {
     loaders,
     variant,
     children: children2,
+    attributes,
     ...others
   } = props, getStyles2 = useStyles({
     name: "Loader",
@@ -6042,6 +6060,7 @@ const defaultLoaders = {
     classNames,
     styles,
     unstyled,
+    attributes,
     vars,
     varsResolver: varsResolver$g
   });
@@ -6061,12 +6080,12 @@ Loader.defaultLoaders = defaultLoaders;
 Loader.classes = classes$d;
 Loader.displayName = "@mantine/core/Loader";
 var classes$c = { root: "m_8d3f4000", icon: "m_8d3afb97", loader: "m_302b9fb1", group: "m_1a0f1b21", groupSection: "m_437b6484" };
-const defaultProps$r = {
+const defaultProps$e = {
   orientation: "horizontal"
 }, varsResolver$f = (_, { borderWidth: borderWidth2 }) => ({
   group: { "--ai-border-width": rem(borderWidth2) }
 }), ActionIconGroup = factory((_props, ref) => {
-  const props = useProps("ActionIconGroup", defaultProps$r, _props), {
+  const props = useProps("ActionIconGroup", defaultProps$e, _props), {
     className,
     style: style2,
     classNames,
@@ -6077,8 +6096,9 @@ const defaultProps$r = {
     borderWidth: borderWidth2,
     variant,
     mod,
+    attributes,
     ...others
-  } = useProps("ActionIconGroup", defaultProps$r, _props), getStyles2 = useStyles({
+  } = useProps("ActionIconGroup", defaultProps$e, _props), getStyles2 = useStyles({
     name: "ActionIconGroup",
     props,
     classes: classes$c,
@@ -6087,6 +6107,7 @@ const defaultProps$r = {
     classNames,
     styles,
     unstyled,
+    attributes,
     vars,
     varsResolver: varsResolver$f,
     rootSelector: "group"
@@ -6105,7 +6126,7 @@ const defaultProps$r = {
 });
 ActionIconGroup.classes = classes$c;
 ActionIconGroup.displayName = "@mantine/core/ActionIconGroup";
-const defaultProps$q = {}, varsResolver$e = (theme, { radius, color: color2, gradient, variant, autoContrast, size: size2 }) => {
+const varsResolver$e = (theme, { radius, color: color2, gradient, variant, autoContrast, size: size2 }) => {
   const colors2 = theme.variantColorResolver({
     color: color2 || theme.primaryColor,
     theme,
@@ -6125,7 +6146,7 @@ const defaultProps$q = {}, varsResolver$e = (theme, { radius, color: color2, gra
     }
   };
 }, ActionIconGroupSection = factory((_props, ref) => {
-  const props = useProps("ActionIconGroupSection", defaultProps$q, _props), {
+  const props = useProps("ActionIconGroupSection", null, _props), {
     className,
     style: style2,
     classNames,
@@ -6136,8 +6157,9 @@ const defaultProps$q = {}, varsResolver$e = (theme, { radius, color: color2, gra
     gradient,
     radius,
     autoContrast,
+    attributes,
     ...others
-  } = useProps("ActionIconGroupSection", defaultProps$q, _props), getStyles2 = useStyles({
+  } = props, getStyles2 = useStyles({
     name: "ActionIconGroupSection",
     props,
     classes: classes$c,
@@ -6146,6 +6168,7 @@ const defaultProps$q = {}, varsResolver$e = (theme, { radius, color: color2, gra
     classNames,
     styles,
     unstyled,
+    attributes,
     vars,
     varsResolver: varsResolver$e,
     rootSelector: "groupSection"
@@ -6154,7 +6177,7 @@ const defaultProps$q = {}, varsResolver$e = (theme, { radius, color: color2, gra
 });
 ActionIconGroupSection.classes = classes$c;
 ActionIconGroupSection.displayName = "@mantine/core/ActionIconGroupSection";
-const defaultProps$p = {}, varsResolver$d = (theme, { size: size2, radius, variant, gradient, color: color2, autoContrast }) => {
+const varsResolver$d = (theme, { size: size2, radius, variant, gradient, color: color2, autoContrast }) => {
   const colors2 = theme.variantColorResolver({
     color: color2 || theme.primaryColor,
     theme,
@@ -6174,7 +6197,7 @@ const defaultProps$p = {}, varsResolver$d = (theme, { size: size2, radius, varia
     }
   };
 }, ActionIcon = polymorphicFactory((_props, ref) => {
-  const props = useProps("ActionIcon", defaultProps$p, _props), {
+  const props = useProps("ActionIcon", null, _props), {
     className,
     unstyled,
     variant,
@@ -6194,6 +6217,7 @@ const defaultProps$p = {}, varsResolver$d = (theme, { size: size2, radius, varia
     "data-disabled": dataDisabled,
     autoContrast,
     mod,
+    attributes,
     ...others
   } = props, getStyles2 = useStyles({
     name: ["ActionIcon", __staticSelector],
@@ -6204,6 +6228,7 @@ const defaultProps$p = {}, varsResolver$d = (theme, { size: size2, radius, varia
     classNames,
     styles,
     unstyled,
+    attributes,
     vars,
     varsResolver: varsResolver$d
   });
@@ -6233,7 +6258,7 @@ function filterFalsyChildren(children2) {
   return Children.toArray(children2).filter(Boolean);
 }
 var classes$b = { root: "m_4081bf90" };
-const defaultProps$o = {
+const defaultProps$d = {
   preventGrowOverflow: !0,
   gap: "md",
   align: "center",
@@ -6248,7 +6273,7 @@ const defaultProps$o = {
     "--group-wrap": wrap
   }
 }), Group = factory((_props, ref) => {
-  const props = useProps("Group", defaultProps$o, _props), {
+  const props = useProps("Group", defaultProps$d, _props), {
     classNames,
     className,
     style: style2,
@@ -6265,6 +6290,7 @@ const defaultProps$o = {
     variant,
     __size,
     mod,
+    attributes,
     ...others
   } = props, filteredChildren = filterFalsyChildren(children2), childrenCount = filteredChildren.length, resolvedGap = getSpacing(gap ?? "md"), stylesCtx = { childWidth: `calc(${100 / childrenCount}% - (${resolvedGap} - ${resolvedGap} / ${childrenCount}))` }, getStyles2 = useStyles({
     name: "Group",
@@ -6276,6 +6302,7 @@ const defaultProps$o = {
     classNames,
     styles,
     unstyled,
+    attributes,
     vars,
     varsResolver: varsResolver$c
   });
@@ -6304,8 +6331,8 @@ const FLEX_STYLE_PROPS_DATA = {
   direction: { type: "identity", property: "flexDirection" }
 };
 var classes$a = { root: "m_8bffd616" };
-const defaultProps$n = {}, Flex = polymorphicFactory((_props, ref) => {
-  const props = useProps("Flex", defaultProps$n, _props), {
+const Flex = polymorphicFactory((_props, ref) => {
+  const props = useProps("Flex", null, _props), {
     classNames,
     className,
     style: style2,
@@ -6319,6 +6346,7 @@ const defaultProps$n = {}, Flex = polymorphicFactory((_props, ref) => {
     justify,
     wrap,
     direction,
+    attributes,
     ...others
   } = props, getStyles2 = useStyles({
     name: "Flex",
@@ -6329,6 +6357,7 @@ const defaultProps$n = {}, Flex = polymorphicFactory((_props, ref) => {
     classNames,
     styles,
     unstyled,
+    attributes,
     vars
   }), theme = useMantineTheme(), responsiveClassName = useRandomClassName(), parsedStyleProps = parseStyleProps({
     styleProps: { gap, rowGap, columnGap, align, justify, wrap, direction },
@@ -6424,12 +6453,12 @@ function useFloatingIndicator({
   ), { initialized, hidden: hidden2 };
 }
 var classes$9 = { root: "m_96b553a6" };
-const defaultProps$m = {}, varsResolver$b = (_theme, { transitionDuration }) => ({
+const varsResolver$b = (_theme, { transitionDuration }) => ({
   root: {
     "--transition-duration": typeof transitionDuration == "number" ? `${transitionDuration}ms` : transitionDuration
   }
 }), FloatingIndicator = factory((_props, ref) => {
-  const props = useProps("FloatingIndicator", defaultProps$m, _props), {
+  const props = useProps("FloatingIndicator", null, _props), {
     classNames,
     className,
     style: style2,
@@ -6441,6 +6470,7 @@ const defaultProps$m = {}, varsResolver$b = (_theme, { transitionDuration }) =>
     transitionDuration,
     mod,
     displayAfterTransitionEnd,
+    attributes,
     ...others
   } = props, getStyles2 = useStyles({
     name: "FloatingIndicator",
@@ -6451,6 +6481,7 @@ const defaultProps$m = {}, varsResolver$b = (_theme, { transitionDuration }) =>
     classNames,
     styles,
     unstyled,
+    attributes,
     vars,
     varsResolver: varsResolver$b
   }), innerRef = useRef(null), { initialized, hidden: hidden2 } = useFloatingIndicator({
@@ -6463,6 +6494,16 @@ const defaultProps$m = {}, varsResolver$b = (_theme, { transitionDuration }) =>
 });
 FloatingIndicator.displayName = "@mantine/core/FloatingIndicator";
 FloatingIndicator.classes = classes$9;
+function useDelayedHover({ open, close, openDelay, closeDelay }) {
+  const openTimeout = useRef(-1), closeTimeout = useRef(-1), clearTimeouts = () => {
+    window.clearTimeout(openTimeout.current), window.clearTimeout(closeTimeout.current);
+  }, openDropdown = () => {
+    clearTimeouts(), openDelay === 0 || openDelay === void 0 ? open() : openTimeout.current = window.setTimeout(open, openDelay);
+  }, closeDropdown = () => {
+    clearTimeouts(), closeDelay === 0 || closeDelay === void 0 ? close() : closeTimeout.current = window.setTimeout(close, closeDelay);
+  };
+  return useEffect(() => clearTimeouts, []), { openDropdown, closeDropdown };
+}
 function AccordionChevron({ style: style2, size: size2 = 16, ...others }) {
   return /* @__PURE__ */ jsx(
     "svg",
@@ -6492,7 +6533,7 @@ function getTextTruncate(truncate) {
   if (truncate === "end" || truncate)
     return "end";
 }
-const defaultProps$l = {
+const defaultProps$c = {
   inherit: !1
 }, varsResolver$a = /* Will be removed in 9.0 */ /* eslint-disable-next-line @typescript-eslint/no-deprecated */ (theme, { variant, lineClamp, gradient, size: size2, color: color2 }) => ({
   root: {
@@ -6503,7 +6544,7 @@ const defaultProps$l = {
     "--text-color": color2 ? getThemeColor(color2, theme) : void 0
   }
 }), Text = polymorphicFactory((_props, ref) => {
-  const props = useProps("Text", defaultProps$l, _props), {
+  const props = useProps("Text", defaultProps$c, _props), {
     lineClamp,
     truncate,
     inline: inline2,
@@ -6520,6 +6561,7 @@ const defaultProps$l = {
     variant,
     mod,
     size: size2,
+    attributes,
     ...others
   } = props, getStyles2 = useStyles({
     name: ["Text", __staticSelector],
@@ -6530,6 +6572,7 @@ const defaultProps$l = {
     classNames,
     styles,
     unstyled,
+    attributes,
     vars,
     varsResolver: varsResolver$a
   });
@@ -6580,12 +6623,12 @@ function CheckIcon({ size: size2, style: style2, ...others }) {
   );
 }
 var classes$7 = { root: "m_77c9d27d", inner: "m_80f1301b", label: "m_811560b9", section: "m_a74036a", loader: "m_a25b86ee", group: "m_80d6d844", groupSection: "m_70be2a01" };
-const defaultProps$k = {
+const defaultProps$b = {
   orientation: "horizontal"
 }, varsResolver$9 = (_, { borderWidth: borderWidth2 }) => ({
   group: { "--button-border-width": rem(borderWidth2) }
 }), ButtonGroup = factory((_props, ref) => {
-  const props = useProps("ButtonGroup", defaultProps$k, _props), {
+  const props = useProps("ButtonGroup", defaultProps$b, _props), {
     className,
     style: style2,
     classNames,
@@ -6596,8 +6639,9 @@ const defaultProps$k = {
     borderWidth: borderWidth2,
     variant,
     mod,
+    attributes,
     ...others
-  } = useProps("ButtonGroup", defaultProps$k, _props), getStyles2 = useStyles({
+  } = useProps("ButtonGroup", defaultProps$b, _props), getStyles2 = useStyles({
     name: "ButtonGroup",
     props,
     classes: classes$7,
@@ -6606,6 +6650,7 @@ const defaultProps$k = {
     classNames,
     styles,
     unstyled,
+    attributes,
     vars,
     varsResolver: varsResolver$9,
     rootSelector: "group"
@@ -6624,7 +6669,7 @@ const defaultProps$k = {
 });
 ButtonGroup.classes = classes$7;
 ButtonGroup.displayName = "@mantine/core/ButtonGroup";
-const defaultProps$j = {}, varsResolver$8 = (theme, { radius, color: color2, gradient, variant, autoContrast, size: size2 }) => {
+const varsResolver$8 = (theme, { radius, color: color2, gradient, variant, autoContrast, size: size2 }) => {
   const colors2 = theme.variantColorResolver({
     color: color2 || theme.primaryColor,
     theme,
@@ -6644,7 +6689,7 @@ const defaultProps$j = {}, varsResolver$8 = (theme, { radius, color: color2, gra
     }
   };
 }, ButtonGroupSection = factory((_props, ref) => {
-  const props = useProps("ButtonGroupSection", defaultProps$j, _props), {
+  const props = useProps("ButtonGroupSection", null, _props), {
     className,
     style: style2,
     classNames,
@@ -6655,8 +6700,9 @@ const defaultProps$j = {}, varsResolver$8 = (theme, { radius, color: color2, gra
     gradient,
     radius,
     autoContrast,
+    attributes,
     ...others
-  } = useProps("ButtonGroupSection", defaultProps$j, _props), getStyles2 = useStyles({
+  } = props, getStyles2 = useStyles({
     name: "ButtonGroupSection",
     props,
     classes: classes$7,
@@ -6665,6 +6711,7 @@ const defaultProps$j = {}, varsResolver$8 = (theme, { radius, color: color2, gra
     classNames,
     styles,
     unstyled,
+    attributes,
     vars,
     varsResolver: varsResolver$8,
     rootSelector: "groupSection"
@@ -6678,7 +6725,7 @@ const loaderTransition = {
   out: { opacity: 0, transform: "translate(-50%, -200%)" },
   common: { transformOrigin: "center" },
   transitionProperty: "transform, opacity"
-}, defaultProps$i = {}, varsResolver$7 = (theme, { radius, color: color2, gradient, variant, size: size2, justify, autoContrast }) => {
+}, varsResolver$7 = (theme, { radius, color: color2, gradient, variant, size: size2, justify, autoContrast }) => {
   const colors2 = theme.variantColorResolver({
     color: color2 || theme.primaryColor,
     theme,
@@ -6701,7 +6748,7 @@ const loaderTransition = {
     }
   };
 }, Button = polymorphicFactory((_props, ref) => {
-  const props = useProps("Button", defaultProps$i, _props), {
+  const props = useProps("Button", null, _props), {
     style: style2,
     vars,
     className,
@@ -6722,6 +6769,7 @@ const loaderTransition = {
     "data-disabled": dataDisabled,
     autoContrast,
     mod,
+    attributes,
     ...others
   } = props, getStyles2 = useStyles({
     name: "Button",
@@ -6732,6 +6780,7 @@ const loaderTransition = {
     classNames,
     styles,
     unstyled,
+    attributes,
     vars,
     varsResolver: varsResolver$7
   }), hasLeftSection = !!leftSection, hasRightSection = !!rightSection;
@@ -6777,7 +6826,7 @@ Button.displayName = "@mantine/core/Button";
 Button.Group = ButtonGroup;
 Button.GroupSection = ButtonGroupSection;
 var classes$6 = { root: "m_de3d2490", colorOverlay: "m_862f3d1b", shadowOverlay: "m_98ae7f22", alphaOverlay: "m_95709ac0", childrenOverlay: "m_93e74e3" };
-const defaultProps$h = {
+const defaultProps$a = {
   withShadow: !0
 }, varsResolver$6 = (_, { radius, size: size2 }) => ({
   root: {
@@ -6785,7 +6834,7 @@ const defaultProps$h = {
     "--cs-size": rem(size2)
   }
 }), ColorSwatch = polymorphicFactory((_props, ref) => {
-  const props = useProps("ColorSwatch", defaultProps$h, _props), {
+  const props = useProps("ColorSwatch", defaultProps$a, _props), {
     classNames,
     className,
     style: style2,
@@ -6798,8 +6847,9 @@ const defaultProps$h = {
     withShadow,
     children: children2,
     variant,
+    attributes,
     ...others
-  } = useProps("ColorSwatch", defaultProps$h, props), getStyles2 = useStyles({
+  } = useProps("ColorSwatch", defaultProps$a, props), getStyles2 = useStyles({
     name: "ColorSwatch",
     props,
     classes: classes$6,
@@ -6808,6 +6858,7 @@ const defaultProps$h = {
     classNames,
     styles,
     unstyled,
+    attributes,
     vars,
     varsResolver: varsResolver$6
   });
@@ -6831,7 +6882,7 @@ const defaultProps$h = {
 ColorSwatch.classes = classes$6;
 ColorSwatch.displayName = "@mantine/core/ColorSwatch";
 var classes$5 = { root: "m_3eebeb36", label: "m_9e365f20" };
-const defaultProps$g = {
+const defaultProps$9 = {
   orientation: "horizontal"
 }, varsResolver$5 = (theme, { color: color2, variant, size: size2 }) => ({
   root: {
@@ -6840,7 +6891,7 @@ const defaultProps$g = {
     "--divider-size": getSize(size2, "divider-size")
   }
 }), Divider = factory((_props, ref) => {
-  const props = useProps("Divider", defaultProps$g, _props), {
+  const props = useProps("Divider", defaultProps$9, _props), {
     classNames,
     className,
     style: style2,
@@ -6852,6 +6903,7 @@ const defaultProps$g = {
     label,
     labelPosition,
     mod,
+    attributes,
     ...others
   } = props, getStyles2 = useStyles({
     name: "Divider",
@@ -6862,6 +6914,7 @@ const defaultProps$g = {
     classNames,
     styles,
     unstyled,
+    attributes,
     vars,
     varsResolver: varsResolver$5
   });
@@ -6879,25 +6932,15 @@ const defaultProps$g = {
 });
 Divider.classes = classes$5;
 Divider.displayName = "@mantine/core/Divider";
-function useDelayedHover({ open, close, openDelay, closeDelay }) {
-  const openTimeout = useRef(-1), closeTimeout = useRef(-1), clearTimeouts = () => {
-    window.clearTimeout(openTimeout.current), window.clearTimeout(closeTimeout.current);
-  }, openDropdown = () => {
-    clearTimeouts(), openDelay === 0 || openDelay === void 0 ? open() : openTimeout.current = window.setTimeout(open, openDelay);
-  }, closeDropdown = () => {
-    clearTimeouts(), closeDelay === 0 || closeDelay === void 0 ? close() : closeTimeout.current = window.setTimeout(close, closeDelay);
-  };
-  return useEffect(() => clearTimeouts, []), { openDropdown, closeDropdown };
-}
 var index$1 = useLayoutEffect;
 const [MenuContextProvider, useMenuContext] = createSafeContext(
   "Menu component was not found in the tree"
 );
 var classes$4 = { dropdown: "m_dc9b7c9f", label: "m_9bfac126", divider: "m_efdf90cb", item: "m_99ac2aa1", itemLabel: "m_5476e0d3", itemSection: "m_8b75e504", chevron: "m_b85b0bed" };
-const defaultProps$f = {}, MenuDivider = factory((props, ref) => {
+const MenuDivider = factory((props, ref) => {
   const { classNames, className, style: style2, styles, vars, ...others } = useProps(
     "MenuDivider",
-    defaultProps$f,
+    null,
     props
   ), ctx = useMenuContext();
   return /* @__PURE__ */ jsx(
@@ -6911,7 +6954,7 @@ const defaultProps$f = {}, MenuDivider = factory((props, ref) => {
 });
 MenuDivider.classes = classes$4;
 MenuDivider.displayName = "@mantine/core/MenuDivider";
-const defaultProps$e = {}, MenuDropdown = factory((props, ref) => {
+const MenuDropdown = factory((props, ref) => {
   const {
     classNames,
     className,
@@ -6923,7 +6966,7 @@ const defaultProps$e = {}, MenuDropdown = factory((props, ref) => {
     onKeyDown,
     children: children2,
     ...others
-  } = useProps("MenuDropdown", defaultProps$e, props), wrapperRef = useRef(null), ctx = useMenuContext(), handleKeyDown = createEventHandler(onKeyDown, (event) => {
+  } = useProps("MenuDropdown", null, props), wrapperRef = useRef(null), ctx = useMenuContext(), handleKeyDown = createEventHandler(onKeyDown, (event) => {
     (event.key === "ArrowUp" || event.key === "ArrowDown") && (event.preventDefault(), wrapperRef.current?.querySelectorAll("[data-menu-item]:not(:disabled)")[0]?.focus());
   }), handleMouseEnter = createEventHandler(
     onMouseEnter,
@@ -6960,7 +7003,7 @@ const defaultProps$e = {}, MenuDropdown = factory((props, ref) => {
 });
 MenuDropdown.classes = classes$4;
 MenuDropdown.displayName = "@mantine/core/MenuDropdown";
-const [SubMenuProvider, useSubMenuContext] = createOptionalContext(), defaultProps$d = {}, MenuItem = polymorphicFactory((props, ref) => {
+const [SubMenuProvider, useSubMenuContext] = createOptionalContext(), MenuItem = polymorphicFactory((props, ref) => {
   const {
     classNames,
     className,
@@ -6975,7 +7018,7 @@ const [SubMenuProvider, useSubMenuContext] = createOptionalContext(), defaultPro
     disabled,
     "data-disabled": dataDisabled,
     ...others
-  } = useProps("MenuItem", defaultProps$d, props), ctx = useMenuContext(), subCtx = useSubMenuContext(), theme = useMantineTheme(), { dir } = useDirection(), itemRef = useRef(null), _others = others, handleClick = createEventHandler(_others.onClick, () => {
+  } = useProps("MenuItem", null, props), ctx = useMenuContext(), subCtx = useSubMenuContext(), theme = useMantineTheme(), { dir } = useDirection(), itemRef = useRef(null), _others = others, handleClick = createEventHandler(_others.onClick, () => {
     dataDisabled || (typeof closeMenuOnClick == "boolean" ? closeMenuOnClick && ctx.closeDropdownImmediately() : ctx.closeOnItemClick && ctx.closeDropdownImmediately());
   }), colors2 = color2 ? theme.variantColorResolver({ color: color2, theme, variant: "light" }) : void 0, parsedThemeColor = color2 ? parseThemeColor({ color: color2, theme }) : null, handleKeydown = createEventHandler(_others.onKeyDown, (event) => {
     event.key === "ArrowLeft" && subCtx && (subCtx.close(), subCtx.focusParentItem());
@@ -7018,10 +7061,10 @@ const [SubMenuProvider, useSubMenuContext] = createOptionalContext(), defaultPro
 });
 MenuItem.classes = classes$4;
 MenuItem.displayName = "@mantine/core/MenuItem";
-const defaultProps$c = {}, MenuLabel = factory((props, ref) => {
+const MenuLabel = factory((props, ref) => {
   const { classNames, className, style: style2, styles, vars, ...others } = useProps(
     "MenuLabel",
-    defaultProps$c,
+    null,
     props
   ), ctx = useMenuContext();
   return /* @__PURE__ */ jsx(
@@ -7035,7 +7078,7 @@ const defaultProps$c = {}, MenuLabel = factory((props, ref) => {
 });
 MenuLabel.classes = classes$4;
 MenuLabel.displayName = "@mantine/core/MenuLabel";
-const defaultProps$b = {}, MenuSubDropdown = factory((props, ref) => {
+const MenuSubDropdown = factory((props, ref) => {
   const {
     classNames,
     className,
@@ -7047,7 +7090,7 @@ const defaultProps$b = {}, MenuSubDropdown = factory((props, ref) => {
     onKeyDown,
     children: children2,
     ...others
-  } = useProps("MenuSubDropdown", defaultProps$b, props), wrapperRef = useRef(null), ctx = useMenuContext(), subCtx = useSubMenuContext(), handleMouseEnter = createEventHandler(onMouseEnter, subCtx?.open), handleMouseLeave = createEventHandler(onMouseLeave, subCtx?.close);
+  } = useProps("MenuSubDropdown", null, props), wrapperRef = useRef(null), ctx = useMenuContext(), subCtx = useSubMenuContext(), handleMouseEnter = createEventHandler(onMouseEnter, subCtx?.open), handleMouseLeave = createEventHandler(onMouseLeave, subCtx?.close);
   return /* @__PURE__ */ jsx(
     Popover.Dropdown,
     {
@@ -7072,7 +7115,7 @@ const defaultProps$b = {}, MenuSubDropdown = factory((props, ref) => {
 });
 MenuSubDropdown.classes = classes$4;
 MenuSubDropdown.displayName = "@mantine/core/MenuSubDropdown";
-const defaultProps$a = {}, MenuSubItem = polymorphicFactory((props, ref) => {
+const MenuSubItem = polymorphicFactory((props, ref) => {
   const {
     classNames,
     className,
@@ -7087,7 +7130,7 @@ const defaultProps$a = {}, MenuSubItem = polymorphicFactory((props, ref) => {
     "data-disabled": dataDisabled,
     closeMenuOnClick,
     ...others
-  } = useProps("MenuSubItem", defaultProps$a, props), ctx = useMenuContext(), subCtx = useSubMenuContext(), theme = useMantineTheme(), { dir } = useDirection(), itemRef = useRef(null), _others = others, colors2 = color2 ? theme.variantColorResolver({ color: color2, theme, variant: "light" }) : void 0, parsedThemeColor = color2 ? parseThemeColor({ color: color2, theme }) : null, handleKeydown = createEventHandler(_others.onKeyDown, (event) => {
+  } = useProps("MenuSubItem", null, props), ctx = useMenuContext(), subCtx = useSubMenuContext(), theme = useMantineTheme(), { dir } = useDirection(), itemRef = useRef(null), _others = others, colors2 = color2 ? theme.variantColorResolver({ color: color2, theme, variant: "light" }) : void 0, parsedThemeColor = color2 ? parseThemeColor({ color: color2, theme }) : null, handleKeydown = createEventHandler(_others.onKeyDown, (event) => {
     event.key === "ArrowRight" && (subCtx?.open(), subCtx?.focusFirstItem()), event.key === "ArrowLeft" && subCtx?.parentContext && (subCtx.parentContext.close(), subCtx.parentContext.focusParentItem());
   }), handleClick = createEventHandler(_others.onClick, () => {
     !dataDisabled && closeMenuOnClick && ctx.closeDropdownImmediately();
@@ -7141,13 +7184,13 @@ function MenuSubTarget({ children: children2, refProp }) {
   return useMenuContext(), /* @__PURE__ */ jsx(Popover.Target, { refProp, popupType: "menu", children: children2 });
 }
 MenuSubTarget.displayName = "@mantine/core/MenuSubTarget";
-const defaultProps$9 = {
+const defaultProps$8 = {
   offset: 0,
   position: "right-start",
   transitionProps: { duration: 0 }
 };
 function MenuSub(_props) {
-  const { children: children2, closeDelay, ...others } = useProps("MenuSub", defaultProps$9, _props), id2 = useId$1(), [opened, { open, close }] = useDisclosure(!1), ctx = useSubMenuContext(), { openDropdown, closeDropdown } = useDelayedHover({
+  const { children: children2, closeDelay, ...others } = useProps("MenuSub", defaultProps$8, _props), id2 = useId$1(), [opened, { open, close }] = useDisclosure(!1), ctx = useSubMenuContext(), { openDropdown, closeDropdown } = useDelayedHover({
     open,
     close,
     closeDelay,
@@ -7168,7 +7211,7 @@ function MenuSub(_props) {
         }, 16),
         parentContext: ctx
       },
-      children: /* @__PURE__ */ jsx(Popover, { opened, ...others, withinPortal: !1, id: id2, children: children2 })
+      children: /* @__PURE__ */ jsx(Popover, { opened, ...others, withinPortal: !1, withArrow: !1, id: id2, children: children2 })
     }
   );
 }
@@ -7177,10 +7220,10 @@ MenuSub.displayName = "@mantine/core/MenuSub";
 MenuSub.Target = MenuSubTarget;
 MenuSub.Dropdown = MenuSubDropdown;
 MenuSub.Item = MenuSubItem;
-const defaultProps$8 = {
+const defaultProps$7 = {
   refProp: "ref"
 }, MenuTarget = forwardRef((props, ref) => {
-  const { children: children2, refProp, ...others } = useProps("MenuTarget", defaultProps$8, props);
+  const { children: children2, refProp, ...others } = useProps("MenuTarget", defaultProps$7, props);
   if (!isElement$1(children2))
     throw new Error(
       "Menu.Target component children should be an element or a component that accepts ref. Fragments, strings, numbers and other primitive values are not supported"
@@ -7201,7 +7244,7 @@ const defaultProps$8 = {
   }) });
 });
 MenuTarget.displayName = "@mantine/core/MenuTarget";
-const defaultProps$7 = {
+const defaultProps$6 = {
   trapFocus: !0,
   closeOnItemClick: !0,
   withInitialFocusPlaceholder: !0,
@@ -7213,7 +7256,7 @@ const defaultProps$7 = {
   menuItemTabIndex: -1
 };
 function Menu(_props) {
-  const props = useProps("Menu", defaultProps$7, _props), {
+  const props = useProps("Menu", defaultProps$6, _props), {
     children: children2,
     onOpen,
     onClose,
@@ -7235,6 +7278,7 @@ function Menu(_props) {
     menuItemTabIndex,
     keepMounted,
     withInitialFocusPlaceholder,
+    attributes,
     ...others
   } = props, getStyles2 = useStyles({
     name: "Menu",
@@ -7242,7 +7286,8 @@ function Menu(_props) {
     props,
     classNames,
     styles,
-    unstyled
+    unstyled,
+    attributes
   }), [_opened, setOpened] = useUncontrolled({
     value: opened,
     defaultValue: defaultOpened,
@@ -7366,7 +7411,7 @@ function useFloatingTooltip({
   }, [elements.reference, refs.floating.current, update, handleMouseMove, opened]), { handleMouseMove, x, y: y2, opened, setOpened, boundaryRef, floating: refs.setFloating };
 }
 var classes$3 = { tooltip: "m_1b3c8819", arrow: "m_f898399f" };
-const defaultProps$6 = {
+const defaultProps$5 = {
   refProp: "ref",
   withinPortal: !0,
   offset: 10,
@@ -7379,7 +7424,7 @@ const defaultProps$6 = {
     "--tooltip-color": color2 ? "var(--mantine-color-white)" : void 0
   }
 }), TooltipFloating = factory((_props, ref) => {
-  const props = useProps("TooltipFloating", defaultProps$6, _props), {
+  const props = useProps("TooltipFloating", defaultProps$5, _props), {
     children: children2,
     refProp,
     withinPortal,
@@ -7400,6 +7445,7 @@ const defaultProps$6 = {
     variant,
     vars,
     portalProps,
+    attributes,
     ...others
   } = props, theme = useMantineTheme(), getStyles2 = useStyles({
     name: "TooltipFloating",
@@ -7410,6 +7456,7 @@ const defaultProps$6 = {
     classNames,
     styles,
     unstyled,
+    attributes,
     rootSelector: "tooltip",
     vars,
     varsResolver: varsResolver$4
@@ -7457,12 +7504,12 @@ const defaultProps$6 = {
 });
 TooltipFloating.classes = classes$3;
 TooltipFloating.displayName = "@mantine/core/TooltipFloating";
-const TooltipGroupContext = createContext(!1), TooltipGroupProvider = TooltipGroupContext.Provider, useTooltipGroupContext = () => useContext(TooltipGroupContext), defaultProps$5 = {
+const TooltipGroupContext = createContext(!1), TooltipGroupProvider = TooltipGroupContext.Provider, useTooltipGroupContext = () => useContext(TooltipGroupContext), defaultProps$4 = {
   openDelay: 0,
   closeDelay: 0
 };
 function TooltipGroup(props) {
-  const { openDelay, closeDelay, children: children2 } = useProps("TooltipGroup", defaultProps$5, props);
+  const { openDelay, closeDelay, children: children2 } = useProps("TooltipGroup", defaultProps$4, props);
   return /* @__PURE__ */ jsx(TooltipGroupProvider, { value: !0, children: /* @__PURE__ */ jsx(FloatingDelayGroup, { delay: { open: openDelay, close: closeDelay }, children: children2 }) });
 }
 TooltipGroup.displayName = "@mantine/core/TooltipGroup";
@@ -7534,7 +7581,7 @@ function useTooltip(settings) {
     placement
   };
 }
-const defaultProps$4 = {
+const defaultProps$3 = {
   position: "top",
   refProp: "ref",
   withinPortal: !0,
@@ -7563,7 +7610,7 @@ const defaultProps$4 = {
     }
   };
 }, Tooltip$1 = factory((_props, ref) => {
-  const props = useProps("Tooltip", defaultProps$4, _props), {
+  const props = useProps("Tooltip", defaultProps$3, _props), {
     children: children2,
     position,
     refProp,
@@ -7607,8 +7654,10 @@ const defaultProps$4 = {
     floatingStrategy,
     middlewares,
     autoContrast,
+    attributes,
+    target,
     ...others
-  } = useProps("Tooltip", defaultProps$4, props), { dir } = useDirection(), arrowRef = useRef(null), tooltip = useTooltip({
+  } = useProps("Tooltip", defaultProps$3, props), { dir } = useDirection(), arrowRef = useRef(null), tooltip = useTooltip({
     position: getFloatingPosition(dir, position),
     closeDelay,
     openDelay,
@@ -7619,11 +7668,16 @@ const defaultProps$4 = {
     arrowRef,
     arrowOffset,
     offset: typeof offset2 == "number" ? offset2 + (withArrow ? arrowSize / 2 : 0) : offset2,
-    positionDependencies: [...positionDependencies, children2],
+    positionDependencies: [...positionDependencies, target ?? children2],
     inline: inline2,
     strategy: floatingStrategy,
     middlewares
-  }), getStyles2 = useStyles({
+  });
+  useEffect(() => {
+    const targetNode = target instanceof HTMLElement ? target : typeof target == "string" ? document.querySelector(target) : target?.current || null;
+    targetNode && tooltip.reference(targetNode);
+  }, [target, tooltip]);
+  const getStyles2 = useStyles({
     name: "Tooltip",
     props,
     classes: classes$3,
@@ -7632,15 +7686,64 @@ const defaultProps$4 = {
     classNames,
     styles,
     unstyled,
+    attributes,
     rootSelector: "tooltip",
     vars,
     varsResolver: varsResolver$3
   });
-  if (!isElement$1(children2))
-    throw new Error(
-      "[@mantine/core] Tooltip component children should be an element or a component that accepts ref, fragments, strings, numbers and other primitive values are not supported"
-    );
-  const targetRef = useMergedRef(tooltip.reference, getRefProp(children2), ref), transition = getTransitionProps(transitionProps, { duration: 100, transition: "fade" }), _childrenProps = children2.props;
+  if (!target && !isElement$1(children2))
+    return null;
+  if (target) {
+    const transition2 = getTransitionProps(transitionProps, { duration: 100, transition: "fade" });
+    return /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsx(OptionalPortal, { ...portalProps, withinPortal, children: /* @__PURE__ */ jsx(
+      Transition$1,
+      {
+        ...transition2,
+        keepMounted,
+        mounted: !disabled && !!tooltip.opened,
+        duration: tooltip.isGroupPhase ? 10 : transition2.duration,
+        children: (transitionStyles) => /* @__PURE__ */ jsxs(
+          Box$1,
+          {
+            ...others,
+            "data-fixed": floatingStrategy === "fixed" || void 0,
+            variant,
+            mod: [{ multiline }, mod],
+            ...tooltip.getFloatingProps({
+              ref: tooltip.floating,
+              className: getStyles2("tooltip").className,
+              style: {
+                ...getStyles2("tooltip").style,
+                ...transitionStyles,
+                zIndex,
+                top: tooltip.y ?? 0,
+                left: tooltip.x ?? 0
+              }
+            }),
+            children: [
+              label,
+              /* @__PURE__ */ jsx(
+                FloatingArrow,
+                {
+                  ref: arrowRef,
+                  arrowX: tooltip.arrowX,
+                  arrowY: tooltip.arrowY,
+                  visible: withArrow,
+                  position: tooltip.placement,
+                  arrowSize,
+                  arrowOffset,
+                  arrowRadius,
+                  arrowPosition,
+                  ...getStyles2("arrow")
+                }
+              )
+            ]
+          }
+        )
+      }
+    ) }) });
+  }
+  const _children = children2, _childrenProps = _children.props, targetRef = useMergedRef(tooltip.reference, getRefProp(_children), ref), transition = getTransitionProps(transitionProps, { duration: 100, transition: "fade" });
   return /* @__PURE__ */ jsxs(Fragment$1, { children: [
     /* @__PURE__ */ jsx(OptionalPortal, { ...portalProps, withinPortal, children: /* @__PURE__ */ jsx(
       Transition$1,
@@ -7690,7 +7793,7 @@ const defaultProps$4 = {
       }
     ) }),
     cloneElement(
-      children2,
+      _children,
       tooltip.getReferenceProps({
         onClick,
         onMouseEnter,
@@ -7710,7 +7813,7 @@ Tooltip$1.displayName = "@mantine/core/Tooltip";
 Tooltip$1.Floating = TooltipFloating;
 Tooltip$1.Group = TooltipGroup;
 var classes$2 = { root: "m_cf365364", indicator: "m_9e182ccd", label: "m_1738fcb2", input: "m_1714d588", control: "m_69686b9b", innerLabel: "m_78882f40" };
-const defaultProps$3 = {
+const defaultProps$2 = {
   withItemsBorders: !0
 }, varsResolver$2 = (theme, { radius, color: color2, transitionDuration, size: size2, transitionTimingFunction }) => ({
   root: {
@@ -7723,7 +7826,7 @@ const defaultProps$3 = {
     "--sc-font-size": getFontSize(size2)
   }
 }), SegmentedControl = factory((_props, ref) => {
-  const props = useProps("SegmentedControl", defaultProps$3, _props), {
+  const props = useProps("SegmentedControl", defaultProps$2, _props), {
     classNames,
     className,
     style: style2,
@@ -7748,6 +7851,7 @@ const defaultProps$3 = {
     autoContrast,
     withItemsBorders,
     mod,
+    attributes,
     ...others
   } = props, getStyles2 = useStyles({
     name: "SegmentedControl",
@@ -7758,6 +7862,7 @@ const defaultProps$3 = {
     classNames,
     styles,
     unstyled,
+    attributes,
     vars,
     varsResolver: varsResolver$2
   }), theme = useMantineTheme(), _data = data.map(
@@ -8027,7 +8132,7 @@ function getLastMarkValue(marks) {
   return sortedMarks.length > 0 ? sortedMarks[sortedMarks.length - 1].value : 100;
 }
 var classes$1 = { root: "m_dd36362e", label: "m_c9357328", thumb: "m_c9a9a60a", trackContainer: "m_a8645c2", track: "m_c9ade57f", bar: "m_38aeed47", markWrapper: "m_b7b0423a", mark: "m_dd33bc19", markLabel: "m_68c77a5b" };
-const defaultProps$2 = {
+const defaultProps$1 = {
   radius: "xl",
   min: 0,
   max: 100,
@@ -8047,7 +8152,7 @@ const defaultProps$2 = {
     "--slider-thumb-size": thumbSize !== void 0 ? rem(thumbSize) : "calc(var(--slider-size) * 2)"
   }
 }), Slider = factory((_props, ref) => {
-  const props = useProps("Slider", defaultProps$2, _props), {
+  const props = useProps("Slider", defaultProps$1, _props), {
     classNames,
     styles,
     value,
@@ -8078,6 +8183,7 @@ const defaultProps$2 = {
     hiddenInputProps,
     restrictToMarks,
     thumbProps,
+    attributes,
     ...others
   } = props, getStyles2 = useStyles({
     name: "Slider",
@@ -8087,6 +8193,7 @@ const defaultProps$2 = {
     className,
     styles,
     style: style2,
+    attributes,
     vars,
     varsResolver: varsResolver$1,
     unstyled
@@ -8259,8 +8366,8 @@ const defaultProps$2 = {
 });
 Slider.classes = classes$1;
 Slider.displayName = "@mantine/core/Slider";
-const defaultProps$1 = {}, Space = factory((props, ref) => {
-  const { w, h, miw, mih, ...others } = useProps("Space", defaultProps$1, props);
+const Space = factory((props, ref) => {
+  const { w, h, miw, mih, ...others } = useProps("Space", null, props);
   return /* @__PURE__ */ jsx(Box$1, { ref, ...others, w, miw: miw ?? w, h, mih: mih ?? h });
 });
 Space.displayName = "@mantine/core/Space";
@@ -8287,6 +8394,7 @@ const defaultProps = {
     justify,
     gap,
     variant,
+    attributes,
     ...others
   } = props, getStyles2 = useStyles({
     name: "Stack",
@@ -8297,6 +8405,7 @@ const defaultProps = {
     classNames,
     styles,
     unstyled,
+    attributes,
     vars,
     varsResolver
   });
@@ -8305,7 +8414,7 @@ const defaultProps = {
 Stack.classes = classes;
 Stack.displayName = "@mantine/core/Stack";
 /**
- * @license @tabler/icons-react v3.31.0 - MIT
+ * @license @tabler/icons-react v3.34.1 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
@@ -8332,14 +8441,14 @@ var defaultAttributes = {
   }
 };
 /**
- * @license @tabler/icons-react v3.31.0 - MIT
+ * @license @tabler/icons-react v3.34.1 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
 const createReactComponent = (type, iconName, iconNamePascal, iconNode) => {
   const Component = forwardRef(
-    ({ color: color2 = "currentColor", size: size2 = 24, stroke = 2, title: title2, className, children: children2, ...rest }, ref) => createElement(
+    ({ color: color2 = "currentColor", size: size2 = 24, stroke = 2, title, className, children: children2, ...rest }, ref) => createElement(
       "svg",
       {
         ref,
@@ -8356,7 +8465,7 @@ const createReactComponent = (type, iconName, iconNamePascal, iconNode) => {
         ...rest
       },
       [
-        title2 && createElement("title", { key: "svg-title" }, title2),
+        title && createElement("title", { key: "svg-title" }, title),
         ...iconNode.map(([tag, attrs]) => createElement(tag, attrs)),
         ...Array.isArray(children2) ? children2 : [children2]
       ]
@@ -8365,89 +8474,90 @@ const createReactComponent = (type, iconName, iconNamePascal, iconNode) => {
   return Component.displayName = `${iconNamePascal}`, Component;
 };
 /**
- * @license @tabler/icons-react v3.31.0 - MIT
+ * @license @tabler/icons-react v3.34.1 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
-var IconBrowser = createReactComponent("outline", "browser", "IconBrowser", [["path", { d: "M4 8h16", key: "svg-0" }], ["path", { d: "M4 4m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z", key: "svg-1" }], ["path", { d: "M8 4v4", key: "svg-2" }]]);
+const __iconNode$b = [["path", { d: "M4 8h16", key: "svg-0" }], ["path", { d: "M4 4m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z", key: "svg-1" }], ["path", { d: "M8 4v4", key: "svg-2" }]], IconBrowser = createReactComponent("outline", "browser", "Browser", __iconNode$b);
 /**
- * @license @tabler/icons-react v3.31.0 - MIT
+ * @license @tabler/icons-react v3.34.1 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
-var IconCheck = createReactComponent("outline", "check", "IconCheck", [["path", { d: "M5 12l5 5l10 -10", key: "svg-0" }]]);
+const __iconNode$a = [["path", { d: "M5 12l5 5l10 -10", key: "svg-0" }]], IconCheck = createReactComponent("outline", "check", "Check", __iconNode$a);
 /**
- * @license @tabler/icons-react v3.31.0 - MIT
+ * @license @tabler/icons-react v3.34.1 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
-var IconCylinder = createReactComponent("outline", "cylinder", "IconCylinder", [["path", { d: "M12 6m-7 0a7 3 0 1 0 14 0a7 3 0 1 0 -14 0", key: "svg-0" }], ["path", { d: "M5 6v12c0 1.657 3.134 3 7 3s7 -1.343 7 -3v-12", key: "svg-1" }]]);
+const __iconNode$9 = [["path", { d: "M12 6m-7 0a7 3 0 1 0 14 0a7 3 0 1 0 -14 0", key: "svg-0" }], ["path", { d: "M5 6v12c0 1.657 3.134 3 7 3s7 -1.343 7 -3v-12", key: "svg-1" }]], IconCylinder = createReactComponent("outline", "cylinder", "Cylinder", __iconNode$9);
 /**
- * @license @tabler/icons-react v3.31.0 - MIT
+ * @license @tabler/icons-react v3.34.1 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
-var IconDeviceMobile = createReactComponent("outline", "device-mobile", "IconDeviceMobile", [["path", { d: "M6 5a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2v-14z", key: "svg-0" }], ["path", { d: "M11 4h2", key: "svg-1" }], ["path", { d: "M12 17v.01", key: "svg-2" }]]);
+const __iconNode$8 = [["path", { d: "M6 5a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2v-14z", key: "svg-0" }], ["path", { d: "M11 4h2", key: "svg-1" }], ["path", { d: "M12 17v.01", key: "svg-2" }]], IconDeviceMobile = createReactComponent("outline", "device-mobile", "DeviceMobile", __iconNode$8);
 /**
- * @license @tabler/icons-react v3.31.0 - MIT
+ * @license @tabler/icons-react v3.34.1 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
-var IconFileSymlink = createReactComponent("outline", "file-symlink", "IconFileSymlink", [["path", { d: "M4 21v-4a3 3 0 0 1 3 -3h5", key: "svg-0" }], ["path", { d: "M9 17l3 -3l-3 -3", key: "svg-1" }], ["path", { d: "M14 3v4a1 1 0 0 0 1 1h4", key: "svg-2" }], ["path", { d: "M5 11v-6a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2h-9.5", key: "svg-3" }]]);
+const __iconNode$7 = [["path", { d: "M4 21v-4a3 3 0 0 1 3 -3h5", key: "svg-0" }], ["path", { d: "M9 17l3 -3l-3 -3", key: "svg-1" }], ["path", { d: "M14 3v4a1 1 0 0 0 1 1h4", key: "svg-2" }], ["path", { d: "M5 11v-6a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2h-9.5", key: "svg-3" }]], IconFileSymlink = createReactComponent("outline", "file-symlink", "FileSymlink", __iconNode$7);
 /**
- * @license @tabler/icons-react v3.31.0 - MIT
+ * @license @tabler/icons-react v3.34.1 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
-var IconId = createReactComponent("outline", "id", "IconId", [["path", { d: "M3 4m0 3a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v10a3 3 0 0 1 -3 3h-12a3 3 0 0 1 -3 -3z", key: "svg-0" }], ["path", { d: "M9 10m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0", key: "svg-1" }], ["path", { d: "M15 8l2 0", key: "svg-2" }], ["path", { d: "M15 12l2 0", key: "svg-3" }], ["path", { d: "M7 16l10 0", key: "svg-4" }]]);
+const __iconNode$6 = [["path", { d: "M3 4m0 3a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v10a3 3 0 0 1 -3 3h-12a3 3 0 0 1 -3 -3z", key: "svg-0" }], ["path", { d: "M9 10m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0", key: "svg-1" }], ["path", { d: "M15 8l2 0", key: "svg-2" }], ["path", { d: "M15 12l2 0", key: "svg-3" }], ["path", { d: "M7 16l10 0", key: "svg-4" }]], IconId = createReactComponent("outline", "id", "Id", __iconNode$6);
 /**
- * @license @tabler/icons-react v3.31.0 - MIT
+ * @license @tabler/icons-react v3.34.1 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
-var IconRectangularPrism = createReactComponent("outline", "rectangular-prism", "IconRectangularPrism", [["path", { d: "M21 14.008v-5.018a1.98 1.98 0 0 0 -1 -1.717l-4 -2.008a2.016 2.016 0 0 0 -2 0l-10 5.008c-.619 .355 -1 1.01 -1 1.718v5.018c0 .709 .381 1.363 1 1.717l4 2.008a2.016 2.016 0 0 0 2 0l10 -5.008c.619 -.355 1 -1.01 1 -1.718z", key: "svg-0" }], ["path", { d: "M9 21v-7.5", key: "svg-1" }], ["path", { d: "M9 13.5l11.5 -5.5", key: "svg-2" }], ["path", { d: "M3.5 11l5.5 2.5", key: "svg-3" }]]);
+const __iconNode$5 = [["path", { d: "M21 14.008v-5.018a1.98 1.98 0 0 0 -1 -1.717l-4 -2.008a2.016 2.016 0 0 0 -2 0l-10 5.008c-.619 .355 -1 1.01 -1 1.718v5.018c0 .709 .381 1.363 1 1.717l4 2.008a2.016 2.016 0 0 0 2 0l10 -5.008c.619 -.355 1 -1.01 1 -1.718z", key: "svg-0" }], ["path", { d: "M9 21v-7.5", key: "svg-1" }], ["path", { d: "M9 13.5l11.5 -5.5", key: "svg-2" }], ["path", { d: "M3.5 11l5.5 2.5", key: "svg-3" }]], IconRectangularPrism = createReactComponent("outline", "rectangular-prism", "RectangularPrism", __iconNode$5);
 /**
- * @license @tabler/icons-react v3.31.0 - MIT
+ * @license @tabler/icons-react v3.34.1 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
-var IconReorder = createReactComponent("outline", "reorder", "IconReorder", [["path", { d: "M3 15m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v2a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z", key: "svg-0" }], ["path", { d: "M10 15m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v2a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z", key: "svg-1" }], ["path", { d: "M17 15m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v2a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z", key: "svg-2" }], ["path", { d: "M5 11v-3a3 3 0 0 1 3 -3h8a3 3 0 0 1 3 3v3", key: "svg-3" }], ["path", { d: "M16.5 8.5l2.5 2.5l2.5 -2.5", key: "svg-4" }]]);
+const __iconNode$4 = [["path", { d: "M3 15m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v2a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z", key: "svg-0" }], ["path", { d: "M10 15m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v2a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z", key: "svg-1" }], ["path", { d: "M17 15m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v2a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z", key: "svg-2" }], ["path", { d: "M5 11v-3a3 3 0 0 1 3 -3h8a3 3 0 0 1 3 3v3", key: "svg-3" }], ["path", { d: "M16.5 8.5l2.5 2.5l2.5 -2.5", key: "svg-4" }]], IconReorder = createReactComponent("outline", "reorder", "Reorder", __iconNode$4);
 /**
- * @license @tabler/icons-react v3.31.0 - MIT
+ * @license @tabler/icons-react v3.34.1 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
-var IconSelector = createReactComponent("outline", "selector", "IconSelector", [["path", { d: "M8 9l4 -4l4 4", key: "svg-0" }], ["path", { d: "M16 15l-4 4l-4 -4", key: "svg-1" }]]);
+const __iconNode$3 = [["path", { d: "M8 9l4 -4l4 4", key: "svg-0" }], ["path", { d: "M16 15l-4 4l-4 -4", key: "svg-1" }]], IconSelector = createReactComponent("outline", "selector", "Selector", __iconNode$3);
 /**
- * @license @tabler/icons-react v3.31.0 - MIT
+ * @license @tabler/icons-react v3.34.1 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
-var IconTransform = createReactComponent("outline", "transform", "IconTransform", [["path", { d: "M3 6a3 3 0 1 0 6 0a3 3 0 0 0 -6 0", key: "svg-0" }], ["path", { d: "M21 11v-3a2 2 0 0 0 -2 -2h-6l3 3m0 -6l-3 3", key: "svg-1" }], ["path", { d: "M3 13v3a2 2 0 0 0 2 2h6l-3 -3m0 6l3 -3", key: "svg-2" }], ["path", { d: "M15 18a3 3 0 1 0 6 0a3 3 0 0 0 -6 0", key: "svg-3" }]]);
+const __iconNode$2 = [["path", { d: "M3 6a3 3 0 1 0 6 0a3 3 0 0 0 -6 0", key: "svg-0" }], ["path", { d: "M21 11v-3a2 2 0 0 0 -2 -2h-6l3 3m0 -6l-3 3", key: "svg-1" }], ["path", { d: "M3 13v3a2 2 0 0 0 2 2h6l-3 -3m0 6l3 -3", key: "svg-2" }], ["path", { d: "M15 18a3 3 0 1 0 6 0a3 3 0 0 0 -6 0", key: "svg-3" }]], IconTransform = createReactComponent("outline", "transform", "Transform", __iconNode$2);
 /**
- * @license @tabler/icons-react v3.31.0 - MIT
+ * @license @tabler/icons-react v3.34.1 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
-var IconUser = createReactComponent("outline", "user", "IconUser", [["path", { d: "M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0", key: "svg-0" }], ["path", { d: "M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2", key: "svg-1" }]]);
+const __iconNode$1 = [["path", { d: "M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0", key: "svg-0" }], ["path", { d: "M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2", key: "svg-1" }]], IconUser = createReactComponent("outline", "user", "User", __iconNode$1);
 /**
- * @license @tabler/icons-react v3.31.0 - MIT
+ * @license @tabler/icons-react v3.34.1 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
-var IconZoomScan = createReactComponent("outline", "zoom-scan", "IconZoomScan", [["path", { d: "M4 8v-2a2 2 0 0 1 2 -2h2", key: "svg-0" }], ["path", { d: "M4 16v2a2 2 0 0 0 2 2h2", key: "svg-1" }], ["path", { d: "M16 4h2a2 2 0 0 1 2 2v2", key: "svg-2" }], ["path", { d: "M16 20h2a2 2 0 0 0 2 -2v-2", key: "svg-3" }], ["path", { d: "M8 11a3 3 0 1 0 6 0a3 3 0 0 0 -6 0", key: "svg-4" }], ["path", { d: "M16 16l-2.5 -2.5", key: "svg-5" }]]), s = { done: !1, hasNext: !1 };
+const __iconNode = [["path", { d: "M4 8v-2a2 2 0 0 1 2 -2h2", key: "svg-0" }], ["path", { d: "M4 16v2a2 2 0 0 0 2 2h2", key: "svg-1" }], ["path", { d: "M16 4h2a2 2 0 0 1 2 2v2", key: "svg-2" }], ["path", { d: "M16 20h2a2 2 0 0 0 2 -2v-2", key: "svg-3" }], ["path", { d: "M8 11a3 3 0 1 0 6 0a3 3 0 0 0 -6 0", key: "svg-4" }], ["path", { d: "M16 16l-2.5 -2.5", key: "svg-5" }]], IconZoomScan = createReactComponent("outline", "zoom-scan", "ZoomScan", __iconNode);
+var s = { done: !1, hasNext: !1 };
 function C(t2, ...o2) {
   let n2 = t2, u2 = o2.map((e2) => "lazy" in e2 ? y(e2) : void 0), p = 0;
   for (; p < o2.length; ) {
@@ -8517,18 +8627,15 @@ function n$1(e2) {
   return !!e2;
 }
 function r(...n2) {
-  return u$2(t$5, n2);
+  return u$2(t$4, n2);
 }
-var t$5 = (n2, o2) => n2.join(o2);
-function t$4(...n2) {
+var t$4 = (n2, o2) => n2.join(o2);
+function t$3(...n2) {
   return u$2(Object.keys, n2);
 }
 function e(r2) {
   return typeof r2 == "number" && !Number.isNaN(r2);
 }
-function t$3(r2) {
-  return typeof r2 == "string";
-}
 function n(e2) {
   return e2 === void 0 ? !0 : typeof e2 == "string" || Array.isArray(e2) ? e2.length === 0 : Object.keys(e2).length === 0;
 }
@@ -8557,88 +8664,117 @@ function useConstant(init2) {
   const ref = useRef(null);
   return ref.current === null && (ref.current = init2()), ref.current;
 }
-const isBrowser$1 = typeof window < "u", useIsomorphicLayoutEffect$1 = isBrowser$1 ? useLayoutEffect : useEffect, PresenceContext = /* @__PURE__ */ createContext(null), MotionConfigContext = createContext({
+const isBrowser$1 = typeof window < "u", useIsomorphicLayoutEffect$1 = isBrowser$1 ? useLayoutEffect : useEffect, PresenceContext = /* @__PURE__ */ createContext(null), clamp$1 = (min2, max2, v) => v > max2 ? max2 : v < min2 ? min2 : v, checkStringStartsWith = (token) => (key) => typeof key == "string" && key.startsWith(token), isCSSVariableName = /* @__PURE__ */ checkStringStartsWith("--"), startsAsVariableToken = /* @__PURE__ */ checkStringStartsWith("var(--"), isCSSVariableToken = (value) => startsAsVariableToken(value) ? singleCssVariableRegex.test(value.split("/*")[0].trim()) : !1, singleCssVariableRegex = /var\(--(?:[\w-]+\s*|[\w-]+\s*,(?:\s*[^)(\s]|\s*\((?:[^)(]|\([^)(]*\))*\))+\s*)\)$/iu, number = {
+  test: (v) => typeof v == "number",
+  parse: parseFloat,
+  transform: (v) => v
+}, alpha = {
+  ...number,
+  transform: (v) => clamp$1(0, 1, v)
+}, scale = {
+  ...number,
+  default: 1
+}, createUnitType = /* @__NO_SIDE_EFFECTS__ */ (unit) => ({
+  test: (v) => typeof v == "string" && v.endsWith(unit) && v.split(" ").length === 1,
+  parse: parseFloat,
+  transform: (v) => `${v}${unit}`
+}), degrees$1 = /* @__PURE__ */ createUnitType("deg"), percent = /* @__PURE__ */ createUnitType("%"), px = /* @__PURE__ */ createUnitType("px"), vh = /* @__PURE__ */ createUnitType("vh"), vw = /* @__PURE__ */ createUnitType("vw"), progressPercentage = {
+  ...percent,
+  parse: (v) => percent.parse(v) / 100,
+  transform: (v) => percent.transform(v * 100)
+}, transformPropOrder = [
+  "transformPerspective",
+  "x",
+  "y",
+  "z",
+  "translateX",
+  "translateY",
+  "translateZ",
+  "scale",
+  "scaleX",
+  "scaleY",
+  "rotate",
+  "rotateX",
+  "rotateY",
+  "rotateZ",
+  "skew",
+  "skewX",
+  "skewY"
+], transformProps = new Set(transformPropOrder), int = {
+  ...number,
+  transform: Math.round
+}, transformValueTypes = {
+  rotate: degrees$1,
+  rotateX: degrees$1,
+  rotateY: degrees$1,
+  rotateZ: degrees$1,
+  scale,
+  scaleX: scale,
+  scaleY: scale,
+  scaleZ: scale,
+  skew: degrees$1,
+  skewX: degrees$1,
+  skewY: degrees$1,
+  distance: px,
+  translateX: px,
+  translateY: px,
+  translateZ: px,
+  x: px,
+  y: px,
+  z: px,
+  perspective: px,
+  transformPerspective: px,
+  opacity: alpha,
+  originX: progressPercentage,
+  originY: progressPercentage,
+  originZ: px
+}, numberValueTypes = {
+  // Border props
+  borderWidth: px,
+  borderTopWidth: px,
+  borderRightWidth: px,
+  borderBottomWidth: px,
+  borderLeftWidth: px,
+  borderRadius: px,
+  radius: px,
+  borderTopLeftRadius: px,
+  borderTopRightRadius: px,
+  borderBottomRightRadius: px,
+  borderBottomLeftRadius: px,
+  // Positioning props
+  width: px,
+  maxWidth: px,
+  height: px,
+  maxHeight: px,
+  top: px,
+  right: px,
+  bottom: px,
+  left: px,
+  // Spacing props
+  padding: px,
+  paddingTop: px,
+  paddingRight: px,
+  paddingBottom: px,
+  paddingLeft: px,
+  margin: px,
+  marginTop: px,
+  marginRight: px,
+  marginBottom: px,
+  marginLeft: px,
+  // Misc
+  backgroundPositionX: px,
+  backgroundPositionY: px,
+  ...transformValueTypes,
+  zIndex: int,
+  // SVG
+  fillOpacity: alpha,
+  strokeOpacity: alpha,
+  numOctaves: int
+}, getValueAsType = (value, type) => type && typeof value == "number" ? type.transform(value) : value, isMotionValue = (value) => !!(value && value.getVelocity), MotionConfigContext = createContext({
   transformPagePoint: (p) => p,
   isStatic: !1,
   reducedMotion: "never"
-}), stepsOrder = [
-  "setup",
-  // Compute
-  "read",
-  // Read
-  "resolveKeyframes",
-  // Write/Read/Write/Read
-  "preUpdate",
-  // Compute
-  "update",
-  // Compute
-  "preRender",
-  // Compute
-  "render",
-  // Write
-  "postRender"
-  // Compute
-];
-function createRenderStep(runNextFrame, stepName) {
-  let thisFrame = /* @__PURE__ */ new Set(), nextFrame = /* @__PURE__ */ new Set(), isProcessing = !1, flushNextFrame = !1;
-  const toKeepAlive = /* @__PURE__ */ new WeakSet();
-  let latestFrameData = {
-    delta: 0,
-    timestamp: 0,
-    isProcessing: !1
-  };
-  function triggerCallback(callback) {
-    toKeepAlive.has(callback) && (step.schedule(callback), runNextFrame()), callback(latestFrameData);
-  }
-  const step = {
-    /**
-     * Schedule a process to run on the next frame.
-     */
-    schedule: (callback, keepAlive = !1, immediate = !1) => {
-      const queue = immediate && isProcessing ? thisFrame : nextFrame;
-      return keepAlive && toKeepAlive.add(callback), queue.has(callback) || queue.add(callback), callback;
-    },
-    /**
-     * Cancel the provided callback from running on the next frame.
-     */
-    cancel: (callback) => {
-      nextFrame.delete(callback), toKeepAlive.delete(callback);
-    },
-    /**
-     * Execute all schedule callbacks.
-     */
-    process: (frameData) => {
-      if (latestFrameData = frameData, isProcessing) {
-        flushNextFrame = !0;
-        return;
-      }
-      isProcessing = !0, [thisFrame, nextFrame] = [nextFrame, thisFrame], thisFrame.forEach(triggerCallback), thisFrame.clear(), isProcessing = !1, flushNextFrame && (flushNextFrame = !1, step.process(frameData));
-    }
-  };
-  return step;
-}
-const MotionGlobalConfig = {}, maxElapsed = 40;
-function createRenderBatcher(scheduleNextBatch, allowKeepAlive) {
-  let runNextFrame = !1, useDefaultElapsed = !0;
-  const state = {
-    delta: 0,
-    timestamp: 0,
-    isProcessing: !1
-  }, flagRunNextFrame = () => runNextFrame = !0, steps = stepsOrder.reduce((acc, key) => (acc[key] = createRenderStep(flagRunNextFrame), acc), {}), { setup, read, resolveKeyframes, preUpdate, update, preRender, render, postRender } = steps, processBatch = () => {
-    const timestamp = MotionGlobalConfig.useManualTiming ? state.timestamp : performance.now();
-    runNextFrame = !1, MotionGlobalConfig.useManualTiming || (state.delta = useDefaultElapsed ? 1e3 / 60 : Math.max(Math.min(timestamp - state.timestamp, maxElapsed), 1)), state.timestamp = timestamp, state.isProcessing = !0, setup.process(state), read.process(state), resolveKeyframes.process(state), preUpdate.process(state), update.process(state), preRender.process(state), render.process(state), postRender.process(state), state.isProcessing = !1, runNextFrame && allowKeepAlive && (useDefaultElapsed = !1, scheduleNextBatch(processBatch));
-  }, wake2 = () => {
-    runNextFrame = !0, useDefaultElapsed = !0, state.isProcessing || scheduleNextBatch(processBatch);
-  };
-  return { schedule: stepsOrder.reduce((acc, key) => {
-    const step = steps[key];
-    return acc[key] = (process2, keepAlive = !1, immediate = !1) => (runNextFrame || wake2(), step.schedule(process2, keepAlive, immediate)), acc;
-  }, {}), cancel: (process2) => {
-    for (let i2 = 0; i2 < stepsOrder.length; i2++)
-      steps[stepsOrder[i2]].cancel(process2);
-  }, state, steps };
-}
-const LazyContext = createContext({ strict: !1 }), featureProps = {
+}), LazyContext = createContext({ strict: !1 }), featureProps = {
   animation: [
     "animate",
     "variants",
@@ -8662,6 +8798,13 @@ for (const key in featureProps)
   featureDefinitions[key] = {
     isEnabled: (props) => featureProps[key].some((name) => !!props[name])
   };
+function loadFeatures(features) {
+  for (const key in features)
+    featureDefinitions[key] = {
+      ...featureDefinitions[key],
+      ...features[key]
+    };
+}
 const validMotionProps = /* @__PURE__ */ new Set([
   "animate",
   "exit",
@@ -8699,7 +8842,7 @@ function isValidMotionProp(key) {
 }
 let shouldForward = (key) => !isValidMotionProp(key);
 function loadExternalIsValidProp(isValidProp) {
-  isValidProp && (shouldForward = (key) => key.startsWith("on") ? !isValidMotionProp(key) : isValidProp(key));
+  typeof isValidProp == "function" && (shouldForward = (key) => key.startsWith("on") ? !isValidMotionProp(key) : isValidProp(key));
 }
 try {
   loadExternalIsValidProp(require("@emotion/is-prop-valid").default);
@@ -8712,19 +8855,6 @@ function filterProps(props, isDom, forwardMotionProps) {
     props.draggable && key.startsWith("onDrag")) && (filteredProps[key] = props[key]);
   return filteredProps;
 }
-function createDOMMotionComponentProxy(componentFactory) {
-  if (typeof Proxy > "u")
-    return componentFactory;
-  const componentCache = /* @__PURE__ */ new Map(), deprecatedFactoryFunction = (...args) => componentFactory(...args);
-  return new Proxy(deprecatedFactoryFunction, {
-    /**
-     * Called when `motion` is referenced with a prop: `motion.div`, `motion.input` etc.
-     * The prop name is passed through as `key` and we can use that to generate a `motion`
-     * DOM component with that name.
-     */
-    get: (_target, key) => key === "create" ? componentFactory : (componentCache.has(key) || componentCache.set(key, componentFactory(key)), componentCache.get(key))
-  });
-}
 const MotionContext = /* @__PURE__ */ createContext({});
 function isAnimationControls(v) {
   return v !== null && typeof v == "object" && typeof v.start == "function";
@@ -8747,243 +8877,32 @@ function isControllingVariants(props) {
 function isVariantNode(props) {
   return !!(isControllingVariants(props) || props.variants);
 }
-function getCurrentTreeVariants(props, context2) {
-  if (isControllingVariants(props)) {
-    const { initial, animate } = props;
-    return {
-      initial: initial === !1 || isVariantLabel(initial) ? initial : void 0,
-      animate: isVariantLabel(animate) ? animate : void 0
-    };
-  }
-  return props.inherit !== !1 ? context2 : {};
-}
-function useCreateMotionContext(props) {
-  const { initial, animate } = getCurrentTreeVariants(props, useContext(MotionContext));
-  return useMemo(() => ({ initial, animate }), [variantLabelsAsDependency(initial), variantLabelsAsDependency(animate)]);
-}
-function variantLabelsAsDependency(prop) {
-  return Array.isArray(prop) ? prop.join(" ") : prop;
-}
-const motionComponentSymbol = Symbol.for("motionComponentSymbol");
-function isRefObject(ref) {
-  return ref && typeof ref == "object" && Object.prototype.hasOwnProperty.call(ref, "current");
-}
-function useMotionRef(visualState, visualElement, externalRef) {
-  return useCallback(
-    (instance) => {
-      instance && visualState.onMount && visualState.onMount(instance), visualElement && (instance ? visualElement.mount(instance) : visualElement.unmount()), externalRef && (typeof externalRef == "function" ? externalRef(instance) : isRefObject(externalRef) && (externalRef.current = instance));
-    },
-    /**
-     * Only pass a new ref callback to React if we've received a visual element
-     * factory. Otherwise we'll be mounting/remounting every time externalRef
-     * or other dependencies change.
-     */
-    [visualElement]
-  );
-}
-const camelToDash = (str) => str.replace(/([a-z])([A-Z])/gu, "$1-$2").toLowerCase(), optimizedAppearDataId = "framerAppearId", optimizedAppearDataAttribute = "data-" + camelToDash(optimizedAppearDataId), SwitchLayoutGroupContext = createContext({}), { schedule: microtask } = /* @__PURE__ */ createRenderBatcher(queueMicrotask, !1);
-function useVisualElement(Component, visualState, props, createVisualElement, ProjectionNodeConstructor) {
-  const { visualElement: parent } = useContext(MotionContext), lazyContext = useContext(LazyContext), presenceContext = useContext(PresenceContext), reducedMotionConfig = useContext(MotionConfigContext).reducedMotion, visualElementRef = useRef(null);
-  createVisualElement = createVisualElement || lazyContext.renderer, !visualElementRef.current && createVisualElement && (visualElementRef.current = createVisualElement(Component, {
-    visualState,
-    parent,
-    props,
-    presenceContext,
-    blockInitialAnimation: presenceContext ? presenceContext.initial === !1 : !1,
-    reducedMotionConfig
-  }));
-  const visualElement = visualElementRef.current, initialLayoutGroupConfig = useContext(SwitchLayoutGroupContext);
-  visualElement && !visualElement.projection && ProjectionNodeConstructor && (visualElement.type === "html" || visualElement.type === "svg") && createProjectionNode(visualElementRef.current, props, ProjectionNodeConstructor, initialLayoutGroupConfig);
-  const isMounted = useRef(!1);
-  useInsertionEffect$1(() => {
-    visualElement && isMounted.current && visualElement.update(props, presenceContext);
-  });
-  const optimisedAppearId = props[optimizedAppearDataAttribute], wantsHandoff = useRef(!!optimisedAppearId && !window.MotionHandoffIsComplete?.(optimisedAppearId) && window.MotionHasOptimisedAnimation?.(optimisedAppearId));
-  return useIsomorphicLayoutEffect$1(() => {
-    visualElement && (isMounted.current = !0, window.MotionIsMounted = !0, visualElement.updateFeatures(), microtask.render(visualElement.render), wantsHandoff.current && visualElement.animationState && visualElement.animationState.animateChanges());
-  }), useEffect(() => {
-    visualElement && (!wantsHandoff.current && visualElement.animationState && visualElement.animationState.animateChanges(), wantsHandoff.current && (queueMicrotask(() => {
-      window.MotionHandoffMarkAsComplete?.(optimisedAppearId);
-    }), wantsHandoff.current = !1));
-  }), visualElement;
-}
-function createProjectionNode(visualElement, props, ProjectionNodeConstructor, initialPromotionConfig) {
-  const { layoutId, layout, drag: drag2, dragConstraints, layoutScroll, layoutRoot, layoutCrossfade } = props;
-  visualElement.projection = new ProjectionNodeConstructor(visualElement.latestValues, props["data-framer-portal-id"] ? void 0 : getClosestProjectingNode(visualElement.parent)), visualElement.projection.setOptions({
-    layoutId,
-    layout,
-    alwaysMeasureLayout: !!drag2 || dragConstraints && isRefObject(dragConstraints),
-    visualElement,
-    /**
-     * TODO: Update options in an effect. This could be tricky as it'll be too late
-     * to update by the time layout animations run.
-     * We also need to fix this safeToRemove by linking it up to the one returned by usePresence,
-     * ensuring it gets called if there's no potential layout animations.
-     *
-     */
-    animationType: typeof layout == "string" ? layout : "both",
-    initialPromotionConfig,
-    crossfade: layoutCrossfade,
-    layoutScroll,
-    layoutRoot
-  });
-}
-function getClosestProjectingNode(visualElement) {
-  if (visualElement)
-    return visualElement.options.allowProjection !== !1 ? visualElement.projection : getClosestProjectingNode(visualElement.parent);
-}
-function createRendererMotionComponent({ preloadedFeatures, createVisualElement, useRender, useVisualState, Component }) {
-  function MotionComponent(props, externalRef) {
-    let MeasureLayout;
-    const configAndProps = {
-      ...useContext(MotionConfigContext),
-      ...props,
-      layoutId: useLayoutId(props)
-    }, { isStatic } = configAndProps, context2 = useCreateMotionContext(props), visualState = useVisualState(props, isStatic);
-    if (!isStatic && isBrowser$1) {
-      useStrictMode();
-      const layoutProjection = getProjectionFunctionality(configAndProps);
-      MeasureLayout = layoutProjection.MeasureLayout, context2.visualElement = useVisualElement(Component, visualState, configAndProps, createVisualElement, layoutProjection.ProjectionNode);
-    }
-    return jsxs(MotionContext.Provider, { value: context2, children: [MeasureLayout && context2.visualElement ? jsx(MeasureLayout, { visualElement: context2.visualElement, ...configAndProps }) : null, useRender(Component, props, useMotionRef(visualState, context2.visualElement, externalRef), visualState, isStatic, context2.visualElement)] });
-  }
-  MotionComponent.displayName = `motion.${typeof Component == "string" ? Component : `create(${Component.displayName ?? Component.name ?? ""})`}`;
-  const ForwardRefMotionComponent = forwardRef(MotionComponent);
-  return ForwardRefMotionComponent[motionComponentSymbol] = Component, ForwardRefMotionComponent;
-}
-function useLayoutId({ layoutId }) {
-  const layoutGroupId = useContext(LayoutGroupContext).id;
-  return layoutGroupId && layoutId !== void 0 ? layoutGroupId + "-" + layoutId : layoutId;
-}
-function useStrictMode(configAndProps, preloadedFeatures) {
-  useContext(LazyContext).strict;
-}
-function getProjectionFunctionality(props) {
-  const { drag: drag2, layout } = featureDefinitions;
-  if (!drag2 && !layout)
-    return {};
-  const combined = { ...drag2, ...layout };
-  return {
-    MeasureLayout: drag2?.isEnabled(props) || layout?.isEnabled(props) ? combined.MeasureLayout : void 0,
-    ProjectionNode: combined.ProjectionNode
-  };
-}
-const checkStringStartsWith = (token) => (key) => typeof key == "string" && key.startsWith(token), isCSSVariableName = /* @__PURE__ */ checkStringStartsWith("--"), startsAsVariableToken = /* @__PURE__ */ checkStringStartsWith("var(--"), isCSSVariableToken = (value) => startsAsVariableToken(value) ? singleCssVariableRegex.test(value.split("/*")[0].trim()) : !1, singleCssVariableRegex = /var\(--(?:[\w-]+\s*|[\w-]+\s*,(?:\s*[^)(\s]|\s*\((?:[^)(]|\([^)(]*\))*\))+\s*)\)$/iu, scaleCorrectors = {};
-function addScaleCorrector(correctors) {
-  for (const key in correctors)
-    scaleCorrectors[key] = correctors[key], isCSSVariableName(key) && (scaleCorrectors[key].isCSSVariable = !0);
-}
-const transformPropOrder = [
-  "transformPerspective",
-  "x",
-  "y",
-  "z",
-  "translateX",
-  "translateY",
-  "translateZ",
-  "scale",
-  "scaleX",
-  "scaleY",
-  "rotate",
-  "rotateX",
-  "rotateY",
-  "rotateZ",
-  "skew",
-  "skewX",
-  "skewY"
-], transformProps = new Set(transformPropOrder);
-function isForcedMotionValue(key, { layout, layoutId }) {
-  return transformProps.has(key) || key.startsWith("origin") || (layout || layoutId !== void 0) && (!!scaleCorrectors[key] || key === "opacity");
-}
-const getValueAsType = (value, type) => type && typeof value == "number" ? type.transform(value) : value, clamp$1 = (min2, max2, v) => v > max2 ? max2 : v < min2 ? min2 : v, number = {
-  test: (v) => typeof v == "number",
-  parse: parseFloat,
-  transform: (v) => v
-}, alpha = {
-  ...number,
-  transform: (v) => clamp$1(0, 1, v)
-}, scale = {
-  ...number,
-  default: 1
-}, int = {
-  ...number,
-  transform: Math.round
-}, createUnitType = /* @__NO_SIDE_EFFECTS__ */ (unit) => ({
-  test: (v) => typeof v == "string" && v.endsWith(unit) && v.split(" ").length === 1,
-  parse: parseFloat,
-  transform: (v) => `${v}${unit}`
-}), degrees$1 = /* @__PURE__ */ createUnitType("deg"), percent = /* @__PURE__ */ createUnitType("%"), px = /* @__PURE__ */ createUnitType("px"), vh = /* @__PURE__ */ createUnitType("vh"), vw = /* @__PURE__ */ createUnitType("vw"), progressPercentage = {
-  ...percent,
-  parse: (v) => percent.parse(v) / 100,
-  transform: (v) => percent.transform(v * 100)
-}, transformValueTypes = {
-  rotate: degrees$1,
-  rotateX: degrees$1,
-  rotateY: degrees$1,
-  rotateZ: degrees$1,
-  scale,
-  scaleX: scale,
-  scaleY: scale,
-  scaleZ: scale,
-  skew: degrees$1,
-  skewX: degrees$1,
-  skewY: degrees$1,
-  distance: px,
-  translateX: px,
-  translateY: px,
-  translateZ: px,
-  x: px,
-  y: px,
-  z: px,
-  perspective: px,
-  transformPerspective: px,
-  opacity: alpha,
-  originX: progressPercentage,
-  originY: progressPercentage,
-  originZ: px
-}, numberValueTypes = {
-  // Border props
-  borderWidth: px,
-  borderTopWidth: px,
-  borderRightWidth: px,
-  borderBottomWidth: px,
-  borderLeftWidth: px,
-  borderRadius: px,
-  radius: px,
-  borderTopLeftRadius: px,
-  borderTopRightRadius: px,
-  borderBottomRightRadius: px,
-  borderBottomLeftRadius: px,
-  // Positioning props
-  width: px,
-  maxWidth: px,
-  height: px,
-  maxHeight: px,
-  top: px,
-  right: px,
-  bottom: px,
-  left: px,
-  // Spacing props
-  padding: px,
-  paddingTop: px,
-  paddingRight: px,
-  paddingBottom: px,
-  paddingLeft: px,
-  margin: px,
-  marginTop: px,
-  marginRight: px,
-  marginBottom: px,
-  marginLeft: px,
-  // Misc
-  backgroundPositionX: px,
-  backgroundPositionY: px,
-  ...transformValueTypes,
-  zIndex: int,
-  // SVG
-  fillOpacity: alpha,
-  strokeOpacity: alpha,
-  numOctaves: int
-}, translateAlias = {
+function getCurrentTreeVariants(props, context2) {
+  if (isControllingVariants(props)) {
+    const { initial, animate } = props;
+    return {
+      initial: initial === !1 || isVariantLabel(initial) ? initial : void 0,
+      animate: isVariantLabel(animate) ? animate : void 0
+    };
+  }
+  return props.inherit !== !1 ? context2 : {};
+}
+function useCreateMotionContext(props) {
+  const { initial, animate } = getCurrentTreeVariants(props, useContext(MotionContext));
+  return useMemo(() => ({ initial, animate }), [variantLabelsAsDependency(initial), variantLabelsAsDependency(animate)]);
+}
+function variantLabelsAsDependency(prop) {
+  return Array.isArray(prop) ? prop.join(" ") : prop;
+}
+const scaleCorrectors = {};
+function addScaleCorrector(correctors) {
+  for (const key in correctors)
+    scaleCorrectors[key] = correctors[key], isCSSVariableName(key) && (scaleCorrectors[key].isCSSVariable = !0);
+}
+function isForcedMotionValue(key, { layout, layoutId }) {
+  return transformProps.has(key) || key.startsWith("origin") || (layout || layoutId !== void 0) && (!!scaleCorrectors[key] || key === "opacity");
+}
+const translateAlias = {
   x: "translateX",
   y: "translateY",
   z: "translateZ",
@@ -9034,7 +8953,7 @@ const createHtmlRenderState = () => ({
   transform: {},
   transformOrigin: {},
   vars: {}
-}), isMotionValue = (value) => !!(value && value.getVelocity);
+});
 function copyRawValuesOnly(target, source, props) {
   for (const key in source)
     !isMotionValue(source[key]) && !isForcedMotionValue(key, props) && (target[key] = source[key]);
@@ -9150,14 +9069,12 @@ function isSVGComponent(Component) {
     )
   );
 }
-function createUseRender(forwardMotionProps = !1) {
-  return (Component, props, ref, { latestValues }, isStatic) => {
-    const visualProps = (isSVGComponent(Component) ? useSVGProps : useHTMLProps)(props, latestValues, isStatic, Component), filteredProps = filterProps(props, typeof Component == "string", forwardMotionProps), elementProps = Component !== Fragment ? { ...filteredProps, ...visualProps, ref } : {}, { children: children2 } = props, renderedChildren = useMemo(() => isMotionValue(children2) ? children2.get() : children2, [children2]);
-    return createElement(Component, {
-      ...elementProps,
-      children: renderedChildren
-    });
-  };
+function useRender(Component, props, ref, { latestValues }, isStatic, forwardMotionProps = !1) {
+  const visualProps = (isSVGComponent(Component) ? useSVGProps : useHTMLProps)(props, latestValues, isStatic, Component), filteredProps = filterProps(props, typeof Component == "string", forwardMotionProps), elementProps = Component !== Fragment ? { ...filteredProps, ...visualProps, ref } : {}, { children: children2 } = props, renderedChildren = useMemo(() => isMotionValue(children2) ? children2.get() : children2, [children2]);
+  return createElement(Component, {
+    ...elementProps,
+    children: renderedChildren
+  });
 }
 function getValueState(visualElement) {
   const state = [{}, {}];
@@ -9185,10 +9102,6 @@ function makeState({ scrapeMotionValuesFromProps: scrapeMotionValuesFromProps2,
     renderState: createRenderState()
   };
 }
-const makeUseVisualState = (config) => (props, isStatic) => {
-  const context2 = useContext(MotionContext), presenceContext = useContext(PresenceContext), make = () => makeState(config, props, context2, presenceContext);
-  return isStatic ? make() : useConstant(make);
-};
 function makeLatestValues(props, context2, presenceContext, scrapeMotionValues) {
   const values2 = {}, motionValues = scrapeMotionValues(props, {});
   for (const key in motionValues)
@@ -9220,18 +9133,20 @@ function makeLatestValues(props, context2, presenceContext, scrapeMotionValues)
   }
   return values2;
 }
+const makeUseVisualState = (config) => (props, isStatic) => {
+  const context2 = useContext(MotionContext), presenceContext = useContext(PresenceContext), make = () => makeState(config, props, context2, presenceContext);
+  return isStatic ? make() : useConstant(make);
+};
 function scrapeMotionValuesFromProps$1(props, prevProps, visualElement) {
   const { style: style2 } = props, newValues = {};
   for (const key in style2)
     (isMotionValue(style2[key]) || prevProps.style && isMotionValue(prevProps.style[key]) || isForcedMotionValue(key, props) || visualElement?.getValue(key)?.liveStyle !== void 0) && (newValues[key] = style2[key]);
   return newValues;
 }
-const htmlMotionConfig = {
-  useVisualState: makeUseVisualState({
-    scrapeMotionValuesFromProps: scrapeMotionValuesFromProps$1,
-    createRenderState: createHtmlRenderState
-  })
-};
+const useHTMLVisualState = /* @__PURE__ */ makeUseVisualState({
+  scrapeMotionValuesFromProps: scrapeMotionValuesFromProps$1,
+  createRenderState: createHtmlRenderState
+});
 function scrapeMotionValuesFromProps(props, prevProps, visualElement) {
   const newValues = scrapeMotionValuesFromProps$1(props, prevProps, visualElement);
   for (const key in props)
@@ -9241,30 +9156,134 @@ function scrapeMotionValuesFromProps(props, prevProps, visualElement) {
     }
   return newValues;
 }
-const svgMotionConfig = {
-  useVisualState: makeUseVisualState({
-    scrapeMotionValuesFromProps,
-    createRenderState: createSvgRenderState
-  })
-};
-function createMotionComponentFactory(preloadedFeatures, createVisualElement) {
-  return function(Component, { forwardMotionProps } = { forwardMotionProps: !1 }) {
-    const config = {
-      ...isSVGComponent(Component) ? svgMotionConfig : htmlMotionConfig,
-      preloadedFeatures,
-      useRender: createUseRender(forwardMotionProps),
-      createVisualElement,
-      Component
-    };
-    return createRendererMotionComponent(config);
+const useSVGVisualState = /* @__PURE__ */ makeUseVisualState({
+  scrapeMotionValuesFromProps,
+  createRenderState: createSvgRenderState
+}), motionComponentSymbol = Symbol.for("motionComponentSymbol");
+function isRefObject(ref) {
+  return ref && typeof ref == "object" && Object.prototype.hasOwnProperty.call(ref, "current");
+}
+function useMotionRef(visualState, visualElement, externalRef) {
+  return useCallback(
+    (instance) => {
+      instance && visualState.onMount && visualState.onMount(instance), visualElement && (instance ? visualElement.mount(instance) : visualElement.unmount()), externalRef && (typeof externalRef == "function" ? externalRef(instance) : isRefObject(externalRef) && (externalRef.current = instance));
+    },
+    /**
+     * Only pass a new ref callback to React if we've received a visual element
+     * factory. Otherwise we'll be mounting/remounting every time externalRef
+     * or other dependencies change.
+     */
+    [visualElement]
+  );
+}
+const camelToDash = (str) => str.replace(/([a-z])([A-Z])/gu, "$1-$2").toLowerCase(), optimizedAppearDataId = "framerAppearId", optimizedAppearDataAttribute = "data-" + camelToDash(optimizedAppearDataId), SwitchLayoutGroupContext = createContext({});
+function useVisualElement(Component, visualState, props, createVisualElement, ProjectionNodeConstructor) {
+  const { visualElement: parent } = useContext(MotionContext), lazyContext = useContext(LazyContext), presenceContext = useContext(PresenceContext), reducedMotionConfig = useContext(MotionConfigContext).reducedMotion, visualElementRef = useRef(null);
+  createVisualElement = createVisualElement || lazyContext.renderer, !visualElementRef.current && createVisualElement && (visualElementRef.current = createVisualElement(Component, {
+    visualState,
+    parent,
+    props,
+    presenceContext,
+    blockInitialAnimation: presenceContext ? presenceContext.initial === !1 : !1,
+    reducedMotionConfig
+  }));
+  const visualElement = visualElementRef.current, initialLayoutGroupConfig = useContext(SwitchLayoutGroupContext);
+  visualElement && !visualElement.projection && ProjectionNodeConstructor && (visualElement.type === "html" || visualElement.type === "svg") && createProjectionNode(visualElementRef.current, props, ProjectionNodeConstructor, initialLayoutGroupConfig);
+  const isMounted = useRef(!1);
+  useInsertionEffect$1(() => {
+    visualElement && isMounted.current && visualElement.update(props, presenceContext);
+  });
+  const optimisedAppearId = props[optimizedAppearDataAttribute], wantsHandoff = useRef(!!optimisedAppearId && !window.MotionHandoffIsComplete?.(optimisedAppearId) && window.MotionHasOptimisedAnimation?.(optimisedAppearId));
+  return useIsomorphicLayoutEffect$1(() => {
+    visualElement && (isMounted.current = !0, window.MotionIsMounted = !0, visualElement.updateFeatures(), visualElement.scheduleRenderMicrotask(), wantsHandoff.current && visualElement.animationState && visualElement.animationState.animateChanges());
+  }), useEffect(() => {
+    visualElement && (!wantsHandoff.current && visualElement.animationState && visualElement.animationState.animateChanges(), wantsHandoff.current && (queueMicrotask(() => {
+      window.MotionHandoffMarkAsComplete?.(optimisedAppearId);
+    }), wantsHandoff.current = !1), visualElement.enteringChildren = void 0);
+  }), visualElement;
+}
+function createProjectionNode(visualElement, props, ProjectionNodeConstructor, initialPromotionConfig) {
+  const { layoutId, layout, drag: drag2, dragConstraints, layoutScroll, layoutRoot, layoutCrossfade } = props;
+  visualElement.projection = new ProjectionNodeConstructor(visualElement.latestValues, props["data-framer-portal-id"] ? void 0 : getClosestProjectingNode(visualElement.parent)), visualElement.projection.setOptions({
+    layoutId,
+    layout,
+    alwaysMeasureLayout: !!drag2 || dragConstraints && isRefObject(dragConstraints),
+    visualElement,
+    /**
+     * TODO: Update options in an effect. This could be tricky as it'll be too late
+     * to update by the time layout animations run.
+     * We also need to fix this safeToRemove by linking it up to the one returned by usePresence,
+     * ensuring it gets called if there's no potential layout animations.
+     *
+     */
+    animationType: typeof layout == "string" ? layout : "both",
+    initialPromotionConfig,
+    crossfade: layoutCrossfade,
+    layoutScroll,
+    layoutRoot
+  });
+}
+function getClosestProjectingNode(visualElement) {
+  if (visualElement)
+    return visualElement.options.allowProjection !== !1 ? visualElement.projection : getClosestProjectingNode(visualElement.parent);
+}
+function createMotionComponent(Component, { forwardMotionProps = !1 } = {}, preloadedFeatures, createVisualElement) {
+  preloadedFeatures && loadFeatures(preloadedFeatures);
+  const useVisualState = isSVGComponent(Component) ? useSVGVisualState : useHTMLVisualState;
+  function MotionDOMComponent(props, externalRef) {
+    let MeasureLayout;
+    const configAndProps = {
+      ...useContext(MotionConfigContext),
+      ...props,
+      layoutId: useLayoutId(props)
+    }, { isStatic } = configAndProps, context2 = useCreateMotionContext(props), visualState = useVisualState(props, isStatic);
+    if (!isStatic && isBrowser$1) {
+      useStrictMode();
+      const layoutProjection = getProjectionFunctionality(configAndProps);
+      MeasureLayout = layoutProjection.MeasureLayout, context2.visualElement = useVisualElement(Component, visualState, configAndProps, createVisualElement, layoutProjection.ProjectionNode);
+    }
+    return jsxs(MotionContext.Provider, { value: context2, children: [MeasureLayout && context2.visualElement ? jsx(MeasureLayout, { visualElement: context2.visualElement, ...configAndProps }) : null, useRender(Component, props, useMotionRef(visualState, context2.visualElement, externalRef), visualState, isStatic, forwardMotionProps)] });
+  }
+  MotionDOMComponent.displayName = `motion.${typeof Component == "string" ? Component : `create(${Component.displayName ?? Component.name ?? ""})`}`;
+  const ForwardRefMotionComponent = forwardRef(MotionDOMComponent);
+  return ForwardRefMotionComponent[motionComponentSymbol] = Component, ForwardRefMotionComponent;
+}
+function useLayoutId({ layoutId }) {
+  const layoutGroupId = useContext(LayoutGroupContext).id;
+  return layoutGroupId && layoutId !== void 0 ? layoutGroupId + "-" + layoutId : layoutId;
+}
+function useStrictMode(configAndProps, preloadedFeatures) {
+  useContext(LazyContext).strict;
+}
+function getProjectionFunctionality(props) {
+  const { drag: drag2, layout } = featureDefinitions;
+  if (!drag2 && !layout)
+    return {};
+  const combined = { ...drag2, ...layout };
+  return {
+    MeasureLayout: drag2?.isEnabled(props) || layout?.isEnabled(props) ? combined.MeasureLayout : void 0,
+    ProjectionNode: combined.ProjectionNode
   };
 }
-const createMinimalMotionComponent = /* @__PURE__ */ createMotionComponentFactory(), m = /* @__PURE__ */ createDOMMotionComponentProxy(createMinimalMotionComponent), prefersReducedMotion = { current: null }, hasReducedMotionListener = { current: !1 };
+function createMotionProxy(preloadedFeatures, createVisualElement) {
+  if (typeof Proxy > "u")
+    return createMotionComponent;
+  const componentCache = /* @__PURE__ */ new Map(), factory2 = (Component, options) => createMotionComponent(Component, options, preloadedFeatures, createVisualElement), deprecatedFactoryFunction = (Component, options) => factory2(Component, options);
+  return new Proxy(deprecatedFactoryFunction, {
+    /**
+     * Called when `motion` is referenced with a prop: `motion.div`, `motion.input` etc.
+     * The prop name is passed through as `key` and we can use that to generate a `motion`
+     * DOM component with that name.
+     */
+    get: (_target, key) => key === "create" ? factory2 : (componentCache.has(key) || componentCache.set(key, createMotionComponent(key, void 0, preloadedFeatures, createVisualElement)), componentCache.get(key))
+  });
+}
+const m = /* @__PURE__ */ createMotionProxy(), prefersReducedMotion = { current: null }, hasReducedMotionListener = { current: !1 };
 function initPrefersReducedMotion() {
   if (hasReducedMotionListener.current = !0, !!isBrowser$1)
     if (window.matchMedia) {
       const motionMediaQuery = window.matchMedia("(prefers-reduced-motion)"), setReducedMotionPreferences = () => prefersReducedMotion.current = motionMediaQuery.matches;
-      motionMediaQuery.addListener(setReducedMotionPreferences), setReducedMotionPreferences();
+      motionMediaQuery.addEventListener("change", setReducedMotionPreferences), setReducedMotionPreferences();
     } else
       prefersReducedMotion.current = !1;
 }
@@ -16024,7 +16043,7 @@ function IconOrShapeRenderer({
     }
   );
 }
-var userGeneratedStr = "css,pos,insetX,insetY,insetEnd,end,insetStart,start,flexDir,p,pl,pr,pt,pb,py,paddingY,paddingX,px,pe,paddingEnd,ps,paddingStart,ml,mr,mt,mb,m,my,marginY,mx,marginX,me,marginEnd,ms,marginStart,ringWidth,ringColor,ring,ringOffset,w,minW,maxW,h,minH,maxH,textShadowColor,bgPosition,bgPositionX,bgPositionY,bgAttachment,bgClip,bg,bgColor,bgOrigin,bgImage,bgRepeat,bgBlendMode,bgSize,bgGradient,rounded,roundedTopLeft,roundedTopRight,roundedBottomRight,roundedBottomLeft,roundedTop,roundedRight,roundedBottom,roundedLeft,roundedStartStart,roundedStartEnd,roundedStart,roundedEndStart,roundedEndEnd,roundedEnd,borderX,borderXWidth,borderXColor,borderY,borderYWidth,borderYColor,borderStart,borderStartWidth,borderStartColor,borderEnd,borderEndWidth,borderEndColor,shadow,shadowColor,x,y,z,scrollMarginY,scrollMarginX,scrollPaddingY,scrollPaddingX,aspectRatio,boxDecorationBreak,zIndex,boxSizing,objectPosition,objectFit,overscrollBehavior,overscrollBehaviorX,overscrollBehaviorY,position,top,left,inset,insetInline,insetBlock,insetBlockEnd,insetBlockStart,insetInlineEnd,insetInlineStart,right,bottom,float,visibility,display,hideFrom,hideBelow,flexBasis,flex,flexDirection,flexGrow,flexShrink,gridTemplateColumns,gridTemplateRows,gridColumn,gridRow,gridColumnStart,gridColumnEnd,gridAutoFlow,gridAutoColumns,gridAutoRows,gap,gridGap,gridRowGap,gridColumnGap,rowGap,columnGap,justifyContent,alignContent,alignItems,alignSelf,padding,paddingLeft,paddingRight,paddingTop,paddingBottom,paddingBlock,paddingBlockEnd,paddingBlockStart,paddingInline,paddingInlineEnd,paddingInlineStart,marginLeft,marginRight,marginTop,marginBottom,margin,marginBlock,marginBlockEnd,marginBlockStart,marginInline,marginInlineEnd,marginInlineStart,spaceX,spaceY,outlineWidth,outlineColor,outline,outlineOffset,divideX,divideY,divideColor,divideStyle,width,inlineSize,minWidth,minInlineSize,maxWidth,maxInlineSize,height,blockSize,minHeight,minBlockSize,maxHeight,maxBlockSize,color,fontFamily,fontSize,fontSizeAdjust,fontPalette,fontKerning,fontFeatureSettings,fontWeight,fontSmoothing,fontVariant,fontVariantAlternates,fontVariantCaps,fontVariationSettings,fontVariantNumeric,letterSpacing,lineHeight,textAlign,textDecoration,textDecorationColor,textEmphasisColor,textDecorationStyle,textDecorationThickness,textUnderlineOffset,textTransform,textIndent,textShadow,textOverflow,verticalAlign,wordBreak,textWrap,truncate,lineClamp,listStyleType,listStylePosition,listStyleImage,listStyle,backgroundPosition,backgroundPositionX,backgroundPositionY,backgroundAttachment,backgroundClip,background,backgroundColor,backgroundOrigin,backgroundImage,backgroundRepeat,backgroundBlendMode,backgroundSize,backgroundGradient,textGradient,gradientFromPosition,gradientToPosition,gradientFrom,gradientTo,gradientVia,gradientViaPosition,borderRadius,borderTopLeftRadius,borderTopRightRadius,borderBottomRightRadius,borderBottomLeftRadius,borderTopRadius,borderRightRadius,borderBottomRadius,borderLeftRadius,borderStartStartRadius,borderStartEndRadius,borderStartRadius,borderEndStartRadius,borderEndEndRadius,borderEndRadius,border,borderWidth,borderTopWidth,borderLeftWidth,borderRightWidth,borderBottomWidth,borderBlockStartWidth,borderBlockEndWidth,borderColor,borderInline,borderInlineWidth,borderInlineColor,borderBlock,borderBlockWidth,borderBlockColor,borderLeft,borderLeftColor,borderInlineStart,borderInlineStartWidth,borderInlineStartColor,borderRight,borderRightColor,borderInlineEnd,borderInlineEndWidth,borderInlineEndColor,borderTop,borderTopColor,borderBottom,borderBottomColor,borderBlockEnd,borderBlockEndColor,borderBlockStart,borderBlockStartColor,opacity,boxShadow,boxShadowColor,mixBlendMode,filter,brightness,contrast,grayscale,hueRotate,invert,saturate,sepia,dropShadow,blur,backdropFilter,backdropBlur,backdropBrightness,backdropContrast,backdropGrayscale,backdropHueRotate,backdropInvert,backdropOpacity,backdropSaturate,backdropSepia,borderCollapse,borderSpacing,borderSpacingX,borderSpacingY,tableLayout,transitionTimingFunction,transitionDelay,transitionDuration,transitionProperty,transition,animation,animationName,animationTimingFunction,animationDuration,animationDelay,animationPlayState,animationComposition,animationFillMode,animationDirection,animationIterationCount,animationRange,animationState,animationRangeStart,animationRangeEnd,animationTimeline,transformOrigin,transformBox,transformStyle,transform,rotate,rotateX,rotateY,rotateZ,scale,scaleX,scaleY,translate,translateX,translateY,translateZ,accentColor,caretColor,scrollBehavior,scrollbar,scrollbarColor,scrollbarGutter,scrollbarWidth,scrollMargin,scrollMarginLeft,scrollMarginRight,scrollMarginTop,scrollMarginBottom,scrollMarginBlock,scrollMarginBlockEnd,scrollMarginBlockStart,scrollMarginInline,scrollMarginInlineEnd,scrollMarginInlineStart,scrollPadding,scrollPaddingBlock,scrollPaddingBlockStart,scrollPaddingBlockEnd,scrollPaddingInline,scrollPaddingInlineEnd,scrollPaddingInlineStart,scrollPaddingLeft,scrollPaddingRight,scrollPaddingTop,scrollPaddingBottom,scrollSnapAlign,scrollSnapStop,scrollSnapType,scrollSnapStrictness,scrollSnapMargin,scrollSnapMarginTop,scrollSnapMarginBottom,scrollSnapMarginLeft,scrollSnapMarginRight,scrollSnapCoordinate,scrollSnapDestination,scrollSnapPointsX,scrollSnapPointsY,scrollSnapTypeX,scrollSnapTypeY,scrollTimeline,scrollTimelineAxis,scrollTimelineName,touchAction,userSelect,overflow,overflowWrap,overflowX,overflowY,overflowAnchor,overflowBlock,overflowInline,overflowClipBox,overflowClipMargin,overscrollBehaviorBlock,overscrollBehaviorInline,fill,stroke,strokeWidth,strokeDasharray,strokeDashoffset,strokeLinecap,strokeLinejoin,strokeMiterlimit,strokeOpacity,srOnly,debug,appearance,backfaceVisibility,clipPath,hyphens,mask,maskImage,maskSize,textSizeAdjust,container,containerName,containerType,cursor,likec4Palette,likec4RelationPalette,colorPalette,_hover,_focus,_focusWithin,_focusVisible,_disabled,_active,_visited,_target,_readOnly,_readWrite,_empty,_checked,_enabled,_expanded,_highlighted,_complete,_incomplete,_dragging,_before,_after,_firstLetter,_firstLine,_marker,_selection,_file,_backdrop,_first,_last,_only,_even,_odd,_firstOfType,_lastOfType,_onlyOfType,_peerFocus,_peerHover,_peerActive,_peerFocusWithin,_peerFocusVisible,_peerDisabled,_peerChecked,_peerInvalid,_peerExpanded,_peerPlaceholderShown,_groupFocus,_groupHover,_groupActive,_groupFocusWithin,_groupFocusVisible,_groupDisabled,_groupChecked,_groupExpanded,_groupInvalid,_indeterminate,_required,_valid,_invalid,_autofill,_inRange,_outOfRange,_placeholder,_placeholderShown,_pressed,_selected,_grabbed,_underValue,_overValue,_atValue,_default,_optional,_open,_closed,_fullscreen,_loading,_hidden,_current,_currentPage,_currentStep,_today,_unavailable,_rangeStart,_rangeEnd,_now,_topmost,_motionReduce,_motionSafe,_print,_landscape,_portrait,_dark,_light,_osDark,_osLight,_highContrast,_lessContrast,_moreContrast,_ltr,_rtl,_scrollbar,_scrollbarThumb,_scrollbarTrack,_horizontal,_vertical,_icon,_starting,_reduceGraphics,_reduceGraphicsOnPan,_noReduceGraphics,_whenPanning,_smallZoom,_compoundTransparent,_edgeActive,_whenHovered,_whenSelected,_whenDimmed,_whenFocused,_shapeSizeXs,_shapeSizeSm,_shapeSizeMd,_shapeSizeLg,_shapeSizeXl,_shapeRectangle,_shapePerson,_shapeBrowser,_shapeMobile,_shapeCylinder,_shapeStorage,_shapeQueue,_p3,_srgb,_rec2020,xs,xsOnly,xsDown,sm,smOnly,smDown,md,mdOnly,mdDown,lg,lgOnly,lgDown,xl,xlOnly,xlDown,xsToSm,xsToMd,xsToLg,xsToXl,smToMd,smToLg,smToXl,mdToLg,mdToXl,lgToXl,textStyle,layerStyle,animationStyle", userGenerated = userGeneratedStr.split(","), cssPropertiesStr = "WebkitAppearance,WebkitBorderBefore,WebkitBorderBeforeColor,WebkitBorderBeforeStyle,WebkitBorderBeforeWidth,WebkitBoxReflect,WebkitLineClamp,WebkitMask,WebkitMaskAttachment,WebkitMaskClip,WebkitMaskComposite,WebkitMaskImage,WebkitMaskOrigin,WebkitMaskPosition,WebkitMaskPositionX,WebkitMaskPositionY,WebkitMaskRepeat,WebkitMaskRepeatX,WebkitMaskRepeatY,WebkitMaskSize,WebkitOverflowScrolling,WebkitTapHighlightColor,WebkitTextFillColor,WebkitTextStroke,WebkitTextStrokeColor,WebkitTextStrokeWidth,WebkitTouchCallout,WebkitUserModify,WebkitUserSelect,accentColor,alignContent,alignItems,alignSelf,alignTracks,all,anchorName,anchorScope,animation,animationComposition,animationDelay,animationDirection,animationDuration,animationFillMode,animationIterationCount,animationName,animationPlayState,animationRange,animationRangeEnd,animationRangeStart,animationTimeline,animationTimingFunction,appearance,aspectRatio,backdropFilter,backfaceVisibility,background,backgroundAttachment,backgroundBlendMode,backgroundClip,backgroundColor,backgroundImage,backgroundOrigin,backgroundPosition,backgroundPositionX,backgroundPositionY,backgroundRepeat,backgroundSize,blockSize,border,borderBlock,borderBlockColor,borderBlockEnd,borderBlockEndColor,borderBlockEndStyle,borderBlockEndWidth,borderBlockStart,borderBlockStartColor,borderBlockStartStyle,borderBlockStartWidth,borderBlockStyle,borderBlockWidth,borderBottom,borderBottomColor,borderBottomLeftRadius,borderBottomRightRadius,borderBottomStyle,borderBottomWidth,borderCollapse,borderColor,borderEndEndRadius,borderEndStartRadius,borderImage,borderImageOutset,borderImageRepeat,borderImageSlice,borderImageSource,borderImageWidth,borderInline,borderInlineColor,borderInlineEnd,borderInlineEndColor,borderInlineEndStyle,borderInlineEndWidth,borderInlineStart,borderInlineStartColor,borderInlineStartStyle,borderInlineStartWidth,borderInlineStyle,borderInlineWidth,borderLeft,borderLeftColor,borderLeftStyle,borderLeftWidth,borderRadius,borderRight,borderRightColor,borderRightStyle,borderRightWidth,borderSpacing,borderStartEndRadius,borderStartStartRadius,borderStyle,borderTop,borderTopColor,borderTopLeftRadius,borderTopRightRadius,borderTopStyle,borderTopWidth,borderWidth,bottom,boxAlign,boxDecorationBreak,boxDirection,boxFlex,boxFlexGroup,boxLines,boxOrdinalGroup,boxOrient,boxPack,boxShadow,boxSizing,breakAfter,breakBefore,breakInside,captionSide,caret,caretColor,caretShape,clear,clip,clipPath,clipRule,color,colorInterpolationFilters,colorScheme,columnCount,columnFill,columnGap,columnRule,columnRuleColor,columnRuleStyle,columnRuleWidth,columnSpan,columnWidth,columns,contain,containIntrinsicBlockSize,containIntrinsicHeight,containIntrinsicInlineSize,containIntrinsicSize,containIntrinsicWidth,container,containerName,containerType,content,contentVisibility,counterIncrement,counterReset,counterSet,cursor,cx,cy,d,direction,display,dominantBaseline,emptyCells,fieldSizing,fill,fillOpacity,fillRule,filter,flex,flexBasis,flexDirection,flexFlow,flexGrow,flexShrink,flexWrap,float,floodColor,floodOpacity,font,fontFamily,fontFeatureSettings,fontKerning,fontLanguageOverride,fontOpticalSizing,fontPalette,fontSize,fontSizeAdjust,fontSmooth,fontStretch,fontStyle,fontSynthesis,fontSynthesisPosition,fontSynthesisSmallCaps,fontSynthesisStyle,fontSynthesisWeight,fontVariant,fontVariantAlternates,fontVariantCaps,fontVariantEastAsian,fontVariantEmoji,fontVariantLigatures,fontVariantNumeric,fontVariantPosition,fontVariationSettings,fontWeight,forcedColorAdjust,gap,grid,gridArea,gridAutoColumns,gridAutoFlow,gridAutoRows,gridColumn,gridColumnEnd,gridColumnGap,gridColumnStart,gridGap,gridRow,gridRowEnd,gridRowGap,gridRowStart,gridTemplate,gridTemplateAreas,gridTemplateColumns,gridTemplateRows,hangingPunctuation,height,hyphenateCharacter,hyphenateLimitChars,hyphens,imageOrientation,imageRendering,imageResolution,imeMode,initialLetter,initialLetterAlign,inlineSize,inset,insetBlock,insetBlockEnd,insetBlockStart,insetInline,insetInlineEnd,insetInlineStart,interpolateSize,isolation,justifyContent,justifyItems,justifySelf,justifyTracks,left,letterSpacing,lightingColor,lineBreak,lineClamp,lineHeight,lineHeightStep,listStyle,listStyleImage,listStylePosition,listStyleType,margin,marginBlock,marginBlockEnd,marginBlockStart,marginBottom,marginInline,marginInlineEnd,marginInlineStart,marginLeft,marginRight,marginTop,marginTrim,marker,markerEnd,markerMid,markerStart,mask,maskBorder,maskBorderMode,maskBorderOutset,maskBorderRepeat,maskBorderSlice,maskBorderSource,maskBorderWidth,maskClip,maskComposite,maskImage,maskMode,maskOrigin,maskPosition,maskRepeat,maskSize,maskType,masonryAutoFlow,mathDepth,mathShift,mathStyle,maxBlockSize,maxHeight,maxInlineSize,maxLines,maxWidth,minBlockSize,minHeight,minInlineSize,minWidth,mixBlendMode,objectFit,objectPosition,offset,offsetAnchor,offsetDistance,offsetPath,offsetPosition,offsetRotate,opacity,order,orphans,outline,outlineColor,outlineOffset,outlineStyle,outlineWidth,overflow,overflowAnchor,overflowBlock,overflowClipBox,overflowClipMargin,overflowInline,overflowWrap,overflowX,overflowY,overlay,overscrollBehavior,overscrollBehaviorBlock,overscrollBehaviorInline,overscrollBehaviorX,overscrollBehaviorY,padding,paddingBlock,paddingBlockEnd,paddingBlockStart,paddingBottom,paddingInline,paddingInlineEnd,paddingInlineStart,paddingLeft,paddingRight,paddingTop,page,pageBreakAfter,pageBreakBefore,pageBreakInside,paintOrder,perspective,perspectiveOrigin,placeContent,placeItems,placeSelf,pointerEvents,position,positionAnchor,positionArea,positionTry,positionTryFallbacks,positionTryOrder,positionVisibility,printColorAdjust,quotes,r,resize,right,rotate,rowGap,rubyAlign,rubyMerge,rubyPosition,rx,ry,scale,scrollBehavior,scrollMargin,scrollMarginBlock,scrollMarginBlockEnd,scrollMarginBlockStart,scrollMarginBottom,scrollMarginInline,scrollMarginInlineEnd,scrollMarginInlineStart,scrollMarginLeft,scrollMarginRight,scrollMarginTop,scrollPadding,scrollPaddingBlock,scrollPaddingBlockEnd,scrollPaddingBlockStart,scrollPaddingBottom,scrollPaddingInline,scrollPaddingInlineEnd,scrollPaddingInlineStart,scrollPaddingLeft,scrollPaddingRight,scrollPaddingTop,scrollSnapAlign,scrollSnapCoordinate,scrollSnapDestination,scrollSnapPointsX,scrollSnapPointsY,scrollSnapStop,scrollSnapType,scrollSnapTypeX,scrollSnapTypeY,scrollTimeline,scrollTimelineAxis,scrollTimelineName,scrollbarColor,scrollbarGutter,scrollbarWidth,shapeImageThreshold,shapeMargin,shapeOutside,shapeRendering,stopColor,stopOpacity,stroke,strokeDasharray,strokeDashoffset,strokeLinecap,strokeLinejoin,strokeMiterlimit,strokeOpacity,strokeWidth,tabSize,tableLayout,textAlign,textAlignLast,textAnchor,textBox,textBoxEdge,textBoxTrim,textCombineUpright,textDecoration,textDecorationColor,textDecorationLine,textDecorationSkip,textDecorationSkipInk,textDecorationStyle,textDecorationThickness,textEmphasis,textEmphasisColor,textEmphasisPosition,textEmphasisStyle,textIndent,textJustify,textOrientation,textOverflow,textRendering,textShadow,textSizeAdjust,textSpacingTrim,textTransform,textUnderlineOffset,textUnderlinePosition,textWrap,textWrapMode,textWrapStyle,timelineScope,top,touchAction,transform,transformBox,transformOrigin,transformStyle,transition,transitionBehavior,transitionDelay,transitionDuration,transitionProperty,transitionTimingFunction,translate,unicodeBidi,userSelect,vectorEffect,verticalAlign,viewTimeline,viewTimelineAxis,viewTimelineInset,viewTimelineName,viewTransitionName,visibility,whiteSpace,whiteSpaceCollapse,widows,width,willChange,wordBreak,wordSpacing,wordWrap,writingMode,x,y,zIndex,zoom,alignmentBaseline,baselineShift,colorInterpolation,colorRendering,glyphOrientationVertical", allCssProperties = cssPropertiesStr.split(",").concat(userGenerated), properties = new Map(allCssProperties.map((prop) => [prop, !0])), cssPropertySelectorRegex = /&|@/, isCssProperty = /* @__PURE__ */ memo((prop) => properties.has(prop) || prop.startsWith("--") || cssPropertySelectorRegex.test(prop));
+var userGeneratedStr = "css,pos,insetX,insetY,insetEnd,end,insetStart,start,flexDir,p,pl,pr,pt,pb,py,paddingY,paddingX,px,pe,paddingEnd,ps,paddingStart,ml,mr,mt,mb,m,my,marginY,mx,marginX,me,marginEnd,ms,marginStart,ringWidth,ringColor,ring,ringOffset,w,minW,maxW,h,minH,maxH,textShadowColor,bgPosition,bgPositionX,bgPositionY,bgAttachment,bgClip,bg,bgColor,bgOrigin,bgImage,bgRepeat,bgBlendMode,bgSize,bgGradient,rounded,roundedTopLeft,roundedTopRight,roundedBottomRight,roundedBottomLeft,roundedTop,roundedRight,roundedBottom,roundedLeft,roundedStartStart,roundedStartEnd,roundedStart,roundedEndStart,roundedEndEnd,roundedEnd,borderX,borderXWidth,borderXColor,borderY,borderYWidth,borderYColor,borderStart,borderStartWidth,borderStartColor,borderEnd,borderEndWidth,borderEndColor,shadow,shadowColor,x,y,z,scrollMarginY,scrollMarginX,scrollPaddingY,scrollPaddingX,aspectRatio,boxDecorationBreak,zIndex,boxSizing,objectPosition,objectFit,overscrollBehavior,overscrollBehaviorX,overscrollBehaviorY,position,top,left,inset,insetInline,insetBlock,insetBlockEnd,insetBlockStart,insetInlineEnd,insetInlineStart,right,bottom,float,visibility,display,hideFrom,hideBelow,flexBasis,flex,flexDirection,flexGrow,flexShrink,gridTemplateColumns,gridTemplateRows,gridColumn,gridRow,gridColumnStart,gridColumnEnd,gridAutoFlow,gridAutoColumns,gridAutoRows,gap,gridGap,gridRowGap,gridColumnGap,rowGap,columnGap,justifyContent,alignContent,alignItems,alignSelf,padding,paddingLeft,paddingRight,paddingTop,paddingBottom,paddingBlock,paddingBlockEnd,paddingBlockStart,paddingInline,paddingInlineEnd,paddingInlineStart,marginLeft,marginRight,marginTop,marginBottom,margin,marginBlock,marginBlockEnd,marginBlockStart,marginInline,marginInlineEnd,marginInlineStart,spaceX,spaceY,outlineWidth,outlineColor,outline,outlineOffset,divideX,divideY,divideColor,divideStyle,width,inlineSize,minWidth,minInlineSize,maxWidth,maxInlineSize,height,blockSize,minHeight,minBlockSize,maxHeight,maxBlockSize,color,fontFamily,fontSize,fontSizeAdjust,fontPalette,fontKerning,fontFeatureSettings,fontWeight,fontSmoothing,fontVariant,fontVariantAlternates,fontVariantCaps,fontVariationSettings,fontVariantNumeric,letterSpacing,lineHeight,textAlign,textDecoration,textDecorationColor,textEmphasisColor,textDecorationStyle,textDecorationThickness,textUnderlineOffset,textTransform,textIndent,textShadow,textOverflow,verticalAlign,wordBreak,textWrap,truncate,lineClamp,listStyleType,listStylePosition,listStyleImage,listStyle,backgroundPosition,backgroundPositionX,backgroundPositionY,backgroundAttachment,backgroundClip,background,backgroundColor,backgroundOrigin,backgroundImage,backgroundRepeat,backgroundBlendMode,backgroundSize,backgroundGradient,textGradient,gradientFromPosition,gradientToPosition,gradientFrom,gradientTo,gradientVia,gradientViaPosition,borderRadius,borderTopLeftRadius,borderTopRightRadius,borderBottomRightRadius,borderBottomLeftRadius,borderTopRadius,borderRightRadius,borderBottomRadius,borderLeftRadius,borderStartStartRadius,borderStartEndRadius,borderStartRadius,borderEndStartRadius,borderEndEndRadius,borderEndRadius,border,borderWidth,borderTopWidth,borderLeftWidth,borderRightWidth,borderBottomWidth,borderBlockStartWidth,borderBlockEndWidth,borderColor,borderInline,borderInlineWidth,borderInlineColor,borderBlock,borderBlockWidth,borderBlockColor,borderLeft,borderLeftColor,borderInlineStart,borderInlineStartWidth,borderInlineStartColor,borderRight,borderRightColor,borderInlineEnd,borderInlineEndWidth,borderInlineEndColor,borderTop,borderTopColor,borderBottom,borderBottomColor,borderBlockEnd,borderBlockEndColor,borderBlockStart,borderBlockStartColor,opacity,boxShadow,boxShadowColor,mixBlendMode,filter,brightness,contrast,grayscale,hueRotate,invert,saturate,sepia,dropShadow,blur,backdropFilter,backdropBlur,backdropBrightness,backdropContrast,backdropGrayscale,backdropHueRotate,backdropInvert,backdropOpacity,backdropSaturate,backdropSepia,borderCollapse,borderSpacing,borderSpacingX,borderSpacingY,tableLayout,transitionTimingFunction,transitionDelay,transitionDuration,transitionProperty,transition,animation,animationName,animationTimingFunction,animationDuration,animationDelay,animationPlayState,animationComposition,animationFillMode,animationDirection,animationIterationCount,animationRange,animationState,animationRangeStart,animationRangeEnd,animationTimeline,transformOrigin,transformBox,transformStyle,transform,rotate,rotateX,rotateY,rotateZ,scale,scaleX,scaleY,translate,translateX,translateY,translateZ,accentColor,caretColor,scrollBehavior,scrollbar,scrollbarColor,scrollbarGutter,scrollbarWidth,scrollMargin,scrollMarginLeft,scrollMarginRight,scrollMarginTop,scrollMarginBottom,scrollMarginBlock,scrollMarginBlockEnd,scrollMarginBlockStart,scrollMarginInline,scrollMarginInlineEnd,scrollMarginInlineStart,scrollPadding,scrollPaddingBlock,scrollPaddingBlockStart,scrollPaddingBlockEnd,scrollPaddingInline,scrollPaddingInlineEnd,scrollPaddingInlineStart,scrollPaddingLeft,scrollPaddingRight,scrollPaddingTop,scrollPaddingBottom,scrollSnapAlign,scrollSnapStop,scrollSnapType,scrollSnapStrictness,scrollSnapMargin,scrollSnapMarginTop,scrollSnapMarginBottom,scrollSnapMarginLeft,scrollSnapMarginRight,scrollSnapCoordinate,scrollSnapDestination,scrollSnapPointsX,scrollSnapPointsY,scrollSnapTypeX,scrollSnapTypeY,scrollTimeline,scrollTimelineAxis,scrollTimelineName,touchAction,userSelect,overflow,overflowWrap,overflowX,overflowY,overflowAnchor,overflowBlock,overflowInline,overflowClipBox,overflowClipMargin,overscrollBehaviorBlock,overscrollBehaviorInline,fill,stroke,strokeWidth,strokeDasharray,strokeDashoffset,strokeLinecap,strokeLinejoin,strokeMiterlimit,strokeOpacity,srOnly,debug,appearance,backfaceVisibility,clipPath,hyphens,mask,maskImage,maskSize,textSizeAdjust,container,containerName,containerType,cursor,likec4Palette,likec4RelationPalette,colorPalette,_hover,_focus,_focusWithin,_focusVisible,_disabled,_active,_visited,_target,_readOnly,_readWrite,_empty,_checked,_enabled,_expanded,_highlighted,_complete,_incomplete,_dragging,_before,_after,_firstLetter,_firstLine,_marker,_selection,_file,_backdrop,_first,_last,_only,_even,_odd,_firstOfType,_lastOfType,_onlyOfType,_peerFocus,_peerHover,_peerActive,_peerFocusWithin,_peerFocusVisible,_peerDisabled,_peerChecked,_peerInvalid,_peerExpanded,_peerPlaceholderShown,_groupFocus,_groupHover,_groupActive,_groupFocusWithin,_groupFocusVisible,_groupDisabled,_groupChecked,_groupExpanded,_groupInvalid,_indeterminate,_required,_valid,_invalid,_autofill,_inRange,_outOfRange,_placeholder,_placeholderShown,_pressed,_selected,_grabbed,_underValue,_overValue,_atValue,_default,_optional,_open,_closed,_fullscreen,_loading,_hidden,_current,_currentPage,_currentStep,_today,_unavailable,_rangeStart,_rangeEnd,_now,_topmost,_motionReduce,_motionSafe,_print,_landscape,_portrait,_dark,_light,_osDark,_osLight,_highContrast,_lessContrast,_moreContrast,_ltr,_rtl,_scrollbar,_scrollbarThumb,_scrollbarTrack,_horizontal,_vertical,_icon,_starting,_notDisabled,_reduceGraphics,_reduceGraphicsOnPan,_noReduceGraphics,_whenPanning,_smallZoom,_compoundTransparent,_edgeActive,_whenHovered,_whenSelected,_whenDimmed,_whenFocused,_shapeSizeXs,_shapeSizeSm,_shapeSizeMd,_shapeSizeLg,_shapeSizeXl,_shapeRectangle,_shapePerson,_shapeBrowser,_shapeMobile,_shapeCylinder,_shapeStorage,_shapeQueue,_p3,_srgb,_rec2020,xs,xsOnly,xsDown,sm,smOnly,smDown,md,mdOnly,mdDown,lg,lgOnly,lgDown,xl,xlOnly,xlDown,xsToSm,xsToMd,xsToLg,xsToXl,smToMd,smToLg,smToXl,mdToLg,mdToXl,lgToXl,textStyle,layerStyle,animationStyle", userGenerated = userGeneratedStr.split(","), cssPropertiesStr = "WebkitAppearance,WebkitBorderBefore,WebkitBorderBeforeColor,WebkitBorderBeforeStyle,WebkitBorderBeforeWidth,WebkitBoxReflect,WebkitLineClamp,WebkitMask,WebkitMaskAttachment,WebkitMaskClip,WebkitMaskComposite,WebkitMaskImage,WebkitMaskOrigin,WebkitMaskPosition,WebkitMaskPositionX,WebkitMaskPositionY,WebkitMaskRepeat,WebkitMaskRepeatX,WebkitMaskRepeatY,WebkitMaskSize,WebkitOverflowScrolling,WebkitTapHighlightColor,WebkitTextFillColor,WebkitTextStroke,WebkitTextStrokeColor,WebkitTextStrokeWidth,WebkitTouchCallout,WebkitUserModify,WebkitUserSelect,accentColor,alignContent,alignItems,alignSelf,alignTracks,all,anchorName,anchorScope,animation,animationComposition,animationDelay,animationDirection,animationDuration,animationFillMode,animationIterationCount,animationName,animationPlayState,animationRange,animationRangeEnd,animationRangeStart,animationTimeline,animationTimingFunction,appearance,aspectRatio,backdropFilter,backfaceVisibility,background,backgroundAttachment,backgroundBlendMode,backgroundClip,backgroundColor,backgroundImage,backgroundOrigin,backgroundPosition,backgroundPositionX,backgroundPositionY,backgroundRepeat,backgroundSize,blockSize,border,borderBlock,borderBlockColor,borderBlockEnd,borderBlockEndColor,borderBlockEndStyle,borderBlockEndWidth,borderBlockStart,borderBlockStartColor,borderBlockStartStyle,borderBlockStartWidth,borderBlockStyle,borderBlockWidth,borderBottom,borderBottomColor,borderBottomLeftRadius,borderBottomRightRadius,borderBottomStyle,borderBottomWidth,borderCollapse,borderColor,borderEndEndRadius,borderEndStartRadius,borderImage,borderImageOutset,borderImageRepeat,borderImageSlice,borderImageSource,borderImageWidth,borderInline,borderInlineColor,borderInlineEnd,borderInlineEndColor,borderInlineEndStyle,borderInlineEndWidth,borderInlineStart,borderInlineStartColor,borderInlineStartStyle,borderInlineStartWidth,borderInlineStyle,borderInlineWidth,borderLeft,borderLeftColor,borderLeftStyle,borderLeftWidth,borderRadius,borderRight,borderRightColor,borderRightStyle,borderRightWidth,borderSpacing,borderStartEndRadius,borderStartStartRadius,borderStyle,borderTop,borderTopColor,borderTopLeftRadius,borderTopRightRadius,borderTopStyle,borderTopWidth,borderWidth,bottom,boxAlign,boxDecorationBreak,boxDirection,boxFlex,boxFlexGroup,boxLines,boxOrdinalGroup,boxOrient,boxPack,boxShadow,boxSizing,breakAfter,breakBefore,breakInside,captionSide,caret,caretColor,caretShape,clear,clip,clipPath,clipRule,color,colorInterpolationFilters,colorScheme,columnCount,columnFill,columnGap,columnRule,columnRuleColor,columnRuleStyle,columnRuleWidth,columnSpan,columnWidth,columns,contain,containIntrinsicBlockSize,containIntrinsicHeight,containIntrinsicInlineSize,containIntrinsicSize,containIntrinsicWidth,container,containerName,containerType,content,contentVisibility,counterIncrement,counterReset,counterSet,cursor,cx,cy,d,direction,display,dominantBaseline,emptyCells,fieldSizing,fill,fillOpacity,fillRule,filter,flex,flexBasis,flexDirection,flexFlow,flexGrow,flexShrink,flexWrap,float,floodColor,floodOpacity,font,fontFamily,fontFeatureSettings,fontKerning,fontLanguageOverride,fontOpticalSizing,fontPalette,fontSize,fontSizeAdjust,fontSmooth,fontStretch,fontStyle,fontSynthesis,fontSynthesisPosition,fontSynthesisSmallCaps,fontSynthesisStyle,fontSynthesisWeight,fontVariant,fontVariantAlternates,fontVariantCaps,fontVariantEastAsian,fontVariantEmoji,fontVariantLigatures,fontVariantNumeric,fontVariantPosition,fontVariationSettings,fontWeight,forcedColorAdjust,gap,grid,gridArea,gridAutoColumns,gridAutoFlow,gridAutoRows,gridColumn,gridColumnEnd,gridColumnGap,gridColumnStart,gridGap,gridRow,gridRowEnd,gridRowGap,gridRowStart,gridTemplate,gridTemplateAreas,gridTemplateColumns,gridTemplateRows,hangingPunctuation,height,hyphenateCharacter,hyphenateLimitChars,hyphens,imageOrientation,imageRendering,imageResolution,imeMode,initialLetter,initialLetterAlign,inlineSize,inset,insetBlock,insetBlockEnd,insetBlockStart,insetInline,insetInlineEnd,insetInlineStart,interpolateSize,isolation,justifyContent,justifyItems,justifySelf,justifyTracks,left,letterSpacing,lightingColor,lineBreak,lineClamp,lineHeight,lineHeightStep,listStyle,listStyleImage,listStylePosition,listStyleType,margin,marginBlock,marginBlockEnd,marginBlockStart,marginBottom,marginInline,marginInlineEnd,marginInlineStart,marginLeft,marginRight,marginTop,marginTrim,marker,markerEnd,markerMid,markerStart,mask,maskBorder,maskBorderMode,maskBorderOutset,maskBorderRepeat,maskBorderSlice,maskBorderSource,maskBorderWidth,maskClip,maskComposite,maskImage,maskMode,maskOrigin,maskPosition,maskRepeat,maskSize,maskType,masonryAutoFlow,mathDepth,mathShift,mathStyle,maxBlockSize,maxHeight,maxInlineSize,maxLines,maxWidth,minBlockSize,minHeight,minInlineSize,minWidth,mixBlendMode,objectFit,objectPosition,offset,offsetAnchor,offsetDistance,offsetPath,offsetPosition,offsetRotate,opacity,order,orphans,outline,outlineColor,outlineOffset,outlineStyle,outlineWidth,overflow,overflowAnchor,overflowBlock,overflowClipBox,overflowClipMargin,overflowInline,overflowWrap,overflowX,overflowY,overlay,overscrollBehavior,overscrollBehaviorBlock,overscrollBehaviorInline,overscrollBehaviorX,overscrollBehaviorY,padding,paddingBlock,paddingBlockEnd,paddingBlockStart,paddingBottom,paddingInline,paddingInlineEnd,paddingInlineStart,paddingLeft,paddingRight,paddingTop,page,pageBreakAfter,pageBreakBefore,pageBreakInside,paintOrder,perspective,perspectiveOrigin,placeContent,placeItems,placeSelf,pointerEvents,position,positionAnchor,positionArea,positionTry,positionTryFallbacks,positionTryOrder,positionVisibility,printColorAdjust,quotes,r,resize,right,rotate,rowGap,rubyAlign,rubyMerge,rubyPosition,rx,ry,scale,scrollBehavior,scrollMargin,scrollMarginBlock,scrollMarginBlockEnd,scrollMarginBlockStart,scrollMarginBottom,scrollMarginInline,scrollMarginInlineEnd,scrollMarginInlineStart,scrollMarginLeft,scrollMarginRight,scrollMarginTop,scrollPadding,scrollPaddingBlock,scrollPaddingBlockEnd,scrollPaddingBlockStart,scrollPaddingBottom,scrollPaddingInline,scrollPaddingInlineEnd,scrollPaddingInlineStart,scrollPaddingLeft,scrollPaddingRight,scrollPaddingTop,scrollSnapAlign,scrollSnapCoordinate,scrollSnapDestination,scrollSnapPointsX,scrollSnapPointsY,scrollSnapStop,scrollSnapType,scrollSnapTypeX,scrollSnapTypeY,scrollTimeline,scrollTimelineAxis,scrollTimelineName,scrollbarColor,scrollbarGutter,scrollbarWidth,shapeImageThreshold,shapeMargin,shapeOutside,shapeRendering,stopColor,stopOpacity,stroke,strokeDasharray,strokeDashoffset,strokeLinecap,strokeLinejoin,strokeMiterlimit,strokeOpacity,strokeWidth,tabSize,tableLayout,textAlign,textAlignLast,textAnchor,textBox,textBoxEdge,textBoxTrim,textCombineUpright,textDecoration,textDecorationColor,textDecorationLine,textDecorationSkip,textDecorationSkipInk,textDecorationStyle,textDecorationThickness,textEmphasis,textEmphasisColor,textEmphasisPosition,textEmphasisStyle,textIndent,textJustify,textOrientation,textOverflow,textRendering,textShadow,textSizeAdjust,textSpacingTrim,textTransform,textUnderlineOffset,textUnderlinePosition,textWrap,textWrapMode,textWrapStyle,timelineScope,top,touchAction,transform,transformBox,transformOrigin,transformStyle,transition,transitionBehavior,transitionDelay,transitionDuration,transitionProperty,transitionTimingFunction,translate,unicodeBidi,userSelect,vectorEffect,verticalAlign,viewTimeline,viewTimelineAxis,viewTimelineInset,viewTimelineName,viewTransitionName,visibility,whiteSpace,whiteSpaceCollapse,widows,width,willChange,wordBreak,wordSpacing,wordWrap,writingMode,x,y,zIndex,zoom,alignmentBaseline,baselineShift,colorInterpolation,colorRendering,glyphOrientationVertical", allCssProperties = cssPropertiesStr.split(",").concat(userGenerated), properties = new Map(allCssProperties.map((prop) => [prop, !0])), cssPropertySelectorRegex = /&|@/, isCssProperty = /* @__PURE__ */ memo((prop) => properties.has(prop) || prop.startsWith("--") || cssPropertySelectorRegex.test(prop));
 const defaultShouldForwardProp = (prop, variantKeys) => !variantKeys.includes(prop) && !isCssProperty(prop), composeShouldForwardProps = (tag, shouldForwardProp) => tag.__shouldForwardProps__ && shouldForwardProp ? (propName) => tag.__shouldForwardProps__(propName) && shouldForwardProp(propName) : shouldForwardProp, composeCvaFn = (cvaA, cvaB) => {
   if (cvaA && !cvaB) return cvaA;
   if (!cvaA && cvaB) return cvaB;
@@ -16177,25 +16196,21 @@ function ReduceGraphicsContext({ reduceGraphics, children: children2 }) {
 function useIsPanning() {
   return useStore(usePanningAtom());
 }
-const LikeC4ModelContext = createContext(null);
-function useLikeC4Model(type) {
+const LikeC4ModelContext = createContext(null), CurrentViewModelContext = createContext(null);
+function useLikeC4Model() {
   const model = useContext(LikeC4ModelContext);
   if (!model)
     throw new Error("LikeC4Model not found. Make sure you have LikeC4ModelProvider.");
-  if (t$3(type) && model.stage !== type)
-    throw new Error(`Invalid LikeC4ModelContext, expected "${type}" but got "${model.stage}" in context`);
   return model;
 }
 function useLikeC4ViewModel(viewId) {
-  const view = useLikeC4Model("layouted").findView(viewId);
-  if (!view)
-    return null;
-  if (!view.isDiagram())
-    throw new Error(`View "${viewId}" is not layouted`);
-  return view;
+  return useLikeC4Model().view(viewId);
 }
 function useLikeC4Specification() {
-  return useLikeC4Model().$data.specification;
+  const model = useLikeC4Model(), [specification, setSpecification] = useState(model.$data.specification);
+  return useEffect(() => {
+    setSpecification((current) => deepEqual(current, model.$data.specification) ? current : model.$data.specification);
+  }, [model]), specification;
 }
 const TagStylesContext = createContext({}), radixColors = [
   "yellow",
@@ -19209,16 +19224,12 @@ function useDiagramActorSnapshot(selector2, compare = shallowEqual) {
   const actorRef = useDiagramActorRef();
   return useSelector(actorRef, useCallbackRef(selector2), compare);
 }
-function useDiagramSyncLayoutState(selector2, compare = shallowEqual) {
-  const syncLayoutActorRef = useDiagramActorSnapshot((s2) => s2.context.syncLayoutActorRef);
-  return useSelector(syncLayoutActorRef, useCallbackRef(selector2), compare);
-}
 function useDiagramContext(selector2, compare = shallowEqual, deps) {
   const actorRef = useDiagramActorRef(), select2 = useCallback((s2) => selector2(s2.context), deps ?? []);
   return useSelector(actorRef, select2, compare);
 }
 const createRecipe = (name, defaultVariants, compoundVariants) => {
-  const getVariantProps = (variants) => ({
+  const getVariantProps2 = (variants) => ({
     [name]: "__ignore__",
     ...defaultVariants,
     ...compact(variants)
@@ -19235,15 +19246,15 @@ const createRecipe = (name, defaultVariants, compoundVariants) => {
           toHash: (path, hashFn) => hashFn(path.join(":")),
           transform: (prop, value) => (assertCompoundVariant(name, compoundVariants, variants, prop), value === "__ignore__" ? { className: name } : (value = withoutSpace(value), { className: `${name}--${prop}_${value}` }))
         }
-      }), recipeStyles = getVariantProps(variants);
+      }), recipeStyles = getVariantProps2(variants);
       if (withCompoundVariants) {
         const compoundVariantStyles = getCompoundVariantCss(compoundVariants, recipeStyles);
         return cx(recipeCss(recipeStyles), css(compoundVariantStyles));
       }
       return recipeCss(recipeStyles);
     },
-    getVariantProps,
-    __getCompoundVariantCss__: (variants) => getCompoundVariantCss(compoundVariants, getVariantProps(variants))
+    getVariantProps: getVariantProps2,
+    __getCompoundVariantCss__: (variants) => getCompoundVariantCss(compoundVariants, getVariantProps2(variants))
   };
 }, mergeRecipes = (recipeA, recipeB) => {
   if (recipeA && !recipeB) return recipeA;
@@ -19290,6 +19301,20 @@ const createRecipe = (name, defaultVariants, compoundVariants) => {
     return splitProps(props, actionBtnVariantKeys);
   },
   getVariantProps: actionBtnFn.getVariantProps
+}), elementNodeIconFn = /* @__PURE__ */ createRecipe("likec4-element-node-icon", {}, []), elementNodeIconVariantMap = {}, elementNodeIconVariantKeys = Object.keys(elementNodeIconVariantMap), elementNodeIcon = /* @__PURE__ */ Object.assign(memo(elementNodeIconFn.recipeFn), {
+  __recipe__: !0,
+  __name__: "elementNodeIcon",
+  __getCompoundVariantCss__: elementNodeIconFn.__getCompoundVariantCss__,
+  raw: (props) => props,
+  variantKeys: elementNodeIconVariantKeys,
+  variantMap: elementNodeIconVariantMap,
+  merge(recipe) {
+    return mergeRecipes(this, recipe);
+  },
+  splitVariantProps(props) {
+    return splitProps(props, elementNodeIconVariantKeys);
+  },
+  getVariantProps: elementNodeIconFn.getVariantProps
 }), likec4tagFn = /* @__PURE__ */ createRecipe("likec4-tag", {
   autoTextColor: !1
 }, []), likec4tagVariantMap = {
@@ -19332,7 +19357,75 @@ const createRecipe = (name, defaultVariants, compoundVariants) => {
     return splitProps(props, markdownBlockVariantKeys);
   },
   getVariantProps: markdownBlockFn.getVariantProps
-}), MotionButton = /* @__PURE__ */ createMinimalMotionComponent("button"), MotionDiv = /* @__PURE__ */ createMinimalMotionComponent("div"), compoundActionBtn = cva({
+}), elementNodeDataDefaultVariants = {
+  hasIcon: !1
+}, elementNodeDataCompoundVariants = [
+  {
+    hasDescription: !0,
+    hasTechnology: !0,
+    css: {
+      textContainer: {
+        gap: "6px"
+      }
+    }
+  }
+], elementNodeDataSlotNames = [
+  [
+    "root",
+    "likec4-el-node-data__root"
+  ],
+  [
+    "textContainer",
+    "likec4-el-node-data__textContainer"
+  ],
+  [
+    "title",
+    "likec4-el-node-data__title"
+  ],
+  [
+    "description",
+    "likec4-el-node-data__description"
+  ],
+  [
+    "technology",
+    "likec4-el-node-data__technology"
+  ],
+  [
+    "icon",
+    "likec4-el-node-data__icon"
+  ]
+], elementNodeDataSlotFns = /* @__PURE__ */ elementNodeDataSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, elementNodeDataDefaultVariants, getSlotCompoundVariant(elementNodeDataCompoundVariants, slotName))]), elementNodeDataFn = memo((props = {}) => Object.fromEntries(elementNodeDataSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]))), elementNodeDataVariantKeys = [
+  "hasIcon",
+  "hasDescription",
+  "hasTechnology"
+], getVariantProps = (variants) => ({ ...elementNodeDataDefaultVariants, ...compact(variants) }), elementNodeData = /* @__PURE__ */ Object.assign(elementNodeDataFn, {
+  __recipe__: !1,
+  __name__: "elementNodeData",
+  raw: (props) => props,
+  variantKeys: elementNodeDataVariantKeys,
+  variantMap: {
+    hasIcon: [
+      "false",
+      "true"
+    ],
+    hasDescription: [
+      "false",
+      "true"
+    ],
+    hasTechnology: [
+      "false",
+      "true"
+    ]
+  },
+  splitVariantProps(props) {
+    return splitProps(props, elementNodeDataVariantKeys);
+  },
+  getVariantProps
+});
+function createMinimalMotionComponent(Component, options) {
+  return createMotionComponent(Component, options);
+}
+const MotionButton = /* @__PURE__ */ createMinimalMotionComponent("button"), MotionDiv = /* @__PURE__ */ createMinimalMotionComponent("div"), MotionSpan = /* @__PURE__ */ createMinimalMotionComponent("span"), compoundActionBtn = cva({
   base: {
     transitionDuration: "normal",
     "[data-compound-title-inverse] &": {
@@ -19717,10 +19810,10 @@ const titleContainer = css({
       _light: "likec4.palette.stroke"
     }
   }
-}), iconSize$1 = "20px", cssIcon = css({
-  flex: `0 0 ${iconSize$1}`,
-  height: `${iconSize$1}`,
-  width: `${iconSize$1}`,
+}), iconSize = "20px", cssIcon = css({
+  flex: `0 0 ${iconSize}`,
+  height: `${iconSize}`,
+  width: `${iconSize}`,
   display: "flex",
   alignItems: "center",
   justifyContent: "center",
@@ -19747,7 +19840,7 @@ const titleContainer = css({
   }
 });
 function CompoundTitle({ id: id2, data }) {
-  const elementIcon2 = IconRenderer({
+  const elementIcon = IconRenderer({
     element: {
       id: id2,
       title: data.title,
@@ -19763,7 +19856,7 @@ function CompoundTitle({ id: id2, data }) {
         "likec4-compound-title"
       ),
       children: [
-        elementIcon2,
+        elementIcon,
         /* @__PURE__ */ jsx(Text, { className: titleText, truncate: "end", children: data.title })
       ]
     }
@@ -20464,207 +20557,16 @@ const MarkdownBlock = forwardRef(({
   );
 });
 MarkdownBlock.displayName = "MarkdownBlock";
-const iconSize = "--icon-size", title = css.raw({
-  textStyle: "likec4.node.primary",
-  flex: "0 0 auto",
-  textAlign: "center",
-  color: "likec4.palette.hiContrast"
-}), description = css.raw({
-  flexGrow: "0",
-  flexShrink: "1",
-  textStyle: "likec4.node.secondary",
-  color: "likec4.palette.loContrast",
-  textAlign: "center",
-  textOverflow: "ellipsis",
-  overflow: "hidden",
-  _shapeSizeXs: {
-    display: "none"
-  },
-  _smallZoom: {
-    display: "none"
-  }
-}), technology = css.raw({
-  flex: "0 0 auto",
-  textStyle: "likec4.node.secondary",
-  color: "likec4.palette.loContrast",
-  fontSize: "calc(var(--likec4-text-size) * 0.635)",
-  lineHeight: 1.125,
-  textAlign: "center",
-  textWrap: "balance",
-  opacity: 0.92,
-  _whenHovered: {
-    opacity: 1
-  },
-  _shapeSizeXs: {
-    display: "none"
-  },
-  _shapeSizeSm: {
-    display: "none"
-  },
-  _smallZoom: {
-    display: "none"
-  }
-}), varIconSize = `var(${iconSize})`, elementIcon = css({
-  flex: `0 0 ${varIconSize}`,
-  height: varIconSize,
-  width: varIconSize,
-  display: "flex",
-  alignSelf: "flex-start",
-  alignItems: "center",
-  justifyContent: "center",
-  mixBlendMode: {
-    base: "hard-light",
-    _reduceGraphicsOnPan: "normal"
-  },
-  "& svg, & img": {
-    width: "100%",
-    height: "auto",
-    maxHeight: "100%",
-    pointerEvents: "none",
-    filter: {
-      base: [
-        "drop-shadow(0 0 3px rgb(0 0 0 / 12%))",
-        "drop-shadow(0 1px 8px rgb(0 0 0 / 8%))",
-        "drop-shadow(1px 1px 16px rgb(0 0 0 / 3%))"
-      ],
-      _reduceGraphicsOnPan: "none"
-    }
-  },
-  "& img": {
-    objectFit: "contain"
-  }
-}), elementTitle = sva({
-  slots: ["root", "textContainer", "title", "description", "technology"],
-  base: {
-    root: {
-      position: "relative",
-      flex: "1",
-      height: "fit-content",
-      width: "fit-content",
-      maxHeight: "100%",
-      maxWidth: "100%",
-      margin: "0 auto",
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "center",
-      flexDirection: "row",
-      paddingTop: "var(--likec4-spacing)",
-      paddingBottom: "var(--likec4-spacing)",
-      paddingLeft: "calc(var(--likec4-spacing) + 8px)",
-      paddingRight: "calc(var(--likec4-spacing) + 8px)",
-      overflow: "hidden",
-      pointerEvents: "none",
-      gap: "12px",
-      _shapeQueue: {
-        paddingLeft: "46px",
-        paddingRight: "16px"
-      },
-      _shapeMobile: {
-        paddingLeft: "46px",
-        paddingRight: "16px"
-      },
-      _shapeCylinder: {
-        paddingTop: "30px"
-      },
-      _shapeStorage: {
-        paddingTop: "30px"
-      },
-      _shapeBrowser: {
-        paddingTop: "32px",
-        paddingBottom: "28px"
-      },
-      _shapeSizeXs: {
-        [iconSize]: "24px"
-      },
-      _shapeSizeSm: {
-        [iconSize]: "36px"
-      },
-      _shapeSizeMd: {
-        [iconSize]: "60px"
-      },
-      _shapeSizeLg: {
-        [iconSize]: "82px",
-        gap: "16px"
-      },
-      _shapeSizeXl: {
-        [iconSize]: "90px",
-        gap: "16px"
-      }
-    },
-    textContainer: {
-      height: "fit-content",
-      width: "fit-content",
-      maxHeight: "100%",
-      maxWidth: "100%",
-      flex: "0 1 auto",
-      display: "flex",
-      flexDirection: "column",
-      alignItems: "stretch",
-      justifyContent: "center",
-      flexWrap: "nowrap",
-      overflow: "hidden",
-      gap: "8px"
-    },
-    title,
-    description,
-    technology
-  },
-  variants: {
-    hasIcon: {
-      false: {},
-      true: {
-        root: {
-          gap: "16px"
-        },
-        textContainer: {
-          minWidth: `calc(50% + ${varIconSize})`,
-          alignItems: "flex-start"
-        },
-        title: {
-          textAlign: "left"
-        },
-        description: {
-          textAlign: "left"
-        },
-        technology: {
-          textAlign: "left"
-        }
-      }
-    },
-    hasDescription: {
-      false: {},
-      true: {}
-    },
-    hasTechnology: {
-      false: {},
-      true: {}
-    }
-  },
-  compoundVariants: [
-    {
-      hasDescription: !0,
-      hasTechnology: !0,
-      css: {
-        textContainer: {
-          gap: "6px"
-        }
-      }
-    }
-  ],
-  defaultVariants: {
-    hasIcon: !1
-  }
-});
-function ElementTitle({ id: id2, data, iconSize: iconSize$12 }) {
-  const elementIcon$1 = IconRenderer({
+function ElementTitle({ id: id2, data, iconSize: iconSize2 }) {
+  const elementIcon = IconRenderer({
     element: {
       id: id2,
       title: data.title,
       icon: data.icon
     },
-    className: elementIcon
-  }), classes2 = elementTitle({
-    hasIcon: n$1(elementIcon$1),
+    className: elementNodeIcon()
+  }), classes2 = elementNodeData({
+    hasIcon: n$1(elementIcon),
     hasDescription: !!data.description?.nonEmpty,
     hasTechnology: !n(data.technology ?? "")
   }), size2 = nodeSizes(data.style).size, isSmOrXs = size2 === "sm" || size2 === "xs";
@@ -20675,12 +20577,12 @@ function ElementTitle({ id: id2, data, iconSize: iconSize$12 }) {
         classes2.root,
         "likec4-element"
       ),
-      style: e(iconSize$12) ? {
+      style: e(iconSize2) ? {
         // @ts-ignore
-        [iconSize]: `${iconSize$12}px`
+        "--likec4-icon-size": `${iconSize2}px`
       } : void 0,
       children: [
-        elementIcon$1,
+        elementIcon,
         /* @__PURE__ */ jsxs(Box, { className: cx(classes2.textContainer, "likec4-element-main-props"), children: [
           /* @__PURE__ */ jsx(
             Text,
@@ -20715,6 +20617,12 @@ function ElementTitle({ id: id2, data, iconSize: iconSize$12 }) {
     }
   );
 }
+function useCurrentViewModel() {
+  const vm = useContext(CurrentViewModelContext);
+  if (!vm)
+    throw new Error("No LikeC4ViewModel in context found");
+  return vm;
+}
 const CompoundActions = (props) => {
   const { enableNavigateTo } = useEnabledFeatures(), diagram = useDiagram(), { navigateTo } = props.data;
   return navigateTo && enableNavigateTo ? /* @__PURE__ */ jsx(
@@ -20779,7 +20687,7 @@ const CompoundActions = (props) => {
   { key: "primary", value: primary.fill },
   { key: "secondary", value: secondary.fill },
   { key: "muted", value: muted.fill }
-], colors = t$4(otherColors).map((key) => ({
+], colors = t$3(otherColors).map((key) => ({
   key,
   value: defaultTheme.elements[key].fill
 })), Tooltip = Tooltip$1.withProps({
@@ -21019,7 +20927,7 @@ const toolbarTitle = css({
   overflow: "hidden",
   whiteSpace: "nowrap"
 }), useSelectedNodesCount = () => useDiagramContext((s2) => s2.xynodes.filter((x) => x.selected).length);
-function Toolbar({ title: title2, children: children2, nodeProps, ...props }) {
+function Toolbar({ title, children: children2, nodeProps, ...props }) {
   const selectedNodesCount = useSelectedNodesCount(), {
     selected: selected2 = !1,
     dragging = !1,
@@ -21051,7 +20959,7 @@ function Toolbar({ title: title2, children: children2, nodeProps, ...props }) {
           onDoubleClick: stopPropagation,
           withBorder: !0,
           children: /* @__PURE__ */ jsxs(Stack, { gap: "6px", children: [
-            /* @__PURE__ */ jsx(Box$1, { px: "4px", children: /* @__PURE__ */ jsx(Text, { className: toolbarTitle, children: title2 }) }),
+            /* @__PURE__ */ jsx(Box$1, { px: "4px", children: /* @__PURE__ */ jsx(Text, { className: toolbarTitle, children: title }) }),
             /* @__PURE__ */ jsx(Group, { gap: 4, children: children2 })
           ] })
         }
@@ -21606,299 +21514,317 @@ const backdropBlur = "--_blur", backdropOpacity = "--_opacity", level = "--_leve
 });
 Overlay.displayName = "Overlay";
 export {
-  getContrastColor as $,
-  createOptionalContext as A,
+  FloatingDelayGroup as $,
+  createVarsResolver as A,
   Box$1 as B,
-  useResolvedStylesApi as C,
+  polymorphicFactory as C,
   DEFAULT_THEME as D,
-  getFontSize as E,
-  useId$1 as F,
-  extractStyleProps as G,
-  clsx as H,
-  getThemeColor as I,
-  isElement$1 as J,
-  getRefProp as K,
-  useUncontrolled as L,
+  getRadius as E,
+  getSize as F,
+  createOptionalContext as G,
+  useResolvedStylesApi as H,
+  getFontSize as I,
+  useId$1 as J,
+  extractStyleProps as K,
+  clsx as L,
   MantineContext as M,
-  Paper as N,
-  getSpacing as O,
+  getThemeColor as N,
+  isElement$1 as O,
   Popover as P,
-  filterProps$1 as Q,
-  InlineStyles as R,
-  useRandomClassName as S,
+  getRefProp as Q,
+  useUncontrolled as R,
+  getSpacing as S,
   Text as T,
   UnstyledButton as U,
-  parseThemeColor as V,
-  createEventHandler as W,
-  useDisclosure as X,
-  useDelayedHover as Y,
-  Loader as Z,
-  createScopedKeydownHandler as _,
+  Paper as V,
+  filterProps$1 as W,
+  InlineStyles as X,
+  useRandomClassName as Y,
+  parseThemeColor as Z,
+  createEventHandler as _,
   useMediaQuery as a,
-  n as a$,
-  findElementAncestor as a0,
-  useClickOutside as a1,
-  createReactComponent as a2,
-  C as a3,
-  s as a4,
-  u$2 as a5,
-  MotionConfigContext as a6,
-  useConstant as a7,
-  PresenceContext as a8,
-  useIsomorphicLayoutEffect$1 as a9,
-  scaleCorrectors as aA,
-  degrees$1 as aB,
-  vw as aC,
-  vh as aD,
-  numberValueTypes as aE,
-  isControllingVariants as aF,
-  isVariantNode as aG,
-  hasReducedMotionListener as aH,
-  initPrefersReducedMotion as aI,
-  prefersReducedMotion as aJ,
-  isCSSVariableName as aK,
-  buildHTMLStyles as aL,
-  scrapeMotionValuesFromProps$1 as aM,
-  camelToDash as aN,
-  scrapeMotionValuesFromProps as aO,
-  buildSVGAttrs as aP,
-  isSVGTag as aQ,
-  isSVGComponent as aR,
-  useDebouncedCallback as aS,
-  isBrowser as aT,
-  getPatternStyles as aU,
-  patternFns as aV,
-  splitProps as aW,
-  styled as aX,
-  css as aY,
-  useLikeC4Specification as aZ,
-  useUpdateEffect as a_,
-  LayoutGroupContext as aa,
-  createRenderBatcher as ab,
-  featureDefinitions as ac,
-  LazyContext as ad,
-  loadExternalIsValidProp as ae,
-  resolveVariantFromProps as af,
-  MotionGlobalConfig as ag,
-  isMotionValue as ah,
-  optimizedAppearDataAttribute as ai,
-  transformProps as aj,
-  number as ak,
-  alpha as al,
-  clamp$1 as am,
-  percent as an,
-  isCSSVariableToken as ao,
-  px as ap,
-  transformPropOrder as aq,
-  isVariantLabel as ar,
-  variantProps as as,
-  isAnimationControls as at,
-  variantPriorityOrder as au,
-  isRefObject as av,
-  SwitchLayoutGroupContext as aw,
-  addScaleCorrector as ax,
-  microtask as ay,
-  resolveMotionValue as az,
+  isBrowser as a$,
+  useDelayGroup as a0,
+  useFloating as a1,
+  useInteractions as a2,
+  useHover as a3,
+  useRole as a4,
+  useDismiss as a5,
+  AccordionChevron as a6,
+  Loader as a7,
+  createScopedKeydownHandler as a8,
+  getContrastColor as a9,
+  isControllingVariants as aA,
+  isVariantNode as aB,
+  hasReducedMotionListener as aC,
+  initPrefersReducedMotion as aD,
+  prefersReducedMotion as aE,
+  transformProps as aF,
+  featureDefinitions as aG,
+  resolveVariantFromProps as aH,
+  isCSSVariableName as aI,
+  buildHTMLStyles as aJ,
+  scrapeMotionValuesFromProps$1 as aK,
+  camelToDash as aL,
+  scrapeMotionValuesFromProps as aM,
+  buildSVGAttrs as aN,
+  isSVGTag as aO,
+  isSVGComponent as aP,
+  optimizedAppearDataAttribute as aQ,
+  isVariantLabel as aR,
+  variantProps as aS,
+  isAnimationControls as aT,
+  variantPriorityOrder as aU,
+  isRefObject as aV,
+  SwitchLayoutGroupContext as aW,
+  addScaleCorrector as aX,
+  resolveMotionValue as aY,
+  scaleCorrectors as aZ,
+  useDebouncedCallback as a_,
+  findElementAncestor as aa,
+  useClickOutside as ab,
+  createReactComponent as ac,
+  C as ad,
+  s as ae,
+  u$2 as af,
+  number as ag,
+  alpha as ah,
+  clamp$1 as ai,
+  percent as aj,
+  isCSSVariableToken as ak,
+  px as al,
+  transformPropOrder as am,
+  degrees$1 as an,
+  vw as ao,
+  vh as ap,
+  numberValueTypes as aq,
+  MotionConfigContext as ar,
+  useConstant as as,
+  PresenceContext as at,
+  useIsomorphicLayoutEffect$1 as au,
+  LayoutGroupContext as av,
+  loadFeatures as aw,
+  LazyContext as ax,
+  loadExternalIsValidProp as ay,
+  isMotionValue as az,
   useMantineTheme as b,
-  Button as b$,
-  t$1 as b0,
-  Background as b1,
-  BackgroundVariant as b2,
-  useIsZoomTooSmall as b3,
-  useXYStoreApi as b4,
-  index as b5,
-  stopPropagation as b6,
-  cx as b7,
-  useStore$1 as b8,
-  XSTATE_STOP as b9,
-  evaluateGuard as bA,
-  getCandidates as bB,
-  NULL_EVENT as bC,
-  createInvokeId as bD,
-  getDelayedTransitions as bE,
-  formatInitialTransition as bF,
-  createErrorActorEvent as bG,
-  XSTATE_ERROR as bH,
-  cancel as bI,
-  raise as bJ,
-  spawnChild as bK,
-  stopChild as bL,
-  deepEqual as bM,
-  ActionIcon as bN,
-  IconZoomScan as bO,
-  sva as bP,
-  Box as bQ,
-  n$1 as bR,
-  EdgeLabelRenderer as bS,
-  e as bT,
-  useDiagramContext as bU,
-  useDiagram as bV,
-  useMantinePortalProps as bW,
-  PopoverTarget as bX,
-  PopoverDropdown as bY,
-  Stack as bZ,
-  Group as b_,
-  cloneMachineSnapshot as ba,
-  ProcessingStatus as bb,
-  resolveReferencedActor as bc,
-  createActor as bd,
-  resolveStateValue as be,
-  getAllStateNodes as bf,
-  getStateNodes as bg,
-  createMachineSnapshot as bh,
-  isInFinalState as bi,
-  macrostep as bj,
-  transitionNode as bk,
-  resolveActionsAndContext as bl,
-  createInitEvent as bm,
-  microstep as bn,
-  getInitialStateNodes as bo,
-  toStatePath as bp,
-  isStateId as bq,
-  getStateNodeByPath as br,
-  getPersistedSnapshot as bs,
-  $$ACTOR_TYPE as bt,
-  STATE_DELIMITER as bu,
-  mapValues as bv,
-  toArray as bw,
-  formatTransitions as bx,
-  toTransitionConfigArray as by,
-  formatTransition as bz,
+  IconZoomScan as b$,
+  css as b0,
+  getPatternStyles as b1,
+  patternFns as b2,
+  splitProps as b3,
+  styled as b4,
+  useLikeC4Specification as b5,
+  useUpdateEffect as b6,
+  n as b7,
+  t$1 as b8,
+  Background as b9,
+  getPersistedSnapshot as bA,
+  $$ACTOR_TYPE as bB,
+  STATE_DELIMITER as bC,
+  mapValues as bD,
+  toArray as bE,
+  formatTransitions as bF,
+  toTransitionConfigArray as bG,
+  formatTransition as bH,
+  evaluateGuard as bI,
+  getCandidates as bJ,
+  NULL_EVENT as bK,
+  createInvokeId as bL,
+  getDelayedTransitions as bM,
+  formatInitialTransition as bN,
+  createErrorActorEvent as bO,
+  XSTATE_ERROR as bP,
+  cancel as bQ,
+  raise as bR,
+  spawnChild as bS,
+  stopChild as bT,
+  memo as bU,
+  createRecipe as bV,
+  mergeRecipes as bW,
+  compact as bX,
+  getSlotCompoundVariant as bY,
+  deepEqual as bZ,
+  ActionIcon as b_,
+  BackgroundVariant as ba,
+  useIsZoomTooSmall as bb,
+  useXYStoreApi as bc,
+  index as bd,
+  stopPropagation as be,
+  cx as bf,
+  useStore$1 as bg,
+  XSTATE_STOP as bh,
+  cloneMachineSnapshot as bi,
+  ProcessingStatus as bj,
+  resolveReferencedActor as bk,
+  createActor as bl,
+  resolveStateValue as bm,
+  getAllStateNodes as bn,
+  getStateNodes as bo,
+  createMachineSnapshot as bp,
+  isInFinalState as bq,
+  macrostep as br,
+  transitionNode as bs,
+  resolveActionsAndContext as bt,
+  createInitEvent as bu,
+  microstep as bv,
+  getInitialStateNodes as bw,
+  toStatePath as bx,
+  isStateId as by,
+  getStateNodeByPath as bz,
   useMantineStyleNonce as c,
-  ActionIconGroup as c$,
-  IconCheck as c0,
-  cva as c1,
-  useLikeC4Model as c2,
-  findDiagramNode as c3,
-  findDiagramEdge as c4,
-  Menu as c5,
-  MenuTarget as c6,
-  MenuDropdown as c7,
-  MenuLabel as c8,
-  MenuDivider as c9,
-  IconTransform as cA,
-  customNode as cB,
-  CompoundNodeContainer as cC,
-  CompoundTitle as cD,
-  ElementNodeContainer as cE,
-  ElementShape as cF,
-  ElementTitle as cG,
-  ElementTags as cH,
-  ElementDetailsButton as cI,
-  Handle as cJ,
-  Position as cK,
-  getDefaultExportFromCjs as cL,
-  l$1 as cM,
-  IconSelector as cN,
-  SegmentedControl as cO,
-  ReactFlowProvider as cP,
-  useStoreApi as cQ,
-  useReactFlow as cR,
-  Panel as cS,
-  m as cT,
-  u as cU,
-  useSyncedRef as cV,
-  IconRenderer as cW,
-  useTimeoutEffect as cX,
-  ReactRemoveScroll as cY,
-  Flex as cZ,
-  ElementTag as c_,
-  MenuItem as ca,
-  useEnabledFeatures as cb,
-  useDiagramEventHandlers as cc,
-  TooltipGroup as cd,
-  Space as ce,
-  Tooltip$1 as cf,
-  IfEnabled as cg,
-  IconFileSymlink as ch,
-  getNodeDimensions as ci,
-  useIsPanning as cj,
-  useXYFlow as ck,
-  useDiagramActorSnapshot as cl,
-  useXYInternalNode as cm,
-  isSamePoint as cn,
-  bezierControlPoints as co,
-  bezierPath as cp,
-  ViewGroupNode as cq,
-  CompoundDeploymentNode as cr,
-  CompoundElementNode as cs,
-  DeploymentNode as ct,
-  ElementNode as cu,
-  shallowEqual as cv,
-  useSelector as cw,
-  getBezierPath as cx,
-  useCurrentViewId as cy,
-  ElementActionButtons as cz,
+  useActorRef as c$,
+  sva as c0,
+  Box as c1,
+  n$1 as c2,
+  EdgeLabelRenderer as c3,
+  e as c4,
+  useDiagramContext as c5,
+  useDiagram as c6,
+  useMantinePortalProps as c7,
+  PopoverTarget as c8,
+  PopoverDropdown as c9,
+  isSamePoint as cA,
+  bezierControlPoints as cB,
+  bezierPath as cC,
+  ViewGroupNode as cD,
+  CompoundDeploymentNode as cE,
+  CompoundElementNode as cF,
+  DeploymentNode as cG,
+  ElementNode as cH,
+  MotionButton as cI,
+  useHover$1 as cJ,
+  FloatingIndicator as cK,
+  Flex as cL,
+  clampUseMovePosition as cM,
+  useMove as cN,
+  hstack as cO,
+  MotionDiv as cP,
+  shallowEqual as cQ,
+  useSelector as cR,
+  useCurrentViewId as cS,
+  isMacOs as cT,
+  MotionSpan as cU,
+  Portal as cV,
+  HStack as cW,
+  Divider as cX,
+  o$1 as cY,
+  useDiagramActorRef as cZ,
+  useCurrentViewModel as c_,
+  Stack as ca,
+  Group as cb,
+  Button as cc,
+  IconCheck as cd,
+  cva as ce,
+  useLikeC4Model as cf,
+  findDiagramNode as cg,
+  findDiagramEdge as ch,
+  Menu as ci,
+  MenuTarget as cj,
+  MenuDropdown as ck,
+  MenuLabel as cl,
+  MenuDivider as cm,
+  MenuItem as cn,
+  useEnabledFeatures as co,
+  useDiagramEventHandlers as cp,
+  TooltipGroup as cq,
+  Space as cr,
+  Tooltip$1 as cs,
+  IfEnabled as ct,
+  IconFileSymlink as cu,
+  getNodeDimensions as cv,
+  useIsPanning as cw,
+  useXYFlow as cx,
+  useDiagramActorSnapshot as cy,
+  useXYInternalNode as cz,
   alpha$1 as d,
-  ElementDetailsButtonWithHandler as d$,
-  MarkdownBlock as d0,
-  DiagramFeatures as d1,
-  Divider as d2,
-  useXYStore as d3,
-  useReducedMotionConfig as d4,
-  Overlay as d5,
-  t$2 as d6,
-  VisuallyHidden as d7,
-  MotionDiv as d8,
-  IconOrShapeRenderer as d9,
-  focusedBounds as dA,
-  or as dB,
-  nodeToRect as dC,
-  useDiagramEventHandlersRef as dD,
-  useActorRef as dE,
-  DiagramActorContextProvider as dF,
-  IconRendererProvider as dG,
-  DiagramEventHandlers as dH,
-  ReduceGraphicsContext as dI,
-  RootContainer as dJ,
-  useMutationObserver as dK,
-  Portal as dL,
-  shallowEqual$1 as dM,
-  LikeC4ModelContext as dN,
-  useDiagramActorRef as dO,
-  useLikeC4ViewModel as dP,
-  useSetState as dQ,
-  CompoundActionButton as dR,
-  CompoundDetailsButton as dS,
-  DefaultHandles as dT,
-  CompoundActions as dU,
-  CompoundDeploymentToolbar as dV,
-  CompoundDetailsButtonWithHandler as dW,
-  CompoundElementToolbar as dX,
-  DeploymentElementActions as dY,
-  DeploymentElementToolbar as dZ,
-  ElementActions as d_,
-  MotionButton as da,
-  FocusTrap as db,
-  HStack as dc,
-  t$4 as dd,
-  isMacOs as de,
-  useHover$1 as df,
-  FloatingIndicator as dg,
-  clampUseMovePosition as dh,
-  useMove as di,
-  useDiagramSyncLayoutState as dj,
-  ButtonGroup as dk,
-  useIsReducedGraphics as dl,
-  usePanningAtom as dm,
-  useTimeout as dn,
-  useCustomCompareMemo as dp,
-  applyEdgeChanges as dq,
-  applyNodeChanges as dr,
-  getViewportForBounds as ds,
-  typedSystem as dt,
-  centerXYInternalNode as du,
-  t$3 as dv,
-  getBoundsOfRects as dw,
-  boxToRect as dx,
-  and as dy,
-  AllDisabled as dz,
+  DiagramEventHandlers as d$,
+  useUpdateEffect$1 as d0,
+  getBezierPath as d1,
+  ElementActionButtons as d2,
+  IconTransform as d3,
+  customNode as d4,
+  CompoundNodeContainer as d5,
+  CompoundTitle as d6,
+  ElementNodeContainer as d7,
+  ElementShape as d8,
+  ElementTitle as d9,
+  t$2 as dA,
+  VisuallyHidden as dB,
+  IconOrShapeRenderer as dC,
+  FocusTrap as dD,
+  t$3 as dE,
+  ButtonGroup as dF,
+  useIsReducedGraphics as dG,
+  usePanningAtom as dH,
+  useTimeout as dI,
+  useCustomCompareMemo as dJ,
+  applyEdgeChanges as dK,
+  applyNodeChanges as dL,
+  getViewportForBounds as dM,
+  typedSystem as dN,
+  centerXYInternalNode as dO,
+  getBoundsOfRects as dP,
+  boxToRect as dQ,
+  and as dR,
+  AllDisabled as dS,
+  focusedBounds as dT,
+  or as dU,
+  nodeToRect as dV,
+  useDiagramEventHandlersRef as dW,
+  useCustomCompareEffect as dX,
+  DiagramActorContextProvider as dY,
+  CurrentViewModelContext as dZ,
+  IconRendererProvider as d_,
+  ElementTags as da,
+  ElementDetailsButton as db,
+  Handle as dc,
+  Position as dd,
+  getDefaultExportFromCjs as de,
+  l$1 as df,
+  IconSelector as dg,
+  SegmentedControl as dh,
+  ReactFlowProvider as di,
+  useStoreApi as dj,
+  useReactFlow as dk,
+  Panel as dl,
+  m as dm,
+  u as dn,
+  useSyncedRef as dp,
+  IconRenderer as dq,
+  useTimeoutEffect as dr,
+  ReactRemoveScroll as ds,
+  ElementTag as dt,
+  ActionIconGroup as du,
+  MarkdownBlock as dv,
+  DiagramFeatures as dw,
+  useXYStore as dx,
+  useReducedMotionConfig as dy,
+  Overlay as dz,
   em as e,
-  ElementToolbar as e0,
-  Toolbar as e1,
-  IfNotEnabled as e2,
-  IfNotReadOnly as e3,
-  IfReadOnly as e4,
+  ReduceGraphicsContext as e0,
+  RootContainer as e1,
+  useMutationObserver as e2,
+  shallowEqual$1 as e3,
+  LikeC4ModelContext as e4,
+  useLikeC4ViewModel as e5,
+  useSetState as e6,
+  CompoundActionButton as e7,
+  CompoundDetailsButton as e8,
+  DefaultHandles as e9,
+  CompoundActions as ea,
+  CompoundDeploymentToolbar as eb,
+  CompoundDetailsButtonWithHandler as ec,
+  CompoundElementToolbar as ed,
+  DeploymentElementActions as ee,
+  DeploymentElementToolbar as ef,
+  ElementActions as eg,
+  ElementDetailsButtonWithHandler as eh,
+  ElementToolbar as ei,
+  Toolbar as ej,
+  IfNotEnabled as ek,
+  IfNotReadOnly as el,
+  IfReadOnly as em,
   getPrimaryContrastColor as f,
   getPrimaryShade as g,
   deepMerge as h,
@@ -21906,18 +21832,18 @@ export {
   useIsomorphicEffect as j,
   keys$1 as k,
   MantineThemeProvider as l,
-  createSafeContext as m,
-  useProps as n,
-  useMergedRef as o,
-  useDirection as p,
-  factory as q,
+  useDidUpdate as m,
+  mergeRefs as n,
+  factory as o,
+  useProps as p,
+  useReducedMotion$1 as q,
   rem as r,
-  useStyles as s,
-  toInt as t,
+  getStyleObject as s,
+  createSafeContext as t,
   useCallbackRef as u,
-  useMergeRefs as v,
-  createVarsResolver as w,
-  polymorphicFactory as x,
-  getRadius as y,
-  getSize as z
+  useMergedRef as v,
+  toInt as w,
+  useDirection as x,
+  useStyles as y,
+  useMergeRefs as z
 };