@wix/design-system-illustrations 2.39.1 → 2.40.0

package/dist/esm/animated/animated.global.css

@@ -485,6 +485,80 @@
       }
     
 
+/* FullWidth2 */
+
+.FullWidth2-root {
+  max-width: 100%;
+  height: auto;
+}
+
+.FullWidth2-root {
+  --color-1: #F8F6F6;
+  --color-2: #002294;
+  --color-3: #7896FF;
+}
+
+.FullWidth2-Frame-1707483277 {
+  transform-box: fill-box;
+  transform-origin: 50% 50%;
+  animation: FullWidth2-Frame-1707483277-transform 2375ms linear infinite both;
+}
+
+@keyframes FullWidth2-Frame-1707483277-transform {
+  0% {
+    transform: translate(0px, 57.591696px);
+    animation-timing-function: cubic-bezier(0.801, 0, 0.199, 1);
+  }
+  40.336842% {
+    transform: translate(0px, 0px);
+    animation-timing-function: cubic-bezier(0.801, 0, 0.199, 1);
+  }
+  100% {
+    transform: translate(0px, 0px);
+  }
+}
+
+.FullWidth2-Frame-1707483278 {
+  transform-box: fill-box;
+  transform-origin: 50% 50%;
+  animation: FullWidth2-Frame-1707483278-transform 2375ms linear infinite both;
+}
+
+@keyframes FullWidth2-Frame-1707483278-transform {
+  0% {
+    transform: translate(0px, 51.778772px);
+    animation-timing-function: cubic-bezier(0.801, 0, 0.199, 1);
+  }
+  33.347368% {
+    transform: translate(0px, 0px);
+    animation-timing-function: cubic-bezier(0.801, 0, 0.199, 1);
+  }
+  100% {
+    transform: translate(0px, 0px);
+  }
+}
+
+.FullWidth2-Frame-1707483281 {
+  transform-box: fill-box;
+  transform-origin: 50% 50%;
+  animation: FullWidth2-Frame-1707483281-transform 2375ms linear infinite both;
+}
+
+@keyframes FullWidth2-Frame-1707483281-transform {
+  0% {
+    transform: translate(0px, 30px);
+    animation-timing-function: cubic-bezier(0.801, 0, 0.199, 1);
+  }
+  26.315789% {
+    transform: translate(0px, 0px);
+    animation-timing-function: cubic-bezier(0.801, 0, 0.199, 1);
+  }
+  100% {
+    transform: translate(0px, 0px);
+  }
+}
+    
+
 /* HeaderScrollEffectDisappear */
 
 .HeaderScrollEffectDisappear-root {
@@ -831,6 +905,80 @@
 }
     
 
+/* HoverSquareInvertText */
+
+.HoverSquareInvertText-root {
+  max-width: 100%;
+  height: auto;
+}
+
+.HoverSquareInvertText-root {
+  --color-1: #F8F6F6;
+  --color-2: #002294;
+  --color-3: #7896FF;
+}
+
+.HoverSquareInvertText-Group-2147222318 {
+  transform-box: fill-box;
+  transform-origin: 50% 50%;
+  animation: HoverSquareInvertText-Group-2147222318-transform 2375ms linear infinite both;
+}
+
+@keyframes HoverSquareInvertText-Group-2147222318-transform {
+  0% {
+    transform: translate(0px, 30px);
+    animation-timing-function: cubic-bezier(0.801, 0, 0.199, 1);
+  }
+  26.315789% {
+    transform: translate(0px, 0px);
+    animation-timing-function: cubic-bezier(0.801, 0, 0.199, 1);
+  }
+  100% {
+    transform: translate(0px, 0px);
+  }
+}
+
+.HoverSquareInvertText-Group-2147222319 {
+  transform-box: fill-box;
+  transform-origin: 50% 50%;
+  animation: HoverSquareInvertText-Group-2147222319-transform 2375ms linear infinite both;
+}
+
+@keyframes HoverSquareInvertText-Group-2147222319-transform {
+  0% {
+    transform: translate(0px, 51.778772px);
+    animation-timing-function: cubic-bezier(0.801, 0, 0.199, 1);
+  }
+  33.347368% {
+    transform: translate(0px, 0px);
+    animation-timing-function: cubic-bezier(0.801, 0, 0.199, 1);
+  }
+  100% {
+    transform: translate(0px, 0px);
+  }
+}
+
+.HoverSquareInvertText-Group-2147222320 {
+  transform-box: fill-box;
+  transform-origin: 50% 50%;
+  animation: HoverSquareInvertText-Group-2147222320-transform 2375ms linear infinite both;
+}
+
+@keyframes HoverSquareInvertText-Group-2147222320-transform {
+  0% {
+    transform: translate(0px, 57.591696px);
+    animation-timing-function: cubic-bezier(0.801, 0, 0.199, 1);
+  }
+  40.336842% {
+    transform: translate(0px, 0px);
+    animation-timing-function: cubic-bezier(0.801, 0, 0.199, 1);
+  }
+  100% {
+    transform: translate(0px, 0px);
+  }
+}
+    
+
 /* LimitScaling2 */
 
 .LimitScaling2-root {
@@ -1225,7 +1373,6 @@
   --color-4: #F8F6F6;
   --color-5: #18a0fb;
   --color-6: #0d8ae0;
-  --color-7: #f8f6f6;
 }
 
 .MaxMin-node-1-4 {
@@ -7129,6 +7276,249 @@
 }
     
 
