@saleor/macaw-ui 0.5.2 → 0.6.2

package/src/Tooltip/Tooltip.tsx

@@ -1,28 +1,169 @@
-import MUITooltip from "@material-ui/core/Tooltip";
-import { TooltipProps as MUITooltipProps } from "@material-ui/core/Tooltip";
+import {
+  arrow,
+  autoUpdate,
+  flip,
+  FloatingPortal,
+  offset,
+  Placement,
+  shift,
+  Side,
+  useDismiss,
+  useFloating,
+  useFocus,
+  useHover,
+  useInteractions,
+  useRole,
+} from "@floating-ui/react-dom-interactions";
+import clsx from "clsx";
 import React from "react";
 
+import { useTheme } from "../theme";
+import { mergeRefs } from "../utils/mergeRefs";
+import { Arrow } from "./Arrow";
 import useStyles from "./styles";
 
-export interface TooltipProps extends MUITooltipProps {
-  variant?: "info" | "success" | "warning" | "error";
+export interface TooltipProps {
+  variant?: "success" | "warning" | "error";
+  placement?: Placement;
+  arrow?: boolean;
+  onClick?: React.MouseEventHandler<any>;
+  onOpen?: () => void;
+  onClose?: () => void;
+  open?: boolean;
+  initialOpen?: boolean;
   disabled?: boolean;
+  children: React.ReactElement;
+  header?: React.ReactNode;
+  title?: React.ReactNode;
+  /** Ref for element that triggers opening the tooltip on hover */
+  referenceRef?: React.Ref<HTMLElement>;
+  /** Ref for tooltip div element */
+  floatingRef?: React.Ref<HTMLDivElement>;
 }
 
 export const Tooltip: React.FC<TooltipProps> = ({
-  children,
+  variant,
+  placement: initialPlacement = "bottom-start",
+  arrow: hasArrow = true,
+  onOpen,
+  onClose,
+  onClick,
+  open: forceState,
+  initialOpen = false,
   disabled = false,
-  variant = "info",
-  ...rest
+  children,
+  header,
+  title,
+  referenceRef,
+  floatingRef,
 }) => {
-  const classes = useStyles({ variant, children, ...rest });
-
-  return disabled ? (
-    children
-  ) : (
-    <MUITooltip classes={classes} {...rest}>
-      {children}
-    </MUITooltip>
+  const { themeType } = useTheme();
+
+  const [stateOpen, setStateOpen] = React.useState(initialOpen);
+  const arrowRef = React.useRef<HTMLSpanElement | null>(null);
+
+  const open = forceState ?? stateOpen;
+
+  const {
+    x,
+    y,
+    placement,
+    strategy,
+    context,
+    update,
+    reference,
+    floating,
+    middlewareData: { arrow: { x: arrowX, y: arrowY } = {} },
+  } = useFloating({
+    placement: initialPlacement,
+    open,
+    onOpenChange: (isOpen) => {
+      setStateOpen(isOpen);
+
+      if (isOpen) {
+        onOpen?.();
+      } else {
+        onClose?.();
+      }
+    },
+    middleware: [
+      offset(5),
+      flip(),
+      // padding matches padding of tooltip box
+      shift({ padding: 12 }),
+      // padding matches border-radius of tooltip box
+      arrow({ element: arrowRef, padding: 8 }),
+    ],
+    whileElementsMounted: autoUpdate,
+  });
+
+  const { getReferenceProps, getFloatingProps } = useInteractions([
+    useHover(context, { restMs: 10 }),
+    useFocus(context),
+    useRole(context, { role: "tooltip" }),
+    useDismiss(context),
+  ]);
+
+  const side = React.useMemo<Side>(() => {
+    return placement.split("-")[0] as Side;
+  }, [placement]);
+
+  const classes = useStyles({ variant, side });
+
+  if (disabled) {
+    return children;
+  }
+
+  const mountReference = React.useCallback(
+    mergeRefs(reference, referenceRef),
+    []
+  );
+  const mountFloating = React.useCallback(mergeRefs(floating, floatingRef), []);
+  const mountArrow = React.useCallback((el: HTMLDivElement) => {
+    arrowRef.current = el;
+    update();
+  }, []);
+
+  return (
+    <>
+      {React.cloneElement(
+        children,
+        getReferenceProps({
+          ref: mountReference,
+          ...children.props,
+        })
+      )}
+      <FloatingPortal>
+        {open && (
+          <div
+            {...getFloatingProps({
+              ref: mountFloating,
+              className: clsx(themeType === "dark" && classes.dark),
+              style: {
+                position: strategy,
+                top: y ?? "",
+                left: x ?? "",
+              },
+            })}
+            onClick={onClick}
+          >
+            <div className={classes.tooltip}>
+              {header && <div className={classes.header}>{header}</div>}
+              {title}
+            </div>
+            {hasArrow && (
+              <Arrow
+                ref={mountArrow}
+                x={arrowX}
+                y={arrowY}
+                variant={variant}
+                side={side}
+              />
+            )}
+          </div>
+        )}
+      </FloatingPortal>
+    </>
   );
 };
 

package/src/Tooltip/TooltipMountWrapper.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+
+import { useMountWrapperStyles } from "./styles";
+
+export interface MountWrapperProps
+  extends React.DetailedHTMLProps<
+    React.HTMLAttributes<HTMLButtonElement>,
+    HTMLButtonElement
+  > {
+  children: React.ReactNode;
+}
+
+/** Component used to wrap non-buttons for Tooltip support */
+export const TooltipMountWrapper = React.forwardRef<
+  HTMLButtonElement,
+  { children: React.ReactNode }
+>(({ children, ...props }, ref) => {
+  const classes = useMountWrapperStyles();
+
+  return (
+    <button className={classes.wrapper} {...props} ref={ref}>
+      {children}
+    </button>
+  );
+});

package/src/Tooltip/index.ts

@@ -1 +1,2 @@
 export * from "./Tooltip";
+export * from "./TooltipMountWrapper";

package/src/Tooltip/styles.ts

@@ -1,28 +1,152 @@
-import { makeStyles } from "../theme";
+import { Side } from "@floating-ui/core";
+
+import { dark, light, makeStyles, SaleorTheme } from "../theme";
 import { TooltipProps } from "./Tooltip";
 
-const useStyles = makeStyles<TooltipProps, "tooltip">(
+export type StyleProps = Pick<TooltipProps, "variant"> & { side: Side };
+
+export const getBorderColor = (isDark: boolean) => (props: StyleProps) => {
+  if (isDark) {
+    switch (props.variant) {
+      case "success":
+        return dark.success.light;
+      case "warning":
+        return dark.warning.light;
+      case "error":
+        return dark.fail.light;
+      default:
+        return "#797d7d"; // dark.main[3] without alpha
+    }
+  }
+
+  switch (props.variant) {
+    case "success":
+      return light.success.mid;
+    case "warning":
+      return light.warning.mid;
+    case "error":
+      return light.fail.mid;
+    default:
+      return "#7d7f7f"; // light.main[3] without alpha
+  }
+};
+
+export const getBackgroundColor =
+  (isDark: boolean, theme: SaleorTheme) => (props: StyleProps) => {
+    if (isDark) {
+      switch (props.variant) {
+        case "success":
+          return dark.success.dark;
+        case "warning":
+          return dark.warning.dark;
+        case "error":
+          return dark.fail.dark;
+        default:
+          return dark.main[1];
+      }
+    }
+
+    return theme.palette.common.white;
+  };
+
+const useStyles = makeStyles<StyleProps, "tooltip" | "dark" | "header">(
   (theme) => ({
+    dark: {
+      "& $tooltip": {
+        color: (props) => {
+          return props.variant ? dark.main[2] : light.main[2];
+        },
+        backgroundColor: getBackgroundColor(true, theme),
+        borderColor: getBorderColor(true),
+      },
+    },
     tooltip: {
-      backgroundColor: (props) => {
+      backgroundColor: getBackgroundColor(false, theme),
+      padding: theme.spacing(1.5),
+      borderRadius: theme.spacing(1),
+      border: `1px solid ${theme.palette.saleor.main[3]}`,
+      borderWidth: "1px",
+      fontWeight: 500,
+      borderColor: getBorderColor(false),
+
+      color: (props) => {
         switch (props.variant) {
-          case "info":
-            return theme.palette.info.main;
           case "success":
-            return theme.palette.success.main;
+            return theme.palette.success.dark;
           case "warning":
-            return theme.palette.warning.main;
+            return theme.palette.warning.dark;
           case "error":
-            return theme.palette.error.main;
+            return theme.palette.error.dark;
           default:
-            return theme.palette.info.main;
+            return theme.palette.saleor.main[1];
         }
       },
     },
+    header: {
+      fontSize: theme.typography.caption.fontSize,
+      letterSpacing: "0.1em",
+      fontWeight: 500,
+      textTransform: "uppercase",
+      marginBottom: theme.spacing(0.5),
+      color: light.main[3],
+    },
   }),
   {
     name: "Tooltip",
   }
 );
 
+export const useArrowStyles = makeStyles<StyleProps>(
+  (theme) => ({
+    borderPath: {
+      fill: getBorderColor(false),
+    },
+    backgroundPath: {
+      fill: getBackgroundColor(false, theme),
+    },
+    arrowContainer: {
+      width: "14px",
+      height: "8px",
+      position: "absolute",
+      transform: (props) => {
+        switch (props.side) {
+          case "top":
+            return "rotate(180deg)";
+          case "bottom":
+            return "rotate(0deg)";
+          case "left":
+            return "rotate(90deg)";
+          case "right":
+            return "rotate(-90deg)";
+        }
+      },
+      top: (props) => (props.side === "bottom" && "-13px") || "",
+      bottom: (props) => (props.side === "top" && "-13px") || "",
+      left: (props) => (props.side === "right" && "-16px") || "",
+      right: (props) => (props.side === "left" && "-16px") || "",
+    },
+    dark: {
+      "& $borderPath": {
+        fill: getBorderColor(true),
+      },
+
+      "& $backgroundPath": {
+        fill: getBackgroundColor(true, theme),
+      },
+    },
+  }),
+  { name: "TooltipArrow" }
+);
 export default useStyles;
+
+export const useMountWrapperStyles = makeStyles(
+  {
+    wrapper: {
+      all: "unset",
+      display: "inline-block",
+      lineHeight: 0,
+      pointerEvents: "all",
+    },
+  },
+  { name: "TooltipMountWrapper" }
+);

package/src/assets/icons/20x20/back_small_icon.svg

@@ -0,0 +1 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12.5 5.5 8 10l4.5 4.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>

package/src/assets/icons/20x20/bookmarks_small_icon.svg

@@ -0,0 +1 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5 17.5h-.75a.75.75 0 0 0 1.085.67L5 17.5Zm5-2.5.335-.67a.75.75 0 0 0-.67 0L10 15Zm5 2.5-.335.67a.75.75 0 0 0 1.085-.67H15ZM4.25 4v13.5h1.5V4h-1.5Zm1.085 14.17 5-2.5-.67-1.34-5 2.5.67 1.34Zm4.33-2.5 5 2.5.67-1.34-5-2.5-.67 1.34Zm6.085 1.83V4h-1.5v13.5h1.5ZM13 1.25H7v1.5h6v-1.5ZM15.75 4A2.75 2.75 0 0 0 13 1.25v1.5c.69 0 1.25.56 1.25 1.25h1.5Zm-10 0c0-.69.56-1.25 1.25-1.25v-1.5A2.75 2.75 0 0 0 4.25 4h1.5Z" fill="currentColor"/></svg>

package/src/assets/icons/20x20/checkbox_small_icon.svg

@@ -0,0 +1 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="m4 11 3 3 9-9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>

package/src/assets/icons/20x20/chevron_small_icon.svg

@@ -0,0 +1 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="m6 8 4 4 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>

package/src/assets/icons/20x20/close_small_icon.svg

@@ -0,0 +1 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M14.53 6.53a.75.75 0 0 0-1.06-1.06L10 8.94 6.53 5.47a.75.75 0 0 0-1.06 1.06L8.94 10l-3.47 3.47a.75.75 0 1 0 1.06 1.06L10 11.06l3.47 3.47a.75.75 0 1 0 1.06-1.06L11.06 10l3.47-3.47Z" fill="currentColor"/></svg>

package/src/assets/icons/20x20/drag_small_icon.svg

@@ -0,0 +1 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M7.5 7a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 3a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-6.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 3a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm3.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z" fill="currentColor"/></svg>

package/src/assets/icons/20x20/filter_small_icon.svg

@@ -0,0 +1 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3 7V3h14v4l-5 5v3.5L8 17v-5L3 7Z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/></svg>

package/src/assets/icons/20x20/minus_small_icon.svg

@@ -0,0 +1 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5 10h10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>

package/src/assets/icons/20x20/more_small_icon.svg

@@ -0,0 +1 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M5.5 11a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm6-1.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm4.5 0a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Z" fill="currentColor"/></svg>

package/src/assets/icons/20x20/next_small_icon.svg

@@ -0,0 +1 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="m8 14.5 4.5-4.5L8 5.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>

package/src/assets/icons/20x20/plus_small_icon.svg

@@ -0,0 +1 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10 5v10m-5-5h10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>

package/src/assets/icons/20x20/search_small_icon.svg

@@ -0,0 +1 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M3.75 9a5.25 5.25 0 1 1 10.5 0 5.25 5.25 0 0 1-10.5 0ZM9 2.25a6.75 6.75 0 1 0 4.213 12.024l3.257 3.256a.75.75 0 1 0 1.06-1.06l-3.256-3.257A6.75 6.75 0 0 0 9 2.25Z" fill="currentColor"/></svg>

package/src/assets/icons/20x20/sort_big_small_icon.svg

@@ -0,0 +1 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10 4v12m0-12L6 8m4-4 4 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>

package/src/assets/icons/20x20/sort_small_small_icon.svg

@@ -0,0 +1 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10 4v12m0 0-4-4m4 4 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>

package/src/assets/icons/24x24/add_environment_icon.svg

@@ -0,0 +1 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.5 10H3m0 0v5a2 2 0 0 0 2 2h7m-9-7V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v5m0 0v5a2 2 0 0 1-2 2h-7m9-7h-2.5M12 17v4m0 0H6m6 0h7M12 7.002v6m3-3H9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>

package/src/assets/icons/24x24/apps_icon.svg

@@ -0,0 +1 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7 3.5v7M3.5 7h7m4 14H20a1 1 0 0 0 1-1v-5.5a1 1 0 0 0-1-1h-5.5a1 1 0 0 0-1 1V20a1 1 0 0 0 1 1Zm0-10.5H20a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1h-5.5a1 1 0 0 0-1 1v5.5a1 1 0 0 0 1 1ZM4 21h5.5a1 1 0 0 0 1-1v-5.5a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1V20a1 1 0 0 0 1 1Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>

package/src/assets/icons/24x24/arrow_right_icon.svg

@@ -0,0 +1 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4 12h15.5m0 0-5-5m5 5-5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>

package/src/assets/icons/24x24/backspace_icon.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M22 6H7l-5 6 5 6h15V6Zm-10 4 4 4m0-4-4 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>

package/src/assets/icons/24x24/bag_icon.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4 7v-.75a.75.75 0 0 0-.748.697L4 7ZM3 21l-.748-.053A.75.75 0 0 0 3 21.75V21Zm18 0v.75a.75.75 0 0 0 .748-.803L21 21ZM20 7l.748-.053A.75.75 0 0 0 20 6.25V7ZM8.75 11a.75.75 0 0 0-1.5 0h1.5Zm8 0a.75.75 0 0 0-1.5 0h1.5ZM3.252 6.947l-1 14 1.496.106 1-14-1.496-.106ZM3 21.75h18v-1.5H3v1.5Zm18.748-.803-1-14-1.496.106 1 14 1.497-.106ZM8 6.25H4v1.5h4v-1.5ZM8 7h.75v.003a.613.613 0 0 0 0-.023l.006-.098c.007-.09.02-.223.047-.384.054-.326.161-.749.368-1.163a2.77 2.77 0 0 1 .933-1.086c.426-.284 1.028-.499 1.896-.499v-1.5c-1.13 0-2.03.285-2.728.751A4.26 4.26 0 0 0 7.83 4.665a5.665 5.665 0 0 0-.507 1.587 5.655 5.655 0 0 0-.073.744V7H8Zm12-.75h-4v1.5h4v-1.5Zm-4 0H8v1.5h8v-1.5Zm-4-2.5c.87 0 1.47.215 1.897.499.43.287.727.675.932 1.086.207.414.315.837.369 1.163a4.15 4.15 0 0 1 .052.482v.023V7h1.5v-.024l-.001-.046a5.625 5.625 0 0 0-.071-.678 5.663 5.663 0 0 0-.507-1.587A4.259 4.259 0 0 0 14.73 3c-.7-.466-1.597-.751-2.729-.751v1.5ZM8 11l-.75.001v.009a1.558 1.558 0 0 0 .002.057c.002.034.004.079.01.133a3.817 3.817 0 0 0 .615 1.716C8.531 13.9 9.781 14.75 12 14.75v-1.5c-1.781 0-2.532-.65-2.876-1.166A2.317 2.317 0 0 1 8.751 11v-.008V11H8Zm4 3.75c2.219 0 3.468-.85 4.124-1.834a3.815 3.815 0 0 0 .615-1.716 2.62 2.62 0 0 0 .011-.175V11h-1.5v-.008V11a2.055 2.055 0 0 1-.044.306 2.314 2.314 0 0 1-.33.778c-.344.516-1.094 1.166-2.876 1.166v1.5Z" fill="currentColor"/></svg>

package/src/assets/icons/24x24/billing_icon.svg

@@ -0,0 +1 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17 10.5V21l-3.5-2-3.5 2-3.5-2L3 21V6a3 3 0 0 1 3-3h12.5M17 10.5h2.5a1 1 0 0 0 1-1V5a2 2 0 0 0-2-2v0M17 10.5V6c0-2 1.5-3 1.5-3m-12 5h7m-7 3h7m-7 3h7" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>

package/src/assets/icons/24x24/bookmark_icon.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5 21h-.75a.75.75 0 0 0 1.122.651L5 21Zm7-4 .373-.651a.75.75 0 0 0-.745 0L12 17Zm7 4-.372.651A.75.75 0 0 0 19.75 21H19ZM4.25 5v16h1.5V5h-1.5Zm1.122 16.651 7-4-.744-1.302-7 4 .744 1.302Zm6.256-4 7 4 .744-1.302-7-4-.744 1.302ZM19.75 21V5h-1.5v16h1.5ZM17 2.25H7v1.5h10v-1.5ZM19.75 5A2.75 2.75 0 0 0 17 2.25v1.5c.69 0 1.25.56 1.25 1.25h1.5Zm-14 0c0-.69.56-1.25 1.25-1.25v-1.5A2.75 2.75 0 0 0 4.25 5h1.5Z" fill="currentColor"/></svg>

package/src/assets/icons/24x24/calendar_icon.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4 11V6a1 1 0 0 1 1-1h3m-4 6v9a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-9M4 11h16m0 0V6a1 1 0 0 0-1-1h-3M8 5V3m0 2v2m0-2h8m0 0V3m0 2v2" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>

package/src/assets/icons/24x24/check_icon.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="m6 13.5 3 3 9-9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>

package/src/assets/icons/24x24/chevron_icon.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="m8 10 4 4 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>

package/src/assets/icons/24x24/close_2_icon.svg

@@ -0,0 +1 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="m8 8.002 8 8m-8 0 8-8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><circle cx="12" cy="12.002" r="10" stroke="currentColor" stroke-width="1.5"/></svg>

package/src/assets/icons/24x24/close_icon.svg

@@ -0,0 +1 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M7.53 6.472a.75.75 0 1 0-1.06 1.06l4.47 4.47-4.47 4.47a.75.75 0 0 0 1.06 1.06l4.47-4.47 4.47 4.47a.75.75 0 1 0 1.06-1.06l-4.47-4.47 4.47-4.47a.75.75 0 0 0-1.06-1.06L12 10.942l-4.47-4.47Z" fill="currentColor"/></svg>

package/src/assets/icons/24x24/code_icon.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="m4 18 6-6-6-6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M12 18h8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>

package/src/assets/icons/24x24/columns_icon.svg

@@ -0,0 +1 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9 3.002H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h4m0-18v18m0-18h6m-6 18h6m0 0h4a2 2 0 0 0 2-2v-14a2 2 0 0 0-2-2h-4m0 18v-18" stroke="currentColor" stroke-width="1.5"/></svg>

package/src/assets/icons/24x24/copy_icon.svg

@@ -0,0 +1 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M19 20H8a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1h11a1 1 0 0 1 1 1v11a1 1 0 0 1-1 1Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M4 16V5a1 1 0 0 1 1-1h11" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>

package/src/assets/icons/24x24/customers_icon.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="7" r="4" stroke="currentColor" stroke-width="1.5"/><path d="M20.83 21H3.17a.17.17 0 0 1-.17-.17A6.83 6.83 0 0 1 9.83 14h4.34A6.83 6.83 0 0 1 21 20.83a.17.17 0 0 1-.17.17Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>

package/src/assets/icons/24x24/dashboard_icon.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13.5 4a1 1 0 0 1 1-1H20a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1h-5.5a1 1 0 0 1-1-1V4Zm0 9a1 1 0 0 1 1-1H20a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1h-5.5a1 1 0 0 1-1-1v-7ZM3 16a1 1 0 0 1 1-1h5.5a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-4ZM3 4a1 1 0 0 1 1-1h5.5a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4Z" stroke="currentColor" stroke-width="1.5"/></svg>

package/src/assets/icons/24x24/delete_icon.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>

package/src/assets/icons/24x24/developer_icon.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="m12.5 10.5-1.5 7" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M3 7V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v2M3 7v12a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V7M3 7h18" stroke="currentColor" stroke-width="1.5"/><path d="m8 12-2 2 2 2m8-4 2 2-2 2" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>

package/src/assets/icons/24x24/discounts_icon.svg

@@ -0,0 +1 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M14.414 2.25c-.464 0-.91.184-1.237.513L4.97 10.97l-2.293 2.293a1.75 1.75 0 0 0 0 2.474l5.586 5.586a1.75 1.75 0 0 0 2.474 0l2.293-2.293 8.207-8.207a1.75 1.75 0 0 0 .513-1.237V5.914c0-.464-.184-.909-.513-1.237l-1.914-1.914a1.75 1.75 0 0 0-1.237-.513h-3.672Zm-.177 1.573a.25.25 0 0 1 .177-.073h3.672a.25.25 0 0 1 .177.073l1.914 1.914a.25.25 0 0 1 .073.177v3.672a.25.25 0 0 1-.073.177L12.5 17.439 6.56 11.5l7.677-7.677ZM5.5 12.561l5.94 5.939-1.763 1.763a.25.25 0 0 1-.354 0l-5.586-5.586a.25.25 0 0 1 0-.354L5.5 12.561ZM16 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z" fill="currentColor"/></svg>

package/src/assets/icons/24x24/download_icon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 3v14m0 0-4-4m4 4 4-4M3 21h18"/></svg>

package/src/assets/icons/24x24/drag_icon.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-6.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm3.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z" fill="currentColor"/></svg>

package/src/assets/icons/24x24/edit_icon.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="m16 3 .53-.53a.75.75 0 0 0-1.06 0L16 3Zm4 4 .53.53a.75.75 0 0 0 0-1.06L20 7ZM10 17v.75a.75.75 0 0 0 .53-.22L10 17Zm-4 0h-.75c0 .414.336.75.75.75V17Zm0-4-.53-.53a.75.75 0 0 0-.22.53H6Zm9.47-9.47 4 4 1.06-1.06-4-4-1.06 1.06ZM10 16.25H6v1.5h4v-1.5ZM6.75 17v-4h-1.5v4h1.5Zm-.22-3.47 8-8-1.06-1.06-8 8 1.06 1.06Zm8-8 2-2-1.06-1.06-2 2 1.06 1.06Zm4.94.94-2 2 1.06 1.06 2-2-1.06-1.06Zm-2 2-8 8 1.06 1.06 8-8-1.06-1.06Zm-4-2.94 4 4 1.06-1.06-4-4-1.06 1.06Z" fill="currentColor"/><path d="M3 21h18" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>

package/src/assets/icons/24x24/environment_icon.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3 10h18M3 10v5a2 2 0 0 0 2 2h7m-9-7V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v5m0 0v5a2 2 0 0 1-2 2h-7m0 0v4m0 0H6m6 0h7" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M8 13.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm0-7a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z" fill="currentColor"/></svg>

package/src/assets/icons/24x24/expand_icon.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="m8 10.5 4 4 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><circle cx="12" cy="12" r="10.25" stroke="currentColor" stroke-width="1.5"/></svg>

package/src/assets/icons/24x24/expendable_icon.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7 7h13m-10 5h10m-10 5h10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><circle cx="4" cy="7" r="1" fill="currentColor"/><circle cx="7" cy="12" r="1" fill="currentColor"/><circle cx="7" cy="17" r="1" fill="currentColor"/></svg>

package/src/assets/icons/24x24/eye_closed_icon.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M18.5 4.375a.625.625 0 0 0-1-.75l-2.693 3.59A11.965 11.965 0 0 0 12 6.876c-2.642 0-5.005.923-6.703 1.968-.85.523-1.548 1.086-2.043 1.598a4.647 4.647 0 0 0-.603.748c-.137.22-.276.507-.276.811 0 .304.14.59.276.81.15.24.356.494.603.75.495.511 1.194 1.074 2.043 1.597.753.464 1.637.903 2.618 1.248L5.5 19.625a.625.625 0 1 0 1 .75l2.693-3.59c.884.213 1.826.34 2.807.34 2.642 0 5.005-.923 6.703-1.968.85-.523 1.548-1.086 2.043-1.598.247-.255.454-.508.603-.748.137-.22.276-.507.276-.811 0-.304-.14-.59-.276-.81a4.65 4.65 0 0 0-.603-.75c-.495-.511-1.194-1.074-2.043-1.597a13.73 13.73 0 0 0-2.618-1.248l2.415-3.22zm-4.781 4.291a3.75 3.75 0 0 0-4.438 5.917l4.438-5.917zm-3.438 6.668 4.438-5.917a3.75 3.75 0 0 1-4.438 5.917zM3.633 12a.97.97 0 0 0 .08.15c.088.143.233.327.44.54.41.426 1.024.926 1.8 1.403.632.389 1.361.757 2.163 1.056A4.98 4.98 0 0 1 7 12a4.98 4.98 0 0 1 1.116-3.149c-.802.3-1.531.667-2.163 1.056-.776.477-1.39.977-1.8 1.402a3.43 3.43 0 0 0-.44.54.97.97 0 0 0-.08.151zm14.414 2.093c-.632.389-1.361.757-2.163 1.056A4.979 4.979 0 0 0 17 12a4.98 4.98 0 0 0-1.116-3.149c.802.3 1.531.667 2.163 1.056.776.477 1.39.977 1.8 1.402.207.214.352.398.44.54a.967.967 0 0 1 .08.151.967.967 0 0 1-.08.15 3.425 3.425 0 0 1-.44.54c-.41.426-1.024.926-1.8 1.403z" fill="currentColor"/></svg>

package/src/assets/icons/24x24/eye_icon.svg

@@ -0,0 +1 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M3.818 12.086a1.16 1.16 0 0 1-.048-.084c.011-.021.027-.05.048-.084.083-.133.222-.31.424-.52.403-.417 1.008-.91 1.776-1.382.576-.355 1.232-.69 1.951-.973A4.978 4.978 0 0 0 7 12.002c0 1.107.36 2.13.969 2.959a12.35 12.35 0 0 1-1.95-.973c-.769-.472-1.374-.965-1.777-1.382a3.307 3.307 0 0 1-.424-.52Zm12.213 2.875a12.35 12.35 0 0 0 1.95-.973c.769-.472 1.374-.965 1.777-1.382.202-.21.34-.387.424-.52l.048-.084a1.164 1.164 0 0 0-.048-.084 3.302 3.302 0 0 0-.424-.52c-.403-.417-1.008-.91-1.776-1.382a12.347 12.347 0 0 0-1.951-.973c.61.829.969 1.852.969 2.959s-.36 2.13-.969 2.959ZM12 6.75c-2.67 0-5.056.933-6.768 1.987-.857.528-1.565 1.097-2.068 1.618-.25.259-.464.52-.62.77-.14.225-.294.537-.294.876 0 .34.154.651.295.877.155.25.368.51.619.77.503.52 1.21 1.09 2.068 1.617C6.944 16.32 9.329 17.252 12 17.252c2.67 0 5.056-.932 6.768-1.986.857-.528 1.565-1.097 2.068-1.618.25-.26.464-.52.62-.77.14-.225.294-.537.294-.876 0-.34-.154-.651-.295-.877a4.769 4.769 0 0 0-.619-.77c-.503-.52-1.21-1.09-2.068-1.617C17.056 7.684 14.671 6.752 12 6.752Zm3.5 5.251a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Z" fill="currentColor"/></svg>

package/src/assets/icons/24x24/filtering_icon.svg

@@ -0,0 +1 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20 3H4a1 1 0 0 0-1 1v3.086a1 1 0 0 0 .293.707l5.914 5.914a1 1 0 0 1 .293.707V21l4.371-1.749a1 1 0 0 0 .629-.928v-3.909a1 1 0 0 1 .293-.707l5.914-5.914A1 1 0 0 0 21 7.086V4a1 1 0 0 0-1-1Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>

package/src/assets/icons/24x24/generate_icon.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.5 6.5H4a1 1 0 0 0-1 1V20a1 1 0 0 0 1 1h12.5a1 1 0 0 0 1-1v-6.5m-3.5-7h3.5m3.5 0h-3.5m0 0V3m0 3.5V10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>

package/src/assets/icons/24x24/github_icon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="25" fill="none" viewBox="0 0 24 25"><path stroke="currentColor" stroke-width="1.5" d="M14.6 6.064c.315.023.75-.026 1.108-.25 1.297-.816 2.626-1.504 4.047-1.971.06-.02.124-.038.199-.055.099.266.175.492.215.716.026.147.053.292.08.435.16.872.306 1.665.29 2.45-.018.888.271 1.482.695 2.074.78 1.089 1.067 2.357 1.009 3.768-.038.907-.144 1.765-.366 2.57-.25.903-.646 1.74-1.266 2.503-.797.982-1.832 1.62-3.07 2.023-.657.214-1.05.313-1.444.364-.406.053-.839.059-1.597.059h-5c-1.428 0-2.96-.247-4.212-.907-1.52-.801-2.52-2.018-3.046-3.67a10.598 10.598 0 0 1-.49-3.43c.022-1.325.387-2.497 1.178-3.514a2.55 2.55 0 0 0 .416-.73c.102-.294.133-.599.108-.93-.053-.684.053-1.409.181-2.204.074-.454.203-.887.346-1.37l.057-.192c1.531.43 2.92 1.169 4.293 2.057.342.221.777.258 1.09.203a14.222 14.222 0 0 1 1.623-.185c.67-.04 1.348-.036 2.031-.004m1.524.19a9.544 9.544 0 0 1-.776-.099m.776.099-.776-.099m-.748-.091c.213.01.433.042.692.082m-.692-.082.692.082m0 0 .056.01m-.056-.01.056.01"/><path stroke="currentColor" stroke-width="2" d="M16 16c0 .357-.11.641-.24.814-.129.173-.231.186-.26.186-.029 0-.131-.013-.26-.186-.13-.173-.24-.457-.24-.814 0-.357.11-.641.24-.814.129-.173.231-.186.26-.186.029 0 .131.013.26.186.13.173.24.457.24.814Zm-7 0c0 .357-.11.641-.24.814-.129.173-.231.186-.26.186-.029 0-.131-.013-.26-.186C8.11 16.641 8 16.357 8 16c0-.357.11-.641.24-.814.129-.173.231-.186.26-.186.029 0 .131.013.26.186.13.173.24.457.24.814Z"/><path stroke="currentColor" stroke-width="1.5" d="M6.753 11.314c-.798.05-1.457.38-2.012.85-1.133.962-1.6 2.166-1.562 3.36.032 1.02.43 1.993 1.013 2.78.836 1.128 2.02 1.613 3.171 1.883A20.33 20.33 0 0 0 12 20.75a20 20 0 0 0 4.653-.568c.787-.188 1.671-.47 2.415-1.113.647-.56 1.143-1.108 1.437-1.762.346-.771.363-1.582.216-2.53-.095-.616-.274-1.21-.616-1.73-.347-.53-.836-.944-1.483-1.23-.74-.329-1.565-.467-2.308-.512m-9.56.01a32.676 32.676 0 0 1 2.255-.065m-2.256.064 2.256-.064m0 0a30.224 30.224 0 0 0 .98-.007c.319-.005.65-.008 1.033.003.57.017 1.176.012 1.785.008.4-.004.803-.007 1.198-.004m-4.996 0h4.996m0 0 .161.001m-.16-.001.16.001m2.148.054c-.731-.044-1.44-.049-2.148-.054m2.148.054-2.148-.054"/></svg>

package/src/assets/icons/24x24/grid_icon.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="3" y="3" width="7" height="7" rx="1" stroke="currentColor" stroke-width="1.5"/><rect x="14" y="3" width="7" height="7" rx="1" stroke="currentColor" stroke-width="1.5"/><rect x="3" y="14" width="7" height="7" rx="1" stroke="currentColor" stroke-width="1.5"/><rect x="14" y="14" width="7" height="7" rx="1" stroke="currentColor" stroke-width="1.5"/></svg>

package/src/assets/icons/24x24/help_icon.svg

@@ -0,0 +1 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.5 9.5A2.5 2.5 0 1 1 12 12v0a.5.5 0 0 0-.5.5v1" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><path d="M12.5 16a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM3 21h-.75c0 .414.336.75.75.75V21Zm.75 0v-9h-1.5v9h1.5Zm8.25-.75H3v1.5h9v-1.5ZM20.25 12A8.25 8.25 0 0 1 12 20.25v1.5A9.75 9.75 0 0 0 21.75 12h-1.5ZM12 3.75A8.25 8.25 0 0 1 20.25 12h1.5A9.75 9.75 0 0 0 12 2.25v1.5ZM3.75 12A8.25 8.25 0 0 1 12 3.75v-1.5A9.75 9.75 0 0 0 2.25 12h1.5Z" fill="currentColor"/></svg>

package/src/assets/icons/24x24/how to_icon.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3 18.667V4a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v11.556a2 2 0 0 1-2 2H4.984a2 2 0 0 0-1.359.532L3 18.667Zm0 0v1.36c0 .55.23 1.074.633 1.448v0c.365.337.844.525 1.34.525h14.044a2 2 0 0 0 1.358-.532l.625-.58" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M9.5 7.5A2.5 2.5 0 1 1 12 10v0a.5.5 0 0 0-.5.5v1" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><path d="M12.5 14a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z" fill="currentColor"/></svg>

package/src/assets/icons/24x24/link_icon.svg

@@ -0,0 +1 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11 5.002H4a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-7m-8 0 10-10m0 0v6m0-6h-6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>

package/src/assets/icons/24x24/list_icon.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7 7h13M7 12h13M7 17h13" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><circle cx="4" cy="7" r="1" fill="currentColor"/><circle cx="4" cy="12" r="1" fill="currentColor"/><circle cx="4" cy="17" r="1" fill="currentColor"/></svg>

package/src/assets/icons/24x24/mail_icon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="25" fill="none" viewBox="0 0 24 25"><path stroke="currentColor" stroke-linejoin="round" stroke-width="1.5" d="M3.63 6.622c.375-.372.872-.62 1.37-.62h14c.5 0 1 .25 1.375.625M3.63 6.622C3.252 6.997 3 7.5 3 8.002v8c0 .502.252 1.005.63 1.38m0-10.76 5.38 5.38m11.365-5.375c.375.375.625.875.625 1.375v8c0 1-1 2-2 2H5c-.498 0-.995-.248-1.37-.62M20.375 6.627 15 12.002m-5.99 0 1 1c1 1 2.99 1 3.99 0l1-1m-5.99 0-5.38 5.38M15 12.002l5.38 5.38"/></svg>

package/src/assets/icons/24x24/migrate_icon.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M19 11.5V7.828a2 2 0 0 0-.586-1.414l-2.828-2.828A2 2 0 0 0 14.172 3H7a2 2 0 0 0-2 2v2.5a2 2 0 0 0 2 2h9m0 0-2-2m2 2-2 2" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="m8 15-.53-.53a.75.75 0 0 0 0 1.06L8 15Zm1.47 2.53a.75.75 0 1 0 1.06-1.06l-1.06 1.06Zm1.06-4a.75.75 0 1 0-1.06-1.06l1.06 1.06ZM5.75 13a.75.75 0 0 0-1.5 0h1.5ZM7 21.75h10v-1.5H7v1.5ZM19.75 19v-2h-1.5v2h1.5ZM17 14.25H8v1.5h9v-1.5Zm-9.53 1.28 2 2 1.06-1.06-2-2-1.06 1.06Zm1.06 0 2-2-1.06-1.06-2 2 1.06 1.06ZM5.75 19v-6h-1.5v6h1.5Zm14-2A2.75 2.75 0 0 0 17 14.25v1.5c.69 0 1.25.56 1.25 1.25h1.5ZM17 21.75A2.75 2.75 0 0 0 19.75 19h-1.5c0 .69-.56 1.25-1.25 1.25v1.5Zm-10-1.5c-.69 0-1.25-.56-1.25-1.25h-1.5A2.75 2.75 0 0 0 7 21.75v-1.5Z" fill="currentColor"/></svg>

package/src/assets/icons/24x24/minus_icon.svg

@@ -0,0 +1 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 12.002h12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>

package/src/assets/icons/24x24/models_icon.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 5.5 12 3l6 2.5m-12 0L12 8M6 5.5v8l6 2.5m6-10.5L12 8m6-2.5v8L12 16m0-8v8" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/><path d="M20 16.2c1.256.501 2 1.125 2 1.8 0 1.261-2.595 2.341-6.27 2.785M12 21c-5.522 0-10-1.365-10-3.048 0-.743.871-1.423 2.318-1.952" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>

package/src/assets/icons/24x24/more_horizontal_icon.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M6.5 13a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm7-1.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm5.5 0a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Z" fill="currentColor"/></svg>

package/src/assets/icons/24x24/navigation_icon.svg

@@ -0,0 +1 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4 8.002h16m-16 4h16m-16 4h16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>

package/src/assets/icons/24x24/navigator_icon.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.469 13.238 12.831 2.9c.28-.455.982-.213.923.317l-.692 6.228a.5.5 0 0 0 .497.555h3.58a.5.5 0 0 1 .434.748l-6.408 11.213c-.267.468-.985.239-.931-.298l.711-7.113a.5.5 0 0 0-.498-.55H6.896a.5.5 0 0 1-.426-.762Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>

package/src/assets/icons/24x24/next_icon.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="m10 16 4-4-4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>