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

package/dist/cjs/dda-accordion.cjs.entry.js.map

@@ -1 +0,0 @@
-{"file":"dda-accordion.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,eAAe,GAAG,q9CAAq9C,CAAC;AAC9+C,2BAAe,eAAe;;ACD9B,MAAM,SAAS,GAAG,y6uDAAy6uD,CAAC;AAC57uD,2BAAe,SAAS;;MCMX,YAAY;IALzB;;QAMU,WAAM,GAA8B,WAAW,CAAC;QAChD,gBAAW,GAAW,kBAAkB,CAAC;QACzC,qBAAgB,GAAW,qCAAqC,CAAC;QACjE,iBAAY,GAAY,EAAE,CAAC;QAG1B,WAAM,GAAY,KAAK,CAAC;KA0BlC;IAxBC,eAAe;QACb,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;KAC5B;IAED,MAAM;QACJ,QACEA,QAACC,UAAI,uDACHD,kEAAK,KAAK,EAAE,uBAAuB,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,cAAc,EAAE,IAC1FA,kEAAK,KAAK,EAAC,kBAAkB,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,eAAe,EAAE,IACjEA,kEAAK,KAAK,EAAC,gBAAgB,IACzBA,gEAAG,KAAK,EAAC,gBAAgB,WAAS,EAClCA,mEAAM,KAAK,EAAC,aAAa,IAAE,IAAI,CAAC,WAAW,CAAQ,CAC/C,EACNA,gEAAG,KAAK,EAAE,2BAA2B,IAAG,IAAI,CAAC,MAAM,GAAG,mBAAmB,GAAG,qBAAqB,CAAK,CAClG,EACL,IAAI,CAAC,MAAM,KACVA,kEAAK,KAAK,EAAC,gBAAgB,IACzBA,gEAAG,KAAK,EAAC,kBAAkB,IAAE,IAAI,CAAC,gBAAgB,CAAK,CACnD,CACP,CACG,CACD,EACP;KACH;;;;;;","names":["h","Host"],"sources":["src/components/dda-accordion/dda-accordion.css?tag=dda-accordion","src/global/global.css?tag=dda-accordion","src/components/dda-accordion/dda-accordion.tsx"],"sourcesContent":[".accordion-container{\r\n  display: grid;\r\n  gap: 20px;\r\n}\r\n.accordion-container.bg-border {\r\n  background-color: var(--dda-surface-100);\r\n  border: 1px solid var(--dda-surface-90);\r\n  border-radius: 5px;\r\n  padding: 16px 20px;\r\n}\r\n.light-mode.accordion-container.bg-border{\r\n  background-color: var(--dda-neutral-100);\r\n  border: 1px solid var(--dda-neutral-90);\r\n}\r\n.accordion-header {\r\n  display: flex;\r\n  justify-content: space-between;\r\n  align-items: center;\r\n  cursor: pointer;\r\n}\r\n.accordion-header .header-content {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 8px;\r\n}\r\n.header-content i,\r\n.header-content svg{\r\n  font-size: 25px;\r\n  color: var(--dda-on-surface-variant-30);\r\n}\r\n.light-mode .header-content i,\r\n.light-mode .header-content svg{\r\n  color: var(--dda-neutral-variant-30);\r\n}\r\n.header-content svg path{\r\n  fill: var(--dda-on-surface-variant-30);\r\n}\r\n.light-mode .header-content svg path{\r\n  fill: var(--dda-neutral-variant-30);\r\n}\r\n.accordion-header .header-text {\r\n  font-size: var(--dda-fs-title-sm);\r\n  color: var(--dda-on-surface-0);\r\n  font-weight: var(--dda-fw-500);\r\n}\r\n.light-mode .accordion-header .header-text{\r\n  color: var(--dda-neutral-0);\r\n}\r\n.accordion-header .arrow-icon {\r\n  font-size: 25px;\r\n  color: var(--dda-on-surface-variant-30);\r\n  transition: transform 0.2s ease-in-out;\r\n}\r\n.light-mode .accordion-header .arrow-icon{\r\n  color: var(--dda-neutral-variant-30);\r\n}\r\n.accordion-header.active .arrow-icon{\r\n  transform: rotate(180deg);\r\n}\r\n.accordion-body {\r\n  color: var(--dda-on-surface-variant-30);\r\n}\r\n.light-mode .accordion-body{\r\n  color: var(--dda-neutral-variant-30);\r\n}\r\n.accordion-body .body-description {\r\n  margin: 0;\r\n}\r\n.accordion-container.no-border {\r\n  border: 1px solid transparent;\r\n  gap: 12px\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-accordion',\r\n  styleUrls: ['dda-accordion.css', '../../global/global.css',],\r\n  shadow: false,\r\n})\r\nexport class DdaAccordion {\r\n  @Prop() design: 'bg-border' | 'no-border' = 'bg-border'; // Default to background and border design\r\n  @Prop() header_text: string = 'Accordion Header'; // Default header text\r\n  @Prop() body_description: string = 'This is the accordion body content.'; // Default body description\r\n  @Prop() custom_class?: string = ''; \r\n  @Prop() component_mode?: string; \r\n\r\n  @State() isOpen: boolean = false;\r\n\r\n  toggleAccordion() {\r\n    this.isOpen = !this.isOpen;\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <div class={`accordion-container ${this.design} ${this.custom_class} ${this.component_mode}`}>\r\n          <div class=\"accordion-header\" onClick={() => this.toggleAccordion()}>\r\n            <div class=\"header-content\">\r\n              <i class=\"material-icons\">info</i>\r\n              <span class=\"header-text\">{this.header_text}</span>\r\n            </div>\r\n            <i class={`material-icons arrow-icon`}>{this.isOpen ? 'keyboard_arrow_up' : 'keyboard_arrow_down'}</i>\r\n          </div>\r\n          {this.isOpen && (\r\n            <div class=\"accordion-body\">\r\n              <p class=\"body-description\">{this.body_description}</p>\r\n            </div>\r\n          )}\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/cjs/dda-alert.cjs.entry.js.map

@@ -1 +0,0 @@
-{"file":"dda-alert.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,WAAW,GAAG,qxGAAqxG,CAAC;AAC1yG,uBAAe,WAAW;;ACD1B,MAAM,SAAS,GAAG,y6uDAAy6uD,CAAC;AAC57uD,uBAAe,SAAS;;ACDxB,MAAM,YAAY,GAAG,64ZAA64Z,CAAC;AACn6Z,uBAAe,YAAY;;MCMd,QAAQ;IALrB;;QAMU,SAAI,GAA4B,SAAS,CAAC;QAC1C,cAAS,GAA6C,MAAM,CAAC;QAC7D,eAAU,GAAW,EAAE,CAAC;QACxB,gBAAW,GAAW,EAAE,CAAC;QACzB,gBAAW,GAAW,EAAE,CAAC;QACzB,iBAAY,GAAY,EAAE,CAAC;KA0BpC;IAnBC,MAAM;QACJ,QAEEA,kEAAK,KAAK,EAAE,uBAAuB,IAAI,CAAC,IAAI,cAAc,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,cAAc,EAAE,IACpHA,gEAAG,KAAK,EAAC,gBAAgB,WAAS,EAClCA,kEAAK,KAAK,EAAC,eAAe,IACxBA,iEAAI,KAAK,EAAC,aAAa,IAAE,IAAI,CAAC,UAAU,CAAM,EAC9CA,gEAAG,KAAK,EAAC,mBAAmB,IAAE,IAAI,CAAC,WAAW,CAAK,EACnDA,kEAAK,KAAK,EAAC,gBAAgB,IACzBA,gEAAG,IAAI,EAAE,IAAI,CAAC,UAAU,gBAAe,EACvCA,gEAAG,IAAI,EAAE,IAAI,CAAC,WAAW,cAAa,CAElC,CACF,EACNA,qEAAQ,KAAK,EAAC,iBAAiB,EAAC,OAAO,EAAE,IAAI,CAAC,YAAY,IAAEA,gEAAG,KAAK,EAAC,gBAAgB,YAAU,CAAS,CACpG,EAEN;KACH;;;;;;","names":["h"],"sources":["src/components/dda-alert/dda-alert.css?tag=dda-alert","src/global/global.css?tag=dda-alert","src/global/dda-button.css?tag=dda-alert","src/components/dda-alert/dda-alert.tsx"],"sourcesContent":[".dda-alert{\r\n  padding: 24px;\r\n  border-radius: 10px;\r\n  display: flex;\r\n  justify-content: space-between;\r\n  gap: 16px\r\n}\r\n.dda-alert .alert-content{\r\n  width: 100%;\r\n  display: grid;\r\n  row-gap: 10px;\r\n}\r\n.dda-alert .alert-title{\r\n  margin: 0; \r\n  font-size: 24px;\r\n  line-height: 24px;\r\n}\r\n.dda-alert .alert-description{\r\n  margin: 0;\r\n}\r\n.dda-alert .info-icon{\r\n  font-size: 20px;\r\n  padding-top: 2px;\r\n}\r\n.alert-btn-wrap{\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: end;\r\n  gap: 15px;\r\n}\r\n.alert-btn-wrap a{\r\n  font-size: 16px;\r\n  font-weight: 500;\r\n}\r\n.dda-alert-close{\r\n  width: 20px;\r\n  height: 2px;\r\n  background: transparent;\r\n  border: transparent;\r\n  font-size: 18px;\r\n}\r\n\r\n.dda-alert-info{\r\n  background: var(--dda-primary-variant-95);\r\n  border: solid 1px var(--dda-color-primary-40);\r\n  color: var(--dda-color-primary-40);\r\n}\r\n.light-mode.dda-alert-info{\r\n  background: var(--dda-primary-95);\r\n  border: solid 1px var(--dda-primary-40);\r\n  color: var(--dda-primary-40);\r\n}\r\n/**/\r\n.dda-alert-warning{\r\n  background: var(--dda-warning-variant-95);\r\n  border: solid 1px var(--dda-color-warning-40);\r\n  color: var(--dda-color-warning-40);\r\n}\r\n.light-mode.dda-alert-warning{\r\n  background: var(--dda-warning-95);\r\n  border: solid 1px var(--dda-warning-40);\r\n  color: var(--dda-warning-40);\r\n}\r\n/**/\r\n.dda-alert-error{\r\n  background: var(--dda-error-variant-95);\r\n  border: solid 1px var(--dda-color-error-40);\r\n  color: var(--dda-color-error-40);\r\n}\r\n.light-mode.dda-alert-error{\r\n  background: var(--dda-error-95);\r\n  border: solid 1px var(--dda-error-40);\r\n  color: var(--dda-error-40);\r\n}\r\n/**/\r\n.dda-alert-success{\r\n  background: var(--dda-success-variant-95);\r\n  border: solid 1px var(--dda-color-success-40);\r\n  color: var(--dda-color-success-40);\r\n}\r\n.light-mode.dda-alert-success{\r\n  background: var(--dda-success-95);\r\n  border: solid 1px var(--dda-success-40);\r\n  color: var(--dda-success-40);\r\n}\r\n/**/\r\n.dda-alert-secondary{\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  box-shadow: 0px 1px 2px 0px #1018280A;\r\n}\r\n.light-mode.dda-alert-secondary{\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/**/\r\n.dda-alert-info.dda-alert-secondary .info-icon,\r\n.dda-alert-info .alert-btn-wrap a,\r\n.dda-alert-info .dda-alert-close{\r\n  color: var(--dda-color-primary-40);\r\n}\r\n.light-mode.dda-alert-info.dda-alert-secondary .info-icon,\r\n.light-mode.dda-alert-info .alert-btn-wrap a,\r\n.light-mode.dda-alert-info .dda-alert-close{\r\n  color: var(--dda-primary-40);\r\n}\r\n/**/\r\n.dda-alert-warning.dda-alert-secondary .info-icon,\r\n.dda-alert-warning .alert-btn-wrap a,\r\n.dda-alert-warning .dda-alert-close{\r\n  color: var(--dda-color-warning-40);\r\n}\r\n.light-mode.dda-alert-warning.dda-alert-secondary .info-icon,\r\n.light-mode.dda-alert-warning .alert-btn-wrap a,\r\n.light-mode.dda-alert-warning .dda-alert-close{\r\n  color: var(--dda-warning-40);\r\n}\r\n/**/\r\n.dda-alert-error.dda-alert-secondary .info-icon,\r\n.dda-alert-error .alert-btn-wrap a,\r\n.dda-alert-error .dda-alert-close{\r\n  color: var(--dda-color-error-40);\r\n}\r\n.light-mode.dda-alert-error.dda-alert-secondary .info-icon,\r\n.light-mode.dda-alert-error .alert-btn-wrap a,\r\n.light-mode.dda-alert-error .dda-alert-close{\r\n  color: var(--dda-error-40);\r\n}\r\n/**/\r\n.dda-alert-success.dda-alert-secondary .info-icon,\r\n.dda-alert-success .alert-btn-wrap a,\r\n.dda-alert-success .dda-alert-close{\r\n  color: var(--dda-color-success-40);\r\n}\r\n.light-mode.dda-alert-success.dda-alert-secondary .info-icon,\r\n.light-mode.dda-alert-success .alert-btn-wrap a,\r\n.light-mode.dda-alert-success .dda-alert-close{\r\n  color: var(--dda-success-40);\r\n}\r\n/**/\r\n\r\n\r\n.dda-alert-secondary .alert-btn-wrap a,\r\n.dda-alert-secondary .dda-alert-close{\r\n  color: var(--dda-color-neutral-0) !important;\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 } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'dda-alert',\r\n  styleUrls: ['dda-alert.css', '../../global/global.css', '../../global/dda-button.css'],\r\n  shadow: false,\r\n})\r\nexport class DdaAlert {\r\n  @Prop() type: 'primary' | 'secondary' = 'primary';\r\n  @Prop() variation: 'info' | 'warning' | 'error' | 'success' = 'info';\r\n  @Prop() title_text: string = '';\r\n  @Prop() description: string = '';\r\n  @Prop() button_text: string = '';\r\n  @Prop() custom_class?: string = ''; \r\n  @Prop() component_mode?: string; \r\n  @Prop() component_id?: string;\r\n  @Prop() first_link?: string;\r\n  @Prop() second_link?: string;\r\n  @Prop() clickHandler?: (event: MouseEvent) => void;\r\n\r\n  render() {\r\n    return (\r\n\r\n      <div class={`dda-alert dda-alert-${this.type} dda-alert-${this.variation} ${this.custom_class} ${this.component_mode}`}>\r\n        <i class=\"material-icons\">info</i>\r\n        <div class=\"alert-content\">\r\n          <h4 class=\"alert-title\">{this.title_text}</h4>\r\n          <p class=\"alert-description\">{this.description}</p>\r\n          <div class=\"alert-btn-wrap\">\r\n            <a href={this.first_link}>Secondary</a>\r\n            <a href={this.second_link}>Primary</a>\r\n            \r\n          </div>\r\n        </div>\r\n        <button class=\"dda-alert-close\" onClick={this.clickHandler}><i class=\"material-icons\">close</i></button>\r\n      </div>\r\n\r\n    );\r\n  }\r\n}"],"version":3}

package/dist/cjs/dda-attach-file.cjs.entry.js.map

@@ -1 +0,0 @@
-{"file":"dda-attach-file.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,SAAS,GAAG,osFAAosF;;ACAttF,MAAM,gBAAgB,GAAG,wyFAAwyF;;ACAj0F,MAAM,UAAU,GAAG,gzEAAgzE;;ACAn0E,MAAM,WAAW,GAAG,w3FAAw3F;;ACA54F,MAAM,WAAW,GAAG,okEAAokE;;ACAxlE,MAAM,WAAW,GAAG,gwCAAgwC;;ACApxC,MAAM,aAAa,GAAG,gtDAAgtD;;ACAtuD,MAAM,QAAQ,GAAG,4pWAA4pW,CAAC;AAC9qW,4BAAe,QAAQ;;ACDvB,MAAM,SAAS,GAAG,y6uDAAy6uD,CAAC;AAC57uD,4BAAe,SAAS;;MCaX,aAAa;IAL1B;;QAYW,SAAI,GAAgB,IAAI,CAAC;QAC1B,iBAAY,GAAY,EAAE,CAAC;QAE3B,eAAU,GAAY,EAAE,CAAC;QACzB,sBAAiB,GAAY,EAAE,CAAC;QAIhC,cAAS,GAAG;YAClB,GAAG,EAAEA,SAAO;YACZ,IAAI,EAAEC,gBAAO;YACb,IAAI,EAAEC,UAAQ;YACd,IAAI,EAAEC,WAAS;YACf,GAAG,EAAEC,WAAS;YACd,GAAG,EAAEA,WAAS;YACd,IAAI,EAAEA,WAAS;YACf,GAAG,EAAEC,WAAS;YACd,GAAG,EAAEA,WAAS;YACd,GAAG,EAAEC,aAAW;SACjB,CAAC;KA6DH;IA3DC,eAAe,CAAC,KAAK;QACnB,MAAM,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;QACjC,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE;YACpB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC;SACtB;aAAM;YACL,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;SAClB;KACF;IAED,UAAU;QACR,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;KAClB;IAED,WAAW,CAAC,QAAgB;QAC1B,MAAM,SAAS,GAAG,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC,WAAW,EAAE,CAAC;QAC1D,OAAO,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC,IAAI,0BAA0B,CAAC;KAChE;IAED,MAAM;QACJ,MAAM,UAAU,GAAG;YACjB,qBAAqB;YACrB,IAAI,CAAC,eAAe,GAAG,kBAAkB,IAAI,CAAC,eAAe,EAAE,GAAG,EAAE;YACpE,IAAI,CAAC,IAAI,GAAG,kBAAkB,IAAI,CAAC,IAAI,EAAE,GAAG,EAAE;YAC9C,IAAI,CAAC,UAAU,GAAG,aAAa,IAAI,CAAC,UAAU,EAAE,GAAG,EAAE;YACrD,IAAI,CAAC,YAAY;YACjB,IAAI,CAAC,cAAc;SACpB,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QAE5B,QACEC,QAACC,UAAI,uDACHD,kEAAK,KAAK,EAAE,UAAU,IACnB,IAAI,CAAC,KAAK,IAAIA,oEAAO,OAAO,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAC,iBAAiB,IAAE,IAAI,CAAC,KAAK,CAAS,EAC1FA,kEAAK,KAAK,EAAC,uCAAuC,IAC/C,IAAI,CAAC,IAAI,IACRA,iBAAK,KAAK,EAAC,kBAAkB,IAC3BA,iBAAK,KAAK,EAAC,WAAW,IACpBA,iBAAK,GAAG,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,GAAG,EAAC,WAAW,EAAC,KAAK,EAAC,eAAe,GAAG,EACpFA,kBAAM,KAAK,EAAC,eAAe,IAAE,IAAI,CAAC,IAAI,CAAC,IAAI,CAAQ,CAC/C,EACNA,oBAAQ,EAAE,EAAE,IAAI,CAAC,SAAS,gBAAc,IAAI,CAAC,iBAAiB,EAAE,KAAK,EAAC,aAAa,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,UAAU,EAAE,IAClHA,eAAG,KAAK,EAAC,gBAAgB,iBAAa,MAAM,YAAU,CAC/C,CACL,KAENA,iBAAK,KAAK,EAAC,gBAAgB,IACzBA,yCAA6B,EAC7BA,mBAAO,OAAO,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAC,iBAAiB,mBAEpDA,mBAAO,EAAE,EAAE,IAAI,CAAC,QAAQ,gBAAc,IAAI,CAAC,UAAU,EAAE,IAAI,EAAC,MAAM,EAAC,OAAO,EAAE,CAAC,KAAK,OAAM,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,CAAA,EAAC,GAAI,CAClH,CACJ,CACP,CACG,EACL,IAAI,CAAC,WAAW,IAAIA,mEAAM,KAAK,EAAC,iBAAiB,IAAE,IAAI,CAAC,WAAW,CAAQ,EAC3E,IAAI,CAAC,aAAa,IAAIA,mEAAM,KAAK,EAAC,mBAAmB,IAAE,IAAI,CAAC,aAAa,CAAQ,CAC9E,CACD,EACP;KACH;;;;;;","names":["pdfIcon","pptIcon","wordIcon","excelIcon","imageIcon","videoIcon","onenoteIcon","h","Host"],"sources":["src/assets/img/icn/icn-PDF.svg","src/assets/img/icn/icn-PowerPoint.svg","src/assets/img/icn/icn-Word.svg","src/assets/img/icn/icn-Excel.svg","src/assets/img/icn/icn-Image.svg","src/assets/img/icn/icn-Video.svg","src/assets/img/icn/icn-OneNote.svg","src/global/input.css?tag=dda-attach-file","src/global/global.css?tag=dda-attach-file","src/components/dda-attach-file/dda-attach-file.tsx"],"sourcesContent":["<svg width=\"20\" height=\"21\" viewBox=\"0 0 20 21\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n<path d=\"M16 7.44336H13.5C12.673 7.44336 12 6.77036 12 5.94336V2.44336H4V18.4434H16V7.44336Z\" fill=\"white\"/>\r\n<path d=\"M16 6.44336V6.15036L13 3.15036V5.94336C13 6.21836 13.225 6.44336 13.5 6.44336H16Z\" fill=\"white\"/>\r\n<path opacity=\"0.64\" fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M16.707 5.44336L13 1.73636C12.8125 1.54881 12.5582 1.44342 12.293 1.44336H4C3.44772 1.44336 3 1.89107 3 2.44336V18.4434C3 18.9956 3.44772 19.4434 4 19.4434H16C16.5523 19.4434 17 18.9956 17 18.4434V6.15036C16.9999 5.88516 16.8945 5.63085 16.707 5.44336ZM16 6.15036V6.44336H13.5C13.2241 6.44281 13.0006 6.21927 13 5.94336V3.15036L16 6.15036ZM4 2.64336V18.2434C4 18.3538 4.08954 18.4434 4.2 18.4434H15.8C15.9105 18.4434 16 18.3538 16 18.2434V7.44336H13.5C12.6716 7.44336 12 6.77179 12 5.94336V2.44336H4.2C4.09 2.44336 4 2.53336 4 2.64336Z\" fill=\"#3F4948\"/>\r\n<path d=\"M14.5 10.4434H5.5C5.22386 10.4434 5 10.2195 5 9.94336C5 9.66722 5.22386 9.44336 5.5 9.44336H14.5C14.7761 9.44336 15 9.66722 15 9.94336C15 10.2195 14.7761 10.4434 14.5 10.4434Z\" fill=\"#E0E3E2\"/>\r\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M6 16.4434V12.4434C6 11.8911 6.44772 11.4434 7 11.4434H13C13.5523 11.4434 14 11.8911 14 12.4434V16.4434C14 16.9956 13.5523 17.4434 13 17.4434H7C6.44772 17.4434 6 16.9956 6 16.4434ZM7.2 16.4434H12.794C12.8468 16.445 12.898 16.425 12.9358 16.388C12.9735 16.351 12.9946 16.3002 12.994 16.2474C12.988 15.5694 12.996 13.3154 13 12.6374C13 12.5274 12.91 12.4434 12.8 12.4434H7.2C7.09 12.4434 7 12.5334 7 12.6434V16.2434C7 16.3538 7.08954 16.4434 7.2 16.4434ZM4.75 16.4434H3C2.44772 16.4434 2 15.9956 2 15.4434V13.4434C2 12.8911 2.44772 12.4434 3 12.4434H4.75C4.88807 12.4434 5 12.5553 5 12.6934V16.1934C5 16.3314 4.88807 16.4434 4.75 16.4434ZM15.25 16.4434H17C17.5523 16.4434 18 15.9956 18 15.4434V13.4434C18 12.8911 17.5523 12.4434 17 12.4434H15.25C15.1119 12.4434 15 12.5553 15 12.6934V16.1934C15 16.3314 15.1119 16.4434 15.25 16.4434Z\" fill=\"#DD6B51\"/>\r\n</svg>\r\n","<svg width=\"20\" height=\"21\" viewBox=\"0 0 20 21\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n<path d=\"M18 7.44336H15.5C14.673 7.44336 14 6.77036 14 5.94336V2.44336H6V18.4434H18V7.44336Z\" fill=\"white\"/>\r\n<path d=\"M18 6.44336V6.15036L15 3.15036V5.94336C15 6.21836 15.225 6.44336 15.5 6.44336H18Z\" fill=\"white\"/>\r\n<path opacity=\"0.64\" fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M18.707 5.44336L15 1.73636C14.8125 1.54881 14.5582 1.44342 14.293 1.44336H6C5.44772 1.44336 5 1.89107 5 2.44336V18.4434C5 18.9956 5.44772 19.4434 6 19.4434H18C18.5523 19.4434 19 18.9956 19 18.4434V6.15036C18.9999 5.88516 18.8945 5.63085 18.707 5.44336ZM18 6.15036V6.44336H15.5C15.2241 6.44281 15.0006 6.21927 15 5.94336V3.15036L18 6.15036ZM6 2.64336V18.2434C6 18.3538 6.08954 18.4434 6.2 18.4434H17.8C17.9105 18.4434 18 18.3538 18 18.2434V7.44336H15.5C14.6716 7.44336 14 6.77179 14 5.94336V2.44336H6.2C6.09 2.44336 6 2.53336 6 2.64336Z\" fill=\"#3F4948\"/>\r\n<path d=\"M15.95 11.4434H14L13 10.4434L12 11.4434V13.9324C12.419 14.2484 12.935 14.4434 13.5 14.4434C14.2508 14.4435 14.9619 14.1062 15.4368 13.5247C15.9118 12.9432 16.1002 12.179 15.95 11.4434Z\" fill=\"#DD6B51\"/>\r\n<path d=\"M13.5 9.44336C12.9578 9.44449 12.4309 9.62328 12 9.95236V11.4434H14V9.49336C13.8354 9.46001 13.6679 9.44326 13.5 9.44336V9.44336Z\" fill=\"#FFEBE6\"/>\r\n<path d=\"M15 10.4434H17C16.7939 9.43641 16.0069 8.6495 15 8.44336V10.4434H15Z\" fill=\"#FFEBE6\"/>\r\n<path d=\"M2 16.4434H10C10.5523 16.4434 11 15.9956 11 15.4434V7.44336C11 6.89107 10.5523 6.44336 10 6.44336H2C1.44772 6.44336 1 6.89107 1 7.44336V15.4434C1 15.9956 1.44772 16.4434 2 16.4434Z\" fill=\"#DD6B51\"/>\r\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M7.50496 8.92436C7.17596 8.60336 6.69996 8.44336 6.07996 8.44336H4.01196V14.4434H4.99996V12.3224H6.01496C6.37901 12.33 6.73878 12.2428 7.05896 12.0694C7.35996 11.9004 7.59096 11.6644 7.75496 11.3594C7.91896 11.0554 7.99996 10.7074 7.99996 10.3174C7.99996 9.71036 7.83496 9.24536 7.50496 8.92436ZM5.89896 11.4434H4.99996V9.43136H5.93096C6.35896 9.43136 6.99996 9.43536 6.99996 10.4434C6.99996 11.3414 6.40596 11.4434 5.89896 11.4434Z\" fill=\"#E0E3E2\"/>\r\n</svg>\r\n","<svg width=\"20\" height=\"21\" viewBox=\"0 0 20 21\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n<path d=\"M18 7.44336H15.5C14.673 7.44336 14 6.77036 14 5.94336V2.44336H6V18.4434H18V7.44336Z\" fill=\"white\"/>\r\n<path d=\"M18 6.44336V6.15036L15 3.15036V5.94336C15 6.21836 15.225 6.44336 15.5 6.44336H18Z\" fill=\"white\"/>\r\n<path opacity=\"0.64\" fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M18.707 5.44336L15 1.73636C14.8125 1.54881 14.5582 1.44342 14.293 1.44336H6C5.44772 1.44336 5 1.89107 5 2.44336V18.4434C5 18.9956 5.44772 19.4434 6 19.4434H18C18.5523 19.4434 19 18.9956 19 18.4434V6.15036C18.9999 5.88516 18.8945 5.63085 18.707 5.44336ZM18 6.15036V6.44336H15.5C15.2241 6.44281 15.0006 6.21927 15 5.94336V3.15036L18 6.15036ZM6 2.64336V18.2434C6 18.3538 6.08954 18.4434 6.2 18.4434H17.8C17.9105 18.4434 18 18.3538 18 18.2434V7.44336H15.5C14.6716 7.44336 14 6.77179 14 5.94336V2.44336H6.2C6.09 2.44336 6 2.53336 6 2.64336Z\" fill=\"#3F4948\"/>\r\n<path d=\"M16.5 12.4434H12V13.4434H16.5C16.7761 13.4434 17 13.2195 17 12.9434C17 12.6672 16.7761 12.4434 16.5 12.4434Z\" fill=\"#006A67\"/>\r\n<path d=\"M16.5 10.4434H12V11.4434H16.5C16.7761 11.4434 17 11.2195 17 10.9434C17 10.6672 16.7761 10.4434 16.5 10.4434Z\" fill=\"#006A67\"/>\r\n<path d=\"M16.5 8.44336H12V9.44336H16.5C16.7761 9.44336 17 9.2195 17 8.94336C17 8.66722 16.7761 8.44336 16.5 8.44336Z\" fill=\"#006687\"/>\r\n<path d=\"M2 16.4434H10C10.5523 16.4434 11 15.9956 11 15.4434V7.44336C11 6.89107 10.5523 6.44336 10 6.44336H2C1.44772 6.44336 1 6.89107 1 7.44336V15.4434C1 15.9956 1.44772 16.4434 2 16.4434Z\" fill=\"#006A67\"/>\r\n<path d=\"M7.21 14.3794L6 9.93935L4.794 14.3794H3.918L2.755 8.53735H3.641L4.449 12.3634L5.523 8.53735H6.389L7.54201 12.4534L8.34401 8.53735H9.229L8.085 14.3794H7.21Z\" fill=\"white\"/>\r\n</svg>\r\n","<svg width=\"20\" height=\"21\" viewBox=\"0 0 20 21\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n<path d=\"M18 7.44336H15.5C14.673 7.44336 14 6.77036 14 5.94336V2.44336H6V18.4434H18V7.44336Z\" fill=\"white\"/>\r\n<path d=\"M18 6.44336V6.15036L15 3.15036V5.94336C15 6.21836 15.225 6.44336 15.5 6.44336H18Z\" fill=\"white\"/>\r\n<path opacity=\"0.64\" fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M18.707 5.44336L15 1.73636C14.8125 1.54881 14.5582 1.44342 14.293 1.44336H6C5.44772 1.44336 5 1.89107 5 2.44336V18.4434C5 18.9956 5.44772 19.4434 6 19.4434H18C18.5523 19.4434 19 18.9956 19 18.4434V6.15036C18.9999 5.88516 18.8945 5.63085 18.707 5.44336ZM18 6.15036V6.44336H15.5C15.2241 6.44281 15.0006 6.21927 15 5.94336V3.15036L18 6.15036ZM6 2.64336V18.2434C6 18.3538 6.08954 18.4434 6.2 18.4434H17.8C17.9105 18.4434 18 18.3538 18 18.2434V7.44336H15.5C14.6716 7.44336 14 6.77179 14 5.94336V2.44336H6.2C6.09 2.44336 6 2.53336 6 2.64336Z\" fill=\"#3F4948\"/>\r\n<path d=\"M2 16.4434H10C10.5523 16.4434 11 15.9956 11 15.4434V7.44336C11 6.89107 10.5523 6.44336 10 6.44336H2C1.44772 6.44336 1 6.89107 1 7.44336V15.4434C1 15.9956 1.44772 16.4434 2 16.4434Z\" fill=\"#0D6D2D\"/>\r\n<path d=\"M4.60602 14.4434L8.31302 8.44336H7.15002L3.39502 14.4434H4.60602Z\" fill=\"white\"/>\r\n<path d=\"M7.37299 14.4434L3.66699 8.44336H4.82899L8.58299 14.4434H7.37299Z\" fill=\"white\"/>\r\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M16.084 14.3254H17V10.5834C17 9.15636 16.327 8.44336 14.982 8.44336C14.6146 8.45162 14.2501 8.51085 13.899 8.61936C13.493 8.73636 13.206 8.85836 13.039 8.98536V9.92336C13.594 9.45836 14.216 9.22536 14.904 9.22536C15.691 9.22536 16.084 9.70936 16.084 10.6784L14.369 10.9184C13.109 11.0974 12.479 11.7184 12.479 12.7834C12.479 13.2914 12.646 13.6934 12.977 13.9934C13.308 14.2934 13.751 14.4434 14.301 14.4434C15.075 14.4434 15.663 14.0994 16.061 13.4104H16.084V14.3254ZM14.698 11.6054L16.084 11.4104V11.9794C16.084 12.4604 15.935 12.8614 15.639 13.1814C15.344 13.5014 14.968 13.6614 14.514 13.6614C14.193 13.6614 13.93 13.5754 13.725 13.4024C13.52 13.2284 13.418 12.9984 13.418 12.7124C13.418 12.3574 13.513 12.1024 13.703 11.9434C13.893 11.7854 14.225 11.6724 14.698 11.6054Z\" fill=\"#0D6D2D\"/>\r\n</svg>\r\n","<svg width=\"20\" height=\"21\" viewBox=\"0 0 20 21\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n<path d=\"M3.5 17.4434H16.5C16.775 17.4434 17 17.2184 17 16.9434V3.94336C17 3.66836 16.775 3.44336 16.5 3.44336H3.5C3.225 3.44336 3 3.66836 3 3.94336V16.9434C3 17.2184 3.225 17.4434 3.5 17.4434Z\" fill=\"white\"/>\r\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M11.691 11.1004L10.813 12.3864L9.12599 10.0604C8.93788 9.80101 8.63689 9.64749 8.31649 9.64749C7.9961 9.64749 7.6951 9.80101 7.50699 10.0604L5.11699 13.3564C4.89632 13.6607 4.86498 14.0631 5.03589 14.398C5.20679 14.7328 5.55105 14.9435 5.92699 14.9434H14.073C14.4438 14.9435 14.7843 14.7383 14.9575 14.4104C15.1307 14.0825 15.1082 13.6856 14.899 13.3794L13.343 11.0994C13.1567 10.8264 12.8475 10.663 12.517 10.663C12.1865 10.663 11.8773 10.8264 11.691 11.0994V11.1004Z\" stroke=\"#E0E3E2\"/>\r\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M13.5 7.94336C14.0523 7.94336 14.5 7.49564 14.5 6.94336C14.5 6.39107 14.0523 5.94336 13.5 5.94336C12.9477 5.94336 12.5 6.39107 12.5 6.94336C12.5 7.49564 12.9477 7.94336 13.5 7.94336Z\" stroke=\"#835400\"/>\r\n<path opacity=\"0.64\" fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M3.5 18.4434H16.5C17.327 18.4434 18 17.7704 18 16.9434V3.94336C18 3.11636 17.327 2.44336 16.5 2.44336H3.5C2.673 2.44336 2 3.11636 2 3.94336V16.9434C2 17.7704 2.673 18.4434 3.5 18.4434ZM3 3.94336C3 3.66722 3.22386 3.44336 3.5 3.44336H16.5C16.7761 3.44336 17 3.66722 17 3.94336V16.9434C17 17.2195 16.7761 17.4434 16.5 17.4434H3.5C3.22386 17.4434 3 17.2195 3 16.9434V3.94336Z\" fill=\"#3F4948\"/>\r\n</svg>\r\n","<svg width=\"20\" height=\"21\" viewBox=\"0 0 20 21\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n<path d=\"M3.5 17.4434H16.5C16.775 17.4434 17 17.2184 17 16.9434V3.94336C17 3.66836 16.775 3.44336 16.5 3.44336H3.5C3.225 3.44336 3 3.66836 3 3.94336V16.9434C3 17.2184 3.225 17.4434 3.5 17.4434Z\" fill=\"white\"/>\r\n<path opacity=\"0.64\" fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M3.5 18.4434H16.5C17.327 18.4434 18 17.7704 18 16.9434V3.94336C18 3.11636 17.327 2.44336 16.5 2.44336H3.5C2.673 2.44336 2 3.11636 2 3.94336V16.9434C2 17.7704 2.673 18.4434 3.5 18.4434ZM3 3.94336C3 3.66722 3.22386 3.44336 3.5 3.44336H16.5C16.7761 3.44336 17 3.66722 17 3.94336V16.9434C17 17.2195 16.7761 17.4434 16.5 17.4434H3.5C3.22386 17.4434 3 17.2195 3 16.9434V3.94336Z\" fill=\"#3F4948\"/>\r\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M12.5 10.4434L8.5 7.94336V12.9434L12.5 10.4434Z\" stroke=\"#006687\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n</svg>\r\n","<svg width=\"20\" height=\"21\" viewBox=\"0 0 20 21\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n<path opacity=\"0.64\" fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M6.5 19.4434H16.5C17.327 19.4434 18 18.7704 18 17.9434V7.44336C18.5523 7.44336 19 6.99564 19 6.44336V3.44336C19 2.89107 18.5523 2.44336 18 2.44336H17.914C17.708 1.86136 17.152 1.44336 16.5 1.44336H6.5C5.673 1.44336 5 2.11636 5 2.94336V17.9434C5 18.7704 5.673 19.4434 6.5 19.4434ZM6 2.94336C6 2.66722 6.22386 2.44336 6.5 2.44336H16.5C16.7761 2.44336 17 2.66722 17 2.94336V3.44336H18V6.44336H17V17.9434C17 18.2195 16.7761 18.4434 16.5 18.4434H6.5C6.22386 18.4434 6 18.2195 6 17.9434V2.94336Z\" fill=\"#3F4948\"/>\r\n<path d=\"M18 3.44336H17V2.94336C17 2.66722 16.7761 2.44336 16.5 2.44336H6.5C6.22386 2.44336 6 2.66722 6 2.94336V17.9434C6 18.2195 6.22386 18.4434 6.5 18.4434H16.5C16.7761 18.4434 17 18.2195 17 17.9434V6.44336H18V3.44336Z\" fill=\"white\"/>\r\n<path d=\"M2 16.4434H10C10.5523 16.4434 11 15.9956 11 15.4434V7.44336C11 6.89107 10.5523 6.44336 10 6.44336H2C1.44772 6.44336 1 6.89107 1 7.44336V15.4434C1 15.9956 1.44772 16.4434 2 16.4434Z\" fill=\"#904EDB\"/>\r\n<path d=\"M9 14.4434H7.604C7.604 14.4434 3.995 9.76036 4 9.75536V14.4434H3V8.44336H4.27C4.27 8.44336 7.898 13.1054 8 13.2714V8.44336H9V14.4434Z\" fill=\"white\"/>\r\n</svg>\r\n",".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\nimport pdfIcon from '../../assets/img/icn/icn-PDF.svg';\r\nimport pptIcon from '../../assets/img/icn/icn-PowerPoint.svg';\r\nimport wordIcon from '../../assets/img/icn/icn-Word.svg';\r\nimport excelIcon from '../../assets/img/icn/icn-Excel.svg';\r\nimport imageIcon from '../../assets/img/icn/icn-Image.svg';\r\nimport videoIcon from '../../assets/img/icn/icn-Video.svg';\r\nimport onenoteIcon from '../../assets/img/icn/icn-OneNote.svg';\r\n\r\n@Component({\r\n  tag: 'dda-attach-file',\r\n  styleUrls: ['../../global/input.css', '../../global/global.css'],\r\n  shadow: false,\r\n})\r\nexport class DdaAttachFile {\r\n  @Prop() label: string;\r\n  @Prop() helper_text: string;\r\n  @Prop() error_message: string;\r\n  @Prop() size?: string;\r\n  @Prop() validation_type?: string;\r\n  @Prop() input_type?: string;\r\n  @State() file: File | null = null;\r\n  @Prop() custom_class?: string = ''; \r\n  @Prop() component_mode?: string; \r\n  @Prop() aria_label?: string = '';\r\n  @Prop() button_aria_label?: string = '';\r\n  @Prop() input_id: string;\r\n  @Prop() button_id: string;\r\n\r\n  private fileIcons = {\r\n    pdf: pdfIcon,\r\n    pptx: pptIcon,\r\n    docx: wordIcon,\r\n    xlsx: excelIcon,\r\n    png: imageIcon,\r\n    jpg: imageIcon,\r\n    jpeg: imageIcon,\r\n    mp4: videoIcon,\r\n    mkv: videoIcon,\r\n    one: onenoteIcon,\r\n  };\r\n\r\n  handleFileInput(event) {\r\n    const files = event.target.files;\r\n    if (files.length > 0) {\r\n      this.file = files[0];\r\n    } else {\r\n      this.file = null;\r\n    }\r\n  }\r\n\r\n  removeFile() {\r\n    this.file = null;\r\n  }\r\n\r\n  getFileIcon(fileName: string) {\r\n    const extension = fileName.split('.').pop().toLowerCase();\r\n    return this.fileIcons[extension] || 'path/to/default-icon.png';\r\n  }\r\n\r\n  render() {\r\n    const inputClass = [\r\n      'dda-input-container',\r\n      this.validation_type ? `dda-validation-${this.validation_type}` : '',\r\n      this.size ? `dda-input-size-${this.size}` : '',\r\n      this.input_type ? `dda-input-${this.input_type}` : '',\r\n      this.custom_class,\r\n      this.component_mode,\r\n    ].filter(Boolean).join(' ');\r\n\r\n    return (\r\n      <Host>\r\n        <div class={inputClass}>\r\n          {this.label && <label htmlFor={this.input_id} class=\"dda-input-label\">{this.label}</label>}\r\n          <div class=\"dda-input-field-group dda-attach-file\">\r\n            {this.file ? (\r\n              <div class=\"dda-file-details\">\r\n                <div class=\"dda-items\">\r\n                  <img src={this.getFileIcon(this.file.name)} alt=\"File Icon\" class=\"dda-file-icon\" />\r\n                  <span class=\"dda-file-name\">{this.file.name}</span>\r\n                </div>\r\n                <button id={this.button_id} aria-label={this.button_aria_label} class=\"remove-file\" onClick={() => this.removeFile()}>\r\n                  <i class=\"material-icons\" aria-hidden=\"true\">close</i>\r\n                </button>\r\n              </div>\r\n            ) : (\r\n              <div class=\"dda-file-input\">\r\n                <span>No File Selected</span>\r\n                <label htmlFor={this.input_id} class=\"dda-file-choose\">\r\n                  Choose File\r\n                  <input id={this.input_id} aria-label={this.aria_label} type=\"file\" onInput={(event) => {this.handleFileInput(event)}} />\r\n                </label>\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}"],"version":3}

package/dist/cjs/dda-avatar.cjs.entry.js.map

@@ -1 +0,0 @@
-{"file":"dda-avatar.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,YAAY,GAAG,o3HAAo3H,CAAC;AAC14H,wBAAe,YAAY;;ACD3B,MAAM,QAAQ,GAAG,4pWAA4pW,CAAC;AAC9qW,wBAAe,QAAQ;;ACDvB,MAAM,SAAS,GAAG,y6uDAAy6uD,CAAC;AAC57uD,wBAAe,SAAS;;MCMX,SAAS;IALtB;;QAMU,SAAI,GAA8B,OAAO,CAAC;QAC1C,SAAI,GAA6C,IAAI,CAAC;QACtD,WAAM,GAAiE,SAAS,CAAC;QACjF,YAAO,GAAwB,QAAQ,CAAC;QACxC,QAAG,GAAW,EAAE,CAAC;QACjB,SAAI,GAAW,gBAAgB,CAAC;QAChC,SAAI,GAAW,IAAI,CAAC;QACpB,wBAAmB,GAAW,CAAC,CAAC;QAChC,iBAAY,GAAY,EAAE,CAAC;QAC1B,WAAM,GAAY,KAAK,CAAC;KA4DlC;IArDC,cAAc;QACZ,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;KAC5B;IAED,YAAY,CAAC,MAAc;QACzB,IAAI,CAAC,QAAQ,GAAG,MAAM,CAAA;QACtB,IAAI,CAAC,MAAM,GAAG,KAAK,CAAA;KACpB;IAED,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,MAAM;QACJ,QACEA,kEAAK,OAAO,EAAE,MAAM,IAAI,CAAC,cAAc,EAAE,EAAE,KAAK,EAAE;gBAChD,YAAY,EAAE,IAAI;gBAClB,CAAC,eAAe,IAAI,CAAC,IAAI,EAAE,GAAG,IAAI;gBAClC,CAAC,eAAe,IAAI,CAAC,IAAI,EAAE,GAAG,IAAI;gBAClC,CAAC,iBAAiB,IAAI,CAAC,MAAM,EAAE,GAAG,IAAI;gBACtC,CAAC,gBAAgB,IAAI,CAAC,OAAO,EAAE,GAAG,IAAI;gBACtC,CAAC,GAAG,IAAI,CAAC,YAAY,EAAE,GAAG,IAAI;gBAC9B,CAAC,GAAG,IAAI,CAAC,cAAc,EAAE,GAAG,IAAI;aACjC,IACA,IAAI,CAAC,MAAM,KACVA,kEAAK,KAAK,EAAC,yBAAyB,IACjC,IAAI,CAAC,aAAa,CAAC,MAAM,GAAG,CAAC,IAC5B,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,MAAM,KAC3BA,oBAAQ,EAAE,EAAE,IAAI,CAAC,SAAS,gBAAc,IAAI,CAAC,UAAU,EAAE,IAAI,EAAC,QAAQ,EACpE,KAAK,EAAE,2BAA2B,IAAI,CAAC,QAAQ,KAAK,MAAM,GAAG,UAAU,GAAG,EAAE,EAAE,EAC9E,OAAO,EAAE,QAAO,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,CAAA,EAAC,IAEzC,MAAM,CACA,CACV,CAAC,KAEFA,iBAAK,KAAK,EAAC,yBAAyB,2BAA2B,CAChE,CACG,CACP,EACE,IAAI,CAAC,IAAI,KAAK,OAAO,IAAIA,kEAAK,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,GAAG,EAAC,QAAQ,GAAG,EAC5D,IAAI,CAAC,IAAI,KAAK,MAAM,IAAIA,gEAAG,KAAK,EAAE,GAAG,IAAI,CAAC,IAAI,YAAY,0BAAyB,EACnF,IAAI,CAAC,IAAI,KAAK,MAAM,IAAIA,mEAAM,KAAK,EAAC,kBAAkB,IAAE,IAAI,CAAC,IAAI,CAAQ,EACzE,IAAI,CAAC,MAAM,KAAK,QAAQ,IAAIA,kEAAK,KAAK,EAAC,eAAe,GAAO,EAC7D,IAAI,CAAC,MAAM,KAAK,UAAU,IAAIA,mEAAM,KAAK,EAAC,8BAA8B,kBAAmB,EAC3F,IAAI,CAAC,MAAM,KAAK,cAAc,IAAIA,kEAAK,KAAK,EAAC,qBAAqB,IAAE,IAAI,CAAC,mBAAmB,CAAO,CAChG,EACN;KACH;;;;;;","names":["h"],"sources":["src/components/dda-avatar/dda-avatar.css?tag=dda-avatar","src/global/input.css?tag=dda-avatar","src/global/global.css?tag=dda-avatar","src/components/dda-avatar/dda-avatar.tsx"],"sourcesContent":[".dda-avatar {\r\n  display: inline-flex;\r\n  position: relative;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n\r\n.avatar-shape-circle {\r\n  border-radius: 64px;\r\n}\r\n\r\n.avatar-shape-square {\r\n  border-radius: 8px;\r\n}\r\n\r\n.avatar-type-photo img {\r\n  width: 100%;\r\n  object-fit: cover;\r\n}\r\n\r\n.avatar-type-photo.avatar-shape-circle img {\r\n  border-radius: 64px;\r\n}\r\n\r\n.avatar-type-photo.avatar-shape-square img {\r\n  border-radius: 8px;\r\n}\r\n\r\n\r\n.avatar-type-icon {\r\n  background: var(--dda-neutral-variant-94);\r\n  text-align: center;\r\n}\r\n\r\n.avatar-type-icon .dda-smile path {\r\n  fill: var(--dda-neutral-variant-30);\r\n}\r\n\r\n.avatar-type-icon i {\r\n  color: var(--dda-neutral-variant-30);\r\n}\r\n\r\n.avatar-type-icon.avatar-size-xs .dda-smile {\r\n  font-size: 13px;\r\n}\r\n\r\n.avatar-type-icon.avatar-size-sm .dda-smile {\r\n  font-size: 19px;\r\n}\r\n\r\n.avatar-type-icon.avatar-size-md .dda-smile {\r\n  font-size: 24px;\r\n}\r\n\r\n.avatar-type-icon.avatar-size-lg .dda-smile {\r\n  font-size: 28px;\r\n}\r\n\r\n.avatar-type-icon.avatar-size-xl .dda-smile {\r\n  font-size: 31px;\r\n}\r\n\r\n.avatar-type-icon.avatar-size-xxl .dda-smile {\r\n  font-size: 37px;\r\n}\r\n\r\n\r\n.avatar-type-text {\r\n  background: var(--dda-color-primary-40);\r\n  text-align: center;\r\n}\r\n\r\n.light-mode.avatar-type-text{\r\n  background: var(--dda-primary-40);\r\n}\r\n\r\n.avatar-type-text .avatar-main-text {\r\n  color: var(--dda-neutral-100);\r\n  font-size: 16px;\r\n}\r\n\r\n.avatar-size-xs .avatar-main-text {\r\n  font-size: 10px;\r\n}\r\n\r\n.avatar-size-sm .avatar-main-text {\r\n  font-size: 12px;\r\n}\r\n\r\n.avatar-size-md .avatar-main-text {\r\n  font-size: 16px;\r\n}\r\n\r\n.avatar-size-lg .avatar-main-text {\r\n  font-size: 20px;\r\n}\r\n\r\n.avatar-size-xl .avatar-main-text {\r\n  font-size: 24px;\r\n}\r\n\r\n.avatar-size-xxl .avatar-main-text {\r\n  font-size: 28px;\r\n}\r\n\r\n\r\n.avatar-size-xs {\r\n  width: 24px;\r\n  height: 24px;\r\n}\r\n\r\n.avatar-size-sm {\r\n  width: 32px;\r\n  height: 32px;\r\n}\r\n\r\n.avatar-size-md {\r\n  width: 40px;\r\n  height: 40px;\r\n}\r\n\r\n.avatar-size-lg {\r\n  width: 48px;\r\n  height: 48px;\r\n}\r\n\r\n.avatar-size-xl {\r\n  width: 56px;\r\n  height: 56px;\r\n}\r\n\r\n.avatar-size-xxl {\r\n  width: 64px;\r\n  height: 64px;\r\n}\r\n\r\n\r\n.dda-avatar .status-circle {\r\n  width: 12px;\r\n  height: 12px;\r\n  border-radius: 20px;\r\n  background: var(--dda-color-success-40);\r\n  border: solid 2px var(--dda-neutral-100);\r\n  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.04);\r\n  position: absolute;\r\n  bottom: -2px;\r\n  right: -2px;\r\n}\r\n\r\n.light-mode.dda-avatar .status-circle{\r\n  background: var(--dda-success-40);\r\n}\r\n\r\n.avatar-size-xs .status-circle {\r\n  width: 8px;\r\n  height: 8px;\r\n}\r\n\r\n.avatar-size-sm .status-circle {\r\n  width: 12px;\r\n  height: 12px;\r\n}\r\n\r\n.avatar-size-md .status-circle {\r\n  width: 14px;\r\n  height: 14px;\r\n}\r\n\r\n.avatar-size-lg .status-circle {\r\n  width: 16px;\r\n  height: 16px;\r\n}\r\n\r\n.avatar-size-xl .status-circle {\r\n  width: 18px;\r\n  height: 18px;\r\n}\r\n\r\n.avatar-size-xxl .status-circle {\r\n  width: 20px;\r\n  height: 20px;\r\n}\r\n\r\n\r\n.dda-avatar .verified-icon {\r\n  background-color: var(--dda-neutral-100);\r\n  color: var(--dda-color-success-40);\r\n  border-radius: 20px;\r\n  border: solid 2px var(--dda-neutral-100);\r\n  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.04);\r\n  position: absolute;\r\n  bottom: -2px;\r\n  inset-inline-end: -2px;\r\n}\r\n\r\n.light-mode.dda-avatar .verified-icon{\r\n  color: var(--dda-success-40);\r\n}\r\n\r\n.dda-avatar.avatar-size-xs .verified-icon {\r\n  font-size: 6px;\r\n}\r\n\r\n.dda-avatar.avatar-size-sm .verified-icon {\r\n  font-size: 8px;\r\n}\r\n\r\n.dda-avatar.avatar-size-md .verified-icon {\r\n  font-size: 10px;\r\n}\r\n\r\n.dda-avatar.avatar-size-lg .verified-icon {\r\n  font-size: 12px;\r\n}\r\n\r\n.dda-avatar.avatar-size-xl .verified-icon {\r\n  font-size: 14px;\r\n}\r\n\r\n.dda-avatar.avatar-size-xxl .verified-icon {\r\n  font-size: 16px;\r\n}\r\n\r\n\r\n.avatar-design-live {\r\n  box-shadow: 0px 0px 0px 2px var(--dda-neutral-100), 0px 0px 0px 4px var(--dda-color-primary-40);\r\n}\r\n\r\n.light-mode.avatar-design-live{\r\n  box-shadow: 0px 0px 0px 2px var(--dda-neutral-100), 0px 0px 0px 4px var(--dda-primary-40);\r\n}\r\n\r\n.notification-circle {\r\n  width: auto;\r\n  height: 20px;\r\n  background: var(--dda-color-error-40);\r\n  font-size: var(--dda-fs-body-sm);\r\n  color: var(--dda-neutral-100);\r\n  padding: 0 8px;\r\n  border: solid 2px var(--dda-neutral-100);\r\n  border-radius: 40px;\r\n  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.04);\r\n  display: inline-grid;\r\n  align-items: center;\r\n  position: absolute;\r\n  top: -5px;\r\n  right: -10px;\r\n}\r\n\r\n.light-mode .notification-circle{\r\n  background: var(--dda-error-40);\r\n}\r\n\r\n.avatar-size-xs .notification-circle,\r\n.avatar-size-sm .notification-circle {\r\n  width: 14px;\r\n  height: 14px;\r\n  padding: 0px;\r\n  text-indent: -100px;\r\n  overflow: hidden;\r\n  top: -5px;\r\n  right: -5px;\r\n}\r\n\r\n.avatar-size-md .notification-circle {\r\n  height: 20px;\r\n}\r\n\r\n.avatar-size-lg .notification-circle {\r\n  height: 22px;\r\n}\r\n\r\n.avatar-size-xl .notification-circle {\r\n  height: 24px;\r\n}\r\n\r\n.avatar-size-xxl .notification-circle {\r\n  height: 24px;\r\n}\r\n\r\n",".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 } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'dda-avatar',\r\n  styleUrls: ['dda-avatar.css', '../../global/input.css', '../../global/global.css'],\r\n  shadow: false,\r\n})\r\nexport class DdaAvatar {\r\n  @Prop() type: 'photo' | 'icon' | 'text' = 'photo';\r\n  @Prop() size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' = 'md';\r\n  @Prop() design: 'default' | 'status' | 'verified' | 'story' | 'notification' = 'default';\r\n  @Prop() rounded: 'square' | 'circle' = 'circle';\r\n  @Prop() src: string = ''; // For photo type\r\n  @Prop() icon: string = 'material-icons'; // For icon type\r\n  @Prop() text: string = 'AB'; // For text type\r\n  @Prop() notification_number: number = 0; // For notification design\r\n  @Prop() custom_class?: string = ''; \r\n  @State() isOpen: boolean = false;\r\n  @Prop() selected: string;\r\n  @Prop() options: string;\r\n  @Prop() component_mode?: string; \r\n  @Prop() aria_label: string;\r\n  @Prop() button_id?: string;\r\n\r\n  toggleDropdown() {\r\n    this.isOpen = !this.isOpen;\r\n  }\r\n\r\n  selectOption(option: string) {\r\n    this.selected = option\r\n    this.isOpen = false\r\n  }\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  render() {\r\n    return (\r\n      <div onClick={() => this.toggleDropdown()} class={{\r\n        'dda-avatar': true,\r\n        [`avatar-type-${this.type}`]: true,\r\n        [`avatar-size-${this.size}`]: true,\r\n        [`avatar-design-${this.design}`]: true,\r\n        [`avatar-shape-${this.rounded}`]: true,\r\n        [`${this.custom_class}`]: true,\r\n        [`${this.component_mode}`]: true\r\n      }}>\r\n      {this.isOpen && (\r\n        <div class=\"dda-input-dropdown-list\">\r\n          {this.parsedOptions.length > 0 ? (\r\n            this.parsedOptions.map(option => (\r\n              <button id={this.button_id} aria-label={this.aria_label} 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        {this.type === 'photo' && <img src={this.src} alt=\"Avatar\" />}\r\n        {this.type === 'icon' && <i class={`${this.icon} dda-smile`}>sentiment_satisfied</i>}\r\n        {this.type === 'text' && <span class='avatar-main-text'>{this.text}</span>}\r\n        {this.design === 'status' && <div class=\"status-circle\"></div>}\r\n        {this.design === 'verified' && <span class=\"material-icons verified-icon\">check_small</span>}\r\n        {this.design === 'notification' && <div class=\"notification-circle\">{this.notification_number}</div>}\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/cjs/dda-breadcrumb.cjs.entry.js.map

@@ -1 +0,0 @@
-{"file":"dda-breadcrumb.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,gBAAgB,GAAG,m9BAAm9B,CAAC;AAC7+B,4BAAe,gBAAgB;;ACD/B,MAAM,SAAS,GAAG,y6uDAAy6uD,CAAC;AAC57uD,4BAAe,SAAS;;MCMX,aAAa;IAL1B;;QAMU,WAAM,GAAkC,MAAM,CAAC;QAC/C,cAAS,GAAmC,eAAe,CAAC;QAC5D,iBAAY,GAAY,EAAE,CAAC;QAInC,gBAAW,GAAkD,EAAE,CAAC;KAgCjE;IA9BC,iBAAiB;QACf,MAAM,eAAe,GAAG,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,kBAAkB,CAAC,CAAC;QACjE,IAAI,eAAe,EAAE;YACnB,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC;SAChD;KACF;IAED,MAAM;QACJ,QACEA,QAACC,UAAI,uDACHD,kEAAK,KAAK,EAAE,IAAI,CAAC,cAAc,IAC7BA,gFAAgB,YAAY,EAAC,KAAK,EAAE,GAAG,IAAI,CAAC,YAAY,EAAE,IACxDA,iEAAI,KAAK,EAAC,gBAAgB,IACvB,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC,KAAK,EAAEE,OAAK,MACrDF,gBAAI,KAAK,EAAE,mBAAmBE,OAAK,KAAK,IAAI,CAAC,WAAW,CAAC,MAAM,GAAG,CAAC,GAAG,QAAQ,GAAG,EAAE,EAAE,IACnFF,eAAG,IAAI,EAAE,KAAK,CAAC,GAAG,IACf,IAAI,CAAC,MAAM,KAAK,MAAM,IAAIA,eAAG,KAAK,EAAE,gBAAgB,IAAG,KAAK,CAAC,IAAI,CAAK,EACtE,IAAI,CAAC,MAAM,KAAK,MAAM,IAAIA,sBAAO,KAAK,CAAC,IAAI,CAAQ,CAClD,EACHE,OAAK,GAAG,IAAI,CAAC,WAAW,CAAC,MAAM,GAAG,CAAC,KAClCF,eAAG,KAAK,EAAE,gBAAgB,IAAG,IAAI,CAAC,SAAS,CAAK,CACjD,CACE,CACN,CAAC,CACC,CACD,CACF,CACD,EACP;KACH;;;;;;;","names":["h","Host","index"],"sources":["src/components/dda-breadcrumb/dda-breadcrumb.css?tag=dda-breadcrumb","src/global/global.css?tag=dda-breadcrumb","src/components/dda-breadcrumb/dda-breadcrumb.tsx"],"sourcesContent":[".dda-breadcrumb {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  list-style: none;\r\n  padding: 0;\r\n  margin: 0;\r\n}\r\n\r\n.breadcrumb-item {\r\n  display: flex;\r\n  align-items: center;\r\n}\r\n\r\n.dda-breadcrumb,\r\n.breadcrumb-item{\r\n  gap: 10px;\r\n}\r\n\r\n.breadcrumb-item a {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  text-decoration: none;\r\n  font-size: var(--dda-fs-body-lg);\r\n  gap: 4px;\r\n}\r\n.breadcrumb-item a span{\r\n  color: var(--dda-on-surface-0);\r\n  font-weight: var(--dda-fw-500);\r\n}\r\n.light-mode .breadcrumb-item a span{\r\n  color: var(--dda-neutral-0);\r\n}\r\n/**/\r\n.breadcrumb-item i,\r\n.breadcrumb-item svg {\r\n  color: var(--dda-on-surface-variant-30);\r\n}\r\n.light-mode .breadcrumb-item i,\r\n.light-mode .breadcrumb-item svg {\r\n  color: var(--dda-neutral-variant-30);\r\n}\r\n/**/\r\n.breadcrumb-item .separator {\r\n  margin: 0 8px;\r\n  color: var(--dda-on-surface-variant-30);\r\n}\r\n.light-mode .breadcrumb-item .separator {\r\n  color: var(--dda-neutral-variant-30);\r\n}\r\n/**/\r\n.breadcrumb-item.active a span{\r\n  color: var(--dda-on-surface-variant-30);\r\n  font-weight: var(--dda-fw-400);\r\n}\r\n.light-mode .breadcrumb-item.active a span{\r\n  color: var(--dda-neutral-variant-30);\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, h, Host, Element } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'dda-breadcrumb',\r\n  styleUrls: ['dda-breadcrumb.css', '../../global/global.css'],\r\n  shadow: false,\r\n})\r\nexport class DdaBreadcrumb {\r\n  @Prop() design: 'text' | 'icon-text' | 'icon' = 'text'; // Default to text design\r\n  @Prop() separator: 'chevron_right' | 'pen_size_2' = 'chevron_right'; // Default to chevron separator\r\n  @Prop() custom_class?: string = ''; \r\n  @Prop() component_mode?: string; \r\n  @Element() el: HTMLElement;\r\n\r\n  breadcrumbs: { text: string; icon: string; url: string }[] = [];\r\n\r\n  componentWillLoad() {\r\n    const breadcrumbsData = this.el.getAttribute('data-breadcrumbs');\r\n    if (breadcrumbsData) {\r\n      this.breadcrumbs = JSON.parse(breadcrumbsData);\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <div class={this.component_mode}>\r\n          <nav aria-label=\"breadcrumb\" class={`${this.custom_class}`}>\r\n            <ol class=\"dda-breadcrumb\">\r\n              {this.breadcrumbs && this.breadcrumbs.map((crumb, index) => (\r\n                <li class={`breadcrumb-item ${index === this.breadcrumbs.length - 1 ? 'active' : ''}`}>\r\n                  <a href={crumb.url}>\r\n                    {this.design !== 'text' && <i class={`material-icons`}>{crumb.icon}</i>}\r\n                    {this.design !== 'icon' && <span>{crumb.text}</span>}\r\n                  </a>\r\n                  {index < this.breadcrumbs.length - 1 && (\r\n                    <i class={`material-icons`}>{this.separator}</i>\r\n                  )}\r\n                </li>\r\n              ))}\r\n            </ol>\r\n          </nav>\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/cjs/dda-button.cjs.entry.js.map

@@ -1 +0,0 @@
-{"file":"dda-button.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,YAAY,GAAG,64ZAA64Z,CAAC;AACn6Z,wBAAe,YAAY;;ACD3B,MAAM,SAAS,GAAG,y6uDAAy6uD,CAAC;AAC57uD,wBAAe,SAAS;;MCMX,SAAS;IALtB;;;QAOU,SAAI,GAAW,QAAQ,CAAC;;QAExB,aAAQ,GAAY,KAAK,CAAC;;QAE1B,eAAU,GAAW,EAAE,CAAC;QACxB,aAAQ,GAAW,EAAE,CAAC;QACtB,eAAU,GAAY,EAAE,CAAC;QACzB,iBAAY,GAAW,SAAS,CAAC;QAEjC,iBAAY,GAAY,EAAE,CAAC;QAC3B,sBAAiB,GAAY,EAAE,CAAC;QAEhC,iBAAY,GAAY,EAAE,CAAC;KAmCpC;IA7BC,MAAM;QACJ,MAAM,WAAW,GAAG;YAClB,SAAS;YACT,aAAa,IAAI,CAAC,YAAY,EAAE;YAChC,IAAI,CAAC,IAAI,GAAG,YAAY,IAAI,CAAC,IAAI,EAAE,GAAG,EAAE;YACxC,IAAI,CAAC,YAAY,GAAG,aAAa,IAAI,CAAC,YAAY,EAAE,GAAG,EAAE;YACzD,IAAI,CAAC,iBAAiB,GAAG,YAAY,IAAI,CAAC,iBAAiB,EAAE,GAAG,EAAE;YAClE,IAAI,CAAC,GAAG,GAAG,WAAW,IAAI,CAAC,GAAG,EAAE,GAAG,EAAE;YACrC,IAAI,CAAC,YAAY;YACjB,IAAI,CAAC,cAAc;SACpB,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QAE5B,QACEA,QAACC,UAAI,uDACHD,qEACE,EAAE,EAAE,IAAI,CAAC,SAAS,EAClB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,WAAW,EAClB,QAAQ,EAAE,IAAI,CAAC,QAAQ,gBACX,IAAI,CAAC,UAAU,EAC3B,OAAO,EAAE,IAAI,CAAC,YAAY,IAEzB,IAAI,CAAC,UAAU,IAAIA,gEAAG,KAAK,EAAC,gBAAgB,IAAE,IAAI,CAAC,UAAU,CAAK,EACnEA,oEAAQ,EACP,IAAI,CAAC,QAAQ,IAAIA,gEAAG,KAAK,EAAC,gBAAgB,IAAE,IAAI,CAAC,QAAQ,CAAM,CACzD,CACJ,EACP;KACH;;;;;;","names":["h","Host"],"sources":["src/global/dda-button.css?tag=dda-button","src/global/global.css?tag=dda-button","src/components/dda-button/dda-button.tsx"],"sourcesContent":[".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 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 { Host, Component, Prop, h } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'dda-button',\r\n  styleUrls: ['../../global/dda-button.css', '../../global/global.css'],\r\n  shadow: false,\r\n})\r\nexport class DdaButton {\r\n  /** Type of button, e.g., \"button\", \"submit\" */\r\n  @Prop() type: string = 'button';\r\n  /** Disable the button */\r\n  @Prop() disabled: boolean = false;\r\n  /** Icon class for the starting icon */\r\n  @Prop() start_icon: string = '';\r\n  @Prop() end_icon: string = ''; // icon class\r\n  @Prop() aria_label?: string = '';\r\n  @Prop() button_color: string = 'primary'; // e.g., 'primary', 'error'\r\n  @Prop() size?: string; // e.g., 'sm', 'md', 'lg'\r\n  @Prop() button_shape?: string = '';\r\n  @Prop() icon_button_shape?: string = '';\r\n  @Prop() gap?: number;\r\n  @Prop() custom_class?: string = ''; // Custom class prop\r\n  @Prop() component_mode?: string;\r\n  @Prop() button_id: string;\r\n  /** Function to be called on button click */\r\n  @Prop() clickHandler?: (event: MouseEvent) => void;\r\n\r\n  render() {\r\n    const buttonClass = [\r\n      'dda-btn',\r\n      `btn-color-${this.button_color}`,\r\n      this.size ? `btn-size-${this.size}` : '',\r\n      this.button_shape ? `btn-shape-${this.button_shape}` : '',\r\n      this.icon_button_shape ? `icon-btn-${this.icon_button_shape}` : '',\r\n      this.gap ? `dda-gap-${this.gap}` : '',\r\n      this.custom_class, // Include custom class\r\n      this.component_mode,\r\n    ].filter(Boolean).join(' ');\r\n\r\n    return (\r\n      <Host>\r\n        <button\r\n          id={this.button_id}\r\n          type={this.type}\r\n          class={buttonClass}\r\n          disabled={this.disabled}\r\n          aria-label={this.aria_label}\r\n          onClick={this.clickHandler} // Bind the onClick prop here\r\n        >\r\n          {this.start_icon && <i class=\"material-icons\">{this.start_icon}</i>}\r\n          <slot />\r\n          {this.end_icon && <i class=\"material-icons\">{this.end_icon }</i>}\r\n        </button>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/cjs/dda-checkbox.cjs.entry.js.map

@@ -1 +0,0 @@
-{"file":"dda-checkbox.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,cAAc,GAAG,yuEAAyuE,CAAC;AACjwE,0BAAe,cAAc;;ACD7B,MAAM,SAAS,GAAG,y6uDAAy6uD,CAAC;AAC57uD,0BAAe,SAAS;;MCMX,WAAW;IALxB;;QAcU,iBAAY,GAAY,EAAE,CAAC;KA6BpC;IAzBC,MAAM;QACJ,MAAM,aAAa,GAAG;YACpB,wBAAwB;YACxB,IAAI,CAAC,IAAI,GAAG,gBAAgB,IAAI,CAAC,IAAI,EAAE,GAAG,EAAE;YAC5C,IAAI,CAAC,UAAU,GAAG,gBAAgB,IAAI,CAAC,UAAU,EAAE,GAAG,EAAE;YACxD,IAAI,CAAC,YAAY,GAAI,IAAI,CAAC,YAAY,GAAG,EAAE;YAC3C,IAAI,CAAC,eAAe,GAAG,gBAAgB,IAAI,CAAC,eAAe,EAAE,GAAG,EAAE;YAClE,IAAI,CAAC,cAAc;SACpB,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QAE5B,QACEA,QAACC,UAAI,uDACHD,kEAAK,KAAK,EAAE,aAAa,IACvBA,kFAAmB,IAAI,CAAC,UAAU,EAAE,IAAI,EAAC,UAAU,EAAC,EAAE,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAE,IAAI,CAAC,UAAU,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,GAAG,EACtHA,oEAAO,OAAO,EAAE,IAAI,CAAC,QAAQ,IAC3BA,gEAAG,KAAK,EAAC,gBAAgB,YAAU,EACnCA,kEACEA,mEAAM,KAAK,EAAC,oBAAoB,IAAE,IAAI,CAAC,UAAU,CAAQ,EACxD,IAAI,CAAC,UAAU,IAAIA,mEAAM,KAAK,EAAC,yBAAyB,IAAE,IAAI,CAAC,UAAU,CAAQ,CAChF,CACE,CACJ,CACD,EACP;KACH;;;;;;","names":["h","Host"],"sources":["src/components/dda-checkbox/dda-checkbox.css?tag=dda-checkbox","src/global/global.css?tag=dda-checkbox","src/components/dda-checkbox/dda-checkbox.tsx"],"sourcesContent":[".dda-checkbox-container {\r\n  display: inline-flex;\r\n  align-items: center;\r\n}\r\n\r\n.dda-checkbox-container input[type=\"checkbox\"] {\r\n  width: 0;\r\n  height: 0;\r\n  position: absolute;\r\n  opacity: 0;\r\n}\r\n\r\n.dda-checkbox-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\r\n.dda-checkbox-container i,\r\n.dda-checkbox-container svg {\r\n  display: flex;\r\n  color: var(--dda-color-primary-40);\r\n  border: solid 2px var(--dda-color-primary-40);\r\n  justify-content: center;\r\n  align-items: center;\r\n}\r\n\r\n.light-mode.dda-checkbox-container i,\r\n.light-mode.dda-checkbox-container svg{\r\n  color: var(--dda-primary-40);\r\n  border: solid 2px var(--dda-primary-40);\r\n}\r\n\r\n.dda-checkbox-square i,\r\n.dda-checkbox-square svg {\r\n  border-radius: 6px;\r\n}\r\n\r\n.dda-checkbox-rounded i,\r\n.dda-checkbox-rounded svg {\r\n  border-radius: 22px;\r\n}\r\n\r\n\r\n.dda-checkbox-sm label i,\r\n.dda-checkbox-sm label svg {\r\n  width: 16px;\r\n  height: 16px;\r\n  font-size: 12px;\r\n}\r\n\r\n.dda-checkbox-md label i,\r\n.dda-checkbox-md label svg {\r\n  width: 20px;\r\n  height: 20px;\r\n  font-size: 16px;\r\n}\r\n\r\n.dda-checkbox-lg label i,\r\n.dda-checkbox-lg label svg {\r\n  width: 22px;\r\n  height: 22px;\r\n  font-size: 19px;\r\n}\r\n\r\n.dda-checkbox-container input[type=\"checkbox\"]:checked~label i,\r\n.dda-checkbox-container input[type=\"checkbox\"]:checked~label svg {\r\n  background: var(--dda-color-primary-40);\r\n  color: var(--dda-neutral-100);\r\n}\r\n\r\n.dda-checkbox-container input[type=\"checkbox\"]:checked:focus-within~label i,\r\n.dda-checkbox-container input[type=\"checkbox\"]:checked:focus-within~label svg {\r\n  -webkit-box-shadow: 0px 0px 0px 3px var(--dda-color-primary-95);\r\n  -moz-box-shadow: 0px 0px 0px 3px var(--dda-color-primary-95);\r\n  box-shadow: 0px 0px 0px 3px var(--dda-color-primary-95);\r\n}\r\n\r\n.dda-checkbox-container label p {\r\n  margin: 0px;\r\n}\r\n\r\n.dda-checkbox-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\r\n.light-mode .dda-checkbox-title{\r\n  color: var(--dda-neutral-0);\r\n}\r\n\r\n.dda-checkbox-lg label .dda-checkbox-title {\r\n  font-size: var(--dda-fs-title-sm);\r\n}\r\n\r\n.dda-checkbox-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\r\n.light-mode  .dda-checkbox-supporting {\r\n  color: var(--dda-neutral-variant-30);\r\n}\r\n\r\n.dda-checkbox-lg label .dda-checkbox-supporting {\r\n  font-size: var(--dda-fs-body-lg);\r\n}\r\n\r\n.dda-checkbox-disabled i,\r\n.dda-checkbox-disabled svg{\r\n  color: var(--dda-neutral-70);\r\n  border: solid 2px var(--dda-surface-90);\r\n}\r\n.dda-checkbox-container.dda-checkbox-disabled{\r\n  pointer-events: none;\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, h, Host } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'dda-checkbox',\r\n  styleUrls: ['dda-checkbox.css', '../../global/global.css'],\r\n  shadow: false,\r\n})\r\nexport class DdaCheckbox {\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() checkbox_status?: string;\r\n  @Prop() size?: string; // e.g., 'sm', 'md', 'lg'\r\n  @Prop() style_type?: string; // Default to 'square'\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 checkboxClass = [\r\n      'dda-checkbox-container',\r\n      this.size ? `dda-checkbox-${this.size}` : '',\r\n      this.style_type ? `dda-checkbox-${this.style_type}` : '',\r\n      this.custom_class ?  this.custom_class : '',\r\n      this.checkbox_status ? `dda-checkbox-${this.checkbox_status}` : '',\r\n      this.component_mode,\r\n    ].filter(Boolean).join(' ');\r\n    \r\n    return (\r\n      <Host>\r\n        <div class={checkboxClass}>\r\n          <input aria-label={this.aria_label} type=\"checkbox\" id={this.input_id} name={this.group_name} checked={this.checked}/>\r\n          <label htmlFor={this.input_id}>\r\n            <i class=\"material-icons\">check</i>\r\n            <p>\r\n              <span class=\"dda-checkbox-title\">{this.title_text}</span>\r\n              {this.supporting && <span class=\"dda-checkbox-supporting\">{this.supporting}</span>}\r\n            </p>\r\n          </label>\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/cjs/dda-chip.cjs.entry.js.map

@@ -1 +0,0 @@
-{"file":"dda-chip.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,UAAU,GAAG,05DAA05D,CAAC;AAC96D,sBAAe,UAAU;;ACDzB,MAAM,SAAS,GAAG,y6uDAAy6uD,CAAC;AAC57uD,sBAAe,SAAS;;MCMX,OAAO;IALpB;;QAMU,aAAQ,GAAW,SAAS,CAAC;QAC7B,YAAO,GAAY,EAAE,CAAC;QAEtB,oBAAe,GAAY,KAAK,CAAC;KAqB1C;IAfC,MAAM;QACJ,QACEA,QAACC,UAAI,uDACHD,kEAAK,KAAK,EAAE,qBAAqB,IAAI,CAAC,QAAQ,aAAa,IAAI,CAAC,IAAI,gBAAgB,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,cAAc,EAAE,IAC3I,IAAI,CAAC,IAAI,GAAGA,eAAG,KAAK,EAAC,gBAAgB,IAAE,IAAI,CAAC,IAAI,CAAK,GAAG,IAAI,EAC7DA,qEAAMA,oEAAQ,CAAO,EACpB,IAAI,CAAC,eAAe,KACnBA,mEAAM,KAAK,EAAC,YAAY,EAAG,OAAO,EAAE,IAAI,CAAC,YAAY,IACnDA,gEAAG,KAAK,EAAC,gBAAgB,YAAU,CAC9B,CACR,CACG,CACD,EACP;KACH;;;;;;","names":["h","Host"],"sources":["src/components/dda-chip/dda-chip.css?tag=dda-chip","src/global/global.css?tag=dda-chip","src/components/dda-chip/dda-chip.tsx"],"sourcesContent":[".dda-chip{\r\n  display: inline-flex;\r\n  height: 26px;\r\n  background: var(--dda-color-primary-95);\r\n  border: solid 1px var(--dda-color-primary-40);\r\n  color: var(--dda-color-primary-40);\r\n  align-items: center;\r\n  gap: 5px;\r\n  padding: 2px 8px;\r\n  border-radius: 6px; \r\n}\r\n.dda-chip i{\r\n  font-size: 19px;\r\n}\r\n.dda-chip .circle{\r\n  font-size: 7px;\r\n}\r\n.dda-chip-grey{\r\n  background: var(--dda-neutral-variant-94);\r\n  border: solid 1px var(--dda-neutral-90);\r\n  color: var(--dda-on-surface-variant-30);\r\n}\r\n.light-mode.dda-chip-grey{\r\n  background: var(--dda-neutral-variant-94);\r\n  border: solid 1px var(--dda-neutral-90);\r\n  color: var(--dda-neutral-variant-30);\r\n}\r\n/**/\r\n.dda-chip-primary{\r\n  background: var(--dda-primary-variant-95);\r\n  border: solid 1px var(--dda-color-primary-40);\r\n  color: var(--dda-color-primary-40);\r\n}\r\n.light-mode.dda-chip-primary{\r\n  background: var(--dda-primary-95);\r\n  border: solid 1px var(--dda-primary-40);\r\n  color: var(--dda-primary-40);\r\n}\r\n/**/\r\n.dda-chip-green{\r\n  background: var(--dda-success-variant-95);\r\n  border: solid 1px var(--dda-color-success-40);\r\n  color: var(--dda-color-success-40);\r\n}\r\n.light-mode.dda-chip-green{\r\n  background: var(--dda-success-95);\r\n  border: solid 1px var(--dda-success-40);\r\n  color: var(--dda-success-40);\r\n}\r\n/**/\r\n.dda-chip-yellow{\r\n  background: var(--dda-warning-variant-95);\r\n  border: solid 1px var(--dda-color-warning-40);\r\n  color: var(--dda-color-warning-40);\r\n}\r\n.light-mode.dda-chip-yellow{\r\n  background: var(--dda-warning-95);\r\n  border: solid 1px var(--dda-warning-40);\r\n  color: var(--dda-warning-40);\r\n}\r\n/**/\r\n.dda-chip-red{\r\n  background: var(--dda-error-variant-95);\r\n  border: solid 1px var(--dda-color-error-40);\r\n  color: var(--dda-color-error-40);\r\n}\r\n.light-mode.dda-chip-red{\r\n  background: var(--dda-error-95);\r\n  border: solid 1px var(--dda-error-40);\r\n  color: var(--dda-error-40);\r\n}\r\n/**/\r\n.dda-chip-purple{\r\n  background: var(--dda-color-purple-50);\r\n  border: solid 1px var(--dda-color-purple);\r\n  color: var(--dda-color-purple);\r\n}\r\n\r\n.dda-chip-sm{\r\n  height: 24px;\r\n}\r\n.dda-chip-md{\r\n  height: 26px;\r\n}\r\n.dda-chip-lg{\r\n  height: 32px;\r\n  padding: 2px 12px;\r\n}\r\n.dda-chip-square{\r\n  border-radius: 6px;\r\n}\r\n.dda-chip-circle{\r\n  border-radius: 40px;\r\n}\r\n\r\n.dda-chip .chip-close{\r\n  display: inline-flex;\r\n  cursor: pointer;\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, h, Host } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'dda-chip',\r\n  styleUrls: ['dda-chip.css', '../../global/global.css'],\r\n  shadow: false,\r\n})\r\nexport class DdaChip {\r\n  @Prop() bg_color: string = 'success';\r\n  @Prop() rounded?: string = '';\r\n  @Prop() icon: string;\r\n  @Prop() show_close_icon: boolean = false;\r\n  @Prop() size?: string; // e.g., 'sm', 'md', 'lg'\r\n  @Prop() custom_class?: string;\r\n  @Prop() component_mode?: string;  \r\n  @Prop() clickHandler?: (event: MouseEvent) => void;\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <div class={`dda-chip dda-chip-${this.bg_color} dda-chip-${this.size} dda-rounded-${this.rounded} ${this.custom_class} ${this.component_mode}`}>\r\n          {this.icon ? <i class=\"material-icons\">{this.icon}</i> : null}\r\n          <span><slot /></span>\r\n          {this.show_close_icon && (\r\n            <span class=\"chip-close\"   onClick={this.clickHandler}>\r\n              <i class=\"material-icons\">close</i>\r\n            </span>\r\n          )}\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/cjs/dda-credit-card.cjs.entry.js.map

@@ -1 +0,0 @@
-{"file":"dda-credit-card.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,gBAAgB,GAAG,uoEAAuoE,CAAC;AACjqE,4BAAe,gBAAgB;;ACD/B,MAAM,SAAS,GAAG,y6uDAAy6uD,CAAC;AAC57uD,4BAAe,SAAS;;MCMX,aAAa;IAL1B;;QAWU,iBAAY,GAAY,EAAE,CAAC;KAgCpC;IA7BC,MAAM;QACJ,MAAM,SAAS,GAAG;YAChB,2BAA2B;YAC3B,IAAI,CAAC,MAAM,GAAG,mBAAmB,IAAI,CAAC,MAAM,EAAE,GAAG,EAAE;YACnD,IAAI,CAAC,YAAY,GAAG,GAAG,IAAI,CAAC,YAAY,EAAE,GAAG,EAAE;YAC/C,IAAI,CAAC,cAAc;SACpB,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QAE5B,QACEA,QAACC,UAAI,uDACHD,kEAAK,KAAK,EAAE,SAAS,IACnBA,kEAAK,KAAK,EAAC,wBAAwB,IACjCA,kEAAK,KAAK,EAAC,mBAAmB,IAC5BA,mEAAM,KAAK,EAAC,oBAAoB,sBAAuB,EACvDA,mEAAM,KAAK,EAAC,cAAc,IAAE,IAAI,CAAC,OAAO,CAAQ,CAC5C,EACNA,gEAAG,KAAK,EAAC,gBAAgB,iBAAa,MAAM,WAAS,CACjD,EACNA,kEAAK,KAAK,EAAC,sBAAsB,IAC/BA,kEAAK,KAAK,EAAC,eAAe,IACxBA,mEAAM,KAAK,EAAC,eAAe,IAAE,IAAI,CAAC,IAAI,CAAQ,EAC9CA,mEAAM,KAAK,EAAC,iBAAiB,aAAO,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAQ,CAClE,EACNA,oEAAKA,kEAAK,GAAG,EAAE,IAAI,CAAC,SAAS,EAAE,GAAG,EAAC,WAAW,EAAC,KAAK,EAAC,gBAAgB,GAAE,CAAM,CACzE,CACF,CACD,EACP;KACH;;;;;;","names":["h","Host"],"sources":["src/components/dda-credit-card/dda-credit-card.css?tag=dda-credit-card","src/global/global.css?tag=dda-credit-card","src/components/dda-credit-card/dda-credit-card.tsx"],"sourcesContent":[".dda-credit-card-container{\r\n  width: 352px;\r\n  height: 192px;\r\n  background: var(--dda-neutral-100);\r\n  padding: 16px 18px;\r\n  border-radius: 10px;\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 45px;\r\n}\r\n\r\n.dda-credit-card-header{\r\n  display: flex;\r\n}\r\n.dda-credit-card-header svg path{\r\n  fill: var(--dda-on-surface-0);\r\n}\r\n.light-mode .dda-credit-card-header svg path{\r\n  fill: var(--dda-neutral-0);\r\n}\r\n.card-balance-info{\r\n  display: flex;\r\n  flex-direction: column;\r\n  flex: 1;\r\n}\r\n.card-balance-label{\r\n  font-size: 16px;\r\n  font-weight: var(--dda-fw-400);\r\n  opacity: 54;\r\n}\r\n.dda-credit-card-default .card-balance-label{\r\n  color: var(--dda-on-surface-variant-30);\r\n}\r\n.light-mode.dda-credit-card-default .card-balance-label{\r\n  color: var(--dda-neutral-variant-30);\r\n}\r\n.card-balance{\r\n  font-size: 32px;\r\n  font-weight: var(--dda-fw-700);\r\n  line-height: 45px;\r\n}\r\n.dda-credit-card-default .card-balance{\r\n  color: var(--dda-on-surface-0);\r\n}\r\n.light-mode.dda-credit-card-default .card-balance{\r\n  color: var(--dda-neutral-0);\r\n}\r\n.dda-credit-card-body{\r\n  display: flex;\r\n}\r\n.card-userinfo{\r\n  display: flex;\r\n  flex-direction: column;\r\n  flex: 1;\r\n}\r\n.dda-card-name,\r\n.dda-card-number{\r\n  font-size: 14px;\r\n  color: var(--dda-on-surface-0);\r\n  font-weight: var(--dda-fw-500);\r\n  opacity: 90;\r\n}\r\n.light-mode .dda-card-name,\r\n.light-mode .dda-card-number{\r\n  color: var(--dda-neutral-0);\r\n}\r\n.card-type-icon{\r\n  width: 40px;\r\n  display: block;\r\n}\r\n.dda-credit-card-default{\r\n  background: var(--dda-surface-100);\r\n}\r\n.light-mode.dda-credit-card-default{\r\n  background: var(--dda-neutral-100);\r\n}\r\n.dda-credit-card-green{\r\n  background: var(--dda-color-primary-40);\r\n}\r\n.light-mode.dda-credit-card-green{\r\n  background: var(--dda-primary-40);\r\n}\r\n.dda-credit-card-dark{\r\n  background: var(--dda-on-surface-variant-30);\r\n}\r\n.light-mode.dda-credit-card-dark{\r\n  background: var(--dda-neutral-variant-30);\r\n}\r\n.dda-credit-card-green .dda-credit-card-header i,\r\n.dda-credit-card-green .card-balance-label,\r\n.dda-credit-card-green .card-balance,\r\n.dda-credit-card-green .dda-card-name,\r\n.dda-credit-card-green .dda-card-number,\r\n.dda-credit-card-dark .dda-credit-card-header i,\r\n.dda-credit-card-dark .card-balance-label,\r\n.dda-credit-card-dark .card-balance,\r\n.dda-credit-card-dark .dda-card-name,\r\n.dda-credit-card-dark .dda-card-number{\r\n  color: var(--dda-neutral-100);\r\n}\r\n.dda-credit-card-green .dda-credit-card-header svg path,\r\n.dda-credit-card-dark .dda-credit-card-header svg path{\r\n  fill: var(--dda-neutral-100);\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, h, Host } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'dda-credit-card',\r\n  styleUrls: ['dda-credit-card.css', '../../global/global.css'],\r\n  shadow: false,\r\n})\r\nexport class DdaCreditCard {\r\n  @Prop() balance: string;\r\n  @Prop() name: string;\r\n  @Prop() card_number: string;\r\n  @Prop() card_type: string;\r\n  @Prop() design: string;\r\n  @Prop() custom_class?: string = ''; \r\n  @Prop() component_mode?: string; \r\n\r\n  render() {\r\n    const cardClass = [\r\n      'dda-credit-card-container',\r\n      this.design ? `dda-credit-card-${this.design}` : '',\r\n      this.custom_class ? `${this.custom_class}` : \"\",\r\n      this.component_mode,\r\n    ].filter(Boolean).join(' ');\r\n\r\n    return (\r\n      <Host>\r\n        <div class={cardClass}>\r\n          <div class=\"dda-credit-card-header\">\r\n            <div class=\"card-balance-info\">\r\n              <span class=\"card-balance-label\">Current Balance</span>\r\n              <span class=\"card-balance\">{this.balance}</span>\r\n            </div>\r\n            <i class=\"material-icons\" aria-hidden=\"true\">wifi</i>\r\n          </div>\r\n          <div class=\"dda-credit-card-body\">\r\n            <div class=\"card-userinfo\">\r\n              <span class=\"dda-card-name\">{this.name}</span>\r\n              <span class=\"dda-card-number\">**** {this.card_number.slice(-4)}</span>\r\n            </div>\r\n            <div><img src={this.card_type} alt=\"Card Type\" class=\"card-type-icon\"/></div>\r\n          </div>\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/cjs/dda-creditcard-field.cjs.entry.js.map

@@ -1 +0,0 @@
-{"file":"dda-creditcard-field.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,QAAQ,GAAG,4pWAA4pW,CAAC;AAC9qW,iCAAe,QAAQ;;ACDvB,MAAM,SAAS,GAAG,y6uDAAy6uD,CAAC;AAC57uD,iCAAe,SAAS;;MCMX,kBAAkB;IAL/B;;QAQU,UAAK,GAAW,EAAE,CAAC;QAOnB,aAAQ,GAAY,KAAK,CAAC;QAC1B,iBAAY,GAAY,EAAE,CAAC;QAC3B,mBAAc,GAAY,KAAK,CAAC;QAK/B,mBAAc,GAAW,EAAE,CAAC;KAmEtC;IAjEC,WAAW,CAAC,KAAY;QACtB,MAAM,YAAY,GAAG,KAAK,CAAC,MAA0B,CAAC;QACtD,MAAM,UAAU,GAAG,YAAY,CAAC,KAAK,CAAC,OAAO,CAAC,UAAU,EAAE,EAAE,CAAC,CAAC;QAC9D,MAAM,SAAS,GAAG,IAAI,CAAC,cAAc,GAAG,GAAG,GAAG,EAAE,CAAC;QAEjD,IAAI,UAAU,CAAC,MAAM,IAAI,SAAS,EAAE;YAClC,IAAI,CAAC,KAAK,GAAG,UAAU,CAAC;YACxB,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YAClC,YAAY,CAAC,KAAK,GAAG,IAAI,CAAC,cAAc,CAAC;SAC1C;aAAM;YACL,YAAY,CAAC,KAAK,GAAG,IAAI,CAAC,cAAc,CAAC;SAC1C;KACF;IAED,gBAAgB,CAAC,KAAa;QAC5B,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;QACzC,MAAM,OAAO,GAAG,OAAO,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;QACzC,IAAI,OAAO,EAAE;YACX,IAAI,CAAC,cAAc,GAAG,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;SAC3C;aAAM;YACL,IAAI,CAAC,cAAc,GAAG,OAAO,CAAC;SAC/B;KACF;IAED,iBAAiB;QACf,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KACnC;IAED,MAAM;QACJ,MAAM,UAAU,GAAG;YACjB,2CAA2C;YAC3C,IAAI,CAAC,eAAe,GAAG,kBAAkB,IAAI,CAAC,eAAe,EAAE,GAAG,EAAE;YACpE,IAAI,CAAC,IAAI,GAAG,kBAAkB,IAAI,CAAC,IAAI,EAAE,GAAG,EAAE;YAC9C,IAAI,CAAC,UAAU,GAAG,aAAa,IAAI,CAAC,UAAU,EAAE,GAAG,EAAE;YACrD,IAAI,CAAC,QAAQ,GAAG,oBAAoB,GAAG,EAAE;YACzC,IAAI,CAAC,aAAa,GAAG,mBAAmB,GAAG,EAAE;YAC7C,IAAI,CAAC,YAAY,GAAG,GAAG,IAAI,CAAC,YAAY,EAAE,GAAG,EAAE;YAC/C,IAAI,CAAC,cAAc;SACpB,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QAE5B,QACEA,QAACC,UAAI,uDACHD,kEAAK,KAAK,EAAE,UAAU,IACnB,IAAI,CAAC,KAAK,IAAIA,oEAAO,OAAO,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAC,iBAAiB,IAAE,IAAI,CAAC,KAAK,CAAS,EAC1FA,kEAAK,KAAK,EAAC,yBAAyB,IACjC,IAAI,CAAC,SAAS,IAAIA,kEAAK,GAAG,EAAE,IAAI,CAAC,SAAS,EAAE,GAAG,EAAC,WAAW,EAAC,KAAK,EAAC,qBAAqB,GAAG,EAC3FA,kFACc,IAAI,CAAC,UAAU,EAC3B,EAAE,EAAE,IAAI,CAAC,QAAQ,EACjB,IAAI,EAAC,MAAM,EACX,SAAS,EAAC,SAAS,EACnB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,KAAK,EAAE,IAAI,CAAC,cAAc,EAC1B,OAAO,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,EAC3C,KAAK,EAAC,iBAAiB,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,SAAS,EAAE,IAAI,CAAC,cAAc,GAAG,GAAG,GAAG,EAAE,GACzC,CACE,EACL,IAAI,CAAC,WAAW,IAAIA,mEAAM,KAAK,EAAC,iBAAiB,IAAE,IAAI,CAAC,WAAW,CAAQ,EAC3E,IAAI,CAAC,aAAa,IAAIA,mEAAM,KAAK,EAAC,mBAAmB,IAAE,IAAI,CAAC,aAAa,CAAQ,CAC9E,CACD,EACP;KACH;;;;;;","names":["h","Host"],"sources":["src/global/input.css?tag=dda-creditcard-field","src/global/global.css?tag=dda-creditcard-field","src/components/dda-creditcard-field/dda-creditcard-field.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-creditcard-field',\r\n  styleUrls: ['../../global/input.css', '../../global/global.css'],\r\n  shadow: false,\r\n})\r\nexport class DdaCreditCardField {\r\n  @Prop() placeholder: string;\r\n  @Prop() label: string;\r\n  @Prop() value: string = '';\r\n  @Prop() card_icon: string;\r\n  @Prop() error_message: string;\r\n  @Prop() validation_type?: string;\r\n  @Prop() size?: string;\r\n  @Prop() input_type?: string;\r\n  @Prop() helper_text: string;\r\n  @Prop() disabled: boolean = false;\r\n  @Prop() custom_class?: string = '';\r\n  @Prop() restrict_input: boolean = false;\r\n  @Prop() component_mode?: string; \r\n  @Prop() input_id: string;\r\n  @Prop() aria_label?: string;\r\n\r\n  @State() formattedValue: string = '';\r\n\r\n  handleInput(event: Event) {\r\n    const inputElement = event.target as HTMLInputElement;\r\n    const inputValue = inputElement.value.replace(/[^0-9-]/g, '');\r\n    const maxLength = this.restrict_input ? 100 : 25;\r\n    \r\n    if (inputValue.length <= maxLength) {\r\n      this.value = inputValue;\r\n      this.formatCardNumber(this.value);\r\n      inputElement.value = this.formattedValue;\r\n    } else {\r\n      inputElement.value = this.formattedValue;\r\n    }\r\n  }\r\n\r\n  formatCardNumber(value: string) {\r\n    const cleaned = value.replace(/\\D/g, '');\r\n    const matched = cleaned.match(/.{1,4}/g);\r\n    if (matched) {\r\n      this.formattedValue = matched.join(' - ');\r\n    } else {\r\n      this.formattedValue = cleaned;\r\n    }\r\n  }\r\n\r\n  componentWillLoad() {\r\n    this.formatCardNumber(this.value);\r\n  }\r\n\r\n  render() {\r\n    const inputClass = [\r\n      'dda-input-container dda-credit-card-field',\r\n      this.validation_type ? `dda-validation-${this.validation_type}` : '',\r\n      this.size ? `dda-input-size-${this.size}` : '',\r\n      this.input_type ? `dda-input-${this.input_type}` : '',\r\n      this.disabled ? 'dda-input-disabled' : '',\r\n      this.error_message ? 'dda-error-message' : '',\r\n      this.custom_class ? `${this.custom_class}` : '',\r\n      this.component_mode, \r\n    ].filter(Boolean).join(' ');\r\n\r\n    return (\r\n      <Host>\r\n        <div class={inputClass}>\r\n          {this.label && <label htmlFor={this.input_id} class=\"dda-input-label\">{this.label}</label>}\r\n          <div class=\"dda-input-field-wrapper\">\r\n            {this.card_icon && <img src={this.card_icon} alt=\"Card Icon\" class=\"dda-creditcard-icon\" />}\r\n            <input\r\n              aria-label={this.aria_label}\r\n              id={this.input_id}\r\n              type=\"text\"\r\n              inputmode=\"numeric\"\r\n              placeholder={this.placeholder}\r\n              value={this.formattedValue}\r\n              onInput={(event) => this.handleInput(event)}\r\n              class=\"dda-input-field\"\r\n              disabled={this.disabled}\r\n              maxlength={this.restrict_input ? 100 : 25}\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}"],"version":3}