@saleor/macaw-ui 0.5.2 → 0.6.2

package/src/icons/32x32/SearchLargeIcon.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 SearchLargeIcon = React.forwardRef(
+  (props: IconProps, ref: React.Ref<SVGSVGElement>) => {
+    const classes = useIconStyles();
+    return (
+      <SvgIcon
+        xmlns="http://www.w3.org/2000/svg"
+        width={32}
+        height={32}
+        fill="none"
+        viewBox="0 0 32 32"
+        classes={{
+          root: classes.root,
+        }}
+        {...props}
+        ref={ref}
+      >
+        <circle
+          cx={14}
+          cy={14}
+          r={11.25}
+          stroke="currentColor"
+          strokeWidth={1.5}
+        />
+        <path
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={1.5}
+          d="m22 22 7 7"
+        />
+      </SvgIcon>
+    );
+  }
+);

package/src/icons/32x32/ShippingLargeIcon.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 ShippingLargeIcon = React.forwardRef(
+  (props: IconProps, ref: React.Ref<SVGSVGElement>) => {
+    const classes = useIconStyles();
+    return (
+      <SvgIcon
+        width={32}
+        height={32}
+        viewBox="0 0 32 32"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        classes={{
+          root: classes.root,
+        }}
+        {...props}
+        ref={ref}
+      >
+        <path
+          d="M18.5 7h-4.653a1 1 0 0 0-.986.836l-2.667 16A1 1 0 0 0 11.18 25h13.973a1 1 0 0 0 .986-.836l2.667-16A1 1 0 0 0 27.82 7H23.5m-5 0-.806 4.836A1 1 0 0 0 18.68 13h2.973a1 1 0 0 0 .986-.836L23.5 7m-5 0h5M2 12h7m-7 4h5m-5 4h3"
+          stroke="currentColor"
+          strokeWidth={1.5}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </SvgIcon>
+    );
+  }
+);

