@wix/design-system-illustrations 2.43.0 → 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 (75) hide show
  1. package/dist/cjs/MaxWidth.js +1 -2
  2. package/dist/cjs/animated/ElementPositionDefault.js +90 -0
  3. package/dist/cjs/animated/ElementPositionPinned.js +91 -0
  4. package/dist/cjs/animated/ElementPositionSticky.js +91 -0
  5. package/dist/cjs/animated/ResponsiveBehaviorHeaderDisappear.js +90 -0
  6. package/dist/cjs/animated/{ThumbnailFullWidthTransparent.js → StickySectionPresetsFullWidth.js} +10 -9
  7. package/dist/cjs/animated/StickySectionPresetsGridRows.js +89 -0
  8. package/dist/cjs/animated/{ThumbnailGridTransparent.js → StickySectionPresetsSideBySide.js} +10 -9
  9. package/dist/cjs/animated/StickySectionPresetsSplit.js +89 -0
  10. package/dist/cjs/animated/{ThumbnailZigzagTransparent.js → StickySectionPresetsZigzag.js} +10 -9
  11. package/dist/cjs/animated/animated.global.css +696 -477
  12. package/dist/cjs/animated/index.js +27 -30
  13. package/dist/esm/MaxWidth.js +1 -2
  14. package/dist/esm/animated/ElementPositionDefault.js +46 -0
  15. package/dist/esm/animated/ElementPositionPinned.js +47 -0
  16. package/dist/esm/animated/ElementPositionSticky.js +47 -0
  17. package/dist/esm/animated/ResponsiveBehaviorHeaderDisappear.js +46 -0
  18. package/dist/esm/animated/{ThumbnailFullWidthTransparent.js → StickySectionPresetsFullWidth.js} +6 -5
  19. package/dist/esm/animated/StickySectionPresetsGridRows.js +45 -0
  20. package/dist/esm/animated/StickySectionPresetsSideBySide.js +45 -0
  21. package/dist/esm/animated/StickySectionPresetsSplit.js +45 -0
  22. package/dist/esm/animated/{ThumbnailZigzagTransparent.js → StickySectionPresetsZigzag.js} +6 -5
  23. package/dist/esm/animated/animated.global.css +696 -477
  24. package/dist/esm/animated/index.js +18 -20
  25. package/dist/types/animated/ElementPositionDefault.d.ts +7 -0
  26. package/dist/types/animated/ElementPositionPinned.d.ts +7 -0
  27. package/dist/types/animated/ElementPositionSticky.d.ts +7 -0
  28. package/dist/types/animated/ResponsiveBehaviorHeaderDisappear.d.ts +7 -0
  29. package/dist/types/animated/StickySectionPresetsFullWidth.d.ts +7 -0
  30. package/dist/types/animated/StickySectionPresetsGridRows.d.ts +7 -0
  31. package/dist/types/animated/StickySectionPresetsSideBySide.d.ts +7 -0
  32. package/dist/types/animated/StickySectionPresetsSplit.d.ts +7 -0
  33. package/dist/types/animated/StickySectionPresetsZigzag.d.ts +7 -0
  34. package/dist/types/animated/index.d.ts +18 -20
  35. package/package.json +3 -3
  36. package/src/MaxWidth.svg +1 -1
  37. package/src/animated/ElementPositionDefault.html +223 -0
  38. package/src/animated/ElementPositionPinned.html +223 -0
  39. package/src/animated/ElementPositionSticky.html +342 -0
  40. package/src/animated/ResponsiveBehaviorHeaderDisappear.html +336 -0
  41. package/src/animated/{ThumbnailFullWidthTransparent.html → StickySectionPresetsFullWidth.html} +81 -16
  42. package/src/animated/{ThumbnailSideBySideTransparent.html → StickySectionPresetsGridRows.html} +100 -17
  43. package/src/animated/{ThumbnailGridTransparent.html → StickySectionPresetsSideBySide.html} +82 -16
  44. package/src/animated/{ThumbnailSplitTransparent.html → StickySectionPresetsSplit.html} +99 -18
  45. package/src/animated/{ThumbnailZigzagTransparent.html → StickySectionPresetsZigzag.html} +92 -21
  46. package/dist/cjs/animated/ThumbnailFullWidth.js +0 -88
  47. package/dist/cjs/animated/ThumbnailGrid.js +0 -88
  48. package/dist/cjs/animated/ThumbnailSideBySide.js +0 -88
  49. package/dist/cjs/animated/ThumbnailSideBySideTransparent.js +0 -88
  50. package/dist/cjs/animated/ThumbnailSplit.js +0 -88
  51. package/dist/cjs/animated/ThumbnailSplitTransparent.js +0 -88
  52. package/dist/cjs/animated/ThumbnailZigzag.js +0 -88
  53. package/dist/esm/animated/ThumbnailFullWidth.js +0 -44
  54. package/dist/esm/animated/ThumbnailGrid.js +0 -44
  55. package/dist/esm/animated/ThumbnailGridTransparent.js +0 -44
  56. package/dist/esm/animated/ThumbnailSideBySide.js +0 -44
  57. package/dist/esm/animated/ThumbnailSideBySideTransparent.js +0 -44
  58. package/dist/esm/animated/ThumbnailSplit.js +0 -44
  59. package/dist/esm/animated/ThumbnailSplitTransparent.js +0 -44
  60. package/dist/esm/animated/ThumbnailZigzag.js +0 -44
  61. package/dist/types/animated/ThumbnailFullWidth.d.ts +0 -7
  62. package/dist/types/animated/ThumbnailFullWidthTransparent.d.ts +0 -7
  63. package/dist/types/animated/ThumbnailGrid.d.ts +0 -7
  64. package/dist/types/animated/ThumbnailGridTransparent.d.ts +0 -7
  65. package/dist/types/animated/ThumbnailSideBySide.d.ts +0 -7
  66. package/dist/types/animated/ThumbnailSideBySideTransparent.d.ts +0 -7
  67. package/dist/types/animated/ThumbnailSplit.d.ts +0 -7
  68. package/dist/types/animated/ThumbnailSplitTransparent.d.ts +0 -7
  69. package/dist/types/animated/ThumbnailZigzag.d.ts +0 -7
  70. package/dist/types/animated/ThumbnailZigzagTransparent.d.ts +0 -7
  71. package/src/animated/ThumbnailFullWidth.html +0 -133
  72. package/src/animated/ThumbnailGrid.html +0 -134
  73. package/src/animated/ThumbnailSideBySide.html +0 -160
  74. package/src/animated/ThumbnailSplit.html +0 -139
  75. package/src/animated/ThumbnailZigzag.html +0 -162
