@likec4/diagram 1.19.1 → 1.20.0

package/dist/base/example/custom.d.ts

@@ -0,0 +1,71 @@
+import { NamedExoticComponent, CSSProperties, ReactNode } from 'react';
+import { NodeProps } from '..';
+import { Color, ViewId, Fqn, ElementStyle } from '@likec4/core';
+import { Position } from '@xyflow/system';
+export declare const nodeTypes: {
+    element: NamedExoticComponent<NodeProps<{
+        title: string;
+        description: string | null;
+        width: number;
+        height: number;
+        technology: string | null;
+        shape: "rectangle" | "person" | "browser" | "mobile" | "cylinder" | "storage" | "queue";
+        color: Color;
+        navigateTo: ViewId<string> | null | undefined;
+        fqn: Fqn;
+        icon: string | null;
+        hovered?: boolean;
+        dimmed?: import("..").Base.Dimmed;
+    }>>;
+    compound: NamedExoticComponent<NodeProps<{
+        style: ElementStyle;
+        title: string;
+        shape: "rectangle" | "person" | "browser" | "mobile" | "cylinder" | "storage" | "queue";
+        color: Color;
+        fqn: Fqn;
+        depth: number;
+        icon: string | null;
+        hovered?: boolean;
+        dimmed?: import("..").Base.Dimmed;
+    }>>;
+};
+export declare const edgeTypes: {
+    relationships: NamedExoticComponent<{
+        source: string;
+        target: string;
+        style?: CSSProperties;
+        id: string;
+        selected?: boolean;
+        selectable?: boolean;
+        deletable?: boolean;
+        animated?: boolean;
+        sourceX: number;
+        sourceY: number;
+        targetX: number;
+        targetY: number;
+        sourcePosition: Position;
+        targetPosition: Position;
+        label?: ReactNode;
+        labelStyle?: CSSProperties;
+        labelShowBg?: boolean;
+        labelBgStyle?: CSSProperties;
+        labelBgPadding?: [number, number];
+        labelBgBorderRadius?: number;
+        sourceHandleId?: string | null;
+        targetHandleId?: string | null;
+        markerStart?: string;
+        markerEnd?: string;
+        pathOptions?: any;
+        interactionWidth?: number;
+        data: {
+            hovered?: boolean;
+            active?: boolean;
+            dimmed?: import("..").Base.Dimmed;
+        } & {
+            color: Color | undefined;
+            hovered?: boolean;
+            active?: boolean;
+            dimmed?: import("..").Base.Dimmed;
+        };
+    }>;
+};

package/dist/base/example/useViewToNodesEdges.d.ts

@@ -0,0 +1,6 @@
+import { DiagramView } from '@likec4/core';
+import { ExampleTypes } from './_types';
+export declare function useViewToNodesEdges({ id, nodes, edges, }: Pick<DiagramView, 'id' | 'nodes' | 'edges'>): {
+    xynodes: ExampleTypes.Node[];
+    xyedges: ExampleTypes.Edge[];
+};

package/dist/base/index.d.ts

@@ -0,0 +1,2 @@
+export { BaseXYFlow, type BaseXYFlowProps } from './BaseXYFlow';
+export { Base, type EdgeProps, type NodeProps, type NonOptional, type ReactFlowEdge, type ReactFlowNode, } from './types';

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

@@ -0,0 +1,4 @@
+/**
+ * XYFlow requires handles to be defined on nodes.
+ */
+export declare const DefaultHandles: () => import("react/jsx-runtime").JSX.Element;

package/dist/base/primitives/NodeHandles.js

@@ -0,0 +1,14 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { Handle, Position } from "@xyflow/react";
+const style = {
+  top: "50%",
+  left: "50%",
+  visibility: "hidden"
+};
+const DefaultHandles = () => /* @__PURE__ */ jsxs(Fragment, { children: [
+  /* @__PURE__ */ jsx(Handle, { type: "target", position: Position.Top, style }),
+  /* @__PURE__ */ jsx(Handle, { type: "source", position: Position.Bottom, style })
+] });
+export {
+  DefaultHandles
+};