+/* Split01 */
+
+.Split01-root {
+  max-width: 100%;
+  height: auto;
+}
+
+.Split01-root {
+  --color-1: #F8F6F6;
+  --color-2: #002294;
+  --color-3: #7896FF;
+}
+
+.Split01-Frame-1707483277 {
+  transform-box: fill-box;
+  transform-origin: 50% 50%;
+  animation: Split01-Frame-1707483277-transform 2375ms linear infinite both;
+}
+
+@keyframes Split01-Frame-1707483277-transform {
+  0% {
+    transform: translate(0px, 57.377876px);
+    animation-timing-function: cubic-bezier(0.801, 0, 0.199, 1);
+  }
+  38.568421% {
+    transform: translate(0px, 0px);
+    animation-timing-function: cubic-bezier(0.801, 0, 0.199, 1);
+  }
+  100% {
+    transform: translate(0px, 0px);
+  }
+}
+
+.Split01-Frame-1707483278 {
+  transform-box: fill-box;
+  transform-origin: 50% 50%;
+  animation: Split01-Frame-1707483278-transform 2375ms linear infinite both;
+}
+
+@keyframes Split01-Frame-1707483278-transform {
+  0% {
+    transform: translate(0px, 50.823251px);
+    animation-timing-function: cubic-bezier(0.801, 0, 0.199, 1);
+  }
+  31.578947% {
+    transform: translate(0px, 0px);
+    animation-timing-function: cubic-bezier(0.801, 0, 0.199, 1);
+  }
+  100% {
+    transform: translate(0px, 0px);
+  }
+}
+
+.Split01-Frame-1707483281 {
+  transform-box: fill-box;
+  transform-origin: 50% 50%;
+  animation: Split01-Frame-1707483281-transform 2375ms linear infinite both;
+}
+
+@keyframes Split01-Frame-1707483281-transform {
+  0% {
+    transform: translate(0px, 24.979506px);
+    animation-timing-function: cubic-bezier(0.801, 0, 0.199, 1);
+  }
+  24.561403% {
+    transform: translate(0px, 0px);
+    animation-timing-function: cubic-bezier(0.801, 0, 0.199, 1);
+  }
+  100% {
+    transform: translate(0px, 0px);
+  }
+}
+    
+
+/* ThumbnailContainer */
+
+.ThumbnailContainer-root {
+  max-width: 100%;
+  height: auto;
+}
+
+.ThumbnailContainer-root {
+  --color-1: #F8F6F6;
+  --color-2: #002294;
+  --color-3: #D5DFFF;
+  --color-4: #7896FF;
+}
+
+.ThumbnailContainer-Frame-1707483282 {
+  transform-box: fill-box;
+  transform-origin: 50% 50%;
+  animation: ThumbnailContainer-Frame-1707483282-transform 2375ms linear infinite both;
+}
+
+@keyframes ThumbnailContainer-Frame-1707483282-transform {
+  0% {
+    transform: translate(0px, 59.807137px);
+    animation-timing-function: cubic-bezier(0.801, 0, 0.199, 1);
+  }
+  64.884211% {
+    transform: translate(0px, 0px);
+    animation-timing-function: cubic-bezier(0.801, 0, 0.199, 1);
+  }
+  100% {
+    transform: translate(0px, 0px);
+  }
+}
+
+.ThumbnailContainer-Frame-1707483283 {
+  transform-box: fill-box;
+  transform-origin: 50% 50%;
+  animation: ThumbnailContainer-Frame-1707483283-transform 2375ms linear infinite both;
+}
+
+@keyframes ThumbnailContainer-Frame-1707483283-transform {
+  0% {
+    transform: translate(0px, 51.14881px);
+    animation-timing-function: cubic-bezier(0.801, 0, 0.199, 1);
+  }
+  43.859649% {
+    transform: translate(0px, 0px);
+    animation-timing-function: cubic-bezier(0.801, 0, 0.199, 1);
+  }
+  100% {
+    transform: translate(0px, 0px);
+  }
+}
+
+.ThumbnailContainer-Frame-1707483284 {
+  transform-box: fill-box;
+  transform-origin: 50% 50%;
+  animation: ThumbnailContainer-Frame-1707483284-transform 2375ms linear infinite both;
+}
+
+@keyframes ThumbnailContainer-Frame-1707483284-transform {
+  0% {
+    transform: translate(0px, 58.777289px);
+    animation-timing-function: cubic-bezier(0.801, 0, 0.199, 1);
+  }
+  57.852632% {
+    transform: translate(0px, 0px);
+    animation-timing-function: cubic-bezier(0.801, 0, 0.199, 1);
+  }
+  100% {
+    transform: translate(0px, 0px);
+  }
+}
+
+.ThumbnailContainer-Frame-1707483285 {
+  transform-box: fill-box;
+  transform-origin: 50% 50%;
+  animation: ThumbnailContainer-Frame-1707483285-transform 2375ms linear infinite both;
+}
+
+@keyframes ThumbnailContainer-Frame-1707483285-transform {
+  0% {
+    transform: translate(0px, 56.367048px);
+    animation-timing-function: cubic-bezier(0.801, 0, 0.199, 1);
+  }
+  50.863158% {
+    transform: translate(0px, 0px);
+    animation-timing-function: cubic-bezier(0.801, 0, 0.199, 1);
+  }
+  100% {
+    transform: translate(0px, 0px);
+  }
+}
+    
+
+/* ThumbnailContainer2 */
+
+.ThumbnailContainer2-root {
+  max-width: 100%;
+  height: auto;
+}
+
+.ThumbnailContainer2-root {
+  --color-1: #7896FF;
+  --color-2: #002294;
+  --color-3: #F8F6F6;
+}
+
+.ThumbnailContainer2-group-mtr8nkm4-1 {
+  transform-box: fill-box;
+  transform-origin: 50% 50%;
+  animation: ThumbnailContainer2-group-mtr8nkm4-1-transform 2375ms linear infinite both;
+}
+
+@keyframes ThumbnailContainer2-group-mtr8nkm4-1-transform {
+  0% {
+    transform: translate(0px, 30px);
+    animation-timing-function: cubic-bezier(0.801, 0, 0.199, 1);
+  }
+  26.315789% {
+    transform: translate(0px, 0px);
+    animation-timing-function: cubic-bezier(0.801, 0, 0.199, 1);
+  }
+  100% {
+    transform: translate(0px, 0px);
+  }
+}
+
+.ThumbnailContainer2-group-mtr8o0p7-2 {
+  transform-box: fill-box;
+  transform-origin: 50% 50%;
+  animation: ThumbnailContainer2-group-mtr8o0p7-2-transform 2375ms linear infinite both;
+}
+
+@keyframes ThumbnailContainer2-group-mtr8o0p7-2-transform {
+  0% {
+    transform: translate(0px, 51.778772px);
+    animation-timing-function: cubic-bezier(0.801, 0, 0.199, 1);
+  }
+  33.347368% {
+    transform: translate(0px, 0px);
+    animation-timing-function: cubic-bezier(0.801, 0, 0.199, 1);
+  }
+  100% {
+    transform: translate(0px, 0px);
+  }
+}
+
+.ThumbnailContainer2-group-mtr8obho-3 {
+  transform-box: fill-box;
+  transform-origin: 50% 50%;
+  animation: ThumbnailContainer2-group-mtr8obho-3-transform 2375ms linear infinite both;
+}
+
+@keyframes ThumbnailContainer2-group-mtr8obho-3-transform {
+  0% {
+    transform: translate(0px, 57.591696px);
+    animation-timing-function: cubic-bezier(0.801, 0, 0.199, 1);
+  }
+  40.336842% {
+    transform: translate(0px, 0px);
+    animation-timing-function: cubic-bezier(0.801, 0, 0.199, 1);
+  }
+  100% {
+    transform: translate(0px, 0px);
+  }
+}
+    
+
 /* ThumbnailFullWidth */
 
 .ThumbnailFullWidth-root {

package/dist/esm/animated/index.js

@@ -1,10 +1,12 @@
 import { ElementsFixedHeight } from "./ElementsFixedHeight";
 import { ElementsFixedMargins } from "./ElementsFixedMargins";
 import { ElementsScale } from "./ElementsScale";
+import { FullWidth2 } from "./FullWidth2";
 import { HeaderScrollEffectDisappear } from "./HeaderScrollEffectDisappear";
 import { HeaderScrollEffectFadeOut } from "./HeaderScrollEffectFadeOut";
 import { HeaderScrollEffectMoveWithPage } from "./HeaderScrollEffectMoveWithPage";
 import { HeaderScrollEffectStayFixed } from "./HeaderScrollEffectStayFixed";
+import { HoverSquareInvertText } from "./HoverSquareInvertText";
 import { LimitScaling2 } from "./LimitScaling2";
 import { MaxMin } from "./MaxMin";
 import { MobileAlgoFast } from "./MobileAlgoFast";
@@ -26,6 +28,9 @@ import { ResponsiveBehaviorTextScaleProportionally } from "./ResponsiveBehaviorT
 import { ResponsiveBehaviorWarp } from "./ResponsiveBehaviorWarp";
 import { SectionFixedHeight } from "./SectionFixedHeight";
 import { SectionScale } from "./SectionScale";
+import { Split01 } from "./Split01";
+import { ThumbnailContainer } from "./ThumbnailContainer";
+import { ThumbnailContainer2 } from "./ThumbnailContainer2";
 import { ThumbnailFullWidth } from "./ThumbnailFullWidth";
 import { ThumbnailGrid } from "./ThumbnailGrid";
 import { ThumbnailSideBySide } from "./ThumbnailSideBySide";
@@ -35,10 +40,12 @@ export {
   ElementsFixedHeight,
   ElementsFixedMargins,
   ElementsScale,
+  FullWidth2,
   HeaderScrollEffectDisappear,
   HeaderScrollEffectFadeOut,
   HeaderScrollEffectMoveWithPage,
   HeaderScrollEffectStayFixed,
+  HoverSquareInvertText,
   LimitScaling2,
   MaxMin,
   MobileAlgoFast,
@@ -60,6 +67,9 @@ export {
   ResponsiveBehaviorWarp,
   SectionFixedHeight,
   SectionScale,
+  Split01,
+  ThumbnailContainer,
+  ThumbnailContainer2,
   ThumbnailFullWidth,
   ThumbnailGrid,
   ThumbnailSideBySide,

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

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

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

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

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

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

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

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

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

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

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

@@ -4,6 +4,8 @@ export { ElementsFixedMargins } from './ElementsFixedMargins';
 export type { ElementsFixedMarginsHandle } from './ElementsFixedMargins';
 export { ElementsScale } from './ElementsScale';
 export type { ElementsScaleHandle } from './ElementsScale';
+export { FullWidth2 } from './FullWidth2';
+export type { FullWidth2Handle } from './FullWidth2';
 export { HeaderScrollEffectDisappear } from './HeaderScrollEffectDisappear';
 export type { HeaderScrollEffectDisappearHandle } from './HeaderScrollEffectDisappear';
 export { HeaderScrollEffectFadeOut } from './HeaderScrollEffectFadeOut';
@@ -12,6 +14,8 @@ export { HeaderScrollEffectMoveWithPage } from './HeaderScrollEffectMoveWithPage
 export type { HeaderScrollEffectMoveWithPageHandle } from './HeaderScrollEffectMoveWithPage';
 export { HeaderScrollEffectStayFixed } from './HeaderScrollEffectStayFixed';
 export type { HeaderScrollEffectStayFixedHandle } from './HeaderScrollEffectStayFixed';
+export { HoverSquareInvertText } from './HoverSquareInvertText';
+export type { HoverSquareInvertTextHandle } from './HoverSquareInvertText';
 export { LimitScaling2 } from './LimitScaling2';
 export type { LimitScaling2Handle } from './LimitScaling2';
 export { MaxMin } from './MaxMin';
@@ -54,6 +58,12 @@ export { SectionFixedHeight } from './SectionFixedHeight';
 export type { SectionFixedHeightHandle } from './SectionFixedHeight';
 export { SectionScale } from './SectionScale';
 export type { SectionScaleHandle } from './SectionScale';
+export { Split01 } from './Split01';
+export type { Split01Handle } from './Split01';
+export { ThumbnailContainer } from './ThumbnailContainer';
+export type { ThumbnailContainerHandle } from './ThumbnailContainer';
+export { ThumbnailContainer2 } from './ThumbnailContainer2';
+export type { ThumbnailContainer2Handle } from './ThumbnailContainer2';
 export { ThumbnailFullWidth } from './ThumbnailFullWidth';
 export type { ThumbnailFullWidthHandle } from './ThumbnailFullWidth';
 export { ThumbnailGrid } from './ThumbnailGrid';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/design-system-illustrations",
-  "version": "2.39.1",
+  "version": "2.40.0",
   "license": "MIT",
   "description": "Wix Design System Illustrations",
   "scripts": {
@@ -10,7 +10,7 @@
   },
   "devDependencies": {
     "@typescript-eslint/parser": "^8.58.1",
-    "@wix/design-system-tokens": "1.234.0",
+    "@wix/design-system-tokens": "1.235.0",
     "dom-serializer": "^1.0.1",
     "domutils": "^2.8.0",
     "esbuild": "^0.25.0",
@@ -53,5 +53,5 @@
     "access": "public"
   },
   "packageManager": "yarn@4.0.2",
-  "falconPackageHash": "e01cae26f443bc442c8e880b89bcf803ed03180bbb73a31d9f91537e"
+  "falconPackageHash": "213b3f625caf46d99e27c71e30a140ca9d180cd1a39a0f20ed0e2edd"
 }

package/src/animated/FullWidth2.html

@@ -0,0 +1,123 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Animation</title>
+    <style>
+svg {
+  max-width: 100%;
+  height: auto;
+}
+
+:root {
+  --color-1: #F8F6F6;
+  --color-2: #002294;
+  --color-3: #7896FF;
+}
+
+.Frame-1707483277 {
+  transform-box: fill-box;
+  transform-origin: 50% 50%;
+  animation: Frame-1707483277-transform 2375ms linear infinite both;
+}
+
+@keyframes Frame-1707483277-transform {
+  0% {
+    transform: translate(0px, 57.591696px);
+    animation-timing-function: cubic-bezier(0.801, 0, 0.199, 1);
+  }
+  40.336842% {
+    transform: translate(0px, 0px);
+    animation-timing-function: cubic-bezier(0.801, 0, 0.199, 1);
+  }
+  100% {
+    transform: translate(0px, 0px);
+  }
+}
+
+.Frame-1707483278 {
+  transform-box: fill-box;
+  transform-origin: 50% 50%;
+  animation: Frame-1707483278-transform 2375ms linear infinite both;
+}
+
+@keyframes Frame-1707483278-transform {
+  0% {
+    transform: translate(0px, 51.778772px);
+    animation-timing-function: cubic-bezier(0.801, 0, 0.199, 1);
+  }
+  33.347368% {
+    transform: translate(0px, 0px);
+    animation-timing-function: cubic-bezier(0.801, 0, 0.199, 1);
+  }
+  100% {
+    transform: translate(0px, 0px);
+  }
+}
+
+.Frame-1707483281 {
+  transform-box: fill-box;
+  transform-origin: 50% 50%;
+  animation: Frame-1707483281-transform 2375ms linear infinite both;
+}
+
+@keyframes Frame-1707483281-transform {
+  0% {
+    transform: translate(0px, 30px);
+    animation-timing-function: cubic-bezier(0.801, 0, 0.199, 1);
+  }
+  26.315789% {
+    transform: translate(0px, 0px);
+    animation-timing-function: cubic-bezier(0.801, 0, 0.199, 1);
+  }
+  100% {
+    transform: translate(0px, 0px);
+  }
+}
+    </style>
+  </head>
+  <body>
+    <svg xmlns="http://www.w3.org/2000/svg" width="68" height="68" viewBox="0 0 68 68" fill="none">
+      <defs>
+        <linearGradient id="paint0_linear_4428_19355" x1="77.0184" y1="29.0713" x2="37.9679" y2="91.8439" gradientUnits="userSpaceOnUse"><stop offset="0.176006" stop-color="#EAEFFF" /><stop offset="0.55" stop-color="#B8C4FF" /><stop offset="0.8" stop-color="#002294" /></linearGradient>
+        <filter xmlns="http://www.w3.org/2000/svg" id="filter1_f_4428_19355" color-interpolation-filters="sRGB" filterUnits="objectBoundingBox" x="-1" y="-1" width="3" height="3">
+    <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+    <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+    <feGaussianBlur stdDeviation="2.36111" result="effect1_foregroundBlur_4428_19355"/>
+    </filter>
+        <clipPath xmlns="http://www.w3.org/2000/svg" id="clip0_4428_19355">
+    <path d="M0 7.55556C0 3.38274 3.38274 0 7.55556 0H60.4444C64.6173 0 68 3.38274 68 7.55556V60.4444C68 64.6173 64.6173 68 60.4444 68H7.55556C3.38274 68 0 64.6173 0 60.4444V7.55556Z" fill="white"/>
+    </clipPath>
+        <clipPath xmlns="http://www.w3.org/2000/svg" id="clip1_4428_19355">
+    <rect x="55" y="33" width="22" height="42" rx="1.88889" transform="rotate(90 55 33)" fill="white"/>
+    </clipPath>
+      </defs>
+      <g fill="none">
+        <g fill="none">
+          <g fill="none" clip-path="url(#clip0_4428_19355)">
+            <path display="none" d="M0 7.55556C0 3.38274 3.38274 0 7.55556 0H60.4444C64.6173 0 68 3.38274 68 7.55556V60.4444C68 64.6173 64.6173 68 60.4444 68H7.55556C3.38274 68 0 64.6173 0 60.4444V7.55556Z" fill="var(--color-1)" opacity="0.57" />
+            <g fill="none">
+              <rect display="none" x="0" y="0" width="68" height="68" fill="var(--color-1)" opacity="0.57" />
+              <g fill="none">
+                <g class="Frame-1707483281" fill="none">
+                  <path d="M 55 14.88889 L 55 33.11111 A 1.88889 1.88889 45 0 1 53.11111 35 L 14.88889 35 A 1.88889 1.88889 45 0 1 13 33.11111 L 13 14.88889 A 1.88889 1.88889 45 0 1 14.88889 13 L 53.11111 13 A 1.88889 1.88889 45 0 1 55 14.88889 Z" fill="var(--color-2)" />
+                </g>
+                <g class="Frame-1707483278" fill="none">
+                  <path d="M 55 24.88889 L 55 43.11111 A 1.88889 1.88889 45 0 1 53.11111 45 L 14.88889 45 A 1.88889 1.88889 45 0 1 13 43.11111 L 13 24.88889 A 1.88889 1.88889 45 0 1 14.88889 23 L 53.11111 23 A 1.88889 1.88889 45 0 1 55 24.88889 Z" fill="var(--color-3)" />
+                </g>
+                <g class="Frame-1707483277" fill="none">
+                  <g fill="none" clip-path="url(#clip1_4428_19355)">
+                    <path d="M 55 34.88889 L 55 53.11111 A 1.88889 1.88889 45 0 1 53.11111 55 L 14.88889 55 A 1.88889 1.88889 45 0 1 13 53.11111 L 13 34.88889 A 1.88889 1.88889 45 0 1 14.88889 33 L 53.11111 33 A 1.88889 1.88889 45 0 1 55 34.88889 Z" fill="var(--color-2)" />
+                    <g fill="none" filter="url(#filter1_f_4428_19355)">
+                      <path d="M84.1484 62.3047L84.1484 23.5791L4.71411 23.5791L4.71411 62.3047L84.1484 62.3047Z" fill="url(#paint0_linear_4428_19355)" />
+                    </g>
+                  </g>
+                </g>
+              </g>
+            </g>
+          </g>
+        </g>
+      </g>
+    </svg>
+  </body>
+</html>