globuswebcomponents 2.18.14 → 2.18.15

package/dist/components/{p-nzIz4zbi.js.map → p-p6ZBSYgB.js.map}

@@ -1 +1 @@
-{"file":"p-nzIz4zbi.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/gb-checkbox-group-item/gb-checkbox-group-item.css?tag=gb-checkbox-group-item&encapsulation=shadow","src/components/gb-checkbox-group-item/gb-checkbox-group-item.tsx"],"sourcesContent":["@import './../../global/global.css';\n\n.checkbox_group_item {\n  display: flex;\n  justify-content: space-between;\n  /* align-items: center; */\n  background-color: var(--color-background-card, #ffffff);\n  border: 1px solid var(--color-border-subtle, #cdd5df);\n  padding: 1rem;\n  margin-bottom: 0.5rem;\n  transition: all 0.1s ease-in-out;\n  cursor: pointer;\n  border-radius: var(--rounded-md);\n}\n\n.checkbox_group_item .avatar {\n  /* this is correct*/\n  flex: 1 0 0;\n  margin-top: 0.5rem;\n  border-radius: 12.5rem;\n  border: 0.5px solid var(--color-blanket-subtler);\n}\n\n.checkbox_group_item.selected {\n  border: 2px solid var(--color-border-selected, #075db2); /* Checked border color */\n  background: var(--color-background-information-subtlest, #e4f0fc); /* Checked background color */\n}\n\n/* i'm using this to apply the hover effect but its turning white on hover??? */\n.checkbox_group_item:hover {\n  background: var(--color-background-information-subtler, #c8e0f9);\n  border-color: var(--color-border-selected, #075db2);\n}\n\n/* i'm using this to change icon color on hover */\n.checkbox_group_item:hover .icon-md,\n.checkbox_group_item:hover .svg-icon {\n  fill: var(--color-icon-information, #064e94);\n}\n\n.item-content {\n  display: flex;\n  flex: 1 0 0;\n  align-self: stretch;\n}\n\n.text-container {\n  display: flex;\n  flex-direction: column;\n  gap: var(--spacing-3);\n  margin-left: 1rem;\n}\n\n/* Icon Styles */\n.icon svg{\n  width: 2rem;\n  height: 2rem;\n}\n\n.icon.default path[stroke] {\n  stroke: var(--color-icon-information, #064e94);\n}\n\n.icon.default path[fill] {\n  fill: var(--color-icon-information, #064e94);\n}\n\n.icon.default path#Icon[stroke] {\n  stroke: var(--color-icon-information, #064e94);\n}\n\n.icon.default path#Icon[fill] {\n  fill: var(--color-icon-information, #064e94);\n}\n\n.icon.default circle[stroke] {\n  stroke: var(--color-icon-information, #064e94);\n}\n\n.icon.default circle[fill] {\n  fill: var(--color-icon-information, #064e94);\n}\n\n.icon.disabled path#Icon[stroke] {\n  stroke: var(--color-icon-disabled, #808c9e);\n}\n\n.icon.disabled path#Icon[fill] {\n  fill: var(--color-icon-disabled, #808c9e);\n}\n\n.icon.disabled path#Accent[stroke] {\n  stroke: var(--color-icon-disabled, #808c9e);\n}\n\n.icon.disabled path#Accent[fill] {\n  fill: var(--color-icon-disabled, #808c9e);\n}\n\n.icon.disabled circle[stroke] {\n  stroke: var(--color-icon-disabled, #808c9e);\n}\n\n.icon.disabled circle[fill] {\n  fill: var(--color-icon-disabled, #808c9e);\n}\n\n.icon.disabled path[stroke] {\n  stroke: var(--color-icon-disabled, #808c9e);\n}\n\n.icon.disabled path[fill] {\n  fill: var(--color-icon-disabled, #808c9e);\n}\n\n.icon.default path.has_opacity,\n.icon.default g.has_opacity,\n.icon.default circle.has_opacity,\n.icon.default path.has_opacity,\n.icon.default g.has_opacity,\n.icon.default circle.has_opacity {\n  opacity: 0.5;\n}\n\n.label-cost {\n  display: flex;\n  align-items: center;\n  flex-direction: row;\n  gap: var(--spacing-3);\n}\n\n.label-cost.payment_icon {\n  flex-direction: column;\n  align-items: flex-start;\n  gap: var(--spacing-3);\n}\n\n.label-cost span {\n  font-size: 1rem;\n  line-height: 1.2;\n}\n\n.checkbox_container {\n  margin-left: 1rem;\n}\n\n.icon-md {\n  width: 2rem;\n  height: 2rem;\n}\n\n.svg-icon {\n  width: 2rem;\n  height: 2rem;\n}\n\n.button{\n  margin-top: var(--spacing-2);\n}\n\n.buttons {\n  display: flex;\n  gap: var(--spacing-3);\n}\n\n/* State Styles */\n.checkbox_group_item.default {\n  border: 1px solid var(--color-border-subtle, #cdd5df);\n  background: var(--color-background-card, #ffffff);\n}\n\n.checkbox_group_item.default:hover {\n  border: 1px solid var(--color-border-selected, #075db2);\n  background: var(--color-background-card, #ffffff);\n}\n\n.checkbox_group_item.selected {\n  border: 2px solid var(--color-border-selected, #075db2);\n  background: var(--color-background-information-subtlest, #e4f0fc);\n}\n\n.checkbox_group_item.selected:hover .cost,\n.checkbox_group_item.selected:hover .supporting_text {\n  color: var(--color-text-information, #064e94) !important;\n}\n\n.checkbox_group_item.selected:hover {\n  border: 2px solid var(--color-border-selected, #075db2);\n  background: var(--color-background-information-subtler, #c8e0f9);\n}\n\n.checkbox_group_item.disabled {\n  border: 1px solid var(--color-border-disabled, #e3e8ef);\n  background: var(--color-background-disabled, #f6f8fa);\n  pointer-events: none;\n  cursor: not-allowed;\n}\n\n.checkbox_group_item.selected.disabled {\n  border: 2px solid var(--color-border-disabled, #e3e8ef);\n  background: var(--color-background-disabled, #f6f8fa);\n  pointer-events: none;\n  cursor: not-allowed;\n}\n\n.checkbox_group_item ::slotted([slot='label']) {\n  color: var(--color-text-bold, #202939) !important;\n}\n\n.checkbox_group_item.selected ::slotted([slot='label']) {\n  color: var(--color-text-information-bold, #042f59) !important;\n}\n\n.checkbox_group_item ::slotted([slot='cost']) {\n  color: var(--color-text, #4b5565) !important;\n}\n\n.checkbox_group_item.selected ::slotted([slot='cost']) {\n  color: var(--color-text-information, #064e94) !important;\n}\n\n.checkbox_group_item ::slotted([slot='supporting_text']) {\n  color: var(--color-text, #4b5565) !important;\n}\n\n.checkbox_group_item.selected ::slotted([slot='supporting_text']) {\n  color: var(--color-text-information, #064e94) !important;\n}\n\n.checkbox_group_item.disabled ::slotted([slot='cost']),\n.checkbox_group_item.disabled ::slotted([slot='label']),\n.checkbox_group_item.disabled ::slotted([slot='supporting_text']) {\n  color: var(--color-text-disabled, #cdd5df) !important;\n}\n\n.icon_simple_svg.disabled path[stroke] {\n  stroke: var(--color-icon-disabled, #cdd5df);\n}\n\n.icon_simple_svg.disabled path[fill] {\n  fill: var(--color-icon-disabled, #cdd5df);\n}\n","import { Component, h, Prop, Element, Event, EventEmitter, State, getAssetPath } from '@stencil/core';\nimport { GeneralSizes, StateEnum, BreakPoints, CheckBoxVariants } from '../../models/reusableModels';\n\n@Component({\n  tag: 'gb-checkbox-group-item',\n  styleUrl: 'gb-checkbox-group-item.css',\n  shadow: true,\n})\nexport class GbCheckboxGroupItem {\n  @Prop() size: GeneralSizes;\n  @Prop() type: 'icon_simple' | 'avatar' | 'payment_icon' | 'radio_button' | 'checkbox';\n  @Prop() state: StateEnum;\n  @Prop() breakpoint: BreakPoints;\n  @Prop() showCost: boolean = false; // to control cost visibility\n  @Element() el: HTMLElement;\n  @Prop({ mutable: true }) selected: boolean = false;\n  @Prop() showButton: boolean = true;\n  @Prop() buttonText: string = '';\n  @Prop() icon: string = '';\n  @Prop() checkboxType: CheckBoxVariants;\n  @State() leadingIconSvg: string = '';\n  @Event() buttonClicked: EventEmitter<void>;\n  @Event() groupItemClicked: EventEmitter<boolean>;\n\n  async loadIcon(iconName: string) {\n    const iconPath = getAssetPath(`${iconName}`);\n    const response = await fetch(iconPath);\n    const svg = await response.text();\n\n    const parser = new DOMParser();\n    const svgDoc = parser.parseFromString(svg, 'image/svg+xml');\n    const svgElement = svgDoc.documentElement;\n\n    // Add `has-opacity` class to all elements that have an opacity attribute\n    const elementsWithOpacity = svgElement.querySelectorAll('[opacity]');\n    elementsWithOpacity.forEach(el => {\n      el.classList.add('has_opacity');\n    });\n\n    // Serialize and store\n    const modifiedSvg = svgElement.outerHTML;\n    // console.log(modifiedSvg)\n    this.leadingIconSvg = modifiedSvg;\n  }\n\n  onButtonClicked() {\n    this.buttonClicked.emit();\n  }\n\n  componentWillLoad() {\n    this.loadIcon(this.icon);\n  }\n\n  private getLabelSizeClass() {\n    switch (this.size) {\n      case 'md':\n        return 'text-lg-semi-bold';\n      case 'sm':\n        return 'text-md-semi-bold';\n    }\n  }\n\n  private getCostSizeClass() {\n    switch (this.size) {\n      case 'xl':\n        return 'text-md-regular';\n      case 'lg':\n        return 'text-md-regular';\n      case 'md':\n        return 'text-sm-regular';\n      case 'sm':\n        return 'text-xs-regular';\n      default:\n        return 'text-xs-regular';\n    }\n  }\n\n  private getSupportingTextClasses() {\n    switch (this.size) {\n      case 'md':\n        return 'text-md-regular';\n      case 'sm':\n        return 'text-sm-regular';\n      default:\n        return 'text-sm-regular';\n    }\n  }\n\n  private getLabelColorClasses() {\n    switch (this.selected) {\n      case true:\n        return 'label_selected';\n      case false:\n        return 'label_not_selected';\n    }\n  }\n\n  private getCostColorClasses() {\n    switch (this.selected) {\n      case true:\n        return 'cost_selected';\n      case false:\n        return 'cost_not_selected';\n    }\n  }\n\n  componentDidUpdate() {\n    const labelSlot = this.el.querySelector('[slot=\"label\"]');\n    const costSlot = this.el.querySelector('[slot=\"cost\"]');\n\n    labelSlot.classList.add(this.getLabelColorClasses());\n    costSlot.classList.add(this.getCostColorClasses());\n  }\n\n  componentDidLoad() {\n    const labelSlot = this.el.querySelector('[slot=\"label\"]');\n    const costSlot = this.el.querySelector('[slot=\"cost\"]');\n    const supportingTextSlot = this.el.querySelector('[slot=\"supporting_text\"]');\n\n    if (labelSlot) {\n      labelSlot.classList.add(this.getLabelSizeClass());\n    }\n\n    if (costSlot) {\n      costSlot.classList.add(this.getCostSizeClass());\n      costSlot.classList.add(this.getCostColorClasses());\n    }\n\n    if (supportingTextSlot) {\n      supportingTextSlot.classList.add(this.getSupportingTextClasses());\n      supportingTextSlot.classList.add('supporting_text');\n    }\n  }\n\n  private renderIcon() {\n    switch (this.type) {\n      case 'avatar':\n        return (\n          <gb-avatar class=\"icon-md\" size=\"md\" placeholder={false} icon=\"user\">\n            <img src=\"build/assets/avatar_pic.jpg\" slot=\"image\"></img>\n          </gb-avatar>\n        );\n      case 'payment_icon':\n        return (\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"46\" height=\"32\" viewBox=\"0 0 46 32\" fill=\"none\">\n            <rect x=\"0.5\" y=\"0.5\" width=\"45\" height=\"31\" rx=\"5.5\" fill=\"white\" />\n            <rect x=\"0.5\" y=\"0.5\" width=\"45\" height=\"31\" rx=\"5.5\" stroke=\"#F8FAFC\" />\n            <path\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n              d=\"M14.3336 21.1444H11.5872L9.52784 13.0565C9.43009 12.6845 9.22255 12.3556 8.91725 12.2006C8.15535 11.811 7.31579 11.501 6.3999 11.3446V11.0332H10.824C11.4346 11.0332 11.8925 11.501 11.9689 12.0442L13.0374 17.8782L15.7824 11.0332H18.4524L14.3336 21.1444ZM19.9789 21.1444H17.3852L19.5209 11.0332H22.1146L19.9789 21.1444ZM25.4702 13.8343C25.5465 13.2898 26.0044 12.9784 26.5387 12.9784C27.3783 12.9002 28.2928 13.0566 29.0561 13.4448L29.514 11.2678C28.7508 10.9564 27.9112 10.8 27.1493 10.8C24.6319 10.8 22.8002 12.2006 22.8002 14.1444C22.8002 15.6231 24.0977 16.3995 25.0136 16.8673C26.0044 17.3337 26.3861 17.6451 26.3097 18.1114C26.3097 18.811 25.5465 19.1224 24.7846 19.1224C23.8687 19.1224 22.9528 18.8892 22.1146 18.4997L21.6567 20.678C22.5725 21.0662 23.5634 21.2226 24.4793 21.2226C27.3019 21.2994 29.0561 19.9002 29.0561 17.8001C29.0561 15.1553 25.4702 15.0003 25.4702 13.8343ZM38.1332 21.1444L36.0738 11.0332H33.8618C33.4038 11.0332 32.9459 11.3446 32.7932 11.811L28.9797 21.1444H31.6497L32.1826 19.667H35.4632L35.7685 21.1444H38.1332ZM34.2434 13.7562L35.0053 17.5669H32.8696L34.2434 13.7562Z\"\n              fill=\"#172B85\"\n            />\n          </svg>\n        );\n      case 'icon_simple':\n        return <div class={`icon ${this.state}`} innerHTML={this.leadingIconSvg}></div>;\n      case 'radio_button':\n        return <gb-checkbox size={this.size} type=\"radio\" state={this.state} checked={this.selected}></gb-checkbox>;\n      case 'checkbox':\n        return <gb-checkbox size={this.size} type=\"checkbox\" state={this.state} checked={this.selected}></gb-checkbox>;\n    }\n  }\n\n  // Toggle selected state on checkbox click\n  private toggleSelection() {\n    if (this.state === 'default') {\n      this.selected = !this.selected;\n    }\n\n    this.groupItemClicked.emit(this.selected);\n  }\n\n  render() {\n    return [\n      <div class={`checkbox_group_item ${this.size} ${this.state} ${this.selected ? 'selected' : ''} ${this.breakpoint}`} onClick={() => this.toggleSelection()}>\n        <div class=\"item-content\">\n          {this.renderIcon()}\n          <div class=\"text-container\">\n            <div class={`label-cost ${this.type}`}>\n              <slot name=\"label\"></slot>\n              {this.showCost && <slot name=\"cost\"></slot>}\n            </div>\n            {this.type === 'payment_icon' ? (\n              <div class=\"buttons\">\n                <gb-button size={this.size} hierarchy=\"link_gray\" icon=\"default\" state={this.state}>\n                  <p>Set as default</p>\n                </gb-button>\n                <gb-button size={this.size} hierarchy=\"link_color\" icon=\"default\" state={this.state}>\n                  <p>Edit</p>\n                </gb-button>\n              </div>\n            ) : (\n              <slot name=\"supporting_text\"></slot>\n            )}\n            <gb-button\n              class=\"button\"\n              size=\"lg\"\n              state={this.state}\n              hierarchy={this.selected ? 'link_color' : 'link_gray'}\n              icon=\"default\"\n              onClick={e => {\n                this.onButtonClicked();\n                e.stopPropagation();\n              }}\n            >\n              <p>{this.buttonText}</p>\n            </gb-button>\n          </div>\n        </div>\n        {this.type === 'icon_simple' || this.type === 'avatar' || this.type === 'payment_icon' ? (\n          <div class={`checkbox_container`}>\n            <gb-checkbox type={this.checkboxType} size={this.size} state={this.state} checked={this.selected}></gb-checkbox>\n          </div>\n        ) : null}\n      </div>,\n    ];\n  }\n}\n"],"version":3}
+{"file":"p-p6ZBSYgB.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/gb-checkbox-group-item/gb-checkbox-group-item.css?tag=gb-checkbox-group-item&encapsulation=shadow","src/components/gb-checkbox-group-item/gb-checkbox-group-item.tsx"],"sourcesContent":["@import './../../global/global.css';\n\n.checkbox_group_item {\n  display: flex;\n  justify-content: space-between;\n  /* align-items: center; */\n  background-color: var(--color-background-card, #ffffff);\n  border: 1px solid var(--color-border-subtle, #cdd5df);\n  padding: 1rem;\n  margin-bottom: 0.5rem;\n  transition: all 0.1s ease-in-out;\n  cursor: pointer;\n  border-radius: var(--rounded-md);\n}\n\n.checkbox_group_item .avatar {\n  /* this is correct*/\n  flex: 1 0 0;\n  margin-top: 0.5rem;\n  border-radius: 12.5rem;\n  border: 0.5px solid var(--color-blanket-subtler);\n}\n\n.checkbox_group_item.selected {\n  border: 2px solid var(--color-border-selected, #075db2); /* Checked border color */\n  background: var(--color-background-information-subtlest, #e4f0fc); /* Checked background color */\n}\n\n/* i'm using this to apply the hover effect but its turning white on hover??? */\n.checkbox_group_item:hover {\n  background: var(--color-background-information-subtler, #c8e0f9);\n  border-color: var(--color-border-selected, #075db2);\n}\n\n/* i'm using this to change icon color on hover */\n.checkbox_group_item:hover .icon-md,\n.checkbox_group_item:hover .svg-icon {\n  fill: var(--color-icon-information, #064e94);\n}\n\n.item-content {\n  display: flex;\n  flex: 1 0 0;\n  align-self: stretch;\n}\n\n.text-container {\n  display: flex;\n  flex-direction: column;\n  gap: var(--spacing-3);\n  margin-left: 1rem;\n}\n\n/* Icon Styles */\n.icon svg{\n  width: 2rem;\n  height: 2rem;\n}\n\n.icon.default path[stroke] {\n  stroke: var(--color-icon-information, #064e94);\n}\n\n.icon.default path[fill] {\n  fill: var(--color-icon-information, #064e94);\n}\n\n.icon.default path#Icon[stroke] {\n  stroke: var(--color-icon-information, #064e94);\n}\n\n.icon.default path#Icon[fill] {\n  fill: var(--color-icon-information, #064e94);\n}\n\n.icon.default circle[stroke] {\n  stroke: var(--color-icon-information, #064e94);\n}\n\n.icon.default circle[fill] {\n  fill: var(--color-icon-information, #064e94);\n}\n\n.icon.disabled path#Icon[stroke] {\n  stroke: var(--color-icon-disabled, #808c9e);\n}\n\n.icon.disabled path#Icon[fill] {\n  fill: var(--color-icon-disabled, #808c9e);\n}\n\n.icon.disabled path#Accent[stroke] {\n  stroke: var(--color-icon-disabled, #808c9e);\n}\n\n.icon.disabled path#Accent[fill] {\n  fill: var(--color-icon-disabled, #808c9e);\n}\n\n.icon.disabled circle[stroke] {\n  stroke: var(--color-icon-disabled, #808c9e);\n}\n\n.icon.disabled circle[fill] {\n  fill: var(--color-icon-disabled, #808c9e);\n}\n\n.icon.disabled path[stroke] {\n  stroke: var(--color-icon-disabled, #808c9e);\n}\n\n.icon.disabled path[fill] {\n  fill: var(--color-icon-disabled, #808c9e);\n}\n\n.icon.default path.has_opacity,\n.icon.default g.has_opacity,\n.icon.default circle.has_opacity,\n.icon.default path.has_opacity,\n.icon.default g.has_opacity,\n.icon.default circle.has_opacity {\n  opacity: 0.5;\n}\n\n.label-cost {\n  display: flex;\n  align-items: center;\n  flex-direction: row;\n  gap: var(--spacing-3);\n}\n\n.label-cost.payment_icon {\n  flex-direction: column;\n  align-items: flex-start;\n  gap: var(--spacing-3);\n}\n\n.label-cost span {\n  font-size: 1rem;\n  line-height: 1.2;\n}\n\n.checkbox_container {\n  margin-left: 1rem;\n}\n\n.icon-md {\n  width: 2rem;\n  height: 2rem;\n}\n\n.svg-icon {\n  width: 2rem;\n  height: 2rem;\n}\n\n.button{\n  margin-top: var(--spacing-2);\n}\n\n.buttons {\n  display: flex;\n  gap: var(--spacing-3);\n}\n\n/* State Styles */\n.checkbox_group_item.default {\n  border: 1px solid var(--color-border-subtle, #cdd5df);\n  background: var(--color-background-card, #ffffff);\n}\n\n.checkbox_group_item.default:hover {\n  border: 1px solid var(--color-border-selected, #075db2);\n  background: var(--color-background-card, #ffffff);\n}\n\n.checkbox_group_item.selected {\n  border: 2px solid var(--color-border-selected, #075db2);\n  background: var(--color-background-information-subtlest, #e4f0fc);\n}\n\n.checkbox_group_item.selected:hover .cost,\n.checkbox_group_item.selected:hover .supporting_text {\n  color: var(--color-text-information, #064e94) !important;\n}\n\n.checkbox_group_item.selected:hover {\n  border: 2px solid var(--color-border-selected, #075db2);\n  background: var(--color-background-information-subtler, #c8e0f9);\n}\n\n.checkbox_group_item.disabled {\n  border: 1px solid var(--color-border-disabled, #e3e8ef);\n  background: var(--color-background-disabled, #f6f8fa);\n  pointer-events: none;\n  cursor: not-allowed;\n}\n\n.checkbox_group_item.selected.disabled {\n  border: 2px solid var(--color-border-disabled, #e3e8ef);\n  background: var(--color-background-disabled, #f6f8fa);\n  pointer-events: none;\n  cursor: not-allowed;\n}\n\n.checkbox_group_item ::slotted([slot='label']) {\n  color: var(--color-text-bold, #202939) !important;\n}\n\n.checkbox_group_item.selected ::slotted([slot='label']) {\n  color: var(--color-text-information-bold, #042f59) !important;\n}\n\n.checkbox_group_item ::slotted([slot='cost']) {\n  color: var(--color-text, #4b5565) !important;\n}\n\n.checkbox_group_item.selected ::slotted([slot='cost']) {\n  color: var(--color-text-information, #064e94) !important;\n}\n\n.checkbox_group_item ::slotted([slot='supporting_text']) {\n  color: var(--color-text, #4b5565) !important;\n}\n\n.checkbox_group_item.selected ::slotted([slot='supporting_text']) {\n  color: var(--color-text-information, #064e94) !important;\n}\n\n.checkbox_group_item.disabled ::slotted([slot='cost']),\n.checkbox_group_item.disabled ::slotted([slot='label']),\n.checkbox_group_item.disabled ::slotted([slot='supporting_text']) {\n  color: var(--color-text-disabled, #cdd5df) !important;\n}\n\n.icon_simple_svg.disabled path[stroke] {\n  stroke: var(--color-icon-disabled, #cdd5df);\n}\n\n.icon_simple_svg.disabled path[fill] {\n  fill: var(--color-icon-disabled, #cdd5df);\n}\n","import { Component, h, Prop, Element, Event, EventEmitter, State, getAssetPath } from '@stencil/core';\nimport { GeneralSizes, StateEnum, BreakPoints, CheckBoxVariants } from '../../models/reusableModels';\n\n@Component({\n  tag: 'gb-checkbox-group-item',\n  styleUrl: 'gb-checkbox-group-item.css',\n  shadow: true,\n})\nexport class GbCheckboxGroupItem {\n  @Prop() size: GeneralSizes;\n  @Prop() type: 'icon_simple' | 'avatar' | 'payment_icon' | 'radio_button' | 'checkbox';\n  @Prop() state: StateEnum;\n  @Prop() breakpoint: BreakPoints;\n  @Prop() showCost: boolean = false; // to control cost visibility\n  @Element() el: HTMLElement;\n  @Prop({ mutable: true }) selected: boolean = false;\n  @Prop() showButton: boolean = true;\n  @Prop() buttonText: string = '';\n  @Prop() icon: string = '';\n  @Prop() checkboxType: CheckBoxVariants;\n  @State() leadingIconSvg: string = '';\n  @Event() buttonClicked: EventEmitter<void>;\n  @Event() groupItemClicked: EventEmitter<boolean>;\n\n  async loadIcon(iconName: string) {\n    const iconPath = getAssetPath(`${iconName}`);\n    const response = await fetch(iconPath);\n    const svg = await response.text();\n\n    const parser = new DOMParser();\n    const svgDoc = parser.parseFromString(svg, 'image/svg+xml');\n    const svgElement = svgDoc.documentElement;\n\n    // Add `has-opacity` class to all elements that have an opacity attribute\n    const elementsWithOpacity = svgElement.querySelectorAll('[opacity]');\n    elementsWithOpacity.forEach(el => {\n      el.classList.add('has_opacity');\n    });\n\n    // Serialize and store\n    const modifiedSvg = svgElement.outerHTML;\n    // console.log(modifiedSvg)\n    this.leadingIconSvg = modifiedSvg;\n  }\n\n  onButtonClicked() {\n    this.buttonClicked.emit();\n  }\n\n  componentWillLoad() {\n    this.loadIcon(this.icon);\n  }\n\n  private getLabelSizeClass() {\n    switch (this.size) {\n      case 'md':\n        return 'text-lg-semi-bold';\n      case 'sm':\n        return 'text-md-semi-bold';\n    }\n  }\n\n  private getCostSizeClass() {\n    switch (this.size) {\n      case 'xl':\n        return 'text-md-regular';\n      case 'lg':\n        return 'text-md-regular';\n      case 'md':\n        return 'text-sm-regular';\n      case 'sm':\n        return 'text-xs-regular';\n      default:\n        return 'text-xs-regular';\n    }\n  }\n\n  private getSupportingTextClasses() {\n    switch (this.size) {\n      case 'md':\n        return 'text-md-regular';\n      case 'sm':\n        return 'text-sm-regular';\n      default:\n        return 'text-sm-regular';\n    }\n  }\n\n  private getLabelColorClasses() {\n    switch (this.selected) {\n      case true:\n        return 'label_selected';\n      case false:\n        return 'label_not_selected';\n    }\n  }\n\n  private getCostColorClasses() {\n    switch (this.selected) {\n      case true:\n        return 'cost_selected';\n      case false:\n        return 'cost_not_selected';\n    }\n  }\n\n  componentDidUpdate() {\n    const labelSlot = this.el.querySelector('[slot=\"label\"]');\n    const costSlot = this.el.querySelector('[slot=\"cost\"]');\n\n    labelSlot.classList.add(this.getLabelColorClasses());\n    costSlot.classList.add(this.getCostColorClasses());\n  }\n\n  componentDidLoad() {\n    const labelSlot = this.el.querySelector('[slot=\"label\"]');\n    const costSlot = this.el.querySelector('[slot=\"cost\"]');\n    const supportingTextSlot = this.el.querySelector('[slot=\"supporting_text\"]');\n\n    if (labelSlot) {\n      labelSlot.classList.add(this.getLabelSizeClass());\n    }\n\n    if (costSlot) {\n      costSlot.classList.add(this.getCostSizeClass());\n      costSlot.classList.add(this.getCostColorClasses());\n    }\n\n    if (supportingTextSlot) {\n      supportingTextSlot.classList.add(this.getSupportingTextClasses());\n      supportingTextSlot.classList.add('supporting_text');\n    }\n  }\n\n  private renderIcon() {\n    switch (this.type) {\n      case 'avatar':\n        return (\n          <gb-avatar class=\"icon-md\" size=\"md\" placeholder={false} icon=\"user\">\n            <img src=\"build/assets/avatar_pic.jpg\" slot=\"image\"></img>\n          </gb-avatar>\n        );\n      case 'payment_icon':\n        return (\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"46\" height=\"32\" viewBox=\"0 0 46 32\" fill=\"none\">\n            <rect x=\"0.5\" y=\"0.5\" width=\"45\" height=\"31\" rx=\"5.5\" fill=\"white\" />\n            <rect x=\"0.5\" y=\"0.5\" width=\"45\" height=\"31\" rx=\"5.5\" stroke=\"#F8FAFC\" />\n            <path\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n              d=\"M14.3336 21.1444H11.5872L9.52784 13.0565C9.43009 12.6845 9.22255 12.3556 8.91725 12.2006C8.15535 11.811 7.31579 11.501 6.3999 11.3446V11.0332H10.824C11.4346 11.0332 11.8925 11.501 11.9689 12.0442L13.0374 17.8782L15.7824 11.0332H18.4524L14.3336 21.1444ZM19.9789 21.1444H17.3852L19.5209 11.0332H22.1146L19.9789 21.1444ZM25.4702 13.8343C25.5465 13.2898 26.0044 12.9784 26.5387 12.9784C27.3783 12.9002 28.2928 13.0566 29.0561 13.4448L29.514 11.2678C28.7508 10.9564 27.9112 10.8 27.1493 10.8C24.6319 10.8 22.8002 12.2006 22.8002 14.1444C22.8002 15.6231 24.0977 16.3995 25.0136 16.8673C26.0044 17.3337 26.3861 17.6451 26.3097 18.1114C26.3097 18.811 25.5465 19.1224 24.7846 19.1224C23.8687 19.1224 22.9528 18.8892 22.1146 18.4997L21.6567 20.678C22.5725 21.0662 23.5634 21.2226 24.4793 21.2226C27.3019 21.2994 29.0561 19.9002 29.0561 17.8001C29.0561 15.1553 25.4702 15.0003 25.4702 13.8343ZM38.1332 21.1444L36.0738 11.0332H33.8618C33.4038 11.0332 32.9459 11.3446 32.7932 11.811L28.9797 21.1444H31.6497L32.1826 19.667H35.4632L35.7685 21.1444H38.1332ZM34.2434 13.7562L35.0053 17.5669H32.8696L34.2434 13.7562Z\"\n              fill=\"#172B85\"\n            />\n          </svg>\n        );\n      case 'icon_simple':\n        return <div class={`icon ${this.state}`} innerHTML={this.leadingIconSvg}></div>;\n      case 'radio_button':\n        return <gb-checkbox size={this.size} type=\"radio\" state={this.state} checked={this.selected}></gb-checkbox>;\n      case 'checkbox':\n        return <gb-checkbox size={this.size} type=\"checkbox\" state={this.state} checked={this.selected}></gb-checkbox>;\n    }\n  }\n\n  // Toggle selected state on checkbox click\n  private toggleSelection() {\n    if (this.state === 'default') {\n      this.selected = !this.selected;\n    }\n\n    this.groupItemClicked.emit(this.selected);\n  }\n\n  render() {\n    return [\n      <div class={`checkbox_group_item ${this.size} ${this.state} ${this.selected ? 'selected' : ''} ${this.breakpoint}`} onClick={() => this.toggleSelection()}>\n        <div class=\"item-content\">\n          {this.renderIcon()}\n          <div class=\"text-container\">\n            <div class={`label-cost ${this.type}`}>\n              <slot name=\"label\"></slot>\n              {this.showCost && <slot name=\"cost\"></slot>}\n            </div>\n            {this.type === 'payment_icon' ? (\n              <div class=\"buttons\">\n                <gb-button size={this.size} hierarchy=\"link_gray\" icon=\"default\" state={this.state}>\n                  <p>Set as default</p>\n                </gb-button>\n                <gb-button size={this.size} hierarchy=\"link_color\" icon=\"default\" state={this.state}>\n                  <p>Edit</p>\n                </gb-button>\n              </div>\n            ) : (\n              <slot name=\"supporting_text\"></slot>\n            )}\n            <gb-button\n              class=\"button\"\n              size=\"lg\"\n              state={this.state}\n              hierarchy={this.selected ? 'link_color' : 'link_gray'}\n              icon=\"default\"\n              onClick={e => {\n                this.onButtonClicked();\n                e.stopPropagation();\n              }}\n            >\n              <p>{this.buttonText}</p>\n            </gb-button>\n          </div>\n        </div>\n        {this.type === 'icon_simple' || this.type === 'avatar' || this.type === 'payment_icon' ? (\n          <div class={`checkbox_container`}>\n            <gb-checkbox type={this.checkboxType} size={this.size} state={this.state} checked={this.selected}></gb-checkbox>\n          </div>\n        ) : null}\n      </div>,\n    ];\n  }\n}\n"],"version":3}

