@saleor/macaw-ui 0.5.2 → 0.6.0

package/src/Pagination/PaginationRowNumberSelect.tsx

@@ -15,39 +15,40 @@ export interface PaginationRowNumberSelectProps {
   onChange?: (value: number) => void;
 }
 
-export const PaginationRowNumberSelect: React.FC<PaginationRowNumberSelectProps> =
-  ({ className, choices, disabled, labels, rowNumber, onChange }) => {
-    const classes = useStyles({});
+export const PaginationRowNumberSelect: React.FC<
+  PaginationRowNumberSelectProps
+> = ({ className, choices, disabled, labels, rowNumber, onChange }) => {
+  const classes = useStyles({});
 
-    return (
-      <div className={clsx(classes.rowNumber, className)}>
-        <span className={classes.rowNumberLabel}>{labels.noOfRows}</span>
-        {onChange ? (
-          <Select
-            data-test-id="PaginationRowNumberSelect"
-            disabled={disabled}
-            inputProps={{
-              className: classes.rowNumberSelectLabel,
-            }}
-            className={classes.rowNumberSelect}
-            value={rowNumber}
-            onChange={(event) => onChange(event.target.value as number)}
-          >
-            {choices.length > 0 &&
-              choices.map((choice) => (
-                <MenuItem
-                  value={choice}
-                  key={choice}
-                  data-test-id="rowNumberOption"
-                >
-                  {choice}
-                </MenuItem>
-              ))}
-          </Select>
-        ) : (
-          ` ${rowNumber}`
-        )}
-      </div>
-    );
-  };
+  return (
+    <div className={clsx(classes.rowNumber, className)}>
+      <span className={classes.rowNumberLabel}>{labels.noOfRows}</span>
+      {onChange ? (
+        <Select
+          data-test-id="PaginationRowNumberSelect"
+          disabled={disabled}
+          inputProps={{
+            className: classes.rowNumberSelectLabel,
+          }}
+          className={classes.rowNumberSelect}
+          value={rowNumber}
+          onChange={(event) => onChange(event.target.value as number)}
+        >
+          {choices.length > 0 &&
+            choices.map((choice) => (
+              <MenuItem
+                value={choice}
+                key={choice}
+                data-test-id="rowNumberOption"
+              >
+                {choice}
+              </MenuItem>
+            ))}
+        </Select>
+      ) : (
+        ` ${rowNumber}`
+      )}
+    </div>
+  );
+};
 PaginationRowNumberSelect.displayName = "PaginationRowNumberSelect";

package/src/Tooltip/Arrow.tsx

@@ -0,0 +1,54 @@
+import { Side } from "@floating-ui/react-dom-interactions";
+import clsx from "clsx";
+import React, { forwardRef } from "react";
+
+import { useTheme } from "../theme";
+import { useArrowStyles } from "./styles";
+import { TooltipProps } from "./Tooltip";
+
+interface ArrowProps {
+  x: number | undefined;
+  y: number | undefined;
+  side: Side;
+  variant: TooltipProps["variant"];
+}
+
+export const Arrow = forwardRef<HTMLDivElement, ArrowProps>(
+  ({ x, y, side, variant }, ref) => {
+    const { themeType } = useTheme();
+    const classes = useArrowStyles({ variant, side });
+
+    return (
+      <div
+        className={clsx(
+          classes.arrowContainer,
+          themeType === "dark" && classes.dark
+        )}
+        ref={ref}
+        style={{
+          top: y ?? "",
+          left: x ?? "",
+        }}
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 8" fill="none">
+          <path
+            className={classes.backgroundPath}
+            fillRule="evenodd"
+            d="M12.25 7 8.6 2.133a2 2 0 0 0-3.2 0L1.75 7h10.5Z"
+            clipRule="evenodd"
+          />
+          <path
+            className={classes.borderPath}
+            fillRule="evenodd"
+            d="M5.8 2.433c.6-.8 1.8-.8 2.4 0L11.25 6.5h1.25L9 1.833a2.5 2.5 0 0 0-4 0L1.5 6.5h1.25L5.8 2.433Z"
+            clipRule="evenodd"
+          />
+          <path
+            className={classes.backgroundPath}
+            d="M12.5 6.5h-11l-.75 1h12.5l-.75-1Z"
+          />
+        </svg>
+      </div>
+    );
+  }
+);

package/src/Tooltip/Tooltip.stories.tsx

@@ -1,19 +1,82 @@
 import { Meta, Story } from "@storybook/react";
+import isChromatic from "chromatic/isChromatic";
 import React from "react";
 
 import { SquareButton } from "../SquareButton";
+import { makeStyles } from "../theme";
+import { Decorator } from "../utils/Decorator";
 import { Tooltip, TooltipProps } from "./Tooltip";
 
-const props: TooltipProps = {
-  title: "Tooltip",
-  children: <SquareButton>Hover</SquareButton>,
+const Template: Story<TooltipProps> = (args) => {
+  return <Tooltip {...args} />;
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  variant: undefined,
+};
+
+export const WithHeader = Template.bind({});
+WithHeader.args = {
+  variant: undefined,
+  header: "App Permissions",
+};
+
+export const Success = Template.bind({});
+Success.args = {
+  variant: "success",
 };
 
-export const Info: Story = () => <Tooltip variant="info" {...props} />;
-export const Success: Story = () => <Tooltip variant="success" {...props} />;
-export const Error: Story = () => <Tooltip variant="error" {...props} />;
-export const Warning: Story = () => <Tooltip variant="warning" {...props} />;
+export const Error = Template.bind({});
+Error.args = {
+  variant: "error",
+};
+
+export const Warning = Template.bind({});
+Warning.args = {
+  variant: "warning",
+};
+
+const useStyles = makeStyles({
+  pageWrapper: {
+    display: "flex",
+    width: "210vw",
+    height: "150vh",
+  },
+  storyWrapper: {
+    paddingTop: "10%",
+    paddingLeft: "90vw",
+  },
+  tip: {
+    position: "static",
+    left: "12px",
+    top: "12px",
+  },
+});
+
+const TooltipDecorator = (storyFn: any) => {
+  const classes = useStyles();
+
+  if (isChromatic()) {
+    return storyFn();
+  }
+
+  return (
+    <div className={classes.pageWrapper}>
+      <div className={classes.tip}>Scroll to right to test tooltip</div>
+      <div className={classes.storyWrapper}>{storyFn()}</div>
+    </div>
+  );
+};
 
 export default {
   title: "Tooltip",
-} as Meta;
+  component: Tooltip,
+  args: {
+    title: "Tooltip",
+    children: <SquareButton>Hover</SquareButton>,
+    placement: "top-start",
+    open: isChromatic() ? true : undefined,
+  },
+  decorators: [TooltipDecorator, Decorator],
+} as Meta<TooltipProps>;

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/styles.ts

@@ -1,28 +1,140 @@
-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;

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>