@wix/design-system-illustrations 2.34.1 → 2.35.0

package/dist/types/index.d.ts

@@ -101,9 +101,6 @@ export { ButtonStyleFilled } from './ButtonStyleFilled';
 export { ButtonStyleOutlined } from './ButtonStyleOutlined';
 export { ButtonStylePillFilled } from './ButtonStylePillFilled';
 export { ButtonStylePillOutlined } from './ButtonStylePillOutlined';
-export { ButtonsLayoutIconsIdentity } from './ButtonsLayoutIconsIdentity';
-export { ButtonsLayoutRowIdentity } from './ButtonsLayoutRowIdentity';
-export { ButtonsLayoutStackIdentity } from './ButtonsLayoutStackIdentity';
 export { ChooseTheLayoutGrid } from './ChooseTheLayoutGrid';
 export { CircleImage } from './CircleImage';
 export { CircleMarker } from './CircleMarker';
@@ -121,10 +118,13 @@ export { CrossLoop } from './CrossLoop';
 export { Cube } from './Cube';
 export { CustomImage } from './CustomImage';
 export { DartScroll } from './DartScroll';
+export { DesignStatePresetGlow } from './DesignStatePresetGlow';
+export { DesignStatePresetInvert } from './DesignStatePresetInvert';
+export { DesignStatePresetShadow } from './DesignStatePresetShadow';
+export { DesignStatePresetTint } from './DesignStatePresetTint';
+export { DesignStatePresetUnderline } from './DesignStatePresetUnderline';
 export { DesignedSection } from './DesignedSection';
 export { DesignedSectionSmall } from './DesignedSectionSmall';
-export { DividerLineIdentity } from './DividerLineIdentity';
-export { DividerLineTextIdentity } from './DividerLineTextIdentity';
 export { Doc } from './Doc';
 export { DonutChart } from './DonutChart';
 export { Dots } from './Dots';
@@ -213,6 +213,9 @@ export { GenerateWithAISmall } from './GenerateWithAISmall';
 export { GlideEntrance } from './GlideEntrance';
 export { GlitchAnimation } from './GlitchAnimation';
 export { GrowEntrance } from './GrowEntrance';
+export { HeaderOverlapFloating } from './HeaderOverlapFloating';
+export { HeaderOverlapNone } from './HeaderOverlapNone';
+export { HeaderOverlapStandard } from './HeaderOverlapStandard';
 export { HeartImage } from './HeartImage';
 export { HexagonalImage } from './HexagonalImage';
 export { HillDivider } from './HillDivider';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/design-system-illustrations",
-  "version": "2.34.1",
+  "version": "2.35.0",
   "license": "MIT",
   "description": "Wix Design System Illustrations",
   "scripts": {
@@ -10,7 +10,7 @@
   },
   "devDependencies": {
     "@typescript-eslint/parser": "^8.58.1",
-    "@wix/design-system-tokens": "1.225.1",
+    "@wix/design-system-tokens": "1.225.3",
     "dom-serializer": "^1.0.1",
     "domutils": "^2.8.0",
     "esbuild": "^0.25.0",
@@ -53,5 +53,5 @@
     "access": "public"
   },
   "packageManager": "yarn@4.0.2",
-  "falconPackageHash": "ce8e7d3b7550ff0a3856bdb00a72001e6aad22e2fec7117153fadb91"
+  "falconPackageHash": "6f4aed9f8407bafcb41024b5631c9173ced1cad0329429ce00ae609d"
 }

package/src/DesignStatePresetGlow.svg

@@ -0,0 +1,43 @@
+<svg width="72" height="72" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1844_7853)">
+<rect width="72" height="72" rx="4" fill="#F8F6F6"/>
+<g filter="url(#filter0_d_1844_7853)">
+<g clip-path="url(#clip1_1844_7853)">
+<rect x="15" y="24" width="42" height="24" rx="4" fill="#002291"/>
+<g filter="url(#filter1_f_1844_7853)">
+<path d="M11.1044 12.1562H75.9319V51.2751H11.1044V12.1562Z" fill="url(#paint0_linear_1844_7853)"/>
+</g>
+<path d="M39.732 40.5H38.412L37.62 38.34H33.972L33.18 40.5H31.92L35.148 31.92H36.492L39.732 40.5ZM34.356 37.272H37.236L35.796 33.336L34.356 37.272Z" fill="#002291"/>
+</g>
+</g>
+</g>
+<defs>
+<filter id="filter0_d_1844_7853" x="5" y="14" width="62" height="44" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feMorphology radius="3" operator="dilate" in="SourceAlpha" result="effect1_dropShadow_1844_7853"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="3.5"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.470588 0 0 0 0 0.588235 0 0 0 0 1 0 0 0 0.5 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1844_7853"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1844_7853" result="shape"/>
+</filter>
+<filter id="filter1_f_1844_7853" x="-1.60396" y="-0.552082" width="90.2442" height="64.5339" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="6.35417" result="effect1_foregroundBlur_1844_7853"/>
+</filter>
+<linearGradient id="paint0_linear_1844_7853" x1="66.7377" y1="15.6675" x2="40.1011" y2="71.9949" gradientUnits="userSpaceOnUse">
+<stop offset="0.176006" stop-color="#EAEFF1"/>
+<stop offset="0.55" stop-color="#B8C4FF"/>
+<stop offset="0.8" stop-color="#002291"/>
+</linearGradient>
+<clipPath id="clip0_1844_7853">
+<path d="M0 8C0 3.58172 3.58172 0 8 0H64C68.4183 0 72 3.58172 72 8V64C72 68.4183 68.4183 72 64 72H8C3.58172 72 0 68.4183 0 64V8Z" fill="white"/>
+</clipPath>
+<clipPath id="clip1_1844_7853">
+<rect x="15" y="24" width="42" height="24" rx="4" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/src/DesignStatePresetInvert.svg

