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

package/dist/collection/components/third-parts/colorful/colorful.css

@@ -1,5 +1,4 @@
 @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;
@@ -123,247 +122,6 @@
   margin-right: 8px;
 }
 
-.bcm-input[no-margin] {
-  margin: 0;
-}
-
-.bcm-textarea[no-margin] {
-  margin: 0;
-}
-
-.bcm-switch[no-margin] {
-  margin: 0;
-}
-
-.bcm-checkbox[no-margin] {
-  margin: 0;
-}
-
-.bcm-radio-group[no-margin] {
-  margin: 0;
-}
-
-.bcm-checkbox-group[no-margin] {
-  margin: 0;
-}
-
-.bcm-range[no-margin] {
-  margin: 0;
-}
-
-.bcm-form[no-margin] {
-  margin: 0;
-}
-
-.bcm-form-group[no-margin] {
-  margin: 0;
-}
-
-.bcm-list[no-margin] {
-  margin: 0;
-}
-
-.bcm-colorpicker[no-margin] {
-  margin: 0;
-}
-
-.bcm-date-picker[no-margin] {
-  margin: 0;
-}
-
-.bcm-time-picker[no-margin] {
-  margin: 0;
-}
-
-.bcm-datetime-picker[no-margin] {
-  margin: 0;
-}
-
-.bcm-select[no-margin] {
-  margin: 0;
-}
-
-.bcm-listbox[no-margin] {
-  margin: 0;
-}
-
-* {
-  box-sizing: border-box;
-}
-
-.bcm-input {
-  display: inline-flex;
-  flex-direction: column;
-  width: 100%;
-  max-width: 256px;
-  margin-bottom: 8px;
-}
-.bcm-input.full-width {
-  max-width: 100%;
-}
-.bcm-input.hidden {
-  display: none;
-}
-.bcm-input__container {
-  font-family: "Inter", sans-serif;
-  font-size: 14px;
-  line-height: calc(14px + 8px);
-  font-weight: 400;
-  display: flex;
-  align-items: stretch;
-  flex-direction: row;
-  background-color: var(--bcm-new-ds-color-white);
-  border: 1px solid var(--bcm-new-ds-color-slate-300);
-  border-radius: 4px;
-  box-sizing: border-box;
-  cursor: text;
-  padding: 0 0 0 4px;
-  position: relative;
-  width: 100%;
-}
-.bcm-input__container.disabled {
-  background-color: var(--bcm-new-ds-color-slate-50);
-  cursor: not-allowed;
-}
-.bcm-input__container.disabled .bcm-input-element {
-  color: var(--bcm-new-ds-color-slate-500);
-}
-.bcm-input__container.readonly {
-  background-color: var(--bcm-new-ds-color-slate-50);
-  cursor: default;
-}
-.bcm-input__container.readonly .bcm-input-element {
-  color: var(--bcm-new-ds-color-slate-600);
-}
-.bcm-input__container:not(.disabled):hover .caret-container, .bcm-input__container:not(.disabled).focused .caret-container {
-  opacity: 1;
-}
-.bcm-input__container:not(.disabled):hover .input-clear-button, .bcm-input__container:not(.disabled).focused .input-clear-button {
-  opacity: 1;
-}
-.bcm-input__container:not(.disabled).focused {
-  background-color: var(--bcm-new-ds-color-slate-50);
-}
-.bcm-input__container:not(.disabled):hover {
-  border-color: var(--bcm-color-prime-blue-6);
-}
-.bcm-input__container.empty .input-clear-button {
-  display: none;
-}
-.bcm-input__container.invalid, .bcm-input__container.error {
-  border-color: var(--bcm-new-ds-color-red-500);
-}
-.bcm-input__container .bcm-input-element {
-  width: 100%;
-  color: var(--bcm-new-ds-color-slate-600);
-  flex: 1;
-  border: none;
-  background: transparent;
-  box-shadow: unset;
-  padding: 0 4px;
-  font-family: "Inter", sans-serif;
-  cursor: inherit;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  outline: none;
-  text-overflow: ellipsis;
-}
-.bcm-input__container .bcm-input-element::placeholder {
-  font-family: "Inter", sans-serif;
-  color: var(--bcm-new-ds-color-slate-300);
-  user-select: none;
-}
-.bcm-input__container .bcm-input-element::-webkit-search-decoration, .bcm-input__container .bcm-input-element::-webkit-search-cancel-button, .bcm-input__container .bcm-input-element::-webkit-search-results-button, .bcm-input__container .bcm-input-element::-webkit-search-results-decoration, .bcm-input__container .bcm-input-element::-webkit-calendar-picker-indicator, .bcm-input__container .bcm-input-element::-webkit-inner-spin-button, .bcm-input__container .bcm-input-element::-webkit-outer-spin-button {
-  -webkit-appearance: none;
-}
-.bcm-input__container .caret-container {
-  width: 30px;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: stretch;
-  border-left: 1px solid #D9D9D9;
-  transition: 0.2s opacity;
-  user-select: none;
-  box-sizing: border-box;
-}
-.bcm-input__container .caret-container .bcm-input-caret {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--bcm-color-grey-7);
-  cursor: pointer;
-  flex: 1;
-}
-.bcm-input__container .caret-container .bcm-input-caret bcm-icon {
-  line-height: 1;
-}
-.bcm-input__container .caret-container .bcm-input-caret:hover {
-  color: var(--bcm-color-prime-blue-6);
-}
-.bcm-input__container .caret-container .bcm-input-caret:active {
-  background-color: var(--bcm-color-grey-3);
-}
-.bcm-input__container .caret-container .bcm-input-caret:last-child {
-  border-top: 1px solid #D9D9D9;
-}
-.bcm-input__container .caret-container.disabled {
-  background-color: var(--bcm-color-grey-3);
-}
-.bcm-input__container .caret-container.disabled .bcm-input-caret {
-  cursor: not-allowed;
-}
-.bcm-input__container .input-suffix-content {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.bcm-input__container .input-prefix:not(:empty) {
-  padding-left: 4px;
-}
-.bcm-input__container .input-suffix:not(:empty) {
-  min-width: 24px;
-  padding-right: 4px;
-}
-.bcm-input__container .input-prefix:not(:empty),
-.bcm-input__container .input-suffix:not(:empty) {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: default;
-  color: #64748a;
-}
-.bcm-input__container .input-prefix:not(:empty) .unit-prefix,
-.bcm-input__container .input-suffix:not(:empty) .unit-prefix {
-  color: #64748a;
-}
-.bcm-input__container .input-prefix-button:not(:empty),
-.bcm-input__container .input-suffix-button:not(:empty) {
-  cursor: pointer;
-}
-.bcm-input__container .caret-container,
-.bcm-input__container .input-clear-button {
-  opacity: 0;
-}
-.bcm-input__container--small {
-  font-size: 12px;
-}
-.bcm-input__container--medium {
-  font-size: 14px;
-}
-.bcm-input__container--large {
-  font-size: 16px;
-}
-.bcm-input__textarea.clearable .bcm-input-element {
-  padding-right: 24px;
-}
-.bcm-input__textarea .input-clear-button {
-  position: absolute;
-  top: 4px;
-  right: 0;
-}
-
 bcm-colorful {
   display: flex;
   flex-direction: column;

package/dist/collection/components/third-parts/rc-picker/rc-picker.css

@@ -125,38 +125,38 @@
 
 .bcm-date {
   font-family: "Inter", sans-serif;
-  font-size: 14px;
-  line-height: 22px;
   font-weight: 500;
   display: flex;
   align-items: stretch;
   flex-direction: row;
-  background-color: #fff;
-  border: 1px solid #cbd5e1;
-  color: #334155;
-  border-radius: 4px;
+  background-color: var(--bcm-ui-color-background-base-default);
+  border: 1px solid var(--bcm-ui-color-border-default);
+  border-radius: var(--bcm-ui-radius);
   box-sizing: border-box;
   cursor: text;
-  padding: 0 0 0 4px;
+  padding: 0 0 0 var(--bcm-ui-spacing-2);
   position: relative;
   width: 100%;
   /* ===== Dropdown ===== */
 }
-.bcm-date--large {
-  height: 40px;
-  font-size: 16px;
+.bcm-date--small {
+  height: 24px;
+  font-size: var(--bcm-ui-font-size-4);
+  line-height: var(--bcm-ui-line-height-4);
 }
 .bcm-date--medium {
   height: 32px;
-  font-size: 14px;
+  font-size: var(--bcm-ui-font-size-5);
+  line-height: var(--bcm-ui-line-height-5);
 }
-.bcm-date--small {
-  height: 24px;
-  font-size: 12px;
+.bcm-date--large {
+  height: 40px;
+  font-size: var(--bcm-ui-font-size-6);
+  line-height: var(--bcm-ui-line-height-6);
 }
 .bcm-date:hover {
   /* bcm */
-  border: 1px solid #4293cf;
+  border-color: var(--bcm-ui-color-border-primary-info);
 }
 .bcm-date:hover.bcm-date--existed {
   /* bcm */
@@ -169,10 +169,12 @@
   opacity: 0;
 }
 .bcm-date-focused {
-  background-color: #f8fafc;
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
 .bcm-date-suffix {
-  color: #334155;
+  color: var(--bcm-ui-color-text-placeholder);
 }
 .bcm-date-suffix:not(:empty) {
   display: flex;
@@ -211,7 +213,7 @@
   color: #334155;
 }
 .bcm-date-input-placeholder {
-  color: #94a3b8;
+  color: var(--bcm-ui-color-text-placeholder);
 }
 .bcm-date-input > input {
   color: inherit;
@@ -220,7 +222,8 @@
   border: none;
   background: transparent;
   box-shadow: unset;
-  line-height: 22px;
+  line-height: inherit;
+  font-size: inherit;
   font-family: "Inter", sans-serif;
   cursor: inherit;
   -webkit-appearance: none;
@@ -233,7 +236,8 @@
 }
 .bcm-date-input > input::placeholder {
   font-family: "Inter", sans-serif;
-  color: #cbd5e1;
+  font-weight: 400;
+  color: var(--bcm-ui-color-text-placeholder);
   user-select: none;
 }
 .bcm-date-input > input::-webkit-search-decoration, .bcm-date-input > input::-webkit-search-cancel-button, .bcm-date-input > input::-webkit-search-results-button, .bcm-date-input > input::-webkit-search-results-decoration, .bcm-date-input > input::-webkit-calendar-picker-indicator, .bcm-date-input > input::-webkit-inner-spin-button, .bcm-date-input > input::-webkit-outer-spin-button {
@@ -246,7 +250,7 @@
   text-overflow: ellipsis;
 }
 .bcm-date-clear {
-  color: #334155;
+  color: var(--bcm-ui-color-text-placeholder);
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -268,12 +272,12 @@
   content: "×";
 }
 .bcm-date-disabled {
-  background-color: #f8fafc;
-  color: #a0aec0;
+  background-color: var(--bcm-ui-color-background-disabled-disable);
+  color: var(--bcm-ui-color-text-disabled);
   cursor: not-allowed;
 }
 .bcm-date-disabled input {
-  color: #a0aec0;
+  color: var(--bcm-ui-color-text-disabled);
 }
 .bcm-date-disabled:hover {
   border: 1px solid #cbd5e1;
@@ -288,10 +292,10 @@
   cursor: not-allowed;
 }
 .bcm-date--error {
-  border: 1px solid #e53e3e;
+  border: 1px solid var(--bcm-ui-color-border-error);
 }
 .bcm-date--error:hover {
-  border: 1px solid #e53e3e;
+  border: 1px solid var(--bcm-ui-color-border-error);
 }
 .bcm-date-range {
   padding: 0 4px;
@@ -300,7 +304,7 @@
   flex: none;
 }
 .bcm-date-range-separator {
-  color: #94a3b8;
+  color: var(--bcm-ui-color-text-placeholder);
   padding: 0 4px;
   display: flex;
   align-items: center;

package/dist/collection/helper/generate.js

@@ -2,7 +2,6 @@
  * Built with Stencil
  * Copyright (c) Bromcom.
  */
-import { StatusProps } from "../components/molecules/alert/types";
 // @ts-ignore
 import { version } from "../../package.json";
 import { Build } from "@stencil/core";
@@ -79,6 +78,9 @@ export class Generate {
         800: {},
         900: {},
         950: {},
+        "white": "white",
+        "black": "black",
+        "transparent": "transparent"
       },
     }, args));
     if (!color || !colors[color]) {
@@ -101,25 +103,18 @@ export class Generate {
           result[`${variable}-${tone}`] = colors[color][tone];
         }
       }
+      else {
+        if (Array.isArray(tones[tone])) {
+          tones[tone].forEach(item => {
+            result[`${variable}-${item}`] = tone;
+          });
+        }
+      }
     });
     return result;
   }
 }
