@soul-refiner/design-system 0.0.18 → 0.0.20

package/dist/src/iconography/DevicePreview/DevicePreview.tsx

@@ -1,592 +0,0 @@
-import React from "react";
-import styles from "./DevicePreview.module.scss";
-import {
-  AA,
-  Battery,
-  ChevronLeft,
-  ChevronRight,
-  Lock,
-  NetworkConnectivity,
-  Plus,
-  Refresh,
-  ShareIOS,
-  Wifi,
-} from "@soul-refiner/icons/src";
-
-export interface DevicePreviewProps
-  extends Omit<
-    React.DetailedHTMLProps<
-      React.IframeHTMLAttributes<HTMLIFrameElement>,
-      HTMLIFrameElement
-    >,
-    "width" | "height"
-  > {
-  width: string;
-  height: string;
-  statusbar?: boolean;
-  statusbarTheme?: "light" | "dark";
-  type?: "phone" | "laptop";
-  urlbar?: boolean;
-}
-
-export const DevicePreview = ({
-  width = "100%",
-  height = "100%",
-  src,
-  statusbar = true,
-  statusbarTheme = "dark",
-  title,
-  type = "phone",
-  urlbar = true,
-  ...rest
-}: DevicePreviewProps) => {
-  const intl = new Intl.DateTimeFormat(undefined, { timeStyle: "short" });
-  const [time, setTime] = React.useState(intl.format().replace(/ PM| AM/, ""));
-
-  const shortURL = src
-    ?.replace(/https:\/\/|http:\/\//, "")
-    .split("/")[0]
-    .replace("www.", "");
-
-  React.useEffect(() => {
-    const interval = setInterval(() => {
-      setTime(intl.format(new Date()).replace(/ PM| AM/, ""));
-    }, 60000);
-
-    return () => {
-      clearInterval(interval);
-    };
-  }, [time]);
-
-  if (type === "laptop") {
-    return (
-      <svg
-        className={styles.wrapper}
-        width="1826"
-        height="1023"
-        viewBox="0 0 1826 1023"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M0 996.992L1826 996.996C1826 996.996 1770.11 1022 1692.15 1022H183.095C66.8587 1022 12.5999 1005.33 0 996.992Z"
-          fill="url(#paint0_linear_7391_203621)"
-        />
-        <path
-          d="M218.969 3H1597.82C1627.39 3 1651.37 26.1491 1651.37 54.7074V957.86C1651.37 959.952 1650.51 961.959 1648.98 963.438C1647.45 964.917 1645.37 965.748 1643.2 965.748H173.587C171.42 965.748 169.342 964.917 167.811 963.438C166.279 961.959 165.418 959.952 165.418 957.86V54.7074C165.418 26.1491 189.394 3 218.969 3Z"
-          fill="#1C1C1C"
-          stroke="#4E5051"
-          strokeWidth="4.51282"
-        />
-        <path
-          d="M0.115234 964.633H1826V997.079H0.115234V964.633Z"
-          fill="url(#paint1_linear_7391_203621)"
-        />
-        <path
-          d="M765.213 964.773H1064.04V966.27C1064.04 978.855 1053.47 989.057 1040.44 989.057H788.812C775.78 989.057 765.213 978.855 765.213 966.27V964.773Z"
-          fill="url(#paint2_radial_7391_203621)"
-        />
-        <rect
-          x="188.121"
-          y="30.0859"
-          width="1440"
-          height="900"
-          rx="18.0513"
-          fill="url(#paint3_linear_7391_203621)"
-        />
-        <foreignObject x="188.12" y="27.09" width="1440" height="900">
-          {urlbar && (
-            <div className={`${styles.laptop} ${statusbarTheme}`}>
-              <div className="left">
-                <div />
-                <div />
-                <div />
-                <ChevronLeft
-                  fill={statusbarTheme === "dark" ? "#B5B5B5" : "#000000"}
-                  iconSize={16}
-                  size={16}
-                />
-                <ChevronRight
-                  fill={statusbarTheme === "dark" ? "#5D6D6D" : "#B5B5B5"}
-                  iconSize={16}
-                  size={16}
-                />
-              </div>
-              <div className="url">
-                <Lock
-                  fill={statusbarTheme === "dark" ? "#B5B5B5" : "#000000"}
-                  iconSize={12}
-                  size={16}
-                />
-                <p>{shortURL}</p>
-                <Refresh
-                  fill={statusbarTheme === "dark" ? "#B5B5B5" : "#000000"}
-                  iconSize={12}
-                  size={16}
-                />
-              </div>
-              <div className="right">
-                <ShareIOS
-                  fill={statusbarTheme === "dark" ? "#B5B5B5" : "#000000"}
-                  iconSize={16}
-                  size={16}
-                />
-                <Plus
-                  fill={statusbarTheme === "dark" ? "#B5B5B5" : "#000000"}
-                  iconSize={16}
-                  size={16}
-                />
-              </div>
-            </div>
-          )}
-          <iframe
-            className={styles.frame}
-            height={`${844 + (urlbar ? 0 : 56)}`}
-            src={src}
-            title={title}
-            width="1440"
-            {...rest}
-          />
-        </foreignObject>
-        <path
-          id="path4"
-          fill="#000000"
-          fillOpacity="1"
-          stroke="#000000"
-          strokeWidth="5"
-          d="M 226.6875 12.335938 C 198.6165 12.335938 175.85938 34.310662 175.85938 61.414062 L 175.85938 937.01953 L 1640.7109 937.01953 L 1640.7109 61.414062 C 1640.7109 34.308863 1617.9509 12.335938 1589.8809 12.335938 L 226.6875 12.335938 z M 206.17188 30.085938 L 1610.0703 30.085938 C 1620.0707 30.085938 1628.1211 38.136299 1628.1211 48.136719 L 1628.1211 912.03516 C 1628.1211 922.03558 1620.0707 930.08594 1610.0703 930.08594 L 206.17188 930.08594 C 196.17146 930.08594 188.12109 922.03558 188.12109 912.03516 L 188.12109 48.136719 C 188.12109 38.136299 196.17145 30.085937 206.17188 30.085938 z "
-        />
-        <defs>
-          <linearGradient
-            id="paint0_linear_7391_203621"
-            x1="912.816"
-            y1="996.992"
-            x2="912.816"
-            y2="1022"
-            gradientUnits="userSpaceOnUse"
-          >
-            <stop stopColor="#373A3C" />
-            <stop offset="1" stopColor="#090B0C" />
-          </linearGradient>
-          <linearGradient
-            id="paint1_linear_7391_203621"
-            x1="0.520043"
-            y1="984.268"
-            x2="1826.03"
-            y2="982.51"
-            gradientUnits="userSpaceOnUse"
-          >
-            <stop stopColor="#121517" />
-            <stop offset="0.009" stopColor="#6E7173" />
-            <stop offset="0.019" stopColor="#4E5153" />
-            <stop offset="0.027" stopColor="#232628" />
-            <stop offset="0.041" stopColor="#3F4244" />
-            <stop offset="0.113" stopColor="#75787A" />
-            <stop offset="0.908" stopColor="#6F7274" />
-            <stop offset="0.952" stopColor="#434648" />
-            <stop offset="0.976" stopColor="#232628" />
-            <stop offset="0.99" stopColor="#6F7274" />
-            <stop offset="1" stopColor="#141719" />
-          </linearGradient>
-          <radialGradient
-            id="paint2_radial_7391_203621"
-            cx="0"
-            cy="0"
-            r="1"
-            gradientUnits="userSpaceOnUse"
-            gradientTransform="translate(914.313 980.99) rotate(90) scale(23.4488 196.688)"
-          >
-            <stop stopColor="#747779" />
-            <stop offset="0.578" stopColor="#56595B" />
-            <stop offset="1" />
-          </radialGradient>
-          <linearGradient
-            id="paint3_linear_7391_203621"
-            x1="1480.49"
-            y1="30.0859"
-            x2="1480.1"
-            y2="1223.25"
-            gradientUnits="userSpaceOnUse"
-          >
-            <stop stopColor="#464646" />
-            <stop offset="1" stopColor="#444444" stopOpacity="0" />
-          </linearGradient>
-        </defs>
-      </svg>
-    );
-  }
-
-  return (
-    <svg
-      width={width}
-      height={height}
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 449 898"
-    >
-      <path
-        d="M446.161 207.422c.615 0 1.844.621 1.844 1.863v98.743c0 1.242-1.229 1.863-1.844 1.863h-16.592c-.287.103-.594.132-.895.086a1.8327 1.8327 0 0 1-.829-.351 1.856 1.856 0 0 1-.566-.706 1.8752 1.8752 0 0 1-.168-.892v-98.743c0-1.242 1.229-1.863 2.458-1.863h16.592Z"
-        fill="#000"
-      />
-      <path
-        d="M445.544 209.277c1.229 0 1.844.621 1.844 1.863v95.017c0 1.242-.615 1.863-1.844 1.863h-.614v-99.364l.614.621Z"
-        fill="url(#a)"
-      />
-      <path
-        d="M1.8436 122.969c-1.229 0-1.8436 0-1.8436 1.242v27.325c0 1.242.6145 2.484 1.8436 2.484h.6146v-31.051h-.6146Z"
-        fill="url(#b)"
-      />
-      <path
-        d="M1.8436 187.539C.6146 187.539 0 188.781 0 189.402v57.755c0 1.242.6145 1.863 1.8436 1.863h.6146v-61.481h-.6146Z"
-        fill="url(#c)"
-      />
-      <path
-        d="M1.8436 269.523C.6146 269.523 0 270.766 0 271.387v57.755c0 1.242.6145 1.863 1.8436 1.863h.6146v-61.482h-.6146Z"
-        fill="url(#d)"
-      />
-      <foreignObject x="28.88" y="26.71" width="390" height="844">
-        {statusbar && (
-          <div className={`${styles.statusbar} ${statusbarTheme}`}>
-            <p>{time}</p>
-            <div>
-              <NetworkConnectivity
-                fill={statusbarTheme === "dark" ? "#FFFFFF" : "#000000"}
-                iconSize={17}
-                size={16}
-              />
-              <Wifi
-                fill={statusbarTheme === "dark" ? "#FFFFFF" : "#000000"}
-                iconSize={17}
-                size={16}
-              />
-              <Battery
-                fill={statusbarTheme === "dark" ? "#FFFFFF" : "#000000"}
-                iconSize={17}
-                size={16}
-              />
-            </div>
-          </div>
-        )}
-        {urlbar && (
-          <div className={`${styles.urlbar} ${statusbarTheme}`}>
-            <div>
-              <AA
-                fill={statusbarTheme === "dark" ? "#FFFFFF" : "#000000"}
-                iconSize={19}
-                size={19}
-              />
-              <div>
-                <Lock
-                  fill={statusbarTheme === "dark" ? "#FFFFFF" : "#000000"}
-                  iconSize={16}
-                  size={19}
-                />
-                <p>{shortURL}</p>
-              </div>
-              <Refresh
-                fill={statusbarTheme === "dark" ? "#FFFFFF" : "#000000"}
-                iconSize={19}
-                size={19}
-              />
-            </div>
-          </div>
-        )}
-        <iframe
-          className={`${styles.frame}`}
-          height={`${745 + (statusbar ? 0 : 47) + (urlbar ? 0 : 53)}`}
-          src={src}
-          title={title}
-          width="390"
-          {...rest}
-        />
-      </foreignObject>
-      <path
-        fill="#000"
-        fillRule="evenodd"
-        strokeWidth="0.861132"
-        strokeLinecap="round"
-        paintOrder="stroke fill markers"
-        strokeLinejoin="bevel"
-        d="m 28.88,26.71 v 844.52735 h 389.78125 v -31.8711 c -4.07794,17.92257 -19.85219,31.25196 -38.88672,31.25196 H 69.743281 c -21.5299,0 -39.984375,-17.99689 -39.984375,-40.33789 V 66.335 C 29.92043,55.7445 34.203617,45.643154 41.684688,38.211954 48.941767,31.00328 58.655611,26.950024 68.813594,26.71 Z m 80.66016,0 c 1.45902,0.127502 2.84718,0.707308 3.8789,1.769531 0.6865,0.51217 1.2599,1.16421 1.6836,1.91211 0.4236,0.7479 0.68649,1.57492 0.77539,2.43164 v 3.103516 c 0,12.4117 9.22815,21.720703 21.53125,21.720703 h 174.69922 c 12.303,0 21.53125,-9.309003 21.53125,-21.720703 v -2.482422 c 0.089,-0.85673 0.35239,-1.685694 0.77539,-2.433594 0.424,-0.7479 0.99854,-1.397986 1.68554,-1.910156 1.135,-1.16928 2.68169,-1.838018 4.30469,-1.861328 h 39.36914 c 18.54129,0 34.72971,12.918741 38.88672,30.765625 V 26.71 Z"
-      />
-      <path
-        fill="#000000"
-        fillOpacity="1"
-        d="M 67.039062 0.91992188 C 30.166663 0.91992188 1.2832031 30.107647 1.2832031 66.748047 L 1.2832031 833.0918 C 1.2832031 869.7328 30.781263 898.91992 67.039062 898.91992 L 200.39453 898.91992 L 202.85352 895.19336 L 243.41211 895.19336 L 245.87109 898.91992 L 379.83984 898.91992 C 416.71285 898.91992 445.5957 869.7328 445.5957 833.0918 L 445.5957 66.748047 C 445.5957 29.486647 416.09785 0.91992188 379.83984 0.91992188 L 67.039062 0.91992188 z M 219.81055 26.685547 C 222.75156 26.68866 226.17663 26.706274 229.15234 26.710938 L 418.66211 26.710938 L 418.66211 58.005859 C 418.60237 57.749383 418.51585 57.504417 418.45117 57.25 L 418.45117 840.05469 C 418.50899 839.81998 418.60834 839.60352 418.66211 839.36719 L 418.66211 871.23828 L 28.880859 871.23828 L 28.880859 26.710938 L 68.814453 26.710938 C 68.213615 26.725135 67.636376 26.879178 67.039062 26.919922 L 288.07031 26.919922 C 266.67959 26.809992 247.04248 26.738973 229.15234 26.710938 L 109.54102 26.710938 C 153.65575 26.710938 185.87239 26.649621 219.81055 26.685547 z M 288.07031 26.919922 C 304.17936 27.002708 320.39718 27.088946 340.40625 27.240234 L 379.77539 27.240234 C 398.05022 27.240234 414.01504 39.800828 418.45117 57.25 L 418.45117 26.919922 L 288.07031 26.919922 z M 67.039062 26.919922 L 29.089844 26.919922 L 29.089844 870.73438 L 418.45117 870.73438 L 418.45117 840.05469 C 414.67218 855.39491 402.33233 867.25554 386.74414 870.00977 C 384.48318 870.40925 382.15471 870.61914 379.77539 870.61914 L 69.744141 870.61914 C 67.052903 870.61914 64.408844 870.33652 61.84375 869.80078 C 43.888097 866.05062 29.759766 849.82963 29.759766 830.28125 L 29.759766 66.335938 C 29.92129 55.745438 34.204476 45.644091 41.685547 38.212891 C 48.513375 31.430605 57.537976 27.568001 67.039062 26.919922 z "
-      />
-
-      <path d="M3.0723 91.9212H8.603v-6.2103H3.0723v6.2103Z" fill="#7D7E7F" />
-      <path d="M3.0723 806.099H8.603V91.9219H3.0723V806.099Z" fill="#707375" />
-      <path d="M3.0723 812.288H8.603v-6.21H3.0723v6.21Z" fill="#7D7E7F" />
-      <path
-        d="M444.312 812.305h-5.531v19.872c0 33.536-26.425 60.24-59.61 60.24H68.2136c-15.8097 0-30.9719-6.347-42.151-17.644-11.1791-11.297-17.4595-26.619-17.4595-42.596v-19.872H3.0723v18.63c0 36.641 30.1124 66.45 66.9849 66.45H377.327c36.873 0 66.985-29.809 66.985-67.071v-18.009Z"
-        fill="#707375"
-      />
-      <path d="M444.314 806.078h-5.531v6.21h5.531v-6.21Z" fill="#7D7E7F" />
-      <path d="M444.314 91.9219h-5.531V806.099h5.531V91.9219Z" fill="#707375" />
-      <path d="M444.314 85.7109h-5.531v6.2103h5.531v-6.2103Z" fill="#7D7E7F" />
-      <path
-        d="M70.0572 1.8632c-36.8725 0-66.985 29.8091-66.985 66.4495v18.0097h5.531V66.4497c0-32.9143 26.4252-59.6183 59.6104-59.6183H379.171c33.185 0 59.61 26.704 59.61 59.6183v19.2517h5.531V67.6917c0-37.2614-30.112-66.4495-66.985-66.4495H70.0572v.621Z"
-        fill="#707375"
-      />
-      <path
-        d="M404.981 17.3906c-1.843 0-1.229 1.8631 1.844 4.9682 11.062 9.9364 17.822 24.841 17.822 40.9876V835.279c0 16.146-6.146 31.051-17.822 40.987-3.073 3.105-3.687 4.347-2.458 4.347l4.916-2.484c15.978-8.073 25.196-26.704 25.196-45.956V65.8305c0-18.6307-9.218-37.2615-24.581-45.9558l-5.531-1.8631.614-.621Z"
-        fill="url(#e)"
-      />
-      <path
-        d="M42.398 17.3906c1.8436 0 1.2291 1.8631-1.8436 4.9682-5.6353 5.1979-10.1321 11.5298-13.2013 18.5887-3.0693 7.0589-4.6431 14.6886-4.6204 22.3989V835.279c0 16.146 6.1454 31.051 17.8217 40.987 3.0727 3.105 3.6872 4.347 2.4582 4.347l-4.9164-2.484c-7.8914-4.673-14.394-11.405-18.8269-19.49-4.4328-8.085-6.6327-17.226-6.3692-26.466V65.8305c0-18.6307 9.2181-37.2615 24.5816-45.9558l5.5309-1.8631-.6146-.621Z"
-        fill="url(#f)"
-      />
-      <path
-        d="M247.658 32.9141h-46.705c-1.844 0-3.687 1.863-3.687 3.7261 0 1.8631 1.843 3.1051 3.687 3.1051h46.705c1.844 0 3.073-1.242 3.073-3.1051 0-1.8631-1.229-3.7261-3.073-3.7261Z"
-        fill="#1E1E1E"
-      />
-      <path
-        d="M272.245 42.233c3.687 0 6.145-2.4841 6.145-6.2103 0-3.7261-2.458-6.2102-6.145-6.2102-1.63 0-3.193.6543-4.345 1.8189-1.153 1.1647-1.8 2.7443-1.8 4.3913 0 3.7262 2.458 6.2103 6.145 6.2103Z"
-        fill="#2B2B2B"
-      />
-      <path
-        d="M272.243 40.9911c2.458 0 4.916-2.4841 4.916-4.9682 0-3.1051-2.458-4.9682-4.916-4.9682-3.073 0-4.917 1.8631-4.917 4.9682 0 2.4841 1.844 4.9682 4.917 4.9682Z"
-        fill="#0A0D13"
-      />
-      <path
-        d="M188.661 36.025c0 1.863 0 3.1051-1.229 3.7261a4.9068 4.9068 0 0 1-2.46 1.5275 4.8666 4.8666 0 0 1-2.884-.1313 4.9196 4.9196 0 0 1-2.314-1.7448 5.002 5.002 0 0 1-.946-2.7565l1.844-3.7262a4.89 4.89 0 0 1 2.478-1.055 4.8722 4.8722 0 0 1 2.657.4206c.83.387 1.536 1 2.04 1.7703.504.7702.786 1.6672.814 2.5903h-4.917 4.917v-.621Z"
-        fill="#0F0F0F"
-      />
-      <path
-        d="M160.399 36.6288c0 1.8631 0 3.7262-1.843 4.9682a7.384 7.384 0 0 1-2.396 1.6221 7.3036 7.3036 0 0 1-5.656 0 7.3733 7.3733 0 0 1-2.396-1.6221c-1.209-1.3663-1.878-3.1351-1.878-4.9682 0-1.8331.669-3.6019 1.878-4.9682a7.3749 7.3749 0 0 1 2.396-1.6221 7.3053 7.3053 0 0 1 5.656 0c.896.3761 1.71.9274 2.396 1.6221 1.229 1.2421 1.843 3.1051 1.843 4.9682h-7.374 7.374Z"
-        fill="#101010"
-      />
-      <path
-        d="M68.2186 11.1785c-10.3878-.1619-20.6107 2.636-29.4979 8.0733v7.4523c8.3149-5.8397 18.1458-9.0792 28.2689-9.3153H381.02c10.447 0 20.28 3.1051 28.269 8.6943v-6.8313c-8.888-5.4373-19.111-8.2352-29.498-8.0733H68.2186Z"
-        fill="url(#g)"
-      />
-      <path
-        d="M68.2186 886.83c-10.4479-.024-20.6752-3.039-29.4979-8.694v-6.831c7.989 4.968 18.4362 8.073 28.2689 8.073H381.02c10.447 0 20.28-3.105 28.269-8.073v6.831c-8.823 5.655-19.05 8.67-29.498 8.694H68.2186Z"
-        fill="url(#h)"
-      />
-      <path
-        d="M312.189 36.0197c0 2.4841-1.23 4.9682-3.073 6.8313-1.928 1.7893-4.45 2.7822-7.067 2.7822-2.618 0-5.14-.9929-7.068-2.7822-1.728-1.8454-2.692-4.2901-2.692-6.8313s.964-4.9859 2.692-6.8313c1.928-1.7893 4.45-2.7821 7.068-2.7822 2.617.0001 5.139.9929 7.067 2.7822 1.843 1.2421 3.073 3.7262 3.073 6.2103h-9.833 9.833v.621Z"
-        fill="#0F0F0F"
-      />
-      <path
-        d="M275.009 40.0834c-2.282 0-4.132-1.8497-4.132-4.1315s1.85-4.1316 4.132-4.1316c2.281 0 4.131 1.8498 4.131 4.1316 0 2.2818-1.85 4.1315-4.131 4.1315Z"
-        fill="url(#j)"
-      />
-      <ellipse
-        rx=".8942"
-        ry=".682"
-        transform="matrix(-1 0 0 1 275.117 34.1117)"
-        fill="url(#k)"
-      />
-      <ellipse
-        rx=".8942"
-        ry=".682"
-        transform="scale(-1 1) rotate(-41.683 -94.0504 380.4576)"
-        fill="url(#l)"
-      />
-      <ellipse
-        rx="1.3641"
-        ry=".3789"
-        transform="matrix(-1 0 0 1 275.07 38.4961)"
-        fill="url(#m)"
-      />
-      <ellipse
-        rx="1.1064"
-        ry=".3734"
-        transform="matrix(-1 0 0 1 275.064 39.2719)"
-        fill="url(#n)"
-      />
-      <ellipse
-        rx=".9397"
-        ry=".5001"
-        transform="matrix(-1 0 0 1 275.168 32.8751)"
-        fill="url(#o)"
-      />
-      <defs>
-        <linearGradient
-          id="a"
-          x1="444.93"
-          y1="209.277"
-          x2="444.93"
-          y2="308.02"
-          gradientUnits="userSpaceOnUse"
-        >
-          <stop stopColor="#CBCBCB" />
-          <stop offset="1" stopColor="#CBCBCB" stopOpacity=".3" />
-        </linearGradient>
-        <linearGradient
-          id="b"
-          x1="2.4582"
-          y1="122.348"
-          x2="2.4582"
-          y2="154.02"
-          gradientUnits="userSpaceOnUse"
-        >
-          <stop stopColor="#CBCBCB" stopOpacity=".3" />
-          <stop offset=".1" stopColor="#CBCBCB" />
-          <stop offset=".9" stopColor="#CBCBCB" />
-          <stop offset="1" stopColor="#CBCBCB" stopOpacity=".3" />
-        </linearGradient>
-        <linearGradient
-          id="c"
-          x1="2.4582"
-          y1="187.539"
-          x2="2.4582"
-          y2="249.02"
-          gradientUnits="userSpaceOnUse"
-        >
-          <stop stopColor="#CBCBCB" stopOpacity=".3" />
-          <stop offset=".1" stopColor="#CBCBCB" />
-          <stop offset=".9" stopColor="#CBCBCB" />
-          <stop offset="1" stopColor="#CBCBCB" stopOpacity=".3" />
-        </linearGradient>
-        <linearGradient
-          id="d"
-          x1="2.4582"
-          y1="269.523"
-          x2="2.4582"
-          y2="331.005"
-          gradientUnits="userSpaceOnUse"
-        >
-          <stop stopColor="#CBCBCB" stopOpacity=".3" />
-          <stop offset=".1" stopColor="#CBCBCB" />
-          <stop offset=".9" stopColor="#CBCBCB" />
-          <stop offset="1" stopColor="#CBCBCB" stopOpacity=".3" />
-        </linearGradient>
-        <linearGradient
-          id="e"
-          x1="423.418"
-          y1="449.002"
-          x2="434.479"
-          y2="449.002"
-          gradientUnits="userSpaceOnUse"
-        >
-          <stop stopColor="#404040" />
-          <stop offset=".6" stopColor="#838383" />
-          <stop offset="1" stopColor="#A7A7A7" />
-        </linearGradient>
-        <linearGradient
-          id="f"
-          x1="23.9618"
-          y1="449.002"
-          x2="12.9001"
-          y2="449.002"
-          gradientUnits="userSpaceOnUse"
-        >
-          <stop stopColor="#404040" />
-          <stop offset=".6" stopColor="#838383" />
-          <stop offset="1" stopColor="#A7A7A7" />
-        </linearGradient>
-        <linearGradient
-          id="g"
-          x1="38.7207"
-          y1="26.7041"
-          x2="409.289"
-          y2="26.7041"
-          gradientUnits="userSpaceOnUse"
-        >
-          <stop stopColor="#4F4F4F" stopOpacity=".1" />
-          <stop offset=".1" stopColor="#4F4F4F" />
-          <stop offset=".9" stopColor="#4F4F4F" />
-          <stop offset="1" stopColor="#4F4F4F" stopOpacity="0" />
-        </linearGradient>
-        <linearGradient
-          id="h"
-          x1="38.7207"
-          y1="871.305"
-          x2="409.289"
-          y2="871.305"
-          gradientUnits="userSpaceOnUse"
-        >
-          <stop stopColor="#4F4F4F" stopOpacity=".1" />
-          <stop offset=".1" stopColor="#4F4F4F" />
-          <stop offset=".9" stopColor="#4F4F4F" />
-          <stop offset="1" stopColor="#4F4F4F" stopOpacity="0" />
-        </linearGradient>
-        <linearGradient
-          id="i"
-          x1="378.895"
-          y1="26.7109"
-          x2="377.642"
-          y2="1145.63"
-          gradientUnits="userSpaceOnUse"
-        >
-          <stop stopColor="#464646" />
-          <stop offset="1" stopColor="#444" stopOpacity="0" />
-        </linearGradient>
-        <radialGradient
-          id="j"
-          cx="0"
-          cy="0"
-          r="1"
-          gradientUnits="userSpaceOnUse"
-          gradientTransform="rotate(180 137.5045 17.976) scale(4.13157)"
-        >
-          <stop stopColor="#131313" />
-          <stop offset=".2813" stopColor="#131313" />
-          <stop offset=".4271" stopColor="#0A2C3E" />
-          <stop offset=".5504" stopColor="#05283C" />
-          <stop offset=".6977" stopColor="#03304F" />
-          <stop offset=".8372" stopColor="#07172E" />
-          <stop offset="1" stopColor="#0B3D7B" />
-        </radialGradient>
-        <radialGradient
-          id="k"
-          cx="0"
-          cy="0"
-          r="1"
-          gradientUnits="userSpaceOnUse"
-          gradientTransform="matrix(0 .68202 -.89422 0 .8942 .682)"
-        >
-          <stop stopColor="#A7C1FA" />
-          <stop offset="1" stopColor="#A7C1FA" stopOpacity=".33" />
-        </radialGradient>
-        <radialGradient
-          id="l"
-          cx="0"
-          cy="0"
-          r="1"
-          gradientUnits="userSpaceOnUse"
-          gradientTransform="matrix(0 .68202 -.89422 0 .8942 .682)"
-        >
-          <stop stopColor="#5931C5" />
-          <stop offset="1" stopColor="#40229C" stopOpacity=".57" />
-        </radialGradient>
-        <radialGradient
-          id="m"
-          cx="0"
-          cy="0"
-          r="1"
-          gradientUnits="userSpaceOnUse"
-          gradientTransform="matrix(0 .3789 -1.36407 0 1.364 .3789)"
-        >
-          <stop stopColor="#A7C1FA" />
-          <stop offset="1" stopColor="#A7C1FA" stopOpacity=".33" />
-        </radialGradient>
-        <radialGradient
-          id="n"
-          cx="0"
-          cy="0"
-          r="1"
-          gradientUnits="userSpaceOnUse"
-          gradientTransform="matrix(0 .37342 -1.1064 0 1.1064 .3734)"
-        >
-          <stop stopColor="#A7C1FA" stopOpacity=".58" />
-          <stop offset="1" stopColor="#A7C1FA" stopOpacity=".14" />
-        </radialGradient>
-        <radialGradient
-          id="o"
-          cx="0"
-          cy="0"
-          r="1"
-          gradientUnits="userSpaceOnUse"
-          gradientTransform="matrix(0 .50015 -.93969 0 .9397 .5001)"
-        >
-          <stop stopColor="#87C7B9" />
-          <stop offset="1" stopColor="#90A1BB" stopOpacity=".49" />
-        </radialGradient>
-      </defs>
-    </svg>
-  );
-};

package/dist/src/iconography/IconHeader/IconHeader.module.scss

@@ -1,42 +0,0 @@
-.iconHeader {
-  display: flex;
-  flex-direction: row;
-  gap: 16px;
-  place-items: center;
-  color: var(--icon-header-color);
-
-  &#{&} {
-    h1,
-    h2,
-    h3,
-    h4,
-    h5,
-    h6 {
-      color: var(--icon-header-color);
-      line-height: normal;
-    }
-  }
-  span {
-    color: var(--color-grey-3);
-  }
-
-  .iconContainer {
-    border-radius: var(--border-radius-small);
-    height: 48px;
-    width: 48px;
-    aspect-ratio: 1;
-    background-color: var(--icon-header-bg-color);
-    place-content: center;
-    place-items: center;
-    display: flex;
-
-    svg {
-      fill: currentColor;
-      color: var(--icon-header-color);
-
-      path {
-        color: var(--icon-header-color);
-      }
-    }
-  }
-}

