@wix/design-system-illustrations 2.38.3 → 2.39.0

package/dist/cjs/animated/animated.global.css

@@ -7127,4 +7127,395 @@
     clip-path: inset(33.5px 44.5px 33.5px 44.5px round 4px) view-box;
   }
 }
+    
+
+/* ThumbnailFullWidth */
+
+.ThumbnailFullWidth-root {
+  max-width: 100%;
+  height: auto;
+}
+
+.ThumbnailFullWidth-root {
+  --color-1: #F8F6F6;
+  --color-2: #002294;
+  --color-3: #7896FF;
+}
+
+.ThumbnailFullWidth-Frame-1707483277 {
+  transform-box: fill-box;
+  transform-origin: 50% 50%;
+  animation: ThumbnailFullWidth-Frame-1707483277-transform 2375ms linear infinite both;
+}
+
+@keyframes ThumbnailFullWidth-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);
+  }
+}
+
+.ThumbnailFullWidth-Frame-1707483278 {
+  transform-box: fill-box;
+  transform-origin: 50% 50%;
+  animation: ThumbnailFullWidth-Frame-1707483278-transform 2375ms linear infinite both;
+}
+
+@keyframes ThumbnailFullWidth-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);
+  }
+}
+
+.ThumbnailFullWidth-Frame-1707483281 {
+  transform-box: fill-box;
+  transform-origin: 50% 50%;
+  animation: ThumbnailFullWidth-Frame-1707483281-transform 2375ms linear infinite both;
+}
+
+@keyframes ThumbnailFullWidth-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);
+  }
+}
+    
+
+/* ThumbnailGrid */
+
+.ThumbnailGrid-root {
+  max-width: 100%;
+  height: auto;
+}
+
+.ThumbnailGrid-root {
+  --color-1: #F8F6F6;
+  --color-2: #002294;
+  --color-3: #7896FF;
+}
+
+.ThumbnailGrid-Group-2147222318 {
+  transform-box: fill-box;
+  transform-origin: 50% 50%;
+  animation: ThumbnailGrid-Group-2147222318-transform 2375ms linear infinite both;
+}
+
+@keyframes ThumbnailGrid-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);
+  }
+}
+
+.ThumbnailGrid-Group-2147222319 {
+  transform-box: fill-box;
+  transform-origin: 50% 50%;
+  animation: ThumbnailGrid-Group-2147222319-transform 2375ms linear infinite both;
+}
+
+@keyframes ThumbnailGrid-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);
+  }
+}
+
+.ThumbnailGrid-Group-2147222320 {
+  transform-box: fill-box;
+  transform-origin: 50% 50%;
+  animation: ThumbnailGrid-Group-2147222320-transform 2375ms linear infinite both;
+}
+
+@keyframes ThumbnailGrid-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);
+  }
+}
+    
+
+/* ThumbnailSideBySide */
+
+.ThumbnailSideBySide-root {
+  max-width: 100%;
+  height: auto;
+}
+
+.ThumbnailSideBySide-root {
+  --color-1: #7896FF;
+  --color-2: #002294;
+  --color-3: #F8F6F6;
+}
+
+.ThumbnailSideBySide-group-mtr8nkm4-1 {
+  transform-box: fill-box;
+  transform-origin: 50% 50%;
+  animation: ThumbnailSideBySide-group-mtr8nkm4-1-transform 2375ms linear infinite both;
+}
+
+@keyframes ThumbnailSideBySide-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);
+  }
+}
+
+.ThumbnailSideBySide-group-mtr8o0p7-2 {
+  transform-box: fill-box;
+  transform-origin: 50% 50%;
+  animation: ThumbnailSideBySide-group-mtr8o0p7-2-transform 2375ms linear infinite both;
+}
+
+@keyframes ThumbnailSideBySide-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);
+  }
+}
+
+.ThumbnailSideBySide-group-mtr8obho-3 {
+  transform-box: fill-box;
+  transform-origin: 50% 50%;
+  animation: ThumbnailSideBySide-group-mtr8obho-3-transform 2375ms linear infinite both;
+}
+
+@keyframes ThumbnailSideBySide-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);
+  }
+}
+    
+
+/* ThumbnailSplit */
+
+.ThumbnailSplit-root {
+  max-width: 100%;
+  height: auto;
+}
+
+.ThumbnailSplit-root {
+  --color-1: #F8F6F6;
+  --color-2: #002294;
+  --color-3: #7896FF;
+}
+
+.ThumbnailSplit-Frame-1707483277 {
+  transform-box: fill-box;
+  transform-origin: 50% 50%;
+  animation: ThumbnailSplit-Frame-1707483277-transform 2375ms linear infinite both;
+}
+
+@keyframes ThumbnailSplit-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);
+  }
+}
+
+.ThumbnailSplit-Frame-1707483278 {
+  transform-box: fill-box;
+  transform-origin: 50% 50%;
+  animation: ThumbnailSplit-Frame-1707483278-transform 2375ms linear infinite both;
+}
+
+@keyframes ThumbnailSplit-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);
+  }
+}
+
+.ThumbnailSplit-Frame-1707483281 {
+  transform-box: fill-box;
+  transform-origin: 50% 50%;
+  animation: ThumbnailSplit-Frame-1707483281-transform 2375ms linear infinite both;
+}
+
+@keyframes ThumbnailSplit-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);
+  }
+}
+    
+
+/* ThumbnailZigzag */
+
+.ThumbnailZigzag-root {
+  max-width: 100%;
+  height: auto;
+}
+
+.ThumbnailZigzag-root {
+  --color-1: #F8F6F6;
+  --color-2: #002294;
+  --color-3: #D5DFFF;
+  --color-4: #7896FF;
+}
+
+.ThumbnailZigzag-Frame-1707483282 {
+  transform-box: fill-box;
+  transform-origin: 50% 50%;
+  animation: ThumbnailZigzag-Frame-1707483282-transform 2375ms linear infinite both;
+}
+
+@keyframes ThumbnailZigzag-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);
+  }
+}
+
+.ThumbnailZigzag-Frame-1707483283 {
+  transform-box: fill-box;
+  transform-origin: 50% 50%;
+  animation: ThumbnailZigzag-Frame-1707483283-transform 2375ms linear infinite both;
+}
+
+@keyframes ThumbnailZigzag-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);
+  }
+}
+
+.ThumbnailZigzag-Frame-1707483284 {
+  transform-box: fill-box;
+  transform-origin: 50% 50%;
+  animation: ThumbnailZigzag-Frame-1707483284-transform 2375ms linear infinite both;
+}
+
+@keyframes ThumbnailZigzag-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);
+  }
+}
+
+.ThumbnailZigzag-Frame-1707483285 {
+  transform-box: fill-box;
+  transform-origin: 50% 50%;
+  animation: ThumbnailZigzag-Frame-1707483285-transform 2375ms linear infinite both;
+}
+
+@keyframes ThumbnailZigzag-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);
+  }
+}
     

