@wix/design-system-illustrations 2.37.10 → 2.38.1

package/dist/esm/animated/animated.global.css

@@ -2132,6 +2132,403 @@
 }
     
 
+/* ResponsiveBehaviorElementsAutoHeight */
+
+.ResponsiveBehaviorElementsAutoHeight-root {
+  max-width: 100%;
+  height: auto;
+}
+
+.ResponsiveBehaviorElementsAutoHeight-root {
+  --color-1: #002294;
+  --color-2: #B8C4FF;
+  --color-3: #303030;
+  --color-4: #F8F6F6;
+}
+
+.ResponsiveBehaviorElementsAutoHeight-Illustration-Background-Shape {
+  transform-box: fill-box;
+  transform-origin: 50% 50%;
+  animation: ResponsiveBehaviorElementsAutoHeight-Illustration-Background-Shape-transform 3333ms linear infinite both;
+}
+
+@keyframes ResponsiveBehaviorElementsAutoHeight-Illustration-Background-Shape-transform {
+  0% {
+    transform: translate(0px, 0px);
+    animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
+  }
+  50.005001% {
+    transform: translate(37px, 9px);
+    animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
+  }
+  100% {
+    transform: translate(0.000001px, 0px);
+  }
+}
+
+.ResponsiveBehaviorElementsAutoHeight-Rectangle-1000002724 {
+  transform-box: fill-box;
+  transform-origin: 50% 50%;
+  animation: ResponsiveBehaviorElementsAutoHeight-Rectangle-1000002724-transform 3333ms linear infinite both;
+}
+
+.ResponsiveBehaviorElementsAutoHeight-Rectangle-1000002724-shape {
+  animation: ResponsiveBehaviorElementsAutoHeight-Rectangle-1000002724-width 3333ms linear infinite both;
+}
+
+@keyframes ResponsiveBehaviorElementsAutoHeight-Rectangle-1000002724-transform {
+  0% {
+    transform: translate(-26.5px, 0px);
+    animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
+  }
+  50.005001% {
+    transform: translate(0px, 0px);
+    animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
+  }
+  100% {
+    transform: translate(-26.499999px, 0px);
+  }
+}
+
+@keyframes ResponsiveBehaviorElementsAutoHeight-Rectangle-1000002724-width {
+  0% {
+    width: 98px;
+    animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
+  }
+  50.005001% {
+    width: 45px;
+    animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
+  }
+  100% {
+    width: 97.999999px;
+  }
+}
+
+.ResponsiveBehaviorElementsAutoHeight-Rectangle-1000002727 {
+  transform-box: fill-box;
+  transform-origin: 50% 50%;
+  animation: ResponsiveBehaviorElementsAutoHeight-Rectangle-1000002727-transform 3333ms linear infinite both;
+}
+
+.ResponsiveBehaviorElementsAutoHeight-Rectangle-1000002727-shape {
+  animation: ResponsiveBehaviorElementsAutoHeight-Rectangle-1000002727-width 3333ms linear infinite both;
+}
+
+@keyframes ResponsiveBehaviorElementsAutoHeight-Rectangle-1000002727-transform {
+  0% {
+    transform: translate(-7.69445px, 0px);
+    animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
+  }
+  50.005001% {
+    transform: translate(0px, 0px);
+    animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
+  }
+  100% {
+    transform: translate(-7.69445px, 0px);
+  }
+}
+
+@keyframes ResponsiveBehaviorElementsAutoHeight-Rectangle-1000002727-width {
+  0% {
+    width: 60.3889px;
+    animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
+  }
+  50.005001% {
+    width: 45px;
+    animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
+  }
+  100% {
+    width: 60.3889px;
+  }
+}
+
+.ResponsiveBehaviorElementsAutoHeight-Rectangle-1000002727-2 {
+  transform-box: fill-box;
+  transform-origin: 50% 50%;
+  animation:
+    ResponsiveBehaviorElementsAutoHeight-Rectangle-1000002727-2-transform 3333ms linear infinite both,
+    ResponsiveBehaviorElementsAutoHeight-Rectangle-1000002727-2-opacity 3333ms linear infinite both;
+}
+
+.ResponsiveBehaviorElementsAutoHeight-Rectangle-1000002727-2-shape {
+  animation: ResponsiveBehaviorElementsAutoHeight-Rectangle-1000002727-2-width 3333ms linear infinite both;
+}
+
+@keyframes ResponsiveBehaviorElementsAutoHeight-Rectangle-1000002727-2-transform {
+  0% {
+    transform: translate(22.505px, 7.5px);
+    animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
+  }
+  50.005001% {
+    transform: translate(0px, 7.5px);
+    animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
+  }
+  100% {
+    transform: translate(22.505px, 7.5px);
+  }
+}
+
+@keyframes ResponsiveBehaviorElementsAutoHeight-Rectangle-1000002727-2-opacity {
+  0% {
+    opacity: 0;
+    animation-timing-function: steps(1, jump-end);
+  }
+  24.992499% {
+    opacity: 1;
+    animation-timing-function: steps(1, jump-end);
+  }
+  77.49775% {
+    opacity: 0;
+    animation-timing-function: steps(1, jump-end);
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+@keyframes ResponsiveBehaviorElementsAutoHeight-Rectangle-1000002727-2-width {
+  0% {
+    width: 0px;
+    animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
+  }
+  50.005001% {
+    width: 45px;
+    animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
+  }
+  100% {
+    width: 0.000001px;
+  }
+}
+
+.ResponsiveBehaviorElementsAutoHeight-Rectangle-1000002727-2-2 {
+  transform-box: fill-box;
+  transform-origin: 50% 50%;
+  animation:
+    ResponsiveBehaviorElementsAutoHeight-Rectangle-1000002727-2-2-transform 3333ms linear infinite both,
+    ResponsiveBehaviorElementsAutoHeight-Rectangle-1000002727-2-2-opacity 3333ms linear infinite both;
+}
+
+.ResponsiveBehaviorElementsAutoHeight-Rectangle-1000002727-2-2-shape {
+  animation: ResponsiveBehaviorElementsAutoHeight-Rectangle-1000002727-2-2-width 3333ms linear infinite both;
+}
+
+@keyframes ResponsiveBehaviorElementsAutoHeight-Rectangle-1000002727-2-2-transform {
+  0% {
+    transform: translate(22.505px, 15px);
+    animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
+  }
+  50.005001% {
+    transform: translate(5.1px, 15px);
+    animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
+  }
+  100% {
+    transform: translate(22.505px, 15px);
+  }
+}
+
+@keyframes ResponsiveBehaviorElementsAutoHeight-Rectangle-1000002727-2-2-opacity {
+  0% {
+    opacity: 0;
+    animation-timing-function: steps(1, jump-end);
+  }
+  26.252625% {
+    opacity: 1;
+    animation-timing-function: steps(1, jump-end);
+  }
+  75.007501% {
+    opacity: 0;
+    animation-timing-function: steps(1, jump-end);
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+@keyframes ResponsiveBehaviorElementsAutoHeight-Rectangle-1000002727-2-2-width {
+  0% {
+    width: 0px;
+    animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
+  }
+  50.005001% {
+    width: 34.938px;
+    animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
+  }
+  100% {
+    width: 0.000001px;
+  }
+}
+
+.ResponsiveBehaviorElementsAutoHeight-Vector {
+  transform-box: fill-box;
+  transform-origin: 50% 50%;
+  animation: ResponsiveBehaviorElementsAutoHeight-Vector-transform 3333ms linear infinite both;
+}
+
+@keyframes ResponsiveBehaviorElementsAutoHeight-Vector-transform {
+  0% {
+    transform: translate(0px, 0px);
+    animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
+  }
+  50.005001% {
+    transform: translate(37px, 0px);
+    animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
+  }
+  100% {
+    transform: translate(0.000001px, 0px);
+  }
+}
+
+.ResponsiveBehaviorElementsAutoHeight-Vector_2 {
+  transform-box: fill-box;
+  transform-origin: 50% 50%;
+  animation: ResponsiveBehaviorElementsAutoHeight-Vector_2-transform 3333ms linear infinite both;
+}
+
+@keyframes ResponsiveBehaviorElementsAutoHeight-Vector_2-transform {
+  0% {
+    transform: translate(0px, 0px);
+    animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
+  }
+  50.005001% {
+    transform: translate(-37px, 0px);
+    animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
+  }
+  100% {
+    transform: translate(-0.000001px, 0px);
+  }
+}
+
+.ResponsiveBehaviorElementsAutoHeight-node-3 {
+  transform-box: fill-box;
+  transform-origin: 50% 50%;
+  animation: ResponsiveBehaviorElementsAutoHeight-node-3-transform 3333ms linear infinite both;
+}
+
+.ResponsiveBehaviorElementsAutoHeight-node-3-shape {
+  animation: ResponsiveBehaviorElementsAutoHeight-node-3-width 3333ms linear infinite both;
+}
+
+@keyframes ResponsiveBehaviorElementsAutoHeight-node-3-transform {
+  0% {
+    transform: translate(0px, 0px);
+    animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
+  }
+  50.005001% {
+    transform: translate(37px, 0px);
+    animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
+  }
+  100% {
+    transform: translate(0.000001px, 0px);
+  }
+}
+
+@keyframes ResponsiveBehaviorElementsAutoHeight-node-3-width {
+  0% {
+    width: 147px;
+    animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
+  }
+  50.015002% {
+    width: 73px;
+    animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
+  }
+  100% {
+    width: 147px;
+  }
+}
+
+.ResponsiveBehaviorElementsAutoHeight-node-6-shape {
+  animation: node-6-height 3333ms linear infinite both;
+}
+
+@keyframes node-6-height {
+  0% {
+    height: 56px;
+    animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
+  }
+  50.005001% {
+    height: 71px;
+    animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
+  }
+  100% {
+    height: 56px;
+  }
+}
+
+.ResponsiveBehaviorElementsAutoHeight-node-7-3 {
+  transform-box: fill-box;
+  transform-origin: 73.5px 0px;
+  animation: ResponsiveBehaviorElementsAutoHeight-node-7-3-transform 3333ms linear infinite both;
+}
+
+.ResponsiveBehaviorElementsAutoHeight-node-7-3-shape {
+  animation:
+    ResponsiveBehaviorElementsAutoHeight-node-7-3-width 3333ms linear infinite both,
+    ResponsiveBehaviorElementsAutoHeight-node-7-3-height 3333ms linear infinite both;
+}
+
+@keyframes ResponsiveBehaviorElementsAutoHeight-node-7-3-transform {
+  0% {
+    transform: translate(0px, -12.5px);
+    animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
+  }
+  50.015002% {
+    transform: translate(37px, -12.5px);
+    animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
+  }
+  100% {
+    transform: translate(0px, -12.5px);
+  }
+}
+
+@keyframes ResponsiveBehaviorElementsAutoHeight-node-7-3-width {
+  0% {
+    width: 147px;
+    animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
+  }
+  50.015002% {
+    width: 73px;
+    animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
+  }
+  100% {
+    width: 147px;
+  }
+}
+
+@keyframes ResponsiveBehaviorElementsAutoHeight-node-7-3-height {
+  0% {
+    height: 56px;
+    animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
+  }
+  50.005001% {
+    height: 71px;
+    animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
+  }
+  100% {
+    height: 56px;
+  }
+}
+
+.ResponsiveBehaviorElementsAutoHeight-node-8 {
+  transform-box: fill-box;
+  transform-origin: 50% 50%;
+  animation: ResponsiveBehaviorElementsAutoHeight-node-8-transform 3333ms linear infinite both;
+}
+
+@keyframes ResponsiveBehaviorElementsAutoHeight-node-8-transform {
+  0% {
+    transform: translate(0px, 0px);
+    animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
+  }
+  50.005001% {
+    transform: translate(0px, 15px);
+    animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
+  }
+  100% {
+    transform: translate(0px, 0px);
+  }
+}
+    
+
 /* ResponsiveBehaviorElementsFixed */
 
 .ResponsiveBehaviorElementsFixed-root {

package/dist/esm/animated/index.js

@@ -8,6 +8,7 @@ import { HeaderScrollEffectStayFixed } from "./HeaderScrollEffectStayFixed";
 import { LimitScaling2 } from "./LimitScaling2";
 import { MaxMin } from "./MaxMin";
 import { MobileAlgoFast } from "./MobileAlgoFast";
+import { ResponsiveBehaviorElementsAutoHeight } from "./ResponsiveBehaviorElementsAutoHeight";
 import { ResponsiveBehaviorElementsFixed } from "./ResponsiveBehaviorElementsFixed";
 import { ResponsiveBehaviorElementsRelativeWidth } from "./ResponsiveBehaviorElementsRelativeWidth";
 import { ResponsiveBehaviorElementsScaleProportionally } from "./ResponsiveBehaviorElementsScaleProportionally";
@@ -36,6 +37,7 @@ export {
   LimitScaling2,
   MaxMin,
   MobileAlgoFast,
+  ResponsiveBehaviorElementsAutoHeight,
   ResponsiveBehaviorElementsFixed,
   ResponsiveBehaviorElementsRelativeWidth,
   ResponsiveBehaviorElementsScaleProportionally,

package/dist/types/animated/ResponsiveBehaviorElementsAutoHeight.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export type ResponsiveBehaviorElementsAutoHeightHandle = {
+    play: () => void;
+    pause: () => void;
+    reset: () => void;
+};
+export declare const ResponsiveBehaviorElementsAutoHeight: React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement>, "ref"> & React.RefAttributes<ResponsiveBehaviorElementsAutoHeightHandle>>;

package/dist/types/animated/index.d.ts

@@ -18,6 +18,8 @@ export { MaxMin } from './MaxMin';
 export type { MaxMinHandle } from './MaxMin';
 export { MobileAlgoFast } from './MobileAlgoFast';
 export type { MobileAlgoFastHandle } from './MobileAlgoFast';
+export { ResponsiveBehaviorElementsAutoHeight } from './ResponsiveBehaviorElementsAutoHeight';
+export type { ResponsiveBehaviorElementsAutoHeightHandle } from './ResponsiveBehaviorElementsAutoHeight';
 export { ResponsiveBehaviorElementsFixed } from './ResponsiveBehaviorElementsFixed';
 export type { ResponsiveBehaviorElementsFixedHandle } from './ResponsiveBehaviorElementsFixed';
 export { ResponsiveBehaviorElementsRelativeWidth } from './ResponsiveBehaviorElementsRelativeWidth';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/design-system-illustrations",
-  "version": "2.37.10",
+  "version": "2.38.1",
   "license": "MIT",
   "description": "Wix Design System Illustrations",
   "scripts": {
@@ -10,7 +10,7 @@
   },
   "devDependencies": {
     "@typescript-eslint/parser": "^8.58.1",
-    "@wix/design-system-tokens": "1.232.2",
+    "@wix/design-system-tokens": "1.232.4",
     "dom-serializer": "^1.0.1",
     "domutils": "^2.8.0",
     "esbuild": "^0.25.0",
@@ -53,5 +53,5 @@
     "access": "public"
   },
   "packageManager": "yarn@4.0.2",
-  "falconPackageHash": "a97cc0b39c56fd86f5b06bbe7083d9f3806cb60014906255d10769a6"
+  "falconPackageHash": "be7d4f22b7c45a2a796c9cd92f7a12e2641ba595d061c0af8e274a35"
 }