@platformscode/core 0.0.42 → 0.0.44

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: '93e8a534cdf0510938fddc6c71b50f9f187e6152' }, h("h1", { key: 'f685f95bf42630668e6bb87a4028fc33454a5b06' }, "Button Example"), h("div", { key: '11541348742b59c5a9f8a5a5bed82ed2ad061396', style: { padding: '50px', display: 'flex', gap: '20px' } }, h("div", { key: '3fc6da5081ee18fdde08258dc9f45bc71c28fbf9', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }, h("dga-flex", { key: '89dd10ed91dcf4fd1ede6f24a04aa509056f104c', direction: "column", spacing: 16 }, h("dga-button-v2", { key: '2d47c266e8ad231d663d87e4227683708954e559', label: "Button", variant: "primary", size: "lg" }), h("dga-button-v2", { key: 'f3baec3e2915dbf0def6d0077875efd3c1d3b2f3', label: "Button", variant: "primary", size: "md" }), h("dga-button-v2", { key: '6048983c1b1957a2fd7a0547cbb78a4440780442', label: "Button", variant: "primary", size: "sm" }), h("dga-button-v2", { key: '4706e798f37607b7415d3fe060a4de13a1c29780', label: "Button", variant: "neutral", size: "lg" }), h("dga-button-v2", { key: 'd509b14e82495c156118cae3e94192ece9cba6ba', label: "Button", variant: "neutral", size: "md" }), h("dga-button-v2", { key: '97f3e4a7d2b68040ba71631bde80ce24030ced5d', label: "Button", variant: "neutral", size: "sm" }), h("dga-button-v2", { key: '90cc0c839970d1eb57aa7ab03b8ef549ae8c87d9', label: "Button", variant: "secondary-solid", size: "lg" }), h("dga-button-v2", { key: 'f6dac77cea26b99aa9c3e529580f2b84e4ea3339', label: "Button", variant: "secondary-solid", size: "md" }), h("dga-button-v2", { key: '9dd7afd56cb8bf3dcbd1eb410930453616d5e17a', label: "Button", variant: "secondary-solid", size: "sm" }), h("dga-button-v2", { key: '1ad41574bbb4620a5e89d42ea910a5e76023039e', label: "Button", variant: "primary", destructive: true, size: "lg" }), h("dga-button-v2", { key: 'e84b533c0c642c43e5a96c4375d815c5c0c579f8', label: "Button", variant: "primary", destructive: true, size: "md" }), h("dga-button-v2", { key: '897cf9772232073d72f3bf968a75ba25655050a0', label: "Button", variant: "primary", destructive: true, size: "sm" })), h("dga-button-v2", { key: 'bfe0dc83e184ee3a96094ae9df700233945a467f', label: "Button", variant: "primary", onColor: true }, h("dga-button-leading-icon", { key: '50081c16bbe5f639683fa5e61bf30d7565834bda', name: "link-square-01", size: 16, color: "red" })), h("dga-button-v2", { key: '4d80da0b9f949940798328a80173b16027712dd8', label: "Source code", variant: "secondary-outline", leadIcon: true, leadIconProps: { name: 'source-code', variant: 'stroke', type: 'standard' } }), h("dga-button-v2", { key: '7dbeee7bc5832202920fd13f68fb9abb215961e7',
+        return (h("div", { key: '38539749634d6b195e22059a1eac536c66a754d3' }, h("h1", { key: '179b021eb30fb095340bd3a89d47a0a0d75222c9' }, "Button Example"), h("div", { key: '47a6183091fbaec32f3c381274061ee64b7f6de3', style: { padding: '50px', display: 'flex', gap: '20px' } }, h("div", { key: '8cfd5f62b020e2247cc60dcbd53de8a148ff898a', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }, h("dga-flex", { key: '4b52444bf4a00991771529448768693f60f72f59', direction: "column", spacing: 16 }, h("dga-button-v2", { key: 'c05daad387e3b5c9048fbafd70eb049291f33327', label: "Button", variant: "primary", size: "lg" }), h("dga-button-v2", { key: 'fed388a8cbff6495fa2f68f5a16b167657e0fb97', label: "Button", variant: "primary", size: "md" }), h("dga-button-v2", { key: '5aa29ebc0df036b0d54c724033e70b878216c449', label: "Button", variant: "primary", size: "sm" }), h("dga-button-v2", { key: '7c29be8b5cbf2595b9b156e3a53633fa4bcc71e5', label: "Button", variant: "neutral", size: "lg" }), h("dga-button-v2", { key: '23167aae4473f96ce3c27aadf52a67c74393f624', label: "Button", variant: "neutral", size: "md" }), h("dga-button-v2", { key: 'db8ae47dbed468dfee2dea526690424a6f076dc1', label: "Button", variant: "neutral", size: "sm" }), h("dga-button-v2", { key: '8f9bb515aa89b0d4bc2289a87707e8648ac717d6', label: "Button", variant: "secondary-solid", size: "lg" }), h("dga-button-v2", { key: '60d1c025040cbf7cf103d80f218a4a9bf4053c00', label: "Button", variant: "secondary-solid", size: "md" }), h("dga-button-v2", { key: '9cc59423a773badb66655524cf34855e3345d459', label: "Button", variant: "secondary-solid", size: "sm" }), h("dga-button-v2", { key: 'eb8eccbd8f08f0012120fd37776c9ce542776420', label: "Button", variant: "primary", destructive: true, size: "lg" }), h("dga-button-v2", { key: 'fabebea5eca2991c80053a9515076ea8e934205f', label: "Button", variant: "primary", destructive: true, size: "md" }), h("dga-button-v2", { key: '4a02c6ab9b4f40b95c188e5d3e3f07c544bd2d5c', label: "Button", variant: "primary", destructive: true, size: "sm" })), h("dga-button-v2", { key: '0cb97cae6cb74ddb3bb028a4dc401b63895e1119', label: "Button", variant: "primary", onColor: true }, h("dga-button-leading-icon", { key: '6f272448074ce3a64b1787c01f45dc89c6fc7dfc', name: "link-square-01", size: 16, color: "red" })), h("dga-button-v2", { key: 'ae44bde17bd23c4c59401c3e44f1a0d2fcd130f2', label: "Source code", variant: "secondary-outline", leadIcon: true, leadIconProps: { name: 'source-code', variant: 'stroke', type: 'standard' } }), h("dga-button-v2", { key: '5a6f655862ccefb4b717866642ad70637f22f325',
             // 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: 'dce63e3e728fe8c771efe21b7b2266e2179b34c0', style: { display: 'flex', flexDirection: 'column', gap: '20px', backgroundColor: '#074D31', padding: '20px' } }, h("nds-button", { key: '75b7a2ffbaaa620cef29fd4a715d2bfce1a2a62d', label: "Button", variant: "primary-brand", size: "lg" }), h("nds-button", { key: '6a365df713c9306e537e905b2ac571d8c5066764', label: "Button", variant: "primary-brand", size: "lg", selected: true }), h("nds-button", { key: '8936024c769ef277d82d6f1ec7d79cd086b42dc2', leadingIcon: 'link-square-01', size: 'sm' }, h("dga-icon-v2", { key: '177803e3a86a468faa282a8593bbe289f5b2ea1e', slot: 'leading-icon', name: 'source-code', variant: 'stroke', type: 'rounded', size: 16, color: 'white' }))), h("dga-icon-v2", { key: '038d94fd691a71142218f1d3708621a29fe40c15', name: 'link-square-01', variant: 'stroke', type: 'rounded', color: 'red' }), h("div", { key: '0e36f957af0065debbdcd737c56c77393b42f57b', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }))));
+            } })), h("div", { key: 'bceba1954d558f547eaa674982c15e390a12b386', style: { display: 'flex', flexDirection: 'column', gap: '20px', backgroundColor: '#074D31', padding: '20px' } }, h("nds-button", { key: '83948902550943b9f6ebbe4a86e760222a048579', label: "Button", variant: "primary-brand", size: "lg" }), h("nds-button", { key: 'ca5f31edf842040f99ffe009f354f682ba5463d4', label: "Button", variant: "primary-brand", size: "lg", selected: true }), h("nds-button", { key: '50c937fdc225dac5a70d8fa7de90941f8ca96e8c', leadingIcon: 'link-square-01', size: 'sm' }, h("dga-icon-v2", { key: '338ae3e98d07a83dc5865fda73c4544937843ce8', slot: 'leading-icon', name: 'source-code', variant: 'stroke', type: 'rounded', size: 16, color: 'white' }))), h("dga-icon-v2", { key: '987488070fa82dbb56251f05bfb16cc640bc2e1a', name: 'link-square-01', variant: 'stroke', type: 'rounded', color: 'red' }), h("div", { key: '9030167089a53b32c4c937b3420a3cfbe7c94ae1', 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: '860e518b969456a06f966cdc761e6bf2d5964994' }, h("h1", { key: '3bbc6620975ef82775b294ab0762860538160ac3' }, "Chip Example"), h("div", { key: '9c243a58a360b5c79a175bc9ef0e770a520f900e', style: { padding: '50px', display: 'flex', gap: '20px' } }, h("div", { key: '4e6f4aa140cf41554ebf3db18d7886dd9eab161f', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }, h("nds-chip", { key: '2be97d733b5e63de2853901dce34cc86d1993624', label: "Label", variant: "neutral",
+        return (h("div", { key: '65c2b40ea3a2430e62634055cbb124ab7c248ba2' }, h("h1", { key: 'dbda09cd3c422fd42a71db4fe06c835fdb645756' }, "Chip Example"), h("div", { key: '1f3bd9225950e6bdb4bfdd2b8982c1db6bea1501', style: { padding: '50px', display: 'flex', gap: '20px' } }, h("div", { key: '382636be30052aa3b45432c1de27dd6e9a482ba1', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }, h("nds-chip", { key: '6945b1e42fa4be494480d26cef41d2099dbab7cd', label: "Label", variant: "neutral",
             //   outlined={false}
-            rounded: false, size: "lg" }), h("nds-chip", { key: '4c4b89ef047ef7931b03889a5485ba86596cfc44', label: "Label", variant: "success", rounded: false, size: "lg", onChange: isSelected => {
+            rounded: false, size: "lg" }), h("nds-chip", { key: '1ba21e21faad9288d3e358d8556dca3b255f5063', label: "Label", variant: "success", rounded: false, size: "lg", onChange: isSelected => {
                 console.log(isSelected, 'hi');
                 this.isSelected = isSelected;
-            }, selected: this.isSelected }), h("nds-chip", { key: '87d39a4044d00baf1d899057aa926692c5f52c0f', label: "Label", variant: "success", rounded: false, size: "lg", onChange: isSelected => {
+            }, selected: this.isSelected }), h("nds-chip", { key: '32d40858d333b3a2bc2fa453285377dfa47b9c42', label: "Label", variant: "success", rounded: false, size: "lg", onChange: isSelected => {
                 console.log(isSelected, 'hi');
-            }, selected: false }), h("nds-chip", { key: '85ab156161f0c208bea3a2a02e20713f6a516341', label: "Label", variant: "success", rounded: false, size: "lg", disabled: true }), h("div", { key: 'ecdee48745e665a86c60c00a38b4bd6c425be3e3', style: { display: 'flex', flexDirection: 'column', gap: '20px', backgroundColor: '#074D31' } }, h("nds-chip", { key: 'e7827fb541f18725b15daae7ece8da332190f533', label: "Label", variant: "on-color", rounded: true, size: "lg", disabled: true }))))));
+            }, selected: false }), h("nds-chip", { key: 'cad7af083ab4163e84407bb4a0e723cf71dc515a', label: "Label", variant: "success", rounded: false, size: "lg", disabled: true }), h("div", { key: 'f8a5b7159ef868e1127d57571b8b8734d6c2af2c', style: { display: 'flex', flexDirection: 'column', gap: '20px', backgroundColor: '#074D31' } }, h("nds-chip", { key: '4124877b1a5516adc97c56e31521f1182d55b9b4', 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: '41cb83b12e53b13b9effe2f8609134cf019f0811', id: this.componentId, style: this.rootStyles }, h("span", { key: '0a313e962878a8350292a8461cd2fa38671dff70', 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: 'e44e1083386de7d996ec9048dd38d1786e456c63', id: this.componentId, style: this.rootStyles }, h("span", { key: '6d329c867c1ef1687b156e3f6921da3d01ff959e', 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: '7c7975ffd21cfefdb4a6d647ed7cf3c39ceb3e8e', name: "trailing-icon" }, this.leadingIcon && (h("span", { key: '975ffb1841600f309f7e34fe12d4e8688ada70f4', class: "chip-icon" }, h("dga-icon-v2", Object.assign({ key: '00ba2d466ed9c9c338cbef68c26ed8cf23a3cef0', name: this.leadingIcon }, this.leadingIconProps))))), this.label, h("slot", { key: '56b1141e0abda87b51735a86750fde2bd6029587', name: "trailing-icon" }, this.trailingIcon && (h("span", { key: 'b081d7bfadfe8fda9c50fde82e26adb2e917693d', class: "chip-icon" }, h("dga-icon-v2", Object.assign({ key: 'fefcf7dcc6190cc859a700d69fec9ff0d00f0bf1', name: this.trailingIcon }, this.trailingIconProps))))))));
+            } }, h("slot", { key: 'c5f27f9edbf902f0fac372df8d8fba249ac73bc7', name: "trailing-icon" }, this.leadingIcon && (h("span", { key: 'fbefd75f1ea6bbd81548df831bc4910d00b142eb', class: "chip-icon" }, h("dga-icon-v2", Object.assign({ key: 'a2c41d4d75f7b5205a5757f0853c7739c4ffd487', name: this.leadingIcon }, this.leadingIconProps))))), this.label, h("slot", { key: '7adbf5a0ba45d5d21eebabff2ba2a3b3012b1a35', name: "trailing-icon" }, this.trailingIcon && (h("span", { key: '498dd75b98bcda692ae42b9f838bc1b9fbf4849f', class: "chip-icon" }, h("dga-icon-v2", Object.assign({ key: 'd36a495fc1e70035c43b98ca5a7c76ba13faf3c3', 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: 'd002311bd3f0672a11bac825a1a48ee214fef6cc' }, h("dga-flex", { key: '0fce5e4226e94fc6d1d73b93d1a28fd0e11a62e4', direction: "column", spacing: 16 }, h("nds-floating-button", { key: '45437ce9669d7bb74ee1891939cd55c02d5c3fb9', variant: "primary-neutral", label: 'Button', iconOnly: true, icon: 'plus-sign' }), h("nds-floating-button", { key: 'eb2013374e655b23ec38ed4359abfd4614a19349', variant: "primary-neutral", label: 'Button' }), h("nds-floating-button", { key: '486084586d888fa856df49a942de2398698d438f', variant: "primary-brand", label: 'Button', iconOnly: true, icon: 'plus-sign' }), h("nds-floating-button", { key: 'e36136669b6ca2c93ba2d965c0e61e4deee767f8', variant: "primary-brand", label: 'Button' }), h("nds-floating-button", { key: '833afde4ca5a87c02d6aa9764ee6135183d5a550', variant: "secondary-solid", label: 'Button', iconOnly: true, icon: 'plus-sign' }), h("nds-floating-button", { key: '4be07504aa8028d348025f4a16c7546dea389e33', variant: "secondary-solid", label: 'Button' })), h("div", { key: '572bcfb06fa19010f5bc2c9c21fb8b5418ce65e5', style: { backgroundColor: '#074D31', padding: '20px', marginTop: '20px' } }, h("dga-flex", { key: '9d13e5ff9a4e5ccc36873a3cf237ddba3b76fe5d', direction: "column", spacing: 16 }, h("nds-floating-button", { key: '6334d6d6034eba00a1abf2405edd537d656257e7', variant: "primary-neutral", label: 'Button', iconOnly: true, icon: 'plus-sign', inverted: true }), h("nds-floating-button", { key: '66f2e0c5d27ace954c3c251999997cb4bfd00f26', variant: "primary-neutral", label: 'Button', inverted: true }), h("nds-floating-button", { key: '71928722f46bf2bd686ec4a194eff07a0d9f3b3d', variant: "primary-brand", label: 'Button', iconOnly: true, icon: 'plus-sign', inverted: true }), h("nds-floating-button", { key: 'e3102c4eab3df9f2c8548c547c35755ad133d633', variant: "primary-brand", label: 'Button', inverted: true }), h("nds-floating-button", { key: '71e88477580c3856303c3ba1d754d492d92852e7', variant: "secondary-solid", label: 'Button', iconOnly: true, icon: 'plus-sign', inverted: true }), h("nds-floating-button", { key: '1f5c8a74be13754c2fff87641b2120a0dc49feee', variant: "secondary-solid", label: 'Button', inverted: true })))));
+        return (h("div", { key: '4e08ac9a2d0864adcd4a38443fd5081fd368aa25' }, h("dga-flex", { key: '3c4537bc3cbc5a1cbb31d8063234cc2178eeb716', direction: "column", spacing: 16 }, h("nds-floating-button", { key: 'd1fc866958cac67b561b0a549e3d0801c19f099f', variant: "primary-neutral", label: 'Button', iconOnly: true, icon: 'plus-sign' }), h("nds-floating-button", { key: '24d4540fc5b89cac476d2e84c8319e33a96862b6', variant: "primary-neutral", label: 'Button' }), h("nds-floating-button", { key: '949aaa0ae1d41e929815e697484ce59e847e9e47', variant: "primary-brand", label: 'Button', iconOnly: true, icon: 'plus-sign' }), h("nds-floating-button", { key: '70eefb06cf2b195ac7213c7576f9393fc019e7fa', variant: "primary-brand", label: 'Button' }), h("nds-floating-button", { key: '355d69a99cbbeb203d58bb018a373f437ebe1943', variant: "secondary-solid", label: 'Button', iconOnly: true, icon: 'plus-sign' }), h("nds-floating-button", { key: 'c2c2fa7a661fa0e9803a3b923b0f00158732f381', variant: "secondary-solid", label: 'Button' })), h("div", { key: 'fe1037ab2157d301f0cc66d21825d58729dcbb23', style: { backgroundColor: '#074D31', padding: '20px', marginTop: '20px' } }, h("dga-flex", { key: '0cc5a0f82f75b7faeba2263609ec6b251fe04008', direction: "column", spacing: 16 }, h("nds-floating-button", { key: 'e75478775d90d3b1197cd84944b208c5d6bd6b5c', variant: "primary-neutral", label: 'Button', iconOnly: true, icon: 'plus-sign', inverted: true }), h("nds-floating-button", { key: 'e6aa467155fa75bb5b7907c2edd604646bcd8d13', variant: "primary-neutral", label: 'Button', inverted: true }), h("nds-floating-button", { key: '1c24d762e895fdf7bb322c88dcaf3a3aa99f6b0e', variant: "primary-brand", label: 'Button', iconOnly: true, icon: 'plus-sign', inverted: true }), h("nds-floating-button", { key: '4761badaf130b463d3713d8a3c5b41c5c5562abb', variant: "primary-brand", label: 'Button', inverted: true }), h("nds-floating-button", { key: '0dae748058ba6440f8c839a5c26da03be90371e0', variant: "secondary-solid", label: 'Button', iconOnly: true, icon: 'plus-sign', inverted: true }), h("nds-floating-button", { key: '221d58fe55092e506be70689cfaac3ca1d5abffb', 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: '5296e6f22459d5fd8870dcd63f76a205121e079d', dir: this.RTL ? 'rtl' : 'ltr', disabled: this.disabled, class: `
+        return (h("button", { key: 'ccc41e9ecc2f716daf10196b3bec77855aafe5dc', 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: '752d58e131d01ddbda25102c52804ced4ad0edb1', name: "icon" }, this.icon && h("dga-icon-v2", Object.assign({ key: '8545da127ca19163a80e47edb3cf420423c3c386', name: this.icon }, this.iconProps))), !this.iconOnly && this.label && h("span", { key: 'a07be009d634e8d91b2fd1f2a4cbfa4e9dcf397b', class: "NdsFloatingButton-label" }, this.label)));
+            NdsFloatingButton-${this.size} `, onClick: event => this.handleClick(event) }, h("slot", { key: '4f030014ef6e258c2a6dbef938350c8f4beeedd5', name: "icon" }, this.icon && h("dga-icon-v2", Object.assign({ key: '63e643f833a91829497755cb537a7c13eed71f41', name: this.icon }, this.iconProps))), !this.iconOnly && this.label && h("span", { key: '6561b10ea634b672295e20d519bc4db4fb4bf10b', 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: 'a019a93bad7f8797b596ef8190f5fa7b2e449236' }, h("h1", { key: '49d84c470711aea6ff9ff66838d85d50dd8e3fc0' }, "Button Example"), h("div", { key: 'ef067639c2b8f10c57372c74187cfbba04068ea1', style: { padding: '50px', display: 'flex', gap: '20px' } }, h("div", { key: '0b579c7bd0f58091a45b69400206285e16efc5bd', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }, h("dga-flex", { key: 'f505ff9419d42c9f1aab7e6044a319206d900bfe', direction: "column", spacing: 16 }, h("nds-link", { key: '1637a0f5b63d5bcb22f57894aad52e1883e06fd7', icon: "link-04" }), h("nds-link", { key: '49177706fd5194a8ba7b6d3c19941b1f65d18f48', icon: "link-04", label: 'link from props' }), h("nds-link", { key: '5f81b70b414f10646851f2d86f07fdb892b8b479', icon: "link-04", label: 'link from props' }, "link from child"), h("nds-link", { key: '7a09e6c292a97370c85a6d089fe53c59a2831ca9', variant: "primary", href: "https://www.google.com", target: "_blank" }, "Primary Link"))), h("div", { key: 'be18051dd53bd1b58591b85736acf352d0e20e4a', style: { display: 'flex', flexDirection: 'column', gap: '20px', backgroundColor: '#074D31', padding: '20px' } }, h("nds-button", { key: '6dfccfbe0400fabcca6cce62e8c3983003aeb554', label: "Button", variant: "primary-brand", size: "lg" }), h("nds-button", { key: 'ce33261009e977840d08de42f43ae798593cdf03', label: "Button", variant: "primary-brand", size: "lg", selected: true }), h("nds-button", { key: 'c95cbc0353d5ea3e995cbb9114c5f3a3916a234a', leadingIcon: 'link-square-01', size: 'sm' }, h("dga-icon-v2", { key: 'a0dd1bbbebceedceb3b257fa88dea161e2be3c28', slot: 'leading-icon', name: 'source-code', variant: 'stroke', type: 'rounded', size: 16, color: 'white' }))), h("dga-icon-v2", { key: '48a009917c84e0ddd36ac96234834bf5b7fd152a', name: 'link-square-01', variant: 'stroke', type: 'rounded', color: 'red' }), h("div", { key: '2a8c6fddf0714627203d46340c911122e578e95c', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }))));
+        return (h("div", { key: '8af1a294deed4a6ca583d7f147e48aaccca7fa10' }, h("h1", { key: 'f88af993fddc8bdfe1f24ba05a006cdec40b493c' }, "Button Example"), h("div", { key: 'add627e89f2542b02a44422255d97263d1bfe86b', style: { padding: '50px', display: 'flex', gap: '20px' } }, h("div", { key: 'f4586be849468898226009a08753d82d2f19440f', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }, h("dga-flex", { key: '21f672ee17fff74faeda380db32ee1249042b322', direction: "column", spacing: 16 }, h("nds-link", { key: 'efe3ef4b20d63a69665ac478863f0fe0268c0e53', icon: "link-04" }), h("nds-link", { key: '547894bb431d3411925d15c0bafdb4ed943f58fa', icon: "link-04", label: 'link from props' }), h("nds-link", { key: '0bb592d86685c4bdcfa44e69e5ee218f807ac30f', icon: "link-04", label: 'link from props' }, "link from child"), h("nds-link", { key: 'e89280e5382fe3b83272d2cc7f3f592f5c1d3aa3', variant: "primary", href: "https://www.google.com", target: "_blank" }, "Primary Link"))), h("div", { key: '5b4025ed146a01c262d210f94f1f390cba0a6f3a', style: { display: 'flex', flexDirection: 'column', gap: '20px', backgroundColor: '#074D31', padding: '20px' } }, h("nds-button", { key: '2c89ef8d182aabddb705ac4779b9816e36db839d', label: "Button", variant: "primary-brand", size: "lg" }), h("nds-button", { key: 'e47a654d0d660e888b4bada6a7eba24103a1c1fa', label: "Button", variant: "primary-brand", size: "lg", selected: true }), h("nds-button", { key: 'ccc85e4eaa8802fdacb16a51db9beb304a1c937c', leadingIcon: 'link-square-01', size: 'sm' }, h("dga-icon-v2", { key: '84e62af6993f00f693b9a411e174073079793414', slot: 'leading-icon', name: 'source-code', variant: 'stroke', type: 'rounded', size: 16, color: 'white' }))), h("dga-icon-v2", { key: '8c9bd28de88a5f24ae854f07ebda52171a8ee8ce', name: 'link-square-01', variant: 'stroke', type: 'rounded', color: 'red' }), h("div", { key: '106ac080459ff02a07481bc3559291bcc59d53c2', 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: 'f48b97ed18686f03cda9964e1ac9ea5d9bca372f', 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: '4178aa7bf5400b9335f084b62c974cf3d903e8e9', class: "dga-link__label" }, h("slot", { key: '740838deeea03a9899e9f51cfe8befbb40531ded' }, this.label)), this.icon && h("span", { key: '53a3c389da73235be626399658756e783d7936a8', className: "dga-link__icon" }, h("dga-icon-v2", Object.assign({ key: '7acdf111d7878345389d59d770d8427c98bb8075', name: this.icon }, this.iconProps)))));
+        return (h("a", { key: 'b188d0a1913b7be8caf289a9fe59bba8cb6bc3bd', 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: 'c9839b00dea4cc91895ec775e7932f744ea7a067', class: "dga-link__label" }, h("slot", { key: '6bca133285fec066d2783e2e8b442c6f92c6369d' }, this.label)), this.icon && h("span", { key: '56b0304bd2c0816229b2e9c8280f0ffb3acaaa3b', className: "dga-link__icon" }, h("dga-icon-v2", Object.assign({ key: '36e9bc4ea475b693efb602c9983760a83ad344d3', 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: '819bd10e95e3edba4d0b6ea01eb1aed583dfce14', style: {
+        return (h("div", { key: 'aa7c5ae293e0e5f72f16ce9bd510f8e4363239b3', style: {
                 position: 'relative',
                 width: '100%',
                 maxWidth: '1200px',
                 margin: '0 auto',
                 padding: '20px'
-            } }, h("h1", { key: '91cdaf8b92dbc751441a84e6f094a006d997f632' }, "Table of Content Example"), h("section", { key: '3f4c366c5afe758b33c9ffc2be44ed355ca945ae' }, h("div", { key: '1f6144981097182371904b57900c0fab9ad1878f', id: "section_1", style: {
+            } }, h("h1", { key: 'b6d789cdfde56c92a531cb52bf998be27e15136d' }, "Table of Content Example"), h("section", { key: 'a78f5a80c8a8dcb6d09eff620f314b654a6c8671' }, h("div", { key: '17c42f730d92eb2492b02f3933115e3d5a401f2d', id: "section_1", style: {
                 minHeight: "100vh",
                 backgroundColor: "gray",
                 padding: "20px",
                 margin: "20px 0 200px 0"
-            } }, h("h2", { key: '55ac3d3c19bc52df21534a3aa5c45df41494db64' }, "Section 1"), h("div", { key: '80cbe9adf44c56ec310bd7822adf91407d23bacd', id: "section_1_child_1", style: {
+            } }, h("h2", { key: 'bdd9debd0eda62a3f6b809b5648ac6461256fd34' }, "Section 1"), h("div", { key: 'a23687d5fe4bc634a86a447785bd294ca5a6f0aa', id: "section_1_child_1", style: {
                 minHeight: "100vh",
                 backgroundColor: "rgba(255,0,0,0.3)",
                 margin: "20px 0",
                 padding: "20px"
-            } }, h("h3", { key: '47c02a0cf9e96dc2c76c38069c2947b485bf2020' }, "Section 1 Child 1")), h("div", { key: '67a035faada4a72443202f3773b7b6852a548078', id: "section_1_child_2", style: {
+            } }, h("h3", { key: '1354c540ba3d858187f2823f9436671257638cf3' }, "Section 1 Child 1")), h("div", { key: 'd280848343c6fb896a0842dba316b7926e3864dc', id: "section_1_child_2", style: {
                 minHeight: "100vh",
                 backgroundColor: "rgba(0,0,255,0.3)",
                 margin: "20px 0",
                 padding: "20px"
-            } }, h("h3", { key: '13e167c6bb796405f61f4d7e2b07eb2295951537' }, "Section 1 Child 2")), h("div", { key: '19302f93f150f04498c76e7e3981cc9a937c460c', id: "section_1_child_3", style: {
+            } }, h("h3", { key: 'db2b1d2bd652c4f842652b383199e8c223e9d853' }, "Section 1 Child 2")), h("div", { key: '4d42bab8b8f0011cc2790d6c112d0b02d79399e5', id: "section_1_child_3", style: {
                 minHeight: "100vh",
                 backgroundColor: "rgba(0,255,0,0.3)",
                 margin: "20px 0",
                 padding: "20px"
-            } }, h("h3", { key: 'd14b0a6089b3cc61386e677022b33760446c94d3' }, "Section 1 Child 3"), h("div", { key: '16dfb4f0205e93efa321965488cc42936ae19520', id: "section_1_sub_child_1", style: {
+            } }, h("h3", { key: '7b92591b54d02843d2d5c0fba5988896bfc34cb1' }, "Section 1 Child 3"), h("div", { key: '2dc8b47631d3ca115bcfd67002e7eb13b162a818', id: "section_1_sub_child_1", style: {
                 minHeight: "50vh",
                 backgroundColor: "rgba(255,255,255,0.3)",
                 margin: "20px 0",
                 padding: "20px"
-            } }, h("h4", { key: '55465560552ae3de409af8fbcd2b0ee88daf216b' }, "Section 1 Sub Child 1")), h("div", { key: '560c02814d745d8028077449150586bca956ea68', id: "section_1_sub_child_2", style: {
+            } }, h("h4", { key: '58d58b16cb55306e8e4f703142b212d253107b54' }, "Section 1 Sub Child 1")), h("div", { key: 'f98c40d2f8f175e45ad80e370231143028a04cf5', id: "section_1_sub_child_2", style: {
                 minHeight: "50vh",
                 backgroundColor: "rgba(255,255,255,0.3)",
                 margin: "20px 0",
                 padding: "20px"
-            } }, h("h4", { key: '3198413f9f5e3c0c864cf12f4567375d079d645e' }, "Section 1 Sub Child 2")), h("div", { key: 'ce2a0fe28bd218334d403ba97739773aa987a22b', id: "section_1_sub_child_3", style: {
+            } }, h("h4", { key: '7b6c15eb655ddc1f113b3bcf662861635032435a' }, "Section 1 Sub Child 2")), h("div", { key: 'ba155f5a1bf7821873e88422b77787bdc5ded031', id: "section_1_sub_child_3", style: {
                 minHeight: "50vh",
                 backgroundColor: "rgba(255,255,255,0.3)",
                 margin: "20px 0",
                 padding: "20px"
-            } }, h("h4", { key: 'b60f9c9ca3b70638d971c6911f5d065e7b16459d' }, "Section 1 Sub Child 3")))), h("div", { key: '83ca6530654fbb0565e11955bda0f902d4aa7bbc', id: "section_2", style: {
+            } }, h("h4", { key: 'b8747a987f17733eb483626079b4d6b7def38c97' }, "Section 1 Sub Child 3")))), h("div", { key: 'c36cbd8ba63e14f8e1b7119b5140aa539dc9d181', id: "section_2", style: {
                 minHeight: "100vh",
                 backgroundColor: "rgba(0,0,0,0.8)",
                 color: "white",
                 padding: "20px",
                 margin: "20px 0"
-            } }, h("h2", { key: '41b89f0c025644330e13495d8a231db3bc0766f0' }, "Section 2")), h("div", { key: '085a8c521c17fcace5ccce494f02df0b91f26ca8', id: "section_3", style: {
+            } }, h("h2", { key: '123c606fa824628ae66584e5cf1db45fc9ba2fae' }, "Section 2")), h("div", { key: '1192fc576ebe2585e122aff836fe66bdad22eb1e', id: "section_3", style: {
                 minHeight: "100vh",
                 backgroundColor: "brown",
                 padding: "20px",
                 margin: "20px 0"
-            } }, h("h2", { key: '0af0a0ef370ed82a5675fe43af2a49ca65d8385a' }, "Section 3"), h("div", { key: '1432fbdbad8487bd6d55a21d56646ca7fe36d005', id: "section_3_child_1", style: {
+            } }, h("h2", { key: '86d3267da8664e932ec0ee04f8a4f673c8e8736d' }, "Section 3"), h("div", { key: '4f77d7096c755c01858bfa41ba0f8c356757c1d5', id: "section_3_child_1", style: {
                 minHeight: "50vh",
                 backgroundColor: "rgba(255,255,255,0.3)",
                 margin: "20px 0",
                 padding: "20px"
-            } }, h("h3", { key: '1b1ac49d5652dbbbd2beba407ce1679ce3ae500c' }, "Section 3 Child 1")), h("div", { key: '1bdc723b43b40dcf4d10a2aaf6afaabf54f19749', id: "section_3_child_2", style: {
+            } }, h("h3", { key: 'cae91f5201b63d24ec33cf56a0bb8d98374f8968' }, "Section 3 Child 1")), h("div", { key: '215616c389252fa8675a9bc90900169c780e935a', id: "section_3_child_2", style: {
                 minHeight: "50vh",
                 backgroundColor: "rgba(255,255,255,0.3)",
                 margin: "20px 0",
                 padding: "20px"
-            } }, h("h3", { key: 'e1b0af152d3540d79a27396090fec1ee058b1a85' }, "Section 3 Child 2"), h("div", { key: '254db3888856828d40551f8f31c2e2a890f2353d', id: "section_3_child_2_1", style: {
+            } }, h("h3", { key: '3b66e0a9cb051b06667d6097325dc3eae2f619b3' }, "Section 3 Child 2"), h("div", { key: '24f5e9ba1087d91097fdb02e489c2609b4612a4a', id: "section_3_child_2_1", style: {
                 minHeight: "30vh",
                 backgroundColor: "rgba(0,0,0,0.1)",
                 margin: "20px 0",
                 padding: "20px"
-            } }, h("h4", { key: '9b1eba61d3a94f3cf883e09e1953008902e171f1' }, "Section 3 Child 2.1")), h("div", { key: '5e2935f570c90f13334b4b9909e44041a9b94dd5', id: "section_3_child_2_2", style: {
+            } }, h("h4", { key: 'd53f0cd40b39ddef12bc9ead1eecf2359d766e53' }, "Section 3 Child 2.1")), h("div", { key: 'ca374c9dc0b6ef2d597feccec28034b132f4260a', id: "section_3_child_2_2", style: {
                 minHeight: "30vh",
                 backgroundColor: "rgba(0,0,0,0.1)",
                 margin: "20px 0",
                 padding: "20px"
-            } }, h("h4", { key: '04e16bd451630e9b2518447899d73ee62cfd7aff' }, "Section 3 Child 2.2")), h("div", { key: '54fd805685bd48de1c96383a8ff65ea1dad19b10', id: "section_3_child_2_3", style: {
+            } }, h("h4", { key: '4ed5fec9bbff3be0c2d7fd3f2735dd32dbe138ca' }, "Section 3 Child 2.2")), h("div", { key: '02264ed0635acd9f672a212ffd4cf1585c9f1caa', id: "section_3_child_2_3", style: {
                 minHeight: "30vh",
                 backgroundColor: "rgba(0,0,0,0.1)",
                 margin: "20px 0",
                 padding: "20px"
-            } }, h("h4", { key: '62d77b202b63f6b747d46df504562d52064516f9' }, "Section 3 Child 2.3"))))), h("div", { key: '143f4ef993450120c9aae58ee235d3ab0e6e2c9b', style: {
+            } }, h("h4", { key: '7d1c2326f42e9ceb229544c114c5c0788ceac854' }, "Section 3 Child 2.3"))))), h("div", { key: '19ba0c5c6127d326553cace3089d792dd1035936', 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: '68b905bdc574a0c36de16d2d52cc43f8af3f126a', title: "On this Page", subTitle: "Page Title", sections: [
+            } }, h("dga-table-of-content", { key: 'd7e17c2119064dfc33d5712ccef59c6c7d9ca812', title: "On this Page", subTitle: "Page Title", sections: [
                 {
                     Name: 'Section 1',
                     Target: 'section_1',
@@ -121,7 +121,7 @@ export class NdsTableOfContentUsage {
                         }
                     ]
                 }
-            ] })), h("div", { key: '53fbcabe9af9e2a9a9a27ca7a6896aa036a3bb92', style: {
+            ] })), h("div", { key: 'b2fe01106bbaa8ea78b751039c3a7dedf274534e', 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: '54559ebc83088265ce72d225d2ed5ff08816e5c0', 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: '494c80f5eca61d7c35f7642cce7610980b66509a', 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: '83a34f37d8845bf89576abbea8c91e5be5c7132c' }, h("h1", { key: '823461073067bbeca1049e0d0661f87381943e29' }, "Accordion Example"), h("div", { key: '618ffbc9d482d6e1c7ef2cb29a473e2d93b252cd', style: { padding: '50px', display: 'flex', gap: '20px' } }, h("div", { key: '07d3d0c0e86b6ec73ba4f9f674c116d4727d85eb', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }, h("dga-accordion", { key: '270e32b26ed0a335378dc2736b41b754426170a3', 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: '28e37fc984132115feafa2aadb763a16012108f2', title: "Accordion Title", size: "md" }), h("dga-accordion", { key: 'e2de2ce853f0e3440868b8781af12a9b7fafa2cc', title: "Accordion Title", size: "sm" }), h("dga-accordion", { key: 'e29acf09c9035e4864de6bcb3c69e291bfd908f6', 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: '79c14e4237380037592ee42d4c20da0739f18938', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }))));
+        return (h("div", { key: 'e0cbf9829d9d5e7cc090147189a5cf28028fa173' }, h("h1", { key: 'b7c6354e39248b9629ee22d6154ebbb69f449c86' }, "Accordion Example"), h("div", { key: '885313980dc69edecc0a3c41b9fd3b3e0a95b172', style: { padding: '50px', display: 'flex', gap: '20px' } }, h("div", { key: '66cb305e08b59a7d4ec07e77edeafceb29d3df28', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }, h("dga-accordion", { key: 'da3429ebfcf2e84de994c0481b45d00c1b0bd69d', 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: '221adbd38bc89579f4b23400e2be69656eff14ad', title: "Accordion Title", size: "md" }), h("dga-accordion", { key: 'ec85d5b8c5ccb899716839b79ffc312a5d49402c', title: "Accordion Title", size: "sm" }), h("dga-accordion", { key: 'f81745586ee58adb4548c7374db6530f8e93648a', 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: '328ebc29a8d239b6f39231a3a45fa8c988b4cf35', 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: 'fb5772c483ae2da1ee285b98e4969d571e87ccd7' }, h("h1", { key: 'b9a89f877908dad12faa593e657594a7d13d67e1' }, "Accordion Example"), h("div", { key: '2609aa4fb68f82ed17292440f7b7724f9cb2ffe2', style: { padding: '50px', display: 'flex', gap: '20px' } }, h("div", { key: 'bffdb6a0c1dfe56808132e7e950878db0e66a830', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }, h("apex-chart", { key: '6829891167db4f509858b211abaa23612d990584', id: "timeline-chart", options: {
+        return (h("div", { key: '6a49966c9296aad0ee6530702e6accd8fc6852be' }, h("h1", { key: 'd40fd0ccf7c853aae518ba84e4d5360c00bb4028' }, "Accordion Example"), h("div", { key: 'e06beed4e6cd0f0466313ac80e53b03f41b4f7e9', style: { padding: '50px', display: 'flex', gap: '20px' } }, h("div", { key: 'cf60ea0d34891f47a770dba19f9adff939760da4', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }, h("apex-chart", { key: 'bb8e5d4ae05951db467c04ce7d9ca8c1f81d242d', 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: 'e245158aad21942e1be0fb88ef693055395148d4' }, h("h1", { key: 'a8759f1e8dd1e9175b940ac03e54aa28a2bbb6e1' }, "Avatar Example"), h("div", { key: 'a7d24af241d3ed261943dd93e17edf74d9a439d5', style: { padding: '50px', display: 'flex', gap: '20px' } }, h("div", { key: '98e6af7fe785f9e6e7137bd37df4a1ea3152e038', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }, h("div", { key: '58d6e98a928a71a17421b19779bdb156cba74faf', style: { padding: "10px", display: 'flex', flexDirection: 'column', gap: '20px', backgroundColor: "black" } }, h("dga-avatar", { key: '0d00e519480ff976c78e2434cedcf61665b72289', size: 120, border: false, square: true, sx: {
+        return (h("div", { key: 'de83ee16f0a56676071056cc0f4debaf80a7ef7c' }, h("h1", { key: '75d2c4cf2b7693735b4897b3048d5cb2d35181b6' }, "Avatar Example"), h("div", { key: '099d2b9a3f62f5da69158ab8b5a82e4e09bfb78f', style: { padding: '50px', display: 'flex', gap: '20px' } }, h("div", { key: 'daa174c23122406ecfd0be47193785ffdf3dad15', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }, h("div", { key: '390cbedb9b172719bba27055df9fd53ac6d94d68', style: { padding: "10px", display: 'flex', flexDirection: 'column', gap: '20px', backgroundColor: "black" } }, h("dga-avatar", { key: '115713f34445c1c3b6fa179fdcf2e6a189bc7a71', size: 120, border: false, square: true, sx: {
                 "& .dga-avatar": {
                     borderRadius: "100px"
                 }
-            } }), h("dga-avatar", { key: '8e458edc0c9441e26d87ff6a984f92335a8f7b8b', size: 120, border: true, square: true })), h("dga-avatar", { key: 'f315e6c5196045660ad11816783334b08d5d8880', type: "icon", size: 120, icon: {
+            } }), h("dga-avatar", { key: '66a75e2bfeb60ae32c91a2ceab0dee1199c3c70c', size: 120, border: true, square: true })), h("dga-avatar", { key: '04a64d8d27faf81ca978dcf78076ddb555d2a6ba', type: "icon", size: 120, icon: {
                 name: 'user',
                 variant: "stroke",
                 type: "rounded"
-            } }), h("dga-avatar", { key: '513af1465f73602c3b85faec5a9e6352efcfb027', type: "icon", size: 80, icon: {
+            } }), h("dga-avatar", { key: '6bdfa3ee801f8438d9363b5c60a8c114083e4c2e', type: "icon", size: 80, icon: {
                 name: 'user',
                 variant: "stroke",
                 type: "rounded"
-            } }), h("dga-avatar", { key: 'c43c6de03e61b4d7165a5e1b9196caf6d0498b59', type: "icon", size: 68, icon: {
+            } }), h("dga-avatar", { key: 'e8ff0c117a479f5ff00546a361be9087932d78d7', type: "icon", size: 68, icon: {
                 name: 'user',
                 variant: "stroke",
                 type: "rounded"
-            } }), h("dga-avatar", { key: '81727eae24c46330e5fe91192e778d0dbbde4435', type: "icon", size: 48, icon: {
+            } }), h("dga-avatar", { key: 'b6083abf88f104b7492d58bd7185c096021a6a78', type: "icon", size: 48, icon: {
                 name: 'user',
                 variant: "stroke",
                 type: "rounded"
-            } }), h("dga-avatar", { key: 'cd28d5122605132f3ef6da32088092602d97675f', type: "icon", size: 40, icon: {
+            } }), h("dga-avatar", { key: '3e1e4c9bf54b966c9e3733a480414612a235d9f4', type: "icon", size: 40, icon: {
                 name: 'user',
                 variant: "stroke",
                 type: "rounded"
-            } }), h("dga-avatar", { key: 'a89fb958d48fc07c0f0b93a575ca5af3a03524a2', type: "icon", size: 32, icon: {
+            } }), h("dga-avatar", { key: 'a8fa2cdaa3190395cc4750c8d1870d404a018251', type: "icon", size: 32, icon: {
                 name: 'user',
                 variant: "stroke",
                 type: "rounded"
-            } }), h("dga-avatar", { key: '413ef17f0a7ee9e9cedb01750e4e0a0d77567bd7', type: "icon", size: 24, icon: {
+            } }), h("dga-avatar", { key: '090fea97421f7f136285e016f40cbfa419c93769', type: "icon", size: 24, icon: {
                 name: 'user',
                 variant: "stroke",
                 type: "rounded"
-            } })), h("dga-avatar-group", { key: '9cab23f29796c9420ba21e77eb60744039cb44f8', stacked: true }, h("dga-avatar", { key: 'aeb84ba1ae0eb899f7e4c35662f95c782a71eea0', type: "initials", text: 'AB', size: 40 }), h("dga-avatar", { key: 'e628821c70e828f9064d63d5f2138d606942799e', type: "initials", text: 'CD', size: 40 }), h("dga-avatar", { key: '386ce6fc1bdb9997562fbac4d49625394760804b', type: "initials", text: 'SB', size: 40 }), h("dga-avatar", { key: '7b4d37d4ced60ad0d7b5f41e699dcd16eaf6663f', type: "initials", text: 'WK', size: 40 }), h("dga-avatar", { key: '9bd4cbacf6d002d4620b89d53927728eaa09d998', type: 'initials', text: `+4`, size: 40 })), h("div", { key: '51d0d03e88610a78c53ce7c8ef8fc2f2824d7c61', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }))));
+            } })), h("dga-avatar-group", { key: '0d480e4dbf51d1e271050a4534252e537d9a5490', stacked: true }, h("dga-avatar", { key: '7fc9dc3a55a55259b47bc268676021281c7c056d', type: "initials", text: 'AB', size: 40 }), h("dga-avatar", { key: 'c7cf7cdb918200fa9c21639578264905c3bd3a8e', type: "initials", text: 'CD', size: 40 }), h("dga-avatar", { key: '318829230e4c44c961bdaa12f32e0eed9bd7ffb6', type: "initials", text: 'SB', size: 40 }), h("dga-avatar", { key: '64c01a232c130e51dafcda0a3f2dc0af42cab4e4', type: "initials", text: 'WK', size: 40 }), h("dga-avatar", { key: 'ef3a4b01900a46b8fe7be8b80302bdd663972dd2', type: 'initials', text: `+4`, size: 40 })), h("div", { key: '509640c7e02951847388021bf7111d6109da7f7c', 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: '309588c044157c237b4f1ffbbfda0a523d1c4d73' }, h("h1", { key: 'cb268da1bb2282e12ae123e6a5a3b366c6e49d50' }, "Breadcrumbs Example"), h("div", { key: 'd7f048d41b3785a8aac90e7fa931d2f7e6b0ddb4', style: { padding: '50px', display: 'flex', gap: '20px' } }, h("div", { key: '645ee3c57cbc5f81a88baee57f52da0b04adb890', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }, h("dga-link", { key: '739dfabb573bbc8c08ef7f8f10a5be02f372c121', label: "Link", variant: "neutral" }), h("dga-breadcrumbs", { key: '7acc4f3095ad9a78f93d6a73068b0d222b46e925', items: [
+        return (h("div", { key: '328b3b85fd3681476789c10fb40d9a14a47f9526' }, h("h1", { key: '166fa0319cc91a21ebe8b7c1a5a82a2ef19b2e7a' }, "Breadcrumbs Example"), h("div", { key: '8189e7a4884272796a5ccf7424c3a715dc404428', style: { padding: '50px', display: 'flex', gap: '20px' } }, h("div", { key: '18a2a721ae3ba604a26a2476d05d6ca0b6c0e8ef', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }, h("dga-link", { key: '3e8bb51917281323f592989d38084eb4b855e4da', label: "Link", variant: "neutral" }), h("dga-breadcrumbs", { key: '42a9466c84b13929d45e76059e40aff0738752f6', items: [
                 {
                     label: 'Home',
                     path: '/',
@@ -22,7 +22,7 @@ export class DgaBreadcrumbsUsage {
                     label: 'Keyboards',
                     path: '/products/keyboards',
                 },
-            ], max: 3 })), h("div", { key: '93da9b1847fbfe5253baf25eafbc4eb4206c4649', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }))));
+            ], max: 3 })), h("div", { key: 'b2eedadfd8af0a3fb994d20b90a15fb90e11d117', 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: '42e4dcac6a8e5894473d5bb1e9d33657b97c6019' }, h("h1", { key: 'd5146ccfef34f67ce4bd8b12a03f8d2bfc81adb3' }, "Button Example"), h("div", { key: '5100816a09c96d79afec208186830a02027acf7c', style: { padding: '50px', display: 'flex', gap: '20px' } }, h("div", { key: '2c8aa1c5d07bacd0187db0eb4c993b4297a7235a', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }, h("dga-button", { key: '30a1c6cdfb7addad54581223dc285d3ad6891124', label: "Click me", variant: "primary-brand", sx: {
+        return (h("div", { key: '9b7d36f858c89d55000f5443f240c1e6a98bcf7f' }, h("h1", { key: 'c037ee06f42ace8efa86c499bdcf9808c9331ee9' }, "Button Example"), h("div", { key: '4fd7617b3722f0e5758e9c2a8dde5fde28525564', style: { padding: '50px', display: 'flex', gap: '20px' } }, h("div", { key: '93a7315ca812a7b119b66984471dd6889be547d3', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }, h("dga-button", { key: 'ba3e68cdec24ed6f1628a4b3f0159a852ac39b84', 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: '4f0af478bfea2622fbb41f068f5758e4ad9e8d5a', label: "Brown Button", variant: "primary-neutral" }), h("dga-button", { key: '66e35ddfdba9ac3f2e790987168c4caaf0ebafac', label: "Button", variant: "des-transparent" }), h("dga-button", { key: '2672bb3597dba7f408458b6c3bfe2677def2aa8b', label: "Source code", variant: "secondary-outline", leadIcon: true, leadIconType: "source-code", leadIconProps: { variant: 'stroke', type: 'standard' } }), h("dga-button", { key: 'e0f5b635ac8a3e8adc9bddbb99650c796130c363',
+            } }), h("dga-button", { key: '578b0490117be76b81b7b0972a6cf93b78f88c03', label: "Brown Button", variant: "primary-neutral" }), h("dga-button", { key: 'b400943b39374693dfba8265edecb516552553a1', label: "Button", variant: "des-transparent" }), h("dga-button", { key: 'f0376a21ad668b9479fad06ec3bfee20f7308626', label: "Source code", variant: "secondary-outline", leadIcon: true, leadIconType: "source-code", leadIconProps: { variant: 'stroke', type: 'standard' } }), h("dga-button", { key: '6c3faddd76f0f6192af69afc5ac8d458563114d0',
             // 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: '4a0d497b275807dfefb313dbdf98ce95842b2214', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }))));
+            } })), h("div", { key: 'a6a8a0628204b572ba20a093f0527718215f3627', 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: '5523fcf839868200e2f885b2f5ffe0a2ac92c38e' }, h("h1", { key: '8c446ebc307e784287a652c0e9183dc4542fabf2' }, "Button Example"), h("div", { key: '51f0dc01fe8b35fd9aebc073a9127f642146fa0a', style: { padding: '50px', display: 'flex', gap: '20px' } }, h("div", { key: '21c12e0579b99fb44164a4755301482b2dac1b41', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }, h("dga-flex", { key: 'f9aaf1cb31dabb25d3b000aa22360ba1efbd7b69', direction: "column", spacing: 16 }, h("dga-button-v2", { key: 'fe90da1f4e5a9c71261f723e52d0f93a12125452', label: "Button", variant: "primary", size: "lg" }), h("dga-button-v2", { key: '25d036902f713e54b77f9a3611f231b47fcfd1eb', label: "Button", variant: "primary", size: "md" }), h("dga-button-v2", { key: '92a8444a7d5dfb0fe08bf52260b85b4fad3c2436', label: "Button", variant: "primary", size: "sm" }), h("dga-button-v2", { key: '3b2fd6212430234b7db9717ffe8c50b2203c5a9b', label: "Button", variant: "neutral", size: "lg" }), h("dga-button-v2", { key: '465460b966b50979670fa85fb894910fdfc7a04e', label: "Button", variant: "neutral", size: "md" }), h("dga-button-v2", { key: '23abf1fc63c47d833e6095d85914356be40b07d7', label: "Button", variant: "neutral", size: "sm" }), h("dga-button-v2", { key: '20290811a07733b77af71467c32445907d272686', label: "Button", variant: "secondary-solid", size: "lg" }), h("dga-button-v2", { key: '79a3bc5e1bd7745a6910f7effb1f92b2c7b6f979', label: "Button", variant: "secondary-solid", size: "md" }), h("dga-button-v2", { key: 'ce0b5540330c1e20c3cf66fdb15efe2ec0830607', label: "Button", variant: "secondary-solid", size: "sm" }), h("dga-button-v2", { key: 'f5214703c87436e7acbd8f26e43f1e4e4fa61b2f', label: "Button", variant: "primary", destructive: true, size: "lg" }), h("dga-button-v2", { key: '1ab821a70059d54343b55951bf05a95645fd87f3', label: "Button", variant: "primary", destructive: true, size: "md" }), h("dga-button-v2", { key: 'b6c5e5d1248f48f0a0a2ba4bccd4f27a542b5083', label: "Button", variant: "primary", destructive: true, size: "sm" })), h("dga-button-v2", { key: 'c21e765eb09b2fb1fcc7c01c7516b24c755d0cad', label: "Button", variant: "primary", onColor: true }, h("dga-button-leading-icon", { key: '6df379b1b089021fa02b94c02e9842e538712883', name: "link-square-01", size: 16, color: "red" })), h("dga-button-v2", { key: 'efd9c98325728d6a9287784b32d8ae07afa52f38', label: "Source code", variant: "secondary-outline", leadIcon: true, leadIconProps: { name: 'source-code', variant: 'stroke', type: 'standard' } }), h("dga-button-v2", { key: 'bcd305f5c8c8256f2c2bc3c2eeb25e5a6d021e5f',
+        return (h("div", { key: 'f2ae3739194a0bdec60c8797def5f9bfc96642fc' }, h("h1", { key: 'd22809b2703dbc4fd9519b48541836f70286b0f0' }, "Button Example"), h("div", { key: '7692ee411284e741ccd44ae8f6e43df78a61c1a6', style: { padding: '50px', display: 'flex', gap: '20px' } }, h("div", { key: 'f03a0bbb900f013fd11d02edce50335a0e6f141e', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }, h("dga-flex", { key: '0ac3e04c134a6d88e0d34536100150086e98b419', direction: "column", spacing: 16 }, h("dga-button-v2", { key: 'c924a1d15b83fb43dca7e006a62692eb4c510180', label: "Button", variant: "primary", size: "lg" }), h("dga-button-v2", { key: '8d2e0fe5be4966cb0bbb77e3b5c19db799a6691f', label: "Button", variant: "primary", size: "md" }), h("dga-button-v2", { key: 'f949c63b6176400a2a8fa127ea8fc78d9e9190d2', label: "Button", variant: "primary", size: "sm" }), h("dga-button-v2", { key: '2d6cf187fcb3ef4b8b7659af81526abc13f3d62e', label: "Button", variant: "neutral", size: "lg" }), h("dga-button-v2", { key: '32bd41d1fe5d92aa41959c00269b6ec51c537752', label: "Button", variant: "neutral", size: "md" }), h("dga-button-v2", { key: 'f1673a337ac251e10b0519ac0d7307daaac2077f', label: "Button", variant: "neutral", size: "sm" }), h("dga-button-v2", { key: '5bd2dc48aa4a2a73ba9fd49d4ac57e7ebb46bc93', label: "Button", variant: "secondary-solid", size: "lg" }), h("dga-button-v2", { key: '871bc390dd4ebcd6d95f9c6d3f991af654bad394', label: "Button", variant: "secondary-solid", size: "md" }), h("dga-button-v2", { key: '085a1a1cde141664220769bdf67b6bf33b7b828a', label: "Button", variant: "secondary-solid", size: "sm" }), h("dga-button-v2", { key: '00950c1348e053e43bedee48d02b3e92f9140b26', label: "Button", variant: "primary", destructive: true, size: "lg" }), h("dga-button-v2", { key: 'c6e2317f8cf7a2522d35ed6185d160c9d88d8e29', label: "Button", variant: "primary", destructive: true, size: "md" }), h("dga-button-v2", { key: '0b4c9489158cda8cd98f48e9986ffb10b79513dd', label: "Button", variant: "primary", destructive: true, size: "sm" })), h("dga-button-v2", { key: 'a0beee8cb58de62df4df7c887ad509cae2a2ca63', label: "Button", variant: "primary", onColor: true }, h("dga-button-leading-icon", { key: 'a1708e2daecd294c99a64ca9a0337c09ff9a1aa8', name: "link-square-01", size: 16, color: "red" })), h("dga-button-v2", { key: '7cfd1bea4e99107525e7a100b8fb0dd7f49648f9', label: "Source code", variant: "secondary-outline", leadIcon: true, leadIconProps: { name: 'source-code', variant: 'stroke', type: 'standard' } }), h("dga-button-v2", { key: 'a1072ead46ff1cb1bdf57affdb2f0ebeff1efe5e',
             // 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: '68c90d90c6f615c504d7cdeb2394c4341fd0ac6b', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }))));
+            } })), h("div", { key: 'c39b391b3a3f15e3fe1c94442c6f5548b3b29ed4', 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: '6a7a1b6e441772c76742ea6b571f95b088d5f03f' }, h("h1", { key: '3caae8983f0a589d090eb3847aa8deee721bc748' }, "Card Example"), h("div", { key: '63e25e6cd62416548d5e110b67c3fe4633194470', style: { padding: '50px', display: 'flex', gap: '20px' } }, h("div", { key: '5bd873a8dac0c0a9f80ac70fe7021fe7ce5748db', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }, h("dga-card", { key: '5289afbd10c9734bab1658dd24ded2df90312cbf', type: "expanded", cardTitle: "Card Title", description: "Card content placeholder text goes here", showFeaturedIcon: true }, h("div", { key: 'e415bef8be7707b2a269e9e87b8ab6fa00a1b2ad', slot: "collapse-content" }, "dgdsgdfgdfg")), h("dga-card", { key: '8c55e101dd0a4279c2d7582021a519483c2b133d', type: "selectable", cardTitle: "Card Title", description: "Card content placeholder text goes here", isSelected: this.selected, onCheckboxChange: () => (this.selected = !this.selected) }), h("dga-card", { key: '730606135cce7a68f305d62365e6ff41288f97a2', cardTitle: "Card Title", sx: {
+        return (h("div", { key: 'ea17b48d5f956e77fc79f8672f04323aee309586' }, h("h1", { key: '1d4f1d6938d823e555e0ad22190628a697372c4a' }, "Card Example"), h("div", { key: '3c7e3cf45052df46b339bf6f893eea7487ce33c6', style: { padding: '50px', display: 'flex', gap: '20px' } }, h("div", { key: '22096bc8846e2c49bb4419148fa71c2372764e42', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }, h("dga-card", { key: '147cbb68ff6738d052979a6699708509d6e47289', type: "expanded", cardTitle: "Card Title", description: "Card content placeholder text goes here", showFeaturedIcon: true }, h("div", { key: '7ca8e1439cd3b6b2d89bcc8fe31e7468bffe4a35', slot: "collapse-content" }, "dgdsgdfgdfg")), h("dga-card", { key: '64d696ad66086d87c98f0a46e398778c7a72fb7d', type: "selectable", cardTitle: "Card Title", description: "Card content placeholder text goes here", isSelected: this.selected, onCheckboxChange: () => (this.selected = !this.selected) }), h("dga-card", { key: '5f6accbe2f242a70fd23f347a95807bbbef8c598', cardTitle: "Card Title", sx: {
                 '& > .card': {
                     backgroundColor: 'red',
                     height: '400px',
                 },
-            } }), h("dga-card", { key: 'c75b0d0d15ad21eb5dccd5784a5ee67ed0604706', cardTitle: "No Shadow", effect: "no-shadow" }), h("dga-card", { key: 'a0d79d3f779669bd7417e196f02ac7f20b116fc1', cardTitle: "Stroke", effect: "stroke" }), h("dga-card", { key: 'd451d77e46ee7a513f6cbfd8a5b40315383493aa', cardTitle: "With Shadow", effect: "with-shadow" })), h("div", { key: '960fa71feb652f88ba897de219a664b16cbacd32', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }))));
+            } }), h("dga-card", { key: '1898bacdb68e7b044e7c1999f7f0625d121a3d1e', cardTitle: "No Shadow", effect: "no-shadow" }), h("dga-card", { key: '77af1890fb116d2d4027bba91570099205195e8f', cardTitle: "Stroke", effect: "stroke" }), h("dga-card", { key: '578ad6135193e411960b8de438329b8b85951886', cardTitle: "With Shadow", effect: "with-shadow" })), h("div", { key: '8b25556c6f0a9d6d912c95403c98aca6ac9273a8', 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: 'aa2e81ca9e7b8fa11580696582c271be86a617da' }, h("h1", { key: 'a51a817a4464703138520a5f07ddf9c6dc255814' }, "Card Example"), h("div", { key: '2f0fd4bb8ccda49752ded814d78e95d186f754d0', style: { padding: '50px', display: 'flex', gap: '20px' } }, h("div", { key: 'a2b8f7c5c932d042e6a5f8e94ddbfe306b2a5b66', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }, h("dga-card-v2", { key: '03c2b3a351b81b24664cfc04b8328855e5fed362', type: "default", sx: {
+        return (h("div", { key: '2d2eab4aeb2dd21c1eed2510abf0f5062bf9b2cd' }, h("h1", { key: '2f4cd7e4795598a32d6ea04e4846ec4314be42e4' }, "Card Example"), h("div", { key: 'b00da3d1071af17d7fc07251a5815c78e6f39aba', style: { padding: '50px', display: 'flex', gap: '20px' } }, h("div", { key: 'fd80de8862cf9e31dfb232f38fedfaa82f7c67a1', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }, h("dga-card-v2", { key: '06654c5732d405720c0610afb8f26bf6ac813c9b', type: "default", sx: {
                 "& > .card": {
                     backgroundColor: 'red',
                     height: '400px',
                 }
-            } }, h("dga-card-content", { key: '394dd8e492fdf011504ee9b33e5b4917133cf25e' }, h("dga-featured-icon", { key: '9f09ced740f222f46b6041ec548d41b200533f9d', color: 'brand', variant: 'light', size: 'lg', icon: {
+            } }, h("dga-card-content", { key: '622c96094e049691639e9ef62b0f2baba5b3b3db' }, h("dga-featured-icon", { key: '4b89157db9afcb776717a346baf636d0e75673dc', color: 'brand', variant: 'light', size: 'lg', icon: {
                 name: 'checkmark-circle-02',
                 variant: 'stroke',
                 type: 'sharp',
                 size: 24
-            } }), h("dga-flex", { key: 'f7e08ddf7bf7483f5e0fdc25dcc0982de422b610', direction: 'column', spacing: 8 }, h("h4", { key: '538eb3d141863e64dd39c9fc4287c11a8c321859', class: "text-lg-bold" }, "Card Title test"), h("p", { key: 'd9743b6088f9328777275b3f12f58ebf37b6d876', class: "text-md-regular" }, "Card content placeholder text goes here")), h("dga-flex", { key: 'a52859227b1a9111b039da07c42ca0828ac270b9', direction: 'column', spacing: 4 }, h("dga-rating", { key: '76e820b45df66d7f8423326679a2d9c4a9e3a68c', value: 4, size: 'sm' }), h("span", { key: '716861ef943b7c88dec8bd271307720c3580168f', class: "text-xs-regular" }, "12 reviews"))), h("dga-card-actions", { key: '15d712a0d2b1bb3ba1fd67a289244d5907fdfc7e' }, h("dga-button-v2", { key: '0a39821141ccc7419239351e6de19e5d78aa2e0e', label: "Primary", size: "lg", variant: "primary", onClick: () => console.log('Primary Action') }), h("dga-button-v2", { key: '192c2b5ad6921b35438608bc2344fa0a3604d0d1', label: "Secondary", size: "lg", variant: "secondary-outline", onClick: () => console.log('Secondary Action') })), h("dga-card-expandable-content", { key: 'df09f7c7413000a18c7cc7e5a3738fd65de44164' }, h("div", { key: 'f834107bd79d0bd3637a1a9d9d70c3da29dcc6cd' }, "Expanded Content"), h("p", { key: '7e25f21e9f32ca6889cacc6cc41302bb297eb333' }, "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: '756c5d493b18f8aee8699400a7d9fc5ddc6bcaf9', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }))));
+            } }), h("dga-flex", { key: '05feb0d607771b1f343699ea561d2f9a9fa4643b', direction: 'column', spacing: 8 }, h("h4", { key: 'ed39312a656bd9a9bf09f3b83a25700bac733df4', class: "text-lg-bold" }, "Card Title test"), h("p", { key: '6c1c060dbe9bdbafa75bb698fa38c558b52d5f9f', class: "text-md-regular" }, "Card content placeholder text goes here")), h("dga-flex", { key: 'c62b316f227b053843554126dd8a3661c3821ea6', direction: 'column', spacing: 4 }, h("dga-rating", { key: 'df8b2d30be7b537c26480c4bbaf3369fc64fd25a', value: 4, size: 'sm' }), h("span", { key: 'a443967b96ae8c9c4b12921961caa514f1c3d668', class: "text-xs-regular" }, "12 reviews"))), h("dga-card-actions", { key: 'db0172d1f948467fb49482aac84b25ea2fc161c1' }, h("dga-button-v2", { key: 'c9ad57e9ea048f6559474aea884c193ebcf05e87', label: "Primary", size: "lg", variant: "primary", onClick: () => console.log('Primary Action') }), h("dga-button-v2", { key: '5f4484aae2ebd05b32991414e9f8386bf07a5a78', label: "Secondary", size: "lg", variant: "secondary-outline", onClick: () => console.log('Secondary Action') })), h("dga-card-expandable-content", { key: '85cff46517b8b647dfcb0628253583a6e893e30f' }, h("div", { key: 'a898a84c5f40cd17edb6f5f8494cc3bbf0c9ea4a' }, "Expanded Content"), h("p", { key: 'eb79bdc3bf12333caa8a32acf7889450fa2da7f7' }, "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: '85d20f467529c7d4b3e133c97ae6e02377cb45d9', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }))));
     }
     static get is() { return "dga-card-v2-usage"; }
     static get states() {