@soul-refiner/design-system 0.0.9 → 0.0.11

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

@@ -0,0 +1,592 @@
+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/DevicePreview/index.ts

@@ -0,0 +1 @@
+export { DevicePreview, type DevicePreviewProps } from "./DevicePreview";

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

@@ -0,0 +1,42 @@
+.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

@@ -0,0 +1,42 @@
+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>
+  );
+};

package/dist/src/iconography/IconHeader/index.ts

@@ -0,0 +1 @@
+export { IconHeader, type IconHeaderProps } from "./IconHeader";