@wix/design-system-illustrations 2.42.1 → 2.44.0

package/dist/esm/animated/index.js

@@ -1,3 +1,6 @@
+import { ElementPositionDefault } from "./ElementPositionDefault";
+import { ElementPositionPinned } from "./ElementPositionPinned";
+import { ElementPositionSticky } from "./ElementPositionSticky";
 import { ElementsFixedHeight } from "./ElementsFixedHeight";
 import { ElementsFixedMargins } from "./ElementsFixedMargins";
 import { ElementsScale } from "./ElementsScale";
@@ -13,6 +16,7 @@ import { ResponsiveBehaviorElementsScaleWithLimits } from "./ResponsiveBehaviorE
 import { ResponsiveBehaviorElementsScaleWithLimitsMobile } from "./ResponsiveBehaviorElementsScaleWithLimitsMobile";
 import { ResponsiveBehaviorElementsStackOnMobile } from "./ResponsiveBehaviorElementsStackOnMobile";
 import { ResponsiveBehaviorElementsStretch } from "./ResponsiveBehaviorElementsStretch";
+import { ResponsiveBehaviorHeaderDisappear } from "./ResponsiveBehaviorHeaderDisappear";
 import { ResponsiveBehaviorHeaderFadeOut } from "./ResponsiveBehaviorHeaderFadeOut";
 import { ResponsiveBehaviorHeaderFreeze } from "./ResponsiveBehaviorHeaderFreeze";
 import { ResponsiveBehaviorHeaderScrollWithSite } from "./ResponsiveBehaviorHeaderScrollWithSite";
@@ -27,17 +31,15 @@ import { ResponsiveBehaviorTextScaleProportionally } from "./ResponsiveBehaviorT
 import { ResponsiveBehaviorWarp } from "./ResponsiveBehaviorWarp";
 import { SectionFixedHeight } from "./SectionFixedHeight";
 import { SectionScale } from "./SectionScale";
