globuswebcomponents 0.5.4 → 0.5.5

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

@@ -2674,39 +2674,13 @@
     margin-top: -0.416em;
 }
 
-div {
-  font-family: var(--font-family-body);
-  font-style: normal;
-  letter-spacing: var(--Font-Letter-spacing-T-md, 0rem);
+input{
+  height: 100%;
 }
 
-div.sm {
+.input{
   display: flex;
-  width: 24.3125rem;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: var(--spacing-2);
-}
-
-div.md {
-  display: flex;
-  width: 24.3125rem;
-  flex-direction: column;
-  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;
-  justify-content: space-between;
+  width: 100%;
   align-items: center;
   gap: var(--spacing-2);
   align-self: stretch;
@@ -2715,291 +2689,12 @@ div.md {
   background: var(--color-background-card, #FFFFFF);
 }
 
-.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:focus-within,
-.leading_text:focus-within .text-input {
-  border: 1.3px solid var(--color-border-selected,#075DB2);
-}
-
-.content{
-  display: flex;
-  align-items: center;
-  align-content: center;
-  gap: 0.5rem var(--spacing-2);
-  flex: 1 0 0;
-  align-self: stretch;
-}
-
-.password .content{
-  padding: var(--spacing-2) var(--spacing-none) var(--spacing-2) var(--spacing-3);
-  flex-wrap: wrap;
-}
-
-.icon {
-  position: relative;
-  top: 3px;
-}
-
-.leading_text{
-  display: flex;
-}
-
-.leading_text_wrapper{
-  display: flex;
-  width: fit-content;
-  border-radius: var(--rounded-sm);
-}
-
-.add-on {
-  display: flex;
-  align-items: center;
-  align-self: stretch;
-  padding: var(--spacing-2) var(--spacing-3);
-  border-radius: 0.5rem var(--rounded-none) var(--rounded-none) 0.5rem;
-  border: 1px solid var(--color-border-input, #CDD5DF);
-  border-right: none;
-}
-
-.dropdown {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-1);
-  align-self: stretch;
-  margin-top: 0.1rem;
-}
-
-select {
-  border: none; 
-  background-color: var(--color-background-card, #FFFFFF); 
-  color: #374151; /* Text color */
-  box-shadow: none; /* Remove default box shadow */
-  outline: none;
-}
-
-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;
-  gap: var(--spacing-Positive-spacing-2, 0.5rem);
-  flex: 1 0 0;
-  align-self: stretch;
-}
-
-.trailing_button .text-input {
-  padding: var(--spacing-Positive-spacing-2, 0.5rem) var(--spacing-Positive-spacing-3, 0.75rem);
-}
-
-.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);
-}
-
-.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 {
-  width: 14.4rem;
-  padding: 0.625rem 0.875rem;
-  border: 1px solid var(--gray-300, #D0D5DD);
-  border-radius: 0 var(--rounded-sm) var(--rounded-sm) 0;
-}
-
-.trailing_dropdown .dropdown {
-  display: flex;
-  padding: var(--spacing-2) var(--spacing-3) var(--spacing-2) 0;
-  justify-content: space-between;
-}
-
-.count-action {
-  display: flex;
-  justify-content: space-between;
-  padding-right: var(--spacing-1);
-  align-items: center;
-  gap: var(--spacing-none);
-}
-
-.decrease-btn {
-  display: flex;
-  width: 2.5rem;
-  height: 2.5rem;
-  justify-content: center;
-  align-items: center;
-  border-radius: var(--rounded-none);
-  border-right: 1px solid var(--color-border-input, #CDD5DF);
-}
-
-.payment-method {
-  display: flex;
-  width: 2.125rem;
-  height: var(--spacing-6);
-  justify-content: center;
-  align-items: center;
-  border-radius: var(--rounded-xs);
-  border: 1px solid var(--color-border-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: var(--color-text, #4B5565);
-  box-shadow: none; /* Remove default box shadow */
-  outline: none;
-  font-family: var(--Font-Family-Body, Sora);
-  font-style: normal;
-  letter-spacing: var(--Font-Letter-spacing-T-md, 0rem);
-  width: 100%;
-}
-
-.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;
-}
-
-.trailing_dropdown .help-icon {
-  margin-left: -5px;
-}
-
-.trailing_dropdown .help-icon svg {
-  position: relative;
-  left: 5%;
-  top: 2px;
-}
-
-.tags .help-icon svg {
-  left: -52%;
-}
-
-.help-icon{
-  display: flex;
-  align-items: center;
-}
-
-.help-svg {
-  margin-right: 0.4rem;
-}
-
-label{
-  color: var(--color-text, #4B5565);
-}
-
-.hint_text{
-  color: var(--color-text-subtle, #697586); 
-}
-
-/* Destructive State Styles */
-.help_icon.destructive{
-  stroke: var(--color-icon-danger, #B51726);
-}
-
-.hint_text.destructive{
-  color: var(--color-text-danger, #B51726);
-}
-
-.input-wrapper.destructive{
-  border: 1px solid var(--color-border-danger, #B51726);
-}
-
-.leading_text.destructive .text-input {
-  border: 1.5px solid var(--color-border-danger, #B51726);
-}
-
-/* Disabled Styles */
-.input-wrapper.disabled,
-.leading_text.disabled .text-input,
-.input-wrapper.default.disabled {
-  border: 1px solid var(--color-border-disabled, #E3E8EF);
-  background: var(--color-background-disabled, #F6F8FA);
-  pointer-events: none;
-  cursor: not-allowed;
-}
-
-.input-wrapper.disabled input,
-.leading_text.disabled input{
-  background: var(--color-background-disabled, #F6F8FA);
-}
-
-.hint_text.disabled{
-  color: var(--color-text-subtle, #697586);
-}
-
-.icon_leading_svg.disabled path{
-  stroke: var(--color-icon-disabled, #CDD5DF);
-}
-
-.leading_dropdown.disabled select,
-.trailing_dropdown.disabled select{
-  background: var(--color-background-disabled, #F6F8FA);
-  color: var(--color-text-subtle, #697586);
-}
-
-.password_dropdown{
-  display: flex;
-  padding-left: var(--spacing-3);
-  align-items: center;
-  gap: var(--spacing-1);
-  align-self: stretch;
-}
-
-option{
-  display: flex;
-  padding: var(--spacing-none);
-    flex-direction: column;
-    align-items: flex-start;
-    align-items: stretch;
-    border-radius: var(--rounded-sm);
-    border: 1px solid var(--color-border-subtler, red);
-    background: var(--color-surface, #FFFFFF);
-    box-shadow: var(--shadow-sm);
-    position: absolute;
-    top: 4.5rem;
-    z-index: 10;
-    gap: var(--spacing-none);
+.input.sm{
+  min-height: 2.5rem;
+  padding: var(--spacing-2) var(--spacing-3) var(--spacing-2) var(--spacing-3);
 }
 
-.validation_svg{
-  width: 1.25rem;
-  height: 1.25rem;
+.input.md{
+  min-height: 3rem;
+  padding: var(--spacing-4) 0.875rem var(--spacing-4) var(--spacing-3);
 }

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

@@ -1,5 +1,4 @@
-import { getAssetPath, h, Fragment } from "@stencil/core";
-import { StateEnum } from "../../models/reusableModels";
+import { h } from "@stencil/core";
 export class GbInputField {
     constructor() {
         this.size = undefined;
@@ -11,7 +10,7 @@ export class GbInputField {
         this.showHintText = false;
         this.hintText = '';
         this.showPlaceholder = false;
-        this.placeholderText = '';
+        this.placeholder = '';
         this.showHelpIcon = false;
         this.showValidation = false;
         this.iconSwap = undefined;
@@ -31,15 +30,10 @@ export class GbInputField {
         this.isPasswordVisible = !this.isPasswordVisible;
     }
     render() {
-        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: '10f38408497a6aea7be9f2818eb13d49f0294f75', class: classes }, h("div", { key: '16c2cae02a4f42b78bc22437490e1f864efb51ea', class: "input-with-label" }, this.showLabel && (h("label", { key: '07e1139d058ec966ec27f23655df9250c54f7ecf', htmlFor: "input", class: "text-sm-medium" }, this.label)), this.type === 'default' && (h("div", { key: 'e816e007279bcad82852f441623130db09f6a1e4', class: `input-wrapper ${this.type} ${this.state} ${this.destructive ? 'destructive' : ''}` }, h("input", { key: '9d83cace3043fec9f200b6ad08ef4990a7ee66de', class: `text-md-regular`, placeholder: this.showPlaceholder ? this.placeholderText : '', value: this.inputValue, onInput: event => this.handleInput(event) }), this.showValidation && (h("svg", { key: 'ae6c72fb14196515de6e7131fa344ea83e8768f0', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", class: "validation_svg" }, h("path", { key: 'd510bc1ba34f8844adfce4969963184cf943162d', d: "M4.16675 12.0833C4.16675 12.0833 5.41675 12.0833 7.08341 15C7.08341 15 11.7158 7.36112 15.8334 5.83334", stroke: "#079455", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))), this.showHelpIcon && (h(Fragment, null, !this.destructive ? (h("div", { class: "help-icon" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { 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.destructive && this.state !== 'disabled' ? (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { d: "M7.99458 10H8.00057M7.99992 8.00001V5.33334M14.6666 8.00001C14.6666 11.6819 11.6818 14.6667 7.99992 14.6667C4.31802 14.6667 1.33325 11.6819 1.33325 8.00001C1.33325 4.31811 4.31802 1.33334 7.99992 1.33334C11.6818 1.33334 14.6666 4.31811 14.6666 8.00001Z", stroke: "#B51726", "stroke-width": "1.33333", "stroke-linecap": "round", "stroke-linejoin": "round" }))) : (this.destructive &&
-            this.state === 'disabled' && (h("div", { class: "help-icon" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { 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: '134402af35dcac4228f592fdbaf549c72d98ae2c', class: `input-wrapper ${this.state} ${this.destructive ? 'destructive' : ''}` }, h("div", { key: '815d9209eee1a4afc0d3e4ed82d279a88d1d8f5c', class: "content" }, h("div", { key: '24ddc2dde4ee249699640bf5c7b2cbf84ec689da', 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", class: `icon_leading_svg ${this.state}` }, 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: 'e6ce0ae2341eb4c4bc2b38de4cd03533755d4a36', class: `text-md-regular`, placeholder: this.showPlaceholder ? this.placeholderText : '', type: "email", value: this.inputValue, onInput: event => this.handleInput(event) })), this.showValidation && (h("svg", { key: '43620f29e80357303a9e8c9f082407f256404e2f', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", class: "validation_svg" }, h("path", { key: '0f18552e0174f72c48bc445e5e64c7674e42490a', d: "M4.16675 12.0833C4.16675 12.0833 5.41675 12.0833 7.08341 15C7.08341 15 11.7158 7.36112 15.8334 5.83334", stroke: "#079455", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))), this.showHelpIcon && (h(Fragment, null, !this.destructive ? (h("div", { class: "help-icon" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { 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("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { d: "M7.99458 10H8.00057M7.99992 8.00001V5.33334M14.6666 8.00001C14.6666 11.6819 11.6818 14.6667 7.99992 14.6667C4.31802 14.6667 1.33325 11.6819 1.33325 8.00001C1.33325 4.31811 4.31802 1.33334 7.99992 1.33334C11.6818 1.33334 14.6666 4.31811 14.6666 8.00001Z", stroke: "#B51726", "stroke-width": "1.33333", "stroke-linecap": "round", "stroke-linejoin": "round" }))))), this.showCloseButton && !this.destructive && (h("gb-button", { key: '937ddb867ab7ea920fe9d5a47d53af8d1c9c6a88', size: "sm", state: this.state === 'disabled' ? 'disabled' : 'default', hierarchy: "tertiary_gray", icon: "only", "icon-leading": true, "icon-leading-swap": "assets/cancel-button.svg" })))), this.type === 'leading_dropdown' && (h("div", { key: '5e4d2d6d138e841debd5a7e3708ed5a087cb13da', class: `input-wrapper ${this.type} ${this.state} ${this.destructive ? 'destructive' : ''}` }, h("div", { key: '7745812e56bd27824897fee5c49acecb4ade330a', class: "dropdown" }, h("div", { key: 'e2c315dd23d5dcf7d9473d69e9f22310f735c469', class: "country-icon" }, h("svg", { key: '89d350e728f4f3525ff0dee033ae2b7449faf8fb', xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, h("path", { key: 'da63c41e00ff6952edd2e66b87a03a505ac24237', 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: '0f5777b7a888f7133760d62349eaef7f9cefa314', 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: 'd30fb32d4b4037d6b2452cd2854fdd7062a70eea', class: "text-md-regular" }, h("option", { key: 'a953cf608eef2538a9fe32a1269e0dad4f6d0dce', value: "option 1", selected: true }, "+234"), h("slot", { key: '968b0382a7e573b4dad92c49fae31974e90ec356', name: "country-option" }))), h("div", { key: '1a7503dbb59fe5b999d578066747f17b42035db6', class: "text-input" }, h("input", { key: 'c91e68c3ad58e5ec63cec01995ecefa2abfc8cc7', class: "text-md-regular", placeholder: this.showPlaceholder ? this.placeholderText : '', value: this.inputValue, onInput: event => this.handleInput(event) }), this.showValidation && (h("svg", { key: 'c5b043c1aa4b3332f2da8cf937f935902d3b3e3a', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", class: "validation_svg" }, h("path", { key: 'f8e9a579154011109f78e265dcd7c0dea69322b8', d: "M4.16675 12.0833C4.16675 12.0833 5.41675 12.0833 7.08341 15C7.08341 15 11.7158 7.36112 15.8334 5.83334", stroke: "#079455", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))), this.showHelpIcon && (h(Fragment, null, !this.destructive ? (h("div", { class: "help-icon" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { 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("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { d: "M7.99458 10H8.00057M7.99992 8.00001V5.33334M14.6666 8.00001C14.6666 11.6819 11.6818 14.6667 7.99992 14.6667C4.31802 14.6667 1.33325 11.6819 1.33325 8.00001C1.33325 4.31811 4.31802 1.33334 7.99992 1.33334C11.6818 1.33334 14.6666 4.31811 14.6666 8.00001Z", stroke: "#B51726", "stroke-width": "1.33333", "stroke-linecap": "round", "stroke-linejoin": "round" })))))))), this.type === 'trailing_dropdown' && (h("div", { key: 'cedd8fe2b1d0ea94e9be1a4b7916288257475fc1', class: `input-wrapper ${this.type} ${this.state} ${this.destructive ? 'destructive' : ''}` }, h("div", { key: '6fe02b8b31c78ddd367c54eac65260b2dcaf474a', class: "content" }, h("div", { key: '89d069df8cbfbc94bec58318a9a42033626dc1cd', class: "text-input" }, h("p", { key: 'eea8348a7ad1a95f7e31eccd64ef4dd829e23ff3', class: "text-md-regular" }, "$"), h("input", { key: '2a5b7abae9668477396c2a1fd892071ae41180af', class: "text-md-regular", placeholder: this.showPlaceholder ? this.placeholderText : '', value: this.inputValue, onInput: event => this.handleInput(event) })), this.showValidation && (h("svg", { key: '473460c0403359f48f9380fd76ddb4e277dbe36c', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", class: "validation_svg" }, h("path", { key: 'bf4c1a66da4e9650a4cbe12a7d6a8444622d0239', d: "M4.16675 12.0833C4.16675 12.0833 5.41675 12.0833 7.08341 15C7.08341 15 11.7158 7.36112 15.8334 5.83334", stroke: "#079455", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))), this.showHelpIcon && (h(Fragment, null, !this.destructive ? (h("div", { class: "help-icon" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { 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("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { d: "M7.99458 10H8.00057M7.99992 8.00001V5.33334M14.6666 8.00001C14.6666 11.6819 11.6818 14.6667 7.99992 14.6667C4.31802 14.6667 1.33325 11.6819 1.33325 8.00001C1.33325 4.31811 4.31802 1.33334 7.99992 1.33334C11.6818 1.33334 14.6666 4.31811 14.6666 8.00001Z", stroke: "#B51726", "stroke-width": "1.33333", "stroke-linecap": "round", "stroke-linejoin": "round" })))))), h("div", { key: '1ff2a5fa458b585006643f71c656660988aab247', class: "dropdown" }, h("select", { key: '611b4fa329b1905662e10ccb0ab93e98f25dad9b', class: "text-md-regular" }, h("option", { key: 'b9b49d3373d7aba701ebfcc1ff3038565626f864', value: "option 1", selected: true }, "USD"), h("slot", { key: 'b2ef5d331510853ff1141f9b346b6c5bd0be7e91', name: "option" }))))), this.type === 'leading_text' && (h("div", { key: 'dfccde3a7292a6cd8edf2140ae06807820320001', class: "leading_text_wrapper" }, h("div", { key: 'a45d04ff78e35152f04efd61b063ed9e0ae7d59a', class: "add-on" }, h("p", { key: 'd48c87c958948cb412109ae5c645e8a944fa5538', class: "text-md-regular" }, "http://")), h("div", { key: '53d7dc369ff9e3a3123a81ce413a09daee0ce861', class: `leading_text_input_wrapper ${this.state === 'disabled' ? 'disabled' : ''} ${this.state} ${this.destructive ? 'destructive' : ''}` }, h("div", { key: 'c176999d4acd94e9640211ff6ca681bd3594e83a', class: "text-input" }, h("input", { key: 'a3787e260a5df6d7b16b5ea4beae35fcb668c798', class: "text-md-regular", placeholder: this.showPlaceholder ? this.placeholderText : '', value: this.inputValue, onInput: event => this.handleInput(event) }), this.showValidation && (h("svg", { key: '94f3086781eb359aae3a45d46209cc1c57a01d6d', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", class: "validation_svg" }, h("path", { key: '1f0950c2545211e5b87c84e740269d3900b31e4b', d: "M4.16675 12.0833C4.16675 12.0833 5.41675 12.0833 7.08341 15C7.08341 15 11.7158 7.36112 15.8334 5.83334", stroke: "#079455", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))), this.showHelpIcon && (h(Fragment, null, !this.destructive ? (h("div", { class: "help-icon" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { 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("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { d: "M7.99458 10H8.00057M7.99992 8.00001V5.33334M14.6666 8.00001C14.6666 11.6819 11.6818 14.6667 7.99992 14.6667C4.31802 14.6667 1.33325 11.6819 1.33325 8.00001C1.33325 4.31811 4.31802 1.33334 7.99992 1.33334C11.6818 1.33334 14.6666 4.31811 14.6666 8.00001Z", stroke: "#B51726", "stroke-width": "1.33333", "stroke-linecap": "round", "stroke-linejoin": "round" }))))))))), this.type === 'payment_input' && (h("div", { key: 'a042419202b23547cee114d7a809aad9bcc385aa', class: `input-wrapper ${this.state} ${this.destructive ? 'destructive' : ''}` }, h("div", { key: 'cf89f2c4666fe8c0f0f02f2304f1019f7c3cba43', class: "content" }, h("div", { key: 'e36641ec52d3a99067a5ea652553cf903f55a906', class: "payment-method" }, h("svg", { key: '341091e617c43796f0540b1d1ff60cd61f9532aa', xmlns: "http://www.w3.org/2000/svg", width: "23", height: "14", viewBox: "0 0 23 14", fill: "none" }, h("path", { key: '25334f80b2001d44cc504b5d553c78eaa7584914', "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: 'f7de982a96be34b26272ca7266c943f15054b3eb', "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: 'dc38a8975707dd0ba6c84cb004bed55e0c85a9af', "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: '9249b161b275d8f9ca03c145f4054814dfcafee6', class: "text-md-regular", placeholder: this.showPlaceholder ? this.placeholderText : '', value: this.inputValue, onInput: event => this.handleInput(event) })), this.showValidation && (h("svg", { key: '6310b38048081b50ee7940d2b1ff79fe181df403', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", class: "validation_svg" }, h("path", { key: 'ca988b417b3e505616cb42ea7dd191d054eacfbf', d: "M4.16675 12.0833C4.16675 12.0833 5.41675 12.0833 7.08341 15C7.08341 15 11.7158 7.36112 15.8334 5.83334", stroke: "#079455", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))), this.showHelpIcon && (h("div", { key: 'b900ec3851ba71c8a6b316d9043d41762d7692f9', class: "help-icon" }, h(Fragment, null, !this.destructive ? (h("div", { class: "help-icon" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { 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("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { d: "M7.99458 10H8.00057M7.99992 8.00001V5.33334M14.6666 8.00001C14.6666 11.6819 11.6818 14.6667 7.99992 14.6667C4.31802 14.6667 1.33325 11.6819 1.33325 8.00001C1.33325 4.31811 4.31802 1.33334 7.99992 1.33334C11.6818 1.33334 14.6666 4.31811 14.6666 8.00001Z", stroke: "#B51726", "stroke-width": "1.33333", "stroke-linecap": "round", "stroke-linejoin": "round" })))))))), this.type === 'tags' && (h("div", { key: '31f19ec5d03125056e15c657e10990f3d20ee09d', class: `input-wrapper ${this.state} ${this.destructive ? 'destructive' : ''}` }, h("div", { key: '158bc8ed04b7eb505df81ef376cf97ca2f07de31', class: "content" }, h("div", { key: 'f70c99728d5134eabd55015d220626d4947b7fc9', class: "tags-box" }, h("slot", { key: 'b67ff42e32ca0406f28ef02f2f0f5fccda25b83a', name: "tag-option" })), h("input", { key: '768b6aaf7196ee1d4d3feb8d0d735fc511a4f21f', class: "text-md-regular", placeholder: this.showPlaceholder ? this.placeholderText : '', value: this.inputValue, onInput: event => this.handleInput(event) })), this.showValidation && (h("svg", { key: '1435b38672ba4ee76faf2d79647366f6800e110c', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", class: "validation_svg" }, h("path", { key: '550bd6fe06b45c98df9ed93eecde6a295ee9545d', d: "M4.16675 12.0833C4.16675 12.0833 5.41675 12.0833 7.08341 15C7.08341 15 11.7158 7.36112 15.8334 5.83334", stroke: "#079455", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))), this.showHelpIcon && (h("div", { key: 'f39bb5b4b029dee26cbb1256fbb8f3ca9b2892f3', class: "help-icon" }, h(Fragment, null, !this.destructive ? (h("div", { class: "help-icon" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { 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("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { d: "M7.99458 10H8.00057M7.99992 8.00001V5.33334M14.6666 8.00001C14.6666 11.6819 11.6818 14.6667 7.99992 14.6667C4.31802 14.6667 1.33325 11.6819 1.33325 8.00001C1.33325 4.31811 4.31802 1.33334 7.99992 1.33334C11.6818 1.33334 14.6666 4.31811 14.6666 8.00001Z", stroke: "#B51726", "stroke-width": "1.33333", "stroke-linecap": "round", "stroke-linejoin": "round" })))))))), this.type === 'trailing_button' && (h("div", { key: 'fa8e0f790ef7bf2286da58c864b2bcec36c628c7', class: `input-wrapper ${this.state} ${this.destructive ? 'destructive' : ''}` }, h("div", { key: '6a99099bcfd9729ddcfbd26f1b9ea7fc6d894c8e', class: "text-input" }, h("input", { key: '3dce46e99076f3559c4abdf1d228bb172671eb45', class: "text-md-regular", placeholder: this.showPlaceholder ? this.placeholderText : '', value: this.inputValue, onInput: event => this.handleInput(event) }), this.showValidation && (h("svg", { key: '2f8fabb1d74da75a4c5b60f8f2b124bd6d736644', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", class: "validation_svg" }, h("path", { key: '4d97578d3498b4186b1f215dbb033db3894b7b9c', d: "M4.16675 12.0833C4.16675 12.0833 5.41675 12.0833 7.08341 15C7.08341 15 11.7158 7.36112 15.8334 5.83334", stroke: "#079455", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))), this.showHelpIcon && (h(Fragment, null, !this.destructive ? (h("div", { class: "help-icon" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { 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("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { d: "M7.99458 10H8.00057M7.99992 8.00001V5.33334M14.6666 8.00001C14.6666 11.6819 11.6818 14.6667 7.99992 14.6667C4.31802 14.6667 1.33325 11.6819 1.33325 8.00001C1.33325 4.31811 4.31802 1.33334 7.99992 1.33334C11.6818 1.33334 14.6666 4.31811 14.6666 8.00001Z", stroke: "#B51726", "stroke-width": "1.33333", "stroke-linecap": "round", "stroke-linejoin": "round" })))))), h("div", { key: 'd2019d27c8c751843ce84a66d4f1f5dd93ac5320', class: "trailing-btn" }, h("gb-button", { key: 'd0fc2a47f5023db1b97e3f561c59369bc04a520c', size: "md", state: this.state === 'disabled' ? 'disabled' : 'default', hierarchy: "tertiary_gray", icon: "only", "icon-leading": true, "icon-leading-swap": "assets/copy.svg" })))), this.type === 'password' && (h("div", { key: 'dda7c763e19d79450d36795504378b58567fee00', class: `input-wrapper ${this.state} ${this.destructive ? 'destructive' : ''}` }, h("div", { key: '731e8b19e35a5d1342238aaf62b0a2089b7eaeb6', class: "content" }, h("div", { key: '35ae8ec65725332cdc897f5f827f5bed424042fc', class: "text-input" }, h("input", { key: '80df6d292274b5473630c49168e7b8d63c0b5396', class: "text-md-regular", placeholder: this.showPlaceholder ? this.placeholderText : '', type: this.isPasswordVisible ? 'text' : 'password', value: this.inputValue, onInput: event => this.handleInput(event) })), this.showValidation && (h("svg", { key: 'dd6a6cf1bf1e6a538f2ddc0e7777c6d83501b2fd', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", class: "validation_svg" }, h("path", { key: 'c54bb5d0b9c89be4ef51c2cab68ae84aa23898fe', d: "M4.16675 12.0833C4.16675 12.0833 5.41675 12.0833 7.08341 15C7.08341 15 11.7158 7.36112 15.8334 5.83334", stroke: "#079455", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))), this.showHelpIcon && (h(Fragment, null, !this.destructive ? (h("div", { class: "help-icon" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { 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("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { d: "M7.99458 10H8.00057M7.99992 8.00001V5.33334M14.6666 8.00001C14.6666 11.6819 11.6818 14.6667 7.99992 14.6667C4.31802 14.6667 1.33325 11.6819 1.33325 8.00001C1.33325 4.31811 4.31802 1.33334 7.99992 1.33334C11.6818 1.33334 14.6666 4.31811 14.6666 8.00001Z", stroke: "#B51726", "stroke-width": "1.33333", "stroke-linecap": "round", "stroke-linejoin": "round" })))))), h("div", { key: 'bc27f0e552bf12955de526563917896c978d6d5b', class: "password_dropdown" }, h("gb-password-button", { key: '063fe91693a791c6c0e8bbae773892204f27cca4', state: this.state === 'disabled' ? StateEnum.Disabled : StateEnum.Default, onClick: () => this.togglePasswordVisibility() })))), this.type === 'password_icon_leading' && (h("div", { key: '33adcb3e5ded31cdbfdb1d7b5b13f2c66d0dde40', class: `input-wrapper ${this.state} ${this.destructive ? 'destructive' : ''}` }, h("div", { key: 'c32dbfec23fbfda6847066d12a13edc0c90a4ca1', 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: 'd529c8176fd157a3e91d782fd0b690092ed481ad', class: "text-md-regular", type: this.isPasswordVisible ? 'text' : 'password', placeholder: this.showPlaceholder ? this.placeholderText : '', value: this.inputValue, onInput: event => this.handleInput(event) })), this.showValidation && (h("svg", { key: '10e3cc84b6b21194cef141a77a7aba21942202de', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", class: "validation_svg" }, h("path", { key: '026c44c9f576b40f35d50e43fdd1bbf37ea595f0', d: "M4.16675 12.0833C4.16675 12.0833 5.41675 12.0833 7.08341 15C7.08341 15 11.7158 7.36112 15.8334 5.83334", stroke: "#079455", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))), this.showHelpIcon && (h(Fragment, null, !this.destructive ? (h("div", { class: "help-icon" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { 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("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { d: "M7.99458 10H8.00057M7.99992 8.00001V5.33334M14.6666 8.00001C14.6666 11.6819 11.6818 14.6667 7.99992 14.6667C4.31802 14.6667 1.33325 11.6819 1.33325 8.00001C1.33325 4.31811 4.31802 1.33334 7.99992 1.33334C11.6818 1.33334 14.6666 4.31811 14.6666 8.00001Z", stroke: "#B51726", "stroke-width": "1.33333", "stroke-linecap": "round", "stroke-linejoin": "round" }))))), h("div", { key: '8c2c1c90fed2591affb04b0ead6471e977759c06', class: "password_dropdown" }, h("gb-password-button", { key: '8449424820c049f67096fca425f9e746ae7b2dfb', state: this.state === 'disabled' ? StateEnum.Disabled : StateEnum.Default, onClick: () => this.togglePasswordVisibility() })))), this.type === 'count' && (h("div", { key: '8bde1c8bfafc275b66c81300b4ab592e2c47c580', class: `input-wrapper ${this.state} ${this.destructive ? 'destructive' : ''} ${this.size}` }, h("div", { key: 'cd6d5cd2f22f1faffd569fc22f2d9a6844990908', class: "text-input" }, h("input", { key: '9cc05213278a46e26d0dbf729327e71cff5c9b80', class: "text-md-regular", placeholder: this.showPlaceholder ? this.placeholderText : '', value: this.inputValue, onInput: event => this.handleInput(event) }), this.showHelpIcon && (h("svg", { key: '882bfcad915d205671619ad4efb143eaf6ec33c6', class: "help-svg", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { key: '09fbce30bee48542ee7d075662798b272a683e00', 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: '7f8d489b2e47e06db159d65997ba821ad7fdfcb0', class: "count-action" }, this.showCloseButton && (h("gb-button", { key: 'bd958959817ece586aa4fc3dcecde63ecaacc56b', class: "decrease-btn", size: "md", hierarchy: "tertiary_gray", icon: "only", "icon-leading": true, "icon-leading-swap": "assets/minus_sign.svg" })), h("gb-button", { key: 'f24483c5fc50e7d749322fd61a0b68792ab52fba', class: "increase-btn", size: "md", hierarchy: "tertiary_gray", icon: "only", "icon-leading": true, "icon-leading-swap": "assets/plus_sign.svg" }))))), this.showHintText && h("p", { key: 'b3cd8e31640f1daa4912da7c0f3b7e012b341f5c', class: `text-sm-regular hint_text ${this.state} ${this.destructive ? 'destructive' : ''}` }, this.hintText)));
+        return (h("div", { key: '5efa05e2e98e30b74236c412c333b0b13797ae96', class: `input_container` }, h("div", { key: 'f7db7664a9c3f81438d71e3fe309581e64d0785c', class: `input_with_label` }, this.showLabel && (h("p", { key: '5ca865d38dba106c2296186702228edb1b1fe924', class: "text-sm-medium" }, this.label)), h("div", { key: 'a41498bd72627ec9e9095d94e4a334240cfef663', class: `input ${this.size}` }, this.type === 'default' && [
+            h("input", { key: '3ae2e2a35e7cdecb9b833fe28b7910161c0d74df', type: "text", placeholder: this.placeholder ? this.placeholder : '' }),
+            h("div", { key: '108a4760e3fee45dfbc77258e7d311cba502b868', class: `help_circle` })
+        ])), this.showHintText && (h("p", { key: '015a785d505058c62a6c97710e5afe092a6b97a3', class: "text-sm-regular" }, this.hintText))));
     }
     static get is() { return "gb-input-field"; }
     static get encapsulation() { return "shadow"; }
@@ -226,7 +220,7 @@ export class GbInputField {
                 "reflect": false,
                 "defaultValue": "false"
             },
-            "placeholderText": {
+            "placeholder": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -240,7 +234,7 @@ export class GbInputField {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "placeholder-text",
+                "attribute": "placeholder",
                 "reflect": false,
                 "defaultValue": "''"
             },