@likec4/diagram 1.35.0 → 1.36.1

package/dist/navigationpanel/editorpanel/ManualLayoutToolsButton.js

@@ -1,8 +1,9 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { css } from '@likec4/styles/css';
 import { hstack } from '@likec4/styles/patterns';
-import { Popover, PopoverTarget, PopoverDropdown, TooltipGroup, ActionIcon } from '@mantine/core';
+import { Popover, PopoverTarget, PopoverDropdown, TooltipGroup } from '@mantine/core';
 import { useDiagram } from '../../hooks/useDiagram.js';
+import { useMantinePortalProps } from '../../hooks/useMantinePortalProps.js';
 import { PanelActionIcon } from '../_common.js';
 import { Tooltip } from './_common.js';
 import IconLayoutCollage from '../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutCollage.js';
@@ -20,7 +21,7 @@ const Action = ({
   icon,
   onClick
 }) => /* @__PURE__ */ jsx(Tooltip, { label, withinPortal: false, position: "top", children: /* @__PURE__ */ jsx(
-  ActionIcon,
+  PanelActionIcon,
   {
     classNames: {
       root: "action-icon",
@@ -31,27 +32,24 @@ const Action = ({
         }
       })
     },
-    variant: "subtle",
-    color: "gray",
     onClick,
     children: icon
   }
 ) });
 const ManualLayoutToolsButton = (props) => {
   const diagram = useDiagram();
+  const portalProps = useMantinePortalProps();
   return /* @__PURE__ */ jsxs(
     Popover,
     {
-      position: "right-start",
+      position: "right",
       offset: {
-        mainAxis: 10,
-        crossAxis: -2
+        mainAxis: 12
       },
       clickOutsideEvents: [
         "pointerdown"
       ],
-      radius: "sm",
-      shadow: "lg",
+      ...portalProps,
       ...props,
       children: [
         /* @__PURE__ */ jsx(PopoverTarget, { children: /* @__PURE__ */ jsx(Tooltip, { label: "Manual layouting tools", children: /* @__PURE__ */ jsx(PanelActionIcon, { children: /* @__PURE__ */ jsx(IconLayoutCollage, {}) }) }) }),
@@ -59,16 +57,17 @@ const ManualLayoutToolsButton = (props) => {
           PopoverDropdown,
           {
             className: hstack({
-              gap: 1,
+              gap: "0.5",
               layerStyle: "likec4.panel",
-              p: "2"
+              padding: "1",
+              pointerEvents: "all"
             }),
             children: /* @__PURE__ */ jsxs(TooltipGroup, { children: [
               /* @__PURE__ */ jsx(
                 Action,
                 {
                   label: "Align in columns",
-                  icon: /* @__PURE__ */ jsx(IconLayoutBoardSplit, { stroke: 1.2 }),
+                  icon: /* @__PURE__ */ jsx(IconLayoutBoardSplit, {}),
                   onClick: (e) => {
                     e.stopPropagation();
                     diagram.align("Column");
@@ -79,7 +78,7 @@ const ManualLayoutToolsButton = (props) => {
                 Action,
                 {
                   label: "Align left",
-                  icon: /* @__PURE__ */ jsx(IconLayoutAlignLeft, { stroke: 1.5 }),
+                  icon: /* @__PURE__ */ jsx(IconLayoutAlignLeft, {}),
                   onClick: (e) => {
                     e.stopPropagation();
                     diagram.align("Left");
@@ -90,7 +89,7 @@ const ManualLayoutToolsButton = (props) => {
                 Action,
                 {
                   label: "Align center",
-                  icon: /* @__PURE__ */ jsx(IconLayoutAlignCenter, { stroke: 1.5 }),
+                  icon: /* @__PURE__ */ jsx(IconLayoutAlignCenter, {}),
                   onClick: (e) => {
                     e.stopPropagation();
                     diagram.align("Center");
@@ -101,7 +100,7 @@ const ManualLayoutToolsButton = (props) => {
                 Action,
                 {
                   label: "Align right",
-                  icon: /* @__PURE__ */ jsx(IconLayoutAlignRight, { stroke: 1.5 }),
+                  icon: /* @__PURE__ */ jsx(IconLayoutAlignRight, {}),
                   onClick: (e) => {
                     e.stopPropagation();
                     diagram.align("Right");
@@ -112,7 +111,7 @@ const ManualLayoutToolsButton = (props) => {
                 Action,
                 {
                   label: "Align in rows",
-                  icon: /* @__PURE__ */ jsx(IconLayoutBoardSplit, { stroke: 1.5, style: { transform: "rotate(90deg)" } }),
+                  icon: /* @__PURE__ */ jsx(IconLayoutBoardSplit, { style: { transform: "rotate(90deg)" } }),
                   onClick: (e) => {
                     e.stopPropagation();
                     diagram.align("Row");
@@ -123,7 +122,7 @@ const ManualLayoutToolsButton = (props) => {
                 Action,
                 {
                   label: "Align top",
-                  icon: /* @__PURE__ */ jsx(IconLayoutAlignTop, { stroke: 1.5 }),
+                  icon: /* @__PURE__ */ jsx(IconLayoutAlignTop, {}),
                   onClick: (e) => {
                     e.stopPropagation();
                     diagram.align("Top");
@@ -134,7 +133,7 @@ const ManualLayoutToolsButton = (props) => {
                 Action,
                 {
                   label: "Align middle",
-                  icon: /* @__PURE__ */ jsx(IconLayoutAlignMiddle, { stroke: 1.5 }),
+                  icon: /* @__PURE__ */ jsx(IconLayoutAlignMiddle, {}),
                   onClick: (e) => {
                     e.stopPropagation();
                     diagram.align("Middle");
@@ -145,7 +144,7 @@ const ManualLayoutToolsButton = (props) => {
                 Action,
                 {
                   label: "Align bottom",
-                  icon: /* @__PURE__ */ jsx(IconLayoutAlignBottom, { stroke: 1.5 }),
+                  icon: /* @__PURE__ */ jsx(IconLayoutAlignBottom, {}),
                   onClick: (e) => {
                     e.stopPropagation();
                     diagram.align("Bottom");
@@ -156,7 +155,7 @@ const ManualLayoutToolsButton = (props) => {
                 Action,
                 {
                   label: "Reset all control points",
-                  icon: /* @__PURE__ */ jsx(IconRouteOff, { stroke: 1.5 }),
+                  icon: /* @__PURE__ */ jsx(IconRouteOff, {}),
                   onClick: (e) => {
                     e.stopPropagation();
                     diagram.resetEdgeControlPoints();

package/dist/navigationpanel/editorpanel/styles.js

@@ -1,15 +1,15 @@
 import { css } from '@likec4/styles/css';
 
 css({
-  gap: "micro",
+  gap: "xxs",
   _empty: {
     display: "none"
   }
 });
 css({
-  top: "1rem",
-  left: "1rem",
-  margin: 0,
+  top: "md",
+  left: "md",
+  margin: "0",
   pointerEvents: "none",
   "& :where(button, .action-icon, [role='dialog'])": {
     pointerEvents: "all"
@@ -43,7 +43,7 @@ const autolayoutButton = css({
   flex: "1 1 40%",
   textAlign: "center",
   fontWeight: 500,
-  padding: "4px 6px",
+  padding: "[4px 6px]",
   fontSize: "11px",
   zIndex: 1
 });

package/dist/navigationpanel/hooks.d.ts

@@ -5,7 +5,7 @@ export declare const NavigationPanelActorContextProvider: Provider<NavigationPan
 export declare const useNavigationActorRef: () => NavigationPanelActorRef;
 export declare function useNavigationActorSnapshot<T = unknown>(selector: (context: NavigationPanelActorSnapshot) => T, compare?: (a: NoInfer<T>, b: NoInfer<T>) => boolean, deps?: DependencyList): T;
 export declare function useNavigationActorContext<T = unknown>(selector: (context: NavigationPanelActorContext) => T, compare?: (a: NoInfer<T>, b: NoInfer<T>) => boolean, deps?: DependencyList): T;
-export type NavigationActor = {
+export interface NavigationActor {
     readonly actorRef: NavigationPanelActorRef;
     send: (event: NavigationPanelActorEvent) => void;
     selectFolder: (folderPath: string) => void;
@@ -16,5 +16,5 @@ export type NavigationActor = {
     isOpened: () => boolean;
     clearSearch: () => void;
     closeDropdown: () => void;
-};
+}
 export declare function useNavigationActor(): NavigationActor;

package/dist/navigationpanel/styles.css.js

@@ -5,8 +5,6 @@ const breadcrumbTitle = cva({
     fontSize: "sm",
     fontWeight: "500",
     transition: "fast",
-    // width: 'max-content',
-    alignSelf: "stretch",
     color: {
       base: "mantine.colors.text/90",
       _hover: "mantine.colors.text"

package/dist/navigationpanel/walkthrough/ActiveWalkthroughControls.js

@@ -21,7 +21,10 @@ const TriggerWalkthroughButton = Button.withProps({
   layoutId: "trigger-dynamic-walkthrough",
   variant: "filled",
   size: "xs",
-  fw: "500"
+  fw: "500",
+  className: css({
+    flexShrink: 0
+  })
 });
 const StartWalkthroughButton = () => {
   const diagram = useDiagram();
@@ -53,10 +56,10 @@ const ParallelFrame = () => {
     {
       css: {
         position: "absolute",
-        margin: 0,
-        padding: 0,
-        top: 0,
-        left: 0,
+        margin: "0",
+        padding: "0",
+        top: "0",
+        left: "0",
         width: "100%",
         height: "100%",
         border: `2px solid`,
@@ -100,7 +103,8 @@ const ActiveWalkthroughControls = () => {
         },
         rightSection: /* @__PURE__ */ jsx(IconPlayerStopFilled, { size: 10 }),
         children: "Stop"
-      }
+      },
+      "trigger-dynamic-walkthrough"
     ),
     /* @__PURE__ */ jsx(
       PrevNextButton,
@@ -138,7 +142,8 @@ const ActiveWalkthroughControls = () => {
           " / ",
           totalSteps
         ] })
-      }
+      },
+      "step-badge"
     ),
     /* @__PURE__ */ jsx(
       PrevNextButton,

package/dist/node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronDown.js

@@ -0,0 +1,14 @@
+import createReactComponent from '../createReactComponent.js';
+
+/**
+ * @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 __iconNode = [["path", { "d": "M6 9l6 6l6 -6", "key": "svg-0" }]];
+const IconChevronDown = createReactComponent("outline", "chevron-down", "ChevronDown", __iconNode);
+
+export { __iconNode, IconChevronDown as default };

package/dist/node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconLink.js

@@ -0,0 +1,14 @@
+import createReactComponent from '../createReactComponent.js';
+
+/**
+ * @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 __iconNode = [["path", { "d": "M9 15l6 -6", "key": "svg-0" }], ["path", { "d": "M11 6l.463 -.536a5 5 0 0 1 7.071 7.072l-.534 .464", "key": "svg-1" }], ["path", { "d": "M13 18l-.397 .534a5.068 5.068 0 0 1 -7.127 0a4.972 4.972 0 0 1 0 -7.071l.524 -.463", "key": "svg-2" }]];
+const IconLink = createReactComponent("outline", "link", "Link", __iconNode);
+
+export { __iconNode, IconLink as default };

package/dist/overlays/element-details/ElementDetailsCard.css.js

@@ -4,10 +4,10 @@ const backdropBlur = "--_blur";
 const backdropOpacity = "--_opacity";
 const dialog = css({
   boxSizing: "border-box",
-  margin: 0,
-  padding: 0,
+  margin: "0",
+  padding: "0",
   position: "fixed",
-  inset: 0,
+  inset: "0",
   width: "100vw",
   height: "100vh",
   maxWidth: "100vw",
@@ -33,12 +33,12 @@ const card = css({
   border: `none`,
   backgroundImage: `
     linear-gradient(180deg,
-      color-mix(in srgb, {colors.likec4.palette.fill} 60%, transparent),
-      color-mix(in srgb, {colors.likec4.palette.fill} 20%, transparent) 8px,
-      color-mix(in srgb, {colors.likec4.palette.fill} 14%, transparent) 20px,
+      color-mix(in srgb, var(--likec4-palette-fill) 60%, transparent),
+      color-mix(in srgb, var(--likec4-palette-fill) 20%, transparent) 8px,
+      color-mix(in srgb, var(--likec4-palette-fill) 14%, transparent) 20px,
       transparent 80px
     ),
-    linear-gradient(180deg, {colors.likec4.palette.fill}, {colors.likec4.palette.fill} 4px, transparent 4px)
+    linear-gradient(180deg, var(--likec4-palette-fill), var(--likec4-palette-fill) 4px, transparent 4px)
   `,
   "& .react-flow__attribution": {
     display: "none"
@@ -94,7 +94,7 @@ const viewButton = css({
   width: "100%",
   background: "mantine.colors.body",
   borderRadius: "sm",
-  padding: `10px 8px`,
+  padding: `[10px 8px]`,
   // gap: 6,
   // alignItems: 'flex-start',
   transition: "fast",
@@ -153,8 +153,9 @@ const tabsList = css({
   background: "mantine.colors.gray[1]",
   borderRadius: "sm",
   flexWrap: "nowrap",
-  gap: "6px",
-  padding: "4px",
+  gap: "1.5",
+  // 6px
+  padding: "1",
   _dark: {
     background: "mantine.colors.dark[7]"
   }
@@ -163,7 +164,7 @@ const tabsTab = css({
   fontSize: "xs",
   fontWeight: 500,
   flexGrow: 1,
-  padding: "6px 8px",
+  padding: "[6px 8px]",
   transition: "fast",
   borderRadius: "sm",
   color: "mantine.colors.gray[7]",
@@ -195,15 +196,15 @@ const tabsPanel = css({
   overflow: "hidden",
   position: "relative",
   "&:not(:has(.mantine-ScrollArea-root))": {
-    paddingLeft: "4px",
-    paddingRight: "4px"
+    paddingLeft: "1",
+    paddingRight: "1"
   },
   "& .mantine-ScrollArea-root": {
     width: "100%",
     height: "100%",
     "& > div": {
-      paddingLeft: "4px",
-      paddingRight: "4px"
+      paddingLeft: "1",
+      paddingRight: "1"
     }
   }
 });
@@ -230,8 +231,8 @@ const resizeHandle = css({
   borderTop: "none",
   borderLeft: "none",
   borderRadius: "2px",
-  bottom: "2px",
-  right: "2px",
+  bottom: "0.5",
+  right: "0.5",
   transition: "fast",
   cursor: "se-resize",
   _hover: {

package/dist/overlays/element-details/ElementDetailsCard.js

@@ -1,5 +1,6 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { cx, css } from '@likec4/styles/css';
+import { HStack } from '@likec4/styles/jsx';
 import { RemoveScroll, Card, Group, Text, CloseButton, Badge, Flex, ActionIconGroup, ActionIcon, Tooltip as Tooltip$1, Tabs, TabsList, TabsTab, TabsPanel, ScrollArea, Box, Stack, Divider as Divider$1, ScrollAreaAutosize, UnstyledButton, ThemeIcon } from '@mantine/core';
 import { useViewportSize, useSessionStorage } from '@mantine/hooks';
 import { useSyncedRef, useDebouncedCallback, useTimeoutEffect } from '@react-hookz/web';
@@ -9,7 +10,7 @@ import { pipe, map, partition, only, clamp, isNullish, entries } from 'remeda';
 import { ElementTag } from '../../base/primitives/element/ElementTags.js';
 import { Link } from '../../components/Link.js';
 import { useDiagram } from '../../hooks/useDiagram.js';
-import { elementIcon, cardHeader, title, tabsPanel, tabsTab, tabsList, tabsRoot, propertiesGrid, resizeHandle, card, backdropOpacity, backdropBlur, dialog, propertyLabel, viewButton, viewButtonTitle } from './ElementDetailsCard.css.js';
+import { elementIcon, card, cardHeader, title, tabsPanel, tabsTab, tabsList, tabsRoot, propertiesGrid, resizeHandle, backdropOpacity, backdropBlur, dialog, propertyLabel, viewButton, viewButtonTitle } from './ElementDetailsCard.css.js';
 import { TabPanelDeployments } from './TabPanelDeployments.js';
 import { TabPanelRelationships } from './TabPanelRelationships.js';
 import { TabPanelStructure } from './TabPanelStructure.js';
@@ -195,12 +196,8 @@ function ElementDetailsCard({
           dragElastic: 0,
           dragMomentum: false,
           dragListener: false,
-          className: cx(
-            css({
-              likec4Palette: nodeModel?.color ?? elementModel.color
-            }),
-            card
-          ),
+          "data-likec4-color": nodeModel?.color ?? elementModel.color,
+          className: card,
           initial: {
             top,
             left,
@@ -284,9 +281,7 @@ function ElementDetailsCard({
                       ElementTag,
                       {
                         tag,
-                        css: {
-                          cursor: "pointer"
-                        },
+                        cursor: "pointer",
                         onClick: (e) => {
                           e.stopPropagation();
                           diagram.openSearch(`#${tag}`);
@@ -377,7 +372,7 @@ function ElementDetailsCard({
                     elementModel.technology && /* @__PURE__ */ jsx(ElementProperty, { title: "technology", children: elementModel.technology }),
                     elementModel.links.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
                       /* @__PURE__ */ jsx(PropertyLabel, { children: "links" }),
-                      /* @__PURE__ */ jsx(Stack, { gap: "xs", align: "flex-start", children: elementModel.links.map((link, i) => /* @__PURE__ */ jsx(Link, { value: link }, i)) })
+                      /* @__PURE__ */ jsx(HStack, { gap: "xs", flexWrap: "wrap", children: elementModel.links.map((link, i) => /* @__PURE__ */ jsx(Link, { value: link }, i)) })
                     ] }),
                     elementModel.$element.metadata && /* @__PURE__ */ jsx(ElementMetata, { value: elementModel.$element.metadata })
                   ] }) }) }),
@@ -494,7 +489,7 @@ function ElementMetata({
           gap: `[4px 4px]`,
           alignItems: "baseline",
           justifyItems: "stretch",
-          paddingRight: "2xs"
+          paddingRight: "xxs"
         }),
         children: entries(metadata).map(([key, value]) => /* @__PURE__ */ jsxs(
           "div",
@@ -551,7 +546,7 @@ function ElementMetata({
                         {
                           className: css({
                             fontSize: "sm",
-                            padding: "2xs",
+                            padding: "xxs",
                             whiteSpace: "pre",
                             fontFamily: "[var(--mantine-font-family-monospace)]",
                             userSelect: "all"

package/dist/overlays/element-details/TabPanelDeployments.css.js

@@ -7,8 +7,8 @@ const treeNode = css({
 });
 const treeNodeLabel = css({
   cursor: "default",
-  marginTop: 0,
-  marginBottom: 0
+  marginTop: "0",
+  marginBottom: "0"
 });
 const label = css({
   transition: "fast",
@@ -40,8 +40,9 @@ const instanceLabel = cx(
     justifyContent: "stretch",
     flexWrap: "nowrap",
     height: "36px",
-    paddingInlineStart: "16px",
-    paddingInlineEnd: "10px",
+    paddingInlineStart: "[16px]",
+    paddingInlineEnd: "2.5",
+    // 10px
     borderRadius: "sm",
     alignItems: "center",
     color: "mantine.colors.gray[7]",

package/dist/overlays/element-details/TabPanelRelationships.css.js

@@ -5,11 +5,11 @@ const fqn = css({
   fontSize: "sm",
   fontWeight: 500,
   whiteSpace: "nowrap",
-  padding: "3px 6px",
+  padding: "[3px 6px]",
   borderRadius: 3,
-  background: `likec4.palette.fill/75`,
+  background: `var(--likec4-palette-fill)/75`,
   lineHeight: 1.2,
-  color: "likec4.palette.hiContrast"
+  color: "var(--likec4-palette-hiContrast)"
   // selectors: {
   //   [`${whereDark} &`]: {
   //   }
@@ -52,9 +52,9 @@ css({
   _before: {
     content: '"scope:"',
     position: "absolute",
-    top: 0,
-    left: 8,
-    fontSize: "2xs",
+    top: "0",
+    left: "2",
+    fontSize: "xxs",
     fontWeight: 500,
     lineHeight: "1",
     color: "mantine.colors.dimmed",
@@ -71,7 +71,7 @@ css({
   display: "inline-block",
   fontSize: "xl",
   fontWeight: 600,
-  padding: "1px 5px",
+  padding: "[1px 5px]",
   minWidth: 24,
   textAlign: "center",
   borderRadius: "sm",

package/dist/overlays/overlay/Overlay.css.d.ts

@@ -11,7 +11,7 @@ export declare const overlay: SlotRecipeRuntimeFn<"body" | "dialog", {
                     width: "calc(100vw - 2 * var(--_inset))";
                     height: "calc(100vh - var(--_offset) - var(--_inset))";
                     "--_border-radius": "6px";
-                    padding: "6px";
+                    padding: "1.5";
                     "--_offset": "1rem";
                 };
                 md: {
@@ -32,8 +32,8 @@ export declare const overlay: SlotRecipeRuntimeFn<"body" | "dialog", {
         };
         true: {
             dialog: {
-                inset: number;
-                padding: number;
+                inset: "0";
+                padding: "0";
             };
         };
     };

package/dist/overlays/overlay/Overlay.css.js

@@ -8,7 +8,7 @@ const inset = "--_inset";
 const borderRadius = "--_border-radius";
 const dialog = css.raw({
   boxSizing: "border-box",
-  margin: 0,
+  margin: "0",
   position: "fixed",
   width: "100vw",
   height: "100vh",
@@ -28,12 +28,12 @@ const dialog = css.raw({
   _backdrop: {
     cursor: "zoom-out"
   },
-  inset: 0,
-  padding: 0
+  inset: "0",
+  padding: "0"
 });
 const body = css.raw({
   position: "relative",
-  containerName: "overlay-dialog",
+  containerName: "likec4-dialog",
   containerType: "size",
   border: `0 solid transparent`,
   overflow: "hidden",
@@ -56,7 +56,8 @@ const overlay = sva({
             width: "calc(100vw - 2 * var(--_inset))",
             height: "calc(100vh - var(--_offset) - var(--_inset))",
             [borderRadius]: "6px",
-            padding: "6px",
+            padding: "1.5",
+            // 6px
             [offset]: "1rem"
           },
           md: {
@@ -77,8 +78,8 @@ const overlay = sva({
       },
       true: {
         dialog: {
-          inset: 0,
-          padding: 0
+          inset: "0",
+          padding: "0"
         }
       }
     },

package/dist/overlays/relationship-details/SelectEdge.css.js

@@ -3,7 +3,7 @@ import { css, cx } from '@likec4/styles/css';
 const edgeEnpoint = css.raw({
   display: "inline-flex",
   alignItems: "center",
-  padding: "6px 2px 0 2px",
+  padding: "[6px 2px 0 2px]",
   "& .mantine-Text-root": {
     color: "mantine.colors.text/90",
     fontSize: "xs",
@@ -12,7 +12,7 @@ const edgeEnpoint = css.raw({
   }
 });
 const edgeSource = css({
-  paddingLeft: 4,
+  paddingLeft: "1",
   gridColumn: 1
 }, edgeEnpoint);
 const edgeArrow = css({
@@ -20,7 +20,7 @@ const edgeArrow = css({
 }, edgeEnpoint);
 const edgeTarget = css({
   gridColumn: 3,
-  paddingRight: 4
+  paddingRight: "1"
 }, edgeEnpoint);
 const edgeLabelclass = "likec4-edge-label";
 const edgeLabel = cx(
@@ -31,8 +31,8 @@ const edgeLabel = cx(
     gridColumnEnd: 4,
     borderBottom: `1px solid`,
     borderBottomColor: "mantine.colors.defaultBorder",
-    marginBottom: "0px",
-    padding: "0 4px 5px 4px",
+    marginBottom: "0",
+    padding: "[0 4px 5px 4px]",
     width: "100%",
     "& .mantine-Text-root": {
       fontSize: "xxs",
@@ -46,7 +46,7 @@ const edgeRow = css({
   display: "contents",
   [`&:last-child .${edgeLabelclass}`]: {
     borderBottom: "none",
-    marginBottom: 0
+    marginBottom: "0"
   },
   "& > *": {
     transition: "all 0.15s ease-in"
@@ -61,14 +61,14 @@ const edgeGrid = css({
   display: "grid",
   gridTemplateColumns: "1fr 30px 1fr",
   gridAutoRows: "min-content max-content",
-  gap: 0,
+  gap: "0",
   alignItems: "stretch"
 });
 css({
   display: "grid",
   gridTemplateColumns: "min-content 1fr",
   gridAutoRows: "min-content max-content",
-  gap: "10px 12px",
+  gap: "[10px 12px]",
   alignItems: "baseline",
   justifyItems: "start"
 });

package/dist/overlays/relationships-browser/SelectElement.css.js

@@ -1,7 +1,7 @@
 import { css } from '@likec4/styles/css';
 
 const node = css({
-  margin: 0
+  margin: "0"
 });
 const label = css({
   _hover: {

package/dist/search/Search.js

@@ -36,8 +36,8 @@ const body = css({
   // containerType: 'size',
   // position: 'fixed',
   // zIndex: 901,
-  // top: 0,
-  // left: 0,
+  // top: '0',
+  // left: '0',
   width: "100%",
   height: "100%",
   maxHeight: "100vh",
@@ -46,10 +46,10 @@ const body = css({
   flexDirection: "column",
   justifyContent: "stretch",
   gap: "sm",
-  paddingTop: 20,
-  paddingLeft: 16,
-  paddingRight: 16,
-  paddingBottom: 8,
+  paddingTop: "[20px]",
+  paddingLeft: "md",
+  paddingRight: "md",
+  paddingBottom: "sm",
   background: "[transparent]"
   // backgroundColor: {
   //   _dark: `[rgb(34 34 34 / 0.95)]`,