package/dist/components/{p-Sab5EyKS.js → p-pFicWeHP.js}

@@ -35,7 +35,7 @@ const GbHeaderIcon = /*@__PURE__*/ proxyCustomElement(class GbHeaderIcon extends
         this.loadIcon(this.icon);
     }
     render() {
-        return (h("div", { key: 'a26d65d4b277276c4ac98cb21cf0b5de47b8e910', class: `background ${this.state}` }, h("div", { key: 'ec920c28103a83a77aa99d16e531a5e2340e32db', class: `icon ${this.state === StateEnum.Default ? 'default' : this.state === StateEnum.Disabled ? 'disabled' : ''}`, innerHTML: this.leadingIconSvg }), h(Fragment, null, this.showIndicator && h("div", { key: '0b4616127665e1c5426abb32597eaab1de438301', class: "red_dot" }))));
+        return (h("div", { key: '2be1d0f05f032a101cd0401557b313a58066efa6', class: `background ${this.state}` }, h("div", { key: '5a15d607457c5236aeaa65de41f8abf23c2394b9', class: `icon ${this.state === StateEnum.Default ? 'default' : this.state === StateEnum.Disabled ? 'disabled' : ''}`, innerHTML: this.leadingIconSvg }), h(Fragment, null, this.showIndicator && h("div", { key: '703496ff215b965327a42376fba80945917445d6', class: "red_dot" }))));
     }
     static get style() { return gbHeaderIconCss; }
 }, [257, "gb-header-icon", {
@@ -60,6 +60,6 @@ function defineCustomElement() {
 defineCustomElement();
 
 export { GbHeaderIcon as G, defineCustomElement as d };
-//# sourceMappingURL=p-Sab5EyKS.js.map
+//# sourceMappingURL=p-pFicWeHP.js.map
 
-//# sourceMappingURL=p-Sab5EyKS.js.map
+//# sourceMappingURL=p-pFicWeHP.js.map

package/dist/components/{p-Sab5EyKS.js.map → p-pFicWeHP.js.map}

@@ -1 +1 @@
-{"file":"p-Sab5EyKS.js","mappings":";;;AAAA,MAAM,eAAe,GAAG,6ioEAA6ioE;;MCQxjoE,YAAY,iBAAAA,kBAAA,CAAA,MAAA,YAAA,SAAAC,CAAA,CAAA;AALzB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAOU,QAAA,IAAa,CAAA,aAAA,GAAY,KAAK;AAC9B,QAAA,IAAI,CAAA,IAAA,GAAW,EAAE;AAChB,QAAA,IAAc,CAAA,cAAA,GAAW,EAAE;AAmCrC;IAjCC,MAAM,QAAQ,CAAC,QAAgB,EAAA;QAC7B,MAAM,QAAQ,GAAG,YAAY,CAAC,GAAG,QAAQ,CAAA,CAAE,CAAC;AAC5C,QAAA,MAAM,QAAQ,GAAG,MAAM,KAAK,CAAC,QAAQ,CAAC;AACtC,QAAA,MAAM,GAAG,GAAG,MAAM,QAAQ,CAAC,IAAI,EAAE;AAEjC,QAAA,MAAM,MAAM,GAAG,IAAI,SAAS,EAAE;QAC9B,MAAM,MAAM,GAAG,MAAM,CAAC,eAAe,CAAC,GAAG,EAAE,eAAe,CAAC;AAC3D,QAAA,MAAM,UAAU,GAAG,MAAM,CAAC,eAAe;;QAGzC,MAAM,mBAAmB,GAAG,UAAU,CAAC,gBAAgB,CAAC,WAAW,CAAC;AACpE,QAAA,mBAAmB,CAAC,OAAO,CAAC,EAAE,IAAG;AAC/B,YAAA,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,aAAa,CAAC;AACjC,SAAC,CAAC;;AAGF,QAAA,MAAM,WAAW,GAAG,UAAU,CAAC,SAAS;;AAExC,QAAA,IAAI,CAAC,cAAc,GAAG,WAAW;;IAGnC,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC;;IAG1B,MAAM,GAAA;QACJ,QACE,4DAAK,KAAK,EAAE,CAAA,WAAA,EAAc,IAAI,CAAC,KAAK,EAAE,EAAA,EACpC,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,CAAQ,KAAA,EAAA,IAAI,CAAC,KAAK,KAAK,SAAS,CAAC,OAAO,GAAG,SAAS,GAAG,IAAI,CAAC,KAAK,KAAK,SAAS,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,EAAE,EAAE,SAAS,EAAE,IAAI,CAAC,cAAc,EAAQ,CAAA,EAChK,CAAA,CAAA,QAAA,EAAA,IAAA,EAAG,IAAI,CAAC,aAAa,IAAI,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,SAAS,EAAO,CAAA,CAAI,CACpD;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/gb-header-icon/gb-header-icon.css?tag=gb-header-icon&encapsulation=shadow","src/components/gb-header-icon/gb-header-icon.tsx"],"sourcesContent":["@import './../../global/global.css';\n\n:host {\n    position: relative;\n}\n\nsvg {\n    width: var(--spacing-5);\n    height: var(--spacing-5);\n}\n\n.background.default{\n    width: var(--spacing-8);\n    height: var(--spacing-8);\n    background-color: transparent;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    border-radius: var(--rounded-sm);\n}\n\n.background:hover {\n    background-color: var(--color-background-gray-subtler, #EEF2F6);\n    cursor: pointer;\n}\n\n.background:active {\n    background-color: var(--color-background-gray-subtle, #E3E8EF);\n}\n\n.background.disabled:hover{\n    cursor: not-allowed;\n    background: none;\n}\n\n.red_dot {\n    width: 0.52rem;\n    height: var(--spacing-2);\n    border-radius: var(--rounded-full);\n    background-color: var(--color-icon-brandRed, #E21B2E);\n    border: 2px solid var(--color-surface, #FFFFFF);\n    position: absolute;\n    top: 0.6rem;\n    left: 1.2rem;\n}\n\n.icon{\n    display: flex;\n    justify-content: center;\n    align-items: center;\n}\n\n.icon.default path[stroke] {\n    stroke: var(--color-icon, #4B5565);\n}\n\n.icon.default path[fill] {\n    fill: var(--color-icon, #4B5565);\n}","import { Component, h, Prop, Fragment, State, getAssetPath } from '@stencil/core';\nimport { StateEnum } from '../../models/reusableModels';\n\n@Component({\n  tag: 'gb-header-icon',\n  styleUrl: 'gb-header-icon.css',\n  shadow: true,\n})\nexport class GbHeaderIcon {\n  @Prop() state: StateEnum;\n  @Prop() showIndicator: boolean = false;\n  @Prop() icon: string = '';\n  @State() leadingIconSvg: string = '';\n\n  async loadIcon(iconName: string) {\n    const iconPath = getAssetPath(`${iconName}`);\n    const response = await fetch(iconPath);\n    const svg = await response.text();\n\n    const parser = new DOMParser();\n    const svgDoc = parser.parseFromString(svg, 'image/svg+xml');\n    const svgElement = svgDoc.documentElement;\n\n    // Add `has-opacity` class to all elements that have an opacity attribute\n    const elementsWithOpacity = svgElement.querySelectorAll('[opacity]');\n    elementsWithOpacity.forEach(el => {\n      el.classList.add('has_opacity');\n    });\n\n    // Serialize and store\n    const modifiedSvg = svgElement.outerHTML;\n    // console.log(modifiedSvg)\n    this.leadingIconSvg = modifiedSvg;\n  }\n\n  componentWillLoad() {\n    this.loadIcon(this.icon);\n  }\n\n  render() {\n    return (\n      <div class={`background ${this.state}`}>\n        <div class={`icon ${this.state === StateEnum.Default ? 'default' : this.state === StateEnum.Disabled ? 'disabled' : ''}`} innerHTML={this.leadingIconSvg}></div>\n        <>{this.showIndicator && <div class=\"red_dot\"></div>}</>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-pFicWeHP.js","mappings":";;;AAAA,MAAM,eAAe,GAAG,6ioEAA6ioE;;MCQxjoE,YAAY,iBAAAA,kBAAA,CAAA,MAAA,YAAA,SAAAC,CAAA,CAAA;AALzB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAOU,QAAA,IAAa,CAAA,aAAA,GAAY,KAAK;AAC9B,QAAA,IAAI,CAAA,IAAA,GAAW,EAAE;AAChB,QAAA,IAAc,CAAA,cAAA,GAAW,EAAE;AAmCrC;IAjCC,MAAM,QAAQ,CAAC,QAAgB,EAAA;QAC7B,MAAM,QAAQ,GAAG,YAAY,CAAC,GAAG,QAAQ,CAAA,CAAE,CAAC;AAC5C,QAAA,MAAM,QAAQ,GAAG,MAAM,KAAK,CAAC,QAAQ,CAAC;AACtC,QAAA,MAAM,GAAG,GAAG,MAAM,QAAQ,CAAC,IAAI,EAAE;AAEjC,QAAA,MAAM,MAAM,GAAG,IAAI,SAAS,EAAE;QAC9B,MAAM,MAAM,GAAG,MAAM,CAAC,eAAe,CAAC,GAAG,EAAE,eAAe,CAAC;AAC3D,QAAA,MAAM,UAAU,GAAG,MAAM,CAAC,eAAe;;QAGzC,MAAM,mBAAmB,GAAG,UAAU,CAAC,gBAAgB,CAAC,WAAW,CAAC;AACpE,QAAA,mBAAmB,CAAC,OAAO,CAAC,EAAE,IAAG;AAC/B,YAAA,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,aAAa,CAAC;AACjC,SAAC,CAAC;;AAGF,QAAA,MAAM,WAAW,GAAG,UAAU,CAAC,SAAS;;AAExC,QAAA,IAAI,CAAC,cAAc,GAAG,WAAW;;IAGnC,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC;;IAG1B,MAAM,GAAA;QACJ,QACE,4DAAK,KAAK,EAAE,CAAA,WAAA,EAAc,IAAI,CAAC,KAAK,EAAE,EAAA,EACpC,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,CAAQ,KAAA,EAAA,IAAI,CAAC,KAAK,KAAK,SAAS,CAAC,OAAO,GAAG,SAAS,GAAG,IAAI,CAAC,KAAK,KAAK,SAAS,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,EAAE,EAAE,SAAS,EAAE,IAAI,CAAC,cAAc,EAAQ,CAAA,EAChK,CAAA,CAAA,QAAA,EAAA,IAAA,EAAG,IAAI,CAAC,aAAa,IAAI,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,SAAS,EAAO,CAAA,CAAI,CACpD;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/gb-header-icon/gb-header-icon.css?tag=gb-header-icon&encapsulation=shadow","src/components/gb-header-icon/gb-header-icon.tsx"],"sourcesContent":["@import './../../global/global.css';\n\n:host {\n    position: relative;\n}\n\nsvg {\n    width: var(--spacing-5);\n    height: var(--spacing-5);\n}\n\n.background.default{\n    width: var(--spacing-8);\n    height: var(--spacing-8);\n    background-color: transparent;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    border-radius: var(--rounded-sm);\n}\n\n.background:hover {\n    background-color: var(--color-background-gray-subtler, #EEF2F6);\n    cursor: pointer;\n}\n\n.background:active {\n    background-color: var(--color-background-gray-subtle, #E3E8EF);\n}\n\n.background.disabled:hover{\n    cursor: not-allowed;\n    background: none;\n}\n\n.red_dot {\n    width: 0.52rem;\n    height: var(--spacing-2);\n    border-radius: var(--rounded-full);\n    background-color: var(--color-icon-brandRed, #E21B2E);\n    border: 2px solid var(--color-surface, #FFFFFF);\n    position: absolute;\n    top: 0.6rem;\n    left: 1.2rem;\n}\n\n.icon{\n    display: flex;\n    justify-content: center;\n    align-items: center;\n}\n\n.icon.default path[stroke] {\n    stroke: var(--color-icon, #4B5565);\n}\n\n.icon.default path[fill] {\n    fill: var(--color-icon, #4B5565);\n}","import { Component, h, Prop, Fragment, State, getAssetPath } from '@stencil/core';\nimport { StateEnum } from '../../models/reusableModels';\n\n@Component({\n  tag: 'gb-header-icon',\n  styleUrl: 'gb-header-icon.css',\n  shadow: true,\n})\nexport class GbHeaderIcon {\n  @Prop() state: StateEnum;\n  @Prop() showIndicator: boolean = false;\n  @Prop() icon: string = '';\n  @State() leadingIconSvg: string = '';\n\n  async loadIcon(iconName: string) {\n    const iconPath = getAssetPath(`${iconName}`);\n    const response = await fetch(iconPath);\n    const svg = await response.text();\n\n    const parser = new DOMParser();\n    const svgDoc = parser.parseFromString(svg, 'image/svg+xml');\n    const svgElement = svgDoc.documentElement;\n\n    // Add `has-opacity` class to all elements that have an opacity attribute\n    const elementsWithOpacity = svgElement.querySelectorAll('[opacity]');\n    elementsWithOpacity.forEach(el => {\n      el.classList.add('has_opacity');\n    });\n\n    // Serialize and store\n    const modifiedSvg = svgElement.outerHTML;\n    // console.log(modifiedSvg)\n    this.leadingIconSvg = modifiedSvg;\n  }\n\n  componentWillLoad() {\n    this.loadIcon(this.icon);\n  }\n\n  render() {\n    return (\n      <div class={`background ${this.state}`}>\n        <div class={`icon ${this.state === StateEnum.Default ? 'default' : this.state === StateEnum.Disabled ? 'disabled' : ''}`} innerHTML={this.leadingIconSvg}></div>\n        <>{this.showIndicator && <div class=\"red_dot\"></div>}</>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-B-m07dWQ.js → p-rkY1uNfC.js}

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, c as createEvent, g as getAssetPath, h } from './p-CD7FeUx5.js';
-import { d as defineCustomElement$2 } from './p-DmrnFmi9.js';
-import { d as defineCustomElement$1 } from './p-C21s690I.js';
+import { d as defineCustomElement$2 } from './p-ND3j_jfM.js';
+import { d as defineCustomElement$1 } from './p-Bq8u9i3y.js';
 
 const gbThemeTabCss = ".theme_tab_div{display:flex;padding:0.375rem;justify-content:space-between;align-items:center;gap:0.5rem;border-radius:0.5rem;border:1px solid var(--color-border-subtler, #E3E8EF);background:var(--color-background-gray-subtler, #EEF2F6);flex-grow:1}.tab{width:100%}";
 
@@ -29,7 +29,7 @@ const GbThemeTab = /*@__PURE__*/ proxyCustomElement(class GbThemeTab extends H {
         const systemIconSrc = getAssetPath(`assets/laptop.svg`);
         const sunSrc = getAssetPath(`assets/sun-02.svg`);
         const moonSrc = getAssetPath(`assets/moon-02.svg`);
-        return (h("div", { key: 'c919bd1f4dd96b23b1bfc4cb520200b8b4bebb4d', class: `theme_tab_div` }, h("div", { key: '4085f1fa968a68f1244f616e06cb23a2d1f61155', class: "tab" }, h("gb-icon-button-base", { key: '680023b31f4137798582a27a151a563ae01e5f05', current: this.currentActiveTab === 'system' ? true : false, icon: systemIconSrc, label: "System", onClick: () => this.tabClicked('system') })), h("div", { key: '5d1b6b192ff6c420da34843c521b1abaf9cfdd18', class: "tab" }, h("gb-icon-button-base", { key: '057ac70a94386a4651e24fbfcd09ca049c0c385b', current: this.currentActiveTab === 'light' ? true : false, icon: sunSrc, label: "Light", onClick: () => this.tabClicked('light') })), h("div", { key: '0d2de2c63d8a06d6e53b8598a773fc19633c76fd', class: "tab" }, h("gb-icon-button-base", { key: 'a1d0ae26c56c240121af416cd9dc7dea853a80eb', current: this.currentActiveTab === 'dark' ? true : false, icon: moonSrc, label: "Dark", onClick: () => this.tabClicked('dark') }))));
+        return (h("div", { key: '9348c52b80cbcaeb7debf5ad8ca585103f99a3ed', class: `theme_tab_div` }, h("div", { key: '990f3365e2c7ec218424bb36f5bb231dc5b75aee', class: "tab" }, h("gb-icon-button-base", { key: '05efedafb05ef2f5ebe0fd0b6215e63acc03a892', current: this.currentActiveTab === 'system' ? true : false, icon: systemIconSrc, label: "System", onClick: () => this.tabClicked('system') })), h("div", { key: '97084049bbffdd963c900608ee455109588ceae3', class: "tab" }, h("gb-icon-button-base", { key: '1b4ffa92ca05a50dfba7217093745f8e5fe41b19', current: this.currentActiveTab === 'light' ? true : false, icon: sunSrc, label: "Light", onClick: () => this.tabClicked('light') })), h("div", { key: 'df6725da600134eff6e2b3680ac83c51f1ac1212', class: "tab" }, h("gb-icon-button-base", { key: '8667ea4a6078f946283eef26fd6a29b8f232a62f', current: this.currentActiveTab === 'dark' ? true : false, icon: moonSrc, label: "Dark", onClick: () => this.tabClicked('dark') }))));
     }
     get el() { return this; }
     static get style() { return gbThemeTabCss; }
@@ -63,6 +63,6 @@ function defineCustomElement() {
 defineCustomElement();
 
 export { GbThemeTab as G, defineCustomElement as d };
-//# sourceMappingURL=p-B-m07dWQ.js.map
+//# sourceMappingURL=p-rkY1uNfC.js.map
 
-//# sourceMappingURL=p-B-m07dWQ.js.map
+//# sourceMappingURL=p-rkY1uNfC.js.map

package/dist/components/{p-B-m07dWQ.js.map → p-rkY1uNfC.js.map}

@@ -1 +1 @@
-{"file":"p-B-m07dWQ.js","mappings":";;;;AAAA,MAAM,aAAa,GAAG,2QAA2Q;;MCQpR,UAAU,iBAAAA,kBAAA,CAAA,MAAA,UAAA,SAAAC,CAAA,CAAA;AALvB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;AAQ2B,QAAA,IAAgB,CAAA,gBAAA,GAAW,QAAQ;AA4C7D;AAzCC,IAAA,UAAU,CAAC,KAAa,EAAA;AACtB,QAAA,IAAI,CAAC,gBAAgB,GAAG,KAAK;AAC7B,QAAA,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC;;;;;;;;;IAUlC,MAAM,GAAA;AACJ,QAAA,MAAM,aAAa,GAAG,YAAY,CAAC,CAAA,iBAAA,CAAmB,CAAC;AACvD,QAAA,MAAM,MAAM,GAAG,YAAY,CAAC,CAAA,iBAAA,CAAmB,CAAC;AAChD,QAAA,MAAM,OAAO,GAAG,YAAY,CAAC,CAAA,kBAAA,CAAoB,CAAC;QAElD,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,CAAA,aAAA,CAAe,EAAA,EACzB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,KAAK,EAAA,EACd,CAAA,CAAA,qBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,OAAO,EAAE,IAAI,CAAC,gBAAgB,KAAK,QAAQ,GAAG,IAAI,GAAG,KAAK,EAC1D,IAAI,EAAE,aAAa,EACnB,KAAK,EAAC,QAAQ,EACd,OAAO,EAAE,MAAM,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,GACnB,CACnB,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,KAAK,EAAA,EACd,CAAA,CAAA,qBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,OAAO,EAAE,IAAI,CAAC,gBAAgB,KAAK,OAAO,GAAG,IAAI,GAAG,KAAK,EACzD,IAAI,EAAE,MAAM,EACZ,KAAK,EAAC,OAAO,EACb,OAAO,EAAE,MAAM,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,GAClB,CACnB,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,KAAK,EAAA,EACd,CAAA,CAAA,qBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAqB,OAAO,EAAE,IAAI,CAAC,gBAAgB,KAAK,MAAM,GAAG,IAAI,GAAG,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAC,MAAM,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,GAAwB,CACrK,CACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/gb-theme-tab/gb-theme-tab.css?tag=gb-theme-tab&encapsulation=shadow","src/components/gb-theme-tab/gb-theme-tab.tsx"],"sourcesContent":[".theme_tab_div {\n  display: flex;\n  padding: 0.375rem;\n  justify-content: space-between;\n  align-items: center;\n  gap: 0.5rem;\n  border-radius: 0.5rem;\n  border: 1px solid var(--color-border-subtler, #E3E8EF);\n  background: var(--color-background-gray-subtler, #EEF2F6);\n  flex-grow: 1;\n}\n\n.tab{\n    width: 100%;\n}","import { Component, Element, Event, EventEmitter, Prop, getAssetPath, h } from '@stencil/core';\nimport { ThemeTypes } from '../../models/reusableModels';\n\n@Component({\n  tag: 'gb-theme-tab',\n  styleUrl: 'gb-theme-tab.css',\n  shadow: true,\n})\nexport class GbThemeTab {\n  @Prop({ mutable: true }) theme: ThemeTypes;\n  @Event() themeTabClicked: EventEmitter<string>;\n  @Prop({ mutable: true }) currentActiveTab: string = 'system';\n  @Element() el: HTMLElement;\n\n  tabClicked(theme: string) {\n    this.currentActiveTab = theme;\n    this.themeTabClicked.emit(theme);\n    // this.el.dispatchEvent(\n    //   new CustomEvent('themeChange', {\n    //     detail: { theme },\n    //     bubbles: true,\n    //     composed: true, // This is key\n    //   }),\n    // );    \n  }\n\n  render() {\n    const systemIconSrc = getAssetPath(`assets/laptop.svg`);\n    const sunSrc = getAssetPath(`assets/sun-02.svg`);\n    const moonSrc = getAssetPath(`assets/moon-02.svg`);\n\n    return (\n      <div class={`theme_tab_div`}>\n        <div class=\"tab\">\n          <gb-icon-button-base\n            current={this.currentActiveTab === 'system' ? true : false}\n            icon={systemIconSrc}\n            label=\"System\"\n            onClick={() => this.tabClicked('system')}\n          ></gb-icon-button-base>\n        </div>\n        <div class=\"tab\">\n          <gb-icon-button-base\n            current={this.currentActiveTab === 'light' ? true : false}\n            icon={sunSrc}\n            label=\"Light\"\n            onClick={() => this.tabClicked('light')}\n          ></gb-icon-button-base>\n        </div>\n        <div class=\"tab\">\n          <gb-icon-button-base current={this.currentActiveTab === 'dark' ? true : false} icon={moonSrc} label=\"Dark\" onClick={() => this.tabClicked('dark')}></gb-icon-button-base>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-rkY1uNfC.js","mappings":";;;;AAAA,MAAM,aAAa,GAAG,2QAA2Q;;MCQpR,UAAU,iBAAAA,kBAAA,CAAA,MAAA,UAAA,SAAAC,CAAA,CAAA;AALvB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;AAQ2B,QAAA,IAAgB,CAAA,gBAAA,GAAW,QAAQ;AA4C7D;AAzCC,IAAA,UAAU,CAAC,KAAa,EAAA;AACtB,QAAA,IAAI,CAAC,gBAAgB,GAAG,KAAK;AAC7B,QAAA,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC;;;;;;;;;IAUlC,MAAM,GAAA;AACJ,QAAA,MAAM,aAAa,GAAG,YAAY,CAAC,CAAA,iBAAA,CAAmB,CAAC;AACvD,QAAA,MAAM,MAAM,GAAG,YAAY,CAAC,CAAA,iBAAA,CAAmB,CAAC;AAChD,QAAA,MAAM,OAAO,GAAG,YAAY,CAAC,CAAA,kBAAA,CAAoB,CAAC;QAElD,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,CAAA,aAAA,CAAe,EAAA,EACzB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,KAAK,EAAA,EACd,CAAA,CAAA,qBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,OAAO,EAAE,IAAI,CAAC,gBAAgB,KAAK,QAAQ,GAAG,IAAI,GAAG,KAAK,EAC1D,IAAI,EAAE,aAAa,EACnB,KAAK,EAAC,QAAQ,EACd,OAAO,EAAE,MAAM,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,GACnB,CACnB,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,KAAK,EAAA,EACd,CAAA,CAAA,qBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,OAAO,EAAE,IAAI,CAAC,gBAAgB,KAAK,OAAO,GAAG,IAAI,GAAG,KAAK,EACzD,IAAI,EAAE,MAAM,EACZ,KAAK,EAAC,OAAO,EACb,OAAO,EAAE,MAAM,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,GAClB,CACnB,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,KAAK,EAAA,EACd,CAAA,CAAA,qBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAqB,OAAO,EAAE,IAAI,CAAC,gBAAgB,KAAK,MAAM,GAAG,IAAI,GAAG,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAC,MAAM,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,GAAwB,CACrK,CACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/gb-theme-tab/gb-theme-tab.css?tag=gb-theme-tab&encapsulation=shadow","src/components/gb-theme-tab/gb-theme-tab.tsx"],"sourcesContent":[".theme_tab_div {\n  display: flex;\n  padding: 0.375rem;\n  justify-content: space-between;\n  align-items: center;\n  gap: 0.5rem;\n  border-radius: 0.5rem;\n  border: 1px solid var(--color-border-subtler, #E3E8EF);\n  background: var(--color-background-gray-subtler, #EEF2F6);\n  flex-grow: 1;\n}\n\n.tab{\n    width: 100%;\n}","import { Component, Element, Event, EventEmitter, Prop, getAssetPath, h } from '@stencil/core';\nimport { ThemeTypes } from '../../models/reusableModels';\n\n@Component({\n  tag: 'gb-theme-tab',\n  styleUrl: 'gb-theme-tab.css',\n  shadow: true,\n})\nexport class GbThemeTab {\n  @Prop({ mutable: true }) theme: ThemeTypes;\n  @Event() themeTabClicked: EventEmitter<string>;\n  @Prop({ mutable: true }) currentActiveTab: string = 'system';\n  @Element() el: HTMLElement;\n\n  tabClicked(theme: string) {\n    this.currentActiveTab = theme;\n    this.themeTabClicked.emit(theme);\n    // this.el.dispatchEvent(\n    //   new CustomEvent('themeChange', {\n    //     detail: { theme },\n    //     bubbles: true,\n    //     composed: true, // This is key\n    //   }),\n    // );    \n  }\n\n  render() {\n    const systemIconSrc = getAssetPath(`assets/laptop.svg`);\n    const sunSrc = getAssetPath(`assets/sun-02.svg`);\n    const moonSrc = getAssetPath(`assets/moon-02.svg`);\n\n    return (\n      <div class={`theme_tab_div`}>\n        <div class=\"tab\">\n          <gb-icon-button-base\n            current={this.currentActiveTab === 'system' ? true : false}\n            icon={systemIconSrc}\n            label=\"System\"\n            onClick={() => this.tabClicked('system')}\n          ></gb-icon-button-base>\n        </div>\n        <div class=\"tab\">\n          <gb-icon-button-base\n            current={this.currentActiveTab === 'light' ? true : false}\n            icon={sunSrc}\n            label=\"Light\"\n            onClick={() => this.tabClicked('light')}\n          ></gb-icon-button-base>\n        </div>\n        <div class=\"tab\">\n          <gb-icon-button-base current={this.currentActiveTab === 'dark' ? true : false} icon={moonSrc} label=\"Dark\" onClick={() => this.tabClicked('dark')}></gb-icon-button-base>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-Da7DZYS4.js → p-wDR3wmj-.js}

@@ -43,7 +43,7 @@ const GbMegaInputFieldBase = /*@__PURE__*/ proxyCustomElement(class GbMegaInputF
             this.valueChanged.emit(text); // parent can detect length > 1 as a paste
     }
     render() {
-        return (h("div", { key: '1de5c2cf0b4ad14bf0b8fda6b2daa91ffef4965a', class: { mega_input_wrapper: true, [this.size]: true, [this.state]: true, disabled: this.state === 'disabled' } }, h("input", { key: 'bf75ebfd374d5e09e0337ea722d96cc03e3c8b2b', class: { [this.size]: true, disabled: this.state === 'disabled' }, type: "text", maxlength: "1", placeholder: "0", value: this.value, disabled: this.state === 'disabled', onInput: e => this.handleInput(e), onKeyDown: e => this.handleKeyDown(e), onPaste: e => this.handlePaste(e), ref: el => (this.inputEl = el) })));
+        return (h("div", { key: '20c250aaec3a2fa6941b8b77b8ac55f5b88a55fa', class: { mega_input_wrapper: true, [this.size]: true, [this.state]: true, disabled: this.state === 'disabled' } }, h("input", { key: '6c8ba0a3c92b065603904a36ee612d83ac69689f', class: { [this.size]: true, disabled: this.state === 'disabled' }, type: "text", maxlength: "1", placeholder: "0", value: this.value, disabled: this.state === 'disabled', onInput: e => this.handleInput(e), onKeyDown: e => this.handleKeyDown(e), onPaste: e => this.handlePaste(e), ref: el => (this.inputEl = el) })));
     }
     static get watchers() { return {
         "value": ["onValueChanged"]
@@ -74,6 +74,6 @@ function defineCustomElement() {
 defineCustomElement();
 
 export { GbMegaInputFieldBase as G, defineCustomElement as d };
-//# sourceMappingURL=p-Da7DZYS4.js.map
+//# sourceMappingURL=p-wDR3wmj-.js.map
 
-//# sourceMappingURL=p-Da7DZYS4.js.map
+//# sourceMappingURL=p-wDR3wmj-.js.map

package/dist/components/{p-Da7DZYS4.js.map → p-wDR3wmj-.js.map}

@@ -1 +1 @@
-{"file":"p-Da7DZYS4.js","mappings":";;AAAA,MAAM,uBAAuB,GAAG,k1qEAAk1qE;;MCQr2qE,oBAAoB,iBAAAA,kBAAA,CAAA,MAAA,oBAAA,SAAAC,CAAA,CAAA;AALjC,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;;AAOU,QAAA,IAAK,CAAA,KAAA,GAAqC,SAAS;AAClD,QAAA,IAAU,CAAA,UAAA,GAAW,EAAE;AACxB,QAAA,IAAA,CAAA,KAAK,GAAW,EAAE,CAAC;AAuD5B;;AA/CC,IAAA,cAAc,CAAC,MAAc,EAAA;QAC3B,IAAI,IAAI,CAAC,OAAO;AAAE,YAAA,IAAI,CAAC,OAAO,CAAC,KAAK,GAAG,MAAM;;AAI/C,IAAA,MAAM,UAAU,GAAA;;QACd,CAAA,EAAA,GAAA,IAAI,CAAC,OAAO,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,KAAK,EAAE;;AAGvB,IAAA,WAAW,CAAC,KAAY,EAAA;AACtB,QAAA,MAAM,KAAK,GAAI,KAAK,CAAC,MAA2B,CAAC,KAAK;AACtD,QAAA,MAAM,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;AACrD,QAAA,IAAI,CAAC,OAAO,CAAC,KAAK,GAAG,KAAK;AAC1B,QAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC;;AAG/B,IAAA,aAAa,CAAC,KAAoB,EAAA;AAChC,QAAA,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE;AACpD,YAAA,IAAI,CAAC,gBAAgB,CAAC,IAAI,EAAE,CAAC;;;AAIjC,IAAA,WAAW,CAAC,KAAqB,EAAA;;QAE/B,KAAK,CAAC,cAAc,EAAE;AACtB,QAAA,MAAM,IAAI,GAAG,KAAK,CAAC,aAAa,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,SAAS,EAAE,EAAE,CAAC;AACvE,QAAA,IAAI,IAAI;YAAE,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;;IAGzC,MAAM,GAAA;AACJ,QAAA,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,EAAE,kBAAkB,EAAE,IAAI,EAAE,CAAC,IAAI,CAAC,IAAI,GAAG,IAAI,EAAE,CAAC,IAAI,CAAC,KAAK,GAAG,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,KAAK,KAAK,UAAU,EAAE,EAAA,EAClH,CACE,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,GAAG,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,KAAK,KAAK,UAAU,EAAE,EACjE,IAAI,EAAC,MAAM,EACX,SAAS,EAAC,GAAG,EACb,WAAW,EAAC,GAAG,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,KAAK,KAAK,UAAU,EACnC,OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,EACjC,SAAS,EAAE,CAAC,IAAI,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,EACrC,OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,EACjC,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,OAAO,GAAG,EAAsB,CAAC,EAAA,CAClD,CACE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/gb-mega-input-field-base/gb-mega-input-field-base.css?tag=gb-mega-input-field-base&encapsulation=shadow","src/components/gb-mega-input-field-base/gb-mega-input-field-base.tsx"],"sourcesContent":["@import './../../global/global.css';\n\ndiv {\n  display: flex;   \n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  gap: var(--spacing-Positive-spacing-2, 0.5rem);\n  border-radius: 8px;\n  background: var(--color-background-card, #ffffff);\n  border: 1px solid var(--color-border-input, #CDD5DF);\n}\n\ndiv.sm {\n  width: 2.75rem;\n  min-width: 2.75rem;\n  min-height: 2.75rem;\n  padding: var(--spacing-Positive-spacing-half, 0.125rem);\n}\n\ndiv.md {\n  width: 3rem;\n  min-width: 3rem;\n  min-height: 3rem;\n  padding: 0.625rem var(--spacing-Positive-spacing-2, 0.5rem);\n}\n\ndiv.lg {\n  width: 3.5rem;\n  min-width: 3.5rem;\n  min-height: 3.5rem;\n  padding: var(--spacing-Positive-spacing-3, 0.75rem) var(--spacing-Positive-spacing-2, 0.5rem);\n}\n\ndiv.active {\n  border: 1.3px solid var(--color-border-selected, #075DB2);\n  color: var(--color-text, #4B5565);\n}\n\ndiv.disabled {\n  background: var(--color-background-gray-subtlest, #F6F8FA);\n  border: 1px solid var(--color-border-disabled, #E3E8EF);\n}\n\ninput[type=\"number\"]::-webkit-outer-spin-button,\ninput[type=\"number\"]::-webkit-inner-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\n\ninput {\n  width: inherit;\n  border: none;\n  background-color: transparent; \n  padding: 2px;\n  box-shadow: none;\n  outline: none;\n  text-align: center;\n  font-family: Sora;\n  font-style: normal;\n  font-weight: 500;\n  color: var(--color-text-disabled, #CDD5DF); /* Placeholder color */\n}\n\ninput:focus {\n  border:none;\n  box-shadow: none;\n}\n\ninput.sm {\n  font-size: 1.5rem;\n  line-height: 2rem;\n}\n\ninput.md {\n  font-size: 1.875rem;\n  line-height: 2.375rem;\n}\n\ninput.lg {\n  font-size: 1.875rem;\n  line-height: 2.375rem;\n}\n\n.mega_input_field_wrapper.disabled {\n  background: var(--color-background-gray-subtlest, #F6F8FA);\n  border: 1px solid var(--color-border-disabled, #E3E8EF);\n  color: var(--color-text-disabled, #808C9E);\n}\n\n.mega_input_field_wrapper.disabled,\ninput.disabled{\n  cursor: not-allowed;\n}\n\ninput::placeholder {\n  color: var(--color-text-disabled, #808C9E);\n}\n\ninput:not(:placeholder-shown) {\n  color: var(--color-text, #4B5565);\n}\n\ninput.disabled:not(:placeholder-shown) {\n  color: var(--color-text-disabled, #808C9E);\n}\n","import { Component, h, Prop, State, Event, EventEmitter, Watch, Method } from \"@stencil/core\";\nimport { GeneralSizes } from \"../../models/reusableModels\";\n\n@Component({\n  tag: 'gb-mega-input-field-base',\n  styleUrl: 'gb-mega-input-field-base.css',\n  shadow: true,\n})\nexport class GbMegaInputFieldBase {\n  @Prop() size: GeneralSizes;\n  @Prop() state: 'default' | 'active' | 'disabled'= 'default';\n  @State() inputValue: string = '';\n  @Prop() value: string = ''; // ← controlled value from parent\n  @Event() valueChanged: EventEmitter<string>; // ← fires when user types\n  @Event() backspacePressed: EventEmitter<void>; // ← fires on empty backspace\n\n  private inputEl: HTMLInputElement;\n\n  // Keep internal value in sync if parent changes it\n  @Watch('value')\n  onValueChanged(newVal: string) {\n    if (this.inputEl) this.inputEl.value = newVal;\n  }\n\n  @Method()\n  async focusInput() {\n    this.inputEl?.focus();\n  }\n\n  handleInput(event: Event) {\n    const input = (event.target as HTMLInputElement).value;\n    const digit = input.replace(/[^0-9]/g, '').slice(-1); // numbers only, 1 char\n    this.inputEl.value = digit;\n    this.valueChanged.emit(digit);\n  }\n\n  handleKeyDown(event: KeyboardEvent) {\n    if (event.key === 'Backspace' && !this.inputEl.value) {\n      this.backspacePressed.emit(); // box is already empty, tell parent to go back\n    }\n  }\n\n  handlePaste(event: ClipboardEvent) {\n    // Let the parent handle paste by re-emitting it\n    event.preventDefault();\n    const text = event.clipboardData.getData('text').replace(/[^0-9]/g, '');\n    if (text) this.valueChanged.emit(text); // parent can detect length > 1 as a paste\n  }\n\n  render() {\n    return (\n      <div class={{ mega_input_wrapper: true, [this.size]: true, [this.state]: true, disabled: this.state === 'disabled' }}>\n        <input\n          class={{ [this.size]: true, disabled: this.state === 'disabled' }}\n          type=\"text\"\n          maxlength=\"1\"\n          placeholder=\"0\"\n          value={this.value}\n          disabled={this.state === 'disabled'}\n          onInput={e => this.handleInput(e)}\n          onKeyDown={e => this.handleKeyDown(e)}\n          onPaste={e => this.handlePaste(e)}\n          ref={el => (this.inputEl = el as HTMLInputElement)}\n        />\n      </div>\n    );\n  }\n}"],"version":3}
+{"file":"p-wDR3wmj-.js","mappings":";;AAAA,MAAM,uBAAuB,GAAG,k1qEAAk1qE;;MCQr2qE,oBAAoB,iBAAAA,kBAAA,CAAA,MAAA,oBAAA,SAAAC,CAAA,CAAA;AALjC,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;;AAOU,QAAA,IAAK,CAAA,KAAA,GAAqC,SAAS;AAClD,QAAA,IAAU,CAAA,UAAA,GAAW,EAAE;AACxB,QAAA,IAAA,CAAA,KAAK,GAAW,EAAE,CAAC;AAuD5B;;AA/CC,IAAA,cAAc,CAAC,MAAc,EAAA;QAC3B,IAAI,IAAI,CAAC,OAAO;AAAE,YAAA,IAAI,CAAC,OAAO,CAAC,KAAK,GAAG,MAAM;;AAI/C,IAAA,MAAM,UAAU,GAAA;;QACd,CAAA,EAAA,GAAA,IAAI,CAAC,OAAO,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,KAAK,EAAE;;AAGvB,IAAA,WAAW,CAAC,KAAY,EAAA;AACtB,QAAA,MAAM,KAAK,GAAI,KAAK,CAAC,MAA2B,CAAC,KAAK;AACtD,QAAA,MAAM,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;AACrD,QAAA,IAAI,CAAC,OAAO,CAAC,KAAK,GAAG,KAAK;AAC1B,QAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC;;AAG/B,IAAA,aAAa,CAAC,KAAoB,EAAA;AAChC,QAAA,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE;AACpD,YAAA,IAAI,CAAC,gBAAgB,CAAC,IAAI,EAAE,CAAC;;;AAIjC,IAAA,WAAW,CAAC,KAAqB,EAAA;;QAE/B,KAAK,CAAC,cAAc,EAAE;AACtB,QAAA,MAAM,IAAI,GAAG,KAAK,CAAC,aAAa,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,SAAS,EAAE,EAAE,CAAC;AACvE,QAAA,IAAI,IAAI;YAAE,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;;IAGzC,MAAM,GAAA;AACJ,QAAA,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,EAAE,kBAAkB,EAAE,IAAI,EAAE,CAAC,IAAI,CAAC,IAAI,GAAG,IAAI,EAAE,CAAC,IAAI,CAAC,KAAK,GAAG,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,KAAK,KAAK,UAAU,EAAE,EAAA,EAClH,CACE,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,GAAG,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,KAAK,KAAK,UAAU,EAAE,EACjE,IAAI,EAAC,MAAM,EACX,SAAS,EAAC,GAAG,EACb,WAAW,EAAC,GAAG,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,KAAK,KAAK,UAAU,EACnC,OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,EACjC,SAAS,EAAE,CAAC,IAAI,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,EACrC,OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,EACjC,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,OAAO,GAAG,EAAsB,CAAC,EAAA,CAClD,CACE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/gb-mega-input-field-base/gb-mega-input-field-base.css?tag=gb-mega-input-field-base&encapsulation=shadow","src/components/gb-mega-input-field-base/gb-mega-input-field-base.tsx"],"sourcesContent":["@import './../../global/global.css';\n\ndiv {\n  display: flex;   \n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  gap: var(--spacing-Positive-spacing-2, 0.5rem);\n  border-radius: 8px;\n  background: var(--color-background-card, #ffffff);\n  border: 1px solid var(--color-border-input, #CDD5DF);\n}\n\ndiv.sm {\n  width: 2.75rem;\n  min-width: 2.75rem;\n  min-height: 2.75rem;\n  padding: var(--spacing-Positive-spacing-half, 0.125rem);\n}\n\ndiv.md {\n  width: 3rem;\n  min-width: 3rem;\n  min-height: 3rem;\n  padding: 0.625rem var(--spacing-Positive-spacing-2, 0.5rem);\n}\n\ndiv.lg {\n  width: 3.5rem;\n  min-width: 3.5rem;\n  min-height: 3.5rem;\n  padding: var(--spacing-Positive-spacing-3, 0.75rem) var(--spacing-Positive-spacing-2, 0.5rem);\n}\n\ndiv.active {\n  border: 1.3px solid var(--color-border-selected, #075DB2);\n  color: var(--color-text, #4B5565);\n}\n\ndiv.disabled {\n  background: var(--color-background-gray-subtlest, #F6F8FA);\n  border: 1px solid var(--color-border-disabled, #E3E8EF);\n}\n\ninput[type=\"number\"]::-webkit-outer-spin-button,\ninput[type=\"number\"]::-webkit-inner-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\n\ninput {\n  width: inherit;\n  border: none;\n  background-color: transparent; \n  padding: 2px;\n  box-shadow: none;\n  outline: none;\n  text-align: center;\n  font-family: Sora;\n  font-style: normal;\n  font-weight: 500;\n  color: var(--color-text-disabled, #CDD5DF); /* Placeholder color */\n}\n\ninput:focus {\n  border:none;\n  box-shadow: none;\n}\n\ninput.sm {\n  font-size: 1.5rem;\n  line-height: 2rem;\n}\n\ninput.md {\n  font-size: 1.875rem;\n  line-height: 2.375rem;\n}\n\ninput.lg {\n  font-size: 1.875rem;\n  line-height: 2.375rem;\n}\n\n.mega_input_field_wrapper.disabled {\n  background: var(--color-background-gray-subtlest, #F6F8FA);\n  border: 1px solid var(--color-border-disabled, #E3E8EF);\n  color: var(--color-text-disabled, #808C9E);\n}\n\n.mega_input_field_wrapper.disabled,\ninput.disabled{\n  cursor: not-allowed;\n}\n\ninput::placeholder {\n  color: var(--color-text-disabled, #808C9E);\n}\n\ninput:not(:placeholder-shown) {\n  color: var(--color-text, #4B5565);\n}\n\ninput.disabled:not(:placeholder-shown) {\n  color: var(--color-text-disabled, #808C9E);\n}\n","import { Component, h, Prop, State, Event, EventEmitter, Watch, Method } from \"@stencil/core\";\nimport { GeneralSizes } from \"../../models/reusableModels\";\n\n@Component({\n  tag: 'gb-mega-input-field-base',\n  styleUrl: 'gb-mega-input-field-base.css',\n  shadow: true,\n})\nexport class GbMegaInputFieldBase {\n  @Prop() size: GeneralSizes;\n  @Prop() state: 'default' | 'active' | 'disabled'= 'default';\n  @State() inputValue: string = '';\n  @Prop() value: string = ''; // ← controlled value from parent\n  @Event() valueChanged: EventEmitter<string>; // ← fires when user types\n  @Event() backspacePressed: EventEmitter<void>; // ← fires on empty backspace\n\n  private inputEl: HTMLInputElement;\n\n  // Keep internal value in sync if parent changes it\n  @Watch('value')\n  onValueChanged(newVal: string) {\n    if (this.inputEl) this.inputEl.value = newVal;\n  }\n\n  @Method()\n  async focusInput() {\n    this.inputEl?.focus();\n  }\n\n  handleInput(event: Event) {\n    const input = (event.target as HTMLInputElement).value;\n    const digit = input.replace(/[^0-9]/g, '').slice(-1); // numbers only, 1 char\n    this.inputEl.value = digit;\n    this.valueChanged.emit(digit);\n  }\n\n  handleKeyDown(event: KeyboardEvent) {\n    if (event.key === 'Backspace' && !this.inputEl.value) {\n      this.backspacePressed.emit(); // box is already empty, tell parent to go back\n    }\n  }\n\n  handlePaste(event: ClipboardEvent) {\n    // Let the parent handle paste by re-emitting it\n    event.preventDefault();\n    const text = event.clipboardData.getData('text').replace(/[^0-9]/g, '');\n    if (text) this.valueChanged.emit(text); // parent can detect length > 1 as a paste\n  }\n\n  render() {\n    return (\n      <div class={{ mega_input_wrapper: true, [this.size]: true, [this.state]: true, disabled: this.state === 'disabled' }}>\n        <input\n          class={{ [this.size]: true, disabled: this.state === 'disabled' }}\n          type=\"text\"\n          maxlength=\"1\"\n          placeholder=\"0\"\n          value={this.value}\n          disabled={this.state === 'disabled'}\n          onInput={e => this.handleInput(e)}\n          onKeyDown={e => this.handleKeyDown(e)}\n          onPaste={e => this.handlePaste(e)}\n          ref={el => (this.inputEl = el as HTMLInputElement)}\n        />\n      </div>\n    );\n  }\n}"],"version":3}

package/dist/components/{p-BhPyWyPz.js → p-yq-i_Fpl.js}

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, g as getAssetPath, h } from './p-CD7FeUx5.js';
-import { d as defineCustomElement$1 } from './p-C21s690I.js';
+import { d as defineCustomElement$1 } from './p-Bq8u9i3y.js';
 
 const gbNavBarItemCss = "@import url('https://fonts.googleapis.com/css2?family=Sora&display=swap');\n/**\n * Global styles for portal-based dropdowns\n * Applied outside shadow DOM context\n */\n.portal_dropdown_wrapper {\n  width: -moz-fit-content;\n  width: fit-content;\n  border-radius: var(--rounded-sm);\n  border: 1px solid var(--color-border-subtler, #e3e8ef);\n  background: var(--color-surface, #ffffff);\n  box-shadow: var(--shadow-md);\n  position: absolute;\n  z-index: 9999; /* High z-index to appear above sticky columns */\n  overflow: hidden;\n}\n.portal_dropdown_wrapper gb-dropdown-items-with-shortcut {\n  display: block;\n  width: 100%;\n}\n/* .portal_dropdown_wrapper gb-dropdown-items-with-shortcut:hover {\n  background: var(--color-background-gray-subtler, #eef2f6);\n} */\n/**\n * gb-input-dropdown menu, portaled out of the component's shadow root.\n * Mirrors .dropdown_menu in gb-input-dropdown.css (which is shadow-scoped and\n * therefore no longer applies once this element is moved into #gb-portal-host).\n */\n.input_dropdown_portal_menu {\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n  max-height: 300px;\n  padding: var(--spacing-none);\n  border-radius: var(--rounded-sm);\n  border: 1px solid var(--color-border-subtler, #e3e8ef);\n  background: var(--color-surface, #ffffff);\n  box-shadow: var(--shadow-sm);\n  position: absolute;\n  z-index: 9999;\n  gap: var(--spacing-none);\n  overflow-y: auto;\n  overflow-x: hidden;\n  box-sizing: border-box;\n  /* Exact width (not just a minimum) is set inline by gb-input-dropdown-test.tsx\n   * (componentDidUpdate), matching the trigger's width. Content must not grow\n   * the menu wider than the trigger. */\n}\n.input_dropdown_portal_menu::-webkit-scrollbar {\n  right: 0rem;\n  bottom: -1.53125rem;\n  width: 0.8rem;\n  margin-top: 1rem;\n}\n.input_dropdown_portal_menu::-webkit-scrollbar-track {\n  width: 0.5rem;\n  padding: var(--spacing-1);\n  border: none;\n}\n.input_dropdown_portal_menu::-webkit-scrollbar-thumb {\n  width: 0.5rem;\n  height: 11.75rem;\n  border: 0.25rem solid var(--color-background-card, #ffffff);\n  border-radius: var(--rounded-full);\n  background: var(--color-border-subtle, #cdd5df);\n}\n/* Content rendered inside the portaled input-dropdown menu (search field, empty\n * state, loader) - also shadow-scoped in gb-input-dropdown.css and therefore\n * also unreachable once portaled. Kept in sync with that file by hand. */\n.input_dropdown_portal_menu .dropdown_search_field {\n  background: var(--color-surface, #ffffff);\n  padding: var(--spacing-2) var(--spacing-2) var(--spacing-none) var(--spacing-2);\n  position: sticky;\n  top: 0;\n  z-index: 999;\n}\n.input_dropdown_portal_menu .empty_state {\n  margin: auto;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.input_dropdown_portal_menu .background {\n  position: relative;\n  width: 80%;\n}\n.input_dropdown_portal_menu .message_background {\n  position: absolute;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: var(--spacing-1);\n}\n.input_dropdown_portal_menu .illustration {\n  width: 100px;\n  height: 100px;\n}\n.input_dropdown_portal_menu .message {\n  color: var(--color-text-bold, #202939);\n}\n.input_dropdown_portal_menu .loader_div {\n  width: 100%;\n  height: 10rem;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.input_dropdown_portal_menu .loader {\n  border: 4px solid var(--color-background-gray, #cdd5df);\n  border-top: 4px solid var(--color-background-selected, #075db2);\n  border-radius: 50%;\n  width: 30px;\n  height: 30px;\n  animation: input-dropdown-portal-spin 2s linear infinite;\n}\n@keyframes input-dropdown-portal-spin {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n/* @import 'tailwind.css'; */\n:root {\n  /* --------------------------------------Primary Colors--------------------------------------------- */\n  /* base color palette */\n  --base-white: #fff;\n  --base-black: #000;\n\n  /* gray color palette  */\n  --gray-25: #f9fafb;\n  --gray-50: #f6f8fa;\n  --gray-100: #eef2f6;\n  --gray-200: #e3e8ef;\n  --gray-300: #cdd5df;\n  --gray-400: #808c9e;\n  --gray-500: #697586;\n  --gray-600: #4b5565;\n  --gray-700: #364152;\n  --gray-800: #202939;\n  --gray-900: #121926;\n  --gray-950: #0d121c;\n\n  /* brand dark blue color palette */\n  --brandDarkBlue-25: #f9f9fb;\n  --brandDarkBlue-50: #edeef3;\n  --brandDarkBlue-100: #d3d5e0;\n  --brandDarkBlue-200: #b5b9cc;\n  --brandDarkBlue-300: #9095b2;\n  --brandDarkBlue-400: #464f7f;\n  --brandDarkBlue-500: #212c65;\n  --brandDarkBlue-600: #1e285c;\n  --brandDarkBlue-700: #1c2554;\n  --brandDarkBlue-800: #161d43;\n  --brandDarkBlue-900: #0b0f22;\n  --brandDarkBlue-950: #070914;\n\n  /* brand red color palette */\n  --brandRed-25: #fffbfa;\n  --brandRed-50: #fef1f2;\n  --brandRed-100: #fde3e5;\n  --brandRed-200: #f9b4ba;\n  --brandRed-300: #f68e98;\n  --brandRed-400: #f36976;\n  --brandRed-500: #e21b2e;\n  --brandRed-600: #cc1a2a;\n  --brandRed-700: #b51726;\n  --brandRed-800: #8c121d;\n  --brandRed-900: #680d16;\n  --brandRed-950: #3f080d;\n\n  /* warning color palette */\n  --yellow-25: #fffcf5;\n  --yellow-50: #fffaeb;\n  --yellow-100: #fef0c7;\n  --yellow-200: #fedf89;\n  --yellow-300: #fec84b;\n  --yellow-400: #fdb022;\n  --yellow-500: #f79009;\n  --yellow-600: #dc6803;\n  --yellow-700: #b54708;\n  --yellow-800: #93370d;\n  --yellow-900: #7a2e0e;\n  --yellow-950: #4e1d09;\n\n  /* success color palette  */\n  --green-25: #f6fef9;\n  --green-50: #ecfdf3;\n  --green-100: #dcfaeb;\n  --green-200: #a9efc5;\n  --green-300: #75e0a7;\n  --green-400: #47cd89;\n  --green-500: #17b26a;\n  --green-600: #067f48;\n  --green-700: #067647;\n  --green-800: #085d3a;\n  --green-900: #074d31;\n  --green-950: #053321;\n\n  /* ------------------------------------------opacity color palette--------------------------------------  */\n  /* 0% opacity */\n  /* White */\n  --white-opacity0: rgba(255, 255, 255, 0);\n\n  /* Gray */\n  --gray25-opacity0: rgba(249, 250, 251, 0);\n  --gray900-opacity0: rgba(18, 25, 38, 0);\n  --gray950-opacity0: rgba(13, 18, 28, 0);\n\n  /* 20% opacity */\n  /* White */\n  --white-opacity20: rgba(255, 255, 255, 0.2);\n\n  /* Dark Blue */\n  --darkBlue200-opacity20: rgba(181, 185, 204, 0.2);\n  --darkBlue500-opacity20: rgba(33, 44, 101, 0.2);\n\n  /* Gray */\n  --gray25-opacity20: rgba(249, 250, 251, 0.2);\n  --gray900-opacity20: rgba(18, 25, 38, 0.2);\n  --gray950-opacity20: rgba(13, 18, 28, 0.2);\n\n  /* 30% opacity */\n  --darkBlue200-opacity30: rgba(181, 185, 204, 0.3);\n  --darkBlue500-opacity30: rgba(33, 44, 101, 0.3);\n\n  /* 40% opacity */\n  --darkBlue200-opacity40: rgba(181, 185, 204, 0.4);\n  --darkBlue500-opacity40: rgba(33, 44, 101, 0.4);\n\n  /* 50% opacity */\n  /* White */\n  --white-opacity50: rgba(255, 255, 255, 0.5);\n\n  /* Gray */\n  --gray25-opacity50: rgba(249, 250, 251, 0.5);\n  --gray900-opacity50: rgba(18, 25, 38, 0.5);\n  --gray950-opacity50: rgba(13, 18, 28, 0.5);\n\n  /* ------------------------------------------Secondary Color------------------------------------------- */\n  /* blueLight color palete */\n  --lightBlue-25: #f5fbff;\n  --lightBlue-50: #f0f9ff;\n  --lightBlue-100: #e0f2fe;\n  --lightBlue-200: #b9e6fe;\n  --lightBlue-300: #7cd4fd;\n  --lightBlue-400: #7cd4fd;\n  --lightBlue-500: #0ba5ec;\n  --lightBlue-600: #0086c9;\n  --lightBlue-700: #026aa2;\n  --lightBlue-800: #065986;\n  --lightBlue-900: #0b4a6f;\n  --lightBlue-950: #062c41;\n\n  /* blue color palette */\n  --blue-25: #ecf5fe;\n  --blue-50: #e4f0fc;\n  --blue-100: #c8e0f9;\n  --blue-200: #9ac7f4;\n  --blue-300: #6aa9e7;\n  --blue-400: #378fe6;\n  --blue-500: #075db2;\n  --blue-600: #064e94;\n  --blue-700: #053e77;\n  --blue-800: #042f59;\n  --blue-900: #022445;\n  --blue-950: #021d37;\n\n  /* Purple color palete */\n  --purple-25: #fafaff;\n  --purple-50: #f4f3ff;\n  --purple-100: #ebe9fe;\n  --purple-200: #d9d6fe;\n  --purple-300: #bdb4fe;\n  --purple-400: #9b8afb;\n  --purple-500: #7a5af8;\n  --purple-600: #6938ef;\n  --purple-700: #5925dc;\n  --purple-800: #4a1fb8;\n  --purple-900: #3e1c96;\n  --purple-950: #27115f;\n\n  /* pink color palette */\n  --pink-25: #fef6fb;\n  --pink-50: #fdf2fa;\n  --pink-100: #fce7f6;\n  --pink-200: #fcceee;\n  --pink-300: #faa7e0;\n  --pink-400: #f670c7;\n  --pink-500: #ee46bc;\n  --pink-600: #dd2590;\n  --pink-700: #c11574;\n  --pink-800: #9e165f;\n  --pink-900: #851651;\n  --pink-950: #4e0d30;\n\n  /* -------------------------------------------------Token---------------------------------------------- */\n  /* Light-theme defaults so external hosts still resolve key tokens when data-theme is not set. */\n  --color-text-bold: var(--gray-800);\n  --color-text: var(--gray-600);\n  --color-text-subtle: var(--gray-500);\n  --color-text-disabled: var(--gray-400);\n  --color-text-inverse: var(--base-white);\n\n  --color-icon-bold: var(--gray-800);\n  --color-icon: var(--gray-600);\n  --color-icon-subtle: var(--gray-500);\n  --color-icon-disabled: var(--gray-400);\n  --color-icon-inverse: var(--base-white);\n\n  --color-border-bold: var(--gray-500);\n  --color-border: var(--gray-400);\n  --color-border-subtle: var(--gray-300);\n  --color-border-subtler: var(--gray-200);\n  --color-border-disabled: var(--gray-200);\n  --color-border-input: var(--gray-300);\n  --color-border-focus: var(--gray-400);\n\n  --color-background: var(--base-white);\n  --color-background-card-bold: var(--gray-100);\n  --color-background-card: var(--base-white);\n  --color-background-input: var(--gray-400);\n  --color-background-disabled: var(--gray-50);\n  --color-background-btn-disabled: var(--gray-100);\n  --color-background-selected: var(--blue-500);\n\n  --color-link: var(--blue-500);\n  --color-link-pressed: var(--blue-600);\n  --color-link-visited: var(--lightBlue-600);\n\n  /* -----------Text Color----------- */\n\n  [data-theme='light'] {\n    --color-text-bold: var(--gray-800);\n  }\n\n  [data-theme='dark'] {\n    --color-text-bold: var(--gray-100);\n  }\n\n  [data-theme='light'] {\n    --color-text: var(--gray-600);\n  }\n\n  [data-theme='dark'] {\n    --color-text: var(--gray-300);\n  }\n\n  [data-theme='light'] {\n    --color-text-subtle: var(--gray-500);\n  }\n\n  [data-theme='dark'] {\n    --color-text-subtle: var(--gray-400);\n  }\n\n  [data-theme='light'] {\n    --color-text-disabled: var(--gray-400);\n  }\n\n  [data-theme='dark'] {\n    --color-text-disabled: var(--gray-500);\n  }\n\n  [data-theme='light'] {\n    --color-text-inverse: var(--base-white);\n  }\n\n  [data-theme='dark'] {\n    --color-text-inverse: var(--base-black);\n  }\n\n  [data-theme='light'] {\n    --color-text-brandDarkBlue: var(--brandDarkBlue-500);\n  }\n\n  [data-theme='dark'] {\n    --color-text-brandDarkBlue: var(--brandDarkBlue-100);\n  }\n\n  [data-theme='light'] {\n    --color-text-brandRed: var(--brandRed-500);\n  }\n\n  [data-theme='dark'] {\n    --color-text-brandRed: var(--brandRed-300);\n  }\n\n  [data-theme='light'] {\n    --color-text-selected: var(--blue-500);\n  }\n\n  [data-theme='dark'] {\n    --color-text-selected: var(--blue-300);\n  }\n\n  [data-theme='light'] {\n    --color-text-danger-bold: var(--brandRed-800);\n  }\n\n  [data-theme='dark'] {\n    --color-text-danger-bold: var(--brandRed-100);\n  }\n\n  [data-theme='light'] {\n    --color-text-danger: var(--brandRed-700);\n  }\n\n  [data-theme='dark'] {\n    --color-text-danger: var(--brandRed-200);\n  }\n\n  [data-theme='light'] {\n    --color-text-danger-subtle: var(--brandRed-600);\n  }\n\n  [data-theme='dark'] {\n    --color-text-danger-subtle: var(--brandRed-300);\n  }\n\n  [data-theme='light'] {\n    --color-text-danger-inverse: var(--base-white);\n  }\n\n  [data-theme='dark'] {\n    --color-text-danger-inverse: var(--brandRed-950);\n  }\n\n  [data-theme='light'] {\n    --color-text-warning-bold: var(--yellow-800);\n  }\n\n  [data-theme='dark'] {\n    --color-text-warning-bold: var(--yellow-100);\n  }\n\n  [data-theme='light'] {\n    --color-text-warning: var(--yellow-600);\n  }\n\n  [data-theme='dark'] {\n    --color-text-warning: var(--yellow-300);\n  }\n\n  [data-theme='light'] {\n    --color-text-warning-subtle: var(--yellow-500);\n  }\n\n  [data-theme='dark'] {\n    --color-text-warning-subtle: var(--yellow-400);\n  }\n\n  [data-theme='light'] {\n    --color-text-success-bold: var(--green-800);\n  }\n\n  [data-theme='dark'] {\n    --color-text-success-bold: var(--green-100);\n  }\n\n  [data-theme='light'] {\n    --color-text-success: var(--green-600);\n  }\n\n  [data-theme='dark'] {\n    --color-text-success: var(--green-300);\n  }\n\n  [data-theme='light'] {\n    --color-text-success-subtle: var(--green-600);\n  }\n\n  [data-theme='dark'] {\n    --color-text-success-subtle: var(--green-300);\n  }\n\n  [data-theme='light'] {\n    --color-text-discovery-bold: var(--lightBlue-800);\n  }\n\n  [data-theme='dark'] {\n    --color-text-discovery-bold: var(--lightBlue-100);\n  }\n\n  [data-theme='light'] {\n    --color-text-discovery: var(--lightBlue-800);\n  }\n\n  [data-theme='dark'] {\n    --color-text-discovery: var(--lightBlue-100);\n  }\n\n  [data-theme='light'] {\n    --color-text-discovery-subtle: var(--lightBlue-400);\n  }\n\n  [data-theme='dark'] {\n    --color-text-discovery-subtle: var(--lightBlue-100);\n  }\n\n  [data-theme='light'] {\n    --color-text-information-bold: var(--blue-800);\n  }\n\n  [data-theme='dark'] {\n    --color-text-information-bold: var(--blue-100);\n  }\n\n  [data-theme='light'] {\n    --color-text-information: var(--blue-600);\n  }\n\n  [data-theme='dark'] {\n    --color-text-information: var(--blue-300);\n  }\n\n  [data-theme='light'] {\n    --color-text-information-subtle: var(--blue-500);\n  }\n\n  [data-theme='dark'] {\n    --color-text-information-subtle: var(--blue-400);\n  }\n\n  [data-theme='light'] {\n    --color-text-purple-bold: var(--purple-800);\n  }\n\n  [data-theme='dark'] {\n    --color-text-purple-bold: var(--purple-100);\n  }\n\n  [data-theme='light'] {\n    --color-text-purple: var(--purple-600);\n  }\n\n  [data-theme='dark'] {\n    --color-text-purple: var(--purple-300);\n  }\n\n  [data-theme='light'] {\n    --color-text-purple-subtle: var(--purple-500);\n  }\n\n  [data-theme='dark'] {\n    --color-text-purple-subtle: var(--purple-400);\n  }\n\n  [data-theme='light'] {\n    --color-text-pink-bold: var(--pink-800);\n  }\n\n  [data-theme='dark'] {\n    --color-text-pink-bold: var(--pink-100);\n  }\n\n  [data-theme='light'] {\n    --color-text-pink: var(--pink-600);\n  }\n\n  [data-theme='dark'] {\n    --color-text-pink: var(--pink-300);\n  }\n\n  [data-theme='light'] {\n    --color-text-pink-subtle: var(--pink-500);\n  }\n\n  [data-theme='dark'] {\n    --color-text-pink-subtle: var(--pink-400);\n  }\n\n  /* --------------Link color--------------- */\n\n  [data-theme='light'] {\n    --color-link: var(--blue-500);\n  }\n\n  [data-theme='dark'] {\n    --color-link: var(--blue-300);\n  }\n\n  [data-theme='light'] {\n    --color-link-pressed: var(--blue-600);\n  }\n\n  [data-theme='dark'] {\n    --color-link-pressed: var(--blue-600);\n  }\n\n  [data-theme='light'] {\n    --color-link-visited: var(--lightBlue-600);\n  }\n\n  [data-theme='dark'] {\n    --color-link-visited: var(--lightBlue-300);\n  }\n\n  /* --------------Icon color--------------- */\n\n  [data-theme='light'] {\n    --color-icon-bold: var(--gray-800);\n  }\n\n  [data-theme='dark'] {\n    --color-icon-bold: var(--gray-100);\n  }\n\n  [data-theme='light'] {\n    --color-icon: var(--gray-600);\n  }\n\n  [data-theme='dark'] {\n    --color-icon: var(--gray-300);\n  }\n\n  [data-theme='light'] {\n    --color-icon-subtle: var(--gray-500);\n  }\n\n  [data-theme='dark'] {\n    --color-icon-subtle: var(--gray-400);\n  }\n\n  [data-theme='light'] {\n    --color-icon-disabled: var(--gray-400);\n  }\n\n  [data-theme='dark'] {\n    --color-icon-disabled: var(--gray-500);\n  }\n\n  [data-theme='light'] {\n    --color-icon-inverse: var(--base-white);\n  }\n\n  [data-theme='dark'] {\n    --color-icon-inverse: var(--gray-800);\n  }\n\n  [data-theme='light'] {\n    --color-icon-brandDarkBlue: var(--brandDarkBlue-500);\n  }\n\n  [data-theme='dark'] {\n    --color-icon-brandDarkBlue: var(--brandDarkBlue-200);\n  }\n\n  [data-theme='light'] {\n    --color-icon-brandRed: var(--brandRed-500);\n  }\n\n  [data-theme='dark'] {\n    --color-icon-brandRed: var(--brandRed-300);\n  }\n\n  [data-theme='light'] {\n    --color-icon-selected: var(--blue-500);\n  }\n\n  [data-theme='dark'] {\n    --color-icon-selected: var(--blue-300);\n  }\n\n  [data-theme='light'] {\n    --color-icon-danger-bold: var(--brandRed-800);\n  }\n\n  [data-theme='dark'] {\n    --color-icon-danger-bold: var(--brandRed-100);\n  }\n\n  [data-theme='light'] {\n    --color-icon-danger: var(--brandRed-700);\n  }\n\n  [data-theme='dark'] {\n    --color-icon-danger: var(--brandRed-200);\n  }\n\n  [data-theme='light'] {\n    --color-icon-danger-inverse: var(--base-white);\n  }\n\n  [data-theme='dark'] {\n    --color-icon-danger-inverse: var(--brandRed-950);\n  }\n\n  [data-theme='light'] {\n    --color-icon-warning-bold: var(--yellow-800);\n  }\n\n  [data-theme='dark'] {\n    --color-icon-warning-bold: var(--yellow-100);\n  }\n\n  [data-theme='light'] {\n    --color-icon-warning: var(--yellow-600);\n  }\n\n  [data-theme='dark'] {\n    --color-icon-warning: var(--yellow-300);\n  }\n\n  [data-theme='light'] {\n    --color-icon-success-bold: var(--green-800);\n  }\n\n  [data-theme='dark'] {\n    --color-icon-success-bold: var(--green-100);\n  }\n\n  [data-theme='light'] {\n    --color-icon-success: var(--green-600);\n  }\n\n  [data-theme='dark'] {\n    --color-icon-success: var(--green-300);\n  }\n\n  [data-theme='light'] {\n    --color-icon-discovery-bold: var(--lightBlue-800);\n  }\n\n  [data-theme='dark'] {\n    --color-icon-discovery-bold: var(--lightBlue-100);\n  }\n\n  [data-theme='light'] {\n    --color-icon-discovery: var(--lightBlue-600);\n  }\n\n  [data-theme='dark'] {\n    --color-icon-discovery: var(--lightBlue-300);\n  }\n\n  [data-theme='light'] {\n    --color-icon-information-bold: var(--blue-800);\n  }\n\n  [data-theme='dark'] {\n    --color-icon-information-bold: var(--blue-100);\n  }\n\n  [data-theme='light'] {\n    --color-icon-information: var(--blue-600);\n  }\n\n  [data-theme='dark'] {\n    --color-icon-information: var(--blue-300);\n  }\n\n  [data-theme='light'] {\n    --color-icon-purple-bold: var(--purple-800);\n  }\n\n  [data-theme='dark'] {\n    --color-icon-purple-bold: var(--purple-100);\n  }\n\n  [data-theme='light'] {\n    --color-icon-purple: var(--purple-600);\n  }\n\n  [data-theme='dark'] {\n    --color-icon-purple: var(--purple-300);\n  }\n\n  [data-theme='light'] {\n    --color-icon-pink-bold: var(--pink-800);\n  }\n\n  [data-theme='dark'] {\n    --color-icon-pink-bold: var(--pink-100);\n  }\n\n  [data-theme='light'] {\n    --color-icon-pink: var(--pink-600);\n  }\n\n  [data-theme='dark'] {\n    --color-icon-pink: var(--pink-300);\n  }\n\n  /* ----------------Border Color --------------- */\n\n  [data-theme='light'] {\n    --color-border-bold: var(--gray-500);\n  }\n\n  [data-theme='dark'] {\n    --color-border-bold: var(--gray-400);\n  }\n\n  [data-theme='light'] {\n    --color-border: var(--gray-400);\n  }\n\n  [data-theme='dark'] {\n    --color-border: var(--gray-500);\n  }\n\n  [data-theme='light'] {\n    --color-border-subtle: var(--gray-300);\n  }\n\n  [data-theme='dark'] {\n    --color-border-subtle: var(--gray-700);\n  }\n\n  [data-theme='light'] {\n    --color-border-subtler: var(--gray-200);\n  }\n\n  [data-theme='dark'] {\n    --color-border-subtler: var(--gray-800);\n  }\n\n  [data-theme='light'] {\n    --color-border-disabled: var(--gray-200);\n  }\n\n  [data-theme='dark'] {\n    --color-border-disabled: var(--gray-700);\n  }\n\n  [data-theme='light'] {\n    --color-border-inverse: var(--base-white);\n  }\n\n  [data-theme='dark'] {\n    --color-border-inverse: var(--gray-800);\n  }\n\n  [data-theme='light'] {\n    --color-border-input: var(--gray-300);\n  }\n\n  [data-theme='dark'] {\n    --color-border-input: var(--gray-600);\n  }\n\n  [data-theme='light'] {\n    --color-border-focus: var(--gray-400);\n  }\n\n  [data-theme='dark'] {\n    --color-border-focus: var(--blue-200);\n  }\n\n  [data-theme='light'] {\n    --color-border-selected: var(--blue-500);\n  }\n\n  [data-theme='dark'] {\n    --color-border-selected: var(--blue-300);\n  }\n\n  [data-theme='light'] {\n    --color-border-brandDarkBlue: var(--brandDarkBlue-500);\n  }\n\n  [data-theme='dark'] {\n    --color-border-brandDarkBlue: var(--brandDarkBlue-200);\n  }\n\n  [data-theme='light'] {\n    --color-border-brandRed: var(--brandRed-500);\n  }\n\n  [data-theme='dark'] {\n    --color-border-brandRed: var(--brandRed-300);\n  }\n\n  [data-theme='light'] {\n    --color-border-danger-bold: var(--brandRed-800);\n  }\n\n  [data-theme='dark'] {\n    --color-border-danger-bold: var(--brandRed-100);\n  }\n\n  [data-theme='light'] {\n    --color-border-danger: var(--brandRed-700);\n  }\n\n  [data-theme='dark'] {\n    --color-border-danger: var(--brandRed-200);\n  }\n\n  [data-theme='light'] {\n    --color-border-danger-subtle: var(--brandRed-200);\n  }\n\n  [data-theme='dark'] {\n    --color-border-danger-subtle: var(--brandRed-800);\n  }\n\n  [data-theme='light'] {\n    --color-border-danger-subtler: var(--brandRed-100);\n  }\n\n  [data-theme='dark'] {\n    --color-border-danger-subtler: var(--brandRed-900);\n  }\n\n  [data-theme='light'] {\n    --color-border-warning-bold: var(--yellow-800);\n  }\n\n  [data-theme='dark'] {\n    --color-border-warning-bold: var(--yellow-100);\n  }\n\n  [data-theme='light'] {\n    --color-border-warning: var(--yellow-600);\n  }\n\n  [data-theme='dark'] {\n    --color-border-warning: var(--yellow-300);\n  }\n\n  [data-theme='light'] {\n    --color-border-warning-subtle: var(--yellow-200);\n  }\n\n  [data-theme='dark'] {\n    --color-border-warning-subtle: var(--yellow-800);\n  }\n\n  [data-theme='light'] {\n    --color-border-warning-subtler: var(--yellow-100);\n  }\n\n  [data-theme='dark'] {\n    --color-border-warning-subtler: var(--yellow-900);\n  }\n\n  [data-theme='light'] {\n    --color-border-success-bold: var(--green-800);\n  }\n\n  [data-theme='dark'] {\n    --color-border-success-bold: var(--green-100);\n  }\n\n  [data-theme='light'] {\n    --color-border-success: var(--green-600);\n  }\n\n  [data-theme='dark'] {\n    --color-border-success: var(--green-300);\n  }\n\n  [data-theme='light'] {\n    --color-border-success-subtle: var(--green-200);\n  }\n\n  [data-theme='dark'] {\n    --color-border-success-subtle: var(--green-800);\n  }\n\n  [data-theme='light'] {\n    --color-border-success-subtler: var(--green-100);\n  }\n\n  [data-theme='dark'] {\n    --color-border-success-subtler: var(--green-900);\n  }\n\n  [data-theme='light'] {\n    --color-border-discovery-bold: var(--lightBlue-800);\n  }\n\n  [data-theme='dark'] {\n    --color-border-discovery-bold: var(--lightBlue-100);\n  }\n\n  [data-theme='light'] {\n    --color-border-discovery: var(--lightBlue-600);\n  }\n\n  [data-theme='dark'] {\n    --color-border-discovery: var(--lightBlue-300);\n  }\n\n  [data-theme='light'] {\n    --color-border-discovery-subtle: var(--lightBlue-200);\n  }\n\n  [data-theme='dark'] {\n    --color-border-discovery-subtle: var(--lightBlue-800);\n  }\n\n  [data-theme='light'] {\n    --color-border-discovery-subtler: var(--lightBlue-100);\n  }\n\n  [data-theme='dark'] {\n    --color-border-discovery-subtler: var(--lightBlue-900);\n  }\n\n  [data-theme='light'] {\n    --color-border-information-bold: var(--blue-800);\n  }\n\n  [data-theme='dark'] {\n    --color-border-information-bold: var(--blue-100);\n  }\n\n  [data-theme='light'] {\n    --color-border-information: var(--blue-600);\n  }\n\n  [data-theme='dark'] {\n    --color-border-information: var(--blue-300);\n  }\n\n  [data-theme='light'] {\n    --color-border-information-subtle: var(--blue-200);\n  }\n\n  [data-theme='dark'] {\n    --color-border-information-subtle: var(--blue-800);\n  }\n\n  [data-theme='light'] {\n    --color-border-information-subtler: var(--blue-100);\n  }\n\n  [data-theme='dark'] {\n    --color-border-information-subtler: var(--blue-900);\n  }\n\n  [data-theme='light'] {\n    --color-border-purple-bold: var(--purple-800);\n  }\n\n  [data-theme='dark'] {\n    --color-border-purple-bold: var(--purple-100);\n  }\n\n  [data-theme='light'] {\n    --color-border-purple: var(--purple-600);\n  }\n\n  [data-theme='dark'] {\n    --color-border-purple: var(--purple-300);\n  }\n\n  [data-theme='light'] {\n    --color-border-purple-subtle: var(--purple-200);\n  }\n\n  [data-theme='dark'] {\n    --color-border-purple-subtle: var(--purple-800);\n  }\n\n  [data-theme='light'] {\n    --color-border-purple-subtler: var(--purple-100);\n  }\n\n  [data-theme='dark'] {\n    --color-border-purple-subtler: var(--purple-900);\n  }\n\n  [data-theme='light'] {\n    --color-border-pink-bold: var(--pink-800);\n  }\n\n  [data-theme='dark'] {\n    --color-border-pink-bold: var(--pink-100);\n  }\n\n  [data-theme='light'] {\n    --color-border-pink: var(--pink-600);\n  }\n\n  [data-theme='dark'] {\n    --color-border-pink: var(--pink-300);\n  }\n\n  [data-theme='light'] {\n    --color-border-pink-subtle: var(--pink-200);\n  }\n\n  [data-theme='dark'] {\n    --color-border-pink-subtle: var(--pink-800);\n  }\n\n  [data-theme='light'] {\n    --color-border-pink-subtler: var(--pink-100);\n  }\n\n  [data-theme='dark'] {\n    --color-border-pink-subtler: var(--pink-900);\n  }\n\n  /* Emmanuel Kadiri starts from background color */\n\n  /* ----------------Background Color --------------- */\n\n  [data-theme='light'] {\n    --color-background-card-bolder: var(--gray-100);\n  }\n\n  [data-theme='dark'] {\n    --color-background-card-bolder: var(--gray-800);\n  }\n\n  [data-theme='light'] {\n    --color-background-card: var(--base-white);\n  }\n\n  [data-theme='dark'] {\n    --color-background-card: var(--gray-900);\n  }\n\n  [data-theme='light'] {\n    --color-background-input: var(--gray-400);\n  }\n\n  [data-theme='dark'] {\n    --color-background-input: var(--gray-950);\n  }\n\n  [data-theme='light'] {\n    --color-background-disabled: var(--gray-50);\n  }\n\n  [data-theme='dark'] {\n    --color-background-disabled: var(--gray-800);\n  }\n\n  [data-theme='light'] {\n    --color-background-btn-disabled: var(--gray-100);\n  }\n\n  [data-theme='dark'] {\n    --color-background-btn-disabled: var(--gray-700);\n  }\n\n  [data-theme='light'] {\n    --color-background-selected: var(--blue-500);\n  }\n\n  [data-theme='dark'] {\n    --color-background-selected: var(--blue-300);\n  }\n\n  [data-theme='light'] {\n    --color-background-brandDarkblue: var(--brandDarkBlue-500);\n  }\n\n  [data-theme='dark'] {\n    --color-background-brandDarkblue: var(--brandDarkBlue-200);\n  }\n\n  [data-theme='light'] {\n    --color-background-brandRed: var(--brandRed-500);\n  }\n\n  [data-theme='dark'] {\n    --color-background-brandRed: var(--brandRed-300);\n  }\n\n  [data-theme='light'] {\n    --color-background-brandRed-hover: var(--brandRed-600);\n  }\n\n  [data-theme='dark'] {\n    --color-background-brandRed-hover: var(--brandRed-200);\n  }\n\n  [data-theme='light'] {\n    --color-background-brandRed-pressed: var(--brandRed-700);\n  }\n\n  [data-theme='dark'] {\n    --color-background-brandRed-pressed: var(--brandRed-100);\n  }\n\n  [data-theme='light'] {\n    --color-background-gray-bold: var(--gray-400);\n  }\n\n  [data-theme='dark'] {\n    --color-background-gray-bold: var(--gray-500);\n  }\n\n  [data-theme='light'] {\n    --color-background-gray: var(--gray-300);\n  }\n\n  [data-theme='dark'] {\n    --color-background-gray: var(--gray-600);\n  }\n\n  [data-theme='light'] {\n    --color-background-gray-subtle: var(--gray-200);\n  }\n\n  [data-theme='dark'] {\n    --color-background-gray-subtle: var(--gray-700);\n  }\n\n  [data-theme='light'] {\n    --color-background-gray-subtler: var(--gray-100);\n  }\n\n  [data-theme='dark'] {\n    --color-background-gray-subtler: var(--gray-800);\n  }\n\n  [data-theme='light'] {\n    --color-background-gray-subtlest: var(--gray-50);\n  }\n\n  [data-theme='dark'] {\n    --color-background-gray-subtlest: var(--gray-950);\n  }\n\n  [data-theme='light'] {\n    --color-background-danger-bold: var(--brandRed-800);\n  }\n\n  [data-theme='dark'] {\n    --color-background-danger-bold: var(--brandRed-100);\n  }\n\n  [data-theme='light'] {\n    --color-background-danger: var(--brandRed-700);\n  }\n\n  [data-theme='dark'] {\n    --color-background-danger: var(--brandRed-200);\n  }\n\n  [data-theme='light'] {\n    --color-background-danger-subtle: var(--brandRed-200);\n  }\n\n  [data-theme='dark'] {\n    --color-background-danger-subtle: var(--brandRed-800);\n  }\n\n  [data-theme='light'] {\n    --color-background-danger-subtler: var(--brandRed-100);\n  }\n\n  [data-theme='dark'] {\n    --color-background-danger-subtler: var(--brandRed-900);\n  }\n\n  [data-theme='light'] {\n    --color-background-danger-subtlest: var(--brandRed-50);\n  }\n\n  [data-theme='dark'] {\n    --color-background-danger-subtlest: var(--brandRed-950);\n  }\n\n  [data-theme='light'] {\n    --color-background-warning-bold: var(--yellow-800);\n  }\n\n  [data-theme='dark'] {\n    --color-background-warning-bold: var(--yellow-100);\n  }\n\n  [data-theme='light'] {\n    --color-background-warning: var(--yellow-600);\n  }\n\n  [data-theme='dark'] {\n    --color-background-warning: var(--yellow-200);\n  }\n\n  [data-theme='light'] {\n    --color-background-warning-subtle: var(--yellow-200);\n  }\n\n  [data-theme='dark'] {\n    --color-background-warning-subtle: var(--yellow-800);\n  }\n\n  [data-theme='light'] {\n    --color-background-warning-subtler: var(--yellow-100);\n  }\n\n  [data-theme='dark'] {\n    --color-background-warning-subtler: var(--yellow-900);\n  }\n\n  [data-theme='light'] {\n    --color-background-warning-subtlest: var(--yellow-50);\n  }\n\n  [data-theme='dark'] {\n    --color-background-warning-subtlest: var(--yellow-950);\n  }\n\n  [data-theme='light'] {\n    --color-background-success-bold: var(--green-800);\n  }\n\n  [data-theme='dark'] {\n    --color-background-success-bold: var(--green-100);\n  }\n\n  [data-theme='light'] {\n    --color-background-success: var(--green-600);\n  }\n\n  [data-theme='dark'] {\n    --color-background-success: var(--green-200);\n  }\n\n  [data-theme='light'] {\n    --color-background-success-subtle: var(--green-200);\n  }\n\n  [data-theme='dark'] {\n    --color-background-success-subtle: var(--green-800);\n  }\n\n  [data-theme='light'] {\n    --color-background-success-subtler: var(--green-100);\n  }\n\n  [data-theme='dark'] {\n    --color-background-success-subtler: var(--green-900);\n  }\n\n  [data-theme='light'] {\n    --color-background-success-subtlest: var(--green-50);\n  }\n\n  [data-theme='dark'] {\n    --color-background-success-subtlest: var(--green-950);\n  }\n\n  [data-theme='light'] {\n    --color-background-discovery-bold: var(--lightBlue-800);\n  }\n\n  [data-theme='dark'] {\n    --color-background-discovery-bold: var(--lightBlue-100);\n  }\n\n  [data-theme='light'] {\n    --color-background-discovery: var(--lightBlue-600);\n  }\n\n  [data-theme='dark'] {\n    --color-background-discovery: var(--lightBlue-200);\n  }\n\n  [data-theme='light'] {\n    --color-background-discovery-subtle: var(--lightBlue-200);\n  }\n\n  [data-theme='dark'] {\n    --color-background-discovery-subtle: var(--lightBlue-800);\n  }\n\n  [data-theme='light'] {\n    --color-background-discovery-subtler: var(--lightBlue-100);\n  }\n\n  [data-theme='dark'] {\n    --color-background-discovery-subtler: var(--lightBlue-900);\n  }\n\n  [data-theme='light'] {\n    --color-background-discovery-subtlest: var(--lightBlue-50);\n  }\n\n  [data-theme='dark'] {\n    --color-background-discovery-subtlest: var(--lightBlue-950);\n  }\n\n  [data-theme='light'] {\n    --color-background-information-bold: var(--blue-800);\n  }\n\n  [data-theme='dark'] {\n    --color-background-information-bold: var(--blue-100);\n  }\n\n  [data-theme='light'] {\n    --color-background-information: var(--blue-600);\n  }\n\n  [data-theme='dark'] {\n    --color-background-information: var(--blue-200);\n  }\n\n  [data-theme='light'] {\n    --color-background-information-subtle: var(--blue-200);\n  }\n\n  [data-theme='dark'] {\n    --color-background-information-subtle: var(--blue-800);\n  }\n\n  [data-theme='light'] {\n    --color-background-information-subtler: var(--blue-100);\n  }\n\n  [data-theme='dark'] {\n    --color-background-information-subtler: var(--blue-900);\n  }\n\n  [data-theme='light'] {\n    --color-background-information-subtlest: var(--blue-50);\n  }\n\n  [data-theme='dark'] {\n    --color-background-information-subtlest: var(--blue-950);\n  }\n\n  [data-theme='light'] {\n    --color-background-purple-bold: var(--purple-800);\n  }\n\n  [data-theme='dark'] {\n    --color-background-purple-bold: var(--blue-100);\n  }\n\n  [data-theme='light'] {\n    --color-background-purple: var(--purple-600);\n  }\n\n  [data-theme='dark'] {\n    --color-background-purple: var(--blue-200);\n  }\n\n  [data-theme='light'] {\n    --color-background-purple-subtle: var(--purple-200);\n  }\n\n  [data-theme='dark'] {\n    --color-background-purple-subtle: var(--purple-800);\n  }\n\n  [data-theme='light'] {\n    --color-background-purple-subtler: var(--purple-100);\n  }\n\n  [data-theme='dark'] {\n    --color-background-purple-subtler: var(--purple-900);\n  }\n\n  [data-theme='light'] {\n    --color-background-purple-subtlest: var(--purple-50);\n  }\n\n  [data-theme='dark'] {\n    --color-background-purple-subtlest: var(--purple-950);\n  }\n\n  [data-theme='light'] {\n    --color-background-pink-bold: var(--pink-800);\n  }\n\n  [data-theme='dark'] {\n    --color-background-pink-bold: var(--pink-100);\n  }\n\n  [data-theme='light'] {\n    --color-background-pink: var(--pink-600);\n  }\n\n  [data-theme='dark'] {\n    --color-background-pink: var(--pink-200);\n  }\n\n  [data-theme='light'] {\n    --color-background-pink-subtle: var(--pink-200);\n  }\n\n  [data-theme='dark'] {\n    --color-background-pink-subtle: var(--pink-800);\n  }\n\n  [data-theme='light'] {\n    --color-background-pink-subtler: var(--pink-100);\n  }\n\n  [data-theme='dark'] {\n    --color-background-pink-subtler: var(--pink-900);\n  }\n\n  [data-theme='light'] {\n    --color-background-pink-subtlest: var(--purple-50);\n  }\n\n  [data-theme='dark'] {\n    --color-background-pink-subtlest: var(--pink-950);\n  }\n\n  /* ----------------Blanket Color --------------- */\n  [data-theme='light'] {\n    --color-blanket: var(--darkBlue500-opacity20);\n  }\n\n  [data-theme='dark'] {\n    --color-blanket: var(--darkBlue200-opacity20);\n  }\n\n  [data-theme='light'] {\n    --color-blanket-subtle: var(--darkBlue500-opacity30);\n  }\n\n  [data-theme='dark'] {\n    --color-blanket-subtle: var(--darkBlue200-opacity30);\n  }\n\n  [data-theme='light'] {\n    --color-blanket-subtler: var(--darkBlue500-opacity40);\n  }\n\n  [data-theme='dark'] {\n    --color-blanket-subtler: var(--darkBlue200-opacity40);\n  }\n\n  /* ----------------Skeleton Color --------------- */\n  [data-theme='light'] {\n    --color-skeleton: var(--gray-200);\n  }\n\n  [data-theme='dark'] {\n    --color-skeleton: var(--gray-800);\n  }\n\n  [data-theme='light'] {\n    --color-skeleton-bold: var(--gray-300);\n  }\n\n  [data-theme='dark'] {\n    --color-skeleton-bold: var(--gray-700);\n  }\n\n  /* ----------------Surface Color --------------- */\n  [data-theme='light'] {\n    --color-surface-bold: var(--gray-50);\n  }\n\n  [data-theme='dark'] {\n    --color-surface-bold: var(--gray-950);\n  }\n\n  [data-theme='light'] {\n    --color-surface: var(--base-white);\n  }\n\n  [data-theme='dark'] {\n    --color-surface: var(--gray-900);\n  }\n\n  [data-theme='light'] {\n    --color-surface-hovered: var(--gray-100);\n  }\n\n  [data-theme='dark'] {\n    --color-surface-hovered: var(--gray-800);\n  }\n\n  [data-theme='light'] {\n    --color-surface-pressed: var(--gray-200);\n  }\n\n  [data-theme='dark'] {\n    --color-surface-pressed: var(--gray-700);\n  }\n\n  /* ----------------Transparent Color --------------- */\n  [data-theme='light'] {\n    --color-surface-transparent50: var(--white-opacity50);\n  }\n\n  [data-theme='dark'] {\n    --color-surface-transparent50: var(--gray900-opacity50);\n  }\n\n  [data-theme='light'] {\n    --color-surface-transparent20: var(--white-opacity20);\n  }\n\n  [data-theme='dark'] {\n    --color-surface-transparent20: var(--gray900-opacity20);\n  }\n\n  [data-theme='light'] {\n    --color-surface-transparent-full: var(--white-opacity0);\n  }\n\n  [data-theme='dark'] {\n    --color-surface-transparent-full: var(--gray900-opacity0);\n  }\n\n  [data-theme='light'] {\n    --color-surface-bold-transparent50: var(--gray25-opacity50);\n  }\n\n  [data-theme='dark'] {\n    --color-surface-bold-transparent50: var(--gray950-opacity50);\n  }\n\n  [data-theme='light'] {\n    --color-surface-bold-transparent20: var(--gray25-opacity20);\n  }\n\n  [data-theme='dark'] {\n    --color-surface-bold-transparent20: var(--gray950-opacity20);\n  }\n\n  [data-theme='light'] {\n    --color-surface-bold-transparent-full: var(--gray25-opacity0);\n  }\n\n  [data-theme='dark'] {\n    --color-surface-bold-transparent-full: var(--gray950-opacity0);\n  }\n}\n/* -----------------Shadow and Blur----------------- */\n:root {\n  --shadow-xs: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n  --shadow-sm: 0px 1px 3px 0px rgba(16, 24, 40, 0.1), 0px 1px 2px 0px rgba(16, 24, 40, 0.06);\n  --shadow-md: 0px 4px 8px -2px rgba(16, 24, 40, 0.1), 0px 2px 4px -2px rgba(16, 24, 40, 0.06);\n  --shadow-lg: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);\n  --shadow-xl: 0px 20px 24px -4px rgba(16, 24, 40, 0.08), 0px 8px 8px -4px rgba(16, 24, 40, 0.03);\n  --shadow-2xl: 0px 24px 48px -12px rgba(16, 24, 40, 0.18);\n  --shadow-3xl: 0px 32px 64px -12px rgba(16, 24, 40, 0.14);\n\n  --blur-sm: blur(4px);\n  --blur-md: blur(8px);\n  --blur-lg: blur(12px);\n  --blur-xl: blur(20px);\n}\n.shadow-xs {\n  box-shadow: var(--shadow-xs);\n}\n.shadow-sm {\n  box-shadow: var(--shadow-sm);\n}\n.shadow-md {\n  box-shadow: var(--shadow-md);\n}\n.shadow-lg {\n  box-shadow: var(--shadow-lg);\n}\n.shadow-xl {\n  box-shadow: var(--shadow-xl);\n}\n.shadow-2xl {\n  box-shadow: var(--shadow-2xl);\n}\n.shadow-3xl {\n  box-shadow: var(--shadow-3xl);\n}\n.blur-sm {\n  backdrop-filter: var(--blur-sm);\n}\n.blur-md {\n  backdrop-filter: var(--blur-md);\n}\n.blur-lg {\n  backdrop-filter: var(--blur-lg);\n}\n.blur-xl {\n  backdrop-filter: var(--blur-xl);\n}\n/* -----------------Gradients----------------- */\n:root {\n  /* Gray Gradients */\n  /* --gray-gradient-600: linear-gradient(); */\n  --gradient-gray-600-to-500-90d: linear-gradient(90deg, var(--gray-600), var(--gray-500));\n  --gradient-gray-700-to-600-45d: linear-gradient(45deg, var(--gray-700), var(--gray-600));\n  --gradient-gray-800-to-600-45d: linear-gradient(45deg, var(--gray-800), var(--gray-600));\n  --gradient-gray-800-to-600-90d: linear-gradient(90deg, var(--gray-800), var(--gray-600));\n  --gradient-gray-800-to-700265-d: linear-gradient(26.5deg, var(--gray-800), var(--gray-700));\n  --gradient-gray-900-to-600-45d: linear-gradient(45deg, var(--gray-900), var(--gray-600));\n\n  /* Brand Dark Blue Gradients */\n  --gradient-darkBlue-500-to-400-90d: linear-gradient(90deg, var(--brandDarkBlue-500), var(--brandDarkBlue-400));\n  --gradient-darkBlue-700-to-500-45d: linear-gradient(45deg, var(--brandDarkBlue-700), var(--brandDarkBlue-500));\n  --gradient-darkBlue-700-to-400-45d: linear-gradient(45deg, var(--brandDarkBlue-700), var(--brandDarkBlue-400));\n  --gradient-darkBlue-800-to-500-90d: linear-gradient(90deg, var(--brandDarkBlue-800), var(--brandDarkBlue-500));\n  --gradient-darkBlue-800-to-600265-d: linear-gradient(26.5deg, var(--brandDarkBlue-800), var(--brandDarkBlue-600));\n  --gradient-darkBlue-900-to-600-45d: linear-gradient(45deg, var(--brandDarkBlue-900), var(--brandDarkBlue-600));\n\n  /* Brand Red Gradients */\n  --gradient-red-500-to-400-90d: linear-gradient(90deg, var(--brandRed-600), var(--brandRed-400));\n  --gradient-red-700-to-500-45d: linear-gradient(45deg, var(--brandRed-700), var(--brandRed-500));\n  --gradient-red-700-to-400-45d: linear-gradient(45deg, var(--brandRed-700), var(--brandRed-400));\n  --gradient-red-800-to-500-90d: linear-gradient(90deg, var(--brandRed-800), var(--brandRed-500));\n  --gradient-red-800-to-600265-d: linear-gradient(26.5deg, var(--brandRed-800), var(--brandRed-600));\n  --gradient-red-900-to-600-45d: linear-gradient(45deg, var(--brandRed-900), var(--brandRed-600));\n\n  /* Blue Gradients */\n  --gradient-blue-500-to-400-90d: linear-gradient(90deg, var(--blue-500), var(--blue-400));\n  --gradient-blue-700-to-500-45d: linear-gradient(45deg, var(--blue-700), var(--blue-500));\n  --gradient-blue-700-to-400-45d: linear-gradient(45deg, var(--blue-700), var(--blue-400));\n  --gradient-blue-800-to-500-90d: linear-gradient(90deg, var(--blue-800), var(--blue-500));\n  --gradient-blue-800-to-600265-d: linear-gradient(26.5deg, var(--blue-800), var(--blue-600));\n  --gradient-blue-900-to-600-45d: linear-gradient(45deg, var(--blue-900), var(--blue-600));\n}\n.gradient-gray-600-to-500-90d {\n  background: var(--gradient-gray-600-to-500-90d);\n}\n.gradient-gray-700-to-600-45d {\n  background: var(--gradient-gray-700-to-600-45d);\n}\n.gradient-gray-800-to-600-45d {\n  background: var(--gradient-gray-800-to-600-45d);\n}\n.gradient-gray-800-to-600-90d {\n  background: var(--gradient-gray-800-to-600-90d);\n}\n.gradient-gray-800-to-700265-d {\n  background: var(--gradient-gray-800-to-700265-d);\n}\n.gradient-gray-900-to-600-45d {\n  background: var(--gradient-gray-900-to-600-45d);\n}\n.gradient-darkBlue-500-to-400-90d {\n  background: var(--gradient-darkBlue-500-to-400-90d);\n}\n.gradient-darkBlue-700-to-500-45d {\n  background: var(--gradient-darkBlue-700-to-500-45d);\n}\n.gradient-darkBlue-700-to-400-45d {\n  background: var(--gradient-darkBlue-700-to-400-45d);\n}\n.gradient-darkBlue-800-to-500-90d {\n  background: var(--gradient-darkBlue-800-to-500-90d);\n}\n.gradient-darkBlue-800-to-600265-d {\n  background: var(--gradient-darkBlue-800-to-600265-d);\n}\n.gradient-darkBlue-900-to-600-45d {\n  background: var(--gradient-darkBlue-900-to-600-45d);\n}\n.gradient-red-500-to-400-90d {\n  background: var(--gradient-red-500-to-400-90d);\n}\n.gradient-red-700-to-500-45d {\n  background: var(--gradient-red-700-to-500-45d);\n}\n.gradient-red-700-to-400-45d {\n  background: var(--gradient-red-700-to-400-45d);\n}\n.gradient-red-800-to-500-90d {\n  background: var(--gradient-red-800-to-500-90d);\n}\n.gradient-red-800-to-600265-d {\n  background: var(--gradient-red-800-to-600265-d);\n}\n.gradient-red-900-to-600-45d {\n  background: var(--gradient-red-900-to-600-45d);\n}\n.gradient-blue-500-to-400-90d {\n  background: var(--gradient-blue-500-to-400-90d);\n}\n.gradient-blue-700-to-500-45d {\n  background: var(--gradient-blue-700-to-500-45d);\n}\n.gradient-blue-700-to-400-45d {\n  background: var(--gradient-blue-700-to-400-45d);\n}\n.gradient-blue-800-to-500-90d {\n  background: var(--gradient-blue-800-to-500-90d);\n}\n.gradient-blue-800-to-600265-d {\n  background: var(--gradient-blue-800-to-600265-d);\n}\n.gradient-blue-900-to-600-45d {\n  background: var(--gradient-blue-900-to-600-45d);\n}\n/* Spacing Styles */\n:root {\n  /* Positive spacing */\n  --spacing-none: 0rem;\n  --spacing-half: 0.125rem;\n  --spacing-1: 0.25rem;\n  --spacing-2: 0.5rem;\n  --spacing-3: 0.75rem;\n  --spacing-4: 1rem;\n  --spacing-5: 1.25rem;\n  --spacing-6: 1.5rem;\n  --spacing-7: 2rem;\n  --spacing-8: 2.5rem;\n  --spacing-12: 3rem;\n  --spacing-16: 4rem;\n  --spacing-20: 5rem;\n  --spacing-24: 6rem;\n  --spacing-32: 8rem;\n  --spacing-40: 10rem;\n  --spacing-48: 12rem;\n  --spacing-56: 14rem;\n  --spacing-64: 16rem;\n\n  /* Negative spacing */\n  --spacing-negative-half: -0.125rem;\n  --spacing-negative-1: -0.25rem;\n  --spacing-negative-2: -0.5rem;\n  --spacing-negative-3: -0.75rem;\n  --spacing-negative-4: -1rem;\n  --spacing-negative-5: -1.25rem;\n  --spacing-negative-6: -1.5rem;\n  --spacing-negative-7: -2rem;\n\n  /* Radius  */\n  --rounded-none: 0rem;\n  --rounded-xs: 0.25rem;\n  --rounded-sm: 0.5rem;\n  --rounded-md: 0.75rem;\n  --rounded-lg: 1rem;\n  --rounded-xl: 1.5rem;\n  --rounded-2xl: 2rem;\n  --rounded-full: 62.438rem;\n}\n/* Typography Styles */\n:root {\n  /* Font Sizes */\n  --font-size-d-2xl: 4.5rem;\n  --font-size-d-xl: 3.75rem;\n  --font-size-d-lg: 3rem;\n  --font-size-d-md: 2.25rem;\n  --font-size-d-sm: 1.875rem;\n  --font-size-d-xs: 1.5rem;\n  --font-size-t-xl: 1.25rem;\n  --font-size-t-lg: 1.125rem;\n  --font-size-t-md: 1rem;\n  --font-size-t-sm: 0.875rem;\n  --font-size-t-xs: 0.75rem;\n  --font-size-t-xxs: 0.625rem;\n\n  /* Font Weights */\n  --font-weight-bold: 700;\n  --font-weight-semi-bold: 600;\n  --font-weight-medium: 500;\n  --font-weight-regular: 400;\n\n  /* Line Heights */\n  --font-line-height-d-2xl: 5rem;\n  --font-line-height-d-xl: 4.25rem;\n  --font-line-height-d-lg: 3.75rem;\n  --font-line-height-d-md: 2.75rem;\n  --font-line-height-d-sm: 2.375rem;\n  --font-line-height-d-xs: 2rem;\n  --font-line-height-t-xl: 2rem;\n  --font-line-height-t-lg: 1.875rem;\n  --font-line-height-t-md: 1.688rem;\n  --font-line-height-t-sm: 1.5rem;\n  --font-line-height-t-xs: 1.25rem;\n  --font-line-height-t-xxs: 1.125rem;\n\n  /* Letter Spacings */\n  --font-letter-spacing-d-2xl: -0.09rem;\n  --font-letter-spacing-d-xl: -0.075rem;\n  --font-letter-spacing-d-lg: -0.075rem;\n  --font-letter-spacing-d-md: -0.045rem;\n  --font-letter-spacing-d-sm: 0;\n  --font-letter-spacing-d-xs: 0;\n  --font-letter-spacing-d-xxs: 0;\n\n  /* Font Families */\n  --font-family-title: 'Sora';\n  --font-family-body: 'Sora';\n}\n/* Media queries for medium screens (tablet) */\n@media (max-width: 1199px) {\n  :root {\n    /* Font Sizes */\n    --font-size-d-2xl: 3.75rem;\n    --font-size-d-xl: 3.5rem;\n    --font-size-d-lg: 2.75rem;\n    --font-size-d-md: 2.25rem;\n    --font-size-d-sm: 1.875rem;\n    --font-size-d-xs: 1.5rem;\n\n    /* Line Heights */\n    --font-line-height-d-2xl: 4.25rem;\n    --font-line-height-d-xl: 3.75rem;\n    --font-line-height-d-lg: 2.4375rem;\n    --font-line-height-d-md: 2.75rem;\n    --font-line-height-d-sm: 2.375rem;\n    --font-line-height-d-xs: 2rem;\n\n    /* Letter Spacings */\n    --font-letter-spacing-2xl: -0.075rem;\n    --font-letter-spacing-xl: -0.065rem;\n    --font-letter-spacing-lg: -0.045rem;\n    --font-letter-spacing-md: -0.045rem;\n    --font-letter-spacing-sm: 0rem;\n    --font-letter-spacing-xs: 0rem;\n  }\n}\n/* Media queries for smaller screens (mobile) */\n@media (max-width: 743px) {\n  :root {\n    /* Font Sizes */\n    --font-size-d-2xl: 3rem;\n    --font-size-d-xl: 2.5rem;\n    --font-size-d-lg: 2rem;\n    --font-size-d-md: 1.75rem;\n    --font-size-d-sm: 1.5rem;\n    --font-size-d-xs: 1.25rem;\n\n    /* Line Heights */\n    --font-line-height-d-2xl: 3.375rem;\n    --font-line-height-d-xl: 2.875rem;\n    --font-line-height-d-lg: 2.5rem;\n    --font-line-height-d-md: 2.1375rem;\n    --font-line-height-d-sm: 2rem;\n    --font-line-height-d-xs: 1.75rem;\n\n    /* Letter Spacings */\n    --font-letter-spacing-2xl: -0.06rem;\n    --font-letter-spacing-xl: -0.05rem;\n    --font-letter-spacing-lg: -0.045rem;\n    --font-letter-spacing-md: 0rem;\n    --font-letter-spacing-sm: 0rem;\n    --font-letter-spacing-xs: 0rem;\n  }\n}\n.display-2xl-bold {\n  font-family: var(--font-family-title);\n  font-size: var(--font-size-d-2xl);\n  font-weight: var(--font-weight-bold);\n  line-height: var(--font-line-height-d-2xl);\n  letter-spacing: var(--font-letter-spacing-d-2xl);\n  margin: var(--spacing-none);\n  padding: var(--spacing-none);\n  display: inline-block;\n  position: relative;\n}\n.display-2xl-bold::before,\n.display-2xl-bold::after {\n  content: '';\n  display: table;\n}\n.display-2xl-bold::before {\n  margin-bottom: -0.135em;\n}\n.display-2xl-bold::after {\n  margin-top: -0.205em;\n}\n.display-2xl-semi-bold {\n  font-family: var(--font-family-title);\n  font-size: var(--font-size-d-2xl);\n  font-weight: var(--font-weight-semi-bold);\n  line-height: var(--font-line-height-d-2xl);\n  letter-spacing: var(--font-letter-spacing-d-2xl);\n  margin: var(--spacing-none);\n  padding: var(--spacing-none);\n  display: inline-block;\n  position: relative;\n}\n.display-2xl-semi-bold::before,\n.display-2xl-semi-bold::after {\n  content: '';\n  display: table;\n}\n.display-2xl-semi-bold::before {\n  margin-bottom: -0.135em;\n}\n.display-2xl-semi-bold::after {\n  margin-top: -0.205em;\n}\n.display-xl-bold {\n  font-family: var(--font-family-title);\n  font-size: var(--font-size-d-xl);\n  font-weight: var(--font-weight-bold);\n  line-height: var(--font-line-height-d-xl);\n  letter-spacing: var(--font-letter-spacing-d-xl);\n  margin: var(--spacing-none);\n  padding: var(--spacing-none);\n  display: inline-block;\n  position: relative;\n}\n.display-xl-bold::before,\n.display-xl-bold::after {\n  content: '';\n  display: table;\n}\n.display-xl-bold::before {\n  margin-bottom: -0.145em;\n}\n.display-xl-bold::after {\n  margin-top: -0.215em;\n}\n.display-xl-semi-bold {\n  font-family: var(--font-family-title);\n  font-size: var(--font-size-d-xl);\n  font-weight: var(--font-weight-semi-bold);\n  line-height: var(--font-line-height-d-xl);\n  letter-spacing: var(--font-letter-spacing-d-xl);\n  margin: var(--spacing-none);\n  padding: var(--spacing-none);\n  display: inline-block;\n  position: relative;\n}\n.display-xl-semi-bold::before,\n.display-xl-semi-bold::after {\n  content: '';\n  display: table;\n}\n.display-xl-semi-bold::before {\n  margin-bottom: -0.145em;\n}\n.display-xl-semi-bold::after {\n  margin-top: -0.215em;\n}\n.display-lg-bold {\n  font-family: var(--font-family-title);\n  font-size: var(--font-size-d-lg);\n  font-weight: var(--font-weight-bold);\n  line-height: var(--font-line-height-d-lg);\n  letter-spacing: var(--font-letter-spacing-d-lg);\n  margin: var(--spacing-none);\n  padding: var(--spacing-none);\n  display: inline-block;\n  position: relative;\n}\n.display-lg-bold::before,\n.display-lg-bold::after {\n  content: '';\n  display: table;\n}\n.display-lg-bold::before {\n  margin-bottom: -0.015em;\n}\n.display-lg-bold::after {\n  margin-top: -0.095em;\n}\n.display-lg-semi-bold {\n  font-family: var(--font-family-title);\n  font-size: var(--font-size-d-lg);\n  font-weight: var(--font-weight-semi-bold);\n  line-height: var(--font-line-height-d-lg);\n  letter-spacing: var(--font-letter-spacing-d-lg);\n  margin: var(--spacing-none);\n  padding: var(--spacing-none);\n  display: inline-block;\n  position: relative;\n}\n.display-lg-semi-bold::before,\n.display-lg-semi-bold::after {\n  content: '';\n  display: table;\n}\n.display-lg-semi-bold::before {\n  margin-bottom: -0.015em;\n}\n.display-lg-semi-bold::after {\n  margin-top: -0.095em;\n}\n.display-md-bold {\n  font-family: var(--font-family-title);\n  font-size: var(--font-size-d-md);\n  font-weight: var(--font-weight-bold);\n  line-height: var(--font-line-height-d-md);\n  letter-spacing: var(--font-letter-spacing-d-md);\n  margin: var(--spacing-none);\n  padding: var(--spacing-none);\n  display: inline-block;\n  position: relative;\n}\n.display-md-bold::before,\n.display-md-bold::after {\n  content: '';\n  display: table;\n}\n.display-md-bold::before {\n  margin-bottom: -0.195em;\n}\n.display-md-bold::after {\n  margin-top: -0.255em;\n}\n.display-md-semi-bold {\n  font-family: var(--font-family-title);\n  font-size: var(--font-size-d-md);\n  font-weight: var(--font-weight-semi-bold);\n  line-height: var(--font-line-height-d-md);\n  letter-spacing: var(--font-letter-spacing-d-md);\n  margin: var(--spacing-none);\n  padding: var(--spacing-none);\n  display: inline-block;\n  position: relative;\n}\n.display-md-semi-bold::before,\n.display-md-semi-bold::after {\n  content: '';\n  display: table;\n}\n.display-md-semi-bold::before {\n  margin-bottom: -0.195em;\n}\n.display-md-semi-bold::after {\n  margin-top: -0.255em;\n}\n.display-sm-bold {\n  font-family: var(--font-family-title);\n  font-size: var(--font-size-d-sm);\n  font-weight: var(--font-weight-bold);\n  line-height: var(--font-line-height-d-sm);\n  letter-spacing: var(--font-letter-spacing-d-sm);\n  margin: var(--spacing-none);\n  padding: var(--spacing-none);\n  display: inline-block;\n  position: relative;\n}\n.display-sm-bold::before,\n.display-sm-bold::after {\n  content: '';\n  display: table;\n}\n.display-sm-bold::before {\n  margin-bottom: -0.195em;\n}\n.display-sm-bold::after {\n  margin-top: -0.255em;\n}\n.display-sm-semi-bold {\n  font-family: var(--font-family-title);\n  font-size: var(--font-size-d-sm);\n  font-weight: var(--font-weight-semi-bold);\n  line-height: var(--font-line-height-d-sm);\n  letter-spacing: var(--font-letter-spacing-d-sm);\n  margin: var(--spacing-none);\n  padding: var(--spacing-none);\n  display: inline-block;\n  position: relative;\n}\n.display-sm-semi-bold::before,\n.display-sm-semi-bold::after {\n  content: '';\n  display: table;\n}\n.display-sm-semi-bold::before {\n  margin-bottom: -0.195em;\n}\n.display-sm-semi-bold::after {\n  margin-top: -0.255em;\n}\n.display-xs-bold {\n  font-family: var(--font-family-title);\n  font-size: var(--font-size-d-xs);\n  font-weight: var(--font-weight-bold);\n  line-height: var(--font-line-height-d-xs);\n  letter-spacing: var(--font-letter-spacing-d-xs);\n  margin: var(--spacing-none);\n  padding: var(--spacing-none);\n  display: inline-block;\n  position: relative;\n}\n.display-xs-bold::before,\n.display-xs-bold::after {\n  content: '';\n  display: table;\n}\n.display-xs-bold::before {\n  margin-bottom: -0.199em;\n}\n.display-xs-bold::after {\n  margin-top: -0.195em; /* Continue from here */\n}\n.display-xs-semi-bold {\n  font-family: var(--font-family-title);\n  font-size: var(--font-size-d-xs);\n  font-weight: var(--font-weight-semi-bold);\n  line-height: var(--font-line-height-d-xs);\n  letter-spacing: var(--font-letter-spacing-d-xs);\n  margin: var(--spacing-none);\n  padding: var(--spacing-none);\n  display: inline-block;\n  position: relative;\n}\n.display-xs-semi-bold::before,\n.display-xs-semi-bold::after {\n  content: '';\n  display: table;\n}\n.display-xs-semi-bold::before {\n  margin-bottom: -0.259em;\n}\n.display-xs-semi-bold::after {\n  margin-top: -0.295em;\n}\n.text-xl-bold {\n  font-family: var(--font-family-body);\n  font-size: var(--font-size-t-xl);\n  font-weight: var(--font-weight-bold);\n  line-height: var(--font-line-height-t-xl);\n  margin: var(--spacing-none);\n  padding: var(--spacing-none);\n  display: inline-block;\n  position: relative;\n}\n.text-xl-bold::before,\n.text-xl-bold::after {\n  content: '';\n  display: table;\n}\n.text-xl-bold::before {\n  margin-bottom: -0.329em;\n}\n.text-xl-bold::after {\n  margin-top: -0.359em;\n}\n.text-xl-semi-bold {\n  font-family: var(--font-family-body);\n  font-size: var(--font-size-t-xl);\n  font-weight: var(--font-weight-semi-bold);\n  line-height: var(--font-line-height-t-xl);\n  margin: var(--spacing-none);\n  padding: var(--spacing-none);\n  display: inline-block;\n  position: relative;\n}\n.text-xl-semi-bold::before,\n.text-xl-semi-bold::after {\n  content: '';\n  display: table;\n}\n.text-xl-semi-bold::before {\n  margin-bottom: -0.329em;\n}\n.text-xl-semi-bold::after {\n  margin-top: -0.359em;\n}\n.text-xl-medium {\n  font-family: var(--font-family-body);\n  font-size: var(--font-size-t-xl);\n  font-weight: var(--font-weight-medium);\n  line-height: var(--font-line-height-t-xl);\n  margin: var(--spacing-none);\n  padding: var(--spacing-none);\n  display: inline-block;\n  position: relative;\n}\n.text-xl-medium::before,\n.text-xl-medium::after {\n  content: '';\n  display: table;\n}\n.text-xl-medium::before {\n  margin-bottom: -0.339em;\n}\n.text-xl-medium::after {\n  margin-top: -0.399em;\n}\n.text-xl-regular {\n  font-family: var(--font-family-body);\n  font-size: var(--font-size-t-xl);\n  font-weight: var(--font-weight-regular);\n  line-height: var(--font-line-height-t-xl);\n  margin: var(--spacing-none);\n  padding: var(--spacing-none);\n  display: inline-block;\n  position: relative;\n}\n.text-xl-regular::before,\n.text-xl-regular::after {\n  content: '';\n  display: table;\n}\n.text-xl-regular::before {\n  margin-bottom: -0.339em;\n}\n.text-xl-regular::after {\n  margin-top: -0.399em;\n}\n.text-lg-bold {\n  font-family: var(--font-family-body);\n  font-size: var(--font-size-t-lg);\n  font-weight: var(--font-weight-bold);\n  line-height: var(--font-line-height-t-lg);\n  margin: var(--spacing-none);\n  padding: var(--spacing-none);\n  display: inline-block;\n  position: relative;\n}\n.text-lg-bold::before,\n.text-lg-bold::after {\n  content: '';\n  display: table;\n}\n.text-lg-bold::before {\n  margin-bottom: -0.339em;\n}\n.text-lg-bold::after {\n  margin-top: -0.399em;\n}\n.text-lg-semi-bold {\n  font-family: var(--font-family-body);\n  font-size: var(--font-size-t-lg);\n  font-weight: var(--font-weight-semi-bold);\n  line-height: var(--font-line-height-t-lg);\n  margin: var(--spacing-none);\n  padding: var(--spacing-none);\n  display: inline-block;\n  position: relative;\n}\n.text-lg-semi-bold::before,\n.text-lg-semi-bold::after {\n  content: '';\n  display: table;\n}\n.text-lg-semi-bold::before {\n  margin-bottom: -0.339em;\n}\n.text-lg-semi-bold::after {\n  margin-top: -0.399em;\n}\n.text-lg-medium {\n  font-family: var(--font-family-body);\n  font-size: var(--font-size-t-lg);\n  font-weight: var(--font-weight-medium);\n  line-height: var(--font-line-height-t-lg);\n  margin: var(--spacing-none);\n  padding: var(--spacing-none);\n  display: inline-block;\n  position: relative;\n}\n.text-lg-medium::before,\n.text-lg-medium::after {\n  content: '';\n  display: table;\n}\n.text-lg-medium::before {\n  margin-bottom: -0.349em;\n}\n.text-lg-medium::after {\n  margin-top: -0.389em;\n}\n.text-lg-regular {\n  font-family: var(--font-family-body);\n  font-size: var(--font-size-t-lg);\n  font-weight: var(--font-weight-regular);\n  line-height: var(--font-line-height-t-lg);\n  margin: var(--spacing-none);\n  padding: var(--spacing-none);\n  display: inline-block;\n  position: relative;\n}\n.text-lg-regular::before,\n.text-lg-regular::after {\n  content: '';\n  display: table;\n}\n.text-lg-regular::before {\n  margin-bottom: -0.349em;\n}\n.text-lg-regular::after {\n  margin-top: -0.389em;\n}\n.text-md-bold {\n  font-family: var(--font-family-body);\n  font-size: var(--font-size-t-md);\n  font-weight: var(--font-weight-bold);\n  line-height: var(--font-line-height-t-md);\n  margin: var(--spacing-none);\n  padding: var(--spacing-none);\n  display: inline-block;\n  position: relative;\n}\n.text-md-bold::before,\n.text-md-bold::after {\n  content: '';\n  display: table;\n}\n.text-md-bold::before {\n  margin-bottom: -0.349em;\n}\n.text-md-bold::after {\n  margin-top: -0.389em;\n}\n.text-md-semi-bold {\n  font-family: var(--font-family-body);\n  font-size: var(--font-size-t-md);\n  font-weight: var(--font-weight-semi-bold);\n  line-height: var(--font-line-height-t-md);\n  margin: var(--spacing-none);\n  padding: var(--spacing-none);\n  display: inline-block;\n  position: relative;\n}\n.text-md-semi-bold::before,\n.text-md-semi-bold::after {\n  content: '';\n  display: table;\n}\n.text-md-semi-bold::before {\n  margin-bottom: -0.349em;\n}\n.text-md-semi-bold::after {\n  margin-top: -0.389em;\n}\n.text-md-medium {\n  font-family: var(--font-family-body);\n  font-size: var(--font-size-t-md);\n  font-weight: var(--font-weight-medium);\n  line-height: var(--font-line-height-t-md);\n  margin: var(--spacing-none);\n  padding: var(--spacing-none);\n  display: inline-block;\n  position: relative;\n}\n.text-md-medium::before,\n.text-md-medium::after {\n  content: '';\n  display: table;\n}\n.text-md-medium::before {\n  margin-bottom: -0.349em;\n}\n.text-md-medium::after {\n  margin-top: -0.389em;\n}\n.text-md-regular {\n  font-family: var(--font-family-body);\n  font-size: var(--font-size-t-md);\n  font-weight: var(--font-weight-regular);\n  line-height: var(--font-line-height-t-md);\n  margin: var(--spacing-none);\n  padding: var(--spacing-none);\n  display: inline-block;\n  position: relative;\n}\n.text-md-regular::before,\n.text-md-regular::after {\n  content: '';\n  display: table;\n}\n.text-md-regular::before {\n  margin-bottom: -0.349em;\n}\n.text-md-regular::after {\n  margin-top: -0.389em;\n}\n.text-sm-bold {\n  font-family: var(--font-family-body);\n  font-size: var(--font-size-t-sm);\n  font-weight: var(--font-weight-bold);\n  line-height: var(--font-line-height-t-sm);\n  margin: var(--spacing-none);\n  padding: var(--spacing-none);\n  display: inline-block;\n  position: relative;\n}\n.text-sm-bold::before,\n.text-sm-bold::after {\n  content: '';\n  display: table;\n}\n.text-sm-bold::before {\n  margin-bottom: -0.299em;\n}\n.text-sm-bold::after {\n  margin-top: -0.349em;\n}\n.text-sm-semi-bold {\n  font-family: var(--font-family-body);\n  font-size: var(--font-size-t-sm);\n  font-weight: var(--font-weight-semi-bold);\n  line-height: var(--font-line-height-t-sm);\n  margin: var(--spacing-none);\n  padding: var(--spacing-none);\n  display: inline-block;\n  position: relative;\n}\n.text-sm-semi-bold::before,\n.text-sm-semi-bold::after {\n  content: '';\n  display: table;\n}\n.text-sm-semi-bold::before {\n  margin-bottom: -0.299em;\n}\n.text-sm-semi-bold::after {\n  margin-top: -0.349em;\n}\n.text-sm-medium {\n  font-family: var(--font-family-body);\n  font-size: var(--font-size-t-sm);\n  font-weight: var(--font-weight-medium);\n  line-height: var(--font-line-height-t-sm);\n  margin: var(--spacing-none);\n  padding: var(--spacing-none);\n  position: relative;\n  display: inline-block;\n}\n.text-sm-medium::before,\n.text-sm-medium::after {\n  content: '';\n  display: table;\n}\n.text-sm-medium::before {\n  margin-bottom: -0.299em;\n}\n.text-sm-medium::after {\n  margin-top: -0.299em;\n}\n.text-sm-regular {\n  font-family: var(--font-family-body);\n  font-size: var(--font-size-t-sm);\n  font-weight: var(--font-weight-regular);\n  line-height: var(--font-line-height-t-sm);\n  margin: var(--spacing-none);\n  padding: var(--spacing-none);\n  position: relative;\n  display: inline-block;\n}\n.text-sm-regular::before,\n.text-sm-regular::after {\n  content: '';\n  display: table;\n}\n.text-sm-regular::before {\n  margin-bottom: -0.299em;\n}\n.text-sm-regular::after {\n  margin-top: -0.299em;\n}\n.text-xs-bold {\n  font-family: var(--font-family-body);\n  font-size: var(--font-size-t-xs);\n  font-weight: var(--font-weight-bold);\n  line-height: var(--font-line-height-t-xs);\n  margin: var(--spacing-none);\n  padding: var(--spacing-none);\n  display: inline-block;\n  position: relative;\n}\n.text-xs-bold::before,\n.text-xs-bold::after {\n  content: '';\n  display: table;\n}\n.text-xs-bold::before {\n  margin-bottom: -0.291em;\n}\n.text-xs-bold::after {\n  margin-top: -0.416em;\n}\n.text-xs-semi-bold {\n  font-family: var(--font-family-body);\n  font-size: var(--font-size-t-xs);\n  font-weight: var(--font-weight-semi-bold);\n  line-height: var(--font-line-height-t-xs);\n  margin: var(--spacing-none);\n  padding: var(--spacing-none);\n  display: inline-block;\n  position: relative;\n}\n.text-xs-semi-bold::before,\n.text-xs-semi-bold::after {\n  content: '';\n  display: table;\n}\n.text-xs-semi-bold::before {\n  margin-bottom: -0.321em;\n}\n.text-xs-semi-bold::after {\n  margin-top: -0.416em;\n}\n.text-xs-medium {\n  font-family: var(--font-family-body);\n  font-size: var(--font-size-t-xs);\n  font-weight: var(--font-weight-medium);\n  line-height: var(--font-line-height-t-xs);\n  margin: var(--spacing-none);\n  padding: var(--spacing-none);\n  display: inline-block;\n  position: relative;\n}\n.text-xs-medium::before,\n.text-xs-medium::after {\n  content: '';\n  display: table;\n}\n.text-xs-medium::before {\n  margin-bottom: -0.285em;\n}\n.text-xs-medium::after {\n  margin-top: -0.396em;\n}\n.text-xs-regular {\n  font-family: var(--font-family-body);\n  font-size: var(--font-size-t-xs);\n  font-weight: var(--font-weight-regular);\n  line-height: var(--font-line-height-t-xs);\n  margin: var(--spacing-none);\n  padding: var(--spacing-none);\n  display: inline-block;\n  position: relative;\n}\n.text-xs-regular::before,\n.text-xs-regular::after {\n  content: '';\n  display: table;\n}\n.text-xs-regular::before {\n  margin-bottom: -0.291em;\n}\n.text-xs-regular::after {\n  margin-top: -0.396em;\n}\n.text-xxs-bold {\n  font-family: var(--font-family-body);\n  font-size: var(--font-size-t-xxs);\n  font-weight: var(--font-weight-bold);\n  line-height: var(--font-line-height-t-xxs);\n  margin: var(--spacing-none);\n  padding: var(--spacing-none);\n  display: inline-block;\n  position: relative;\n}\n.text-xxs-bold::before,\n.text-xxs-bold::after {\n  content: '';\n  display: table;\n}\n.text-xxs-bold::before {\n  margin-bottom: -0.291em;\n}\n.text-xxs-bold::after {\n  margin-top: -0.416em;\n}\n.text-xxs-semi-bold {\n  font-family: var(--font-family-body);\n  font-size: var(--font-size-t-xxs);\n  font-weight: var(--font-weight-semi-bold);\n  line-height: var(--font-line-height-t-xxs);\n  margin: var(--spacing-none);\n  padding: var(--spacing-none);\n  display: inline-block;\n  position: relative;\n}\n.text-xxs-semi-bold::before,\n.text-xxs-semi-bold::after {\n  content: '';\n  display: table;\n}\n.text-xxs-semi-bold::before {\n  margin-bottom: -0.291em;\n}\n.text-xxs-semi-bold::after {\n  margin-top: -0.416em;\n}\n.text-xxs-medium {\n  font-family: var(--font-family-body);\n  font-size: var(--font-size-t-xxs);\n  font-weight: var(--font-weight-medium);\n  line-height: var(--font-line-height-t-xxs);\n  margin: var(--spacing-none);\n  padding: var(--spacing-none);\n  display: inline-block;\n  position: relative;\n}\n.text-xxs-medium::before,\n.text-xxs-medium::after {\n  content: '';\n  display: table;\n}\n.text-xxs-medium::before {\n  margin-bottom: -0.291em;\n}\n.text-xxs-medium::after {\n  margin-top: -0.416em;\n}\n.text-xxs-regular {\n  font-family: var(--font-family-body);\n  font-size: var(--font-size-t-xxs);\n  font-weight: var(--font-weight-regular);\n  line-height: var(--font-line-height-t-xxs);\n  margin: var(--spacing-none);\n  padding: var(--spacing-none);\n  display: inline-block;\n  position: relative;\n}\n.text-xxs-regular::before,\n.text-xxs-regular::after {\n  content: '';\n  display: table;\n}\n.text-xxs-regular::before {\n  margin-bottom: -0.291em;\n}\n.text-xxs-regular::after {\n  margin-top: -0.416em;\n}\n/* Button slot styles */\n/* .slotted_button_text.primary {\n  color: var(--color-text-inverse, #ffffff) !important;\n}\n\n.slotted_button_text.secondary_gray {\n  color: var(--color-text, #4b5565) !important;\n}\n\n.slotted_button_text.secondary_color {\n  color: var(--color-text-brandRed, #e21b2e) !important;\n}\n\n.slotted_button_text.tertiary_gray {\n  color: var(--color-text, #4b5565) !important;\n}\n\n.slotted_button_text.tertiary_color {\n  color: var(--color-text-brandRed, #e21b2e) !important;\n}\n\n.slotted_button_text.link_gray {\n  color: var(--color-text, #4b5565) !important;\n}\n\n.slotted_button_text.link_color {\n  color: var(--color-link, #075db2) !important;\n}\n\n.slotted_button_text.primary.destructive {\n  color: var(--color-text-inverse, #ffffff) !important;\n}\n\n#slotted_button_text.primary.disabled,\n#slotted_button_text.secondary_gray.disabled,\n#slotted_button_text.secondary_color.disabled,\n#slotted_button_text.tertiary_gray.disabled,\n#slotted_button_text.tertiary_color.disabled,\n#slotted_button_text.link_gray.disabled,\n#slotted_button_text.link_color.disabled {\n  color: var(--color-text-disabled, #9aa4b2) !important;\n}\n\n#slotted_button_text.secondary_gray.default.destructive,\n#slotted_button_text.secondary_color.default.destructive,\n#slotted_button_text.tertiary_gray.default.destructive,\n#slotted_button_text.tertiary_color.default.destructive,\n#slotted_button_text.link_gray.default.destructive,\n#slotted_button_text.link_color.default.destructive {\n  color: var(--color-text-danger, #b51726) !important;\n} */\n.top_bar_item_div {\n  display: inline-flex;\n  padding: var(--spacing-none);\n  flex-direction: column;\n  width: -moz-fit-content;\n  width: fit-content;\n  align-items: flex-start;\n  gap: 0.5rem;\n  background: transparent;\n  border-radius: var(--rounded-sm);\n  cursor: pointer;\n  position: relative;\n}\n.top_bar_item_div.colored_background:hover {\n  background: rgba(33, 44, 101, 0.4);\n}\n.top_bar_item_div.colored_background.active {\n  background: #042f59;\n}\n.top_bar_item_div.plain_background:hover {\n  background: var(--color-background-gray-subtler, #eef2f6);\n}\n.top_bar_item_div.plain_background.active {\n  background: var(--color-background-information-subtler, #c8e0f9);\n}\n.top_bar_content {\n  display: flex;\n  padding: var(--spacing-3) var(--spacing-5);\n  align-items: center;\n  gap: var(--spacing-3);\n}\n.bar {\n  position: absolute;\n  bottom: 0;\n  width: calc(100% - 2.5rem);\n  height: 0.15rem;\n  border-radius: var(--rounded-full);\n}\n.bar.colored_background {\n  background-color: #fff;\n}\n.bar.plain_background {\n  background-color: var(--color-background-brandRed, #e21b2e);\n}\n.icon {\n  width: 1.25rem;\n  height: 1.25rem;\n}\n.icon.colored_background path[stroke] {\n  stroke: #fff;\n}\n.icon.colored_background path[fill] {\n  fill: #fff;\n}\n.icon.colored_background.active path[fill] {\n  fill: #fff;\n}\n.icon.colored_background.active path.has_opacity[fill][opacity] {\n  /* fill: transparent; */\n  opacity: 0.5;\n}\n.icon.colored_background.active g.has_opacity[fill][opacity] {\n  /* fill: transparent; */\n  opacity: 0.5;\n}\n.icon.plain_background path[stroke] {\n  stroke: var(--color-icon, #4b5565);\n}\n.icon.plain_background path[fill] {\n  fill: var(--color-icon, #4b5565);\n}\n.icon.plain_background path.has_opacity,\n.icon.plain_background g.has_opacity,\n.icon.plain_background circle.has_opacity,\n.icon.colored_background path.has_opacity,\n.icon.colored_background g.has_opacity,\n.icon.colored_background circle.has_opacity {\n  opacity: 0;\n}\n.icon.plain_background.active path.has_opacity,\n.icon.plain_background.active g.has_opacity,\n.icon.plain_background.active circle.has_opacity,\n.icon.colored_background.active path.has_opacity,\n.icon.colored_background.active g.has_opacity,\n.icon.colored_background.active circle.has_opacity {\n  opacity: 0.5;\n}\n/* .icon.plain_background path[fill].has_opacity,\n.icon.plain_background g.has_opacity,\n.icon.colored_background path[fill].has_opacity,\n.icon.colored_background g.has_opacity {\n  fill: transparent;\n} */\n.icon.plain_background.active path[stroke] {\n  stroke: var(--color-icon-information-bold, #042f59);\n}\n.icon.plain_background.active path[fill] {\n  fill: var(--color-icon-information-bold, #042f59);\n}\n.label_text{\n  white-space: nowrap;\n}\n.label_text.colored_background {\n  color: #fff;\n}\n.label_text.plain_background {\n  color: var(--color-text, #4b5565);\n}\n.label_text.plain_background.active {\n  color: var(--color-text-information-bold, #042f59);\n}\n.tooltip {\n  position: absolute;\n  bottom: 198%;\n  left: -0.7rem;\n}\n";
 
@@ -43,7 +43,7 @@ const GbNavBarItem = /*@__PURE__*/ proxyCustomElement(class GbNavBarItem extends
         this.loadIcon(this.icon);
     }
     render() {
-        return (h("div", { key: 'c69751f43824f89b102efcf031231c69164466f7', class: `top_bar_item_div ${this.category} ${this.state}`, onMouseEnter: () => (this.showTooltip = true), onMouseLeave: () => (this.showTooltip = false) }, h("div", { key: '9fb664623355e14c4f7dc99eb6512006acb61435', class: `top_bar_content` }, this.icon && h("div", { key: 'a7c5c1fdd3df4e9385f1edf730bfb05130a50ea9', class: `icon ${this.category} ${this.state}`, innerHTML: this.leadingIconSvg }), !this.iconOnly && (h("div", { key: 'c0a256c3f9597881276898c65da235fbe0d118f0', class: "label" }, h("p", { key: '18c8ef260a3143bec3550d94a39aaa75305dc50b', class: `label_text ${this.state === 'active' ? 'text-md-semi-bold' : 'text-md-medium'} ${this.category} ${this.state}` }, this.label))), this.state === 'active' && this.category === 'colored_background' && h("div", { key: '1ef96ed35b18145aff6b0f371457d15c97d2379d', class: `bar ${this.category}` }), this.state === 'active' && this.category === 'plain_background' && h("div", { key: 'a3e7bd9954842aa202818c3ea39825a0e23ec487', class: `bar ${this.category}` })), this.iconOnly && this.showTooltip && (h("gb-tooltip", { key: 'e039bf986e467498231117c230ed349bf391f9ef', "show-arrow": true, arrow: "bottom_center", class: "tooltip" }, h("p", { key: '3b33bbb793bc5e643cdbe7781f1946a56b371aa2', slot: "label" }, this.label)))));
+        return (h("div", { key: 'dafdb57b2193f7d4d68b91407bf4daec7bb09151', class: `top_bar_item_div ${this.category} ${this.state}`, onMouseEnter: () => (this.showTooltip = true), onMouseLeave: () => (this.showTooltip = false) }, h("div", { key: 'f426f0376244f66a6236e0b8cce03cb398a5a6f7', class: `top_bar_content` }, this.icon && h("div", { key: 'b025bded7aadde609a5e5d182e14a8c18ccb4916', class: `icon ${this.category} ${this.state}`, innerHTML: this.leadingIconSvg }), !this.iconOnly && (h("div", { key: '0afb7724d390acca44cacbd5282c3009b7f6277b', class: "label" }, h("p", { key: '92cf131a66b9092b909ce45afdd43026decc3aab', class: `label_text ${this.state === 'active' ? 'text-md-semi-bold' : 'text-md-medium'} ${this.category} ${this.state}` }, this.label))), this.state === 'active' && this.category === 'colored_background' && h("div", { key: '79168ebace5dec2ee66331315798332faf6a70ee', class: `bar ${this.category}` }), this.state === 'active' && this.category === 'plain_background' && h("div", { key: '669ca8a9c5efecb4e0344ef0ab2e4f33d09f868b', class: `bar ${this.category}` })), this.iconOnly && this.showTooltip && (h("gb-tooltip", { key: 'a30176428e588d49071176ef5515b4e12e92dd59', "show-arrow": true, arrow: "bottom_center", class: "tooltip" }, h("p", { key: '150641050f95f493de8b0cb49b6275269ecac0bc', slot: "label" }, this.label)))));
     }
     static get style() { return gbNavBarItemCss; }
 }, [257, "gb-nav-bar-item", {
@@ -76,6 +76,6 @@ function defineCustomElement() {
 defineCustomElement();
 
 export { GbNavBarItem as G, defineCustomElement as d };
-//# sourceMappingURL=p-BhPyWyPz.js.map
+//# sourceMappingURL=p-yq-i_Fpl.js.map
 
-//# sourceMappingURL=p-BhPyWyPz.js.map
+//# sourceMappingURL=p-yq-i_Fpl.js.map

package/dist/components/{p-BhPyWyPz.js.map → p-yq-i_Fpl.js.map}

@@ -1 +1 @@
-{"file":"p-BhPyWyPz.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/gb-nav-bar-item/gb-nav-bar-item.css?tag=gb-nav-bar-item&encapsulation=shadow","src/components/gb-nav-bar-item/gb-nav-bar-item.tsx"],"sourcesContent":["@import './../../global/global.css';\n\n.top_bar_item_div {\n  display: inline-flex;\n  padding: var(--spacing-none);\n  flex-direction: column;\n  width: fit-content;\n  align-items: flex-start;\n  gap: 0.5rem;\n  background: transparent;\n  border-radius: var(--rounded-sm);\n  cursor: pointer;\n  position: relative;\n}\n\n.top_bar_item_div.colored_background:hover {\n  background: rgba(33, 44, 101, 0.4);\n}\n\n.top_bar_item_div.colored_background.active {\n  background: #042f59;\n}\n\n.top_bar_item_div.plain_background:hover {\n  background: var(--color-background-gray-subtler, #eef2f6);\n}\n\n.top_bar_item_div.plain_background.active {\n  background: var(--color-background-information-subtler, #c8e0f9);\n}\n\n.top_bar_content {\n  display: flex;\n  padding: var(--spacing-3) var(--spacing-5);\n  align-items: center;\n  gap: var(--spacing-3);\n}\n\n.bar {\n  position: absolute;\n  bottom: 0;\n  width: calc(100% - 2.5rem);\n  height: 0.15rem;\n  border-radius: var(--rounded-full);\n}\n\n.bar.colored_background {\n  background-color: #fff;\n}\n\n.bar.plain_background {\n  background-color: var(--color-background-brandRed, #e21b2e);\n}\n\n.icon {\n  width: 1.25rem;\n  height: 1.25rem;\n}\n\n.icon.colored_background path[stroke] {\n  stroke: #fff;\n}\n\n.icon.colored_background path[fill] {\n  fill: #fff;\n}\n\n.icon.colored_background.active path[fill] {\n  fill: #fff;\n}\n\n.icon.colored_background.active path.has_opacity[fill][opacity] {\n  /* fill: transparent; */\n  opacity: 0.5;\n}\n\n.icon.colored_background.active g.has_opacity[fill][opacity] {\n  /* fill: transparent; */\n  opacity: 0.5;\n}\n\n.icon.plain_background path[stroke] {\n  stroke: var(--color-icon, #4b5565);\n}\n\n.icon.plain_background path[fill] {\n  fill: var(--color-icon, #4b5565);\n}\n\n.icon.plain_background path.has_opacity,\n.icon.plain_background g.has_opacity,\n.icon.plain_background circle.has_opacity,\n.icon.colored_background path.has_opacity,\n.icon.colored_background g.has_opacity,\n.icon.colored_background circle.has_opacity {\n  opacity: 0;\n}\n\n.icon.plain_background.active path.has_opacity,\n.icon.plain_background.active g.has_opacity,\n.icon.plain_background.active circle.has_opacity,\n.icon.colored_background.active path.has_opacity,\n.icon.colored_background.active g.has_opacity,\n.icon.colored_background.active circle.has_opacity {\n  opacity: 0.5;\n}\n\n/* .icon.plain_background path[fill].has_opacity,\n.icon.plain_background g.has_opacity,\n.icon.colored_background path[fill].has_opacity,\n.icon.colored_background g.has_opacity {\n  fill: transparent;\n} */\n\n.icon.plain_background.active path[stroke] {\n  stroke: var(--color-icon-information-bold, #042f59);\n}\n\n.icon.plain_background.active path[fill] {\n  fill: var(--color-icon-information-bold, #042f59);\n}\n\n.label_text{\n  white-space: nowrap;\n}\n\n.label_text.colored_background {\n  color: #fff;\n}\n\n.label_text.plain_background {\n  color: var(--color-text, #4b5565);\n}\n\n.label_text.plain_background.active {\n  color: var(--color-text-information-bold, #042f59);\n}\n\n.tooltip {\n  position: absolute;\n  bottom: 198%;\n  left: -0.7rem;\n}\n","import { Component, Prop, State, getAssetPath, h } from '@stencil/core';\nimport { GeneralBackgroundCategories } from '../../models/reusableModels';\n\n@Component({\n  tag: 'gb-nav-bar-item',\n  styleUrl: 'gb-nav-bar-item.css',\n  shadow: true,\n})\nexport class GbNavBarItem {\n  @Prop() state: 'default' | 'active';\n  @Prop() iconOnly: boolean = false;\n  @Prop() category: GeneralBackgroundCategories;\n  @Prop() label: string = '';\n  @Prop() icon: string = '';\n  @State() leadingIconSvg: string = '';\n  @State() showTooltip: boolean = false;\n\n  async loadIcon(iconName: string) {\n    const iconPath = getAssetPath(`${iconName}`);\n    const response = await fetch(iconPath);\n    const svg = await response.text();\n\n    // Parse SVG into DOM\n    const parser = new DOMParser();\n    const svgDoc = parser.parseFromString(svg, 'image/svg+xml');\n    const svgElement = svgDoc.documentElement;\n\n    // Select all path tags with an opacity attribute\n    const pathsWithOpacity = svgElement.querySelectorAll('path[opacity]');\n    const gWithOpacity = svgElement.querySelectorAll('g[opacity]');\n\n    // Add a class to each\n    pathsWithOpacity.forEach(path => {\n      path.classList.add('has_opacity');\n    });\n\n    gWithOpacity.forEach(g => {\n      g.classList.add('has_opacity');\n    });\n\n    // Convert the modified SVG back to a string\n    const modifiedSvg = svgElement.outerHTML;\n\n    // Save or inject it into your component\n    this.leadingIconSvg = modifiedSvg;\n  }\n\n  componentWillLoad() {\n    this.loadIcon(this.icon);\n  }\n\n  render() {\n    return (\n      <div class={`top_bar_item_div ${this.category} ${this.state}`} onMouseEnter={() => (this.showTooltip = true)} onMouseLeave={() => (this.showTooltip = false)}>\n        <div class={`top_bar_content`}>\n          {this.icon && <div class={`icon ${this.category} ${this.state}`} innerHTML={this.leadingIconSvg}></div>}\n          {!this.iconOnly && (\n            <div class=\"label\">\n              <p class={`label_text ${this.state === 'active' ? 'text-md-semi-bold' : 'text-md-medium'} ${this.category} ${this.state}`}>{this.label}</p>\n            </div>\n          )}\n          {this.state === 'active' && this.category === 'colored_background' && <div class={`bar ${this.category}`}></div>}\n          {this.state === 'active' && this.category === 'plain_background' && <div class={`bar ${this.category}`}></div>}\n        </div> \n        {this.iconOnly && this.showTooltip && (\n          <gb-tooltip show-arrow={true} arrow=\"bottom_center\" class=\"tooltip\">\n            <p slot=\"label\">{this.label}</p>\n          </gb-tooltip>\n        )}\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-yq-i_Fpl.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/gb-nav-bar-item/gb-nav-bar-item.css?tag=gb-nav-bar-item&encapsulation=shadow","src/components/gb-nav-bar-item/gb-nav-bar-item.tsx"],"sourcesContent":["@import './../../global/global.css';\n\n.top_bar_item_div {\n  display: inline-flex;\n  padding: var(--spacing-none);\n  flex-direction: column;\n  width: fit-content;\n  align-items: flex-start;\n  gap: 0.5rem;\n  background: transparent;\n  border-radius: var(--rounded-sm);\n  cursor: pointer;\n  position: relative;\n}\n\n.top_bar_item_div.colored_background:hover {\n  background: rgba(33, 44, 101, 0.4);\n}\n\n.top_bar_item_div.colored_background.active {\n  background: #042f59;\n}\n\n.top_bar_item_div.plain_background:hover {\n  background: var(--color-background-gray-subtler, #eef2f6);\n}\n\n.top_bar_item_div.plain_background.active {\n  background: var(--color-background-information-subtler, #c8e0f9);\n}\n\n.top_bar_content {\n  display: flex;\n  padding: var(--spacing-3) var(--spacing-5);\n  align-items: center;\n  gap: var(--spacing-3);\n}\n\n.bar {\n  position: absolute;\n  bottom: 0;\n  width: calc(100% - 2.5rem);\n  height: 0.15rem;\n  border-radius: var(--rounded-full);\n}\n\n.bar.colored_background {\n  background-color: #fff;\n}\n\n.bar.plain_background {\n  background-color: var(--color-background-brandRed, #e21b2e);\n}\n\n.icon {\n  width: 1.25rem;\n  height: 1.25rem;\n}\n\n.icon.colored_background path[stroke] {\n  stroke: #fff;\n}\n\n.icon.colored_background path[fill] {\n  fill: #fff;\n}\n\n.icon.colored_background.active path[fill] {\n  fill: #fff;\n}\n\n.icon.colored_background.active path.has_opacity[fill][opacity] {\n  /* fill: transparent; */\n  opacity: 0.5;\n}\n\n.icon.colored_background.active g.has_opacity[fill][opacity] {\n  /* fill: transparent; */\n  opacity: 0.5;\n}\n\n.icon.plain_background path[stroke] {\n  stroke: var(--color-icon, #4b5565);\n}\n\n.icon.plain_background path[fill] {\n  fill: var(--color-icon, #4b5565);\n}\n\n.icon.plain_background path.has_opacity,\n.icon.plain_background g.has_opacity,\n.icon.plain_background circle.has_opacity,\n.icon.colored_background path.has_opacity,\n.icon.colored_background g.has_opacity,\n.icon.colored_background circle.has_opacity {\n  opacity: 0;\n}\n\n.icon.plain_background.active path.has_opacity,\n.icon.plain_background.active g.has_opacity,\n.icon.plain_background.active circle.has_opacity,\n.icon.colored_background.active path.has_opacity,\n.icon.colored_background.active g.has_opacity,\n.icon.colored_background.active circle.has_opacity {\n  opacity: 0.5;\n}\n\n/* .icon.plain_background path[fill].has_opacity,\n.icon.plain_background g.has_opacity,\n.icon.colored_background path[fill].has_opacity,\n.icon.colored_background g.has_opacity {\n  fill: transparent;\n} */\n\n.icon.plain_background.active path[stroke] {\n  stroke: var(--color-icon-information-bold, #042f59);\n}\n\n.icon.plain_background.active path[fill] {\n  fill: var(--color-icon-information-bold, #042f59);\n}\n\n.label_text{\n  white-space: nowrap;\n}\n\n.label_text.colored_background {\n  color: #fff;\n}\n\n.label_text.plain_background {\n  color: var(--color-text, #4b5565);\n}\n\n.label_text.plain_background.active {\n  color: var(--color-text-information-bold, #042f59);\n}\n\n.tooltip {\n  position: absolute;\n  bottom: 198%;\n  left: -0.7rem;\n}\n","import { Component, Prop, State, getAssetPath, h } from '@stencil/core';\nimport { GeneralBackgroundCategories } from '../../models/reusableModels';\n\n@Component({\n  tag: 'gb-nav-bar-item',\n  styleUrl: 'gb-nav-bar-item.css',\n  shadow: true,\n})\nexport class GbNavBarItem {\n  @Prop() state: 'default' | 'active';\n  @Prop() iconOnly: boolean = false;\n  @Prop() category: GeneralBackgroundCategories;\n  @Prop() label: string = '';\n  @Prop() icon: string = '';\n  @State() leadingIconSvg: string = '';\n  @State() showTooltip: boolean = false;\n\n  async loadIcon(iconName: string) {\n    const iconPath = getAssetPath(`${iconName}`);\n    const response = await fetch(iconPath);\n    const svg = await response.text();\n\n    // Parse SVG into DOM\n    const parser = new DOMParser();\n    const svgDoc = parser.parseFromString(svg, 'image/svg+xml');\n    const svgElement = svgDoc.documentElement;\n\n    // Select all path tags with an opacity attribute\n    const pathsWithOpacity = svgElement.querySelectorAll('path[opacity]');\n    const gWithOpacity = svgElement.querySelectorAll('g[opacity]');\n\n    // Add a class to each\n    pathsWithOpacity.forEach(path => {\n      path.classList.add('has_opacity');\n    });\n\n    gWithOpacity.forEach(g => {\n      g.classList.add('has_opacity');\n    });\n\n    // Convert the modified SVG back to a string\n    const modifiedSvg = svgElement.outerHTML;\n\n    // Save or inject it into your component\n    this.leadingIconSvg = modifiedSvg;\n  }\n\n  componentWillLoad() {\n    this.loadIcon(this.icon);\n  }\n\n  render() {\n    return (\n      <div class={`top_bar_item_div ${this.category} ${this.state}`} onMouseEnter={() => (this.showTooltip = true)} onMouseLeave={() => (this.showTooltip = false)}>\n        <div class={`top_bar_content`}>\n          {this.icon && <div class={`icon ${this.category} ${this.state}`} innerHTML={this.leadingIconSvg}></div>}\n          {!this.iconOnly && (\n            <div class=\"label\">\n              <p class={`label_text ${this.state === 'active' ? 'text-md-semi-bold' : 'text-md-medium'} ${this.category} ${this.state}`}>{this.label}</p>\n            </div>\n          )}\n          {this.state === 'active' && this.category === 'colored_background' && <div class={`bar ${this.category}`}></div>}\n          {this.state === 'active' && this.category === 'plain_background' && <div class={`bar ${this.category}`}></div>}\n        </div> \n        {this.iconOnly && this.showTooltip && (\n          <gb-tooltip show-arrow={true} arrow=\"bottom_center\" class=\"tooltip\">\n            <p slot=\"label\">{this.label}</p>\n          </gb-tooltip>\n        )}\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/test-input-tag.js

@@ -1,15 +1,15 @@
 import { p as proxyCustomElement, H, c as createEvent, h } from './p-CD7FeUx5.js';
 import { S as StateEnum } from './p-cHn6O-Kf.js';
-import { d as defineCustomElement$b } from './p-D6yceV_k.js';
+import { d as defineCustomElement$b } from './p-CiIf2jTd.js';
 import { d as defineCustomElement$a } from './p-DhmmSqYS.js';
 import { d as defineCustomElement$9 } from './p-OVoS3dKe.js';
 import { d as defineCustomElement$8 } from './p-BE9pk1IO.js';
-import { d as defineCustomElement$7 } from './p-CXWQ1FqP.js';
-import { d as defineCustomElement$6 } from './p-BWyAj_uJ.js';
-import { d as defineCustomElement$5 } from './p-DtoJorl0.js';
-import { d as defineCustomElement$4 } from './p-DGWkZn3b.js';
-import { d as defineCustomElement$3 } from './p-BAwUuGTh.js';
-import { d as defineCustomElement$2 } from './p-ChTxJPlR.js';
+import { d as defineCustomElement$7 } from './p-D5wRXGjr.js';
+import { d as defineCustomElement$6 } from './p-Cd6l_J_d.js';
+import { d as defineCustomElement$5 } from './p-BLNHxN4m.js';
+import { d as defineCustomElement$4 } from './p-DSWKsMVQ.js';
+import { d as defineCustomElement$3 } from './p-DkuZ63iF.js';
+import { d as defineCustomElement$2 } from './p-JZVVGFgd.js';
 
 const testInputTagCss = ".input_group{--height:auto;--inputheight:4.5rem;--weight:100%;display:flex;position:relative}.input_like_parent{width:100%;border:1px solid var(--color-border-input, #CDD5DF);border-radius:var(--rounded-sm);padding:0.625rem 0.875rem 0.625rem var(--spacing-3)}.input_like{width:100%;overflow-y:scroll;transition:height 50ms ease-in-out}.results_display{display:flex;flex-wrap:wrap;gap:0.5rem;background-color:var(--color-surface, #FFFFFF);display:none;margin-top:0.5rem}.results_display.show_results{display:block}.tags{padding-top:1rem}.dropdown_list.show{display:block}.dropdown_menu{display:flex;width:100%;max-height:15rem;padding:var(--spacing-none);flex-direction:column;align-items:stretch;border-radius:var(--rounded-sm);border:1px solid var(--color-border-subtler, #E3E8EF);background:var(--color-surface, #FFFFFF);box-shadow:var(--shadow-sm);position:absolute;top:100%;z-index:10;gap:var(--spacing-none);transition:1s ease-in-out}";
 
@@ -89,7 +89,7 @@ const TestInputTag$1 = /*@__PURE__*/ proxyCustomElement(class TestInputTag exten
         this.exportValue.emit(this.selectedStaff);
     }
     render() {
-        return (h("div", { key: '569fd8b6c2ff8d2ec7282166a87404b15344e790', class: "input_group", ref: el => (this.inputGroupElement = el) }, h("label", { key: 'f4c2d000fe03da6cf8dd86467319b8e586669be8', htmlFor: this.idOfInput }, this.labelText), h("div", { key: '2b651323119dab59cb949a85df158c53a6f9a0ca', class: "input_like_parent", onClick: () => (this.dropdownOpen = !this.dropdownOpen) }, h("input", { key: '30fca2c0b86e8a42e18668dae9edff1c4443b6c9', id: this.idOfInput, class: "input_like", type: "text", placeholder: this.placeholderText, value: this.inputValue, readOnly: this.isReadOnly, ref: el => (this.inputElement = el), onBlur: () => this.exportSelectedStaff() }), h("div", { key: '2f90f385f91479210fb3c787d0bcded32056e9a0', class: `results_display ${this.selectedStaff.length >= 1 ? 'show_results' : ''}`, ref: el => (this.resultsDisplayElement = el) }, this.selectedStaff.map((staff, index) => (
+        return (h("div", { key: 'e9a62d1f71cfe6726c19780b7e54e4b8fce5da7d', class: "input_group", ref: el => (this.inputGroupElement = el) }, h("label", { key: 'e9ea8c2f7b9e580ea0cefe0572d91f6959455f98', htmlFor: this.idOfInput }, this.labelText), h("div", { key: '3a29ecac78632b6cb45cc3bcbc2d8d89c8e17eb4', class: "input_like_parent", onClick: () => (this.dropdownOpen = !this.dropdownOpen) }, h("input", { key: 'ad79c1fc70e7eb48e0c3e54ffa4466a7c2201a1f', id: this.idOfInput, class: "input_like", type: "text", placeholder: this.placeholderText, value: this.inputValue, readOnly: this.isReadOnly, ref: el => (this.inputElement = el), onBlur: () => this.exportSelectedStaff() }), h("div", { key: '36b5d2eb33af4cd31516293add5bc2b32843131d', class: `results_display ${this.selectedStaff.length >= 1 ? 'show_results' : ''}`, ref: el => (this.resultsDisplayElement = el) }, this.selectedStaff.map((staff, index) => (
         //   <span>
         //     {staff.fullname}
         //     <img
@@ -98,7 +98,7 @@ const TestInputTag$1 = /*@__PURE__*/ proxyCustomElement(class TestInputTag exten
         //       onClick={() => this.removeStaff(index)}
         //     />
         //   </span>
-        h("gb-tag", { size: "sm", action: "X_close", icon: "avatar", onClick: () => this.removeStaff(index) }, h("h1", { slot: "initials" }, staff.fullname.split(' ').map(part => part.charAt(0).toUpperCase())), h("p", null, staff.fullname.split(' ')[0])))))), this.show && (h("div", { key: 'b21fb7a33a6c5548afb81dcb04e0a8c1557b01e3', class: `dropdown_menu ${this.show ? 'show' : ''}` }, this.staffInfo.map(staff => (
+        h("gb-tag", { size: "sm", action: "X_close", icon: "avatar", onClick: () => this.removeStaff(index) }, h("h1", { slot: "initials" }, staff.fullname.split(' ').map(part => part.charAt(0).toUpperCase())), h("p", null, staff.fullname.split(' ')[0])))))), this.show && (h("div", { key: 'ea276f5e8bdb9131f252e3787a383c2b1af3a740', class: `dropdown_menu ${this.show ? 'show' : ''}` }, this.staffInfo.map(staff => (
         //   <li class="aList" onClick={() => this.selectStaff(staff)}>
         //     <div>{staff.fullname}</div>
         //     <div>{staff.email}</div>