package/src/icons/32x32/SiteSettingsLargeIcon.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 SitesettingsLargeIcon = React.forwardRef(
+  (props: IconProps, ref: React.Ref<SVGSVGElement>) => {
+    const classes = useIconStyles();
+    return (
+      <SvgIcon
+        xmlns="http://www.w3.org/2000/svg"
+        width={32}
+        height={32}
+        fill="none"
+        viewBox="0 0 32 32"
+        classes={{
+          root: classes.root,
+        }}
+        {...props}
+        ref={ref}
+      >
+        <path
+          fill="currentColor"
+          fillRule="evenodd"
+          d="m5.245 6.251.938-.94a1.938 1.938 0 0 1 2.033-.456c.552.2 1.3.501 2.24.901.4.17.847.174 1.248.007a1.71 1.71 0 0 0 .94-.994c.354-.958.614-1.616.808-2.068A1.986 1.986 0 0 1 15.28 1.5h1.33c.755 0 1.475.43 1.808 1.157.21.457.494 1.131.892 2.127.176.442.516.785.93.956.415.171.88.16 1.288-.026a46.97 46.97 0 0 1 2.093-.908 1.989 1.989 0 0 1 2.14.445l.913.912c.534.534.739 1.348.461 2.096a50.02 50.02 0 0 1-.87 2.136 1.747 1.747 0 0 0-.011 1.347c.18.436.527.763.94.916.975.36 1.644.624 2.104.82a1.986 1.986 0 0 1 1.202 1.829v1.279c0 .754-.428 1.473-1.152 1.806-.466.215-1.154.506-2.17.913-.397.159-.728.48-.901.903a1.74 1.74 0 0 0 .03 1.377c.422.921.703 1.568.886 2.024a1.987 1.987 0 0 1-.44 2.144l-.94.942a1.934 1.934 0 0 1-2.031.452c-.55-.2-1.296-.5-2.234-.9a1.613 1.613 0 0 0-1.253-.01 1.721 1.721 0 0 0-.945.999c-.355.954-.613 1.61-.806 2.06a1.987 1.987 0 0 1-1.829 1.204h-1.332c-.756 0-1.476-.43-1.808-1.156a49.128 49.128 0 0 1-.894-2.13 1.716 1.716 0 0 0-.925-.953 1.612 1.612 0 0 0-1.293.025c-.96.438-1.624.722-2.084.906a1.99 1.99 0 0 1-2.144-.445l-.915-.916a1.987 1.987 0 0 1-.46-2.095c.175-.473.45-1.153.87-2.135.181-.425.187-.913.01-1.342a1.634 1.634 0 0 0-.935-.912 47.524 47.524 0 0 1-2.106-.825A1.986 1.986 0 0 1 1.5 16.695V15.41c0-.756.43-1.476 1.157-1.809a50.73 50.73 0 0 1 2.162-.907c.395-.158.726-.477.899-.898a1.74 1.74 0 0 0-.029-1.382 47.664 47.664 0 0 1-.884-2.02 1.987 1.987 0 0 1 .44-2.143Zm2 .119a.438.438 0 0 1 .46-.105 46.19 46.19 0 0 1 2.164.871 3.106 3.106 0 0 0 2.41.012 3.214 3.214 0 0 0 1.772-1.859c.35-.947.6-1.578.78-1.997A.486.486 0 0 1 15.28 3h1.33c.19 0 .364.108.444.281.194.424.468 1.072.863 2.059a3.22 3.22 0 0 0 1.75 1.787 3.113 3.113 0 0 0 2.484-.049 45.519 45.519 0 0 1 2.024-.878.489.489 0 0 1 .525.112l.913.912a.487.487 0 0 1 .116.513c-.163.44-.427 1.094-.844 2.069a3.247 3.247 0 0 0-.018 2.508 3.14 3.14 0 0 0 1.807 1.75c.966.358 1.608.611 2.034.793a.488.488 0 0 1 .292.45v1.279c0 .19-.108.364-.28.444a47.72 47.72 0 0 1-2.1.883 3.14 3.14 0 0 0-1.732 1.727 3.24 3.24 0 0 0 .055 2.57c.418.912.688 1.534.858 1.958a.487.487 0 0 1-.11.526l-.94.94a.434.434 0 0 1-.455.104 46.597 46.597 0 0 1-2.16-.872 3.113 3.113 0 0 0-2.414-.014 3.22 3.22 0 0 0-1.779 1.862c-.35.945-.6 1.575-.778 1.993a.487.487 0 0 1-.45.293h-1.332a.486.486 0 0 1-.445-.281 47.873 47.873 0 0 1-.864-2.06 3.216 3.216 0 0 0-1.742-1.783 3.112 3.112 0 0 0-2.492.045c-.947.433-1.587.706-2.017.877a.49.49 0 0 1-.526-.111l-.916-.916a.487.487 0 0 1-.115-.513c.163-.44.426-1.093.843-2.067.337-.79.35-1.697.017-2.505a3.133 3.133 0 0 0-1.798-1.745 46.81 46.81 0 0 1-2.036-.797.486.486 0 0 1-.292-.449V15.41c0-.191.108-.365.281-.445.431-.197 1.09-.476 2.095-.878a3.136 3.136 0 0 0 1.729-1.72 3.24 3.24 0 0 0-.053-2.579 46.3 46.3 0 0 1-.855-1.953.487.487 0 0 1 .11-.525l.938-.94Z"
+          clipRule="evenodd"
+        />
+        <path fill="currentColor" d="M18 16a2 2 0 1 1-4 0 2 2 0 0 1 4 0Z" />
+      </SvgIcon>
+    );
+  }
+);

package/src/icons/32x32/StaffMembersLargeIcon.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 StaffmembersLargeIcon = React.forwardRef(
+  (props: IconProps, ref: React.Ref<SVGSVGElement>) => {
+    const classes = useIconStyles();
+    return (
+      <SvgIcon
+        width={32}
+        height={32}
+        viewBox="0 0 32 32"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        classes={{
+          root: classes.root,
+        }}
+        {...props}
+        ref={ref}
+      >
+        <circle cx={16} cy={12} r={2} stroke="currentColor" strokeWidth={1.5} />
+        <path
+          d="M20.902 20h-9.804a.098.098 0 0 1-.098-.098A3.902 3.902 0 0 1 14.902 16h2.196A3.902 3.902 0 0 1 21 19.902a.098.098 0 0 1-.098.098ZM11 26h4m-4-3h10m-3 3h3"
+          stroke="currentColor"
+          strokeWidth={1.5}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M13.5 5H8a1 1 0 0 0-1 1v23a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1h-5.5m-5 0V3a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1v2m-5 0v1a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1V5"
+          stroke="currentColor"
+          strokeWidth={1.5}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </SvgIcon>
+    );
+  }
+);

