@likec4/diagram 1.47.0 → 1.48.0

package/dist/adhoc-editor/viewrules/ViewRulesPanel.d.ts

@@ -0,0 +1,6 @@
+import { AdhocRule } from '../actor.types';
+export declare function ViewRulesPanel({ rules, onToggle, onDelete, }: {
+    rules: AdhocRule[];
+    onToggle: (rule: AdhocRule) => void;
+    onDelete: (rule: AdhocRule) => void;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/adhoc-editor/viewrules/ViewRulesPanel.js

@@ -0,0 +1,104 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import '@likec4/core';
+import { cx } from '@likec4/styles/css';
+import { Box, styled } from '@likec4/styles/jsx';
+import { vstack, hstack, txt } from '@likec4/styles/patterns';
+import { ActionIcon } from '@mantine/core';
+import { AnimatePresence, LayoutGroup, m } from 'motion/react';
+import IconCirclePlus from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconCirclePlus.js';
+import IconTrash from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconTrash.js';
+
+function ViewRulesPanel({
+  rules,
+  onToggle,
+  onDelete
+}) {
+  return /* @__PURE__ */ jsxs(Box, { p: "1", children: [
+    /* @__PURE__ */ jsx(styled.h4, { mt: "0", fontSize: "md", fontWeight: "normal", children: "View Rules" }),
+    /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", propagate: true, children: /* @__PURE__ */ jsx(LayoutGroup, { children: /* @__PURE__ */ jsx(m.div, { layout: true, layoutRoot: true, className: vstack({ gap: "1" }), children: rules.map((rule) => /* @__PURE__ */ jsx(
+      m.div,
+      {
+        layout: "position",
+        onClick: () => {
+          return onToggle(rule);
+        },
+        initial: {
+          opacity: 0,
+          y: -50
+        },
+        animate: {
+          opacity: rule.enabled ? 1 : 0.5,
+          scale: rule.enabled ? 1 : 0.98,
+          y: 0
+        },
+        exit: {
+          opacity: 0,
+          scale: 0.95,
+          y: -50
+        },
+        className: cx(
+          hstack({
+            p: "1",
+            px: "2",
+            flexWrap: "nowrap",
+            rounded: "sm",
+            colorPalette: "teal",
+            // colorPalette: rule.type === 'include' ? 'green' : 'red',
+            gap: "2",
+            border: "default"
+            // opacity: rule.enabled ? 1 : 0.5,
+          })
+          // rule.type !== 'include' && css({ colorPalette: 'red' }),
+        ),
+        children: /* @__PURE__ */ jsx(
+          ViewRule,
+          {
+            rule,
+            onToggle: () => onToggle(rule),
+            onDelete: () => onDelete(rule)
+          },
+          rule.id
+        )
+      },
+      rule.id
+    )) }) }) })
+  ] });
+}
+function ViewRule({ rule, onToggle, onDelete }) {
+  rule.type === "include";
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(PredicatIcon, { children: /* @__PURE__ */ jsx(IconCirclePlus, { size: 14 }) }),
+    /* @__PURE__ */ jsx(
+      m.div,
+      {
+        layout: true,
+        animate: {
+          originX: 0,
+          scale: rule.enabled ? 1 : 0.9
+        },
+        className: txt({ flex: 1, truncate: true }),
+        children: JSON.stringify(rule.expr)
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ActionIcon,
+      {
+        onClick: (e) => {
+          e.stopPropagation();
+          onDelete();
+        },
+        variant: "subtle",
+        color: "red",
+        children: /* @__PURE__ */ jsx(IconTrash, {})
+      }
+    )
+  ] });
+}
+const PredicatIcon = styled("div", {
+  base: {
+    display: "contents",
+    color: "colorPalette.9"
+  }
+});
+
+export { ViewRulesPanel };

package/dist/base/const.d.ts

@@ -15,3 +15,4 @@ export declare const FitViewPaddings: {
         bottom: "16px";
     };
 };
+export declare const MAX_COMPOUND_DEPTH = 5;

