@likec4/diagram 1.30.0 → 1.32.0

package/dist/base/primitives/edge/EdgeLabel.d.ts

@@ -1,11 +1,11 @@
-import { DiagramEdge } from '@likec4/core';
+import { DiagramEdge } from '@likec4/core/types';
 import { BoxProps } from '@likec4/styles/jsx';
-import { PropsWithChildren } from 'react';
+import { PropsWithChildren, ForwardRefExoticComponent, RefAttributes } from 'react';
 import { UndefinedOnPartialDeep } from 'type-fest';
 import { EdgeProps } from '../../types';
 type Data = UndefinedOnPartialDeep<Pick<DiagramEdge, 'label' | 'technology'>>;
 type EdgeLabelProps = PropsWithChildren<BoxProps & {
     edgeProps: EdgeProps<Data>;
 }>;
-export declare function EdgeLabel({ edgeProps: { id, data: { label, technology, }, }, className, style, children, ...rest }: EdgeLabelProps): import("react/jsx-runtime").JSX.Element;
+export declare const EdgeLabel: ForwardRefExoticComponent<Omit<EdgeLabelProps, "ref"> & RefAttributes<HTMLDivElement>>;
 export {};

package/dist/base/primitives/edge/EdgeLabel.js

@@ -3,11 +3,11 @@ import { isStepEdgeId, extractStep } from '@likec4/core';
 import { cx } from '@likec4/styles/css';
 import { Box } from '@likec4/styles/jsx';
 import { Text } from '@mantine/core';
-import '../../../_virtual/index.js';
+import { forwardRef } from 'react';
 import { isTruthy } from 'remeda';
 import { labelsva } from './EdgeLabel.css.js';
 
