@cargosense/cargo-design-system 1.0.1 → 1.0.5

package/dist/atoms/index.es.js

@@ -1,1470 +1,39 @@
-var C = Object.defineProperty;
-var z = (o, e, i) => e in o ? C(o, e, { enumerable: !0, configurable: !0, writable: !0, value: i }) : o[e] = i;
-var t = (o, e, i) => z(o, typeof e != "symbol" ? e + "" : e, i);
-import { i as a, c as n, f as l, d as s, x as r, o as p } from "../assets/Counter.es.js";
-import { C as H, I as J, N as K, b as M, r as P, a as Q } from "../assets/Counter.es.js";
+import { B as r, h as t, s as g, C as i, D as o, E as n, F as l, I as c, u as d, m, K as y, L as C, N as I, R as b, G as p, S as u, T as x, g as B, j as K, t as S, d as f, k as h, y as j, q as k, r as v, v as D, n as E, l as F, w as L, c as N, A as R, H as T, p as M, z as O } from "../assets/index.es.js";
 import "../fonts/index.es.js";
-class h extends a {
-  constructor() {
-    super(), this.status = "none";
-  }
-  render() {
-    return r`
-      <span class="badge ${this.status}">
-        <slot></slot>
-      </span>
-    `;
-  }
-}
-t(h, "styles", s`
-    @font-face {
-      font-family: 'Geist';
-      src: url(${n(l)}) format('woff');
-      font-weight: 100 900;
-      font-style: normal;
-    }
-
-    .badge {
-      background-color: var(--badge-background-color);
-      color: var(--badge-text-color);
-      font-size: var(--badge-text-size, 14px);
-      font-weight: var(--badge-text-weight, 500);
-      border-radius: var(--badge-border-radius, 16px);
-      padding: var(--badge-padding, 1px 8px);
-      display: inline-flex;
-      align-items: center;
-      text-align: center;
-      border: 1px solid var(--badge-border-color, #D6D7D9);
-    }
-
-
-
-    .badge::before {
-      content: '';
-      display: inline-block;
-      width: 8px;
-      height: 8px;
-      margin-right: 4px;
-      border-radius: 50%;
-      background-color: var(--badge-dot-color, #1C1C1C);
-    }
-    .done {
-      --badge-dot-color: #1C1C1C;
-    }
-
-    .error {
-      --badge-dot-color: #E53E3E;
-    }
-
-    .warning {
-      --badge-dot-color: #D97E28;
-    }
-
-    .pending {
-      --badge-dot-color: #43B620;
-    }
-
-    .none::before {
-      content: none;
-    }
-  `), t(h, "properties", {
-  status: {
-    type: String,
-    reflect: !0,
-    attribute: "status",
-    defaultValue: "none"
-  }
-});
-function q() {
-  typeof window < "u" && !customElements.get("cd-badge") && customElements.define("cd-badge", h);
-}
-class b extends a {
-  constructor() {
-    super(), this.fitContent = !1;
-  }
-  render() {
-    return r`
-      <div class="body${this.fitContent ? " fit-content" : ""}">
-        <div class="content">
-          <slot><slot>
-        </div>
-      </div>
-    `;
-  }
-}
-t(b, "styles", s`
-    @font-face {
-      font-family: 'Geist';
-      src: url(${n(l)}) format('woff');
-      font-weight: 100 900;
-      font-style: normal;
-    }
-
-    :host {
-      flex-grow: 1;
-    }
-
-    .body {
-      font-family: 'Geist', sans-serif;
-      display:flex;
-      height: 100%;
-      width: 100%;
-
-      background-color: var(--body-background-color, var(--base-color-slate-50));
-    }
-
-    .content {
-      margin: var(--body-content-margin, 28px);
-      display: flex;
-      flex-grow: 1;
-      flex-direction: row;
-      background-color: var(--body-content-background-color, var(--base-color-white));
-      border-radius: 8px;
-      border: 1px solid var(--body-content-border-color, var(--base-color-slate-200));
-    }
-
-    .fit-content {
-      align-items: center;
-      justify-content: center;
-    }
-
-    .fit-content .content {
-      width: fit-content;
-      height: fit-content;
-      flex-grow: 0;
-      max-width: 100%;
-      max-height: 100%;
-    }
-  `), t(b, "properties", {
-  fitContent: {
-    type: Boolean,
-    reflect: !0,
-    attribute: "fit-content"
-  }
-});
-function _() {
-  typeof window < "u" && !customElements.get("cd-body") && customElements.define("cd-body", b);
-}
-class v extends a {
-  constructor() {
-    super(), this.variant = "", this.link = void 0;
-  }
-  render() {
-    return r`
-      <a href="${p(this.link)}" class="default ${this.variant}" tabindex="0">
-      <slot name="start"></slot>
-      <slot></slot>
-      <slot name="end"></slot>
-      </a>
-    `;
-  }
-}
-t(v, "styles", s`
-    @font-face {
-      font-family: 'Geist';
-      src: url(${n(l)}) format('woff');
-      font-weight: 100 900;
-      font-style: normal;
-    }
-
-    .default {
-      font-family: 'Geist';
-      display: inline-flex;
-      flex-direction: row;
-      align-items: center;
-      padding: var(--data-object-vertical-padding) var(--data-object-horizontal-padding);
-      background-color: var(--data-object-background-color);
-      color: var(--data-object-text-color);
-      border-radius: var(--data-object-border-radius);
-      gap: var(--data-object-gap);
-      font-size: var(--data-object-size);
-      font-weight: var(--data-object-font-weight, 400);
-      --icon-stroke: var(--data-object-icon-color, var(--text-primary-color));
-      cursor: pointer;
-    }
-
-    .default:hover {
-      background-color: var(--data-object-hover-background-color, var(--base-color-teal-100));
-      transition: background 0.3s ease-in-out;
-    }
-
-    .default:focus {
-      outline: 2px solid var(--input-border-color-focus);
-      border: none;
-      outline-offset: 0;
-    }
-
-    a {
-      text-decoration: none;
-      color: inherit;
-    }
-  `), t(v, "properties", {
-  link: {
-    type: String,
-    reflect: !0
-  }
-});
-function G() {
-  typeof window < "u" && !customElements.get("cd-data-object") && customElements.define("cd-data-object", v);
-}
-class g extends a {
-  constructor() {
-    super(), this.key = "", this.value = "";
-  }
-  render() {
-    return r`
-      <div class="key-value">
-        <span class="key">${this.key}</span>
-        ${this.value === "" ? r`<slot class="value"></slot>` : r`<span class="value">${this.value}</span>`}
-      </div>
-    `;
-  }
-}
-t(g, "styles", s`
-    @font-face {
-      font-family: 'Geist';
-      src: url(${n(l)}) format('woff');
-      font-weight: 100 900;
-      font-style: normal;
-    }
-
-    .key-value {
-      font-family: 'Geist', sans-serif;
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      font-size: var(--key-value-font-size, 14px);
-      gap: var(--key-value-gap, 10px);
-    }
-
-    .key {
-      flex-grow: 1;
-      color: var(--key-value-label-color, var(--text-secondary-color));
-      font-weight: var(--key-value-label-font-weight);
-    }
-
-    .value {
-      color: var(--key-value-value-color, var(--text-primary-color));
-      font-weight: var(--key-value-value-font-weight);
-    }
-
-    `), t(g, "properties", {
-  key: {
-    type: String,
-    reflect: !0
-  },
-  value: {
-    type: String,
-    reflect: !0
-  }
-});
-function j() {
-  typeof window < "u" && !customElements.get("cd-key-value") && customElements.define("cd-key-value", g);
-}
-class m extends a {
-  constructor() {
-    super(), this.key = "";
-  }
-  render() {
-    return r`
-      <span class="key"><slot></slot></span>
-    `;
-  }
-}
-t(m, "styles", s`
-    @font-face {
-      font-family: 'Geist';
-      src: url(${n(l)}) format('woff');
-      font-weight: 100 900;
-      font-style: normal;
-    }
-
-    .key {
-      color: var(--key-value-label-color, var(--text-secondary-color));
-      font-weight: var(--key-value-label-font-weight);
-      font-size: var(--key-value-font-size, 14px);
-    }
-  `), t(m, "properties", {
-  key: {
-    type: String,
-    reflect: !0
-  }
-});
-function D() {
-  typeof window < "u" && !customElements.get("cd-key") && customElements.define("cd-key", m);
-}
-class y extends a {
-  constructor() {
-    super(), this.size = "md", this.color = "default";
-  }
-  render() {
-    return r`
-      <div class="${this.size} ${this.color}" aria-label=${this.ariaLabel}>
-        <svg class="spinner" viewBox="0 0 50 50" width="40" height="40">
-          <circle
-            class="path"
-            cx="25"
-            cy="25"
-            r="20"
-            fill="none"
-            stroke="var(--spinner-stroke)"
-            stroke-width="4"
-            stroke-linecap="round"
-          />
-        </svg>
-      </div>
-    `;
-  }
-}
-t(y, "styles", s`
-    @font-face {
-      font-family: 'Geist';
-      src: url(${n("fonts/Geist-Regular.woff")}) format('woff');
-      font-weight: 100 900;
-      font-style: normal;
-    }
-
-    .sm svg {
-      width: 20px;
-      height: 20px;
-    }
-
-    .md svg {
-      width: 40px;
-      height: 40px;
-    }
-
-    .lg svg{
-      width: 60px;
-      height: 60px;
-    }
-
-    .spinner {
-      animation: spin 1s linear infinite;
-    }
-
-    .default {
-      --spinner-stroke: var(--base-color-slate-900);
-    }
-
-    .classic {
-      --spinner-stroke: var(--base-color-teal-600);
-    }
-
-    .secondary {
-      --spinner-stroke: var(--base-color-slate-50);
-    }
-
-    .path {
-      stroke-dasharray: 90, 150;
-      stroke-dashoffset: 0;
-      transform-origin: center;
-    }
-
-    @keyframes spin {
-      100% {
-        transform: rotate(360deg);
-      }
-    }
-    `), t(y, "properties", {
-  size: {
-    type: String,
-    reflect: !0,
-    attribute: "size",
-    converter: (e) => ["sm", "md", "lg"].includes(e) ? e : "md",
-    defaultValue: "md"
-  },
-  color: {
-    type: String,
-    reflect: !0,
-    attribute: "color",
-    converter: (e) => ["default", "classic", "secondary"].includes(e) ? e : "default",
-    defaultValue: "default"
-  },
-  ariaLabel: {
-    type: String,
-    reflect: !0,
-    attribute: "aria-label",
-    defaultValue: "Loading"
-  }
-});
-function V() {
-  typeof window < "u" && !customElements.get("cd-spinner") && customElements.define("cd-spinner", y);
-}
-class k extends a {
-  constructor() {
-    super();
-  }
-  render() {
-    return r`
-      <div class="container" style="flex-direction: ${this.direction}; align-items: ${this.align}; gap: ${this.gap}; justify-content: ${this.justify};">
-        <slot></slot>
-      </div>
-    `;
-  }
-}
-t(k, "styles", s`
-    @font-face {
-      font-family: 'Geist';
-      src: url(${n(l)}) format('woff');
-      font-weight: 100 900;
-      font-style: normal;
-    }
-
-   .container {
-      display: flex;
-      flex-direction: column;
-      width: 100%;
-      height: 100%;
-    }
-  `), t(k, "properties", {
-  direction: {
-    type: String,
-    reflect: !0,
-    attribute: "direction",
-    converter: {
-      fromAttribute(e) {
-        return e || "column";
-      },
-      toAttribute(e) {
-        return e;
-      }
-    }
-  },
-  align: {
-    type: String,
-    reflect: !0,
-    attribute: "align",
-    converter: {
-      fromAttribute(e) {
-        return e || "stretch";
-      },
-      toAttribute(e) {
-        return e;
-      }
-    }
-  },
-  gap: {
-    type: String,
-    reflect: !0,
-    attribute: "gap",
-    converter: {
-      fromAttribute(e) {
-        return e || "0px";
-      },
-      toAttribute(e) {
-        return e;
-      }
-    }
-  },
-  justify: {
-    type: String,
-    reflect: !0,
-    attribute: "justify",
-    converter: {
-      fromAttribute(e) {
-        return e || "flex-start";
-      },
-      toAttribute(e) {
-        return e;
-      }
-    }
-  }
-});
-function R() {
-  typeof window < "u" && !customElements.get("cd-flex-container") && customElements.define("cd-flex-container", k);
-}
-class c extends a {
-  constructor() {
-    super(), this.checked = !1, this.disabled = !1, this.description = void 0, this.name = void 0, this.required = !1, this.value = void 0, this._internals = this.attachInternals();
-  }
-  render() {
-    return r`
-    <label ?disabled="${this.disabled}" for='${this.name | "checkbox"}' class='container ${this.disabled ? "disabled" : ""} ${this.error ? "error" : ""}' >
-
-      <div class='label-text'>
-        <slot></slot>
-        ${this.description ? r`<span class='description'>${this.description}</span>` : ""}
-      </div>
-
-
-      <input type="checkbox" id='${this.name | "checkbox"}' name='${this.name | "checkbox"}' aria-describedby='${this.description | this.name | "checkbox"}' value='${p(this.value)}' ?checked="${this.checked}" ?disabled="${this.disabled}" @change="${this._onChange}" tabindex="-1">
-
-      <div class='checkmark ${this.checked ? "active" : ""} ${this.error ? "error" : ""}' id='check'  aria-describedby='${this.description | this.name | "checkbox"}' tabindex="${this.disabled ? "-1" : "0"}">
-        <cd-icon name='check' size='xs' color='white'></cd-icon>
-      </div>
-    </label>
-
-
-    `;
-  }
-  _onChange(e) {
-    if (!this.disabled)
-      return this.checked = e.target.checked, this._internals.setValidity({
-        valid: !0
-      }), this._internals.setFormValue(this.checked), this.dispatchEvent(new CustomEvent("change", {
-        detail: {
-          checked: this.checked,
-          value: this.value
-        },
-        bubbles: !0,
-        composed: !0
-      })), this.checked;
-  }
-  setChecked(e) {
-    if (typeof e != "boolean")
-      throw new TypeError("The checked parameter must be a boolean");
-    this.checked = e, this._internals.setValidity({
-      valid: e
-    }), this._internals.setFormValue(e), this.dispatchEvent(new CustomEvent("change", {
-      detail: {
-        checked: e,
-        value: this.value
-      },
-      bubbles: !0,
-      composed: !0
-    }));
-  }
-  firstUpdated() {
-    this.disabled ? this.shadowRoot.querySelector("cd-icon").color = "#A9B2BC" : this.shadowRoot.querySelector("#check").addEventListener("keydown", (e) => {
-      console.log("keydown event", e), (e.key === "Enter" || e.key === " ") && (this.checked = !this.checked, this._internals.setValidity({
-        valid: !this.checked
-      }), this._internals.setFormValue(!this.checked), this.dispatchEvent(new CustomEvent("change", {
-        detail: {
-          checked: !this.checked,
-          value: this.value
-        },
-        bubbles: !0,
-        composed: !0
-      })), this.requestUpdate());
-    });
-  }
-}
-t(c, "formAssociated", !0), t(c, "styles", s`
-    @font-face {
-      font-family: 'Geist';
-      src: url(${n(l)}) format('woff');
-      font-weight: 100 900;
-      font-style: normal;
-    }
-
-    .container {
-      display: flex;
-      align-items: center;
-      flex-direction: row-reverse;
-      position: relative;
-      min-height: var(--input-checkbox-size-md, 20px);
-      gap: var(--input-checkbox-gap, 10px);
-      width: fit-content;
-    }
-
-    label {
-      font-family: var(--font-family, 'Geist');
-      font-weight: var(--font-weight, 400);
-      font-size: var(--font-size, 14px);
-      color: var(--text-primary-color);
-      cursor: pointer;
-      user-select: none;
-    }
-
-    .container input {
-      position: absolute;
-      opacity: 0;
-      cursor: pointer;
-      height: 0;
-      width: 0;
-    }
-
-    .checkmark {
-      height: var(--input-checkbox-size-md, 20px);
-      width: var(--input-checkbox-size-md, 20px);
-      border-radius: var(--input-checkbox-border-radius-md, 4px);
-      background-color: var(--input-background-color);
-      border: 1px solid var(--input-border-color, #8E98A4);
-
-
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      box-sizing: border-box;
-    }
-
-    .checkmark cd-icon {
-      display: none;
-    }
-
-    .container:hover .active.checkmark {
-
-      background-color: var(--ui-interactive-primary-background-hover, #0F665F);
-      border: 1px solid var(--ui-interactive-primary-border-hover, #013333);
-    }
-
-    .container:hover .checkmark {
-      background-color: var(--input-background-color, #F1F4F6);
-      border: 1px solid var(--input-border-color, #8E98A4);
-      transition: background-color 0.2s ease, border-color 0.2s ease;
-    }
-
-    .active.checkmark {
-      background-color: var(--ui-interactive-primary-background, #1B1F23);
-      border: 1px solid var(--ui-interactive-primary-border, #0C0E0F);
-    }
-    .active.checkmark cd-icon {
-      display: block;
-    }
-
-    .container input[type="checkbox"]:disabled ~ .checkmark {
-      background-color: var(--input-background-color-disabled, #E1E5EA);
-      border: 1px solid var(--input-border-color-disabled, #C5CCD3);
-    }
-
-    .container:hover input[type="checkbox"]:disabled ~ .checkmark {
-      background-color: var(--input-background-color-disabled, #E1E5EA) !important;
-      border: 1px solid var(--input-border-color-disabled, #C5CCD3) !important;
-
-    }
-
-    .disabled .label-text {
-      color: var(--ui-disabled-color, #A9B2BC);
-      cursor: not-allowed;
-    }
-
-    .checkmark:focus {
-      outline: 2px solid var(--ui-focus-color, #0F665F);
-      border-width: 0;
-    }
-
-    .disabled .checkmark:focus {
-      outline: none;
-      border-width: 0;
-    }
-
-    .container input[type="checkbox"] ~ .error {
-      border-color: var(--input-error-border-color);
-      color: var(--input-error-border-color);
-    }
-
-    .container .active.error {
-      background-color: var(--input-error-border-color);
-      border-color: var(--input-error-border-color);
-
-    }
-    .container:hover input[type="checkbox"] ~ .error {
-      border-color: var(--input-error-border-hover-color);
-    }
-
-    .container:hover .active.error {
-      border-color: var(--input-error-border-hover-color);
-      background-color: var(--input-error-border-hover-color);
-    }
-
-    .container input[type="checkbox"] ~ .error:focus {
-      border-color: var(--input-error-border-color);
-      outline: 2px solid var(--input-error-border-color);
-    }
-
-    .container.error {
-      color: var(--input-error-border-color);
-
-    }
-
-    .label-text {
-      display: flex;
-      align-items: flex-start;
-      flex-direction: column;
-      gap: 2px;
-      font-size: var(--input-label-font-size, 14px);
-      color: var(--text-primary-color);
-    }
-
-    .description {
-      color: var(--text-secondary-color);
-      margin-top: 2px;
-      font-size: var(--input-description-font-size, 13px);
-    }
-
-    .disabled .description {
-      color: var(--ui-disabled-color, #A9B2BC);
-    }
-
-    .container:focus {
-      outline: 2px solid var(--ui-focus-color, #0F665F);
-      outline-offset: 2px;
-      border-radius: var(--input-checkbox-border-radius-md, 4px);
-    }
-  `), t(c, "properties", {
-  checked: {
-    type: Boolean,
-    reflect: !0
-  },
-  disabled: {
-    type: Boolean,
-    reflect: !0
-  },
-  description: {
-    type: String,
-    reflect: !0
-  },
-  name: {
-    type: String,
-    reflect: !0
-  },
-  required: {
-    type: Boolean,
-    reflect: !0
-  },
-  value: {
-    type: String,
-    reflect: !0
-  },
-  error: {
-    type: Boolean,
-    reflect: !0
-  }
-});
-function I() {
-  typeof window < "u" && !customElements.get("cd-checkbox") && customElements.define("cd-checkbox", c);
-}
-class x extends a {
-  constructor() {
-    super(), this.text = "", this.type = "info";
-  }
-  render() {
-    return r`
-      <div class="informational ${this.type}">
-        ${this.text}
-        <slot></slot>
-      </div>
-    `;
-  }
-}
-t(x, "styles", s`
-    @font-face {
-      font-family: 'Geist';
-      src: url(${n(l)}) format('woff');
-      font-weight: 100 900;
-      font-style: normal;
-    }
-
-    .informational {
-      font-size: var(--input-hint-font-size, 14px);
-      color: var(input-hint-color, var(--text-secondary-color));
-      display:block;
-
-    }
-  `), t(x, "properties", {
-  text: {
-    type: String,
-    reflect: !0
-  },
-  type: {
-    type: String,
-    reflect: !0
-  }
-});
-function F() {
-  typeof window < "u" && !customElements.get("cd-information") && customElements.define("cd-information", x);
-}
-class w extends a {
-  constructor() {
-    super(), this.text = void 0, this.for = void 0, this.required = !1, this.disabled = !1;
-  }
-  render() {
-    return r`
-      <label
-        class="${this.disabled ? "disabled" : ""}"
-        for="${p(this.for)}"
-      >
-        ${this.text}
-        <slot></slot>
-        ${this.required ? r`<span class="required">*</span>` : ""}
-      </label>
-    `;
-  }
-}
-t(w, "styles", s`
-    @font-face {
-      font-family: 'Geist';
-      src: url(${n(l)}) format('woff');
-      font-weight: 100 900;
-      font-style: normal;
-    }
-
-    label {
-      font-family: 'Geist';
-      font-size: var(--label-font-size, 14px);
-      color: var(--text-primary-color);
-      display: block;
-    }
-    .disabled slot {
-      color: var(--ui-disabled-color, #A9B2BC);
-      cursor: not-allowed;
-    }
-
-    .required {
-      color: var(--input-required-color, #FF5630);
-    }
-  `), t(w, "properties", {
-  text: {
-    type: String,
-    reflect: !0
-  },
-  for: {
-    type: String,
-    reflect: !0,
-    attribute: "for"
-  },
-  required: {
-    type: Boolean,
-    reflect: !0
-  },
-  disabled: {
-    type: Boolean,
-    reflect: !0
-  }
-});
-function L() {
-  typeof window < "u" && !customElements.get("cd-label") && customElements.define("cd-label", w);
-}
-class $ extends a {
-  constructor() {
-    super(), this.text = void 0, this.type = "error";
-  }
-  render() {
-    return r`
-      <div class="error-message ${this.type}">
-        <slot name='icon'></slot>
-        ${this.text ? r`<span class="error-text">${this.text}</span>` : r`<slot></slot>`}
-      </div>
-    `;
-  }
-}
-t($, "styles", s`
-    @font-face {
-      font-family: 'Geist';
-      src: url(${n(l)}) format('woff');
-      font-weight: 100 900;
-      font-style: normal;
-    }
-
-    .error-message {
-      font-family: 'Geist';
-      display:flex;
-      align-items: center;
-      font-size: var(--input-error-font-size);
-      gap: var(--error-message-gap, 8px);
-    }
-
-
-    .error {
-      color: var(--input-error-color);
-    }
-
-    .warning {
-      color: var(--input-warning-color, orange);
-    }
-
-    .normal {
-      color: var(--text-primary-color);
-    }
-
-    .success {
-      color: var(--input-success-color, green);
-    }
-
-  `), t($, "properties", {
-  text: {
-    type: String,
-    reflect: !0
-  },
-  type: {
-    type: String,
-    reflect: !0
-  }
-});
-function N() {
-  typeof window < "u" && !customElements.get("cd-error") && customElements.define("cd-error", $);
-}
-class E extends a {
-  constructor() {
-    super(), this.label = "", this.variant = "primary", this.removable = !1, this.disabled = !1, this.size = "md";
-  }
-  render() {
-    return r`
-      <span class="tag ${this.variant} ${this.size} ${this.disabled ? "disabled" : ""}" @click='${this._handleClick}'>
-        <slot name="icon">
-        </slot>
-        <span class="label">${this.label} <slot></slot></span>
-        ${this.removable ? r`<span class="remove-icon" @click="${this._handleRemove}"><cd-icon name='exit' size='xs' color='${this.variant === "secondary" || this.variant === "info" ? "black" : "white"}'></cd-icon></span>` : ""}
-      </span>
-    `;
-  }
-  _handleRemove() {
-    this.disabled || (this.dispatchEvent(new CustomEvent("remove", {
-      detail: {
-        label: this.label
-      },
-      bubbles: !0,
-      composed: !0
-    })), this.remove());
-  }
-  setRemovable(e) {
-    this.removable = e;
-  }
-  setDisabled(e) {
-    this.disabled = e;
-  }
-  removeTag() {
-    this.dispatchEvent(new CustomEvent("remove", {
-      detail: {
-        label: this.label
-      },
-      bubbles: !0,
-      composed: !0
-    })), this.remove();
-  }
-  _handleClick() {
-    this.disabled || this.dispatchEvent(new CustomEvent("click", {
-      detail: {
-        label: this.label
-      },
-      bubbles: !0,
-      composed: !0
-    }));
-  }
-}
-t(E, "styles", s`
-    @font-face {
-      font-family: 'Geist';
-      src: url(${n(l)}) format('woff');
-      font-weight: 100 900;
-      font-style: normal;
-    }
-
-    .tag {
-      font-family: 'Geist';
-      display: inline-flex;
-      align-items: center;
-      border-radius: var(--tag-border-radius, 4px);
-      padding: var(--tag-padding, 0 8px);
-      min-height: var(--tag-medium, 27px);
-      font-size: var(--tag-font-size, 14px);
-      color: var(--tag-color, #fff);
-      background-color: var(--tag-default-background-color, var(--base-color-slate-900));
-      --icon-stroke: var(--tag-color, #000);
-      cursor: pointer;
-      user-select: none;
-      gap: var(--tag-gap, 6px);
-    }
-
-    .tag.primary {
-      background-color: var(--tag-primary-color, var(--base-color-teal-600));
-      --icon-stroke: var(--tag-color, #000);
-    }
-
-    .tag.secondary {
-      background-color: var(--tag-secondary-color, var(--base-color-slate-50));
-      --icon-stroke: var(--tag-color, #000);
-      color: var(--text-primary-color, #000);
-    }
-
-    .tag.link {
-      background-color: var(--tag-link-color, var(--event-air-background));
-      color: var(--tag-link-text-color, white);
-    }
-
-    .tag.info {
-      background-color: var(--tag-secondary-color, var(--base-color-slate-200));
-      --icon-stroke: var(--tag-color, #000);
-      color: var(--text-primary-color, #000);
-    }
-
-    .tag.success {
-      background-color: var(--tag-success-color, green);
-      --icon-stroke: var(--tag-color, #000);
-    }
-
-    .tag.warning {
-      background-color: var(--tag-warning-color, orange);
-      --icon-stroke: var(--tag-color, #000);
-    }
-
-    .tag.danger {
-      background-color: var(--tag-danger-color, red);
-      --icon-stroke: var(--tag-color, #000);
-    }
-
-    .tag.disabled {
-      background-color: var(--tag-disabled-background-color, var(--base-color-slate-400));
-      color: var(--tag-disabled-color, var(--base-color-slate-200));
-      cursor: not-allowed;
-      pointer-events: none;
-    }
-
-    .sm {
-      min-height: var(--tag-small, 24px);
-      gap: var(--tag-gap-sm, 4px);
-    }
-
-    .lg {
-      min-height: var(--tag-large, 32px);
-      gap: var(--tag-gap-lg, 8px);
-    }
-  `), t(E, "properties", {
-  label: {
-    type: String,
-    reflect: !0
-  },
-  variant: {
-    type: String,
-    reflect: !0,
-    converter: (e) => ["primary", "secondary", "default", "link", "info", "success", "warning", "danger"].includes(e) ? e : "default"
-  },
-  removable: {
-    type: Boolean,
-    reflect: !0
-  },
-  disabled: {
-    type: Boolean,
-    reflect: !0
-  },
-  size: {
-    type: String,
-    reflect: !0,
-    converter: (e) => ["sm", "md", "lg"].includes(e) ? e : "md"
-  }
-});
-function U() {
-  typeof window < "u" && !customElements.get("cd-tag") && customElements.define("cd-tag", E);
-}
-F();
-class d extends a {
-  constructor() {
-    super(), this.name = void 0, this.value = void 0, this.checked = !1, this.disabled = !1, this.description = void 0, this.error = !1, this.size = "md", this.required = !1, this._internals = this.attachInternals();
-  }
-  render() {
-    return r`
-      <label class="container ${this.size} ${this.disabled ? "disabled" : ""} ${this.error ? "input-error" : ""}" for="${this.name}">
-      <input
-          type="radio"
-          class="${this.error ? "input-error" : ""}"
-          name=${this.name}
-          .value="${this.value}"
-          .checked="${this.checked}"
-          ?disabled="${this.disabled}"
-          @change="${this._handleChange}"
-          @click="${this._select}"
-          required="${this.required}"
-          tabindex="0"
-        >
-        <div class='radio-text' @click="${this._handleLabelClick}">
-
-          <slot></slot>
-          <cd-information>${this.description}</cd-information>
-        </div>
-      </label>
-
-    `;
-  }
-  deselectAll() {
-    document.querySelectorAll(`cd-radio[name="${this.name}"]`).forEach((i) => {
-      i.checked = !1, i.dispatchEvent(new CustomEvent("change", {
-        detail: {
-          checked: !1
-        },
-        bubbles: !0,
-        composed: !0
-      }));
-    });
-  }
-  _select() {
-    document.querySelectorAll(`cd-radio[name="${this.name}"]`).forEach((i) => {
-      i !== this && (i.checked = !1);
-    }), this.checked = !0, this.dispatchEvent(new CustomEvent("change", {
-      detail: {
-        checked: !0
-      },
-      bubbles: !0,
-      composed: !0
-    }));
-  }
-  _handleLabelClick() {
-    this.disabled || this._select();
-  }
-  _handleChange(e) {
-    this.checked = e.target.checked, this._internals.setFormValue(this.value), this.dispatchEvent(new CustomEvent("change", {
-      detail: {
-        name: this.name,
-        value: this.value,
-        checked: this.checked
-      },
-      bubbles: !0,
-      composed: !0
-    }));
-  }
-}
-t(d, "formAssociated", !0), t(d, "styles", s`
-    @font-face {
-      font-family: 'Geist';
-      src: url(${n(l)}) format('woff');
-      font-weight: 100 900;
-      font-style: normal;
-    }
-    :host {
-      display: inline-block;
-      font-family: 'Geist', sans-serif;
-    }
-
-    .container {
-      display: flex;
-      align-items: center;
-      flex-direction: row;
-      gap: var(--input-radio-gap, 8px);
-      font-size: var(--input-font-size, 14px);
-      font-weight: var(--input-font-weight, 400);
-      color: var(--input-text-color, #1B1F23);
-    }
-
-    input[type="radio"] {
-      appearance: none;
-      -webkit-appearance: none;
-      width: var(--input-width, 20px);
-      height: var(--input-height, 20px);
-      border-radius: var(--input-border-radius, 50%);
-      margin: 0;
-      padding: 0;
-      border: 1px solid var(--input-border-color, #8E98A4);
-      background-color: var(--input-background-color, #F1F4F6);
-      cursor: pointer;
-    }
-
-    input[type="radio"]:hover {
-      border-color: var(--input-border-color-hover, #5C6B7A);
-      transition: border-color 0.2s ease-in-out;
-    }
-
-    input[type="radio"]:focus {
-      border-color: var(--input-border-color-focus, #1B1F23);
-      outline: 1px solid var(--input-border-color-focus, #1B1F23);
-      outline-offset: 0;
-     }
-
-    input[type="radio"]:checked:focus {
-      outline: 2px solid var(--input-border-color-focus, #1B1F23);
-      outline-offset: 0;
-    }
-
-
-    input[type="radio"]:checked {
-      background-color: var(--input-checked-background-color, #fff);
-      border-width: 5px;
-      border-color: var(--ui-interactive-primary-background, #1B1F23);
-      outline: 1px solid var(--ui-interactive-primary-background, #1B1F23);
-      box-sizing: border-box;
-    }
-
-    input[type="radio"]:checked:hover {
-      border-color: var(--ui-interactive-primary-background-hover, #0F665F);
-      transition: border-color 0.2s ease-in-out;
-    }
-
-    input[type="radio"]:disabled {
-      background-color: var(--input-background-color-disabled, #E1E5EA);
-      border-color: var(--input-border-color-disabled, #C5CCD3);
-      cursor: not-allowed;
-    }
-
-    input[type="radio"]:checked:disabled {
-      background-color: var(--base-color-white);
-      border-color: var(--input-background-color-disabled, #E1E5EA);
-      outline: var(--input-border-color-disabled, #C5CCD3);
-      cursor: not-allowed;
-    }
-
-    input[type="radio"].input-error {
-      border-color: var(--input-error-border-color, #FF4D4F);
-      outline: 1px solid var(--input-error-border-color, #FF4D4F);
-    }
-
-    input[type="radio"].input-error:hover {
-      border-color: var(--input-error-border-hover-color, #FF7875);
-      outline: 1px solid var(--input-error-border-hover-color, #FF7875);
-    }
-    input[type="radio"].input-error:focus {
-      border-color: var(--input-error-border-color, #FF4D4F);
-      outline: 2px solid var(--input-error-border-color, #FF4D4F);
-    }
-
-    .input-error .radio-text {
-      color: var(--input-error-border-color, #FF4D4F);
-    }
-
-
-
-    .disabled {
-      color: var(--ui-disabled-color, #A9B2BC);
-      cursor: not-allowed;
-    }
-
-
-    .radio-text {
-      display: flex;
-      flex-direction: column;
-      cursor: pointer;
-
-    }
-  `), t(d, "properties", {
-  name: {
-    type: String
-  },
-  value: {
-    type: String
-  },
-  checked: {
-    type: Boolean,
-    reflect: !0
-  },
-  disabled: {
-    type: Boolean,
-    reflect: !0
-  },
-  description: {
-    type: String
-  },
-  error: {
-    type: Boolean,
-    reflect: !0
-  },
-  size: {
-    type: String,
-    reflect: !0
-  },
-  required: {
-    type: Boolean,
-    reflect: !0
-  }
-});
-const W = () => {
-  customElements.get("cd-radio") || customElements.define("cd-radio", d);
-};
-class u extends a {
-  constructor() {
-    super(), this.name = void 0, this.value = void 0, this.disabled = !1, this.required = !1, this.error = !1, this.placeholder = void 0, this.fullWidth = !1, this._internals = this.attachInternals();
-  }
-  render() {
-    return r`
-    <div class='container ${this.fullWidth ? "full-width" : ""}'>
-      <select
-        name="${p(this.name)}"
-        ?disabled="${this.disabled}"
-        ?required="${this.required}"
-        class="${this.error ? "input-error" : ""} ${this.size} ${this.fullWidth ? "full-width" : ""}"
-        @change="${this.handleChange}"
-      >
-        ${this.placeholder ? r`<option value="" disabled selected>${this.placeholder}</option>` : ""}
-        <slot></slot>
-      </select>
-      <cd-icon name="caret-down" class="select-icon" size='xxs'></cd-icon>
-    </div>
-    `;
-  }
-  firstUpdated() {
-    const e = this.querySelectorAll("option"), i = this.shadowRoot.querySelector("select");
-    e.forEach((f) => i.appendChild(f.cloneNode(!0))), e.forEach((f) => f.remove()), this.disabled && (this.shadowRoot.querySelector("cd-icon").color = "var(--input-text-color-disabled)"), this.error && (this.shadowRoot.querySelector("cd-icon").color = "var(--input-error-border-color)");
-  }
-  selectOption(e) {
-    const i = this.shadowRoot.querySelector("select");
-    i.value = e, this.value = e, this._internals.setFormValue(this.value), this.dispatchEvent(new CustomEvent("change", {
-      detail: {
-        value: this.value
-      }
-    }));
-  }
-  reset() {
-    const e = this.shadowRoot.querySelector("select");
-    e.value = "", this.value = "", this._internals.setFormValue(this.value), this.dispatchEvent(new CustomEvent("change", {
-      detail: {
-        value: this.value
-      }
-    }));
-  }
-  handleChange(e) {
-    this.value = e.target.value, this._internals.setFormValue(this.value), this.dispatchEvent(new CustomEvent("change", {
-      detail: {
-        value: this.value
-      }
-    }));
-  }
-}
-t(u, "formAssociated", !0), t(u, "styles", s`
-    @font-face {
-      font-family: 'Geist';
-      src: url(${n(l)}) format('woff');
-      font-weight: 100 900;
-      font-style: normal;
-    }
-
-    :host {
-      display: block;
-    }
-
-    select {
-      display:flex;
-      appearance: none;
-      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);
-    }
-
-    select:disabled {
-      background-color: var(--input-background-color-disabled);
-      color: var(--input-text-color-disabled);
-      border-color: var(--input-border-color-disabled);
-      cursor: not-allowed;
-    }
-
-    select:disabled:hover {
-      outline: none;
-      border-color: var(--input-border-color-disabled);
-    }
-
-    select:hover {
-      border-color: var(--input-border-color-hover);
-    }
-
-    select: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);
-    }
-
-    select.input-error {
-      border-color: var(--input-error-border-color);
-      color: var(--input-error-border-color);
-    }
-
-    select.input-error:hover {
-      border-color: var(--input-error-border-hover-color);
-    }
-
-    select.input-error:focus {
-      border-color: var(--input-error-border-color);
-      outline: 2px solid var(--input-error-border-color);
-    }
-
-    .full-width {
-      min-width: 100%;
-    }
-
-    .select-icon {
-      position: absolute;
-      right: 10px;
-      top: 50%;
-      transform: translateY(-50%);
-      pointer-events: none;
-    }
-
-    .container {
-      position: relative;
-      display: flex;
-      align-items: center;
-      gap: var(--input-select-gap, 8px);
-      width: fit-content;
-    }
-
-    .lg {
-      height: 50px;
-      padding: 0 var(--input-horizontal-inline-padding-lg, 24px);
-    }
-
-    .sm {
-      height: 36px;
-      padding: 0 var(--input-horizontal-inline-padding-sm, 12px);
-    }
-  `), t(u, "properties", {
-  name: {
-    type: String
-  },
-  value: {
-    type: String
-  },
-  disabled: {
-    type: Boolean,
-    reflect: !0
-  },
-  required: {
-    type: Boolean,
-    reflect: !0
-  },
-  error: {
-    type: Boolean,
-    reflect: !0
-  },
-  placeholder: {
-    type: String
-  },
-  fullWidth: {
-    type: Boolean,
-    attribute: "full-width",
-    reflect: !0
-  },
-  size: {
-    type: String,
-    reflect: !0,
-    attribute: "size",
-    converter: (e) => ["sm", "md", "lg"].includes(e) ? e : "md"
-  },
-  _internals: {
-    type: Object,
-    attribute: !1
-  }
-});
-function O() {
-  typeof window < "u" && !customElements.get("cd-select") && customElements.define("cd-select", u);
-}
 export {
-  h as Badge,
-  b as Body,
-  c as Checkbox,
-  H as Counter,
-  v as DataObject,
-  $ as ErrorMessage,
-  k as FlexContainer,
-  J as Icon,
-  x as Informational,
+  r as Badge,
+  t as Body,
+  g as Checkbox,
+  i as Counter,
+  o as DataObject,
+  n as ErrorMessage,
+  l as FlexContainer,
+  c as Icon,
+  d as Informational,
   m as Key,
-  g as KeyValue,
-  w as Label,
-  K as NavImage,
-  d as Radio,
-  u as Select,
-  y as Spinner,
-  E as Tag,
-  q as registerBadge,
-  _ as registerBody,
-  I as registerCheckbox,
-  M as registerCounter,
-  G as registerDataObject,
-  N as registerErrorMessage,
-  R as registerFlexContainer,
-  P as registerIcon,
-  F as registerInformational,
-  D as registerKey,
-  j as registerKeyValue,
+  y as KeyValue,
+  C as Label,
+  I as NavImage,
+  b as Radio,
+  p as Select,
+  u as Spinner,
+  x as Tag,
+  B as registerBadge,
+  K as registerBody,
+  S as registerCheckbox,
+  f as registerCounter,
+  h as registerDataObject,
+  j as registerErrorMessage,
+  k as registerFlexContainer,
+  v as registerIcon,
+  D as registerInformational,
+  E as registerKey,
+  F as registerKeyValue,
   L as registerLabel,
-  Q as registerNavImage,
-  W as registerRadio,
-  O as registerSelect,
-  V as registerSpinner,
-  U as registerTag
+  N as registerNavImage,
+  R as registerRadio,
+  T as registerSelect,
+  M as registerSpinner,
+  O as registerTag
 };
 //# sourceMappingURL=index.es.js.map