package/dist/base/primitives/compound/CompoundActionButton.css.d.ts

@@ -0,0 +1,3 @@
+export declare const container: string;
+export declare const actionButton: string;
+export declare const actionIcon: string;

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

@@ -0,0 +1,9 @@
+/* empty css                                        */
+var container = "dbuyb70";
+var actionButton = "dbuyb71";
+var actionIcon = "dbuyb72";
+export {
+  actionButton,
+  actionIcon,
+  container
+};

package/dist/base/primitives/compound/CompoundActionButton.d.ts

@@ -0,0 +1,7 @@
+import { NodeProps } from '../../types';
+type CompoundActionButtonProps = NodeProps & {
+    icon?: React.ReactNode;
+    onClick: (e: React.MouseEvent) => void;
+};
+export declare function CompoundActionButton({ data: { hovered: isHovered, }, icon, onClick, }: CompoundActionButtonProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,48 @@
+import { jsx } from "react/jsx-runtime";
+import { Box, ActionIcon } from "@mantine/core";
+import { IconZoomScan } from "@tabler/icons-react";
+import clsx from "clsx";
+import { m } from "framer-motion";
+import { stopPropagation } from "../../../utils/xyflow.js";
+import { container, actionButton, actionIcon } from "./CompoundActionButton.css.js";
+function CompoundActionButton({
+  data: {
+    hovered: isHovered = false
+  },
+  icon,
+  onClick
+}) {
+  return /* @__PURE__ */ jsx(Box, { className: clsx(container, "compound-action"), children: /* @__PURE__ */ jsx(
+    Box,
+    {
+      className: clsx("nodrag nopan", actionButton),
+      component: m.div,
+      initial: false,
+      animate: {
+        scale: isHovered ? 1.2 : 1,
+        x: isHovered ? -1 : 0
+        // y: isHovered ? -1 : 0,
+      },
+      whileHover: {
+        scale: 1.35,
+        x: -1
+        // y: 1,
+      },
+      whileTap: { scale: 1 },
+      children: /* @__PURE__ */ jsx(
+        ActionIcon,
+        {
+          className: actionIcon,
+          size: "md",
+          radius: "md",
+          onClick,
+          onDoubleClick: stopPropagation,
+          children: icon ?? /* @__PURE__ */ jsx(IconZoomScan, { stroke: 2 })
+        }
+      )
+    }
+  ) });
+}
+export {
+  CompoundActionButton
+};

package/dist/base/primitives/compound/CompoundDetailsButton.css.d.ts

@@ -0,0 +1,3 @@
+export declare const container: string;
+export declare const actionIcon: string;
+export declare const actionIconWrapper: string;

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

@@ -0,0 +1,9 @@
+/* empty css                                         */
+var container = "k9mic70";
+var actionIcon = "k9mic72";
+var actionIconWrapper = "k9mic73";
+export {
+  actionIcon,
+  actionIconWrapper,
+  container
+};

package/dist/base/primitives/compound/CompoundDetailsButton.d.ts

@@ -0,0 +1,7 @@
+import { NodeProps } from '../../types';
+type CompoundDetailsButtonProps = NodeProps & {
+    icon?: React.ReactNode;
+    onClick: (e: React.MouseEvent) => void;
+};
+export declare function CompoundDetailsButton({ data: { hovered: isHovered, }, icon, onClick, }: CompoundDetailsButtonProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,50 @@
+import { jsx } from "react/jsx-runtime";
+import { Box, ActionIcon } from "@mantine/core";
+import { IconId } from "@tabler/icons-react";
+import clsx from "clsx";
+import { m } from "framer-motion";
+import { stopPropagation } from "../../../utils/xyflow.js";
+import { container, actionIconWrapper, actionIcon } from "./CompoundDetailsButton.css.js";
+function CompoundDetailsButton({
+  data: {
+    hovered: isHovered = false
+  },
+  icon,
+  onClick
+}) {
+  return /* @__PURE__ */ jsx(Box, { className: clsx(container, "details-button"), onClick: stopPropagation, children: /* @__PURE__ */ jsx(
+    Box,
+    {
+      component: m.div,
+      className: clsx("nodrag nopan", actionIconWrapper),
+      initial: false,
+      style: {
+        originX: 0.45,
+        originY: 0.55
+      },
+      animate: isHovered ? {
+        scale: 1.2
+      } : {
+        scale: 1
+      },
+      whileHover: {
+        scale: 1.42
+      },
+      whileTap: { scale: 1.15 },
+      children: /* @__PURE__ */ jsx(
+        ActionIcon,
+        {
+          className: actionIcon,
+          size: "md",
+          radius: "md",
+          onClick,
+          onDoubleClick: stopPropagation,
+          children: icon ?? /* @__PURE__ */ jsx(IconId, { stroke: 1.8, style: { width: "75%" } })
+        }
+      )
+    }
+  ) });
+}
+export {
+  CompoundDetailsButton
+};

package/dist/base/primitives/compound/CompoundNodeContainer.css.d.ts

@@ -0,0 +1,9 @@
+export declare const varCompoundOpacity: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+export declare const varBorderRadius: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+export declare const varBorderTransparency: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+export declare const varBorderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+export declare const dimmed: string;
+export declare const container: string;
+export declare const compoundBg: string;
+export declare const compoundBorder: string;
+export declare const indicator: string;

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

@@ -0,0 +1,17 @@
+/* empty css                                         */
+var varCompoundOpacity = "var(--_7cmew10)";
+var varBorderTransparency = "var(--_7cmew12)";
+var dimmed = "_7cmew15";
+var container = "_7cmew16";
+var compoundBg = "_7cmew17";
+var compoundBorder = "_7cmew18";
+var indicator = "_7cmew1c";
+export {
+  compoundBg,
+  compoundBorder,
+  container,
+  dimmed,
+  indicator,
+  varBorderTransparency,
+  varCompoundOpacity
+};

package/dist/base/primitives/compound/CompoundNodeContainer.d.ts

@@ -0,0 +1,26 @@
+import { DiagramNode } from '@likec4/core';
+import { BoxProps, PolymorphicComponentProps } from '@mantine/core';
+import { PropsWithChildren, FunctionComponent, ReactNode } from 'react';
+import { NodeProps } from '../../types';
+type RequiredData = Pick<DiagramNode, 'color' | 'depth' | 'shape' | 'style'>;
+type CompoundNodeContainerProps = BoxProps & PropsWithChildren<{
+    nodeProps: NodeProps<RequiredData>;
+}>;
+export declare const CompoundNodeContainer: (<C = "div">(props: PolymorphicComponentProps<C, CompoundNodeContainerProps>) => React.ReactElement) & Omit< FunctionComponent<(BoxProps & {
+    nodeProps: NodeProps<RequiredData>;
+} & {
+    children?: ReactNode | undefined;
+} & {
+    component?: any;
+} & Omit<Omit<any, "ref">, "children" | "component" | keyof BoxProps | "nodeProps"> & {
+    ref?: any;
+    renderRoot?: (props: any) => any;
+}) | (BoxProps & {
+    nodeProps: NodeProps<RequiredData>;
+} & {
+    children?: ReactNode | undefined;
+} & {
+    component: React.ElementType;
+    renderRoot?: (props: Record<string, any>) => any;
+})>, never> & Record<string, never>;
+export {};

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

@@ -0,0 +1,86 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { createPolymorphicComponent, Box } from "@mantine/core";
+import { assignInlineVars } from "../../../node_modules/@vanilla-extract/dynamic/dist/vanilla-extract-dynamic.esm.js";
+import clsx from "clsx";
+import { m } from "framer-motion";
+import { forwardRef } from "react";
+import { isNumber, clamp } from "remeda";
+import { container, dimmed, varCompoundOpacity, varBorderTransparency, indicator, compoundBg, compoundBorder } from "./CompoundNodeContainer.css.js";
+const CompoundNodeContainer = createPolymorphicComponent(
+  forwardRef(({
+    nodeProps: {
+      data: {
+        hovered: isHovered = false,
+        dimmed: isDimmed = false,
+        style,
+        ...data
+      }
+    },
+    children,
+    ...rest
+  }, ref) => {
+    const isTransparent = isNumber(style.opacity) && style.opacity < 100;
+    let opacity = clamp((style.opacity ?? 100) / 100, {
+      min: 0,
+      max: 1
+    });
+    if (isTransparent && isHovered) {
+      opacity = Math.min(opacity + 0.11, 1);
+    }
+    const MAX_TRANSPARENCY = 40;
+    const borderTransparency = clamp(MAX_TRANSPARENCY - opacity * MAX_TRANSPARENCY, {
+      min: 0,
+      max: MAX_TRANSPARENCY
+    });
+    return /* @__PURE__ */ jsxs(
+      Box,
+      {
+        ref,
+        component: m.div,
+        className: clsx([
+          container,
+          isDimmed && dimmed,
+          "likec4-compound-node"
+        ]),
+        initial: false,
+        "data-hovered": isHovered,
+        "data-likec4-color": data.color,
+        "data-compound-depth": data.depth ?? 1,
+        "data-compound-transparent": isTransparent,
+        "data-likec4-shape": data.shape,
+        style: assignInlineVars({
+          [varCompoundOpacity]: opacity.toFixed(2),
+          [varBorderTransparency]: `${borderTransparency}%`
+        }),
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsx("svg", { className: indicator, children: /* @__PURE__ */ jsx(
+            "rect",
+            {
+              x: 0,
+              y: 0,
+              width: "100%",
+              height: "100%",
+              rx: 6
+            }
+          ) }),
+          /* @__PURE__ */ jsx("div", { className: compoundBg }),
+          isTransparent && style.border !== "none" && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: compoundBorder,
+              style: {
+                borderStyle: style.border ?? "dashed"
+              }
+            }
+          ),
+          children
+        ]
+      }
+    );
+  })
+);
+CompoundNodeContainer.displayName = "CompoundNodeContainer";
+export {
+  CompoundNodeContainer
+};