package/dist/cjs/animated/index.js CHANGED
@@ -18,6 +18,9 @@ var __copyProps = (to, from, except, desc) => {
18
18
  var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
19
19
  var animated_exports = {};
20
20
  __export(animated_exports, {
21
+ ElementPositionDefault: () => import_ElementPositionDefault.ElementPositionDefault,
22
+ ElementPositionPinned: () => import_ElementPositionPinned.ElementPositionPinned,
23
+ ElementPositionSticky: () => import_ElementPositionSticky.ElementPositionSticky,
21
24
  ElementsFixedHeight: () => import_ElementsFixedHeight.ElementsFixedHeight,
22
25
  ElementsFixedMargins: () => import_ElementsFixedMargins.ElementsFixedMargins,
23
26
  ElementsScale: () => import_ElementsScale.ElementsScale,
@@ -33,6 +36,7 @@ __export(animated_exports, {
33
36
  ResponsiveBehaviorElementsScaleWithLimitsMobile: () => import_ResponsiveBehaviorElementsScaleWithLimitsMobile.ResponsiveBehaviorElementsScaleWithLimitsMobile,
34
37
  ResponsiveBehaviorElementsStackOnMobile: () => import_ResponsiveBehaviorElementsStackOnMobile.ResponsiveBehaviorElementsStackOnMobile,
35
38
  ResponsiveBehaviorElementsStretch: () => import_ResponsiveBehaviorElementsStretch.ResponsiveBehaviorElementsStretch,
39
+ ResponsiveBehaviorHeaderDisappear: () => import_ResponsiveBehaviorHeaderDisappear.ResponsiveBehaviorHeaderDisappear,
36
40
  ResponsiveBehaviorHeaderFadeOut: () => import_ResponsiveBehaviorHeaderFadeOut.ResponsiveBehaviorHeaderFadeOut,
37
41
  ResponsiveBehaviorHeaderFreeze: () => import_ResponsiveBehaviorHeaderFreeze.ResponsiveBehaviorHeaderFreeze,
38
42
  ResponsiveBehaviorHeaderScrollWithSite: () => import_ResponsiveBehaviorHeaderScrollWithSite.ResponsiveBehaviorHeaderScrollWithSite,
@@ -47,18 +51,16 @@ __export(animated_exports, {
47
51
  ResponsiveBehaviorWarp: () => import_ResponsiveBehaviorWarp.ResponsiveBehaviorWarp,
48
52
  SectionFixedHeight: () => import_SectionFixedHeight.SectionFixedHeight,
49
53
  SectionScale: () => import_SectionScale.SectionScale,
50
- ThumbnailFullWidth: () => import_ThumbnailFullWidth.ThumbnailFullWidth,
51
- ThumbnailFullWidthTransparent: () => import_ThumbnailFullWidthTransparent.ThumbnailFullWidthTransparent,
52
- ThumbnailGrid: () => import_ThumbnailGrid.ThumbnailGrid,
53
- ThumbnailGridTransparent: () => import_ThumbnailGridTransparent.ThumbnailGridTransparent,
54
- ThumbnailSideBySide: () => import_ThumbnailSideBySide.ThumbnailSideBySide,
55
- ThumbnailSideBySideTransparent: () => import_ThumbnailSideBySideTransparent.ThumbnailSideBySideTransparent,
56
- ThumbnailSplit: () => import_ThumbnailSplit.ThumbnailSplit,
57
- ThumbnailSplitTransparent: () => import_ThumbnailSplitTransparent.ThumbnailSplitTransparent,
58
- ThumbnailZigzag: () => import_ThumbnailZigzag.ThumbnailZigzag,
59
- ThumbnailZigzagTransparent: () => import_ThumbnailZigzagTransparent.ThumbnailZigzagTransparent
54
+ StickySectionPresetsFullWidth: () => import_StickySectionPresetsFullWidth.StickySectionPresetsFullWidth,
55
+ StickySectionPresetsGridRows: () => import_StickySectionPresetsGridRows.StickySectionPresetsGridRows,
56
+ StickySectionPresetsSideBySide: () => import_StickySectionPresetsSideBySide.StickySectionPresetsSideBySide,
57
+ StickySectionPresetsSplit: () => import_StickySectionPresetsSplit.StickySectionPresetsSplit,
58
+ StickySectionPresetsZigzag: () => import_StickySectionPresetsZigzag.StickySectionPresetsZigzag
60
59
  });
61
60
  module.exports = __toCommonJS(animated_exports);
61
+ var import_ElementPositionDefault = require("./ElementPositionDefault");
62
+ var import_ElementPositionPinned = require("./ElementPositionPinned");
63
+ var import_ElementPositionSticky = require("./ElementPositionSticky");
62
64
  var import_ElementsFixedHeight = require("./ElementsFixedHeight");
63
65
  var import_ElementsFixedMargins = require("./ElementsFixedMargins");
64
66
  var import_ElementsScale = require("./ElementsScale");
@@ -74,6 +76,7 @@ var import_ResponsiveBehaviorElementsScaleWithLimits = require("./ResponsiveBeha
74
76
  var import_ResponsiveBehaviorElementsScaleWithLimitsMobile = require("./ResponsiveBehaviorElementsScaleWithLimitsMobile");
75
77
  var import_ResponsiveBehaviorElementsStackOnMobile = require("./ResponsiveBehaviorElementsStackOnMobile");
76
78
  var import_ResponsiveBehaviorElementsStretch = require("./ResponsiveBehaviorElementsStretch");
79
+ var import_ResponsiveBehaviorHeaderDisappear = require("./ResponsiveBehaviorHeaderDisappear");
77
80
  var import_ResponsiveBehaviorHeaderFadeOut = require("./ResponsiveBehaviorHeaderFadeOut");
78
81
  var import_ResponsiveBehaviorHeaderFreeze = require("./ResponsiveBehaviorHeaderFreeze");
79
82
  var import_ResponsiveBehaviorHeaderScrollWithSite = require("./ResponsiveBehaviorHeaderScrollWithSite");
@@ -88,18 +91,16 @@ var import_ResponsiveBehaviorTextScaleProportionally = require("./ResponsiveBeha
88
91
  var import_ResponsiveBehaviorWarp = require("./ResponsiveBehaviorWarp");
89
92
  var import_SectionFixedHeight = require("./SectionFixedHeight");
90
93
  var import_SectionScale = require("./SectionScale");
91
- var import_ThumbnailFullWidth = require("./ThumbnailFullWidth");
92
- var import_ThumbnailFullWidthTransparent = require("./ThumbnailFullWidthTransparent");
93
- var import_ThumbnailGrid = require("./ThumbnailGrid");
94
- var import_ThumbnailGridTransparent = require("./ThumbnailGridTransparent");
95
- var import_ThumbnailSideBySide = require("./ThumbnailSideBySide");
96
- var import_ThumbnailSideBySideTransparent = require("./ThumbnailSideBySideTransparent");
97
- var import_ThumbnailSplit = require("./ThumbnailSplit");
98
- var import_ThumbnailSplitTransparent = require("./ThumbnailSplitTransparent");
99
- var import_ThumbnailZigzag = require("./ThumbnailZigzag");
100
- var import_ThumbnailZigzagTransparent = require("./ThumbnailZigzagTransparent");
94
+ var import_StickySectionPresetsFullWidth = require("./StickySectionPresetsFullWidth");
95
+ var import_StickySectionPresetsGridRows = require("./StickySectionPresetsGridRows");
96
+ var import_StickySectionPresetsSideBySide = require("./StickySectionPresetsSideBySide");
97
+ var import_StickySectionPresetsSplit = require("./StickySectionPresetsSplit");
98
+ var import_StickySectionPresetsZigzag = require("./StickySectionPresetsZigzag");
101
99
  // Annotate the CommonJS export names for ESM import in node:
102
100
  0 && (module.exports = {
101
+ ElementPositionDefault,
102
+ ElementPositionPinned,
103
+ ElementPositionSticky,
103
104
  ElementsFixedHeight,
104
105
  ElementsFixedMargins,
105
106
  ElementsScale,
@@ -115,6 +116,7 @@ var import_ThumbnailZigzagTransparent = require("./ThumbnailZigzagTransparent");
115
116
  ResponsiveBehaviorElementsScaleWithLimitsMobile,
116
117
  ResponsiveBehaviorElementsStackOnMobile,
117
118
  ResponsiveBehaviorElementsStretch,
119
+ ResponsiveBehaviorHeaderDisappear,
118
120
  ResponsiveBehaviorHeaderFadeOut,
119
121
  ResponsiveBehaviorHeaderFreeze,
120
122
  ResponsiveBehaviorHeaderScrollWithSite,
@@ -129,14 +131,9 @@ var import_ThumbnailZigzagTransparent = require("./ThumbnailZigzagTransparent");
129
131
  ResponsiveBehaviorWarp,
130
132
  SectionFixedHeight,
131
133
  SectionScale,
132
- ThumbnailFullWidth,
133
- ThumbnailFullWidthTransparent,
134
- ThumbnailGrid,
135
- ThumbnailGridTransparent,
136
- ThumbnailSideBySide,
137
- ThumbnailSideBySideTransparent,
138
- ThumbnailSplit,
139
- ThumbnailSplitTransparent,
140
- ThumbnailZigzag,
141
- ThumbnailZigzagTransparent
134
+ StickySectionPresetsFullWidth,
135
+ StickySectionPresetsGridRows,
136
+ StickySectionPresetsSideBySide,
137
+ StickySectionPresetsSplit,
138
+ StickySectionPresetsZigzag
142
139
  });
package/dist/esm/MaxWidth.js CHANGED
@@ -9,9 +9,8 @@ const MaxWidth = (props) => /* @__PURE__ */ React.createElement(
9
9
  xmlns: "http://www.w3.org/2000/svg",
10
10
  ...props
11
11
  },
12
- /* @__PURE__ */ React.createElement("rect", { width: "147", height: "81", x: "44.594", y: "23", fill: "var(--wds-illustration-color-opacity-25, #f8f6f200)", rx: "6" }),
13
12
  /* @__PURE__ */ React.createElement("path", { fill: "var(--wds-illustration-color-3, #b8c4ff)", d: "M42 67.5v-8a1 1 0 1 0-2 0v8a1 1 0 1 0 2 0M196 67.5v-8a1 1 0 0 0-2 0v8a1 1 0 0 0 2 0" }),
14
- /* @__PURE__ */ React.createElement("rect", { width: "147", height: "81", x: "44.594", y: "23", fill: "var(--wds-illustration-color-2, #7896ff)", rx: "6", fillOpacity: ".25" }),
13
+ /* @__PURE__ */ React.createElement("rect", { width: "147", height: "81", x: "44.594", y: "23", fill: "var(--wds-illustration-color-background-2, #7896ff40)", rx: "6" }),
15
14
  /* @__PURE__ */ React.createElement("rect", { width: "147", height: "60.004", x: "44.594", y: "33.5", fill: "var(--wds-illustration-color-background, #f8f6f6)", opacity: ".5", rx: "6" }),
16
15
  /* @__PURE__ */ React.createElement("g", { clipPath: "url(#MaxWidth__a)" }, /* @__PURE__ */ React.createElement("g", { clipPath: "url(#MaxWidth__b)" }, /* @__PURE__ */ React.createElement("rect", { width: "147", height: "60.004", x: "44.594", y: "33.5", fill: "#002294", rx: "4" }), /* @__PURE__ */ React.createElement("g", { filter: "url(#MaxWidth__c)" }, /* @__PURE__ */ React.createElement("path", { fill: "url(#MaxWidth__d)", d: "M0 0h81.35v285.949H0z", transform: "matrix(0 -1 -1 0 330.543 93.508)" }))), /* @__PURE__ */ React.createElement("path", { stroke: "var(--wds-illustration-color-1, #002291)", d: "M57.367 30.516v1.499m0 64.469v-1.5m0-59.97v2.998m0 2.999v2.998m0 2.999v2.998m0 2.999v2.998m0 2.999v2.999m0 2.998v2.999m0 2.998v2.999m0 2.998v2.999m0 2.998v2.999m0 2.999v2.998M178.82 30.516v1.499m0 64.469v-1.5m0-59.97v2.998m0 2.999v2.998m0 2.999v2.998m0 2.999v2.998m0 2.999v2.999m0 2.998v2.999m0 2.998v2.999m0 2.998v2.999m0 2.998v2.999m0 2.999v2.998", strokeLinecap: "round" })),
17
16
  /* @__PURE__ */ React.createElement("rect", { width: "49.73", height: "1.5", x: "93.229", y: "53.586", fill: "var(--wds-illustration-color-1, #002291)", rx: ".75" }),
package/dist/esm/animated/ElementPositionDefault.js ADDED
@@ -0,0 +1,46 @@
1
+ import React, { forwardRef, useEffect, useId, useImperativeHandle, useRef } from "react";
2
+ const ElementPositionDefault = 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 236 127",
29
+ fill: "none",
30
+ width: 236,
31
+ height: 127,
32
+ xmlns: "http://www.w3.org/2000/svg",
33
+ className: ["ElementPositionDefault-root", className].filter(Boolean).join(" "),
34
+ ...props
35
+ },
36
+ /* @__PURE__ */ React.createElement("defs", null, /* @__PURE__ */ React.createElement("linearGradient", { id: `${uid}-paint0_linear_4747_31154-4`, x1: "198.675", y1: "-77.3474", x2: "51.7215", y2: "309.676", gradientUnits: "userSpaceOnUse" }, /* @__PURE__ */ React.createElement("stop", { offset: "0.04", stopColor: "#FCFBF8" }), /* @__PURE__ */ React.createElement("stop", { offset: "0.91", stopColor: "#B8C4FF" })), /* @__PURE__ */ React.createElement("linearGradient", { id: `${uid}-paint1_linear_4747_31154-4`, x1: "54.5422", y1: "179.544", x2: "76.5043", y2: "199.053", gradientUnits: "userSpaceOnUse" }, /* @__PURE__ */ React.createElement("stop", { offset: "0", stopColor: "#EAEFFF" }), /* @__PURE__ */ React.createElement("stop", { offset: "0.325264", stopColor: "#B8C4FF" }), /* @__PURE__ */ React.createElement("stop", { offset: "1", stopColor: "#002294" })), /* @__PURE__ */ React.createElement("linearGradient", { id: `${uid}-paint2_linear_4747_31154-4`, x1: "38.7391", y1: "158.009", x2: "81.2707", y2: "204.612", gradientUnits: "userSpaceOnUse" }, /* @__PURE__ */ React.createElement("stop", { offset: "0", stopColor: "#EAEFFF" }), /* @__PURE__ */ React.createElement("stop", { offset: "0.5", stopColor: "#B8C4FF" }), /* @__PURE__ */ React.createElement("stop", { offset: "0.95", stopColor: "#002294" })), /* @__PURE__ */ React.createElement("linearGradient", { id: `${uid}-paint3_linear_4747_31154-4`, x1: "54.7931", y1: "162.363", x2: "38.1544", y2: "183.595", gradientUnits: "userSpaceOnUse" }, /* @__PURE__ */ React.createElement("stop", { offset: "0.176006", stopColor: "#EAEFFF" }), /* @__PURE__ */ React.createElement("stop", { offset: "0.576923", stopColor: "#B8C4FF" }), /* @__PURE__ */ React.createElement("stop", { offset: "0.85", stopColor: "#002294" })), /* @__PURE__ */ React.createElement("linearGradient", { id: `${uid}-paint4_linear_4747_31154-4`, x1: "76.168", y1: "28.0035", x2: "-100.144", y2: "92.0086", gradientUnits: "userSpaceOnUse" }, /* @__PURE__ */ React.createElement("stop", { offset: "0.176006", stopColor: "#EAEFFF" }), /* @__PURE__ */ React.createElement("stop", { offset: "0.576923", stopColor: "#D5DFFF" }), /* @__PURE__ */ React.createElement("stop", { offset: "0.85", stopColor: "#B8C4FF" })), /* @__PURE__ */ React.createElement("linearGradient", { id: `${uid}-paint5_linear_4747_31154-4`, x1: "110.992", y1: "-9.01811", x2: "-30.1361", y2: "209.074", gradientUnits: "userSpaceOnUse" }, /* @__PURE__ */ React.createElement("stop", { offset: "0.176006", stopColor: "#EAEFFF" }), /* @__PURE__ */ React.createElement("stop", { offset: "0.55", stopColor: "#B8C4FF" }), /* @__PURE__ */ React.createElement("stop", { offset: "0.8", stopColor: "#002294" })), /* @__PURE__ */ React.createElement("linearGradient", { id: `${uid}-paint6_linear_4747_31154-4`, x1: "174.992", y1: "-9.01811", x2: "33.8639", y2: "209.074", gradientUnits: "userSpaceOnUse" }, /* @__PURE__ */ React.createElement("stop", { offset: "0.176006", stopColor: "#EAEFFF" }), /* @__PURE__ */ React.createElement("stop", { offset: "0.55", stopColor: "#B8C4FF" }), /* @__PURE__ */ React.createElement("stop", { offset: "0.8", stopColor: "#002294" })), /* @__PURE__ */ React.createElement("linearGradient", { id: `${uid}-paint7_linear_4747_31154-4`, x1: "238.992", y1: "-9.01811", x2: "97.8639", y2: "209.074", gradientUnits: "userSpaceOnUse" }, /* @__PURE__ */ React.createElement("stop", { offset: "0.176006", stopColor: "#EAEFFF" }), /* @__PURE__ */ React.createElement("stop", { offset: "0.55", stopColor: "#B8C4FF" }), /* @__PURE__ */ React.createElement("stop", { offset: "0.8", stopColor: "#002294" })), /* @__PURE__ */ React.createElement("linearGradient", { id: `${uid}-paint8_linear_4747_31154-4`, x1: "156.276", y1: "21.2354", x2: "115.992", y2: "95.6105", gradientUnits: "userSpaceOnUse" }, /* @__PURE__ */ React.createElement("stop", { offset: "0.176006", stopColor: "#EAEFFF" }), /* @__PURE__ */ React.createElement("stop", { offset: "0.576923", stopColor: "#B8C4FF" }), /* @__PURE__ */ React.createElement("stop", { offset: "0.85", stopColor: "#002294" })), /* @__PURE__ */ React.createElement("filter", { id: `${uid}-filter0_f_4747_31154`, 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: "13.7813", result: "effect1_foregroundBlur_4747_31154" })), /* @__PURE__ */ React.createElement("filter", { id: `${uid}-filter1_f_4747_31154`, 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.935156", result: "effect1_foregroundBlur_4747_31154" })), /* @__PURE__ */ React.createElement("filter", { id: `${uid}-filter2_f_4747_31154`, 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: "9.17343", result: "effect1_foregroundBlur_4747_31154" })), /* @__PURE__ */ React.createElement("filter", { id: `${uid}-filter3_f_4747_31154`, 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.53814", result: "effect1_foregroundBlur_4747_31154" })), /* @__PURE__ */ React.createElement("clipPath", { id: `${uid}-cb-node-1-3`, clipPathUnits: "userSpaceOnUse" }, /* @__PURE__ */ React.createElement("rect", { x: "0", y: "0", width: "145", height: "211", rx: "6.89063" })), /* @__PURE__ */ React.createElement("clipPath", { id: `${uid}-cb-node-5-2`, clipPathUnits: "userSpaceOnUse" }, /* @__PURE__ */ React.createElement("rect", { x: "33", y: "163", width: "44", height: "39", rx: "3.40292" })), /* @__PURE__ */ React.createElement("clipPath", { id: `${uid}-cb-node-6-2`, clipPathUnits: "userSpaceOnUse" }, /* @__PURE__ */ React.createElement("rect", { x: "25.7822", y: "163", width: "57.7423", height: "38.7956", rx: "3.40292" })), /* @__PURE__ */ React.createElement("clipPath", { id: `${uid}-cb-node-8-2`, clipPathUnits: "userSpaceOnUse" }, /* @__PURE__ */ React.createElement("rect", { x: "38.1011", y: "168.102", width: "11.7771", height: "11.8626", rx: "5.88855" })), /* @__PURE__ */ React.createElement("clipPath", { id: `${uid}-cb-node-13-2`, clipPathUnits: "userSpaceOnUse" }, /* @__PURE__ */ React.createElement("rect", { x: "0", y: "-5", width: "150", height: "80", rx: "6" })), /* @__PURE__ */ React.createElement("clipPath", { id: `${uid}-cb-node-16-2`, clipPathUnits: "userSpaceOnUse" }, /* @__PURE__ */ React.createElement("rect", { x: "-21", y: "87.0234", width: "59.3003", height: "46.1224", rx: "4.39261" })), /* @__PURE__ */ React.createElement("clipPath", { id: `${uid}-cb-node-18-2`, clipPathUnits: "userSpaceOnUse" }, /* @__PURE__ */ React.createElement("rect", { x: "42.6929", y: "87.0234", width: "59.3003", height: "46.1224", rx: "4.39261" })), /* @__PURE__ */ React.createElement("clipPath", { id: `${uid}-cb-node-20-2`, clipPathUnits: "userSpaceOnUse" }, /* @__PURE__ */ React.createElement("rect", { x: "106.386", y: "87.0234", width: "59.3003", height: "46.1224", rx: "4.39261" })), /* @__PURE__ */ React.createElement("mask", { id: `${uid}-am-node-1-2`, maskUnits: "userSpaceOnUse", "mask-type": "alpha", x: "0", y: "0", width: "236", height: "127" }, /* @__PURE__ */ React.createElement("g", { id: `${uid}-am-node-1-2-artwork` }, /* @__PURE__ */ React.createElement("rect", { x: "45.5", y: "23", width: "145", height: "81", rx: "6", fill: "var(--color-3)" }))), /* @__PURE__ */ React.createElement("mask", { id: `${uid}-am-node-11-clip-2`, maskUnits: "userSpaceOnUse", "mask-type": "alpha", x: "0", y: "0", width: "236", height: "127" }, /* @__PURE__ */ React.createElement("path", { d: "M-2 71L148 71V6.89063C148 3.08504 144.915 0 141.109 0L4.89062 0C1.08503 0 -2 3.08504 -2 6.89063L-2 71Z", fill: "var(--color-4)" })), /* @__PURE__ */ React.createElement("mask", { id: `${uid}-am-node-22-clip-2`, maskUnits: "userSpaceOnUse", "mask-type": "alpha", x: "0", y: "0", width: "236", height: "127" }, /* @__PURE__ */ React.createElement("path", { d: "M 78.30155 42 L 66.69865 42.000001 A 2.17555 2.17555 89.999997 0 0 64.5231 44.175551 L 64.523101 55.778451 A 2.17555 2.17555 89.999997 0 0 66.698651 57.954001 L 78.301551 57.954 A 2.17555 2.17555 89.999997 0 0 80.477101 55.77845 L 80.4771 44.17555 A 2.17555 2.17555 89.999997 0 0 78.30155 42 Z", fill: "var(--color-4)" }))),
37
+ /* @__PURE__ */ React.createElement("use", { href: `#${uid}-am-node-1-2-artwork` }),
38
+ /* @__PURE__ */ React.createElement("g", { mask: `url(#${uid}-am-node-1-2)` }, /* @__PURE__ */ React.createElement("g", { className: "ElementPositionDefault-import-mvny2ub3-b" }, /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { fill: "none", clipPath: `url(#${uid}-cb-node-1-3)` }, /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("rect", { x: "-0.219727", y: "0.101562", width: "147", height: "211.591", rx: "6.89063", fill: "var(--color-5)" })), /* @__PURE__ */ React.createElement("g", { fill: "none", filter: `url(#${uid}-filter0_f_4747_31154)` }, /* @__PURE__ */ React.createElement("rect", { x: "-18.5842", y: "-12.8047", width: "203.967", height: "283.943", fill: `url(#${uid}-paint0_linear_4747_31154-4)` })), /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("path", { d: "M-8 211L152 211V159.891C152 156.085 148.915 153 145.109 153L-1.10938 153C-4.91497 153 -8 156.085 -8 159.891L-8 211Z", fill: "var(--color-2)" }), /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { fill: "none", clipPath: `url(#${uid}-cb-node-5-2)` }, /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { fill: "none", clipPath: `url(#${uid}-cb-node-6-2)` }, /* @__PURE__ */ React.createElement("rect", { x: "25.7822", y: "163", width: "57.7423", height: "38.7956", rx: "3.40292", fill: "var(--color-6)" }))), /* @__PURE__ */ React.createElement("path", { d: "M63.4548 171.484L46.8694 195.22L76.4497 191.316L63.4548 171.484Z", fill: `url(#${uid}-paint1_linear_4747_31154-4)` }), /* @__PURE__ */ React.createElement("path", { d: "M93.2608 179.959C93.2608 179.959 70.5203 171.714 69.4112 171.296C68.3022 170.878 61.4207 168.945 63.4552 174.518C65.4768 180.056 66.5845 182.185 67.025 183.131C67.4656 184.076 69.2592 187.929 64.7465 189.351C59.6311 190.962 32.0435 198.611 32.0435 198.611V203.004H93.2608V179.959Z", fill: `url(#${uid}-paint2_linear_4747_31154-4)` }), /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { fill: "none", clipPath: `url(#${uid}-cb-node-8-2)` }, /* @__PURE__ */ React.createElement("rect", { x: "38.1011", y: "168.102", width: "11.7771", height: "11.8626", rx: "5.88855", fill: "var(--color-1)" }), /* @__PURE__ */ React.createElement("g", { fill: "none", filter: `url(#${uid}-filter1_f_4747_31154)` }, /* @__PURE__ */ React.createElement("path", { d: "M46.0588 160.799C45.5396 160.902 45.027 161.046 44.5278 161.229C42.4775 161.988 40.6602 163.433 39.462 165.467C36.7228 170.112 38.2472 176.062 42.8669 178.756C47.4866 181.449 53.451 179.864 56.1903 175.22C58.9295 170.572 57.4051 164.622 52.7887 161.931C50.6785 160.699 48.2921 160.363 46.0588 160.799Z", fill: `url(#${uid}-paint3_linear_4747_31154-4)` })))))), /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("rect", { x: "87", y: "177", width: "24", height: "2", rx: "1", fill: "var(--color-1)" }), /* @__PURE__ */ React.createElement("rect", { x: "87", y: "186", width: "13", height: "2", rx: "1", fill: "var(--color-1)" })))), /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { mask: `url(#${uid}-am-node-11-clip-2)` }, /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("path", { d: "M-2 71L148 71V6.89063C148 3.08504 144.915 0 141.109 0L4.89062 0C1.08503 0 -2 3.08504 -2 6.89063L-2 71Z", fill: "var(--color-1)" }), /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { fill: "none", clipPath: `url(#${uid}-cb-node-13-2)` }, /* @__PURE__ */ React.createElement("rect", { x: "0", y: "-5", width: "150", height: "80", rx: "6", fill: "var(--color-1)" }), /* @__PURE__ */ React.createElement("g", { fill: "none", filter: `url(#${uid}-filter2_f_4747_31154)` }, /* @__PURE__ */ React.createElement("path", { d: "M 311.983 75.0391 L 311.983004 -13.7168 L 0.000004 -13.716814 L 0 75.039086 Z", fill: `url(#${uid}-paint4_linear_4747_31154-4)` }))))))), /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("rect", { x: "30.4717", y: "23.2734", width: "84.0566", height: "2", rx: "1", fill: "var(--color-1)" }), /* @__PURE__ */ React.createElement("rect", { x: "49.5732", y: "32.2734", width: "45.8491", height: "2", rx: "1", fill: "var(--color-1)" }))), /* @__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(#${uid}-cb-node-16-2)` }, /* @__PURE__ */ React.createElement("rect", { x: "-21", y: "87.0234", width: "59.3003", height: "46.1224", rx: "4.39261", fill: "var(--color-1)" }), /* @__PURE__ */ React.createElement("rect", { x: "-71.522", y: "-24.7812", width: "212.677", height: "175.615", fill: `url(#${uid}-paint5_linear_4747_31154-4)` })))), /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { fill: "none", clipPath: `url(#${uid}-cb-node-18-2)` }, /* @__PURE__ */ React.createElement("rect", { x: "42.6929", y: "87.0234", width: "59.3003", height: "46.1224", rx: "4.39261", fill: "var(--color-1)" }), /* @__PURE__ */ React.createElement("rect", { x: "-7.52197", y: "-24.7812", width: "212.677", height: "175.615", fill: `url(#${uid}-paint6_linear_4747_31154-4)` })))), /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { fill: "none", clipPath: `url(#${uid}-cb-node-20-2)` }, /* @__PURE__ */ React.createElement("rect", { x: "106.386", y: "87.0234", width: "59.3003", height: "46.1224", rx: "4.39261", fill: "var(--color-1)" }), /* @__PURE__ */ React.createElement("rect", { x: "56.478", y: "-24.7812", width: "212.677", height: "175.615", fill: `url(#${uid}-paint7_linear_4747_31154-4)` }))))), /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { mask: `url(#${uid}-am-node-22-clip-2)` }, /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("path", { d: "M 78.30155 42 L 66.69865 42.000001 A 2.17555 2.17555 89.999997 0 0 64.5231 44.175551 L 64.523101 55.778451 A 2.17555 2.17555 89.999997 0 0 66.698651 57.954001 L 78.301551 57.954 A 2.17555 2.17555 89.999997 0 0 80.477101 55.77845 L 80.4771 44.17555 A 2.17555 2.17555 89.999997 0 0 78.30155 42 Z", fill: "var(--color-1)" }), /* @__PURE__ */ React.createElement("g", { fill: "none", filter: `url(#${uid}-filter3_f_4747_31154)` }, /* @__PURE__ */ React.createElement("path", { d: "M165.323 57.9531L165.323 15.1673L64.523 15.1673L64.523 57.9531L165.323 57.9531Z", fill: `url(#${uid}-paint8_linear_4747_31154-4)` })), /* @__PURE__ */ React.createElement("path", { d: "M69.5991 44.8984C70.8176 44.8985 71.8869 45.5312 72.4992 46.4855C73.1115 45.5309 74.1818 44.8984 75.4006 44.8984H77.0323C77.3326 44.8985 77.5762 45.142 77.5762 45.4423V47.074C77.5762 48.2929 76.9431 49.3625 75.9884 49.9747C76.9431 50.587 77.5761 51.6567 77.5762 52.8755V54.5071C77.5762 54.8075 77.3326 55.051 77.0323 55.051H75.4006C74.1815 55.051 73.1114 54.4182 72.4992 53.4633C71.8869 54.4178 70.8179 55.0509 69.5991 55.051H67.9675C67.6671 55.051 67.4236 54.8075 67.4236 54.5071V52.8755C67.4237 51.6568 68.0561 50.587 69.0106 49.9747C68.0561 49.3624 67.4236 48.2927 67.4236 47.074V45.4423C67.4236 45.1419 67.6671 44.8984 67.9675 44.8984H69.5991Z", fill: "var(--color-2)" }))))))))),
39
+ /* @__PURE__ */ React.createElement("g", { style: { "transformBox": "fill-box", "transformOrigin": "50% 50%", "transform": "translate(194px, 33px)" } }, /* @__PURE__ */ React.createElement("path", { d: "M4 58.125C4 59.1605 3.10468 60 2.00025 60C0.895815 60 0.000495434 59.1605 0.000495434 58.125L0.000495434 1.875C0.000495434 0.839466 0.895815 0 2.00025 0C3.10468 0 4 0.839466 4 1.875L4 58.125Z", fill: "var(--color-2)" }), /* @__PURE__ */ React.createElement("g", { className: "ElementPositionDefault-node-2" }, /* @__PURE__ */ React.createElement("path", { d: "M2 8.48438L2 17.4572", fill: "none", stroke: "var(--color-1)", strokeWidth: "4", strokeLinecap: "round" })))
40
+ );
41
+ }
42
+ );
43
+ ElementPositionDefault.displayName = "ElementPositionDefault";
44
+ export {
45
+ ElementPositionDefault
46
+ };
package/dist/esm/animated/ElementPositionPinned.js ADDED
@@ -0,0 +1,47 @@
1
+ import React, { forwardRef, useEffect, useId, useImperativeHandle, useRef } from "react";
2
+ const ElementPositionPinned = 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 236 127",
29
+ fill: "none",
30
+ width: 236,
31
+ height: 127,
32
+ xmlns: "http://www.w3.org/2000/svg",
33
+ className: ["ElementPositionPinned-root", className].filter(Boolean).join(" "),
34
+ ...props
35
+ },
36
+ /* @__PURE__ */ React.createElement("defs", null, /* @__PURE__ */ React.createElement("linearGradient", { id: `${uid}-paint0_linear_4747_31154-4`, x1: "198.675", y1: "-77.3474", x2: "51.7215", y2: "309.676", gradientUnits: "userSpaceOnUse" }, /* @__PURE__ */ React.createElement("stop", { offset: "0.04", stopColor: "#FCFBF8" }), /* @__PURE__ */ React.createElement("stop", { offset: "0.91", stopColor: "#B8C4FF" })), /* @__PURE__ */ React.createElement("linearGradient", { id: `${uid}-paint1_linear_4747_31154-4`, x1: "54.5422", y1: "179.544", x2: "76.5043", y2: "199.053", gradientUnits: "userSpaceOnUse" }, /* @__PURE__ */ React.createElement("stop", { offset: "0", stopColor: "#EAEFFF" }), /* @__PURE__ */ React.createElement("stop", { offset: "0.325264", stopColor: "#B8C4FF" }), /* @__PURE__ */ React.createElement("stop", { offset: "1", stopColor: "#002294" })), /* @__PURE__ */ React.createElement("linearGradient", { id: `${uid}-paint2_linear_4747_31154-4`, x1: "38.7391", y1: "158.009", x2: "81.2707", y2: "204.612", gradientUnits: "userSpaceOnUse" }, /* @__PURE__ */ React.createElement("stop", { offset: "0", stopColor: "#EAEFFF" }), /* @__PURE__ */ React.createElement("stop", { offset: "0.5", stopColor: "#B8C4FF" }), /* @__PURE__ */ React.createElement("stop", { offset: "0.95", stopColor: "#002294" })), /* @__PURE__ */ React.createElement("linearGradient", { id: `${uid}-paint3_linear_4747_31154-4`, x1: "54.7931", y1: "162.363", x2: "38.1544", y2: "183.595", gradientUnits: "userSpaceOnUse" }, /* @__PURE__ */ React.createElement("stop", { offset: "0.176006", stopColor: "#EAEFFF" }), /* @__PURE__ */ React.createElement("stop", { offset: "0.576923", stopColor: "#B8C4FF" }), /* @__PURE__ */ React.createElement("stop", { offset: "0.85", stopColor: "#002294" })), /* @__PURE__ */ React.createElement("linearGradient", { id: `${uid}-paint4_linear_4747_31154-4`, x1: "76.168", y1: "28.0035", x2: "-100.144", y2: "92.0086", gradientUnits: "userSpaceOnUse" }, /* @__PURE__ */ React.createElement("stop", { offset: "0.176006", stopColor: "#EAEFFF" }), /* @__PURE__ */ React.createElement("stop", { offset: "0.576923", stopColor: "#D5DFFF" }), /* @__PURE__ */ React.createElement("stop", { offset: "0.85", stopColor: "#B8C4FF" })), /* @__PURE__ */ React.createElement("linearGradient", { id: `${uid}-paint5_linear_4747_31154-4`, x1: "110.992", y1: "-9.01811", x2: "-30.1361", y2: "209.074", gradientUnits: "userSpaceOnUse" }, /* @__PURE__ */ React.createElement("stop", { offset: "0.176006", stopColor: "#EAEFFF" }), /* @__PURE__ */ React.createElement("stop", { offset: "0.55", stopColor: "#B8C4FF" }), /* @__PURE__ */ React.createElement("stop", { offset: "0.8", stopColor: "#002294" })), /* @__PURE__ */ React.createElement("linearGradient", { id: `${uid}-paint6_linear_4747_31154-4`, x1: "174.992", y1: "-9.01811", x2: "33.8639", y2: "209.074", gradientUnits: "userSpaceOnUse" }, /* @__PURE__ */ React.createElement("stop", { offset: "0.176006", stopColor: "#EAEFFF" }), /* @__PURE__ */ React.createElement("stop", { offset: "0.55", stopColor: "#B8C4FF" }), /* @__PURE__ */ React.createElement("stop", { offset: "0.8", stopColor: "#002294" })), /* @__PURE__ */ React.createElement("linearGradient", { id: `${uid}-paint7_linear_4747_31154-4`, x1: "238.992", y1: "-9.01811", x2: "97.8639", y2: "209.074", gradientUnits: "userSpaceOnUse" }, /* @__PURE__ */ React.createElement("stop", { offset: "0.176006", stopColor: "#EAEFFF" }), /* @__PURE__ */ React.createElement("stop", { offset: "0.55", stopColor: "#B8C4FF" }), /* @__PURE__ */ React.createElement("stop", { offset: "0.8", stopColor: "#002294" })), /* @__PURE__ */ React.createElement("linearGradient", { id: `${uid}-paint8_linear_4747_31154-4`, x1: "156.276", y1: "21.2354", x2: "115.992", y2: "95.6105", gradientUnits: "userSpaceOnUse" }, /* @__PURE__ */ React.createElement("stop", { offset: "0.176006", stopColor: "#EAEFFF" }), /* @__PURE__ */ React.createElement("stop", { offset: "0.576923", stopColor: "#B8C4FF" }), /* @__PURE__ */ React.createElement("stop", { offset: "0.85", stopColor: "#002294" })), /* @__PURE__ */ React.createElement("filter", { id: `${uid}-filter0_f_4747_31154`, 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: "13.7813", result: "effect1_foregroundBlur_4747_31154" })), /* @__PURE__ */ React.createElement("filter", { id: `${uid}-filter1_f_4747_31154`, 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.935156", result: "effect1_foregroundBlur_4747_31154" })), /* @__PURE__ */ React.createElement("filter", { id: `${uid}-filter2_f_4747_31154`, 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: "9.17343", result: "effect1_foregroundBlur_4747_31154" })), /* @__PURE__ */ React.createElement("filter", { id: `${uid}-filter3_f_4747_31154`, 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.53814", result: "effect1_foregroundBlur_4747_31154" })), /* @__PURE__ */ React.createElement("clipPath", { id: `${uid}-cb-node-1-3`, clipPathUnits: "userSpaceOnUse" }, /* @__PURE__ */ React.createElement("rect", { x: "0", y: "0", width: "145", height: "211", rx: "6.89063" })), /* @__PURE__ */ React.createElement("clipPath", { id: `${uid}-cb-node-5-2`, clipPathUnits: "userSpaceOnUse" }, /* @__PURE__ */ React.createElement("rect", { x: "33", y: "163", width: "44", height: "39", rx: "3.40292" })), /* @__PURE__ */ React.createElement("clipPath", { id: `${uid}-cb-node-6-2`, clipPathUnits: "userSpaceOnUse" }, /* @__PURE__ */ React.createElement("rect", { x: "25.7822", y: "163", width: "57.7423", height: "38.7956", rx: "3.40292" })), /* @__PURE__ */ React.createElement("clipPath", { id: `${uid}-cb-node-8-2`, clipPathUnits: "userSpaceOnUse" }, /* @__PURE__ */ React.createElement("rect", { x: "38.1011", y: "168.102", width: "11.7771", height: "11.8626", rx: "5.88855" })), /* @__PURE__ */ React.createElement("clipPath", { id: `${uid}-cb-node-13-2`, clipPathUnits: "userSpaceOnUse" }, /* @__PURE__ */ React.createElement("rect", { x: "0", y: "-5", width: "150", height: "80", rx: "6" })), /* @__PURE__ */ React.createElement("clipPath", { id: `${uid}-cb-node-16-2`, clipPathUnits: "userSpaceOnUse" }, /* @__PURE__ */ React.createElement("rect", { x: "-21", y: "87.0234", width: "59.3003", height: "46.1224", rx: "4.39261" })), /* @__PURE__ */ React.createElement("clipPath", { id: `${uid}-cb-node-18-2`, clipPathUnits: "userSpaceOnUse" }, /* @__PURE__ */ React.createElement("rect", { x: "42.6929", y: "87.0234", width: "59.3003", height: "46.1224", rx: "4.39261" })), /* @__PURE__ */ React.createElement("clipPath", { id: `${uid}-cb-node-20-2`, clipPathUnits: "userSpaceOnUse" }, /* @__PURE__ */ React.createElement("rect", { x: "106.386", y: "87.0234", width: "59.3003", height: "46.1224", rx: "4.39261" })), /* @__PURE__ */ React.createElement("mask", { id: `${uid}-am-node-1-2`, maskUnits: "userSpaceOnUse", "mask-type": "alpha", x: "0", y: "0", width: "236", height: "127" }, /* @__PURE__ */ React.createElement("g", { id: `${uid}-am-node-1-2-artwork` }, /* @__PURE__ */ React.createElement("rect", { x: "45.5", y: "23", width: "145", height: "81", rx: "6", fill: "var(--color-3)" }))), /* @__PURE__ */ React.createElement("mask", { id: `${uid}-am-node-11-clip-2`, maskUnits: "userSpaceOnUse", "mask-type": "alpha", x: "0", y: "0", width: "236", height: "127" }, /* @__PURE__ */ React.createElement("path", { d: "M-2 71L148 71V6.89063C148 3.08504 144.915 0 141.109 0L4.89062 0C1.08503 0 -2 3.08504 -2 6.89063L-2 71Z", fill: "var(--color-4)" })), /* @__PURE__ */ React.createElement("mask", { id: `${uid}-am-node-22-clip-2`, maskUnits: "userSpaceOnUse", "mask-type": "alpha", x: "0", y: "0", width: "236", height: "127" }, /* @__PURE__ */ React.createElement("path", { d: "M 78.30155 42 L 66.69865 42.000001 A 2.17555 2.17555 89.999997 0 0 64.5231 44.175551 L 64.523101 55.778451 A 2.17555 2.17555 89.999997 0 0 66.698651 57.954001 L 78.301551 57.954 A 2.17555 2.17555 89.999997 0 0 80.477101 55.77845 L 80.4771 44.17555 A 2.17555 2.17555 89.999997 0 0 78.30155 42 Z", fill: "var(--color-4)" }))),
37
+ /* @__PURE__ */ React.createElement("use", { href: `#${uid}-am-node-1-2-artwork` }),
38
+ /* @__PURE__ */ React.createElement("g", { mask: `url(#${uid}-am-node-1-2)` }, /* @__PURE__ */ React.createElement("g", { className: "ElementPositionPinned-import-mvny2ub3-b" }, /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { fill: "none", clipPath: `url(#${uid}-cb-node-1-3)` }, /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("rect", { x: "-0.219727", y: "0.101562", width: "147", height: "211.591", rx: "6.89063", fill: "var(--color-5)" })), /* @__PURE__ */ React.createElement("g", { fill: "none", filter: `url(#${uid}-filter0_f_4747_31154)` }, /* @__PURE__ */ React.createElement("rect", { x: "-18.5842", y: "-12.8047", width: "203.967", height: "283.943", fill: `url(#${uid}-paint0_linear_4747_31154-4)` })), /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("path", { d: "M-8 211L152 211V159.891C152 156.085 148.915 153 145.109 153L-1.10938 153C-4.91497 153 -8 156.085 -8 159.891L-8 211Z", fill: "var(--color-2)" }), /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { fill: "none", clipPath: `url(#${uid}-cb-node-5-2)` }, /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { fill: "none", clipPath: `url(#${uid}-cb-node-6-2)` }, /* @__PURE__ */ React.createElement("rect", { x: "25.7822", y: "163", width: "57.7423", height: "38.7956", rx: "3.40292", fill: "var(--color-6)" }))), /* @__PURE__ */ React.createElement("path", { d: "M63.4548 171.484L46.8694 195.22L76.4497 191.316L63.4548 171.484Z", fill: `url(#${uid}-paint1_linear_4747_31154-4)` }), /* @__PURE__ */ React.createElement("path", { d: "M93.2608 179.959C93.2608 179.959 70.5203 171.714 69.4112 171.296C68.3022 170.878 61.4207 168.945 63.4552 174.518C65.4768 180.056 66.5845 182.185 67.025 183.131C67.4656 184.076 69.2592 187.929 64.7465 189.351C59.6311 190.962 32.0435 198.611 32.0435 198.611V203.004H93.2608V179.959Z", fill: `url(#${uid}-paint2_linear_4747_31154-4)` }), /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { fill: "none", clipPath: `url(#${uid}-cb-node-8-2)` }, /* @__PURE__ */ React.createElement("rect", { x: "38.1011", y: "168.102", width: "11.7771", height: "11.8626", rx: "5.88855", fill: "var(--color-1)" }), /* @__PURE__ */ React.createElement("g", { fill: "none", filter: `url(#${uid}-filter1_f_4747_31154)` }, /* @__PURE__ */ React.createElement("path", { d: "M46.0588 160.799C45.5396 160.902 45.027 161.046 44.5278 161.229C42.4775 161.988 40.6602 163.433 39.462 165.467C36.7228 170.112 38.2472 176.062 42.8669 178.756C47.4866 181.449 53.451 179.864 56.1903 175.22C58.9295 170.572 57.4051 164.622 52.7887 161.931C50.6785 160.699 48.2921 160.363 46.0588 160.799Z", fill: `url(#${uid}-paint3_linear_4747_31154-4)` })))))), /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("rect", { x: "87", y: "177", width: "24", height: "2", rx: "1", fill: "var(--color-1)" }), /* @__PURE__ */ React.createElement("rect", { x: "87", y: "186", width: "13", height: "2", rx: "1", fill: "var(--color-1)" })))), /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { mask: `url(#${uid}-am-node-11-clip-2)` }, /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("path", { d: "M-2 71L148 71V6.89063C148 3.08504 144.915 0 141.109 0L4.89062 0C1.08503 0 -2 3.08504 -2 6.89063L-2 71Z", fill: "var(--color-1)" }), /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { fill: "none", clipPath: `url(#${uid}-cb-node-13-2)` }, /* @__PURE__ */ React.createElement("rect", { x: "0", y: "-5", width: "150", height: "80", rx: "6", fill: "var(--color-1)" }), /* @__PURE__ */ React.createElement("g", { fill: "none", filter: `url(#${uid}-filter2_f_4747_31154)` }, /* @__PURE__ */ React.createElement("path", { d: "M 311.983 75.0391 L 311.983004 -13.7168 L 0.000004 -13.716814 L 0 75.039086 Z", fill: `url(#${uid}-paint4_linear_4747_31154-4)` }))))))), /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("rect", { x: "30.4717", y: "23.2734", width: "84.0566", height: "2", rx: "1", fill: "var(--color-1)" }), /* @__PURE__ */ React.createElement("rect", { x: "49.5732", y: "32.2734", width: "45.8491", height: "2", rx: "1", fill: "var(--color-1)" }))), /* @__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(#${uid}-cb-node-16-2)` }, /* @__PURE__ */ React.createElement("rect", { x: "-21", y: "87.0234", width: "59.3003", height: "46.1224", rx: "4.39261", fill: "var(--color-1)" }), /* @__PURE__ */ React.createElement("rect", { x: "-71.522", y: "-24.7812", width: "212.677", height: "175.615", fill: `url(#${uid}-paint5_linear_4747_31154-4)` })))), /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { fill: "none", clipPath: `url(#${uid}-cb-node-18-2)` }, /* @__PURE__ */ React.createElement("rect", { x: "42.6929", y: "87.0234", width: "59.3003", height: "46.1224", rx: "4.39261", fill: "var(--color-1)" }), /* @__PURE__ */ React.createElement("rect", { x: "-7.52197", y: "-24.7812", width: "212.677", height: "175.615", fill: `url(#${uid}-paint6_linear_4747_31154-4)` })))), /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { fill: "none", clipPath: `url(#${uid}-cb-node-20-2)` }, /* @__PURE__ */ React.createElement("rect", { x: "106.386", y: "87.0234", width: "59.3003", height: "46.1224", rx: "4.39261", fill: "var(--color-1)" }), /* @__PURE__ */ React.createElement("rect", { x: "56.478", y: "-24.7812", width: "212.677", height: "175.615", fill: `url(#${uid}-paint7_linear_4747_31154-4)` })))))))))),
39
+ /* @__PURE__ */ React.createElement("g", { style: { "transformBox": "fill-box", "transformOrigin": "50% 50%", "transform": "translate(104px, 40px)" }, fill: "none" }, /* @__PURE__ */ React.createElement("g", { mask: `url(#${uid}-am-node-22-clip-2)` }, /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("path", { d: "M 78.30155 42 L 66.69865 42.000001 A 2.17555 2.17555 89.999997 0 0 64.5231 44.175551 L 64.523101 55.778451 A 2.17555 2.17555 89.999997 0 0 66.698651 57.954001 L 78.301551 57.954 A 2.17555 2.17555 89.999997 0 0 80.477101 55.77845 L 80.4771 44.17555 A 2.17555 2.17555 89.999997 0 0 78.30155 42 Z", fill: "var(--color-1)" }), /* @__PURE__ */ React.createElement("g", { fill: "none", filter: `url(#${uid}-filter3_f_4747_31154)` }, /* @__PURE__ */ React.createElement("path", { d: "M165.323 57.9531L165.323 15.1673L64.523 15.1673L64.523 57.9531L165.323 57.9531Z", fill: `url(#${uid}-paint8_linear_4747_31154-4)` })), /* @__PURE__ */ React.createElement("path", { d: "M69.5991 44.8984C70.8176 44.8985 71.8869 45.5312 72.4992 46.4855C73.1115 45.5309 74.1818 44.8984 75.4006 44.8984H77.0323C77.3326 44.8985 77.5762 45.142 77.5762 45.4423V47.074C77.5762 48.2929 76.9431 49.3625 75.9884 49.9747C76.9431 50.587 77.5761 51.6567 77.5762 52.8755V54.5071C77.5762 54.8075 77.3326 55.051 77.0323 55.051H75.4006C74.1815 55.051 73.1114 54.4182 72.4992 53.4633C71.8869 54.4178 70.8179 55.0509 69.5991 55.051H67.9675C67.6671 55.051 67.4236 54.8075 67.4236 54.5071V52.8755C67.4237 51.6568 68.0561 50.587 69.0106 49.9747C68.0561 49.3624 67.4236 48.2927 67.4236 47.074V45.4423C67.4236 45.1419 67.6671 44.8984 67.9675 44.8984H69.5991Z", fill: "var(--color-2)" })))),
40
+ /* @__PURE__ */ React.createElement("g", { style: { "transformBox": "fill-box", "transformOrigin": "50% 50%", "transform": "translate(194px, 33px)" } }, /* @__PURE__ */ React.createElement("path", { d: "M4 58.125C4 59.1605 3.10468 60 2.00025 60C0.895815 60 0.000495434 59.1605 0.000495434 58.125L0.000495434 1.875C0.000495434 0.839466 0.895815 0 2.00025 0C3.10468 0 4 0.839466 4 1.875L4 58.125Z", fill: "var(--color-2)" }), /* @__PURE__ */ React.createElement("g", { className: "ElementPositionPinned-node-2" }, /* @__PURE__ */ React.createElement("path", { d: "M2 8.48438L2 17.4572", fill: "none", stroke: "var(--color-1)", strokeWidth: "4", strokeLinecap: "round" })))
41
+ );
42
+ }
43
+ );
44
+ ElementPositionPinned.displayName = "ElementPositionPinned";
45
+ export {
46
+ ElementPositionPinned
47
+ };
package/dist/esm/animated/ElementPositionSticky.js ADDED
@@ -0,0 +1,47 @@
1
+ import React, { forwardRef, useEffect, useId, useImperativeHandle, useRef } from "react";
2
+ const ElementPositionSticky = 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 236 127",
29
+ fill: "none",
30
+ width: 236,
31
+ height: 127,
32
+ xmlns: "http://www.w3.org/2000/svg",
33
+ className: ["ElementPositionSticky-root", className].filter(Boolean).join(" "),
34
+ ...props
35
+ },
36
+ /* @__PURE__ */ React.createElement("defs", null, /* @__PURE__ */ React.createElement("linearGradient", { id: `${uid}-paint0_linear_4747_31154-4`, x1: "198.675", y1: "-77.3474", x2: "51.7215", y2: "309.676", gradientUnits: "userSpaceOnUse" }, /* @__PURE__ */ React.createElement("stop", { offset: "0.04", stopColor: "#FCFBF8" }), /* @__PURE__ */ React.createElement("stop", { offset: "0.91", stopColor: "#B8C4FF" })), /* @__PURE__ */ React.createElement("linearGradient", { id: `${uid}-paint1_linear_4747_31154-4`, x1: "54.5422", y1: "179.544", x2: "76.5043", y2: "199.053", gradientUnits: "userSpaceOnUse" }, /* @__PURE__ */ React.createElement("stop", { offset: "0", stopColor: "#EAEFFF" }), /* @__PURE__ */ React.createElement("stop", { offset: "0.325264", stopColor: "#B8C4FF" }), /* @__PURE__ */ React.createElement("stop", { offset: "1", stopColor: "#002294" })), /* @__PURE__ */ React.createElement("linearGradient", { id: `${uid}-paint2_linear_4747_31154-4`, x1: "38.7391", y1: "158.009", x2: "81.2707", y2: "204.612", gradientUnits: "userSpaceOnUse" }, /* @__PURE__ */ React.createElement("stop", { offset: "0", stopColor: "#EAEFFF" }), /* @__PURE__ */ React.createElement("stop", { offset: "0.5", stopColor: "#B8C4FF" }), /* @__PURE__ */ React.createElement("stop", { offset: "0.95", stopColor: "#002294" })), /* @__PURE__ */ React.createElement("linearGradient", { id: `${uid}-paint3_linear_4747_31154-4`, x1: "54.7931", y1: "162.363", x2: "38.1544", y2: "183.595", gradientUnits: "userSpaceOnUse" }, /* @__PURE__ */ React.createElement("stop", { offset: "0.176006", stopColor: "#EAEFFF" }), /* @__PURE__ */ React.createElement("stop", { offset: "0.576923", stopColor: "#B8C4FF" }), /* @__PURE__ */ React.createElement("stop", { offset: "0.85", stopColor: "#002294" })), /* @__PURE__ */ React.createElement("linearGradient", { id: `${uid}-paint4_linear_4747_31154-4`, x1: "76.168", y1: "28.0035", x2: "-100.144", y2: "92.0086", gradientUnits: "userSpaceOnUse" }, /* @__PURE__ */ React.createElement("stop", { offset: "0.176006", stopColor: "#EAEFFF" }), /* @__PURE__ */ React.createElement("stop", { offset: "0.576923", stopColor: "#D5DFFF" }), /* @__PURE__ */ React.createElement("stop", { offset: "0.85", stopColor: "#B8C4FF" })), /* @__PURE__ */ React.createElement("linearGradient", { id: `${uid}-paint5_linear_4747_31154-4`, x1: "110.992", y1: "-9.01811", x2: "-30.1361", y2: "209.074", gradientUnits: "userSpaceOnUse" }, /* @__PURE__ */ React.createElement("stop", { offset: "0.176006", stopColor: "#EAEFFF" }), /* @__PURE__ */ React.createElement("stop", { offset: "0.55", stopColor: "#B8C4FF" }), /* @__PURE__ */ React.createElement("stop", { offset: "0.8", stopColor: "#002294" })), /* @__PURE__ */ React.createElement("linearGradient", { id: `${uid}-paint6_linear_4747_31154-4`, x1: "174.992", y1: "-9.01811", x2: "33.8639", y2: "209.074", gradientUnits: "userSpaceOnUse" }, /* @__PURE__ */ React.createElement("stop", { offset: "0.176006", stopColor: "#EAEFFF" }), /* @__PURE__ */ React.createElement("stop", { offset: "0.55", stopColor: "#B8C4FF" }), /* @__PURE__ */ React.createElement("stop", { offset: "0.8", stopColor: "#002294" })), /* @__PURE__ */ React.createElement("linearGradient", { id: `${uid}-paint7_linear_4747_31154-4`, x1: "238.992", y1: "-9.01811", x2: "97.8639", y2: "209.074", gradientUnits: "userSpaceOnUse" }, /* @__PURE__ */ React.createElement("stop", { offset: "0.176006", stopColor: "#EAEFFF" }), /* @__PURE__ */ React.createElement("stop", { offset: "0.55", stopColor: "#B8C4FF" }), /* @__PURE__ */ React.createElement("stop", { offset: "0.8", stopColor: "#002294" })), /* @__PURE__ */ React.createElement("linearGradient", { id: `${uid}-paint8_linear_4747_31154-4`, x1: "156.276", y1: "21.2354", x2: "115.992", y2: "95.6105", gradientUnits: "userSpaceOnUse" }, /* @__PURE__ */ React.createElement("stop", { offset: "0.176006", stopColor: "#EAEFFF" }), /* @__PURE__ */ React.createElement("stop", { offset: "0.576923", stopColor: "#B8C4FF" }), /* @__PURE__ */ React.createElement("stop", { offset: "0.85", stopColor: "#002294" })), /* @__PURE__ */ React.createElement("filter", { id: `${uid}-filter0_f_4747_31154`, 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: "13.7813", result: "effect1_foregroundBlur_4747_31154" })), /* @__PURE__ */ React.createElement("filter", { id: `${uid}-filter1_f_4747_31154`, 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.935156", result: "effect1_foregroundBlur_4747_31154" })), /* @__PURE__ */ React.createElement("filter", { id: `${uid}-filter2_f_4747_31154`, 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: "9.17343", result: "effect1_foregroundBlur_4747_31154" })), /* @__PURE__ */ React.createElement("filter", { id: `${uid}-filter3_f_4747_31154`, 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.53814", result: "effect1_foregroundBlur_4747_31154" })), /* @__PURE__ */ React.createElement("clipPath", { id: `${uid}-cb-node-1-3`, clipPathUnits: "userSpaceOnUse" }, /* @__PURE__ */ React.createElement("rect", { x: "0", y: "0", width: "145", height: "211", rx: "6.89063" })), /* @__PURE__ */ React.createElement("clipPath", { id: `${uid}-cb-node-5-2`, clipPathUnits: "userSpaceOnUse" }, /* @__PURE__ */ React.createElement("rect", { x: "33", y: "163", width: "44", height: "39", rx: "3.40292" })), /* @__PURE__ */ React.createElement("clipPath", { id: `${uid}-cb-node-6-2`, clipPathUnits: "userSpaceOnUse" }, /* @__PURE__ */ React.createElement("rect", { x: "25.7822", y: "163", width: "57.7423", height: "38.7956", rx: "3.40292" })), /* @__PURE__ */ React.createElement("clipPath", { id: `${uid}-cb-node-8-2`, clipPathUnits: "userSpaceOnUse" }, /* @__PURE__ */ React.createElement("rect", { x: "38.1011", y: "168.102", width: "11.7771", height: "11.8626", rx: "5.88855" })), /* @__PURE__ */ React.createElement("clipPath", { id: `${uid}-cb-node-13-2`, clipPathUnits: "userSpaceOnUse" }, /* @__PURE__ */ React.createElement("rect", { x: "0", y: "-5", width: "150", height: "80", rx: "6" })), /* @__PURE__ */ React.createElement("clipPath", { id: `${uid}-cb-node-16-2`, clipPathUnits: "userSpaceOnUse" }, /* @__PURE__ */ React.createElement("rect", { x: "-21", y: "87.0234", width: "59.3003", height: "46.1224", rx: "4.39261" })), /* @__PURE__ */ React.createElement("clipPath", { id: `${uid}-cb-node-18-2`, clipPathUnits: "userSpaceOnUse" }, /* @__PURE__ */ React.createElement("rect", { x: "42.6929", y: "87.0234", width: "59.3003", height: "46.1224", rx: "4.39261" })), /* @__PURE__ */ React.createElement("clipPath", { id: `${uid}-cb-node-20-2`, clipPathUnits: "userSpaceOnUse" }, /* @__PURE__ */ React.createElement("rect", { x: "106.386", y: "87.0234", width: "59.3003", height: "46.1224", rx: "4.39261" })), /* @__PURE__ */ React.createElement("mask", { id: `${uid}-am-node-1-2`, maskUnits: "userSpaceOnUse", "mask-type": "alpha", x: "0", y: "0", width: "236", height: "127" }, /* @__PURE__ */ React.createElement("g", { id: `${uid}-am-node-1-2-artwork` }, /* @__PURE__ */ React.createElement("rect", { x: "45.5", y: "23", width: "145", height: "81", rx: "6", fill: "var(--color-3)" }))), /* @__PURE__ */ React.createElement("mask", { id: `${uid}-am-node-11-clip-2`, maskUnits: "userSpaceOnUse", "mask-type": "alpha", x: "0", y: "0", width: "236", height: "127" }, /* @__PURE__ */ React.createElement("path", { d: "M-2 71L148 71V6.89063C148 3.08504 144.915 0 141.109 0L4.89062 0C1.08503 0 -2 3.08504 -2 6.89063L-2 71Z", fill: "var(--color-4)" })), /* @__PURE__ */ React.createElement("mask", { id: `${uid}-am-node-22-clip-2-2`, maskUnits: "userSpaceOnUse", "mask-type": "alpha", x: "0", y: "0", width: "236", height: "127" }, /* @__PURE__ */ React.createElement("path", { d: "M 78.30155 42 L 66.69865 42.000001 A 2.17555 2.17555 89.999997 0 0 64.5231 44.175551 L 64.523101 55.778451 A 2.17555 2.17555 89.999997 0 0 66.698651 57.954001 L 78.301551 57.954 A 2.17555 2.17555 89.999997 0 0 80.477101 55.77845 L 80.4771 44.17555 A 2.17555 2.17555 89.999997 0 0 78.30155 42 Z", fill: "var(--color-4)" })), /* @__PURE__ */ React.createElement("mask", { id: `${uid}-am-node-22-clip-2-3`, maskUnits: "userSpaceOnUse", "mask-type": "alpha", x: "0", y: "0", width: "236", height: "127" }, /* @__PURE__ */ React.createElement("path", { d: "M 78.30155 42 L 66.69865 42.000001 A 2.17555 2.17555 89.999997 0 0 64.5231 44.175551 L 64.523101 55.778451 A 2.17555 2.17555 89.999997 0 0 66.698651 57.954001 L 78.301551 57.954 A 2.17555 2.17555 89.999997 0 0 80.477101 55.77845 L 80.4771 44.17555 A 2.17555 2.17555 89.999997 0 0 78.30155 42 Z", fill: "var(--color-4)" })), /* @__PURE__ */ React.createElement("mask", { id: `${uid}-am-node-22-clip-2`, maskUnits: "userSpaceOnUse", "mask-type": "alpha", x: "0", y: "0", width: "236", height: "127" }, /* @__PURE__ */ React.createElement("path", { d: "M 78.30155 42 L 66.69865 42.000001 A 2.17555 2.17555 89.999997 0 0 64.5231 44.175551 L 64.523101 55.778451 A 2.17555 2.17555 89.999997 0 0 66.698651 57.954001 L 78.301551 57.954 A 2.17555 2.17555 89.999997 0 0 80.477101 55.77845 L 80.4771 44.17555 A 2.17555 2.17555 89.999997 0 0 78.30155 42 Z", fill: "var(--color-4)" }))),
37
+ /* @__PURE__ */ React.createElement("use", { href: `#${uid}-am-node-1-2-artwork` }),
38
+ /* @__PURE__ */ React.createElement("g", { mask: `url(#${uid}-am-node-1-2)` }, /* @__PURE__ */ React.createElement("g", { className: "ElementPositionSticky-import-mvny2ub3-b" }, /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { fill: "none", clipPath: `url(#${uid}-cb-node-1-3)` }, /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("rect", { x: "-0.219727", y: "0.101562", width: "147", height: "211.591", rx: "6.89063", fill: "var(--color-5)" })), /* @__PURE__ */ React.createElement("g", { fill: "none", filter: `url(#${uid}-filter0_f_4747_31154)` }, /* @__PURE__ */ React.createElement("rect", { x: "-18.5842", y: "-12.8047", width: "203.967", height: "283.943", fill: `url(#${uid}-paint0_linear_4747_31154-4)` })), /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("path", { d: "M-8 211L152 211V159.891C152 156.085 148.915 153 145.109 153L-1.10938 153C-4.91497 153 -8 156.085 -8 159.891L-8 211Z", fill: "var(--color-2)" }), /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { fill: "none", clipPath: `url(#${uid}-cb-node-5-2)` }, /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { fill: "none", clipPath: `url(#${uid}-cb-node-6-2)` }, /* @__PURE__ */ React.createElement("rect", { x: "25.7822", y: "163", width: "57.7423", height: "38.7956", rx: "3.40292", fill: "var(--color-6)" }))), /* @__PURE__ */ React.createElement("path", { d: "M63.4548 171.484L46.8694 195.22L76.4497 191.316L63.4548 171.484Z", fill: `url(#${uid}-paint1_linear_4747_31154-4)` }), /* @__PURE__ */ React.createElement("path", { d: "M93.2608 179.959C93.2608 179.959 70.5203 171.714 69.4112 171.296C68.3022 170.878 61.4207 168.945 63.4552 174.518C65.4768 180.056 66.5845 182.185 67.025 183.131C67.4656 184.076 69.2592 187.929 64.7465 189.351C59.6311 190.962 32.0435 198.611 32.0435 198.611V203.004H93.2608V179.959Z", fill: `url(#${uid}-paint2_linear_4747_31154-4)` }), /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { fill: "none", clipPath: `url(#${uid}-cb-node-8-2)` }, /* @__PURE__ */ React.createElement("rect", { x: "38.1011", y: "168.102", width: "11.7771", height: "11.8626", rx: "5.88855", fill: "var(--color-1)" }), /* @__PURE__ */ React.createElement("g", { fill: "none", filter: `url(#${uid}-filter1_f_4747_31154)` }, /* @__PURE__ */ React.createElement("path", { d: "M46.0588 160.799C45.5396 160.902 45.027 161.046 44.5278 161.229C42.4775 161.988 40.6602 163.433 39.462 165.467C36.7228 170.112 38.2472 176.062 42.8669 178.756C47.4866 181.449 53.451 179.864 56.1903 175.22C58.9295 170.572 57.4051 164.622 52.7887 161.931C50.6785 160.699 48.2921 160.363 46.0588 160.799Z", fill: `url(#${uid}-paint3_linear_4747_31154-4)` })))))), /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("rect", { x: "87", y: "177", width: "24", height: "2", rx: "1", fill: "var(--color-1)" }), /* @__PURE__ */ React.createElement("rect", { x: "87", y: "186", width: "13", height: "2", rx: "1", fill: "var(--color-1)" })))), /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { mask: `url(#${uid}-am-node-11-clip-2)` }, /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("path", { d: "M-2 71L148 71V6.89063C148 3.08504 144.915 0 141.109 0L4.89062 0C1.08503 0 -2 3.08504 -2 6.89063L-2 71Z", fill: "var(--color-1)" }), /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { fill: "none", clipPath: `url(#${uid}-cb-node-13-2)` }, /* @__PURE__ */ React.createElement("rect", { x: "0", y: "-5", width: "150", height: "80", rx: "6", fill: "var(--color-1)" }), /* @__PURE__ */ React.createElement("g", { fill: "none", filter: `url(#${uid}-filter2_f_4747_31154)` }, /* @__PURE__ */ React.createElement("path", { d: "M 311.983 75.0391 L 311.983004 -13.7168 L 0.000004 -13.716814 L 0 75.039086 Z", fill: `url(#${uid}-paint4_linear_4747_31154-4)` }))))))), /* @__PURE__ */ React.createElement("g", { style: { "transformBox": "fill-box", "transformOrigin": "50% 50%", "transform": "translate(0px, 0px)" }, fill: "none" }, /* @__PURE__ */ React.createElement("g", { style: { "transformOrigin": "72.500002px 28.773399px", "transform": "translate(-1px, 15px)" }, fill: "none" }, /* @__PURE__ */ React.createElement("rect", { x: "30.4717", y: "23.2734", width: "84.0566", height: "2", rx: "1", fill: "var(--color-1)" }), /* @__PURE__ */ React.createElement("rect", { x: "49.5732", y: "32.2734", width: "45.8491", height: "2", rx: "1", fill: "var(--color-1)" }))), /* @__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(#${uid}-cb-node-16-2)` }, /* @__PURE__ */ React.createElement("rect", { x: "-21", y: "87.0234", width: "59.3003", height: "46.1224", rx: "4.39261", fill: "var(--color-1)" }), /* @__PURE__ */ React.createElement("rect", { x: "-71.522", y: "-24.7812", width: "212.677", height: "175.615", fill: `url(#${uid}-paint5_linear_4747_31154-4)` })))), /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { fill: "none", clipPath: `url(#${uid}-cb-node-18-2)` }, /* @__PURE__ */ React.createElement("rect", { x: "42.6929", y: "87.0234", width: "59.3003", height: "46.1224", rx: "4.39261", fill: "var(--color-1)" }), /* @__PURE__ */ React.createElement("rect", { x: "-7.52197", y: "-24.7812", width: "212.677", height: "175.615", fill: `url(#${uid}-paint6_linear_4747_31154-4)` })))), /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { fill: "none", clipPath: `url(#${uid}-cb-node-20-2)` }, /* @__PURE__ */ React.createElement("rect", { x: "106.386", y: "87.0234", width: "59.3003", height: "46.1224", rx: "4.39261", fill: "var(--color-1)" }), /* @__PURE__ */ React.createElement("rect", { x: "56.478", y: "-24.7812", width: "212.677", height: "175.615", fill: `url(#${uid}-paint7_linear_4747_31154-4)` })))))))), /* @__PURE__ */ React.createElement("g", { fill: "none", className: "ElementPositionSticky-Icon-Container-2-2" }, /* @__PURE__ */ React.createElement("g", { mask: `url(#${uid}-am-node-22-clip-2-2)` }, /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("path", { d: "M 78.30155 42 L 66.69865 42.000001 A 2.17555 2.17555 89.999997 0 0 64.5231 44.175551 L 64.523101 55.778451 A 2.17555 2.17555 89.999997 0 0 66.698651 57.954001 L 78.301551 57.954 A 2.17555 2.17555 89.999997 0 0 80.477101 55.77845 L 80.4771 44.17555 A 2.17555 2.17555 89.999997 0 0 78.30155 42 Z", fill: "var(--color-1)" }), /* @__PURE__ */ React.createElement("g", { fill: "none", filter: `url(#${uid}-filter3_f_4747_31154)` }, /* @__PURE__ */ React.createElement("path", { d: "M165.323 57.9531L165.323 15.1673L64.523 15.1673L64.523 57.9531L165.323 57.9531Z", fill: `url(#${uid}-paint8_linear_4747_31154-4)` })), /* @__PURE__ */ React.createElement("path", { d: "M69.5991 44.8984C70.8176 44.8985 71.8869 45.5312 72.4992 46.4855C73.1115 45.5309 74.1818 44.8984 75.4006 44.8984H77.0323C77.3326 44.8985 77.5762 45.142 77.5762 45.4423V47.074C77.5762 48.2929 76.9431 49.3625 75.9884 49.9747C76.9431 50.587 77.5761 51.6567 77.5762 52.8755V54.5071C77.5762 54.8075 77.3326 55.051 77.0323 55.051H75.4006C74.1815 55.051 73.1114 54.4182 72.4992 53.4633C71.8869 54.4178 70.8179 55.0509 69.5991 55.051H67.9675C67.6671 55.051 67.4236 54.8075 67.4236 54.5071V52.8755C67.4237 51.6568 68.0561 50.587 69.0106 49.9747C68.0561 49.3624 67.4236 48.2927 67.4236 47.074V45.4423C67.4236 45.1419 67.6671 44.8984 67.9675 44.8984H69.5991Z", fill: "var(--color-2)" })))), /* @__PURE__ */ React.createElement("g", { style: { "transformOrigin": "114.923px 36.560651px", "transform": "translate(1px, -28px)" }, fill: "none", className: "ElementPositionSticky-Icon-Container-2-3" }, /* @__PURE__ */ React.createElement("g", { mask: `url(#${uid}-am-node-22-clip-2-3)` }, /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("path", { d: "M 78.30155 42 L 66.69865 42.000001 A 2.17555 2.17555 89.999997 0 0 64.5231 44.175551 L 64.523101 55.778451 A 2.17555 2.17555 89.999997 0 0 66.698651 57.954001 L 78.301551 57.954 A 2.17555 2.17555 89.999997 0 0 80.477101 55.77845 L 80.4771 44.17555 A 2.17555 2.17555 89.999997 0 0 78.30155 42 Z", fill: "var(--color-1)" }), /* @__PURE__ */ React.createElement("g", { fill: "none", filter: `url(#${uid}-filter3_f_4747_31154)` }, /* @__PURE__ */ React.createElement("path", { d: "M165.323 57.9531L165.323 15.1673L64.523 15.1673L64.523 57.9531L165.323 57.9531Z", fill: `url(#${uid}-paint8_linear_4747_31154-4)` })), /* @__PURE__ */ React.createElement("path", { d: "M69.5991 44.8984C70.8176 44.8985 71.8869 45.5312 72.4992 46.4855C73.1115 45.5309 74.1818 44.8984 75.4006 44.8984H77.0323C77.3326 44.8985 77.5762 45.142 77.5762 45.4423V47.074C77.5762 48.2929 76.9431 49.3625 75.9884 49.9747C76.9431 50.587 77.5761 51.6567 77.5762 52.8755V54.5071C77.5762 54.8075 77.3326 55.051 77.0323 55.051H75.4006C74.1815 55.051 73.1114 54.4182 72.4992 53.4633C71.8869 54.4178 70.8179 55.0509 69.5991 55.051H67.9675C67.6671 55.051 67.4236 54.8075 67.4236 54.5071V52.8755C67.4237 51.6568 68.0561 50.587 69.0106 49.9747C68.0561 49.3624 67.4236 48.2927 67.4236 47.074V45.4423C67.4236 45.1419 67.6671 44.8984 67.9675 44.8984H69.5991Z", fill: "var(--color-2)" })))))),
39
+ /* @__PURE__ */ React.createElement("g", { fill: "none", className: "ElementPositionSticky-Icon-Container-2" }, /* @__PURE__ */ React.createElement("g", { mask: `url(#${uid}-am-node-22-clip-2)` }, /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("path", { d: "M 78.30155 42 L 66.69865 42.000001 A 2.17555 2.17555 89.999997 0 0 64.5231 44.175551 L 64.523101 55.778451 A 2.17555 2.17555 89.999997 0 0 66.698651 57.954001 L 78.301551 57.954 A 2.17555 2.17555 89.999997 0 0 80.477101 55.77845 L 80.4771 44.17555 A 2.17555 2.17555 89.999997 0 0 78.30155 42 Z", fill: "var(--color-1)" }), /* @__PURE__ */ React.createElement("g", { fill: "none", filter: `url(#${uid}-filter3_f_4747_31154)` }, /* @__PURE__ */ React.createElement("path", { d: "M165.323 57.9531L165.323 15.1673L64.523 15.1673L64.523 57.9531L165.323 57.9531Z", fill: `url(#${uid}-paint8_linear_4747_31154-4)` })), /* @__PURE__ */ React.createElement("path", { d: "M69.5991 44.8984C70.8176 44.8985 71.8869 45.5312 72.4992 46.4855C73.1115 45.5309 74.1818 44.8984 75.4006 44.8984H77.0323C77.3326 44.8985 77.5762 45.142 77.5762 45.4423V47.074C77.5762 48.2929 76.9431 49.3625 75.9884 49.9747C76.9431 50.587 77.5761 51.6567 77.5762 52.8755V54.5071C77.5762 54.8075 77.3326 55.051 77.0323 55.051H75.4006C74.1815 55.051 73.1114 54.4182 72.4992 53.4633C71.8869 54.4178 70.8179 55.0509 69.5991 55.051H67.9675C67.6671 55.051 67.4236 54.8075 67.4236 54.5071V52.8755C67.4237 51.6568 68.0561 50.587 69.0106 49.9747C68.0561 49.3624 67.4236 48.2927 67.4236 47.074V45.4423C67.4236 45.1419 67.6671 44.8984 67.9675 44.8984H69.5991Z", fill: "var(--color-2)" })))),
40
+ /* @__PURE__ */ React.createElement("g", { style: { "transformBox": "fill-box", "transformOrigin": "50% 50%", "transform": "translate(194px, 33px)" } }, /* @__PURE__ */ React.createElement("path", { d: "M4 58.125C4 59.1605 3.10468 60 2.00025 60C0.895815 60 0.000495434 59.1605 0.000495434 58.125L0.000495434 1.875C0.000495434 0.839466 0.895815 0 2.00025 0C3.10468 0 4 0.839466 4 1.875L4 58.125Z", fill: "var(--color-2)" }), /* @__PURE__ */ React.createElement("g", { className: "ElementPositionSticky-node-2" }, /* @__PURE__ */ React.createElement("path", { d: "M2 8.48438L2 17.4572", fill: "none", stroke: "var(--color-1)", strokeWidth: "4", strokeLinecap: "round" })))
41
+ );
42
+ }
43
+ );
44
+ ElementPositionSticky.displayName = "ElementPositionSticky";
45
+ export {
46
+ ElementPositionSticky
47
+ };
package/dist/esm/animated/ResponsiveBehaviorHeaderDisappear.js ADDED
@@ -0,0 +1,46 @@
1
+ import React, { forwardRef, useEffect, useId, useImperativeHandle, useRef } from "react";
2
+ const ResponsiveBehaviorHeaderDisappear = 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 236 127",
29
+ fill: "none",
30
+ width: 236,
31
+ height: 127,
32
+ xmlns: "http://www.w3.org/2000/svg",
33
+ className: ["ResponsiveBehaviorHeaderDisappear-root", className].filter(Boolean).join(" "),
34
+ ...props
35
+ },
36
+ /* @__PURE__ */ React.createElement("defs", null, /* @__PURE__ */ React.createElement("linearGradient", { id: `${uid}-paint0_linear_4371_16309`, x1: "178.227", y1: "-83.0937", x2: "-110.087", y2: "145.731", gradientUnits: "userSpaceOnUse" }, /* @__PURE__ */ React.createElement("stop", { offset: "0.176006", stopColor: "#EAEFFF" }), /* @__PURE__ */ React.createElement("stop", { offset: "0.576923", stopColor: "#B8C4FF" }), /* @__PURE__ */ React.createElement("stop", { offset: "0.85", stopColor: "#002294" })), /* @__PURE__ */ React.createElement("linearGradient", { id: `${uid}-paint1_linear_4371_16309`, x1: "95.39", y1: "44.9158", x2: "123.428", y2: "69.4849", gradientUnits: "userSpaceOnUse" }, /* @__PURE__ */ React.createElement("stop", { offset: "0", stopColor: "#EAEFFF" }), /* @__PURE__ */ React.createElement("stop", { offset: "0.325264", stopColor: "#B8C4FF" }), /* @__PURE__ */ React.createElement("stop", { offset: "1", stopColor: "#002294" })), /* @__PURE__ */ React.createElement("linearGradient", { id: `${uid}-paint2_linear_4371_16309`, x1: "75.4543", y1: "17.3794", x2: "129.908", y2: "76.2359", gradientUnits: "userSpaceOnUse" }, /* @__PURE__ */ React.createElement("stop", { offset: "0", stopColor: "#EAEFFF" }), /* @__PURE__ */ React.createElement("stop", { offset: "0.5", stopColor: "#B8C4FF" }), /* @__PURE__ */ React.createElement("stop", { offset: "0.95", stopColor: "#002294" })), /* @__PURE__ */ React.createElement("linearGradient", { id: `${uid}-paint3_linear_4371_16309`, x1: "100.35", y1: "24.3133", x2: "83.4414", y2: "45.8896", gradientUnits: "userSpaceOnUse" }, /* @__PURE__ */ React.createElement("stop", { offset: "0.176006", stopColor: "#EAEFFF" }), /* @__PURE__ */ React.createElement("stop", { offset: "0.576923", stopColor: "#B8C4FF" }), /* @__PURE__ */ React.createElement("stop", { offset: "0.85", stopColor: "#002294" })), /* @__PURE__ */ React.createElement("linearGradient", { id: `${uid}-paint4_linear_4371_16309`, x1: "138.978", y1: "-27.1478", x2: "-8.29128", y2: "171.419", gradientUnits: "userSpaceOnUse" }, /* @__PURE__ */ React.createElement("stop", { offset: "0.176006", stopColor: "#EAEFFF" }), /* @__PURE__ */ React.createElement("stop", { offset: "0.576923", stopColor: "#B8C4FF" }), /* @__PURE__ */ React.createElement("stop", { offset: "0.85", stopColor: "#002294" })), /* @__PURE__ */ React.createElement("linearGradient", { id: `${uid}-paint5_linear_4371_16309`, x1: "162.389", y1: "1.90174", x2: "39.2589", y2: "153.375", gradientUnits: "userSpaceOnUse" }, /* @__PURE__ */ React.createElement("stop", { offset: "0.176006", stopColor: "#EAEFFF" }), /* @__PURE__ */ React.createElement("stop", { offset: "0.576923", stopColor: "#B8C4FF" }), /* @__PURE__ */ React.createElement("stop", { offset: "0.85", stopColor: "#002294" })), /* @__PURE__ */ React.createElement("linearGradient", { id: `${uid}-paint6_linear_4371_16309`, x1: "212.458", y1: "17.0772", x2: "103.741", y2: "151.031", gradientUnits: "userSpaceOnUse" }, /* @__PURE__ */ React.createElement("stop", { offset: "0.176006", stopColor: "#EAEFFF" }), /* @__PURE__ */ React.createElement("stop", { offset: "0.576923", stopColor: "#B8C4FF" }), /* @__PURE__ */ React.createElement("stop", { offset: "0.85", stopColor: "#002294" })), /* @__PURE__ */ React.createElement("linearGradient", { id: `${uid}-paint7_linear_4371_16309`, x1: "307.169", y1: "-61.1983", x2: "66.9405", y2: "309.011", gradientUnits: "userSpaceOnUse" }, /* @__PURE__ */ React.createElement("stop", { offset: "0.176006", stopColor: "#EAEFFF" }), /* @__PURE__ */ React.createElement("stop", { offset: "0.576923", stopColor: "#B8C4FF" }), /* @__PURE__ */ React.createElement("stop", { offset: "0.85", stopColor: "#002294" })), /* @__PURE__ */ React.createElement("linearGradient", { id: `${uid}-paint8_linear_4371_16309`, x1: "141.161", y1: "135.036", x2: "91.0452", y2: "223.425", gradientUnits: "userSpaceOnUse" }, /* @__PURE__ */ React.createElement("stop", { offset: "0.176006", stopColor: "#EAEFFF" }), /* @__PURE__ */ React.createElement("stop", { offset: "0.576923", stopColor: "#B8C4FF" }), /* @__PURE__ */ React.createElement("stop", { offset: "0.85", stopColor: "#002294" })), /* @__PURE__ */ React.createElement("filter", { id: `${uid}-filter0_f_4371_16309`, 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: "13.7813", result: "effect1_foregroundBlur_4371_16309" })), /* @__PURE__ */ React.createElement("filter", { id: `${uid}-filter1_f_4371_16309`, 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.71335", result: "effect1_foregroundBlur_4371_16309" })), /* @__PURE__ */ React.createElement("filter", { id: `${uid}-filter2_f_4371_16309`, 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: "11.2456", result: "effect1_foregroundBlur_4371_16309" })), /* @__PURE__ */ React.createElement("filter", { id: `${uid}-filter3_f_4371_16309`, 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: "11.2456", result: "effect1_foregroundBlur_4371_16309" })), /* @__PURE__ */ React.createElement("filter", { id: `${uid}-filter4_f_4371_16309`, 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: "11.2456", result: "effect1_foregroundBlur_4371_16309" })), /* @__PURE__ */ React.createElement("filter", { id: `${uid}-filter5_f_4371_16309`, 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: "13.7813", result: "effect1_foregroundBlur_4371_16309" })), /* @__PURE__ */ React.createElement("filter", { id: `${uid}-filter6_f_4371_16309`, 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: "4.07281", result: "effect1_foregroundBlur_4371_16309" })), /* @__PURE__ */ React.createElement("clipPath", { id: `${uid}-clip0_4371_16309` }, /* @__PURE__ */ React.createElement("rect", { width: "147", height: "210.525", fill: "white" })), /* @__PURE__ */ React.createElement("clipPath", { id: `${uid}-clip1_4371_16309` }, /* @__PURE__ */ React.createElement("rect", { width: "147", height: "231.984", fill: "white" })), /* @__PURE__ */ React.createElement("clipPath", { id: `${uid}-clip2_4371_16309` }, /* @__PURE__ */ React.createElement("rect", { x: "76.7969", y: "24.7422", width: "52.7113", height: "46.1224", rx: "6.58892", fill: "white" })), /* @__PURE__ */ React.createElement("clipPath", { id: `${uid}-clip3_4371_16309` }, /* @__PURE__ */ React.createElement("rect", { width: "175.704", height: "76.8707", fill: "white", transform: "translate(52.6367 11.5625)" })), /* @__PURE__ */ React.createElement("clipPath", { id: `${uid}-clip4_4371_16309` }, /* @__PURE__ */ React.createElement("rect", { x: "83.3867", y: "31.3281", width: "10.9815", height: "10.9815", rx: "5.49077", fill: "white" })), /* @__PURE__ */ React.createElement("clipPath", { id: `${uid}-clip5_4371_16309` }, /* @__PURE__ */ React.createElement("rect", { x: "-19.8438", y: "85.8984", width: "59.3003", height: "46.1224", rx: "4.39261", fill: "white" })), /* @__PURE__ */ React.createElement("clipPath", { id: `${uid}-clip6_4371_16309` }, /* @__PURE__ */ React.createElement("rect", { x: "43.8477", y: "85.8984", width: "59.3003", height: "46.1224", rx: "4.39261", fill: "white" })), /* @__PURE__ */ React.createElement("clipPath", { id: `${uid}-clip7_4371_16309` }, /* @__PURE__ */ React.createElement("rect", { x: "107.543", y: "85.8984", width: "59.3003", height: "46.1224", rx: "4.39261", fill: "white" })), /* @__PURE__ */ React.createElement("clipPath", { id: `${uid}-clip8_4371_16309` }, /* @__PURE__ */ React.createElement("rect", { width: "146.703", height: "57.4219", fill: "white", transform: "translate(0.167969 153.172)" })), /* @__PURE__ */ React.createElement("clipPath", { id: `${uid}-clip9_4371_16309` }, /* @__PURE__ */ React.createElement("rect", { x: "63.1367", y: "187.57", width: "20.7258", height: "7.65129", rx: "3.82565", fill: "white" })), /* @__PURE__ */ React.createElement("mask", { id: `${uid}-mask0_3075_31420`, style: { "maskType": "luminance" }, maskUnits: "userSpaceOnUse", x: "-1", y: "0", width: "149", height: "20" }, /* @__PURE__ */ React.createElement("rect", { x: "147.257", y: "19.4897", width: "147.514", height: "19.4897", transform: "rotate(-180 147.257 19.4897)", fill: "url(#paint0_linear_3075_31420)" })), /* @__PURE__ */ React.createElement("mask", { id: `${uid}-am-node-1-2-2`, maskUnits: "userSpaceOnUse", "mask-type": "alpha", x: "0", y: "0", width: "236", height: "127" }, /* @__PURE__ */ React.createElement("rect", { style: { "transformBox": "fill-box", "transformOrigin": "50% 50%", "transform": "translate(82.5px, 41.6px) scale(1, 1)" }, x: "-41.5", y: "-18.5", width: "147", height: "81", rx: "6", ry: "6", fill: "var(--color-4)", opacity: "1" })), /* @__PURE__ */ React.createElement("mask", { id: `${uid}-am-node-1-2-2-2`, maskUnits: "userSpaceOnUse", "mask-type": "alpha", x: "0", y: "0", width: "236", height: "127" }, /* @__PURE__ */ React.createElement("rect", { style: { "transformBox": "fill-box", "transformOrigin": "50% 50%", "transform": "translate(82.5px, 41.5px) scale(1, 1)" }, x: "-41.5", y: "-18.5", width: "147", height: "81", rx: "6", ry: "6", fill: "var(--color-4)", opacity: "1" }))),
37
+ /* @__PURE__ */ React.createElement("g", { mask: `url(#${uid}-am-node-1-2-2)` }, /* @__PURE__ */ React.createElement("g", { className: "ResponsiveBehaviorHeaderDisappear-import-msvsnwyw-7" }, /* @__PURE__ */ React.createElement("g", { fill: "none", clipPath: `url(#${uid}-clip0_4371_16309)` }, /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("rect", { x: "-0.21875", y: "0.101562", width: "147", height: "211.591", rx: "0", ry: "0", fill: "var(--color-3)" })), /* @__PURE__ */ React.createElement("g", { fill: "none", opacity: "0.5", clipPath: `url(#${uid}-clip1_4371_16309)` }, /* @__PURE__ */ React.createElement("rect", { x: "0", y: "0", width: "147", height: "231.984", fill: "var(--color-1)" }), /* @__PURE__ */ React.createElement("g", { fill: "none", filter: `url(#${uid}-filter0_f_4371_16309)` }, /* @__PURE__ */ React.createElement("rect", { x: "-1.14453", y: "-113.258", width: "209.016", height: "336.055", fill: `url(#${uid}-paint0_linear_4371_16309)` }))), /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { fill: "none", clipPath: `url(#${uid}-clip2_4371_16309)` }, /* @__PURE__ */ React.createElement("g", { fill: "none", clipPath: `url(#${uid}-clip3_4371_16309)` }, /* @__PURE__ */ React.createElement("rect", { x: "52.6367", y: "11.5625", width: "175.704", height: "76.8707", fill: "var(--color-1)" })), /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("path", { d: "M106.633 34.6094L85.7109 64.9634L123.026 59.9707L106.633 34.6094Z", fill: `url(#${uid}-paint1_linear_4371_16309)` }), /* @__PURE__ */ React.createElement("path", { d: "M162.428 52.6287C162.428 52.6287 115.546 34.9055 114.147 34.3712C112.748 33.837 104.067 31.3653 106.633 38.4918C109.184 45.5736 110.581 48.297 111.137 49.5063C111.692 50.7156 113.955 55.6428 108.262 57.461C101.809 59.5209 67.0078 69.3029 67.0078 69.3029V74.9207H162.428V52.6287Z", fill: `url(#${uid}-paint2_linear_4371_16309)` })), /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { fill: "none", clipPath: `url(#${uid}-clip4_4371_16309)` }, /* @__PURE__ */ React.createElement("rect", { x: "83.3867", y: "31.3281", width: "10.9815", height: "10.9815", rx: "5.49077", fill: "var(--color-1)" }), /* @__PURE__ */ React.createElement("g", { fill: "none", filter: `url(#${uid}-filter1_f_4371_16309)` }, /* @__PURE__ */ React.createElement("path", { d: "M91.474 22.724C90.9464 22.8289 90.4255 22.9744 89.9181 23.1605C87.8346 23.932 85.9879 25.4005 84.7702 27.4679C81.9866 32.188 83.5357 38.2345 88.2304 40.9718C92.925 43.7092 98.9862 42.0986 101.77 37.3784C104.553 32.6549 103.004 26.6084 98.3131 23.8745C96.1687 22.6225 93.7436 22.2808 91.474 22.724Z", fill: `url(#${uid}-paint3_linear_4371_16309)` })))))), /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("rect", { x: "17.4961", y: "37.9219", width: "50.515", height: "2.19631", rx: "1.09815", fill: "var(--color-1)" }), /* @__PURE__ */ React.createElement("rect", { x: "17.4961", y: "46.7031", width: "50.515", height: "2.19631", rx: "1.09815", fill: "var(--color-1)" }), /* @__PURE__ */ React.createElement("rect", { x: "17.4961", y: "55.4922", width: "26.3557", height: "2.19631", rx: "1.09815", fill: "var(--color-1)" }))), /* @__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(#${uid}-clip5_4371_16309)` }, /* @__PURE__ */ React.createElement("rect", { x: "-19.8438", y: "85.8984", width: "59.3003", height: "46.1224", rx: "4.39261", fill: "var(--color-1)" }), /* @__PURE__ */ React.createElement("g", { fill: "none", filter: `url(#${uid}-filter2_f_4371_16309)` }, /* @__PURE__ */ React.createElement("rect", { x: "-19.4297", y: "-42.8281", width: "184.587", height: "174.692", fill: `url(#${uid}-paint4_linear_4371_16309)` }))))), /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { fill: "none", clipPath: `url(#${uid}-clip6_4371_16309)` }, /* @__PURE__ */ React.createElement("rect", { x: "43.8477", y: "85.8984", width: "59.3003", height: "46.1224", rx: "4.39261", fill: "var(--color-1)" }), /* @__PURE__ */ React.createElement("g", { fill: "none", filter: `url(#${uid}-filter3_f_4371_16309)` }, /* @__PURE__ */ React.createElement("rect", { x: "44.2617", y: "-10.9141", width: "137.649", height: "142.779", fill: `url(#${uid}-paint5_linear_4371_16309)` }))))), /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { fill: "none", clipPath: `url(#${uid}-clip7_4371_16309)` }, /* @__PURE__ */ React.createElement("rect", { x: "107.543", y: "85.8984", width: "59.3003", height: "46.1224", rx: "4.39261", fill: "var(--color-1)" }), /* @__PURE__ */ React.createElement("g", { fill: "none", filter: `url(#${uid}-filter4_f_4371_16309)` }, /* @__PURE__ */ React.createElement("rect", { x: "107.961", y: "5.75781", width: "121.767", height: "126.107", fill: `url(#${uid}-paint6_linear_4371_16309)` })))))), /* @__PURE__ */ React.createElement("g", { style: { "transformBox": "fill-box", "transformOrigin": "50% 50%", "transform": "translate(-0.1px, 0px)" }, fill: "none", opacity: "0.5", clipPath: `url(#${uid}-clip8_4371_16309)` }, /* @__PURE__ */ React.createElement("rect", { x: "0.019469", y: "153.172", width: "147", height: "57.4219", fill: "var(--color-1)" }), /* @__PURE__ */ React.createElement("g", { fill: "none", filter: `url(#${uid}-filter5_f_4371_16309)` }, /* @__PURE__ */ React.createElement("rect", { x: "-2.29688", y: "-88", width: "360.609", height: "298.594", fill: `url(#${uid}-paint7_linear_4371_16309)` }))), /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("rect", { x: "41.3281", y: "168.547", width: "64.3447", height: "2.18608", rx: "1.09304", fill: "var(--color-1)" }), /* @__PURE__ */ React.createElement("rect", { x: "55.9531", y: "177.469", width: "35.0971", height: "2.18608", rx: "1.09304", fill: "var(--color-1)" })), /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { fill: "none", clipPath: `url(#${uid}-clip9_4371_16309)` }, /* @__PURE__ */ React.createElement("rect", { x: "63.1367", y: "187.57", width: "20.7258", height: "7.65129", rx: "3.82565", fill: "var(--color-1)" }), /* @__PURE__ */ React.createElement("g", { fill: "none", filter: `url(#${uid}-filter6_f_4371_16309)` }, /* @__PURE__ */ React.createElement("path", { d: "M62.5273 129.086H154.156V195.38H62.5273V129.086Z", fill: `url(#${uid}-paint8_linear_4371_16309)` })))))))),
38
+ /* @__PURE__ */ React.createElement("g", { style: { "transformBox": "fill-box", "transformOrigin": "50% 50%", "transform": "translate(190.8px, 33.5px)" } }, /* @__PURE__ */ React.createElement("path", { d: "M4 58.125C4 59.1605 3.10468 60 2.00025 60C0.895815 60 0.000495434 59.1605 0.000495434 58.125L0.000495434 1.875C0.000495434 0.839466 0.895815 0 2.00025 0C3.10468 0 4 0.839466 4 1.875L4 58.125Z", fill: "var(--color-2)" }), /* @__PURE__ */ React.createElement("g", { className: "ResponsiveBehaviorHeaderDisappear-node-2-3" }, /* @__PURE__ */ React.createElement("line", { x1: "2", y1: "8.48682", x2: "2", y2: "17.4596", fill: "none", stroke: "var(--color-1)", strokeWidth: "4", strokeLinecap: "round" }))),
39
+ /* @__PURE__ */ React.createElement("g", { mask: `url(#${uid}-am-node-1-2-2-2)` }, /* @__PURE__ */ React.createElement("g", null, /* @__PURE__ */ React.createElement("g", { style: { "transformBox": "fill-box", "transformOrigin": "50% 50%", "transform": "translate(41.25659px, 22.978997px)" } }, /* @__PURE__ */ React.createElement("g", { fill: "none", mask: `url(#${uid}-mask0_3075_31420)` })), /* @__PURE__ */ React.createElement("g", { style: { "transformOrigin": "114.708199px 30.9618px", "transform": "translate(-0.2px, 0px)" }, fill: "none", className: "ResponsiveBehaviorHeaderDisappear-Group-2147222209" }, /* @__PURE__ */ React.createElement("rect", { x: "41.0132", y: "22.979", width: "147.39", height: "15.9656", fill: "var(--color-1)" })), /* @__PURE__ */ React.createElement("g", { style: { "transformOrigin": "167.6769px 30.96348px", "transform": "translate(-0.2px, 0px)" }, className: "ResponsiveBehaviorHeaderDisappear-Rectangle-4723343" }, /* @__PURE__ */ React.createElement("rect", { x: "160.768", y: "29.812", width: "13.8178", height: "2.30296", rx: "1.15148", fill: "var(--color-2)" })), /* @__PURE__ */ React.createElement("g", { style: { "transformOrigin": "146.9499px 30.96348px", "transform": "translate(-0.2px, 0px)" }, className: "ResponsiveBehaviorHeaderDisappear-Rectangle-4723344" }, /* @__PURE__ */ React.createElement("rect", { x: "140.041", y: "29.812", width: "13.8178", height: "2.30296", rx: "1.15148", fill: "var(--color-2)" })), /* @__PURE__ */ React.createElement("g", { style: { "transformOrigin": "126.2229px 30.96348px", "transform": "translate(-0.2px, 0px)" }, className: "ResponsiveBehaviorHeaderDisappear-Rectangle-4723345_2" }, /* @__PURE__ */ React.createElement("rect", { x: "119.314", y: "29.812", width: "13.8178", height: "2.30296", rx: "1.15148", fill: "var(--color-2)" }))))
40
+ );
41
+ }
42
+ );
43
+ ResponsiveBehaviorHeaderDisappear.displayName = "ResponsiveBehaviorHeaderDisappear";
44
+ export {
45
+ ResponsiveBehaviorHeaderDisappear
46
+ };
package/dist/esm/animated/{ThumbnailFullWidthTransparent.js → StickySectionPresetsFullWidth.js} RENAMED
@@ -1,5 +1,5 @@
1
1
  import React, { forwardRef, useEffect, useId, useImperativeHandle, useRef } from "react";
