bromcom-ui 2.12.3 → 3.0.0-alpha.0

package/dist/components/Overflow.js

@@ -183,61 +183,33 @@ function _extends() {
   return _extends.apply(this, arguments);
 }
 
-/**
- * @license React
- * react-is.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-var b=Symbol.for("react.element"),c=Symbol.for("react.portal"),d=Symbol.for("react.fragment"),e=Symbol.for("react.strict_mode"),f=Symbol.for("react.profiler"),g=Symbol.for("react.provider"),h=Symbol.for("react.context"),k=Symbol.for("react.server_context"),l=Symbol.for("react.forward_ref"),m=Symbol.for("react.suspense"),n=Symbol.for("react.suspense_list"),p=Symbol.for("react.memo"),q=Symbol.for("react.lazy"),t=Symbol.for("react.offscreen"),u;u=Symbol.for("react.module.reference");
-function v(a){if("object"===typeof a&&null!==a){var r=a.$$typeof;switch(r){case b:switch(a=a.type,a){case d:case f:case e:case m:case n:return a;default:switch(a=a&&a.$$typeof,a){case k:case h:case l:case q:case p:case g:return a;default:return r}}case c:return r}}}var ContextConsumer=h;var ContextProvider=g;var Element$1=b;var ForwardRef=l;var Fragment=d;var Lazy=q;var Memo=p;var Portal=c;var Profiler=f;var StrictMode=e;var Suspense=m;
-var SuspenseList=n;var isAsyncMode=function(){return !1};var isConcurrentMode=function(){return !1};var isContextConsumer=function(a){return v(a)===h};var isContextProvider=function(a){return v(a)===g};var isElement=function(a){return "object"===typeof a&&null!==a&&a.$$typeof===b};var isForwardRef=function(a){return v(a)===l};var isFragment=function(a){return v(a)===d};var isLazy=function(a){return v(a)===q};var isMemo=function(a){return v(a)===p};
-var isPortal=function(a){return v(a)===c};var isProfiler=function(a){return v(a)===f};var isStrictMode=function(a){return v(a)===e};var isSuspense=function(a){return v(a)===m};var isSuspenseList=function(a){return v(a)===n};
-var isValidElementType=function(a){return "string"===typeof a||"function"===typeof a||a===d||a===f||a===e||a===m||a===n||a===t||"object"===typeof a&&null!==a&&(a.$$typeof===q||a.$$typeof===p||a.$$typeof===g||a.$$typeof===h||a.$$typeof===l||a.$$typeof===u||void 0!==a.getModuleId)?!0:!1};var typeOf=v;
-
-var reactIs_production_min = {
-	ContextConsumer: ContextConsumer,
-	ContextProvider: ContextProvider,
-	Element: Element$1,
-	ForwardRef: ForwardRef,
-	Fragment: Fragment,
-	Lazy: Lazy,
-	Memo: Memo,
-	Portal: Portal,
-	Profiler: Profiler,
-	StrictMode: StrictMode,
-	Suspense: Suspense,
-	SuspenseList: SuspenseList,
-	isAsyncMode: isAsyncMode,
-	isConcurrentMode: isConcurrentMode,
-	isContextConsumer: isContextConsumer,
-	isContextProvider: isContextProvider,
-	isElement: isElement,
-	isForwardRef: isForwardRef,
-	isFragment: isFragment,
-	isLazy: isLazy,
-	isMemo: isMemo,
-	isPortal: isPortal,
-	isProfiler: isProfiler,
-	isStrictMode: isStrictMode,
-	isSuspense: isSuspense,
-	isSuspenseList: isSuspenseList,
-	isValidElementType: isValidElementType,
-	typeOf: typeOf
-};
+function _typeof$1(obj) {
+  "@babel/helpers - typeof";
 
-createCommonjsModule(function (module, exports) {
-});
+  return _typeof$1 = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
+    return typeof obj;
+  } : function (obj) {
+    return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
+  }, _typeof$1(obj);
+}
 
-var reactIs = createCommonjsModule(function (module) {
+var REACT_ELEMENT_TYPE_18 = Symbol.for('react.element');
+var REACT_ELEMENT_TYPE_19 = Symbol.for('react.transitional.element');
+var REACT_FRAGMENT_TYPE = Symbol.for('react.fragment');
 
-{
-  module.exports = reactIs_production_min;
+/**
+ * Compatible with React 18 or 19 to check if node is a Fragment.
+ */
+function isFragment$1(object) {
+  return (
+    // Base object type
+    object && _typeof$1(object) === 'object' && (
+    // React Element type
+    object.$$typeof === REACT_ELEMENT_TYPE_18 || object.$$typeof === REACT_ELEMENT_TYPE_19) &&
+    // React Fragment type
+    object.type === REACT_FRAGMENT_TYPE
+  );
 }
