@kivid/icons 1.0.0-alpha.10 → 1.0.0-alpha.14

package/src/components/web/FillSecurityHeart.tsx

@@ -0,0 +1,45 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+import { Ref, forwardRef, memo } from "react";
+interface Props extends React.SVGProps<SVGSVGElement> {
+  size?: number;
+  color?: string;
+}
+const FillSecurityHeart = (props: Props, ref: React.Ref<SVGSVGElement>) => {
+  const {
+    size = 24,
+    color = "currentColor",
+    stroke = "",
+    strokeWidth = 1.5,
+  } = props;
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      width={size}
+      height={size}
+      color={color}
+      stroke={stroke}
+      strokeWidth={strokeWidth}
+      ref={ref}
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M18.3751 18.1285C20.0011 16.1331 20.9181 13.6538 20.9821 11.0807L20.9901 6.65878C20.9897 6.21238 20.8563 5.77613 20.6069 5.40585C20.3576 5.03558 20.0036 4.74795 19.5901 4.57968L13.9761 2.27988C12.7117 1.76218 11.2945 1.76218 10.0301 2.27988L4.41614 4.57968C4.00258 4.74784 3.6485 5.03555 3.39914 5.40585C3.14978 5.77615 3.01643 6.21235 3.01611 6.65878V11.0807C3.08014 13.6538 3.99717 16.1331 5.62314 18.1285C7.2491 20.1239 9.49187 21.5228 11.9991 22.1051C14.5064 21.5228 16.7491 20.1239 18.3751 18.1285ZM13.0467 7.4163C12.6459 7.59501 12.2887 7.85935 12 8.18973C11.7114 7.85984 11.3548 7.59596 10.9546 7.41727C10.5544 7.23859 10.1202 7.14919 9.68197 7.15458C8.78243 7.18835 7.93138 7.57141 7.3092 8.22196C6.68702 8.87251 6.34261 9.73977 6.34896 10.6399C6.34896 14.1549 10.885 16.845 12.003 16.845C13.121 16.845 17.657 14.1549 17.657 10.6399C17.6633 9.73927 17.3185 8.87064 16.6957 8.22001C16.0729 7.56937 15.2211 7.18759 14.321 7.15458C13.8822 7.14862 13.4474 7.23759 13.0467 7.4163Z"
+        fill={color}
+      />
+      <path
+        d="M20.9821 11.0807L21.7319 11.0993C21.732 11.0935 21.7321 11.0878 21.7321 11.082L20.9821 11.0807ZM20.9901 6.65878L21.7401 6.66014L21.7401 6.65803L20.9901 6.65878ZM19.5901 4.57968L19.3058 5.2737L19.3074 5.27436L19.5901 4.57968ZM13.9761 2.27988L14.2604 1.58585L14.2603 1.5858L13.9761 2.27988ZM10.0301 2.27988L9.74594 1.5858L9.74581 1.58585L10.0301 2.27988ZM4.41614 4.57968L4.69864 5.27444L4.70045 5.2737L4.41614 4.57968ZM3.01611 6.65878L2.26611 6.65826V6.65878H3.01611ZM3.01611 11.0807H2.26611C2.26611 11.0869 2.26619 11.0931 2.26635 11.0993L3.01611 11.0807ZM5.62314 18.1285L6.20455 17.6547H6.20455L5.62314 18.1285ZM11.9991 22.1051L11.8294 22.8356C11.9411 22.8616 12.0572 22.8616 12.1688 22.8356L11.9991 22.1051ZM12 8.18973L11.4354 8.68349C11.5779 8.84636 11.7837 8.93977 12.0001 8.93973C12.2165 8.9397 12.4223 8.84622 12.5647 8.68331L12 8.18973ZM13.0467 7.4163L12.7412 6.73132H12.7412L13.0467 7.4163ZM10.9546 7.41727L10.6488 8.10211L10.6488 8.10211L10.9546 7.41727ZM9.68197 7.15458L9.67275 6.40463C9.66644 6.40471 9.66014 6.40487 9.65383 6.40511L9.68197 7.15458ZM7.3092 8.22196L7.85122 8.74034L7.3092 8.22196ZM6.34896 10.6399H7.09898L7.09894 10.6346L6.34896 10.6399ZM17.657 10.6399L16.907 10.6347V10.6399H17.657ZM16.6957 8.22001L16.1539 8.73863V8.73863L16.6957 8.22001ZM14.321 7.15458L14.3485 6.40508C14.3427 6.40487 14.3369 6.40473 14.3312 6.40465L14.321 7.15458ZM20.2323 11.062C20.1725 13.469 19.3146 15.7882 17.7937 17.6547L18.9565 18.6023C20.6875 16.478 21.6637 13.8386 21.7319 11.0993L20.2323 11.062ZM20.2401 6.65743L20.2321 11.0793L21.7321 11.082L21.7401 6.66014L20.2401 6.65743ZM19.9848 5.82477C20.1509 6.07142 20.2398 6.36208 20.2401 6.65953L21.7401 6.65803C21.7395 6.06267 21.5616 5.48084 21.229 4.98693L19.9848 5.82477ZM19.3074 5.27436C19.5829 5.38646 19.8187 5.57809 19.9848 5.82477L21.229 4.98693C20.8965 4.49306 20.4243 4.10944 19.8728 3.885L19.3074 5.27436ZM13.6918 2.9739L19.3058 5.2737L19.8744 3.88566L14.2604 1.58585L13.6918 2.9739ZM10.3143 2.97395C11.3966 2.53082 12.6097 2.53082 13.692 2.97395L14.2603 1.5858C12.8138 0.993535 11.1924 0.993535 9.74594 1.5858L10.3143 2.97395ZM4.70045 5.2737L10.3144 2.9739L9.74581 1.58585L4.13183 3.88566L4.70045 5.2737ZM4.02124 5.82477C4.18738 5.57805 4.42327 5.38641 4.69864 5.27444L4.13364 3.88492C3.5819 4.10927 3.10962 4.49306 2.77704 4.98693L4.02124 5.82477ZM3.76611 6.65931C3.76632 6.36196 3.85514 6.07143 4.02124 5.82477L2.77704 4.98693C2.44442 5.48088 2.26653 6.06273 2.26611 6.65826L3.76611 6.65931ZM3.76611 11.0807V6.65878H2.26611V11.0807H3.76611ZM6.20455 17.6547C4.6836 15.7882 3.82578 13.469 3.76588 11.062L2.26635 11.0993C2.33451 13.8386 3.31075 16.478 5.04172 18.6023L6.20455 17.6547ZM12.1688 21.3745C9.82348 20.8298 7.72553 19.5213 6.20455 17.6547L5.04172 18.6023C6.77267 20.7265 9.16026 22.2157 11.8294 22.8356L12.1688 21.3745ZM17.7937 17.6547C16.2727 19.5213 14.1748 20.8298 11.8294 21.3745L12.1688 22.8356C14.838 22.2157 17.2256 20.7265 18.9565 18.6023L17.7937 17.6547ZM12.5647 8.68331C12.7823 8.4343 13.0512 8.23548 13.3521 8.10128L12.7412 6.73132C12.2406 6.95454 11.7952 7.2844 11.4353 7.69616L12.5647 8.68331ZM10.6488 8.10211C10.9495 8.23637 11.218 8.43489 11.4354 8.68349L12.5645 7.69598C12.2049 7.28479 11.76 6.95555 11.2604 6.73244L10.6488 8.10211ZM9.69119 7.90452C10.0214 7.90046 10.348 7.96781 10.6488 8.10211L11.2604 6.73244C10.7608 6.50936 10.2191 6.39792 9.67275 6.40463L9.69119 7.90452ZM7.85122 8.74034C8.33878 8.23054 9.00557 7.9305 9.71011 7.90405L9.65383 6.40511C8.55928 6.4462 7.52397 6.91228 6.76718 7.70358L7.85122 8.74034ZM7.09894 10.6346C7.09397 9.92943 7.36379 9.25 7.85122 8.74034L6.76718 7.70358C6.01025 8.49503 5.59125 9.55011 5.59898 10.6452L7.09894 10.6346ZM12.003 16.095C12.0032 16.095 11.976 16.0944 11.9145 16.081C11.8557 16.0683 11.7793 16.0469 11.6856 16.0142C11.4977 15.9488 11.2636 15.8466 10.9977 15.7063C10.4658 15.4259 9.84228 15.0126 9.24994 14.4956C8.03879 13.4383 7.09896 12.0759 7.09896 10.6399H5.59896C5.59896 12.7189 6.92715 14.4591 8.26351 15.6256C8.94493 16.2204 9.665 16.6994 10.2981 17.0332C10.6146 17.2001 10.9184 17.3354 11.1925 17.4309C11.4522 17.5213 11.7387 17.595 12.003 17.595V16.095ZM16.907 10.6399C16.907 12.0759 15.9672 13.4383 14.756 14.4956C14.1637 15.0126 13.5401 15.4259 13.0083 15.7063C12.7423 15.8466 12.5083 15.9488 12.3204 16.0142C12.2266 16.0469 12.1503 16.0683 12.0915 16.081C12.03 16.0944 12.0027 16.095 12.003 16.095V17.595C12.2673 17.595 12.5538 17.5213 12.8135 17.4309C13.0876 17.3354 13.3914 17.2001 13.7079 17.0332C14.341 16.6994 15.061 16.2204 15.7424 15.6256C17.0788 14.4591 18.407 12.7189 18.407 10.6399H16.907ZM16.1539 8.73863C16.6417 9.24819 16.912 9.92885 16.907 10.6347L18.407 10.6452C18.4147 9.5497 17.9953 8.49309 17.2375 7.70139L16.1539 8.73863ZM14.2935 7.90407C14.999 7.92995 15.6662 8.22915 16.1539 8.73863L17.2375 7.70139C16.4795 6.9096 15.4431 6.44523 14.3485 6.40508L14.2935 7.90407ZM13.3521 8.10128C13.6531 7.96707 13.9801 7.90002 14.3108 7.90451L14.3312 6.40465C13.7843 6.39722 13.2418 6.50811 12.7412 6.73132L13.3521 8.10128Z"
+        fill={color}
+      />
+    </svg>
+  );
+};
+FillSecurityHeart.displayName = "FillSecurityHeart";
+const ForwardRef = forwardRef(FillSecurityHeart);
+let MaybeCssInteropedComponent: React.ComponentType<Props> = ForwardRef;
+const Memo = memo(MaybeCssInteropedComponent);
+export { Memo as FillSecurityHeart };

