@wix/design-system-illustrations 2.38.3 → 2.39.0

package/dist/esm/animated/ThumbnailZigzag.js

@@ -0,0 +1,44 @@
+import React, { forwardRef, useEffect, useId, useImperativeHandle, useRef } from "react";
+const ThumbnailZigzag = 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: ["ThumbnailZigzag-root", className].filter(Boolean).join(" "),
+        ...props
+      },
+      /* @__PURE__ */ React.createElement("defs", null, /* @__PURE__ */ React.createElement("linearGradient", { id: `${uid}-paint0_linear_4424_19163`, x1: "113.06", y1: "9.65327", x2: "47.0261", y2: "92.6155", 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_19163`, 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_19163" })), /* @__PURE__ */ React.createElement("filter", { id: `${uid}-filter1_f_4424_19163`, 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_19163" })), /* @__PURE__ */ React.createElement("clipPath", { id: `${uid}-clip0_4424_19163` }, /* @__PURE__ */ React.createElement("rect", { width: "68", height: "68", fill: "white" })), /* @__PURE__ */ React.createElement("clipPath", { id: `${uid}-clip1_4424_19163` }, /* @__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}-clip2_4424_19163` }, /* @__PURE__ */ React.createElement("rect", { x: "54.7812", y: "32.1719", width: "23.6111", height: "20.7778", rx: "2.83333", transform: "rotate(90 54.7812 32.1719)", fill: "white" }))),
+      /* @__PURE__ */ React.createElement("g", { fill: "none", filter: `url(#${uid}-filter0_i_4424_19163)` }, /* @__PURE__ */ React.createElement("g", { fill: "none", clipPath: `url(#${uid}-clip0_4424_19163)` }, /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { fill: "none", clipPath: `url(#${uid}-clip1_4424_19163)` }, /* @__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", rx: "3.77778", fill: "var(--color-1)" })))), /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { fill: "none", className: "ThumbnailZigzag-Frame-1707483283" }, /* @__PURE__ */ React.createElement("path", { d: "M 34 16.05993 L 34 34.00437 A 2.83333 2.83333 45 0 1 31.16667 36.8377 L 16.05553 36.8377 A 2.83333 2.83333 45 0 1 13.2222 34.00437 L 13.2222 16.05993 A 2.83333 2.83333 45 0 1 16.05553 13.2266 L 31.16667 13.2266 A 2.83333 2.83333 45 0 1 34 16.05993 Z", fill: "var(--color-2)" })), /* @__PURE__ */ React.createElement("g", { fill: "none", className: "ThumbnailZigzag-Frame-1707483285" }, /* @__PURE__ */ React.createElement("path", { d: "M 54.7812 21.72393 L 54.7812 39.66837 A 2.83333 2.83333 45 0 1 51.94787 42.5017 L 36.83673 42.5017 A 2.83333 2.83333 45 0 1 34.0034 39.66837 L 34.0034 21.72393 A 2.83333 2.83333 45 0 1 36.83673 18.8906 L 51.94787 18.8906 A 2.83333 2.83333 45 0 1 54.7812 21.72393 Z", fill: "var(--color-3)" })), /* @__PURE__ */ React.createElement("g", { fill: "none", className: "ThumbnailZigzag-Frame-1707483284" }, /* @__PURE__ */ React.createElement("path", { d: "M 34 29.27863 L 34 47.22307 A 2.83333 2.83333 45 0 1 31.16667 50.0564 L 16.05553 50.0564 A 2.83333 2.83333 45 0 1 13.2222 47.22307 L 13.2222 29.27863 A 2.83333 2.83333 45 0 1 16.05553 26.4453 L 31.16667 26.4453 A 2.83333 2.83333 45 0 1 34 29.27863 Z", fill: "var(--color-4)" })), /* @__PURE__ */ React.createElement("g", { fill: "none", className: "ThumbnailZigzag-Frame-1707483282" }, /* @__PURE__ */ React.createElement("g", { fill: "none", clipPath: `url(#${uid}-clip2_4424_19163)` }, /* @__PURE__ */ React.createElement("path", { d: "M 54.7812 35.00523 L 54.7812 52.94967 A 2.83333 2.83333 45 0 1 51.94787 55.783 L 36.83673 55.783 A 2.83333 2.83333 45 0 1 34.0034 52.94967 L 34.0034 35.00523 A 2.83333 2.83333 45 0 1 36.83673 32.1719 L 51.94787 32.1719 A 2.83333 2.83333 45 0 1 54.7812 35.00523 Z", fill: "var(--color-2)" }), /* @__PURE__ */ React.createElement("g", { fill: "none", filter: `url(#${uid}-filter1_f_4424_19163)` }, /* @__PURE__ */ React.createElement("path", { d: "M121.734 61.3828L121.734 1.10425L25.0979 1.10425L25.0979 61.3828L121.734 61.3828Z", fill: `url(#${uid}-paint0_linear_4424_19163)` })))))))
+    );
+  }
+);
+ThumbnailZigzag.displayName = "ThumbnailZigzag";
+export {
+  ThumbnailZigzag
+};