package/src/icons/32x32/TaxesLargeIcon.tsx

@@ -0,0 +1,55 @@
+import SvgIcon from "@material-ui/core/SvgIcon";
+import * as React from "react";
+
+import { useIconStyles } from "../styles";
+import { IconProps } from "../types";
+export const TaxesLargeIcon = React.forwardRef(
+  (props: IconProps, ref: React.Ref<SVGSVGElement>) => {
+    const classes = useIconStyles();
+    return (
+      <SvgIcon
+        width={32}
+        height={32}
+        viewBox="0 0 32 32"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        classes={{
+          root: classes.root,
+        }}
+        {...props}
+        ref={ref}
+      >
+        <circle cx={12} cy={13} r={1} fill="currentColor" />
+        <circle cx={16} cy={13} r={1} fill="currentColor" />
+        <circle cx={20} cy={13} r={1} fill="currentColor" />
+        <circle cx={12} cy={17} r={1} fill="currentColor" />
+        <circle cx={16} cy={17} r={1} fill="currentColor" />
+        <circle cx={20} cy={17} r={1} fill="currentColor" />
+        <circle cx={12} cy={21} r={1} fill="currentColor" />
+        <circle cx={16} cy={21} r={1} fill="currentColor" />
+        <circle cx={16} cy={25} r={1} fill="currentColor" />
+        <circle cx={20} cy={21} r={1} fill="currentColor" />
+        <path
+          d="M25 3H7a1 1 0 0 0-1 1v24a1 1 0 0 0 1 1h18a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1Z"
+          stroke="currentColor"
+          strokeWidth={1.5}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <mask id="a" fill="currentColor">
+          <rect x={9} y={6} width={14} height={4} rx={1} />
+        </mask>
+        <rect
+          x={9}
+          y={6}
+          width={14}
+          height={4}
+          rx={1}
+          stroke="currentColor"
+          strokeWidth={3}
+          mask="url(#a)"
+        />
+      </SvgIcon>
+    );
+  }
+);

package/src/icons/32x32/TokenLargeIcon.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 TokenLargeIcon = React.forwardRef(
+  (props: IconProps, ref: React.Ref<SVGSVGElement>) => {
+    const classes = useIconStyles();
+    return (
+      <SvgIcon
+        width={32}
+        height={32}
+        viewBox="0 0 32 32"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        classes={{
+          root: classes.root,
+        }}
+        {...props}
+        ref={ref}
+      >
+        <path
+          d="M21 20a9 9 0 1 0-8.466-5.94L2 25v5h5.5l2-2v-2H12v-2h2v-2h2l2.035-2.5A8.98 8.98 0 0 0 21 20Z"
+          stroke="currentColor"
+          strokeWidth={1.5}
+          strokeLinejoin="round"
+        />
+        <circle
+          cx={23}
+          cy={9}
+          r={2.25}
+          stroke="currentColor"
+          strokeWidth={1.5}
+        />
+      </SvgIcon>
+    );
+  }
+);

package/src/icons/32x32/WarehouseLargeIcon.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 WarehouseLargeIcon = React.forwardRef(
+  (props: IconProps, ref: React.Ref<SVGSVGElement>) => {
+    const classes = useIconStyles();
+    return (
+      <SvgIcon
+        width={32}
+        height={32}
+        viewBox="0 0 32 32"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        classes={{
+          root: classes.root,
+        }}
+        {...props}
+        ref={ref}
+      >
+        <path
+          d="M22.5 16V4a1 1 0 0 0-1-1H18m4.5 13h-2m2 0h2m-15 0V4a1 1 0 0 1 1-1H14M9.5 16h2m-2 0h-2m8.5 0v13m0-13h-4.5m4.5 0h4.5M16 29H4a1 1 0 0 1-1-1V17a1 1 0 0 1 1-1h3.5M16 29h12a1 1 0 0 0 1-1V17a1 1 0 0 0-1-1h-3.5m-13 0v4a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1v-4m13 0v4a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-4M14 3v4a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V3m-4 0h4"
+          stroke="currentColor"
+          strokeWidth={1.5}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </SvgIcon>
+    );
+  }
+);

