bromcom-ui 2.10.1-rc.0 → 2.10.1-rc.10

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

@@ -0,0 +1,195 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { CaptionTemplate } from "@bcm/template";
+import { Host, h } from "@stencil/core";
+import Bcm from "../../../models/bcm";
+export class BcmCaption {
+  constructor() {
+    this.noCaption = false;
+    this.captionType = Bcm.Status.default;
+    this.captionClasses = undefined;
+    this.caption = undefined;
+    this.captionError = undefined;
+    this.customErrorMessage = undefined;
+    this.size = Bcm.Size.medium;
+    this.maxLength = undefined;
+    this.value = undefined;
+  }
+  render() {
+    const { noCaption, captionType, captionClasses, caption, captionError, customErrorMessage, size, maxLength, value } = this;
+    return (h(Host, { class: "tw-block" }, h(CaptionTemplate, { noCaption: noCaption, captionType: captionType, captionClasses: captionClasses, caption: caption, captionError: captionError, customErrorMessage: customErrorMessage, size: size, maxLength: maxLength, value: value })));
+  }
+  static get is() { return "bcm-caption"; }
+  static get properties() {
+    return {
+      "noCaption": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "no-caption",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "captionType": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "StatusTypes",
+          "resolved": "\"default\" | \"error\" | \"info\" | \"success\" | \"warning\"",
+          "references": {
+            "StatusTypes": {
+              "location": "import",
+              "path": "../../../models/bcm-types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "caption-type",
+        "reflect": false,
+        "defaultValue": "Bcm.Status.default"
+      },
+      "captionClasses": {
+        "type": "any",
+        "mutable": false,
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "caption-classes",
+        "reflect": false
+      },
+      "caption": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "caption",
+        "reflect": false
+      },
+      "captionError": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "caption-error",
+        "reflect": false
+      },
+      "customErrorMessage": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "custom-error-message",
+        "reflect": false
+      },
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "SizeTypes",
+          "resolved": "\"large\" | \"medium\" | \"small\"",
+          "references": {
+            "SizeTypes": {
+              "location": "import",
+              "path": "../../../models/bcm-types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "Bcm.Size.medium"
+      },
+      "maxLength": {
+        "type": "any",
+        "mutable": false,
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "max-length",
+        "reflect": false
+      },
+      "value": {
+        "type": "any",
+        "mutable": false,
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "value",
+        "reflect": false
+      }
+    };
+  }
+}

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

@@ -2,16 +2,27 @@
  * Built with Stencil
  * Copyright (c) Bromcom.
  */
