@saleor/macaw-ui 0.7.2 → 0.8.0-dev.104

package/src/Tooltip/Tooltip.tsx

@@ -1,170 +0,0 @@
-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 {
-  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> = ({
-  variant,
-  placement: initialPlacement = "bottom-start",
-  arrow: hasArrow = true,
-  onOpen,
-  onClose,
-  onClick,
-  open: forceState,
-  initialOpen = false,
-  disabled = false,
-  children,
-  header,
-  title,
-  referenceRef,
-  floatingRef,
-}) => {
-  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 });
-
-  const mountReference = React.useCallback(
-    mergeRefs(reference, referenceRef),
-    []
-  );
-  const mountFloating = React.useCallback(mergeRefs(floating, floatingRef), []);
-  const mountArrow = React.useCallback((el: HTMLDivElement) => {
-    arrowRef.current = el;
-    update();
-  }, []);
-
-  if (disabled) {
-    return children;
-  }
-
-  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>
-    </>
-  );
-};
-
-Tooltip.displayName = "Tooltip";

package/src/Tooltip/TooltipMountWrapper.tsx

@@ -1,25 +0,0 @@
-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,2 +0,0 @@
-export * from "./Tooltip";
-export * from "./TooltipMountWrapper";

package/src/Tooltip/styles.ts

@@ -1,152 +0,0 @@
-import { Side } from "@floating-ui/core";
-
-import { dark, light, makeStyles, SaleorTheme } from "../theme";
-import { TooltipProps } from "./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: 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 "success":
-            return theme.palette.success.dark;
-          case "warning":
-            return theme.palette.warning.dark;
-          case "error":
-            return theme.palette.error.dark;
-          default:
-            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/UserChipMenu/UserChipMenu.stories.tsx

@@ -1,46 +0,0 @@
-import { Meta, Story } from "@storybook/react";
-import React from "react";
-
-import placeholder from "../assets/placeholder_64x64.png";
-import { UserChipMenu, UserChipProps } from "./UserChipMenu";
-import { UserChipMenuItem } from "./UserChipMenuItem";
-
-const props: UserChipProps = {
-  avatar: null,
-  initials: "LI",
-  name: "Lorem Ipsum",
-};
-
-const Options: React.FC = () => (
-  <>
-    {["First Option", "Second Option"].map((option) => (
-      <UserChipMenuItem key={option}>{option}</UserChipMenuItem>
-    ))}
-  </>
-);
-
-export const Default: Story = () => (
-  <>
-    <UserChipMenu {...props}>
-      <Options />
-    </UserChipMenu>
-    <div style={{ height: 24 }} />
-    <UserChipMenu {...props} open>
-      <Options />
-    </UserChipMenu>
-  </>
-);
-export const WithSubtext: Story = () => (
-  <UserChipMenu {...props} subtext="Lorem ipsum dolor sit amet">
-    <Options />
-  </UserChipMenu>
-);
-export const WithAvatar: Story = () => (
-  <UserChipMenu {...props} avatar={placeholder}>
-    <Options />
-  </UserChipMenu>
-);
-
-export default {
-  title: "User Chip",
-} as Meta;

package/src/UserChipMenu/UserChipMenu.tsx

@@ -1,98 +0,0 @@
-import ClickAwayListener from "@material-ui/core/ClickAwayListener";
-import Grow from "@material-ui/core/Grow";
-import Hidden from "@material-ui/core/Hidden";
-import Menu from "@material-ui/core/MenuList";
-import Paper from "@material-ui/core/Paper";
-import Popper from "@material-ui/core/Popper";
-import Typography from "@material-ui/core/Typography";
-import React from "react";
-
-import { LayoutButton } from "..";
-import { Avatar } from "../Avatar";
-import { UserChipMenuContext } from "./context";
-import useStyles from "./styles";
-
-export interface UserChipProps {
-  avatar: string | null;
-  initials: string;
-  name: string;
-  subtext?: string;
-  open?: boolean;
-}
-
-export const UserChipMenu: React.FC<UserChipProps> = ({
-  avatar,
-  initials,
-  name,
-  subtext,
-  children,
-  open = false,
-  ...props
-}) => {
-  const classes = useStyles({});
-  const [isMenuOpened, setMenuState] = React.useState(open);
-  const anchor = React.useRef<HTMLButtonElement>(null);
-
-  const closeMenu = () => setMenuState(false);
-
-  return (
-    <>
-      <LayoutButton
-        className={classes.userChip}
-        ref={anchor}
-        onClick={() => setMenuState(!isMenuOpened)}
-        data-test-id="userMenu"
-        state={isMenuOpened ? "active" : "default"}
-        {...props}
-      >
-        <Avatar avatar={avatar as string | undefined} initials={initials} />
-        <div className={classes.labelContainer}>
-          <Hidden smDown>
-            <div>
-              <Typography className={classes.label} variant="body2">
-                {name}
-              </Typography>
-              {subtext && (
-                <Typography
-                  className={classes.label}
-                  variant="body2"
-                  color="textSecondary"
-                >
-                  {subtext}
-                </Typography>
-              )}
-            </div>
-          </Hidden>
-        </div>
-      </LayoutButton>
-      <Popper
-        className={classes.popover}
-        open={isMenuOpened}
-        anchorEl={anchor.current}
-        transition
-        placement="bottom-end"
-      >
-        {({ TransitionProps, placement }) => (
-          <Grow
-            {...TransitionProps}
-            style={{
-              transformOrigin:
-                placement === "bottom" ? "right top" : "right bottom",
-            }}
-          >
-            <Paper>
-              <ClickAwayListener onClickAway={closeMenu} mouseEvent="onClick">
-                <Menu disablePadding>
-                  <UserChipMenuContext.Provider value={closeMenu}>
-                    {children}
-                  </UserChipMenuContext.Provider>
-                </Menu>
-              </ClickAwayListener>
-            </Paper>
-          </Grow>
-        )}
-      </Popper>
-    </>
-  );
-};
-UserChipMenu.displayName = "UserChip";

