@wix/design-system-illustrations 2.42.1 → 2.43.0

package/dist/cjs/Layout1Column.js

@@ -0,0 +1,52 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Layout1Column_exports = {};
+__export(Layout1Column_exports, {
+  Layout1Column: () => Layout1Column
+});
+module.exports = __toCommonJS(Layout1Column_exports);
+var import_react = __toESM(require("react"));
+const Layout1Column = (props) => /* @__PURE__ */ import_react.default.createElement(
+  "svg",
+  {
+    viewBox: "0 0 72 72",
+    fill: "none",
+    width: 72,
+    height: 72,
+    xmlns: "http://www.w3.org/2000/svg",
+    ...props
+  },
+  /* @__PURE__ */ import_react.default.createElement("g", { clipPath: "url(#Layout1Column__a)" }, /* @__PURE__ */ import_react.default.createElement("rect", { width: "54", height: "38", x: "9", y: "19", fill: "var(--wds-illustration-color-1, #002291)", rx: "3" }), /* @__PURE__ */ import_react.default.createElement("g", { filter: "url(#Layout1Column__b)" }, /* @__PURE__ */ import_react.default.createElement("path", { fill: "url(#Layout1Column__c)", d: "M9-1h94v58H9z" }))),
+  /* @__PURE__ */ import_react.default.createElement("defs", null, /* @__PURE__ */ import_react.default.createElement("linearGradient", { id: "Layout1Column__c", x1: "89.668", x2: "49.619", y1: "4.206", y2: "87.031", gradientUnits: "userSpaceOnUse" }, /* @__PURE__ */ import_react.default.createElement("stop", { offset: ".176", stopColor: "var(--wds-illustration-color-5, #eaeff1)" }), /* @__PURE__ */ import_react.default.createElement("stop", { offset: ".577", stopColor: "var(--wds-illustration-color-3, #b8c4ff)" }), /* @__PURE__ */ import_react.default.createElement("stop", { offset: ".85", stopColor: "var(--wds-illustration-color-1, #002291)" })), /* @__PURE__ */ import_react.default.createElement("clipPath", { id: "Layout1Column__a" }, /* @__PURE__ */ import_react.default.createElement("rect", { width: "54", height: "38", x: "9", y: "19", fill: "#fff", rx: "3" })), /* @__PURE__ */ import_react.default.createElement("filter", { id: "Layout1Column__b", width: "106", height: "70", x: "3", y: "-7", filterUnits: "userSpaceOnUse", colorInterpolationFilters: "sRGB" }, /* @__PURE__ */ import_react.default.createElement("feFlood", { result: "BackgroundImageFix", floodOpacity: "0" }), /* @__PURE__ */ import_react.default.createElement("feBlend", { in: "SourceGraphic", in2: "BackgroundImageFix", result: "shape" }), /* @__PURE__ */ import_react.default.createElement("feGaussianBlur", { result: "effect1_foregroundBlur_2241_22421", stdDeviation: "3" })))
+);
+Layout1Column.displayName = "Layout1Column";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Layout1Column
+});

package/dist/cjs/Layout2Columns.js