2
- const ThumbnailFullWidthTransparent = forwardRef(
2
+ const StickySectionPresetsFullWidth = forwardRef(
3
3
  ({ className, ...props }, ref) => {
4
4
  const svgRef = useRef(null);
5
5
  const uid = useId().replace(/:/g, "");
@@ -30,15 +30,16 @@ const ThumbnailFullWidthTransparent = forwardRef(
30
30
  width: 68,
31
31
  height: 68,
32
32
  xmlns: "http://www.w3.org/2000/svg",
33
- className: ["ThumbnailFullWidthTransparent-root", className].filter(Boolean).join(" "),
33
+ className: ["StickySectionPresetsFullWidth-root", className].filter(Boolean).join(" "),
34
34
  ...props
35
35
  },
36
36
  /* @__PURE__ */ React.createElement("defs", null, /* @__PURE__ */ React.createElement("linearGradient", { id: `${uid}-paint0_linear_4428_19355`, x1: "77.0184", y1: "29.0713", x2: "37.9679", y2: "91.8439", gradientUnits: "userSpaceOnUse" }, /* @__PURE__ */ React.createElement("stop", { offset: "0.176006", stopColor: "#EAEFFF" }), /* @__PURE__ */ React.createElement("stop", { offset: "0.55", stopColor: "#B8C4FF" }), /* @__PURE__ */ React.createElement("stop", { offset: "0.8", stopColor: "#002294" })), /* @__PURE__ */ React.createElement("filter", { id: `${uid}-filter1_f_4428_19355`, filterUnits: "objectBoundingBox", x: "-1", y: "-1", width: "3", height: "3", colorInterpolationFilters: "sRGB" }, /* @__PURE__ */ React.createElement("feFlood", { result: "BackgroundImageFix", floodOpacity: "0" }), /* @__PURE__ */ React.createElement("feBlend", { mode: "normal", in: "SourceGraphic", in2: "BackgroundImageFix", result: "shape" }), /* @__PURE__ */ React.createElement("feGaussianBlur", { stdDeviation: "2.36111", result: "effect1_foregroundBlur_4428_19355" })), /* @__PURE__ */ React.createElement("clipPath", { id: `${uid}-clip0_4428_19355` }, /* @__PURE__ */ React.createElement("path", { d: "M0 7.55556C0 3.38274 3.38274 0 7.55556 0H60.4444C64.6173 0 68 3.38274 68 7.55556V60.4444C68 64.6173 64.6173 68 60.4444 68H7.55556C3.38274 68 0 64.6173 0 60.4444V7.55556Z", fill: "white" })), /* @__PURE__ */ React.createElement("clipPath", { id: `${uid}-clip1_4428_19355` }, /* @__PURE__ */ React.createElement("rect", { x: "55", y: "33", width: "22", height: "42", rx: "1.88889", transform: "rotate(90 55 33)", fill: "white" }))),
37
- /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { fill: "none", clipPath: `url(#${uid}-clip0_4428_19355)` }, /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { fill: "none", className: "ThumbnailFullWidthTransparent-Frame-1707483281" }, /* @__PURE__ */ React.createElement("path", { d: "M 55 14.88889 L 55 33.11111 A 1.88889 1.88889 45 0 1 53.11111 35 L 14.88889 35 A 1.88889 1.88889 45 0 1 13 33.11111 L 13 14.88889 A 1.88889 1.88889 45 0 1 14.88889 13 L 53.11111 13 A 1.88889 1.88889 45 0 1 55 14.88889 Z", fill: "var(--color-2)" })), /* @__PURE__ */ React.createElement("g", { fill: "none", className: "ThumbnailFullWidthTransparent-Frame-1707483278" }, /* @__PURE__ */ React.createElement("path", { d: "M 55 24.88889 L 55 43.11111 A 1.88889 1.88889 45 0 1 53.11111 45 L 14.88889 45 A 1.88889 1.88889 45 0 1 13 43.11111 L 13 24.88889 A 1.88889 1.88889 45 0 1 14.88889 23 L 53.11111 23 A 1.88889 1.88889 45 0 1 55 24.88889 Z", fill: "var(--color-3)" })), /* @__PURE__ */ React.createElement("g", { fill: "none", className: "ThumbnailFullWidthTransparent-Frame-1707483277" }, /* @__PURE__ */ React.createElement("g", { fill: "none", clipPath: `url(#${uid}-clip1_4428_19355)` }, /* @__PURE__ */ React.createElement("path", { d: "M 55 34.88889 L 55 53.11111 A 1.88889 1.88889 45 0 1 53.11111 55 L 14.88889 55 A 1.88889 1.88889 45 0 1 13 53.11111 L 13 34.88889 A 1.88889 1.88889 45 0 1 14.88889 33 L 53.11111 33 A 1.88889 1.88889 45 0 1 55 34.88889 Z", fill: "var(--color-2)" }), /* @__PURE__ */ React.createElement("g", { fill: "none", filter: `url(#${uid}-filter1_f_4428_19355)` }, /* @__PURE__ */ React.createElement("path", { d: "M84.1484 62.3047L84.1484 23.5791L4.71411 23.5791L4.71411 62.3047L84.1484 62.3047Z", fill: `url(#${uid}-paint0_linear_4428_19355)` })))))))))
37
+ /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { fill: "none", clipPath: `url(#${uid}-clip0_4428_19355)` }, /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { fill: "none", className: "StickySectionPresetsFullWidth-Frame-1707483281" }, /* @__PURE__ */ React.createElement("path", { d: "M 55 14.88889 L 55 33.11111 A 1.88889 1.88889 45 0 1 53.11111 35 L 14.88889 35 A 1.88889 1.88889 45 0 1 13 33.11111 L 13 14.88889 A 1.88889 1.88889 45 0 1 14.88889 13 L 53.11111 13 A 1.88889 1.88889 45 0 1 55 14.88889 Z", fill: "var(--color-2)" })), /* @__PURE__ */ React.createElement("g", { fill: "none", className: "StickySectionPresetsFullWidth-Frame-1707483278" }, /* @__PURE__ */ React.createElement("path", { d: "M 55 24.88889 L 55 43.11111 A 1.88889 1.88889 45 0 1 53.11111 45 L 14.88889 45 A 1.88889 1.88889 45 0 1 13 43.11111 L 13 24.88889 A 1.88889 1.88889 45 0 1 14.88889 23 L 53.11111 23 A 1.88889 1.88889 45 0 1 55 24.88889 Z", fill: "var(--color-3)" })), /* @__PURE__ */ React.createElement("g", { fill: "none", className: "StickySectionPresetsFullWidth-Frame-1707483277" }, /* @__PURE__ */ React.createElement("g", { fill: "none", clipPath: `url(#${uid}-clip1_4428_19355)` }, /* @__PURE__ */ React.createElement("path", { d: "M 55 34.88889 L 55 53.11111 A 1.88889 1.88889 45 0 1 53.11111 55 L 14.88889 55 A 1.88889 1.88889 45 0 1 13 53.11111 L 13 34.88889 A 1.88889 1.88889 45 0 1 14.88889 33 L 53.11111 33 A 1.88889 1.88889 45 0 1 55 34.88889 Z", fill: "var(--color-2)" }), /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("path", { d: "M84.1484 62.3047L84.1484 23.5791L4.71411 23.5791L4.71411 62.3047L84.1484 62.3047Z", fill: `url(#${uid}-paint0_linear_4428_19355)` }))))))))),
38
+ /* @__PURE__ */ React.createElement("g", { fill: "none", className: "StickySectionPresetsFullWidth-fullwidth_new-2" }, /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { fill: "none", clipPath: `url(#${uid}-clip0_4428_19355)` }, /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("path", { d: "M 55 14.88889 L 55 33.11111 A 1.88889 1.88889 45 0 1 53.11111 35 L 14.88889 35 A 1.88889 1.88889 45 0 1 13 33.11111 L 13 14.88889 A 1.88889 1.88889 45 0 1 14.88889 13 L 53.11111 13 A 1.88889 1.88889 45 0 1 55 14.88889 Z", fill: "var(--color-2)" })), /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("path", { d: "M 55 24.88889 L 55 43.11111 A 1.88889 1.88889 45 0 1 53.11111 45 L 14.88889 45 A 1.88889 1.88889 45 0 1 13 43.11111 L 13 24.88889 A 1.88889 1.88889 45 0 1 14.88889 23 L 53.11111 23 A 1.88889 1.88889 45 0 1 55 24.88889 Z", fill: "var(--color-3)" })), /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { fill: "none", clipPath: `url(#${uid}-clip1_4428_19355)` }, /* @__PURE__ */ React.createElement("path", { d: "M 55 34.88889 L 55 53.11111 A 1.88889 1.88889 45 0 1 53.11111 55 L 14.88889 55 A 1.88889 1.88889 45 0 1 13 53.11111 L 13 34.88889 A 1.88889 1.88889 45 0 1 14.88889 33 L 53.11111 33 A 1.88889 1.88889 45 0 1 55 34.88889 Z", fill: "var(--color-2)" }), /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("path", { d: "M84.1484 62.3047L84.1484 23.5791L4.71411 23.5791L4.71411 62.3047L84.1484 62.3047Z", fill: `url(#${uid}-paint0_linear_4428_19355)` })))))))))
38
39
  );
39
40
  }
40
41
  );
41
- ThumbnailFullWidthTransparent.displayName = "ThumbnailFullWidthTransparent";
42
+ StickySectionPresetsFullWidth.displayName = "StickySectionPresetsFullWidth";
42
43
  export {
43
- ThumbnailFullWidthTransparent
44
+ StickySectionPresetsFullWidth
44
45
  };