bromcom-ui 2.8.0-rc.0 → 2.8.0-rc.10-t

package/dist/components/generate.js

@@ -3,6 +3,7 @@
  * Copyright (c) Bromcom.
  */
 import { Build } from '@stencil/core/internal/client';
+import { c as colors } from './colors2.js';
 
 /**
  * 'status' prop predefined values
@@ -24,7 +25,7 @@ var TypeProps;
   TypeProps["basic"] = "basic";
 })(TypeProps || (TypeProps = {}));
 
-const version = "2.8.0-rc.0";
+const version = "2.8.0-rc.10-t";
 
 function snq(callback, defaultValue) {
     try {
@@ -72,6 +73,17 @@ class Generate {
     });
     observer.observe(document.documentElement, { childList: true, subtree: true });
   }
+  static getTwColor(color, variable = "--bcm-color-default") {
+    if (!color || !colors[color]) {
+      return false;
+    }
+    const colorObj = colors[color];
+    const result = {};
+    for (const [key, value] of Object.entries(colorObj)) {
+      result[`${variable}-${key}`] = value;
+    }
+    return result;
+  }
 }
 Generate.UID = (prefix = "bcm") => `${prefix}${Math.random().toString(36).substr(2, 9)}`;
 Generate.getIconAttrWithStatusType = (status, loading = false) => {

package/dist/components/index.d.ts

@@ -5,7 +5,7 @@ export { BcmAttendance as BcmAttendance } from '../types/components/other/attend
 export { BcmAutocomplete as BcmAutocomplete } from '../types/components/organism/autocomplete/autocomplete';
 export { BcmAvatar as BcmAvatar } from '../types/components/atoms/avatar/avatar';
 export { BcmBadge as BcmBadge } from '../types/components/atoms/badge/badge';
-export { BcmBox as BcmBox } from '../types/components/atoms/box/box';
+export { BcmBox as BcmBox } from '../types/components/other/box/box';
 export { BcmBreadcrumb as BcmBreadcrumb } from '../types/components/molecules/breadcrumb/breadcrumb';
 export { BcmButton as BcmButton } from '../types/components/atoms/button/button';
 export { BcmButtonGroup as BcmButtonGroup } from '../types/components/molecules/button-group/button-group';
@@ -46,18 +46,23 @@ export { BcmListboxItem as BcmListboxItem } from '../types/components/other_depr
 export { BcmMenu as BcmMenu } from '../types/components/molecules/menu/menu';
 export { BcmMessage as BcmMessage } from '../types/components/molecules/message/message';
 export { BcmModal as BcmModal } from '../types/components/molecules/modal/modal';
+export { BcmModal2 as BcmModal2 } from '../types/components/other/modal-2/modal-2';
+export { BcmModal2Footer as BcmModal2Footer } from '../types/components/other/modal-2/modal-2-footer';
+export { BcmModal2Header as BcmModal2Header } from '../types/components/other/modal-2/modal-2-header';
 export { BcmNotification as BcmNotification } from '../types/components/molecules/notification/notification';
 export { BcmOldInput as BcmOldInput } from '../types/components/other_deprecated/old-input/old-input';
 export { BcmOldSearch as BcmOldSearch } from '../types/components/other_deprecated/old-search/old-search';
 export { BcmOldTag as BcmOldTag } from '../types/components/other_deprecated/old-tag/old-tag';
+export { BcmOverlay as BcmOverlay } from '../types/components/other/overlay/overlay';
 export { BcmPopconfirm as BcmPopconfirm } from '../types/components/molecules/popconfirm/popconfirm';
 export { BcmPopconfirmBox as BcmPopconfirmBox } from '../types/components/molecules/popconfirm/popconfirm-box';
 export { BcmPopover as BcmPopover } from '../types/components/molecules/popover/popover';
 export { BcmProgress as BcmProgress } from '../types/components/molecules/progress/progress';
 export { BcmRadio as BcmRadio } from '../types/components/molecules/radio/radio';
-export { BcmRadioGroup as BcmRadioGroup } from '../types/components/molecules/radio/group';
+export { BcmRadioGroup as BcmRadioGroup } from '../types/components/molecules/radio/radio-group';
 export { BcmRange as BcmRange } from '../types/components/molecules/range/range';
 export { BcmResult as BcmResult } from '../types/components/molecules/result/result';
+export { BcmScrollArea as BcmScrollArea } from '../types/components/other/scroll-area/scroll-area';
 export { BcmSearch as BcmSearch } from '../types/components/molecules/search/search';
 export { BcmSelect as BcmSelect } from '../types/components/other_deprecated/select/select';
 export { BcmSelectBox as BcmSelectBox } from '../types/components/other_deprecated/select/select-box';
@@ -75,7 +80,7 @@ export { BcmTabPane as BcmTabPane } from '../types/components/other_deprecated/t
 export { BcmTable as BcmTable } from '../types/components/other/data-table/table';
 export { BcmTabs as BcmTabs } from '../types/components/other_deprecated/tabs/tabs';
 export { BcmTabsContent as BcmTabsContent } from '../types/components/other_deprecated/tabs/tabs-content';
-export { BcmTag as BcmTag } from '../types/components/atoms/tag/tag';
+export { BcmTag as BcmTag } from '../types/components/other_deprecated/tag/tag';
 export { BcmText as BcmText } from '../types/components/other_deprecated/text/text';
 export { BcmTextarea as BcmTextarea } from '../types/components/molecules/textarea/textarea';
 export { BcmTimePicker as BcmTimePicker } from '../types/components/organism/time-picker/time-picker';
@@ -86,7 +91,7 @@ export { BcmTooltip as BcmTooltip } from '../types/components/molecules/tooltip/
 export { Bcmtreeview as BcmTreeview } from '../types/components/other_deprecated/treeview/treeview';
 export { BcmtreeviewGroup as BcmTreeviewGroup } from '../types/components/other_deprecated/treeview/treeview-group';
 export { BcmtreeviewItem as BcmTreeviewItem } from '../types/components/other_deprecated/treeview/treeview-item';
-export { BcmTypography as BcmTypography } from '../types/components/atoms/typography/typography';
+export { BcmTypography as BcmTypography } from '../types/components/other/typography/typography';
 export { OldBcmPopover as OldBcmPopover } from '../types/components/other_deprecated/old-popover/old-popover';
 export { OldBcmPopoverBox as OldBcmPopoverBox } from '../types/components/other_deprecated/old-popover/old-popover-box';
 
@@ -102,6 +107,15 @@ export { OldBcmPopoverBox as OldBcmPopoverBox } from '../types/components/other_
  */
 export declare const setAssetPath: (path: string) => void;
 