@@ -0,0 +1,52 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Layout2Columns_exports = {};
+__export(Layout2Columns_exports, {
+  Layout2Columns: () => Layout2Columns
+});
+module.exports = __toCommonJS(Layout2Columns_exports);
+var import_react = __toESM(require("react"));
+const Layout2Columns = (props) => /* @__PURE__ */ import_react.default.createElement(
+  "svg",
+  {
+    viewBox: "0 0 72 72",
+    fill: "none",
+    width: 72,
+    height: 72,
+    xmlns: "http://www.w3.org/2000/svg",
+    ...props
+  },
+  /* @__PURE__ */ import_react.default.createElement("g", { clipPath: "url(#Layout2Columns__a)" }, /* @__PURE__ */ import_react.default.createElement("rect", { width: "54", height: "38", x: "9", y: "19", fill: "var(--wds-illustration-color-1, #002291)", rx: "3" }), /* @__PURE__ */ import_react.default.createElement("g", { filter: "url(#Layout2Columns__b)" }, /* @__PURE__ */ import_react.default.createElement("path", { fill: "url(#Layout2Columns__c)", d: "M9-1h94v58H9z" })), /* @__PURE__ */ import_react.default.createElement("path", { fill: "var(--wds-illustration-color-background, #f8f6f6)", d: "M35 13h2v50h-2z" })),
+  /* @__PURE__ */ import_react.default.createElement("defs", null, /* @__PURE__ */ import_react.default.createElement("linearGradient", { id: "Layout2Columns__c", x1: "89.668", x2: "49.619", y1: "4.206", y2: "87.031", gradientUnits: "userSpaceOnUse" }, /* @__PURE__ */ import_react.default.createElement("stop", { offset: ".176", stopColor: "var(--wds-illustration-color-5, #eaeff1)" }), /* @__PURE__ */ import_react.default.createElement("stop", { offset: ".577", stopColor: "var(--wds-illustration-color-3, #b8c4ff)" }), /* @__PURE__ */ import_react.default.createElement("stop", { offset: ".85", stopColor: "var(--wds-illustration-color-1, #002291)" })), /* @__PURE__ */ import_react.default.createElement("clipPath", { id: "Layout2Columns__a" }, /* @__PURE__ */ import_react.default.createElement("rect", { width: "54", height: "38", x: "9", y: "19", fill: "#fff", rx: "3" })), /* @__PURE__ */ import_react.default.createElement("filter", { id: "Layout2Columns__b", width: "106", height: "70", x: "3", y: "-7", filterUnits: "userSpaceOnUse", colorInterpolationFilters: "sRGB" }, /* @__PURE__ */ import_react.default.createElement("feFlood", { result: "BackgroundImageFix", floodOpacity: "0" }), /* @__PURE__ */ import_react.default.createElement("feBlend", { in: "SourceGraphic", in2: "BackgroundImageFix", result: "shape" }), /* @__PURE__ */ import_react.default.createElement("feGaussianBlur", { result: "effect1_foregroundBlur_2241_22466", stdDeviation: "3" })))
+);
+Layout2Columns.displayName = "Layout2Columns";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Layout2Columns
+});

package/dist/cjs/Layout3Columns.js

@@ -0,0 +1,52 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Layout3Columns_exports = {};
+__export(Layout3Columns_exports, {
+  Layout3Columns: () => Layout3Columns
+});
+module.exports = __toCommonJS(Layout3Columns_exports);
+var import_react = __toESM(require("react"));
+const Layout3Columns = (props) => /* @__PURE__ */ import_react.default.createElement(
+  "svg",
+  {
+    viewBox: "0 0 72 72",
+    fill: "none",
+    width: 72,
+    height: 72,
+    xmlns: "http://www.w3.org/2000/svg",
+    ...props
+  },
+  /* @__PURE__ */ import_react.default.createElement("g", { clipPath: "url(#Layout3Columns__a)" }, /* @__PURE__ */ import_react.default.createElement("rect", { width: "54", height: "38", x: "9", y: "19", fill: "var(--wds-illustration-color-1, #002291)", rx: "3" }), /* @__PURE__ */ import_react.default.createElement("g", { filter: "url(#Layout3Columns__b)" }, /* @__PURE__ */ import_react.default.createElement("path", { fill: "url(#Layout3Columns__c)", d: "M9-1h94v58H9z" })), /* @__PURE__ */ import_react.default.createElement("path", { fill: "var(--wds-illustration-color-background, #f8f6f6)", d: "M26 13h2v50h-2zM44 13h2v50h-2z" })),
+  /* @__PURE__ */ import_react.default.createElement("defs", null, /* @__PURE__ */ import_react.default.createElement("linearGradient", { id: "Layout3Columns__c", x1: "89.668", x2: "49.619", y1: "4.206", y2: "87.031", gradientUnits: "userSpaceOnUse" }, /* @__PURE__ */ import_react.default.createElement("stop", { offset: ".176", stopColor: "var(--wds-illustration-color-5, #eaeff1)" }), /* @__PURE__ */ import_react.default.createElement("stop", { offset: ".577", stopColor: "var(--wds-illustration-color-3, #b8c4ff)" }), /* @__PURE__ */ import_react.default.createElement("stop", { offset: ".85", stopColor: "var(--wds-illustration-color-1, #002291)" })), /* @__PURE__ */ import_react.default.createElement("clipPath", { id: "Layout3Columns__a" }, /* @__PURE__ */ import_react.default.createElement("rect", { width: "54", height: "38", x: "9", y: "19", fill: "#fff", rx: "3" })), /* @__PURE__ */ import_react.default.createElement("filter", { id: "Layout3Columns__b", width: "106", height: "70", x: "3", y: "-7", filterUnits: "userSpaceOnUse", colorInterpolationFilters: "sRGB" }, /* @__PURE__ */ import_react.default.createElement("feFlood", { result: "BackgroundImageFix", floodOpacity: "0" }), /* @__PURE__ */ import_react.default.createElement("feBlend", { in: "SourceGraphic", in2: "BackgroundImageFix", result: "shape" }), /* @__PURE__ */ import_react.default.createElement("feGaussianBlur", { result: "effect1_foregroundBlur_2241_22535", stdDeviation: "3" })))
+);
+Layout3Columns.displayName = "Layout3Columns";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Layout3Columns
+});

