@cargosense/cargo-design-system 1.0.0 → 1.0.1

package/dist/atoms/index.es.js

@@ -0,0 +1,1470 @@
+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 "../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,
+  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,
+  L as registerLabel,
+  Q as registerNavImage,
+  W as registerRadio,
+  O as registerSelect,
+  V as registerSpinner,
+  U as registerTag
+};
+//# sourceMappingURL=index.es.js.map