-import { ThumbnailFullWidth } from "./ThumbnailFullWidth";
-import { ThumbnailFullWidthTransparent } from "./ThumbnailFullWidthTransparent";
-import { ThumbnailGrid } from "./ThumbnailGrid";
-import { ThumbnailGridTransparent } from "./ThumbnailGridTransparent";
-import { ThumbnailSideBySide } from "./ThumbnailSideBySide";
-import { ThumbnailSideBySideTransparent } from "./ThumbnailSideBySideTransparent";
-import { ThumbnailSplit } from "./ThumbnailSplit";
-import { ThumbnailSplitTransparent } from "./ThumbnailSplitTransparent";
-import { ThumbnailZigzag } from "./ThumbnailZigzag";
-import { ThumbnailZigzagTransparent } from "./ThumbnailZigzagTransparent";
+import { StickySectionPresetsFullWidth } from "./StickySectionPresetsFullWidth";
+import { StickySectionPresetsGridRows } from "./StickySectionPresetsGridRows";
+import { StickySectionPresetsSideBySide } from "./StickySectionPresetsSideBySide";
+import { StickySectionPresetsSplit } from "./StickySectionPresetsSplit";
+import { StickySectionPresetsZigzag } from "./StickySectionPresetsZigzag";
 export {
+  ElementPositionDefault,
+  ElementPositionPinned,
+  ElementPositionSticky,
   ElementsFixedHeight,
   ElementsFixedMargins,
   ElementsScale,
@@ -53,6 +55,7 @@ export {
   ResponsiveBehaviorElementsScaleWithLimitsMobile,
   ResponsiveBehaviorElementsStackOnMobile,
   ResponsiveBehaviorElementsStretch,
+  ResponsiveBehaviorHeaderDisappear,
   ResponsiveBehaviorHeaderFadeOut,
   ResponsiveBehaviorHeaderFreeze,
   ResponsiveBehaviorHeaderScrollWithSite,
@@ -67,14 +70,9 @@ export {
   ResponsiveBehaviorWarp,
   SectionFixedHeight,
   SectionScale,
-  ThumbnailFullWidth,
-  ThumbnailFullWidthTransparent,
-  ThumbnailGrid,
-  ThumbnailGridTransparent,
-  ThumbnailSideBySide,
-  ThumbnailSideBySideTransparent,
-  ThumbnailSplit,
-  ThumbnailSplitTransparent,
-  ThumbnailZigzag,
-  ThumbnailZigzagTransparent
+  StickySectionPresetsFullWidth,
+  StickySectionPresetsGridRows,
+  StickySectionPresetsSideBySide,
+  StickySectionPresetsSplit,
+  StickySectionPresetsZigzag
 };

package/dist/esm/index.js

@@ -266,12 +266,19 @@ import { Iris } from "./Iris";
 import { JelloLoop } from "./JelloLoop";
 import { LandscapeFrame } from "./LandscapeFrame";
 import { LayeredEllipseDivider } from "./LayeredEllipseDivider";
+import { Layout1Column } from "./Layout1Column";
+import { Layout2Columns } from "./Layout2Columns";
+import { Layout3Columns } from "./Layout3Columns";
+import { Layout4Columns } from "./Layout4Columns";
+import { Layout5Columns } from "./Layout5Columns";
 import { LayoutCards } from "./LayoutCards";
 import { LayoutCarousel } from "./LayoutCarousel";
+import { LayoutHalf } from "./LayoutHalf";
 import { LayoutList } from "./LayoutList";
 import { LayoutSideBySide } from "./LayoutSideBySide";
 import { LayoutSidebar } from "./LayoutSidebar";
 import { LayoutSingleColumn } from "./LayoutSingleColumn";
+import { LayoutThird } from "./LayoutThird";
 import { LayoutTwoColumn } from "./LayoutTwoColumn";
 import { LayoutTwoColumnSmall } from "./LayoutTwoColumnSmall";
 import { LeftToRight } from "./LeftToRight";
@@ -810,12 +817,19 @@ export {
   JelloLoop,
   LandscapeFrame,
   LayeredEllipseDivider,
+  Layout1Column,
+  Layout2Columns,
+  Layout3Columns,
+  Layout4Columns,
+  Layout5Columns,
   LayoutCards,
   LayoutCarousel,
+  LayoutHalf,
   LayoutList,
   LayoutSideBySide,
   LayoutSidebar,
   LayoutSingleColumn,
+  LayoutThird,
   LayoutTwoColumn,
   LayoutTwoColumnSmall,
   LeftToRight,

package/dist/types/Layout1Column.d.ts

@@ -0,0 +1,5 @@
+import React, { SVGProps } from 'react';
+export declare const Layout1Column: {
+    (props: SVGProps<SVGSVGElement>): React.JSX.Element;
+    displayName: string;
+};

package/dist/types/Layout2Columns.d.ts

@@ -0,0 +1,5 @@
+import React, { SVGProps } from 'react';
+export declare const Layout2Columns: {
+    (props: SVGProps<SVGSVGElement>): React.JSX.Element;
+    displayName: string;
+};

package/dist/types/Layout3Columns.d.ts

@@ -0,0 +1,5 @@
+import React, { SVGProps } from 'react';
+export declare const Layout3Columns: {
+    (props: SVGProps<SVGSVGElement>): React.JSX.Element;
+    displayName: string;
+};

package/dist/types/Layout4Columns.d.ts

@@ -0,0 +1,5 @@
+import React, { SVGProps } from 'react';
+export declare const Layout4Columns: {
+    (props: SVGProps<SVGSVGElement>): React.JSX.Element;
+    displayName: string;
+};

package/dist/types/Layout5Columns.d.ts

@@ -0,0 +1,5 @@
+import React, { SVGProps } from 'react';
+export declare const Layout5Columns: {
+    (props: SVGProps<SVGSVGElement>): React.JSX.Element;
+    displayName: string;
+};

package/dist/types/LayoutHalf.d.ts

@@ -0,0 +1,5 @@
+import React, { SVGProps } from 'react';
+export declare const LayoutHalf: {
+    (props: SVGProps<SVGSVGElement>): React.JSX.Element;
+    displayName: string;
+};

package/dist/types/LayoutThird.d.ts

@@ -0,0 +1,5 @@
+import React, { SVGProps } from 'react';
+export declare const LayoutThird: {
+    (props: SVGProps<SVGSVGElement>): React.JSX.Element;
+    displayName: string;
+};

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,3 +1,9 @@
+export { ElementPositionDefault } from './ElementPositionDefault';
+export type { ElementPositionDefaultHandle } from './ElementPositionDefault';
+export { ElementPositionPinned } from './ElementPositionPinned';
+export type { ElementPositionPinnedHandle } from './ElementPositionPinned';
+export { ElementPositionSticky } from './ElementPositionSticky';
+export type { ElementPositionStickyHandle } from './ElementPositionSticky';
 export { ElementsFixedHeight } from './ElementsFixedHeight';
 export type { ElementsFixedHeightHandle } from './ElementsFixedHeight';
 export { ElementsFixedMargins } from './ElementsFixedMargins';
@@ -28,6 +34,8 @@ export { ResponsiveBehaviorElementsStackOnMobile } from './ResponsiveBehaviorEle
 export type { ResponsiveBehaviorElementsStackOnMobileHandle } from './ResponsiveBehaviorElementsStackOnMobile';
 export { ResponsiveBehaviorElementsStretch } from './ResponsiveBehaviorElementsStretch';
 export type { ResponsiveBehaviorElementsStretchHandle } from './ResponsiveBehaviorElementsStretch';
+export { ResponsiveBehaviorHeaderDisappear } from './ResponsiveBehaviorHeaderDisappear';
+export type { ResponsiveBehaviorHeaderDisappearHandle } from './ResponsiveBehaviorHeaderDisappear';
 export { ResponsiveBehaviorHeaderFadeOut } from './ResponsiveBehaviorHeaderFadeOut';
 export type { ResponsiveBehaviorHeaderFadeOutHandle } from './ResponsiveBehaviorHeaderFadeOut';
 export { ResponsiveBehaviorHeaderFreeze } from './ResponsiveBehaviorHeaderFreeze';
@@ -56,23 +64,13 @@ export { SectionFixedHeight } from './SectionFixedHeight';
 export type { SectionFixedHeightHandle } from './SectionFixedHeight';
 export { SectionScale } from './SectionScale';
 export type { SectionScaleHandle } from './SectionScale';
-export { ThumbnailFullWidth } from './ThumbnailFullWidth';
-export type { ThumbnailFullWidthHandle } from './ThumbnailFullWidth';
-export { ThumbnailFullWidthTransparent } from './ThumbnailFullWidthTransparent';
-export type { ThumbnailFullWidthTransparentHandle } from './ThumbnailFullWidthTransparent';
-export { ThumbnailGrid } from './ThumbnailGrid';
-export type { ThumbnailGridHandle } from './ThumbnailGrid';
-export { ThumbnailGridTransparent } from './ThumbnailGridTransparent';
-export type { ThumbnailGridTransparentHandle } from './ThumbnailGridTransparent';
-export { ThumbnailSideBySide } from './ThumbnailSideBySide';
-export type { ThumbnailSideBySideHandle } from './ThumbnailSideBySide';
-export { ThumbnailSideBySideTransparent } from './ThumbnailSideBySideTransparent';
-export type { ThumbnailSideBySideTransparentHandle } from './ThumbnailSideBySideTransparent';
-export { ThumbnailSplit } from './ThumbnailSplit';
-export type { ThumbnailSplitHandle } from './ThumbnailSplit';
-export { ThumbnailSplitTransparent } from './ThumbnailSplitTransparent';
-export type { ThumbnailSplitTransparentHandle } from './ThumbnailSplitTransparent';
-export { ThumbnailZigzag } from './ThumbnailZigzag';
-export type { ThumbnailZigzagHandle } from './ThumbnailZigzag';
-export { ThumbnailZigzagTransparent } from './ThumbnailZigzagTransparent';
-export type { ThumbnailZigzagTransparentHandle } from './ThumbnailZigzagTransparent';
+export { StickySectionPresetsFullWidth } from './StickySectionPresetsFullWidth';
+export type { StickySectionPresetsFullWidthHandle } from './StickySectionPresetsFullWidth';
+export { StickySectionPresetsGridRows } from './StickySectionPresetsGridRows';
+export type { StickySectionPresetsGridRowsHandle } from './StickySectionPresetsGridRows';
+export { StickySectionPresetsSideBySide } from './StickySectionPresetsSideBySide';
+export type { StickySectionPresetsSideBySideHandle } from './StickySectionPresetsSideBySide';
+export { StickySectionPresetsSplit } from './StickySectionPresetsSplit';
+export type { StickySectionPresetsSplitHandle } from './StickySectionPresetsSplit';
+export { StickySectionPresetsZigzag } from './StickySectionPresetsZigzag';
+export type { StickySectionPresetsZigzagHandle } from './StickySectionPresetsZigzag';

package/dist/types/index.d.ts

@@ -266,12 +266,19 @@ export { Iris } from './Iris';
 export { JelloLoop } from './JelloLoop';
 export { LandscapeFrame } from './LandscapeFrame';
 export { LayeredEllipseDivider } from './LayeredEllipseDivider';
+export { Layout1Column } from './Layout1Column';
+export { Layout2Columns } from './Layout2Columns';
+export { Layout3Columns } from './Layout3Columns';
+export { Layout4Columns } from './Layout4Columns';
+export { Layout5Columns } from './Layout5Columns';
 export { LayoutCards } from './LayoutCards';
 export { LayoutCarousel } from './LayoutCarousel';
+export { LayoutHalf } from './LayoutHalf';
 export { LayoutList } from './LayoutList';
 export { LayoutSideBySide } from './LayoutSideBySide';
 export { LayoutSidebar } from './LayoutSidebar';
 export { LayoutSingleColumn } from './LayoutSingleColumn';
+export { LayoutThird } from './LayoutThird';
 export { LayoutTwoColumn } from './LayoutTwoColumn';
 export { LayoutTwoColumnSmall } from './LayoutTwoColumnSmall';
 export { LeftToRight } from './LeftToRight';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/design-system-illustrations",
-  "version": "2.42.1",
+  "version": "2.44.0",
   "license": "MIT",
   "description": "Wix Design System Illustrations",
   "scripts": {
@@ -9,8 +9,9 @@
     "test": "vitest run"
   },
   "devDependencies": {
+    "@types/react": "^18.3.16",
     "@typescript-eslint/parser": "^8.58.1",
-    "@wix/design-system-tokens": "1.236.2",
+    "@wix/design-system-tokens": "1.237.0",
     "dom-serializer": "^1.0.1",
     "domutils": "^2.8.0",
     "esbuild": "^0.25.0",
@@ -52,6 +53,5 @@
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
-  "packageManager": "yarn@4.0.2",
-  "falconPackageHash": "7eea1062a26d623b4193a9f4ebc05fce15120cecd18c11355556e539"
+  "falconPackageHash": "0e0ec827db0c0c2364868040eb8c3435c992ee762dc30f8718bb87f9"
 }

package/src/Layout1Column.svg

@@ -0,0 +1,23 @@
+<svg width="72" height="72" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2241_22421)">
+<rect x="9" y="19" width="54" height="38" rx="3" fill="#002291"/>
+<g filter="url(#filter0_f_2241_22421)">
+<path d="M9 -1H103V57H9V-1Z" fill="url(#paint0_linear_2241_22421)"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_f_2241_22421" x="3" y="-7" width="106" height="70" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="3" result="effect1_foregroundBlur_2241_22421"/>
+</filter>
+<linearGradient id="paint0_linear_2241_22421" x1="89.6684" y1="4.20606" x2="49.6192" y2="87.031" gradientUnits="userSpaceOnUse">
+<stop offset="0.176006" stop-color="#EAEFF1"/>
+<stop offset="0.576923" stop-color="#B8C4FF"/>
+<stop offset="0.85" stop-color="#002291"/>
+</linearGradient>
+<clipPath id="clip0_2241_22421">
+<rect x="9" y="19" width="54" height="38" rx="3" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/src/Layout2Columns.svg

@@ -0,0 +1,24 @@
+<svg width="72" height="72" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2241_22466)">
+<rect x="9" y="19" width="54" height="38" rx="3" fill="#002291"/>
+<g filter="url(#filter0_f_2241_22466)">
+<path d="M9 -1H103V57H9V-1Z" fill="url(#paint0_linear_2241_22466)"/>
+</g>
+<path d="M35 13H37V63H35V13Z" fill="#F8F6F6"/>
+</g>
+<defs>
+<filter id="filter0_f_2241_22466" x="3" y="-7" width="106" height="70" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="3" result="effect1_foregroundBlur_2241_22466"/>
+</filter>
+<linearGradient id="paint0_linear_2241_22466" x1="89.6684" y1="4.20606" x2="49.6192" y2="87.031" gradientUnits="userSpaceOnUse">
+<stop offset="0.176006" stop-color="#EAEFF1"/>
+<stop offset="0.576923" stop-color="#B8C4FF"/>
+<stop offset="0.85" stop-color="#002291"/>
+</linearGradient>
+<clipPath id="clip0_2241_22466">
+<rect x="9" y="19" width="54" height="38" rx="3" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/src/Layout3Columns.svg

@@ -0,0 +1,25 @@
+<svg width="72" height="72" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2241_22535)">
+<rect x="9" y="19" width="54" height="38" rx="3" fill="#002291"/>
+<g filter="url(#filter0_f_2241_22535)">
+<path d="M9 -1H103V57H9V-1Z" fill="url(#paint0_linear_2241_22535)"/>
+</g>
+<path d="M26 13H28V63H26V13Z" fill="#F8F6F6"/>
+<path d="M44 13H46V63H44V13Z" fill="#F8F6F6"/>
+</g>
+<defs>
+<filter id="filter0_f_2241_22535" x="3" y="-7" width="106" height="70" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="3" result="effect1_foregroundBlur_2241_22535"/>
+</filter>
+<linearGradient id="paint0_linear_2241_22535" x1="89.6684" y1="4.20606" x2="49.6192" y2="87.031" gradientUnits="userSpaceOnUse">
+<stop offset="0.176006" stop-color="#EAEFF1"/>
+<stop offset="0.576923" stop-color="#B8C4FF"/>
+<stop offset="0.85" stop-color="#002291"/>
+</linearGradient>
+<clipPath id="clip0_2241_22535">
+<rect x="9" y="19" width="54" height="38" rx="3" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/src/Layout4Columns.svg

