@dubai-design-system/components-js 4.1.0 → 5.0.0

package/dist/esm/dda-radiobutton.entry.js.map

@@ -1 +0,0 @@
-{"file":"dda-radiobutton.entry.js","mappings":";;AAAA,MAAM,iBAAiB,GAAG,481DAA481D,CAAC;AACv+1D,6BAAe,iBAAiB;;MCMnB,cAAc;IAL3B;;QAcU,iBAAY,GAAY,EAAE,CAAC;KA6BpC;IAzBC,MAAM;QACJ,MAAM,gBAAgB,GAAG;YACvB,qBAAqB;YACrB,IAAI,CAAC,IAAI,GAAG,aAAa,IAAI,CAAC,IAAI,EAAE,GAAG,EAAE;YACzC,IAAI,CAAC,QAAQ,GAAG,aAAa,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAE;YACjD,IAAI,CAAC,YAAY,GAAG,aAAa,IAAI,CAAC,YAAY,EAAE,GAAG,EAAE;YACzD,IAAI,CAAC,YAAY,GAAG,aAAa,IAAI,CAAC,YAAY,EAAE,GAAG,EAAE;YACzD,IAAI,CAAC,cAAc;SACpB,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QAE5B,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAE,gBAAgB,IAC1B,4EAAmB,IAAI,CAAC,UAAU,EAAE,IAAI,EAAC,OAAO,EAAC,EAAE,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAE,IAAI,CAAC,UAAU,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,GAAG,EACnH,8DAAO,OAAO,EAAE,IAAI,CAAC,QAAQ,IAC3B,6DAAM,KAAK,EAAC,cAAc,GAAQ,EAClC,4DACE,6DAAM,KAAK,EAAC,aAAa,IAAE,IAAI,CAAC,UAAU,CAAQ,EACjD,IAAI,CAAC,UAAU,IAAI,6DAAM,KAAK,EAAC,kBAAkB,IAAE,IAAI,CAAC,UAAU,CAAQ,CACzE,CACE,CACJ,CACD,EACP;KACH;;;;;;","names":[],"sources":["src/components/dda-radiobutton/dda-radiobutton.css?tag=dda-radiobutton","src/components/dda-radiobutton/dda-radiobutton.tsx"],"sourcesContent":["@import url('../../global/global.css'); \r\n\r\n.dda-radio-container {\r\n  display: inline-flex;\r\n  align-items: center;\r\n}\r\n.dda-radio-container input[type=\"radio\"]{\r\n  width: 0;\r\n  height: 0;\r\n  position: absolute;\r\n  opacity: 0;\r\n}\r\n.dda-radio-container label {\r\n  cursor: pointer;\r\n  display: inline-flex;\r\n  align-items: flex-start;\r\n  gap: 10px;\r\n}\r\n.dda-radio-container .radio-circle{\r\n  display: inline-block;\r\n  margin-top: 2px;\r\n  background: var(--dda-neutral-100);\r\n  border-radius: 50px;\r\n  box-shadow: 0px 0px 0px 2px var(--dda-color-primary-40) inset, 0px 0px 0px 5px var(--dda-neutral-100) inset;\r\n}\r\n.light-mode.dda-radio-container .radio-circle{\r\n  box-shadow: 0px 0px 0px 2px var(--dda-primary-40) inset, 0px 0px 0px 5px var(--dda-neutral-100) inset;\r\n}\r\n.dda-radio-container input[type=\"radio\"]:checked~label .radio-circle{\r\n  background: var(--dda-color-primary-40);\r\n  box-shadow: 0px 0px 0px 2px var(--dda-color-primary-40) inset, 0px 0px 0px 5px var(--dda-primary-95) inset;\r\n}\r\n.light-mode.dda-radio-container input[type=\"radio\"]:checked~label .radio-circle{\r\n  background: var(--dda-primary-40);\r\n  box-shadow: 0px 0px 0px 2px var(--dda-primary-40) inset, 0px 0px 0px 5px var(--dda-primary-95) inset;\r\n}\r\n.dda-radio-container input[type=\"radio\"]:checked:focus-within~label .radio-circle{\r\n  background: var(--dda-color-primary-40);\r\n  box-shadow: 0px 0px 0px 2px var(--dda-color-primary-40) inset, 0px 0px 0px 5px var(--dda-primary-95) inset, 0px 0px 0px 3px var(--dda-primary-95);\r\n}\r\n.light-mode.dda-radio-container input[type=\"radio\"]:checked:focus-within~label .radio-circle{\r\n  background: var(--dda-primary-40);\r\n  box-shadow: 0px 0px 0px 2px var(--dda-primary-40) inset, 0px 0px 0px 5px var(--dda-primary-95) inset, 0px 0px 0px 3px var(--dda-primary-95);\r\n}\r\n\r\n.dda-radio-outlined .radio-circle{\r\n  background: var(--dda-neutral-100);\r\n  box-shadow: 0px 0px 0px 2px var(--dda-surface-90) inset;\r\n}\r\n.light-mode.dda-radio-outlined .radio-circle{\r\n  box-shadow: 0px 0px 0px 2px var(--dda-neutral-90) inset;\r\n}\r\n.dda-radio-outlined input[type=\"radio\"]:checked~label .radio-circle{\r\n  box-shadow: 0px 0px 0px 2px var(--dda-color-primary-40) inset, 0px 0px 0px 5px var(--dda-surface-100) inset;\r\n}\r\n.dda-radio-outlined input[type=\"radio\"]:checked:focus-within~label .radio-circle{\r\n  box-shadow: 0px 0px 0px 2px var(--dda-color-primary-40) inset, 0px 0px 0px 5px var(--dda-surface-100) inset, 0px 0px 0px 3px var(--dda-primary-95);\r\n}\r\n\r\n\r\n.dda-radio-faded .radio-circle{\r\n  background: var(--dda-neutral-90);\r\n  box-shadow: 0px 0px 0px 2px var(--dda-neutral-90) inset, 0px 0px 0px 5px var(--dda-neutral-100) inset;\r\n}\r\n.dda-radio-faded input[type=\"radio\"]:checked~label .radio-circle{\r\n  box-shadow: 0px 0px 0px 2px var(--dda-neutral-90) inset, 0px 0px 0px 5px var(--dda-neutral-100) inset;\r\n}\r\n.dda-radio-faded input[type=\"radio\"]:checked:focus-within~label .radio-circle{\r\n  box-shadow: 0px 0px 0px 2px var(--dda-neutral-90) inset, 0px 0px 0px 5px var(--dda-neutral-100) inset, 0px 0px 0px 3px #F2F4F3;\r\n\r\n}\r\n\r\n\r\n.dda-radio-sm .radio-circle{\r\n  width: 17px;\r\n  height: 17px;\r\n}\r\n.dda-radio-md .radio-circle{\r\n  width: 21px;\r\n  height: 21px;\r\n}\r\n.dda-radio-lg .radio-circle{\r\n  width: 23px;\r\n  height: 23px;\r\n}\r\n\r\n.dda-radio-container label p{\r\n  margin: 0px;\r\n}\r\n.radio-title {\r\n  font-size: var(--dda-fs-body-lg);\r\n  color: var(--dda-on-surface-0);\r\n  font-weight: var(--dda-fw-500);\r\n  display: block;\r\n}\r\n.light-mode .radio-title{\r\n  color: var(--dda-neutral-0);\r\n}\r\n.dda-radio-lg label .radio-title{\r\n  font-size: var(--dda-fs-title-sm);\r\n}\r\n.radio-supporting {\r\n  display: block;\r\n  font-size: var(--dda-fs-label-lg);\r\n  color: var(--dda-on-surface-variant-30);\r\n}\r\n.light-mode .radio-supporting {\r\n  color: var(--dda-neutral-variant-30);\r\n}\r\n.dda-radio-lg label .radio-supporting{\r\n  font-size: var(--dda-fs-body-lg);\r\n}\r\n\r\n.dda-radio-disabled{\r\n  pointer-events: none;\r\n}\r\n.dda-radio-container.dda-radio-disabled .radio-circle{\r\n  box-shadow: 0px 0px 0px 2px var(--dda-neutral-90) inset, 0px 0px 0px 5px var(--dda-neutral-100) inset;\r\n}\r\n\r\n\r\n\r\n\r\n\r\n","import { Component, Prop, h, Host } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'dda-radiobutton',\r\n  styleUrl: 'dda-radiobutton.css',\r\n  shadow: false,\r\n})\r\nexport class DdaRadiobutton {\r\n  @Prop() title_text: string;\r\n  @Prop() supporting?: string;\r\n  @Prop() group_name?: string;\r\n  @Prop() input_id?: string;\r\n  @Prop() checked: boolean;\r\n  @Prop() radio_status?: string;\r\n  @Prop() size?: string; // e.g., 'sm', 'md', 'lg'\r\n  @Prop() variants?: string; // e.g., 'sm', 'md', 'lg'\r\n  @Prop() custom_class?: string = ''; \r\n  @Prop() component_mode?: string; \r\n  @Prop() aria_label?: string;\r\n  \r\n  render() {\r\n    const radiobuttonClass = [\r\n      'dda-radio-container',\r\n      this.size ? `dda-radio-${this.size}` : '',\r\n      this.variants ? `dda-radio-${this.variants}` : '',\r\n      this.custom_class ? `dda-radio-${this.custom_class}` : '',\r\n      this.radio_status ? `dda-radio-${this.radio_status}` : '',\r\n      this.component_mode,\r\n    ].filter(Boolean).join(' ');\r\n    \r\n    return (\r\n      <Host>\r\n        <div class={radiobuttonClass}>\r\n          <input aria-label={this.aria_label} type=\"radio\" id={this.input_id} name={this.group_name} checked={this.checked}/>\r\n          <label htmlFor={this.input_id}>\r\n            <span class=\"radio-circle\"></span>\r\n            <p>\r\n              <span class=\"radio-title\">{this.title_text}</span>\r\n              {this.supporting && <span class=\"radio-supporting\">{this.supporting}</span>}\r\n            </p>\r\n          </label>\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n\r\n"],"version":3}

package/dist/esm/dda-range-slider.entry.js.map

