@likec4/diagram 1.34.2 → 1.35.0

package/src/navigationpanel/walkthrough/ActiveWalkthroughControls.tsx

@@ -0,0 +1,160 @@
+import { css } from '@likec4/styles/css'
+import { Box } from '@likec4/styles/jsx'
+import { Badge, Button, Portal } from '@mantine/core'
+import {
+  IconPlayerPlayFilled,
+  IconPlayerSkipBackFilled,
+  IconPlayerSkipForwardFilled,
+  IconPlayerStopFilled,
+} from '@tabler/icons-react'
+import { AnimatePresence } from 'motion/react'
+import * as m from 'motion/react-m'
+import { isTruthy } from 'remeda'
+import { useMantinePortalProps } from '../../hooks'
+import { useDiagram, useDiagramContext } from '../../hooks/useDiagram'
+import { Tooltip } from '../_common'
+import { useNavigationActor } from '../hooks'
+
+const TriggerWalkthroughButton = Button.withProps({
+  // Button is polymorphic, but we dont want it to inherit the motion props
+  component: m.button as any as 'button',
+  // @ts-expect-error
+  layoutId: 'trigger-dynamic-walkthrough',
+  variant: 'filled',
+  size: 'xs',
+  fw: '500',
+})
+
+export const StartWalkthroughButton = () => {
+  const diagram = useDiagram()
+  const actor = useNavigationActor()
+  return (
+    <Tooltip label="Start Dynamic View Walkthrough">
+      <TriggerWalkthroughButton
+        onClick={e => {
+          e.stopPropagation()
+          actor.closeDropdown()
+          diagram.startWalkthrough()
+        }}
+        rightSection={<IconPlayerPlayFilled size={10} />}
+      >
+        Start
+      </TriggerWalkthroughButton>
+    </Tooltip>
+  )
+}
+
+const PrevNextButton = Button.withProps({
+  // Button is polymorphic, but we dont want it to inherit the motion props
+  component: m.button as any as 'button',
+  variant: 'light',
+  size: 'xs',
+  fw: '500',
+})
+
+const ParallelFrame = () => {
+  const { portalProps } = useMantinePortalProps()
+  return (
+    <Portal {...portalProps}>
+      <Box
+        css={{
+          position: 'absolute',
+          margin: 0,
+          padding: 0,
+          top: 0,
+          left: 0,
+          width: '100%',
+          height: '100%',
+          border: `2px solid`,
+          borderColor: 'mantine.colors.orange[6]',
+          pointerEvents: 'none',
+          md: {
+            borderWidth: 4,
+          },
+        }}
+      >
+      </Box>
+    </Portal>
+  )
+}
+
+export const ActiveWalkthroughControls = () => {
+  const diagram = useDiagram()
+  const {
+    isParallel,
+    hasNext,
+    hasPrevious,
+    currentStep,
+    totalSteps,
+  } = useDiagramContext(s => {
+    const currentStepIndex = s.xyedges.findIndex(e => e.id === s.activeWalkthrough?.stepId)
+    return ({
+      isParallel: isTruthy(s.activeWalkthrough?.parallelPrefix),
+      hasNext: currentStepIndex < s.xyedges.length - 1,
+      hasPrevious: currentStepIndex > 0,
+      currentStep: currentStepIndex + 1,
+      totalSteps: s.xyedges.length,
+    })
+  })
+
+  return (
+    <AnimatePresence propagate>
+      <TriggerWalkthroughButton
+        variant="light"
+        color="orange"
+        mr={'sm'}
+        onClick={e => {
+          e.stopPropagation()
+          diagram.stopWalkthrough()
+        }}
+        rightSection={<IconPlayerStopFilled size={10} />}
+      >
+        Stop
+      </TriggerWalkthroughButton>
+
+      <PrevNextButton
+        key="prev"
+        disabled={!hasPrevious}
+        onClick={() => diagram.walkthroughStep('previous')}
+        leftSection={<IconPlayerSkipBackFilled size={10} />}
+      >
+        Previous
+      </PrevNextButton>
+
+      <Badge
+        component={m.div}
+        size="md"
+        radius="sm"
+        // fw={500}
+        variant={isParallel ? 'gradient' : 'transparent'}
+        gradient={{ from: 'red', to: 'orange', deg: 90 }}
+        rightSection={
+          <m.div
+            className={css({
+              fontSize: 'xxs',
+              display: isParallel ? 'block' : 'none',
+            })}>
+            parallel
+          </m.div>
+        }
+        className={css({
+          alignItems: 'baseline',
+        })}
+      >
+        <m.span>
+          {currentStep} / {totalSteps}
+        </m.span>
+      </Badge>
+
+      <PrevNextButton
+        key="next"
+        disabled={!hasNext}
+        onClick={() => diagram.walkthroughStep('next')}
+        rightSection={<IconPlayerSkipForwardFilled size={10} />}
+      >
+        Next
+      </PrevNextButton>
+      {isParallel && <ParallelFrame />}
+    </AnimatePresence>
+  )
+}

