@wix/design-system-illustrations 2.37.10 → 2.38.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 (10) hide show
  1. package/dist/cjs/animated/ResponsiveBehaviorElementsAutoHeight.js +88 -0
  2. package/dist/cjs/animated/animated.global.css +397 -0
  3. package/dist/cjs/animated/index.js +3 -0
  4. package/dist/esm/animated/ResponsiveBehaviorElementsAutoHeight.js +44 -0
  5. package/dist/esm/animated/animated.global.css +397 -0
  6. package/dist/esm/animated/index.js +2 -0
  7. package/dist/types/animated/ResponsiveBehaviorElementsAutoHeight.d.ts +7 -0
  8. package/dist/types/animated/index.d.ts +2 -0
  9. package/package.json +3 -3
  10. package/src/animated/ResponsiveBehaviorElementsAutoHeight.html +494 -0
package/dist/cjs/animated/ResponsiveBehaviorElementsAutoHeight.js ADDED
@@ -0,0 +1,88 @@
1
+ "use strict";
2
+ var __create = Object.create;
3
+ var __defProp = Object.defineProperty;
4
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
5
+ var __getOwnPropNames = Object.getOwnPropertyNames;
6
+ var __getProtoOf = Object.getPrototypeOf;
7
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
8
+ var __export = (target, all) => {
9
+ for (var name in all)
10
+ __defProp(target, name, { get: all[name], enumerable: true });
11
+ };
12
+ var __copyProps = (to, from, except, desc) => {
13
+ if (from && typeof from === "object" || typeof from === "function") {
14
+ for (let key of __getOwnPropNames(from))
15
+ if (!__hasOwnProp.call(to, key) && key !== except)
16
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
17
+ }
18
+ return to;
19
+ };
20
+ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
21
+ // If the importer is in node compatibility mode or this is not an ESM
22
+ // file that has been converted to a CommonJS file using a Babel-
23
+ // compatible transform (i.e. "__esModule" has not been set), then set
24
+ // "default" to the CommonJS "module.exports" for node compatibility.
25
+ isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
26
+ mod
27
+ ));
28
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
29
+ var ResponsiveBehaviorElementsAutoHeight_exports = {};
30
+ __export(ResponsiveBehaviorElementsAutoHeight_exports, {
31
+ ResponsiveBehaviorElementsAutoHeight: () => ResponsiveBehaviorElementsAutoHeight
32
+ });
33
+ module.exports = __toCommonJS(ResponsiveBehaviorElementsAutoHeight_exports);
34
+ var import_react = __toESM(require("react"));
35
+ const ResponsiveBehaviorElementsAutoHeight = (0, import_react.forwardRef)(
36
+ ({ className, ...props }, ref) => {
37
+ const svgRef = (0, import_react.useRef)(null);
38
+ const uid = (0, import_react.useId)().replace(/:/g, "");
39
+ (0, import_react.useImperativeHandle)(
40
+ ref,
41
+ () => ({
42
+ play: () => {
43
+ var _a;
44
+ return (_a = svgRef.current) == null ? void 0 : _a.getAnimations({ subtree: true }).forEach((a) => a.play());
45
+ },
46
+ pause: () => {
47
+ var _a;
48
+ return (_a = svgRef.current) == null ? void 0 : _a.getAnimations({ subtree: true }).forEach((a) => a.pause());
49
+ },
50
+ reset: () => {
51
+ var _a;
52
+ return (_a = svgRef.current) == null ? void 0 : _a.getAnimations({ subtree: true }).forEach((a) => {
53
+ a.currentTime = 0;
54
+ a.pause();
55
+ });
56
+ }
57
+ }),
58
+ []
59
+ );
60
+ (0, import_react.useEffect)(() => {
61
+ var _a;
62
+ (_a = svgRef.current) == null ? void 0 : _a.getAnimations({ subtree: true }).forEach((a) => {
63
+ a.currentTime = 0;
64
+ a.pause();
65
+ });
66
+ }, []);
67
+ return /* @__PURE__ */ import_react.default.createElement(
68
+ "svg",
69
+ {
70
+ ref: svgRef,
71
+ viewBox: "0 0 236 127",
72
+ fill: "none",
73
+ width: 236,
74
+ height: 127,
75
+ xmlns: "http://www.w3.org/2000/svg",
76
+ className: ["ResponsiveBehaviorElementsAutoHeight-root", className].filter(Boolean).join(" "),
77
+ ...props
78
+ },
79
+ /* @__PURE__ */ import_react.default.createElement("defs", null, /* @__PURE__ */ import_react.default.createElement("linearGradient", { id: `${uid}-paint0_linear_4538_18970`, x1: "76.168", y1: "28.0035", x2: "-100.144", y2: "92.0086", gradientUnits: "userSpaceOnUse" }, /* @__PURE__ */ import_react.default.createElement("stop", { offset: "0.176006", stopColor: "#EAEFFF" }), /* @__PURE__ */ import_react.default.createElement("stop", { offset: "0.576923", stopColor: "#D5DFFF" }), /* @__PURE__ */ import_react.default.createElement("stop", { offset: "0.85", stopColor: "#B8C4FF" })), /* @__PURE__ */ import_react.default.createElement("linearGradient", { id: `${uid}-paint1_linear_4538_18970`, x1: "180.327", y1: "11.1745", x2: "134.477", y2: "92.0395", gradientUnits: "userSpaceOnUse" }, /* @__PURE__ */ import_react.default.createElement("stop", { offset: "0.176006", stopColor: "#EAEFFF" }), /* @__PURE__ */ import_react.default.createElement("stop", { offset: "0.576923", stopColor: "#B8C4FF" }), /* @__PURE__ */ import_react.default.createElement("stop", { offset: "0.85", stopColor: "#002294" })), /* @__PURE__ */ import_react.default.createElement("filter", { id: `${uid}-filter0_f_4538_18970`, filterUnits: "objectBoundingBox", x: "-1", y: "-1", width: "3", height: "3", colorInterpolationFilters: "sRGB" }, /* @__PURE__ */ import_react.default.createElement("feFlood", { result: "BackgroundImageFix", floodOpacity: "0" }), /* @__PURE__ */ import_react.default.createElement("feBlend", { mode: "normal", in: "SourceGraphic", in2: "BackgroundImageFix", result: "shape" }), /* @__PURE__ */ import_react.default.createElement("feGaussianBlur", { stdDeviation: "9.17343", result: "effect1_foregroundBlur_4538_18970" })), /* @__PURE__ */ import_react.default.createElement("filter", { id: `${uid}-filter1_f_4538_18970`, filterUnits: "objectBoundingBox", x: "-1", y: "-1", width: "3", height: "3", colorInterpolationFilters: "sRGB" }, /* @__PURE__ */ import_react.default.createElement("feFlood", { result: "BackgroundImageFix", floodOpacity: "0" }), /* @__PURE__ */ import_react.default.createElement("feBlend", { mode: "normal", in: "SourceGraphic", in2: "BackgroundImageFix", result: "shape" }), /* @__PURE__ */ import_react.default.createElement("feGaussianBlur", { stdDeviation: "3.72612", result: "effect1_foregroundBlur_4538_18970" })), /* @__PURE__ */ import_react.default.createElement("clipPath", { id: `${uid}-clip0_4538_18970` }, /* @__PURE__ */ import_react.default.createElement("rect", { x: "44.5", y: "23", width: "147", height: "81", rx: "6", fill: "white" })), /* @__PURE__ */ import_react.default.createElement("clipPath", { id: `${uid}-clip2_4538_18970` }, /* @__PURE__ */ import_react.default.createElement("rect", { x: "108.25", y: "56", width: "19", height: "7", rx: "3.5", fill: "white" })), /* @__PURE__ */ import_react.default.createElement("mask", { id: `${uid}-am-node-7-3`, maskUnits: "userSpaceOnUse", "mask-type": "alpha", x: "0", y: "0", width: "236", height: "127" }, /* @__PURE__ */ import_react.default.createElement("g", { className: "ResponsiveBehaviorElementsAutoHeight-node-7-3" }, " ", /* @__PURE__ */ import_react.default.createElement("rect", { x: "44.6865", y: "35.5002", width: "147", height: "71", rx: "6", ry: "6", fill: "var(--color-4)", className: "ResponsiveBehaviorElementsAutoHeight-node-7-3-shape" })))),
80
+ /* @__PURE__ */ import_react.default.createElement("g", null, /* @__PURE__ */ import_react.default.createElement("g", { fill: "none" }, /* @__PURE__ */ import_react.default.createElement("g", { fill: "none" }, /* @__PURE__ */ import_react.default.createElement("g", { fill: "none", clipPath: `url(#${uid}-clip0_4538_18970)` }, /* @__PURE__ */ import_react.default.createElement("g", { className: "ResponsiveBehaviorElementsAutoHeight-node-3" }, /* @__PURE__ */ import_react.default.createElement("rect", { x: "44.5", y: "23", width: "147", height: "81", rx: "6", fill: "var(--color-4)", className: "ResponsiveBehaviorElementsAutoHeight-node-3-shape", fillOpacity: "0.25" })), /* @__PURE__ */ import_react.default.createElement("g", { fill: "none" }, /* @__PURE__ */ import_react.default.createElement("g", { fill: "none" })))), /* @__PURE__ */ import_react.default.createElement("g", { fill: "none" }, /* @__PURE__ */ import_react.default.createElement("g", { fill: "none" }, /* @__PURE__ */ import_react.default.createElement("g", { className: "ResponsiveBehaviorElementsAutoHeight-Vector" }, /* @__PURE__ */ import_react.default.createElement("path", { d: "M42 67.5V59.5C42 58.9477 41.5523 58.5 41 58.5C40.4477 58.5 40 58.9477 40 59.5V67.5C40 68.0523 40.4477 68.5 41 68.5C41.5523 68.5 42 68.0523 42 67.5Z", fill: "var(--color-2)" })), /* @__PURE__ */ import_react.default.createElement("g", { className: "ResponsiveBehaviorElementsAutoHeight-Vector_2" }, /* @__PURE__ */ import_react.default.createElement("path", { d: "M196 67.5V59.5C196 58.9477 195.552 58.5 195 58.5C194.448 58.5 194 58.9477 194 59.5V67.5C194 68.0523 194.448 68.5 195 68.5C195.552 68.5 196 68.0523 196 67.5Z", fill: "var(--color-2)" }))), /* @__PURE__ */ import_react.default.createElement("g", { mask: `url(#${uid}-am-node-7-3)` }, /* @__PURE__ */ import_react.default.createElement("g", { fill: "none" }, /* @__PURE__ */ import_react.default.createElement("g", { fill: "none", opacity: "0.5" }, /* @__PURE__ */ import_react.default.createElement("rect", { x: "44.5", y: "30.7051", width: "147", height: "45.6057", rx: "6", fill: "var(--color-4)" })), /* @__PURE__ */ import_react.default.createElement("g", { fill: "none" }, /* @__PURE__ */ import_react.default.createElement("g", { fill: "none" }, /* @__PURE__ */ import_react.default.createElement("g", null, /* @__PURE__ */ import_react.default.createElement("rect", { x: "44", y: "23", width: "147", height: "56", rx: "6", fill: "var(--color-1)", className: "ResponsiveBehaviorElementsAutoHeight-node-6-shape" })), /* @__PURE__ */ import_react.default.createElement("g", { fill: "none", filter: `url(#${uid}-filter0_f_4538_18970)`, className: "ResponsiveBehaviorElementsAutoHeight-Illustration-Background-Shape" }, /* @__PURE__ */ import_react.default.createElement("path", { d: "M 356.484 85.0215 L 356.484004 -3.7344 L 44.501004 -3.734414 L 44.501 85.021486 Z", fill: `url(#${uid}-paint0_linear_4538_18970)` })))), /* @__PURE__ */ import_react.default.createElement("g", { fill: "none" }, /* @__PURE__ */ import_react.default.createElement("g", { fill: "none" }, /* @__PURE__ */ import_react.default.createElement("g", { className: "ResponsiveBehaviorElementsAutoHeight-Rectangle-1000002724" }, /* @__PURE__ */ import_react.default.createElement("rect", { x: "95.25", y: "39", width: "45", height: "1.5", rx: "0.75", fill: "var(--color-1)", className: "ResponsiveBehaviorElementsAutoHeight-Rectangle-1000002724-shape" })), /* @__PURE__ */ import_react.default.createElement("g", { className: "ResponsiveBehaviorElementsAutoHeight-Rectangle-1000002727" }, /* @__PURE__ */ import_react.default.createElement("rect", { x: "95.24915", y: "46.5", width: "45", height: "1.5", rx: "0.75", fill: "var(--color-1)", className: "ResponsiveBehaviorElementsAutoHeight-Rectangle-1000002727-shape" })), /* @__PURE__ */ import_react.default.createElement("g", { className: "ResponsiveBehaviorElementsAutoHeight-Rectangle-1000002727-2" }, /* @__PURE__ */ import_react.default.createElement("rect", { x: "95.24915", y: "46.5", width: "45", height: "1.5", rx: "0.75", fill: "var(--color-1)", className: "ResponsiveBehaviorElementsAutoHeight-Rectangle-1000002727-2-shape" })), /* @__PURE__ */ import_react.default.createElement("g", { className: "ResponsiveBehaviorElementsAutoHeight-Rectangle-1000002727-2-2" }, /* @__PURE__ */ import_react.default.createElement("rect", { x: "95.24915", y: "46.5", width: "45", height: "1.5", rx: "0.75", fill: "var(--color-1)", className: "ResponsiveBehaviorElementsAutoHeight-Rectangle-1000002727-2-2-shape" }))), /* @__PURE__ */ import_react.default.createElement("g", { fill: "none" }, /* @__PURE__ */ import_react.default.createElement("g", { fill: "none", className: "ResponsiveBehaviorElementsAutoHeight-node-8", clipPath: `url(#${uid}-clip2_4538_18970)` }, /* @__PURE__ */ import_react.default.createElement("rect", { x: "108.25", y: "56", width: "19", height: "7", rx: "3.5", fill: "var(--color-1)" }), /* @__PURE__ */ import_react.default.createElement("g", { fill: "none", filter: `url(#${uid}-filter1_f_4538_18970)` }, /* @__PURE__ */ import_react.default.createElement("path", { d: "M108.387 5.73047H192.216V66.3816H108.387V5.73047Z", fill: `url(#${uid}-paint1_linear_4538_18970)` }))))))))))
81
+ );
82
+ }
83
+ );
84
+ ResponsiveBehaviorElementsAutoHeight.displayName = "ResponsiveBehaviorElementsAutoHeight";
85
+ // Annotate the CommonJS export names for ESM import in node:
86
+ 0 && (module.exports = {
87
+ ResponsiveBehaviorElementsAutoHeight
88
+ });
package/dist/cjs/animated/animated.global.css CHANGED
@@ -2132,6 +2132,403 @@
2132
2132
  }
