@wix/design-system-illustrations 2.26.0 → 2.27.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 (92) hide show
  1. package/dist/cjs/BookingsImagePosition01.js +54 -0
  2. package/dist/cjs/BookingsImagePosition02.js +54 -0
  3. package/dist/cjs/BookingsImagePosition03.js +54 -0
  4. package/dist/cjs/BookingsImagePosition04.js +54 -0
  5. package/dist/cjs/BookingsImagePosition05.js +54 -0
  6. package/dist/cjs/BookingsImagePosition06.js +54 -0
  7. package/dist/cjs/BookingsImagePosition07.js +54 -0
  8. package/dist/cjs/BookingsImagePosition08.js +54 -0
  9. package/dist/cjs/BookingsImagePosition09.js +54 -0
  10. package/dist/cjs/CreateAComponent.js +54 -0
  11. package/dist/cjs/CreateAContext.js +54 -0
  12. package/dist/cjs/CreateAFunction.js +52 -0
  13. package/dist/cjs/ImageSizeL.js +52 -0
  14. package/dist/cjs/ImageSizeM.js +52 -0
  15. package/dist/cjs/ImageSizeS.js +52 -0
  16. package/dist/cjs/animated/ElementsFixedHeight.js +87 -0
  17. package/dist/cjs/animated/ElementsFixedMargins.js +87 -0
  18. package/dist/cjs/animated/ElementsScale.js +87 -0
  19. package/dist/cjs/animated/SectionFixedHeight.js +88 -0
  20. package/dist/cjs/animated/SectionScale.js +87 -0
  21. package/dist/cjs/animated/animated.css +857 -16
  22. package/dist/cjs/animated/index.js +15 -3
  23. package/dist/cjs/index.js +45 -0
  24. package/dist/esm/BookingsImagePosition01.js +20 -0
  25. package/dist/esm/BookingsImagePosition02.js +20 -0
  26. package/dist/esm/BookingsImagePosition03.js +20 -0
  27. package/dist/esm/BookingsImagePosition04.js +20 -0
  28. package/dist/esm/BookingsImagePosition05.js +20 -0
  29. package/dist/esm/BookingsImagePosition06.js +20 -0
  30. package/dist/esm/BookingsImagePosition07.js +20 -0
  31. package/dist/esm/BookingsImagePosition08.js +20 -0
  32. package/dist/esm/BookingsImagePosition09.js +20 -0
  33. package/dist/esm/CreateAComponent.js +20 -0
  34. package/dist/esm/CreateAContext.js +20 -0
  35. package/dist/esm/CreateAFunction.js +18 -0
  36. package/dist/esm/ImageSizeL.js +18 -0
  37. package/dist/esm/ImageSizeM.js +18 -0
  38. package/dist/esm/ImageSizeS.js +18 -0
  39. package/dist/esm/animated/ElementsFixedHeight.js +43 -0
  40. package/dist/esm/animated/ElementsFixedMargins.js +43 -0
  41. package/dist/esm/animated/ElementsScale.js +43 -0
  42. package/dist/esm/animated/SectionFixedHeight.js +44 -0
  43. package/dist/esm/animated/SectionScale.js +43 -0
  44. package/dist/esm/animated/animated.css +857 -16
  45. package/dist/esm/animated/index.js +10 -2
  46. package/dist/esm/index.js +30 -0
  47. package/dist/types/BookingsImagePosition01.d.ts +5 -0
  48. package/dist/types/BookingsImagePosition02.d.ts +5 -0
  49. package/dist/types/BookingsImagePosition03.d.ts +5 -0
  50. package/dist/types/BookingsImagePosition04.d.ts +5 -0
  51. package/dist/types/BookingsImagePosition05.d.ts +5 -0
  52. package/dist/types/BookingsImagePosition06.d.ts +5 -0
  53. package/dist/types/BookingsImagePosition07.d.ts +5 -0
  54. package/dist/types/BookingsImagePosition08.d.ts +5 -0
  55. package/dist/types/BookingsImagePosition09.d.ts +5 -0
  56. package/dist/types/CreateAComponent.d.ts +5 -0
  57. package/dist/types/CreateAContext.d.ts +5 -0
  58. package/dist/types/CreateAFunction.d.ts +5 -0
  59. package/dist/types/ImageSizeL.d.ts +5 -0
  60. package/dist/types/ImageSizeM.d.ts +5 -0
  61. package/dist/types/ImageSizeS.d.ts +5 -0
  62. package/dist/types/animated/ElementsFixedHeight.d.ts +7 -0
  63. package/dist/types/animated/ElementsFixedMargins.d.ts +7 -0
  64. package/dist/types/animated/ElementsScale.d.ts +7 -0
  65. package/dist/types/animated/SectionFixedHeight.d.ts +7 -0
  66. package/dist/types/animated/SectionScale.d.ts +7 -0
  67. package/dist/types/animated/index.d.ts +10 -2
  68. package/dist/types/index.d.ts +15 -0
  69. package/package.json +3 -3
  70. package/src/BookingsImagePosition01.svg +28 -0
  71. package/src/BookingsImagePosition02.svg +28 -0
  72. package/src/BookingsImagePosition03.svg +28 -0
  73. package/src/BookingsImagePosition04.svg +28 -0
  74. package/src/BookingsImagePosition05.svg +28 -0
  75. package/src/BookingsImagePosition06.svg +28 -0
  76. package/src/BookingsImagePosition07.svg +28 -0
  77. package/src/BookingsImagePosition08.svg +28 -0
  78. package/src/BookingsImagePosition09.svg +28 -0
  79. package/src/CreateAComponent.svg +23 -0
  80. package/src/CreateAContext.svg +43 -0
  81. package/src/CreateAFunction.svg +29 -0
  82. package/src/ImageSizeL.svg +10 -0
  83. package/src/ImageSizeM.svg +10 -0
  84. package/src/ImageSizeS.svg +10 -0
  85. package/src/animated/ElementsFixedHeight.html +261 -0
  86. package/src/animated/ElementsFixedMargins.html +225 -0
  87. package/src/animated/SectionFixedHeight.html +283 -0
  88. package/src/animated/SectionScale.html +381 -0
  89. package/dist/cjs/animated/ThumbnailScale.js +0 -87
  90. package/dist/esm/animated/ThumbnailScale.js +0 -43
  91. package/dist/types/animated/ThumbnailScale.d.ts +0 -7
  92. /package/src/animated/{ThumbnailScale.html → ElementsScale.html} +0 -0
