bromcom-ui 2.12.1-test.0 → 3.0.0-preview.0

package/dist/esm/{bcm-accordion_63.entry.js → bcm-accordion_68.entry.js}

@@ -2,35 +2,34 @@
  * Built with Stencil
  * Copyright (c) Bromcom.
  */
-import { r as registerInstance, h as h$2, H as Host, g as getElement, c as createEvent, f as forceUpdate, a as getAssetPath } from './index-0615c2b8.js';
-import { G as Generate, s as snq } from './generate-74379aca.js';
+import { r as registerInstance, h as h$2, H as Host, g as getElement, c as createEvent, a as getRenderingRef, f as forceUpdate, d as getAssetPath } from './index-15387314.js';
+import { G as Generate, s as snq } from './generate-8470dd6c.js';
 import { C as ColorHelper } from './color-helper-ba15b0d8.js';
 import './datetime-helper-df25808a.js';
-import { N as NumberHelper } from './number-helper-6c691943.js';
-import { S as StringHelper } from './string-helper-b4602002.js';
-import { V as Validators } from './validators-c067048c.js';
+import { N as NumberHelper } from './number-helper-56061510.js';
+import { S as StringHelper } from './string-helper-243b3e1d.js';
+import { t as tooltipStyle, p as popoverStyle, V as Validators } from './popover.style-be349acc.js';
 import './element-dragger-b75266e6.js';
-import { B as Bcm, a as Bcm$1 } from './bcm-a50d55ba.js';
+import { B as Bcm, a as Bcm$1 } from './bcm-7f07539b.js';
 import { c as classnames } from './index-00c8a8f7.js';
-import { c as ce } from './index-3bc8c6e3.js';
-import { c as createStore } from './index-7e71bbc8.js';
-import { S as SlotTemplate } from './slot-template-0d958dcc.js';
-import { C as CaptionTemplate } from './caption-template-3cd42c3b.js';
-import { d as delay$1, g as getChildElements, p as pluralize, a as getChilds, e as extractColor, b as dropInComponent } from './utils-7727d09e.js';
-import { I as IsLoad } from './is-load-decorator-8277e3b8.js';
-import { L as LabelTemplate } from './label-template-ef97aadb.js';
+import { c as ce } from './index-9f698d35.js';
+import { c as checkboxStyle, d as defaultIcons$1 } from './types-ec7dcf4f.js';
+import { C as CaptionTemplate } from './caption-template-56977835.js';
+import './types-9493a7ed.js';
+import { d as delay$1, p as pluralize, g as getChildElements, a as getChilds, e as extractColor, b as dropInComponent } from './utils-7727d09e.js';
+import { I as IsLoad } from './is-load-decorator-5b0610df.js';
 import { c as createCommonjsModule, a as commonjsGlobal, g as getAugmentedNamespace, b as getDefaultExportFromCjs } from './_commonjsHelpers-7002e5de.js';
 import { r as react, a as reactDom, R as React } from './index-0d3a56ec.js';
-import { d as defaultIcons$1 } from './types-6f06fa1a.js';
-import './types-9493a7ed.js';
-import { F as FloatingUI } from './floating-ui-3f4394da.js';
-import { g as getPlacement, s as setPosition } from './popover-placement-1b15cc99.js';
+import { i as inputStyle } from './input.style-fe41ebc8.js';
+import { L as LabelTemplate } from './label-template-c7e70e5f.js';
+import { F as FloatingUI } from './floating-ui-4016b544.js';
+import { g as getPlacement, s as setPosition } from './popover-placement-6391b815.js';
+import { S as SlotTemplate } from './slot-template-250f6ed4.js';
 import { C as ColorPalette } from './colors-1d7854ea.js';
 import { T as TypeProps, S as SizeProps, D as DirectionProps } from './types-b211a5eb.js';
-import './package-0b936309.js';
+import './package-387afefd.js';
 import './colors-ed4e7579.js';
-
-const accordionCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");.size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}.input-size-large{height:40px}.input-size-medium{height:32px}.input-size-small{height:24px}.resize-none textarea{resize:none}.resize-vertical textarea{resize:vertical}.resize-auto textarea{height:auto;resize:none}.textarea-size-large{padding:4px 0 0 4px;min-height:40px}.textarea-size-large .bcm-input-element{min-height:calc((40px - 8px) + 2px)}.textarea-size-large .input-clear-button{height:calc( 40px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-medium{padding:4px 0 0 4px;min-height:32px}.textarea-size-medium .bcm-input-element{min-height:calc((32px - 8px) + 2px)}.textarea-size-medium .input-clear-button{height:calc( 32px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-small{padding:0px 0 0 4px;min-height:24px}.textarea-size-small .bcm-input-element{min-height:calc((24px - 8px) + 2px)}.textarea-size-small .input-clear-button{height:calc( 24px - 16px );top:8px;padding:0;margin-right:8px}:host{display:block}";
+import './floating-ui.dom.esm-40a07b59.js';
 
 const BcmAccordion = class {
   constructor(hostRef) {
@@ -83,11 +82,10 @@ const BcmAccordion = class {
     }
   }
   render() {
-    return (h$2(Host, { id: this._id }, h$2("slot", null)));
+    return (h$2(Host, { id: this._id, class: "tw-block" }, h$2("slot", null)));
   }
   get el() { return getElement(this); }
 };
-BcmAccordion.style = accordionCss;
 
 const attendanceCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap\"); .size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}.input-size-large{height:40px}.input-size-medium{height:32px}.input-size-small{height:24px}.resize-none textarea{resize:none}.resize-vertical textarea{resize:vertical}.resize-auto textarea{height:auto;resize:none}.textarea-size-large{padding:4px 0 0 4px;min-height:40px}.textarea-size-large .bcm-input-element{min-height:calc((40px - 8px) + 2px)}.textarea-size-large .input-clear-button{height:calc( 40px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-medium{padding:4px 0 0 4px;min-height:32px}.textarea-size-medium .bcm-input-element{min-height:calc((32px - 8px) + 2px)}.textarea-size-medium .input-clear-button{height:calc( 32px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-small{padding:0px 0 0 4px;min-height:24px}.textarea-size-small .bcm-input-element{min-height:calc((24px - 8px) + 2px)}.textarea-size-small .input-clear-button{height:calc( 24px - 16px );top:8px;padding:0;margin-right:8px}*{box-sizing:border-box}.bcm-attendance{width:fit-content;display:inline-flex;align-items:center;flex-direction:row;gap:4px}.bcm-attendance__item{display:flex;flex-direction:row;align-items:center;gap:1px}.bcm-attendance__item-am,.bcm-attendance__item-pm{display:block;width:calc( calc( 12px + 1px ) / 2 );height:calc( 12px + 1px );background-color:var(--bcm-new-ds-color-blue-500)}.bcm-attendance__item-am:hover,.bcm-attendance__item-pm:hover{background-color:var(--bcm-new-ds-color-blue-600)}.bcm-attendance__item-am{border-top-left-radius:100px;border-bottom-left-radius:100px}.bcm-attendance__item-pm{border-top-right-radius:100px;border-bottom-right-radius:100px}.bcm-attendance__item-status-present{background-color:var(--bcm-new-ds-color-emerald-500)}.bcm-attendance__item-status-present:hover{background-color:var(--bcm-new-ds-color-emerald-600)}.bcm-attendance__item-status-late{background-color:var(--bcm-new-ds-color-amber-500)}.bcm-attendance__item-status-late:hover{background-color:var(--bcm-new-ds-color-amber-600)}.bcm-attendance__item-status-absent{background-color:var(--bcm-new-ds-color-red-500)}.bcm-attendance__item-status-absent:hover{background-color:var(--bcm-new-ds-color-red-600)}.bcm-attendance__item-status-default{background-color:var(--bcm-new-ds-color-slate-300)}.bcm-attendance__item-status-default:hover{background-color:var(--bcm-new-ds-color-slate-400)}";
 
@@ -164,18 +162,6 @@ class Tooltip {
       this.removeListener();
     };
     this.target = () => document.getElementById(this.targetId);
-    this.sizeClass = () => {
-      switch (this.size) {
-        case Bcm.Size.small:
-          return "tw-text-1";
-        case Bcm.Size.medium:
-          return "tw-text-2";
-        case Bcm.Size.large:
-          return "tw-text-3";
-        default:
-          return "tw-text-2";
-      }
-    };
     this.init = () => {
       const { tone, colorName } = ColorHelper.parseColor(this.color, 700);
       const dc = Generate.getTwColor({
@@ -186,10 +172,10 @@ class Tooltip {
         variable: "--bcm-tooltip",
       });
       const style = Object.assign(Object.assign({}, dc), (dc["--bcm-tooltip-bg"] && { "--bcm-tooltip-text": ColorHelper.reverseColor(dc["--bcm-tooltip-bg"]) }));
+      const { tooltip } = tooltipStyle({ size: this.size });
       this.el = Generate.createElement("div", {
         "id": `${this.targetId}-tooltip-box`,
-        "class": `
-            tw-whitespace-normal tw-break-words tw-block tw-font-sans tw-pointer-events-none tw-max-w-xs tw-py-1 tw-px-2 tw-rounded tw-bg-[--bcm-tooltip-bg] tw-text-[--bcm-tooltip-text] ${this.sizeClass()} tw-absolute tw-top-0 tw-left-0 tw-z-tooltip tw-opacity-0 tw-transition-opacity tw-duration-300`,
+        "class": tooltip(),
         "role": "tooltip",
         "aria-hidden": "true",
         "style": ColorHelper.generateStyleString(style),
@@ -293,6 +279,139 @@ class Tooltip {
   }
 }
 
+class Popover {
+  constructor({ content, message, targetId, placement = "top", color = "slate-700", trigger = "none", openDelay = 0, closeDelay = 0, autoHide = false, emitShow = () => { }, emitHide = () => { } }) {
+    this.destroy = () => {
+      this.el = document.getElementById(this.id);
+      if (this.el) {
+        this.el.remove();
+        this.emitHide();
+      }
+      this.removeListener();
+    };
+    this.target = () => document.getElementById(this.targetId);
+    this.init = () => {
+      const { tone, colorName } = ColorHelper.parseColor(this.color, 700);
+      const dc = Generate.getTwColor({
+        color: colorName,
+        tones: {
+          [tone]: ["bg"],
+        },
+        variable: "--bcm-popover",
+      });
+      const style = Object.assign(Object.assign({}, dc), (dc["--bcm-popover-bg"] && { "--bcm-popover-text": ColorHelper.reverseColor(dc["--bcm-popover-bg"]) }));
+      const { popover, messageStyle, contentStyle, dividerStyle } = popoverStyle({ size: "medium" });
+      const inner = `<div class="tw-z-[1] tw-rounded-md">
+            ${this.message ? `<div class="${messageStyle()}">${StringHelper.trim(this.message)}</div>` : ""}
+            ${this.message && this.content ? `<div class="${dividerStyle()}"></div>` : ""}
+            ${this.content ? `<div class="${contentStyle()}">${StringHelper.trim(this.content)}</div>` : ""}
+        </div>`;
+      this.el = Generate.createElement("div", {
+        "id": `${this.targetId}-popover-box`,
+        "class": popover(),
+        "role": "popover",
+        "aria-hidden": "true",
+        "style": ColorHelper.generateStyleString(style),
+        "innerHTML": inner,
+      });
+    };
+    this.update = () => {
+      this.el = document.getElementById(this.id);
+      if (this.el) {
+        this.hide();
+        this.show();
+      }
+    };
+    this.listener = () => {
+      window.addEventListener("resize", this.calculatePosition.bind(this));
+      window.addEventListener("scroll", this.calculatePosition.bind(this), true);
+      window.addEventListener("wheel", this.calculatePosition.bind(this));
+      if (this.trigger && this.target()) {
+        switch (this.trigger) {
+          case "click":
+            this.target().addEventListener("click", this.toggle.bind(this));
+            this.autoHide && this.target().addEventListener("mouseleave", this.hide.bind(this));
+            break;
+          case "hover":
+            this.target().addEventListener("mouseenter", this.show.bind(this));
+            this.target().addEventListener("mouseleave", this.hide.bind(this));
+            break;
+          case "focus":
+            this.target().addEventListener("focus", this.show.bind(this), true);
+            this.target().addEventListener("blur", this.hide.bind(this), true);
+            break;
+        }
+      }
+      this.calculatePosition();
+    };
+    this.removeListener = () => {
+      window.removeEventListener("resize", this.calculatePosition.bind(this));
+      window.removeEventListener("scroll", this.calculatePosition.bind(this), true);
+      window.removeEventListener("wheel", this.calculatePosition.bind(this));
+      if (this.target()) {
+        this.target().removeEventListener("click", this.toggle.bind(this));
+        this.target().removeEventListener("mouseenter", this.show.bind(this));
+        this.target().removeEventListener("mouseleave", this.hide.bind(this));
+        this.target().removeEventListener("focus", this.show.bind(this), true);
+        this.target().removeEventListener("blur", this.hide.bind(this), true);
+      }
+    };
+    this.calculatePosition = () => {
+      this.el = document.getElementById(this.id);
+      if (this.el) {
+        FloatingUI({
+          ref: this.target(),
+          floating: this.el,
+          placement: this.placement,
+          offset: 8,
+          arrow: true,
+          arrowColor: `tw-bg-[--bcm-popover-bg]`,
+        });
+      }
+    };
+    this.show = async () => {
+      if (this.message || this.content) {
+        this.init();
+        await delay$1(this.openDelay);
+        this.calculatePosition();
+        this.emitShow();
+      }
+      else {
+        this.hide();
+      }
+    };
+    this.hide = async () => {
+      this.el = document.getElementById(this.id);
+      if (this.el) {
+        await delay$1(this.closeDelay);
+        this.el.remove();
+        this.emitHide();
+      }
+    };
+    this.toggle = () => {
+      this.el = document.getElementById(this.id);
+      if (this.el) {
+        this.hide();
+      }
+      else {
+        this.show();
+      }
+    };
+    this.content = content;
+    this.message = message;
+    this.targetId = targetId;
+    this.placement = placement;
+    this.color = color;
+    this.trigger = trigger;
+    this.id = targetId + "-popover-box";
+    this.openDelay = openDelay;
+    this.closeDelay = closeDelay;
+    this.autoHide = autoHide;
+    this.emitShow = emitShow;
+    this.emitHide = emitHide;
+  }
+}
+
 // --bcm-attendance-actions-button-bg: #F1F5F9; /* slate-100 */
 // --bcm-attendance-actions-button-text: #334155; /* slate-700 */
 // --bcm-attendance-actions-button-border: #CBD5E1; /* slate-300 */
@@ -599,15 +718,15 @@ BcmAttendanceActions.style = attendanceActionsCss;
 
 const avatarStyle = ce({
   slots: {
-    base: "bcm-avatar bcm-ui-element bcm-ui-content-display tw-uppercase tw-inline-flex tw-items-center tw-justify-center tw-bg-[--bcm-avatar-bg] tw-text-[--bcm-avatar-text]",
+    base: "bcm-avatar bcm-ui-element bcm-ui-content-display tw-uppercase tw-font-medium tw-inline-flex tw-items-center tw-justify-center tw-bg-[--bcm-avatar-bg] tw-text-[--bcm-avatar-text]",
     image: "tw-w-full tw-h-full",
     badge: "",
   },
   variants: {
     size: {
-      small: "bcm-avatar__size-small tw-text-1 tw-w-6 tw-h-6",
-      medium: "bcm-avatar__size-medium tw-text-2 tw-w-8 tw-h-8",
-      large: "bcm-avatar__size-large tw-text-3 tw-w-10 tw-h-10",
+      small: "bcm-avatar__size-small tw-text-size-4 tw-w-6 tw-h-6",
+      medium: "bcm-avatar__size-medium tw-text-size-5 tw-w-8 tw-h-8",
+      large: "bcm-avatar__size-large tw-text-size-6 tw-w-10 tw-h-10",
     },
     shape: {
       ellipse: {
@@ -616,8 +735,8 @@ const avatarStyle = ce({
         badge: "tw-top-0 tw-right-0",
       },
       square: {
-        base: "bcm-avatar__shape-square tw-rounded",
-        image: "tw-rounded",
+        base: "bcm-avatar__shape-square tw-rounded-[--bcm-ui-radius]",
+        image: "tw-rounded-[--bcm-ui-radius]",
         badge: "tw--top-0.5 tw--right-0.5",
       },
     },
@@ -635,6 +754,8 @@ const avatarStyle = ce({
   },
 });
 
+const avatarCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");.size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}.input-size-large{height:40px}.input-size-medium{height:32px}.input-size-small{height:24px}.resize-none textarea{resize:none}.resize-vertical textarea{resize:vertical}.resize-auto textarea{height:auto;resize:none}.textarea-size-large{padding:4px 0 0 4px;min-height:40px}.textarea-size-large .bcm-input-element{min-height:calc((40px - 8px) + 2px)}.textarea-size-large .input-clear-button{height:calc( 40px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-medium{padding:4px 0 0 4px;min-height:32px}.textarea-size-medium .bcm-input-element{min-height:calc((32px - 8px) + 2px)}.textarea-size-medium .input-clear-button{height:calc( 32px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-small{padding:0px 0 0 4px;min-height:24px}.textarea-size-small .bcm-input-element{min-height:calc((24px - 8px) + 2px)}.textarea-size-small .input-clear-button{height:calc( 24px - 16px );top:8px;padding:0;margin-right:8px}:root{--bcm-avatar-bg:var(--bcm-ui-color-background);--bcm-avatar-text:var(--bcm-ui-color-text);--bcm-avatar-radius:50%}";
+
 const BcmAvatar = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
@@ -656,7 +777,7 @@ const BcmAvatar = class {
     return initials.substring(0, 2);
   }
   renderDefaultIcon() {
-    return h$2("bcm-icon", { icon: this.icon });
+    return h$2("i", { class: this.icon });
   }
   render() {
     const { shape, size, status, color, blink } = this;
@@ -664,7 +785,7 @@ const BcmAvatar = class {
     const dc = Generate.getTwColor({
       color: color,
       tones: {
-        200: ["bg"],
+        100: ["bg"],
         700: ["text"],
       },
       variable: "--bcm-avatar",
@@ -673,7 +794,7 @@ const BcmAvatar = class {
       ? {
         width: `${size}px`,
         height: `${size}px`,
-        fontSize: `${+size / 3}px`,
+        fontSize: `${+size / 2}px`,
       }
       : {};
     const RenderContent = () => {
@@ -699,6 +820,7 @@ const BcmAvatar = class {
   }
   get el() { return getElement(this); }
 };
+BcmAvatar.style = avatarCss;
 
 const badgeStyle = ce({
   slots: {
@@ -708,26 +830,26 @@ const badgeStyle = ce({
       "tw-flex tw-items-center tw-justify-center tw-flex-row",
       "tw-rounded-full tw-text-center",
       "tw-bg-[--bcm-badge-bg] tw-text-[--bcm-badge-text]",
-      "tw-whitespace-nowrap",
+      "tw-whitespace-nowrap tw-font-medium",
     ],
     dotText: "empty:tw-hidden",
   },
   variants: {
     size: {
       small: {
-        host: "tw-text-2 tw-gap-1",
-        base: "bcm-badge__dot-size-small tw-text-1 tw-min-w-1.5 tw-min-h-1.5",
-        dotText: "tw-px-1.5 tw-min-w-4",
+        host: "tw-text-size-3 tw-gap-1",
+        base: "bcm-badge__dot-size-small  tw-min-w-1.5 tw-min-h-1.5",
+        dotText: "tw-px-1 tw-min-w-4",
       },
       medium: {
-        host: "tw-text-3 tw-gap-1.5",
-        base: "bcm-badge__dot-size-medium tw-text-2 tw-min-w-2 tw-min-h-2",
-        dotText: "tw-px-1.5 tw-min-w-5",
+        host: "tw-text-size-4 tw-gap-1.5",
+        base: "bcm-badge__dot-size-medium  tw-min-w-2 tw-min-h-2",
+        dotText: "tw-px-1.5 tw-py-0.5 tw-min-w-6",
       },
       large: {
-        host: "tw-text-4 tw-gap-2",
-        base: "bcm-badge__dot-size-large tw-text-3 tw-min-w-2.5 tw-min-h-2.5",
-        dotText: "tw-px-2 tw-min-w-6",
+        host: "tw-text-size-5 tw-gap-2",
+        base: "bcm-badge__dot-size-large  tw-min-w-2.5 tw-min-h-2.5",
+        dotText: "tw-px-2 tw-py-1 tw-min-w-8",
       },
     },
     blink: {
@@ -747,6 +869,8 @@ const badgeStyle = ce({
   },
 });
 
+const badgeCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");.size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}.input-size-large{height:40px}.input-size-medium{height:32px}.input-size-small{height:24px}.resize-none textarea{resize:none}.resize-vertical textarea{resize:vertical}.resize-auto textarea{height:auto;resize:none}.textarea-size-large{padding:4px 0 0 4px;min-height:40px}.textarea-size-large .bcm-input-element{min-height:calc((40px - 8px) + 2px)}.textarea-size-large .input-clear-button{height:calc( 40px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-medium{padding:4px 0 0 4px;min-height:32px}.textarea-size-medium .bcm-input-element{min-height:calc((32px - 8px) + 2px)}.textarea-size-medium .input-clear-button{height:calc( 32px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-small{padding:0px 0 0 4px;min-height:24px}.textarea-size-small .bcm-input-element{min-height:calc((24px - 8px) + 2px)}.textarea-size-small .input-clear-button{height:calc( 24px - 16px );top:8px;padding:0;margin-right:8px}:root{--bcm-badge-bg:var(--bcm-ui-color-background);--bcm-badge-text:var(--bcm-ui-color-text)}";
+
 const BcmBadge = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
@@ -780,6 +904,92 @@ const BcmBadge = class {
   }
   get el() { return getElement(this); }
 };
+BcmBadge.style = badgeCss;
+
+const buttonStyle = ce({
+  slots: {
+    base: "",
+    hostStyle: "bcm-button bcm-ui-element bcm-ui-action tw-w-fit tw-relative tw-inline-block",
+    containerStyle: ["bcm-button__container tw-button-reset", "tw-font-medium tw-no-underline", "tw-flex tw-items-center tw-justify-center tw-gap-2", "tw-rounded-[--bcm-button-radius] tw-border tw-border-solid"],
+    iconStyle: "",
+    textStyle: "empty:tw-hidden tw-flex tw-items-center tw-justify-center tw-gap-2",
+  },
+  variants: {
+    size: {
+      small: {
+        containerStyle: ["bcm-button__container-size-small", "tw-text-size-4 tw-py-px tw-px-2", "tw-min-h-6"],
+      },
+      medium: {
+        containerStyle: ["bcm-button__container-size-medium", "tw-text-size-5 tw-py-0.5 tw-px-3", "tw-min-h-8"],
+      },
+      large: {
+        containerStyle: ["bcm-button__container-size-large", "tw-text-size-6 tw-py-1 tw-px-3", "tw-min-h-10"],
+      },
+    },
+    kind: {
+      solid: {
+        containerStyle: "bcm-button__container-kind-solid",
+      },
+      ghost: {
+        containerStyle: "bcm-button__container-kind-ghost",
+      },
+      link: {
+        containerStyle: ["bcm-button__container-kind-link"],
+      },
+      outline: {
+        containerStyle: "bcm-button__container-kind-outline",
+      },
+    },
+    fullWidth: {
+      true: {
+        containerStyle: "full-width tw-w-full",
+        hostStyle: "full-width tw-w-full",
+      },
+    },
+    checked: {
+      true: {
+        containerStyle: "checked !tw-bg-[--bcm-button-bg-active]",
+      },
+    },
+    disabled: {
+      true: {
+        containerStyle: "disabled tw-cursor-not-allowed",
+      },
+      false: {
+        containerStyle: [
+          "tw-cursor-pointer",
+          "tw-bg-[--bcm-button-bg] tw-text-[--bcm-button-text] tw-border-[--bcm-button-border]",
+          "hover:tw-bg-[--bcm-button-bg-hover] hover:tw-text-[--bcm-button-text-hover] hover:tw-border-[--bcm-button-border-hover]",
+          "active:tw-bg-[--bcm-button-bg-active] active:tw-text-[--bcm-button-text-active] active:tw-border-[--bcm-button-border-active]",
+          "focus-visible:tw-ring",
+        ],
+      },
+    },
+  },
+  compoundVariants: [
+    {
+      disabled: true,
+      kind: ["solid", "ghost"],
+      class: {
+        containerStyle: "tw-bg-color-disabled tw-text-color-disabled tw-border-color-disabled",
+      },
+    },
+    {
+      disabled: true,
+      kind: ["link"],
+      class: {
+        containerStyle: "tw-text-color-disabled tw-border-transparent tw-bg-transparent",
+      },
+    },
+  ],
+  defaultVariants: {
+    size: "medium",
+    kind: "solid",
+    fullWidth: false,
+    checked: false,
+    disabled: false,
+  },
+});
 
 const variantOptions = {
   save: {
@@ -948,183 +1158,138 @@ var VariantProps;
   VariantProps["download"] = "download";
 })(VariantProps || (VariantProps = {}));
 
-const { state: state$4 } = createStore({
-  value: new Map(),
-  setData: {},
-  removeData: {}
-});
-const setValue$4 = (val) => {
-  const data = Object.assign(Object.assign({}, val), (variantOptions[val.variant] && {
-    icon: variantOptions[val.variant].icon,
-    value: variantOptions[val.variant].text,
-    iconPosition: Bcm$1.IconPosition[variantOptions[val.variant].iconPosition],
-    variantColor: variantOptions[val.variant].color
-  }));
-  state$4.value.set(data.id, data);
-};
-const removeValue$2 = (_id) => {
-  state$4.value.delete(_id);
-};
-const getValue$4 = (id) => snq(() => state$4.value.get(id), {});
-const buttonState = {
-  setValue: setValue$4,
-  removeValue: removeValue$2,
-  getValue: getValue$4
-};
-
-const ButtonTemplate = ({ value, type, componentClass, disabled, href, target, loading, isIconOnly, icon, iconPosition, id }) => {
-  const ButtonTagType = (href) ? Bcm$1.HtmlElementType.a : Bcm$1.HtmlElementType.button;
-  return (h$2(ButtonTagType, Object.assign({ id: id }, (type == Bcm$1.HtmlElementType.button && { type }), { class: componentClass, disabled: disabled, href: href, target: target, tabindex: "0", "aria-label": "button" }),
-    h$2("span", { hidden: true },
-      h$2("slot", null)),
-    loading && h$2("span", { class: "bcm-button__container-loading" },
-      " ",
-      h$2("span", { class: "bcm-button__container-icon" },
-        h$2("i", { class: "far fa-spinner-third fa-spin" }),
-        " ")),
-    icon && h$2("span", { class: `${iconPosition} bcm-button__container-icon` },
-      h$2("i", { class: `${icon}` })),
-    !isIconOnly && (h$2(SlotTemplate, { className: "bcm-button__container-text", value: value })),
-    h$2("slot", { name: "suffix" })));
-};
-
-const buttonCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap\"); .size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}.input-size-large{height:40px}.input-size-medium{height:32px}.input-size-small{height:24px}.resize-none textarea{resize:none}.resize-vertical textarea{resize:vertical}.resize-auto textarea{height:auto;resize:none}.textarea-size-large{padding:4px 0 0 4px;min-height:40px}.textarea-size-large .bcm-input-element{min-height:calc((40px - 8px) + 2px)}.textarea-size-large .input-clear-button{height:calc( 40px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-medium{padding:4px 0 0 4px;min-height:32px}.textarea-size-medium .bcm-input-element{min-height:calc((32px - 8px) + 2px)}.textarea-size-medium .input-clear-button{height:calc( 32px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-small{padding:0px 0 0 4px;min-height:24px}.textarea-size-small .bcm-input-element{min-height:calc((24px - 8px) + 2px)}.textarea-size-small .input-clear-button{height:calc( 24px - 16px );top:8px;padding:0;margin-right:8px}*{box-sizing:border-box}.bcm-button{display:inline-flex;width:fit-content;height:fit-content;--bcm-button-solid-color-default:var(--bcm-new-ds-color-white);--bcm-button-solid-background-color-default:var(--bcm-new-ds-color-blue-700);--bcm-button-solid-border-default:var(--bcm-new-ds-color-blue-700);--bcm-button-solid-color-hover:var(--bcm-new-ds-color-white);--bcm-button-solid-background-color-hover:var(--bcm-new-ds-color-blue-800);--bcm-button-solid-border-hover:var(--bcm-new-ds-color-blue-800);--bcm-button-solid-color-focus-visible:var(--bcm-new-ds-color-white);--bcm-button-solid-background-color-focus-visible:var(--bcm-new-ds-color-blue-900);--bcm-button-solid-border-focus-visible:var(--bcm-new-ds-color-blue-900);--bcm-button-solid-color-active:var(--bcm-new-ds-color-white);--bcm-button-solid-background-color-active:var(--bcm-new-ds-color-blue-900);--bcm-button-solid-border-active:var(--bcm-new-ds-color-blue-900);--bcm-button-solid-color-disabled:var(--bcm-new-ds-color-white);--bcm-button-solid-background-color-disabled:var(--bcm-new-ds-color-slate-400);--bcm-button-solid-border-disabled:var(--bcm-new-ds-color-slate-400);--bcm-button-ghost-color-default:var(--bcm-new-ds-color-slate-700);--bcm-button-ghost-background-color-default:var(--bcm-new-ds-color-slate-100);--bcm-button-ghost-border-default:var(--bcm-new-ds-color-slate-300);--bcm-button-ghost-color-hover:var(--bcm-new-ds-color-slate-700);--bcm-button-ghost-background-color-hover:var(--bcm-new-ds-color-slate-200);--bcm-button-ghost-border-hover:var(--bcm-new-ds-color-slate-400);--bcm-button-ghost-color-focus-visible:var(--bcm-new-ds-color-slate-700);--bcm-button-ghost-background-color-focus-visible:var(--bcm-new-ds-color-slate-400);--bcm-button-ghost-border-focus-visible:var(--bcm-new-ds-color-slate-600);--bcm-button-ghost-color-active:var(--bcm-new-ds-color-slate-700);--bcm-button-ghost-background-color-active:var(--bcm-new-ds-color-slate-300);--bcm-button-ghost-border-active:var(--bcm-new-ds-color-slate-500);--bcm-button-ghost-color-disabled:var(--bcm-new-ds-color-slate-300);--bcm-button-ghost-background-color-disabled:var(--bcm-new-ds-color-slate-50);--bcm-button-ghost-border-disabled:var(--bcm-new-ds-color-slate-200);--bcm-button-link-color-default:var(--bcm-new-ds-color-blue-700);--bcm-button-link-background-color-default:var(--bcm-new-ds-color-transparent);--bcm-button-link-border-default:var(--bcm-new-ds-color-transparent);--bcm-button-link-color-hover:var(--bcm-new-ds-color-blue-600);--bcm-button-link-background-color-hover:var(--bcm-new-ds-color-transparent);--bcm-button-link-border-hover:var(--bcm-new-ds-color-transparent);--bcm-button-link-color-focus-visible:var(--bcm-new-ds-color-blue-800);--bcm-button-link-background-color-focus-visible:var(--bcm-new-ds-color-slate-50);--bcm-button-link-border-focus-visible:var(--bcm-new-ds-color-slate-50);--bcm-button-link-color-active:var(--bcm-new-ds-color-blue-700);--bcm-button-link-background-color-active:var(--bcm-new-ds-color-slate-50);--bcm-button-link-border-active:var(--bcm-new-ds-color-slate-50);--bcm-button-link-color-disabled:var(--bcm-new-ds-color-slate-400);--bcm-button-link-background-color-disabled:var(--bcm-new-ds-color-transparent);--bcm-button-link-border-disabled:var(--bcm-new-ds-color-transparent);--bcm-button-ghost-link-color-default:var(--bcm-new-ds-color-slate-700);--bcm-button-ghost-link-background-color-default:var(--bcm-new-ds-color-transparent);--bcm-button-ghost-link-border-default:var(--bcm-new-ds-color-transparent);--bcm-button-ghost-link-color-hover:var(--bcm-new-ds-color-slate-700);--bcm-button-ghost-link-background-color-hover:var(--bcm-new-ds-color-slate-200);--bcm-button-ghost-link-border-hover:var(--bcm-new-ds-color-transparent);--bcm-button-ghost-link-color-focus-visible:var(--bcm-new-ds-color-slate-700);--bcm-button-ghost-link-background-color-focus-visible:var(--bcm-new-ds-color-slate-300);--bcm-button-ghost-link-border-focus-visible:var(--bcm-new-ds-color-transparent);--bcm-button-ghost-link-color-active:var(--bcm-new-ds-color-slate-700);--bcm-button-ghost-link-background-color-active:var(--bcm-new-ds-color-slate-300);--bcm-button-ghost-link-border-active:var(--bcm-new-ds-color-transparent);--bcm-button-ghost-link-color-disabled:var(--bcm-new-ds-color-slate-500);--bcm-button-ghost-link-background-color-disabled:var(--bcm-new-ds-color-transparent);--bcm-button-ghost-link-border-disabled:var(--bcm-new-ds-color-transparent)}.bcm-button.full-width{width:100%}.bcm-button.full-width .bcm-button__container{width:100%}.bcm-button:after,.bcm-button:before{content:\"\";clear:both}.bcm-button__container{border:none;color:inherit;background-color:inherit;padding:0;margin:0;font:inherit;cursor:pointer;outline:none;text-decoration:none;font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;font-weight:500;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:4px 12px;outline:none;border-radius:4px;transition:background-color 0.1s ease-in-out;position:relative;min-width:40px;border-width:1px;border-style:solid;border-color:initial}.bcm-button__container:hover,.bcm-button__container:focus,.bcm-button__container:active{outline:none;text-decoration:none}.bcm-button__container-loading{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:4px;display:flex;align-items:center;justify-content:center}.bcm-button__container-kind-solid{color:var(--bcm-button-solid-color-default);background-color:var(--bcm-button-solid-background-color-default);border-color:var(--bcm-button-solid-border-default)}.bcm-button__container-kind-solid:hover{color:var(--bcm-button-solid-color-hover);background-color:var(--bcm-button-solid-background-color-hover);border-color:var(--bcm-button-solid-border-hover)}.bcm-button__container-kind-solid:focus-visible{color:var(--bcm-button-solid-color-focus-visible);background-color:var(--bcm-button-solid-background-color-focus-visible);border-color:var(--bcm-button-solid-border-focus-visible)}.bcm-button__container-kind-solid:active{color:var(--bcm-button-solid-color-active);background-color:var(--bcm-button-solid-background-color-active);border-color:var(--bcm-button-solid-border-active)}.bcm-button__container-kind-solid:disabled{color:var(--bcm-button-solid-color-disabled);background-color:var(--bcm-button-solid-background-color-disabled);border-color:var(--bcm-button-solid-border-disabled)}.bcm-button__container-kind-solid.checked{color:var(--bcm-button-solid-color-active);background-color:var(--bcm-button-solid-background-color-active);border-color:var(--bcm-button-solid-border-active)}.bcm-button__container-kind-solid.disabled{color:var(--bcm-button-solid-color-disabled);background-color:var(--bcm-button-solid-background-color-disabled);border-color:var(--bcm-button-solid-border-disabled)}.bcm-button__container-kind-solid .bcm-button__container-loading{color:var(--bcm-button-solid-color-default);background-color:var(--bcm-button-solid-background-color-default);border-color:var(--bcm-button-solid-border-default)}.bcm-button__container-kind-ghost{color:var(--bcm-button-ghost-color-default);background-color:var(--bcm-button-ghost-background-color-default);border-color:var(--bcm-button-ghost-border-default)}.bcm-button__container-kind-ghost:not([disabled]) .bcm-icon{color:var(--bcm-new-ds-color-slate-500)}.bcm-button__container-kind-ghost:hover{color:var(--bcm-button-ghost-color-hover);background-color:var(--bcm-button-ghost-background-color-hover);border-color:var(--bcm-button-ghost-border-hover)}.bcm-button__container-kind-ghost:focus-visible{color:var(--bcm-button-ghost-color-focus-visible);background-color:var(--bcm-button-ghost-background-color-focus-visible);border-color:var(--bcm-button-ghost-border-focus-visible)}.bcm-button__container-kind-ghost:active{color:var(--bcm-button-ghost-color-active);background-color:var(--bcm-button-ghost-background-color-active);border-color:var(--bcm-button-ghost-border-active)}.bcm-button__container-kind-ghost:disabled{color:var(--bcm-button-ghost-color-disabled);background-color:var(--bcm-button-ghost-background-color-disabled);border-color:var(--bcm-button-ghost-border-disabled)}.bcm-button__container-kind-ghost.checked{color:var(--bcm-button-ghost-color-active);background-color:var(--bcm-button-ghost-background-color-active);border-color:var(--bcm-button-ghost-border-active)}.bcm-button__container-kind-ghost.disabled{color:var(--bcm-button-ghost-color-disabled);background-color:var(--bcm-button-ghost-background-color-disabled);border-color:var(--bcm-button-ghost-border-disabled)}.bcm-button__container-kind-ghost .bcm-button__container-loading{color:var(--bcm-button-ghost-color-default);background-color:var(--bcm-button-ghost-background-color-default);border-color:var(--bcm-button-ghost-border-default)}.bcm-button__container-kind-link{color:var(--bcm-button-link-color-default);background-color:var(--bcm-button-link-background-color-default);border-color:var(--bcm-button-link-border-default)}.bcm-button__container-kind-link:hover{color:var(--bcm-button-link-color-hover);background-color:var(--bcm-button-link-background-color-hover);border-color:var(--bcm-button-link-border-hover)}.bcm-button__container-kind-link:focus-visible{color:var(--bcm-button-link-color-focus-visible);background-color:var(--bcm-button-link-background-color-focus-visible);border-color:var(--bcm-button-link-border-focus-visible)}.bcm-button__container-kind-link:active{color:var(--bcm-button-link-color-active);background-color:var(--bcm-button-link-background-color-active);border-color:var(--bcm-button-link-border-active)}.bcm-button__container-kind-link:disabled{color:var(--bcm-button-link-color-disabled);background-color:var(--bcm-button-link-background-color-disabled);border-color:var(--bcm-button-link-border-disabled)}.bcm-button__container-kind-link.checked{color:var(--bcm-button-link-color-active);background-color:var(--bcm-button-link-background-color-active);border-color:var(--bcm-button-link-border-active)}.bcm-button__container-kind-link.disabled{color:var(--bcm-button-link-color-disabled);background-color:var(--bcm-button-link-background-color-disabled);border-color:var(--bcm-button-link-border-disabled)}.bcm-button__container-kind-link .bcm-button__container-loading{color:var(--bcm-button-link-color-default);background-color:var(--bcm-button-link-background-color-default);border-color:var(--bcm-button-link-border-default)}.bcm-button__container-kind-ghost-link{color:var(--bcm-button-ghost-link-color-default);background-color:var(--bcm-button-ghost-link-background-color-default);border-color:var(--bcm-button-ghost-link-border-default)}.bcm-button__container-kind-ghost-link:hover{color:var(--bcm-button-ghost-link-color-hover);background-color:var(--bcm-button-ghost-link-background-color-hover);border-color:var(--bcm-button-ghost-link-border-hover)}.bcm-button__container-kind-ghost-link:focus-visible{color:var(--bcm-button-ghost-link-color-focus-visible);background-color:var(--bcm-button-ghost-link-background-color-focus-visible);border-color:var(--bcm-button-ghost-link-border-focus-visible)}.bcm-button__container-kind-ghost-link:active{color:var(--bcm-button-ghost-link-color-active);background-color:var(--bcm-button-ghost-link-background-color-active);border-color:var(--bcm-button-ghost-link-border-active)}.bcm-button__container-kind-ghost-link:disabled{color:var(--bcm-button-ghost-link-color-disabled);background-color:var(--bcm-button-ghost-link-background-color-disabled);border-color:var(--bcm-button-ghost-link-border-disabled)}.bcm-button__container-kind-ghost-link.checked{color:var(--bcm-button-ghost-link-color-active);background-color:var(--bcm-button-ghost-link-background-color-active);border-color:var(--bcm-button-ghost-link-border-active)}.bcm-button__container-kind-ghost-link.disabled{color:var(--bcm-button-ghost-link-color-disabled);background-color:var(--bcm-button-ghost-link-background-color-disabled);border-color:var(--bcm-button-ghost-link-border-disabled)}.bcm-button__container-kind-ghost-link .bcm-button__container-loading{color:var(--bcm-button-ghost-link-color-default);background-color:var(--bcm-button-ghost-link-background-color-default);border-color:var(--bcm-button-ghost-link-border-default)}.bcm-button__container[disabled]{cursor:not-allowed}.bcm-button__container-text{order:3;display:flex;align-items:center;gap:8px;white-space:nowrap}.bcm-button__container-icon{min-height:calc(12px + 8px)}.bcm-button__container-icon.prefix{order:2}.bcm-button__container-icon.suffix{order:4}.bcm-button__container-size-small{font-size:12px;line-height:calc(12px + 8px);padding:calc(4px - 3px) 12px;min-height:calc(calc(12px + 8px) + calc(calc(4px - 2px)) * 2)}.bcm-button__container-size-small .bcm-button__container-icon{min-height:calc(12px + 8px)}.bcm-button__container-size-medium{font-size:calc(12px + 1px);line-height:calc(12px + 8px);padding:calc(4px + 1px) 12px;min-height:calc(calc(12px + 8px) + calc(calc(4px + 2px)) * 2)}.bcm-button__container-size-medium .bcm-button__container-icon{min-height:calc(12px + 8px)}.bcm-button__container-size-large{font-size:16px;line-height:calc(16px + 8px);padding:calc(8px - 1px) 12px;min-height:calc(calc(16px + 8px) + (calc(8px) * 2))}.bcm-button__container-size-large .bcm-button__container-icon{min-height:calc(16px + 8px)}";
+const buttonCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");.size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}.input-size-large{height:40px}.input-size-medium{height:32px}.input-size-small{height:24px}.resize-none textarea{resize:none}.resize-vertical textarea{resize:vertical}.resize-auto textarea{height:auto;resize:none}.textarea-size-large{padding:4px 0 0 4px;min-height:40px}.textarea-size-large .bcm-input-element{min-height:calc((40px - 8px) + 2px)}.textarea-size-large .input-clear-button{height:calc( 40px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-medium{padding:4px 0 0 4px;min-height:32px}.textarea-size-medium .bcm-input-element{min-height:calc((32px - 8px) + 2px)}.textarea-size-medium .input-clear-button{height:calc( 32px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-small{padding:0px 0 0 4px;min-height:24px}.textarea-size-small .bcm-input-element{min-height:calc((24px - 8px) + 2px)}.textarea-size-small .input-clear-button{height:calc( 24px - 16px );top:8px;padding:0;margin-right:8px}:root{--bcm-button-bg:var(--bcm-ui-color-background-primary-info-default);--bcm-button-bg-hover:var(--bcm-ui-color-background-primary-info-hover);--bcm-button-bg-active:var(--bcm-ui-color-background-primary-info-active);--bcm-button-text:var(--bcm-ui-color-text-base);--bcm-button-text-hover:var(--bcm-ui-color-text-base);--bcm-button-text-active:var(--bcm-ui-color-text-base);--bcm-button-border:var(--bcm-ui-color-background-primary-info-default);--bcm-button-border-hover:var(--bcm-ui-color-background-primary-info-hover);--bcm-button-border-active:var(--bcm-ui-color-background-primary-info-active);--bcm-button-radius:var(--bcm-ui-radius)}";
 
 const BcmButton = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    this.bcmButtonClick = createEvent(this, "bcm-button-click", 7);
     this.bcmClick = createEvent(this, "bcm-click", 7);
-    this._id = Generate.UID();
-    this.hidden = false;
+    // isLink returns true if the button should be rendered as a link
+    this.isLink = () => !!this.href;
     this.type = Bcm$1.ButtonType.button;
+    this.form = undefined;
+    this.formAction = undefined;
+    this.formMethod = undefined;
+    this.formEnctype = undefined;
+    this.formTarget = undefined;
+    this.formNoValidate = undefined;
+    this.href = undefined;
+    this.target = Bcm$1.Target["_blank"];
+    this.rel = "noreferrer noopener";
+    this.download = undefined;
+    this._id = Generate.UID();
+    this.value = undefined;
+    this.name = undefined;
+    this.variant = undefined;
+    this.dataDismiss = false;
+    this.color = undefined;
+    this.checked = false;
     this.size = Bcm$1.Size.medium;
     this.disabled = false;
+    this.hidden = false;
     this.kind = Bcm$1.Kind.solid;
     this.outline = false;
+    this.filled = true;
     this.icon = undefined;
-    this.href = undefined;
-    this.target = undefined;
-    this.value = undefined;
     this.loading = false;
-    this.variant = undefined;
-    this.dataDismiss = false;
+    this.text = undefined;
     this.fullWidth = false;
     this.iconPosition = Bcm$1.IconPosition.prefix;
-    this.color = undefined;
-    this.checked = false;
   }
-  handleOnClick(e) {
-    if (this.disabled) {
-      e.preventDefault();
-      e.stopPropagation();
-      return false;
-    }
-  }
-  componentWillRender() {
-    const { size, kind, icon, iconPosition, disabled, outline, href, type, target, loading, variant, fullWidth, hidden, value } = this;
-    buttonState.setValue({
-      id: this._id,
+  render() {
+    /* style definitions */
+    const { color, kind, size, variant, fullWidth, outline } = this;
+    /* Common Attributes */
+    const { value, name, dataDismiss, disabled, loading, icon, iconPosition, text } = this;
+    /* Button Attributes */
+    const { type, form, formAction, formMethod, formEnctype, formTarget, formNoValidate, checked } = this;
+    /* Link Attributes */
+    const { href, target, rel, download } = this;
+    /* Tag */
+    const Tag = this.isLink() ? "a" : "button";
+    const buttonKind = outline ? "ghost" : kind;
+    const variantExists = variant && variantOptions[variant];
+    const buttonText = text || value || (variantExists && variantOptions[variant].text);
+    const buttonIcon = icon || (variantExists && variantOptions[variant].icon);
+    const buttonIconPosition = iconPosition || (variantExists && variantOptions[variant].iconPosition);
+    /* if kind is ghost, color is overridden. */
+    const buttonAttributes = {
+      "type": type,
+      "form": form,
+      "formaction": formAction,
+      "formmethod": formMethod,
+      "formenctype": formEnctype,
+      "formtarget": formTarget,
+      "formnovalidate": formNoValidate,
+      "value": value,
+      "name": name,
+      "data-dismiss": dataDismiss,
+      "data-checked": checked,
+    };
+    const linkAttributes = {
+      href: href,
+      target: target,
+      rel: rel,
+      download: download,
+    };
+    const commonAttributes = Object.assign(Object.assign({ "aria-label": buttonText || "button" }, (!disabled && {
+      onClick: e => {
+        this.bcmButtonClick.emit(e);
+        this.bcmClick.emit(e);
+      },
+    })), (disabled && {
+      "disabled": true,
+      "aria-disabled": true,
+      "tabindex": -1,
+      "onClick": e => {
+        e.preventDefault();
+        e.stopPropagation();
+      },
+    }));
+    const { hostStyle, containerStyle, textStyle } = buttonStyle({
       size,
-      type,
-      kind,
-      icon,
-      iconPosition,
-      disabled,
-      outline,
-      href,
-      target,
-      loading,
-      variant,
+      kind: buttonKind,
       fullWidth,
-      hidden,
-      value,
-      isIconOnly: !!(this.isHaveChildNodes() && this.icon),
-    });
-  }
-  getStateData() {
-    return buttonState.getValue(this._id);
-  }
-  isHaveChildNodes() {
-    const childNodes = Array.from(this.el.childNodes);
-    return childNodes.find(node => node.nodeType === Node.TEXT_NODE) === undefined;
-  }
-  setColor(color = this.color) {
-    if (!color)
-      return;
-    const { kind } = this;
-    const prefix = `--bcm-button-${kind}`;
-    if (kind === 'solid') {
-      return {
-        [`${prefix}-color-default`]: ColorHelper.dsColor('white'),
-        [`${prefix}-color-hover`]: ColorHelper.dsColor('white'),
-        [`${prefix}-color-focus-visible`]: ColorHelper.dsColor('white'),
-        [`${prefix}-color-active`]: ColorHelper.dsColor('white'),
-        [`${prefix}-color-disabled`]: ColorHelper.dsColor('white'),
-        [`${prefix}-background-color-default`]: ColorHelper.dsColor(color + '-700'),
-        [`${prefix}-background-color-hover`]: ColorHelper.dsColor(color + '-800'),
-        [`${prefix}-background-color-focus-visible`]: ColorHelper.dsColor(color + '-900'),
-        [`${prefix}-background-color-active`]: ColorHelper.dsColor(color + '-900'),
-        [`${prefix}-background-color-disabled`]: ColorHelper.dsColor('slate-400'),
-        [`${prefix}-border-default`]: ColorHelper.dsColor(color + '-700'),
-        [`${prefix}-border-hover`]: ColorHelper.dsColor(color + '-800'),
-        [`${prefix}-border-focus-visible`]: ColorHelper.dsColor(color + '-900'),
-        [`${prefix}-border-active`]: ColorHelper.dsColor(color + '-900'),
-        [`${prefix}-border-disabled`]: ColorHelper.dsColor('slate-400')
-      };
-    }
-    else if (kind == 'link') {
-      return {
-        [`${prefix}-color-default`]: ColorHelper.dsColor(color + '-700'),
-        [`${prefix}-color-hover`]: ColorHelper.dsColor(color + '-800'),
-        [`${prefix}-color-focus-visible`]: ColorHelper.dsColor(color + '-900'),
-        [`${prefix}-color-active`]: ColorHelper.dsColor(color + '-900'),
-        [`${prefix}-color-disabled`]: ColorHelper.dsColor('slate-400'),
-        [`${prefix}-background-color-default`]: ColorHelper.dsColor('transparent'),
-        [`${prefix}-background-color-hover`]: ColorHelper.dsColor('transparent'),
-        [`${prefix}-background-color-focus-visible`]: ColorHelper.dsColor('slate-50'),
-        [`${prefix}-background-color-active`]: ColorHelper.dsColor('slate-50'),
-        [`${prefix}-background-color-disabled`]: ColorHelper.dsColor('transparent'),
-        [`${prefix}-border-default`]: ColorHelper.dsColor('transparent'),
-        [`${prefix}-border-hover`]: ColorHelper.dsColor('transparent'),
-        [`${prefix}-border-focus-visible`]: ColorHelper.dsColor('slate-50'),
-        [`${prefix}-border-active`]: ColorHelper.dsColor('slate-50'),
-        [`${prefix}-border-disabled`]: ColorHelper.dsColor('transparent')
-      };
-    }
-    else if (kind == 'ghost') {
-      return {
-        [`${prefix}-color-default`]: ColorHelper.dsColor(color + '-700'),
-        [`${prefix}-color-hover`]: ColorHelper.dsColor(color + '-800'),
-        [`${prefix}-color-focus-visible`]: ColorHelper.dsColor(color + '-600'),
-        [`${prefix}-color-active`]: ColorHelper.dsColor(color + '-600'),
-        [`${prefix}-color-disabled`]: ColorHelper.dsColor(color + '-300'),
-        [`${prefix}-background-color-default`]: ColorHelper.dsColor(color + '-100'),
-        [`${prefix}-background-color-hover`]: ColorHelper.dsColor(color + '-200'),
-        [`${prefix}-background-color-focus-visible`]: ColorHelper.dsColor(color + '-400'),
-        [`${prefix}-background-color-active`]: ColorHelper.dsColor(color + '-300'),
-        [`${prefix}-background-color-disabled`]: ColorHelper.dsColor(color + '-50'),
-        [`${prefix}-border-default`]: ColorHelper.dsColor(color + '-300'),
-        [`${prefix}-border-hover`]: ColorHelper.dsColor(color + '-400'),
-        [`${prefix}-border-focus-visible`]: ColorHelper.dsColor(color + '-600'),
-        [`${prefix}-border-active`]: ColorHelper.dsColor(color + '-500'),
-        [`${prefix}-border-disabled`]: ColorHelper.dsColor(color + '-200'),
-      };
-    }
-    return;
-  }
-  render() {
-    const { size, kind, disabled, outline, type, href, target, loading, variantColor, fullWidth, hidden, icon, iconPosition, value, isIconOnly, iconSize } = this.getStateData();
-    const classPrefix = 'bcm-button';
-    let componentClass = classnames('bcm-button__container', `bcm-button__container-size-${size}`, `bcm-button__container-kind-${outline ? 'ghost' : kind}`, {
-      'full-width': fullWidth,
-      'checked': this.checked,
-      'disabled': disabled,
+      checked: this.checked,
+      disabled,
     });
-    const hostClasses = classnames(`${classPrefix}`, {
-      hidden,
-      'full-width': fullWidth,
+    const tones = {
+      solid: {
+        "white": ["text", "text-hover", "text-active"],
+        "700": ["bg", "border"],
+        "800": ["bg-hover", "border-hover"],
+        "900": ["bg-active", "border-active"],
+      },
+      ghost: {
+        "700": ["text"],
+        "800": ["text-hover"],
+        "900": ["text-active"],
+        "100": ["bg"],
+        "200": ["bg-hover"],
+        "300": ["bg-active", "border"],
+        "400": ["border-hover"],
+        "500": ["border-active"],
+      },
+      link: {
+        "transparent": ["bg", "bg-hover", "bg-active", "border", "border-hover", "border-active"],
+        "700": ["text"],
+        "800": ["text-hover"],
+        "900": ["text-active"],
+      },
+    };
+    const buttonColor = {
+      solid: color || (variantExists && variantOptions[variant].color),
+      ghost: "slate",
+      link: color || (variantExists && variantOptions[variant].color) || "blue",
+    };
+    const dc = Generate.getTwColor({
+      color: buttonColor[buttonKind],
+      tones: tones[buttonKind],
+      variable: `--bcm-button`,
     });
-    return (h$2(Host, { class: hostClasses, style: this.setColor(variantColor), onClick: () => !disabled && this.bcmClick.emit(this.el) }, h$2(ButtonTemplate, { type: type, value: value, componentClass: componentClass, disabled: disabled, href: href, target: target, icon: icon, loading: loading, iconSize: iconSize, isIconOnly: isIconOnly, iconPosition: iconPosition })));
+    const style = Object.assign({}, dc);
+    return (h$2(Host, { class: hostStyle(), style: style }, h$2(Tag, Object.assign({ class: containerStyle() }, commonAttributes, (this.isLink() ? linkAttributes : buttonAttributes)), h$2("slot", { name: "prefix" }), buttonIcon && (h$2("span", { class: `${buttonIconPosition == "suffix" ? "tw-order-1" : "tw-order-0"} bcm-button__container-icon` }, h$2("i", { class: `${buttonIcon}` }))), h$2("span", { class: textStyle() }, h$2("slot", null, buttonText)), h$2("slot", { name: "suffix" }), loading && (h$2("div", { class: "tw-absolute tw-inset-0 tw-flex tw-items-center tw-justify-center tw-rounded-[--bcm-button-radius] tw-bg-inherit" }, h$2("i", { class: "far fa-spinner-third fa-spin" }))))));
   }
   get el() { return getElement(this); }
 };
@@ -1204,18 +1369,139 @@ const BcmButtonGroup = class {
 };
 BcmButtonGroup.style = buttonGroupCss;
 
-const checkboxCss$1 = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap\"); .size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}.input-size-large{height:40px}.input-size-medium{height:32px}.input-size-small{height:24px}.resize-none textarea{resize:none}.resize-vertical textarea{resize:vertical}.resize-auto textarea{height:auto;resize:none}.textarea-size-large{padding:4px 0 0 4px;min-height:40px}.textarea-size-large .bcm-input-element{min-height:calc((40px - 8px) + 2px)}.textarea-size-large .input-clear-button{height:calc( 40px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-medium{padding:4px 0 0 4px;min-height:32px}.textarea-size-medium .bcm-input-element{min-height:calc((32px - 8px) + 2px)}.textarea-size-medium .input-clear-button{height:calc( 32px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-small{padding:0px 0 0 4px;min-height:24px}.textarea-size-small .bcm-input-element{min-height:calc((24px - 8px) + 2px)}.textarea-size-small .input-clear-button{height:calc( 24px - 16px );top:8px;padding:0;margin-right:8px}.bcm-input[no-margin]{margin:0}.bcm-textarea[no-margin]{margin:0}.bcm-switch[no-margin]{margin:0}.bcm-checkbox[no-margin]{margin:0}.bcm-radio-group[no-margin]{margin:0}.bcm-checkbox-group[no-margin]{margin:0}.bcm-range[no-margin]{margin:0}.bcm-form[no-margin]{margin:0}.bcm-form-group[no-margin]{margin:0}.bcm-list[no-margin]{margin:0}.bcm-colorpicker[no-margin]{margin:0}.bcm-date-picker[no-margin]{margin:0}.bcm-time-picker[no-margin]{margin:0}.bcm-datetime-picker[no-margin]{margin:0}.bcm-select[no-margin]{margin:0}.bcm-listbox[no-margin]{margin:0}*{box-sizing:border-box}.bcm-checkbox{outline:none;border:none;--bcm-checkbox-primary-color-default:var(--bcm-new-ds-color-blue-500);--bcm-checkbox-secondary-color-default:var(--bcm-new-ds-color-white);--bcm-checkbox-primary-color-hover:var(--bcm-new-ds-color-blue-600);--bcm-checkbox-secondary-color-hover:var(--bcm-new-ds-color-slate-50);--bcm-checkbox-primary-color-focus-visible:var(--bcm-new-ds-color-blue-800);--bcm-checkbox-secondary-color-focus-visible:var(--bcm-new-ds-color-slate-50);--bcm-checkbox-primary-color-active:var(--bcm-new-ds-color-blue-700);--bcm-checkbox-secondary-color-active:var(--bcm-new-ds-color-slate-50);--bcm-checkbox-primary-color-disabled:var(--bcm-new-ds-color-slate-300);--bcm-checkbox-secondary-color-disabled:var(--bcm-new-ds-color-slate-200);display:inline-flex;width:fit-content;flex-direction:column;margin-bottom:8px}.bcm-checkbox:focus,.bcm-checkbox:hover,.bcm-checkbox:active{outline:none;border:none}.bcm-checkbox *{box-sizing:border-box}.bcm-checkbox input[type=radio],.bcm-checkbox input[type=checkbox]{-webkit-appearance:none;appearance:none;background-color:#fff;margin:0;display:none}.bcm-checkbox__input{display:flex;flex-direction:row;align-items:flex-start;justify-content:flex-start;flex-wrap:nowrap;padding-top:4px}.bcm-checkbox.hidden{display:none}.bcm-checkbox :hover{cursor:pointer}.bcm-checkbox[disabled] :hover,.bcm-checkbox.disabled :hover{cursor:not-allowed}.bcm-checkbox .slot{font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;font-weight:500;color:var(--bcm-new-ds-color-slate-600)}.bcm-checkbox .slot:not(:empty){margin-left:8px;margin-right:8px}.bcm-checkbox-size-small .slot{font-size:12px;line-height:calc(12px + 8px);margin-top:-2.5px}.bcm-checkbox-size-small .bcm-checkbox__input{min-height:calc(24px - 4px)}.bcm-checkbox-size-small .bcm-checkbox__label-icon{width:14px;height:14px;min-width:14px;font-size:calc(10px - 2px)}.bcm-checkbox-size-medium .slot{font-size:calc(12px + 1px);line-height:calc(12px + 8px);margin-top:-1.5px}.bcm-checkbox-size-medium .bcm-checkbox__input{min-height:calc(32px - 4px)}.bcm-checkbox-size-medium .bcm-checkbox__label-icon{width:16px;height:16px;min-width:16px;font-size:10px}.bcm-checkbox-size-large .slot{font-size:16px;line-height:calc(16px + 8px);margin-top:-1.5px}.bcm-checkbox-size-large .bcm-checkbox__input{min-height:calc(32px - 4px)}.bcm-checkbox-size-large .bcm-checkbox__label-icon{width:18px;height:18px;min-width:18px;font-size:12px}.bcm-checkbox__label{display:flex;flex-direction:row;align-items:flex-start;justify-content:flex-start;flex-wrap:nowrap}.bcm-checkbox__label-icon{display:flex;flex-direction:column;align-items:center;justify-content:center;flex-wrap:nowrap;border-width:1px;border-style:solid;border-radius:2px}.bcm-checkbox__label-icon-indeterminate{position:relative}.bcm-checkbox__label-icon-indeterminate:after{content:\"\";display:block;position:absolute;width:70%;height:1.5px;background:var(--bcm-new-ds-color-white)}.bcm-checkbox__label-icon.bcm-radio__icon{width:16px;height:16px;box-sizing:border-box;border-radius:100px}.bcm-checkbox__label-icon.bcm-radio__icon .bcm-radio__icon-inner{width:10px;height:10px;border-radius:100px;background-color:var(--bcm-new-ds-color-white)}.bcm-checkbox .bcm-checkbox__label-icon{background:var(--bcm-checkbox-secondary-color-default);color:var(--bcm-checkbox-secondary-color-default);border-color:var(--bcm-new-ds-color-slate-300)}.bcm-checkbox .bcm-checkbox__label-icon-checked,.bcm-checkbox .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-new-ds-color-white);background-color:var(--bcm-checkbox-primary-color-default);border-color:var(--bcm-checkbox-primary-color-default)}.bcm-checkbox .bcm-checkbox__label-icon-checked.bcm-radio__icon,.bcm-checkbox .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon{border-color:var(--bcm-checkbox-primary-color-default);background-color:var(--bcm-checkbox-secondary-color-default)}.bcm-checkbox .bcm-checkbox__label-icon-checked.bcm-radio__icon .bcm-radio__icon-inner,.bcm-checkbox .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon .bcm-radio__icon-inner{background-color:var(--bcm-checkbox-primary-color-default)}.bcm-checkbox .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-checkbox-primary-color-default)}.bcm-checkbox:hover .bcm-checkbox__label-icon{background:var(--bcm-checkbox-secondary-color-hover);color:var(--bcm-checkbox-secondary-color-hover);border-color:var(--bcm-checkbox-primary-color-hover)}.bcm-checkbox:hover .bcm-checkbox__label-icon-checked,.bcm-checkbox:hover .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-new-ds-color-white);background-color:var(--bcm-checkbox-primary-color-hover);border-color:var(--bcm-checkbox-primary-color-hover)}.bcm-checkbox:hover .bcm-checkbox__label-icon-checked.bcm-radio__icon,.bcm-checkbox:hover .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon{border-color:var(--bcm-checkbox-primary-color-hover);background-color:var(--bcm-checkbox-secondary-color-hover)}.bcm-checkbox:hover .bcm-checkbox__label-icon-checked.bcm-radio__icon .bcm-radio__icon-inner,.bcm-checkbox:hover .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon .bcm-radio__icon-inner{background-color:var(--bcm-checkbox-primary-color-hover)}.bcm-checkbox:hover .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-checkbox-primary-color-hover)}.bcm-checkbox:focus-visible .bcm-checkbox__label-icon{background:var(--bcm-checkbox-secondary-color-focus-visible);color:var(--bcm-checkbox-secondary-color-focus-visible);border-color:var(--bcm-checkbox-primary-color-focus-visible)}.bcm-checkbox:focus-visible .bcm-checkbox__label-icon-checked,.bcm-checkbox:focus-visible .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-new-ds-color-white);background-color:var(--bcm-checkbox-primary-color-focus-visible);border-color:var(--bcm-checkbox-primary-color-focus-visible)}.bcm-checkbox:focus-visible .bcm-checkbox__label-icon-checked.bcm-radio__icon,.bcm-checkbox:focus-visible .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon{border-color:var(--bcm-checkbox-primary-color-focus-visible);background-color:var(--bcm-checkbox-secondary-color-focus-visible)}.bcm-checkbox:focus-visible .bcm-checkbox__label-icon-checked.bcm-radio__icon .bcm-radio__icon-inner,.bcm-checkbox:focus-visible .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon .bcm-radio__icon-inner{background-color:var(--bcm-checkbox-primary-color-focus-visible)}.bcm-checkbox:focus-visible .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-checkbox-primary-color-focus-visible)}.bcm-checkbox:active .bcm-checkbox__label-icon{background:var(--bcm-checkbox-secondary-color-active);color:var(--bcm-checkbox-secondary-color-active);border-color:var(--bcm-checkbox-primary-color-active)}.bcm-checkbox:active .bcm-checkbox__label-icon-checked,.bcm-checkbox:active .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-new-ds-color-white);background-color:var(--bcm-checkbox-primary-color-active);border-color:var(--bcm-checkbox-primary-color-active)}.bcm-checkbox:active .bcm-checkbox__label-icon-checked.bcm-radio__icon,.bcm-checkbox:active .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon{border-color:var(--bcm-checkbox-primary-color-active);background-color:var(--bcm-checkbox-secondary-color-active)}.bcm-checkbox:active .bcm-checkbox__label-icon-checked.bcm-radio__icon .bcm-radio__icon-inner,.bcm-checkbox:active .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon .bcm-radio__icon-inner{background-color:var(--bcm-checkbox-primary-color-active)}.bcm-checkbox:active .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-checkbox-primary-color-active)}.bcm-checkbox[disabled] .bcm-checkbox__label-icon,.bcm-checkbox.disabled .bcm-checkbox__label-icon{background:var(--bcm-checkbox-secondary-color-disabled);color:var(--bcm-checkbox-secondary-color-disabled);border-color:var(--bcm-checkbox-primary-color-disabled)}.bcm-checkbox[disabled] .bcm-checkbox__label-icon-checked,.bcm-checkbox[disabled] .bcm-checkbox__label-icon-indeterminate,.bcm-checkbox.disabled .bcm-checkbox__label-icon-checked,.bcm-checkbox.disabled .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-new-ds-color-white);background-color:var(--bcm-checkbox-primary-color-disabled);border-color:var(--bcm-checkbox-primary-color-disabled)}.bcm-checkbox[disabled] .bcm-checkbox__label-icon-checked.bcm-radio__icon,.bcm-checkbox[disabled] .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon,.bcm-checkbox.disabled .bcm-checkbox__label-icon-checked.bcm-radio__icon,.bcm-checkbox.disabled .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon{border-color:var(--bcm-checkbox-primary-color-disabled);background-color:var(--bcm-checkbox-secondary-color-disabled)}.bcm-checkbox[disabled] .bcm-checkbox__label-icon-checked.bcm-radio__icon .bcm-radio__icon-inner,.bcm-checkbox[disabled] .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon .bcm-radio__icon-inner,.bcm-checkbox.disabled .bcm-checkbox__label-icon-checked.bcm-radio__icon .bcm-radio__icon-inner,.bcm-checkbox.disabled .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon .bcm-radio__icon-inner{background-color:var(--bcm-checkbox-primary-color-disabled)}.bcm-checkbox[disabled] .bcm-checkbox__label-icon-indeterminate,.bcm-checkbox.disabled .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-checkbox-primary-color-disabled)}.bcm-checkbox[no-margin] .bcm-checkbox__input{margin:0;min-height:0;padding:0}";
+const CheckboxTemplate = ({ disabled, checked, readonly, required, indeterminate, hidden, captionType, _id }) => {
+  const { inputContainer, labelContainer, input, checkmark } = checkboxStyle({
+    size: "medium",
+    error: captionType === Bcm$1.Status.error,
+    disabled,
+    hidden,
+    readonly,
+    indeterminate: indeterminate === Bcm$1.IndeterminateType.indeterminate,
+    checked: checked || indeterminate === Bcm$1.IndeterminateType.indeterminate,
+    noMargin: true
+  });
+  return (h$2("div", { class: inputContainer() },
+    h$2("input", { tabindex: "-1", id: _id, type: "checkbox", checked: checked, disabled: disabled, required: required, readonly: readonly, class: input() }),
+    h$2("label", { class: labelContainer(), htmlFor: _id },
+      h$2("span", { class: checkmark() }, indeterminate === Bcm$1.IndeterminateType.indeterminate
+        ? h$2("i", { class: "fa-sharp fa-regular fa-minus" })
+        : h$2("i", { class: "fa-sharp fa-regular fa-check" })))));
+};
+
+const InfoFooterTemplate = ({ selected, total, found, multiple, variableText }) => {
+  total = total || 0;
+  variableText = variableText ? pluralize(variableText, total) : 'items';
+  return (h$2("footer", { class: "bcm-info-footer" },
+    (multiple && selected > 0) && ` ( ${selected} selected ) `,
+    ` Total ${total} `,
+    found != null && ` / ${found} `,
+    ` ${variableText} found. `));
+};
 
-var __decorate$a = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-  if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
-    r = Reflect.decorate(decorators, target, key, desc);
-  else
-    for (var i = decorators.length - 1; i >= 0; i--)
-      if (d = decorators[i])
-        r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-  return c > 3 && r && Object.defineProperty(target, key, r), r;
+const ListItemTemplate = ({ item, treeview, highlight, checkboxes, size, selectedItem, openGroup, checkedItem, focusItem, searchIsOnlyChilds }) => {
+  const isHaveChildren = item.items && item.items.length > 0;
+  var text = StringHelper.htmlEntities(item.text);
+  let intersection = [];
+  if (highlight && StringHelper.slugify(text).includes(StringHelper.slugify(highlight))) {
+    if (!searchIsOnlyChilds || (searchIsOnlyChilds && (!isHaveChildren || (!treeview && item.type != "group")))) {
+      text = StringHelper.highlight(text, highlight);
+    }
+  }
+  if (item.type != 'group' && item.template) {
+    const match = item.template
+      .replace(/\s/g, '')
+      .match(/\{{[^}}]+\}/g)
+      .map(x => x.replace(/[{}]/g, ''));
+    const keys = Object.keys(item.itemObject);
+    intersection = match.filter(x => keys.includes(x));
+  }
+  text = item.isHtmlContent ? item.isHtmlContent : item.template && intersection.length > 0 ? StringHelper.templateParser(item.template, Object.assign(Object.assign({}, item.itemObject), { text })) : text;
+  const domText = item.template ? text : Generate.domParser(text);
+  const unClickable = !treeview && item.type == "group" && !item.clickable;
+  const disabled = item.disabled;
+  const readonly = item.readonly;
+  const itemClick = (event) => {
+    let path = event.path || event.composedPath();
+    if (path.filter(x => x.attributes && x.attributes.getNamedItem("unlinked"))[0]) {
+      return;
+    }
+    // if (readonly) {
+    //     collapseClick();
+    // }
+    !unClickable && !disabled && !readonly && (checkboxes ? checkedItem(item.id) : selectedItem(item.id));
+  };
+  const collapseClick = (e) => {
+    // if (disabled) {
+    //     return;
+    // }
+    e.stopPropagation();
+    item.open = item.isSearching;
+    openGroup(item.id);
+  };
+  return (h$2("div", { id: item.id, hidden: item.hidden, "on-focus": e => !unClickable && !disabled && focusItem(e), tabIndex: unClickable || disabled ? -1 : 0, class: classnames('bcm-list__item', 
+    // size === 'large' ? 'size-3' : 'size-2',
+    'bcm-list__item-' + size, {
+      'bcm-list__item--group': !treeview && item.type == 'group',
+      'bcm-list__item--readonly': readonly,
+    }) },
+    h$2("div", { class: classnames('bcm-list__item-content', !checkboxes && item.selected && 'selected', { disabled, readonly }), onClick: (e) => itemClick(e) },
+      treeview && (h$2("div", { class: "bcm-list__item-content-collapse-icon", onClick: (e) => isHaveChildren && collapseClick(e) }, isHaveChildren && h$2("i", { class: classnames('fa-regular fa-angle-' + (item.isSearching || item.open ? 'down' : 'right')) }))),
+      h$2("div", { class: classnames('bcm-list__item-content-text', { treeview }) },
+        checkboxes && (treeview || (!treeview && item.type != 'group')) && (h$2("div", { class: "bcm-list__item-content-text-checkbox" },
+          h$2(CheckboxTemplate, { indeterminate: item.indeterminate, checked: item.checked, disabled: item.disabled }))),
+        h$2("span", Object.assign({ class: "bcm-list__item-content-text-inner" }, (item.title && { "title": item.title }), { innerHTML: domText })))),
+    (treeview || !treeview && item.type == "group") && isHaveChildren && (h$2("div", { class: "bcm-list__item-childs" }, (item.isSearching || item.open || (!treeview && item.type == "group")) &&
+      item.items.map((item) => (h$2(ListItemTemplate, { highlight: highlight, item: item, searchIsOnlyChilds: searchIsOnlyChilds, treeview: treeview, checkboxes: checkboxes, size: size, selectedItem: selectedItem, checkedItem: checkedItem, openGroup: parentId => openGroup(parentId), focusItem: itemId => focusItem(itemId) })))))));
+};
+
+const ListTemplate = ({ type, highlight, selectAllItem, bcmListContainer, treeview, checkboxes, checkAll, infoFooter, value, totalData, searchFound, variableText, _id, tempId, data, width, height, size, searchPlaceholder, minSearchLength, selectedItem, openGroup, checkedItem, onScrollEvent, focusItem, items, searchable, searchIsOnlyChilds, emptyText, emptyIcon, handleTransitionEnd, }) => {
+  const showSelectAll = !(treeview && searchFound > 0) && !(searchFound > 0);
+  const setScrollHeight = () => {
+    const itemHeight = size === 'small' ? 28 : size === 'medium' ? 36 : 48;
+    const itemCount = searchFound == null ? (treeview ? items.length : totalData) : searchFound;
+    const scrollHeight = itemCount * itemHeight || 0;
+    return Object.assign(Object.assign({ 'min-height': `${scrollHeight}px` }, (type === 'select' && { 'overscroll-behavior': 'none' })), { 'height': '100%', 'display': 'flex', 'flex-direction': 'column' });
+  };
+  return (h$2("div", { id: `bcm-list-${_id}`, class: bcmListContainer, "temp-id": `bcm-list-${tempId}`, style: { '--height': height, '--width': width }, onTransitionEnd: e => handleTransitionEnd(e) },
+    data && searchable && (h$2("section", { class: "bcm-list__container-search" },
+      h$2("bcm-search", { size: size, id: `bcm-list-${_id}-search`, data: data, clearable: true, placeholder: searchPlaceholder, "min-search-length": minSearchLength, searchIsOnlyChilds: searchIsOnlyChilds }))),
+    h$2("main", { onScroll: e => onScrollEvent(e), class: "scrolling", style: Object.assign({}, (type === 'select' && { 'overscroll-behavior': 'none' })) },
+      h$2("div", { style: setScrollHeight() },
+        checkAll && searchFound != 0 && items && items.length > 0 && checkboxes && showSelectAll && (h$2("section", { class: "bcm-list__container-select-all" },
+          h$2(ListItemTemplate, { size: size, item: selectAllItem, treeview: false, checkboxes: true, selectedItem: itemId => selectedItem(itemId), checkedItem: itemId => checkedItem(itemId), openGroup: parentId => openGroup(parentId), focusItem: itemId => focusItem(itemId) }))),
+        items.map((item) => (h$2(ListItemTemplate, { highlight: highlight, size: size, item: item, searchIsOnlyChilds: searchIsOnlyChilds, treeview: treeview, checkboxes: checkboxes, selectedItem: itemId => selectedItem(itemId), checkedItem: itemId => checkedItem(itemId), openGroup: parentId => openGroup(parentId), focusItem: itemId => focusItem(itemId) }))),
+        (!items || items.length === 0) && searchFound != 0 && (h$2("section", { class: "bcm-list__container-no-data" },
+          h$2("bcm-empty", { style: { height: 'auto' }, icon: emptyIcon },
+            h$2("span", { innerHTML: emptyText || 'No data' })))),
+        searchFound == 0 && (h$2("section", { class: "bcm-list__container-no-data" },
+          h$2("bcm-empty", { style: { height: 'auto' }, icon: emptyIcon },
+            h$2("span", { innerHTML: emptyText || 'No Data Found' })))))),
+    infoFooter && data && data.length > 0 && (h$2(InfoFooterTemplate, { selected: value === null || value === void 0 ? void 0 : value.length, total: totalData, found: searchFound, multiple: checkboxes, variableText: variableText }))));
+};
+
+const StepperHeaderTemplate = ({ _title, description, status, valid, index, loading, active, stepChange, statusIcon, icon, disabled, headerHidden, }) => {
+  const classes = classnames('bcm-stepper__header-item', `bcm-stepper__header-item--${status}`, {
+    'bcm-stepper__header-item--active': active,
+    'bcm-stepper__header-item--valid': valid,
+    'bcm-stepper__header-item--invalid': !valid,
+    'bcm-stepper__header-item--disabled': disabled,
+    'hidden': headerHidden,
+  });
+  const defaultIcons = {
+    success: 'fal fa-check',
+    warning: 'fal fa-exclamation-triangle',
+    error: 'fal fa-times',
+  };
+  const customIcon = (icon || (statusIcon && defaultIcons[status])) && h$2("bcm-icon", { icon: icon ? icon : defaultIcons[status] });
+  return (h$2("div", { class: classes },
+    h$2("div", { class: "bcm-stepper__header-item--container", onClick: () => !disabled && stepChange(index) },
+      h$2("div", { class: "bcm-stepper__header-item-icon size-3" }, loading ? h$2("bcm-icon", { icon: "far fa-spinner-third fa-spin" }) : customIcon || index),
+      h$2("div", { class: "bcm-stepper__header-item-title size-2" }, _title),
+      h$2("div", { class: "bcm-stepper__header-item-description size-1 tw-text-center", innerHTML: description }))));
 };
+
+const checkboxCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");.size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}.input-size-large{height:40px}.input-size-medium{height:32px}.input-size-small{height:24px}.resize-none textarea{resize:none}.resize-vertical textarea{resize:vertical}.resize-auto textarea{height:auto;resize:none}.textarea-size-large{padding:4px 0 0 4px;min-height:40px}.textarea-size-large .bcm-input-element{min-height:calc((40px - 8px) + 2px)}.textarea-size-large .input-clear-button{height:calc( 40px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-medium{padding:4px 0 0 4px;min-height:32px}.textarea-size-medium .bcm-input-element{min-height:calc((32px - 8px) + 2px)}.textarea-size-medium .input-clear-button{height:calc( 32px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-small{padding:0px 0 0 4px;min-height:24px}.textarea-size-small .bcm-input-element{min-height:calc((24px - 8px) + 2px)}.textarea-size-small .input-clear-button{height:calc( 24px - 16px );top:8px;padding:0;margin-right:8px}:root{--bcm-checkbox-text:var(--bcm-ui-color-text-default);--bcm-checkbox-border:var(--bcm-ui-color-border-default);--bcm-checkbox-border-hover:var(--bcm-ui-color-border-primary-info);--bcm-checkbox-bg:var(--bcm-ui-color-background-default-default);--bcm-checkbox-bg-hover:var(--bcm-ui-color-background-default-default);--bcm-checkbox-checked-border:var(--bcm-ui-color-background-primary-info-default);--bcm-checkbox-checked-border-hover:var(--bcm-ui-color-background-primary-info-hover);--bcm-checkbox-checked-bg:var(--bcm-ui-color-background-primary-info-default);--bcm-checkbox-checked-bg-hover:var(--bcm-ui-color-background-primary-info-hover)}";
+
 const BcmCheckbox = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
@@ -1224,32 +1510,33 @@ const BcmCheckbox = class {
     this.change = createEvent(this, "bcm-change", 7);
     this.changeCheckbox = createEvent(this, "bcm-change-checkbox", 7);
     this._id = Generate.UID();
-    this.inGroup = false;
     this.value = false;
     this.checked = false;
-    this.name = undefined;
+    this.name = "";
     this.disabled = false;
     this.hidden = false;
     this.required = false;
     this.label = undefined;
     this.readonly = false;
-    this.size = Bcm$1.Size.medium;
-    this.indeterminate = null;
-    this.color = "blue";
+    this.size = Bcm.Size.medium;
+    this.indeterminate = undefined;
+    this.color = undefined;
     this.caption = undefined;
     this.noCaption = false;
     this.captionError = undefined;
-    this.captionType = Bcm$1.Status.default;
-    this.captionCache = undefined;
-    this.captionTypeCache = undefined;
+    this.captionType = Bcm.Status.default;
+    this.noMargin = false;
   }
-  connectedCallback() {
-    this.captionCache = this.caption;
-    this.captionTypeCache = this.captionType;
-    this.value = this.checked;
+  componentDidLoad() {
+    this.caption && (this.captionCache = this.caption);
+    this.captionType && (this.captionTypeCache = this.captionType);
   }
-  componentDidRender() {
+  toggleChecked() {
+    this.checked = !this.checked;
+    this.value = this.checked;
     this.inputElement.checked = this.checked;
+    this.change.emit({ name: this.name, value: this.checked });
+    this.changeCheckbox.emit();
   }
   async onBcmFocus() {
     this.el.focus();
@@ -1258,35 +1545,43 @@ const BcmCheckbox = class {
     this.el.blur();
   }
   async setClear() {
-    this.check(false);
+    this.inputElement.checked = false;
     this.handleChange();
-    await delay$1(10);
     return Promise.resolve();
   }
   async resetCaption() {
-    await delay$1(10);
-    this.caption = this.captionCache;
-    this.captionType = this.captionTypeCache;
-    this.captionError = null;
-    await delay$1(10);
+    if (this.caption !== this.captionCache) {
+      this.caption = this.captionCache;
+    }
+    if (this.captionType !== this.captionTypeCache) {
+      this.captionType = this.captionTypeCache;
+    }
+    if (this.captionError) {
+      this.captionError = undefined;
+    }
     return Promise.resolve();
   }
   handleChange() {
-    this.checked = this.inputElement.checked;
-    this.value = this.checked;
-    if (!this.indeterminate) {
-      this.changeCheckbox.emit();
+    const isChecked = this.inputElement.checked;
+    if (this.checked !== isChecked) {
+      this.checked = isChecked;
+      this.value = isChecked;
       this.change.emit({
         name: this.name,
-        value: this.checked
+        value: isChecked
       });
+      this.changeCheckbox.emit();
     }
   }
-  watchIndeterminate(newValue, oldValue) {
-    if (newValue != oldValue) {
-      this.inputElement.checked = this.indeterminate == Bcm$1.IndeterminateType.determinate ? true : false;
-      this.handleChange();
+  watchIndeterminate(newValue) {
+    if (newValue === Bcm.IndeterminateType.indeterminate) {
+      this.inputElement.indeterminate = true;
+    }
+    else {
+      this.inputElement.checked = newValue === Bcm.IndeterminateType.determinate;
+      this.inputElement.indeterminate = false;
     }
+    this.handleChange();
   }
   async set(data) {
     if (typeof data === 'boolean') {
@@ -1294,63 +1589,55 @@ const BcmCheckbox = class {
     }
   }
   async get() {
-    return this.checked || false;
+    return this.checked;
   }
-  async check(uncheck = true) {
-    this.inputElement.checked = uncheck;
-    this.handleChange();
+  async check(shouldCheck = true) {
+    if (this.checked !== shouldCheck) {
+      this.inputElement.checked = shouldCheck;
+      this.handleChange();
+    }
   }
-  handleKeyUp(ev) {
-    if (ev.keyCode == Bcm$1.KeyCode.space || ev.keyCode == Bcm$1.KeyCode.enter) {
-      if (!this.disabled && !this.readonly) {
-        this.inputElement.checked = !this.inputElement.checked;
-        this.handleChange();
+  handleKeyDown(ev) {
+    if (ev.key === ' ' || ev.key === 'Enter') {
+      if (this.disabled || this.readonly) {
+        ev.stopPropagation();
+        ev.preventDefault();
+        return;
       }
+      this.toggleChecked();
       ev.stopPropagation();
       ev.preventDefault();
-      return false;
     }
   }
   watchChecked() {
-    if (this.checked) {
+    this.value = this.checked;
+    if (this.checked && this.captionType === Bcm.Status.error) {
       this.resetCaption();
     }
-    this.value = this.checked;
-  }
-  setColor(color = this.color) {
-    if (!color)
-      return;
-    const prefix = `--bcm-checkbox`;
-    return {
-      [`${prefix}-primary-color-default`]: ColorHelper.dsColor(color + '-500'),
-      [`${prefix}-primary-color-hover`]: ColorHelper.dsColor(color + '-600'),
-      [`${prefix}-primary-color-focus-visible`]: ColorHelper.dsColor(color + '-800'),
-      [`${prefix}-primary-color-active`]: ColorHelper.dsColor(color + '-700'),
-      // [`${prefix}-primary-color-disabled`]: ColorHelper.dsColor(color + '-300'),
-      [`${prefix}-secondary-color-default`]: ColorHelper.dsColor('white'),
-      [`${prefix}-secondary-color-hover`]: ColorHelper.dsColor('slate-50'),
-      [`${prefix}-secondary-color-focus-visible`]: ColorHelper.dsColor('slate-50'),
-      [`${prefix}-secondary-color-active`]: ColorHelper.dsColor('slate-50'),
-      // [`${prefix}-secondary-color-disabled`]: ColorHelper.dsColor('slate-200')
-    };
   }
   render() {
-    const { label, _id, indeterminate, hidden, disabled, checked, readonly, required, caption, captionError, captionType, noCaption, size } = this;
-    //////
-    const bcmCheckboxClass = classnames('bcm-checkbox', `bcm-checkbox-size-${size}`, {
-      'error': captionType == Bcm$1.Status.error,
-      hidden,
-      checked,
+    const { _id, label, captionType, size, required, checked, disabled, hidden, readonly, indeterminate, noCaption, captionError, caption, noMargin, color } = this;
+    const { host, inputContainer, input, slot, labelContainer, checkmark } = checkboxStyle({
+      size,
+      error: captionType === Bcm.Status.error,
       disabled,
-      required,
+      hidden,
       readonly,
+      indeterminate: indeterminate === Bcm.IndeterminateType.indeterminate,
+      checked: checked || indeterminate === Bcm.IndeterminateType.indeterminate,
+      noMargin
     });
-    const bcmCheckboxIconClass = classnames('bcm-checkbox__label-icon', 'bcm-checkbox__label-icon-lite', 'bcm-checkbox__label-icon-' + indeterminate, {
-      'bcm-checkbox__label-icon-checked': checked,
-    });
-    const bcmCheckboxLabelClass = classnames('bcm-checkbox__label');
-    const bcmCheckboxInputClass = classnames('bcm-checkbox__input');
-    return (h$2(Host, { tabindex: "0", onFocus: () => this.focus.emit(this.el), onBlur: () => this.blur.emit(this.el), style: this.setColor(this.color), class: bcmCheckboxClass, disabled: disabled }, h$2("span", { hidden: true }, h$2("slot", null)), label && h$2("bcm-label", { htmlFor: `input-${_id}`, type: captionType, value: label, required: required }), h$2("div", { class: bcmCheckboxInputClass }, h$2("input", { id: `input-${_id}`, type: "checkbox", checked: checked, disabled: disabled, required: required, readonly: readonly, onChange: () => { !disabled && !readonly && (this.handleChange()); }, ref: el => (this.inputElement = el) }), h$2("label", { class: bcmCheckboxLabelClass, htmlFor: `input-${_id}` }, h$2("span", { class: bcmCheckboxIconClass }, h$2("bcm-icon", { icon: "far fa-check" })), h$2(SlotTemplate, { className: "slot" }))), h$2(CaptionTemplate, { noCaption: noCaption, captionType: captionType, captionError: captionError, caption: caption })));
+    const style = Object.assign({}, color && Generate.getTwColor({
+      color: color,
+      tones: {
+        700: ["border-hover", "checked-bg", "checked-border"],
+        800: ["checked-border-hover", "checked-bg-hover"],
+      },
+      variable: "--bcm-checkbox",
+    }));
+    return (h$2(Host, { tabindex: "0", onFocus: () => this.focus.emit(this.el), onBlur: () => this.blur.emit(this.el), style: style, class: host(), disabled: disabled }, label && h$2("bcm-label", { htmlFor: `input-${_id}`, type: captionType, value: label, required: required }), h$2("div", { class: inputContainer() }, h$2("input", { id: `input-${_id}`, type: "checkbox", checked: checked, disabled: disabled, required: required, readonly: readonly, onChange: () => { !disabled && !readonly && (this.handleChange()); }, ref: el => (this.inputElement = el), class: input() }), h$2("label", { class: labelContainer(), htmlFor: `input-${_id}` }, h$2("span", { class: checkmark() }, indeterminate === Bcm.IndeterminateType.indeterminate
+      ? h$2("i", { class: "fa-sharp fa-regular fa-minus" })
+      : h$2("i", { class: "fa-sharp fa-regular fa-check" })), h$2("span", { class: slot() }, h$2("slot", null)))), h$2(CaptionTemplate, { noCaption: noCaption, captionType: captionType, captionError: captionError, caption: caption })));
   }
   get el() { return getElement(this); }
   static get watchers() { return {
@@ -1358,10 +1645,191 @@ const BcmCheckbox = class {
     "checked": ["watchChecked"]
   }; }
 };
-__decorate$a([
-  IsLoad()
-], BcmCheckbox.prototype, "el", void 0);
-BcmCheckbox.style = checkboxCss$1;
+BcmCheckbox.style = checkboxCss;
+
+const appendToMap = (map, propName, value) => {
+    const items = map.get(propName);
+    if (!items) {
+        map.set(propName, [value]);
+    }
+    else if (!items.includes(value)) {
+        items.push(value);
+    }
+};
+const debounce = (fn, ms) => {
+    let timeoutId;
+    return (...args) => {
+        if (timeoutId) {
+            clearTimeout(timeoutId);
+        }
+        timeoutId = setTimeout(() => {
+            timeoutId = 0;
+            fn(...args);
+        }, ms);
+    };
+};
+
+/**
+ * Check if a possible element isConnected.
+ * The property might not be there, so we check for it.
+ *
+ * We want it to return true if isConnected is not a property,
+ * otherwise we would remove these elements and would not update.
+ *
+ * Better leak in Edge than to be useless.
+ */
+const isConnected = (maybeElement) => !('isConnected' in maybeElement) || maybeElement.isConnected;
+const cleanupElements = debounce((map) => {
+    for (let key of map.keys()) {
+        map.set(key, map.get(key).filter(isConnected));
+    }
+}, 2000);
+const stencilSubscription = () => {
+    if (typeof getRenderingRef !== 'function') {
+        // If we are not in a stencil project, we do nothing.
+        // This function is not really exported by @stencil/core.
+        return {};
+    }
+    const elmsToUpdate = new Map();
+    return {
+        dispose: () => elmsToUpdate.clear(),
+        get: (propName) => {
+            const elm = getRenderingRef();
+            if (elm) {
+                appendToMap(elmsToUpdate, propName, elm);
+            }
+        },
+        set: (propName) => {
+            const elements = elmsToUpdate.get(propName);
+            if (elements) {
+                elmsToUpdate.set(propName, elements.filter(forceUpdate));
+            }
+            cleanupElements(elmsToUpdate);
+        },
+        reset: () => {
+            elmsToUpdate.forEach((elms) => elms.forEach(forceUpdate));
+            cleanupElements(elmsToUpdate);
+        },
+    };
+};
+
+const createObservableMap = (defaultState, shouldUpdate = (a, b) => a !== b) => {
+    let states = new Map(Object.entries(defaultState !== null && defaultState !== void 0 ? defaultState : {}));
+    const handlers = {
+        dispose: [],
+        get: [],
+        set: [],
+        reset: [],
+    };
+    const reset = () => {
+        states = new Map(Object.entries(defaultState !== null && defaultState !== void 0 ? defaultState : {}));
+        handlers.reset.forEach((cb) => cb());
+    };
+    const dispose = () => {
+        // Call first dispose as resetting the state would
+        // cause less updates ;)
+        handlers.dispose.forEach((cb) => cb());
+        reset();
+    };
+    const get = (propName) => {
+        handlers.get.forEach((cb) => cb(propName));
+        return states.get(propName);
+    };
+    const set = (propName, value) => {
+        const oldValue = states.get(propName);
+        if (shouldUpdate(value, oldValue, propName)) {
+            states.set(propName, value);
+            handlers.set.forEach((cb) => cb(propName, value, oldValue));
+        }
+    };
+    const state = (typeof Proxy === 'undefined'
+        ? {}
+        : new Proxy(defaultState, {
+            get(_, propName) {
+                return get(propName);
+            },
+            ownKeys(_) {
+                return Array.from(states.keys());
+            },
+            getOwnPropertyDescriptor() {
+                return {
+                    enumerable: true,
+                    configurable: true,
+                };
+            },
+            has(_, propName) {
+                return states.has(propName);
+            },
+            set(_, propName, value) {
+                set(propName, value);
+                return true;
+            },
+        }));
+    const on = (eventName, callback) => {
+        handlers[eventName].push(callback);
+        return () => {
+            removeFromArray(handlers[eventName], callback);
+        };
+    };
+    const onChange = (propName, cb) => {
+        const unSet = on('set', (key, newValue) => {
+            if (key === propName) {
+                cb(newValue);
+            }
+        });
+        const unReset = on('reset', () => cb(defaultState[propName]));
+        return () => {
+            unSet();
+            unReset();
+        };
+    };
+    const use = (...subscriptions) => {
+        const unsubs = subscriptions.reduce((unsubs, subscription) => {
+            if (subscription.set) {
+                unsubs.push(on('set', subscription.set));
+            }
+            if (subscription.get) {
+                unsubs.push(on('get', subscription.get));
+            }
+            if (subscription.reset) {
+                unsubs.push(on('reset', subscription.reset));
+            }
+            if (subscription.dispose) {
+                unsubs.push(on('dispose', subscription.dispose));
+            }
+            return unsubs;
+        }, []);
+        return () => unsubs.forEach((unsub) => unsub());
+    };
+    const forceUpdate = (key) => {
+        const oldValue = states.get(key);
+        handlers.set.forEach((cb) => cb(key, oldValue, oldValue));
+    };
+    return {
+        state,
+        get,
+        set,
+        on,
+        onChange,
+        use,
+        dispose,
+        reset,
+        forceUpdate,
+    };
+};
+const removeFromArray = (array, item) => {
+    const index = array.indexOf(item);
+    if (index >= 0) {
+        array[index] = array[array.length - 1];
+        array.length--;
+    }
+};
+
+const createStore = (defaultState, shouldUpdate) => {
+    const map = createObservableMap(defaultState, shouldUpdate);
+    map.use(stencilSubscription());
+    return map;
+};
 
 const { state: state$3 } = createStore({
   group: new Map(),
@@ -1556,15 +2024,43 @@ const checkBoxGroupState = {
   changeIndeterminate,
 };
 
-const CheckboxGroupTemplate = ({ customStyle, groupContainerClasses, onBcmSelect, items }) => {
-  return (h$2("div", { class: groupContainerClasses, style: customStyle }, items.childs && items.childs.map((checkbox) => {
-    return (h$2("bcm-checkbox", { id: checkbox.id, name: checkbox.name, color: checkbox.color, checked: checkbox.checked, disabled: checkbox.disabled, readonly: checkbox.readonly, required: checkbox.required, noCaption: checkbox.noCaption, "no-margin": true, size: checkbox.size, "full-width": checkbox.fullWidth, onClick: (e) => { !checkbox.disabled && !checkbox.readonly && (onBcmSelect(checkbox.id), e.preventDefault()); } }, checkbox.slot || checkbox.label));
-  })));
-};
-
-const groupCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");.size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}.input-size-large{height:40px}.input-size-medium{height:32px}.input-size-small{height:24px}.resize-none textarea{resize:none}.resize-vertical textarea{resize:vertical}.resize-auto textarea{height:auto;resize:none}.textarea-size-large{padding:4px 0 0 4px;min-height:40px}.textarea-size-large .bcm-input-element{min-height:calc((40px - 8px) + 2px)}.textarea-size-large .input-clear-button{height:calc( 40px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-medium{padding:4px 0 0 4px;min-height:32px}.textarea-size-medium .bcm-input-element{min-height:calc((32px - 8px) + 2px)}.textarea-size-medium .input-clear-button{height:calc( 32px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-small{padding:0px 0 0 4px;min-height:24px}.textarea-size-small .bcm-input-element{min-height:calc((24px - 8px) + 2px)}.textarea-size-small .input-clear-button{height:calc( 24px - 16px );top:8px;padding:0;margin-right:8px}.bcm-checkbox-group{display:flex;flex-direction:column;align-items:flex-start;width:100%;margin-bottom:8px}.bcm-checkbox-group.hidden{display:none}.bcm-checkbox-group__container{display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:flex-start;width:100%}.bcm-checkbox-group__container.full-width{max-width:100%}.bcm-checkbox-group__container.vertical{gap:8px;flex-direction:column}.bcm-checkbox-group__container.button{gap:unset}.bcm-checkbox-group__container.indeterminate{padding-top:8px;margin-top:8px;border-top:1px solid #efefef}";
+const checkboxGroupStyle = ce({
+  slots: {
+    host: [
+      "bcm-checkbox-group",
+      "bcm-ui-element bcm-ui-inputs",
+      "tw-flex tw-flex-col tw-items-start tw-w-full",
+      "tw-mb-2 tw-gap-1",
+    ],
+    checkboxGroupContainer: [
+      "bcm-checkbox-group__container",
+      "tw-flex tw-w-full",
+      "tw-items-start tw-justify-start",
+    ],
+  },
+  variants: {
+    direction: {
+      vertical: {
+        checkboxGroupContainer: ["tw-flex-col tw-gap-2"],
+      },
+      horizontal: {
+        checkboxGroupContainer: ["tw-flex-row tw-gap-2.5"],
+      },
+    },
+    indeterminate: {
+      true: {
+        checkboxGroupContainer: ["indeterminate tw-pt-2 tw-border-0 tw-border-t tw-border-solid tw-border-color"],
+      }
+    },
+  },
+  defaultVariants: {
+    direction: "vertical",
+    fullWidth: false,
+    indeterminate: false,
+  },
+});
 
-var __decorate$9 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$a = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
     r = Reflect.decorate(decorators, target, key, desc);
@@ -1732,96 +2228,121 @@ const BcmCheckboxGroup = class {
   }
   render() {
     const items = this.getItems();
-    const { disabled, captionType, label, indeterminate, indeterminateState, required, direction, optionType, hidden, fullWidth, gap } = items;
-    const bcmChechboxGroup = classnames('bcm-checkbox-group', direction, optionType, {
-      hidden,
-      'full-width': fullWidth
-    });
-    const bcmChechboxGroupContainer = classnames('bcm-checkbox-group__container', optionType, {
-      [direction]: optionType === 'default',
-      indeterminate,
-      hidden,
-      'full-width': fullWidth
+    const { disabled, captionType, label, indeterminate, indeterminateState, required, direction, gap } = items;
+    const { host, checkboxGroupContainer } = checkboxGroupStyle({
+      direction,
+      indeterminate
     });
-    return (h$2(Host, { class: bcmChechboxGroup }, h$2("span", { hidden: true, id: `bcm-checkbox-group__items-${this._id}` }, h$2("slot", null)), h$2("div", { class: "bcm-checkbox-group__label" }, label &&
-      h$2("div", null, h$2(LabelTemplate, { size: this.size, type: captionType, value: label, required: required }))), indeterminate &&
-      h$2("bcm-checkbox", { onClick: (e) => { this.indeterminateClick(), e.preventDefault(); }, "no-caption": true, "no-margin": true, id: "bcm-indeterminate-element", indeterminate: indeterminateState, disabled: disabled }, "Check All"), h$2(CheckboxGroupTemplate, { items: items, groupContainerClasses: bcmChechboxGroupContainer, customStyle: gap && ({ 'gap': gap }), onBcmSelect: (id) => this.changeCheckBox(id) })));
+    return (h$2(Host, { class: host() }, h$2("span", { hidden: true, id: `bcm-checkbox-group__items-${this._id}` }, h$2("slot", null)), label && h$2("bcm-label", { type: captionType, value: label, required: required }), indeterminate &&
+      h$2("bcm-checkbox", { onClick: (e) => { this.indeterminateClick(), e.preventDefault(); }, "no-caption": true, "no-margin": true, id: "bcm-indeterminate-element", indeterminate: indeterminateState, disabled: disabled }, "Check All"), h$2("div", { class: checkboxGroupContainer(), style: gap && ({ 'gap': gap }) }, items.childs && items.childs.map((checkbox) => {
+      return (h$2("bcm-checkbox", { id: checkbox.id, name: checkbox.name, color: checkbox.color, checked: checkbox.checked, disabled: checkbox.disabled, readonly: checkbox.readonly, required: checkbox.required, noCaption: checkbox.noCaption, "no-margin": true, size: checkbox.size, "full-width": checkbox.fullWidth, onClick: (e) => { !checkbox.disabled && !checkbox.readonly && (this.changeCheckBox(checkbox.id), e.preventDefault()); } }, checkbox.slot || checkbox.label));
+    }))));
   }
   get el() { return getElement(this); }
   static get watchers() { return {
     "items": ["handleItemsChange"]
   }; }
 };
-__decorate$9([
+__decorate$a([
   IsLoad()
 ], BcmCheckboxGroup.prototype, "el", void 0);
-BcmCheckboxGroup.style = groupCss;
-
-const checkboxCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap\"); .size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}.input-size-large{height:40px}.input-size-medium{height:32px}.input-size-small{height:24px}.resize-none textarea{resize:none}.resize-vertical textarea{resize:vertical}.resize-auto textarea{height:auto;resize:none}.textarea-size-large{padding:4px 0 0 4px;min-height:40px}.textarea-size-large .bcm-input-element{min-height:calc((40px - 8px) + 2px)}.textarea-size-large .input-clear-button{height:calc( 40px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-medium{padding:4px 0 0 4px;min-height:32px}.textarea-size-medium .bcm-input-element{min-height:calc((32px - 8px) + 2px)}.textarea-size-medium .input-clear-button{height:calc( 32px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-small{padding:0px 0 0 4px;min-height:24px}.textarea-size-small .bcm-input-element{min-height:calc((24px - 8px) + 2px)}.textarea-size-small .input-clear-button{height:calc( 24px - 16px );top:8px;padding:0;margin-right:8px}*{box-sizing:border-box}.bcm-checkbox{outline:none;border:none;--bcm-checkbox-primary-color-default:var(--bcm-new-ds-color-blue-500);--bcm-checkbox-secondary-color-default:var(--bcm-new-ds-color-white);--bcm-checkbox-primary-color-hover:var(--bcm-new-ds-color-blue-600);--bcm-checkbox-secondary-color-hover:var(--bcm-new-ds-color-slate-50);--bcm-checkbox-primary-color-focus-visible:var(--bcm-new-ds-color-blue-800);--bcm-checkbox-secondary-color-focus-visible:var(--bcm-new-ds-color-slate-50);--bcm-checkbox-primary-color-active:var(--bcm-new-ds-color-blue-700);--bcm-checkbox-secondary-color-active:var(--bcm-new-ds-color-slate-50);--bcm-checkbox-primary-color-disabled:var(--bcm-new-ds-color-slate-300);--bcm-checkbox-secondary-color-disabled:var(--bcm-new-ds-color-slate-200);display:inline-flex;width:fit-content;flex-direction:column;margin-bottom:8px}.bcm-checkbox:focus,.bcm-checkbox:hover,.bcm-checkbox:active{outline:none;border:none}.bcm-checkbox *{box-sizing:border-box}.bcm-checkbox input[type=radio],.bcm-checkbox input[type=checkbox]{-webkit-appearance:none;appearance:none;background-color:#fff;margin:0;display:none}.bcm-checkbox__input{display:flex;flex-direction:row;align-items:flex-start;justify-content:flex-start;flex-wrap:nowrap;padding-top:4px}.bcm-checkbox.hidden{display:none}.bcm-checkbox :hover{cursor:pointer}.bcm-checkbox[disabled] :hover,.bcm-checkbox.disabled :hover{cursor:not-allowed}.bcm-checkbox .slot{font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;font-weight:500;color:var(--bcm-new-ds-color-slate-600)}.bcm-checkbox .slot:not(:empty){margin-left:8px;margin-right:8px}.bcm-checkbox-size-small .slot{font-size:12px;line-height:calc(12px + 8px);margin-top:-2.5px}.bcm-checkbox-size-small .bcm-checkbox__input{min-height:calc(24px - 4px)}.bcm-checkbox-size-small .bcm-checkbox__label-icon{width:14px;height:14px;min-width:14px;font-size:calc(10px - 2px)}.bcm-checkbox-size-medium .slot{font-size:calc(12px + 1px);line-height:calc(12px + 8px);margin-top:-1.5px}.bcm-checkbox-size-medium .bcm-checkbox__input{min-height:calc(32px - 4px)}.bcm-checkbox-size-medium .bcm-checkbox__label-icon{width:16px;height:16px;min-width:16px;font-size:10px}.bcm-checkbox-size-large .slot{font-size:16px;line-height:calc(16px + 8px);margin-top:-1.5px}.bcm-checkbox-size-large .bcm-checkbox__input{min-height:calc(32px - 4px)}.bcm-checkbox-size-large .bcm-checkbox__label-icon{width:18px;height:18px;min-width:18px;font-size:12px}.bcm-checkbox__label{display:flex;flex-direction:row;align-items:flex-start;justify-content:flex-start;flex-wrap:nowrap}.bcm-checkbox__label-icon{display:flex;flex-direction:column;align-items:center;justify-content:center;flex-wrap:nowrap;border-width:1px;border-style:solid;border-radius:2px}.bcm-checkbox__label-icon-indeterminate{position:relative}.bcm-checkbox__label-icon-indeterminate:after{content:\"\";display:block;position:absolute;width:70%;height:1.5px;background:var(--bcm-new-ds-color-white)}.bcm-checkbox__label-icon.bcm-radio__icon{width:16px;height:16px;box-sizing:border-box;border-radius:100px}.bcm-checkbox__label-icon.bcm-radio__icon .bcm-radio__icon-inner{width:10px;height:10px;border-radius:100px;background-color:var(--bcm-new-ds-color-white)}.bcm-checkbox .bcm-checkbox__label-icon{background:var(--bcm-checkbox-secondary-color-default);color:var(--bcm-checkbox-secondary-color-default);border-color:var(--bcm-new-ds-color-slate-300)}.bcm-checkbox .bcm-checkbox__label-icon-checked,.bcm-checkbox .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-new-ds-color-white);background-color:var(--bcm-checkbox-primary-color-default);border-color:var(--bcm-checkbox-primary-color-default)}.bcm-checkbox .bcm-checkbox__label-icon-checked.bcm-radio__icon,.bcm-checkbox .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon{border-color:var(--bcm-checkbox-primary-color-default);background-color:var(--bcm-checkbox-secondary-color-default)}.bcm-checkbox .bcm-checkbox__label-icon-checked.bcm-radio__icon .bcm-radio__icon-inner,.bcm-checkbox .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon .bcm-radio__icon-inner{background-color:var(--bcm-checkbox-primary-color-default)}.bcm-checkbox .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-checkbox-primary-color-default)}.bcm-checkbox:hover .bcm-checkbox__label-icon{background:var(--bcm-checkbox-secondary-color-hover);color:var(--bcm-checkbox-secondary-color-hover);border-color:var(--bcm-checkbox-primary-color-hover)}.bcm-checkbox:hover .bcm-checkbox__label-icon-checked,.bcm-checkbox:hover .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-new-ds-color-white);background-color:var(--bcm-checkbox-primary-color-hover);border-color:var(--bcm-checkbox-primary-color-hover)}.bcm-checkbox:hover .bcm-checkbox__label-icon-checked.bcm-radio__icon,.bcm-checkbox:hover .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon{border-color:var(--bcm-checkbox-primary-color-hover);background-color:var(--bcm-checkbox-secondary-color-hover)}.bcm-checkbox:hover .bcm-checkbox__label-icon-checked.bcm-radio__icon .bcm-radio__icon-inner,.bcm-checkbox:hover .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon .bcm-radio__icon-inner{background-color:var(--bcm-checkbox-primary-color-hover)}.bcm-checkbox:hover .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-checkbox-primary-color-hover)}.bcm-checkbox:focus-visible .bcm-checkbox__label-icon{background:var(--bcm-checkbox-secondary-color-focus-visible);color:var(--bcm-checkbox-secondary-color-focus-visible);border-color:var(--bcm-checkbox-primary-color-focus-visible)}.bcm-checkbox:focus-visible .bcm-checkbox__label-icon-checked,.bcm-checkbox:focus-visible .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-new-ds-color-white);background-color:var(--bcm-checkbox-primary-color-focus-visible);border-color:var(--bcm-checkbox-primary-color-focus-visible)}.bcm-checkbox:focus-visible .bcm-checkbox__label-icon-checked.bcm-radio__icon,.bcm-checkbox:focus-visible .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon{border-color:var(--bcm-checkbox-primary-color-focus-visible);background-color:var(--bcm-checkbox-secondary-color-focus-visible)}.bcm-checkbox:focus-visible .bcm-checkbox__label-icon-checked.bcm-radio__icon .bcm-radio__icon-inner,.bcm-checkbox:focus-visible .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon .bcm-radio__icon-inner{background-color:var(--bcm-checkbox-primary-color-focus-visible)}.bcm-checkbox:focus-visible .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-checkbox-primary-color-focus-visible)}.bcm-checkbox:active .bcm-checkbox__label-icon{background:var(--bcm-checkbox-secondary-color-active);color:var(--bcm-checkbox-secondary-color-active);border-color:var(--bcm-checkbox-primary-color-active)}.bcm-checkbox:active .bcm-checkbox__label-icon-checked,.bcm-checkbox:active .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-new-ds-color-white);background-color:var(--bcm-checkbox-primary-color-active);border-color:var(--bcm-checkbox-primary-color-active)}.bcm-checkbox:active .bcm-checkbox__label-icon-checked.bcm-radio__icon,.bcm-checkbox:active .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon{border-color:var(--bcm-checkbox-primary-color-active);background-color:var(--bcm-checkbox-secondary-color-active)}.bcm-checkbox:active .bcm-checkbox__label-icon-checked.bcm-radio__icon .bcm-radio__icon-inner,.bcm-checkbox:active .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon .bcm-radio__icon-inner{background-color:var(--bcm-checkbox-primary-color-active)}.bcm-checkbox:active .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-checkbox-primary-color-active)}.bcm-checkbox[disabled] .bcm-checkbox__label-icon,.bcm-checkbox.disabled .bcm-checkbox__label-icon{background:var(--bcm-checkbox-secondary-color-disabled);color:var(--bcm-checkbox-secondary-color-disabled);border-color:var(--bcm-checkbox-primary-color-disabled)}.bcm-checkbox[disabled] .bcm-checkbox__label-icon-checked,.bcm-checkbox[disabled] .bcm-checkbox__label-icon-indeterminate,.bcm-checkbox.disabled .bcm-checkbox__label-icon-checked,.bcm-checkbox.disabled .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-new-ds-color-white);background-color:var(--bcm-checkbox-primary-color-disabled);border-color:var(--bcm-checkbox-primary-color-disabled)}.bcm-checkbox[disabled] .bcm-checkbox__label-icon-checked.bcm-radio__icon,.bcm-checkbox[disabled] .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon,.bcm-checkbox.disabled .bcm-checkbox__label-icon-checked.bcm-radio__icon,.bcm-checkbox.disabled .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon{border-color:var(--bcm-checkbox-primary-color-disabled);background-color:var(--bcm-checkbox-secondary-color-disabled)}.bcm-checkbox[disabled] .bcm-checkbox__label-icon-checked.bcm-radio__icon .bcm-radio__icon-inner,.bcm-checkbox[disabled] .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon .bcm-radio__icon-inner,.bcm-checkbox.disabled .bcm-checkbox__label-icon-checked.bcm-radio__icon .bcm-radio__icon-inner,.bcm-checkbox.disabled .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon .bcm-radio__icon-inner{background-color:var(--bcm-checkbox-primary-color-disabled)}.bcm-checkbox[disabled] .bcm-checkbox__label-icon-indeterminate,.bcm-checkbox.disabled .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-checkbox-primary-color-disabled)}.bcm-checkbox[no-margin] .bcm-checkbox__input{margin:0;min-height:0;padding:0}";
 
-const BcmCheckboxLite = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this._id = Generate.UID();
-    this.checked = true;
-    this.indeterminate = null;
-    this.disabled = false;
-    this.hidden = false;
-    this.required = false;
-    this.readOnly = false;
-    this.captionType = Bcm$1.Status.default;
-  }
-  render() {
-    const { disabled, checked, readOnly, required, indeterminate, hidden, captionType, _id } = this;
-    // const hostClasses = cs(
-    //     'bcm-checkbox',
-    //     'bcm-checkbox__type-default',
-    //     {
-    //         'error': captionType == Bcm.Status.error,
-    //         hidden,
-    //         checked,
-    //         disabled,
-    //         required,
-    //         readOnly,
-    //     }
-    // )
-    // const bcmCheckboxIconClass = cs(
-    //     'bcm-checkbox__icon',
-    //     'bcm-checkbox__icon-lite',
-    //     'bcm-checkbox__icon-' + indeterminate,
-    //     {
-    //         checked
-    //     }
-    // )
-    // const bcmCheckboxLabelClass = cs(
-    //     'bcm-checkbox__label'
-    // )
-    const bcmCheckboxClass = classnames('bcm-checkbox', `bcm-checkbox-size-medium`, {
-      'error': captionType == Bcm$1.Status.error,
-      hidden,
-      checked,
-      disabled,
-      required
-    });
-    const bcmCheckboxIconClass = classnames('bcm-checkbox__label-icon', 'bcm-checkbox__label-icon-lite', 'bcm-checkbox__label-icon-' + indeterminate, {
-      'bcm-checkbox__label-icon-checked': checked,
-    });
-    const bcmCheckboxLabelClass = classnames('bcm-checkbox__label');
-    const bcmCheckboxInputClass = classnames('bcm-checkbox__input');
-    return (h$2(Host, { class: bcmCheckboxClass, style: { 'margin': '0' } }, h$2("div", { class: bcmCheckboxInputClass, style: {
-        'padding-top': '5px'
-      } }, h$2("input", { id: _id, type: "checkbox", checked: checked, disabled: disabled, required: required, readOnly: readOnly }), h$2("label", { class: bcmCheckboxLabelClass, htmlFor: _id }, h$2("span", { class: bcmCheckboxIconClass }, h$2("div", { style: {
-        'height': '12px',
-        'min-height': '12px',
-        'width': '12px',
-        'min-width': '12px'
-      } }, h$2("svg", { class: "bcm-icon-lite", width: "100%", height: "100%", viewBox: "0 0 11 9", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h$2("path", { d: "M1.91308 4.03516H1.91326C1.99256 4.03525 2.07081 4.05331 2.14213 4.08798C2.21341 4.12262 2.27591 4.17295 2.32497 4.2352L1.91308 4.03516ZM1.91308 4.03516H1.09394C0.890308 4.03516 0.776602 4.26975 0.902321 4.4292L0.902371 4.42927L4.11214 8.49567L4.11218 8.49573C4.32247 8.76188 4.72568 8.76114 4.93667 8.49617L4.93708 8.49566L10.6597 1.24398C10.6598 1.24378 10.66 1.24358 10.6602 1.24338C10.7884 1.08295 10.6699 0.85 10.4689 0.85H9.6498C9.48941 0.85 9.33668 0.9235 9.2376 1.05044C9.23751 1.05055 9.23742 1.05066 9.23734 1.05077L4.52403 7.02157M1.91308 4.03516L4.52403 7.02157M4.52403 7.02157L2.32506 4.23531L4.52403 7.02157Z", fill: "#ffffff" }))))))));
-  }
-  get el() { return getElement(this); }
-};
-BcmCheckboxLite.style = checkboxCss;
+const chipStyle = ce({
+  slots: {
+    base: "",
+    hostStyle: ["bcm-chip bcm-ui-element bcm-ui-action tw-w-fit", "tw-inline-flex tw-items-center tw-gap-1 tw-px-2", "tw-rounded-[--bcm-chip-radius] tw-border tw-border-solid", "tw-outline-none"],
+    avatarStyle: "",
+    actionStyle: "",
+  },
+  variants: {
+    size: {
+      small: {
+        hostStyle: "bcm-chip__size-small tw-text-size-3 tw-leading-none tw-min-h-4",
+        avatarStyle: "!tw-w-3 !tw-h-3",
+      },
+      medium: {
+        hostStyle: "bcm-chip__size-medium tw-text-size-4 tw-py-0.5 tw-leading-none tw-min-h-6",
+        avatarStyle: "!tw-w-4 !tw-h-4",
+      },
+      large: {
+        hostStyle: "bcm-chip__size-large tw-text-size-5 tw-py-1  tw-leading-none tw-min-h-8",
+        avatarStyle: "!tw-w-6 !tw-h-6",
+      },
+    },
+    kind: {
+      filled: {
+        hostStyle: "bcm-chip__kind-filled",
+      },
+      outline: {
+        hostStyle: "bcm-chip__kind-outline",
+      },
+      text: {
+        hostStyle: "bcm-chip__kind-text",
+      },
+    },
+    type: {
+      default: {
+        hostStyle: "bcm-chip__type-default ",
+      },
+      addable: {
+        hostStyle: "bcm-chip__type-addable",
+      },
+      dismissable: {
+        hostStyle: "bcm-chip__type-dismissable",
+      },
+    },
+    avatar: {
+      true: {
+        hostStyle: "bcm-chip--avatar",
+        avatarStyle: "!-tw-ml-1",
+      },
+      false: {},
+    },
+    disabled: {
+      true: {
+        hostStyle: "bcm-chip--disabled disabled tw-cursor-not-allowed",
+      },
+      false: {
+        hostStyle: [
+          "tw-bg-[--bcm-chip-bg] tw-text-[--bcm-chip-text] tw-border-[--bcm-chip-border]",
+          "hover:tw-bg-[--bcm-chip-bg-hover] hover:tw-border-[--bcm-chip-border-hover]",
+          "active:tw-bg-[--bcm-chip-bg-active] active:tw-border-[--bcm-chip-border-active]",
+          "focus-visible:tw-ring",
+        ],
+        actionStyle: [
+          "tw-cursor-pointer",
+          "hover:tw-text-[--bcm-chip-text-hover]",
+          "active:tw-text-[--bcm-chip-text-active]",
+        ],
+      },
+    },
+  },
+  compoundVariants: [
+    {
+      disabled: true,
+      kind: ["filled", "outline"],
+      class: {
+        hostStyle: "tw-bg-color-disabled tw-text-color-disabled tw-border-color-disabled",
+      },
+    },
+    {
+      disabled: true,
+      kind: ["text"],
+      class: {
+        hostStyle: "tw-text-color-disabled tw-border-transparent tw-bg-transparent",
+      },
+    },
+  ],
+  defaultVariants: {
+    size: "medium",
+    disabled: false,
+    type: "default",
+    avatar: false,
+    kind: "filled",
+  },
+});
 
-const chipCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap\"); .size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}.input-size-large{height:40px}.input-size-medium{height:32px}.input-size-small{height:24px}.resize-none textarea{resize:none}.resize-vertical textarea{resize:vertical}.resize-auto textarea{height:auto;resize:none}.textarea-size-large{padding:4px 0 0 4px;min-height:40px}.textarea-size-large .bcm-input-element{min-height:calc((40px - 8px) + 2px)}.textarea-size-large .input-clear-button{height:calc( 40px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-medium{padding:4px 0 0 4px;min-height:32px}.textarea-size-medium .bcm-input-element{min-height:calc((32px - 8px) + 2px)}.textarea-size-medium .input-clear-button{height:calc( 32px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-small{padding:0px 0 0 4px;min-height:24px}.textarea-size-small .bcm-input-element{min-height:calc((24px - 8px) + 2px)}.textarea-size-small .input-clear-button{height:calc( 24px - 16px );top:8px;padding:0;margin-right:8px}*{box-sizing:border-box}.bcm-chip{--bcm-chip-color:var(--bcm-new-ds-color-slate-700);--bcm-chip-color-hover:var(--bcm-new-ds-color-slate-700);--bcm-chip-color-focus:var(--bcm-new-ds-color-slate-700);--bcm-chip-color-active:var(--bcm-new-ds-color-slate-700);--bcm-chip-color-disabled:var(--bcm-new-ds-color-slate-300);--bcm-chip-background-color:var(--bcm-new-ds-color-slate-100);--bcm-chip-background-color-hover:var(--bcm-new-ds-color-slate-200);--bcm-chip-background-color-focus:var(--bcm-new-ds-color-slate-300);--bcm-chip-background-color-active:var(--bcm-new-ds-color-slate-400);--bcm-chip-background-color-disabled:var(--bcm-new-ds-color-slate-100);display:inline-flex;justify-content:center;align-items:center;width:fit-content;height:fit-content;font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;padding:0 8px;gap:4px;color:var(--bcm-chip-color);background-color:var(--bcm-chip-background-color);border-radius:100px;transition:background-color 0.1s ease-in-out;outline:none}.bcm-chip:not(.bcm-chip--disabled):hover{background-color:var(--bcm-chip-background-color-hover)}.bcm-chip:not(.bcm-chip--disabled):focus{background-color:var(--bcm-chip-background-color-focus);color:var(--bcm-chip-color-focus)}.bcm-chip:not(.bcm-chip--disabled):active{background-color:var(--bcm-chip-background-color-active);color:var(--bcm-chip-color-active)}.bcm-chip--disabled{color:var(--bcm-chip-color-disabled);background-color:var(--bcm-chip-background-color-disabled)}.bcm-chip--avatar{padding-left:2px}.bcm-chip__type-dismissable-icon:hover{cursor:pointer;color:var(--bcm-chip-color-active)}.bcm-chip__size-small{font-size:10px;line-height:calc(10px + 8px)}.bcm-chip__size-small .bcm-avatar{width:14px;height:14px}.bcm-chip__size-small .bcm-chip--selected-icon{width:8px}.bcm-chip__size-medium{font-size:12px;line-height:calc(12px + 8px)}.bcm-chip__size-medium .bcm-avatar{width:16px;height:16px}.bcm-chip__size-medium .bcm-chip--selected-icon{width:10px}.bcm-chip__size-large{font-size:14px;line-height:calc(14px + 8px)}.bcm-chip__size-large .bcm-avatar{width:18px;height:18px}.bcm-chip__size-large .bcm-chip--selected-icon{width:12px}";
+const chipCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");.size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}.input-size-large{height:40px}.input-size-medium{height:32px}.input-size-small{height:24px}.resize-none textarea{resize:none}.resize-vertical textarea{resize:vertical}.resize-auto textarea{height:auto;resize:none}.textarea-size-large{padding:4px 0 0 4px;min-height:40px}.textarea-size-large .bcm-input-element{min-height:calc((40px - 8px) + 2px)}.textarea-size-large .input-clear-button{height:calc( 40px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-medium{padding:4px 0 0 4px;min-height:32px}.textarea-size-medium .bcm-input-element{min-height:calc((32px - 8px) + 2px)}.textarea-size-medium .input-clear-button{height:calc( 32px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-small{padding:0px 0 0 4px;min-height:24px}.textarea-size-small .bcm-input-element{min-height:calc((24px - 8px) + 2px)}.textarea-size-small .input-clear-button{height:calc( 24px - 16px );top:8px;padding:0;margin-right:8px}:root{--bcm-chip-text:var(--bcm-ui-color-text-default);--bcm-chip-text-hover:var(--bcm-ui-color-text-default-hover);--bcm-chip-text-active:var(--bcm-ui-color-text-default-active);--bcm-chip-bg:var(--bcm-ui-color-background-default-default);--bcm-chip-bg-hover:var(--bcm-ui-color-background-default-hover);--bcm-chip-bg-active:var(--bcm-ui-color-background-default-active);--bcm-chip-border:var(--bcm-ui-color-background-default-default);--bcm-chip-border-hover:var(--bcm-ui-color-background-default-hover);--bcm-chip-border-active:var(--bcm-ui-color-background-default-active);--bcm-chip-radius:var(--bcm-ui-radius)}";
 
 const BcmChip = class {
   constructor(hostRef) {
@@ -1832,7 +2353,8 @@ const BcmChip = class {
     this.bcmChipSelectItem = createEvent(this, "bcm-chip-select-item", 7);
     this._id = Generate.UID();
     this.type = "default";
-    this.size = "medium";
+    this.kind = "filled";
+    this.size = Bcm.Size.medium;
     this.avatar = undefined;
     this.icon = undefined;
     this.disabled = undefined;
@@ -1841,24 +2363,6 @@ const BcmChip = class {
     this.value = undefined;
     this.data = [];
   }
-  // @ts-ignore
-  setColor() {
-    if (!this.color && !this.selected)
-      return;
-    const color = this.selected ? "indigo" : this.color; // Important: Find a solution for this in V3! ( selected ? this.color : "indigo" )
-    return {
-      "--bcm-chip-color": ColorHelper.dsColor(color + "-700"),
-      "--bcm-chip-color-hover": ColorHelper.dsColor(color + "-700"),
-      "--bcm-chip-color-focus": ColorHelper.dsColor(color + "-700"),
-      "--bcm-chip-color-active": ColorHelper.dsColor(color + "-700"),
-      "--bcm-chip-color-disabled": ColorHelper.dsColor("slate" + "-300"),
-      "--bcm-chip-background-color": ColorHelper.dsColor(color + "-100"),
-      "--bcm-chip-background-color-hover": ColorHelper.dsColor(color + "-200"),
-      "--bcm-chip-background-color-focus": ColorHelper.dsColor(color + "-300"),
-      "--bcm-chip-background-color-active": ColorHelper.dsColor(color + "-200"),
-      "--bcm-chip-background-color-disabled": ColorHelper.dsColor("slate" + "-100"),
-    };
-  }
   handleDismiss(e) {
     e.stopPropagation();
     e.preventDefault();
@@ -1870,7 +2374,6 @@ const BcmChip = class {
     this.bcmChipAddable.emit(this.el);
   }
   listSelectedItems(e) {
-    // To be added to v3
     e.stopPropagation();
     e.preventDefault();
     if (e.detail) {
@@ -1880,14 +2383,48 @@ const BcmChip = class {
     }
   }
   render() {
-    const { type, size, avatar, disabled, color } = this;
-    const hostClasses = classnames("bcm-chip", `bcm-chip__type-${type}`, `bcm-chip__size-${size}`, {
-      "bcm-chip--disabled": disabled,
-      "bcm-chip--avatar": avatar,
+    const { type, size, avatar, disabled, color, kind, selected } = this;
+    const { hostStyle, avatarStyle, actionStyle } = chipStyle({
+      size,
+      disabled,
+      type,
+      kind,
+      avatar: avatar ? true : false,
+    });
+    const tones = {
+      filled: {
+        "700": ["text"],
+        "800": ["text-hover"],
+        "900": ["text-active"],
+        "100": ["bg", "border"],
+        "200": ["bg-hover", "border-hover"],
+        "300": ["bg-active", "border-active"],
+      },
+      outline: {
+        "700": ["text"],
+        "800": ["text-hover"],
+        "900": ["text-active"],
+        "transparent": ["bg"],
+        "200": ["bg-hover"],
+        "300": ["bg-active", "border", "border-hover", "border-active"],
+      },
+      text: {
+        "700": ["text"],
+        "800": ["text-hover"],
+        "900": ["text-active"],
+        "transparent": ["bg", "border"],
+        "200": ["bg-hover", "border-hover"],
+        "300": ["bg-active", "border-active"],
+      },
+    };
+    const dc = Generate.getTwColor({
+      color: selected ? "indigo" : color || "slate",
+      tones: tones[kind],
+      variable: `--bcm-chip`,
     });
-    return (h$2(Host, { class: hostClasses, tabindex: "0", disabled: disabled, style: this.setColor(), onClick: e => this.bcmChipSelect.emit(e) }, h$2("div", { class: classnames(this.selected ? "bcm-chip--selected-icon" : "tw-hidden tw-w-0") }, h$2("bcm-icon", { icon: "fal fa-check" })), avatar && h$2("bcm-avatar", Object.assign({ size: size }, (color && { color }), (avatar && { image: avatar }))), type === "addable" && (h$2("span", { class: "bcm-chip__left" }, h$2("bcm-icon", { onClick: e => this.handleAddable(e), icon: "far fa-plus" }))), h$2("slot", null), type === "dismissable" && (h$2("span", { class: "bcm-chip__type-dismissable-icon" }, h$2("bcm-icon", { onClick: e => this.handleDismiss(e), icon: "fal fa-times" }))), this.data &&
-      this.data.length > 0 && ( // To be added to v3
-    h$2("bcm-list", { "onBcm-change": e => this.listSelectedItems(e), id: this._id + "-list", data: this.data, linkedComponent: this._id, searchable: true, highlight: true }))));
+    const style = Object.assign({}, dc);
+    return (h$2(Host, { class: hostStyle(), tabindex: "0", disabled: disabled, style: style, onClick: e => this.bcmChipSelect.emit(e) }, selected && h$2("i", { class: "fal fa-check" }), avatar && h$2("bcm-avatar", Object.assign({ class: avatarStyle() }, (color && { color }), (avatar && { image: avatar }))), type === "addable" && (h$2("div", { class: actionStyle(), onClick: e => this.handleAddable(e), title: "Add button" }, h$2("i", { class: "far fa-plus" }))), h$2("slot", null), type === "dismissable" && (h$2("div", { class: actionStyle(), onClick: e => this.handleDismiss(e), title: "Dismiss button" }, h$2("i", { class: "fal fa-times" }))), this.data &&
+      this.data.length > 0 && (h$2("bcm-list", { "onBcm-change": e => this.listSelectedItems(e), id: this._id + "-list", data: this.data, linkedComponent: this._id, searchable: true, highlight: true }))));
   }
   get el() { return getElement(this); }
 };
@@ -19159,6 +19696,19 @@ const BcmCollapseGroup = class {
   get el() { return getElement(this); }
 };
 
+const colorInputStyle = ce({
+  slots: {
+    host: [
+      "bcm-color-input",
+      "bcm-ui-element bcm-ui-inputs",
+      "tw-block",
+    ],
+    prefixIcon: "tw-flex tw-h-4 tw-w-4 tw-items-center tw-justify-center tw-rounded-full tw-border tw-border-gray-100",
+  },
+  variants: {},
+  defaultVariants: {},
+});
+
 const BcmColorInput = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
@@ -19205,7 +19755,8 @@ const BcmColorInput = class {
     return typeof window !== "undefined" && "EyeDropper" in window;
   }
   render() {
-    return (h$2(Host, { class: "tw-block" }, h$2("bcm-input", { id: this._id + "-color", fullWidth: this.fullWidth, label: this.label, placeholder: this.placeholder, type: "text", "onBcm-change": e => this.handleInputChanged(e), value: this.value }, h$2("i", { slot: "prefix", class: "tw-flex tw-h-4 tw-w-4 tw-items-center tw-justify-center tw-rounded-full tw-border tw-border-gray-100", style: {
+    const { host, prefixIcon } = colorInputStyle();
+    return (h$2(Host, { class: host() }, h$2("bcm-input", { id: this._id + "-color", fullWidth: this.fullWidth, label: this.label, placeholder: this.placeholder, type: "text", "onBcm-change": e => this.handleInputChanged(e), value: this.value }, h$2("i", { slot: "prefix", class: prefixIcon(), style: {
         backgroundColor: this.value,
       } }), this.isEyeDropperSupported() && h$2("i", { slot: "suffix", class: "far fa-eye-dropper", onClick: () => this.eyeDropper() })), h$2("bcm-linked", { targetId: this._id + "-color-container" }, h$2("bcm-colorful", { id: this._id + "-picker", color: this.value, onBcmChange: e => this.handleChange(e.detail) }))));
   }
@@ -19214,7 +19765,7 @@ const BcmColorInput = class {
 
 function u$1(){return (u$1=Object.assign||function(e){for(var r=1;r<arguments.length;r++){var t=arguments[r];for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n]);}return e}).apply(this,arguments)}function c$1(e,r){if(null==e)return {};var t,n,o={},a=Object.keys(e);for(n=0;n<a.length;n++)r.indexOf(t=a[n])>=0||(o[t]=e[t]);return o}function i(e){var t=react.useRef(e),n=react.useRef(function(e){t.current&&t.current(e);});return t.current=e,n.current}var s=function(e,r,t){return void 0===r&&(r=0),void 0===t&&(t=1),e>t?t:e<r?r:e},f$1=function(e){return "touches"in e},v$1=function(e){return e&&e.ownerDocument.defaultView||self},d$1=function(e,r,t){var n=e.getBoundingClientRect(),o=f$1(r)?function(e,r){for(var t=0;t<e.length;t++)if(e[t].identifier===r)return e[t];return e[0]}(r.touches,t):r;return {left:s((o.pageX-(n.left+v$1(e).pageXOffset))/n.width),top:s((o.pageY-(n.top+v$1(e).pageYOffset))/n.height)}},h$1=function(e){!f$1(e)&&e.preventDefault();},m$1=react.memo(function(o){var a=o.onMove,l=o.onKey,s=c$1(o,["onMove","onKey"]),m=react.useRef(null),g=i(a),p=i(l),b=react.useRef(null),_=react.useRef(!1),x=react.useMemo(function(){var e=function(e){h$1(e),(f$1(e)?e.touches.length>0:e.buttons>0)&&m.current?g(d$1(m.current,e,b.current)):t(!1);},r=function(){return t(!1)};function t(t){var n=_.current,o=v$1(m.current),a=t?o.addEventListener:o.removeEventListener;a(n?"touchmove":"mousemove",e),a(n?"touchend":"mouseup",r);}return [function(e){var r=e.nativeEvent,n=m.current;if(n&&(h$1(r),!function(e,r){return r&&!f$1(e)}(r,_.current)&&n)){if(f$1(r)){_.current=!0;var o=r.changedTouches||[];o.length&&(b.current=o[0].identifier);}n.focus(),g(d$1(n,r,b.current)),t(!0);}},function(e){var r=e.which||e.keyCode;r<37||r>40||(e.preventDefault(),p({left:39===r?.05:37===r?-.05:0,top:40===r?.05:38===r?-.05:0}));},t]},[p,g]),C=x[0],E=x[1],H=x[2];return react.useEffect(function(){return H},[H]),react.createElement("div",u$1({},s,{onTouchStart:C,onMouseDown:C,className:"react-colorful__interactive",ref:m,onKeyDown:E,tabIndex:0,role:"slider"}))}),g$1=function(e){return e.filter(Boolean).join(" ")},p$1=function(r){var t=r.color,n=r.left,o=r.top,a=void 0===o?.5:o,l=g$1(["react-colorful__pointer",r.className]);return react.createElement("div",{className:l,style:{top:100*a+"%",left:100*n+"%"}},react.createElement("div",{className:"react-colorful__pointer-fill",style:{backgroundColor:t}}))},b$1=function(e,r,t){return void 0===r&&(r=0),void 0===t&&(t=Math.pow(10,r)),Math.round(t*e)/t},x=function(e){return L(C(e))},C=function(e){return "#"===e[0]&&(e=e.substring(1)),e.length<6?{r:parseInt(e[0]+e[0],16),g:parseInt(e[1]+e[1],16),b:parseInt(e[2]+e[2],16),a:4===e.length?b$1(parseInt(e[3]+e[3],16)/255,2):1}:{r:parseInt(e.substring(0,2),16),g:parseInt(e.substring(2,4),16),b:parseInt(e.substring(4,6),16),a:8===e.length?b$1(parseInt(e.substring(6,8),16)/255,2):1}},w=function(e){return K(I(e))},y=function(e){var r=e.s,t=e.v,n=e.a,o=(200-r)*t/100;return {h:b$1(e.h),s:b$1(o>0&&o<200?r*t/100/(o<=100?o:200-o)*100:0),l:b$1(o/2),a:b$1(n,2)}},q$1=function(e){var r=y(e);return "hsl("+r.h+", "+r.s+"%, "+r.l+"%)"},I=function(e){var r=e.h,t=e.s,n=e.v,o=e.a;r=r/360*6,t/=100,n/=100;var a=Math.floor(r),l=n*(1-t),u=n*(1-(r-a)*t),c=n*(1-(1-r+a)*t),i=a%6;return {r:b$1(255*[n,u,l,l,c,n][i]),g:b$1(255*[c,n,n,u,l,l][i]),b:b$1(255*[l,l,c,n,n,u][i]),a:b$1(o,2)}},D=function(e){var r=e.toString(16);return r.length<2?"0"+r:r},K=function(e){var r=e.r,t=e.g,n=e.b,o=e.a,a=o<1?D(b$1(255*o)):"";return "#"+D(r)+D(t)+D(n)+a},L=function(e){var r=e.r,t=e.g,n=e.b,o=e.a,a=Math.max(r,t,n),l=a-Math.min(r,t,n),u=l?a===r?(t-n)/l:a===t?2+(n-r)/l:4+(r-t)/l:0;return {h:b$1(60*(u<0?u+6:u)),s:b$1(a?l/a*100:0),v:b$1(a/255*100),a:o}},S=react.memo(function(r){var t=r.hue,n=r.onChange,o=g$1(["react-colorful__hue",r.className]);return react.createElement("div",{className:o},react.createElement(m$1,{onMove:function(e){n({h:360*e.left});},onKey:function(e){n({h:s(t+360*e.left,0,360)});},"aria-label":"Hue","aria-valuenow":b$1(t),"aria-valuemax":"360","aria-valuemin":"0"},react.createElement(p$1,{className:"react-colorful__hue-pointer",left:t/360,color:q$1({h:t,s:100,v:100,a:1})})))}),T=react.memo(function(r){var t=r.hsva,n=r.onChange,o={backgroundColor:q$1({h:t.h,s:100,v:100,a:1})};return react.createElement("div",{className:"react-colorful__saturation",style:o},react.createElement(m$1,{onMove:function(e){n({s:100*e.left,v:100-100*e.top});},onKey:function(e){n({s:s(t.s+100*e.left,0,100),v:s(t.v-100*e.top,0,100)});},"aria-label":"Color","aria-valuetext":"Saturation "+b$1(t.s)+"%, Brightness "+b$1(t.v)+"%"},react.createElement(p$1,{className:"react-colorful__saturation-pointer",top:1-t.v/100,left:t.s/100,color:q$1(t)})))}),F=function(e,r){if(e===r)return !0;for(var t in e)if(e[t]!==r[t])return !1;return !0},X=function(e,r){return e.toLowerCase()===r.toLowerCase()||F(C(e),C(r))};function Y(e,t,l){var u=i(l),c=react.useState(function(){return e.toHsva(t)}),s=c[0],f=c[1],v=react.useRef({color:t,hsva:s});react.useEffect(function(){if(!e.equal(t,v.current.color)){var r=e.toHsva(t);v.current={hsva:r,color:t},f(r);}},[t,e]),react.useEffect(function(){var r;F(s,v.current.hsva)||e.equal(r=e.fromHsva(s),v.current.color)||(v.current={hsva:s,color:r},u(r));},[s,e,u]);var d=react.useCallback(function(e){f(function(r){return Object.assign({},r,e)});},[]);return [s,d]}var V="undefined"!=typeof window?react.useLayoutEffect:react.useEffect,$=function(){return ("undefined"!=typeof __webpack_nonce__?__webpack_nonce__:void 0)},J=new Map,Q=function(e){V(function(){var r=e.current?e.current.ownerDocument:document;if(void 0!==r&&!J.has(r)){var t=r.createElement("style");t.innerHTML='.react-colorful{position:relative;display:flex;flex-direction:column;width:200px;height:200px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default}.react-colorful__saturation{position:relative;flex-grow:1;border-color:transparent;border-bottom:12px solid #000;border-radius:8px 8px 0 0;background-image:linear-gradient(0deg,#000,transparent),linear-gradient(90deg,#fff,hsla(0,0%,100%,0))}.react-colorful__alpha-gradient,.react-colorful__pointer-fill{content:"";position:absolute;left:0;top:0;right:0;bottom:0;pointer-events:none;border-radius:inherit}.react-colorful__alpha-gradient,.react-colorful__saturation{box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}.react-colorful__alpha,.react-colorful__hue{position:relative;height:24px}.react-colorful__hue{background:linear-gradient(90deg,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red)}.react-colorful__last-control{border-radius:0 0 8px 8px}.react-colorful__interactive{position:absolute;left:0;top:0;right:0;bottom:0;border-radius:inherit;outline:none;touch-action:none}.react-colorful__pointer{position:absolute;z-index:1;box-sizing:border-box;width:28px;height:28px;transform:translate(-50%,-50%);background-color:#fff;border:2px solid #fff;border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.2)}.react-colorful__interactive:focus .react-colorful__pointer{transform:translate(-50%,-50%) scale(1.1)}.react-colorful__alpha,.react-colorful__alpha-pointer{background-color:#fff;background-image:url(\'data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill-opacity=".05"><path d="M8 0h8v8H8zM0 8h8v8H0z"/></svg>\')}.react-colorful__saturation-pointer{z-index:3}.react-colorful__hue-pointer{z-index:2}',J.set(r,t);var n=$();n&&t.setAttribute("nonce",n),r.head.appendChild(t);}},[]);},U=function(t){var n=t.className,o=t.colorModel,a=t.color,l=void 0===a?o.defaultColor:a,i=t.onChange,s=c$1(t,["className","colorModel","color","onChange"]),f=react.useRef(null);Q(f);var v=Y(o,l,i),d=v[0],h=v[1],m=g$1(["react-colorful",n]);return react.createElement("div",u$1({},s,{ref:f,className:m}),react.createElement(T,{hsva:d,onChange:h}),react.createElement(S,{hue:d.h,onChange:h,className:"react-colorful__last-control"}))},W={defaultColor:"000",toHsva:x,fromHsva:function(e){return w({h:e.h,s:e.s,v:e.v,a:1})},equal:X},Z=function(r){return react.createElement(U,u$1({},r,{colorModel:W}))};
 
-const colorfulCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap\"); .size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}.input-size-large{height:40px}.input-size-medium{height:32px}.input-size-small{height:24px}.resize-none textarea{resize:none}.resize-vertical textarea{resize:vertical}.resize-auto textarea{height:auto;resize:none}.textarea-size-large{padding:4px 0 0 4px;min-height:40px}.textarea-size-large .bcm-input-element{min-height:calc((40px - 8px) + 2px)}.textarea-size-large .input-clear-button{height:calc( 40px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-medium{padding:4px 0 0 4px;min-height:32px}.textarea-size-medium .bcm-input-element{min-height:calc((32px - 8px) + 2px)}.textarea-size-medium .input-clear-button{height:calc( 32px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-small{padding:0px 0 0 4px;min-height:24px}.textarea-size-small .bcm-input-element{min-height:calc((24px - 8px) + 2px)}.textarea-size-small .input-clear-button{height:calc( 24px - 16px );top:8px;padding:0;margin-right:8px}.bcm-input[no-margin]{margin:0}.bcm-textarea[no-margin]{margin:0}.bcm-switch[no-margin]{margin:0}.bcm-checkbox[no-margin]{margin:0}.bcm-radio-group[no-margin]{margin:0}.bcm-checkbox-group[no-margin]{margin:0}.bcm-range[no-margin]{margin:0}.bcm-form[no-margin]{margin:0}.bcm-form-group[no-margin]{margin:0}.bcm-list[no-margin]{margin:0}.bcm-colorpicker[no-margin]{margin:0}.bcm-date-picker[no-margin]{margin:0}.bcm-time-picker[no-margin]{margin:0}.bcm-datetime-picker[no-margin]{margin:0}.bcm-select[no-margin]{margin:0}.bcm-listbox[no-margin]{margin:0}*{box-sizing:border-box}.bcm-input{display:inline-flex;flex-direction:column;width:100%;max-width:256px;margin-bottom:8px}.bcm-input.full-width{max-width:100%}.bcm-input.hidden{display:none}.bcm-input__container{font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;display:flex;align-items:stretch;flex-direction:row;background-color:var(--bcm-new-ds-color-white);border:1px solid var(--bcm-new-ds-color-slate-300);border-radius:4px;box-sizing:border-box;cursor:text;padding:0 0 0 4px;position:relative;width:100%}.bcm-input__container.disabled{background-color:var(--bcm-new-ds-color-slate-50);cursor:not-allowed}.bcm-input__container.disabled .bcm-input-element{color:var(--bcm-new-ds-color-slate-500)}.bcm-input__container.readonly{background-color:var(--bcm-new-ds-color-slate-50);cursor:default}.bcm-input__container.readonly .bcm-input-element{color:var(--bcm-new-ds-color-slate-600)}.bcm-input__container:not(.disabled):hover .caret-container,.bcm-input__container:not(.disabled).focused .caret-container{opacity:1}.bcm-input__container:not(.disabled):hover .input-clear-button,.bcm-input__container:not(.disabled).focused .input-clear-button{opacity:1}.bcm-input__container:not(.disabled).focused{background-color:var(--bcm-new-ds-color-slate-50)}.bcm-input__container:not(.disabled):hover{border-color:var(--bcm-color-prime-blue-6)}.bcm-input__container.empty .input-clear-button{display:none}.bcm-input__container.invalid,.bcm-input__container.error{border-color:var(--bcm-new-ds-color-red-500)}.bcm-input__container .bcm-input-element{width:100%;color:var(--bcm-new-ds-color-slate-600);flex:1;border:none;background:transparent;box-shadow:unset;padding:0 4px;font-family:\"Inter\", sans-serif;cursor:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;text-overflow:ellipsis}.bcm-input__container .bcm-input-element::placeholder{font-family:\"Inter\", sans-serif;color:var(--bcm-new-ds-color-slate-300);user-select:none}.bcm-input__container .bcm-input-element::-webkit-search-decoration,.bcm-input__container .bcm-input-element::-webkit-search-cancel-button,.bcm-input__container .bcm-input-element::-webkit-search-results-button,.bcm-input__container .bcm-input-element::-webkit-search-results-decoration,.bcm-input__container .bcm-input-element::-webkit-calendar-picker-indicator,.bcm-input__container .bcm-input-element::-webkit-inner-spin-button,.bcm-input__container .bcm-input-element::-webkit-outer-spin-button{-webkit-appearance:none}.bcm-input__container .caret-container{width:30px;display:flex;flex-direction:column;justify-content:center;align-items:stretch;border-left:1px solid #D9D9D9;transition:0.2s opacity;user-select:none;box-sizing:border-box}.bcm-input__container .caret-container .bcm-input-caret{display:flex;align-items:center;justify-content:center;color:var(--bcm-color-grey-7);cursor:pointer;flex:1}.bcm-input__container .caret-container .bcm-input-caret bcm-icon{line-height:1}.bcm-input__container .caret-container .bcm-input-caret:hover{color:var(--bcm-color-prime-blue-6)}.bcm-input__container .caret-container .bcm-input-caret:active{background-color:var(--bcm-color-grey-3)}.bcm-input__container .caret-container .bcm-input-caret:last-child{border-top:1px solid #D9D9D9}.bcm-input__container .caret-container.disabled{background-color:var(--bcm-color-grey-3)}.bcm-input__container .caret-container.disabled .bcm-input-caret{cursor:not-allowed}.bcm-input__container .input-suffix-content{display:flex;align-items:center;justify-content:center}.bcm-input__container .input-prefix:not(:empty){padding-left:4px}.bcm-input__container .input-suffix:not(:empty){min-width:24px;padding-right:4px}.bcm-input__container .input-prefix:not(:empty),.bcm-input__container .input-suffix:not(:empty){display:flex;align-items:center;justify-content:center;cursor:default;color:#64748a}.bcm-input__container .input-prefix:not(:empty) .unit-prefix,.bcm-input__container .input-suffix:not(:empty) .unit-prefix{color:#64748a}.bcm-input__container .input-prefix-button:not(:empty),.bcm-input__container .input-suffix-button:not(:empty){cursor:pointer}.bcm-input__container .caret-container,.bcm-input__container .input-clear-button{opacity:0}.bcm-input__container--small{font-size:12px}.bcm-input__container--medium{font-size:14px}.bcm-input__container--large{font-size:16px}.bcm-input__textarea.clearable .bcm-input-element{padding-right:24px}.bcm-input__textarea .input-clear-button{position:absolute;top:4px;right:0}bcm-colorful{display:flex;flex-direction:column;width:256px;padding:8px;background-color:#fff;border-radius:4px}bcm-colorful .react-colorful{width:100%;gap:4px}bcm-colorful .react-colorful__saturation{margin:0 0 4px 0;border-radius:2px;border-bottom:none}bcm-colorful .react-colorful__hue,bcm-colorful .react-colorful__alpha{height:20px;border-radius:2px}bcm-colorful .react-colorful__hue-pointer,bcm-colorful .react-colorful__alpha-pointer{width:15px;height:15px}bcm-colorful .react-colorful__saturation-pointer{width:20px;height:20px}";
+const colorfulCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");.size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}.input-size-large{height:40px}.input-size-medium{height:32px}.input-size-small{height:24px}.resize-none textarea{resize:none}.resize-vertical textarea{resize:vertical}.resize-auto textarea{height:auto;resize:none}.textarea-size-large{padding:4px 0 0 4px;min-height:40px}.textarea-size-large .bcm-input-element{min-height:calc((40px - 8px) + 2px)}.textarea-size-large .input-clear-button{height:calc( 40px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-medium{padding:4px 0 0 4px;min-height:32px}.textarea-size-medium .bcm-input-element{min-height:calc((32px - 8px) + 2px)}.textarea-size-medium .input-clear-button{height:calc( 32px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-small{padding:0px 0 0 4px;min-height:24px}.textarea-size-small .bcm-input-element{min-height:calc((24px - 8px) + 2px)}.textarea-size-small .input-clear-button{height:calc( 24px - 16px );top:8px;padding:0;margin-right:8px}bcm-colorful{display:flex;flex-direction:column;width:256px;padding:8px;background-color:#fff;border-radius:4px}bcm-colorful .react-colorful{width:100%;gap:4px}bcm-colorful .react-colorful__saturation{margin:0 0 4px 0;border-radius:2px;border-bottom:none}bcm-colorful .react-colorful__hue,bcm-colorful .react-colorful__alpha{height:20px;border-radius:2px}bcm-colorful .react-colorful__hue-pointer,bcm-colorful .react-colorful__alpha-pointer{width:15px;height:15px}bcm-colorful .react-colorful__saturation-pointer{width:20px;height:20px}";
 
 const BcmColorful = class {
   constructor(hostRef) {
@@ -19266,222 +19817,6 @@ function JsonParse(attribute, isMethod = false) {
   };
 }
 
-const CheckboxTemplate = ({ disabled, checked, readonly, required, indeterminate, hidden, captionType, _id }) => {
-  // if ( indeterminate ) {
-  //   checked = indeterminate == 'determinate' ? true : false 
-  // }
-  const hostClasses = classnames('bcm-checkbox', 'bcm-checkbox__type-default', `bcm-checkbox-size-medium`, {
-    // 'size-2': size === Bcm.Size.small || size === Bcm.Size.medium,
-    // 'size-3': optionType === 'button' && size === Bcm.Size.large,
-    'error': captionType == Bcm$1.Status.error,
-    hidden,
-    checked,
-    disabled,
-    required,
-    readonly,
-  });
-  const bcmCheckboxIconClass = classnames('bcm-checkbox__label-icon', 'bcm-checkbox__label-icon-lite', 'bcm-checkbox__label-icon-' + indeterminate, {
-    'bcm-checkbox__label-icon-checked': checked,
-  });
-  const bcmCheckboxLabelClass = classnames('bcm-checkbox__label');
-  return (h$2("div", { class: hostClasses },
-    h$2("input", { tabindex: "-1", id: _id, type: "checkbox", checked: checked, disabled: disabled, required: required, readonly: readonly }),
-    h$2("label", { class: bcmCheckboxLabelClass, htmlFor: _id },
-      h$2("span", { class: bcmCheckboxIconClass },
-        h$2("bcm-icon", { icon: "far fa-check" })))));
-};
-
-const InfoFooterTemplate = ({ selected, total, found, multiple, variableText }) => {
-  total = total || 0;
-  variableText = variableText ? pluralize(variableText, total) : 'items';
-  return (h$2("footer", { class: "bcm-info-footer" },
-    h$2("bcm-text", { scale: "size-1", color: "grey-8" },
-      (multiple && selected > 0) && ` ( ${selected} selected ) `,
-      ` Total ${total} `,
-      found != null && ` / ${found} `,
-      ` ${variableText} found. `)));
-};
-
-const InputTemplate = ({ elementType, 
-//textarea
-rows, 
-//props
-id, internalId, type, placeholder, value, size, pattern, 
-//,
-unit, unitPrefix, maxLength, 
-//boolean
-disabled, clearable, focused, readonly, isPasswordVisible, passwordToggle, noDefaultIcon, inValid, captionType, resize, autocomplete, _suffix, _prefix, 
-// custom functions
-changePasswordVisibility, handleClear, steps, 
-//event functions
-ref, handleBlur, handleFocus, handleInput, handleChange, isEyeDropperSupported, eyeDropper, }) => {
-  const ElementTagType = Bcm$1.HtmlElementType[elementType] || Bcm$1.HtmlElementType.input;
-  type = type === "password" && isPasswordVisible ? "text" : type;
-  value = snq(() => value, "");
-  type = (unit === null || unit === void 0 ? void 0 : unit.length) > 0 && !focused ? "text" : type;
-  value = !focused ? value + (value && (unit === null || unit === void 0 ? void 0 : unit.length) > 0 ? " " + unit : "") : value;
-  const typeColor = type === "color";
-  type = type === "color" ? "text" : type;
-  const templateHandleFocus = e => {
-    e.target.parentElement.classList.add("focused");
-    handleFocus(e);
-  };
-  const templateHandleBlur = e => {
-    e.target.parentElement.classList.remove("focused");
-    handleBlur(e);
-  };
-  var containerClass = classnames("bcm-input__container", ElementTagType === Bcm$1.HtmlElementType.textarea && classnames("bcm-input__textarea", "textarea-size-" + Bcm$1.Size[size], "resize-" + resize, "textarea-" + size), ElementTagType === Bcm$1.HtmlElementType.input && classnames("input-size-" + Bcm$1.Size[size]), {
-    focused: focused,
-    clearable: clearable,
-    disabled,
-    readonly,
-    invalid: inValid,
-    unit: (unit === null || unit === void 0 ? void 0 : unit.length) > 0,
-    // 'empty': value?.length < 1,
-    error: captionType === "error",
-  });
-  const caretContainer = classnames("caret-container", {
-    unit: (unit === null || unit === void 0 ? void 0 : unit.length) > 0,
-    disabled: disabled || readonly || inValid,
-  });
-  const inputClass = "bcm-input__container--" + size;
-  const unitClass = classnames(inputClass, "unit-prefix");
-  return (h$2("div", { class: containerClass, id: id + "-container" },
-    h$2("span", { hidden: true },
-      h$2("slot", null)),
-    h$2("span", { class: "input-prefix" },
-      h$2("slot", { name: "prefix" }),
-      _prefix && _prefix.length > 0 && h$2("span", { innerHTML: _prefix }),
-      unitPrefix && h$2("span", { class: unitClass }, unitPrefix),
-      typeColor && (h$2("i", { class: "tw-flex tw-h-4 tw-w-4 tw-items-center tw-justify-center tw-rounded-full tw-border tw-border-slate-300", style: {
-          backgroundColor: value,
-        } }))),
-    h$2(ElementTagType, Object.assign({ tabindex: "0", id: id + "-input", "bcm-internal-id": internalId, class: "bcm-input-element " + inputClass }, (ElementTagType === Bcm$1.HtmlElementType.input && {
-      type,
-      autocomplete: autocomplete ? "on" : "off",
-      pattern,
-    }), (ElementTagType === Bcm$1.HtmlElementType.textarea && { rows: rows, resize: resize }), { value: value, maxLength: maxLength, "aria-label": placeholder || "Enter text", "aria-labelledby": id + "-label", title: "", placeholder: placeholder, disabled: disabled, readOnly: readonly, ref: el => ref(el), onBlur: e => templateHandleBlur(e), onFocus: e => templateHandleFocus(e), onInput: e => handleInput(e), onChange: e => handleChange(e) })),
-    h$2("span", { class: "input-suffix-content" }, clearable && !disabled && !readonly && (h$2("span", { class: "input-suffix input-suffix-button input-clear-button", onClick: e => handleClear(e) },
-      h$2("bcm-icon", { icon: "far fa-times" })))),
-    h$2("span", { class: "input-suffix-content" }, (type === "password" || type === "text") && passwordToggle && (h$2("span", { class: "input-suffix input-suffix-button", onClick: () => changePasswordVisibility() },
-      h$2("bcm-icon", { icon: isPasswordVisible ? "far fa-eye-slash" : "far fa-eye" })))),
-    h$2("span", { class: "input-suffix-content" }, Object.keys(defaultIcons$1).includes(type) && !noDefaultIcon && (h$2("span", { class: "input-suffix" },
-      h$2("bcm-icon", { icon: defaultIcons$1[type] })))),
-    h$2("span", { class: "input-suffix-content" }, type === "number" && (h$2("div", { class: caretContainer },
-      h$2("span", { class: "bcm-input-caret", onClick: () => steps("up") },
-        h$2("bcm-icon", { icon: "fas fa-caret-up" })),
-      h$2("span", { class: "bcm-input-caret", onClick: () => steps("down") },
-        h$2("bcm-icon", { icon: "fas fa-caret-down" }))))),
-    h$2("span", { class: "input-suffix-content" },
-      type !== "number" && (h$2("span", { class: "input-suffix" },
-        h$2("slot", { name: "suffix" }),
-        _suffix && _suffix.length > 0 && h$2("span", { innerHTML: _suffix }))),
-      typeColor && isEyeDropperSupported() && (h$2("span", { class: "input-suffix" },
-        h$2("span", null,
-          h$2("i", { class: "far fa-eye-dropper", onClick: () => eyeDropper() })))))));
-};
-
-const ListItemTemplate = ({ item, treeview, highlight, checkboxes, size, selectedItem, openGroup, checkedItem, focusItem, searchIsOnlyChilds }) => {
-  const isHaveChildren = item.items && item.items.length > 0;
-  var text = StringHelper.htmlEntities(item.text);
-  let intersection = [];
-  if (highlight && StringHelper.slugify(text).includes(StringHelper.slugify(highlight))) {
-    if (!searchIsOnlyChilds || (searchIsOnlyChilds && (!isHaveChildren || (!treeview && item.type != "group")))) {
-      text = StringHelper.highlight(text, highlight);
-    }
-  }
-  if (item.type != 'group' && item.template) {
-    const match = item.template
-      .replace(/\s/g, '')
-      .match(/\{{[^}}]+\}/g)
-      .map(x => x.replace(/[{}]/g, ''));
-    const keys = Object.keys(item.itemObject);
-    intersection = match.filter(x => keys.includes(x));
-  }
-  text = item.isHtmlContent ? item.isHtmlContent : item.template && intersection.length > 0 ? StringHelper.templateParser(item.template, Object.assign(Object.assign({}, item.itemObject), { text })) : text;
-  const domText = item.template ? text : Generate.domParser(text);
-  const unClickable = !treeview && item.type == "group" && !item.clickable;
-  const disabled = item.disabled;
-  const readonly = item.readonly;
-  const itemClick = (event) => {
-    let path = event.path || event.composedPath();
-    if (path.filter(x => x.attributes && x.attributes.getNamedItem("unlinked"))[0]) {
-      return;
-    }
-    // if (readonly) {
-    //     collapseClick();
-    // }
-    !unClickable && !disabled && !readonly && (checkboxes ? checkedItem(item.id) : selectedItem(item.id));
-  };
-  const collapseClick = () => {
-    // if (disabled) {
-    //     return;
-    // }
-    item.open = item.isSearching;
-    openGroup(item.id);
-  };
-  return (h$2("div", { id: item.id, hidden: item.hidden, "on-focus": e => !unClickable && !disabled && focusItem(e), tabIndex: unClickable || disabled ? -1 : 0, class: classnames('bcm-list__item', 
-    // size === 'large' ? 'size-3' : 'size-2',
-    'bcm-list__item-' + size, {
-      'bcm-list__item--group': !treeview && item.type == 'group',
-      'bcm-list__item--readonly': readonly,
-    }) },
-    h$2("div", { class: classnames('bcm-list__item-content', !checkboxes && item.selected && 'selected', { disabled, readonly }) },
-      treeview && (h$2("div", { class: "bcm-list__item-content-collapse-icon", onClick: () => collapseClick() }, isHaveChildren && h$2("bcm-icon", { icon: classnames('fas fa-caret-' + (item.isSearching || item.open ? 'down' : 'right')) }))),
-      h$2("div", { class: classnames('bcm-list__item-content-text', { treeview }), onClick: (e) => itemClick(e) },
-        checkboxes && (treeview || (!treeview && item.type != 'group')) && (h$2("div", { class: "bcm-list__item-content-text-checkbox" },
-          h$2(CheckboxTemplate, { indeterminate: item.indeterminate, checked: item.checked, disabled: item.disabled }))),
-        h$2("span", Object.assign({ class: "bcm-list__item-content-text-inner" }, (item.title && { "title": item.title }), { innerHTML: domText })))),
-    (treeview || !treeview && item.type == "group") && isHaveChildren && (h$2("div", { class: "bcm-list__item-childs" }, (item.isSearching || item.open || (!treeview && item.type == "group")) &&
-      item.items.map((item) => (h$2(ListItemTemplate, { highlight: highlight, item: item, searchIsOnlyChilds: searchIsOnlyChilds, treeview: treeview, checkboxes: checkboxes, size: size, selectedItem: selectedItem, checkedItem: checkedItem, openGroup: parentId => openGroup(parentId), focusItem: itemId => focusItem(itemId) })))))));
-};
-
-const ListTemplate = ({ type, highlight, selectAllItem, bcmListContainer, treeview, checkboxes, checkAll, infoFooter, value, totalData, searchFound, variableText, _id, tempId, data, width, height, size, searchPlaceholder, minSearchLength, selectedItem, openGroup, checkedItem, onScrollEvent, focusItem, items, searchable, searchIsOnlyChilds, emptyText, emptyIcon, handleTransitionEnd, }) => {
-  const showSelectAll = !(treeview && searchFound > 0) && !(searchFound > 0);
-  const setScrollHeight = () => {
-    const itemHeight = size === 'small' ? 28 : size === 'medium' ? 36 : 48;
-    const itemCount = searchFound == null ? (treeview ? items.length : totalData) : searchFound;
-    const scrollHeight = itemCount * itemHeight || 0;
-    return Object.assign(Object.assign({ 'min-height': `${scrollHeight}px` }, (type === 'select' && { 'overscroll-behavior': 'none' })), { 'height': '100%', 'display': 'flex', 'flex-direction': 'column' });
-  };
-  return (h$2("div", { id: `bcm-list-${_id}`, class: bcmListContainer, "temp-id": `bcm-list-${tempId}`, style: { '--height': height, '--width': width }, onTransitionEnd: e => handleTransitionEnd(e) },
-    data && searchable && (h$2("section", { class: "bcm-list__container-search" },
-      h$2("bcm-search", { size: size, id: `bcm-list-${_id}-search`, data: data, clearable: true, placeholder: searchPlaceholder, "min-search-length": minSearchLength, searchIsOnlyChilds: searchIsOnlyChilds }))),
-    h$2("main", { onScroll: e => onScrollEvent(e), class: "scrolling", style: Object.assign({}, (type === 'select' && { 'overscroll-behavior': 'none' })) },
-      h$2("div", { style: setScrollHeight() },
-        checkAll && searchFound != 0 && items && items.length > 0 && checkboxes && showSelectAll && (h$2("section", { class: "bcm-list__container-select-all" },
-          h$2(ListItemTemplate, { size: size, item: selectAllItem, treeview: false, checkboxes: true, selectedItem: itemId => selectedItem(itemId), checkedItem: itemId => checkedItem(itemId), openGroup: parentId => openGroup(parentId), focusItem: itemId => focusItem(itemId) }))),
-        items.map((item) => (h$2(ListItemTemplate, { highlight: highlight, size: size, item: item, searchIsOnlyChilds: searchIsOnlyChilds, treeview: treeview, checkboxes: checkboxes, selectedItem: itemId => selectedItem(itemId), checkedItem: itemId => checkedItem(itemId), openGroup: parentId => openGroup(parentId), focusItem: itemId => focusItem(itemId) }))),
-        (!items || items.length === 0) && searchFound != 0 && (h$2("section", { class: "bcm-list__container-no-data" },
-          h$2("bcm-empty", { style: { height: 'auto' }, icon: emptyIcon },
-            h$2("span", { innerHTML: emptyText || 'No data' })))),
-        searchFound == 0 && (h$2("section", { class: "bcm-list__container-no-data" },
-          h$2("bcm-empty", { style: { height: 'auto' }, icon: emptyIcon },
-            h$2("span", { innerHTML: emptyText || 'No Data Found' })))))),
-    infoFooter && data && data.length > 0 && (h$2(InfoFooterTemplate, { selected: value === null || value === void 0 ? void 0 : value.length, total: totalData, found: searchFound, multiple: checkboxes, variableText: variableText }))));
-};
-
-const StepperHeaderTemplate = ({ _title, description, status, valid, index, loading, active, stepChange, statusIcon, icon, disabled, headerHidden, }) => {
-  const classes = classnames('bcm-stepper__header-item', `bcm-stepper__header-item--${status}`, {
-    'bcm-stepper__header-item--active': active,
-    'bcm-stepper__header-item--valid': valid,
-    'bcm-stepper__header-item--invalid': !valid,
-    'bcm-stepper__header-item--disabled': disabled,
-    'hidden': headerHidden,
-  });
-  const defaultIcons = {
-    success: 'fal fa-check',
-    warning: 'fal fa-exclamation-triangle',
-    error: 'fal fa-times',
-  };
-  const customIcon = (icon || (statusIcon && defaultIcons[status])) && h$2("bcm-icon", { icon: icon ? icon : defaultIcons[status] });
-  return (h$2("div", { class: classes },
-    h$2("div", { class: "bcm-stepper__header-item--container", onClick: () => !disabled && stepChange(index) },
-      h$2("div", { class: "bcm-stepper__header-item-icon size-3" }, loading ? h$2("bcm-icon", { icon: "far fa-spinner-third fa-spin" }) : customIcon || index),
-      h$2("div", { class: "bcm-stepper__header-item-title size-2" }, _title),
-      h$2("div", { class: "bcm-stepper__header-item-description size-1" }, description))));
-};
-
 var hookCallback;
 
 function hooks () {
@@ -24075,7 +24410,7 @@ const moment$1 = /*#__PURE__*/Object.freeze({
   'default': hooks
 });
 
-var __decorate$8 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$9 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
     r = Reflect.decorate(decorators, target, key, desc);
@@ -24223,30 +24558,90 @@ const BcmDate = class {
   }
   get el() { return getElement(this); }
 };
-__decorate$8([
+__decorate$9([
   IsLoad()
 ], BcmDate.prototype, "el", void 0);
 
-const dividerCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");.size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}.input-size-large{height:40px}.input-size-medium{height:32px}.input-size-small{height:24px}.resize-none textarea{resize:none}.resize-vertical textarea{resize:vertical}.resize-auto textarea{height:auto;resize:none}.textarea-size-large{padding:4px 0 0 4px;min-height:40px}.textarea-size-large .bcm-input-element{min-height:calc((40px - 8px) + 2px)}.textarea-size-large .input-clear-button{height:calc( 40px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-medium{padding:4px 0 0 4px;min-height:32px}.textarea-size-medium .bcm-input-element{min-height:calc((32px - 8px) + 2px)}.textarea-size-medium .input-clear-button{height:calc( 32px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-small{padding:0px 0 0 4px;min-height:24px}.textarea-size-small .bcm-input-element{min-height:calc((24px - 8px) + 2px)}.textarea-size-small .input-clear-button{height:calc( 24px - 16px );top:8px;padding:0;margin-right:8px}.bcm-divider{display:block}.bcm-divider.hidden{display:none}.bcm-divider__direction-horizontal{width:100%;height:1px;margin:4px auto;border-top:1px solid var(--bcm-color-grey-5)}.bcm-divider__direction-vertical{height:auto;width:1px;margin:0 4px;border-left:1px solid var(--bcm-color-grey-5)}";
+const dividerStyle = ce({
+  slots: {
+    base: "bcm-divider bcm-ui-element bcm-ui-divider tw-block tw-border-color-default",
+  },
+  variants: {
+    direction: {
+      horizontal: "bcm-divider__direction-horizontal tw-border-b tw-w-full tw-h-px tw-my-1",
+      vertical: "bcm-divider__direction-vertical tw-border-l tw-h-full tw-w-px tw-mx-1",
+    },
+  },
+  defaultVariants: {
+    direction: "horizontal",
+  },
+});
 
 const BcmDivider = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    this.hidden = false;
     this.direction = Bcm$1.Direction.horizontal;
   }
   render() {
-    const { hidden, direction } = this;
-    const hostClasses = classnames('bcm-divider', 'bcm-divider__direction-' + direction, {
-      'hidden': hidden
-    });
-    return (h$2(Host, { class: hostClasses }, h$2("span", { hidden: true }, h$2("slot", null))));
+    const { direction } = this;
+    const { base } = dividerStyle({ direction });
+    return h$2(Host, { class: base() });
   }
   get el() { return getElement(this); }
 };
-BcmDivider.style = dividerCss;
 
-const drawerCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap\"); .size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}.input-size-large{height:40px}.input-size-medium{height:32px}.input-size-small{height:24px}.resize-none textarea{resize:none}.resize-vertical textarea{resize:vertical}.resize-auto textarea{height:auto;resize:none}.textarea-size-large{padding:4px 0 0 4px;min-height:40px}.textarea-size-large .bcm-input-element{min-height:calc((40px - 8px) + 2px)}.textarea-size-large .input-clear-button{height:calc( 40px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-medium{padding:4px 0 0 4px;min-height:32px}.textarea-size-medium .bcm-input-element{min-height:calc((32px - 8px) + 2px)}.textarea-size-medium .input-clear-button{height:calc( 32px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-small{padding:0px 0 0 4px;min-height:24px}.textarea-size-small .bcm-input-element{min-height:calc((24px - 8px) + 2px)}.textarea-size-small .input-clear-button{height:calc( 24px - 16px );top:8px;padding:0;margin-right:8px}*{box-sizing:border-box}.bcm-drawer{user-select:none;position:absolute;width:100vw;height:100vh;top:-100%;left:-100%;overflow:hidden;visibility:hidden}.bcm-drawer--open{visibility:visible;top:0;left:0}.bcm-drawer__content{font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;user-select:text;position:fixed;width:100%;height:100%;background-color:#f1f5f9;z-index:10350;transition:transform 0.2s ease-in-out;transform:translateX(-100%);visibility:hidden;overflow:hidden;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start}.bcm-drawer__content-body{padding:0 24px 24px 24px}.bcm-drawer__content.full-width{max-width:100%}.bcm-drawer__content-header{padding:24px 24px 0 24px;display:flex;justify-content:space-between;align-items:flex-start;color:var(--bcm-color-grey-8);margin-bottom:8px}.bcm-drawer__content-header-close{padding:4px 8px;margin-right:-4px;margin-top:-4px;color:var(--bcm-color-grey-7)}.bcm-drawer__content-header-close:hover{cursor:pointer;color:var(--bcm-color-grey-8)}.bcm-drawer__content-footer{padding:12px 24px}.bcm-drawer__content--position-left,.bcm-drawer__content--position-right{max-width:500px}.bcm-drawer__content--position-left.full-width,.bcm-drawer__content--position-right.full-width{max-width:100%}.bcm-drawer__content--position-top,.bcm-drawer__content--position-bottom{max-height:500px}.bcm-drawer__content--position-top.full-width,.bcm-drawer__content--position-bottom.full-width{max-height:100%}.bcm-drawer__content--position-left{transform:translateX(-100%);top:0;left:0}.bcm-drawer__content--position-top{transform:translateY(-100%);top:0;left:0}.bcm-drawer__content--position-right{transform:translateX(100%);top:0;right:0}.bcm-drawer__content--position-bottom{transform:translateY(100%);bottom:0;left:0}.bcm-drawer__content--open{transform:translateX(0);visibility:visible}.bcm-drawer__content--close{visibility:visible}.bcm-drawer__overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.5);z-index:10349;visibility:hidden;opacity:0;transition:opacity 0.3s ease-in-out}.bcm-drawer__overlay--close{opacity:0;visibility:visible;transform:translateX(-100%)}.bcm-drawer__overlay--open{opacity:1;visibility:visible;transform:translateX(0)}";
+const drawerStyle = ce({
+  slots: {
+    host: ["bcm-drawer bcm-ui-element bcm-ui-content-display", "tw-user-select-none tw-absolute tw-overflow-hidden", "tw-w-screen tw-h-screen"],
+    content: ["bcm-drawer__content", "tw-flex tw-flex-col tw-items-stretch tw-justify-start", "tw-w-full tw-h-full tw-bg-color-surface-modal", "tw-fixed tw-user-select-text", "tw-z-drawer tw-overflow-hidden"],
+    contentHeader: ["bcm-drawer__content-header", "tw-px-6 tw-pt-6 tw-pb-0 tw-flex tw-justify-between tw-items-start", "tw-text-color tw-mb-2"],
+    contentHeaderTitle: ["bcm-drawer__content-header-title", "tw-text-size-6 tw-font-semibold"],
+    contentHeaderClose: ["bcm-drawer__content-header-close tw-text-size-6", "tw-px-2 tw-py-1 -tw-mr-1 -tw-mt-1 tw-text-color", "hover:tw-cursor-pointer"],
+    contentBody: ["bcm-drawer__content-body", "tw-px-6 tw-pt-0 tw-pb-6"],
+    contentFooter: ["bcm-drawer__content-footer", "tw-py-3 tw-px-6"],
+    overlay: ["bcm-drawer__overlay", "tw-fixed tw-bg-color-transparent-background tw-z-drawer-bd", "tw-top-0 tw-left-0 tw-w-full tw-h-full"],
+  },
+  variants: {
+    isShow: {
+      true: {
+        host: ["bcm-drawer--open", "tw-visible tw-top-0 tw-left-0"],
+        content: ["bcm-drawer__content--open"],
+        overlay: ["bcm-drawer__overlay--open", "tw-opacity-100 tw-visible tw-transform tw--translate-x-0"],
+      },
+      false: {
+        host: ["-tw-top-full -tw-left-full tw-invisible"],
+        content: ["bcm-drawer__content--close"],
+        overlay: ["bcm-drawer__overlay--close", "tw-opacity-0 tw-invisible tw-transform tw--translate-x-full"],
+      },
+    },
+    fullWidth: {
+      true: {
+        content: ["full-width tw-max-w-full"],
+      },
+    },
+    position: {
+      right: {
+        content: ["bcm-drawer__content--position-right"],
+      },
+      left: {
+        content: ["bcm-drawer__content--position-left"],
+      },
+      top: {
+        content: ["bcm-drawer__content--position-top"],
+      },
+      bottom: {
+        content: ["bcm-drawer__content--position-bottom"],
+      },
+    },
+  },
+  defaultVariants: {
+    isShow: false,
+    fullWidth: false,
+    position: "right",
+  },
+});
+
+const drawerCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");.size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}.input-size-large{height:40px}.input-size-medium{height:32px}.input-size-small{height:24px}.resize-none textarea{resize:none}.resize-vertical textarea{resize:vertical}.resize-auto textarea{height:auto;resize:none}.textarea-size-large{padding:4px 0 0 4px;min-height:40px}.textarea-size-large .bcm-input-element{min-height:calc((40px - 8px) + 2px)}.textarea-size-large .input-clear-button{height:calc( 40px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-medium{padding:4px 0 0 4px;min-height:32px}.textarea-size-medium .bcm-input-element{min-height:calc((32px - 8px) + 2px)}.textarea-size-medium .input-clear-button{height:calc( 32px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-small{padding:0px 0 0 4px;min-height:24px}.textarea-size-small .bcm-input-element{min-height:calc((24px - 8px) + 2px)}.textarea-size-small .input-clear-button{height:calc( 24px - 16px );top:8px;padding:0;margin-right:8px}.bcm-drawer__content{transition:transform 0.2s ease-in-out;transform:translateX(-100%);visibility:hidden}.bcm-drawer__content--position-left,.bcm-drawer__content--position-right{max-width:500px}.bcm-drawer__content--position-left.full-width,.bcm-drawer__content--position-right.full-width{max-width:100%}.bcm-drawer__content--position-top,.bcm-drawer__content--position-bottom{max-height:500px}.bcm-drawer__content--position-top.full-width,.bcm-drawer__content--position-bottom.full-width{max-height:100%}.bcm-drawer__content--position-left{transform:translateX(-100%);top:0;left:0}.bcm-drawer__content--position-top{transform:translateY(-100%);top:0;left:0}.bcm-drawer__content--position-right{transform:translateX(100%);top:0;right:0}.bcm-drawer__content--position-bottom{transform:translateY(100%);bottom:0;left:0}.bcm-drawer__content--open{transform:translateX(0);visibility:visible}.bcm-drawer__content--close{visibility:visible}.bcm-drawer__overlay{transition:opacity 0.3s ease-in-out}";
 
 const BcmDrawer = class {
   constructor(hostRef) {
@@ -24296,19 +24691,12 @@ const BcmDrawer = class {
     this.el.remove();
   }
   render() {
-    const hostClasses = classnames('bcm-drawer', {
-      'bcm-drawer--open': this._open,
+    const { host, content, overlay, contentHeader, contentHeaderTitle, contentHeaderClose, contentBody, contentFooter } = drawerStyle({
+      isShow: this._open,
+      fullWidth: this.fullWidth,
+      position: this.position,
     });
-    const contentClasses = classnames('bcm-drawer__content', `bcm-drawer__content--position-${this.position}`, {
-      'bcm-drawer__content--open': this._open,
-      'bcm-drawer__content--close': this._close,
-      'full-width': this.fullWidth,
-    });
-    const overlay = classnames('bcm-drawer__overlay', {
-      'bcm-drawer__overlay--open': this._open,
-      'bcm-drawer__overlay--close': this._close,
-    });
-    return (h$2(Host, { class: hostClasses }, h$2("div", { class: overlay, onClick: () => this.hide() }), h$2("div", { class: contentClasses }, h$2("div", { class: "bcm-drawer__content-header" }, h$2("bcm-text", { class: "bcm-drawer__content-header-title", "font-size": "6", weight: "600", color: "slate-800" }, this._title, " ", h$2("slot", { name: "header" })), h$2("div", { class: "bcm-drawer__content-header-close size-4", onClick: () => this.hide() }, h$2("bcm-icon", { icon: "fal fa-times" }))), h$2("div", { style: { 'overflow': 'auto', 'flex': '1' } }, h$2("div", { class: "bcm-drawer__content-body" }, h$2("slot", null))), h$2("div", { class: "bcm-drawer__content-footer" }, h$2("slot", { name: "footer" })))));
+    return (h$2(Host, { class: host() }, h$2("div", { class: overlay(), onClick: () => this.hide() }), h$2("div", { class: content() }, h$2("div", { class: contentHeader() }, h$2("span", { class: contentHeaderTitle() }, this._title, " ", h$2("slot", { name: "header" })), h$2("div", { class: contentHeaderClose(), onClick: () => this.hide() }, h$2("i", { class: "fa-solid fa-xmark" }))), h$2("div", { class: "tw-overflow-auto tw-flex-1" }, h$2("div", { class: contentBody() }, h$2("slot", null))), h$2("div", { class: contentFooter() }, h$2("slot", { name: "footer" })))));
   }
   get el() { return getElement(this); }
   static get watchers() { return {
@@ -24319,7 +24707,7 @@ BcmDrawer.style = drawerCss;
 
 const dropdownCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap\"); .size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}.input-size-large{height:40px}.input-size-medium{height:32px}.input-size-small{height:24px}.resize-none textarea{resize:none}.resize-vertical textarea{resize:vertical}.resize-auto textarea{height:auto;resize:none}.textarea-size-large{padding:4px 0 0 4px;min-height:40px}.textarea-size-large .bcm-input-element{min-height:calc((40px - 8px) + 2px)}.textarea-size-large .input-clear-button{height:calc( 40px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-medium{padding:4px 0 0 4px;min-height:32px}.textarea-size-medium .bcm-input-element{min-height:calc((32px - 8px) + 2px)}.textarea-size-medium .input-clear-button{height:calc( 32px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-small{padding:0px 0 0 4px;min-height:24px}.textarea-size-small .bcm-input-element{min-height:calc((24px - 8px) + 2px)}.textarea-size-small .input-clear-button{height:calc( 24px - 16px );top:8px;padding:0;margin-right:8px}*{box-sizing:border-box}.bcm-dropdown{width:fit-content;display:inline-flex;flex-direction:row}.bcm-dropdown.hidden{display:none}.bcm-dropdown.no-style{cursor:pointer}.bcm-dropdown.full-width{width:100%}.bcm-dropdown.full-width .bcm-button__container-text{flex:1;justify-content:space-between}.bcm-dropdown__type-split .main-button .bcm-button__container{border-top-right-radius:0;border-bottom-right-radius:0}.bcm-dropdown__type-split .split-button .bcm-button__container{border-top-left-radius:0;border-bottom-left-radius:0;margin-left:1px;min-width:auto}.bcm-dropdown__icon{display:flex;flex-direction:row;align-items:center;justify-content:center;flex-wrap:nowrap;transform:rotate(0deg);transition:transform 0.2s ease;padding-top:2px}.bcm-dropdown__icon--open{transform:rotate(180deg)}";
 
-var __decorate$7 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$8 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
     r = Reflect.decorate(decorators, target, key, desc);
@@ -24344,7 +24732,7 @@ const BcmDropdown = class {
     this.kind = Bcm$1.Kind.solid;
     this.icon = undefined;
     this.href = undefined;
-    this.target = undefined;
+    this.target = Bcm$1.Target["_blank"];
     this.value = undefined;
     this.noStyle = false;
     this.dropdownIcon = 'fas fa-angle-down';
@@ -24409,53 +24797,204 @@ const BcmDropdown = class {
     "data": ["dataChanged"]
   }; }
 };
-__decorate$7([
+__decorate$8([
   IsLoad()
 ], BcmDropdown.prototype, "el", void 0);
-__decorate$7([
+__decorate$8([
   JsonParse('data', true)
 ], BcmDropdown.prototype, "dataChanged", null);
 BcmDropdown.style = dropdownCss;
 
+const emptyStyle = ce({
+  slots: {
+    host: [
+      "bcm-empty bcm-ui-element bcm-ui-feedback",
+      "tw-flex tw-flex-1 tw-flex-col tw-items-center tw-justify-center tw-gap-2",
+      "tw-h-full tw-w-fulltw-text-center",
+      "tw-text-color-caption",
+      "tw-font-medium"
+    ],
+    iconStyle: "tw-mb-1 tw-rounded-3xl tw-p-4",
+    textStyle: "tw-font-semibold tw-text-color",
+    descriptionStyle: "",
+  },
+  variants: {
+    size: {
+      small: {
+        host: "tw-text-size-3",
+        textStyle: "tw-text-size-4",
+        iconStyle: "tw-text-size-8",
+      },
+      medium: {
+        host: "tw-text-size-4",
+        textStyle: "tw-text-size-5",
+        iconStyle: "tw-text-size-9",
+      },
+      large: {
+        host: "tw-text-size-5",
+        textStyle: "tw-text-size-6",
+        iconStyle: "tw-text-size-10",
+      },
+    },
+    status: {
+      default: {
+        host: "",
+        iconStyle: "tw-bg-blue-50 tw-text-color-primary",
+      },
+      success: {
+        host: "",
+        iconStyle: "tw-bg-emerald-50 tw-text-color-success",
+      },
+      warning: {
+        host: "",
+        iconStyle: "tw-bg-amber-50 tw-text-color-warning",
+      },
+      error: {
+        host: "",
+        iconStyle: "tw-bg-red-50 tw-text-color-error",
+      },
+      info: {
+        host: "",
+        iconStyle: "tw-bg-blue-50 tw-text-color-primary",
+      },
+    },
+  },
+  defaultVariants: {
+    size: "medium",
+    status: "default",
+  },
+});
+
 const BcmEmpty = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    this.icon = undefined;
+    this.icon = "fa-duotone fa-folder-open";
+    this.text = undefined;
+    this.description = undefined;
+    this.status = Bcm$1.Status.default;
+    this.size = Bcm$1.Size.medium;
   }
   render() {
-    return (h$2(Host, { class: "tw-h-full tw-flex tw-flex-col tw-items-center tw-justify-center tw-w-full tw-flex-1 tw-bg-slate-50 tw-text-center tw-rounded tw-gap-3" }, this.icon && h$2("i", { class: `tw-text-8 tw-text-amber-500 ${this.icon}` }), h$2("bcm-typography", { class: "tw-text-slate-700 tw-text-2" }, h$2("slot", null))));
+    const { text, description, status, size, icon } = this;
+    const { host, textStyle, iconStyle, descriptionStyle } = emptyStyle({ size, status });
+    return (h$2(Host, { class: host() }, icon && (h$2("div", { class: iconStyle() }, h$2("i", { class: `${icon}` }))), text && h$2("bcm-typography", { class: textStyle() }, text), description && h$2("bcm-typography", { class: descriptionStyle() }, description), h$2("bcm-typography", { class: descriptionStyle() }, h$2("slot", null))));
   }
   get el() { return getElement(this); }
 };
 
-const expansionPanelCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap\"); .size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}.input-size-large{height:40px}.input-size-medium{height:32px}.input-size-small{height:24px}.resize-none textarea{resize:none}.resize-vertical textarea{resize:vertical}.resize-auto textarea{height:auto;resize:none}.textarea-size-large{padding:4px 0 0 4px;min-height:40px}.textarea-size-large .bcm-input-element{min-height:calc((40px - 8px) + 2px)}.textarea-size-large .input-clear-button{height:calc( 40px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-medium{padding:4px 0 0 4px;min-height:32px}.textarea-size-medium .bcm-input-element{min-height:calc((32px - 8px) + 2px)}.textarea-size-medium .input-clear-button{height:calc( 32px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-small{padding:0px 0 0 4px;min-height:24px}.textarea-size-small .bcm-input-element{min-height:calc((24px - 8px) + 2px)}.textarea-size-small .input-clear-button{height:calc( 24px - 16px );top:8px;padding:0;margin-right:8px}*{box-sizing:border-box}.bcm-expansion-panel{font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;display:block;width:100%;background-color:var(--bcm-new-ds-color-white);border-radius:8px;border:1px solid var(--bcm-new-ds-color-slate-300);box-sizing:border-box}.bcm-expansion-panel+.bcm-expansion-panel{margin-top:4px}.bcm-expansion-panel__header{display:flex;align-items:center;justify-content:flex-start;user-select:none;min-height:50px;border-radius:8px;padding:4px 24px;color:var(--bcm-new-ds-color-slate-700);font-weight:600}.bcm-expansion-panel__header-content{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;flex-wrap:nowrap;gap:8px}.bcm-expansion-panel__header:hover{cursor:pointer}.bcm-expansion-panel__header-title{order:1;user-select:none;width:100%;display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:4px}.bcm-expansion-panel__header-title-description{margin-left:calc(4px / 2);color:var(--bcm-new-ds-color-slate-500);font-size:12px;line-height:calc(12px + 8px)}.bcm-expansion-panel__header-tooltip{line-height:1;color:var(--bcm-new-ds-color-slate-800)}.bcm-expansion-panel__header-toggle{height:100%;order:0;width:20px;display:flex;align-items:center;justify-content:center;transform:rotate(0deg);transition:transform 0.2s ease-in-out;font-size:12px}.bcm-expansion-panel__header-extra{display:none}.bcm-expansion-panel__header-extra:not(:empty){cursor:default;display:flex;align-items:center;order:5;line-height:1;padding:0 8px}.bcm-expansion-panel__header-extra .bcm-expansion-panel__extra-content{display:flex;align-items:center}.bcm-expansion-panel__body{display:none;padding:12px 24px}.bcm-expansion-panel--icon-right .bcm-expansion-panel__header{justify-content:space-between;padding-left:24px}.bcm-expansion-panel--icon-right .bcm-expansion-panel__header-toggle{order:6}.bcm-expansion-panel--invalid .bcm-expansion-panel__header-toggle,.bcm-expansion-panel--invalid .bcm-expansion-panel__header-content{color:var(--bcm-new-ds-color-red-500)}.bcm-expansion-panel--expanded{border-bottom:1px solid var(--bcm-color-grey-5)}.bcm-expansion-panel--expanded .bcm-expansion-panel__header{border-radius:8px 8px 0 0}.bcm-expansion-panel--expanded .bcm-expansion-panel__header-toggle{transform:rotate(180deg)}.bcm-expansion-panel--expanded .bcm-expansion-panel__body{display:block}";
+const expansionPanelStyle = ce({
+  slots: {
+    base: "",
+    host: ["bcm-expansion-panel bcm-ui-element bcm-ui-feedback", "tw-block tw-w-full tw-bg-color-surface-card tw-rounded-cards tw-border tw-border-solid tw-border-color", "[&+.bcm-expansion-panel]:tw-mt-1"],
+    header: [
+      "bcm-expansion-panel__header",
+      "tw-flex tw-items-center tw-justify-start tw-gap-2 tw-select-none tw-min-h-14 tw-p-4 tw-text-color  tw-cursor-pointer",
+      "tw-border-solid tw-border-t-0 tw-border-x-0 tw-border-b",
+    ],
+    headerTitle: ["bcm-expansion-panel__header-title", "tw-order-1 tw-select-none tw-w-full tw-flex tw-items-baseline tw-justify-start tw-gap-2", "tw-text-size-6 tw-font-semibold "],
+    headerTitleDescription: ["bcm-expansion-panel__header-title-description", "tw-text-color-helper tw-text-size-3 tw-font-normal"],
+    headerTooltip: ["bcm-expansion-panel__header-tooltip", "tw-leading-none tw-text-size-5 tw-text-color-helper"],
+    headerExtra: ["bcm-expansion-panel__header-extra", "empty:tw-hidden tw-flex tw-items-center tw-order-5 tw-leading-none tw-py-0 tw-px-2"],
+    headerToggle: ["bcm-expansion-panel__header-toggle", "tw-h-full tw-w-5 tw-flex tw-items-center tw-justify-center  tw-transition-transform tw-duration-200 tw-text-size-5"],
+    body: "bcm-expansion-panel__body tw-p-4",
+  },
+  variants: {
+    valid: {
+      true: {
+        host: "bcm-expansion-panel--valid",
+      },
+      false: {
+        host: "bcm-expansion-panel--invalid",
+        headerToggle: "tw-text-red-500",
+        headerTitle: "tw-text-red-500",
+      },
+    },
+    expanded: {
+      true: {
+        host: ["bcm-expansion-panel--expanded", "tw-border-b"],
+        header: "tw-rounded-t-cards tw-rounded-b-none tw-border-b-color",
+        headerToggle: "tw-rotate-180",
+        body: "tw-block",
+      },
+      false: {
+        host: "bcm-expansion-panel--collapsed",
+        header: "tw-rounded-cards  tw-border-b-transparent",
+        headerToggle: "tw-rotate-0 ",
+        body: "tw-hidden",
+      },
+    },
+    disabled: {
+      true: {
+        host: "bcm-expansion-panel--disabled ",
+      },
+      false: {
+        host: "",
+      },
+    },
+    hideToggle: {
+      true: {
+        host: "bcm-expansion-panel--hide-toggle",
+      },
+      false: {
+        host: "",
+      },
+    },
+    expandIconPosition: {
+      right: {
+        host: "bcm-expansion-panel--icon-right",
+        // header: "tw-justify-between tw-pl-6",
+        headerToggle: "tw-order-6",
+      },
+      left: {
+        host: "bcm-expansion-panel--icon-left ",
+        // headerToggle: "tw-pr-6",
+      },
+    },
+    hidden: {
+      true: {
+        host: "hidden",
+      },
+      false: {
+        host: "",
+      },
+    },
+  },
+  defaultVariants: {
+    valid: true,
+    expanded: false,
+    disabled: false,
+    hideToggle: false,
+    expandIconPosition: "right",
+    hidden: false,
+  },
+});
 
 const BcmExpansionPanel = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.bcmOpen = createEvent(this, "bcm-open", 7);
+    this.bcmExpansionPanelOpen = createEvent(this, "bcm-expansion-panel-open", 7);
     this.bcmClose = createEvent(this, "bcm-close", 7);
+    this.bcmExpansionPanelClose = createEvent(this, "bcm-expansion-panel-close", 7);
     this.bcmExtra = createEvent(this, "bcm-extra", 7);
+    this.bcmExpansionPanelExtra = createEvent(this, "bcm-expansion-panel-extra", 7);
+    this.bcmExpansionPanelToggle = createEvent(this, "bcm-expansion-panel-toggle", 7);
     this._id = Generate.UID();
     this.expanded = false;
     this.disabled = false;
     this.hidden = false;
     this.valid = true;
     this.hideToggle = false;
-    this.expandIconPosition = 'right';
-    this.headerColor = 'white';
+    this.expandIconPosition = "right";
     this.tooltip = undefined;
     this.tooltipDefaultValue = {
-      message: '',
-      placement: 'top',
-      trigger: 'hover',
-      icon: 'fas fa-question-circle',
-      color: 'grey-8',
+      message: "",
+      placement: "top",
+      trigger: "hover",
+      icon: "fas fa-question-circle",
+      color: "slate-700",
     };
   }
-  componentWillRender() {
-    this.restoreSlots();
-  }
   componentDidLoad() {
     this.checkExpanded();
   }
@@ -24474,58 +25013,80 @@ const BcmExpansionPanel = class {
     return tool;
   }
   checkExpanded() {
-    this.expanded = !!this.el['expanded'];
-  }
-  restoreSlots() {
-    const slots = this.el.querySelectorAll('bcm-expansion-panel-header, bcm-expansion-panel-description, bcm-expansion-panel-extra');
-    if (slots) {
-      slots.forEach(element => {
-        let slotName = StringHelper.lowercase(StringHelper.split(element.nodeName, '-').pop());
-        element.slot = slotName;
-        element.classList.add(`bcm-expansion-panel__${slotName}-content`);
-        let color = element.getAttribute('color');
-        if (color) {
-          color = color == 'white' ? color : color + '-50';
-          this.headerColor = color;
-        }
-      });
-    }
+    this.expanded = !!this.el["expanded"];
   }
   toggle() {
     if (this.disabled) {
       return;
     }
     this.expanded = !this.expanded;
+    this.bcmExpansionPanelToggle.emit(this._id);
     if (this.expanded) {
       this.bcmOpen.emit(this._id);
+      this.bcmExpansionPanelOpen.emit(this._id);
     }
     else {
       this.bcmClose.emit(this._id);
+      this.bcmExpansionPanelClose.emit(this._id);
     }
   }
   clickExtra(e) {
     e.stopPropagation();
     this.bcmExtra.emit(e);
+    this.bcmExpansionPanelExtra.emit(e);
   }
   render() {
     const { _id, expanded, disabled, hidden, hideToggle, tooltip, valid } = this;
     const { message, placement, icon, trigger, color } = tooltip ? this.createTooltip() : {};
-    const hostClasses = classnames('bcm-expansion-panel', valid ? 'bcm-expansion-panel--valid' : 'bcm-expansion-panel--invalid', {
-      'bcm-expansion-panel--expanded': expanded,
-      'bcm-expansion-panel--disabled': disabled,
-      'bcm-expansion-panel--hide-toggle': hideToggle,
-      'bcm-expansion-panel--icon-right': this.expandIconPosition === 'right',
+    const { host, header, headerTitle, headerTitleDescription, headerTooltip, headerExtra, headerToggle, body } = expansionPanelStyle({
+      valid,
+      expanded,
+      disabled,
+      hideToggle,
+      expandIconPosition: this.expandIconPosition,
       hidden,
     });
-    return (h$2(Host, { class: hostClasses }, h$2("div", { class: "bcm-expansion-panel__header", onClick: () => this.toggle(), style: { 'background-color': ColorHelper.dsColor(this.headerColor) } }, h$2("div", { class: "bcm-expansion-panel__header-title" }, h$2("span", { id: _id + '-header' }, h$2("slot", { name: "header" })), tooltip && (h$2("span", { class: "bcm-expansion-panel__header-tooltip", style: Object.assign({}, color && { color: ColorHelper.convertColorToHex(color) }) }, h$2("bcm-tooltip", { message: message, placement: placement, trigger: trigger, "aria-label": message }, h$2("bcm-icon", { color: color, icon: icon })))), h$2("span", { id: _id + '-description', class: "bcm-expansion-panel__header-title-description" }, h$2("slot", { name: "description" }))), h$2("span", { id: _id + '-extra', class: "bcm-expansion-panel__header-extra", onClick: (e) => this.clickExtra(e) }, h$2("slot", { name: "extra" })), !hideToggle && (h$2("div", { class: "bcm-expansion-panel__header-toggle" }, h$2("bcm-icon", { icon: "far fa-chevron-down" })))), h$2("div", { class: "bcm-expansion-panel__body", id: _id + '-body' }, h$2("slot", null))));
+    return (h$2(Host, { class: host() }, h$2("div", { class: header(), onClick: () => this.toggle() }, h$2("div", { class: headerTitle() }, h$2("span", { id: _id + "-header" }, h$2("slot", { name: "header" })), tooltip && (h$2("span", { class: headerTooltip(), style: Object.assign({}, (color && { color: ColorHelper.getTwColor(color) })) }, h$2("bcm-tooltip", { message: message, placement: placement, trigger: trigger, "aria-label": message }, h$2("i", { class: icon })))), h$2("span", { id: _id + "-description", class: headerTitleDescription() }, h$2("slot", { name: "description" }))), h$2("span", { id: _id + "-extra", class: headerExtra(), onClick: e => this.clickExtra(e) }, h$2("slot", { name: "extra" })), !hideToggle && (h$2("div", { class: headerToggle() }, h$2("i", { class: "fas fa-chevron-down" })))), h$2("div", { class: body(), id: _id + "-body" }, h$2("slot", null))));
+  }
+  get el() { return getElement(this); }
+};
+
+const BcmExpansionPanelDescription = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.el.slot = "description";
+  }
+  render() {
+    return (h$2(Host, { class: classnames("") }, h$2("slot", null)));
+  }
+  get el() { return getElement(this); }
+};
+
+const BcmExpansionPanelExtra = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.el.slot = "extra";
+  }
+  render() {
+    return (h$2(Host, { class: classnames("bcm-expansion-panel__header-content tw-flex tw-items-center tw-gap-1") }, h$2("slot", null)));
+  }
+  get el() { return getElement(this); }
+};
+
+const BcmExpansionPanelHeader = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.el.slot = "header";
+  }
+  render() {
+    return (h$2(Host, { class: classnames("bcm-expansion-panel__header-content tw-flex tw-items-center tw-justify-start tw-gap-1") }, h$2("slot", null)));
   }
   get el() { return getElement(this); }
 };
-BcmExpansionPanel.style = expansionPanelCss;
 
 const formCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");.size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}.input-size-large{height:40px}.input-size-medium{height:32px}.input-size-small{height:24px}.resize-none textarea{resize:none}.resize-vertical textarea{resize:vertical}.resize-auto textarea{height:auto;resize:none}.textarea-size-large{padding:4px 0 0 4px;min-height:40px}.textarea-size-large .bcm-input-element{min-height:calc((40px - 8px) + 2px)}.textarea-size-large .input-clear-button{height:calc( 40px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-medium{padding:4px 0 0 4px;min-height:32px}.textarea-size-medium .bcm-input-element{min-height:calc((32px - 8px) + 2px)}.textarea-size-medium .input-clear-button{height:calc( 32px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-small{padding:0px 0 0 4px;min-height:24px}.textarea-size-small .bcm-input-element{min-height:calc((24px - 8px) + 2px)}.textarea-size-small .input-clear-button{height:calc( 24px - 16px );top:8px;padding:0;margin-right:8px}:host{display:block;margin-bottom:8px}:host(.hidden){display:none}";
 
-var __decorate$6 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$7 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
     r = Reflect.decorate(decorators, target, key, desc);
@@ -24949,42 +25510,42 @@ const BcmForm = class {
   }
   get el() { return getElement(this); }
 };
-__decorate$6([
+__decorate$7([
   IsLoad()
 ], BcmForm.prototype, "el", void 0);
 BcmForm.style = formCss;
 
-const iconCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");.size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}.input-size-large{height:40px}.input-size-medium{height:32px}.input-size-small{height:24px}.resize-none textarea{resize:none}.resize-vertical textarea{resize:vertical}.resize-auto textarea{height:auto;resize:none}.textarea-size-large{padding:4px 0 0 4px;min-height:40px}.textarea-size-large .bcm-input-element{min-height:calc((40px - 8px) + 2px)}.textarea-size-large .input-clear-button{height:calc( 40px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-medium{padding:4px 0 0 4px;min-height:32px}.textarea-size-medium .bcm-input-element{min-height:calc((32px - 8px) + 2px)}.textarea-size-medium .input-clear-button{height:calc( 32px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-small{padding:0px 0 0 4px;min-height:24px}.textarea-size-small .bcm-input-element{min-height:calc((24px - 8px) + 2px)}.textarea-size-small .input-clear-button{height:calc( 24px - 16px );top:8px;padding:0;margin-right:8px}.bcm-icon.hidden{display:none}";
-
 const customIconList = {
-  "message-bot": "message-bot.svg",
+  "message-bot": {
+    icon: "message-bot.svg",
+    type: "image", // font, image
+  },
 };
 const BcmIcon = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    this.hidden = false;
     this.icon = undefined;
   }
   getIcon() {
     const { icon } = this;
-    if (icon in customIconList) {
-      const _icon = getAssetPath("./static/" + customIconList[icon]);
-      return (h$2("div", { class: "tw-flex tw-h-fit tw-w-fit tw-items-center tw-justify-center" }, h$2("img", { src: `${_icon}`, alt: icon, class: "tw-h-fit tw-w-fit" })));
+    if (customIconList[icon]) {
+      if (customIconList[icon].type === "image") {
+        const _icon = getAssetPath("./static/" + customIconList[icon].icon);
+        return (h$2("div", { class: "tw-flex tw-h-fit tw-w-fit tw-items-center tw-justify-center" }, h$2("img", { src: `${_icon}`, alt: icon, class: "tw-h-fit tw-w-fit" })));
+      }
+      else {
+        return h$2("i", { class: `${customIconList[icon].icon}` });
+      }
     }
     return h$2("i", { class: `${icon}` });
   }
   render() {
-    const { /*icon,*/ hidden } = this;
-    return h$2(Host, { class: `bcm-icon fa ${hidden ? "hidden" : ""}` }, this.getIcon());
+    return h$2(Host, { class: "bcm-icon" }, this.getIcon());
   }
   static get assetsDirs() { return ["static"]; }
-  get el() { return getElement(this); }
 };
-BcmIcon.style = iconCss;
 
-const inputCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap\"); .size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}.input-size-large{height:40px}.input-size-medium{height:32px}.input-size-small{height:24px}.resize-none textarea{resize:none}.resize-vertical textarea{resize:vertical}.resize-auto textarea{height:auto;resize:none}.textarea-size-large{padding:4px 0 0 4px;min-height:40px}.textarea-size-large .bcm-input-element{min-height:calc((40px - 8px) + 2px)}.textarea-size-large .input-clear-button{height:calc( 40px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-medium{padding:4px 0 0 4px;min-height:32px}.textarea-size-medium .bcm-input-element{min-height:calc((32px - 8px) + 2px)}.textarea-size-medium .input-clear-button{height:calc( 32px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-small{padding:0px 0 0 4px;min-height:24px}.textarea-size-small .bcm-input-element{min-height:calc((24px - 8px) + 2px)}.textarea-size-small .input-clear-button{height:calc( 24px - 16px );top:8px;padding:0;margin-right:8px}.bcm-input[no-margin]{margin:0}.bcm-textarea[no-margin]{margin:0}.bcm-switch[no-margin]{margin:0}.bcm-checkbox[no-margin]{margin:0}.bcm-radio-group[no-margin]{margin:0}.bcm-checkbox-group[no-margin]{margin:0}.bcm-range[no-margin]{margin:0}.bcm-form[no-margin]{margin:0}.bcm-form-group[no-margin]{margin:0}.bcm-list[no-margin]{margin:0}.bcm-colorpicker[no-margin]{margin:0}.bcm-date-picker[no-margin]{margin:0}.bcm-time-picker[no-margin]{margin:0}.bcm-datetime-picker[no-margin]{margin:0}.bcm-select[no-margin]{margin:0}.bcm-listbox[no-margin]{margin:0}*{box-sizing:border-box}.bcm-input{display:inline-flex;flex-direction:column;width:100%;max-width:256px;margin-bottom:8px}.bcm-input.full-width{max-width:100%}.bcm-input.hidden{display:none}.bcm-input__container{font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;display:flex;align-items:stretch;flex-direction:row;background-color:var(--bcm-new-ds-color-white);border:1px solid var(--bcm-new-ds-color-slate-300);border-radius:4px;box-sizing:border-box;cursor:text;padding:0 0 0 4px;position:relative;width:100%}.bcm-input__container.disabled{background-color:var(--bcm-new-ds-color-slate-50);cursor:not-allowed}.bcm-input__container.disabled .bcm-input-element{color:var(--bcm-new-ds-color-slate-500)}.bcm-input__container.readonly{background-color:var(--bcm-new-ds-color-slate-50);cursor:default}.bcm-input__container.readonly .bcm-input-element{color:var(--bcm-new-ds-color-slate-600)}.bcm-input__container:not(.disabled):hover .caret-container,.bcm-input__container:not(.disabled).focused .caret-container{opacity:1}.bcm-input__container:not(.disabled):hover .input-clear-button,.bcm-input__container:not(.disabled).focused .input-clear-button{opacity:1}.bcm-input__container:not(.disabled).focused{background-color:var(--bcm-new-ds-color-slate-50)}.bcm-input__container:not(.disabled):hover{border-color:var(--bcm-color-prime-blue-6)}.bcm-input__container.empty .input-clear-button{display:none}.bcm-input__container.invalid,.bcm-input__container.error{border-color:var(--bcm-new-ds-color-red-500)}.bcm-input__container .bcm-input-element{width:100%;color:var(--bcm-new-ds-color-slate-600);flex:1;border:none;background:transparent;box-shadow:unset;padding:0 4px;font-family:\"Inter\", sans-serif;cursor:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;text-overflow:ellipsis}.bcm-input__container .bcm-input-element::placeholder{font-family:\"Inter\", sans-serif;color:var(--bcm-new-ds-color-slate-300);user-select:none}.bcm-input__container .bcm-input-element::-webkit-search-decoration,.bcm-input__container .bcm-input-element::-webkit-search-cancel-button,.bcm-input__container .bcm-input-element::-webkit-search-results-button,.bcm-input__container .bcm-input-element::-webkit-search-results-decoration,.bcm-input__container .bcm-input-element::-webkit-calendar-picker-indicator,.bcm-input__container .bcm-input-element::-webkit-inner-spin-button,.bcm-input__container .bcm-input-element::-webkit-outer-spin-button{-webkit-appearance:none}.bcm-input__container .caret-container{width:30px;display:flex;flex-direction:column;justify-content:center;align-items:stretch;border-left:1px solid #D9D9D9;transition:0.2s opacity;user-select:none;box-sizing:border-box}.bcm-input__container .caret-container .bcm-input-caret{display:flex;align-items:center;justify-content:center;color:var(--bcm-color-grey-7);cursor:pointer;flex:1}.bcm-input__container .caret-container .bcm-input-caret bcm-icon{line-height:1}.bcm-input__container .caret-container .bcm-input-caret:hover{color:var(--bcm-color-prime-blue-6)}.bcm-input__container .caret-container .bcm-input-caret:active{background-color:var(--bcm-color-grey-3)}.bcm-input__container .caret-container .bcm-input-caret:last-child{border-top:1px solid #D9D9D9}.bcm-input__container .caret-container.disabled{background-color:var(--bcm-color-grey-3)}.bcm-input__container .caret-container.disabled .bcm-input-caret{cursor:not-allowed}.bcm-input__container .input-suffix-content{display:flex;align-items:center;justify-content:center}.bcm-input__container .input-prefix:not(:empty){padding-left:4px}.bcm-input__container .input-suffix:not(:empty){min-width:24px;padding-right:4px}.bcm-input__container .input-prefix:not(:empty),.bcm-input__container .input-suffix:not(:empty){display:flex;align-items:center;justify-content:center;cursor:default;color:#64748a}.bcm-input__container .input-prefix:not(:empty) .unit-prefix,.bcm-input__container .input-suffix:not(:empty) .unit-prefix{color:#64748a}.bcm-input__container .input-prefix-button:not(:empty),.bcm-input__container .input-suffix-button:not(:empty){cursor:pointer}.bcm-input__container .caret-container,.bcm-input__container .input-clear-button{opacity:0}.bcm-input__container--small{font-size:12px}.bcm-input__container--medium{font-size:14px}.bcm-input__container--large{font-size:16px}.bcm-input__textarea.clearable .bcm-input-element{padding-right:24px}.bcm-input__textarea .input-clear-button{position:absolute;top:4px;right:0}";
-
-var __decorate$5 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$6 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
     r = Reflect.decorate(decorators, target, key, desc);
@@ -25005,7 +25566,7 @@ const BcmInput = class {
     this.isBlur = false;
     this._id = Generate.UID();
     this._internal_id = Generate.UID();
-    this.value = '';
+    this.value = "";
     this.size = Bcm$1.Size.medium;
     this.label = undefined;
     this.pattern = undefined;
@@ -25021,10 +25582,8 @@ const BcmInput = class {
     this.required = false;
     this.fullWidth = false;
     this.noDefaultIcon = undefined;
-    this.disableWatchValue = false // datetimepicker
-    ;
-    this.passwordToggle = false // type password
-    ;
+    this.disableWatchValue = false;
+    this.passwordToggle = false;
     this.maxLength = null;
     this.minLength = null;
     this.unitPrefix = null;
@@ -25043,7 +25602,7 @@ const BcmInput = class {
     this.captionCache = undefined;
     this.captionTypeCache = undefined;
     this.inValid = false;
-    this.valueCache = '';
+    this.valueCache = "";
     this.focused = false;
     this.isPasswordVisible = false;
   }
@@ -25185,8 +25744,8 @@ const BcmInput = class {
     return false;
   }
   handleClear(e) {
-    this.inputElement.value = '';
-    this.value = '';
+    this.inputElement.value = "";
+    this.value = "";
     this.inputElement.focus();
     this.clear.emit(e);
     this.change.emit(this.value);
@@ -25346,24 +25905,48 @@ const BcmInput = class {
     }
   }
   render() {
-    const { value, size, label, type, captionType, caption, captionError, placeholder, fullWidth, disabled, readonly, clearable, passwordToggle, isPasswordVisible, noDefaultIcon, unit, inValid, focused, unitPrefix, noCaption, required, hidden, _id, autocomplete } = this;
+    const { value, size, label, type, captionType, caption, captionError, placeholder, fullWidth, disabled, readonly, clearable, passwordToggle, isPasswordVisible, noDefaultIcon, unit, inValid, focused, 
+    // unitPrefix,
+    noCaption, required, hidden, _id, autocomplete, _prefix, _suffix, } = this;
     const isActiveClearable = (value === null || value === void 0 ? void 0 : value.length) > 0 && clearable;
-    const hostClasses = classnames('bcm-input', `bcm-input__container--${size}`, {
+    const { host, inputContainer, input, slotClass, clearButton, controls, controlsBtn, controlsBtnDown, controlsBtnUp, controlsDivider } = inputStyle({
+      size,
+      fullWidth,
+      // şüpheli kısımlar
+      focused: focused,
+      clearable: isActiveClearable,
+      disabled,
+      readonly,
+      invalid: inValid,
+      unit: (unit === null || unit === void 0 ? void 0 : unit.length) > 0,
+      // 'empty': value?.length < 1,
+      error: captionType === "error",
       hidden,
-      // 'no-margin': noMargin,
-      'full-width': fullWidth
     });
-    return (h$2(Host, { onfocus: () => this.onBcmFocus(), class: hostClasses, onClick: () => this.onBcmFocus() }, label && h$2("bcm-label", { onClick: () => this.toggleLinked(), tooltip: this.tooltip, type: captionType, value: label, required: required, htmlFor: _id, id: _id + "-label" }), h$2(InputTemplate, { id: _id, type: type, value: value, pattern: this.pattern, placeholder: placeholder, disabled: disabled, readonly: readonly, clearable: isActiveClearable, passwordToggle: passwordToggle, isPasswordVisible: isPasswordVisible, noDefaultIcon: noDefaultIcon, focused: focused, inValid: inValid, unitPrefix: unitPrefix, maxLength: this.maxLength, internalId: this._internal_id, captionType: captionType, unit: unit, size: size, handleFocus: () => this.handleFocus(), handleBlur: () => this.handleBlur(), handleChange: () => this.handleChange(), handleInput: () => this.handleInput(), steps: (e) => this.stepUpOrDown(e), changePasswordVisibility: () => this.changePasswordVisibility(), handleClear: (e) => this.handleClear(e), eyeDropper: () => this.eyeDropper(), isEyeDropperSupported: () => this.isEyeDropperSupported(), ref: (el) => this.inputElement = el, _suffix: this._suffix, _prefix: this._prefix, autocomplete: autocomplete }), h$2(CaptionTemplate, { noCaption: noCaption, captionType: captionType, captionError: captionError, caption: caption, customErrorMessage: this.customErrorMessage }), type == Bcm$1.InputType.color &&
+    let _type = type;
+    switch (type) {
+      case "password":
+        _type = isPasswordVisible ? "text" : "password";
+        break;
+      case "color":
+        _type = "text";
+        break;
+      case "number":
+        _type = (unit === null || unit === void 0 ? void 0 : unit.length) > 0 && !focused ? "text" : type;
+        break;
+    }
+    return (h$2(Host, { class: host(), onClick: () => this.onBcmFocus() }, label && h$2("bcm-label", { onClick: () => this.toggleLinked(), tooltip: this.tooltip, type: captionType, value: label, required: required, htmlFor: _id }), h$2("div", { class: inputContainer(), id: _id + "-container" }, type === "color" && (h$2("i", { class: "tw-flex tw-h-4 tw-w-4 tw-items-center tw-justify-center tw-rounded-full tw-border tw-border-slate-300", style: {
+        backgroundColor: value,
+      } })), h$2("div", { class: slotClass() }, h$2("slot", { name: "prefix" }), _prefix && _prefix.length > 0 && h$2("span", { innerHTML: _prefix })), h$2("input", { class: input(), id: _id + "-input", type: _type, value: value, pattern: this.pattern, placeholder: placeholder, disabled: disabled, readonly: readonly, onInput: _event => this.handleInput(), onChange: _event => this.handleChange(), onFocus: _event => this.handleFocus(), onBlur: _event => this.handleBlur(), autoComplete: autocomplete ? "on" : "off", required: required, ref: el => (this.inputElement = el) }), h$2("div", { class: slotClass() }, isActiveClearable && (h$2("button", { type: "button", class: clearButton(), onClick: event => this.handleClear(event) }, h$2("i", { class: "far fa-times" }))), h$2("slot", { name: "suffix" }), _suffix && _suffix.length > 0 && h$2("span", { innerHTML: _suffix }), (type === "password" || type === "text") && passwordToggle && (h$2("button", { type: "button", class: clearButton(), onClick: () => this.changePasswordVisibility() }, h$2("i", { class: isPasswordVisible ? "far fa-eye-slash" : "far fa-eye" }))), Object.keys(defaultIcons$1).includes(type) && !noDefaultIcon && (h$2("i", { class: defaultIcons$1[type] })), type === "number" && (h$2("div", { class: controls() }, h$2("button", { type: "button", onClick: () => this.stepUpOrDown("up"), class: classnames(controlsBtn(), controlsBtnUp()) }, h$2("i", { class: "fas fa-caret-up" })), h$2("div", { class: controlsDivider() }), h$2("button", { type: "button", onClick: () => this.stepUpOrDown("down"), class: classnames(controlsBtn(), controlsBtnDown()) }, h$2("i", { class: "fas fa-caret-down" })))), type === "color" && this.isEyeDropperSupported() && (h$2("button", { type: "button", class: clearButton(), onClick: () => this.eyeDropper() }, h$2("i", { class: "far fa-eye-dropper" }))))), h$2(CaptionTemplate, { noCaption: noCaption, captionType: captionType, captionError: captionError, caption: caption, customErrorMessage: this.customErrorMessage }), type == Bcm$1.InputType.color &&
       h$2("bcm-linked", { targetId: this._id + "-container", id: this._id + "-linked" }, h$2("bcm-colorful", { id: this._id + "-picker", color: this.value, onBcmChange: e => this.setValue(e.detail) }))));
   }
   static get watchers() { return {
     "value": ["watchValue"]
   }; }
 };
-__decorate$5([
+__decorate$6([
   IsLoad()
 ], BcmInput.prototype, "inputElement", void 0);
-BcmInput.style = inputCss;
 
 const itemCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap\"); .size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}.input-size-large{height:40px}.input-size-medium{height:32px}.input-size-small{height:24px}.resize-none textarea{resize:none}.resize-vertical textarea{resize:vertical}.resize-auto textarea{height:auto;resize:none}.textarea-size-large{padding:4px 0 0 4px;min-height:40px}.textarea-size-large .bcm-input-element{min-height:calc((40px - 8px) + 2px)}.textarea-size-large .input-clear-button{height:calc( 40px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-medium{padding:4px 0 0 4px;min-height:32px}.textarea-size-medium .bcm-input-element{min-height:calc((32px - 8px) + 2px)}.textarea-size-medium .input-clear-button{height:calc( 32px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-small{padding:0px 0 0 4px;min-height:24px}.textarea-size-small .bcm-input-element{min-height:calc((24px - 8px) + 2px)}.textarea-size-small .input-clear-button{height:calc( 24px - 16px );top:8px;padding:0;margin-right:8px}*{box-sizing:border-box}.bcm-item{box-sizing:border-box;display:flex;flex-direction:row;align-items:center;justify-content:flex-start;flex-wrap:nowrap;--bcm-item-color-default:var(--bcm-new-ds-color-white);--bcm-item-background-color-default:var(--bcm-new-ds-color-blue-500);--bcm-item-color-hover:var(--bcm-new-ds-color-white);--bcm-item-background-color-hover:var(--bcm-new-ds-color-blue-600);--bcm-item-color-focus-visible:var(--bcm-new-ds-color-white);--bcm-item-background-color-focus-visible:var(--bcm-new-ds-color-blue-800);--bcm-item-color-active:var(--bcm-new-ds-color-white);--bcm-item-background-color-active:var(--bcm-new-ds-color-blue-700);--bcm-item-color-disabled:var(--bcm-new-ds-color-white);--bcm-item-background-color-disabled:var(--bcm-new-ds-color-slate-400);font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;border-radius:4px;outline:none;color:var(--bcm-item-color-default);background-color:var(--bcm-item-background-color-default)}.bcm-item-size-small{font-size:12px;line-height:calc(12px + 8px);padding:2px 12px;min-height:calc(calc(12px + 8px) + calc(2px) * 2)}.bcm-item-size-medium{font-size:14px;line-height:calc(14px + 8px);padding:5px 12px;min-height:calc(calc(14px + 8px) + calc(5px) * 2)}.bcm-item-size-large{font-size:16px;line-height:calc(16px + 8px);padding:8px 12px;min-height:calc(calc(16px + 8px) + calc(8px) * 2)}.bcm-item:default{color:var(--bcm-item-color-default);background-color:var(--bcm-item-background-color-default)}.bcm-item:hover{color:var(--bcm-item-color-hover);background-color:var(--bcm-item-background-color-hover)}.bcm-item:focus-visible{color:var(--bcm-item-color-focus-visible);background-color:var(--bcm-item-background-color-focus-visible)}.bcm-item:active{color:var(--bcm-item-color-active);background-color:var(--bcm-item-background-color-active)}.bcm-item:disabled{color:var(--bcm-item-color-disabled);background-color:var(--bcm-item-background-color-disabled)}.bcm-item:not(.static):hover{cursor:pointer}";
 
@@ -25449,7 +26032,7 @@ const BcmItems = class {
   get el() { return getElement(this); }
 };
 
-var __decorate$4 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$5 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
     r = Reflect.decorate(decorators, target, key, desc);
@@ -25472,53 +26055,102 @@ const BcmLabel = class {
     this.hidden = false;
     this.type = Bcm$1.Status.default;
     this.tooltip = undefined;
+    this.noMargin = false;
   }
   render() {
-    const { required, value, label, size, form, htmlFor, type, tooltip } = this;
-    return (h$2(Host, { class: "tw-inline-block tw-leading-none" }, h$2(LabelTemplate, { form: form, htmlFor: htmlFor, value: value || label, size: size, type: type, required: required, tooltip: tooltip })));
+    const { required, value, label, size, form, htmlFor, type, tooltip, noMargin } = this;
+    return (h$2(Host, { class: "tw-inline-block tw-leading-none" }, h$2(LabelTemplate, { form: form, htmlFor: htmlFor, value: value || label, size: size, type: type, required: required, tooltip: tooltip, noMargin: noMargin })));
   }
   get el() { return getElement(this); }
 };
-__decorate$4([
+__decorate$5([
   IsLoad()
 ], BcmLabel.prototype, "el", void 0);
 
-const linkCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap\"); .size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}.input-size-large{height:40px}.input-size-medium{height:32px}.input-size-small{height:24px}.resize-none textarea{resize:none}.resize-vertical textarea{resize:vertical}.resize-auto textarea{height:auto;resize:none}.textarea-size-large{padding:4px 0 0 4px;min-height:40px}.textarea-size-large .bcm-input-element{min-height:calc((40px - 8px) + 2px)}.textarea-size-large .input-clear-button{height:calc( 40px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-medium{padding:4px 0 0 4px;min-height:32px}.textarea-size-medium .bcm-input-element{min-height:calc((32px - 8px) + 2px)}.textarea-size-medium .input-clear-button{height:calc( 32px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-small{padding:0px 0 0 4px;min-height:24px}.textarea-size-small .bcm-input-element{min-height:calc((24px - 8px) + 2px)}.textarea-size-small .input-clear-button{height:calc( 24px - 16px );top:8px;padding:0;margin-right:8px}*{box-sizing:border-box}.bcm-link{font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;display:inline;color:#1D4ED8}.bcm-link.hidden{display:none}.bcm-link.disabled{pointer-events:none;cursor:not-allowed}.bcm-link.disabled .bcm-link__anchor{color:#6B7280}.bcm-link__anchor{display:inline-flex;align-items:baseline;font-size:inherit;color:inherit;text-decoration:none}.bcm-link__anchor.prefix .prefix-icon{margin-right:4px}.bcm-link__anchor.suffix .suffix-icon{margin-left:4px}.bcm-link__anchor:hover,.bcm-link__anchor:focus,.bcm-link__anchor:active,.bcm-link__anchor:focus-visible{outline:none}.bcm-link__anchor:hover{text-decoration:underline}.bcm-link__anchor:active{color:var(--bcm-new-ds-color-blue-700)}.bcm-link__anchor:focus-visible{color:var(--bcm-new-ds-color-blue-800)}.bcm-link__anchor:visited{color:#7E22CE}";
+const linkStyle = ce({
+  slots: {
+    base: ["bcm-link__anchor tw-flex tw-items-baseline tw-justify-center tw-gap-2 tw-no-underline", "tw-outline-none"],
+    hostStyle: "bcm-link bcm-ui-element bcm-ui-action tw-inline tw-w-fit",
+  },
+  variants: {
+    size: {
+      small: {
+        base: "tw-text-size-4 tw-font-medium",
+      },
+      medium: {
+        base: "tw-text-size-5 tw-font-medium",
+      },
+      large: {
+        base: "tw-text-size-6 tw-font-medium",
+      },
+      inherit: {
+        base: "",
+      },
+    },
+    disabled: {
+      true: {
+        base: "tw-cursor-not-allowed tw-pointer-events-none tw-text-color-disabled",
+      },
+      false: {
+        base: "tw-cursor-pointer tw-text-color-primary hover:tw-underline visited:tw-text-color-visited focus-visible:tw-ring",
+      },
+    },
+  },
+  defaultVariants: {
+    size: "medium",
+    disabled: false
+  },
+});
 
 const BcmLink = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    this.hidden = false;
+    this.bcmLinkClick = createEvent(this, "bcm-link-click", 7);
+    this.bcmClick = createEvent(this, "bcm-click", 7);
+    this.isLink = () => !!this.href;
+    this.isExternal = (url) => url && !!(url.startsWith("http") || url.startsWith("//"));
     this.href = undefined;
-    this.target = undefined;
+    this.target = Bcm$1.Target["_blank"];
+    this.rel = "noreferrer noopener";
+    this.download = undefined;
     this.icon = undefined;
     this.disabled = false;
     this.iconPosition = Bcm$1.IconPosition.prefix;
-  }
-  handleOnClick(e) {
-    if (this.disabled) {
-      e.preventDefault();
-      e.stopPropagation();
-    }
-  }
-  linkIsExternal(url) {
-    return url && !!(url.startsWith('http') || url.startsWith('//'));
+    this.size = Bcm$1.Size.medium;
   }
   render() {
-    const { href, icon, hidden, target, iconPosition, disabled } = this;
-    const hostClasses = classnames('bcm-link', {
+    const { icon, iconPosition, disabled, size } = this;
+    /* Link Attributes */
+    const { href, target, rel, download } = this;
+    const linkAttributes = {
+      href: href,
+      target: target,
+      rel: rel,
+      download: download,
+    };
+    const commonAttributes = Object.assign(Object.assign({ "aria-label": "link" }, (!disabled && {
+      onClick: e => {
+        this.bcmLinkClick.emit(e);
+        this.bcmClick.emit(e);
+      },
+    })), (disabled && {
+      "disabled": true,
+      "aria-disabled": true,
+      "tabindex": -1,
+      "onClick": e => {
+        e.preventDefault();
+        e.stopPropagation();
+      },
+    }));
+    /* Tag */
+    const Tag = this.isLink() ? "a" : "span";
+    const { hostStyle, base } = linkStyle({
+      size,
       disabled,
-      hidden
-    });
-    const classes = classnames('bcm-link__anchor', iconPosition, {
-      'suffix': this.linkIsExternal(href)
     });
-    const ElementTagType = href ? 'a' : 'span';
-    return (h$2(Host, { disabled: disabled, class: hostClasses }, h$2(ElementTagType, { class: classes, href: href, target: this.linkIsExternal(href) ? '_blank' : target }, icon && iconPosition === Bcm$1.IconPosition.prefix && h$2("bcm-icon", { class: "prefix-icon", icon: icon }), h$2("slot", null), this.linkIsExternal(href) && h$2("bcm-icon", { class: "suffix-icon", icon: "far fa-external-link-alt" }))));
+    return (h$2(Host, { class: hostStyle() }, h$2(Tag, Object.assign({ class: base() }, (this.isLink() ? linkAttributes : {}), commonAttributes), icon && iconPosition === Bcm$1.IconPosition.prefix && h$2("i", { class: icon }), h$2("slot", null), this.isExternal(href) && h$2("i", { class: "far fa-external-link-alt" }))));
   }
-  get el() { return getElement(this); }
 };
-BcmLink.style = linkCss;
 
 const BcmLinked = class {
   constructor(hostRef) {
@@ -26427,9 +27059,9 @@ class ListKeyControl extends KeyControl {
   keyUp() { }
 }
 
-const listCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap\"); @import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap\"); .size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}.input-size-large{height:40px}.input-size-medium{height:32px}.input-size-small{height:24px}.resize-none textarea{resize:none}.resize-vertical textarea{resize:vertical}.resize-auto textarea{height:auto;resize:none}.textarea-size-large{padding:4px 0 0 4px;min-height:40px}.textarea-size-large .bcm-input-element{min-height:calc((40px - 8px) + 2px)}.textarea-size-large .input-clear-button{height:calc( 40px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-medium{padding:4px 0 0 4px;min-height:32px}.textarea-size-medium .bcm-input-element{min-height:calc((32px - 8px) + 2px)}.textarea-size-medium .input-clear-button{height:calc( 32px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-small{padding:0px 0 0 4px;min-height:24px}.textarea-size-small .bcm-input-element{min-height:calc((24px - 8px) + 2px)}.textarea-size-small .input-clear-button{height:calc( 24px - 16px );top:8px;padding:0;margin-right:8px}.bcm-input[no-margin]{margin:0}.bcm-textarea[no-margin]{margin:0}.bcm-switch[no-margin]{margin:0}.bcm-checkbox[no-margin]{margin:0}.bcm-radio-group[no-margin]{margin:0}.bcm-checkbox-group[no-margin]{margin:0}.bcm-range[no-margin]{margin:0}.bcm-form[no-margin]{margin:0}.bcm-form-group[no-margin]{margin:0}.bcm-list[no-margin]{margin:0}.bcm-colorpicker[no-margin]{margin:0}.bcm-date-picker[no-margin]{margin:0}.bcm-time-picker[no-margin]{margin:0}.bcm-datetime-picker[no-margin]{margin:0}.bcm-select[no-margin]{margin:0}.bcm-listbox[no-margin]{margin:0}*{box-sizing:border-box}*{box-sizing:border-box}.bcm-checkbox{outline:none;border:none;--bcm-checkbox-primary-color-default:var(--bcm-new-ds-color-blue-500);--bcm-checkbox-secondary-color-default:var(--bcm-new-ds-color-white);--bcm-checkbox-primary-color-hover:var(--bcm-new-ds-color-blue-600);--bcm-checkbox-secondary-color-hover:var(--bcm-new-ds-color-slate-50);--bcm-checkbox-primary-color-focus-visible:var(--bcm-new-ds-color-blue-800);--bcm-checkbox-secondary-color-focus-visible:var(--bcm-new-ds-color-slate-50);--bcm-checkbox-primary-color-active:var(--bcm-new-ds-color-blue-700);--bcm-checkbox-secondary-color-active:var(--bcm-new-ds-color-slate-50);--bcm-checkbox-primary-color-disabled:var(--bcm-new-ds-color-slate-300);--bcm-checkbox-secondary-color-disabled:var(--bcm-new-ds-color-slate-200);display:inline-flex;width:fit-content;flex-direction:column;margin-bottom:8px}.bcm-checkbox:focus,.bcm-checkbox:hover,.bcm-checkbox:active{outline:none;border:none}.bcm-checkbox *{box-sizing:border-box}.bcm-checkbox input[type=radio],.bcm-checkbox input[type=checkbox]{-webkit-appearance:none;appearance:none;background-color:#fff;margin:0;display:none}.bcm-checkbox__input{display:flex;flex-direction:row;align-items:flex-start;justify-content:flex-start;flex-wrap:nowrap;padding-top:4px}.bcm-checkbox.hidden{display:none}.bcm-checkbox :hover{cursor:pointer}.bcm-checkbox[disabled] :hover,.bcm-checkbox.disabled :hover{cursor:not-allowed}.bcm-checkbox .slot{font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;font-weight:500;color:var(--bcm-new-ds-color-slate-600)}.bcm-checkbox .slot:not(:empty){margin-left:8px;margin-right:8px}.bcm-checkbox-size-small .slot{font-size:12px;line-height:calc(12px + 8px);margin-top:-2.5px}.bcm-checkbox-size-small .bcm-checkbox__input{min-height:calc(24px - 4px)}.bcm-checkbox-size-small .bcm-checkbox__label-icon{width:14px;height:14px;min-width:14px;font-size:calc(10px - 2px)}.bcm-checkbox-size-medium .slot{font-size:calc(12px + 1px);line-height:calc(12px + 8px);margin-top:-1.5px}.bcm-checkbox-size-medium .bcm-checkbox__input{min-height:calc(32px - 4px)}.bcm-checkbox-size-medium .bcm-checkbox__label-icon{width:16px;height:16px;min-width:16px;font-size:10px}.bcm-checkbox-size-large .slot{font-size:16px;line-height:calc(16px + 8px);margin-top:-1.5px}.bcm-checkbox-size-large .bcm-checkbox__input{min-height:calc(32px - 4px)}.bcm-checkbox-size-large .bcm-checkbox__label-icon{width:18px;height:18px;min-width:18px;font-size:12px}.bcm-checkbox__label{display:flex;flex-direction:row;align-items:flex-start;justify-content:flex-start;flex-wrap:nowrap}.bcm-checkbox__label-icon{display:flex;flex-direction:column;align-items:center;justify-content:center;flex-wrap:nowrap;border-width:1px;border-style:solid;border-radius:2px}.bcm-checkbox__label-icon-indeterminate{position:relative}.bcm-checkbox__label-icon-indeterminate:after{content:\"\";display:block;position:absolute;width:70%;height:1.5px;background:var(--bcm-new-ds-color-white)}.bcm-checkbox__label-icon.bcm-radio__icon{width:16px;height:16px;box-sizing:border-box;border-radius:100px}.bcm-checkbox__label-icon.bcm-radio__icon .bcm-radio__icon-inner{width:10px;height:10px;border-radius:100px;background-color:var(--bcm-new-ds-color-white)}.bcm-checkbox .bcm-checkbox__label-icon{background:var(--bcm-checkbox-secondary-color-default);color:var(--bcm-checkbox-secondary-color-default);border-color:var(--bcm-new-ds-color-slate-300)}.bcm-checkbox .bcm-checkbox__label-icon-checked,.bcm-checkbox .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-new-ds-color-white);background-color:var(--bcm-checkbox-primary-color-default);border-color:var(--bcm-checkbox-primary-color-default)}.bcm-checkbox .bcm-checkbox__label-icon-checked.bcm-radio__icon,.bcm-checkbox .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon{border-color:var(--bcm-checkbox-primary-color-default);background-color:var(--bcm-checkbox-secondary-color-default)}.bcm-checkbox .bcm-checkbox__label-icon-checked.bcm-radio__icon .bcm-radio__icon-inner,.bcm-checkbox .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon .bcm-radio__icon-inner{background-color:var(--bcm-checkbox-primary-color-default)}.bcm-checkbox .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-checkbox-primary-color-default)}.bcm-checkbox:hover .bcm-checkbox__label-icon{background:var(--bcm-checkbox-secondary-color-hover);color:var(--bcm-checkbox-secondary-color-hover);border-color:var(--bcm-checkbox-primary-color-hover)}.bcm-checkbox:hover .bcm-checkbox__label-icon-checked,.bcm-checkbox:hover .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-new-ds-color-white);background-color:var(--bcm-checkbox-primary-color-hover);border-color:var(--bcm-checkbox-primary-color-hover)}.bcm-checkbox:hover .bcm-checkbox__label-icon-checked.bcm-radio__icon,.bcm-checkbox:hover .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon{border-color:var(--bcm-checkbox-primary-color-hover);background-color:var(--bcm-checkbox-secondary-color-hover)}.bcm-checkbox:hover .bcm-checkbox__label-icon-checked.bcm-radio__icon .bcm-radio__icon-inner,.bcm-checkbox:hover .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon .bcm-radio__icon-inner{background-color:var(--bcm-checkbox-primary-color-hover)}.bcm-checkbox:hover .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-checkbox-primary-color-hover)}.bcm-checkbox:focus-visible .bcm-checkbox__label-icon{background:var(--bcm-checkbox-secondary-color-focus-visible);color:var(--bcm-checkbox-secondary-color-focus-visible);border-color:var(--bcm-checkbox-primary-color-focus-visible)}.bcm-checkbox:focus-visible .bcm-checkbox__label-icon-checked,.bcm-checkbox:focus-visible .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-new-ds-color-white);background-color:var(--bcm-checkbox-primary-color-focus-visible);border-color:var(--bcm-checkbox-primary-color-focus-visible)}.bcm-checkbox:focus-visible .bcm-checkbox__label-icon-checked.bcm-radio__icon,.bcm-checkbox:focus-visible .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon{border-color:var(--bcm-checkbox-primary-color-focus-visible);background-color:var(--bcm-checkbox-secondary-color-focus-visible)}.bcm-checkbox:focus-visible .bcm-checkbox__label-icon-checked.bcm-radio__icon .bcm-radio__icon-inner,.bcm-checkbox:focus-visible .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon .bcm-radio__icon-inner{background-color:var(--bcm-checkbox-primary-color-focus-visible)}.bcm-checkbox:focus-visible .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-checkbox-primary-color-focus-visible)}.bcm-checkbox:active .bcm-checkbox__label-icon{background:var(--bcm-checkbox-secondary-color-active);color:var(--bcm-checkbox-secondary-color-active);border-color:var(--bcm-checkbox-primary-color-active)}.bcm-checkbox:active .bcm-checkbox__label-icon-checked,.bcm-checkbox:active .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-new-ds-color-white);background-color:var(--bcm-checkbox-primary-color-active);border-color:var(--bcm-checkbox-primary-color-active)}.bcm-checkbox:active .bcm-checkbox__label-icon-checked.bcm-radio__icon,.bcm-checkbox:active .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon{border-color:var(--bcm-checkbox-primary-color-active);background-color:var(--bcm-checkbox-secondary-color-active)}.bcm-checkbox:active .bcm-checkbox__label-icon-checked.bcm-radio__icon .bcm-radio__icon-inner,.bcm-checkbox:active .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon .bcm-radio__icon-inner{background-color:var(--bcm-checkbox-primary-color-active)}.bcm-checkbox:active .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-checkbox-primary-color-active)}.bcm-checkbox[disabled] .bcm-checkbox__label-icon,.bcm-checkbox.disabled .bcm-checkbox__label-icon{background:var(--bcm-checkbox-secondary-color-disabled);color:var(--bcm-checkbox-secondary-color-disabled);border-color:var(--bcm-checkbox-primary-color-disabled)}.bcm-checkbox[disabled] .bcm-checkbox__label-icon-checked,.bcm-checkbox[disabled] .bcm-checkbox__label-icon-indeterminate,.bcm-checkbox.disabled .bcm-checkbox__label-icon-checked,.bcm-checkbox.disabled .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-new-ds-color-white);background-color:var(--bcm-checkbox-primary-color-disabled);border-color:var(--bcm-checkbox-primary-color-disabled)}.bcm-checkbox[disabled] .bcm-checkbox__label-icon-checked.bcm-radio__icon,.bcm-checkbox[disabled] .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon,.bcm-checkbox.disabled .bcm-checkbox__label-icon-checked.bcm-radio__icon,.bcm-checkbox.disabled .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon{border-color:var(--bcm-checkbox-primary-color-disabled);background-color:var(--bcm-checkbox-secondary-color-disabled)}.bcm-checkbox[disabled] .bcm-checkbox__label-icon-checked.bcm-radio__icon .bcm-radio__icon-inner,.bcm-checkbox[disabled] .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon .bcm-radio__icon-inner,.bcm-checkbox.disabled .bcm-checkbox__label-icon-checked.bcm-radio__icon .bcm-radio__icon-inner,.bcm-checkbox.disabled .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon .bcm-radio__icon-inner{background-color:var(--bcm-checkbox-primary-color-disabled)}.bcm-checkbox[disabled] .bcm-checkbox__label-icon-indeterminate,.bcm-checkbox.disabled .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-checkbox-primary-color-disabled)}.bcm-checkbox[no-margin] .bcm-checkbox__input{margin:0;min-height:0;padding:0}.bcm-list{font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;--width:256px;--height:256px;--max-height:inherit;--min-height:inherit;min-width:90px;display:flex;flex-direction:column;margin:0 0 8px 0}.bcm-list__listbox .bcm-list__container{height:var(--height);max-height:var(--max-height);min-height:var(--min-height)}.bcm-list.full-width{width:100%}.bcm-list__size-small .bcm-list__input{height:24px;font-size:12px;line-height:calc(12px + 8px)}.bcm-list__size-small .bcm-list__input .bcm-tag__content.dismissable{font-size:10px;line-height:calc(10px + 8px)}.bcm-list__size-medium .bcm-list__input{height:32px;font-size:14px;line-height:calc(14px + 8px)}.bcm-list__size-medium .bcm-list__input .bcm-tag__content.dismissable{font-size:12px;line-height:calc(12px + 8px)}.bcm-list__size-large .bcm-list__input{height:40px;font-size:16px;line-height:calc(16px + 8px)}.bcm-list__size-large .bcm-list__input .bcm-tag__content.dismissable{font-size:14px;line-height:calc(14px + 8px)}.bcm-list:hover{outline:none}.bcm-list:hover .bcm-list__input{border-color:var(--bcm-new-ds-color-blue-500);background-color:var(--bcm-new-ds-color-slate-50)}.bcm-list:focus-visible{outline:none}.bcm-list:focus-visible .bcm-list__input{border-color:var(--bcm-new-ds-color-blue-600);background-color:var(--bcm-new-ds-color-white)}.bcm-list:active{outline:none}.bcm-list:active .bcm-list__input{border-color:var(--bcm-new-ds-color-blue-600);box-shadow:0 1px 3px 0 rgba(17, 24, 38, 0.1)}.bcm-list__container{--width:256px;--height:256px;width:var(--width);height:var(--height);background-color:var(--bcm-new-ds-color-white);border:1px solid var(--bcm-new-ds-color-slate-300);border-radius:4px;box-sizing:border-box;padding-top:8px;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;flex-wrap:nowrap;gap:4px}.bcm-list__container main{padding:0 8px;flex:1;overflow:auto;display:flex;flex-direction:column}.bcm-list__container-search{margin:0 8px}.bcm-list__container-search:after{margin:4px 0}.bcm-list__container-no-data{flex:1;display:flex;justify-content:stretch;align-items:stretch;padding-bottom:4px}.bcm-list__container.error{border-color:var(--bcm-color-red-6)}.bcm-list__container.full-width{width:100%}.bcm-list__container.bcm-list__type-linked-component,.bcm-list__container.bcm-list__type-select,.bcm-list__container.bcm-list__type-autocomplete{display:none;opacity:0;visibility:hidden;position:absolute;top:0;left:0;height:0;width:0;transform:translateY(10%);z-index:10800}.bcm-list__container.bcm-list__type-linked-component.is-open,.bcm-list__container.bcm-list__type-select.is-open,.bcm-list__container.bcm-list__type-autocomplete.is-open{transition:transform 50ms;display:flex}.bcm-list__container.bcm-list__type-linked-component.is-open-animation,.bcm-list__container.bcm-list__type-select.is-open-animation,.bcm-list__container.bcm-list__type-autocomplete.is-open-animation{opacity:1;transform:translateY(0);visibility:visible}.bcm-list__container.bcm-list__type-linked-component{margin-top:2px}.bcm-list__label{line-height:1}.bcm-list__input{display:flex;align-items:center;justify-content:space-between;box-sizing:border-box;border:1px solid var(--bcm-new-ds-color-slate-300);border-radius:4px;color:var(--bcm-new-ds-color-slate-600);background-color:var(--bcm-new-ds-color-white);user-select:none;cursor:pointer;padding:0 8px;height:32px;overflow:hidden;position:relative;transition:background-color 100ms, border-color 100ms}.bcm-list__input-spinner{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;background-color:var(--bcm-color-grey-1);opacity:0;visibility:hidden;transition:opacity 0.2s ease-in-out;z-index:-1}.bcm-list__input-spinner.is-open{opacity:1;visibility:visible;z-index:1}.bcm-list__input-container{flex:1;display:block;overflow:hidden}.bcm-list__input-container.value-empty{color:#6B7280}.bcm-list__input-container.type-single,.bcm-list__input-container.value-empty{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bcm-list__input-placeholder{color:#6B7280}.bcm-list__input-tag-container{height:100%;width:100%;display:flex;align-items:center;justify-content:flex-start;flex-wrap:nowrap;grid-gap:2px;line-height:1}.bcm-list__input-buttons{display:flex;align-items:center;justify-content:flex-end;grid-gap:4px}.bcm-list__input-buttons-button{display:flex;align-items:center;justify-content:center;box-sizing:border-box;padding:0 4px 0 4px;font-size:16px;color:var(--bcm-new-ds-color-slate-500)}.bcm-list__input-buttons-button.caret-is{transform:rotate(360deg);transition:transform 0.2s ease-in-out}.bcm-list__input-buttons-button.caret-is-open{transform:rotate(180deg)}.bcm-list__input-buttons:not(.disabled) .bcm-list__input-buttons-button:hover{cursor:pointer;color:var(--bcm-new-ds-color-slate-600)}.bcm-list__input-autocomplete{position:relative;padding-right:0}.bcm-list__input-autocomplete .bcm-list-input-selected-text{background-color:#ffffff;display:flex;align-items:center;justify-content:flex-start;width:calc(100% - 24px);height:100%;padding:0 calc(8px + 4px);position:absolute;top:0;left:0}.bcm-list__input-autocomplete .bcm-list__input-container{height:100%;display:flex;flex-direction:row}.bcm-list__input-autocomplete .bcm-list__input-container .bcm-list__input-tag-container{width:auto}.bcm-list__input-autocomplete .bcm-input,.bcm-list__input-autocomplete .bcm-list__autocomplete{height:100%;min-width:70px;width:100%}.bcm-list__input-autocomplete .bcm-input__container,.bcm-list__input-autocomplete .bcm-list__autocomplete__container{height:100%;border:none;padding:0;width:100%}.bcm-list__input-autocomplete .bcm-input__container:not(.disabled).focused,.bcm-list__input-autocomplete .bcm-input__container:not(.disabled):hover,.bcm-list__input-autocomplete .bcm-list__autocomplete__container:not(.disabled).focused,.bcm-list__input-autocomplete .bcm-list__autocomplete__container:not(.disabled):hover{border:none;box-shadow:none}.bcm-list__autocomplete{width:100%;position:relative}.bcm-list.full-width .bcm-list__container,.bcm-list.full-width .bcm-list__input{width:100%}.bcm-list.error .bcm-list__input{border-color:var(--bcm-color-red-6)}.bcm-list.disabled .bcm-list__container,.bcm-list.disabled .bcm-list__input{color:var(--bcm-new-ds-color-slate-300);background-color:var(--bcm-new-ds-color-slate-50);cursor:not-allowed}.bcm-list.disabled .bcm-tag__content.dismissable .close-button{cursor:default}.bcm-list:not(.disabled) .bcm-list__input .bcm-tag__content.checked .close-button bcm-icon{color:var(--bcm-new-ds-color-slate-100)}.bcm-list:not(.disabled) .bcm-list__input .bcm-tag__content.checked .close-button:hover bcm-icon{color:var(--bcm-new-ds-color-slate-200)}.bcm-list:not(.disabled) .bcm-list__input:hover{border-color:var(--bcm-new-ds-color-blue-500)}.bcm-list:not(.disabled) .bcm-list__input:hover .bcm-tag__content.dismissable:not(.checked){background-color:var(--bcm-new-ds-color-slate-200);border-color:var(--bcm-new-ds-color-slate-200)}.bcm-list:not(.disabled) .bcm-list__input:focus-visible{border-color:var(--bcm-new-ds-color-blue-500);box-shadow:0 1px 3px 0 rgba(17, 24, 38, 0.1)}.bcm-list:not(.disabled) .bcm-list__input:active{border-color:var(--bcm-new-ds-color-blue-500)}.bcm-list__item{padding:2px 0}.bcm-list__item.disabled{user-select:none}.bcm-list__item:focus{outline:none}.bcm-list__item:focus-visible>.bcm-list__item-content{background-color:var(--bcm-new-ds-color-slate-300)}.bcm-list__item:focus-visible>.bcm-list__item-content:not(.disabled){color:var(--bcm-new-ds-color-slate-600)}.bcm-list__item-content{display:flex;flex-direction:row;align-items:stretch;justify-content:flex-start;flex-wrap:nowrap;cursor:pointer;border-radius:4px;padding:0;padding-left:4px;color:var(--bcm-new-ds-color-slate-700);transition:background-color 0.2s ease}.bcm-list__item-content.disabled{color:var(--bcm-new-ds-color-slate-400);background-color:var(--bcm-new-ds-color-slate-200);user-select:none;cursor:not-allowed}.bcm-list__item-content.readonly{color:var(--bcm-new-ds-color-slate-500);background-color:var(--bcm-new-ds-color-slate-100);cursor:default}.bcm-list__item-content.readonly .bcm-list__item-content-collapse-icon{color:var(--bcm-new-ds-color-slate-700);cursor:pointer}.bcm-list__item-content.selected{color:var(--bcm-new-ds-color-white);background-color:var(--bcm-new-ds-color-blue-500)}.bcm-list__item-content.selected:hover:not(.disabled):not(.readonly){color:var(--bcm-new-ds-color-white);background-color:var(--bcm-new-ds-color-blue-600)}.bcm-list__item-content:hover:not(.disabled):not(.readonly){background-color:var(--bcm-new-ds-color-slate-100)}.bcm-list__item-content:active:not(.disabled):not(.readonly){color:var(--bcm-new-ds-color-slate-600);background-color:var(--bcm-new-ds-color-slate-200)}.bcm-list__item-content-collapse-icon{width:16px;padding:0 8px;display:flex;align-items:center;justify-content:center;font-size:16px}.bcm-list__item-content-collapse-icon.child{cursor:pointer}.bcm-list__item-content-text{user-select:none;padding:8px;width:100%;display:flex;flex-direction:row;align-items:center;justify-content:flex-start}.bcm-list__item-content-text.treeview{padding:8px 0}.bcm-list__item-content-text-checkbox{display:flex;flex-direction:row;align-items:center;justify-content:center;flex-wrap:nowrap;margin-right:8px}.bcm-list__item-content-text-checkbox .bcm-checkbox{margin:0}.bcm-list__item-content-text-inner{width:100%}.bcm-list__item-content-text mark{padding:0;margin:0;font-size:inherit;color:var(--bcm-color-grey-8);background-color:var(--bcm-color-yellow-4)}.bcm-list__item-childs{padding-left:16px}.bcm-list__item-small{padding:2px 0 2px 8px;font-size:10px;line-height:calc(10px + 8px)}.bcm-list__item-small .bcm-list__item-content-text{padding:3px 4px}.bcm-list__item-medium{font-size:12px;line-height:calc(12px + 8px)}.bcm-list__item-medium .bcm-list__item-content-text{padding:6px 4px}.bcm-list__item-large{font-size:14px;line-height:calc(14px + 8px)}.bcm-list__item-large .bcm-list__item-content-text{padding:9px 4px}.bcm-list__item--group{border-radius:4px}.bcm-list__item--group:focus>.bcm-list__item-content:not(.disabled){background-color:var(--bcm-new-ds-color-slate-50);color:var(--bcm-new-ds-color-slate-600)}.bcm-list__item--group>.bcm-list__item-content{background-color:var(--bcm-new-ds-color-slate-50);color:var(--bcm-new-ds-color-slate-600);border-radius:4px 4px 0 0;cursor:default;font-size:14px;line-height:calc(14px + 8px);font-weight:500;position:sticky;top:0}.bcm-list__item--group>.bcm-list__item-content>.bcm-list__item-content-text{padding:4px 8px 4px 16px}.bcm-list__item--group>.bcm-list__item-content:hover,.bcm-list__item--group>.bcm-list__item-content:focus{color:var(--bcm-new-ds-color-slate-800);background-color:var(--bcm-new-ds-color-slate-50)}.bcm-list__item--group>.bcm-list__item-content-unclickable:hover{color:var(--bcm-new-ds-color-slate-700);background-color:var(--bcm-new-ds-color-slate-50)}.bcm-list__item--group>.bcm-list__item-childs{background-color:var(--bcm-new-ds-color-slate-50);color:var(--bcm-new-ds-color-slate-600);padding-bottom:8px;border-radius:0 0 4px 4px;padding-left:8px}.bcm-list__item--group>.bcm-list__item-childs .bcm-list__item-content{background-color:var(--bcm-new-ds-color-white);color:var(--bcm-new-ds-color-slate-600)}.bcm-list__item--group>.bcm-list__item-childs .bcm-list__item-content:hover{background-color:var(--bcm-new-ds-color-slate-100)}.bcm-list__item--group>.bcm-list__item-childs .bcm-list__item-content:active{background-color:var(--bcm-new-ds-color-slate-200)}.bcm-list__item--group>.bcm-list__item-childs .bcm-list__item-content:focus-visible{background-color:var(--bcm-new-ds-color-slate-300)}.bcm-list__item--group>.bcm-list__item-childs .bcm-list__item-content.selected{background-color:var(--bcm-new-ds-color-blue-500);color:var(--bcm-new-ds-color-white)}.bcm-list__item--group>.bcm-list__item-childs .bcm-list__item-content.selected:hover{background-color:var(--bcm-new-ds-color-blue-600)}.bcm-list__item--group>.bcm-list__item-childs .bcm-list__item-content.selected:active{background-color:var(--bcm-new-ds-color-blue-700)}.bcm-list__linked{display:none}.bcm-list .bcm-tag--other .value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bcm-info-footer{text-align:right;padding:4px 8px;background-color:var(--bcm-new-ds-color-slate-100);color:var(--bcm-new-ds-color-slate-600);border-radius:0 0 4px 4px}";
+const listCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap\"); .size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}.input-size-large{height:40px}.input-size-medium{height:32px}.input-size-small{height:24px}.resize-none textarea{resize:none}.resize-vertical textarea{resize:vertical}.resize-auto textarea{height:auto;resize:none}.textarea-size-large{padding:4px 0 0 4px;min-height:40px}.textarea-size-large .bcm-input-element{min-height:calc((40px - 8px) + 2px)}.textarea-size-large .input-clear-button{height:calc( 40px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-medium{padding:4px 0 0 4px;min-height:32px}.textarea-size-medium .bcm-input-element{min-height:calc((32px - 8px) + 2px)}.textarea-size-medium .input-clear-button{height:calc( 32px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-small{padding:0px 0 0 4px;min-height:24px}.textarea-size-small .bcm-input-element{min-height:calc((24px - 8px) + 2px)}.textarea-size-small .input-clear-button{height:calc( 24px - 16px );top:8px;padding:0;margin-right:8px}.bcm-input[no-margin]{margin:0}.bcm-textarea[no-margin]{margin:0}.bcm-switch[no-margin]{margin:0}.bcm-checkbox[no-margin]{margin:0}.bcm-radio-group[no-margin]{margin:0}.bcm-checkbox-group[no-margin]{margin:0}.bcm-range[no-margin]{margin:0}.bcm-form[no-margin]{margin:0}.bcm-form-group[no-margin]{margin:0}.bcm-list[no-margin]{margin:0}.bcm-colorpicker[no-margin]{margin:0}.bcm-date-picker[no-margin]{margin:0}.bcm-time-picker[no-margin]{margin:0}.bcm-datetime-picker[no-margin]{margin:0}.bcm-select[no-margin]{margin:0}.bcm-listbox[no-margin]{margin:0}*{box-sizing:border-box}:root{--bcm-checkbox-text:var(--bcm-ui-color-text-default);--bcm-checkbox-border:var(--bcm-ui-color-border-default);--bcm-checkbox-border-hover:var(--bcm-ui-color-border-primary-info);--bcm-checkbox-bg:var(--bcm-ui-color-background-default-default);--bcm-checkbox-bg-hover:var(--bcm-ui-color-background-default-default);--bcm-checkbox-checked-border:var(--bcm-ui-color-background-primary-info-default);--bcm-checkbox-checked-border-hover:var(--bcm-ui-color-background-primary-info-hover);--bcm-checkbox-checked-bg:var(--bcm-ui-color-background-primary-info-default);--bcm-checkbox-checked-bg-hover:var(--bcm-ui-color-background-primary-info-hover)}.bcm-list{font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;--width:256px;--height:256px;--max-height:inherit;--min-height:inherit;min-width:90px;display:flex;flex-direction:column;margin:0 0 8px 0}.bcm-list__listbox .bcm-list__container{height:var(--height);max-height:var(--max-height);min-height:var(--min-height)}.bcm-list.full-width{width:100%}.bcm-list__size-small .bcm-list__input{height:24px;font-size:var(--bcm-ui-font-size-4);line-height:var(--bcm-ui-line-height-4)}.bcm-list__size-small .bcm-list__input .bcm-tag__content.dismissable{font-size:10px;line-height:calc(10px + 8px)}.bcm-list__size-medium .bcm-list__input{height:32px;font-size:var(--bcm-ui-font-size-5);line-height:var(--bcm-ui-line-height-5)}.bcm-list__size-medium .bcm-list__input .bcm-tag__content.dismissable{font-size:12px;line-height:calc(12px + 8px)}.bcm-list__size-large .bcm-list__input{height:40px;font-size:var(--bcm-ui-font-size-6);line-height:var(--bcm-ui-line-height-6)}.bcm-list__size-large .bcm-list__input .bcm-tag__content.dismissable{font-size:14px;line-height:calc(14px + 8px)}.bcm-list:hover{outline:none}.bcm-list:hover .bcm-list__input{border-color:var(--bcm-ui-color-border-primary-info)}.bcm-list:focus-visible{outline:none}.bcm-list:focus-visible .bcm-list__input{border-color:var(--bcm-ui-color-border-primary-info)}.bcm-list:active{outline:none}.bcm-list:active .bcm-list__input{border-color:var(--bcm-ui-color-border-primary-info);box-shadow:0 1px 3px 0 rgba(17, 24, 38, 0.1)}.bcm-list__container{--width:256px;--height:256px;width:var(--width);height:var(--height);background-color:var(--bcm-ui-color-background-base-default);border:1px solid var(--bcm-ui-color-border-default);border-radius:var(--bcm-ui-radius);box-sizing:border-box;padding-top:var(--bcm-ui-spacing-1-5, 6px);display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;flex-wrap:nowrap;gap:4px}.bcm-list__container main{padding:0;flex:1;overflow:auto;display:flex;flex-direction:column}.bcm-list__container-search{margin:0 8px}.bcm-list__container-search:after{margin:4px 0}.bcm-list__container-no-data{flex:1;display:flex;justify-content:stretch;align-items:stretch;padding-bottom:4px}.bcm-list__container.error{border-color:var(--bcm-ui-color-border-error)}.bcm-list__container.full-width{width:100%}.bcm-list__container.bcm-list__type-linked-component,.bcm-list__container.bcm-list__type-select,.bcm-list__container.bcm-list__type-autocomplete{display:none;opacity:0;visibility:hidden;position:absolute;top:0;left:0;height:0;width:0;transform:translateY(10%);box-shadow:var(--bcm-ui-box-shadow-3);border:none;z-index:10800}.bcm-list__container.bcm-list__type-linked-component.is-open,.bcm-list__container.bcm-list__type-select.is-open,.bcm-list__container.bcm-list__type-autocomplete.is-open{transition:transform 50ms;display:flex}.bcm-list__container.bcm-list__type-linked-component.is-open-animation,.bcm-list__container.bcm-list__type-select.is-open-animation,.bcm-list__container.bcm-list__type-autocomplete.is-open-animation{opacity:1;transform:translateY(0);visibility:visible}.bcm-list__container.bcm-list__type-linked-component{margin-top:2px}.bcm-list__label{line-height:1}.bcm-list__input{display:flex;align-items:center;justify-content:space-between;box-sizing:border-box;border:1px solid var(--bcm-ui-color-border-default);border-radius:var(--bcm-ui-radius);color:var(--bcm-ui-color-text-default);background-color:var(--bcm-ui-color-background-base-default);user-select:none;cursor:pointer;padding:0 var(--bcm-ui-spacing-3);height:32px;overflow:hidden;position:relative;transition:background-color 100ms, border-color 100ms}.bcm-list__input-spinner{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;background-color:var(--bcm-color-grey-1);opacity:0;visibility:hidden;transition:opacity 0.2s ease-in-out;z-index:-1}.bcm-list__input-spinner.is-open{opacity:1;visibility:visible;z-index:1}.bcm-list__input-container{flex:1;display:block;overflow:hidden}.bcm-list__input-container.value-empty{color:#6B7280}.bcm-list__input-container.type-single,.bcm-list__input-container.value-empty{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bcm-list__input-placeholder{color:var(--bcm-ui-color-text-placeholder)}.bcm-list__input-tag-container{height:100%;width:100%;display:flex;align-items:center;justify-content:flex-start;flex-wrap:nowrap;grid-gap:2px;line-height:1}.bcm-list__input-buttons{display:flex;align-items:center;justify-content:flex-end;grid-gap:4px}.bcm-list__input-buttons-button{display:flex;align-items:center;justify-content:center;box-sizing:border-box;padding:0 4px 0 4px;font-size:16px;color:var(--bcm-ui-color-text-placeholder)}.bcm-list__input-buttons-button.caret-is{transform:rotate(360deg);transition:transform 0.2s ease-in-out}.bcm-list__input-buttons-button.caret-is-open{transform:rotate(180deg)}.bcm-list__input-buttons:not(.disabled) .bcm-list__input-buttons-button:hover{cursor:pointer;color:var(--bcm-new-ds-color-slate-600)}.bcm-list__input-autocomplete{position:relative;padding-right:0}.bcm-list__input-autocomplete .bcm-list-input-selected-text{background-color:#ffffff;display:flex;align-items:center;justify-content:flex-start;width:calc(100% - 24px);height:100%;padding:0 calc(8px + 4px);position:absolute;top:0;left:0}.bcm-list__input-autocomplete .bcm-list__input-container{height:100%;display:flex;flex-direction:row}.bcm-list__input-autocomplete .bcm-list__input-container .bcm-list__input-tag-container{width:auto}.bcm-list__input-autocomplete .bcm-input,.bcm-list__input-autocomplete .bcm-list__autocomplete{height:100%;min-width:70px;width:100%}.bcm-list__input-autocomplete .bcm-input__container,.bcm-list__input-autocomplete .bcm-list__autocomplete__container{height:100%;border:none;padding:0;width:100%}.bcm-list__input-autocomplete .bcm-input__container:not(.disabled).focused,.bcm-list__input-autocomplete .bcm-input__container:not(.disabled):hover,.bcm-list__input-autocomplete .bcm-list__autocomplete__container:not(.disabled).focused,.bcm-list__input-autocomplete .bcm-list__autocomplete__container:not(.disabled):hover{border:none;box-shadow:none}.bcm-list__autocomplete{width:100%;position:relative}.bcm-list.full-width .bcm-list__container,.bcm-list.full-width .bcm-list__input{width:100%}.bcm-list.error .bcm-list__input{border-color:var(--bcm-ui-color-border-error)}.bcm-list.disabled .bcm-list__container,.bcm-list.disabled .bcm-list__input{color:var(--bcm-ui-color-text-disabled);background-color:var(--bcm-ui-color-background-disabled-disable);cursor:not-allowed}.bcm-list.disabled .bcm-tag__content.dismissable .close-button{cursor:default}.bcm-list:not(.disabled) .bcm-list__input .bcm-tag__content.checked .close-button bcm-icon{color:var(--bcm-new-ds-color-slate-100)}.bcm-list:not(.disabled) .bcm-list__input .bcm-tag__content.checked .close-button:hover bcm-icon{color:var(--bcm-new-ds-color-slate-200)}.bcm-list:not(.disabled) .bcm-list__input:hover{border-color:var(--bcm-ui-color-border-primary-info)}.bcm-list:not(.disabled) .bcm-list__input:hover .bcm-tag__content.dismissable:not(.checked){background-color:var(--bcm-new-ds-color-slate-200);border-color:var(--bcm-new-ds-color-slate-200)}.bcm-list:not(.disabled) .bcm-list__input:focus-visible{border-color:var(--bcm-ui-color-border-primary-info);box-shadow:0 1px 3px 0 rgba(17, 24, 38, 0.1)}.bcm-list:not(.disabled) .bcm-list__input:active{border-color:var(--bcm-ui-color-border-primary-info)}.bcm-list__item{padding:0}.bcm-list__item.disabled{user-select:none}.bcm-list__item:focus{outline:none}.bcm-list__item:focus-visible>.bcm-list__item-content{background-color:var(--bcm-new-ds-color-slate-300)}.bcm-list__item:focus-visible>.bcm-list__item-content:not(.disabled){color:var(--bcm-new-ds-color-slate-600)}.bcm-list__item-content{display:flex;flex-direction:row;align-items:stretch;justify-content:flex-start;flex-wrap:nowrap;cursor:pointer;padding:0;color:var(--bcm-ui-color-text-default);transition:background-color 0.2s ease}.bcm-list__item-content.disabled{color:var(--bcm-ui-color-text-disabled);user-select:none;cursor:not-allowed}.bcm-list__item-content.readonly{color:var(--bcm-ui-color-text-default);user-select:none;cursor:not-allowed}.bcm-list__item-content.readonly .bcm-list__item-content-collapse-icon{color:var(--bcm-new-ds-color-slate-700);cursor:pointer}.bcm-list__item-content.selected{color:var(--bcm-ui-color-text-base);background-color:var(--bcm-ui-color-background-primary-info-default)}.bcm-list__item-content.selected:hover:not(.disabled):not(.readonly){color:var(--bcm-ui-color-text-base);background-color:var(--bcm-ui-color-background-primary-info-hover)}.bcm-list__item-content:hover:not(.disabled):not(.readonly){background-color:var(--bcm-ui-color-background-base-hover)}.bcm-list__item-content:active:not(.disabled):not(.readonly){background-color:var(--bcm-ui-color-background-base-active)}.bcm-list__item-content-collapse-icon{width:var(--bcm-ui-spacing-4);display:flex;align-items:center;justify-content:center;font-size:var(--bcm-ui-font-size-5);margin-right:var(--bcm-ui-spacing-2)}.bcm-list__item-content-collapse-icon.child{cursor:pointer}.bcm-list__item-content-text{user-select:none;width:100%;display:flex;flex-direction:row;align-items:center;justify-content:flex-start}.bcm-list__item-content-text-checkbox{display:flex;flex-direction:row;align-items:center;justify-content:center;flex-wrap:nowrap;margin-right:8px}.bcm-list__item-content-text-checkbox .bcm-checkbox{margin:0}.bcm-list__item-content-text-inner{width:100%}.bcm-list__item-content-text mark{padding:0;margin:0;font-size:inherit;color:var(--bcm-color-grey-8);background-color:var(--bcm-color-yellow-4)}.bcm-list__item-childs{padding-left:16px}.bcm-list__item-small{font-size:var(--bcm-ui-font-size-4);line-height:var(--bcm-ui-line-height-4)}.bcm-list__item-small .bcm-list__item-content{padding:var(--bcm-ui-spacing-1-5) var(--bcm-ui-spacing-4)}.bcm-list__item-medium{font-size:var(--bcm-ui-font-size-5);line-height:var(--bcm-ui-line-height-5)}.bcm-list__item-medium .bcm-list__item-content{padding:var(--bcm-ui-spacing-2) var(--bcm-ui-spacing-4)}.bcm-list__item-large{font-size:var(--bcm-ui-font-size-6);line-height:var(--bcm-ui-line-height-6)}.bcm-list__item-large .bcm-list__item-content{padding:var(--bcm-ui-spacing-2) var(--bcm-ui-spacing-4)}.bcm-list__item--group{border-radius:4px}.bcm-list__item--group:focus>.bcm-list__item-content:not(.disabled){background-color:var(--bcm-new-ds-color-slate-50);color:var(--bcm-new-ds-color-slate-600)}.bcm-list__item--group>.bcm-list__item-content{background-color:var(--bcm-new-ds-color-slate-50);color:var(--bcm-new-ds-color-slate-600);border-radius:4px 4px 0 0;cursor:default;font-size:14px;line-height:calc(14px + 8px);font-weight:500;position:sticky;top:0}.bcm-list__item--group>.bcm-list__item-content>.bcm-list__item-content-text{padding:4px 8px 4px 16px}.bcm-list__item--group>.bcm-list__item-content:hover,.bcm-list__item--group>.bcm-list__item-content:focus{color:var(--bcm-new-ds-color-slate-800);background-color:var(--bcm-new-ds-color-slate-50)}.bcm-list__item--group>.bcm-list__item-content-unclickable:hover{color:var(--bcm-new-ds-color-slate-700);background-color:var(--bcm-new-ds-color-slate-50)}.bcm-list__item--group>.bcm-list__item-childs{background-color:var(--bcm-new-ds-color-slate-50);color:var(--bcm-new-ds-color-slate-600);padding-bottom:8px;border-radius:0 0 4px 4px;padding-left:8px}.bcm-list__item--group>.bcm-list__item-childs .bcm-list__item-content{background-color:var(--bcm-new-ds-color-white);color:var(--bcm-new-ds-color-slate-600)}.bcm-list__item--group>.bcm-list__item-childs .bcm-list__item-content:hover{background-color:var(--bcm-new-ds-color-slate-100)}.bcm-list__item--group>.bcm-list__item-childs .bcm-list__item-content:active{background-color:var(--bcm-new-ds-color-slate-200)}.bcm-list__item--group>.bcm-list__item-childs .bcm-list__item-content:focus-visible{background-color:var(--bcm-new-ds-color-slate-300)}.bcm-list__item--group>.bcm-list__item-childs .bcm-list__item-content.selected{background-color:var(--bcm-new-ds-color-blue-500);color:var(--bcm-new-ds-color-white)}.bcm-list__item--group>.bcm-list__item-childs .bcm-list__item-content.selected:hover{background-color:var(--bcm-new-ds-color-blue-600)}.bcm-list__item--group>.bcm-list__item-childs .bcm-list__item-content.selected:active{background-color:var(--bcm-new-ds-color-blue-700)}.bcm-list__linked{display:none}.bcm-list .bcm-tag--other .value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bcm-info-footer{padding:var(--bcm-ui-spacing-2) var(--bcm-ui-spacing-3);background-color:var(--bcm-ui-color-background-default-default);color:var(--bcm-ui-color-text-helper);border-radius:0 0 var(--bcm-ui-radius) var(--bcm-ui-radius);font-size:var(--bcm-ui-font-size-4);line-height:var(--bcm-ui-line-height-4)}";
 
-var __decorate$3 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$4 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
     r = Reflect.decorate(decorators, target, key, desc);
@@ -26498,7 +27130,7 @@ const BcmList = class {
     this.captionType = Bcm.Status.default;
     this.captionError = undefined;
     this.emptyText = undefined;
-    this.emptyIcon = "fad fa-folder-open";
+    this.emptyIcon = "fa-duotone fa-folder-open";
     this.captionCache = undefined;
     this.captionTypeCache = undefined;
     this.tick = {};
@@ -27238,10 +27870,10 @@ const BcmList = class {
     "data": ["dataChanged"]
   }; }
 };
-__decorate$3([
+__decorate$4([
   IsLoad()
 ], BcmList.prototype, "el", void 0);
-__decorate$3([
+__decorate$4([
   JsonParse("data", true)
 ], BcmList.prototype, "dataChanged", null);
 BcmList.style = listCss;
@@ -28146,7 +28778,7 @@ const BcmListbox = class {
       customStyles = Object.assign(Object.assign({}, customStyles), { 'height': this.height });
     }
     const captionClasses = classnames('size-1', 'input-caption', 'caption-' + captionType);
-    return (h$2(Host, { class: hostClasses, style: customStyles, "bcm-internal-id": this._internal_id }, !innerComponent && label && h$2("div", null, h$2("bcm-label", { tooltip: this.tooltip, type: captionType, value: label, required: required })), treeview === true && (h$2("bcm-treeview", { _internal_id: this._internal_id })), treeview == false && (h$2("div", { class: bcmListbox, style: customStyles }, search && (h$2("div", { class: "search", id: "search", style: { 'display': String(showSearch) == 'false' ? 'none' : 'block' } }, h$2("bcm-old-search", { _internal_id: this._internal_id, searchPlaceholder: this.searchPlaceholder, searchValue: searchText, "on-bcm-focus": () => this.handleFocus(true), "on-bcm-blur": () => this.handleFocus(false), data: searchData, returnField: returnField, searchFields: searchFields, searchSub: searchSub, clearable: true }), h$2("bcm-divider", null))), h$2("div", { id: "bcm-listbox-list", class: "bcm-listbox-list loading", style: customStylesList }, checkboxes && (h$2("div", { class: classes, id: "checkall" }, h$2("div", { class: classesContainer, onClick: () => this.handleIndeterminateClick() }, h$2("div", { class: "check-content" }, indeterminateState == 'indeterminate' && (h$2("span", { class: "indeterminate" })) || (h$2("bcm-checkbox-lite", { onClick: (e) => this.handleCheckboxClick(e), checked: checked, "no-caption": true }))), h$2("div", { class: textContent }, "Select All")), h$2("div", { class: "divider" }, h$2("bcm-divider", null)))), 
+    return (h$2(Host, { class: hostClasses, style: customStyles, "bcm-internal-id": this._internal_id }, !innerComponent && label && h$2("div", null, h$2("bcm-label", { tooltip: this.tooltip, type: captionType, value: label, required: required })), treeview === true && (h$2("bcm-treeview", { _internal_id: this._internal_id })), treeview == false && (h$2("div", { class: bcmListbox, style: customStyles }, search && (h$2("div", { class: "search", id: "search", style: { 'display': String(showSearch) == 'false' ? 'none' : 'block' } }, h$2("bcm-old-search", { _internal_id: this._internal_id, searchPlaceholder: this.searchPlaceholder, searchValue: searchText, "on-bcm-focus": () => this.handleFocus(true), "on-bcm-blur": () => this.handleFocus(false), data: searchData, returnField: returnField, searchFields: searchFields, searchSub: searchSub, clearable: true }), h$2("bcm-divider", null))), h$2("div", { id: "bcm-listbox-list", class: "bcm-listbox-list loading", style: customStylesList }, checkboxes && (h$2("div", { class: classes, id: "checkall" }, h$2("div", { class: classesContainer, onClick: () => this.handleIndeterminateClick() }, h$2("div", { class: "check-content" }, indeterminateState == 'indeterminate' && (h$2("span", { class: "indeterminate" })) || (h$2("bcm-checkbox", { onClick: (e) => this.handleCheckboxClick(e), checked: checked, "no-caption": true }))), h$2("div", { class: textContent }, "Select All")), h$2("div", { class: "divider" }, h$2("bcm-divider", null)))), 
     // this.empty == false && (
     h$2("div", { id: "list-container", class: listContainer, style: listContainerStyle }, this.items.length !== 0 && this.items.map((item) => ((item.type === 'group' ? this.recursiveGroupRenderer(item) : this.itemRenderer(item)))))
     // )
@@ -28340,7 +28972,7 @@ const BcmListboxItem = class {
       'size-2': size === 'small' || size === 'medium',
       'size-3': size === 'large',
     });
-    return (h$2(Host, { class: hostClasses }, h$2("div", { class: classes }, h$2("div", { class: classesContainer, onClick: () => this.handleClick() }, checkboxes && (h$2("div", { class: "check-content" }, h$2("bcm-checkbox-lite", { id: 'check-' + _id, onClick: (e) => this.handleCheckboxClick(e), checked: checked, disabled: this.disabled }))), this.template && (h$2("div", { class: htmlContent, title: tooltipText, innerHTML: this.templateParser(this.template) })), this.template == null && (h$2("div", { class: textContent, title: tooltipText }, h$2("div", null, (avatar || avatarName || avatarImage) && (h$2("div", { class: "avatar" }, h$2("bcm-avatar", Object.assign({ size: "small", name: text }, avatarName && { name: avatarName }, avatarImage && { image: avatarImage })))), showIcon && icon && (h$2("bcm-icon", { class: "icon", icon: icon })), text && (h$2("span", { id: "text" }, text)) || (h$2("slot", null))), h$2("div", null, (secondaryText) && (h$2("div", { class: "secondaryText size-1" }, secondaryText)))))))));
+    return (h$2(Host, { class: hostClasses }, h$2("div", { class: classes }, h$2("div", { class: classesContainer, onClick: () => this.handleClick() }, checkboxes && (h$2("div", { class: "check-content" }, h$2("bcm-checkbox", { id: 'check-' + _id, onClick: (e) => this.handleCheckboxClick(e), checked: checked, disabled: this.disabled }))), this.template && (h$2("div", { class: htmlContent, title: tooltipText, innerHTML: this.templateParser(this.template) })), this.template == null && (h$2("div", { class: textContent, title: tooltipText }, h$2("div", null, (avatar || avatarName || avatarImage) && (h$2("div", { class: "avatar" }, h$2("bcm-avatar", Object.assign({ size: "small", name: text }, avatarName && { name: avatarName }, avatarImage && { image: avatarImage })))), showIcon && icon && (h$2("bcm-icon", { class: "icon", icon: icon })), text && (h$2("span", { id: "text" }, text)) || (h$2("slot", null))), h$2("div", null, (secondaryText) && (h$2("div", { class: "secondaryText size-1" }, secondaryText)))))))));
   }
   get el() { return getElement(this); }
 };
@@ -28348,6 +28980,16 @@ BcmListboxItem.style = listboxItemCss;
 
 const menuCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap\"); .size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}.input-size-large{height:40px}.input-size-medium{height:32px}.input-size-small{height:24px}.resize-none textarea{resize:none}.resize-vertical textarea{resize:vertical}.resize-auto textarea{height:auto;resize:none}.textarea-size-large{padding:4px 0 0 4px;min-height:40px}.textarea-size-large .bcm-input-element{min-height:calc((40px - 8px) + 2px)}.textarea-size-large .input-clear-button{height:calc( 40px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-medium{padding:4px 0 0 4px;min-height:32px}.textarea-size-medium .bcm-input-element{min-height:calc((32px - 8px) + 2px)}.textarea-size-medium .input-clear-button{height:calc( 32px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-small{padding:0px 0 0 4px;min-height:24px}.textarea-size-small .bcm-input-element{min-height:calc((24px - 8px) + 2px)}.textarea-size-small .input-clear-button{height:calc( 24px - 16px );top:8px;padding:0;margin-right:8px}*{box-sizing:border-box}.bcm-menu{--bcm-menu-color-default:var(--bcm-new-ds-color-slate-700);--bcm-menu-background-color-default:var(--bcm-new-ds-color-transparent);--bcm-menu-icon-color-default:var(--bcm-new-ds-color-slate-600);--bcm-menu-color-hover:var(--bcm-new-ds-color-slate-800);--bcm-menu-background-color-hover:var(--bcm-new-ds-color-slate-50);--bcm-menu-icon-color-hover:var(--bcm-new-ds-color-slate-700);--bcm-menu-color-active:var(--bcm-new-ds-color-white);--bcm-menu-background-color-active:var(--bcm-color-primary-600);--bcm-menu-icon-color-active:var(--bcm-new-ds-color-white);--bcm-menu-color-focus-visible:var(--bcm-new-ds-color-white);--bcm-menu-background-color-focus-visible:var(--bcm-color-primary-600);--bcm-menu-icon-color-focus-visible:var(--bcm-new-ds-color-white);--bcm-menu-color-disabled:var(--bcm-new-ds-color-slate-50);--bcm-menu-background-color-disabled:var(--bcm-new-ds-color-slate-300);--bcm-menu-icon-color-disabled:var(--bcm-new-ds-color-slate-50);--bcm-menu-color-dropdownDisabled:var(--bcm-new-ds-color-slate-400);--bcm-menu-background-color-dropdownDisabled:var(--bcm-new-ds-color-transparent);--bcm-menu-icon-color-dropdownDisabled:var(--bcm-new-ds-color-slate-400);--bcm-menu-color-active-hover:var(--bcm-new-ds-color-white);--bcm-menu-background-color-active-hover:var(--bcm-color-primary-700);--bcm-menu-icon-color-active-hover:var(--bcm-new-ds-color-white);--bcm-menu-color-active-focus-visible:var(--bcm-new-ds-color-white);--bcm-menu-background-color-active-focus-visible:var(--bcm-color-primary-800);--bcm-menu-icon-color-active-focus-visible:var(--bcm-new-ds-color-white);--bcm-menu-color-active-active:var(--bcm-new-ds-color-white);--bcm-menu-background-color-active-active:var(--bcm-color-primary-900);--bcm-menu-icon-color-active-active:var(--bcm-new-ds-color-white);font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;display:inline-block;position:relative;width:210px;box-shadow:0 2px 6px 1px rgba(17, 24, 38, 0.1);border-radius:8px;background-color:var(--bcm-new-ds-color-white);transition:background-color 0.1s ease-in-out, width 0.3s ease-in-out}.bcm-menu__container{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;flex-wrap:nowrap}.bcm-menu__item{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;flex-wrap:nowrap;font:inherit;cursor:pointer;color:inherit;background-color:inherit;padding:0;margin:0;border:none;outline:none;text-decoration:none}.bcm-menu__item:hover,.bcm-menu__item:focus,.bcm-menu__item:active{outline:none;text-decoration:none}.bcm-menu__item--is-sub{color:var(--bcm-menu-color-hover);background-color:var(--bcm-menu-background-color-hover);border-radius:4px}.bcm-menu__item--is-sub .bcm-menu__item-link-icon,.bcm-menu__item--is-sub .bcm-menu__item-link-toggle{color:var(--bcm-menu-icon-color-hover)}.bcm-menu__item-link{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;flex-wrap:nowrap;gap:8px;padding:4px 8px;border-radius:4px;transition:background-color 0.1s ease-in-out, padding 0.3s ease-in-out;color:var(--bcm-menu-color-default);background-color:var(--bcm-menu-background-color-default)}.bcm-menu__item-link-icon{display:flex;flex-direction:row;align-items:center;justify-content:center;flex-wrap:nowrap;min-width:24px;max-width:24px}.bcm-menu__item-link-text{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;flex:1}.bcm-menu__item-link-text--collapse{opacity:0}.bcm-menu__item-link-toggle{display:flex;flex-direction:row;align-items:center;justify-content:center;flex-wrap:nowrap;font-size:10px;height:100%;order:0;width:24px;transform:rotate(0deg);transition:transform 0.2s ease-in-out;margin-right:-8px}.bcm-menu__item-link-toggle--collapse{transform:rotate(-180deg)}.bcm-menu__item-link .bcm-menu__item-link-icon,.bcm-menu__item-link .bcm-menu__item-link-toggle{color:var(--bcm-menu-icon-color-default)}.bcm-menu__item-link:hover:not(.bcm-menu__item-link--disabled):not(.bcm-menu__item-link--active){color:var(--bcm-menu-color-hover);background-color:var(--bcm-menu-background-color-hover)}.bcm-menu__item-link:hover:not(.bcm-menu__item-link--disabled):not(.bcm-menu__item-link--active) .bcm-menu__item-link-icon,.bcm-menu__item-link:hover:not(.bcm-menu__item-link--disabled):not(.bcm-menu__item-link--active) .bcm-menu__item-link-toggle{color:var(--bcm-menu-icon-color-hover)}.bcm-menu__item-link:active:not(.bcm-menu__item-link--disabled):not(.bcm-menu__item-link--active){color:var(--bcm-menu-color-active);background-color:var(--bcm-menu-background-color-active)}.bcm-menu__item-link:active:not(.bcm-menu__item-link--disabled):not(.bcm-menu__item-link--active) .bcm-menu__item-link-icon,.bcm-menu__item-link:active:not(.bcm-menu__item-link--disabled):not(.bcm-menu__item-link--active) .bcm-menu__item-link-toggle{color:var(--bcm-menu-icon-color-active)}.bcm-menu__item-link:focus-visible:not(.bcm-menu__item-link--disabled):not(.bcm-menu__item-link--active){color:var(--bcm-menu-color-focus-visible);background-color:var(--bcm-menu-background-color-focus-visible)}.bcm-menu__item-link:focus-visible:not(.bcm-menu__item-link--disabled):not(.bcm-menu__item-link--active) .bcm-menu__item-link-icon,.bcm-menu__item-link:focus-visible:not(.bcm-menu__item-link--disabled):not(.bcm-menu__item-link--active) .bcm-menu__item-link-toggle{color:var(--bcm-menu-icon-color-focus-visible)}.bcm-menu__item-link:disabled:not(.bcm-menu__item-link--disabled):not(.bcm-menu__item-link--active){color:var(--bcm-menu-color-disabled);background-color:var(--bcm-menu-background-color-disabled)}.bcm-menu__item-link:disabled:not(.bcm-menu__item-link--disabled):not(.bcm-menu__item-link--active) .bcm-menu__item-link-icon,.bcm-menu__item-link:disabled:not(.bcm-menu__item-link--disabled):not(.bcm-menu__item-link--active) .bcm-menu__item-link-toggle{color:var(--bcm-menu-icon-color-disabled)}.bcm-menu__item-link:dropdownDisabled:not(.bcm-menu__item-link--disabled):not(.bcm-menu__item-link--active){color:var(--bcm-menu-color-dropdownDisabled);background-color:var(--bcm-menu-background-color-dropdownDisabled)}.bcm-menu__item-link:dropdownDisabled:not(.bcm-menu__item-link--disabled):not(.bcm-menu__item-link--active) .bcm-menu__item-link-icon,.bcm-menu__item-link:dropdownDisabled:not(.bcm-menu__item-link--disabled):not(.bcm-menu__item-link--active) .bcm-menu__item-link-toggle{color:var(--bcm-menu-icon-color-dropdownDisabled)}.bcm-menu__item-link--active:not(.bcm-menu__item-link--disabled){color:var(--bcm-menu-color-active);background-color:var(--bcm-menu-background-color-active)}.bcm-menu__item-link--active:not(.bcm-menu__item-link--disabled) .bcm-menu__item-link-icon,.bcm-menu__item-link--active:not(.bcm-menu__item-link--disabled) .bcm-menu__item-link-toggle{color:var(--bcm-menu-icon-color-active)}.bcm-menu__item-link--active:not(.bcm-menu__item-link--disabled):hover{color:var(--bcm-menu-color-active-hover);background-color:var(--bcm-menu-background-color-active-hover)}.bcm-menu__item-link--active:not(.bcm-menu__item-link--disabled):hover .bcm-menu__item-link-icon,.bcm-menu__item-link--active:not(.bcm-menu__item-link--disabled):hover .bcm-menu__item-link-toggle{color:var(--bcm-menu-icon-color-active-hover)}.bcm-menu__item-link--active:not(.bcm-menu__item-link--disabled):focus-visible{color:var(--bcm-menu-color-active-focus-visible);background-color:var(--bcm-menu-background-color-active-focus-visible)}.bcm-menu__item-link--active:not(.bcm-menu__item-link--disabled):focus-visible .bcm-menu__item-link-icon,.bcm-menu__item-link--active:not(.bcm-menu__item-link--disabled):focus-visible .bcm-menu__item-link-toggle{color:var(--bcm-menu-icon-color-active-focus-visible)}.bcm-menu__item-link--active:not(.bcm-menu__item-link--disabled):active{color:var(--bcm-menu-color-active-active);background-color:var(--bcm-menu-background-color-active-active)}.bcm-menu__item-link--active:not(.bcm-menu__item-link--disabled):active .bcm-menu__item-link-icon,.bcm-menu__item-link--active:not(.bcm-menu__item-link--disabled):active .bcm-menu__item-link-toggle{color:var(--bcm-menu-icon-color-active-active)}.bcm-menu__item-link--disabled{cursor:not-allowed;color:var(--bcm-menu-color-disabled);background-color:var(--bcm-menu-background-color-disabled)}.bcm-menu__item-link--disabled .bcm-menu__item-link-icon,.bcm-menu__item-link--disabled .bcm-menu__item-link-toggle{color:var(--bcm-menu-icon-color-disabled)}.bcm-menu__item-submenu{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;flex-wrap:nowrap;gap:4px;padding:12px;display:none}.bcm-menu__item-submenu .bcm-menu__item-link{--bcm-menu-background-color-default:var(--bcm-new-ds-color-white);--bcm-menu-background-color-hover:var(--bcm-new-ds-color-slate-100)}.bcm-menu__item-submenu--open{display:flex}.bcm-menu__size-small{padding:8px;font-size:12px;line-height:calc(14px + 8px)}.bcm-menu__size-medium{padding:16px;font-size:14px;line-height:calc(16px + 8px)}.bcm-menu__size-large{padding:16px;font-size:16px;line-height:calc(18px + 8px)}.bcm-menu__collapse-button{color:var(--bcm-menu-color-active);background-color:var(--bcm-menu-background-color-active);display:flex;flex-direction:row;align-items:center;justify-content:center;flex-wrap:nowrap;font-size:14px;border-radius:100px;position:absolute;top:23px;right:-8px;width:18px;height:18px;cursor:pointer;transition:background-color 0.1s ease-in-out, transform 0.3s ease}.bcm-menu__collapse-button:hover{color:var(--bcm-menu-color-active-hover);background-color:var(--bcm-menu-background-color-active-hover)}.bcm-menu__collapse-button:focus-visible{color:var(--bcm-menu-color-active-focus-visible);background-color:var(--bcm-menu-background-color-active-focus-visible)}.bcm-menu__collapse-button:active{color:var(--bcm-menu-color-active-active);background-color:var(--bcm-menu-background-color-active-active)}.bcm-menu__collapse-button--collapsed{transform:rotate(-180deg)}.bcm-menu__collapse{width:64px}.bcm-menu__collapse .bcm-menu__item-link{padding:4px}.bcm-menu--linked{position:absolute;z-index:10800;top:0;left:0;opacity:0;visibility:hidden;width:fit-content;min-height:50px;max-height:500px;height:auto;overflow-y:auto;padding:12px}.bcm-menu--linked.bcm-menu__open{opacity:1;visibility:visible}.bcm-menu--linked .bcm-menu__container{gap:4px}.bcm-menu--linked .bcm-menu__item-link{--bcm-menu-background-color-default:var(--bcm-new-ds-color-slate-50);--bcm-menu-background-color-hover:var(--bcm-new-ds-color-slate-100)}.bcm-menu--linked .bcm-menu__item .bcm-menu__item-submenu .bcm-menu__item-link{--bcm-menu-background-color-default:var(--bcm-new-ds-color-white);--bcm-menu-background-color-hover:var(--bcm-new-ds-color-slate-100)}.bcm-menu--linked .bcm-menu__item-submenu-link:not(:disabled) .bcm-menu--linked .bcm-menu__item-submenu-link:not(.bcm-menu--linked .bcm-menu__item-submenu-link--active){background-color:var(--bcm-menu-background-color-default)}.bcm-menu--linked .bcm-menu__item-submenu-link:not(:disabled) .bcm-menu--linked .bcm-menu__item-submenu-link:not(.bcm-menu--linked .bcm-menu__item-submenu-link--active):hover{color:var(--bcm-menu-color-hover);background-color:var(--bcm-menu-background-color-hover)}.bcm-menu--linked .bcm-menu__item-submenu-link:not(:disabled) .bcm-menu--linked .bcm-menu__item-submenu-link:not(.bcm-menu--linked .bcm-menu__item-submenu-link--active):focus-visible{color:var(--bcm-menu-color-focus-visible);background-color:var(--bcm-menu-background-color-focus-visible)}.bcm-menu--linked .bcm-menu__item-submenu-link:not(:disabled) .bcm-menu--linked .bcm-menu__item-submenu-link:not(.bcm-menu--linked .bcm-menu__item-submenu-link--active):active{color:var(--bcm-menu-color-active);background-color:var(--bcm-menu-background-color-active)}.bcm-menu--linked .bcm-menu__item-submenu-link:not(:disabled) .bcm-menu--linked .bcm-menu__item-submenu-link:not(.bcm-menu--linked .bcm-menu__item-submenu-link--active) .bcm-menu__item-link--disabled{cursor:not-allowed;color:var(--bcm-menu-color-disabled);background-color:var(--bcm-menu-background-color-disabled)}.bcm-menu--linked .bcm-menu__item-submenu-link:not(:disabled) .bcm-menu--linked .bcm-menu__item-submenu-link:not(.bcm-menu--linked .bcm-menu__item-submenu-link--active) .bcm-menu__item-link--disabled .bcm-menu__item-link-icon,.bcm-menu--linked .bcm-menu__item-submenu-link:not(:disabled) .bcm-menu--linked .bcm-menu__item-submenu-link:not(.bcm-menu--linked .bcm-menu__item-submenu-link--active) .bcm-menu__item-link--disabled .bcm-menu__item-link-toggle{color:var(--bcm-menu-icon-color-disabled)}.bcm-menu--linked .bcm-menu__item-link:not(:disabled) .bcm-menu--linked .bcm-menu__item-link:not(.bcm-menu--linked .bcm-menu__item-link--active){background-color:var(--bcm-menu-background-color-default)}.bcm-menu--linked .bcm-menu__item-link:not(:disabled) .bcm-menu--linked .bcm-menu__item-link:not(.bcm-menu--linked .bcm-menu__item-link--active):hover{color:var(--bcm-menu-color-hover);background-color:var(--bcm-menu-background-color-hover)}.bcm-menu--linked .bcm-menu__item-link:not(:disabled) .bcm-menu--linked .bcm-menu__item-link:not(.bcm-menu--linked .bcm-menu__item-link--active):focus-visible{color:var(--bcm-menu-color-focus-visible);background-color:var(--bcm-menu-background-color-focus-visible)}.bcm-menu--linked .bcm-menu__item-link:not(:disabled) .bcm-menu--linked .bcm-menu__item-link:not(.bcm-menu--linked .bcm-menu__item-link--active):active{color:var(--bcm-menu-color-active);background-color:var(--bcm-menu-background-color-active)}.bcm-menu__dropdown{width:auto;max-width:210px}.bcm-menu__dropdown .bcm-menu__item-link--disabled{color:var(--bcm-menu-color-dropdownDisabled);background-color:var(--bcm-menu-background-color-dropdownDisabled)}.bcm-menu__dropdown .bcm-menu__item-link--disabled .bcm-menu__item-link-icon,.bcm-menu__dropdown .bcm-menu__item-link--disabled .bcm-menu__item-link-toggle{color:var(--bcm-menu-icon-color-dropdownDisabled)}";
 
+var __decorate$3 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+    r = Reflect.decorate(decorators, target, key, desc);
+  else
+    for (var i = decorators.length - 1; i >= 0; i--)
+      if (d = decorators[i])
+        r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
 const BcmMenu = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
@@ -28454,9 +29096,119 @@ const BcmMenu = class {
   }
   get el() { return getElement(this); }
 };
+__decorate$3([
+  IsLoad()
+], BcmMenu.prototype, "el", void 0);
 BcmMenu.style = menuCss;
 
-const modalCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap\"); .size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}.input-size-large{height:40px}.input-size-medium{height:32px}.input-size-small{height:24px}.resize-none textarea{resize:none}.resize-vertical textarea{resize:vertical}.resize-auto textarea{height:auto;resize:none}.textarea-size-large{padding:4px 0 0 4px;min-height:40px}.textarea-size-large .bcm-input-element{min-height:calc((40px - 8px) + 2px)}.textarea-size-large .input-clear-button{height:calc( 40px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-medium{padding:4px 0 0 4px;min-height:32px}.textarea-size-medium .bcm-input-element{min-height:calc((32px - 8px) + 2px)}.textarea-size-medium .input-clear-button{height:calc( 32px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-small{padding:0px 0 0 4px;min-height:24px}.textarea-size-small .bcm-input-element{min-height:calc((24px - 8px) + 2px)}.textarea-size-small .input-clear-button{height:calc( 24px - 16px );top:8px;padding:0;margin-right:8px}*{box-sizing:border-box}.bcm-modal{font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;flex-wrap:nowrap;width:100%;height:100%;position:fixed;z-index:-1;opacity:0;top:0;left:0;visibility:hidden;overflow:auto;padding:24px;transition:opacity 0.5s ease, visibility 0.4s ease-in-out, 0.3s z-index}.bcm-modal__show{opacity:1;z-index:10500;visibility:visible;transition:opacity 0.2s ease, visibility 0.4s ease-in-out, 0.3s z-index}.bcm-modal__show .bcm-modal__container{transition:opacity 0.2s ease-in-out, transform 0.2s ease-in-out;transform:translateY(0)}.bcm-modal .overlay{position:fixed;width:100vw;height:100vh;z-index:1;top:0;left:0;opacity:0.6;background-color:var(--bcm-new-ds-color-slate-900)}.bcm-modal__container{display:flex;flex-direction:column;width:100%;box-shadow:0 2px 6px 1px rgba(17, 24, 38, 0.1);border-radius:8px;background-color:var(--bcm-new-ds-color-white);z-index:2;transform:translateY(-50px);transition:opacity 0.2s ease-in-out, transform 0.2s ease-in-out}.bcm-modal__container.portrait{max-width:312px}.bcm-modal__container.landscape{max-width:475px}.bcm-modal__container.small{max-width:576px}.bcm-modal__container.medium{max-width:768px}.bcm-modal__container.large{max-width:992px}.bcm-modal__container.xlarge{max-width:1024px}.bcm-modal__container.xxlarge{max-width:1200px}.bcm-modal__container.xxxlarge{max-width:1700px}.bcm-modal__container.full-width{width:100%;max-width:100%}.bcm-modal__container.custom-size main{overflow:auto;height:100%;width:100%}.bcm-modal__container-main{color:var(--bcm-color-grey-8);padding:0}.bcm-modal__container-header{display:flex;flex-direction:row;align-items:center;justify-content:space-between;flex-wrap:nowrap;padding:12px 24px;font-size:16px;line-height:calc(16px + 8px);font-weight:500;color:var(--bcm-new-ds-color-slate-600);background-color:var(--bcm-new-ds-color-slate-100);position:relative}.bcm-modal__container-header span.full-width{width:100%}.bcm-modal__container-header-close{display:flex;flex-direction:row;align-items:center;justify-content:center;flex-wrap:nowrap;padding:8px;cursor:pointer;color:var(--bcm-new-ds-color-slate-500);transition:color 0.1s ease-in-out}.bcm-modal__container-header-close:hover{color:var(--bcm-new-ds-color-slate-600)}.bcm-modal__container-header-close:active{color:var(--bcm-new-ds-color-slate-700)}.bcm-modal__container-header-close:focus-visible{color:var(--bcm-new-ds-color-slate-800)}.bcm-modal__container-header:after{border-radius:8px 8px 0 0;content:\"\";display:block;width:100%;height:4px;background-color:var(--bcm-color-primary-500);position:absolute;top:-4px;left:0}.bcm-modal__container-footer-content{display:flex;flex-direction:row;align-items:flex-start;justify-content:flex-end;flex-wrap:nowrap;padding:12px 24px 24px;grid-gap:8px}";
+const modalStyle = ce({
+  slots: {
+    host: [
+      "bcm-modal bcm-ui-element bcm-ui-content-display",
+      "tw-flex tw-flex-col tw-items-center tw-justify-start",
+      "tw-w-full tw-h-full",
+      "tw-fixed tw-top-0 tw-left-0",
+      "tw-z-modal",
+      "tw-overflow-auto tw-p-6"
+    ],
+    overlay: "overlay tw-fixed tw-top-0 tw-left-0 tw-w-full tw-h-full tw-bg-color-transparent-background",
+    container: [
+      "bcm-modal__container",
+      "tw-flex tw-flex-col tw-w-full",
+      "tw-shadow-2",
+      "tw-rounded-modals",
+      "tw-bg-color-surface-modal",
+    ],
+    main: ["bcm-modal__container-main tw-text-color tw-p-0"],
+    headerHost: [
+      "bcm-modal__container-header",
+      "tw-flex tw-items-center tw-justify-between",
+      "tw-py-3 tw-px-4",
+      "tw-text-size-6 tw-font-semibold",
+      "tw-text-color tw-bg-color-default",
+      "tw-relative",
+      "after:tw-rounded-t-lg after:tw-block after:tw-w-full after:tw-w-full after:tw-h-1 after:tw-bg-[--bcm-color-primary-500] after:tw-absolute after:-tw-top-1 after:tw-left-0"
+    ],
+    headerClose: [
+      "bcm-modal__container-header-close",
+      "tw-flex tw-items-center tw-justify-center",
+      "tw-p-2 tw-text-color tw-text-size-5",
+      "tw-cursor-pointer",
+      "tw-transition tw-duration-100 tw-ease-in-out",
+      "hover:tw-text-gray-800 focus-visible:tw-text-gray-900"
+    ],
+    footerHost: [
+      "bcm-modal__container-footer"
+    ],
+    footerContent: [
+      "bcm-modal__container-footer-content",
+      "tw-flex tw-flex-row tw-items-start tw-justify-end",
+      "tw-p-4 tw-gap-2"
+    ],
+  },
+  variants: {
+    size: {
+      portrait: {
+        container: "portrait tw-max-w-[312px]"
+      },
+      landscape: {
+        container: "landscape tw-max-w-[475px]"
+      },
+      small: {
+        container: "small tw-max-w-xl",
+      },
+      medium: {
+        container: "medium tw-max-w-3xl",
+      },
+      large: {
+        container: "large tw-max-w-[992px]",
+      },
+      xlarge: {
+        container: "xlarge tw-max-w-5xl",
+      },
+      xxlarge: {
+        container: "xxlarge tw-max-w-[1200px]",
+      },
+      xxxlarge: {
+        container: "xxxlarge tw-max-w-[1700px]",
+      },
+      customSize: {
+        container: "custom-size",
+        main: "tw-overflow-auto tw-w-full tw-h-full",
+      },
+    },
+    isShow: {
+      true: {
+        host: [
+          "bcm-modal__show",
+          "tw-opacity-100 tw-visible",
+        ],
+        container: [
+          "bcm-modal__show",
+          "tw-transform tw-translate-y-0",
+        ],
+      },
+      false: {
+        host: ["tw-opacity-0  tw-invisible tw-user-select-none"],
+      },
+    },
+    fullWidth: {
+      true: {
+        container: "full-width !tw-max-w-full !tw-w-full",
+      },
+      false: {
+        container: "",
+      },
+    },
+  },
+  defaultVariants: {
+    size: "medium",
+    isShow: false,
+    fullWidth: false,
+  },
+});
+
+const modalCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");.size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}.input-size-large{height:40px}.input-size-medium{height:32px}.input-size-small{height:24px}.resize-none textarea{resize:none}.resize-vertical textarea{resize:vertical}.resize-auto textarea{height:auto;resize:none}.textarea-size-large{padding:4px 0 0 4px;min-height:40px}.textarea-size-large .bcm-input-element{min-height:calc((40px - 8px) + 2px)}.textarea-size-large .input-clear-button{height:calc( 40px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-medium{padding:4px 0 0 4px;min-height:32px}.textarea-size-medium .bcm-input-element{min-height:calc((32px - 8px) + 2px)}.textarea-size-medium .input-clear-button{height:calc( 32px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-small{padding:0px 0 0 4px;min-height:24px}.textarea-size-small .bcm-input-element{min-height:calc((24px - 8px) + 2px)}.textarea-size-small .input-clear-button{height:calc( 24px - 16px );top:8px;padding:0;margin-right:8px}.bcm-modal{transition:opacity 0.5s ease, visibility 0.4s ease-in-out, 0.3s z-index}.bcm-modal__show{transition:opacity 0.2s ease, visibility 0.4s ease-in-out, 0.3s z-index}.bcm-modal__show .bcm-modal__container{transition:opacity 0.2s ease-in-out, transform 0.2s ease-in-out;transform:translateY(0)}.bcm-modal__container{transform:translateY(-100px);transition:opacity 0.2s ease-in-out, transform 0.2s ease-in-out}";
 
 const BcmModal = class {
   constructor(hostRef) {
@@ -28480,8 +29232,6 @@ const BcmModal = class {
     if (bcmSlots) {
       bcmSlots.forEach(el => {
         let slotName = StringHelper.lowercase(StringHelper.split(el.nodeName, '-').pop());
-        el.slot = slotName;
-        el.classList.add(`bcm-modal__container-${slotName}-content`);
         this.modalSlots[slotName] = el;
       });
     }
@@ -28567,25 +29317,20 @@ const BcmModal = class {
     document.body.classList.remove(disableScrollClass);
   }
   render() {
-    const { isShow, size, fullWidth, hidden, width, height } = this;
-    const bcmModalContainer = classnames('bcm-modal__container', size, {
-      'custom-size': width || height,
-      'full-width': fullWidth,
-      'bcm-modal__show': isShow,
-    });
-    const bcmModalHostClasses = classnames('bcm-modal', {
-      hidden,
-      'bcm-modal__show': isShow,
+    const { isShow, size, fullWidth, width, height } = this;
+    const { host, container, main, headerHost, headerClose, footerHost, overlay, } = modalStyle({
+      size,
+      isShow,
+      fullWidth,
     });
-    const mainClasses = classnames('bcm-modal__container-main', 'size-2');
     const FooterTemplate = () => {
-      return (this.modalSlots['footer'] && (h$2("footer", { class: "bcm-modal__container-footer" }, h$2("slot", { name: "footer" }))));
+      return (this.modalSlots['footer'] && (h$2("footer", { class: footerHost() }, h$2("slot", { name: "footer" }))));
     };
     const HeaderTemplate = () => {
-      return (this.modalSlots['header'] && (h$2("header", { class: "bcm-modal__container-header" }, h$2(SlotTemplate, { name: "header", className: 'full-width' }), h$2("div", { class: "bcm-modal__container-header-close", onClick: () => this.hide() }, h$2("bcm-icon", { icon: "far fa-times" })))));
+      return (this.modalSlots['header'] && (h$2("header", { class: headerHost() }, h$2("slot", { name: "header" }), h$2("div", { class: headerClose(), onClick: () => this.hide() }, h$2("i", { class: "fa-solid fa-xmark" })))));
     };
     const customStyle = Object.assign(Object.assign({}, (width && { width: width })), (height && { height: height }));
-    return (h$2(Host, { class: `tw-overscroll-contain  ${bcmModalHostClasses}` }, h$2("div", { class: "overlay", onClick: () => this.handleBackdrop() }), h$2("div", { class: bcmModalContainer, style: customStyle }, h$2(HeaderTemplate, null), h$2("main", { class: mainClasses }, h$2("article", null, h$2(SlotTemplate, null))), h$2(FooterTemplate, null))));
+    return (h$2(Host, { class: host() }, h$2("div", { class: overlay(), onClick: () => this.handleBackdrop() }), h$2("div", { class: container(), style: customStyle }, h$2(HeaderTemplate, null), h$2("main", { class: main() }, h$2("article", null, h$2(SlotTemplate, null))), h$2(FooterTemplate, null))));
   }
   get el() { return getElement(this); }
   static get watchers() { return {
@@ -28594,7 +29339,32 @@ const BcmModal = class {
 };
 BcmModal.style = modalCss;
 
-const oldInputCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap\"); .size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}.input-size-large{height:40px}.input-size-medium{height:32px}.input-size-small{height:24px}.resize-none textarea{resize:none}.resize-vertical textarea{resize:vertical}.resize-auto textarea{height:auto;resize:none}.textarea-size-large{padding:4px 0 0 4px;min-height:40px}.textarea-size-large .bcm-input-element{min-height:calc((40px - 8px) + 2px)}.textarea-size-large .input-clear-button{height:calc( 40px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-medium{padding:4px 0 0 4px;min-height:32px}.textarea-size-medium .bcm-input-element{min-height:calc((32px - 8px) + 2px)}.textarea-size-medium .input-clear-button{height:calc( 32px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-small{padding:0px 0 0 4px;min-height:24px}.textarea-size-small .bcm-input-element{min-height:calc((24px - 8px) + 2px)}.textarea-size-small .input-clear-button{height:calc( 24px - 16px );top:8px;padding:0;margin-right:8px}.bcm-input[no-margin]{margin:0}.bcm-textarea[no-margin]{margin:0}.bcm-switch[no-margin]{margin:0}.bcm-checkbox[no-margin]{margin:0}.bcm-radio-group[no-margin]{margin:0}.bcm-checkbox-group[no-margin]{margin:0}.bcm-range[no-margin]{margin:0}.bcm-form[no-margin]{margin:0}.bcm-form-group[no-margin]{margin:0}.bcm-list[no-margin]{margin:0}.bcm-colorpicker[no-margin]{margin:0}.bcm-date-picker[no-margin]{margin:0}.bcm-time-picker[no-margin]{margin:0}.bcm-datetime-picker[no-margin]{margin:0}.bcm-select[no-margin]{margin:0}.bcm-listbox[no-margin]{margin:0}*{box-sizing:border-box}.size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}:host{display:inline-block;width:100%;margin:0 0 8px 0}:host(.hidden){display:none}:host(.no-margin){margin:0}.input-container{display:flex;flex-direction:column;width:100%;max-width:256px}.input-container.full-width{max-width:100%}.input-base{font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;flex:1 1 auto;display:inline-flex;align-items:stretch;justify-content:start;position:relative;background-color:var(--bcm-new-ds-color-white);border:1px solid var(--bcm-new-ds-color-slate-300);border-radius:4px;vertical-align:middle;overflow:hidden;padding:0 4px;cursor:text}.input-base.disabled{background-color:var(--bcm-new-ds-color-slate-50);cursor:not-allowed}.input-base.disabled .bcm-input-element{color:var(--bcm-new-ds-color-slate-300)}.input-base.readonly{background-color:var(--bcm-new-ds-color-slate-50);cursor:default}.input-base.readonly .bcm-input-element{color:var(--bcm-new-ds-color-slate-600)}.input-base:not(.disabled):hover .caret-container,.input-base:not(.disabled).focused .caret-container{opacity:1}.input-base:not(.disabled):hover .input-clear-button,.input-base:not(.disabled).focused .input-clear-button{opacity:1}.input-base:not(.disabled).focused{background-color:var(--bcm-new-ds-color-slate-50)}.input-base:not(.disabled):hover{border-color:var(--bcm-color-prime-blue-6)}.input-base.focused:not(.disabled) .caret-container{opacity:1}.input-base.focused:not(.disabled) .input-clear-button{opacity:1}.input-base:hover:not(.disabled) .caret-container{opacity:1}.input-base:hover:not(.disabled) .input-clear-button{opacity:1}.input-base.disabled{cursor:not-allowed}.input-base.readonly{cursor:default}.input-base.empty .input-clear-button{display:none}.input-base.invalid,.input-base.error{border-color:var(--bcm-new-ds-color-red-500)}.error .label{color:var(--bcm-new-ds-color-red-500) !important}.error .input-base{border-color:var(--bcm-new-ds-color-red-500) !important}.input-base input{color:var(--bcm-new-ds-color-slate-600);flex:1 1 auto;width:0%;border:none;border-radius:2px;background:none;box-shadow:none;padding:0;margin:0 4px;font-family:\"Inter\", sans-serif;cursor:inherit;-webkit-appearance:none;appearance:none}.input-base input::-webkit-search-decoration,.input-base input::-webkit-search-cancel-button,.input-base input::-webkit-search-results-button,.input-base input::-webkit-search-results-decoration{-webkit-appearance:none}.input-base input::placeholder{font-family:\"Inter\", sans-serif;color:var(--bcm-new-ds-color-slate-300);user-select:none}.input-base input:focus{outline:none}input::-webkit-calendar-picker-indicator{-webkit-appearance:none;display:none}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none}input[type=number]{-moz-appearance:textfield}.input-prefix,.input-suffix{display:inline-flex;align-items:center;justify-content:center;cursor:default;color:var(--bcm-new-ds-color-slate-500)}.input-prefix ::slotted(*),.input-prefix>span{line-height:1;margin-left:4px}.input-suffix ::slotted(*),.input-suffix>span{line-height:1;margin-right:4px}.input-clear-button,.input-password-toggle{display:inline-flex;align-items:center;border:none;background:none;padding:0;cursor:pointer;margin-right:4px;transition:0.2s opacity}.input-clear-button:last-child,.input-clear-button:last-of-type,.input-password-toggle:last-child,.input-password-toggle:last-of-type{margin-right:8px}.input-clear-button:focus,.input-password-toggle:focus{outline:none}.input-clear-button{opacity:0}.label{display:flex;flex-direction:column;font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;color:var(--bcm-new-ds-color-slate-600);margin-bottom:4px}.caption-area{min-height:20px}.input-caption{display:block}.unit.input-suffix{width:24px}.unit-prefix{display:inline-flex;flex:0 0 auto;align-items:center;cursor:default;color:var(--bcm-color-grey-8)}.caret-container{opacity:0;width:30px;display:flex;flex-direction:column;justify-content:center;align-items:center;border-left:1px solid #D9D9D9;border-right:1px solid #D9D9D9;transition:0.2s opacity;user-select:none;box-sizing:border-box;margin-right:4px}.caret-container:last-of-type{margin-right:-space(\"xxxs\");border-right:none}.caret-container .caret{display:inline-flex;height:50%;width:100%;align-items:center;justify-content:center;color:var(--bcm-color-grey-7);cursor:pointer}.caret-container .caret:hover{color:var(--bcm-color-prime-blue-6)}.caret-container .caret:active{background-color:var(--bcm-color-grey-3)}.caret-container .caret:last-child{border-top:1px solid #D9D9D9}.caret-container.disabled{background-color:var(--bcm-color-grey-3)}.caret-container.disabled .caret{cursor:not-allowed}.default-icon{margin-right:8px}.input-large{height:40px}.input-medium{height:32px}.input-small{height:24px}.bcm-label{font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin-bottom:4px;font-weight:500;color:#475569}.bcm-label.tw-text-1{font-size:10px;line-height:18px}.bcm-label.tw-text-2{font-size:12px;line-height:20px}.bcm-label.tw-text-3{font-size:14px;line-height:22px}.bcm-caption-area{color:#dc2626;font-weight:400;justify-content:space-between;align-items:flex-start;flex-direction:row;min-height:20px;display:flex;margin-top:4px;font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.bcm-caption-area.tw-text-1{font-size:10px;line-height:18px}.bcm-caption-area.tw-text-2{font-size:12px;line-height:20px}.bcm-caption-area.tw-text-3{font-size:14px;line-height:22px}";
+const BcmModalFooter = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this._id = Generate.UID();
+    this.el.slot = "footer";
+  }
+  render() {
+    const { footerContent } = modalStyle();
+    return (h$2(Host, { class: footerContent() }, h$2("slot", null)));
+  }
+  get el() { return getElement(this); }
+};
+
+const BcmModalHeader = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this._id = Generate.UID();
+    this.el.slot = "header";
+  }
+  render() {
+    return (h$2(Host, { class: "tw-inline" }, h$2("slot", null)));
+  }
+  get el() { return getElement(this); }
+};
+
+const oldInputCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap\"); .size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}.input-size-large{height:40px}.input-size-medium{height:32px}.input-size-small{height:24px}.resize-none textarea{resize:none}.resize-vertical textarea{resize:vertical}.resize-auto textarea{height:auto;resize:none}.textarea-size-large{padding:4px 0 0 4px;min-height:40px}.textarea-size-large .bcm-input-element{min-height:calc((40px - 8px) + 2px)}.textarea-size-large .input-clear-button{height:calc( 40px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-medium{padding:4px 0 0 4px;min-height:32px}.textarea-size-medium .bcm-input-element{min-height:calc((32px - 8px) + 2px)}.textarea-size-medium .input-clear-button{height:calc( 32px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-small{padding:0px 0 0 4px;min-height:24px}.textarea-size-small .bcm-input-element{min-height:calc((24px - 8px) + 2px)}.textarea-size-small .input-clear-button{height:calc( 24px - 16px );top:8px;padding:0;margin-right:8px}.bcm-input[no-margin]{margin:0}.bcm-textarea[no-margin]{margin:0}.bcm-switch[no-margin]{margin:0}.bcm-checkbox[no-margin]{margin:0}.bcm-radio-group[no-margin]{margin:0}.bcm-checkbox-group[no-margin]{margin:0}.bcm-range[no-margin]{margin:0}.bcm-form[no-margin]{margin:0}.bcm-form-group[no-margin]{margin:0}.bcm-list[no-margin]{margin:0}.bcm-colorpicker[no-margin]{margin:0}.bcm-date-picker[no-margin]{margin:0}.bcm-time-picker[no-margin]{margin:0}.bcm-datetime-picker[no-margin]{margin:0}.bcm-select[no-margin]{margin:0}.bcm-listbox[no-margin]{margin:0}*{box-sizing:border-box}.size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}:host{display:inline-block;width:100%;margin:0 0 8px 0}:host(.hidden){display:none}:host(.no-margin){margin:0}.input-container{display:flex;flex-direction:column;width:100%;max-width:256px}.input-container.full-width{max-width:100%}.input-base{font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;flex:1 1 auto;display:inline-flex;align-items:stretch;justify-content:start;position:relative;background-color:var(--bcm-ui-color-background-base-default);border:1px solid var(--bcm-ui-color-border-default);border-radius:var(--bcm-ui-radius);vertical-align:middle;overflow:hidden;padding:0 var(--bcm-ui-spacing-2);cursor:text}.input-base.disabled{background-color:var(--bcm-ui-color-background-disabled-disable);cursor:not-allowed}.input-base.disabled .bcm-input-element{color:var(--bcm-ui-color-text-disabled)}.input-base.readonly{background-color:var(--bcm-new-ds-color-slate-50);cursor:default}.input-base.readonly .bcm-input-element{color:var(--bcm-new-ds-color-slate-600)}.input-base:not(.disabled):hover .caret-container,.input-base:not(.disabled).focused .caret-container{opacity:1}.input-base:not(.disabled):hover .input-clear-button,.input-base:not(.disabled).focused .input-clear-button{opacity:1}.input-base:not(.disabled).focused{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)}.input-base:not(.disabled):hover{border-color:var(--bcm-ui-color-border-primary-info)}.input-base.focused:not(.disabled) .caret-container{opacity:1}.input-base.focused:not(.disabled) .input-clear-button{opacity:1}.input-base:hover:not(.disabled) .caret-container{opacity:1}.input-base:hover:not(.disabled) .input-clear-button{opacity:1}.input-base.disabled{cursor:not-allowed}.input-base.readonly{cursor:default}.input-base.empty .input-clear-button{display:none}.input-base.invalid,.input-base.error{border-color:var(--bcm-ui-color-border-error)}.input-base.input-size-small{font-size:var(--bcm-ui-font-size-4)}.input-base.input-size-medium{font-size:var(--bcm-ui-font-size-5)}.input-base.input-size-large{font-size:var(--bcm-ui-font-size-6)}.error .input-base{border-color:var(--bcm-ui-color-border-error)}.input-base input{color:var(--bcm-ui-color-text-default);flex:1 1 auto;width:0%;border:none;border-radius:2px;background:none;box-shadow:none;padding:0;margin:0 4px;font-family:\"Inter\", sans-serif;font-weight:500;cursor:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;font-size:inherit;line-height:inherit}.input-base input::-webkit-search-decoration,.input-base input::-webkit-search-cancel-button,.input-base input::-webkit-search-results-button,.input-base input::-webkit-search-results-decoration{-webkit-appearance:none}.input-base input::placeholder{font-family:\"Inter\", sans-serif;font-weight:400;color:var(--bcm-ui-color-text-placeholder);user-select:none}.input-base input:focus{outline:none}input::-webkit-calendar-picker-indicator{-webkit-appearance:none;display:none}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none}input[type=number]{-moz-appearance:textfield}.input-prefix,.input-suffix{display:inline-flex;align-items:center;justify-content:center;cursor:default;color:var(--bcm-ui-color-text-placeholder)}.input-prefix ::slotted(*),.input-prefix>span{line-height:1;margin-left:4px}.input-suffix ::slotted(*),.input-suffix>span{line-height:1;margin-right:4px}.input-clear-button,.input-password-toggle{display:inline-flex;align-items:center;border:none;background:none;padding:0;cursor:pointer;margin-right:4px;transition:0.2s opacity}.input-clear-button:last-child,.input-clear-button:last-of-type,.input-password-toggle:last-child,.input-password-toggle:last-of-type{margin-right:8px}.input-clear-button:focus,.input-password-toggle:focus{outline:none}.input-clear-button{opacity:0}.label{display:flex;flex-direction:column;font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;color:var(--bcm-new-ds-color-slate-600);margin-bottom:4px}.caption-area{min-height:20px}.input-caption{display:block}.unit.input-suffix{width:24px}.unit-prefix{display:inline-flex;flex:0 0 auto;align-items:center;cursor:default;color:var(--bcm-ui-color-text-placeholder)}.caret-container{opacity:0;width:30px;display:flex;flex-direction:column;justify-content:center;align-items:center;border-left:1px solid #D9D9D9;border-right:1px solid #D9D9D9;transition:0.2s opacity;user-select:none;box-sizing:border-box;margin-right:4px}.caret-container:last-of-type{margin-right:-space(\"xxxs\");border-right:none}.caret-container .caret{display:inline-flex;height:50%;width:100%;align-items:center;justify-content:center;color:var(--bcm-color-grey-7);cursor:pointer}.caret-container .caret:hover{color:var(--bcm-color-prime-blue-6)}.caret-container .caret:active{background-color:var(--bcm-color-grey-3)}.caret-container .caret:last-child{border-top:1px solid #D9D9D9}.caret-container.disabled{background-color:var(--bcm-color-grey-3)}.caret-container.disabled .caret{cursor:not-allowed}.default-icon{margin-right:8px}.input-large{height:40px}.input-medium{height:32px}.input-small{height:24px}.bcm-label{font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin-bottom:4px;font-weight:500;color:var(--bcm-ui-color-text-label)}.bcm-label.tw-text-1{font-size:var(--bcm-ui-font-size-3);line-height:var(--bcm-ui-line-height-3)}.bcm-label.tw-text-2{font-size:var(--bcm-ui-font-size-4);line-height:var(--bcm-ui-line-height-4)}.bcm-label.tw-text-3{font-size:var(--bcm-ui-font-size-5);line-height:var(--bcm-ui-line-height-5)}.bcm-caption-area{color:#dc2626;font-weight:400;justify-content:space-between;align-items:flex-start;flex-direction:row;min-height:20px;display:flex;margin-top:4px;font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.bcm-caption-area.tw-text-1{font-size:10px;line-height:18px}.bcm-caption-area.tw-text-2{font-size:12px;line-height:20px}.bcm-caption-area.tw-text-3{font-size:14px;line-height:22px}";
 
 let id = 0;
 const defaultIcons = {
@@ -28953,7 +29723,7 @@ const BcmOldInput = class {
       'full-width': fullWidth,
       'error': captionType == 'error' ? true : false
     });
-    const baseClasses = classnames('input-base', 'input-' + size, {
+    const baseClasses = classnames('input-base', 'input-size-' + size, {
       'invalid': inValid,
       'unit': (unit === null || unit === void 0 ? void 0 : unit.length) > 0,
       'focused': hasFocus,
@@ -28963,7 +29733,9 @@ const BcmOldInput = class {
     });
     const inputClass = size === 'large' ? 'size-3' : 'size-2';
     const hostClasses = classnames(this.hidden ? 'hidden' : null, this.noMargin ? 'no-margin' : null);
-    return (h$2(Host, { class: hostClasses }, h$2("div", { class: containerClasses }, label && h$2("div", null, h$2("bcm-label", { tooltip: this.tooltip, type: captionType, value: label, required: required, htmlFor: this.inputId })), h$2("div", { class: baseClasses }, h$2("span", { class: "input-prefix" }, h$2("slot", { name: "prefix" }), unitPrefix && h$2("span", { class: classnames(inputClass, 'unit-prefix') }, unitPrefix)), h$2("input", { "bcm-internal-id": this._id, id: this.inputId, class: inputClass, ref: el => (this.inputElement = el), onFocus: this.handleFocus, onBlur: this.handleBlur, onChange: this.handleChange, onInput: this.handleInput, maxLength: this.maxLength, type: type === 'password' && isPasswordVisible ? 'text' :
+    return (h$2(Host, { class: hostClasses }, h$2("div", { class: containerClasses }, label && h$2("div", null, h$2("bcm-label", { tooltip: this.tooltip, type: captionType, value: label, required: required, htmlFor: this.inputId })), h$2("div", { class: baseClasses }, h$2("span", { class: "input-prefix" }, h$2("slot", { name: "prefix" }), unitPrefix && h$2("span", { class: classnames(inputClass, 'unit-prefix') }, unitPrefix)), h$2("input", { "bcm-internal-id": this._id, id: this.inputId,
+      // class={inputClass}
+      ref: el => (this.inputElement = el), onFocus: this.handleFocus, onBlur: this.handleBlur, onChange: this.handleChange, onInput: this.handleInput, maxLength: this.maxLength, type: type === 'password' && isPasswordVisible ? 'text' :
         type === 'number' ? 'text' : type, placeholder: placeholder, value: type === 'number' && !this.hasFocus
         ? value + (value && (unit === null || unit === void 0 ? void 0 : unit.length) > 0 ? ' ' + unit : '')
         : value, disabled: this.disabled, readonly: this.readonly }), clearable && !this.disabled && (h$2("button", { class: "input-clear-button", onClick: this.handleClear }, h$2("svg", { style: { "fill": "#595959", "width": "14px", "height": "14px" }, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 320 512" }, h$2("path", { d: "M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z" })))), type === 'password' && passwordToggle && (h$2("button", { class: "input-password-toggle", onClick: this.changePasswordVisibility }, h$2("bcm-icon", { icon: isPasswordVisible ? "far fa-eye-invisible" : "far fa-eye" }))), Object.keys(defaultIcons).includes(type) && !noDefaultIcon && (h$2("span", { class: "input-suffix default-icon", innerHTML: defaultIcons[type] })), type === 'number' && (h$2("div", { class: classnames('caret-container', { 'unit': (unit === null || unit === void 0 ? void 0 : unit.length) > 0 }, { 'disabled': inValid }, { 'disabled': readonly }) }, h$2("span", { class: "caret", onClick: inValid == false && this.incrementNumber }, h$2("bcm-icon", { icon: "far fa-caret-up" })), h$2("span", { class: "caret", onClick: inValid == false && this.decrementNumber }, h$2("bcm-icon", { icon: "far fa-caret-down" })))), type !== 'number' && (h$2("span", { class: "input-suffix" }, h$2("slot", { name: "suffix" })))), h$2(CaptionTemplate, { noCaption: noCaption, captionType: captionType, captionError: captionError, caption: caption }))));
@@ -29316,12 +30088,8 @@ const BcmPopconfirm = class {
 };
 BcmPopconfirm.style = popconfirmCss;
 
-const popconfirmBoxCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap\"); .size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}.input-size-large{height:40px}.input-size-medium{height:32px}.input-size-small{height:24px}.resize-none textarea{resize:none}.resize-vertical textarea{resize:vertical}.resize-auto textarea{height:auto;resize:none}.textarea-size-large{padding:4px 0 0 4px;min-height:40px}.textarea-size-large .bcm-input-element{min-height:calc((40px - 8px) + 2px)}.textarea-size-large .input-clear-button{height:calc( 40px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-medium{padding:4px 0 0 4px;min-height:32px}.textarea-size-medium .bcm-input-element{min-height:calc((32px - 8px) + 2px)}.textarea-size-medium .input-clear-button{height:calc( 32px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-small{padding:0px 0 0 4px;min-height:24px}.textarea-size-small .bcm-input-element{min-height:calc((24px - 8px) + 2px)}.textarea-size-small .input-clear-button{height:calc( 24px - 16px );top:8px;padding:0;margin-right:8px}*{box-sizing:border-box}.bcm-popconfirm-box{position:absolute;transition:transform 0.2s ease-in-out;}.bcm-popconfirm-box .bcm-pop-box{font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;font-size:10px;line-height:calc(10px + 8px);box-shadow:0 4px 12px 2px rgba(17, 24, 38, 0.1);border-radius:4px;position:absolute;box-sizing:border-box;background-color:#FFFFFF;border:1px solid #FFFFFF;z-index:-99999;overflow:hidden;visibility:hidden;width:230px;filter:drop-shadow(0px 1px 6px rgba(0, 0, 0, 0.25));padding:8px 16px}.bcm-popconfirm-box .bcm-pop-box .bcm-pop-content{display:flex;flex-direction:row;align-items:flex-start}.bcm-popconfirm-box .bcm-pop-box .bcm-pop-content-icon{margin-right:8px;min-width:16px}.bcm-popconfirm-box .bcm-pop-box .bcm-pop-content-text{display:flex;flex-direction:row;align-items:center;text-align:left;padding-top:1px}.bcm-popconfirm-box .bcm-pop-box .bcm-pop-buttons{display:flex;justify-content:flex-end;margin-top:8px}.bcm-popconfirm-box .bcm-pop-box .bcm-pop-buttons bcm-button:first-child{margin-right:8px}.bcm-popconfirm-box::after{content:\"\";position:absolute;display:none;border:6px solid;z-index:10900;pointer-events:none}.bcm-popconfirm-box.bcm-pop-open{display:block;z-index:10900}.bcm-popconfirm-box.bcm-pop-open .bcm-pop-box{z-index:10900;overflow:unset;visibility:unset}.bcm-popconfirm-box.bcm-pop-open::after{display:block}.bcm-popconfirm-box.top .bcm-pop-box{bottom:100%;margin-bottom:16px}.bcm-popconfirm-box.top::after{bottom:100%;margin-bottom:4px;border-color:#FFFFFF transparent transparent transparent}.bcm-popconfirm-box.bottom .bcm-pop-box{top:100%;margin-top:16px}.bcm-popconfirm-box.bottom::after{top:100%;margin-top:4px;border-color:transparent transparent #FFFFFF transparent}.bcm-popconfirm-box.left .bcm-pop-box{right:100%;margin-right:16px}.bcm-popconfirm-box.left::after{right:100%;margin-right:4px;border-color:transparent transparent transparent #FFFFFF}.bcm-popconfirm-box.right .bcm-pop-box{left:100%;margin-left:16px}.bcm-popconfirm-box.right::after{left:100%;margin-left:4px;border-color:transparent #FFFFFF transparent transparent}.bcm-popconfirm-box.top.center .bcm-pop-box,.bcm-popconfirm-box.bottom.center .bcm-pop-box{left:50%;transform:translateX(-50%)}.bcm-popconfirm-box.top.center::after,.bcm-popconfirm-box.bottom.center::after{left:50%;transform:translateX(-50%)}.bcm-popconfirm-box.top.start .bcm-pop-box,.bcm-popconfirm-box.bottom.start .bcm-pop-box{left:0}.bcm-popconfirm-box.top.start::after,.bcm-popconfirm-box.bottom.start::after{left:16px}.bcm-popconfirm-box.top.end .bcm-pop-box,.bcm-popconfirm-box.bottom.end .bcm-pop-box{right:0}.bcm-popconfirm-box.top.end::after,.bcm-popconfirm-box.bottom.end::after{right:16px}.bcm-popconfirm-box.left.center .bcm-pop-box,.bcm-popconfirm-box.right.center .bcm-pop-box{top:50%;transform:translateY(-50%)}.bcm-popconfirm-box.left.center::after,.bcm-popconfirm-box.right.center::after{top:50%;transform:translateY(-50%)}.bcm-popconfirm-box.left.start .bcm-pop-box,.bcm-popconfirm-box.right.start .bcm-pop-box{top:0}.bcm-popconfirm-box.left.start::after,.bcm-popconfirm-box.right.start::after{top:12px}.bcm-popconfirm-box.left.end .bcm-pop-box,.bcm-popconfirm-box.right.end .bcm-pop-box{bottom:0}.bcm-popconfirm-box.left.end::after,.bcm-popconfirm-box.right.end::after{bottom:12px}.bcm-popconfirm-box.top{transform:translateY(1px)}.bcm-popconfirm-box.bottom{transform:translateY(-1px)}.bcm-popconfirm-box.left{transform:translateX(1px)}.bcm-popconfirm-box.right{transform:translateX(-1px)}.bcm-popconfirm-box.top.bcm-pop-open,.bcm-popconfirm-box.bottom.bcm-pop-open{transform:translateY(0)}.bcm-popconfirm-box.left.bcm-pop-open,.bcm-popconfirm-box.right.bcm-pop-open{transform:translateX(0)}";
+const popconfirmBoxCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap\"); .size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}.input-size-large{height:40px}.input-size-medium{height:32px}.input-size-small{height:24px}.resize-none textarea{resize:none}.resize-vertical textarea{resize:vertical}.resize-auto textarea{height:auto;resize:none}.textarea-size-large{padding:4px 0 0 4px;min-height:40px}.textarea-size-large .bcm-input-element{min-height:calc((40px - 8px) + 2px)}.textarea-size-large .input-clear-button{height:calc( 40px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-medium{padding:4px 0 0 4px;min-height:32px}.textarea-size-medium .bcm-input-element{min-height:calc((32px - 8px) + 2px)}.textarea-size-medium .input-clear-button{height:calc( 32px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-small{padding:0px 0 0 4px;min-height:24px}.textarea-size-small .bcm-input-element{min-height:calc((24px - 8px) + 2px)}.textarea-size-small .input-clear-button{height:calc( 24px - 16px );top:8px;padding:0;margin-right:8px}*{box-sizing:border-box}.bcm-popconfirm-box{position:absolute;transition:transform 0.2s ease-in-out;}.bcm-popconfirm-box .bcm-pop-box{font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;font-size:10px;line-height:calc(10px + 8px);box-shadow:var(--bcm-ui-box-shadow-4);border-radius:var(--bcm-ui-radius);position:absolute;box-sizing:border-box;background-color:#FFFFFF;border:1px solid #FFFFFF;color:var(--bcm-ui-color-text-default);z-index:-99999;overflow:hidden;visibility:hidden;width:256px;filter:drop-shadow(0px 1px 6px rgba(0, 0, 0, 0.25));padding:var(--bcm-ui-spacing-4)}.bcm-popconfirm-box .bcm-pop-box .bcm-pop-content{display:flex;flex-direction:row;align-items:flex-start}.bcm-popconfirm-box .bcm-pop-box .bcm-pop-content-icon{margin-right:var(--bcm-ui-spacing-2-5);min-width:16px;color:var(--bcm-ui-color-text-default);font-size:var(--bcm-ui-font-size-5);line-height:var(--bcm-ui-line-height-5)}.bcm-popconfirm-box .bcm-pop-box .bcm-pop-content-icon.error{color:var(--bcm-ui-color-text-error)}.bcm-popconfirm-box .bcm-pop-box .bcm-pop-content-icon.warning{color:var(--bcm-ui-color-text-warning)}.bcm-popconfirm-box .bcm-pop-box .bcm-pop-content-icon.info{color:var(--bcm-ui-color-text-primary)}.bcm-popconfirm-box .bcm-pop-box .bcm-pop-content-text{display:flex;flex-direction:row;align-items:center;text-align:left;padding-top:1px;color:var(--bcm-ui-color-text-default);font-size:var(--bcm-ui-font-size-4);line-height:var(--bcm-ui-line-height-4)}.bcm-popconfirm-box .bcm-pop-box .bcm-pop-buttons{display:flex;justify-content:flex-end;margin-top:var(--bcm-ui-spacing-6)}.bcm-popconfirm-box .bcm-pop-box .bcm-pop-buttons bcm-button:first-child{margin-right:8px}.bcm-popconfirm-box::after{content:\"\";position:absolute;display:none;border:6px solid;z-index:10900;pointer-events:none}.bcm-popconfirm-box.bcm-pop-open{display:block;z-index:10900}.bcm-popconfirm-box.bcm-pop-open .bcm-pop-box{z-index:10900;overflow:unset;visibility:unset}.bcm-popconfirm-box.bcm-pop-open::after{display:block}.bcm-popconfirm-box.top .bcm-pop-box{bottom:100%;margin-bottom:16px}.bcm-popconfirm-box.top::after{bottom:100%;margin-bottom:4px;border-color:#FFFFFF transparent transparent transparent}.bcm-popconfirm-box.bottom .bcm-pop-box{top:100%;margin-top:16px}.bcm-popconfirm-box.bottom::after{top:100%;margin-top:4px;border-color:transparent transparent #FFFFFF transparent}.bcm-popconfirm-box.left .bcm-pop-box{right:100%;margin-right:16px}.bcm-popconfirm-box.left::after{right:100%;margin-right:4px;border-color:transparent transparent transparent #FFFFFF}.bcm-popconfirm-box.right .bcm-pop-box{left:100%;margin-left:16px}.bcm-popconfirm-box.right::after{left:100%;margin-left:4px;border-color:transparent #FFFFFF transparent transparent}.bcm-popconfirm-box.top.center .bcm-pop-box,.bcm-popconfirm-box.bottom.center .bcm-pop-box{left:50%;transform:translateX(-50%)}.bcm-popconfirm-box.top.center::after,.bcm-popconfirm-box.bottom.center::after{left:50%;transform:translateX(-50%)}.bcm-popconfirm-box.top.start .bcm-pop-box,.bcm-popconfirm-box.bottom.start .bcm-pop-box{left:0}.bcm-popconfirm-box.top.start::after,.bcm-popconfirm-box.bottom.start::after{left:16px}.bcm-popconfirm-box.top.end .bcm-pop-box,.bcm-popconfirm-box.bottom.end .bcm-pop-box{right:0}.bcm-popconfirm-box.top.end::after,.bcm-popconfirm-box.bottom.end::after{right:16px}.bcm-popconfirm-box.left.center .bcm-pop-box,.bcm-popconfirm-box.right.center .bcm-pop-box{top:50%;transform:translateY(-50%)}.bcm-popconfirm-box.left.center::after,.bcm-popconfirm-box.right.center::after{top:50%;transform:translateY(-50%)}.bcm-popconfirm-box.left.start .bcm-pop-box,.bcm-popconfirm-box.right.start .bcm-pop-box{top:0}.bcm-popconfirm-box.left.start::after,.bcm-popconfirm-box.right.start::after{top:12px}.bcm-popconfirm-box.left.end .bcm-pop-box,.bcm-popconfirm-box.right.end .bcm-pop-box{bottom:0}.bcm-popconfirm-box.left.end::after,.bcm-popconfirm-box.right.end::after{bottom:12px}.bcm-popconfirm-box.top{transform:translateY(1px)}.bcm-popconfirm-box.bottom{transform:translateY(-1px)}.bcm-popconfirm-box.left{transform:translateX(1px)}.bcm-popconfirm-box.right{transform:translateX(-1px)}.bcm-popconfirm-box.top.bcm-pop-open,.bcm-popconfirm-box.bottom.bcm-pop-open{transform:translateY(0)}.bcm-popconfirm-box.left.bcm-pop-open,.bcm-popconfirm-box.right.bcm-pop-open{transform:translateX(0)}";
 
-const statuses = {
-  error: ['fal fa-times-circle', 'red-6'],
-  warning: ['fal fa-exclamation-circle', 'warmyellow-6'],
-};
 const BcmPopconfirmBox = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
@@ -29398,17 +30166,97 @@ const BcmPopconfirmBox = class {
   }
   render() {
     const { message, cancelText, okeyText, open, placement_string, status } = this;
-    const statusies = statuses[status];
+    // const statuses = {
+    //     error: ['fa-solid fa-circle-xmark', 'red-6'],
+    //     warning: ['fa-solid fa-triangle-exclamation', 'warmyellow-6'],
+    // }
     const boxClasses = classnames('bcm-pop-box');
     const hostClasses = classnames('bcm-popconfirm-box', placement_string, {
       'bcm-pop-open': open,
     });
-    return (h$2(Host, { class: hostClasses }, h$2("div", { class: boxClasses }, h$2("div", { class: "bcm-pop-content" }, h$2("div", { class: "bcm-pop-content-icon size-3", style: { color: ColorHelper.convertColorToHex(statusies[1]) } }, h$2("bcm-icon", { icon: statusies[0] })), h$2("div", { class: "bcm-pop-content-text" }, h$2("bcm-text", { scale: "size-2", innerHTML: message }))), h$2("div", { class: "bcm-pop-buttons" }, h$2("bcm-button", { size: "small", onClick: () => this.handleCancel(), outline: true }, cancelText), h$2("bcm-button", { size: "small", onClick: () => this.handleConfirm() }, okeyText)))));
+    return (h$2(Host, { class: hostClasses }, h$2("div", { class: boxClasses }, h$2("div", { class: "bcm-pop-content" }, h$2("div", { class: classnames('bcm-pop-content-icon', status) }, h$2("i", { class: classnames({
+        'fa-solid fa-circle-xmark': status === 'error',
+        'fa-solid fa-triangle-exclamation': status === 'warning',
+        'fa-solid fa-info-circle': status === 'info',
+      }) })), h$2("div", { class: "bcm-pop-content-text" }, message)), h$2("div", { class: "bcm-pop-buttons" }, h$2("bcm-button", { size: "small", onClick: () => this.handleCancel(), outline: true }, cancelText), h$2("bcm-button", { size: "small", onClick: () => this.handleConfirm() }, okeyText)))));
   }
   get el() { return getElement(this); }
 };
 BcmPopconfirmBox.style = popconfirmBoxCss;
 
+const BcmPopover = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.bcmPopoverShow = createEvent(this, "bcmPopoverShow", 7);
+    this.bcmPopoverHide = createEvent(this, "bcmPopoverHide", 7);
+    this._id = Generate.UID();
+    this.message = "";
+    this.content = "";
+    this.placement = Bcm.Placement.top;
+    this.trigger = Bcm.TriggerType.click;
+    this.open = false;
+    this.color = "white";
+    this.openDelay = 0;
+    this.closeDelay = 0;
+    this.autoHide = false;
+    this.targetId = undefined;
+    this.popover = undefined;
+  }
+  emitShow() {
+    this.bcmPopoverShow.emit();
+  }
+  emitHide() {
+    this.bcmPopoverHide.emit();
+  }
+  connectedCallback() {
+    this.popover = new Popover({
+      targetId: this.targetId || this._id,
+      content: this.content,
+      message: this.message,
+      placement: this.placement,
+      color: this.color,
+      trigger: this.trigger,
+      openDelay: this.openDelay,
+      closeDelay: this.closeDelay,
+      autoHide: this.autoHide,
+      emitShow: () => this.emitShow(),
+      emitHide: () => this.emitHide(),
+    });
+  }
+  componentDidLoad() {
+    this.popover.listener();
+  }
+  componentDidRender() {
+    const { content, message, placement, color, trigger } = this;
+    this.popover.content = content;
+    this.popover.message = message;
+    this.popover.placement = placement;
+    this.popover.color = color;
+    this.popover.trigger = trigger;
+    this.popover.openDelay = this.openDelay;
+    this.popover.closeDelay = this.closeDelay;
+    this.popover.autoHide = this.autoHide;
+    this.popover.update();
+  }
+  disconnectedCallback() {
+    this.popover.destroy();
+  }
+  async show() {
+    this.popover.show();
+  }
+  async hide() {
+    this.popover.hide();
+  }
+  async toggle() {
+    this.popover.toggle();
+  }
+  render() {
+    const { popover } = popoverStyle();
+    return (h$2(Host, { class: popover(), role: "tooltip", "aria-hidden": "true" }, h$2("slot", null)));
+  }
+  get el() { return getElement(this); }
+};
+
 // export const lineSizes = {
 //   small: {
 //     textSize: 'size-1',
@@ -29551,6 +30399,71 @@ const BcmProgress = class {
 };
 BcmProgress.style = progressCss;
 
+const radioStyle = ce({
+  slots: {
+    host: [
+      "bcm-radio",
+      "bcm-ui-element bcm-ui-inputs",
+      "tw-cursor-pointer tw-font-sans tw-mb-1.5 tw-mt-1",
+    ],
+    label: ["tw-inline-flex tw-flex-row tw-gap-2 tw-mr-2 tw-items-center"],
+    input: [
+      "tw-flex tw-items-center tw-justify-center",
+      "tw-appearance-none tw-border tw-border-solid tw-rounded-full tw-cursor-pointer tw-transition tw-ease-in-out",
+      "tw-m-0",
+      "before:tw-content-[''] before:tw-absolute before:tw-rounded-full",
+      "focus:tw-outline-none focus:tw-shadow-outline",
+      // default
+      "tw-border-[--bcm-radio-border] tw-bg-[--bcm-radio-bg]",
+      "checked:tw-border-[--bcm-radio-checked-border]",
+      "checked:before:tw-bg-[--bcm-radio-checked-dot]",
+    ],
+  },
+  variants: {
+    size: {
+      small: {
+        host: "tw-text-size-4",
+        input: "tw-w-3.5 tw-h-3.5 before:tw-w-2 before:tw-h-2"
+      },
+      medium: {
+        host: "tw-text-size-5",
+        input: "tw-w-4 tw-h-4 before:tw-w-2.5 before:tw-h-2.5"
+      },
+      large: {
+        host: "tw-text-size-6",
+        input: "tw-w-4.5 tw-h-4.5 before:tw-w-3 before:tw-h-3"
+      },
+    },
+    disabled: {
+      true: {
+        host: "tw-cursor-not-allowed tw-text-color-disabled",
+        label: "tw-cursor-not-allowed ",
+        input: [
+          "disabled:tw-border-slate-400 disabled:tw-bg-slate-200 disabled:tw-cursor-not-allowed",
+          "disabled:checked:tw-border-slate-400",
+          "disabled:checked:before:tw-bg-slate-400",
+        ]
+      },
+      false: {
+        host: "tw-cursor-pointer tw-text-[--bcm-radio-text]",
+        label: "tw-cursor-pointer",
+        input: [
+          // hover
+          "hover:tw-border-[--bcm-radio-border-hover]",
+          "hover:checked:tw-border-[--bcm-radio-checked-border-hover]",
+          "hover:checked:before:tw-bg-[--bcm-radio-checked-dot-hover]",
+        ]
+      },
+    },
+  },
+  defaultVariants: {
+    size: "medium",
+    disabled: false,
+  },
+});
+
+const radioCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");.size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}.input-size-large{height:40px}.input-size-medium{height:32px}.input-size-small{height:24px}.resize-none textarea{resize:none}.resize-vertical textarea{resize:vertical}.resize-auto textarea{height:auto;resize:none}.textarea-size-large{padding:4px 0 0 4px;min-height:40px}.textarea-size-large .bcm-input-element{min-height:calc((40px - 8px) + 2px)}.textarea-size-large .input-clear-button{height:calc( 40px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-medium{padding:4px 0 0 4px;min-height:32px}.textarea-size-medium .bcm-input-element{min-height:calc((32px - 8px) + 2px)}.textarea-size-medium .input-clear-button{height:calc( 32px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-small{padding:0px 0 0 4px;min-height:24px}.textarea-size-small .bcm-input-element{min-height:calc((24px - 8px) + 2px)}.textarea-size-small .input-clear-button{height:calc( 24px - 16px );top:8px;padding:0;margin-right:8px}:root{--bcm-radio-text:var(--bcm-ui-color-text-default);--bcm-radio-border:var(--bcm-ui-color-border-default);--bcm-radio-border-hover:var(--bcm-ui-color-border-primary-info);--bcm-radio-bg:var(--bcm-ui-color-background-default-default);--bcm-radio-checked-border:var(--bcm-ui-color-background-primary-info-default);--bcm-radio-checked-dot:var(--bcm-ui-color-background-primary-info-default);--bcm-radio-checked-border-hover:var(--bcm-ui-color-background-primary-info-hover);--bcm-radio-checked-dot-hover:var(--bcm-ui-color-background-primary-info-hover)}";
+
 const BcmRadio = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
@@ -29566,30 +30479,53 @@ const BcmRadio = class {
   }
   render() {
     const { value, size, disabled, checked, _id, color } = this;
-    return (h$2(Host, { class: classnames("tw-cursor-pointer tw-font-sans tw-mb-1.5 tw-mt-1", {
-        "tw-cursor-pointer tw-text-slate-600": !disabled,
-        "tw-cursor-not-allowed tw-text-slate-400": disabled,
-        "tw-text-1": size === Bcm.Size.small,
-        "tw-text-2.5": size === Bcm.Size.medium,
-        "tw-text-4": size === Bcm.Size.large,
-      }), style: (Generate.getTwColor(color)) }, h$2("label", { class: classnames("tw-inline-flex tw-flex-row tw-gap-2 tw-mr-2 tw-items-center", disabled ? "tw-cursor-not-allowed" : "tw-cursor-pointer"), htmlFor: _id + '-input' }, h$2("input", { role: "radio", "aria-label": "radio", id: _id + '-input', type: "radio", value: value, checked: checked, disabled: disabled, class: classnames("tw-flex tw-items-center tw-justify-center", "tw-relative tw-appearance-none tw-border tw-border-solid tw-rounded-full tw-cursor-pointer tw-transition tw-ease-in-out ", "tw-m-0", "before:tw-content-[''] before:tw-absolute before:tw-rounded-full", {
-        "tw-w-4 tw-h-4 before:tw-w-2.5 before:tw-h-2.5": size === Bcm.Size.medium,
-        "tw-w-3.5 tw-h-3.5 before:tw-w-2 before:tw-h-2": size === Bcm.Size.small,
-        "tw-w-4.5 tw-h-4.5 before:tw-w-3 before:tw-h-3": size === Bcm.Size.large,
-      }, "focus:tw-outline-none focus:tw-shadow-outline", 
-      // default
-      `tw-border-slate-400 tw-bg-slate-50`, `checked:tw-border-default-500`, `checked:before:tw-bg-default-500`, 
-      // disabled
-      `disabled:tw-border-slate-400 disabled:tw-bg-slate-200 disabled:tw-cursor-not-allowed`, `disabled:checked:tw-border-slate-400`, `disabled:checked:before:tw-bg-slate-400`, !disabled && classnames(
-      // hover
-      `hover:tw-border-default-600`, `hover:checked:tw-border-default-600`, `hover:checked:before:tw-bg-default-600`, 
-      // focus-visible 
-      `focus-visible:tw-border-default-800 focus-visible:tw-shadow-sm`, `focus-visible:checked:tw-border-default-800`, `focus-visible:checked:before:tw-bg-default-800`, 
-      // active
-      `active:tw-border-default-700`, `active:checked:tw-border-default-700`, `active:checked:before:tw-bg-default-700`)), onChange: () => this.radioChange.emit(), onFocus: () => this.focus.emit(), onBlur: () => this.blur.emit() }), h$2("slot", null))));
+    const style = Object.assign({}, color && Generate.getTwColor({
+      color: color,
+      tones: {
+        700: ["border-hover", "checked-dot", "checked-border"],
+        800: ["checked-border-hover", "checked-dot-hover"],
+      },
+      variable: "--bcm-radio",
+    }));
+    const { host, label, input } = radioStyle({ size, disabled });
+    return (h$2(Host, { class: host(), style: style }, h$2("label", { class: label(), htmlFor: _id + '-input' }, h$2("input", { role: "radio", "aria-label": "radio", id: _id + '-input', type: "radio", value: value, checked: checked, disabled: disabled, class: input(), onChange: () => this.radioChange.emit(), onFocus: () => this.focus.emit(), onBlur: () => this.blur.emit() }), h$2("slot", null))));
   }
   get el() { return getElement(this); }
 };
+BcmRadio.style = radioCss;
+
+const radioGroupStyle = ce({
+  slots: {
+    host: [
+      "bcm-radio-group",
+      "bcm-ui-element bcm-ui-inputs",
+      "tw-mb-2 tw-flex tw-flex-col",
+    ],
+    radioGroupContainer: [
+      "bcm-radio-group__container",
+      "tw-flex tw-flex-wrap",
+    ],
+  },
+  variants: {
+    direction: {
+      vertical: {
+        radioGroupContainer: ["tw-flex-col"],
+      },
+      horizontal: {
+        radioGroupContainer: ["tw-flex-row tw-gap-2"],
+      },
+    },
+    fullWidth: {
+      true: {
+        host: ["tw-w-full"],
+      }
+    },
+  },
+  defaultVariants: {
+    direction: "horizontal",
+    fullWidth: false,
+  },
+});
 
 var __decorate$2 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -29710,7 +30646,11 @@ const BcmRadioGroup = class {
   render() {
     var _a, _b;
     const { direction, fullWidth, gap, label, size, required, disabled, caption, captionError, captionType, noCaption } = this;
-    return (h$2(Host, { class: "tw-mb-2 tw-flex tw-flex-col", role: "radiogroup", "aria-labelledby": "radiogroup" }, label && h$2("bcm-label", { type: captionType, value: label, required: required }), h$2("div", { class: classnames("tw-flex tw-flex-wrap", direction == Bcm.Direction.horizontal ? "tw-flex-row" : "tw-flex-col", fullWidth && "tw-w-full"), style: { "gap": gap } }, h$2("slot", null), ((_a = this.Items) === null || _a === void 0 ? void 0 : _a.length) > 0 &&
+    const { host, radioGroupContainer } = radioGroupStyle({
+      direction,
+      fullWidth
+    });
+    return (h$2(Host, { class: host(), role: "radiogroup", "aria-labelledby": "radiogroup" }, label && h$2("bcm-label", { type: captionType, value: label, required: required }), h$2("div", { class: radioGroupContainer(), style: { "gap": gap } }, h$2("slot", null), ((_a = this.Items) === null || _a === void 0 ? void 0 : _a.length) > 0 &&
       ((_b = this.Items) === null || _b === void 0 ? void 0 : _b.map(item => (h$2("bcm-radio", { id: item.id, value: item.value, disabled: disabled || item.disabled, checked: item.checked, color: item.color, size: size }, item.label))))), h$2(CaptionTemplate, { noCaption: noCaption, captionType: captionType, captionError: captionError, caption: caption })));
   }
   get el() { return getElement(this); }
@@ -41874,7 +42814,7 @@ exports.default = locale;
 
 const enUS = /*@__PURE__*/getDefaultExportFromCjs(en_US);
 
-const rcPickerCss = "@charset \"UTF-8\";@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");.size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}.input-size-large{height:40px}.input-size-medium{height:32px}.input-size-small{height:24px}.resize-none textarea{resize:none}.resize-vertical textarea{resize:vertical}.resize-auto textarea{height:auto;resize:none}.textarea-size-large{padding:4px 0 0 4px;min-height:40px}.textarea-size-large .bcm-input-element{min-height:calc((40px - 8px) + 2px)}.textarea-size-large .input-clear-button{height:calc( 40px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-medium{padding:4px 0 0 4px;min-height:32px}.textarea-size-medium .bcm-input-element{min-height:calc((32px - 8px) + 2px)}.textarea-size-medium .input-clear-button{height:calc( 32px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-small{padding:0px 0 0 4px;min-height:24px}.textarea-size-small .bcm-input-element{min-height:calc((24px - 8px) + 2px)}.textarea-size-small .input-clear-button{height:calc( 24px - 16px );top:8px;padding:0;margin-right:8px}.bcm-date{font-family:\"Inter\", sans-serif;font-size:14px;line-height:22px;font-weight:500;display:flex;align-items:stretch;flex-direction:row;background-color:#fff;border:1px solid #cbd5e1;color:#334155;border-radius:4px;box-sizing:border-box;cursor:text;padding:0 0 0 4px;position:relative;width:100%;}.bcm-date--large{height:40px;font-size:16px}.bcm-date--medium{height:32px;font-size:14px}.bcm-date--small{height:24px;font-size:12px}.bcm-date:hover{border:1px solid #4293cf}.bcm-date:hover.bcm-date--existed{}.bcm-date:hover.bcm-date--existed .bcm-date-clear{visibility:visible;opacity:1}.bcm-date:hover.bcm-date--existed .bcm-date-suffix{opacity:0}.bcm-date-focused{background-color:#f8fafc}.bcm-date-suffix{color:#334155}.bcm-date-suffix:not(:empty){display:flex;align-items:center;justify-content:center}.bcm-date-suffix::before{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-style:normal;font-variant:normal;text-rendering:auto;line-height:1;font-family:\"Font Awesome 6 Pro\";font-weight:400;line-height:1;box-sizing:border-box;padding:0 4px;cursor:pointer}.bcm-date--datetime .bcm-date-suffix::before{content:\"\\e0d2\"}.bcm-date--date .bcm-date-suffix::before{content:\"\\f133\"}.bcm-date--time .bcm-date-suffix::before{content:\"\\f017\"}.bcm-date-input{position:relative;display:inline-flex;width:100%;padding:0 4px;color:#334155}.bcm-date-input-placeholder{color:#94a3b8}.bcm-date-input>input{color:inherit;width:100%;flex:1;border:none;background:transparent;box-shadow:unset;line-height:22px;font-family:\"Inter\", sans-serif;cursor:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;overflow:hidden;text-overflow:ellipsis;font-weight:500}.bcm-date-input>input::placeholder{font-family:\"Inter\", sans-serif;color:#cbd5e1;user-select:none}.bcm-date-input>input::-webkit-search-decoration,.bcm-date-input>input::-webkit-search-cancel-button,.bcm-date-input>input::-webkit-search-results-button,.bcm-date-input>input::-webkit-search-results-decoration,.bcm-date-input>input::-webkit-calendar-picker-indicator,.bcm-date-input>input::-webkit-inner-spin-button,.bcm-date-input>input::-webkit-outer-spin-button{-webkit-appearance:none}.bcm-date-input>input::-moz-placeholder{opacity:1}.bcm-date-input>input:placeholder-shown{text-overflow:ellipsis}.bcm-date-clear{color:#334155;display:flex;flex-direction:column;align-items:center;justify-content:center;width:20px;font-size:20px;padding-bottom:3px;line-height:1;cursor:pointer;font-weight:400;visibility:hidden;position:absolute;right:4px;padding:4px;opacity:0;transition:opacity 0.2s}.bcm-date-clear-btn::after{content:\"×\"}.bcm-date-disabled{background-color:#f8fafc;color:#a0aec0;cursor:not-allowed}.bcm-date-disabled input{color:#a0aec0}.bcm-date-disabled:hover{border:1px solid #cbd5e1}.bcm-date-disabled .bcm-date-input{cursor:not-allowed}.bcm-date-disabled .bcm-date-suffix:before{cursor:not-allowed}.bcm-date-disabled .bcm-date-clear{cursor:not-allowed}.bcm-date--error{border:1px solid #e53e3e}.bcm-date--error:hover{border:1px solid #e53e3e}.bcm-date-range{padding:0 4px}.bcm-date-range .bcm-date-clear{flex:none}.bcm-date-range-separator{color:#94a3b8;padding:0 4px;display:flex;align-items:center;justify-content:center}.bcm-date-focused .bcm-date-active-bar{position:absolute;bottom:0;left:0;height:2px;background-color:#4293cf;transition:all 0.3s}.bcm-date-dropdown{position:absolute;z-index:10800;top:-9999;left:-9999;border-radius:4px}.bcm-date-dropdown-placement-bottomLeft,.bcm-date-dropdown-placement-bottomRight{top:0;display:block}.bcm-date-dropdown-placement-topLeft,.bcm-date-dropdown-placement-topRight{bottom:0;display:block}.bcm-date-dropdown-hidden{display:none}.bcm-date-dropdown .bcm-date-panel-container{font-family:\"Inter\", sans-serif;font-size:14px;line-height:22px;font-weight:400;box-shadow:0 4px 12px 0 rgba(17, 24, 39, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);background-color:#fff}.bcm-date-dropdown .bcm-date-panels{display:inline-flex}.bcm-date-dropdown .bcm-date-decade-panel,.bcm-date-dropdown .bcm-date-year-panel,.bcm-date-dropdown .bcm-date-month-panel,.bcm-date-dropdown .bcm-date-week-panel,.bcm-date-dropdown .bcm-date-date-panel{width:256px}.bcm-date-dropdown .bcm-date-time-panel{width:auto;padding-top:4px;min-width:auto}.bcm-date-dropdown .bcm-date-time-panel .bcm-date-content{width:100%;table-layout:fixed;border-collapse:collapse;text-align:center;display:flex;flex:auto;height:224px}.bcm-date-dropdown .bcm-date-time-panel-column{flex:1 0 auto;width:56px;margin:4px 0;padding:0;overflow-y:hidden;text-align:start;list-style:none;transition:background 0.2s;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:rgba(0, 0, 0, 0.45) transparent;position:relative}.bcm-date-dropdown .bcm-date-time-panel-column:not(:first-child){border-inline-start:1px solid rgba(5, 5, 5, 0.06)}.bcm-date-dropdown .bcm-date-time-panel-column-active{background:rgba(0, 0, 255, 0.1)}.bcm-date-dropdown .bcm-date-time-panel-column:hover{overflow-y:auto}.bcm-date-dropdown .bcm-date-time-panel-column>li{margin:0;padding:0}.bcm-date-dropdown .bcm-date-time-panel-column>li.disabled{opacity:0.5}.bcm-date-dropdown .bcm-date-time-panel-column>li.bcm-date-time-panel-cell{margin-inline:4px}.bcm-date-dropdown .bcm-date-time-panel-column>li.bcm-date-time-panel-cell .bcm-date-time-panel-cell-inner{display:block;width:48px;height:28px;margin:0;padding-block:0;padding-inline-end:0;padding-inline-start:14px;color:rgba(0, 0, 0, 0.88);line-height:28px;border-radius:4px;cursor:pointer;transition:background 0.2s}.bcm-date-dropdown .bcm-date-time-panel-column>li.bcm-date-time-panel-cell .bcm-date-time-panel-cell-inner:hover{background:rgba(0, 0, 0, 0.04)}.bcm-date-dropdown .bcm-date-time-panel-column>li.bcm-date-time-panel-cell-selected .bcm-date-time-panel-cell-inner{background:#e6f4ff}.bcm-date-dropdown .bcm-date-time-panel-column>li.bcm-date-time-panel-cell-disabled .bcm-date-time-panel-cell-inner{pointer-events:none;color:rgba(0, 0, 0, 0.25)}.bcm-date-dropdown .bcm-date-datetime-panel{display:flex;flex-direction:row;align-items:stretch}.bcm-date-dropdown .bcm-date-datetime-panel .bcm-date-time-panel{padding-top:8px}.bcm-date-dropdown .bcm-date-datetime-panel .bcm-date-time-panel .bcm-date-header{display:none}.bcm-date-dropdown .bcm-date-header{padding:0 8px;color:rgba(0, 0, 0, 0.88);border-bottom:1px solid rgba(5, 5, 5, 0.06);display:flex;flex-direction:row;align-items:center;justify-content:space-between;font-size:18px}.bcm-date-dropdown .bcm-date-header>*{flex:none}.bcm-date-dropdown .bcm-date-header>button{min-width:20px}.bcm-date-dropdown .bcm-date-header button{padding:0;color:rgba(0, 0, 0, 0.45);line-height:40px;background:transparent;border:0;cursor:pointer;transition:color 0.2s;font-size:inherit}.bcm-date-dropdown .bcm-date-header button:hover{color:#3b82f6}.bcm-date-dropdown .bcm-date-header-view{flex:auto;text-align:center;font-weight:600;line-height:40px;gap:8px;font-size:14px}.bcm-date-dropdown .bcm-date-header-view button{color:inherit;font-weight:inherit;vertical-align:top;padding:0 4px}.bcm-date-dropdown .bcm-date-body{padding:8px 18px}.bcm-date-dropdown .bcm-date-content{text-align:center;width:100%;table-layout:fixed;border-collapse:collapse}.bcm-date-dropdown .bcm-date-content thead tr th{color:#334155;font-weight:400;font-size:12px;line-height:16px;padding:8px 0;text-align:center;text-transform:uppercase}.bcm-date-dropdown .bcm-date-cell{position:relative}.bcm-date-dropdown .bcm-date-cell::before{position:absolute;top:50%;inset-inline-start:0;inset-inline-end:0;z-index:1;height:24px;transform:translateY(-50%);transition:all 0.3s;content:\"\"}.bcm-date-dropdown .bcm-date-cell-inner{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;border-radius:4px;border:1px solid transparent;transition:background 0.2s, border 0.2s;cursor:pointer;color:#94a3b8}.bcm-date-dropdown .bcm-date-cell-inner:hover{background:#e2e8f0;color:#64748b}.bcm-date-dropdown .bcm-date-cell-in-view .bcm-date-cell-inner{color:#334155}.bcm-date-dropdown .bcm-date-cell-today .bcm-date-cell-inner{border:1px solid #3b82f6;color:#3b82f6}.bcm-date-dropdown .bcm-date-cell-today .bcm-date-cell-inner:hover{background:#e2e8f0;color:#64748b}.bcm-date-dropdown .bcm-date-cell-selected .bcm-date-cell-inner{color:#fff;background:#3b82f6}.bcm-date-dropdown .bcm-date-cell-selected .bcm-date-cell-inner:hover{background:#2563eb;color:#fff}.bcm-date-dropdown .bcm-date-cell-in-range .bcm-date-cell-inner{background:#bfdbfe}.bcm-date-dropdown .bcm-date-cell-in-range::before{background:#bfdbfe}.bcm-date-dropdown .bcm-date-cell-range-hover .bcm-date-cell-inner{background:#93c5fd;color:#334155}.bcm-date-dropdown .bcm-date-cell-range-hover::before{background:#93c5fd}.bcm-date-dropdown .bcm-date-cell-range-start .bcm-date-cell-inner{background-color:#3b82f6;color:#fff;border-radius:4px 0 0 4px}.bcm-date-dropdown .bcm-date-cell-range-start .bcm-date-cell-inner:hover{background:#3b82f6;color:#fff;border-radius:4px 0 0 4px}.bcm-date-dropdown .bcm-date-cell-range-start::before{background:#bfdbfe;inset-inline-start:50%}.bcm-date-dropdown .bcm-date-cell-range-end .bcm-date-cell-inner{background-color:#3b82f6;color:#fff;border-radius:0 4px 4px 0}.bcm-date-dropdown .bcm-date-cell-range-end .bcm-date-cell-inner:hover{background:#3b82f6;color:#fff;border-radius:4px 0 0 4px}.bcm-date-dropdown .bcm-date-cell-range-end::before{background:#bfdbfe;inset-inline-end:50%}.bcm-date-dropdown .bcm-date-cell-range-hover-start .bcm-date-cell-inner{background-color:#93c5fd;color:#334155}.bcm-date-dropdown .bcm-date-cell-range-hover-start .bcm-date-cell-inner:hover{background:#93c5fd;color:#334155;border-radius:4px 0 0 4px}.bcm-date-dropdown .bcm-date-cell-range-hover-end .bcm-date-cell-inner:hover{background:#93c5fd;color:#334155;border-radius:0 4px 4px 0}.bcm-date-dropdown .bcm-date-cell-disabled .bcm-date-cell-inner{pointer-events:none;color:rgba(0, 0, 0, 0.25)}.bcm-date-dropdown .bcm-date-cell-disabled::before{background:rgba(0, 0, 0, 0.04)}.bcm-date-dropdown .bcm-date-footer{border-top:1px solid rgba(5, 5, 5, 0.06);width:min-content;min-width:100%;line-height:38px;text-align:center}.bcm-date-dropdown .bcm-date-footer .bcm-date-today-btn{color:#3b82f6;cursor:pointer;padding:0 8px}.bcm-date-dropdown .bcm-date-footer .bcm-date-today-btn:hover{color:#2563eb}.bcm-date-dropdown .bcm-date-ranges{margin:0;margin-bottom:0;padding:4px 12px;overflow:hidden;line-height:34px;text-align:start;list-style:none;display:flex;justify-content:space-between}.bcm-date-dropdown .bcm-date-ranges>li{display:inline-block}.bcm-date-dropdown .bcm-date-ranges .bcm-date-ok{margin-inline-start:auto}.bcm-date-dropdown .bcm-date-ranges .bcm-date-ok>button{font-size:14px;color:#fff;background-color:#3b82f6;box-shadow:0 2px 0 rgba(5, 145, 255, 0.1);height:24px;padding:0 7px;border-radius:4px;outline:none;border:none;cursor:pointer;transition:background-color 0.3s}.bcm-date-dropdown .bcm-date-ranges .bcm-date-ok>button:hover{background-color:#2563eb}.bcm-date-dropdown .bcm-date-now{text-align:right}.bcm-date-dropdown .bcm-date-now-btn{color:#3b82f6;text-decoration:none;background-color:transparent;outline:none;cursor:pointer;transition:color 0.3s;-webkit-text-decoration-skip:objects}.bcm-date-dropdown .bcm-date-now-btn:hover{color:#2563eb}.bcm-date-dropdown .bcm-date-range-wrapper{display:flex;position:relative}";
+const rcPickerCss = "@charset \"UTF-8\";@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");.size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}.input-size-large{height:40px}.input-size-medium{height:32px}.input-size-small{height:24px}.resize-none textarea{resize:none}.resize-vertical textarea{resize:vertical}.resize-auto textarea{height:auto;resize:none}.textarea-size-large{padding:4px 0 0 4px;min-height:40px}.textarea-size-large .bcm-input-element{min-height:calc((40px - 8px) + 2px)}.textarea-size-large .input-clear-button{height:calc( 40px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-medium{padding:4px 0 0 4px;min-height:32px}.textarea-size-medium .bcm-input-element{min-height:calc((32px - 8px) + 2px)}.textarea-size-medium .input-clear-button{height:calc( 32px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-small{padding:0px 0 0 4px;min-height:24px}.textarea-size-small .bcm-input-element{min-height:calc((24px - 8px) + 2px)}.textarea-size-small .input-clear-button{height:calc( 24px - 16px );top:8px;padding:0;margin-right:8px}.bcm-date{font-family:\"Inter\", sans-serif;font-weight:500;display:flex;align-items:stretch;flex-direction:row;background-color:var(--bcm-ui-color-background-base-default);border:1px solid var(--bcm-ui-color-border-default);border-radius:var(--bcm-ui-radius);box-sizing:border-box;cursor:text;padding:0 0 0 var(--bcm-ui-spacing-2);position:relative;width:100%;}.bcm-date--small{height:24px;font-size:var(--bcm-ui-font-size-4);line-height:var(--bcm-ui-line-height-4)}.bcm-date--medium{height:32px;font-size:var(--bcm-ui-font-size-5);line-height:var(--bcm-ui-line-height-5)}.bcm-date--large{height:40px;font-size:var(--bcm-ui-font-size-6);line-height:var(--bcm-ui-line-height-6)}.bcm-date:hover{border-color:var(--bcm-ui-color-border-primary-info)}.bcm-date:hover.bcm-date--existed{}.bcm-date:hover.bcm-date--existed .bcm-date-clear{visibility:visible;opacity:1}.bcm-date:hover.bcm-date--existed .bcm-date-suffix{opacity:0}.bcm-date-focused{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)}.bcm-date-suffix{color:var(--bcm-ui-color-text-placeholder)}.bcm-date-suffix:not(:empty){display:flex;align-items:center;justify-content:center}.bcm-date-suffix::before{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-style:normal;font-variant:normal;text-rendering:auto;line-height:1;font-family:\"Font Awesome 6 Pro\";font-weight:400;line-height:1;box-sizing:border-box;padding:0 4px;cursor:pointer}.bcm-date--datetime .bcm-date-suffix::before{content:\"\\e0d2\"}.bcm-date--date .bcm-date-suffix::before{content:\"\\f133\"}.bcm-date--time .bcm-date-suffix::before{content:\"\\f017\"}.bcm-date-input{position:relative;display:inline-flex;width:100%;padding:0 4px;color:#334155}.bcm-date-input-placeholder{color:var(--bcm-ui-color-text-placeholder)}.bcm-date-input>input{color:inherit;width:100%;flex:1;border:none;background:transparent;box-shadow:unset;line-height:inherit;font-size:inherit;font-family:\"Inter\", sans-serif;cursor:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;overflow:hidden;text-overflow:ellipsis;font-weight:500}.bcm-date-input>input::placeholder{font-family:\"Inter\", sans-serif;font-weight:400;color:var(--bcm-ui-color-text-placeholder);user-select:none}.bcm-date-input>input::-webkit-search-decoration,.bcm-date-input>input::-webkit-search-cancel-button,.bcm-date-input>input::-webkit-search-results-button,.bcm-date-input>input::-webkit-search-results-decoration,.bcm-date-input>input::-webkit-calendar-picker-indicator,.bcm-date-input>input::-webkit-inner-spin-button,.bcm-date-input>input::-webkit-outer-spin-button{-webkit-appearance:none}.bcm-date-input>input::-moz-placeholder{opacity:1}.bcm-date-input>input:placeholder-shown{text-overflow:ellipsis}.bcm-date-clear{color:var(--bcm-ui-color-text-placeholder);display:flex;flex-direction:column;align-items:center;justify-content:center;width:20px;font-size:20px;padding-bottom:3px;line-height:1;cursor:pointer;font-weight:400;visibility:hidden;position:absolute;right:4px;padding:4px;opacity:0;transition:opacity 0.2s}.bcm-date-clear-btn::after{content:\"×\"}.bcm-date-disabled{background-color:var(--bcm-ui-color-background-disabled-disable);color:var(--bcm-ui-color-text-disabled);cursor:not-allowed}.bcm-date-disabled input{color:var(--bcm-ui-color-text-disabled)}.bcm-date-disabled:hover{border:1px solid #cbd5e1}.bcm-date-disabled .bcm-date-input{cursor:not-allowed}.bcm-date-disabled .bcm-date-suffix:before{cursor:not-allowed}.bcm-date-disabled .bcm-date-clear{cursor:not-allowed}.bcm-date--error{border:1px solid var(--bcm-ui-color-border-error)}.bcm-date--error:hover{border:1px solid var(--bcm-ui-color-border-error)}.bcm-date-range{padding:0 4px}.bcm-date-range .bcm-date-clear{flex:none}.bcm-date-range-separator{color:var(--bcm-ui-color-text-placeholder);padding:0 4px;display:flex;align-items:center;justify-content:center}.bcm-date-focused .bcm-date-active-bar{position:absolute;bottom:0;left:0;height:2px;background-color:#4293cf;transition:all 0.3s}.bcm-date-dropdown{position:absolute;z-index:10800;top:-9999;left:-9999;border-radius:4px}.bcm-date-dropdown-placement-bottomLeft,.bcm-date-dropdown-placement-bottomRight{top:0;display:block}.bcm-date-dropdown-placement-topLeft,.bcm-date-dropdown-placement-topRight{bottom:0;display:block}.bcm-date-dropdown-hidden{display:none}.bcm-date-dropdown .bcm-date-panel-container{font-family:\"Inter\", sans-serif;font-size:14px;line-height:22px;font-weight:400;box-shadow:0 4px 12px 0 rgba(17, 24, 39, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);background-color:#fff}.bcm-date-dropdown .bcm-date-panels{display:inline-flex}.bcm-date-dropdown .bcm-date-decade-panel,.bcm-date-dropdown .bcm-date-year-panel,.bcm-date-dropdown .bcm-date-month-panel,.bcm-date-dropdown .bcm-date-week-panel,.bcm-date-dropdown .bcm-date-date-panel{width:256px}.bcm-date-dropdown .bcm-date-time-panel{width:auto;padding-top:4px;min-width:auto}.bcm-date-dropdown .bcm-date-time-panel .bcm-date-content{width:100%;table-layout:fixed;border-collapse:collapse;text-align:center;display:flex;flex:auto;height:224px}.bcm-date-dropdown .bcm-date-time-panel-column{flex:1 0 auto;width:56px;margin:4px 0;padding:0;overflow-y:hidden;text-align:start;list-style:none;transition:background 0.2s;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:rgba(0, 0, 0, 0.45) transparent;position:relative}.bcm-date-dropdown .bcm-date-time-panel-column:not(:first-child){border-inline-start:1px solid rgba(5, 5, 5, 0.06)}.bcm-date-dropdown .bcm-date-time-panel-column-active{background:rgba(0, 0, 255, 0.1)}.bcm-date-dropdown .bcm-date-time-panel-column:hover{overflow-y:auto}.bcm-date-dropdown .bcm-date-time-panel-column>li{margin:0;padding:0}.bcm-date-dropdown .bcm-date-time-panel-column>li.disabled{opacity:0.5}.bcm-date-dropdown .bcm-date-time-panel-column>li.bcm-date-time-panel-cell{margin-inline:4px}.bcm-date-dropdown .bcm-date-time-panel-column>li.bcm-date-time-panel-cell .bcm-date-time-panel-cell-inner{display:block;width:48px;height:28px;margin:0;padding-block:0;padding-inline-end:0;padding-inline-start:14px;color:rgba(0, 0, 0, 0.88);line-height:28px;border-radius:4px;cursor:pointer;transition:background 0.2s}.bcm-date-dropdown .bcm-date-time-panel-column>li.bcm-date-time-panel-cell .bcm-date-time-panel-cell-inner:hover{background:rgba(0, 0, 0, 0.04)}.bcm-date-dropdown .bcm-date-time-panel-column>li.bcm-date-time-panel-cell-selected .bcm-date-time-panel-cell-inner{background:#e6f4ff}.bcm-date-dropdown .bcm-date-time-panel-column>li.bcm-date-time-panel-cell-disabled .bcm-date-time-panel-cell-inner{pointer-events:none;color:rgba(0, 0, 0, 0.25)}.bcm-date-dropdown .bcm-date-datetime-panel{display:flex;flex-direction:row;align-items:stretch}.bcm-date-dropdown .bcm-date-datetime-panel .bcm-date-time-panel{padding-top:8px}.bcm-date-dropdown .bcm-date-datetime-panel .bcm-date-time-panel .bcm-date-header{display:none}.bcm-date-dropdown .bcm-date-header{padding:0 8px;color:rgba(0, 0, 0, 0.88);border-bottom:1px solid rgba(5, 5, 5, 0.06);display:flex;flex-direction:row;align-items:center;justify-content:space-between;font-size:18px}.bcm-date-dropdown .bcm-date-header>*{flex:none}.bcm-date-dropdown .bcm-date-header>button{min-width:20px}.bcm-date-dropdown .bcm-date-header button{padding:0;color:rgba(0, 0, 0, 0.45);line-height:40px;background:transparent;border:0;cursor:pointer;transition:color 0.2s;font-size:inherit}.bcm-date-dropdown .bcm-date-header button:hover{color:#3b82f6}.bcm-date-dropdown .bcm-date-header-view{flex:auto;text-align:center;font-weight:600;line-height:40px;gap:8px;font-size:14px}.bcm-date-dropdown .bcm-date-header-view button{color:inherit;font-weight:inherit;vertical-align:top;padding:0 4px}.bcm-date-dropdown .bcm-date-body{padding:8px 18px}.bcm-date-dropdown .bcm-date-content{text-align:center;width:100%;table-layout:fixed;border-collapse:collapse}.bcm-date-dropdown .bcm-date-content thead tr th{color:#334155;font-weight:400;font-size:12px;line-height:16px;padding:8px 0;text-align:center;text-transform:uppercase}.bcm-date-dropdown .bcm-date-cell{position:relative}.bcm-date-dropdown .bcm-date-cell::before{position:absolute;top:50%;inset-inline-start:0;inset-inline-end:0;z-index:1;height:24px;transform:translateY(-50%);transition:all 0.3s;content:\"\"}.bcm-date-dropdown .bcm-date-cell-inner{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;border-radius:4px;border:1px solid transparent;transition:background 0.2s, border 0.2s;cursor:pointer;color:#94a3b8}.bcm-date-dropdown .bcm-date-cell-inner:hover{background:#e2e8f0;color:#64748b}.bcm-date-dropdown .bcm-date-cell-in-view .bcm-date-cell-inner{color:#334155}.bcm-date-dropdown .bcm-date-cell-today .bcm-date-cell-inner{border:1px solid #3b82f6;color:#3b82f6}.bcm-date-dropdown .bcm-date-cell-today .bcm-date-cell-inner:hover{background:#e2e8f0;color:#64748b}.bcm-date-dropdown .bcm-date-cell-selected .bcm-date-cell-inner{color:#fff;background:#3b82f6}.bcm-date-dropdown .bcm-date-cell-selected .bcm-date-cell-inner:hover{background:#2563eb;color:#fff}.bcm-date-dropdown .bcm-date-cell-in-range .bcm-date-cell-inner{background:#bfdbfe}.bcm-date-dropdown .bcm-date-cell-in-range::before{background:#bfdbfe}.bcm-date-dropdown .bcm-date-cell-range-hover .bcm-date-cell-inner{background:#93c5fd;color:#334155}.bcm-date-dropdown .bcm-date-cell-range-hover::before{background:#93c5fd}.bcm-date-dropdown .bcm-date-cell-range-start .bcm-date-cell-inner{background-color:#3b82f6;color:#fff;border-radius:4px 0 0 4px}.bcm-date-dropdown .bcm-date-cell-range-start .bcm-date-cell-inner:hover{background:#3b82f6;color:#fff;border-radius:4px 0 0 4px}.bcm-date-dropdown .bcm-date-cell-range-start::before{background:#bfdbfe;inset-inline-start:50%}.bcm-date-dropdown .bcm-date-cell-range-end .bcm-date-cell-inner{background-color:#3b82f6;color:#fff;border-radius:0 4px 4px 0}.bcm-date-dropdown .bcm-date-cell-range-end .bcm-date-cell-inner:hover{background:#3b82f6;color:#fff;border-radius:4px 0 0 4px}.bcm-date-dropdown .bcm-date-cell-range-end::before{background:#bfdbfe;inset-inline-end:50%}.bcm-date-dropdown .bcm-date-cell-range-hover-start .bcm-date-cell-inner{background-color:#93c5fd;color:#334155}.bcm-date-dropdown .bcm-date-cell-range-hover-start .bcm-date-cell-inner:hover{background:#93c5fd;color:#334155;border-radius:4px 0 0 4px}.bcm-date-dropdown .bcm-date-cell-range-hover-end .bcm-date-cell-inner:hover{background:#93c5fd;color:#334155;border-radius:0 4px 4px 0}.bcm-date-dropdown .bcm-date-cell-disabled .bcm-date-cell-inner{pointer-events:none;color:rgba(0, 0, 0, 0.25)}.bcm-date-dropdown .bcm-date-cell-disabled::before{background:rgba(0, 0, 0, 0.04)}.bcm-date-dropdown .bcm-date-footer{border-top:1px solid rgba(5, 5, 5, 0.06);width:min-content;min-width:100%;line-height:38px;text-align:center}.bcm-date-dropdown .bcm-date-footer .bcm-date-today-btn{color:#3b82f6;cursor:pointer;padding:0 8px}.bcm-date-dropdown .bcm-date-footer .bcm-date-today-btn:hover{color:#2563eb}.bcm-date-dropdown .bcm-date-ranges{margin:0;margin-bottom:0;padding:4px 12px;overflow:hidden;line-height:34px;text-align:start;list-style:none;display:flex;justify-content:space-between}.bcm-date-dropdown .bcm-date-ranges>li{display:inline-block}.bcm-date-dropdown .bcm-date-ranges .bcm-date-ok{margin-inline-start:auto}.bcm-date-dropdown .bcm-date-ranges .bcm-date-ok>button{font-size:14px;color:#fff;background-color:#3b82f6;box-shadow:0 2px 0 rgba(5, 145, 255, 0.1);height:24px;padding:0 7px;border-radius:4px;outline:none;border:none;cursor:pointer;transition:background-color 0.3s}.bcm-date-dropdown .bcm-date-ranges .bcm-date-ok>button:hover{background-color:#2563eb}.bcm-date-dropdown .bcm-date-now{text-align:right}.bcm-date-dropdown .bcm-date-now-btn{color:#3b82f6;text-decoration:none;background-color:transparent;outline:none;cursor:pointer;transition:color 0.3s;-webkit-text-decoration-skip:objects}.bcm-date-dropdown .bcm-date-now-btn:hover{color:#2563eb}.bcm-date-dropdown .bcm-date-range-wrapper{display:flex;position:relative}";
 
 const BcmRcPicker = class {
   constructor(hostRef) {
@@ -42109,8 +43049,6 @@ const searchState = {
   searchData,
 };
 
-const searchCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap\"); .size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}.input-size-large{height:40px}.input-size-medium{height:32px}.input-size-small{height:24px}.resize-none textarea{resize:none}.resize-vertical textarea{resize:vertical}.resize-auto textarea{height:auto;resize:none}.textarea-size-large{padding:4px 0 0 4px;min-height:40px}.textarea-size-large .bcm-input-element{min-height:calc((40px - 8px) + 2px)}.textarea-size-large .input-clear-button{height:calc( 40px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-medium{padding:4px 0 0 4px;min-height:32px}.textarea-size-medium .bcm-input-element{min-height:calc((32px - 8px) + 2px)}.textarea-size-medium .input-clear-button{height:calc( 32px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-small{padding:0px 0 0 4px;min-height:24px}.textarea-size-small .bcm-input-element{min-height:calc((24px - 8px) + 2px)}.textarea-size-small .input-clear-button{height:calc( 24px - 16px );top:8px;padding:0;margin-right:8px}.bcm-input[no-margin]{margin:0}.bcm-textarea[no-margin]{margin:0}.bcm-switch[no-margin]{margin:0}.bcm-checkbox[no-margin]{margin:0}.bcm-radio-group[no-margin]{margin:0}.bcm-checkbox-group[no-margin]{margin:0}.bcm-range[no-margin]{margin:0}.bcm-form[no-margin]{margin:0}.bcm-form-group[no-margin]{margin:0}.bcm-list[no-margin]{margin:0}.bcm-colorpicker[no-margin]{margin:0}.bcm-date-picker[no-margin]{margin:0}.bcm-time-picker[no-margin]{margin:0}.bcm-datetime-picker[no-margin]{margin:0}.bcm-select[no-margin]{margin:0}.bcm-listbox[no-margin]{margin:0}*{box-sizing:border-box}.bcm-input{display:inline-flex;flex-direction:column;width:100%;max-width:256px;margin-bottom:8px}.bcm-input.full-width{max-width:100%}.bcm-input.hidden{display:none}.bcm-input__container{font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;display:flex;align-items:stretch;flex-direction:row;background-color:var(--bcm-new-ds-color-white);border:1px solid var(--bcm-new-ds-color-slate-300);border-radius:4px;box-sizing:border-box;cursor:text;padding:0 0 0 4px;position:relative;width:100%}.bcm-input__container.disabled{background-color:var(--bcm-new-ds-color-slate-50);cursor:not-allowed}.bcm-input__container.disabled .bcm-input-element{color:var(--bcm-new-ds-color-slate-500)}.bcm-input__container.readonly{background-color:var(--bcm-new-ds-color-slate-50);cursor:default}.bcm-input__container.readonly .bcm-input-element{color:var(--bcm-new-ds-color-slate-600)}.bcm-input__container:not(.disabled):hover .caret-container,.bcm-input__container:not(.disabled).focused .caret-container{opacity:1}.bcm-input__container:not(.disabled):hover .input-clear-button,.bcm-input__container:not(.disabled).focused .input-clear-button{opacity:1}.bcm-input__container:not(.disabled).focused{background-color:var(--bcm-new-ds-color-slate-50)}.bcm-input__container:not(.disabled):hover{border-color:var(--bcm-color-prime-blue-6)}.bcm-input__container.empty .input-clear-button{display:none}.bcm-input__container.invalid,.bcm-input__container.error{border-color:var(--bcm-new-ds-color-red-500)}.bcm-input__container .bcm-input-element{width:100%;color:var(--bcm-new-ds-color-slate-600);flex:1;border:none;background:transparent;box-shadow:unset;padding:0 4px;font-family:\"Inter\", sans-serif;cursor:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;text-overflow:ellipsis}.bcm-input__container .bcm-input-element::placeholder{font-family:\"Inter\", sans-serif;color:var(--bcm-new-ds-color-slate-300);user-select:none}.bcm-input__container .bcm-input-element::-webkit-search-decoration,.bcm-input__container .bcm-input-element::-webkit-search-cancel-button,.bcm-input__container .bcm-input-element::-webkit-search-results-button,.bcm-input__container .bcm-input-element::-webkit-search-results-decoration,.bcm-input__container .bcm-input-element::-webkit-calendar-picker-indicator,.bcm-input__container .bcm-input-element::-webkit-inner-spin-button,.bcm-input__container .bcm-input-element::-webkit-outer-spin-button{-webkit-appearance:none}.bcm-input__container .caret-container{width:30px;display:flex;flex-direction:column;justify-content:center;align-items:stretch;border-left:1px solid #D9D9D9;transition:0.2s opacity;user-select:none;box-sizing:border-box}.bcm-input__container .caret-container .bcm-input-caret{display:flex;align-items:center;justify-content:center;color:var(--bcm-color-grey-7);cursor:pointer;flex:1}.bcm-input__container .caret-container .bcm-input-caret bcm-icon{line-height:1}.bcm-input__container .caret-container .bcm-input-caret:hover{color:var(--bcm-color-prime-blue-6)}.bcm-input__container .caret-container .bcm-input-caret:active{background-color:var(--bcm-color-grey-3)}.bcm-input__container .caret-container .bcm-input-caret:last-child{border-top:1px solid #D9D9D9}.bcm-input__container .caret-container.disabled{background-color:var(--bcm-color-grey-3)}.bcm-input__container .caret-container.disabled .bcm-input-caret{cursor:not-allowed}.bcm-input__container .input-suffix-content{display:flex;align-items:center;justify-content:center}.bcm-input__container .input-prefix:not(:empty){padding-left:4px}.bcm-input__container .input-suffix:not(:empty){min-width:24px;padding-right:4px}.bcm-input__container .input-prefix:not(:empty),.bcm-input__container .input-suffix:not(:empty){display:flex;align-items:center;justify-content:center;cursor:default;color:#64748a}.bcm-input__container .input-prefix:not(:empty) .unit-prefix,.bcm-input__container .input-suffix:not(:empty) .unit-prefix{color:#64748a}.bcm-input__container .input-prefix-button:not(:empty),.bcm-input__container .input-suffix-button:not(:empty){cursor:pointer}.bcm-input__container .caret-container,.bcm-input__container .input-clear-button{opacity:0}.bcm-input__container--small{font-size:12px}.bcm-input__container--medium{font-size:14px}.bcm-input__container--large{font-size:16px}.bcm-input__textarea.clearable .bcm-input-element{padding-right:24px}.bcm-input__textarea .input-clear-button{position:absolute;top:4px;right:0}";
-
 const BcmSearch = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
@@ -42188,15 +43126,21 @@ const BcmSearch = class {
     bcmOnSearch.emit({ result: searchResult === null || searchResult === void 0 ? void 0 : searchResult.result, value: inputElement === null || inputElement === void 0 ? void 0 : inputElement.value, matching: searchResult === null || searchResult === void 0 ? void 0 : searchResult.matching, parentIndex: searchResult === null || searchResult === void 0 ? void 0 : searchResult.parentIndex, nestedResult: searchResult === null || searchResult === void 0 ? void 0 : searchResult.nestedResult });
   }
   render() {
-    const { _id, placeholder, disabled, readonly } = this;
-    return h$2(Host, { onClick: () => { this.onBcmFocus(); this.onBcmSelect(); } }, h$2(InputTemplate, { size: this.size, id: _id, type: "search", placeholder: placeholder, disabled: disabled, "full-width": true, readonly: readonly, clearable: this.isActiveClearable, handleFocus: () => this.handleFocus(), handleBlur: () => this.handleBlur(), handleChange: () => this.handleChange(), handleClear: () => this.handleClear(), handleInput: this.debounceHandler, ref: (el) => this.inputElement = el }));
+    const { _id, placeholder, disabled, readonly, size } = this;
+    const { host, inputContainer, input, slotClass, clearButton } = inputStyle({
+      size,
+      fullWidth: true,
+      clearable: this.isActiveClearable,
+      disabled,
+      readonly,
+    });
+    return h$2(Host, { class: host(), onClick: () => { this.onBcmFocus(); this.onBcmSelect(); } }, h$2("div", { class: inputContainer(), id: _id + "-container" }, h$2("input", { class: input(), id: _id + "-input", type: "search", placeholder: placeholder, disabled: disabled, readonly: readonly, onInput: this.debounceHandler, onChange: _event => this.handleChange(), onFocus: _event => this.handleFocus(), onBlur: _event => this.handleBlur(), autocomplete: "off", ref: el => (this.inputElement = el) }), h$2("div", { class: slotClass() }, this.isActiveClearable && (h$2("button", { type: "button", class: clearButton(), onClick: () => this.handleClear() }, h$2("i", { class: "far fa-times" }))))));
   }
   get el() { return getElement(this); }
   static get watchers() { return {
     "data": ["dataChanged"]
   }; }
 };
-BcmSearch.style = searchCss;
 
 const selectCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");.size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}.input-size-large{height:40px}.input-size-medium{height:32px}.input-size-small{height:24px}.resize-none textarea{resize:none}.resize-vertical textarea{resize:vertical}.resize-auto textarea{height:auto;resize:none}.textarea-size-large{padding:4px 0 0 4px;min-height:40px}.textarea-size-large .bcm-input-element{min-height:calc((40px - 8px) + 2px)}.textarea-size-large .input-clear-button{height:calc( 40px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-medium{padding:4px 0 0 4px;min-height:32px}.textarea-size-medium .bcm-input-element{min-height:calc((32px - 8px) + 2px)}.textarea-size-medium .input-clear-button{height:calc( 32px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-small{padding:0px 0 0 4px;min-height:24px}.textarea-size-small .bcm-input-element{min-height:calc((24px - 8px) + 2px)}.textarea-size-small .input-clear-button{height:calc( 24px - 16px );top:8px;padding:0;margin-right:8px}:host{display:inline-block;width:100%;margin:0}:host(.hidden){display:none}.container{display:block;max-width:256px;position:relative}.container.full-width{width:100%;max-width:100%}.selected{width:100%;box-sizing:border-box;color:var(--bcm-color-grey-8);background-color:var(--bcm-color-grey-1);display:flex;justify-content:space-between;align-items:center;border:1px solid var(--bcm-color-grey-5);user-select:none;cursor:pointer}.selected:hover:not(.disabled){border-color:var(--bcm-color-prime-blue-5)}.selected:hover:not(.disabled) .select-clear-button{opacity:1}.selected:focus:not(.disabled){border-color:var(--bcm-color-prime-blue-5);box-shadow:0px 0px 4px var(--bcm-color-prime-blue-6)}.selected:focus:not(.disabled) .select-clear-button{opacity:1}.selected:focus{outline:none}.selected.disabled{background-color:var(--bcm-color-grey-3);color:var(--bcm-color-grey-8);cursor:not-allowed}.selected .buttons{padding:8px;height:100%;display:flex;align-items:center;justify-content:center}.selected .selected-text{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;padding:0 8px;width:100%}.selected .selected-tags{padding:0 4px;height:100%}.selected .tag-container{height:100%;display:flex;align-items:center;justify-content:flex-start;grid-gap:2px}.selected .tag-container>span{height:100%;align-items:center;justify-content:flex-start;display:flex;grid-gap:2px}.selected .tag-container .tag{max-width:200px}.selected .tag-container #other-tag{cursor:pointer}.selected .open,.selected .close{display:inline-flex}.selected .close{transform:rotate(180deg)}.selected .placeholder{color:#6B7280;user-select:none;font-size:14px;height:100%;display:flex;align-items:center;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}.options-viewport{display:inline-block}.option-container{display:block;position:absolute;background-color:var(--bcm-color-grey-1);box-shadow:0px 2px 8px rgba(0, 0, 0, 0.15);box-sizing:border-box;width:100%;z-index:10000}.option-container.alignment-left{left:0}.option-container.alignment-right{right:0}.option-container.hidden{display:none}.option-container .search{position:sticky;padding:8px;margin-bottom:4px}.option-container .search:after{content:\"\";position:absolute;bottom:0;height:1px;width:calc(100% - 16px);background-color:var(--bcm-color-grey-5)}.options-viewport{display:block}.options-viewport bcm-select-option,.options-viewport ::slotted(bcm-select-option){white-space:normal}.options-viewport.hidden{display:none}.options-viewport.vertical{height:fit-content;max-height:200px}.options-viewport.horizontal:not(.flex){overflow-x:auto;width:100%}.options-viewport.horizontal:not(.flex) bcm-select-option,.options-viewport.horizontal:not(.flex) ::slotted(bcm-select-option){white-space:nowrap}.items{display:flex;flex-direction:column}.buttons{display:flex}.select-clear-button{display:inline-flex;align-items:center;outline:none;border:none;background:none;padding:0;cursor:pointer;margin-right:4px;opacity:0}.label{display:block;color:var(--bcm-color-grey-9)}.caption-area{min-height:20px}.input-caption{display:block}.selected-large{height:40px}.selected-medium{height:32px}.selected-small{height:24px}.caption-default{color:#8C8C8C}.caption-primary{color:#4293CF}.caption-success{color:#52C41A}.caption-warning{color:#FA8C16}.caption-error{color:#F5222D}.error .label{color:var(--bcm-color-red-6) !important}.error .selected{border:1px solid var(--bcm-color-red-6) !important}";
 
@@ -43407,6 +44351,40 @@ const BcmSelectBox = class {
 };
 BcmSelectBox.style = selectBoxCss;
 
+const shortcutStyle = ce({
+  slots: {
+    host: [
+      "bcm-shortcut",
+      "bcm-ui-element bcm-ui-content-display",
+      "tw-block tw-h-fit tw-w-fit tw-rounded-md tw-border tw-border-solid tw-px-1",
+      "tw-border-[--bcm-shortcut-border] tw-bg-[--bcm-shortcut-bg] tw-text-[--bcm-shortcut-text]",
+      "tw-text-center tw-font-medium tw-capitalize",
+    ],
+  },
+  variants: {
+    size: {
+      small: {
+        host: [
+          "tw-text-size-3",
+        ],
+      },
+      medium: {
+        host: [
+          "tw-text-size-4",
+        ],
+      },
+      large: {
+        host: [
+          "tw-text-size-5",
+        ],
+      },
+    },
+  },
+  defaultVariants: {
+    size: "medium",
+  },
+});
+
 const osKeys = {
   ctrl: "⌘",
   alt: "⌥",
@@ -43439,11 +44417,17 @@ const BcmShortcut = class {
   }
   render() {
     const { size, color, hotkey } = this;
-    return (h$2(Host, { class: classnames("bcm-ui-element bcm-ui-content-display", "tw-block tw-h-fit tw-w-fit tw-rounded tw-border tw-border-solid tw-px-1", "tw-border-default-300 tw-bg-default-100 tw-text-default-700", "tw-text-center tw-font-medium tw-capitalize", {
-        "tw-text-2": size === Bcm.Size.small,
-        "tw-text-3": size === Bcm.Size.medium,
-        "tw-text-4": size === Bcm.Size.large,
-      }), style: Object.assign({}, Generate.getTwColor({ color })) }, this.getHotkey(hotkey)));
+    const { host } = shortcutStyle({ size });
+    const style = Generate.getTwColor({
+      color: color,
+      tones: {
+        100: ["bg"],
+        300: ["border"],
+        700: ["text"],
+      },
+      variable: "--bcm-shortcut",
+    });
+    return (h$2(Host, { class: host(), style: style }, this.getHotkey(hotkey)));
   }
 };
 
@@ -43592,7 +44576,7 @@ const BcmStep = class {
   }; }
 };
 
-const stepperCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap\"); .size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}.input-size-large{height:40px}.input-size-medium{height:32px}.input-size-small{height:24px}.resize-none textarea{resize:none}.resize-vertical textarea{resize:vertical}.resize-auto textarea{height:auto;resize:none}.textarea-size-large{padding:4px 0 0 4px;min-height:40px}.textarea-size-large .bcm-input-element{min-height:calc((40px - 8px) + 2px)}.textarea-size-large .input-clear-button{height:calc( 40px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-medium{padding:4px 0 0 4px;min-height:32px}.textarea-size-medium .bcm-input-element{min-height:calc((32px - 8px) + 2px)}.textarea-size-medium .input-clear-button{height:calc( 32px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-small{padding:0px 0 0 4px;min-height:24px}.textarea-size-small .bcm-input-element{min-height:calc((24px - 8px) + 2px)}.textarea-size-small .input-clear-button{height:calc( 24px - 16px );top:8px;padding:0;margin-right:8px}*{box-sizing:border-box}.bcm-stepper{display:block;font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400}.bcm-stepper__header{display:flex;flex-direction:row;justify-content:space-between;align-items:flex-start;padding:16px}.bcm-stepper__header *,.bcm-stepper__header ::after,.bcm-stepper__header ::before{box-sizing:content-box}.bcm-stepper__header-item{display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;min-width:150px}.bcm-stepper__header-item--container{display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative}.bcm-stepper__header-item-icon{position:relative;width:32px;height:32px;min-width:32px;min-height:32px;display:flex;justify-content:center;align-items:center;border-radius:50%;background-color:var(--bcm-new-ds-color-blue-600);color:var(--bcm-new-ds-color-slate-700);line-height:1;margin-bottom:16px;user-select:none}.bcm-stepper__header-item-icon::before{width:40px;height:40px;border-radius:50%;border:2px solid var(--bcm-new-ds-color-blue-600);border-color:transparent;position:absolute;z-index:0;user-select:none;top:-6px;left:-6px}.bcm-stepper__header-item-title{color:var(--bcm-new-ds-color-slate-700)}.bcm-stepper__header-item-description{color:var(--bcm-new-ds-color-slate-600)}.bcm-stepper__header-item--disabled .bcm-stepper__header-item-title{color:var(--bcm-new-ds-color-slate-500)}.bcm-stepper__header-item--disabled .bcm-stepper__header-item-description{color:var(--bcm-new-ds-color-slate-500)}.bcm-stepper__header-item:not(.bcm-stepper__header-item--disabled):hover{cursor:pointer}.bcm-stepper__header-item:not(.bcm-stepper__header-item--disabled):hover .bcm-stepper__header-item-icon{background-color:var(--bcm-color-prime-blue-7)}.bcm-stepper__header-item::before,.bcm-stepper__header-item::after{content:\"\";position:absolute;width:calc(50% - 24px);height:2px;background-color:var(--bcm-new-ds-color-blue-600);top:16px;box-sizing:content-box}.bcm-stepper__header-item::after{right:0;border-radius:3px 0 0 3px}.bcm-stepper__header-item::before{left:0;border-radius:0 3px 3px 0}.bcm-stepper__header-item:first-of-type::before{display:none}.bcm-stepper__header-item:last-of-type::after{display:none}.bcm-stepper__header-item--active .bcm-stepper__header-item-icon::before{content:\"\";border:2px solid var(--bcm-new-ds-color-blue-600)}.bcm-stepper__header-item--active .bcm-stepper__header-item-title{font-weight:500}.bcm-stepper__header-line{width:100%;flex:1;height:2px;background-color:var(--bcm-new-ds-color-blue-600);margin-top:16px}.bcm-stepper__header-line--warning{background-color:var(--bcm-new-ds-color-amber-600)}.bcm-stepper__header-line--warning+.bcm-stepper__header-item::before{background-color:var(--bcm-new-ds-color-amber-600)}.bcm-stepper__header-item--warning::after{background-color:var(--bcm-new-ds-color-amber-600)}.bcm-stepper__header-item--warning .bcm-stepper__header-item-icon{background-color:var(--bcm-new-ds-color-amber-600)}.bcm-stepper__header-item--warning .bcm-stepper__header-item-icon::before{border-color:var(--bcm-new-ds-color-amber-600)}.bcm-stepper__header-item--warning:not(.bcm-stepper__header-item--disabled) .bcm-stepper__header-item-icon{color:white}.bcm-stepper__header-item--warning:not(.bcm-stepper__header-item--disabled):hover{cursor:pointer}.bcm-stepper__header-item--warning:not(.bcm-stepper__header-item--disabled):hover .bcm-stepper__header-item-icon{background-color:var(--bcm-new-ds-color-amber-700)}.bcm-stepper__header-line--success{background-color:var(--bcm-new-ds-color-emerald-600)}.bcm-stepper__header-line--success+.bcm-stepper__header-item::before{background-color:var(--bcm-new-ds-color-emerald-600)}.bcm-stepper__header-item--success::after{background-color:var(--bcm-new-ds-color-emerald-600)}.bcm-stepper__header-item--success .bcm-stepper__header-item-icon{background-color:var(--bcm-new-ds-color-emerald-600)}.bcm-stepper__header-item--success .bcm-stepper__header-item-icon::before{border-color:var(--bcm-new-ds-color-emerald-600)}.bcm-stepper__header-item--success:not(.bcm-stepper__header-item--disabled) .bcm-stepper__header-item-icon{color:white}.bcm-stepper__header-item--success:not(.bcm-stepper__header-item--disabled):hover{cursor:pointer}.bcm-stepper__header-item--success:not(.bcm-stepper__header-item--disabled):hover .bcm-stepper__header-item-icon{background-color:var(--bcm-new-ds-color-emerald-700)}.bcm-stepper__header-line--error{background-color:var(--bcm-new-ds-color-slate-300)}.bcm-stepper__header-line--error+.bcm-stepper__header-item::before{background-color:var(--bcm-new-ds-color-slate-300)}.bcm-stepper__header-item--error::after{background-color:var(--bcm-new-ds-color-slate-300)}.bcm-stepper__header-item--error .bcm-stepper__header-item-icon{background-color:var(--bcm-new-ds-color-red-600)}.bcm-stepper__header-item--error .bcm-stepper__header-item-icon::before{border-color:var(--bcm-new-ds-color-red-600)}.bcm-stepper__header-item--error:not(.bcm-stepper__header-item--disabled) .bcm-stepper__header-item-icon{color:white}.bcm-stepper__header-item--error:not(.bcm-stepper__header-item--disabled):hover{cursor:pointer}.bcm-stepper__header-item--error:not(.bcm-stepper__header-item--disabled):hover .bcm-stepper__header-item-icon{background-color:var(--bcm-new-ds-color-red-700)}.bcm-stepper__header-line--default{background-color:var(--bcm-new-ds-color-slate-300)}.bcm-stepper__header-line--default+.bcm-stepper__header-item::before{background-color:var(--bcm-new-ds-color-slate-300)}.bcm-stepper__header-item--default::after{background-color:var(--bcm-new-ds-color-slate-300)}.bcm-stepper__header-item--default .bcm-stepper__header-item-icon{background-color:var(--bcm-new-ds-color-blue-600)}.bcm-stepper__header-item--default .bcm-stepper__header-item-icon::before{border-color:var(--bcm-new-ds-color-blue-600)}.bcm-stepper__header-item--default:not(.bcm-stepper__header-item--disabled) .bcm-stepper__header-item-icon{color:white}.bcm-stepper__header-item--default:not(.bcm-stepper__header-item--disabled):hover{cursor:pointer}.bcm-stepper__header-item--default:not(.bcm-stepper__header-item--disabled):hover .bcm-stepper__header-item-icon{background-color:var(--bcm-new-ds-color-blue-700)}.bcm-stepper__header-line--loading{background-color:var(--bcm-new-ds-color-blue-600)}.bcm-stepper__header-line--loading+.bcm-stepper__header-item::before{background-color:var(--bcm-new-ds-color-blue-600)}.bcm-stepper__header-item--loading::after{background-color:var(--bcm-new-ds-color-blue-600)}.bcm-stepper__header-item--loading .bcm-stepper__header-item-icon{background-color:var(--bcm-new-ds-color-blue-600)}.bcm-stepper__header-item--loading .bcm-stepper__header-item-icon::before{border-color:var(--bcm-new-ds-color-blue-600)}.bcm-stepper__header-item--loading:not(.bcm-stepper__header-item--disabled) .bcm-stepper__header-item-icon{color:white}.bcm-stepper__header-item--loading:not(.bcm-stepper__header-item--disabled):hover{cursor:pointer}.bcm-stepper__header-item--loading:not(.bcm-stepper__header-item--disabled):hover .bcm-stepper__header-item-icon{background-color:var(--bcm-new-ds-color-blue-700)}.bcm-stepper__header-line--disabled{background-color:var(--bcm-new-ds-color-slate-300)}.bcm-stepper__header-line--disabled+.bcm-stepper__header-item::before{background-color:var(--bcm-new-ds-color-slate-300)}.bcm-stepper__header-item--disabled::after{background-color:var(--bcm-new-ds-color-slate-300)}.bcm-stepper__header-item--disabled .bcm-stepper__header-item-icon{background-color:var(--bcm-new-ds-color-slate-300)}.bcm-stepper__header-item--disabled .bcm-stepper__header-item-icon::before{border-color:var(--bcm-new-ds-color-slate-300)}.bcm-stepper__header-item--disabled:not(.bcm-stepper__header-item--disabled) .bcm-stepper__header-item-icon{color:white}.bcm-stepper__header-item--disabled:not(.bcm-stepper__header-item--disabled):hover{cursor:pointer}.bcm-stepper__header-item--disabled:not(.bcm-stepper__header-item--disabled):hover .bcm-stepper__header-item-icon{background-color:var(--bcm-new-ds-color-slate-400)}.bcm-stepper__header-item--disabled{cursor:not-allowed}.bcm-stepper__header-item--disabled.bcm-stepper__header-item--container{pointer-events:none}.bcm-stepper__step{display:none}.bcm-stepper__step-active{display:block}";
+const stepperCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap\"); .size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}.input-size-large{height:40px}.input-size-medium{height:32px}.input-size-small{height:24px}.resize-none textarea{resize:none}.resize-vertical textarea{resize:vertical}.resize-auto textarea{height:auto;resize:none}.textarea-size-large{padding:4px 0 0 4px;min-height:40px}.textarea-size-large .bcm-input-element{min-height:calc((40px - 8px) + 2px)}.textarea-size-large .input-clear-button{height:calc( 40px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-medium{padding:4px 0 0 4px;min-height:32px}.textarea-size-medium .bcm-input-element{min-height:calc((32px - 8px) + 2px)}.textarea-size-medium .input-clear-button{height:calc( 32px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-small{padding:0px 0 0 4px;min-height:24px}.textarea-size-small .bcm-input-element{min-height:calc((24px - 8px) + 2px)}.textarea-size-small .input-clear-button{height:calc( 24px - 16px );top:8px;padding:0;margin-right:8px}*{box-sizing:border-box}.bcm-stepper{display:block;font-family:\"Inter\", sans-serif;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.bcm-stepper__header{display:flex;flex-direction:row;justify-content:space-between;align-items:flex-start;padding:16px}.bcm-stepper__header *,.bcm-stepper__header ::after,.bcm-stepper__header ::before{box-sizing:content-box}.bcm-stepper__header-item{display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;min-width:150px;text-align:center}.bcm-stepper__header-item--container{display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative}.bcm-stepper__header-item-icon{position:relative;width:32px;height:32px;min-width:32px;min-height:32px;display:flex;justify-content:center;align-items:center;border-radius:50%;background-color:var(--bcm-new-ds-color-blue-600);color:var(--bcm-ui-color-text-disabled);line-height:1;margin-bottom:16px;user-select:none}.bcm-stepper__header-item-icon::before{width:40px;height:40px;border-radius:50%;border:2px solid var(--bcm-new-ds-color-blue-600);border-color:transparent;position:absolute;z-index:0;user-select:none;top:-6px;left:-6px}.bcm-stepper__header-item-title{color:var(--bcm-ui-color-text-default);font-size:var(--bcm-ui-font-size-5);line-height:var(--bcm-ui-line-height-5);font-weight:600}.bcm-stepper__header-item-description{color:var(--bcm-ui-color-text-caption);font-size:var(--bcm-ui-font-size-4);line-height:var(--bcm-ui-line-height-4);font-weight:400}.bcm-stepper__header-item--disabled .bcm-stepper__header-item-title{color:var(--bcm-ui-color-text-disabled)}.bcm-stepper__header-item--disabled .bcm-stepper__header-item-description{color:var(--bcm-ui-color-text-disabled)}.bcm-stepper__header-item:not(.bcm-stepper__header-item--disabled):hover{cursor:pointer}.bcm-stepper__header-item:not(.bcm-stepper__header-item--disabled):hover .bcm-stepper__header-item-icon{background-color:var(--bcm-ui-color-background-primary-info-hover)}.bcm-stepper__header-item::before,.bcm-stepper__header-item::after{content:\"\";position:absolute;width:calc(50% - 24px);height:2px;background-color:var(--bcm-ui-color-background-primary-info-default);top:16px;box-sizing:content-box}.bcm-stepper__header-item::after{right:0;border-radius:3px 0 0 3px}.bcm-stepper__header-item::before{left:0;border-radius:0 3px 3px 0}.bcm-stepper__header-item:first-of-type::before{display:none}.bcm-stepper__header-item:last-of-type::after{display:none}.bcm-stepper__header-item--active .bcm-stepper__header-item-icon::before{content:\"\";border:2px solid var(--bcm-ui-color-background-primary-info-default)}.bcm-stepper__header-item--active .bcm-stepper__header-item-title{font-weight:500}.bcm-stepper__header-line{width:100%;flex:1;height:2px;background-color:var(--bcm-new-ds-color-blue-600);margin-top:16px}.bcm-stepper__header-line--warning{background-color:var(--bcm-new-ds-color-amber-600)}.bcm-stepper__header-line--warning+.bcm-stepper__header-item::before{background-color:var(--bcm-new-ds-color-amber-600)}.bcm-stepper__header-item--warning::after{background-color:var(--bcm-new-ds-color-amber-600)}.bcm-stepper__header-item--warning .bcm-stepper__header-item-icon{background-color:var(--bcm-new-ds-color-amber-600)}.bcm-stepper__header-item--warning .bcm-stepper__header-item-icon::before{border-color:var(--bcm-new-ds-color-amber-600)}.bcm-stepper__header-item--warning:not(.bcm-stepper__header-item--disabled) .bcm-stepper__header-item-icon{color:var(--bcm-ui-color-text-base)}.bcm-stepper__header-item--warning:not(.bcm-stepper__header-item--disabled):hover{cursor:pointer}.bcm-stepper__header-item--warning:not(.bcm-stepper__header-item--disabled):hover .bcm-stepper__header-item-icon{background-color:var(--bcm-new-ds-color-amber-700)}.bcm-stepper__header-line--success{background-color:var(--bcm-ui-color-background-success-default)}.bcm-stepper__header-line--success+.bcm-stepper__header-item::before{background-color:var(--bcm-ui-color-background-success-default)}.bcm-stepper__header-item--success::after{background-color:var(--bcm-ui-color-background-success-default)}.bcm-stepper__header-item--success .bcm-stepper__header-item-icon{background-color:var(--bcm-ui-color-background-success-default)}.bcm-stepper__header-item--success .bcm-stepper__header-item-icon::before{border-color:var(--bcm-ui-color-background-success-default)}.bcm-stepper__header-item--success:not(.bcm-stepper__header-item--disabled) .bcm-stepper__header-item-icon{color:var(--bcm-ui-color-text-base)}.bcm-stepper__header-item--success:not(.bcm-stepper__header-item--disabled):hover{cursor:pointer}.bcm-stepper__header-item--success:not(.bcm-stepper__header-item--disabled):hover .bcm-stepper__header-item-icon{background-color:var(--bcm-ui-color-background-success-hover)}.bcm-stepper__header-line--error{background-color:var(--bcm-new-ds-color-slate-300)}.bcm-stepper__header-line--error+.bcm-stepper__header-item::before{background-color:var(--bcm-new-ds-color-slate-300)}.bcm-stepper__header-item--error::after{background-color:var(--bcm-new-ds-color-slate-300)}.bcm-stepper__header-item--error .bcm-stepper__header-item-icon{background-color:var(--bcm-new-ds-color-red-600)}.bcm-stepper__header-item--error .bcm-stepper__header-item-icon::before{border-color:var(--bcm-new-ds-color-red-600)}.bcm-stepper__header-item--error:not(.bcm-stepper__header-item--disabled) .bcm-stepper__header-item-icon{color:var(--bcm-ui-color-text-base)}.bcm-stepper__header-item--error:not(.bcm-stepper__header-item--disabled):hover{cursor:pointer}.bcm-stepper__header-item--error:not(.bcm-stepper__header-item--disabled):hover .bcm-stepper__header-item-icon{background-color:var(--bcm-new-ds-color-red-700)}.bcm-stepper__header-line--default{background-color:var(--bcm-ui-color-background-primary-info-default)}.bcm-stepper__header-line--default+.bcm-stepper__header-item::before{background-color:var(--bcm-ui-color-background-primary-info-default)}.bcm-stepper__header-item--default::after{background-color:var(--bcm-ui-color-background-primary-info-default)}.bcm-stepper__header-item--default .bcm-stepper__header-item-icon{background-color:var(--bcm-ui-color-background-primary-info-default)}.bcm-stepper__header-item--default .bcm-stepper__header-item-icon::before{border-color:var(--bcm-ui-color-background-primary-info-default)}.bcm-stepper__header-item--default:not(.bcm-stepper__header-item--disabled) .bcm-stepper__header-item-icon{color:var(--bcm-ui-color-text-base)}.bcm-stepper__header-item--default:not(.bcm-stepper__header-item--disabled):hover{cursor:pointer}.bcm-stepper__header-item--default:not(.bcm-stepper__header-item--disabled):hover .bcm-stepper__header-item-icon{background-color:var(--bcm-ui-color-background-primary-info-hover)}.bcm-stepper__header-line--loading{background-color:var(--bcm-new-ds-color-blue-600)}.bcm-stepper__header-line--loading+.bcm-stepper__header-item::before{background-color:var(--bcm-new-ds-color-blue-600)}.bcm-stepper__header-item--loading::after{background-color:var(--bcm-new-ds-color-blue-600)}.bcm-stepper__header-item--loading .bcm-stepper__header-item-icon{background-color:var(--bcm-new-ds-color-blue-600)}.bcm-stepper__header-item--loading .bcm-stepper__header-item-icon::before{border-color:var(--bcm-new-ds-color-blue-600)}.bcm-stepper__header-item--loading:not(.bcm-stepper__header-item--disabled) .bcm-stepper__header-item-icon{color:var(--bcm-ui-color-text-base)}.bcm-stepper__header-item--loading:not(.bcm-stepper__header-item--disabled):hover{cursor:pointer}.bcm-stepper__header-item--loading:not(.bcm-stepper__header-item--disabled):hover .bcm-stepper__header-item-icon{background-color:var(--bcm-new-ds-color-blue-700)}.bcm-stepper__header-line--disabled{background-color:var(--bcm-ui-color-background-disabled-disable)}.bcm-stepper__header-line--disabled+.bcm-stepper__header-item::before{background-color:var(--bcm-ui-color-background-disabled-disable)}.bcm-stepper__header-item--disabled::after{background-color:var(--bcm-ui-color-background-disabled-disable)}.bcm-stepper__header-item--disabled .bcm-stepper__header-item-icon{background-color:var(--bcm-ui-color-background-disabled-disable)}.bcm-stepper__header-item--disabled .bcm-stepper__header-item-icon::before{border-color:var(--bcm-ui-color-background-disabled-disable)}.bcm-stepper__header-item--disabled:not(.bcm-stepper__header-item--disabled) .bcm-stepper__header-item-icon{color:var(--bcm-ui-color-text-base)}.bcm-stepper__header-item--disabled:not(.bcm-stepper__header-item--disabled):hover{cursor:pointer}.bcm-stepper__header-item--disabled:not(.bcm-stepper__header-item--disabled):hover .bcm-stepper__header-item-icon{background-color:var(--bcm-ui-color-background-disabled-disable)}.bcm-stepper__header-item--disabled{cursor:not-allowed}.bcm-stepper__header-item--disabled.bcm-stepper__header-item--container{pointer-events:none}.bcm-stepper__step{display:none}.bcm-stepper__step-active{display:block}";
 
 const BcmStepper = class {
   constructor(hostRef) {
@@ -43782,7 +44766,183 @@ const BcmStepper = class {
 };
 BcmStepper.style = stepperCss;
 
-const switchCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap\"); .size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}.input-size-large{height:40px}.input-size-medium{height:32px}.input-size-small{height:24px}.resize-none textarea{resize:none}.resize-vertical textarea{resize:vertical}.resize-auto textarea{height:auto;resize:none}.textarea-size-large{padding:4px 0 0 4px;min-height:40px}.textarea-size-large .bcm-input-element{min-height:calc((40px - 8px) + 2px)}.textarea-size-large .input-clear-button{height:calc( 40px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-medium{padding:4px 0 0 4px;min-height:32px}.textarea-size-medium .bcm-input-element{min-height:calc((32px - 8px) + 2px)}.textarea-size-medium .input-clear-button{height:calc( 32px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-small{padding:0px 0 0 4px;min-height:24px}.textarea-size-small .bcm-input-element{min-height:calc((24px - 8px) + 2px)}.textarea-size-small .input-clear-button{height:calc( 24px - 16px );top:8px;padding:0;margin-right:8px}.bcm-input[no-margin]{margin:0}.bcm-textarea[no-margin]{margin:0}.bcm-switch[no-margin]{margin:0}.bcm-checkbox[no-margin]{margin:0}.bcm-radio-group[no-margin]{margin:0}.bcm-checkbox-group[no-margin]{margin:0}.bcm-range[no-margin]{margin:0}.bcm-form[no-margin]{margin:0}.bcm-form-group[no-margin]{margin:0}.bcm-list[no-margin]{margin:0}.bcm-colorpicker[no-margin]{margin:0}.bcm-date-picker[no-margin]{margin:0}.bcm-time-picker[no-margin]{margin:0}.bcm-datetime-picker[no-margin]{margin:0}.bcm-select[no-margin]{margin:0}.bcm-listbox[no-margin]{margin:0}*{box-sizing:border-box}.bcm-switch{display:inline-flex;user-select:none;flex-direction:column;margin-bottom:8px}.bcm-switch__container{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:4px}.bcm-switch__container--left,.bcm-switch__container--right{align-items:center}.bcm-switch__container--left .bcm-label__text,.bcm-switch__container--right .bcm-label__text{margin:0}.bcm-switch__container--left{flex-direction:row}.bcm-switch__container--left .bcm-label__text{margin-right:4px}.bcm-switch__container--right{flex-direction:row-reverse}.bcm-switch__container--right .bcm-label__text{margin-left:4px}.bcm-switch:focus-visible{outline:none}.bcm-switch:focus-visible .bcm-switch__toggle{background-color:var(--bcm-new-ds-color-slate-400)}.bcm-switch:focus-visible .bcm-switch__toggle.switch-checked{background-color:var(--bcm-new-ds-color-blue-600)}.bcm-switch:hover{outline:none}.bcm-switch:hover .bcm-switch__toggle .handle{background-color:var(--bcm-new-ds-color-slate-100)}.bcm-switch:hover .bcm-switch__toggle.switch-checked .handle{background-color:var(--bcm-new-ds-color-slate-100)}.bcm-switch *{box-sizing:border-box}.bcm-switch.hidden{display:none}.bcm-switch input{display:none}.bcm-switch.disabled .bcm-switch__toggle{cursor:not-allowed;opacity:40%}.bcm-switch.readonly .bcm-switch__toggle{cursor:default;opacity:80%}.bcm-switch__label{font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;display:inline-flex;align-items:center;margin:0}.bcm-switch__label .active-text{color:var(--bcm-new-ds-color-blue-700);margin:0 0 0 4px}.bcm-switch__label .inactive-text{color:var(--bcm-new-ds-color-slate-700);margin:0 4px 0 0}.bcm-switch__toggle{display:flex;justify-content:space-between;align-items:center;border-radius:16px;background-color:var(--bcm-new-ds-color-slate-300);position:relative;cursor:pointer}.bcm-switch__toggle .handle{padding:1px;position:absolute;background-color:var(--bcm-new-ds-color-slate-50);display:inline-flex;align-items:center;justify-content:center;border-radius:16px;transition:left 0.2s ease-in-out, width 0.2s ease-in-out;box-shadow:0 1px 3px 0 rgba(17, 24, 38, 0.1)}.bcm-switch__toggle .icon-active{opacity:0;margin-left:2px}.bcm-switch__toggle .icon-inactive{opacity:1;margin-right:2px}.bcm-switch__toggle.bcm-switch__size-small{width:32px;min-width:32px;height:16px;padding:4px}.bcm-switch__toggle.bcm-switch__size-small .handle{width:12px;height:12px;left:2px}.bcm-switch__toggle.bcm-switch__size-small.switch-checked .handle{left:18px}.bcm-switch__toggle.bcm-switch__size-small:active:not(.disabled):not(.readonly) .handle{width:16px}.bcm-switch__toggle.bcm-switch__size-small:active.switch-checked:not(.disabled):not(.readonly) .handle{left:12px}.bcm-switch__toggle.bcm-switch__size-small .switch-spinner{box-sizing:border-box;display:inline-flex;width:9px;height:9px;border-radius:50%;border:1px solid var(--bcm-new-ds-color-white);border-top-color:var(--bcm-new-ds-color-slate-900);animation:switch-spinner 1.5s linear infinite}.bcm-switch__toggle.bcm-switch__size-medium{width:36px;min-width:36px;height:18px;padding:4px}.bcm-switch__toggle.bcm-switch__size-medium .handle{width:14px;height:14px;left:2px}.bcm-switch__toggle.bcm-switch__size-medium.switch-checked .handle{left:20px}.bcm-switch__toggle.bcm-switch__size-medium:active:not(.disabled):not(.readonly) .handle{width:18px}.bcm-switch__toggle.bcm-switch__size-medium:active.switch-checked:not(.disabled):not(.readonly) .handle{left:14px}.bcm-switch__toggle.bcm-switch__size-medium .switch-spinner{box-sizing:border-box;display:inline-flex;width:11px;height:11px;border-radius:50%;border:1px solid var(--bcm-new-ds-color-white);border-top-color:var(--bcm-new-ds-color-slate-900);animation:switch-spinner 1.5s linear infinite}.bcm-switch__toggle.bcm-switch__size-large{width:40px;min-width:40px;height:20px;padding:4px}.bcm-switch__toggle.bcm-switch__size-large .handle{width:16px;height:16px;left:2px}.bcm-switch__toggle.bcm-switch__size-large.switch-checked .handle{left:22px}.bcm-switch__toggle.bcm-switch__size-large:active:not(.disabled):not(.readonly) .handle{width:20px}.bcm-switch__toggle.bcm-switch__size-large:active.switch-checked:not(.disabled):not(.readonly) .handle{left:16px}.bcm-switch__toggle.bcm-switch__size-large .switch-spinner{box-sizing:border-box;display:inline-flex;width:13px;height:13px;border-radius:50%;border:1px solid var(--bcm-new-ds-color-white);border-top-color:var(--bcm-new-ds-color-slate-900);animation:switch-spinner 1.5s linear infinite}.bcm-switch__toggle.switch-checked{background-color:var(--bcm-new-ds-color-blue-500)}.bcm-switch__toggle.switch-checked .icon-active{color:var(--bcm-new-ds-color-slate-100);opacity:1}.bcm-switch__toggle.switch-checked .icon-inactive{opacity:0}.bcm-switch__toggle.switch-checked .switch-spinner{border-top-color:var(--bcm-new-ds-color-blue-600)}.bcm-switch__size-small .bcm-switch__label,.bcm-switch__size-small .bcm-label__text{font-size:12px}.bcm-switch__size-small .bcm-switch__toggle{font-size:8px}.bcm-switch__size-medium .bcm-switch__label,.bcm-switch__size-medium .bcm-label__text{font-size:13px}.bcm-switch__size-medium .bcm-switch__toggle{font-size:9px}.bcm-switch__size-large .bcm-switch__label,.bcm-switch__size-large .bcm-label__text{font-size:16px}.bcm-switch__size-large .bcm-switch__toggle{font-size:12px}@keyframes switch-spinner{to{transform:rotate(360deg)}}";
+const switchStyle = ce({
+  slots: {
+    host: [
+      "bcm-switch",
+      "bcm-ui-element bcm-ui-inputs",
+      "tw-inline-flex tw-flex-col tw-select-none tw-mb-2 tw-group",
+      "tw-outline-none"
+    ],
+    switchContainer: [
+      "bcm-switch__container",
+      "tw-flex  tw-gap-1"
+    ],
+    switchInput: [
+      "switch tw-hidden",
+    ],
+    switchLabel: [
+      "bcm-switch__label tw-inline-flex tw-items-center tw-m-0",
+    ],
+    switchToggle: [
+      "bcm-switch__toggle",
+      "tw-flex tw-items-center tw-justify-between tw-relative tw-rounded-full tw-cursor-pointer ",
+    ],
+    handle: [
+      "handle",
+      "tw-p-1",
+      "tw-absolute tw-rounded-full tw-bg-color-base tw-flex tw-items-center tw-justify-center",
+      "tw-transition-all tw-duration-200 tw-ease-in-out",
+      "tw-shadow-sm"
+    ],
+    switchSpinner: [
+      "switch-spinner fa-solid fa-spinner-scale fa-spin",
+    ],
+    bcmLabel: "",
+    activeTextStyle: "active-text tw-text-color tw-ml-1",
+    inactiveTextStyle: "inactive-text tw-text-color tw-mr-1",
+    activeIconStyle: "icon-active tw-text-color-base tw-ml-0.5",
+    inactiveIconStyle: "icon-inactive tw-text-color-base tw-mr-0.5",
+  },
+  variants: {
+    hidden: {
+      true: {
+        host: ["hidden"],
+      },
+    },
+    checked: {
+      true: {
+        host: ["checked"],
+        switchToggle: [
+          "switch-checked tw-bg-color-primaryInfo",
+          "group-hover:tw-bg-color-primaryInfo-hover",
+          "group-[&:focus-visible]:tw-bg-color-primaryInfo-active",
+        ],
+        activeIconStyle: "tw-opacity-100",
+        inactiveIconStyle: "tw-opacity-0",
+      },
+      false: {
+        host: ["unchecked"],
+        switchToggle: [
+          "switch-unchecked tw-bg-color-defaultInvert",
+          "group-hover:tw-bg-color-defaultInvert-hover",
+          "group-[&:focus-visible]:tw-bg-color-defaultInvert-active",
+        ],
+        activeIconStyle: "tw-opacity-0",
+        inactiveIconStyle: "tw-opacity-100",
+      }
+    },
+    disabled: {
+      true: {
+        host: ["disabled"],
+        switchToggle: ["disabled tw-cursor-not-allowed tw-opacity-40"],
+      },
+    },
+    readonly: {
+      true: {
+        host: ["readonly"],
+        switchToggle: ["readonly tw-cursor-not-allowed tw-opacity-80"],
+      },
+    },
+    labelPosition: {
+      left: {
+        switchContainer: [
+          "bcm-switch__container--left",
+          "tw-items-center tw-flex-row"
+        ],
+        bcmLabel: ["tw-mr-1"],
+      },
+      right: {
+        switchContainer: [
+          "bcm-switch__container--right",
+          "tw-items-center tw-flex-row-reverse"
+        ],
+        bcmLabel: ["tw-ml-1"],
+      },
+      top: {
+        switchContainer: ["bcm-switch__container--top",
+          "tw-flex-col tw-items-start tw-justify-start"
+        ],
+      }
+    },
+    size: {
+      small: {
+        switchLabel: ["input-size-small"],
+        switchToggle: ["bcm-switch__size-small",
+          "tw-w-8 tw-min-w-8 tw-h-4 tw-p-1"
+        ],
+        handle: ["tw-w-3 tw-h-3 tw-left-0.5",
+          "group-[&:active]:tw-w-4",
+          "group-[&:active.checked]:tw-left-3.5"
+        ],
+        switchSpinner: ["tw-text-size-2"],
+        activeTextStyle: ["tw-text-size-3"],
+        inactiveTextStyle: ["tw-text-size-3"],
+      },
+      medium: {
+        switchLabel: ["input-size-medium"],
+        switchToggle: ["bcm-switch__size-medium",
+          "tw-w-9 tw-min-w-9 tw-h-4.5 tw-p-1"
+        ],
+        handle: [
+          "tw-w-3.5 tw-h-3.5 tw-left-0.5",
+          "group-[&:active]:tw-w-4.5",
+          "group-[&:active.checked]:tw-left-4"
+        ],
+        switchSpinner: ["tw-text-size-3"],
+        activeTextStyle: ["tw-text-size-4"],
+        inactiveTextStyle: ["tw-text-size-4"],
+      },
+      large: {
+        switchLabel: ["input-size-large"],
+        switchToggle: ["bcm-switch__size-large",
+          "tw-w-10 tw-min-w-10 tw-h-5 tw-p-1"
+        ],
+        handle: ["tw-w-4 tw-h-4 tw-left-0.5",
+          "group-[&:active]:tw-w-5",
+          "group-[&:active.checked]:tw-left-4.5"
+        ],
+        switchSpinner: ["tw-text-size-4"],
+        activeTextStyle: ["tw-text-size-5"],
+        inactiveTextStyle: ["tw-text-size-5"],
+      },
+    },
+  },
+  compoundVariants: [
+    // 32 - 16 + 2 = 18 s
+    // 36 - 18 + 2 = 20 m
+    // 40 - 20 + 2 = 22 l
+    {
+      checked: true,
+      size: "small",
+      class: {
+        handle: ["tw-left-4.5"],
+      },
+    },
+    {
+      checked: true,
+      size: "medium",
+      class: {
+        handle: ["tw-left-5"],
+      },
+    },
+    {
+      checked: true,
+      size: "large",
+      class: {
+        handle: ["tw-left-5.5"],
+      },
+    },
+  ],
+  defaultVariants: {
+    hidden: false,
+    checked: false,
+    disabled: false,
+    readonly: false,
+    labelPosition: "left",
+    size: "medium",
+  },
+});
 
 var __decorate$1 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -43888,30 +45048,26 @@ const BcmSwitch = class {
     }
   }
   render() {
-    const { hidden, _internal_id, checked, size, activeIcon, inactiveIcon, activeText, inactiveText, pending, disabled, readonly, label, required, noCaption, captionType, captionError, caption } = this;
-    const classes = classnames('bcm-switch__toggle', 'bcm-switch__size-' + size, {
-      'switch-checked': checked,
-      'disabled': disabled,
-      'readonly': readonly
-    });
-    const bcmSwitchClasses = classnames('bcm-switch', 'bcm-switch__size-' + size, {
+    const { hidden, _internal_id, checked, size, activeIcon, inactiveIcon, activeText, inactiveText, pending, disabled, readonly, label, required, noCaption, captionType, captionError, caption, labelPosition } = this;
+    const { host, switchContainer, switchInput, switchLabel, switchToggle, handle, switchSpinner, bcmLabel, activeTextStyle, inactiveTextStyle, activeIconStyle, inactiveIconStyle } = switchStyle({
       hidden,
       checked,
       disabled,
-      readonly
+      readonly,
+      labelPosition,
+      size
     });
-    const bcmSwitchLabel = classnames('bcm-switch__label', 'input-size-' + Bcm$1.Size[size]);
-    const bcmSwitchContainer = classnames('bcm-switch__container', `bcm-switch__container--${this.labelPosition}`);
-    const switchText = (text) => (size != Bcm$1.Size.small && (activeText || inactiveText)) && (h$2("span", { class: text + '-text' }, text == 'active' ? activeText : inactiveText));
-    const switchIcon = (text) => (size != Bcm$1.Size.small && (activeIcon || inactiveIcon)) && h$2("bcm-icon", { icon: text == 'active' ? activeIcon : inactiveIcon, class: ' icon-' + text });
-    return (h$2(Host, { tabindex: "0", onFocus: () => this.focus.emit(this.el), onBlur: () => this.blur.emit(this.el), class: bcmSwitchClasses }, h$2("span", { hidden: true }, h$2("slot", null)), h$2("div", { class: bcmSwitchContainer }, label && h$2("bcm-label", { htmlFor: _internal_id, tooltip: this.tooltip, type: captionType, value: label, required: required }), h$2("input", { id: _internal_id, onChange: () => this.handleChange(), ref: el => (this.inputElement = el), checked: checked, type: "checkbox", class: "switch", disabled: disabled || readonly }), h$2("label", { htmlFor: _internal_id, class: bcmSwitchLabel }, switchText('inactive'), h$2("div", { class: classes }, switchIcon('active'), h$2("span", { class: "handle" }, pending && h$2("span", { class: "switch-spinner" })), switchIcon('inactive')), switchText('active'))), h$2(CaptionTemplate, { noCaption: noCaption, captionType: captionType, captionError: captionError, caption: caption })));
+    const switchText = (text) => (size != Bcm$1.Size.small && (activeText || inactiveText)) &&
+      (h$2("span", { class: text == "active" ? activeTextStyle() : inactiveTextStyle() }, text == 'active' ? activeText : inactiveText));
+    const switchIcon = (text) => (size != Bcm$1.Size.small && (activeIcon || inactiveIcon)) &&
+      h$2("i", { class: text == 'active' ? `${activeIcon} ${activeIconStyle()}` : `${inactiveIcon} ${inactiveIconStyle()}` });
+    return (h$2(Host, { tabindex: "0", onFocus: () => this.focus.emit(this.el), onBlur: () => this.blur.emit(this.el), class: host() }, h$2("span", { hidden: true }, h$2("slot", null)), h$2("div", { class: switchContainer() }, label && h$2("bcm-label", { class: bcmLabel(), htmlFor: _internal_id, tooltip: this.tooltip, type: captionType, value: label, required: required, "no-margin": labelPosition !== "top" }), h$2("input", { id: _internal_id, onChange: () => this.handleChange(), ref: el => (this.inputElement = el), checked: checked, type: "checkbox", class: switchInput(), disabled: disabled || readonly }), h$2("label", { htmlFor: _internal_id, class: switchLabel() }, switchText('inactive'), h$2("div", { class: switchToggle() }, switchIcon('active'), h$2("span", { class: handle() }, pending && h$2("i", { class: switchSpinner() })), switchIcon('inactive')), switchText('active'))), h$2(CaptionTemplate, { noCaption: noCaption, captionType: captionType, captionError: captionError, caption: caption })));
   }
   get el() { return getElement(this); }
 };
 __decorate$1([
   IsLoad()
 ], BcmSwitch.prototype, "el", void 0);
-BcmSwitch.style = switchCss;
 
 const tabCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap\"); .size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}.input-size-large{height:40px}.input-size-medium{height:32px}.input-size-small{height:24px}.resize-none textarea{resize:none}.resize-vertical textarea{resize:vertical}.resize-auto textarea{height:auto;resize:none}.textarea-size-large{padding:4px 0 0 4px;min-height:40px}.textarea-size-large .bcm-input-element{min-height:calc((40px - 8px) + 2px)}.textarea-size-large .input-clear-button{height:calc( 40px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-medium{padding:4px 0 0 4px;min-height:32px}.textarea-size-medium .bcm-input-element{min-height:calc((32px - 8px) + 2px)}.textarea-size-medium .input-clear-button{height:calc( 32px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-small{padding:0px 0 0 4px;min-height:24px}.textarea-size-small .bcm-input-element{min-height:calc((24px - 8px) + 2px)}.textarea-size-small .input-clear-button{height:calc( 24px - 16px );top:8px;padding:0;margin-right:8px}*{box-sizing:border-box}:host{display:block}:host(.hidden){display:none}slot[name=icon-suffix]::slotted(bcm-icon){margin-left:10px}slot[name=icon-prefix]::slotted(bcm-icon){margin-right:10px}.tab{font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;position:relative;display:flex;flex-direction:row;align-items:center;justify-content:center;flex-wrap:nowrap;padding:var(--bcm-tab-vertical-space) 14px var(--bcm-tab-vertical-space) 14px;color:#374151;font-size:14px;line-height:20px;font-weight:500;cursor:pointer;user-select:none}.tab:hover{color:#1f2937}.tab:active{color:#1f2937}.tab:focus-visible{color:#1f2937}.tab.active{color:#1d4ed8}.tab.active::before{content:\"\";bottom:-2px;left:0;width:100%;height:2px;background-color:#1d4ed8;position:absolute;z-index:1}.tab.active:hover{color:#1e40af}.tab.active:active{color:#1e40af}.tab.active:focus-visible{color:#1e40af}.tab:active,.tab:focus{color:var(--bcm-color-prime-blue-7)}.tab[disabled],.tab.disabled{color:var(--bcm-color-grey-6);cursor:not-allowed}.tab.closable:not(.pane){padding-left:0;padding-right:0}.tab.closable .close{margin-left:34px}.tab.pane{border:1px solid transparent;border-bottom:none;border-color:var(--bcm-color-grey-5);background-color:var(--bcm-color-grey-3);border-radius:2px 2px 0 0}.tab.pane.active{background-color:#ffffff}.badge{padding-left:8px;position:relative}.badge.blink:after{content:\"\";position:absolute;top:8px;left:9px;background:black;border-radius:50%;height:7px;width:7px;box-shadow:0 0 0 0 rgba(0, 0, 0, 0);transform:scale(1)}.badge.success:after{animation:pulsesuccess 2s infinite;background-color:#52C41A}.badge.error:after{animation:pulseerror 2s infinite;background-color:#F5222D}.badge.default:after{animation:pulsedefault 2s infinite;background-color:#D9D9D9}.badge.processing:after{animation:pulseprocessing 2s infinite;background-color:#4293CF}.badge.warning:after{animation:pulsewarning 2s infinite;background-color:#FA8C16}@keyframes pulsesuccess{0%{transform:scale(0.95);box-shadow:0 0 0 0 rgba(82, 196, 26, 0.7)}70%{transform:scale(1);box-shadow:0 0 0 10px rgba(0, 0, 0, 0)}100%{transform:scale(0.95);box-shadow:0 0 0 0 rgba(0, 0, 0, 0)}}@keyframes pulseerror{0%{transform:scale(0.95);box-shadow:0 0 0 0 rgba(245, 34, 45, 0.7)}70%{transform:scale(1);box-shadow:0 0 0 10px rgba(0, 0, 0, 0)}100%{transform:scale(0.95);box-shadow:0 0 0 0 rgba(0, 0, 0, 0)}}@keyframes pulsedefault{0%{transform:scale(0.95);box-shadow:0 0 0 0 rgba(217, 217, 217, 0.7)}70%{transform:scale(1);box-shadow:0 0 0 10px rgba(0, 0, 0, 0)}100%{transform:scale(0.95);box-shadow:0 0 0 0 rgba(0, 0, 0, 0)}}@keyframes pulseprocessing{0%{transform:scale(0.95);box-shadow:0 0 0 0 rgba(66, 147, 207, 0.7)}70%{transform:scale(1);box-shadow:0 0 0 10px rgba(0, 0, 0, 0)}100%{transform:scale(0.95);box-shadow:0 0 0 0 rgba(0, 0, 0, 0)}}@keyframes pulsewarning{0%{transform:scale(0.95);box-shadow:0 0 0 0 rgba(250, 140, 22, 0.7)}70%{transform:scale(1);box-shadow:0 0 0 10px rgba(0, 0, 0, 0)}100%{transform:scale(0.95);box-shadow:0 0 0 0 rgba(0, 0, 0, 0)}}";
 
@@ -43971,13 +45127,71 @@ const BcmTab = class {
 };
 BcmTab.style = tabCss;
 
+const tabGroupStyle = ce({
+  slots: {
+    tabGroup: [
+      "bcm-tab-group",
+      "bcm-ui-element bcm-ui-content-display",
+      "tw-flex tw-w-full tw-flex-col tw-items-center tw-font-sans"
+    ],
+    tabHeader: [
+      "tw-relative tw-flex tw-w-full tw-flex-row tw-items-end tw-justify-between"
+    ],
+    inkBar: [
+      "tw-bg-default-700 tw-absolute tw-bottom-0 tw-left-0 tw-mt-[-2px] tw-h-[2px] tw-rounded-sm tw-transition-transform"
+    ],
+    tabHeaderItem: [
+      "tw-flex tw-flex-1 tw-items-center tw-w-full tw-justify-center tw-border-4 tw-focus:outline-none tw-font-medium tw-py-1 tw-px-3"
+    ],
+    tabItem: [
+      "tw-w-full"
+    ]
+  },
+  variants: {
+    size: {
+      small: {
+        tabHeaderItem: "tw-text-3 tw-gap-2",
+      },
+      medium: {
+        tabHeaderItem: "tw-text-base tw-gap-2.5",
+      },
+      large: {
+        tabHeaderItem: "tw-text-4 tw-gap-3",
+      },
+    },
+    disabled: {
+      true: {
+        tabHeaderItem: "tw-cursor-not-allowed tw-text-color-disabled tw-opacity-50",
+        tabItem: "tw-opacity-50"
+      },
+      false: {
+        tabHeaderItem: "tw-cursor-pointer"
+      },
+    },
+    active: {
+      true: {
+        tabHeaderItem: "tw-text-color-primary",
+        tabItem: "tw-block"
+      },
+      false: {
+        tabHeaderItem: "tw-text-color",
+        tabItem: "tw-hidden"
+      }
+    }
+  },
+  defaultVariants: {
+    size: "medium",
+    disabled: false,
+    active: false
+  },
+});
+
 const BcmTabGroup = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.tabChange = createEvent(this, "bcm-tab-change", 7);
     this._id = Generate.UID();
     this.active = "1";
-    this.color = "blue";
     this.size = Bcm.Size.medium;
   }
   get tabItems() {
@@ -43993,7 +45207,6 @@ const BcmTabGroup = class {
       const itemIndex = index + 1;
       tab.setAttribute("index", `${itemIndex}`);
       tab.setAttribute("size", this.size);
-      tab.setAttribute("color", this.color);
       tab.removeAttribute("active");
       tab.removeAttribute("disabled");
       if (itemActive) {
@@ -44025,7 +45238,6 @@ const BcmTabGroup = class {
       this.tabItems.forEach(tab => {
         tab.removeAttribute("active");
         tab.setAttribute("size", this.size);
-        tab.setAttribute("color", this.color);
         if (tab.getAttribute("index") == this.active) {
           tab.setAttribute("active", "");
         }
@@ -44035,7 +45247,6 @@ const BcmTabGroup = class {
       this.tabItemHeaders.forEach(tabHeader => {
         tabHeader.removeAttribute("active");
         tabHeader.setAttribute("size", this.size);
-        tabHeader.setAttribute("color", this.color);
         if (tabHeader.getAttribute("index") == this.active) {
           tabHeader.setAttribute("active", "");
           // tabHeader.scrollIntoView({
@@ -44144,12 +45355,8 @@ const BcmTabGroup = class {
     });
   }
   render() {
-    const { color } = this;
-    const dc = Generate.getTwColor({
-      color: color,
-      tones: [700]
-    });
-    return (h$2(Host, { role: "tablist", "aria-label": "Tab Group", "aria-busy": "true", class: "tw-flex tw-w-full tw-flex-col tw-items-center tw-font-sans" }, h$2("div", { class: `tw-relative tw-flex tw-w-full tw-flex-row tw-items-end tw-justify-between`, id: "tab-header", style: dc }, h$2("div", { id: "ink-bar", class: `tw-bg-default-700 tw-absolute tw-bottom-0 tw-left-0 tw-mt-[-2px] tw-h-[2px] tw-rounded-sm tw-transition-transform` })), h$2("slot", null)));
+    const { tabGroup, tabHeader, inkBar } = tabGroupStyle();
+    return (h$2(Host, { role: "tablist", "aria-label": "Tab Group", "aria-busy": "true", class: tabGroup() }, h$2("div", { class: tabHeader(), id: "tab-header" }, h$2("div", { id: "ink-bar", class: inkBar() })), h$2("slot", null)));
   }
   get el() { return getElement(this); }
   static get watchers() { return {
@@ -44214,12 +45421,12 @@ const BcmTabItem = class {
     observer.observe(this.el, { childList: true, subtree: true });
   }
   render() {
-    return (h$2(Host, { id: this._id, role: "tabpanel", "aria-labelledby": `tab-${this._id}`, "aria-hidden": `${!this.active}`, class: {
-        "tw-block": this.active,
-        "tw-hidden": !this.active,
-        "tw-opacity-50": this.disabled,
-        "tw-w-full": true,
-      } }, h$2("slot", null)));
+    const { disabled, active } = this;
+    const { tabItem } = tabGroupStyle({
+      disabled,
+      active,
+    });
+    return (h$2(Host, { id: this._id, role: "tabpanel", "aria-labelledby": `tab-${this._id}`, "aria-hidden": `${!this.active}`, class: tabItem() }, h$2("slot", null)));
   }
   get el() { return getElement(this); }
 };
@@ -44231,7 +45438,6 @@ const BcmTabItemHeader = class {
     this.active = false;
     this.disabled = false;
     this.index = undefined;
-    this.color = "blue";
     this.size = Bcm.Size.medium;
   }
   handleClick() {
@@ -44241,19 +45447,13 @@ const BcmTabItemHeader = class {
     }
   }
   render() {
-    const { color, size, active, disabled } = this;
-    const disabledClass = "tw-cursor-not-allowed tw-text-gray-500 tw-opacity-50";
-    const dc = Generate.getTwColor({
-      color: color,
-      tones: [700, 800, 900]
+    const { size, active, disabled } = this;
+    const { tabHeaderItem } = tabGroupStyle({
+      size,
+      disabled,
+      active,
     });
-    return (h$2(Host, { onClick: () => this.handleClick(), class: classnames(`tw-flex tw-flex-1 tw-items-center tw-justify-center tw-border-b-[2px] tw-border-b-slate-700  tw-transition-font tw-focus:outline-none`, {
-        "tw-text-2 tw-py-1 tw-gap-2": size === Bcm.Size.small,
-        "tw-text-3 tw-py-2 tw-gap-3": size === Bcm.Size.medium,
-        "tw-text-4 tw-py-3 tw-gap-4": size === Bcm.Size.large,
-      }, disabled ? disabledClass : "tw-cursor-pointer", active
-        ? `tw-text-default-700 enabled:hover:tw-text-default-800 enabled:active:tw-text-default-900 enabled:focus-visible:tw-text-default-900`
-        : "tw-text-slate-700 enabled:hover:tw-text-slate-800 enabled:focus-visible:tw-text-slate-900 enabled:active:tw-text-slate-900"), style: dc }));
+    return (h$2(Host, { onClick: () => this.handleClick(), class: tabHeaderItem() }));
   }
   get el() { return getElement(this); }
 };
@@ -44642,17 +45842,123 @@ const BcmText = class {
 };
 BcmText.style = textCss;
 
-var ResizeType;
-(function (ResizeType) {
-  ResizeType["none"] = "none";
-  ResizeType["both"] = "both";
-  ResizeType["horizontal"] = "horizontal";
-  ResizeType["vertical"] = "vertical";
-  ResizeType["initial"] = "initial";
-  ResizeType["inherit"] = "inherit";
-})(ResizeType || (ResizeType = {}));
-
-const textareaCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap\"); .size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}.input-size-large{height:40px}.input-size-medium{height:32px}.input-size-small{height:24px}.resize-none textarea{resize:none}.resize-vertical textarea{resize:vertical}.resize-auto textarea{height:auto;resize:none}.textarea-size-large{padding:4px 0 0 4px;min-height:40px}.textarea-size-large .bcm-input-element{min-height:calc((40px - 8px) + 2px)}.textarea-size-large .input-clear-button{height:calc( 40px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-medium{padding:4px 0 0 4px;min-height:32px}.textarea-size-medium .bcm-input-element{min-height:calc((32px - 8px) + 2px)}.textarea-size-medium .input-clear-button{height:calc( 32px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-small{padding:0px 0 0 4px;min-height:24px}.textarea-size-small .bcm-input-element{min-height:calc((24px - 8px) + 2px)}.textarea-size-small .input-clear-button{height:calc( 24px - 16px );top:8px;padding:0;margin-right:8px}.bcm-input[no-margin]{margin:0}.bcm-textarea[no-margin]{margin:0}.bcm-switch[no-margin]{margin:0}.bcm-checkbox[no-margin]{margin:0}.bcm-radio-group[no-margin]{margin:0}.bcm-checkbox-group[no-margin]{margin:0}.bcm-range[no-margin]{margin:0}.bcm-form[no-margin]{margin:0}.bcm-form-group[no-margin]{margin:0}.bcm-list[no-margin]{margin:0}.bcm-colorpicker[no-margin]{margin:0}.bcm-date-picker[no-margin]{margin:0}.bcm-time-picker[no-margin]{margin:0}.bcm-datetime-picker[no-margin]{margin:0}.bcm-select[no-margin]{margin:0}.bcm-listbox[no-margin]{margin:0}*{box-sizing:border-box}.bcm-input{display:inline-flex;flex-direction:column;width:100%;max-width:256px;margin-bottom:8px}.bcm-input.full-width{max-width:100%}.bcm-input.hidden{display:none}.bcm-input__container{font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;display:flex;align-items:stretch;flex-direction:row;background-color:var(--bcm-new-ds-color-white);border:1px solid var(--bcm-new-ds-color-slate-300);border-radius:4px;box-sizing:border-box;cursor:text;padding:0 0 0 4px;position:relative;width:100%}.bcm-input__container.disabled{background-color:var(--bcm-new-ds-color-slate-50);cursor:not-allowed}.bcm-input__container.disabled .bcm-input-element{color:var(--bcm-new-ds-color-slate-500)}.bcm-input__container.readonly{background-color:var(--bcm-new-ds-color-slate-50);cursor:default}.bcm-input__container.readonly .bcm-input-element{color:var(--bcm-new-ds-color-slate-600)}.bcm-input__container:not(.disabled):hover .caret-container,.bcm-input__container:not(.disabled).focused .caret-container{opacity:1}.bcm-input__container:not(.disabled):hover .input-clear-button,.bcm-input__container:not(.disabled).focused .input-clear-button{opacity:1}.bcm-input__container:not(.disabled).focused{background-color:var(--bcm-new-ds-color-slate-50)}.bcm-input__container:not(.disabled):hover{border-color:var(--bcm-color-prime-blue-6)}.bcm-input__container.empty .input-clear-button{display:none}.bcm-input__container.invalid,.bcm-input__container.error{border-color:var(--bcm-new-ds-color-red-500)}.bcm-input__container .bcm-input-element{width:100%;color:var(--bcm-new-ds-color-slate-600);flex:1;border:none;background:transparent;box-shadow:unset;padding:0 4px;font-family:\"Inter\", sans-serif;cursor:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;text-overflow:ellipsis}.bcm-input__container .bcm-input-element::placeholder{font-family:\"Inter\", sans-serif;color:var(--bcm-new-ds-color-slate-300);user-select:none}.bcm-input__container .bcm-input-element::-webkit-search-decoration,.bcm-input__container .bcm-input-element::-webkit-search-cancel-button,.bcm-input__container .bcm-input-element::-webkit-search-results-button,.bcm-input__container .bcm-input-element::-webkit-search-results-decoration,.bcm-input__container .bcm-input-element::-webkit-calendar-picker-indicator,.bcm-input__container .bcm-input-element::-webkit-inner-spin-button,.bcm-input__container .bcm-input-element::-webkit-outer-spin-button{-webkit-appearance:none}.bcm-input__container .caret-container{width:30px;display:flex;flex-direction:column;justify-content:center;align-items:stretch;border-left:1px solid #D9D9D9;transition:0.2s opacity;user-select:none;box-sizing:border-box}.bcm-input__container .caret-container .bcm-input-caret{display:flex;align-items:center;justify-content:center;color:var(--bcm-color-grey-7);cursor:pointer;flex:1}.bcm-input__container .caret-container .bcm-input-caret bcm-icon{line-height:1}.bcm-input__container .caret-container .bcm-input-caret:hover{color:var(--bcm-color-prime-blue-6)}.bcm-input__container .caret-container .bcm-input-caret:active{background-color:var(--bcm-color-grey-3)}.bcm-input__container .caret-container .bcm-input-caret:last-child{border-top:1px solid #D9D9D9}.bcm-input__container .caret-container.disabled{background-color:var(--bcm-color-grey-3)}.bcm-input__container .caret-container.disabled .bcm-input-caret{cursor:not-allowed}.bcm-input__container .input-suffix-content{display:flex;align-items:center;justify-content:center}.bcm-input__container .input-prefix:not(:empty){padding-left:4px}.bcm-input__container .input-suffix:not(:empty){min-width:24px;padding-right:4px}.bcm-input__container .input-prefix:not(:empty),.bcm-input__container .input-suffix:not(:empty){display:flex;align-items:center;justify-content:center;cursor:default;color:#64748a}.bcm-input__container .input-prefix:not(:empty) .unit-prefix,.bcm-input__container .input-suffix:not(:empty) .unit-prefix{color:#64748a}.bcm-input__container .input-prefix-button:not(:empty),.bcm-input__container .input-suffix-button:not(:empty){cursor:pointer}.bcm-input__container .caret-container,.bcm-input__container .input-clear-button{opacity:0}.bcm-input__container--small{font-size:12px}.bcm-input__container--medium{font-size:14px}.bcm-input__container--large{font-size:16px}.bcm-input__textarea.clearable .bcm-input-element{padding-right:24px}.bcm-input__textarea .input-clear-button{position:absolute;top:4px;right:0}";
+const textareaStyle = ce({
+  slots: {
+    host: "bcm-textarea bcm-ui-element tw-inline-flex tw-flex-col tw-w-full tw-max-w-64 tw-mb-2 ",
+    base: "",
+    inputContainer: ["bcm-textarea__container", "tw-bg-color-base tw-border tw-border-solid tw-border-color tw-rounded", "tw-flex tw-items-center tw-justify-between tw-gap-2", "tw-pl-3", "tw-relative"],
+    input: [
+      "bcm-textarea-element tw-w-full tw-h-full tw-flex-1 tw-outline-none tw-bg-transparent tw-border-0 tw-appearance-none",
+      "tw-text-color placeholder:tw-text-color-placeholder placeholder:tw-font-normal",
+      "tw-font-sans tw-antialiased tw-font-medium",
+      "[appearance:textfield][&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none",
+    ],
+    slotClass: "tw-flex tw-items-center tw-justify-between tw-gap-2 empty:tw-hidden tw-text-color-placeholder",
+    clearButton: [
+      "clear-button tw-cursor-pointer tw-appearance-none tw-border-0 tw-text-color-placeholder tw-text-size-inherit tw-bg-transparent tw-py-1 tw-px-2 -tw-mx-2 tw-w-8 tw-flex tw-items-center tw-justify-center",
+      "hover:tw-text-color",
+      "tw-absolute tw-right-1 tw-top-0.5 "
+    ],
+  },
+  variants: {
+    size: {
+      small: {
+        host: "bcm-textarea__container--small",
+        inputContainer: "input2-size-small tw-min-h-6",
+        input: "tw-text-size-4 tw-min-h-6",
+      },
+      medium: {
+        host: "bcm-textarea__container--medium",
+        inputContainer: "input2-size-medium tw-min-h-8",
+        input: "tw-text-size-5 tw-min-h-8",
+      },
+      large: {
+        host: "bcm-textarea__container--large",
+        inputContainer: "input2-size-large tw-min-h-10",
+        input: "tw-text-size-6 tw-min-h-10",
+      },
+    },
+    fullWidth: {
+      true: {
+        host: "full-width tw-max-w-full",
+      },
+    },
+    noMargin: {
+      true: {
+        host: "no-margin tw-mb-0",
+      },
+    },
+    hidden: {
+      true: {
+        host: "hidden tw-hidden",
+      },
+    },
+    focused: {
+      true: {
+        host: "focused",
+      },
+    },
+    clearable: {
+      true: {
+        host: "clearable",
+      },
+    },
+    disabled: {
+      true: {
+        host: "disabled",
+        input: "",
+        inputContainer: "tw-bg-color-disabled tw-border-color-disabled tw-text-color-disabled tw-cursor-not-allowed",
+      },
+      false: {
+        inputContainer: ["has-[:not([disabled]):focus-visible]:tw-ring", "has-[:not([disabled]):hover]:tw-border-color-primaryInfo"],
+      },
+    },
+    readonly: {
+      true: {
+        host: "readonly",
+      },
+    },
+    invalid: {
+      true: {
+        host: "invalid",
+        inputContainer: "tw-border-color-error has-[:not([disabled]):focus-visible]:tw-ring-color-error has-[:not([disabled]):hover]:!tw-border-color-error",
+      },
+    },
+    error: {
+      true: {
+        host: "error",
+        inputContainer: "tw-border-color-error",
+      },
+    },
+    resize: {
+      vertical: {
+        input: "tw-resize-y",
+      },
+      horizontal: {
+        input: "tw-resize-x",
+      },
+      both: {
+        input: "tw-resize",
+      },
+      none: {
+        input: "tw-resize-none",
+      },
+    },
+  },
+  defaultVariants: {
+    size: "medium",
+    noMargin: false,
+    fullWidth: false,
+    hidden: false,
+    focused: false,
+    clearable: false,
+    disabled: false,
+    readonly: false,
+    invalid: false,
+    error: false,
+    resize: "vertical",
+  },
+});
 
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -44678,6 +45984,7 @@ const BcmTextarea = class {
     this.value = undefined;
     this.placeholder = undefined;
     this.label = undefined;
+    this.tooltip = undefined;
     this.name = undefined;
     this.required = false;
     this.caption = undefined;
@@ -44689,7 +45996,7 @@ const BcmTextarea = class {
     this.disabled = undefined;
     this.readonly = false;
     this.clearable = undefined;
-    this.resize = ResizeType.vertical;
+    this.resize = "vertical";
     this.fullWidth = false;
     this.maxLength = undefined;
     this.focused = false;
@@ -44766,12 +46073,22 @@ const BcmTextarea = class {
     e.stopPropagation();
   }
   render() {
-    const { _id, hidden, readonly, fullWidth, size, rows, disabled, clearable, label, focused, noCaption, caption, captionError, captionType, value, resize, maxLength, placeholder, required } = this;
-    const hostClasses = classnames('bcm-input', {
+    const { _id, hidden, readonly, fullWidth, size, rows, disabled, clearable, label, focused, noCaption, caption, captionError, captionType, value, resize, maxLength, placeholder, required, tooltip } = this;
+    const isActiveClearable = (value === null || value === void 0 ? void 0 : value.length) > 0 && clearable;
+    const { host, inputContainer, input, slotClass, clearButton } = textareaStyle({
+      size,
+      fullWidth,
+      // şüpheli kısımlar
+      focused: focused,
+      clearable: isActiveClearable,
+      disabled,
+      readonly,
+      // 'empty': value?.length < 1,
+      error: captionType === "error",
       hidden,
-      'full-width': fullWidth,
+      resize,
     });
-    return (h$2(Host, { class: hostClasses }, label && h$2("bcm-label", { type: captionType, value: label, required: required, htmlFor: _id }), h$2(InputTemplate, { elementType: Bcm$1.HtmlElementType.textarea, id: _id, value: value, rows: rows, disabled: disabled, maxLength: maxLength, placeholder: placeholder, clearable: clearable, resize: resize, readonly: readonly, size: size, focused: focused, handleFocus: () => this.handleFocus(), handleBlur: () => this.handleBlur(), handleChange: () => this.handleChange(), handleInput: () => this.handleInput(), handleClear: (e) => this.handleClear(e), ref: (el) => this.textarea = el, captionType: captionType }), h$2(CaptionTemplate, { noCaption: noCaption, captionType: captionType, captionError: captionError, caption: caption, value: value, maxLength: maxLength })));
+    return (h$2(Host, { class: host(), onClick: () => this.onBcmFocus() }, label && h$2("bcm-label", { tooltip: tooltip, type: captionType, value: label, required: required, htmlFor: _id }), h$2("div", { class: inputContainer(), id: _id + "-container" }, h$2("div", { class: slotClass() }, h$2("slot", { name: "prefix" })), h$2("textarea", { id: _id + "-input", value: value, rows: rows, disabled: disabled, maxLength: maxLength, placeholder: placeholder, class: input(), readonly: readonly, onInput: _event => this.handleInput(), onChange: _event => this.handleChange(), onFocus: _event => this.handleFocus(), onBlur: _event => this.handleBlur(), ref: (el) => this.textarea = el }), isActiveClearable && (h$2("button", { type: "button", class: clearButton(), onClick: event => this.handleClear(event) }, h$2("i", { class: "far fa-times" }))), h$2("div", { class: slotClass() }, h$2("slot", { name: "suffix" }))), h$2(CaptionTemplate, { noCaption: noCaption, captionType: captionType, captionError: captionError, caption: caption, value: value, maxLength: maxLength })));
   }
   get el() { return getElement(this); }
   static get watchers() { return {
@@ -44781,7 +46098,6 @@ const BcmTextarea = class {
 __decorate([
   IsLoad()
 ], BcmTextarea.prototype, "el", void 0);
-BcmTextarea.style = textareaCss;
 
 const BcmTooltip = class {
   constructor(hostRef) {
@@ -44793,7 +46109,7 @@ const BcmTooltip = class {
     this.placement = Bcm.Placement.top;
     this.trigger = Bcm.TriggerType.click;
     this.open = false;
-    this.color = "slate";
+    this.color = "gray";
     this.size = Bcm.Size.medium;
     this.openDelay = 0;
     this.closeDelay = 0;
@@ -44849,7 +46165,8 @@ const BcmTooltip = class {
     this.tooltip.toggle();
   }
   render() {
-    return (h$2(Host, { class: "tw-inline-flex tw-h-fit tw-w-fit", role: "tooltip" }, h$2("slot", null)));
+    const { host } = tooltipStyle();
+    return (h$2(Host, { class: host(), role: "tooltip" }, h$2("slot", null)));
   }
   get el() { return getElement(this); }
 };
@@ -46016,4 +47333,4 @@ const BcmTypography = class {
   get el() { return getElement(this); }
 };
 
-export { BcmAccordion as bcm_accordion, BcmAttendance as bcm_attendance, BcmAttendanceActions as bcm_attendance_actions, BcmAvatar as bcm_avatar, BcmBadge as bcm_badge, BcmButton as bcm_button, BcmButtonGroup as bcm_button_group, BcmCheckbox as bcm_checkbox, BcmCheckboxGroup as bcm_checkbox_group, BcmCheckboxLite as bcm_checkbox_lite, BcmChip as bcm_chip, BcmCollapse as bcm_collapse, BcmCollapseGroup as bcm_collapse_group, BcmColorInput as bcm_color_input, BcmColorful as bcm_colorful, BcmDate as bcm_date, BcmDivider as bcm_divider, BcmDrawer as bcm_drawer, BcmDropdown as bcm_dropdown, BcmEmpty as bcm_empty, BcmExpansionPanel as bcm_expansion_panel, BcmForm as bcm_form, BcmIcon as bcm_icon, BcmInput as bcm_input, BcmItem as bcm_item, BcmItems as bcm_items, BcmLabel as bcm_label, BcmLink as bcm_link, BcmLinked as bcm_linked, BcmList as bcm_list, BcmListbox as bcm_listbox, BcmListboxGroup as bcm_listbox_group, BcmListboxItem as bcm_listbox_item, BcmMenu as bcm_menu, BcmModal as bcm_modal, BcmOldInput as bcm_old_input, BcmOldSearch as bcm_old_search, BcmOldTag as bcm_old_tag, BcmPopconfirm as bcm_popconfirm, BcmPopconfirmBox as bcm_popconfirm_box, BcmProgress as bcm_progress, BcmRadio as bcm_radio, BcmRadioGroup as bcm_radio_group, BcmRcOverflow as bcm_rc_overflow, BcmRcPicker as bcm_rc_picker, BcmSearch as bcm_search, BcmSelect as bcm_select, BcmSelectBox as bcm_select_box, BcmShortcut as bcm_shortcut, BcmStep as bcm_step, BcmStepper as bcm_stepper, BcmSwitch as bcm_switch, BcmTab as bcm_tab, BcmTabGroup as bcm_tab_group, BcmTabItem as bcm_tab_item, BcmTabItemHeader as bcm_tab_item_header, BcmTabs as bcm_tabs, BcmText as bcm_text, BcmTextarea as bcm_textarea, BcmTooltip as bcm_tooltip, Bcmtreeview as bcm_treeview, BcmtreeviewItem as bcm_treeview_item, BcmTypography as bcm_typography };
+export { BcmAccordion as bcm_accordion, BcmAttendance as bcm_attendance, BcmAttendanceActions as bcm_attendance_actions, BcmAvatar as bcm_avatar, BcmBadge as bcm_badge, BcmButton as bcm_button, BcmButtonGroup as bcm_button_group, BcmCheckbox as bcm_checkbox, BcmCheckboxGroup as bcm_checkbox_group, BcmChip as bcm_chip, BcmCollapse as bcm_collapse, BcmCollapseGroup as bcm_collapse_group, BcmColorInput as bcm_color_input, BcmColorful as bcm_colorful, BcmDate as bcm_date, BcmDivider as bcm_divider, BcmDrawer as bcm_drawer, BcmDropdown as bcm_dropdown, BcmEmpty as bcm_empty, BcmExpansionPanel as bcm_expansion_panel, BcmExpansionPanelDescription as bcm_expansion_panel_description, BcmExpansionPanelExtra as bcm_expansion_panel_extra, BcmExpansionPanelHeader as bcm_expansion_panel_header, BcmForm as bcm_form, BcmIcon as bcm_icon, BcmInput as bcm_input, BcmItem as bcm_item, BcmItems as bcm_items, BcmLabel as bcm_label, BcmLink as bcm_link, BcmLinked as bcm_linked, BcmList as bcm_list, BcmListbox as bcm_listbox, BcmListboxGroup as bcm_listbox_group, BcmListboxItem as bcm_listbox_item, BcmMenu as bcm_menu, BcmModal as bcm_modal, BcmModalFooter as bcm_modal_footer, BcmModalHeader as bcm_modal_header, BcmOldInput as bcm_old_input, BcmOldSearch as bcm_old_search, BcmOldTag as bcm_old_tag, BcmPopconfirm as bcm_popconfirm, BcmPopconfirmBox as bcm_popconfirm_box, BcmPopover as bcm_popover, BcmProgress as bcm_progress, BcmRadio as bcm_radio, BcmRadioGroup as bcm_radio_group, BcmRcOverflow as bcm_rc_overflow, BcmRcPicker as bcm_rc_picker, BcmSearch as bcm_search, BcmSelect as bcm_select, BcmSelectBox as bcm_select_box, BcmShortcut as bcm_shortcut, BcmStep as bcm_step, BcmStepper as bcm_stepper, BcmSwitch as bcm_switch, BcmTab as bcm_tab, BcmTabGroup as bcm_tab_group, BcmTabItem as bcm_tab_item, BcmTabItemHeader as bcm_tab_item_header, BcmTabs as bcm_tabs, BcmText as bcm_text, BcmTextarea as bcm_textarea, BcmTooltip as bcm_tooltip, Bcmtreeview as bcm_treeview, BcmtreeviewItem as bcm_treeview_item, BcmTypography as bcm_typography };