@wix/design-system-illustrations 2.39.1 → 2.40.1
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.
- package/dist/cjs/animated/FullWidth2.js +88 -0
- package/dist/cjs/animated/HoverSquareInvertText.js +88 -0
- package/dist/cjs/animated/MaxMin.js +1 -1
- package/dist/cjs/animated/MobileAlgoFast.js +1 -1
- package/dist/cjs/animated/ResponsiveBehaviorElementsFixed.js +1 -1
- package/dist/cjs/animated/Split01.js +88 -0
- package/dist/cjs/animated/ThumbnailContainer.js +88 -0
- package/dist/cjs/animated/ThumbnailContainer2.js +88 -0
- package/dist/cjs/animated/animated.global.css +391 -1
- package/dist/cjs/animated/index.js +15 -0
- package/dist/esm/animated/FullWidth2.js +44 -0
- package/dist/esm/animated/HoverSquareInvertText.js +44 -0
- package/dist/esm/animated/MaxMin.js +1 -1
- package/dist/esm/animated/MobileAlgoFast.js +1 -1
- package/dist/esm/animated/ResponsiveBehaviorElementsFixed.js +1 -1
- package/dist/esm/animated/Split01.js +44 -0
- package/dist/esm/animated/ThumbnailContainer.js +44 -0
- package/dist/esm/animated/ThumbnailContainer2.js +44 -0
- package/dist/esm/animated/animated.global.css +391 -1
- package/dist/esm/animated/index.js +10 -0
- package/dist/types/animated/FullWidth2.d.ts +7 -0
- package/dist/types/animated/HoverSquareInvertText.d.ts +7 -0
- package/dist/types/animated/Split01.d.ts +7 -0
- package/dist/types/animated/ThumbnailContainer.d.ts +7 -0
- package/dist/types/animated/ThumbnailContainer2.d.ts +7 -0
- package/dist/types/animated/index.d.ts +10 -0
- package/package.json +3 -3
- package/src/animated/FullWidth2.html +123 -0
- package/src/animated/HoverSquareInvertText.html +124 -0
- package/src/animated/MaxMin.html +1 -2
- package/src/animated/MobileAlgoFast.html +1 -1
- package/src/animated/ResponsiveBehaviorElementsFixed.html +1 -1
- package/src/animated/Split01.html +129 -0
- package/src/animated/ThumbnailContainer.html +152 -0
- package/src/animated/ThumbnailContainer2.html +150 -0
|
@@ -34,7 +34,7 @@ const MaxMin = forwardRef(
|
|
|
34
34
|
...props
|
|
35
35
|
},
|
|
36
36
|
/* @__PURE__ */ React.createElement("defs", null, /* @__PURE__ */ React.createElement("linearGradient", { id: `${uid}-paint0_linear_1118_5030-5`, x1: "167.357", y1: "8.03", x2: "-42", y2: "124.333", 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}-paint0_linear_1118_5105`, x1: "59.5049", y1: "12.586", x2: "-51.9923", y2: "82.9419", 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}-paint0_linear_1118_5206`, x1: "79.8102", y1: "12.6561", x2: "-42.5807", y2: "115.666", 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_5020`, x1: "181.526", y1: "21.1003", x2: "135.676", y2: "101.965", 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_1118_5105`, x1: "227.54", y1: "-13.9712", x2: "148.479", y2: "125.47", 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_1118_5206`, x1: "227.541", y1: "-14.6005", x2: "148.48", y2: "124.84", 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_1118_5020`, 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_5020" })), /* @__PURE__ */ React.createElement("clipPath", { id: `${uid}-clip1_1118_5020` }, /* @__PURE__ */ React.createElement("rect", { x: "109.585", y: "64.1624", width: "16.8295", height: "12", rx: "2", fill: "white" })), /* @__PURE__ */ React.createElement("filter", { id: `${uid}-filter0_f_1118_5105`, 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: "6.4252", result: "effect1_foregroundBlur_1118_5105" })), /* @__PURE__ */ React.createElement("clipPath", { id: `${uid}-clip0_1118_5105` }, /* @__PURE__ */ React.createElement("rect", { x: "55.998", y: "33.498", width: "124", height: "60.0044", rx: "4", fill: "white" })), /* @__PURE__ */ React.createElement("clipPath", { id: `${uid}-clip1_1118_5105` }, /* @__PURE__ */ React.createElement("rect", { x: "103.489", y: "60.2832", width: "29.0202", height: "20.6924", rx: "4", fill: "white" })), /* @__PURE__ */ React.createElement("filter", { id: `${uid}-filter0_f_1118_5206`, 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: "6.35417", result: "effect1_foregroundBlur_1118_5206" })), /* @__PURE__ */ React.createElement("filter", { id: `${uid}-filter1_f_1118_5206`, 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: "6.4252", result: "effect1_foregroundBlur_1118_5206" })), /* @__PURE__ */ React.createElement("clipPath", { id: `${uid}-clip0_1118_5206` }, /* @__PURE__ */ React.createElement("rect", { x: "56", y: "33.498", width: "124", height: "60.0044", rx: "4", fill: "white" })), /* @__PURE__ */ React.createElement("clipPath", { id: `${uid}-clip1_1118_5206` }, /* @__PURE__ */ React.createElement("rect", { x: "103.49", y: "59.6538", width: "29.0202", height: "20.6924", rx: "4", fill: "white" })), /* @__PURE__ */ React.createElement("mask", { id: `${uid}-am-rect-msbmexah-d`, maskUnits: "userSpaceOnUse", "mask-type": "alpha", x: "0", y: "0", width: "236", height: "127" }, /* @__PURE__ */ React.createElement("rect", { x: "45", y: "23", width: "146", height: "81", rx: "6", ry: "6", fill: "var(--color-5)", stroke: "var(--color-6)", strokeWidth: "0" })), /* @__PURE__ */ React.createElement("mask", { id: `${uid}-am-rect-msbm1tdl-9`, maskUnits: "userSpaceOnUse", "mask-type": "alpha", x: "0", y: "0", width: "236", height: "127" }, /* @__PURE__ */ React.createElement("g", { className: "MaxMin-rect-msbm1tdl-9" }, " ", /* @__PURE__ */ React.createElement("rect", { x: "56", y: "33.5", width: "124", height: "60", rx: "4", fill: "var(--color-5)", stroke: "var(--color-6)", className: "MaxMin-rect-msbm1tdl-9-shape", strokeWidth: "0" })))),
|
|
37
|
-
/* @__PURE__ */ React.createElement("g", null, /* @__PURE__ */ React.createElement("g", { className: "MaxMin-node-2" }, /* @__PURE__ */ React.createElement("path", { d: "M65.001 67.5001V59.5001C65.001 58.9478 64.5533 58.5001 64.001 58.5001C63.4487 58.5001 63.001 58.9478 63.001 59.5001V67.5001C63.001 68.0523 63.4487 68.5001 64.001 68.5001C64.5533 68.5001 65.001 68.0523 65.001 67.5001Z", fill: "var(--color-3)" })), /* @__PURE__ */ React.createElement("g", { className: "MaxMin-node-3" }, /* @__PURE__ */ React.createElement("path", { d: "M173.001 67.5001V59.5001C173.001 58.9478 172.553 58.5001 172.001 58.5001C171.449 58.5001 171.001 58.9478 171.001 59.5001V67.5001C171.001 68.0523 171.449 68.5001 172.001 68.5001C172.553 68.5001 173.001 68.0523 173.001 67.5001Z", fill: "var(--color-3)" })), /* @__PURE__ */ React.createElement("g", { className: "MaxMin-rect-msbreia1-12" }, /* @__PURE__ */ React.createElement("rect", { x: "68", y: "15", width: "100", height: "97", rx: "6", ry: "6", fill: "var(--color-
|
|
37
|
+
/* @__PURE__ */ React.createElement("g", null, /* @__PURE__ */ React.createElement("g", { className: "MaxMin-node-2" }, /* @__PURE__ */ React.createElement("path", { d: "M65.001 67.5001V59.5001C65.001 58.9478 64.5533 58.5001 64.001 58.5001C63.4487 58.5001 63.001 58.9478 63.001 59.5001V67.5001C63.001 68.0523 63.4487 68.5001 64.001 68.5001C64.5533 68.5001 65.001 68.0523 65.001 67.5001Z", fill: "var(--color-3)" })), /* @__PURE__ */ React.createElement("g", { className: "MaxMin-node-3" }, /* @__PURE__ */ React.createElement("path", { d: "M173.001 67.5001V59.5001C173.001 58.9478 172.553 58.5001 172.001 58.5001C171.449 58.5001 171.001 58.9478 171.001 59.5001V67.5001C171.001 68.0523 171.449 68.5001 172.001 68.5001C172.553 68.5001 173.001 68.0523 173.001 67.5001Z", fill: "var(--color-3)" })), /* @__PURE__ */ React.createElement("g", { className: "MaxMin-rect-msbreia1-12" }, /* @__PURE__ */ React.createElement("rect", { x: "68", y: "15", width: "100", height: "97", rx: "6", ry: "6", fill: "var(--color-4)", stroke: "var(--color-6)", opacity: "0.5", className: "MaxMin-rect-msbreia1-12-shape", strokeWidth: "0" })), /* @__PURE__ */ React.createElement("g", { mask: `url(#${uid}-am-rect-msbmexah-d)` }, /* @__PURE__ */ React.createElement("g", null, /* @__PURE__ */ React.createElement("g", { mask: `url(#${uid}-am-rect-msbm1tdl-9)` }, /* @__PURE__ */ React.createElement("g", { className: "MaxMin-node-1-4" }, /* @__PURE__ */ React.createElement("path", { d: "M 230 123 L 230.000005 0 L 0.000005 -0.00001 L 0 122.99999 Z", fill: `url(#${uid}-paint0_linear_1118_5030-5)` }))))), /* @__PURE__ */ React.createElement("g", { className: "MaxMin-node-8" }, /* @__PURE__ */ React.createElement("rect", { x: "88.4998", y: "50.8381", width: "59", height: "1.5", rx: "0.75", fill: "var(--color-2)", className: "MaxMin-node-8-shape" })), /* @__PURE__ */ React.createElement("g", { className: "MaxMin-node-9" }, /* @__PURE__ */ React.createElement("rect", { x: "101.99965", y: "56.5002", width: "32", height: "1.5", rx: "0.75", fill: "var(--color-2)", className: "MaxMin-node-9-shape" })), /* @__PURE__ */ React.createElement("g", { fill: "none", className: "MaxMin-node-10", clipPath: `url(#${uid}-clip1_1118_5020)` }, /* @__PURE__ */ React.createElement("rect", { x: "109.585", y: "64.1624", width: "16.8295", height: "12", rx: "2", fill: "var(--color-2)" }), /* @__PURE__ */ React.createElement("g", { fill: "none", filter: `url(#${uid}-filter0_f_1118_5020)` }, /* @__PURE__ */ React.createElement("path", { d: "M109.586 15.6563H193.415V76.3075H109.586V15.6563Z", fill: `url(#${uid}-paint1_linear_1118_5020)` }))))
|
|
38
38
|
);
|
|
39
39
|
}
|
|
40
40
|
);
|
|
@@ -34,7 +34,7 @@ const MobileAlgoFast = forwardRef(
|
|
|
34
34
|
...props
|
|
35
35
|
},
|
|
36
36
|
/* @__PURE__ */ React.createElement("defs", null, /* @__PURE__ */ React.createElement("linearGradient", { id: `${uid}-paint0_linear_1118_5545`, 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}-paint0_linear_1118_5554`, x1: "256.666", y1: "-24.132", x2: "105.46", y2: "139.118", gradientUnits: "userSpaceOnUse", gradientTransform: "rotate(0)" }, /* @__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}-paint0_linear_1118_5635`, x1: "79.8102", y1: "12.6561", x2: "-42.5807", y2: "115.666", 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_5545`, x1: "152.821", y1: "29.348", x2: "114.886", y2: "96.2534", 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_1118_5635`, x1: "170.559", y1: "15.3248", x2: "132.624", y2: "82.2301", 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}-paint2_linear_1118_5545`, x1: "170.746", y1: "29.3479", x2: "132.811", y2: "96.2532", 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}-paint2_linear_1118_5635`, x1: "170.559", y1: "29.7055", x2: "132.624", y2: "96.6108", 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}-paint3_linear_1118_5545`, x1: "188.67", y1: "29.3485", x2: "150.735", y2: "96.2538", 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}-paint3_linear_1118_5635`, x1: "170.559", y1: "44.087", x2: "132.624", y2: "110.992", 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_1118_5545`, 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_5545" })), /* @__PURE__ */ React.createElement("filter", { id: `${uid}-filter1_f_1118_5545`, 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.08289", result: "effect1_foregroundBlur_1118_5545" })), /* @__PURE__ */ React.createElement("filter", { id: `${uid}-filter2_f_1118_5545`, 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.08289", result: "effect1_foregroundBlur_1118_5545" })), /* @__PURE__ */ React.createElement("filter", { id: `${uid}-filter3_f_1118_5545`, 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.08289", result: "effect1_foregroundBlur_1118_5545" })), /* @__PURE__ */ React.createElement("clipPath", { id: `${uid}-clip0_1118_5545` }, /* @__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_5545` }, /* @__PURE__ */ React.createElement("rect", { x: "93.3", y: "64.9761", width: "13.9242", height: "9.92844", rx: "1.65474", fill: "white" })), /* @__PURE__ */ React.createElement("clipPath", { id: `${uid}-clip2_1118_5545` }, /* @__PURE__ */ React.createElement("rect", { x: "111.224", y: "64.9763", width: "13.9242", height: "9.92844", rx: "1.65474", fill: "white" })), /* @__PURE__ */ React.createElement("clipPath", { id: `${uid}-clip3_1118_5545` }, /* @__PURE__ */ React.createElement("rect", { x: "129.148", y: "64.9763", width: "13.9242", height: "9.92844", rx: "1.65474", fill: "white" })), /* @__PURE__ */ React.createElement("filter", { id: `${uid}-filter0_f_1118_5635`, 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: "6.35417", result: "effect1_foregroundBlur_1118_5635" })), /* @__PURE__ */ React.createElement("filter", { id: `${uid}-filter1_f_1118_5635`, 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.08289", result: "effect1_foregroundBlur_1118_5635" })), /* @__PURE__ */ React.createElement("filter", { id: `${uid}-filter2_f_1118_5635`, 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.08289", result: "effect1_foregroundBlur_1118_5635" })), /* @__PURE__ */ React.createElement("filter", { id: `${uid}-filter3_f_1118_5635`, 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.08289", result: "effect1_foregroundBlur_1118_5635" })), /* @__PURE__ */ React.createElement("clipPath", { id: `${uid}-clip0_1118_5635` }, /* @__PURE__ */ React.createElement("rect", { x: "95", y: "29.0005", width: "46", height: "69", rx: "4", fill: "white" })), /* @__PURE__ */ React.createElement("clipPath", { id: `${uid}-clip1_1118_5635` }, /* @__PURE__ */ React.createElement("rect", { x: "111.038", y: "50.9529", width: "13.9242", height: "9.92844", rx: "1.65474", fill: "white" })), /* @__PURE__ */ React.createElement("clipPath", { id: `${uid}-clip2_1118_5635` }, /* @__PURE__ */ React.createElement("rect", { x: "111.038", y: "65.334", width: "13.9242", height: "9.92844", rx: "1.65474", fill: "white" })), /* @__PURE__ */ React.createElement("clipPath", { id: `${uid}-clip3_1118_5635` }, /* @__PURE__ */ React.createElement("rect", { x: "111.038", y: "79.7148", width: "13.9242", height: "9.92844", rx: "1.65474", fill: "white" })), /* @__PURE__ */ React.createElement("mask", { id: `${uid}-am-rect-msbrdyhf-11`, maskUnits: "userSpaceOnUse", "mask-type": "alpha", x: "0", y: "0", width: "236", height: "127" }, /* @__PURE__ */ React.createElement("g", { className: "MobileAlgoFast-rect-msbrdyhf-11" }, " ", /* @__PURE__ */ React.createElement("rect", { x: "95", y: "15", width: "46", height: "97", rx: "4", fill: "var(--color-5)", stroke: "var(--color-6)", className: "MobileAlgoFast-rect-msbrdyhf-11-shape", strokeWidth: "0" })))),
|
|
37
|
-
/* @__PURE__ */ React.createElement("g", null, /* @__PURE__ */ React.createElement("g", { className: "MobileAlgoFast-rect-msbreia1-12" }, /* @__PURE__ */ React.createElement("rect", { x: "95", y: "15", width: "46", height: "97", rx: "6", ry: "6", fill: "var(--color-7)", stroke: "var(--color-6)", opacity: "0.
|
|
37
|
+
/* @__PURE__ */ React.createElement("g", null, /* @__PURE__ */ React.createElement("g", { className: "MobileAlgoFast-rect-msbreia1-12" }, /* @__PURE__ */ React.createElement("rect", { x: "95", y: "15", width: "46", height: "97", rx: "6", ry: "6", fill: "var(--color-7)", stroke: "var(--color-6)", opacity: "0.5", className: "MobileAlgoFast-rect-msbreia1-12-shape", strokeWidth: "0" })), /* @__PURE__ */ React.createElement("g", { className: "MobileAlgoFast-node-3-2" }, /* @__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-3)" })), /* @__PURE__ */ React.createElement("g", { className: "MobileAlgoFast-node-4-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-3)" })), /* @__PURE__ */ React.createElement("g", { mask: `url(#${uid}-am-rect-msbrdyhf-11)` }, /* @__PURE__ */ React.createElement("g", { className: "MobileAlgoFast-node-2-3" }, /* @__PURE__ */ React.createElement("path", { d: "M 285.856 60.0039 L 285.856004 -21.3457 L -0.092996 -21.345712 L -0.093 60.003888 Z", fill: `url(#${uid}-paint0_linear_1118_5554)` }))), /* @__PURE__ */ React.createElement("g", { className: "MobileAlgoFast-node-11-2" }, /* @__PURE__ */ React.createElement("rect", { x: "104.1865", y: "52.0964", width: "28", height: "1.5", rx: "0.75", fill: "var(--color-2)", className: "MobileAlgoFast-node-11-2-shape" })), /* @__PURE__ */ React.createElement("g", { className: "MobileAlgoFast-node-12" }, /* @__PURE__ */ React.createElement("rect", { x: "110.68475", y: "57.4763", width: "15", height: "1.5", rx: "0.75", fill: "var(--color-2)", className: "MobileAlgoFast-node-12-shape" })), /* @__PURE__ */ React.createElement("g", { style: { "transformBox": "fill-box", "transformOrigin": "50% 50%", "transform": "translate(0px, 0px)" }, opacity: "0", className: "MobileAlgoFast-group-msbrl69e-14" }, /* @__PURE__ */ React.createElement("g", { fill: "none", className: "MobileAlgoFast-node-13", clipPath: `url(#${uid}-clip1_1118_5545)` }, /* @__PURE__ */ React.createElement("rect", { x: "93.3", y: "64.9761", width: "13.9242", height: "9.92844", rx: "1.65474", fill: "var(--color-2)" }), /* @__PURE__ */ React.createElement("g", { fill: "none", filter: `url(#${uid}-filter1_f_1118_5545)` }, /* @__PURE__ */ React.createElement("path", { d: "M93.3 24.8438H162.658V75.0248H93.3V24.8438Z", fill: `url(#${uid}-paint1_linear_1118_5545)` }))), /* @__PURE__ */ React.createElement("g", { fill: "none", className: "MobileAlgoFast-node-21", clipPath: `url(#${uid}-clip3_1118_5545)` }, /* @__PURE__ */ React.createElement("rect", { x: "129.148", y: "64.9763", width: "13.9242", height: "9.92844", rx: "1.65474", fill: "var(--color-2)" }), /* @__PURE__ */ React.createElement("g", { fill: "none", filter: `url(#${uid}-filter3_f_1118_5545)` }, /* @__PURE__ */ React.createElement("path", { d: "M129.148 24.8443H198.506V75.0253H129.148V24.8443Z", fill: `url(#${uid}-paint3_linear_1118_5545)` })))), /* @__PURE__ */ React.createElement("g", { opacity: "0", className: "MobileAlgoFast-group-msbrk4t8-13-2" }, /* @__PURE__ */ React.createElement("g", { fill: "none", className: "MobileAlgoFast-node-11-3", clipPath: `url(#${uid}-clip1_1118_5635)` }, /* @__PURE__ */ React.createElement("rect", { x: "111.038", y: "50.9529", width: "13.9242", height: "9.92844", rx: "1.65474", fill: "var(--color-2)" }), /* @__PURE__ */ React.createElement("g", { fill: "none", filter: `url(#${uid}-filter1_f_1118_5635)` }, /* @__PURE__ */ React.createElement("path", { d: "M111.038 10.8206H180.396V61.0015H111.038V10.8206Z", fill: `url(#${uid}-paint1_linear_1118_5635)` }))), /* @__PURE__ */ React.createElement("g", { fill: "none", className: "MobileAlgoFast-node-19-2-2", clipPath: `url(#${uid}-clip3_1118_5635)` }, /* @__PURE__ */ React.createElement("rect", { x: "111.038", y: "79.7148", width: "13.9242", height: "9.92844", rx: "1.65474", fill: "var(--color-2)" }), /* @__PURE__ */ React.createElement("g", { fill: "none", filter: `url(#${uid}-filter3_f_1118_5635)` }, /* @__PURE__ */ React.createElement("path", { d: "M111.038 39.5828H180.396V89.7638H111.038V39.5828Z", fill: `url(#${uid}-paint3_linear_1118_5635)` })))), /* @__PURE__ */ React.createElement("g", { fill: "none", className: "MobileAlgoFast-node-17", clipPath: `url(#${uid}-clip2_1118_5545)` }, /* @__PURE__ */ React.createElement("rect", { x: "111.224", y: "64.9763", width: "13.9242", height: "9.92844", rx: "1.65474", fill: "var(--color-2)" }), /* @__PURE__ */ React.createElement("g", { fill: "none", filter: `url(#${uid}-filter2_f_1118_5545)` }, /* @__PURE__ */ React.createElement("path", { d: "M111.224 24.8436H180.582V75.0246H111.224V24.8436Z", fill: `url(#${uid}-paint2_linear_1118_5545)` }))))
|
|
38
38
|
);
|
|
39
39
|
}
|
|
40
40
|
);
|
|
@@ -34,7 +34,7 @@ const ResponsiveBehaviorElementsFixed = forwardRef(
|
|
|
34
34
|
...props
|
|
35
35
|
},
|
|
36
36
|
/* @__PURE__ */ React.createElement("defs", null, /* @__PURE__ */ React.createElement("linearGradient", { id: `${uid}-paint0_linear_4408_18955`, x1: "110.357", y1: "60.3438", x2: "133.427", y2: "78.8747", 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}-paint1_linear_4408_18955`, x1: "95.0927", y1: "37.3424", x2: "140.715", y2: "82.5447", 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}-paint2_linear_4408_18955`, x1: "112.887", y1: "41.654", x2: "94.8162", y2: "64.7134", 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}-filter1_f_4408_18955`, 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.01565", result: "effect1_foregroundBlur_4408_18955" })), /* @__PURE__ */ React.createElement("clipPath", { id: `${uid}-clip0_4408_18955` }, /* @__PURE__ */ React.createElement("rect", { x: "81.6875", y: "23", width: "73", height: "81", rx: "6", fill: "white" })), /* @__PURE__ */ React.createElement("clipPath", { id: `${uid}-clip1_4408_18955` }, /* @__PURE__ */ React.createElement("rect", { x: "89.5469", y: "42.6719", width: "57.2851", height: "41.6619", rx: "3.9058", fill: "white" })), /* @__PURE__ */ React.createElement("clipPath", { id: `${uid}-clip2_4408_18955` }, /* @__PURE__ */ React.createElement("rect", { x: "89.5469", y: "42.6719", width: "57.2851", height: "42.5019", rx: "3.69581", fill: "white" })), /* @__PURE__ */ React.createElement("clipPath", { id: `${uid}-clip3_4408_18955` }, /* @__PURE__ */ React.createElement("rect", { x: "94.7578", y: "47.8828", width: "11.7174", height: "11.7174", rx: "5.8587", fill: "white" }))),
|
|
37
|
-
/* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { className: "ResponsiveBehaviorElementsFixed-rect-msbreia1-12" }, /* @__PURE__ */ React.createElement("rect", { x: "68", y: "15", width: "100", height: "97", rx: "6", ry: "6", fill: "var(--color-5)", stroke: "var(--color-6)", opacity: "0.
|
|
37
|
+
/* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { className: "ResponsiveBehaviorElementsFixed-rect-msbreia1-12" }, /* @__PURE__ */ React.createElement("rect", { x: "68", y: "15", width: "100", height: "97", rx: "6", ry: "6", fill: "var(--color-5)", stroke: "var(--color-6)", opacity: "0.5", className: "ResponsiveBehaviorElementsFixed-rect-msbreia1-12-shape", strokeWidth: "0" })), /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { fill: "none", clipPath: `url(#${uid}-clip0_4408_18955)` }, /* @__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}-clip1_4408_18955)` }, /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { fill: "none", clipPath: `url(#${uid}-clip2_4408_18955)` }, /* @__PURE__ */ React.createElement("rect", { x: "89.5469", y: "42.6719", width: "57.2851", height: "42.5019", rx: "3.69581", fill: "var(--color-3)" }))), /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("path", { d: "M118.966 51.7344L102.945 77.0902L131.518 72.9196L118.966 51.7344Z", fill: `url(#${uid}-paint0_linear_4408_18955)` }), /* @__PURE__ */ React.createElement("path", { d: "M147.758 60.7908C147.758 60.7908 125.792 51.9826 124.72 51.5363C123.649 51.0901 117.002 49.0254 118.967 54.9784C120.92 60.8941 121.99 63.169 122.416 64.1792C122.841 65.1894 124.574 69.3053 120.215 70.8241C115.273 72.5447 88.625 80.716 88.625 80.716V85.4088H147.758V60.7908Z", fill: `url(#${uid}-paint1_linear_4408_18955)` })), /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { fill: "none", clipPath: `url(#${uid}-clip3_4408_18955)` }, /* @__PURE__ */ React.createElement("rect", { x: "94.7578", y: "47.8828", width: "11.7174", height: "11.7174", rx: "5.8587", fill: "var(--color-4)" }), /* @__PURE__ */ React.createElement("g", { fill: "none", filter: `url(#${uid}-filter1_f_4408_18955)` }, /* @__PURE__ */ React.createElement("path", { d: "M103.401 39.9555C102.837 40.0676 102.28 40.2231 101.738 40.422C99.5115 41.2465 97.5378 42.8159 96.2364 45.0254C93.2614 50.07 94.917 56.5321 99.9344 59.4576C104.952 62.3831 111.43 60.6618 114.405 55.6172C117.38 50.569 115.724 44.1069 110.71 41.185C108.418 39.847 105.827 39.4818 103.401 39.9555Z", fill: `url(#${uid}-paint2_linear_4408_18955)` }))))))))))), /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { className: "ResponsiveBehaviorElementsFixed-Vector_4" }, /* @__PURE__ */ React.createElement("path", { d: "M79 67.5V59.5C79 58.9477 78.5523 58.5 78 58.5C77.4477 58.5 77 58.9477 77 59.5V67.5C77 68.0523 77.4477 68.5 78 68.5C78.5523 68.5 79 68.0523 79 67.5Z", fill: "var(--color-1)" })), /* @__PURE__ */ React.createElement("g", { className: "ResponsiveBehaviorElementsFixed-Vector_5" }, /* @__PURE__ */ React.createElement("path", { d: "M159 67.5V59.5C159 58.9477 158.552 58.5 158 58.5C157.448 58.5 157 58.9477 157 59.5V67.5C157 68.0523 157.448 68.5 158 68.5C158.552 68.5 159 68.0523 159 67.5Z", fill: "var(--color-1)" }))))
|
|
38
38
|
);
|
|
39
39
|
}
|
|
40
40
|
);
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import React, { forwardRef, useEffect, useId, useImperativeHandle, useRef } from "react";
|
|
2
|
+
const Split01 = forwardRef(
|
|
3
|
+
({ className, ...props }, ref) => {
|
|
4
|
+
const svgRef = useRef(null);
|
|
5
|
+
const uid = useId().replace(/:/g, "");
|
|
6
|
+
useImperativeHandle(
|
|
7
|
+
ref,
|
|
8
|
+
() => ({
|
|
9
|
+
play: () => svgRef.current?.getAnimations({ subtree: true }).forEach((a) => a.play()),
|
|
10
|
+
pause: () => svgRef.current?.getAnimations({ subtree: true }).forEach((a) => a.pause()),
|
|
11
|
+
reset: () => svgRef.current?.getAnimations({ subtree: true }).forEach((a) => {
|
|
12
|
+
a.currentTime = 0;
|
|
13
|
+
a.pause();
|
|
14
|
+
})
|
|
15
|
+
}),
|
|
16
|
+
[]
|
|
17
|
+
);
|
|
18
|
+
useEffect(() => {
|
|
19
|
+
svgRef.current?.getAnimations({ subtree: true }).forEach((a) => {
|
|
20
|
+
a.currentTime = 0;
|
|
21
|
+
a.pause();
|
|
22
|
+
});
|
|
23
|
+
}, []);
|
|
24
|
+
return /* @__PURE__ */ React.createElement(
|
|
25
|
+
"svg",
|
|
26
|
+
{
|
|
27
|
+
ref: svgRef,
|
|
28
|
+
viewBox: "0 0 68 68",
|
|
29
|
+
fill: "none",
|
|
30
|
+
width: 68,
|
|
31
|
+
height: 68,
|
|
32
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
33
|
+
className: ["Split01-root", className].filter(Boolean).join(" "),
|
|
34
|
+
...props
|
|
35
|
+
},
|
|
36
|
+
/* @__PURE__ */ React.createElement("defs", null, /* @__PURE__ */ React.createElement("linearGradient", { id: `${uid}-paint0_linear_4428_19363`, x1: "97.8231", y1: "29.0557", x2: "58.7726", y2: "91.8283", gradientUnits: "userSpaceOnUse" }, /* @__PURE__ */ React.createElement("stop", { offset: "0.176006", stopColor: "#EAEFFF" }), /* @__PURE__ */ React.createElement("stop", { offset: "0.55", stopColor: "#B8C4FF" }), /* @__PURE__ */ React.createElement("stop", { offset: "0.8", stopColor: "#002294" })), /* @__PURE__ */ React.createElement("filter", { id: `${uid}-filter1_f_4428_19363`, filterUnits: "objectBoundingBox", x: "-1", y: "-1", width: "3", height: "3", colorInterpolationFilters: "sRGB" }, /* @__PURE__ */ React.createElement("feFlood", { result: "BackgroundImageFix", floodOpacity: "0" }), /* @__PURE__ */ React.createElement("feBlend", { mode: "normal", in: "SourceGraphic", in2: "BackgroundImageFix", result: "shape" }), /* @__PURE__ */ React.createElement("feGaussianBlur", { stdDeviation: "2.36111", result: "effect1_foregroundBlur_4428_19363" })), /* @__PURE__ */ React.createElement("clipPath", { id: `${uid}-clip0_4428_19363` }, /* @__PURE__ */ React.createElement("rect", { x: "55", y: "33", width: "22", height: "21", rx: "2.83333", transform: "rotate(90 55 33)", fill: "white" })), /* @__PURE__ */ React.createElement("mask", { id: `${uid}-am-node-1-2-2`, maskUnits: "userSpaceOnUse", "mask-type": "alpha", x: "0", y: "0", width: "68", height: "68" }, /* @__PURE__ */ React.createElement("rect", { x: "0", y: "0", width: "68", height: "68", rx: "7.55556", fill: "var(--color-1)" })), /* @__PURE__ */ React.createElement("mask", { id: `${uid}-am-node-1-2-2-2`, maskUnits: "userSpaceOnUse", "mask-type": "alpha", x: "0", y: "0", width: "68", height: "68" }, /* @__PURE__ */ React.createElement("rect", { x: "0", y: "0", width: "68", height: "68", rx: "7.55556", fill: "var(--color-1)" })), /* @__PURE__ */ React.createElement("mask", { id: `${uid}-am-node-1-2`, maskUnits: "userSpaceOnUse", "mask-type": "alpha", x: "0", y: "0", width: "68", height: "68" }, /* @__PURE__ */ React.createElement("rect", { x: "0", y: "0", width: "68", height: "68", rx: "7.55556", fill: "var(--color-1)" }))),
|
|
37
|
+
/* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { fill: "none", opacity: "0.25" }, /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("rect", { x: "13", y: "13", width: "42", height: "42", rx: "2.83333", fill: "var(--color-2)" }))), /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { mask: `url(#${uid}-am-node-1-2-2)` }, /* @__PURE__ */ React.createElement("g", { fill: "none", className: "Split01-Frame-1707483281" }, /* @__PURE__ */ React.createElement("path", { style: { "transformBox": "fill-box", "transformOrigin": "50% 50%", "transform": "translate(0px, 0px)" }, d: "M 55 15.83333 L 55 32.16667 A 2.83333 2.83333 45 0 1 52.16667 35 L 36.83333 35 A 2.83333 2.83333 45 0 1 34 32.16667 L 34 15.83333 A 2.83333 2.83333 45 0 1 36.83333 13 L 52.16667 13 A 2.83333 2.83333 45 0 1 55 15.83333 Z", fill: "var(--color-2)" }))), /* @__PURE__ */ React.createElement("g", { mask: `url(#${uid}-am-node-1-2-2-2)` }, /* @__PURE__ */ React.createElement("g", { fill: "none", className: "Split01-Frame-1707483278" }, /* @__PURE__ */ React.createElement("path", { d: "M 55 25.83333 L 55 42.16667 A 2.83333 2.83333 45 0 1 52.16667 45 L 36.83333 45 A 2.83333 2.83333 45 0 1 34 42.16667 L 34 25.83333 A 2.83333 2.83333 45 0 1 36.83333 23 L 52.16667 23 A 2.83333 2.83333 45 0 1 55 25.83333 Z", fill: "var(--color-3)" }))), /* @__PURE__ */ React.createElement("g", { mask: `url(#${uid}-am-node-1-2)` }, /* @__PURE__ */ React.createElement("g", { fill: "none", className: "Split01-Frame-1707483277" }, /* @__PURE__ */ React.createElement("g", { fill: "none", clipPath: `url(#${uid}-clip0_4428_19363)` }, /* @__PURE__ */ React.createElement("path", { d: "M 55 35.83333 L 55 52.16667 A 2.83333 2.83333 45 0 1 52.16667 55 L 36.83333 55 A 2.83333 2.83333 45 0 1 34 52.16667 L 34 35.83333 A 2.83333 2.83333 45 0 1 36.83333 33 L 52.16667 33 A 2.83333 2.83333 45 0 1 55 35.83333 Z", fill: "var(--color-2)" }), /* @__PURE__ */ React.createElement("g", { fill: "none", filter: `url(#${uid}-filter1_f_4428_19363)` }, /* @__PURE__ */ React.createElement("path", { d: "M104.953 62.2891L104.953 23.5634L25.5188 23.5634L25.5188 62.2891L104.953 62.2891Z", fill: `url(#${uid}-paint0_linear_4428_19363)` }))))))))
|
|
38
|
+
);
|
|
39
|
+
}
|
|
40
|
+
);
|
|
41
|
+
Split01.displayName = "Split01";
|
|
42
|
+
export {
|
|
43
|
+
Split01
|
|
44
|
+
};
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import React, { forwardRef, useEffect, useId, useImperativeHandle, useRef } from "react";
|
|
2
|
+
const ThumbnailContainer = forwardRef(
|
|
3
|
+
({ className, ...props }, ref) => {
|
|
4
|
+
const svgRef = useRef(null);
|
|
5
|
+
const uid = useId().replace(/:/g, "");
|
|
6
|
+
useImperativeHandle(
|
|
7
|
+
ref,
|
|
8
|
+
() => ({
|
|
9
|
+
play: () => svgRef.current?.getAnimations({ subtree: true }).forEach((a) => a.play()),
|
|
10
|
+
pause: () => svgRef.current?.getAnimations({ subtree: true }).forEach((a) => a.pause()),
|
|
11
|
+
reset: () => svgRef.current?.getAnimations({ subtree: true }).forEach((a) => {
|
|
12
|
+
a.currentTime = 0;
|
|
13
|
+
a.pause();
|
|
14
|
+
})
|
|
15
|
+
}),
|
|
16
|
+
[]
|
|
17
|
+
);
|
|
18
|
+
useEffect(() => {
|
|
19
|
+
svgRef.current?.getAnimations({ subtree: true }).forEach((a) => {
|
|
20
|
+
a.currentTime = 0;
|
|
21
|
+
a.pause();
|
|
22
|
+
});
|
|
23
|
+
}, []);
|
|
24
|
+
return /* @__PURE__ */ React.createElement(
|
|
25
|
+
"svg",
|
|
26
|
+
{
|
|
27
|
+
ref: svgRef,
|
|
28
|
+
viewBox: "0 0 68 68",
|
|
29
|
+
fill: "none",
|
|
30
|
+
width: 68,
|
|
31
|
+
height: 68,
|
|
32
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
33
|
+
className: ["ThumbnailContainer-root", className].filter(Boolean).join(" "),
|
|
34
|
+
...props
|
|
35
|
+
},
|
|
36
|
+
/* @__PURE__ */ React.createElement("defs", null, /* @__PURE__ */ React.createElement("linearGradient", { id: `${uid}-paint0_linear_4424_19163`, x1: "113.06", y1: "9.65327", x2: "47.0261", y2: "92.6155", gradientUnits: "userSpaceOnUse" }, /* @__PURE__ */ React.createElement("stop", { offset: "0.176006", stopColor: "#EAEFFF" }), /* @__PURE__ */ React.createElement("stop", { offset: "0.55", stopColor: "#B8C4FF" }), /* @__PURE__ */ React.createElement("stop", { offset: "0.8", stopColor: "#002294" })), /* @__PURE__ */ React.createElement("filter", { id: `${uid}-filter1_f_4424_19163`, filterUnits: "objectBoundingBox", x: "-1", y: "-1", width: "3", height: "3", colorInterpolationFilters: "sRGB" }, /* @__PURE__ */ React.createElement("feFlood", { result: "BackgroundImageFix", floodOpacity: "0" }), /* @__PURE__ */ React.createElement("feBlend", { mode: "normal", in: "SourceGraphic", in2: "BackgroundImageFix", result: "shape" }), /* @__PURE__ */ React.createElement("feGaussianBlur", { stdDeviation: "2.36111", result: "effect1_foregroundBlur_4424_19163" })), /* @__PURE__ */ React.createElement("clipPath", { id: `${uid}-clip0_4424_19163` }, /* @__PURE__ */ React.createElement("rect", { width: "68", height: "68", fill: "white" })), /* @__PURE__ */ React.createElement("clipPath", { id: `${uid}-clip1_4424_19163` }, /* @__PURE__ */ React.createElement("path", { d: "M0 7.55556C0 3.38274 3.38274 0 7.55556 0H60.4444C64.6173 0 68 3.38274 68 7.55556V60.4444C68 64.6173 64.6173 68 60.4444 68H7.55556C3.38274 68 0 64.6173 0 60.4444V7.55556Z", fill: "white" })), /* @__PURE__ */ React.createElement("clipPath", { id: `${uid}-clip2_4424_19163` }, /* @__PURE__ */ React.createElement("rect", { x: "54.7812", y: "32.1719", width: "23.6111", height: "20.7778", rx: "2.83333", transform: "rotate(90 54.7812 32.1719)", fill: "white" }))),
|
|
37
|
+
/* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { fill: "none", clipPath: `url(#${uid}-clip0_4424_19163)` }, /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { fill: "none", clipPath: `url(#${uid}-clip1_4424_19163)` })), /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { fill: "none", className: "ThumbnailContainer-Frame-1707483283" }, /* @__PURE__ */ React.createElement("path", { d: "M 34 16.05993 L 34 34.00437 A 2.83333 2.83333 45 0 1 31.16667 36.8377 L 16.05553 36.8377 A 2.83333 2.83333 45 0 1 13.2222 34.00437 L 13.2222 16.05993 A 2.83333 2.83333 45 0 1 16.05553 13.2266 L 31.16667 13.2266 A 2.83333 2.83333 45 0 1 34 16.05993 Z", fill: "var(--color-2)" })), /* @__PURE__ */ React.createElement("g", { fill: "none", className: "ThumbnailContainer-Frame-1707483285" }, /* @__PURE__ */ React.createElement("path", { d: "M 54.7812 21.72393 L 54.7812 39.66837 A 2.83333 2.83333 45 0 1 51.94787 42.5017 L 36.83673 42.5017 A 2.83333 2.83333 45 0 1 34.0034 39.66837 L 34.0034 21.72393 A 2.83333 2.83333 45 0 1 36.83673 18.8906 L 51.94787 18.8906 A 2.83333 2.83333 45 0 1 54.7812 21.72393 Z", fill: "var(--color-3)" })), /* @__PURE__ */ React.createElement("g", { fill: "none", className: "ThumbnailContainer-Frame-1707483284" }, /* @__PURE__ */ React.createElement("path", { d: "M 34 29.27863 L 34 47.22307 A 2.83333 2.83333 45 0 1 31.16667 50.0564 L 16.05553 50.0564 A 2.83333 2.83333 45 0 1 13.2222 47.22307 L 13.2222 29.27863 A 2.83333 2.83333 45 0 1 16.05553 26.4453 L 31.16667 26.4453 A 2.83333 2.83333 45 0 1 34 29.27863 Z", fill: "var(--color-4)" })), /* @__PURE__ */ React.createElement("g", { fill: "none", className: "ThumbnailContainer-Frame-1707483282" }, /* @__PURE__ */ React.createElement("g", { fill: "none", clipPath: `url(#${uid}-clip2_4424_19163)` }, /* @__PURE__ */ React.createElement("path", { d: "M 54.7812 35.00523 L 54.7812 52.94967 A 2.83333 2.83333 45 0 1 51.94787 55.783 L 36.83673 55.783 A 2.83333 2.83333 45 0 1 34.0034 52.94967 L 34.0034 35.00523 A 2.83333 2.83333 45 0 1 36.83673 32.1719 L 51.94787 32.1719 A 2.83333 2.83333 45 0 1 54.7812 35.00523 Z", fill: "var(--color-2)" }), /* @__PURE__ */ React.createElement("g", { fill: "none", filter: `url(#${uid}-filter1_f_4424_19163)` }, /* @__PURE__ */ React.createElement("path", { d: "M121.734 61.3828L121.734 1.10425L25.0979 1.10425L25.0979 61.3828L121.734 61.3828Z", fill: `url(#${uid}-paint0_linear_4424_19163)` })))))))
|
|
38
|
+
);
|
|
39
|
+
}
|
|
40
|
+
);
|
|
41
|
+
ThumbnailContainer.displayName = "ThumbnailContainer";
|
|
42
|
+
export {
|
|
43
|
+
ThumbnailContainer
|
|
44
|
+
};
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import React, { forwardRef, useEffect, useId, useImperativeHandle, useRef } from "react";
|
|
2
|
+
const ThumbnailContainer2 = forwardRef(
|
|
3
|
+
({ className, ...props }, ref) => {
|
|
4
|
+
const svgRef = useRef(null);
|
|
5
|
+
const uid = useId().replace(/:/g, "");
|
|
6
|
+
useImperativeHandle(
|
|
7
|
+
ref,
|
|
8
|
+
() => ({
|
|
9
|
+
play: () => svgRef.current?.getAnimations({ subtree: true }).forEach((a) => a.play()),
|
|
10
|
+
pause: () => svgRef.current?.getAnimations({ subtree: true }).forEach((a) => a.pause()),
|
|
11
|
+
reset: () => svgRef.current?.getAnimations({ subtree: true }).forEach((a) => {
|
|
12
|
+
a.currentTime = 0;
|
|
13
|
+
a.pause();
|
|
14
|
+
})
|
|
15
|
+
}),
|
|
16
|
+
[]
|
|
17
|
+
);
|
|
18
|
+
useEffect(() => {
|
|
19
|
+
svgRef.current?.getAnimations({ subtree: true }).forEach((a) => {
|
|
20
|
+
a.currentTime = 0;
|
|
21
|
+
a.pause();
|
|
22
|
+
});
|
|
23
|
+
}, []);
|
|
24
|
+
return /* @__PURE__ */ React.createElement(
|
|
25
|
+
"svg",
|
|
26
|
+
{
|
|
27
|
+
ref: svgRef,
|
|
28
|
+
viewBox: "0 0 68 68",
|
|
29
|
+
fill: "none",
|
|
30
|
+
width: 68,
|
|
31
|
+
height: 68,
|
|
32
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
33
|
+
className: ["ThumbnailContainer2-root", className].filter(Boolean).join(" "),
|
|
34
|
+
...props
|
|
35
|
+
},
|
|
36
|
+
/* @__PURE__ */ React.createElement("defs", null, /* @__PURE__ */ React.createElement("linearGradient", { id: `${uid}-paint0_linear_4424_19222`, x1: "76.7997", y1: "28.9776", x2: "37.7492", y2: "91.7501", 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}-paint1_linear_4424_19222`, x1: "98.5184", y1: "28.9776", x2: "59.4679", y2: "91.7501", 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_4424_19222`, filterUnits: "objectBoundingBox", x: "-1", y: "-1", width: "3", height: "3", colorInterpolationFilters: "sRGB" }, /* @__PURE__ */ React.createElement("feFlood", { result: "BackgroundImageFix", floodOpacity: "0" }), /* @__PURE__ */ React.createElement("feBlend", { mode: "normal", in: "SourceGraphic", in2: "BackgroundImageFix", result: "shape" }), /* @__PURE__ */ React.createElement("feGaussianBlur", { stdDeviation: "2.36111", result: "effect1_foregroundBlur_4424_19222" })), /* @__PURE__ */ React.createElement("filter", { id: `${uid}-filter2_f_4424_19222`, filterUnits: "objectBoundingBox", x: "-1", y: "-1", width: "3", height: "3", colorInterpolationFilters: "sRGB" }, /* @__PURE__ */ React.createElement("feFlood", { result: "BackgroundImageFix", floodOpacity: "0" }), /* @__PURE__ */ React.createElement("feBlend", { mode: "normal", in: "SourceGraphic", in2: "BackgroundImageFix", result: "shape" }), /* @__PURE__ */ React.createElement("feGaussianBlur", { stdDeviation: "2.36111", result: "effect1_foregroundBlur_4424_19222" })), /* @__PURE__ */ React.createElement("clipPath", { id: `${uid}-clip0_4424_19222` }, /* @__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_4424_19222` }, /* @__PURE__ */ React.createElement("rect", { x: "33.2578", y: "32.9062", width: "21.8713", height: "20.0353", rx: "2.83333", transform: "rotate(90 33.2578 32.9062)", fill: "white" })), /* @__PURE__ */ React.createElement("clipPath", { id: `${uid}-clip2_4424_19222` }, /* @__PURE__ */ React.createElement("rect", { x: "54.7734", y: "32.9062", width: "21.8713", height: "20.0353", rx: "2.83333", transform: "rotate(90 54.7734 32.9062)", 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_4424_19222)` }, /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { className: "ThumbnailContainer2-group-mtr8nkm4-1" }, /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("path", { d: "M 54.7734 16.05213 L 54.7734 32.25677 A 2.83333 2.83333 45 0 1 51.94007 35.0901 L 37.57143 35.0901 A 2.83333 2.83333 45 0 1 34.7381 32.25677 L 34.7381 16.05213 A 2.83333 2.83333 45 0 1 37.57143 13.2188 L 51.94007 13.2188 A 2.83333 2.83333 45 0 1 54.7734 16.05213 Z", fill: "var(--color-2)" })), /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("path", { d: "M 33.2578 16.05213 L 33.2578 32.25677 A 2.83333 2.83333 45 0 1 30.42447 35.0901 L 16.05583 35.0901 A 2.83333 2.83333 45 0 1 13.2225 32.25677 L 13.2225 16.05213 A 2.83333 2.83333 45 0 1 16.05583 13.2188 L 30.42447 13.2188 A 2.83333 2.83333 45 0 1 33.2578 16.05213 Z", fill: "var(--color-2)" }))), /* @__PURE__ */ React.createElement("g", { className: "ThumbnailContainer2-group-mtr8o0p7-2" }, /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("path", { d: "M 33.2578 25.89583 L 33.2578 42.10047 A 2.83333 2.83333 45 0 1 30.42447 44.9338 L 16.05583 44.9338 A 2.83333 2.83333 45 0 1 13.2225 42.10047 L 13.2225 25.89583 A 2.83333 2.83333 45 0 1 16.05583 23.0625 L 30.42447 23.0625 A 2.83333 2.83333 45 0 1 33.2578 25.89583 Z", fill: "var(--color-1)" })), /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("path", { d: "M 54.7734 25.89583 L 54.7734 42.10047 A 2.83333 2.83333 45 0 1 51.94007 44.9338 L 37.57143 44.9338 A 2.83333 2.83333 45 0 1 34.7381 42.10047 L 34.7381 25.89583 A 2.83333 2.83333 45 0 1 37.57143 23.0625 L 51.94007 23.0625 A 2.83333 2.83333 45 0 1 54.7734 25.89583 Z", fill: "var(--color-1)" }))), /* @__PURE__ */ React.createElement("g", { className: "ThumbnailContainer2-group-mtr8obho-3" }, /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { fill: "none", clipPath: `url(#${uid}-clip1_4424_19222)` }, /* @__PURE__ */ React.createElement("path", { d: "M 33.2578 35.73953 L 33.2578 51.94417 A 2.83333 2.83333 45 0 1 30.42447 54.7775 L 16.05583 54.7775 A 2.83333 2.83333 45 0 1 13.2225 51.94417 L 13.2225 35.73953 A 2.83333 2.83333 45 0 1 16.05583 32.9062 L 30.42447 32.9062 A 2.83333 2.83333 45 0 1 33.2578 35.73953 Z", fill: "var(--color-2)" }), /* @__PURE__ */ React.createElement("g", { fill: "none", filter: `url(#${uid}-filter1_f_4424_19222)` }, /* @__PURE__ */ React.createElement("path", { d: "M83.9297 62.2109L83.9297 23.4853L4.49536 23.4853L4.49536 62.2109L83.9297 62.2109Z", fill: `url(#${uid}-paint0_linear_4424_19222)` })))), /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { fill: "none", clipPath: `url(#${uid}-clip2_4424_19222)` }, /* @__PURE__ */ React.createElement("path", { d: "M 54.7734 35.73953 L 54.7734 51.94417 A 2.83333 2.83333 45 0 1 51.94007 54.7775 L 37.57143 54.7775 A 2.83333 2.83333 45 0 1 34.7381 51.94417 L 34.7381 35.73953 A 2.83333 2.83333 45 0 1 37.57143 32.9062 L 51.94007 32.9062 A 2.83333 2.83333 45 0 1 54.7734 35.73953 Z", fill: "var(--color-2)" }), /* @__PURE__ */ React.createElement("g", { fill: "none", filter: `url(#${uid}-filter2_f_4424_19222)` }, /* @__PURE__ */ React.createElement("path", { d: "M105.648 62.2109L105.648 23.4853L26.2141 23.4853L26.2141 62.2109L105.648 62.2109Z", fill: `url(#${uid}-paint1_linear_4424_19222)` })))))))))
|
|
38
|
+
);
|
|
39
|
+
}
|
|
40
|
+
);
|
|
41
|
+
ThumbnailContainer2.displayName = "ThumbnailContainer2";
|
|
42
|
+
export {
|
|
43
|
+
ThumbnailContainer2
|
|
44
|
+
};
|