2133
2133
 
2134
2134
 
2135
+ /* ResponsiveBehaviorElementsAutoHeight */
2136
+
2137
+ .ResponsiveBehaviorElementsAutoHeight-root {
2138
+ max-width: 100%;
2139
+ height: auto;
2140
+ }
2141
+
2142
+ .ResponsiveBehaviorElementsAutoHeight-root {
2143
+ --color-1: #002294;
2144
+ --color-2: #B8C4FF;
2145
+ --color-3: #303030;
2146
+ --color-4: #F8F6F6;
2147
+ }
2148
+
2149
+ .ResponsiveBehaviorElementsAutoHeight-Illustration-Background-Shape {
2150
+ transform-box: fill-box;
2151
+ transform-origin: 50% 50%;
2152
+ animation: ResponsiveBehaviorElementsAutoHeight-Illustration-Background-Shape-transform 3333ms linear infinite both;
2153
+ }
2154
+
2155
+ @keyframes ResponsiveBehaviorElementsAutoHeight-Illustration-Background-Shape-transform {
2156
+ 0% {
2157
+ transform: translate(0px, 0px);
2158
+ animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
2159
+ }
2160
+ 50.005001% {
2161
+ transform: translate(37px, 9px);
2162
+ animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
2163
+ }
2164
+ 100% {
2165
+ transform: translate(0.000001px, 0px);
2166
+ }
2167
+ }
2168
+
2169
+ .ResponsiveBehaviorElementsAutoHeight-Rectangle-1000002724 {
2170
+ transform-box: fill-box;
2171
+ transform-origin: 50% 50%;
2172
+ animation: ResponsiveBehaviorElementsAutoHeight-Rectangle-1000002724-transform 3333ms linear infinite both;
2173
+ }
2174
+
2175
+ .ResponsiveBehaviorElementsAutoHeight-Rectangle-1000002724-shape {
2176
+ animation: ResponsiveBehaviorElementsAutoHeight-Rectangle-1000002724-width 3333ms linear infinite both;
2177
+ }
2178
+
2179
+ @keyframes ResponsiveBehaviorElementsAutoHeight-Rectangle-1000002724-transform {
2180
+ 0% {
2181
+ transform: translate(-26.5px, 0px);
2182
+ animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
2183
+ }
2184
+ 50.005001% {
2185
+ transform: translate(0px, 0px);
2186
+ animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
2187
+ }
2188
+ 100% {
2189
+ transform: translate(-26.499999px, 0px);
2190
+ }
2191
+ }
2192
+
2193
+ @keyframes ResponsiveBehaviorElementsAutoHeight-Rectangle-1000002724-width {
2194
+ 0% {
2195
+ width: 98px;
2196
+ animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
2197
+ }
2198
+ 50.005001% {
2199
+ width: 45px;
2200
+ animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
2201
+ }
2202
+ 100% {
2203
+ width: 97.999999px;
2204
+ }
2205
+ }
2206
+
2207
+ .ResponsiveBehaviorElementsAutoHeight-Rectangle-1000002727 {
2208
+ transform-box: fill-box;
2209
+ transform-origin: 50% 50%;
2210
+ animation: ResponsiveBehaviorElementsAutoHeight-Rectangle-1000002727-transform 3333ms linear infinite both;
2211
+ }
2212
+
2213
+ .ResponsiveBehaviorElementsAutoHeight-Rectangle-1000002727-shape {
2214
+ animation: ResponsiveBehaviorElementsAutoHeight-Rectangle-1000002727-width 3333ms linear infinite both;
2215
+ }
2216
+
2217
+ @keyframes ResponsiveBehaviorElementsAutoHeight-Rectangle-1000002727-transform {
2218
+ 0% {
2219
+ transform: translate(-7.69445px, 0px);
2220
+ animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
2221
+ }
2222
+ 50.005001% {
2223
+ transform: translate(0px, 0px);
2224
+ animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
2225
+ }
2226
+ 100% {
2227
+ transform: translate(-7.69445px, 0px);
2228
+ }
2229
+ }
2230
+
2231
+ @keyframes ResponsiveBehaviorElementsAutoHeight-Rectangle-1000002727-width {
2232
+ 0% {
2233
+ width: 60.3889px;
2234
+ animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
2235
+ }
2236
+ 50.005001% {
2237
+ width: 45px;
2238
+ animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
2239
+ }
2240
+ 100% {
2241
+ width: 60.3889px;
2242
+ }
2243
+ }
2244
+
2245
+ .ResponsiveBehaviorElementsAutoHeight-Rectangle-1000002727-2 {
2246
+ transform-box: fill-box;
2247
+ transform-origin: 50% 50%;
2248
+ animation:
2249
+ ResponsiveBehaviorElementsAutoHeight-Rectangle-1000002727-2-transform 3333ms linear infinite both,
2250
+ ResponsiveBehaviorElementsAutoHeight-Rectangle-1000002727-2-opacity 3333ms linear infinite both;
2251
+ }
2252
+
2253
+ .ResponsiveBehaviorElementsAutoHeight-Rectangle-1000002727-2-shape {
2254
+ animation: ResponsiveBehaviorElementsAutoHeight-Rectangle-1000002727-2-width 3333ms linear infinite both;
2255
+ }
2256
+
2257
+ @keyframes ResponsiveBehaviorElementsAutoHeight-Rectangle-1000002727-2-transform {
2258
+ 0% {
2259
+ transform: translate(22.505px, 7.5px);
2260
+ animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
2261
+ }
2262
+ 50.005001% {
2263
+ transform: translate(0px, 7.5px);
2264
+ animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
2265
+ }
2266
+ 100% {
2267
+ transform: translate(22.505px, 7.5px);
2268
+ }
2269
+ }
2270
+
2271
+ @keyframes ResponsiveBehaviorElementsAutoHeight-Rectangle-1000002727-2-opacity {
2272
+ 0% {
2273
+ opacity: 0;
2274
+ animation-timing-function: steps(1, jump-end);
2275
+ }
2276
+ 24.992499% {
2277
+ opacity: 1;
2278
+ animation-timing-function: steps(1, jump-end);
2279
+ }
2280
+ 77.49775% {
2281
+ opacity: 0;
2282
+ animation-timing-function: steps(1, jump-end);
2283
+ }
2284
+ 100% {
2285
+ opacity: 0;
2286
+ }
2287
+ }
2288
+
2289
+ @keyframes ResponsiveBehaviorElementsAutoHeight-Rectangle-1000002727-2-width {
2290
+ 0% {
2291
+ width: 0px;
2292
+ animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
2293
+ }
2294
+ 50.005001% {
2295
+ width: 45px;
2296
+ animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
2297
+ }
2298
+ 100% {
2299
+ width: 0.000001px;
2300
+ }
2301
+ }
2302
+
2303
+ .ResponsiveBehaviorElementsAutoHeight-Rectangle-1000002727-2-2 {
2304
+ transform-box: fill-box;
2305
+ transform-origin: 50% 50%;
2306
+ animation:
2307
+ ResponsiveBehaviorElementsAutoHeight-Rectangle-1000002727-2-2-transform 3333ms linear infinite both,
2308
+ ResponsiveBehaviorElementsAutoHeight-Rectangle-1000002727-2-2-opacity 3333ms linear infinite both;
2309
+ }
2310
+
2311
+ .ResponsiveBehaviorElementsAutoHeight-Rectangle-1000002727-2-2-shape {
2312
+ animation: ResponsiveBehaviorElementsAutoHeight-Rectangle-1000002727-2-2-width 3333ms linear infinite both;
2313
+ }
2314
+
2315
+ @keyframes ResponsiveBehaviorElementsAutoHeight-Rectangle-1000002727-2-2-transform {
2316
+ 0% {
2317
+ transform: translate(22.505px, 15px);
2318
+ animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
2319
+ }
2320
+ 50.005001% {
2321
+ transform: translate(5.1px, 15px);
2322
+ animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
2323
+ }
2324
+ 100% {
2325
+ transform: translate(22.505px, 15px);
2326
+ }
2327
+ }
2328
+
2329
+ @keyframes ResponsiveBehaviorElementsAutoHeight-Rectangle-1000002727-2-2-opacity {
2330
+ 0% {
2331
+ opacity: 0;
2332
+ animation-timing-function: steps(1, jump-end);
2333
+ }
2334
+ 26.252625% {
2335
+ opacity: 1;
2336
+ animation-timing-function: steps(1, jump-end);
2337
+ }
2338
+ 75.007501% {
2339
+ opacity: 0;
2340
+ animation-timing-function: steps(1, jump-end);
2341
+ }
2342
+ 100% {
2343
+ opacity: 0;
2344
+ }
2345
+ }
2346
+
2347
+ @keyframes ResponsiveBehaviorElementsAutoHeight-Rectangle-1000002727-2-2-width {
2348
+ 0% {
2349
+ width: 0px;
2350
+ animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
2351
+ }
2352
+ 50.005001% {
2353
+ width: 34.938px;
2354
+ animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
2355
+ }
2356
+ 100% {
2357
+ width: 0.000001px;
2358
+ }
2359
+ }
2360
+
2361
+ .ResponsiveBehaviorElementsAutoHeight-Vector {
2362
+ transform-box: fill-box;
2363
+ transform-origin: 50% 50%;
2364
+ animation: ResponsiveBehaviorElementsAutoHeight-Vector-transform 3333ms linear infinite both;
2365
+ }
2366
+
2367
+ @keyframes ResponsiveBehaviorElementsAutoHeight-Vector-transform {
2368
+ 0% {
2369
+ transform: translate(0px, 0px);
2370
+ animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
2371
+ }
2372
+ 50.005001% {
2373
+ transform: translate(37px, 0px);
2374
+ animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
2375
+ }
2376
+ 100% {
2377
+ transform: translate(0.000001px, 0px);
2378
+ }
2379
+ }
2380
+
2381
+ .ResponsiveBehaviorElementsAutoHeight-Vector_2 {
2382
+ transform-box: fill-box;
2383
+ transform-origin: 50% 50%;
2384
+ animation: ResponsiveBehaviorElementsAutoHeight-Vector_2-transform 3333ms linear infinite both;
2385
+ }
2386
+
2387
+ @keyframes ResponsiveBehaviorElementsAutoHeight-Vector_2-transform {
2388
+ 0% {
2389
+ transform: translate(0px, 0px);
2390
+ animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
2391
+ }
2392
+ 50.005001% {
2393
+ transform: translate(-37px, 0px);
2394
+ animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
2395
+ }
2396
+ 100% {
2397
+ transform: translate(-0.000001px, 0px);
2398
+ }
2399
+ }
2400
+
2401
+ .ResponsiveBehaviorElementsAutoHeight-node-3 {
2402
+ transform-box: fill-box;
2403
+ transform-origin: 50% 50%;
2404
+ animation: ResponsiveBehaviorElementsAutoHeight-node-3-transform 3333ms linear infinite both;
2405
+ }
2406
+
2407
+ .ResponsiveBehaviorElementsAutoHeight-node-3-shape {
2408
+ animation: ResponsiveBehaviorElementsAutoHeight-node-3-width 3333ms linear infinite both;
2409
+ }
2410
+
2411
+ @keyframes ResponsiveBehaviorElementsAutoHeight-node-3-transform {
2412
+ 0% {
2413
+ transform: translate(0px, 0px);
2414
+ animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
2415
+ }
2416
+ 50.005001% {
2417
+ transform: translate(37px, 0px);
2418
+ animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
2419
+ }
2420
+ 100% {
2421
+ transform: translate(0.000001px, 0px);
2422
+ }
2423
+ }
2424
+
2425
+ @keyframes ResponsiveBehaviorElementsAutoHeight-node-3-width {
2426
+ 0% {
2427
+ width: 147px;
2428
+ animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
2429
+ }
2430
+ 50.015002% {
2431
+ width: 73px;
2432
+ animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
2433
+ }
2434
+ 100% {
2435
+ width: 147px;
2436
+ }
2437
+ }
2438
+
2439
+ .ResponsiveBehaviorElementsAutoHeight-node-6-shape {
2440
+ animation: node-6-height 3333ms linear infinite both;
2441
+ }
2442
+
2443
+ @keyframes node-6-height {
2444
+ 0% {
2445
+ height: 56px;
2446
+ animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
2447
+ }
2448
+ 50.005001% {
2449
+ height: 71px;
2450
+ animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
2451
+ }
2452
+ 100% {
2453
+ height: 56px;
2454
+ }
2455
+ }
2456
+
2457
+ .ResponsiveBehaviorElementsAutoHeight-node-7-3 {
2458
+ transform-box: fill-box;
2459
+ transform-origin: 73.5px 0px;
2460
+ animation: ResponsiveBehaviorElementsAutoHeight-node-7-3-transform 3333ms linear infinite both;
2461
+ }
2462
+
2463
+ .ResponsiveBehaviorElementsAutoHeight-node-7-3-shape {
2464
+ animation:
2465
+ ResponsiveBehaviorElementsAutoHeight-node-7-3-width 3333ms linear infinite both,
2466
+ ResponsiveBehaviorElementsAutoHeight-node-7-3-height 3333ms linear infinite both;
2467
+ }
2468
+
2469
+ @keyframes ResponsiveBehaviorElementsAutoHeight-node-7-3-transform {
2470
+ 0% {
2471
+ transform: translate(0px, -12.5px);
2472
+ animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
2473
+ }
2474
+ 50.015002% {
2475
+ transform: translate(37px, -12.5px);
2476
+ animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
2477
+ }
2478
+ 100% {
2479
+ transform: translate(0px, -12.5px);
2480
+ }
2481
+ }
2482
+
2483
+ @keyframes ResponsiveBehaviorElementsAutoHeight-node-7-3-width {
2484
+ 0% {
2485
+ width: 147px;
2486
+ animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
2487
+ }
2488
+ 50.015002% {
2489
+ width: 73px;
2490
+ animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
2491
+ }
2492
+ 100% {
2493
+ width: 147px;
2494
+ }
2495
+ }
2496
+
2497
+ @keyframes ResponsiveBehaviorElementsAutoHeight-node-7-3-height {
2498
+ 0% {
2499
+ height: 56px;
2500
+ animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
2501
+ }
2502
+ 50.005001% {
2503
+ height: 71px;
2504
+ animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
2505
+ }
2506
+ 100% {
2507
+ height: 56px;
2508
+ }
2509
+ }
2510
+
2511
+ .ResponsiveBehaviorElementsAutoHeight-node-8 {
2512
+ transform-box: fill-box;
2513
+ transform-origin: 50% 50%;
2514
+ animation: ResponsiveBehaviorElementsAutoHeight-node-8-transform 3333ms linear infinite both;
2515
+ }
2516
+
2517
+ @keyframes ResponsiveBehaviorElementsAutoHeight-node-8-transform {
2518
+ 0% {
2519
+ transform: translate(0px, 0px);
2520
+ animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
2521
+ }
2522
+ 50.005001% {
2523
+ transform: translate(0px, 15px);
2524
+ animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
2525
+ }
2526
+ 100% {
2527
+ transform: translate(0px, 0px);
2528
+ }
2529
+ }
2530
+
2531
+
2135
2532
  /* ResponsiveBehaviorElementsFixed */
