@platformscode/core 0.0.43 → 0.0.44

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

@@ -9,7 +9,7 @@ export class DgaTabsUsage {
         };
     }
     render() {
-        return (h("div", { key: '0591d9bf25a4050197a1c3326d1bcebf795d264d', style: { padding: '20px', fontFamily: 'Arial, sans-serif' } }, h("h1", { key: 'b305e94f70cf35f7778e42028d2539a108d02fd4' }, "DGA Tabs Component Examples"), h("p", { key: '6b37a3c44b8f96ebbf80b487fc2cb1998408d334' }, "Comprehensive examples of the tabs component in various real-world scenarios."), h("section", { key: 'e7ba8adbf4f5417e3e81a9db0f3d5e3411aa1456', style: { marginBottom: '40px' } }, h("h2", { key: '25b0e0e2f02d70f4008b62ce6a57d78c7ec861a1' }, "1. Website Navigation Menu"), h("p", { key: 'f13bd68cfd51c141d7276bf446f576d9a3f310c1' }, "Main navigation for a website with different sections"), h("dga-tabs", { key: '37772a5d4796954b12b7c4e6141787c4a7d997bf', size: "md", orientation: "horizontal", flush: false, external: false, divider: true, tabsList: [
+        return (h("div", { key: 'b9e5006011c68357816fbd44f90775bee5c15f74', style: { padding: '20px', fontFamily: 'Arial, sans-serif' } }, h("h1", { key: '469a0da10c9464f4a10309591987311450efce99' }, "DGA Tabs Component Examples"), h("p", { key: '6e21ea3b4402e1cb7f06700f2f4d7e3c06d1c908' }, "Comprehensive examples of the tabs component in various real-world scenarios."), h("section", { key: '1e8a96030c7e9dcd223d2f6fd555d4e6aa0de228', style: { marginBottom: '40px' } }, h("h2", { key: 'd5c74112667073851822fbd0c6ef79e6ca3253e0' }, "1. Website Navigation Menu"), h("p", { key: 'ec31bdde70befd72321b2f1a5aacef9cb683c461' }, "Main navigation for a website with different sections"), h("dga-tabs", { key: 'f005f009e2445001083253a4e854dbdaf6d46ca3', 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: 'ac30ffa3237d329d51e97f7dc25869317fe1af15', style: { marginBottom: '40px' } }, h("h2", { key: 'a99e2b72a6acf73c6a578c3852e1beca8da8c479' }, "2. Dashboard Analytics Tabs"), h("p", { key: '97a6c0ae6e4e9b956b9cce289bb3b5ea3829e8df' }, "Analytics dashboard with different data views"), h("dga-tabs", { key: '7451a8657a6c0d2bd8fc48c7ae9a233edaef645c', size: "lg", orientation: "horizontal", flush: false, external: false, divider: true, tabsList: [
+            ] })), h("section", { key: '2dc5d526a2e73ce4edf9670f24400c2116a4b76e', style: { marginBottom: '40px' } }, h("h2", { key: '569a68e68d0652f9b52c37fdef8b662329bb5cd5' }, "2. Dashboard Analytics Tabs"), h("p", { key: 'be018e4e9234ed99f76f601370866286894ed0ae' }, "Analytics dashboard with different data views"), h("dga-tabs", { key: '17812b8a0573f4e069cb2d467515e0a8bdcc5dce', 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: '0689b72936054cb1f2da1930cab43df37e3cc029', style: { marginBottom: '40px' } }, h("h2", { key: 'c57ff77efcbd1064f84821a8b01c07ecb349f26a' }, "3. Settings Panel (Vertical Layout)"), h("p", { key: 'beffd07210f5ab9e61def74a584f6285c5fd4cc8' }, "User settings panel with vertical tab navigation"), h("div", { key: '890a3049f60e0ac77ac81ea500ff098f63608687', style: { display: 'flex', gap: '20px' } }, h("dga-tabs", { key: '1a5d721cfcab7eed640fae78e819874186ed1f59', size: "md", orientation: "vertical", flush: false, external: false, divider: true, tabsList: [
+            ] })), h("section", { key: 'b1cebc667f463d599266de3c6749796ad8c48377', style: { marginBottom: '40px' } }, h("h2", { key: 'dc2915f198a80e649755aad502b25aa54f72b33f' }, "3. Settings Panel (Vertical Layout)"), h("p", { key: 'b5e9290d82161528096d59ea601d5b3fac4ef159' }, "User settings panel with vertical tab navigation"), h("div", { key: '1990cb061853793b60e02b16657505b366fb0d87', style: { display: 'flex', gap: '20px' } }, h("dga-tabs", { key: 'fcdb62f05e91c18127359b6b5ef0ad7296478797', 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: 'bc2f58630038644b9b1a8a46883e9f00aa7860ba', style: { padding: '20px', border: '1px solid #ddd', borderRadius: '4px', flex: '1 ' } }, h("p", { key: '855fb002401aaeb7652fb15a4a3951650182952e' }, "Content area for the selected tab (", this.activeTab, ") would appear here.")))), h("section", { key: '541ae6735b07a74f9477393771c2edc2f8743843', style: { marginBottom: '40px' } }, h("h2", { key: 'd8a95543c243fee41e07f0bc1be544ee11042f7e' }, "4. E-commerce Product Information"), h("p", { key: '9731d6a371219930aad5a8441dd65dca96ecb64b' }, "Product detail page with different information sections"), h("dga-tabs", { key: 'e900cf3532e98a9a710a87c396a9007725384223', size: "md", orientation: "horizontal", flush: false, external: false, divider: true, tabsList: [
+            ] }), h("div", { key: '2e236e4247a2a13989483fd55ca0cd6504814953', style: { padding: '20px', border: '1px solid #ddd', borderRadius: '4px', flex: '1 ' } }, h("p", { key: '02829bc04888052b7ebebab17251be8ec6271aa8' }, "Content area for the selected tab (", this.activeTab, ") would appear here.")))), h("section", { key: 'a99409e920c511c42fe2f9560aac4b9a28fd135c', style: { marginBottom: '40px' } }, h("h2", { key: 'ae45cb60040c44db68c11ee6ab1bfce366b27b52' }, "4. E-commerce Product Information"), h("p", { key: 'efab71a4fe4435e4877b6385b55e6ee2cba83bc8' }, "Product detail page with different information sections"), h("dga-tabs", { key: 'f7666308dcf1fdd09bad07c678eedd382e2e769d', 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: '4c0231c06d95ba0b2e329309f9af076d54635eda', style: { marginBottom: '40px' } }, h("h2", { key: 'ad0a701d5425e77b41f6be054ffa2f7c92e45b1a' }, "5. External Navigation Links"), h("p", { key: 'ba28ac4ee0cb9f04a53d5373ab1cf286c2ad988d' }, "Tabs that navigate to external pages or different sections"), h("dga-tabs", { key: '7d862fb413054675125d7d900658c98c635e8193', size: "md", orientation: "horizontal", flush: false, external: true, divider: true, tabsList: [
+            ] })), h("section", { key: '6ac5059f4a5ebeeeb1ebc44db2c04276de87934b', style: { marginBottom: '40px' } }, h("h2", { key: '96064a5bfac1f285d1ecd2a33523987baabb4ab3' }, "5. External Navigation Links"), h("p", { key: '7d67a5a264645f3bec89eca90e0868405c9f56d0' }, "Tabs that navigate to external pages or different sections"), h("dga-tabs", { key: '32e241a3691c04edec546432e00909646f878574', 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: '82d9d626e00663238a2033f14fed25a26822aaa4', style: { marginBottom: '40px' } }, h("h2", { key: 'b830f3e83310d556bc3225083564d1dd0ed0ca38' }, "6. Many Tabs with Overflow Menu"), h("p", { key: 'dd2b7a07b65e08ee1dc067bb6df3d97fddee41e5' }, "Example with more than 5 tabs to demonstrate overflow behavior"), h("dga-tabs", { key: '58d95d3e46608a9aba9214f2b0116d93f53ed9c8', size: "md", orientation: "horizontal", flush: false, external: false, divider: true, tabsList: [
+            ] })), h("section", { key: '3bff938e63c224f81ef69e926da67f93c1aaed1a', style: { marginBottom: '40px' } }, h("h2", { key: '8e42d7ae598499469e25014161cc84772f644c5e' }, "6. Many Tabs with Overflow Menu"), h("p", { key: '94612d0d50e095b53593149385b92e0299791f74' }, "Example with more than 5 tabs to demonstrate overflow behavior"), h("dga-tabs", { key: '82ec39f2b83b8a5327d09d7a01daf1c5262575b2', 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: '0fb0a2202dacaf3aaf1569a1af05200e1760b349', style: { marginBottom: '40px' } }, h("h2", { key: '3a5b239df81a9d4217cfcda67f314f79faa13d31' }, "7. Different Tab Sizes"), h("h3", { key: 'f4c6e85b444c74ecd150b8daef1ee5abf8f1b4f8' }, "Small Size"), h("dga-tabs", { key: '1d68badd946653fe4ebcd08bfdea682767f9cf59', size: "sm", orientation: "horizontal", flush: false, external: false, divider: true, tabsList: [
+            ] })), h("section", { key: '922c2260e7afa23932beaa77ae0b6cd8074c2716', style: { marginBottom: '40px' } }, h("h2", { key: '4f3c47d8000f38ff0fdd7e6439eec80f2e5f4391' }, "7. Different Tab Sizes"), h("h3", { key: 'cb651042cb2eb45a1b78c6138f16beed06f9d7e4' }, "Small Size"), h("dga-tabs", { key: 'c0dc09464e0802a163be7ace28e28576d97674a1', 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: '80b81dc8af0d5f5f838067186147c8cc9af6b7e2' }, "Medium Size (Default)"), h("dga-tabs", { key: 'ff0f41477f3af42127027804d36be2c798d5550a', size: "md", orientation: "horizontal", flush: false, external: false, divider: true, tabsList: [
+            ] }), h("h3", { key: 'bccf7571ae1a685a563a720ebafa932cc5e8dcfd' }, "Medium Size (Default)"), h("dga-tabs", { key: '93e01aac50fe86e9af3a89ca7cadce2792f2f99b', 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: 'e0cb239d28faaadb51d4e6926d51370d369387cf' }, "Large Size"), h("dga-tabs", { key: '030d13de3cf406754cda715d6d3aa4f70ef4054a', size: "lg", orientation: "horizontal", flush: false, external: false, divider: true, tabsList: [
+            ] }), h("h3", { key: 'b5e2cf6b764cb73f4c77958f2786e62920d6a980' }, "Large Size"), h("dga-tabs", { key: '2fb57007b7fac7d0689af12ab5f58b48b8569ced', 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: '3d7e70da9172f1fd9bf4cf2007ab754e1cb44630', style: { marginBottom: '40px' } }, h("h2", { key: 'd930af857aca20ad76de9415eb68994bd150cc42' }, "8. Flush Tabs (No Padding)"), h("p", { key: '3263fb9222aebd899501ee82416daffbb33fe9c8' }, "Tabs with flush styling for tight layouts"), h("dga-tabs", { key: '8984f72ed6f38c37929a128cf3001226e5a8f884', size: "md", orientation: "horizontal", flush: true, external: false, divider: false, tabsList: [
+            ] })), h("section", { key: '0e6f9bafd8a381cbd95ed7303ed585179f66b941', style: { marginBottom: '40px' } }, h("h2", { key: '78c2c993cd86b13a7c84c1f1381c0dc50f37d4c8' }, "8. Flush Tabs (No Padding)"), h("p", { key: '3e4a64a2adeab9ed886e55c05d806223efd80be8' }, "Tabs with flush styling for tight layouts"), h("dga-tabs", { key: '55c9da2a3e0dcbce5c8935aa7bf2c227d671a736', 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: 'f0032c6dfe7b5b2446a1406e6f4f8ff6f0098636', style: { marginBottom: '40px' } }, h("h2", { key: 'a2b39e768eed846cf3cd26d1c390a49410569fa8' }, "9. Disabled Tabs"), h("p", { key: '069cae0c877fcf961a332e2f2b0009ade21d7735' }, "Tabs in disabled state for maintenance or restricted access"), h("dga-tabs", { key: '02d54cdda6a0f4b94e34688dba8904a868cb117d', size: "md", orientation: "horizontal", flush: false, external: false, divider: true, disabled: true, tabsList: [
+            ] })), h("section", { key: '1bffa2c957b789bde1f9b2c45b61840800232b72', style: { marginBottom: '40px' } }, h("h2", { key: 'be302fdab54c05f64033237b0e49b3354563e940' }, "9. Disabled Tabs"), h("p", { key: '3e5db287f43d576978cc765f70beb2058ae83d45' }, "Tabs in disabled state for maintenance or restricted access"), h("dga-tabs", { key: '172db60f7be7ecb77e57fcd74466183f7dfd1d4b', 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: 'c54905109099f55bb9a6f73a1e8ecc8c964eab32', style: { marginBottom: '40px' } }, h("h2", { key: '3d210d801df271d475f2f284f28062e36e6c0917' }, "10. Mobile-Friendly Tabs"), h("p", { key: '35fc6023cdd8914a12bcc45eda5864a9c53ec12d' }, "Compact tabs suitable for mobile interfaces"), h("dga-tabs", { key: 'fc674ca6857d1b070a52b745508ebdc022cdfb67', size: "sm", orientation: "horizontal", flush: true, external: false, divider: false, tabsList: [
+            ] })), h("section", { key: 'd4e5895d58a8b1b674425457d24ac3c42bf15d5b', style: { marginBottom: '40px' } }, h("h2", { key: '36ec1bdc0c55c481330d45dd8f03962ead2f579c' }, "10. Mobile-Friendly Tabs"), h("p", { key: '73b11082476c26d9f647fa45a666616ab78f215a' }, "Compact tabs suitable for mobile interfaces"), h("dga-tabs", { key: '1b7c55bca8de88365cca9e710e82d6ce35215fe6', 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: '32672543c969115516825e9ec14541d7de216918' }, h("h1", { key: '817d3c1aabec9c0731f8eaec75ebb4cf66b93fec' }, "Tag Example"), h("div", { key: 'f6d2eceb378c69190482486efe1840478d55cd8d', style: { padding: '50px', display: 'flex', gap: '20px' } }, h("div", { key: '1c465f21b9491664dab5f71f591e457b5af6d8bf', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }, h("dga-tag", { key: '9dd3a5a9d58991b434fc2c76605d57f9bbd44250', label: "Label", variant: "neutral", outlined: false, rounded: false, size: "lg", leadIcon: {
+        return (h("div", { key: '9737d34d9d5b67c71c15e87e2fc7976041513b1a' }, h("h1", { key: '532ac6a2725afd5dd4ff72c5e06cc3fed3859550' }, "Tag Example"), h("div", { key: '038f3ef0dc03a7d16978a4608b9a766b633bb8d8', style: { padding: '50px', display: 'flex', gap: '20px' } }, h("div", { key: 'c8a13341c6ad1afc6bbaa1049052799df5065bba', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }, h("dga-tag", { key: 'f5dec2f830ccd24e34ff16a2e5eb02df15b99703', 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: 'c2396e9dcad6dda35909ca8c28adee4bbc0e9f8b', label: "Label", variant: "neutral", outlined: false, rounded: false, size: "md", leadIcon: {
+            } }), h("dga-tag", { key: 'd1214391d7ca3eba2da0bdacd859d09d15f91599', 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: 'ad8e7962e774553d9f659a20a5ccb49949aae750', label: "Label", variant: "neutral", outlined: false, rounded: false, size: "sm", leadIcon: {
+            } }), h("dga-tag", { key: '140b50538c783093d95a96c85f5f4a2b8a3a3e21', 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: '4e08dd659ae49b94b1907586dc322a14638bf48d', label: "Label", variant: "success", outlined: false, rounded: false, size: "lg", leadIcon: {
+            } }), h("dga-tag", { key: 'cfe7b458d3186578b315474e8ad4f4b3afce5da7', 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: '6ef0ea05daace8c83f44f12346efa04b7622ca53', label: "Label", variant: "success", outlined: false, rounded: false, size: "md", leadIcon: {
+            } }), h("dga-tag", { key: 'f94c18df75c980a3235c19f7d7b56d37a66d5278', 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: '1ad4a0a557599c6b9f7aa14276d7772c918772f4', label: "Label", variant: "success", outlined: false, rounded: false, size: "sm", leadIcon: {
+            } }), h("dga-tag", { key: 'd35a9d0b97fea00a53974c11ccc49284c5db3bba', 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: '548b19f2a4d8cb07c620ca2c029511692780f2eb', label: "Label", variant: "error", outlined: false, rounded: false, size: "lg", leadIcon: {
+            } }), h("dga-tag", { key: 'be90c798363211b0352c1dfa0edd0d980ef4a2d5', 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: '6ff34da2b7d27745ec3081aa26f67cc08c04d4b6', label: "Label", variant: "error", outlined: false, rounded: false, size: "md", leadIcon: {
+            } }), h("dga-tag", { key: 'af169fcf71dd2d00e25dda5aa9ff9f0bc312f670', 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: '33befe09d8e85d8b4281b78334ca47effc6825f9', label: "Label", variant: "error", outlined: false, rounded: false, size: "sm", leadIcon: {
+            } }), h("dga-tag", { key: '54fc6aa7e7a0c07cae432e14e58e70d48bc864fb', 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: 'a0283d5a284a5a449653b5e42c7d0052ddacbdb2', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }, h("dga-tag", { key: '995ced96a992938b1b5062c5edbce53a8cc8ef09', label: "Label", variant: "error", size: "lg", outlined: false, rounded: false, iconOnly: true, leadIcon: {
+            } })), h("div", { key: 'd625247a05ab98acfeb506c0aee7cd9f76712fd2', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }, h("dga-tag", { key: 'd4e1ba036458c575fe22548c4baf671ff70c8837', 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: '9bc50a9084c41e205f397ea775503c545131cce5', label: "Label", variant: "neutral", size: "md", outlined: false, rounded: false, iconOnly: true, leadIcon: {
+            } }), h("dga-tag", { key: '67c15c7e845cbf8caa2994733cace7555cdcd6a7', 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: '0fcd7fd3b0137f08018e8ba5cb8486e285de6ed4', label: "Label", variant: "neutral", size: "sm", outlined: false, rounded: false, iconOnly: true, leadIcon: {
+            } }), h("dga-tag", { key: '8564cd8053a4fb3dea30c9b5eb633a42e8822001', 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: 'e184ceb403fcfe5cbc503e8a1d68f7087da58df2', label: 'Status', color: 'neutral', size: 'lg', status: 'subtle' }), h("dga-status-tag", { key: 'b34047157c6b7978d3d29ba34441b16cef81361b', label: 'Status', color: 'neutral', size: 'md', status: 'subtle' }), h("dga-status-tag", { key: 'e512b6503f305b6bf12734d76ab0a00b0071ecbb', label: 'Status', color: 'neutral', size: 'sm', status: 'subtle' }), h("dga-status-tag", { key: '122b4141879f47340f242259a340c40056897901', label: 'Status', color: 'neutral', size: 'lg', status: 'inverted' }), h("dga-status-tag", { key: '6b5183b8decacb29f74d69bf283afd9a6dd0ed36', label: 'Status', color: 'neutral', size: 'md', status: 'inverted' }), h("dga-status-tag", { key: '5131fc47a42548a4f0131490baaf69efc67347be', label: 'Status', color: 'neutral', size: 'sm', status: 'inverted' }), h("dga-status-tag", { key: '56fafd7d5d28e53c11374187b113a135840f888b', label: 'Status', color: 'neutral', size: 'lg', status: 'ghost' }), h("dga-status-tag", { key: 'bec7cb31e65ff79c987ba498911eaf90a4501ed4', label: 'Status', color: 'neutral', size: 'md', status: 'ghost' }), h("dga-status-tag", { key: '7a5084933d7f7348446cfb516652ae71de063d64', label: 'Status', color: 'neutral', size: 'sm', status: 'ghost' }), h("dga-status-tag", { key: '94fdc21f37b46f34c8319c6eb9651c5a0a05c7ef', label: 'Status', color: 'blue', size: 'lg', status: 'subtle' }), h("dga-status-tag", { key: 'f2c9c2827f9bcc1b4c43bc68f8adaaaf6feb457f', label: 'Status', color: 'blue', size: 'md', status: 'subtle' }), h("dga-status-tag", { key: 'eaceceb9df7830cf3ca931abb4bae1d18340a8b9', label: 'Status', color: 'blue', size: 'sm', status: 'subtle' }), h("dga-status-tag", { key: '4a3cf6f1f02c0eb6bd35b7ebbb8e526aaf773456', label: 'Status', color: 'blue', size: 'lg', status: 'inverted' }), h("dga-status-tag", { key: '68594394fadca45b7d7cc3b35adda1f163afc558', label: 'Status', color: 'blue', size: 'md', status: 'inverted' }), h("dga-status-tag", { key: '5eadefbe3f3d1cd84b3a8210dd77b3023ad101cf', label: 'Status', color: 'blue', size: 'sm', status: 'inverted' }), h("dga-status-tag", { key: '69a393bca5196de21aa0d247e71e1155000f4376', label: 'Status', color: 'blue', size: 'lg', status: 'ghost' }), h("dga-status-tag", { key: 'b97510b0910aa64ed112a2d39839632b0f644b4c', label: 'Status', color: 'blue', size: 'md', status: 'ghost' }), h("dga-status-tag", { key: 'f46c3087c6afa773187de281082e8a503d2b72af', label: 'Status', color: 'blue', size: 'sm', status: 'ghost' }), h("dga-status-tag", { key: 'ce47d46b9030348946c7e098c032d5634a8231c4', label: 'Status', color: 'green', size: 'lg', status: 'subtle' }), h("dga-status-tag", { key: 'c3bdc3ffa65e8db0111fa21472b69d9e77276526', label: 'Status', color: 'green', size: 'md', status: 'subtle' }), h("dga-status-tag", { key: '8bdcd991a518529a0bda4519be3947962144f5a0', label: 'Status', color: 'green', size: 'sm', status: 'subtle' }), h("dga-status-tag", { key: 'a6151153603748a9b9e9fbbb7f35e4700fdd5460', label: 'Status', color: 'green', size: 'lg', status: 'inverted' }), h("dga-status-tag", { key: '1d6587b017c6a4dfc80546513ef196474ef99d87', label: 'Status', color: 'green', size: 'md', status: 'inverted' }), h("dga-status-tag", { key: 'afdd4b43421878c5a7afaa7efeab215257bb1ad4', label: 'Status', color: 'green', size: 'sm', status: 'inverted' }), h("dga-status-tag", { key: 'f7342fb578ca83d21f310f2a68317c3a6e7e50ac', label: 'Status', color: 'green', size: 'lg', status: 'ghost' }), h("dga-status-tag", { key: '6700954690480e621f52b5103c0e4f5ac04d3aa8', label: 'Status', color: 'green', size: 'md', status: 'ghost' }), h("dga-status-tag", { key: 'bcab231c187cb0420ca5bec9a95e51aea054abb6', label: 'Status', color: 'green', size: 'sm', status: 'ghost' }), h("dga-status-tag", { key: '4aab60b6795031e51abc89dc687fb402cdef84bd', label: 'Status', color: 'yellow', size: 'lg', status: 'subtle' }), h("dga-status-tag", { key: '01d9fcd93b41b14eea7a3c28979fec780690ecf3', label: 'Status', color: 'yellow', size: 'md', status: 'subtle' }), h("dga-status-tag", { key: 'ceadf5c4ea209122c97c12cd1399096cd9ec8479', label: 'Status', color: 'yellow', size: 'sm', status: 'subtle' }), h("dga-status-tag", { key: '6e7a20fd855471ae87edbabcc3d969cd4d699ec8', label: 'Status', color: 'yellow', size: 'lg', status: 'inverted' }), h("dga-status-tag", { key: '358fa27235a264b95930160dd3f2df69170cd172', label: 'Status', color: 'yellow', size: 'md', status: 'inverted' }), h("dga-status-tag", { key: '088ecdb062ef4faa6a9fb544b564f87cca60631a', label: 'Status', color: 'yellow', size: 'sm', status: 'inverted' }), h("dga-status-tag", { key: 'ec9e22566991a955c6f3a4d7ac0c7fff6372df5d', label: 'Status', color: 'yellow', size: 'lg', status: 'ghost' }), h("dga-status-tag", { key: 'ea734ad0b6e30344c2cd1ae829f99b296fb76cd1', label: 'Status', color: 'yellow', size: 'md', status: 'ghost' }), h("dga-status-tag", { key: 'ac1a81b6cdb6c7896f690bbc6258b65b8b594fc7', label: 'Status', color: 'yellow', size: 'sm', status: 'ghost' }), h("dga-status-tag", { key: '1132d3a59eaf3f10bd5527c8bbec7e4dbcc7ac6a', label: 'Status', color: 'red', size: 'lg', status: 'subtle' }), h("dga-status-tag", { key: 'ef2323125d4c4d5be028912488858d0b38a1d5d5', label: 'Status', color: 'red', size: 'md', status: 'subtle' }), h("dga-status-tag", { key: 'd002d41784ac9b64823e9712ea8ce1eb43fc7a14', label: 'Status', color: 'red', size: 'sm', status: 'subtle' }), h("dga-status-tag", { key: '1ecc0512aba2b95209eabc44c3f181a996ca6e4d', label: 'Status', color: 'red', size: 'lg', status: 'inverted' }), h("dga-status-tag", { key: '6d99883c292b5fa5b7974adb6e920240277c3656', label: 'Status', color: 'red', size: 'md', status: 'inverted' }), h("dga-status-tag", { key: '2adc60cccd2ee3dcade25cf192bf3637e1cbb4ab', label: 'Status', color: 'red', size: 'sm', status: 'inverted' }), h("dga-status-tag", { key: '90469d7ccb86d1ec0ebb45094b5e375321c2fe71', label: 'Status', color: 'red', size: 'lg', status: 'ghost' }), h("dga-status-tag", { key: '7e41cf2e0788a4063fcf589b94431db10a03d9b1', label: 'Status', color: 'red', size: 'md', status: 'ghost' }), h("dga-status-tag", { key: '0ec1bf0b0180aa407015af614e7e9041b011a629', label: 'Status', color: 'red', size: 'sm', status: 'ghost' })))));
+            } }), h("dga-status-tag", { key: 'dfe7b7e5324ed5cc75931a5428daa56c11daca1f', label: 'Status', color: 'neutral', size: 'lg', status: 'subtle' }), h("dga-status-tag", { key: '6a16a5a88f77f0f8610405e48a6f97ed946730c9', label: 'Status', color: 'neutral', size: 'md', status: 'subtle' }), h("dga-status-tag", { key: 'aca3f515db431067be4049dea398e13236e733c7', label: 'Status', color: 'neutral', size: 'sm', status: 'subtle' }), h("dga-status-tag", { key: 'dfb92bf6ab0f6f7fb8fe2e8623e023319bdb5519', label: 'Status', color: 'neutral', size: 'lg', status: 'inverted' }), h("dga-status-tag", { key: '0e460283ec3320b74095843a7957738111fdfb37', label: 'Status', color: 'neutral', size: 'md', status: 'inverted' }), h("dga-status-tag", { key: '75c23424a4fc426eeda80a0c4b57fd396cd8f890', label: 'Status', color: 'neutral', size: 'sm', status: 'inverted' }), h("dga-status-tag", { key: 'cd30a6d96c0d471a41777d3299d885b4a24546b5', label: 'Status', color: 'neutral', size: 'lg', status: 'ghost' }), h("dga-status-tag", { key: '4f46190439ebfa9530ee90a79cfc7f61d47f3b19', label: 'Status', color: 'neutral', size: 'md', status: 'ghost' }), h("dga-status-tag", { key: '9be0588480f0c52433d23025aac24f365c0c4fa4', label: 'Status', color: 'neutral', size: 'sm', status: 'ghost' }), h("dga-status-tag", { key: '708104975a0c60588291c635908c10ef2bddc8d0', label: 'Status', color: 'blue', size: 'lg', status: 'subtle' }), h("dga-status-tag", { key: '62aac56100e30c156905bbf15c69b249ef13a68a', label: 'Status', color: 'blue', size: 'md', status: 'subtle' }), h("dga-status-tag", { key: '55ddcff7f6aa0608dec2d374a7b963f92f923153', label: 'Status', color: 'blue', size: 'sm', status: 'subtle' }), h("dga-status-tag", { key: 'd4986c45a6d37fcb394d4f04bae2ad0805c4e0cf', label: 'Status', color: 'blue', size: 'lg', status: 'inverted' }), h("dga-status-tag", { key: '7ba61a81be5c2130ca0c2a915d99f10b9b433ca4', label: 'Status', color: 'blue', size: 'md', status: 'inverted' }), h("dga-status-tag", { key: '4b1ee6da804131dae34ec2eec16c99923122d5b4', label: 'Status', color: 'blue', size: 'sm', status: 'inverted' }), h("dga-status-tag", { key: 'c0b73907b58989cab1598e0d7f2581d392b47177', label: 'Status', color: 'blue', size: 'lg', status: 'ghost' }), h("dga-status-tag", { key: 'bed829a22452536e14ab05002e4e9a482e41d13d', label: 'Status', color: 'blue', size: 'md', status: 'ghost' }), h("dga-status-tag", { key: 'd315abe85953ed358311097d3fd70ba0e90a5869', label: 'Status', color: 'blue', size: 'sm', status: 'ghost' }), h("dga-status-tag", { key: 'ff32513e1d6304354b388f2e2aaa56adcabeec7a', label: 'Status', color: 'green', size: 'lg', status: 'subtle' }), h("dga-status-tag", { key: '29f8baecb398187ab936ca44e4ac5261163e37c2', label: 'Status', color: 'green', size: 'md', status: 'subtle' }), h("dga-status-tag", { key: 'd1c120242db8981a4df16dc296f7f4a74e652268', label: 'Status', color: 'green', size: 'sm', status: 'subtle' }), h("dga-status-tag", { key: 'a01ca55318e9e3dc2c213556e7d87fec9b0b1515', label: 'Status', color: 'green', size: 'lg', status: 'inverted' }), h("dga-status-tag", { key: '65e6162343821e5013e34850e3ebd8af11bd474d', label: 'Status', color: 'green', size: 'md', status: 'inverted' }), h("dga-status-tag", { key: '9e2d6a806094a47c03e7893a60cb25d9fe1a2748', label: 'Status', color: 'green', size: 'sm', status: 'inverted' }), h("dga-status-tag", { key: 'ef88b81143968e969b5b2da7a456df8f0c21d802', label: 'Status', color: 'green', size: 'lg', status: 'ghost' }), h("dga-status-tag", { key: 'd7e7cd48ec28a89fc71807ea399a7399643dd0bb', label: 'Status', color: 'green', size: 'md', status: 'ghost' }), h("dga-status-tag", { key: 'd9b1dd82cc6aaed0db7eafcbd9db8b8a9467bf0f', label: 'Status', color: 'green', size: 'sm', status: 'ghost' }), h("dga-status-tag", { key: '7d3beae416aaaa90da4bdf89bc964ad54f70fc12', label: 'Status', color: 'yellow', size: 'lg', status: 'subtle' }), h("dga-status-tag", { key: '7e0158dbc038cf2a254d4c7d41b0fff4527446fb', label: 'Status', color: 'yellow', size: 'md', status: 'subtle' }), h("dga-status-tag", { key: '38d3600691094548fb0cba9b31653979b5e86ede', label: 'Status', color: 'yellow', size: 'sm', status: 'subtle' }), h("dga-status-tag", { key: '6cd043e3962c4e69f750f41998147de6c2816ab8', label: 'Status', color: 'yellow', size: 'lg', status: 'inverted' }), h("dga-status-tag", { key: '19c968e6168fac843d249742270f61d573692711', label: 'Status', color: 'yellow', size: 'md', status: 'inverted' }), h("dga-status-tag", { key: '1306358b4cfd3111b8f864f38496e6e843c29ba8', label: 'Status', color: 'yellow', size: 'sm', status: 'inverted' }), h("dga-status-tag", { key: 'f54cafa3d566a790f73bb91c95b416fafa2ffb78', label: 'Status', color: 'yellow', size: 'lg', status: 'ghost' }), h("dga-status-tag", { key: '1310aaca3c2c5fe8c261a7b10a5242683b40c97c', label: 'Status', color: 'yellow', size: 'md', status: 'ghost' }), h("dga-status-tag", { key: '114baddb1c33b148e97efe1815474f11637ebf51', label: 'Status', color: 'yellow', size: 'sm', status: 'ghost' }), h("dga-status-tag", { key: '014461f0194007acdeec61c5bb82facbe421fb05', label: 'Status', color: 'red', size: 'lg', status: 'subtle' }), h("dga-status-tag", { key: '0e78e65932dcd3c31968dd381623b829ab1356db', label: 'Status', color: 'red', size: 'md', status: 'subtle' }), h("dga-status-tag", { key: '2e172389cb08a3a05b83e6471765adb7d899870b', label: 'Status', color: 'red', size: 'sm', status: 'subtle' }), h("dga-status-tag", { key: 'e719160b60558401a4f35153bc75003eb0326e2b', label: 'Status', color: 'red', size: 'lg', status: 'inverted' }), h("dga-status-tag", { key: '282d8452066b2705179692072949e86921a63d42', label: 'Status', color: 'red', size: 'md', status: 'inverted' }), h("dga-status-tag", { key: 'b3c43be242d0d56fc20854527ec51b6a9db2dc46', label: 'Status', color: 'red', size: 'sm', status: 'inverted' }), h("dga-status-tag", { key: '0d97ab19899946cc81663a2061d6b9e71e325d50', label: 'Status', color: 'red', size: 'lg', status: 'ghost' }), h("dga-status-tag", { key: 'c0c4236a68da96c69b5c19d4825deeb6d3648673', label: 'Status', color: 'red', size: 'md', status: 'ghost' }), h("dga-status-tag", { key: 'ce87407a8d8334aca51ee2f2dc94b29bc09fff4a', 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: '0c90baa699105bb5d608b1e78216da2f6c083d30' }, h("h1", { key: 'c1ae1ee88e98fed39ebf112dd81a086953ec4e1d' }, "Text Input Example"), h("div", { key: '1ef35c412bc760d61ff8598fc1fbe79285e8ed0e', style: { padding: '50px' } }, h("div", { key: 'b2c9286b887c058e35b246ec3e499f918e23c7e1', style: { display: 'flex', flexDirection: 'column', gap: '16px' } }, h("input", { key: 'b65a0ddea8d13b9aaed9ab1a68e3ed7b863f08a3', type: "text", value: this.value, onChange: (e) => (this.value = e.target.value) }), h("p", { key: '452491e078e77f5749aa3eb510e6b1fc8749e47f' }, this.value), h("dga-text-input", { key: 'ac16179be1e3c95671d24c4215b3b7e5e98b50ba', 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: 'e8bf194137d68c93becf43de1f26889fb1d51ef6', 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: '993b6a76f021e94cf19db6b9c2c24e0a443dadb1', 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: '9d75eea2e36727d86d48738ea4188c842815729b', type: "button", variant: "solid",
+        return (h("div", { key: 'b2e3c8f39b39d3c1a87264787c23727e97ef36a6' }, h("h1", { key: 'b7db4b51db892c39716a687f095dbbd9394dbd25' }, "Text Input Example"), h("div", { key: '570975828a623a2dfa6e45f0789872eea2969cf2', style: { padding: '50px' } }, h("div", { key: 'be642c7b3962f63cded5399bd2b9bb52284a97b1', style: { display: 'flex', flexDirection: 'column', gap: '16px' } }, h("input", { key: '393f1cc4558e0626f439565bdbd01362e7bc3a5a', type: "text", value: this.value, onChange: (e) => (this.value = e.target.value) }), h("p", { key: '0ce218b748e3e8aa2c40a0b1ce503c6f6abe317d' }, this.value), h("dga-text-input", { key: '5de34fdb6c109ca30a3d6521c03fe865ab66d725', 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: '9781c4c7a6039ece3afba6f922f399c611f4433e', 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: 'b232e1037f239823664fc13cafe54c04d5d3f10a', 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: '11620195310bee39bfb746a639fd38be3b0e4ff0', type: "button", variant: "solid",
             // label="Button Label"
-            icon: { name: 'search-01' } })), h("dga-label", { key: 'bdf3180d3dfd53e11ff40018dca7c55ae6597879', label: "Mandatory Text Input" }), h("dga-label", { key: '15d6e4191f7b51fc5c232ea3d029f60bbd1e1172', label: "Mandatory Text Input", required: true })))));
+            icon: { name: 'search-01' } })), h("dga-label", { key: '9809c151778e5e2398e8d3b10474aff0c543d344', label: "Mandatory Text Input" }), h("dga-label", { key: '426bc1d9ab458e09778fec372643b585d9de4945', 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: '7a950f31b12aa0ef48b16244aeaa353c0bc71c5a' }, h("h1", { key: '805f42391235ed15b4e7dc3aa25976a7dec0bcd9' }, "Textarea Example"), h("div", { key: '488efb733aa92f0a0c5587566b996d656a55ef8c', style: { padding: '50px', display: 'flex', gap: '20px' } }, h("div", { key: '7c4dc7bbbfd948581ed85a98e4525898e4ef9b89', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }, h("dga-textarea", { key: '310de04b70922f6797c5c563d019c70e25053b5f', label: "Label", placeholder: "Placeholder...", scrollbar: true, readonly: true }), h("dga-textarea", { key: 'cf8a900da06d72242c219d2a97f48c83179c28fc', placeholder: "Placeholder...", scrollbar: true })), h("div", { key: '8cc15a28327624de7fde685f978cdd62c3b5c21b', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }))));
+        return (h("div", { key: 'd48140d96504458e7615767843f8142996af5a21' }, h("h1", { key: 'af1e0555665ae4b20e2b07c0b08b5bccd3ac2655' }, "Textarea Example"), h("div", { key: '95bcbe0f187566f5033b9fbe0c67e90819499790', style: { padding: '50px', display: 'flex', gap: '20px' } }, h("div", { key: 'e87c6a4b4a7c0c118380bf476d3a0276fcd8a785', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }, h("dga-textarea", { key: 'd8d7828335a822d4bf4c9efb7cc8438462fd2f9c', label: "Label", placeholder: "Placeholder...", scrollbar: true, readonly: true }), h("dga-textarea", { key: '79d31b41b05d533e22217ca4eb430be2fef9ea37', placeholder: "Placeholder...", scrollbar: true })), h("div", { key: 'ae328ebe429df2d5bdd5e6afbd0ecb6f0312c6f9', 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: '0064e5dff22f0ff8a3b5f569deb22d68e2b2c94c' }, h("h1", { key: '825e0479f5239adfe639b7b66da34de9725d7bc1' }, "Tooltip Example"), h("div", { key: '331afe44f9f531fabf614d567f9353f32ab5c092', style: { padding: "50px", display: "flex", gap: "20px" } }, h("div", { key: 'b3d786abd00af5ddf19ce70c866109a73a60bc4e', style: { display: "flex", flexDirection: "column", gap: "20px" } }, h("dga-tooltip", { key: '29a1d4ffc256c0e497f2b0e6641bc3fb5d992c3d', 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: '854568480d6ede417afc8c42870201c95b9d07f4' }, h("h1", { key: '04ee3fc5257e02173806074558e4803268a25cce' }, "Tooltip Example"), h("div", { key: '178d3564f95c8522c5e8d6bd2d08a9153a88811b', style: { padding: "50px", display: "flex", gap: "20px" } }, h("div", { key: 'b115f6b6d98427dc408db6bcb414fa9d7f0e96a9', style: { display: "flex", flexDirection: "column", gap: "20px" } }, h("dga-tooltip", { key: '2ec1a84cf9c68871c674044477f03fc8b6fa34e6', 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: '8a42e1d104123e01fc04f7a1daee7beb20129488', style: { display: "flex", flexDirection: "column", gap: "20px" } }))));
+            } }, "Hello")), h("div", { key: '8da0c1fc2f3860d1669a40e0f9f87a5d7a137f5f', 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-D70Rxxoo.js';
+import { D as DateCell$1, d as defineCustomElement$1 } from './p-DrUc2zGY.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-CJHKPaw6.js';
-import { d as defineCustomElement$2 } from './p-zVn-LSJh.js';
+import { d as defineCustomElement$3 } from './p-BsRMvb_5.js';
+import { d as defineCustomElement$2 } from './p-DelImzb3.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: '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' } }))));
     }
 }, [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-CJHKPaw6.js';
+import { D as DgaAccordion$1, d as defineCustomElement$1 } from './p-BsRMvb_5.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-C9AVEAfP.js';
+import { D as DgaActionMenu$1, d as defineCustomElement$1 } from './p-ZrM9I_v_.js';
 
 const DgaActionMenu = DgaActionMenu$1;
 const defineCustomElement = defineCustomElement$1;

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: '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/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-BF6_ERMr.js';
+import { d as defineCustomElement$4 } from './p-Cjt_jTK9.js';
 import { d as defineCustomElement$3 } from './p-BZPI28S4.js';
-import { d as defineCustomElement$2 } from './p-zVn-LSJh.js';
+import { d as defineCustomElement$2 } from './p-DelImzb3.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: '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' } }))));
     }
 }, [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-BF6_ERMr.js';
+import { D as DgaAvatar$1, d as defineCustomElement$1 } from './p-Cjt_jTK9.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-DwmJwhYP.js';
-import { d as defineCustomElement$3 } from './p-zVn-LSJh.js';
+import { d as defineCustomElement$4 } from './p-xxNf8e0P.js';
+import { d as defineCustomElement$3 } from './p-DelImzb3.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: '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: '/',
@@ -28,7 +28,7 @@ const DgaBreadcrumbsUsage$1 = /*@__PURE__*/ proxyCustomElement(class DgaBreadcru
                     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' } }))));
     }
 }, [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-DwmJwhYP.js';
+import { D as DgaBreadcrumbs$1, d as defineCustomElement$1 } from './p-xxNf8e0P.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-DdK43o7A.js';
+import { D as DgaButtonLeadingIcon$1, d as defineCustomElement$1 } from './p-__rtQaIn.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-CGwqjtn-.js';
-import { d as defineCustomElement$2 } from './p-zVn-LSJh.js';
+import { d as defineCustomElement$3 } from './p-dmyZWGuz.js';
+import { d as defineCustomElement$2 } from './p-DelImzb3.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: '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',
@@ -22,12 +22,12 @@ const DgaButtonUsage$1 = /*@__PURE__*/ proxyCustomElement(class DgaButtonUsage e
                 '.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' } }))));
     }
 }, [0, "dga-button-usage", {
         "variant": [32]

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

@@ -1,8 +1,8 @@
 import { p as proxyCustomElement, H, h } from './p-JCGAt0My.js';
-import { d as defineCustomElement$5 } from './p-DdK43o7A.js';
-import { d as defineCustomElement$4 } from './p-DZg2yEu-.js';
-import { d as defineCustomElement$3 } from './p-DboQJAUi.js';
-import { d as defineCustomElement$2 } from './p-zVn-LSJh.js';
+import { d as defineCustomElement$5 } from './p-__rtQaIn.js';
+import { d as defineCustomElement$4 } from './p-BokzxvvX.js';
+import { d as defineCustomElement$3 } from './p-B7YYM_Ys.js';
+import { d as defineCustomElement$2 } from './p-DelImzb3.js';
 
 const DgaButtonUsage = /*@__PURE__*/ proxyCustomElement(class DgaButtonUsage extends H {
     constructor() {
@@ -11,13 +11,13 @@ const DgaButtonUsage = /*@__PURE__*/ proxyCustomElement(class DgaButtonUsage ext
         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' } }))));
     }
 }, [0, "dga-button-v2-usage", {
         "variant": [32]

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

@@ -1,4 +1,4 @@
-import { D as DgaButton, d as defineCustomElement$1 } from './p-DZg2yEu-.js';
+import { D as DgaButton, d as defineCustomElement$1 } from './p-BokzxvvX.js';
 
 const DgaButtonV2 = DgaButton;
 const defineCustomElement = defineCustomElement$1;