@wix/design-system-illustrations 2.28.7 → 2.30.0

package/dist/esm/animated/SectionScale.js

@@ -1,7 +1,8 @@
-import React, { forwardRef, useEffect, useImperativeHandle, useRef } from "react";
+import React, { forwardRef, useEffect, useId, useImperativeHandle, useRef } from "react";
 const SectionScale = forwardRef(
   ({ className, ...props }, ref) => {
     const svgRef = useRef(null);
+    const uid = useId().replace(/:/g, "");
     useImperativeHandle(
       ref,
       () => ({
@@ -32,8 +33,8 @@ const SectionScale = forwardRef(
         className: ["SectionScale-root", className].filter(Boolean).join(" "),
         ...props
       },
-      /* @__PURE__ */ React.createElement("defs", null, /* @__PURE__ */ React.createElement("linearGradient", { id: "SectionScale-paint0_linear_1118_5963", x1: "69.8122", y1: "25.6667", x2: "-91.7874", y2: "84.3309", 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: "SectionScale-paint1_linear_1118_5963", x1: "180.625", y1: "18.6735", x2: "134.776", y2: "99.5385", 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: "SectionScale-filter0_i_1118_5963", filterUnits: "objectBoundingBox", x: "-1", y: "-1", width: "3", height: "3", colorInterpolationFilters: "sRGB" }, /* @__PURE__ */ React.createElement("feFlood", { result: "BackgroundImageFix", floodOpacity: "0" }), /* @__PURE__ */ React.createElement("feBlend", { mode: "normal", in: "SourceGraphic", in2: "BackgroundImageFix", result: "shape" }), /* @__PURE__ */ React.createElement("feColorMatrix", { in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }), /* @__PURE__ */ React.createElement("feOffset", { dx: "1", dy: "1" }), /* @__PURE__ */ React.createElement("feGaussianBlur", { stdDeviation: "1.5" }), /* @__PURE__ */ React.createElement("feComposite", { in2: "hardAlpha", operator: "arithmetic", k2: "-1", k3: "1" }), /* @__PURE__ */ React.createElement("feColorMatrix", { type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.14 0" }), /* @__PURE__ */ React.createElement("feBlend", { mode: "normal", in2: "shape", result: "effect1_innerShadow_1118_5963" })), /* @__PURE__ */ React.createElement("filter", { id: "SectionScale-filter1_f_1118_5963", 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: "8.40795", result: "effect1_foregroundBlur_1118_5963" })), /* @__PURE__ */ React.createElement("filter", { id: "SectionScale-filter2_f_1118_5963", 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_1118_5963" })), /* @__PURE__ */ React.createElement("clipPath", { id: "SectionScale-clip0_1118_5963" }, /* @__PURE__ */ React.createElement("rect", { x: "44.6865", y: "33.498", width: "147", height: "60.0044", rx: "4", fill: "white" })), /* @__PURE__ */ React.createElement("clipPath", { id: "SectionScale-clip1_1118_5963" }, /* @__PURE__ */ React.createElement("rect", { x: "108.685", y: "66.7356", width: "19", height: "7", rx: "3.5", fill: "white" }))),
-      /* @__PURE__ */ React.createElement("g", null, /* @__PURE__ */ React.createElement("g", { fill: "none", filter: "url(#SectionScale-filter0_i_1118_5963)" }, /* @__PURE__ */ React.createElement("path", { d: "M0 8C0 3.58172 3.58172 0 8 0H228C232.418 0 236 3.58172 236 8V119C236 123.418 232.418 127 228 127H8C3.58172 127 0 123.418 0 119V8Z", fill: "#303030" }), /* @__PURE__ */ React.createElement("rect", { x: "81.6865", y: "23", width: "73", height: "81", rx: "6", fill: "#F8F6F6", className: "SectionScale-node-3-2", fillOpacity: "0.25" }), /* @__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: "#B8C4FF", className: "SectionScale-node-4" }), /* @__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: "#B8C4FF", className: "SectionScale-node-5" }), /* @__PURE__ */ React.createElement("g", { className: "SectionScale-crop-mrxanv9k-m" }, /* @__PURE__ */ React.createElement("rect", { x: "0", y: "0", width: "236", height: "127", fill: "none" }), /* @__PURE__ */ React.createElement("g", null, /* @__PURE__ */ React.createElement("g", { display: "none", fill: "none", opacity: "0.5" }, /* @__PURE__ */ React.createElement("rect", { x: "44.6865", y: "33.498", width: "147", height: "60.0044", rx: "6", fill: "#F8F6F6" })), /* @__PURE__ */ React.createElement("g", { fill: "none", className: "SectionScale-node-8", clipPath: "url(#SectionScale-clip0_1118_5963)" }, /* @__PURE__ */ React.createElement("rect", { x: "44.6865", y: "33.498", width: "147", height: "60.0044", rx: "4", fill: "#002294" }), /* @__PURE__ */ React.createElement("g", { fill: "none", filter: "url(#SectionScale-filter1_f_1118_5963)" }, /* @__PURE__ */ React.createElement("path", { d: "M 330.543 93.502 L 330.543004 12.1524 L 44.594004 12.152388 L 44.594 93.501988 Z", fill: "url(#SectionScale-paint0_linear_1118_5963)", className: "SectionScale-node-11" }))), /* @__PURE__ */ React.createElement("g", null, /* @__PURE__ */ React.createElement("rect", { x: "101.68655", y: "53.2649", width: "33", height: "1.66238", rx: "0.831192", fill: "#002294", className: "SectionScale-node-12" }), /* @__PURE__ */ React.createElement("rect", { x: "109.1856", y: "59.0569", width: "18", height: "1.66238", rx: "0.831192", fill: "#002294", className: "SectionScale-node-13" }), /* @__PURE__ */ React.createElement("g", { fill: "none", className: "SectionScale-node-14", clipPath: "url(#SectionScale-clip1_1118_5963)" }, /* @__PURE__ */ React.createElement("rect", { x: "108.685", y: "66.7356", width: "19", height: "7", rx: "3.5", fill: "#002294" }), /* @__PURE__ */ React.createElement("g", { fill: "none", filter: "url(#SectionScale-filter2_f_1118_5963)" }, /* @__PURE__ */ React.createElement("path", { d: "M108.685 13.2295H192.515V73.8807H108.685V13.2295Z", fill: "url(#SectionScale-paint1_linear_1118_5963)" })), /* @__PURE__ */ React.createElement("rect", { x: "44.6865", y: "33.498", width: "147", height: "60.0044", rx: "6", fill: "#F8F6F6", opacity: "0" })))))))
+      /* @__PURE__ */ React.createElement("defs", null, /* @__PURE__ */ React.createElement("linearGradient", { id: `${uid}-paint0_linear_1118_5963`, x1: "69.8122", y1: "25.6667", x2: "-91.7874", y2: "84.3309", 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_1118_5963`, x1: "180.625", y1: "18.6735", x2: "134.776", y2: "99.5385", 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_i_1118_5963`, filterUnits: "objectBoundingBox", x: "-1", y: "-1", width: "3", height: "3", colorInterpolationFilters: "sRGB" }, /* @__PURE__ */ React.createElement("feFlood", { result: "BackgroundImageFix", floodOpacity: "0" }), /* @__PURE__ */ React.createElement("feBlend", { mode: "normal", in: "SourceGraphic", in2: "BackgroundImageFix", result: "shape" }), /* @__PURE__ */ React.createElement("feColorMatrix", { in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }), /* @__PURE__ */ React.createElement("feOffset", { dx: "1", dy: "1" }), /* @__PURE__ */ React.createElement("feGaussianBlur", { stdDeviation: "1.5" }), /* @__PURE__ */ React.createElement("feComposite", { in2: "hardAlpha", operator: "arithmetic", k2: "-1", k3: "1" }), /* @__PURE__ */ React.createElement("feColorMatrix", { type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.14 0" }), /* @__PURE__ */ React.createElement("feBlend", { mode: "normal", in2: "shape", result: "effect1_innerShadow_1118_5963" })), /* @__PURE__ */ React.createElement("filter", { id: `${uid}-filter1_f_1118_5963`, 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: "8.40795", result: "effect1_foregroundBlur_1118_5963" })), /* @__PURE__ */ React.createElement("filter", { id: `${uid}-filter2_f_1118_5963`, 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_1118_5963" })), /* @__PURE__ */ React.createElement("clipPath", { id: `${uid}-clip0_1118_5963` }, /* @__PURE__ */ React.createElement("rect", { x: "44.6865", y: "33.498", width: "147", height: "60.0044", rx: "4", fill: "white" })), /* @__PURE__ */ React.createElement("clipPath", { id: `${uid}-clip1_1118_5963` }, /* @__PURE__ */ React.createElement("rect", { x: "108.685", y: "66.7356", width: "19", height: "7", rx: "3.5", fill: "white" }))),
+      /* @__PURE__ */ React.createElement("g", null, /* @__PURE__ */ React.createElement("g", { fill: "none", filter: `url(#${uid}-filter0_i_1118_5963)` }, /* @__PURE__ */ React.createElement("path", { d: "M0 8C0 3.58172 3.58172 0 8 0H228C232.418 0 236 3.58172 236 8V119C236 123.418 232.418 127 228 127H8C3.58172 127 0 123.418 0 119V8Z", fill: "#303030" }), /* @__PURE__ */ React.createElement("rect", { x: "81.6865", y: "23", width: "73", height: "81", rx: "6", fill: "#F8F6F6", className: "SectionScale-node-3-2", fillOpacity: "0.25" }), /* @__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: "#B8C4FF", className: "SectionScale-node-4" }), /* @__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: "#B8C4FF", className: "SectionScale-node-5" }), /* @__PURE__ */ React.createElement("g", { className: "SectionScale-crop-mrxanv9k-m" }, /* @__PURE__ */ React.createElement("rect", { x: "0", y: "0", width: "236", height: "127", fill: "none" }), /* @__PURE__ */ React.createElement("g", null, /* @__PURE__ */ React.createElement("g", { display: "none", fill: "none", opacity: "0.5" }, /* @__PURE__ */ React.createElement("rect", { x: "44.6865", y: "33.498", width: "147", height: "60.0044", rx: "6", fill: "#F8F6F6" })), /* @__PURE__ */ React.createElement("g", { fill: "none", className: "SectionScale-node-8", clipPath: `url(#${uid}-clip0_1118_5963)` }, /* @__PURE__ */ React.createElement("rect", { x: "44.6865", y: "33.498", width: "147", height: "60.0044", rx: "4", fill: "#002294" }), /* @__PURE__ */ React.createElement("g", { fill: "none", filter: `url(#${uid}-filter1_f_1118_5963)` }, /* @__PURE__ */ React.createElement("path", { d: "M 330.543 93.502 L 330.543004 12.1524 L 44.594004 12.152388 L 44.594 93.501988 Z", fill: `url(#${uid}-paint0_linear_1118_5963)`, className: "SectionScale-node-11" }))), /* @__PURE__ */ React.createElement("g", null, /* @__PURE__ */ React.createElement("rect", { x: "101.68655", y: "53.2649", width: "33", height: "1.66238", rx: "0.831192", fill: "#002294", className: "SectionScale-node-12" }), /* @__PURE__ */ React.createElement("rect", { x: "109.1856", y: "59.0569", width: "18", height: "1.66238", rx: "0.831192", fill: "#002294", className: "SectionScale-node-13" }), /* @__PURE__ */ React.createElement("g", { fill: "none", className: "SectionScale-node-14", clipPath: `url(#${uid}-clip1_1118_5963)` }, /* @__PURE__ */ React.createElement("rect", { x: "108.685", y: "66.7356", width: "19", height: "7", rx: "3.5", fill: "#002294" }), /* @__PURE__ */ React.createElement("g", { fill: "none", filter: `url(#${uid}-filter2_f_1118_5963)` }, /* @__PURE__ */ React.createElement("path", { d: "M108.685 13.2295H192.515V73.8807H108.685V13.2295Z", fill: `url(#${uid}-paint1_linear_1118_5963)` })), /* @__PURE__ */ React.createElement("rect", { x: "44.6865", y: "33.498", width: "147", height: "60.0044", rx: "6", fill: "#F8F6F6", opacity: "0" })))))))
     );
   }
 );