@cargosense/cargo-design-system 1.0.0 → 1.0.1

package/dist/atoms/index.cjs.js

@@ -0,0 +1,862 @@
+"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;
+//# sourceMappingURL=index.cjs.js.map