package/src/icons/32x32/WifiLargeIcon.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 WifiLargeIcon = React.forwardRef(
+  (props: IconProps, ref: React.Ref<SVGSVGElement>) => {
+    const classes = useIconStyles();
+    return (
+      <SvgIcon
+        width={32}
+        height={32}
+        viewBox="0 0 32 32"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        classes={{
+          root: classes.root,
+        }}
+        {...props}
+        ref={ref}
+      >
+        <circle cx={16} cy={25} r={2} fill="currentColor" />
+        <path
+          d="M8 16s3.18-3.5 8-3.5 8 3.5 8 3.5m-12 4s1.59-1.5 4-1.5 4 1.5 4 1.5M3 11.5S8.169 6 16 6s13 5.5 13 5.5"
+          stroke="currentColor"
+          strokeWidth={1.5}
+          strokeLinecap="round"
+        />
+      </SvgIcon>
+    );
+  }
+);

package/src/icons/32x32/index.ts

@@ -0,0 +1,19 @@
+export * from "./AttributesLargeIcon";
+export * from "./CustomerLargeIcon";
+export * from "./DigitalLargeIcon";
+export * from "./DiscountLargeIcon";
+export * from "./FilteringLargeIcon";
+export * from "./GiftCardLargeIcon";
+export * from "./NavigationLargeIcon";
+export * from "./NotesLargeIcon";
+export * from "./OmnichannelLargeIcon";
+export * from "./PermissionLargeIcon";
+export * from "./ProductLargeIcon";
+export * from "./SearchLargeIcon";
+export * from "./ShippingLargeIcon";
+export * from "./SiteSettingsLargeIcon";
+export * from "./StaffMembersLargeIcon";
+export * from "./TaxesLargeIcon";
+export * from "./TokenLargeIcon";
+export * from "./WarehouseLargeIcon";
+export * from "./WifiLargeIcon";

package/src/icons/index.ts

@@ -1,88 +1,33 @@
-export * from "./AddEnvironmentIcon";
-export * from "./AppsIcon";
+export * from "./20x20";
+export * from "./24x24";
+export * from "./32x32";
+export * from "./indicator";
+
+export * from "./Logo";
+export * from "./LogoDark";
+export * from "./LogoLight";
+
+// Legacy icons
 export * from "./ArrowDropdownIcon";
-export * from "./ArrowRightIcon";
-export * from "./AttributesLargeIcon";
-export * from "./BackspaceIcon";
-export * from "./BillingIcon";
-export * from "./CalendarIcon";
-export * from "./CheckboxCheckedIcon";
 export * from "./CheckboxIcon";
+export * from "./CheckboxCheckedIcon";
 export * from "./CheckboxIndeterminateIcon";
-export * from "./ChevronIcon";
 export * from "./CircleIndicatorIcon";
-export * from "./Close2Icon";
-export * from "./CloseIcon";
-export * from "./ColumnsIcon";
 export * from "./CommentSmallIcon";
 export * from "./CompleteIcon";
-export * from "./CopyIcon";
-export * from "./CustomersIcon";
 export * from "./CustomersLargeIcon";
-export * from "./DashboardIcon";
-export * from "./DeleteIcon";
 export * from "./DeleteUserIcon";
-export * from "./DeveloperIcon";
-export * from "./DigitalLargeIcon";
 export * from "./DigitalSmallIcon";
-export * from "./DiscountsIcon";
-export * from "./DiscountsLargeIcon";
-export * from "./DownloadIcon";
-export * from "./DragIcon";
-export * from "./EditIcon";
 export * from "./EditSmallIcon";
-export * from "./EnvironmentIcon";
-export * from "./ExpandIcon";
-export * from "./EyeIcon";
-export * from "./FilteringIcon";
-export * from "./FilteringLargeIcon";
 export * from "./GiftCardLargeIcon";