package/dist/base/primitives/compound/CompoundTitle.css.d.ts

@@ -0,0 +1,2 @@
+export declare const compoundTitle: string;
+export declare const title: string;

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

@@ -0,0 +1,7 @@
+/* empty css                                 */
+var compoundTitle = "_1dn4as0";
+var title = "_1dn4as1";
+export {
+  compoundTitle,
+  title
+};

package/dist/base/primitives/compound/CompoundTitle.d.ts

@@ -0,0 +1,6 @@
+import { DiagramNode } from '@likec4/core';
+import { NodeProps } from '../../types';
+type Data = Pick<DiagramNode, 'color' | 'title'>;
+type CompoundTitleProps = NodeProps<Data>;
+export declare function CompoundTitle({ data }: CompoundTitleProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,20 @@
+import { jsx } from "react/jsx-runtime";
+import { Box, Text } from "@mantine/core";
+import clsx from "clsx";
+import { compoundTitle, title } from "./CompoundTitle.css.js";
+function CompoundTitle({ data }) {
+  data.hovered ?? false;
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      className: clsx(
+        compoundTitle,
+        "likec4-compound-title"
+      ),
+      children: /* @__PURE__ */ jsx(Text, { className: title, truncate: "end", children: data.title })
+    }
+  );
+}
+export {
+  CompoundTitle
+};

