@saleor/macaw-ui 0.5.2 → 0.6.2

package/src/icons/24x24/HowToIcon.tsx

@@ -0,0 +1,39 @@
+import SvgIcon from "@material-ui/core/SvgIcon";
+import * as React from "react";
+
+import { useIconStyles } from "../styles";
+import { IconProps } from "../types";
+export const HowtoIcon = React.forwardRef(
+  (props: IconProps, ref: React.Ref<SVGSVGElement>) => {
+    const classes = useIconStyles();
+    return (
+      <SvgIcon
+        width={24}
+        height={24}
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        classes={{
+          root: classes.root,
+        }}
+        {...props}
+        ref={ref}
+      >
+        <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"
+          strokeWidth={1.5}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M9.5 7.5A2.5 2.5 0 1 1 12 10v0a.5.5 0 0 0-.5.5v1"
+          stroke="currentColor"
+          strokeWidth={1.5}
+          strokeLinecap="round"
+        />
+        <path d="M12.5 14a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z" fill="currentColor" />
+      </SvgIcon>
+    );
+  }
+);

package/src/icons/24x24/LinkIcon.tsx

@@ -0,0 +1,32 @@
+import SvgIcon from "@material-ui/core/SvgIcon";
+import * as React from "react";
+
+import { useIconStyles } from "../styles";
+import { IconProps } from "../types";
+export const LinkIcon = React.forwardRef(
+  (props: IconProps, ref: React.Ref<SVGSVGElement>) => {
+    const classes = useIconStyles();
+    return (
+      <SvgIcon
+        width={24}
+        height={25}
+        viewBox="0 0 24 25"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        classes={{
+          root: classes.root,
+        }}
+        {...props}
+        ref={ref}
+      >
+        <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"
+          strokeWidth={1.5}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </SvgIcon>
+    );
+  }
+);

package/src/icons/24x24/ListIcon.tsx

@@ -0,0 +1,34 @@
+import SvgIcon from "@material-ui/core/SvgIcon";
+import * as React from "react";
+
+import { useIconStyles } from "../styles";
+import { IconProps } from "../types";
+export const ListIcon = React.forwardRef(
+  (props: IconProps, ref: React.Ref<SVGSVGElement>) => {
+    const classes = useIconStyles();
+    return (
+      <SvgIcon
+        width={24}
+        height={24}
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        classes={{
+          root: classes.root,
+        }}
+        {...props}
+        ref={ref}
+      >
+        <path
+          d="M7 7h13M7 12h13M7 17h13"
+          stroke="currentColor"
+          strokeWidth={1.5}
+          strokeLinecap="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" />
+      </SvgIcon>
+    );
+  }
+);

package/src/icons/24x24/MailIcon.tsx

