@saleor/macaw-ui 0.5.2 → 0.6.2

package/src/icons/20x20/PlusSmallIcon.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 PlusSmallIcon = React.forwardRef(
+  (props: IconProps, ref: React.Ref<SVGSVGElement>) => {
+    const classes = useIconStyles();
+    return (
+      <SvgIcon
+        width={20}
+        height={20}
+        viewBox="0 0 20 20"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        classes={{
+          root: classes.root,
+        }}
+        {...props}
+        ref={ref}
+      >
+        <path
+          d="M10 5v10m-5-5h10"
+          stroke="currentColor"
+          strokeWidth={1.5}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </SvgIcon>
+    );
+  }
+);

package/src/icons/20x20/SearchSmallIcon.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 SearchSmallIcon = React.forwardRef(
+  (props: IconProps, ref: React.Ref<SVGSVGElement>) => {
+    const classes = useIconStyles();
+    return (
+      <SvgIcon
+        width={20}
+        height={20}
+        viewBox="0 0 20 20"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        classes={{
+          root: classes.root,
+        }}
+        {...props}
+        ref={ref}
+      >
+        <path
+          fillRule="evenodd"
+          clipRule="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"
+        />
+      </SvgIcon>
+    );
+  }
+);

package/src/icons/20x20/SortBigSmallIcon.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 SortBigSmallIcon = React.forwardRef(
+  (props: IconProps, ref: React.Ref<SVGSVGElement>) => {
+    const classes = useIconStyles();
+    return (
+      <SvgIcon
+        width={20}
+        height={20}
+        viewBox="0 0 20 20"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        classes={{
+          root: classes.root,
+        }}
+        {...props}
+        ref={ref}
+      >
+        <path
+          d="M10 4v12m0-12L6 8m4-4 4 4"
+          stroke="currentColor"
+          strokeWidth={1.5}
+          strokeLinecap="round"
+        />
+      </SvgIcon>
+    );
+  }
+);

package/src/icons/20x20/SortSmallSmallIcon.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 SortSmallSmallIcon = React.forwardRef(
+  (props: IconProps, ref: React.Ref<SVGSVGElement>) => {
+    const classes = useIconStyles();
+    return (
+      <SvgIcon
+        width={20}
+        height={20}
+        viewBox="0 0 20 20"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        classes={{
+          root: classes.root,
+        }}
+        {...props}
+        ref={ref}
+      >
+        <path
+          d="M10 4v12m0 0-4-4m4 4 4-4"
+          stroke="currentColor"
+          strokeWidth={1.5}
+          strokeLinecap="round"
+        />
+      </SvgIcon>
+    );
+  }
+);

package/src/icons/20x20/index.ts

@@ -0,0 +1,14 @@
+export * from "./BackSmallIcon";
+export * from "./BookmarksSmallIcon";
+export * from "./CheckboxSmallIcon";
+export * from "./ChevronSmallIcon";
+export * from "./CloseSmallIcon";
+export * from "./DragSmallIcon";
+export * from "./FilterSmallIcon";
+export * from "./MinusSmallIcon";
+export * from "./MoreSmallIcon";
+export * from "./NextSmallIcon";
+export * from "./PlusSmallIcon";
+export * from "./SearchSmallIcon";
+export * from "./SortBigSmallIcon";
+export * from "./SortSmallSmallIcon";

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

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

package/src/icons/24x24/ArrowRightIcon.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 ArrowRightIcon = 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 12h15.5m0 0-5-5m5 5-5 5"
+          stroke="currentColor"
+          strokeWidth={1.5}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </SvgIcon>
+    );
+  }
+);

package/src/icons/24x24/BackspaceIcon.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 BackspaceIcon = 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="M22 6H7l-5 6 5 6h15V6Zm-10 4 4 4m0-4-4 4"
+          stroke="currentColor"
+          strokeWidth={1.5}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </SvgIcon>
+    );
+  }
+);

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

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

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

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

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

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

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

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

package/src/icons/24x24/Close2Icon.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 Close2Icon = 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="m8 8.002 8 8m-8 0 8-8"
+          stroke="currentColor"
+          strokeWidth={1.5}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <circle
+          cx={12}
+          cy={12.002}
+          r={10}
+          stroke="currentColor"
+          strokeWidth={1.5}
+        />
+      </SvgIcon>
+    );
+  }
+);

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

package/src/icons/24x24/CodeIcon.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 CodeIcon = 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="m4 18 6-6-6-6"
+          stroke="currentColor"
+          strokeWidth={1.5}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M12 18h8"
+          stroke="currentColor"
+          strokeWidth={1.5}
+          strokeLinecap="round"
+        />
+      </SvgIcon>
+    );
+  }
+);

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

package/src/icons/24x24/CopyIcon.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 CopyIcon = 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 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"
+          strokeWidth={1.5}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M4 16V5a1 1 0 0 1 1-1h11"
+          stroke="currentColor"
+          strokeWidth={1.5}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </SvgIcon>
+    );
+  }
+);