@wix/design-system-illustrations 2.16.0 → 2.17.0

package/dist/esm/animated/animated.css

@@ -0,0 +1,122 @@
+/* ThumbnailScale */
+
+      .ThumbnailScale-root {
+        max-width: 100%;
+        height: auto;
+      }
+
+      .ThumbnailScale-Frame-2147240028 {
+        transform-box: fill-box;
+        transform-origin: 50% 50%;
+        animation: ThumbnailScale-Frame-2147240028-transform 3417ms linear infinite both;
+      }
+
+      @keyframes ThumbnailScale-Frame-2147240028-transform {
+        0% {
+          transform: scale(0.56, 0.56);
+          animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
+        }
+        2.429031% {
+          transform: scale(0.56, 0.56);
+          animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
+        }
+        51.214516% {
+          transform: scale(1, 1);
+          animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
+        }
+        99.970735% {
+          transform: scale(0.56, 0.56);
+        }
+        100% {
+          transform: scale(0.56, 0.56);
+        }
+      }
+
+      .ThumbnailScale-Vector_4 {
+        transform-box: fill-box;
+        transform-origin: 50% 50%;
+        animation: ThumbnailScale-Vector_4-transform 3417ms linear infinite both;
+      }
+
+      @keyframes ThumbnailScale-Vector_4-transform {
+        0% {
+          transform: translate(37px, 0px);
+          animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
+        }
+        48.785484% {
+          transform: translate(0px, 0px);
+          animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
+        }
+        97.541703% {
+          transform: translate(37px, 0px);
+        }
+        100% {
+          transform: translate(37px, 0px);
+        }
+      }
+
+      .ThumbnailScale-Vector_5 {
+        transform-box: fill-box;
+        transform-origin: 50% 50%;
+        animation: ThumbnailScale-Vector_5-transform 3417ms linear infinite both;
+      }
+
+      @keyframes ThumbnailScale-Vector_5-transform {
+        0% {
+          transform: translate(-37px, 0px);
+          animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
+        }
+        48.785484% {
+          transform: translate(0px, 0px);
+          animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
+        }
+        97.541703% {
+          transform: translate(-37px, 0px);
+        }
+        100% {
+          transform: translate(-37px, 0px);
+        }
+      }
+
+      .ThumbnailScale-node-3 {
+        transform-box: fill-box;
+        transform-origin: 50% 50%;
+        animation:
+          ThumbnailScale-node-3-transform 3417ms linear infinite both,
+          ThumbnailScale-node-3-width 3417ms linear infinite both;
+      }
+
+      @keyframes ThumbnailScale-node-3-transform {
+        0% {
+          transform: translate(0px, 0px);
+          animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
+        }
+        48.785484% {
+          transform: translate(-37px, 0px);
+          animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
+        }
+        97.541703% {
+          transform: translate(0px, 0px);
+        }
+        100% {
+          transform: translate(0px, 0px);
+        }
+      }
+
+      @keyframes ThumbnailScale-node-3-width {
+        0% {
+          width: 73px;
+          animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
+        }
+        48.785484% {
+          width: 147px;
+          animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
+        }
+        97.541703% {
+          width: 73px;
+        }
+        100% {
+          width: 73px;
+        }
+      }
+    

package/dist/esm/animated/index.js

@@ -0,0 +1,4 @@
+import { ThumbnailScale } from "./ThumbnailScale";
+export {
+  ThumbnailScale
+};

package/dist/esm/index.js

@@ -66,8 +66,11 @@ import { ChooseTheLayoutGrid } from "./ChooseTheLayoutGrid";
 import { CircleImage } from "./CircleImage";
 import { CircleMarker } from "./CircleMarker";
 import { ClockWipe } from "./ClockWipe";
+import { CloseupSection } from "./CloseupSection";
 import { CloudsDivider } from "./CloudsDivider";
 import { ColorAnimation } from "./ColorAnimation";
+import { ColorClick } from "./ColorClick";
+import { ColorHover } from "./ColorHover";
 import { ColorTransition } from "./ColorTransition";
 import { CrossLoop } from "./CrossLoop";
 import { Cube } from "./Cube";