package/dist/cjs/animated/index.js

@@ -45,7 +45,12 @@ __export(animated_exports, {
   ResponsiveBehaviorTextScaleProportionally: () => import_ResponsiveBehaviorTextScaleProportionally.ResponsiveBehaviorTextScaleProportionally,
   ResponsiveBehaviorWarp: () => import_ResponsiveBehaviorWarp.ResponsiveBehaviorWarp,
   SectionFixedHeight: () => import_SectionFixedHeight.SectionFixedHeight,
-  SectionScale: () => import_SectionScale.SectionScale
+  SectionScale: () => import_SectionScale.SectionScale,
+  ThumbnailFullWidth: () => import_ThumbnailFullWidth.ThumbnailFullWidth,
+  ThumbnailGrid: () => import_ThumbnailGrid.ThumbnailGrid,
+  ThumbnailSideBySide: () => import_ThumbnailSideBySide.ThumbnailSideBySide,
+  ThumbnailSplit: () => import_ThumbnailSplit.ThumbnailSplit,
+  ThumbnailZigzag: () => import_ThumbnailZigzag.ThumbnailZigzag
 });
 module.exports = __toCommonJS(animated_exports);
 var import_ElementsFixedHeight = require("./ElementsFixedHeight");
@@ -76,6 +81,11 @@ var import_ResponsiveBehaviorTextScaleProportionally = require("./ResponsiveBeha
 var import_ResponsiveBehaviorWarp = require("./ResponsiveBehaviorWarp");
 var import_SectionFixedHeight = require("./SectionFixedHeight");
 var import_SectionScale = require("./SectionScale");
+var import_ThumbnailFullWidth = require("./ThumbnailFullWidth");
+var import_ThumbnailGrid = require("./ThumbnailGrid");
+var import_ThumbnailSideBySide = require("./ThumbnailSideBySide");
+var import_ThumbnailSplit = require("./ThumbnailSplit");
+var import_ThumbnailZigzag = require("./ThumbnailZigzag");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ElementsFixedHeight,
@@ -105,5 +115,10 @@ var import_SectionScale = require("./SectionScale");
   ResponsiveBehaviorTextScaleProportionally,
   ResponsiveBehaviorWarp,
   SectionFixedHeight,
-  SectionScale
+  SectionScale,
+  ThumbnailFullWidth,
+  ThumbnailGrid,
+  ThumbnailSideBySide,
+  ThumbnailSplit,
+  ThumbnailZigzag
 });

package/dist/esm/animated/ThumbnailFullWidth.js