-function EdgeLabel({
+const EdgeLabel = forwardRef(({
   edgeProps: {
     id,
     data: {
@@ -19,12 +19,12 @@ function EdgeLabel({
   style,
   children,
   ...rest
-}) {
+}, ref) => {
   const stepNum = isStepEdgeId(id) ? extractStep(id) : null;
   const classes = labelsva({
     isStepEdge: stepNum !== null
   });
-  return /* @__PURE__ */ jsxs(Box, { className: cx(classes.root, className), ...rest, children: [
+  return /* @__PURE__ */ jsxs(Box, { ref, className: cx(classes.root, className), ...rest, children: [
     stepNum !== null && /* @__PURE__ */ jsx(Box, { className: classes.stepNumber, children: stepNum }),
     /* @__PURE__ */ jsxs(Box, { className: classes.labelContents, children: [
       isTruthy(label) && /* @__PURE__ */ jsx(Text, { component: "div", className: classes.labelText, lineClamp: 5, children: label }),
@@ -32,6 +32,7 @@ function EdgeLabel({
       children
     ] })
   ] });
-}
+});
+EdgeLabel.displayName = "EdgeLabel";
 
 export { EdgeLabel };

package/dist/base/primitives/edge/EdgeLabelContainer.d.ts

@@ -1,4 +1,4 @@
-import { DiagramEdge } from '@likec4/core';
+import { DiagramEdge } from '@likec4/core/types';
 import { HTMLAttributes } from 'react';
 import { UndefinedOnPartialDeep } from 'type-fest';
 import { EdgeProps } from '../../types';

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

@@ -1,8 +1,6 @@
 import { jsx } from 'react/jsx-runtime';
-import '@likec4/core';
 import { cx, css } from '@likec4/styles/css';
 import { EdgeLabelRenderer } from '@xyflow/react';
-import '../../../_virtual/index.js';
 import { isNumber } from 'remeda';
 import { ZIndexes } from '../../const.js';
 import { edgeVars } from './edge.css.js';

package/dist/base/primitives/edge/EdgeMarkers.d.ts

@@ -1,4 +1,4 @@
-import { RelationshipArrowType } from '@likec4/core';
+import { RelationshipArrowType } from '@likec4/core/types';
 import { SVGProps } from 'react';
 export declare const EdgeMarkers: {
     Arrow: (props: SVGProps<SVGMarkerElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/base/primitives/edge/EdgePath.d.ts

@@ -1,4 +1,4 @@
-import { DiagramEdge } from '@likec4/core';
+import { DiagramEdge } from '@likec4/core/types';
 import { PointerEventHandler, ForwardRefExoticComponent, RefAttributes } from 'react';
 import { UndefinedOnPartialDeep } from 'type-fest';
 import { EdgeProps } from '../../types';

package/dist/base/primitives/edge/EdgePath.js

@@ -1,10 +1,10 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { cx, css } from '@likec4/styles/css';
-import { r as reactExports } from '../../../_virtual/index.js';
+import { forwardRef } from 'react';
 import { hideOnReducedGraphics, markerContext, edgePathBg, cssEdgePath } from './edge.css.js';
 import { arrowTypeToMarker, EdgeMarkers } from './EdgeMarkers.js';
 
-const EdgePath = reactExports.forwardRef(({
+const EdgePath = forwardRef(({
   edgeProps: {
     id,
     data: {

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

@@ -1,7 +1,8 @@
 import { jsx } from 'react/jsx-runtime';
 import { css, cx } from '@likec4/styles/css';
+import { Box } from '@likec4/styles/jsx';
 import { actionBtn } from '@likec4/styles/recipes';
-import { Box, ActionIcon } from '@mantine/core';
+import { ActionIcon } from '@mantine/core';
 import { useId } from '@mantine/hooks';
 import * as m from 'motion/react-m';
 import { useIsZoomTooSmall } from '../../../hooks/useXYFlow.js';
@@ -9,11 +10,12 @@ import { stopPropagation } from '../../../utils/xyflow.js';
 
 const container = css({
   position: "absolute",
-  top: `calc(100% - 28px)`,
-  // transform: 'translateY(-100%)',
-  left: 0,
-  width: "100%",
-  minHeight: "28px",
+  zIndex: 1,
+  top: `calc(100% - 30px)`,
+  transform: "translateX(-50%)",
+  left: `50%`,
+  width: "auto",
+  minHeight: "30px",
   display: "flex",
   justifyContent: "center",
   alignItems: "center",
@@ -40,14 +42,13 @@ function ElementActionButtons({
     return null;
   }
   return /* @__PURE__ */ jsx(Box, { className: container, children: /* @__PURE__ */ jsx(
-    Box,
+    m.div,
     {
-      component: m.div,
       layoutRoot: true,
       initial: false,
       style: {
         originY: 0,
-        gap: "8px"
+        gap: 6
       },
       animate: {
         opacity: isHovered || selected ? 1 : 0.75,

package/dist/base/primitives/element/ElementDetailsButton.js

@@ -1,7 +1,8 @@
 import { jsx } from 'react/jsx-runtime';
 import { cx, css } from '@likec4/styles/css';
+import { Box } from '@likec4/styles/jsx';
 import { actionBtn } from '@likec4/styles/recipes';
-import { Box, ActionIcon } from '@mantine/core';
+import { ActionIcon } from '@mantine/core';
 import { useId } from '@mantine/hooks';
 import { IconId } from '@tabler/icons-react';
 import * as m from 'motion/react-m';

package/dist/base/primitives/element/ElementNodeContainer.d.ts

@@ -1,31 +1,33 @@
-import { DiagramNode, ElementStyle, ShapeSize, SpacingSize, TextSize } from '@likec4/core';
-import { BoxProps, PolymorphicComponentProps } from '@mantine/core';
-import { PropsWithChildren, FunctionComponent, ReactNode } from 'react';
+import { Color, ElementShape, ElementStyle } from '@likec4/core/types';
+import { LayoutProps } from 'motion/react';
+import { CSSProperties, ReactNode, ForwardRefExoticComponent, RefAttributes } from 'react';
 import { NodeProps } from '../../types';
-type RequiredData = Pick<DiagramNode, 'color' | 'shape' | 'style'>;
-type ElementNodeContainerProps = BoxProps & PropsWithChildren<{
+import { ShapeSize, SpacingSize, TextSize } from '@likec4/core';
+export type RequiredData = {
+    color: Color;
+    shape: ElementShape;
+    style?: ElementStyle;
+};
+export type ElementNodeContainerProps = {
     nodeProps: NodeProps<RequiredData>;
-}>;
+    children?: ReactNode | undefined;
+    className?: string | undefined;
+    style?: CSSProperties | undefined;
+    [key: `data-${string}`]: string | undefined;
+} & LayoutProps;
 export declare function nodeSizes({ size, padding, textSize, }: ElementStyle): {
     size: ShapeSize;
     padding: SpacingSize;
     textSize: TextSize;
 };
-export declare const ElementNodeContainer: (<C = "div">(props: PolymorphicComponentProps<C, ElementNodeContainerProps>) => React.ReactElement) & Omit< FunctionComponent<(BoxProps & {
-    nodeProps: NodeProps<RequiredData>;
-} & {
-    children?: ReactNode | undefined;
-} & {
-    component?: any;
-} & Omit<Omit<any, "ref">, "children" | keyof BoxProps | "nodeProps" | "component"> & {
-    ref?: any;
-    renderRoot?: (props: any) => any;
-}) | (BoxProps & {
+/**
+ * Top-level primitive to compose leaf nodes renderers.
+ * This container provides the state via data-* attributes
+ */
+export declare const ElementNodeContainer: ForwardRefExoticComponent<{
+    [key: `data-${string}`]: string | undefined;
     nodeProps: NodeProps<RequiredData>;
-} & {
     children?: ReactNode | undefined;
-} & {
-    component: React.ElementType;
-    renderRoot?: (props: Record<string, any>) => any;
-})>, never> & Record<string, never>;
-export {};
+    className?: string | undefined;
+    style?: CSSProperties | undefined;
+} & LayoutProps & RefAttributes<HTMLDivElement>>;

package/dist/base/primitives/element/ElementNodeContainer.js

@@ -1,9 +1,8 @@
 import { jsx } from 'react/jsx-runtime';
-import { DefaultShapeSize, DefaultTextSize, DefaultPaddingSize } from '@likec4/core';
+import { DefaultShapeSize, DefaultTextSize, DefaultPaddingSize } from '@likec4/core/types';
 import { cx, css } from '@likec4/styles/css';
-import { createPolymorphicComponent, Box } from '@mantine/core';
 import * as m from 'motion/react-m';
-import { r as reactExports } from '../../../_virtual/index.js';
+import { forwardRef } from 'react';
 import { container } from './ElementNodeContainer.css.js';
 
 function nodeSizes({
@@ -29,73 +28,72 @@ function nodeSizes({
     textSize
   };
 }
-const ElementNodeContainer = createPolymorphicComponent(
-  reactExports.forwardRef(({
-    nodeProps: {
-      selected = false,
-      selectable = false,
-      data: {
-        hovered: isHovered = false,
-        dimmed: isDimmed = false,
-        ...data
-      }
-    },
-    style,
-    children,
-    ...rest
-  }, ref) => {
-    let scale = 1;
-    switch (true) {
-      case isHovered:
-        scale = 1.05;
-        break;
-      case selected:
-        scale = 1.02;
-        break;
+const ElementNodeContainer = forwardRef(({
+  nodeProps: {
+    selected = false,
+    selectable = false,
+    data: {
+      hovered: isHovered = false,
+      dimmed: isDimmed = false,
+      ...data
     }
-    const {
-      size,
-      padding,
-      textSize
-    } = nodeSizes(data.style);
-    return /* @__PURE__ */ jsx(
-      Box,
-      {
-        component: m.div,
-        ref,
-        className: cx(
-          css({
-            likec4Palette: data.color
-          }),
-          container,
-          "group",
-          "likec4-element-node"
-        ),
-        initial: false,
-        ...selectable && {
-          animate: {
-            scale
-          },
-          whileTap: { scale: 0.98 }
-        },
-        "data-likec4-hovered": isHovered,
-        "data-likec4-color": data.color,
-        "data-likec4-shape": data.shape,
-        "data-likec4-shape-size": size,
-        "data-likec4-spacing": padding,
-        "data-likec4-text-size": textSize,
-        ...isDimmed !== false && {
-          "data-likec4-dimmed": isDimmed
-        },
-        style: {
-          ...style
+  },
+  className,
+  style,
+  children,
+  ...rest
+}, ref) => {
+  let scale = 1;
+  switch (true) {
+    case isHovered:
+      scale = 1.05;
+      break;
+    case selected:
+      scale = 1.02;
+      break;
+  }
+  const {
+    size,
+    padding,
+    textSize
+  } = nodeSizes(data.style ?? {});
+  return /* @__PURE__ */ jsx(
+    m.div,
+    {
+      ref,
+      className: cx(
+        css({
+          likec4Palette: data.color
+        }),
+        container,
+        "group",
+        "likec4-element-node",
+        className
+      ),
+      initial: false,
+      ...selectable && {
+        animate: {
+          scale
         },
-        ...rest,
-        children
-      }
-    );
-  })
-);
+        whileTap: { scale: 0.98 }
+      },
+      "data-likec4-hovered": isHovered,
+      "data-likec4-color": data.color,
+      "data-likec4-shape": data.shape,
+      "data-likec4-shape-size": size,
+      "data-likec4-spacing": padding,
+      "data-likec4-text-size": textSize,
+      ...isDimmed !== false && {
+        "data-likec4-dimmed": isDimmed
+      },
+      style: {
+        ...style
+      },
+      ...rest,
+      children
+    }
+  );
+});
 ElementNodeContainer.displayName = "ElementNodeContainer";
 
 export { ElementNodeContainer, nodeSizes };

package/dist/base/primitives/element/ElementShape.d.ts

@@ -1,4 +1,4 @@
-import { DiagramNode, ElementShape } from '@likec4/core';
+import { ElementShape, ElementStyle } from '@likec4/core/types';
 export declare function cylinderSVGPath(diameter: number, height: number, tilt?: number): {
     path: string;
     ry: number;
@@ -9,18 +9,22 @@ type ElementShapeProps = {
     w: number;
     h: number;
 };
-type Data = Pick<DiagramNode, 'shape' | 'width' | 'height'>;
+type Data = {
+    shape: ElementShape;
+    width: number;
+    height: number;
+    style?: ElementStyle;
+};
 type ElementShapePrimitiveProps = {
     data: Data;
     width?: number;
     height?: number;
-    isMultiple?: boolean | undefined;
     /**
      * @default true
      */
     withSelectedIndicator?: boolean | undefined;
 };
-export declare function ElementShape({ data, width, height, isMultiple, withSelectedIndicator }: ElementShapePrimitiveProps): import("react/jsx-runtime").JSX.Element;
+export declare function ElementShape({ data, width, height, withSelectedIndicator }: ElementShapePrimitiveProps): import("react/jsx-runtime").JSX.Element;
 /**
  * When element is selected, this component is used to render the indicator
  */

package/dist/base/primitives/element/ElementShape.js

@@ -1,6 +1,6 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { nonexhaustive } from '@likec4/core';
-import clsx from 'clsx';
+import { cx } from '@likec4/styles/css';
 import { toDomPrecision } from '../../../utils/xyflow.js';
 import { shapeSvgMultiple, shapeSvg, fillMixStroke, fillElementFill, indicator } from './ElementShape.css.js';
 
@@ -148,11 +148,12 @@ function ElementShapeSvg({ shape, w, h }) {
     }
   }
 }
-function ElementShape({ data, width, height, isMultiple = false, withSelectedIndicator = true }) {
+function ElementShape({ data, width, height, withSelectedIndicator = true }) {
   let w = !!width && width > 10 ? width : data.width;
   let h = !!height && height > 10 ? height : data.height;
+  const isMultiple = data.style?.multiple ?? false;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    isMultiple && /* @__PURE__ */ jsx("svg", { className: clsx(shapeSvgMultiple), viewBox: `0 0 ${w} ${h}`, children: /* @__PURE__ */ jsx(ElementShapeSvg, { shape: data.shape, w, h }) }),
+    isMultiple && /* @__PURE__ */ jsx("svg", { className: cx(shapeSvgMultiple), viewBox: `0 0 ${w} ${h}`, children: /* @__PURE__ */ jsx(ElementShapeSvg, { shape: data.shape, w, h }) }),
     /* @__PURE__ */ jsxs("svg", { className: shapeSvg, viewBox: `0 0 ${w} ${h}`, children: [
       withSelectedIndicator && /* @__PURE__ */ jsx(SelectedIndicator, { shape: data.shape, w, h }),
       /* @__PURE__ */ jsx(ElementShapeSvg, { shape: data.shape, w, h })

package/dist/base/primitives/element/ElementTags.d.ts

@@ -0,0 +1,14 @@
+import { BoxProps } from '@likec4/styles/jsx';
+import { NodeProps } from '../../types';
+import { ForwardRefExoticComponent, RefAttributes, MemoExoticComponent } from 'react';
+export type ElementTagProps = {
+    tag: string;
+} & Omit<BoxProps, 'children'>;
+export declare const ElementTag: ForwardRefExoticComponent<Omit<ElementTagProps, "ref"> & RefAttributes<HTMLDivElement>>;
+type Data = {
+    tags: readonly string[] | null | undefined;
+    width: number;
+};
+type ElementTagsProps = NodeProps<Data>;
+export declare const ElementTags: MemoExoticComponent<({ id, data: { tags, width } }: ElementTagsProps) => import("react/jsx-runtime").JSX.Element | null>;
+export {};

package/dist/base/primitives/element/ElementTags.js

@@ -0,0 +1,176 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { isTagColorSpecified } from '@likec4/core';
+import { cx, css } from '@likec4/styles/css';
+import { Box, HStack } from '@likec4/styles/jsx';
+import { hstack } from '@likec4/styles/patterns';
+import { likec4tag } from '@likec4/styles/recipes';
+import { HoverCard } from '@mantine/core';
+import { deepEqual } from 'fast-equals';
+import { memo, useCallback, forwardRef } from 'react';
+import { useTagSpecification } from '../../../context/TagStylesContext.js';
+import { useDiagram } from '../../../hooks/useDiagram.js';
+import { useMantinePortalProps } from '../../../hooks/useMantinePortalProps.js';
+import { useCurrentZoom } from '../../../hooks/useXYFlow.js';
+import { stopPropagation } from '../../../utils/xyflow.js';
+
+const ElementTag = forwardRef(
+  ({ tag, className, ...props }, ref) => {
+    const spec = useTagSpecification(tag);
+    return /* @__PURE__ */ jsxs(
+      Box,
+      {
+        ref,
+        "data-likec4-tag": tag,
+        className: cx(
+          likec4tag({
+            autoTextColor: isTagColorSpecified(spec)
+          }),
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx("span", { style: { opacity: 0.7, fontSize: "1.05em" }, children: "#" }),
+          /* @__PURE__ */ jsx("span", { children: tag })
+        ]
+      }
+    );
+  }
+);
+const propsAreEqual = (prev, next) => {
+  return prev.data.width === next.data.width && deepEqual(prev.data.tags, next.data.tags);
+};
+const ElementTags = memo(({ id, data: { tags, width } }) => {
+  const zoom = useCurrentZoom();
+  const zoomIsLargeEnough = zoom > 1.2;
+  const portalProps = useMantinePortalProps();
+  if (!tags || tags.length === 0) {
+    return null;
+  }
+  const maxWidth = Math.max(Math.round(width * zoom) - 10, 200);
+  return /* @__PURE__ */ jsxs(
+    HoverCard,
+    {
+      ...portalProps,
+      floatingStrategy: "fixed",
+      position: "bottom-start",
+      offset: {
+        alignmentAxis: Math.round(4 * zoom),
+        mainAxis: 8
+      },
+      keepMounted: false,
+      openDelay: 300,
+      closeDelay: 500,
+      children: [
+        /* @__PURE__ */ jsx(HoverCard.Target, { children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cx(
+              "likec4-element-tags",
+              hstack({
+                pointerEvents: "all",
+                gap: 4,
+                alignItems: "flex-end",
+                justifyItems: "stretch",
+                position: "absolute",
+                width: "100%",
+                bottom: 0,
+                left: 0,
+                padding: 4,
+                _shapeCylinder: {
+                  bottom: 5
+                },
+                _shapeStorage: {
+                  bottom: 5
+                },
+                _shapeQueue: {
+                  bottom: 0,
+                  paddingLeft: 14
+                }
+              })
+            ),
+            onClick: stopPropagation,
+            children: tags.map((tag) => /* @__PURE__ */ jsx(
+              Box,
+              {
+                "data-likec4-tag": tag,
+                className: css({
+                  layerStyle: "likec4.tag",
+                  flex: 1,
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  maxWidth: 50,
+                  height: 5,
+                  _whenHovered: {
+                    height: 12,
+                    borderRadius: 4,
+                    transitionDelay: ".08s"
+                  },
+                  transition: "fast"
+                })
+              },
+              id + "#" + tag
+            ))
+          }
+        ) }),
+        /* @__PURE__ */ jsx(
+          HoverCard.Dropdown,
+          {
+            p: 0,
+            w: "auto",
+            maw: maxWidth,
+            className: css({
+              background: "transparent",
+              border: "none"
+            }),
+            children: /* @__PURE__ */ jsx(ElementTagsDropdown, { tags, zoomIsLargeEnough })
+          }
+        )
+      ]
+    }
+  );
+}, propsAreEqual);
+ElementTags.displayName = "ElementTags";
+function ElementTagsDropdown({ tags, zoomIsLargeEnough }) {
+  const diagram = useDiagram();
+  const onHover = (tag) => {
+    diagram.send({ type: "tag.highlight", tag });
+  };
+  const onLeave = useCallback(() => {
+    diagram.send({ type: "tag.unhighlight" });
+  }, []);
+  return /* @__PURE__ */ jsx(
+    HStack,
+    {
+      css: {
+        gap: 4,
+        flexWrap: "wrap",
+        pb: "sm"
+      },
+      children: tags.map((tag) => /* @__PURE__ */ jsx(
+        ElementTag,
+        {
+          tag,
+          className: css({
+            userSelect: "none",
+            cursor: "pointer",
+            ...zoomIsLargeEnough && {
+              fontSize: "lg",
+              borderRadius: 4,
+              px: 6
+            }
+          }),
+          onClick: (e) => {
+            e.stopPropagation();
+            diagram.openSearch(`#${tag}`);
+          },
+          onMouseEnter: () => onHover(tag),
+          onMouseLeave: onLeave
+        },
+        tag
+      ))
+    }
+  );
+}
+
+export { ElementTag, ElementTags };

package/dist/base/primitives/element/ElementTitle.css.d.ts

@@ -1,7 +1,7 @@
 import { SlotRecipeRuntimeFn } from '@likec4/styles/types';
 export declare const iconSize = "--icon-size";
 export declare const elementIcon: string;
-export declare const elementTitle: SlotRecipeRuntimeFn<"title" | "technology" | "description" | "root" | "textContainer", {
+export declare const elementTitle: SlotRecipeRuntimeFn<"root" | "title" | "technology" | "description" | "textContainer", {
     hasIcon: {
         false: {};
         true: {

package/dist/base/primitives/element/ElementTitle.d.ts

@@ -1,8 +1,9 @@
-import { DiagramNode } from '@likec4/core';
-import { NodeProps } from '../../types';
-type Data = Pick<DiagramNode, 'title' | 'technology' | 'description' | 'color' | 'style'> & {
+import { DiagramNode } from '@likec4/core/types';
+import { Simplify } from 'type-fest';
+import { NodeProps, NonOptional } from '../../types';
+type Data = Simplify<NonOptional<Pick<DiagramNode, 'title' | 'technology' | 'description' | 'color' | 'style'>> & {
     icon?: string | null;
-};
+}>;
 type ElementTitleProps = NodeProps<Data> & {
     iconSize?: number;
 };

package/dist/base/primitives/element/ElementTitle.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import '@likec4/core';
 import { cx } from '@likec4/styles/css';
-import { Box, Text } from '@mantine/core';
+import { Box } from '@likec4/styles/jsx';
+import { Text } from '@mantine/core';
 import { isTruthy, isEmpty, isNumber } from 'remeda';
 import { IconRenderer } from '../../../context/IconRenderer.js';
 import { nodeSizes } from './ElementNodeContainer.js';
@@ -31,11 +31,10 @@ function ElementTitle({ id, data, iconSize: iconSize$1 }) {
         classes.root,
         "likec4-element"
       ),
-      style: {
-        ...isNumber(iconSize$1) && {
-          [iconSize]: `${iconSize$1}px`
-        }
-      },
+      style: isNumber(iconSize$1) ? {
+        // @ts-ignore
+        [iconSize]: `${iconSize$1}px`
+      } : void 0,
       children: [
         elementIcon$1,
         /* @__PURE__ */ jsxs(Box, { className: cx(classes.textContainer, "likec4-element-main-props"), children: [