package/dist/base/primitives/customEdge.d.ts

@@ -0,0 +1,41 @@
+import { FunctionComponent, NamedExoticComponent, CSSProperties, ReactNode } from 'react';
+import { Base, EdgeProps } from '../types';
+import { Position } from '@xyflow/system';
+export declare const edgePropsEqual: <P extends Record<string, unknown> = {
+    hovered?: boolean;
+    active?: boolean;
+    dimmed?: Base.Dimmed;
+}>(prev: EdgeProps<P>, next: EdgeProps<P>) => boolean;
+export declare function customEdge<P extends Record<string, unknown> = Base.NodeData>(Edge: FunctionComponent<EdgeProps<P>>): NamedExoticComponent<{
+    source: string;
+    target: string;
+    style?: CSSProperties;
+    id: string;
+    selected?: boolean;
+    selectable?: boolean;
+    deletable?: boolean;
+    animated?: boolean;
+    sourceX: number;
+    sourceY: number;
+    targetX: number;
+    targetY: number;
+    sourcePosition: Position;
+    targetPosition: Position;
+    label?: ReactNode;
+    labelStyle?: CSSProperties;
+    labelShowBg?: boolean;
+    labelBgStyle?: CSSProperties;
+    labelBgPadding?: [number, number];
+    labelBgBorderRadius?: number;
+    sourceHandleId?: string | null;
+    targetHandleId?: string | null;
+    markerStart?: string;
+    markerEnd?: string;
+    pathOptions?: any;
+    interactionWidth?: number;
+    data: {
+        hovered?: boolean;
+        active?: boolean;
+        dimmed?: Base.Dimmed;
+    } & P;
+}>;