package/src/components/web/FillSetting.tsx

@@ -0,0 +1,55 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+import { Ref, forwardRef, memo } from "react";
+interface Props extends React.SVGProps<SVGSVGElement> {
+  size?: number;
+  color?: string;
+}
+const FillSetting = (props: Props, ref: React.Ref<SVGSVGElement>) => {
+  const {
+    size = 24,
+    color = "currentColor",
+    stroke = "",
+    strokeWidth = 1.5,
+  } = props;
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      width={size}
+      height={size}
+      color={color}
+      stroke={stroke}
+      strokeWidth={strokeWidth}
+      ref={ref}
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M15.5604 2.15025L16.2892 2.39276C16.9567 2.61527 17.408 3.2403 17.408 3.94407V4.99036C17.408 5.88039 18.1181 6.60667 19.0082 6.62542L20.0558 6.64792C20.6621 6.66042 21.2122 7.00919 21.4834 7.55171L21.8272 8.23923C22.1423 8.86926 22.0185 9.62929 21.521 10.1268L20.7809 10.8668C20.1521 11.4956 20.1408 12.5119 20.7559 13.1544L21.4809 13.9119C21.901 14.3507 22.0435 14.9845 21.851 15.5608L21.6085 16.2895C21.3859 16.9571 20.7609 17.4083 20.0571 17.4083H19.0107C18.1206 17.4083 17.3943 18.1184 17.3755 19.0084L17.353 20.0559C17.3405 20.6622 16.9917 21.2122 16.4492 21.4835L15.7616 21.8272C15.1316 22.1423 14.3715 22.0185 13.8739 21.521L13.1339 20.781C12.5051 20.1522 11.4887 20.1409 10.8461 20.756L10.0886 21.481C9.64977 21.901 9.01595 22.0435 8.43964 21.851L7.71082 21.6085C7.04325 21.386 6.59196 20.761 6.59196 20.0572V19.0109C6.59196 18.1209 5.88189 17.3946 4.9918 17.3758L3.94419 17.3533C3.33788 17.3408 2.78783 16.9921 2.51655 16.4495L2.17277 15.762C1.85773 15.132 1.9815 14.372 2.47905 13.8744L3.21912 13.1344C3.84793 12.5056 3.85919 11.4894 3.24412 10.8468L2.51905 10.0893C2.09776 9.64929 1.95524 9.01426 2.14776 8.43924L2.39029 7.71046C2.61281 7.04294 3.23787 6.59167 3.94169 6.59167H4.98805C5.87814 6.59167 6.60446 5.88164 6.62321 4.99161L6.64571 3.94407C6.66072 3.3378 7.00825 2.78778 7.55081 2.51652L8.23837 2.17276C8.86844 1.85774 9.62851 1.9815 10.1261 2.47902L10.8661 3.21904C11.495 3.84782 12.5113 3.85907 13.1539 3.24405L13.9114 2.51902C14.3502 2.10025 14.9853 1.95775 15.5604 2.15025Z"
+        fill={color}
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M15.5604 2.15025L16.2892 2.39276C16.9567 2.61527 17.408 3.2403 17.408 3.94407V4.99036C17.408 5.88039 18.1181 6.60667 19.0082 6.62542L20.0558 6.64792C20.6621 6.66042 21.2122 7.00919 21.4834 7.55171L21.8272 8.23923C22.1423 8.86926 22.0185 9.62929 21.521 10.1268L20.7809 10.8668C20.1521 11.4956 20.1408 12.5119 20.7559 13.1544L21.4809 13.9119C21.901 14.3507 22.0435 14.9845 21.851 15.5608L21.6085 16.2895C21.3859 16.9571 20.7609 17.4083 20.0571 17.4083H19.0107C18.1206 17.4083 17.3943 18.1184 17.3755 19.0084L17.353 20.0559C17.3405 20.6622 16.9917 21.2122 16.4492 21.4835L15.7616 21.8272C15.1316 22.1423 14.3715 22.0185 13.8739 21.521L13.1339 20.781C12.5051 20.1522 11.4887 20.1409 10.8461 20.756L10.0886 21.481C9.64977 21.901 9.01595 22.0435 8.43964 21.851L7.71082 21.6085C7.04325 21.386 6.59196 20.761 6.59196 20.0572V19.0109C6.59196 18.1209 5.88189 17.3946 4.9918 17.3758L3.94419 17.3533C3.33788 17.3408 2.78783 16.9921 2.51655 16.4495L2.17277 15.762C1.85773 15.132 1.9815 14.372 2.47905 13.8744L3.21912 13.1344C3.84793 12.5056 3.85919 11.4894 3.24412 10.8468L2.51905 10.0893C2.09776 9.64929 1.95524 9.01426 2.14776 8.43924L2.39029 7.71046C2.61281 7.04294 3.23787 6.59167 3.94169 6.59167H4.98805C5.87814 6.59167 6.60446 5.88164 6.62321 4.99161L6.64571 3.94407C6.66072 3.3378 7.00825 2.78778 7.55081 2.51652L8.23837 2.17276C8.86844 1.85774 9.62851 1.9815 10.1261 2.47902L10.8661 3.21904C11.495 3.84782 12.5113 3.85907 13.1539 3.24405L13.9114 2.51902C14.3502 2.10025 14.9853 1.95775 15.5604 2.15025Z"
+        stroke={color}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M14.1213 9.87868C15.2929 11.0503 15.2929 12.9497 14.1213 14.1213C12.9497 15.2929 11.0503 15.2929 9.87868 14.1213C8.70711 12.9497 8.70711 11.0503 9.87868 9.87868C11.0503 8.70711 12.9497 8.70711 14.1213 9.87868Z"
+        fill="#FAFCFC"
+      />
+    </svg>
+  );
+};
+FillSetting.displayName = "FillSetting";
+const ForwardRef = forwardRef(FillSetting);
+let MaybeCssInteropedComponent: React.ComponentType<Props> = ForwardRef;
+const Memo = memo(MaybeCssInteropedComponent);
+export { Memo as FillSetting };