@@ -0,0 +1,64 @@
+<svg width="72" height="72" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1844_7814)">
+<g clip-path="url(#clip1_1844_7814)">
+<rect x="15" y="24" width="42" height="24" rx="4" fill="#002291"/>
+<g filter="url(#filter0_f_1844_7814)">
+<path d="M11.1044 -2.83594H94.0707V51.2752H11.1044V-2.83594Z" fill="url(#paint0_linear_1844_7814)"/>
+</g>
+</g>
+<path d="M29.406 40.2909H28.086L27.294 38.1309H23.646L22.854 40.2909H21.594L24.822 31.7109H26.166L29.406 40.2909ZM24.03 37.0629H26.91L25.47 33.1269L24.03 37.0629Z" fill="url(#paint1_linear_1844_7814)"/>
+</g>
+<g clip-path="url(#clip2_1844_7814)">
+<g clip-path="url(#clip3_1844_7814)">
+<rect x="15" y="24" width="42" height="24" rx="4" fill="#002291"/>
+<g filter="url(#filter1_f_1844_7814)">
+<path d="M9.63647 11.9062H64.6421V81.3871H9.63647V11.9062Z" fill="url(#paint2_linear_1844_7814)"/>
+</g>
+</g>
+<path d="M50.406 40.2909H49.086L48.294 38.1309H44.646L43.854 40.2909H42.594L45.822 31.7109H47.166L50.406 40.2909ZM45.03 37.0629H47.91L46.47 33.1269L45.03 37.0629Z" fill="url(#paint3_linear_1844_7814)"/>
+</g>
+<defs>
+<filter id="filter0_f_1844_7814" x="-1.60396" y="-15.5443" width="108.383" height="79.526" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="6.35417" result="effect1_foregroundBlur_1844_7814"/>
+</filter>
+<filter id="filter1_f_1844_7814" x="4.63647" y="6.90625" width="65.0057" height="79.4844" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="2.5" result="effect1_foregroundBlur_1844_7814"/>
+</filter>
+<linearGradient id="paint0_linear_1844_7814" x1="82.304" y1="2.02105" x2="43.6682" y2="77.6123" gradientUnits="userSpaceOnUse">
+<stop offset="0.176006" stop-color="#EAEFF1"/>
+<stop offset="0.55" stop-color="#B8C4FF"/>
+<stop offset="0.8" stop-color="#002291"/>
+</linearGradient>
+<linearGradient id="paint1_linear_1844_7814" x1="26.8625" y1="35.4811" x2="21.139" y2="41.3619" gradientUnits="userSpaceOnUse">
+<stop offset="0.176006" stop-color="#EAEFF1"/>
+<stop offset="0.576923" stop-color="#D5DFFF"/>
+<stop offset="0.85" stop-color="#B8C4FF"/>
+</linearGradient>
+<linearGradient id="paint2_linear_1844_7814" x1="56.8409" y1="18.1428" x2="-4.36515" y2="79.9734" gradientUnits="userSpaceOnUse">
+<stop offset="0.176006" stop-color="#EAEFF1"/>
+<stop offset="0.55" stop-color="#B8C4FF"/>
+<stop offset="0.8" stop-color="#002291"/>
+</linearGradient>
+<linearGradient id="paint3_linear_1844_7814" x1="58.2153" y1="24.0199" x2="40.9954" y2="40.0689" gradientUnits="userSpaceOnUse">
+<stop offset="0.176006" stop-color="#EAEFF1"/>
+<stop offset="0.55" stop-color="#B8C4FF"/>
+<stop offset="0.8" stop-color="#002291"/>
+</linearGradient>
+<clipPath id="clip0_1844_7814">
+<rect width="21" height="40" fill="white" transform="translate(15 16)"/>
+</clipPath>
+<clipPath id="clip1_1844_7814">
+<rect x="15" y="24" width="42" height="24" rx="4" fill="white"/>
+</clipPath>
+<clipPath id="clip2_1844_7814">
+<rect width="21" height="40" fill="white" transform="translate(36 16)"/>
+</clipPath>
+<clipPath id="clip3_1844_7814">
+<rect x="15" y="24" width="42" height="24" rx="4" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/src/DesignStatePresetShadow.svg