@@ -0,0 +1,44 @@
+import React, { forwardRef, useEffect, useId, useImperativeHandle, useRef } from "react";
+const ThumbnailFullWidth = forwardRef(
+  ({ className, ...props }, ref) => {
+    const svgRef = useRef(null);
+    const uid = useId().replace(/:/g, "");
+    useImperativeHandle(
+      ref,
+      () => ({
+        play: () => svgRef.current?.getAnimations({ subtree: true }).forEach((a) => a.play()),
+        pause: () => svgRef.current?.getAnimations({ subtree: true }).forEach((a) => a.pause()),
+        reset: () => svgRef.current?.getAnimations({ subtree: true }).forEach((a) => {
+          a.currentTime = 0;
+          a.pause();
+        })
+      }),
+      []
+    );
+    useEffect(() => {
+      svgRef.current?.getAnimations({ subtree: true }).forEach((a) => {
+        a.currentTime = 0;
+        a.pause();
+      });
+    }, []);
+    return /* @__PURE__ */ React.createElement(
+      "svg",
+      {
+        ref: svgRef,
+        viewBox: "0 0 68 68",
+        fill: "none",
+        width: 68,
+        height: 68,
+        xmlns: "http://www.w3.org/2000/svg",
+        className: ["ThumbnailFullWidth-root", className].filter(Boolean).join(" "),
+        ...props
+      },
+      /* @__PURE__ */ React.createElement("defs", null, /* @__PURE__ */ React.createElement("linearGradient", { id: `${uid}-paint0_linear_4428_19355`, x1: "77.0184", y1: "29.0713", x2: "37.9679", y2: "91.8439", gradientUnits: "userSpaceOnUse" }, /* @__PURE__ */ React.createElement("stop", { offset: "0.176006", stopColor: "#EAEFFF" }), /* @__PURE__ */ React.createElement("stop", { offset: "0.55", stopColor: "#B8C4FF" }), /* @__PURE__ */ React.createElement("stop", { offset: "0.8", stopColor: "#002294" })), /* @__PURE__ */ React.createElement("filter", { id: `${uid}-filter0_i_4428_19355`, filterUnits: "objectBoundingBox", x: "-1", y: "-1", width: "3", height: "3", colorInterpolationFilters: "sRGB" }, /* @__PURE__ */ React.createElement("feFlood", { result: "BackgroundImageFix", floodOpacity: "0" }), /* @__PURE__ */ React.createElement("feBlend", { mode: "normal", in: "SourceGraphic", in2: "BackgroundImageFix", result: "shape" }), /* @__PURE__ */ React.createElement("feColorMatrix", { in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }), /* @__PURE__ */ React.createElement("feOffset", { dx: "1", dy: "1" }), /* @__PURE__ */ React.createElement("feGaussianBlur", { stdDeviation: "1.5" }), /* @__PURE__ */ React.createElement("feComposite", { in2: "hardAlpha", operator: "arithmetic", k2: "-1", k3: "1" }), /* @__PURE__ */ React.createElement("feColorMatrix", { type: "matrix", values: "0 0 0 0 0.462745 0 0 0 0 0.458824 0 0 0 0 0.454902 0 0 0 0.2 0" }), /* @__PURE__ */ React.createElement("feBlend", { mode: "normal", in2: "shape", result: "effect1_innerShadow_4428_19355" })), /* @__PURE__ */ React.createElement("filter", { id: `${uid}-filter1_f_4428_19355`, filterUnits: "objectBoundingBox", x: "-1", y: "-1", width: "3", height: "3", colorInterpolationFilters: "sRGB" }, /* @__PURE__ */ React.createElement("feFlood", { result: "BackgroundImageFix", floodOpacity: "0" }), /* @__PURE__ */ React.createElement("feBlend", { mode: "normal", in: "SourceGraphic", in2: "BackgroundImageFix", result: "shape" }), /* @__PURE__ */ React.createElement("feGaussianBlur", { stdDeviation: "2.36111", result: "effect1_foregroundBlur_4428_19355" })), /* @__PURE__ */ React.createElement("clipPath", { id: `${uid}-clip0_4428_19355` }, /* @__PURE__ */ React.createElement("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" })), /* @__PURE__ */ React.createElement("clipPath", { id: `${uid}-clip1_4428_19355` }, /* @__PURE__ */ React.createElement("rect", { x: "55", y: "33", width: "22", height: "42", rx: "1.88889", transform: "rotate(90 55 33)", fill: "white" }))),
+      /* @__PURE__ */ React.createElement("g", { fill: "none", filter: `url(#${uid}-filter0_i_4428_19355)` }, /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { fill: "none", clipPath: `url(#${uid}-clip0_4428_19355)` }, /* @__PURE__ */ React.createElement("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: "var(--color-1)" }), /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("rect", { x: "0", y: "0", width: "68", height: "68", fill: "var(--color-1)" }), /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { fill: "none", className: "ThumbnailFullWidth-Frame-1707483281" }, /* @__PURE__ */ React.createElement("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)" })), /* @__PURE__ */ React.createElement("g", { fill: "none", className: "ThumbnailFullWidth-Frame-1707483278" }, /* @__PURE__ */ React.createElement("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)" })), /* @__PURE__ */ React.createElement("g", { fill: "none", className: "ThumbnailFullWidth-Frame-1707483277" }, /* @__PURE__ */ React.createElement("g", { fill: "none", clipPath: `url(#${uid}-clip1_4428_19355)` }, /* @__PURE__ */ React.createElement("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)" }), /* @__PURE__ */ React.createElement("g", { fill: "none", filter: `url(#${uid}-filter1_f_4428_19355)` }, /* @__PURE__ */ React.createElement("path", { d: "M84.1484 62.3047L84.1484 23.5791L4.71411 23.5791L4.71411 62.3047L84.1484 62.3047Z", fill: `url(#${uid}-paint0_linear_4428_19355)` })))))))))
+    );
+  }
+);
+ThumbnailFullWidth.displayName = "ThumbnailFullWidth";
+export {
+  ThumbnailFullWidth
+};

package/dist/esm/animated/ThumbnailGrid.js