@@ -0,0 +1,26 @@
+<svg width="72" height="72" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2241_22581)">
+<rect x="9" y="19" width="54" height="38" rx="3" fill="#002291"/>
+<g filter="url(#filter0_f_2241_22581)">
+<path d="M9 -1H103V57H9V-1Z" fill="url(#paint0_linear_2241_22581)"/>
+</g>
+<path d="M21 13H23V63H21V13Z" fill="#F8F6F6"/>
+<path d="M48 13H50V63H48V13Z" fill="#F8F6F6"/>
+<path d="M35 13H37V63H35V13Z" fill="#F8F6F6"/>
+</g>
+<defs>
+<filter id="filter0_f_2241_22581" x="3" y="-7" width="106" height="70" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="3" result="effect1_foregroundBlur_2241_22581"/>
+</filter>
+<linearGradient id="paint0_linear_2241_22581" x1="89.6684" y1="4.20606" x2="49.6192" y2="87.031" gradientUnits="userSpaceOnUse">
+<stop offset="0.176006" stop-color="#EAEFF1"/>
+<stop offset="0.576923" stop-color="#B8C4FF"/>
+<stop offset="0.85" stop-color="#002291"/>
+</linearGradient>
+<clipPath id="clip0_2241_22581">
+<rect x="9" y="19" width="54" height="38" rx="3" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/src/Layout5Columns.svg