@@ -178,6 +181,7 @@ import { PaintScribbleDivider } from "./PaintScribbleDivider";
 import { PanSection } from "./PanSection";
 import { ParallaxScroll } from "./ParallaxScroll";
 import { ParallaxSection } from "./ParallaxSection";
+import { PeaksDivider } from "./PeaksDivider";
 import { PentagonImage } from "./PentagonImage";
 import { PieChart } from "./PieChart";
 import { PixelsDivider } from "./PixelsDivider";
@@ -226,6 +230,7 @@ import { ShrinkClick } from "./ShrinkClick";
 import { ShrinkHover } from "./ShrinkHover";
 import { ShrinkScroll } from "./ShrinkScroll";
 import { Shuffle } from "./Shuffle";
+import { ShuttersAnimation } from "./ShuttersAnimation";
 import { ShuttersScroll } from "./ShuttersScroll";
 import { Skew3DMouse } from "./Skew3DMouse";
 import { SkewClick } from "./SkewClick";
@@ -349,8 +354,11 @@ export {
   CircleImage,
   CircleMarker,
   ClockWipe,
+  CloseupSection,
   CloudsDivider,
   ColorAnimation,
+  ColorClick,
+  ColorHover,
   ColorTransition,
   CrossLoop,
   Cube,
@@ -461,6 +469,7 @@ export {
   PanSection,
   ParallaxScroll,
   ParallaxSection,
+  PeaksDivider,
   PentagonImage,
   PieChart,
   PixelsDivider,
@@ -509,6 +518,7 @@ export {
   ShrinkHover,
   ShrinkScroll,
   Shuffle,
+  ShuttersAnimation,
   ShuttersScroll,
   Skew3DMouse,
   SkewClick,

package/dist/types/CloseupSection.d.ts

@@ -0,0 +1,5 @@
+import React, { SVGProps } from 'react';
+export declare const CloseupSection: {
+    (props: SVGProps<SVGSVGElement>): React.JSX.Element;
+    displayName: string;
+};

package/dist/types/ColorClick.d.ts

@@ -0,0 +1,5 @@
+import React, { SVGProps } from 'react';
+export declare const ColorClick: {
+    (props: SVGProps<SVGSVGElement>): React.JSX.Element;
+    displayName: string;
+};

package/dist/types/ColorHover.d.ts

@@ -0,0 +1,5 @@
+import React, { SVGProps } from 'react';
+export declare const ColorHover: {
+    (props: SVGProps<SVGSVGElement>): React.JSX.Element;
+    displayName: string;
+};

package/dist/types/PeaksDivider.d.ts

@@ -0,0 +1,5 @@
+import React, { SVGProps } from 'react';
+export declare const PeaksDivider: {
+    (props: SVGProps<SVGSVGElement>): React.JSX.Element;
+    displayName: string;
+};

package/dist/types/ShuttersAnimation.d.ts

@@ -0,0 +1,5 @@
+import React, { SVGProps } from 'react';
+export declare const ShuttersAnimation: {
+    (props: SVGProps<SVGSVGElement>): React.JSX.Element;
+    displayName: string;
+};

package/dist/types/animated/ThumbnailScale.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export type ThumbnailScaleHandle = {
+    play: () => void;
+    pause: () => void;
+    reset: () => void;
+};
+export declare const ThumbnailScale: React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement>, "ref"> & React.RefAttributes<ThumbnailScaleHandle>>;

package/dist/types/animated/index.d.ts

@@ -0,0 +1,2 @@
+export { ThumbnailScale } from './ThumbnailScale';
+export type { ThumbnailScaleHandle } from './ThumbnailScale';

package/dist/types/index.d.ts

@@ -66,8 +66,11 @@ export { ChooseTheLayoutGrid } from './ChooseTheLayoutGrid';
 export { CircleImage } from './CircleImage';
 export { CircleMarker } from './CircleMarker';
 export { ClockWipe } from './ClockWipe';
+export { CloseupSection } from './CloseupSection';
 export { CloudsDivider } from './CloudsDivider';
 export { ColorAnimation } from './ColorAnimation';
+export { ColorClick } from './ColorClick';
+export { ColorHover } from './ColorHover';
 export { ColorTransition } from './ColorTransition';
 export { CrossLoop } from './CrossLoop';
 export { Cube } from './Cube';
@@ -178,6 +181,7 @@ export { PaintScribbleDivider } from './PaintScribbleDivider';
 export { PanSection } from './PanSection';
 export { ParallaxScroll } from './ParallaxScroll';
 export { ParallaxSection } from './ParallaxSection';
+export { PeaksDivider } from './PeaksDivider';
 export { PentagonImage } from './PentagonImage';
 export { PieChart } from './PieChart';
 export { PixelsDivider } from './PixelsDivider';
@@ -226,6 +230,7 @@ export { ShrinkClick } from './ShrinkClick';
 export { ShrinkHover } from './ShrinkHover';
 export { ShrinkScroll } from './ShrinkScroll';
 export { Shuffle } from './Shuffle';
+export { ShuttersAnimation } from './ShuttersAnimation';
 export { ShuttersScroll } from './ShuttersScroll';
 export { Skew3DMouse } from './Skew3DMouse';
 export { SkewClick } from './SkewClick';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/design-system-illustrations",
-  "version": "2.16.0",
+  "version": "2.17.0",
   "license": "MIT",
   "description": "Wix Design System Illustrations",
   "scripts": {
@@ -9,7 +9,7 @@
     "test": "vitest run"
   },
   "devDependencies": {
-    "@wix/design-system-tokens": "1.210.0",
+    "@wix/design-system-tokens": "1.211.0",
     "esbuild": "^0.25.0",
     "svgo": "^3.3.2",
     "typescript": "^5.8.3",
@@ -28,14 +28,18 @@
   "main": "./dist/cjs/index.js",
   "module": "./dist/esm/index.js",
   "types": "./dist/types/index.d.ts",
+  "sideEffects": [
+    "*.css"
+  ],
   "files": [
     "dist",
-    "src"
+    "src",
+    "animated"
   ],
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
   "packageManager": "yarn@4.0.2",
-  "falconPackageHash": "d7cec2b4925e749f46f73ba9127624f6b67b9d7911a27261f9707cbd"
+  "falconPackageHash": "1843778cd0eebeb084420b369fd635011551544e306987211d088a08"
 }

package/src/CloseupSection.svg

@@ -0,0 +1,87 @@
+<svg width="72" height="72" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g opacity="0.25">
+<g clip-path="url(#clip0_676_20973)">
+<path d="M20 29.1094C20 28.0048 20.8954 27.1094 22 27.1094L30.6667 27.1094L30.6667 44.8872L22 44.8872C20.8954 44.8872 20 43.9917 20 42.8872L20 29.1094Z" fill="#002291"/>
+<g filter="url(#filter0_f_676_20973)">
+<path d="M19.9999 5.66406L71.0014 5.66406L71.0014 45.282L19.9999 45.282L19.9999 5.66406Z" fill="url(#paint0_linear_676_20973)"/>
+</g>
+</g>
+</g>
+<g opacity="0.5" clip-path="url(#clip1_676_20973)">
+<rect width="10.6667" height="17.7778" transform="translate(30.6666 27.1094)" fill="#002291"/>
+<g filter="url(#filter1_f_676_20973)">
+<path d="M30.6665 7.14844L81.668 7.14844L81.668 45.1077L30.6665 45.1077L30.6665 7.14844Z" fill="url(#paint1_linear_676_20973)"/>
+</g>
+</g>
+<g clip-path="url(#clip2_676_20973)">
+<path d="M41.3336 27.1094L50.0003 27.1094C51.1049 27.1094 52.0003 28.0048 52.0003 29.1094L52.0003 42.8872C52.0003 43.9917 51.1049 44.8872 50.0003 44.8872L41.3336 44.8872L41.3336 27.1094Z" fill="#002291"/>
+<g filter="url(#filter2_f_676_20973)">
+<path d="M41.3336 14.5938L94.8336 14.5938L94.8336 45.1087L41.3336 45.1087L41.3336 14.5938Z" fill="url(#paint2_linear_676_20973)"/>
+</g>
+</g>
+<path d="M50.647 24.4023L56.647 18.4022L57.3541 19.1093L51.3541 25.1094L50.647 24.4023Z" fill="url(#paint3_linear_676_20973)"/>
+<path d="M57.3539 18.4024C57.4587 18.5073 57.5115 18.6532 57.4982 18.8009L57.1447 22.69L56.1489 22.6002L56.4486 19.3077L53.1561 19.6074L53.0664 18.6117L56.9555 18.2581L57.0653 18.2602C57.1735 18.2744 57.2753 18.3238 57.3539 18.4024Z" fill="#002296"/>
+<path d="M21.3546 24.4023L15.3545 18.4022L14.6474 19.1093L20.6475 25.1094L21.3546 24.4023Z" fill="url(#paint4_linear_676_20973)"/>
+<path d="M14.6476 18.4024C14.5427 18.5073 14.4899 18.6532 14.5032 18.8009L14.8568 22.69L15.8525 22.6002L15.5529 19.3077L18.8453 19.6074L18.9351 18.6117L15.046 18.2581L14.9362 18.2602C14.8279 18.2744 14.7262 18.3238 14.6476 18.4024Z" fill="#002296"/>
+<path d="M21.354 47.5977L15.354 53.5978L14.6469 52.8907L20.6469 46.8906L21.354 47.5977Z" fill="url(#paint5_linear_676_20973)"/>
+<path d="M14.647 53.5976C14.5422 53.4927 14.4894 53.3468 14.5027 53.1991L14.8562 49.31L15.852 49.3998L15.5523 52.6923L18.8448 52.3926L18.9345 53.3883L15.0454 53.7419L14.9357 53.7398C14.8274 53.7256 14.7256 53.6762 14.647 53.5976Z" fill="#002296"/>
+<path d="M50.6463 47.5977L56.6463 53.5978L57.3534 52.8907L51.3534 46.8906L50.6463 47.5977Z" fill="url(#paint6_linear_676_20973)"/>
+<path d="M57.3532 53.5976C57.4581 53.4927 57.5109 53.3468 57.4976 53.1991L57.144 49.31L56.1483 49.3998L56.4479 52.6923L53.1555 52.3926L53.0657 53.3883L56.9548 53.7419L57.0646 53.7398C57.1728 53.7256 57.2746 53.6762 57.3532 53.5976Z" fill="#002296"/>
+<defs>
+<filter id="filter0_f_676_20973" x="14.4563" y="0.120422" width="62.0887" height="50.7045" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="2.77182" result="effect1_foregroundBlur_676_20973"/>
+</filter>
+<filter id="filter1_f_676_20973" x="25.1229" y="1.6048" width="62.0887" height="49.0482" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="2.77182" result="effect1_foregroundBlur_676_20973"/>
+</filter>
+<filter id="filter2_f_676_20973" x="35.79" y="9.05011" width="64.5873" height="41.6029" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="2.77182" result="effect1_foregroundBlur_676_20973"/>
+</filter>
+<linearGradient id="paint0_linear_676_20973" x1="63.7681" y1="9.22015" x2="32.7646" y2="60.1496" gradientUnits="userSpaceOnUse">
+<stop offset="0.176006" stop-color="#EAEFFF"/>
+<stop offset="0.576923" stop-color="#B8C4FF"/>
+<stop offset="0.85" stop-color="#002294"/>
+</linearGradient>
+<linearGradient id="paint1_linear_676_20973" x1="74.4347" y1="10.5556" x2="45.3277" y2="60.459" gradientUnits="userSpaceOnUse">
+<stop offset="0.176006" stop-color="#EAEFFF"/>
+<stop offset="0.576923" stop-color="#B8C4FF"/>
+<stop offset="0.85" stop-color="#002294"/>
+</linearGradient>
+<linearGradient id="paint2_linear_676_20973" x1="87.246" y1="17.3328" x2="67.216" y2="62.144" gradientUnits="userSpaceOnUse">
+<stop offset="0.176006" stop-color="#EAEFFF"/>
+<stop offset="0.576923" stop-color="#B8C4FF"/>
+<stop offset="0.85" stop-color="#002294"/>
+</linearGradient>
+<linearGradient id="paint3_linear_676_20973" x1="51.0005" y1="24.7558" x2="57.0005" y2="18.7558" gradientUnits="userSpaceOnUse">
+<stop offset="0.04" stop-color="#F8F6F6"/>
+<stop offset="0.45" stop-color="#002296"/>
+</linearGradient>
+<linearGradient id="paint4_linear_676_20973" x1="21.001" y1="24.7558" x2="15.001" y2="18.7558" gradientUnits="userSpaceOnUse">
+<stop offset="0.04" stop-color="#F8F6F6"/>
+<stop offset="0.45" stop-color="#002296"/>
+</linearGradient>
+<linearGradient id="paint5_linear_676_20973" x1="21.0005" y1="47.2442" x2="15.0005" y2="53.2442" gradientUnits="userSpaceOnUse">
+<stop offset="0.04" stop-color="#F8F6F6"/>
+<stop offset="0.45" stop-color="#002296"/>
+</linearGradient>
+<linearGradient id="paint6_linear_676_20973" x1="50.9998" y1="47.2442" x2="56.9998" y2="53.2442" gradientUnits="userSpaceOnUse">
+<stop offset="0.04" stop-color="#F8F6F6"/>
+<stop offset="0.45" stop-color="#002296"/>
+</linearGradient>
+<clipPath id="clip0_676_20973">
+<path d="M20 29.1094C20 28.0048 20.8954 27.1094 22 27.1094L30.6667 27.1094L30.6667 44.8872L22 44.8872C20.8954 44.8872 20 43.9917 20 42.8872L20 29.1094Z" fill="white"/>
+</clipPath>
+<clipPath id="clip1_676_20973">
+<rect width="10.6667" height="17.7778" fill="white" transform="translate(30.6666 27.1094)"/>
+</clipPath>
+<clipPath id="clip2_676_20973">
+<path d="M41.3336 27.1094L50.0003 27.1094C51.1049 27.1094 52.0003 28.0048 52.0003 29.1094L52.0003 42.8872C52.0003 43.9917 51.1049 44.8872 50.0003 44.8872L41.3336 44.8872L41.3336 27.1094Z" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/src/ColorClick.svg

@@ -0,0 +1,59 @@
+<svg width="72" height="72" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_943_3872)">
+<mask id="mask0_943_3872" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="25" y="15" width="49" height="50">
+<rect x="54.8823" y="15.7344" width="25.1581" height="43.2235" transform="rotate(43.2028 54.8823 15.7344)" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_943_3872)">
+<g clip-path="url(#clip1_943_3872)">
+<rect x="19.5211" y="28.0859" width="33" height="16" rx="8" fill="#002291"/>
+<g filter="url(#filter0_f_943_3872)">
+<path d="M105.519 47.7461L105.519 -11.6172L26.4136 -11.6172L26.4136 47.7461L105.519 47.7461Z" fill="url(#paint0_linear_943_3872)"/>
+</g>
+</g>
+</g>
+<g opacity="0.5">
+<mask id="mask1_943_3872" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="3" y="2" width="49" height="50">
+<rect x="32.8544" y="2.44531" width="25.1581" height="43.2235" transform="rotate(43.2028 32.8544 2.44531)" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask1_943_3872)">
+<g clip-path="url(#clip2_943_3872)">
+<rect x="19.5212" y="28.0859" width="33" height="16" rx="8" fill="#002291"/>
+<g filter="url(#filter1_f_943_3872)">
+<path d="M60.2407 44.5469L60.2407 18.9688L18.7294 18.9688L18.7294 44.5469L60.2407 44.5469Z" fill="url(#paint1_linear_943_3872)"/>
+</g>
+</g>
+</g>
+</g>
+</g>
+<defs>
+<filter id="filter0_f_943_3872" x="21.2232" y="-16.8076" width="89.486" height="69.7442" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="2.59523" result="effect1_foregroundBlur_943_3872"/>
+</filter>
+<filter id="filter1_f_943_3872" x="13.5389" y="13.7783" width="51.8922" height="35.959" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="2.59523" result="effect1_foregroundBlur_943_3872"/>
+</filter>
+<linearGradient id="paint0_linear_943_3872" x1="98.4182" y1="-3.19798" x2="31.7485" y2="66.4244" gradientUnits="userSpaceOnUse">
+<stop offset="0.176006" stop-color="#EAEFF1"/>
+<stop offset="0.576923" stop-color="#B8C4FF"/>
+<stop offset="0.85" stop-color="#002291"/>
+</linearGradient>
+<linearGradient id="paint1_linear_943_3872" x1="56.5146" y1="22.5964" x2="28.5731" y2="58.1334" gradientUnits="userSpaceOnUse">
+<stop offset="0.176006" stop-color="#EAEFF1"/>
+<stop offset="0.576923" stop-color="#B8C4FF"/>
+<stop offset="0.85" stop-color="#002291"/>
+</linearGradient>
+<clipPath id="clip0_943_3872">
+<path d="M0 6C0 2.68629 2.68629 0 6 0H66C69.3137 0 72 2.68629 72 6V66C72 69.3137 69.3137 72 66 72H6C2.68629 72 0 69.3137 0 66V6Z" fill="white"/>
+</clipPath>
+<clipPath id="clip1_943_3872">
+<rect x="19.5211" y="28.0859" width="33" height="16" rx="8" fill="white"/>
+</clipPath>
+<clipPath id="clip2_943_3872">
+<rect x="19.5212" y="28.0859" width="33" height="16" rx="8" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/src/ColorHover.svg

