@platformscode/core 0.0.22 → 0.0.24

package/dist/collection/nds-components/dga-header/dga-header-menu-item.js

@@ -24,13 +24,13 @@ export class DgaNavHeaderLink {
         });
     }
     render() {
-        return (h("li", { key: 'b6f4f45de4176db4418568a4d74b667b53bc2746', onMouseEnter: () => {
+        return (h("li", { key: '26d356f14b5e2bd3d4f6396d442d3ef8ee049562', onMouseEnter: () => {
                 this.openSubMenu = true;
             }, onMouseLeave: () => {
                 this.openSubMenu = false;
             }, style: {
                 display: 'inline-block',
-            } }, h("a", { key: '1403c3ba2e7e89aa23f58b08fc3132555fdd68c2', href: "#", class: `dga-header-menu__item ${this.active ? 'dga-header-menu__item--active' : ''}`, onClick: this.handleClick }, h("span", { key: 'f499f5ea2092cadd1124a816fc6dabaabe0edcf5', class: "dga-header-menu__item-label" }, this.label), h("span", { key: '9f1227ec2ec3bdc73604cb270109c35e8f143aed', class: "dga-header-menu__item-arrow" }, h("dga-icon-v2", Object.assign({ key: '1305a3eb6f733d07c0f8e0f25f5d098167e8c617', name: this.icon }, this.iconProps)))), this.openSubMenu && h("slot", { key: '3e4c55a937a147dcd6542c79ebc6923edd41bddc', name: "dga-header-sub-menu" })));
+            } }, h("a", { key: 'f13201db0ebaa1a97904dd05f6ce898702710184', href: "#", class: `dga-header-menu__item ${this.active ? 'dga-header-menu__item--active' : ''}`, onClick: this.handleClick }, h("span", { key: 'a17a7fa1def4b841f1428827ca99e5bd65c03c0e', class: "dga-header-menu__item-label" }, this.label), h("span", { key: '791fa4797a8d23f60cb807053a34e5413acb8067', class: "dga-header-menu__item-arrow" }, h("dga-icon-v2", Object.assign({ key: '644596bb49a6a6309f6686a1af742007355aba47', name: this.icon }, this.iconProps)))), this.openSubMenu && h("slot", { key: 'adafda5e0205641c49fbb7151d6efddac0545d89', name: "dga-header-sub-menu" })));
     }
     static get is() { return "dga-header-menu-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/nds-components/dga-header/dga-header-menu.js

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 export class DgaHeaderMenu {
     render() {
-        return (h("ul", { key: '9050c3615d5c944f919c421cebb09a0a12713c86', class: "header-nav__menu" }, h("slot", { key: '42f72677bd58063523bf7ed4669273043505315e' })));
+        return (h("ul", { key: 'ec78cd04838e6bde675892ad797609c8b1b58c24', class: "header-nav__menu" }, h("slot", { key: '8d47f4e7d771abf9db735c27869e34021a99e80c' })));
     }
     static get is() { return "dga-header-menu-vv2"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/nds-components/dga-header/dga-header-sub-menu-column.js

@@ -4,7 +4,7 @@ export class DgaHeaderSubMenuColumn {
         this.label = '';
     }
     render() {
-        return (h("div", { key: '185fb82742e04fa81af9847e1810f0c16386dedc', class: "sub-menu__column" }, this.label && h("h2", { key: 'f277a5813a3f66a51c1389a19864a71202c81ea6', class: "sub-menu__column__label" }, this.label), h("slot", { key: '28962235f73de5345a2cb0624c535ef22816cd50' })));
+        return (h("div", { key: '6f8be5dcd6f1e7a28ed0b95ababd1d1d2304d8e2', class: "sub-menu__column" }, this.label && h("h2", { key: 'b37022be747055d4eb599ac63e72efb577b40691', class: "sub-menu__column__label" }, this.label), h("slot", { key: '5a0e457621efb37de8b4b188aadf099fd271b7b3' })));
     }
     static get is() { return "dga-header-sub-menu-column"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/nds-components/dga-header/dga-header-sub-menu-item.js

@@ -11,7 +11,7 @@ export class DgaHeaderSubMenuItem {
     render() {
         const backgroundClass = this.background === 'Brand' ? 'sub-menu__link--on-color' : '';
         const linkStyleClass = this.linkStyle && this.linkStyle > 0 ? (this.linkStyle === 2 ? 'sub-menu__link-icon--bg' : 'sub-menu__link-icon') : '';
-        return (h("a", { key: '8ac285a2d81a10448e8559cfb734574c92dd92b7', href: this.link, class: `sub-menu__link ${backgroundClass}` }, this.linkStyle && this.linkStyle > 0 ? h("div", { class: linkStyleClass }, this.icon && h("dga-icon-v2", Object.assign({ name: this.icon }, this.iconProps))) : null, h("dga-flex", { key: '47ff04c87f4697e8ac7e3b729f6646865de50da3', direction: 'column', spacing: 4 }, h("dga-flex", { key: '48e8d07e0533774b465f72e5985f7444807da0ab', direction: 'row', align: 'center', spacing: 8 }, h("span", { key: '136b72af3c616ef62b0296641e03f53a447615cd', class: "sub-menu__link-label" }, this.label), h("slot", { key: 'e23953da8fbc1e16874760338763c53e8bce13f8', name: "tag" })), this.helperText && h("span", { key: '671396d9ff2701ee9f9ed0122c52f81041870f4d', class: "sub-menu__link-helper" }, this.helperText))));
+        return (h("a", { key: 'd938c18f97887a76db3ddf7bd9c9cc31fd41aad5', href: this.link, class: `sub-menu__link ${backgroundClass}` }, this.linkStyle && this.linkStyle > 0 ? h("div", { class: linkStyleClass }, this.icon && h("dga-icon-v2", Object.assign({ name: this.icon }, this.iconProps))) : null, h("dga-flex", { key: '4dd00d3567d32881fce334aef0a0ec27c16c05c3', direction: 'column', spacing: 4 }, h("dga-flex", { key: '4f872760ef38b1e060cee01bfaa1fc2f5b6e4393', direction: 'row', align: 'center', spacing: 8 }, h("span", { key: 'd7f1e74f923a0f33347c7ca8adeabaa40b1855f0', class: "sub-menu__link-label" }, this.label), h("slot", { key: '949fcf5e555fe24f9f7154bb5d89818e29016fc3', name: "tag" })), this.helperText && h("span", { key: 'e4c2e76a1d9977a71ad79affe48adc0679ae71a9', class: "sub-menu__link-helper" }, this.helperText))));
     }
     static get is() { return "dga-header-sub-menu-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/nds-components/dga-header/dga-header-sub-menu.js

@@ -20,7 +20,7 @@ export class DgaHeaderSubMenu {
     }
     render() {
         const fullWidthClass = this.subMenuFullWidth ? 'header__sub-menu--full' : '';
-        return (h("div", { key: '35a7ed5e0681ddabe6a9511cab4b0a7ab03da927', class: `header__sub-menu header__sub-menu--bg-${this.background} ${fullWidthClass}`, ref: el => (this.submenu = el) }, h("div", { key: 'd136624f3725c6fcfff4087fba3bf1d63018b5cd', class: "sub-menu__container" }, h("slot", { key: 'e56fe4512461f6e551e194775fdbefbf53e223de' }))));
+        return (h("div", { key: '1f944e8529cda2e0efc9dc3ea87e59dad49ae60d', class: `header__sub-menu header__sub-menu--bg-${this.background} ${fullWidthClass}`, ref: el => (this.submenu = el) }, h("div", { key: '29529468d0d08e47b8b787e755a291285e7fe1da', class: "sub-menu__container" }, h("slot", { key: '8341ab7368201a46b3ecb7a593c6fc46bd73fa3b' }))));
     }
     static get is() { return "dga-header-sub-menu"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/nds-components/dga-header/dga-header.js

@@ -6,7 +6,7 @@ export class DgaHeader {
         this.sticky = false;
     }
     render() {
-        return (h("header", { key: '73f9f8c5d7d94ca72cb5d12c4a0fd7f3e5470a81', class: `header ${this.divider ? 'header--divider' : ''} ${this.sticky ? 'header--sticky' : ''}` }, h("nav", { key: 'd51254f4a83c9dca3afc3269275a64eb652ae28d', class: `header-nav--${this.fullWidth ? 'full' : 'fixed'}` }, h("slot", { key: 'b0e34e31ce476d6e895950c32b3614229a755098' }))));
+        return (h("header", { key: '43c51bf98f02e7d84e9d4a3b6c53ba8efda02eb3', class: `header ${this.divider ? 'header--divider' : ''} ${this.sticky ? 'header--sticky' : ''}` }, h("nav", { key: 'c66a811c9e57a4eb642fafbc0bacdb217dcafa3a', class: `header-nav--${this.fullWidth ? 'full' : 'fixed'}` }, h("slot", { key: '49b541d36ca9ba5fead69b6f8d19c755784f40b7' }))));
     }
     static get is() { return "dga-header-vv2"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/nds-components/dga-header/dga-logo-placeholder.js

@@ -17,9 +17,9 @@ export class DgaLogoPlaceholder {
     // }
     render() {
         // const logoSize = this.getSize();
-        return (h(Host, { key: 'b5b3a29f53aa81dbef8ec8c0e7cdfa9b7b4f42f1' }, h("div", { key: '8f8f1c4bc3b157f19172cd23919dd7fec8c3af77', class: `logo-wrapper logo-placeholder--${this.size} logo-placeholder--${this.layout}` }, h("img", { key: '44dda850771b00a5e7fcf9baff51325196946e01', src: this.src, alt: "Platform Logo",
+        return (h(Host, { key: '3caa832d594ab7d397f4077d1753dc906c170460' }, h("div", { key: '0303520e1c1db41ab17dc22587bf11ca2cf256e3', class: `logo-wrapper logo-placeholder--${this.size} logo-placeholder--${this.layout}` }, h("img", { key: '7037750baedf36862a0c1992aa9b0f2b7f122fd1', src: this.src, alt: "Platform Logo",
             // style={{ width: logoSize, height: logoSize }}
-            class: "logo-image" }), h("span", { key: '09433c1bdc2234eac983206f16bd590da2b2b6bd', class: "logo-text" }, this.text))));
+            class: "logo-image" }), h("span", { key: '46c6328a34be8ece22fb70323377ed0835dd38c5', class: "logo-text" }, this.text))));
     }
     static get is() { return "dga-logo-placeholder"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/nds-components/nds-accordion/nds-accordion-usage.js

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 export class NdsAccordionUsage {
     render() {
-        return (h("div", { key: 'ab25e1d6f5649c5f8ac39f390ee85578df36e6a6' }, h("h1", { key: '745b8960c2af262a5ae6d1eb91fce1fc7b29da67' }, "Accordion Example"), h("div", { key: '675045a0844aa913b8706688500f2188bef283f5', style: { padding: '50px', display: 'flex', gap: '20px' } }, h("div", { key: 'e944285e93e421d45697964e0eec8525a3a7d4cc', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }, h("nds-accordion", { key: '70e34b7cf64f468684d56e1b2dd136b3a60a5cdb', title: "Accordion Title", size: "lg", content: "The accordion component delivers large amounts of content in a small space through progressive disclosure. The user gets key details about the underlying content and can choose to expand that content within the constraints of the accordion." }), h("nds-accordion", { key: '33484d286d2a8d203383771b1ffe36c3de8e1283', title: "Accordion Title", size: "lg", content: "The accordion component delivers large amounts of content in a small space through progressive disclosure. The user gets key details about the underlying content and can choose to expand that content within the constraints of the accordion." }, h("div", { key: 'ae1e2aba2ebeb3482a32dfd52b4fb6a4d5bede22' }, h("p", { key: '388e63707941cc2436e39ce84e10e5ea90e70d8d' }, "This is a ", h("span", { key: '9596e5d3f54fd95f51d5924da9a9a8637a460c72', style: { color: "red" } }, "custom"), " content inside the accordion."), h("p", { key: '21e1d36a30e2c6472f012aec617c66a304748f41' }, "You can put any React nodes here.")))))));
+        return (h("div", { key: '6ea4bd1b271e86816f54296e6d140bca4a5ab247' }, h("h1", { key: '787a9a5c6f521ba20976e7faee182dc93897a66d' }, "Accordion Example"), h("div", { key: '5b847d2a36be99056788fb441eb086891f4c5204', style: { padding: '50px', display: 'flex', gap: '20px' } }, h("div", { key: '236a7f25c6dfc10d6c2a6ef173d2c01e7a7d6e98', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }, h("nds-accordion", { key: 'f43dfb46c45b2078c892e8765e0e8a65f8ad05ff', title: "Accordion Title", size: "lg", content: "The accordion component delivers large amounts of content in a small space through progressive disclosure. The user gets key details about the underlying content and can choose to expand that content within the constraints of the accordion." }), h("nds-accordion", { key: '3167fabb8db6be72757060a46be72f046f4fd278', title: "Accordion Title", size: "lg", content: "The accordion component delivers large amounts of content in a small space through progressive disclosure. The user gets key details about the underlying content and can choose to expand that content within the constraints of the accordion." }, h("div", { key: 'b252384c4efe455a3b80641e63be57b1cfccf7ab' }, h("p", { key: '1f36a43cc37e7e37233d3b8ebfbb5192e38c557a' }, "This is a ", h("span", { key: '164a6c127137721d6fcac6f0047e172297801a5f', style: { color: "red" } }, "custom"), " content inside the accordion."), h("p", { key: 'f08522689cb7e5c375486386044e5e734e79de2e' }, "You can put any React nodes here.")))))));
     }
     static get is() { return "nds-accordion-usage"; }
 }

package/dist/collection/nds-components/nds-accordion/nds-accordion.js

@@ -73,10 +73,10 @@ export class NdsAccordion {
         (_a = this.sxStyleManager) === null || _a === void 0 ? void 0 : _a.cleanup();
     }
     render() {
-        return (h(Host, { key: '73753bd95e72b4864ae1cba2c61ce5ecb8fe9b62', id: this.componentId, style: this.rootStyles }, h("div", { key: 'e6eac6e0514ed6ad1de2197817996a3b1d8958ff', class: `dga-accordion-item dga-accordion-item--${this.size} 
+        return (h(Host, { key: '5af35e4e72f1d0b7930c29ef6c81734c042d4b32', id: this.componentId, style: this.rootStyles }, h("div", { key: 'fdcf061d09c5f306f0c289b8a64290037082d829', class: `dga-accordion-item dga-accordion-item--${this.size} 
           ${this.iconAlignment === 'leading' ? 'dga-accordion-item--icon-leading' : ''}
           ${this.flush ? 'dga-accordion-item--flush' : ''} 
-          ${this.disabled ? 'disabled' : ''} ${this.isOpen ? 'active' : ''}` }, h("a", { key: '5696133a00a9eb71e4f8b3ca3e5f77c60bc82019', href: "#", onClick: e => this.handleAccordionClick(e), onKeyDown: e => (e.code === 'Space' ? this.handleAccordionClick(e) : null), class: "dga-accordion-item__header" }, this.iconAlignment === 'leading' && (h("div", { key: 'a402f8b786ef2fe7128ead7b0cc509cbb88f2083', class: "dga-accordion-item__arrow" }, h("dga-icon-v2", { key: 'a37e486bf5d4a38b4afd6cb45fb6cb142e67798b', name: "arrow-down-01", variant: "stroke", size: 16 }))), h("div", { key: '6ab34094fe1cb3ff59f228b6ac71d2ff82eaf027', class: "dga-accordion-item__title" }, h("slot", { key: 'ed4d613bd22bd2ce9bb8d6fa86fa00f26d060d8b', name: 'title' }, this.title)), this.iconAlignment === 'trailing' && (h("div", { key: 'f63a1b1677eb7b949a094aa182230f16492a96af', class: "dga-accordion-item__arrow" }, h("dga-icon-v2", { key: 'f3818cac6c9291aadc5010a65b5d9f7a729ffeee', name: "arrow-down-01", variant: "stroke", size: 16 })))), h("div", { key: '609c9045f4dca7abd80afbe56a2fe48388bc4152', ref: el => (this.bodyElement = el), class: "dga-accordion-item__body" }, h("slot", { key: '0284df1ae3f3127b0fa2289e2160e472d30b969f', name: 'content' }, this.content)))));
+          ${this.disabled ? 'disabled' : ''} ${this.isOpen ? 'active' : ''}` }, h("a", { key: 'f7169e626c16fee078b90f0dee3231a4c45bfa49', href: "#", onClick: e => this.handleAccordionClick(e), onKeyDown: e => (e.code === 'Space' ? this.handleAccordionClick(e) : null), class: "dga-accordion-item__header" }, this.iconAlignment === 'leading' && (h("div", { key: 'bd33de90d66906b4b6e9d51193818eead669b8c6', class: "dga-accordion-item__arrow" }, h("dga-icon-v2", { key: '89dc587dc5bd17e54c04ba391319b04bbee58857', name: "arrow-down-01", variant: "stroke", size: 16 }))), h("div", { key: 'b833f42fa75a0b67c994a31b89f15187d7b14dc6', class: "dga-accordion-item__title" }, h("slot", { key: '23d47400e11272639803d995f828c9dd31fcc370', name: 'title' }, this.title)), this.iconAlignment === 'trailing' && (h("div", { key: '6f11f0d664e2ed5f0f4ede1102dcff836b29efcf', class: "dga-accordion-item__arrow" }, h("dga-icon-v2", { key: '3db679b3a89a1a7706b3f1070e1514ce64f98693', name: "arrow-down-01", variant: "stroke", size: 16 })))), h("div", { key: 'e83fe35dd8875ac1556c6495ad1268e6a930277c', ref: el => (this.bodyElement = el), class: "dga-accordion-item__body" }, h("slot", { key: '059aed0c57fce89ea3609484741ee35e315e5631', name: 'content' }, this.content)))));
     }
     static get is() { return "nds-accordion"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/nds-components/nds-avatar/nds-avatar-usage.js

@@ -4,39 +4,39 @@ export class NdsAvatarUsage {
         this.variant = 'neutral';
     }
     render() {
-        return (h("div", { key: '84da043a3133a1aedc8cd23405a77984494ed062' }, h("h1", { key: 'b96dc915aff3022d10c11f82f05792287aa7be83' }, "Avatar Example"), h("div", { key: '4590da099d71fae17397117d3d03427f371313a3', style: { padding: '50px', display: 'flex', gap: '20px' } }, h("div", { key: '16c74953d79c71ae36cac762a26fd6dc63ac55d6', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }, h("div", { key: '95bd802ce37f2cd41d96e3ef64c34cdd7b7d4394', style: { padding: "10px", display: 'flex', flexDirection: 'column', gap: '20px', backgroundColor: "black" } }, h("dga-avatar", { key: '409fe698e1904c8018759e54f4d5ab213d83be9b', size: 120, border: false, square: true, sx: {
+        return (h("div", { key: '70be9471cf8755877e509330bd3aa9163e91b86e' }, h("h1", { key: '206972fc5dded32fd35c4f5c476eb63d5626fc93' }, "Avatar Example"), h("div", { key: '96a639ef06f1ebf40d651d1e4d4ce025c5784495', style: { padding: '50px', display: 'flex', gap: '20px' } }, h("div", { key: 'addb81742d823980b68ccfd2e1ae8ecd0f1f62d4', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }, h("div", { key: 'ed38599afff3175d8ba8875f30104e99387adbd9', style: { padding: "10px", display: 'flex', flexDirection: 'column', gap: '20px', backgroundColor: "black" } }, h("dga-avatar", { key: 'ff5ebce6a437838056051d64f1186beec4544ac5', size: 120, border: false, square: true, sx: {
                 "& .dga-avatar": {
                     borderRadius: "100px"
                 }
-            } }), h("dga-avatar", { key: 'ead1f774acf348a265c71c0f30496fbfdceb72c4', size: 120, border: true, square: true })), h("dga-avatar", { key: 'ec090ff471517e599fc72b8e3f968998ad4853a5', type: "icon", size: 120, icon: {
+            } }), h("dga-avatar", { key: '4391e1d3781f9f8c86323d3668e3a98f431144fd', size: 120, border: true, square: true })), h("dga-avatar", { key: 'c189af4ad758e447ef124b2e34ae0c780274ec33', type: "icon", size: 120, icon: {
                 name: 'user',
                 variant: "stroke",
                 type: "rounded"
-            } }), h("dga-avatar", { key: 'af44655f187b8046c425cc5d0f20ebe9fd92150c', type: "icon", size: 80, icon: {
+            } }), h("dga-avatar", { key: '284c5ab5a43fe2a48334e2277b9863a22fc754d8', type: "icon", size: 80, icon: {
                 name: 'user',
                 variant: "stroke",
                 type: "rounded"
-            } }), h("dga-avatar", { key: '9f54230672e52a4253a019e5ce65f9bf76f1c62a', type: "icon", size: 68, icon: {
+            } }), h("dga-avatar", { key: '278f17ac831fa07c74c6a8e262022376f16f0421', type: "icon", size: 68, icon: {
                 name: 'user',
                 variant: "stroke",
                 type: "rounded"
-            } }), h("dga-avatar", { key: 'bf789432a2a6033e2ea52424eb8ef3e18f6a1a7a', type: "icon", size: 48, icon: {
+            } }), h("dga-avatar", { key: 'b2493aed59cace3337516cd439d98a9507f5a242', type: "icon", size: 48, icon: {
                 name: 'user',
                 variant: "stroke",
                 type: "rounded"
-            } }), h("dga-avatar", { key: 'e350d5de43065692ced31e72636aaf7e522c264f', type: "icon", size: 40, icon: {
+            } }), h("dga-avatar", { key: '1261d0d3e6c777c70b48b5e3508ec9a2bfd15ed1', type: "icon", size: 40, icon: {
                 name: 'user',
                 variant: "stroke",
                 type: "rounded"
-            } }), h("dga-avatar", { key: '6b4272747b6ec2246f710353439c93e7a575658e', type: "icon", size: 32, icon: {
+            } }), h("dga-avatar", { key: '7f615df8f589d476cfae13886e1f89deca5d8efc', type: "icon", size: 32, icon: {
                 name: 'user',
                 variant: "stroke",
                 type: "rounded"
-            } }), h("dga-avatar", { key: '120a21c3bc90804c5484de2e5e13cd816e851142', type: "icon", size: 24, icon: {
+            } }), h("dga-avatar", { key: '45ba9c964ed10b147ac7e1d20a3f31dadf711f15', type: "icon", size: 24, icon: {
                 name: 'user',
                 variant: "stroke",
                 type: "rounded"
-            } })), h("dga-avatar-group", { key: '92ea551e1fcf58441c95805cf5fdb7eb4cf78c16', stacked: true }, h("dga-avatar", { key: 'c315c4bf85f6865c140b121a5a0cd881cae2061d', type: "initials", text: 'AB', size: 40 }), h("dga-avatar", { key: '323b41a5c8fcb07f362e8d7bd941e35d362d90ad', type: "initials", text: 'CD', size: 40 }), h("dga-avatar", { key: '6e0fc7f5315c39001280e108720529ac302bd65d', type: "initials", text: 'SB', size: 40 }), h("dga-avatar", { key: '731e34114f567cde8f921ab54744b2d2b37d2172', type: "initials", text: 'WK', size: 40 }), h("dga-avatar", { key: '42e239c3885e28ccc804d726fc474871c9c1838e', type: 'initials', text: `+4`, size: 40 })), h("div", { key: 'bf1e3e1e23827b4fcd7959a3459b9f5b211f83d2', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }))));
+            } })), h("dga-avatar-group", { key: 'cd122f04cf7123eeb542afbe2c95597a6d0836ce', stacked: true }, h("dga-avatar", { key: 'cf18106b5de4df25a08af5b68f31f47e2572c1a8', type: "initials", text: 'AB', size: 40 }), h("dga-avatar", { key: 'e04105dd0d5dd810dced57bf7602162e88741dde', type: "initials", text: 'CD', size: 40 }), h("dga-avatar", { key: 'd502893109a8610369523613acdfa276f651d9ea', type: "initials", text: 'SB', size: 40 }), h("dga-avatar", { key: '1a022b3f21152acd4b572f3b5935b5f59f055692', type: "initials", text: 'WK', size: 40 }), h("dga-avatar", { key: '0060ed15ea0054d3de1987325aa44911912f532a', type: 'initials', text: `+4`, size: 40 })), h("div", { key: 'f2a7be0b74fef7aaee2df73979809904ffc9cc70', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }))));
     }
     static get is() { return "nds-avatar-usage"; }
     static get states() {

package/dist/collection/nds-components/nds-button/nds-button-usage.js

@@ -4,13 +4,13 @@ export class NdsButtonUsage {
         this.variant = 'neutral';
     }
     render() {
-        return (h("div", { key: '7393a0f6b3102a58c160d7c2a3f1fa1e94106087' }, h("h1", { key: '22f696c99bf5c4a02a8a4feae34d2aef977a28a6' }, "Button Example"), h("div", { key: 'ea829b604de6370e1c92a3fb0e70b612bd8e2b90', style: { padding: '50px', display: 'flex', gap: '20px' } }, h("div", { key: '627702436d86f38d833c9db5461812c959fd50d1', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }, h("dga-flex", { key: 'bf19ae6815e0a5adb1dba32452a5ce1bc5129f89', direction: "column", spacing: 16 }, h("dga-button-v2", { key: '050abf5004b4e8ada6c8cd55ee3c845cf77f0d20', label: "Button", variant: "primary", size: "lg" }), h("dga-button-v2", { key: '9e8e488bb749b274b06635e89d91eec40c3fb911', label: "Button", variant: "primary", size: "md" }), h("dga-button-v2", { key: '11f32f3cdbfc8b0345ca79d733d3763c69c09291', label: "Button", variant: "primary", size: "sm" }), h("dga-button-v2", { key: 'edbdef2958d53e407281eff226134544ee746d82', label: "Button", variant: "neutral", size: "lg" }), h("dga-button-v2", { key: '728d740231ca5d1965739e0ece7e44586fa7f715', label: "Button", variant: "neutral", size: "md" }), h("dga-button-v2", { key: 'ce3a583e83378fad8e9957d710673d8d6aa9602d', label: "Button", variant: "neutral", size: "sm" }), h("dga-button-v2", { key: 'c5e5186fd4a2d6bd41a42351ed3c29408577f6df', label: "Button", variant: "secondary-solid", size: "lg" }), h("dga-button-v2", { key: '7a71a881c7e28b092cba34111f4dbb1dc798769f', label: "Button", variant: "secondary-solid", size: "md" }), h("dga-button-v2", { key: '7e64949d8c00e0989932559a90c20bbcb28a6c8c', label: "Button", variant: "secondary-solid", size: "sm" }), h("dga-button-v2", { key: '7bc94c0993b8c7136b119e3cc0fe98e9988a81d2', label: "Button", variant: "primary", destructive: true, size: "lg" }), h("dga-button-v2", { key: '4fe4a10942f1ae34cb48b805f70b7ddeb71d4acc', label: "Button", variant: "primary", destructive: true, size: "md" }), h("dga-button-v2", { key: 'a15d37effa82eae80bdf73f014c974c98357742f', label: "Button", variant: "primary", destructive: true, size: "sm" })), h("dga-button-v2", { key: '40133576caea3b90ca4e676ee68d68165a4250b3', label: "Button", variant: "primary", onColor: true }, h("dga-button-leading-icon", { key: '5d36849d0bb93d51f25c115d447a052b7a792116', name: "link-square-01", size: 16, color: "red" })), h("dga-button-v2", { key: '82e5593e475f5f26f1b8db6b1c1d74de62c8d349', label: "Source code", variant: "secondary-outline", leadIcon: true, leadIconProps: { name: 'source-code', variant: 'stroke', type: 'standard' } }), h("dga-button-v2", { key: '4bc2e4248657e62e0ca1e6946c9c111237d71417',
+        return (h("div", { key: 'afe32bb2d66c3cb2d902abaa801052f341b8e728' }, h("h1", { key: 'ddb5edd70ea4b27a9de00d8fb4012890ed2d6feb' }, "Button Example"), h("div", { key: '74e1ab9bc755ca76555a55da04ab8d366d7c9a5c', style: { padding: '50px', display: 'flex', gap: '20px' } }, h("div", { key: 'e03084a00a329104824931358d9b8bf7499472ca', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }, h("dga-flex", { key: 'be8e12356ba2c33b477373267bfbe4873303c18d', direction: "column", spacing: 16 }, h("dga-button-v2", { key: '5ad8731fb0a637eaeb40c2ca0f48adf58bd6921f', label: "Button", variant: "primary", size: "lg" }), h("dga-button-v2", { key: 'f99b1ac8a66512db80e924725becfc30a92c8bd0', label: "Button", variant: "primary", size: "md" }), h("dga-button-v2", { key: '3789a22ba8578c4c4d1c75f29f714594a21652e0', label: "Button", variant: "primary", size: "sm" }), h("dga-button-v2", { key: '8c2a0e21b33fafac695cd8f06aa483ef6b0a6f64', label: "Button", variant: "neutral", size: "lg" }), h("dga-button-v2", { key: 'a8b57a6d76e7a5d97aa3d9207909aa3eb440ed61', label: "Button", variant: "neutral", size: "md" }), h("dga-button-v2", { key: '492897d009fb2e957149bac831a99f01aef58192', label: "Button", variant: "neutral", size: "sm" }), h("dga-button-v2", { key: 'baa320e0d554f1ab9af843832170b089f1d269a1', label: "Button", variant: "secondary-solid", size: "lg" }), h("dga-button-v2", { key: 'c0d239090e88f9c693cbdff400a6ee40460dcb79', label: "Button", variant: "secondary-solid", size: "md" }), h("dga-button-v2", { key: '44238f8ce73c2f8796c7ac51c2344488989f434d', label: "Button", variant: "secondary-solid", size: "sm" }), h("dga-button-v2", { key: 'ae763a99bbe6e77f7e45aa501707b4469605dbe4', label: "Button", variant: "primary", destructive: true, size: "lg" }), h("dga-button-v2", { key: '4772a2ae79cf49810b0ee41ef6d12ee48607668e', label: "Button", variant: "primary", destructive: true, size: "md" }), h("dga-button-v2", { key: '9846dc2d958502697aa140ddb6ece62f76388347', label: "Button", variant: "primary", destructive: true, size: "sm" })), h("dga-button-v2", { key: '137f9d7ea8f2022bdde84414f3863e02f39cb63d', label: "Button", variant: "primary", onColor: true }, h("dga-button-leading-icon", { key: '388d5ac26935ddc1a113c7cdec129f7845992ecd', name: "link-square-01", size: 16, color: "red" })), h("dga-button-v2", { key: 'd22cd0561c28b14b2c3fa5003832c4c0ea0cdc0b', label: "Source code", variant: "secondary-outline", leadIcon: true, leadIconProps: { name: 'source-code', variant: 'stroke', type: 'standard' } }), h("dga-button-v2", { key: '4943ead410ed2b53632471532d15ad877a251ae4',
             // className="absolute top-[50%] left-[50%] transform -translate-x-1/2 -translate-y-1/2 opacity-0 group-hover:opacity-100"
             label: "See live preview", size: "lg", variant: "secondary-outline", trailIcon: true, trailIconProps: {
                 name: 'link-square-01',
                 variant: 'stroke',
                 type: 'standard',
-            } })), h("div", { key: '701807a2c0ad0489cbe7269a995d17914cc168a0', style: { display: 'flex', flexDirection: 'column', gap: '20px', backgroundColor: '#074D31', padding: '20px' } }, h("nds-button", { key: '0211607e3fc6b8e833c2787732ff9a0e9b8086d7', label: "Button", variant: "primary-brand", size: "lg" }), h("nds-button", { key: '74ca9da2548eec187c688ef27041f818bd6792a0', label: "Button", variant: "primary-brand", size: "lg", selected: true }), h("nds-button", { key: '900f3ec85e84d1b3630550d0cd2473d309ffba31', leadingIcon: 'link-square-01', size: 'sm' }, h("dga-icon-v2", { key: '4fccb9bd41525996fccc907a8aa77c3960795eb9', slot: 'leading-icon', name: 'source-code', variant: 'stroke', type: 'rounded', size: 16, color: 'white' }))), h("dga-icon-v2", { key: '655ffbf4d097ac4182f06b98fb330204d1038228', name: 'link-square-01', variant: 'stroke', type: 'rounded', color: 'red' }), h("div", { key: 'ab4ee54edacb2bac607ead38be03a52970ae8f3c', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }))));
+            } })), h("div", { key: '9e6582c0e90c81bd8c28a03096e74b2c48eb540f', style: { display: 'flex', flexDirection: 'column', gap: '20px', backgroundColor: '#074D31', padding: '20px' } }, h("nds-button", { key: '9180028e0ba0b7d03f24f57497fa0249c9b95173', label: "Button", variant: "primary-brand", size: "lg" }), h("nds-button", { key: 'e9f849ceab03bfe58f5955b185dc8b1671f813fd', label: "Button", variant: "primary-brand", size: "lg", selected: true }), h("nds-button", { key: 'bd6d2713663bb9754cae490400314cfddb995429', leadingIcon: 'link-square-01', size: 'sm' }, h("dga-icon-v2", { key: 'ea5a801ba7d7838c2e52fd1b9448757fd9832726', slot: 'leading-icon', name: 'source-code', variant: 'stroke', type: 'rounded', size: 16, color: 'white' }))), h("dga-icon-v2", { key: '5d183cee8c2dcaacf37ac81890ffd8027d2dcc8e', name: 'link-square-01', variant: 'stroke', type: 'rounded', color: 'red' }), h("div", { key: 'af888faf766a05cbda37bd5a8c79a66f878f9a05', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }))));
     }
     static get is() { return "nds-button-usage"; }
     static get states() {

package/dist/collection/nds-components/nds-chip/nds-chip-usage.js

@@ -4,14 +4,14 @@ export class NdsChipUsage {
         this.isSelected = false;
     }
     render() {
-        return (h("div", { key: '6b5092dec2465f510c7837f3a33951b9134d64a2' }, h("h1", { key: '939365d74774609d3eea0323db0b1dfd7bf78690' }, "Chip Example"), h("div", { key: 'f16801bfeeb53490cc2cbe01b61e3d03161edb3d', style: { padding: '50px', display: 'flex', gap: '20px' } }, h("div", { key: '2e54b1597ddf0ebca24073c0ddc0d95e726f4e84', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }, h("nds-chip", { key: '7e1f4eb704eba3466c4365c68ac9ff04af498120', label: "Label", variant: "neutral",
+        return (h("div", { key: '047bdfb739407d50f54e1ec56738580afa040bb8' }, h("h1", { key: 'a59d30108a96263d5ff495c4b6e166a53c5c6fa4' }, "Chip Example"), h("div", { key: '41189388840686ff4ec4d26552053a33120d8072', style: { padding: '50px', display: 'flex', gap: '20px' } }, h("div", { key: '659c0f7f29f702608d2f1c90740023b825bd4ba8', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }, h("nds-chip", { key: '03d71bf228040d480e5374b1bd6013299b309413', label: "Label", variant: "neutral",
             //   outlined={false}
-            rounded: false, size: "lg" }), h("nds-chip", { key: 'fbde44b0b0f8207f0431caa72aa7ce2f6fe037d7', label: "Label", variant: "success", rounded: false, size: "lg", onChange: isSelected => {
+            rounded: false, size: "lg" }), h("nds-chip", { key: '6f5a9c28bc8db53d4ee3b0d7846857f1611648a8', label: "Label", variant: "success", rounded: false, size: "lg", onChange: isSelected => {
                 console.log(isSelected, 'hi');
                 this.isSelected = isSelected;
-            }, selected: this.isSelected }), h("nds-chip", { key: '915239ea7da1c7d1a402c9382770e608869564c2', label: "Label", variant: "success", rounded: false, size: "lg", onChange: isSelected => {
+            }, selected: this.isSelected }), h("nds-chip", { key: '6ad9de2ef2734b83e1424592752b07728e777f8b', label: "Label", variant: "success", rounded: false, size: "lg", onChange: isSelected => {
                 console.log(isSelected, 'hi');
-            }, selected: false }), h("nds-chip", { key: '50d16c779238d8492b4bfb1ca8e77c75e30970f3', label: "Label", variant: "success", rounded: false, size: "lg", disabled: true }), h("div", { key: '36724e37ddf0bb1b318c1292b6493c9b9e1c5682', style: { display: 'flex', flexDirection: 'column', gap: '20px', backgroundColor: '#074D31' } }, h("nds-chip", { key: '4af064de5dc0c0a239e2ac3f79116e3a9d6815bc', label: "Label", variant: "on-color", rounded: true, size: "lg", disabled: true }))))));
+            }, selected: false }), h("nds-chip", { key: '8e1a918f3ca2f55173eb2699c0bd75459164dd71', label: "Label", variant: "success", rounded: false, size: "lg", disabled: true }), h("div", { key: '971a2efcd6611253bb8317e1ecf413a74bfe4549', style: { display: 'flex', flexDirection: 'column', gap: '20px', backgroundColor: '#074D31' } }, h("nds-chip", { key: 'ea353d4dd2538118c669d0bb14bf341ce3e0af57', label: "Label", variant: "on-color", rounded: true, size: "lg", disabled: true }))))));
     }
     static get is() { return "nds-chip-usage"; }
     static get states() {

package/dist/collection/nds-components/nds-chip/nds-chip.js

@@ -43,7 +43,7 @@ export class NdsChip {
         (_a = this.sxStyleManager) === null || _a === void 0 ? void 0 : _a.cleanup();
     }
     render() {
-        return (h(Host, { key: '719ece52819ba8cb5cabd0f5abafd95cec4ba2fc', id: this.componentId, style: this.rootStyles }, h("span", { key: '8909c2774b1d6c36a2422f4d3b33e7013c12fa4b', tabindex: "0", class: `chip chip--${this.variant} chip--${this.size} ${this.rounded ? 'chip--rounded' : ''} ${this.disabled ? 'disabled' : ''} ${this.pressed ? 'pressed' : ''} ${this.selected ? 'selected' : ''}`, onMouseDown: () => (this.pressed = true), onMouseUp: () => (this.pressed = false), "aria-disabled": this.disabled, onClick: () => {
+        return (h(Host, { key: '5f02726b0bc40117b0eda601a67b872e7d72b65f', id: this.componentId, style: this.rootStyles }, h("span", { key: '28d25f0496de23f7a2efef348f999b4df4a487c3', tabindex: "0", class: `chip chip--${this.variant} chip--${this.size} ${this.rounded ? 'chip--rounded' : ''} ${this.disabled ? 'disabled' : ''} ${this.pressed ? 'pressed' : ''} ${this.selected ? 'selected' : ''}`, onMouseDown: () => (this.pressed = true), onMouseUp: () => (this.pressed = false), "aria-disabled": this.disabled, onClick: () => {
                 if (this.selected) {
                     this.isSelectedState = false;
                 }
@@ -51,7 +51,7 @@ export class NdsChip {
                     this.isSelectedState = true;
                 }
                 this.onChange(this.isSelectedState);
-            } }, h("slot", { key: '860d1b41c7ac624f80a0aacc76a2f3bad7984698', name: "trailing-icon" }, this.leadingIcon && (h("span", { key: '311be24521103f2a31df1b9ed827871bcc31a72c', class: "chip-icon" }, h("dga-icon-v2", Object.assign({ key: '1714f425d9dc53366a25189a6a61fb29c790a3c1', name: this.leadingIcon }, this.leadingIconProps))))), this.label, h("slot", { key: 'af7a3b73dcfa2725952f4a7393e3b9545777919b', name: "trailing-icon" }, this.trailingIcon && (h("span", { key: 'dcb079f82ed17d8bc15e410ff17e1c779a7a87bf', class: "chip-icon" }, h("dga-icon-v2", Object.assign({ key: '63619ac01c38dfef2823e4a98cd5a50c3145e7bb', name: this.trailingIcon }, this.trailingIconProps))))))));
+            } }, h("slot", { key: '17e9293ac9be58006aa71d0f31ed5bc92cb8d050', name: "trailing-icon" }, this.leadingIcon && (h("span", { key: '74df4759bf95c5d7f0cb1beb097c527c856bf2a4', class: "chip-icon" }, h("dga-icon-v2", Object.assign({ key: 'd7dbb8bb60f7034e49b2a47d3cd37ae1a3369c6c', name: this.leadingIcon }, this.leadingIconProps))))), this.label, h("slot", { key: '674169e887361014ec306ba1b2f8452b333ca31f', name: "trailing-icon" }, this.trailingIcon && (h("span", { key: '89dcd33a1817a3f0f06cd15090270e726158c226', class: "chip-icon" }, h("dga-icon-v2", Object.assign({ key: '6e5d8e6256010850da5a0b5b6567c55ebe00bfb9', name: this.trailingIcon }, this.trailingIconProps))))))));
     }
     static get is() { return "nds-chip"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/nds-components/nds-floating-button/nds-floating-button-usage.js

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 export class NdsFloatingButtonUsage {
     render() {
-        return (h("div", { key: '143cc177155a457dc9c1f48dfd043ddb778e0347' }, h("dga-flex", { key: '87abef041332f36303fadec1fddca67dce9e1e43', direction: "column", spacing: 16 }, h("nds-floating-button", { key: '0f6c5c958527f2f56473911935997d48983da12f', variant: "primary-neutral", label: 'Button', iconOnly: true, icon: 'plus-sign' }), h("nds-floating-button", { key: 'e80c9393d73a9cac3261d8161744758c21000284', variant: "primary-neutral", label: 'Button' }), h("nds-floating-button", { key: '981135fb89146e7da416ff21861fe8d32d32f720', variant: "primary-brand", label: 'Button', iconOnly: true, icon: 'plus-sign' }), h("nds-floating-button", { key: 'e16c9121022a02c3d95927fd8db3c65f60dfe793', variant: "primary-brand", label: 'Button' }), h("nds-floating-button", { key: '18ba7b7a45a2bb511290d3fc015ee2de90a1f82b', variant: "secondary-solid", label: 'Button', iconOnly: true, icon: 'plus-sign' }), h("nds-floating-button", { key: '20514ced618ce25e1c7e78fe49013d0413649aba', variant: "secondary-solid", label: 'Button' })), h("div", { key: '34d660997768d45d4e8f8d5fdcfe5ea7bbfcf9e6', style: { backgroundColor: '#074D31', padding: '20px', marginTop: '20px' } }, h("dga-flex", { key: '3cfc1b9bc4af917c359d390670812c339d68f297', direction: "column", spacing: 16 }, h("nds-floating-button", { key: '30f2a036ae13876d78e9f2637375a12fc117395a', variant: "primary-neutral", label: 'Button', iconOnly: true, icon: 'plus-sign', inverted: true }), h("nds-floating-button", { key: 'eb5e443eb85045c42bd311b76f9f484f994da373', variant: "primary-neutral", label: 'Button', inverted: true }), h("nds-floating-button", { key: 'ad0a07d89c12cd1a937981641f50521809afb9ea', variant: "primary-brand", label: 'Button', iconOnly: true, icon: 'plus-sign', inverted: true }), h("nds-floating-button", { key: '2e69bff5af3db402f4aa88be68ea78218e625180', variant: "primary-brand", label: 'Button', inverted: true }), h("nds-floating-button", { key: 'b30f2706681b2a78c4101419b1cbda7fafaf18c5', variant: "secondary-solid", label: 'Button', iconOnly: true, icon: 'plus-sign', inverted: true }), h("nds-floating-button", { key: '628a1a0af957f2519158b3c2473055162b6a388c', variant: "secondary-solid", label: 'Button', inverted: true })))));
+        return (h("div", { key: '0a9a545ec359c83f2b5297cab9588634603fdff2' }, h("dga-flex", { key: 'fa4d7f68239c05d61b3f86bf87ab5c28acb4f3c6', direction: "column", spacing: 16 }, h("nds-floating-button", { key: '2cbc289b6fbc86fe865eff722f9b0d76e339e2b0', variant: "primary-neutral", label: 'Button', iconOnly: true, icon: 'plus-sign' }), h("nds-floating-button", { key: 'a7992763b26a54e385a437c4e9d3db31fc461cba', variant: "primary-neutral", label: 'Button' }), h("nds-floating-button", { key: '1f36dce74a5a2f36be798c4bfb2802483c6318dc', variant: "primary-brand", label: 'Button', iconOnly: true, icon: 'plus-sign' }), h("nds-floating-button", { key: '8a522cbde5d17820d7566ceab69097ac1354ee5c', variant: "primary-brand", label: 'Button' }), h("nds-floating-button", { key: '75a6c207f32162a8606c78006e113554c51ffab0', variant: "secondary-solid", label: 'Button', iconOnly: true, icon: 'plus-sign' }), h("nds-floating-button", { key: 'bf488d39bfb60d7ed1c402395a0871fec5db11a5', variant: "secondary-solid", label: 'Button' })), h("div", { key: '909ec672b39c145a9212e5d446119faee51c9c4d', style: { backgroundColor: '#074D31', padding: '20px', marginTop: '20px' } }, h("dga-flex", { key: 'bd7d5da24ee274becddfabc1d82db6c7a93dffa3', direction: "column", spacing: 16 }, h("nds-floating-button", { key: '8aaa71e96eb7adbd99657fdf1ab41b7577b6bf53', variant: "primary-neutral", label: 'Button', iconOnly: true, icon: 'plus-sign', inverted: true }), h("nds-floating-button", { key: '8e3bae14a38d362e5fb370204f90a92a6bee07c0', variant: "primary-neutral", label: 'Button', inverted: true }), h("nds-floating-button", { key: '6092beb62cbe9c1f1e0b1939901b80e3e9555a4d', variant: "primary-brand", label: 'Button', iconOnly: true, icon: 'plus-sign', inverted: true }), h("nds-floating-button", { key: '92da966b6a2ece88c83e6fbc2ed64d4c19516f12', variant: "primary-brand", label: 'Button', inverted: true }), h("nds-floating-button", { key: '7eb8beb98f4b9b4cdac4b844f79c3392882574a3', variant: "secondary-solid", label: 'Button', iconOnly: true, icon: 'plus-sign', inverted: true }), h("nds-floating-button", { key: '594769184934d13b71587a8f2ffe46edb064181d', variant: "secondary-solid", label: 'Button', inverted: true })))));
     }
     static get is() { return "nds-floating-button-usage"; }
 }

package/dist/collection/nds-components/nds-floating-button/nds-floating-button.js

@@ -15,10 +15,10 @@ export class NdsFloatingButton {
         }
     }
     render() {
-        return (h("button", { key: '0ba38d13e40dc9cd7b072475682854394084af5a', dir: this.RTL ? 'rtl' : 'ltr', disabled: this.disabled, class: `
+        return (h("button", { key: 'f21e6eec88b42d4124d10002384936b1f64cbd16', dir: this.RTL ? 'rtl' : 'ltr', disabled: this.disabled, class: `
             NdsFloatingButton-root
             ${this.inverted ? `NdsFloatingButton-${this.variant}--inverted` : `NdsFloatingButton-${this.variant}`}
-            NdsFloatingButton-${this.size} `, onClick: event => this.handleClick(event) }, h("slot", { key: '34004bcad9350512c0387cc2aeef7112957d6f68', name: "icon" }, this.icon && h("dga-icon-v2", Object.assign({ key: '54b17648abd754dfbf4ba59a7e5a9a5b5bafe501', name: this.icon }, this.iconProps))), !this.iconOnly && this.label && h("span", { key: 'f3e93f7b1e88d816b07e26c90f929ba98df5bf21', class: "NdsFloatingButton-label" }, this.label)));
+            NdsFloatingButton-${this.size} `, onClick: event => this.handleClick(event) }, h("slot", { key: '5d806c7370e7c06b953c7a63ea01c46129f39497', name: "icon" }, this.icon && h("dga-icon-v2", Object.assign({ key: 'c37e548735187b508504d64ca7f57ea1107407ea', name: this.icon }, this.iconProps))), !this.iconOnly && this.label && h("span", { key: '486ab0aa61dbf7e5101f8b47577ec35b9ce48e70', class: "NdsFloatingButton-label" }, this.label)));
     }
     static get is() { return "nds-floating-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/nds-components/nds-link/nds-link-usage.js

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 export class NdsLinkUsage {
     render() {
-        return (h("div", { key: '50064a777ba77db72d055d1a239ce27b494d4a6b' }, h("h1", { key: 'd7ce747bec4ab09cdf171114259c824a84728e7b' }, "Button Example"), h("div", { key: '1060ff5875a9f87377fea75759c30497adb546fc', style: { padding: '50px', display: 'flex', gap: '20px' } }, h("div", { key: '5b85cd006bd2e6eff38297f20a402a6e882ba980', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }, h("dga-flex", { key: '12f0abaa31d919695f4173f6187d3055d5106754', direction: "column", spacing: 16 }, h("nds-link", { key: '86892a14ba7dada272e3b7b42cad50a5f0882fdc', icon: "link-04" }), h("nds-link", { key: 'ee9f25eadfbc0a17237bfd4ae621cc1b3609dbb4', icon: "link-04", label: 'link from props' }), h("nds-link", { key: 'fd19e46d9d5c59b9fbef1564f42182a3b6ca2c6f', icon: "link-04", label: 'link from props' }, "link from child"), h("nds-link", { key: '6f4714e11a06b6abc80acff9bd51e7fc12889a13', variant: "primary", href: "https://www.google.com", target: "_blank" }, "Primary Link"))), h("div", { key: '7f760d2590daf9c223603109693ab49b5ea645fa', style: { display: 'flex', flexDirection: 'column', gap: '20px', backgroundColor: '#074D31', padding: '20px' } }, h("nds-button", { key: 'c9f435314933f759c0dab0737c699e9031ca2e44', label: "Button", variant: "primary-brand", size: "lg" }), h("nds-button", { key: 'fd4c12061b54573239eb9bdc00b97669ea0a0831', label: "Button", variant: "primary-brand", size: "lg", selected: true }), h("nds-button", { key: 'aa2a3e06509d70fbf5b607ccc9da648d3bf559c0', leadingIcon: 'link-square-01', size: 'sm' }, h("dga-icon-v2", { key: 'b4dbc50180ab1a5a3309f27194cf845f80928eb2', slot: 'leading-icon', name: 'source-code', variant: 'stroke', type: 'rounded', size: 16, color: 'white' }))), h("dga-icon-v2", { key: '2398f877f830f84b819ac21d43de70cf6c75c551', name: 'link-square-01', variant: 'stroke', type: 'rounded', color: 'red' }), h("div", { key: '4031f1a97af5a2f2fbeda2eac9ffb1b3e3fdb6fe', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }))));
+        return (h("div", { key: '7f5b2f8eea303ed449ca8f0519d034e76da07b8e' }, h("h1", { key: '3d49be15dcec6118b526892d0de7715444749330' }, "Button Example"), h("div", { key: '8d71caf14529ecb1212b86ee7d75dc56d470e1a3', style: { padding: '50px', display: 'flex', gap: '20px' } }, h("div", { key: '5cf78ee44fb57ca64877d02f3d1c308a18f374b4', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }, h("dga-flex", { key: 'ba3dab5bd26cca9b48b3c335677391754058c8d1', direction: "column", spacing: 16 }, h("nds-link", { key: 'ef28935e4f18e69fa505587f374010f29a6536b1', icon: "link-04" }), h("nds-link", { key: 'de0be3824bc72d8bfdd190ba9045cc40569b5bcd', icon: "link-04", label: 'link from props' }), h("nds-link", { key: 'ec1a2ed2374172ea9880387c2669e01a686ebf50', icon: "link-04", label: 'link from props' }, "link from child"), h("nds-link", { key: '06e346c148a82624a20635d62f4f8b68fe818fec', variant: "primary", href: "https://www.google.com", target: "_blank" }, "Primary Link"))), h("div", { key: '2bea915910de66aa26974d4358cfc033daa00a5f', style: { display: 'flex', flexDirection: 'column', gap: '20px', backgroundColor: '#074D31', padding: '20px' } }, h("nds-button", { key: '84d2ce2d8ad6f2238711910fe9ec6e0fd43ecbf8', label: "Button", variant: "primary-brand", size: "lg" }), h("nds-button", { key: '2cdc50b3064f72a23665340f5ae8d9afd9542c99', label: "Button", variant: "primary-brand", size: "lg", selected: true }), h("nds-button", { key: '481d45a0798af7f115bc771269702914c76a7881', leadingIcon: 'link-square-01', size: 'sm' }, h("dga-icon-v2", { key: '155998dea7b8ddd21aaac7347329c6bba4a395e5', slot: 'leading-icon', name: 'source-code', variant: 'stroke', type: 'rounded', size: 16, color: 'white' }))), h("dga-icon-v2", { key: '80fee28d90a623b759aa5e78dcaef3ed82afe325', name: 'link-square-01', variant: 'stroke', type: 'rounded', color: 'red' }), h("div", { key: '864995f2a634d731658f9120de7717e9fc7ece12', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }))));
     }
     static get is() { return "nds-link-usage"; }
 }

package/dist/collection/nds-components/nds-link/nds-link.js

@@ -11,7 +11,7 @@ export class NdsLink {
         };
     }
     render() {
-        return (h("a", { key: '80be37cb93b97bc926e547e7d5e4876106cc60ab', href: this.href, target: this.target, onClick: event => this.handleClick(event), class: `dga-link dga-link--${this.size} dga-link--${this.variant} ${this.inline ? 'dga-link--inline' : ''} ${this.disabled ? 'dga-link--disabled' : ''}` }, h("span", { key: '4157af4c0f5bdc2316db46d21f2c016e61abd1bc', class: "dga-link__label" }, h("slot", { key: '13f8e6efb67ecf3853bb1d19d2413a01f63e5966' }, this.label)), this.icon && h("span", { key: 'e163fa637bb4b5d2d350f7915b7d47ebd776ce7f', className: "dga-link__icon" }, h("dga-icon-v2", Object.assign({ key: '22dff563a1d322d24782fd6e9be2bbeccddf098d', name: this.icon }, this.iconProps)))));
+        return (h("a", { key: '776b6c0e6ceccb0de554ff6d40108a4fb2d80af7', href: this.href, target: this.target, onClick: event => this.handleClick(event), class: `dga-link dga-link--${this.size} dga-link--${this.variant} ${this.inline ? 'dga-link--inline' : ''} ${this.disabled ? 'dga-link--disabled' : ''}` }, h("span", { key: 'd72785344227f983c342446b626ed96f083e61f5', class: "dga-link__label" }, h("slot", { key: 'fde44b03814194779364c2324f24cefd7cd30caa' }, this.label)), this.icon && h("span", { key: '027cbba2529e97e079c7422e70e6b753d0b33105', className: "dga-link__icon" }, h("dga-icon-v2", Object.assign({ key: 'c8fc3e1221b957fb84320160ea93234ea6a4974c', name: this.icon }, this.iconProps)))));
     }
     static get is() { return "nds-link"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/nds-components/nds-table-of-content/nds-table-of-content-usage.js

@@ -1,84 +1,84 @@
 import { h } from "@stencil/core";
 export class NdsTableOfContentUsage {
     render() {
-        return (h("div", { key: '64a31f2dbb9e263d1ade4d63fb29087f7658c7fd', style: {
+        return (h("div", { key: '08ef62ed62cf509578851b30ab86ea0b7440d220', style: {
                 position: 'relative',
                 width: '100%',
                 maxWidth: '1200px',
                 margin: '0 auto',
                 padding: '20px'
-            } }, h("h1", { key: 'b4a2d667914333669e99300d385f9afbc68288ff' }, "Table of Content Example"), h("section", { key: 'df83ae54f8e1266bed37e6163056621b11680f80' }, h("div", { key: 'cb596c92f5efc3557549cd9459f6b9017ff8a6da', id: "section_1", style: {
+            } }, h("h1", { key: 'c2d330f396960b4830736688dbab2eef9fa0b860' }, "Table of Content Example"), h("section", { key: '1c7cab9e2ab9f04b441f624cf882e8451b589d08' }, h("div", { key: '5e97da792b83ded35315d2e2db15aeff5647325c', id: "section_1", style: {
                 minHeight: "100vh",
                 backgroundColor: "gray",
                 padding: "20px",
                 margin: "20px 0 200px 0"
-            } }, h("h2", { key: 'a1cfa10847985a750df7bbbb13750c202b1824d6' }, "Section 1"), h("div", { key: '5e724725f0fbb7e67920b432f0b383fea5c9e3df', id: "section_1_child_1", style: {
+            } }, h("h2", { key: '46482448844591b794277bf088f0315b28ef1584' }, "Section 1"), h("div", { key: '6c23e555476adb9fde24fa366fe584c472d0229d', id: "section_1_child_1", style: {
                 minHeight: "100vh",
                 backgroundColor: "rgba(255,0,0,0.3)",
                 margin: "20px 0",
                 padding: "20px"
-            } }, h("h3", { key: '773f1ddd2d8ba7620028533779697663e5d84e4a' }, "Section 1 Child 1")), h("div", { key: 'c41bdad38785e328974de4e599e313050cc607af', id: "section_1_child_2", style: {
+            } }, h("h3", { key: 'b0620e3b0d6ca899c98a35a41866a844cdcc1ac0' }, "Section 1 Child 1")), h("div", { key: 'f597cdf63bebfa6f8ddeb1532b2b43e795b81ac3', id: "section_1_child_2", style: {
                 minHeight: "100vh",
                 backgroundColor: "rgba(0,0,255,0.3)",
                 margin: "20px 0",
                 padding: "20px"
-            } }, h("h3", { key: 'ef1a1aa5dc5670c1d37c47468f3a4d8252d0af6b' }, "Section 1 Child 2")), h("div", { key: 'eb809e02ea0d5ea086d044ea03da36a86b3d2d00', id: "section_1_child_3", style: {
+            } }, h("h3", { key: '88733eb8c99ce54307f3ffab1e89a3f770a50b9a' }, "Section 1 Child 2")), h("div", { key: '65958c07d5d77036607dff603f90e547457bcb1c', id: "section_1_child_3", style: {
                 minHeight: "100vh",
                 backgroundColor: "rgba(0,255,0,0.3)",
                 margin: "20px 0",
                 padding: "20px"
-            } }, h("h3", { key: '475d5b942af24a9567aaae935d4e70153b4f166b' }, "Section 1 Child 3"), h("div", { key: '5f9acafacab63139b7d77559c876db3c4351031d', id: "section_1_sub_child_1", style: {
+            } }, h("h3", { key: '0e4757f1ac0c54c5d238c16594190798ac56f418' }, "Section 1 Child 3"), h("div", { key: '4de58a15faa06562e900e5399f5f44bed58dde62', id: "section_1_sub_child_1", style: {
                 minHeight: "50vh",
                 backgroundColor: "rgba(255,255,255,0.3)",
                 margin: "20px 0",
                 padding: "20px"
-            } }, h("h4", { key: '4c7150e6e3fb0d157e0e35f09a6be99367bb5bc4' }, "Section 1 Sub Child 1")), h("div", { key: 'a9154370dffe63d585596d16725b24a9fda82af5', id: "section_1_sub_child_2", style: {
+            } }, h("h4", { key: '7495eec28c45f59b9d956662ca19fa516c988097' }, "Section 1 Sub Child 1")), h("div", { key: '769cecbddda4c6560359cc4fcefaac34ffe62b0a', id: "section_1_sub_child_2", style: {
                 minHeight: "50vh",
                 backgroundColor: "rgba(255,255,255,0.3)",
                 margin: "20px 0",
                 padding: "20px"
-            } }, h("h4", { key: 'cfe9027db754ce49ef932fe181d4f9ab8f4985f3' }, "Section 1 Sub Child 2")), h("div", { key: '72e0cc31f4d83e34063abd7dc74686c3d8b298a1', id: "section_1_sub_child_3", style: {
+            } }, h("h4", { key: '7b7391c2d9639ec027ecd72cda73847ba3a7078f' }, "Section 1 Sub Child 2")), h("div", { key: 'd621388186f91d0bdc6ad5b70af7ed0ba0c051e0', id: "section_1_sub_child_3", style: {
                 minHeight: "50vh",
                 backgroundColor: "rgba(255,255,255,0.3)",
                 margin: "20px 0",
                 padding: "20px"
-            } }, h("h4", { key: 'd80d45570fceec9e53ddd8da5a93d6b7f38c6650' }, "Section 1 Sub Child 3")))), h("div", { key: '0468e4190f70aa284093970f7bc8e71939e75671', id: "section_2", style: {
+            } }, h("h4", { key: '24a8363b30f6999a3a0a980c04379700c77036f8' }, "Section 1 Sub Child 3")))), h("div", { key: 'd1189a5e68047ddc58d7241460b6b4d55649cf0d', id: "section_2", style: {
                 minHeight: "100vh",
                 backgroundColor: "rgba(0,0,0,0.8)",
                 color: "white",
                 padding: "20px",
                 margin: "20px 0"
-            } }, h("h2", { key: 'd0df70eb09ce6280a408610780fa26f8acdcf136' }, "Section 2")), h("div", { key: 'f480d8333cb212566ef7f380d4322baae9b5dd23', id: "section_3", style: {
+            } }, h("h2", { key: '67b3a4ef1426aae03692d62b49c9a50b47a0ace9' }, "Section 2")), h("div", { key: 'a0efaf0a89008c7a95c057f1e426a9af3e1951d5', id: "section_3", style: {
                 minHeight: "100vh",
                 backgroundColor: "brown",
                 padding: "20px",
                 margin: "20px 0"
-            } }, h("h2", { key: '028fec1dcc368f31408df031e3fca7ead887ed1a' }, "Section 3"), h("div", { key: '8289344d61f65ced7671c6eb91263d25779459d6', id: "section_3_child_1", style: {
+            } }, h("h2", { key: 'f85011bf44a3b996a06b821d19357c272c892302' }, "Section 3"), h("div", { key: '6fe787703c0b9f5ceeecf89e43e2ae1308059075', id: "section_3_child_1", style: {
                 minHeight: "50vh",
                 backgroundColor: "rgba(255,255,255,0.3)",
                 margin: "20px 0",
                 padding: "20px"
-            } }, h("h3", { key: '3a580da64dc57c693ed053d1fcece19a4e960c98' }, "Section 3 Child 1")), h("div", { key: '8708f7d0336b7400af775823e9294111aedaa441', id: "section_3_child_2", style: {
+            } }, h("h3", { key: 'a5b31387554071a02cf9dfb053b1ed536da69cb8' }, "Section 3 Child 1")), h("div", { key: 'c795e0ae106b416f305e1b107df36824b6336e63', id: "section_3_child_2", style: {
                 minHeight: "50vh",
                 backgroundColor: "rgba(255,255,255,0.3)",
                 margin: "20px 0",
                 padding: "20px"
-            } }, h("h3", { key: '71b022629ea471f3afaf745ba55ca02dcd98187f' }, "Section 3 Child 2"), h("div", { key: 'ff39795551e434f895e6aaeb31dc7bfe685b9825', id: "section_3_child_2_1", style: {
+            } }, h("h3", { key: '72b131df579c8c71c971df06ac492351e42f75dc' }, "Section 3 Child 2"), h("div", { key: '1f81ad745133c1d21e88610c25cd80f9e57ed702', id: "section_3_child_2_1", style: {
                 minHeight: "30vh",
                 backgroundColor: "rgba(0,0,0,0.1)",
                 margin: "20px 0",
                 padding: "20px"
-            } }, h("h4", { key: '89690e908d1e165227b020b93688aad87ee2fd25' }, "Section 3 Child 2.1")), h("div", { key: '03690c3de65920d22e9475949f4287397cdc86ab', id: "section_3_child_2_2", style: {
+            } }, h("h4", { key: 'f44a0b1e8e593669a32e9ef481b299dfba8b58c4' }, "Section 3 Child 2.1")), h("div", { key: 'b29ad3a89980372fde70c41d1baf2f59b4892a1c', id: "section_3_child_2_2", style: {
                 minHeight: "30vh",
                 backgroundColor: "rgba(0,0,0,0.1)",
                 margin: "20px 0",
                 padding: "20px"
-            } }, h("h4", { key: '11cd2c3c88f9437cf2928906ca3429543f1a1d3e' }, "Section 3 Child 2.2")), h("div", { key: '3c9c52f0c4210ce1d3d834cc7db9766471217141', id: "section_3_child_2_3", style: {
+            } }, h("h4", { key: '70df7c2a91a8f36306e5a7bddd010a0d722de056' }, "Section 3 Child 2.2")), h("div", { key: '4ae37d520c94682c7408b5d598efc8479306cb2b', id: "section_3_child_2_3", style: {
                 minHeight: "30vh",
                 backgroundColor: "rgba(0,0,0,0.1)",
                 margin: "20px 0",
                 padding: "20px"
-            } }, h("h4", { key: 'fe7645c63c3715a3b853aab57789f468f42eefbd' }, "Section 3 Child 2.3"))))), h("div", { key: '3d31c729edd91bbf4dc58c1ae10ed4956b3ace2d', style: {
+            } }, h("h4", { key: '3344deed2dee429630c6ff72bd0c2fe92aa80bd2' }, "Section 3 Child 2.3"))))), h("div", { key: '917d563a7779d083efb7b273216781ae4dc849f8', style: {
                 position: "fixed",
                 top: "100px",
                 left: "40px",
@@ -86,7 +86,7 @@ export class NdsTableOfContentUsage {
                 background: "white",
                 borderRadius: "8px",
                 boxShadow: "0 2px 8px rgba(0, 0, 0, 0.1)",
-            } }, h("dga-table-of-content", { key: 'eda1dd3769f2b2ed9d5461aca40f0ec2b1949cdf', title: "On this Page", subTitle: "Page Title", sections: [
+            } }, h("dga-table-of-content", { key: '61334484bec7d8d875ef8b3faa80f800271761c7', title: "On this Page", subTitle: "Page Title", sections: [
                 {
                     Name: 'Section 1',
                     Target: 'section_1',
@@ -121,7 +121,7 @@ export class NdsTableOfContentUsage {
                         }
                     ]
                 }
-            ] })), h("div", { key: '35ed5749b2f4e446260880f8ae5349a773447855', style: {
+            ] })), h("div", { key: '4c95f00c49c6366f04701bc7313e52b9e5f3b127', style: {
                 position: "fixed",
                 top: "100px",
                 right: "40px",
@@ -129,7 +129,7 @@ export class NdsTableOfContentUsage {
                 background: "white",
                 borderRadius: "8px",
                 boxShadow: "0 2px 8px rgba(0, 0, 0, 0.1)",
-            } }, h("dga-table-of-content", { key: '50656964fc7053ee7262813d029e94b02ef125b6', title: "\u0641\u064A \u0647\u0630\u0647 \u0627\u0644\u0635\u0641\u062D\u0629", subTitle: "[\u0627\u0633\u0645 \u0627\u0644\u0635\u0641\u062D\u0629]", rtl: true, sections: [
+            } }, h("dga-table-of-content", { key: 'c56bbd6c85504e4af510f2fc765ffd43d9c8ce81', title: "\u0641\u064A \u0647\u0630\u0647 \u0627\u0644\u0635\u0641\u062D\u0629", subTitle: "[\u0627\u0633\u0645 \u0627\u0644\u0635\u0641\u062D\u0629]", rtl: true, sections: [
                 {
                     Name: 'قسم صفحة',
                     Target: 'section_1',

package/dist/collection/usage/dga-accordion-usage.js

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 export class DgaAccordionUsage {
     render() {
-        return (h("div", { key: '79f7261e12c0ef136005f897104ef76ec7284659' }, h("h1", { key: '22449e31f9defbea215a811b58260a3e380fdfd8' }, "Accordion Example"), h("div", { key: '73fe34afbb71917c85ebe68fca4cbf5fe1b352a7', style: { padding: '50px', display: 'flex', gap: '20px' } }, h("div", { key: '7139d363921cb811b775d0e229cbd1ce937b7202', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }, h("dga-accordion", { key: '7074d92604fccc0495ed7865480c771f3ff79f90', title: "Accordion Title", size: "lg", content: "The accordion component delivers large amounts of content in a small space through progressive disclosure. The user gets key details about the underlying content and can choose to expand that content within the constraints of the accordion." }), h("dga-accordion", { key: '3eec11daf473f8d8bfed7646930190a35e9a6cb1', title: "Accordion Title", size: "md" }), h("dga-accordion", { key: 'ac6e439125e500f9fb5f61406d14de713f731d9c', title: "Accordion Title", size: "sm" }), h("dga-accordion", { key: '76096627062fa8b413c7a3a496ccdf0a7b893bb1', defaultExpanded: true, title: "Accordion Title", size: "lg", content: "The accordion component delivers large amounts of content in a small space through progressive disclosure. The user gets key details about the underlying content and can choose to expand that content within the constraints of the accordion.", disabled: true })), h("div", { key: '7273b2aa268cb32662a3790a5589c8042d8afee2', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }))));
+        return (h("div", { key: 'c5e3e4d9ef566a9573eab6b0d1388f601e673534' }, h("h1", { key: '44acdc4999aa2fc8ba0065e7e38c822f3f9e0468' }, "Accordion Example"), h("div", { key: 'd063fd084de55df8aa24e8e147be69cf66eef519', style: { padding: '50px', display: 'flex', gap: '20px' } }, h("div", { key: 'be6eacc6707240d892d45abe814fcbe69e605e06', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }, h("dga-accordion", { key: 'b460328cb27e7131d213c4823ee750abc6b46337', title: "Accordion Title", size: "lg", content: "The accordion component delivers large amounts of content in a small space through progressive disclosure. The user gets key details about the underlying content and can choose to expand that content within the constraints of the accordion." }), h("dga-accordion", { key: 'b6e730da9931057365ca40112035aaca4182970c', title: "Accordion Title", size: "md" }), h("dga-accordion", { key: '1382b010b5bf08e37d32d2485adbf65fd6786a73', title: "Accordion Title", size: "sm" }), h("dga-accordion", { key: '64d93fa098a34ad3f0fce7c7fc51cbb06d360834', defaultExpanded: true, title: "Accordion Title", size: "lg", content: "The accordion component delivers large amounts of content in a small space through progressive disclosure. The user gets key details about the underlying content and can choose to expand that content within the constraints of the accordion.", disabled: true })), h("div", { key: '6106fb56f0bae925435d1acc39872bffdd800339', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }))));
     }
     static get is() { return "dga-accordion-usage"; }
 }

package/dist/collection/usage/dga-apex-chart-usage.js

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 export class DgaApexChartUsage {
     render() {
-        return (h("div", { key: 'bf202493dba2864613690582fc3b4b1bad81b664' }, h("h1", { key: 'f95df2f3c4308467b3d3c1c58af44099e9a11f17' }, "Accordion Example"), h("div", { key: 'e60d0750b291d80a07be56687dd06ee1329e702b', style: { padding: '50px', display: 'flex', gap: '20px' } }, h("div", { key: '95ac00171bf469491ae9ad3cec63b7068016d0eb', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }, h("apex-chart", { key: 'b8972e424d58dbd6b9d2743674eb55dbf81bdab5', id: "timeline-chart", options: {
+        return (h("div", { key: 'e512243086ac8048bd3eaa47595b81bf2d90eeda' }, h("h1", { key: 'e04520ee3979f8e5001fae2315f709dfa13d6854' }, "Accordion Example"), h("div", { key: '07e71bcc517ef27de70f685efd5ff0281d834736', style: { padding: '50px', display: 'flex', gap: '20px' } }, h("div", { key: '14d7363193cc03f2bba734eaee75671188821cdf', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }, h("apex-chart", { key: '70ab8b2b645ea0fe8b1143fab2141ac57077bf9d', id: "timeline-chart", options: {
                 annotations: {
                     yaxis: [
                         {

package/dist/collection/usage/dga-avatar-usage.js

@@ -4,39 +4,39 @@ export class DgaAvatarUsage {
         this.variant = 'neutral';
     }
     render() {
-        return (h("div", { key: 'e70202f761240beff83b99430121ce4415e344e8' }, h("h1", { key: 'c98707eeeed1df2d779382835113da52ec331576' }, "Avatar Example"), h("div", { key: 'a0a4220ef0864705f5d00cfc854b1cebb01d3ad1', style: { padding: '50px', display: 'flex', gap: '20px' } }, h("div", { key: '46162721de720d7fed134efe4520a2f1bab5db79', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }, h("div", { key: 'dbd38e44c442cda421ec1badde8b9cf8f83187e6', style: { padding: "10px", display: 'flex', flexDirection: 'column', gap: '20px', backgroundColor: "black" } }, h("dga-avatar", { key: 'c54d7a7e6ecf66953c23f12a4a93f9faee919849', size: 120, border: false, square: true, sx: {
+        return (h("div", { key: 'baacaa6f8b5b9c1e7b3c4daf64f7882c5fd2e4cf' }, h("h1", { key: 'a8e11be7556c0882831c08ab33a245ed940d685a' }, "Avatar Example"), h("div", { key: '5fa141b57f1ed2245e5507f32613cdfe56ff1e78', style: { padding: '50px', display: 'flex', gap: '20px' } }, h("div", { key: '5de3c9b1084d2225e89f027e2d0b25021f410f3e', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }, h("div", { key: 'd483ef11b07e888571ab23daca75206587f3eb43', style: { padding: "10px", display: 'flex', flexDirection: 'column', gap: '20px', backgroundColor: "black" } }, h("dga-avatar", { key: 'fda54726789a747cfb0c9a8d6cb4d6a546cbc125', size: 120, border: false, square: true, sx: {
                 "& .dga-avatar": {
                     borderRadius: "100px"
                 }
-            } }), h("dga-avatar", { key: '0e896bd1ce55a96fd0879b50718bfbecc9c13bbf', size: 120, border: true, square: true })), h("dga-avatar", { key: 'd8f64b184148b72ee1bffe4e90e77347e608ada6', type: "icon", size: 120, icon: {
+            } }), h("dga-avatar", { key: 'b0fa56e3b4680cf01fa9e90b1b428f403552e3ac', size: 120, border: true, square: true })), h("dga-avatar", { key: 'c0e510be951907663546f9adb1691c1dcaa8caaa', type: "icon", size: 120, icon: {
                 name: 'user',
                 variant: "stroke",
                 type: "rounded"
-            } }), h("dga-avatar", { key: 'ceb4e6ed0862d8556f8f1b12a823d134971a0ba2', type: "icon", size: 80, icon: {
+            } }), h("dga-avatar", { key: 'c703abf05ba3834c6bfab042acec2b1653fd86cb', type: "icon", size: 80, icon: {
                 name: 'user',
                 variant: "stroke",
                 type: "rounded"
-            } }), h("dga-avatar", { key: 'dd8718da485e241e2fb881a22ed3419fc30c95c3', type: "icon", size: 68, icon: {
+            } }), h("dga-avatar", { key: 'a95c4e2553fab9635136d35de5b74d3402e89d85', type: "icon", size: 68, icon: {
                 name: 'user',
                 variant: "stroke",
                 type: "rounded"
-            } }), h("dga-avatar", { key: '02573ec4e13e915b648e0fe376f715a65511c4f0', type: "icon", size: 48, icon: {
+            } }), h("dga-avatar", { key: '239f4e284705f13476ba44832975eb0fc909b161', type: "icon", size: 48, icon: {
                 name: 'user',
                 variant: "stroke",
                 type: "rounded"
-            } }), h("dga-avatar", { key: '49b8f6ec127b1168c6c89f46b8a2ab2ee68dc659', type: "icon", size: 40, icon: {
+            } }), h("dga-avatar", { key: '206d4a626120020cfe5878e75fb746c04bca32eb', type: "icon", size: 40, icon: {
                 name: 'user',
                 variant: "stroke",
                 type: "rounded"
-            } }), h("dga-avatar", { key: '9ec73312c2bc6501b4e352c3d00f1ff54f25cff4', type: "icon", size: 32, icon: {
+            } }), h("dga-avatar", { key: 'f75d4b11c8a46b161402b4e8ab2b0e1cf92f8129', type: "icon", size: 32, icon: {
                 name: 'user',
                 variant: "stroke",
                 type: "rounded"
-            } }), h("dga-avatar", { key: 'ead547767320889c0ec07aa404e12cc7ef240da7', type: "icon", size: 24, icon: {
+            } }), h("dga-avatar", { key: 'a307d59013d1800d3407d7cf2496f6d1c9863a75', type: "icon", size: 24, icon: {
                 name: 'user',
                 variant: "stroke",
                 type: "rounded"
-            } })), h("dga-avatar-group", { key: 'e16845caacf7043cdd8b17498fb986989dda7412', stacked: true }, h("dga-avatar", { key: '5a7f1e9a528356b4a1e9a4792e3cfdcb55d1e62f', type: "initials", text: 'AB', size: 40 }), h("dga-avatar", { key: 'ae90baf8131dd605df8a326c2142569c9c51019d', type: "initials", text: 'CD', size: 40 }), h("dga-avatar", { key: '3c991c19769d4115967b89031278607d00dfb753', type: "initials", text: 'SB', size: 40 }), h("dga-avatar", { key: '6d45bc5c260782a6ff9295053bcd3c30f0ebd312', type: "initials", text: 'WK', size: 40 }), h("dga-avatar", { key: '7d1b9009d03f79146a260450afef04923eca7413', type: 'initials', text: `+4`, size: 40 })), h("div", { key: '0d6f58a3d19c21e48b6b5db78d4404c1df949d17', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }))));
+            } })), h("dga-avatar-group", { key: '3a5e60a2b06d371d01ce23985769642d0f528c20', stacked: true }, h("dga-avatar", { key: '5d67e45f2a11bbe8159868cb5cb03f1fce901996', type: "initials", text: 'AB', size: 40 }), h("dga-avatar", { key: '31f26c43de0d0606f95e06e68af9bd14354af34f', type: "initials", text: 'CD', size: 40 }), h("dga-avatar", { key: '4c9cee0be76e4423d94cc455c30dcfbd63abd72c', type: "initials", text: 'SB', size: 40 }), h("dga-avatar", { key: '5799635791204420f17a351e86aae76f5d1e5c71', type: "initials", text: 'WK', size: 40 }), h("dga-avatar", { key: '1416fe9d5d257db8e1783c6af2fe3cf72cecd0ed', type: 'initials', text: `+4`, size: 40 })), h("div", { key: '6bfedb2a999019113f9afa1a1c8977a24d8313c2', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }))));
     }
     static get is() { return "dga-avatar-usage"; }
     static get states() {