package/dist/base/primitives/customEdge.js

@@ -0,0 +1,13 @@
+import { deepEqual } from "fast-equals";
+import { memo } from "react";
+const isSame = (a, b) => {
+  return Math.abs(a - b) < 2.5;
+};
+const edgePropsEqual = (prev, next) => prev.id === next.id && deepEqual(prev.source, next.source) && deepEqual(prev.sourceHandleId ?? null, next.sourceHandleId ?? null) && deepEqual(prev.target, next.target) && deepEqual(prev.targetHandleId ?? null, next.targetHandleId ?? null) && deepEqual(prev.selected ?? false, next.selected ?? false) && isSame(prev.sourceX, next.sourceX) && isSame(prev.sourceY, next.sourceY) && isSame(prev.targetX, next.targetX) && isSame(prev.targetY, next.targetY) && deepEqual(prev.data, next.data) && deepEqual(prev.style, next.style);
+function customEdge(Edge) {
+  return memo(Edge, edgePropsEqual);
+}
+export {
+  customEdge,
+  edgePropsEqual
+};

package/dist/base/primitives/customNode.d.ts

@@ -0,0 +1,7 @@
+import { FunctionComponent, NamedExoticComponent } from 'react';
+import { Base, NodeProps } from '../types';
+export declare const nodePropsEqual: <P extends Record<string, unknown> = {
+    hovered?: boolean;
+    dimmed?: Base.Dimmed;
+}>(prev: NodeProps<P>, next: NodeProps<P>) => boolean;
+export declare function customNode<P extends Record<string, unknown> = Base.NodeData>(Node: FunctionComponent<NodeProps<P>>): NamedExoticComponent<NodeProps<P>>;

package/dist/base/primitives/customNode.js

@@ -0,0 +1,10 @@
+import { deepEqual } from "fast-equals";
+import { memo } from "react";
+const nodePropsEqual = (prev, next) => prev.id === next.id && deepEqual(prev.selected ?? false, next.selected ?? false) && deepEqual(prev.dragging ?? false, next.dragging ?? false) && deepEqual(prev.width ?? 0, next.width ?? 0) && deepEqual(prev.height ?? 0, next.height ?? 0) && deepEqual(prev.data, next.data);
+function customNode(Node) {
+  return memo(Node, nodePropsEqual);
+}
+export {
+  customNode,
+  nodePropsEqual
+};

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

