globuswebcomponents 0.3.5 → 0.3.6

package/dist/collection/components/gb-input-dropdown-menu/input-dropdown-menu.css

@@ -75,10 +75,19 @@
     --success-900: #074d31;
     --success-950: #053321;
 
-    /* opacity color palette  */
+    /* ------------------------------------------opacity color palette--------------------------------------  */
+    /* 20% opacity */
     --darkBlue200-opacity20: rgba(181, 185, 204, 0.2);
     --darkBlue500-opacity20: rgba(33, 44, 101, 0.2);
 
+    /* 30% opacity */
+    --darkBlue200-opacity30: rgba(181, 185, 204, 0.3);
+    --darkBlue500-opacity30: rgba(33, 44, 101, 0.3);
+
+    /* 40% opacity */
+    --darkBlue200-opacity40: rgba(181, 185, 204, 0.4);
+    --darkBlue500-opacity40: rgba(33, 44, 101, 0.4);
+
 
     /* ------------------------------------------Secondary Color------------------------------------------- */
     /* blueLight color palete */
@@ -250,6 +259,14 @@
         --color-text-warning-bold: var(--warning-100);
     }
 
+    [data-theme="light"] {
+        --color-text-warning-subtle: var(--warning-500);
+    }
+
+    [data-theme="dark"] {
+        --color-text-warning-subtle: var(--warning-400);
+    }
+
     [data-theme="light"] {
         --color-text-sucess: var(--success-600);
     }
@@ -282,6 +299,14 @@
         --color-text-discovery-bold: var(--blueLight-100);
     }
 
+    [data-theme="light"] {
+        --color-text-discovery-subtle: var(--blueLight-400);
+    }
+
+    [data-theme="dark"] {
+        --color-text-discovery-subtle: var(--blueLight-100);
+    }
+
     [data-theme="light"] {
         --color-text-information: var(--blue-600);
     }
@@ -298,6 +323,14 @@
         --color-text-information-bold: var(--blue-100);
     }
 
+    [data-theme="light"] {
+        --color-text-information-subtle: var(--blue-500);
+    }
+
+    [data-theme="dark"] {
+        --color-text-information-subtle: var(--blue-400);
+    }
+
     [data-theme="light"] {
         --color-text-purple: var(--purple-600);
     }
@@ -314,6 +347,30 @@
         --color-text-purple-bold: var(--purple-100);
     }
 
+    [data-theme="light"] {
+        --color-text-purple-subtle: var(--purple-500);
+    }
+
+    [data-theme="dark"] {
+        --color-text-purple-subtle: var(--purple-400);
+    }
+
+    [data-theme="light"] {
+        --color-text-pink: var(--purple-600);
+    }
+
+    [data-theme="dark"] {
+        --color-text-pink: var(--purple-300);
+    }
+
+    [data-theme="light"] {
+        --color-text-pink-subtle: var(--purple-500);
+    }
+
+    [data-theme="dark"] {
+        --color-text-pink-subtle: var(--purple-400);
+    }
+
 
     /* --------------Link color--------------- */
 
@@ -1244,6 +1301,22 @@
         --color-blanket: var(--darkBlue200-opacity20);
     }
 
+    [data-theme="light"] {
+        --color-blanket-subtle: var(--darkBlue500-opacity30);
+    }
+
+    [data-theme="dark"] {
+        --color-blanket-subtle: var(--darkBlue200-opacity30);
+    }
+
+    [data-theme="light"] {
+        --color-blanket-subtler: var(--darkBlue500-opacity40);
+    }
+
+    [data-theme="dark"] {
+        --color-blanket-subtler: var(--darkBlue200-opacity40);
+    }
+
 
 
     /* ----------------Skeleton Color --------------- */
@@ -2045,82 +2118,102 @@
     line-height: var(--text-xs-regular-line-height);
 }
 
