@cargosense/cargo-design-system 1.0.1 → 1.0.5

package/dist/atoms/index.cjs.js

@@ -1,862 +1,2 @@
-"use strict";var k=Object.defineProperty;var w=(o,t,i)=>t in o?k(o,t,{enumerable:!0,configurable:!0,writable:!0,value:i}):o[t]=i;var r=(o,t,i)=>w(o,typeof t!="symbol"?t+"":t,i);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../assets/Counter.cjs.js");require("../fonts/index.cjs.js");class l extends e.i{constructor(){super(),this.status="none"}render(){return e.x`
-      <span class="badge ${this.status}">
-        <slot></slot>
-      </span>
-    `}}r(l,"styles",e.i$1`
-    @font-face {
-      font-family: 'Geist';
-      src: url(${e.r(e.fontURL)}) 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;
-    }
-  `),r(l,"properties",{status:{type:String,reflect:!0,attribute:"status",defaultValue:"none"}});function $(){typeof window<"u"&&!customElements.get("cd-badge")&&customElements.define("cd-badge",l)}class c extends e.i{constructor(){super(),this.fitContent=!1}render(){return e.x`
-      <div class="body${this.fitContent?" fit-content":""}">
-        <div class="content">
-          <slot><slot>
-        </div>
-      </div>
-    `}}r(c,"styles",e.i$1`
-    @font-face {
-      font-family: 'Geist';
-      src: url(${e.r(e.fontURL)}) format('woff');
-      font-weight: 100 900;
-      font-style: normal;
-    }
-
-    :host {
-      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%;
-    }
-  `),r(c,"properties",{fitContent:{type:Boolean,reflect:!0,attribute:"fit-content"}});function E(){typeof window<"u"&&!customElements.get("cd-body")&&customElements.define("cd-body",c)}class d extends e.i{constructor(){super(),this.variant="",this.link=void 0}render(){return e.x`
-      <a href="${e.o(this.link)}" class="default ${this.variant}" tabindex="0">
-      <slot name="start"></slot>
-      <slot></slot>
-      <slot name="end"></slot>
-      </a>
-    `}}r(d,"styles",e.i$1`
-    @font-face {
-      font-family: 'Geist';
-      src: url(${e.r(e.fontURL)}) 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;
-    }
-  `),r(d,"properties",{link:{type:String,reflect:!0}});function C(){typeof window<"u"&&!customElements.get("cd-data-object")&&customElements.define("cd-data-object",d)}class u extends e.i{constructor(){super(),this.key="",this.value=""}render(){return e.x`
-      <div class="key-value">
-        <span class="key">${this.key}</span>
-        ${this.value===""?e.x`<slot class="value"></slot>`:e.x`<span class="value">${this.value}</span>`}
-      </div>
-    `}}r(u,"styles",e.i$1`
-    @font-face {
-      font-family: 'Geist';
-      src: url(${e.r(e.fontURL)}) 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);
-    }
-
-    `),r(u,"properties",{key:{type:String,reflect:!0},value:{type:String,reflect:!0}});function z(){typeof window<"u"&&!customElements.get("cd-key-value")&&customElements.define("cd-key-value",u)}class p extends e.i{constructor(){super(),this.key=""}render(){return e.x`
-      <span class="key"><slot></slot></span>
-    `}}r(p,"styles",e.i$1`
-    @font-face {
-      font-family: 'Geist';
-      src: url(${e.r(e.fontURL)}) 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);
-    }
-  `),r(p,"properties",{key:{type:String,reflect:!0}});function F(){typeof window<"u"&&!customElements.get("cd-key")&&customElements.define("cd-key",p)}class f extends e.i{constructor(){super(),this.size="md",this.color="default"}render(){return e.x`
-      <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>
-    `}}r(f,"styles",e.i$1`
-    @font-face {
-      font-family: 'Geist';
-      src: url(${e.r("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);
-      }
-    }
-    `),r(f,"properties",{size:{type:String,reflect:!0,attribute:"size",converter:t=>["sm","md","lg"].includes(t)?t:"md",defaultValue:"md"},color:{type:String,reflect:!0,attribute:"color",converter:t=>["default","classic","secondary"].includes(t)?t:"default",defaultValue:"default"},ariaLabel:{type:String,reflect:!0,attribute:"aria-label",defaultValue:"Loading"}});function S(){typeof window<"u"&&!customElements.get("cd-spinner")&&customElements.define("cd-spinner",f)}class h extends e.i{constructor(){super()}render(){return e.x`
-      <div class="container" style="flex-direction: ${this.direction}; align-items: ${this.align}; gap: ${this.gap}; justify-content: ${this.justify};">
-        <slot></slot>
-      </div>
-    `}}r(h,"styles",e.i$1`
-    @font-face {
-      font-family: 'Geist';
-      src: url(${e.r(e.fontURL)}) format('woff');
-      font-weight: 100 900;
-      font-style: normal;
-    }
-
-   .container {
-      display: flex;
-      flex-direction: column;
-      width: 100%;
-      height: 100%;
-    }
-  `),r(h,"properties",{direction:{type:String,reflect:!0,attribute:"direction",converter:{fromAttribute(t){return t||"column"},toAttribute(t){return t}}},align:{type:String,reflect:!0,attribute:"align",converter:{fromAttribute(t){return t||"stretch"},toAttribute(t){return t}}},gap:{type:String,reflect:!0,attribute:"gap",converter:{fromAttribute(t){return t||"0px"},toAttribute(t){return t}}},justify:{type:String,reflect:!0,attribute:"justify",converter:{fromAttribute(t){return t||"flex-start"},toAttribute(t){return t}}}});function B(){typeof window<"u"&&!customElements.get("cd-flex-container")&&customElements.define("cd-flex-container",h)}class a extends e.i{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 e.x`
-    <label ?disabled="${this.disabled}" for='${this.name|"checkbox"}' class='container ${this.disabled?"disabled":""} ${this.error?"error":""}' >
-
-      <div class='label-text'>
-        <slot></slot>
-        ${this.description?e.x`<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='${e.o(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(t){if(!this.disabled)return this.checked=t.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(t){if(typeof t!="boolean")throw new TypeError("The checked parameter must be a boolean");this.checked=t,this._internals.setValidity({valid:t}),this._internals.setFormValue(t),this.dispatchEvent(new CustomEvent("change",{detail:{checked:t,value:this.value},bubbles:!0,composed:!0}))}firstUpdated(){this.disabled?this.shadowRoot.querySelector("cd-icon").color="#A9B2BC":this.shadowRoot.querySelector("#check").addEventListener("keydown",t=>{console.log("keydown event",t),(t.key==="Enter"||t.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())})}}r(a,"formAssociated",!0),r(a,"styles",e.i$1`
-    @font-face {
-      font-family: 'Geist';
-      src: url(${e.r(e.fontURL)}) 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);
-    }
-  `),r(a,"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 q(){typeof window<"u"&&!customElements.get("cd-checkbox")&&customElements.define("cd-checkbox",a)}class b extends e.i{constructor(){super(),this.text="",this.type="info"}render(){return e.x`
-      <div class="informational ${this.type}">
-        ${this.text}
-        <slot></slot>
-      </div>
-    `}}r(b,"styles",e.i$1`
-    @font-face {
-      font-family: 'Geist';
-      src: url(${e.r(e.fontURL)}) 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;
-
-    }
-  `),r(b,"properties",{text:{type:String,reflect:!0},type:{type:String,reflect:!0}});function x(){typeof window<"u"&&!customElements.get("cd-information")&&customElements.define("cd-information",b)}class g extends e.i{constructor(){super(),this.text=void 0,this.for=void 0,this.required=!1,this.disabled=!1}render(){return e.x`
-      <label
-        class="${this.disabled?"disabled":""}"
-        for="${e.o(this.for)}"
-      >
-        ${this.text}
-        <slot></slot>
-        ${this.required?e.x`<span class="required">*</span>`:""}
-      </label>
-    `}}r(g,"styles",e.i$1`
-    @font-face {
-      font-family: 'Geist';
-      src: url(${e.r(e.fontURL)}) 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);
-    }
-  `),r(g,"properties",{text:{type:String,reflect:!0},for:{type:String,reflect:!0,attribute:"for"},required:{type:Boolean,reflect:!0},disabled:{type:Boolean,reflect:!0}});function A(){typeof window<"u"&&!customElements.get("cd-label")&&customElements.define("cd-label",g)}class v extends e.i{constructor(){super(),this.text=void 0,this.type="error"}render(){return e.x`
-      <div class="error-message ${this.type}">
-        <slot name='icon'></slot>
-        ${this.text?e.x`<span class="error-text">${this.text}</span>`:e.x`<slot></slot>`}
-      </div>
-    `}}r(v,"styles",e.i$1`
-    @font-face {
-      font-family: 'Geist';
-      src: url(${e.r(e.fontURL)}) 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);
-    }
-
-  `),r(v,"properties",{text:{type:String,reflect:!0},type:{type:String,reflect:!0}});function _(){typeof window<"u"&&!customElements.get("cd-error")&&customElements.define("cd-error",v)}class m extends e.i{constructor(){super(),this.label="",this.variant="primary",this.removable=!1,this.disabled=!1,this.size="md"}render(){return e.x`
-      <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?e.x`<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(t){this.removable=t}setDisabled(t){this.disabled=t}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}))}}r(m,"styles",e.i$1`
-    @font-face {
-      font-family: 'Geist';
-      src: url(${e.r(e.fontURL)}) 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);
-    }
-  `),r(m,"properties",{label:{type:String,reflect:!0},variant:{type:String,reflect:!0,converter:t=>["primary","secondary","default","link","info","success","warning","danger"].includes(t)?t:"default"},removable:{type:Boolean,reflect:!0},disabled:{type:Boolean,reflect:!0},size:{type:String,reflect:!0,converter:t=>["sm","md","lg"].includes(t)?t:"md"}});function R(){typeof window<"u"&&!customElements.get("cd-tag")&&customElements.define("cd-tag",m)}x();class n extends e.i{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 e.x`
-      <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(t){this.checked=t.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}))}}r(n,"formAssociated",!0),r(n,"styles",e.i$1`
-    @font-face {
-      font-family: 'Geist';
-      src: url(${e.r(e.fontURL)}) format('woff');
-      font-weight: 100 900;
-      font-style: normal;
-    }
-    :host {
-      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;
-
-    }
-  `),r(n,"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 G=()=>{customElements.get("cd-radio")||customElements.define("cd-radio",n)};class s extends e.i{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 e.x`
-    <div class='container ${this.fullWidth?"full-width":""}'>
-      <select
-        name="${e.o(this.name)}"
-        ?disabled="${this.disabled}"
-        ?required="${this.required}"
-        class="${this.error?"input-error":""} ${this.size} ${this.fullWidth?"full-width":""}"
-        @change="${this.handleChange}"
-      >
-        ${this.placeholder?e.x`<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 t=this.querySelectorAll("option"),i=this.shadowRoot.querySelector("select");t.forEach(y=>i.appendChild(y.cloneNode(!0))),t.forEach(y=>y.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(t){const i=this.shadowRoot.querySelector("select");i.value=t,this.value=t,this._internals.setFormValue(this.value),this.dispatchEvent(new CustomEvent("change",{detail:{value:this.value}}))}reset(){const t=this.shadowRoot.querySelector("select");t.value="",this.value="",this._internals.setFormValue(this.value),this.dispatchEvent(new CustomEvent("change",{detail:{value:this.value}}))}handleChange(t){this.value=t.target.value,this._internals.setFormValue(this.value),this.dispatchEvent(new CustomEvent("change",{detail:{value:this.value}}))}}r(s,"formAssociated",!0),r(s,"styles",e.i$1`
-    @font-face {
-      font-family: 'Geist';
-      src: url(${e.r(e.fontURL)}) format('woff');
-      font-weight: 100 900;
-      font-style: normal;
-    }
-
-    :host {
-      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);
-    }
-  `),r(s,"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:t=>["sm","md","lg"].includes(t)?t:"md"},_internals:{type:Object,attribute:!1}});function j(){typeof window<"u"&&!customElements.get("cd-select")&&customElements.define("cd-select",s)}exports.Counter=e.Counter;exports.Icon=e.Icon;exports.NavImage=e.NavImage;exports.registerCounter=e.registerCounter;exports.registerIcon=e.registerIcon;exports.registerNavImage=e.registerNavImage;exports.Badge=l;exports.Body=c;exports.Checkbox=a;exports.DataObject=d;exports.ErrorMessage=v;exports.FlexContainer=h;exports.Informational=b;exports.Key=p;exports.KeyValue=u;exports.Label=g;exports.Radio=n;exports.Select=s;exports.Spinner=f;exports.Tag=m;exports.registerBadge=$;exports.registerBody=E;exports.registerCheckbox=q;exports.registerDataObject=C;exports.registerErrorMessage=_;exports.registerFlexContainer=B;exports.registerInformational=x;exports.registerKey=F;exports.registerKeyValue=z;exports.registerLabel=A;exports.registerRadio=G;exports.registerSelect=j;exports.registerSpinner=S;exports.registerTag=R;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../assets/index.cjs.js");require("../fonts/index.cjs.js");exports.Badge=e.Badge;exports.Body=e.Body;exports.Checkbox=e.Checkbox;exports.Counter=e.Counter;exports.DataObject=e.DataObject;exports.ErrorMessage=e.ErrorMessage;exports.FlexContainer=e.FlexContainer;exports.Icon=e.Icon;exports.Informational=e.Informational;exports.Key=e.Key;exports.KeyValue=e.KeyValue;exports.Label=e.Label;exports.NavImage=e.NavImage;exports.Radio=e.Radio;exports.Select=e.Select;exports.Spinner=e.Spinner;exports.Tag=e.Tag;exports.registerBadge=e.registerBadge;exports.registerBody=e.registerBody;exports.registerCheckbox=e.registerCheckbox;exports.registerCounter=e.registerCounter;exports.registerDataObject=e.registerDataObject;exports.registerErrorMessage=e.registerErrorMessage;exports.registerFlexContainer=e.registerFlexContainer;exports.registerIcon=e.registerIcon;exports.registerInformational=e.registerInformational;exports.registerKey=e.registerKey;exports.registerKeyValue=e.registerKeyValue;exports.registerLabel=e.registerLabel;exports.registerNavImage=e.registerNavImage;exports.registerRadio=e.registerRadio;exports.registerSelect=e.registerSelect;exports.registerSpinner=e.registerSpinner;exports.registerTag=e.registerTag;
 //# sourceMappingURL=index.cjs.js.map