-Generate.UID = (prefix = "bcm") => `${prefix}${Math.random().toString(36).substr(2, 9)}`;
-Generate.getIconAttrWithStatusType = (status, loading = false) => {
-  if (loading)
-    return { icon: "far fa-spinner-third fa-spin" };
-  switch (status) {
-    case StatusProps.info:
-      return { icon: "far fa-info-circle" };
-    case StatusProps.error:
-      return { icon: "far fa-times-circle" };
-    case StatusProps.warning:
-      return { icon: "far fa-exclamation-circle" };
-    case StatusProps.success:
-      return { icon: "far fa-check-circle" };
-  }
-};
+Generate.UID = (prefix = "bcm") => `${prefix}${Math.random().toString(36).substring(2, 9)}`;
 Generate.domParser = (html) => {
   const parser = new DOMParser();
   const doc = parser.parseFromString(html, "text/html");

package/dist/collection/helper/index.js

@@ -10,3 +10,4 @@ export * from './string-helper';
 export * from './validators';
 export * from './tooltip-helper';
 export * from './popover-helper';
+export * from './pop-confirm-helper';

package/dist/collection/helper/pop-confirm-helper.js

@@ -0,0 +1,76 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { arrow, computePosition, flip, offset, shift } from "@floating-ui/dom";
+export class PopConfirmPosition {
+  constructor(ref) {
+    this.ref = null;
+    this.clickX = null;
+    this.clickY = null;
+    this.ref = ref;
+  }
+  update() {
+    const { ref, floating, placement } = this.ref;
+    let arrowElement = document.getElementById(`${floating.id}-arrow`);
+    if (!arrowElement) {
+      arrowElement = document.createElement("bcm-arrow");
+      arrowElement.setAttribute("id", `${floating.id}-arrow`);
+    }
+    floating.prepend(arrowElement);
+    if (this.clickX && this.clickY) {
+      ref.x = this.clickX;
+      ref.y = this.clickY;
+    }
+    computePosition(ref, floating, {
+      placement: placement,
+      middleware: [offset(10), flip(), shift({ padding: 5 }), arrow({ element: arrowElement })],
+    }).then(({ x, y, placement, middlewareData }) => {
+      Object.assign(floating.style, {
+        left: `${x}px`,
+        top: `${y}px`,
+      });
+      const { x: arrowX, y: arrowY } = middlewareData.arrow;
+      const placementParts = placement.split("-");
+      const staticSide = {
+        top: "bottom",
+        right: "left",
+        bottom: "top",
+        left: "right",
+      }[placementParts[0]];
+      arrowElement.setAttribute("position", staticSide);
+      Object.assign(arrowElement.style, {
+        left: arrowX != null ? `${arrowX}px` : "",
+        top: arrowY != null ? `${arrowY}px` : "",
+        right: "",
+        bottom: "",
+        [staticSide]: "-16px",
+      });
+    });
+  }
+  show() {
+    this.update();
+    this.ref.floating.classList.remove("tw-invisible");
+    this.ref.floating.classList.add("tw-visible");
+  }
+  hide() {
+    this.ref.floating.classList.remove("tw-visible");
+    this.ref.floating.classList.add("tw-invisible");
+  }
+  listener() {
+    window.addEventListener("resize", this.update.bind(this));
+    window.addEventListener("scroll", this.update.bind(this), true);
+    this.ref.ref.addEventListener("click", this.toggle.bind(this));
+    this.ref.floating.addEventListener("bcm-cancel", () => {
+      this.hide();
+    });
+  }
+  toggle() {
+    if (this.ref.floating.classList.contains("tw-invisible")) {
+      this.show();
+    }
+    else {
+      this.hide();
+    }
+  }
+}

package/dist/collection/helper/popover-helper.js

@@ -4,6 +4,7 @@
  */
 import { delay, FloatingUI } from "@bcm/utils";
 import { ColorHelper, Generate, StringHelper } from "@bcm/helpers";
+import { popoverStyle } from "../components/molecules/popover/popover.style";
 export class Popover {
   constructor({ content, message, targetId, placement = "top", color = "slate-700", trigger = "none", openDelay = 0, closeDelay = 0, autoHide = false, emitShow = () => { }, emitHide = () => { } }) {
     this.destroy = () => {
@@ -25,15 +26,15 @@ export class Popover {
         variable: "--bcm-popover",
       });
       const style = Object.assign(Object.assign({}, dc), (dc["--bcm-popover-bg"] && { "--bcm-popover-text": ColorHelper.reverseColor(dc["--bcm-popover-bg"]) }));
-      const inner = `<div class="tw-z-[1] tw-rounded tw-py-2">
-            ${this.message ? `<div class="tw-font-medium tw-w-full tw-pb-1 tw-px-4">${StringHelper.trim(this.message)}</div>` : ""}
-            ${this.content ? `<div class="tw-font-normal tw-px-4">${StringHelper.trim(this.content)}</div>` : ""}
+      const { popover, messageStyle, contentStyle, dividerStyle } = popoverStyle({ size: "medium" });
+      const inner = `<div class="tw-z-[1] tw-rounded-md">
+            ${this.message ? `<div class="${messageStyle()}">${StringHelper.trim(this.message)}</div>` : ""}
+            ${this.message && this.content ? `<div class="${dividerStyle()}"></div>` : ""}
+            ${this.content ? `<div class="${contentStyle()}">${StringHelper.trim(this.content)}</div>` : ""}
         </div>`;
       this.el = Generate.createElement("div", {
         "id": `${this.targetId}-popover-box`,
-        "class": `
-            tw-whitespace-normal tw-break-words tw-block tw-font-sans tw-pointer-events-none tw-max-w-[256px] tw-rounded tw-bg-[--bcm-popover-bg] tw-text-[--bcm-popover-text] tw-text-3 tw-absolute tw-top-0 tw-left-0 tw-z-tooltip tw-opacity-0 tw-transition-opacity tw-duration-300
-            tw-shadow`,
+        "class": popover(),
         "role": "popover",
         "aria-hidden": "true",
         "style": ColorHelper.generateStyleString(style),
@@ -97,7 +98,7 @@ export class Popover {
       }
     };
     this.show = async () => {
-      if (this.message) {
+      if (this.message || this.content) {
         this.init();
         await delay(this.openDelay);
         this.calculatePosition();

package/dist/collection/helper/tooltip-helper.js

@@ -4,7 +4,7 @@
  */
 import { delay, FloatingUI } from "@bcm/utils";
 import { ColorHelper, Generate, StringHelper } from "@bcm/helpers";
-import { Bcm } from "@bcm/model";
+import { tooltipStyle } from "../components/molecules/tooltip/tooltip.style";
 export class Tooltip {
   constructor({ message, targetId, placement = "top", color = "slate-700", trigger = "none", size = "medium", openDelay = 0, closeDelay = 0, autoHide = false, emitShow = () => { }, emitHide = () => { }, }) {
     this.destroy = () => {
@@ -16,18 +16,6 @@ export class Tooltip {
       this.removeListener();
     };
     this.target = () => document.getElementById(this.targetId);
-    this.sizeClass = () => {
-      switch (this.size) {
-        case Bcm.Size.small:
-          return "tw-text-1";
-        case Bcm.Size.medium:
-          return "tw-text-2";
-        case Bcm.Size.large:
-          return "tw-text-3";
-        default:
-          return "tw-text-2";
-      }
-    };
     this.init = () => {
       const { tone, colorName } = ColorHelper.parseColor(this.color, 700);
       const dc = Generate.getTwColor({
@@ -38,10 +26,10 @@ export class Tooltip {
         variable: "--bcm-tooltip",
       });
       const style = Object.assign(Object.assign({}, dc), (dc["--bcm-tooltip-bg"] && { "--bcm-tooltip-text": ColorHelper.reverseColor(dc["--bcm-tooltip-bg"]) }));
+      const { tooltip } = tooltipStyle({ size: this.size });
       this.el = Generate.createElement("div", {
         "id": `${this.targetId}-tooltip-box`,
-        "class": `
-            tw-whitespace-normal tw-break-words tw-block tw-font-sans tw-pointer-events-none tw-max-w-xs tw-py-1 tw-px-2 tw-rounded tw-bg-[--bcm-tooltip-bg] tw-text-[--bcm-tooltip-text] ${this.sizeClass()} tw-absolute tw-top-0 tw-left-0 tw-z-tooltip tw-opacity-0 tw-transition-opacity tw-duration-300`,
+        "class": tooltip(),
         "role": "tooltip",
         "aria-hidden": "true",
         "style": ColorHelper.generateStyleString(style),

package/dist/collection/models/bcm.js

@@ -81,7 +81,7 @@ export var Bcm;
     Kind["solid"] = "solid";
     Kind["ghost"] = "ghost";
     Kind["link"] = "link";
-    Kind["ghost-link"] = "ghost-link";
+    Kind["outline"] = "outline";
   })(Kind = Bcm.Kind || (Bcm.Kind = {}));
   let ButtonType;
   (function (ButtonType) {
@@ -466,5 +466,13 @@ export var Bcm;
     ListType["select"] = "select";
     ListType["autocomplete"] = "autocomplete";
   })(ListType = Bcm.ListType || (Bcm.ListType = {}));
+  // "_blank" | "_parent" | "_self" | "_top"
+  let Target;
+  (function (Target) {
+    Target["blank"] = "_blank";
+    Target["parent"] = "_parent";
+    Target["self"] = "_self";
+    Target["top"] = "_top";
+  })(Target = Bcm.Target || (Bcm.Target = {}));
 })(Bcm || (Bcm = {}));
 export default Bcm;

package/dist/collection/templates/caption-template.js

@@ -9,14 +9,14 @@ export const CaptionTemplate = ({ noCaption, captionType, caption, captionError,
 maxLength, value, }) => {
   size = size || "medium";
   return ((noCaption == false || maxLength) && (h("div", { class: cs("bcm-ui-element bcm-ui-feedback bcm-caption-area tw-mt-1 tw-min-h-[20px] tw-flex tw-flex-row tw-items-start tw-justify-between tw-font-normal", {
-      "tw-text-slate-500": !captionType || captionType == "default",
-      "tw-text-blue-600": captionType == "info",
-      "tw-text-emerald-700": captionType == "success",
-      "tw-text-amber-700": captionType == "warning",
-      "tw-text-red-600": captionType == "error",
+      "tw-text-color-caption": !captionType || captionType == "default",
+      "tw-text-color-primary": captionType == "info",
+      "tw-text-color-success": captionType == "success",
+      "tw-text-color-warning": captionType == "warning",
+      "tw-text-color-error": captionType == "error",
     }, {
-      "tw-text-1": size == "small",
-      "tw-text-2": size == "medium",
-      "tw-text-3": size == "large",
-    }, captionType && captionType != "default" && `bcm-caption-area__type-${captionType}`) }, h("div", { class: "bcm-caption-area__text" }, captionType == "error" ? customErrorMessage || captionError : caption), maxLength && h("div", { class: "bcm-caption-area__text tw-text-slate-500" }, " ", `${(value === null || value === void 0 ? void 0 : value.length) || 0}/${maxLength}`, " "))));
+      "tw-text-size-3": size == "small",
+      "tw-text-size-4": size == "medium",
+      "tw-text-size-5": size == "large",
+    }, captionType && captionType != "default" && `bcm-caption-area__type-${captionType}`) }, h("div", { class: "bcm-caption-area__text" }, captionType == "error" ? customErrorMessage || captionError : caption), maxLength && h("div", { class: "bcm-caption-area__text tw-text-color-caption" }, " ", `${(value === null || value === void 0 ? void 0 : value.length) || 0}/${maxLength}`, " "))));
 };