@wix/design-system-illustrations 1.23.0 → 2.0.0

package/dist/types/Aspect3_4.d.ts

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

package/dist/types/Aspect4_3.d.ts

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

package/dist/types/Aspect4_5.d.ts

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

package/dist/types/Aspect5_4.d.ts

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

package/dist/types/Aspect9_16.d.ts

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

package/dist/types/Blur.d.ts

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

package/dist/types/BlurAnimation.d.ts

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

package/dist/types/Bounce.d.ts

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

package/dist/types/BounceAnimation.d.ts

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

package/dist/types/BreathAnimation.d.ts

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

package/dist/types/CircleMarker.d.ts

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

package/dist/types/ClockWipe.d.ts

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

package/dist/types/ColorAnimation.d.ts

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

package/dist/types/ColorTransition.d.ts

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

package/dist/types/Cube.d.ts

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

package/dist/types/Drop.d.ts

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

package/dist/types/ExpandAnimation.d.ts

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

package/dist/types/Fade.d.ts

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

package/dist/types/FadeAnimation.d.ts

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

package/dist/types/FlashAnimation.d.ts

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

package/dist/types/Flip.d.ts

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

package/dist/types/FlipAnimation.d.ts

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

package/dist/types/FloatingCardsAnimation.d.ts

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

package/dist/types/Fold.d.ts

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

package/dist/types/FoldAnimation.d.ts

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

package/dist/types/Freeform.d.ts

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

package/dist/types/Iris.d.ts

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

package/dist/types/Lines.d.ts

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

package/dist/types/Marker.d.ts

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

package/dist/types/Marquee.d.ts

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

package/dist/types/Original.d.ts

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

package/dist/types/Reveal.d.ts

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

package/dist/types/RevealAnimation.d.ts

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

package/dist/types/Roll.d.ts

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

package/dist/types/Shuffle.d.ts

