@platformscode/core 0.0.25 → 0.0.27

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

@@ -4,14 +4,14 @@ export class DgaChipUsage {
         this.isSelected = false;
     }
     render() {
-        return (h("div", { key: 'a7f8a0c8935f8cf26a4af5e4e60c96b35482441f' }, h("h1", { key: 'c5a0328a41e56e62459b5e11349c04c718fe6740' }, "Chip Example"), h("div", { key: 'cdd210478b5a056c6d95fb52c6a1a3f859b295e6', style: { padding: '50px', display: 'flex', gap: '20px' } }, h("div", { key: 'e1308db145740be93aad44d3968577028706d8cb', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }, h("dga-chip", { key: 'e0afdec2e26596a35de25f01057cba4ea9657cef', label: "Label", variant: "neutral",
+        return (h("div", { key: '0178f4d6fd4b0719a2d3434d39f86bb66ad142f1' }, h("h1", { key: '907c68073c0b297355aecaacde5e247ec09f480d' }, "Chip Example"), h("div", { key: '372fb45c5eeda1ee383972ad6d2dab7a031daf42', style: { padding: '50px', display: 'flex', gap: '20px' } }, h("div", { key: 'cb2aa1e9c18f64a1b681d5b3ae50262208a120db', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }, h("dga-chip", { key: '2e5a611ef8ba489f242e09562a73054dde3ed496', label: "Label", variant: "neutral",
             //   outlined={false}
-            rounded: false, size: "lg" }), h("dga-chip", { key: '20b2510694d0ac06f3f2c2c14f939ed828d673a8', label: "Label", variant: "success", rounded: false, size: "lg", onChange: (isSelected) => {
+            rounded: false, size: "lg" }), h("dga-chip", { key: '0b476dc34c94286ce0bf263c86a0bd26840d0d64', label: "Label", variant: "success", rounded: false, size: "lg", onChange: (isSelected) => {
                 console.log(isSelected, "hi");
                 this.isSelected = isSelected;
-            }, isSelected: this.isSelected }), h("dga-chip", { key: 'd1e3f3bb18379100f16f51dbde938503499d6753', label: "Label", variant: "success", rounded: false, size: "lg", onChange: (isSelected) => {
+            }, isSelected: this.isSelected }), h("dga-chip", { key: '023fe5cefaed3d957d37e4d5311ec5d23c89b858', label: "Label", variant: "success", rounded: false, size: "lg", onChange: (isSelected) => {
                 console.log(isSelected, "hi");
-            }, isSelected: false }), h("dga-chip", { key: '5aac36d3d295f6101d664bd791157f9b95a7a630', label: "Label", variant: "success", rounded: false, size: "lg", disabled: true }), h("div", { key: 'b50cdc2df6e1a14b7fd632cd6c4cadf4a0c8ee4f', style: { display: 'flex', flexDirection: 'column', gap: '20px', backgroundColor: '#074D31' } }, h("dga-chip", { key: '8574f35b4a3a7e9a231f95645cd0cb21c5f38230', label: "Label", variant: "on-color", rounded: true, size: "lg", disabled: true }))))));
+            }, isSelected: false }), h("dga-chip", { key: 'f514a151ac14828bcbeafebbdd631c91db0c2192', label: "Label", variant: "success", rounded: false, size: "lg", disabled: true }), h("div", { key: '720b5c589d97d5c0ab0471e4997a6f0354204f9a', style: { display: 'flex', flexDirection: 'column', gap: '20px', backgroundColor: '#074D31' } }, h("dga-chip", { key: '5b6fbb30727bca96ea55fb9179ad031373699ce7', label: "Label", variant: "on-color", rounded: true, size: "lg", disabled: true }))))));
     }
     static get is() { return "dga-chip-usage"; }
     static get states() {

package/dist/collection/usage/dga-circular-progress-bar-usage.js

@@ -8,7 +8,7 @@ export class DgaCircularProgressBarUsage {
         this.percentage = Number(target.value); // Convert the string value to a number
     }
     render() {
-        return (h("div", { key: '93b12bb1b50bca6a8779602dfae556ed9a249694' }, h("h1", { key: '17104e1f358f842bbf4367056ee50a1a618febd2' }, "Circular Progress Bar Example"), h("div", { key: 'f7ad348d4d72a631de16e0903d18b270237a3dc4', style: { padding: '50px', gap: '20px' } }, h("div", { key: 'd25b78be3819c364fe0dd7a7b66f42dc19771b98', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }, h("dga-circular-progress-bar", { key: '80fc781f91a18b4975ebd7b450ccc94063d3ad47', size: "200px", percentage: this.percentage, text: "Active users" }), h("dga-circular-progress-bar", { key: '828733c9146490cf64e64ddc0feedbe3be1d0908', size: "160px", percentage: this.percentage, variant: "success", text: "Active users" }), h("dga-circular-progress-bar", { key: '98e0b21778c182965728b92c8747756848b8e932', size: "120px", percentage: this.percentage, text: "Active users" }), h("dga-circular-progress-bar", { key: '25c48643c8c8e6fbebf395c2f7e02a02c8739d71', size: "80px", percentage: this.percentage, text: "Active users" }), h("dga-circular-progress-bar", { key: '886bce4d9ec1e9307598ca9f413d660388b53099', size: "64px", percentage: this.percentage }), h("div", { key: '62d0a92b1433758e4075803f863afec7178acdf0', style: { display: 'flex', flexDirection: 'row', gap: '20px' } }, h("dga-circular-progress-bar", { key: 'f373f650310eb2d5a2a619458adc361c32e6b6f9', RTL: true, size: "200px", percentage: this.percentage, variant: "success", text: "Active users" }), h("dga-circular-progress-bar", { key: 'cbf8180616fed89eb9113586c88cd04f5cb1130b', RTL: true, size: "160px", percentage: this.percentage, variant: "success", text: "Active users" }), h("dga-circular-progress-bar", { key: '1a2b0931e33296176fbcc265f25d3a36f2f684a0', RTL: true, size: "120px", percentage: this.percentage, variant: "success", text: "Active users" }), h("dga-circular-progress-bar", { key: '843d80bd0e79c690ec9f1fdd925e4a7cc170fb8e', RTL: true, size: "80px", percentage: this.percentage, variant: "success", text: "Active users" }), h("dga-circular-progress-bar", { key: '96a961ee8e2bbab1e523cd45d08bbb4b37186557', RTL: true, size: "64px", percentage: this.percentage, variant: "success", text: "Active users" })), h("div", { key: 'ef8554b9cae1fcf34f8ee84a92d3fbd7a230651e', style: { display: 'flex', flexDirection: 'row', gap: '20px' } }, h("dga-circular-progress-bar", { key: '461eb0e59dac18e89e272157318f620d8c4296a6', RTL: true, size: "200px", percentage: this.percentage, variant: "error", text: "Active users" }), h("dga-circular-progress-bar", { key: '4401d971110541860f61bbaf6ec4c4848421cc14', RTL: true, size: "160px", percentage: this.percentage, variant: "error", text: "Active users" }), h("dga-circular-progress-bar", { key: '310f989f159017a9eb9cac6791a72eb79ada09ab', RTL: true, size: "120px", percentage: this.percentage, variant: "error", text: "Active users" }), h("dga-circular-progress-bar", { key: 'f22cbecf6d11d6c5681b7dbab4c72665ff9c2b9c', RTL: true, size: "80px", percentage: this.percentage, variant: "error", text: "Active users" }), h("dga-circular-progress-bar", { key: 'dcf7bacacbc3023c77db1d973351ab014c30864a', RTL: true, size: "64px", percentage: this.percentage, variant: "error", text: "Active users" })), h("input", { key: 'ba44122f942ddfde011ccc8f7c4af952d5772968', type: "range", min: "0", max: "100", value: this.percentage, onInput: e => this.handleInputChange(e) })), h("div", { key: 'c97016057e8e00e2cc73d2b66806d13ccd46c17e', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }))));
+        return (h("div", { key: 'f21480e51ff79b4d537c228690b894ede442a807' }, h("h1", { key: 'ef9a852a59d01a617fc818424cbf95e51ccb40b6' }, "Circular Progress Bar Example"), h("div", { key: '2d17ae6c3bbe9c87871d8f81e9b17681d0e50230', style: { padding: '50px', gap: '20px' } }, h("div", { key: '88e94e743f8825cad4f507532c6f385dce6f486d', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }, h("dga-circular-progress-bar", { key: 'bcb49f7969a53cba89220ff673b4c99b2ac240a3', size: "200px", percentage: this.percentage, text: "Active users" }), h("dga-circular-progress-bar", { key: '73979783ed901cc3eda58b754277d192a11aee88', size: "160px", percentage: this.percentage, variant: "success", text: "Active users" }), h("dga-circular-progress-bar", { key: 'ae01aea09cbe7e1d77420714d2d1ab659a2298a0', size: "120px", percentage: this.percentage, text: "Active users" }), h("dga-circular-progress-bar", { key: '64785601b3252acc40561ea587c783d0b026cc0d', size: "80px", percentage: this.percentage, text: "Active users" }), h("dga-circular-progress-bar", { key: '0e820a9fa3729b9d31f84b84f19cb133ac2c6f15', size: "64px", percentage: this.percentage }), h("div", { key: '9896d944d3ab34ba63ee07583b5f6fcae45b829a', style: { display: 'flex', flexDirection: 'row', gap: '20px' } }, h("dga-circular-progress-bar", { key: '9d0f9ae93e5915d866a696d75773616f4c6773c2', RTL: true, size: "200px", percentage: this.percentage, variant: "success", text: "Active users" }), h("dga-circular-progress-bar", { key: '4bc48a52a159bc2980827904d8f327ecd60cc723', RTL: true, size: "160px", percentage: this.percentage, variant: "success", text: "Active users" }), h("dga-circular-progress-bar", { key: 'f68eb463bca3ed2167a4c4c607b496adb9201f07', RTL: true, size: "120px", percentage: this.percentage, variant: "success", text: "Active users" }), h("dga-circular-progress-bar", { key: 'f31110b46df0746191e25e8bee37b07944fd9bf4', RTL: true, size: "80px", percentage: this.percentage, variant: "success", text: "Active users" }), h("dga-circular-progress-bar", { key: '76b350ccc0feaf765ab771a9b720a75f711bb34f', RTL: true, size: "64px", percentage: this.percentage, variant: "success", text: "Active users" })), h("div", { key: '276089e86c5d67e5ec229924dc465177ee043eee', style: { display: 'flex', flexDirection: 'row', gap: '20px' } }, h("dga-circular-progress-bar", { key: '810290a41fbe4f15186dc7fcd9269e931c522274', RTL: true, size: "200px", percentage: this.percentage, variant: "error", text: "Active users" }), h("dga-circular-progress-bar", { key: '809392514a89a5a16637c6b33517f06b30bc3a35', RTL: true, size: "160px", percentage: this.percentage, variant: "error", text: "Active users" }), h("dga-circular-progress-bar", { key: 'c92fde5641c8d8f194b94922081bed65ea1a0c1d', RTL: true, size: "120px", percentage: this.percentage, variant: "error", text: "Active users" }), h("dga-circular-progress-bar", { key: 'e66529d2037e370b6fd4c0e1b4ee55eb9cb68d78', RTL: true, size: "80px", percentage: this.percentage, variant: "error", text: "Active users" }), h("dga-circular-progress-bar", { key: '12cdada45b3525143507f61d7a6695af500c0ca5', RTL: true, size: "64px", percentage: this.percentage, variant: "error", text: "Active users" })), h("input", { key: '180210743b4c136de17e5ba2175d88fc2faafce6', type: "range", min: "0", max: "100", value: this.percentage, onInput: e => this.handleInputChange(e) })), h("div", { key: 'd94b40a81e08c0d854320c7a8ec1e2204894ae60', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }))));
     }
     static get is() { return "dga-circular-progress-bar-usage"; }
     static get states() {

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

@@ -40,7 +40,7 @@ h1 {
         };
     }
     render() {
-        return (h("div", { key: 'e23fe50db23571bd4da8604782e7e787ee71f8d2', style: { width: '743px', display: 'flex', flexDirection: 'column', gap: '123px', margin: "10px" } }, h("dga-codesnippet", { key: '66c73f215822aba0edfdf11b30604b8729c16460', showButton: true, type: "multi-line", showSidebar: true, showTabList: true, snippets: this.snippets }), h("dga-codesnippet", { key: '7a0b424e36c70355b356cd63539b9c76ddc80c3e', showButton: false, type: "single", showSidebar: false, showTabList: false, snippets: this.snippetLine })));
+        return (h("div", { key: '8fec3258f454d167e0ff8814303754d0a764885e', style: { width: '743px', display: 'flex', flexDirection: 'column', gap: '123px', margin: "10px" } }, h("dga-codesnippet", { key: '505ca45d20f82e97e3a9e4186f1dd0f3ccd2728d', showButton: true, type: "multi-line", showSidebar: true, showTabList: true, snippets: this.snippets }), h("dga-codesnippet", { key: '72f1a4ab0fc27ed9f8d411b3b1ee0dbc34aa51d4', showButton: false, type: "single", showSidebar: false, showTabList: false, snippets: this.snippetLine })));
     }
     static get is() { return "dga-codesnippet-usage"; }
 }

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