@@ -0,0 +1,54 @@
+<svg width="72" height="72" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_943_3627" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="24" y="24" width="39" height="38">
+<rect x="48.0452" y="24.2891" width="20.5157" height="32.7891" transform="rotate(45 48.0452 24.2891)" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_943_3627)">
+<g clip-path="url(#clip0_943_3627)">
+<path d="M25.0002 27C25.0002 25.8954 25.8957 25 27.0002 25H45.0002C46.1048 25 47.0002 25.8954 47.0002 27V45C47.0002 46.1046 46.1048 47 45.0002 47H27.0002C25.8957 47 25.0002 46.1046 25.0002 45V27Z" fill="#002291"/>
+<g filter="url(#filter0_f_943_3627)">
+<path d="M110.998 50.6602L110.998 18.0471L24.9302 18.0471L24.9302 50.6602L110.998 50.6602Z" fill="url(#paint0_linear_943_3627)"/>
+</g>
+</g>
+</g>
+<g opacity="0.5">
+<mask id="mask1_943_3627" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="10" y="9" width="38" height="39">
+<rect x="33.388" y="9.93359" width="20.5157" height="32.7891" transform="rotate(45 33.388 9.93359)" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask1_943_3627)">
+<g clip-path="url(#clip1_943_3627)">
+<path d="M25.0002 27C25.0002 25.8954 25.8956 25 27.0002 25H45.0002C46.1048 25 47.0002 25.8954 47.0002 27V45C47.0002 46.1046 46.1048 47 45.0002 47H27.0002C25.8956 47 25.0002 46.1046 25.0002 45V27Z" fill="#002291"/>
+<g filter="url(#filter1_f_943_3627)">
+<path d="M110.998 50.6602L110.998 18.0471L24.9302 18.0471L24.9302 50.6602L110.998 50.6602Z" fill="url(#paint1_linear_943_3627)"/>
+</g>
+</g>
+</g>
+</g>
+<defs>
+<filter id="filter0_f_943_3627" x="19.7398" y="12.8564" width="96.4485" height="42.9942" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="2.59523" result="effect1_foregroundBlur_943_3627"/>
+</filter>
+<filter id="filter1_f_943_3627" x="19.7397" y="12.8564" width="96.4485" height="42.9942" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="2.59523" result="effect1_foregroundBlur_943_3627"/>
+</filter>
+<linearGradient id="paint0_linear_943_3627" x1="103.272" y1="22.6725" x2="74.5372" y2="82.1012" gradientUnits="userSpaceOnUse">
+<stop offset="0.176006" stop-color="#EAEFF1"/>
+<stop offset="0.576923" stop-color="#B8C4FF"/>
+<stop offset="0.85" stop-color="#002291"/>
+</linearGradient>
+<linearGradient id="paint1_linear_943_3627" x1="103.272" y1="22.6725" x2="74.5371" y2="82.1012" gradientUnits="userSpaceOnUse">
+<stop offset="0.176006" stop-color="#EAEFF1"/>
+<stop offset="0.576923" stop-color="#B8C4FF"/>
+<stop offset="0.85" stop-color="#002291"/>
+</linearGradient>
+<clipPath id="clip0_943_3627">
+<path d="M25.0002 27C25.0002 25.8954 25.8957 25 27.0002 25H45.0002C46.1048 25 47.0002 25.8954 47.0002 27V45C47.0002 46.1046 46.1048 47 45.0002 47H27.0002C25.8957 47 25.0002 46.1046 25.0002 45V27Z" fill="white"/>
+</clipPath>
+<clipPath id="clip1_943_3627">
+<path d="M25.0002 27C25.0002 25.8954 25.8956 25 27.0002 25H45.0002C46.1048 25 47.0002 25.8954 47.0002 27V45C47.0002 46.1046 46.1048 47 45.0002 47H27.0002C25.8956 47 25.0002 46.1046 25.0002 45V27Z" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/src/LayeredElipseDivider.svg