@@ -1 +0,0 @@
-{"file":"dda-range-slider.entry.js","mappings":";;AAAA,MAAM,iBAAiB,GAAG,8tFAA8tF,CAAC;AACzvF,6BAAe,iBAAiB;;MCMnB,cAAc;IAL3B;;QAMU,QAAG,GAAW,CAAC,CAAC;QAChB,QAAG,GAAW,GAAG,CAAC;QAClB,SAAI,GAAW,CAAC,CAAC;QACjB,gBAAW,GAAW,CAAC,CAAC;QACxB,gBAAW,GAAW,GAAG,CAAC;QAK1B,iBAAY,GAAY,EAAE,CAAC;KA8EpC;IAvEC,iBAAiB;QACf,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,WAAW,CAAC;QAClC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,WAAW,CAAC;KACnC;IAED,eAAe,CAAC,KAAK;QACnB,MAAM,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QACzC,IAAI,KAAK,IAAI,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,IAAI,EAAE;YACvC,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;SACxB;KACF;IAED,eAAe,CAAC,KAAK;QACnB,MAAM,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QACzC,IAAI,KAAK,IAAI,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,IAAI,EAAE;YACvC,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;SACxB;KACF;IAED,aAAa,CAAC,KAAa;QACzB,OAAO,CAAC,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,KAAK,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,GAAG,CAAC;KAC3D;IAED,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAE,0CAA0C,IAAI,CAAC,gBAAgB,IAAI,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,cAAc,EAAE,IACvH,4DAAK,KAAK,EAAC,kBAAkB,IAC3B,4DAAK,KAAK,EAAC,wBAAwB,EACjC,KAAK,EAAE;gBACL,IAAI,EAAE,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG;gBAC9C,KAAK,EAAE,GAAG,GAAG,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG;aACtD,IACD,6DAAM,KAAK,EAAC,WAAW,IAAE,IAAI,CAAC,SAAS,MAAS,EAChD,6DAAM,KAAK,EAAC,WAAW,IAAE,IAAI,CAAC,SAAS,MAAS,CAC5C,EACN,8DAAO,OAAO,EAAE,IAAI,CAAC,aAAa,IAChC,8DACE,EAAE,EAAE,IAAI,CAAC,aAAa,gBACV,IAAI,CAAC,eAAe,EAChC,IAAI,EAAC,OAAO,EACZ,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,SAAS,EACrB,OAAO,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,EAC/C,KAAK,EAAC,wBAAwB,EAC9B,KAAK,EAAE,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,SAAS,GAAG,CAAC,GAAG,CAAC,EAAE,EAAE,GAC1E,CACI,EACR,8DAAO,OAAO,EAAE,IAAI,CAAC,cAAc,IACjC,8DACE,EAAE,EAAE,IAAI,CAAC,cAAc,gBACX,IAAI,CAAC,gBAAgB,EACjC,IAAI,EAAC,OAAO,EACZ,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,SAAS,EACrB,OAAO,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,EAC/C,KAAK,EAAC,wBAAwB,EAC9B,KAAK,EAAE,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,SAAS,GAAG,CAAC,GAAG,CAAC,EAAE,EAAE,GAC1E,CACI,CAEJ,CAEF,CACD,EACP;KACH;;;;;;","names":[],"sources":["src/components/dda-range-slider/dda-range-slider.css?tag=dda-range-slider","src/components/dda-range-slider/dda-range-slider.tsx"],"sourcesContent":[".dda-range-slider-container {\r\n  width: 100%;\r\n  margin: 20px 0;\r\n  position: relative;\r\n}\r\n\r\n.dda-range-slider {\r\n  position: relative;\r\n  width: 100%;\r\n  height: 6px;\r\n  background: var(--dda-neutral-variant-92);\r\n  border-radius: 5px;\r\n}\r\n\r\n.dda-range-slider-input {\r\n  position: absolute;\r\n  width: 100%;\r\n  height: 6px;\r\n  background: transparent;\r\n  -webkit-appearance: none;\r\n  appearance: none;\r\n  pointer-events: none;\r\n  border: 0;\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\n\r\n.dda-range-slider-input::-webkit-slider-thumb {\r\n  -webkit-appearance: none;\r\n  appearance: none;\r\n  width: 22px;\r\n  height: 22px;\r\n  border-radius: 50%;\r\n  background: var(--dda-neutral-100);\r\n  border: solid 2px var(--dda-neutral-90);\r\n  cursor: pointer;\r\n  pointer-events: all;\r\n}\r\n\r\n.dda-range-slider-input::-moz-range-thumb {\r\n  width: 20px;\r\n  height: 20px;\r\n  border: 0;\r\n  border-radius: 50%;\r\n  background: var(--dda-color-primary-40);\r\n  cursor: pointer;\r\n  pointer-events: all;\r\n  -moz-transition: all 0.15s ease-in-out;\r\n  transition: all 0.15s ease-in-out;\r\n}\r\n\r\n.dda-range-slider-track {\r\n  position: absolute;\r\n  height: 100%;\r\n  background: var(--dda-color-primary-40);\r\n  border-radius: 5px;\r\n}\r\n\r\n.light-mode .dda-range-slider-track{\r\n  background: var(--dda-primary-40);\r\n}\r\n\r\n.dda-range-slider-track span {\r\n  background: var(--dda-neutral-100);\r\n  width: 55px;\r\n  height: 35px;\r\n  font-size: 16px;\r\n  color: var(--dda-on-surface-variant-30);\r\n  font-weight: var(--dda-fw-500);\r\n  text-align: center;\r\n  position: absolute;\r\n  top: 13px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n\r\n.light-mode .dda-range-slider-track span{\r\n  color: var(--dda-neutral-variant-30);\r\n}\r\n\r\n.dda-tooltip-top .dda-range-slider-track span{\r\n  top: auto;\r\n  bottom: 24px;\r\n}\r\n.dda-tooltip-bottom .dda-range-slider-track span{\r\n  top: 24px;\r\n}\r\n.dda-range-slider-track .min-label {\r\n  left: -17px;\r\n}\r\n\r\n.dda-range-slider-track .max-label {\r\n  right: -33px;\r\n}\r\n\r\n.dda-tooltip-top .dda-range-slider-track span,\r\n.dda-tooltip-bottom .dda-range-slider-track span{\r\n  border: solid 1px var(--dda-neutral-90);\r\n  border-radius: 4px;\r\n  -webkit-box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.04);\r\n  -moz-box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.04);\r\n  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.04);\r\n}\r\n.dda-tooltip-top .dda-range-slider-track span::before, \r\n.dda-tooltip-top .dda-range-slider-track span::after,\r\n.dda-tooltip-bottom .dda-range-slider-track span::before, \r\n.dda-tooltip-bottom .dda-range-slider-track span::after {\r\n  content: \"\";\r\n  position: absolute;\r\n  border-left: 10px solid transparent;\r\n  border-right: 10px solid transparent;\r\n  left: 50%;\r\n  margin-inline-start: -10px;\r\n}\r\n.dda-tooltip-top .dda-range-slider-track span::before {\r\n  top: 100%;\r\n  border-top: 8px solid var(--dda-neutral-90);\r\n  margin-top: 0px;\r\n}\r\n.dda-tooltip-top .dda-range-slider-track span::after {\r\n  top: 100%;\r\n  border-top: 8px solid var(--dda-neutral-100);\r\n  margin-top: -2px;\r\n  z-index: 1;\r\n}\r\n.dda-tooltip-bottom .dda-range-slider-track span::before {\r\n  bottom: 100%;\r\n  border-bottom: 8px solid var(--dda-neutral-90);\r\n  margin-bottom: 0px;\r\n}\r\n.dda-tooltip-bottom .dda-range-slider-track span::after {\r\n  bottom: 100%;\r\n  border-bottom: 8px solid var(--dda-neutral-100);\r\n  margin-bottom: -2px;\r\n  z-index: 1;\r\n}","import { Component, Prop, State, h, Host } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'dda-range-slider',\r\n  styleUrl: 'dda-range-slider.css',\r\n  shadow: false,\r\n})\r\nexport class DdaRangeSlider {\r\n  @Prop() min: number = 0;\r\n  @Prop() max: number = 100;\r\n  @Prop() step: number = 1;\r\n  @Prop() initial_min: number = 0;\r\n  @Prop() initial_max: number = 100;\r\n  @Prop() size?: string;\r\n  @Prop() tooltip_position?: string;\r\n  @State() min_value: number;\r\n  @State() max_value: number;\r\n  @Prop() custom_class?: string = ''; \r\n  @Prop() component_mode?: string; \r\n  @Prop() left_input_id: string;\r\n  @Prop() right_input_id: string;\r\n  @Prop() left_aria_label?: string;\r\n  @Prop() right_aria_label?: string;\r\n\r\n  componentWillLoad() {\r\n    this.min_value = this.initial_min;\r\n    this.max_value = this.initial_max;\r\n  }\r\n\r\n  handleMinChange(event) {\r\n    const value = Number(event.target.value);\r\n    if (value <= this.max_value - this.step) {\r\n      this.min_value = value;\r\n    }\r\n  }\r\n\r\n  handleMaxChange(event) {\r\n    const value = Number(event.target.value);\r\n    if (value >= this.min_value + this.step) {\r\n      this.max_value = value;\r\n    }\r\n  }\r\n\r\n  getPercentage(value: number) {\r\n    return ((value - this.min) / (this.max - this.min)) * 100;\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <div class={`dda-range-slider-container dda-tooltip-${this.tooltip_position} ${this.custom_class} ${this.component_mode}`}>\r\n          <div class=\"dda-range-slider\">\r\n            <div class=\"dda-range-slider-track\"\r\n              style={{\r\n                left: `${this.getPercentage(this.min_value)}%`,\r\n                right: `${100 - this.getPercentage(this.max_value)}%`,\r\n              }}>\r\n              <span class=\"min-label\">{this.min_value}%</span>\r\n              <span class=\"max-label\">{this.max_value}%</span>\r\n            </div>\r\n            <label htmlFor={this.left_input_id}>\r\n              <input\r\n                id={this.left_input_id}\r\n                aria-label={this.left_aria_label}\r\n                type=\"range\"\r\n                min={this.min}\r\n                max={this.max}\r\n                step={this.step}\r\n                value={this.min_value}\r\n                onInput={(event) => this.handleMinChange(event)}\r\n                class=\"dda-range-slider-input\"\r\n                style={{ zIndex: `${this.min_value > this.max - this.min_value ? 5 : 3}` }}\r\n              />\r\n            </label>\r\n            <label htmlFor={this.right_input_id}>\r\n              <input\r\n                id={this.right_input_id}\r\n                aria-label={this.right_aria_label}\r\n                type=\"range\"\r\n                min={this.min}\r\n                max={this.max}\r\n                step={this.step}\r\n                value={this.max_value}\r\n                onInput={(event) => this.handleMaxChange(event)}\r\n                class=\"dda-range-slider-input\"\r\n                style={{ zIndex: `${this.max_value < this.max - this.min_value ? 5 : 3}` }}\r\n              />\r\n            </label>\r\n            \r\n          </div>\r\n          \r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/esm/dda-search-input.entry.js.map

@@ -1 +0,0 @@
-{"file":"dda-search-input.entry.js","mappings":";;AAAA,MAAM,QAAQ,GAAG,4pWAA4pW,CAAC;AAC9qW,6BAAe,QAAQ;;ACDvB,MAAM,SAAS,GAAG,y6uDAAy6uD,CAAC;AAC57uD,6BAAe,SAAS;;ACDxB,MAAM,YAAY,GAAG,64ZAA64Z,CAAC;AACn6Z,6BAAe,YAAY;;MCMd,cAAc;IAL3B;;QAMU,gBAAW,GAAW,QAAQ,CAAC;QAE/B,SAAI,GAAW,IAAI,CAAC;QAEpB,gBAAW,GAAY,KAAK,CAAC;QAG7B,cAAS,GAAY,KAAK,CAAC;QAC3B,iBAAY,GAAY,EAAE,CAAC;KAoCpC;IA5BC,UAAU;QACR,MAAM,KAAK,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,SAAS,CAAqB,CAAC;QACnE,IAAI,KAAK,EAAE;YACT,KAAK,CAAC,KAAK,GAAG,EAAE,CAAC;SAClB;KACF;IAED,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAE,sCAAsC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,YAAY,KAAK,IAAI,CAAC,YAAY,GAAG,aAAa,IAAI,CAAC,YAAY,EAAE,GAAG,EAAE,IAAI,IAAI,CAAC,SAAS,GAAG,sBAAsB,GAAG,EAAE,EAAE,IACpN,IAAI,CAAC,KAAK,IAAI,8DAAO,OAAO,EAAE,IAAI,CAAC,SAAS,EAAE,KAAK,EAAC,iBAAiB,IAAE,IAAI,CAAC,KAAK,CAAS,EAC3F,4DAAK,KAAK,EAAC,mCAAmC,IAC5C,0DAAG,KAAK,EAAC,0BAA0B,aAAW,EAC9C,4EAAmB,IAAI,CAAC,UAAU,EAAE,EAAE,EAAC,QAAQ,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,kCAAkC,EAAC,WAAW,EAAE,IAAI,CAAC,WAAW,GAAG,EACrI,4DAAK,KAAK,EAAC,qBAAqB,IAC9B,6EAAoB,IAAI,CAAC,iBAAiB,EAAE,EAAE,EAAE,IAAI,CAAC,SAAS,EAAE,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,YAAY,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,UAAU,EAAE,IAAE,0DAAG,KAAK,EAAC,gBAAgB,YAAU,CAAS,EAC9K,IAAI,CAAC,WAAW,KACf,+DAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,8CAA8C,aAAgB,CAC3F,CACG,CACF,EACL,IAAI,CAAC,WAAW,IAAI,6DAAM,KAAK,EAAC,iBAAiB,IAAE,IAAI,CAAC,WAAW,CAAQ,EAC3E,IAAI,CAAC,aAAa,IAAI,6DAAM,KAAK,EAAC,mBAAmB,IAAE,IAAI,CAAC,aAAa,CAAQ,CAC9E,CACD,EACP;KACH;;;;;;;","names":[],"sources":["src/global/input.css?tag=dda-search-input","src/global/global.css?tag=dda-search-input","src/global/dda-button.css?tag=dda-search-input","src/components/dda-search-input/dda-search-input.tsx"],"sourcesContent":[".dda-input-container {\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 8px;\r\n    position: relative;\r\n}\r\n\r\n.dda-input-label {\r\n    font-size: var(--dda-fs-title-sm);\r\n    color: var(--dda-on-surface-0);\r\n    line-height: 22px;\r\n    font-weight: var(--dda-fw-400);\r\n}\r\n.light-mode .dda-input-label {\r\n    color: var(--dda-neutral-0);\r\n}\r\n.dda-input-field-wrapper {\r\n    position: relative;\r\n}\r\n\r\n.dda-field-group-input {\r\n    height: 32px;\r\n    background-color: transparent;\r\n    flex: 1;\r\n    font-size: var(--dda-fs-body-lg);\r\n    font-weight: var(--dda-fw-400);\r\n    padding: 0px;\r\n    color: var(--dda-on-surface-0);\r\n    border: none;\r\n    outline: none;\r\n}\r\n.light-mode .dda-field-group-input{\r\n    color: var(--dda-neutral-0);\r\n} \r\n.dda-input-field-group {\r\n    width: 100%;\r\n    height: 55px;\r\n    padding: 8px 16px;\r\n    background: var(--dda-surface-100);\r\n    border: 1px solid var(--dda-surface-90);\r\n    border-radius: 8px;\r\n    font-size: var(--dda-fs-body-lg);\r\n    color: var(--dda-on-surface-0);\r\n    position: relative;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 10px;\r\n}\r\n.light-mode .dda-input-field-group{\r\n    background: var(--dda-neutral-100);\r\n    border: 1px solid var(--dda-neutral-90);\r\n    color: var(--dda-neutral-0);\r\n}\r\n.dda-input-field {\r\n    width: 100%;\r\n    height: 55px;\r\n    padding: 8px 16px;\r\n    background: var(--dda-surface-100);\r\n    border: 1px solid var(--dda-surface-90);\r\n    border-radius: 8px;\r\n    font-size: var(--dda-fs-body-lg);\r\n    color: var(--dda-on-surface-0);\r\n    font-weight: var(--dda-fw-400);\r\n}\r\n.light-mode .dda-input-field{\r\n    background: var(--dda-neutral-100);\r\n    border: 1px solid var(--dda-neutral-90);\r\n    color: var(--dda-neutral-0);\r\n}\r\n.dda-input-size-small .dda-input-field-group,\r\n.dda-input-size-small .dda-input-field {\r\n    height: 48px;\r\n    padding: 8px 12px;\r\n}\r\n\r\n.dda-input-focus-filled .dda-phone-field,\r\n.dda-input-focus .dda-input-field-group,\r\n.dda-input-field:focus {\r\n    outline: none;\r\n    border-color: var(--dda-color-primary-40);\r\n    box-shadow: 0px 0px 0px 3px var(--dda-primary-variant-95);\r\n}\r\n.light-mode.dda-input-focus-filled .dda-phone-field,\r\n.light-mode.dda-input-focus .dda-input-field-group,\r\n.light-mode .dda-input-field:focus {\r\n    outline: none;\r\n    border-color: var(--dda-primary-40);\r\n    box-shadow: 0px 0px 0px 3px var(--dda-primary-95);\r\n}\r\n\r\n.dda-input-dropdown-btn {\r\n    min-width: 110px;\r\n    position: relative;\r\n    display: inline-block;\r\n    padding: 0;\r\n}\r\n\r\n.dda-dropdown-select {\r\n    width: 100%;\r\n    height: 32px;\r\n    display: flex;\r\n    justify-content: space-between;\r\n    background: transparent;\r\n    border: transparent;\r\n    font-size: var(--dda-fs-body-lg);\r\n    color: var(--dda-on-surface-0);\r\n    padding: 0;\r\n    align-items: center;\r\n    cursor: pointer;\r\n    gap: 6px;\r\n}\r\n.light-mode .dda-dropdown-select{\r\n    color: var(--dda-neutral-0);\r\n}\r\n\r\n.dda-dropdown-select img {\r\n    width: 24px;\r\n}\r\n\r\n\r\n.dda-dropdown-container {\r\n    position: relative;\r\n    width: auto;\r\n    /* min-width: 140px; */\r\n}\r\n.dda-dropdown-container.bg-transparent .dda-dropdown-header{\r\n    padding: 0px;\r\n    height: auto;\r\n    background: transparent;\r\n    border: transparent;\r\n    box-shadow: none;\r\n}\r\n.dda-dropdown-header {\r\n    width: auto;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 15px;\r\n}\r\n.dda-dropdown-header .three-dots{\r\n    font-size: 25px;\r\n    color: var(--dda-neutral-variant-60);\r\n}\r\n.dda-dropdown-header .three-dots path{\r\n    fill: var(--dda-neutral-variant-60);\r\n}\r\n.dda-dropdown-header .dda-dropdown-text{\r\n    flex: 1;\r\n    display: flex;\r\n    justify-content: space-between;\r\n    gap: 15px;\r\n}\r\n.dda-dropdown-header .dda-dropdown-text span{\r\n    color: var(--dda-on-surface-variant-30);\r\n    display: flex;\r\n    align-items: center;\r\n}\r\n.light-mode .dda-dropdown-text span{\r\n    color: var(--dda-neutral-variant-30);\r\n}\r\n.dda-dropdown-header .dda-dropdown-text i{\r\n    font-size: 31px;\r\n}\r\n.dda-dropdown-header .dda-dropdown-text path{\r\n    fill: var(--dda-on-surface-variant-30);\r\n}\r\n.light-mode .dda-dropdown-header .dda-dropdown-text path{\r\n    fill: var(--dda-neutral-variant-30);\r\n}\r\n.dda-dropdown-header:focus .three-dots path{\r\n    fill: var(--dda-on-surface-variant-30);\r\n}\r\n.dda-input-dropdown-list {\r\n    width: 100%;\r\n    min-width: 150px;\r\n    max-height: 200px;\r\n    background-color: var(--dda-neutral-100);\r\n    border: 1px solid var(--dda-neutral-90);\r\n    border-radius: 8px;\r\n    overflow-y: auto;\r\n    position: absolute;\r\n    top: 100%;\r\n    margin-top: 1px;\r\n    inset-inline-start: 0px;\r\n    z-index: 9999;\r\n    box-shadow: 0px 8px 10px -6px #1018281A;\r\n}\r\n\r\n.dda-input-dropdown-list::-webkit-scrollbar-track {\r\n    border-radius: 4px;\r\n}\r\n\r\n.dda-input-dropdown-list::-webkit-scrollbar {\r\n    width: 4px;\r\n}\r\n\r\n.dda-input-dropdown-list::-webkit-scrollbar-thumb {\r\n    border-radius: 4px;\r\n    background-color: var(--dda-neutral-variant-30);\r\n}\r\n\r\n.dda-input-dropdown-item {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 7px;\r\n    width: 100%;\r\n    font-size: var(--dda-fs-body-lg);\r\n    background: transparent;\r\n    border: transparent;\r\n    padding: 10px;\r\n    cursor: pointer;\r\n}\r\n\r\n.dda-input-dropdown-item:focus-visible,\r\n.dda-input-dropdown-item:hover {\r\n    background-color: var(--dda-neutral-variant-95);\r\n    outline: 0;\r\n}\r\n\r\n.dda-helper-text {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n    font-size: var(--dda-fs-body-md);\r\n    color: var(--dda-on-surface-variant-30);\r\n}\r\n.light-mode .dda-helper-text{\r\n    color: var(--dda-neutral-30);\r\n}\r\n.dda-error-message {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    font-size: var(--dda-fs-body-md);\r\n    color: var(--dda-color-error-40);\r\n}\r\n\r\n.dda-helper-text i,\r\n.dda-helper-text svg,\r\n.dda-error-message i,\r\n.dda-error-message svg  {\r\n    font-size: 24px;\r\n}\r\n\r\n.dda-validation-error .dda-input-field-group,\r\n.dda-validation-error .dda-input-field {\r\n    color: var(--dda-color-error-40);\r\n    border-color: var(--dda-color-error-40);\r\n    box-shadow: none;\r\n}\r\n\r\n.light-mode.dda-validation-error .dda-input-field-group,\r\n.light-mode.dda-validation-error .dda-input-field {\r\n    color: var(--dda-error-40);\r\n    border-color: var(--dda-error-40);\r\n    box-shadow: none;\r\n}\r\n\r\n.dda-validation-error .icon-close,\r\n.dda-validation-error .dda-error-message,\r\n.dda-validation-error .dda-field-group-input,\r\n.dda-validation-error .dda-file-input span {\r\n    color: var(--dda-color-error-40) !important;\r\n}\r\n\r\n.light-mode.dda-validation-error .icon-close,\r\n.light-mode.dda-validation-error .dda-error-message,\r\n.light-mode.dda-validation-error .dda-field-group-input,\r\n.light-mode.dda-validation-error .dda-file-input span {\r\n    color: var(--dda-error-40) !important;\r\n}\r\n\r\n.dda-validation-error .dda-input-field::-ms-input-placeholder,\r\n.dda-validation-error .dda-field-group-input::-ms-input-placeholder {\r\n    color: var(--dda-color-error-40);\r\n}\r\n\r\n.light-mode.dda-validation-error .dda-input-field::-ms-input-placeholder,\r\n.light-mode.dda-validation-error .dda-field-group-input::-ms-input-placeholder {\r\n    color: var(--dda-error-40);\r\n}\r\n\r\n.dda-validation-error .dda-input-field::placeholder,\r\n.dda-validation-error .dda-field-group-input::placeholder {\r\n    color: var(--dda-color-error-40);\r\n}\r\n\r\n.light-mode.dda-validation-error .dda-input-field::placeholder,\r\n.light-mode.dda-validation-error .dda-field-group-input::placeholder {\r\n    color: var(--dda-error-40);\r\n}\r\n\r\n.dda-input-disabled .dda-input-label,\r\n.dda-input-disabled .dda-helper-text,\r\n.dda-input-disabled .dda-error-message,\r\n.dda-input-disabled i,\r\n.dda-input-disabled .dda-dropdown-select,\r\n.dda-input-disabled .dda-file-input span,\r\n.dda-input-disabled .dda-file-choose {\r\n    color: var(--dda-neutral-60) !important;\r\n}\r\n\r\n.dda-input-disabled .dda-input-field-group,\r\n.dda-input-disabled .dda-input-field {\r\n    background: var(--dda-neutral-92);\r\n    border-color: var(--dda-neutral-90);\r\n    color: var(--dda-neutral-60) !important;\r\n    box-shadow: none;\r\n    pointer-events: none;\r\n}\r\n.dda-input-disabled i{\r\n    color: var(--dda-neutral-variant-60);\r\n}\r\n.dda-input-disabled svg path{\r\n    fill: var(--dda-neutral-variant-60);\r\n}\r\n.dda-input-disabled .dda-input-field::-ms-input-placeholder {\r\n    color: var(--dda-neutral-60);\r\n}\r\n\r\n.dda-input-disabled .dda-input-field::placeholder {\r\n    color: var(--dda-neutral-60);\r\n}\r\n\r\n.dda-input-disabled .dda-btn {\r\n    background-color: var(--dda-neutral-70) !important;\r\n    border-color: var(--dda-neutral-70) !important;\r\n}\r\n\r\n.dda-input-disabled .dda-dropdown-select img,\r\n.dda-input-disabled .dda-input-field-wrapper img {\r\n    filter: grayscale(1);\r\n}\r\n\r\n/*Specifications*/\r\n\r\n/*Number Field*/\r\n.dda-number-field .dda-field-group-input {\r\n    padding-inline-end: 10px;\r\n    border-inline-end: solid 1px var(--dda-neutral-90);\r\n}\r\n\r\n.dda-number-field .dda-field-group-input:focus,\r\n.dda-phone-field .dda-field-group-input:focus {\r\n    border-inline-start: solid 1px var(--dda-color-primary-40);\r\n}\r\n\r\n.dda-number-field .dda-input-dropdown-btn {\r\n    min-width: 80px;\r\n}\r\n\r\n.dda-number-field .dda-input-dropdown-list {\r\n    top: 44px;\r\n}\r\n\r\n.dda-input-size-small .dda-number-field .dda-input-dropdown-list {\r\n    top: 41px;\r\n}\r\n\r\n/*text ares*/\r\n.dda-input-textarea {\r\n    height: auto;\r\n    min-height: 120px;\r\n    resize: vertical;\r\n}\r\n\r\n/*Search Field*/\r\n.dda-search-area {\r\n    position: relative;\r\n}\r\n\r\n.dda-search-area .icon-left {\r\n    position: absolute;\r\n    top: 16px;\r\n    inset-inline-start: 15px;\r\n    font-size: 24px;\r\n    color: var(--dda-on-surface-variant-30);\r\n}\r\n\r\n.light-mode .dda-search-area .icon-left{\r\n    color: var(--dda-neutral-variant-30);\r\n}\r\n\r\n.dda-input-size-small .dda-search-area .icon-left {\r\n    top: 14px;\r\n}\r\n\r\n.dda-search-area .dda-search-btngroup {\r\n    height: 40px;\r\n    position: absolute;\r\n    top: 7px;\r\n    inset-inline-end: 7px;\r\n    display: inline-flex;\r\n    align-items: center;\r\n}\r\n\r\n.dda-input-size-small .dda-search-btngroup {\r\n    top: 4px;\r\n}\r\n\r\n.dda-search-area .icon-close {\r\n    display: flex;\r\n    color: var(--dda-on-surface-variant-30);\r\n    font-size: 20px;\r\n    margin: 0px;\r\n    margin-inline-end: 15px;\r\n    padding: 0px;\r\n    background: none;\r\n    border: 0;\r\n    cursor: pointer;\r\n}\r\n\r\n.light-mode .dda-search-area .icon-close{\r\n    color: var(--dda-neutral-variant-30);\r\n}\r\n\r\n.dda-search-field {\r\n    padding: 8px 40px 8px 40px;\r\n}\r\n\r\n.dda-search-action .dda-search-field {\r\n    padding: 8px 110px 8px 40px;\r\n}\r\n\r\n.dda-search-sm .icon-left {\r\n    top: 14px;\r\n}\r\n\r\n.dda-search-sm .dda-search-btngroup {\r\n    top: 4px;\r\n}\r\n\r\n/*Phone Field*/\r\n.dda-phone-field-group {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n}\r\n\r\n.dda-phone-field-group.dda-phone-field-small {\r\n    height: 48px;\r\n}\r\n\r\n.dda-phone-field-group.focused,\r\n.dda-phone-field-group.filled {\r\n    outline: none;\r\n    border-color: var(--dda-color-primary-40);\r\n    box-shadow: 0px 0px 0px 3px var(--dda-primary-variant-95);\r\n}\r\n\r\n.dda-phone-field-group.error {\r\n    border-color: var(--dda-color-error-40);\r\n    box-shadow: none;\r\n}\r\n\r\n.phone-field-country-code {\r\n    border: none;\r\n    background: none;\r\n    margin-inline-end: 0.5rem;\r\n    font-size: 1rem;\r\n    color: var(--dda-on-surface-0);\r\n}\r\n\r\n.phone-field-country-code:focus-within {\r\n    outline: 0;\r\n}\r\n\r\n.dda-phone-field .dda-input-dropdown-list {\r\n    top: 44px;\r\n}\r\n\r\n.dda-input-size-small .dda-phone-field .dda-input-dropdown-list {\r\n    top: 41px;\r\n}\r\n\r\n/*Credit Card Field*/\r\n.dda-credit-card-field .dda-creditcard-icon {\r\n    width: 40px;\r\n    position: absolute;\r\n    top: 14px;\r\n    inset-inline-start: 15px;\r\n}\r\n\r\n.dda-input-size-small .dda-creditcard-icon {\r\n    top: 11px;\r\n}\r\n\r\n.dda-credit-card-field .dda-input-field {\r\n    padding: 8px 16px 8px 65px;\r\n}\r\n\r\n/*Select Field*/\r\n.dda-select-header {\r\n    cursor: pointer;\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n    gap: 10px;\r\n}\r\n\r\n.dda-select-header i {\r\n    font-size: 28px;\r\n    color: var(--dda-on-surface-variant-30);\r\n}\r\n\r\n/*Rich Text Editor*/\r\n.dda-input-container.dda-richtext-editor {\r\n    gap: 0px;\r\n}\r\n\r\n.dda-richtext-editor .dda-input-label {\r\n    margin-bottom: 8px;\r\n}\r\n\r\n.dda-richtext-editor .dda-helper-text,\r\n.dda-richtext-editor .dda-error-message {\r\n    margin-top: 8px;\r\n}\r\n\r\n.dda-richtext-editor .ql-toolbar.ql-snow {\r\n    border: 1px solid var(--dda-neutral-90) !important;\r\n    border-radius: 8px 8px 0 0;\r\n}\r\n\r\n.dda-richeditor-field {\r\n    border: 1px solid var(--dda-neutral-90) !important;\r\n    border-radius: 0 0 8px 8px;\r\n}\r\n\r\n.dda-richeditor-field .ql-editor {\r\n    height: 100px;\r\n    font-size: var(--dda-fs-body-lg);\r\n}\r\n\r\n/*Attach Files*/\r\n\r\n.dda-input-field-group.dda-attach-file {\r\n    padding-inline-end: 6px;\r\n}\r\n\r\n.dda-file-input {\r\n    width: 100%;\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n}\r\n\r\n.dda-file-input span {\r\n    font-size: var(--dda-fs-body-lg);\r\n    color: var(--dda-on-surface-variant-30);\r\n}\r\n.light-mode .dda-file-input span{\r\n    color: var(--dda-neutral-variant-30);\r\n}\r\n.dda-file-choose {\r\n    height: 40px;\r\n    background-color: var(--dda-neutral-100);\r\n    border: solid 1px var(--dda-neutral-90);\r\n    color: var(--dda-color-primary-40);\r\n    font-weight: var(--dda-fw-500);\r\n    padding: 8px 16px;\r\n    border-radius: 8px;\r\n    cursor: pointer;\r\n}\r\n\r\n.light-mode .dda-file-choose {\r\n    color: var(--dda-primary-40);\r\n}\r\n\r\n.dda-input-disabled .dda-file-choose {\r\n    background-color: var(--dda-neutral-95);\r\n}\r\n\r\n.dda-file-choose input {\r\n    display: none;\r\n}\r\n\r\n.dda-file-details {\r\n    width: 100%;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n    padding-inline-end: 10px;\r\n}\r\n\r\n.dda-file-icon {\r\n    width: 34px;\r\n    height: 34px;\r\n}\r\n\r\n.dda-items {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 8px;\r\n}\r\n.dda-file-details .remove-file{\r\n    margin: 0;\r\n    padding: 0;\r\n    background: transparent;\r\n    border: transparent;\r\n}\r\n.dda-file-details .remove-file svg{\r\n    font-size: var(--dda-fs-body-lg);\r\n}\r\n.dda-file-name {\r\n    font-size: var(--dda-fs-body-lg);\r\n}\r\n\r\n.dda-remove-file {\r\n    font-size: 20px;\r\n    background: transparent;\r\n    border: transparent;\r\n    color: var(--dda-on-surface-variant-30);\r\n    cursor: pointer;\r\n    padding: 0px;\r\n}\r\n\r\n","@import url('./color.css');\r\n@import url('./typography.css');\r\n@import url('./templates/cards.css');\r\n@import url('./templates/dda-grid.css');\r\n@import url('./templates/dashboard-navigation.css');\r\n@import url('./templates/dda-footer-main.css');\r\n@import url('./templates/side-navigation.css');\r\n@import url('./templates/table.css');\r\n@import url('./templates/website-footer.css');\r\n@import url('./templates/dda-header-main.css');\r\n\r\n@font-face {\r\n  font-family: \"Dubai\";\r\n  src: url(\"../assets/fonts/dubai/DubaiLight.eot\");\r\n  src: url(\"../assets/fonts/dubai/DubaiLight.eot\") format(\"embedded-opentype\"),\r\n    url(\"../assets/fonts/dubai/DubaiLight.woff2\") format(\"woff2\"),\r\n    url(\"../assets/fonts/dubai/DubaiLight.woff\") format(\"woff\"),\r\n    url(\"../assets/fonts/dubai/DubaiLight.ttf\") format(\"truetype\"),\r\n    url(\"../assets/fonts/dubai/DubaiLight.svg#DubaiLight\") format(\"svg\");\r\n  font-weight: 300;\r\n  font-style: normal;\r\n}\r\n\r\n@font-face {\r\n  font-family: \"Dubai\";\r\n  src: url(\"../assets/fonts/dubai/DubaiRegular.eot\");\r\n  src: url(\"../assets/fonts/dubai/DubaiRegular.eot\") format(\"embedded-opentype\"),\r\n    url(\"../assets/fonts/dubai/DubaiRegular.woff2\") format(\"woff2\"),\r\n    url(\"../assets/fonts/dubai/DubaiRegular.woff\") format(\"woff\"),\r\n    url(\"../assets/fonts/dubai/DubaiRegular.ttf\") format(\"truetype\"),\r\n    url(\"../assets/fonts/dubai/DubaiRegular.svg#DubaiRegular\") format(\"svg\");\r\n  font-weight: 400;\r\n  font-style: normal;\r\n}\r\n\r\n@font-face {\r\n  font-family: \"Dubai\";\r\n  src: url(\"../assets/fonts/dubai/DubaiMedium.eot\");\r\n  src: url(\"../assets/fonts/dubai/DubaiMedium.eot\") format(\"embedded-opentype\"),\r\n    url(\"../assets/fonts/dubai/DubaiMedium.woff2\") format(\"woff2\"),\r\n    url(\"../assets/fonts/dubai/DubaiMedium.woff\") format(\"woff\"),\r\n    url(\"../assets/fonts/dubai/DubaiMedium.ttf\") format(\"truetype\"),\r\n    url(\"../assets/fonts/dubai/DubaiMedium.svg#DubaiMedium\") format(\"svg\");\r\n  font-weight: 500;\r\n  font-style: normal;\r\n}\r\n\r\n@font-face {\r\n  font-family: \"Dubai\";\r\n  src: url(\"../assets/fonts/dubai/DubaiBold.eot\");\r\n  src: url(\"../assets/fonts/dubai/DubaiBold.eot\") format(\"embedded-opentype\"),\r\n    url(\"../assets/fonts/dubai/DubaiBold.woff2\") format(\"woff2\"),\r\n    url(\"../assets/fonts/dubai/DubaiBold.woff\") format(\"woff\"),\r\n    url(\"../assets/fonts/dubai/DubaiBold.ttf\") format(\"truetype\"),\r\n    url(\"../assets/fonts/dubai/DubaiBold.svg#DubaiBold\") format(\"svg\");\r\n  font-weight: 700;\r\n  font-style: normal;\r\n}\r\n:root{\r\n  --font-family-main: 'Dubai', sans-serif;\r\n}\r\nbody {\r\n  font-family: \"Dubai\", Helvetica, sans-serif;\r\n  font-size: var(--dda-fs-body-lg);\r\n  font-weight: var(--dda-fw-400);\r\n  line-height: 1.5;\r\n  color: var(--dda-on-surface-0);\r\n  margin: 0;\r\n}\r\n\r\n* {\r\n  box-sizing: border-box;\r\n}\r\n\r\nh1,\r\nh2,\r\nh3,\r\nh4,\r\nh5,\r\nh6,\r\np {\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\n\r\nh1, .dda-h1 { font-size: var(--dda-h1);  font-weight: 400; }\r\n\r\nh2, .dda-h2 { font-size: var(--dda-h2);  font-weight: 400; }\r\n\r\nh3, .dda-h3 { font-size: var(--dda-h3);  font-weight: 400; }\r\n\r\nh4, .dda-h4 { font-size: var(--dda-h4);  font-weight: 400; }\r\n\r\nh5, .dda-h5 { font-size: var(--dda-h5);  font-weight: 400; }\r\n\r\nh6, .dda-h6 { font-size: var(--dda-h6);  font-weight: 400; }\r\n\r\n.dda-title { font-size: var(--dda-title);  font-weight: 500; }\r\n\r\n.dda-body { font-size: var(--dda-body);  font-weight: 400; }\r\n\r\n.dda-caption { font-size: var(--dda-caption);  font-weight: 400; }\r\n\r\n.dda-label { font-size: var(--dda-label);  font-weight: 400; }\r\n\r\n\r\na,\r\na:hover {\r\n  text-decoration: none;\r\n}\r\n\r\nbutton {\r\n  cursor: pointer;\r\n}\r\n\r\nul {\r\n  margin: 0;\r\n  padding: 0;\r\n  list-style: none;\r\n}\r\n\r\n/*Colors*/\r\n.dda-bg-primary {\r\n  background-color: var(--dda-color-primary-40);\r\n}\r\n\r\n.dda-bg-secondary {\r\n  background-color: var(--dda-color-secondary);\r\n}\r\n\r\n.dda-color-black {\r\n  color: var(--dda-on-surface-0);\r\n}\r\n\r\n/* Border-radius classes */\r\n.dda-rounded-sm {\r\n  border-radius: 4px !important;\r\n}\r\n\r\n.dda-rounded-md {\r\n  border-radius: 8px !important;\r\n}\r\n\r\n.dda-rounded-lg {\r\n  border-radius: 12px !important;\r\n}\r\n\r\n.dda-rounded-circle {\r\n  border-radius: 100px !important;\r\n}\r\n\r\n.dda-gap-16 {\r\n  gap: 4rem !important;\r\n}\r\n\r\n.dda-gap-12 {\r\n  gap: 3rem !important;\r\n}\r\n\r\n.dda-gap-10 {\r\n  gap: 2.5rem !important;\r\n}\r\n\r\n.dda-gap-8 {\r\n  gap: 2rem !important;\r\n}\r\n\r\n.dda-gap-6 {\r\n  gap: 1.5rem !important;\r\n}\r\n\r\n.dda-gap-5 {\r\n  gap: 1.25rem !important;\r\n}\r\n\r\n.dda-gap-4 {\r\n  gap: 1rem !important;\r\n}\r\n\r\n.dda-gap-3 {\r\n  gap: .75rem !important;\r\n}\r\n\r\n.dda-gap-2 {\r\n  gap: .5rem !important;\r\n}\r\n\r\n.dda-gap-1 {\r\n  gap: 0.375rem !important;\r\n}\r\n\r\n\r\n::-ms-input-placeholder {\r\n  color: #8E9191;\r\n}\r\n\r\n::placeholder {\r\n  color: #8E9191;\r\n}\r\n\r\n.dda-flex {\r\n  display: flex;\r\n}\r\n\r\n.dda-flex-column {\r\n  flex-direction: column;\r\n}\r\n\r\n.dda-inline-flex {\r\n  display: inline-flex;\r\n}\r\n\r\n.dda-align-center {\r\n  align-items: center;\r\n}\r\n\r\n.dda-justify-space {\r\n  justify-content: space-between;\r\n}\r\n\r\n.dda-justify-center {\r\n  justify-content: center;\r\n}\r\n\r\n.m-0 {\r\n  margin: 0px !important;\r\n}\r\n\r\n.p-0 {\r\n  padding: 0px !important;\r\n}\r\n\r\n.py-0 {\r\n  padding-top: 0px !important;\r\n  padding-bottom: 0px !important;\r\n}\r\n\r\n.border-right {\r\n  border-inline-end: solid 1px #E5E5E5;\r\n}\r\n\r\n.visually-hidden{\r\n  position: absolute;\r\n  width: 1px;\r\n  height: 1px;\r\n  margin: -1px;\r\n  padding: 0;\r\n  overflow: hidden;\r\n  clip: rect(0, 0, 0, 0);\r\n  border: 0;\r\n}\r\n",".dda-btn {\r\n  height: 44px;\r\n  font-family: \"Dubai\", Helvetica, sans-serif;\r\n  font-size: var(--dda-fs-body-lg);\r\n  font-weight: var(--dda-fw-500);\r\n  padding: 10px 15px;\r\n  border-radius: 4px;\r\n  outline: 0;\r\n  cursor: pointer;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  gap: .5rem;\r\n}\r\n/**/\r\n.btn-color-default-primary{\r\n  background-color: var(--dda-color-primary-40);\r\n  border: solid 1px var(--dda-color-primary-40);\r\n  color: var(--dda-on-primary-100);\r\n}\r\n.btn-color-default-primary:hover {\r\n  background-color: var(--dda-on-primary-variant-30);\r\n  border: solid 1px var(--dda-on-primary-variant-30);\r\n}\r\n.btn-color-default-primary:focus {\r\n  background-color: var(--dda-on-primary-variant-20);\r\n  outline: var(--dda-on-primary-variant-20);\r\n}\r\n/*light*/\r\n.light-mode.btn-color-default-primary,\r\n.light-mode .btn-color-default-primary{\r\n  background-color: var(--dda-primary-40);\r\n  border: solid 1px var(--dda-primary-40);\r\n  color: var(--dda-primary-100);\r\n}\r\n.light-mode.btn-color-default-primary:hover,\r\n.light-mode .btn-color-default-primary:hover {\r\n  background-color: var(--dda-primary-30);\r\n  border: solid 1px var(--dda-primary-30);\r\n}\r\n.light-mode.btn-color-default-primary:focus,\r\n.light-mode .btn-color-default-primary:focus {\r\n  background-color: var(--dda-primary-20);\r\n  outline: var(--dda-primary-20);\r\n}\r\n/**/\r\n\r\n\r\n.btn-color-default-secondary {\r\n  background-color: var(--dda-on-primary-98);\r\n  border: solid 1px var(--dda-on-primary-98);\r\n  color: var(--dda-color-primary-40);\r\n}\r\n.btn-color-default-secondary:hover {\r\n  background-color: var(--dda-on-primary-94);\r\n  border: solid 1px var(--dda-on-primary-94);\r\n}\r\n.btn-color-default-secondary:focus {\r\n  background-color: var(--dda-primary-variant-92);\r\n  outline: var(--dda-primary-variant-92);\r\n}\r\n/*light*/\r\n.light-mode.btn-color-default-secondary {\r\n  background-color: var(--dda-primary-98);\r\n  border: solid 1px var(--dda-primary-98);\r\n  color: var(--dda-primary-40);\r\n}\r\n.light-mode.btn-color-default-secondary:hover {\r\n  background-color: var(--dda-primary-94);\r\n  border: solid 1px var(--dda-primary-94);\r\n}\r\n.light-mode.btn-color-default-secondary:focus {\r\n  background-color: var(--dda-primary-92);\r\n  outline: var(--dda-primary-92);\r\n}\r\n/**/\r\n\r\n\r\n.btn-color-default-tertiary {\r\n  background-color: var(--dda-surface-100);\r\n  border: solid 1px var(--dda-surface-90);\r\n  color: var(--dda-color-primary-40)\r\n}\r\n.btn-color-default-tertiary:hover {\r\n  background-color: var(--dda-on-primary-98);\r\n}\r\n.btn-color-default-tertiary:focus {\r\n  background-color: var(--dda-on-primary-96);\r\n}\r\n/*light*/\r\n.light-mode.btn-color-default-tertiary {\r\n  background-color: var(--dda-neutral-100);\r\n  border: solid 1px var(--dda-neutral-90);\r\n  color: var(--dda-primary-40)\r\n}\r\n.light-mode.btn-color-default-tertiary:hover {\r\n  background-color: var(--dda-primary-98);\r\n}\r\n.light-mode.btn-color-default-tertiary:focus {\r\n  background-color: var(--dda-primary-96);\r\n}\r\n/**/\r\n\r\n\r\n.btn-color-default-link {\r\n  height: 22px;\r\n  background-color: transparent !important;\r\n  border: transparent !important;\r\n  color: var(--dda-color-primary-40);\r\n  padding: 0px;\r\n}\r\n.light-mode.btn-color-default-link {\r\n  color: var(--dda-primary-40);\r\n}\r\n.btn-color-default-link:focus{\r\n  outline: auto;\r\n}\r\n/**/\r\n\r\n\r\n.btn-color-error-primary {\r\n  background-color: var(--dda-color-error-40);\r\n  border: solid 1px var(--dda-color-error-40);\r\n  color: var(--dda-on-primary-100);\r\n}\r\n.btn-color-error-primary:hover {\r\n  background-color: var(--dda-color-error-40);\r\n  border: solid 1px var(--dda-color-error-40);\r\n}\r\n.btn-color-error-primary:focus {\r\n  background-color: var(--dda-color-error-30);\r\n  border: solid 1px var(--dda-color-error-30);\r\n  outline: var(--dda-color-error-30);\r\n}\r\n/*light*/\r\n.light-mode.btn-color-error-primary {\r\n  background-color: var(--dda-error-40);\r\n  border: solid 1px var(--dda-error-40);\r\n  color: var(--dda-primary-100);\r\n}\r\n.light-mode.btn-color-error-primary:hover {\r\n  background-color: var(--dda-error-40);\r\n  border: solid 1px var(--dda-error-40);\r\n}\r\n.light-mode.btn-color-error-primary:focus {\r\n  background-color: var(--dda-error-30);\r\n  border: solid 1px var(--dda-error-30);\r\n  outline: var(--dda-error-30);\r\n}\r\n/**/\r\n\r\n\r\n.btn-color-error-secondary {\r\n  background-color: var(--dda-error-variant-95);\r\n  border: solid 1px var(--dda-error-variant-95);\r\n  color: var(--dda-color-error-40);\r\n}\r\n.btn-color-error-secondary:hover {\r\n  background-color: var(--dda-on-error-98);\r\n  border: solid 1px var(--dda-on-error-98);\r\n}\r\n.btn-color-error-secondary:focus {\r\n  background-color: var(--dda-on-error-96);\r\n  border: solid 1px var(--dda-on-error-96);\r\n}\r\n/*light*/\r\n.light-mode.btn-color-error-secondary {\r\n  background-color: var(--dda-error-95);\r\n  border: solid 1px var(--dda-error-95);\r\n  color: var(--dda-error-40);\r\n}\r\n.light-mode.btn-color-error-secondary:hover {\r\n  background-color: var(--dda-error-98);\r\n  border: solid 1px var(--dda-error-98);\r\n}\r\n.light-mode.btn-color-error-secondary:focus {\r\n  background-color: var(--dda-error-96);\r\n  border: solid 1px var(--dda-error-96);\r\n}\r\n/**/\r\n\r\n\r\n.btn-color-error-tertiary {\r\n  background-color: var(--dda-surface-100);\r\n  border: solid 1px var(--dda-surface-90);\r\n  color: var(--dda-color-error-40);\r\n}\r\n.btn-color-error-tertiary:hover {\r\n  background-color: var(--dda-on-error-98);\r\n}\r\n.btn-color-error-tertiary:focus {\r\n  background-color: var(--dda-on-error-96);\r\n}\r\n/*light*/\r\n.light-mode.btn-color-error-tertiary {\r\n  background-color: var(--dda-neutral-100);\r\n  border: solid 1px var(--dda-neutral-90);\r\n  color: var(--dda-error-40);\r\n}\r\n.light-mode.btn-color-error-tertiary:hover {\r\n  background-color: var(--dda-error-98);\r\n}\r\n.light-mode.btn-color-error-tertiary:focus {\r\n  background-color: var(--dda-error-96);\r\n}\r\n/**/\r\n\r\n\r\n.btn-color-error-link {\r\n  height: 22px;\r\n  background-color: transparent !important;\r\n  border: transparent !important;\r\n  color: var(--dda-color-error-40);\r\n  padding: 0px;\r\n}\r\n.light-mode.btn-color-error-link {\r\n  color: var(--dda-error-40);\r\n}\r\n.btn-color-error-link:focus{\r\n  outline: auto;\r\n}\r\n/**/\r\n\r\n\r\n.btn-color-onsurface-primary {\r\n  background-color: var(--dda-on-surface-0);\r\n  border: solid 1px var(--dda-on-surface-0);\r\n  color: var(--dda-surface-100);\r\n}\r\n.btn-color-onsurface-primary:hover {\r\n  background-color: var(--dda-on-surface-20);\r\n  border: solid 1px var(--dda-on-surface-20);\r\n}\r\n.btn-color-onsurface-primary:focus {\r\n  background-color: var(--dda-on-surface-30);\r\n  border: solid 1px var(--dda-on-surface-30);\r\n}\r\n/*light*/\r\n.light-mode.btn-color-onsurface-primary {\r\n  background-color: var(--dda-neutral-0);\r\n  border: solid 1px var(--dda-neutral-0);\r\n  color: var(--dda-neutral-100);\r\n}\r\n.light-mode.btn-color-onsurface-primary:hover {\r\n  background-color: var(--dda-neutral-20);\r\n  border: solid 1px var(--dda-neutral-20);\r\n}\r\n.light-mode.btn-color-onsurface-primary:focus {\r\n  background-color: var(--dda-neutral-30);\r\n  border: solid 1px var(--dda-neutral-30);\r\n}\r\n/**/\r\n\r\n.btn-color-onsurface-secondary {\r\n  background-color: var(--dda-surface-96);\r\n  border: solid 1px var(--dda-surface-96);\r\n  color: var(--dda-on-surface-0);\r\n}\r\n.btn-color-onsurface-secondary:hover {\r\n  background-color: var(--dda-surface-94);\r\n  border: solid 1px var(--dda-surface-94);\r\n}\r\n.btn-color-onsurface-secondary:focus {\r\n  background-color: var(--dda-surface-92);\r\n  border: solid 1px var(--dda-surface-92);\r\n}\r\n/*light*/\r\n.light-mode.btn-color-onsurface-secondary {\r\n  background-color: var(--dda-neutral-96);\r\n  border: solid 1px var(--dda-neutral-96);\r\n  color: var(--dda-neutral-0);\r\n}\r\n.light-mode.btn-color-onsurface-secondary:hover {\r\n  background-color: var(--dda-neutral-94);\r\n  border: solid 1px var(--dda-neutral-94);\r\n}\r\n.light-mode.btn-color-onsurface-secondary:focus {\r\n  background-color: var(--dda-neutral-92);\r\n  border: solid 1px var(--dda-neutral-92);\r\n}\r\n/**/\r\n\r\n.btn-color-onsurface-tertiary {\r\n  background-color: var(--dda-surface-100);\r\n  border: solid 1px var(--dda-surface-90);\r\n  color: var(--dda-on-surface-0);\r\n}\r\n.btn-color-onsurface-tertiary:hover {\r\n  background-color: var(--dda-surface-94);\r\n}\r\n.btn-color-onsurface-tertiary:focus {\r\n  background-color: var(--dda-surface-90);\r\n}\r\n/*light*/\r\n.light-mode.btn-color-onsurface-tertiary {\r\n  background-color: var(--dda-neutral-100);\r\n  border: solid 1px var(--dda-neutral-90);\r\n  color: var(--dda-neutral-0);\r\n}\r\n.light-mode.btn-color-onsurface-tertiary:hover {\r\n  background-color: var(--dda-neutral-94);\r\n}\r\n.light-mode.btn-color-onsurface-tertiary:focus {\r\n  background-color: var(--dda-neutral-90);\r\n}\r\n/**/\r\n\r\n.btn-color-onsurface-link {\r\n  height: 22px;\r\n  background-color: transparent !important;\r\n  border: transparent !important;\r\n  color: var(--dda-on-surface-0);\r\n  padding: 0px;\r\n}\r\n.light-mode.btn-color-onsurface-link {\r\n  color: var(--dda-neutral-0);\r\n}\r\n.btn-color-onsurface-link:focus{\r\n  outline: auto;\r\n}\r\n/**/\r\n\r\n.btn-color-secondary {\r\n  background-color: var(--dda-color-secondary-40);\r\n  border: solid 1px var(--dda-color-secondary-40);\r\n  color: var(--dda-on-secondary-100);\r\n}\r\n.btn-color-secondary:hover {\r\n  background-color: var(--dda-color-secondary-30);\r\n  border: solid 1px var(--dda-color-secondary-30);\r\n}\r\n.btn-color-secondary:focus {\r\n  background-color: var(--dda-color-secondary-20);\r\n  border: solid 1px var(--dda-color-secondary-20);\r\n  outline: var(--dda-color-secondary-20);\r\n}\r\n/*light*/\r\n.light-mode.btn-color-secondary {\r\n  background-color: var(--dda-secondary-40);\r\n  border: solid 1px var(--dda-secondary-40);\r\n  color: var(--dda-secondary-100);\r\n}\r\n.light-mode.btn-color-secondary:hover {\r\n  background-color: var(--dda-secondary-30);\r\n  border: solid 1px var(--dda-secondary-30);\r\n}\r\n.light-mode.btn-color-secondary:focus {\r\n  background-color: var(--dda-secondary-20);\r\n  border: solid 1px var(--dda-secondary-20);\r\n  outline: var(--dda-secondary-20);\r\n}\r\n/**/\r\n\r\n.btn-color-success {\r\n  background-color: var(--dda-color-success-50);\r\n  border: solid 1px var(--dda-color-success-50);\r\n  color: var(--dda-on-success-100);\r\n}\r\n.btn-color-success:hover {\r\n  background-color: var(--dda-color-success-40);\r\n  border: solid 1px var(--dda-color-success-40);\r\n}\r\n.btn-color-success:focus {\r\n  background-color: var(--dda-color-success-30);\r\n  border: solid 1px var(--dda-color-success-30);\r\n  outline: var(--dda-color-success-30);\r\n}\r\n/*light*/\r\n.light-mode.btn-color-success {\r\n  background-color: var(--dda-success-50);\r\n  border: solid 1px var(--dda-success-50);\r\n  color: var(--dda-success-100);\r\n}\r\n.light-mode.btn-color-success:hover {\r\n  background-color: var(--dda-success-40);\r\n  border: solid 1px var(--dda-success-40);\r\n}\r\n.light-mode.btn-color-success:focus {\r\n  background-color: var(--dda-success-30);\r\n  border: solid 1px var(--dda-success-30);\r\n  outline: var(--dda-success-30);\r\n}\r\n/**/\r\n\r\n.btn-color-warning {\r\n  background-color: var(--dda-color-warning-50);\r\n  border: solid 1px var(--dda-color-warning-50);\r\n  color: var(--dda-on-warning-100);\r\n}\r\n.btn-color-warning:hover {\r\n  background-color: var(--dda-color-warning-40);\r\n  border: solid 1px var(--dda-color-warning-40);\r\n  border-color: var(--dda-color-warning-40);\r\n}\r\n.btn-color-warning:focus {\r\n  background-color: var(--dda-color-warning-30);\r\n  border: solid 1px var(--dda-color-warning-30);\r\n  outline: var(--dda-color-warning-30);\r\n}\r\n/*light*/\r\n.light-mode.btn-color-warning {\r\n  background-color: var(--dda-warning-50);\r\n  border: solid 1px var(--dda-warning-50);\r\n  color: var(--dda-warning-100);\r\n}\r\n.light-mode.btn-color-warning:hover {\r\n  background-color: var(--dda-warning-40);\r\n  border: solid 1px var(--dda-warning-40);\r\n  border-color: var(--dda-warning-40);\r\n}\r\n.light-mode.btn-color-warning:focus {\r\n  background-color: var(--dda-warning-30);\r\n  border: solid 1px var(--dda-warning-30);\r\n  outline: var(--dda-warning-30);\r\n}\r\n/**/\r\n\r\n.btn-color-surface {\r\n  background-color: var(--dda-surface-100);\r\n  border: solid 1px var(--dda-surface-100);\r\n  color: var(--dda-on-surface-0);\r\n}\r\n.btn-color-surface:hover {\r\n  background-color: var(--dda-surface-94);\r\n  border: solid 1px var(--dda-surface-94);\r\n}\r\n.btn-color-surface:focus {\r\n  background-color: var(--dda-surface-92);\r\n  border: solid 1px var(--dda-surface-92);\r\n  outline: var(--dda-on-surface-20);\r\n}\r\n/*light*/\r\n.light-mode.btn-color-surface {\r\n  background-color: var(--dda-neutral-100);\r\n  border: solid 1px var(--dda-neutral-100);\r\n  color: var(--dda-neutral-0);\r\n}\r\n.light-mode.btn-color-surface:hover {\r\n  background-color: var(--dda-neutral-94);\r\n  border: solid 1px var(--dda-neutral-94);\r\n}\r\n.light-mode.btn-color-surface:focus {\r\n  background-color: var(--dda-neutral-92);\r\n  border: solid 1px var(--dda-neutral-92);\r\n  outline: var(--dda-neutral-20);\r\n}\r\n/**/\r\n\r\n.btn-color-surface-variant {\r\n  background-color: var(--dda-on-surface-variant-30);\r\n  border: solid 1px var(--dda-on-surface-variant-30);\r\n  color: var(--dda-surface-variant-90);\r\n}\r\n.btn-color-surface-variant:hover {\r\n  background-color: var(--dda-on-surface-variant-25);\r\n  border: solid 1px var(--dda-on-surface-variant-25);\r\n}\r\n.btn-color-surface-variant:focus {\r\n  background-color: var(--dda-on-surface-variant-20);\r\n  border: solid 1px var(--dda-on-surface-variant-20);\r\n  outline: var(--dda-on-surface-variant-20);\r\n}\r\n/*light*/\r\n.light-mode.btn-color-surface-variant {\r\n  background-color: var(--dda-neutral-variant-30);\r\n  border: solid 1px var(--dda-neutral-variant-30);\r\n  color: var(--dda-neutral-variant-90);\r\n}\r\n.light-mode.btn-color-surface-variant:hover {\r\n  background-color: var(--dda-neutral-variant-25);\r\n  border: solid 1px var(--dda-neutral-variant-25);\r\n}\r\n.light-mode.btn-color-surface-variant:focus {\r\n  background-color: var(--dda-neutral-variant-20);\r\n  border: solid 1px var(--dda-neutral-variant-20);\r\n  outline: var(--dda-neutral-variant-20);\r\n}\r\n/**/\r\n\r\n.btn-color-disabled {\r\n  background-color: var(--dda-surface-92) !important;\r\n  border: solid 1px var(--dda-surface-92) !important;\r\n  color: var(--dda-neutral-60) !important;\r\n  cursor: not-allowed;\r\n}\r\n.light-mode.btn-color-disabled {\r\n  background-color: var(--dda-neutral-92) !important;\r\n  border: solid 1px var(--dda-neutral-92) !important;\r\n  color: var(--dda-neutral-60) !important;\r\n  cursor: not-allowed;\r\n}\r\n/**/\r\n\r\n.btn-size-sm {\r\n  height: 40px;\r\n  padding: 8px 10px;\r\n}\r\n\r\n.btn-size-md {\r\n  height: 44px;\r\n  padding: 10px 15px;\r\n}\r\n\r\n.btn-size-lg {\r\n  height: 48px;\r\n  padding: 12px 17px;\r\n}\r\n\r\n.btn-size-xl {\r\n  height: 56px;\r\n  padding: 16px 23px;\r\n  gap: 8px;\r\n}\r\n\r\n.icon-btn-default {\r\n  height: 44px;\r\n  min-width: 44px;\r\n  padding: 8px 0;\r\n  border-radius: 4px;\r\n}\r\n\r\n.icon-btn-circle {\r\n  height: 44px;\r\n  min-width: 44px;\r\n  padding: 8px 0;\r\n  border-radius: 100px;\r\n}\r\n\r\n.btn-shape-default {\r\n  border-radius: 4px;\r\n}\r\n\r\n.btn-shape-circle {\r\n  border-radius: 100px;\r\n}\r\n\r\n.icon-btn-default.btn-size-sm,\r\n.icon-btn-circle.btn-size-sm {\r\n  height: 40px;\r\n  min-width: 40px;\r\n  padding: 8px 0;\r\n}\r\n\r\n.icon-btn-default.btn-size-md,\r\n.icon-btn-circle.btn-size-md {\r\n  height: 44px;\r\n  min-width: 44px;\r\n  padding: 10px 0;\r\n}\r\n\r\n.icon-btn-default.btn-size-lg,\r\n.icon-btn-circle.btn-size-lg {\r\n  height: 48px;\r\n  min-width: 48px;\r\n  padding: 12px 0;\r\n}\r\n\r\n.icon-btn-default.btn-size-xl,\r\n.icon-btn-circle.btn-size-xl {\r\n  height: 56px;\r\n  min-width: 56px;\r\n  padding: 16px 0;\r\n}\r\n\r\n.dda-btn-icon i,\r\n.dda-btn-icon svg {\r\n  font-size: 20px;\r\n}\r\n\r\n.dda-btn i.icon-start,\r\n.dda-btn svg.icon-start {\r\n  font-size: 20px;\r\n}\r\n\r\n.dda-btn i.icon-end,\r\n.dda-btn svg.icon-end {\r\n  font-size: 15px;\r\n}\r\n\r\n\r\n","import { Component, Prop, h, Host, Element } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'dda-search-input',\r\n  styleUrls: ['../../global/input.css', '../../global/global.css', '../../global/dda-button.css'],\r\n  shadow: false,\r\n})\r\nexport class DdaSearchInput {\r\n  @Prop() placeholder: string = 'Search';\r\n  @Prop() label: string;\r\n  @Prop() size: string = 'sm'; // default to small size\r\n  @Prop() error_message: string;\r\n  @Prop() show_button: boolean = false; // control to show/hide search button\r\n  @Prop() helper_text: string;\r\n  @Prop() input_status?: string;\r\n  @Prop() has_error: boolean = false; // control error state\r\n  @Prop() custom_class?: string = ''; \r\n  @Prop() component_mode?: string; \r\n  @Prop() button_id?: string;\r\n  @Prop() aria_label?: string;\r\n  @Prop() button_aria_label?: string;\r\n\r\n  @Element() el: HTMLElement;\r\n\r\n  clearInput() {\r\n    const input = this.el.querySelector('#search') as HTMLInputElement;\r\n    if (input) {\r\n      input.value = '';\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <div class={`dda-input-container dda-input-size-${this.size} ${this.component_mode} ${this.custom_class}  ${this.input_status ? `dda-input-${this.input_status}` : ''} ${this.has_error ? 'dda-validation-error' : ''}`}>\r\n          {this.label && <label htmlFor={this.button_id} class=\"dda-input-label\">{this.label}</label>}\r\n          <div class=\"dda-search-area dda-search-action\">\r\n            <i class=\"material-icons icon-left\">search</i>\r\n            <input aria-label={this.aria_label} id='search' type=\"text\" class=\"dda-input-field dda-search-field\" placeholder={this.placeholder}/>\r\n            <div class=\"dda-search-btngroup\">\r\n              <button aria-label={this.button_aria_label} id={this.button_id} type=\"button\" class=\"icon-close\" onClick={() => this.clearInput()}><i class=\"material-icons\">close</i></button>\r\n              {this.show_button && (\r\n                <button type=\"button\" class=\"dda-btn btn-color-default-primary dda-btn-sm\">Search</button>\r\n              )}\r\n            </div>\r\n          </div>\r\n          {this.helper_text && <span class=\"dda-helper-text\">{this.helper_text}</span>}\r\n          {this.error_message && <span class=\"dda-error-message\">{this.error_message}</span>}\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n\r\n"],"version":3}

package/dist/esm/dda-segmented-tabs.entry.js.map

@@ -1 +0,0 @@
-{"file":"dda-segmented-tabs.entry.js","mappings":";;AAAA,MAAM,SAAS,GAAG,y6uDAAy6uD,CAAC;AAC57uD,+BAAe,SAAS;;ACDxB,MAAM,mBAAmB,GAAG,ynCAAynC,CAAC;AACtpC,+BAAe,mBAAmB;;MCMrB,gBAAgB;IAL7B;;QAWU,gBAAW,GAAa,EAAE,CAAC;KAiBpC;IAfC,iBAAiB;QACf,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KAC3C;IAED,MAAM;QACJ,QACE,4DAAK,KAAK,EAAE,uBAAuB,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,cAAc,EAAE,IAC9F,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,IAAI,KACxB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;YACnB,cAAQ,KAAK,EAAC,oBAAoB,IAAC,SAAG,KAAK,EAAC,gBAAgB,IAAE,IAAI,CAAK,CAAS;YAChF,cAAQ,KAAK,EAAC,oBAAoB,IAAE,IAAI,CAAU,CACrD,CAAC,CACE,EACN;KACH;;;;;;","names":[],"sources":["src/global/global.css?tag=dda-segmented-tabs","src/components/segmented-groups/dda-segmented-tabs/dda-segmented-tabs.css?tag=dda-segmented-tabs","src/components/segmented-groups/dda-segmented-tabs/dda-segmented-tabs.tsx"],"sourcesContent":["@import url('./color.css');\r\n@import url('./typography.css');\r\n@import url('./templates/cards.css');\r\n@import url('./templates/dda-grid.css');\r\n@import url('./templates/dashboard-navigation.css');\r\n@import url('./templates/dda-footer-main.css');\r\n@import url('./templates/side-navigation.css');\r\n@import url('./templates/table.css');\r\n@import url('./templates/website-footer.css');\r\n@import url('./templates/dda-header-main.css');\r\n\r\n@font-face {\r\n  font-family: \"Dubai\";\r\n  src: url(\"../assets/fonts/dubai/DubaiLight.eot\");\r\n  src: url(\"../assets/fonts/dubai/DubaiLight.eot\") format(\"embedded-opentype\"),\r\n    url(\"../assets/fonts/dubai/DubaiLight.woff2\") format(\"woff2\"),\r\n    url(\"../assets/fonts/dubai/DubaiLight.woff\") format(\"woff\"),\r\n    url(\"../assets/fonts/dubai/DubaiLight.ttf\") format(\"truetype\"),\r\n    url(\"../assets/fonts/dubai/DubaiLight.svg#DubaiLight\") format(\"svg\");\r\n  font-weight: 300;\r\n  font-style: normal;\r\n}\r\n\r\n@font-face {\r\n  font-family: \"Dubai\";\r\n  src: url(\"../assets/fonts/dubai/DubaiRegular.eot\");\r\n  src: url(\"../assets/fonts/dubai/DubaiRegular.eot\") format(\"embedded-opentype\"),\r\n    url(\"../assets/fonts/dubai/DubaiRegular.woff2\") format(\"woff2\"),\r\n    url(\"../assets/fonts/dubai/DubaiRegular.woff\") format(\"woff\"),\r\n    url(\"../assets/fonts/dubai/DubaiRegular.ttf\") format(\"truetype\"),\r\n    url(\"../assets/fonts/dubai/DubaiRegular.svg#DubaiRegular\") format(\"svg\");\r\n  font-weight: 400;\r\n  font-style: normal;\r\n}\r\n\r\n@font-face {\r\n  font-family: \"Dubai\";\r\n  src: url(\"../assets/fonts/dubai/DubaiMedium.eot\");\r\n  src: url(\"../assets/fonts/dubai/DubaiMedium.eot\") format(\"embedded-opentype\"),\r\n    url(\"../assets/fonts/dubai/DubaiMedium.woff2\") format(\"woff2\"),\r\n    url(\"../assets/fonts/dubai/DubaiMedium.woff\") format(\"woff\"),\r\n    url(\"../assets/fonts/dubai/DubaiMedium.ttf\") format(\"truetype\"),\r\n    url(\"../assets/fonts/dubai/DubaiMedium.svg#DubaiMedium\") format(\"svg\");\r\n  font-weight: 500;\r\n  font-style: normal;\r\n}\r\n\r\n@font-face {\r\n  font-family: \"Dubai\";\r\n  src: url(\"../assets/fonts/dubai/DubaiBold.eot\");\r\n  src: url(\"../assets/fonts/dubai/DubaiBold.eot\") format(\"embedded-opentype\"),\r\n    url(\"../assets/fonts/dubai/DubaiBold.woff2\") format(\"woff2\"),\r\n    url(\"../assets/fonts/dubai/DubaiBold.woff\") format(\"woff\"),\r\n    url(\"../assets/fonts/dubai/DubaiBold.ttf\") format(\"truetype\"),\r\n    url(\"../assets/fonts/dubai/DubaiBold.svg#DubaiBold\") format(\"svg\");\r\n  font-weight: 700;\r\n  font-style: normal;\r\n}\r\n:root{\r\n  --font-family-main: 'Dubai', sans-serif;\r\n}\r\nbody {\r\n  font-family: \"Dubai\", Helvetica, sans-serif;\r\n  font-size: var(--dda-fs-body-lg);\r\n  font-weight: var(--dda-fw-400);\r\n  line-height: 1.5;\r\n  color: var(--dda-on-surface-0);\r\n  margin: 0;\r\n}\r\n\r\n* {\r\n  box-sizing: border-box;\r\n}\r\n\r\nh1,\r\nh2,\r\nh3,\r\nh4,\r\nh5,\r\nh6,\r\np {\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\n\r\nh1, .dda-h1 { font-size: var(--dda-h1);  font-weight: 400; }\r\n\r\nh2, .dda-h2 { font-size: var(--dda-h2);  font-weight: 400; }\r\n\r\nh3, .dda-h3 { font-size: var(--dda-h3);  font-weight: 400; }\r\n\r\nh4, .dda-h4 { font-size: var(--dda-h4);  font-weight: 400; }\r\n\r\nh5, .dda-h5 { font-size: var(--dda-h5);  font-weight: 400; }\r\n\r\nh6, .dda-h6 { font-size: var(--dda-h6);  font-weight: 400; }\r\n\r\n.dda-title { font-size: var(--dda-title);  font-weight: 500; }\r\n\r\n.dda-body { font-size: var(--dda-body);  font-weight: 400; }\r\n\r\n.dda-caption { font-size: var(--dda-caption);  font-weight: 400; }\r\n\r\n.dda-label { font-size: var(--dda-label);  font-weight: 400; }\r\n\r\n\r\na,\r\na:hover {\r\n  text-decoration: none;\r\n}\r\n\r\nbutton {\r\n  cursor: pointer;\r\n}\r\n\r\nul {\r\n  margin: 0;\r\n  padding: 0;\r\n  list-style: none;\r\n}\r\n\r\n/*Colors*/\r\n.dda-bg-primary {\r\n  background-color: var(--dda-color-primary-40);\r\n}\r\n\r\n.dda-bg-secondary {\r\n  background-color: var(--dda-color-secondary);\r\n}\r\n\r\n.dda-color-black {\r\n  color: var(--dda-on-surface-0);\r\n}\r\n\r\n/* Border-radius classes */\r\n.dda-rounded-sm {\r\n  border-radius: 4px !important;\r\n}\r\n\r\n.dda-rounded-md {\r\n  border-radius: 8px !important;\r\n}\r\n\r\n.dda-rounded-lg {\r\n  border-radius: 12px !important;\r\n}\r\n\r\n.dda-rounded-circle {\r\n  border-radius: 100px !important;\r\n}\r\n\r\n.dda-gap-16 {\r\n  gap: 4rem !important;\r\n}\r\n\r\n.dda-gap-12 {\r\n  gap: 3rem !important;\r\n}\r\n\r\n.dda-gap-10 {\r\n  gap: 2.5rem !important;\r\n}\r\n\r\n.dda-gap-8 {\r\n  gap: 2rem !important;\r\n}\r\n\r\n.dda-gap-6 {\r\n  gap: 1.5rem !important;\r\n}\r\n\r\n.dda-gap-5 {\r\n  gap: 1.25rem !important;\r\n}\r\n\r\n.dda-gap-4 {\r\n  gap: 1rem !important;\r\n}\r\n\r\n.dda-gap-3 {\r\n  gap: .75rem !important;\r\n}\r\n\r\n.dda-gap-2 {\r\n  gap: .5rem !important;\r\n}\r\n\r\n.dda-gap-1 {\r\n  gap: 0.375rem !important;\r\n}\r\n\r\n\r\n::-ms-input-placeholder {\r\n  color: #8E9191;\r\n}\r\n\r\n::placeholder {\r\n  color: #8E9191;\r\n}\r\n\r\n.dda-flex {\r\n  display: flex;\r\n}\r\n\r\n.dda-flex-column {\r\n  flex-direction: column;\r\n}\r\n\r\n.dda-inline-flex {\r\n  display: inline-flex;\r\n}\r\n\r\n.dda-align-center {\r\n  align-items: center;\r\n}\r\n\r\n.dda-justify-space {\r\n  justify-content: space-between;\r\n}\r\n\r\n.dda-justify-center {\r\n  justify-content: center;\r\n}\r\n\r\n.m-0 {\r\n  margin: 0px !important;\r\n}\r\n\r\n.p-0 {\r\n  padding: 0px !important;\r\n}\r\n\r\n.py-0 {\r\n  padding-top: 0px !important;\r\n  padding-bottom: 0px !important;\r\n}\r\n\r\n.border-right {\r\n  border-inline-end: solid 1px #E5E5E5;\r\n}\r\n\r\n.visually-hidden{\r\n  position: absolute;\r\n  width: 1px;\r\n  height: 1px;\r\n  margin: -1px;\r\n  padding: 0;\r\n  overflow: hidden;\r\n  clip: rect(0, 0, 0, 0);\r\n  border: 0;\r\n}\r\n",".dda-segmented-group {\r\n  display: inline-flex;\r\n  border: solid 1px var(--dda-surface-90);\r\n  border-radius: 8px;\r\n  overflow: hidden;\r\n}\r\n.light-mode.dda-segmented-group{\r\n  border: solid 1px var(--dda-neutral-90);\r\n}\r\n.dda-segmented-item {\r\n  display: flex;\r\n  height: 40px;\r\n  padding: 5px 16px;\r\n  border: transparent;\r\n  border-inline-start: solid 1px var(--dda-surface-90);\r\n  background-color: var(--dda-surface-100);\r\n  font-size: 16px;\r\n  color: var(--dda-on-surface-variant-30);\r\n  cursor: pointer;\r\n  align-items: center;\r\n}\r\n.light-mode .dda-segmented-item{\r\n  background-color: var(--dda-neutral-100);\r\n  color: var(--dda-neutral-variant-30);\r\n  border-inline-start: solid 1px var(--dda-neutral-90);\r\n}\r\n.dda-segmented-group .dda-segmented-item:first-child{\r\n  border: transparent;\r\n}\r\n.dda-segmented-group.square{\r\n  border-radius: 8px;\r\n}\r\n.dda-segmented-group.rounded{\r\n  border-radius: 40px;\r\n}\r\n.dda-segmented-item:hover {\r\n  color: var(--dda-color-primary-40);\r\n}\r\n.light-mode .dda-segmented-item:hover{\r\n  color: var(--dda-primary-40);\r\n}\r\n.dda-segmented-item.active {\r\n  background-color: var(--dda-color-primary-40);\r\n  color: var(--dda-surface-100);\r\n}\r\n.light-mode .dda-segmented-item.active {\r\n  background-color: var(--dda-primary-40);\r\n  color: var(--dda-neutral-100);\r\n}\r\n.dda-segmented-item i {\r\n  font-size: 18px;\r\n}","import { Component, Prop, h } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'dda-segmented-tabs',\r\n  styleUrls: ['../../../global/global.css', 'dda-segmented-tabs.css'],\r\n  shadow: false,\r\n})\r\nexport class DdaSegmentedTabs {\r\n  @Prop() items: string;\r\n  @Prop() radius_type: string;\r\n  @Prop() custom_class: string;\r\n  @Prop() component_mode?: string; \r\n\r\n  private parsedItems: string[] = [];\r\n\r\n  componentWillLoad() {\r\n    this.parsedItems = JSON.parse(this.items);\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div class={`dda-segmented-group ${this.custom_class} ${this.radius_type} ${this.component_mode}`}>\r\n        {this.parsedItems.map(item => (\r\n          item.startsWith('fo') ? \r\n            <button class=\"dda-segmented-item\"><i class=\"material-icons\">{item}</i></button> :\r\n            <button class=\"dda-segmented-item\">{item}</button>\r\n        ))}\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/esm/dda-select.entry.js.map

@@ -1 +0,0 @@
-{"file":"dda-select.entry.js","mappings":";;AAAA,MAAM,QAAQ,GAAG,4pWAA4pW,CAAC;AAC9qW,wBAAe,QAAQ;;ACDvB,MAAM,SAAS,GAAG,y6uDAAy6uD,CAAC;AAC57uD,wBAAe,SAAS;;MCMX,SAAS;IALtB;;QAUU,aAAQ,GAAY,KAAK,CAAC;QAIzB,YAAO,GAAY,KAAK,CAAC;;QAG1B,iBAAY,GAAY,EAAE,CAAC;KA6DpC;IAxDC,IAAY,aAAa;QACvB,IAAI;YACF,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;SACjC;QAAC,WAAM;YACN,OAAO,EAAE,CAAC;SACX;KACF;IAED,YAAY;QACV,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YAClB,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;SAC9B;KACF;IAED,YAAY,CAAC,MAAc;QACzB,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YAClB,IAAI,CAAC,QAAQ,GAAG,MAAM,CAAC;YACvB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;SACtB;KACF;IAED,MAAM;QAGJ,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAE,uBAAuB,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,QAAQ,GAAG,oBAAoB,GAAG,EAAE,IAAI,IAAI,CAAC,OAAO,GAAG,MAAM,GAAG,MAAM,mBAAmB,IAAI,CAAC,IAAI,mBAAmB,IAAI,CAAC,KAAK,GAAG,IACnN,IAAI,CAAC,KAAK,IAAI,8DAAO,OAAO,EAAE,IAAI,CAAC,SAAS,EAAE,KAAK,EAAC,iBAAiB,IAAE,IAAI,CAAC,KAAK,CAAS,EAC3F,4DAAK,KAAK,EAAC,wBAAwB,IACjC,6EAAoB,IAAI,CAAC,UAAU,EAAE,EAAE,EAAE,IAAI,CAAC,SAAS,EAAE,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,mCAAmC,EAAC,OAAO,EAAE,QAAO,IAAI,CAAC,YAAY,EAAE,CAAA,EAAC,IAClJ,IAAI,CAAC,QAAQ,IAAI,kBAAkB,EACpC,0DAAG,KAAK,EAAE,gBAAgB,IAAG,IAAI,CAAC,OAAO,GAAG,mBAAmB,GAAG,qBAAqB,CAAK,CACrF,EACR,IAAI,CAAC,OAAO,KACX,4DAAK,KAAK,EAAC,yCAAyC,IACjD,IAAI,CAAC,aAAa,CAAC,MAAM,GAAG,CAAC,IAC5B,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,MAAM,KAC3B,cAAQ,IAAI,EAAC,QAAQ,EACnB,KAAK,EAAE,2BAA2B,IAAI,CAAC,QAAQ,KAAK,MAAM,GAAG,UAAU,GAAG,EAAE,EAAE,EAC9E,OAAO,EAAE,MAAM,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,IAEvC,MAAM,CACA,CACV,CAAC,KAEF,WAAK,KAAK,EAAC,yBAAyB,2BAA2B,CAChE,CACG,CACP,CACG,EACL,IAAI,CAAC,WAAW,IAAI,6DAAM,KAAK,EAAC,iBAAiB,IAAE,IAAI,CAAC,WAAW,CAAQ,EAC3E,IAAI,CAAC,aAAa,IAAI,6DAAM,KAAK,EAAC,mBAAmB,IAAE,IAAI,CAAC,aAAa,CAAQ,CAC9E,CACD,EACP;KACH;;;;;;","names":[],"sources":["src/global/input.css?tag=dda-select","src/global/global.css?tag=dda-select","src/components/dda-select/dda-select.tsx"],"sourcesContent":[".dda-input-container {\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 8px;\r\n    position: relative;\r\n}\r\n\r\n.dda-input-label {\r\n    font-size: var(--dda-fs-title-sm);\r\n    color: var(--dda-on-surface-0);\r\n    line-height: 22px;\r\n    font-weight: var(--dda-fw-400);\r\n}\r\n.light-mode .dda-input-label {\r\n    color: var(--dda-neutral-0);\r\n}\r\n.dda-input-field-wrapper {\r\n    position: relative;\r\n}\r\n\r\n.dda-field-group-input {\r\n    height: 32px;\r\n    background-color: transparent;\r\n    flex: 1;\r\n    font-size: var(--dda-fs-body-lg);\r\n    font-weight: var(--dda-fw-400);\r\n    padding: 0px;\r\n    color: var(--dda-on-surface-0);\r\n    border: none;\r\n    outline: none;\r\n}\r\n.light-mode .dda-field-group-input{\r\n    color: var(--dda-neutral-0);\r\n} \r\n.dda-input-field-group {\r\n    width: 100%;\r\n    height: 55px;\r\n    padding: 8px 16px;\r\n    background: var(--dda-surface-100);\r\n    border: 1px solid var(--dda-surface-90);\r\n    border-radius: 8px;\r\n    font-size: var(--dda-fs-body-lg);\r\n    color: var(--dda-on-surface-0);\r\n    position: relative;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 10px;\r\n}\r\n.light-mode .dda-input-field-group{\r\n    background: var(--dda-neutral-100);\r\n    border: 1px solid var(--dda-neutral-90);\r\n    color: var(--dda-neutral-0);\r\n}\r\n.dda-input-field {\r\n    width: 100%;\r\n    height: 55px;\r\n    padding: 8px 16px;\r\n    background: var(--dda-surface-100);\r\n    border: 1px solid var(--dda-surface-90);\r\n    border-radius: 8px;\r\n    font-size: var(--dda-fs-body-lg);\r\n    color: var(--dda-on-surface-0);\r\n    font-weight: var(--dda-fw-400);\r\n}\r\n.light-mode .dda-input-field{\r\n    background: var(--dda-neutral-100);\r\n    border: 1px solid var(--dda-neutral-90);\r\n    color: var(--dda-neutral-0);\r\n}\r\n.dda-input-size-small .dda-input-field-group,\r\n.dda-input-size-small .dda-input-field {\r\n    height: 48px;\r\n    padding: 8px 12px;\r\n}\r\n\r\n.dda-input-focus-filled .dda-phone-field,\r\n.dda-input-focus .dda-input-field-group,\r\n.dda-input-field:focus {\r\n    outline: none;\r\n    border-color: var(--dda-color-primary-40);\r\n    box-shadow: 0px 0px 0px 3px var(--dda-primary-variant-95);\r\n}\r\n.light-mode.dda-input-focus-filled .dda-phone-field,\r\n.light-mode.dda-input-focus .dda-input-field-group,\r\n.light-mode .dda-input-field:focus {\r\n    outline: none;\r\n    border-color: var(--dda-primary-40);\r\n    box-shadow: 0px 0px 0px 3px var(--dda-primary-95);\r\n}\r\n\r\n.dda-input-dropdown-btn {\r\n    min-width: 110px;\r\n    position: relative;\r\n    display: inline-block;\r\n    padding: 0;\r\n}\r\n\r\n.dda-dropdown-select {\r\n    width: 100%;\r\n    height: 32px;\r\n    display: flex;\r\n    justify-content: space-between;\r\n    background: transparent;\r\n    border: transparent;\r\n    font-size: var(--dda-fs-body-lg);\r\n    color: var(--dda-on-surface-0);\r\n    padding: 0;\r\n    align-items: center;\r\n    cursor: pointer;\r\n    gap: 6px;\r\n}\r\n.light-mode .dda-dropdown-select{\r\n    color: var(--dda-neutral-0);\r\n}\r\n\r\n.dda-dropdown-select img {\r\n    width: 24px;\r\n}\r\n\r\n\r\n.dda-dropdown-container {\r\n    position: relative;\r\n    width: auto;\r\n    /* min-width: 140px; */\r\n}\r\n.dda-dropdown-container.bg-transparent .dda-dropdown-header{\r\n    padding: 0px;\r\n    height: auto;\r\n    background: transparent;\r\n    border: transparent;\r\n    box-shadow: none;\r\n}\r\n.dda-dropdown-header {\r\n    width: auto;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 15px;\r\n}\r\n.dda-dropdown-header .three-dots{\r\n    font-size: 25px;\r\n    color: var(--dda-neutral-variant-60);\r\n}\r\n.dda-dropdown-header .three-dots path{\r\n    fill: var(--dda-neutral-variant-60);\r\n}\r\n.dda-dropdown-header .dda-dropdown-text{\r\n    flex: 1;\r\n    display: flex;\r\n    justify-content: space-between;\r\n    gap: 15px;\r\n}\r\n.dda-dropdown-header .dda-dropdown-text span{\r\n    color: var(--dda-on-surface-variant-30);\r\n    display: flex;\r\n    align-items: center;\r\n}\r\n.light-mode .dda-dropdown-text span{\r\n    color: var(--dda-neutral-variant-30);\r\n}\r\n.dda-dropdown-header .dda-dropdown-text i{\r\n    font-size: 31px;\r\n}\r\n.dda-dropdown-header .dda-dropdown-text path{\r\n    fill: var(--dda-on-surface-variant-30);\r\n}\r\n.light-mode .dda-dropdown-header .dda-dropdown-text path{\r\n    fill: var(--dda-neutral-variant-30);\r\n}\r\n.dda-dropdown-header:focus .three-dots path{\r\n    fill: var(--dda-on-surface-variant-30);\r\n}\r\n.dda-input-dropdown-list {\r\n    width: 100%;\r\n    min-width: 150px;\r\n    max-height: 200px;\r\n    background-color: var(--dda-neutral-100);\r\n    border: 1px solid var(--dda-neutral-90);\r\n    border-radius: 8px;\r\n    overflow-y: auto;\r\n    position: absolute;\r\n    top: 100%;\r\n    margin-top: 1px;\r\n    inset-inline-start: 0px;\r\n    z-index: 9999;\r\n    box-shadow: 0px 8px 10px -6px #1018281A;\r\n}\r\n\r\n.dda-input-dropdown-list::-webkit-scrollbar-track {\r\n    border-radius: 4px;\r\n}\r\n\r\n.dda-input-dropdown-list::-webkit-scrollbar {\r\n    width: 4px;\r\n}\r\n\r\n.dda-input-dropdown-list::-webkit-scrollbar-thumb {\r\n    border-radius: 4px;\r\n    background-color: var(--dda-neutral-variant-30);\r\n}\r\n\r\n.dda-input-dropdown-item {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 7px;\r\n    width: 100%;\r\n    font-size: var(--dda-fs-body-lg);\r\n    background: transparent;\r\n    border: transparent;\r\n    padding: 10px;\r\n    cursor: pointer;\r\n}\r\n\r\n.dda-input-dropdown-item:focus-visible,\r\n.dda-input-dropdown-item:hover {\r\n    background-color: var(--dda-neutral-variant-95);\r\n    outline: 0;\r\n}\r\n\r\n.dda-helper-text {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n    font-size: var(--dda-fs-body-md);\r\n    color: var(--dda-on-surface-variant-30);\r\n}\r\n.light-mode .dda-helper-text{\r\n    color: var(--dda-neutral-30);\r\n}\r\n.dda-error-message {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    font-size: var(--dda-fs-body-md);\r\n    color: var(--dda-color-error-40);\r\n}\r\n\r\n.dda-helper-text i,\r\n.dda-helper-text svg,\r\n.dda-error-message i,\r\n.dda-error-message svg  {\r\n    font-size: 24px;\r\n}\r\n\r\n.dda-validation-error .dda-input-field-group,\r\n.dda-validation-error .dda-input-field {\r\n    color: var(--dda-color-error-40);\r\n    border-color: var(--dda-color-error-40);\r\n    box-shadow: none;\r\n}\r\n\r\n.light-mode.dda-validation-error .dda-input-field-group,\r\n.light-mode.dda-validation-error .dda-input-field {\r\n    color: var(--dda-error-40);\r\n    border-color: var(--dda-error-40);\r\n    box-shadow: none;\r\n}\r\n\r\n.dda-validation-error .icon-close,\r\n.dda-validation-error .dda-error-message,\r\n.dda-validation-error .dda-field-group-input,\r\n.dda-validation-error .dda-file-input span {\r\n    color: var(--dda-color-error-40) !important;\r\n}\r\n\r\n.light-mode.dda-validation-error .icon-close,\r\n.light-mode.dda-validation-error .dda-error-message,\r\n.light-mode.dda-validation-error .dda-field-group-input,\r\n.light-mode.dda-validation-error .dda-file-input span {\r\n    color: var(--dda-error-40) !important;\r\n}\r\n\r\n.dda-validation-error .dda-input-field::-ms-input-placeholder,\r\n.dda-validation-error .dda-field-group-input::-ms-input-placeholder {\r\n    color: var(--dda-color-error-40);\r\n}\r\n\r\n.light-mode.dda-validation-error .dda-input-field::-ms-input-placeholder,\r\n.light-mode.dda-validation-error .dda-field-group-input::-ms-input-placeholder {\r\n    color: var(--dda-error-40);\r\n}\r\n\r\n.dda-validation-error .dda-input-field::placeholder,\r\n.dda-validation-error .dda-field-group-input::placeholder {\r\n    color: var(--dda-color-error-40);\r\n}\r\n\r\n.light-mode.dda-validation-error .dda-input-field::placeholder,\r\n.light-mode.dda-validation-error .dda-field-group-input::placeholder {\r\n    color: var(--dda-error-40);\r\n}\r\n\r\n.dda-input-disabled .dda-input-label,\r\n.dda-input-disabled .dda-helper-text,\r\n.dda-input-disabled .dda-error-message,\r\n.dda-input-disabled i,\r\n.dda-input-disabled .dda-dropdown-select,\r\n.dda-input-disabled .dda-file-input span,\r\n.dda-input-disabled .dda-file-choose {\r\n    color: var(--dda-neutral-60) !important;\r\n}\r\n\r\n.dda-input-disabled .dda-input-field-group,\r\n.dda-input-disabled .dda-input-field {\r\n    background: var(--dda-neutral-92);\r\n    border-color: var(--dda-neutral-90);\r\n    color: var(--dda-neutral-60) !important;\r\n    box-shadow: none;\r\n    pointer-events: none;\r\n}\r\n.dda-input-disabled i{\r\n    color: var(--dda-neutral-variant-60);\r\n}\r\n.dda-input-disabled svg path{\r\n    fill: var(--dda-neutral-variant-60);\r\n}\r\n.dda-input-disabled .dda-input-field::-ms-input-placeholder {\r\n    color: var(--dda-neutral-60);\r\n}\r\n\r\n.dda-input-disabled .dda-input-field::placeholder {\r\n    color: var(--dda-neutral-60);\r\n}\r\n\r\n.dda-input-disabled .dda-btn {\r\n    background-color: var(--dda-neutral-70) !important;\r\n    border-color: var(--dda-neutral-70) !important;\r\n}\r\n\r\n.dda-input-disabled .dda-dropdown-select img,\r\n.dda-input-disabled .dda-input-field-wrapper img {\r\n    filter: grayscale(1);\r\n}\r\n\r\n/*Specifications*/\r\n\r\n/*Number Field*/\r\n.dda-number-field .dda-field-group-input {\r\n    padding-inline-end: 10px;\r\n    border-inline-end: solid 1px var(--dda-neutral-90);\r\n}\r\n\r\n.dda-number-field .dda-field-group-input:focus,\r\n.dda-phone-field .dda-field-group-input:focus {\r\n    border-inline-start: solid 1px var(--dda-color-primary-40);\r\n}\r\n\r\n.dda-number-field .dda-input-dropdown-btn {\r\n    min-width: 80px;\r\n}\r\n\r\n.dda-number-field .dda-input-dropdown-list {\r\n    top: 44px;\r\n}\r\n\r\n.dda-input-size-small .dda-number-field .dda-input-dropdown-list {\r\n    top: 41px;\r\n}\r\n\r\n/*text ares*/\r\n.dda-input-textarea {\r\n    height: auto;\r\n    min-height: 120px;\r\n    resize: vertical;\r\n}\r\n\r\n/*Search Field*/\r\n.dda-search-area {\r\n    position: relative;\r\n}\r\n\r\n.dda-search-area .icon-left {\r\n    position: absolute;\r\n    top: 16px;\r\n    inset-inline-start: 15px;\r\n    font-size: 24px;\r\n    color: var(--dda-on-surface-variant-30);\r\n}\r\n\r\n.light-mode .dda-search-area .icon-left{\r\n    color: var(--dda-neutral-variant-30);\r\n}\r\n\r\n.dda-input-size-small .dda-search-area .icon-left {\r\n    top: 14px;\r\n}\r\n\r\n.dda-search-area .dda-search-btngroup {\r\n    height: 40px;\r\n    position: absolute;\r\n    top: 7px;\r\n    inset-inline-end: 7px;\r\n    display: inline-flex;\r\n    align-items: center;\r\n}\r\n\r\n.dda-input-size-small .dda-search-btngroup {\r\n    top: 4px;\r\n}\r\n\r\n.dda-search-area .icon-close {\r\n    display: flex;\r\n    color: var(--dda-on-surface-variant-30);\r\n    font-size: 20px;\r\n    margin: 0px;\r\n    margin-inline-end: 15px;\r\n    padding: 0px;\r\n    background: none;\r\n    border: 0;\r\n    cursor: pointer;\r\n}\r\n\r\n.light-mode .dda-search-area .icon-close{\r\n    color: var(--dda-neutral-variant-30);\r\n}\r\n\r\n.dda-search-field {\r\n    padding: 8px 40px 8px 40px;\r\n}\r\n\r\n.dda-search-action .dda-search-field {\r\n    padding: 8px 110px 8px 40px;\r\n}\r\n\r\n.dda-search-sm .icon-left {\r\n    top: 14px;\r\n}\r\n\r\n.dda-search-sm .dda-search-btngroup {\r\n    top: 4px;\r\n}\r\n\r\n/*Phone Field*/\r\n.dda-phone-field-group {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n}\r\n\r\n.dda-phone-field-group.dda-phone-field-small {\r\n    height: 48px;\r\n}\r\n\r\n.dda-phone-field-group.focused,\r\n.dda-phone-field-group.filled {\r\n    outline: none;\r\n    border-color: var(--dda-color-primary-40);\r\n    box-shadow: 0px 0px 0px 3px var(--dda-primary-variant-95);\r\n}\r\n\r\n.dda-phone-field-group.error {\r\n    border-color: var(--dda-color-error-40);\r\n    box-shadow: none;\r\n}\r\n\r\n.phone-field-country-code {\r\n    border: none;\r\n    background: none;\r\n    margin-inline-end: 0.5rem;\r\n    font-size: 1rem;\r\n    color: var(--dda-on-surface-0);\r\n}\r\n\r\n.phone-field-country-code:focus-within {\r\n    outline: 0;\r\n}\r\n\r\n.dda-phone-field .dda-input-dropdown-list {\r\n    top: 44px;\r\n}\r\n\r\n.dda-input-size-small .dda-phone-field .dda-input-dropdown-list {\r\n    top: 41px;\r\n}\r\n\r\n/*Credit Card Field*/\r\n.dda-credit-card-field .dda-creditcard-icon {\r\n    width: 40px;\r\n    position: absolute;\r\n    top: 14px;\r\n    inset-inline-start: 15px;\r\n}\r\n\r\n.dda-input-size-small .dda-creditcard-icon {\r\n    top: 11px;\r\n}\r\n\r\n.dda-credit-card-field .dda-input-field {\r\n    padding: 8px 16px 8px 65px;\r\n}\r\n\r\n/*Select Field*/\r\n.dda-select-header {\r\n    cursor: pointer;\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n    gap: 10px;\r\n}\r\n\r\n.dda-select-header i {\r\n    font-size: 28px;\r\n    color: var(--dda-on-surface-variant-30);\r\n}\r\n\r\n/*Rich Text Editor*/\r\n.dda-input-container.dda-richtext-editor {\r\n    gap: 0px;\r\n}\r\n\r\n.dda-richtext-editor .dda-input-label {\r\n    margin-bottom: 8px;\r\n}\r\n\r\n.dda-richtext-editor .dda-helper-text,\r\n.dda-richtext-editor .dda-error-message {\r\n    margin-top: 8px;\r\n}\r\n\r\n.dda-richtext-editor .ql-toolbar.ql-snow {\r\n    border: 1px solid var(--dda-neutral-90) !important;\r\n    border-radius: 8px 8px 0 0;\r\n}\r\n\r\n.dda-richeditor-field {\r\n    border: 1px solid var(--dda-neutral-90) !important;\r\n    border-radius: 0 0 8px 8px;\r\n}\r\n\r\n.dda-richeditor-field .ql-editor {\r\n    height: 100px;\r\n    font-size: var(--dda-fs-body-lg);\r\n}\r\n\r\n/*Attach Files*/\r\n\r\n.dda-input-field-group.dda-attach-file {\r\n    padding-inline-end: 6px;\r\n}\r\n\r\n.dda-file-input {\r\n    width: 100%;\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n}\r\n\r\n.dda-file-input span {\r\n    font-size: var(--dda-fs-body-lg);\r\n    color: var(--dda-on-surface-variant-30);\r\n}\r\n.light-mode .dda-file-input span{\r\n    color: var(--dda-neutral-variant-30);\r\n}\r\n.dda-file-choose {\r\n    height: 40px;\r\n    background-color: var(--dda-neutral-100);\r\n    border: solid 1px var(--dda-neutral-90);\r\n    color: var(--dda-color-primary-40);\r\n    font-weight: var(--dda-fw-500);\r\n    padding: 8px 16px;\r\n    border-radius: 8px;\r\n    cursor: pointer;\r\n}\r\n\r\n.light-mode .dda-file-choose {\r\n    color: var(--dda-primary-40);\r\n}\r\n\r\n.dda-input-disabled .dda-file-choose {\r\n    background-color: var(--dda-neutral-95);\r\n}\r\n\r\n.dda-file-choose input {\r\n    display: none;\r\n}\r\n\r\n.dda-file-details {\r\n    width: 100%;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n    padding-inline-end: 10px;\r\n}\r\n\r\n.dda-file-icon {\r\n    width: 34px;\r\n    height: 34px;\r\n}\r\n\r\n.dda-items {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 8px;\r\n}\r\n.dda-file-details .remove-file{\r\n    margin: 0;\r\n    padding: 0;\r\n    background: transparent;\r\n    border: transparent;\r\n}\r\n.dda-file-details .remove-file svg{\r\n    font-size: var(--dda-fs-body-lg);\r\n}\r\n.dda-file-name {\r\n    font-size: var(--dda-fs-body-lg);\r\n}\r\n\r\n.dda-remove-file {\r\n    font-size: 20px;\r\n    background: transparent;\r\n    border: transparent;\r\n    color: var(--dda-on-surface-variant-30);\r\n    cursor: pointer;\r\n    padding: 0px;\r\n}\r\n\r\n","@import url('./color.css');\r\n@import url('./typography.css');\r\n@import url('./templates/cards.css');\r\n@import url('./templates/dda-grid.css');\r\n@import url('./templates/dashboard-navigation.css');\r\n@import url('./templates/dda-footer-main.css');\r\n@import url('./templates/side-navigation.css');\r\n@import url('./templates/table.css');\r\n@import url('./templates/website-footer.css');\r\n@import url('./templates/dda-header-main.css');\r\n\r\n@font-face {\r\n  font-family: \"Dubai\";\r\n  src: url(\"../assets/fonts/dubai/DubaiLight.eot\");\r\n  src: url(\"../assets/fonts/dubai/DubaiLight.eot\") format(\"embedded-opentype\"),\r\n    url(\"../assets/fonts/dubai/DubaiLight.woff2\") format(\"woff2\"),\r\n    url(\"../assets/fonts/dubai/DubaiLight.woff\") format(\"woff\"),\r\n    url(\"../assets/fonts/dubai/DubaiLight.ttf\") format(\"truetype\"),\r\n    url(\"../assets/fonts/dubai/DubaiLight.svg#DubaiLight\") format(\"svg\");\r\n  font-weight: 300;\r\n  font-style: normal;\r\n}\r\n\r\n@font-face {\r\n  font-family: \"Dubai\";\r\n  src: url(\"../assets/fonts/dubai/DubaiRegular.eot\");\r\n  src: url(\"../assets/fonts/dubai/DubaiRegular.eot\") format(\"embedded-opentype\"),\r\n    url(\"../assets/fonts/dubai/DubaiRegular.woff2\") format(\"woff2\"),\r\n    url(\"../assets/fonts/dubai/DubaiRegular.woff\") format(\"woff\"),\r\n    url(\"../assets/fonts/dubai/DubaiRegular.ttf\") format(\"truetype\"),\r\n    url(\"../assets/fonts/dubai/DubaiRegular.svg#DubaiRegular\") format(\"svg\");\r\n  font-weight: 400;\r\n  font-style: normal;\r\n}\r\n\r\n@font-face {\r\n  font-family: \"Dubai\";\r\n  src: url(\"../assets/fonts/dubai/DubaiMedium.eot\");\r\n  src: url(\"../assets/fonts/dubai/DubaiMedium.eot\") format(\"embedded-opentype\"),\r\n    url(\"../assets/fonts/dubai/DubaiMedium.woff2\") format(\"woff2\"),\r\n    url(\"../assets/fonts/dubai/DubaiMedium.woff\") format(\"woff\"),\r\n    url(\"../assets/fonts/dubai/DubaiMedium.ttf\") format(\"truetype\"),\r\n    url(\"../assets/fonts/dubai/DubaiMedium.svg#DubaiMedium\") format(\"svg\");\r\n  font-weight: 500;\r\n  font-style: normal;\r\n}\r\n\r\n@font-face {\r\n  font-family: \"Dubai\";\r\n  src: url(\"../assets/fonts/dubai/DubaiBold.eot\");\r\n  src: url(\"../assets/fonts/dubai/DubaiBold.eot\") format(\"embedded-opentype\"),\r\n    url(\"../assets/fonts/dubai/DubaiBold.woff2\") format(\"woff2\"),\r\n    url(\"../assets/fonts/dubai/DubaiBold.woff\") format(\"woff\"),\r\n    url(\"../assets/fonts/dubai/DubaiBold.ttf\") format(\"truetype\"),\r\n    url(\"../assets/fonts/dubai/DubaiBold.svg#DubaiBold\") format(\"svg\");\r\n  font-weight: 700;\r\n  font-style: normal;\r\n}\r\n:root{\r\n  --font-family-main: 'Dubai', sans-serif;\r\n}\r\nbody {\r\n  font-family: \"Dubai\", Helvetica, sans-serif;\r\n  font-size: var(--dda-fs-body-lg);\r\n  font-weight: var(--dda-fw-400);\r\n  line-height: 1.5;\r\n  color: var(--dda-on-surface-0);\r\n  margin: 0;\r\n}\r\n\r\n* {\r\n  box-sizing: border-box;\r\n}\r\n\r\nh1,\r\nh2,\r\nh3,\r\nh4,\r\nh5,\r\nh6,\r\np {\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\n\r\nh1, .dda-h1 { font-size: var(--dda-h1);  font-weight: 400; }\r\n\r\nh2, .dda-h2 { font-size: var(--dda-h2);  font-weight: 400; }\r\n\r\nh3, .dda-h3 { font-size: var(--dda-h3);  font-weight: 400; }\r\n\r\nh4, .dda-h4 { font-size: var(--dda-h4);  font-weight: 400; }\r\n\r\nh5, .dda-h5 { font-size: var(--dda-h5);  font-weight: 400; }\r\n\r\nh6, .dda-h6 { font-size: var(--dda-h6);  font-weight: 400; }\r\n\r\n.dda-title { font-size: var(--dda-title);  font-weight: 500; }\r\n\r\n.dda-body { font-size: var(--dda-body);  font-weight: 400; }\r\n\r\n.dda-caption { font-size: var(--dda-caption);  font-weight: 400; }\r\n\r\n.dda-label { font-size: var(--dda-label);  font-weight: 400; }\r\n\r\n\r\na,\r\na:hover {\r\n  text-decoration: none;\r\n}\r\n\r\nbutton {\r\n  cursor: pointer;\r\n}\r\n\r\nul {\r\n  margin: 0;\r\n  padding: 0;\r\n  list-style: none;\r\n}\r\n\r\n/*Colors*/\r\n.dda-bg-primary {\r\n  background-color: var(--dda-color-primary-40);\r\n}\r\n\r\n.dda-bg-secondary {\r\n  background-color: var(--dda-color-secondary);\r\n}\r\n\r\n.dda-color-black {\r\n  color: var(--dda-on-surface-0);\r\n}\r\n\r\n/* Border-radius classes */\r\n.dda-rounded-sm {\r\n  border-radius: 4px !important;\r\n}\r\n\r\n.dda-rounded-md {\r\n  border-radius: 8px !important;\r\n}\r\n\r\n.dda-rounded-lg {\r\n  border-radius: 12px !important;\r\n}\r\n\r\n.dda-rounded-circle {\r\n  border-radius: 100px !important;\r\n}\r\n\r\n.dda-gap-16 {\r\n  gap: 4rem !important;\r\n}\r\n\r\n.dda-gap-12 {\r\n  gap: 3rem !important;\r\n}\r\n\r\n.dda-gap-10 {\r\n  gap: 2.5rem !important;\r\n}\r\n\r\n.dda-gap-8 {\r\n  gap: 2rem !important;\r\n}\r\n\r\n.dda-gap-6 {\r\n  gap: 1.5rem !important;\r\n}\r\n\r\n.dda-gap-5 {\r\n  gap: 1.25rem !important;\r\n}\r\n\r\n.dda-gap-4 {\r\n  gap: 1rem !important;\r\n}\r\n\r\n.dda-gap-3 {\r\n  gap: .75rem !important;\r\n}\r\n\r\n.dda-gap-2 {\r\n  gap: .5rem !important;\r\n}\r\n\r\n.dda-gap-1 {\r\n  gap: 0.375rem !important;\r\n}\r\n\r\n\r\n::-ms-input-placeholder {\r\n  color: #8E9191;\r\n}\r\n\r\n::placeholder {\r\n  color: #8E9191;\r\n}\r\n\r\n.dda-flex {\r\n  display: flex;\r\n}\r\n\r\n.dda-flex-column {\r\n  flex-direction: column;\r\n}\r\n\r\n.dda-inline-flex {\r\n  display: inline-flex;\r\n}\r\n\r\n.dda-align-center {\r\n  align-items: center;\r\n}\r\n\r\n.dda-justify-space {\r\n  justify-content: space-between;\r\n}\r\n\r\n.dda-justify-center {\r\n  justify-content: center;\r\n}\r\n\r\n.m-0 {\r\n  margin: 0px !important;\r\n}\r\n\r\n.p-0 {\r\n  padding: 0px !important;\r\n}\r\n\r\n.py-0 {\r\n  padding-top: 0px !important;\r\n  padding-bottom: 0px !important;\r\n}\r\n\r\n.border-right {\r\n  border-inline-end: solid 1px #E5E5E5;\r\n}\r\n\r\n.visually-hidden{\r\n  position: absolute;\r\n  width: 1px;\r\n  height: 1px;\r\n  margin: -1px;\r\n  padding: 0;\r\n  overflow: hidden;\r\n  clip: rect(0, 0, 0, 0);\r\n  border: 0;\r\n}\r\n","import { Component, Prop, State, h, Host } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'dda-select',\r\n  styleUrls: ['../../global/input.css', '../../global/global.css',],\r\n  shadow: false,\r\n})\r\nexport class Ddaselect {\r\n  @Prop() label: string;\r\n  @Prop() options: string; // Receive options as a string\r\n    // @Prop() options: { title: string }[];\r\n  @Prop() selected: string;\r\n  @Prop() disabled: boolean = false;\r\n  @Prop() error?: string;\r\n  @Prop() error_message: string;\r\n  @Prop() helper_text: string;\r\n  @State() is_open: boolean = false;\r\n  @Prop() size?: string;\r\n  //@Prop() validationtype?: string;\r\n  @Prop() custom_class?: string = ''; \r\n  @Prop() component_mode?: string; \r\n  @Prop() aria_label?: string;\r\n  @Prop() button_id: string;\r\n\r\n  private get parsedOptions(): string[] {\r\n    try {\r\n      return JSON.parse(this.options);\r\n    } catch {\r\n      return [];\r\n    }\r\n  }\r\n\r\n  toggleSelect() {\r\n    if (!this.disabled) {\r\n      this.is_open = !this.is_open;\r\n    }\r\n  }\r\n\r\n  selectOption(option: string) {\r\n    if (!this.disabled) {\r\n      this.selected = option;\r\n      this.is_open = false;\r\n    }\r\n  }\r\n\r\n  render() {\r\n\r\n    \r\n    return (\r\n      <Host>\r\n        <div class={`dda-input-container ${this.custom_class} ${this.component_mode} ${this.disabled ? 'dda-input-disabled' : ''} ${this.is_open ? 'show' : 'hide'} dda-input-size-${this.size} dda-validation-${this.error} `}>\r\n          {this.label && <label htmlFor={this.button_id} class=\"dda-input-label\">{this.label}</label>}\r\n          <div class=\"dda-dropdown-container\">\r\n            <button aria-label={this.aria_label} id={this.button_id} type=\"button\" class=\"dda-input-field dda-select-header\" onClick={() => {this.toggleSelect()}}>\r\n              {this.selected || 'Select an option'}\r\n              <i class={`material-icons`}>{this.is_open ? 'keyboard_arrow_up' : 'keyboard_arrow_down'}</i>\r\n            </button>\r\n            {this.is_open && (\r\n              <div class=\"dda-input-dropdown-list dda-select-list\">\r\n                {this.parsedOptions.length > 0 ? (\r\n                  this.parsedOptions.map(option => (\r\n                    <button type=\"button\"\r\n                      class={`dda-input-dropdown-item ${this.selected === option ? 'selected' : ''}`}\r\n                      onClick={() => this.selectOption(option)}\r\n                    >\r\n                      {option}\r\n                    </button>\r\n                  ))\r\n                ) : (\r\n                  <div class=\"dda-input-dropdown-item\">No options available</div>\r\n                )}\r\n              </div>\r\n            )}\r\n          </div>\r\n          {this.helper_text && <span class=\"dda-helper-text\">{this.helper_text}</span>}\r\n          {this.error_message && <span class=\"dda-error-message\">{this.error_message}</span>}\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/esm/dda-sticky-footer.entry.js.map

@@ -1 +0,0 @@
-{"file":"dda-sticky-footer.entry.js","mappings":";;AAAA,MAAM,kBAAkB,GAAG,EAAE,CAAC;AAC9B,8BAAe,kBAAkB;;MCMpB,eAAe;;;;IAqD1B,MAAM;QACJ,QACE,+DAAQ,KAAK,EAAC,YAAY,IACxB,4DAAK,KAAK,EAAC,gBAAgB,IAEzB,4DAAK,KAAK,EAAC,iCAAiC,IAC1C,6DACE,2DAAI,KAAK,EAAC,eAAe,IACvB,oEAAa,UAAU,EAAE,IAAI,CAAC,oBAAoB,EAAE,WAAW,EAAC,EAAE,EAAC,QAAQ,EAAC,KAAK,IAC/E,0DAAG,IAAI,EAAE,IAAI,CAAC,iBAAiB,IAC7B,4DAAK,GAAG,EAAE,IAAI,CAAC,gBAAgB,EAAE,GAAG,EAAE,IAAI,CAAC,gBAAgB,GAAI,CAC7D,CACQ,CACX,EACL,2DAAI,KAAK,EAAC,eAAe,IACvB,oEAAa,UAAU,EAAE,IAAI,CAAC,wBAAwB,EAAE,WAAW,EAAC,EAAE,EAAC,QAAQ,EAAC,KAAK,IACnF,0DAAG,IAAI,EAAE,IAAI,CAAC,qBAAqB,IACjC,4DAAK,GAAG,EAAE,IAAI,CAAC,oBAAoB,EAAE,GAAG,EAAE,IAAI,CAAC,oBAAoB,GAAI,CACrE,CACQ,CACX,EACL,2DAAI,KAAK,EAAC,eAAe,IACvB,oEAAa,UAAU,EAAE,IAAI,CAAC,mBAAmB,EAAE,WAAW,EAAC,EAAE,EAAC,QAAQ,EAAC,KAAK,IAC9E,0DAAG,IAAI,EAAE,IAAI,CAAC,gBAAgB,IAC5B,4DAAK,GAAG,EAAE,IAAI,CAAC,eAAe,EAAE,GAAG,EAAE,IAAI,CAAC,eAAe,GAAI,EAC5D,IAAI,CAAC,gBAAgB,IAAI,+DAAO,IAAI,CAAC,gBAAgB,CAAQ,CAC5D,CACQ,CACX,CACF,CACD,EAGN,4DAAK,KAAK,EAAC,mCAAmC,IAC5C,2DAAI,KAAK,EAAC,WAAW,IACnB,6DACE,oEAAa,UAAU,EAAE,IAAI,CAAC,gBAAgB,EAAE,WAAW,EAAC,EAAE,EAAC,QAAQ,EAAC,KAAK,IAC3E,0DAAG,IAAI,EAAE,IAAI,CAAC,aAAa,IACzB,4DAAK,GAAG,EAAE,IAAI,CAAC,YAAY,EAAE,GAAG,EAAE,IAAI,CAAC,YAAY,GAAI,CACrD,CACQ,CACX,EACL,6DACE,oEAAa,UAAU,EAAE,IAAI,CAAC,iBAAiB,EAAE,WAAW,EAAC,EAAE,EAAC,QAAQ,EAAC,KAAK,IAC5E,0DAAG,IAAI,EAAE,IAAI,CAAC,cAAc,IAC1B,4DAAK,GAAG,EAAE,IAAI,CAAC,aAAa,EAAE,GAAG,EAAE,IAAI,CAAC,aAAa,GAAI,CACvD,CACQ,CACX,EACL,6DACE,oEAAa,UAAU,EAAE,IAAI,CAAC,gBAAgB,EAAE,WAAW,EAAC,EAAE,EAAC,QAAQ,EAAC,KAAK,IAC3E,0DAAG,IAAI,EAAE,IAAI,CAAC,aAAa,IACzB,4DAAK,GAAG,EAAE,IAAI,CAAC,YAAY,EAAE,GAAG,EAAE,IAAI,CAAC,YAAY,GAAI,CACrD,CACQ,CACX,CACF,CACD,EAGN,4DAAK,KAAK,EAAC,kCAAkC,IAC3C,6DACE,2DAAI,KAAK,EAAC,WAAW,IACnB,wEACE,YAAY,EAAC,gBAAgB,EAC7B,UAAU,EAAE,IAAI,CAAC,kBAAkB,EACnC,IAAI,EAAE,IAAI,CAAC,kBAAkB,EAC7B,IAAI,EAAC,IAAI,IAER,IAAI,CAAC,kBAAkB,CACR,CACf,EACL,2DAAI,KAAK,EAAC,WAAW,IACnB,wEACE,YAAY,EAAC,gBAAgB,EAC7B,UAAU,EAAE,IAAI,CAAC,cAAc,EAC/B,IAAI,EAAE,IAAI,CAAC,cAAc,EACzB,IAAI,EAAC,IAAI,IAER,IAAI,CAAC,cAAc,CACJ,CACf,EACL,2DAAI,KAAK,EAAC,eAAe,IACvB,oEAAa,UAAU,EAAE,IAAI,CAAC,aAAa,EAAE,WAAW,EAAC,EAAE,EAAC,QAAQ,EAAC,KAAK,IACxE,0DAAG,IAAI,EAAE,IAAI,CAAC,UAAU,IACtB,4DAAK,GAAG,EAAE,IAAI,CAAC,SAAS,EAAE,GAAG,EAAE,IAAI,CAAC,SAAS,GAAI,CAC/C,CACQ,CACX,EACL,2DAAI,KAAK,EAAC,eAAe,IACvB,oEAAa,UAAU,EAAE,IAAI,CAAC,eAAe,EAAE,WAAW,EAAC,EAAE,EAAC,QAAQ,EAAC,KAAK,IAC1E,0DAAG,IAAI,EAAE,IAAI,CAAC,YAAY,IACxB,4DAAK,GAAG,EAAE,IAAI,CAAC,WAAW,EAAE,GAAG,EAAE,IAAI,CAAC,WAAW,GAAI,CACnD,CACQ,CACX,CACF,CACD,CACF,CACC,EACT;KACH;;;;;;","names":[],"sources":["src/components/dda-sticky-footer/dda-sticky-footer.css?tag=dda-sticky-footer&encapsulation=shadow","src/components/dda-sticky-footer/dda-sticky-footer.tsx"],"sourcesContent":["","import { Component, Prop, h } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'dda-sticky-footer',\r\n  styleUrl: 'dda-sticky-footer.css',\r\n  shadow: true,\r\n})\r\nexport class DdaStickyFooter {\r\n  /** Left Section Props */\r\n  @Prop() happinessIconHref: string;\r\n  @Prop() happinessIconSrc: string;\r\n  @Prop() happinessIconAlt: string;\r\n  @Prop() happinessIconTooltip: string;\r\n\r\n  @Prop() accessibilityIconHref: string;\r\n  @Prop() accessibilityIconSrc: string;\r\n  @Prop() accessibilityIconAlt: string;\r\n  @Prop() accessibilityIconTooltip: string;\r\n\r\n  @Prop() servicesIconHref: string;\r\n  @Prop() servicesIconSrc: string;\r\n  @Prop() servicesIconAlt: string;\r\n  @Prop() servicesIconTooltip: string;\r\n  @Prop() servicesIconText: string;\r\n\r\n  /** Middle Section Props */\r\n  @Prop() firstLogoHref: string;\r\n  @Prop() firstLogoSrc: string;\r\n  @Prop() firstLogoAlt: string;\r\n  @Prop() firstLogoTooltip: string;\r\n\r\n  @Prop() secondLogoHref: string;\r\n  @Prop() secondLogoSrc: string;\r\n  @Prop() secondLogoAlt: string;\r\n  @Prop() secondLogoTooltip: string;\r\n\r\n  @Prop() thirdLogoHref: string;\r\n  @Prop() thirdLogoSrc: string;\r\n  @Prop() thirdLogoAlt: string;\r\n  @Prop() thirdLogoTooltip: string;\r\n\r\n  /** Right Section Props */\r\n  @Prop() locationButtonHref: string;\r\n  @Prop() locationButtonText: string;\r\n  @Prop() locationButtonIcon: string;\r\n\r\n  @Prop() newsButtonHref: string;\r\n  @Prop() newsButtonText: string;\r\n  @Prop() newsButtonIcon: string;\r\n\r\n  @Prop() aiIconHref: string;\r\n  @Prop() aiIconSrc: string;\r\n  @Prop() aiIconAlt: string;\r\n  @Prop() aiIconTooltip: string;\r\n\r\n  @Prop() chatIconHref: string;\r\n  @Prop() chatIconSrc: string;\r\n  @Prop() chatIconAlt: string;\r\n  @Prop() chatIconTooltip: string;\r\n\r\n  render() {\r\n    return (\r\n      <footer class=\"dda-footer\">\r\n        <div class=\"footer-content\">\r\n          {/* Left Section */}\r\n          <div class=\"dda-footer-item dda-footer-left\">\r\n            <ul>\r\n              <li class=\"foot-icon-btn\">\r\n                <dda-tooltip title_text={this.happinessIconTooltip} description=\"\" position=\"top\">\r\n                  <a href={this.happinessIconHref}>\r\n                    <img src={this.happinessIconSrc} alt={this.happinessIconAlt} />\r\n                  </a>\r\n                </dda-tooltip>\r\n              </li>\r\n              <li class=\"foot-icon-btn\">\r\n                <dda-tooltip title_text={this.accessibilityIconTooltip} description=\"\" position=\"top\">\r\n                  <a href={this.accessibilityIconHref}>\r\n                    <img src={this.accessibilityIconSrc} alt={this.accessibilityIconAlt} />\r\n                  </a>\r\n                </dda-tooltip>\r\n              </li>\r\n              <li class=\"foot-icon-btn\">\r\n                <dda-tooltip title_text={this.servicesIconTooltip} description=\"\" position=\"top\">\r\n                  <a href={this.servicesIconHref}>\r\n                    <img src={this.servicesIconSrc} alt={this.servicesIconAlt} />\r\n                    {this.servicesIconText && <span>{this.servicesIconText}</span>}\r\n                  </a>\r\n                </dda-tooltip>\r\n              </li>\r\n            </ul>\r\n          </div>\r\n\r\n          {/* Middle Section */}\r\n          <div class=\"dda-footer-item dda-footer-middle\">\r\n            <ul class=\"foot-logo\">\r\n              <li>\r\n                <dda-tooltip title_text={this.firstLogoTooltip} description=\"\" position=\"top\">\r\n                  <a href={this.firstLogoHref}>\r\n                    <img src={this.firstLogoSrc} alt={this.firstLogoAlt} />\r\n                  </a>\r\n                </dda-tooltip>\r\n              </li>\r\n              <li>\r\n                <dda-tooltip title_text={this.secondLogoTooltip} description=\"\" position=\"top\">\r\n                  <a href={this.secondLogoHref}>\r\n                    <img src={this.secondLogoSrc} alt={this.secondLogoAlt} />\r\n                  </a>\r\n                </dda-tooltip>\r\n              </li>\r\n              <li>\r\n                <dda-tooltip title_text={this.thirdLogoTooltip} description=\"\" position=\"top\">\r\n                  <a href={this.thirdLogoHref}>\r\n                    <img src={this.thirdLogoSrc} alt={this.thirdLogoAlt} />\r\n                  </a>\r\n                </dda-tooltip>\r\n              </li>\r\n            </ul>\r\n          </div>\r\n\r\n          {/* Right Section */}\r\n          <div class=\"dda-footer-item dda-footer-right\">\r\n            <ul>\r\n              <li class=\"foot-menu\">\r\n                <dda-link-button\r\n                  button_color=\"onsurface-link\"\r\n                  start_icon={this.locationButtonIcon}\r\n                  href={this.locationButtonHref}\r\n                  size=\"sm\"\r\n                >\r\n                  {this.locationButtonText}\r\n                </dda-link-button>\r\n              </li>\r\n              <li class=\"foot-menu\">\r\n                <dda-link-button\r\n                  button_color=\"onsurface-link\"\r\n                  start_icon={this.newsButtonIcon}\r\n                  href={this.newsButtonHref}\r\n                  size=\"sm\"\r\n                >\r\n                  {this.newsButtonText}\r\n                </dda-link-button>\r\n              </li>\r\n              <li class=\"foot-icon-btn\">\r\n                <dda-tooltip title_text={this.aiIconTooltip} description=\"\" position=\"top\">\r\n                  <a href={this.aiIconHref}>\r\n                    <img src={this.aiIconSrc} alt={this.aiIconAlt} />\r\n                  </a>\r\n                </dda-tooltip>\r\n              </li>\r\n              <li class=\"foot-icon-btn\">\r\n                <dda-tooltip title_text={this.chatIconTooltip} description=\"\" position=\"top\">\r\n                  <a href={this.chatIconHref}>\r\n                    <img src={this.chatIconSrc} alt={this.chatIconAlt} />\r\n                  </a>\r\n                </dda-tooltip>\r\n              </li>\r\n            </ul>\r\n          </div>\r\n        </div>\r\n      </footer>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/esm/dda-tabs.entry.js.map

@@ -1 +0,0 @@
-{"file":"dda-tabs.entry.js","mappings":";;AAAA,MAAM,UAAU,GAAG,24FAA24F,CAAC;AAC/5F,sBAAe,UAAU;;ACDzB,MAAM,SAAS,GAAG,y6uDAAy6uD,CAAC;AAC57uD,sBAAe,SAAS;;MCMX,OAAO;IALpB;;QAMU,SAAI,GAAyB,MAAM,CAAC;QACpC,gBAAW,GAA0F,iBAAiB,CAAC;QACvH,kBAAa,GAAY,KAAK,CAAC;QAC/B,iBAAY,GAAY,EAAE,CAAC;QAK1B,eAAU,GAAW,CAAC,CAAC;QAEhC,SAAI,GAAG;YACL,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,qBAAqB,EAAE;YAC/C,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,qBAAqB,EAAE;YAC/C,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,qBAAqB,EAAE;SAChD,CAAC;KAuBH;IArBC,YAAY,CAAC,KAAa;QACxB,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;KACzB;IAED,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAE,sBAAsB,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,cAAc,EAAE,IAC7F,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,KAAK,MACxB,cAAQ,EAAE,EAAE,IAAI,CAAC,SAAS,gBAAc,IAAI,CAAC,UAAU,EAAE,IAAI,EAAC,QAAQ,EACpE,KAAK,EAAE,iBAAiB,IAAI,CAAC,UAAU,KAAK,KAAK,GAAG,QAAQ,GAAG,EAAE,EAAE,EACnE,OAAO,EAAE,MAAM,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,IAEtC,IAAI,CAAC,IAAI,KAAK,WAAW,IAAI,SAAG,KAAK,EAAE,gBAAgB,IAAG,GAAG,CAAC,IAAI,CAAK,EACxE,gBAAO,GAAG,CAAC,KAAK,CAAQ,CACjB,CACV,CAAC,CACE,CACD,EACP;KACH;;;;;;","names":[],"sources":["src/components/dda-tabs/dda-tabs.css?tag=dda-tabs","src/global/global.css?tag=dda-tabs","src/components/dda-tabs/dda-tabs.tsx"],"sourcesContent":[".dda-tabs-container {\r\n  display: inline-flex;\r\n}\r\n\r\n.dda-tab-item {\r\n  background: transparent;\r\n  display: inline-flex;\r\n  font-size: 16px;\r\n  color: var(--dda-on-surface-0);\r\n  gap: 6px;\r\n  align-items: center;\r\n  border: 0;\r\n  border-radius: 8px;\r\n  padding: 10px 16px;\r\n  cursor: pointer;\r\n  position: relative;\r\n  transition: all 0.25s ease-in-out;\r\n}\r\n\r\n.light-mode .dda-tab-item{\r\n  color: var(--dda-neutral-0);\r\n}\r\n\r\n.dda-tab-item i {\r\n  font-size: 22px;\r\n  color: var(--dda-neutral-variant-30);\r\n}\r\n\r\n.dda-tab-item.active span,\r\n.dda-tab-item:hover span {\r\n  font-weight: var(--dda-fw-500);\r\n}\r\n\r\n.dda-tab-default .dda-tab-item.active,\r\n.dda-tab-default .dda-tab-item:hover {\r\n  background: var(--dda-neutral-variant-94);\r\n  color: var(--dda-color-primary-40);\r\n}\r\n\r\n.light-mode.dda-tab-default .dda-tab-item.active,\r\n.light-mode.dda-tab-default .dda-tab-item:hover {\r\n  color: var(--dda-primary-40);\r\n}\r\n\r\n.dda-tab-default .dda-tab-item.active i,\r\n.dda-tab-default .dda-tab-item:hover i {\r\n  color: var(--dda-color-primary-40);\r\n}\r\n\r\n.dda-tab-filed .dda-tab-item.active,\r\n.dda-tab-filed .dda-tab-item:hover {\r\n  background: var(--dda-color-primary-40);\r\n  color: var(--dda-neutral-100);\r\n}\r\n\r\n.light-mode.dda-tab-filed .dda-tab-item.active,\r\n.light-mode.dda-tab-filed .dda-tab-item:hover {\r\n  background: var(--dda-primary-40);\r\n}\r\n\r\n.dda-tab-filed .dda-tab-item.active i,\r\n.dda-tab-filed .dda-tab-item:hover i {\r\n  color: var(--dda-neutral-100);\r\n}\r\n\r\n.dda-tab-underline {\r\n  border-bottom: solid 1px var(--dda-neutral-90);\r\n}\r\n\r\n\r\n.dda-tab-underline .dda-tab-item::after,\r\n.dda-tab-underline-filled .dda-tab-item::after {\r\n  content: \"\";\r\n  position: absolute;\r\n  bottom: 0;\r\n  left: 50%;\r\n  width: 0;\r\n  height: 4px;\r\n  background-color: var(--dda-color-primary-40);\r\n  border-radius: 8px 8px 0px 0px;\r\n  transform: translateX(-50%);\r\n  transition: all 0.25s ease-in-out;\r\n}\r\n.light-mode.dda-tab-underline .dda-tab-item::after,\r\n.light-mode.dda-tab-underline-filled .dda-tab-item::after{\r\n  background-color: var(--dda-primary-40);\r\n}\r\n.dda-tab-underline .dda-tab-item:hover::after,\r\n.dda-tab-underline .dda-tab-item.active::after,\r\n.dda-tab-underline-filled .dda-tab-item:hover::after,\r\n.dda-tab-underline-filled .dda-tab-item.active::after{\r\n  width: calc(100% - 32px);\r\n}\r\n\r\n.dda-tab-underline .dda-tab-item.active,\r\n.dda-tab-underline .dda-tab-item.active i,\r\n.dda-tab-underline-filled .dda-tab-item.active,\r\n.dda-tab-underline-filled .dda-tab-item.active i,\r\n.dda-tab-underline .dda-tab-item:hover,\r\n.dda-tab-underline .dda-tab-item:hover i,\r\n.dda-tab-underline-filled .dda-tab-item:hover,\r\n.dda-tab-underline-filled .dda-tab-item:hover i {\r\n  color: var(--dda-color-primary-40);\r\n}\r\n\r\n.light-mode.dda-tab-underline .dda-tab-item.active,\r\n.light-mode.dda-tab-underline .dda-tab-item.active i,\r\n.light-mode.dda-tab-underline-filled .dda-tab-item.active,\r\n.light-mode.dda-tab-underline-filled .dda-tab-item.active i,\r\n.light-mode.dda-tab-underline .dda-tab-item:hover,\r\n.light-mode.dda-tab-underline .dda-tab-item:hover i,\r\n.light-mode.dda-tab-underline-filled .dda-tab-item:hover,\r\n.light-mode.dda-tab-underline-filled .dda-tab-item:hover i {\r\n  color: var(--dda-primary-40);\r\n}\r\n\r\n.dda-tab-underline-filled .dda-tab-item.active,\r\n.dda-tab-underline-filled .dda-tab-item:hover {\r\n  background: var(--dda-neutral-variant-94);\r\n}","@import url('./color.css');\r\n@import url('./typography.css');\r\n@import url('./templates/cards.css');\r\n@import url('./templates/dda-grid.css');\r\n@import url('./templates/dashboard-navigation.css');\r\n@import url('./templates/dda-footer-main.css');\r\n@import url('./templates/side-navigation.css');\r\n@import url('./templates/table.css');\r\n@import url('./templates/website-footer.css');\r\n@import url('./templates/dda-header-main.css');\r\n\r\n@font-face {\r\n  font-family: \"Dubai\";\r\n  src: url(\"../assets/fonts/dubai/DubaiLight.eot\");\r\n  src: url(\"../assets/fonts/dubai/DubaiLight.eot\") format(\"embedded-opentype\"),\r\n    url(\"../assets/fonts/dubai/DubaiLight.woff2\") format(\"woff2\"),\r\n    url(\"../assets/fonts/dubai/DubaiLight.woff\") format(\"woff\"),\r\n    url(\"../assets/fonts/dubai/DubaiLight.ttf\") format(\"truetype\"),\r\n    url(\"../assets/fonts/dubai/DubaiLight.svg#DubaiLight\") format(\"svg\");\r\n  font-weight: 300;\r\n  font-style: normal;\r\n}\r\n\r\n@font-face {\r\n  font-family: \"Dubai\";\r\n  src: url(\"../assets/fonts/dubai/DubaiRegular.eot\");\r\n  src: url(\"../assets/fonts/dubai/DubaiRegular.eot\") format(\"embedded-opentype\"),\r\n    url(\"../assets/fonts/dubai/DubaiRegular.woff2\") format(\"woff2\"),\r\n    url(\"../assets/fonts/dubai/DubaiRegular.woff\") format(\"woff\"),\r\n    url(\"../assets/fonts/dubai/DubaiRegular.ttf\") format(\"truetype\"),\r\n    url(\"../assets/fonts/dubai/DubaiRegular.svg#DubaiRegular\") format(\"svg\");\r\n  font-weight: 400;\r\n  font-style: normal;\r\n}\r\n\r\n@font-face {\r\n  font-family: \"Dubai\";\r\n  src: url(\"../assets/fonts/dubai/DubaiMedium.eot\");\r\n  src: url(\"../assets/fonts/dubai/DubaiMedium.eot\") format(\"embedded-opentype\"),\r\n    url(\"../assets/fonts/dubai/DubaiMedium.woff2\") format(\"woff2\"),\r\n    url(\"../assets/fonts/dubai/DubaiMedium.woff\") format(\"woff\"),\r\n    url(\"../assets/fonts/dubai/DubaiMedium.ttf\") format(\"truetype\"),\r\n    url(\"../assets/fonts/dubai/DubaiMedium.svg#DubaiMedium\") format(\"svg\");\r\n  font-weight: 500;\r\n  font-style: normal;\r\n}\r\n\r\n@font-face {\r\n  font-family: \"Dubai\";\r\n  src: url(\"../assets/fonts/dubai/DubaiBold.eot\");\r\n  src: url(\"../assets/fonts/dubai/DubaiBold.eot\") format(\"embedded-opentype\"),\r\n    url(\"../assets/fonts/dubai/DubaiBold.woff2\") format(\"woff2\"),\r\n    url(\"../assets/fonts/dubai/DubaiBold.woff\") format(\"woff\"),\r\n    url(\"../assets/fonts/dubai/DubaiBold.ttf\") format(\"truetype\"),\r\n    url(\"../assets/fonts/dubai/DubaiBold.svg#DubaiBold\") format(\"svg\");\r\n  font-weight: 700;\r\n  font-style: normal;\r\n}\r\n:root{\r\n  --font-family-main: 'Dubai', sans-serif;\r\n}\r\nbody {\r\n  font-family: \"Dubai\", Helvetica, sans-serif;\r\n  font-size: var(--dda-fs-body-lg);\r\n  font-weight: var(--dda-fw-400);\r\n  line-height: 1.5;\r\n  color: var(--dda-on-surface-0);\r\n  margin: 0;\r\n}\r\n\r\n* {\r\n  box-sizing: border-box;\r\n}\r\n\r\nh1,\r\nh2,\r\nh3,\r\nh4,\r\nh5,\r\nh6,\r\np {\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\n\r\nh1, .dda-h1 { font-size: var(--dda-h1);  font-weight: 400; }\r\n\r\nh2, .dda-h2 { font-size: var(--dda-h2);  font-weight: 400; }\r\n\r\nh3, .dda-h3 { font-size: var(--dda-h3);  font-weight: 400; }\r\n\r\nh4, .dda-h4 { font-size: var(--dda-h4);  font-weight: 400; }\r\n\r\nh5, .dda-h5 { font-size: var(--dda-h5);  font-weight: 400; }\r\n\r\nh6, .dda-h6 { font-size: var(--dda-h6);  font-weight: 400; }\r\n\r\n.dda-title { font-size: var(--dda-title);  font-weight: 500; }\r\n\r\n.dda-body { font-size: var(--dda-body);  font-weight: 400; }\r\n\r\n.dda-caption { font-size: var(--dda-caption);  font-weight: 400; }\r\n\r\n.dda-label { font-size: var(--dda-label);  font-weight: 400; }\r\n\r\n\r\na,\r\na:hover {\r\n  text-decoration: none;\r\n}\r\n\r\nbutton {\r\n  cursor: pointer;\r\n}\r\n\r\nul {\r\n  margin: 0;\r\n  padding: 0;\r\n  list-style: none;\r\n}\r\n\r\n/*Colors*/\r\n.dda-bg-primary {\r\n  background-color: var(--dda-color-primary-40);\r\n}\r\n\r\n.dda-bg-secondary {\r\n  background-color: var(--dda-color-secondary);\r\n}\r\n\r\n.dda-color-black {\r\n  color: var(--dda-on-surface-0);\r\n}\r\n\r\n/* Border-radius classes */\r\n.dda-rounded-sm {\r\n  border-radius: 4px !important;\r\n}\r\n\r\n.dda-rounded-md {\r\n  border-radius: 8px !important;\r\n}\r\n\r\n.dda-rounded-lg {\r\n  border-radius: 12px !important;\r\n}\r\n\r\n.dda-rounded-circle {\r\n  border-radius: 100px !important;\r\n}\r\n\r\n.dda-gap-16 {\r\n  gap: 4rem !important;\r\n}\r\n\r\n.dda-gap-12 {\r\n  gap: 3rem !important;\r\n}\r\n\r\n.dda-gap-10 {\r\n  gap: 2.5rem !important;\r\n}\r\n\r\n.dda-gap-8 {\r\n  gap: 2rem !important;\r\n}\r\n\r\n.dda-gap-6 {\r\n  gap: 1.5rem !important;\r\n}\r\n\r\n.dda-gap-5 {\r\n  gap: 1.25rem !important;\r\n}\r\n\r\n.dda-gap-4 {\r\n  gap: 1rem !important;\r\n}\r\n\r\n.dda-gap-3 {\r\n  gap: .75rem !important;\r\n}\r\n\r\n.dda-gap-2 {\r\n  gap: .5rem !important;\r\n}\r\n\r\n.dda-gap-1 {\r\n  gap: 0.375rem !important;\r\n}\r\n\r\n\r\n::-ms-input-placeholder {\r\n  color: #8E9191;\r\n}\r\n\r\n::placeholder {\r\n  color: #8E9191;\r\n}\r\n\r\n.dda-flex {\r\n  display: flex;\r\n}\r\n\r\n.dda-flex-column {\r\n  flex-direction: column;\r\n}\r\n\r\n.dda-inline-flex {\r\n  display: inline-flex;\r\n}\r\n\r\n.dda-align-center {\r\n  align-items: center;\r\n}\r\n\r\n.dda-justify-space {\r\n  justify-content: space-between;\r\n}\r\n\r\n.dda-justify-center {\r\n  justify-content: center;\r\n}\r\n\r\n.m-0 {\r\n  margin: 0px !important;\r\n}\r\n\r\n.p-0 {\r\n  padding: 0px !important;\r\n}\r\n\r\n.py-0 {\r\n  padding-top: 0px !important;\r\n  padding-bottom: 0px !important;\r\n}\r\n\r\n.border-right {\r\n  border-inline-end: solid 1px #E5E5E5;\r\n}\r\n\r\n.visually-hidden{\r\n  position: absolute;\r\n  width: 1px;\r\n  height: 1px;\r\n  margin: -1px;\r\n  padding: 0;\r\n  overflow: hidden;\r\n  clip: rect(0, 0, 0, 0);\r\n  border: 0;\r\n}\r\n","import { Component, Prop, State, h, Host } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'dda-tabs',\r\n  styleUrls: ['dda-tabs.css', '../../global/global.css'],\r\n  shadow: false,\r\n})\r\nexport class DdaTabs {\r\n  @Prop() type: 'text' | 'text-icon' = 'text'; // Default to text type\r\n  @Prop() hover_style: 'dda-tab-default' | 'dda-tab-filed' | 'dda-tab-underline' |'dda-tab-underline-filled' = 'dda-tab-default'; // Default to light background hover style\r\n  @Prop() border_bottom: boolean = false; // Default to no border-bottom\r\n  @Prop() custom_class?: string = ''; \r\n  @Prop() component_mode?: string; \r\n  @Prop() button_id?: string;\r\n  @Prop() aria_label: string;\r\n\r\n  @State() active_tab: number = 0;\r\n\r\n  tabs = [\r\n    { title: 'Tab 1', icon: 'sentiment_satisfied' },\r\n    { title: 'Tab 2', icon: 'sentiment_satisfied' },\r\n    { title: 'Tab 3', icon: 'sentiment_satisfied' },\r\n  ];\r\n\r\n  setActiveTab(index: number) {\r\n    this.active_tab = index;\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <div class={`dda-tabs-container ${this.hover_style} ${this.custom_class} ${this.component_mode}`}>\r\n          {this.tabs.map((tab, index) => (\r\n            <button id={this.button_id} aria-label={this.aria_label} type=\"button\"\r\n              class={`dda-tab-item  ${this.active_tab === index ? 'active' : ''}`}\r\n              onClick={() => this.setActiveTab(index)}\r\n            >\r\n              {this.type === 'text-icon' && <i class={`material-icons`}>{tab.icon}</i>}\r\n              <span>{tab.title}</span>\r\n            </button>\r\n          ))}\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}"],"version":3}