@cargosense/cargo-design-system 1.0.1 → 1.0.4

package/dist/atoms/index.es.js

@@ -1,25 +1,11 @@
-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 { i as r, c as o, f as n, d as i, x as t, o as l } from "../assets/Counter.es.js";
+import { C as K, I as N, N as U, b as W, r as M, a as Y } 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`
+class d extends r {
+  static styles = i`
     @font-face {
       font-family: 'Geist';
-      src: url(${n(l)}) format('woff');
+      src: url(${o(n)}) format('woff');
       font-weight: 100 900;
       font-style: normal;
     }
@@ -67,35 +53,34 @@ t(h, "styles", s`
     .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 {
+  `;
+  static properties = {
+    status: {
+      type: String,
+      reflect: !0,
+      attribute: "status",
+      defaultValue: "none"
+    }
+  };
   constructor() {
-    super(), this.fitContent = !1;
+    super(), this.status = "none";
   }
   render() {
-    return r`
-      <div class="body${this.fitContent ? " fit-content" : ""}">
-        <div class="content">
-          <slot><slot>
-        </div>
-      </div>
+    return t`
+      <span class="badge ${this.status}">
+        <slot></slot>
+      </span>
     `;
   }
 }
-t(b, "styles", s`
+function F() {
+  typeof window < "u" && !customElements.get("cd-badge") && customElements.define("cd-badge", d);
+}
+class u extends r {
+  static styles = i`
     @font-face {
       font-family: 'Geist';
-      src: url(${n(l)}) format('woff');
+      src: url(${o(n)}) format('woff');
       font-weight: 100 900;
       font-style: normal;
     }
@@ -135,34 +120,35 @@ t(b, "styles", s`
       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 {
+  `;
+  static properties = {
+    fitContent: {
+      type: Boolean,
+      reflect: !0,
+      attribute: "fit-content"
+    }
+  };
   constructor() {
-    super(), this.variant = "", this.link = void 0;
+    super(), this.fitContent = !1;
   }
   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>
+    return t`
+      <div class="body${this.fitContent ? " fit-content" : ""}">
+        <div class="content">
+          <slot><slot>
+        </div>
+      </div>
     `;
   }
 }
-t(v, "styles", s`
+function S() {
+  typeof window < "u" && !customElements.get("cd-body") && customElements.define("cd-body", u);
+}
+class p extends r {
+  static styles = i`
     @font-face {
       font-family: 'Geist';
-      src: url(${n(l)}) format('woff');
+      src: url(${o(n)}) format('woff');
       font-weight: 100 900;
       font-style: normal;
     }
@@ -198,32 +184,34 @@ t(v, "styles", s`
       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 {
+  `;
+  static properties = {
+    link: {
+      type: String,
+      reflect: !0
+    }
+  };
   constructor() {
-    super(), this.key = "", this.value = "";
+    super(), this.variant = "", this.link = void 0;
   }
   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>
+    return t`
+      <a href="${l(this.link)}" class="default ${this.variant}" tabindex="0">
+      <slot name="start"></slot>
+      <slot></slot>
+      <slot name="end"></slot>
+      </a>
     `;
   }
 }
-t(g, "styles", s`
+function B() {
+  typeof window < "u" && !customElements.get("cd-data-object") && customElements.define("cd-data-object", p);
+}
+class f extends r {
+  static styles = i`
     @font-face {
       font-family: 'Geist';
-      src: url(${n(l)}) format('woff');
+      src: url(${o(n)}) format('woff');
       font-weight: 100 900;
       font-style: normal;
     }
@@ -248,33 +236,37 @@ t(g, "styles", s`
       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 {
+    `;
+  static properties = {
+    key: {
+      type: String,
+      reflect: !0
+    },
+    value: {
+      type: String,
+      reflect: !0
+    }
+  };
   constructor() {
-    super(), this.key = "";
+    super(), this.key = "", this.value = "";
   }
   render() {
-    return r`
-      <span class="key"><slot></slot></span>
+    return t`
+      <div class="key-value">
+        <span class="key">${this.key}</span>
+        ${this.value === "" ? t`<slot class="value"></slot>` : t`<span class="value">${this.value}</span>`}
+      </div>
     `;
   }
 }
-t(m, "styles", s`
+function A() {
+  typeof window < "u" && !customElements.get("cd-key-value") && customElements.define("cd-key-value", f);
+}
+class h extends r {
+  static styles = i`
     @font-face {
       font-family: 'Geist';
-      src: url(${n(l)}) format('woff');
+      src: url(${o(n)}) format('woff');
       font-weight: 100 900;
       font-style: normal;
     }
@@ -284,42 +276,30 @@ t(m, "styles", s`
       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 {
+  `;
+  static properties = {
+    key: {
+      type: String,
+      reflect: !0
+    }
+  };
   constructor() {
-    super(), this.size = "md", this.color = "default";
+    super(), this.key = "";
   }
   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>
+    return t`
+      <span class="key"><slot></slot></span>
     `;
   }
 }
-t(y, "styles", s`
+function q() {
+  typeof window < "u" && !customElements.get("cd-key") && customElements.define("cd-key", h);
+}
+class b extends r {
+  static styles = i`
     @font-face {
       font-family: 'Geist';
-      src: url(${n("fonts/Geist-Regular.woff")}) format('woff');
+      src: url(${o("fonts/Geist-Regular.woff")}) format('woff');
       font-weight: 100 900;
       font-style: normal;
     }
@@ -366,47 +346,59 @@ t(y, "styles", s`
         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 {
+    `;
+  static 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"
+    }
+  };
   constructor() {
-    super();
+    super(), this.size = "md", this.color = "default";
   }
   render() {
-    return r`
-      <div class="container" style="flex-direction: ${this.direction}; align-items: ${this.align}; gap: ${this.gap}; justify-content: ${this.justify};">
-        <slot></slot>
+    return t`
+      <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(k, "styles", s`
+function _() {
+  typeof window < "u" && !customElements.get("cd-spinner") && customElements.define("cd-spinner", b);
+}
+class v extends r {
+  static styles = i`
     @font-face {
       font-family: 'Geist';
-      src: url(${n(l)}) format('woff');
+      src: url(${o(n)}) format('woff');
       font-weight: 100 900;
       font-style: normal;
     }
@@ -417,133 +409,81 @@ t(k, "styles", s`
       width: 100%;
       height: 100%;
     }
-  `), t(k, "properties", {
-  direction: {
-    type: String,
-    reflect: !0,
-    attribute: "direction",
-    converter: {
-      fromAttribute(e) {
-        return e || "column";
-      },
-      toAttribute(e) {
-        return e;
+  `;
+  static 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;
+    },
+    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;
+    },
+    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;
+    },
+    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();
+    super();
   }
   render() {
-    return r`
-    <label ?disabled="${this.disabled}" for='${this.name | "checkbox"}' class='container ${this.disabled ? "disabled" : ""} ${this.error ? "error" : ""}' >
-
-      <div class='label-text'>
+    return t`
+      <div class="container" style="flex-direction: ${this.direction}; align-items: ${this.align}; gap: ${this.gap}; justify-content: ${this.justify};">
         <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`
+function G() {
+  typeof window < "u" && !customElements.get("cd-flex-container") && customElements.define("cd-flex-container", v);
+}
+class g extends r {
+  static formAssociated = !0;
+  static styles = i`
     @font-face {
       font-family: 'Geist';
-      src: url(${n(l)}) format('woff');
+      src: url(${o(n)}) format('woff');
       font-weight: 100 900;
       font-style: normal;
     }
@@ -692,56 +632,110 @@ t(c, "formAssociated", !0), t(c, "styles", s`
       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 {
+  `;
+  static 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
+    }
+  };
   constructor() {
-    super(), this.text = "", this.type = "info";
+    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`
-      <div class="informational ${this.type}">
-        ${this.text}
+    return t`
+    <label ?disabled="${this.disabled}" for='${this.name | "checkbox"}' class='container ${this.disabled ? "disabled" : ""} ${this.error ? "error" : ""}' >
+
+      <div class='label-text'>
         <slot></slot>
+        ${this.description ? t`<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='${l(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(x, "styles", s`
+function j() {
+  typeof window < "u" && !customElements.get("cd-checkbox") && customElements.define("cd-checkbox", g);
+}
+class m extends r {
+  static styles = i`
     @font-face {
       font-family: 'Geist';
-      src: url(${n(l)}) format('woff');
+      src: url(${o(n)}) format('woff');
       font-weight: 100 900;
       font-style: normal;
     }
@@ -752,40 +746,37 @@ t(x, "styles", s`
       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 {
+  `;
+  static properties = {
+    text: {
+      type: String,
+      reflect: !0
+    },
+    type: {
+      type: String,
+      reflect: !0
+    }
+  };
   constructor() {
-    super(), this.text = void 0, this.for = void 0, this.required = !1, this.disabled = !1;
+    super(), this.text = "", this.type = "info";
   }
   render() {
-    return r`
-      <label
-        class="${this.disabled ? "disabled" : ""}"
-        for="${p(this.for)}"
-      >
+    return t`
+      <div class="informational ${this.type}">
         ${this.text}
         <slot></slot>
-        ${this.required ? r`<span class="required">*</span>` : ""}
-      </label>
+      </div>
     `;
   }
 }
-t(w, "styles", s`
+function y() {
+  typeof window < "u" && !customElements.get("cd-information") && customElements.define("cd-information", m);
+}
+class x extends r {
+  static styles = i`
     @font-face {
       font-family: 'Geist';
-      src: url(${n(l)}) format('woff');
+      src: url(${o(n)}) format('woff');
       font-weight: 100 900;
       font-style: normal;
     }
@@ -804,45 +795,50 @@ t(w, "styles", s`
     .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 {
+  `;
+  static properties = {
+    text: {
+      type: String,
+      reflect: !0
+    },
+    for: {
+      type: String,
+      reflect: !0,
+      attribute: "for"
+    },
+    required: {
+      type: Boolean,
+      reflect: !0
+    },
+    disabled: {
+      type: Boolean,
+      reflect: !0
+    }
+  };
   constructor() {
-    super(), this.text = void 0, this.type = "error";
+    super(), this.text = void 0, this.for = void 0, this.required = !1, this.disabled = !1;
   }
   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>
+    return t`
+      <label
+        class="${this.disabled ? "disabled" : ""}"
+        for="${l(this.for)}"
+      >
+        ${this.text}
+        <slot></slot>
+        ${this.required ? t`<span class="required">*</span>` : ""}
+      </label>
     `;
   }
 }
-t($, "styles", s`
+function D() {
+  typeof window < "u" && !customElements.get("cd-label") && customElements.define("cd-label", x);
+}
+class k extends r {
+  static styles = i`
     @font-face {
       font-family: 'Geist';
-      src: url(${n(l)}) format('woff');
+      src: url(${o(n)}) format('woff');
       font-weight: 100 900;
       font-style: normal;
     }
@@ -872,71 +868,37 @@ t($, "styles", s`
       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 {
+  `;
+  static properties = {
+    text: {
+      type: String,
+      reflect: !0
+    },
+    type: {
+      type: String,
+      reflect: !0
+    }
+  };
   constructor() {
-    super(), this.label = "", this.variant = "primary", this.removable = !1, this.disabled = !1, this.size = "md";
+    super(), this.text = void 0, this.type = "error";
   }
   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>
+    return t`
+      <div class="error-message ${this.type}">
+        <slot name='icon'></slot>
+        ${this.text ? t`<span class="error-text">${this.text}</span>` : t`<slot></slot>`}
+      </div>
     `;
   }
-  _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`
+function V() {
+  typeof window < "u" && !customElements.get("cd-error") && customElements.define("cd-error", k);
+}
+class w extends r {
+  static styles = i`
     @font-face {
       font-family: 'Geist';
-      src: url(${n(l)}) format('woff');
+      src: url(${o(n)}) format('woff');
       font-weight: 100 900;
       font-style: normal;
     }
@@ -1010,103 +972,88 @@ t(E, "styles", s`
       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 {
+  `;
+  static 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"
+    }
+  };
   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();
+    super(), this.label = "", this.variant = "primary", this.removable = !1, this.disabled = !1, this.size = "md";
   }
   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>
-
+    return t`
+      <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 ? t`<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>
     `;
   }
-  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", {
+  _handleRemove() {
+    this.disabled || (this.dispatchEvent(new CustomEvent("remove", {
       detail: {
-        checked: !0
+        label: this.label
       },
       bubbles: !0,
       composed: !0
-    }));
+    })), this.remove());
   }
-  _handleLabelClick() {
-    this.disabled || this._select();
+  setRemovable(e) {
+    this.removable = e;
   }
-  _handleChange(e) {
-    this.checked = e.target.checked, this._internals.setFormValue(this.value), this.dispatchEvent(new CustomEvent("change", {
+  setDisabled(e) {
+    this.disabled = e;
+  }
+  removeTag() {
+    this.dispatchEvent(new CustomEvent("remove", {
       detail: {
-        name: this.name,
-        value: this.value,
-        checked: this.checked
+        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(d, "formAssociated", !0), t(d, "styles", s`
+function R() {
+  typeof window < "u" && !customElements.get("cd-tag") && customElements.define("cd-tag", w);
+}
+y();
+class $ extends r {
+  static formAssociated = !0;
+  static styles = i`
     @font-face {
       font-family: 'Geist';
-      src: url(${n(l)}) format('woff');
+      src: url(${o(n)}) format('woff');
       font-weight: 100 900;
       font-style: normal;
     }
@@ -1128,9 +1075,9 @@ t(d, "formAssociated", !0), t(d, "styles", s`
     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%);
+      width: var(--input-radio-size, 20px);
+      height: var(--input-radio-size, 20px);
+      border-radius: var(--input-radio-border-radius, 50%);
       margin: 0;
       padding: 0;
       border: 1px solid var(--input-border-color, #8E98A4);
@@ -1213,93 +1160,111 @@ t(d, "formAssociated", !0), t(d, "styles", s`
       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 {
+  `;
+  static 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
+    }
+  };
   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();
+    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`
-    <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>
+    return t`
+      <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>
+
     `;
   }
-  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)");
+  deselectAll() {
+    document.querySelectorAll(`cd-radio[name="${this.name}"]`).forEach((s) => {
+      s.checked = !1, s.dispatchEvent(new CustomEvent("change", {
+        detail: {
+          checked: !1
+        },
+        bubbles: !0,
+        composed: !0
+      }));
+    });
   }
-  selectOption(e) {
-    const i = this.shadowRoot.querySelector("select");
-    i.value = e, this.value = e, this._internals.setFormValue(this.value), this.dispatchEvent(new CustomEvent("change", {
+  _select() {
+    document.querySelectorAll(`cd-radio[name="${this.name}"]`).forEach((s) => {
+      s !== this && (s.checked = !1);
+    }), this.checked = !0, this.dispatchEvent(new CustomEvent("change", {
       detail: {
-        value: this.value
-      }
+        checked: !0
+      },
+      bubbles: !0,
+      composed: !0
     }));
   }
-  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
-      }
-    }));
+  _handleLabelClick() {
+    this.disabled || this._select();
   }
-  handleChange(e) {
-    this.value = e.target.value, this._internals.setFormValue(this.value), this.dispatchEvent(new CustomEvent("change", {
+  _handleChange(e) {
+    this.checked = e.target.checked, this._internals.setFormValue(this.value), this.dispatchEvent(new CustomEvent("change", {
       detail: {
-        value: this.value
-      }
+        name: this.name,
+        value: this.value,
+        checked: this.checked
+      },
+      bubbles: !0,
+      composed: !0
     }));
   }
 }
-t(u, "formAssociated", !0), t(u, "styles", s`
+const I = () => {
+  customElements.get("cd-radio") || customElements.define("cd-radio", $);
+};
+class E extends r {
+  static formAssociated = !0;
+  static styles = i`
     @font-face {
       font-family: 'Geist';
-      src: url(${n(l)}) format('woff');
+      src: url(${o(n)}) format('woff');
       font-weight: 100 900;
       font-style: normal;
     }
@@ -1390,81 +1355,130 @@ t(u, "formAssociated", !0), t(u, "styles", s`
       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
+  `;
+  static 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
+    }
+  };
+  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();
   }
-});
-function O() {
-  typeof window < "u" && !customElements.get("cd-select") && customElements.define("cd-select", u);
+  render() {
+    return t`
+    <div class='container ${this.fullWidth ? "full-width" : ""}'>
+      <select
+        name="${l(this.name)}"
+        ?disabled="${this.disabled}"
+        ?required="${this.required}"
+        class="${this.error ? "input-error" : ""} ${this.size} ${this.fullWidth ? "full-width" : ""}"
+        @change="${this.handleChange}"
+      >
+        ${this.placeholder ? t`<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"), s = this.shadowRoot.querySelector("select");
+    e.forEach((c) => s.appendChild(c.cloneNode(!0))), e.forEach((c) => c.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 s = this.shadowRoot.querySelector("select");
+    s.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
+      }
+    }));
+  }
+}
+function L() {
+  typeof window < "u" && !customElements.get("cd-select") && customElements.define("cd-select", E);
 }
 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
+  d as Badge,
+  u as Body,
+  g as Checkbox,
+  K as Counter,
+  p as DataObject,
+  k as ErrorMessage,
+  v as FlexContainer,
+  N as Icon,
+  m as Informational,
+  h as Key,
+  f as KeyValue,
+  x as Label,
+  U as NavImage,
+  $ as Radio,
+  E as Select,
+  b as Spinner,
+  w as Tag,
+  F as registerBadge,
+  S as registerBody,
+  j as registerCheckbox,
+  W as registerCounter,
+  B as registerDataObject,
+  V as registerErrorMessage,
+  G as registerFlexContainer,
+  M as registerIcon,
+  y as registerInformational,
+  q as registerKey,
+  A as registerKeyValue,
+  D as registerLabel,
+  Y as registerNavImage,
+  I as registerRadio,
+  L as registerSelect,
+  _ as registerSpinner,
+  R as registerTag
 };
 //# sourceMappingURL=index.es.js.map