package/src/navigationpanel/walkthrough/index.tsx

@@ -0,0 +1 @@
+export { ActiveWalkthroughControls, StartWalkthroughButton } from './ActiveWalkthroughControls'

package/src/state/DiagramActorProvider.tsx

@@ -1,20 +1,25 @@
 import type { DiagramView, WhereOperator } from '@likec4/core/types'
+import { useCustomCompareEffect, useDeepCompareEffect } from '@react-hookz/web'
 import { useActorRef, useSelector } from '@xstate/react'
 import { useStoreApi } from '@xyflow/react'
-import { shallowEqual } from 'fast-equals'
-import { type PropsWithChildren, useEffect, useRef } from 'react'
+import { deepEqual, shallowEqual } from 'fast-equals'
+import { type PropsWithChildren, useEffect, useRef, useState } from 'react'
+import { ErrorBoundary } from '../components/ErrorFallback'
 import { useDiagramEventHandlersRef } from '../context/DiagramEventHandlers'
 import { DiagramFeatures, useEnabledFeatures } from '../context/DiagramFeatures'
 import { DiagramActorContextProvider } from '../hooks/safeContext'
-import type { PaddingWithUnit } from '../LikeC4Diagram.props'
+import { useCurrentViewId } from '../hooks/useCurrentViewId'
+import type { ViewPadding } from '../LikeC4Diagram.props'
 import type { Types } from '../likec4diagram/types'
 import { useViewToNodesEdges } from '../likec4diagram/useViewToNodesEdges'