package/src/components/web/FillStar.tsx

@@ -0,0 +1,42 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+import { Ref, forwardRef, memo } from "react";
+interface Props extends React.SVGProps<SVGSVGElement> {
+  size?: number;
+  color?: string;
+}
+const FillStar = (props: Props, ref: React.Ref<SVGSVGElement>) => {
+  const {
+    size = 24,
+    color = "currentColor",
+    stroke = "",
+    strokeWidth = 1.5,
+  } = props;
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      width={size}
+      height={size}
+      color={color}
+      stroke={stroke}
+      strokeWidth={strokeWidth}
+      ref={ref}
+      {...props}
+    >
+      <path
+        d="M13.0541 3.41199L14.8781 7.112C14.9713 7.30163 15.1094 7.46567 15.2803 7.5899C15.4513 7.71414 15.6499 7.79485 15.8591 7.82501L19.9391 8.41803C20.1803 8.45187 20.4071 8.55279 20.5937 8.70929C20.7804 8.86579 20.9193 9.07155 20.9947 9.30316C21.07 9.53477 21.0788 9.78293 21.02 10.0193C20.9612 10.2556 20.8372 10.4707 20.6621 10.64L17.7101 13.517C17.5586 13.6645 17.4454 13.8466 17.3802 14.0477C17.315 14.2488 17.2999 14.4628 17.3361 14.671L18.0361 18.734C18.0783 18.9739 18.0523 19.2209 17.9609 19.4467C17.8696 19.6726 17.7167 19.8682 17.5196 20.0114C17.3224 20.1545 17.0891 20.2393 16.846 20.2562C16.603 20.2731 16.3601 20.2214 16.1451 20.107L12.4971 18.189C12.3101 18.0904 12.1019 18.0389 11.8906 18.0389C11.6792 18.0389 11.471 18.0904 11.2841 18.189L7.63607 20.107C7.42102 20.2214 7.17813 20.2731 6.93512 20.2562C6.6921 20.2393 6.45872 20.1545 6.26159 20.0114C6.06447 19.8682 5.91151 19.6726 5.82019 19.4467C5.72886 19.2209 5.70285 18.9739 5.74508 18.734L6.44506 14.671C6.48112 14.4627 6.46582 14.2486 6.40048 14.0475C6.33513 13.8465 6.22171 13.6644 6.07006 13.517L3.11807 10.64C2.94296 10.4707 2.81893 10.2556 2.76013 10.0193C2.70132 9.78293 2.71012 9.53477 2.78549 9.30316C2.86085 9.07155 2.99976 8.86579 3.1864 8.70929C3.37303 8.55279 3.59986 8.45187 3.84106 8.41803L7.92108 7.82501C8.13023 7.79485 8.32888 7.71414 8.49981 7.5899C8.67075 7.46567 8.80881 7.30163 8.90206 7.112L10.7261 3.41199C10.8338 3.19539 10.9998 3.0132 11.2054 2.8858C11.4111 2.75841 11.6482 2.69092 11.8901 2.69092C12.132 2.69092 12.3691 2.75841 12.5747 2.8858C12.7803 3.0132 12.9464 3.19539 13.0541 3.41199Z"
+        fill={color}
+        stroke={color}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+FillStar.displayName = "FillStar";
+const ForwardRef = forwardRef(FillStar);
+let MaybeCssInteropedComponent: React.ComponentType<Props> = ForwardRef;
+const Memo = memo(MaybeCssInteropedComponent);
+export { Memo as FillStar };

package/src/components/web/Filter.tsx

@@ -0,0 +1,41 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+import { Ref, forwardRef, memo } from "react";
+interface Props extends React.SVGProps<SVGSVGElement> {
+  size?: number;
+  color?: string;
+}
+const Filter = (props: Props, ref: React.Ref<SVGSVGElement>) => {
+  const {
+    size = 24,
+    color = "currentColor",
+    stroke = "",
+    strokeWidth = 1.5,
+  } = props;
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 20 19"
+      fill="none"
+      width={size}
+      height={size}
+      color={color}
+      stroke={stroke}
+      strokeWidth={strokeWidth}
+      ref={ref}
+      {...props}
+    >
+      <path
+        d="M1.14063 5.5H18.9006M8.02063 11.333L1.38063 5.8C1.15263 5.61 1.02063 5.328 1.02063 5.032V2.5C1.02063 1.948 1.46863 1.5 2.02063 1.5H18.0206C18.5726 1.5 19.0206 1.948 19.0206 2.5V5.032C19.0206 5.329 18.8886 5.61 18.6606 5.8L12.0206 11.333V15.882C12.0206 16.261 11.8066 16.607 11.4676 16.776L8.74363 18.138C8.41163 18.304 8.02063 18.063 8.02063 17.691V11.333Z"
+        stroke={color}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+Filter.displayName = "Filter";
+const ForwardRef = forwardRef(Filter);
+let MaybeCssInteropedComponent: React.ComponentType<Props> = ForwardRef;
+const Memo = memo(MaybeCssInteropedComponent);
+export { Memo as Filter };

package/src/components/web/GlobeCursor.tsx

@@ -0,0 +1,41 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+import { Ref, forwardRef, memo } from "react";
+interface Props extends React.SVGProps<SVGSVGElement> {
+  size?: number;
+  color?: string;
+}
+const GlobeCursor = (props: Props, ref: React.Ref<SVGSVGElement>) => {
+  const {
+    size = 24,
+    color = "currentColor",
+    stroke = "",
+    strokeWidth = 1.5,
+  } = props;
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 21 21"
+      fill="none"
+      width={size}
+      height={size}
+      color={color}
+      stroke={stroke}
+      strokeWidth={strokeWidth}
+      ref={ref}
+      {...props}
+    >
+      <path
+        d="M10.0206 19C5.04963 19 1.02063 14.971 1.02063 10C1.02063 5.029 5.04963 1 10.0206 1C14.9916 1 19.0206 5.029 19.0206 10M1.53063 7H18.4006M1.53063 13H10.0206M14.0206 10C14.0206 7.236 13.2976 4.472 11.8536 2.06C11.0066 0.647 9.03463 0.647 8.18863 2.06C5.29863 6.885 5.29863 13.116 8.18863 17.941C8.61163 18.647 9.31663 19.001 10.0216 19.001M17.1906 17.17L19.6956 16.168C20.1366 15.992 20.1266 15.364 19.6806 15.201L13.7146 13.032C13.3026 12.882 12.9036 13.282 13.0526 13.694L15.2216 19.66C15.3836 20.107 16.0116 20.116 16.1886 19.675L17.1906 17.17Z"
+        stroke={color}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+GlobeCursor.displayName = "GlobeCursor";
+const ForwardRef = forwardRef(GlobeCursor);
+let MaybeCssInteropedComponent: React.ComponentType<Props> = ForwardRef;
+const Memo = memo(MaybeCssInteropedComponent);
+export { Memo as GlobeCursor };

package/src/components/web/GradientAdd.tsx

@@ -0,0 +1,80 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+import { Ref, forwardRef, memo } from "react";
+interface Props extends React.SVGProps<SVGSVGElement> {
+  size?: number;
+  color?: string;
+}
+const GradientAdd = (props: Props, ref: React.Ref<SVGSVGElement>) => {
+  const {
+    size = 24,
+    color = "currentColor",
+    stroke = "",
+    strokeWidth = 1.5,
+  } = props;
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 16 16"
+      fill="none"
+      width={size}
+      height={size}
+      color={color}
+      stroke={stroke}
+      strokeWidth={strokeWidth}
+      ref={ref}
+      {...props}
+    >
+      <g filter="url(#5-filter0_i_3359_12285)">
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M7.99999 2.6665C8.72036 2.6665 9.30434 3.26346 9.30434 3.99984V6.6665H12.029C12.7493 6.6665 13.3333 7.26346 13.3333 7.99984C13.3333 8.73622 12.7493 9.33317 12.029 9.33317H9.30434V11.9998C9.30434 12.7362 8.72036 13.3332 7.99999 13.3332C7.27962 13.3332 6.69564 12.7362 6.69564 11.9998V9.33317H3.971C3.25063 9.33317 2.66666 8.73622 2.66666 7.99984C2.66666 7.26346 3.25063 6.6665 3.971 6.6665H6.69564V3.99984C6.69564 3.26346 7.27962 2.6665 7.99999 2.6665Z"
+          fill="#F2F7F7"
+        />
+      </g>
+      <defs>
+        <filter
+          id="5-filter0_i_3359_12285"
+          x={2.66666}
+          y={2.6665}
+          width={11.6667}
+          height={11.6665}
+          filterUnits="userSpaceOnUse"
+          colorInterpolationFilters="sRGB"
+        >
+          <feFlood floodOpacity={0} result="BackgroundImageFix" />
+          <feBlend
+            mode="normal"
+            in="SourceGraphic"
+            in2="BackgroundImageFix"
+            result="shape"
+          />
+          <feColorMatrix
+            in="SourceAlpha"
+            type="matrix"
+            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+            result="hardAlpha"
+          />
+          <feOffset dx={1} dy={1} />
+          <feGaussianBlur stdDeviation={1} />
+          <feComposite in2="hardAlpha" operator="arithmetic" k2={-1} k3={1} />
+          <feColorMatrix
+            type="matrix"
+            values="0 0 0 0 0.447059 0 0 0 0 0.403922 0 0 0 0 0.894118 0 0 0 0.4 0"
+          />
+          <feBlend
+            mode="normal"
+            in2="shape"
+            result="effect1_innerShadow_3359_12285"
+          />
+        </filter>
+      </defs>
+    </svg>
+  );
+};
+GradientAdd.displayName = "GradientAdd";
+const ForwardRef = forwardRef(GradientAdd);
+let MaybeCssInteropedComponent: React.ComponentType<Props> = ForwardRef;
+const Memo = memo(MaybeCssInteropedComponent);
+export { Memo as GradientAdd };

package/src/components/web/GradientAlert.tsx

@@ -0,0 +1,86 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+import { Ref, forwardRef, memo } from "react";
+interface Props extends React.SVGProps<SVGSVGElement> {
+  size?: number;
+  color?: string;
+}
+const GradientAlert = (props: Props, ref: React.Ref<SVGSVGElement>) => {
+  const {
+    size = 24,
+    color = "currentColor",
+    stroke = "",
+    strokeWidth = 1.5,
+  } = props;
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 16 16"
+      fill="none"
+      width={size}
+      height={size}
+      color={color}
+      stroke={stroke}
+      strokeWidth={strokeWidth}
+      ref={ref}
+      {...props}
+    >
+      <g filter="url(#6-filter0_i_3359_12282)">
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M8.00001 2C8.73638 2 9.33334 2.58216 9.33334 3.30028V9.36639C9.33334 10.0845 8.73638 10.6667 8.00001 10.6667C7.26363 10.6667 6.66667 10.0845 6.66667 9.36639V3.30028C6.66667 2.58216 7.26363 2 8.00001 2Z"
+          fill="#F2F7F7"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M8.00001 11.3333C8.73638 11.3333 9.33334 11.9154 9.33334 12.6336V12.6997C9.33334 13.4178 8.73638 14 8.00001 14C7.26363 14 6.66667 13.4178 6.66667 12.6997V12.6336C6.66667 11.9154 7.26363 11.3333 8.00001 11.3333Z"
+          fill="#F2F7F7"
+        />
+      </g>
+      <defs>
+        <filter
+          id="6-filter0_i_3359_12282"
+          x={6.66667}
+          y={2}
+          width={3.66667}
+          height={13}
+          filterUnits="userSpaceOnUse"
+          colorInterpolationFilters="sRGB"
+        >
+          <feFlood floodOpacity={0} result="BackgroundImageFix" />
+          <feBlend
+            mode="normal"
+            in="SourceGraphic"
+            in2="BackgroundImageFix"
+            result="shape"
+          />
+          <feColorMatrix
+            in="SourceAlpha"
+            type="matrix"
+            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+            result="hardAlpha"
+          />
+          <feOffset dx={1} dy={1} />
+          <feGaussianBlur stdDeviation={1} />
+          <feComposite in2="hardAlpha" operator="arithmetic" k2={-1} k3={1} />
+          <feColorMatrix
+            type="matrix"
+            values="0 0 0 0 0.960784 0 0 0 0 0.541176 0 0 0 0 0.239216 0 0 0 0.4 0"
+          />
+          <feBlend
+            mode="normal"
+            in2="shape"
+            result="effect1_innerShadow_3359_12282"
+          />
+        </filter>
+      </defs>
+    </svg>
+  );
+};
+GradientAlert.displayName = "GradientAlert";
+const ForwardRef = forwardRef(GradientAlert);
+let MaybeCssInteropedComponent: React.ComponentType<Props> = ForwardRef;
+const Memo = memo(MaybeCssInteropedComponent);
+export { Memo as GradientAlert };

package/src/components/web/GradientCheck.tsx

@@ -0,0 +1,80 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+import { Ref, forwardRef, memo } from "react";
+interface Props extends React.SVGProps<SVGSVGElement> {
+  size?: number;
+  color?: string;
+}
+const GradientCheck = (props: Props, ref: React.Ref<SVGSVGElement>) => {
+  const {
+    size = 24,
+    color = "currentColor",
+    stroke = "",
+    strokeWidth = 1.5,
+  } = props;
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 16 16"
+      fill="none"
+      width={size}
+      height={size}
+      color={color}
+      stroke={stroke}
+      strokeWidth={strokeWidth}
+      ref={ref}
+      {...props}
+    >
+      <g filter="url(#7-filter0_i_3359_12276)">
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M12.8985 4.39037C13.4574 4.93089 13.4806 5.83095 12.9504 6.40072L7.97736 11.5567C7.71389 11.8398 7.34787 12.0001 6.96506 12C6.58225 11.9999 6.2163 11.8394 5.95297 11.5562L3.04912 8.40463C2.51919 7.8346 2.54288 6.93454 3.10203 6.3943C3.66118 5.85406 4.54404 5.87821 5.07397 6.44825L6.96589 8.51126L10.9265 4.44334C11.4567 3.87357 12.3396 3.84985 12.8985 4.39037Z"
+          fill="#F2F7F7"
+        />
+      </g>
+      <defs>
+        <filter
+          id="7-filter0_i_3359_12276"
+          x={2.66667}
+          y={4}
+          width={11.6667}
+          height={9}
+          filterUnits="userSpaceOnUse"
+          colorInterpolationFilters="sRGB"
+        >
+          <feFlood floodOpacity={0} result="BackgroundImageFix" />
+          <feBlend
+            mode="normal"
+            in="SourceGraphic"
+            in2="BackgroundImageFix"
+            result="shape"
+          />
+          <feColorMatrix
+            in="SourceAlpha"
+            type="matrix"
+            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+            result="hardAlpha"
+          />
+          <feOffset dx={1} dy={1} />
+          <feGaussianBlur stdDeviation={1} />
+          <feComposite in2="hardAlpha" operator="arithmetic" k2={-1} k3={1} />
+          <feColorMatrix
+            type="matrix"
+            values="0 0 0 0 0.215686 0 0 0 0 0.886275 0 0 0 0 0.439216 0 0 0 0.4 0"
+          />
+          <feBlend
+            mode="normal"
+            in2="shape"
+            result="effect1_innerShadow_3359_12276"
+          />
+        </filter>
+      </defs>
+    </svg>
+  );
+};
+GradientCheck.displayName = "GradientCheck";
+const ForwardRef = forwardRef(GradientCheck);
+let MaybeCssInteropedComponent: React.ComponentType<Props> = ForwardRef;
+const Memo = memo(MaybeCssInteropedComponent);
+export { Memo as GradientCheck };