package/dist/cjs/Layout4Columns.js

@@ -0,0 +1,52 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Layout4Columns_exports = {};
+__export(Layout4Columns_exports, {
+  Layout4Columns: () => Layout4Columns
+});
+module.exports = __toCommonJS(Layout4Columns_exports);
+var import_react = __toESM(require("react"));
+const Layout4Columns = (props) => /* @__PURE__ */ import_react.default.createElement(
+  "svg",
+  {
+    viewBox: "0 0 72 72",
+    fill: "none",
+    width: 72,
+    height: 72,
+    xmlns: "http://www.w3.org/2000/svg",
+    ...props
+  },
+  /* @__PURE__ */ import_react.default.createElement("g", { clipPath: "url(#Layout4Columns__a)" }, /* @__PURE__ */ import_react.default.createElement("rect", { width: "54", height: "38", x: "9", y: "19", fill: "var(--wds-illustration-color-1, #002291)", rx: "3" }), /* @__PURE__ */ import_react.default.createElement("g", { filter: "url(#Layout4Columns__b)" }, /* @__PURE__ */ import_react.default.createElement("path", { fill: "url(#Layout4Columns__c)", d: "M9-1h94v58H9z" })), /* @__PURE__ */ import_react.default.createElement("path", { fill: "var(--wds-illustration-color-background, #f8f6f6)", d: "M21 13h2v50h-2zM48 13h2v50h-2zM35 13h2v50h-2z" })),
+  /* @__PURE__ */ import_react.default.createElement("defs", null, /* @__PURE__ */ import_react.default.createElement("linearGradient", { id: "Layout4Columns__c", x1: "89.668", x2: "49.619", y1: "4.206", y2: "87.031", gradientUnits: "userSpaceOnUse" }, /* @__PURE__ */ import_react.default.createElement("stop", { offset: ".176", stopColor: "var(--wds-illustration-color-5, #eaeff1)" }), /* @__PURE__ */ import_react.default.createElement("stop", { offset: ".577", stopColor: "var(--wds-illustration-color-3, #b8c4ff)" }), /* @__PURE__ */ import_react.default.createElement("stop", { offset: ".85", stopColor: "var(--wds-illustration-color-1, #002291)" })), /* @__PURE__ */ import_react.default.createElement("clipPath", { id: "Layout4Columns__a" }, /* @__PURE__ */ import_react.default.createElement("rect", { width: "54", height: "38", x: "9", y: "19", fill: "#fff", rx: "3" })), /* @__PURE__ */ import_react.default.createElement("filter", { id: "Layout4Columns__b", width: "106", height: "70", x: "3", y: "-7", filterUnits: "userSpaceOnUse", colorInterpolationFilters: "sRGB" }, /* @__PURE__ */ import_react.default.createElement("feFlood", { result: "BackgroundImageFix", floodOpacity: "0" }), /* @__PURE__ */ import_react.default.createElement("feBlend", { in: "SourceGraphic", in2: "BackgroundImageFix", result: "shape" }), /* @__PURE__ */ import_react.default.createElement("feGaussianBlur", { result: "effect1_foregroundBlur_2241_22581", stdDeviation: "3" })))
+);
+Layout4Columns.displayName = "Layout4Columns";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Layout4Columns
+});

package/dist/cjs/Layout5Columns.js

