@wix/design-system-illustrations 2.16.0 → 2.17.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (38) hide show
  1. package/animated/package.json +5 -0
  2. package/animated/style.css +1 -0
  3. package/dist/cjs/CloseupSection.js +62 -0
  4. package/dist/cjs/ColorClick.js +52 -0
  5. package/dist/cjs/ColorHover.js +54 -0
  6. package/dist/cjs/LayeredElipseDivider.js +4 -3
  7. package/dist/cjs/PeaksDivider.js +52 -0
  8. package/dist/cjs/ShuttersAnimation.js +52 -0
  9. package/dist/cjs/animated/ThumbnailScale.js +87 -0
  10. package/dist/cjs/animated/animated.css +122 -0
  11. package/dist/cjs/animated/index.js +28 -0
  12. package/dist/cjs/index.js +15 -0
  13. package/dist/esm/CloseupSection.js +28 -0
  14. package/dist/esm/ColorClick.js +18 -0
  15. package/dist/esm/ColorHover.js +20 -0
  16. package/dist/esm/LayeredElipseDivider.js +4 -3
  17. package/dist/esm/PeaksDivider.js +18 -0
  18. package/dist/esm/ShuttersAnimation.js +18 -0
  19. package/dist/esm/animated/ThumbnailScale.js +43 -0
  20. package/dist/esm/animated/animated.css +122 -0
  21. package/dist/esm/animated/index.js +4 -0
  22. package/dist/esm/index.js +10 -0
  23. package/dist/types/CloseupSection.d.ts +5 -0
  24. package/dist/types/ColorClick.d.ts +5 -0
  25. package/dist/types/ColorHover.d.ts +5 -0
  26. package/dist/types/PeaksDivider.d.ts +5 -0
  27. package/dist/types/ShuttersAnimation.d.ts +5 -0
  28. package/dist/types/animated/ThumbnailScale.d.ts +7 -0
  29. package/dist/types/animated/index.d.ts +2 -0
  30. package/dist/types/index.d.ts +5 -0
  31. package/package.json +8 -4
  32. package/src/CloseupSection.svg +87 -0
  33. package/src/ColorClick.svg +59 -0
  34. package/src/ColorHover.svg +54 -0
  35. package/src/LayeredElipseDivider.svg +3 -3
  36. package/src/PeaksDivider.svg +28 -0
  37. package/src/ShuttersAnimation.svg +57 -0
  38. package/src/animated/ThumbnailScale.html +494 -0