package/src/components/web/GradientClose.tsx

@@ -0,0 +1,78 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+import { Ref, forwardRef, memo } from "react";
+interface Props extends React.SVGProps<SVGSVGElement> {
+  size?: number;
+  color?: string;
+}
+const GradientClose = (props: Props, ref: React.Ref<SVGSVGElement>) => {
+  const {
+    size = 24,
+    color = "currentColor",
+    stroke = "",
+    strokeWidth = 1.5,
+  } = props;
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 16 16"
+      fill="none"
+      width={size}
+      height={size}
+      color={color}
+      stroke={stroke}
+      strokeWidth={strokeWidth}
+      ref={ref}
+      {...props}
+    >
+      <g filter="url(#8-filter0_i_3359_12279)">
+        <path
+          d="M12.1996 5.86591C12.7827 5.28288 12.7929 4.3479 12.2226 3.77757C11.6523 3.20721 10.7173 3.2175 10.1342 3.80054L8.02294 5.91184L5.86576 3.75461C5.29541 3.18429 4.36043 3.19454 3.7774 3.77757C3.19439 4.36061 3.18411 5.29559 3.75446 5.86591L5.91166 8.02309L3.80036 10.1344C3.21733 10.7174 3.20705 11.6524 3.7774 12.2228C4.34774 12.7931 5.28272 12.7828 5.86576 12.1998L7.97706 10.0885L10.1342 12.2457C10.7046 12.8161 11.6396 12.8058 12.2226 12.2228C12.8056 11.6397 12.8159 10.7048 12.2455 10.1344L10.0883 7.97721L12.1996 5.86591Z"
+          fill="#F2F7F7"
+        />
+      </g>
+      <defs>
+        <filter
+          id="8-filter0_i_3359_12279"
+          x={3.33333}
+          y={3.3335}
+          width={10.3333}
+          height={10.3335}
+          filterUnits="userSpaceOnUse"
+          colorInterpolationFilters="sRGB"
+        >
+          <feFlood floodOpacity={0} result="BackgroundImageFix" />
+          <feBlend
+            mode="normal"
+            in="SourceGraphic"
+            in2="BackgroundImageFix"
+            result="shape"
+          />
+          <feColorMatrix
+            in="SourceAlpha"
+            type="matrix"
+            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+            result="hardAlpha"
+          />
+          <feOffset dx={1} dy={1} />
+          <feGaussianBlur stdDeviation={1} />
+          <feComposite in2="hardAlpha" operator="arithmetic" k2={-1} k3={1} />
+          <feColorMatrix
+            type="matrix"
+            values="0 0 0 0 0.898039 0 0 0 0 0.270588 0 0 0 0 0.270588 0 0 0 0.4 0"
+          />
+          <feBlend
+            mode="normal"
+            in2="shape"
+            result="effect1_innerShadow_3359_12279"
+          />
+        </filter>
+      </defs>
+    </svg>
+  );
+};
+GradientClose.displayName = "GradientClose";
+const ForwardRef = forwardRef(GradientClose);
+let MaybeCssInteropedComponent: React.ComponentType<Props> = ForwardRef;
+const Memo = memo(MaybeCssInteropedComponent);
+export { Memo as GradientClose };

