@wix/design-system-illustrations 2.42.1 → 2.44.0

package/dist/cjs/animated/index.js

@@ -18,6 +18,9 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var animated_exports = {};
 __export(animated_exports, {
+  ElementPositionDefault: () => import_ElementPositionDefault.ElementPositionDefault,
+  ElementPositionPinned: () => import_ElementPositionPinned.ElementPositionPinned,
+  ElementPositionSticky: () => import_ElementPositionSticky.ElementPositionSticky,
   ElementsFixedHeight: () => import_ElementsFixedHeight.ElementsFixedHeight,
   ElementsFixedMargins: () => import_ElementsFixedMargins.ElementsFixedMargins,
   ElementsScale: () => import_ElementsScale.ElementsScale,
@@ -33,6 +36,7 @@ __export(animated_exports, {
   ResponsiveBehaviorElementsScaleWithLimitsMobile: () => import_ResponsiveBehaviorElementsScaleWithLimitsMobile.ResponsiveBehaviorElementsScaleWithLimitsMobile,
   ResponsiveBehaviorElementsStackOnMobile: () => import_ResponsiveBehaviorElementsStackOnMobile.ResponsiveBehaviorElementsStackOnMobile,
   ResponsiveBehaviorElementsStretch: () => import_ResponsiveBehaviorElementsStretch.ResponsiveBehaviorElementsStretch,
+  ResponsiveBehaviorHeaderDisappear: () => import_ResponsiveBehaviorHeaderDisappear.ResponsiveBehaviorHeaderDisappear,
   ResponsiveBehaviorHeaderFadeOut: () => import_ResponsiveBehaviorHeaderFadeOut.ResponsiveBehaviorHeaderFadeOut,
   ResponsiveBehaviorHeaderFreeze: () => import_ResponsiveBehaviorHeaderFreeze.ResponsiveBehaviorHeaderFreeze,
   ResponsiveBehaviorHeaderScrollWithSite: () => import_ResponsiveBehaviorHeaderScrollWithSite.ResponsiveBehaviorHeaderScrollWithSite,
@@ -47,18 +51,16 @@ __export(animated_exports, {
   ResponsiveBehaviorWarp: () => import_ResponsiveBehaviorWarp.ResponsiveBehaviorWarp,
   SectionFixedHeight: () => import_SectionFixedHeight.SectionFixedHeight,
   SectionScale: () => import_SectionScale.SectionScale,
-  ThumbnailFullWidth: () => import_ThumbnailFullWidth.ThumbnailFullWidth,
-  ThumbnailFullWidthTransparent: () => import_ThumbnailFullWidthTransparent.ThumbnailFullWidthTransparent,
-  ThumbnailGrid: () => import_ThumbnailGrid.ThumbnailGrid,
-  ThumbnailGridTransparent: () => import_ThumbnailGridTransparent.ThumbnailGridTransparent,
-  ThumbnailSideBySide: () => import_ThumbnailSideBySide.ThumbnailSideBySide,
-  ThumbnailSideBySideTransparent: () => import_ThumbnailSideBySideTransparent.ThumbnailSideBySideTransparent,
-  ThumbnailSplit: () => import_ThumbnailSplit.ThumbnailSplit,
-  ThumbnailSplitTransparent: () => import_ThumbnailSplitTransparent.ThumbnailSplitTransparent,
-  ThumbnailZigzag: () => import_ThumbnailZigzag.ThumbnailZigzag,
-  ThumbnailZigzagTransparent: () => import_ThumbnailZigzagTransparent.ThumbnailZigzagTransparent
+  StickySectionPresetsFullWidth: () => import_StickySectionPresetsFullWidth.StickySectionPresetsFullWidth,
+  StickySectionPresetsGridRows: () => import_StickySectionPresetsGridRows.StickySectionPresetsGridRows,
+  StickySectionPresetsSideBySide: () => import_StickySectionPresetsSideBySide.StickySectionPresetsSideBySide,
+  StickySectionPresetsSplit: () => import_StickySectionPresetsSplit.StickySectionPresetsSplit,
+  StickySectionPresetsZigzag: () => import_StickySectionPresetsZigzag.StickySectionPresetsZigzag
 });
 module.exports = __toCommonJS(animated_exports);
+var import_ElementPositionDefault = require("./ElementPositionDefault");
+var import_ElementPositionPinned = require("./ElementPositionPinned");
+var import_ElementPositionSticky = require("./ElementPositionSticky");
 var import_ElementsFixedHeight = require("./ElementsFixedHeight");
 var import_ElementsFixedMargins = require("./ElementsFixedMargins");
 var import_ElementsScale = require("./ElementsScale");
@@ -74,6 +76,7 @@ var import_ResponsiveBehaviorElementsScaleWithLimits = require("./ResponsiveBeha
 var import_ResponsiveBehaviorElementsScaleWithLimitsMobile = require("./ResponsiveBehaviorElementsScaleWithLimitsMobile");
 var import_ResponsiveBehaviorElementsStackOnMobile = require("./ResponsiveBehaviorElementsStackOnMobile");
 var import_ResponsiveBehaviorElementsStretch = require("./ResponsiveBehaviorElementsStretch");
+var import_ResponsiveBehaviorHeaderDisappear = require("./ResponsiveBehaviorHeaderDisappear");
 var import_ResponsiveBehaviorHeaderFadeOut = require("./ResponsiveBehaviorHeaderFadeOut");
 var import_ResponsiveBehaviorHeaderFreeze = require("./ResponsiveBehaviorHeaderFreeze");
 var import_ResponsiveBehaviorHeaderScrollWithSite = require("./ResponsiveBehaviorHeaderScrollWithSite");
@@ -88,18 +91,16 @@ var import_ResponsiveBehaviorTextScaleProportionally = require("./ResponsiveBeha
 var import_ResponsiveBehaviorWarp = require("./ResponsiveBehaviorWarp");
 var import_SectionFixedHeight = require("./SectionFixedHeight");
 var import_SectionScale = require("./SectionScale");
-var import_ThumbnailFullWidth = require("./ThumbnailFullWidth");
-var import_ThumbnailFullWidthTransparent = require("./ThumbnailFullWidthTransparent");
-var import_ThumbnailGrid = require("./ThumbnailGrid");
-var import_ThumbnailGridTransparent = require("./ThumbnailGridTransparent");
-var import_ThumbnailSideBySide = require("./ThumbnailSideBySide");
-var import_ThumbnailSideBySideTransparent = require("./ThumbnailSideBySideTransparent");
-var import_ThumbnailSplit = require("./ThumbnailSplit");
-var import_ThumbnailSplitTransparent = require("./ThumbnailSplitTransparent");
-var import_ThumbnailZigzag = require("./ThumbnailZigzag");
-var import_ThumbnailZigzagTransparent = require("./ThumbnailZigzagTransparent");
+var import_StickySectionPresetsFullWidth = require("./StickySectionPresetsFullWidth");
+var import_StickySectionPresetsGridRows = require("./StickySectionPresetsGridRows");
+var import_StickySectionPresetsSideBySide = require("./StickySectionPresetsSideBySide");
+var import_StickySectionPresetsSplit = require("./StickySectionPresetsSplit");
+var import_StickySectionPresetsZigzag = require("./StickySectionPresetsZigzag");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  ElementPositionDefault,
+  ElementPositionPinned,
+  ElementPositionSticky,
   ElementsFixedHeight,
   ElementsFixedMargins,
   ElementsScale,
@@ -115,6 +116,7 @@ var import_ThumbnailZigzagTransparent = require("./ThumbnailZigzagTransparent");
   ResponsiveBehaviorElementsScaleWithLimitsMobile,
   ResponsiveBehaviorElementsStackOnMobile,
   ResponsiveBehaviorElementsStretch,
+  ResponsiveBehaviorHeaderDisappear,
   ResponsiveBehaviorHeaderFadeOut,
   ResponsiveBehaviorHeaderFreeze,
   ResponsiveBehaviorHeaderScrollWithSite,
@@ -129,14 +131,9 @@ var import_ThumbnailZigzagTransparent = require("./ThumbnailZigzagTransparent");
   ResponsiveBehaviorWarp,
   SectionFixedHeight,
   SectionScale,
-  ThumbnailFullWidth,
-  ThumbnailFullWidthTransparent,
-  ThumbnailGrid,
-  ThumbnailGridTransparent,
-  ThumbnailSideBySide,
-  ThumbnailSideBySideTransparent,
-  ThumbnailSplit,
-  ThumbnailSplitTransparent,
-  ThumbnailZigzag,
-  ThumbnailZigzagTransparent
+  StickySectionPresetsFullWidth,
+  StickySectionPresetsGridRows,
+  StickySectionPresetsSideBySide,
+  StickySectionPresetsSplit,
+  StickySectionPresetsZigzag
 });

package/dist/cjs/index.js

@@ -287,12 +287,19 @@ __export(index_exports, {
   JelloLoop: () => import_JelloLoop.JelloLoop,
   LandscapeFrame: () => import_LandscapeFrame.LandscapeFrame,
   LayeredEllipseDivider: () => import_LayeredEllipseDivider.LayeredEllipseDivider,
+  Layout1Column: () => import_Layout1Column.Layout1Column,
+  Layout2Columns: () => import_Layout2Columns.Layout2Columns,
+  Layout3Columns: () => import_Layout3Columns.Layout3Columns,
+  Layout4Columns: () => import_Layout4Columns.Layout4Columns,
+  Layout5Columns: () => import_Layout5Columns.Layout5Columns,
   LayoutCards: () => import_LayoutCards.LayoutCards,
   LayoutCarousel: () => import_LayoutCarousel.LayoutCarousel,
+  LayoutHalf: () => import_LayoutHalf.LayoutHalf,
   LayoutList: () => import_LayoutList.LayoutList,
   LayoutSideBySide: () => import_LayoutSideBySide.LayoutSideBySide,
   LayoutSidebar: () => import_LayoutSidebar.LayoutSidebar,
   LayoutSingleColumn: () => import_LayoutSingleColumn.LayoutSingleColumn,
+  LayoutThird: () => import_LayoutThird.LayoutThird,
   LayoutTwoColumn: () => import_LayoutTwoColumn.LayoutTwoColumn,
   LayoutTwoColumnSmall: () => import_LayoutTwoColumnSmall.LayoutTwoColumnSmall,
   LeftToRight: () => import_LeftToRight.LeftToRight,
@@ -831,12 +838,19 @@ var import_Iris = require("./Iris");
 var import_JelloLoop = require("./JelloLoop");
 var import_LandscapeFrame = require("./LandscapeFrame");
 var import_LayeredEllipseDivider = require("./LayeredEllipseDivider");
+var import_Layout1Column = require("./Layout1Column");
+var import_Layout2Columns = require("./Layout2Columns");
+var import_Layout3Columns = require("./Layout3Columns");
+var import_Layout4Columns = require("./Layout4Columns");
+var import_Layout5Columns = require("./Layout5Columns");
 var import_LayoutCards = require("./LayoutCards");
 var import_LayoutCarousel = require("./LayoutCarousel");
+var import_LayoutHalf = require("./LayoutHalf");
 var import_LayoutList = require("./LayoutList");
 var import_LayoutSideBySide = require("./LayoutSideBySide");
 var import_LayoutSidebar = require("./LayoutSidebar");
 var import_LayoutSingleColumn = require("./LayoutSingleColumn");
+var import_LayoutThird = require("./LayoutThird");
 var import_LayoutTwoColumn = require("./LayoutTwoColumn");
 var import_LayoutTwoColumnSmall = require("./LayoutTwoColumnSmall");
 var import_LeftToRight = require("./LeftToRight");
@@ -1376,12 +1390,19 @@ __reExport(index_exports, require("./deprecated"), module.exports);
   JelloLoop,
   LandscapeFrame,
   LayeredEllipseDivider,
+  Layout1Column,
+  Layout2Columns,
+  Layout3Columns,
+  Layout4Columns,
+  Layout5Columns,
   LayoutCards,
   LayoutCarousel,
+  LayoutHalf,
   LayoutList,
   LayoutSideBySide,
   LayoutSidebar,
   LayoutSingleColumn,
+  LayoutThird,
   LayoutTwoColumn,
   LayoutTwoColumnSmall,
   LeftToRight,

package/dist/esm/Layout1Column.js

@@ -0,0 +1,18 @@
+import React from "react";
+const Layout1Column = (props) => /* @__PURE__ */ React.createElement(
+  "svg",
+  {
+    viewBox: "0 0 72 72",
+    fill: "none",
+    width: 72,
+    height: 72,
+    xmlns: "http://www.w3.org/2000/svg",
+    ...props
+  },
+  /* @__PURE__ */ React.createElement("g", { clipPath: "url(#Layout1Column__a)" }, /* @__PURE__ */ React.createElement("rect", { width: "54", height: "38", x: "9", y: "19", fill: "var(--wds-illustration-color-1, #002291)", rx: "3" }), /* @__PURE__ */ React.createElement("g", { filter: "url(#Layout1Column__b)" }, /* @__PURE__ */ React.createElement("path", { fill: "url(#Layout1Column__c)", d: "M9-1h94v58H9z" }))),
+  /* @__PURE__ */ React.createElement("defs", null, /* @__PURE__ */ React.createElement("linearGradient", { id: "Layout1Column__c", x1: "89.668", x2: "49.619", y1: "4.206", y2: "87.031", gradientUnits: "userSpaceOnUse" }, /* @__PURE__ */ React.createElement("stop", { offset: ".176", stopColor: "var(--wds-illustration-color-5, #eaeff1)" }), /* @__PURE__ */ React.createElement("stop", { offset: ".577", stopColor: "var(--wds-illustration-color-3, #b8c4ff)" }), /* @__PURE__ */ React.createElement("stop", { offset: ".85", stopColor: "var(--wds-illustration-color-1, #002291)" })), /* @__PURE__ */ React.createElement("clipPath", { id: "Layout1Column__a" }, /* @__PURE__ */ React.createElement("rect", { width: "54", height: "38", x: "9", y: "19", fill: "#fff", rx: "3" })), /* @__PURE__ */ React.createElement("filter", { id: "Layout1Column__b", width: "106", height: "70", x: "3", y: "-7", filterUnits: "userSpaceOnUse", colorInterpolationFilters: "sRGB" }, /* @__PURE__ */ React.createElement("feFlood", { result: "BackgroundImageFix", floodOpacity: "0" }), /* @__PURE__ */ React.createElement("feBlend", { in: "SourceGraphic", in2: "BackgroundImageFix", result: "shape" }), /* @__PURE__ */ React.createElement("feGaussianBlur", { result: "effect1_foregroundBlur_2241_22421", stdDeviation: "3" })))
+);
+Layout1Column.displayName = "Layout1Column";
+export {
+  Layout1Column
+};

package/dist/esm/Layout2Columns.js

@@ -0,0 +1,18 @@
+import React from "react";
+const Layout2Columns = (props) => /* @__PURE__ */ React.createElement(
+  "svg",
+  {
+    viewBox: "0 0 72 72",
+    fill: "none",
+    width: 72,
+    height: 72,
+    xmlns: "http://www.w3.org/2000/svg",
+    ...props
+  },
+  /* @__PURE__ */ React.createElement("g", { clipPath: "url(#Layout2Columns__a)" }, /* @__PURE__ */ React.createElement("rect", { width: "54", height: "38", x: "9", y: "19", fill: "var(--wds-illustration-color-1, #002291)", rx: "3" }), /* @__PURE__ */ React.createElement("g", { filter: "url(#Layout2Columns__b)" }, /* @__PURE__ */ React.createElement("path", { fill: "url(#Layout2Columns__c)", d: "M9-1h94v58H9z" })), /* @__PURE__ */ React.createElement("path", { fill: "var(--wds-illustration-color-background, #f8f6f6)", d: "M35 13h2v50h-2z" })),
+  /* @__PURE__ */ React.createElement("defs", null, /* @__PURE__ */ React.createElement("linearGradient", { id: "Layout2Columns__c", x1: "89.668", x2: "49.619", y1: "4.206", y2: "87.031", gradientUnits: "userSpaceOnUse" }, /* @__PURE__ */ React.createElement("stop", { offset: ".176", stopColor: "var(--wds-illustration-color-5, #eaeff1)" }), /* @__PURE__ */ React.createElement("stop", { offset: ".577", stopColor: "var(--wds-illustration-color-3, #b8c4ff)" }), /* @__PURE__ */ React.createElement("stop", { offset: ".85", stopColor: "var(--wds-illustration-color-1, #002291)" })), /* @__PURE__ */ React.createElement("clipPath", { id: "Layout2Columns__a" }, /* @__PURE__ */ React.createElement("rect", { width: "54", height: "38", x: "9", y: "19", fill: "#fff", rx: "3" })), /* @__PURE__ */ React.createElement("filter", { id: "Layout2Columns__b", width: "106", height: "70", x: "3", y: "-7", filterUnits: "userSpaceOnUse", colorInterpolationFilters: "sRGB" }, /* @__PURE__ */ React.createElement("feFlood", { result: "BackgroundImageFix", floodOpacity: "0" }), /* @__PURE__ */ React.createElement("feBlend", { in: "SourceGraphic", in2: "BackgroundImageFix", result: "shape" }), /* @__PURE__ */ React.createElement("feGaussianBlur", { result: "effect1_foregroundBlur_2241_22466", stdDeviation: "3" })))
+);
+Layout2Columns.displayName = "Layout2Columns";
+export {
+  Layout2Columns
+};

package/dist/esm/Layout3Columns.js

@@ -0,0 +1,18 @@
+import React from "react";
+const Layout3Columns = (props) => /* @__PURE__ */ React.createElement(
+  "svg",
+  {
+    viewBox: "0 0 72 72",
+    fill: "none",
+    width: 72,
+    height: 72,
+    xmlns: "http://www.w3.org/2000/svg",
+    ...props
+  },
+  /* @__PURE__ */ React.createElement("g", { clipPath: "url(#Layout3Columns__a)" }, /* @__PURE__ */ React.createElement("rect", { width: "54", height: "38", x: "9", y: "19", fill: "var(--wds-illustration-color-1, #002291)", rx: "3" }), /* @__PURE__ */ React.createElement("g", { filter: "url(#Layout3Columns__b)" }, /* @__PURE__ */ React.createElement("path", { fill: "url(#Layout3Columns__c)", d: "M9-1h94v58H9z" })), /* @__PURE__ */ React.createElement("path", { fill: "var(--wds-illustration-color-background, #f8f6f6)", d: "M26 13h2v50h-2zM44 13h2v50h-2z" })),
+  /* @__PURE__ */ React.createElement("defs", null, /* @__PURE__ */ React.createElement("linearGradient", { id: "Layout3Columns__c", x1: "89.668", x2: "49.619", y1: "4.206", y2: "87.031", gradientUnits: "userSpaceOnUse" }, /* @__PURE__ */ React.createElement("stop", { offset: ".176", stopColor: "var(--wds-illustration-color-5, #eaeff1)" }), /* @__PURE__ */ React.createElement("stop", { offset: ".577", stopColor: "var(--wds-illustration-color-3, #b8c4ff)" }), /* @__PURE__ */ React.createElement("stop", { offset: ".85", stopColor: "var(--wds-illustration-color-1, #002291)" })), /* @__PURE__ */ React.createElement("clipPath", { id: "Layout3Columns__a" }, /* @__PURE__ */ React.createElement("rect", { width: "54", height: "38", x: "9", y: "19", fill: "#fff", rx: "3" })), /* @__PURE__ */ React.createElement("filter", { id: "Layout3Columns__b", width: "106", height: "70", x: "3", y: "-7", filterUnits: "userSpaceOnUse", colorInterpolationFilters: "sRGB" }, /* @__PURE__ */ React.createElement("feFlood", { result: "BackgroundImageFix", floodOpacity: "0" }), /* @__PURE__ */ React.createElement("feBlend", { in: "SourceGraphic", in2: "BackgroundImageFix", result: "shape" }), /* @__PURE__ */ React.createElement("feGaussianBlur", { result: "effect1_foregroundBlur_2241_22535", stdDeviation: "3" })))
+);
+Layout3Columns.displayName = "Layout3Columns";
+export {
+  Layout3Columns
+};

package/dist/esm/Layout4Columns.js

@@ -0,0 +1,18 @@
+import React from "react";
+const Layout4Columns = (props) => /* @__PURE__ */ React.createElement(
+  "svg",
+  {
+    viewBox: "0 0 72 72",
+    fill: "none",
+    width: 72,
+    height: 72,
+    xmlns: "http://www.w3.org/2000/svg",
+    ...props
+  },
+  /* @__PURE__ */ React.createElement("g", { clipPath: "url(#Layout4Columns__a)" }, /* @__PURE__ */ React.createElement("rect", { width: "54", height: "38", x: "9", y: "19", fill: "var(--wds-illustration-color-1, #002291)", rx: "3" }), /* @__PURE__ */ React.createElement("g", { filter: "url(#Layout4Columns__b)" }, /* @__PURE__ */ React.createElement("path", { fill: "url(#Layout4Columns__c)", d: "M9-1h94v58H9z" })), /* @__PURE__ */ React.createElement("path", { fill: "var(--wds-illustration-color-background, #f8f6f6)", d: "M21 13h2v50h-2zM48 13h2v50h-2zM35 13h2v50h-2z" })),
+  /* @__PURE__ */ React.createElement("defs", null, /* @__PURE__ */ React.createElement("linearGradient", { id: "Layout4Columns__c", x1: "89.668", x2: "49.619", y1: "4.206", y2: "87.031", gradientUnits: "userSpaceOnUse" }, /* @__PURE__ */ React.createElement("stop", { offset: ".176", stopColor: "var(--wds-illustration-color-5, #eaeff1)" }), /* @__PURE__ */ React.createElement("stop", { offset: ".577", stopColor: "var(--wds-illustration-color-3, #b8c4ff)" }), /* @__PURE__ */ React.createElement("stop", { offset: ".85", stopColor: "var(--wds-illustration-color-1, #002291)" })), /* @__PURE__ */ React.createElement("clipPath", { id: "Layout4Columns__a" }, /* @__PURE__ */ React.createElement("rect", { width: "54", height: "38", x: "9", y: "19", fill: "#fff", rx: "3" })), /* @__PURE__ */ React.createElement("filter", { id: "Layout4Columns__b", width: "106", height: "70", x: "3", y: "-7", filterUnits: "userSpaceOnUse", colorInterpolationFilters: "sRGB" }, /* @__PURE__ */ React.createElement("feFlood", { result: "BackgroundImageFix", floodOpacity: "0" }), /* @__PURE__ */ React.createElement("feBlend", { in: "SourceGraphic", in2: "BackgroundImageFix", result: "shape" }), /* @__PURE__ */ React.createElement("feGaussianBlur", { result: "effect1_foregroundBlur_2241_22581", stdDeviation: "3" })))
+);
+Layout4Columns.displayName = "Layout4Columns";
+export {
+  Layout4Columns
+};

package/dist/esm/Layout5Columns.js

@@ -0,0 +1,18 @@
+import React from "react";
+const Layout5Columns = (props) => /* @__PURE__ */ React.createElement(
+  "svg",
+  {
+    viewBox: "0 0 72 72",
+    fill: "none",
+    width: 72,
+    height: 72,
+    xmlns: "http://www.w3.org/2000/svg",
+    ...props
+  },
+  /* @__PURE__ */ React.createElement("g", { clipPath: "url(#Layout5Columns__a)" }, /* @__PURE__ */ React.createElement("rect", { width: "54", height: "38", x: "9", y: "19", fill: "var(--wds-illustration-color-1, #002291)", rx: "3" }), /* @__PURE__ */ React.createElement("g", { filter: "url(#Layout5Columns__b)" }, /* @__PURE__ */ React.createElement("path", { fill: "url(#Layout5Columns__c)", d: "M9-1h94v58H9z" })), /* @__PURE__ */ React.createElement("path", { fill: "var(--wds-illustration-color-background, #f8f6f6)", d: "M19 13h2v50h-2zM51 13h2v50h-2zM40 13h2v50h-2zM30 13h2v50h-2z" })),
+  /* @__PURE__ */ React.createElement("defs", null, /* @__PURE__ */ React.createElement("linearGradient", { id: "Layout5Columns__c", x1: "89.668", x2: "49.619", y1: "4.206", y2: "87.031", gradientUnits: "userSpaceOnUse" }, /* @__PURE__ */ React.createElement("stop", { offset: ".176", stopColor: "var(--wds-illustration-color-5, #eaeff1)" }), /* @__PURE__ */ React.createElement("stop", { offset: ".577", stopColor: "var(--wds-illustration-color-3, #b8c4ff)" }), /* @__PURE__ */ React.createElement("stop", { offset: ".85", stopColor: "var(--wds-illustration-color-1, #002291)" })), /* @__PURE__ */ React.createElement("clipPath", { id: "Layout5Columns__a" }, /* @__PURE__ */ React.createElement("rect", { width: "54", height: "38", x: "9", y: "19", fill: "#fff", rx: "3" })), /* @__PURE__ */ React.createElement("filter", { id: "Layout5Columns__b", width: "106", height: "70", x: "3", y: "-7", filterUnits: "userSpaceOnUse", colorInterpolationFilters: "sRGB" }, /* @__PURE__ */ React.createElement("feFlood", { result: "BackgroundImageFix", floodOpacity: "0" }), /* @__PURE__ */ React.createElement("feBlend", { in: "SourceGraphic", in2: "BackgroundImageFix", result: "shape" }), /* @__PURE__ */ React.createElement("feGaussianBlur", { result: "effect1_foregroundBlur_2243_22634", stdDeviation: "3" })))
+);
+Layout5Columns.displayName = "Layout5Columns";
+export {
+  Layout5Columns
+};

package/dist/esm/LayoutHalf.js

@@ -0,0 +1,19 @@
+import React from "react";
+const LayoutHalf = (props) => /* @__PURE__ */ React.createElement(
+  "svg",
+  {
+    viewBox: "0 0 72 72",
+    fill: "none",
+    width: 72,
+    height: 72,
+    xmlns: "http://www.w3.org/2000/svg",
+    ...props
+  },
+  /* @__PURE__ */ React.createElement("g", { clipPath: "url(#LayoutHalf__a)" }, /* @__PURE__ */ React.createElement("path", { fill: "var(--wds-illustration-color-opacity-25, #f8f6f200)", d: "M5 8h67v58H5z" })),
+  /* @__PURE__ */ React.createElement("g", { clipPath: "url(#LayoutHalf__b)" }, /* @__PURE__ */ React.createElement("rect", { width: "54", height: "38", x: "9", y: "19", fill: "var(--wds-illustration-color-2, #7896ff)", opacity: ".25", rx: "3" }), /* @__PURE__ */ React.createElement("g", { clipPath: "url(#LayoutHalf__c)" }, /* @__PURE__ */ React.createElement("path", { fill: "var(--wds-illustration-color-1, #002291)", d: "M9 22a3 3 0 0 1 3-3h24v38H12a3 3 0 0 1-3-3z" }), /* @__PURE__ */ React.createElement("g", { filter: "url(#LayoutHalf__d)" }, /* @__PURE__ */ React.createElement("path", { fill: "url(#LayoutHalf__e)", d: "M9-1h94v58H9z" })))),
+  /* @__PURE__ */ React.createElement("defs", null, /* @__PURE__ */ React.createElement("clipPath", { id: "LayoutHalf__b" }, /* @__PURE__ */ React.createElement("rect", { width: "54", height: "38", x: "9", y: "19", fill: "#fff", rx: "3" })), /* @__PURE__ */ React.createElement("clipPath", { id: "LayoutHalf__c" }, /* @__PURE__ */ React.createElement("path", { fill: "#fff", d: "M9 22a3 3 0 0 1 3-3h24v38H12a3 3 0 0 1-3-3z" })), /* @__PURE__ */ React.createElement("clipPath", { id: "LayoutHalf__a" }, /* @__PURE__ */ React.createElement("rect", { width: "54", height: "38", x: "9", y: "19", fill: "#fff", rx: "3" })), /* @__PURE__ */ React.createElement("linearGradient", { id: "LayoutHalf__e", x1: "89.668", x2: "49.619", y1: "4.206", y2: "87.031", gradientUnits: "userSpaceOnUse" }, /* @__PURE__ */ React.createElement("stop", { offset: ".176", stopColor: "var(--wds-illustration-color-5, #eaeff1)" }), /* @__PURE__ */ React.createElement("stop", { offset: ".577", stopColor: "var(--wds-illustration-color-3, #b8c4ff)" }), /* @__PURE__ */ React.createElement("stop", { offset: ".85", stopColor: "var(--wds-illustration-color-1, #002291)" })), /* @__PURE__ */ React.createElement("filter", { id: "LayoutHalf__d", width: "106", height: "70", x: "3", y: "-7", filterUnits: "userSpaceOnUse", colorInterpolationFilters: "sRGB" }, /* @__PURE__ */ React.createElement("feFlood", { result: "BackgroundImageFix", floodOpacity: "0" }), /* @__PURE__ */ React.createElement("feBlend", { in: "SourceGraphic", in2: "BackgroundImageFix", result: "shape" }), /* @__PURE__ */ React.createElement("feGaussianBlur", { result: "effect1_foregroundBlur_2243_22699", stdDeviation: "3" })))
+);
+LayoutHalf.displayName = "LayoutHalf";
+export {
+  LayoutHalf
+};

package/dist/esm/LayoutThird.js

@@ -0,0 +1,19 @@
+import React from "react";
+const LayoutThird = (props) => /* @__PURE__ */ React.createElement(
+  "svg",
+  {
+    viewBox: "0 0 72 72",
+    fill: "none",
+    width: 72,
+    height: 72,
+    xmlns: "http://www.w3.org/2000/svg",
+    ...props
+  },
+  /* @__PURE__ */ React.createElement("g", { clipPath: "url(#LayoutThird__a)" }, /* @__PURE__ */ React.createElement("path", { fill: "var(--wds-illustration-color-opacity-25, #f8f6f200)", d: "M5 8h67v58H5z" })),
+  /* @__PURE__ */ React.createElement("g", { clipPath: "url(#LayoutThird__b)" }, /* @__PURE__ */ React.createElement("rect", { width: "54", height: "38", x: "9", y: "19", fill: "var(--wds-illustration-color-2, #7896ff)", opacity: ".25", rx: "3" }), /* @__PURE__ */ React.createElement("g", { clipPath: "url(#LayoutThird__c)" }, /* @__PURE__ */ React.createElement("path", { fill: "var(--wds-illustration-color-1, #002291)", d: "M9 22a3 3 0 0 1 3-3h15v38H12a3 3 0 0 1-3-3z" }), /* @__PURE__ */ React.createElement("g", { filter: "url(#LayoutThird__d)" }, /* @__PURE__ */ React.createElement("path", { fill: "url(#LayoutThird__e)", d: "M9-1h94v58H9z" })))),
+  /* @__PURE__ */ React.createElement("defs", null, /* @__PURE__ */ React.createElement("clipPath", { id: "LayoutThird__b" }, /* @__PURE__ */ React.createElement("rect", { width: "54", height: "38", x: "9", y: "19", fill: "#fff", rx: "3" })), /* @__PURE__ */ React.createElement("clipPath", { id: "LayoutThird__c" }, /* @__PURE__ */ React.createElement("path", { fill: "#fff", d: "M9 22a3 3 0 0 1 3-3h15v38H12a3 3 0 0 1-3-3z" })), /* @__PURE__ */ React.createElement("clipPath", { id: "LayoutThird__a" }, /* @__PURE__ */ React.createElement("rect", { width: "54", height: "38", x: "9", y: "19", fill: "#fff", rx: "3" })), /* @__PURE__ */ React.createElement("linearGradient", { id: "LayoutThird__e", x1: "89.668", x2: "49.619", y1: "4.206", y2: "87.031", gradientUnits: "userSpaceOnUse" }, /* @__PURE__ */ React.createElement("stop", { offset: ".176", stopColor: "var(--wds-illustration-color-5, #eaeff1)" }), /* @__PURE__ */ React.createElement("stop", { offset: ".577", stopColor: "var(--wds-illustration-color-3, #b8c4ff)" }), /* @__PURE__ */ React.createElement("stop", { offset: ".85", stopColor: "var(--wds-illustration-color-1, #002291)" })), /* @__PURE__ */ React.createElement("filter", { id: "LayoutThird__d", width: "106", height: "70", x: "3", y: "-7", filterUnits: "userSpaceOnUse", colorInterpolationFilters: "sRGB" }, /* @__PURE__ */ React.createElement("feFlood", { result: "BackgroundImageFix", floodOpacity: "0" }), /* @__PURE__ */ React.createElement("feBlend", { in: "SourceGraphic", in2: "BackgroundImageFix", result: "shape" }), /* @__PURE__ */ React.createElement("feGaussianBlur", { result: "effect1_foregroundBlur_2244_22896", stdDeviation: "3" })))
+);
+LayoutThird.displayName = "LayoutThird";
+export {
+  LayoutThird
+};

package/dist/esm/MaxWidth.js

@@ -9,9 +9,8 @@ const MaxWidth = (props) => /* @__PURE__ */ React.createElement(
     xmlns: "http://www.w3.org/2000/svg",
     ...props
   },
-  /* @__PURE__ */ React.createElement("rect", { width: "147", height: "81", x: "44.594", y: "23", fill: "var(--wds-illustration-color-opacity-25, #f8f6f200)", rx: "6" }),
   /* @__PURE__ */ React.createElement("path", { fill: "var(--wds-illustration-color-3, #b8c4ff)", d: "M42 67.5v-8a1 1 0 1 0-2 0v8a1 1 0 1 0 2 0M196 67.5v-8a1 1 0 0 0-2 0v8a1 1 0 0 0 2 0" }),
-  /* @__PURE__ */ React.createElement("rect", { width: "147", height: "81", x: "44.594", y: "23", fill: "#EAEFFF", rx: "6" }),
+  /* @__PURE__ */ React.createElement("rect", { width: "147", height: "81", x: "44.594", y: "23", fill: "var(--wds-illustration-color-background-2, #7896ff40)", rx: "6" }),
   /* @__PURE__ */ React.createElement("rect", { width: "147", height: "60.004", x: "44.594", y: "33.5", fill: "var(--wds-illustration-color-background, #f8f6f6)", opacity: ".5", rx: "6" }),
   /* @__PURE__ */ React.createElement("g", { clipPath: "url(#MaxWidth__a)" }, /* @__PURE__ */ React.createElement("g", { clipPath: "url(#MaxWidth__b)" }, /* @__PURE__ */ React.createElement("rect", { width: "147", height: "60.004", x: "44.594", y: "33.5", fill: "#002294", rx: "4" }), /* @__PURE__ */ React.createElement("g", { filter: "url(#MaxWidth__c)" }, /* @__PURE__ */ React.createElement("path", { fill: "url(#MaxWidth__d)", d: "M0 0h81.35v285.949H0z", transform: "matrix(0 -1 -1 0 330.543 93.508)" }))), /* @__PURE__ */ React.createElement("path", { stroke: "var(--wds-illustration-color-1, #002291)", d: "M57.367 30.516v1.499m0 64.469v-1.5m0-59.97v2.998m0 2.999v2.998m0 2.999v2.998m0 2.999v2.998m0 2.999v2.999m0 2.998v2.999m0 2.998v2.999m0 2.998v2.999m0 2.998v2.999m0 2.999v2.998M178.82 30.516v1.499m0 64.469v-1.5m0-59.97v2.998m0 2.999v2.998m0 2.999v2.998m0 2.999v2.998m0 2.999v2.999m0 2.998v2.999m0 2.998v2.999m0 2.998v2.999m0 2.998v2.999m0 2.999v2.998", strokeLinecap: "round" })),
   /* @__PURE__ */ React.createElement("rect", { width: "49.73", height: "1.5", x: "93.229", y: "53.586", fill: "var(--wds-illustration-color-1, #002291)", rx: ".75" }),

package/dist/esm/animated/ElementPositionDefault.js

@@ -0,0 +1,46 @@
+import React, { forwardRef, useEffect, useId, useImperativeHandle, useRef } from "react";
+const ElementPositionDefault = forwardRef(
+  ({ className, ...props }, ref) => {
+    const svgRef = useRef(null);
+    const uid = useId().replace(/:/g, "");
+    useImperativeHandle(
+      ref,
+      () => ({
+        play: () => svgRef.current?.getAnimations({ subtree: true }).forEach((a) => a.play()),
+        pause: () => svgRef.current?.getAnimations({ subtree: true }).forEach((a) => a.pause()),
+        reset: () => svgRef.current?.getAnimations({ subtree: true }).forEach((a) => {
+          a.currentTime = 0;
+          a.pause();
+        })
+      }),
+      []
+    );
+    useEffect(() => {
+      svgRef.current?.getAnimations({ subtree: true }).forEach((a) => {
+        a.currentTime = 0;
+        a.pause();
+      });
+    }, []);
+    return /* @__PURE__ */ React.createElement(
+      "svg",
+      {
+        ref: svgRef,
+        viewBox: "0 0 236 127",
+        fill: "none",
+        width: 236,
+        height: 127,
+        xmlns: "http://www.w3.org/2000/svg",
+        className: ["ElementPositionDefault-root", className].filter(Boolean).join(" "),
+        ...props
+      },
+      /* @__PURE__ */ React.createElement("defs", null, /* @__PURE__ */ React.createElement("linearGradient", { id: `${uid}-paint0_linear_4747_31154-4`, x1: "198.675", y1: "-77.3474", x2: "51.7215", y2: "309.676", gradientUnits: "userSpaceOnUse" }, /* @__PURE__ */ React.createElement("stop", { offset: "0.04", stopColor: "#FCFBF8" }), /* @__PURE__ */ React.createElement("stop", { offset: "0.91", stopColor: "#B8C4FF" })), /* @__PURE__ */ React.createElement("linearGradient", { id: `${uid}-paint1_linear_4747_31154-4`, x1: "54.5422", y1: "179.544", x2: "76.5043", y2: "199.053", 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}-paint2_linear_4747_31154-4`, x1: "38.7391", y1: "158.009", x2: "81.2707", y2: "204.612", 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}-paint3_linear_4747_31154-4`, x1: "54.7931", y1: "162.363", x2: "38.1544", y2: "183.595", 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}-paint4_linear_4747_31154-4`, x1: "76.168", y1: "28.0035", x2: "-100.144", y2: "92.0086", gradientUnits: "userSpaceOnUse" }, /* @__PURE__ */ React.createElement("stop", { offset: "0.176006", stopColor: "#EAEFFF" }), /* @__PURE__ */ React.createElement("stop", { offset: "0.576923", stopColor: "#D5DFFF" }), /* @__PURE__ */ React.createElement("stop", { offset: "0.85", stopColor: "#B8C4FF" })), /* @__PURE__ */ React.createElement("linearGradient", { id: `${uid}-paint5_linear_4747_31154-4`, x1: "110.992", y1: "-9.01811", x2: "-30.1361", y2: "209.074", 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}-paint6_linear_4747_31154-4`, x1: "174.992", y1: "-9.01811", x2: "33.8639", y2: "209.074", 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}-paint7_linear_4747_31154-4`, x1: "238.992", y1: "-9.01811", x2: "97.8639", y2: "209.074", 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}-paint8_linear_4747_31154-4`, x1: "156.276", y1: "21.2354", x2: "115.992", y2: "95.6105", 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_4747_31154`, 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: "13.7813", result: "effect1_foregroundBlur_4747_31154" })), /* @__PURE__ */ React.createElement("filter", { id: `${uid}-filter1_f_4747_31154`, 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: "0.935156", result: "effect1_foregroundBlur_4747_31154" })), /* @__PURE__ */ React.createElement("filter", { id: `${uid}-filter2_f_4747_31154`, filterUnits: "objectBoundingBox", x: "-1", y: "-1", width: "3", height: "3", colorInterpolationFilters: "sRGB" }, /* @__PURE__ */ React.createElement("feFlood", { result: "BackgroundImageFix", floodOpacity: "0" }), /* @__PURE__ */ React.createElement("feBlend", { mode: "normal", in: "SourceGraphic", in2: "BackgroundImageFix", result: "shape" }), /* @__PURE__ */ React.createElement("feGaussianBlur", { stdDeviation: "9.17343", result: "effect1_foregroundBlur_4747_31154" })), /* @__PURE__ */ React.createElement("filter", { id: `${uid}-filter3_f_4747_31154`, 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.53814", result: "effect1_foregroundBlur_4747_31154" })), /* @__PURE__ */ React.createElement("clipPath", { id: `${uid}-cb-node-1-3`, clipPathUnits: "userSpaceOnUse" }, /* @__PURE__ */ React.createElement("rect", { x: "0", y: "0", width: "145", height: "211", rx: "6.89063" })), /* @__PURE__ */ React.createElement("clipPath", { id: `${uid}-cb-node-5-2`, clipPathUnits: "userSpaceOnUse" }, /* @__PURE__ */ React.createElement("rect", { x: "33", y: "163", width: "44", height: "39", rx: "3.40292" })), /* @__PURE__ */ React.createElement("clipPath", { id: `${uid}-cb-node-6-2`, clipPathUnits: "userSpaceOnUse" }, /* @__PURE__ */ React.createElement("rect", { x: "25.7822", y: "163", width: "57.7423", height: "38.7956", rx: "3.40292" })), /* @__PURE__ */ React.createElement("clipPath", { id: `${uid}-cb-node-8-2`, clipPathUnits: "userSpaceOnUse" }, /* @__PURE__ */ React.createElement("rect", { x: "38.1011", y: "168.102", width: "11.7771", height: "11.8626", rx: "5.88855" })), /* @__PURE__ */ React.createElement("clipPath", { id: `${uid}-cb-node-13-2`, clipPathUnits: "userSpaceOnUse" }, /* @__PURE__ */ React.createElement("rect", { x: "0", y: "-5", width: "150", height: "80", rx: "6" })), /* @__PURE__ */ React.createElement("clipPath", { id: `${uid}-cb-node-16-2`, clipPathUnits: "userSpaceOnUse" }, /* @__PURE__ */ React.createElement("rect", { x: "-21", y: "87.0234", width: "59.3003", height: "46.1224", rx: "4.39261" })), /* @__PURE__ */ React.createElement("clipPath", { id: `${uid}-cb-node-18-2`, clipPathUnits: "userSpaceOnUse" }, /* @__PURE__ */ React.createElement("rect", { x: "42.6929", y: "87.0234", width: "59.3003", height: "46.1224", rx: "4.39261" })), /* @__PURE__ */ React.createElement("clipPath", { id: `${uid}-cb-node-20-2`, clipPathUnits: "userSpaceOnUse" }, /* @__PURE__ */ React.createElement("rect", { x: "106.386", y: "87.0234", width: "59.3003", height: "46.1224", rx: "4.39261" })), /* @__PURE__ */ React.createElement("mask", { id: `${uid}-am-node-1-2`, maskUnits: "userSpaceOnUse", "mask-type": "alpha", x: "0", y: "0", width: "236", height: "127" }, /* @__PURE__ */ React.createElement("g", { id: `${uid}-am-node-1-2-artwork` }, /* @__PURE__ */ React.createElement("rect", { x: "45.5", y: "23", width: "145", height: "81", rx: "6", fill: "var(--color-3)" }))), /* @__PURE__ */ React.createElement("mask", { id: `${uid}-am-node-11-clip-2`, maskUnits: "userSpaceOnUse", "mask-type": "alpha", x: "0", y: "0", width: "236", height: "127" }, /* @__PURE__ */ React.createElement("path", { d: "M-2 71L148 71V6.89063C148 3.08504 144.915 0 141.109 0L4.89062 0C1.08503 0 -2 3.08504 -2 6.89063L-2 71Z", fill: "var(--color-4)" })), /* @__PURE__ */ React.createElement("mask", { id: `${uid}-am-node-22-clip-2`, maskUnits: "userSpaceOnUse", "mask-type": "alpha", x: "0", y: "0", width: "236", height: "127" }, /* @__PURE__ */ React.createElement("path", { d: "M 78.30155 42 L 66.69865 42.000001 A 2.17555 2.17555 89.999997 0 0 64.5231 44.175551 L 64.523101 55.778451 A 2.17555 2.17555 89.999997 0 0 66.698651 57.954001 L 78.301551 57.954 A 2.17555 2.17555 89.999997 0 0 80.477101 55.77845 L 80.4771 44.17555 A 2.17555 2.17555 89.999997 0 0 78.30155 42 Z", fill: "var(--color-4)" }))),
+      /* @__PURE__ */ React.createElement("use", { href: `#${uid}-am-node-1-2-artwork` }),
+      /* @__PURE__ */ React.createElement("g", { mask: `url(#${uid}-am-node-1-2)` }, /* @__PURE__ */ React.createElement("g", { className: "ElementPositionDefault-import-mvny2ub3-b" }, /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { fill: "none", clipPath: `url(#${uid}-cb-node-1-3)` }, /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("rect", { x: "-0.219727", y: "0.101562", width: "147", height: "211.591", rx: "6.89063", fill: "var(--color-5)" })), /* @__PURE__ */ React.createElement("g", { fill: "none", filter: `url(#${uid}-filter0_f_4747_31154)` }, /* @__PURE__ */ React.createElement("rect", { x: "-18.5842", y: "-12.8047", width: "203.967", height: "283.943", fill: `url(#${uid}-paint0_linear_4747_31154-4)` })), /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("path", { d: "M-8 211L152 211V159.891C152 156.085 148.915 153 145.109 153L-1.10938 153C-4.91497 153 -8 156.085 -8 159.891L-8 211Z", fill: "var(--color-2)" }), /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { fill: "none", clipPath: `url(#${uid}-cb-node-5-2)` }, /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { fill: "none", clipPath: `url(#${uid}-cb-node-6-2)` }, /* @__PURE__ */ React.createElement("rect", { x: "25.7822", y: "163", width: "57.7423", height: "38.7956", rx: "3.40292", fill: "var(--color-6)" }))), /* @__PURE__ */ React.createElement("path", { d: "M63.4548 171.484L46.8694 195.22L76.4497 191.316L63.4548 171.484Z", fill: `url(#${uid}-paint1_linear_4747_31154-4)` }), /* @__PURE__ */ React.createElement("path", { d: "M93.2608 179.959C93.2608 179.959 70.5203 171.714 69.4112 171.296C68.3022 170.878 61.4207 168.945 63.4552 174.518C65.4768 180.056 66.5845 182.185 67.025 183.131C67.4656 184.076 69.2592 187.929 64.7465 189.351C59.6311 190.962 32.0435 198.611 32.0435 198.611V203.004H93.2608V179.959Z", fill: `url(#${uid}-paint2_linear_4747_31154-4)` }), /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { fill: "none", clipPath: `url(#${uid}-cb-node-8-2)` }, /* @__PURE__ */ React.createElement("rect", { x: "38.1011", y: "168.102", width: "11.7771", height: "11.8626", rx: "5.88855", fill: "var(--color-1)" }), /* @__PURE__ */ React.createElement("g", { fill: "none", filter: `url(#${uid}-filter1_f_4747_31154)` }, /* @__PURE__ */ React.createElement("path", { d: "M46.0588 160.799C45.5396 160.902 45.027 161.046 44.5278 161.229C42.4775 161.988 40.6602 163.433 39.462 165.467C36.7228 170.112 38.2472 176.062 42.8669 178.756C47.4866 181.449 53.451 179.864 56.1903 175.22C58.9295 170.572 57.4051 164.622 52.7887 161.931C50.6785 160.699 48.2921 160.363 46.0588 160.799Z", fill: `url(#${uid}-paint3_linear_4747_31154-4)` })))))), /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("rect", { x: "87", y: "177", width: "24", height: "2", rx: "1", fill: "var(--color-1)" }), /* @__PURE__ */ React.createElement("rect", { x: "87", y: "186", width: "13", height: "2", rx: "1", fill: "var(--color-1)" })))), /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { mask: `url(#${uid}-am-node-11-clip-2)` }, /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("path", { d: "M-2 71L148 71V6.89063C148 3.08504 144.915 0 141.109 0L4.89062 0C1.08503 0 -2 3.08504 -2 6.89063L-2 71Z", fill: "var(--color-1)" }), /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { fill: "none", clipPath: `url(#${uid}-cb-node-13-2)` }, /* @__PURE__ */ React.createElement("rect", { x: "0", y: "-5", width: "150", height: "80", rx: "6", fill: "var(--color-1)" }), /* @__PURE__ */ React.createElement("g", { fill: "none", filter: `url(#${uid}-filter2_f_4747_31154)` }, /* @__PURE__ */ React.createElement("path", { d: "M 311.983 75.0391 L 311.983004 -13.7168 L 0.000004 -13.716814 L 0 75.039086 Z", fill: `url(#${uid}-paint4_linear_4747_31154-4)` }))))))), /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("rect", { x: "30.4717", y: "23.2734", width: "84.0566", height: "2", rx: "1", fill: "var(--color-1)" }), /* @__PURE__ */ React.createElement("rect", { x: "49.5732", y: "32.2734", width: "45.8491", height: "2", rx: "1", fill: "var(--color-1)" }))), /* @__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}-cb-node-16-2)` }, /* @__PURE__ */ React.createElement("rect", { x: "-21", y: "87.0234", width: "59.3003", height: "46.1224", rx: "4.39261", fill: "var(--color-1)" }), /* @__PURE__ */ React.createElement("rect", { x: "-71.522", y: "-24.7812", width: "212.677", height: "175.615", fill: `url(#${uid}-paint5_linear_4747_31154-4)` })))), /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { fill: "none", clipPath: `url(#${uid}-cb-node-18-2)` }, /* @__PURE__ */ React.createElement("rect", { x: "42.6929", y: "87.0234", width: "59.3003", height: "46.1224", rx: "4.39261", fill: "var(--color-1)" }), /* @__PURE__ */ React.createElement("rect", { x: "-7.52197", y: "-24.7812", width: "212.677", height: "175.615", fill: `url(#${uid}-paint6_linear_4747_31154-4)` })))), /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { fill: "none", clipPath: `url(#${uid}-cb-node-20-2)` }, /* @__PURE__ */ React.createElement("rect", { x: "106.386", y: "87.0234", width: "59.3003", height: "46.1224", rx: "4.39261", fill: "var(--color-1)" }), /* @__PURE__ */ React.createElement("rect", { x: "56.478", y: "-24.7812", width: "212.677", height: "175.615", fill: `url(#${uid}-paint7_linear_4747_31154-4)` }))))), /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { mask: `url(#${uid}-am-node-22-clip-2)` }, /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("path", { d: "M 78.30155 42 L 66.69865 42.000001 A 2.17555 2.17555 89.999997 0 0 64.5231 44.175551 L 64.523101 55.778451 A 2.17555 2.17555 89.999997 0 0 66.698651 57.954001 L 78.301551 57.954 A 2.17555 2.17555 89.999997 0 0 80.477101 55.77845 L 80.4771 44.17555 A 2.17555 2.17555 89.999997 0 0 78.30155 42 Z", fill: "var(--color-1)" }), /* @__PURE__ */ React.createElement("g", { fill: "none", filter: `url(#${uid}-filter3_f_4747_31154)` }, /* @__PURE__ */ React.createElement("path", { d: "M165.323 57.9531L165.323 15.1673L64.523 15.1673L64.523 57.9531L165.323 57.9531Z", fill: `url(#${uid}-paint8_linear_4747_31154-4)` })), /* @__PURE__ */ React.createElement("path", { d: "M69.5991 44.8984C70.8176 44.8985 71.8869 45.5312 72.4992 46.4855C73.1115 45.5309 74.1818 44.8984 75.4006 44.8984H77.0323C77.3326 44.8985 77.5762 45.142 77.5762 45.4423V47.074C77.5762 48.2929 76.9431 49.3625 75.9884 49.9747C76.9431 50.587 77.5761 51.6567 77.5762 52.8755V54.5071C77.5762 54.8075 77.3326 55.051 77.0323 55.051H75.4006C74.1815 55.051 73.1114 54.4182 72.4992 53.4633C71.8869 54.4178 70.8179 55.0509 69.5991 55.051H67.9675C67.6671 55.051 67.4236 54.8075 67.4236 54.5071V52.8755C67.4237 51.6568 68.0561 50.587 69.0106 49.9747C68.0561 49.3624 67.4236 48.2927 67.4236 47.074V45.4423C67.4236 45.1419 67.6671 44.8984 67.9675 44.8984H69.5991Z", fill: "var(--color-2)" }))))))))),
+      /* @__PURE__ */ React.createElement("g", { style: { "transformBox": "fill-box", "transformOrigin": "50% 50%", "transform": "translate(194px, 33px)" } }, /* @__PURE__ */ React.createElement("path", { d: "M4 58.125C4 59.1605 3.10468 60 2.00025 60C0.895815 60 0.000495434 59.1605 0.000495434 58.125L0.000495434 1.875C0.000495434 0.839466 0.895815 0 2.00025 0C3.10468 0 4 0.839466 4 1.875L4 58.125Z", fill: "var(--color-2)" }), /* @__PURE__ */ React.createElement("g", { className: "ElementPositionDefault-node-2" }, /* @__PURE__ */ React.createElement("path", { d: "M2 8.48438L2 17.4572", fill: "none", stroke: "var(--color-1)", strokeWidth: "4", strokeLinecap: "round" })))
+    );
+  }
+);
+ElementPositionDefault.displayName = "ElementPositionDefault";
+export {
+  ElementPositionDefault
+};