@@ -0,0 +1,27 @@
+<svg width="72" height="72" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2243_22634)">
+<rect x="9" y="19" width="54" height="38" rx="3" fill="#002291"/>
+<g filter="url(#filter0_f_2243_22634)">
+<path d="M9 -1H103V57H9V-1Z" fill="url(#paint0_linear_2243_22634)"/>
+</g>
+<path d="M19 13H21V63H19V13Z" fill="#F8F6F6"/>
+<path d="M51 13H53V63H51V13Z" fill="#F8F6F6"/>
+<path d="M40 13H42V63H40V13Z" fill="#F8F6F6"/>
+<path d="M30 13H32V63H30V13Z" fill="#F8F6F6"/>
+</g>
+<defs>
+<filter id="filter0_f_2243_22634" x="3" y="-7" width="106" height="70" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="3" result="effect1_foregroundBlur_2243_22634"/>
+</filter>
+<linearGradient id="paint0_linear_2243_22634" x1="89.6684" y1="4.20606" x2="49.6192" y2="87.031" gradientUnits="userSpaceOnUse">
+<stop offset="0.176006" stop-color="#EAEFF1"/>
+<stop offset="0.576923" stop-color="#B8C4FF"/>
+<stop offset="0.85" stop-color="#002291"/>
+</linearGradient>
+<clipPath id="clip0_2243_22634">
+<rect x="9" y="19" width="54" height="38" rx="3" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/src/LayoutHalf.svg