@@ -0,0 +1,44 @@
+import React, { forwardRef, useEffect, useId, useImperativeHandle, useRef } from "react";
+const ThumbnailGrid = forwardRef(
+  ({ className, ...props }, ref) => {
+    const svgRef = useRef(null);
+    const uid = useId().replace(/:/g, "");
+    useImperativeHandle(
+      ref,
+      () => ({
+        play: () => svgRef.current?.getAnimations({ subtree: true }).forEach((a) => a.play()),
+        pause: () => svgRef.current?.getAnimations({ subtree: true }).forEach((a) => a.pause()),
+        reset: () => svgRef.current?.getAnimations({ subtree: true }).forEach((a) => {
+          a.currentTime = 0;
+          a.pause();
+        })
+      }),
+      []
+    );
+    useEffect(() => {
+      svgRef.current?.getAnimations({ subtree: true }).forEach((a) => {
+        a.currentTime = 0;
+        a.pause();
+      });
+    }, []);
+    return /* @__PURE__ */ React.createElement(
+      "svg",
+      {
+        ref: svgRef,
+        viewBox: "0 0 68 68",
+        fill: "none",
+        width: 68,
+        height: 68,
+        xmlns: "http://www.w3.org/2000/svg",
+        className: ["ThumbnailGrid-root", className].filter(Boolean).join(" "),
+        ...props
+      },
+      /* @__PURE__ */ React.createElement("defs", null, /* @__PURE__ */ React.createElement("linearGradient", { id: `${uid}-paint0_linear_4424_19258`, x1: "66.5888", y1: "5.72025", x2: "19.8579", y2: "25.1921", gradientUnits: "userSpaceOnUse" }, /* @__PURE__ */ React.createElement("stop", { offset: "0.176006", stopColor: "#EAEFFF" }), /* @__PURE__ */ React.createElement("stop", { offset: "0.55", stopColor: "#B8C4FF" }), /* @__PURE__ */ React.createElement("stop", { offset: "0.8", stopColor: "#002294" })), /* @__PURE__ */ React.createElement("filter", { id: `${uid}-filter0_i_4424_19258`, filterUnits: "objectBoundingBox", x: "-1", y: "-1", width: "3", height: "3", colorInterpolationFilters: "sRGB" }, /* @__PURE__ */ React.createElement("feFlood", { result: "BackgroundImageFix", floodOpacity: "0" }), /* @__PURE__ */ React.createElement("feBlend", { mode: "normal", in: "SourceGraphic", in2: "BackgroundImageFix", result: "shape" }), /* @__PURE__ */ React.createElement("feColorMatrix", { in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }), /* @__PURE__ */ React.createElement("feOffset", { dx: "0.944444", dy: "0.944444" }), /* @__PURE__ */ React.createElement("feGaussianBlur", { stdDeviation: "1.41667" }), /* @__PURE__ */ React.createElement("feComposite", { in2: "hardAlpha", operator: "arithmetic", k2: "-1", k3: "1" }), /* @__PURE__ */ React.createElement("feColorMatrix", { type: "matrix", values: "0 0 0 0 0.462745 0 0 0 0 0.458824 0 0 0 0 0.454902 0 0 0 0.2 0" }), /* @__PURE__ */ React.createElement("feBlend", { mode: "normal", in2: "shape", result: "effect1_innerShadow_4424_19258" })), /* @__PURE__ */ React.createElement("filter", { id: `${uid}-filter1_f_4424_19258`, filterUnits: "objectBoundingBox", x: "-1", y: "-1", width: "3", height: "3", colorInterpolationFilters: "sRGB" }, /* @__PURE__ */ React.createElement("feFlood", { result: "BackgroundImageFix", floodOpacity: "0" }), /* @__PURE__ */ React.createElement("feBlend", { mode: "normal", in: "SourceGraphic", in2: "BackgroundImageFix", result: "shape" }), /* @__PURE__ */ React.createElement("feGaussianBlur", { stdDeviation: "2.36111", result: "effect1_foregroundBlur_4424_19258" })), /* @__PURE__ */ React.createElement("clipPath", { id: `${uid}-clip0_4424_19258` }, /* @__PURE__ */ React.createElement("rect", { width: "13.2632", height: "21.0139", rx: "1.88889", transform: "matrix(-1 0 0 1 55 27.9922)", fill: "white" })), /* @__PURE__ */ React.createElement("mask", { id: `${uid}-am-node-1-2`, maskUnits: "userSpaceOnUse", "mask-type": "alpha", x: "0", y: "0", width: "68", height: "68" }, /* @__PURE__ */ React.createElement("rect", { x: "0", y: "0", width: "68", height: "68", rx: "7.55556", fill: "var(--color-1)" }))),
+      /* @__PURE__ */ React.createElement("g", { mask: `url(#${uid}-am-node-1-2)` }, /* @__PURE__ */ React.createElement("g", null, /* @__PURE__ */ React.createElement("g", { fill: "none", filter: `url(#${uid}-filter0_i_4424_19258)` }, /* @__PURE__ */ React.createElement("rect", { x: "0", y: "0", width: "68", height: "68", rx: "7.55556", fill: "var(--color-1)" }), /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { fill: "none", className: "ThumbnailGrid-Group-2147222318" }, /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("path", { d: "M 24.36891 19 L 14.88349 19 A 1.88889 1.88889 90 0 0 12.9946 20.88889 L 12.9946 38.12501 A 1.88889 1.88889 90 0 0 14.88349 40.0139 L 24.36891 40.0139 A 1.88889 1.88889 90 0 0 26.2578 38.12501 L 26.2578 20.88889 A 1.88889 1.88889 90 0 0 24.36891 19 Z", fill: "var(--color-2)" }))), /* @__PURE__ */ React.createElement("g", { fill: "none", className: "ThumbnailGrid-Group-2147222319" }, /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("path", { d: "M 38.74391 23.4844 L 29.25849 23.4844 A 1.88889 1.88889 90 0 0 27.3696 25.37329 L 27.3696 42.60941 A 1.88889 1.88889 90 0 0 29.25849 44.4983 L 38.74391 44.4983 A 1.88889 1.88889 90 0 0 40.6328 42.60941 L 40.6328 25.37329 A 1.88889 1.88889 90 0 0 38.74391 23.4844 Z", fill: "var(--color-3)" }))), /* @__PURE__ */ React.createElement("g", { fill: "none", className: "ThumbnailGrid-Group-2147222320" }, /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { fill: "none", clipPath: `url(#${uid}-clip0_4424_19258)` }, /* @__PURE__ */ React.createElement("path", { d: "M 53.11111 27.9922 L 43.62569 27.9922 A 1.88889 1.88889 90 0 0 41.7368 29.88109 L 41.7368 47.11721 A 1.88889 1.88889 90 0 0 43.62569 49.0061 L 53.11111 49.0061 A 1.88889 1.88889 90 0 0 55 47.11721 L 55 29.88109 A 1.88889 1.88889 90 0 0 53.11111 27.9922 Z", fill: "var(--color-2)" }), /* @__PURE__ */ React.createElement("g", { fill: "none", filter: `url(#${uid}-filter1_f_4424_19258)` }, /* @__PURE__ */ React.createElement("path", { d: "M69.3828 55.9609L69.3828 -2.58272H38.2549L38.2549 55.9609H69.3828Z", fill: `url(#${uid}-paint0_linear_4424_19258)` })))))))))
+    );
+  }
+);
+ThumbnailGrid.displayName = "ThumbnailGrid";
+export {
+  ThumbnailGrid
+};