package/src/components/web/GradientDocLab100BasicBlue.tsx

@@ -0,0 +1,57 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+import { Ref, forwardRef, memo } from "react";
+interface Props extends React.SVGProps<SVGSVGElement> {
+  size?: number;
+  color?: string;
+}
+const GradientDocLab100BasicBlue = (
+  props: Props,
+  ref: React.Ref<SVGSVGElement>
+) => {
+  const {
+    size = 24,
+    color = "currentColor",
+    stroke = "",
+    strokeWidth = 1.5,
+  } = props;
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 48 48"
+      fill="none"
+      width={size}
+      height={size}
+      color={color}
+      stroke={stroke}
+      strokeWidth={strokeWidth}
+      ref={ref}
+      {...props}
+    >
+      <path
+        d="M39.0029 15V9C39.0029 7.93913 38.5814 6.92007 37.8313 6.16992C37.0812 5.41978 36.0638 5 35.0029 5H9.00293C7.94206 5 6.92471 5.41978 6.17456 6.16992C5.42442 6.92007 5.00293 7.93913 5.00293 9V37C5.00293 38.0609 5.42442 39.078 6.17456 39.8281C6.92471 40.5783 7.94206 41 9.00293 41H19.0029M13.0029 29H17.0029M13.0029 21H21.0029M13.0029 13H31.0029M38.7048 21H29.7048M37.2049 21V28.5605L42.3909 36.8809C42.7692 37.4869 42.9783 38.1843 42.9964 38.8984C43.0145 39.6126 42.8412 40.317 42.4942 40.9414C42.1472 41.5659 41.6391 42.0875 41.023 42.4492C40.407 42.8109 39.7054 43.0012 38.991 43H29.4071C28.6927 43.0012 27.9909 42.8109 27.3748 42.4492C26.7588 42.0875 26.2509 41.5659 25.9039 40.9414C25.5569 40.317 25.3833 39.6126 25.4014 38.8984C25.4196 38.1843 25.6286 37.4869 26.0069 36.8809L31.1929 28.5605V21M37.4769 29H30.9329"
+        stroke="url(#9-paint0_linear_4874_32353)"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <defs>
+        <linearGradient
+          id="9-paint0_linear_4874_32353"
+          x1={5.02413}
+          y1={43}
+          x2={50.7382}
+          y2={26.6744}
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#3DCC78" />
+          <stop offset={1} stopColor="#43C1E0" />
+        </linearGradient>
+      </defs>
+    </svg>
+  );
+};
+GradientDocLab100BasicBlue.displayName = "GradientDocLab100BasicBlue";
+const ForwardRef = forwardRef(GradientDocLab100BasicBlue);
+let MaybeCssInteropedComponent: React.ComponentType<Props> = ForwardRef;
+const Memo = memo(MaybeCssInteropedComponent);
+export { Memo as GradientDocLab100BasicBlue };