@@ -0,0 +1,31 @@
+import SvgIcon from "@material-ui/core/SvgIcon";
+import * as React from "react";
+
+import { useIconStyles } from "../styles";
+import { IconProps } from "../types";
+export const MailIcon = React.forwardRef(
+  (props: IconProps, ref: React.Ref<SVGSVGElement>) => {
+    const classes = useIconStyles();
+    return (
+      <SvgIcon
+        xmlns="http://www.w3.org/2000/svg"
+        width={24}
+        height={25}
+        fill="none"
+        viewBox="0 0 24 25"
+        classes={{
+          root: classes.root,
+        }}
+        {...props}
+        ref={ref}
+      >
+        <path
+          stroke="currentColor"
+          strokeLinejoin="round"
+          strokeWidth={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"
+        />
+      </SvgIcon>
+    );
+  }
+);

package/src/icons/24x24/MigrateIcon.tsx

@@ -0,0 +1,36 @@
+import SvgIcon from "@material-ui/core/SvgIcon";
+import * as React from "react";
+
+import { useIconStyles } from "../styles";
+import { IconProps } from "../types";
+export const MigrateIcon = React.forwardRef(
+  (props: IconProps, ref: React.Ref<SVGSVGElement>) => {
+    const classes = useIconStyles();
+    return (
+      <SvgIcon
+        width={24}
+        height={24}
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        classes={{
+          root: classes.root,
+        }}
+        {...props}
+        ref={ref}
+      >
+        <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"
+          strokeWidth={1.5}
+          strokeLinecap="round"
+          strokeLinejoin="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"
+        />
+      </SvgIcon>
+    );
+  }
+);

package/src/icons/24x24/MinusIcon.tsx

@@ -0,0 +1,32 @@
+import SvgIcon from "@material-ui/core/SvgIcon";
+import * as React from "react";
+
+import { useIconStyles } from "../styles";
+import { IconProps } from "../types";
+export const MinusIcon = React.forwardRef(
+  (props: IconProps, ref: React.Ref<SVGSVGElement>) => {
+    const classes = useIconStyles();
+    return (
+      <SvgIcon
+        width={24}
+        height={25}
+        viewBox="0 0 24 25"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        classes={{
+          root: classes.root,
+        }}
+        {...props}
+        ref={ref}
+      >
+        <path
+          d="M6 12.002h12"
+          stroke="currentColor"
+          strokeWidth={1.5}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </SvgIcon>
+    );
+  }
+);

package/src/icons/24x24/ModelsIcon.tsx

@@ -0,0 +1,38 @@
+import SvgIcon from "@material-ui/core/SvgIcon";
+import * as React from "react";
+
+import { useIconStyles } from "../styles";
+import { IconProps } from "../types";
+export const ModelsIcon = React.forwardRef(
+  (props: IconProps, ref: React.Ref<SVGSVGElement>) => {
+    const classes = useIconStyles();
+    return (
+      <SvgIcon
+        width={24}
+        height={24}
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        classes={{
+          root: classes.root,
+        }}
+        {...props}
+        ref={ref}
+      >
+        <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"
+          strokeWidth={1.5}
+          strokeLinejoin="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"
+          strokeWidth={1.5}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </SvgIcon>
+    );
+  }
+);

package/src/icons/24x24/MoreHorizontalIcon.tsx

@@ -0,0 +1,31 @@
+import SvgIcon from "@material-ui/core/SvgIcon";
+import * as React from "react";
+
+import { useIconStyles } from "../styles";
+import { IconProps } from "../types";
+export const MoreHorizontalIcon = React.forwardRef(
+  (props: IconProps, ref: React.Ref<SVGSVGElement>) => {
+    const classes = useIconStyles();
+    return (
+      <SvgIcon
+        width={24}
+        height={24}
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        classes={{
+          root: classes.root,
+        }}
+        {...props}
+        ref={ref}
+      >
+        <path
+          fillRule="evenodd"
+          clipRule="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"
+        />
+      </SvgIcon>
+    );
+  }
+);

package/src/icons/24x24/NavigationIcon.tsx

@@ -0,0 +1,31 @@
+import SvgIcon from "@material-ui/core/SvgIcon";
+import * as React from "react";
+
+import { useIconStyles } from "../styles";
+import { IconProps } from "../types";
+export const NavigationIcon = React.forwardRef(
+  (props: IconProps, ref: React.Ref<SVGSVGElement>) => {
+    const classes = useIconStyles();
+    return (
+      <SvgIcon
+        width={24}
+        height={25}
+        viewBox="0 0 24 25"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        classes={{
+          root: classes.root,
+        }}
+        {...props}
+        ref={ref}
+      >
+        <path
+          d="M4 8.002h16m-16 4h16m-16 4h16"
+          stroke="currentColor"
+          strokeWidth={1.5}
+          strokeLinecap="round"
+        />
+      </SvgIcon>
+    );
+  }
+);

package/src/icons/24x24/NavigatorIcon.tsx

@@ -0,0 +1,32 @@
+import SvgIcon from "@material-ui/core/SvgIcon";
+import * as React from "react";
+
+import { useIconStyles } from "../styles";
+import { IconProps } from "../types";
+export const NavigatorIcon = React.forwardRef(
+  (props: IconProps, ref: React.Ref<SVGSVGElement>) => {
+    const classes = useIconStyles();
+    return (
+      <SvgIcon
+        width={24}
+        height={24}
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        classes={{
+          root: classes.root,
+        }}
+        {...props}
+        ref={ref}
+      >
+        <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"
+          strokeWidth={1.5}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </SvgIcon>
+    );
+  }
+);

package/src/icons/24x24/NextIcon.tsx

@@ -0,0 +1,32 @@
+import SvgIcon from "@material-ui/core/SvgIcon";
+import * as React from "react";
+
+import { useIconStyles } from "../styles";
+import { IconProps } from "../types";
+export const NextIcon = React.forwardRef(
+  (props: IconProps, ref: React.Ref<SVGSVGElement>) => {
+    const classes = useIconStyles();
+    return (
+      <SvgIcon
+        width={24}
+        height={24}
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        classes={{
+          root: classes.root,
+        }}
+        {...props}
+        ref={ref}
+      >
+        <path
+          d="m10 16 4-4-4-4"
+          stroke="currentColor"
+          strokeWidth={1.5}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </SvgIcon>
+    );
+  }
+);

package/src/icons/24x24/NoConnectionIcon.tsx

@@ -0,0 +1,36 @@
+import SvgIcon from "@material-ui/core/SvgIcon";
+import * as React from "react";
+
+import { useIconStyles } from "../styles";
+import { IconProps } from "../types";
+export const NoConnectionIcon = React.forwardRef(
+  (props: IconProps, ref: React.Ref<SVGSVGElement>) => {
+    const classes = useIconStyles();
+    return (
+      <SvgIcon
+        width={24}
+        height={25}
+        viewBox="0 0 24 25"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        classes={{
+          root: classes.root,
+        }}
+        {...props}
+        ref={ref}
+      >
+        <circle cx={12} cy={18.002} r={1} fill="currentColor" />
+        <path
+          d="M7 14.502s.358-.45 1-.968m9 .968s-.849-1.068-2.278-1.807M3 10.002s3.578-4 9-4m9 4s-1.045-1.168-2.86-2.242"
+          stroke="currentColor"
+          strokeWidth={1.5}
+          strokeLinecap="round"
+        />
+        <path
+          d="M17.645 3.885a.75.75 0 1 0-1.29-.766l1.29.766ZM6.855 19.119a.75.75 0 0 0 1.29.766l-1.29-.766Zm9.5-16-9.5 16 1.29.766 9.5-16-1.29-.766Z"
+          fill="currentColor"
+        />
+      </SvgIcon>
+    );
+  }
+);

package/src/icons/24x24/NotificationsIcon.tsx

@@ -0,0 +1,32 @@
+import SvgIcon from "@material-ui/core/SvgIcon";
+import * as React from "react";
+
+import { useIconStyles } from "../styles";
+import { IconProps } from "../types";
+export const NotificationsIcon = React.forwardRef(
+  (props: IconProps, ref: React.Ref<SVGSVGElement>) => {
+    const classes = useIconStyles();
+    return (
+      <SvgIcon
+        width={24}
+        height={24}
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        classes={{
+          root: classes.root,
+        }}
+        {...props}
+        ref={ref}
+      >
+        <path
+          d="M3 18.5h2m16 0h-2m-14 0V10a7 7 0 0 1 7-7v0a7 7 0 0 1 7 7v8.5m-14 0h4m10 0h-4m-6 0v0a2.5 2.5 0 0 0 2.5 2.5h1a2.5 2.5 0 0 0 2.5-2.5v0m-6 0h6"
+          stroke="currentColor"
+          strokeWidth={1.5}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </SvgIcon>
+    );
+  }
+);

package/src/icons/24x24/OrdersIcon.tsx

@@ -0,0 +1,36 @@
+import SvgIcon from "@material-ui/core/SvgIcon";
+import * as React from "react";
+
+import { useIconStyles } from "../styles";
+import { IconProps } from "../types";
+export const OrdersIcon = React.forwardRef(
+  (props: IconProps, ref: React.Ref<SVGSVGElement>) => {
+    const classes = useIconStyles();
+    return (
+      <SvgIcon
+        width={24}
+        height={24}
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        classes={{
+          root: classes.root,
+        }}
+        {...props}
+        ref={ref}
+      >
+        <path
+          d="M9 19.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm11 0a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Z"
+          fill="currentColor"
+        />
+        <path
+          d="M3 4h.98a2 2 0 0 1 1.927 1.465L6.056 6M8 13h-.5A1.5 1.5 0 0 0 6 14.5v0A1.5 1.5 0 0 0 7.5 16H19M8 13h10l3-7H6.056M8 13 6.056 6"
+          stroke="currentColor"
+          strokeWidth={1.5}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </SvgIcon>
+    );
+  }
+);

package/src/icons/24x24/PagesIcon.tsx

@@ -0,0 +1,32 @@
+import SvgIcon from "@material-ui/core/SvgIcon";
+import * as React from "react";
+
+import { useIconStyles } from "../styles";
+import { IconProps } from "../types";
+export const PagesIcon = React.forwardRef(
+  (props: IconProps, ref: React.Ref<SVGSVGElement>) => {
+    const classes = useIconStyles();
+    return (
+      <SvgIcon
+        width={24}
+        height={25}
+        viewBox="0 0 24 25"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        classes={{
+          root: classes.root,
+        }}
+        {...props}
+        ref={ref}
+      >
+        <path
+          d="M5 20V4a1 1 0 0 1 1-1h8.586a1 1 0 0 1 .707.293l3.414 3.414a1 1 0 0 1 .293.707V20a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1Zm3-9h8m-8 3h8m-8 3h8"
+          stroke="currentColor"
+          strokeWidth={1.5}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </SvgIcon>
+    );
+  }
+);

package/src/icons/24x24/PermissionsIcon.tsx

@@ -0,0 +1,32 @@
+import SvgIcon from "@material-ui/core/SvgIcon";
+import * as React from "react";
+
+import { useIconStyles } from "../styles";
+import { IconProps } from "../types";
+export const PermissionsIcon = React.forwardRef(
+  (props: IconProps, ref: React.Ref<SVGSVGElement>) => {
+    const classes = useIconStyles();
+    return (
+      <SvgIcon
+        width={24}
+        height={25}
+        viewBox="0 0 24 25"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        classes={{
+          root: classes.root,
+        }}
+        {...props}
+        ref={ref}
+      >
+        <path
+          d="M19 11V7.414a1 1 0 0 0-.293-.707l-3.415-3.414A1 1 0 0 0 14.585 3H6a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h5M8 11h8m-8 3h8m-8 3h3m4 2 1.5 1.5L20 17"
+          stroke="currentColor"
+          strokeWidth={1.5}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </SvgIcon>
+    );
+  }
+);

package/src/icons/24x24/PhotoIcon.tsx

@@ -0,0 +1,32 @@
+import SvgIcon from "@material-ui/core/SvgIcon";
+import * as React from "react";
+
+import { useIconStyles } from "../styles";
+import { IconProps } from "../types";
+export const PhotoIcon = React.forwardRef(
+  (props: IconProps, ref: React.Ref<SVGSVGElement>) => {
+    const classes = useIconStyles();
+    return (
+      <SvgIcon
+        width={24}
+        height={25}
+        viewBox="0 0 24 25"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        classes={{
+          root: classes.root,
+        }}
+        {...props}
+        ref={ref}
+      >
+        <path
+          d="M3 18V3.5a.5.5 0 0 1 .5-.5h17a.5.5 0 0 1 .5.5V14M3 18v2.5a.5.5 0 0 0 .5.5h17a.5.5 0 0 0 .5-.5V14M3 18l6.184-6.184a.5.5 0 0 1 .665-.036l1.801 1.44a.5.5 0 0 0 .666-.036l3.811-3.811a.5.5 0 0 1 .726.019L21 14"
+          stroke="currentColor"
+          strokeWidth={1.5}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </SvgIcon>
+    );
+  }
+);

package/src/icons/24x24/PlayIcon.tsx

@@ -0,0 +1,31 @@
+import SvgIcon from "@material-ui/core/SvgIcon";
+import * as React from "react";
+
+import { useIconStyles } from "../styles";
+import { IconProps } from "../types";
+export const PlayIcon = React.forwardRef(
+  (props: IconProps, ref: React.Ref<SVGSVGElement>) => {
+    const classes = useIconStyles();
+    return (
+      <SvgIcon
+        width={24}
+        height={25}
+        viewBox="0 0 24 25"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        classes={{
+          root: classes.root,
+        }}
+        {...props}
+        ref={ref}
+      >
+        <path
+          d="M6 19V5l12 7-12 7Z"
+          stroke="currentColor"
+          strokeWidth={1.5}
+          strokeLinejoin="round"
+        />
+      </SvgIcon>
+    );
+  }
+);

package/src/icons/24x24/PlusIcon.tsx

@@ -0,0 +1,32 @@
+import SvgIcon from "@material-ui/core/SvgIcon";
+import * as React from "react";
+
+import { useIconStyles } from "../styles";
+import { IconProps } from "../types";
+export const PlusIcon = React.forwardRef(
+  (props: IconProps, ref: React.Ref<SVGSVGElement>) => {
+    const classes = useIconStyles();
+    return (
+      <SvgIcon
+        width={24}
+        height={25}
+        viewBox="0 0 24 25"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        classes={{
+          root: classes.root,
+        }}
+        {...props}
+        ref={ref}
+      >
+        <path
+          d="M6 12h12m-6-6v12"
+          stroke="currentColor"
+          strokeWidth={1.5}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </SvgIcon>
+    );
+  }
+);