-});
 
 function toArray(children) {
   var option = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
@@ -248,7 +220,7 @@ function toArray(children) {
     }
     if (Array.isArray(child)) {
       ret = ret.concat(toArray(child));
-    } else if (reactIs.isFragment(child) && child.props) {
+    } else if (isFragment$1(child) && child.props) {
       ret = ret.concat(toArray(child.props.children, option));
     } else {
       ret.push(child);
@@ -307,22 +279,22 @@ warningOnce.preMessage = preMessage;
 warningOnce.resetWarned = resetWarned;
 warningOnce.noteOnce = noteOnce;
 
-function _typeof$1(obj) {
+function _typeof(obj) {
   "@babel/helpers - typeof";
 
-  return _typeof$1 = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
+  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
     return typeof obj;
   } : function (obj) {
     return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
-  }, _typeof$1(obj);
+  }, _typeof(obj);
 }
 
 function _toPrimitive(input, hint) {
-  if (_typeof$1(input) !== "object" || input === null) return input;
+  if (_typeof(input) !== "object" || input === null) return input;
   var prim = input[Symbol.toPrimitive];
   if (prim !== undefined) {
     var res = prim.call(input, hint || "default");
-    if (_typeof$1(res) !== "object") return res;
+    if (_typeof(res) !== "object") return res;
     throw new TypeError("@@toPrimitive must return a primitive value.");
   }
   return (hint === "string" ? String : Number)(input);
@@ -330,7 +302,7 @@ function _toPrimitive(input, hint) {
 
 function _toPropertyKey(arg) {
   var key = _toPrimitive(arg, "string");
-  return _typeof$1(key) === "symbol" ? key : String(key);
+  return _typeof(key) === "symbol" ? key : String(key);
 }
 
 function _defineProperty(obj, key, value) {
@@ -377,27 +349,88 @@ function isDOM(node) {
 }
 
 /**
- * Return if a node is a DOM node. Else will return by `findDOMNode`
+ * Retrieves a DOM node via a ref, and does not invoke `findDOMNode`.
  */
-function findDOMNode(node) {
+function getDOM(node) {
+  if (node && _typeof$1(node) === 'object' && isDOM(node.nativeElement)) {
+    return node.nativeElement;
+  }
   if (isDOM(node)) {
     return node;
   }
+  return null;
+}
+
+/**
+ * Return if a node is a DOM node. Else will return by `findDOMNode`
+ */
+function findDOMNode(node) {
+  var domNode = getDOM(node);
+  if (domNode) {
+    return domNode;
+  }
   if (node instanceof react.Component) {
-    return reactDom.findDOMNode(node);
+    var _ReactDOM$findDOMNode;
+    return (_ReactDOM$findDOMNode = reactDom.findDOMNode) === null || _ReactDOM$findDOMNode === void 0 ? void 0 : _ReactDOM$findDOMNode.call(reactDom, node);
   }
   return null;
 }
 
-function _typeof(obj) {
-  "@babel/helpers - typeof";
+/**
+ * @license React
+ * react-is.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var b=Symbol.for("react.element"),c=Symbol.for("react.portal"),d=Symbol.for("react.fragment"),e=Symbol.for("react.strict_mode"),f=Symbol.for("react.profiler"),g=Symbol.for("react.provider"),h=Symbol.for("react.context"),k=Symbol.for("react.server_context"),l=Symbol.for("react.forward_ref"),m=Symbol.for("react.suspense"),n=Symbol.for("react.suspense_list"),p=Symbol.for("react.memo"),q=Symbol.for("react.lazy"),t=Symbol.for("react.offscreen"),u;u=Symbol.for("react.module.reference");
+function v(a){if("object"===typeof a&&null!==a){var r=a.$$typeof;switch(r){case b:switch(a=a.type,a){case d:case f:case e:case m:case n:return a;default:switch(a=a&&a.$$typeof,a){case k:case h:case l:case q:case p:case g:return a;default:return r}}case c:return r}}}var ContextConsumer=h;var ContextProvider=g;var Element$1=b;var ForwardRef=l;var Fragment=d;var Lazy=q;var Memo=p;var Portal=c;var Profiler=f;var StrictMode=e;var Suspense=m;
+var SuspenseList=n;var isAsyncMode=function(){return !1};var isConcurrentMode=function(){return !1};var isContextConsumer=function(a){return v(a)===h};var isContextProvider=function(a){return v(a)===g};var isElement=function(a){return "object"===typeof a&&null!==a&&a.$$typeof===b};var isForwardRef=function(a){return v(a)===l};var isFragment=function(a){return v(a)===d};var isLazy=function(a){return v(a)===q};var isMemo=function(a){return v(a)===p};
+var isPortal=function(a){return v(a)===c};var isProfiler=function(a){return v(a)===f};var isStrictMode=function(a){return v(a)===e};var isSuspense=function(a){return v(a)===m};var isSuspenseList=function(a){return v(a)===n};
+var isValidElementType=function(a){return "string"===typeof a||"function"===typeof a||a===d||a===f||a===e||a===m||a===n||a===t||"object"===typeof a&&null!==a&&(a.$$typeof===q||a.$$typeof===p||a.$$typeof===g||a.$$typeof===h||a.$$typeof===l||a.$$typeof===u||void 0!==a.getModuleId)?!0:!1};var typeOf=v;
 
-  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
-    return typeof obj;
-  } : function (obj) {
-    return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
-  }, _typeof(obj);
+var reactIs_production_min = {
+	ContextConsumer: ContextConsumer,
+	ContextProvider: ContextProvider,
+	Element: Element$1,
+	ForwardRef: ForwardRef,
+	Fragment: Fragment,
+	Lazy: Lazy,
+	Memo: Memo,
+	Portal: Portal,
+	Profiler: Profiler,
+	StrictMode: StrictMode,
+	Suspense: Suspense,
+	SuspenseList: SuspenseList,
+	isAsyncMode: isAsyncMode,
+	isConcurrentMode: isConcurrentMode,
+	isContextConsumer: isContextConsumer,
+	isContextProvider: isContextProvider,
+	isElement: isElement,
+	isForwardRef: isForwardRef,
+	isFragment: isFragment,
+	isLazy: isLazy,
+	isMemo: isMemo,
+	isPortal: isPortal,
+	isProfiler: isProfiler,
+	isStrictMode: isStrictMode,
+	isSuspense: isSuspense,
+	isSuspenseList: isSuspenseList,
+	isValidElementType: isValidElementType,
+	typeOf: typeOf
+};
+
+createCommonjsModule(function (module, exports) {
+});
+
+var reactIs = createCommonjsModule(function (module) {
+
+{
+  module.exports = reactIs_production_min;
 }
+});
 
 function useMemo(getValue, condition, shouldUpdate) {
   var cacheRef = react.useRef({});
@@ -408,24 +441,23 @@ function useMemo(getValue, condition, shouldUpdate) {
   return cacheRef.current.value;
 }
 
-function fillRef(ref, node) {
+var ReactMajorVersion = Number(react.version.split('.')[0]);
+var fillRef = function fillRef(ref, node) {
   if (typeof ref === 'function') {
     ref(node);
-  } else if (_typeof(ref) === 'object' && ref && 'current' in ref) {
+  } else if (_typeof$1(ref) === 'object' && ref && 'current' in ref) {
     ref.current = node;
   }
-}
+};
 
 /**
  * Merge refs into one ref function to support ref passing.
  */
-function composeRef() {
+var composeRef = function composeRef() {
   for (var _len = arguments.length, refs = new Array(_len), _key = 0; _key < _len; _key++) {
     refs[_key] = arguments[_key];
   }
-  var refList = refs.filter(function (ref) {
-    return ref;
-  });
+  var refList = refs.filter(Boolean);
   if (refList.length <= 1) {
     return refList[0];
   }
@@ -434,8 +466,8 @@ function composeRef() {
       fillRef(ref, node);
     });
   };
-}
-function useComposeRef() {
+};
+var useComposeRef = function useComposeRef() {
   for (var _len2 = arguments.length, refs = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
     refs[_key2] = arguments[_key2];
   }
@@ -446,9 +478,17 @@ function useComposeRef() {
       return ref !== next[i];
     });
   });
-}
-function supportRef(nodeOrComponent) {
+};
+var supportRef = function supportRef(nodeOrComponent) {
   var _type$prototype, _nodeOrComponent$prot;
+  if (!nodeOrComponent) {
+    return false;
+  }
+
+  // React 19 no need `forwardRef` anymore. So just pass if is a React element.
+  if (isReactElement(nodeOrComponent) && ReactMajorVersion >= 19) {
+    return true;
+  }
   var type = reactIs.isMemo(nodeOrComponent) ? nodeOrComponent.type.type : nodeOrComponent.type;
 
   // Function component node
@@ -461,8 +501,26 @@ function supportRef(nodeOrComponent) {
     return false;
   }
   return true;
+};
+function isReactElement(node) {
+  return /*#__PURE__*/react.isValidElement(node) && !isFragment$1(node);
 }
-/* eslint-enable */
+
+/**
+ * In React 19. `ref` is not a property from node.
+ * But a property from `props.ref`.
+ * To check if `props.ref` exist or fallback to `ref`.
+ */
+var getNodeRef = function getNodeRef(node) {
+  if (node && isReactElement(node)) {
+    var ele = node;
+
+    // Source from:
+    // https://github.com/mui/material-ui/blob/master/packages/mui-utils/src/getReactNodeRef/getReactNodeRef.ts
+    return ele.props.propertyIsEnumerable('ref') ? ele.props.ref : ele.ref;
+  }
+  return null;
+};
 
 var CollectionContext = /*#__PURE__*/react.createContext(null);
 /**
@@ -1533,7 +1591,7 @@ function _assertThisInitialized(self) {
 }
 
 function _possibleConstructorReturn(self, call) {
-  if (call && (_typeof$1(call) === "object" || typeof call === "function")) {
+  if (call && (_typeof(call) === "object" || typeof call === "function")) {
     return call;
   } else if (call !== void 0) {
     throw new TypeError("Derived constructors may only return object or undefined");
@@ -1602,7 +1660,7 @@ function SingleObserver(props, ref) {
     var _elementRef$current;
     return findDOMNode(elementRef.current) || (
     // Support `nativeElement` format
-    elementRef.current && _typeof$1(elementRef.current) === 'object' ? findDOMNode((_elementRef$current = elementRef.current) === null || _elementRef$current === void 0 ? void 0 : _elementRef$current.nativeElement) : null) || findDOMNode(wrapperRef.current);
+    elementRef.current && _typeof(elementRef.current) === 'object' ? findDOMNode((_elementRef$current = elementRef.current) === null || _elementRef$current === void 0 ? void 0 : _elementRef$current.nativeElement) : null) || findDOMNode(wrapperRef.current);
   };
   react.useImperativeHandle(ref, function () {
     return getDom();
@@ -2214,4 +2272,4 @@ ForwardOverflow.Item = RawItem;
 ForwardOverflow.RESPONSIVE = RESPONSIVE;
 ForwardOverflow.INVALIDATE = INVALIDATE;
 
-export { ForwardOverflow as F, RefResizeObserver as R, _typeof as _, useLayoutUpdateEffect as a, useLayoutEffect as b, canUseDom as c, useComposeRef as d, findDOMNode as e, fillRef as f, composeRef as g, warningOnce as h, isDOM as i, supportRef as s, useEvent as u, wrapperRaf as w };
+export { ForwardOverflow as F, RefResizeObserver as R, _typeof$1 as _, useLayoutUpdateEffect as a, useLayoutEffect as b, canUseDom as c, useComposeRef as d, findDOMNode as e, fillRef as f, getNodeRef as g, composeRef as h, isDOM as i, warningOnce as j, supportRef as s, useEvent as u, wrapperRaf as w };

package/dist/components/avatar.js

@@ -10,21 +10,21 @@ import './number-helper.js';
 import './string-helper.js';
 import './element-dragger.js';
 import { B as Bcm } from './bcm.js';
-import { c as ce } from './index5.js';
+import { c as ce } from './index4.js';
 import { d as defineCustomElement$2 } from './badge.js';
 import { d as defineCustomElement$1 } from './icon.js';
 
 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-inline-flex tw-items-center tw-justify-center tw-bg-[--bcm-avatar-bg] tw-text-[--bcm-avatar-text] tw-font-medium",
     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: {
@@ -82,7 +82,7 @@ const BcmAvatar = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     const dc = Generate.getTwColor({
       color: color,
       tones: {
-        200: ["bg"],
+        100: ["bg"],
         700: ["text"],
       },
       variable: "--bcm-avatar",

package/dist/components/badge.js

@@ -10,35 +10,35 @@ import './number-helper.js';
 import './string-helper.js';
 import './element-dragger.js';
 import { B as Bcm } from './bcm.js';
-import { c as ce } from './index5.js';
+import { c as ce } from './index4.js';
 
 const badgeStyle = ce({
   slots: {
-    host: "bcm-badge bcm-ui-element bcm-ui-content-display tw-inline-flex tw-items-center tw-justify-center tw-font-normal ",
+    host: "bcm-badge bcm-ui-element bcm-ui-content-display tw-inline-flex tw-items-center tw-justify-center tw-font-normal tw-text-color-default",
     base: [
       "bcm-badge__dot tw-z-10",
       "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",
+        host: "tw-text-size-3 tw-gap-1",
+        base: "bcm-badge__dot-size-small tw-text-size-3 tw-min-w-1.5 tw-min-h-1.5",
         dotText: "tw-px-1.5 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",
+        host: "tw-text-size-4 tw-gap-1.5",
+        base: "bcm-badge__dot-size-medium tw-text-size-4 tw-min-w-2 tw-min-h-2",
         dotText: "tw-px-1.5 tw-min-w-5",
       },
       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",
+        host: "tw-text-size-5 tw-gap-2",
+        base: "bcm-badge__dot-size-large tw-text-size-5 tw-min-w-2.5 tw-min-h-2.5",
         dotText: "tw-px-2 tw-min-w-6",
       },
     },

package/dist/components/bcm-accordion.js

@@ -5,7 +5,7 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { G as Generate } from './generate.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}";
+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}.bcm-accordion .bcm-expansion-panel{border-radius:0}.bcm-accordion .bcm-expansion-panel .bcm-expansion-panel__header{border-radius:0}.bcm-accordion .bcm-expansion-panel:first-child{border-top-left-radius:var(--bcm-ui-border-radius-default);border-top-right-radius:var(--bcm-ui-border-radius-default)}.bcm-accordion .bcm-expansion-panel:first-child .bcm-expansion-panel__header{border-top-left-radius:var(--bcm-ui-border-radius-default);border-top-right-radius:var(--bcm-ui-border-radius-default)}.bcm-accordion .bcm-expansion-panel:last-child{border-bottom-left-radius:var(--bcm-ui-border-radius-default);border-bottom-right-radius:var(--bcm-ui-border-radius-default)}.bcm-accordion .bcm-expansion-panel:last-child .bcm-expansion-panel__header{border-bottom-left-radius:var(--bcm-ui-border-radius-default);border-bottom-right-radius:var(--bcm-ui-border-radius-default)}";
 
 const BcmAccordion$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -59,7 +59,7 @@ const BcmAccordion$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
     }
   }
   render() {
-    return (h(Host, { id: this._id }, h("slot", null)));
+    return (h(Host, { id: this._id, class: "bcm-accordion" }, h("slot", null)));
   }
   get el() { return this; }
   static get style() { return accordionCss; }

package/dist/components/bcm-alert.js

@@ -3,32 +3,12 @@
  * Copyright (c) Bromcom.
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { G as Generate, s as snq, S as StatusProps, T as TypeProps } from './generate.js';
+import { G as Generate, S as StatusProps, T as TypeProps } from './generate.js';
 import { c as classnames } from './index2.js';
-import { c as createStore } from './index4.js';
 import { S as StringHelper } from './string-helper.js';
 import { d as defineCustomElement$2 } from './icon.js';
 
-const { state } = createStore({
-  value: new Map(),
-  setData: {},
-  removeData: {}
-});
-const setValue = (val) => {
-  const data = Object.assign(Object.assign(Object.assign({}, val), { size: val.bigIcon ? 'medium' : 14, iconType: val.bigIcon ? 'outlined' : 'fill' }), Generate.getIconAttrWithStatusType(val.status));
-  state.value.set(data.id, data);
-};
-const removeValue = (_id) => {
-  state.value.delete(_id);
-};
-const getValue = (id) => snq(() => state.value.get(id), {});
-const alertStates = {
-  setValue,
-  removeValue,
-  getValue
-};
-
-const alertCss = "@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-alert{display:block;width:100%;max-width:400px;box-sizing:border-box;padding:8px 16px;box-shadow:0px 2px 4px rgba(0, 0, 0, 0.15);border-radius:2px;position:relative;grid-gap:8px}.bcm-alert.hidden{display:none}.bcm-alert.full-width{max-width:100%}.bcm-alert__status-info{border:1px solid var(--bcm-color-blue-3);background-color:var(--bcm-color-blue-1)}.bcm-alert__status-error{border:1px solid var(--bcm-color-red-3);background-color:var(--bcm-color-red-1)}.bcm-alert__status-warning{border:1px solid var(--bcm-color-warmyellow-3);background-color:var(--bcm-color-warmyellow-1)}.bcm-alert__status-success{border:1px solid var(--bcm-color-green-3);background-color:var(--bcm-color-green-1)}.bcm-alert__type-banner{border:none}.bcm-alert__header{display:flex;align-items:center;justify-content:space-between;padding:4px 0}.bcm-alert__header-message{display:flex;align-items:center;grid-gap:8px;color:var(--bcm-color-grey-8)}.bcm-alert__header-dismiss{display:flex;position:absolute;top:-1px;right:0;padding:16px;color:var(--bcm-color-grey-8)}.bcm-alert__header-dismiss:hover{cursor:pointer;color:var(--bcm-color-grey-9)}.bcm-alert__content{color:var(--bcm-color-grey-8)}.bcm-alert__content p{margin:0;padding:0}";
+const alertCss = "@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-alert{display:block;font-family:Inter, sans-serif;font-size:var(--bcm-ui-font-size-5);line-height:var(--bcm-ui-line-height-5);font-weight:500;width:100%;max-width:400px;box-sizing:border-box;padding:var(--bcm-ui-spacing-2) var(--bcm-ui-spacing-5) var(--bcm-ui-spacing-2) var(--bcm-ui-spacing-3);border-radius:var(--bcm-ui-border-radius-default);position:relative}.bcm-alert.hidden{display:none}.bcm-alert.full-width{max-width:100%}.bcm-alert__status-default{color:var(--bcm-ui-color-text-default);background-color:var(--bcm-ui-color-background-default-default)}.bcm-alert__status-info{color:var(--bcm-ui-color-text-info);background-color:var(--bcm-ui-color-background-stated-info-default)}.bcm-alert__status-error{color:var(--bcm-ui-color-text-error);background-color:var(--bcm-ui-color-background-stated-error-default)}.bcm-alert__status-warning{color:var(--bcm-ui-color-text-warning);background-color:var(--bcm-ui-color-background-stated-warning-default)}.bcm-alert__status-success{color:var(--bcm-ui-color-text-success);background-color:var(--bcm-ui-color-background-stated-success-default)}.bcm-alert__type-banner{border:none}.bcm-alert__header{display:inline-block}.bcm-alert__header-message{display:flex;align-items:center;gap:var(--bcm-ui-spacing-2);margin-right:var(--bcm-ui-spacing-2)}.bcm-alert__header-message:empty{display:none}.bcm-alert__header-dismiss{display:flex;position:absolute;top:var(--bcm-ui-spacing-1);right:var(--bcm-ui-spacing-1);padding:var(--bcm-ui-spacing-2)}.bcm-alert__header-dismiss:hover{cursor:pointer}.bcm-alert__content{display:inline-block}.bcm-alert__content p{margin:0;padding:0}";
 
 const BcmAlert$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -37,7 +17,6 @@ const BcmAlert$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.alertdismissible = createEvent(this, "bcm-alert-dismissible", 7);
     this.hidden = false;
     this._id = Generate.UID();
-    this._title = undefined;
     this.description = undefined;
     this.status = StatusProps.info;
     this.type = TypeProps.basic;
@@ -58,40 +37,48 @@ const BcmAlert$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         return;
       }
     }
-    this.setData();
   }
   dismiss(e) {
     this.alertdismissible.emit(e);
     this.el.remove();
   }
-  getStateData() {
-    return alertStates.getValue(this._id);
-  }
-  setData() {
-    const { status, type, bigIcon } = this;
-    alertStates.setValue({
-      id: this._id,
-      status,
-      type,
-      bigIcon,
-    });
+  // setData() {
+  //     const { status, type, bigIcon } = this;
+  //     alertStates.setValue({
+  //         id: this._id,
+  //         status,
+  //         type,
+  //         bigIcon,
+  //     });
+  // }
+  statusIcon() {
+    const { status } = this;
+    switch (status) {
+      case StatusProps.info:
+        return "far fa-info-circle";
+      case StatusProps.error:
+        return "far fa-times-circle";
+      case StatusProps.warning:
+        return "far fa-exclamation-circle";
+      case StatusProps.success:
+        return "far fa-check-circle";
+    }
   }
   render() {
-    const { fullWidth, status, type, icon, bigIcon, _title, hidden, dismissible, description } = this;
-    const hostClasses = classnames('bcm-alert', 'bcm-alert__type-' + type, 'bcm-alert__status-' + status, {
+    const { fullWidth, status, type, icon, bigIcon, hidden, dismissible, description } = this;
+    const hostClasses = classnames('bcm-alert bcm-ui-element', 'bcm-alert__type-' + type, 'bcm-alert__status-' + status, {
       'full-width': fullWidth,
       hidden,
     });
-    const headerMessage = classnames('bcm-alert__header-message', !!description ? 'size-3' : 'size-2');
-    const state = this.getStateData();
-    return (h(Host, { class: hostClasses }, h("span", { hidden: true }, h("slot", null)), h("header", { class: "bcm-alert__header" }, h("span", { class: headerMessage }, (bigIcon || icon) && h("bcm-icon", { icon: state.icon }), _title), dismissible && (h("span", { class: "bcm-alert__header-dismiss", onClick: e => this.dismiss(e) }, typeof dismissible === 'string' ? dismissible : h("bcm-icon", { icon: "fal fa-times" })))), h("main", { class: "bcm-alert__content size-2" }, description && h("p", null, description), h("slot", null))));
+    const headerMessage = classnames('bcm-alert__header-message', !!description ? '' : '');
+    const _icon = this.statusIcon();
+    return (h(Host, { class: hostClasses }, h("header", { class: "bcm-alert__header" }, h("span", { class: headerMessage }, (bigIcon || icon) && h("bcm-icon", { icon: _icon }))), h("main", { class: "bcm-alert__content" }, description && h("p", null, description), h("slot", null)), dismissible && (h("span", { class: "bcm-alert__header-dismiss", onClick: e => this.dismiss(e) }, typeof dismissible === 'string' ? dismissible : h("bcm-icon", { icon: "far fa-times" })))));
   }
   get el() { return this; }
   static get style() { return alertCss; }
 }, [4, "bcm-alert", {
     "hidden": [1028],
     "_id": [1537, "id"],
-    "_title": [1032],
     "description": [1032],
     "status": [1025],
     "type": [1025],

package/dist/components/bcm-attendance-actions-comment.js

@@ -12,7 +12,7 @@ import './element-dragger.js';
 import { d as delay } from './utils.js';
 import { F as FloatingUI } from './floating-ui.js';
 import { B as Bcm } from './bcm.js';
-import { c as ce } from './index5.js';
+import { c as ce } from './index4.js';
 import { d as defineCustomElement$a } from './button.js';
 import { d as defineCustomElement$9 } from './colorful.js';
 import { d as defineCustomElement$8 } from './form.js';

package/dist/components/bcm-attendance-actions-dropdown.js

@@ -12,7 +12,7 @@ import './element-dragger.js';
 import { F as FloatingUI } from './floating-ui.js';
 import { B as Bcm } from './bcm.js';
 import { c as classnames } from './index2.js';
-import { c as ce } from './index5.js';
+import { c as ce } from './index4.js';
 
 const attendanceActionDropdownStyle = ce({
   slots: {

package/dist/components/bcm-attendance-actions.js

@@ -11,7 +11,7 @@ import './string-helper.js';
 import './element-dragger.js';
 import { B as Bcm } from './bcm.js';
 import { c as classnames } from './index2.js';
-import { c as ce } from './index5.js';
+import { c as ce } from './index4.js';
 
 // --bcm-attendance-actions-button-bg: #F1F5F9; /* slate-100 */
 // --bcm-attendance-actions-button-text: #334155; /* slate-700 */

package/dist/components/bcm-button-group.js

@@ -8,7 +8,7 @@ import { a as Bcm } from './bcm.js';
 import { c as classnames } from './index2.js';
 import { S as StringHelper } from './string-helper.js';
 
-const buttonGroupCss = "@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-group{font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;display:flex;flex-direction:row;align-items:center;justify-content:flex-start;flex-wrap:nowrap;width:fit-content;background-color:var(--bcm-new-ds-color-slate-300);border:1px solid var(--bcm-new-ds-color-slate-300);gap:1px;border-radius:4px}.bcm-button-group .bcm-button__container{border-radius:0;border:none}.bcm-button-group .bcm-button:first-child .bcm-button__container{border-top-left-radius:4px;border-bottom-left-radius:4px}.bcm-button-group .bcm-button:last-child .bcm-button__container{border-top-right-radius:4px;border-bottom-right-radius:4px}.bcm-button-group__vertical{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;flex-wrap:nowrap}.bcm-button-group__vertical .bcm-button{width:100%}.bcm-button-group__vertical .bcm-button__container{width:100%;border-radius:0}.bcm-button-group__vertical .bcm-button:first-child .bcm-button__container{border-radius:4px 4px 0 0}.bcm-button-group__vertical .bcm-button:last-child .bcm-button__container{border-radius:0 0 4px 4px}";
+const buttonGroupCss = "@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-button-group{font-family:Inter, sans-serif;font-size:var(--bcm-ui-font-size-5);line-height:var(--bcm-ui-line-height-5);font-weight:500;display:flex;flex-direction:row;align-items:center;justify-content:center;width:fit-content;background-color:var(--bcm-ui-color-background-default-active);border:1px solid var(--bcm-ui-color-border-default);gap:1px;border-radius:var(--bcm-ui-border-radius-default)}.bcm-button-group .bcm-button__container{border-radius:0;border:none}.bcm-button-group .bcm-button:first-child .bcm-button__container{border-top-left-radius:var(--bcm-ui-border-radius-default);border-bottom-left-radius:var(--bcm-ui-border-radius-default)}.bcm-button-group .bcm-button:last-child .bcm-button__container{border-top-right-radius:var(--bcm-ui-border-radius-default);border-bottom-right-radius:var(--bcm-ui-border-radius-default)}.bcm-button-group__vertical{flex-direction:column;align-items:center;justify-content:center}.bcm-button-group__vertical .bcm-button{width:100%}.bcm-button-group__vertical .bcm-button__container{width:100%;border-radius:0}.bcm-button-group__vertical .bcm-button:first-child .bcm-button__container{border-radius:var(--bcm-ui-border-radius-default) var(--bcm-ui-border-radius-default) 0 0}.bcm-button-group__vertical .bcm-button:last-child .bcm-button__container{border-radius:0 0 var(--bcm-ui-border-radius-default) var(--bcm-ui-border-radius-default)}";
 
 const BcmButtonGroup$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/bcm-checkbox-group.js

@@ -7,7 +7,7 @@ import { c as classnames } from './index2.js';
 import { G as Generate, s as snq } from './generate.js';
 import { a as Bcm } from './bcm.js';
 import { d as delay, g as getChildElements } from './utils.js';
-import { c as createStore } from './index4.js';
+import { c as createStore } from './index5.js';
 import { L as LabelTemplate, d as defineCustomElement$3 } from './label.js';
 import { I as IsLoad } from './is-load-decorator.js';
 import { d as defineCustomElement$5 } from './checkbox.js';

package/dist/components/bcm-color-input.js

@@ -64,7 +64,7 @@ const BcmColorInput$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     return typeof window !== "undefined" && "EyeDropper" in window;
   }
   render() {
-    return (h(Host, { class: "tw-block" }, h("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("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: {
+    return (h(Host, { class: "tw-block" }, h("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("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-solid tw-border-color-default", style: {
         backgroundColor: this.value,
       } }), this.isEyeDropperSupported() && h("i", { slot: "suffix", class: "far fa-eye-dropper", onClick: () => this.eyeDropper() })), h("bcm-linked", { targetId: this._id + "-color-container" }, h("bcm-colorful", { id: this._id + "-picker", color: this.value, onBcmChange: e => this.handleChange(e.detail) }))));
   }