@@ -0,0 +1,7 @@
+import { EdgeProps } from '../../types';
+type EdgeActionBtnProps = EdgeProps & {
+    icon?: React.ReactNode;
+    onClick: (e: React.MouseEvent) => void;
+};
+export declare function EdgeActionButton({ icon, onClick }: EdgeActionBtnProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,24 @@
+import { jsx } from "react/jsx-runtime";
+import { ActionIcon } from "@mantine/core";
+import { IconZoomScan } from "@tabler/icons-react";
+import clsx from "clsx";
+import { stopPropagation } from "../../../utils/xyflow.js";
+import { actionBtn } from "./EdgeLabel.css.js";
+function EdgeActionButton({ icon, onClick }) {
+  return /* @__PURE__ */ jsx(
+    ActionIcon,
+    {
+      className: clsx("nodrag nopan", actionBtn),
+      size: "sm",
+      radius: "sm",
+      onPointerDownCapture: stopPropagation,
+      onClick,
+      role: "button",
+      onDoubleClick: stopPropagation,
+      children: icon ?? /* @__PURE__ */ jsx(IconZoomScan, {})
+    }
+  );
+}
+export {
+  EdgeActionButton
+};

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

@@ -0,0 +1,10 @@
+import { DiagramEdge } from '@likec4/core';
+import { PropsWithChildren } from 'react';
+import { UndefinedOnPartialDeep } from 'type-fest';
+import { EdgeProps } from '../../types';
+type Data = UndefinedOnPartialDeep<Pick<DiagramEdge, 'dir' | 'color'>>;
+type EdgeContainerProps = PropsWithChildren<EdgeProps<Data> & {
+    className?: string | undefined;
+}>;
+export declare function EdgeContainer({ className, data: { hovered: isHovered, active: isActive, dimmed: isDimmed, ...data }, children, }: EdgeContainerProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,35 @@
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import "react";
+import { edgeVars, dimmed } from "./edge.css.js";
+function EdgeContainer({
+  className,
+  data: {
+    hovered: isHovered = false,
+    active: isActive = false,
+    dimmed: isDimmed = false,
+    ...data
+  },
+  children
+}) {
+  return /* @__PURE__ */ jsx(
+    "g",
+    {
+      className: clsx(
+        edgeVars,
+        isDimmed && dimmed,
+        className
+      ),
+      "data-likec4-color": data.color ?? "gray",
+      "data-edge-dir": data.dir ?? "forward",
+      "data-edge-active": isActive,
+      "data-edge-animated": isActive,
+      "data-edge-hovered": isHovered,
+      "data-edge-dimmed": isDimmed,
+      children
+    }
+  );
+}
+export {
+  EdgeContainer
+};

package/dist/{xyflow/edges/edges.css.d.ts → base/primitives/edge/EdgeLabel.css.d.ts}

@@ -1,17 +1,13 @@
-export declare const container: string;
-export declare const dimmed: string;
-export declare const edgePathBg: string;
-export declare const markerContext: string;
-export declare const controlPoint: string;
-export declare const controlDragging: string;
-export declare const cssEdgePath: string;
+export { dimmed, edgeVars } from './edge.css';
 export declare const stepEdgeNumber: string;
 export declare const varLabelX: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 export declare const varLabelY: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+export declare const varTranslate: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+export declare const edgeLabelContainer: string;
 export declare const edgeLabel: string;
+export declare const secondColumn: string;
 export declare const edgeLabelText: string;
 export declare const edgeLabelTechnology: string;
 export declare const edgeNoteCloseButton: string;
 export declare const edgeNoteText: string;
-export declare const cssNavigateBtn: string;
-export declare const cssNavigateBtnIcon: string;
+export declare const actionBtn: string;

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

@@ -0,0 +1,25 @@
+/* empty css                                        */
+/* empty css                        */
+/* empty css                             */
+var dimmed = "nrg7w92";
+var edgeVars = "nrg7w91";
+var stepEdgeNumber = "_1fqbh3j0";
+var varTranslate = "var(--_1fqbh3j3)";
+var edgeLabelContainer = "_1fqbh3j4";
+var edgeLabel = "_1fqbh3j5";
+var secondColumn = "_1fqbh3j6";
+var edgeLabelText = "_1fqbh3j7";
+var edgeLabelTechnology = "_1fqbh3j8";
+var actionBtn = "_1fqbh3jb";
+export {
+  actionBtn,
+  dimmed,
+  edgeLabel,
+  edgeLabelContainer,
+  edgeLabelTechnology,
+  edgeLabelText,
+  edgeVars,
+  secondColumn,
+  stepEdgeNumber,
+  varTranslate
+};