@@ -1,4 +1,4 @@
-<svg width="97" height="28" viewBox="0 0 97 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="97" height="28" viewBox="0 0 97 28" fill="none" xmlns="http://www.w3.org/2000/svg"><g mask="url(#wash_0_mask)"><g opacity="0.25"><path d="M-9.73211 28.6153C5.92666 10.291 26.5521 0 48.3094 0C70.0666 0 90.6909 10.2896 106.35 28.6153H-9.73211Z" fill="var(--wds-illustration-color-opacity-100, #f8f6f100)"/></g></g>
 <mask id="mask0_676_22673" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="-23" width="97" height="51">
 <path d="M88.6039 -22.8508H8.01342C3.58773 -22.8508 0 -19.263 0 -14.8373V19.987C0 24.4127 3.58773 28.0005 8.01341 28.0005H88.6039C93.0296 28.0005 96.6173 24.4127 96.6173 19.987V-14.8373C96.6173 -19.263 93.0296 -22.8508 88.6039 -22.8508Z" fill="white"/>
 </mask>
@@ -56,5 +56,5 @@
 <stop offset="0.576923" stop-color="#B8C4FF"/>
 <stop offset="0.85" stop-color="#002291"/>
 </linearGradient>
-</defs>
-</svg>
+<mask id="wash_0_mask" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="-23" width="97" height="51"><path d="M88.6039 -22.8508H8.01342C3.58773 -22.8508 0 -19.263 0 -14.8373V19.987C0 24.4127 3.58773 28.0005 8.01341 28.0005H88.6039C93.0296 28.0005 96.6173 24.4127 96.6173 19.987V-14.8373C96.6173 -19.263 93.0296 -22.8508 88.6039 -22.8508Z" fill="white"/></mask></defs>
+</svg>