-:host {
+.dropdown-container {
     display: flex;
     width: 320px;
-    height: 35px;
     padding: var(--spacing-1);
     align-items: center;
     gap: var(--spacing-none);
     border-radius: var(--rounded-none);
+}
+
+.dropdown-item {
+    display: flex;
+    height: 40px;
+    padding: var(--spacing-2);
+    justify-content: flex-start;
+    align-items: center;
+    gap: var(--spacing-2);
+    flex: 1 0 0;
+    border-radius: var(--rounded-xs);
     cursor: pointer;
-    color: #4B5565;
+    color: var(--color-text, #4B5565);
     font-family: var(--Font-Family-Body, Sora);
-    font-size: var(--Font-Size-T-md, 16px);
     font-style: normal;
-    font-weight: var(--Font-Weight-Medium, 500);
-    line-height: var(--Font-Line-height-T-md, 24px);
     letter-spacing: var(--Font-Letter-spacing-T-md, 0px);
 }
 
-:host(:hover) {
+::slotted([slot = 'name']) {
+    font-size: var(--Font-Size-T-md, 16px);
+    font-weight: var(--Font-Weight-Medium, 500);
+    line-height: var(--Font-Line-height-T-md, 24px); /* 150% */
+}
+
+::slotted([slot="supporting_text"]) {
+    font-size: var(--Font-Size-T-sm, 14px);
+    font-weight: var(--Font-Weight-Regular, 400);
+    line-height: var(--Font-Line-height-T-sm, 20px); /* 142.857% */
+}
+
+.dropdown-item:hover {
     background-color: #EEF2F6;
 }
 
-:host(:active) {
+.dropdown-item:active {
     background-color: #E3E8EF;
 }
 
-:host([state="disabled"]) {
+.dropdown-item--disabled {
     color: #CDD5DF;
     cursor: not-allowed;
 }
 
-:host([state="disabled"]) svg path {
+.dropdown-item--disabled svg path {
     stroke: #CDD5DF;
 }
 
-:host(.dropdown-item--selected) {
+.dropdown-item--selected {
     display: flex;
     justify-content: space-between;
     background-color: #E4F0FC;
 }
 
-:host(.dropdown-item--selected:hover) {
+.dropdown-item--selected:hover {
     background-color: #b7d2ec;
 }
 
-:host(.dropdown-item--selected:active) {
+.dropdown-item--selected:active {
     background-color: #C8E0F9;
 }
 
-:host([state="disabled"].dropdown-item--selected) {
+.dropdown-item--disabled.dropdown-item--selected {
     background-color: #FFFFFF;
     cursor: not-allowed;
     color: #CDD5DF;
 }
 
-:host([state="disabled"].dropdown-item--selected) svg path {
+.dropdown-item--disabled.dropdown-item--selected svg path {
     stroke: #CDD5DF;
 }
 
-#icon {
-    padding-right: 8px;
+gb-checkbox {
+    padding-top: 4px;
 }
 
 .text {
     display: flex;
-    flex-direction: row;
     padding: var(--spacing-none);
+    align-items: center;
     gap: var(--spacing-2);
+    align-self: stretch;
 }
 
-:host(.dropdown-item--selected) slot {
+.dropdown-item--selected slot {
     flex-grow: 1;
     margin-right: 8px;
 }
 
-:host(.dropdown-item--selected) svg:last-of-type {
+.dropdown-item--selected svg:last-of-type {
     margin-left: auto;
     display: flex;
     align-items: center;

package/dist/collection/components/gb-input-dropdown-menu/input-dropdown-menu.js

@@ -1,4 +1,4 @@
-import { Host, h } from "@stencil/core";
+import { h } from "@stencil/core";
 import { StateEnum } from "../../models/reusableModels";
 export class GbInputDropdownMenuItem {
     constructor() {
@@ -6,15 +6,14 @@ export class GbInputDropdownMenuItem {
         this.supportingText = false;
         this.selected = false;
         this.state = 'default';
-        this.checkboxStates = undefined;
     }
     render() {
-        return (h(Host, { key: 'cea0520e72c1a5c60363385063fe50633ae6e925', class: {
+        return (h("div", { key: '976959c83d330e3b5e65b46ef9c6433b42cd3bcd', class: "dropdown-container" }, h("div", { key: '8bc65497d36d59896ef9eb5ef3a80ea2ee8bbe63', class: {
                 'dropdown-item': true,
                 'dropdown-item--selected': this.selected,
                 'dropdown-item--disabled': this.state === 'disabled',
                 [this.type]: true,
-            }, role: "option", "aria-selected": this.selected ? 'true' : 'false', "aria-disabled": this.state === 'disabled' ? 'true' : 'false' }, this.type === 'icon_leading' && (h("svg", { key: 'a6a4e25d38c5ad61527a390564919cede8ed0e39', id: "icon", xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, h("path", { key: '10ec1a1359b13ac96d09f46ccbd4788f0b7b0fa1', d: "M5.48131 12.9013C4.30234 13.6034 1.21114 15.0368 3.09388 16.8305C4.01359 17.7067 5.03791 18.3334 6.32572 18.3334H13.6743C14.9621 18.3334 15.9864 17.7067 16.9061 16.8305C18.7889 15.0368 15.6977 13.6034 14.5187 12.9013C11.754 11.2551 8.24599 11.2551 5.48131 12.9013Z", stroke: "#4B5565", "stroke-width": "1.5" }), h("path", { key: '5bf2022240b0cf56f8054bb94e55001a8d20af26', d: "M13.75 5.41669C13.75 7.48776 12.0711 9.16669 10 9.16669C7.92893 9.16669 6.25 7.48776 6.25 5.41669C6.25 3.34562 7.92893 1.66669 10 1.66669C12.0711 1.66669 13.75 3.34562 13.75 5.41669Z", stroke: "#4B5565", "stroke-width": "1.5" }))), this.type === 'avatar_leading' && (h("gb-avatar", { key: 'f04c62bcd1eac7dcbdeaed31689def2009c321d3', class: "avatar-icon", size: "xs", "status-icon": "false" }, h("slot", { key: 'f2a37b64d8963a28c10a4a6b28a7f12146b40137', name: 'image', slot: 'image' }))), this.type === 'dot_leading' && (h("svg", { key: '16547e93c80cb29f7de785188cd9645401f36a6a', id: "icon", xmlns: "http://www.w3.org/2000/svg", width: "10px", height: "10px", viewBox: "0 0 10 10", fill: "none" }, h("circle", { key: 'ff1859e524820a5db64fb22e63e9ee827539ce98', cx: "5", cy: "5", r: "4", fill: "#17B26A" }))), this.type === 'checkbox' && (h("gb-checkbox", { key: '546a408d2e38bf5fa5ff14ca058917b061828720', class: "checkbox", size: "sm", type: 'checkbox', state: StateEnum.Default })), h("div", { key: '3a4b86901a3fff327c3a030cfb1f0cb5b3bcedbc', class: "text" }, h("slot", { key: '769405fb19ceb0ed33cdd414d7435628f74b6aaa', name: "main_text" }), this.supportingText && (h("span", { key: '4cbc793afca5a6b3e12c6cbcdd01a31d2b2d5aaf' }, h("slot", { key: 'e9af3e8b3927824390e0f188e7a14ab72e9d64ca', name: "supporting_text" })))), this.selected && (h("svg", { key: '07062a0149197764bcaddf4e1b7cf20f11bfd509', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, h("path", { key: 'a0217d686a0a82570f5a8dda3c4f4f19bacf4cdf', d: "M4.16669 12.0834C4.16669 12.0834 5.41669 12.0834 7.08335 15C7.08335 15 11.7157 7.36115 15.8334 5.83337", stroke: "#075DB2", "stroke-width": "1.66667", "stroke-linecap": "round", "stroke-linejoin": "round" })))));
+            }, role: "option", "aria-selected": this.selected ? 'true' : 'false', "aria-disabled": this.state === 'disabled' ? 'true' : 'false' }, this.type === 'icon_leading' && (h("svg", { key: 'a1300b1cdcb62a06f3c62c5a03e2f9a9652fd967', id: "icon", xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, h("path", { key: 'd54fbabc141bd0c9bfd0af75e1e8a81959e07fb9', d: "M5.48131 12.9013C4.30234 13.6034 1.21114 15.0368 3.09388 16.8305C4.01359 17.7067 5.03791 18.3334 6.32572 18.3334H13.6743C14.9621 18.3334 15.9864 17.7067 16.9061 16.8305C18.7889 15.0368 15.6977 13.6034 14.5187 12.9013C11.754 11.2551 8.24599 11.2551 5.48131 12.9013Z", stroke: "#4B5565", "stroke-width": "1.5" }), h("path", { key: '8e114ad9e61bb54706b80ad84e2e7da5fb9366b1', d: "M13.75 5.41669C13.75 7.48776 12.0711 9.16669 10 9.16669C7.92893 9.16669 6.25 7.48776 6.25 5.41669C6.25 3.34562 7.92893 1.66669 10 1.66669C12.0711 1.66669 13.75 3.34562 13.75 5.41669Z", stroke: "#4B5565", "stroke-width": "1.5" }))), this.type === 'avatar_leading' && (h("gb-avatar", { key: 'dd943102b117ef8890f5cebc34fc0b22adb464a6', class: "avatar-icon", size: "xs", "status-icon": "false" }, h("slot", { key: 'cdd945e22815c181e8729b0d7a682c7ea65f5cd3', name: 'image', slot: 'image' }))), this.type === 'dot_leading' && (h("svg", { key: 'eca43aad17314d455a3f5e84990bc8504b7a9236', id: "icon", xmlns: "http://www.w3.org/2000/svg", width: "10px", height: "10px", viewBox: "0 0 10 10", fill: "none" }, h("circle", { key: '1427d45b2a013716e25cd6e5f1f4ca324e0eb6df', cx: "5", cy: "5", r: "4", fill: "#17B26A" }))), this.type === 'checkbox' && (h("gb-checkbox", { key: '87eb8ab1d9aa5ba9dbf89cd2017da2a97514075d', class: "checkbox", size: "sm", type: 'checkbox', state: StateEnum.Default })), h("div", { key: 'd148133b889bfb8ad1a1ea9a6bd68cc9a67094ad', class: "text" }, h("slot", { key: 'f020782ef57ce7f9361d7f4294dbf8375560cd39', name: "name" }), this.supportingText && (h("span", { key: '0fd8003e366bec5ad7ed5b6db25b84b96b8ab998' }, h("slot", { key: '4503f04a76a85e98118cd85e8f4c6573a7cbd5b3', name: "supporting_text" })))), this.selected && (h("svg", { key: '97be9cd72857af4f332819e1ab7a88c7804ceb71', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, h("path", { key: 'ed6ac2c3f4322a627a730fd5be58b514655e32c3', d: "M4.16669 12.0834C4.16669 12.0834 5.41669 12.0834 7.08335 15C7.08335 15 11.7157 7.36115 15.8334 5.83337", stroke: "#075DB2", "stroke-width": "1.66667", "stroke-linecap": "round", "stroke-linejoin": "round" }))))));
     }
     static get is() { return "gb-input-dropdown-menu-item"; }
     static get encapsulation() { return "shadow"; }
@@ -100,29 +99,6 @@ export class GbInputDropdownMenuItem {
                 "attribute": "state",
                 "reflect": false,
                 "defaultValue": "'default'"
-            },
-            "checkboxStates": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "CheckBoxStates",
-                    "resolved": "CheckBoxStates.Default | CheckBoxStates.Disabled",
-                    "references": {
-                        "CheckBoxStates": {
-                            "location": "import",
-                            "path": "../../models/reusableModels",
-                            "id": "src/models/reusableModels.ts::CheckBoxStates"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "checkbox-states",
-                "reflect": false
             }
         };
     }

package/dist/collection/components/gb-input-dropdown-menu/input-dropdown-menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"input-dropdown-menu.js","sourceRoot":"","sources":["../../../src/components/gb-input-dropdown-menu/input-dropdown-menu.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,EAAkB,SAAS,EAAE,MAAM,6BAA6B,CAAC;AAQxE,MAAM,OAAO,uBAAuB;;;8BAEE,KAAK;wBACX,KAAK;qBACO,SAAS;;;IAGjD,MAAM;QACF,OAAO,CACH,EAAC,IAAI,qDACD,KAAK,EAAE;gBACP,eAAe,EAAE,IAAI;gBACrB,yBAAyB,EAAE,IAAI,CAAC,QAAQ;gBACxC,yBAAyB,EAAE,IAAI,CAAC,KAAK,KAAK,UAAU;gBACpD,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,IAAI;aAChB,EACD,IAAI,EAAC,QAAQ,mBACE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,mBAChC,IAAI,CAAC,KAAK,KAAK,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;YAE1D,IAAI,CAAC,IAAI,KAAK,cAAc,IAAI,CAC7B,4DAAK,EAAE,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM;gBACpG,6DAAM,CAAC,EAAC,0QAA0Q,EAAC,MAAM,EAAC,SAAS,kBAAc,KAAK,GAAE;gBACxT,6DAAM,CAAC,EAAC,wLAAwL,EAAC,MAAM,EAAC,SAAS,kBAAc,KAAK,GAAE,CACpO,CACT;YACA,IAAI,CAAC,IAAI,KAAK,gBAAgB,IAAI,CAC/B,kEAAW,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,IAAI,iBAAa,OAAO;gBACxD,6DAAM,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,GAAQ,CAC/B,CACf;YACA,IAAI,CAAC,IAAI,KAAK,aAAa,IAAI,CAC5B,4DAAK,EAAE,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,EAAC,KAAK,EAAC,MAAM,EAAC,MAAM,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM;gBACxG,+DAAQ,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,GAAG,EAAC,CAAC,EAAC,GAAG,EAAC,IAAI,EAAC,SAAS,GAAE,CAC1C,CACT;YACA,IAAI,CAAC,IAAI,KAAK,UAAU,IAAI,CACzB,oEAAa,KAAK,EAAC,UAAU,EAAC,IAAI,EAAC,IAAI,EAAC,IAAI,EAAC,UAAU,EAAC,KAAK,EAAE,SAAS,CAAC,OAAO,GAAgB,CACnG;YACD,4DAAK,KAAK,EAAC,MAAM;gBACb,6DAAM,IAAI,EAAC,WAAW,GAAQ;gBAC7B,IAAI,CAAC,cAAc,IAAI,CACpB;oBAAM,6DAAM,IAAI,EAAC,iBAAiB,GAAQ,CAAO,CACpD,CACC;YACL,IAAI,CAAC,QAAQ,IAAI,CACd,4DAAK,KAAK,EAAC,4BAA4B,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM;gBAC1F,6DAAM,CAAC,EAAC,wGAAwG,EAAC,MAAM,EAAC,SAAS,kBAAc,SAAS,oBAAgB,OAAO,qBAAiB,OAAO,GAAE,CACvM,CACT,CACE,CACV,CAAC;IACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAEJ","sourcesContent":["import { Component, Host, Prop, h } from \"@stencil/core\";\r\nimport { CheckBoxStates, StateEnum } from '../../models/reusableModels';\r\n\r\n@Component({\r\n    tag: 'gb-input-dropdown-menu-item',\r\n    styleUrl: 'input-dropdown-menu.css',\r\n    shadow: true\r\n})\r\n\r\nexport class GbInputDropdownMenuItem {\r\n    @Prop() type: 'icon_leading' | 'avatar_leading' | 'dot_leading' | 'checkbox';\r\n    @Prop() supportingText: boolean = false;\r\n    @Prop() selected: boolean = false;\r\n    @Prop() state: 'default' | 'disabled' = 'default';\r\n    @Prop() checkboxStates : CheckBoxStates;\r\n\r\n    render() {\r\n        return (\r\n            <Host\r\n                class={{\r\n                'dropdown-item': true,\r\n                'dropdown-item--selected': this.selected,\r\n                'dropdown-item--disabled': this.state === 'disabled',\r\n                [this.type]: true,\r\n                }}\r\n                role=\"option\"\r\n                aria-selected={this.selected ? 'true' : 'false'}\r\n                aria-disabled={this.state === 'disabled' ? 'true' : 'false'}\r\n            >\r\n                {this.type === 'icon_leading' && (\r\n                    <svg id=\"icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                        <path d=\"M5.48131 12.9013C4.30234 13.6034 1.21114 15.0368 3.09388 16.8305C4.01359 17.7067 5.03791 18.3334 6.32572 18.3334H13.6743C14.9621 18.3334 15.9864 17.7067 16.9061 16.8305C18.7889 15.0368 15.6977 13.6034 14.5187 12.9013C11.754 11.2551 8.24599 11.2551 5.48131 12.9013Z\" stroke=\"#4B5565\" stroke-width=\"1.5\"/>\r\n                        <path d=\"M13.75 5.41669C13.75 7.48776 12.0711 9.16669 10 9.16669C7.92893 9.16669 6.25 7.48776 6.25 5.41669C6.25 3.34562 7.92893 1.66669 10 1.66669C12.0711 1.66669 13.75 3.34562 13.75 5.41669Z\" stroke=\"#4B5565\" stroke-width=\"1.5\"/>\r\n                    </svg>\r\n                )}\r\n                {this.type === 'avatar_leading' && (\r\n                    <gb-avatar class=\"avatar-icon\" size=\"xs\" status-icon=\"false\">\r\n                        <slot name='image' slot='image'></slot>\r\n                    </gb-avatar>\r\n                )}\r\n                {this.type === 'dot_leading' && (\r\n                    <svg id=\"icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 10 10\" fill=\"none\">\r\n                        <circle cx=\"5\" cy=\"5\" r=\"4\" fill=\"#17B26A\"/>\r\n                    </svg>\r\n                )}\r\n                {this.type === 'checkbox' && (\r\n                    <gb-checkbox class=\"checkbox\" size=\"sm\" type='checkbox' state={StateEnum.Default}></gb-checkbox>\r\n                )}\r\n                <div class=\"text\">\r\n                    <slot name=\"main_text\"></slot>\r\n                    {this.supportingText && (\r\n                        <span><slot name=\"supporting_text\"></slot></span>\r\n                    )}\r\n                </div>\r\n                {this.selected && (\r\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                        <path d=\"M4.16669 12.0834C4.16669 12.0834 5.41669 12.0834 7.08335 15C7.08335 15 11.7157 7.36115 15.8334 5.83337\" stroke=\"#075DB2\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                    </svg>\r\n                )}\r\n            </Host>\r\n        );\r\n    }\r\n    \r\n}"]}
+{"version":3,"file":"input-dropdown-menu.js","sourceRoot":"","sources":["../../../src/components/gb-input-dropdown-menu/input-dropdown-menu.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AAQxD,MAAM,OAAO,uBAAuB;;;8BAEE,KAAK;wBACX,KAAK;qBACO,SAAS;;IAEjD,MAAM;QACF,OAAO,CACH,4DAAK,KAAK,EAAC,oBAAoB;YAC3B,4DAAK,KAAK,EAAE;oBACZ,eAAe,EAAE,IAAI;oBACrB,yBAAyB,EAAE,IAAI,CAAC,QAAQ;oBACxC,yBAAyB,EAAE,IAAI,CAAC,KAAK,KAAK,UAAU;oBACpD,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,IAAI;iBAChB,EACD,IAAI,EAAC,QAAQ,mBACE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,mBAChC,IAAI,CAAC,KAAK,KAAK,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;gBAEtD,IAAI,CAAC,IAAI,KAAK,cAAc,IAAI,CAC7B,4DAAK,EAAE,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM;oBACpG,6DAAM,CAAC,EAAC,0QAA0Q,EAAC,MAAM,EAAC,SAAS,kBAAc,KAAK,GAAE;oBACxT,6DAAM,CAAC,EAAC,wLAAwL,EAAC,MAAM,EAAC,SAAS,kBAAc,KAAK,GAAE,CACpO,CACT;gBACA,IAAI,CAAC,IAAI,KAAK,gBAAgB,IAAI,CAC/B,kEAAW,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,IAAI,iBAAa,OAAO;oBACxD,6DAAM,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,GAAQ,CAC/B,CACf;gBACA,IAAI,CAAC,IAAI,KAAK,aAAa,IAAI,CAC5B,4DAAK,EAAE,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,EAAC,KAAK,EAAC,MAAM,EAAC,MAAM,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM;oBACxG,+DAAQ,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,GAAG,EAAC,CAAC,EAAC,GAAG,EAAC,IAAI,EAAC,SAAS,GAAE,CAC1C,CACT;gBACA,IAAI,CAAC,IAAI,KAAK,UAAU,IAAI,CACzB,oEAAa,KAAK,EAAC,UAAU,EAAC,IAAI,EAAC,IAAI,EAAC,IAAI,EAAC,UAAU,EAAC,KAAK,EAAE,SAAS,CAAC,OAAO,GAAgB,CACnG;gBACD,4DAAK,KAAK,EAAC,MAAM;oBACb,6DAAM,IAAI,EAAC,MAAM,GAAQ;oBACxB,IAAI,CAAC,cAAc,IAAI,CACpB;wBAAM,6DAAM,IAAI,EAAC,iBAAiB,GAAQ,CAAO,CACpD,CACC;gBACL,IAAI,CAAC,QAAQ,IAAI,CACd,4DAAK,KAAK,EAAC,4BAA4B,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM;oBAC1F,6DAAM,CAAC,EAAC,wGAAwG,EAAC,MAAM,EAAC,SAAS,kBAAc,SAAS,oBAAgB,OAAO,qBAAiB,OAAO,GAAE,CACvM,CACT,CACC,CAEJ,CACT,CAAC;IACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAEJ","sourcesContent":["import { Component, Prop, h } from \"@stencil/core\";\r\nimport { StateEnum } from '../../models/reusableModels';\r\n\r\n@Component({\r\n    tag: 'gb-input-dropdown-menu-item',\r\n    styleUrl: 'input-dropdown-menu.css',\r\n    shadow: true\r\n})\r\n\r\nexport class GbInputDropdownMenuItem {\r\n    @Prop() type: 'icon_leading' | 'avatar_leading' | 'dot_leading' | 'checkbox';\r\n    @Prop() supportingText: boolean = false;\r\n    @Prop() selected: boolean = false;\r\n    @Prop() state: 'default' | 'disabled' = 'default';\r\n\r\n    render() {\r\n        return (\r\n            <div class=\"dropdown-container\">\r\n                <div class={{\r\n                'dropdown-item': true,\r\n                'dropdown-item--selected': this.selected,\r\n                'dropdown-item--disabled': this.state === 'disabled',\r\n                [this.type]: true,\r\n                }}\r\n                role=\"option\"\r\n                aria-selected={this.selected ? 'true' : 'false'}\r\n                aria-disabled={this.state === 'disabled' ? 'true' : 'false'}\r\n                >\r\n                    {this.type === 'icon_leading' && (\r\n                        <svg id=\"icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                            <path d=\"M5.48131 12.9013C4.30234 13.6034 1.21114 15.0368 3.09388 16.8305C4.01359 17.7067 5.03791 18.3334 6.32572 18.3334H13.6743C14.9621 18.3334 15.9864 17.7067 16.9061 16.8305C18.7889 15.0368 15.6977 13.6034 14.5187 12.9013C11.754 11.2551 8.24599 11.2551 5.48131 12.9013Z\" stroke=\"#4B5565\" stroke-width=\"1.5\"/>\r\n                            <path d=\"M13.75 5.41669C13.75 7.48776 12.0711 9.16669 10 9.16669C7.92893 9.16669 6.25 7.48776 6.25 5.41669C6.25 3.34562 7.92893 1.66669 10 1.66669C12.0711 1.66669 13.75 3.34562 13.75 5.41669Z\" stroke=\"#4B5565\" stroke-width=\"1.5\"/>\r\n                        </svg>\r\n                    )}\r\n                    {this.type === 'avatar_leading' && (\r\n                        <gb-avatar class=\"avatar-icon\" size=\"xs\" status-icon=\"false\">\r\n                            <slot name='image' slot='image'></slot>\r\n                        </gb-avatar>\r\n                    )}\r\n                    {this.type === 'dot_leading' && (\r\n                        <svg id=\"icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 10 10\" fill=\"none\">\r\n                            <circle cx=\"5\" cy=\"5\" r=\"4\" fill=\"#17B26A\"/>\r\n                        </svg>\r\n                    )}\r\n                    {this.type === 'checkbox' && (\r\n                        <gb-checkbox class=\"checkbox\" size=\"sm\" type='checkbox' state={StateEnum.Default}></gb-checkbox>\r\n                    )}\r\n                    <div class=\"text\">\r\n                        <slot name=\"name\"></slot>\r\n                        {this.supportingText && (\r\n                            <span><slot name=\"supporting_text\"></slot></span>\r\n                        )}\r\n                    </div>\r\n                    {this.selected && (\r\n                        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                            <path d=\"M4.16669 12.0834C4.16669 12.0834 5.41669 12.0834 7.08335 15C7.08335 15 11.7157 7.36115 15.8334 5.83337\" stroke=\"#075DB2\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                        </svg>\r\n                    )}\r\n                </div>\r\n                \r\n            </div>\r\n        );\r\n    }\r\n    \r\n}"]}

package/dist/collection/components/gb-input-field/gb-input-field.css

@@ -75,10 +75,19 @@
     --success-900: #074d31;
     --success-950: #053321;
 
-    /* opacity color palette  */
+    /* ------------------------------------------opacity color palette--------------------------------------  */
+    /* 20% opacity */
     --darkBlue200-opacity20: rgba(181, 185, 204, 0.2);
     --darkBlue500-opacity20: rgba(33, 44, 101, 0.2);
 
+    /* 30% opacity */
+    --darkBlue200-opacity30: rgba(181, 185, 204, 0.3);
+    --darkBlue500-opacity30: rgba(33, 44, 101, 0.3);
+
+    /* 40% opacity */
+    --darkBlue200-opacity40: rgba(181, 185, 204, 0.4);
+    --darkBlue500-opacity40: rgba(33, 44, 101, 0.4);
+
 
     /* ------------------------------------------Secondary Color------------------------------------------- */
     /* blueLight color palete */
@@ -250,6 +259,14 @@
         --color-text-warning-bold: var(--warning-100);
     }
 
+    [data-theme="light"] {
+        --color-text-warning-subtle: var(--warning-500);
+    }
+
+    [data-theme="dark"] {
+        --color-text-warning-subtle: var(--warning-400);
+    }
+
     [data-theme="light"] {
         --color-text-sucess: var(--success-600);
     }
@@ -282,6 +299,14 @@
         --color-text-discovery-bold: var(--blueLight-100);
     }
 
+    [data-theme="light"] {
+        --color-text-discovery-subtle: var(--blueLight-400);
+    }
+
+    [data-theme="dark"] {
+        --color-text-discovery-subtle: var(--blueLight-100);
+    }
+
     [data-theme="light"] {
         --color-text-information: var(--blue-600);
     }
@@ -298,6 +323,14 @@
         --color-text-information-bold: var(--blue-100);
     }
 
+    [data-theme="light"] {
+        --color-text-information-subtle: var(--blue-500);
+    }
+
+    [data-theme="dark"] {
+        --color-text-information-subtle: var(--blue-400);
+    }
+
     [data-theme="light"] {
         --color-text-purple: var(--purple-600);
     }
@@ -314,6 +347,30 @@
         --color-text-purple-bold: var(--purple-100);
     }
 
+    [data-theme="light"] {
+        --color-text-purple-subtle: var(--purple-500);
+    }
+
+    [data-theme="dark"] {
+        --color-text-purple-subtle: var(--purple-400);
+    }
+
+    [data-theme="light"] {
+        --color-text-pink: var(--purple-600);
+    }
+
+    [data-theme="dark"] {
+        --color-text-pink: var(--purple-300);
+    }
+
+    [data-theme="light"] {
+        --color-text-pink-subtle: var(--purple-500);
+    }
+
+    [data-theme="dark"] {
+        --color-text-pink-subtle: var(--purple-400);
+    }
+
 
     /* --------------Link color--------------- */
 
@@ -1244,6 +1301,22 @@
         --color-blanket: var(--darkBlue200-opacity20);
     }
 
+    [data-theme="light"] {
+        --color-blanket-subtle: var(--darkBlue500-opacity30);
+    }
+
+    [data-theme="dark"] {
+        --color-blanket-subtle: var(--darkBlue200-opacity30);
+    }
+
+    [data-theme="light"] {
+        --color-blanket-subtler: var(--darkBlue500-opacity40);
+    }
+
+    [data-theme="dark"] {
+        --color-blanket-subtler: var(--darkBlue200-opacity40);
+    }
+
 
 
     /* ----------------Skeleton Color --------------- */

package/dist/collection/components/gb-input-field/gb-input-field.js

@@ -23,7 +23,7 @@ export class GbInputField {
         const classes = {
             [this.size]: true,
         };
-        return (h("div", { key: '6b50f88ec66b18da0f30c29c1263b5ffff5e3aa6', class: classes }, h("label", { key: 'b54c50c41122fe1db87c23e85fe6518166298b18' }, this.label), this.inputType === 'default' && (h("div", { key: 'a947d3d6417ec61c9b7a0ba681efc4e6f439ad5d', class: "input-wrapper" }, h("input", { key: '07187cfd5d3644f679b55644e795caea8bdf819a', placeholder: this.placeholder }), this.helpIcon && (h("div", { key: '5470f11f3e168f8f4978965829fff1765ddc1891', class: "help-icon" }, h("svg", { key: '15fa4215af1eaf4a5273280e654ab4b18060c015', xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { key: '0d0388b940b2678c1131bbddc2017c51c3eda3d2', d: "M6.66671 5.99998C6.66671 5.2636 7.26366 4.66665 8.00004 4.66665C8.73642 4.66665 9.33337 5.2636 9.33337 5.99998C9.33337 6.26541 9.25581 6.51273 9.12212 6.72051C8.72365 7.33976 8.00004 7.93027 8.00004 8.66665V8.99998M7.9947 11.3333H8.00069M14.6667 7.99998C14.6667 11.6819 11.6819 14.6666 8.00004 14.6666C4.31814 14.6666 1.33337 11.6819 1.33337 7.99998C1.33337 4.31808 4.31814 1.33331 8.00004 1.33331C11.6819 1.33331 14.6667 4.31808 14.6667 7.99998Z", stroke: "#697586", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })))))), this.inputType === 'icon_leading' && (h("div", { key: '16179c87577f059c00d5b80501c6ab11d6aaadd6', class: "input-wrapper" }, this.icon && (h("div", { key: '204fdb21839c3acff245fa188b93a8c6feccc842', class: "icon" }, h("img", { key: '683ac85ce2ff6d21e9682d09c925304c88871725', src: icon, alt: "Icon" }))), h("input", { key: 'd0f23a6b268551c4644186ac984f285063fc10ba', placeholder: this.placeholder, type: 'email' }), this.helpIcon && (h("div", { key: 'd10ae61331d8b41cc813b7f55c4ec87378eba224', class: "help-icon" }, h("svg", { key: '23306e8074501d477255af45e83dbe925bf79f8d', xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { key: '86d4fa9835828aa867c660d743647ca39b00667f', d: "M6.66671 5.99998C6.66671 5.2636 7.26366 4.66665 8.00004 4.66665C8.73642 4.66665 9.33337 5.2636 9.33337 5.99998C9.33337 6.26541 9.25581 6.51273 9.12212 6.72051C8.72365 7.33976 8.00004 7.93027 8.00004 8.66665V8.99998M7.9947 11.3333H8.00069M14.6667 7.99998C14.6667 11.6819 11.6819 14.6666 8.00004 14.6666C4.31814 14.6666 1.33337 11.6819 1.33337 7.99998C1.33337 4.31808 4.31814 1.33331 8.00004 1.33331C11.6819 1.33331 14.6667 4.31808 14.6667 7.99998Z", stroke: "#697586", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })))))), this.inputType === 'leading_dropdown' && (h("div", { key: '4ad0e9306ae0d77f5487e757a4a1593254ce440a', class: "input-wrapper" }, this.icon && (h("div", { key: '171367f7949e68d2b08ca034bbb327b2109c42a1', class: "icon" }, h("img", { key: '103150bdad69272677733b6c23ae2b43c9a16d5f', src: icon, alt: "Icon" }))), h("select", { key: '4cc19cd40d72e4e04dd8199a4298f36b021a60bc' }), h("input", { key: 'ac56e7bc299a35ee06a68534fc5c67f019548280', placeholder: this.placeholder }, this.helpIcon && (h("svg", { key: '9800c59651ab098bc5bb1e9fd1733364bd5b4620', xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { key: '58fdc8cd4522d365fec193b0fa154027fcddcf64', d: "M6.66671 5.99998C6.66671 5.2636 7.26366 4.66665 8.00004 4.66665C8.73642 4.66665 9.33337 5.2636 9.33337 5.99998C9.33337 6.26541 9.25581 6.51273 9.12212 6.72051C8.72365 7.33976 8.00004 7.93027 8.00004 8.66665V8.99998M7.9947 11.3333H8.00069M14.6667 7.99998C14.6667 11.6819 11.6819 14.6666 8.00004 14.6666C4.31814 14.6666 1.33337 11.6819 1.33337 7.99998C1.33337 4.31808 4.31814 1.33331 8.00004 1.33331C11.6819 1.33331 14.6667 4.31808 14.6667 7.99998Z", stroke: "#697586", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })))))), this.inputType === 'payment_input' && (h("div", { key: '707698bed63785f333c261ff73d1ec540726cc81', class: "input-wrapper" }, h("span", { key: 'f975a01fe5af1c44ddb74f45c375db57e9466beb', class: 'payment-icon' }, "$"), h("input", { key: '72601af9ac3cafd8f2b2b2881e97cc81aee19bc4', placeholder: this.placeholder }, this.helpIcon && (h("svg", { key: 'fca60ca59de144a9b1abb58cea3f08fac94d9661', xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { key: 'ad53ff51e8c2bfc11b2916e5b6297621c3a77d5c', d: "M6.66671 5.99998C6.66671 5.2636 7.26366 4.66665 8.00004 4.66665C8.73642 4.66665 9.33337 5.2636 9.33337 5.99998C9.33337 6.26541 9.25581 6.51273 9.12212 6.72051C8.72365 7.33976 8.00004 7.93027 8.00004 8.66665V8.99998M7.9947 11.3333H8.00069M14.6667 7.99998C14.6667 11.6819 11.6819 14.6666 8.00004 14.6666C4.31814 14.6666 1.33337 11.6819 1.33337 7.99998C1.33337 4.31808 4.31814 1.33331 8.00004 1.33331C11.6819 1.33331 14.6667 4.31808 14.6667 7.99998Z", stroke: "#697586", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })))))), this.inputType === 'tags' && (h("input", { key: 'e8e8814c581a76da108b07c3c0b4b4926a61ee44', placeholder: this.placeholder }, h("slot", { key: 'a022271cb6f04eb070e99f38d309b4af3f2546a4' }), this.helpIcon && (h("svg", { key: '730a620df79497d0b822d545b84298c050d3102f', xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { key: '92cec605eef408159267ac783630119c0276a8ca', d: "M6.66671 5.99998C6.66671 5.2636 7.26366 4.66665 8.00004 4.66665C8.73642 4.66665 9.33337 5.2636 9.33337 5.99998C9.33337 6.26541 9.25581 6.51273 9.12212 6.72051C8.72365 7.33976 8.00004 7.93027 8.00004 8.66665V8.99998M7.9947 11.3333H8.00069M14.6667 7.99998C14.6667 11.6819 11.6819 14.6666 8.00004 14.6666C4.31814 14.6666 1.33337 11.6819 1.33337 7.99998C1.33337 4.31808 4.31814 1.33331 8.00004 1.33331C11.6819 1.33331 14.6667 4.31808 14.6667 7.99998Z", stroke: "#697586", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))))), this.inputType === 'password' && (h("input", { key: 'dcc8a9629a87d3e17d2543b9bf7fe7f982858d5d', placeholder: this.placeholder }, this.helpIcon && (h("svg", { key: 'e094de44855c5d87bc6f75f557038790d660423c', xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { key: 'acc73a8561fc8948036a221bed0f67674bd3f19e', d: "M6.66671 5.99998C6.66671 5.2636 7.26366 4.66665 8.00004 4.66665C8.73642 4.66665 9.33337 5.2636 9.33337 5.99998C9.33337 6.26541 9.25581 6.51273 9.12212 6.72051C8.72365 7.33976 8.00004 7.93027 8.00004 8.66665V8.99998M7.9947 11.3333H8.00069M14.6667 7.99998C14.6667 11.6819 11.6819 14.6666 8.00004 14.6666C4.31814 14.6666 1.33337 11.6819 1.33337 7.99998C1.33337 4.31808 4.31814 1.33331 8.00004 1.33331C11.6819 1.33331 14.6667 4.31808 14.6667 7.99998Z", stroke: "#697586", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))))), this.inputType === 'password_icon_leading' && (h("input", { key: '74841d9079cacb1cf87719eee5a0869dc9c854f0', placeholder: this.placeholder }, this.icon && (h("div", { key: '665aff2660d1e38aa0e11d3ce3c356dec6c25dbe', class: "icon" }, h("img", { key: '1037e61fc2a8ff1134928424587e9c2f94ebe373', src: icon, alt: "Icon" }))), this.helpIcon && (h("svg", { key: '84525e31b70412089124a56103eda3379889e2ec', xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { key: 'd3f25bcdd5bce9f1cb23bcba193f55a252c8b33a', d: "M6.66671 5.99998C6.66671 5.2636 7.26366 4.66665 8.00004 4.66665C8.73642 4.66665 9.33337 5.2636 9.33337 5.99998C9.33337 6.26541 9.25581 6.51273 9.12212 6.72051C8.72365 7.33976 8.00004 7.93027 8.00004 8.66665V8.99998M7.9947 11.3333H8.00069M14.6667 7.99998C14.6667 11.6819 11.6819 14.6666 8.00004 14.6666C4.31814 14.6666 1.33337 11.6819 1.33337 7.99998C1.33337 4.31808 4.31814 1.33331 8.00004 1.33331C11.6819 1.33331 14.6667 4.31808 14.6667 7.99998Z", stroke: "#697586", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))))), this.inputType === 'count' && (h("input", { key: 'e419d25736dec54d3b01b1463387d9f19b198eb1', placeholder: this.placeholder }, this.icon && (h("div", { key: 'ae58b694374e886ebd4b4d5a596787f54ac3ae04', class: "icon" }, h("img", { key: 'a7f7b397b05b12b539c2843fa9e62121c64c785b', src: icon, alt: "Icon" }))), this.helpIcon && (h("svg", { key: 'a0985b4decc213cfd6aaecdfd7df5d3c76ae0c6d', xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { key: '8cb6a1370d5436a33db60394d28bce6478d479d1', d: "M6.66671 5.99998C6.66671 5.2636 7.26366 4.66665 8.00004 4.66665C8.73642 4.66665 9.33337 5.2636 9.33337 5.99998C9.33337 6.26541 9.25581 6.51273 9.12212 6.72051C8.72365 7.33976 8.00004 7.93027 8.00004 8.66665V8.99998M7.9947 11.3333H8.00069M14.6667 7.99998C14.6667 11.6819 11.6819 14.6666 8.00004 14.6666C4.31814 14.6666 1.33337 11.6819 1.33337 7.99998C1.33337 4.31808 4.31814 1.33331 8.00004 1.33331C11.6819 1.33331 14.6667 4.31808 14.6667 7.99998Z", stroke: "#697586", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))), h("span", { key: 'f6319c128ecc967b3737b44703e88b44c9f293ff' }, h("button", { key: '7ce4302efa9a9aeeffc405af1942ef231b78b33a', class: "decrease-btn" }, h("svg", { key: '8f9a5147536130603c51375eca3058064f4049f0', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, h("path", { key: '0d3f3919eea529ef5bc15e63b37f8da13895383d', d: "M16.6666 10L3.33329 10", stroke: "#4B5565", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))), h("button", { key: '8bb9b16ac110888806d4e6d96a16e6e9160b6bef', class: "increase-btn" }, h("svg", { key: '926c09e6319e444289b0b8be8671b1e00b4a0c98', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, h("path", { key: 'bec28be6617c7ea940188473c931a768e76f4a9a', d: "M10 3.33334L10 16.6667M16.6667 10L3.33337 10", stroke: "#4B5565", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })))))), h("p", { key: 'f6d06d17f620be15027492a0947aa66f8a81f208', class: "help-text" }, "This is a hint to help the user")));
+        return (h("div", { key: 'a43d52c30628a78beef1cd8dada81942427ab029', class: classes }, h("label", { key: '48435f6dfb783da7de0d46c30357ad3c43c0e883' }, this.label), this.inputType === 'default' && (h("div", { key: '132c621e2deb45be9d4736296490a6b5c1774d70', class: "input-wrapper" }, h("input", { key: 'a04f8d0e59703ced439048cf76a19891b01d1c77', placeholder: this.placeholder }), this.helpIcon && (h("div", { key: '072554448c6264bbb9f0baec88335bf8944fcc42', class: "help-icon" }, h("svg", { key: '84ff0279f7e87a7c8981838f3e0714e05a2c0756', xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { key: '0b8102c179823c9e5c848af2fa4c44bbddc6cdb0', d: "M6.66671 5.99998C6.66671 5.2636 7.26366 4.66665 8.00004 4.66665C8.73642 4.66665 9.33337 5.2636 9.33337 5.99998C9.33337 6.26541 9.25581 6.51273 9.12212 6.72051C8.72365 7.33976 8.00004 7.93027 8.00004 8.66665V8.99998M7.9947 11.3333H8.00069M14.6667 7.99998C14.6667 11.6819 11.6819 14.6666 8.00004 14.6666C4.31814 14.6666 1.33337 11.6819 1.33337 7.99998C1.33337 4.31808 4.31814 1.33331 8.00004 1.33331C11.6819 1.33331 14.6667 4.31808 14.6667 7.99998Z", stroke: "#697586", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })))))), this.inputType === 'icon_leading' && (h("div", { key: 'd4023fe10a3bc7ccf8398166deaab65f5f7e713c', class: "input-wrapper" }, this.icon && (h("div", { key: '68552eea2160f78ed0c17a72be912d0c64ef1f31', class: "icon" }, h("img", { key: '6099d3119538693ddb20ea91e25f422a87031919', src: icon, alt: "Icon" }))), h("input", { key: 'd0e759feeb94ff6759ad9acbbe568505348bdfac', placeholder: this.placeholder, type: 'email' }), this.helpIcon && (h("div", { key: 'c28895ce6150218c41c9b466a8b1ea1c394ad3a6', class: "help-icon" }, h("svg", { key: 'e2db4a94f09c13684172f05c008c0796e5ae0fb4', xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { key: '9a83334e2a3c86ca84b54df1c1a483af0515dfa6', d: "M6.66671 5.99998C6.66671 5.2636 7.26366 4.66665 8.00004 4.66665C8.73642 4.66665 9.33337 5.2636 9.33337 5.99998C9.33337 6.26541 9.25581 6.51273 9.12212 6.72051C8.72365 7.33976 8.00004 7.93027 8.00004 8.66665V8.99998M7.9947 11.3333H8.00069M14.6667 7.99998C14.6667 11.6819 11.6819 14.6666 8.00004 14.6666C4.31814 14.6666 1.33337 11.6819 1.33337 7.99998C1.33337 4.31808 4.31814 1.33331 8.00004 1.33331C11.6819 1.33331 14.6667 4.31808 14.6667 7.99998Z", stroke: "#697586", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })))))), this.inputType === 'leading_dropdown' && (h("div", { key: 'de513e2ed28f1f5ddc720480c20324254d674e96', class: "input-wrapper" }, this.icon && (h("div", { key: '3ec096ed8c601f0f8aeaada6a960a805f1deb420', class: "icon" }, h("img", { key: '18e98dddc74da9dbf6674c146a741b20b1f5eaa9', src: icon, alt: "Icon" }))), h("select", { key: 'cf52ccc40894155bfb9b3bcd0dcede7fb8d74911' }), h("input", { key: '2fb8eeb23c95e9a817d6a089c15f0cac81d4929b', placeholder: this.placeholder }, this.helpIcon && (h("svg", { key: 'a22ce99e5f1d2cf2c8fdf37630bf00b0af955b96', xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { key: '612ec7eb6548146d1859c23e00eee3ce8654d126', d: "M6.66671 5.99998C6.66671 5.2636 7.26366 4.66665 8.00004 4.66665C8.73642 4.66665 9.33337 5.2636 9.33337 5.99998C9.33337 6.26541 9.25581 6.51273 9.12212 6.72051C8.72365 7.33976 8.00004 7.93027 8.00004 8.66665V8.99998M7.9947 11.3333H8.00069M14.6667 7.99998C14.6667 11.6819 11.6819 14.6666 8.00004 14.6666C4.31814 14.6666 1.33337 11.6819 1.33337 7.99998C1.33337 4.31808 4.31814 1.33331 8.00004 1.33331C11.6819 1.33331 14.6667 4.31808 14.6667 7.99998Z", stroke: "#697586", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })))))), this.inputType === 'payment_input' && (h("div", { key: '4896ad44b20c3530ff22316618ae99923e2c6d28', class: "input-wrapper" }, h("span", { key: '9dddf7fd7aa845d285466536626d5678442f4a37', class: 'payment-icon' }, "$"), h("input", { key: 'f9851f17e51f6148028556cea88be75bc6699582', placeholder: this.placeholder }, this.helpIcon && (h("svg", { key: '1d46c98698012bf828a90df5748917f19c72be4d', xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { key: 'f9d1bd0d66f411af15f1cc0427904b7969fc0dd3', d: "M6.66671 5.99998C6.66671 5.2636 7.26366 4.66665 8.00004 4.66665C8.73642 4.66665 9.33337 5.2636 9.33337 5.99998C9.33337 6.26541 9.25581 6.51273 9.12212 6.72051C8.72365 7.33976 8.00004 7.93027 8.00004 8.66665V8.99998M7.9947 11.3333H8.00069M14.6667 7.99998C14.6667 11.6819 11.6819 14.6666 8.00004 14.6666C4.31814 14.6666 1.33337 11.6819 1.33337 7.99998C1.33337 4.31808 4.31814 1.33331 8.00004 1.33331C11.6819 1.33331 14.6667 4.31808 14.6667 7.99998Z", stroke: "#697586", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })))))), this.inputType === 'tags' && (h("input", { key: 'aa6b5a0b767d618ac255f28e191ba02704048e6a', placeholder: this.placeholder }, h("slot", { key: '6366ff03e6542111dd9c1314d501ebfb5624dc48' }), this.helpIcon && (h("svg", { key: 'b26874ed577bf38f90bba8fad4076c51c32e127f', xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { key: 'e671ba746e4b8b8aadec1236d913b853fb8723fe', d: "M6.66671 5.99998C6.66671 5.2636 7.26366 4.66665 8.00004 4.66665C8.73642 4.66665 9.33337 5.2636 9.33337 5.99998C9.33337 6.26541 9.25581 6.51273 9.12212 6.72051C8.72365 7.33976 8.00004 7.93027 8.00004 8.66665V8.99998M7.9947 11.3333H8.00069M14.6667 7.99998C14.6667 11.6819 11.6819 14.6666 8.00004 14.6666C4.31814 14.6666 1.33337 11.6819 1.33337 7.99998C1.33337 4.31808 4.31814 1.33331 8.00004 1.33331C11.6819 1.33331 14.6667 4.31808 14.6667 7.99998Z", stroke: "#697586", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))))), this.inputType === 'password' && (h("input", { key: '0376f85637de05aae632ac1b9a7afa17d0352b66', placeholder: this.placeholder }, this.helpIcon && (h("svg", { key: '92698adce5ddf8f50c816142dc8d506b6bfa22c4', xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { key: '34724f3fe6a6cb4ae356ca5e42261a7b6b450c8a', d: "M6.66671 5.99998C6.66671 5.2636 7.26366 4.66665 8.00004 4.66665C8.73642 4.66665 9.33337 5.2636 9.33337 5.99998C9.33337 6.26541 9.25581 6.51273 9.12212 6.72051C8.72365 7.33976 8.00004 7.93027 8.00004 8.66665V8.99998M7.9947 11.3333H8.00069M14.6667 7.99998C14.6667 11.6819 11.6819 14.6666 8.00004 14.6666C4.31814 14.6666 1.33337 11.6819 1.33337 7.99998C1.33337 4.31808 4.31814 1.33331 8.00004 1.33331C11.6819 1.33331 14.6667 4.31808 14.6667 7.99998Z", stroke: "#697586", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))))), this.inputType === 'password_icon_leading' && (h("input", { key: 'aab9a7976d330d0b64bfde1b8d383243a4700808', placeholder: this.placeholder }, this.icon && (h("div", { key: 'de1bbdcd13bc44c7d8bd45a19990b2e4744e2387', class: "icon" }, h("img", { key: '01acc44dd1fc2f81c4f085f85128b6902640bb83', src: icon, alt: "Icon" }))), this.helpIcon && (h("svg", { key: '54f632a11db9397b0f19e6307f17bbcacb5942e3', xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { key: '7282a088330f7702c822c88b46e4196feb5735e6', d: "M6.66671 5.99998C6.66671 5.2636 7.26366 4.66665 8.00004 4.66665C8.73642 4.66665 9.33337 5.2636 9.33337 5.99998C9.33337 6.26541 9.25581 6.51273 9.12212 6.72051C8.72365 7.33976 8.00004 7.93027 8.00004 8.66665V8.99998M7.9947 11.3333H8.00069M14.6667 7.99998C14.6667 11.6819 11.6819 14.6666 8.00004 14.6666C4.31814 14.6666 1.33337 11.6819 1.33337 7.99998C1.33337 4.31808 4.31814 1.33331 8.00004 1.33331C11.6819 1.33331 14.6667 4.31808 14.6667 7.99998Z", stroke: "#697586", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))))), this.inputType === 'count' && (h("input", { key: 'f344fdc522d1205e39ee40b21185a836bf7c2301', placeholder: this.placeholder }, this.icon && (h("div", { key: '09fa592838bc4225033ac28d9bf677af65fba0d2', class: "icon" }, h("img", { key: '4f5ab61e79c807e257404af7453655cec83e94f7', src: icon, alt: "Icon" }))), this.helpIcon && (h("svg", { key: '3cc7bad3f4db4a258834a6a9c11d1bbe6ffe3205', xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { key: '027fdd0cc9241393fa621b1c02bd173aaa2c5228', d: "M6.66671 5.99998C6.66671 5.2636 7.26366 4.66665 8.00004 4.66665C8.73642 4.66665 9.33337 5.2636 9.33337 5.99998C9.33337 6.26541 9.25581 6.51273 9.12212 6.72051C8.72365 7.33976 8.00004 7.93027 8.00004 8.66665V8.99998M7.9947 11.3333H8.00069M14.6667 7.99998C14.6667 11.6819 11.6819 14.6666 8.00004 14.6666C4.31814 14.6666 1.33337 11.6819 1.33337 7.99998C1.33337 4.31808 4.31814 1.33331 8.00004 1.33331C11.6819 1.33331 14.6667 4.31808 14.6667 7.99998Z", stroke: "#697586", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))), h("span", { key: '1da2e902e6df62a8e79ab222beafd419250cb41c' }, h("button", { key: 'a1e7194fe1ea53e38a500cab546480b4616cc506', class: "decrease-btn" }, h("svg", { key: 'f2b296db632af0e16d3d200e89c99d57d7a6389e', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, h("path", { key: '4e428ebb2ec008e67cd73dfcd6db0e036cc5e584', d: "M16.6666 10L3.33329 10", stroke: "#4B5565", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))), h("button", { key: '6558b7786351c8d88b7e3991be16eeccf4fab09e', class: "increase-btn" }, h("svg", { key: '7322e82ec2b2e16c025bc341367b9e063d79178b', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, h("path", { key: '51ab52175c5303faaaca62fc443f9dcacbbd375d', d: "M10 3.33334L10 16.6667M16.6667 10L3.33337 10", stroke: "#4B5565", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })))))), h("p", { key: '170035d516e9e376edfa24b512cdb219e04f78ac', class: "help-text" }, "This is a hint to help the user")));
     }
     static get is() { return "gb-input-field"; }
     static get encapsulation() { return "shadow"; }
@@ -44,7 +44,7 @@ export class GbInputField {
                 "mutable": false,
                 "complexType": {
                     "original": "GeneralSizes",
-                    "resolved": "\"lg\" | \"md\" | \"profile_lg\" | \"profile_md\" | \"profile_sm\" | \"sm\" | \"xl\" | \"xl2\" | \"xl3\" | \"xl4\" | \"xs\"",
+                    "resolved": "\"lg\" | \"md\" | \"profile_lg\" | \"profile_md\" | \"profile_sm\" | \"sm\" | \"xl\" | \"xl2\" | \"xl3\" | \"xl4\" | \"xs\" | \"xxs\"",
                     "references": {
                         "GeneralSizes": {
                             "location": "import",

package/dist/collection/components/gb-megainput-field-base/gb-megainput-field.css

@@ -75,10 +75,19 @@
     --success-900: #074d31;
     --success-950: #053321;
 
-    /* opacity color palette  */
+    /* ------------------------------------------opacity color palette--------------------------------------  */
+    /* 20% opacity */
     --darkBlue200-opacity20: rgba(181, 185, 204, 0.2);
     --darkBlue500-opacity20: rgba(33, 44, 101, 0.2);
 
+    /* 30% opacity */
+    --darkBlue200-opacity30: rgba(181, 185, 204, 0.3);
+    --darkBlue500-opacity30: rgba(33, 44, 101, 0.3);
+
+    /* 40% opacity */
+    --darkBlue200-opacity40: rgba(181, 185, 204, 0.4);
+    --darkBlue500-opacity40: rgba(33, 44, 101, 0.4);
+
 
     /* ------------------------------------------Secondary Color------------------------------------------- */
     /* blueLight color palete */
@@ -250,6 +259,14 @@
         --color-text-warning-bold: var(--warning-100);
     }
 
+    [data-theme="light"] {
+        --color-text-warning-subtle: var(--warning-500);
+    }
+
+    [data-theme="dark"] {
+        --color-text-warning-subtle: var(--warning-400);
+    }
+
     [data-theme="light"] {
         --color-text-sucess: var(--success-600);
     }
@@ -282,6 +299,14 @@
         --color-text-discovery-bold: var(--blueLight-100);
     }
 
+    [data-theme="light"] {
+        --color-text-discovery-subtle: var(--blueLight-400);
+    }
+
+    [data-theme="dark"] {
+        --color-text-discovery-subtle: var(--blueLight-100);
+    }
+
     [data-theme="light"] {
         --color-text-information: var(--blue-600);
     }
@@ -298,6 +323,14 @@
         --color-text-information-bold: var(--blue-100);
     }
 
+    [data-theme="light"] {
+        --color-text-information-subtle: var(--blue-500);
+    }
+
+    [data-theme="dark"] {
+        --color-text-information-subtle: var(--blue-400);
+    }
+
     [data-theme="light"] {
         --color-text-purple: var(--purple-600);
     }
@@ -314,6 +347,30 @@
         --color-text-purple-bold: var(--purple-100);
     }
 
+    [data-theme="light"] {
+        --color-text-purple-subtle: var(--purple-500);
+    }
+
+    [data-theme="dark"] {
+        --color-text-purple-subtle: var(--purple-400);
+    }
+
+    [data-theme="light"] {
+        --color-text-pink: var(--purple-600);
+    }
+
+    [data-theme="dark"] {
+        --color-text-pink: var(--purple-300);
+    }
+
+    [data-theme="light"] {
+        --color-text-pink-subtle: var(--purple-500);
+    }
+
+    [data-theme="dark"] {
+        --color-text-pink-subtle: var(--purple-400);
+    }
+
 
     /* --------------Link color--------------- */
 
@@ -1244,6 +1301,22 @@
         --color-blanket: var(--darkBlue200-opacity20);
     }
 
+    [data-theme="light"] {
+        --color-blanket-subtle: var(--darkBlue500-opacity30);
+    }
+
+    [data-theme="dark"] {
+        --color-blanket-subtle: var(--darkBlue200-opacity30);
+    }
+
+    [data-theme="light"] {
+        --color-blanket-subtler: var(--darkBlue500-opacity40);
+    }
+
+    [data-theme="dark"] {
+        --color-blanket-subtler: var(--darkBlue200-opacity40);
+    }
+
 
 
     /* ----------------Skeleton Color --------------- */