package/dist/esm/animated/ElementPositionPinned.js

@@ -0,0 +1,47 @@
+import React, { forwardRef, useEffect, useId, useImperativeHandle, useRef } from "react";
+const ElementPositionPinned = forwardRef(
+  ({ className, ...props }, ref) => {
+    const svgRef = useRef(null);
+    const uid = useId().replace(/:/g, "");
+    useImperativeHandle(
+      ref,
+      () => ({
+        play: () => svgRef.current?.getAnimations({ subtree: true }).forEach((a) => a.play()),
+        pause: () => svgRef.current?.getAnimations({ subtree: true }).forEach((a) => a.pause()),
+        reset: () => svgRef.current?.getAnimations({ subtree: true }).forEach((a) => {
+          a.currentTime = 0;
+          a.pause();
+        })
+      }),
+      []
+    );
+    useEffect(() => {
+      svgRef.current?.getAnimations({ subtree: true }).forEach((a) => {
+        a.currentTime = 0;
+        a.pause();
+      });
+    }, []);
+    return /* @__PURE__ */ React.createElement(
+      "svg",
+      {
+        ref: svgRef,
+        viewBox: "0 0 236 127",
+        fill: "none",
+        width: 236,
+        height: 127,
+        xmlns: "http://www.w3.org/2000/svg",
+        className: ["ElementPositionPinned-root", className].filter(Boolean).join(" "),
+        ...props
+      },
+      /* @__PURE__ */ React.createElement("defs", null, /* @__PURE__ */ React.createElement("linearGradient", { id: `${uid}-paint0_linear_4747_31154-4`, x1: "198.675", y1: "-77.3474", x2: "51.7215", y2: "309.676", gradientUnits: "userSpaceOnUse" }, /* @__PURE__ */ React.createElement("stop", { offset: "0.04", stopColor: "#FCFBF8" }), /* @__PURE__ */ React.createElement("stop", { offset: "0.91", stopColor: "#B8C4FF" })), /* @__PURE__ */ React.createElement("linearGradient", { id: `${uid}-paint1_linear_4747_31154-4`, x1: "54.5422", y1: "179.544", x2: "76.5043", y2: "199.053", 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}-paint2_linear_4747_31154-4`, x1: "38.7391", y1: "158.009", x2: "81.2707", y2: "204.612", 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}-paint3_linear_4747_31154-4`, x1: "54.7931", y1: "162.363", x2: "38.1544", y2: "183.595", 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}-paint4_linear_4747_31154-4`, x1: "76.168", y1: "28.0035", x2: "-100.144", y2: "92.0086", gradientUnits: "userSpaceOnUse" }, /* @__PURE__ */ React.createElement("stop", { offset: "0.176006", stopColor: "#EAEFFF" }), /* @__PURE__ */ React.createElement("stop", { offset: "0.576923", stopColor: "#D5DFFF" }), /* @__PURE__ */ React.createElement("stop", { offset: "0.85", stopColor: "#B8C4FF" })), /* @__PURE__ */ React.createElement("linearGradient", { id: `${uid}-paint5_linear_4747_31154-4`, x1: "110.992", y1: "-9.01811", x2: "-30.1361", y2: "209.074", 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}-paint6_linear_4747_31154-4`, x1: "174.992", y1: "-9.01811", x2: "33.8639", y2: "209.074", 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}-paint7_linear_4747_31154-4`, x1: "238.992", y1: "-9.01811", x2: "97.8639", y2: "209.074", 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}-paint8_linear_4747_31154-4`, x1: "156.276", y1: "21.2354", x2: "115.992", y2: "95.6105", 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_4747_31154`, 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: "13.7813", result: "effect1_foregroundBlur_4747_31154" })), /* @__PURE__ */ React.createElement("filter", { id: `${uid}-filter1_f_4747_31154`, 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: "0.935156", result: "effect1_foregroundBlur_4747_31154" })), /* @__PURE__ */ React.createElement("filter", { id: `${uid}-filter2_f_4747_31154`, filterUnits: "objectBoundingBox", x: "-1", y: "-1", width: "3", height: "3", colorInterpolationFilters: "sRGB" }, /* @__PURE__ */ React.createElement("feFlood", { result: "BackgroundImageFix", floodOpacity: "0" }), /* @__PURE__ */ React.createElement("feBlend", { mode: "normal", in: "SourceGraphic", in2: "BackgroundImageFix", result: "shape" }), /* @__PURE__ */ React.createElement("feGaussianBlur", { stdDeviation: "9.17343", result: "effect1_foregroundBlur_4747_31154" })), /* @__PURE__ */ React.createElement("filter", { id: `${uid}-filter3_f_4747_31154`, 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.53814", result: "effect1_foregroundBlur_4747_31154" })), /* @__PURE__ */ React.createElement("clipPath", { id: `${uid}-cb-node-1-3`, clipPathUnits: "userSpaceOnUse" }, /* @__PURE__ */ React.createElement("rect", { x: "0", y: "0", width: "145", height: "211", rx: "6.89063" })), /* @__PURE__ */ React.createElement("clipPath", { id: `${uid}-cb-node-5-2`, clipPathUnits: "userSpaceOnUse" }, /* @__PURE__ */ React.createElement("rect", { x: "33", y: "163", width: "44", height: "39", rx: "3.40292" })), /* @__PURE__ */ React.createElement("clipPath", { id: `${uid}-cb-node-6-2`, clipPathUnits: "userSpaceOnUse" }, /* @__PURE__ */ React.createElement("rect", { x: "25.7822", y: "163", width: "57.7423", height: "38.7956", rx: "3.40292" })), /* @__PURE__ */ React.createElement("clipPath", { id: `${uid}-cb-node-8-2`, clipPathUnits: "userSpaceOnUse" }, /* @__PURE__ */ React.createElement("rect", { x: "38.1011", y: "168.102", width: "11.7771", height: "11.8626", rx: "5.88855" })), /* @__PURE__ */ React.createElement("clipPath", { id: `${uid}-cb-node-13-2`, clipPathUnits: "userSpaceOnUse" }, /* @__PURE__ */ React.createElement("rect", { x: "0", y: "-5", width: "150", height: "80", rx: "6" })), /* @__PURE__ */ React.createElement("clipPath", { id: `${uid}-cb-node-16-2`, clipPathUnits: "userSpaceOnUse" }, /* @__PURE__ */ React.createElement("rect", { x: "-21", y: "87.0234", width: "59.3003", height: "46.1224", rx: "4.39261" })), /* @__PURE__ */ React.createElement("clipPath", { id: `${uid}-cb-node-18-2`, clipPathUnits: "userSpaceOnUse" }, /* @__PURE__ */ React.createElement("rect", { x: "42.6929", y: "87.0234", width: "59.3003", height: "46.1224", rx: "4.39261" })), /* @__PURE__ */ React.createElement("clipPath", { id: `${uid}-cb-node-20-2`, clipPathUnits: "userSpaceOnUse" }, /* @__PURE__ */ React.createElement("rect", { x: "106.386", y: "87.0234", width: "59.3003", height: "46.1224", rx: "4.39261" })), /* @__PURE__ */ React.createElement("mask", { id: `${uid}-am-node-1-2`, maskUnits: "userSpaceOnUse", "mask-type": "alpha", x: "0", y: "0", width: "236", height: "127" }, /* @__PURE__ */ React.createElement("g", { id: `${uid}-am-node-1-2-artwork` }, /* @__PURE__ */ React.createElement("rect", { x: "45.5", y: "23", width: "145", height: "81", rx: "6", fill: "var(--color-3)" }))), /* @__PURE__ */ React.createElement("mask", { id: `${uid}-am-node-11-clip-2`, maskUnits: "userSpaceOnUse", "mask-type": "alpha", x: "0", y: "0", width: "236", height: "127" }, /* @__PURE__ */ React.createElement("path", { d: "M-2 71L148 71V6.89063C148 3.08504 144.915 0 141.109 0L4.89062 0C1.08503 0 -2 3.08504 -2 6.89063L-2 71Z", fill: "var(--color-4)" })), /* @__PURE__ */ React.createElement("mask", { id: `${uid}-am-node-22-clip-2`, maskUnits: "userSpaceOnUse", "mask-type": "alpha", x: "0", y: "0", width: "236", height: "127" }, /* @__PURE__ */ React.createElement("path", { d: "M 78.30155 42 L 66.69865 42.000001 A 2.17555 2.17555 89.999997 0 0 64.5231 44.175551 L 64.523101 55.778451 A 2.17555 2.17555 89.999997 0 0 66.698651 57.954001 L 78.301551 57.954 A 2.17555 2.17555 89.999997 0 0 80.477101 55.77845 L 80.4771 44.17555 A 2.17555 2.17555 89.999997 0 0 78.30155 42 Z", fill: "var(--color-4)" }))),
+      /* @__PURE__ */ React.createElement("use", { href: `#${uid}-am-node-1-2-artwork` }),
+      /* @__PURE__ */ React.createElement("g", { mask: `url(#${uid}-am-node-1-2)` }, /* @__PURE__ */ React.createElement("g", { className: "ElementPositionPinned-import-mvny2ub3-b" }, /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { fill: "none", clipPath: `url(#${uid}-cb-node-1-3)` }, /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("rect", { x: "-0.219727", y: "0.101562", width: "147", height: "211.591", rx: "6.89063", fill: "var(--color-5)" })), /* @__PURE__ */ React.createElement("g", { fill: "none", filter: `url(#${uid}-filter0_f_4747_31154)` }, /* @__PURE__ */ React.createElement("rect", { x: "-18.5842", y: "-12.8047", width: "203.967", height: "283.943", fill: `url(#${uid}-paint0_linear_4747_31154-4)` })), /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("path", { d: "M-8 211L152 211V159.891C152 156.085 148.915 153 145.109 153L-1.10938 153C-4.91497 153 -8 156.085 -8 159.891L-8 211Z", fill: "var(--color-2)" }), /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { fill: "none", clipPath: `url(#${uid}-cb-node-5-2)` }, /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { fill: "none", clipPath: `url(#${uid}-cb-node-6-2)` }, /* @__PURE__ */ React.createElement("rect", { x: "25.7822", y: "163", width: "57.7423", height: "38.7956", rx: "3.40292", fill: "var(--color-6)" }))), /* @__PURE__ */ React.createElement("path", { d: "M63.4548 171.484L46.8694 195.22L76.4497 191.316L63.4548 171.484Z", fill: `url(#${uid}-paint1_linear_4747_31154-4)` }), /* @__PURE__ */ React.createElement("path", { d: "M93.2608 179.959C93.2608 179.959 70.5203 171.714 69.4112 171.296C68.3022 170.878 61.4207 168.945 63.4552 174.518C65.4768 180.056 66.5845 182.185 67.025 183.131C67.4656 184.076 69.2592 187.929 64.7465 189.351C59.6311 190.962 32.0435 198.611 32.0435 198.611V203.004H93.2608V179.959Z", fill: `url(#${uid}-paint2_linear_4747_31154-4)` }), /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { fill: "none", clipPath: `url(#${uid}-cb-node-8-2)` }, /* @__PURE__ */ React.createElement("rect", { x: "38.1011", y: "168.102", width: "11.7771", height: "11.8626", rx: "5.88855", fill: "var(--color-1)" }), /* @__PURE__ */ React.createElement("g", { fill: "none", filter: `url(#${uid}-filter1_f_4747_31154)` }, /* @__PURE__ */ React.createElement("path", { d: "M46.0588 160.799C45.5396 160.902 45.027 161.046 44.5278 161.229C42.4775 161.988 40.6602 163.433 39.462 165.467C36.7228 170.112 38.2472 176.062 42.8669 178.756C47.4866 181.449 53.451 179.864 56.1903 175.22C58.9295 170.572 57.4051 164.622 52.7887 161.931C50.6785 160.699 48.2921 160.363 46.0588 160.799Z", fill: `url(#${uid}-paint3_linear_4747_31154-4)` })))))), /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("rect", { x: "87", y: "177", width: "24", height: "2", rx: "1", fill: "var(--color-1)" }), /* @__PURE__ */ React.createElement("rect", { x: "87", y: "186", width: "13", height: "2", rx: "1", fill: "var(--color-1)" })))), /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { mask: `url(#${uid}-am-node-11-clip-2)` }, /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("path", { d: "M-2 71L148 71V6.89063C148 3.08504 144.915 0 141.109 0L4.89062 0C1.08503 0 -2 3.08504 -2 6.89063L-2 71Z", fill: "var(--color-1)" }), /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { fill: "none", clipPath: `url(#${uid}-cb-node-13-2)` }, /* @__PURE__ */ React.createElement("rect", { x: "0", y: "-5", width: "150", height: "80", rx: "6", fill: "var(--color-1)" }), /* @__PURE__ */ React.createElement("g", { fill: "none", filter: `url(#${uid}-filter2_f_4747_31154)` }, /* @__PURE__ */ React.createElement("path", { d: "M 311.983 75.0391 L 311.983004 -13.7168 L 0.000004 -13.716814 L 0 75.039086 Z", fill: `url(#${uid}-paint4_linear_4747_31154-4)` }))))))), /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("rect", { x: "30.4717", y: "23.2734", width: "84.0566", height: "2", rx: "1", fill: "var(--color-1)" }), /* @__PURE__ */ React.createElement("rect", { x: "49.5732", y: "32.2734", width: "45.8491", height: "2", rx: "1", fill: "var(--color-1)" }))), /* @__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}-cb-node-16-2)` }, /* @__PURE__ */ React.createElement("rect", { x: "-21", y: "87.0234", width: "59.3003", height: "46.1224", rx: "4.39261", fill: "var(--color-1)" }), /* @__PURE__ */ React.createElement("rect", { x: "-71.522", y: "-24.7812", width: "212.677", height: "175.615", fill: `url(#${uid}-paint5_linear_4747_31154-4)` })))), /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { fill: "none", clipPath: `url(#${uid}-cb-node-18-2)` }, /* @__PURE__ */ React.createElement("rect", { x: "42.6929", y: "87.0234", width: "59.3003", height: "46.1224", rx: "4.39261", fill: "var(--color-1)" }), /* @__PURE__ */ React.createElement("rect", { x: "-7.52197", y: "-24.7812", width: "212.677", height: "175.615", fill: `url(#${uid}-paint6_linear_4747_31154-4)` })))), /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { fill: "none", clipPath: `url(#${uid}-cb-node-20-2)` }, /* @__PURE__ */ React.createElement("rect", { x: "106.386", y: "87.0234", width: "59.3003", height: "46.1224", rx: "4.39261", fill: "var(--color-1)" }), /* @__PURE__ */ React.createElement("rect", { x: "56.478", y: "-24.7812", width: "212.677", height: "175.615", fill: `url(#${uid}-paint7_linear_4747_31154-4)` })))))))))),
+      /* @__PURE__ */ React.createElement("g", { style: { "transformBox": "fill-box", "transformOrigin": "50% 50%", "transform": "translate(104px, 40px)" }, fill: "none" }, /* @__PURE__ */ React.createElement("g", { mask: `url(#${uid}-am-node-22-clip-2)` }, /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("path", { d: "M 78.30155 42 L 66.69865 42.000001 A 2.17555 2.17555 89.999997 0 0 64.5231 44.175551 L 64.523101 55.778451 A 2.17555 2.17555 89.999997 0 0 66.698651 57.954001 L 78.301551 57.954 A 2.17555 2.17555 89.999997 0 0 80.477101 55.77845 L 80.4771 44.17555 A 2.17555 2.17555 89.999997 0 0 78.30155 42 Z", fill: "var(--color-1)" }), /* @__PURE__ */ React.createElement("g", { fill: "none", filter: `url(#${uid}-filter3_f_4747_31154)` }, /* @__PURE__ */ React.createElement("path", { d: "M165.323 57.9531L165.323 15.1673L64.523 15.1673L64.523 57.9531L165.323 57.9531Z", fill: `url(#${uid}-paint8_linear_4747_31154-4)` })), /* @__PURE__ */ React.createElement("path", { d: "M69.5991 44.8984C70.8176 44.8985 71.8869 45.5312 72.4992 46.4855C73.1115 45.5309 74.1818 44.8984 75.4006 44.8984H77.0323C77.3326 44.8985 77.5762 45.142 77.5762 45.4423V47.074C77.5762 48.2929 76.9431 49.3625 75.9884 49.9747C76.9431 50.587 77.5761 51.6567 77.5762 52.8755V54.5071C77.5762 54.8075 77.3326 55.051 77.0323 55.051H75.4006C74.1815 55.051 73.1114 54.4182 72.4992 53.4633C71.8869 54.4178 70.8179 55.0509 69.5991 55.051H67.9675C67.6671 55.051 67.4236 54.8075 67.4236 54.5071V52.8755C67.4237 51.6568 68.0561 50.587 69.0106 49.9747C68.0561 49.3624 67.4236 48.2927 67.4236 47.074V45.4423C67.4236 45.1419 67.6671 44.8984 67.9675 44.8984H69.5991Z", fill: "var(--color-2)" })))),
+      /* @__PURE__ */ React.createElement("g", { style: { "transformBox": "fill-box", "transformOrigin": "50% 50%", "transform": "translate(194px, 33px)" } }, /* @__PURE__ */ React.createElement("path", { d: "M4 58.125C4 59.1605 3.10468 60 2.00025 60C0.895815 60 0.000495434 59.1605 0.000495434 58.125L0.000495434 1.875C0.000495434 0.839466 0.895815 0 2.00025 0C3.10468 0 4 0.839466 4 1.875L4 58.125Z", fill: "var(--color-2)" }), /* @__PURE__ */ React.createElement("g", { className: "ElementPositionPinned-node-2" }, /* @__PURE__ */ React.createElement("path", { d: "M2 8.48438L2 17.4572", fill: "none", stroke: "var(--color-1)", strokeWidth: "4", strokeLinecap: "round" })))
+    );
+  }
+);
+ElementPositionPinned.displayName = "ElementPositionPinned";
+export {
+  ElementPositionPinned
+};