@cargosense/cargo-design-system 1.0.0 → 1.0.1

package/dist/molecules/index.es.js

@@ -0,0 +1,2250 @@
+var C = Object.defineProperty;
+var _ = (i, t, e) => t in i ? C(i, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : i[t] = e;
+var r = (i, t, e) => _(i, typeof t != "symbol" ? t + "" : t, e);
+import { r as c, i as a, c as n, f as s, d as l, o as h, x as o, a as q, b as B } from "../assets/Counter.es.js";
+import "../fonts/index.es.js";
+c();
+class b extends a {
+  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 o`
+    <a href='${h(this.link)}' target="${h(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
+    }));
+  }
+}
+r(b, "styles", l`
+   @font-face {
+      font-family: 'Geist';
+      src: url(${n(s)}) 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;
+    }
+
+    `), r(b, "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"
+  }
+});
+function A() {
+  typeof window < "u" && !customElements.get("cd-button") && customElements.define("cd-button", b);
+}
+c();
+class f extends a {
+  constructor() {
+    super(), this.icon = "", this.title = "";
+  }
+  render() {
+    return o`
+      <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>
+    `;
+  }
+}
+r(f, "styles", l`
+    @font-face {
+      font-family: 'Geist';
+      src: url(${n(s)}) 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;
+
+    }
+  `), r(f, "properties", {
+  icon: {
+    type: String,
+    reflect: !0,
+    attribute: "icon"
+  },
+  title: {
+    type: String,
+    reflect: !0,
+    attribute: "title"
+  }
+});
+function D() {
+  !customElements.get("cd-header") && typeof window < "u" && customElements.define("cd-header", f);
+}
+c();
+class v extends a {
+  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 o`
+      ${this.iconLeft ? o`<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 ? o`<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();
+  }
+}
+r(v, "formAssociated", !0), r(v, "styles", l`
+    @font-face {
+      font-family: 'Geist';
+      src: url(${n(s)}) 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);
+    }
+
+
+
+    `), r(v, "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"
+  }
+});
+function T() {
+  typeof window < "u" && !customElements.get("cd-input") && customElements.define("cd-input", v);
+}
+q();
+class g extends a {
+  constructor() {
+    super(), this.image = "", this.name = "";
+  }
+  render() {
+    return o`
+      <nav class="navbar ${this.small ? "small" : ""}">
+       ${this.image != "" && this.name != "" ? o` <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>
+    `;
+  }
+}
+r(g, "styles", l`
+    @font-face {
+      font-family: 'Geist';
+      src: url(${n(s)}) 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;
+    }
+  `), r(g, "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
+  }
+});
+function P() {
+  typeof window < "u" && !customElements.get("cd-nav-bar") && customElements.define("cd-nav-bar", g);
+}
+B();
+c();
+class m extends a {
+  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 o`
+      <a href="${h(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" ? o`<cd-icon class='caret' name='caret-down' size='sm'></cd-icon>` : ""}
+        ${this.variant == "link" ? o`<cd-icon name='external' size='sm'></cd-icon>` : ""}
+        ${this.variant == "number" ? o`<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();
+  }
+}
+r(m, "styles", l`
+    @font-face {
+      font-family: 'Geist';
+      src: url('${n(s)}') 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);
+    }
+    `), r(m, "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"
+  }
+});
+function G() {
+  typeof window < "u" && !customElements.get("cd-nav-item") && customElements.define("cd-nav-item", m);
+}
+class y extends a {
+  constructor() {
+    super();
+  }
+  render() {
+    return o`
+        <slot></slot>
+    `;
+  }
+}
+r(y, "styles", l`
+    @font-face {
+      font-family: 'Geist';
+      src: url(${n(s)}) format('woff');
+      font-weight: 100 900;
+      font-style: normal;
+    }
+
+    :host {
+      width: 100%;
+    }
+
+  `), r(y, "properties", {});
+function F() {
+  typeof window < "u" && !customElements.get("cd-table") && customElements.define("cd-table", y);
+}
+class x extends a {
+  constructor() {
+    super(), this.text = "", this.content = !1, this.position = "top";
+  }
+  render() {
+    return o`
+    <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>
+    `;
+  }
+}
+r(x, "styles", l`
+    @font-face {
+      font-family: 'Geist';
+      src: url(${n(s)}) 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;
+    }
+  `), r(x, "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
+  }
+});
+function N() {
+  typeof window < "u" && !customElements.get("cd-tool-tip") && customElements.define("cd-tool-tip", x);
+}
+c();
+class w extends a {
+  constructor() {
+    super(), this.primaryText = "", this.secondaryText = "", this.icon = "hart";
+  }
+  render() {
+    return o`
+    <div class="profile-stack">
+      <div class="text-stack">
+        <span class="name">${this.primaryText}</span>
+        ${this.secondaryText != "" ? o`<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>
+
+    `;
+  }
+}
+r(w, "styles", l`
+    @font-face {
+      font-family: 'Geist';
+      src: url(${n(s)}) 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;
+    }
+  `), r(w, "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: ""
+  }
+});
+function U() {
+  typeof window < "u" && !customElements.get("cd-nav-profile") && customElements.define("cd-nav-profile", w);
+}
+c();
+class k extends a {
+  constructor() {
+    super(), this.variant = "default", this.link = void 0;
+  }
+  render() {
+    return o`
+      ${this.variant === "default" ? o`<a href="${h(this.link)}" class="value"><slot></slot></a>` : ""}
+      ${this.variant === "dropdown" ? o`<span class="dropdown-value"><slot></slot></span>` : ""}
+      ${this.variant === "arrow" ? o`<a href="${h(this.link)}" class="arrow-value"><slot></slot><cd-icon name="arrow" size="sm"></cd-icon></a>` : ""}
+    `;
+  }
+}
+r(k, "styles", l`
+    @font-face {
+      font-family: 'Geist';
+      src: url(${n(s)}) 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;
+    }
+  `), r(k, "properties", {
+  variant: {
+    type: String,
+    reflect: !0,
+    attribute: "variant",
+    converter: (t) => ["default", "dropdown", "arrow"].includes(t) ? t : "default"
+  },
+  link: {
+    type: String,
+    reflect: !0,
+    attribute: "link"
+  }
+});
+function K() {
+  typeof window < "u" && !customElements.get("cd-value") && customElements.define("cd-value", k);
+}
+c();
+class $ extends a {
+  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 o`
+      <div class="search-container ${this.labelPosition}">
+        ${this.label ? o`<label for="search-input">${this.label}</label>` : ""}
+        ${this.iconLeft && !this.collapsed ? o`<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 ? o`<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 ? o`<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());
+  }
+}
+r($, "styles", l`
+    @font-face {
+      font-family: 'Geist';
+      src: url(${n(s)}) 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;
+    }
+  `), r($, "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"
+  }
+});
+function M() {
+  typeof window < "u" && !customElements.get("cd-search") && customElements.define("cd-search", $);
+}
+c();
+class E extends a {
+  constructor() {
+    super(), this.label = "", this.active = !1, this.disabled = !1, this.variant = "default", this.size = "md";
+  }
+  render() {
+    return o`
+    <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;
+  }
+}
+r(E, "styles", l`
+    @font-face {
+      font-family: 'Geist';
+      src: url(${n(s)}) 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);
+    }
+  `), r(E, "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
+  }
+});
+function W() {
+  typeof window < "u" && !customElements.get("cd-tab") && customElements.define("cd-tab", E);
+}
+class z extends a {
+  render() {
+    return o`
+    <div class='container ${this.variant}'>
+      <slot></slot>
+    </div>
+    `;
+  }
+}
+r(z, "styles", l`
+    @font-face {
+      font-family: 'Geist';
+      src: url(${n(s)}) 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);
+    }
+
+
+
+
+  `), r(z, "properties", {
+  variant: {
+    type: String,
+    reflect: !0,
+    attribute: "variant",
+    converter: (t) => ["default", "pill", "outline"].includes(t) ? t : "default",
+    defaultValue: "default"
+  }
+});
+function Y() {
+  typeof window < "u" && !customElements.get("cd-tab-container") && customElements.define("cd-tab-container", z);
+}
+A();
+class u extends a {
+  constructor() {
+    super();
+    r(this, "handleChange", (e) => (this.value = e.target.value, this._internals.setFormValue(this.value), this.dispatchEvent(new CustomEvent("change", {
+      detail: {
+        value: this.value
+      },
+      bubbles: !0,
+      composed: !0
+    })), this.value));
+    r(this, "handleInput", (e) => (this.value = e.target.value, this._internals.setFormValue(this.value), this.dispatchEvent(new CustomEvent("input", {
+      detail: {
+        value: this.value
+      },
+      bubbles: !0,
+      composed: !0
+    })), this.value));
+    r(this, "handleFocus", (e) => (this.value = e.target.value, this._internals.setFormValue(this.value), this.dispatchEvent(new CustomEvent("focus", {
+      detail: {
+        value: this.value
+      },
+      bubbles: !0,
+      composed: !0
+    })), this.value));
+    r(this, "handleBlur", (e) => (this.value = e.target.value, this._internals.setFormValue(this.value), this.dispatchEvent(new CustomEvent("blur", {
+      detail: {
+        value: this.value
+      },
+      bubbles: !0,
+      composed: !0
+    })), this.value));
+    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
+    });
+  }
+  render() {
+    return o`
+    <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 ? o`<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 e = (/* @__PURE__ */ new Date()).toLocaleString("en-US", {
+      timeZone: this.timezone
+    });
+    return new Date(e).toISOString().slice(0, 10);
+  }
+  setValue(e) {
+    this.value = e, this._internals.setFormValue(e), this.requestUpdate();
+  }
+  setError(e) {
+    if (typeof e != "error") {
+      console.warn("Error text must be a string");
+      return;
+    }
+    this.error = e, this._internals.setValidity({
+      customError: e
+    }), this.requestUpdate();
+  }
+  setDisabled(e) {
+    this.disabled = e, this._internals.setValidity({
+      customError: e
+    }), this.requestUpdate();
+  }
+}
+r(u, "formAssociated", !0), r(u, "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"
+]), r(u, "styles", l`
+    @font-face {
+      font-family: 'Geist';
+      src: url(${n(s)}) 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;
+    }
+  `), r(u, "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: (e) => ["sm", "md", "lg"].includes(e) ? e : "md"
+  },
+  fullWidth: {
+    type: Boolean,
+    reflect: !0,
+    attribute: "full-width"
+  },
+  variant: {
+    type: String,
+    reflect: !0,
+    attribute: "variant",
+    converter: (e) => ["dashed", "dotted"].includes(e) ? e : "default"
+  },
+  timezone: {
+    type: String,
+    reflect: !0,
+    attribute: "timezone",
+    converter: (e) => distinctTimezones.includes(e) ? e : "America/New_York"
+  }
+});
+function O() {
+  typeof window < "u" && !customElements.get("cd-date") && customElements.define("cd-date", u);
+}
+A();
+class p extends a {
+  constructor() {
+    super();
+    r(this, "handleChange", (e) => (this.value = e.target.value, this._internals.setFormValue(this.value), this.dispatchEvent(new CustomEvent("change", {
+      detail: {
+        value: this.value
+      },
+      bubbles: !0,
+      composed: !0
+    })), this.value));
+    r(this, "handleInput", (e) => (this.value = e.target.value, this._internals.setFormValue(this.value), this.dispatchEvent(new CustomEvent("input", {
+      detail: {
+        value: this.value
+      },
+      bubbles: !0,
+      composed: !0
+    })), this.value));
+    r(this, "handleFocus", (e) => (this.value = e.target.value, this._internals.setFormValue(this.value), this.dispatchEvent(new CustomEvent("focus", {
+      detail: {
+        value: this.value
+      },
+      bubbles: !0,
+      composed: !0
+    })), this.value));
+    r(this, "handleBlur", (e) => (this.value = e.target.value, this._internals.setFormValue(this.value), this.dispatchEvent(new CustomEvent("blur", {
+      detail: {
+        value: this.value
+      },
+      bubbles: !0,
+      composed: !0
+    })), this.value));
+    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
+    });
+  }
+  render() {
+    return o`
+    <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 ? o`<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 e = (/* @__PURE__ */ new Date()).toLocaleString("en-US", {
+      timeZone: this.timezone || "America/New_York"
+    });
+    if (console.log(e), console.log(e.split(" ")[2]), e.split(" ")[2] === "PM") {
+      let d = e.split(" ");
+      console.log(d), e = Number(d[1].split(":")[0]) + 12 + ":" + d[1].split(":")[1] + ":" + d[1].split(":")[2];
+    } else
+      e = e.split(" ")[1];
+    return e;
+  }
+  setValue(e) {
+    this.value = e, this._internals.setFormValue(e), this.requestUpdate();
+  }
+  setError(e) {
+    if (typeof e != "error") {
+      console.warn("Error text must be a string");
+      return;
+    }
+    this.error = e, this._internals.setValidity({
+      customError: e
+    }), this.requestUpdate();
+  }
+  setDisabled(e) {
+    this.disabled = e, this._internals.setValidity({
+      customError: e
+    }), this.requestUpdate();
+  }
+}
+r(p, "formAssociated", !0), r(p, "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"
+]), r(p, "styles", l`
+    @font-face {
+      font-family: 'Geist';
+      src: url(${n(s)}) 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);
+    }
+  `), r(p, "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: (e) => ["sm", "md", "lg"].includes(e) ? e : "md"
+  },
+  fullWidth: {
+    type: Boolean,
+    reflect: !0,
+    attribute: "full-width"
+  },
+  variant: {
+    type: String,
+    reflect: !0,
+    attribute: "variant",
+    converter: (e) => ["dashed", "dotted"].includes(e) ? e : "default"
+  },
+  timezone: {
+    type: String,
+    reflect: !0,
+    attribute: "timezone",
+    converter: (e) => distinctTimezones.includes(e) ? e : "America/New_York"
+  }
+});
+function H() {
+  typeof window < "u" && !customElements.get("cd-time") && customElements.define("cd-time", p);
+}
+export {
+  b as Button,
+  u as DateComponent,
+  f as Header,
+  v as Input,
+  g as NavBar,
+  m as NavItem,
+  w as NavProfile,
+  $ as Search,
+  E as Tab,
+  z as TabContainer,
+  y as Table,
+  p as TimeComponent,
+  x as ToolTip,
+  k as Value,
+  A as registerButton,
+  O as registerDate,
+  D as registerHeader,
+  T as registerInput,
+  P as registerNavBar,
+  G as registerNavItem,
+  U as registerNavProfile,
+  M as registerSearch,
+  W as registerTab,
+  Y as registerTabContainer,
+  F as registerTable,
+  H as registerTime,
+  N as registerToolTip,
+  K as registerValue
+};
+//# sourceMappingURL=index.es.js.map