+import { CurrentViewModelContext } from '../likec4model/LikeC4ModelContext'
+import { useLikeC4Model } from '../likec4model/useLikeC4Model'
 import { type DiagramMachine, diagramMachine } from './diagram-machine'
 import { syncManualLayoutActorLogic } from './syncManualLayoutActor'
 import type { DiagramActorSnapshot } from './types'
 
 const selectToggledFeatures = (state: DiagramActorSnapshot) => {
-  if (state.context.features.enableReadOnly) {
+  if (state.context.features.enableReadOnly || state.context.activeWalkthrough) {
     return {
       ...state.context.toggledFeatures,
       enableReadOnly: true,
@@ -35,7 +40,7 @@ export function DiagramActorProvider({
   view: DiagramView
   zoomable: boolean
   pannable: boolean
-  fitViewPadding: PaddingWithUnit
+  fitViewPadding: ViewPadding
   nodesSelectable: boolean
   where: WhereOperator | null
 }>) {
@@ -91,13 +96,21 @@ export function DiagramActorProvider({
   )
 
   const features = useEnabledFeatures()
-  useEffect(() => {
-    actorRef.send({ type: 'update.features', features })
-  }, [features])
+  useCustomCompareEffect(
+    () => {
+      actorRef.send({ type: 'update.features', features })
+    },
+    [features],
+    shallowEqual,
+  )
 
-  useEffect(() => {
-    actorRef.send({ type: 'update.inputs', inputs: { zoomable, pannable, fitViewPadding, nodesSelectable } })
-  }, [zoomable, pannable, fitViewPadding, nodesSelectable])
+  useCustomCompareEffect(
+    () => {
+      actorRef.send({ type: 'update.inputs', inputs: { zoomable, pannable, fitViewPadding, nodesSelectable } })
+    },
+    [zoomable, pannable, fitViewPadding, nodesSelectable],
+    deepEqual,
+  )
 
   const { xyedges, xynodes } = useViewToNodesEdges({
     view,
@@ -114,8 +127,43 @@ export function DiagramActorProvider({
   return (
     <DiagramActorContextProvider value={actorRef}>
       <DiagramFeatures overrides={toggledFeatures}>
-        {children}
+        <ErrorBoundary>
+          <CurrentViewModelProvider>
+            {children}
+          </CurrentViewModelProvider>
+        </ErrorBoundary>
       </DiagramFeatures>
     </DiagramActorContextProvider>
   )
 }
+
+function CurrentViewModelProvider({
+  children,
+}: PropsWithChildren) {
+  const viewId = useCurrentViewId()
+  const likec4model = useLikeC4Model()
+  const [viewmodel, setViewmodel] = useState(() => likec4model.view(viewId))
+
+  useEffect(() => {
+    setViewmodel(current => {
+      const nextviewmodel = likec4model.findView(viewId)
+      if (!nextviewmodel) {
+        console.error(`View "${viewId}" not found in likec4model, current viewmodel: ${current.id}`, {
+          currentViewModel: current,
+          likec4model,
+        })
+        return current
+      }
+      return nextviewmodel
+    })
+  }, [likec4model, viewId])
+
+  if (!viewmodel.isDiagram()) {
+    console.warn(`View "${viewId}" is not diagram.\nMake sure you have LikeC4ModelProvider with layouted model.`)
+  }
+  return (
+    <CurrentViewModelContext.Provider value={viewmodel}>
+      {children}
+    </CurrentViewModelContext.Provider>
+  )
+}

package/src/state/diagram-machine.ts

@@ -46,7 +46,7 @@ import {
 import { MinZoom } from '../base/const'
 import { Base } from '../base/types'
 import { type EnabledFeatures, type FeatureName, AllDisabled } from '../context/DiagramFeatures'
-import type { OpenSourceParams, PaddingWithUnit } from '../LikeC4Diagram.props'
+import type { OpenSourceParams, ViewPadding } from '../LikeC4Diagram.props'
 import type { Types } from '../likec4diagram/types'
 import { createLayoutConstraints } from '../likec4diagram/useLayoutConstraints'
 import { overlaysActorLogic } from '../overlays/overlaysActor'
@@ -85,7 +85,7 @@ export interface Input {
   xystore: XYStoreApi
   zoomable: boolean
   pannable: boolean
-  fitViewPadding: PaddingWithUnit
+  fitViewPadding: ViewPadding
   nodesSelectable: boolean
 }
 

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

@@ -1,34 +0,0 @@
-import { SlotRecipeRuntimeFn } from '@likec4/styles/types';
-export declare const iconSize = "--icon-size";
-export declare const elementIcon: string;
-export declare const elementTitle: SlotRecipeRuntimeFn<"root" | "title" | "technology" | "description" | "textContainer", {
-    hasIcon: {
-        false: {};
-        true: {
-            root: {
-                gap: "16px";
-            };
-            textContainer: {
-                minWidth: "calc(50% + var(--icon-size))";
-                alignItems: "flex-start";
-            };
-            title: {
-                textAlign: "left";
-            };
-            description: {
-                textAlign: "left";
-            };
-            technology: {
-                textAlign: "left";
-            };
-        };
-    };
-    hasDescription: {
-        false: {};
-        true: {};
-    };
-    hasTechnology: {
-        false: {};
-        true: {};
-    };
-}>;

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

@@ -1,201 +0,0 @@
-import { sva, css } from '@likec4/styles/css';
-
-const iconSize = "--icon-size";
-const title = css.raw({
-  textStyle: "likec4.node.primary",
-  flex: "0 0 auto",
-  textAlign: "center",
-  color: "likec4.palette.hiContrast"
-});
-const description = css.raw({
-  flexGrow: "0",
-  flexShrink: "1",
-  textStyle: "likec4.node.secondary",
-  color: "likec4.palette.loContrast",
-  textAlign: "center",
-  textOverflow: "ellipsis",
-  overflow: "hidden",
-  _shapeSizeXs: {
-    display: "none"
-  },
-  _smallZoom: {
-    display: "none"
-  }
-});
-const technology = css.raw({
-  flex: "0 0 auto",
-  textStyle: "likec4.node.secondary",
-  color: "likec4.palette.loContrast",
-  fontSize: `calc(var(--likec4-text-size) * 0.635)`,
-  lineHeight: 1.125,
-  textAlign: "center",
-  textWrap: "balance",
-  opacity: 0.92,
-  _whenHovered: {
-    opacity: 1
-  },
-  _shapeSizeXs: {
-    display: "none"
-  },
-  _shapeSizeSm: {
-    display: "none"
-  },
-  _smallZoom: {
-    display: "none"
-  }
-});
-const varIconSize = `var(${iconSize})`;
-const elementIcon = css({
-  flex: `0 0 ${varIconSize}`,
-  height: varIconSize,
-  width: varIconSize,
-  display: "flex",
-  alignSelf: "flex-start",
-  alignItems: "center",
-  justifyContent: "center",
-  mixBlendMode: {
-    base: "hard-light",
-    _reduceGraphicsOnPan: "normal"
-  },
-  [`& svg, & img`]: {
-    width: "100%",
-    height: "auto",
-    maxHeight: "100%",
-    pointerEvents: "none",
-    filter: {
-      base: [
-        "drop-shadow(0 0 3px rgb(0 0 0 / 12%))",
-        "drop-shadow(0 1px 8px rgb(0 0 0 / 8%))",
-        "drop-shadow(1px 1px 16px rgb(0 0 0 / 3%))"
-      ],
-      _reduceGraphicsOnPan: "none"
-    }
-  },
-  [`& img`]: {
-    objectFit: "contain"
-  }
-});
-const elementTitle = sva({
-  slots: ["root", "textContainer", "title", "description", "technology"],
-  base: {
-    root: {
-      position: "relative",
-      flex: "1",
-      height: "fit-content",
-      width: "fit-content",
-      maxHeight: "100%",
-      maxWidth: "100%",
-      margin: "0 auto",
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "center",
-      flexDirection: "row",
-      paddingTop: "var(--likec4-spacing)",
-      paddingBottom: "var(--likec4-spacing)",
-      paddingLeft: "calc(var(--likec4-spacing) + 8px)",
-      paddingRight: "calc(var(--likec4-spacing) + 8px)",
-      overflow: "hidden",
-      pointerEvents: "none",
-      gap: "12px",
-      _shapeQueue: {
-        paddingLeft: "46px",
-        paddingRight: "16px"
-      },
-      _shapeMobile: {
-        paddingLeft: "46px",
-        paddingRight: "16px"
-      },
-      _shapeCylinder: {
-        paddingTop: "30px"
-      },
-      _shapeStorage: {
-        paddingTop: "30px"
-      },
-      _shapeBrowser: {
-        paddingTop: "32px",
-        paddingBottom: "28px"
-      },
-      _shapeSizeXs: {
-        [iconSize]: "24px"
-      },
-      _shapeSizeSm: {
-        [iconSize]: "36px"
-      },
-      _shapeSizeMd: {
-        [iconSize]: "60px"
-      },
-      _shapeSizeLg: {
-        [iconSize]: "82px",
-        gap: "16px"
-      },
-      _shapeSizeXl: {
-        [iconSize]: "90px",
-        gap: "16px"
-      }
-    },
-    textContainer: {
-      height: "fit-content",
-      width: "fit-content",
-      maxHeight: "100%",
-      maxWidth: "100%",
-      flex: "0 1 auto",
-      display: "flex",
-      flexDirection: "column",
-      alignItems: "stretch",
-      justifyContent: "center",
-      flexWrap: "nowrap",
-      overflow: "hidden",
-      gap: "8px"
-    },
-    title,
-    description,
-    technology
-  },
-  variants: {
-    hasIcon: {
-      false: {},
-      true: {
-        root: {
-          gap: "16px"
-        },
-        textContainer: {
-          minWidth: `calc(50% + ${varIconSize})`,
-          alignItems: "flex-start"
-        },
-        title: {
-          textAlign: "left"
-        },
-        description: {
-          textAlign: "left"
-        },
-        technology: {
-          textAlign: "left"
-        }
-      }
-    },
-    hasDescription: {
-      false: {},
-      true: {}
-    },
-    hasTechnology: {
-      false: {},
-      true: {}
-    }
-  },
-  compoundVariants: [
-    {
-      hasDescription: true,
-      hasTechnology: true,
-      css: {
-        textContainer: {
-          gap: "6px"
-        }
-      }
-    }
-  ],
-  defaultVariants: {
-    hasIcon: false
-  }
-});
-
-export { elementIcon, elementTitle, iconSize };

package/dist/node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconAlertTriangle.js

@@ -1,13 +0,0 @@
-import createReactComponent from '../createReactComponent.js';
-
-/**
- * @license @tabler/icons-react v3.31.0 - MIT
- *
- * This source code is licensed under the MIT license.
- * See the LICENSE file in the root directory of this source tree.
- */
-
-
-var IconAlertTriangle = createReactComponent("outline", "alert-triangle", "IconAlertTriangle", [["path", { "d": "M12 9v4", "key": "svg-0" }], ["path", { "d": "M10.363 3.591l-8.106 13.534a1.914 1.914 0 0 0 1.636 2.871h16.214a1.914 1.914 0 0 0 1.636 -2.87l-8.106 -13.536a1.914 1.914 0 0 0 -3.274 0z", "key": "svg-1" }], ["path", { "d": "M12 16h.01", "key": "svg-2" }]]);
-
-export { IconAlertTriangle as default };

package/dist/node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconArrowDownRight.js

@@ -1,13 +0,0 @@
-import createReactComponent from '../createReactComponent.js';
-
-/**
- * @license @tabler/icons-react v3.31.0 - MIT
- *
- * This source code is licensed under the MIT license.
- * See the LICENSE file in the root directory of this source tree.
- */
-
-
-var IconArrowDownRight = createReactComponent("outline", "arrow-down-right", "IconArrowDownRight", [["path", { "d": "M7 7l10 10", "key": "svg-0" }], ["path", { "d": "M17 8l0 9l-9 0", "key": "svg-1" }]]);
-
-export { IconArrowDownRight as default };

package/dist/node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconArrowRight.js

@@ -1,13 +0,0 @@
-import createReactComponent from '../createReactComponent.js';
-
-/**
- * @license @tabler/icons-react v3.31.0 - MIT
- *
- * This source code is licensed under the MIT license.
- * See the LICENSE file in the root directory of this source tree.
- */
-
-
-var IconArrowRight = createReactComponent("outline", "arrow-right", "IconArrowRight", [["path", { "d": "M5 12l14 0", "key": "svg-0" }], ["path", { "d": "M13 18l6 -6", "key": "svg-1" }], ["path", { "d": "M13 6l6 6", "key": "svg-2" }]]);
-
-export { IconArrowRight as default };

package/dist/node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconBrowser.js

@@ -1,13 +0,0 @@
-import createReactComponent from '../createReactComponent.js';
-
-/**
- * @license @tabler/icons-react v3.31.0 - MIT
- *
- * This source code is licensed under the MIT license.
- * See the LICENSE file in the root directory of this source tree.
- */
-
-
-var IconBrowser = createReactComponent("outline", "browser", "IconBrowser", [["path", { "d": "M4 8h16", "key": "svg-0" }], ["path", { "d": "M4 4m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z", "key": "svg-1" }], ["path", { "d": "M8 4v4", "key": "svg-2" }]]);
-
-export { IconBrowser as default };

package/dist/node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconCheck.js

@@ -1,13 +0,0 @@
-import createReactComponent from '../createReactComponent.js';
-
-/**
- * @license @tabler/icons-react v3.31.0 - MIT
- *
- * This source code is licensed under the MIT license.
- * See the LICENSE file in the root directory of this source tree.
- */
-
-
-var IconCheck = createReactComponent("outline", "check", "IconCheck", [["path", { "d": "M5 12l5 5l10 -10", "key": "svg-0" }]]);
-
-export { IconCheck as default };

package/dist/node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronLeft.js

@@ -1,13 +0,0 @@
-import createReactComponent from '../createReactComponent.js';
-
-/**
- * @license @tabler/icons-react v3.31.0 - MIT
- *
- * This source code is licensed under the MIT license.
- * See the LICENSE file in the root directory of this source tree.
- */
-
-
-var IconChevronLeft = createReactComponent("outline", "chevron-left", "IconChevronLeft", [["path", { "d": "M15 6l-6 6l6 6", "key": "svg-0" }]]);
-
-export { IconChevronLeft as default };

package/dist/node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronRight.js

@@ -1,13 +0,0 @@
-import createReactComponent from '../createReactComponent.js';
-
-/**
- * @license @tabler/icons-react v3.31.0 - MIT
- *
- * This source code is licensed under the MIT license.
- * See the LICENSE file in the root directory of this source tree.
- */
-
-
-var IconChevronRight = createReactComponent("outline", "chevron-right", "IconChevronRight", [["path", { "d": "M9 6l6 6l-6 6", "key": "svg-0" }]]);
-
-export { IconChevronRight as default };

package/dist/node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconCopy.js

@@ -1,13 +0,0 @@
-import createReactComponent from '../createReactComponent.js';
-
-/**
- * @license @tabler/icons-react v3.31.0 - MIT
- *
- * This source code is licensed under the MIT license.
- * See the LICENSE file in the root directory of this source tree.
- */
-
-
-var IconCopy = createReactComponent("outline", "copy", "IconCopy", [["path", { "d": "M7 7m0 2.667a2.667 2.667 0 0 1 2.667 -2.667h8.666a2.667 2.667 0 0 1 2.667 2.667v8.666a2.667 2.667 0 0 1 -2.667 2.667h-8.666a2.667 2.667 0 0 1 -2.667 -2.667z", "key": "svg-0" }], ["path", { "d": "M4.012 16.737a2.005 2.005 0 0 1 -1.012 -1.737v-10c0 -1.1 .9 -2 2 -2h10c.75 0 1.158 .385 1.5 1", "key": "svg-1" }]]);
-
-export { IconCopy as default };

package/dist/node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconCylinder.js

@@ -1,13 +0,0 @@
-import createReactComponent from '../createReactComponent.js';
-
-/**
- * @license @tabler/icons-react v3.31.0 - MIT
- *
- * This source code is licensed under the MIT license.
- * See the LICENSE file in the root directory of this source tree.
- */
-
-
-var IconCylinder = createReactComponent("outline", "cylinder", "IconCylinder", [["path", { "d": "M12 6m-7 0a7 3 0 1 0 14 0a7 3 0 1 0 -14 0", "key": "svg-0" }], ["path", { "d": "M5 6v12c0 1.657 3.134 3 7 3s7 -1.343 7 -3v-12", "key": "svg-1" }]]);
-
-export { IconCylinder as default };

package/dist/node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconDeviceMobile.js

@@ -1,13 +0,0 @@
-import createReactComponent from '../createReactComponent.js';
-
-/**
- * @license @tabler/icons-react v3.31.0 - MIT
- *
- * This source code is licensed under the MIT license.
- * See the LICENSE file in the root directory of this source tree.
- */
-
-
-var IconDeviceMobile = createReactComponent("outline", "device-mobile", "IconDeviceMobile", [["path", { "d": "M6 5a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2v-14z", "key": "svg-0" }], ["path", { "d": "M11 4h2", "key": "svg-1" }], ["path", { "d": "M12 17v.01", "key": "svg-2" }]]);
-
-export { IconDeviceMobile as default };