package/dist/base/const.js

@@ -16,5 +16,6 @@ const FitViewPaddings = {
     bottom: "16px"
   }
 };
+const MAX_COMPOUND_DEPTH = 5;
 
-export { FitViewPaddings, MaxZoom, MinZoom, ZIndexes };
+export { FitViewPaddings, MAX_COMPOUND_DEPTH, MaxZoom, MinZoom, ZIndexes };

package/dist/base/updateEdges.js

@@ -1,5 +1,5 @@
 import { deepEqual } from 'fast-equals';
-import { isDefined, pickBy, isShallowEqual } from 'remeda';
+import { isDefined, hasSubObject, pickBy, isShallowEqual } from 'remeda';
 
 const EMPTY_OBJ = {};
 function _update(current, updated) {
@@ -13,8 +13,31 @@ function _update(current, updated) {
     if (!existing) {
       return update;
     }
-    const isSameData = deepEqual(existing.data, update.data);
-    const data = isSameData ? existing.data : update.data;
+    if (existing === update) {
+      return existing;
+    }
+    const isSameData = hasSubObject(existing.data, update.data);
+    let data = isSameData ? existing.data : update.data;
+    if (!isSameData) {
+      if (isDefined(existing.data.hovered) && !isDefined(update.data.hovered)) {
+        data = {
+          ...data,
+          hovered: existing.data.hovered
+        };
+      }
+      if (isDefined(existing.data.dimmed) && !isDefined(update.data.dimmed)) {
+        data = {
+          ...data,
+          dimmed: existing.data.dimmed
+        };
+      }
+      if (isDefined(existing.data.active) && !isDefined(update.data.active)) {
+        data = {
+          ...data,
+          active: existing.data.active
+        };
+      }
+    }
     if (isSameData && deepEqual(existing.hidden, update.hidden ?? existing.hidden) && deepEqual(existing.selected, update.selected ?? existing.selected) && deepEqual(existing.selectable, update.selectable ?? existing.selectable) && deepEqual(existing.focusable, update.focusable ?? existing.focusable) && deepEqual(existing.animated, update.animated ?? existing.animated) && deepEqual(existing.className, update.className) && deepEqual(existing.zIndex, update.zIndex ?? existing.zIndex) && deepEqual(existing.label, update.label) && deepEqual(existing.sourceHandle, update.sourceHandle) && deepEqual(existing.targetHandle, update.targetHandle) && deepEqual(existing.style ?? EMPTY_OBJ, update.style ?? EMPTY_OBJ)) {
       return existing;
     }

package/dist/base/updateNodes.js

@@ -1,6 +1,6 @@
 import { getNodeDimensions } from '@xyflow/system';
-import { deepEqual } from 'fast-equals';
-import { isDefined, hasSubObject, pickBy, isShallowEqual } from 'remeda';
+import { deepEqual, shallowEqual } from 'fast-equals';
+import { isDefined, hasSubObject, pickBy } from 'remeda';
 
 const EMPTY_OBJ = {};
 function _update(current, updated) {
@@ -12,6 +12,9 @@ function _update(current, updated) {
     if (!existing) {
       return update;
     }
+    if (existing === update) {
+      return existing;
+    }
     const isSameData = hasSubObject(existing.data, update.data);
     let data = isSameData ? existing.data : update.data;
     if (!isSameData) {
@@ -36,8 +39,8 @@ function _update(current, updated) {
     }
     const handles = haveHandles && isSameHandles ? existing.handles : update.handles;
     return {
-      // Retain existing properties that are defined, except parentId
-      ...pickBy(existing, (v, k) => isDefined(v) && k !== "parentId"),
+      // Retain existing properties that are defined, except parentId and handles
+      ...pickBy(existing, (v, k) => isDefined(v) && k !== "parentId" && k !== "handles"),
       // Retain measured dimensions from existing if present
       ..."measured" in existing && {
         measured: {
@@ -54,7 +57,7 @@ function _update(current, updated) {
       data
     };
   });
-  return isShallowEqual(current, updated) ? current : updated;
+  return shallowEqual(current, updated) ? current : updated;
 }
 function updateNodes(current, update) {
   if (isDefined(update)) {

package/dist/base-primitives/Markdown.d.ts

@@ -1,5 +1,5 @@
 import { RichTextOrEmpty as RichTextType } from '@likec4/core/types';
-import { JsxStyleProps } from '../../styled-system/types';
+import { JsxStyleProps } from '@likec4/styles/types';
 import { ComponentPropsWithoutRef, ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefAttributes } from 'react';
 export type MarkdownProps = Omit<ComponentPropsWithoutRef<'div'>, 'dangerouslySetInnerHTML' | 'children' | 'color'> & {
     value: RichTextType;

package/dist/base-primitives/Markdown.js

@@ -23,8 +23,8 @@ const Markdown = forwardRef(({
   return /* @__PURE__ */ jsx(
     Box,
     {
-      ref,
       ...props,
+      ref,
       className: cx(
         markdownBlock({
           uselikec4palette,

package/dist/base-primitives/NodeHandles.d.ts

@@ -1,5 +1,7 @@
-import { MemoExoticComponent } from 'react';
+import { AutoLayoutDirection } from '@likec4/core/types';
 /**
  * XYFlow requires handles to be defined on nodes.
  */
-export declare const DefaultHandles: MemoExoticComponent<() => import("react/jsx-runtime").JSX.Element>;
+export declare function DefaultHandles({ direction }: {
+    direction?: AutoLayoutDirection | undefined;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/base-primitives/NodeHandles.js

@@ -1,25 +1,52 @@
-import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { nonexhaustive } from '@likec4/core';
 import { Position, Handle } from '@xyflow/react';
-import { memo, Fragment as Fragment$1 } from 'react';
 
-const positions = [Position.Top, Position.Right, Position.Bottom, Position.Left];
-const DefaultHandles = memo(() => /* @__PURE__ */ jsx(Fragment, { children: positions.map((position) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
-  /* @__PURE__ */ jsx(
-    Handle,
-    {
-      type: "source",
-      position,
-      className: "likec4-node-handle-center"
+function DefaultHandles({ direction = "TB" }) {
+  let sourcePosition, targetPosition;
+  switch (direction) {
+    case "TB": {
+      sourcePosition = Position.Bottom;
+      targetPosition = Position.Top;
+      break;
     }
-  ),
-  /* @__PURE__ */ jsx(
-    Handle,
-    {
-      type: "target",
-      position,
-      className: "likec4-node-handle-center"
+    case "BT": {
+      sourcePosition = Position.Top;
+      targetPosition = Position.Bottom;
+      break;
     }
-  )
-] }, position)) }));
+    case "LR": {
+      sourcePosition = Position.Right;
+      targetPosition = Position.Left;
+      break;
+    }
+    case "RL": {
+      sourcePosition = Position.Left;
+      targetPosition = Position.Right;
+      break;
+    }
+    default: {
+      nonexhaustive(direction);
+    }
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Handle,
+      {
+        type: "source",
+        position: sourcePosition,
+        className: "likec4-node-handle-center"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Handle,
+      {
+        type: "target",
+        position: targetPosition,
+        className: "likec4-node-handle-center"
+      }
+    )
+  ] });
+}
 
 export { DefaultHandles };

package/dist/base-primitives/compound/CompoundActionButton.js

@@ -6,7 +6,7 @@ import { useDebouncedValue } from '@mantine/hooks';
 import * as m from 'motion/react-m';
 import { stopPropagation } from '../../utils/xyflow.js';
 import { compoundActionBtn } from './actionbtns.css.js';
-import IconZoomScan from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
+import IconZoomScan from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
 
 function CompoundActionButton({
   data: {
@@ -34,6 +34,7 @@ function CompoundActionButton({
       className: "likec4-compound-navigation compound-action",
       whileTap: { scale: 1 },
       onClick: stopPropagation,
+      tabIndex: -1,
       children: /* @__PURE__ */ jsx(
         ActionIcon,
         {
@@ -44,6 +45,7 @@ function CompoundActionButton({
             }),
             actionBtn({ variant: "transparent" })
           ),
+          tabIndex: -1,
           onClick,
           onDoubleClick: stopPropagation,
           children: icon ?? /* @__PURE__ */ jsx(IconZoomScan, { stroke: 2 })

package/dist/base-primitives/compound/CompoundDetailsButton.js

@@ -6,7 +6,7 @@ import { useDebouncedValue } from '@mantine/hooks';
 import * as m from 'motion/react-m';
 import { stopPropagation } from '../../utils/xyflow.js';
 import { compoundActionBtn } from './actionbtns.css.js';
-import IconId from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconId.js';
+import IconId from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconId.js';
 
 function CompoundDetailsButton({
   data: {
@@ -30,6 +30,7 @@ function CompoundDetailsButton({
       },
       whileTap: { scale: 1 },
       className: "likec4-compound-details details-button",
+      tabIndex: -1,
       children: /* @__PURE__ */ jsx(
         ActionIcon,
         {
@@ -40,6 +41,7 @@ function CompoundDetailsButton({
             }),
             actionBtn({ variant: "transparent" })
           ),
+          tabIndex: -1,
           onClick,
           onDoubleClick: stopPropagation,
           children: icon ?? /* @__PURE__ */ jsx(IconId, { stroke: 1.8, style: { width: "75%" } })

package/dist/base-primitives/compound/CompoundNodeContainer.js

@@ -3,6 +3,7 @@ import { cx } from '@likec4/styles/css';
 import { compoundNode } from '@likec4/styles/recipes';
 import * as m from 'motion/react-m';
 import { clamp } from 'remeda';
+import { MAX_COMPOUND_DEPTH } from '../../base/const.js';
 
 function CompoundNodeContainer({
   nodeProps: {
@@ -21,20 +22,20 @@ function CompoundNodeContainer({
     min: 0,
     max: 100
   });
-  const isTransparent = opacity < 99;
-  const MIN_OPACITY = 65;
+  const isTransparent = opacity < 98;
+  const MIN_OPACITY = 50;
   const borderOpacity = MIN_OPACITY + clamp((100 - MIN_OPACITY) * (opacity / 100), {
     min: 0,
     max: 100 - MIN_OPACITY
   });
   const compoundClass = compoundNode({
     isTransparent,
-    inverseColor: opacity < 60,
+    inverseColor: opacity < 70,
     borderStyle: data.style.border ?? (isTransparent ? "dashed" : "none")
   });
   const depth = clamp(data.depth ?? 1, {
     min: 1,
-    max: 5
+    max: MAX_COMPOUND_DEPTH
   });
   return /* @__PURE__ */ jsx(
     m.div,
@@ -50,6 +51,7 @@ function CompoundNodeContainer({
       ...isDimmed !== false && {
         "data-likec4-dimmed": isDimmed
       },
+      tabIndex: -1,
       style: {
         ...style,
         // @ts-expect-error

package/dist/base-primitives/compound/CompoundTitle.js

@@ -1,5 +1,4 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { Text } from '@mantine/core';
 import { IconRenderer } from '../../context/IconRenderer.js';
 
 function CompoundTitle({ data }) {
@@ -9,7 +8,7 @@ function CompoundTitle({ data }) {
   });
   return /* @__PURE__ */ jsxs("div", { className: "likec4-compound-title-container", children: [
     elementIcon,
-    /* @__PURE__ */ jsx(Text, { component: "h3", className: "likec4-compound-title", truncate: "end", children: data.title })
+    /* @__PURE__ */ jsx("div", { className: "likec4-compound-title", children: data.title })
   ] });
 }
 

package/dist/base-primitives/compound/actionbtns.css.d.ts

@@ -1,4 +1,4 @@
-import { RecipeRuntimeFn } from '../../../styled-system';
+import { RecipeRuntimeFn } from '@likec4/styles';
 export declare const compoundActionBtn: RecipeRuntimeFn<{
     delay: {
         true: {

package/dist/base-primitives/edge/EdgeActionButton.js

@@ -3,7 +3,7 @@ import { cx } from '@likec4/styles/css';
 import { edgeActionBtn } from '@likec4/styles/recipes';
 import { ActionIcon } from '@mantine/core';
 import { stopPropagation } from '../../utils/xyflow.js';
-import IconZoomScan from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
+import IconZoomScan from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
 
 function EdgeActionButton({ icon, onClick }) {
   return /* @__PURE__ */ jsx(

package/dist/base-primitives/edge/EdgeContainer.js

@@ -14,10 +14,11 @@ function EdgeContainer({
     dimmed: isDimmed = false,
     ...data
   },
-  animated,
+  animated = false,
   children,
   style
 }) {
+  animated = animated || isActive;
   const props = {
     className: cx(
       className,
@@ -28,8 +29,10 @@ function EdgeContainer({
     "data-likec4-color": color,
     "data-edge-dir": data.dir ?? "forward",
     "data-edge-active": isActive,
-    "data-edge-animated": animated || isActive,
     "data-likec4-hovered": isHovered,
+    ...animated && {
+      "data-likec4-animated": animated
+    },
     ...selected && {
       "data-likec4-selected": selected
     },

package/dist/base-primitives/edge/EdgeLabelContainer.js

@@ -7,7 +7,7 @@ import { ZIndexes } from '../../base/const.js';
 import { useXYStore } from '../../hooks/useXYFlow.js';
 
 const toCssVarValue = (value) => {
-  if (value === void 0) return void 0;
+  if (value === void 0) return "";
   return isNumber(value) ? `${Math.round(value)}px` : value;
 };
 function EdgeLabelContainer({
@@ -42,6 +42,7 @@ function EdgeLabelContainer({
     return null;
   }
   const translate = labelXY?.translate ?? "";
+  animated = animated || isActive;
   return /* @__PURE__ */ jsx(EdgeLabelRenderer, { children: /* @__PURE__ */ jsx(
     "div",
     {
@@ -55,6 +56,9 @@ function EdgeLabelContainer({
       "data-likec4-color": color,
       "data-edge-active": isActive,
       "data-edge-animated": animated || isActive,
+      ...animated && {
+        "data-likec4-animated": animated
+      },
       ...selected !== false && {
         "data-likec4-selected": selected
       },

package/dist/base-primitives/element/ElementActionButtons.js

@@ -1,28 +1,12 @@
 import { jsx } from 'react/jsx-runtime';
 import { cx } from '@likec4/styles/css';
-import { Box } from '@likec4/styles/jsx';
-import { hstack } from '@likec4/styles/patterns';
-import { actionBtn } from '@likec4/styles/recipes';
+import { actionButtons, actionBtn } from '@likec4/styles/recipes';
 import { ActionIcon } from '@mantine/core';
 import { useId } from '@mantine/hooks';
 import * as m from 'motion/react-m';
 import { stopPropagation } from '../../utils/xyflow.js';
-import IconBolt from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconBolt.js';
+import IconBolt from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconBolt.js';
 
-const container = hstack({
-  position: "absolute",
-  zIndex: 1,
-  justifyContent: "center",
-  alignItems: "center",
-  _smallZoom: {
-    display: "none"
-  }
-});
-const actionButtons = hstack({
-  gap: "1.5",
-  justifyContent: "center",
-  alignItems: "center"
-});
 function ElementActionButtons({
   selected = false,
   data: {
@@ -34,53 +18,42 @@ function ElementActionButtons({
   if (!buttons.length) {
     return null;
   }
-  return /* @__PURE__ */ jsx(
-    Box,
+  return /* @__PURE__ */ jsx("div", { className: actionButtons(), children: /* @__PURE__ */ jsx(
+    m.div,
     {
-      className: container,
+      layoutRoot: true,
+      initial: false,
       style: {
-        top: `calc(100% - 30px)`,
-        transform: "translateX(-50%)",
-        left: `50%`,
-        width: "auto",
-        minHeight: 30
+        originY: 0
+      },
+      animate: {
+        opacity: isHovered || selected ? 1 : 0.75,
+        scale: isHovered ? 1.1 : selected ? 0.9 : 0.8,
+        y: isHovered || selected ? 6 : 0
       },
-      children: /* @__PURE__ */ jsx(
-        m.div,
+      layoutDependency: `${isHovered}-${selected}`,
+      "data-likec4-hovered": isHovered,
+      className: cx("nodrag nopan"),
+      onClick: stopPropagation,
+      children: buttons.map((button, index) => /* @__PURE__ */ jsx(
+        ActionIcon,
         {
-          layoutRoot: true,
+          component: m.button,
+          className: actionBtn({}),
           initial: false,
-          style: {
-            originY: 0
-          },
-          animate: {
-            opacity: isHovered || selected ? 1 : 0.75,
-            scale: isHovered ? 1.1 : selected ? 0.9 : 0.8,
-            y: isHovered || selected ? 6 : 0
+          whileTap: { scale: 1 },
+          whileHover: {
+            scale: 1.3
           },
-          layoutDependency: `${isHovered}-${selected}`,
-          "data-likec4-hovered": isHovered,
-          className: cx("nodrag nopan", actionButtons),
-          children: buttons.map((button, index) => /* @__PURE__ */ jsx(
-            ActionIcon,
-            {
-              component: m.button,
-              className: actionBtn({}),
-              initial: false,
-              whileTap: { scale: 1 },
-              whileHover: {
-                scale: 1.3
-              },
-              onClick: button.onClick,
-              onDoubleClick: stopPropagation,
-              children: button.icon || /* @__PURE__ */ jsx(IconBolt, {})
-            },
-            `${id}-${button.key ?? index}`
-          ))
-        }
-      )
+          tabIndex: -1,
+          onClick: button.onClick,
+          onDoubleClick: stopPropagation,
+          children: button.icon || /* @__PURE__ */ jsx(IconBolt, {})
+        },
+        `${id}-${button.key ?? index}`
+      ))
     }
-  );
+  ) });
 }
 
 export { ElementActionButtons };

package/dist/base-primitives/element/ElementData.d.ts

@@ -10,9 +10,8 @@ type RequiredData = {
     description?: MarkdownOrString | null | undefined;
     icon?: string | null;
 };
-type ElementDataProps = {
+export type ElementDataProps = {
     data: RequiredData;
-    iconSize?: number;
 };
 type IconProps = {
     data: {
@@ -27,6 +26,7 @@ type SlotProps = {
     data: RequiredData;
     className?: string;
     style?: CSSProperties;
+    [key: `data-${string}`]: string;
 };
 /**
  * Renders an element title, technology, description, and icon.
@@ -37,19 +37,19 @@ type SlotProps = {
  * ```
  * or
  * ```tsx
- * <ElementData.Root>
+ * <ElementData.Root {...nodeProps} >
  *   <ElementData.Icon {...nodeProps} />
- *   <ElementData.Root>
+ *   <ElementData.Content>
  *     <ElementData.Title {...nodeProps} />
  *     <ElementData.Technology {...nodeProps} />
  *     <ElementData.Description {...nodeProps} />
- *   </ElementData.Root>
+ *   </ElementData.Content>
  * </ElementData.Root>
  * ```
  */
-export declare function ElementData({ iconSize, data }: ElementDataProps): import("react/jsx-runtime").JSX.Element;
+export declare function ElementData({ data }: ElementDataProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace ElementData {
-    var Root: import("react").ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    var Root: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & ElementDataProps & import("react").RefAttributes<HTMLDivElement>>;
     var Icon: ({ data, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
     var Content: import("react").ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
     var Title: import("react").ForwardRefExoticComponent<SlotProps & import("react").RefAttributes<HTMLDivElement>>;