@@ -0,0 +1,52 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Layout5Columns_exports = {};
+__export(Layout5Columns_exports, {
+  Layout5Columns: () => Layout5Columns
+});
+module.exports = __toCommonJS(Layout5Columns_exports);
+var import_react = __toESM(require("react"));
+const Layout5Columns = (props) => /* @__PURE__ */ import_react.default.createElement(
+  "svg",
+  {
+    viewBox: "0 0 72 72",
+    fill: "none",
+    width: 72,
+    height: 72,
+    xmlns: "http://www.w3.org/2000/svg",
+    ...props
+  },
+  /* @__PURE__ */ import_react.default.createElement("g", { clipPath: "url(#Layout5Columns__a)" }, /* @__PURE__ */ import_react.default.createElement("rect", { width: "54", height: "38", x: "9", y: "19", fill: "var(--wds-illustration-color-1, #002291)", rx: "3" }), /* @__PURE__ */ import_react.default.createElement("g", { filter: "url(#Layout5Columns__b)" }, /* @__PURE__ */ import_react.default.createElement("path", { fill: "url(#Layout5Columns__c)", d: "M9-1h94v58H9z" })), /* @__PURE__ */ import_react.default.createElement("path", { fill: "var(--wds-illustration-color-background, #f8f6f6)", d: "M19 13h2v50h-2zM51 13h2v50h-2zM40 13h2v50h-2zM30 13h2v50h-2z" })),
+  /* @__PURE__ */ import_react.default.createElement("defs", null, /* @__PURE__ */ import_react.default.createElement("linearGradient", { id: "Layout5Columns__c", x1: "89.668", x2: "49.619", y1: "4.206", y2: "87.031", gradientUnits: "userSpaceOnUse" }, /* @__PURE__ */ import_react.default.createElement("stop", { offset: ".176", stopColor: "var(--wds-illustration-color-5, #eaeff1)" }), /* @__PURE__ */ import_react.default.createElement("stop", { offset: ".577", stopColor: "var(--wds-illustration-color-3, #b8c4ff)" }), /* @__PURE__ */ import_react.default.createElement("stop", { offset: ".85", stopColor: "var(--wds-illustration-color-1, #002291)" })), /* @__PURE__ */ import_react.default.createElement("clipPath", { id: "Layout5Columns__a" }, /* @__PURE__ */ import_react.default.createElement("rect", { width: "54", height: "38", x: "9", y: "19", fill: "#fff", rx: "3" })), /* @__PURE__ */ import_react.default.createElement("filter", { id: "Layout5Columns__b", width: "106", height: "70", x: "3", y: "-7", filterUnits: "userSpaceOnUse", colorInterpolationFilters: "sRGB" }, /* @__PURE__ */ import_react.default.createElement("feFlood", { result: "BackgroundImageFix", floodOpacity: "0" }), /* @__PURE__ */ import_react.default.createElement("feBlend", { in: "SourceGraphic", in2: "BackgroundImageFix", result: "shape" }), /* @__PURE__ */ import_react.default.createElement("feGaussianBlur", { result: "effect1_foregroundBlur_2243_22634", stdDeviation: "3" })))
+);
+Layout5Columns.displayName = "Layout5Columns";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Layout5Columns
+});

package/dist/cjs/LayoutHalf.js

