@wix/design-system-illustrations 1.23.0 → 2.0.0

package/Readme.md

@@ -1,57 +1,31 @@
-# Wix Design System Illustrations
+# @wix/design-system-illustrations
 
-Welcome to the `@wix/design-system-illustrations` library! This package provides a collection of high-quality illustrations.
+A collection of Wix Design System illustrations as React components.
 
 ## Installation
 
-To install the `@wix/design-system-illustrations` package, run the following command in your project directory:
-
 ```bash
 yarn add @wix/design-system-illustrations
 ```
 
 ## Usage
 
-Importing and using illustrations in your React application is straightforward. 
-
-Here's an example of how to use an illustration:
-
 ```jsx
-import React from 'react';
-import { AddingElements } from '@wix/design-system-illustrations';
-
-const MyComponent = () => {
-  return (
-    <div>
-      <h1>Welcome to My Component</h1>
-      <AddingElements />
-    </div>
-  );
-};
-
-export default MyComponent;
+import { TransitionIn } from '@wix/design-system-illustrations';
+
+const MyComponent = () => (
+  <div>
+    <TransitionIn />
+  </div>
+);
 ```
 
-Here's an example of how to use an illustration for TPA's and Editor Elements team:
+All components accept standard SVG props, so you can override dimensions, add classes, etc.:
 
 ```jsx
-import React from 'react';
-import { AddingElements } from '@wix/design-system-illustrations';
-
-const MyComponent = (editorType = 'studio') => {
-  return (
-    <div>
-      <h1>Welcome to My Component</h1>
-      <AddingElements skin={editorType} />
-    </div>
-  );
-};
-
-export default MyComponent;
+<TransitionIn width={120} height={100} className="my-illustration" />
 ```
 
-Property `skin` has been exposed for every single illustration component to allow switching from edge to crisp illustrations theme. The default skin is `edge`.
-```jsx
-<AddingElements skin="studio" />
-<AddingElements skin="edge" />
-```
+## Contributing
+
+See [CONTRIBUTING.md](./CONTRIBUTING.md) for the build pipeline, project structure, and design decisions.

package/dist/cjs/AI.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 AI_exports = {};
+__export(AI_exports, {
+  AI: () => AI
+});
+module.exports = __toCommonJS(AI_exports);
+var import_react = __toESM(require("react"));
+const AI = (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("path", { fill: "url(#AI__a)", d: "M36.593 22.476c-.14-.635-1.046-.635-1.186 0l-1.228 5.545a8.1 8.1 0 0 1-6.158 6.158l-5.545 1.228c-.635.14-.635 1.046 0 1.186l5.545 1.228a8.1 8.1 0 0 1 6.158 6.158l1.228 5.545c.14.635 1.046.635 1.186 0l1.228-5.545a8.1 8.1 0 0 1 6.158-6.158l5.545-1.228c.635-.14.635-1.046 0-1.186l-5.545-1.228a8.1 8.1 0 0 1-6.158-6.158z" }),
+  /* @__PURE__ */ import_react.default.createElement("defs", null, /* @__PURE__ */ import_react.default.createElement("linearGradient", { id: "AI__a", x1: "49.5", x2: "22.608", y1: "22.5", y2: "50.583", gradientUnits: "userSpaceOnUse" }, /* @__PURE__ */ import_react.default.createElement("stop", { stopColor: "var(--wds-illustration-color-5, #eaeff1)" }), /* @__PURE__ */ import_react.default.createElement("stop", { offset: ".35", stopColor: "var(--wds-illustration-color-3, #b8c4ff)" }), /* @__PURE__ */ import_react.default.createElement("stop", { offset: ".75", stopColor: "var(--wds-illustration-color-1, #002291)" })))
+);
+AI.displayName = "AI";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AI
+});