@@ -5,7 +5,7 @@ export class DgaCollapseUsage {
         this.open = false;
     }
     render() {
-        return (h("div", { key: 'ad1f3f0e1cf28490ef2970a85ad18f42dbf66a8d' }, h("h1", { key: 'f3b60791364960473706e66a166ccd8cebfb1508' }, "Collapse Example"), h("div", { key: '18a70722655f05c530fa263b71a5786ff2a19294', style: { padding: '50px', display: 'flex', gap: '20px' } }, h("div", { key: '27285803d2aa02483a2b6fc4654d9ab67a30f400', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }, h("div", { key: 'db1b4e4bb8a7b3352df5641ca70f47e7f0df94d2', style: { display: "flex", justifyContent: "center" } }, h("button", { key: '3ca2c084ffa9261b6e15d45c8b785408f3e66f0a', onClick: () => this.open = true }, "open"), h("button", { key: '28475f08968c02f0ecd69286e21e0e16124074a9', onClick: () => this.open = false }, "close"))), h("dga-collapse", { key: '4e0f3aa013b7fbd463809026f6a4a6149673ed8e', open: this.open, "transition-duration": "0.1s" }, h("div", { key: '6f13006476b26fa028887be309160128253be56c' }, "Your content here")), h("div", { key: '4eaaed68a082c160be1338d058bfe4b861b6c86f', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }))));
+        return (h("div", { key: 'ce45988cc189e31973289c2785bd351adcbcd027' }, h("h1", { key: 'd73ae20e4ac38dbb1ddd6276ba1a3aa1c5328174' }, "Collapse Example"), h("div", { key: '9a1b43f1f384c22d3428aadf3d19af7dbe343ed5', style: { padding: '50px', display: 'flex', gap: '20px' } }, h("div", { key: 'aa3d3742b330872605c3c7ec42a5073eb97e2b0a', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }, h("div", { key: 'a3381846bea7990d01306834ffa3e07f896f0853', style: { display: "flex", justifyContent: "center" } }, h("button", { key: '08e7ae751bbf3866a45a37f241c9d8e748b36bb9', onClick: () => this.open = true }, "open"), h("button", { key: '367a2f8354b616d07ce6f8f0c64f57d8adfc0361', onClick: () => this.open = false }, "close"))), h("dga-collapse", { key: '7b5f2514c6f258b1a5b21f286d399114abe59b07', open: this.open, "transition-duration": "0.1s" }, h("div", { key: 'f358334a58500c364213da1aff61cdd8925fbef9' }, "Your content here")), h("div", { key: '666f605c04a91b66ac0013b3b3696447c16e4116', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }))));
     }
     static get is() { return "dga-collapse-usage"; }
     static get states() {

package/dist/collection/usage/dga-content-switcher-usage.js

@@ -4,7 +4,7 @@ export class DgaContentSwitcherUsage {
         this.value = 0;
     }
     render() {
-        return (h("div", { key: '56e692143944c0c62d5b22fd633875c160a7828b' }, h("h1", { key: '8bc0c5ae1f69f10de89d6e614bcf322c443559c2' }, "Content Switcher Example"), h("dga-content-switcher", { key: '069cd1209784cf4d410fa962aa6a3db341b64226', size: 'lg' }, h("dga-content-switcher-item", { key: '75814e876ed5dee9af2e3f2c29cd45c9c489dfae', label: "Option 1", content: "This is Option 1 content." }), h("dga-content-switcher-item", { key: 'b64cd0091c1f5e64139021d6e70aa942b600e7b8', label: "Option 2", content: "This is Option 2 content." }), h("dga-content-switcher-item", { key: 'a12f3be500ba7a85d35f96de1d77dd4a8aeb68db', label: "Option 3", content: "This is Option 3 content." })), h("dga-content-switcher", { key: 'ecbb02f1a5e46edf41d8b613e037dd47593c774a', size: 'md' }, h("dga-content-switcher-item", { key: '24e7e24396ecdbb8806ce440d020560a6bfb155a', label: "Option 1", content: "This is Option 1 content." }), h("dga-content-switcher-item", { key: '81344748409500eba271c851b613228c24e563fc', label: "Option 2", content: "This is Option 2 content." }), h("dga-content-switcher-item", { key: '54618c976aff07f863f77123d18683f078764252', label: "Option 3", content: "This is Option 3 content." })), h("dga-content-switcher", { key: 'bc95bf75e3b87150c39c3133e24d347aed7e2d7d', size: 'sm', onColor: true }, h("dga-content-switcher-item", { key: 'bc1ac65a4efb6fb7ffd7a07abc186a4125e15b9d', label: "Option 1", content: "This is Option 1 content." }), h("dga-content-switcher-item", { key: 'fbe905770a267e141de4f124176bc556215105ca', label: "Option 2", content: "This is Option 2 content." }), h("dga-content-switcher-item", { key: '0303b4a7b07e8860dfea72ae9b52f6c8bc3a94c1', label: "Option 3", content: "This is Option 3 content." })), h("h1", { key: '2c1f6c3e5468c15d497bb2ea4925693a20bf8658' }, this.value), h("dga-content-switcher", { key: '49abb722e83602a87f1606529f2282ff4fc2d717', size: 'lg', value: this.value, onChange: (val) => this.value = val }), h("dga-content-switcher-panel", { key: '451d56bfca2a21d5d0294b8008dd5eb73d64af2b', value: this.value, index: 0 }, h("div", { key: 'db77e3b8683a79ede96793a594f29b180db96513' }, "Content 1")), h("dga-content-switcher-panel", { key: 'e13d2a23f708650f8351dbc9fb289f0eb42422ac', value: this.value, index: 1 }, h("div", { key: '0051ee2d78df2c141e0ef14671177f542e740f80' }, "Content 2")), h("dga-content-switcher-panel", { key: '3456f61de3ee9550af13cf079ade0390b147d6ef', value: this.value, index: 2 }, h("div", { key: '8c5f4d2dae8e21bcd44114595729eb14c5c48309' }, "Content 3"))));
+        return (h("div", { key: '6903e09d27c812323da710c32b30d7a7c67e2aa6' }, h("h1", { key: '2dac404327f2f2259513f4902a0af1dfd8303856' }, "Content Switcher Example"), h("dga-content-switcher", { key: '3e77ad327e45df9d3090d66dd2d307d54d238f1a', size: 'lg' }, h("dga-content-switcher-item", { key: '45428c19a30312c5171e7668553537999f55677c', label: "Option 1", content: "This is Option 1 content." }), h("dga-content-switcher-item", { key: 'ce8d129c1dc1fda71c1d4327e0c68f09cb1db245', label: "Option 2", content: "This is Option 2 content." }), h("dga-content-switcher-item", { key: '0367aae3341396a297c46ed57a679bebb67c5707', label: "Option 3", content: "This is Option 3 content." })), h("dga-content-switcher", { key: 'a63ee1fc31a1929be258d2d30614dddc545e819d', size: 'md' }, h("dga-content-switcher-item", { key: 'e108e0f2a04360ecfb9f716d74333cd4c10fa937', label: "Option 1", content: "This is Option 1 content." }), h("dga-content-switcher-item", { key: '9d20eb19271d3240bd015dfa5d745091d519e203', label: "Option 2", content: "This is Option 2 content." }), h("dga-content-switcher-item", { key: '375268ab4e6f1c490f897d488cd890e6bff01a93', label: "Option 3", content: "This is Option 3 content." })), h("dga-content-switcher", { key: '4a625a1fa721c34925814a1f19c1e86643f8da13', size: 'sm', onColor: true }, h("dga-content-switcher-item", { key: 'e18724ed936f1ddab4f9f4ce6acb9acb984f7043', label: "Option 1", content: "This is Option 1 content." }), h("dga-content-switcher-item", { key: 'b779698cc4246daa9a73125203fd8df79608be4b', label: "Option 2", content: "This is Option 2 content." }), h("dga-content-switcher-item", { key: 'a9a5e220e10ded846d3cff85927f4e0d4465cd64', label: "Option 3", content: "This is Option 3 content." })), h("h1", { key: 'f0155b208cedb99ff722d3b115cac0fd9c837202' }, this.value), h("dga-content-switcher", { key: '341e37fb473c68ec39c1dd11b69cc6378eb6b9f6', size: 'lg', value: this.value, onChange: (val) => this.value = val }), h("dga-content-switcher-panel", { key: '309a4263c65ebe2445cd4ce6235d947702565991', value: this.value, index: 0 }, h("div", { key: '0c0f27a7290b9496197ee93925ae58d3f9400386' }, "Content 1")), h("dga-content-switcher-panel", { key: '4b4509182481333595a01465fb7c6f106626cc5f', value: this.value, index: 1 }, h("div", { key: '19b0ddfc985c2a4ad078fb42b3f1143611c7f644' }, "Content 2")), h("dga-content-switcher-panel", { key: '7472c85660a3299300af5d02ae880c61080ef243', value: this.value, index: 2 }, h("div", { key: 'f63b0da8787366b4cb646010a23f866ab6b43951' }, "Content 3"))));
     }
     static get is() { return "dga-content-switcher-usage"; }
     static get properties() {

package/dist/collection/usage/dga-date-field-usage.js

@@ -4,7 +4,7 @@ export class DgaDateFieldUsage {
         this.value = '';
     }
     render() {
-        return (h("div", { key: '6a37acaca6b95b061027a22ea9d63e146c6d4fee' }, h("h1", { key: '18ea23146e81aa4f76ed811c0f645aa62553cf59' }, "Date Field Example"), h("div", { key: '92cb20c17e2de92fef76d145601fdd98665bf771', style: { padding: '50px' } }, h("div", { key: '7461c66c0cbb96010a296a94bc8650689c9c5370', style: { display: "flex", flexDirection: "column", gap: "16px" } }, h("input", { key: '113c6985f800d48972236db9adf2bbc9daaedc85', type: "date", value: this.value, onChange: (e) => this.value = e.target.value }), h("dga-date-field", { key: '562d46619fc478bc9f7fd4d0d001e2617fbbe9f7', value: this.value, onChange: (e) => this.value = e.target.value })))));
+        return (h("div", { key: 'e47493fd39924f450f92f9e8f68c043c12e4df5c' }, h("h1", { key: 'd4cf69d43f38b808dbb9830708c17d7912c840e6' }, "Date Field Example"), h("div", { key: '551a9f94a3071badcf01243d8b5ee3184756bd8f', style: { padding: '50px' } }, h("div", { key: 'c3a10cfbadd77ff7ba5a2e41ba4752dffad47b6f', style: { display: "flex", flexDirection: "column", gap: "16px" } }, h("input", { key: '07c26c08b8c643dcbe889f40c088354996e46493', type: "date", value: this.value, onChange: (e) => this.value = e.target.value }), h("dga-date-field", { key: '8696032ed67ff748798102720aabcd78952818b7', value: this.value, onChange: (e) => this.value = e.target.value })))));
     }
     static get is() { return "dga-date-field-usage"; }
     static get states() {

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

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 export class DgaPickerUsage {
     render() {
-        return (h("div", { key: '567d7d2ed08114ec05891ef4ee8eda9a1bc0abfa' }, h("h1", { key: 'e65f61bad1f08ba2c26db7ded84a9d64e6d43cac' }, "Datepicker Example"), h("div", { key: '23a790d84f2c241ec4ac7e724c19aedbf8cc9c41', style: { padding: '50px', display: 'flex', gap: '20px' } }, h("div", { key: '75c8b974c001c8ae3ed5276b5ccd18bd57edc0f4', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }, h("dga-datepicker", { key: 'bf6b355052b9e017a6611c710e03e820e0baba1e', inputField: false, qickOptions: true }), h("dga-datepicker", { key: '6924c1a1d2fe2d6d41f15725dd788ce14c493e13', RTL: true, inputField: true, range: true, qickOptions: true }), h("dga-datepicker", { key: '703003319fe99a6442f1f24b6b0df7f29ff82536', range: true })), h("div", { key: '450e773a803953e1e66650699aefc07fb34cc711', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }))));
+        return (h("div", { key: 'b52ca0efce71204aed2adaf89202318f0edcd628' }, h("h1", { key: 'd3bb55b0ed385369e9e4b8c84b5ac32d228274a3' }, "Datepicker Example"), h("div", { key: '9bb4e267a566d78e1233515beae77a9de35aedc6', style: { padding: '50px', display: 'flex', gap: '20px' } }, h("div", { key: '8b01d9914510e772ddea427795d9cb633fd85a5f', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }, h("dga-datepicker", { key: 'ed93d5b6dd71651203cf68015dc6dc6daa5d5bcb', inputField: false, qickOptions: true }), h("dga-datepicker", { key: 'a14cd34017dca39a1ad597f7568df29fe20b08f2', RTL: true, inputField: true, range: true, qickOptions: true }), h("dga-datepicker", { key: '65360941d011ac7b4969a3346bcf3ec3e42f3393', range: true })), h("div", { key: 'b86ca5a1008bbce275ffbb1e2e1751e8c0f75bac', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }))));
     }
     static get is() { return "dga-datepicker-usage"; }
 }

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

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 export class DgaDigitalSignatureUsage {
     render() {
-        return (h("div", { key: 'b893dbef0875ed68dafa3fb942af21a8a08d1d09', style: { width: '100%' } }, h("dga-digital-signature", { key: '3024c7ba9966c9524b63c3891327e9b4666171a8', language: 'en', extension: ".sch.sa" })));
+        return (h("div", { key: '6f893f09f3c57f48f60aaf2b1347dd437a0d8fbc', style: { width: '100%' } }, h("dga-digital-signature", { key: 'f76998acbf0a16ad5a88fffc4de2b7294768a00a', language: 'en', extension: ".sch.sa" })));
     }
     static get is() { return "dga-digital-signature-usage"; }
 }

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

@@ -1,10 +1,10 @@
 import { h } from "@stencil/core";
 export class DgaDividerUsage {
     render() {
-        return (h("div", { key: '6c30b900be17091249db53b6684f8ba4894286b2' }, h("h1", { key: 'a9b2da284fa680c64e6db45d8ec95e52de937f90' }, "Divider Example"), h("div", { key: '07e08ac98b84241b35e71c01645ddae57c85b4ce', style: { padding: '50px', display: 'flex', gap: '20px' } }, h("div", { key: '86ccb56baa4b3984841466c055c5f698aed2df36', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }, h("div", { key: '0034f64d3b42165f2aba928bee6a504e2fe2d6ba', style: {
+        return (h("div", { key: 'bc740b93b419ee3b10a3bb617b05bba4cd399d2e' }, h("h1", { key: 'aabadc49976d7eddd277aaa8ed59c4070ce37ef8' }, "Divider Example"), h("div", { key: 'e3d21269f94c77f1c628a8514c717badb474bafe', style: { padding: '50px', display: 'flex', gap: '20px' } }, h("div", { key: '8bce98d3be0f9b24fa777cdc29754115af9ee6e4', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }, h("div", { key: 'acfad7ddae093ebfcd94caf5fd15654b003901f8', style: {
                 borderRadius: '20px',
                 background: 'gray',
-            } }, h("div", { key: '07f71be1f241e85cad3e21723813106f8ed6a98a', style: {
+            } }, h("div", { key: '5e85859f43a96529629bd1e8be57733859f953bf', style: {
                 width: '224px',
                 height: '82px',
                 background: '#fff',
@@ -12,7 +12,7 @@ export class DgaDividerUsage {
                 display: 'flex',
                 flexDirection: 'column',
                 gap: '40px',
-            } }, h("dga-divider", { key: 'ac42579aaa71f741fc1060165529717f8ca1a0a6', color: "neutral" }), h("dga-divider", { key: 'eabf78d23334c0cde51732fc3581ecf8642c0367', color: "primary" })), h("div", { key: 'e2b6b2a7a0c104b93107b7dcab213ae83d6b926f', style: {
+            } }, h("dga-divider", { key: 'a5c3a613dc4e3c7a293ae42cabb67698318c2d27', color: "neutral" }), h("dga-divider", { key: 'c06959904187c8df1c9f5b01772792d432e1de30', color: "primary" })), h("div", { key: '4dd3cfc1a7f41458cadad9ba4a4a8a518ba4053b', style: {
                 width: '224px',
                 height: '82px',
                 background: '#fff',
@@ -20,7 +20,7 @@ export class DgaDividerUsage {
                 display: 'flex',
                 // flexDirection: 'column',
                 gap: '40px',
-            } }, h("dga-divider", { key: '47070367ad13c2aa01a7bbc7cc0e4da50c4ba629', color: "neutral", orientation: 'vertical' }), h("dga-divider", { key: '5851bf6252d0c12e08482109f8a021b06d50d1c3', color: "primary", orientation: 'vertical' })), h("div", { key: 'f1273ee72d06028cd3f25dd3dea6228ab485cc03', style: {
+            } }, h("dga-divider", { key: '05e4a992683c9adf6beb1dc85c33eec9d79ce81f', color: "neutral", orientation: 'vertical' }), h("dga-divider", { key: '2cb98622ae4a1d8a81087e5ffd979e3327388442', color: "primary", orientation: 'vertical' })), h("div", { key: '3d12e3c11e790acb1938666330cf5fdec78be8e2', style: {
                 width: '224px',
                 height: '82px',
                 background: '#1B8354',
@@ -28,7 +28,7 @@ export class DgaDividerUsage {
                 display: 'flex',
                 flexDirection: 'column',
                 gap: '40px',
-            } }, h("dga-divider", { key: '06fdd3ed095a78fac31f02896424425df1523bf3', color: "alpha-white" }), h("dga-divider", { key: 'd93d4821c4e406ba9cf6fb7aa448114e7e653307', color: "white" })), h("div", { key: 'e8a19f9800860c7386daecd31009c0b143c7c6d7', style: {
+            } }, h("dga-divider", { key: '7f3bb282c92259b29bbce48a1a77156d6bbee752', color: "alpha-white" }), h("dga-divider", { key: '612c0f8bf659725d8a6a4893703bbccd3618b530', color: "white" })), h("div", { key: '16baa94bcec06536c8b3699e06c70f226d72dccb', style: {
                 width: '224px',
                 height: '82px',
                 background: '#1B8354',
@@ -36,7 +36,7 @@ export class DgaDividerUsage {
                 display: 'flex',
                 // flexDirection: 'column',
                 gap: '40px',
-            } }, h("dga-divider", { key: '686f895b8ce2c572323b4a195dd102464937393c', color: "alpha-white", orientation: 'vertical' }), h("dga-divider", { key: 'ba489f24cfbad7c137e9dded6ff2b93ca1994483', color: "white", orientation: 'vertical' })))), h("div", { key: '5a8b7657ff3be51a7dcb7168886b76df83b176a1', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }))));
+            } }, h("dga-divider", { key: 'a2ddca2b5403fbf24f9f08e75f7aa38ed2528d1c', color: "alpha-white", orientation: 'vertical' }), h("dga-divider", { key: '1f928598988acdc734fed4da4cb808a857d1258f', color: "white", orientation: 'vertical' })))), h("div", { key: '895f06dc283a53010fc59b00158585062aca0b82', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }))));
     }
     static get is() { return "dga-divider-usage"; }
 }

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

@@ -265,12 +265,12 @@ export class DgaDrawerUsage {
         this.open = false;
     }
     render() {
-        return (h("div", { key: 'dd17d1c2f4b0fbcf840aba4251a75a655a43b424' }, h("h1", { key: '489db136174a5bb4c055a6a269e1cc8ea39c982f' }, "Drawer Example"), h("div", { key: '7226158be1401d338bb19dad1291f743e92377c1', style: { padding: '0px', display: 'flex', gap: '20px' } }, h("div", { key: '84c9e88294c041bda33f10fdb1d7ce74822cf187', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }, h("div", { key: 'c23e07f90a4348b47c924ed6ac2949112efb5a16', style: { display: "flex", justifyContent: "center", width: "100vw" } }, h("button", { key: '49988258a15f9715cf98b52baf1fab21acc0dd4e', onClick: () => this.open = true }, "open"), h("button", { key: 'ca3790095824761945782a6a29af992abbf9878e', onClick: () => this.open = false }, "close")), h("dga-drawer", { key: '5b948e4b44af81e8501d76d974773b56eef0d079', routes: SidePanelRoutes, open: this.open, background: 'gray', headerLogo: "https://casamedia.com/wp-content/uploads/2023/04/adidas-1024x683.png", sx: {
+        return (h("div", { key: 'a5d074d2753ac9fc296d4a554db6db8e5cf72b43' }, h("h1", { key: '254ad4bdf4e3cd53a9da3d940c06fab5cda43ec4' }, "Drawer Example"), h("div", { key: '99f0b246c03eb4e88cf57b6a51995211485c0ec5', style: { padding: '0px', display: 'flex', gap: '20px' } }, h("div", { key: '626ade8402841cfce26a4a3b98c0403900edd726', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }, h("div", { key: '1913594c287a448d86aa38b18305c873606ab506', style: { display: "flex", justifyContent: "center", width: "100vw" } }, h("button", { key: 'f5fdcccc2a07105325da3bd0a295bb167f0ec7d1', onClick: () => this.open = true }, "open"), h("button", { key: 'd2884b8c5970ec2b7c775c947c8f52acf78e1813', onClick: () => this.open = false }, "close")), h("dga-drawer", { key: '60c090dbd4aba2c3c9438b4f39dd776aa5fb3949', routes: SidePanelRoutes, open: this.open, background: 'gray', headerLogo: "https://casamedia.com/wp-content/uploads/2023/04/adidas-1024x683.png", sx: {
                 "& > .sidepanel": {
                     top: "112px",
                     backgroundColor: "red !important",
                 }
-            } })), h("div", { key: '486c90f981afd8c14366cc0f05388b4aa2efc92f', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }))));
+            } })), h("div", { key: 'e67f8aa5760862ae0e05eeb561d7f301b57b16b3', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }))));
     }
     static get is() { return "dga-drawer-usage"; }
     static get states() {

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

@@ -5,7 +5,7 @@ export class DgaDropdownUsage {
         this.selectedValue = 'Option-1';
     }
     render() {
-        return (h("div", { key: '8cf795962ef99ced3d4ab47b2cb0e81268fcc2a6' }, h("h1", { key: 'fa99399ed45bb19c65674b26a5175e3e1d55a7d8' }, "Dropdown Example"), h("div", { key: 'cf2e02be0ba05f91153f6b5adb1a012fcf607ceb', style: { padding: '50px', display: 'flex', gap: '20px' } }, h("div", { key: '0d0618200046653502fdfa62099b7b5d981833f7', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }, h("dga-dropdown", { key: '40ef0b84920469a189c2ef46f327a4ec8f442534', placeholder: "Placeholder text", variant: "default", optionLabel: "label", trackBy: "value", value: this.selectedValue, options: [
+        return (h("div", { key: '0a6b57e348ddc9ce5a0964865d5d2af5603f0cb8' }, h("h1", { key: 'df207a773226becdc93f531f2b1499fa61566af4' }, "Dropdown Example"), h("div", { key: '00d703c374e5b3727dc5cfaa984984d3f23917b5', style: { padding: '50px', display: 'flex', gap: '20px' } }, h("div", { key: '8e257d0f1e1ee8b6522d231f54a9b6abf9151931', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }, h("dga-dropdown", { key: '53fc7829cf7bccc4013cf8110ba6a9c2441ff848', placeholder: "Placeholder text", variant: "default", optionLabel: "label", trackBy: "value", value: this.selectedValue, options: [
                 {
                     label: 'Netherlands Antiles',
                     value: 'Option-1',
@@ -18,7 +18,7 @@ export class DgaDropdownUsage {
                     label: 'Option 3',
                     value: 'Option-3',
                 },
-            ], onChange: (value) => this.selectedValue = value }), this.selectedValue, h("dga-dropdown", { key: '4713a4e538b20f02ea07edaa5a3d0f1dd41a6497', placeholder: "Placeholder text", variant: "darker", optionLabel: "label", trackBy: "value", options: [
+            ], onChange: (value) => this.selectedValue = value }), this.selectedValue, h("dga-dropdown", { key: 'e12ad71e46991a1adc6bc48c9f7e9016f9802dba', placeholder: "Placeholder text", variant: "darker", optionLabel: "label", trackBy: "value", options: [
                 {
                     label: 'Option',
                     value: 'Option',
@@ -35,7 +35,7 @@ export class DgaDropdownUsage {
                     label: 'Option',
                     value: 'Option',
                 },
-            ] }), h("dga-dropdown", { key: 'f8d420d5e90fbb5c08ca9eb06699221d9582e404', placeholder: "Placeholder text", variant: "lighter", optionLabel: "label", trackBy: "value", options: [
+            ] }), h("dga-dropdown", { key: '6b25aa37571846e3a9eab024d8210714908c3a77', placeholder: "Placeholder text", variant: "lighter", optionLabel: "label", trackBy: "value", options: [
                 {
                     label: 'Option',
                     value: 'Option',
@@ -52,7 +52,7 @@ export class DgaDropdownUsage {
                     label: 'Option',
                     value: 'Option',
                 },
-            ] }), h("dga-dropdown", { key: '8f98629301e371dd8d007d5077634bd256bb1561', error: true, placeholder: "Placeholder text", variant: "lighter", optionLabel: "label", trackBy: "value", options: [
+            ] }), h("dga-dropdown", { key: '1504cdf3f7aeb48c285c00c9515c1881f3f42bfe', error: true, placeholder: "Placeholder text", variant: "lighter", optionLabel: "label", trackBy: "value", options: [
                 {
                     label: 'Option',
                     value: 'Option',
@@ -86,7 +86,7 @@ export class DgaDropdownUsage {
                     label: 'Option',
                     value: 'Option',
                 },
-            ] }))), h("dga-dropdown", { key: '70110c95a87fe801a7b0c24e55a7a6109482c0f7', multiSelect: true, placeholder: "Placeholder text", variant: "lighter", optionLabel: "label", trackBy: "value", options: [
+            ] }))), h("dga-dropdown", { key: '9eec2e8183875e424ebf805cd27b675ecbb6d99b', multiSelect: true, placeholder: "Placeholder text", variant: "lighter", optionLabel: "label", trackBy: "value", options: [
                 {
                     label: 'Option',
                     value: 'Option',
@@ -103,7 +103,7 @@ export class DgaDropdownUsage {
                     label: 'Option',
                     value: 'Option',
                 },
-            ] })), h("div", { key: '14464d3baebd1591fa732189a928c5a346fe971c', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }))));
+            ] })), h("div", { key: '7447713413d02ad8b39ed86c303c59ed5def5648', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }))));
     }
     static get is() { return "dga-dropdown-usage"; }
     static get states() {

package/dist/collection/usage/dga-featured-icon-usage.js

@@ -6,7 +6,7 @@ export class DgaFeaturedIconUsage {
         this.value = '';
     }
     render() {
-        return (h("div", { key: 'b15376ec1111dfb36f25cfba601f7fc5a0290f18' }, h("h1", { key: 'bb591db58fb1a7f190cc9290269bd052be646eba' }, "Featured Icon Example"), h("div", { key: '6546ed7682748d575f39aa71c2c87db019b8df08', style: { padding: '50px', display: 'flex', flexDirection: 'column', gap: '16px' } }, h("div", { key: 'b525ff60bf3993539e6f949284d5b7c537e22338', style: { display: 'flex', flexDirection: 'row', gap: '16px' } }, [
+        return (h("div", { key: '8f99bb0303e2c2551a442423cd41865ca036322c' }, h("h1", { key: '3d78a8748cabea651c5eb4d8a3a60be7bb6c0be0' }, "Featured Icon Example"), h("div", { key: '40c78de951ae26588d0949d6f65a371af3ec4b44', style: { padding: '50px', display: 'flex', flexDirection: 'column', gap: '16px' } }, h("div", { key: '8607f7156fc501a5f23497de23ad51d51aadaf72', style: { display: 'flex', flexDirection: 'row', gap: '16px' } }, [
             {
                 size: 'sm',
                 color: "brand",
@@ -31,7 +31,7 @@ export class DgaFeaturedIconUsage {
                 name: 'add-circle',
                 variant: 'stroke',
                 type: 'standard',
-            }, size: size, color: color, variant: variant })))), h("div", { key: 'b155c0855936d411ad4c0440ba9902be1b5277c3', style: { display: 'flex', flexDirection: 'row', gap: '16px' } }, [
+            }, size: size, color: color, variant: variant })))), h("div", { key: '33df07cf1e8c54e6f4ae4261953ea2a14ff159d2', style: { display: 'flex', flexDirection: 'row', gap: '16px' } }, [
             {
                 size: 'sm',
                 color: "gray",
@@ -56,7 +56,7 @@ export class DgaFeaturedIconUsage {
                 name: 'add-circle',
                 variant: 'stroke',
                 type: 'standard',
-            }, size: size, color: color, variant: variant })))), h("div", { key: '7c30550e747e1b17c9f441c72ba7d41f8b4e29f0', style: { display: 'flex', flexDirection: 'row', gap: '16px' } }, [
+            }, size: size, color: color, variant: variant })))), h("div", { key: '5d3e4053a75b5ed812d3a0b197aaeb6013faaf62', style: { display: 'flex', flexDirection: 'row', gap: '16px' } }, [
             {
                 size: 'sm',
                 color: "error",
@@ -81,7 +81,7 @@ export class DgaFeaturedIconUsage {
                 name: 'add-circle',
                 variant: 'stroke',
                 type: 'standard',
-            }, size: size, color: color, variant: variant })))), h("div", { key: 'f47a488ff7a4edb23efefd1386f12620b98e4fc4', style: { display: 'flex', flexDirection: 'row', gap: '16px' } }, [
+            }, size: size, color: color, variant: variant })))), h("div", { key: 'a12b4ef056d8ed96e2fab1304a09d43a73cd2bc3', style: { display: 'flex', flexDirection: 'row', gap: '16px' } }, [
             {
                 size: 'sm',
                 color: "warning",
@@ -106,7 +106,7 @@ export class DgaFeaturedIconUsage {
                 name: 'add-circle',
                 variant: 'stroke',
                 type: 'standard',
-            }, size: size, color: color, variant: variant })))), h("div", { key: '4e46df437b7bc1475783765bce7e370d9c299c51', style: { display: 'flex', flexDirection: 'row', gap: '16px' } }, [
+            }, size: size, color: color, variant: variant })))), h("div", { key: 'd9afe165a1c4f7dc719f8a378e2d057396ffcb25', style: { display: 'flex', flexDirection: 'row', gap: '16px' } }, [
             {
                 size: 'sm',
                 color: "success",
@@ -131,7 +131,7 @@ export class DgaFeaturedIconUsage {
                 name: 'add-circle',
                 variant: 'stroke',
                 type: 'standard',
-            }, size: size, color: color, variant: variant })))), h("div", { key: 'f6bb1373ef44ffb8ca8cd5d275e563bc35c7bb5b', style: { display: 'flex', flexDirection: 'row', gap: '16px' } }, [
+            }, size: size, color: color, variant: variant })))), h("div", { key: '3eda661f12ab177b1e635a9245ac4642ce80afcd', style: { display: 'flex', flexDirection: 'row', gap: '16px' } }, [
             {
                 size: 'sm',
                 color: "info",

package/dist/collection/usage/dga-feedback-icon-usage.js

@@ -4,7 +4,7 @@ export class DgaFeedbackIconUsage {
         this.value = 'test';
     }
     render() {
-        return (h("div", { key: 'a97f579d7a0f149a831d2ba568271827c24ed6b4' }, h("h1", { key: 'ddee0d4030afb80e719f22ae743fac8b8ca83634' }, "Search Box Example"), h("div", { key: '6ef9826b793218d8a4cb849fea68a8f212d2510b', style: { padding: '50px' } }, h("div", { key: 'cb25dd4a104d7de45c786db9211ec0902c3d4b93', style: { display: "flex", flexDirection: "column", gap: "16px" } }))));
+        return (h("div", { key: 'da3e697e41da5f309ad9100dab98c2f0f82ea867' }, h("h1", { key: 'a960e8deb25b7ebf0f7ad625f2ba5411dea7bd30' }, "Search Box Example"), h("div", { key: '78ff810f985dc5f68bebec4f45d1534cff900df3', style: { padding: '50px' } }, h("div", { key: '3997f6305366dd9881589994af76c48fd20a3df6', style: { display: "flex", flexDirection: "column", gap: "16px" } }))));
     }
     static get is() { return "dga-feedback-icon-usage"; }
     static get states() {

package/dist/collection/usage/dga-file-upload-usage.js

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 export class DgaFileUploadUsage {
     render() {
-        return (h("div", { key: 'a43f843562422345fb1a082e139049b31f4a8fcf' }, h("h1", { key: 'e47ed2beac2e6044d33295011947c559d5bd5c9a' }, "File Upload Example"), h("div", { key: 'fd8fda40e375e2077005c5b8993ff635917d8807', style: { padding: "50px", display: "flex", gap: "20px" } }, h("div", { key: 'f6abafb3cf0c7c318f365b5ab01265515e973816', style: { display: "flex", flexDirection: "column", gap: "20px" } }, h("dga-file-upload", { key: 'd383af4f712162bee52da03ab55a600d56d07ceb' })), h("div", { key: '07aa0e61d6983cbcb1451bbe286eb0460a638f3b', style: { display: "flex", flexDirection: "column", gap: "20px" } }))));
+        return (h("div", { key: '8d844034a8a1119e086c1c79917dee196a05c9de' }, h("h1", { key: 'f04893452fcbb4301ae1692d12aa249aec01fa8f' }, "File Upload Example"), h("div", { key: '0e2546b42b8abe6698a778904106fc9344a4c499', style: { padding: "50px", display: "flex", gap: "20px" } }, h("div", { key: 'f0555b930f9541243c0dc06947ca648543420b28', style: { display: "flex", flexDirection: "column", gap: "20px" } }, h("dga-file-upload", { key: '60de6291a200bef5ef1c1024c12560efe113f7cf' })), h("div", { key: 'd5eff3e21f23dd1afeadae2bdcf5f0babe3548c7', style: { display: "flex", flexDirection: "column", gap: "20px" } }))));
     }
     static get is() { return "dga-file-upload-usage"; }
 }

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

@@ -116,7 +116,7 @@ export class DgaFilterationUsage {
         };
     }
     render() {
-        return (h("div", { key: 'f636689b13e38714ca717cdb51f6995ce005594e', class: "filteration-usage" }, h("h2", { key: '880a608c0ff2ac94b6f49cdb7020e961c34bda2e' }, "Filteration Component Examples"), h("div", { key: 'da5f4d0710129ece96d0d025a7216389fd12625c', class: "filteration-container", style: { margin: '20px 0' } }, h("h3", { key: 'e393c0ac46c0ea079060727405a9d5a45a60d5f4' }, "Default Filteration"), h("dga-filteration", { key: 'b9a042d108214a64e22468575e59214b57f98f92', buttonLabel: "Filter Items", filterBlocks: this.filterBlocks, onOnFilterChange: this.handleFilterChange, initvalue: this.initialValue }))));
+        return (h("div", { key: '1be9e286df8f39bb67ccd56c69df6513ae612080', class: "filteration-usage" }, h("h2", { key: '207eb4860764573e884d6fde030ba3a5dd1f54e7' }, "Filteration Component Examples"), h("div", { key: 'aa1ddd3513f7dd50435de12b5d7d6a0f6b414189', class: "filteration-container", style: { margin: '20px 0' } }, h("h3", { key: '27149ea4108ec601711af43a5c5b573807e30f26' }, "Default Filteration"), h("dga-filteration", { key: 'abbe37f861ae3d44ccca01470d2d11980d444c6d', buttonLabel: "Filter Items", filterBlocks: this.filterBlocks, onOnFilterChange: this.handleFilterChange, initvalue: this.initialValue }))));
     }
     static get is() { return "dga-filteration-usage"; }
     static get states() {

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

@@ -1,11 +1,11 @@
 import { h } from "@stencil/core";
 export class DgaButtonUsage {
     render() {
-        return (h("div", { key: '0e1b4417263b5e8045507ac093b60a45a610c3a4', style: {
+        return (h("div", { key: '2e3f91ead6798c6f522b85585026ebe30260a477', style: {
                 margin: "10px"
-            } }, h("floating-button", { key: '15c5dc3b6b720b50c140b0525d6309c442553814', variant: "secondary-solid" }), h("div", { key: '8002da24c43d975d2e053ab46cea0b714a12625c', style: {
+            } }, h("floating-button", { key: '0617cf8adc46c27663dd5ad0564f285b0b92b4ae', variant: "secondary-solid" }), h("div", { key: '42979b16af8b296262f40198e7960e6e05172333', style: {
                 marginTop: "10px",
-            } }, h("floating-button", { key: '0c547f379aa77e01e29a91d586bf0aa4480b9882', variant: "primary-neutral", iconOnly: true }))));
+            } }, h("floating-button", { key: 'ec8ac68dfc1707e29a05928c5fba231b377f9b28', variant: "primary-neutral", iconOnly: true }))));
     }
     static get is() { return "dga-floating-button-usage"; }
 }

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

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 export class DgaFooterUsage {
     render() {
-        return (h("div", { key: '9f688a6dcb0695df17ef2a16dc32eb42b2d23988' }, h("h1", { key: '88b1ab19220a07b4e97a933f5e6e5c1ec398b699' }, "Footer Example Dark Green Mode"), h("dga-footer", { key: 'f59573584965fb787721f767d36a0fbb20a80cd3', background: "DarkGreen", NavLinks: true, groupLinks: [
+        return (h("div", { key: '4312d5f97243062de9ac182e538ea708709e321f' }, h("h1", { key: 'ba5babe6cbe22b435140fab5cfe838c632e5026b' }, "Footer Example Dark Green Mode"), h("dga-footer", { key: 'b92abb588121ba6b4e0119863098ecc1d64d6945', background: "DarkGreen", NavLinks: true, groupLinks: [
                 {
                     title: 'Government Services',
                     links: [
@@ -76,7 +76,7 @@ export class DgaFooterUsage {
                 { name: 'Privacy Policy', target: '/privacy' },
                 { name: 'Cookie Policy', target: '/cookies' },
                 { name: 'Accessibility Statement', target: '/accessibility' },
-            ], bottomImages: ['https://dga-nds-fbhtx.ondigitalocean.app/mobile-logo.svg', 'https://dga-nds-fbhtx.ondigitalocean.app/mobile-logo.svg'] }), h("h1", { key: 'ad63806e62730eb709336827496992491e411b73', style: { padding: '40px', color: 'red' } }, " Footer Example Light Mode"), h("dga-footer", { key: '5d9cfc9463a919c07f1208096231fdf06a633746', background: "Light", NavLinks: true, groupLinks: [
+            ], bottomImages: ['https://dga-nds-fbhtx.ondigitalocean.app/mobile-logo.svg', 'https://dga-nds-fbhtx.ondigitalocean.app/mobile-logo.svg'] }), h("h1", { key: 'b259cb5692c841d539b5d3869e4d917ddcb77c87', style: { padding: '40px', color: 'red' } }, " Footer Example Light Mode"), h("dga-footer", { key: 'cefe330943ea59479a8d49992c41db7b1b0d4e21', background: "Light", NavLinks: true, groupLinks: [
                 {
                     title: 'Group Label',
                     links: [
@@ -186,7 +186,7 @@ export class DgaFooterUsage {
                     name: 'Privacy Policy',
                     target: '#',
                 },
-            ] }), h("h1", { key: '9e3ddeb7977f126809e8e5922083da1ce2ad73b0', style: { padding: '40px', color: 'red' } }, "End Footer Example Here Zoz")));
+            ] }), h("h1", { key: '4aeb75cbbfdcaf70f373fc7e5fa341473cbfd364', style: { padding: '40px', color: 'red' } }, "End Footer Example Here Zoz")));
     }
     static get is() { return "dga-footer-usage"; }
 }

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

@@ -131,11 +131,11 @@
 import { h } from "@stencil/core";
 export class DgaGridUsage {
     render() {
-        return (h("div", { key: '94646bafd8dbd3b99404b29a4de3bede1c19168f', class: "flexible-gap-usage", style: {
+        return (h("div", { key: '6f451f67fb4853d2c8785c09f34668e7a5280f98', class: "flexible-gap-usage", style: {
                 display: 'flex',
                 flexDirection: 'column',
                 gap: '20px',
-            } }, h("h2", { key: '90c0a524c1b5a10dc7f2665fe5bd1d5165a32207' }, "Grid Component with Flexible Gap Examples"), h("section", { key: 'ebc25fad500a3efedfa1e2f8a03a91c9fe083942' }, h("h3", { key: '2ef006de7fbd09969f76affcb18bb989b86bac03' }, "Simple String Gap"), h("dga-grid-container", { key: '2210167759a132d278f262317a7d46ec0977c56b', gap: "16px" }, h("dga-grid-item", { key: '984f3ce961141b6452a235f018c80fbc8ca89eae', xs: 12, sm: 6, md: 4 }, h("div", { key: '5e697d9f61e061d3b613ea14a6ebaf0cebae120f', class: "demo-content" }, "16px gap between all items")), h("dga-grid-item", { key: 'ec40e7618d67dc307d783cdd9e222a3387377f11', xs: 12, sm: 6, md: 4 }, h("div", { key: '8cae811db9208553d21cb5e75c7dcdcade6f85c1', class: "demo-content" }, "16px gap between all items")), h("dga-grid-item", { key: 'eebbd20c22ebc53d4611038d8022f5bb6c9ed0bd', xs: 12, sm: 6, md: 4 }, h("div", { key: '25ccb9cd35a807413583a0828a96230826799ecf', class: "demo-content" }, "16px gap between all items")), h("dga-grid-item", { key: '86fe2d482cebba3c4bfd59129edb1f3305cd4ee7', xs: 12, sm: 6 }, h("div", { key: 'a274d249a91ea7d80744ffaaca744e1babd450be', class: "demo-content" }, "16px gap between all items")), h("dga-grid-item", { key: 'a091f337f2a6998c33583fe5921e7a02f8c6e99f', xs: 12, sm: 6 }, h("div", { key: '77704b57c94beea9547c72be23d73c9c8eee2486', class: "demo-content" }, "16px gap between all items")), h("dga-grid-item", { key: '3b8d8d2d3a25da0259ff93c766ccd700e29ef020', xs: 12 }, h("div", { key: '38466fe1565c2b9719b9622be9918aeb00944d38', class: "demo-content" }, "16px gap between all items"))))));
+            } }, h("h2", { key: 'ca14e1fac659cd63223d2533af5e45c67a32a71a' }, "Grid Component with Flexible Gap Examples"), h("section", { key: '06ab77105c63da0422c0fca8313149d1d68e6773' }, h("h3", { key: '9622f7a9d5a37b1a7d2106d68368847b3b6f8ac1' }, "Simple String Gap"), h("dga-grid-container", { key: 'd9a1717a94a4523cd88a9d8b8289cdaf66a8ca23', gap: "16px" }, h("dga-grid-item", { key: 'd3d2081186a3d3809fcf210c5c0d5606f7f5d93d', xs: 12, sm: 6, md: 4 }, h("div", { key: '8dabea1575d4fb6ef4be5e33ce030132316739a6', class: "demo-content" }, "16px gap between all items")), h("dga-grid-item", { key: 'e3497bf25aa52b003ca6ae0d7309d71420e94b8d', xs: 12, sm: 6, md: 4 }, h("div", { key: 'b843487ccbe7e2cdc82ee61ce776a2715b60dd03', class: "demo-content" }, "16px gap between all items")), h("dga-grid-item", { key: '91bbbe993b7f8b482b8ed13dc779079fb9ffb49f', xs: 12, sm: 6, md: 4 }, h("div", { key: '937dd468e17f2e36da18768613199d4ea05bb083', class: "demo-content" }, "16px gap between all items")), h("dga-grid-item", { key: 'd51f3c30b52505b27be7dd59dd8210485a41e63d', xs: 12, sm: 6 }, h("div", { key: 'aea366da1bbb4eadd84e6dfca0f04c7b7b54bba2', class: "demo-content" }, "16px gap between all items")), h("dga-grid-item", { key: '331681e46175617c89adbcabf252bb29aefd8f35', xs: 12, sm: 6 }, h("div", { key: '7d5518f17374f7080070665b56593f9446376fd3', class: "demo-content" }, "16px gap between all items")), h("dga-grid-item", { key: '26672161c75e8bf12c70b7b5c65ae335d1659c74', xs: 12 }, h("div", { key: '7b22c99ff38e46449f28d3e60fee89263b6ea5e7', class: "demo-content" }, "16px gap between all items"))))));
     }
     static get is() { return "dga-grid-usage"; }
     static get originalStyleUrls() {

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

@@ -266,45 +266,45 @@ export class DgaHeaderUsage {
         this.open = false;
     }
     render() {
-        return (h(Fragment, { key: 'ca095d248e5576a9385d64f23f3a7d021b54bc5c' }, h("dga-second-nav-header", { key: '0afa653407b278704d87d0b45404f6dd6fc848e9', hideDivider: true }, h("dga-second-nav-header-actions", { key: '5c497c60eff87cf62c69c63b85b8a636fb8e5eb1' }, h("dga-button-v2", { key: 'e567fb4e18bf8705f7477d03106a1e03e45907cf', label: "Button", variant: "transparent", size: "sm", iconOnly: true, leadIcon: true, leadIconProps: {
+        return (h(Fragment, { key: 'e3385db4cc7c904776685fcfab96e91c156e3a1e' }, h("dga-second-nav-header", { key: '0598782007ec678bb08d9036837935bfcc42105d', hideDivider: true }, h("dga-second-nav-header-actions", { key: '51aae57faf7e9ec1ad21cbb4647223cdb0fd1e52' }, h("dga-button-v2", { key: '7ae90fb38f4ef09c3b447527b85022e1fe3367dc', label: "Button", variant: "transparent", size: "sm", iconOnly: true, leadIcon: true, leadIconProps: {
                 name: 'mic-01',
                 type: 'rounded',
                 variant: 'stroke',
                 color: '#FFFFFF',
-            } }), h("dga-button-v2", { key: '25de5226b21320688dd53f2be35703ad7d71b568', label: "Button", variant: "transparent", size: "sm", iconOnly: true, leadIcon: true, leadIconProps: {
+            } }), h("dga-button-v2", { key: '0efab41a2ba396c1aad28422af66724e1f1056ee', label: "Button", variant: "transparent", size: "sm", iconOnly: true, leadIcon: true, leadIconProps: {
                 name: 'zoom-in-area',
                 type: 'rounded',
                 variant: 'stroke',
                 color: '#FFFFFF',
-            } }), h("dga-button-v2", { key: '419f4dffab6fab6db8ce4a994be01d3a3ae9584b', label: "Button", variant: "transparent", size: "sm", iconOnly: true, leadIcon: true, leadIconProps: {
+            } }), h("dga-button-v2", { key: '6b6a520dbbf662ce64488e6a84c600cd162d63b2', label: "Button", variant: "transparent", size: "sm", iconOnly: true, leadIcon: true, leadIconProps: {
                 name: 'zoom-out-area',
                 type: 'rounded',
                 variant: 'stroke',
                 color: '#FFFFFF',
-            } }), h("dga-button-v2", { key: '860f5d49fc593223d36977ef142fd3546ae9f306', label: "Button", variant: "transparent", size: "sm", iconOnly: true, leadIcon: true, leadIconProps: {
+            } }), h("dga-button-v2", { key: '5708bd6889c7235a0acdde0eb5a6b01731fd8d5b', label: "Button", variant: "transparent", size: "sm", iconOnly: true, leadIcon: true, leadIconProps: {
                 name: 'view',
                 type: 'rounded',
                 variant: 'stroke',
                 color: '#FFFFFF',
-            } })), h("dga-second-nav-header-content", { key: 'cc9897a95dc8543a5ab6908958eade209011c7a1' }, h("dga-second-nav-header-item", { key: '073a82e23d1c54c32e75861875bb9b18edd3b21c', label: "Cloudy" }, h("dga-icon", { key: '06ca725d112d2b1a167e56dc97bc6ba95c4ab564', icon: "cloud", variant: "stroke", type: "rounded" })), h("dga-second-nav-header-item", { key: '59b5939f7520e0c89e13d1b7eea7d517e5ce47d3', label: "21 Jan 2024" }, h("dga-icon", { key: 'ee424bc538bfb6da7538b3e8e2d0c9420851b24e', icon: "calendar-04", variant: "stroke", type: "rounded" })))), h("dga-nav-header", { key: '39b39a9a558b93f8696c5382c9ca6317e8168c25', fullWidth: true, divider: true, sticky: true }, h("dga-nav-header-main", { key: 'fe469bc35bfae3fa15cef5a5b6f9ece742263e17', collapsed: this.collapsed, onToggleCollapsed: e => {
+            } })), h("dga-second-nav-header-content", { key: '650f1a363989398ff319599e8988fc219964ffc6' }, h("dga-second-nav-header-item", { key: '5100b1b03956721fc95c0bbac5875a075bd8f3f1', label: "Cloudy" }, h("dga-icon", { key: 'b01c16c4ad9d22e80c7f867cd4cd71d3cf722273', icon: "cloud", variant: "stroke", type: "rounded" })), h("dga-second-nav-header-item", { key: '3f21cf7ca74150e32cbe47a6e5277656c062e351', label: "21 Jan 2024" }, h("dga-icon", { key: '2638a776bce033e70173d61d7ffc33ae9b29dfcf', icon: "calendar-04", variant: "stroke", type: "rounded" })))), h("dga-nav-header", { key: 'd54c9f5a169b99a4a1b5e62c02b87580380375e1', fullWidth: true, divider: true, sticky: true }, h("dga-nav-header-main", { key: 'd9d15d943203013173ebfc015d01aa2fd68f6df3', collapsed: this.collapsed, onToggleCollapsed: e => {
                 this.collapsed = e.detail;
                 console.log('collapsed', e.detail);
-            } }, h("dga-button", { key: 'eb22c38ffb83455ba6cde70b3942cc1696f95457', iconOnly: true, leadIcon: true, leadIconType: this.collapsed ? 'cancel01' : 'menu01', leadIconProps: {
+            } }, h("dga-button", { key: '8382f833a92acb7055fca65144bb89149cd54b23', iconOnly: true, leadIcon: true, leadIconType: this.collapsed ? 'cancel01' : 'menu01', leadIconProps: {
                 name: this.collapsed ? 'menu01' : 'cancel01',
                 size: 24,
                 variant: 'stroke',
                 type: 'rounded',
             }, variant: "transparent", onClick: () => (this.collapsed = !this.collapsed), class: "header-menu__btn", sx: {
                 display: { xs: 'block', md: 'none' },
-            } }), h("dga-nav-header-logos", { key: 'f38e72d4cae3e3b436deaa5ac8a58c27d52a99eb', logoSrc: "https://dga-nds-fbhtx.ondigitalocean.app/mobile-logo.svg", govSrc: "https://dga-nds-fbhtx.ondigitalocean.app/mobile-logo.svg", logoLink: "#", govLink: "#" }), h("dga-nav-header-menu", { key: '3439d83cda19a0f418ae9bbb739af93f29d26bd1' }, h("dga-nav-header-link", { key: 'a8722c299b74e2457838bd2488e73153886e5c6d', label: "Item 1", icon: "arrow-down-01", active: this.activeLink === 'link-1', subMenuBackground: "white", onClick: () => {
+            } }), h("dga-nav-header-logos", { key: '4e1d81eef2746d1c1a3f55fcb72d1dc145b9ef44', logoSrc: "https://dga-nds-fbhtx.ondigitalocean.app/mobile-logo.svg", govSrc: "https://dga-nds-fbhtx.ondigitalocean.app/mobile-logo.svg", logoLink: "#", govLink: "#" }), h("dga-nav-header-menu", { key: 'cf21218b457653a86f50cf68540667b135edf1aa' }, h("dga-nav-header-link", { key: '4d41605ab1a72d636110a86715655a17fc5768b7', label: "Item 1", icon: "arrow-down-01", active: this.activeLink === 'link-1', subMenuBackground: "white", onClick: () => {
                 this.activeLink = 'link-1';
-            } }, h("dga-nav-header-sub-menu", { key: '2b787b54c0457fc3af0b8e49da6843adec25a41a', "sub-menu-full-width": true, background: 'white' }, h("dga-nav-header-sub-menu-column", { key: '104c9775f19dfda988ce5d541aa4a3ea9c1d8c7b', label: "Group Label" }, h("dga-nav-header-sub-menu-link", { key: '5e2fae54c3dea16e5c7550b1069c04632a0ae2ba', label: "Submenu Link", link: "#", icon: "document", helperText: "This is a description" }), h("dga-nav-header-sub-menu-link", { key: '759a8383b8ebe753056dfb360ff37d1cc946a0a4', label: "Submenu Link", link: "#", icon: "document", helperText: "This is a description" })), h("dga-nav-header-sub-menu-column", { key: '64bc74cae9c909cb0d8e293771a0a3886be2c6d8', label: "Group Label" }, h("dga-nav-header-sub-menu-link", { key: '086de61786723237772cf528764bed14db5c624c', label: "Submenu Link", link: "#", icon: "document", helperText: "This is a description" }), h("dga-nav-header-sub-menu-link", { key: '9f4bc3dfbdf4c0bbd48b6a393b83268e48befd5f', label: "Submenu Link", link: "#", icon: "document", helperText: "This is a description" })), h("dga-nav-header-sub-menu-column", { key: '11eeb4a75cb0db93957836b984e03d5911196322', label: "Group Label" }, h("dga-nav-header-sub-menu-link", { key: '53b79cb22e4b1dad10652f6b156a93095bdb70d6', label: "Submenu Link", link: "#", icon: "document", helperText: "This is a description" }), h("dga-nav-header-sub-menu-link", { key: 'a8fe2056111b9c6003ad7649072b41672fd86a64', label: "Submenu Link", link: "#", icon: "document", helperText: "This is a description" })), h("dga-nav-header-sub-menu-column", { key: '672df772a6c4153bd4896164a7a1669be3a65691', label: "Group Label" }, h("dga-nav-header-sub-menu-link", { key: '48cf1385a19224520a71cda151bda56167ea1d8c', label: "Submenu Link", link: "#", icon: "document", helperText: "This is a description" }), h("dga-nav-header-sub-menu-link", { key: '1fef442be555b3648b2d6bf8a13f746632f74882', label: "Submenu Link", link: "#", icon: "document", helperText: "This is a description" })))), h("dga-nav-header-link", { key: '4e36b092108d9ec3bb12b7c38b152abaea185031', label: "Item  2", icon: "arrow-down-01", active: this.activeLink === 'link-2', subMenuBackground: "white", subMenuFullWidth: true, onClick: () => {
+            } }, h("dga-nav-header-sub-menu", { key: 'f5bfdd619a8c37e5a62c5d3c18459e60fbc92ee3', "sub-menu-full-width": true, background: 'white' }, h("dga-nav-header-sub-menu-column", { key: '0e6510cf1164c6e075c83416f201080de54467fc', label: "Group Label" }, h("dga-nav-header-sub-menu-link", { key: 'fac5b53ebee03ba20ba7fe8413c56b9080e51d4d', label: "Submenu Link", link: "#", icon: "document", helperText: "This is a description" }), h("dga-nav-header-sub-menu-link", { key: 'f090b6d14d69d2e7a6875934ccbae22847fdd975', label: "Submenu Link", link: "#", icon: "document", helperText: "This is a description" })), h("dga-nav-header-sub-menu-column", { key: 'fff415016384a2f393345be222b9e302635a9384', label: "Group Label" }, h("dga-nav-header-sub-menu-link", { key: '3109a500a78f7e23f60dec269e4565058b93d7be', label: "Submenu Link", link: "#", icon: "document", helperText: "This is a description" }), h("dga-nav-header-sub-menu-link", { key: 'dd8707d4183a2fd6011d0c7d8d5981337b60e443', label: "Submenu Link", link: "#", icon: "document", helperText: "This is a description" })), h("dga-nav-header-sub-menu-column", { key: 'd890390ba6e09789f4b67acbc3124a8af7a65fb7', label: "Group Label" }, h("dga-nav-header-sub-menu-link", { key: 'c7f9afa1d6928484841f5f6916196370dfd346de', label: "Submenu Link", link: "#", icon: "document", helperText: "This is a description" }), h("dga-nav-header-sub-menu-link", { key: 'c69f4df3fc6f80c814519a4c496587e9e0628cc2', label: "Submenu Link", link: "#", icon: "document", helperText: "This is a description" })), h("dga-nav-header-sub-menu-column", { key: '0c132794b61081832d3ad63926ef544bc9e47847', label: "Group Label" }, h("dga-nav-header-sub-menu-link", { key: 'ec115f26bfaa3e834a567b88befa169a22437192', label: "Submenu Link", link: "#", icon: "document", helperText: "This is a description" }), h("dga-nav-header-sub-menu-link", { key: '7d0ea811f004361fd2d9af63fc6954b852a00e1c', label: "Submenu Link", link: "#", icon: "document", helperText: "This is a description" })))), h("dga-nav-header-link", { key: '89fcb9b199aa0794760ac49dbc4f917cad298a01', label: "Item  2", icon: "arrow-down-01", active: this.activeLink === 'link-2', subMenuBackground: "white", subMenuFullWidth: true, onClick: () => {
                 this.activeLink = 'link-2';
-            } }, h("dga-nav-header-sub-menu", { key: '890a8cf8bca52e510d8b071d24055796ee2f49b4', "sub-menu-full-width": true, background: 'white' }, h("dga-nav-header-sub-menu-column", { key: '434e824f0af90a727ab63a6cd98d9ed4f1b84440', label: "Group Label" }, h("dga-nav-header-sub-menu-link", { key: 'd5fe605c34ca64269f424f45c0a367c88e00f366', label: "Submenu Link", link: "#", icon: "document", helperText: "This is a description" }), h("dga-nav-header-sub-menu-link", { key: '67108cf8b4f8345d4dd264cea8e072febcee11b2', label: "Submenu Link", link: "#", icon: "document", helperText: "This is a description" })), h("dga-nav-header-sub-menu-column", { key: 'de680071bbeee4625df98c6b3c1e47c18811188d', label: "Group Label" }, h("dga-nav-header-sub-menu-link", { key: 'ce9a9e0126de448191695612d05d2dc95a27ae46', label: "Submenu Link", link: "#", icon: "document", helperText: "This is a description" }), h("dga-nav-header-sub-menu-link", { key: '210190d91e41ad9c773ba45f9358b347de625aef', label: "Submenu Link", link: "#", icon: "document", helperText: "This is a description" })))), h("dga-nav-header-link", { key: '56c9c4822b93d489c17ccf88d5175ba2cb3cde7a', label: "Item  3", icon: "arrow-down-01", active: this.activeLink === 'link-3', subMenuBackground: "white", subMenuFullWidth: true, onClick: () => {
+            } }, h("dga-nav-header-sub-menu", { key: '3cc24da9456a9d37c805036e8411c08a9a4f9a9b', "sub-menu-full-width": true, background: 'white' }, h("dga-nav-header-sub-menu-column", { key: 'a7677e76f9685333c86fef2e861e0c8a2d509af2', label: "Group Label" }, h("dga-nav-header-sub-menu-link", { key: '0431f2d3072bf58d330e3893705fab20c9681edb', label: "Submenu Link", link: "#", icon: "document", helperText: "This is a description" }), h("dga-nav-header-sub-menu-link", { key: 'a7b34df862e633420b5de229988f6b05f03912e8', label: "Submenu Link", link: "#", icon: "document", helperText: "This is a description" })), h("dga-nav-header-sub-menu-column", { key: '73d8c75b2473a22aefa946a0845e19915a843b7f', label: "Group Label" }, h("dga-nav-header-sub-menu-link", { key: 'f615e9dbbf06b4ec27aef011e2bea1399769cd05', label: "Submenu Link", link: "#", icon: "document", helperText: "This is a description" }), h("dga-nav-header-sub-menu-link", { key: 'e137066a8af0a584883ed75ddc3719e072215d43', label: "Submenu Link", link: "#", icon: "document", helperText: "This is a description" })))), h("dga-nav-header-link", { key: '51d898d51e795f5b7cba88d109d117c7d63b3767', label: "Item  3", icon: "arrow-down-01", active: this.activeLink === 'link-3', subMenuBackground: "white", subMenuFullWidth: true, onClick: () => {
                 this.activeLink = 'link-3';
-            } }), h("dga-nav-header-link", { key: 'dd5d86bc25abd4510fcd52473ee704fcd2bfd4a4', label: "Item  4", icon: "arrow-down-01", active: this.activeLink === 'link-4', subMenuBackground: "white", subMenuFullWidth: true, onClick: () => {
+            } }), h("dga-nav-header-link", { key: '6d9fbf3f411afe0d918856da9bd066f75befc066', label: "Item  4", icon: "arrow-down-01", active: this.activeLink === 'link-4', subMenuBackground: "white", subMenuFullWidth: true, onClick: () => {
                 this.activeLink = 'link-4';
-            } }, h("dga-nav-header-sub-menu", { key: '8ce63021bec5b1cb2a4bdd18ce27503f9e0a8f96', "sub-menu-full-width": true, background: 'white' }, h("dga-nav-header-sub-menu-column", { key: '3c24c825c93cda5f098a7bd346dcbf5b71511807', label: "Group Label" }, h("dga-nav-header-sub-menu-link", { key: '4f84e37f124880ab5b29bab803d7ba84a034e8ac', label: "Submenu Link", link: "#", icon: "document", helperText: "This is a description" }), h("dga-nav-header-sub-menu-link", { key: '4a1924ae69f924fa0b1a519b3cb7c82105e887a8', label: "Submenu Link", link: "#", icon: "document", helperText: "This is a description" })), h("dga-nav-header-sub-menu-column", { key: '00223959e3cf5260734bfddf8fbb06f63bdf0967', label: "Group Label" }, h("dga-nav-header-sub-menu-link", { key: 'ddd75f9eeeecccd9b9bcfd279154aa9dbe873758', label: "Submenu Link", link: "#", icon: "document", helperText: "This is a description" }), h("dga-nav-header-sub-menu-link", { key: '4d69bc4f3a784f662a80c11c4fc58dadd718b877', label: "Submenu Link", link: "#", icon: "document", helperText: "This is a description" })), h("dga-nav-header-sub-menu-column", { key: 'b7eaac25f19055e9f4bdb0fa4f240978d28d8921', label: "Group Label" }, h("dga-nav-header-sub-menu-link", { key: '511f5359c473c32a0deda75ab9ed8dd3f6e83e99', label: "Submenu Link", link: "#", icon: "document", helperText: "This is a description" }), h("dga-nav-header-sub-menu-link", { key: 'fd91b2ffc2a08a21d695c8a5ecedf2bf8b80a889', label: "Submenu Link", link: "#", icon: "document", helperText: "This is a description" })), h("dga-nav-header-sub-menu-column", { key: 'bf2bcf942d0b47f6f8058e1c0ac4a844bcbcc1a1', label: "Group Label" }, h("dga-nav-header-sub-menu-link", { key: '6bbd79e150755a7bcef937c7f9d9bcff097adfe5', label: "Submenu Link", link: "#", icon: "document", helperText: "This is a description" }), h("dga-nav-header-sub-menu-link", { key: 'ebc0b929582fa0f1bc9ca78e5e2dae14b4e83e1f', label: "Submenu Link", link: "#", icon: "document", helperText: "This is a description" })), h("dga-nav-header-sub-menu-column", { key: '64ff23eb8d7bf3f191dceb1132a4823246e28d10', label: "Group Label" }, h("dga-nav-header-sub-menu-link", { key: '93102b4ce9a6fda7a503271e92318574481bd0df', label: "Submenu Link", link: "#", icon: "document", helperText: "This is a description" }), h("dga-nav-header-sub-menu-link", { key: 'bbb149abb3283a27cf31252c231704869ce37540', label: "Submenu Link", link: "#", icon: "document", helperText: "This is a description" })), h("dga-nav-header-sub-menu-column", { key: '9914be35904a937c63af05ca26bf6f12ab5aba91', label: "Group Label" }, h("dga-nav-header-sub-menu-link", { key: '35ffa31addcf744556d5273e9f8acbfe8ff16028', label: "Submenu Link", link: "#", icon: "document", helperText: "This is a description" }), h("dga-nav-header-sub-menu-link", { key: 'b50896ae86ab2b387a127bfa06f39ecb962623be', label: "Submenu Link", link: "#", icon: "document", helperText: "This is a description" })))))), h("dga-nav-header-actions", { key: '9cac51f0c3a9fe7a8dd8ef1c4fa4be6559e392f8' }, h("dga-header-action-btn", { key: '1d5c63b372b2f55e93201cb5bfa0ca9404bb5d71', label: "Search", icon: "search-01", subMenuBackground: "white" }, h("dga-nav-header-sub-menu", { key: '8c71a6f48f3ff2d59a77325c5441cc7caabaa1af', "sub-menu-full-width": true, background: 'white' }, h("dga-flex", { key: 'd558a7274611f3abf078a343d7eeb417f60c6e6f', spacing: 16 }, h("dga-search-box", { key: '97576b407c497ab3089a9109a19c2b625b6780f9', placeholder: "Search" }), h("dga-button", { key: 'c18d7773669261a357099bb087aeccf93513888e', label: "Search" })))), h("dga-header-action-btn", { key: '8b7c7e7e133e61e0985aa4ff6561abb708aa2ba5', label: "\u0639\u0631\u0628\u064A", icon: "translation" }), h("dga-header-action-btn", { key: 'd7e608adce4550036bc1cad5def613f82d9a897b', label: "Login", icon: "user" })), h("dga-header-mobile-actions", { key: 'c2886649e671af1d7e929b6be83b484f254668ea' }, h("dga-header-menu", { key: '432555a743bca9b76b3549d2213029ef0ec5068f', actions: [
+            } }, h("dga-nav-header-sub-menu", { key: '65a994159637d3719c5c2c34a788322f9863b952', "sub-menu-full-width": true, background: 'white' }, h("dga-nav-header-sub-menu-column", { key: '0dd0c7fae18dc1ffd52d5b922e991b6a91cdff7a', label: "Group Label" }, h("dga-nav-header-sub-menu-link", { key: '94ce61962c68c80f5d97f7686a3752e35efdc311', label: "Submenu Link", link: "#", icon: "document", helperText: "This is a description" }), h("dga-nav-header-sub-menu-link", { key: '9d0c77fe34dfb9224cd52fe309c18b778341c72b', label: "Submenu Link", link: "#", icon: "document", helperText: "This is a description" })), h("dga-nav-header-sub-menu-column", { key: 'ea5e8dc656f00a6f664899e206ff247f15929472', label: "Group Label" }, h("dga-nav-header-sub-menu-link", { key: 'd7b350f040eb0d3111e57d675d6f5c65a34e5c1c', label: "Submenu Link", link: "#", icon: "document", helperText: "This is a description" }), h("dga-nav-header-sub-menu-link", { key: 'd0c92b607cccf0fbedc82a3a492d8eda1a07a6f4', label: "Submenu Link", link: "#", icon: "document", helperText: "This is a description" })), h("dga-nav-header-sub-menu-column", { key: '130d522dbe4b31b8f24ef29d2d01aff0e2f25165', label: "Group Label" }, h("dga-nav-header-sub-menu-link", { key: '618c6ff3c5e3af8377dc488f74409f46fefe90ad', label: "Submenu Link", link: "#", icon: "document", helperText: "This is a description" }), h("dga-nav-header-sub-menu-link", { key: 'a4f333b748d52a1348dc7913643f8c3118735de0', label: "Submenu Link", link: "#", icon: "document", helperText: "This is a description" })), h("dga-nav-header-sub-menu-column", { key: '08426c03a85805f1c968260f330cb6e44e5892b5', label: "Group Label" }, h("dga-nav-header-sub-menu-link", { key: 'a984c6cae3fbd074cce06ed626efc210ad35c049', label: "Submenu Link", link: "#", icon: "document", helperText: "This is a description" }), h("dga-nav-header-sub-menu-link", { key: 'f5b303af0098a57a29a1940d6c2be0521a8e82c5', label: "Submenu Link", link: "#", icon: "document", helperText: "This is a description" })), h("dga-nav-header-sub-menu-column", { key: '98f9c343c219114fbfb5c032383477517711bf30', label: "Group Label" }, h("dga-nav-header-sub-menu-link", { key: 'fae11923ab1e75e444bff600c1218982fa62ee41', label: "Submenu Link", link: "#", icon: "document", helperText: "This is a description" }), h("dga-nav-header-sub-menu-link", { key: '1df0536a0640fc6c16e0d0baa532d67ee74da40f', label: "Submenu Link", link: "#", icon: "document", helperText: "This is a description" })), h("dga-nav-header-sub-menu-column", { key: '7e7e4b5e47751843adb4c80fac6ad407749f014d', label: "Group Label" }, h("dga-nav-header-sub-menu-link", { key: '7d176c853bb98664e057ae6f080a4f9ff0823c72', label: "Submenu Link", link: "#", icon: "document", helperText: "This is a description" }), h("dga-nav-header-sub-menu-link", { key: '4bc10fd0f5683892591022c95299c484aa1e4d38', label: "Submenu Link", link: "#", icon: "document", helperText: "This is a description" })))))), h("dga-nav-header-actions", { key: '4948ab5bee3565e9708bb2314e2f624ff055c45d' }, h("dga-header-action-btn", { key: 'c64d9f873f2aebb813a47d57f0837b2196bbcbd2', label: "Search", icon: "search-01", subMenuBackground: "white" }, h("dga-nav-header-sub-menu", { key: 'b4e9cff787ae906200dcb7e5c7100be757cc1220', "sub-menu-full-width": true, background: 'white' }, h("dga-flex", { key: '68800e98ab349aecf45fa13f9bce9da8116c5c9a', spacing: 16 }, h("dga-search-box", { key: '59a3e892f806207c614257b798262f0ae0dde7c5', placeholder: "Search" }), h("dga-button", { key: '006f5d39a082ed236eb530ee35869de1b1e56ef6', label: "Search" })))), h("dga-header-action-btn", { key: '230014b636e4170f43095db7773a49d61f87a4e8', label: "\u0639\u0631\u0628\u064A", icon: "translation" }), h("dga-header-action-btn", { key: '701ae73c75a5a47549d91bb085b0a48a5746f733', label: "Login", icon: "user" })), h("dga-header-mobile-actions", { key: '6bc464a9b18d1bb0709b41bbb333401baff41ed5' }, h("dga-header-menu", { key: '6a3a3cdb937005747606defaaba4498f25ade27c', actions: [
                 {
                     label: 'Search',
                     icon: 'search-01',
@@ -326,11 +326,11 @@ export class DgaHeaderUsage {
                         console.log('clicked');
                     },
                 }
-            ] }))), h("dga-drawer", { key: 'b95e3d853d6f749306460dbfa3a795dd53a99ee6', routes: SidePanelRoutes, open: this.collapsed, background: 'gray', headerLogo: "https://casamedia.com/wp-content/uploads/2023/04/adidas-1024x683.png", sx: {
+            ] }))), h("dga-drawer", { key: 'bdac38ea781c432b5fd7090618c49cf66f030f6c', routes: SidePanelRoutes, open: this.collapsed, background: 'gray', headerLogo: "https://casamedia.com/wp-content/uploads/2023/04/adidas-1024x683.png", sx: {
                 '& > .sidepanel': {
                     top: '112px',
                 },
-            } }), h("div", { key: '0420ffdf629e128257528e9533f5c5051d047465' }, "Test")));
+            } }), h("div", { key: '778edde457382b0cce07b9ee15153c65f825792b' }, "Test")));
     }
     static get is() { return "dga-header-usage"; }
     static get states() {

package/dist/collection/usage/dga-huge-icon-usage.js

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 export class DgaHugeIconUsage {
     render() {
-        return (h("div", { key: 'c80fd6c4522a7743794947d43a37301c5a4890f0' }, h("h1", { key: 'ef41c6ab7c37f5821dd632ea1cebf85dca9b3435' }, "Huge Icon Example"), h("div", { key: 'e2d33bf5d031e45ec7a8ef6d2669f26c21e2a829', style: { padding: "50px", display: "flex", gap: "20px" } }, h("dga-local-icon", { key: '4bd157f38d227510fc79b4fa9902faa6948b49bb', icon: "tiktok", color: 'red', variant: 'solid', type: 'sharp', size: 20 }), h("dga-local-icon", { key: 'a90fcb8ca82f721b9b3daf882c112d4a57372c0a', icon: "tiktok", color: 'red', variant: 'stroke', type: 'sharp', size: 20 }), h("dga-local-icon", { key: '6eb25ab308dc15dd485cd17bb2218cc674fae06f', icon: "tiktok", color: 'red', variant: 'bulk', type: 'sharp', size: 20 }), h("dga-icon-v2", { key: '85937d0119c44929d845c5676e51b703ac9f48c4', name: "tiktok", color: 'red', variant: 'solid', type: 'sharp', size: 20 }), h("dga-icon-v2", { key: '850081231d47f87afbaf12368bf614b7f94e7e99', name: "tiktok", color: 'red', variant: 'stroke', type: 'sharp', size: 20 }), h("dga-icon-v2", { key: '36b74789f7bab18b668652e8d4e28410bb33d293', name: "tiktok", color: 'red', variant: 'bulk', type: 'sharp', size: 20 }), h("dga-icon", { key: 'bf38c775bcb1e83238af1ef7c4571cce33eedb43', icon: "tiktok", color: 'red', variant: 'solid', type: 'sharp', size: 20 }), h("dga-icon", { key: '7d79c25df4987d4c36eb54df924754a1afd730c4', icon: "tiktok", color: 'red', variant: 'stroke', type: 'sharp', size: 20 }), h("dga-icon", { key: 'de63c63c294b9b1e759d179c86955a76903ab0f4', icon: "tiktok", color: 'red', variant: 'bulk', type: 'sharp', size: 20 }))));
+        return (h("div", { key: 'd27d490ab0845a882bde13081eacac7fe1f7d622' }, h("h1", { key: 'b335fe6dbbd0e984e659e4874417bc3e7a2b1300' }, "Huge Icon Example"), h("div", { key: 'dd6330eaf73f41df1accb0aa49e7126d84e81dc0', style: { padding: "50px", display: "flex", gap: "20px" } }, h("dga-icon-v2", { key: 'c41d534eb74284a37f20563b9201dc21813c883e', name: "tiktok", color: 'red', variant: 'solid', type: 'sharp', size: 20 }), h("dga-icon", { key: 'd98baf4a9c356364c4ac89e56139f4fba894d9a0', icon: "tiktok", color: 'red', variant: 'solid', type: 'sharp', size: 20 }))));
     }
     static get is() { return "dga-huge-icon-usage"; }
 }