package/src/PeaksDivider.svg

@@ -0,0 +1,28 @@
+<svg width="97" height="51" viewBox="0 0 97 51" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_676_22699)">
+<mask id="mask0_676_22699" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="30" width="97" height="21">
+<path d="M84.688 30.476L72.6085 39.8992L60.5299 30.476L48.4504 39.8992L36.3718 30.476L24.2924 39.8992L12.2138 30.476L0 39.9816V51.002H24.1581H24.4267H48.3161H48.5847H72.4742H72.7428H96.9009V39.9816L84.688 30.476Z" fill="#002291"/>
+</mask>
+<g mask="url(#mask0_676_22699)">
+<rect x="-7.16176" y="-20.4848" width="119.484" height="84.4305" fill="#002291"/>
+<g filter="url(#filter0_f_676_22699)">
+<path d="M110.542 12.3458L89.8449 28.4918L69.1489 12.3458L48.4516 28.4918L27.7557 12.3458L7.0583 28.4918L-13.6376 12.3458L-34.5651 28.6331V47.5157H6.8282H7.2884H48.2215H48.6817H89.6147H90.075H131.468V28.6331L110.542 12.3458Z" fill="url(#paint0_linear_676_22699)"/>
+</g>
+</g>
+</g>
+<defs>
+<filter id="filter0_f_676_22699" x="-49.6343" y="-2.72345" width="196.172" height="65.3079" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="7.5" result="effect1_foregroundBlur_676_22699"/>
+</filter>
+<linearGradient id="paint0_linear_676_22699" x1="107.92" y1="15.5026" x2="97.9099" y2="75.8069" gradientUnits="userSpaceOnUse">
+<stop offset="0.176006" stop-color="#EAEFF1"/>
+<stop offset="0.576923" stop-color="#B8C4FF"/>
+<stop offset="0.85" stop-color="#002291"/>
+</linearGradient>
+<clipPath id="clip0_676_22699">
+<rect width="96.9009" height="51.0005" rx="8" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/src/ShuttersAnimation.svg