@@ -0,0 +1,5 @@
+import React, { SVGProps } from 'react';
+export declare const Shuffle: {
+    (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/Slide.d.ts

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

package/dist/types/SlideAnimation.d.ts

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

package/dist/types/SnakeTrailAnimation.d.ts

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

package/dist/types/SpinAnimation.d.ts

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

package/dist/types/Stagger.d.ts

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

package/dist/types/Swap.d.ts

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

package/dist/types/TextEntrance.d.ts

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

package/dist/types/TextPath.d.ts

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

package/dist/types/TiltAnimation.d.ts

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

package/dist/types/TypeWriter.d.ts

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

package/dist/types/Underline.d.ts

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

package/dist/types/index.d.ts

@@ -0,0 +1,52 @@
+export { AI } from './AI';
+export { Aspect16_9 } from './Aspect16_9';
+export { Aspect1_1 } from './Aspect1_1';
+export { Aspect2_3 } from './Aspect2_3';
+export { Aspect3_2 } from './Aspect3_2';
+export { Aspect3_4 } from './Aspect3_4';
+export { Aspect4_3 } from './Aspect4_3';
+export { Aspect4_5 } from './Aspect4_5';
+export { Aspect5_4 } from './Aspect5_4';
+export { Aspect9_16 } from './Aspect9_16';
+export { Blur } from './Blur';
+export { BlurAnimation } from './BlurAnimation';
+export { Bounce } from './Bounce';
+export { BounceAnimation } from './BounceAnimation';
+export { BreathAnimation } from './BreathAnimation';
+export { CircleMarker } from './CircleMarker';
+export { ClockWipe } from './ClockWipe';
+export { ColorAnimation } from './ColorAnimation';
+export { ColorTransition } from './ColorTransition';
+export { Cube } from './Cube';
+export { Drop } from './Drop';
+export { ExpandAnimation } from './ExpandAnimation';
+export { Fade } from './Fade';
+export { FadeAnimation } from './FadeAnimation';
+export { FlashAnimation } from './FlashAnimation';
+export { Flip } from './Flip';
+export { FlipAnimation } from './FlipAnimation';
+export { FloatingCardsAnimation } from './FloatingCardsAnimation';
+export { Fold } from './Fold';
+export { FoldAnimation } from './FoldAnimation';
+export { Freeform } from './Freeform';
+export { Iris } from './Iris';
+export { Lines } from './Lines';
+export { Marker } from './Marker';
+export { Marquee } from './Marquee';
+export { Original } from './Original';
+export { Reveal } from './Reveal';
+export { RevealAnimation } from './RevealAnimation';
+export { Roll } from './Roll';
+export { Shuffle } from './Shuffle';
+export { ShuttersAnimation } from './ShuttersAnimation';
+export { Slide } from './Slide';
+export { SlideAnimation } from './SlideAnimation';
+export { SnakeTrailAnimation } from './SnakeTrailAnimation';
+export { SpinAnimation } from './SpinAnimation';
+export { Stagger } from './Stagger';
+export { Swap } from './Swap';
+export { TextEntrance } from './TextEntrance';
+export { TextPath } from './TextPath';
+export { TiltAnimation } from './TiltAnimation';
+export { TypeWriter } from './TypeWriter';
+export { Underline } from './Underline';

package/package.json

@@ -1,16 +1,19 @@
 {
   "name": "@wix/design-system-illustrations",
-  "version": "1.23.0",
+  "version": "2.0.0",
+  "license": "MIT",
+  "description": "Wix Design System Illustrations",
   "scripts": {
     "build": "node ./scripts/build.mjs",
-    "test": "echo ok"
+    "build:svgs": "node ./scripts/build-svgs.mjs",
+    "test": "vitest run"
   },
   "devDependencies": {
-    "chalk": "^5.3.0",
+    "@wix/design-system-tokens": "1.196.0",
     "esbuild": "^0.25.0",
-    "node-html-parser": "^6.1.13",
-    "prettier": "^3.5.2",
-    "svgo": "^3.3.2"
+    "svgo": "^3.3.2",
+    "typescript": "^5.8.3",
+    "vitest": "^4.1.3"
   },
   "peerDependencies": {
     "react": "^16.14.0 || ^17.0.0 || ^18.0.0",
@@ -22,20 +25,17 @@
       "groupId": "com.wixpress"
     }
   },
-  "module": "./unified/index.js",
-  "types": "./unified/index.d.ts",
+  "main": "./dist/cjs/index.js",
+  "module": "./dist/esm/index.js",
+  "types": "./dist/types/index.d.ts",
   "files": [
-    "unified",
-    "crisp",
-    "edge"
+    "dist",
+    "src"
   ],
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
-  "license": "MIT",
-  "author": "mykolass@wix.com",
-  "description": "Wix Design System Illustrations",
   "packageManager": "yarn@4.0.2",
-  "falconPackageHash": "171eb3ada8722f1bcdaa3baed6498c55be4760024887ecffd5d89ad9"
+  "falconPackageHash": "bb66c98eefbc744adcb9699535b6e6213e9f5189fbf8807a7a6fea94"
 }

package/src/AI.svg

@@ -0,0 +1,10 @@
+<svg width="72" height="72" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M36.5932 22.4763C36.4526 21.8412 35.5474 21.8412 35.4067 22.4763L34.1792 28.0206C33.4982 31.0962 31.0962 33.4982 28.0206 34.1792L22.4763 35.4068C21.8412 35.5474 21.8412 36.4526 22.4763 36.5933L28.0206 37.8208C31.0962 38.5018 33.4982 40.9038 34.1792 43.9794L35.4068 49.5237C35.5474 50.1588 36.4526 50.1588 36.5932 49.5237L37.8208 43.9794C38.5018 40.9038 40.9038 38.5018 43.9794 37.8208L49.5237 36.5932C50.1588 36.4526 50.1588 35.5474 49.5237 35.4068L43.9794 34.1792C40.9038 33.4982 38.5018 31.0962 37.8208 28.0206L36.5932 22.4763Z" fill="url(#paint0_linear_74_1238)"/>
+<defs>
+<linearGradient id="paint0_linear_74_1238" x1="49.5" y1="22.5" x2="22.6084" y2="50.5826" gradientUnits="userSpaceOnUse">
+<stop stop-color="#EAEFF1"/>
+<stop offset="0.35" stop-color="#B8C4FF"/>
+<stop offset="0.75" stop-color="#002291"/>
+</linearGradient>
+</defs>
+</svg>

package/src/Aspect16_9.svg

@@ -0,0 +1,23 @@
+<svg width="72" height="72" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_102_1867)">
+<path d="M14 26.717C14 25.2164 15.2164 24 16.717 24L54.283 24C55.7836 24 57 25.2164 57 26.717V45.283C57 46.7836 55.7836 48 54.283 48H16.717C15.2164 48 14 46.7836 14 45.283L14 26.717Z" fill="#002291"/>
+<g filter="url(#filter0_f_102_1867)">
+<path d="M14 -3H76V48H14V-3Z" fill="url(#paint0_linear_102_1867)"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_f_102_1867" x="9" y="-8" width="72" height="61" 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_102_1867"/>
+</filter>
+<linearGradient id="paint0_linear_102_1867" x1="67.2068" y1="1.57774" x2="26.2865" y2="65.0563" 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_102_1867">
+<rect x="14" y="24" width="43" height="24" rx="3" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/src/Aspect1_1.svg

@@ -0,0 +1,23 @@
+<svg width="72" height="72" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_102_1723)">
+<rect x="21" y="21" width="30" height="30" rx="3" fill="#002291"/>
+<g filter="url(#filter0_f_102_1723)">
+<path d="M21 0H74V51H21V0Z" fill="url(#paint0_linear_102_1723)"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_f_102_1723" x="16" y="-5" width="63" height="61" 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_102_1723"/>
+</filter>
+<linearGradient id="paint0_linear_102_1723" x1="66.4833" y1="4.57774" x2="23.2866" y2="61.8603" 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_102_1723">
+<rect x="21" y="21" width="30" height="30" rx="3" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/src/Aspect2_3.svg

