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

package/dist/cjs/popover.style-e390b5a1.js

@@ -0,0 +1,108 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+'use strict';
+
+const generate = require('./generate-eda14f12.js');
+const index = require('./index-d3b89435.js');
+
+class Validators {
+}
+Validators.compareTwoArrayIsSame = (arr1, arr2) => generate.snq(() => arr1.length === arr2.length && arr1.every((v, i) => v === arr2[i]));
+Validators.isEmailValid = (str) => /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(str);
+Validators.isUrlValid = (str) => /^(?:(?:https?|ftp):\/\/)(?:\S+(?::\S*)?@)?(?:(?!(?:10|127)(?:\.\d{1,3}){3})(?!(?:169\.254|192\.168)(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)(?:\.(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)*(?:\.(?:[a-z\u00a1-\uffff]{2,})))(?::\d{2,5})?(?:\/\S*)?$/i.test(str);
+Validators.isNumberValid = (str) => /^[+-]?\d+$/.test(str);
+Validators.isNumberFloatValid = (str) => /^\d+(\.\d+)?$/.test(str);
+Validators.isPhoneValid = (str) => /^(?=.*[0-9])[- +()0-9]+$/.test(str);
+Validators.pattern = (str, pattern) => new RegExp(pattern).test(str);
+Validators.isValidate = (str, type) => {
+  switch (type) {
+    case 'email':
+      return Validators.isEmailValid(str);
+    case 'url':
+      return Validators.isUrlValid(str);
+    case 'number':
+      return Validators.isNumberValid(str) || Validators.isNumberFloatValid(str);
+    case 'phone':
+      return Validators.isPhoneValid(str);
+    default:
+      return true;
+  }
+};
+
+const tooltipStyle = index.ce({
+  slots: {
+    host: [
+      "bcm-tooltip tw-inline-flex tw-h-fit tw-w-fit",
+    ],
+    tooltip: [
+      "bcm-ui-element bcm-ui-content-display",
+      "tw-whitespace-normal tw-break-words tw-font-semibold",
+      "tw-absolute tw-top-0 tw-left-0 tw-z-tooltip",
+      "tw-opacity-0 tw-transition-opacity tw-duration-300",
+      "tw-max-w-xs tw-py-1 tw-px-3",
+      "tw-pointer-events-none",
+      "tw-block tw-rounded-md",
+      "tw-bg-[--bcm-tooltip-bg] tw-text-[--bcm-tooltip-text]"
+    ]
+  },
+  variants: {
+    size: {
+      small: {
+        tooltip: "tw-text-size-3",
+      },
+      medium: {
+        tooltip: "tw-text-size-4",
+      },
+      large: {
+        tooltip: "tw-text-size-5",
+      },
+    },
+  },
+  defaultVariants: {
+    size: "medium",
+  },
+});
+
+const popoverStyle = index.ce({
+  slots: {
+    host: [
+      "bcm-popover tw-inline-flex tw-h-fit tw-w-fit",
+    ],
+    popover: [
+      "bcm-ui-element bcm-ui-content-display",
+      "tw-whitespace-normal tw-break-words",
+      "tw-absolute tw-top-0 tw-left-0 tw-z-tooltip",
+      "tw-opacity-0 tw-transition-opacity tw-duration-300",
+      "tw-max-w-xs",
+      "tw-pointer-events-none",
+      "tw-block tw-rounded-md",
+      "tw-bg-[--bcm-popover-bg] tw-text-[--bcm-popover-text]",
+      "tw-shadow-3"
+    ],
+    messageStyle: "tw-font-semibold tw-w-full tw-px-3 tw-py-1.5",
+    contentStyle: "tw-border-0 tw-border-t tw-border-solid tw-border-[--bcm-popover-text]",
+    dividerStyle: "tw-font-normal tw-px-3 tw-py-1.5",
+  },
+  variants: {
+    size: {
+      small: {
+        popover: "tw-text-size-3",
+      },
+      medium: {
+        popover: "tw-text-size-4",
+      },
+      large: {
+        popover: "tw-text-size-5",
+      },
+    },
+  },
+  defaultVariants: {
+    size: "medium",
+  },
+});
+
+exports.Validators = Validators;
+exports.popoverStyle = popoverStyle;
+exports.tooltipStyle = tooltipStyle;

package/dist/cjs/result.style-f58d0ac4.js

@@ -0,0 +1,56 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+'use strict';
+
+const index = require('./index-d3b89435.js');
+
+const resultStyle = index.ce({
+  slots: {
+    host: [
+      "bcm-result bcm-ui-element bcm-ui-feedback",
+      "tw-flex tw-flex-col tw-items-center tw-justify-center ",
+      "tw-rounded-cards",
+      "tw-py-8 tw-px-6 tw-w-full",
+      "tw-text-size-5 tw-text-color-default tw-font-medium tw-text-center tw-text-balanced"
+    ],
+    iconStyle: "tw-text-size-11 tw-mb-6 empty:tw-hidden",
+    headingStyle: "tw-text-size-7 tw-font-semibold tw-text-color-header tw-mb-2 empty:tw-hidden",
+    descriptionStyle: "empty:tw-hidden",
+    footer: [
+      "tw-flex tw-justify-center tw-items-center empty:tw-hidden",
+      "tw-gap-2",
+      "tw-mt-8",
+    ],
+  },
+  variants: {
+    status: {
+      default: {
+        host: "",
+        iconStyle: "tw-text-color-primary",
+      },
+      success: {
+        host: "",
+        iconStyle: "tw-text-color-success",
+      },
+      warning: {
+        host: "",
+        iconStyle: "tw-text-color-warning",
+      },
+      error: {
+        host: "",
+        iconStyle: "tw-text-color-error",
+      },
+      info: {
+        host: "",
+        iconStyle: "tw-text-color-primary",
+      },
+    },
+  },
+  defaultVariants: {
+    status: "default",
+  },
+});
+
+exports.resultStyle = resultStyle;

package/dist/cjs/segment-picker.style-ce057603.js

@@ -0,0 +1,55 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+'use strict';
+
+const index = require('./index-d3b89435.js');
+
+const segmentPickerStyle = index.ce({
+  slots: {
+    base: [
+      "bcm-segment-picker bcm-ui-element bcm-ui-action",
+      "tw-bg-color-default tw-rounded-cards tw-p-1 tw-gap-0.5 tw-text-color",
+      "tw-text-size-5 tw-font-medium",
+      "tw-flex tw-flex-row tw-justify-center tw-items-center",
+      "tw-relative",
+      "before:tw-bg-[var(--highlight-color)] before:tw-rounded before:tw-absolute before:tw-z-0 before:tw-top-1 before:tw-bottom-1 before:tw-left-0",
+      "before:tw-w-[var(--highlight-width)] before:tw-transform before:tw-translate-x-[var(--highlight-x-pos)]",
+      "before:tw-transition-all before:tw-duration-300 before:tw-ease-in-out",
+    ],
+    item: [
+      "bcm-segment-picker__item",
+      "tw-py-2 tw-px-3 tw-gap-2.5 tw-rounded",
+      "tw-flex tw-items-center tw-justify-center",
+      "tw-relative tw-z-10",
+      "tw-transition-color tw-duration-300 tw-ease-in-out",
+    ],
+  },
+  variants: {
+    size: {
+      small: {},
+      medium: {},
+      large: {},
+    },
+    disabled: {
+      true: { item: "tw-cursor-not-allowed" },
+      false: {
+        item: ["tw-cursor-pointer", "tw-text-color"],
+      },
+    },
+    active: {
+      true: {
+        item: ["", "tw-text-color-base"],
+      },
+      false: {},
+    },
+  },
+  defaultVariants: {
+    size: "medium",
+    disabled: false,
+    active: false,
+  },
+});
+
+exports.segmentPickerStyle = segmentPickerStyle;

package/dist/cjs/{slot-template-29229e8f.js → slot-template-d02ae4e4.js}

@@ -4,8 +4,8 @@
  */
 'use strict';
 
-const index = require('./index-c591ecec.js');
-const stringHelper = require('./string-helper-1ee6dc21.js');
+const index = require('./index-bb6ac306.js');
+const stringHelper = require('./string-helper-cc89c9d6.js');
 
 const SlotTemplate = ({ value, className, name }) => {
   return stringHelper.StringHelper.isNullOrEmpty(value) ? index.h("span", { class: className },

package/dist/cjs/{string-helper-1ee6dc21.js → string-helper-cc89c9d6.js}

@@ -4,7 +4,7 @@
  */
 'use strict';
 
-const bcm = require('./bcm-1d1fcf21.js');
+const bcm = require('./bcm-51d38d17.js');
 const _commonjsHelpers = require('./_commonjsHelpers-ed84c3ca.js');
 
 var slugify = _commonjsHelpers.createCommonjsModule(function (module, exports) {

package/dist/cjs/types-e4c4d1b2.js

@@ -0,0 +1,175 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+'use strict';
+
+const index = require('./index-d3b89435.js');
+
+const checkboxStyle = index.ce({
+  slots: {
+    host: [
+      "bcm-checkbox2",
+      "bcm-ui-element bcm-ui-inputs",
+      "tw-inline-flex tw-w-fit tw-flex-col tw-mb-2"
+    ],
+    inputContainer: [
+      "bcm-checkbox2__input",
+      "tw-flex tw-items-start tw-justify-start tw-pt-1"
+    ],
+    labelContainer: [
+      "bcm-checkbox2__label tw-group",
+      "tw-flex tw-items-center tw-justify-start",
+    ],
+    input: [
+      "bcm-checkbox2__input-input",
+      "tw-appearance-none tw-sr-only tw-hidden",
+    ],
+    slot: [
+      "bcm-checkbox2__slot slot",
+      "empty:tw-hidden",
+      "tw-text-[--bcm-checkbox-text] tw-font-medium"
+    ],
+    checkmark: [
+      "bcm-checkbox2__label-icon",
+      "tw-flex tw-items-center tw-justify-center",
+      "tw-border tw-border-solid tw-rounded",
+      ""
+    ],
+  },
+  variants: {
+    size: {
+      small: {
+        host: "bcm-checkbox2-size-small",
+        inputContainer: "tw-min-h-6 ",
+        checkmark: "tw-w-3.5 tw-h-3.5 tw-text-size-2",
+        labelContainer: "tw-gap-2"
+      },
+      medium: {
+        host: "bcm-checkbox2-size-medium ",
+        inputContainer: "tw-min-h-8",
+        checkmark: "tw-w-4 tw-h-4 tw-text-size-3",
+        labelContainer: "tw-gap-2.5"
+      },
+      large: {
+        host: "bcm-checkbox2-size-large",
+        inputContainer: "tw-min-h-10 tw-gap-3",
+        checkmark: "tw-w-4.5 tw-h-4.5 tw-text-size-4",
+        labelContainer: "tw-gap-3"
+      },
+    },
+    error: {
+      true: {
+        host: "error",
+      },
+    },
+    disabled: {
+      true: {
+        host: "disabled  ",
+        labelContainer: "tw-cursor-not-allowed",
+      },
+      false: {
+        labelContainer: "tw-cursor-pointer",
+        slot: "",
+      }
+    },
+    hidden: {
+      true: {
+        host: "hidden",
+      },
+    },
+    readonly: {
+      true: {
+        host: "readonly",
+      },
+    },
+    indeterminate: {
+      true: {
+        host: "indeterminate",
+        checkmark: "bcm-checkbox2__label-icon-indeterminate",
+      },
+    },
+    checked: {
+      true: {
+        host: "checked",
+        checkmark: [
+          "bcm-checkbox2__label-icon-checked",
+        ],
+      },
+      false: {
+        host: "",
+        checkmark: "",
+      }
+    },
+    noMargin: {
+      true: {
+        host: "!tw-m-0",
+        inputContainer: " !tw-min-h-0 !tw-p-0",
+      },
+    },
+  },
+  compoundVariants: [
+    {
+      disabled: true,
+      checked: true,
+      class: {
+        checkmark: "tw-bg-color-disabled tw-border-color-disabled tw-text-color-disabled",
+      }
+    },
+    {
+      disabled: true,
+      checked: false,
+      class: {
+        checkmark: "tw-bg-color-disabled tw-border-color-disabled tw-text-transparent",
+      }
+    },
+    {
+      disabled: false,
+      checked: true,
+      class: {
+        checkmark: [
+          "tw-text-white",
+          "tw-bg-[--bcm-checkbox-checked-bg] tw-border-[--bcm-checkbox-checked-border]",
+          "group-hover:tw-bg-[--bcm-checkbox-checked-bg-hover] group-hover:tw-border-[--bcm-checkbox-checked-border-hover]",
+        ],
+      }
+    },
+    {
+      disabled: false,
+      checked: false,
+      class: {
+        checkmark: [
+          "tw-text-transparent",
+          "tw-bg-[--bcm-checkbox-bg] tw-border-[--bcm-checkbox-border]",
+          "group-hover:tw-bg-[--bcm-checkbox-bg-hover] group-hover:tw-border-[--bcm-checkbox-border-hover]",
+        ],
+      }
+    },
+  ],
+  defaultVariants: {
+    size: "medium",
+    error: false,
+    disabled: false,
+    hidden: false,
+    readonly: false,
+    indeterminate: false,
+    checked: false,
+    noMargin: false,
+  },
+});
+
+exports.defaultIcons = void 0;
+(function (defaultIcons) {
+  defaultIcons["search"] = "fal fa-search";
+  defaultIcons["email"] = "fal fa-mail";
+  defaultIcons["tel"] = "fal fa-phone";
+  defaultIcons["url"] = "fal fa-link";
+})(exports.defaultIcons || (exports.defaultIcons = {}));
+var iconSizes;
+(function (iconSizes) {
+  iconSizes[iconSizes["small"] = 14] = "small";
+  iconSizes[iconSizes["medium"] = 16] = "medium";
+  iconSizes[iconSizes["large"] = 18] = "large";
+})(iconSizes || (iconSizes = {}));
+
+exports.checkboxStyle = checkboxStyle;

package/dist/collection/collection-manifest.json

@@ -12,39 +12,45 @@
     "./components/atoms/label/label.js",
     "./components/atoms/link/link.js",
     "./components/molecules/accordion/accordion.js",
-    "./components/molecules/stepper/stepper.js",
     "./components/molecules/alert/alert.js",
     "./components/molecules/breadcrumb/breadcrumb.js",
     "./components/molecules/button-group/button-group.js",
     "./components/molecules/card/card.js",
-    "./components/molecules/checkbox/checkbox-lite.js",
     "./components/molecules/checkbox/checkbox.js",
-    "./components/molecules/checkbox/group.js",
+    "./components/molecules/checkbox-group/checkbox-group.js",
     "./components/molecules/color-input/color-input.js",
     "./components/molecules/drawer/drawer.js",
     "./components/molecules/dropdown/dropdown.js",
     "./components/molecules/empty/empty.js",
     "./components/molecules/error-layout/error-layout.js",
+    "./components/molecules/expansion-panel/bcm-expansion-panel-description.js",
+    "./components/molecules/expansion-panel/bcm-expansion-panel-extra.js",
+    "./components/molecules/expansion-panel/bcm-expansion-panel-header.js",
     "./components/molecules/expansion-panel/expansion-panel.js",
     "./components/molecules/input/input.js",
-    "./components/molecules/input/input2.js",
     "./components/molecules/input-dropdown/input-dropdown.js",
     "./components/molecules/item/item.js",
     "./components/molecules/items/items.js",
     "./components/molecules/linked/linked.js",
     "./components/molecules/menu/menu.js",
     "./components/molecules/message/message.js",
+    "./components/molecules/modal/modal-footer.js",
+    "./components/molecules/modal/modal-header.js",
     "./components/molecules/modal/modal.js",
     "./components/molecules/notification/notification.js",
     "./components/molecules/number-input/number-input.js",
     "./components/molecules/number-input/react-input.js",
     "./components/molecules/popconfirm/popconfirm-box.js",
     "./components/molecules/popconfirm/popconfirm.js",
+    "./components/molecules/popconfirm-v2/pop-confirm-host.js",
+    "./components/molecules/popconfirm-v2/popconfirm-v2.js",
     "./components/molecules/popover/popover.js",
     "./components/molecules/progress/progress.js",
     "./components/molecules/radio/radio.js",
     "./components/molecules/range/range.js",
+    "./components/molecules/result/result-footer.js",
     "./components/molecules/result/result.js",
+    "./components/molecules/stepper/stepper.js",
     "./components/molecules/search/search.js",
     "./components/molecules/skeleton/skeleton.js",
     "./components/molecules/stepper/step.js",
@@ -57,6 +63,7 @@
     "./components/molecules/timeline/timeline.js",
     "./components/molecules/tooltip/tooltip.js",
     "./components/organism/autocomplete/autocomplete.js",
+    "./components/organism/date/date.js",
     "./components/organism/date-picker/date-picker.js",
     "./components/organism/datetime-picker/datetime-picker.js",
     "./components/organism/form/form-group.js",
@@ -64,6 +71,7 @@
     "./components/organism/form-2/form-2.js",
     "./components/organism/list/list.js",
     "./components/organism/time-picker/time-picker.js",
+    "./components/other/arrow/arrow.js",
     "./components/other/attendance/attendance.js",
     "./components/other/attendance-actions/attendance-actions-comment.js",
     "./components/other/attendance-actions/attendance-actions-dropdown.js",
@@ -76,7 +84,10 @@
     "./components/other/modal-2/modal-2-header.js",
     "./components/other/modal-2/modal-2.js",
     "./components/other/overlay/overlay.js",
+    "./components/other/resizable-pane/resizable-pane.js",
     "./components/other/scroll-area/scroll-area.js",
+    "./components/other/segment-picker/segment-picker-item.js",
+    "./components/other/segment-picker/segment-picker.js",
     "./components/other/shortcut/shortcut.js",
     "./components/other/toast/toast.js",
     "./components/other/typography/typography.js",
@@ -106,7 +117,6 @@
     "./components/other_deprecated/treeview/treeview.js",
     "./components/third-parts/colorful/colorful.js",
     "./components/third-parts/rc-overflow/rc-overflow.js",
-    "./components/third-parts/rc-picker/date.js",
     "./components/third-parts/rc-picker/rc-picker.js",
     "./components/third-parts/table/table.js"
   ],

package/dist/collection/components/atoms/{icon/icon.css → avatar/avatar.css}

@@ -122,6 +122,8 @@
   margin-right: 8px;
 }
 
-.bcm-icon.hidden {
-  display: none;
+:root {
+  --bcm-avatar-bg: var(--bcm-ui-color-background);
+  --bcm-avatar-text: var(--bcm-ui-color-text);
+  --bcm-avatar-radius: 50%;
 }

package/dist/collection/components/atoms/avatar/avatar.js

@@ -26,7 +26,7 @@ export class BcmAvatar {
     return initials.substring(0, 2);
   }
   renderDefaultIcon() {
-    return h("bcm-icon", { icon: this.icon });
+    return h("i", { class: this.icon });
   }
   render() {
     const { shape, size, status, color, blink } = this;
@@ -34,7 +34,7 @@ export class BcmAvatar {
     const dc = Generate.getTwColor({
       color: color,
       tones: {
-        200: ["bg"],
+        100: ["bg"],
         700: ["text"],
       },
       variable: "--bcm-avatar",
@@ -43,7 +43,7 @@ export class BcmAvatar {
       ? {
         width: `${size}px`,
         height: `${size}px`,
-        fontSize: `${+size / 3}px`,
+        fontSize: `${+size / 2}px`,
       }
       : {};
     const RenderContent = () => {
@@ -68,6 +68,16 @@ export class BcmAvatar {
     return (h(Host, { role: "img", "aria-label": this.alt || this.name || "Avatar", class: base(), style: Object.assign(Object.assign({}, dc), customSize) }, h(RenderContent, null), status && h("bcm-badge", { class: badge(), status: status, blink: blink, "aria-hidden": "true" }), h("slot", null)));
   }
   static get is() { return "bcm-avatar"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["avatar.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["avatar.css"]
+    };
+  }
   static get properties() {
     return {
       "_id": {

package/dist/collection/components/atoms/avatar/avatar.style.js

@@ -5,15 +5,15 @@
 import { tv } from "tailwind-variants";
 export const avatarStyle = tv({
   slots: {
-    base: "bcm-avatar bcm-ui-element bcm-ui-content-display tw-uppercase tw-inline-flex tw-items-center tw-justify-center tw-bg-[--bcm-avatar-bg] tw-text-[--bcm-avatar-text]",
+    base: "bcm-avatar bcm-ui-element bcm-ui-content-display tw-uppercase tw-font-medium tw-inline-flex tw-items-center tw-justify-center tw-bg-[--bcm-avatar-bg] tw-text-[--bcm-avatar-text]",
     image: "tw-w-full tw-h-full",
     badge: "",
   },
   variants: {
     size: {
-      small: "bcm-avatar__size-small tw-text-1 tw-w-6 tw-h-6",
-      medium: "bcm-avatar__size-medium tw-text-2 tw-w-8 tw-h-8",
-      large: "bcm-avatar__size-large tw-text-3 tw-w-10 tw-h-10",
+      small: "bcm-avatar__size-small tw-text-size-4 tw-w-6 tw-h-6",
+      medium: "bcm-avatar__size-medium tw-text-size-5 tw-w-8 tw-h-8",
+      large: "bcm-avatar__size-large tw-text-size-6 tw-w-10 tw-h-10",
     },
     shape: {
       ellipse: {
@@ -22,8 +22,8 @@ export const avatarStyle = tv({
         badge: "tw-top-0 tw-right-0",
       },
       square: {
-        base: "bcm-avatar__shape-square tw-rounded",
-        image: "tw-rounded",
+        base: "bcm-avatar__shape-square tw-rounded-[--bcm-ui-radius]",
+        image: "tw-rounded-[--bcm-ui-radius]",
         badge: "tw--top-0.5 tw--right-0.5",
       },
     },

package/dist/collection/components/{molecules/accordion/accordion.css → atoms/badge/badge.css}

@@ -122,6 +122,7 @@
   margin-right: 8px;
 }
 
-:host {
-  display: block;
+:root {
+  --bcm-badge-bg: var(--bcm-ui-color-background);
+  --bcm-badge-text: var(--bcm-ui-color-text);
 }

package/dist/collection/components/atoms/badge/badge.js

@@ -37,6 +37,16 @@ export class BcmBadge {
     return (h(Host, { class: host(), role: "status", "aria-live": "polite" }, h("div", { class: base(), style: style }, h("span", { class: dotText(), role: "presentation", "aria-hidden": "true" }, value), h("span", { class: "tw-sr-only" }, value)), h("slot", null)));
   }
   static get is() { return "bcm-badge"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["badge.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["badge.css"]
+    };
+  }
   static get properties() {
     return {
       "_id": {

package/dist/collection/components/atoms/badge/badge.style.js

@@ -11,26 +11,26 @@ export const badgeStyle = tv({
       "tw-flex tw-items-center tw-justify-center tw-flex-row",
       "tw-rounded-full tw-text-center",
       "tw-bg-[--bcm-badge-bg] tw-text-[--bcm-badge-text]",
-      "tw-whitespace-nowrap",
+      "tw-whitespace-nowrap tw-font-medium",
     ],
     dotText: "empty:tw-hidden",
   },
   variants: {
     size: {
       small: {
-        host: "tw-text-2 tw-gap-1",
-        base: "bcm-badge__dot-size-small tw-text-1 tw-min-w-1.5 tw-min-h-1.5",
-        dotText: "tw-px-1.5 tw-min-w-4",
+        host: "tw-text-size-3 tw-gap-1",
+        base: "bcm-badge__dot-size-small  tw-min-w-1.5 tw-min-h-1.5",
+        dotText: "tw-px-1 tw-min-w-4",
       },
       medium: {
-        host: "tw-text-3 tw-gap-1.5",
-        base: "bcm-badge__dot-size-medium tw-text-2 tw-min-w-2 tw-min-h-2",
-        dotText: "tw-px-1.5 tw-min-w-5",
+        host: "tw-text-size-4 tw-gap-1.5",
+        base: "bcm-badge__dot-size-medium  tw-min-w-2 tw-min-h-2",
+        dotText: "tw-px-1.5 tw-py-0.5 tw-min-w-6",
       },
       large: {
-        host: "tw-text-4 tw-gap-2",
-        base: "bcm-badge__dot-size-large tw-text-3 tw-min-w-2.5 tw-min-h-2.5",
-        dotText: "tw-px-2 tw-min-w-6",
+        host: "tw-text-size-5 tw-gap-2",
+        base: "bcm-badge__dot-size-large  tw-min-w-2.5 tw-min-h-2.5",
+        dotText: "tw-px-2 tw-py-1 tw-min-w-8",
       },
     },
     blink: {