2136
2533
 
2137
2534
  .ResponsiveBehaviorElementsFixed-root {
package/dist/cjs/animated/index.js CHANGED
@@ -28,6 +28,7 @@ __export(animated_exports, {
28
28
  LimitScaling2: () => import_LimitScaling2.LimitScaling2,
29
29
  MaxMin: () => import_MaxMin.MaxMin,
30
30
  MobileAlgoFast: () => import_MobileAlgoFast.MobileAlgoFast,
31
+ ResponsiveBehaviorElementsAutoHeight: () => import_ResponsiveBehaviorElementsAutoHeight.ResponsiveBehaviorElementsAutoHeight,
31
32
  ResponsiveBehaviorElementsFixed: () => import_ResponsiveBehaviorElementsFixed.ResponsiveBehaviorElementsFixed,
32
33
  ResponsiveBehaviorElementsRelativeWidth: () => import_ResponsiveBehaviorElementsRelativeWidth.ResponsiveBehaviorElementsRelativeWidth,
33
34
  ResponsiveBehaviorElementsScaleProportionally: () => import_ResponsiveBehaviorElementsScaleProportionally.ResponsiveBehaviorElementsScaleProportionally,
@@ -57,6 +58,7 @@ var import_HeaderScrollEffectStayFixed = require("./HeaderScrollEffectStayFixed"
57
58
  var import_LimitScaling2 = require("./LimitScaling2");
58
59
  var import_MaxMin = require("./MaxMin");
59
60
  var import_MobileAlgoFast = require("./MobileAlgoFast");
61
+ var import_ResponsiveBehaviorElementsAutoHeight = require("./ResponsiveBehaviorElementsAutoHeight");
60
62
  var import_ResponsiveBehaviorElementsFixed = require("./ResponsiveBehaviorElementsFixed");
61
63
  var import_ResponsiveBehaviorElementsRelativeWidth = require("./ResponsiveBehaviorElementsRelativeWidth");
62
64
  var import_ResponsiveBehaviorElementsScaleProportionally = require("./ResponsiveBehaviorElementsScaleProportionally");
@@ -86,6 +88,7 @@ var import_SectionScale = require("./SectionScale");
86
88
  LimitScaling2,
87
89
  MaxMin,
88
90
  MobileAlgoFast,
91
+ ResponsiveBehaviorElementsAutoHeight,
89
92
  ResponsiveBehaviorElementsFixed,
90
93
  ResponsiveBehaviorElementsRelativeWidth,
91
94
  ResponsiveBehaviorElementsScaleProportionally,
package/dist/esm/animated/ResponsiveBehaviorElementsAutoHeight.js ADDED
@@ -0,0 +1,44 @@
1
+ import React, { forwardRef, useEffect, useId, useImperativeHandle, useRef } from "react";
2
+ const ResponsiveBehaviorElementsAutoHeight = 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: ["ResponsiveBehaviorElementsAutoHeight-root", className].filter(Boolean).join(" "),
34
+ ...props
35
+ },
36
+ /* @__PURE__ */ React.createElement("defs", null, /* @__PURE__ */ React.createElement("linearGradient", { id: `${uid}-paint0_linear_4538_18970`, 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}-paint1_linear_4538_18970`, x1: "180.327", y1: "11.1745", x2: "134.477", y2: "92.0395", 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_4538_18970`, 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_4538_18970" })), /* @__PURE__ */ React.createElement("filter", { id: `${uid}-filter1_f_4538_18970`, 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: "3.72612", result: "effect1_foregroundBlur_4538_18970" })), /* @__PURE__ */ React.createElement("clipPath", { id: `${uid}-clip0_4538_18970` }, /* @__PURE__ */ React.createElement("rect", { x: "44.5", y: "23", width: "147", height: "81", rx: "6", fill: "white" })), /* @__PURE__ */ React.createElement("clipPath", { id: `${uid}-clip2_4538_18970` }, /* @__PURE__ */ React.createElement("rect", { x: "108.25", y: "56", width: "19", height: "7", rx: "3.5", fill: "white" })), /* @__PURE__ */ React.createElement("mask", { id: `${uid}-am-node-7-3`, maskUnits: "userSpaceOnUse", "mask-type": "alpha", x: "0", y: "0", width: "236", height: "127" }, /* @__PURE__ */ React.createElement("g", { className: "ResponsiveBehaviorElementsAutoHeight-node-7-3" }, " ", /* @__PURE__ */ React.createElement("rect", { x: "44.6865", y: "35.5002", width: "147", height: "71", rx: "6", ry: "6", fill: "var(--color-4)", className: "ResponsiveBehaviorElementsAutoHeight-node-7-3-shape" })))),
37
+ /* @__PURE__ */ React.createElement("g", null, /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { fill: "none", clipPath: `url(#${uid}-clip0_4538_18970)` }, /* @__PURE__ */ React.createElement("g", { className: "ResponsiveBehaviorElementsAutoHeight-node-3" }, /* @__PURE__ */ React.createElement("rect", { x: "44.5", y: "23", width: "147", height: "81", rx: "6", fill: "var(--color-4)", className: "ResponsiveBehaviorElementsAutoHeight-node-3-shape", fillOpacity: "0.25" })), /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { fill: "none" })))), /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { className: "ResponsiveBehaviorElementsAutoHeight-Vector" }, /* @__PURE__ */ React.createElement("path", { d: "M42 67.5V59.5C42 58.9477 41.5523 58.5 41 58.5C40.4477 58.5 40 58.9477 40 59.5V67.5C40 68.0523 40.4477 68.5 41 68.5C41.5523 68.5 42 68.0523 42 67.5Z", fill: "var(--color-2)" })), /* @__PURE__ */ React.createElement("g", { className: "ResponsiveBehaviorElementsAutoHeight-Vector_2" }, /* @__PURE__ */ React.createElement("path", { d: "M196 67.5V59.5C196 58.9477 195.552 58.5 195 58.5C194.448 58.5 194 58.9477 194 59.5V67.5C194 68.0523 194.448 68.5 195 68.5C195.552 68.5 196 68.0523 196 67.5Z", fill: "var(--color-2)" }))), /* @__PURE__ */ React.createElement("g", { mask: `url(#${uid}-am-node-7-3)` }, /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { fill: "none", opacity: "0.5" }, /* @__PURE__ */ React.createElement("rect", { x: "44.5", y: "30.7051", width: "147", height: "45.6057", rx: "6", fill: "var(--color-4)" })), /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", null, /* @__PURE__ */ React.createElement("rect", { x: "44", y: "23", width: "147", height: "56", rx: "6", fill: "var(--color-1)", className: "ResponsiveBehaviorElementsAutoHeight-node-6-shape" })), /* @__PURE__ */ React.createElement("g", { fill: "none", filter: `url(#${uid}-filter0_f_4538_18970)`, className: "ResponsiveBehaviorElementsAutoHeight-Illustration-Background-Shape" }, /* @__PURE__ */ React.createElement("path", { d: "M 356.484 85.0215 L 356.484004 -3.7344 L 44.501004 -3.734414 L 44.501 85.021486 Z", fill: `url(#${uid}-paint0_linear_4538_18970)` })))), /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { className: "ResponsiveBehaviorElementsAutoHeight-Rectangle-1000002724" }, /* @__PURE__ */ React.createElement("rect", { x: "95.25", y: "39", width: "45", height: "1.5", rx: "0.75", fill: "var(--color-1)", className: "ResponsiveBehaviorElementsAutoHeight-Rectangle-1000002724-shape" })), /* @__PURE__ */ React.createElement("g", { className: "ResponsiveBehaviorElementsAutoHeight-Rectangle-1000002727" }, /* @__PURE__ */ React.createElement("rect", { x: "95.24915", y: "46.5", width: "45", height: "1.5", rx: "0.75", fill: "var(--color-1)", className: "ResponsiveBehaviorElementsAutoHeight-Rectangle-1000002727-shape" })), /* @__PURE__ */ React.createElement("g", { className: "ResponsiveBehaviorElementsAutoHeight-Rectangle-1000002727-2" }, /* @__PURE__ */ React.createElement("rect", { x: "95.24915", y: "46.5", width: "45", height: "1.5", rx: "0.75", fill: "var(--color-1)", className: "ResponsiveBehaviorElementsAutoHeight-Rectangle-1000002727-2-shape" })), /* @__PURE__ */ React.createElement("g", { className: "ResponsiveBehaviorElementsAutoHeight-Rectangle-1000002727-2-2" }, /* @__PURE__ */ React.createElement("rect", { x: "95.24915", y: "46.5", width: "45", height: "1.5", rx: "0.75", fill: "var(--color-1)", className: "ResponsiveBehaviorElementsAutoHeight-Rectangle-1000002727-2-2-shape" }))), /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { fill: "none", className: "ResponsiveBehaviorElementsAutoHeight-node-8", clipPath: `url(#${uid}-clip2_4538_18970)` }, /* @__PURE__ */ React.createElement("rect", { x: "108.25", y: "56", width: "19", height: "7", rx: "3.5", fill: "var(--color-1)" }), /* @__PURE__ */ React.createElement("g", { fill: "none", filter: `url(#${uid}-filter1_f_4538_18970)` }, /* @__PURE__ */ React.createElement("path", { d: "M108.387 5.73047H192.216V66.3816H108.387V5.73047Z", fill: `url(#${uid}-paint1_linear_4538_18970)` }))))))))))
38
+ );
39
+ }
40
+ );
41
+ ResponsiveBehaviorElementsAutoHeight.displayName = "ResponsiveBehaviorElementsAutoHeight";
42
+ export {
43
+ ResponsiveBehaviorElementsAutoHeight
44
+ };