@@ -0,0 +1,31 @@
+<svg width="72" height="72" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#wash_0_clippath)"><rect x="5" y="8" width="67" height="58" fill="var(--wds-illustration-color-opacity-25, #f8f6f200)"/></g>
+<g clip-path="url(#clip0_2243_22699)">
+<g opacity="0.25">
+<rect x="9" y="19" width="54" height="38" rx="3" fill="#7896FF"/>
+</g>
+<g clip-path="url(#clip1_2243_22699)">
+<path d="M9 22C9 20.3431 10.3431 19 12 19H36V57H12C10.3431 57 9 55.6569 9 54V22Z" fill="#002291"/>
+<g filter="url(#filter0_f_2243_22699)">
+<path d="M9 -1H103V57H9V-1Z" fill="url(#paint0_linear_2243_22699)"/>
+</g>
+</g>
+</g>
+<defs>
+<filter id="filter0_f_2243_22699" x="3" y="-7" width="106" height="70" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="3" result="effect1_foregroundBlur_2243_22699"/>
+</filter>
+<linearGradient id="paint0_linear_2243_22699" x1="89.6684" y1="4.20606" x2="49.6192" y2="87.031" gradientUnits="userSpaceOnUse">
+<stop offset="0.176006" stop-color="#EAEFF1"/>
+<stop offset="0.576923" stop-color="#B8C4FF"/>
+<stop offset="0.85" stop-color="#002291"/>
+</linearGradient>
+<clipPath id="clip0_2243_22699">
+<rect x="9" y="19" width="54" height="38" rx="3" fill="white"/>
+</clipPath>
+<clipPath id="clip1_2243_22699">
+<path d="M9 22C9 20.3431 10.3431 19 12 19H36V57H12C10.3431 57 9 55.6569 9 54V22Z" fill="white"/>
+</clipPath>
+<clipPath id="wash_0_clippath"><rect x="9" y="19" width="54" height="38" rx="3" fill="white"/></clipPath></defs>
+</svg>