@@ -0,0 +1,37 @@
+<svg width="72" height="72" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d_1844_7867)">
+<g clip-path="url(#clip0_1844_7867)">
+<rect x="15.25" y="24" width="42" height="24" rx="4" fill="#002291"/>
+<g filter="url(#filter1_f_1844_7867)">
+<path d="M11.3544 12.1562H76.1819V51.2751H11.3544V12.1562Z" fill="url(#paint0_linear_1844_7867)"/>
+</g>
+<path d="M39.982 40.5H38.662L37.87 38.34H34.222L33.43 40.5H32.17L35.398 31.92H36.742L39.982 40.5ZM34.606 37.272H37.486L36.046 33.336L34.606 37.272Z" fill="#002291"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_d_1844_7867" x="11.85" y="24" width="48.8" height="32.4" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feMorphology radius="2" operator="erode" in="SourceAlpha" result="effect1_dropShadow_1844_7867"/>
+<feOffset dy="5"/>
+<feGaussianBlur stdDeviation="2.7"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0.133333 0 0 0 0 0.592157 0 0 0 1 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1844_7867"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1844_7867" result="shape"/>
+</filter>
+<filter id="filter1_f_1844_7867" x="-1.35396" y="-0.552082" width="90.2442" height="64.5339" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="6.35417" result="effect1_foregroundBlur_1844_7867"/>
+</filter>
+<linearGradient id="paint0_linear_1844_7867" x1="66.9877" y1="15.6675" x2="40.3511" y2="71.9949" gradientUnits="userSpaceOnUse">
+<stop offset="0.176006" stop-color="#EAEFF1"/>
+<stop offset="0.55" stop-color="#B8C4FF"/>
+<stop offset="0.8" stop-color="#002291"/>
+</linearGradient>
+<clipPath id="clip0_1844_7867">
+<rect x="15.25" y="24" width="42" height="24" rx="4" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/src/DesignStatePresetTint.svg

