@cargosense/cargo-design-system 1.0.0 → 1.0.4

package/dist/molecules/index.cjs.js

@@ -0,0 +1,1227 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../assets/Counter.cjs.js");require("../fonts/index.cjs.js");e.registerIcon();class a extends e.i{static styles=e.i$1`
+   @font-face {
+      font-family: 'Geist';
+      src: url(${e.r(e.fontURL)}) format('woff');
+      font-weight: 100 900;
+      font-style: normal;
+    }
+
+    .button {
+      box-sizing: border-box;
+      text-decoration: none;
+      font-family: 'Geist', sans-serif;
+      height:40px;
+      width:fit-content;
+      padding: var(--button-vertical-padding, 10px) var(--button-horizontal-padding, 18px);
+
+      background-color: var(--button-background-default, var(--base-color-slate-900));
+      color: var(--button-text-default, var(--base-color-white));
+      font-size: var(--button-text-size, 16px);
+      border: 1px solid var(--button-border-default, var(--base-color-slate-950));
+      border-radius: var(--button-border-radius, 6px);
+      display: inline-flex;
+      align-items: center;
+      gap: var(--button-gap, 8px);
+      cursor: pointer;
+      --icon-stroke: var(--button-icon-default, var(--base-color-teal-300));
+      --icon-background-page: var(--button-background-default, var(--base-color-slate-900));
+      --icon-background-primary: var(--base-color-teal-400);
+    }
+
+    .classic {
+      --button-text-default: var(--base-color-teal-50);
+      --button-background-default: var(--base-color-teal-600);
+      --button-background-hover: var(--base-color-teal-500);
+      --button-background-disabled: var(--base-color-slate-300);
+      --button-border-default: var(--base-color-teal-700);
+      --button-text-disabled: var(--base-color-slate-100);
+      --button-border-disabled: var(--base-color-slate-500);
+      --button-icon-disabled: var(--base-color-slate-200)
+
+    }
+
+    .secondary {
+      --button-background-disabled: var(--button-secondary-background-disabled);
+      --button-text-disabled: var(--button-secondary-text-disabled);
+      --button-border-disabled: var(--button-secondary-border-disabled);
+      --button-text-hover: var(--button-secondary-text-hover);
+      --button-background-hover: var(--button-secondary-background-hover);
+      --button-text-default: var(--button-secondary-text-default);
+      --button-background-default: var(--button-secondary-background-default);
+      --button-border-default: var(--button-secondary-border-default);
+      --button-border-hover: var(--button-secondary-border-hover);
+      --button-icon-default: var(--button-secondary-icon-default);
+
+    }
+
+    .button:hover {
+      background-color: var(--button-background-hover, var(--base-color-slate-800));
+      color: var(--button-text-hover, var(--base-color-white));
+      border-color: var(--button-border-hover, var(--base-color-slate-900));
+      transition: background-color 0.2s ease-in-out;
+    }
+
+    .button:focus {
+      outline: 2px solid var(--input-border-color-focus);
+      outline-offset: var(--button-focus-offset, 1px);
+    }
+
+    .disabled {
+      background-color: var(--button-background-disabled, var(--base-color-slate-400));
+      color: var(--button-text-disabled, var(--base-color-slate-200));
+      border-color: var(--button-border-disabled, var(--base-color-slate-450));
+      cursor: not-allowed;
+      --icon-stroke: var(--button-icon-disabled, var(--base-color-slate-300));
+    }
+
+    .disabled:hover {
+      background-color: var(--button-background-disabled, var(--base-color-slate-400));
+      color: var(--button-text-disabled, var(--base-color-slate-200));
+      border-color: var(--button-border-disabled, var(--base-color-slate-450));
+    }
+
+    .disabled:focus {
+      outline: none;
+    }
+
+    .sm {
+      height:36px;
+      padding: 0 var(--button-horizontal-padding-sm, 12px);
+    }
+
+    .lg {
+      height:50px;
+      padding: 0 var(--button-horizontal-padding-lg, 24px);
+    }
+
+    .square {
+      padding: 0;
+      aspect-ratio: 1 / 1;
+      justify-content: center;
+    }
+
+    .expand {
+      width: 100%;
+      padding-left: 0;
+      padding-right: 0;
+      flex-grow: 1;
+      justify-content: center;
+    }
+
+    a {
+      text-decoration: none;
+      color: inherit;
+      outline: none;
+    }
+
+    `;static properties={variant:{type:String,reflect:!0,converter:t=>["classic","secondary","primary"].includes(t)?t:"classic"},size:{type:String,reflect:!0,attribute:"size",converter:t=>["sm","md","lg"].includes(t)?t:"md"},disabled:{type:Boolean,reflect:!0,attribute:"disabled"},link:{type:String,reflect:!0,attribute:"link"},target:{type:String,reflect:!0,attribute:"target",converter:t=>["_blank","_self","_parent","_top"].includes(t)?t:"_self"},expand:{type:Boolean,reflect:!0,attribute:"full-width",converter:t=>t==""?"expand":""},value:{type:String,reflect:!0,attribute:"value",defaultValue:""},type:{type:String,reflect:!0,attribute:"type",converter:t=>["button","submit","reset"].includes(t)?t:"button"},square:{type:Boolean,reflect:!0,attribute:"square",converter:t=>t===""?"square":""},form:{type:String,reflect:!0,attribute:"form"}};firstUpdated(){const t=document.getElementById(this.form);this.shadowRoot.querySelector("button").addEventListener("click",()=>{t instanceof HTMLFormElement&&(console.log("Form found, submitting..."),t.requestSubmit())})}constructor(){super(),this.link=void 0,this.target=void 0,this.disabled=!1,this.size="md",this.expand="",this._variant="primary",this.name=void 0,this.button="button",this.form=void 0,this.square=""}render(){return e.x`
+    <a href='${e.o(this.link)}' target="${e.o(this.target)}" tabindex="-1" class="${this.expand}">
+      <button form="${this.form}" type="${this.button}" class="button ${this.square} ${this.variant} ${this.size} ${this.expand} ${this.disabled?"disabled":""}" .name="${this.name}" tabindex="${this.disabled?"-1":0}" @click='${this.handleClick}'>
+       <slot name='start'></slot> <slot></slot> <slot name='end'></slot>
+      </button>
+      </a> `}handleClick(t){if(this.disabled){t.preventDefault(),t.stopPropagation();return}this.dispatchEvent(new CustomEvent("button-click",{detail:{value:this.value,name:this.name},bubbles:!0,composed:!0}))}}function i(){typeof window<"u"&&!customElements.get("cd-button")&&customElements.define("cd-button",a)}e.registerIcon();class n extends e.i{static styles=e.i$1`
+    @font-face {
+      font-family: 'Geist';
+      src: url(${e.r(e.fontURL)}) format('woff');
+      font-weight: 100 900;
+      font-style: normal;
+    }
+
+    :host {
+      width: 100%;
+    }
+
+    .header {
+      font-family: 'Geist', sans-serif;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      background-color: var(--header-background-color, var(--base-color-white));
+      border-bottom: 1px solid var(--header-border-color, var(--base-color-stone-200));
+      width: 100%;
+
+    }
+
+    .left {
+      display: flex;
+      align-items: center;
+      font-size: var(--header-text-size, 16px);
+      font-weight: var(--header-text-weight, 500);
+      gap: var(--header-gap, 16px);
+    }
+
+    cd-icon {
+      padding: var(--header-icon-padding) 0 var(--header-icon-padding) var(--header-icon-padding);
+
+    }
+
+    .right {
+      padding: 0 16px;
+
+    }
+  `;static properties={icon:{type:String,reflect:!0,attribute:"icon"},title:{type:String,reflect:!0,attribute:"title"}};constructor(){super(),this.icon="",this.title=""}render(){return e.x`
+      <header class="header">
+        <div class='left'>
+          <cd-icon name="${this.icon}" size="md"></cd-icon>
+          <span class="title">${this.title}</span>
+        </div>
+        <div class='right'>
+          <slot></slot>
+        </div>
+      </header>
+    `}}function y(){!customElements.get("cd-header")&&typeof window<"u"&&customElements.define("cd-header",n)}e.registerIcon();class s extends e.i{static formAssociated=!0;static styles=e.i$1`
+    @font-face {
+      font-family: 'Geist';
+      src: url(${e.r(e.fontURL)}) format('woff');
+      font-weight: 100 900;
+      font-style: normal;
+    }
+
+    :host {
+      width: 100%;
+      display: block;
+    }
+
+    div {
+      font-family: 'Geist';
+      margin: var(--input-gap) 0;
+      width: 100%;
+      padding: var(--input-container-padding, 0);
+    }
+
+    input {
+      box-sizing: border-box;
+      padding: 0 var(--input-horizontal-inline-padding);
+      height: 40px;
+      border-width: var(--input-border-width);
+      border-style: var(--input-border-style);
+      border-color: var(--input-border-color);
+      border-radius: var(--input-border-radius);
+      background-color: var(--input-background-color);
+      color: var(--input-text-color);
+      width: var(--input-width);
+      font-size: var(--input-font-size);
+    }
+
+    input:hover {
+      border-color: var(--input-border-color-hover);
+    }
+
+    input:focus {
+      background-color: var(--input-background-color-focus);
+      color: var(--input-text-color-focus);
+      outline: 2px solid var(--input-border-color-focus);
+      border: 1px solid var(--input-border-color-focus);
+    }
+
+    .disabled {
+      background-color: var(--input-background-color-disabled);
+      color: var(--input-text-color-disabled);
+      border-color: var(--input-border-color-disabled);
+      cursor: not-allowed;
+    }
+
+    .disabled:hover {
+      outline: none;
+      border-color: var(--input-border-color-disabled);
+    }
+
+    .input-error {
+      border-color: var(--input-error-border-color);
+      color: var(--input-error-border-color);
+    }
+
+    .input-error:hover {
+      border-color: var(--input-error-border-hover-color);
+    }
+
+    .input-error:focus {
+      border-color: var(--input-error-border-color);
+      outline: 2px solid var(--input-error-border-color);
+    }
+
+    .full-width {
+      width: 100%;
+    }
+
+    .dashed {
+      border-style: dashed;
+    }
+
+    .dotted {
+      border-style: dotted;
+    }
+
+    .lg {
+      height: 50px;
+      padding: 0 var(--input-horizontal-inline-padding-lg, 24px);
+    }
+
+    .sm {
+      height: 36px;
+      padding: 0 var(--input-horizontal-inline-padding-sm, 12px);
+    }
+
+    .icon-left-container, .icon-right-container {
+      position: relative;
+    }
+    .icon-left, .icon-right {
+      position: absolute;
+      top: calc(50% + 1px);
+      transform: translateY(-50%);
+      pointer-events: none;
+    }
+
+    .icon-left {
+      left: 10px;
+    }
+    .icon-right {
+      right: 10px;
+    }
+    .icon-left-container cd-icon, .icon-right-container cd-icon {
+      color: var(--input-icon-color, var(--text-secondary-color));
+    }
+
+    .icon-spacing-left {
+      padding-left: calc(var(--input-horizontal-inline-padding) + 20px);
+    }
+    .icon-spacing-right {
+      padding-right: calc(var(--input-horizontal-inline-padding) + 20px);
+    }
+
+
+
+    `;static properties={name:{type:String,reflect:!0},type:{type:String,reflect:!0,converter:t=>["text","date","time","number","tel","url","phone","email","password"].includes(t)?t:"text"},disabled:{type:Boolean,reflect:!0},placeholder:{type:String,reflect:!0},readOnly:{type:Boolean,reflect:!0,attribute:"read-only"},required:{type:Boolean,reflect:!0},pattern:{type:String},error:{type:Boolean,reflect:!0},value:{type:String,reflect:!0},fullWidth:{type:Boolean,reflect:!0,attribute:"full-width"},variant:{type:String,reflect:!0},size:{type:String,reflect:!0,converter:t=>["sm","md","lg"].includes(t)?t:"md"},iconLeft:{type:String,reflect:!0,attribute:"icon-left"},iconRight:{type:String,reflect:!0,attribute:"icon-right"}};handleKeyPress(t){return this.dispatchEvent(new CustomEvent("keypress",{detail:{value:t.target.value,key:t.keyCode}})),t.key==="Enter"&&this.dispatchEvent(new CustomEvent("onenter",{detail:{value:t.target.value}})),this.dispatchEvent(new CustomEvent("onkeyup",{detail:{value:t.target.value,key:t.keyCode}})),this._internals.setFormValue(t.target.value),this.value=t.target.value,t.target.value}handleInput(t){return this.dispatchEvent(new CustomEvent("input",{detail:{value:t.target.value}})),this._internals.setFormValue(t.target.value),this.value=t.target.value,t.target.value}handleChange(t){return this.dispatchEvent(new CustomEvent("onchange",{detail:{value:t.target.value}})),this._internals.setFormValue(t.target.value),this.value=t.target.value,t.target.value}handleFocus(t){return this.dispatchEvent(new CustomEvent("onblur",{detail:{value:t.target.value}})),this._internals.setFormValue(t.target.value),this.value=t.target.value,t.target}constructor(){super(),this.value="",this.placeholder="",this.pattern="",this.variant="solid",this.size="md",this._internals=this.attachInternals()}render(){return e.x`
+      ${this.iconLeft?e.x`<span class="icon-left-container"><cd-icon name="${this.iconLeft}" size="sm" class="icon-left"></cd-icon></span>`:""}
+      <input id='${this.name}' class="${this.iconLeft?"icon-spacing-left":""} ${this.iconRight?" icon-spacing-right":""}  ${this.disabled?" disabled":""} ${this.error?" input-error":""} ${this.fullWidth?" full-width":""} ${this.variant==="dashed"?" dashed":this.variant=="dotted"?" dotted":""} ${this.size}" type="${this.type}" placeholder="${this.placeholder}" ?required=${this.required} .value="${this.value}"  ?readonly=${this.readOnly} ?disabled=${this.disabled} .pattern="${this.pattern}" @input="${this.handleInput}" @change="${this.handleChange}" @blur="${this.handleFocus}" @keypress=${this.handleKeyPress}/>
+      ${this.iconRight?e.x`<span class="icon-right-container"><cd-icon name="${this.iconRight}" size="sm" class="icon-right"></cd-icon></span>`:""}
+      `}focus(){if(!this.shadowRoot){console.warn("Input element is not yet connected to the DOM.");return}if(!this.shadowRoot.querySelector("input")){console.warn("Input element is not found in the shadow DOM.");return}this.shadowRoot.querySelector("input").focus()}}function w(){typeof window<"u"&&!customElements.get("cd-input")&&customElements.define("cd-input",s)}e.registerNavImage();class l extends e.i{static styles=e.i$1`
+    @font-face {
+      font-family: 'Geist';
+      src: url(${e.r(e.fontURL)}) format('woff');
+      font-weight: 100 900;
+      font-style: normal;
+    }
+
+    .navbar {
+      font-family: 'Geist', sans-serif;
+      width: 300px;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      border-right: 1px solid var(--base-color-stone-200);
+    }
+
+    .items {
+      flex-grow: 1;
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+      padding: 32px;
+    }
+
+    .image {
+      padding: 32px;
+      border-bottom: 1px solid var(--base-color-stone-200);
+    }
+
+    .small {
+      width: 225px;
+    }
+
+    .small .items {
+      padding: 16px;
+    }
+
+    slot[name="start"] {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+    }
+
+    slot[name="end"] {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+      flex-grow: 1;
+      justify-content: flex-end;
+    }
+
+    .small ::slotted(div) {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+    }
+  `;static properties={image:{type:String,reflect:!0,attribute:"image",defaultValue:""},name:{type:String,reflect:!0,attribute:"name",defaultValue:""},small:{type:Boolean,reflect:!0,attribute:"sidebar",defaultValue:!1}};constructor(){super(),this.image="",this.name=""}render(){return e.x`
+      <nav class="navbar ${this.small?"small":""}">
+       ${this.image!=""&&this.name!=""?e.x` <div class="image">
+       <cd-nav-image src="${this.image}" alt="Logo" name="${this.name}"></cd-nav-image>
+     </div>`:""}
+
+        <div class="items">
+          <slot name="start"></slot>
+          <slot></slot>
+          <slot name="end"></slot>
+        </div>
+      </nav>
+    `}}function k(){typeof window<"u"&&!customElements.get("cd-nav-bar")&&customElements.define("cd-nav-bar",l)}e.registerCounter();e.registerIcon();class c extends e.i{static styles=e.i$1`
+    @font-face {
+      font-family: 'Geist';
+      src: url('${e.r(e.fontURL)}') format('woff');
+      font-weight: 100 900;
+      font-style: normal;
+    }
+
+    .nav-item {
+      vertical-trim: trim;
+      flex-grow: 1;
+      font-family: Geist, sans-serif;
+      position: relative;
+      display: flex;
+      align-items: center;
+      padding: var(--nav-item-vertical-padding) var(--nav-item-horizontal-padding);
+      border-radius: var(--nav-item-border-radius);
+      color: var(--nav-item-text-color);
+      text-decoration: none;
+      font-size: var(--nav-item-font-size);
+      font-weight: 400;
+      gap: var(--nav-item-gap);
+      line-height: 0;
+      background-color: transparent;
+      transition: background-color 0.2s ease-in-out;
+      margin-bottom: 4px; /* Simulate the gap between the parent and the child thats between every child, see .children-active gap */
+      cursor: pointer;
+      --icon-stroke: var(--base-color-slate-600);
+    }
+
+    .nav-item:hover {
+      background-color: var(--nav-item-hover-background-color, var(--base-color-slate-50));
+    }
+
+    .nav-item:focus {
+      background-color: var(--nav-item-hover-background-color, var(--base-color-slate-50));
+      outline-offset: 0;
+      border: none;
+      outline: 1px solid var(--input-border-color-focus);
+    }
+
+    .nav-item .caret {
+      transform: rotate(270deg);
+    }
+
+    .active {
+      background-color: var(--nav-item-hover-background-color, var(--base-color-slate-50));
+    }
+
+    .active .caret {
+      transform: rotate(0deg);
+    }
+
+    .nav-item p {
+      flex-grow: 1;
+    }
+
+    .children {
+      display: none;
+      padding-left: calc(var(--nav-item-horizontal-padding) + 32px); /* 32px for icon width */
+      padding-right: calc(-var(--nav-item-horizontal-padding) - 32px);
+    }
+
+    .children-active {
+      display: flex;
+      flex-grow: 1;
+      flex-direction: column;
+      gap: 4px;
+    }
+
+    .selected {
+      background-color: var(--nav-item-selected-background-color, var(--base-color-grey-900));
+      color: var(--nav-item-selected-text-color, var(--base-color-white));
+      /*--icon-stroke: var(--base-color-teal-500);
+      --icon-background-page: var(--nav-item-selected-background-color, var(--base-color-grey-900));
+      --icon-background-primary: #00AB8E40;*/
+      --icon-stroke: var(--base-color-white);
+      --icon-background-page: var(--nav-item-selected-background-color, var(--base-color-grey-900));
+      --icon-background-primary: var(--nav-item-selected-background-color, var(--base-color-grey-900));
+
+    }
+
+    .selected:hover {
+      background-color: var(--nav-item-selected-background-color, var(--base-color-grey-900));
+    }
+
+    .selected:focus {
+      background-color: var(--nav-item-selected-background-color, var(--base-color-grey-900));
+    }
+
+    .standout {
+      --icon-stroke: var(--base-color-teal-900);
+      --icon-background-primary: var(--base-color-teal-300);
+    }
+    `;static properties={name:{type:String,reflect:!0,attribute:"name"},variant:{type:String,reflect:!0,attribute:"variant",converter:t=>["dropdown","link","number"].includes(t)?t:"none"},amount:{type:Number,reflect:!0,attribute:"amount",converter:t=>isNaN(t)?0:t},maxCount:{type:Number,reflect:!0,attribute:"max-count",converter:t=>isNaN(t)?99:t},important:{type:Boolean,reflect:!0,attribute:"important"},link:{type:String,reflect:!0,attribute:"link"},icon:{type:String,reflect:!0,attribute:"icon"},active:{type:Boolean,reflect:!0,attribute:"active"},select:{type:Boolean,reflect:!0,attribute:"selected"}};constructor(){super(),this.icon="",this.name="",this.variant="none",this.amount=0,this.maxCount=99,this.important=!1,this.dropdown=!1,this.active=!1,this.selected=!1,this.link=void 0}render(){return e.x`
+      <a href="${e.o(this.link)}" class="nav-item ${this.active?"active":""} ${this.select?"selected":""}" tabindex="0">
+        <slot name="before" class="${this.amount>0&&!this.select?"standout":""} ${this.select?"selected":""}"></slot>
+        <p>${this.name}</p>
+        ${this.variant=="dropdown"?e.x`<cd-icon class='caret' name='caret-down' size='sm'></cd-icon>`:""}
+        ${this.variant=="link"?e.x`<cd-icon name='external' size='sm'></cd-icon>`:""}
+        ${this.variant=="number"?e.x`<cd-counter count='${this.amount}' max-count='${this.maxCount}' important='${this.important}'></cd-notification-counter>`:""}
+      </a>
+      <div class="children ${this.active?"children-active":""}">
+        <slot></slot>
+      </div>
+    `}setSelectState(t){if(typeof t!="boolean")throw new Error("Select must be a boolean value");this.select!==t&&(this.select=t,this.requestUpdate())}setActiveState(t){if(typeof t!="boolean")throw new Error("Active must be a boolean value");this.active!==t&&(this.active=t,this.requestUpdate())}toggleSelect(){this.select=!this.select,this.requestUpdate()}toggleActive(){this.active=!this.active,this.requestUpdate()}}function $(){typeof window<"u"&&!customElements.get("cd-nav-item")&&customElements.define("cd-nav-item",c)}class d extends e.i{static styles=e.i$1`
+    @font-face {
+      font-family: 'Geist';
+      src: url(${e.r(e.fontURL)}) format('woff');
+      font-weight: 100 900;
+      font-style: normal;
+    }
+
+    :host {
+      width: 100%;
+    }
+
+  `;static properties={};constructor(){super()}render(){return e.x`
+        <slot></slot>
+    `}}function E(){typeof window<"u"&&!customElements.get("cd-table")&&customElements.define("cd-table",d)}class u extends e.i{static styles=e.i$1`
+    @font-face {
+      font-family: 'Geist';
+      src: url(${e.r(e.fontURL)}) format('woff');
+      font-weight: 100 900;
+      font-style: normal;
+    }
+
+    .tooltip-container {
+      position: relative;
+      z-index: 3;
+    }
+
+    .tooltip {
+      width: max-content;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+
+      background-color: var(--tooltip-background-color, var(--base-color-slate-50));
+      border: 1px solid var(--tooltip-border-color, var(--base-color-slate-400));
+      border-radius: var(--tooltip-border-radius, 4px);
+      box-shadow: 6px 6px 12px 0px #0000001F;
+    }
+
+    .tooltip::after {
+      content: '';
+      position: absolute;
+      width:10px;
+      height: 10px;
+      background-color:var(--tooltip-background-color, var(--base-color-slate-50));
+      border-width: 0 1px 1px 0;
+      border-style: solid;
+      border-color: var(--tooltip-border-color, var(--base-color-slate-400));
+      transform: rotate(45deg);
+      z-index: 1;
+      margin: 0 auto;
+      top: calc(100% - 6px);
+    }
+
+    .tooltip-content {
+      display: grid;
+      grid-template-columns: auto auto;
+      gap: var(--tooltip-gap, 6px);
+      padding: var(--tooltip-padding, 8px);
+      border-bottom: 1px solid var(--tooltip-border-color, var(--base-color-slate-400));
+
+    }
+
+    .tooltip-text {
+      display: flex;
+      flex-direction: column;
+      color: var(--tooltip-text-color, var(--text-secondary-color));
+      font-size: var(--tooltip-text-font-size, 12px);
+      font-weight: var(--tooltip-text-font-weight, 400);
+      padding: var(--tooltip-text-padding,8px);
+    }
+
+    .none {
+      display: none;
+    }
+
+    .no-border {
+      border-bottom: none;
+    }
+  `;static properties={text:{type:String,reflect:!0},position:{type:String,reflect:!0,attribute:"position",converter:t=>["top","right","bottom","left"].includes(t)?t:"top"},content:{type:Boolean,reflect:!0}};constructor(){super(),this.text="",this.content=!1,this.position="top"}render(){return e.x`
+    <div class="tooltip-container">
+      <div class="tooltip ${this.position}">
+        <div class="${this.content?"tooltip-content":"none"} ${this.text?"":"no-border"}">
+         <slot></slot>
+        </div>
+        <div class="${this.text?"tooltip-text":"none"}">
+          ${this.text}
+        </div>
+      </div>
+    </div>
+    `}}function z(){typeof window<"u"&&!customElements.get("cd-tool-tip")&&customElements.define("cd-tool-tip",u)}e.registerIcon();class p extends e.i{static styles=e.i$1`
+    @font-face {
+      font-family: 'Geist';
+      src: url(${e.r(e.fontURL)}) format('woff');
+      font-weight: 100 900;
+      font-style: normal;
+    }
+
+    .profile-stack {
+      font-family: 'Geist', sans-serif;
+      background-color: var(--nav-profile-background-color, var(--base-color-slate-50));
+      color: var(--nav-profile-text-color, var(--text-primary-color));
+      border: 1px solid var(--nav-profile-border-color, var(--base-color-slate-200));
+      border-radius: var(--nav-profile-border-radius, 8px);
+      padding: var(--nav-profile-padding, 17px 14px);
+      display: flex;
+      width: fix-content;
+      flex-direction: row;
+      align-items: center;
+      gap: var(--nav-profile-gap, 16px);
+    }
+
+    .text-stack {
+      display: flex;
+      flex-direction: column;
+      flex-grow: 1;
+      gap: 8px;
+    }
+
+    .name {
+      font-size: var(--nav-profile-name-font-size, 14px);
+      font-weight: var(--nav-profile-name-font-weight, 500);
+      line-height: 100%;
+    }
+
+    .org {
+      font-size: var(--nav-profile-org-font-size, 14px);
+      font-weight: var(--nav-profile-org-font-weight, 400);
+      display: flex;
+      gap: 6px;
+      align-items: center;
+    }
+  `;static properties={primaryText:{type:String,reflect:!0,attribute:"name",defaultValue:""},secondaryText:{type:String,reflect:!0,attribute:"org",defaultValue:""},icon:{type:String,reflect:!0,attribute:"icon",defaultValue:""}};constructor(){super(),this.primaryText="",this.secondaryText="",this.icon="hart"}render(){return e.x`
+    <div class="profile-stack">
+      <div class="text-stack">
+        <span class="name">${this.primaryText}</span>
+        ${this.secondaryText!=""?e.x`<span class="org"><cd-icon name="${this.icon}" size="sm"></cd-icon>${this.secondaryText}</span>`:""}
+      </div>
+      <cd-icon name="caret-down" size="sm"></cd-icon>
+    </div>
+
+    `}}function S(){typeof window<"u"&&!customElements.get("cd-nav-profile")&&customElements.define("cd-nav-profile",p)}e.registerIcon();class h extends e.i{static styles=e.i$1`
+    @font-face {
+      font-family: 'Geist';
+      src: url(${e.r(e.fontURL)}) format('woff');
+      font-weight: 100 900;
+      font-style: normal;
+    }
+
+    a {
+      text-decoration: none;
+      color: var(--key-value-value-color, var(--text-primary-color));
+      font-weight: var(--key-value-value-font-weight);
+      font-size: var(--key-value-font-size, 14px);
+    }
+
+    .arrow-value {
+      padding: 3px;
+      font-family: 'Geist', sans-serif;
+      color: var(--key-value-value-color, var(--text-primary-color));
+      font-weight: var(--key-value-value-font-weight);
+      font-size: var(--key-value-font-size, 14px);
+      display: inline-flex;
+      flex-direction: row;
+      align-items: center;
+      cursor: pointer;
+      gap: 6px;
+    }
+
+    .arrow-value cd-icon {
+      transform: translateX(-0.25em);
+      opacity: 0;
+      transition: transform 0.3s ease, opacity 0.3s ease;
+    }
+
+    .arrow-value:hover cd-icon {
+      transform: translateX(0);
+      opacity: 1;
+    }
+
+    .value {
+      padding: 3px;
+      font-family: 'Geist', sans-serif;
+      color: var(--key-value-value-color, var(--text-primary-color));
+      font-weight: var(--key-value-value-font-weight);
+      font-size: var(--key-value-font-size, 14px);
+      cursor: auto;
+    }
+    .value:focus, .arrow-value:focus {
+      outline: 2px solid var(--input-border-color-focus);
+      border-radius: 4px;
+    }
+
+    .arrow-value:focus cd-icon {
+      transform: translateX(0);
+      opacity: 1;
+    }
+
+    ::slotted(select) {
+      color: var(--key-value-value-color, var(--text-primary-color));
+      font-weight: var(--key-value-value-font-weight);
+      font-size: var(--key-value-font-size, 14px);
+      cursor: pointer;
+      background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.4286 6.13289L7.99997 9.56151L4.57135 6.13289' stroke='%235C6570' stroke-width='1.5'/%3E%3C/svg%3E%0A");
+      background-repeat: no-repeat;
+      background-size: 16px;
+      background-position-x: 100%;
+      background-position-y: center;
+      padding: 3px 20px 3px 3px;
+      background-color: transparent;
+      border: none;
+      appearance: none;
+    }
+
+    ::slotted(select:focus) {
+      outline: 2px solid var(--input-border-color-focus);
+      border-radius: 4px;
+    }
+  `;static properties={variant:{type:String,reflect:!0,attribute:"variant",converter:t=>["default","dropdown","arrow"].includes(t)?t:"default"},link:{type:String,reflect:!0,attribute:"link"}};constructor(){super(),this.variant="default",this.link=void 0}render(){return e.x`
+      ${this.variant==="default"?e.x`<a href="${e.o(this.link)}" class="value"><slot></slot></a>`:""}
+      ${this.variant==="dropdown"?e.x`<span class="dropdown-value"><slot></slot></span>`:""}
+      ${this.variant==="arrow"?e.x`<a href="${e.o(this.link)}" class="arrow-value"><slot></slot><cd-icon name="arrow" size="sm"></cd-icon></a>`:""}
+    `}}function A(){typeof window<"u"&&!customElements.get("cd-value")&&customElements.define("cd-value",h)}e.registerIcon();class v extends e.i{static styles=e.i$1`
+    @font-face {
+      font-family: 'Geist';
+      src: url(${e.r(e.fontURL)}) format('woff');
+      font-weight: 100 900;
+      font-style: normal;
+    }
+
+    .search-container {
+      display: flex;
+      flex-direction: row;
+      gap: var(--input-icon-gap, 8px);
+      align-items: center;
+    }
+
+    .collapsed.md {
+      width: 40px;
+      cursor: pointer;
+      padding: 0;
+      position: relative;
+      transition: width 0.5s ease-in-out, padding 0.5s ease-in-out;
+    }
+
+    .collapsed.lg {
+      width: 50px;
+      cursor: pointer;
+      padding: 0;
+      position: relative;
+      transition: width 0.5s ease-in-out, padding 0.5s ease-in-out;
+    }
+
+    .collapsed.sm {
+      width: 36px;
+      cursor: pointer;
+      padding: 0;
+      position: relative;
+      transition: width 0.5s ease-in-out, padding 0.5s ease-in-out;
+    }
+
+    .expanded {
+      width: var(--input-width);
+      padding: 0 var(--input-horizontal-inline-padding);
+
+    }
+
+    input {
+      box-sizing: border-box;
+      border-width: var(--input-border-width);
+      border-style: var(--input-border-style);
+      border-color: var(--input-border-color);
+      border-radius: var(--input-border-radius);
+      background-color: var(--input-background-color);
+      color: var(--input-text-color);
+      font-size: var(--input-font-size);
+    }
+
+    input:hover {
+      border-color: var(--input-border-color-hover);
+    }
+
+    input:focus {
+      background-color: var(--input-background-color-focus);
+      color: var(--input-text-color-focus);
+      outline: 2px solid var(--input-border-color-focus);
+      border: 1px solid var(--input-border-color-focus);
+    }
+
+    label {
+      font-weight: var(--input-label-font-weight, 500);
+      font-size: var(--input-label-font-size);
+      margin: 0 0 var(--input-gap) 0;
+      color: var(--input-label-color);
+      display: block;
+      width: fit-content;
+    }
+
+    .lg {
+      height: 50px;
+      padding: 0 var(--input-horizontal-inline-padding-lg, 24px);
+      transition: width 0.5s ease-in-out, padding 0.5s ease-in-out;
+    }
+
+    .md {
+      height: 40px;
+      padding: 0 var(--input-horizontal-inline-padding-md, 18px);
+      transition: width 0.5s ease-in-out, padding 0.5s ease-in-out;
+    }
+
+    .sm {
+      height: 36px;
+      padding: 0 var(--input-horizontal-inline-padding-sm, 12px);
+      transition: width 0.5s ease-in-out, padding 0.5s ease-in-out;
+    }
+
+    .icon-left-container, .icon-right-container {
+      position: relative;
+    }
+    .icon-left, .icon-right {
+      position: absolute;
+      top: calc(50% + 1px);
+      transform: translateY(-50%);
+      pointer-events: none;
+    }
+
+    .icon-left {
+      left: 13px;
+    }
+    .icon-right {
+      right: 13px;
+    }
+    .icon-left-container cd-icon, .icon-right-container cd-icon {
+      color: var(--input-icon-color, var(--text-secondary-color));
+    }
+
+    .icon-spacing-left {
+      padding-left: calc(var(--input-horizontal-inline-padding) + 10px + var(--input-icon-gap, 8px));
+    }
+    .icon-spacing-right {
+      padding-right: calc(var(--input-horizontal-inline-padding) + 10px + var(--input-icon-gap, 8px));
+    }
+
+    .full-width {
+      width: 100%;
+    }
+
+    .icon-collapsed-container {
+      position: relative;
+    }
+
+    .icon-collapsed {
+      cursor: pointer;
+      position: absolute;
+      top: calc(50% + 1px);
+      transform: translate(-50%, -50%);
+      right: calc(50% + var(--input-icon-gap, 8px));
+      padding: 0;
+      height: auto;
+    }
+
+    .icon-collapsed.md {
+      right: calc(50% - 4px + var(--input-icon-gap, 8px));
+      padding:0;
+      height: auto;
+    }
+    .icon-collapsed.sm {
+      right: calc(50% - 6px + var(--input-icon-gap, 8px));
+      padding:0;
+      height: auto;
+    }
+
+    .hidden {
+      display: none;
+    }
+
+    .active {
+      display: block;
+      cursor: pointer;
+    }
+
+    .active:focus {
+      outline: 2px solid var(--input-border-color-focus);
+      border-radius: 4px;
+    }
+
+    .hidden-icon {
+      opacity: 0;
+      transition: opacity 0.5s ease-in-out;
+    }
+
+    .active-icon {
+      cursor: pointer;
+      opacity: 1;
+      transition: opacity 0.5s ease-in-out;
+    }
+
+    input::placeholder {
+      opacity: 1;
+      transition: opacity 0.5s ease-in-out;
+    }
+
+    input.collapsed::placeholder {
+      opacity: 0;
+      transition: opacity 0.5s ease-in-out;
+    }
+  `;static properties={placeholder:{type:String,reflect:!0},value:{type:String,reflect:!0},disabled:{type:Boolean,reflect:!0},collapsed:{type:Boolean,reflect:!0},iconLeft:{type:Boolean,reflect:!0,attribute:"icon-left"},iconRight:{type:Boolean,reflect:!0,attribute:"icon-right"},size:{type:String,reflect:!0},closeIcon:{type:Boolean,reflect:!0,attribute:"close-icon"},label:{type:String,reflect:!0},labelPosition:{type:String,reflect:!0,attribute:"label-position"},name:{type:String,reflect:!0},fullWidth:{type:Boolean,reflect:!0,attribute:"full-width"}};handleBlur(t){return this.dispatchEvent(new CustomEvent("blur",{detail:{value:t.target.value},bubbles:!0,composed:!0})),this.value=t.target.value,t.target.value}handleFocus(t){return this.expandInput(),this.dispatchEvent(new CustomEvent("focus",{detail:{value:t.target.value},bubbles:!0,composed:!0})),this.value=t.target.value,t.target.value}handleKeyPress(t){return this.dispatchEvent(new CustomEvent("keypress",{detail:{value:t.target.value,key:t.target.keyCode},bubbles:!0,composed:!0})),this.value=t.target.value,t.target.value}handleInput(t){return this.dispatchEvent(new CustomEvent("input",{detail:{value:t.target.value},bubbles:!0,composed:!0})),this.value=t.target.value,t.target.value}constructor(){super(),this.placeholder="Search",this.value="",this.disabled=!1,this.collapsed=!1,this.iconLeft=!1,this.iconRight=!1,this.size="md",this.closeIcon=!1,this.label="",this.labelPosition="left",this.name="",this.fullWidth=!1,this._internals=this.attachInternals()}render(){return e.x`
+      <div class="search-container ${this.labelPosition}">
+        ${this.label?e.x`<label for="search-input">${this.label}</label>`:""}
+        ${this.iconLeft&&!this.collapsed?e.x`<span class="icon-left-container"><cd-icon name="search" class="icon-left" variant="light-slate"></cd-icon></span>`:""}
+
+        <input
+          id="search-input"
+          type="text"
+          class="search-input ${this.collapsed?"collapsed":"expanded"} ${this.iconLeft?"icon-spacing-left":""} ${this.iconRight?"icon-spacing-right":""} ${this.size} ${this.fullWidth&&!this.collapsed?"full-width":""}"
+          placeholder="${this.placeholder}"
+          .value="${this.value}"
+          ?disabled="${this.disabled}"
+          @input="${this.handleInput}"
+          @focus="${this.handleFocus}"
+          @blur="${this.handleBlur}"
+          @keypress="${this.handleKeyPress}"
+          @click="${this.expandInput}"
+          name="${this.name}"
+        >
+        ${this.iconRight||this.collapsed?e.x`<span @click="${this.expandInput}" class="${this.collapsed?"icon-collapsed-container":"icon-right-container"}"><cd-icon name="search" class="${this.collapsed?"icon-collapsed "+this.size:"icon-right"}" variant="light-slate"></cd-icon></span>`:""}
+        ${this.closeIcon?e.x`<span class="${this.collapsed?"hidden":"active"}" id='closeIcon' tabindex='0'><cd-icon name="exit" id="close-icon" class="icon close ${this.collapsed?"hidden-icon":"active-icon"}" @click="${this.collapseInput}"></cd-icon></span>`:""}
+      </div>
+    `}firstUpdated(){if(!this.shadowRoot){console.warn("Shadow DOM is not available.");return}this.shadowRoot.querySelector(".active")&&(console.log("Adding event listener to active element"),this.shadowRoot.querySelector(".active").addEventListener("keydown",t=>{console.log("test"),t.keyCode===13&&this.collapseInput()}))}focus(){if(!this.shadowRoot){console.warn("Input element is not yet connected to the DOM.");return}if(!this.shadowRoot.querySelector("input")){console.warn("Input element is not found in the shadow DOM.");return}this.shadowRoot.querySelector("#search-input").focus()}expandInput(){this.collapsed&&(this.collapsed=!1,this.shadowRoot.querySelector("#search-input").focus(),this.shadowRoot.querySelector("#close-icon").classList.remove("hidden-icon"),this.shadowRoot.querySelector("#close-icon").classList.remove("hidden"),this.shadowRoot.querySelector("#close-icon").classList.add("active-icon"),this.shadowRoot.querySelector("#close-icon").classList.add("active"),this.requestUpdate(),this.shadowRoot.querySelector("#closeIcon").addEventListener("keydown",t=>{t.key==="Enter"&&this.collapseInput()}))}collapseInput(){this.collapsed||(this.collapsed=!0,this.value="",this.shadowRoot.querySelector("#close-icon").classList.add("hidden-icon"),this.shadowRoot.querySelector("#close-icon").classList.add("hidden"),this.shadowRoot.querySelector("#close-icon").classList.remove("active"),this.shadowRoot.querySelector("#close-icon").classList.remove("active-icon"),this.dispatchEvent(new CustomEvent("collapsed",{detail:{closed:!0},bubbles:!0,composed:!0})),this.requestUpdate())}}function C(){typeof window<"u"&&!customElements.get("cd-search")&&customElements.define("cd-search",v)}e.registerIcon();class b extends e.i{static styles=e.i$1`
+    @font-face {
+      font-family: 'Geist';
+      src: url(${e.r(e.fontURL)}) format('woff');
+      font-weight: 100 900;
+      font-style: normal;
+    }
+
+    .tab {
+      font-family: 'Geist', sans-serif;
+      display: inline-flex;
+      flex-direction: row;
+      align-items: center;
+      cursor: pointer;
+      box-sizing: border-box;
+    }
+
+    .tab.lg {
+      padding: 0 var(--tab-horizontal-padding-lg, 16px);
+      height: var(--tab-height-lg, 48px);
+      gap: var(--tab-inner-gap-lg, 12px);
+      border-radius: var(--tab-border-radius-lg, 8px);
+    }
+
+    .tab.md {
+      padding: 0 var(--tab-horizontal-padding-md, 14px);
+      height: var(--tab-height-md, 40px);
+      gap: var(--tab-inner-gap-md, 10px);
+      border-radius: var(--tab-border-radius, 6px);
+    }
+
+    .tab.sm {
+      padding: 0 var(--tab-horizontal-padding-sm, 12px);
+      height: var(--tab-height-sm, 32px);
+      gap: var(--tab-inner-gap-sm, 8px);
+      border-radius: var(--tab-border-radius-sm, 4px);
+    }
+
+    .tab-outer.default {
+      border-bottom: var(--tab-border-width, 1px) solid var(--tab-border-color, #C5CCD3);
+      padding-bottom: var(--tab-interior-line-gap, 4px);
+      color: var(--tab-text-color, #666666);
+      --icon-stroke: var(--tab-icon-color, #666666);
+    }
+
+    .tab-outer.default.active {
+      border-bottom: var(--tab-border-width-active, 2px) solid var(--tab-border-color-active, #1A1A1A);
+      color: var(--tab-text-color-active, #1A1A1A);
+      --icon-stroke: var(--tab-icon-color-active, #1A1A1A);
+    }
+
+    .tab-outer.pill {
+      --icon-stroke: var(--tab-icon-color, #666666);
+      color: var(--tab-text-color, #666666);
+      margin-right: 6px;
+
+    }
+
+    .tab.pill.active {
+      color: var(--base-color-slate-50);
+      background-color: var(--tab-pill-active-background-color, #1A1A1A);
+      --icon-stroke: var(--base-color-slate-300);
+
+    }
+
+    .tab.outline {
+      --icon-stroke: var(--tab-icon-color, #666666);
+      color: var(--tab-text-color, #666666);
+      border-radius: var(--tab-border-radius, 6px) var(--tab-border-radius, 6px) 0 0;
+      border: 1px solid transparent;
+    }
+
+    .tab.outline.active {
+      border-bottom:none;
+      border-left: 1px solid var(--tab-border-color, #C5CCD3);
+      border-right: 1px solid var(--tab-border-color, #C5CCD3);
+      border-top: 1px solid var(--tab-border-color, #C5CCD3);
+      color: var(--tab-text-color-active, #1A1A1A);
+    }
+
+    .tab.outline.active {
+      border-bottom: none;
+      margin-bottom: -2px;
+      z-index: 2;
+      background-color: var(--page-background, var(--base-color-white));
+    }
+
+    .tab:hover {
+      background-color: var(--tab-background-hover, var(--base-color-slate-50));
+      color: var(--tab-text-color-hover, #1A1A1A);
+      transition: background 0.3s ease-in-out, color 0.3s ease-in-out;
+    }
+
+    .tab.disabled {
+      color: var(--base-color-slate-200);
+      cursor: not-allowed;
+      pointer-events: none;
+      --icon-stroke: var(--base-color-slate-200);
+      --icon-background-primary: var(--base-color-white);
+      --icon-background-secondary: var(--base-color-white);
+    }
+
+    .tab:focus {
+      outline: 2px solid var(--input-border-color-focus);
+    }
+  `;static properties={label:{type:String,reflect:!0},active:{type:Boolean,reflect:!0},disabled:{type:Boolean,reflect:!0},variant:{type:String,reflect:!0,attribute:"variant",converter:t=>["default","pill","outline"].includes(t)?t:"default"},size:{type:String,reflect:!0}};constructor(){super(),this.label="",this.active=!1,this.disabled=!1,this.variant="default",this.size="md"}render(){return e.x`
+    <div class="tab-outer ${this.variant} ${this.active?"active":""}" >
+      <div class='tab ${this.variant} ${this.size} ${this.disabled?"disabled":""} ${this.active?"active":""}' tabindex="${this.disabled?-1:0}">
+        <slot name="start"></slot>
+        <span class="label">${this.label}</span>
+        <slot name="end"></slot>
+      </div>
+    </div>
+    `}toggleActive(){this.active=!this.active}setActive(t){if(typeof t!="boolean")throw new TypeError("Active must be a boolean");if(this.disabled)throw new Error("Cannot set active state when the tab is disabled");this.active=t}setDisabled(t){if(typeof t!="boolean")throw new TypeError("Disabled must be a boolean");if(this.active&&t)throw new Error("Cannot disable an active tab");this.disabled=t}}function T(){typeof window<"u"&&!customElements.get("cd-tab")&&customElements.define("cd-tab",b)}class f extends e.i{static styles=e.i$1`
+    @font-face {
+      font-family: 'Geist';
+      src: url(${e.r(e.fontURL)}) format('woff');
+      font-weight: normal;
+      font-style: normal;
+    }
+
+    .container {
+      display: flex;
+      font-family: 'Geist', sans-serif;
+      flex-direction: row;
+      align-items: center;
+    }
+
+    .container.outline {
+      border-bottom: 1px solid var(--tab-border-color, #C5CCD3);
+      gap: var(--tab-interior-line-gap, 4px);
+    }
+
+
+
+
+  `;static properties={variant:{type:String,reflect:!0,attribute:"variant",converter:t=>["default","pill","outline"].includes(t)?t:"default",defaultValue:"default"}};render(){return e.x`
+    <div class='container ${this.variant}'>
+      <slot></slot>
+    </div>
+    `}}function B(){typeof window<"u"&&!customElements.get("cd-tab-container")&&customElements.define("cd-tab-container",f)}i();class g extends e.i{static formAssociated=!0;static distinctTimezones=["Etc/GMT+12","Pacific/Pago_Pago","Pacific/Honolulu","America/Anchorage","America/Los_Angeles","America/Denver","America/Chicago","America/New_York","America/Halifax","America/Argentina/Buenos_Aires","America/Noronha","Atlantic/Azores","Europe/London","Europe/Paris","Europe/Bucharest","Europe/Moscow","Asia/Tehran","Asia/Dubai","Asia/Kabul","Asia/Karachi","Asia/Kolkata","Asia/Kathmandu","Asia/Dhaka","Asia/Yangon","Asia/Bangkok","Asia/Shanghai","Australia/Eucla","Asia/Tokyo","Australia/Darwin","Australia/Sydney","Australia/Lord_Howe","Pacific/Noumea","Pacific/Auckland","Pacific/Chatham","Pacific/Tongatapu","Pacific/Kiritimati"];static styles=e.i$1`
+    @font-face {
+      font-family: 'Geist';
+      src: url(${e.r(e.fontURL)}) format('woff');
+      font-weight: 100 900;
+      font-style: normal;
+    }
+
+    input {
+      box-sizing: border-box;
+      padding: 0 var(--input-horizontal-inline-padding);
+      height: 40px;
+      border-width: var(--input-border-width);
+      border-style: var(--input-border-style);
+      border-color: var(--input-border-color);
+      border-radius: var(--input-border-radius);
+      background-color: var(--input-background-color);
+      color: var(--input-text-color);
+      width: var(--input-width);
+      font-size: var(--input-font-size);
+    }
+
+    input:hover {
+      border-color: var(--input-border-color-hover);
+    }
+
+    input:focus {
+      background-color: var(--input-background-color-focus);
+      color: var(--input-text-color-focus);
+      outline: 2px solid var(--input-border-color-focus);
+      border: 1px solid var(--input-border-color-focus);
+    }
+
+    .disabled {
+      background-color: var(--input-background-color-disabled);
+      color: var(--input-text-color-disabled);
+      border-color: var(--input-border-color-disabled);
+      cursor: not-allowed;
+      poiinter-events: none;
+    }
+
+    .disabled:hover {
+      outline: none;
+      border-color: var(--input-border-color-disabled);
+    }
+
+    .input-error {
+      border-color: var(--input-error-border-color);
+      color: var(--input-error-border-color);
+    }
+
+    .input-error:hover {
+      border-color: var(--input-error-border-hover-color);
+    }
+
+    .input-error:focus {
+      border-color: var(--input-error-border-color);
+      outline: 2px solid var(--input-error-border-color);
+    }
+
+    .full-width {
+      width: 100%;
+    }
+
+    .default {
+      border-style: solid;
+    }
+
+    .dashed {
+      border-style: dashed;
+    }
+
+    .dotted {
+      border-style: dotted;
+    }
+
+    .lg {
+      height: 50px;
+      padding: 0 var(--input-horizontal-inline-padding-lg, 24px);
+    }
+
+    .sm {
+      height: 36px;
+      padding: 0 var(--input-horizontal-inline-padding-sm, 12px);
+    }
+
+    .container {
+      display: flex;
+      gap: var(--input-gap);
+      flex-direction: row;
+      align-items: center;
+    }
+  `;static properties={value:{type:String,reflect:!0},shortcut:{type:String,reflect:!0},error:{type:Boolean,reflect:!0,attribute:"error"},disabled:{type:Boolean,reflect:!0},form:{type:String,reflect:!0,attribute:"form"},size:{type:String,reflect:!0,attribute:"size",converter:t=>["sm","md","lg"].includes(t)?t:"md"},fullWidth:{type:Boolean,reflect:!0,attribute:"full-width"},variant:{type:String,reflect:!0,attribute:"variant",converter:t=>["dashed","dotted"].includes(t)?t:"default"},timezone:{type:String,reflect:!0,attribute:"timezone",converter:t=>distinctTimezones.includes(t)?t:"America/New_York"}};constructor(){super(),this.value="",this.shortcut=void 0,this.disabled=void 0,this.form=void 0,this.size="md",this.fullWidth=!1,this.variant="default",this.timezone="America/New_York",this._internals=this.attachInternals(),this._internals.setValidity({customError:this.errorText&&this.errorText.length>0||!1})}handleChange=t=>(this.value=t.target.value,this._internals.setFormValue(this.value),this.dispatchEvent(new CustomEvent("change",{detail:{value:this.value},bubbles:!0,composed:!0})),this.value);handleInput=t=>(this.value=t.target.value,this._internals.setFormValue(this.value),this.dispatchEvent(new CustomEvent("input",{detail:{value:this.value},bubbles:!0,composed:!0})),this.value);handleFocus=t=>(this.value=t.target.value,this._internals.setFormValue(this.value),this.dispatchEvent(new CustomEvent("focus",{detail:{value:this.value},bubbles:!0,composed:!0})),this.value);handleBlur=t=>(this.value=t.target.value,this._internals.setFormValue(this.value),this.dispatchEvent(new CustomEvent("blur",{detail:{value:this.value},bubbles:!0,composed:!0})),this.value);render(){return e.x`
+    <div class='container'>
+      <input class='${this.error?"input-error":""} ${this.disabled?"disabled":""} ${this.fullWidth?"full-width":""} ${this.variant} ${this.size}' type='date' id='${this.name|"date"}' name='${this.name|"date"}' .value='${this.value}' @change='${this.handleChange}' @focus='${this.handleFocus}' @blur='${this.handleBlur}' @input='${this.handleInput}' ?disabled='${this.disabled}' />
+      ${this.shortcut?e.x`<cd-button variant='primary' ?disabled='${this.disabled}'>${this.shortcut}</cd-button>`:""}
+    </div>
+
+    `}firstUpdated(){if(!this.shadowRoot){console.warn("Shadow DOM not available, DateComponent may not render correctly.");return}this.shadowRoot.querySelector("cd-button")&&this.shadowRoot.querySelector("cd-button").addEventListener("button-click",()=>{this.setValue(this.dateNow()),this.dispatchEvent(new CustomEvent("change",{detail:{value:this.value},bubbles:!0,composed:!0}))})}dateNow(){let t=new Date().toLocaleString("en-US",{timeZone:this.timezone});return new Date(t).toISOString().slice(0,10)}setValue(t){this.value=t,this._internals.setFormValue(t),this.requestUpdate()}setError(t){if(typeof t!="error"){console.warn("Error text must be a string");return}this.error=t,this._internals.setValidity({customError:t}),this.requestUpdate()}setDisabled(t){this.disabled=t,this._internals.setValidity({customError:t}),this.requestUpdate()}}function I(){typeof window<"u"&&!customElements.get("cd-date")&&customElements.define("cd-date",g)}i();class m extends e.i{static formAssociated=!0;static distinctTimezones=["Etc/GMT+12","Pacific/Pago_Pago","Pacific/Honolulu","America/Anchorage","America/Los_Angeles","America/Denver","America/Chicago","America/New_York","America/Halifax","America/Argentina/Buenos_Aires","America/Noronha","Atlantic/Azores","Europe/London","Europe/Paris","Europe/Bucharest","Europe/Moscow","Asia/Tehran","Asia/Dubai","Asia/Kabul","Asia/Karachi","Asia/Kolkata","Asia/Kathmandu","Asia/Dhaka","Asia/Yangon","Asia/Bangkok","Asia/Shanghai","Australia/Eucla","Asia/Tokyo","Australia/Darwin","Australia/Sydney","Australia/Lord_Howe","Pacific/Noumea","Pacific/Auckland","Pacific/Chatham","Pacific/Tongatapu","Pacific/Kiritimati"];static styles=e.i$1`
+    @font-face {
+      font-family: 'Geist';
+      src: url(${e.r(e.fontURL)}) format('woff');
+      font-weight: 100 900;
+      font-style: normal;
+    }
+
+    input {
+      box-sizing: border-box;
+      padding: 0 var(--input-horizontal-inline-padding);
+      height: 40px;
+      border-width: var(--input-border-width);
+      border-style: var(--input-border-style);
+      border-color: var(--input-border-color);
+      border-radius: var(--input-border-radius);
+      background-color: var(--input-background-color);
+      color: var(--input-text-color);
+      width: var(--input-width);
+      font-size: var(--input-font-size);
+    }
+
+    input:hover {
+      border-color: var(--input-border-color-hover);
+    }
+
+    input:focus {
+      background-color: var(--input-background-color-focus);
+      color: var(--input-text-color-focus);
+      outline: 2px solid var(--input-border-color-focus);
+      border: 1px solid var(--input-border-color-focus);
+    }
+
+    .disabled {
+      background-color: var(--input-background-color-disabled);
+      color: var(--input-text-color-disabled);
+      border-color: var(--input-border-color-disabled);
+      cursor: not-allowed;
+      poiinter-events: none;
+    }
+
+    .disabled:hover {
+      outline: none;
+      border-color: var(--input-border-color-disabled);
+    }
+
+    .input-error {
+      border-color: var(--input-error-border-color);
+      color: var(--input-error-border-color);
+    }
+
+    .input-error:hover {
+      border-color: var(--input-error-border-hover-color);
+    }
+
+    .input-error:focus {
+      border-color: var(--input-error-border-color);
+      outline: 2px solid var(--input-error-border-color);
+    }
+
+    .full-width {
+      width: 100%;
+    }
+
+    .default {
+      border-style: solid;
+    }
+
+    .dashed {
+      border-style: dashed;
+    }
+
+    .dotted {
+      border-style: dotted;
+    }
+
+    .lg {
+      height: 50px;
+      padding: 0 var(--input-horizontal-inline-padding-lg, 24px);
+    }
+
+    .sm {
+      height: 36px;
+      padding: 0 var(--input-horizontal-inline-padding-sm, 12px);
+    }
+  `;static properties={value:{type:String,reflect:!0},shortcut:{type:String,reflect:!0},error:{type:Boolean,reflect:!0,attribute:"error"},disabled:{type:Boolean,reflect:!0},form:{type:String,reflect:!0,attribute:"form"},size:{type:String,reflect:!0,attribute:"size",converter:t=>["sm","md","lg"].includes(t)?t:"md"},fullWidth:{type:Boolean,reflect:!0,attribute:"full-width"},variant:{type:String,reflect:!0,attribute:"variant",converter:t=>["dashed","dotted"].includes(t)?t:"default"},timezone:{type:String,reflect:!0,attribute:"timezone",converter:t=>distinctTimezones.includes(t)?t:"America/New_York"}};constructor(){super(),this.value="",this.shortcut=void 0,this.error=!1,this.disabled=void 0,this.form=void 0,this.size="md",this.fullWidth=!1,this.variant="default",this.timezone="America/New_York",this._internals=this.attachInternals(),this._internals.setValidity({customError:this.errorText&&this.errorText.length>0||!1})}handleChange=t=>(this.value=t.target.value,this._internals.setFormValue(this.value),this.dispatchEvent(new CustomEvent("change",{detail:{value:this.value},bubbles:!0,composed:!0})),this.value);handleInput=t=>(this.value=t.target.value,this._internals.setFormValue(this.value),this.dispatchEvent(new CustomEvent("input",{detail:{value:this.value},bubbles:!0,composed:!0})),this.value);handleFocus=t=>(this.value=t.target.value,this._internals.setFormValue(this.value),this.dispatchEvent(new CustomEvent("focus",{detail:{value:this.value},bubbles:!0,composed:!0})),this.value);handleBlur=t=>(this.value=t.target.value,this._internals.setFormValue(this.value),this.dispatchEvent(new CustomEvent("blur",{detail:{value:this.value},bubbles:!0,composed:!0})),this.value);render(){return e.x`
+    <input class='${this.error?"input-error":""} ${this.disabled?"disabled":""} ${this.fullWidth?"full-width":""} ${this.variant} ${this.size}' type='time' id='${this.name|"time"}' name='${this.name|"time"}' .value='${this.value}' @change='${this.handleChange}' @focus='${this.handleFocus}' @blur='${this.handleBlur}' @input='${this.handleInput}' ?disabled='${this.disabled}' />
+    ${this.shortcut?e.x`<cd-button variant='primary' ?disabled='${this.disabled}'>${this.shortcut}</cd-button>`:""}
+    `}firstUpdated(){if(!this.shadowRoot){console.warn("Shadow DOM not available, TimeComponent may not render correctly.");return}this.shadowRoot.querySelector("cd-button")&&this.shadowRoot.querySelector("cd-button").addEventListener("button-click",()=>{this.setValue(this.timeNow()),this.dispatchEvent(new CustomEvent("change",{detail:{value:this.value},bubbles:!0,composed:!0}))})}timeNow(){console.log(this.timezone);let t=new Date().toLocaleString("en-US",{timeZone:this.timezone||"America/New_York"});if(console.log(t),console.log(t.split(" ")[2]),t.split(" ")[2]==="PM"){let o=t.split(" ");console.log(o),t=Number(o[1].split(":")[0])+12+":"+o[1].split(":")[1]+":"+o[1].split(":")[2]}else t=t.split(" ")[1];return t}setValue(t){this.value=t,this._internals.setFormValue(t),this.requestUpdate()}setError(t){if(typeof t!="error"){console.warn("Error text must be a string");return}this.error=t,this._internals.setValidity({customError:t}),this.requestUpdate()}setDisabled(t){this.disabled=t,this._internals.setValidity({customError:t}),this.requestUpdate()}}function R(){typeof window<"u"&&!customElements.get("cd-time")&&customElements.define("cd-time",m)}exports.Button=a;exports.DateComponent=g;exports.Header=n;exports.Input=s;exports.NavBar=l;exports.NavItem=c;exports.NavProfile=p;exports.Search=v;exports.Tab=b;exports.TabContainer=f;exports.Table=d;exports.TimeComponent=m;exports.ToolTip=u;exports.Value=h;exports.registerButton=i;exports.registerDate=I;exports.registerHeader=y;exports.registerInput=w;exports.registerNavBar=k;exports.registerNavItem=$;exports.registerNavProfile=S;exports.registerSearch=C;exports.registerTab=T;exports.registerTabContainer=B;exports.registerTable=E;exports.registerTime=R;exports.registerToolTip=z;exports.registerValue=A;
+//# sourceMappingURL=index.cjs.js.map