@@ -0,0 +1,57 @@
+<svg width="66" height="66" viewBox="0 0 66 66" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_929_3563)">
+<mask id="mask0_929_3563" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="17" y="16" width="32" height="31">
+<path d="M22.7402 46.7969H17.2148V16.9629H22.7402V46.7969ZM30.9473 46.7969H26.8438V16.9629H30.9473V46.7969ZM39.1572 46.7969H35.0527V16.9629H39.1572V46.7969ZM48.7852 46.7969H43.2607V16.9629H48.7852V46.7969Z" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_929_3563)">
+<g clip-path="url(#clip1_929_3563)">
+<rect width="22.0993" height="22.0993" rx="2" transform="matrix(0.707108 -0.707106 0.707108 0.707106 17.3736 32.4316)" fill="#002291"/>
+<g filter="url(#filter0_f_929_3563)">
+<path d="M0.403015 15.4609L32.93 -17.0659L65.457 15.4609L32.93 47.9878L0.403015 15.4609Z" fill="url(#paint0_linear_929_3563)"/>
+</g>
+</g>
+</g>
+<mask id="mask1_929_3563" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="22" y="15" width="22" height="36">
+<path opacity="0.5" d="M26.8452 50.127H22.7407V19.1875H26.8452V50.127ZM35.2104 50.127H30.7905V15.873H35.2104V50.127ZM43.2622 50.127H39.1577V19.1875H43.2622V50.127Z" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask1_929_3563)">
+<g clip-path="url(#clip2_929_3563)">
+<rect width="22.0993" height="22.0993" rx="2" transform="matrix(0.707108 -0.707106 0.707108 0.707106 17.3736 32.4434)" fill="#002291"/>
+<g filter="url(#filter1_f_929_3563)">
+<path d="M0.403015 15.4727L32.93 -17.0542L65.457 15.4727L32.93 47.9995L0.403015 15.4727Z" fill="url(#paint1_linear_929_3563)"/>
+</g>
+</g>
+</g>
+</g>
+<defs>
+<filter id="filter0_f_929_3563" x="-4.59698" y="-22.0664" width="75.054" height="75.0547" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="2.5" result="effect1_foregroundBlur_929_3563"/>
+</filter>
+<filter id="filter1_f_929_3563" x="-4.59698" y="-22.0547" width="75.054" height="75.0547" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="2.5" result="effect1_foregroundBlur_929_3563"/>
+</filter>
+<linearGradient id="paint0_linear_929_3563" x1="31.2364" y1="-9.53319" x2="38.9171" y2="53.7951" gradientUnits="userSpaceOnUse">
+<stop offset="0.176006" stop-color="#EAEFF1"/>
+<stop offset="0.576923" stop-color="#B8C4FF"/>
+<stop offset="0.85" stop-color="#002291"/>
+</linearGradient>
+<linearGradient id="paint1_linear_929_3563" x1="31.2364" y1="-9.52147" x2="38.9171" y2="53.8068" gradientUnits="userSpaceOnUse">
+<stop offset="0.176006" stop-color="#EAEFF1"/>
+<stop offset="0.576923" stop-color="#B8C4FF"/>
+<stop offset="0.85" stop-color="#002291"/>
+</linearGradient>
+<clipPath id="clip0_929_3563">
+<rect width="66" height="66" fill="white"/>
+</clipPath>
+<clipPath id="clip1_929_3563">
+<rect width="22.0993" height="22.0993" rx="2" transform="matrix(0.707108 -0.707106 0.707108 0.707106 17.3736 32.4316)" fill="white"/>
+</clipPath>
+<clipPath id="clip2_929_3563">
+<rect width="22.0993" height="22.0993" rx="2" transform="matrix(0.707108 -0.707106 0.707108 0.707106 17.3736 32.4434)" fill="white"/>
+</clipPath>
+</defs>
+</svg>