@likec4/diagram 1.30.0 → 1.32.0

package/src/LikeC4CustomColors.tsx

@@ -6,9 +6,10 @@ import {
   nonexhaustive,
 } from '@likec4/core'
 import { useMantineStyleNonce } from '@mantine/core'
-import { deepEqual } from 'fast-equals'
-import { memo } from 'react'
-import { entries } from 'remeda'
+import { memo, useState } from 'react'
+import { entries, isEmpty } from 'remeda'
+import { useUpdateEffect } from './hooks'
+import { useLikeC4Specification } from './likec4model/useLikeC4Model'
 
 interface LikeC4CustomColorsProperties {
   customColors: CustomColorDefinitions
@@ -54,17 +55,31 @@ function toStyle(name: String, colors: ThemeColorValues): String {
   `
 }
 
-export const LikeC4CustomColors = memo<LikeC4CustomColorsProperties>(({ customColors }) => {
-  const styles = entries(customColors)
+function generateCustomColorStyles(customColors: CustomColorDefinitions) {
+  return entries(customColors)
     .map(([name, color]) => toStyle(name, color))
     .join('\n')
+    .trim()
+}
+
+export const LikeC4CustomColors = memo(() => {
+  const customColors = useLikeC4Specification().customColors ?? {}
+  const [styles, setStyles] = useState(() => generateCustomColorStyles(customColors))
+
+  useUpdateEffect(() => {
+    setStyles(generateCustomColorStyles(customColors))
+  }, [customColors])
 
   const nonce = useMantineStyleNonce()?.()
 
+  if (isEmpty(customColors)) {
+    return null
+  }
+
   return (
     <>
       <style type="text/css" dangerouslySetInnerHTML={{ __html: styles }} nonce={nonce} />
     </>
   )
-}, deepEqual)
+})
 LikeC4CustomColors.displayName = 'LikeC4CustomColors'

package/src/LikeC4Diagram.props.ts

@@ -1,22 +1,21 @@
 import type {
+  Any,
   DiagramEdge,
   DiagramNode,
-  DiagramView,
-  Fqn,
-  RelationId,
+  LayoutedView,
   ViewChange,
-  ViewId,
   WhereOperator,
-} from '@likec4/core'
+} from '@likec4/core/types'
+import type * as aux from '@likec4/core/types/aux'
 import type { ReactFlowProps as XYFlowProps } from '@xyflow/react'
 import type { MouseEvent as ReactMouseEvent, ReactNode } from 'react'
+import type { SetRequired } from 'type-fest'
 import type { ControlsCustomLayout } from './context/ControlsCustomLayout'
+import type { CustomNodes } from './custom/customNodes'
 
-export type { WhereOperator }
+export type { CustomNodes, WhereOperator }
 
-export type DiagramNodeWithNavigate<ID = ViewId> = Omit<DiagramNode, 'navigateTo'> & {
-  navigateTo: ID
-}
+export type DiagramNodeWithNavigate<A extends Any> = SetRequired<DiagramNode<A>, 'navigateTo'>
 
 type ElementIconRendererProps = {
   node: {
@@ -24,24 +23,25 @@ type ElementIconRendererProps = {
     title: string
     icon?: string | null | undefined
   }
+  className?: string
 }
 
 export type ElementIconRenderer = (props: ElementIconRendererProps) => ReactNode
 
-export type OnNavigateTo<ID = ViewId> = (
-  to: ID,
+export type OnNavigateTo<A extends Any> = (
+  to: aux.ViewId<A>,
   // These fields present if navigateTo triggered by a node click
   event?: ReactMouseEvent,
-  element?: DiagramNodeWithNavigate<ID>,
+  element?: DiagramNodeWithNavigate<A>,
 ) => void
 
-export type OnNodeClick = (
-  node: DiagramNode,
+export type OnNodeClick<A extends Any> = (
+  node: DiagramNode<A>,
   event: ReactMouseEvent,
 ) => void
 
-export type OnEdgeClick = (
-  edge: DiagramEdge,
+export type OnEdgeClick<A extends Any> = (
+  edge: DiagramEdge<A>,
   event: ReactMouseEvent,
 ) => void
 
@@ -86,8 +86,8 @@ export type OverrideReactFlowProps = Pick<
 export type PaddingUnit = 'px' | '%'
 export type PaddingWithUnit = `${number}${PaddingUnit}` | number
 
-export interface LikeC4DiagramProperties {
-  view: DiagramView
+export interface LikeC4DiagramProperties<A extends aux.Any> {
+  view: LayoutedView<A>
 
   className?: string | undefined
 
@@ -198,6 +198,12 @@ export interface LikeC4DiagramProperties {
    */
   enableDynamicViewWalkthrough?: boolean | undefined
 
+  /**
+   * Display element tags in the bottom left corner
+   * @default true
+   */
+  enableElementTags?: boolean | undefined
+
   /**
    * Experimental feature to enable edge editing
    * @default false
@@ -222,10 +228,15 @@ export interface LikeC4DiagramProperties {
    */
   renderControls?: ControlsCustomLayout | undefined
 
+  /**
+   * Override node renderers
+   */
+  renderNodes?: CustomNodes | undefined
+
   /**
    * Dynamic filter, applies both to nodes and edges
    */
-  where?: WhereOperator<string, string> | undefined
+  where?: WhereOperator<A> | undefined
 
   /**
    * Override ReactFlow props
@@ -233,35 +244,35 @@ export interface LikeC4DiagramProperties {
   reactFlowProps?: OverrideReactFlowProps | undefined
 }
 
-export type OpenSourceParams =
+export type OpenSourceParams<A extends aux.Any = aux.Any> =
   | {
-    element: Fqn
+    element: aux.Fqn<A>
     property?: string
   }
   | {
-    relation: RelationId
+    relation: aux.RelationId
   }
   | {
-    deployment: Fqn
+    deployment: aux.DeploymentFqn<A>
     property?: string
   }
   | {
-    view: ViewId
+    view: aux.StrictViewId<A>
   }
 
-export interface LikeC4DiagramEventHandlers {
+export interface LikeC4DiagramEventHandlers<A extends aux.Any> {
   onChange?: OnChange | null | undefined
-  onNavigateTo?: OnNavigateTo | null | undefined
-  onNodeClick?: OnNodeClick | null | undefined
-  onNodeContextMenu?: OnNodeClick | null | undefined
+  onNavigateTo?: OnNavigateTo<A> | null | undefined
+  onNodeClick?: OnNodeClick<A> | null | undefined
+  onNodeContextMenu?: OnNodeClick<A> | null | undefined
   onCanvasContextMenu?: OnCanvasClick | null | undefined
-  onEdgeClick?: OnEdgeClick | null | undefined
-  onEdgeContextMenu?: OnEdgeClick | null | undefined
+  onEdgeClick?: OnEdgeClick<A> | null | undefined
+  onEdgeContextMenu?: OnEdgeClick<A> | null | undefined
   onCanvasClick?: OnCanvasClick | null | undefined
   onCanvasDblClick?: OnCanvasClick | null | undefined
 
   // if set, will render a burger menu icon in the top left corner
   onBurgerMenuClick?: null | undefined | (() => void)
 
-  onOpenSource?: null | undefined | ((params: OpenSourceParams) => void)
+  onOpenSource?: null | undefined | ((params: OpenSourceParams<A>) => void)
 }

package/src/LikeC4Diagram.tsx

@@ -1,6 +1,6 @@
+import type { Any } from '@likec4/core/types'
 import { ReactFlowProvider as XYFlowProvider } from '@xyflow/react'
 import { type PropsWithChildren, useRef } from 'react'
-import { isEmpty } from 'remeda'
 import {
   DiagramEventHandlers,
   DiagramFeatures,
@@ -15,11 +15,14 @@ import { LikeC4CustomColors } from './LikeC4CustomColors'
 import { type LikeC4DiagramEventHandlers, type LikeC4DiagramProperties } from './LikeC4Diagram.props'
 import { LikeC4DiagramXYFlow } from './likec4diagram/DiagramXYFlow'
 import type { Types } from './likec4diagram/types'
-import { useLikeC4Model } from './likec4model'
 import { DiagramActorProvider } from './state/DiagramActorProvider'
 
-export type LikeC4DiagramProps = PropsWithChildren<LikeC4DiagramProperties & LikeC4DiagramEventHandlers>
-export function LikeC4Diagram({
+export type LikeC4DiagramProps<A extends Any = Any> = PropsWithChildren<
+  & LikeC4DiagramProperties<A>
+  & LikeC4DiagramEventHandlers<A>
+>
+
+export function LikeC4Diagram<A extends Any = Any>({
   onCanvasClick,
   onCanvasContextMenu,
   onCanvasDblClick,
@@ -39,6 +42,7 @@ export function LikeC4Diagram({
   pannable = true,
   zoomable = true,
   background = 'dots',
+  enableElementTags = true,
   enableFocusMode = false,
   enableElementDetails = false,
   enableRelationshipDetails = enableElementDetails,
@@ -59,9 +63,9 @@ export function LikeC4Diagram({
   renderControls,
   where,
   reactFlowProps = {},
+  renderNodes,
   children,
-}: LikeC4DiagramProps) {
-  const hasLikec4model = !!useLikeC4Model()
+}: LikeC4DiagramProps<A>) {
   const initialRef = useRef<{
     defaultNodes: Types.Node[]
     defaultEdges: Types.Edge[]
@@ -69,8 +73,6 @@ export function LikeC4Diagram({
     initialHeight: number
   }>(null)
 
-  const isDynamicView = view.__ === 'dynamic'
-
   if (initialRef.current == null) {
     initialRef.current = {
       defaultEdges: [],
@@ -103,13 +105,13 @@ export function LikeC4Diagram({
               enableRelationshipBrowser,
               enableSearch,
               enableNavigationButtons: showNavigationButtons && !!onNavigateTo,
-              enableDynamicViewWalkthrough: isDynamicView && enableDynamicViewWalkthrough,
+              enableDynamicViewWalkthrough: view._type === 'dynamic' && enableDynamicViewWalkthrough,
               enableEdgeEditing: experimentalEdgeEditing,
               enableNotations: showNotations,
               enableVscode: !!onOpenSource,
               enableControls: controls,
               enableViewTitle: showDiagramTitle,
-              enableLikeC4Model: hasLikec4model,
+              enableElementTags,
             }}
           >
             <DiagramEventHandlers
@@ -128,27 +130,26 @@ export function LikeC4Diagram({
               }}>
               <ReduceGraphicsContext reduceGraphics={isReducedGraphicsMode}>
                 <RootContainer className={className} reduceGraphics={isReducedGraphicsMode}>
-                  {!isEmpty(view.customColorDefinitions) && (
-                    <LikeC4CustomColors customColors={view.customColorDefinitions} />
-                  )}
+                  <LikeC4CustomColors />
                   <XYFlowProvider
                     fitView={fitView}
                     {...initialRef.current}
                   >
                     <DiagramActorProvider
-                      input={{
-                        view,
-                        pannable,
-                        zoomable,
-                        nodesSelectable,
-                        fitViewPadding,
-                      }}>
+                      view={view}
+                      zoomable={zoomable}
+                      pannable={pannable}
+                      fitViewPadding={fitViewPadding}
+                      nodesSelectable={nodesSelectable}
+                      where={where ?? null}
+                    >
                       <ControlsCustomLayoutProvider value={renderControls ?? null}>
                         <LikeC4DiagramXYFlow
                           nodesDraggable={nodesDraggable}
                           nodesSelectable={nodesSelectable}
                           background={background}
                           reactFlowProps={reactFlowProps}
+                          renderNodes={renderNodes}
                         >
                           {children}
                         </LikeC4DiagramXYFlow>

package/src/LikeC4ModelProvider.tsx

@@ -1,18 +1,19 @@
-import type { LikeC4Model } from '@likec4/core'
+import type { LikeC4Model } from '@likec4/core/model'
+import type { Any, Unknown } from '@likec4/core/types'
 import { type PropsWithChildren } from 'react'
 import { LikeC4ModelContext } from './likec4model/LikeC4ModelContext'
 
-export type LikeC4ModelProviderProps = PropsWithChildren<{
-  likec4model: LikeC4Model
+export type LikeC4ModelProviderProps<A extends Any> = PropsWithChildren<{
+  likec4model: LikeC4Model<A>
 }>
 
 /**
  * Ensures LikeC4Model context
  */
-export function LikeC4ModelProvider({
+export function LikeC4ModelProvider<A extends Any = Unknown>({
   children,
-  likec4model
-}: LikeC4ModelProviderProps) {
+  likec4model,
+}: LikeC4ModelProviderProps<A>) {
   return (
     <LikeC4ModelContext.Provider value={likec4model}>
       {children}

package/src/StaticLikeC4Diagram.tsx

@@ -1,8 +1,9 @@
+import type * as aux from '@likec4/core/types/aux'
 import { LikeC4Diagram } from './LikeC4Diagram'
 import type { LikeC4DiagramProperties } from './LikeC4Diagram.props'
 
-export type StaticLikeC4DiagramProps = Pick<
-  LikeC4DiagramProperties,
+export type StaticLikeC4DiagramProps<A extends aux.Any> = Pick<
+  LikeC4DiagramProperties<A>,
   | 'view'
   | 'className'
   | 'fitView'
@@ -11,23 +12,24 @@ export type StaticLikeC4DiagramProps = Pick<
   | 'enableElementDetails'
   | 'enableRelationshipDetails'
   | 'enableRelationshipBrowser'
+  | 'enableElementTags'
   | 'reduceGraphics'
   | 'initialWidth'
   | 'initialHeight'
   | 'renderIcon'
+  | 'renderNodes'
   | 'where'
 >
 
-export function StaticLikeC4Diagram({
+export function StaticLikeC4Diagram<A extends aux.Any = aux.UnknownLayouted>({
   view,
   fitView = true,
   fitViewPadding = '8px',
-  enableElementDetails = false,
   enableRelationshipDetails = false,
   enableRelationshipBrowser = enableRelationshipDetails,
   background = 'transparent',
   ...rest
-}: StaticLikeC4DiagramProps) {
+}: StaticLikeC4DiagramProps<A>) {
   return (
     <LikeC4Diagram
       view={view}
@@ -40,7 +42,7 @@ export function StaticLikeC4Diagram({
       background={background}
       showDiagramTitle={false}
       showNotations={false}
-      enableElementDetails={enableElementDetails}
+      enableElementDetails={false}
       enableRelationshipDetails={enableRelationshipDetails}
       enableRelationshipBrowser={enableRelationshipBrowser}
       enableDynamicViewWalkthrough={false}
@@ -50,6 +52,7 @@ export function StaticLikeC4Diagram({
       enableSearch={false}
       nodesSelectable={false}
       nodesDraggable={false}
+      enableElementTags={false}
       {...rest}
     />
   )

package/src/base/Background.tsx

@@ -1,14 +1,10 @@
 import { nonexhaustive } from '@likec4/core'
 import { type BackgroundProps, Background as XYFlowBackground, BackgroundVariant } from '@xyflow/react'
-import type { OverrideProperties } from 'type-fest'
 
 export type XYBackgroundVariant = 'dots' | 'lines' | 'cross'
 export type XYBackground =
   | XYBackgroundVariant
   | BackgroundProps
-// | OverrideProperties<BackgroundProps, {
-//   variant: XYBackgroundVariant
-// }>
 
 export type XYBackgroundProps = {
   background: XYBackground

package/src/base/const.ts

@@ -6,4 +6,4 @@ export const ZIndexes = {
 } as const
 
 export const MinZoom = 0.05
-export const MaxZoom = 2
+export const MaxZoom = 3

package/src/base/index.ts

@@ -1,10 +1,11 @@
 export { BaseXYFlow, type BaseXYFlowProps } from './BaseXYFlow'
 
 export {
-  Base,
   type EdgeProps,
   type NodeProps,
   type NonOptional,
   type ReactFlowEdge,
   type ReactFlowNode,
 } from './types'
+
+export * as Base from './types.Base'

package/src/base/primitives/compound/CompoundActionButton.tsx

@@ -1,17 +1,21 @@
 import { css, cx } from '@likec4/styles/css'
+import { Box } from '@likec4/styles/jsx'
 import { actionBtn } from '@likec4/styles/recipes'
-import { ActionIcon, Box } from '@mantine/core'
+import { ActionIcon } from '@mantine/core'
 import { useDebouncedValue } from '@mantine/hooks'
 import { IconZoomScan } from '@tabler/icons-react'
 import * as m from 'motion/react-m'
+import type { Simplify } from 'type-fest'
 import { stopPropagation } from '../../../utils/xyflow'
 import type { NodeProps } from '../../types'
 import { compoundActionBtn } from './actionbtns.css'
 
-type CompoundActionButtonProps = NodeProps & {
-  icon?: React.ReactNode
-  onClick: (e: React.MouseEvent) => void
-}
+type CompoundActionButtonProps = Simplify<
+  NodeProps<{}> & {
+    icon?: React.ReactNode
+    onClick: (e: React.MouseEvent) => void
+  }
+>
 
 export function CompoundActionButton({
   data: {

package/src/base/primitives/compound/CompoundDetailsButton.tsx

@@ -1,17 +1,21 @@
 import { css, cx } from '@likec4/styles/css'
+import { Box } from '@likec4/styles/jsx'
 import { actionBtn } from '@likec4/styles/recipes'
-import { ActionIcon, Box } from '@mantine/core'
+import { ActionIcon } from '@mantine/core'
 import { useDebouncedValue } from '@mantine/hooks'
 import { IconId } from '@tabler/icons-react'
 import * as m from 'motion/react-m'
+import type { Simplify } from 'type-fest'
 import { stopPropagation } from '../../../utils/xyflow'
 import type { NodeProps } from '../../types'
 import { compoundActionBtn } from './actionbtns.css'
 
-type CompoundDetailsButtonProps = NodeProps & {
-  icon?: React.ReactNode
-  onClick: (e: React.MouseEvent) => void
-}
+type CompoundDetailsButtonProps = Simplify<
+  NodeProps<{}> & {
+    icon?: React.ReactNode
+    onClick: (e: React.MouseEvent) => void
+  }
+>
 
 export function CompoundDetailsButton({
   data: {

package/src/base/primitives/compound/CompoundNodeContainer.tsx

@@ -1,4 +1,4 @@
-import type { DiagramNode } from '@likec4/core'
+import type { Color, ElementStyle } from '@likec4/core/types'
 import { css, cx } from '@likec4/styles/css'
 import { type HTMLMotionProps, m } from 'motion/react'
 import { type PropsWithChildren } from 'react'
@@ -7,12 +7,11 @@ import { useIsReducedGraphics } from '../../../hooks/useReducedGraphics'
 import type { NodeProps } from '../../types'
 import * as styles from './CompoundNodeContainer.css'
 
-type RequiredData = Pick<
-  DiagramNode,
-  | 'color'
-  | 'depth'
-  | 'style'
->
+export type RequiredData = {
+  color: Color
+  depth: number
+  style: ElementStyle
+}
 
 type CompoundNodeContainerProps =
   & Omit<HTMLMotionProps<'div'>, 'children'>
@@ -29,6 +28,7 @@ export function CompoundNodeContainer({
       ...data
     },
   },
+  className,
   children,
   style,
   ...rest
@@ -67,6 +67,7 @@ export function CompoundNodeContainer({
         }),
         classes.root,
         'likec4-compound-node',
+        className,
       )}
       initial={false}
       data-likec4-hovered={isHovered}

package/src/base/primitives/compound/CompoundTitle.tsx

@@ -1,6 +1,7 @@
-import type { DiagramNode } from '@likec4/core'
+import type { DiagramNode } from '@likec4/core/types'
 import { css, cx } from '@likec4/styles/css'
-import { Box, Text } from '@mantine/core'
+import { Box } from '@likec4/styles/jsx'
+import { Text } from '@mantine/core'
 import { IconRenderer } from '../../../context'
 import type { NodeProps } from '../../types'
 

package/src/base/primitives/customEdge.ts

@@ -29,6 +29,6 @@ export const edgePropsEqual = <P extends Record<string, unknown> = Base.EdgeData
 
 export function customEdge<P extends Record<string, unknown> = Base.NodeData>(
   Edge: FunctionComponent<EdgeProps<P>>,
-) {
+): FunctionComponent<EdgeProps<P>> {
   return memo(Edge, edgePropsEqual)
 }

package/src/base/primitives/{customNode.ts → customNode.tsx}

@@ -1,6 +1,7 @@
 import { deepEqual as eq } from 'fast-equals'
 import { type FunctionComponent, memo } from 'react'
 import type { Base, NodeProps } from '../types'
+import { DefaultHandles } from './NodeHandles'
 
 export const nodePropsEqual = <P extends Record<string, unknown> = Base.NodeData>(
   prev: NodeProps<P>,
@@ -18,8 +19,15 @@ export const nodePropsEqual = <P extends Record<string, unknown> = Base.NodeData
   && eq(prev.data, next.data)
 )
 
-export function customNode<P extends Record<string, unknown> = Base.NodeData>(
-  Node: FunctionComponent<NodeProps<P>>,
+export function customNode<P extends Record<string, unknown> = {}, NodeType extends string = string>(
+  Node: FunctionComponent<NodeProps<P, NodeType>>,
 ) {
-  return memo(Node, nodePropsEqual)
+  const NodeComponent = memo((props: NodeProps<P, NodeType>) => (
+    <>
+      <Node {...props} />
+      <DefaultHandles />
+    </>
+  ), nodePropsEqual)
+  NodeComponent.displayName = 'Node'
+  return NodeComponent
 }

package/src/base/primitives/edge/EdgeContainer.tsx

@@ -1,4 +1,5 @@
-import { type DiagramEdge, invariant } from '@likec4/core'
+import { invariant } from '@likec4/core'
+import type { DiagramEdge } from '@likec4/core/types'
 import { css, cx } from '@likec4/styles/css'
 import { type PropsWithChildren } from 'react'
 import type { UndefinedOnPartialDeep } from 'type-fest'

package/src/base/primitives/edge/EdgeLabel.css.ts

@@ -67,6 +67,7 @@ export const labelsva = sva({
   slots: ['root', 'stepNumber', 'labelContents', 'labelText', 'labelTechnology'],
   base: {
     root: {
+      pointerEvents: 'all',
       fontFamily: 'likec4.relation',
       padding: '3px 5px 5px 5px',
       display: 'flex',

package/src/base/primitives/edge/EdgeLabel.tsx

@@ -1,8 +1,9 @@
-import { type DiagramEdge, extractStep, isStepEdgeId } from '@likec4/core'
+import { extractStep, isStepEdgeId } from '@likec4/core'
+import type { DiagramEdge } from '@likec4/core/types'
 import { cx } from '@likec4/styles/css'
 import { type BoxProps, Box } from '@likec4/styles/jsx'
 import { Text } from '@mantine/core'
-import { type PropsWithChildren } from 'react'
+import { type PropsWithChildren, forwardRef } from 'react'
 import { isTruthy } from 'remeda'
 import type { UndefinedOnPartialDeep } from 'type-fest'
 import type { EdgeProps } from '../../types'
@@ -22,26 +23,29 @@ type EdgeLabelProps = PropsWithChildren<
   }
 >
 
-export function EdgeLabel({
-  edgeProps: {
-    id,
-    data: {
-      label,
-      technology,
+export const EdgeLabel = forwardRef<HTMLDivElement, EdgeLabelProps>((
+  {
+    edgeProps: {
+      id,
+      data: {
+        label,
+        technology,
+      },
     },
+    className,
+    style,
+    children,
+    ...rest
   },
-  className,
-  style,
-  children,
-  ...rest
-}: EdgeLabelProps) {
+  ref,
+) => {
   const stepNum = isStepEdgeId(id) ? extractStep(id) : null
   const classes = labelsva({
     isStepEdge: stepNum !== null,
   })
 
   return (
-    <Box className={cx(classes.root!, className)} {...rest}>
+    <Box ref={ref} className={cx(classes.root!, className)} {...rest}>
       {stepNum !== null && (
         <Box className={classes.stepNumber!}>
           {stepNum}
@@ -62,4 +66,5 @@ export function EdgeLabel({
       </Box>
     </Box>
   )
-}
+})
+EdgeLabel.displayName = 'EdgeLabel'

package/src/base/primitives/edge/EdgeLabelContainer.tsx

@@ -1,4 +1,4 @@
-import { type DiagramEdge } from '@likec4/core'
+import type { DiagramEdge } from '@likec4/core/types'
 import { css, cx } from '@likec4/styles/css'
 import { EdgeLabelRenderer } from '@xyflow/react'
 import { type HTMLAttributes } from 'react'

package/src/base/primitives/edge/EdgeMarkers.tsx

@@ -1,4 +1,5 @@
-import { type RelationshipArrowType, nonexhaustive } from '@likec4/core'
+import { nonexhaustive } from '@likec4/core'
+import type { RelationshipArrowType } from '@likec4/core/types'
 import type { SVGProps } from 'react'
 
 const Open = (props: SVGProps<SVGMarkerElement>) => (