@saleor/macaw-ui 0.5.2 → 0.6.2

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

@@ -0,0 +1,33 @@
+import SvgIcon from "@material-ui/core/SvgIcon";
+import * as React from "react";
+
+import { useIconStyles } from "../styles";
+import { IconProps } from "../types";
+export const CustomersIcon = 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}
+      >
+        <circle cx={12} cy={7} r={4} stroke="currentColor" strokeWidth={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"
+          strokeWidth={1.5}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </SvgIcon>
+    );
+  }
+);

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

@@ -0,0 +1,30 @@
+import SvgIcon from "@material-ui/core/SvgIcon";
+import * as React from "react";
+
+import { useIconStyles } from "../styles";
+import { IconProps } from "../types";
+export const DashboardIcon = 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="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"
+          strokeWidth={1.5}
+        />
+      </SvgIcon>
+    );
+  }
+);

package/src/icons/24x24/DeleteIcon.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 DeleteIcon = 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 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"
+          strokeWidth={1.5}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </SvgIcon>
+    );
+  }
+);

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

@@ -0,0 +1,44 @@
+import SvgIcon from "@material-ui/core/SvgIcon";
+import * as React from "react";
+
+import { useIconStyles } from "../styles";
+import { IconProps } from "../types";
+export const DeveloperIcon = 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="m12.5 10.5-1.5 7"
+          stroke="currentColor"
+          strokeWidth={1.5}
+          strokeLinecap="round"
+          strokeLinejoin="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"
+          strokeWidth={1.5}
+        />
+        <path
+          d="m8 12-2 2 2 2m8-4 2 2-2 2"
+          stroke="currentColor"
+          strokeWidth={1.5}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </SvgIcon>
+    );
+  }
+);

package/src/icons/24x24/DiscountsIcon.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 DiscountsIcon = 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
+          fillRule="evenodd"
+          clipRule="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"
+        />
+      </SvgIcon>
+    );
+  }
+);

package/src/icons/24x24/DownloadIcon.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 DownloadIcon = React.forwardRef(
+  (props: IconProps, ref: React.Ref<SVGSVGElement>) => {
+    const classes = useIconStyles();
+    return (
+      <SvgIcon
+        xmlns="http://www.w3.org/2000/svg"
+        width={24}
+        height={24}
+        fill="none"
+        viewBox="0 0 24 24"
+        classes={{
+          root: classes.root,
+        }}
+        {...props}
+        ref={ref}
+      >
+        <path
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={1.5}
+          d="M12 3v14m0 0-4-4m4 4 4-4M3 21h18"
+        />
+      </SvgIcon>
+    );
+  }
+);

package/src/icons/24x24/DragIcon.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 DragIcon = 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="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"
+        />
+      </SvgIcon>
+    );
+  }
+);

package/src/icons/24x24/EditIcon.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 EditIcon = 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="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"
+          strokeWidth={1.5}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </SvgIcon>
+    );
+  }
+);

package/src/icons/24x24/EnvironmentIcon.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 EnvironmentIcon = 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 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"
+          strokeWidth={1.5}
+          strokeLinecap="round"
+          strokeLinejoin="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"
+        />
+      </SvgIcon>
+    );
+  }
+);

package/src/icons/24x24/ExpandIcon.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 ExpandIcon = 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="m8 10.5 4 4 4-4"
+          stroke="currentColor"
+          strokeWidth={1.5}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <circle
+          cx={12}
+          cy={12}
+          r={10.25}
+          stroke="currentColor"
+          strokeWidth={1.5}
+        />
+      </SvgIcon>
+    );
+  }
+);

package/src/icons/24x24/ExpendableIcon.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 ExpendableIcon = 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 7h13m-10 5h10m-10 5h10"
+          stroke="currentColor"
+          strokeWidth={1.5}
+          strokeLinecap="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" />
+      </SvgIcon>
+    );
+  }
+);

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

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

package/src/icons/24x24/EyeIcon.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 EyeIcon = 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
+          fillRule="evenodd"
+          clipRule="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"
+        />
+      </SvgIcon>
+    );
+  }
+);

package/src/icons/24x24/FilteringIcon.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 FilteringIcon = 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="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"
+          strokeWidth={1.5}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </SvgIcon>
+    );
+  }
+);

package/src/icons/24x24/GenerateIcon.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 GenerateIcon = 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.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"
+          strokeWidth={1.5}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </SvgIcon>
+    );
+  }
+);

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

@@ -0,0 +1,40 @@
+import SvgIcon from "@material-ui/core/SvgIcon";
+import * as React from "react";
+
+import { useIconStyles } from "../styles";
+import { IconProps } from "../types";
+export const GithubIcon = 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"
+          strokeWidth={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"
+          strokeWidth={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"
+          strokeWidth={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"
+        />
+      </SvgIcon>
+    );
+  }
+);

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

@@ -0,0 +1,61 @@
+import SvgIcon from "@material-ui/core/SvgIcon";
+import * as React from "react";
+
+import { useIconStyles } from "../styles";
+import { IconProps } from "../types";
+export const GridIcon = 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}
+      >
+        <rect
+          x={3}
+          y={3}
+          width={7}
+          height={7}
+          rx={1}
+          stroke="currentColor"
+          strokeWidth={1.5}
+        />
+        <rect
+          x={14}
+          y={3}
+          width={7}
+          height={7}
+          rx={1}
+          stroke="currentColor"
+          strokeWidth={1.5}
+        />
+        <rect
+          x={3}
+          y={14}
+          width={7}
+          height={7}
+          rx={1}
+          stroke="currentColor"
+          strokeWidth={1.5}
+        />
+        <rect
+          x={14}
+          y={14}
+          width={7}
+          height={7}
+          rx={1}
+          stroke="currentColor"
+          strokeWidth={1.5}
+        />
+      </SvgIcon>
+    );
+  }
+);

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

@@ -0,0 +1,35 @@
+import SvgIcon from "@material-ui/core/SvgIcon";
+import * as React from "react";
+
+import { useIconStyles } from "../styles";
+import { IconProps } from "../types";
+export const HelpIcon = 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="M9.5 9.5A2.5 2.5 0 1 1 12 12v0a.5.5 0 0 0-.5.5v1"
+          stroke="currentColor"
+          strokeWidth={1.5}
+          strokeLinecap="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"
+        />
+      </SvgIcon>
+    );
+  }
+);