@wix/design-system-illustrations 2.40.2 → 2.42.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.
- package/dist/cjs/AlignmentLeftToRight.js +1 -1
- package/dist/cjs/AlignmentRightToLeft.js +1 -1
- package/dist/cjs/FileShareLine.js +1 -1
- package/dist/cjs/FillParallaxScroll.js +3 -3
- package/dist/cjs/FolderBig.js +53 -0
- package/dist/cjs/FolderOutline.js +1 -1
- package/dist/cjs/GeneratePhotoshoot.js +54 -0
- package/dist/cjs/GlideEntrance.js +5 -8
- package/dist/cjs/JelloLoop.js +1 -1
- package/dist/cjs/MaxWidth.js +59 -0
- package/dist/cjs/MenuDividerDots.js +1 -1
- package/dist/cjs/OnlineOrderOnImage.js +1 -1
- package/dist/cjs/PaintScribbleDivider.js +1 -1
- package/dist/cjs/ShapeScroll.js +1 -1
- package/dist/cjs/StoreHeaderPositionMinimized.js +3 -3
- package/dist/cjs/StoreLayoutWithBorder.js +1 -1
- package/dist/cjs/StoreRight.js +1 -1
- package/dist/cjs/UploadMedia.js +56 -0
- package/dist/cjs/WiggleLoop.js +1 -1
- package/dist/cjs/animated/ResponsiveBehaviorElementsFixed.js +1 -1
- package/dist/cjs/animated/{MaxMin.js → ResponsiveBehaviorElementsScaleWithLimits.js} +10 -10
- package/dist/cjs/animated/{LimitScaling2.js → ResponsiveBehaviorElementsScaleWithLimitsMobile.js} +10 -10
- package/dist/cjs/animated/{MobileAlgoFast.js → ResponsiveBehaviorElementsStackOnMobile.js} +10 -10
- package/dist/cjs/animated/ResponsiveBehaviorSectionAutoHeight.js +1 -1
- package/dist/cjs/animated/ResponsiveBehaviorSectionFitToScreen.js +89 -0
- package/dist/cjs/animated/{FullWidth2.js → ThumbnailFullWidthTransparent.js} +9 -9
- package/dist/cjs/animated/{HoverSquareInvertText.js → ThumbnailGridTransparent.js} +9 -9
- package/dist/cjs/animated/{ThumbnailContainer2.js → ThumbnailSideBySideTransparent.js} +9 -9
- package/dist/cjs/animated/{Split01.js → ThumbnailSplitTransparent.js} +9 -9
- package/dist/cjs/animated/{ThumbnailContainer.js → ThumbnailZigzagTransparent.js} +9 -9
- package/dist/cjs/animated/animated.global.css +1824 -1539
- package/dist/cjs/animated/index.js +29 -26
- package/dist/cjs/index.js +12 -0
- package/dist/esm/AlignmentLeftToRight.js +1 -1
- package/dist/esm/AlignmentRightToLeft.js +1 -1
- package/dist/esm/FileShareLine.js +1 -1
- package/dist/esm/FillParallaxScroll.js +3 -3
- package/dist/esm/FolderBig.js +19 -0
- package/dist/esm/FolderOutline.js +1 -1
- package/dist/esm/GeneratePhotoshoot.js +20 -0
- package/dist/esm/GlideEntrance.js +5 -8
- package/dist/esm/JelloLoop.js +1 -1
- package/dist/esm/MaxWidth.js +25 -0
- package/dist/esm/MenuDividerDots.js +1 -1
- package/dist/esm/OnlineOrderOnImage.js +1 -1
- package/dist/esm/PaintScribbleDivider.js +1 -1
- package/dist/esm/ShapeScroll.js +1 -1
- package/dist/esm/StoreHeaderPositionMinimized.js +3 -3
- package/dist/esm/StoreLayoutWithBorder.js +1 -1
- package/dist/esm/StoreRight.js +1 -1
- package/dist/esm/UploadMedia.js +22 -0
- package/dist/esm/WiggleLoop.js +1 -1
- package/dist/esm/animated/ResponsiveBehaviorElementsFixed.js +1 -1
- package/dist/esm/animated/{MaxMin.js → ResponsiveBehaviorElementsScaleWithLimits.js} +6 -6
- package/dist/esm/animated/{LimitScaling2.js → ResponsiveBehaviorElementsScaleWithLimitsMobile.js} +6 -6
- package/dist/esm/animated/{MobileAlgoFast.js → ResponsiveBehaviorElementsStackOnMobile.js} +6 -6
- package/dist/esm/animated/ResponsiveBehaviorSectionAutoHeight.js +1 -1
- package/dist/esm/animated/ResponsiveBehaviorSectionFitToScreen.js +45 -0
- package/dist/esm/animated/{FullWidth2.js → ThumbnailFullWidthTransparent.js} +5 -5
- package/dist/esm/animated/{HoverSquareInvertText.js → ThumbnailGridTransparent.js} +5 -5
- package/dist/esm/animated/{ThumbnailContainer2.js → ThumbnailSideBySideTransparent.js} +5 -5
- package/dist/esm/animated/{Split01.js → ThumbnailSplitTransparent.js} +5 -5
- package/dist/esm/animated/{ThumbnailContainer.js → ThumbnailZigzagTransparent.js} +5 -5
- package/dist/esm/animated/animated.global.css +1824 -1539
- package/dist/esm/animated/index.js +19 -17
- package/dist/esm/index.js +8 -0
- package/dist/types/FolderBig.d.ts +5 -0
- package/dist/types/GeneratePhotoshoot.d.ts +5 -0
- package/dist/types/MaxWidth.d.ts +5 -0
- package/dist/types/UploadMedia.d.ts +5 -0
- package/dist/types/animated/ResponsiveBehaviorElementsScaleWithLimits.d.ts +7 -0
- package/dist/types/animated/ResponsiveBehaviorElementsScaleWithLimitsMobile.d.ts +7 -0
- package/dist/types/animated/ResponsiveBehaviorElementsStackOnMobile.d.ts +7 -0
- package/dist/types/animated/ResponsiveBehaviorSectionFitToScreen.d.ts +7 -0
- package/dist/types/animated/ThumbnailFullWidthTransparent.d.ts +7 -0
- package/dist/types/animated/ThumbnailGridTransparent.d.ts +7 -0
- package/dist/types/animated/ThumbnailSideBySideTransparent.d.ts +7 -0
- package/dist/types/animated/ThumbnailSplitTransparent.d.ts +7 -0
- package/dist/types/animated/ThumbnailZigzagTransparent.d.ts +7 -0
- package/dist/types/animated/index.d.ts +18 -16
- package/dist/types/index.d.ts +4 -0
- package/package.json +3 -3
- package/src/AlignmentLeftToRight.svg +1 -1
- package/src/AlignmentRightToLeft.svg +1 -1
- package/src/AllSides.svg +1 -1
- package/src/AudioPlayerLayoutClassic.svg +1 -1
- package/src/AudioPlayerLayoutIcon.svg +1 -1
- package/src/BookingsPresetMasonry.svg +3 -3
- package/src/BookingsPresetSlider.svg +2 -2
- package/src/BookingsPresetSquares.svg +2 -2
- package/src/BounceEntrance.svg +1 -1
- package/src/ChooseTheLayoutGrid.svg +8 -8
- package/src/CreateAContext.svg +1 -1
- package/src/CreateAFunction.svg +6 -6
- package/src/DesignedSection.svg +3 -3
- package/src/DesignedSectionSmall.svg +3 -3
- package/src/Doc.svg +1 -1
- package/src/EmptyPage.svg +2 -2
- package/src/EmptyPageImage.svg +2 -2
- package/src/FileShareFill.svg +1 -1
- package/src/FileShareLine.svg +1 -1
- package/src/FillParallaxScroll.svg +49 -52
- package/src/FolderBig.svg +29 -0
- package/src/FolderOutline.svg +2 -2
- package/src/GeneratePhotoshoot.svg +12 -0
- package/src/GlideEntrance.svg +18 -13
- package/src/IdentityDividerLine.svg +1 -1
- package/src/ImageLayoutSingleColumn.svg +3 -3
- package/src/ImageLayoutTwoColumn.svg +3 -3
- package/src/ImagePositionBottom.svg +3 -3
- package/src/ImagePositionTop.svg +3 -3
- package/src/ImageSizeS.svg +1 -1
- package/src/JelloLoop.svg +1 -1
- package/src/LayoutCards.svg +3 -3
- package/src/LayoutList.svg +2 -2
- package/src/LayoutSideBySide.svg +6 -6
- package/src/LayoutSidebar.svg +1 -1
- package/src/LayoutTwoColumn.svg +1 -1
- package/src/LetterTwist.svg +1 -1
- package/src/MaxWidth.svg +57 -0
- package/src/MenuDividerDots.svg +1 -1
- package/src/MenuDividerLine.svg +1 -1
- package/src/OnlineOrderOnImage.svg +3 -3
- package/src/PaintScribbleDivider.svg +3 -3
- package/src/ParallaxSection.svg +2 -2
- package/src/PixelsDivider.svg +7 -7
- package/src/PresetFeatured.svg +3 -3
- package/src/PresetGrid.svg +3 -3
- package/src/PresetMasonry.svg +3 -3
- package/src/PresetRows.svg +2 -2
- package/src/PresetSlider.svg +2 -2
- package/src/PresetSquares.svg +2 -2
- package/src/PresetThumbnails.svg +5 -5
- package/src/PricingLayoutBelow.svg +1 -1
- package/src/RevealScroll.svg +1 -1
- package/src/ScrollEffectsDisappear.svg +1 -1
- package/src/ScrollEffectsFadeOut.svg +1 -1
- package/src/ScrollEffectsMoveWithPage.svg +1 -1
- package/src/ScrollEffectsStayFixed.svg +1 -1
- package/src/SemiCirclesDivider.svg +1 -1
- package/src/ShapeScroll.svg +1 -1
- package/src/StoreBottom.svg +3 -3
- package/src/StoreColumns.svg +1 -1
- package/src/StoreDrawer.svg +2 -2
- package/src/StoreGrid.svg +2 -2
- package/src/StoreHeaderPositionMinimized.svg +4 -3
- package/src/StoreLayoutWithBorder.svg +4 -1
- package/src/StoreLeft.svg +3 -3
- package/src/StoreRight.svg +3 -3
- package/src/StoreTabs.svg +2 -2
- package/src/StoreThumbnails.svg +3 -3
- package/src/StretchScroll.svg +4 -4
- package/src/UploadMedia.svg +18 -0
- package/src/VideoMobileLayoutCompact.svg +1 -1
- package/src/VideoMobileLayoutVertical.svg +1 -1
- package/src/WiggleLoop.svg +2 -2
- package/src/animated/ResponsiveBehaviorElementsFixed.html +1 -1
- package/src/animated/{MaxMin.html → ResponsiveBehaviorElementsScaleWithLimits.html} +1 -1
- package/src/animated/{LimitScaling2.html → ResponsiveBehaviorElementsScaleWithLimitsMobile.html} +1 -1
- package/src/animated/{MobileAlgoFast.html → ResponsiveBehaviorElementsStackOnMobile.html} +1 -1
- package/src/animated/ResponsiveBehaviorSectionAutoHeight.html +1 -1
- package/src/animated/ResponsiveBehaviorSectionFitToScreen.html +370 -0
- package/dist/types/animated/FullWidth2.d.ts +0 -7
- package/dist/types/animated/HoverSquareInvertText.d.ts +0 -7
- package/dist/types/animated/LimitScaling2.d.ts +0 -7
- package/dist/types/animated/MaxMin.d.ts +0 -7
- package/dist/types/animated/MobileAlgoFast.d.ts +0 -7
- package/dist/types/animated/Split01.d.ts +0 -7
- package/dist/types/animated/ThumbnailContainer.d.ts +0 -7
- package/dist/types/animated/ThumbnailContainer2.d.ts +0 -7
- /package/src/animated/{FullWidth2.html → ThumbnailFullWidthTransparent.html} +0 -0
- /package/src/animated/{HoverSquareInvertText.html → ThumbnailGridTransparent.html} +0 -0
- /package/src/animated/{ThumbnailContainer2.html → ThumbnailSideBySideTransparent.html} +0 -0
- /package/src/animated/{Split01.html → ThumbnailSplitTransparent.html} +0 -0
- /package/src/animated/{ThumbnailContainer.html → ThumbnailZigzagTransparent.html} +0 -0
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React, { forwardRef, useEffect, useId, useImperativeHandle, useRef } from "react";
|
|
2
|
-
const
|
|
2
|
+
const ThumbnailGridTransparent = forwardRef(
|
|
3
3
|
({ className, ...props }, ref) => {
|
|
4
4
|
const svgRef = useRef(null);
|
|
5
5
|
const uid = useId().replace(/:/g, "");
|
|
@@ -30,15 +30,15 @@ const HoverSquareInvertText = forwardRef(
|
|
|
30
30
|
width: 68,
|
|
31
31
|
height: 68,
|
|
32
32
|
xmlns: "http://www.w3.org/2000/svg",
|
|
33
|
-
className: ["
|
|
33
|
+
className: ["ThumbnailGridTransparent-root", className].filter(Boolean).join(" "),
|
|
34
34
|
...props
|
|
35
35
|
},
|
|
36
36
|
/* @__PURE__ */ React.createElement("defs", null, /* @__PURE__ */ React.createElement("linearGradient", { id: `${uid}-paint0_linear_4424_19258`, x1: "66.5888", y1: "5.72025", x2: "19.8579", y2: "25.1921", 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_19258`, 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_19258" })), /* @__PURE__ */ React.createElement("clipPath", { id: `${uid}-clip0_4424_19258` }, /* @__PURE__ */ React.createElement("rect", { width: "13.2632", height: "21.0139", rx: "1.88889", transform: "matrix(-1 0 0 1 55 27.9922)", fill: "white" })), /* @__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", { mask: `url(#${uid}-am-node-1-2)` }, /* @__PURE__ */ React.createElement("g", null, /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { fill: "none", className: "
|
|
37
|
+
/* @__PURE__ */ React.createElement("g", { mask: `url(#${uid}-am-node-1-2)` }, /* @__PURE__ */ React.createElement("g", null, /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { fill: "none", className: "ThumbnailGridTransparent-Group-2147222318" }, /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("path", { d: "M 24.36891 19 L 14.88349 19 A 1.88889 1.88889 90 0 0 12.9946 20.88889 L 12.9946 38.12501 A 1.88889 1.88889 90 0 0 14.88349 40.0139 L 24.36891 40.0139 A 1.88889 1.88889 90 0 0 26.2578 38.12501 L 26.2578 20.88889 A 1.88889 1.88889 90 0 0 24.36891 19 Z", fill: "var(--color-2)" }))), /* @__PURE__ */ React.createElement("g", { fill: "none", className: "ThumbnailGridTransparent-Group-2147222319" }, /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("path", { d: "M 38.74391 23.4844 L 29.25849 23.4844 A 1.88889 1.88889 90 0 0 27.3696 25.37329 L 27.3696 42.60941 A 1.88889 1.88889 90 0 0 29.25849 44.4983 L 38.74391 44.4983 A 1.88889 1.88889 90 0 0 40.6328 42.60941 L 40.6328 25.37329 A 1.88889 1.88889 90 0 0 38.74391 23.4844 Z", fill: "var(--color-3)" }))), /* @__PURE__ */ React.createElement("g", { fill: "none", className: "ThumbnailGridTransparent-Group-2147222320" }, /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { fill: "none", clipPath: `url(#${uid}-clip0_4424_19258)` }, /* @__PURE__ */ React.createElement("path", { d: "M 53.11111 27.9922 L 43.62569 27.9922 A 1.88889 1.88889 90 0 0 41.7368 29.88109 L 41.7368 47.11721 A 1.88889 1.88889 90 0 0 43.62569 49.0061 L 53.11111 49.0061 A 1.88889 1.88889 90 0 0 55 47.11721 L 55 29.88109 A 1.88889 1.88889 90 0 0 53.11111 27.9922 Z", fill: "var(--color-2)" }), /* @__PURE__ */ React.createElement("g", { fill: "none", filter: `url(#${uid}-filter1_f_4424_19258)` }, /* @__PURE__ */ React.createElement("path", { d: "M69.3828 55.9609L69.3828 -2.58272H38.2549L38.2549 55.9609H69.3828Z", fill: `url(#${uid}-paint0_linear_4424_19258)` })))))))))
|
|
38
38
|
);
|
|
39
39
|
}
|
|
40
40
|
);
|
|
41
|
-
|
|
41
|
+
ThumbnailGridTransparent.displayName = "ThumbnailGridTransparent";
|
|
42
42
|
export {
|
|
43
|
-
|
|
43
|
+
ThumbnailGridTransparent
|
|
44
44
|
};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React, { forwardRef, useEffect, useId, useImperativeHandle, useRef } from "react";
|
|
2
|
-
const
|
|
2
|
+
const ThumbnailSideBySideTransparent = forwardRef(
|
|
3
3
|
({ className, ...props }, ref) => {
|
|
4
4
|
const svgRef = useRef(null);
|
|
5
5
|
const uid = useId().replace(/:/g, "");
|
|
@@ -30,15 +30,15 @@ const ThumbnailContainer2 = forwardRef(
|
|
|
30
30
|
width: 68,
|
|
31
31
|
height: 68,
|
|
32
32
|
xmlns: "http://www.w3.org/2000/svg",
|
|
33
|
-
className: ["
|
|
33
|
+
className: ["ThumbnailSideBySideTransparent-root", className].filter(Boolean).join(" "),
|
|
34
34
|
...props
|
|
35
35
|
},
|
|
36
36
|
/* @__PURE__ */ React.createElement("defs", null, /* @__PURE__ */ React.createElement("linearGradient", { id: `${uid}-paint0_linear_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: "
|
|
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: "ThumbnailSideBySideTransparent-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: "ThumbnailSideBySideTransparent-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: "ThumbnailSideBySideTransparent-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
38
|
);
|
|
39
39
|
}
|
|
40
40
|
);
|
|
41
|
-
|
|
41
|
+
ThumbnailSideBySideTransparent.displayName = "ThumbnailSideBySideTransparent";
|
|
42
42
|
export {
|
|
43
|
-
|
|
43
|
+
ThumbnailSideBySideTransparent
|
|
44
44
|
};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React, { forwardRef, useEffect, useId, useImperativeHandle, useRef } from "react";
|
|
2
|
-
const
|
|
2
|
+
const ThumbnailSplitTransparent = forwardRef(
|
|
3
3
|
({ className, ...props }, ref) => {
|
|
4
4
|
const svgRef = useRef(null);
|
|
5
5
|
const uid = useId().replace(/:/g, "");
|
|
@@ -30,15 +30,15 @@ const Split01 = forwardRef(
|
|
|
30
30
|
width: 68,
|
|
31
31
|
height: 68,
|
|
32
32
|
xmlns: "http://www.w3.org/2000/svg",
|
|
33
|
-
className: ["
|
|
33
|
+
className: ["ThumbnailSplitTransparent-root", className].filter(Boolean).join(" "),
|
|
34
34
|
...props
|
|
35
35
|
},
|
|
36
36
|
/* @__PURE__ */ React.createElement("defs", null, /* @__PURE__ */ React.createElement("linearGradient", { id: `${uid}-paint0_linear_4428_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: "
|
|
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: "ThumbnailSplitTransparent-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: "ThumbnailSplitTransparent-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: "ThumbnailSplitTransparent-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
38
|
);
|
|
39
39
|
}
|
|
40
40
|
);
|
|
41
|
-
|
|
41
|
+
ThumbnailSplitTransparent.displayName = "ThumbnailSplitTransparent";
|
|
42
42
|
export {
|
|
43
|
-
|
|
43
|
+
ThumbnailSplitTransparent
|
|
44
44
|
};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React, { forwardRef, useEffect, useId, useImperativeHandle, useRef } from "react";
|
|
2
|
-
const
|
|
2
|
+
const ThumbnailZigzagTransparent = forwardRef(
|
|
3
3
|
({ className, ...props }, ref) => {
|
|
4
4
|
const svgRef = useRef(null);
|
|
5
5
|
const uid = useId().replace(/:/g, "");
|
|
@@ -30,15 +30,15 @@ const ThumbnailContainer = forwardRef(
|
|
|
30
30
|
width: 68,
|
|
31
31
|
height: 68,
|
|
32
32
|
xmlns: "http://www.w3.org/2000/svg",
|
|
33
|
-
className: ["
|
|
33
|
+
className: ["ThumbnailZigzagTransparent-root", className].filter(Boolean).join(" "),
|
|
34
34
|
...props
|
|
35
35
|
},
|
|
36
36
|
/* @__PURE__ */ React.createElement("defs", null, /* @__PURE__ */ React.createElement("linearGradient", { id: `${uid}-paint0_linear_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: "
|
|
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: "ThumbnailZigzagTransparent-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: "ThumbnailZigzagTransparent-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: "ThumbnailZigzagTransparent-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: "ThumbnailZigzagTransparent-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
38
|
);
|
|
39
39
|
}
|
|
40
40
|
);
|
|
41
|
-
|
|
41
|
+
ThumbnailZigzagTransparent.displayName = "ThumbnailZigzagTransparent";
|
|
42
42
|
export {
|
|
43
|
-
|
|
43
|
+
ThumbnailZigzagTransparent
|
|
44
44
|
};
|