@@ -0,0 +1,60 @@
+<svg width="72" height="72" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1844_7832)">
+<rect width="72" height="72" fill="#F8F6F6"/>
+</g>
+<g clip-path="url(#clip1_1844_7832)">
+<g clip-path="url(#clip2_1844_7832)">
+<rect x="15" y="24" width="42" height="24" rx="4" fill="#002291"/>
+<g filter="url(#filter0_f_1844_7832)">
+<path d="M11.1044 12.1562H75.9319V51.2751H11.1044V12.1562Z" fill="url(#paint0_linear_1844_7832)"/>
+</g>
+</g>
+<path d="M29.406 40.2909H28.086L27.294 38.1309H23.646L22.854 40.2909H21.594L24.822 31.7109H26.166L29.406 40.2909ZM24.03 37.0629H26.91L25.47 33.1269L24.03 37.0629Z" fill="#002291"/>
+</g>
+<g clip-path="url(#clip3_1844_7832)">
+<g clip-path="url(#clip4_1844_7832)">
+<rect x="15" y="24" width="42" height="24" rx="4" fill="#002291"/>
+<g opacity="0.7" filter="url(#filter1_f_1844_7832)">
+<path d="M15 6H68V67H15V6Z" fill="url(#paint1_linear_1844_7832)"/>
+</g>
+</g>
+<path d="M50.406 40.2909H49.086L48.294 38.1309H44.646L43.854 40.2909H42.594L45.822 31.7109H47.166L50.406 40.2909ZM45.03 37.0629H47.91L46.47 33.1269L45.03 37.0629Z" fill="#002291"/>
+</g>
+<defs>
+<filter id="filter0_f_1844_7832" x="-1.60396" y="-0.552082" width="90.2442" height="64.5339" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="6.35417" result="effect1_foregroundBlur_1844_7832"/>
+</filter>
+<filter id="filter1_f_1844_7832" x="10" y="1" width="63" height="71" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="2.5" result="effect1_foregroundBlur_1844_7832"/>
+</filter>
+<linearGradient id="paint0_linear_1844_7832" x1="66.7377" y1="15.6675" x2="40.1011" y2="71.9949" gradientUnits="userSpaceOnUse">
+<stop offset="0.176006" stop-color="#EAEFF1"/>
+<stop offset="0.55" stop-color="#B8C4FF"/>
+<stop offset="0.8" stop-color="#002291"/>
+</linearGradient>
+<linearGradient id="paint1_linear_1844_7832" x1="60.4833" y1="11.4753" x2="7.03003" y2="70.7387" gradientUnits="userSpaceOnUse">
+<stop offset="0.176006" stop-color="#EAEFF1"/>
+<stop offset="0.55" stop-color="#B8C4FF"/>
+<stop offset="0.8" stop-color="#002291"/>
+</linearGradient>
+<clipPath id="clip0_1844_7832">
+<path d="M0 8C0 3.58172 3.58172 0 8 0H64C68.4183 0 72 3.58172 72 8V64C72 68.4183 68.4183 72 64 72H8C3.58172 72 0 68.4183 0 64V8Z" fill="white"/>
+</clipPath>
+<clipPath id="clip1_1844_7832">
+<rect width="21" height="40" fill="white" transform="translate(15 16)"/>
+</clipPath>
+<clipPath id="clip2_1844_7832">
+<rect x="15" y="24" width="42" height="24" rx="4" fill="white"/>
+</clipPath>
+<clipPath id="clip3_1844_7832">
+<rect width="21" height="40" fill="white" transform="translate(36 16)"/>
+</clipPath>
+<clipPath id="clip4_1844_7832">
+<rect x="15" y="24" width="42" height="24" rx="4" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/src/DesignStatePresetUnderline.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(#clip0_1844_7800)">
+<rect width="72" height="72" rx="4" fill="#F8F6F6"/>
+<g clip-path="url(#clip1_1844_7800)">
+<rect x="15" y="24" width="42" height="24" rx="4" fill="#002291"/>
+<g filter="url(#filter0_f_1844_7800)">
+<path d="M11.1044 12.1562H75.9319V51.2751H11.1044V12.1562Z" fill="url(#paint0_linear_1844_7800)"/>
+</g>
+<path d="M40.232 40H38.912L38.12 37.84H34.472L33.68 40H32.42L35.648 31.42H36.992L40.232 40ZM34.856 36.772H37.736L36.296 32.836L34.856 36.772Z" fill="#002291"/>
+<path d="M32 41.548H40.64V42.316H32V41.548Z" fill="#002291"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_f_1844_7800" x="-1.60396" y="-0.552082" width="90.2442" height="64.5339" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="6.35417" result="effect1_foregroundBlur_1844_7800"/>
+</filter>
+<linearGradient id="paint0_linear_1844_7800" x1="66.7377" y1="15.6675" x2="40.1011" y2="71.9949" gradientUnits="userSpaceOnUse">
+<stop offset="0.176006" stop-color="#EAEFF1"/>
+<stop offset="0.55" stop-color="#B8C4FF"/>
+<stop offset="0.8" stop-color="#002291"/>
+</linearGradient>
+<clipPath id="clip0_1844_7800">
+<path d="M0 8C0 3.58172 3.58172 0 8 0H64C68.4183 0 72 3.58172 72 8V64C72 68.4183 68.4183 72 64 72H8C3.58172 72 0 68.4183 0 64V8Z" fill="white"/>
+</clipPath>
+<clipPath id="clip1_1844_7800">
+<rect x="15" y="24" width="42" height="24" rx="4" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/src/HeaderOverlapFloating.svg

@@ -0,0 +1,84 @@
+<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="12" y="20" width="48" height="72.75" rx="2.25" fill="var(--wds-illustration-color-opacity-100, #f8f6f100)"/></g>
+<g clip-path="url(#clip0_1844_7931)">
+<g clip-path="url(#clip1_1844_7931)">
+<g opacity="0.5">
+<g clip-path="url(#clip2_1844_7931)">
+<rect x="12" y="20" width="48" height="75.75" rx="2.25" fill="#002291"/>
+<g filter="url(#filter0_f_1844_7931)">
+<rect x="11.6268" y="-16.9844" width="68.25" height="109.732" fill="url(#paint0_linear_1844_7931)"/>
+</g>
+</g>
+</g>
+<rect x="14.5593" y="22" width="43.7451" height="5.19946" rx="2.59973" fill="#002291"/>
+<rect x="51" y="24.2266" width="4.5" height="0.75" rx="0.375" fill="#B8C4FF"/>
+<rect x="44.25" y="24.2266" width="4.5" height="0.75" rx="0.375" fill="#B8C4FF"/>
+<rect x="37.5" y="24.2266" width="4.5" height="0.75" rx="0.375" fill="#B8C4FF"/>
+<g clip-path="url(#clip3_1844_7931)">
+<g clip-path="url(#clip4_1844_7931)">
+<rect width="60" height="26.25" transform="translate(29.026 25.25)" fill="#002291"/>
+</g>
+<path d="M47.4642 33.125L40.3196 43.4904L53.0621 41.7854L47.4642 33.125Z" fill="url(#paint1_linear_1844_7931)"/>
+<path d="M66.5171 39.2741C66.5171 39.2741 50.5078 33.2219 50.03 33.0395C49.5523 32.8571 46.5879 32.013 47.4643 34.4466C48.3352 36.8649 48.8123 37.7949 49.0021 38.2079C49.1919 38.6208 49.9646 40.3034 48.0206 40.9243C45.817 41.6277 33.9329 44.968 33.9329 44.968V46.8864H66.5171V39.2741Z" fill="url(#paint2_linear_1844_7931)"/>
+<g clip-path="url(#clip5_1844_7931)">
+<rect x="39.526" y="32" width="3.75" height="3.75" rx="1.875" fill="#002291"/>
+<g filter="url(#filter1_f_1844_7931)">
+<path d="M42.2875 29.0632C42.1074 29.099 41.9295 29.1487 41.7562 29.2122C41.0448 29.4757 40.4141 29.9771 39.9983 30.6831C39.0478 32.2949 39.5767 34.3597 41.1799 35.2945C42.783 36.2292 44.8528 35.6792 45.8034 34.0674C46.754 32.4544 46.225 30.3896 44.623 29.456C43.8907 29.0285 43.0626 28.9118 42.2875 29.0632Z" fill="url(#paint3_linear_1844_7931)"/>
+</g>
+</g>
+</g>
+<rect x="17.0261" y="34.25" width="17.25" height="0.75" rx="0.375" fill="#002291"/>
+<rect x="17.026" y="37.25" width="17.25" height="0.75" rx="0.375" fill="#002291"/>
+<rect x="17.026" y="40.25" width="9" height="0.75" rx="0.375" fill="#002291"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_f_1844_7931" x="2.62683" y="-25.9844" width="86.25" height="127.734" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="4.5" result="effect1_foregroundBlur_1844_7931"/>
+</filter>
+<filter id="filter1_f_1844_7931" x="38.3557" y="27.8298" width="9.09032" height="9.09032" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.58508" result="effect1_foregroundBlur_1844_7931"/>
+</filter>
+<linearGradient id="paint0_linear_1844_7931" x1="70.1973" y1="-7.13486" x2="-23.9463" y2="67.5833" gradientUnits="userSpaceOnUse">
+<stop offset="0.176006" stop-color="#EAEFF1"/>
+<stop offset="0.576923" stop-color="#B8C4FF"/>
+<stop offset="0.85" stop-color="#002291"/>
+</linearGradient>
+<linearGradient id="paint1_linear_1844_7931" x1="43.6248" y1="36.6445" x2="53.1993" y2="45.0344" gradientUnits="userSpaceOnUse">
+<stop stop-color="#EAEFF1"/>
+<stop offset="0.325264" stop-color="#B8C4FF"/>
+<stop offset="1" stop-color="#002291"/>
+</linearGradient>
+<linearGradient id="paint2_linear_1844_7931" x1="36.8172" y1="27.2371" x2="55.4121" y2="47.3355" gradientUnits="userSpaceOnUse">
+<stop stop-color="#EAEFF1"/>
+<stop offset="0.5" stop-color="#B8C4FF"/>
+<stop offset="0.95" stop-color="#002291"/>
+</linearGradient>
+<linearGradient id="paint3_linear_1844_7931" x1="45.3186" y1="29.6059" x2="39.5445" y2="36.9738" 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_1844_7931">
+<rect x="12" y="20" width="48" height="32" rx="3" fill="white"/>
+</clipPath>
+<clipPath id="clip1_1844_7931">
+<rect x="12" y="20" width="48" height="75.75" rx="2.25" fill="white"/>
+</clipPath>
+<clipPath id="clip2_1844_7931">
+<rect x="12" y="20" width="48" height="75.75" rx="2.25" fill="white"/>
+</clipPath>
+<clipPath id="clip3_1844_7931">
+<rect x="37.2761" y="29.75" width="18" height="15.75" rx="2.25" fill="white"/>
+</clipPath>
+<clipPath id="clip4_1844_7931">
+<rect width="60" height="26.25" fill="white" transform="translate(29.026 25.25)"/>
+</clipPath>
+<clipPath id="clip5_1844_7931">
+<rect x="39.526" y="32" width="3.75" height="3.75" rx="1.875" fill="white"/>
+</clipPath>
+<clipPath id="wash_0_clippath"><rect x="12" y="20" width="48" height="32" rx="3" fill="white"/></clipPath></defs>
+</svg>

package/src/HeaderOverlapNone.svg

@@ -0,0 +1,84 @@
+<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="12" y="20" width="48" height="72.75" rx="2.25" fill="var(--wds-illustration-color-opacity-100, #f8f6f100)"/></g>
+<g clip-path="url(#clip0_1844_7879)">
+<g clip-path="url(#clip1_1844_7879)">
+<g opacity="0.5">
+<g clip-path="url(#clip2_1844_7879)">
+<rect x="12" y="20" width="48" height="75.75" rx="2.25" fill="#002291"/>
+<g filter="url(#filter0_f_1844_7879)">
+<rect x="11.6268" y="-16.9844" width="68.25" height="109.732" fill="url(#paint0_linear_1844_7879)"/>
+</g>
+</g>
+</g>
+<rect x="12" y="20" width="48" height="5.19946" fill="#002291"/>
+<rect x="51" y="22.2266" width="4.5" height="0.75" rx="0.375" fill="#B8C4FF"/>
+<rect x="44.25" y="22.2266" width="4.5" height="0.75" rx="0.375" fill="#B8C4FF"/>
+<rect x="37.5" y="22.2266" width="4.5" height="0.75" rx="0.375" fill="#B8C4FF"/>
+<g clip-path="url(#clip3_1844_7879)">
+<g clip-path="url(#clip4_1844_7879)">
+<rect width="60" height="26.25" transform="translate(29.026 25.25)" fill="#002291"/>
+</g>
+<path d="M47.4642 33.125L40.3196 43.4904L53.0621 41.7854L47.4642 33.125Z" fill="url(#paint1_linear_1844_7879)"/>
+<path d="M66.5171 39.2741C66.5171 39.2741 50.5078 33.2219 50.03 33.0395C49.5523 32.8571 46.5879 32.013 47.4643 34.4466C48.3352 36.8649 48.8123 37.7949 49.0021 38.2079C49.1919 38.6208 49.9646 40.3034 48.0206 40.9243C45.817 41.6277 33.9329 44.968 33.9329 44.968V46.8864H66.5171V39.2741Z" fill="url(#paint2_linear_1844_7879)"/>
+<g clip-path="url(#clip5_1844_7879)">
+<rect x="39.526" y="32" width="3.75" height="3.75" rx="1.875" fill="#002291"/>
+<g filter="url(#filter1_f_1844_7879)">
+<path d="M42.2875 29.0632C42.1074 29.099 41.9295 29.1487 41.7562 29.2122C41.0448 29.4757 40.4141 29.9771 39.9983 30.6831C39.0478 32.2949 39.5767 34.3597 41.1799 35.2945C42.783 36.2292 44.8528 35.6792 45.8034 34.0674C46.754 32.4544 46.225 30.3896 44.623 29.456C43.8907 29.0285 43.0626 28.9118 42.2875 29.0632Z" fill="url(#paint3_linear_1844_7879)"/>
+</g>
+</g>
+</g>
+<rect x="17.0261" y="34.25" width="17.25" height="0.75" rx="0.375" fill="#002291"/>
+<rect x="17.026" y="37.25" width="17.25" height="0.75" rx="0.375" fill="#002291"/>
+<rect x="17.026" y="40.25" width="9" height="0.75" rx="0.375" fill="#002291"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_f_1844_7879" x="2.62683" y="-25.9844" width="86.25" height="127.734" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="4.5" result="effect1_foregroundBlur_1844_7879"/>
+</filter>
+<filter id="filter1_f_1844_7879" x="38.3557" y="27.8298" width="9.09032" height="9.09032" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.58508" result="effect1_foregroundBlur_1844_7879"/>
+</filter>
+<linearGradient id="paint0_linear_1844_7879" x1="70.1973" y1="-7.13486" x2="-23.9463" y2="67.5833" gradientUnits="userSpaceOnUse">
+<stop offset="0.176006" stop-color="#EAEFF1"/>
+<stop offset="0.576923" stop-color="#B8C4FF"/>
+<stop offset="0.85" stop-color="#002291"/>
+</linearGradient>
+<linearGradient id="paint1_linear_1844_7879" x1="43.6248" y1="36.6445" x2="53.1993" y2="45.0344" gradientUnits="userSpaceOnUse">
+<stop stop-color="#EAEFF1"/>
+<stop offset="0.325264" stop-color="#B8C4FF"/>
+<stop offset="1" stop-color="#002291"/>
+</linearGradient>
+<linearGradient id="paint2_linear_1844_7879" x1="36.8172" y1="27.2371" x2="55.4121" y2="47.3355" gradientUnits="userSpaceOnUse">
+<stop stop-color="#EAEFF1"/>
+<stop offset="0.5" stop-color="#B8C4FF"/>
+<stop offset="0.95" stop-color="#002291"/>
+</linearGradient>
+<linearGradient id="paint3_linear_1844_7879" x1="45.3186" y1="29.6059" x2="39.5445" y2="36.9738" 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_1844_7879">
+<rect x="12" y="20" width="48" height="32" rx="3" fill="white"/>
+</clipPath>
+<clipPath id="clip1_1844_7879">
+<rect x="12" y="20" width="48" height="75.75" rx="2.25" fill="white"/>
+</clipPath>
+<clipPath id="clip2_1844_7879">
+<rect x="12" y="20" width="48" height="75.75" rx="2.25" fill="white"/>
+</clipPath>
+<clipPath id="clip3_1844_7879">
+<rect x="37.2761" y="29.75" width="18" height="15.75" rx="2.25" fill="white"/>
+</clipPath>
+<clipPath id="clip4_1844_7879">
+<rect width="60" height="26.25" fill="white" transform="translate(29.026 25.25)"/>
+</clipPath>
+<clipPath id="clip5_1844_7879">
+<rect x="39.526" y="32" width="3.75" height="3.75" rx="1.875" fill="white"/>
+</clipPath>
+<clipPath id="wash_0_clippath"><rect x="12" y="20" width="48" height="32" rx="3" fill="white"/></clipPath></defs>
+</svg>

package/src/HeaderOverlapStandard.svg

@@ -0,0 +1,141 @@
+<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="12" y="20" width="48" height="72.75" rx="2.25" fill="var(--wds-illustration-color-opacity-100, #f8f6f100)"/></g>
+<g clip-path="url(#clip0_1844_7983)">
+<g clip-path="url(#clip1_1844_7983)">
+<g opacity="0.5">
+<g clip-path="url(#clip2_1844_7983)">
+<rect x="12" y="16" width="48" height="75.75" rx="2.25" fill="#002291"/>
+<g filter="url(#filter0_f_1844_7983)">
+<rect x="11.6268" y="-20.9844" width="68.25" height="109.732" fill="url(#paint0_linear_1844_7983)"/>
+</g>
+</g>
+</g>
+<rect x="12" y="20" width="48" height="5.19946" fill="#002291"/>
+<rect x="51" y="22.2266" width="4.5" height="0.75" rx="0.375" fill="#B8C4FF"/>
+<rect x="44.25" y="22.2266" width="4.5" height="0.75" rx="0.375" fill="#B8C4FF"/>
+<rect x="37.5" y="22.2266" width="4.5" height="0.75" rx="0.375" fill="#B8C4FF"/>
+<g clip-path="url(#clip3_1844_7983)">
+<g clip-path="url(#clip4_1844_7983)">
+<rect width="60" height="26.25" transform="translate(29.026 21.25)" fill="#002291"/>
+</g>
+<path d="M47.4642 29.125L40.3196 39.4904L53.0621 37.7854L47.4642 29.125Z" fill="url(#paint1_linear_1844_7983)"/>
+<path d="M66.5171 35.2741C66.5171 35.2741 50.5078 29.2219 50.03 29.0395C49.5523 28.8571 46.5879 28.013 47.4643 30.4466C48.3352 32.8649 48.8123 33.7949 49.0021 34.2079C49.1919 34.6208 49.9646 36.3034 48.0206 36.9243C45.817 37.6277 33.9329 40.968 33.9329 40.968V42.8864H66.5171V35.2741Z" fill="url(#paint2_linear_1844_7983)"/>
+<g clip-path="url(#clip5_1844_7983)">
+<rect x="39.526" y="28" width="3.75" height="3.75" rx="1.875" fill="#002291"/>
+<g filter="url(#filter1_f_1844_7983)">
+<path d="M42.2875 25.0632C42.1074 25.099 41.9295 25.1487 41.7562 25.2122C41.0448 25.4757 40.4141 25.9771 39.9983 26.6831C39.0478 28.2949 39.5767 30.3597 41.1799 31.2945C42.783 32.2292 44.8528 31.6792 45.8034 30.0674C46.754 28.4544 46.225 26.3896 44.623 25.456C43.8907 25.0285 43.0626 24.9118 42.2875 25.0632Z" fill="url(#paint3_linear_1844_7983)"/>
+</g>
+</g>
+</g>
+<rect x="17.0261" y="30.25" width="17.25" height="0.75" rx="0.375" fill="#002291"/>
+<rect x="17.026" y="33.25" width="17.25" height="0.75" rx="0.375" fill="#002291"/>
+<rect x="17.026" y="36.25" width="9" height="0.75" rx="0.375" fill="#002291"/>
+<g clip-path="url(#clip6_1844_7983)">
+<rect x="4.125" y="49" width="20.25" height="15.75" rx="1.5" fill="#002291"/>
+<g filter="url(#filter2_f_1844_7983)">
+<rect x="4.26709" y="5.03906" width="63.0331" height="59.6543" fill="url(#paint4_linear_1844_7983)"/>
+</g>
+</g>
+<g clip-path="url(#clip7_1844_7983)">
+<rect x="25.875" y="49" width="20.25" height="15.75" rx="1.5" fill="#002291"/>
+<g filter="url(#filter3_f_1844_7983)">
+<rect x="26.0171" y="15.9375" width="47.0047" height="48.7566" fill="url(#paint5_linear_1844_7983)"/>
+</g>
+</g>
+<g clip-path="url(#clip8_1844_7983)">
+<rect x="47.625" y="49" width="20.25" height="15.75" rx="1.5" fill="#002291"/>
+<g filter="url(#filter4_f_1844_7983)">
+<rect x="47.7671" y="21.6328" width="41.5812" height="43.0635" fill="url(#paint6_linear_1844_7983)"/>
+</g>
+</g>
+</g>
+</g>
+<defs>
+<filter id="filter0_f_1844_7983" x="2.62683" y="-29.9844" width="86.25" height="127.734" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="4.5" result="effect1_foregroundBlur_1844_7983"/>
+</filter>
+<filter id="filter1_f_1844_7983" x="38.3557" y="23.8298" width="9.09032" height="9.09032" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.58508" result="effect1_foregroundBlur_1844_7983"/>
+</filter>
+<filter id="filter2_f_1844_7983" x="-3.41326" y="-2.64129" width="78.3938" height="75.0169" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="3.84017" result="effect1_foregroundBlur_1844_7983"/>
+</filter>
+<filter id="filter3_f_1844_7983" x="18.3367" y="8.25715" width="62.3654" height="64.1185" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="3.84017" result="effect1_foregroundBlur_1844_7983"/>
+</filter>
+<filter id="filter4_f_1844_7983" x="40.0867" y="13.9525" width="56.9419" height="58.4232" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="3.84017" result="effect1_foregroundBlur_1844_7983"/>
+</filter>
+<linearGradient id="paint0_linear_1844_7983" x1="70.1973" y1="-11.1349" x2="-23.9463" y2="63.5833" gradientUnits="userSpaceOnUse">
+<stop offset="0.176006" stop-color="#EAEFF1"/>
+<stop offset="0.576923" stop-color="#B8C4FF"/>
+<stop offset="0.85" stop-color="#002291"/>
+</linearGradient>
+<linearGradient id="paint1_linear_1844_7983" x1="43.6248" y1="32.6445" x2="53.1993" y2="41.0344" gradientUnits="userSpaceOnUse">
+<stop stop-color="#EAEFF1"/>
+<stop offset="0.325264" stop-color="#B8C4FF"/>
+<stop offset="1" stop-color="#002291"/>
+</linearGradient>
+<linearGradient id="paint2_linear_1844_7983" x1="36.8172" y1="23.2371" x2="55.4121" y2="43.3355" gradientUnits="userSpaceOnUse">
+<stop stop-color="#EAEFF1"/>
+<stop offset="0.5" stop-color="#B8C4FF"/>
+<stop offset="0.95" stop-color="#002291"/>
+</linearGradient>
+<linearGradient id="paint3_linear_1844_7983" x1="45.3186" y1="25.6059" x2="39.5445" y2="32.9738" gradientUnits="userSpaceOnUse">
+<stop offset="0.176006" stop-color="#EAEFF1"/>
+<stop offset="0.576923" stop-color="#B8C4FF"/>
+<stop offset="0.85" stop-color="#002291"/>
+</linearGradient>
+<linearGradient id="paint4_linear_1844_7983" x1="58.3605" y1="10.3936" x2="8.07066" y2="78.2006" gradientUnits="userSpaceOnUse">
+<stop offset="0.176006" stop-color="#EAEFF1"/>
+<stop offset="0.576923" stop-color="#B8C4FF"/>
+<stop offset="0.85" stop-color="#002291"/>
+</linearGradient>
+<linearGradient id="paint5_linear_1844_7983" x1="66.3553" y1="20.3139" x2="24.3087" y2="72.0395" gradientUnits="userSpaceOnUse">
+<stop offset="0.176006" stop-color="#EAEFF1"/>
+<stop offset="0.576923" stop-color="#B8C4FF"/>
+<stop offset="0.85" stop-color="#002291"/>
+</linearGradient>
+<linearGradient id="paint6_linear_1844_7983" x1="83.451" y1="25.4982" x2="46.3259" y2="71.2409" 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_1844_7983">
+<rect x="12" y="20" width="48" height="32" rx="3" fill="white"/>
+</clipPath>
+<clipPath id="clip1_1844_7983">
+<rect x="12" y="16" width="48" height="75.75" rx="2.25" fill="white"/>
+</clipPath>
+<clipPath id="clip2_1844_7983">
+<rect x="12" y="16" width="48" height="75.75" rx="2.25" fill="white"/>
+</clipPath>
+<clipPath id="clip3_1844_7983">
+<rect x="37.2761" y="25.75" width="18" height="15.75" rx="2.25" fill="white"/>
+</clipPath>
+<clipPath id="clip4_1844_7983">
+<rect width="60" height="26.25" fill="white" transform="translate(29.026 21.25)"/>
+</clipPath>
+<clipPath id="clip5_1844_7983">
+<rect x="39.526" y="28" width="3.75" height="3.75" rx="1.875" fill="white"/>
+</clipPath>
+<clipPath id="clip6_1844_7983">
+<rect x="4.125" y="49" width="20.25" height="15.75" rx="1.5" fill="white"/>
+</clipPath>
+<clipPath id="clip7_1844_7983">
+<rect x="25.875" y="49" width="20.25" height="15.75" rx="1.5" fill="white"/>
+</clipPath>
+<clipPath id="clip8_1844_7983">
+<rect x="47.625" y="49" width="20.25" height="15.75" rx="1.5" fill="white"/>
+</clipPath>
+<clipPath id="wash_0_clippath"><rect x="12" y="20" width="48" height="32" rx="3" fill="white"/></clipPath></defs>
+</svg>