globuswebcomponents 0.3.8 → 0.4.0

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

@@ -2119,7 +2119,7 @@
 }
 
 .text-sm-regular{
-    font-size: var(--text-sm-regular-font-size);
+    font-size: var(--text-sm-regular-font-size, 0.875rem);
     font-weight: var(--text-sm-regular-font-weight);
     line-height: var(--text-sm-regular-line-height);
 }
@@ -2149,50 +2149,267 @@
 }
 
 div {
+  font-family: var(--Font-Family-Body, Sora);
+  font-style: normal;
+  letter-spacing: var(--Font-Letter-spacing-T-md, 0rem);
+}
+
+div.sm {
+  display: flex;
+  width: 20rem;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--spacing-2);
+}
+
+div.md {
   display: flex;
+  width: 20rem;
   flex-direction: column;
-  margin-bottom: 10px;
+  align-items: flex-start;
+  gap: var(--spacing-2);
+}
+
+.input-with-label {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--spacing-2);
+  align-self: stretch;
 }
 
 .input-wrapper {
   display: flex;
-  width: 320px;
+  justify-content: space-between;
   align-items: center;
-  border: 1px solid #ccc;
-  padding: 8px;
-  border-radius: 4px;
+  gap: var(--spacing-Positive-spacing-2, 0.5rem);
+  align-self: stretch;
+  border-radius: var(--rounded-sm);
+  border: 1px solid var(--color-boarder-input, #CDD5DF);
+  background: var(--color-background-card, #FFFFFF);
 }
 
-input {
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  --line-clamp: 1;
+.sm .input-wrapper {
+  height: var(--spacing-Positive-spacing-8, 2.5rem);
+  padding: 0.25rem var(--spacing-3, 0.75rem);
+}
+
+.md .input-wrapper{
+  height: 3rem;
+  padding: 0.45rem var(--spacing-3, 0.75rem);
+}
+
+.leading_text .input-wrapper.sm,
+.leading_text .input-wrapper.md {
+  flex-direction: row;
+}
+
+.count .input-wrapper.md,
+.count .input-wrapper.sm {
+  padding: 0;
+  flex-direction: row;
+}
+
+.input-wrapper:active {
+  border-radius: 0.5rem;
+  border: 1.3px solid var(--color-border-selected,#075DB2);
+  background: var(--color-background-card, #FFFFFF);
+}
+
+.disabled .input-wrapper {
+  border-radius: 0.5rem;
+  border: 1px solid var(--color-boarder-disabled, #E3E8EF);
+  background: var(--color-background-disabled, #F6F8FA);
+}
+
+.content{
+  display: flex;
+  align-items: center;
+  align-content: center;
+  gap: 0.5rem var(--spacing-Positive-spacing-2, 0.5rem);
   flex: 1 0 0;
+  align-self: stretch;
+}
+
+.payment_input .content {
+  flex-wrap: wrap;
+}
+
+.password .content{
+  padding: var(--spacing-Positive-spacing-2, 0.5rem) var(--spacing-Positive-spacing-None, 0rem) var(--spacing-Positive-spacing-2, 0.5rem) var(--spacing-Positive-spacing-3, 0.75rem);
+  flex-wrap: wrap;
+}
+
+.icon {
+  position: relative;
+  top: 3px;
+}
+
+.add-on {
+  display: flex;
+  align-items: center;
+  align-self: stretch;
 }
 
-.input-wrapper input, .input-wrapper select {
-  flex-grow: 1;
-  border: none;
+.dropdown {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-Positive-Spacing-1, 0.25rem);
+  align-self: stretch;
+}
+
+select {
+  border: none; 
+  background-color: var(--color-background-card, #FFFFFF); 
+  color: #374151; /* Text color */
+  box-shadow: none; /* Remove default box shadow */
   outline: none;
 }
 
-.tag {
+select:focus {
+  border:none; /* Maintain light border on focus */
+  box-shadow: none; /* Ensure no additional shadow appears on focus */
+}
+
+.text-input {
   display: flex;
   align-items: center;
-  background-color: #f0f0f0;
-  border-radius: 12px;
-  padding: 4px 8px;
-  margin-right: 8px;
+  gap: var(--spacing-Positive-spacing-2, 0.5rem);
+  flex: 1 0 0;
+  align-self: stretch;
 }
 
-.help-text {
-  font-size: 12px;
-  color: #888;
-  margin-top: 4px;
+.trailing_button .text-input {
+  padding: var(--spacing-Positive-spacing-2, 0.5rem) var(--spacing-Positive-spacing-3, 0.75rem);
 }
 
-button {
-  background: none;
-  border: none;
-  cursor: pointer;
+.count .text-input {
+  padding: var(--spacing-Positive-spacing-2, 0.5rem) 0rem var(--spacing-Positive-spacing-2, 0.5rem) var(--spacing-Positive-spacing-3, 0.75rem);
+  border-radius: 0.5rem var(--Radius-rounded-none, 0rem) var(--Radius-rounded-none, 0rem) 0.5rem;
+  border: 1px solid var(--color-boarder-input, #CDD5DF);
+  margin-right: -2px;
 }
+
+.leading_dropdown .text-input {
+  padding: var(--spacing-Positive-spacing-2, 0.5rem) var(--spacing-Positive-spacing-3, 0.75rem) var(--spacing-Positive-spacing-2, 0.5rem) 0rem;
+}
+
+.leading_text .text-input {
+  padding: 0.65rem 0.85rem;
+  border-left: 1px solid var(--Gray-300, #D0D5DD);
+}
+
+.trailing_dropdown .dropdown {
+  display: flex;
+  padding: var(--spacing-Positive-spacing-2, 0.5rem) var(--spacing-Positive-spacing-3, 0.75rem) var(--spacing-Positive-spacing-2, 0.5rem) 0rem;
+  justify-content: space-between;
+}
+
+.count-action {
+  display: flex;
+  justify-content: space-between;
+  padding-right: var(--spacing-1);
+  align-items: center;
+  gap: var(--spacing-none);
+  width: 100%;
+}
+
+.decrease-btn {
+  display: flex;
+  width: var(--spacing-Positive-spacing-8, 2.5rem);
+  height: var(--spacing-Positive-spacing-8, 2.5rem);
+  justify-content: center;
+  align-items: center;
+  border-radius: var(--rounded-none);
+  border-right: 1px solid var(--color-boarder-input, #CDD5DF);
+}
+
+.payment-method {
+  display: flex;
+  width: 2.125rem;
+  height: var(--spacing-Positive-spacing-6, 1.5rem);
+  justify-content: center;
+  align-items: center;
+  border-radius: var(--Radius-rounded-xs, 0.25rem);
+  border: 1px solid var(--color-boarder-subtler, #E3E8EF);
+  background: var(--color-background-card, #FFFFFF);
+}
+
+.tags-box {
+  display: flex;
+  align-items: center;
+  align-content: center;
+  gap: 0.375rem;
+  flex-wrap: wrap;
+}
+
+.tags input {
+  width: 160px;
+  padding-right: 8px;
+}
+
+input {
+  border: none; 
+  background-color: var(--color-background-card, #FFFFFF); 
+  color: #374151; /* Text color */
+  box-shadow: none; /* Remove default box shadow */
+  outline: none; /* Remove the blue outline on focus */
+  font-family: var(--Font-Family-Body, Sora);
+  font-style: normal;
+  letter-spacing: var(--Font-Letter-spacing-T-md, 0rem);
+}
+
+input:focus {
+  border:none; /* Maintain light border on focus */
+  box-shadow: none; /* Ensure no additional shadow appears on focus */
+}
+
+.trailing-btn {
+  display: flex;
+  width: var(--spacing-Positive-spacing-8, 2.5rem);
+  height: var(--spacing-Positive-spacing-8, 2.5rem);
+  justify-content: center;
+  align-items: center;
+}
+
+.leading_dropdown .help-icon svg{
+  left: -130%;
+}
+
+.trailing_dropdown .help-icon {
+  margin-left: -5px;
+}
+
+.password_icon_leading .help-icon {
+  margin-left: -15px;
+}
+
+.password_icon_leading .help-icon svg {
+  padding-right: 5px;
+}
+
+.trailing_dropdown .help-icon svg {
+  position: relative;
+  left: 5%;
+  top: 2px;
+}
+
+.leading_text .help-icon svg {
+  left: 180%;
+}
+
+.tags .help-icon svg {
+  left: -52%;
+}
+
+.help-svg {
+  position: relative;
+  left: -6%;
+  margin-right: -8px;
+}
+
+.help-icon svg{
+  position: relative;
+  left: 13%;
+  top: 3px;
+}

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

@@ -2,28 +2,29 @@ import { getAssetPath, h } from "@stencil/core";
 export class GbInputField {
     constructor() {
         this.size = undefined;
-        this.inputType = undefined;
-        this.destructive = undefined;
-        this.helpIcon = false;
-        this.icon = undefined;
-        this.placeholder = '';
+        this.type = undefined;
+        this.destructive = false;
+        this.state = undefined;
+        this.showLabel = false;
         this.label = '';
+        this.showHintText = false;
+        this.hintText = '';
+        this.showPlaceholder = false;
+        this.placeholderText = '';
+        this.showHelpIcon = false;
+        this.showValidation = false;
+        this.iconSwap = undefined;
+        this.showCloseButton = false;
     }
-    /*getIconPath(iconName: string) {
-      if (!iconName) return null;
-      return getAssetPath(`./assets/${iconName}`);
-    }
-  
-    renderIcon(iconName: string) {
-      const iconPath = this.getIconPath(iconName);
-      return iconPath ? <span><img class="icon" src={iconPath} alt="icon" /></span> : null;
-    }*/
     render() {
-        const icon = this.icon ? getAssetPath(`assets/${this.icon}.svg`) : '';
+        const iconSwap = this.iconSwap ? getAssetPath(`assets/${this.iconSwap}.svg`) : '';
         const classes = {
             [this.size]: true,
+            [this.type]: true,
+            destructive: this.destructive,
+            disabled: this.state === 'disabled',
         };
-        return (h("div", { key: '8026653848ecffeaf4654fe74bd29f3cb8e6d72d', class: classes }, h("label", { key: '7f3666cc49f0b558e7eafefebed051e3800aa2a7' }, this.label), this.inputType === 'default' && (h("div", { key: '968a78ea4eb864e8a69a14f66ae9b2ef9fd2026e', class: "input-wrapper" }, h("input", { key: 'ffb846eb853471fa5d3ff82b5d6297171c00340f', placeholder: this.placeholder }), this.helpIcon && (h("div", { key: '68c7d9603e266f9675028f8d9dafff024270b110', class: "help-icon" }, h("svg", { key: '959b99adc93b63b628b41bad511da10dba4661fd', xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { key: '139e54f5f21dc15ce9e7787c6e7620580c69ad08', 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: '424606008f97066aecf7cecdbcd932f3779429fb', class: "input-wrapper" }, this.icon && (h("div", { key: 'ed79200731c7c5ad4293fb61a25acc105975e948', class: "icon" }, h("img", { key: 'bfa0f2fe948e4ffe0f99b6b0918c6f188b3a1cba', src: icon, alt: "Icon" }))), h("input", { key: '41fe602eff191cbd26ba7807b04f55a9f71757de', placeholder: this.placeholder, type: 'email' }), this.helpIcon && (h("div", { key: 'b4b712b614b697cd9aa7b691cc39bb8a43d1ea84', class: "help-icon" }, h("svg", { key: 'fc55109e4be904597c104b73b57346d205447c7e', xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { key: '65a1e21db0b51c0283766c2ce9cf6be25bcca8d0', 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: '76670c7e1cc2bb896f0122469255d10bbc001031', class: "input-wrapper" }, this.icon && (h("div", { key: '93c7decf068cfb3b228f4682e8f1408b2afed44d', class: "icon" }, h("img", { key: '5d8fc47aa1d7b45e2d31d1478f0b08ed877d6d76', src: icon, alt: "Icon" }))), h("select", { key: 'c62c98bafc65a8cd0744aaf34040ac2074e02e7f' }), h("input", { key: '0b3edc2caff00183efa84aeb9c4d4e188cfbcb4f', placeholder: this.placeholder }, this.helpIcon && (h("svg", { key: 'a23336464536a6f9f15a2097ce00650faa28c049', xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { key: '83f0231436fcb22d608bfc9c66016a650bdb931a', 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: 'aeee6a6ed4452bf188f7ecabaa8c117c7c83f805', class: "input-wrapper" }, h("span", { key: '3bd71fa7bbd1831012f51738466e8e9d9f76a7d4', class: 'payment-icon' }, "$"), h("input", { key: 'ff1263c4e6e1a95b1f8eec8323cb5cc9c36741ca', placeholder: this.placeholder }, this.helpIcon && (h("svg", { key: 'c3e4cf4bafe741c5501896875ab17a5d30b75da8', xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { key: 'b82e7b66ab86a27a42b2c1f5548902db2fa1cbd3', 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: 'cbc41b334265427f05dc4cf17424ec6a8597ed3a', placeholder: this.placeholder }, h("slot", { key: 'c339411e93456c6cfc9de63e45a2be3e9fe6d4e8' }), this.helpIcon && (h("svg", { key: 'ddca8bdc4b302a62b24499363279441b22a35a6d', xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { key: '1343f6f354d2347df7d2c39c769b1f10fc4dbd66', 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: 'c47e0dc24df30edcc7f31534d942d5e411515b37', placeholder: this.placeholder }, this.helpIcon && (h("svg", { key: '260d60e9ea242c9ca2f010e239e487a3f398361c', xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { key: '929cb1f7585838934bb1846549c40c9edc14d27b', 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: '0b0127f7655ba07e9d5e746c510594e901fad9b8', placeholder: this.placeholder }, this.icon && (h("div", { key: '97165a0085d276c416d5068f561c90d420eabe20', class: "icon" }, h("img", { key: 'dafa6da53e18547f1284610034e0c289f056f949', src: icon, alt: "Icon" }))), this.helpIcon && (h("svg", { key: '0eafb11624d4333ca28bc84ab0220c601c8e3ad4', xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { key: '6afaa8322963dd7e727e8baa2acf6e16c5031c92', 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: '5b64dae701c9e9ec18e13834e2b55012efb06ed0', placeholder: this.placeholder }, this.icon && (h("div", { key: 'f3ae48484a956d1ded606dff2eb9e5597d2fdf57', class: "icon" }, h("img", { key: 'c534d50610c5891db120319b154d01c60b6f7558', src: icon, alt: "Icon" }))), this.helpIcon && (h("svg", { key: 'c3b9da8a7f883b35d35a8eca81922f2122c51f34', xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { key: 'f3fe8562ffd148f3c9b5fea3d660e1663f114a85', 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: 'be3ec915ec1e53449f95a1c5a1aabc4401c8ef23' }, h("button", { key: 'a3f79124b2e140a1c8260a72be8f7b605e36f814', class: "decrease-btn" }, h("svg", { key: '16f622d958d8aea7d3f7a2c86bf7bef4aeeaa1a5', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, h("path", { key: '0af58a32828d8b96d4691f4bd6b061e7c17cda1d', d: "M16.6666 10L3.33329 10", stroke: "#4B5565", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))), h("button", { key: '08fb89b8f174a2d17848a8b84ae16c6506192b15', class: "increase-btn" }, h("svg", { key: '644e01fa9df2e838b543391c6b863267f863d561', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, h("path", { key: 'e06a09fa65717c20ecf237c44d3768471ad21d7c', 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: '16770472182cca2d059936a0a7a0f08679937d0b', class: "help-text" }, "This is a hint to help the user")));
+        return (h("div", { key: '273206a0c01b91481276a301a581b343fd0b0d1a', class: classes }, h("div", { key: '39308e9a0e6b2cdabf286278135ac33f3f5715ea', class: "input-with-label" }, this.showLabel && this.label ? h("label", { htmlFor: "input" }, this.label) : null, this.type === 'default' && (h("div", { key: '56656cc4571310a18afc7dcd91887e1efdc8e3a5', class: "input-wrapper" }, h("input", { key: 'd0b2d645545a252e0dd98430658d3bf632a6a8ca', class: "text-md-regular", placeholder: this.showPlaceholder ? this.placeholderText : '' }), this.showValidation && h("span", { key: '49884409ff38199fd7642860ddd80fab98c8e211' }), this.showHelpIcon && (h("div", { key: 'f9f4a607707a4abe1dcb3b11536b4ac31d02d9e2', class: "help-icon" }, h("svg", { key: 'ba66bfea859649639e8481e3254fa3a4a1861c30', xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { key: '473fd003d1213556e63d7eca8a5638b271de7bd1', 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.type === 'icon_leading' && (h("div", { key: 'e80145e0c2d641bca51d988e6f87a0a33fd4fbc9', class: "input-wrapper" }, h("div", { key: '5a024afa95f5c464c34b41a86cb3b33c46097721', class: "content" }, h("div", { key: 'da1ff9bdabf4d2f002cd30daa4753b6de5fdde69', class: "icon" }, this.iconSwap ? (h("img", { src: iconSwap, alt: "Icon" })) : (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, h("path", { d: "M5.83342 7.08334L8.2851 8.53286C9.71443 9.37794 10.2857 9.37794 11.7151 8.53286L14.1668 7.08334M7.58243 2.94713C9.1995 2.9065 10.8007 2.9065 12.4177 2.94713C15.0415 3.01305 16.3534 3.04602 17.296 3.99221C18.2386 4.9384 18.2658 6.21571 18.3203 8.77032C18.3378 9.59172 18.3378 10.4083 18.3203 11.2297C18.2658 13.7843 18.2386 15.0616 17.296 16.0078C16.3533 16.954 15.0415 16.9869 12.4177 17.0529C10.8007 17.0935 9.19951 17.0935 7.58244 17.0529C4.95869 16.9869 3.64682 16.954 2.70421 16.0078C1.76161 15.0616 1.73437 13.7843 1.67989 11.2297C1.66237 10.4083 1.66237 9.59171 1.67989 8.77031C1.73436 6.21569 1.7616 4.93839 2.70421 3.9922C3.64682 3.046 4.95869 3.01304 7.58243 2.94713Z", stroke: "#4B5565", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })))), h("input", { key: 'b5e51d8ba8c8a62a6c808305f8cb06070342f666', class: "text-md-regular", placeholder: this.showPlaceholder ? this.placeholderText : '', type: "email" })), this.showValidation && h("span", { key: '897d544041613f61290af51d2587b2d567de939f' }), this.showHelpIcon && (h("div", { key: '3ef28a199f6d34d175f461b6d3847183c729da88', class: "help-icon" }, h("svg", { key: '936c8dcda5cfc023c15188bde0915dcc7895bc0a', xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { key: 'f2917baca4867c151b18df4813f0ff8695ad21bf', 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.showCloseButton && h("gb-button", { key: '319db24a0f0eb4da17ed10f4f83a9daaea1d08ff', size: "sm", hierarchy: "tertiary_gray", icon: "only", "icon-leading": true, "icon-leading-swap": "assets/cancel-button.svg" }))), this.type === 'leading_dropdown' && (h("div", { key: '86ed3094befccb9e93dc8bbe05d6c50d10c39d27', class: "input-wrapper" }, h("div", { key: '8ab4f3bccd33ae0da22c3ba5fafa92889be03b29', class: "dropdown" }, h("div", { key: 'a252875d0b8a2034d6d8f51602a17e81c5ee61b5', class: "country-icon" }, h("svg", { key: '14c1d8a778cb451d8129fe2f776f7fbc93ec1614', xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, h("path", { key: 'c1033cf70c8dfb1a8c0ec0a5686220a52f21e9cb', d: "M-0.000488281 12.0002C-0.000488281 17.1599 3.25601 21.5583 7.82562 23.2539V0.746674C3.25601 2.44214 -0.000488281 6.84071 -0.000488281 12.0002Z", fill: "#6DA544" }), h("path", { key: 'ca3094255f0a8acadf8c68769d754de317cd8952', d: "M23.9999 12.0002C23.9999 6.8407 20.7434 2.44214 16.1738 0.746674V23.2539C20.7434 21.5583 23.9999 17.1599 23.9999 12.0002Z", fill: "#6DA544" }))), h("select", { key: '3ba878d95449505cb965532a3c2f165bda016bac', class: "text-md-regular" }, h("option", { key: '26fd6c4c857a4e83a7220538256433986983fcfc', value: "option 1", selected: true }, "+234"), h("slot", { key: '8c209cc0f5ab7d3b73ec1654219b576cab38f518', name: "country-option" }))), h("div", { key: '4fa762c8b574f294df0e5874df30a6121675ad0d', class: "text-input" }, h("input", { key: '8bc43086d55f0abec04618a7961b4f60d643250d', class: "text-md-regular", placeholder: this.showPlaceholder ? this.placeholderText : '' }), this.showValidation && h("span", { key: 'c8835af8a3e7badb479d8d8d8658b23cc36826f4' }), this.showHelpIcon && (h("div", { key: '5a2ac994453ca764b321974705ac343578fedf3f', class: "help-icon" }, h("svg", { key: '8f953f8ea7aa6c48589259b887ab5db6dd9af5c3', xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { key: 'ab9b601d80d9aab26e5b3ca877de440578af652c', 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.type === 'trailing_dropdown' && (h("div", { key: 'b12cc558495e8738798f6696d647b7669e6256c1', class: "input-wrapper" }, h("div", { key: '6f2dd63a022f1587a63251639935cbd1bc94b8b5', class: "content" }, h("div", { key: 'b2b43495140575d35eff5945083973bd11309e4d', class: "text-input" }, h("p", { key: 'cd618f149402f1b2299959f0b288a458c77b9b31', class: "text-md-regular" }, "$"), h("input", { key: 'a1028d401e90b44b2bc5453012b9cf802d5efbeb', class: "text-md-regular", placeholder: this.showPlaceholder ? this.placeholderText : '' })), this.showValidation && h("span", { key: 'fcd9abe9007cebd0a6164cfcc7af52a1ade91d97' }), this.showHelpIcon && (h("div", { key: 'c323b05d20c71e9b680abc9d360bb180307d763e', class: "help-icon" }, h("svg", { key: '5fb103a5429af1d848625c8f63e16db8d9922c01', xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { key: 'a92751fd6f762314f4e59c9af79a4a6d44d442c8', 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("div", { key: 'a82dcd3ecdf49b4a29df6553c4cf14da9aeebcb8', class: "dropdown" }, h("select", { key: '7dea498d3f5e21dcfe5c9c9375092f3a7bf9d3c7', class: "text-md-regular" }, h("option", { key: '8d42208f1073a9b0fd65cb1a92de58a064fd44ba', value: "option 1", selected: true }, "USD"), h("slot", { key: '7d46af2d62e6c253508b3954f920000ddb9e569b', name: "option" }))))), this.type === 'leading_text' && (h("div", { key: '717008e6eb53533b43ec5956d905bffc34608f1a', class: `input-wrapper ${this.size}` }, h("div", { key: 'e6ed552cfc16d3027b9726ff639cb29e9c63848c', class: "add-on" }, h("p", { key: '46980f731718eb75880006a69e6e8509ffd59450' }, "http://")), h("div", { key: 'af6b5ef941ed74f98bb3bbb094524526fce665d6', class: "text-input" }, h("input", { key: '40e2b331a2892922e3723a698c963088d4e03f09', class: "text-md-regular", placeholder: this.showPlaceholder ? this.placeholderText : '' }), this.showValidation && h("span", { key: '2b3f974411c4d76efc60d5345c3ac8fe8d82c01c' }), this.showHelpIcon && (h("div", { key: '2bfc6f735a420263db10133436a07c15768df9a7', class: "help-icon" }, h("svg", { key: 'b3b68ba22a89360089409969c5e990b6b3bcfd4e', xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { key: '0d1087b0fae801b8addf8220c3f3e98361c5f9df', 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.type === 'payment_input' && (h("div", { key: '3eaf1746adc0e3f071ef0622ff84fca646daca6d', class: "input-wrapper" }, h("div", { key: '253c77b8b344a307af119e08a37b2a208fcf0641', class: "content" }, h("div", { key: 'cebe1cdc97c57e3974bac7f179a56a12bea471f6', class: "payment-method" }, h("svg", { key: '44447ba5f8806414bfde9a34067e55208a69bda0', xmlns: "http://www.w3.org/2000/svg", width: "23", height: "14", viewBox: "0 0 23 14", fill: "none" }, h("path", { key: '0ea9ee1c09e69a8b96f3c558ff71e2d4706debb1', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M11.179 11.8294C9.99493 12.8275 8.45902 13.43 6.78069 13.43C3.03582 13.43 0 10.4303 0 6.72997C0 3.02966 3.03582 0.0299683 6.78069 0.0299683C8.45902 0.0299683 9.99493 0.632466 11.179 1.63051C12.363 0.632466 13.8989 0.0299683 15.5773 0.0299683C19.3221 0.0299683 22.358 3.02966 22.358 6.72997C22.358 10.4303 19.3221 13.43 15.5773 13.43C13.8989 13.43 12.363 12.8275 11.179 11.8294Z", fill: "#ED0006" }), h("path", { key: '35480345515a77e6bf96546128cdc9f3e34ce0e3', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M11.179 11.8294C12.6369 10.6005 13.5614 8.77192 13.5614 6.72997C13.5614 4.68801 12.6369 2.85941 11.179 1.63051C12.363 0.632465 13.8989 0.0299683 15.5772 0.0299683C19.3221 0.0299683 22.3579 3.02966 22.3579 6.72997C22.3579 10.4303 19.3221 13.43 15.5772 13.43C13.8989 13.43 12.363 12.8275 11.179 11.8294Z", fill: "#F9A000" }), h("path", { key: '0204766ec95bbee3b4a5a79218af5f3ccba8bb0b', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M11.179 11.8294C12.6369 10.6005 13.5614 8.77193 13.5614 6.72999C13.5614 4.68805 12.6369 2.85946 11.179 1.63055C9.72109 2.85946 8.79663 4.68805 8.79663 6.72999C8.79663 8.77193 9.72109 10.6005 11.179 11.8294Z", fill: "#FF5E00" }))), h("input", { key: 'cd2b01b677e0c06faffa0f160c7de23470203bb1', class: "text-md-regular", placeholder: this.showPlaceholder ? this.placeholderText : '' })), this.showValidation && h("span", { key: '5fe64f2ebef1aa709eb89ccc6939199fdaafe6b1' }), this.showHelpIcon && (h("div", { key: '7430c78f215a42ec527ff4c85b4b8d3cac1893bc', class: "help-icon" }, h("svg", { key: '8e18cd5dccc30c448dc70be7991328fa3c5a789f', xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { key: '6339c03bff77cbca5cbcc223481bb155bed313ee', 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.type === 'tags' && (h("div", { key: '1320502674bb92ac785a3198f3b388cdcad6a83a', class: "input-wrapper" }, h("div", { key: '2ff163be860c7843a79f91192433f25e663f6a13', class: "content" }, h("div", { key: '073cd9831ffc11d22054100c2cb2ae357ed21428', class: "tags-box" }, h("slot", { key: '18990b87e2ba5da898a0b127dd5436d32aca7d78', name: "tag-option" })), h("input", { key: 'b357fe499b948bb00bc3ac4e17bc493c18fe415b', class: "text-md-regular", placeholder: this.showPlaceholder ? this.placeholderText : '' })), this.showValidation && h("span", { key: '1fb550af6908d1762d7c43a0c481df2901b2fe1c' }), this.showHelpIcon && (h("div", { key: 'b37fdeb7906255ca635125c9ed4934511fb10544', class: "help-icon" }, h("svg", { key: '2a628ef2c955204f6dd9eba90d6295238f0509e5', xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { key: '40f576aa3111f9b8a681469afe0d50060c0087fd', 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.type === 'trailing_button' && (h("div", { key: 'd5a4e53c344e230fda9b66ba607ad318801a281d', class: "input-wrapper" }, h("div", { key: '8502aafcc87abdfef6eaf291ea813b5b0c16e87c', class: "text-input" }, h("input", { key: '73e32ddf3e3ab5d5df7dd801701aab93bd36661d', class: "text-md-regular", placeholder: this.showPlaceholder ? this.placeholderText : '' }), this.showValidation && h("span", { key: '59dc56047c90ddc0ad9a391e3b7717c829a6abf6' }), this.showHelpIcon && (h("div", { key: '77ba90580422c504dc0d726c127e8a43a2e2cce8', class: "help-icon" }, h("svg", { key: '0775753a414d6babe69f021b60df5d877668df25', xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { key: '3e06d540e56bd88985bb8cd5c2c49ce26864583e', 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("div", { key: '98c8776495166e69404786760dc92b10dd0986c2', class: "trailing-btn" }, h("gb-button", { key: 'eb96e143b2835caebc9c33317d839835b5d17ece', size: "md", hierarchy: "tertiary_gray", icon: "only", "icon-leading": true, "icon-leading-swap": "assets/copy.svg" })))), this.type === 'password' && (h("div", { key: '74c69523bcc4932d69dbb36c415a5f640e8f4752', class: "input-wrapper" }, h("div", { key: 'f922dd3abbe651959fc4ff162f68afd9da84f983', class: "content" }, h("div", { key: 'a1066ba9e65c3a04cc88195c718f8940ac8a4990', class: "text-input" }, h("input", { key: '07b902259d73134f50d91bbfd5a20ab6756281ff', class: "text-md-regular", placeholder: this.showPlaceholder ? this.placeholderText : '', type: "password" })), this.showValidation && h("span", { key: '92603ac88c3e3202004c2708978507514d84c7d8' }), this.showHelpIcon && (h("div", { key: 'b502251550df56d3e69e56b1dc5c06773f02c0b0', class: "help-icon" }, h("svg", { key: 'e29bf50d9528fa5c217b1334e2c28e99a2e6bd0f', xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { key: '8e3a6028d6a5b2ed1b0ea5d0e826361c370df73b', 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("div", { key: '1864bc45981938a4d03636c558ada06315bcaaf8', class: "dropdown" }, h("gb-password-button", { key: 'cfc1824c59cc55ae2618a09a653505187ead3e6f' })))), this.type === 'password_icon_leading' && (h("div", { key: '2aa8d45b64d0f6107b68a543b239e64ebb8e93fa', class: "input-wrapper" }, h("div", { key: '4aa7ef9fc0ed03ee9ff583023a9c0a2fad65e5fc', class: "content" }, this.iconSwap ? (h("img", { src: iconSwap, alt: "Icon" })) : (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, h("path", { d: "M12.0759 12.1667C11.6617 12.1667 11.3259 12.5024 11.3259 12.9167C11.3259 13.3309 11.6617 13.6667 12.0759 13.6667V12.1667ZM12.0833 13.6667C12.4976 13.6667 12.8333 13.3309 12.8333 12.9167C12.8333 12.5024 12.4976 12.1667 12.0833 12.1667V13.6667ZM7.91668 12.1667C7.50246 12.1667 7.16668 12.5024 7.16668 12.9167C7.16668 13.3309 7.50246 13.6667 7.91668 13.6667V12.1667ZM7.92415 13.6667C8.33836 13.6667 8.67415 13.3309 8.67415 12.9167C8.67415 12.5024 8.33836 12.1667 7.92415 12.1667V13.6667ZM16.4435 10.1294L17.1868 10.0293L16.4435 10.1294ZM13.7003 7.58257L13.7347 6.83336L13.7003 7.58257ZM13.7003 18.2507L13.7347 19L13.7003 18.2507ZM16.4435 15.7039L15.7002 15.6039L16.4435 15.7039ZM6.29973 7.58257L6.33417 8.33178L6.29973 7.58257ZM3.55652 10.1294L2.81323 10.0293L3.55652 10.1294ZM6.29973 18.2507L6.33417 17.5015L6.29973 18.2507ZM3.55652 15.7039L4.29981 15.6039L3.55652 15.7039ZM5.50001 7.49999C5.50001 7.9142 5.8358 8.24999 6.25001 8.24999C6.66422 8.24999 7.00001 7.9142 7.00001 7.49999H5.50001ZM13 7.49999C13 7.9142 13.3358 8.24999 13.75 8.24999C14.1642 8.24999 14.5 7.9142 14.5 7.49999H13ZM12.0759 13.6667H12.0833V12.1667H12.0759V13.6667ZM7.91668 13.6667H7.92415V12.1667H7.91668V13.6667ZM10 17.5833C8.69057 17.5833 7.50287 17.5553 6.33417 17.5015L6.26528 19C7.45761 19.0548 8.66829 19.0833 10 19.0833V17.5833ZM13.6659 17.5015C12.4972 17.5553 11.3094 17.5833 10 17.5833V19.0833C11.3317 19.0833 12.5424 19.0548 13.7347 19L13.6659 17.5015ZM17.1868 15.804C17.3105 14.8853 17.4167 13.9152 17.4167 12.9167H15.9167C15.9167 13.8141 15.8211 14.7058 15.7002 15.6039L17.1868 15.804ZM17.4167 12.9167C17.4167 11.9181 17.3105 10.948 17.1868 10.0293L15.7002 10.2294C15.8211 11.1275 15.9167 12.0192 15.9167 12.9167H17.4167ZM10 8.24999C11.3095 8.24999 12.4972 8.27805 13.6659 8.33178L13.7347 6.83336C12.5424 6.77855 11.3317 6.74999 10 6.74999V8.24999ZM6.33417 8.33178C7.50287 8.27805 8.69057 8.24999 10 8.24999V6.74999C8.66829 6.74999 7.45761 6.77855 6.26528 6.83336L6.33417 8.33178ZM2.81323 10.0293C2.68953 10.948 2.58334 11.9181 2.58334 12.9167H4.08334C4.08334 12.0192 4.1789 11.1275 4.29981 10.2294L2.81323 10.0293ZM2.58334 12.9167C2.58334 13.9152 2.68953 14.8853 2.81323 15.804L4.29981 15.6039C4.1789 14.7058 4.08334 13.8141 4.08334 12.9167H2.58334ZM17.1868 10.0293C16.9527 8.29065 15.5122 6.91507 13.7347 6.83336L13.6659 8.33178C14.6943 8.37906 15.5595 9.18436 15.7002 10.2294L17.1868 10.0293ZM13.7347 19C15.5122 18.9182 16.9527 17.5427 17.1868 15.804L15.7002 15.6039C15.5595 16.649 14.6943 17.4543 13.6659 17.5015L13.7347 19ZM6.26528 6.83336C4.48781 6.91507 3.04732 8.29065 2.81323 10.0293L4.29981 10.2294C4.44052 9.18436 5.30576 8.37906 6.33417 8.33178L6.26528 6.83336ZM6.33417 17.5015C5.30576 17.4543 4.44052 16.649 4.29981 15.6039L2.81323 15.804C3.04732 17.5427 4.48782 18.9182 6.26528 19L6.33417 17.5015ZM7.00001 7.49999V5.41666H5.50001V7.49999H7.00001ZM13 5.41666V7.49999H14.5V5.41666H13ZM10 2.41666C11.6569 2.41666 13 3.7598 13 5.41666H14.5C14.5 2.93138 12.4853 0.916656 10 0.916656V2.41666ZM7.00001 5.41666C7.00001 3.7598 8.34316 2.41666 10 2.41666V0.916656C7.51473 0.916656 5.50001 2.93138 5.50001 5.41666H7.00001Z", fill: "#4B5565" }))), h("input", { key: 'e833fefe08204f39ca1591fd67eebb4cf8e17506', class: "text-md-regular", placeholder: this.showPlaceholder ? this.placeholderText : '' })), this.showValidation && h("span", { key: '5324e6d62d172a6d0ae71a386e658c585e2d7ad9' }), this.showHelpIcon && (h("div", { key: '7fc46bdfb1b8b19a627a594d466bd1b4d0e88197', class: "help-icon" }, h("svg", { key: 'b563ec033c1b58bc8cc08056287ec93fdf9fca13', xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { key: 'a0decec7af1e57f50df4417c4b0ff894f134ea6c', 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("gb-password-button", { key: '122925905156d537c6f824c227c783ba709f2930' }))), this.type === 'count' && (h("div", { key: '3600949108f7775093e3a77c9bb11733495f7e8d', class: `input-wrapper ${this.size}` }, h("div", { key: 'e9dcdc8f19eaffc0bf9494ab2a6578c61e243ce6', class: "text-input" }, h("input", { key: '1610c3bea52ab117c1be6c8672104ef9301de602', class: "text-md-regular", placeholder: this.showPlaceholder ? this.placeholderText : '' }), this.showHelpIcon && (h("svg", { key: 'dcb70609948e7834ada932899808cfcc1092bbfc', class: "help-svg", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { key: '3f5cc48e7cda6547b73a7340854cc361740f2687', 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("div", { key: '1b4cd60f129a3985907fdcd6c03cfe7224befe25', class: "count-action" }, this.showCloseButton && (h("gb-button", { key: 'c72c870cc2985beef404a2b00358cba57a4526de', class: "decrease-btn", size: "md", hierarchy: "tertiary_gray", icon: "only", "icon-leading": true, "icon-leading-swap": "assets/minus_sign.svg" })), h("gb-button", { key: '9d90eb346dd401051ca316ec85647a46e9cb7847', class: "increase-btn", size: "md", hierarchy: "tertiary_gray", icon: "only", "icon-leading": true, "icon-leading-swap": "assets/plus_sign.svg" }))))), this.showHintText && h("div", { key: 'fcb772b525bd792e4dd89602bc3ea83afec472df', class: "text-sm-regular hint-text" }, this.hintText)));
     }
     static get is() { return "gb-input-field"; }
     static get encapsulation() { return "shadow"; }
@@ -62,11 +63,11 @@ export class GbInputField {
                 "attribute": "size",
                 "reflect": false
             },
-            "inputType": {
+            "type": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'default' | 'icon_leading' | 'leading_dropdown' | 'trailing_dropdown'|'leading_text'|'payment_input'| 'tags' | 'trailing_button' |'password' | 'password_icon_leading' | 'count'",
+                    "original": "'default' | 'icon_leading' | 'leading_dropdown' | 'trailing_dropdown' | 'leading_text'|'payment_input'| 'tags' | 'trailing_button' |'password' | 'password_icon_leading' | 'count'",
                     "resolved": "\"count\" | \"default\" | \"icon_leading\" | \"leading_dropdown\" | \"leading_text\" | \"password\" | \"password_icon_leading\" | \"payment_input\" | \"tags\" | \"trailing_button\" | \"trailing_dropdown\"",
                     "references": {}
                 },
@@ -76,7 +77,7 @@ export class GbInputField {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "input-type",
+                "attribute": "type",
                 "reflect": false
             },
             "destructive": {
@@ -88,15 +89,33 @@ export class GbInputField {
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": ""
                 },
                 "attribute": "destructive",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "state": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'placeholder' | 'filled' | 'active' | 'disabled'",
+                    "resolved": "\"active\" | \"disabled\" | \"filled\" | \"placeholder\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "state",
                 "reflect": false
             },
-            "helpIcon": {
+            "showLabel": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
@@ -105,16 +124,16 @@ export class GbInputField {
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "help-icon",
+                "attribute": "show-label",
                 "reflect": false,
                 "defaultValue": "false"
             },
-            "icon": {
+            "label": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -123,15 +142,34 @@ export class GbInputField {
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "icon",
-                "reflect": false
+                "attribute": "label",
+                "reflect": false,
+                "defaultValue": "''"
             },
-            "placeholder": {
+            "showHintText": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "show-hint-text",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "hintText": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -145,11 +183,29 @@ export class GbInputField {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "placeholder",
+                "attribute": "hint-text",
                 "reflect": false,
                 "defaultValue": "''"
             },
-            "label": {
+            "showPlaceholder": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "show-placeholder",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "placeholderText": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -158,14 +214,85 @@ export class GbInputField {
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "label",
+                "attribute": "placeholder-text",
                 "reflect": false,
                 "defaultValue": "''"
+            },
+            "showHelpIcon": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "show-help-icon",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "showValidation": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "show-validation",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "iconSwap": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "icon-swap",
+                "reflect": false
+            },
+            "showCloseButton": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "show-close-button",
+                "reflect": false,
+                "defaultValue": "false"
             }
         };
     }