@@ -0,0 +1,53 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var LayoutHalf_exports = {};
+__export(LayoutHalf_exports, {
+  LayoutHalf: () => LayoutHalf
+});
+module.exports = __toCommonJS(LayoutHalf_exports);
+var import_react = __toESM(require("react"));
+const LayoutHalf = (props) => /* @__PURE__ */ import_react.default.createElement(
+  "svg",
+  {
+    viewBox: "0 0 72 72",
+    fill: "none",
+    width: 72,
+    height: 72,
+    xmlns: "http://www.w3.org/2000/svg",
+    ...props
+  },
+  /* @__PURE__ */ import_react.default.createElement("g", { clipPath: "url(#LayoutHalf__a)" }, /* @__PURE__ */ import_react.default.createElement("path", { fill: "var(--wds-illustration-color-opacity-25, #f8f6f200)", d: "M5 8h67v58H5z" })),
+  /* @__PURE__ */ import_react.default.createElement("g", { clipPath: "url(#LayoutHalf__b)" }, /* @__PURE__ */ import_react.default.createElement("rect", { width: "54", height: "38", x: "9", y: "19", fill: "var(--wds-illustration-color-2, #7896ff)", opacity: ".25", rx: "3" }), /* @__PURE__ */ import_react.default.createElement("g", { clipPath: "url(#LayoutHalf__c)" }, /* @__PURE__ */ import_react.default.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__ */ import_react.default.createElement("g", { filter: "url(#LayoutHalf__d)" }, /* @__PURE__ */ import_react.default.createElement("path", { fill: "url(#LayoutHalf__e)", d: "M9-1h94v58H9z" })))),
+  /* @__PURE__ */ import_react.default.createElement("defs", null, /* @__PURE__ */ import_react.default.createElement("clipPath", { id: "LayoutHalf__b" }, /* @__PURE__ */ import_react.default.createElement("rect", { width: "54", height: "38", x: "9", y: "19", fill: "#fff", rx: "3" })), /* @__PURE__ */ import_react.default.createElement("clipPath", { id: "LayoutHalf__c" }, /* @__PURE__ */ import_react.default.createElement("path", { fill: "#fff", d: "M9 22a3 3 0 0 1 3-3h24v38H12a3 3 0 0 1-3-3z" })), /* @__PURE__ */ import_react.default.createElement("clipPath", { id: "LayoutHalf__a" }, /* @__PURE__ */ import_react.default.createElement("rect", { width: "54", height: "38", x: "9", y: "19", fill: "#fff", rx: "3" })), /* @__PURE__ */ import_react.default.createElement("linearGradient", { id: "LayoutHalf__e", x1: "89.668", x2: "49.619", y1: "4.206", y2: "87.031", gradientUnits: "userSpaceOnUse" }, /* @__PURE__ */ import_react.default.createElement("stop", { offset: ".176", stopColor: "var(--wds-illustration-color-5, #eaeff1)" }), /* @__PURE__ */ import_react.default.createElement("stop", { offset: ".577", stopColor: "var(--wds-illustration-color-3, #b8c4ff)" }), /* @__PURE__ */ import_react.default.createElement("stop", { offset: ".85", stopColor: "var(--wds-illustration-color-1, #002291)" })), /* @__PURE__ */ import_react.default.createElement("filter", { id: "LayoutHalf__d", width: "106", height: "70", x: "3", y: "-7", filterUnits: "userSpaceOnUse", colorInterpolationFilters: "sRGB" }, /* @__PURE__ */ import_react.default.createElement("feFlood", { result: "BackgroundImageFix", floodOpacity: "0" }), /* @__PURE__ */ import_react.default.createElement("feBlend", { in: "SourceGraphic", in2: "BackgroundImageFix", result: "shape" }), /* @__PURE__ */ import_react.default.createElement("feGaussianBlur", { result: "effect1_foregroundBlur_2243_22699", stdDeviation: "3" })))
+);
+LayoutHalf.displayName = "LayoutHalf";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  LayoutHalf
+});

package/dist/cjs/LayoutThird.js