package/dist/esm/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/esm/animated/index.js

@@ -26,6 +26,11 @@ import { ResponsiveBehaviorTextScaleProportionally } from "./ResponsiveBehaviorT
 import { ResponsiveBehaviorWarp } from "./ResponsiveBehaviorWarp";
 import { SectionFixedHeight } from "./SectionFixedHeight";
 import { SectionScale } from "./SectionScale";
+import { ThumbnailFullWidth } from "./ThumbnailFullWidth";
+import { ThumbnailGrid } from "./ThumbnailGrid";
+import { ThumbnailSideBySide } from "./ThumbnailSideBySide";
+import { ThumbnailSplit } from "./ThumbnailSplit";
+import { ThumbnailZigzag } from "./ThumbnailZigzag";
 export {
   ElementsFixedHeight,
   ElementsFixedMargins,
@@ -54,5 +59,10 @@ export {
   ResponsiveBehaviorTextScaleProportionally,
   ResponsiveBehaviorWarp,
   SectionFixedHeight,
-  SectionScale
+  SectionScale,
+  ThumbnailFullWidth,
+  ThumbnailGrid,
+  ThumbnailSideBySide,
+  ThumbnailSplit,
+  ThumbnailZigzag
 };

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

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

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

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

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

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

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

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

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

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

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

@@ -54,3 +54,13 @@ export { SectionFixedHeight } from './SectionFixedHeight';
 export type { SectionFixedHeightHandle } from './SectionFixedHeight';
 export { SectionScale } from './SectionScale';
 export type { SectionScaleHandle } from './SectionScale';
+export { ThumbnailFullWidth } from './ThumbnailFullWidth';
+export type { ThumbnailFullWidthHandle } from './ThumbnailFullWidth';
+export { ThumbnailGrid } from './ThumbnailGrid';
+export type { ThumbnailGridHandle } from './ThumbnailGrid';
+export { ThumbnailSideBySide } from './ThumbnailSideBySide';
+export type { ThumbnailSideBySideHandle } from './ThumbnailSideBySide';
+export { ThumbnailSplit } from './ThumbnailSplit';
+export type { ThumbnailSplitHandle } from './ThumbnailSplit';
+export { ThumbnailZigzag } from './ThumbnailZigzag';
+export type { ThumbnailZigzagHandle } from './ThumbnailZigzag';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/design-system-illustrations",
-  "version": "2.38.3",
+  "version": "2.39.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.232.6",
+    "@wix/design-system-tokens": "1.233.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": "98fbca32cd21503f5d97c7683d9fe0635ec5dd974c60fcf5a9d547c3"
+  "falconPackageHash": "cca9a168a4e22db3b54ab01f501acb4214f15206a6accd769866cdaf"
 }