@sebgroup/green-core 1.74.1 → 1.75.0

package/components/icon/icon.component.js

@@ -5,40 +5,100 @@ import { html } from "lit";
 import { property } from "lit/decorators.js";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
 import { GdsElement } from "../../gds-element.js";
+import { tokens } from "../../tokens.style.js";
+import { styleExpressionProperty } from "../../utils/decorators/style-expression-property.js";
+import { forSpaceTokensAndCustomValues } from "../../utils/helpers/index.js";
+import {
+  withLayoutChildProps,
+  withMarginProps
+} from "../../utils/mixins/declarative-layout-mixins.js";
 import IconCSS from "./icon.style.js";
-class GdsIcon extends GdsElement {
+class GdsIcon extends withMarginProps(withLayoutChildProps(GdsElement)) {
   constructor() {
     super(...arguments);
     this.solid = false;
     this.box = false;
     this.label = "";
   }
+  /**
+   * Generates the SVG attributes for the icon
+   * @private
+   */
+  get svgAttributes() {
+    const constructor = this.constructor;
+    const baseAttrs = {
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      // TODO: Remove in 2.0.0
+      // (deprecated)
+      ...this.size === void 0 && {
+        width: this.width || constructor._width,
+        height: this.width || constructor._height
+      } || {},
+      viewBox: this.box || constructor._viewBox,
+      part: "icon"
+    };
+    if (this.label) {
+      return {
+        ...baseAttrs,
+        "aria-label": this.label
+      };
+    } else {
+      return {
+        ...baseAttrs,
+        role: "presentation"
+      };
+    }
+  }
+  /**
+   * Gets the appropriate SVG content based on the solid property
+   * @private
+   */
+  get svgContent() {
+    const constructor = this.constructor;
+    return this.solid ? constructor._solidSVG : constructor._regularSVG;
+  }
+  /**
+   * Applies stroke width to SVG paths if stroke property is set
+   * @private
+   */
+  applyStroke(content) {
+    if (!this.stroke)
+      return content;
+    return content.replace(
+      /<(path|rect|circle|ellipse|line|polyline|polygon)/g,
+      `<$1 stroke-width="${this.stroke}"`
+    );
+  }
+  /**
+   * Generates the SVG attributes string
+   * @private
+   */
+  generateAttributesString(attrs) {
+    return Object.entries(attrs).filter(([_, value]) => value !== void 0).map(([key, value]) => `${key}="${value}"`).join("\n      ");
+  }
   render() {
-    const isSebIcon = this.constructor._name === "brand-seb";
-    const width = isSebIcon ? "55px" : this.width !== void 0 ? `${this.width.toString()}px` : void 0;
-    const height = isSebIcon ? "24px" : this.height !== void 0 ? `${this.height.toString()}px` : "1lh";
-    const viewBox = isSebIcon ? "0 0 55 24" : this.box || "0 0 24 24";
-    let svgContent = `<svg
-      style="height:${height};${width ? `width:${width};` : ""}"
-      viewBox="${viewBox}"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      ${this.label ? `aria-label="${this.label}"` : `aria-label="${this.constructor._name}"`}
-      role="graphics-symbol"
-      part="icon"
-    >
-      ${this.solid ? this.constructor._solidSVG : this.constructor._regularSVG}
-    </svg>`;
+    const attrs = this.svgAttributes;
+    let content = this.svgContent || "";
     if (this.stroke) {
-      svgContent = svgContent.replace(
-        /<(path|rect|circle|ellipse|line|polyline|polygon)/g,
-        `<$1 stroke-width="${this.stroke}"`
-      );
+      content = this.applyStroke(content);
     }
-    return html`${unsafeHTML(svgContent)}`;
+    const svg = `
+      <svg ${this.generateAttributesString(attrs)}>
+        ${content}
+      </svg>
+    `;
+    return html`${unsafeHTML(svg)}`;
   }
 }
-GdsIcon.styles = [IconCSS];
+GdsIcon.styles = [tokens, IconCSS];
+__decorateClass([
+  styleExpressionProperty({
+    ...forSpaceTokensAndCustomValues,
+    property: "height",
+    selector: "svg"
+  })
+], GdsIcon.prototype, "size", 2);
 __decorateClass([
   property({ type: Number })
 ], GdsIcon.prototype, "width", 2);

package/components/icon/icon.deprecated.d.ts

@@ -0,0 +1,6 @@
+export interface DeprecationInfo {
+    name: string;
+    useInstead?: string;
+    hide: true;
+}
+export declare const deprecatedIcons: Record<string, DeprecationInfo>;

package/components/icon/icon.deprecated.js

@@ -0,0 +1,61 @@
+import "../../chunks/chunk.QTSIPXV3.js";
+const ICON_REPLACEMENTS = {
+  seb: "gds-icon-brand-seb"
+};
+const DEPRECATED_NAMES = [
+  "square-plus",
+  "square-minus",
+  "square-x",
+  "square-check",
+  "todos",
+  "square-info",
+  "bubble-text",
+  "bubble-dots",
+  "bubble-wide-annotation",
+  "bubble",
+  "bubble-question",
+  "bubble-quotes",
+  "unlocked",
+  "folder-upload",
+  "arrows-repeat",
+  "suitcase-work",
+  "pencel-line",
+  "invite",
+  "settings-slider-ver",
+  "settings-slider-three",
+  "page-text",
+  "phone-dynamic-island",
+  "flag",
+  "chart-one",
+  "chart-presentation",
+  "vertical-alignment-right",
+  "folder-paper",
+  "solar-panel",
+  "light-bulb",
+  "heart-beat",
+  "circles-three",
+  "charging-station",
+  "square-grid-circle",
+  "focus-square",
+  "maintenance"
+];
+const deprecatedIcons = Object.fromEntries([
+  ...Object.entries(ICON_REPLACEMENTS).map(([name, replacement]) => [
+    `gds-icon-${name}`,
+    {
+      name,
+      useInstead: replacement,
+      hide: true
+    }
+  ]),
+  ...DEPRECATED_NAMES.map((name) => [
+    `gds-icon-${name}`,
+    {
+      name,
+      hide: true
+    }
+  ])
+]);
+export {
+  deprecatedIcons
+};

package/components/icon/icon.style.js

@@ -10,6 +10,8 @@ const style = css`
 
     svg {
       display: block;
+      height: 1lh;
+      width: auto;
     }
   }
 `;

package/components/icon/icons/ai.component.d.ts

@@ -0,0 +1,18 @@
+import { GdsIcon } from '../icon';
+/**
+ * @element gds-icon-ai
+ */
+export declare class IconAi extends GdsIcon {
+    /** @private */
+    static _regularSVG: string;
+    /** @private */
+    static _solidSVG: string;
+    /** @private */
+    static _name: string;
+    /** @private */
+    static _width: number;
+    /** @private */
+    static _height: number;
+    /** @private */
+    static _viewBox: string;
+}

package/components/icon/icons/ai.component.js

@@ -0,0 +1,25 @@
+import {
+  __decorateClass
+} from "../../../chunks/chunk.QTSIPXV3.js";
+import { gdsCustomElement } from "../../../scoping.js";
+import { GdsIcon } from "../icon.js";
+let IconAi = class extends GdsIcon {
+};
+/** @private */
+IconAi._regularSVG = `<path d="M19.25 13C14.1955 13.4375 11.4375 16.1955 11 21.25C10.544 16.1169 7.80041 13.5721 2.75 13C7.88024 12.4083 10.4083 9.88024 11 4.75C11.5721 9.80041 14.1169 12.544 19.25 13Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M19.7898 1.25884C19.7731 1.11151 19.6486 1.00015 19.5003 1C19.352 0.999849 19.2272 1.11096 19.2103 1.25825C19.0998 2.21602 18.8134 2.8895 18.3515 3.35146C17.8895 3.81343 17.216 4.09979 16.2582 4.21025C16.111 4.22724 15.9998 4.35203 16 4.5003C16.0002 4.64857 16.1115 4.77313 16.2588 4.78981C17.2008 4.89651 17.8886 5.18275 18.3615 5.64713C18.8327 6.10977 19.125 6.7831 19.2095 7.73414C19.2229 7.88476 19.3491 8.00017 19.5003 8C19.6515 7.99983 19.7775 7.88413 19.7906 7.73349C19.8716 6.79809 20.1636 6.11059 20.6371 5.6371C21.1106 5.16361 21.7981 4.87155 22.7335 4.79058C22.8841 4.77754 22.9998 4.65154 23 4.50033C23.0002 4.34912 22.8848 4.22286 22.7341 4.20948C21.7831 4.125 21.1098 3.83266 20.6471 3.36151C20.1827 2.88857 19.8965 2.20078 19.7898 1.25884Z" fill="currentColor"/>`;
+/** @private */
+IconAi._solidSVG = `<path d="M11.7452 4.66559C11.7023 4.28675 11.382 4.00039 11.0008 4C10.6195 3.99961 10.2986 4.28532 10.2549 4.66407C9.97088 7.12691 9.23453 8.85871 8.04662 10.0466C6.85871 11.2345 5.12691 11.9709 2.66407 12.2549C2.28532 12.2986 1.99961 12.6195 2 13.0008C2.00039 13.382 2.28675 13.7023 2.66559 13.7452C5.08772 14.0196 6.85633 14.7556 8.07245 15.9498C9.28399 17.1394 10.0357 18.8708 10.2529 21.3164C10.2873 21.7037 10.612 22.0004 11.0008 22C11.3897 21.9996 11.7137 21.7021 11.7472 21.3147C11.9554 18.9094 12.7064 17.1415 13.924 15.924C15.1415 14.7064 16.9094 13.9554 19.3147 13.7472C19.7021 13.7137 19.9996 13.3897 20 13.0008C20.0004 12.612 19.7037 12.2873 19.3164 12.2529C16.8708 12.0357 15.1394 11.284 13.9498 10.0724C12.7556 8.85633 12.0196 7.08772 11.7452 4.66559Z" fill="currentColor"/><path d="M19.7898 1.25884C19.7731 1.11151 19.6486 1.00015 19.5003 1C19.352 0.999849 19.2272 1.11096 19.2103 1.25825C19.0998 2.21602 18.8134 2.8895 18.3515 3.35146C17.8895 3.81343 17.216 4.09979 16.2582 4.21025C16.111 4.22724 15.9998 4.35203 16 4.5003C16.0002 4.64857 16.1115 4.77313 16.2588 4.78981C17.2008 4.89651 17.8886 5.18275 18.3615 5.64713C18.8327 6.10977 19.125 6.7831 19.2095 7.73414C19.2229 7.88476 19.3491 8.00017 19.5003 8C19.6515 7.99983 19.7775 7.88413 19.7906 7.73349C19.8716 6.79809 20.1636 6.11059 20.6371 5.6371C21.1106 5.16361 21.7981 4.87155 22.7335 4.79058C22.8841 4.77754 22.9998 4.65154 23 4.50033C23.0002 4.34912 22.8848 4.22286 22.7341 4.20948C21.7831 4.125 21.1098 3.83266 20.6471 3.36151C20.1827 2.88857 19.8965 2.20078 19.7898 1.25884Z" fill="currentColor"/>`;
+/** @private */
+IconAi._name = "ai";
+/** @private */
+IconAi._width = 24;
+/** @private */
+IconAi._height = 24;
+/** @private */
+IconAi._viewBox = "0 0 24 24";
+IconAi = __decorateClass([
+  gdsCustomElement("gds-icon-ai")
+], IconAi);
+export {
+  IconAi
+};

package/components/icon/icons/ai.d.ts

@@ -0,0 +1,2 @@
+import { IconAi } from './ai.component';
+export { IconAi };

package/components/icon/icons/ai.js

@@ -0,0 +1,6 @@
+import "../../../chunks/chunk.QTSIPXV3.js";
+import { IconAi } from "./ai.component.js";
+IconAi.define();
+export {
+  IconAi
+};

package/components/icon/icons/airplane-up.component.d.ts

@@ -9,4 +9,10 @@ export declare class IconAirplaneUp extends GdsIcon {
     static _solidSVG: string;
     /** @private */
     static _name: string;
+    /** @private */
+    static _width: number;
+    /** @private */
+    static _height: number;
+    /** @private */
+    static _viewBox: string;
 }

package/components/icon/icons/airplane-up.component.js

@@ -11,6 +11,12 @@ IconAirplaneUp._regularSVG = `<path d="M4.15869 6.39304L1.75 7.28394L4.11619 10.
 IconAirplaneUp._solidSVG = `<path d="M18.0799 4.11251C17.5868 4.0224 17.0804 4.0673 16.6095 4.24666C15.0299 4.84827 10.2771 6.65651 8.26179 7.40193C7.90222 7.53492 7.50317 7.49913 7.17102 7.30272L4.54044 5.74721C4.34608 5.63229 4.11029 5.61104 3.89852 5.68937L1.48983 6.58027C1.27478 6.65981 1.10793 6.83335 1.0369 7.05136C0.965869 7.26937 0.998466 7.50789 1.12539 7.69885L3.24376 10.886L2.83814 11.6471C2.73417 11.8421 2.72155 12.0731 2.80365 12.2784L3.07547 12.9579C3.63163 14.3483 5.19803 15.0381 6.5992 14.5097L9.36931 13.465L9.65651 15.8592C9.68386 16.0871 9.81414 16.29 10.0101 16.4098C10.206 16.5295 10.446 16.5529 10.6613 16.4733L13.5518 15.4042C13.7289 15.3387 13.8748 15.2087 13.9603 15.0403L16.0409 10.9426L20.7606 9.05235C21.6602 8.69204 22.25 7.8205 22.25 6.8514C22.25 5.70636 21.4316 4.72493 20.3053 4.51911L18.0799 4.11251Z" fill="currentColor"/><path d="M2.75 18.4998C2.33579 18.4998 2 18.8356 2 19.2498C2 19.664 2.33579 19.9998 2.75 19.9998H21.25C21.6642 19.9998 22 19.664 22 19.2498C22 18.8356 21.6642 18.4998 21.25 18.4998H2.75Z" fill="currentColor"/>`;
 /** @private */
 IconAirplaneUp._name = "airplane-up";
+/** @private */
+IconAirplaneUp._width = 24;
+/** @private */
+IconAirplaneUp._height = 24;
+/** @private */
+IconAirplaneUp._viewBox = "0 0 24 24";
 IconAirplaneUp = __decorateClass([
   gdsCustomElement("gds-icon-airplane-up")
 ], IconAirplaneUp);

package/components/icon/icons/archive.component.d.ts

@@ -9,4 +9,10 @@ export declare class IconArchive extends GdsIcon {
     static _solidSVG: string;
     /** @private */
     static _name: string;
+    /** @private */
+    static _width: number;
+    /** @private */
+    static _height: number;
+    /** @private */
+    static _viewBox: string;
 }

package/components/icon/icons/archive.component.js

@@ -11,6 +11,12 @@ IconArchive._regularSVG = `<path d="M20.25 7.75H21C21 7.33579 20.6642 7 20.25 7V
 IconArchive._solidSVG = `<path d="M2.75 3C2.33579 3 2 3.33579 2 3.75V6.25C2 6.66421 2.33579 7 2.75 7H21.25C21.6642 7 22 6.66421 22 6.25V3.75C22 3.33579 21.6642 3 21.25 3H2.75Z" fill="currentColor"/><path fill-rule="evenodd" clip-rule="evenodd" d="M3 20.25V8.5H21V20.25C21 20.6642 20.6642 21 20.25 21H3.75C3.33579 21 3 20.6642 3 20.25ZM10 11C9.58579 11 9.25 11.3358 9.25 11.75C9.25 12.1642 9.58579 12.5 10 12.5H14C14.4142 12.5 14.75 12.1642 14.75 11.75C14.75 11.3358 14.4142 11 14 11H10Z" fill="currentColor"/>`;
 /** @private */
 IconArchive._name = "archive";
+/** @private */
+IconArchive._width = 24;
+/** @private */
+IconArchive._height = 24;
+/** @private */
+IconArchive._viewBox = "0 0 24 24";
 IconArchive = __decorateClass([
   gdsCustomElement("gds-icon-archive")
 ], IconArchive);

package/components/icon/icons/arrow-bottom-top.component.d.ts

@@ -0,0 +1,18 @@
+import { GdsIcon } from '../icon';
+/**
+ * @element gds-icon-arrow-bottom-top
+ */
+export declare class IconArrowBottomTop extends GdsIcon {
+    /** @private */
+    static _regularSVG: string;
+    /** @private */
+    static _solidSVG: string;
+    /** @private */
+    static _name: string;
+    /** @private */
+    static _width: number;
+    /** @private */
+    static _height: number;
+    /** @private */
+    static _viewBox: string;
+}

package/components/icon/icons/arrow-bottom-top.component.js

@@ -0,0 +1,25 @@
+import {
+  __decorateClass
+} from "../../../chunks/chunk.QTSIPXV3.js";
+import { gdsCustomElement } from "../../../scoping.js";
+import { GdsIcon } from "../icon.js";
+let IconArrowBottomTop = class extends GdsIcon {
+};
+/** @private */
+IconArrowBottomTop._regularSVG = `<path fill-rule="evenodd" clip-rule="evenodd" d="M7.25 3C7.66421 3 8 3.33579 8 3.75V18.4393L10.7197 15.7197C11.0126 15.4268 11.4874 15.4268 11.7803 15.7197C12.0732 16.0126 12.0732 16.4874 11.7803 16.7803L7.78033 20.7803C7.48744 21.0732 7.01256 21.0732 6.71967 20.7803L2.71967 16.7803C2.42678 16.4874 2.42678 16.0126 2.71967 15.7197C3.01256 15.4268 3.48744 15.4268 3.78033 15.7197L6.5 18.4393V3.75C6.5 3.33579 6.83579 3 7.25 3ZM16.2197 3.21967C16.5126 2.92678 16.9874 2.92678 17.2803 3.21967L21.2803 7.21967C21.5732 7.51256 21.5732 7.98744 21.2803 8.28033C20.9874 8.57322 20.5126 8.57322 20.2197 8.28033L17.5 5.56066V20.25C17.5 20.6642 17.1642 21 16.75 21C16.3358 21 16 20.6642 16 20.25V5.56066L13.2803 8.28033C12.9874 8.57322 12.5126 8.57322 12.2197 8.28033C11.9268 7.98744 11.9268 7.51256 12.2197 7.21967L16.2197 3.21967Z" fill="currentColor"/>`;
+/** @private */
+IconArrowBottomTop._solidSVG = `<path fill-rule="evenodd" clip-rule="evenodd" d="M7.25 3C7.66421 3 8 3.33579 8 3.75V18.4393L10.7197 15.7197C11.0126 15.4268 11.4874 15.4268 11.7803 15.7197C12.0732 16.0126 12.0732 16.4874 11.7803 16.7803L7.78033 20.7803C7.48744 21.0732 7.01256 21.0732 6.71967 20.7803L2.71967 16.7803C2.42678 16.4874 2.42678 16.0126 2.71967 15.7197C3.01256 15.4268 3.48744 15.4268 3.78033 15.7197L6.5 18.4393V3.75C6.5 3.33579 6.83579 3 7.25 3ZM16.2197 3.21967C16.5126 2.92678 16.9874 2.92678 17.2803 3.21967L21.2803 7.21967C21.5732 7.51256 21.5732 7.98744 21.2803 8.28033C20.9874 8.57322 20.5126 8.57322 20.2197 8.28033L17.5 5.56066V20.25C17.5 20.6642 17.1642 21 16.75 21C16.3358 21 16 20.6642 16 20.25V5.56066L13.2803 8.28033C12.9874 8.57322 12.5126 8.57322 12.2197 8.28033C11.9268 7.98744 11.9268 7.51256 12.2197 7.21967L16.2197 3.21967Z" fill="currentColor"/>`;
+/** @private */
+IconArrowBottomTop._name = "arrow-bottom-top";
+/** @private */
+IconArrowBottomTop._width = 24;
+/** @private */
+IconArrowBottomTop._height = 24;
+/** @private */
+IconArrowBottomTop._viewBox = "0 0 24 24";
+IconArrowBottomTop = __decorateClass([
+  gdsCustomElement("gds-icon-arrow-bottom-top")
+], IconArrowBottomTop);
+export {
+  IconArrowBottomTop
+};

package/components/icon/icons/arrow-bottom-top.d.ts

@@ -0,0 +1,2 @@
+import { IconArrowBottomTop } from './arrow-bottom-top.component';
+export { IconArrowBottomTop };

package/components/icon/icons/arrow-bottom-top.js

@@ -0,0 +1,6 @@
+import "../../../chunks/chunk.QTSIPXV3.js";
+import { IconArrowBottomTop } from "./arrow-bottom-top.component.js";
+IconArrowBottomTop.define();
+export {
+  IconArrowBottomTop
+};

package/components/icon/icons/arrow-box-left.component.d.ts

@@ -9,4 +9,10 @@ export declare class IconArrowBoxLeft extends GdsIcon {
     static _solidSVG: string;
     /** @private */
     static _name: string;
+    /** @private */
+    static _width: number;
+    /** @private */
+    static _height: number;
+    /** @private */
+    static _viewBox: string;
 }

package/components/icon/icons/arrow-box-left.component.js

@@ -11,6 +11,12 @@ IconArrowBoxLeft._regularSVG = `<path d="M20.25 12L9 12M20.25 12L15.75 16.5M20.2
 IconArrowBoxLeft._solidSVG = `<path fill-rule="evenodd" clip-rule="evenodd" d="M3.21967 3.21967C3.36032 3.07902 3.55109 3 3.75 3L11.25 3C11.6642 3 12 3.33579 12 3.75C12 4.16421 11.6642 4.5 11.25 4.5L4.5 4.5L4.5 19.5H11.25C11.6642 19.5 12 19.8358 12 20.25C12 20.6642 11.6642 21 11.25 21H3.75C3.55109 21 3.36032 20.921 3.21967 20.7803C3.07902 20.6397 3 20.4489 3 20.25L3 3.75C3 3.55109 3.07902 3.36032 3.21967 3.21967ZM15.2197 6.96967C15.5126 6.67678 15.9874 6.67678 16.2803 6.96967L20.7803 11.4697C21.0732 11.7626 21.0732 12.2374 20.7803 12.5303L16.2803 17.0303C15.9874 17.3232 15.5126 17.3232 15.2197 17.0303C14.9268 16.7374 14.9268 16.2626 15.2197 15.9697L18.4393 12.75L9 12.75C8.58579 12.75 8.25 12.4142 8.25 12C8.25 11.5858 8.58579 11.25 9 11.25L18.4393 11.25L15.2197 8.03033C14.9268 7.73744 14.9268 7.26256 15.2197 6.96967Z" fill="currentColor"/>`;
 /** @private */
 IconArrowBoxLeft._name = "arrow-box-left";
+/** @private */
+IconArrowBoxLeft._width = 24;
+/** @private */
+IconArrowBoxLeft._height = 24;
+/** @private */
+IconArrowBoxLeft._viewBox = "0 0 24 24";
 IconArrowBoxLeft = __decorateClass([
   gdsCustomElement("gds-icon-arrow-box-left")
 ], IconArrowBoxLeft);

package/components/icon/icons/arrow-box-right.component.d.ts

@@ -9,4 +9,10 @@ export declare class IconArrowBoxRight extends GdsIcon {
     static _solidSVG: string;
     /** @private */
     static _name: string;
+    /** @private */
+    static _width: number;
+    /** @private */
+    static _height: number;
+    /** @private */
+    static _viewBox: string;
 }

package/components/icon/icons/arrow-box-right.component.js

@@ -11,6 +11,12 @@ IconArrowBoxRight._regularSVG = `<path d="M14.75 3.75L20.25 3.75V20.25H14.75M15
 IconArrowBoxRight._solidSVG = `<path fill-rule="evenodd" clip-rule="evenodd" d="M19.5 4.5L14.75 4.5C14.3358 4.5 14 4.16421 14 3.75C14 3.33579 14.3358 3 14.75 3L20.25 3C20.4489 3 20.6397 3.07902 20.7803 3.21967C20.921 3.36032 21 3.55109 21 3.75V20.25C21 20.6642 20.6642 21 20.25 21H14.75C14.3358 21 14 20.6642 14 20.25C14 19.8358 14.3358 19.5 14.75 19.5H19.5V4.5ZM10.9697 7.96967C11.2626 7.67678 11.7374 7.67678 12.0303 7.96967L15.5303 11.4697C15.671 11.6103 15.75 11.8011 15.75 12C15.75 12.1989 15.671 12.3897 15.5303 12.5303L12.0303 16.0303C11.7374 16.3232 11.2626 16.3232 10.9697 16.0303C10.6768 15.7374 10.6768 15.2626 10.9697 14.9697L13.1893 12.75L3.75 12.75C3.33579 12.75 3 12.4142 3 12C3 11.5858 3.33579 11.25 3.75 11.25L13.1893 11.25L10.9697 9.03033C10.6768 8.73744 10.6768 8.26257 10.9697 7.96967Z" fill="currentColor"/>`;
 /** @private */
 IconArrowBoxRight._name = "arrow-box-right";
+/** @private */
+IconArrowBoxRight._width = 24;
+/** @private */
+IconArrowBoxRight._height = 24;
+/** @private */
+IconArrowBoxRight._viewBox = "0 0 24 24";
 IconArrowBoxRight = __decorateClass([
   gdsCustomElement("gds-icon-arrow-box-right")
 ], IconArrowBoxRight);

package/components/icon/icons/arrow-down.component.d.ts

@@ -9,4 +9,10 @@ export declare class IconArrowDown extends GdsIcon {
     static _solidSVG: string;
     /** @private */
     static _name: string;
+    /** @private */
+    static _width: number;
+    /** @private */
+    static _height: number;
+    /** @private */
+    static _viewBox: string;
 }

package/components/icon/icons/arrow-down.component.js

@@ -11,6 +11,12 @@ IconArrowDown._regularSVG = `<path d="M18.25 14L12 20.25L5.75 14M12 19.5V3.75" s
 IconArrowDown._solidSVG = `<path fill-rule="evenodd" clip-rule="evenodd" d="M12 21C11.6685 21 11.3506 20.8683 11.1161 20.6339L5.36612 14.8839C4.87796 14.3957 4.87796 13.6043 5.36612 13.1161C5.85427 12.628 6.64573 12.628 7.13388 13.1161L10.75 16.7322V4.25C10.75 3.55964 11.3097 3 12 3C12.6904 3 13.25 3.55964 13.25 4.25V16.7322L16.8661 13.1161C17.3543 12.628 18.1457 12.628 18.6339 13.1161C19.122 13.6043 19.122 14.3957 18.6339 14.8839L12.8839 20.6339C12.6495 20.8683 12.3315 21 12 21Z" fill="currentColor"/>`;
 /** @private */
 IconArrowDown._name = "arrow-down";
+/** @private */
+IconArrowDown._width = 24;
+/** @private */
+IconArrowDown._height = 24;
+/** @private */
+IconArrowDown._viewBox = "0 0 24 24";
 IconArrowDown = __decorateClass([
   gdsCustomElement("gds-icon-arrow-down")
 ], IconArrowDown);

package/components/icon/icons/arrow-inbox.component.d.ts

@@ -9,4 +9,10 @@ export declare class IconArrowInbox extends GdsIcon {
     static _solidSVG: string;
     /** @private */
     static _name: string;
+    /** @private */
+    static _width: number;
+    /** @private */
+    static _height: number;
+    /** @private */
+    static _viewBox: string;
 }

package/components/icon/icons/arrow-inbox.component.js

@@ -11,6 +11,12 @@ IconArrowInbox._regularSVG = `<path d="M20.25 14.75V20.25H3.75V14.75M12 15V3.75M
 IconArrowInbox._solidSVG = `<path fill-rule="evenodd" clip-rule="evenodd" d="M3.75 14C4.16421 14 4.5 14.3358 4.5 14.75V19.5H19.5V14.75C19.5 14.3358 19.8358 14 20.25 14C20.6642 14 21 14.3358 21 14.75V20.25C21 20.6642 20.6642 21 20.25 21H3.75C3.33579 21 3 20.6642 3 20.25V14.75C3 14.3358 3.33579 14 3.75 14Z" fill="currentColor"/><path fill-rule="evenodd" clip-rule="evenodd" d="M12 15.75C12.1989 15.75 12.3897 15.671 12.5303 15.5303L16.0303 12.0303C16.3232 11.7374 16.3232 11.2626 16.0303 10.9697C15.7374 10.6768 15.2626 10.6768 14.9697 10.9697L12.75 13.1893V3.75C12.75 3.33579 12.4142 3 12 3C11.5858 3 11.25 3.33579 11.25 3.75V13.1893L9.03033 10.9697C8.73744 10.6768 8.26256 10.6768 7.96967 10.9697C7.67678 11.2626 7.67678 11.7374 7.96967 12.0303L11.4697 15.5303C11.6103 15.671 11.8011 15.75 12 15.75Z" fill="currentColor"/>`;
 /** @private */
 IconArrowInbox._name = "arrow-inbox";
+/** @private */
+IconArrowInbox._width = 24;
+/** @private */
+IconArrowInbox._height = 24;
+/** @private */
+IconArrowInbox._viewBox = "0 0 24 24";
 IconArrowInbox = __decorateClass([
   gdsCustomElement("gds-icon-arrow-inbox")
 ], IconArrowInbox);

package/components/icon/icons/arrow-left-right.component.d.ts

@@ -9,4 +9,10 @@ export declare class IconArrowLeftRight extends GdsIcon {
     static _solidSVG: string;
     /** @private */
     static _name: string;
+    /** @private */
+    static _width: number;
+    /** @private */
+    static _height: number;
+    /** @private */
+    static _viewBox: string;
 }

package/components/icon/icons/arrow-left-right.component.js

@@ -11,6 +11,12 @@ IconArrowLeftRight._regularSVG = `<path d="M7.75 20.75L3.75 16.75L7.75 12.75M16.
 IconArrowLeftRight._solidSVG = `<path fill-rule="evenodd" clip-rule="evenodd" d="M15.7197 2.71967C16.0126 2.42678 16.4874 2.42678 16.7803 2.71967L20.7803 6.71967C21.0732 7.01256 21.0732 7.48744 20.7803 7.78033L16.7803 11.7803C16.4874 12.0732 16.0126 12.0732 15.7197 11.7803C15.4268 11.4874 15.4268 11.0126 15.7197 10.7197L18.4393 8H3.75C3.33579 8 3 7.66421 3 7.25C3 6.83579 3.33579 6.5 3.75 6.5H18.4393L15.7197 3.78033C15.4268 3.48744 15.4268 3.01256 15.7197 2.71967ZM8.28033 12.2197C8.57322 12.5126 8.57322 12.9874 8.28033 13.2803L5.56066 16H20.25C20.6642 16 21 16.3358 21 16.75C21 17.1642 20.6642 17.5 20.25 17.5H5.56066L8.28033 20.2197C8.57322 20.5126 8.57322 20.9874 8.28033 21.2803C7.98744 21.5732 7.51256 21.5732 7.21967 21.2803L3.21967 17.2803C2.92678 16.9874 2.92678 16.5126 3.21967 16.2197L7.21967 12.2197C7.51256 11.9268 7.98744 11.9268 8.28033 12.2197Z" fill="currentColor"/>`;
 /** @private */
 IconArrowLeftRight._name = "arrow-left-right";
+/** @private */
+IconArrowLeftRight._width = 24;
+/** @private */
+IconArrowLeftRight._height = 24;
+/** @private */
+IconArrowLeftRight._viewBox = "0 0 24 24";
 IconArrowLeftRight = __decorateClass([
   gdsCustomElement("gds-icon-arrow-left-right")
 ], IconArrowLeftRight);

package/components/icon/icons/arrow-left.component.d.ts

@@ -9,4 +9,10 @@ export declare class IconArrowLeft extends GdsIcon {
     static _solidSVG: string;
     /** @private */
     static _name: string;
+    /** @private */
+    static _width: number;
+    /** @private */
+    static _height: number;
+    /** @private */
+    static _viewBox: string;
 }

package/components/icon/icons/arrow-left.component.js

@@ -11,6 +11,12 @@ IconArrowLeft._regularSVG = `<path d="M10 5.75L3.75 12L10 18.25M4.5 12H20.25" st
 IconArrowLeft._solidSVG = `<path fill-rule="evenodd" clip-rule="evenodd" d="M10.8839 18.6339C10.3957 19.122 9.60427 19.122 9.11612 18.6339L3.36612 12.8839C3.1317 12.6495 3 12.3315 3 12C3 11.6685 3.13169 11.3506 3.36612 11.1161L9.11612 5.36612C9.60427 4.87796 10.3957 4.87796 10.8839 5.36612C11.372 5.85427 11.372 6.64573 10.8839 7.13388L7.26776 10.75H19.75C20.4404 10.75 21 11.3097 21 12C21 12.6904 20.4404 13.25 19.75 13.25H7.26777L10.8839 16.8661C11.372 17.3543 11.372 18.1457 10.8839 18.6339Z" fill="currentColor"/>`;
 /** @private */
 IconArrowLeft._name = "arrow-left";
+/** @private */
+IconArrowLeft._width = 24;
+/** @private */
+IconArrowLeft._height = 24;
+/** @private */
+IconArrowLeft._viewBox = "0 0 24 24";
 IconArrowLeft = __decorateClass([
   gdsCustomElement("gds-icon-arrow-left")
 ], IconArrowLeft);

package/components/icon/icons/arrow-out-of-box.component.d.ts

@@ -9,4 +9,10 @@ export declare class IconArrowOutOfBox extends GdsIcon {
     static _solidSVG: string;
     /** @private */
     static _name: string;
+    /** @private */
+    static _width: number;
+    /** @private */
+    static _height: number;
+    /** @private */
+    static _viewBox: string;
 }

package/components/icon/icons/arrow-out-of-box.component.js

@@ -11,6 +11,12 @@ IconArrowOutOfBox._regularSVG = `<path d="M12 3.75V15M12 3.75L16.5 8.25M12 3.75L
 IconArrowOutOfBox._solidSVG = `<path fill-rule="evenodd" clip-rule="evenodd" d="M12 3C12.1989 3 12.3897 3.07902 12.5303 3.21967L17.0303 7.71967C17.3232 8.01256 17.3232 8.48744 17.0303 8.78033C16.7374 9.07322 16.2626 9.07322 15.9697 8.78033L12.75 5.56066V15C12.75 15.4142 12.4142 15.75 12 15.75C11.5858 15.75 11.25 15.4142 11.25 15V5.56066L8.03033 8.78033C7.73744 9.07322 7.26256 9.07322 6.96967 8.78033C6.67678 8.48744 6.67678 8.01256 6.96967 7.71967L11.4697 3.21967C11.6103 3.07902 11.8011 3 12 3Z" fill="currentColor"/><path fill-rule="evenodd" clip-rule="evenodd" d="M3.75 12C4.16421 12 4.5 12.3358 4.5 12.75V19.5H19.5V12.75C19.5 12.3358 19.8358 12 20.25 12C20.6642 12 21 12.3358 21 12.75V20.25C21 20.6642 20.6642 21 20.25 21H3.75C3.33579 21 3 20.6642 3 20.25V12.75C3 12.3358 3.33579 12 3.75 12Z" fill="currentColor"/>`;
 /** @private */
 IconArrowOutOfBox._name = "arrow-out-of-box";
+/** @private */
+IconArrowOutOfBox._width = 24;
+/** @private */
+IconArrowOutOfBox._height = 24;
+/** @private */
+IconArrowOutOfBox._viewBox = "0 0 24 24";
 IconArrowOutOfBox = __decorateClass([
   gdsCustomElement("gds-icon-arrow-out-of-box")
 ], IconArrowOutOfBox);

package/components/icon/icons/arrow-right-circle.component.d.ts

@@ -9,4 +9,10 @@ export declare class IconArrowRightCircle extends GdsIcon {
     static _solidSVG: string;
     /** @private */
     static _name: string;
+    /** @private */
+    static _width: number;
+    /** @private */
+    static _height: number;
+    /** @private */
+    static _viewBox: string;
 }

package/components/icon/icons/arrow-right-circle.component.js

@@ -11,6 +11,12 @@ IconArrowRightCircle._regularSVG = `<path d="M13 8.75L16.25 12L13 15.25M7.75 12H
 IconArrowRightCircle._solidSVG = `<path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2ZM13.5303 8.21967L16.7803 11.4697C17.0732 11.7626 17.0732 12.2374 16.7803 12.5303L13.5303 15.7803C13.2374 16.0732 12.7626 16.0732 12.4697 15.7803C12.1768 15.4874 12.1768 15.0126 12.4697 14.7197L14.4393 12.75H7.75C7.33579 12.75 7 12.4142 7 12C7 11.5858 7.33579 11.25 7.75 11.25H14.4393L12.4697 9.28033C12.1768 8.98744 12.1768 8.51256 12.4697 8.21967C12.7626 7.92678 13.2374 7.92678 13.5303 8.21967Z" fill="currentColor"/>`;
 /** @private */
 IconArrowRightCircle._name = "arrow-right-circle";
+/** @private */
+IconArrowRightCircle._width = 24;
+/** @private */
+IconArrowRightCircle._height = 24;
+/** @private */
+IconArrowRightCircle._viewBox = "0 0 24 24";
 IconArrowRightCircle = __decorateClass([
   gdsCustomElement("gds-icon-arrow-right-circle")
 ], IconArrowRightCircle);

package/components/icon/icons/arrow-right-down-circle.component.d.ts

@@ -9,4 +9,10 @@ export declare class IconArrowRightDownCircle extends GdsIcon {
     static _solidSVG: string;
     /** @private */
     static _name: string;
+    /** @private */
+    static _width: number;
+    /** @private */
+    static _height: number;
+    /** @private */
+    static _viewBox: string;
 }

package/components/icon/icons/arrow-right-down-circle.component.js

@@ -11,6 +11,12 @@ IconArrowRightDownCircle._regularSVG = `<path d="M8.75 8.75L14.5694 14.5694M15.2
 IconArrowRightDownCircle._solidSVG = `<path fill-rule="evenodd" clip-rule="evenodd" d="M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12ZM16 15.25C16 15.6642 15.6642 16 15.25 16H9.75C9.33579 16 9 15.6642 9 15.25C9 14.8358 9.33579 14.5 9.75 14.5H13.4393L8.21967 9.28033C7.92678 8.98744 7.92678 8.51256 8.21967 8.21967C8.51256 7.92678 8.98744 7.92678 9.28033 8.21967L14.5 13.4393V9.75C14.5 9.33579 14.8358 9 15.25 9C15.6642 9 16 9.33579 16 9.75V15.25Z" fill="currentColor"/>`;
 /** @private */
 IconArrowRightDownCircle._name = "arrow-right-down-circle";
+/** @private */
+IconArrowRightDownCircle._width = 24;
+/** @private */
+IconArrowRightDownCircle._height = 24;
+/** @private */
+IconArrowRightDownCircle._viewBox = "0 0 24 24";
 IconArrowRightDownCircle = __decorateClass([
   gdsCustomElement("gds-icon-arrow-right-down-circle")
 ], IconArrowRightDownCircle);

package/components/icon/icons/arrow-right-up-circle.component.d.ts

@@ -9,4 +9,10 @@ export declare class IconArrowRightUpCircle extends GdsIcon {
     static _solidSVG: string;
     /** @private */
     static _name: string;
+    /** @private */
+    static _width: number;
+    /** @private */
+    static _height: number;
+    /** @private */
+    static _viewBox: string;
 }

package/components/icon/icons/arrow-right-up-circle.component.js

@@ -11,6 +11,12 @@ IconArrowRightUpCircle._regularSVG = `<path d="M8.75 15.25L14.5694 9.43056M15.25
 IconArrowRightUpCircle._solidSVG = `<path fill-rule="evenodd" clip-rule="evenodd" d="M22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12ZM16 8.75C16 8.33579 15.6642 8 15.25 8H9.75C9.33579 8 9 8.33579 9 8.75C9 9.16421 9.33579 9.5 9.75 9.5H13.4393L8.21967 14.7197C7.92678 15.0126 7.92678 15.4874 8.21967 15.7803C8.51256 16.0732 8.98744 16.0732 9.28033 15.7803L14.5 10.5607V14.25C14.5 14.6642 14.8358 15 15.25 15C15.6642 15 16 14.6642 16 14.25V8.75Z" fill="currentColor"/>`;
 /** @private */
 IconArrowRightUpCircle._name = "arrow-right-up-circle";
+/** @private */
+IconArrowRightUpCircle._width = 24;
+/** @private */
+IconArrowRightUpCircle._height = 24;
+/** @private */
+IconArrowRightUpCircle._viewBox = "0 0 24 24";
 IconArrowRightUpCircle = __decorateClass([
   gdsCustomElement("gds-icon-arrow-right-up-circle")
 ], IconArrowRightUpCircle);