-export * from "./HelpIcon";
 export * from "./ImageIcon";
 export * from "./InfoIcon";
-export * from "./LinkIcon";
-export * from "./MailIcon";
-export * from "./MinusIcon";
-export * from "./MoreHorizontalIcon";
-export * from "./MoreIcon";
-export * from "./NavigationIcon";
-export * from "./NavigationLargeIcon";
-export * from "./NavigatorIcon";
-export * from "./NextIcon";
-export * from "./NoConnectionIcon";
 export * from "./NotAllowedIcon";
 export * from "./NotAllowedInvertedIcon";
-export * from "./NotesLargeIcon";
-export * from "./NotificationsIcon";
-export * from "./OmnichannelLargeIcon";
-export * from "./OrdersIcon";
-export * from "./PagesIcon";
-export * from "./PermissionLargeIcon";
-export * from "./PhotoIcon";
-export * from "./PlusIcon";
-export * from "./PreviousIcon";
-export * from "./PrinterIcon";
-export * from "./PrivacyIcon";
-export * from "./ProductIcon";
-export * from "./ProductLargeIcon";
+export * from "./MoreIcon";
 export * from "./RadioCheckedIcon";
 export * from "./RadioIcon";
-export * from "./RefreshIcon";
-export * from "./ReplyIcon";
-export * from "./SearchIcon";
-export * from "./SearchLargeIcon";
-export * from "./SettingsIcon";
 export * from "./SettingsLargeIcon";
-export * from "./SnapshotsIcon";
 export * from "./StaffMembersLargeIcon";
 export * from "./SuccessCircleIndicatorIcon";
-export * from "./TaxesLargeIcon";
-export * from "./TimeIcon";
-export * from "./TokenLargeIcon";
-export * from "./TransferIcon";
-export * from "./TranslationIcon";
-export * from "./WarehouseLargeIcon";
 export * from "./WarningIcon";
-export * from "./WebsiteIcon";
-export * from "./WifiIcon";
-export * from "./WifiLargeIcon";

package/src/icons/indicator/index.ts

@@ -0,0 +1,2 @@
+export * from "./small";
+export * from "./regular";

package/src/icons/indicator/regular/ErrorIndicatorIcon.tsx

@@ -0,0 +1,24 @@
+import * as React from "react";
+import { forwardRef, Ref, SVGProps } from "react";
+export const ErrorIndicatorIcon = forwardRef(
+  (props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      ref={ref}
+      {...props}
+    >
+      <path
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={1.5}
+        d="m8 8 8 8m0-8-8 8"
+      />
+    </svg>
+  )
+) as React.ForwardRefExoticComponent<
+  Partial<React.PropsWithoutRef<SVGProps<SVGSVGElement>>> &
+    React.RefAttributes<SVGSVGElement>
+>;

package/src/icons/indicator/regular/FailIndicatorIcon.tsx

@@ -0,0 +1,31 @@
+import * as React from "react";
+import { forwardRef, Ref, SVGProps } from "react";
+export const FailIndicatorIcon = forwardRef(
+  (props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      ref={ref}
+      {...props}
+    >
+      <circle
+        cx={12}
+        cy={12}
+        r={8.25}
+        stroke="currentColor"
+        strokeWidth={1.5}
+      />
+      <path
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={1.5}
+        d="m6.5 6.5 11 11"
+      />
+    </svg>
+  )
+) as React.ForwardRefExoticComponent<
+  Partial<React.PropsWithoutRef<SVGProps<SVGSVGElement>>> &
+    React.RefAttributes<SVGSVGElement>
+>;

package/src/icons/indicator/regular/FailOutlineIndicatorIcon.tsx

@@ -0,0 +1,31 @@
+import * as React from "react";
+import { forwardRef, Ref, SVGProps } from "react";
+export const FailOutlineIndicatorIcon = forwardRef(
+  (props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      ref={ref}
+      {...props}
+    >
+      <circle
+        cx={12}
+        cy={12}
+        r={11.25}
+        stroke="currentColor"
+        strokeWidth={1.5}
+      />
+      <path
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={1.5}
+        d="m4.5 4.5 15 15"
+      />
+    </svg>
+  )
+) as React.ForwardRefExoticComponent<
+  Partial<React.PropsWithoutRef<SVGProps<SVGSVGElement>>> &
+    React.RefAttributes<SVGSVGElement>
+>;