@@ -0,0 +1,23 @@
+<svg width="72" height="72" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_102_1902)">
+<path d="M24 20.717C24 19.2164 25.2164 18 26.717 18H45.283C46.7836 18 48 19.2164 48 20.717V51.283C48 52.7836 46.7836 54 45.283 54H26.717C25.2164 54 24 52.7836 24 51.283L24 20.717Z" fill="#002291"/>
+<g filter="url(#filter0_f_102_1902)">
+<path d="M24 -3H77V54H24V-3Z" fill="url(#paint0_linear_102_1902)"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_f_102_1902" x="19" y="-8" width="63" height="67" 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_102_1902"/>
+</filter>
+<linearGradient id="paint0_linear_102_1902" x1="69.4833" y1="2.1163" x2="19.9944" y2="60.8348" 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_102_1902">
+<rect x="24" y="18" width="24" height="36" rx="3" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/src/Aspect3_2.svg

@@ -0,0 +1,23 @@
+<svg width="72" height="72" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_102_1896)">
+<path d="M18 26.717C18 25.2164 19.2164 24 20.717 24L51.283 24C52.7836 24 54 25.2164 54 26.717V45.283C54 46.7836 52.7836 48 51.283 48H20.717C19.2164 48 18 46.7836 18 45.283L18 26.717Z" fill="#002291"/>
+<g filter="url(#filter0_f_102_1896)">
+<path d="M18 -3H77V48H18V-3Z" fill="url(#paint0_linear_102_1896)"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_f_102_1896" x="13" y="-8" width="69" height="61" 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_102_1896"/>
+</filter>
+<linearGradient id="paint0_linear_102_1896" x1="68.6323" y1="1.57774" x2="26.9086" y2="63.1707" 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_102_1896">
+<rect x="18" y="24" width="36" height="24" rx="3" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/src/Aspect3_4.svg

@@ -0,0 +1,23 @@
+<svg width="72" height="72" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_102_1890)">
+<path d="M24 22.717C24 21.2164 25.2164 20 26.717 20H45.283C46.7836 20 48 21.2164 48 22.717V49.283C48 50.7836 46.7836 52 45.283 52H26.717C25.2164 52 24 50.7836 24 49.283L24 22.717Z" fill="#002291"/>
+<g filter="url(#filter0_f_102_1890)">
+<path d="M24 -3H77V52H24V-3Z" fill="url(#paint0_linear_102_1890)"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_f_102_1890" x="19" y="-8" width="63" height="65" 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_102_1890"/>
+</filter>
+<linearGradient id="paint0_linear_102_1890" x1="69.4833" y1="1.93678" x2="22.0481" y2="60.2652" 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_102_1890">
+<rect x="24" y="20" width="24" height="32" rx="3" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/src/Aspect4_3.svg

@@ -0,0 +1,23 @@
+<svg width="72" height="72" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_102_1884)">
+<path d="M20 26.717C20 25.2164 21.2164 24 22.717 24L49.283 24C50.7836 24 52 25.2164 52 26.717V45.283C52 46.7836 50.7836 48 49.283 48H22.717C21.2164 48 20 46.7836 20 45.283L20 26.717Z" fill="#002291"/>
+<g filter="url(#filter0_f_102_1884)">
+<path d="M20 -3H77V48H20V-3Z" fill="url(#paint0_linear_102_1884)"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_f_102_1884" x="15" y="-8" width="67" height="61" 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_102_1884"/>
+</filter>
+<linearGradient id="paint0_linear_102_1884" x1="68.916" y1="1.57774" x2="26.677" y2="61.8177" 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_102_1884">
+<rect x="20" y="24" width="32" height="24" rx="3" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/src/Aspect4_5.svg

@@ -0,0 +1,23 @@
+<svg width="72" height="72" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_102_1878)">
+<path d="M24 23.717C24 22.2164 25.2164 21 26.717 21H45.283C46.7836 21 48 22.2164 48 23.717V48.283C48 49.7836 46.7836 51 45.283 51H26.717C25.2164 51 24 49.7836 24 48.283V23.717Z" fill="#002291"/>
+<g filter="url(#filter0_f_102_1878)">
+<path d="M24 -3H77V51H24V-3Z" fill="url(#paint0_linear_102_1878)"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_f_102_1878" x="19" y="-8" width="63" height="64" 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_102_1878"/>
+</filter>
+<linearGradient id="paint0_linear_102_1878" x1="69.4833" y1="1.84702" x2="23.0919" y2="59.9483" 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_102_1878">
+<rect x="24" y="21" width="24" height="30" rx="3" fill="white"/>
+</clipPath>
+</defs>
+</svg>