@wix/design-system-illustrations 2.42.1 → 2.44.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 (106) hide show
  1. package/dist/cjs/Layout1Column.js +52 -0
  2. package/dist/cjs/Layout2Columns.js +52 -0
  3. package/dist/cjs/Layout3Columns.js +52 -0
  4. package/dist/cjs/Layout4Columns.js +52 -0
  5. package/dist/cjs/Layout5Columns.js +52 -0
  6. package/dist/cjs/LayoutHalf.js +53 -0
  7. package/dist/cjs/LayoutThird.js +53 -0
  8. package/dist/cjs/MaxWidth.js +1 -2
  9. package/dist/cjs/animated/ElementPositionDefault.js +90 -0
  10. package/dist/cjs/animated/ElementPositionPinned.js +91 -0
  11. package/dist/cjs/animated/ElementPositionSticky.js +91 -0
  12. package/dist/cjs/animated/ResponsiveBehaviorHeaderDisappear.js +90 -0
  13. package/dist/cjs/animated/{ThumbnailFullWidthTransparent.js → StickySectionPresetsFullWidth.js} +10 -9
  14. package/dist/cjs/animated/StickySectionPresetsGridRows.js +89 -0
  15. package/dist/cjs/animated/{ThumbnailGridTransparent.js → StickySectionPresetsSideBySide.js} +10 -9
  16. package/dist/cjs/animated/StickySectionPresetsSplit.js +89 -0
  17. package/dist/cjs/animated/{ThumbnailZigzagTransparent.js → StickySectionPresetsZigzag.js} +10 -9
  18. package/dist/cjs/animated/animated.global.css +696 -477
  19. package/dist/cjs/animated/index.js +27 -30
  20. package/dist/cjs/index.js +21 -0
  21. package/dist/esm/Layout1Column.js +18 -0
  22. package/dist/esm/Layout2Columns.js +18 -0
  23. package/dist/esm/Layout3Columns.js +18 -0
  24. package/dist/esm/Layout4Columns.js +18 -0
  25. package/dist/esm/Layout5Columns.js +18 -0
  26. package/dist/esm/LayoutHalf.js +19 -0
  27. package/dist/esm/LayoutThird.js +19 -0
  28. package/dist/esm/MaxWidth.js +1 -2
  29. package/dist/esm/animated/ElementPositionDefault.js +46 -0
  30. package/dist/esm/animated/ElementPositionPinned.js +47 -0
  31. package/dist/esm/animated/ElementPositionSticky.js +47 -0
  32. package/dist/esm/animated/ResponsiveBehaviorHeaderDisappear.js +46 -0
  33. package/dist/esm/animated/{ThumbnailFullWidthTransparent.js → StickySectionPresetsFullWidth.js} +6 -5
  34. package/dist/esm/animated/StickySectionPresetsGridRows.js +45 -0
  35. package/dist/esm/animated/StickySectionPresetsSideBySide.js +45 -0
  36. package/dist/esm/animated/StickySectionPresetsSplit.js +45 -0
  37. package/dist/esm/animated/{ThumbnailZigzagTransparent.js → StickySectionPresetsZigzag.js} +6 -5
  38. package/dist/esm/animated/animated.global.css +696 -477
  39. package/dist/esm/animated/index.js +18 -20
  40. package/dist/esm/index.js +14 -0
  41. package/dist/types/Layout1Column.d.ts +5 -0
  42. package/dist/types/Layout2Columns.d.ts +5 -0
  43. package/dist/types/Layout3Columns.d.ts +5 -0
  44. package/dist/types/Layout4Columns.d.ts +5 -0
  45. package/dist/types/Layout5Columns.d.ts +5 -0
  46. package/dist/types/LayoutHalf.d.ts +5 -0
  47. package/dist/types/LayoutThird.d.ts +5 -0
  48. package/dist/types/animated/ElementPositionDefault.d.ts +7 -0
  49. package/dist/types/animated/ElementPositionPinned.d.ts +7 -0
  50. package/dist/types/animated/ElementPositionSticky.d.ts +7 -0
  51. package/dist/types/animated/ResponsiveBehaviorHeaderDisappear.d.ts +7 -0
  52. package/dist/types/animated/StickySectionPresetsFullWidth.d.ts +7 -0
  53. package/dist/types/animated/StickySectionPresetsGridRows.d.ts +7 -0
  54. package/dist/types/animated/StickySectionPresetsSideBySide.d.ts +7 -0
  55. package/dist/types/animated/StickySectionPresetsSplit.d.ts +7 -0
  56. package/dist/types/animated/StickySectionPresetsZigzag.d.ts +7 -0
  57. package/dist/types/animated/index.d.ts +18 -20
  58. package/dist/types/index.d.ts +7 -0
  59. package/package.json +4 -4
  60. package/src/Layout1Column.svg +23 -0
  61. package/src/Layout2Columns.svg +24 -0
  62. package/src/Layout3Columns.svg +25 -0
  63. package/src/Layout4Columns.svg +26 -0
  64. package/src/Layout5Columns.svg +27 -0
  65. package/src/LayoutHalf.svg +31 -0
  66. package/src/LayoutThird.svg +31 -0
  67. package/src/MaxWidth.svg +2 -2
  68. package/src/animated/ElementPositionDefault.html +223 -0
  69. package/src/animated/ElementPositionPinned.html +223 -0
  70. package/src/animated/ElementPositionSticky.html +342 -0
  71. package/src/animated/ResponsiveBehaviorHeaderDisappear.html +336 -0
  72. package/src/animated/{ThumbnailFullWidthTransparent.html → StickySectionPresetsFullWidth.html} +81 -16
  73. package/src/animated/{ThumbnailSideBySideTransparent.html → StickySectionPresetsGridRows.html} +100 -17
  74. package/src/animated/{ThumbnailGridTransparent.html → StickySectionPresetsSideBySide.html} +82 -16
  75. package/src/animated/{ThumbnailSplitTransparent.html → StickySectionPresetsSplit.html} +99 -18
  76. package/src/animated/{ThumbnailZigzagTransparent.html → StickySectionPresetsZigzag.html} +92 -21
  77. package/dist/cjs/animated/ThumbnailFullWidth.js +0 -88
  78. package/dist/cjs/animated/ThumbnailGrid.js +0 -88
  79. package/dist/cjs/animated/ThumbnailSideBySide.js +0 -88
  80. package/dist/cjs/animated/ThumbnailSideBySideTransparent.js +0 -88
  81. package/dist/cjs/animated/ThumbnailSplit.js +0 -88
  82. package/dist/cjs/animated/ThumbnailSplitTransparent.js +0 -88
  83. package/dist/cjs/animated/ThumbnailZigzag.js +0 -88
  84. package/dist/esm/animated/ThumbnailFullWidth.js +0 -44
  85. package/dist/esm/animated/ThumbnailGrid.js +0 -44
  86. package/dist/esm/animated/ThumbnailGridTransparent.js +0 -44
  87. package/dist/esm/animated/ThumbnailSideBySide.js +0 -44
  88. package/dist/esm/animated/ThumbnailSideBySideTransparent.js +0 -44
  89. package/dist/esm/animated/ThumbnailSplit.js +0 -44
  90. package/dist/esm/animated/ThumbnailSplitTransparent.js +0 -44
  91. package/dist/esm/animated/ThumbnailZigzag.js +0 -44
  92. package/dist/types/animated/ThumbnailFullWidth.d.ts +0 -7
  93. package/dist/types/animated/ThumbnailFullWidthTransparent.d.ts +0 -7
  94. package/dist/types/animated/ThumbnailGrid.d.ts +0 -7
  95. package/dist/types/animated/ThumbnailGridTransparent.d.ts +0 -7
  96. package/dist/types/animated/ThumbnailSideBySide.d.ts +0 -7
  97. package/dist/types/animated/ThumbnailSideBySideTransparent.d.ts +0 -7
  98. package/dist/types/animated/ThumbnailSplit.d.ts +0 -7
  99. package/dist/types/animated/ThumbnailSplitTransparent.d.ts +0 -7
  100. package/dist/types/animated/ThumbnailZigzag.d.ts +0 -7
  101. package/dist/types/animated/ThumbnailZigzagTransparent.d.ts +0 -7
  102. package/src/animated/ThumbnailFullWidth.html +0 -133
  103. package/src/animated/ThumbnailGrid.html +0 -134
  104. package/src/animated/ThumbnailSideBySide.html +0 -160
  105. package/src/animated/ThumbnailSplit.html +0 -139
  106. package/src/animated/ThumbnailZigzag.html +0 -162