package/src/icons/indicator/regular/HelpIndicatorIcon.tsx

@@ -0,0 +1,30 @@
+import * as React from "react";
+import { forwardRef, Ref, SVGProps } from "react";
+export const HelpIndicatorIcon = forwardRef(
+  (props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      ref={ref}
+      {...props}
+    >
+      <path
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeWidth={1.5}
+        d="M12 17v.5"
+      />
+      <path
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={1.5}
+        d="M12 14.25v-1.73c1.8 0 3-1.155 3-2.885 0-1.731-1.2-2.885-3-2.885S9 7.904 9 9.635"
+      />
+    </svg>
+  )
+) as React.ForwardRefExoticComponent<
+  Partial<React.PropsWithoutRef<SVGProps<SVGSVGElement>>> &
+    React.RefAttributes<SVGSVGElement>
+>;

package/src/icons/indicator/regular/SuccessIndicatorIcon.tsx

@@ -0,0 +1,24 @@
+import * as React from "react";
+import { forwardRef, Ref, SVGProps } from "react";
+export const SuccessIndicatorIcon = forwardRef(
+  (props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      ref={ref}
+      {...props}
+    >
+      <path
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={1.5}
+        d="M7 13.143 9.632 16 17 8"
+      />
+    </svg>
+  )
+) as React.ForwardRefExoticComponent<
+  Partial<React.PropsWithoutRef<SVGProps<SVGSVGElement>>> &
+    React.RefAttributes<SVGSVGElement>
+>;

package/src/icons/indicator/regular/WarningIndicatorIcon.tsx

@@ -0,0 +1,23 @@
+import * as React from "react";
+import { forwardRef, Ref, SVGProps } from "react";
+export const WarningIndicatorIcon = forwardRef(
+  (props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      ref={ref}
+      {...props}
+    >
+      <path
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeWidth={1.5}
+        d="M12 6v7m0 4v1"
+      />
+    </svg>
+  )
+) as React.ForwardRefExoticComponent<
+  Partial<React.PropsWithoutRef<SVGProps<SVGSVGElement>>> &
+    React.RefAttributes<SVGSVGElement>
+>;

package/src/icons/indicator/regular/index.ts

@@ -0,0 +1,6 @@
+export * from "./ErrorIndicatorIcon";
+export * from "./FailIndicatorIcon";
+export * from "./FailOutlineIndicatorIcon";
+export * from "./HelpIndicatorIcon";
+export * from "./SuccessIndicatorIcon";
+export * from "./WarningIndicatorIcon";

package/src/icons/indicator/small/ErrorSmallIndicatorIcon.tsx

@@ -0,0 +1,24 @@
+import * as React from "react";
+import { forwardRef, Ref, SVGProps } from "react";
+export const ErrorSmallIndicatorIcon = forwardRef(
+  (props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => (
+    <svg
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      ref={ref}
+      {...props}
+    >
+      <path
+        d="m6 6 4 4m0-4-4 4"
+        stroke="currentColor"
+        strokeWidth={1.5}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+) as React.ForwardRefExoticComponent<
+  Partial<React.PropsWithoutRef<SVGProps<SVGSVGElement>>> &
+    React.RefAttributes<SVGSVGElement>
+>;

package/src/icons/indicator/small/SuccessSmallIndicatorIcon.tsx

@@ -0,0 +1,24 @@
+import * as React from "react";
+import { forwardRef, Ref, SVGProps } from "react";
+export const SuccessSmallIndicatorIcon = forwardRef(
+  (props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => (
+    <svg
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      ref={ref}
+      {...props}
+    >
+      <path
+        d="m4.5 8.5 2 2 5-5"
+        stroke="currentColor"
+        strokeWidth={1.5}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+) as React.ForwardRefExoticComponent<
+  Partial<React.PropsWithoutRef<SVGProps<SVGSVGElement>>> &
+    React.RefAttributes<SVGSVGElement>
+>;