package/dist/cjs/Aspect16_9.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 Aspect16_9_exports = {};
+__export(Aspect16_9_exports, {
+  Aspect16_9: () => Aspect16_9
+});
+module.exports = __toCommonJS(Aspect16_9_exports);
+var import_react = __toESM(require("react"));
+const Aspect16_9 = (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(#Aspect16_9__a)" }, /* @__PURE__ */ import_react.default.createElement("path", { fill: "var(--wds-illustration-color-1, #002291)", d: "M14 26.717c0-1.5 1.216-2.717 2.717-2.717h37.566c1.5 0 2.717 1.216 2.717 2.717v18.566c0 1.5-1.216 2.717-2.717 2.717H16.717A2.717 2.717 0 0 1 14 45.283z" }), /* @__PURE__ */ import_react.default.createElement("g", { filter: "url(#Aspect16_9__b)" }, /* @__PURE__ */ import_react.default.createElement("path", { fill: "url(#Aspect16_9__c)", d: "M14-3h62v51H14z" }))),
+  /* @__PURE__ */ import_react.default.createElement("defs", null, /* @__PURE__ */ import_react.default.createElement("linearGradient", { id: "Aspect16_9__c", x1: "67.207", x2: "26.287", y1: "1.578", y2: "65.056", 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: "Aspect16_9__a" }, /* @__PURE__ */ import_react.default.createElement("rect", { width: "43", height: "24", x: "14", y: "24", fill: "#fff", rx: "3" })), /* @__PURE__ */ import_react.default.createElement("filter", { id: "Aspect16_9__b", width: "72", height: "61", x: "9", y: "-8", 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_102_1867", stdDeviation: "2.5" })))
+);
+Aspect16_9.displayName = "Aspect16_9";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Aspect16_9
+});

package/dist/cjs/Aspect1_1.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 Aspect1_1_exports = {};
+__export(Aspect1_1_exports, {
+  Aspect1_1: () => Aspect1_1
+});
+module.exports = __toCommonJS(Aspect1_1_exports);
+var import_react = __toESM(require("react"));
+const Aspect1_1 = (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(#Aspect1_1__a)" }, /* @__PURE__ */ import_react.default.createElement("rect", { width: "30", height: "30", x: "21", y: "21", fill: "var(--wds-illustration-color-1, #002291)", rx: "3" }), /* @__PURE__ */ import_react.default.createElement("g", { filter: "url(#Aspect1_1__b)" }, /* @__PURE__ */ import_react.default.createElement("path", { fill: "url(#Aspect1_1__c)", d: "M21 0h53v51H21z" }))),
+  /* @__PURE__ */ import_react.default.createElement("defs", null, /* @__PURE__ */ import_react.default.createElement("linearGradient", { id: "Aspect1_1__c", x1: "66.483", x2: "23.287", y1: "4.578", y2: "61.86", 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: "Aspect1_1__a" }, /* @__PURE__ */ import_react.default.createElement("rect", { width: "30", height: "30", x: "21", y: "21", fill: "#fff", rx: "3" })), /* @__PURE__ */ import_react.default.createElement("filter", { id: "Aspect1_1__b", width: "63", height: "61", x: "16", y: "-5", 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_102_1723", stdDeviation: "2.5" })))
+);
+Aspect1_1.displayName = "Aspect1_1";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Aspect1_1
+});

package/dist/cjs/Aspect2_3.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 Aspect2_3_exports = {};
+__export(Aspect2_3_exports, {
+  Aspect2_3: () => Aspect2_3
+});
+module.exports = __toCommonJS(Aspect2_3_exports);
+var import_react = __toESM(require("react"));
+const Aspect2_3 = (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(#Aspect2_3__a)" }, /* @__PURE__ */ import_react.default.createElement("path", { fill: "var(--wds-illustration-color-1, #002291)", d: "M24 20.717c0-1.5 1.216-2.717 2.717-2.717h18.566c1.5 0 2.717 1.216 2.717 2.717v30.566c0 1.5-1.216 2.717-2.717 2.717H26.717A2.717 2.717 0 0 1 24 51.283z" }), /* @__PURE__ */ import_react.default.createElement("g", { filter: "url(#Aspect2_3__b)" }, /* @__PURE__ */ import_react.default.createElement("path", { fill: "url(#Aspect2_3__c)", d: "M24-3h53v57H24z" }))),
+  /* @__PURE__ */ import_react.default.createElement("defs", null, /* @__PURE__ */ import_react.default.createElement("linearGradient", { id: "Aspect2_3__c", x1: "69.483", x2: "19.994", y1: "2.116", y2: "60.835", 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: "Aspect2_3__a" }, /* @__PURE__ */ import_react.default.createElement("rect", { width: "24", height: "36", x: "24", y: "18", fill: "#fff", rx: "3" })), /* @__PURE__ */ import_react.default.createElement("filter", { id: "Aspect2_3__b", width: "63", height: "67", x: "19", y: "-8", 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_102_1902", stdDeviation: "2.5" })))
+);
+Aspect2_3.displayName = "Aspect2_3";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Aspect2_3
+});

package/dist/cjs/Aspect3_2.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 Aspect3_2_exports = {};
+__export(Aspect3_2_exports, {
+  Aspect3_2: () => Aspect3_2
+});
+module.exports = __toCommonJS(Aspect3_2_exports);
+var import_react = __toESM(require("react"));
+const Aspect3_2 = (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(#Aspect3_2__a)" }, /* @__PURE__ */ import_react.default.createElement("path", { fill: "var(--wds-illustration-color-1, #002291)", d: "M18 26.717c0-1.5 1.216-2.717 2.717-2.717h30.566c1.5 0 2.717 1.216 2.717 2.717v18.566c0 1.5-1.216 2.717-2.717 2.717H20.717A2.717 2.717 0 0 1 18 45.283z" }), /* @__PURE__ */ import_react.default.createElement("g", { filter: "url(#Aspect3_2__b)" }, /* @__PURE__ */ import_react.default.createElement("path", { fill: "url(#Aspect3_2__c)", d: "M18-3h59v51H18z" }))),
+  /* @__PURE__ */ import_react.default.createElement("defs", null, /* @__PURE__ */ import_react.default.createElement("linearGradient", { id: "Aspect3_2__c", x1: "68.632", x2: "26.909", y1: "1.578", y2: "63.171", 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: "Aspect3_2__a" }, /* @__PURE__ */ import_react.default.createElement("rect", { width: "36", height: "24", x: "18", y: "24", fill: "#fff", rx: "3" })), /* @__PURE__ */ import_react.default.createElement("filter", { id: "Aspect3_2__b", width: "69", height: "61", x: "13", y: "-8", 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_102_1896", stdDeviation: "2.5" })))
+);
+Aspect3_2.displayName = "Aspect3_2";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Aspect3_2
+});

package/dist/cjs/Aspect3_4.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 Aspect3_4_exports = {};
+__export(Aspect3_4_exports, {
+  Aspect3_4: () => Aspect3_4
+});
+module.exports = __toCommonJS(Aspect3_4_exports);
+var import_react = __toESM(require("react"));
+const Aspect3_4 = (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(#Aspect3_4__a)" }, /* @__PURE__ */ import_react.default.createElement("path", { fill: "var(--wds-illustration-color-1, #002291)", d: "M24 22.717c0-1.5 1.216-2.717 2.717-2.717h18.566c1.5 0 2.717 1.216 2.717 2.717v26.566c0 1.5-1.216 2.717-2.717 2.717H26.717A2.717 2.717 0 0 1 24 49.283z" }), /* @__PURE__ */ import_react.default.createElement("g", { filter: "url(#Aspect3_4__b)" }, /* @__PURE__ */ import_react.default.createElement("path", { fill: "url(#Aspect3_4__c)", d: "M24-3h53v55H24z" }))),
+  /* @__PURE__ */ import_react.default.createElement("defs", null, /* @__PURE__ */ import_react.default.createElement("linearGradient", { id: "Aspect3_4__c", x1: "69.483", x2: "22.048", y1: "1.937", y2: "60.265", 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: "Aspect3_4__a" }, /* @__PURE__ */ import_react.default.createElement("rect", { width: "24", height: "32", x: "24", y: "20", fill: "#fff", rx: "3" })), /* @__PURE__ */ import_react.default.createElement("filter", { id: "Aspect3_4__b", width: "63", height: "65", x: "19", y: "-8", 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_102_1890", stdDeviation: "2.5" })))
+);
+Aspect3_4.displayName = "Aspect3_4";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Aspect3_4
+});

package/dist/cjs/Aspect4_3.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 Aspect4_3_exports = {};
+__export(Aspect4_3_exports, {
+  Aspect4_3: () => Aspect4_3
+});
+module.exports = __toCommonJS(Aspect4_3_exports);
+var import_react = __toESM(require("react"));
+const Aspect4_3 = (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(#Aspect4_3__a)" }, /* @__PURE__ */ import_react.default.createElement("path", { fill: "var(--wds-illustration-color-1, #002291)", d: "M20 26.717c0-1.5 1.216-2.717 2.717-2.717h26.566c1.5 0 2.717 1.216 2.717 2.717v18.566c0 1.5-1.216 2.717-2.717 2.717H22.717A2.717 2.717 0 0 1 20 45.283z" }), /* @__PURE__ */ import_react.default.createElement("g", { filter: "url(#Aspect4_3__b)" }, /* @__PURE__ */ import_react.default.createElement("path", { fill: "url(#Aspect4_3__c)", d: "M20-3h57v51H20z" }))),
+  /* @__PURE__ */ import_react.default.createElement("defs", null, /* @__PURE__ */ import_react.default.createElement("linearGradient", { id: "Aspect4_3__c", x1: "68.916", x2: "26.677", y1: "1.578", y2: "61.818", 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: "Aspect4_3__a" }, /* @__PURE__ */ import_react.default.createElement("rect", { width: "32", height: "24", x: "20", y: "24", fill: "#fff", rx: "3" })), /* @__PURE__ */ import_react.default.createElement("filter", { id: "Aspect4_3__b", width: "67", height: "61", x: "15", y: "-8", 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_102_1884", stdDeviation: "2.5" })))
+);
+Aspect4_3.displayName = "Aspect4_3";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Aspect4_3
+});

package/dist/cjs/Aspect4_5.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 Aspect4_5_exports = {};
+__export(Aspect4_5_exports, {
+  Aspect4_5: () => Aspect4_5
+});
+module.exports = __toCommonJS(Aspect4_5_exports);
+var import_react = __toESM(require("react"));
+const Aspect4_5 = (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(#Aspect4_5__a)" }, /* @__PURE__ */ import_react.default.createElement("path", { fill: "var(--wds-illustration-color-1, #002291)", d: "M24 23.717c0-1.5 1.216-2.717 2.717-2.717h18.566c1.5 0 2.717 1.216 2.717 2.717v24.566c0 1.5-1.216 2.717-2.717 2.717H26.717A2.717 2.717 0 0 1 24 48.283z" }), /* @__PURE__ */ import_react.default.createElement("g", { filter: "url(#Aspect4_5__b)" }, /* @__PURE__ */ import_react.default.createElement("path", { fill: "url(#Aspect4_5__c)", d: "M24-3h53v54H24z" }))),
+  /* @__PURE__ */ import_react.default.createElement("defs", null, /* @__PURE__ */ import_react.default.createElement("linearGradient", { id: "Aspect4_5__c", x1: "69.483", x2: "23.092", y1: "1.847", y2: "59.948", 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: "Aspect4_5__a" }, /* @__PURE__ */ import_react.default.createElement("rect", { width: "24", height: "30", x: "24", y: "21", fill: "#fff", rx: "3" })), /* @__PURE__ */ import_react.default.createElement("filter", { id: "Aspect4_5__b", width: "63", height: "64", x: "19", y: "-8", 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_102_1878", stdDeviation: "2.5" })))
+);
+Aspect4_5.displayName = "Aspect4_5";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Aspect4_5
+});

package/dist/cjs/Aspect5_4.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 Aspect5_4_exports = {};
+__export(Aspect5_4_exports, {
+  Aspect5_4: () => Aspect5_4
+});
+module.exports = __toCommonJS(Aspect5_4_exports);
+var import_react = __toESM(require("react"));
+const Aspect5_4 = (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(#Aspect5_4__a)" }, /* @__PURE__ */ import_react.default.createElement("rect", { width: "30", height: "24", x: "16", y: "21", fill: "var(--wds-illustration-color-1, #002291)", rx: "3" }), /* @__PURE__ */ import_react.default.createElement("g", { filter: "url(#Aspect5_4__b)" }, /* @__PURE__ */ import_react.default.createElement("path", { fill: "url(#Aspect5_4__c)", d: "M16-3h51v48H16z" }))),
+  /* @__PURE__ */ import_react.default.createElement("defs", null, /* @__PURE__ */ import_react.default.createElement("linearGradient", { id: "Aspect5_4__c", x1: "59.767", x2: "19.367", y1: "1.308", y2: "56.082", 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: "Aspect5_4__a" }, /* @__PURE__ */ import_react.default.createElement("rect", { width: "30", height: "24", x: "16", y: "21", fill: "#fff", rx: "3" })), /* @__PURE__ */ import_react.default.createElement("filter", { id: "Aspect5_4__b", width: "61", height: "58", x: "11", y: "-8", 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_102_1873", stdDeviation: "2.5" })))
+);
+Aspect5_4.displayName = "Aspect5_4";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Aspect5_4
+});

package/dist/cjs/Aspect9_16.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 Aspect9_16_exports = {};
+__export(Aspect9_16_exports, {
+  Aspect9_16: () => Aspect9_16
+});
+module.exports = __toCommonJS(Aspect9_16_exports);
+var import_react = __toESM(require("react"));
+const Aspect9_16 = (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(#Aspect9_16__a)" }, /* @__PURE__ */ import_react.default.createElement("path", { fill: "var(--wds-illustration-color-1, #002291)", d: "M24 17.717c0-1.5 1.216-2.717 2.717-2.717h18.566c1.5 0 2.717 1.216 2.717 2.717v37.566c0 1.5-1.216 2.717-2.717 2.717H26.717A2.717 2.717 0 0 1 24 55.283z" }), /* @__PURE__ */ import_react.default.createElement("g", { filter: "url(#Aspect9_16__b)" }, /* @__PURE__ */ import_react.default.createElement("path", { fill: "url(#Aspect9_16__c)", d: "M24-3h53v61H24z" }))),
+  /* @__PURE__ */ import_react.default.createElement("defs", null, /* @__PURE__ */ import_react.default.createElement("linearGradient", { id: "Aspect9_16__c", x1: "69.483", x2: "16.03", y1: "2.475", y2: "61.739", 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: "Aspect9_16__a" }, /* @__PURE__ */ import_react.default.createElement("rect", { width: "24", height: "43", x: "24", y: "15", fill: "#fff", rx: "3" })), /* @__PURE__ */ import_react.default.createElement("filter", { id: "Aspect9_16__b", width: "63", height: "71", x: "19", y: "-8", 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_102_1728", stdDeviation: "2.5" })))
+);
+Aspect9_16.displayName = "Aspect9_16";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Aspect9_16
+});