package/dist/src/iconography/IconHeader/IconHeader.tsx

@@ -1,42 +0,0 @@
-import React from "react";
-import { Component } from "@soul-refiner/utils/src";
-import headerStyles from "./IconHeader.module.scss";
-
-export interface IconHeaderProps {
-  color: "turquoise" | "green" | "blue" | "purple" | "orange" | "red" | "grey";
-  className?: string;
-  icon: React.ReactNode;
-  title?: React.ReactNode;
-  subtitle?: React.ReactNode;
-  as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
-}
-
-export const IconHeader = ({
-  color,
-  className,
-  icon,
-  title,
-  subtitle,
-  as = "h4",
-}: IconHeaderProps) => {
-  return (
-    <div
-      className={`${headerStyles.iconHeader} ${
-        className ? className : ""
-      } icon-header`}
-      style={
-        {
-          "--icon-header-color": `var(--color-${color}-4)`,
-          "--icon-header-bg-color": `var(--color-${color}-8)`,
-        } as React.CSSProperties
-      }
-    >
-      <div className={`${headerStyles.iconContainer}`}>{icon}</div>
-
-      <div className={headerStyles.titles}>
-        <Component as={as}>{title}</Component>
-        {subtitle && <span>{subtitle}</span>}
-      </div>
-    </div>
-  );
-};