@@ -1,44 +0,0 @@
1
- import React, { forwardRef, useEffect, useId, useImperativeHandle, useRef } from "react";
2
- const ThumbnailSplit = forwardRef(
3
- ({ className, ...props }, ref) => {
4
- const svgRef = useRef(null);
5
- const uid = useId().replace(/:/g, "");
6
- useImperativeHandle(
7
- ref,
8
- () => ({
9
- play: () => svgRef.current?.getAnimations({ subtree: true }).forEach((a) => a.play()),
10
- pause: () => svgRef.current?.getAnimations({ subtree: true }).forEach((a) => a.pause()),
11
- reset: () => svgRef.current?.getAnimations({ subtree: true }).forEach((a) => {
12
- a.currentTime = 0;
13
- a.pause();
14
- })
15
- }),
16
- []
17
- );
18
- useEffect(() => {
19
- svgRef.current?.getAnimations({ subtree: true }).forEach((a) => {
20
- a.currentTime = 0;
21
- a.pause();
22
- });
23
- }, []);
24
- return /* @__PURE__ */ React.createElement(
25
- "svg",
26
- {
27
- ref: svgRef,
28
- viewBox: "0 0 68 68",
29
- fill: "none",
30
- width: 68,
31
- height: 68,
32
- xmlns: "http://www.w3.org/2000/svg",
33
- className: ["ThumbnailSplit-root", className].filter(Boolean).join(" "),
34
- ...props
35
- },
36
- /* @__PURE__ */ React.createElement("defs", null, /* @__PURE__ */ React.createElement("linearGradient", { id: `${uid}-paint0_linear_4428_19363`, x1: "97.8231", y1: "29.0557", x2: "58.7726", y2: "91.8283", gradientUnits: "userSpaceOnUse" }, /* @__PURE__ */ React.createElement("stop", { offset: "0.176006", stopColor: "#EAEFFF" }), /* @__PURE__ */ React.createElement("stop", { offset: "0.55", stopColor: "#B8C4FF" }), /* @__PURE__ */ React.createElement("stop", { offset: "0.8", stopColor: "#002294" })), /* @__PURE__ */ React.createElement("filter", { id: `${uid}-filter0_i_4428_19363`, filterUnits: "objectBoundingBox", x: "-1", y: "-1", width: "3", height: "3", colorInterpolationFilters: "sRGB" }, /* @__PURE__ */ React.createElement("feFlood", { result: "BackgroundImageFix", floodOpacity: "0" }), /* @__PURE__ */ React.createElement("feBlend", { mode: "normal", in: "SourceGraphic", in2: "BackgroundImageFix", result: "shape" }), /* @__PURE__ */ React.createElement("feColorMatrix", { in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }), /* @__PURE__ */ React.createElement("feOffset", { dx: "0.944444", dy: "0.944444" }), /* @__PURE__ */ React.createElement("feGaussianBlur", { stdDeviation: "1.41667" }), /* @__PURE__ */ React.createElement("feComposite", { in2: "hardAlpha", operator: "arithmetic", k2: "-1", k3: "1" }), /* @__PURE__ */ React.createElement("feColorMatrix", { type: "matrix", values: "0 0 0 0 0.462745 0 0 0 0 0.458824 0 0 0 0 0.454902 0 0 0 0.2 0" }), /* @__PURE__ */ React.createElement("feBlend", { mode: "normal", in2: "shape", result: "effect1_innerShadow_4428_19363" })), /* @__PURE__ */ React.createElement("filter", { id: `${uid}-filter1_f_4428_19363`, filterUnits: "objectBoundingBox", x: "-1", y: "-1", width: "3", height: "3", colorInterpolationFilters: "sRGB" }, /* @__PURE__ */ React.createElement("feFlood", { result: "BackgroundImageFix", floodOpacity: "0" }), /* @__PURE__ */ React.createElement("feBlend", { mode: "normal", in: "SourceGraphic", in2: "BackgroundImageFix", result: "shape" }), /* @__PURE__ */ React.createElement("feGaussianBlur", { stdDeviation: "2.36111", result: "effect1_foregroundBlur_4428_19363" })), /* @__PURE__ */ React.createElement("clipPath", { id: `${uid}-clip0_4428_19363` }, /* @__PURE__ */ React.createElement("rect", { x: "55", y: "33", width: "22", height: "21", rx: "2.83333", transform: "rotate(90 55 33)", fill: "white" })), /* @__PURE__ */ React.createElement("mask", { id: `${uid}-am-node-1-2-2`, maskUnits: "userSpaceOnUse", "mask-type": "alpha", x: "0", y: "0", width: "68", height: "68" }, /* @__PURE__ */ React.createElement("rect", { x: "0", y: "0", width: "68", height: "68", rx: "7.55556", fill: "var(--color-1)" })), /* @__PURE__ */ React.createElement("mask", { id: `${uid}-am-node-1-2-2-2`, maskUnits: "userSpaceOnUse", "mask-type": "alpha", x: "0", y: "0", width: "68", height: "68" }, /* @__PURE__ */ React.createElement("rect", { x: "0", y: "0", width: "68", height: "68", rx: "7.55556", fill: "var(--color-1)" })), /* @__PURE__ */ React.createElement("mask", { id: `${uid}-am-node-1-2`, maskUnits: "userSpaceOnUse", "mask-type": "alpha", x: "0", y: "0", width: "68", height: "68" }, /* @__PURE__ */ React.createElement("rect", { x: "0", y: "0", width: "68", height: "68", rx: "7.55556", fill: "var(--color-1)" }))),
37
- /* @__PURE__ */ React.createElement("g", { fill: "none", filter: `url(#${uid}-filter0_i_4428_19363)` }, /* @__PURE__ */ React.createElement("rect", { x: "0", y: "0", width: "68", height: "68", rx: "7.55556", fill: "var(--color-1)" }), /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { fill: "none", opacity: "0.25" }, /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("rect", { x: "13", y: "13", width: "42", height: "42", rx: "2.83333", fill: "var(--color-2)" }))), /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { mask: `url(#${uid}-am-node-1-2-2)` }, /* @__PURE__ */ React.createElement("g", { fill: "none", className: "ThumbnailSplit-Frame-1707483281" }, /* @__PURE__ */ React.createElement("path", { style: { "transformBox": "fill-box", "transformOrigin": "50% 50%", "transform": "translate(0px, 0px)" }, d: "M 55 15.83333 L 55 32.16667 A 2.83333 2.83333 45 0 1 52.16667 35 L 36.83333 35 A 2.83333 2.83333 45 0 1 34 32.16667 L 34 15.83333 A 2.83333 2.83333 45 0 1 36.83333 13 L 52.16667 13 A 2.83333 2.83333 45 0 1 55 15.83333 Z", fill: "var(--color-2)" }))), /* @__PURE__ */ React.createElement("g", { mask: `url(#${uid}-am-node-1-2-2-2)` }, /* @__PURE__ */ React.createElement("g", { fill: "none", className: "ThumbnailSplit-Frame-1707483278" }, /* @__PURE__ */ React.createElement("path", { d: "M 55 25.83333 L 55 42.16667 A 2.83333 2.83333 45 0 1 52.16667 45 L 36.83333 45 A 2.83333 2.83333 45 0 1 34 42.16667 L 34 25.83333 A 2.83333 2.83333 45 0 1 36.83333 23 L 52.16667 23 A 2.83333 2.83333 45 0 1 55 25.83333 Z", fill: "var(--color-3)" }))), /* @__PURE__ */ React.createElement("g", { mask: `url(#${uid}-am-node-1-2)` }, /* @__PURE__ */ React.createElement("g", { fill: "none", className: "ThumbnailSplit-Frame-1707483277" }, /* @__PURE__ */ React.createElement("g", { fill: "none", clipPath: `url(#${uid}-clip0_4428_19363)` }, /* @__PURE__ */ React.createElement("path", { d: "M 55 35.83333 L 55 52.16667 A 2.83333 2.83333 45 0 1 52.16667 55 L 36.83333 55 A 2.83333 2.83333 45 0 1 34 52.16667 L 34 35.83333 A 2.83333 2.83333 45 0 1 36.83333 33 L 52.16667 33 A 2.83333 2.83333 45 0 1 55 35.83333 Z", fill: "var(--color-2)" }), /* @__PURE__ */ React.createElement("g", { fill: "none", filter: `url(#${uid}-filter1_f_4428_19363)` }, /* @__PURE__ */ React.createElement("path", { d: "M104.953 62.2891L104.953 23.5634L25.5188 23.5634L25.5188 62.2891L104.953 62.2891Z", fill: `url(#${uid}-paint0_linear_4428_19363)` }))))))))
38
- );
39
- }
40
- );
41
- ThumbnailSplit.displayName = "ThumbnailSplit";
42
- export {
43
- ThumbnailSplit
44
- };
@@ -1,44 +0,0 @@
1
- import React, { forwardRef, useEffect, useId, useImperativeHandle, useRef } from "react";
2
- const ThumbnailSplitTransparent = forwardRef(
3
- ({ className, ...props }, ref) => {
4
- const svgRef = useRef(null);
5
- const uid = useId().replace(/:/g, "");
6
- useImperativeHandle(
7
- ref,
8
- () => ({
9
- play: () => svgRef.current?.getAnimations({ subtree: true }).forEach((a) => a.play()),
10
- pause: () => svgRef.current?.getAnimations({ subtree: true }).forEach((a) => a.pause()),
11
- reset: () => svgRef.current?.getAnimations({ subtree: true }).forEach((a) => {
12
- a.currentTime = 0;
13
- a.pause();
14
- })
15
- }),
16
- []
17
- );
18
- useEffect(() => {
19
- svgRef.current?.getAnimations({ subtree: true }).forEach((a) => {
20
- a.currentTime = 0;
21
- a.pause();
22
- });
23
- }, []);
24
- return /* @__PURE__ */ React.createElement(
25
- "svg",
26
- {
27
- ref: svgRef,
28
- viewBox: "0 0 68 68",
29
- fill: "none",
30
- width: 68,
31
- height: 68,
32
- xmlns: "http://www.w3.org/2000/svg",
33
- className: ["ThumbnailSplitTransparent-root", className].filter(Boolean).join(" "),
34
- ...props
35
- },
36
- /* @__PURE__ */ React.createElement("defs", null, /* @__PURE__ */ React.createElement("linearGradient", { id: `${uid}-paint0_linear_4428_19363`, x1: "97.8231", y1: "29.0557", x2: "58.7726", y2: "91.8283", gradientUnits: "userSpaceOnUse" }, /* @__PURE__ */ React.createElement("stop", { offset: "0.176006", stopColor: "#EAEFFF" }), /* @__PURE__ */ React.createElement("stop", { offset: "0.55", stopColor: "#B8C4FF" }), /* @__PURE__ */ React.createElement("stop", { offset: "0.8", stopColor: "#002294" })), /* @__PURE__ */ React.createElement("filter", { id: `${uid}-filter1_f_4428_19363`, filterUnits: "objectBoundingBox", x: "-1", y: "-1", width: "3", height: "3", colorInterpolationFilters: "sRGB" }, /* @__PURE__ */ React.createElement("feFlood", { result: "BackgroundImageFix", floodOpacity: "0" }), /* @__PURE__ */ React.createElement("feBlend", { mode: "normal", in: "SourceGraphic", in2: "BackgroundImageFix", result: "shape" }), /* @__PURE__ */ React.createElement("feGaussianBlur", { stdDeviation: "2.36111", result: "effect1_foregroundBlur_4428_19363" })), /* @__PURE__ */ React.createElement("clipPath", { id: `${uid}-clip0_4428_19363` }, /* @__PURE__ */ React.createElement("rect", { x: "55", y: "33", width: "22", height: "21", rx: "2.83333", transform: "rotate(90 55 33)", fill: "white" })), /* @__PURE__ */ React.createElement("mask", { id: `${uid}-am-node-1-2-2`, maskUnits: "userSpaceOnUse", "mask-type": "alpha", x: "0", y: "0", width: "68", height: "68" }, /* @__PURE__ */ React.createElement("rect", { x: "0", y: "0", width: "68", height: "68", rx: "7.55556", fill: "var(--color-1)" })), /* @__PURE__ */ React.createElement("mask", { id: `${uid}-am-node-1-2-2-2`, maskUnits: "userSpaceOnUse", "mask-type": "alpha", x: "0", y: "0", width: "68", height: "68" }, /* @__PURE__ */ React.createElement("rect", { x: "0", y: "0", width: "68", height: "68", rx: "7.55556", fill: "var(--color-1)" })), /* @__PURE__ */ React.createElement("mask", { id: `${uid}-am-node-1-2`, maskUnits: "userSpaceOnUse", "mask-type": "alpha", x: "0", y: "0", width: "68", height: "68" }, /* @__PURE__ */ React.createElement("rect", { x: "0", y: "0", width: "68", height: "68", rx: "7.55556", fill: "var(--color-1)" }))),
37
- /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { fill: "none", opacity: "0.25" }, /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("rect", { x: "13", y: "13", width: "42", height: "42", rx: "2.83333", fill: "var(--color-2)" }))), /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { mask: `url(#${uid}-am-node-1-2-2)` }, /* @__PURE__ */ React.createElement("g", { fill: "none", className: "ThumbnailSplitTransparent-Frame-1707483281" }, /* @__PURE__ */ React.createElement("path", { style: { "transformBox": "fill-box", "transformOrigin": "50% 50%", "transform": "translate(0px, 0px)" }, d: "M 55 15.83333 L 55 32.16667 A 2.83333 2.83333 45 0 1 52.16667 35 L 36.83333 35 A 2.83333 2.83333 45 0 1 34 32.16667 L 34 15.83333 A 2.83333 2.83333 45 0 1 36.83333 13 L 52.16667 13 A 2.83333 2.83333 45 0 1 55 15.83333 Z", fill: "var(--color-2)" }))), /* @__PURE__ */ React.createElement("g", { mask: `url(#${uid}-am-node-1-2-2-2)` }, /* @__PURE__ */ React.createElement("g", { fill: "none", className: "ThumbnailSplitTransparent-Frame-1707483278" }, /* @__PURE__ */ React.createElement("path", { d: "M 55 25.83333 L 55 42.16667 A 2.83333 2.83333 45 0 1 52.16667 45 L 36.83333 45 A 2.83333 2.83333 45 0 1 34 42.16667 L 34 25.83333 A 2.83333 2.83333 45 0 1 36.83333 23 L 52.16667 23 A 2.83333 2.83333 45 0 1 55 25.83333 Z", fill: "var(--color-3)" }))), /* @__PURE__ */ React.createElement("g", { mask: `url(#${uid}-am-node-1-2)` }, /* @__PURE__ */ React.createElement("g", { fill: "none", className: "ThumbnailSplitTransparent-Frame-1707483277" }, /* @__PURE__ */ React.createElement("g", { fill: "none", clipPath: `url(#${uid}-clip0_4428_19363)` }, /* @__PURE__ */ React.createElement("path", { d: "M 55 35.83333 L 55 52.16667 A 2.83333 2.83333 45 0 1 52.16667 55 L 36.83333 55 A 2.83333 2.83333 45 0 1 34 52.16667 L 34 35.83333 A 2.83333 2.83333 45 0 1 36.83333 33 L 52.16667 33 A 2.83333 2.83333 45 0 1 55 35.83333 Z", fill: "var(--color-2)" }), /* @__PURE__ */ React.createElement("g", { fill: "none", filter: `url(#${uid}-filter1_f_4428_19363)` }, /* @__PURE__ */ React.createElement("path", { d: "M104.953 62.2891L104.953 23.5634L25.5188 23.5634L25.5188 62.2891L104.953 62.2891Z", fill: `url(#${uid}-paint0_linear_4428_19363)` }))))))))
38
- );
39
- }
40
- );
41
- ThumbnailSplitTransparent.displayName = "ThumbnailSplitTransparent";
42
- export {
43
- ThumbnailSplitTransparent
44
- };
@@ -1,44 +0,0 @@
1
- import React, { forwardRef, useEffect, useId, useImperativeHandle, useRef } from "react";
2
- const ThumbnailZigzag = forwardRef(
3
- ({ className, ...props }, ref) => {
4
- const svgRef = useRef(null);
5
- const uid = useId().replace(/:/g, "");
6
- useImperativeHandle(
7
- ref,
8
- () => ({
9
- play: () => svgRef.current?.getAnimations({ subtree: true }).forEach((a) => a.play()),
10
- pause: () => svgRef.current?.getAnimations({ subtree: true }).forEach((a) => a.pause()),
11
- reset: () => svgRef.current?.getAnimations({ subtree: true }).forEach((a) => {
12
- a.currentTime = 0;
13
- a.pause();
14
- })
15
- }),
16
- []
17
- );
18
- useEffect(() => {
19
- svgRef.current?.getAnimations({ subtree: true }).forEach((a) => {
20
- a.currentTime = 0;
21
- a.pause();
22
- });
23
- }, []);
24
- return /* @__PURE__ */ React.createElement(
25
- "svg",
26
- {
27
- ref: svgRef,
28
- viewBox: "0 0 68 68",
29
- fill: "none",
30
- width: 68,
31
- height: 68,
32
- xmlns: "http://www.w3.org/2000/svg",
33
- className: ["ThumbnailZigzag-root", className].filter(Boolean).join(" "),
34
- ...props
35
- },
36
- /* @__PURE__ */ React.createElement("defs", null, /* @__PURE__ */ React.createElement("linearGradient", { id: `${uid}-paint0_linear_4424_19163`, x1: "113.06", y1: "9.65327", x2: "47.0261", y2: "92.6155", gradientUnits: "userSpaceOnUse" }, /* @__PURE__ */ React.createElement("stop", { offset: "0.176006", stopColor: "#EAEFFF" }), /* @__PURE__ */ React.createElement("stop", { offset: "0.55", stopColor: "#B8C4FF" }), /* @__PURE__ */ React.createElement("stop", { offset: "0.8", stopColor: "#002294" })), /* @__PURE__ */ React.createElement("filter", { id: `${uid}-filter0_i_4424_19163`, filterUnits: "objectBoundingBox", x: "-1", y: "-1", width: "3", height: "3", colorInterpolationFilters: "sRGB" }, /* @__PURE__ */ React.createElement("feFlood", { result: "BackgroundImageFix", floodOpacity: "0" }), /* @__PURE__ */ React.createElement("feBlend", { mode: "normal", in: "SourceGraphic", in2: "BackgroundImageFix", result: "shape" }), /* @__PURE__ */ React.createElement("feColorMatrix", { in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }), /* @__PURE__ */ React.createElement("feOffset", { dx: "1", dy: "1" }), /* @__PURE__ */ React.createElement("feGaussianBlur", { stdDeviation: "1.5" }), /* @__PURE__ */ React.createElement("feComposite", { in2: "hardAlpha", operator: "arithmetic", k2: "-1", k3: "1" }), /* @__PURE__ */ React.createElement("feColorMatrix", { type: "matrix", values: "0 0 0 0 0.462745 0 0 0 0 0.458824 0 0 0 0 0.454902 0 0 0 0.2 0" }), /* @__PURE__ */ React.createElement("feBlend", { mode: "normal", in2: "shape", result: "effect1_innerShadow_4424_19163" })), /* @__PURE__ */ React.createElement("filter", { id: `${uid}-filter1_f_4424_19163`, filterUnits: "objectBoundingBox", x: "-1", y: "-1", width: "3", height: "3", colorInterpolationFilters: "sRGB" }, /* @__PURE__ */ React.createElement("feFlood", { result: "BackgroundImageFix", floodOpacity: "0" }), /* @__PURE__ */ React.createElement("feBlend", { mode: "normal", in: "SourceGraphic", in2: "BackgroundImageFix", result: "shape" }), /* @__PURE__ */ React.createElement("feGaussianBlur", { stdDeviation: "2.36111", result: "effect1_foregroundBlur_4424_19163" })), /* @__PURE__ */ React.createElement("clipPath", { id: `${uid}-clip0_4424_19163` }, /* @__PURE__ */ React.createElement("rect", { width: "68", height: "68", fill: "white" })), /* @__PURE__ */ React.createElement("clipPath", { id: `${uid}-clip1_4424_19163` }, /* @__PURE__ */ React.createElement("path", { d: "M0 7.55556C0 3.38274 3.38274 0 7.55556 0H60.4444C64.6173 0 68 3.38274 68 7.55556V60.4444C68 64.6173 64.6173 68 60.4444 68H7.55556C3.38274 68 0 64.6173 0 60.4444V7.55556Z", fill: "white" })), /* @__PURE__ */ React.createElement("clipPath", { id: `${uid}-clip2_4424_19163` }, /* @__PURE__ */ React.createElement("rect", { x: "54.7812", y: "32.1719", width: "23.6111", height: "20.7778", rx: "2.83333", transform: "rotate(90 54.7812 32.1719)", fill: "white" }))),
37
- /* @__PURE__ */ React.createElement("g", { fill: "none", filter: `url(#${uid}-filter0_i_4424_19163)` }, /* @__PURE__ */ React.createElement("g", { fill: "none", clipPath: `url(#${uid}-clip0_4424_19163)` }, /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { fill: "none", clipPath: `url(#${uid}-clip1_4424_19163)` }, /* @__PURE__ */ React.createElement("path", { d: "M0 7.55556C0 3.38274 3.38274 0 7.55556 0H60.4444C64.6173 0 68 3.38274 68 7.55556V60.4444C68 64.6173 64.6173 68 60.4444 68H7.55556C3.38274 68 0 64.6173 0 60.4444V7.55556Z", fill: "var(--color-1)" }), /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("rect", { x: "0", y: "0", width: "68", height: "68", rx: "3.77778", fill: "var(--color-1)" })))), /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { fill: "none", className: "ThumbnailZigzag-Frame-1707483283" }, /* @__PURE__ */ React.createElement("path", { d: "M 34 16.05993 L 34 34.00437 A 2.83333 2.83333 45 0 1 31.16667 36.8377 L 16.05553 36.8377 A 2.83333 2.83333 45 0 1 13.2222 34.00437 L 13.2222 16.05993 A 2.83333 2.83333 45 0 1 16.05553 13.2266 L 31.16667 13.2266 A 2.83333 2.83333 45 0 1 34 16.05993 Z", fill: "var(--color-2)" })), /* @__PURE__ */ React.createElement("g", { fill: "none", className: "ThumbnailZigzag-Frame-1707483285" }, /* @__PURE__ */ React.createElement("path", { d: "M 54.7812 21.72393 L 54.7812 39.66837 A 2.83333 2.83333 45 0 1 51.94787 42.5017 L 36.83673 42.5017 A 2.83333 2.83333 45 0 1 34.0034 39.66837 L 34.0034 21.72393 A 2.83333 2.83333 45 0 1 36.83673 18.8906 L 51.94787 18.8906 A 2.83333 2.83333 45 0 1 54.7812 21.72393 Z", fill: "var(--color-3)" })), /* @__PURE__ */ React.createElement("g", { fill: "none", className: "ThumbnailZigzag-Frame-1707483284" }, /* @__PURE__ */ React.createElement("path", { d: "M 34 29.27863 L 34 47.22307 A 2.83333 2.83333 45 0 1 31.16667 50.0564 L 16.05553 50.0564 A 2.83333 2.83333 45 0 1 13.2222 47.22307 L 13.2222 29.27863 A 2.83333 2.83333 45 0 1 16.05553 26.4453 L 31.16667 26.4453 A 2.83333 2.83333 45 0 1 34 29.27863 Z", fill: "var(--color-4)" })), /* @__PURE__ */ React.createElement("g", { fill: "none", className: "ThumbnailZigzag-Frame-1707483282" }, /* @__PURE__ */ React.createElement("g", { fill: "none", clipPath: `url(#${uid}-clip2_4424_19163)` }, /* @__PURE__ */ React.createElement("path", { d: "M 54.7812 35.00523 L 54.7812 52.94967 A 2.83333 2.83333 45 0 1 51.94787 55.783 L 36.83673 55.783 A 2.83333 2.83333 45 0 1 34.0034 52.94967 L 34.0034 35.00523 A 2.83333 2.83333 45 0 1 36.83673 32.1719 L 51.94787 32.1719 A 2.83333 2.83333 45 0 1 54.7812 35.00523 Z", fill: "var(--color-2)" }), /* @__PURE__ */ React.createElement("g", { fill: "none", filter: `url(#${uid}-filter1_f_4424_19163)` }, /* @__PURE__ */ React.createElement("path", { d: "M121.734 61.3828L121.734 1.10425L25.0979 1.10425L25.0979 61.3828L121.734 61.3828Z", fill: `url(#${uid}-paint0_linear_4424_19163)` })))))))
38
- );
39
- }
40
- );
41
- ThumbnailZigzag.displayName = "ThumbnailZigzag";
42
- export {
43
- ThumbnailZigzag
44
- };
@@ -1,7 +0,0 @@
1
- import React from 'react';
2
- export type ThumbnailFullWidthHandle = {
3
- play: () => void;
4
- pause: () => void;
5
- reset: () => void;
6
- };
7
- export declare const ThumbnailFullWidth: React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement>, "ref"> & React.RefAttributes<ThumbnailFullWidthHandle>>;
@@ -1,7 +0,0 @@
1
- import React from 'react';
2
- export type ThumbnailFullWidthTransparentHandle = {
3
- play: () => void;
4
- pause: () => void;
5
- reset: () => void;
6
- };
7
- export declare const ThumbnailFullWidthTransparent: React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement>, "ref"> & React.RefAttributes<ThumbnailFullWidthTransparentHandle>>;
@@ -1,7 +0,0 @@
1
- import React from 'react';
2
- export type ThumbnailGridHandle = {
3
- play: () => void;
4
- pause: () => void;
5
- reset: () => void;
6
- };
7
- export declare const ThumbnailGrid: React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement>, "ref"> & React.RefAttributes<ThumbnailGridHandle>>;
@@ -1,7 +0,0 @@
1
- import React from 'react';
2
- export type ThumbnailGridTransparentHandle = {
3
- play: () => void;
4
- pause: () => void;
5
- reset: () => void;
6
- };
7
- export declare const ThumbnailGridTransparent: React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement>, "ref"> & React.RefAttributes<ThumbnailGridTransparentHandle>>;
@@ -1,7 +0,0 @@
1
- import React from 'react';
2
- export type ThumbnailSideBySideHandle = {
3
- play: () => void;
4
- pause: () => void;
5
- reset: () => void;
6
- };
7
- export declare const ThumbnailSideBySide: React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement>, "ref"> & React.RefAttributes<ThumbnailSideBySideHandle>>;
@@ -1,7 +0,0 @@
1
- import React from 'react';
2
- export type ThumbnailSideBySideTransparentHandle = {
3
- play: () => void;
4
- pause: () => void;
5
- reset: () => void;
6
- };
7
- export declare const ThumbnailSideBySideTransparent: React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement>, "ref"> & React.RefAttributes<ThumbnailSideBySideTransparentHandle>>;
@@ -1,7 +0,0 @@
1
- import React from 'react';
2
- export type ThumbnailSplitHandle = {
3
- play: () => void;
4
- pause: () => void;
5
- reset: () => void;
6
- };
7
- export declare const ThumbnailSplit: React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement>, "ref"> & React.RefAttributes<ThumbnailSplitHandle>>;
@@ -1,7 +0,0 @@
1
- import React from 'react';
2
- export type ThumbnailSplitTransparentHandle = {
3
- play: () => void;
4
- pause: () => void;
5
- reset: () => void;
6
- };
7
- export declare const ThumbnailSplitTransparent: React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement>, "ref"> & React.RefAttributes<ThumbnailSplitTransparentHandle>>;
@@ -1,7 +0,0 @@
1
- import React from 'react';
2
- export type ThumbnailZigzagHandle = {
3
- play: () => void;
4
- pause: () => void;
5
- reset: () => void;
6
- };
7
- export declare const ThumbnailZigzag: React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement>, "ref"> & React.RefAttributes<ThumbnailZigzagHandle>>;
@@ -1,7 +0,0 @@
1
- import React from 'react';
2
- export type ThumbnailZigzagTransparentHandle = {
3
- play: () => void;
4
- pause: () => void;
5
- reset: () => void;
6
- };
7
- export declare const ThumbnailZigzagTransparent: React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement>, "ref"> & React.RefAttributes<ThumbnailZigzagTransparentHandle>>;
@@ -1,133 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8" />
5
- <title>Animation</title>
6
- <style>
7
- svg {
8
- max-width: 100%;
9
- height: auto;
10
- }
11
-
12
- :root {
13
- --color-1: #F8F6F6;
14
- --color-2: #002294;
15
- --color-3: #7896FF;
16
- }
17
-
18
- .Frame-1707483277 {
19
- transform-box: fill-box;
20
- transform-origin: 50% 50%;
21
- animation: Frame-1707483277-transform 2375ms linear infinite both;
22
- }
23
-
24
- @keyframes Frame-1707483277-transform {
25
- 0% {
26
- transform: translate(0px, 57.591696px);
27
- animation-timing-function: cubic-bezier(0.801, 0, 0.199, 1);
28
- }
29
- 40.336842% {
30
- transform: translate(0px, 0px);
31
- animation-timing-function: cubic-bezier(0.801, 0, 0.199, 1);
32
- }
33
- 100% {
34
- transform: translate(0px, 0px);
35
- }
36
- }
37
-
38
- .Frame-1707483278 {
39
- transform-box: fill-box;
40
- transform-origin: 50% 50%;
41
- animation: Frame-1707483278-transform 2375ms linear infinite both;
42
- }
43
-
44
- @keyframes Frame-1707483278-transform {
45
- 0% {
46
- transform: translate(0px, 51.778772px);
47
- animation-timing-function: cubic-bezier(0.801, 0, 0.199, 1);
48
- }
49
- 33.347368% {
50
- transform: translate(0px, 0px);
51
- animation-timing-function: cubic-bezier(0.801, 0, 0.199, 1);
52
- }
53
- 100% {
54
- transform: translate(0px, 0px);
55
- }
56
- }
57
-
58
- .Frame-1707483281 {
59
- transform-box: fill-box;
60
- transform-origin: 50% 50%;
61
- animation: Frame-1707483281-transform 2375ms linear infinite both;
62
- }
63
-
64
- @keyframes Frame-1707483281-transform {
65
- 0% {
66
- transform: translate(0px, 30px);
67
- animation-timing-function: cubic-bezier(0.801, 0, 0.199, 1);
68
- }
69
- 26.315789% {
70
- transform: translate(0px, 0px);
71
- animation-timing-function: cubic-bezier(0.801, 0, 0.199, 1);
72
- }
73
- 100% {
74
- transform: translate(0px, 0px);
75
- }
76
- }
77
- </style>
78
- </head>
79
- <body>
80
- <svg xmlns="http://www.w3.org/2000/svg" width="68" height="68" viewBox="0 0 68 68" fill="none">
81
- <defs>
82
- <linearGradient id="paint0_linear_4428_19355" x1="77.0184" y1="29.0713" x2="37.9679" y2="91.8439" gradientUnits="userSpaceOnUse"><stop offset="0.176006" stop-color="#EAEFFF" /><stop offset="0.55" stop-color="#B8C4FF" /><stop offset="0.8" stop-color="#002294" /></linearGradient>
83
- <filter xmlns="http://www.w3.org/2000/svg" id="filter0_i_4428_19355" color-interpolation-filters="sRGB" filterUnits="objectBoundingBox" x="-1" y="-1" width="3" height="3">
84
- <feFlood flood-opacity="0" result="BackgroundImageFix"/>
85
- <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
86
- <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"/>
87
- <feOffset dx="1" dy="1"/>
88
- <feGaussianBlur stdDeviation="1.5"/>
89
- <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
90
- <feColorMatrix type="matrix" values="0 0 0 0 0.462745 0 0 0 0 0.458824 0 0 0 0 0.454902 0 0 0 0.2 0"/>
91
- <feBlend mode="normal" in2="shape" result="effect1_innerShadow_4428_19355"/>
92
- </filter>
93
- <filter xmlns="http://www.w3.org/2000/svg" id="filter1_f_4428_19355" color-interpolation-filters="sRGB" filterUnits="objectBoundingBox" x="-1" y="-1" width="3" height="3">
94
- <feFlood flood-opacity="0" result="BackgroundImageFix"/>
95
- <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
96
- <feGaussianBlur stdDeviation="2.36111" result="effect1_foregroundBlur_4428_19355"/>
97
- </filter>
98
- <clipPath xmlns="http://www.w3.org/2000/svg" id="clip0_4428_19355">
99
- <path d="M0 7.55556C0 3.38274 3.38274 0 7.55556 0H60.4444C64.6173 0 68 3.38274 68 7.55556V60.4444C68 64.6173 64.6173 68 60.4444 68H7.55556C3.38274 68 0 64.6173 0 60.4444V7.55556Z" fill="white"/>
100
- </clipPath>
101
- <clipPath xmlns="http://www.w3.org/2000/svg" id="clip1_4428_19355">
102
- <rect x="55" y="33" width="22" height="42" rx="1.88889" transform="rotate(90 55 33)" fill="white"/>
103
- </clipPath>
104
- </defs>
105
- <g fill="none" filter="url(#filter0_i_4428_19355)">
106
- <g fill="none">
107
- <g fill="none" clip-path="url(#clip0_4428_19355)">
108
- <path d="M0 7.55556C0 3.38274 3.38274 0 7.55556 0H60.4444C64.6173 0 68 3.38274 68 7.55556V60.4444C68 64.6173 64.6173 68 60.4444 68H7.55556C3.38274 68 0 64.6173 0 60.4444V7.55556Z" fill="var(--color-1)" />
109
- <g fill="none">
110
- <rect x="0" y="0" width="68" height="68" fill="var(--color-1)" />
111
- <g fill="none">
112
- <g class="Frame-1707483281" fill="none">
113
- <path d="M 55 14.88889 L 55 33.11111 A 1.88889 1.88889 45 0 1 53.11111 35 L 14.88889 35 A 1.88889 1.88889 45 0 1 13 33.11111 L 13 14.88889 A 1.88889 1.88889 45 0 1 14.88889 13 L 53.11111 13 A 1.88889 1.88889 45 0 1 55 14.88889 Z" fill="var(--color-2)" />
114
- </g>
115
- <g class="Frame-1707483278" fill="none">
116
- <path d="M 55 24.88889 L 55 43.11111 A 1.88889 1.88889 45 0 1 53.11111 45 L 14.88889 45 A 1.88889 1.88889 45 0 1 13 43.11111 L 13 24.88889 A 1.88889 1.88889 45 0 1 14.88889 23 L 53.11111 23 A 1.88889 1.88889 45 0 1 55 24.88889 Z" fill="var(--color-3)" />
117
- </g>
118
- <g class="Frame-1707483277" fill="none">
119
- <g fill="none" clip-path="url(#clip1_4428_19355)">
120
- <path d="M 55 34.88889 L 55 53.11111 A 1.88889 1.88889 45 0 1 53.11111 55 L 14.88889 55 A 1.88889 1.88889 45 0 1 13 53.11111 L 13 34.88889 A 1.88889 1.88889 45 0 1 14.88889 33 L 53.11111 33 A 1.88889 1.88889 45 0 1 55 34.88889 Z" fill="var(--color-2)" />
121
- <g fill="none" filter="url(#filter1_f_4428_19355)">
122
- <path d="M84.1484 62.3047L84.1484 23.5791L4.71411 23.5791L4.71411 62.3047L84.1484 62.3047Z" fill="url(#paint0_linear_4428_19355)" />
123
- </g>
124
- </g>
125
- </g>
126
- </g>
127
- </g>
128
- </g>
129
- </g>
130
- </g>
131
- </svg>
132
- </body>
133
- </html>
@@ -1,134 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8" />
5
- <title>Animation</title>
6
- <style>
7
- svg {
8
- max-width: 100%;
9
- height: auto;
10
- }
11
-
12
- :root {
13
- --color-1: #F8F6F6;
14
- --color-2: #002294;
15
- --color-3: #7896FF;
16
- }
17
-
18
- .Group-2147222318 {
19
- transform-box: fill-box;
20
- transform-origin: 50% 50%;
21
- animation: Group-2147222318-transform 2375ms linear infinite both;
22
- }
23
-
24
- @keyframes Group-2147222318-transform {
25
- 0% {
26
- transform: translate(0px, 30px);
27
- animation-timing-function: cubic-bezier(0.801, 0, 0.199, 1);
28
- }
29
- 26.315789% {
30
- transform: translate(0px, 0px);
31
- animation-timing-function: cubic-bezier(0.801, 0, 0.199, 1);
32
- }
33
- 100% {
34
- transform: translate(0px, 0px);
35
- }
36
- }
37
-
38
- .Group-2147222319 {
39
- transform-box: fill-box;
40
- transform-origin: 50% 50%;
41
- animation: Group-2147222319-transform 2375ms linear infinite both;
42
- }
43
-
44
- @keyframes Group-2147222319-transform {
45
- 0% {
46
- transform: translate(0px, 51.778772px);
47
- animation-timing-function: cubic-bezier(0.801, 0, 0.199, 1);
48
- }
49
- 33.347368% {
50
- transform: translate(0px, 0px);
51
- animation-timing-function: cubic-bezier(0.801, 0, 0.199, 1);
52
- }
53
- 100% {
54
- transform: translate(0px, 0px);
55
- }
56
- }
57
-
58
- .Group-2147222320 {
59
- transform-box: fill-box;
60
- transform-origin: 50% 50%;
61
- animation: Group-2147222320-transform 2375ms linear infinite both;
62
- }
63
-
64
- @keyframes Group-2147222320-transform {
65
- 0% {
66
- transform: translate(0px, 57.591696px);
67
- animation-timing-function: cubic-bezier(0.801, 0, 0.199, 1);
68
- }
69
- 40.336842% {
70
- transform: translate(0px, 0px);
71
- animation-timing-function: cubic-bezier(0.801, 0, 0.199, 1);
72
- }
73
- 100% {
74
- transform: translate(0px, 0px);
75
- }
76
- }
77
- </style>
78
- </head>
79
- <body>
80
- <svg xmlns="http://www.w3.org/2000/svg" width="68" height="68" viewBox="0 0 68 68" fill="none">
81
- <defs>
82
- <linearGradient id="paint0_linear_4424_19258" x1="66.5888" y1="5.72025" x2="19.8579" y2="25.1921" gradientUnits="userSpaceOnUse"><stop offset="0.176006" stop-color="#EAEFFF" /><stop offset="0.55" stop-color="#B8C4FF" /><stop offset="0.8" stop-color="#002294" /></linearGradient>
83
- <filter xmlns="http://www.w3.org/2000/svg" id="filter0_i_4424_19258" color-interpolation-filters="sRGB" filterUnits="objectBoundingBox" x="-1" y="-1" width="3" height="3">
84
- <feFlood flood-opacity="0" result="BackgroundImageFix"/>
85
- <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
86
- <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"/>
87
- <feOffset dx="0.944444" dy="0.944444"/>
88
- <feGaussianBlur stdDeviation="1.41667"/>
89
- <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
90
- <feColorMatrix type="matrix" values="0 0 0 0 0.462745 0 0 0 0 0.458824 0 0 0 0 0.454902 0 0 0 0.2 0"/>
91
- <feBlend mode="normal" in2="shape" result="effect1_innerShadow_4424_19258"/>
92
- </filter>
93
- <filter xmlns="http://www.w3.org/2000/svg" id="filter1_f_4424_19258" color-interpolation-filters="sRGB" filterUnits="objectBoundingBox" x="-1" y="-1" width="3" height="3">
94
- <feFlood flood-opacity="0" result="BackgroundImageFix"/>
95
- <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
96
- <feGaussianBlur stdDeviation="2.36111" result="effect1_foregroundBlur_4424_19258"/>
97
- </filter>
98
- <clipPath xmlns="http://www.w3.org/2000/svg" id="clip0_4424_19258">
99
- <rect width="13.2632" height="21.0139" rx="1.88889" transform="matrix(-1 0 0 1 55 27.9922)" fill="white"/>
100
- </clipPath>
101
- <mask id="am-node-1-2" maskUnits="userSpaceOnUse" mask-type="alpha" x="0" y="0" width="68" height="68"><rect x="0" y="0" width="68" height="68" rx="7.55556" fill="var(--color-1)" /></mask>
102
- </defs>
103
- <g mask="url(#am-node-1-2)">
104
- <g>
105
- <g fill="none" filter="url(#filter0_i_4424_19258)">
106
- <rect x="0" y="0" width="68" height="68" rx="7.55556" fill="var(--color-1)" />
107
- <g fill="none">
108
- <g class="Group-2147222318" fill="none">
109
- <g fill="none">
110
- <path d="M 24.36891 19 L 14.88349 19 A 1.88889 1.88889 90 0 0 12.9946 20.88889 L 12.9946 38.12501 A 1.88889 1.88889 90 0 0 14.88349 40.0139 L 24.36891 40.0139 A 1.88889 1.88889 90 0 0 26.2578 38.12501 L 26.2578 20.88889 A 1.88889 1.88889 90 0 0 24.36891 19 Z" fill="var(--color-2)" />
111
- </g>
112
- </g>
113
- <g class="Group-2147222319" fill="none">
114
- <g fill="none">
115
- <path d="M 38.74391 23.4844 L 29.25849 23.4844 A 1.88889 1.88889 90 0 0 27.3696 25.37329 L 27.3696 42.60941 A 1.88889 1.88889 90 0 0 29.25849 44.4983 L 38.74391 44.4983 A 1.88889 1.88889 90 0 0 40.6328 42.60941 L 40.6328 25.37329 A 1.88889 1.88889 90 0 0 38.74391 23.4844 Z" fill="var(--color-3)" />
116
- </g>
117
- </g>
118
- <g class="Group-2147222320" fill="none">
119
- <g fill="none">
120
- <g fill="none" clip-path="url(#clip0_4424_19258)">
121
- <path d="M 53.11111 27.9922 L 43.62569 27.9922 A 1.88889 1.88889 90 0 0 41.7368 29.88109 L 41.7368 47.11721 A 1.88889 1.88889 90 0 0 43.62569 49.0061 L 53.11111 49.0061 A 1.88889 1.88889 90 0 0 55 47.11721 L 55 29.88109 A 1.88889 1.88889 90 0 0 53.11111 27.9922 Z" fill="var(--color-2)" />
122
- <g fill="none" filter="url(#filter1_f_4424_19258)">
123
- <path d="M69.3828 55.9609L69.3828 -2.58272H38.2549L38.2549 55.9609H69.3828Z" fill="url(#paint0_linear_4424_19258)" />
124
- </g>
125
- </g>
126
- </g>
127
- </g>
128
- </g>
129
- </g>
130
- </g>
131
- </g>
132
- </svg>
133
- </body>
134
- </html>