package/src/LayoutThird.svg

@@ -0,0 +1,31 @@
+<svg width="72" height="72" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#wash_0_clippath)"><rect x="5" y="8" width="67" height="58" fill="var(--wds-illustration-color-opacity-25, #f8f6f200)"/></g>
+<g clip-path="url(#clip0_2244_22896)">
+<g opacity="0.25">
+<rect x="9" y="19" width="54" height="38" rx="3" fill="#7896FF"/>
+</g>
+<g clip-path="url(#clip1_2244_22896)">
+<path d="M9 22C9 20.3431 10.3431 19 12 19H27V57H12C10.3431 57 9 55.6569 9 54V22Z" fill="#002291"/>
+<g filter="url(#filter0_f_2244_22896)">
+<path d="M9 -1H103V57H9V-1Z" fill="url(#paint0_linear_2244_22896)"/>
+</g>
+</g>
+</g>
+<defs>
+<filter id="filter0_f_2244_22896" x="3" y="-7" width="106" height="70" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="3" result="effect1_foregroundBlur_2244_22896"/>
+</filter>
+<linearGradient id="paint0_linear_2244_22896" x1="89.6684" y1="4.20606" x2="49.6192" y2="87.031" gradientUnits="userSpaceOnUse">
+<stop offset="0.176006" stop-color="#EAEFF1"/>
+<stop offset="0.576923" stop-color="#B8C4FF"/>
+<stop offset="0.85" stop-color="#002291"/>
+</linearGradient>
+<clipPath id="clip0_2244_22896">
+<rect x="9" y="19" width="54" height="38" rx="3" fill="white"/>
+</clipPath>
+<clipPath id="clip1_2244_22896">
+<path d="M9 22C9 20.3431 10.3431 19 12 19H27V57H12C10.3431 57 9 55.6569 9 54V22Z" fill="white"/>
+</clipPath>
+<clipPath id="wash_0_clippath"><rect x="9" y="19" width="54" height="38" rx="3" fill="white"/></clipPath></defs>
+</svg>

package/src/MaxWidth.svg

@@ -1,7 +1,7 @@
-<svg width="236" height="127" viewBox="0 0 236 127" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="44.5938" y="23" width="147" height="81" rx="6" fill="var(--wds-illustration-color-opacity-25, #f8f6f200)"/>
+<svg width="236" height="127" viewBox="0 0 236 127" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M42 67.5V59.5C42 58.9477 41.5523 58.5 41 58.5C40.4477 58.5 40 58.9477 40 59.5V67.5C40 68.0523 40.4477 68.5 41 68.5C41.5523 68.5 42 68.0523 42 67.5Z" fill="#B8C4FF"/>
 <path d="M196 67.5V59.5C196 58.9477 195.552 58.5 195 58.5C194.448 58.5 194 58.9477 194 59.5V67.5C194 68.0523 194.448 68.5 195 68.5C195.552 68.5 196 68.0523 196 67.5Z" fill="#B8C4FF"/>
-<rect x="44.5938" y="23" width="147" height="81" rx="6" fill="#EAEFFF"/>
+<rect x="44.5938" y="23" width="147" height="81" rx="6" fill="#7896FF" fill-opacity="0.25"/>
 <g opacity="0.5">
 <rect x="44.5938" y="33.5" width="147" height="60.0044" rx="6" fill="#F8F6F6"/>
 </g>