@@ -0,0 +1,53 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var LayoutThird_exports = {};
+__export(LayoutThird_exports, {
+  LayoutThird: () => LayoutThird
+});
+module.exports = __toCommonJS(LayoutThird_exports);
+var import_react = __toESM(require("react"));
+const LayoutThird = (props) => /* @__PURE__ */ import_react.default.createElement(
+  "svg",
+  {
+    viewBox: "0 0 72 72",
+    fill: "none",
+    width: 72,
+    height: 72,
+    xmlns: "http://www.w3.org/2000/svg",
+    ...props
+  },
+  /* @__PURE__ */ import_react.default.createElement("g", { clipPath: "url(#LayoutThird__a)" }, /* @__PURE__ */ import_react.default.createElement("path", { fill: "var(--wds-illustration-color-opacity-25, #f8f6f200)", d: "M5 8h67v58H5z" })),
+  /* @__PURE__ */ import_react.default.createElement("g", { clipPath: "url(#LayoutThird__b)" }, /* @__PURE__ */ import_react.default.createElement("rect", { width: "54", height: "38", x: "9", y: "19", fill: "var(--wds-illustration-color-2, #7896ff)", opacity: ".25", rx: "3" }), /* @__PURE__ */ import_react.default.createElement("g", { clipPath: "url(#LayoutThird__c)" }, /* @__PURE__ */ import_react.default.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__ */ import_react.default.createElement("g", { filter: "url(#LayoutThird__d)" }, /* @__PURE__ */ import_react.default.createElement("path", { fill: "url(#LayoutThird__e)", d: "M9-1h94v58H9z" })))),
+  /* @__PURE__ */ import_react.default.createElement("defs", null, /* @__PURE__ */ import_react.default.createElement("clipPath", { id: "LayoutThird__b" }, /* @__PURE__ */ import_react.default.createElement("rect", { width: "54", height: "38", x: "9", y: "19", fill: "#fff", rx: "3" })), /* @__PURE__ */ import_react.default.createElement("clipPath", { id: "LayoutThird__c" }, /* @__PURE__ */ import_react.default.createElement("path", { fill: "#fff", d: "M9 22a3 3 0 0 1 3-3h15v38H12a3 3 0 0 1-3-3z" })), /* @__PURE__ */ import_react.default.createElement("clipPath", { id: "LayoutThird__a" }, /* @__PURE__ */ import_react.default.createElement("rect", { width: "54", height: "38", x: "9", y: "19", fill: "#fff", rx: "3" })), /* @__PURE__ */ import_react.default.createElement("linearGradient", { id: "LayoutThird__e", x1: "89.668", x2: "49.619", y1: "4.206", y2: "87.031", gradientUnits: "userSpaceOnUse" }, /* @__PURE__ */ import_react.default.createElement("stop", { offset: ".176", stopColor: "var(--wds-illustration-color-5, #eaeff1)" }), /* @__PURE__ */ import_react.default.createElement("stop", { offset: ".577", stopColor: "var(--wds-illustration-color-3, #b8c4ff)" }), /* @__PURE__ */ import_react.default.createElement("stop", { offset: ".85", stopColor: "var(--wds-illustration-color-1, #002291)" })), /* @__PURE__ */ import_react.default.createElement("filter", { id: "LayoutThird__d", width: "106", height: "70", x: "3", y: "-7", filterUnits: "userSpaceOnUse", colorInterpolationFilters: "sRGB" }, /* @__PURE__ */ import_react.default.createElement("feFlood", { result: "BackgroundImageFix", floodOpacity: "0" }), /* @__PURE__ */ import_react.default.createElement("feBlend", { in: "SourceGraphic", in2: "BackgroundImageFix", result: "shape" }), /* @__PURE__ */ import_react.default.createElement("feGaussianBlur", { result: "effect1_foregroundBlur_2244_22896", stdDeviation: "3" })))
+);
+LayoutThird.displayName = "LayoutThird";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  LayoutThird
+});

package/dist/cjs/MaxWidth.js

@@ -44,7 +44,7 @@ const MaxWidth = (props) => /* @__PURE__ */ import_react.default.createElement(
   },
   /* @__PURE__ */ import_react.default.createElement("rect", { width: "147", height: "81", x: "44.594", y: "23", fill: "var(--wds-illustration-color-opacity-25, #f8f6f200)", rx: "6" }),
   /* @__PURE__ */ import_react.default.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__ */ import_react.default.createElement("rect", { width: "147", height: "81", x: "44.594", y: "23", fill: "#EAEFFF", rx: "6" }),
+  /* @__PURE__ */ import_react.default.createElement("rect", { width: "147", height: "81", x: "44.594", y: "23", fill: "var(--wds-illustration-color-2, #7896ff)", rx: "6", fillOpacity: ".25" }),
   /* @__PURE__ */ import_react.default.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__ */ import_react.default.createElement("g", { clipPath: "url(#MaxWidth__a)" }, /* @__PURE__ */ import_react.default.createElement("g", { clipPath: "url(#MaxWidth__b)" }, /* @__PURE__ */ import_react.default.createElement("rect", { width: "147", height: "60.004", x: "44.594", y: "33.5", fill: "#002294", rx: "4" }), /* @__PURE__ */ import_react.default.createElement("g", { filter: "url(#MaxWidth__c)" }, /* @__PURE__ */ import_react.default.createElement("path", { fill: "url(#MaxWidth__d)", d: "M0 0h81.35v285.949H0z", transform: "matrix(0 -1 -1 0 330.543 93.508)" }))), /* @__PURE__ */ import_react.default.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__ */ import_react.default.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/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

@@ -11,7 +11,7 @@ const MaxWidth = (props) => /* @__PURE__ */ React.createElement(
   },
   /* @__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-2, #7896ff)", rx: "6", fillOpacity: ".25" }),
   /* @__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/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/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.43.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.236.3",
     "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": "4ac6a1d1165b88bacc48548f4d8629c34f38cb3adcd702cffff91bcf"
 }

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)"/>
 <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>