+/**
+ * Used to specify a nonce value that corresponds with an application's CSP.
+ * When set, the nonce will be added to all dynamically created script and style tags at runtime.
+ * Alternatively, the nonce value can be set on a meta tag in the DOM head
+ * (<meta name="csp-nonce" content="{ nonce value here }" />) which
+ * will result in the same behavior.
+ */
+export declare const setNonce: (nonce: string) => void
+
 export interface SetPlatformOptions {
   raf?: (c: FrameRequestCallback) => number;
   ael?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;

package/dist/components/index.js

@@ -2,7 +2,7 @@
  * Built with Stencil
  * Copyright (c) Bromcom.
  */
-export { setAssetPath, setPlatformOptions } from '@stencil/core/internal/client';
+export { setAssetPath, setNonce, setPlatformOptions } from '@stencil/core/internal/client';
 export { BcmAccordion, defineCustomElement as defineCustomElementBcmAccordion } from './bcm-accordion.js';
 export { BcmAlert, defineCustomElement as defineCustomElementBcmAlert } from './bcm-alert.js';
 export { BcmAttendance, defineCustomElement as defineCustomElementBcmAttendance } from './bcm-attendance.js';
@@ -50,10 +50,14 @@ export { BcmListboxItem, defineCustomElement as defineCustomElementBcmListboxIte
 export { BcmMenu, defineCustomElement as defineCustomElementBcmMenu } from './bcm-menu.js';
 export { BcmMessage, defineCustomElement as defineCustomElementBcmMessage } from './bcm-message.js';
 export { BcmModal, defineCustomElement as defineCustomElementBcmModal } from './bcm-modal.js';
+export { BcmModal2, defineCustomElement as defineCustomElementBcmModal2 } from './bcm-modal-2.js';
+export { BcmModal2Footer, defineCustomElement as defineCustomElementBcmModal2Footer } from './bcm-modal-2-footer.js';
+export { BcmModal2Header, defineCustomElement as defineCustomElementBcmModal2Header } from './bcm-modal-2-header.js';
 export { BcmNotification, defineCustomElement as defineCustomElementBcmNotification } from './bcm-notification.js';
 export { BcmOldInput, defineCustomElement as defineCustomElementBcmOldInput } from './bcm-old-input.js';
 export { BcmOldSearch, defineCustomElement as defineCustomElementBcmOldSearch } from './bcm-old-search.js';
 export { BcmOldTag, defineCustomElement as defineCustomElementBcmOldTag } from './bcm-old-tag.js';
+export { BcmOverlay, defineCustomElement as defineCustomElementBcmOverlay } from './bcm-overlay.js';
 export { BcmPopconfirm, defineCustomElement as defineCustomElementBcmPopconfirm } from './bcm-popconfirm.js';
 export { BcmPopconfirmBox, defineCustomElement as defineCustomElementBcmPopconfirmBox } from './bcm-popconfirm-box.js';
 export { BcmPopover, defineCustomElement as defineCustomElementBcmPopover } from './bcm-popover.js';
@@ -62,6 +66,7 @@ export { BcmRadio, defineCustomElement as defineCustomElementBcmRadio } from './
 export { BcmRadioGroup, defineCustomElement as defineCustomElementBcmRadioGroup } from './bcm-radio-group.js';
 export { BcmRange, defineCustomElement as defineCustomElementBcmRange } from './bcm-range.js';
 export { BcmResult, defineCustomElement as defineCustomElementBcmResult } from './bcm-result.js';
+export { BcmScrollArea, defineCustomElement as defineCustomElementBcmScrollArea } from './bcm-scroll-area.js';
 export { BcmSearch, defineCustomElement as defineCustomElementBcmSearch } from './bcm-search.js';
 export { BcmSelect, defineCustomElement as defineCustomElementBcmSelect } from './bcm-select.js';
 export { BcmSelectBox, defineCustomElement as defineCustomElementBcmSelectBox } from './bcm-select-box.js';

package/dist/components/index2.js

@@ -6,9 +6,9 @@ import { c as createCommonjsModule } from './_commonjsHelpers.js';
 
 var classnames = createCommonjsModule(function (module) {
 /*!
-  Copyright (c) 2018 Jed Watson.
-  Licensed under the MIT License (MIT), see
-  http://jedwatson.github.io/classnames
+	Copyright (c) 2018 Jed Watson.
+	Licensed under the MIT License (MIT), see
+	http://jedwatson.github.io/classnames
 */
 /* global define */
 
@@ -35,14 +35,15 @@ var classnames = createCommonjsModule(function (module) {
 					}
 				}
 			} else if (argType === 'object') {
-				if (arg.toString === Object.prototype.toString) {
-					for (var key in arg) {
-						if (hasOwn.call(arg, key) && arg[key]) {
-							classes.push(key);
-						}
-					}
-				} else {
+				if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {
 					classes.push(arg.toString());
+					continue;
+				}
+
+				for (var key in arg) {
+					if (hasOwn.call(arg, key) && arg[key]) {
+						classes.push(key);
+					}
 				}
 			}
 		}

package/dist/components/input.js

@@ -153,7 +153,8 @@ const BcmInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   async getValue() {
     return this.value;
   }
-  watchValue() {
+  watchValue(newValue) {
+    this.inputElement.value = newValue;
     if (!this.disableWatchValue && this.type != "number") {
       this.handleChange();
     }

package/dist/components/is-load-decorator.js

@@ -20,8 +20,6 @@ function registerAttrReflect(element) {
     let io = new IntersectionObserver((data) => {
       if (data[0].isIntersecting) {
         isIntersecting(element);
-        io.disconnect();
-        io = null;
       }
     });
     io.observe(element);

package/dist/components/linked.js

@@ -3,16 +3,16 @@
  * Copyright (c) Bromcom.
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { a as Bcm } from './bcm.js';
-import './element-dragger.js';
-import './string-helper.js';
-import { d as delay } from './utils.js';
-import { F as FloatingUI } from './floating-ui.js';
+import { I as IsLoad } from './is-load-decorator.js';
 import './color-helper.js';
 import './validators.js';
 import { G as Generate } from './generate.js';
 import './number-helper.js';
-import { I as IsLoad } from './is-load-decorator.js';
+import './string-helper.js';
+import './element-dragger.js';
+import { d as delay } from './utils.js';
+import { F as FloatingUI } from './floating-ui.js';
+import { a as Bcm } from './bcm.js';
 
 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;
@@ -37,6 +37,8 @@ const BcmLinked = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.maxHeight = undefined;
     this.minHeight = "50px";
     this.isOpen = false;
+    this.hideDelay = 500;
+    this.isMouseOverLink = false;
   }
   target() {
     const target = document.querySelectorAll(`[id="${this.targetId}"]`);
@@ -88,6 +90,7 @@ const BcmLinked = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   init() {
     const target = this.target();
+    this.trigger === Bcm.TriggerType.hover && this.listenMouseOver();
     if (target) {
       target.setAttribute("is-linked", this.el.id);
       if (!Generate.getAncestor(target, "bcm-linked")) {
@@ -102,8 +105,15 @@ const BcmLinked = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.init();
     document.body.appendChild(this.el);
   }
+  triggerWatch(newValue) {
+    if (newValue === Bcm.TriggerType.hover) {
+      this.listenMouseOver();
+    }
+  }
+  watchIsOpen() {
+    this.bcmOpen.emit(this.isOpen);
+  }
   onLinkedDataDismis() {
-    // console.log('onLinkedDataDismis');
     this.hide(false);
   }
   onBcmFloatingIsHide(e) {
@@ -128,6 +138,7 @@ const BcmLinked = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   async hide(wait = true) {
     wait && (await delay(50));
     const target = this.target();
+    this.isMouseOverLink = false;
     if (target) {
       target.removeAttribute("linked-is-open");
       this.hideChildLinked();
@@ -141,6 +152,8 @@ const BcmLinked = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   clickListener(e) {
     if (!this.target())
       return;
+    if (this.trigger === Bcm.TriggerType.hover)
+      return;
     const isTarget = Generate.findEventPath(e, this.target());
     const isSelf = Generate.findEventPath(e, this.el);
     const isLinked = Generate.findEventPathWithNodeName(e, "BCM-LINKED");
@@ -169,15 +182,33 @@ const BcmLinked = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   wheelListener() {
     this.calculatePosition();
   }
-  watchIsOpen() {
-    this.bcmOpen.emit(this.isOpen);
+  listenMouseOver() {
+    var _a, _b;
+    this.el.addEventListener("mouseover", () => (this.isMouseOverLink = true));
+    this.el.addEventListener("mouseleave", () => {
+      this.isMouseOverLink = false;
+      this.handleMouseLeave();
+    });
+    (_a = this.target()) === null || _a === void 0 ? void 0 : _a.addEventListener("mouseenter", this.handleMouseEnter.bind(this));
+    (_b = this.target()) === null || _b === void 0 ? void 0 : _b.addEventListener("mouseleave", this.handleMouseLeave.bind(this));
+  }
+  handleMouseLeave() {
+    setTimeout(() => {
+      !this.isMouseOverLink && this.hide();
+    }, this.hideDelay);
+  }
+  handleMouseEnter() {
+    clearTimeout(this.timeoutId);
+    this.isMouseOverLink = false;
+    this.show();
   }
   render() {
     const openStyle = this.isOpen ? { visibility: "visible", opacity: "1" } : { visibility: "hidden", opacity: "0" };
-    return (h(Host, { class: "tw-invisible tw-absolute tw-top-0 tw-left-0 tw-z-tooltip  tw-block tw-overscroll-contain  tw-scroll-smooth tw-rounded tw-bg-white  tw-opacity-0 tw-shadow tw-transition-opacity tw-duration-100", style: Object.assign(Object.assign({}, openStyle), { overflow: "auto" }) }, h("slot", null)));
+    return (h(Host, { class: "tw-invisible tw-absolute tw-left-0 tw-top-0 tw-z-tooltip  tw-block tw-overscroll-contain  tw-scroll-smooth tw-rounded tw-bg-white  tw-opacity-0 tw-shadow tw-transition-opacity tw-duration-100", style: Object.assign(Object.assign({}, openStyle), { overflow: "auto" }) }, h("slot", null)));
   }
   get el() { return this; }
   static get watchers() { return {
+    "trigger": ["triggerWatch"],
     "isOpen": ["watchIsOpen"]
   }; }
 }, [4, "bcm-linked", {
@@ -189,6 +220,8 @@ const BcmLinked = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "maxHeight": [1, "max-height"],
     "minHeight": [1, "min-height"],
     "isOpen": [1540, "is-open"],
+    "hideDelay": [2, "hide-delay"],
+    "isMouseOverLink": [32],
     "show": [64],
     "hide": [64],
     "toggle": [64]

package/dist/components/overlay.js

@@ -0,0 +1,47 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { c as classnames } from './index2.js';
+import { c as colors } from './colors2.js';
+
+const BcmOverlay = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.center = false;
+    this.color = colors.black;
+    this.opacity = "0.5";
+    this.zIndex = "10400";
+  }
+  render() {
+    return (h(Host, { class: classnames("tw-fixed tw-inset-0 tw-transition", {
+        "tw-flex tw-items-center tw-justify-center": this.center,
+      }), style: {
+        backgroundColor: `${this.color}`,
+        opacity: this.opacity,
+        zIndex: this.zIndex,
+      } }, h("slot", null)));
+  }
+}, [4, "bcm-overlay", {
+    "center": [4],
+    "color": [1],
+    "opacity": [1],
+    "zIndex": [1, "z-index"]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["bcm-overlay"];
+  components.forEach(tagName => { switch (tagName) {
+    case "bcm-overlay":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, BcmOverlay);
+      }
+      break;
+  } });
+}
+
+export { BcmOverlay as B, defineCustomElement as d };

package/dist/components/radio.js

@@ -3,106 +3,62 @@
  * Copyright (c) Bromcom.
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { c as classnames } from './index2.js';
-import { I as IsLoad } from './is-load-decorator.js';
-import { C as ColorHelper } from './color-helper.js';
+import { a as Bcm } from './bcm.js';
+import './color-helper.js';
+import './validators.js';
 import { G as Generate } from './generate.js';
-import { B as Bcm } from './bcm.js';
-import { S as SlotTemplate } from './slot-template.js';
-
-const radioCss = "@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\"); @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}:root,::after,::before{--bcm-new-ds-color-inherit:inherit;--bcm-new-ds-color-current:currentColor;--bcm-new-ds-color-transparent:transparent;--bcm-new-ds-color-black:#000;--bcm-new-ds-color-white:#fff;--bcm-new-ds-color-slate:#64748b;--bcm-new-ds-color-slate-50:#f8fafc;--bcm-new-ds-color-slate-100:#f1f5f9;--bcm-new-ds-color-slate-200:#e2e8f0;--bcm-new-ds-color-slate-300:#cbd5e1;--bcm-new-ds-color-slate-400:#94a3b8;--bcm-new-ds-color-slate-500:#64748b;--bcm-new-ds-color-slate-600:#475569;--bcm-new-ds-color-slate-700:#334155;--bcm-new-ds-color-slate-800:#1e293b;--bcm-new-ds-color-slate-900:#0f172a;--bcm-new-ds-color-gray:#6b7280;--bcm-new-ds-color-gray-50:#f9fafb;--bcm-new-ds-color-gray-100:#f3f4f6;--bcm-new-ds-color-gray-200:#e5e7eb;--bcm-new-ds-color-gray-300:#d1d5db;--bcm-new-ds-color-gray-400:#9ca3af;--bcm-new-ds-color-gray-500:#6b7280;--bcm-new-ds-color-gray-600:#4b5563;--bcm-new-ds-color-gray-700:#374151;--bcm-new-ds-color-gray-800:#1f2937;--bcm-new-ds-color-gray-900:#111827;--bcm-new-ds-color-zinc:#71717a;--bcm-new-ds-color-zinc-50:#fafafa;--bcm-new-ds-color-zinc-100:#f4f4f5;--bcm-new-ds-color-zinc-200:#e4e4e7;--bcm-new-ds-color-zinc-300:#d4d4d8;--bcm-new-ds-color-zinc-400:#a1a1aa;--bcm-new-ds-color-zinc-500:#71717a;--bcm-new-ds-color-zinc-600:#52525b;--bcm-new-ds-color-zinc-700:#3f3f46;--bcm-new-ds-color-zinc-800:#27272a;--bcm-new-ds-color-zinc-900:#18181b;--bcm-new-ds-color-neutral:#737373;--bcm-new-ds-color-neutral-50:#fafafa;--bcm-new-ds-color-neutral-100:#f5f5f5;--bcm-new-ds-color-neutral-200:#e5e5e5;--bcm-new-ds-color-neutral-300:#d4d4d4;--bcm-new-ds-color-neutral-400:#a3a3a3;--bcm-new-ds-color-neutral-500:#737373;--bcm-new-ds-color-neutral-600:#525252;--bcm-new-ds-color-neutral-700:#404040;--bcm-new-ds-color-neutral-800:#262626;--bcm-new-ds-color-neutral-900:#171717;--bcm-new-ds-color-stone:#78716c;--bcm-new-ds-color-stone-50:#fafaf9;--bcm-new-ds-color-stone-100:#f5f5f4;--bcm-new-ds-color-stone-200:#e7e5e4;--bcm-new-ds-color-stone-300:#d6d3d1;--bcm-new-ds-color-stone-400:#a8a29e;--bcm-new-ds-color-stone-500:#78716c;--bcm-new-ds-color-stone-600:#57534e;--bcm-new-ds-color-stone-700:#44403c;--bcm-new-ds-color-stone-800:#292524;--bcm-new-ds-color-stone-900:#1c1917;--bcm-new-ds-color-red:#ef4444;--bcm-new-ds-color-red-50:#fef2f2;--bcm-new-ds-color-red-100:#fee2e2;--bcm-new-ds-color-red-200:#fecaca;--bcm-new-ds-color-red-300:#fca5a5;--bcm-new-ds-color-red-400:#f87171;--bcm-new-ds-color-red-500:#ef4444;--bcm-new-ds-color-red-600:#dc2626;--bcm-new-ds-color-red-700:#b91c1c;--bcm-new-ds-color-red-800:#991b1b;--bcm-new-ds-color-red-900:#7f1d1d;--bcm-new-ds-color-orange:#f97316;--bcm-new-ds-color-orange-50:#fff7ed;--bcm-new-ds-color-orange-100:#ffedd5;--bcm-new-ds-color-orange-200:#fed7aa;--bcm-new-ds-color-orange-300:#fdba74;--bcm-new-ds-color-orange-400:#fb923c;--bcm-new-ds-color-orange-500:#f97316;--bcm-new-ds-color-orange-600:#ea580c;--bcm-new-ds-color-orange-700:#c2410c;--bcm-new-ds-color-orange-800:#9a3412;--bcm-new-ds-color-orange-900:#7c2d12;--bcm-new-ds-color-amber:#f59e0b;--bcm-new-ds-color-amber-50:#fffbeb;--bcm-new-ds-color-amber-100:#fef3c7;--bcm-new-ds-color-amber-200:#fde68a;--bcm-new-ds-color-amber-300:#fcd34d;--bcm-new-ds-color-amber-400:#fbbf24;--bcm-new-ds-color-amber-500:#f59e0b;--bcm-new-ds-color-amber-600:#d97706;--bcm-new-ds-color-amber-700:#b45309;--bcm-new-ds-color-amber-800:#92400e;--bcm-new-ds-color-amber-900:#78350f;--bcm-new-ds-color-yellow:#eab308;--bcm-new-ds-color-yellow-50:#fefce8;--bcm-new-ds-color-yellow-100:#fef9c3;--bcm-new-ds-color-yellow-200:#fef08a;--bcm-new-ds-color-yellow-300:#fde047;--bcm-new-ds-color-yellow-400:#facc15;--bcm-new-ds-color-yellow-500:#eab308;--bcm-new-ds-color-yellow-600:#ca8a04;--bcm-new-ds-color-yellow-700:#a16207;--bcm-new-ds-color-yellow-800:#854d0e;--bcm-new-ds-color-yellow-900:#713f12;--bcm-new-ds-color-lime:#84cc16;--bcm-new-ds-color-lime-50:#f7fee7;--bcm-new-ds-color-lime-100:#ecfccb;--bcm-new-ds-color-lime-200:#d9f99d;--bcm-new-ds-color-lime-300:#bef264;--bcm-new-ds-color-lime-400:#a3e635;--bcm-new-ds-color-lime-500:#84cc16;--bcm-new-ds-color-lime-600:#65a30d;--bcm-new-ds-color-lime-700:#4d7c0f;--bcm-new-ds-color-lime-800:#3f6212;--bcm-new-ds-color-lime-900:#365314;--bcm-new-ds-color-green:#22c55e;--bcm-new-ds-color-green-50:#f0fdf4;--bcm-new-ds-color-green-100:#dcfce7;--bcm-new-ds-color-green-200:#bbf7d0;--bcm-new-ds-color-green-300:#86efac;--bcm-new-ds-color-green-400:#4ade80;--bcm-new-ds-color-green-500:#22c55e;--bcm-new-ds-color-green-600:#16a34a;--bcm-new-ds-color-green-700:#15803d;--bcm-new-ds-color-green-800:#166534;--bcm-new-ds-color-green-900:#14532d;--bcm-new-ds-color-emerald:#10b981;--bcm-new-ds-color-emerald-50:#ecfdf5;--bcm-new-ds-color-emerald-100:#d1fae5;--bcm-new-ds-color-emerald-200:#a7f3d0;--bcm-new-ds-color-emerald-300:#6ee7b7;--bcm-new-ds-color-emerald-400:#34d399;--bcm-new-ds-color-emerald-500:#10b981;--bcm-new-ds-color-emerald-600:#059669;--bcm-new-ds-color-emerald-700:#047857;--bcm-new-ds-color-emerald-800:#065f46;--bcm-new-ds-color-emerald-900:#064e3b;--bcm-new-ds-color-teal:#14b8a6;--bcm-new-ds-color-teal-50:#f0fdfa;--bcm-new-ds-color-teal-100:#ccfbf1;--bcm-new-ds-color-teal-200:#99f6e4;--bcm-new-ds-color-teal-300:#5eead4;--bcm-new-ds-color-teal-400:#2dd4bf;--bcm-new-ds-color-teal-500:#14b8a6;--bcm-new-ds-color-teal-600:#0d9488;--bcm-new-ds-color-teal-700:#0f766e;--bcm-new-ds-color-teal-800:#115e59;--bcm-new-ds-color-teal-900:#134e4a;--bcm-new-ds-color-cyan:#06b6d4;--bcm-new-ds-color-cyan-50:#ecfeff;--bcm-new-ds-color-cyan-100:#cffafe;--bcm-new-ds-color-cyan-200:#a5f3fc;--bcm-new-ds-color-cyan-300:#67e8f9;--bcm-new-ds-color-cyan-400:#22d3ee;--bcm-new-ds-color-cyan-500:#06b6d4;--bcm-new-ds-color-cyan-600:#0891b2;--bcm-new-ds-color-cyan-700:#0e7490;--bcm-new-ds-color-cyan-800:#155e75;--bcm-new-ds-color-cyan-900:#164e63;--bcm-new-ds-color-sky:#0ea5e9;--bcm-new-ds-color-sky-50:#f0f9ff;--bcm-new-ds-color-sky-100:#e0f2fe;--bcm-new-ds-color-sky-200:#bae6fd;--bcm-new-ds-color-sky-300:#7dd3fc;--bcm-new-ds-color-sky-400:#38bdf8;--bcm-new-ds-color-sky-500:#0ea5e9;--bcm-new-ds-color-sky-600:#0284c7;--bcm-new-ds-color-sky-700:#0369a1;--bcm-new-ds-color-sky-800:#075985;--bcm-new-ds-color-sky-900:#0c4a6e;--bcm-new-ds-color-blue:#3b82f6;--bcm-new-ds-color-blue-50:#eff6ff;--bcm-new-ds-color-blue-100:#dbeafe;--bcm-new-ds-color-blue-200:#bfdbfe;--bcm-new-ds-color-blue-300:#93c5fd;--bcm-new-ds-color-blue-400:#60a5fa;--bcm-new-ds-color-blue-500:#3b82f6;--bcm-new-ds-color-blue-600:#2563eb;--bcm-new-ds-color-blue-700:#1d4ed8;--bcm-new-ds-color-blue-800:#1e40af;--bcm-new-ds-color-blue-900:#1e3a8a;--bcm-new-ds-color-indigo:#6366f1;--bcm-new-ds-color-indigo-50:#eef2ff;--bcm-new-ds-color-indigo-100:#e0e7ff;--bcm-new-ds-color-indigo-200:#c7d2fe;--bcm-new-ds-color-indigo-300:#a5b4fc;--bcm-new-ds-color-indigo-400:#818cf8;--bcm-new-ds-color-indigo-500:#6366f1;--bcm-new-ds-color-indigo-600:#4f46e5;--bcm-new-ds-color-indigo-700:#4338ca;--bcm-new-ds-color-indigo-800:#3730a3;--bcm-new-ds-color-indigo-900:#312e81;--bcm-new-ds-color-violet:#8b5cf6;--bcm-new-ds-color-violet-50:#f5f3ff;--bcm-new-ds-color-violet-100:#ede9fe;--bcm-new-ds-color-violet-200:#ddd6fe;--bcm-new-ds-color-violet-300:#c4b5fd;--bcm-new-ds-color-violet-400:#a78bfa;--bcm-new-ds-color-violet-500:#8b5cf6;--bcm-new-ds-color-violet-600:#7c3aed;--bcm-new-ds-color-violet-700:#6d28d9;--bcm-new-ds-color-violet-800:#5b21b6;--bcm-new-ds-color-violet-900:#4c1d95;--bcm-new-ds-color-purple:#a855f7;--bcm-new-ds-color-purple-50:#faf5ff;--bcm-new-ds-color-purple-100:#f3e8ff;--bcm-new-ds-color-purple-200:#e9d5ff;--bcm-new-ds-color-purple-300:#d8b4fe;--bcm-new-ds-color-purple-400:#c084fc;--bcm-new-ds-color-purple-500:#a855f7;--bcm-new-ds-color-purple-600:#9333ea;--bcm-new-ds-color-purple-700:#7e22ce;--bcm-new-ds-color-purple-800:#6b21a8;--bcm-new-ds-color-purple-900:#581c87;--bcm-new-ds-color-fuchsia:#d946ef;--bcm-new-ds-color-fuchsia-50:#fdf4ff;--bcm-new-ds-color-fuchsia-100:#fae8ff;--bcm-new-ds-color-fuchsia-200:#f5d0fe;--bcm-new-ds-color-fuchsia-300:#f0abfc;--bcm-new-ds-color-fuchsia-400:#e879f9;--bcm-new-ds-color-fuchsia-500:#d946ef;--bcm-new-ds-color-fuchsia-600:#c026d3;--bcm-new-ds-color-fuchsia-700:#a21caf;--bcm-new-ds-color-fuchsia-800:#86198f;--bcm-new-ds-color-fuchsia-900:#701a75;--bcm-new-ds-color-pink:#ec4899;--bcm-new-ds-color-pink-50:#fdf2f8;--bcm-new-ds-color-pink-100:#fce7f3;--bcm-new-ds-color-pink-200:#fbcfe8;--bcm-new-ds-color-pink-300:#f9a8d4;--bcm-new-ds-color-pink-400:#f472b6;--bcm-new-ds-color-pink-500:#ec4899;--bcm-new-ds-color-pink-600:#db2777;--bcm-new-ds-color-pink-700:#be185d;--bcm-new-ds-color-pink-800:#9d174d;--bcm-new-ds-color-pink-900:#831843;--bcm-new-ds-color-rose:#f43f5e;--bcm-new-ds-color-rose-50:#fff1f2;--bcm-new-ds-color-rose-100:#ffe4e6;--bcm-new-ds-color-rose-200:#fecdd3;--bcm-new-ds-color-rose-300:#fda4af;--bcm-new-ds-color-rose-400:#fb7185;--bcm-new-ds-color-rose-500:#f43f5e;--bcm-new-ds-color-rose-600:#e11d48;--bcm-new-ds-color-rose-700:#be123c;--bcm-new-ds-color-rose-800:#9f1239;--bcm-new-ds-color-rose-900:#881337}*{box-sizing:border-box}.bcm-caption-area{font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;font-size:12px;line-height:calc(12px + 8px);color:var(--bcm-new-ds-color-slate-400);display:flex;flex-direction:row;align-items:flex-start;justify-content:space-between;flex-wrap:nowrap;margin-top:2px}.bcm-caption-area__text{color:var(--bcm-new-ds-color-slate-400)}.bcm-caption-area__text.default{color:var(--bcm-new-ds-color-slate-400)}.bcm-caption-area__text.info{color:var(--bcm-new-ds-color-blue-500)}.bcm-caption-area__text.success{color:var(--bcm-new-ds-color-emerald-500)}.bcm-caption-area__text.warning{color:var(--bcm-new-ds-color-amber-500)}.bcm-caption-area__text.error{color:var(--bcm-new-ds-color-red-500)}.bcm-caption-area__size-small{font-size:10px;line-height:calc(10px + 8px);min-height:calc(10px + 8px)}.bcm-caption-area__size-medium{font-size:12px;line-height:calc(12px + 8px);min-height:calc(12px + 8px)}.bcm-caption-area__size-large{font-size:14px;line-height:calc(14px + 8px);min-height:calc(14px + 8px)}:root,::after,::before{--bcm-new-ds-color-inherit:inherit;--bcm-new-ds-color-current:currentColor;--bcm-new-ds-color-transparent:transparent;--bcm-new-ds-color-black:#000;--bcm-new-ds-color-white:#fff;--bcm-new-ds-color-slate:#64748b;--bcm-new-ds-color-slate-50:#f8fafc;--bcm-new-ds-color-slate-100:#f1f5f9;--bcm-new-ds-color-slate-200:#e2e8f0;--bcm-new-ds-color-slate-300:#cbd5e1;--bcm-new-ds-color-slate-400:#94a3b8;--bcm-new-ds-color-slate-500:#64748b;--bcm-new-ds-color-slate-600:#475569;--bcm-new-ds-color-slate-700:#334155;--bcm-new-ds-color-slate-800:#1e293b;--bcm-new-ds-color-slate-900:#0f172a;--bcm-new-ds-color-gray:#6b7280;--bcm-new-ds-color-gray-50:#f9fafb;--bcm-new-ds-color-gray-100:#f3f4f6;--bcm-new-ds-color-gray-200:#e5e7eb;--bcm-new-ds-color-gray-300:#d1d5db;--bcm-new-ds-color-gray-400:#9ca3af;--bcm-new-ds-color-gray-500:#6b7280;--bcm-new-ds-color-gray-600:#4b5563;--bcm-new-ds-color-gray-700:#374151;--bcm-new-ds-color-gray-800:#1f2937;--bcm-new-ds-color-gray-900:#111827;--bcm-new-ds-color-zinc:#71717a;--bcm-new-ds-color-zinc-50:#fafafa;--bcm-new-ds-color-zinc-100:#f4f4f5;--bcm-new-ds-color-zinc-200:#e4e4e7;--bcm-new-ds-color-zinc-300:#d4d4d8;--bcm-new-ds-color-zinc-400:#a1a1aa;--bcm-new-ds-color-zinc-500:#71717a;--bcm-new-ds-color-zinc-600:#52525b;--bcm-new-ds-color-zinc-700:#3f3f46;--bcm-new-ds-color-zinc-800:#27272a;--bcm-new-ds-color-zinc-900:#18181b;--bcm-new-ds-color-neutral:#737373;--bcm-new-ds-color-neutral-50:#fafafa;--bcm-new-ds-color-neutral-100:#f5f5f5;--bcm-new-ds-color-neutral-200:#e5e5e5;--bcm-new-ds-color-neutral-300:#d4d4d4;--bcm-new-ds-color-neutral-400:#a3a3a3;--bcm-new-ds-color-neutral-500:#737373;--bcm-new-ds-color-neutral-600:#525252;--bcm-new-ds-color-neutral-700:#404040;--bcm-new-ds-color-neutral-800:#262626;--bcm-new-ds-color-neutral-900:#171717;--bcm-new-ds-color-stone:#78716c;--bcm-new-ds-color-stone-50:#fafaf9;--bcm-new-ds-color-stone-100:#f5f5f4;--bcm-new-ds-color-stone-200:#e7e5e4;--bcm-new-ds-color-stone-300:#d6d3d1;--bcm-new-ds-color-stone-400:#a8a29e;--bcm-new-ds-color-stone-500:#78716c;--bcm-new-ds-color-stone-600:#57534e;--bcm-new-ds-color-stone-700:#44403c;--bcm-new-ds-color-stone-800:#292524;--bcm-new-ds-color-stone-900:#1c1917;--bcm-new-ds-color-red:#ef4444;--bcm-new-ds-color-red-50:#fef2f2;--bcm-new-ds-color-red-100:#fee2e2;--bcm-new-ds-color-red-200:#fecaca;--bcm-new-ds-color-red-300:#fca5a5;--bcm-new-ds-color-red-400:#f87171;--bcm-new-ds-color-red-500:#ef4444;--bcm-new-ds-color-red-600:#dc2626;--bcm-new-ds-color-red-700:#b91c1c;--bcm-new-ds-color-red-800:#991b1b;--bcm-new-ds-color-red-900:#7f1d1d;--bcm-new-ds-color-orange:#f97316;--bcm-new-ds-color-orange-50:#fff7ed;--bcm-new-ds-color-orange-100:#ffedd5;--bcm-new-ds-color-orange-200:#fed7aa;--bcm-new-ds-color-orange-300:#fdba74;--bcm-new-ds-color-orange-400:#fb923c;--bcm-new-ds-color-orange-500:#f97316;--bcm-new-ds-color-orange-600:#ea580c;--bcm-new-ds-color-orange-700:#c2410c;--bcm-new-ds-color-orange-800:#9a3412;--bcm-new-ds-color-orange-900:#7c2d12;--bcm-new-ds-color-amber:#f59e0b;--bcm-new-ds-color-amber-50:#fffbeb;--bcm-new-ds-color-amber-100:#fef3c7;--bcm-new-ds-color-amber-200:#fde68a;--bcm-new-ds-color-amber-300:#fcd34d;--bcm-new-ds-color-amber-400:#fbbf24;--bcm-new-ds-color-amber-500:#f59e0b;--bcm-new-ds-color-amber-600:#d97706;--bcm-new-ds-color-amber-700:#b45309;--bcm-new-ds-color-amber-800:#92400e;--bcm-new-ds-color-amber-900:#78350f;--bcm-new-ds-color-yellow:#eab308;--bcm-new-ds-color-yellow-50:#fefce8;--bcm-new-ds-color-yellow-100:#fef9c3;--bcm-new-ds-color-yellow-200:#fef08a;--bcm-new-ds-color-yellow-300:#fde047;--bcm-new-ds-color-yellow-400:#facc15;--bcm-new-ds-color-yellow-500:#eab308;--bcm-new-ds-color-yellow-600:#ca8a04;--bcm-new-ds-color-yellow-700:#a16207;--bcm-new-ds-color-yellow-800:#854d0e;--bcm-new-ds-color-yellow-900:#713f12;--bcm-new-ds-color-lime:#84cc16;--bcm-new-ds-color-lime-50:#f7fee7;--bcm-new-ds-color-lime-100:#ecfccb;--bcm-new-ds-color-lime-200:#d9f99d;--bcm-new-ds-color-lime-300:#bef264;--bcm-new-ds-color-lime-400:#a3e635;--bcm-new-ds-color-lime-500:#84cc16;--bcm-new-ds-color-lime-600:#65a30d;--bcm-new-ds-color-lime-700:#4d7c0f;--bcm-new-ds-color-lime-800:#3f6212;--bcm-new-ds-color-lime-900:#365314;--bcm-new-ds-color-green:#22c55e;--bcm-new-ds-color-green-50:#f0fdf4;--bcm-new-ds-color-green-100:#dcfce7;--bcm-new-ds-color-green-200:#bbf7d0;--bcm-new-ds-color-green-300:#86efac;--bcm-new-ds-color-green-400:#4ade80;--bcm-new-ds-color-green-500:#22c55e;--bcm-new-ds-color-green-600:#16a34a;--bcm-new-ds-color-green-700:#15803d;--bcm-new-ds-color-green-800:#166534;--bcm-new-ds-color-green-900:#14532d;--bcm-new-ds-color-emerald:#10b981;--bcm-new-ds-color-emerald-50:#ecfdf5;--bcm-new-ds-color-emerald-100:#d1fae5;--bcm-new-ds-color-emerald-200:#a7f3d0;--bcm-new-ds-color-emerald-300:#6ee7b7;--bcm-new-ds-color-emerald-400:#34d399;--bcm-new-ds-color-emerald-500:#10b981;--bcm-new-ds-color-emerald-600:#059669;--bcm-new-ds-color-emerald-700:#047857;--bcm-new-ds-color-emerald-800:#065f46;--bcm-new-ds-color-emerald-900:#064e3b;--bcm-new-ds-color-teal:#14b8a6;--bcm-new-ds-color-teal-50:#f0fdfa;--bcm-new-ds-color-teal-100:#ccfbf1;--bcm-new-ds-color-teal-200:#99f6e4;--bcm-new-ds-color-teal-300:#5eead4;--bcm-new-ds-color-teal-400:#2dd4bf;--bcm-new-ds-color-teal-500:#14b8a6;--bcm-new-ds-color-teal-600:#0d9488;--bcm-new-ds-color-teal-700:#0f766e;--bcm-new-ds-color-teal-800:#115e59;--bcm-new-ds-color-teal-900:#134e4a;--bcm-new-ds-color-cyan:#06b6d4;--bcm-new-ds-color-cyan-50:#ecfeff;--bcm-new-ds-color-cyan-100:#cffafe;--bcm-new-ds-color-cyan-200:#a5f3fc;--bcm-new-ds-color-cyan-300:#67e8f9;--bcm-new-ds-color-cyan-400:#22d3ee;--bcm-new-ds-color-cyan-500:#06b6d4;--bcm-new-ds-color-cyan-600:#0891b2;--bcm-new-ds-color-cyan-700:#0e7490;--bcm-new-ds-color-cyan-800:#155e75;--bcm-new-ds-color-cyan-900:#164e63;--bcm-new-ds-color-sky:#0ea5e9;--bcm-new-ds-color-sky-50:#f0f9ff;--bcm-new-ds-color-sky-100:#e0f2fe;--bcm-new-ds-color-sky-200:#bae6fd;--bcm-new-ds-color-sky-300:#7dd3fc;--bcm-new-ds-color-sky-400:#38bdf8;--bcm-new-ds-color-sky-500:#0ea5e9;--bcm-new-ds-color-sky-600:#0284c7;--bcm-new-ds-color-sky-700:#0369a1;--bcm-new-ds-color-sky-800:#075985;--bcm-new-ds-color-sky-900:#0c4a6e;--bcm-new-ds-color-blue:#3b82f6;--bcm-new-ds-color-blue-50:#eff6ff;--bcm-new-ds-color-blue-100:#dbeafe;--bcm-new-ds-color-blue-200:#bfdbfe;--bcm-new-ds-color-blue-300:#93c5fd;--bcm-new-ds-color-blue-400:#60a5fa;--bcm-new-ds-color-blue-500:#3b82f6;--bcm-new-ds-color-blue-600:#2563eb;--bcm-new-ds-color-blue-700:#1d4ed8;--bcm-new-ds-color-blue-800:#1e40af;--bcm-new-ds-color-blue-900:#1e3a8a;--bcm-new-ds-color-indigo:#6366f1;--bcm-new-ds-color-indigo-50:#eef2ff;--bcm-new-ds-color-indigo-100:#e0e7ff;--bcm-new-ds-color-indigo-200:#c7d2fe;--bcm-new-ds-color-indigo-300:#a5b4fc;--bcm-new-ds-color-indigo-400:#818cf8;--bcm-new-ds-color-indigo-500:#6366f1;--bcm-new-ds-color-indigo-600:#4f46e5;--bcm-new-ds-color-indigo-700:#4338ca;--bcm-new-ds-color-indigo-800:#3730a3;--bcm-new-ds-color-indigo-900:#312e81;--bcm-new-ds-color-violet:#8b5cf6;--bcm-new-ds-color-violet-50:#f5f3ff;--bcm-new-ds-color-violet-100:#ede9fe;--bcm-new-ds-color-violet-200:#ddd6fe;--bcm-new-ds-color-violet-300:#c4b5fd;--bcm-new-ds-color-violet-400:#a78bfa;--bcm-new-ds-color-violet-500:#8b5cf6;--bcm-new-ds-color-violet-600:#7c3aed;--bcm-new-ds-color-violet-700:#6d28d9;--bcm-new-ds-color-violet-800:#5b21b6;--bcm-new-ds-color-violet-900:#4c1d95;--bcm-new-ds-color-purple:#a855f7;--bcm-new-ds-color-purple-50:#faf5ff;--bcm-new-ds-color-purple-100:#f3e8ff;--bcm-new-ds-color-purple-200:#e9d5ff;--bcm-new-ds-color-purple-300:#d8b4fe;--bcm-new-ds-color-purple-400:#c084fc;--bcm-new-ds-color-purple-500:#a855f7;--bcm-new-ds-color-purple-600:#9333ea;--bcm-new-ds-color-purple-700:#7e22ce;--bcm-new-ds-color-purple-800:#6b21a8;--bcm-new-ds-color-purple-900:#581c87;--bcm-new-ds-color-fuchsia:#d946ef;--bcm-new-ds-color-fuchsia-50:#fdf4ff;--bcm-new-ds-color-fuchsia-100:#fae8ff;--bcm-new-ds-color-fuchsia-200:#f5d0fe;--bcm-new-ds-color-fuchsia-300:#f0abfc;--bcm-new-ds-color-fuchsia-400:#e879f9;--bcm-new-ds-color-fuchsia-500:#d946ef;--bcm-new-ds-color-fuchsia-600:#c026d3;--bcm-new-ds-color-fuchsia-700:#a21caf;--bcm-new-ds-color-fuchsia-800:#86198f;--bcm-new-ds-color-fuchsia-900:#701a75;--bcm-new-ds-color-pink:#ec4899;--bcm-new-ds-color-pink-50:#fdf2f8;--bcm-new-ds-color-pink-100:#fce7f3;--bcm-new-ds-color-pink-200:#fbcfe8;--bcm-new-ds-color-pink-300:#f9a8d4;--bcm-new-ds-color-pink-400:#f472b6;--bcm-new-ds-color-pink-500:#ec4899;--bcm-new-ds-color-pink-600:#db2777;--bcm-new-ds-color-pink-700:#be185d;--bcm-new-ds-color-pink-800:#9d174d;--bcm-new-ds-color-pink-900:#831843;--bcm-new-ds-color-rose:#f43f5e;--bcm-new-ds-color-rose-50:#fff1f2;--bcm-new-ds-color-rose-100:#ffe4e6;--bcm-new-ds-color-rose-200:#fecdd3;--bcm-new-ds-color-rose-300:#fda4af;--bcm-new-ds-color-rose-400:#fb7185;--bcm-new-ds-color-rose-500:#f43f5e;--bcm-new-ds-color-rose-600:#e11d48;--bcm-new-ds-color-rose-700:#be123c;--bcm-new-ds-color-rose-800:#9f1239;--bcm-new-ds-color-rose-900:#881337}*{box-sizing:border-box}.bcm-label{display:inline-flex;align-items:flex-start;grid-gap:2px}.bcm-label__text{margin-bottom:2px;font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;display:inline-block;color:var(--bcm-new-ds-color-slate-600)}.bcm-label__size-small{font-size:10px;line-height:calc(10px + 8px);min-height:calc(10px + 8px)}.bcm-label__size-medium{font-size:12px;line-height:calc(12px + 8px);min-height:calc(12px + 8px)}.bcm-label__size-large{font-size:14px;line-height:calc(14px + 8px);min-height:calc(14px + 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}:root,::after,::before{--bcm-new-ds-color-inherit:inherit;--bcm-new-ds-color-current:currentColor;--bcm-new-ds-color-transparent:transparent;--bcm-new-ds-color-black:#000;--bcm-new-ds-color-white:#fff;--bcm-new-ds-color-slate:#64748b;--bcm-new-ds-color-slate-50:#f8fafc;--bcm-new-ds-color-slate-100:#f1f5f9;--bcm-new-ds-color-slate-200:#e2e8f0;--bcm-new-ds-color-slate-300:#cbd5e1;--bcm-new-ds-color-slate-400:#94a3b8;--bcm-new-ds-color-slate-500:#64748b;--bcm-new-ds-color-slate-600:#475569;--bcm-new-ds-color-slate-700:#334155;--bcm-new-ds-color-slate-800:#1e293b;--bcm-new-ds-color-slate-900:#0f172a;--bcm-new-ds-color-gray:#6b7280;--bcm-new-ds-color-gray-50:#f9fafb;--bcm-new-ds-color-gray-100:#f3f4f6;--bcm-new-ds-color-gray-200:#e5e7eb;--bcm-new-ds-color-gray-300:#d1d5db;--bcm-new-ds-color-gray-400:#9ca3af;--bcm-new-ds-color-gray-500:#6b7280;--bcm-new-ds-color-gray-600:#4b5563;--bcm-new-ds-color-gray-700:#374151;--bcm-new-ds-color-gray-800:#1f2937;--bcm-new-ds-color-gray-900:#111827;--bcm-new-ds-color-zinc:#71717a;--bcm-new-ds-color-zinc-50:#fafafa;--bcm-new-ds-color-zinc-100:#f4f4f5;--bcm-new-ds-color-zinc-200:#e4e4e7;--bcm-new-ds-color-zinc-300:#d4d4d8;--bcm-new-ds-color-zinc-400:#a1a1aa;--bcm-new-ds-color-zinc-500:#71717a;--bcm-new-ds-color-zinc-600:#52525b;--bcm-new-ds-color-zinc-700:#3f3f46;--bcm-new-ds-color-zinc-800:#27272a;--bcm-new-ds-color-zinc-900:#18181b;--bcm-new-ds-color-neutral:#737373;--bcm-new-ds-color-neutral-50:#fafafa;--bcm-new-ds-color-neutral-100:#f5f5f5;--bcm-new-ds-color-neutral-200:#e5e5e5;--bcm-new-ds-color-neutral-300:#d4d4d4;--bcm-new-ds-color-neutral-400:#a3a3a3;--bcm-new-ds-color-neutral-500:#737373;--bcm-new-ds-color-neutral-600:#525252;--bcm-new-ds-color-neutral-700:#404040;--bcm-new-ds-color-neutral-800:#262626;--bcm-new-ds-color-neutral-900:#171717;--bcm-new-ds-color-stone:#78716c;--bcm-new-ds-color-stone-50:#fafaf9;--bcm-new-ds-color-stone-100:#f5f5f4;--bcm-new-ds-color-stone-200:#e7e5e4;--bcm-new-ds-color-stone-300:#d6d3d1;--bcm-new-ds-color-stone-400:#a8a29e;--bcm-new-ds-color-stone-500:#78716c;--bcm-new-ds-color-stone-600:#57534e;--bcm-new-ds-color-stone-700:#44403c;--bcm-new-ds-color-stone-800:#292524;--bcm-new-ds-color-stone-900:#1c1917;--bcm-new-ds-color-red:#ef4444;--bcm-new-ds-color-red-50:#fef2f2;--bcm-new-ds-color-red-100:#fee2e2;--bcm-new-ds-color-red-200:#fecaca;--bcm-new-ds-color-red-300:#fca5a5;--bcm-new-ds-color-red-400:#f87171;--bcm-new-ds-color-red-500:#ef4444;--bcm-new-ds-color-red-600:#dc2626;--bcm-new-ds-color-red-700:#b91c1c;--bcm-new-ds-color-red-800:#991b1b;--bcm-new-ds-color-red-900:#7f1d1d;--bcm-new-ds-color-orange:#f97316;--bcm-new-ds-color-orange-50:#fff7ed;--bcm-new-ds-color-orange-100:#ffedd5;--bcm-new-ds-color-orange-200:#fed7aa;--bcm-new-ds-color-orange-300:#fdba74;--bcm-new-ds-color-orange-400:#fb923c;--bcm-new-ds-color-orange-500:#f97316;--bcm-new-ds-color-orange-600:#ea580c;--bcm-new-ds-color-orange-700:#c2410c;--bcm-new-ds-color-orange-800:#9a3412;--bcm-new-ds-color-orange-900:#7c2d12;--bcm-new-ds-color-amber:#f59e0b;--bcm-new-ds-color-amber-50:#fffbeb;--bcm-new-ds-color-amber-100:#fef3c7;--bcm-new-ds-color-amber-200:#fde68a;--bcm-new-ds-color-amber-300:#fcd34d;--bcm-new-ds-color-amber-400:#fbbf24;--bcm-new-ds-color-amber-500:#f59e0b;--bcm-new-ds-color-amber-600:#d97706;--bcm-new-ds-color-amber-700:#b45309;--bcm-new-ds-color-amber-800:#92400e;--bcm-new-ds-color-amber-900:#78350f;--bcm-new-ds-color-yellow:#eab308;--bcm-new-ds-color-yellow-50:#fefce8;--bcm-new-ds-color-yellow-100:#fef9c3;--bcm-new-ds-color-yellow-200:#fef08a;--bcm-new-ds-color-yellow-300:#fde047;--bcm-new-ds-color-yellow-400:#facc15;--bcm-new-ds-color-yellow-500:#eab308;--bcm-new-ds-color-yellow-600:#ca8a04;--bcm-new-ds-color-yellow-700:#a16207;--bcm-new-ds-color-yellow-800:#854d0e;--bcm-new-ds-color-yellow-900:#713f12;--bcm-new-ds-color-lime:#84cc16;--bcm-new-ds-color-lime-50:#f7fee7;--bcm-new-ds-color-lime-100:#ecfccb;--bcm-new-ds-color-lime-200:#d9f99d;--bcm-new-ds-color-lime-300:#bef264;--bcm-new-ds-color-lime-400:#a3e635;--bcm-new-ds-color-lime-500:#84cc16;--bcm-new-ds-color-lime-600:#65a30d;--bcm-new-ds-color-lime-700:#4d7c0f;--bcm-new-ds-color-lime-800:#3f6212;--bcm-new-ds-color-lime-900:#365314;--bcm-new-ds-color-green:#22c55e;--bcm-new-ds-color-green-50:#f0fdf4;--bcm-new-ds-color-green-100:#dcfce7;--bcm-new-ds-color-green-200:#bbf7d0;--bcm-new-ds-color-green-300:#86efac;--bcm-new-ds-color-green-400:#4ade80;--bcm-new-ds-color-green-500:#22c55e;--bcm-new-ds-color-green-600:#16a34a;--bcm-new-ds-color-green-700:#15803d;--bcm-new-ds-color-green-800:#166534;--bcm-new-ds-color-green-900:#14532d;--bcm-new-ds-color-emerald:#10b981;--bcm-new-ds-color-emerald-50:#ecfdf5;--bcm-new-ds-color-emerald-100:#d1fae5;--bcm-new-ds-color-emerald-200:#a7f3d0;--bcm-new-ds-color-emerald-300:#6ee7b7;--bcm-new-ds-color-emerald-400:#34d399;--bcm-new-ds-color-emerald-500:#10b981;--bcm-new-ds-color-emerald-600:#059669;--bcm-new-ds-color-emerald-700:#047857;--bcm-new-ds-color-emerald-800:#065f46;--bcm-new-ds-color-emerald-900:#064e3b;--bcm-new-ds-color-teal:#14b8a6;--bcm-new-ds-color-teal-50:#f0fdfa;--bcm-new-ds-color-teal-100:#ccfbf1;--bcm-new-ds-color-teal-200:#99f6e4;--bcm-new-ds-color-teal-300:#5eead4;--bcm-new-ds-color-teal-400:#2dd4bf;--bcm-new-ds-color-teal-500:#14b8a6;--bcm-new-ds-color-teal-600:#0d9488;--bcm-new-ds-color-teal-700:#0f766e;--bcm-new-ds-color-teal-800:#115e59;--bcm-new-ds-color-teal-900:#134e4a;--bcm-new-ds-color-cyan:#06b6d4;--bcm-new-ds-color-cyan-50:#ecfeff;--bcm-new-ds-color-cyan-100:#cffafe;--bcm-new-ds-color-cyan-200:#a5f3fc;--bcm-new-ds-color-cyan-300:#67e8f9;--bcm-new-ds-color-cyan-400:#22d3ee;--bcm-new-ds-color-cyan-500:#06b6d4;--bcm-new-ds-color-cyan-600:#0891b2;--bcm-new-ds-color-cyan-700:#0e7490;--bcm-new-ds-color-cyan-800:#155e75;--bcm-new-ds-color-cyan-900:#164e63;--bcm-new-ds-color-sky:#0ea5e9;--bcm-new-ds-color-sky-50:#f0f9ff;--bcm-new-ds-color-sky-100:#e0f2fe;--bcm-new-ds-color-sky-200:#bae6fd;--bcm-new-ds-color-sky-300:#7dd3fc;--bcm-new-ds-color-sky-400:#38bdf8;--bcm-new-ds-color-sky-500:#0ea5e9;--bcm-new-ds-color-sky-600:#0284c7;--bcm-new-ds-color-sky-700:#0369a1;--bcm-new-ds-color-sky-800:#075985;--bcm-new-ds-color-sky-900:#0c4a6e;--bcm-new-ds-color-blue:#3b82f6;--bcm-new-ds-color-blue-50:#eff6ff;--bcm-new-ds-color-blue-100:#dbeafe;--bcm-new-ds-color-blue-200:#bfdbfe;--bcm-new-ds-color-blue-300:#93c5fd;--bcm-new-ds-color-blue-400:#60a5fa;--bcm-new-ds-color-blue-500:#3b82f6;--bcm-new-ds-color-blue-600:#2563eb;--bcm-new-ds-color-blue-700:#1d4ed8;--bcm-new-ds-color-blue-800:#1e40af;--bcm-new-ds-color-blue-900:#1e3a8a;--bcm-new-ds-color-indigo:#6366f1;--bcm-new-ds-color-indigo-50:#eef2ff;--bcm-new-ds-color-indigo-100:#e0e7ff;--bcm-new-ds-color-indigo-200:#c7d2fe;--bcm-new-ds-color-indigo-300:#a5b4fc;--bcm-new-ds-color-indigo-400:#818cf8;--bcm-new-ds-color-indigo-500:#6366f1;--bcm-new-ds-color-indigo-600:#4f46e5;--bcm-new-ds-color-indigo-700:#4338ca;--bcm-new-ds-color-indigo-800:#3730a3;--bcm-new-ds-color-indigo-900:#312e81;--bcm-new-ds-color-violet:#8b5cf6;--bcm-new-ds-color-violet-50:#f5f3ff;--bcm-new-ds-color-violet-100:#ede9fe;--bcm-new-ds-color-violet-200:#ddd6fe;--bcm-new-ds-color-violet-300:#c4b5fd;--bcm-new-ds-color-violet-400:#a78bfa;--bcm-new-ds-color-violet-500:#8b5cf6;--bcm-new-ds-color-violet-600:#7c3aed;--bcm-new-ds-color-violet-700:#6d28d9;--bcm-new-ds-color-violet-800:#5b21b6;--bcm-new-ds-color-violet-900:#4c1d95;--bcm-new-ds-color-purple:#a855f7;--bcm-new-ds-color-purple-50:#faf5ff;--bcm-new-ds-color-purple-100:#f3e8ff;--bcm-new-ds-color-purple-200:#e9d5ff;--bcm-new-ds-color-purple-300:#d8b4fe;--bcm-new-ds-color-purple-400:#c084fc;--bcm-new-ds-color-purple-500:#a855f7;--bcm-new-ds-color-purple-600:#9333ea;--bcm-new-ds-color-purple-700:#7e22ce;--bcm-new-ds-color-purple-800:#6b21a8;--bcm-new-ds-color-purple-900:#581c87;--bcm-new-ds-color-fuchsia:#d946ef;--bcm-new-ds-color-fuchsia-50:#fdf4ff;--bcm-new-ds-color-fuchsia-100:#fae8ff;--bcm-new-ds-color-fuchsia-200:#f5d0fe;--bcm-new-ds-color-fuchsia-300:#f0abfc;--bcm-new-ds-color-fuchsia-400:#e879f9;--bcm-new-ds-color-fuchsia-500:#d946ef;--bcm-new-ds-color-fuchsia-600:#c026d3;--bcm-new-ds-color-fuchsia-700:#a21caf;--bcm-new-ds-color-fuchsia-800:#86198f;--bcm-new-ds-color-fuchsia-900:#701a75;--bcm-new-ds-color-pink:#ec4899;--bcm-new-ds-color-pink-50:#fdf2f8;--bcm-new-ds-color-pink-100:#fce7f3;--bcm-new-ds-color-pink-200:#fbcfe8;--bcm-new-ds-color-pink-300:#f9a8d4;--bcm-new-ds-color-pink-400:#f472b6;--bcm-new-ds-color-pink-500:#ec4899;--bcm-new-ds-color-pink-600:#db2777;--bcm-new-ds-color-pink-700:#be185d;--bcm-new-ds-color-pink-800:#9d174d;--bcm-new-ds-color-pink-900:#831843;--bcm-new-ds-color-rose:#f43f5e;--bcm-new-ds-color-rose-50:#fff1f2;--bcm-new-ds-color-rose-100:#ffe4e6;--bcm-new-ds-color-rose-200:#fecdd3;--bcm-new-ds-color-rose-300:#fda4af;--bcm-new-ds-color-rose-400:#fb7185;--bcm-new-ds-color-rose-500:#f43f5e;--bcm-new-ds-color-rose-600:#e11d48;--bcm-new-ds-color-rose-700:#be123c;--bcm-new-ds-color-rose-800:#9f1239;--bcm-new-ds-color-rose-900:#881337}*{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}";
+import './number-helper.js';
+import './string-helper.js';
+import './element-dragger.js';
+import { c as classnames } from './index2.js';
 
-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;
-  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 BcmRadio = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    this.change = createEvent(this, "bcm-change", 7);
+    this.radioChange = createEvent(this, "bcm-radio-change", 7);
     this.focus = createEvent(this, "bcm-focus", 7);
     this.blur = createEvent(this, "bcm-blur", 7);
     this._id = Generate.UID();
     this.checked = undefined;
     this.value = undefined;
-    this.disabled = undefined;
+    this.disabled = false;
     this.size = Bcm.Size.medium;
-    this.hidden = false;
-    this.required = false;
-    this.color = "blue";
-  }
-  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')
-    };
+    this.color = undefined;
   }
   render() {
-    const { checked, value, disabled, size, hidden, required } = this;
-    // const defaultClasses = cs(
-    //     'radio-container',
-    //     'size-2',
-    //     {
-    //         'checked': checked,
-    //         'disabled': disabled
-    //     }
-    // )
-    // const buttonClasses = cs(
-    //     'radio-button',
-    //     buttonStyle,
-    //     size,
-    //     {
-    //         'size-2': size === 'small' || size === 'medium',
-    //         'size-3': size === 'large',
-    //         'checked': checked,
-    //         'disabled': disabled,
-    //     }
-    // )
-    const bcmRadioHostClasses = classnames('bcm-checkbox', `bcm-checkbox-size-${size}`, {
-      hidden,
-      checked,
-      disabled,
-      required
-    });
-    const bcmRadioLabelClass = classnames('bcm-checkbox__label');
-    const bcmCheckboxInputClass = classnames('bcm-checkbox__input');
-    return (h(Host, { class: bcmRadioHostClasses, onFocus: () => this.focus.emit(), onBlur: () => this.blur.emit(), style: this.setColor(this.color) }, h("span", { hidden: true }, h("slot", null)), h("div", { class: bcmCheckboxInputClass }, h("label", { class: bcmRadioLabelClass }, h("input", { type: "radio", value: value, checked: checked, disabled: disabled }), h("span", { class: classnames("bcm-checkbox__label-icon", "bcm-radio__icon", {
-        'bcm-checkbox__label-icon-checked': checked,
-      }) }, h("span", { class: 'bcm-radio__icon-inner' })), h(SlotTemplate, { className: "slot" })))));
+    const { value, size, disabled, checked, _id, color } = this;
+    return (h(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("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("input", { 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-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("slot", null))));
   }
   get el() { return this; }
-  static get style() { return radioCss; }
 }, [4, "bcm-radio", {
-    "_id": [1537, "id"],
-    "checked": [1028],
-    "value": [1032],
-    "disabled": [1028],
-    "size": [1025],
-    "hidden": [1028],
-    "required": [1028],
-    "color": [1025]
+    "_id": [513, "id"],
+    "checked": [4],
+    "value": [8],
+    "disabled": [4],
+    "size": [1],
+    "color": [8]
   }]);
-__decorate([
-  IsLoad()
-], BcmRadio.prototype, "el", void 0);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;

package/dist/components/scroll-area.js

@@ -0,0 +1,40 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { c as classnames } from './index2.js';
+
+const BcmScrollArea = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.width = "inherit";
+    this.height = "inherit";
+    this.isDisabled = false;
+  }
+  render() {
+    return (h(Host, { class: classnames("tw-block", {
+        "tw-overflow-y-scroll tw-overscroll-contain": !this.isDisabled,
+      }), style: { width: this.width, height: this.height } }, h("slot", null)));
+  }
+}, [4, "bcm-scroll-area", {
+    "width": [1],
+    "height": [1],
+    "isDisabled": [4, "is-disabled"]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["bcm-scroll-area"];
+  components.forEach(tagName => { switch (tagName) {
+    case "bcm-scroll-area":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, BcmScrollArea);
+      }
+      break;
+  } });
+}
+
+export { BcmScrollArea as B, defineCustomElement as d };