@platformscode/core 0.0.31 → 0.0.32

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

@@ -9,7 +9,7 @@ export class DgaTabsUsage {
         };
     }
     render() {
-        return (h("div", { key: '16c9fd5d97b48c8e7f549795a851e844be3078f4', style: { padding: '20px', fontFamily: 'Arial, sans-serif' } }, h("h1", { key: '5cfea25763aaf59a7b46e196dc0db4a56d233357' }, "DGA Tabs Component Examples"), h("p", { key: '621968f4acac89c49b64c0349107477b76661778' }, "Comprehensive examples of the tabs component in various real-world scenarios."), h("section", { key: '421cc6293d9577b90ec8e6a4dc584f9ef50b79b3', style: { marginBottom: '40px' } }, h("h2", { key: '04351475215adf16e6450750df6ae87075e737ef' }, "1. Website Navigation Menu"), h("p", { key: '5dd150a1132472e872c4bb5c59a57c07f986d741' }, "Main navigation for a website with different sections"), h("dga-tabs", { key: '00cc4f875a9a76348d5998aaa4d7e8ab7e1e6543', size: "md", orientation: "horizontal", flush: false, external: false, divider: true, tabsList: [
+        return (h("div", { key: '628162f006451a52ead87155e0e579c922bfa2fc', style: { padding: '20px', fontFamily: 'Arial, sans-serif' } }, h("h1", { key: 'c4160d7395f6834c8e3ca13f515bdaf6bebbf6e1' }, "DGA Tabs Component Examples"), h("p", { key: 'e6c702d3a70acdd56d097d10db759d1ed5ef1771' }, "Comprehensive examples of the tabs component in various real-world scenarios."), h("section", { key: '9982b317c25d7853014d0f9a38a997b64b365256', style: { marginBottom: '40px' } }, h("h2", { key: '2fa869b24a1ba17f769fdd5cf117fe5b9b24790a' }, "1. Website Navigation Menu"), h("p", { key: '8dee5caa62943ed47c23846c0a057a333d903422' }, "Main navigation for a website with different sections"), h("dga-tabs", { key: 'b9c807a56e42bc5dad6625994f8e4db7038c4b6d', size: "md", orientation: "horizontal", flush: false, external: false, divider: true, tabsList: [
                 {
                     label: 'Home',
                     onClick: () => this.handleTabClick('Home'),
@@ -40,7 +40,7 @@ export class DgaTabsUsage {
                     tabIcon: "mail-01",
                     iconProps: { variant: "stroke", type: "sharp" }
                 }
-            ] })), h("section", { key: 'f7f0077d3b4be7fb51c1d6bc37009c936bb394d8', style: { marginBottom: '40px' } }, h("h2", { key: 'c93ebf887c4f80a693c18844064261ac25ef6566' }, "2. Dashboard Analytics Tabs"), h("p", { key: '6b2e09ed0cb2c2b6aa2375037a984243e2a4d75e' }, "Analytics dashboard with different data views"), h("dga-tabs", { key: '047367919de59434ada3255617c46bf27f0a092e', size: "lg", orientation: "horizontal", flush: false, external: false, divider: true, tabsList: [
+            ] })), h("section", { key: '1c0fcfd010e2d6c09a26ba04d98b2a9e17b63202', style: { marginBottom: '40px' } }, h("h2", { key: '3cbceb9b2b4a513786fb26344f2870e37801eb4b' }, "2. Dashboard Analytics Tabs"), h("p", { key: 'fa72bcebffee6003a6b88f4c2e363cb1383006d7' }, "Analytics dashboard with different data views"), h("dga-tabs", { key: '2e13938fda8d670862da4d94ac02aee68564b00d', size: "lg", orientation: "horizontal", flush: false, external: false, divider: true, tabsList: [
                 {
                     label: 'Overview',
                     onClick: () => this.handleTabClick('Overview'),
@@ -65,7 +65,7 @@ export class DgaTabsUsage {
                     tabIcon: "file-chart-01",
                     iconProps: { variant: "stroke", type: "sharp" }
                 }
-            ] })), h("section", { key: '84bb16774623ab52279dd668800656d667a1870b', style: { marginBottom: '40px' } }, h("h2", { key: 'c4eefa56f2cb1a8c5e03bef2776e7afa45107261' }, "3. Settings Panel (Vertical Layout)"), h("p", { key: 'b843ed4cdf8b1d3374e1c9594b8179b5e78e38a0' }, "User settings panel with vertical tab navigation"), h("div", { key: '84c6038345b1b78d2fe73604a58b5d6bb1c15756', style: { display: 'flex', gap: '20px' } }, h("dga-tabs", { key: '44ecfe7c6feb1a5720804009f7f866feffc93eca', size: "md", orientation: "vertical", flush: false, external: false, divider: true, tabsList: [
+            ] })), h("section", { key: '15e7fae2d2ab9ce98258dd039262b5416e0499c7', style: { marginBottom: '40px' } }, h("h2", { key: 'f46eeea0bae9ea9d182bd433093e265330c15452' }, "3. Settings Panel (Vertical Layout)"), h("p", { key: 'ffa0d66be82a368697144873248f4a7badbbb5a0' }, "User settings panel with vertical tab navigation"), h("div", { key: '0a6ede54b3c9a90917dde34c8fc68d0757c22242', style: { display: 'flex', gap: '20px' } }, h("dga-tabs", { key: '98d09c82fabe0ded7b8e042fbbbf1e15dffad12f', size: "md", orientation: "vertical", flush: false, external: false, divider: true, tabsList: [
                 {
                     label: 'Profile',
                     onClick: () => this.handleTabClick('Profile'),
@@ -96,7 +96,7 @@ export class DgaTabsUsage {
                     tabIcon: "lock-01",
                     iconProps: { variant: "stroke", type: "sharp" }
                 }
-            ] }), h("div", { key: '0605a09f3977d066e95b1e463f37a2ceee053d64', style: { padding: '20px', border: '1px solid #ddd', borderRadius: '4px', flex: '1 ' } }, h("p", { key: '502ad1844ecd03be8b52b96ca719ebdea29095bc' }, "Content area for the selected tab (", this.activeTab, ") would appear here.")))), h("section", { key: 'f6cf3f976f018f7239b1ea211661db5e16b0f3d6', style: { marginBottom: '40px' } }, h("h2", { key: '94499db6dfb3866d8427375d22a7767d06eeb051' }, "4. E-commerce Product Information"), h("p", { key: '0ff345ec59686ff473cd368d6f1359e82f9a2b42' }, "Product detail page with different information sections"), h("dga-tabs", { key: 'e72eddbc34226ddcbb8c90e270326365d3bad462', size: "md", orientation: "horizontal", flush: false, external: false, divider: true, tabsList: [
+            ] }), h("div", { key: 'f3742f33f1441657b3b18a2097807405c8a5493d', style: { padding: '20px', border: '1px solid #ddd', borderRadius: '4px', flex: '1 ' } }, h("p", { key: '3b26c31dfcd52b23e1aa5561685d72bf2f9323bc' }, "Content area for the selected tab (", this.activeTab, ") would appear here.")))), h("section", { key: '53f6f46fb810e995eef343ccec4dc869981f9231', style: { marginBottom: '40px' } }, h("h2", { key: 'bb074893025517772ab85cbc0e5bb70b972975a2' }, "4. E-commerce Product Information"), h("p", { key: 'ba9b692cdc6d7668619de7236f5c2f6ddd816aad' }, "Product detail page with different information sections"), h("dga-tabs", { key: '004129438827e5c505da446be6bdf5fd988d7326', size: "md", orientation: "horizontal", flush: false, external: false, divider: true, tabsList: [
                 {
                     label: 'Description',
                     onClick: () => this.handleTabClick('Description'),
@@ -127,7 +127,7 @@ export class DgaTabsUsage {
                     tabIcon: "refresh-01",
                     iconProps: { variant: "stroke", type: "sharp" }
                 }
-            ] })), h("section", { key: '512cd136789a655a3b5664655dcf114bc674128f', style: { marginBottom: '40px' } }, h("h2", { key: 'c5d9b80d1a9654a8be218b8844a02525eaeec170' }, "5. External Navigation Links"), h("p", { key: '73c0969ce4e2a92af646f8058383441960d10f54' }, "Tabs that navigate to external pages or different sections"), h("dga-tabs", { key: 'c4cd6dd52d350e53d8f1f8eaef3dc21403d5006b', size: "md", orientation: "horizontal", flush: false, external: true, divider: true, tabsList: [
+            ] })), h("section", { key: 'cc063ad8511ed1ef5a02ba6ede1c3d621a2a712c', style: { marginBottom: '40px' } }, h("h2", { key: '5e2568f561960512d2bcf64337b2847926ab8727' }, "5. External Navigation Links"), h("p", { key: '9deaae4a8892956914be8e290430ba55d19ac589' }, "Tabs that navigate to external pages or different sections"), h("dga-tabs", { key: '0ddfa890bee50a49656c6346c283eb0c37743b6e', size: "md", orientation: "horizontal", flush: false, external: true, divider: true, tabsList: [
                 {
                     label: 'Documentation',
                     link: '/docs',
@@ -152,7 +152,7 @@ export class DgaTabsUsage {
                     tabIcon: "github-01",
                     iconProps: { variant: "stroke", type: "sharp" }
                 }
-            ] })), h("section", { key: 'c0b895910229d1a24cd36ef80b73c496c91955d3', style: { marginBottom: '40px' } }, h("h2", { key: 'd964caf1a0129c779ef17aa3af1aaf56012d8279' }, "6. Many Tabs with Overflow Menu"), h("p", { key: '07412896c8574ebc4fa3f7de647813eec564db61' }, "Example with more than 5 tabs to demonstrate overflow behavior"), h("dga-tabs", { key: '2c6878be9b1bea93ee790bd82924da6aec15b5c3', size: "md", orientation: "horizontal", flush: false, external: false, divider: true, tabsList: [
+            ] })), h("section", { key: '60be9a863d19cfd89284d1b88aa18d912940189e', style: { marginBottom: '40px' } }, h("h2", { key: '04ce60a96f91325e987aa43a547009ca9d5976d3' }, "6. Many Tabs with Overflow Menu"), h("p", { key: '50784c1ae3da79b877cd73d8e388b50ec8a83cf5' }, "Example with more than 5 tabs to demonstrate overflow behavior"), h("dga-tabs", { key: 'cbd4efebc09b2c74d4cbf596800c968f31a3c0d2', size: "md", orientation: "horizontal", flush: false, external: false, divider: true, tabsList: [
                 {
                     label: 'January',
                     onClick: () => this.handleTabClick('January'),
@@ -201,19 +201,19 @@ export class DgaTabsUsage {
                     tabIcon: "calendar-01",
                     iconProps: { variant: "stroke", type: "sharp" }
                 }
-            ] })), h("section", { key: '2b3d328bc7bcb3d4e7a182461d22816164d7979a', style: { marginBottom: '40px' } }, h("h2", { key: '001eb16e08b953512e0e0b27b68db9cd598e42e6' }, "7. Different Tab Sizes"), h("h3", { key: '37db3e7741e35a331e32bb28c741a7a319473bb1' }, "Small Size"), h("dga-tabs", { key: '7b1fedd24c91a848678d4f90ed6c0b9eedfeba80', size: "sm", orientation: "horizontal", flush: false, external: false, divider: true, tabsList: [
+            ] })), h("section", { key: '794c54bb522c96f23921c3731cc93db2d474045d', style: { marginBottom: '40px' } }, h("h2", { key: 'a99948cef55db0dfb5f46a7a4d97afec06af99db' }, "7. Different Tab Sizes"), h("h3", { key: '20aac824cf65ca4e4b19037ece13de31c7c3daaa' }, "Small Size"), h("dga-tabs", { key: '510827b5d596606570c5ca630b3da4f89a0471b6', size: "sm", orientation: "horizontal", flush: false, external: false, divider: true, tabsList: [
                 { label: 'Small', onClick: () => this.handleTabClick('Small') },
                 { label: 'Compact', onClick: () => this.handleTabClick('Compact') },
                 { label: 'Minimal', onClick: () => this.handleTabClick('Minimal') }
-            ] }), h("h3", { key: '82d0607b258ec8a3fdb4e6b436b18b03722d7189' }, "Medium Size (Default)"), h("dga-tabs", { key: 'b07b10fad24a1ddd54e4be7d82a745c4767991a8', size: "md", orientation: "horizontal", flush: false, external: false, divider: true, tabsList: [
+            ] }), h("h3", { key: '59cfc64c36f8a8c8156aa0188f47a63885fdf171' }, "Medium Size (Default)"), h("dga-tabs", { key: 'cbcb78d947e269c0dc6111061939e05c2b92a6dc', size: "md", orientation: "horizontal", flush: false, external: false, divider: true, tabsList: [
                 { label: 'Medium', onClick: () => this.handleTabClick('Medium') },
                 { label: 'Standard', onClick: () => this.handleTabClick('Standard') },
                 { label: 'Default', onClick: () => this.handleTabClick('Default') }
-            ] }), h("h3", { key: 'e83b0e126ea928ecd17a801deb0d2ad2e69ce6bd' }, "Large Size"), h("dga-tabs", { key: '3e6e9789dd753531c24d27ff5eb4337a6b69a087', size: "lg", orientation: "horizontal", flush: false, external: false, divider: true, tabsList: [
+            ] }), h("h3", { key: '5728ea50253d8ba3cc31ba08d2d0a15894a1975f' }, "Large Size"), h("dga-tabs", { key: '3a82fc26afdbd2adf8e63fae46b48b49380d6b84', size: "lg", orientation: "horizontal", flush: false, external: false, divider: true, tabsList: [
                 { label: 'Large', onClick: () => this.handleTabClick('Large') },
                 { label: 'Prominent', onClick: () => this.handleTabClick('Prominent') },
                 { label: 'Bold', onClick: () => this.handleTabClick('Bold') }
-            ] })), h("section", { key: 'b4cc921390cb3e58a4d63d46d774f05a6eee8651', style: { marginBottom: '40px' } }, h("h2", { key: 'bb15295c43a71fcdcecff5a8c9641c7dfb45f033' }, "8. Flush Tabs (No Padding)"), h("p", { key: '6a93e1e576be660d039330f06bec201b54718a00' }, "Tabs with flush styling for tight layouts"), h("dga-tabs", { key: 'ccc5ddcc8ce1c2a554ddd056b450d06ca7b4ede2', size: "md", orientation: "horizontal", flush: true, external: false, divider: false, tabsList: [
+            ] })), h("section", { key: '1ebc1cfb746dfccae309032388d5423b0a892f2d', style: { marginBottom: '40px' } }, h("h2", { key: 'e53c52c45042a4582c95ad0c9a55c90400840c26' }, "8. Flush Tabs (No Padding)"), h("p", { key: 'c9be58b1fd0bb28edfd220341b93fe813658a91f' }, "Tabs with flush styling for tight layouts"), h("dga-tabs", { key: 'dda04a8018d541f814a0b56b95148f41eb59398e', size: "md", orientation: "horizontal", flush: true, external: false, divider: false, tabsList: [
                 {
                     label: 'Flush Tab 1',
                     onClick: () => this.handleTabClick('Flush1'),
@@ -232,7 +232,7 @@ export class DgaTabsUsage {
                     tabIcon: "square-01",
                     iconProps: { variant: "stroke", type: "sharp" }
                 }
-            ] })), h("section", { key: '17beb937b01fc1ac2e2cd4cf0e0e8093d67a478d', style: { marginBottom: '40px' } }, h("h2", { key: 'b6c81056429305242b326ba2c3596828beada753' }, "9. Disabled Tabs"), h("p", { key: '227ebf3b2fb5d8012452d8c071969988409472d1' }, "Tabs in disabled state for maintenance or restricted access"), h("dga-tabs", { key: 'ef580c35a1e35c7b25d8f62ad3f04e8c745c026c', size: "md", orientation: "horizontal", flush: false, external: false, divider: true, disabled: true, tabsList: [
+            ] })), h("section", { key: 'b0c702339806d59be62677a9f1701fe59f790502', style: { marginBottom: '40px' } }, h("h2", { key: '5912c3fa3aeac57944df635f5c071ec811262862' }, "9. Disabled Tabs"), h("p", { key: '0e544fcefeac8214d01fa51867fd3a9c2d15f6a0' }, "Tabs in disabled state for maintenance or restricted access"), h("dga-tabs", { key: '9bb79b46b61a447a01afbbcbe137ffa615c10cab', size: "md", orientation: "horizontal", flush: false, external: false, divider: true, disabled: true, tabsList: [
                 {
                     label: 'Disabled Tab 1',
                     onClick: () => this.handleTabClick('Disabled1'),
@@ -251,7 +251,7 @@ export class DgaTabsUsage {
                     tabIcon: "lock-01",
                     iconProps: { variant: "stroke", type: "sharp" }
                 }
-            ] })), h("section", { key: 'fa38efe07da4d34d6ca1f50927d96d8d1ab0f3d9', style: { marginBottom: '40px' } }, h("h2", { key: '799c25868a8e09ec8d46792c5680b209c2c00b24' }, "10. Mobile-Friendly Tabs"), h("p", { key: '3698484077eac911961c16ff2bc19be1b204b3da' }, "Compact tabs suitable for mobile interfaces"), h("dga-tabs", { key: '11e098d7d19abd39e4201eb60fb7e7e392f13abd', size: "sm", orientation: "horizontal", flush: true, external: false, divider: false, tabsList: [
+            ] })), h("section", { key: '691698c5f4e78ab9326884079b683944a7f977b6', style: { marginBottom: '40px' } }, h("h2", { key: 'eab8ae721a6081a6c5b0e5c5c02f7f9f212cb1ec' }, "10. Mobile-Friendly Tabs"), h("p", { key: '0f2175a569d1fd1c2d0a6c278df61b8dc3642638' }, "Compact tabs suitable for mobile interfaces"), h("dga-tabs", { key: '4962b653c5f6e738849a1bc54684ade47ec40a41', size: "sm", orientation: "horizontal", flush: true, external: false, divider: false, tabsList: [
                 {
                     label: 'Feed',
                     onClick: () => this.handleTabClick('Feed'),

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

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 export class DgaTagUsage {
     render() {
-        return (h("div", { key: '6ce800a510f24ce82f85d879881c5a55d00c0ecc' }, h("h1", { key: 'ea78e0226bc273721719b7cd229f2bbb0fa875f2' }, "Tag Example"), h("div", { key: 'ec3236eb69a38b0a41c46b9fe66998b9f03a4ce9', style: { padding: '50px', display: 'flex', gap: '20px' } }, h("div", { key: '04186d6836bac1903ec59c3f9e7cad7ce83efa94', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }, h("dga-tag", { key: '7cd6acfb05928019517290cb64f4ee874d311e77', label: "Label", variant: "neutral", outlined: false, rounded: false, size: "lg", leadIcon: {
+        return (h("div", { key: '81999862569f4fdca1f5ba6c33565895fa0e5e23' }, h("h1", { key: '1c3cb78870a7b4a2f1409c40a627f46732181106' }, "Tag Example"), h("div", { key: 'e87ec99623c23be5097582566b2add90c7d9418d', style: { padding: '50px', display: 'flex', gap: '20px' } }, h("div", { key: 'ac1fef4e115922b6f001cbf84939de0ca73021d6', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }, h("dga-tag", { key: '7378a1db79a21e9285327a95e9ff3e09fd242d2f', label: "Label", variant: "neutral", outlined: false, rounded: false, size: "lg", leadIcon: {
                 name: "alert-02",
                 type: "rounded",
                 variant: "stroke",
@@ -11,7 +11,7 @@ export class DgaTagUsage {
                 type: "rounded",
                 variant: "stroke",
                 size: 16
-            } }), h("dga-tag", { key: 'a4d9755a530054e79940ccbec23ec83cfba164cb', label: "Label", variant: "neutral", outlined: false, rounded: false, size: "md", leadIcon: {
+            } }), h("dga-tag", { key: '5dd4b57c74443dcd9c7dd3eda0e8625a448a39d7', label: "Label", variant: "neutral", outlined: false, rounded: false, size: "md", leadIcon: {
                 name: "alert-02",
                 type: "rounded",
                 variant: "stroke",
@@ -21,7 +21,7 @@ export class DgaTagUsage {
                 type: "rounded",
                 variant: "stroke",
                 size: 16
-            } }), h("dga-tag", { key: 'a92f99ced2cccd3517ed7588337ddc98c2c286bf', label: "Label", variant: "neutral", outlined: false, rounded: false, size: "sm", leadIcon: {
+            } }), h("dga-tag", { key: 'f6e857742b43dc111995e7614e2b48b7e9e76ac2', label: "Label", variant: "neutral", outlined: false, rounded: false, size: "sm", leadIcon: {
                 name: "alert-02",
                 type: "rounded",
                 variant: "stroke",
@@ -31,7 +31,7 @@ export class DgaTagUsage {
                 type: "rounded",
                 variant: "stroke",
                 size: 16
-            } }), h("dga-tag", { key: 'c9f7a5731d1f4f40d6df4e15fea0fbaba32a083e', label: "Label", variant: "success", outlined: false, rounded: false, size: "lg", leadIcon: {
+            } }), h("dga-tag", { key: 'b03d014acf98b20d8fde26b0a32f05c9008f4d69', label: "Label", variant: "success", outlined: false, rounded: false, size: "lg", leadIcon: {
                 name: "alert-02",
                 type: "rounded",
                 variant: "stroke",
@@ -41,7 +41,7 @@ export class DgaTagUsage {
                 type: "rounded",
                 variant: "stroke",
                 size: 16
-            } }), h("dga-tag", { key: '908a8e0eec12890e3f07b947912e12d876a9ee48', label: "Label", variant: "success", outlined: false, rounded: false, size: "md", leadIcon: {
+            } }), h("dga-tag", { key: '2ca02fe0e6ac9a2361dffb17c3d39583e03f1813', label: "Label", variant: "success", outlined: false, rounded: false, size: "md", leadIcon: {
                 name: "alert-02",
                 type: "rounded",
                 variant: "stroke",
@@ -51,7 +51,7 @@ export class DgaTagUsage {
                 type: "rounded",
                 variant: "stroke",
                 size: 16
-            } }), h("dga-tag", { key: '5007473a5cfc295738c46ebb5263dccc4e511ea1', label: "Label", variant: "success", outlined: false, rounded: false, size: "sm", leadIcon: {
+            } }), h("dga-tag", { key: '70ec2a3e13384cc41a0b6ddcb72b03f6c2d1c4e3', label: "Label", variant: "success", outlined: false, rounded: false, size: "sm", leadIcon: {
                 name: "alert-02",
                 type: "rounded",
                 variant: "stroke",
@@ -61,7 +61,7 @@ export class DgaTagUsage {
                 type: "rounded",
                 variant: "stroke",
                 size: 16
-            } }), h("dga-tag", { key: 'f763888ac63e48a8bf827a4e761caa2e98adf672', label: "Label", variant: "error", outlined: false, rounded: false, size: "lg", leadIcon: {
+            } }), h("dga-tag", { key: '1dd73d805fc2e082380dc6c93fd01694b3491a80', label: "Label", variant: "error", outlined: false, rounded: false, size: "lg", leadIcon: {
                 name: "alert-02",
                 type: "rounded",
                 variant: "stroke",
@@ -71,7 +71,7 @@ export class DgaTagUsage {
                 type: "rounded",
                 variant: "stroke",
                 size: 16
-            } }), h("dga-tag", { key: '330b1f210a7832bf34a4e55676c5d7ba8fb8b701', label: "Label", variant: "error", outlined: false, rounded: false, size: "md", leadIcon: {
+            } }), h("dga-tag", { key: 'c78a7dffbe9e98147d52d0399c4f6b0d3c877828', label: "Label", variant: "error", outlined: false, rounded: false, size: "md", leadIcon: {
                 name: "alert-02",
                 type: "rounded",
                 variant: "stroke",
@@ -81,7 +81,7 @@ export class DgaTagUsage {
                 type: "rounded",
                 variant: "stroke",
                 size: 16
-            } }), h("dga-tag", { key: '61f3602b040deaf9c21b5279e9ab6ec305be88db', label: "Label", variant: "error", outlined: false, rounded: false, size: "sm", leadIcon: {
+            } }), h("dga-tag", { key: '71591d064bbeb4801cf966f8d3669deb47b252fd', label: "Label", variant: "error", outlined: false, rounded: false, size: "sm", leadIcon: {
                 name: "alert-02",
                 type: "rounded",
                 variant: "stroke",
@@ -91,22 +91,22 @@ export class DgaTagUsage {
                 type: "rounded",
                 variant: "stroke",
                 size: 16
-            } })), h("div", { key: '720a5d67a3ef1830a40a4ab55e7a21f273ef3307', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }, h("dga-tag", { key: '681fc7f63580487b62b8e47a33ab67cefb851dd3', label: "Label", variant: "error", size: "lg", outlined: false, rounded: false, iconOnly: true, leadIcon: {
+            } })), h("div", { key: 'fa08d77342d46b6f00f8d9d91795bff9f6a6740d', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }, h("dga-tag", { key: 'f457cd2c53d8c9ad9c196dcbcdb950c97d737575', label: "Label", variant: "error", size: "lg", outlined: false, rounded: false, iconOnly: true, leadIcon: {
                 name: "alert-02",
                 type: "rounded",
                 variant: "stroke",
                 size: 16
-            } }), h("dga-tag", { key: '3d870be2b421deb23f285f8148493493c349fc19', label: "Label", variant: "neutral", size: "md", outlined: false, rounded: false, iconOnly: true, leadIcon: {
+            } }), h("dga-tag", { key: 'c02c94489f57a8bc681b60cd0fd5bf5ea637aa8e', label: "Label", variant: "neutral", size: "md", outlined: false, rounded: false, iconOnly: true, leadIcon: {
                 name: "alert-02",
                 type: "rounded",
                 variant: "stroke",
                 size: 16
-            } }), h("dga-tag", { key: '80f426e342e85a6a11cbea74f59b2061372475f8', label: "Label", variant: "neutral", size: "sm", outlined: false, rounded: false, iconOnly: true, leadIcon: {
+            } }), h("dga-tag", { key: '77fbf7a3f1e4d2923c1c6fa3450c59201edb7f5b', label: "Label", variant: "neutral", size: "sm", outlined: false, rounded: false, iconOnly: true, leadIcon: {
                 name: "alert-02",
                 type: "rounded",
                 variant: "stroke",
                 size: 16
-            } }), h("dga-status-tag", { key: '6463d80e4e049bd5f44a0c01ec4faf98bcaf5bfe', label: 'Status', color: 'neutral', size: 'lg', status: 'subtle' }), h("dga-status-tag", { key: '82c9932afc4e5d4a2116c8b51fef1922296b08d4', label: 'Status', color: 'neutral', size: 'md', status: 'subtle' }), h("dga-status-tag", { key: 'ec41f1421b96258aabb355b4e5dfcc02106ae576', label: 'Status', color: 'neutral', size: 'sm', status: 'subtle' }), h("dga-status-tag", { key: '1f01d4bf4cc42c4a48f1667749388efd0c9366b2', label: 'Status', color: 'neutral', size: 'lg', status: 'inverted' }), h("dga-status-tag", { key: '09ac2fb75e0f3f55965acfbfeb48958c1ac6f85f', label: 'Status', color: 'neutral', size: 'md', status: 'inverted' }), h("dga-status-tag", { key: 'aba1efe1024fbec5a520182f2a364dd75f321e19', label: 'Status', color: 'neutral', size: 'sm', status: 'inverted' }), h("dga-status-tag", { key: '06146817b00be8064d8cb8fdefc7d5eedc77bc26', label: 'Status', color: 'neutral', size: 'lg', status: 'ghost' }), h("dga-status-tag", { key: '1e19c30bcbe17b8275f15a9267b6a2069cb8442c', label: 'Status', color: 'neutral', size: 'md', status: 'ghost' }), h("dga-status-tag", { key: '82a3428a03b23ccf007daf92ddfa54a14f481236', label: 'Status', color: 'neutral', size: 'sm', status: 'ghost' }), h("dga-status-tag", { key: '9de05265f048dc3052e486e8efe9a99f2cf88fb9', label: 'Status', color: 'blue', size: 'lg', status: 'subtle' }), h("dga-status-tag", { key: '44441033dd3c9622533b147dbd5d7c3f85a4d32c', label: 'Status', color: 'blue', size: 'md', status: 'subtle' }), h("dga-status-tag", { key: 'ac44f59eb02c4e472d203cd767237aea118d8d23', label: 'Status', color: 'blue', size: 'sm', status: 'subtle' }), h("dga-status-tag", { key: '28d44375de42be25aeb5140ec7ab2fcaedfa3217', label: 'Status', color: 'blue', size: 'lg', status: 'inverted' }), h("dga-status-tag", { key: '560b36c56bdd7b11d7530c624ce8656ea7a46812', label: 'Status', color: 'blue', size: 'md', status: 'inverted' }), h("dga-status-tag", { key: '6cdd0ec1351393dccd26347ea92e8b211e1c5431', label: 'Status', color: 'blue', size: 'sm', status: 'inverted' }), h("dga-status-tag", { key: 'a929dc300b1001e66682ee3792ddf685a80c28e8', label: 'Status', color: 'blue', size: 'lg', status: 'ghost' }), h("dga-status-tag", { key: '7a0774a9f07f28b7a8fd714626ec47e34887d133', label: 'Status', color: 'blue', size: 'md', status: 'ghost' }), h("dga-status-tag", { key: 'cb4dbaf309bbf28b44ced6387433d793e8369fa0', label: 'Status', color: 'blue', size: 'sm', status: 'ghost' }), h("dga-status-tag", { key: '52eced180d28b8b00507e8aa834a7285b8c2b630', label: 'Status', color: 'green', size: 'lg', status: 'subtle' }), h("dga-status-tag", { key: '3d8a99581e65aa7492bf29338a68197507a07aeb', label: 'Status', color: 'green', size: 'md', status: 'subtle' }), h("dga-status-tag", { key: 'a0c520f3a6b1bff51190ee50ff92af952242b5b2', label: 'Status', color: 'green', size: 'sm', status: 'subtle' }), h("dga-status-tag", { key: 'ab8325778a52f74ecc88658d65b8376516fd6e6b', label: 'Status', color: 'green', size: 'lg', status: 'inverted' }), h("dga-status-tag", { key: '16a27ee9afe21d5b4ae7e8da0eb44d7f824d2574', label: 'Status', color: 'green', size: 'md', status: 'inverted' }), h("dga-status-tag", { key: 'af014f9ca8ab8e2be8e0f85fa891bbecd4bbd49a', label: 'Status', color: 'green', size: 'sm', status: 'inverted' }), h("dga-status-tag", { key: '3389ab5f33b551066091808030a1f4b2242f1eab', label: 'Status', color: 'green', size: 'lg', status: 'ghost' }), h("dga-status-tag", { key: 'a49507df1a9e39b72f3b80788418e057c11bd6c4', label: 'Status', color: 'green', size: 'md', status: 'ghost' }), h("dga-status-tag", { key: '51eb3ae9ed146bd75d9314e115c5f067b9146208', label: 'Status', color: 'green', size: 'sm', status: 'ghost' }), h("dga-status-tag", { key: 'b6d407d0d88e1c916d6b7d7fcc0144d4f6c89a5d', label: 'Status', color: 'yellow', size: 'lg', status: 'subtle' }), h("dga-status-tag", { key: '28f12636af2950d15205f83689b1bd420b4499d0', label: 'Status', color: 'yellow', size: 'md', status: 'subtle' }), h("dga-status-tag", { key: '8cfc221c2fc0c478907dde2a949a3791bb2900fc', label: 'Status', color: 'yellow', size: 'sm', status: 'subtle' }), h("dga-status-tag", { key: '4d6db105ce3ddce90802b12cb35d268354615e5d', label: 'Status', color: 'yellow', size: 'lg', status: 'inverted' }), h("dga-status-tag", { key: 'a89ad0895e9d37e1b21a23c71b59bb1d74622b57', label: 'Status', color: 'yellow', size: 'md', status: 'inverted' }), h("dga-status-tag", { key: '9bcc60f3d3b9fd73f45fab1431bd934029bd3d2a', label: 'Status', color: 'yellow', size: 'sm', status: 'inverted' }), h("dga-status-tag", { key: '5a3d37445a6da86c11bbcb8b73c127303a50c9cd', label: 'Status', color: 'yellow', size: 'lg', status: 'ghost' }), h("dga-status-tag", { key: '73c525b2a405444e5fce8fe9899211200f85823d', label: 'Status', color: 'yellow', size: 'md', status: 'ghost' }), h("dga-status-tag", { key: '2af32b11749c2b0b11ea7ac2b0f7c87179f20468', label: 'Status', color: 'yellow', size: 'sm', status: 'ghost' }), h("dga-status-tag", { key: '980c1dc065bc80cd79df452d11ff93dda3f84dc0', label: 'Status', color: 'red', size: 'lg', status: 'subtle' }), h("dga-status-tag", { key: '2914e4ca20cf30153994e3b5ea837e277ee9d931', label: 'Status', color: 'red', size: 'md', status: 'subtle' }), h("dga-status-tag", { key: '6d092c38bf29f64df1c00b3079b53a670ae9bc8a', label: 'Status', color: 'red', size: 'sm', status: 'subtle' }), h("dga-status-tag", { key: '11fa18fefb761458caa87568bca8bf4adc163d50', label: 'Status', color: 'red', size: 'lg', status: 'inverted' }), h("dga-status-tag", { key: 'a79acd64323fea2cc12cd5a0bbee2ead14974b3d', label: 'Status', color: 'red', size: 'md', status: 'inverted' }), h("dga-status-tag", { key: 'e6803ca2df369064f3d4dbd0bc7c7b030549746b', label: 'Status', color: 'red', size: 'sm', status: 'inverted' }), h("dga-status-tag", { key: '38c0ebc2edcffd2bda43b9d08a6c0b374d8b9b4f', label: 'Status', color: 'red', size: 'lg', status: 'ghost' }), h("dga-status-tag", { key: 'ed3e5f184897a028a75863bce1dad451a7133c26', label: 'Status', color: 'red', size: 'md', status: 'ghost' }), h("dga-status-tag", { key: 'bda3fa881d48c6eef2a44904680b071f75a275bc', label: 'Status', color: 'red', size: 'sm', status: 'ghost' })))));
+            } }), h("dga-status-tag", { key: '039f69ca5de89cd53e4d58eca3da21e2eb6e1fb1', label: 'Status', color: 'neutral', size: 'lg', status: 'subtle' }), h("dga-status-tag", { key: 'cb8fbdab7a9bbad1750148c0c3f81882a1edb25d', label: 'Status', color: 'neutral', size: 'md', status: 'subtle' }), h("dga-status-tag", { key: 'c7313fca358ee4293ba877776a3f6e20e7a7bdaf', label: 'Status', color: 'neutral', size: 'sm', status: 'subtle' }), h("dga-status-tag", { key: '90d4493e63ae00e7cda80cc8eb123e0759d57c44', label: 'Status', color: 'neutral', size: 'lg', status: 'inverted' }), h("dga-status-tag", { key: '757b9a3559af40652cb5cf561431406d8ffeda14', label: 'Status', color: 'neutral', size: 'md', status: 'inverted' }), h("dga-status-tag", { key: '4f07a63c0137bd813f2be1b2548e365df5fffa97', label: 'Status', color: 'neutral', size: 'sm', status: 'inverted' }), h("dga-status-tag", { key: '47d3c21162d844fd4a53c4670ce478378529cb3f', label: 'Status', color: 'neutral', size: 'lg', status: 'ghost' }), h("dga-status-tag", { key: '5982b42c10b578f939fa9e3a23159634d2e85d7c', label: 'Status', color: 'neutral', size: 'md', status: 'ghost' }), h("dga-status-tag", { key: 'e2933b2808883d848564f9d12390eab226de8640', label: 'Status', color: 'neutral', size: 'sm', status: 'ghost' }), h("dga-status-tag", { key: '46d7af59df1492e72fa25943b830507179fbff09', label: 'Status', color: 'blue', size: 'lg', status: 'subtle' }), h("dga-status-tag", { key: 'edf3014ce62c8036d855262f135b0457782454c5', label: 'Status', color: 'blue', size: 'md', status: 'subtle' }), h("dga-status-tag", { key: '2a1bcd67def7e0dd7ebc1db6ed7895c62d0fadbf', label: 'Status', color: 'blue', size: 'sm', status: 'subtle' }), h("dga-status-tag", { key: '834b80d541acdc6272b682b803394c365c970699', label: 'Status', color: 'blue', size: 'lg', status: 'inverted' }), h("dga-status-tag", { key: '72cdb9b18bf049bf21ae6b1a803af53d11345f76', label: 'Status', color: 'blue', size: 'md', status: 'inverted' }), h("dga-status-tag", { key: '00ef03b907d737178eeb84bfb483067012f9a373', label: 'Status', color: 'blue', size: 'sm', status: 'inverted' }), h("dga-status-tag", { key: '16abae4c5af1ba94d6a450ba395bcd7e250a1c9b', label: 'Status', color: 'blue', size: 'lg', status: 'ghost' }), h("dga-status-tag", { key: '12ab0182693ee14f216ef142bbb3a321cf084d18', label: 'Status', color: 'blue', size: 'md', status: 'ghost' }), h("dga-status-tag", { key: '9178bf1bddaf571435717757a50dd4c9a105128f', label: 'Status', color: 'blue', size: 'sm', status: 'ghost' }), h("dga-status-tag", { key: '083c4dbff48c6774f3026849a814c75f80e5b9c1', label: 'Status', color: 'green', size: 'lg', status: 'subtle' }), h("dga-status-tag", { key: 'f0df35318fbb5d27423928d8f0d787c0f9f0431c', label: 'Status', color: 'green', size: 'md', status: 'subtle' }), h("dga-status-tag", { key: '64a09c0b11e5f69f01ba979c96940c87b4772a39', label: 'Status', color: 'green', size: 'sm', status: 'subtle' }), h("dga-status-tag", { key: '24b4cefb385969aca01a16224eba44fada68c65d', label: 'Status', color: 'green', size: 'lg', status: 'inverted' }), h("dga-status-tag", { key: '8a4ede6e75b1bd2d8060c82e2b65e818f9bd71f4', label: 'Status', color: 'green', size: 'md', status: 'inverted' }), h("dga-status-tag", { key: '3b7bee77f957867b0b222b594bd312105c085e5e', label: 'Status', color: 'green', size: 'sm', status: 'inverted' }), h("dga-status-tag", { key: 'b2181e0d71d06c60223aa11e061553114ecb6b02', label: 'Status', color: 'green', size: 'lg', status: 'ghost' }), h("dga-status-tag", { key: '0c8650b722d1af8eaf39b9aa50b15af6068f6921', label: 'Status', color: 'green', size: 'md', status: 'ghost' }), h("dga-status-tag", { key: 'dfc4ff68fd89814e01ba7c185e6b746cf0c82e00', label: 'Status', color: 'green', size: 'sm', status: 'ghost' }), h("dga-status-tag", { key: 'd08eb82340ef1d5e02c5a66336873b73041fcd0c', label: 'Status', color: 'yellow', size: 'lg', status: 'subtle' }), h("dga-status-tag", { key: '42e777543908065a806925526a73051183b03604', label: 'Status', color: 'yellow', size: 'md', status: 'subtle' }), h("dga-status-tag", { key: '10bb7d1be8076a44908f2e56786e11a0f84d5819', label: 'Status', color: 'yellow', size: 'sm', status: 'subtle' }), h("dga-status-tag", { key: 'e9ccf59fa2ae461b4d9d558890f1b69a27c8f11e', label: 'Status', color: 'yellow', size: 'lg', status: 'inverted' }), h("dga-status-tag", { key: 'aa9f2e89a046cfcbac1e70abacde6f2520f3f175', label: 'Status', color: 'yellow', size: 'md', status: 'inverted' }), h("dga-status-tag", { key: 'b1883f3a7519ee75a2349b269cfdcf8ef3498a29', label: 'Status', color: 'yellow', size: 'sm', status: 'inverted' }), h("dga-status-tag", { key: '70e6facb106fd20f0418b467a2c17f33db43fa63', label: 'Status', color: 'yellow', size: 'lg', status: 'ghost' }), h("dga-status-tag", { key: 'fb9942c4cf0341fe874e8f68639d32b2be506dcf', label: 'Status', color: 'yellow', size: 'md', status: 'ghost' }), h("dga-status-tag", { key: '4352b83250856c254ca3e54c76fca160e3681844', label: 'Status', color: 'yellow', size: 'sm', status: 'ghost' }), h("dga-status-tag", { key: 'a0f20d29e7745008fae7e919eda6e36933036f2b', label: 'Status', color: 'red', size: 'lg', status: 'subtle' }), h("dga-status-tag", { key: 'c7cd6649923da449882622c8892f77479bd3ff55', label: 'Status', color: 'red', size: 'md', status: 'subtle' }), h("dga-status-tag", { key: '04610d648283f9dd1edd8fbd576a2d8f0785dba8', label: 'Status', color: 'red', size: 'sm', status: 'subtle' }), h("dga-status-tag", { key: 'ba3032499e523fba4aed37a301a1dbcc060ac59a', label: 'Status', color: 'red', size: 'lg', status: 'inverted' }), h("dga-status-tag", { key: '998eb6ad6f3e3aaf04fc64e8009fe0d9aa1f804c', label: 'Status', color: 'red', size: 'md', status: 'inverted' }), h("dga-status-tag", { key: '28a07fa00954cc67dc71963693ced457159600f4', label: 'Status', color: 'red', size: 'sm', status: 'inverted' }), h("dga-status-tag", { key: '30ac7113d1eff3e86cbd771f1ab5ffca9e6ea094', label: 'Status', color: 'red', size: 'lg', status: 'ghost' }), h("dga-status-tag", { key: '3e409acd287ed95623215cad27218a272bf3579d', label: 'Status', color: 'red', size: 'md', status: 'ghost' }), h("dga-status-tag", { key: 'b8383f5add132511925185260098d775a903a862', label: 'Status', color: 'red', size: 'sm', status: 'ghost' })))));
     }
     static get is() { return "dga-tag-usage"; }
 }

package/dist/collection/usage/dga-text-input-usage.js

@@ -4,9 +4,9 @@ export class DgaTextInputUsage {
         this.value = 'Text Input Example';
     }
     render() {
-        return (h("div", { key: '348cc16d24b1e80b6b200ec2a521b1634bdc80f8' }, h("h1", { key: '8f73d95669e7dac063dedabaf32e03fdc5278e09' }, "Text Input Example"), h("div", { key: '636ff8f54ef87ccd5f69092804f962a5d5bfe493', style: { padding: '50px' } }, h("div", { key: 'cb90a4c9a223d3a3ab78d9baa9e1e5cd8270e6fc', style: { display: 'flex', flexDirection: 'column', gap: '16px' } }, h("input", { key: '23f05292d32932a030e8daa9aade94c631121d8c', type: "text", value: this.value, onChange: (e) => (this.value = e.target.value) }), h("p", { key: 'd0adec995d6a10c565b35189548be7a72671faad' }, this.value), h("dga-text-input", { key: '06c120ea770e26220e9cac17bf28aeb9d42d7693', readonly: false, variant: "darker", label: "Label", value: this.value, required: true, feedbackIcon: true, icon: { name: 'search-01', variant: 'stroke', type: 'standard' }, helperTextIcon: { name: 'alert-circle', variant: 'stroke', type: 'standard' }, helperText: "test", error: true, onInput: (e) => (this.value = e.target.value) }), h("dga-text-input", { key: '993975eced946457db89fd8631261254017519cf', readonly: false, variant: "darker", label: "Label", value: "Entered text", required: true, feedbackIcon: true, icon: { name: 'search-01', variant: 'stroke', type: 'standard' }, helperText: "test", error: true }), h("dga-text-input", { key: '2790893f0154018045fb641c815afcedbf3c4b4d', readonly: false, variant: "darker", label: "Label", value: "Entered text", required: true, feedbackIcon: true, icon: { name: 'search-01', variant: 'stroke', type: 'standard' }, helperTextIcon: { name: 'alert-circle', variant: 'stroke', type: 'standard' }, helperText: "test", error: true }, h("dga-prefix", { key: 'b86d2684cfc9e62d4d6883b92a19cca87091599a', type: "button", variant: "solid",
+        return (h("div", { key: '510aed06b703ade0d10a76afd9b99edbe9f37245' }, h("h1", { key: '7ec2ab30a0abb937519434d172972c9c75139c2f' }, "Text Input Example"), h("div", { key: '86d82d7705cb93ad2dbad6cd2207447c1b20dae8', style: { padding: '50px' } }, h("div", { key: '5b5dc357fcc2efaae6776844c7d41b34cfcd073d', style: { display: 'flex', flexDirection: 'column', gap: '16px' } }, h("input", { key: '7245da45f5a24dd270d4452c95687e7cc4b60c8b', type: "text", value: this.value, onChange: (e) => (this.value = e.target.value) }), h("p", { key: '270a5a3bcc8198789cdff8ff48629457c04d3307' }, this.value), h("dga-text-input", { key: 'f42ad47f33ae4b8a8063492beacc951e1e238dfc', readonly: false, variant: "darker", label: "Label", value: this.value, required: true, feedbackIcon: true, icon: { name: 'search-01', variant: 'stroke', type: 'standard' }, helperTextIcon: { name: 'alert-circle', variant: 'stroke', type: 'standard' }, helperText: "test", error: true, onInput: (e) => (this.value = e.target.value) }), h("dga-text-input", { key: 'af747a2ea8aa917620da5fe1d38739131c9b3dbd', readonly: false, variant: "darker", label: "Label", value: "Entered text", required: true, feedbackIcon: true, icon: { name: 'search-01', variant: 'stroke', type: 'standard' }, helperText: "test", error: true }), h("dga-text-input", { key: '06414380052c6011d121d62abc9937ed87557e0d', readonly: false, variant: "darker", label: "Label", value: "Entered text", required: true, feedbackIcon: true, icon: { name: 'search-01', variant: 'stroke', type: 'standard' }, helperTextIcon: { name: 'alert-circle', variant: 'stroke', type: 'standard' }, helperText: "test", error: true }, h("dga-prefix", { key: '10ba92ebbf6fe38e4ee9c7db991633274426e212', type: "button", variant: "solid",
             // label="Button Label"
-            icon: { name: 'search-01' } })), h("dga-label", { key: 'be4aea608f00fc390362246ea5b7ba704d7341cd', label: "Mandatory Text Input" }), h("dga-label", { key: '4718efb107a5b49c61e3c06003be48e8268b6498', label: "Mandatory Text Input", required: true })))));
+            icon: { name: 'search-01' } })), h("dga-label", { key: '8e574c3562f8157a50d3e40e058a1b1b5cb32235', label: "Mandatory Text Input" }), h("dga-label", { key: 'cefc0acf5bb774f70dd727210e31df3f733fdc5a', label: "Mandatory Text Input", required: true })))));
     }
     static get is() { return "dga-text-input-usage"; }
     static get states() {

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

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 export class DgaTextareaUsage {
     render() {
-        return (h("div", { key: 'fa8fff9f0a64bb6beb30e658aeede694fbd5abbe' }, h("h1", { key: '4a10c5c8c2b0e390f07eaa6fb40176cc975e4076' }, "Textarea Example"), h("div", { key: 'edb7e3dac0775631874c8593da3e3fa3e1f2c414', style: { padding: '50px', display: 'flex', gap: '20px' } }, h("div", { key: 'c41d4ce46b2642be4341c8c95d4826179de04d51', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }, h("dga-textarea", { key: '8ee9ae7d10c95010acb5dff8eb1e5d873ee2cb39', label: "Label", placeholder: "Placeholder...", scrollbar: true, readonly: true }), h("dga-textarea", { key: 'b85e3af4591acd97239cc46a380efbe171f83ace', placeholder: "Placeholder...", scrollbar: true })), h("div", { key: '8616d8804c33178d98c587eff6b1f118c4c8bc2a', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }))));
+        return (h("div", { key: 'c761c07b382a4db763c8c12fb75bae70cf9530e5' }, h("h1", { key: 'c74bf5954bbb87e7611c79b6f67bdc70889f7e3d' }, "Textarea Example"), h("div", { key: '0e5fa64c1850f22c85426b3c31a77ba3d1f484ff', style: { padding: '50px', display: 'flex', gap: '20px' } }, h("div", { key: '37b509f36a54893dbd977b1c5d822555643cc08e', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }, h("dga-textarea", { key: '6a599c45c6ee9738c7d1fb64909c0a00adf390d8', label: "Label", placeholder: "Placeholder...", scrollbar: true, readonly: true }), h("dga-textarea", { key: '77be82bcb798d72f4405703b9e92d42b62eb88a9', placeholder: "Placeholder...", scrollbar: true })), h("div", { key: '19f51008762a19f7fbef4c7fa9009baf5b79ed0a', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }))));
     }
     static get is() { return "dga-textarea-usage"; }
 }

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

@@ -4,11 +4,11 @@ export class DgaTooltipUsage {
         this.activeStep = 1;
     }
     render() {
-        return (h("div", { key: '9c68a4ddceb36496c342ab67f1a6dd9f452f99d1' }, h("h1", { key: '5d0149e53e5402cd1261389d1d5bdd9b70b7a467' }, "Tooltip Example"), h("div", { key: '72b8bcda6ea38e9f2187d67341cfb108294b0549', style: { padding: "50px", display: "flex", gap: "20px" } }, h("div", { key: '6ff3655d7007261cc08d32728947970152a58139', style: { display: "flex", flexDirection: "column", gap: "20px" } }, h("dga-tooltip", { key: 'b16dd97acb6626811f7fde5812fcc454837a0222', title: "Tooltip title", helperText: "Max width of tooltips is 240px - text will wrap automatically", direction: 'right', theme: 'dark', icon: true, beakAlignment: 'end', beakPlacement: 'left', feedbackIcon: {
+        return (h("div", { key: 'e5cbbab7b49db1ee99c95eed77d785ecb8e62461' }, h("h1", { key: 'c5c4b575154a86fcd81660bd2b2f8fa0f66af4c4' }, "Tooltip Example"), h("div", { key: '7943a66330e3faeaf2254f603c6ebeace454d898', style: { padding: "50px", display: "flex", gap: "20px" } }, h("div", { key: 'cc23a9a5ce4bccdd257246e09f7e26c67e000a98', style: { display: "flex", flexDirection: "column", gap: "20px" } }, h("dga-tooltip", { key: '83b927809a6a5168fa1ea8f8b31fcb32912466ff', title: "Tooltip title", helperText: "Max width of tooltips is 240px - text will wrap automatically", direction: 'right', theme: 'dark', icon: true, beakAlignment: 'end', beakPlacement: 'left', feedbackIcon: {
                 type: "error-!",
                 style: "container",
                 size: 24
-            } }, "Hello")), h("div", { key: '7643631cbcafa70f7a5cc0133e7de60abb2fc174', style: { display: "flex", flexDirection: "column", gap: "20px" } }))));
+            } }, "Hello")), h("div", { key: '2064cf93b363381b287af23a79c9126d019da2de', style: { display: "flex", flexDirection: "column", gap: "20px" } }))));
     }
     static get is() { return "dga-tooltip-usage"; }
     static get states() {

package/dist/components/date-cell.js

@@ -1,4 +1,4 @@
-import { D as DateCell$1, d as defineCustomElement$1 } from './p-BG5weAEH.js';
+import { D as DateCell$1, d as defineCustomElement$1 } from './p-DuOjmwGB.js';
 
 const DateCell = DateCell$1;
 const defineCustomElement = defineCustomElement$1;

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

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, h } from './p-JCGAt0My.js';
-import { d as defineCustomElement$3 } from './p-B0UwUajL.js';
-import { d as defineCustomElement$2 } from './p-E2Ef0hpp.js';
+import { d as defineCustomElement$3 } from './p-B_IMA0_R.js';
+import { d as defineCustomElement$2 } from './p-CBcSAhbv.js';
 
 const DgaAccordionUsage$1 = /*@__PURE__*/ proxyCustomElement(class DgaAccordionUsage extends H {
     constructor() {
@@ -8,7 +8,7 @@ const DgaAccordionUsage$1 = /*@__PURE__*/ proxyCustomElement(class DgaAccordionU
         this.__registerHost();
     }
     render() {
-        return (h("div", { key: 'deb171b69692cb63f0c3d4b134799d654076d050' }, h("h1", { key: '6c7bcc0a7205367a4995d8d66ccf057f8f735d39' }, "Accordion Example"), h("div", { key: '695d6710d2146a4d276567c5a30846209b64a3e0', style: { padding: '50px', display: 'flex', gap: '20px' } }, h("div", { key: '52fdc14e2fd9825785a55cfe1e715e825d2d0e02', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }, h("dga-accordion", { key: 'ec562f14fd77382fd02e662a6fbbee2df0052899', 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: '17c72b6fc9e9babbbfa5b553a5b55c1e5c1e2bfc', title: "Accordion Title", size: "md" }), h("dga-accordion", { key: '5c2b25315b4acb9fe7d65345e7136b0c5cc68366', title: "Accordion Title", size: "sm" }), h("dga-accordion", { key: '462694366330e684801e5270227c4c6e64b2527b', 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: 'd35b5b87d06feeb98bd806c33b615bc291f54092', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }))));
+        return (h("div", { key: 'd728c17615304e20fd2800700a94a99d463acc0b' }, h("h1", { key: '46a2a505750332507815947469a841fbd2ede691' }, "Accordion Example"), h("div", { key: '3988088b9192b959d8237f0f9e8c4b9ea2101c89', style: { padding: '50px', display: 'flex', gap: '20px' } }, h("div", { key: '607178ac7a835759095036441ad7458dbf9c9d9b', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }, h("dga-accordion", { key: '5b5ec6527e5f5e20d7b60c0f4ffb92b3213cb110', 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: '3491afd6b04f8581de608ea3296ec51291f6ff23', title: "Accordion Title", size: "md" }), h("dga-accordion", { key: '9f0f1b9dd776cddb57864f14672e11f718a46102', title: "Accordion Title", size: "sm" }), h("dga-accordion", { key: '3df7c3e8740c41fc7ce7572d942825e16ec179b2', 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: '0a5b8c7df6a09a79ad477f8664c6dde032d49b7a', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }))));
     }
 }, [0, "dga-accordion-usage"]);
 function defineCustomElement$1() {

package/dist/components/dga-accordion.js

@@ -1,4 +1,4 @@
-import { D as DgaAccordion$1, d as defineCustomElement$1 } from './p-B0UwUajL.js';
+import { D as DgaAccordion$1, d as defineCustomElement$1 } from './p-B_IMA0_R.js';
 
 const DgaAccordion = DgaAccordion$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/dga-action-menu.js

@@ -1,4 +1,4 @@
-import { D as DgaActionMenu$1, d as defineCustomElement$1 } from './p-BslGvXGC.js';
+import { D as DgaActionMenu$1, d as defineCustomElement$1 } from './p-BSuTsqLH.js';
 
 const DgaActionMenu = DgaActionMenu$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/dga-actions.js

@@ -27,7 +27,7 @@ const DgaActions$1 = /*@__PURE__*/ proxyCustomElement(class DgaActions extends H
             justifyContent: this.justify === 'between' ? 'space-between' : this.justify,
             flexWrap: this.wrap ? 'wrap' : 'nowrap',
         };
-        return (h(Host, { key: '708ea985a44128b34594f8bd32f65e4807394499', style: styles }, h("slot", { key: 'fa7c50a31f5832c2751c60bb5734419a61c11bbb' })));
+        return (h(Host, { key: '50cef7edfd91a7e340e515705ed9ccbdfa3c7b00', style: styles }, h("slot", { key: '1fff4c90bc6c0e2e720473d16b1877b0765a1dec' })));
     }
     static get style() { return dgaActionsCss; }
 }, [1, "dga-actions", {

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

@@ -6,7 +6,7 @@ const DgaApexChartUsage$1 = /*@__PURE__*/ proxyCustomElement(class DgaApexChartU
         this.__registerHost();
     }
     render() {
-        return (h("div", { key: 'd18b5ef8888e2b79c480b596187a6c513303e7ef' }, h("h1", { key: '5af812496c772999a911a04718f9eac4cb2126d2' }, "Accordion Example"), h("div", { key: '6c251a3d6dfebdfe0dc9f1018594f85f5d4c61f7', style: { padding: '50px', display: 'flex', gap: '20px' } }, h("div", { key: 'd0f176557ad9f30e4f0725ddca87a2c7d60baa02', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }, h("apex-chart", { key: 'c2b2e4b3bb6061436123a1456f0ac90a2d5dc74c', id: "timeline-chart", options: {
+        return (h("div", { key: 'debef59101dd69620ef1b146076546a55947ee01' }, h("h1", { key: 'fe8dab684419717699b847c44819ddf4465ed701' }, "Accordion Example"), h("div", { key: '24b23ee7be336ab4ee74e8bf2a651aa9592a7198', style: { padding: '50px', display: 'flex', gap: '20px' } }, h("div", { key: '774457446862bc01c3c01a1355ff41cc1b1d268a', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }, h("apex-chart", { key: '9529840313716d119538142af7f397a9a7de6190', id: "timeline-chart", options: {
                 annotations: {
                     yaxis: [
                         {

package/dist/components/dga-apex-chart.js

@@ -1,4 +1,4 @@
-import { c as chart, d as defineCustomElement$1 } from './p-D0w4rfpy.js';
+import { c as chart, d as defineCustomElement$1 } from './p-az3lD9la.js';
 
 const DgaApexChart = chart;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/dga-avatar-group.js

@@ -1,4 +1,4 @@
-import { D as DgaAvatarGroup$1, d as defineCustomElement$1 } from './p-DmIGsoZ1.js';
+import { D as DgaAvatarGroup$1, d as defineCustomElement$1 } from './p-fcx_NV-Z.js';
 
 const DgaAvatarGroup = DgaAvatarGroup$1;
 const defineCustomElement = defineCustomElement$1;

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

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, h } from './p-JCGAt0My.js';
-import { d as defineCustomElement$4 } from './p-B9rQKQlY.js';
-import { d as defineCustomElement$3 } from './p-DmIGsoZ1.js';
-import { d as defineCustomElement$2 } from './p-E2Ef0hpp.js';
+import { d as defineCustomElement$4 } from './p-ezdQWZ_6.js';
+import { d as defineCustomElement$3 } from './p-fcx_NV-Z.js';
+import { d as defineCustomElement$2 } from './p-CBcSAhbv.js';
 
 const DgaAvatarUsage$1 = /*@__PURE__*/ proxyCustomElement(class DgaAvatarUsage extends H {
     constructor() {
@@ -10,39 +10,39 @@ const DgaAvatarUsage$1 = /*@__PURE__*/ proxyCustomElement(class DgaAvatarUsage e
         this.variant = 'neutral';
     }
     render() {
-        return (h("div", { key: '3a583b627573a5d3092e833bf2c9b74d901f5fed' }, h("h1", { key: '06e9492e0c7cb5a2812a775168aea3e6345bd9cb' }, "Avatar Example"), h("div", { key: 'ba81aad310ca183f3a17acca96512ae9712c5020', style: { padding: '50px', display: 'flex', gap: '20px' } }, h("div", { key: '5905c6fea7b56a33717873b1a24a1bc1ec10b1f9', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }, h("div", { key: '3e5103b26f65bb048d3498874ed4750e6f6d9422', style: { padding: "10px", display: 'flex', flexDirection: 'column', gap: '20px', backgroundColor: "black" } }, h("dga-avatar", { key: '0523ab6d65cde4dbbccc2df1e0c617acd5066818', size: 120, border: false, square: true, sx: {
+        return (h("div", { key: '193d238ff8b41886d6e413c92caa5b068ac8734a' }, h("h1", { key: '5c7e8fba7c5543655a8fb1f23e6e4b792e5e72f4' }, "Avatar Example"), h("div", { key: '8bbdea2d63e3ed3cc2ad4d3d04e0bdbf6485e129', style: { padding: '50px', display: 'flex', gap: '20px' } }, h("div", { key: '86b30b35da4122cc6d4017b88c11e6a0c1bf1873', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }, h("div", { key: '584e11368b1641813d2a6f55cc7634178e6a5567', style: { padding: "10px", display: 'flex', flexDirection: 'column', gap: '20px', backgroundColor: "black" } }, h("dga-avatar", { key: '423406260aaf87943c0b40cb31a49df03b717eaf', size: 120, border: false, square: true, sx: {
                 "& .dga-avatar": {
                     borderRadius: "100px"
                 }
-            } }), h("dga-avatar", { key: 'f5c18465900032bca70edd3881e51ccdcf6f9403', size: 120, border: true, square: true })), h("dga-avatar", { key: '3f9bea90d36869ee4b91b4f99a09d1079ab5ebc5', type: "icon", size: 120, icon: {
+            } }), h("dga-avatar", { key: 'a9c28a7732f1ecfd9801e5a639a89fbb7fd9c42c', size: 120, border: true, square: true })), h("dga-avatar", { key: 'eee37fa40046a2fe771ffd90aac075dd66f9763a', type: "icon", size: 120, icon: {
                 name: 'user',
                 variant: "stroke",
                 type: "rounded"
-            } }), h("dga-avatar", { key: '29656a76abc53a7d9db5bb208bb216af15701b5f', type: "icon", size: 80, icon: {
+            } }), h("dga-avatar", { key: 'cb2e7d54ab394528400f4b8f2be0280c010f3735', type: "icon", size: 80, icon: {
                 name: 'user',
                 variant: "stroke",
                 type: "rounded"
-            } }), h("dga-avatar", { key: 'b231be665cdf003ad0709e6243e082767b288445', type: "icon", size: 68, icon: {
+            } }), h("dga-avatar", { key: 'c88d5df0b98455eb3b528ce075ae3145fd34d6b3', type: "icon", size: 68, icon: {
                 name: 'user',
                 variant: "stroke",
                 type: "rounded"
-            } }), h("dga-avatar", { key: '22cd1631de536d7da98cd94c6e5e12246e7fb8c0', type: "icon", size: 48, icon: {
+            } }), h("dga-avatar", { key: '39122daf998afb1fa0bd70003a6fb93adf71cac9', type: "icon", size: 48, icon: {
                 name: 'user',
                 variant: "stroke",
                 type: "rounded"
-            } }), h("dga-avatar", { key: '0579fae37b7b8b5c423ffcafa544e87d106628fe', type: "icon", size: 40, icon: {
+            } }), h("dga-avatar", { key: 'b37e2dacfdfd78df81f7d8ed254c966cb1c011f6', type: "icon", size: 40, icon: {
                 name: 'user',
                 variant: "stroke",
                 type: "rounded"
-            } }), h("dga-avatar", { key: 'aa4b17fc3c1bdb1078fb9443da294fe2662b1495', type: "icon", size: 32, icon: {
+            } }), h("dga-avatar", { key: '059e5d33f9c6b94aea74dd5c037baacf4dab98de', type: "icon", size: 32, icon: {
                 name: 'user',
                 variant: "stroke",
                 type: "rounded"
-            } }), h("dga-avatar", { key: '2ccd27f61b7ef5152c5c5cc1eb8d257ab1d59323', type: "icon", size: 24, icon: {
+            } }), h("dga-avatar", { key: 'ce14be8770db9a2e505acfd64f3c80ca143240a0', type: "icon", size: 24, icon: {
                 name: 'user',
                 variant: "stroke",
                 type: "rounded"
-            } })), h("dga-avatar-group", { key: 'f7893d2a922d7a3320f4ca2d686fc6b02164075d', stacked: true }, h("dga-avatar", { key: '7da6aa774b8191340ba710dac81ddbf8331269f8', type: "initials", text: 'AB', size: 40 }), h("dga-avatar", { key: 'b8dbd22ef151463fc68f2ee492903008ff49015c', type: "initials", text: 'CD', size: 40 }), h("dga-avatar", { key: 'fb1665fd2dee927dd00acf1576715bd0b94efa67', type: "initials", text: 'SB', size: 40 }), h("dga-avatar", { key: 'b02fe1efd279b74290399c312c800df8dd20586b', type: "initials", text: 'WK', size: 40 }), h("dga-avatar", { key: 'cb1a83124d4b36d699063e5367e2d1e9d47a130d', type: 'initials', text: `+4`, size: 40 })), h("div", { key: '94e1aefc5a074dd4c6975f53423b96637d93b250', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }))));
+            } })), h("dga-avatar-group", { key: '295d73c6bb2af6d7fc20760a1abb6a908fba91a3', stacked: true }, h("dga-avatar", { key: '4e596fbe7926f0f9913331e10e16966b70f183a5', type: "initials", text: 'AB', size: 40 }), h("dga-avatar", { key: '6a18f8b235d51720aa5b141ecedb0c7f4c27c952', type: "initials", text: 'CD', size: 40 }), h("dga-avatar", { key: 'e58c465d425aea011382366d7d043e9e2fcab43c', type: "initials", text: 'SB', size: 40 }), h("dga-avatar", { key: '19766900183fc22d218b734535e27da0a03f8498', type: "initials", text: 'WK', size: 40 }), h("dga-avatar", { key: 'ac492735b35b08492c48fc8d82796e6220f8a83c', type: 'initials', text: `+4`, size: 40 })), h("div", { key: '5346b3d2a9883866327bf1454357c32f7adfe6a6', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }))));
     }
 }, [0, "dga-avatar-usage", {
         "variant": [32]

package/dist/components/dga-avatar.js

@@ -1,4 +1,4 @@
-import { D as DgaAvatar$1, d as defineCustomElement$1 } from './p-B9rQKQlY.js';
+import { D as DgaAvatar$1, d as defineCustomElement$1 } from './p-ezdQWZ_6.js';
 
 const DgaAvatar = DgaAvatar$1;
 const defineCustomElement = defineCustomElement$1;

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

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, h } from './p-JCGAt0My.js';
-import { d as defineCustomElement$4 } from './p-Cge36MYH.js';
-import { d as defineCustomElement$3 } from './p-E2Ef0hpp.js';
+import { d as defineCustomElement$4 } from './p-CGSnealC.js';
+import { d as defineCustomElement$3 } from './p-CBcSAhbv.js';
 import { d as defineCustomElement$2 } from './p-ObgiDZNJ.js';
 
 const DgaBreadcrumbsUsage$1 = /*@__PURE__*/ proxyCustomElement(class DgaBreadcrumbsUsage extends H {
@@ -10,7 +10,7 @@ const DgaBreadcrumbsUsage$1 = /*@__PURE__*/ proxyCustomElement(class DgaBreadcru
         this.variant = 'neutral';
     }
     render() {
-        return (h("div", { key: '44bda33bc39a374cf77706c91cceefc24fe94c90' }, h("h1", { key: 'd66d37fa7491528933a433002a079eb31c08dfdb' }, "Breadcrumbs Example"), h("div", { key: '733e8c82c23d16d9b40b81e28d4abbaac2b388bd', style: { padding: '50px', display: 'flex', gap: '20px' } }, h("div", { key: '241e9274dfb9e6dc4016b847bdd4074fc128e62d', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }, h("dga-link", { key: '72b9505073ac5998731071f698a0cbc6160d9947', label: "Link", variant: "neutral" }), h("dga-breadcrumbs", { key: 'c157e9c59c857e9bbbc75a7adbea2caa93daabec', items: [
+        return (h("div", { key: 'fcac40fcf0c16198bd638bdc007882d9795780ea' }, h("h1", { key: '36dcea57623959cc3bcecd7aa63a983577761bdb' }, "Breadcrumbs Example"), h("div", { key: '56652fbb3ac1b8fd1e105e6c1f562dc91fdd1af4', style: { padding: '50px', display: 'flex', gap: '20px' } }, h("div", { key: '3a3f8c49e8aae8f0bf90c3f19565dc45343176cd', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }, h("dga-link", { key: '980aec2687e3c5ce354314b3405d2d5e55b864cd', label: "Link", variant: "neutral" }), h("dga-breadcrumbs", { key: 'cd45dba16444619ab4d215fe203f6ab48db1fef0', items: [
                 {
                     label: 'Home',
                     path: '/',
@@ -28,7 +28,7 @@ const DgaBreadcrumbsUsage$1 = /*@__PURE__*/ proxyCustomElement(class DgaBreadcru
                     label: 'Keyboards',
                     path: '/products/keyboards',
                 },
-            ], max: 3 })), h("div", { key: 'a5aed8b745081cb100e2766e0a69750f394226cf', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }))));
+            ], max: 3 })), h("div", { key: '7c396549240d7d8f7167f5b132152ed443bd278e', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }))));
     }
 }, [0, "dga-breadcrumbs-usage", {
         "variant": [32]

package/dist/components/dga-breadcrumbs.js

@@ -1,4 +1,4 @@
-import { D as DgaBreadcrumbs$1, d as defineCustomElement$1 } from './p-Cge36MYH.js';
+import { D as DgaBreadcrumbs$1, d as defineCustomElement$1 } from './p-CGSnealC.js';
 
 const DgaBreadcrumbs = DgaBreadcrumbs$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/dga-button-leading-icon.js

@@ -1,4 +1,4 @@
-import { D as DgaButtonLeadingIcon$1, d as defineCustomElement$1 } from './p-DBqhqFdf.js';
+import { D as DgaButtonLeadingIcon$1, d as defineCustomElement$1 } from './p-BTFUytBS.js';
 
 const DgaButtonLeadingIcon = DgaButtonLeadingIcon$1;
 const defineCustomElement = defineCustomElement$1;

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

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, h } from './p-JCGAt0My.js';
-import { d as defineCustomElement$3 } from './p-BEz92qF1.js';
-import { d as defineCustomElement$2 } from './p-E2Ef0hpp.js';
+import { d as defineCustomElement$3 } from './p-CqwJ8os_.js';
+import { d as defineCustomElement$2 } from './p-CBcSAhbv.js';
 
 const DgaButtonUsage$1 = /*@__PURE__*/ proxyCustomElement(class DgaButtonUsage extends H {
     constructor() {
@@ -9,7 +9,7 @@ const DgaButtonUsage$1 = /*@__PURE__*/ proxyCustomElement(class DgaButtonUsage e
         this.variant = 'neutral';
     }
     render() {
-        return (h("div", { key: '19a2433057f8dbc17a692e155d588c8bb24dcff8' }, h("h1", { key: 'e16a447fa9ffd97086aaff516809af8ea730f3be' }, "Button Example"), h("div", { key: 'ef001c1af314ce4875055d6fc1ab55643350ab53', style: { padding: '50px', display: 'flex', gap: '20px' } }, h("div", { key: '736e697fcb99c2251d5f5c5d6a030787e8a522e4', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }, h("dga-button", { key: 'ec8acf0ae303f9b209c32e178d45d14f749e4431', label: "Click me", variant: "primary-brand", sx: {
+        return (h("div", { key: 'f60fb65a6d8d25bd0963a1aee2e93d979cf8e594' }, h("h1", { key: 'b5c0c1bda48058e0c228608e9361ff8ae152ba05' }, "Button Example"), h("div", { key: '46afd28b03c20d057a92e73c4fde04c1f8ed59ce', style: { padding: '50px', display: 'flex', gap: '20px' } }, h("div", { key: 'ee5d75a3b65a8c78a024360b2b6a50ad05ece60d', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }, h("dga-button", { key: '40b91e2769e854cc06fe654afe70349c99b133df', label: "Click me", variant: "primary-brand", sx: {
                 '&': {
                     fontSize: '18px',
                     fontWeight: 'bold',
@@ -22,12 +22,12 @@ const DgaButtonUsage$1 = /*@__PURE__*/ proxyCustomElement(class DgaButtonUsage e
                 '.dga-btn:hover': {
                     backgroundColor: 'blue',
                 },
-            } }), h("dga-button", { key: '122dbe3588a7bdb0b76f4c1a2dd76ed63d28a641', label: "Brown Button", variant: "primary-neutral" }), h("dga-button", { key: '13f2aa7abaeee15f05819f22ba06f11919467874', label: "Button", variant: "des-transparent" }), h("dga-button", { key: '24909b5400736c140977cc90cfcf6e859b8730d5', label: "Source code", variant: "secondary-outline", leadIcon: true, leadIconType: "source-code", leadIconProps: { variant: 'stroke', type: 'standard' } }), h("dga-button", { key: '5a636b64652a28c8c30a50573d26a3f5abee0ba2',
+            } }), h("dga-button", { key: '60f3258b4054a77af233a8927545327023a6302c', label: "Brown Button", variant: "primary-neutral" }), h("dga-button", { key: '2e740b397d1d41dc5000739091cadacae263e06c', label: "Button", variant: "des-transparent" }), h("dga-button", { key: '31f7473b5d47efe5ca6279e05ae2ea3b9b35fc6b', label: "Source code", variant: "secondary-outline", leadIcon: true, leadIconType: "source-code", leadIconProps: { variant: 'stroke', type: 'standard' } }), h("dga-button", { key: '2b1554b5bd06ddfa7123314f7a1ab9bd6041f086',
             // 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: '4d55ae90ec8d1e3c3733e481558a43c80e2db70f', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }))));
+            } })), h("div", { key: 'b2fac2003873d9c2aa089956701b29005c2d7444', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }))));
     }
 }, [0, "dga-button-usage", {
         "variant": [32]