package/dist/cjs/animated/animated.css ADDED
@@ -0,0 +1,122 @@
1
+ /* ThumbnailScale */
2
+
3
+ .ThumbnailScale-root {
4
+ max-width: 100%;
5
+ height: auto;
6
+ }
7
+
8
+ .ThumbnailScale-Frame-2147240028 {
9
+ transform-box: fill-box;
10
+ transform-origin: 50% 50%;
11
+ animation: ThumbnailScale-Frame-2147240028-transform 3417ms linear infinite both;
12
+ }
13
+
14
+ @keyframes ThumbnailScale-Frame-2147240028-transform {
15
+ 0% {
16
+ transform: scale(0.56, 0.56);
17
+ animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
18
+ }
19
+ 2.429031% {
20
+ transform: scale(0.56, 0.56);
21
+ animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
22
+ }
23
+ 51.214516% {
24
+ transform: scale(1, 1);
25
+ animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
26
+ }
27
+ 99.970735% {
28
+ transform: scale(0.56, 0.56);
29
+ }
30
+ 100% {
31
+ transform: scale(0.56, 0.56);
32
+ }
33
+ }
34
+
35
+ .ThumbnailScale-Vector_4 {
36
+ transform-box: fill-box;
37
+ transform-origin: 50% 50%;
38
+ animation: ThumbnailScale-Vector_4-transform 3417ms linear infinite both;
39
+ }
40
+
41
+ @keyframes ThumbnailScale-Vector_4-transform {
42
+ 0% {
43
+ transform: translate(37px, 0px);
44
+ animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
45
+ }
46
+ 48.785484% {
47
+ transform: translate(0px, 0px);
48
+ animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
49
+ }
50
+ 97.541703% {
51
+ transform: translate(37px, 0px);
52
+ }
53
+ 100% {
54
+ transform: translate(37px, 0px);
55
+ }
56
+ }
57
+
58
+ .ThumbnailScale-Vector_5 {
59
+ transform-box: fill-box;
60
+ transform-origin: 50% 50%;
61
+ animation: ThumbnailScale-Vector_5-transform 3417ms linear infinite both;
62
+ }
63
+
64
+ @keyframes ThumbnailScale-Vector_5-transform {
65
+ 0% {
66
+ transform: translate(-37px, 0px);
67
+ animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
68
+ }
69
+ 48.785484% {
70
+ transform: translate(0px, 0px);
71
+ animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
72
+ }
73
+ 97.541703% {
74
+ transform: translate(-37px, 0px);
75
+ }
76
+ 100% {
77
+ transform: translate(-37px, 0px);
78
+ }
79
+ }
80
+
81
+ .ThumbnailScale-node-3 {
82
+ transform-box: fill-box;
83
+ transform-origin: 50% 50%;
84
+ animation:
85
+ ThumbnailScale-node-3-transform 3417ms linear infinite both,
86
+ ThumbnailScale-node-3-width 3417ms linear infinite both;
87
+ }
88
+
89
+ @keyframes ThumbnailScale-node-3-transform {
90
+ 0% {
91
+ transform: translate(0px, 0px);
92
+ animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
93
+ }
94
+ 48.785484% {
95
+ transform: translate(-37px, 0px);
96
+ animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
97
+ }
98
+ 97.541703% {
99
+ transform: translate(0px, 0px);
100
+ }
101
+ 100% {
102
+ transform: translate(0px, 0px);
103
+ }
104
+ }
105
+
106
+ @keyframes ThumbnailScale-node-3-width {
107
+ 0% {
108
+ width: 73px;
109
+ animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
110
+ }
111
+ 48.785484% {
112
+ width: 147px;
113
+ animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
114
+ }
115
+ 97.541703% {
116
+ width: 73px;
117
+ }
118
+ 100% {
119
+ width: 73px;
120
+ }
121
+ }
122
+
package/dist/cjs/animated/index.js ADDED
@@ -0,0 +1,28 @@
1
+ "use strict";
2
+ var __defProp = Object.defineProperty;
3
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
+ var __getOwnPropNames = Object.getOwnPropertyNames;
5
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
6
+ var __export = (target, all) => {
7
+ for (var name in all)
8
+ __defProp(target, name, { get: all[name], enumerable: true });
9
+ };
10
+ var __copyProps = (to, from, except, desc) => {
11
+ if (from && typeof from === "object" || typeof from === "function") {
12
+ for (let key of __getOwnPropNames(from))
13
+ if (!__hasOwnProp.call(to, key) && key !== except)
14
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
15
+ }
16
+ return to;
17
+ };
18
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
19
+ var animated_exports = {};
20
+ __export(animated_exports, {
21
+ ThumbnailScale: () => import_ThumbnailScale.ThumbnailScale
22
+ });
23
+ module.exports = __toCommonJS(animated_exports);
24
+ var import_ThumbnailScale = require("./ThumbnailScale");
25
+ // Annotate the CommonJS export names for ESM import in node:
26
+ 0 && (module.exports = {
27
+ ThumbnailScale
28
+ });
package/dist/cjs/index.js CHANGED
@@ -86,8 +86,11 @@ __export(index_exports, {
86
86
  CircleImage: () => import_CircleImage.CircleImage,
87
87
  CircleMarker: () => import_CircleMarker.CircleMarker,
88
88
  ClockWipe: () => import_ClockWipe.ClockWipe,
89
+ CloseupSection: () => import_CloseupSection.CloseupSection,
89
90
  CloudsDivider: () => import_CloudsDivider.CloudsDivider,
90
91
  ColorAnimation: () => import_ColorAnimation.ColorAnimation,
92
+ ColorClick: () => import_ColorClick.ColorClick,
93
+ ColorHover: () => import_ColorHover.ColorHover,
91
94
  ColorTransition: () => import_ColorTransition.ColorTransition,
92
95
  CrossLoop: () => import_CrossLoop.CrossLoop,
93
96
  Cube: () => import_Cube.Cube,
@@ -198,6 +201,7 @@ __export(index_exports, {
198
201
  PanSection: () => import_PanSection.PanSection,
199
202
  ParallaxScroll: () => import_ParallaxScroll.ParallaxScroll,
200
203
  ParallaxSection: () => import_ParallaxSection.ParallaxSection,
204
+ PeaksDivider: () => import_PeaksDivider.PeaksDivider,
201
205
  PentagonImage: () => import_PentagonImage.PentagonImage,
202
206
  PieChart: () => import_PieChart.PieChart,
203
207
  PixelsDivider: () => import_PixelsDivider.PixelsDivider,
@@ -246,6 +250,7 @@ __export(index_exports, {
246
250
  ShrinkHover: () => import_ShrinkHover.ShrinkHover,
247
251
  ShrinkScroll: () => import_ShrinkScroll.ShrinkScroll,
248
252
  Shuffle: () => import_Shuffle.Shuffle,
253
+ ShuttersAnimation: () => import_ShuttersAnimation.ShuttersAnimation,
249
254
  ShuttersScroll: () => import_ShuttersScroll.ShuttersScroll,
250
255
  Skew3DMouse: () => import_Skew3DMouse.Skew3DMouse,
251
256
  SkewClick: () => import_SkewClick.SkewClick,
@@ -370,8 +375,11 @@ var import_ChooseTheLayoutGrid = require("./ChooseTheLayoutGrid");
370
375
  var import_CircleImage = require("./CircleImage");
371
376
  var import_CircleMarker = require("./CircleMarker");
372
377
  var import_ClockWipe = require("./ClockWipe");
378
+ var import_CloseupSection = require("./CloseupSection");
373
379
  var import_CloudsDivider = require("./CloudsDivider");
374
380
  var import_ColorAnimation = require("./ColorAnimation");
381
+ var import_ColorClick = require("./ColorClick");
382
+ var import_ColorHover = require("./ColorHover");
375
383
  var import_ColorTransition = require("./ColorTransition");
376
384
  var import_CrossLoop = require("./CrossLoop");
377
385
  var import_Cube = require("./Cube");
@@ -482,6 +490,7 @@ var import_PaintScribbleDivider = require("./PaintScribbleDivider");
482
490
  var import_PanSection = require("./PanSection");
483
491
  var import_ParallaxScroll = require("./ParallaxScroll");
484
492
  var import_ParallaxSection = require("./ParallaxSection");
493
+ var import_PeaksDivider = require("./PeaksDivider");
485
494
  var import_PentagonImage = require("./PentagonImage");
486
495
  var import_PieChart = require("./PieChart");
487
496
  var import_PixelsDivider = require("./PixelsDivider");
@@ -530,6 +539,7 @@ var import_ShrinkClick = require("./ShrinkClick");
530
539
  var import_ShrinkHover = require("./ShrinkHover");
531
540
  var import_ShrinkScroll = require("./ShrinkScroll");
532
541
  var import_Shuffle = require("./Shuffle");
542
+ var import_ShuttersAnimation = require("./ShuttersAnimation");
533
543
  var import_ShuttersScroll = require("./ShuttersScroll");
534
544
  var import_Skew3DMouse = require("./Skew3DMouse");
535
545
  var import_SkewClick = require("./SkewClick");
@@ -654,8 +664,11 @@ var import_ZoomSection = require("./ZoomSection");
654
664
  CircleImage,
655
665
  CircleMarker,
656
666
  ClockWipe,
667
+ CloseupSection,
657
668
  CloudsDivider,
658
669
  ColorAnimation,
670
+ ColorClick,
671
+ ColorHover,
659
672
  ColorTransition,
660
673
  CrossLoop,
661
674
  Cube,
@@ -766,6 +779,7 @@ var import_ZoomSection = require("./ZoomSection");
766
779
  PanSection,
767
780
  ParallaxScroll,
768
781
  ParallaxSection,
782
+ PeaksDivider,
769
783
  PentagonImage,
770
784
  PieChart,
771
785
  PixelsDivider,
@@ -814,6 +828,7 @@ var import_ZoomSection = require("./ZoomSection");
814
828
  ShrinkHover,
815
829
  ShrinkScroll,
816
830
  Shuffle,
831
+ ShuttersAnimation,
817
832
  ShuttersScroll,
818
833
  Skew3DMouse,
819
834
  SkewClick,
package/dist/esm/CloseupSection.js ADDED
@@ -0,0 +1,28 @@
1
+ import React from "react";
2
+ const CloseupSection = (props) => /* @__PURE__ */ React.createElement(
3
+ "svg",
4
+ {
5
+ viewBox: "0 0 72 72",
6
+ fill: "none",
7
+ width: 72,
8
+ height: 72,
9
+ xmlns: "http://www.w3.org/2000/svg",
10
+ ...props
11
+ },
12
+ /* @__PURE__ */ React.createElement("g", { opacity: ".25", clipPath: "url(#CloseupSection__a)" }, /* @__PURE__ */ React.createElement("path", { fill: "var(--wds-illustration-color-1, #002291)", d: "M20 29.11a2 2 0 0 1 2-2h8.667v17.777H22a2 2 0 0 1-2-2z" }), /* @__PURE__ */ React.createElement("g", { filter: "url(#CloseupSection__b)" }, /* @__PURE__ */ React.createElement("path", { fill: "url(#CloseupSection__c)", d: "M20 5.664H71v39.618H20z" }))),
13
+ /* @__PURE__ */ React.createElement("g", { opacity: ".5", clipPath: "url(#CloseupSection__d)" }, /* @__PURE__ */ React.createElement("path", { fill: "var(--wds-illustration-color-1, #002291)", d: "M30.667 27.11h10.667v17.777H30.667z" }), /* @__PURE__ */ React.createElement("g", { filter: "url(#CloseupSection__e)" }, /* @__PURE__ */ React.createElement("path", { fill: "url(#CloseupSection__f)", d: "M30.667 7.148h51.001v37.96H30.666z" }))),
14
+ /* @__PURE__ */ React.createElement("g", { clipPath: "url(#CloseupSection__g)" }, /* @__PURE__ */ React.createElement("path", { fill: "var(--wds-illustration-color-1, #002291)", d: "M41.334 27.11H50a2 2 0 0 1 2 2v13.777a2 2 0 0 1-2 2h-8.666z" }), /* @__PURE__ */ React.createElement("g", { filter: "url(#CloseupSection__h)" }, /* @__PURE__ */ React.createElement("path", { fill: "url(#CloseupSection__i)", d: "M41.334 14.594h53.5v30.515h-53.5z" }))),
15
+ /* @__PURE__ */ React.createElement("path", { fill: "url(#CloseupSection__j)", d: "m50.647 24.402 6-6 .707.707-6 6z" }),
16
+ /* @__PURE__ */ React.createElement("path", { fill: "var(--wds-illustration-color-6, #002296)", d: "M57.354 18.402a.5.5 0 0 1 .144.399l-.353 3.889-.996-.09.3-3.292-3.293.3-.09-.996 3.89-.354.11.002a.5.5 0 0 1 .288.142" }),
17
+ /* @__PURE__ */ React.createElement("path", { fill: "url(#CloseupSection__k)", d: "m21.355 24.402-6-6-.708.707 6 6z" }),
18
+ /* @__PURE__ */ React.createElement("path", { fill: "var(--wds-illustration-color-6, #002296)", d: "M14.648 18.402a.5.5 0 0 0-.145.399l.354 3.889.995-.09-.3-3.292 3.293.3.09-.996-3.889-.354-.11.002a.5.5 0 0 0-.288.142" }),
19
+ /* @__PURE__ */ React.createElement("path", { fill: "url(#CloseupSection__l)", d: "m21.354 47.598-6 6-.707-.707 6-6z" }),
20
+ /* @__PURE__ */ React.createElement("path", { fill: "var(--wds-illustration-color-6, #002296)", d: "M14.647 53.598a.5.5 0 0 1-.144-.399l.353-3.889.996.09-.3 3.292 3.293-.3.09.996-3.89.354-.11-.002a.5.5 0 0 1-.288-.142" }),
21
+ /* @__PURE__ */ React.createElement("path", { fill: "url(#CloseupSection__m)", d: "m50.646 47.598 6 6 .707-.707-6-6z" }),
22
+ /* @__PURE__ */ React.createElement("path", { fill: "var(--wds-illustration-color-6, #002296)", d: "M57.353 53.598a.5.5 0 0 0 .145-.399l-.354-3.889-.996.09.3 3.292-3.292-.3-.09.996 3.889.354.11-.002a.5.5 0 0 0 .288-.142" }),
23
+ /* @__PURE__ */ React.createElement("defs", null, /* @__PURE__ */ React.createElement("linearGradient", { id: "CloseupSection__c", x1: "63.768", x2: "32.765", y1: "9.22", y2: "60.15", gradientUnits: "userSpaceOnUse" }, /* @__PURE__ */ React.createElement("stop", { offset: ".176", stopColor: "#EAEFFF" }), /* @__PURE__ */ React.createElement("stop", { offset: ".577", stopColor: "var(--wds-illustration-color-3, #b8c4ff)" }), /* @__PURE__ */ React.createElement("stop", { offset: ".85", stopColor: "#002294" })), /* @__PURE__ */ React.createElement("linearGradient", { id: "CloseupSection__f", x1: "74.435", x2: "45.328", y1: "10.556", y2: "60.459", gradientUnits: "userSpaceOnUse" }, /* @__PURE__ */ React.createElement("stop", { offset: ".176", stopColor: "#EAEFFF" }), /* @__PURE__ */ React.createElement("stop", { offset: ".577", stopColor: "var(--wds-illustration-color-3, #b8c4ff)" }), /* @__PURE__ */ React.createElement("stop", { offset: ".85", stopColor: "#002294" })), /* @__PURE__ */ React.createElement("linearGradient", { id: "CloseupSection__i", x1: "87.246", x2: "67.216", y1: "17.333", y2: "62.144", gradientUnits: "userSpaceOnUse" }, /* @__PURE__ */ React.createElement("stop", { offset: ".176", stopColor: "#EAEFFF" }), /* @__PURE__ */ React.createElement("stop", { offset: ".577", stopColor: "var(--wds-illustration-color-3, #b8c4ff)" }), /* @__PURE__ */ React.createElement("stop", { offset: ".85", stopColor: "#002294" })), /* @__PURE__ */ React.createElement("linearGradient", { id: "CloseupSection__j", x1: "51.001", x2: "57.001", y1: "24.756", y2: "18.756", gradientUnits: "userSpaceOnUse" }, /* @__PURE__ */ React.createElement("stop", { offset: ".04", stopColor: "var(--wds-illustration-color-background, #f8f6f6)" }), /* @__PURE__ */ React.createElement("stop", { offset: ".45", stopColor: "var(--wds-illustration-color-6, #002296)" })), /* @__PURE__ */ React.createElement("linearGradient", { id: "CloseupSection__k", x1: "21.001", x2: "15.001", y1: "24.756", y2: "18.756", gradientUnits: "userSpaceOnUse" }, /* @__PURE__ */ React.createElement("stop", { offset: ".04", stopColor: "var(--wds-illustration-color-background, #f8f6f6)" }), /* @__PURE__ */ React.createElement("stop", { offset: ".45", stopColor: "var(--wds-illustration-color-6, #002296)" })), /* @__PURE__ */ React.createElement("linearGradient", { id: "CloseupSection__l", x1: "21", x2: "15.001", y1: "47.244", y2: "53.244", gradientUnits: "userSpaceOnUse" }, /* @__PURE__ */ React.createElement("stop", { offset: ".04", stopColor: "var(--wds-illustration-color-background, #f8f6f6)" }), /* @__PURE__ */ React.createElement("stop", { offset: ".45", stopColor: "var(--wds-illustration-color-6, #002296)" })), /* @__PURE__ */ React.createElement("linearGradient", { id: "CloseupSection__m", x1: "51", x2: "57", y1: "47.244", y2: "53.244", gradientUnits: "userSpaceOnUse" }, /* @__PURE__ */ React.createElement("stop", { offset: ".04", stopColor: "var(--wds-illustration-color-background, #f8f6f6)" }), /* @__PURE__ */ React.createElement("stop", { offset: ".45", stopColor: "var(--wds-illustration-color-6, #002296)" })), /* @__PURE__ */ React.createElement("clipPath", { id: "CloseupSection__a" }, /* @__PURE__ */ React.createElement("path", { fill: "#fff", d: "M20 29.11a2 2 0 0 1 2-2h8.667v17.777H22a2 2 0 0 1-2-2z" })), /* @__PURE__ */ React.createElement("clipPath", { id: "CloseupSection__d" }, /* @__PURE__ */ React.createElement("path", { fill: "#fff", d: "M30.667 27.11h10.667v17.777H30.667z" })), /* @__PURE__ */ React.createElement("clipPath", { id: "CloseupSection__g" }, /* @__PURE__ */ React.createElement("path", { fill: "#fff", d: "M41.334 27.11H50a2 2 0 0 1 2 2v13.777a2 2 0 0 1-2 2h-8.666z" })), /* @__PURE__ */ React.createElement("filter", { id: "CloseupSection__b", width: "62.089", height: "50.705", x: "14.456", y: ".12", filterUnits: "userSpaceOnUse", colorInterpolationFilters: "sRGB" }, /* @__PURE__ */ React.createElement("feFlood", { result: "BackgroundImageFix", floodOpacity: "0" }), /* @__PURE__ */ React.createElement("feBlend", { in: "SourceGraphic", in2: "BackgroundImageFix", result: "shape" }), /* @__PURE__ */ React.createElement("feGaussianBlur", { result: "effect1_foregroundBlur_676_20973", stdDeviation: "2.772" })), /* @__PURE__ */ React.createElement("filter", { id: "CloseupSection__e", width: "62.089", height: "49.048", x: "25.123", y: "1.605", filterUnits: "userSpaceOnUse", colorInterpolationFilters: "sRGB" }, /* @__PURE__ */ React.createElement("feFlood", { result: "BackgroundImageFix", floodOpacity: "0" }), /* @__PURE__ */ React.createElement("feBlend", { in: "SourceGraphic", in2: "BackgroundImageFix", result: "shape" }), /* @__PURE__ */ React.createElement("feGaussianBlur", { result: "effect1_foregroundBlur_676_20973", stdDeviation: "2.772" })), /* @__PURE__ */ React.createElement("filter", { id: "CloseupSection__h", width: "64.587", height: "41.603", x: "35.79", y: "9.05", filterUnits: "userSpaceOnUse", colorInterpolationFilters: "sRGB" }, /* @__PURE__ */ React.createElement("feFlood", { result: "BackgroundImageFix", floodOpacity: "0" }), /* @__PURE__ */ React.createElement("feBlend", { in: "SourceGraphic", in2: "BackgroundImageFix", result: "shape" }), /* @__PURE__ */ React.createElement("feGaussianBlur", { result: "effect1_foregroundBlur_676_20973", stdDeviation: "2.772" })))
24
+ );
25
+ CloseupSection.displayName = "CloseupSection";
26
+ export {
27
+ CloseupSection
28
+ };
package/dist/esm/ColorClick.js ADDED
@@ -0,0 +1,18 @@
1
+ import React from "react";
2
+ const ColorClick = (props) => /* @__PURE__ */ React.createElement(
3
+ "svg",
4
+ {
5
+ viewBox: "0 0 72 72",
6
+ fill: "none",
7
+ width: 72,
8
+ height: 72,
9
+ xmlns: "http://www.w3.org/2000/svg",
10
+ ...props
11
+ },
12
+ /* @__PURE__ */ React.createElement("g", { clipPath: "url(#ColorClick__a)" }, /* @__PURE__ */ React.createElement("mask", { id: "ColorClick__b", width: "49", height: "50", x: "25", y: "15", maskUnits: "userSpaceOnUse", style: { "maskType": "alpha" } }, /* @__PURE__ */ React.createElement("path", { fill: "#D9D9D9", d: "m54.882 15.734 18.339 17.223-29.59 31.507-18.339-17.223z" })), /* @__PURE__ */ React.createElement("g", { mask: "url(#ColorClick__b)", clipPath: "url(#ColorClick__c)" }, /* @__PURE__ */ React.createElement("rect", { width: "33", height: "16", x: "19.521", y: "28.086", fill: "var(--wds-illustration-color-1, #002291)", rx: "8" }), /* @__PURE__ */ React.createElement("g", { filter: "url(#ColorClick__d)" }, /* @__PURE__ */ React.createElement("path", { fill: "url(#ColorClick__e)", d: "M105.519 47.746v-59.363H26.414v59.363z" }))), /* @__PURE__ */ React.createElement("g", { opacity: ".5" }, /* @__PURE__ */ React.createElement("mask", { id: "ColorClick__f", width: "49", height: "50", x: "3", y: "2", maskUnits: "userSpaceOnUse", style: { "maskType": "alpha" } }, /* @__PURE__ */ React.createElement("path", { fill: "#D9D9D9", d: "m32.854 2.445 18.339 17.223-29.59 31.507-18.34-17.223z" })), /* @__PURE__ */ React.createElement("g", { mask: "url(#ColorClick__f)", clipPath: "url(#ColorClick__g)" }, /* @__PURE__ */ React.createElement("rect", { width: "33", height: "16", x: "19.521", y: "28.086", fill: "var(--wds-illustration-color-1, #002291)", rx: "8" }), /* @__PURE__ */ React.createElement("g", { filter: "url(#ColorClick__h)" }, /* @__PURE__ */ React.createElement("path", { fill: "url(#ColorClick__i)", d: "M60.24 44.547V18.969H18.73v25.578z" }))))),
13
+ /* @__PURE__ */ React.createElement("defs", null, /* @__PURE__ */ React.createElement("clipPath", { id: "ColorClick__a" }, /* @__PURE__ */ React.createElement("path", { fill: "#fff", d: "M0 6a6 6 0 0 1 6-6h60a6 6 0 0 1 6 6v60a6 6 0 0 1-6 6H6a6 6 0 0 1-6-6z" })), /* @__PURE__ */ React.createElement("clipPath", { id: "ColorClick__c" }, /* @__PURE__ */ React.createElement("rect", { width: "33", height: "16", x: "19.521", y: "28.086", fill: "#fff", rx: "8" })), /* @__PURE__ */ React.createElement("clipPath", { id: "ColorClick__g" }, /* @__PURE__ */ React.createElement("rect", { width: "33", height: "16", x: "19.521", y: "28.086", fill: "#fff", rx: "8" })), /* @__PURE__ */ React.createElement("linearGradient", { id: "ColorClick__e", x1: "98.418", x2: "31.748", y1: "-3.198", y2: "66.424", gradientUnits: "userSpaceOnUse" }, /* @__PURE__ */ React.createElement("stop", { offset: ".176", stopColor: "var(--wds-illustration-color-5, #eaeff1)" }), /* @__PURE__ */ React.createElement("stop", { offset: ".577", stopColor: "var(--wds-illustration-color-3, #b8c4ff)" }), /* @__PURE__ */ React.createElement("stop", { offset: ".85", stopColor: "var(--wds-illustration-color-1, #002291)" })), /* @__PURE__ */ React.createElement("linearGradient", { id: "ColorClick__i", x1: "56.515", x2: "28.573", y1: "22.596", y2: "58.133", gradientUnits: "userSpaceOnUse" }, /* @__PURE__ */ React.createElement("stop", { offset: ".176", stopColor: "var(--wds-illustration-color-5, #eaeff1)" }), /* @__PURE__ */ React.createElement("stop", { offset: ".577", stopColor: "var(--wds-illustration-color-3, #b8c4ff)" }), /* @__PURE__ */ React.createElement("stop", { offset: ".85", stopColor: "var(--wds-illustration-color-1, #002291)" })), /* @__PURE__ */ React.createElement("filter", { id: "ColorClick__d", width: "89.486", height: "69.744", x: "21.223", y: "-16.808", filterUnits: "userSpaceOnUse", colorInterpolationFilters: "sRGB" }, /* @__PURE__ */ React.createElement("feFlood", { result: "BackgroundImageFix", floodOpacity: "0" }), /* @__PURE__ */ React.createElement("feBlend", { in: "SourceGraphic", in2: "BackgroundImageFix", result: "shape" }), /* @__PURE__ */ React.createElement("feGaussianBlur", { result: "effect1_foregroundBlur_943_3872", stdDeviation: "2.595" })), /* @__PURE__ */ React.createElement("filter", { id: "ColorClick__h", width: "51.892", height: "35.959", x: "13.539", y: "13.778", filterUnits: "userSpaceOnUse", colorInterpolationFilters: "sRGB" }, /* @__PURE__ */ React.createElement("feFlood", { result: "BackgroundImageFix", floodOpacity: "0" }), /* @__PURE__ */ React.createElement("feBlend", { in: "SourceGraphic", in2: "BackgroundImageFix", result: "shape" }), /* @__PURE__ */ React.createElement("feGaussianBlur", { result: "effect1_foregroundBlur_943_3872", stdDeviation: "2.595" })))
14
+ );
15
+ ColorClick.displayName = "ColorClick";
16
+ export {
17
+ ColorClick
18
+ };
package/dist/esm/ColorHover.js ADDED
@@ -0,0 +1,20 @@
1
+ import React from "react";
2
+ const ColorHover = (props) => /* @__PURE__ */ React.createElement(
3
+ "svg",
4
+ {
5
+ viewBox: "0 0 72 72",
6
+ fill: "none",
7
+ width: 72,
8
+ height: 72,
9
+ xmlns: "http://www.w3.org/2000/svg",
10
+ ...props
11
+ },
12
+ /* @__PURE__ */ React.createElement("mask", { id: "ColorHover__a", width: "39", height: "38", x: "24", y: "24", maskUnits: "userSpaceOnUse", style: { "maskType": "alpha" } }, /* @__PURE__ */ React.createElement("path", { fill: "#D9D9D9", d: "m48.045 24.289 14.507 14.507L39.367 61.98 24.86 47.474z" })),
13
+ /* @__PURE__ */ React.createElement("g", { mask: "url(#ColorHover__a)", clipPath: "url(#ColorHover__b)" }, /* @__PURE__ */ React.createElement("path", { fill: "var(--wds-illustration-color-1, #002291)", d: "M25 27a2 2 0 0 1 2-2h18a2 2 0 0 1 2 2v18a2 2 0 0 1-2 2H27a2 2 0 0 1-2-2z" }), /* @__PURE__ */ React.createElement("g", { filter: "url(#ColorHover__c)" }, /* @__PURE__ */ React.createElement("path", { fill: "url(#ColorHover__d)", d: "M110.998 50.66V18.047H24.93V50.66z" }))),
14
+ /* @__PURE__ */ React.createElement("g", { opacity: ".5" }, /* @__PURE__ */ React.createElement("mask", { id: "ColorHover__e", width: "38", height: "39", x: "10", y: "9", maskUnits: "userSpaceOnUse", style: { "maskType": "alpha" } }, /* @__PURE__ */ React.createElement("path", { fill: "#D9D9D9", d: "M33.388 9.934 47.895 24.44 24.709 47.626 10.202 33.12z" })), /* @__PURE__ */ React.createElement("g", { mask: "url(#ColorHover__e)", clipPath: "url(#ColorHover__f)" }, /* @__PURE__ */ React.createElement("path", { fill: "var(--wds-illustration-color-1, #002291)", d: "M25 27a2 2 0 0 1 2-2h18a2 2 0 0 1 2 2v18a2 2 0 0 1-2 2H27a2 2 0 0 1-2-2z" }), /* @__PURE__ */ React.createElement("g", { filter: "url(#ColorHover__g)" }, /* @__PURE__ */ React.createElement("path", { fill: "url(#ColorHover__h)", d: "M110.998 50.66V18.047H24.93V50.66z" })))),
15
+ /* @__PURE__ */ React.createElement("defs", null, /* @__PURE__ */ React.createElement("linearGradient", { id: "ColorHover__d", x1: "103.272", x2: "74.537", y1: "22.672", y2: "82.101", gradientUnits: "userSpaceOnUse" }, /* @__PURE__ */ React.createElement("stop", { offset: ".176", stopColor: "var(--wds-illustration-color-5, #eaeff1)" }), /* @__PURE__ */ React.createElement("stop", { offset: ".577", stopColor: "var(--wds-illustration-color-3, #b8c4ff)" }), /* @__PURE__ */ React.createElement("stop", { offset: ".85", stopColor: "var(--wds-illustration-color-1, #002291)" })), /* @__PURE__ */ React.createElement("linearGradient", { id: "ColorHover__h", x1: "103.272", x2: "74.537", y1: "22.672", y2: "82.101", gradientUnits: "userSpaceOnUse" }, /* @__PURE__ */ React.createElement("stop", { offset: ".176", stopColor: "var(--wds-illustration-color-5, #eaeff1)" }), /* @__PURE__ */ React.createElement("stop", { offset: ".577", stopColor: "var(--wds-illustration-color-3, #b8c4ff)" }), /* @__PURE__ */ React.createElement("stop", { offset: ".85", stopColor: "var(--wds-illustration-color-1, #002291)" })), /* @__PURE__ */ React.createElement("clipPath", { id: "ColorHover__b" }, /* @__PURE__ */ React.createElement("path", { fill: "#fff", d: "M25 27a2 2 0 0 1 2-2h18a2 2 0 0 1 2 2v18a2 2 0 0 1-2 2H27a2 2 0 0 1-2-2z" })), /* @__PURE__ */ React.createElement("clipPath", { id: "ColorHover__f" }, /* @__PURE__ */ React.createElement("path", { fill: "#fff", d: "M25 27a2 2 0 0 1 2-2h18a2 2 0 0 1 2 2v18a2 2 0 0 1-2 2H27a2 2 0 0 1-2-2z" })), /* @__PURE__ */ React.createElement("filter", { id: "ColorHover__c", width: "96.448", height: "42.994", x: "19.74", y: "12.856", filterUnits: "userSpaceOnUse", colorInterpolationFilters: "sRGB" }, /* @__PURE__ */ React.createElement("feFlood", { result: "BackgroundImageFix", floodOpacity: "0" }), /* @__PURE__ */ React.createElement("feBlend", { in: "SourceGraphic", in2: "BackgroundImageFix", result: "shape" }), /* @__PURE__ */ React.createElement("feGaussianBlur", { result: "effect1_foregroundBlur_943_3627", stdDeviation: "2.595" })), /* @__PURE__ */ React.createElement("filter", { id: "ColorHover__g", width: "96.448", height: "42.994", x: "19.74", y: "12.856", filterUnits: "userSpaceOnUse", colorInterpolationFilters: "sRGB" }, /* @__PURE__ */ React.createElement("feFlood", { result: "BackgroundImageFix", floodOpacity: "0" }), /* @__PURE__ */ React.createElement("feBlend", { in: "SourceGraphic", in2: "BackgroundImageFix", result: "shape" }), /* @__PURE__ */ React.createElement("feGaussianBlur", { result: "effect1_foregroundBlur_943_3627", stdDeviation: "2.595" })))
16
+ );
17
+ ColorHover.displayName = "ColorHover";
18
+ export {
19
+ ColorHover
20
+ };
package/dist/esm/LayeredElipseDivider.js CHANGED
@@ -9,9 +9,10 @@ const LayeredElipseDivider = (props) => /* @__PURE__ */ React.createElement(
9
9
  xmlns: "http://www.w3.org/2000/svg",
10
10
  ...props
11
11
  },
12
- /* @__PURE__ */ React.createElement("mask", { id: "LayeredElipseDivider__a", width: "97", height: "51", x: "0", y: "-23", maskUnits: "userSpaceOnUse", style: { "maskType": "luminance" } }, /* @__PURE__ */ React.createElement("path", { fill: "#fff", d: "M88.604-22.85H8.014A8.013 8.013 0 0 0 0-14.838v34.824a8.013 8.013 0 0 0 8.013 8.014h80.59a8.013 8.013 0 0 0 8.014-8.014v-34.824a8.013 8.013 0 0 0-8.013-8.014" })),
13
- /* @__PURE__ */ React.createElement("g", { mask: "url(#LayeredElipseDivider__a)" }, /* @__PURE__ */ React.createElement("g", { opacity: ".25" }, /* @__PURE__ */ React.createElement("mask", { id: "LayeredElipseDivider__b", width: "116", height: "29", x: "-10", y: "0", maskUnits: "userSpaceOnUse", style: { "maskType": "alpha" } }, /* @__PURE__ */ React.createElement("path", { fill: "var(--wds-illustration-color-1, #002291)", d: "M-9.334 28.071C6.217 10.095 26.701 0 48.31 0s42.09 10.094 57.642 28.071z" })), /* @__PURE__ */ React.createElement("g", { mask: "url(#LayeredElipseDivider__b)" }, /* @__PURE__ */ React.createElement("path", { fill: "var(--wds-illustration-color-1, #002291)", d: "M-18.271-18.453h133.888v48.886H-18.271z" }), /* @__PURE__ */ React.createElement("g", { filter: "url(#LayeredElipseDivider__c)" }, /* @__PURE__ */ React.createElement("path", { fill: "var(--wds-illustration-color-3, #b8c4ff)", d: "M-65.476 20.942c30.646-35.425 71.012-55.32 113.594-55.32s82.946 19.892 113.592 55.32z" })))), /* @__PURE__ */ React.createElement("g", { opacity: ".5" }, /* @__PURE__ */ React.createElement("mask", { id: "LayeredElipseDivider__d", width: "103", height: "24", x: "-3", y: "5", maskUnits: "userSpaceOnUse", style: { "maskType": "alpha" } }, /* @__PURE__ */ React.createElement("path", { fill: "var(--wds-illustration-color-1, #002291)", d: "M-2.968 28.224C10.866 13.513 29.088 5.25 48.31 5.25s37.443 8.26 51.277 22.973z" })), /* @__PURE__ */ React.createElement("g", { mask: "url(#LayeredElipseDivider__d)" }, /* @__PURE__ */ React.createElement("path", { fill: "var(--wds-illustration-color-1, #002291)", d: "M-10.918-9.852h119.105v40.006H-10.918z" }), /* @__PURE__ */ React.createElement("g", { filter: "url(#LayeredElipseDivider__e)" }, /* @__PURE__ */ React.createElement("path", { fill: "var(--wds-illustration-color-3, #b8c4ff)", d: "M-52.911 22.39C-25.65-6.602 10.26-22.883 48.14-22.883c37.88 0 73.787 16.279 101.049 45.271z" })))), /* @__PURE__ */ React.createElement("mask", { id: "LayeredElipseDivider__f", width: "89", height: "19", x: "4", y: "10", maskUnits: "userSpaceOnUse", style: { "maskType": "alpha" } }, /* @__PURE__ */ React.createElement("path", { fill: "var(--wds-illustration-color-1, #002291)", d: "M4.607 28.079c11.79-11.05 27.32-17.256 43.703-17.256 16.382 0 31.91 6.205 43.701 17.256z" })), /* @__PURE__ */ React.createElement("g", { mask: "url(#LayeredElipseDivider__f)" }, /* @__PURE__ */ React.createElement("path", { fill: "var(--wds-illustration-color-1, #002291)", d: "M-2.167-.516H99.342v30.051H-2.167z" }), /* @__PURE__ */ React.createElement("g", { filter: "url(#LayeredElipseDivider__g)" }, /* @__PURE__ */ React.createElement("path", { fill: "url(#LayeredElipseDivider__h)", d: "M-37.959 23.692c23.235-21.777 53.84-34.006 86.123-34.006s62.887 12.228 86.122 34.006z" })))),
14
- /* @__PURE__ */ React.createElement("defs", null, /* @__PURE__ */ React.createElement("filter", { id: "LayeredElipseDivider__c", width: "257.237", height: "85.37", x: "-80.502", y: "-49.403", filterUnits: "userSpaceOnUse", colorInterpolationFilters: "sRGB" }, /* @__PURE__ */ React.createElement("feFlood", { result: "BackgroundImageFix", floodOpacity: "0" }), /* @__PURE__ */ React.createElement("feBlend", { in: "SourceGraphic", in2: "BackgroundImageFix", result: "shape" }), /* @__PURE__ */ React.createElement("feGaussianBlur", { result: "effect1_foregroundBlur_676_22673", stdDeviation: "7.5" })), /* @__PURE__ */ React.createElement("filter", { id: "LayeredElipseDivider__e", width: "232.152", height: "75.321", x: "-67.936", y: "-37.907", filterUnits: "userSpaceOnUse", colorInterpolationFilters: "sRGB" }, /* @__PURE__ */ React.createElement("feFlood", { result: "BackgroundImageFix", floodOpacity: "0" }), /* @__PURE__ */ React.createElement("feBlend", { in: "SourceGraphic", in2: "BackgroundImageFix", result: "shape" }), /* @__PURE__ */ React.createElement("feGaussianBlur", { result: "effect1_foregroundBlur_676_22673", stdDeviation: "7.5" })), /* @__PURE__ */ React.createElement("filter", { id: "LayeredElipseDivider__g", width: "202.295", height: "64.052", x: "-52.984", y: "-25.339", filterUnits: "userSpaceOnUse", colorInterpolationFilters: "sRGB" }, /* @__PURE__ */ React.createElement("feFlood", { result: "BackgroundImageFix", floodOpacity: "0" }), /* @__PURE__ */ React.createElement("feBlend", { in: "SourceGraphic", in2: "BackgroundImageFix", result: "shape" }), /* @__PURE__ */ React.createElement("feGaussianBlur", { result: "effect1_foregroundBlur_676_22673", stdDeviation: "7.5" })), /* @__PURE__ */ React.createElement("linearGradient", { id: "LayeredElipseDivider__h", x1: "109.857", x2: "100.804", y1: "-7.262", y2: "51.252", gradientUnits: "userSpaceOnUse" }, /* @__PURE__ */ React.createElement("stop", { offset: ".176", stopColor: "var(--wds-illustration-color-5, #eaeff1)" }), /* @__PURE__ */ React.createElement("stop", { offset: ".577", stopColor: "var(--wds-illustration-color-3, #b8c4ff)" }), /* @__PURE__ */ React.createElement("stop", { offset: ".85", stopColor: "var(--wds-illustration-color-1, #002291)" })))
12
+ /* @__PURE__ */ React.createElement("g", { mask: "url(#LayeredElipseDivider__a)" }, /* @__PURE__ */ React.createElement("path", { fill: "var(--wds-illustration-color-opacity-100, #f8f6f100)", d: "M-9.732 28.615C5.927 10.291 26.552 0 48.309 0c21.758 0 42.382 10.29 58.041 28.615z", opacity: ".25" })),
13
+ /* @__PURE__ */ React.createElement("mask", { id: "LayeredElipseDivider__b", width: "97", height: "51", x: "0", y: "-23", maskUnits: "userSpaceOnUse", style: { "maskType": "luminance" } }, /* @__PURE__ */ React.createElement("path", { fill: "#fff", d: "M88.604-22.85H8.014A8.013 8.013 0 0 0 0-14.838v34.824a8.013 8.013 0 0 0 8.013 8.014h80.59a8.013 8.013 0 0 0 8.014-8.014v-34.824a8.013 8.013 0 0 0-8.013-8.014" })),
14
+ /* @__PURE__ */ React.createElement("g", { mask: "url(#LayeredElipseDivider__b)" }, /* @__PURE__ */ React.createElement("g", { opacity: ".25" }, /* @__PURE__ */ React.createElement("mask", { id: "LayeredElipseDivider__c", width: "116", height: "29", x: "-10", y: "0", maskUnits: "userSpaceOnUse", style: { "maskType": "alpha" } }, /* @__PURE__ */ React.createElement("path", { fill: "var(--wds-illustration-color-1, #002291)", d: "M-9.334 28.071C6.217 10.095 26.701 0 48.31 0s42.09 10.094 57.642 28.071z" })), /* @__PURE__ */ React.createElement("g", { mask: "url(#LayeredElipseDivider__c)" }, /* @__PURE__ */ React.createElement("path", { fill: "var(--wds-illustration-color-1, #002291)", d: "M-18.271-18.453h133.888v48.886H-18.271z" }), /* @__PURE__ */ React.createElement("g", { filter: "url(#LayeredElipseDivider__d)" }, /* @__PURE__ */ React.createElement("path", { fill: "var(--wds-illustration-color-3, #b8c4ff)", d: "M-65.476 20.942c30.646-35.425 71.012-55.32 113.594-55.32s82.946 19.892 113.592 55.32z" })))), /* @__PURE__ */ React.createElement("g", { opacity: ".5" }, /* @__PURE__ */ React.createElement("mask", { id: "LayeredElipseDivider__e", width: "103", height: "24", x: "-3", y: "5", maskUnits: "userSpaceOnUse", style: { "maskType": "alpha" } }, /* @__PURE__ */ React.createElement("path", { fill: "var(--wds-illustration-color-1, #002291)", d: "M-2.968 28.224C10.866 13.513 29.088 5.25 48.31 5.25s37.443 8.26 51.277 22.973z" })), /* @__PURE__ */ React.createElement("g", { mask: "url(#LayeredElipseDivider__e)" }, /* @__PURE__ */ React.createElement("path", { fill: "var(--wds-illustration-color-1, #002291)", d: "M-10.918-9.852h119.105v40.006H-10.918z" }), /* @__PURE__ */ React.createElement("g", { filter: "url(#LayeredElipseDivider__f)" }, /* @__PURE__ */ React.createElement("path", { fill: "var(--wds-illustration-color-3, #b8c4ff)", d: "M-52.911 22.39C-25.65-6.602 10.26-22.883 48.14-22.883c37.88 0 73.787 16.279 101.049 45.271z" })))), /* @__PURE__ */ React.createElement("mask", { id: "LayeredElipseDivider__g", width: "89", height: "19", x: "4", y: "10", maskUnits: "userSpaceOnUse", style: { "maskType": "alpha" } }, /* @__PURE__ */ React.createElement("path", { fill: "var(--wds-illustration-color-1, #002291)", d: "M4.607 28.079c11.79-11.05 27.32-17.256 43.703-17.256 16.382 0 31.91 6.205 43.701 17.256z" })), /* @__PURE__ */ React.createElement("g", { mask: "url(#LayeredElipseDivider__g)" }, /* @__PURE__ */ React.createElement("path", { fill: "var(--wds-illustration-color-1, #002291)", d: "M-2.167-.516H99.342v30.051H-2.167z" }), /* @__PURE__ */ React.createElement("g", { filter: "url(#LayeredElipseDivider__h)" }, /* @__PURE__ */ React.createElement("path", { fill: "url(#LayeredElipseDivider__i)", d: "M-37.959 23.692c23.235-21.777 53.84-34.006 86.123-34.006s62.887 12.228 86.122 34.006z" })))),
15
+ /* @__PURE__ */ React.createElement("defs", null, /* @__PURE__ */ React.createElement("filter", { id: "LayeredElipseDivider__d", width: "257.237", height: "85.37", x: "-80.502", y: "-49.403", filterUnits: "userSpaceOnUse", colorInterpolationFilters: "sRGB" }, /* @__PURE__ */ React.createElement("feFlood", { result: "BackgroundImageFix", floodOpacity: "0" }), /* @__PURE__ */ React.createElement("feBlend", { in: "SourceGraphic", in2: "BackgroundImageFix", result: "shape" }), /* @__PURE__ */ React.createElement("feGaussianBlur", { result: "effect1_foregroundBlur_676_22673", stdDeviation: "7.5" })), /* @__PURE__ */ React.createElement("filter", { id: "LayeredElipseDivider__f", width: "232.152", height: "75.321", x: "-67.936", y: "-37.907", filterUnits: "userSpaceOnUse", colorInterpolationFilters: "sRGB" }, /* @__PURE__ */ React.createElement("feFlood", { result: "BackgroundImageFix", floodOpacity: "0" }), /* @__PURE__ */ React.createElement("feBlend", { in: "SourceGraphic", in2: "BackgroundImageFix", result: "shape" }), /* @__PURE__ */ React.createElement("feGaussianBlur", { result: "effect1_foregroundBlur_676_22673", stdDeviation: "7.5" })), /* @__PURE__ */ React.createElement("filter", { id: "LayeredElipseDivider__h", width: "202.295", height: "64.052", x: "-52.984", y: "-25.339", filterUnits: "userSpaceOnUse", colorInterpolationFilters: "sRGB" }, /* @__PURE__ */ React.createElement("feFlood", { result: "BackgroundImageFix", floodOpacity: "0" }), /* @__PURE__ */ React.createElement("feBlend", { in: "SourceGraphic", in2: "BackgroundImageFix", result: "shape" }), /* @__PURE__ */ React.createElement("feGaussianBlur", { result: "effect1_foregroundBlur_676_22673", stdDeviation: "7.5" })), /* @__PURE__ */ React.createElement("linearGradient", { id: "LayeredElipseDivider__i", x1: "109.857", x2: "100.804", y1: "-7.262", y2: "51.252", gradientUnits: "userSpaceOnUse" }, /* @__PURE__ */ React.createElement("stop", { offset: ".176", stopColor: "var(--wds-illustration-color-5, #eaeff1)" }), /* @__PURE__ */ React.createElement("stop", { offset: ".577", stopColor: "var(--wds-illustration-color-3, #b8c4ff)" }), /* @__PURE__ */ React.createElement("stop", { offset: ".85", stopColor: "var(--wds-illustration-color-1, #002291)" })), /* @__PURE__ */ React.createElement("mask", { id: "LayeredElipseDivider__a", width: "97", height: "51", x: "0", y: "-23", maskUnits: "userSpaceOnUse", style: { "maskType": "luminance" } }, /* @__PURE__ */ React.createElement("path", { fill: "#fff", d: "M88.604-22.85H8.014A8.013 8.013 0 0 0 0-14.838v34.824a8.013 8.013 0 0 0 8.013 8.014h80.59a8.013 8.013 0 0 0 8.014-8.014v-34.824a8.013 8.013 0 0 0-8.013-8.014" })))
15
16
  );
16
17
  LayeredElipseDivider.displayName = "LayeredElipseDivider";
17
18
  export {
package/dist/esm/PeaksDivider.js ADDED
@@ -0,0 +1,18 @@
1
+ import React from "react";
2
+ const PeaksDivider = (props) => /* @__PURE__ */ React.createElement(
3
+ "svg",
4
+ {
5
+ viewBox: "0 0 97 51",
6
+ fill: "none",
7
+ width: 97,
8
+ height: 51,
9
+ xmlns: "http://www.w3.org/2000/svg",
10
+ ...props
11
+ },
12
+ /* @__PURE__ */ React.createElement("g", { clipPath: "url(#PeaksDivider__a)" }, /* @__PURE__ */ React.createElement("mask", { id: "PeaksDivider__b", width: "97", height: "21", x: "0", y: "30", maskUnits: "userSpaceOnUse", style: { "maskType": "alpha" } }, /* @__PURE__ */ React.createElement("path", { fill: "var(--wds-illustration-color-1, #002291)", d: "m84.688 30.476-12.08 9.423-12.078-9.423-12.08 9.423-12.078-9.423-12.08 9.423-12.078-9.423L0 39.982v11.02h96.901v-11.02z" })), /* @__PURE__ */ React.createElement("g", { mask: "url(#PeaksDivider__b)" }, /* @__PURE__ */ React.createElement("path", { fill: "var(--wds-illustration-color-1, #002291)", d: "M-7.162-20.485h119.484v84.43H-7.162z" }), /* @__PURE__ */ React.createElement("g", { filter: "url(#PeaksDivider__c)" }, /* @__PURE__ */ React.createElement("path", { fill: "url(#PeaksDivider__d)", d: "M110.542 12.346 89.845 28.492 69.149 12.346 48.452 28.492 27.756 12.346 7.058 28.492l-20.696-16.146-20.927 16.287v18.883h166.033V28.633z" })))),
13
+ /* @__PURE__ */ React.createElement("defs", null, /* @__PURE__ */ React.createElement("linearGradient", { id: "PeaksDivider__d", x1: "107.92", x2: "97.91", y1: "15.503", y2: "75.807", gradientUnits: "userSpaceOnUse" }, /* @__PURE__ */ React.createElement("stop", { offset: ".176", stopColor: "var(--wds-illustration-color-5, #eaeff1)" }), /* @__PURE__ */ React.createElement("stop", { offset: ".577", stopColor: "var(--wds-illustration-color-3, #b8c4ff)" }), /* @__PURE__ */ React.createElement("stop", { offset: ".85", stopColor: "var(--wds-illustration-color-1, #002291)" })), /* @__PURE__ */ React.createElement("clipPath", { id: "PeaksDivider__a" }, /* @__PURE__ */ React.createElement("rect", { width: "96.901", height: "51.001", fill: "#fff", rx: "8" })), /* @__PURE__ */ React.createElement("filter", { id: "PeaksDivider__c", width: "196.172", height: "65.308", x: "-49.634", y: "-2.723", filterUnits: "userSpaceOnUse", colorInterpolationFilters: "sRGB" }, /* @__PURE__ */ React.createElement("feFlood", { result: "BackgroundImageFix", floodOpacity: "0" }), /* @__PURE__ */ React.createElement("feBlend", { in: "SourceGraphic", in2: "BackgroundImageFix", result: "shape" }), /* @__PURE__ */ React.createElement("feGaussianBlur", { result: "effect1_foregroundBlur_676_22699", stdDeviation: "7.5" })))
14
+ );
15
+ PeaksDivider.displayName = "PeaksDivider";
16
+ export {
17
+ PeaksDivider
18
+ };
package/dist/esm/ShuttersAnimation.js ADDED
@@ -0,0 +1,18 @@
1
+ import React from "react";
2
+ const ShuttersAnimation = (props) => /* @__PURE__ */ React.createElement(
3
+ "svg",
4
+ {
5
+ viewBox: "0 0 66 66",
6
+ fill: "none",
7
+ width: 66,
8
+ height: 66,
9
+ xmlns: "http://www.w3.org/2000/svg",
10
+ ...props
11
+ },
12
+ /* @__PURE__ */ React.createElement("g", { clipPath: "url(#ShuttersAnimation__a)" }, /* @__PURE__ */ React.createElement("mask", { id: "ShuttersAnimation__b", width: "32", height: "31", x: "17", y: "16", maskUnits: "userSpaceOnUse", style: { "maskType": "alpha" } }, /* @__PURE__ */ React.createElement("path", { fill: "#D9D9D9", d: "M22.74 46.797h-5.525V16.963h5.525zm8.207 0h-4.103V16.963h4.103zm8.21 0h-4.104V16.963h4.104zm9.628 0h-5.524V16.963h5.524z" })), /* @__PURE__ */ React.createElement("g", { mask: "url(#ShuttersAnimation__b)", clipPath: "url(#ShuttersAnimation__c)" }, /* @__PURE__ */ React.createElement("rect", { width: "22.099", height: "22.099", fill: "var(--wds-illustration-color-1, #002291)", rx: "2", transform: "rotate(-45 47.835 -4.756)" }), /* @__PURE__ */ React.createElement("g", { filter: "url(#ShuttersAnimation__d)" }, /* @__PURE__ */ React.createElement("path", { fill: "url(#ShuttersAnimation__e)", d: "M.403 15.46 32.93-17.065l32.527 32.527L32.93 47.988z" }))), /* @__PURE__ */ React.createElement("mask", { id: "ShuttersAnimation__f", width: "22", height: "36", x: "22", y: "15", maskUnits: "userSpaceOnUse", style: { "maskType": "alpha" } }, /* @__PURE__ */ React.createElement("path", { fill: "#D9D9D9", d: "M26.845 50.127h-4.104v-30.94h4.104zm8.365 0h-4.42V15.873h4.42zm8.052 0h-4.104v-30.94h4.104z", opacity: ".5" })), /* @__PURE__ */ React.createElement("g", { mask: "url(#ShuttersAnimation__f)", clipPath: "url(#ShuttersAnimation__g)" }, /* @__PURE__ */ React.createElement("rect", { width: "22.099", height: "22.099", fill: "var(--wds-illustration-color-1, #002291)", rx: "2", transform: "rotate(-45 47.85 -4.75)" }), /* @__PURE__ */ React.createElement("g", { filter: "url(#ShuttersAnimation__h)" }, /* @__PURE__ */ React.createElement("path", { fill: "url(#ShuttersAnimation__i)", d: "M.403 15.473 32.93-17.054l32.527 32.527L32.93 47.999z" })))),
13
+ /* @__PURE__ */ React.createElement("defs", null, /* @__PURE__ */ React.createElement("clipPath", { id: "ShuttersAnimation__a" }, /* @__PURE__ */ React.createElement("path", { fill: "#fff", d: "M0 0h66v66H0z" })), /* @__PURE__ */ React.createElement("clipPath", { id: "ShuttersAnimation__c" }, /* @__PURE__ */ React.createElement("rect", { width: "22.099", height: "22.099", fill: "#fff", rx: "2", transform: "rotate(-45 47.835 -4.756)" })), /* @__PURE__ */ React.createElement("clipPath", { id: "ShuttersAnimation__g" }, /* @__PURE__ */ React.createElement("rect", { width: "22.099", height: "22.099", fill: "#fff", rx: "2", transform: "rotate(-45 47.85 -4.75)" })), /* @__PURE__ */ React.createElement("linearGradient", { id: "ShuttersAnimation__e", x1: "31.236", x2: "38.917", y1: "-9.533", y2: "53.795", gradientUnits: "userSpaceOnUse" }, /* @__PURE__ */ React.createElement("stop", { offset: ".176", stopColor: "var(--wds-illustration-color-5, #eaeff1)" }), /* @__PURE__ */ React.createElement("stop", { offset: ".577", stopColor: "var(--wds-illustration-color-3, #b8c4ff)" }), /* @__PURE__ */ React.createElement("stop", { offset: ".85", stopColor: "var(--wds-illustration-color-1, #002291)" })), /* @__PURE__ */ React.createElement("linearGradient", { id: "ShuttersAnimation__i", x1: "31.236", x2: "38.917", y1: "-9.521", y2: "53.807", gradientUnits: "userSpaceOnUse" }, /* @__PURE__ */ React.createElement("stop", { offset: ".176", stopColor: "var(--wds-illustration-color-5, #eaeff1)" }), /* @__PURE__ */ React.createElement("stop", { offset: ".577", stopColor: "var(--wds-illustration-color-3, #b8c4ff)" }), /* @__PURE__ */ React.createElement("stop", { offset: ".85", stopColor: "var(--wds-illustration-color-1, #002291)" })), /* @__PURE__ */ React.createElement("filter", { id: "ShuttersAnimation__d", width: "75.054", height: "75.055", x: "-4.597", y: "-22.066", filterUnits: "userSpaceOnUse", colorInterpolationFilters: "sRGB" }, /* @__PURE__ */ React.createElement("feFlood", { result: "BackgroundImageFix", floodOpacity: "0" }), /* @__PURE__ */ React.createElement("feBlend", { in: "SourceGraphic", in2: "BackgroundImageFix", result: "shape" }), /* @__PURE__ */ React.createElement("feGaussianBlur", { result: "effect1_foregroundBlur_929_3563", stdDeviation: "2.5" })), /* @__PURE__ */ React.createElement("filter", { id: "ShuttersAnimation__h", width: "75.054", height: "75.055", x: "-4.597", y: "-22.055", filterUnits: "userSpaceOnUse", colorInterpolationFilters: "sRGB" }, /* @__PURE__ */ React.createElement("feFlood", { result: "BackgroundImageFix", floodOpacity: "0" }), /* @__PURE__ */ React.createElement("feBlend", { in: "SourceGraphic", in2: "BackgroundImageFix", result: "shape" }), /* @__PURE__ */ React.createElement("feGaussianBlur", { result: "effect1_foregroundBlur_929_3563", stdDeviation: "2.5" })))
14
+ );
15
+ ShuttersAnimation.displayName = "ShuttersAnimation";
16
+ export {
17
+ ShuttersAnimation
18
+ };
package/dist/esm/animated/ThumbnailScale.js ADDED
@@ -0,0 +1,43 @@
1
+ import React, { forwardRef, useEffect, useImperativeHandle, useRef } from "react";
2
+ const ThumbnailScale = forwardRef(
3
+ ({ className, ...props }, ref) => {
4
+ const svgRef = useRef(null);
5
+ useImperativeHandle(
6
+ ref,
7
+ () => ({
8
+ play: () => svgRef.current?.getAnimations({ subtree: true }).forEach((a) => a.play()),
9
+ pause: () => svgRef.current?.getAnimations({ subtree: true }).forEach((a) => a.pause()),
10
+ reset: () => svgRef.current?.getAnimations({ subtree: true }).forEach((a) => {
11
+ a.currentTime = 0;
12
+ a.pause();
13
+ })
14
+ }),
15
+ []
16
+ );
17
+ useEffect(() => {
18
+ svgRef.current?.getAnimations({ subtree: true }).forEach((a) => {
19
+ a.currentTime = 0;
20
+ a.pause();
21
+ });
22
+ }, []);
23
+ return /* @__PURE__ */ React.createElement(
24
+ "svg",
25
+ {
26
+ ref: svgRef,
27
+ viewBox: "0 0 236 127",
28
+ fill: "none",
29
+ width: 236,
30
+ height: 127,
31
+ xmlns: "http://www.w3.org/2000/svg",
32
+ className: ["ThumbnailScale-root", className].filter(Boolean).join(" "),
33
+ ...props
34
+ },
35
+ /* @__PURE__ */ React.createElement("defs", null, /* @__PURE__ */ React.createElement("linearGradient", { id: "ThumbnailScale-paint0_linear_4125_12361", x1: "110.482", y1: "60.3398", x2: "133.552", y2: "78.8708", gradientUnits: "userSpaceOnUse" }, /* @__PURE__ */ React.createElement("stop", { offset: "0", stopColor: "#EAEFFF" }), /* @__PURE__ */ React.createElement("stop", { offset: "0.325264", stopColor: "var(--wds-illustration-color-3, #b8c4ff)" }), /* @__PURE__ */ React.createElement("stop", { offset: "1", stopColor: "#002294" })), /* @__PURE__ */ React.createElement("linearGradient", { id: "ThumbnailScale-paint0_linear_4125_12403", x1: "113.562", y1: "61.7065", x2: "126.645", y2: "72.2151", gradientUnits: "userSpaceOnUse" }, /* @__PURE__ */ React.createElement("stop", { offset: "0", stopColor: "#EAEFFF" }), /* @__PURE__ */ React.createElement("stop", { offset: "0.325264", stopColor: "var(--wds-illustration-color-3, #b8c4ff)" }), /* @__PURE__ */ React.createElement("stop", { offset: "1", stopColor: "#002294" })), /* @__PURE__ */ React.createElement("linearGradient", { id: "ThumbnailScale-paint1_linear_4125_12361", x1: "95.2177", y1: "37.3346", x2: "140.84", y2: "82.5369", gradientUnits: "userSpaceOnUse" }, /* @__PURE__ */ React.createElement("stop", { offset: "0", stopColor: "#EAEFFF" }), /* @__PURE__ */ React.createElement("stop", { offset: "0.5", stopColor: "var(--wds-illustration-color-3, #b8c4ff)" }), /* @__PURE__ */ React.createElement("stop", { offset: "0.95", stopColor: "#002294" })), /* @__PURE__ */ React.createElement("linearGradient", { id: "ThumbnailScale-paint1_linear_4125_12403", x1: "104.902", y1: "48.661", x2: "130.774", y2: "74.2946", gradientUnits: "userSpaceOnUse" }, /* @__PURE__ */ React.createElement("stop", { offset: "0", stopColor: "#EAEFFF" }), /* @__PURE__ */ React.createElement("stop", { offset: "0.5", stopColor: "var(--wds-illustration-color-3, #b8c4ff)" }), /* @__PURE__ */ React.createElement("stop", { offset: "0.95", stopColor: "#002294" })), /* @__PURE__ */ React.createElement("linearGradient", { id: "ThumbnailScale-paint2_linear_4125_12361", x1: "113.012", y1: "41.6462", x2: "94.9412", y2: "64.7056", gradientUnits: "userSpaceOnUse" }, /* @__PURE__ */ React.createElement("stop", { offset: "0.176006", stopColor: "#EAEFFF" }), /* @__PURE__ */ React.createElement("stop", { offset: "0.576923", stopColor: "var(--wds-illustration-color-3, #b8c4ff)" }), /* @__PURE__ */ React.createElement("stop", { offset: "0.85", stopColor: "#002294" })), /* @__PURE__ */ React.createElement("linearGradient", { id: "ThumbnailScale-paint2_linear_4125_12403", x1: "114.992", y1: "51.1105", x2: "104.744", y2: "64.1871", gradientUnits: "userSpaceOnUse" }, /* @__PURE__ */ React.createElement("stop", { offset: "0.176006", stopColor: "#EAEFFF" }), /* @__PURE__ */ React.createElement("stop", { offset: "0.576923", stopColor: "var(--wds-illustration-color-3, #b8c4ff)" }), /* @__PURE__ */ React.createElement("stop", { offset: "0.85", stopColor: "#002294" })), /* @__PURE__ */ React.createElement("filter", { id: "ThumbnailScale-filter0_i_4125_12361", 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 0 0 0 0 0 0 0 0 0 0 0 0 0 0.14 0" }), /* @__PURE__ */ React.createElement("feBlend", { mode: "normal", in2: "shape", result: "effect1_innerShadow_4125_12361" })), /* @__PURE__ */ React.createElement("filter", { id: "ThumbnailScale-filter1_f_4125_12361", 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: "1.01565", result: "effect1_foregroundBlur_4125_12361" })), /* @__PURE__ */ React.createElement("clipPath", { id: "ThumbnailScale-clip0_4125_12361" }, /* @__PURE__ */ React.createElement("rect", { x: "44.5", y: "23", width: "147", height: "81", rx: "6", fill: "white" })), /* @__PURE__ */ React.createElement("clipPath", { id: "ThumbnailScale-clip1_4125_12361" }, /* @__PURE__ */ React.createElement("rect", { x: "44.8125", y: "23", width: "147", height: "81", rx: "6", fill: "white" })), /* @__PURE__ */ React.createElement("clipPath", { id: "ThumbnailScale-clip2_4125_12361" }, /* @__PURE__ */ React.createElement("rect", { x: "89.6719", y: "42.668", width: "57.2851", height: "41.6619", rx: "3.9058", fill: "white" })), /* @__PURE__ */ React.createElement("clipPath", { id: "ThumbnailScale-clip3_4125_12361" }, /* @__PURE__ */ React.createElement("rect", { x: "89.6719", y: "42.668", width: "57.2851", height: "42.5019", rx: "3.69581", fill: "white" })), /* @__PURE__ */ React.createElement("clipPath", { id: "ThumbnailScale-clip4_4125_12361" }, /* @__PURE__ */ React.createElement("rect", { x: "94.8828", y: "47.875", width: "11.7174", height: "11.7174", rx: "5.8587", fill: "white" })), /* @__PURE__ */ React.createElement("filter", { id: "ThumbnailScale-filter0_i_4125_12403", 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 0 0 0 0 0 0 0 0 0 0 0 0 0 0.14 0" }), /* @__PURE__ */ React.createElement("feBlend", { mode: "normal", in2: "shape", result: "effect1_innerShadow_4125_12403" })), /* @__PURE__ */ React.createElement("filter", { id: "ThumbnailScale-filter1_f_4125_12403", 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: "0.575959", result: "effect1_foregroundBlur_4125_12403" })), /* @__PURE__ */ React.createElement("clipPath", { id: "ThumbnailScale-clip0_4125_12403" }, /* @__PURE__ */ React.createElement("rect", { x: "101.758", y: "51.6875", width: "32.4856", height: "23.6259", rx: "2.21493", fill: "white" })), /* @__PURE__ */ React.createElement("clipPath", { id: "ThumbnailScale-clip1_4125_12403" }, /* @__PURE__ */ React.createElement("rect", { x: "101.758", y: "51.6875", width: "32.4856", height: "24.1022", rx: "2.09584", fill: "white" })), /* @__PURE__ */ React.createElement("clipPath", { id: "ThumbnailScale-clip2_4125_12403" }, /* @__PURE__ */ React.createElement("rect", { x: "104.711", y: "54.6406", width: "6.64478", height: "6.64478", rx: "3.32239", fill: "white" }))),
36
+ /* @__PURE__ */ React.createElement("g", { fill: "none", filter: "url(#ThumbnailScale-filter0_i_4125_12361)" }, /* @__PURE__ */ React.createElement("path", { d: "M0 8C0 3.58172 3.58172 0 8 0H228C232.418 0 236 3.58172 236 8V119C236 123.418 232.418 127 228 127H8C3.58172 127 0 123.418 0 119V8Z", fill: "#303030" }), /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { fill: "none", clipPath: "url(#ThumbnailScale-clip0_4125_12361)" }, /* @__PURE__ */ React.createElement("rect", { x: "81.5", y: "23", width: "73", height: "81", rx: "6", fill: "var(--wds-illustration-color-background, #f8f6f6)", className: "ThumbnailScale-node-3", fillOpacity: "0.25" }), /* @__PURE__ */ React.createElement("g", { fill: "none", className: "ThumbnailScale-Frame-2147240028" }, /* @__PURE__ */ React.createElement("g", { fill: "none" }), /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { fill: "none", clipPath: "url(#ThumbnailScale-clip1_4125_12361)" }, /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { fill: "none", clipPath: "url(#ThumbnailScale-clip2_4125_12361)" }, /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { fill: "none", clipPath: "url(#ThumbnailScale-clip3_4125_12361)" }, /* @__PURE__ */ React.createElement("rect", { x: "89.6719", y: "42.668", width: "57.2851", height: "42.5019", rx: "3.69581", fill: "#eaefff" }))), /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("path", { d: "M119.091 51.7305L103.07 77.0863L131.643 72.9157L119.091 51.7305Z", fill: "url(#ThumbnailScale-paint0_linear_4125_12361)" }), /* @__PURE__ */ React.createElement("path", { d: "M147.883 60.7829C147.883 60.7829 125.917 51.9748 124.845 51.5285C123.774 51.0823 117.127 49.0176 119.092 54.9706C121.045 60.8862 122.115 63.1612 122.541 64.1714C122.966 65.1815 124.699 69.2975 120.34 70.8162C115.398 72.5369 88.75 80.7082 88.75 80.7082V85.401H147.883V60.7829Z", fill: "url(#ThumbnailScale-paint1_linear_4125_12361)" })), /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { fill: "none", clipPath: "url(#ThumbnailScale-clip4_4125_12361)" }, /* @__PURE__ */ React.createElement("rect", { x: "94.8828", y: "47.875", width: "11.7174", height: "11.7174", rx: "5.8587", fill: "#002294" }), /* @__PURE__ */ React.createElement("g", { fill: "none", filter: "url(#ThumbnailScale-filter1_f_4125_12361)" }, /* @__PURE__ */ React.createElement("path", { d: "M103.526 39.9477C102.962 40.0598 102.405 40.2153 101.863 40.4142C99.6365 41.2387 97.6628 42.8081 96.3614 45.0176C93.3864 50.0622 95.042 56.5243 100.059 59.4498C105.077 62.3753 111.555 60.6539 114.53 55.6094C117.505 50.5612 115.849 44.0991 110.835 41.1772C108.543 39.8392 105.952 39.474 103.526 39.9477Z", fill: "url(#ThumbnailScale-paint2_linear_4125_12361)" })))))))))))))))), /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("path", { d: "M42 59H40V69H42V59Z", fill: "var(--wds-illustration-color-3, #b8c4ff)", className: "ThumbnailScale-Vector_4" }), /* @__PURE__ */ React.createElement("path", { d: "M196 59H194V69H196V59Z", fill: "var(--wds-illustration-color-3, #b8c4ff)", className: "ThumbnailScale-Vector_5" }))))
37
+ );
38
+ }
39
+ );
40
+ ThumbnailScale.displayName = "ThumbnailScale";
41
+ export {
42
+ ThumbnailScale
43
+ };