-import { h, Host } from '@stencil/core';
-import cs from 'classnames';
-import { Generate } from '../../../helper/generate';
-import Bcm from '../../../models/bcm';
-import { LabelTemplate } from '../../../templates/label-template';
+var __decorate = (this && this.__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;
+};
+import { Host, h } from "@stencil/core";
+import { IsLoad } from "../../../decorators/is-load-decorator";
+import { Generate } from "../../../helper/generate";
+import Bcm from "../../../models/bcm";
+import { LabelTemplate } from "../../../templates/label-template";
 export class BcmLabel {
   constructor() {
     this._id = Generate.UID();
     this.required = false;
     this.value = undefined;
+    this.label = undefined;
     this.size = "medium";
     this.form = undefined;
     this.htmlFor = undefined;
@@ -20,27 +31,15 @@ export class BcmLabel {
     this.tooltip = undefined;
   }
   render() {
-    const { required, value, size, form, htmlFor, hidden, type, tooltip } = this;
-    const hostClasses = cs('bcm-label', { hidden });
-    const Label = (h(LabelTemplate, { form: form, htmlFor: htmlFor, value: value, size: size, type: type, required: required }));
-    return (h(Host, { class: hostClasses }, Label, tooltip && (h("bcm-tooltip", { message: tooltip, placement: 'top', trigger: 'hover' }, h("bcm-icon", { icon: "far fa-question-circle" })))));
+    const { required, value, label, size, form, htmlFor, type, tooltip } = this;
+    return (h(Host, { class: "tw-inline-block" }, h(LabelTemplate, { form: form, htmlFor: htmlFor, value: value || label, size: size, type: type, required: required, tooltip: tooltip })));
   }
   static get is() { return "bcm-label"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["label.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["label.css"]
-    };
-  }
   static get properties() {
     return {
       "_id": {
         "type": "string",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "string",
           "resolved": "string",
@@ -50,7 +49,7 @@ export class BcmLabel {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Props *"
+          "text": ""
         },
         "attribute": "id",
         "reflect": true,
@@ -58,7 +57,7 @@ export class BcmLabel {
       },
       "required": {
         "type": "boolean",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "boolean",
           "resolved": "boolean",
@@ -76,7 +75,7 @@ export class BcmLabel {
       },
       "value": {
         "type": "string",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "string",
           "resolved": "string",
@@ -91,9 +90,26 @@ export class BcmLabel {
         "attribute": "value",
         "reflect": false
       },
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "label",
+        "reflect": false
+      },
       "size": {
         "type": "string",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "SizeTypes",
           "resolved": "\"large\" | \"medium\" | \"small\"",
@@ -116,7 +132,7 @@ export class BcmLabel {
       },
       "form": {
         "type": "any",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "any",
           "resolved": "any",
@@ -133,7 +149,7 @@ export class BcmLabel {
       },
       "htmlFor": {
         "type": "any",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "any",
           "resolved": "any",
@@ -150,7 +166,7 @@ export class BcmLabel {
       },
       "hidden": {
         "type": "boolean",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "boolean",
           "resolved": "boolean",
@@ -168,7 +184,7 @@ export class BcmLabel {
       },
       "type": {
         "type": "any",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "StatusTypes | any",
           "resolved": "any",
@@ -191,7 +207,7 @@ export class BcmLabel {
       },
       "tooltip": {
         "type": "string",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "string",
           "resolved": "string",
@@ -210,3 +226,6 @@ export class BcmLabel {
   }
   static get elementRef() { return "el"; }
 }
+__decorate([
+  IsLoad()
+], BcmLabel.prototype, "el", void 0);

package/dist/collection/components/molecules/checkbox/checkbox.css

@@ -1,7 +1,5 @@
 @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;
@@ -125,93 +123,6 @@
   margin-right: 8px;
 }
 
-* {
-  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);
-}
-
-* {
-  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;
 }

package/dist/collection/components/molecules/input/input.css

@@ -1,7 +1,5 @@
 @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;
@@ -125,93 +123,6 @@
   margin-right: 8px;
 }
 
-* {
-  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);
-}
-
-* {
-  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;
 }

package/dist/collection/components/molecules/input-dropdown/input-dropdown.css

@@ -1,6 +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");
-@import url("https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap");
 .size-1 {
   font-size: 12px;
   line-height: 20px;
@@ -124,93 +122,6 @@
   margin-right: 8px;
 }
 
-* {
-  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);
-}
-
-* {
-  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;
 }

package/dist/collection/components/molecules/input-dropdown/input-dropdown.js

@@ -196,7 +196,7 @@ export class BcmInputDropdown {
     };
     const CommentTemplate = () => {
       var _a, _b, _c;
-      return (h(Fragment, null, this.isOpenMenu ? (h("div", { class: commentArea() }, this.isLate ? (h(Fragment, null, h("bcm-input", { label: "Minus Late", required: true, id: this._id + "-input-dropdown-late-content-input", type: "number", "full-width": true, "no-caption": true, autocomplete: false, value: (_a = this.value) === null || _a === void 0 ? void 0 : _a.lateMin, placeholder: "Enter Minus Late", "onBcm-change": ({ detail }) => (this.value.lateMin = +detail) }, h("i", { slot: "prefix", class: "far fa-clock" })))) : null, h("bcm-textarea", { "full-width": true, value: (_c = (_b = this.value) === null || _b === void 0 ? void 0 : _b.comment) !== null && _c !== void 0 ? _c : "", "onBcm-change": ({ detail }) => (this.value.comment = detail), label: "Description", "no-caption": true, rows: 4 }), h("footer", { class: "tw-flex tw-w-full tw-flex-row tw-items-center tw-justify-end tw-gap-2" }, h("bcm-button", { icon: "fas fa-times", kind: "ghost", "icon-position": "prefix", onClick: () => { var _a; return (_a = this.commentContent) === null || _a === void 0 ? void 0 : _a.hide(); } }, "Close"), h("bcm-button", { icon: "fas fa-save", "icon-position": "prefix", onClick: () => this.onClickSave() }, "Save")))) : null));
+      return (h(Fragment, null, this.isOpenMenu ? (h("div", { class: commentArea() }, this.isLate ? (h(Fragment, null, h("bcm-input", { label: "Minus Late", required: true, id: this._id + "-input-dropdown-late-content-input", type: "number", "full-width": true, autocomplete: false, min: 0, max: 200, value: (_a = this.value) === null || _a === void 0 ? void 0 : _a.lateMin, placeholder: "Enter Minus Late", customErrorMessage: "Max limit 200 mins", "onBcm-change": ({ detail }) => (this.value.lateMin = +detail) }, h("i", { slot: "prefix", class: "far fa-clock" })))) : null, h("bcm-textarea", { "full-width": true, value: (_c = (_b = this.value) === null || _b === void 0 ? void 0 : _b.comment) !== null && _c !== void 0 ? _c : "", "onBcm-change": ({ detail }) => (this.value.comment = detail), label: "Description", "no-caption": true, rows: 4 }), h("footer", { class: "tw-flex tw-w-full tw-flex-row tw-items-center tw-justify-end tw-gap-2" }, h("bcm-button", { icon: "fas fa-times", kind: "ghost", "icon-position": "prefix", onClick: () => { var _a; return (_a = this.commentContent) === null || _a === void 0 ? void 0 : _a.hide(); } }, "Close"), h("bcm-button", { icon: "fas fa-save", "icon-position": "prefix", onClick: () => this.onClickSave() }, "Save")))) : null));
     };
     return (h(Host, { class: base() }, label && h("bcm-label", { htmlFor: _id + "-dropdown-input", size: size, value: label, required: required }), h("div", { class: content() }, h("div", { class: inputArea() }, h("input", { id: _id + "-dropdown-input", class: input(), style: { color: (_a = this.value) === null || _a === void 0 ? void 0 : _a.color }, type: "text", tabIndex: -1, placeholder: placeholder, value: (_b = this.value) === null || _b === void 0 ? void 0 : _b.key, disabled: disabled, required: required, autoComplete: "off", readOnly: readonly, onKeyPress: e => this.handleKeyPress(e), onInput: e => this.handleInput(e), ref: el => (this._input = el) }), h("button", { disabled: disabled, id: `i-dropdown-button-${_id}`, class: button(), onClick: () => (this.isOpenMenu = true) }, h("i", { class: "fas fa-chevron-down" })), h("bcm-linked", { "onBcm-open": ({ detail }) => { var _a; return detail && ((_a = this.commentContent) === null || _a === void 0 ? void 0 : _a.hide()); }, class: "tw-mt-1", id: `i-dropdown-menu-${_id}`, "target-id": `i-dropdown-button-${_id}`, placement: "bottom-start" }, h(MenuTemplates, null)), h("bcm-linked", { id: `i-dropdown-comment-${_id}`, "target-id": _id, trigger: "custom", placement: "left" }, h(CommentTemplate, null))), !this.hideComment ? (h("span", { onClick: () => {
         var _a, _b;

package/dist/collection/components/molecules/input-dropdown/input-dropdown.style.js

@@ -22,7 +22,7 @@ export const inputDropdownStyle = tv({
     menuItem: "tw-flex tw-w-full tw-cursor-pointer tw-flex-row tw-items-start tw-gap-1 tw-rounded tw-px-3 tw-py-1  tw-text-slate-700 hover:tw-bg-blue-100",
     selectedItem: "tw-flex tw-w-full tw-flex-row tw-items-start tw-gap-1 tw-rounded tw-px-3 tw-py-1  tw-text-slate-700 tw-bg-primary-200",
     disabledItem: "tw-flex tw-w-full tw-flex-row tw-items-start tw-gap-1 tw-rounded tw-px-3 tw-py-1  tw-cursor-not-allowed tw-text-slate-400 tw-bg-slate-100 hover:tw-bg-slate-100 tw-list-none",
-    commentArea: "tw-flex tw-h-fit tw-w-full tw-min-w-[288px] tw-flex-col tw-items-start tw-gap-3 tw-rounded tw-p-4 tw-shadow-2",
+    commentArea: "tw-flex tw-h-fit tw-w-full tw-min-w-[288px] tw-flex-col tw-items-start tw-rounded tw-p-4 tw-shadow-2",
   },
   variants: {
     size: {