@platformscode/core 0.0.48 → 0.0.49

package/dist/collection/nds-components/nds-button/nds-button.css

@@ -2506,7 +2506,6 @@ a:focus {
   outline: 1px solid var(--border-neutral-secondary);
   background-color: transparent;
   color: var(--text-default);
-  mix-blend-mode: multiply;
 }
 .dga-btn--secondary-outline:hover {
   background: var(--button-background-neutral-default);
@@ -2531,7 +2530,6 @@ a:focus {
 .dga-btn--secondary-outline--on-color {
   outline-color: var(--border-white-40);
   color: var(--text-oncolor-primary);
-  mix-blend-mode: normal;
 }
 .dga-btn--secondary-outline--on-color:hover {
   background: var(--button-background-transparent-hovered);
@@ -2552,7 +2550,6 @@ a:focus {
 .dga-btn--subtle, .dga-btn--close, .dga-btn--sort {
   background-color: transparent;
   color: var(--colors-text-primary);
-  mix-blend-mode: multiply;
 }
 .dga-btn--subtle:hover, .dga-btn--close:hover, .dga-btn--sort:hover {
   background: var(--button-background-neutral-default);
@@ -2663,7 +2660,6 @@ a:focus {
   outline: 1px solid var(--border-error-light);
   background-color: transparent;
   color: var(--text-error);
-  mix-blend-mode: multiply;
 }
 .dga-btn--des-secondary-outline:hover {
   background: var(--button-background-danger-secondary-hovered);

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: '32e4d3fd4e5274ea2a9d0769c1d18707433d3acc' }, h("h1", { key: '4e9c50d02a446ab517ed1abd41ed039d9a112fbb' }, "Chip Example"), h("div", { key: 'db386a28f649769759aff08ec9924fca9c628290', style: { padding: '50px', display: 'flex', gap: '20px' } }, h("div", { key: '723a7c843ab9819e57e1bac3c926ff35010c15ea', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }, h("nds-chip", { key: '728b9dd8bc0eff106b89d82e38c4344c63960e44', label: "Label", variant: "neutral",
+        return (h("div", { key: '63ab3093f5157facd9994877dacc8dee0f8e707e' }, h("h1", { key: '29f88ea9b2bc7409e7a32da8deba77f2a1e3bbe7' }, "Chip Example"), h("div", { key: 'd091f1b78ae10b24b4df39b10794e4065a1838f3', style: { padding: '50px', display: 'flex', gap: '20px' } }, h("div", { key: '02e52c2d731d6f5176a8b3b955c0e478011d7df6', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }, h("nds-chip", { key: 'fbe8adaf879645c9e0774ecc727e0ce88069f9f8', label: "Label", variant: "neutral",
             //   outlined={false}
-            rounded: false, size: "lg" }), h("nds-chip", { key: 'd3331b1c532b588d401a517637aa879b08b0cbe7', label: "Label", variant: "success", rounded: false, size: "lg", onChange: isSelected => {
+            rounded: false, size: "lg" }), h("nds-chip", { key: 'b99d6ee3db2ddf4b2f1e1f6dd08d097cf3c99631', label: "Label", variant: "success", rounded: false, size: "lg", onChange: isSelected => {
                 console.log(isSelected, 'hi');
                 this.isSelected = isSelected;
-            }, selected: this.isSelected }), h("nds-chip", { key: '19863e35a1f9ac32b0fe4791f8fe227af9067d82', label: "Label", variant: "success", rounded: false, size: "lg", onChange: isSelected => {
+            }, selected: this.isSelected }), h("nds-chip", { key: '16f9bc279e1cdf948dd2dd0d1455f8973d1a5581', label: "Label", variant: "success", rounded: false, size: "lg", onChange: isSelected => {
                 console.log(isSelected, 'hi');
-            }, selected: false }), h("nds-chip", { key: 'f6173b10031f2a01a1e629582a5f05abb6dc1211', label: "Label", variant: "success", rounded: false, size: "lg", disabled: true }), h("div", { key: 'adea0bda7daf633f19883d9b8a9710737f01fe13', style: { display: 'flex', flexDirection: 'column', gap: '20px', backgroundColor: '#074D31' } }, h("nds-chip", { key: '862516851a9a6853bd47c74faade498fd67da00c', label: "Label", variant: "on-color", rounded: true, size: "lg", disabled: true }))))));
+            }, selected: false }), h("nds-chip", { key: 'acf3781c2b9fc3c019722e068a049badc3266daa', label: "Label", variant: "success", rounded: false, size: "lg", disabled: true }), h("div", { key: '2286ce1fa350ae63f23086a742c6cbff8deb1949', style: { display: 'flex', flexDirection: 'column', gap: '20px', backgroundColor: '#074D31' } }, h("nds-chip", { key: '8ee378b2d0f7bb1a9ff5cefbcc7a047e57dc8819', 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: '1c6da15d70906d5451cd142e27f2d1c6fd96d3b7', id: this.componentId, style: this.rootStyles }, h("span", { key: 'ecb73625b285a143fb28deb015c3f7491abb7a97', 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: 'c82349722f1127f534000a3077818fcb279f97ee', id: this.componentId, style: this.rootStyles }, h("span", { key: '3250ee0c049bbe2c8f01aef7c81c68f628be58e7', 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: 'b125dbc0a272d99f4128f23164e5e81faf3de875', name: "trailing-icon" }, this.leadingIcon && (h("span", { key: '04eee36e5b0ad7316768c8614a8684a55f97849b', class: "chip-icon" }, h("dga-icon-v2", Object.assign({ key: '025ef869e214feaee04fa883aaf55571ce5bab86', name: this.leadingIcon }, this.leadingIconProps))))), this.label, h("slot", { key: '46ac6ca964a348aace18ae10672b5ebb87a61cfe', name: "trailing-icon" }, this.trailingIcon && (h("span", { key: '88a8f62db8ef3fc8ea6c9e32066607a544cb13b1', class: "chip-icon" }, h("dga-icon-v2", Object.assign({ key: 'd85499972067a8b9d0bfe4f1c20dc59907f667a5', name: this.trailingIcon }, this.trailingIconProps))))))));
+            } }, h("slot", { key: 'c5176106847c11cd1eb95ce97d6502dd53ee3e06', name: "trailing-icon" }, this.leadingIcon && (h("span", { key: '80e758ac728c6ba9e577799ca15568ab7c2f4ead', class: "chip-icon" }, h("dga-icon-v2", Object.assign({ key: 'be61b6e09aea377f1dbd6f40665dd5d2c2251920', name: this.leadingIcon }, this.leadingIconProps))))), this.label, h("slot", { key: 'e430c92649eec53c83f90e7ea7379fb84c7e0eea', name: "trailing-icon" }, this.trailingIcon && (h("span", { key: 'f45c7f1d4d37259dba45f75543ce33d870415b1c', class: "chip-icon" }, h("dga-icon-v2", Object.assign({ key: '97b9ba001a0fc42bf743f0fbb51368eaa4004c1c', 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: 'dc5838d98f5625dd4f238db498491b767117a006' }, h("dga-flex", { key: '433540e0c7166ebe1960ae856c4c92c4c9fa3860', direction: "column", spacing: 16 }, h("nds-floating-button", { key: 'fa6846a8d046a89996d546653f8aea4835db6889', variant: "primary-neutral", label: 'Button', iconOnly: true, icon: 'plus-sign' }), h("nds-floating-button", { key: '1f37f2bb630c4e93d1ea713346ecb5734cee8b01', variant: "primary-neutral", label: 'Button' }), h("nds-floating-button", { key: '047dc4e9993766241f711df09b853eab16ffa383', variant: "primary-brand", label: 'Button', iconOnly: true, icon: 'plus-sign' }), h("nds-floating-button", { key: 'af1e712939d4f5a0ed9de3f96abb933fec5d98b2', variant: "primary-brand", label: 'Button' }), h("nds-floating-button", { key: 'c1aac735dada98ca05947d2a6ba55cd59a8d228a', variant: "secondary-solid", label: 'Button', iconOnly: true, icon: 'plus-sign' }), h("nds-floating-button", { key: '148bb32dfe668ab4a1e96c4784092ec602f7ed54', variant: "secondary-solid", label: 'Button' })), h("div", { key: 'bc121a5ae32a13eeeebce507f6dabb2817be17e6', style: { backgroundColor: '#074D31', padding: '20px', marginTop: '20px' } }, h("dga-flex", { key: 'b895a893d334ab8cd625dcbd544842edc13ac760', direction: "column", spacing: 16 }, h("nds-floating-button", { key: 'c3dd3b1d8c8a787d44c0c6b032b036b0bc8421fb', variant: "primary-neutral", label: 'Button', iconOnly: true, icon: 'plus-sign', inverted: true }), h("nds-floating-button", { key: '250d398e839456d320605c688a6ebf81c057efa9', variant: "primary-neutral", label: 'Button', inverted: true }), h("nds-floating-button", { key: '5413b1863cfa0b739d2d1ce50ca406e4722a1ae1', variant: "primary-brand", label: 'Button', iconOnly: true, icon: 'plus-sign', inverted: true }), h("nds-floating-button", { key: '09b14123b1c82833d28abe82d36a9b2b6039070d', variant: "primary-brand", label: 'Button', inverted: true }), h("nds-floating-button", { key: 'b3057256416bc4d82fdb08e7e1dd534293191f0d', variant: "secondary-solid", label: 'Button', iconOnly: true, icon: 'plus-sign', inverted: true }), h("nds-floating-button", { key: 'e5ca4c9d4fc153c896ddf3b737ff935d7b79c54b', variant: "secondary-solid", label: 'Button', inverted: true })))));
+        return (h("div", { key: 'd28e6a4933edb816c5415aea8c958a5ec7a2dca5' }, h("dga-flex", { key: '53ac1cd5b01e0e64a3c5500c3673c4da11a7032f', direction: "column", spacing: 16 }, h("nds-floating-button", { key: '10870090e590fae7800525b2384dfebfe2af5cf0', variant: "primary-neutral", label: 'Button', iconOnly: true, icon: 'plus-sign' }), h("nds-floating-button", { key: '6145a43246d79f4b374c308f1c374b0771a44e98', variant: "primary-neutral", label: 'Button' }), h("nds-floating-button", { key: '1469720f974f13172d5c9869f941655321cb72ea', variant: "primary-brand", label: 'Button', iconOnly: true, icon: 'plus-sign' }), h("nds-floating-button", { key: '451cffadfb2095e68fdcc8468cb12e0b9efb371f', variant: "primary-brand", label: 'Button' }), h("nds-floating-button", { key: 'ffb25eb0fbce89ecec0f2d0bb7cc7268a4cb3be8', variant: "secondary-solid", label: 'Button', iconOnly: true, icon: 'plus-sign' }), h("nds-floating-button", { key: 'af550781dd85f92980ab88eeca5de784c3834f19', variant: "secondary-solid", label: 'Button' })), h("div", { key: '03ee08dc2ff0229ffb9d857ea067e3c986682866', style: { backgroundColor: '#074D31', padding: '20px', marginTop: '20px' } }, h("dga-flex", { key: '8e6bda5356806eef5d4481024143306ca5f5fd1a', direction: "column", spacing: 16 }, h("nds-floating-button", { key: 'cdaf873ccf3ee7d5028102d730ce8dbf490589ac', variant: "primary-neutral", label: 'Button', iconOnly: true, icon: 'plus-sign', inverted: true }), h("nds-floating-button", { key: 'ab0ca2a9488d3b7a2de1fc5ca6aebf545da5e18e', variant: "primary-neutral", label: 'Button', inverted: true }), h("nds-floating-button", { key: 'f7b2541e08850810cc99bd0d8403a4aba9890d71', variant: "primary-brand", label: 'Button', iconOnly: true, icon: 'plus-sign', inverted: true }), h("nds-floating-button", { key: 'f5b7a839c572674b6c84a1e3dc9e7956e0cef6ac', variant: "primary-brand", label: 'Button', inverted: true }), h("nds-floating-button", { key: '7f1c6d00630c5d8f7421ed7a09a7d32dda9387f1', variant: "secondary-solid", label: 'Button', iconOnly: true, icon: 'plus-sign', inverted: true }), h("nds-floating-button", { key: 'a1aac3187fe8de3226bd5fea998abc30de226c07', 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: 'a3ac5b3cb6f7d909f24f1499b35378fa43986800', dir: this.RTL ? 'rtl' : 'ltr', disabled: this.disabled, class: `
+        return (h("button", { key: '6bd0f302faad6064b31289598b5ad69a75140e1f', 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: '60d99e4475603b5f4a5e0a475d9a238a3f643f37', name: "icon" }, this.icon && h("dga-icon-v2", Object.assign({ key: '0fe75c8656e3e424ac5d1fe898d08415d8259de1', name: this.icon }, this.iconProps))), !this.iconOnly && this.label && h("span", { key: '1dbc96047a6b345d758280a008207a276fe7f18e', class: "NdsFloatingButton-label" }, this.label)));
+            NdsFloatingButton-${this.size} `, onClick: event => this.handleClick(event) }, h("slot", { key: '7fbf6c54e4ff8ec7011e9646d6ba57e6eed9043b', name: "icon" }, this.icon && h("dga-icon-v2", Object.assign({ key: '3d9eb6db5932125afe45e2590edd223f22766044', name: this.icon }, this.iconProps))), !this.iconOnly && this.label && h("span", { key: '5e36133406b11eb7ea8f01813a1305d694d2b514', 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: '74e10a52d4f022509afbd6c7f6043b52ea77868e' }, h("h1", { key: '202bae337c26a82314dcb4628dde6cf911786254' }, "Button Example"), h("div", { key: 'cee01e088a9872eaa3a9aedea788dae99cbbef72', style: { padding: '50px', display: 'flex', gap: '20px' } }, h("div", { key: 'f7f9e2ef43441db5a9435781ca754575b25225ad', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }, h("dga-flex", { key: '23c6f7ede0333c8497d5d5bf0179f7fcc7c14d15', direction: "column", spacing: 16 }, h("nds-link", { key: '8ef6dbd4563cab3d8d5319acd3d369ef55e3a557', icon: "link-04" }), h("nds-link", { key: '5339e09692c2989385eb091ea07e49b5b40da772', icon: "link-04", label: 'link from props' }), h("nds-link", { key: '06d0ac6a72b978e60bd9442d1711dd4a3f8405de', icon: "link-04", label: 'link from props' }, "link from child"), h("nds-link", { key: '79d65c8cb534c7e08513a5f8b4bc0d09db6e4ee2', variant: "primary", href: "https://www.google.com", target: "_blank" }, "Primary Link"))), h("div", { key: 'c48ac7066e5f4f6740d61812137850d8a11e88b7', style: { display: 'flex', flexDirection: 'column', gap: '20px', backgroundColor: '#074D31', padding: '20px' } }, h("nds-button", { key: 'bbafc39a04805b18617a99ac1014afad895be293', label: "Button", variant: "primary-brand", size: "lg" }), h("nds-button", { key: '2732234f386f2b3e5d17fb13c614a5bb833b3c07', label: "Button", variant: "primary-brand", size: "lg", selected: true }), h("nds-button", { key: 'c3f5c5b01e995079b6d8538e631e4798fd2e0c27', leadingIcon: 'link-square-01', size: 'sm' }, h("dga-icon-v2", { key: '8e467cb30b50229ea77af5b2e319b981beb22973', slot: 'leading-icon', name: 'source-code', variant: 'stroke', type: 'rounded', size: 16, color: 'white' }))), h("dga-icon-v2", { key: '75ec47fc82218f41116d8eb618ea14fd15ceb3f4', name: 'link-square-01', variant: 'stroke', type: 'rounded', color: 'red' }), h("div", { key: '2052f4a3250d88958a3dfd2aa8bc647617e25916', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }))));
+        return (h("div", { key: 'e8d6ecc895d9b8e3125fcf75f33d3b3ff5822603' }, h("h1", { key: 'f1f6d12aa0f06edbe0ec7bee133869aeedb845c0' }, "Button Example"), h("div", { key: '86351264ff44e0ca14bc7808170cd894d6a09d08', style: { padding: '50px', display: 'flex', gap: '20px' } }, h("div", { key: '4a7733dfee3d344d82d89cae4114cb936a816ea6', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }, h("dga-flex", { key: '5f4d8da7f7311e6b3bd583a8cfad46061f2b40d6', direction: "column", spacing: 16 }, h("nds-link", { key: 'a62a8a6a5cbe514e13a7651addcfc16e753f2415', icon: "link-04" }), h("nds-link", { key: '1422961741d792839ad358a7b2696432807c6e6c', icon: "link-04", label: 'link from props' }), h("nds-link", { key: '293816844a7d94ab321ab26dbc684e3f5e59b1bf', icon: "link-04", label: 'link from props' }, "link from child"), h("nds-link", { key: '80cedde6b5351ef52280864898097201a9c25872', variant: "primary", href: "https://www.google.com", target: "_blank" }, "Primary Link"))), h("div", { key: 'e1e2e3e3824d198787d6efafe9191075cf08e8ad', style: { display: 'flex', flexDirection: 'column', gap: '20px', backgroundColor: '#074D31', padding: '20px' } }, h("nds-button", { key: 'a14a343e8d70d57b421f96d0c466a15950f7e8c4', label: "Button", variant: "primary-brand", size: "lg" }), h("nds-button", { key: 'a882207dc546dc8d221fba4ae4074f7414b7cce3', label: "Button", variant: "primary-brand", size: "lg", selected: true }), h("nds-button", { key: '87c608f1c853826452ce9750e056b7d85e70133a', leadingIcon: 'link-square-01', size: 'sm' }, h("dga-icon-v2", { key: 'd65fce015c53798833536804fe5a33f7c7d6ce95', slot: 'leading-icon', name: 'source-code', variant: 'stroke', type: 'rounded', size: 16, color: 'white' }))), h("dga-icon-v2", { key: '169f1296c862fce4b3eb2c3f93f07d15829b195c', name: 'link-square-01', variant: 'stroke', type: 'rounded', color: 'red' }), h("div", { key: '945ae7a6765ddf8f09898f53afbf9515ed4ca361', 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: '19bf552a55a786ad2782175092c95eedf8fc83ee', 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: 'c2c0d309fd06aaf256ecea7c272cf96d371ca337', class: "dga-link__label" }, h("slot", { key: '59c9af21a5af0bb26efe46899af9789026c280bd' }, this.label)), this.icon && h("span", { key: '9646f4bf9dcd2748962ddac0dd0016b3374ff456', className: "dga-link__icon" }, h("dga-icon-v2", Object.assign({ key: '38b13b7f14e5f3c8df8a216c0d8c4d84311e3a9d', name: this.icon }, this.iconProps)))));
+        return (h("a", { key: '1bbfb5974b396176a00fa04cf605bbae6382b20b', 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: '759cbf6dd1feae99fd9cc42c6d3458450aef7311', class: "dga-link__label" }, h("slot", { key: '985ed767e199e401076d9f7e12fe006e7136db0f' }, this.label)), this.icon && h("span", { key: '5af9e032dffba9e1cb14cd25dbc19f81247c7f1e', className: "dga-link__icon" }, h("dga-icon-v2", Object.assign({ key: '8cc7480c3e23f2aa802080251a1ac278597273bc', 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: '26c3558c023a7761118d9a65361281c019a3e526', style: {
+        return (h("div", { key: '73493716321556d88acfc6cc9008610261dda6b7', style: {
                 position: 'relative',
                 width: '100%',
                 maxWidth: '1200px',
                 margin: '0 auto',
                 padding: '20px'
-            } }, h("h1", { key: 'fa81a411b1132432c12511c9bbf65364dbbb42f0' }, "Table of Content Example"), h("section", { key: 'd83201694926487d7b5a1ed15b6108f268d829b6' }, h("div", { key: '9013b1631cd1d748511043ba88f9e6ee93e8f240', id: "section_1", style: {
+            } }, h("h1", { key: '4d439e8e0fecdf0511fdcf81945b5815325919cf' }, "Table of Content Example"), h("section", { key: 'd5c43263acb0f2dfc1fe3da6f1eab5c078b2af7c' }, h("div", { key: 'f538a939937793ae746e82b44189cd4917ad6148', id: "section_1", style: {
                 minHeight: "100vh",
                 backgroundColor: "gray",
                 padding: "20px",
                 margin: "20px 0 200px 0"
-            } }, h("h2", { key: 'd813e208e8efd8e9e82f0fbe44013d619c4906a5' }, "Section 1"), h("div", { key: '9cd212915097d767f1fa4634d19fccfa799ee32d', id: "section_1_child_1", style: {
+            } }, h("h2", { key: 'd4dddabeae839e1be1a23222b81e6ecf458325e7' }, "Section 1"), h("div", { key: '6c1d2de51822df1522e62157194065881210e68f', id: "section_1_child_1", style: {
                 minHeight: "100vh",
                 backgroundColor: "rgba(255,0,0,0.3)",
                 margin: "20px 0",
                 padding: "20px"
-            } }, h("h3", { key: '6d9d0b8d563e773e5a63254c0513b5662911e109' }, "Section 1 Child 1")), h("div", { key: '63d84a830531584fa29b58255fa27dab16616342', id: "section_1_child_2", style: {
+            } }, h("h3", { key: '860e0d9df2eb98cfcdf498bcd8d36aa0ba67a3c2' }, "Section 1 Child 1")), h("div", { key: '0446a5f67225916f8c7566be19207651a588a659', id: "section_1_child_2", style: {
                 minHeight: "100vh",
                 backgroundColor: "rgba(0,0,255,0.3)",
                 margin: "20px 0",
                 padding: "20px"
-            } }, h("h3", { key: '9c2ff1ea2a80deaa72c4ea24bd48c599db807a99' }, "Section 1 Child 2")), h("div", { key: '3f7869916a3aede383577bcb168ca29c8bb5cb02', id: "section_1_child_3", style: {
+            } }, h("h3", { key: 'd45244e8c88e96889d25b8003f1a2ee8824d6f17' }, "Section 1 Child 2")), h("div", { key: 'baef46315656dc30434c4081f50635d399b5a66b', id: "section_1_child_3", style: {
                 minHeight: "100vh",
                 backgroundColor: "rgba(0,255,0,0.3)",
                 margin: "20px 0",
                 padding: "20px"
-            } }, h("h3", { key: '8d17440ce0333edcc4f72dd0acc1871e2f4ce1f5' }, "Section 1 Child 3"), h("div", { key: '8815ee5c3c27c5743bbf2f738e62fd8a441b7104', id: "section_1_sub_child_1", style: {
+            } }, h("h3", { key: '11f8053c4d15c987828ac8f589eb088a9d29ddd1' }, "Section 1 Child 3"), h("div", { key: '8a92a400582cf52f2c295545087751a40d1daf16', id: "section_1_sub_child_1", style: {
                 minHeight: "50vh",
                 backgroundColor: "rgba(255,255,255,0.3)",
                 margin: "20px 0",
                 padding: "20px"
-            } }, h("h4", { key: '8c80da2742fdc04454d2da31357138ab10702251' }, "Section 1 Sub Child 1")), h("div", { key: '92c195f4efbe7c338ccd2851707c484a47281ce7', id: "section_1_sub_child_2", style: {
+            } }, h("h4", { key: '183106ab4c4ad23e7fc9082e2a0e752fcb864362' }, "Section 1 Sub Child 1")), h("div", { key: '0a0ae156370d5841ce6ed8cbec0d9ebda208a546', id: "section_1_sub_child_2", style: {
                 minHeight: "50vh",
                 backgroundColor: "rgba(255,255,255,0.3)",
                 margin: "20px 0",
                 padding: "20px"
-            } }, h("h4", { key: '2c37dfc99171484b0e27079ecc7cdb699e95b5e8' }, "Section 1 Sub Child 2")), h("div", { key: '7b8ccd1d39d59b9248b159facb1db5a3cd00d848', id: "section_1_sub_child_3", style: {
+            } }, h("h4", { key: 'e0f81743c6859daf7f710df6110ddcc0ccf93eef' }, "Section 1 Sub Child 2")), h("div", { key: '60190dbb1141464fa08516f44eacc5732921489a', id: "section_1_sub_child_3", style: {
                 minHeight: "50vh",
                 backgroundColor: "rgba(255,255,255,0.3)",
                 margin: "20px 0",
                 padding: "20px"
-            } }, h("h4", { key: 'c829fc720ebc69629e182c03b249312df027f867' }, "Section 1 Sub Child 3")))), h("div", { key: '10c928a32d4e06fbf74f36b838a487a04a5367a9', id: "section_2", style: {
+            } }, h("h4", { key: '0814f6349531f787c7d223b3624d22bfdad63da8' }, "Section 1 Sub Child 3")))), h("div", { key: '481d870f682b248b7c813801fe11532dd6e411ab', id: "section_2", style: {
                 minHeight: "100vh",
                 backgroundColor: "rgba(0,0,0,0.8)",
                 color: "white",
                 padding: "20px",
                 margin: "20px 0"
-            } }, h("h2", { key: 'a71c0cce3688edde7a7575dbf6b05c2b1ab90c76' }, "Section 2")), h("div", { key: 'bfa7cea9210eaaa073aa68d6fd915162fde44189', id: "section_3", style: {
+            } }, h("h2", { key: 'b8cae3090dff869b72581722431ddac84e3840d0' }, "Section 2")), h("div", { key: 'b79476cf17e5deebce3438504a5ba2c256883c4d', id: "section_3", style: {
                 minHeight: "100vh",
                 backgroundColor: "brown",
                 padding: "20px",
                 margin: "20px 0"
-            } }, h("h2", { key: '30ce0a3dd252658f1da17be9f57d4e2575c87773' }, "Section 3"), h("div", { key: 'a11b92a0f290b76cf86cd8abe6953885ebbe3fe5', id: "section_3_child_1", style: {
+            } }, h("h2", { key: '02c341ae569e513f066583fa7ca30ac1c82383c4' }, "Section 3"), h("div", { key: '60e90d88650e73a637bdbce4fd4dffee2620746b', id: "section_3_child_1", style: {
                 minHeight: "50vh",
                 backgroundColor: "rgba(255,255,255,0.3)",
                 margin: "20px 0",
                 padding: "20px"
-            } }, h("h3", { key: '57fce37b682038367ef1da481619c076a82742b4' }, "Section 3 Child 1")), h("div", { key: '42f8fe7daa54cdff0a24b4e938ae37efa6fe0908', id: "section_3_child_2", style: {
+            } }, h("h3", { key: '471e97e903c305687e85986212de3e8e6bebe554' }, "Section 3 Child 1")), h("div", { key: 'fa76d73558fd6a2ca343897d80108dc05f890df6', id: "section_3_child_2", style: {
                 minHeight: "50vh",
                 backgroundColor: "rgba(255,255,255,0.3)",
                 margin: "20px 0",
                 padding: "20px"
-            } }, h("h3", { key: '35c18dea106d6cd074dcf6c61c41d34f7d359fb2' }, "Section 3 Child 2"), h("div", { key: '28cf5aa4ed619f21f3d6f2ddadfe36b44795bbe3', id: "section_3_child_2_1", style: {
+            } }, h("h3", { key: '2da1dbed736b7f8a96aa9597d93d0c981c8ab819' }, "Section 3 Child 2"), h("div", { key: '94630c9823d9228d7691464710f6f31d5acf78c7', id: "section_3_child_2_1", style: {
                 minHeight: "30vh",
                 backgroundColor: "rgba(0,0,0,0.1)",
                 margin: "20px 0",
                 padding: "20px"
-            } }, h("h4", { key: 'fe802e9bbee550f1bb4a866c7df09ef9e21b7914' }, "Section 3 Child 2.1")), h("div", { key: '0dbe1348352eb0798b01c92aebe8107cbd0c340f', id: "section_3_child_2_2", style: {
+            } }, h("h4", { key: 'b826da943f332ed3df1113797a833c9a8bb38458' }, "Section 3 Child 2.1")), h("div", { key: 'f2e4e2cee7822f1c74180a869557d06d3a1789f4', id: "section_3_child_2_2", style: {
                 minHeight: "30vh",
                 backgroundColor: "rgba(0,0,0,0.1)",
                 margin: "20px 0",
                 padding: "20px"
-            } }, h("h4", { key: '6a29d94a297783a82463382b0257f7141299d815' }, "Section 3 Child 2.2")), h("div", { key: '6889b6a97734ebcc630b6f7917fc394aef9c70af', id: "section_3_child_2_3", style: {
+            } }, h("h4", { key: 'c9a6a9e25fe760e63c8fe44441c7ccaef4737dd1' }, "Section 3 Child 2.2")), h("div", { key: '4c068b6ff5776638978e380efd6764bf9de22645', id: "section_3_child_2_3", style: {
                 minHeight: "30vh",
                 backgroundColor: "rgba(0,0,0,0.1)",
                 margin: "20px 0",
                 padding: "20px"
-            } }, h("h4", { key: '326e0df9bf9938d891f3fd3c2be9afca8697c8e9' }, "Section 3 Child 2.3"))))), h("div", { key: '4312afccafc285cce7a9f148c846ad6b40dc3a89', style: {
+            } }, h("h4", { key: '761f59c65a2c4a3baf9dced8ef73cf1b594330be' }, "Section 3 Child 2.3"))))), h("div", { key: '6e6295358148951daf6f5cf192cde2e81c800f29', 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: 'c1c2f74ede0e21ff2d92f1c8a853eb757dcdc5f1', title: "On this Page", subTitle: "Page Title", sections: [
+            } }, h("dga-table-of-content", { key: '8149f311544b071818cb111927fbb71594ab06de', title: "On this Page", subTitle: "Page Title", sections: [
                 {
                     Name: 'Section 1',
                     Target: 'section_1',
@@ -121,7 +121,7 @@ export class NdsTableOfContentUsage {
                         }
                     ]
                 }
-            ] })), h("div", { key: '71ab68ecdd82646ee9986e579c6be10fa59de37e', style: {
+            ] })), h("div", { key: '287a7626cd02381931098d6c0c3dad2cf604208f', 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: 'a6603a4972c62e37dd8ed7d66407b8bf23b40e56', 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: '06f7fe0f513390bcdb7d40f37e581987b1e81eec', 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: 'f729ff9c0c1f326fcc67f25ef35611c719a8f2ab' }, h("h1", { key: 'bfc922218ca3e74a445ab5eebdb93fad8c8cfb0e' }, "Accordion Example"), h("div", { key: '9a48f23ae97a9ba26507d3441b3911bf29565193', style: { padding: '50px', display: 'flex', gap: '20px' } }, h("div", { key: '48c108f70e6820d4c5708bb1c40b198610420e95', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }, h("dga-accordion", { key: '2332511a539161dd6f1b13cc5187dd0aa75545d9', 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: 'ae2f780126ec01647a1fe08ffb8825d8c7315145', title: "Accordion Title", size: "md" }), h("dga-accordion", { key: 'd5424373038e988b74a887810570803a1312e8f6', title: "Accordion Title", size: "sm" }), h("dga-accordion", { key: '195444558862de2d285ba1de5b59bed86c68531e', 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: '94bebe730ae2346c5898a73d2157811f0712b302', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }))));
+        return (h("div", { key: '2c12863faabb147c879a0c555e7edcd107c7ff64' }, h("h1", { key: '140ed5011b336102d03c4f1f3013ecc845321a31' }, "Accordion Example"), h("div", { key: '968c0b79000aeb86ec0491ed912f66b9a81ccbf9', style: { padding: '50px', display: 'flex', gap: '20px' } }, h("div", { key: 'f3fec41067a37a6f77007c129d5ef86d9632b6db', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }, h("dga-accordion", { key: 'cf11e7f77a46a5f16b30d87a1a3b5ded362175fd', 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: 'ce1736b7394c809c95c486c32b64438d839d5707', title: "Accordion Title", size: "md" }), h("dga-accordion", { key: 'beafb882a6a69a71bd1f88d806ebf9334c2f0ae3', title: "Accordion Title", size: "sm" }), h("dga-accordion", { key: 'ead49a702f2c42b354230122d9939694775fe534', 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: 'da212916d04ef25ac3914e1285414223f2591714', 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: '1d9373f7dcf0eab8f2ae0cb0a0abd47d4db68181' }, h("h1", { key: 'e551c9af9268dd8c30380ff1e59ba3bc5bd986d8' }, "Accordion Example"), h("div", { key: '5afbccbb480a9e5f388c7ddf59ca421a7bdb197e', style: { padding: '50px', display: 'flex', gap: '20px' } }, h("div", { key: '284491a85247636e09e39fbe3f0b0c5529d9e6e4', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }, h("apex-chart", { key: '12a9a5b7bd07f7efc1c29283d172f7ff0759908e', id: "timeline-chart", options: {
+        return (h("div", { key: '006410bcb5c641bc6148164ed75397b1243d45ba' }, h("h1", { key: '15b075b71f3947996f2a93ee2f41fb5faef5a192' }, "Accordion Example"), h("div", { key: 'e23d496a337f7eb6d2d024c8c0abb83c33603030', style: { padding: '50px', display: 'flex', gap: '20px' } }, h("div", { key: 'abfd3e907ac0efeb588f0fa6bed303f04ab7fa38', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }, h("apex-chart", { key: '9892ebb751539b6dad563640b10b35eb9dfad169', 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: 'd5b575addc28ea25f33ca03c29408d2b20fac559' }, h("h1", { key: '5ec4ea50b8598e8187048ef3e091aea12713baef' }, "Avatar Example"), h("div", { key: '5d9a95c2a95d9a04f87107e26e2f8a8fc763c748', style: { padding: '50px', display: 'flex', gap: '20px' } }, h("div", { key: 'f42a047e5a6d2e1477a998b1d4eaef7cb86cba56', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }, h("div", { key: 'c57c5b0664c50f47c68a15ecbf5161b68414006b', style: { padding: "10px", display: 'flex', flexDirection: 'column', gap: '20px', backgroundColor: "black" } }, h("dga-avatar-group", { key: 'f0ec2fb074cbcb1d4d287412e801e83f66cb784c', stacked: false, max: 3, size: 120, dir: 'rtl', border: true }, h("dga-avatar", { key: '63f9afe53398a9c032e06a1b1d4d9e79d3607872', size: 120, border: false, type: "initials", text: "Ar" }), h("dga-avatar", { key: '953204bf2a54c434242ce7426f762992a201377b', size: 120, border: false, type: "initials", text: "Ar" }), h("dga-avatar", { key: 'dcefff60abe1efb4c40e2cbafb6ef7babe660998', size: 120, border: false, type: "initials", text: "Ar" }), h("dga-avatar", { key: '0767e83c94a8aed91595897f16846f78344d7245', size: 120, border: false, type: "initials", text: "Ar" }), h("dga-avatar", { key: 'df97c156b5344991332281e31788754f86a3ab3b', size: 120, border: false, type: "initials", text: "Ar" }), h("dga-avatar", { key: '66766a22aa545e184e6b9d9e5b4aa8ab05ddceaa', size: 120, border: false, type: "initials", text: "Ar" }), h("dga-avatar", { key: 'ef128c401394888e1f38785964cefc862eea4bea', size: 120, border: false, type: "initials", text: "Ar" })), h("dga-avatar", { key: '470c9d076f1bb66b1fe2be423c70f31f15fa8864', size: 120, border: false, square: true, sx: {
+        return (h("div", { key: 'b6db46eb54d6bc026b792ae4e34bf43c34e12ddc' }, h("h1", { key: '650a81dab7c9a3091855b06472d61496db974c18' }, "Avatar Example"), h("div", { key: '83cb2c22db77b4b5026b19389fb30566ebedc628', style: { padding: '50px', display: 'flex', gap: '20px' } }, h("div", { key: 'd015a99bcb0af112e3ccd1038d81d166a7a344e9', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }, h("div", { key: '550c23ce186402f7e406d8d3854a4cfc43e33ec8', style: { padding: "10px", display: 'flex', flexDirection: 'column', gap: '20px', backgroundColor: "black" } }, h("dga-avatar-group", { key: '67238484b36d6f88c204a1c37c9e461c2b5352b4', stacked: false, max: 3, size: 120, dir: 'rtl', border: true }, h("dga-avatar", { key: '7c61c7877f06d71d776347b7304972588e7ab594', size: 120, border: false, type: "initials", text: "Ar" }), h("dga-avatar", { key: 'bd74bcde6d8de547a97dc4961eb2889af11a81d4', size: 120, border: false, type: "initials", text: "Ar" }), h("dga-avatar", { key: '5d9ff65ba9a968cffdf3ab75d0b65c321ca35cf4', size: 120, border: false, type: "initials", text: "Ar" }), h("dga-avatar", { key: '9889e8d8c5288e55459b750ac42c0f1bc2bc72d2', size: 120, border: false, type: "initials", text: "Ar" }), h("dga-avatar", { key: '1d24f7b7ef79c55c0cc691654e9ea70520bf7812', size: 120, border: false, type: "initials", text: "Ar" }), h("dga-avatar", { key: 'bba0ea0b2df3aa287ea47f962eb1294df69fa237', size: 120, border: false, type: "initials", text: "Ar" }), h("dga-avatar", { key: '5e43558da9e9a4d3812978a5371399287f59ac34', size: 120, border: false, type: "initials", text: "Ar" })), h("dga-avatar", { key: 'f0d5e358fa0169d608d8668d1b7a7a6c8500d470', size: 120, border: false, square: true, sx: {
                 "& .dga-avatar": {
                     borderRadius: "100px"
                 }
-            } }), h("dga-avatar", { key: 'de5b33ef6b14c455ee807390069ee482c5df5a62', size: 120, border: true, square: true })), h("dga-avatar", { key: 'd8fe3e13f9e3bccfa80a848e7eb789eff34e0904', type: "icon", size: 120, icon: {
+            } }), h("dga-avatar", { key: '57eb45338affede6bab839017b5f49d9282806bb', size: 120, border: true, square: true })), h("dga-avatar", { key: '3e1c2b918869127ab892e154280169d161cf94b2', type: "icon", size: 120, icon: {
                 name: 'user',
                 variant: "stroke",
                 type: "rounded"
-            } }), h("dga-avatar", { key: 'd5ae86845358863ccf7eee1e713dd6b29b178588', type: "icon", size: 80, icon: {
+            } }), h("dga-avatar", { key: '3b0ca5592cdeffd23612192dc3b44498cf522c46', type: "icon", size: 80, icon: {
                 name: 'user',
                 variant: "stroke",
                 type: "rounded"
-            } }), h("dga-avatar", { key: '40fd38368ac24bde47582ae9c12407f1db47e8b9', type: "icon", size: 68, icon: {
+            } }), h("dga-avatar", { key: '424827e3b2ef389362000d0cac02b12d1550d8db', type: "icon", size: 68, icon: {
                 name: 'user',
                 variant: "stroke",
                 type: "rounded"
-            } }), h("dga-avatar", { key: '2da5a9fa10828ec88626cc8289ee958ea467192c', type: "icon", size: 48, icon: {
+            } }), h("dga-avatar", { key: 'ba9799f6cd71292b121ad255099c9349a63d982f', type: "icon", size: 48, icon: {
                 name: 'user',
                 variant: "stroke",
                 type: "rounded"
-            } }), h("dga-avatar", { key: 'e9c5dfc826802ee1d8e7b4533ba402999fb845b7', type: "icon", size: 40, icon: {
+            } }), h("dga-avatar", { key: '9471f2b0922e5b6bb2c186ccf30cf92207b57a20', type: "icon", size: 40, icon: {
                 name: 'user',
                 variant: "stroke",
                 type: "rounded"
-            } }), h("dga-avatar", { key: 'f880c6af3e442f4abd7daf6c0c3fa577a9b108d7', type: "icon", size: 32, icon: {
+            } }), h("dga-avatar", { key: '4b79004a8f042d65e990b3f31bcb8b7ee29a87a1', type: "icon", size: 32, icon: {
                 name: 'user',
                 variant: "stroke",
                 type: "rounded"
-            } }), h("dga-avatar", { key: '859579027619003668361fc457fca98f0b2b5a4d', type: "icon", size: 24, icon: {
+            } }), h("dga-avatar", { key: 'f8c1eeaf6f56c6487dee8d011985513c389aed2e', type: "icon", size: 24, icon: {
                 name: 'user',
                 variant: "stroke",
                 type: "rounded"
-            } })), h("dga-avatar-group", { key: 'b169bf1835c76762801cc921b119d132514e1c2d', stacked: true }, h("dga-avatar", { key: 'ef58e7b6e3fc28e8837b780ce5e6c9ee9d2e4b3c', type: "initials", text: 'AB', size: 40 }), h("dga-avatar", { key: '5bcfe61df7e6f23a651af2aac243112add7b21e2', type: "initials", text: 'CD', size: 40 }), h("dga-avatar", { key: 'dabbffe674359d0af3310b48a8b00bc778904328', type: "initials", text: 'SB', size: 40 }), h("dga-avatar", { key: '24fe71af5fe712c4c65f3036374dd96787a2aabd', type: "initials", text: 'WK', size: 40 }), h("dga-avatar", { key: 'c27007cef964cb29c20bd80820b66626d541bc27', type: 'initials', text: `+4`, size: 40 })), h("div", { key: 'ecab8c019e14bbbae7a4de41bb30ebb4f6e6d624', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }))));
+            } })), h("dga-avatar-group", { key: '2a550832318b9f9469204b6d47a5c0eefecfc792', stacked: true }, h("dga-avatar", { key: '26fbd7f51c95b957e4c1d779d0dbdc016209d54d', type: "initials", text: 'AB', size: 40 }), h("dga-avatar", { key: '0a5a4b36f4946fc76a93da3df488df4a41696a3b', type: "initials", text: 'CD', size: 40 }), h("dga-avatar", { key: '8b3f609b35a757dbf11f980452971f7f7c92e6b7', type: "initials", text: 'SB', size: 40 }), h("dga-avatar", { key: '30359e817cdbf2e200f5cfc7d8827f96e297a908', type: "initials", text: 'WK', size: 40 }), h("dga-avatar", { key: 'ebd5555420926537608f5f4c41c5bfd4e19024d9', type: 'initials', text: `+4`, size: 40 })), h("div", { key: 'e993287f98944f810b23fb09148420210e9187e4', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }))));
     }
     static get is() { return "dga-avatar-usage"; }
     static get states() {

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

@@ -4,7 +4,7 @@ export class DgaBreadcrumbsUsage {
         this.variant = 'neutral';
     }
     render() {
-        return (h("div", { key: '73cfb77a5d2347edc8f205e8fc77fbd858fa072c' }, h("h1", { key: '734c79ece3ef27aac3f1e38e57822def620a699f' }, "Breadcrumbs Example"), h("div", { key: '9a1ccce8621fe0857b935fa27f16577fe6346b64', style: { padding: '50px', display: 'flex', gap: '20px' } }, h("div", { key: '2a223dd95c807a167cb37cdca18e861347908568', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }, h("dga-link", { key: 'ba7c1642071790768b78353ec0b4f29637e4af91', label: "Link", variant: "neutral" }), h("dga-breadcrumbs", { key: 'f5661474b23ce42343fc52dd053fe96ff3dc7142', items: [
+        return (h("div", { key: 'd6e7a8bc04ed017ddde57a3f6618eb75c7f8d529' }, h("h1", { key: 'ce2229dead2e4454de243a1027024c7c3187df1d' }, "Breadcrumbs Example"), h("div", { key: 'a5f17436f6253d0637c16b21d595f9893d8dc615', style: { padding: '50px', display: 'flex', gap: '20px' } }, h("div", { key: '7105b831a37a52582d631685f94babafb4230469', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }, h("dga-link", { key: 'c5f534d77c261d2796b2b764d419d9d9388cf95d', label: "Link", variant: "neutral" }), h("dga-breadcrumbs", { key: 'f6360edce54da8d84f0ca7506c2fc1948f6156e5', items: [
                 {
                     label: 'Home',
                     path: '/',
@@ -22,7 +22,7 @@ export class DgaBreadcrumbsUsage {
                     label: 'Keyboards',
                     path: '/products/keyboards',
                 },
-            ], max: 3 })), h("div", { key: '44146a55fe56bf71bad7984dbef972530fb8e74b', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }))));
+            ], max: 3 })), h("div", { key: '4d3eed982301eb49e7ecbfe76142a760f2274f22', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }))));
     }
     static get is() { return "dga-breadcrumbs-usage"; }
     static get states() {

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

@@ -4,7 +4,7 @@ export class DgaButtonUsage {
         this.variant = 'neutral';
     }
     render() {
-        return (h("div", { key: 'd91662314fe3cc6f8d1ecb57415f34b0fe9cd087' }, h("h1", { key: 'c8efbf1b158b2c57def94db29946946baddd44e1' }, "Button Example"), h("div", { key: '4dfd2ed515d4bae6be904a94fe48a3af6976a366', style: { padding: '50px', display: 'flex', gap: '20px' } }, h("div", { key: '95975c7b9fbe3d910dec932d3aae63c25ed62b83', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }, h("dga-button", { key: 'a95d736b4b91d88fed10246253a4b0a7b2fd0bdd', label: "Click me", variant: "primary-brand", sx: {
+        return (h("div", { key: '36feb38cf978ae8ecc8c8713618ef745641c6ab9' }, h("h1", { key: 'd6b3fd4a63f9b1813c5d9bc0a6e53cde751207e7' }, "Button Example"), h("div", { key: 'dfe331f83aba64614af31db6b2937845a449c61b', style: { padding: '50px', display: 'flex', gap: '20px' } }, h("div", { key: '6091b32f210ab162a3c64f8471cd74a4a519b928', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }, h("dga-button", { key: '5de97372b36c33a077e0c526f8d8e9af4646fc46', label: "Click me", variant: "primary-brand", sx: {
                 '&': {
                     fontSize: '18px',
                     fontWeight: 'bold',
@@ -17,12 +17,12 @@ export class DgaButtonUsage {
                 '.dga-btn:hover': {
                     backgroundColor: 'blue',
                 },
-            } }), h("dga-button", { key: '8a4a2cb6b73df3167cb25a7408811153d66ee3fa', label: "Brown Button", variant: "primary-neutral" }), h("dga-button", { key: '0de262bbf249949cdd4197916c47a049ce97a5e4', label: "Button", variant: "des-transparent" }), h("dga-button", { key: '40ce6f41c946ea5735fa2acec7734fa48bdafc27', label: "Source code", variant: "secondary-outline", leadIcon: true, leadIconType: "source-code", leadIconProps: { variant: 'stroke', type: 'standard' } }), h("dga-button", { key: 'e30e05963dd8dde07a7cdc31c44726728f073f88',
+            } }), h("dga-button", { key: '1a9b95cf741013dfcaae003664d8cbc55ac7eabd', label: "Brown Button", variant: "primary-neutral" }), h("dga-button", { key: '5d38fef4a44bf62236c2af8d2c5a70cf4e06d315', label: "Button", variant: "des-transparent" }), h("dga-button", { key: 'c21d5047170fc2624ca73809f0d75cc3eeddb12e', label: "Source code", variant: "secondary-outline", leadIcon: true, leadIconType: "source-code", leadIconProps: { variant: 'stroke', type: 'standard' } }), h("dga-button", { key: 'a963ad5d291a89e84af1cf1b4d8f47a1ba98551f',
             // 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, trailIconType: "link-square-01", trailIconProps: {
                 variant: 'stroke',
                 type: 'standard',
-            } })), h("div", { key: '499945ad5956cd9ce9578bb6488cd7b7124fbf99', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }))));
+            } })), h("div", { key: '120c41b3d7d72d732a8db890e257330c0676235f', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }))));
     }
     static get is() { return "dga-button-usage"; }
     static get states() {

package/dist/collection/usage/dga-button-v2-usage.js

@@ -4,13 +4,13 @@ export class DgaButtonUsage {
         this.variant = 'neutral';
     }
     render() {
-        return (h("div", { key: 'd75310f2bc7ca01b7e2d4bd43b9b6be05e09bcfe' }, h("h1", { key: '46dc5a496da4f1c45efb3d0e61fa6462568fccff' }, "Button Example"), h("div", { key: '2afbd6baed309c466981a69c0bfe8a10e1fcb07e', style: { padding: '50px', display: 'flex', gap: '20px' } }, h("div", { key: 'fc332d9ed62b5f2366a5f76a5ae7d81159db8942', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }, h("dga-flex", { key: '4de0142e67fbf2062a15ca4c38178dc23b84bd30', direction: "column", spacing: 16 }, h("dga-button-v2", { key: 'ea132c63b8afe82ed2f61219fe0aa2d860c4c3f0', label: "Button", variant: "primary", size: "lg" }), h("dga-button-v2", { key: '63aabf6fe925653214372b4b277ee86f787919a7', label: "Button", variant: "primary", size: "md" }), h("dga-button-v2", { key: '5194bf0ee715857ae90f9ddbf3d96ec7b6a5b930', label: "Button", variant: "primary", size: "sm" }), h("dga-button-v2", { key: 'afce78b7ed3f54cfa629a27bd061826f5231db87', label: "Button", variant: "neutral", size: "lg" }), h("dga-button-v2", { key: '4818b13893b0fc96a879aefecaf2808ca5a7a2fe', label: "Button", variant: "neutral", size: "md" }), h("dga-button-v2", { key: '1ce23edde86ff821223efbd5e658519cc6103786', label: "Button", variant: "neutral", size: "sm" }), h("dga-button-v2", { key: 'bcfd97cfae0942467788b8181261f0de8a4b3963', label: "Button", variant: "secondary-solid", size: "lg" }), h("dga-button-v2", { key: 'acf7a277de0e6ed67a7b70c094bf4c19ac8bb218', label: "Button", variant: "secondary-solid", size: "md" }), h("dga-button-v2", { key: '738bb72e60970c2d4396d28926c03cb46b8b6017', label: "Button", variant: "secondary-solid", size: "sm" }), h("dga-button-v2", { key: '8caf2dcb73c28eafe3606145d5b2fc74c408fc9c', label: "Button", variant: "primary", destructive: true, size: "lg" }), h("dga-button-v2", { key: '5aa9ec55933d9493648c7e40f8f2fa2f51c03675', label: "Button", variant: "primary", destructive: true, size: "md" }), h("dga-button-v2", { key: 'eb976919824061660f67b70b09781df16dc53e15', label: "Button", variant: "primary", destructive: true, size: "sm" })), h("dga-button-v2", { key: 'afe732ecf8ce28b938baafa981fe514077d02e28', label: "Button", variant: "primary", onColor: true }, h("dga-button-leading-icon", { key: 'd43427e858949a2a131b8817218d87f31cdd9149', name: "link-square-01", size: 16, color: "red" })), h("dga-button-v2", { key: '77c74511dc1da2f049a0fb53594d1448a0bb3613', label: "Source code", variant: "secondary-outline", leadIcon: true, leadIconProps: { name: 'source-code', variant: 'stroke', type: 'standard' } }), h("dga-button-v2", { key: '2160e56b0e12287806341fc0dbb8bfa35e832fa2',
+        return (h("div", { key: '6abd2b56ff500a5e05cc52cc7c821285076d862d' }, h("h1", { key: '876e7804def89bfceb5107afb9a4e89b13d23ad0' }, "Button Example"), h("div", { key: '7fd43dc668e0eb7543078ea02ad69aded0d6abbf', style: { padding: '50px', display: 'flex', gap: '20px' } }, h("div", { key: 'e327a5abcf2101a8d3453492c96fbcccb1414703', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }, h("dga-flex", { key: 'ed48913dd2e0812794cc4540165e5aa74e081ba8', direction: "column", spacing: 16 }, h("dga-button-v2", { key: '60c4e03ddd3f5d6146b5718f99c8956613815328', label: "Button", variant: "primary", size: "lg" }), h("dga-button-v2", { key: '8ac3a9ae755dcd3bcea86fadaaf419fb22072bc1', label: "Button", variant: "primary", size: "md" }), h("dga-button-v2", { key: '6ec5e984358e263f8b45ada39e4d2201c74d57c7', label: "Button", variant: "primary", size: "sm" }), h("dga-button-v2", { key: '7fae9d69c6a6fe52eca6f41bc2225591cbeaf884', label: "Button", variant: "neutral", size: "lg" }), h("dga-button-v2", { key: '3e519d8543ca235facda3fc04bccdff0baa6064b', label: "Button", variant: "neutral", size: "md" }), h("dga-button-v2", { key: 'bbf1805a416c5cc12abc6aeffc7e60594cbbe855', label: "Button", variant: "neutral", size: "sm" }), h("dga-button-v2", { key: 'b1e9a6eaed77e8568d4eb96563142380dd23bdbb', label: "Button", variant: "secondary-solid", size: "lg" }), h("dga-button-v2", { key: 'd0dcffc12c90b085b38e27f778d695169883fdbf', label: "Button", variant: "secondary-solid", size: "md" }), h("dga-button-v2", { key: 'afc5acb3006e5adbf044e736c63bb6d012cecc66', label: "Button", variant: "secondary-solid", size: "sm" }), h("dga-button-v2", { key: 'dfc43db38ef35294a02e13d9f650ea3bb992531b', label: "Button", variant: "primary", destructive: true, size: "lg" }), h("dga-button-v2", { key: '3367dee19e131ffc0d5cfd2bc8bdd1d633b68fec', label: "Button", variant: "primary", destructive: true, size: "md" }), h("dga-button-v2", { key: 'abde37946b36a6cc62d3985d1abd7a0c7debf50c', label: "Button", variant: "primary", destructive: true, size: "sm" })), h("dga-button-v2", { key: '0883216039c7a521792126ec667d10f53ed0ea4a', label: "Button", variant: "primary", onColor: true }, h("dga-button-leading-icon", { key: '34c17aa0476b904279e2c36fa6da1344e16f7381', name: "link-square-01", size: 16, color: "red" })), h("dga-button-v2", { key: '258c9678b173d1970e20b8397f767d6f251726a7', label: "Source code", variant: "secondary-outline", leadIcon: true, leadIconProps: { name: 'source-code', variant: 'stroke', type: 'standard' } }), h("dga-button-v2", { key: 'b0ac151d569e230c95159eb22ee43b58fd8f90d0',
             // 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: '7434f17b292d07a86a6bd7e3dcd35f55e73f7491', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }))));
+            } })), h("div", { key: '5069571a45848b076a797ab7877545dc1efed919', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }))));
     }
     static get is() { return "dga-button-v2-usage"; }
     static get states() {

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

@@ -5,12 +5,12 @@ export class DgaCardUsage {
         this.selected = false;
     }
     render() {
-        return (h("div", { key: '53693c694638e669d8850e60bee275313ab1db96' }, h("h1", { key: 'aabf9d383bbbca1b753b94627b3dc2e5282eec8f' }, "Card Example"), h("div", { key: 'f9c6358b0b5c0b5654d1fed6688fe5b03b05c63b', style: { padding: '50px', display: 'flex', gap: '20px' } }, h("div", { key: '28477fc135f6f963af274b3f291e7d2819068028', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }, h("dga-card", { key: '1cdb4af64af4997fcab89b518177e3220a684664', type: "expanded", cardTitle: "Card Title", description: "Card content placeholder text goes here", showFeaturedIcon: true }, h("div", { key: '44239422cf51b637ba567a7b45ace14a7b9df7a2', slot: "collapse-content" }, "dgdsgdfgdfg")), h("dga-card", { key: '81aee9fcfbabbf97999a9f9e33f8e7cdb90b788e', type: "selectable", cardTitle: "Card Title", description: "Card content placeholder text goes here", isSelected: this.selected, onCheckboxChange: () => (this.selected = !this.selected) }), h("dga-card", { key: 'ba2871c067ec9043b6dee632a45e4ef3f7e17bc7', cardTitle: "Card Title", sx: {
+        return (h("div", { key: '139cf16aa0eef61fbfa90b4e9634872886967191' }, h("h1", { key: 'ce721f60451de00dc160f158288cb7a073a17b7f' }, "Card Example"), h("div", { key: 'da08682b2193085ab666cbaf1147182eff075b5a', style: { padding: '50px', display: 'flex', gap: '20px' } }, h("div", { key: 'f924ab80749bec448c80e32f9af0f6941a371435', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }, h("dga-card", { key: 'bf1d05e88580a5aa0295957c4e550ddb6a467fdc', type: "expanded", cardTitle: "Card Title", description: "Card content placeholder text goes here", showFeaturedIcon: true }, h("div", { key: 'cd902b46247ad1502f940618a3907c2c35165412', slot: "collapse-content" }, "dgdsgdfgdfg")), h("dga-card", { key: 'e6e7c9f10f54bdd366d3d48f1a35da6391864147', type: "selectable", cardTitle: "Card Title", description: "Card content placeholder text goes here", isSelected: this.selected, onCheckboxChange: () => (this.selected = !this.selected) }), h("dga-card", { key: '7ec0551f901ea01e66f0ac1409bfe84abfe61005', cardTitle: "Card Title", sx: {
                 '& > .card': {
                     backgroundColor: 'red',
                     height: '400px',
                 },
-            } }), h("dga-card", { key: '369f656423ba9b31b61f29b5533bb5aef4c7cc64', cardTitle: "No Shadow", effect: "no-shadow" }), h("dga-card", { key: 'bffd26b2e39533fd78937c480dd5a60319819d39', cardTitle: "Stroke", effect: "stroke" }), h("dga-card", { key: 'f2ff4fe8baa695121332a1b97096a509940c1688', cardTitle: "With Shadow", effect: "with-shadow" })), h("div", { key: '7c229ec79bab4b616b0562f231a7f0531f8d31fa', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }))));
+            } }), h("dga-card", { key: 'b82d82591113cc0e485a937ad90ab9e40af3bc76', cardTitle: "No Shadow", effect: "no-shadow" }), h("dga-card", { key: 'ffd3595ddb5bb87925064ee40cc051df15133ab0', cardTitle: "Stroke", effect: "stroke" }), h("dga-card", { key: 'c2358fa77a47a3385de027b607858c911ca65641', cardTitle: "With Shadow", effect: "with-shadow" })), h("div", { key: '2fba0a6c97d268de7a8e20543c9fde5606e6878a', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }))));
     }
     static get is() { return "dga-card-usage"; }
     static get states() {

package/dist/collection/usage/dga-card-v2-usage.js

@@ -5,17 +5,17 @@ export class DgaCardV2Usage {
         this.selected = false;
     }
     render() {
-        return (h("div", { key: '93a68ec988ceeb90a9554710e7d3704739f89d05' }, h("h1", { key: '1bd199a057535015a6ae453da69ec5e7a92e336e' }, "Card Example"), h("div", { key: '521f1e23cd5f551671830d66711d08c98f5f1a90', style: { padding: '50px', display: 'flex', gap: '20px' } }, h("div", { key: '40fed1a7439bac93cdcd44d4f9e5624ca676a008', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }, h("dga-card-v2", { key: '6aeef70617cb7794758f21a7f0078f136a735785', type: "default", sx: {
+        return (h("div", { key: '2a079bc7bd8b1a8405b741383135ceb23a200757' }, h("h1", { key: '67a148a2d1ddcbd05a5d8d21536d2906d1b58322' }, "Card Example"), h("div", { key: '253912a446ec3751c7852adf345ea43aec644e99', style: { padding: '50px', display: 'flex', gap: '20px' } }, h("div", { key: '80707f8e2814d1455d18744ce65ee5491f40acb5', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }, h("dga-card-v2", { key: 'e02d4770ab1e8f1e08021f06845c2e33e5a5b584', type: "default", sx: {
                 "& > .card": {
                     backgroundColor: 'red',
                     height: '400px',
                 }
-            } }, h("dga-card-content", { key: 'e3a8ccf36b3b4f034a8edd27822fcae8385683b6' }, h("dga-featured-icon", { key: 'a3bf6de4c475bc20e5d97dfb218122d8b499bd4d', color: 'brand', variant: 'light', size: 'lg', icon: {
+            } }, h("dga-card-content", { key: '0c93507505e36e07df787fe3d742709a1595dffa' }, h("dga-featured-icon", { key: '9379fb3aee235fe2b3e6752bdb54fd9aebe6c65c', color: 'brand', variant: 'light', size: 'lg', icon: {
                 name: 'checkmark-circle-02',
                 variant: 'stroke',
                 type: 'sharp',
                 size: 24
-            } }), h("dga-flex", { key: 'a147adb3eea11112523e109ff622d35a5ad97cba', direction: 'column', spacing: 8 }, h("h4", { key: 'd06eda291ad988551b77fdc63f9ce7a02a6fe5f8', class: "text-lg-bold" }, "Card Title test"), h("p", { key: '19d205553475d147375288585165df844d1d2546', class: "text-md-regular" }, "Card content placeholder text goes here")), h("dga-flex", { key: '9f314794737681b02c69a2a32d80043ddaad3c39', direction: 'column', spacing: 4 }, h("dga-rating", { key: '23b4fc85419209631d120046fc3fd569b9f8b7e1', value: 4, size: 'sm' }), h("span", { key: '26b0ab3c2ff8466ec8af0f9ad4bf44e4b3863b54', class: "text-xs-regular" }, "12 reviews"))), h("dga-card-actions", { key: '50bd386630d6a677980454e9789df540d4b024f2' }, h("dga-button-v2", { key: '4ce450f707f1f4b3a6e7e13b17ec444c510b772f', label: "Primary", size: "lg", variant: "primary", onClick: () => console.log('Primary Action') }), h("dga-button-v2", { key: '9fc340583d4036f171ce76a3cfa6776b1c5ea1e9', label: "Secondary", size: "lg", variant: "secondary-outline", onClick: () => console.log('Secondary Action') })), h("dga-card-expandable-content", { key: '85020aef38ae7676bbfd62a3737855a525ec1151' }, h("div", { key: '81e1a9d23929f44c41cc01f56414d9d977e7b992' }, "Expanded Content"), h("p", { key: 'dc4a1332198d009d686df8fa49971732b7aac1bd' }, "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Earum voluptatum, facere mollitia quas natus nihil, doloribus repudiandae, quasi vitae nobis deserunt similique magni explicabo. Molestiae unde dolorem expedita aut recusandae.")))), h("div", { key: '5e09e3c2f5fc56dda41259bec4d3e357abe5693a', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }))));
+            } }), h("dga-flex", { key: '40acb7b93c7165a66772628d8f6b81d26b5f13e4', direction: 'column', spacing: 8 }, h("h4", { key: 'b2aae11b0b45a56980860974b059df564c1e153e', class: "text-lg-bold" }, "Card Title test"), h("p", { key: '506b32d4e5846da4ea8237960a161f5c0cdfd2bf', class: "text-md-regular" }, "Card content placeholder text goes here")), h("dga-flex", { key: 'c8a86fad44c04238e6d77a3c630e367a618278b4', direction: 'column', spacing: 4 }, h("dga-rating", { key: '8b0aea240c5c26907fe05370fa66586847824efe', value: 4, size: 'sm' }), h("span", { key: 'ee4aea9c46643510aef3b09b87aab068f2d7eac7', class: "text-xs-regular" }, "12 reviews"))), h("dga-card-actions", { key: '83c1314ec71bbcef1b26e7e99ff2cf04ebe7e5f4' }, h("dga-button-v2", { key: 'fd2e641170650436504ce668296f155d7de41a34', label: "Primary", size: "lg", variant: "primary", onClick: () => console.log('Primary Action') }), h("dga-button-v2", { key: 'cd82cdc5be48843a09edfe7b881cbd20150613e4', label: "Secondary", size: "lg", variant: "secondary-outline", onClick: () => console.log('Secondary Action') })), h("dga-card-expandable-content", { key: '8b0df83f24442a3ff63849ec7df29e7ddc0476af' }, h("div", { key: 'c1b6247fe9333a43143fcd2b87ea27c97ea29a3a' }, "Expanded Content"), h("p", { key: 'db28ba34719b3785dcdbcc811352a653aceb5c11' }, "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Earum voluptatum, facere mollitia quas natus nihil, doloribus repudiandae, quasi vitae nobis deserunt similique magni explicabo. Molestiae unde dolorem expedita aut recusandae.")))), h("div", { key: '1e3c8ce2d28f68e8397118fbbe4896fa4a35c958', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }))));
     }
     static get is() { return "dga-card-v2-usage"; }
     static get states() {