package/dist/esm/animated/ThumbnailSideBySide.js

@@ -0,0 +1,44 @@
+import React, { forwardRef, useEffect, useId, useImperativeHandle, useRef } from "react";
+const ThumbnailSideBySide = forwardRef(
+  ({ className, ...props }, ref) => {
+    const svgRef = useRef(null);
+    const uid = useId().replace(/:/g, "");
+    useImperativeHandle(
+      ref,
+      () => ({
+        play: () => svgRef.current?.getAnimations({ subtree: true }).forEach((a) => a.play()),
+        pause: () => svgRef.current?.getAnimations({ subtree: true }).forEach((a) => a.pause()),
+        reset: () => svgRef.current?.getAnimations({ subtree: true }).forEach((a) => {
+          a.currentTime = 0;
+          a.pause();
+        })
+      }),
+      []
+    );
+    useEffect(() => {
+      svgRef.current?.getAnimations({ subtree: true }).forEach((a) => {
+        a.currentTime = 0;
+        a.pause();
+      });
+    }, []);
+    return /* @__PURE__ */ React.createElement(
+      "svg",
+      {
+        ref: svgRef,
+        viewBox: "0 0 68 68",
+        fill: "none",
+        width: 68,
+        height: 68,
+        xmlns: "http://www.w3.org/2000/svg",
+        className: ["ThumbnailSideBySide-root", className].filter(Boolean).join(" "),
+        ...props
+      },
+      /* @__PURE__ */ React.createElement("defs", null, /* @__PURE__ */ React.createElement("linearGradient", { id: `${uid}-paint0_linear_4424_19222`, x1: "76.7997", y1: "28.9776", x2: "37.7492", y2: "91.7501", gradientUnits: "userSpaceOnUse" }, /* @__PURE__ */ React.createElement("stop", { offset: "0.176006", stopColor: "#EAEFFF" }), /* @__PURE__ */ React.createElement("stop", { offset: "0.55", stopColor: "#B8C4FF" }), /* @__PURE__ */ React.createElement("stop", { offset: "0.8", stopColor: "#002294" })), /* @__PURE__ */ React.createElement("linearGradient", { id: `${uid}-paint1_linear_4424_19222`, x1: "98.5184", y1: "28.9776", x2: "59.4679", y2: "91.7501", gradientUnits: "userSpaceOnUse" }, /* @__PURE__ */ React.createElement("stop", { offset: "0.176006", stopColor: "#EAEFFF" }), /* @__PURE__ */ React.createElement("stop", { offset: "0.55", stopColor: "#B8C4FF" }), /* @__PURE__ */ React.createElement("stop", { offset: "0.8", stopColor: "#002294" })), /* @__PURE__ */ React.createElement("filter", { id: `${uid}-filter0_i_4424_19222`, filterUnits: "objectBoundingBox", x: "-1", y: "-1", width: "3", height: "3", colorInterpolationFilters: "sRGB" }, /* @__PURE__ */ React.createElement("feFlood", { result: "BackgroundImageFix", floodOpacity: "0" }), /* @__PURE__ */ React.createElement("feBlend", { mode: "normal", in: "SourceGraphic", in2: "BackgroundImageFix", result: "shape" }), /* @__PURE__ */ React.createElement("feColorMatrix", { in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }), /* @__PURE__ */ React.createElement("feOffset", { dx: "1", dy: "1" }), /* @__PURE__ */ React.createElement("feGaussianBlur", { stdDeviation: "1.5" }), /* @__PURE__ */ React.createElement("feComposite", { in2: "hardAlpha", operator: "arithmetic", k2: "-1", k3: "1" }), /* @__PURE__ */ React.createElement("feColorMatrix", { type: "matrix", values: "0 0 0 0 0.462745 0 0 0 0 0.458824 0 0 0 0 0.454902 0 0 0 0.2 0" }), /* @__PURE__ */ React.createElement("feBlend", { mode: "normal", in2: "shape", result: "effect1_innerShadow_4424_19222" })), /* @__PURE__ */ React.createElement("filter", { id: `${uid}-filter1_f_4424_19222`, filterUnits: "objectBoundingBox", x: "-1", y: "-1", width: "3", height: "3", colorInterpolationFilters: "sRGB" }, /* @__PURE__ */ React.createElement("feFlood", { result: "BackgroundImageFix", floodOpacity: "0" }), /* @__PURE__ */ React.createElement("feBlend", { mode: "normal", in: "SourceGraphic", in2: "BackgroundImageFix", result: "shape" }), /* @__PURE__ */ React.createElement("feGaussianBlur", { stdDeviation: "2.36111", result: "effect1_foregroundBlur_4424_19222" })), /* @__PURE__ */ React.createElement("filter", { id: `${uid}-filter2_f_4424_19222`, filterUnits: "objectBoundingBox", x: "-1", y: "-1", width: "3", height: "3", colorInterpolationFilters: "sRGB" }, /* @__PURE__ */ React.createElement("feFlood", { result: "BackgroundImageFix", floodOpacity: "0" }), /* @__PURE__ */ React.createElement("feBlend", { mode: "normal", in: "SourceGraphic", in2: "BackgroundImageFix", result: "shape" }), /* @__PURE__ */ React.createElement("feGaussianBlur", { stdDeviation: "2.36111", result: "effect1_foregroundBlur_4424_19222" })), /* @__PURE__ */ React.createElement("clipPath", { id: `${uid}-clip0_4424_19222` }, /* @__PURE__ */ React.createElement("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" })), /* @__PURE__ */ React.createElement("clipPath", { id: `${uid}-clip1_4424_19222` }, /* @__PURE__ */ React.createElement("rect", { x: "33.2578", y: "32.9062", width: "21.8713", height: "20.0353", rx: "2.83333", transform: "rotate(90 33.2578 32.9062)", fill: "white" })), /* @__PURE__ */ React.createElement("clipPath", { id: `${uid}-clip2_4424_19222` }, /* @__PURE__ */ React.createElement("rect", { x: "54.7734", y: "32.9062", width: "21.8713", height: "20.0353", rx: "2.83333", transform: "rotate(90 54.7734 32.9062)", fill: "white" }))),
+      /* @__PURE__ */ React.createElement("g", { fill: "none", filter: `url(#${uid}-filter0_i_4424_19222)` }, /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { fill: "none", clipPath: `url(#${uid}-clip0_4424_19222)` }, /* @__PURE__ */ React.createElement("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: "var(--color-3)" }), /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("rect", { x: "0", y: "0", width: "68", height: "68", rx: "3.77778", fill: "var(--color-3)" }), /* @__PURE__ */ React.createElement("g", { className: "ThumbnailSideBySide-group-mtr8nkm4-1" }, /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("path", { d: "M 54.7734 16.05213 L 54.7734 32.25677 A 2.83333 2.83333 45 0 1 51.94007 35.0901 L 37.57143 35.0901 A 2.83333 2.83333 45 0 1 34.7381 32.25677 L 34.7381 16.05213 A 2.83333 2.83333 45 0 1 37.57143 13.2188 L 51.94007 13.2188 A 2.83333 2.83333 45 0 1 54.7734 16.05213 Z", fill: "var(--color-2)" })), /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("path", { d: "M 33.2578 16.05213 L 33.2578 32.25677 A 2.83333 2.83333 45 0 1 30.42447 35.0901 L 16.05583 35.0901 A 2.83333 2.83333 45 0 1 13.2225 32.25677 L 13.2225 16.05213 A 2.83333 2.83333 45 0 1 16.05583 13.2188 L 30.42447 13.2188 A 2.83333 2.83333 45 0 1 33.2578 16.05213 Z", fill: "var(--color-2)" }))), /* @__PURE__ */ React.createElement("g", { className: "ThumbnailSideBySide-group-mtr8o0p7-2" }, /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("path", { d: "M 33.2578 25.89583 L 33.2578 42.10047 A 2.83333 2.83333 45 0 1 30.42447 44.9338 L 16.05583 44.9338 A 2.83333 2.83333 45 0 1 13.2225 42.10047 L 13.2225 25.89583 A 2.83333 2.83333 45 0 1 16.05583 23.0625 L 30.42447 23.0625 A 2.83333 2.83333 45 0 1 33.2578 25.89583 Z", fill: "var(--color-1)" })), /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("path", { d: "M 54.7734 25.89583 L 54.7734 42.10047 A 2.83333 2.83333 45 0 1 51.94007 44.9338 L 37.57143 44.9338 A 2.83333 2.83333 45 0 1 34.7381 42.10047 L 34.7381 25.89583 A 2.83333 2.83333 45 0 1 37.57143 23.0625 L 51.94007 23.0625 A 2.83333 2.83333 45 0 1 54.7734 25.89583 Z", fill: "var(--color-1)" }))), /* @__PURE__ */ React.createElement("g", { className: "ThumbnailSideBySide-group-mtr8obho-3" }, /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { fill: "none", clipPath: `url(#${uid}-clip1_4424_19222)` }, /* @__PURE__ */ React.createElement("path", { d: "M 33.2578 35.73953 L 33.2578 51.94417 A 2.83333 2.83333 45 0 1 30.42447 54.7775 L 16.05583 54.7775 A 2.83333 2.83333 45 0 1 13.2225 51.94417 L 13.2225 35.73953 A 2.83333 2.83333 45 0 1 16.05583 32.9062 L 30.42447 32.9062 A 2.83333 2.83333 45 0 1 33.2578 35.73953 Z", fill: "var(--color-2)" }), /* @__PURE__ */ React.createElement("g", { fill: "none", filter: `url(#${uid}-filter1_f_4424_19222)` }, /* @__PURE__ */ React.createElement("path", { d: "M83.9297 62.2109L83.9297 23.4853L4.49536 23.4853L4.49536 62.2109L83.9297 62.2109Z", fill: `url(#${uid}-paint0_linear_4424_19222)` })))), /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { fill: "none", clipPath: `url(#${uid}-clip2_4424_19222)` }, /* @__PURE__ */ React.createElement("path", { d: "M 54.7734 35.73953 L 54.7734 51.94417 A 2.83333 2.83333 45 0 1 51.94007 54.7775 L 37.57143 54.7775 A 2.83333 2.83333 45 0 1 34.7381 51.94417 L 34.7381 35.73953 A 2.83333 2.83333 45 0 1 37.57143 32.9062 L 51.94007 32.9062 A 2.83333 2.83333 45 0 1 54.7734 35.73953 Z", fill: "var(--color-2)" }), /* @__PURE__ */ React.createElement("g", { fill: "none", filter: `url(#${uid}-filter2_f_4424_19222)` }, /* @__PURE__ */ React.createElement("path", { d: "M105.648 62.2109L105.648 23.4853L26.2141 23.4853L26.2141 62.2109L105.648 62.2109Z", fill: `url(#${uid}-paint1_linear_4424_19222)` })))))))))
+    );
+  }
+);
+ThumbnailSideBySide.displayName = "ThumbnailSideBySide";
+export {
+  ThumbnailSideBySide
+};

package/dist/esm/animated/ThumbnailSplit.js

@@ -0,0 +1,44 @@
+import React, { forwardRef, useEffect, useId, useImperativeHandle, useRef } from "react";
+const ThumbnailSplit = forwardRef(
+  ({ className, ...props }, ref) => {
+    const svgRef = useRef(null);
+    const uid = useId().replace(/:/g, "");
+    useImperativeHandle(
+      ref,
+      () => ({
+        play: () => svgRef.current?.getAnimations({ subtree: true }).forEach((a) => a.play()),
+        pause: () => svgRef.current?.getAnimations({ subtree: true }).forEach((a) => a.pause()),
+        reset: () => svgRef.current?.getAnimations({ subtree: true }).forEach((a) => {
+          a.currentTime = 0;
+          a.pause();
+        })
+      }),
+      []
+    );
+    useEffect(() => {
+      svgRef.current?.getAnimations({ subtree: true }).forEach((a) => {
+        a.currentTime = 0;
+        a.pause();
+      });
+    }, []);
+    return /* @__PURE__ */ React.createElement(
+      "svg",
+      {
+        ref: svgRef,
+        viewBox: "0 0 68 68",
+        fill: "none",
+        width: 68,
+        height: 68,
+        xmlns: "http://www.w3.org/2000/svg",
+        className: ["ThumbnailSplit-root", className].filter(Boolean).join(" "),
+        ...props
+      },
+      /* @__PURE__ */ React.createElement("defs", null, /* @__PURE__ */ React.createElement("linearGradient", { id: `${uid}-paint0_linear_4428_19363`, x1: "97.8231", y1: "29.0557", x2: "58.7726", y2: "91.8283", gradientUnits: "userSpaceOnUse" }, /* @__PURE__ */ React.createElement("stop", { offset: "0.176006", stopColor: "#EAEFFF" }), /* @__PURE__ */ React.createElement("stop", { offset: "0.55", stopColor: "#B8C4FF" }), /* @__PURE__ */ React.createElement("stop", { offset: "0.8", stopColor: "#002294" })), /* @__PURE__ */ React.createElement("filter", { id: `${uid}-filter0_i_4428_19363`, filterUnits: "objectBoundingBox", x: "-1", y: "-1", width: "3", height: "3", colorInterpolationFilters: "sRGB" }, /* @__PURE__ */ React.createElement("feFlood", { result: "BackgroundImageFix", floodOpacity: "0" }), /* @__PURE__ */ React.createElement("feBlend", { mode: "normal", in: "SourceGraphic", in2: "BackgroundImageFix", result: "shape" }), /* @__PURE__ */ React.createElement("feColorMatrix", { in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }), /* @__PURE__ */ React.createElement("feOffset", { dx: "0.944444", dy: "0.944444" }), /* @__PURE__ */ React.createElement("feGaussianBlur", { stdDeviation: "1.41667" }), /* @__PURE__ */ React.createElement("feComposite", { in2: "hardAlpha", operator: "arithmetic", k2: "-1", k3: "1" }), /* @__PURE__ */ React.createElement("feColorMatrix", { type: "matrix", values: "0 0 0 0 0.462745 0 0 0 0 0.458824 0 0 0 0 0.454902 0 0 0 0.2 0" }), /* @__PURE__ */ React.createElement("feBlend", { mode: "normal", in2: "shape", result: "effect1_innerShadow_4428_19363" })), /* @__PURE__ */ React.createElement("filter", { id: `${uid}-filter1_f_4428_19363`, filterUnits: "objectBoundingBox", x: "-1", y: "-1", width: "3", height: "3", colorInterpolationFilters: "sRGB" }, /* @__PURE__ */ React.createElement("feFlood", { result: "BackgroundImageFix", floodOpacity: "0" }), /* @__PURE__ */ React.createElement("feBlend", { mode: "normal", in: "SourceGraphic", in2: "BackgroundImageFix", result: "shape" }), /* @__PURE__ */ React.createElement("feGaussianBlur", { stdDeviation: "2.36111", result: "effect1_foregroundBlur_4428_19363" })), /* @__PURE__ */ React.createElement("clipPath", { id: `${uid}-clip0_4428_19363` }, /* @__PURE__ */ React.createElement("rect", { x: "55", y: "33", width: "22", height: "21", rx: "2.83333", transform: "rotate(90 55 33)", fill: "white" })), /* @__PURE__ */ React.createElement("mask", { id: `${uid}-am-node-1-2-2`, maskUnits: "userSpaceOnUse", "mask-type": "alpha", x: "0", y: "0", width: "68", height: "68" }, /* @__PURE__ */ React.createElement("rect", { x: "0", y: "0", width: "68", height: "68", rx: "7.55556", fill: "var(--color-1)" })), /* @__PURE__ */ React.createElement("mask", { id: `${uid}-am-node-1-2-2-2`, maskUnits: "userSpaceOnUse", "mask-type": "alpha", x: "0", y: "0", width: "68", height: "68" }, /* @__PURE__ */ React.createElement("rect", { x: "0", y: "0", width: "68", height: "68", rx: "7.55556", fill: "var(--color-1)" })), /* @__PURE__ */ React.createElement("mask", { id: `${uid}-am-node-1-2`, maskUnits: "userSpaceOnUse", "mask-type": "alpha", x: "0", y: "0", width: "68", height: "68" }, /* @__PURE__ */ React.createElement("rect", { x: "0", y: "0", width: "68", height: "68", rx: "7.55556", fill: "var(--color-1)" }))),
+      /* @__PURE__ */ React.createElement("g", { fill: "none", filter: `url(#${uid}-filter0_i_4428_19363)` }, /* @__PURE__ */ React.createElement("rect", { x: "0", y: "0", width: "68", height: "68", rx: "7.55556", fill: "var(--color-1)" }), /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { fill: "none", opacity: "0.25" }, /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("rect", { x: "13", y: "13", width: "42", height: "42", rx: "2.83333", fill: "var(--color-2)" }))), /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { mask: `url(#${uid}-am-node-1-2-2)` }, /* @__PURE__ */ React.createElement("g", { fill: "none", className: "ThumbnailSplit-Frame-1707483281" }, /* @__PURE__ */ React.createElement("path", { style: { "transformBox": "fill-box", "transformOrigin": "50% 50%", "transform": "translate(0px, 0px)" }, d: "M 55 15.83333 L 55 32.16667 A 2.83333 2.83333 45 0 1 52.16667 35 L 36.83333 35 A 2.83333 2.83333 45 0 1 34 32.16667 L 34 15.83333 A 2.83333 2.83333 45 0 1 36.83333 13 L 52.16667 13 A 2.83333 2.83333 45 0 1 55 15.83333 Z", fill: "var(--color-2)" }))), /* @__PURE__ */ React.createElement("g", { mask: `url(#${uid}-am-node-1-2-2-2)` }, /* @__PURE__ */ React.createElement("g", { fill: "none", className: "ThumbnailSplit-Frame-1707483278" }, /* @__PURE__ */ React.createElement("path", { d: "M 55 25.83333 L 55 42.16667 A 2.83333 2.83333 45 0 1 52.16667 45 L 36.83333 45 A 2.83333 2.83333 45 0 1 34 42.16667 L 34 25.83333 A 2.83333 2.83333 45 0 1 36.83333 23 L 52.16667 23 A 2.83333 2.83333 45 0 1 55 25.83333 Z", fill: "var(--color-3)" }))), /* @__PURE__ */ React.createElement("g", { mask: `url(#${uid}-am-node-1-2)` }, /* @__PURE__ */ React.createElement("g", { fill: "none", className: "ThumbnailSplit-Frame-1707483277" }, /* @__PURE__ */ React.createElement("g", { fill: "none", clipPath: `url(#${uid}-clip0_4428_19363)` }, /* @__PURE__ */ React.createElement("path", { d: "M 55 35.83333 L 55 52.16667 A 2.83333 2.83333 45 0 1 52.16667 55 L 36.83333 55 A 2.83333 2.83333 45 0 1 34 52.16667 L 34 35.83333 A 2.83333 2.83333 45 0 1 36.83333 33 L 52.16667 33 A 2.83333 2.83333 45 0 1 55 35.83333 Z", fill: "var(--color-2)" }), /* @__PURE__ */ React.createElement("g", { fill: "none", filter: `url(#${uid}-filter1_f_4428_19363)` }, /* @__PURE__ */ React.createElement("path", { d: "M104.953 62.2891L104.953 23.5634L25.5188 23.5634L25.5188 62.2891L104.953 62.2891Z", fill: `url(#${uid}-paint0_linear_4428_19363)` }))))))))
+    );
+  }
+);
+ThumbnailSplit.displayName = "ThumbnailSplit";
+export {
+  ThumbnailSplit
+};