package/src/UserChipMenu/UserChipMenuItem.tsx

@@ -1,33 +0,0 @@
-import MenuItem, { MenuItemProps } from "@material-ui/core/MenuItem";
-import React from "react";
-
-import { useUserChipMenu } from "./context";
-
-export interface UserChipMenuItemProps extends Omit<MenuItemProps, "button"> {
-  leaveOpen?: boolean;
-}
-
-export const UserChipMenuItem: React.FC<UserChipMenuItemProps> = ({
-  leaveOpen,
-  onClick,
-  ...props
-}) => {
-  const closeMenu = useUserChipMenu();
-
-  // We're not really interested in event type here
-  const handleClickWithClose = (event: unknown) => {
-    closeMenu();
-    if (onClick) {
-      onClick(event as any);
-    }
-  };
-
-  return (
-    <MenuItem
-      {...props}
-      onClick={leaveOpen ? onClick : handleClickWithClose}
-      button
-    />
-  );
-};
-UserChipMenuItem.displayName = "UserChipMenuItem";

package/src/UserChipMenu/context.ts

@@ -1,19 +0,0 @@
-import { createContext, useContext } from "react";
-
-export type UserChipMenuContextType = () => void;
-
-export const UserChipMenuContext = createContext<
-  UserChipMenuContextType | undefined
->(undefined);
-UserChipMenuContext.displayName = "UserChipMenuContext";
-
-export const useUserChipMenu = () => {
-  const ctx = useContext(UserChipMenuContext);
-  if (ctx === undefined) {
-    throw new Error(
-      "useUserChipMenu must be used within a UserChipMenuContext"
-    );
-  }
-
-  return ctx;
-};

package/src/UserChipMenu/index.ts

@@ -1,2 +0,0 @@
-export * from "./UserChipMenu";
-export * from "./UserChipMenuItem";

package/src/UserChipMenu/styles.ts

@@ -1,66 +0,0 @@
-import { makeStyles } from "../theme";
-
-const avatarSize = 32;
-
-const useStyles = makeStyles(
-  (theme) => ({
-    avatar: {
-      "&&": {
-        height: avatarSize,
-        width: avatarSize,
-      },
-      backgroundColor: theme.palette.background.paper,
-    },
-    avatarInitials: {
-      height: avatarSize,
-      lineHeight: avatarSize + "px",
-      width: avatarSize,
-      color: theme.palette.primary.contrastText,
-      textAlign: "center",
-    },
-    avatarPlaceholder: {
-      alignItems: "center",
-      background: theme.palette.primary.main,
-      borderRadius: "100%",
-      display: "flex",
-      justifyContent: "center",
-    },
-    label: {
-      lineHeight: 1.2,
-      textAlign: "left",
-    },
-    labelContainer: {
-      [theme.breakpoints.down("sm")]: {
-        marginLeft: 0,
-      },
-      display: "inline-flex",
-      alignItems: "center",
-      marginLeft: theme.spacing(1),
-    },
-    popover: {
-      marginTop: theme.spacing(0.5),
-      zIndex: 10,
-    },
-    userChip: {
-      "&&": {
-        [theme.breakpoints.down("sm")]: {
-          padding: theme.spacing(0.5),
-        },
-        padding: theme.spacing(0.5, 3, 0.5, 1),
-      },
-      ...theme.typography.body1,
-      display: "flex",
-      textTransform: "unset",
-    },
-    userMenuContainer: {
-      cursor: "pointer",
-      display: "inline-block",
-      position: "relative",
-    },
-  }),
-  {
-    name: "UserChipMenu",
-  }
-);
-
-export default useStyles;

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

@@ -1 +0,0 @@
-<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

@@ -1 +0,0 @@
-<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

@@ -1 +0,0 @@
-<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

@@ -1 +0,0 @@
-<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

@@ -1 +0,0 @@
-<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

@@ -1 +0,0 @@
-<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

@@ -1 +0,0 @@
-<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

@@ -1 +0,0 @@
-<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

@@ -1 +0,0 @@
-<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

@@ -1 +0,0 @@
-<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

@@ -1 +0,0 @@
-<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

@@ -1 +0,0 @@
-<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

@@ -1 +0,0 @@
-<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

@@ -1 +0,0 @@
-<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

@@ -1 +0,0 @@
-<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

@@ -1 +0,0 @@
-<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

@@ -1 +0,0 @@
-<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>