@@ -1,87 +0,0 @@
1
- "use strict";
2
- var __create = Object.create;
3
- var __defProp = Object.defineProperty;
4
- var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
5
- var __getOwnPropNames = Object.getOwnPropertyNames;
6
- var __getProtoOf = Object.getPrototypeOf;
7
- var __hasOwnProp = Object.prototype.hasOwnProperty;
8
- var __export = (target, all) => {
9
- for (var name in all)
10
- __defProp(target, name, { get: all[name], enumerable: true });
11
- };
12
- var __copyProps = (to, from, except, desc) => {
13
- if (from && typeof from === "object" || typeof from === "function") {
14
- for (let key of __getOwnPropNames(from))
15
- if (!__hasOwnProp.call(to, key) && key !== except)
16
- __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
17
- }
18
- return to;
19
- };
20
- var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
21
- // If the importer is in node compatibility mode or this is not an ESM
22
- // file that has been converted to a CommonJS file using a Babel-
23
- // compatible transform (i.e. "__esModule" has not been set), then set
24
- // "default" to the CommonJS "module.exports" for node compatibility.
25
- isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
26
- mod
27
- ));
28
- var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
29
- var ThumbnailScale_exports = {};
30
- __export(ThumbnailScale_exports, {
31
- ThumbnailScale: () => ThumbnailScale
32
- });
33
- module.exports = __toCommonJS(ThumbnailScale_exports);
34
- var import_react = __toESM(require("react"));
35
- const ThumbnailScale = (0, import_react.forwardRef)(
36
- ({ className, ...props }, ref) => {
37
- const svgRef = (0, import_react.useRef)(null);
38
- (0, import_react.useImperativeHandle)(
39
- ref,
40
- () => ({
41
- play: () => {
42
- var _a;
43
- return (_a = svgRef.current) == null ? void 0 : _a.getAnimations({ subtree: true }).forEach((a) => a.play());
44
- },
45
- pause: () => {
46
- var _a;
47
- return (_a = svgRef.current) == null ? void 0 : _a.getAnimations({ subtree: true }).forEach((a) => a.pause());
48
- },
49
- reset: () => {
50
- var _a;
51
- return (_a = svgRef.current) == null ? void 0 : _a.getAnimations({ subtree: true }).forEach((a) => {
52
- a.currentTime = 0;
53
- a.pause();
54
- });
55
- }
56
- }),
57
- []
58
- );
59
- (0, import_react.useEffect)(() => {
60
- var _a;
61
- (_a = svgRef.current) == null ? void 0 : _a.getAnimations({ subtree: true }).forEach((a) => {
62
- a.currentTime = 0;
63
- a.pause();
64
- });
65
- }, []);
66
- return /* @__PURE__ */ import_react.default.createElement(
67
- "svg",
68
- {
69
- ref: svgRef,
70
- viewBox: "0 0 236 127",
71
- fill: "none",
72
- width: 236,
73
- height: 127,
74
- xmlns: "http://www.w3.org/2000/svg",
75
- className: ["ThumbnailScale-root", className].filter(Boolean).join(" "),
76
- ...props
77
- },
78
- /* @__PURE__ */ import_react.default.createElement("defs", null, /* @__PURE__ */ import_react.default.createElement("linearGradient", { id: "ThumbnailScale-paint0_linear_4125_12361", x1: "110.482", y1: "60.3398", x2: "133.552", y2: "78.8708", gradientUnits: "userSpaceOnUse" }, /* @__PURE__ */ import_react.default.createElement("stop", { offset: "0", stopColor: "#EAEFFF" }), /* @__PURE__ */ import_react.default.createElement("stop", { offset: "0.325264", stopColor: "var(--wds-illustration-color-3, #b8c4ff)" }), /* @__PURE__ */ import_react.default.createElement("stop", { offset: "1", stopColor: "#002294" })), /* @__PURE__ */ import_react.default.createElement("linearGradient", { id: "ThumbnailScale-paint0_linear_4125_12403", x1: "113.562", y1: "61.7065", x2: "126.645", y2: "72.2151", gradientUnits: "userSpaceOnUse" }, /* @__PURE__ */ import_react.default.createElement("stop", { offset: "0", stopColor: "#EAEFFF" }), /* @__PURE__ */ import_react.default.createElement("stop", { offset: "0.325264", stopColor: "var(--wds-illustration-color-3, #b8c4ff)" }), /* @__PURE__ */ import_react.default.createElement("stop", { offset: "1", stopColor: "#002294" })), /* @__PURE__ */ import_react.default.createElement("linearGradient", { id: "ThumbnailScale-paint1_linear_4125_12361", x1: "95.2177", y1: "37.3346", x2: "140.84", y2: "82.5369", gradientUnits: "userSpaceOnUse" }, /* @__PURE__ */ import_react.default.createElement("stop", { offset: "0", stopColor: "#EAEFFF" }), /* @__PURE__ */ import_react.default.createElement("stop", { offset: "0.5", stopColor: "var(--wds-illustration-color-3, #b8c4ff)" }), /* @__PURE__ */ import_react.default.createElement("stop", { offset: "0.95", stopColor: "#002294" })), /* @__PURE__ */ import_react.default.createElement("linearGradient", { id: "ThumbnailScale-paint1_linear_4125_12403", x1: "104.902", y1: "48.661", x2: "130.774", y2: "74.2946", gradientUnits: "userSpaceOnUse" }, /* @__PURE__ */ import_react.default.createElement("stop", { offset: "0", stopColor: "#EAEFFF" }), /* @__PURE__ */ import_react.default.createElement("stop", { offset: "0.5", stopColor: "var(--wds-illustration-color-3, #b8c4ff)" }), /* @__PURE__ */ import_react.default.createElement("stop", { offset: "0.95", stopColor: "#002294" })), /* @__PURE__ */ import_react.default.createElement("linearGradient", { id: "ThumbnailScale-paint2_linear_4125_12361", x1: "113.012", y1: "41.6462", x2: "94.9412", y2: "64.7056", gradientUnits: "userSpaceOnUse" }, /* @__PURE__ */ import_react.default.createElement("stop", { offset: "0.176006", stopColor: "#EAEFFF" }), /* @__PURE__ */ import_react.default.createElement("stop", { offset: "0.576923", stopColor: "var(--wds-illustration-color-3, #b8c4ff)" }), /* @__PURE__ */ import_react.default.createElement("stop", { offset: "0.85", stopColor: "#002294" })), /* @__PURE__ */ import_react.default.createElement("linearGradient", { id: "ThumbnailScale-paint2_linear_4125_12403", x1: "114.992", y1: "51.1105", x2: "104.744", y2: "64.1871", gradientUnits: "userSpaceOnUse" }, /* @__PURE__ */ import_react.default.createElement("stop", { offset: "0.176006", stopColor: "#EAEFFF" }), /* @__PURE__ */ import_react.default.createElement("stop", { offset: "0.576923", stopColor: "var(--wds-illustration-color-3, #b8c4ff)" }), /* @__PURE__ */ import_react.default.createElement("stop", { offset: "0.85", stopColor: "#002294" })), /* @__PURE__ */ import_react.default.createElement("filter", { id: "ThumbnailScale-filter0_i_4125_12361", filterUnits: "objectBoundingBox", x: "-1", y: "-1", width: "3", height: "3", colorInterpolationFilters: "sRGB" }, /* @__PURE__ */ import_react.default.createElement("feFlood", { result: "BackgroundImageFix", floodOpacity: "0" }), /* @__PURE__ */ import_react.default.createElement("feBlend", { mode: "normal", in: "SourceGraphic", in2: "BackgroundImageFix", result: "shape" }), /* @__PURE__ */ import_react.default.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__ */ import_react.default.createElement("feOffset", { dx: "1", dy: "1" }), /* @__PURE__ */ import_react.default.createElement("feGaussianBlur", { stdDeviation: "1.5" }), /* @__PURE__ */ import_react.default.createElement("feComposite", { in2: "hardAlpha", operator: "arithmetic", k2: "-1", k3: "1" }), /* @__PURE__ */ import_react.default.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__ */ import_react.default.createElement("feBlend", { mode: "normal", in2: "shape", result: "effect1_innerShadow_4125_12361" })), /* @__PURE__ */ import_react.default.createElement("filter", { id: "ThumbnailScale-filter1_f_4125_12361", filterUnits: "objectBoundingBox", x: "-1", y: "-1", width: "3", height: "3", colorInterpolationFilters: "sRGB" }, /* @__PURE__ */ import_react.default.createElement("feFlood", { result: "BackgroundImageFix", floodOpacity: "0" }), /* @__PURE__ */ import_react.default.createElement("feBlend", { mode: "normal", in: "SourceGraphic", in2: "BackgroundImageFix", result: "shape" }), /* @__PURE__ */ import_react.default.createElement("feGaussianBlur", { stdDeviation: "1.01565", result: "effect1_foregroundBlur_4125_12361" })), /* @__PURE__ */ import_react.default.createElement("clipPath", { id: "ThumbnailScale-clip0_4125_12361" }, /* @__PURE__ */ import_react.default.createElement("rect", { x: "44.5", y: "23", width: "147", height: "81", rx: "6", fill: "white" })), /* @__PURE__ */ import_react.default.createElement("clipPath", { id: "ThumbnailScale-clip1_4125_12361" }, /* @__PURE__ */ import_react.default.createElement("rect", { x: "44.8125", y: "23", width: "147", height: "81", rx: "6", fill: "white" })), /* @__PURE__ */ import_react.default.createElement("clipPath", { id: "ThumbnailScale-clip2_4125_12361" }, /* @__PURE__ */ import_react.default.createElement("rect", { x: "89.6719", y: "42.668", width: "57.2851", height: "41.6619", rx: "3.9058", fill: "white" })), /* @__PURE__ */ import_react.default.createElement("clipPath", { id: "ThumbnailScale-clip3_4125_12361" }, /* @__PURE__ */ import_react.default.createElement("rect", { x: "89.6719", y: "42.668", width: "57.2851", height: "42.5019", rx: "3.69581", fill: "white" })), /* @__PURE__ */ import_react.default.createElement("clipPath", { id: "ThumbnailScale-clip4_4125_12361" }, /* @__PURE__ */ import_react.default.createElement("rect", { x: "94.8828", y: "47.875", width: "11.7174", height: "11.7174", rx: "5.8587", fill: "white" })), /* @__PURE__ */ import_react.default.createElement("filter", { id: "ThumbnailScale-filter0_i_4125_12403", filterUnits: "objectBoundingBox", x: "-1", y: "-1", width: "3", height: "3", colorInterpolationFilters: "sRGB" }, /* @__PURE__ */ import_react.default.createElement("feFlood", { result: "BackgroundImageFix", floodOpacity: "0" }), /* @__PURE__ */ import_react.default.createElement("feBlend", { mode: "normal", in: "SourceGraphic", in2: "BackgroundImageFix", result: "shape" }), /* @__PURE__ */ import_react.default.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__ */ import_react.default.createElement("feOffset", { dx: "1", dy: "1" }), /* @__PURE__ */ import_react.default.createElement("feGaussianBlur", { stdDeviation: "1.5" }), /* @__PURE__ */ import_react.default.createElement("feComposite", { in2: "hardAlpha", operator: "arithmetic", k2: "-1", k3: "1" }), /* @__PURE__ */ import_react.default.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__ */ import_react.default.createElement("feBlend", { mode: "normal", in2: "shape", result: "effect1_innerShadow_4125_12403" })), /* @__PURE__ */ import_react.default.createElement("filter", { id: "ThumbnailScale-filter1_f_4125_12403", filterUnits: "objectBoundingBox", x: "-1", y: "-1", width: "3", height: "3", colorInterpolationFilters: "sRGB" }, /* @__PURE__ */ import_react.default.createElement("feFlood", { result: "BackgroundImageFix", floodOpacity: "0" }), /* @__PURE__ */ import_react.default.createElement("feBlend", { mode: "normal", in: "SourceGraphic", in2: "BackgroundImageFix", result: "shape" }), /* @__PURE__ */ import_react.default.createElement("feGaussianBlur", { stdDeviation: "0.575959", result: "effect1_foregroundBlur_4125_12403" })), /* @__PURE__ */ import_react.default.createElement("clipPath", { id: "ThumbnailScale-clip0_4125_12403" }, /* @__PURE__ */ import_react.default.createElement("rect", { x: "101.758", y: "51.6875", width: "32.4856", height: "23.6259", rx: "2.21493", fill: "white" })), /* @__PURE__ */ import_react.default.createElement("clipPath", { id: "ThumbnailScale-clip1_4125_12403" }, /* @__PURE__ */ import_react.default.createElement("rect", { x: "101.758", y: "51.6875", width: "32.4856", height: "24.1022", rx: "2.09584", fill: "white" })), /* @__PURE__ */ import_react.default.createElement("clipPath", { id: "ThumbnailScale-clip2_4125_12403" }, /* @__PURE__ */ import_react.default.createElement("rect", { x: "104.711", y: "54.6406", width: "6.64478", height: "6.64478", rx: "3.32239", fill: "white" }))),
79
- /* @__PURE__ */ import_react.default.createElement("g", { fill: "none", filter: "url(#ThumbnailScale-filter0_i_4125_12361)" }, /* @__PURE__ */ import_react.default.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__ */ import_react.default.createElement("g", { fill: "none" }, /* @__PURE__ */ import_react.default.createElement("g", { fill: "none" }, /* @__PURE__ */ import_react.default.createElement("g", { fill: "none", clipPath: "url(#ThumbnailScale-clip0_4125_12361)" }, /* @__PURE__ */ import_react.default.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__ */ import_react.default.createElement("g", { fill: "none", className: "ThumbnailScale-Frame-2147240028" }, /* @__PURE__ */ import_react.default.createElement("g", { fill: "none" }), /* @__PURE__ */ import_react.default.createElement("g", { fill: "none" }, /* @__PURE__ */ import_react.default.createElement("g", { fill: "none" }, /* @__PURE__ */ import_react.default.createElement("g", { fill: "none" }, /* @__PURE__ */ import_react.default.createElement("g", { fill: "none", clipPath: "url(#ThumbnailScale-clip1_4125_12361)" }, /* @__PURE__ */ import_react.default.createElement("g", { fill: "none" }, /* @__PURE__ */ import_react.default.createElement("g", { fill: "none" }, /* @__PURE__ */ import_react.default.createElement("g", { fill: "none" }, /* @__PURE__ */ import_react.default.createElement("g", { fill: "none", clipPath: "url(#ThumbnailScale-clip2_4125_12361)" }, /* @__PURE__ */ import_react.default.createElement("g", { fill: "none" }, /* @__PURE__ */ import_react.default.createElement("g", { fill: "none", clipPath: "url(#ThumbnailScale-clip3_4125_12361)" }, /* @__PURE__ */ import_react.default.createElement("rect", { x: "89.6719", y: "42.668", width: "57.2851", height: "42.5019", rx: "3.69581", fill: "#eaefff" }))), /* @__PURE__ */ import_react.default.createElement("g", { fill: "none" }, /* @__PURE__ */ import_react.default.createElement("g", { fill: "none" }, /* @__PURE__ */ import_react.default.createElement("path", { d: "M119.091 51.7305L103.07 77.0863L131.643 72.9157L119.091 51.7305Z", fill: "url(#ThumbnailScale-paint0_linear_4125_12361)" }), /* @__PURE__ */ import_react.default.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__ */ import_react.default.createElement("g", { fill: "none" }, /* @__PURE__ */ import_react.default.createElement("g", { fill: "none", clipPath: "url(#ThumbnailScale-clip4_4125_12361)" }, /* @__PURE__ */ import_react.default.createElement("rect", { x: "94.8828", y: "47.875", width: "11.7174", height: "11.7174", rx: "5.8587", fill: "#002294" }), /* @__PURE__ */ import_react.default.createElement("g", { fill: "none", filter: "url(#ThumbnailScale-filter1_f_4125_12361)" }, /* @__PURE__ */ import_react.default.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__ */ import_react.default.createElement("g", { fill: "none" }, /* @__PURE__ */ import_react.default.createElement("path", { d: "M42 59H40V69H42V59Z", fill: "var(--wds-illustration-color-3, #b8c4ff)", className: "ThumbnailScale-Vector_4" }), /* @__PURE__ */ import_react.default.createElement("path", { d: "M196 59H194V69H196V59Z", fill: "var(--wds-illustration-color-3, #b8c4ff)", className: "ThumbnailScale-Vector_5" }))))
80
- );
81
- }
82
- );
83
- ThumbnailScale.displayName = "ThumbnailScale";
84
- // Annotate the CommonJS export names for ESM import in node:
85
- 0 && (module.exports = {
86
- ThumbnailScale
87
- });
@@ -1,43 +0,0 @@
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
- };
@@ -1,7 +0,0 @@
1
- import React from 'react';
2
- export type ThumbnailScaleHandle = {
3
- play: () => void;
4
- pause: () => void;
5
- reset: () => void;
6
- };
7
- export declare const ThumbnailScale: React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement>, "ref"> & React.RefAttributes<ThumbnailScaleHandle>>;