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

package/dist/collection/components/molecules/{checkbox/group.js → checkbox-group/checkbox-group.js}

@@ -13,15 +13,13 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { h, Host } from '@stencil/core';
-import cs from 'classnames';
 import { Generate } from '../../../helper/generate';
 import Bcm from '../../../models/bcm';
 import { delay, getChildElements } from '../../../utils/utils';
 import checkBoxGroupState from "../states/checkbox-group.states";
-import { CheckboxGroupTemplate } from '../../../templates/checkbox-group-template';
 import snq from 'snq';
-import { LabelTemplate } from '../../../templates/label-template';
 import { IsLoad } from '../../../decorators/is-load-decorator';
+import { checkboxGroupStyle } from './checkbox-group.style';
 export class BcmCheckboxGroup {
   constructor() {
     this._id = Generate.UID();
@@ -177,37 +175,22 @@ export class BcmCheckboxGroup {
   }
   render() {
     const items = this.getItems();
-    const { disabled, captionType, label, indeterminate, indeterminateState, required, direction, optionType, hidden, fullWidth, gap } = items;
-    const bcmChechboxGroup = cs('bcm-checkbox-group', direction, optionType, {
-      hidden,
-      'full-width': fullWidth
-    });
-    const bcmChechboxGroupContainer = cs('bcm-checkbox-group__container', optionType, {
-      [direction]: optionType === 'default',
-      indeterminate,
-      hidden,
-      'full-width': fullWidth
+    const { disabled, captionType, label, indeterminate, indeterminateState, required, direction, gap } = items;
+    const { host, checkboxGroupContainer } = checkboxGroupStyle({
+      direction,
+      indeterminate
     });
-    return (h(Host, { class: bcmChechboxGroup }, h("span", { hidden: true, id: `bcm-checkbox-group__items-${this._id}` }, h("slot", null)), h("div", { class: "bcm-checkbox-group__label" }, label &&
-      h("div", null, h(LabelTemplate, { size: this.size, type: captionType, value: label, required: required }))), indeterminate &&
-      h("bcm-checkbox", { onClick: (e) => { this.indeterminateClick(), e.preventDefault(); }, "no-caption": true, "no-margin": true, id: "bcm-indeterminate-element", indeterminate: indeterminateState, disabled: disabled }, "Check All"), h(CheckboxGroupTemplate, { items: items, groupContainerClasses: bcmChechboxGroupContainer, customStyle: gap && ({ 'gap': gap }), onBcmSelect: (id) => this.changeCheckBox(id) })));
+    return (h(Host, { class: host() }, h("span", { hidden: true, id: `bcm-checkbox-group__items-${this._id}` }, h("slot", null)), label && h("bcm-label", { type: captionType, value: label, required: required }), indeterminate &&
+      h("bcm-checkbox", { onClick: (e) => { this.indeterminateClick(), e.preventDefault(); }, "no-caption": true, "no-margin": true, id: "bcm-indeterminate-element", indeterminate: indeterminateState, disabled: disabled }, "Check All"), h("div", { class: checkboxGroupContainer(), style: gap && ({ 'gap': gap }) }, items.childs && items.childs.map((checkbox) => {
+      return (h("bcm-checkbox", { id: checkbox.id, name: checkbox.name, color: checkbox.color, checked: checkbox.checked, disabled: checkbox.disabled, readonly: checkbox.readonly, required: checkbox.required, noCaption: checkbox.noCaption, "no-margin": true, size: checkbox.size, "full-width": checkbox.fullWidth, onClick: (e) => { !checkbox.disabled && !checkbox.readonly && (this.changeCheckBox(checkbox.id), e.preventDefault()); } }, checkbox.slot || checkbox.label));
+    }))));
   }
   static get is() { return "bcm-checkbox-group"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["group.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["group.css"]
-    };
-  }
   static get properties() {
     return {
       "_id": {
         "type": "string",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "string",
           "resolved": "string",
@@ -225,7 +208,7 @@ export class BcmCheckboxGroup {
       },
       "direction": {
         "type": "string",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "DirectionTypes",
           "resolved": "\"horizontal\" | \"vertical\"",
@@ -248,7 +231,7 @@ export class BcmCheckboxGroup {
       },
       "items": {
         "type": "string",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "Array<object> | string",
           "resolved": "object[] | string",
@@ -288,7 +271,7 @@ export class BcmCheckboxGroup {
       },
       "name": {
         "type": "string",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "string",
           "resolved": "string",
@@ -305,7 +288,7 @@ export class BcmCheckboxGroup {
       },
       "value": {
         "type": "any",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "any",
           "resolved": "any",
@@ -322,7 +305,7 @@ export class BcmCheckboxGroup {
       },
       "disabled": {
         "type": "boolean",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "boolean",
           "resolved": "boolean",
@@ -340,7 +323,7 @@ export class BcmCheckboxGroup {
       },
       "readonly": {
         "type": "boolean",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "boolean",
           "resolved": "boolean",
@@ -358,7 +341,7 @@ export class BcmCheckboxGroup {
       },
       "hidden": {
         "type": "boolean",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "boolean",
           "resolved": "boolean",
@@ -376,7 +359,7 @@ export class BcmCheckboxGroup {
       },
       "required": {
         "type": "boolean",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "boolean",
           "resolved": "boolean",
@@ -394,7 +377,7 @@ export class BcmCheckboxGroup {
       },
       "label": {
         "type": "string",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "string",
           "resolved": "string",
@@ -411,7 +394,7 @@ export class BcmCheckboxGroup {
       },
       "gap": {
         "type": "string",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "string",
           "resolved": "string",
@@ -428,7 +411,7 @@ export class BcmCheckboxGroup {
       },
       "defaultValue": {
         "type": "string",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "string",
           "resolved": "string",
@@ -445,7 +428,7 @@ export class BcmCheckboxGroup {
       },
       "fullWidth": {
         "type": "any",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "boolean | \"flex\"",
           "resolved": "\"flex\" | boolean",
@@ -499,7 +482,7 @@ export class BcmCheckboxGroup {
       },
       "size": {
         "type": "string",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "SizeTypes",
           "resolved": "\"large\" | \"medium\" | \"small\"",

package/dist/collection/components/molecules/checkbox-group/checkbox-group.style.js

@@ -0,0 +1,40 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { tv } from "tailwind-variants";
+export const checkboxGroupStyle = tv({
+  slots: {
+    host: [
+      "bcm-checkbox-group",
+      "bcm-ui-element bcm-ui-inputs",
+      "tw-flex tw-flex-col tw-items-start tw-w-full",
+      "tw-mb-2 tw-gap-1",
+    ],
+    checkboxGroupContainer: [
+      "bcm-checkbox-group__container",
+      "tw-flex tw-w-full",
+      "tw-items-start tw-justify-start",
+    ],
+  },
+  variants: {
+    direction: {
+      vertical: {
+        checkboxGroupContainer: ["tw-flex-col tw-gap-2"],
+      },
+      horizontal: {
+        checkboxGroupContainer: ["tw-flex-row tw-gap-2.5"],
+      },
+    },
+    indeterminate: {
+      true: {
+        checkboxGroupContainer: ["indeterminate tw-pt-2 tw-border-0 tw-border-t tw-border-solid tw-border-color"],
+      }
+    },
+  },
+  defaultVariants: {
+    direction: "vertical",
+    fullWidth: false,
+    indeterminate: false,
+  },
+});

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

@@ -4,6 +4,7 @@
  */
 import { Generate } from "@bcm/helpers";
 import { Host, forceUpdate, h } from "@stencil/core";
+import { colorInputStyle } from "./color-input.style";
 export class BcmColorInput {
   constructor() {
     this._id = Generate.UID();
@@ -49,7 +50,8 @@ export class BcmColorInput {
     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: {
+    const { host, prefixIcon } = colorInputStyle();
+    return (h(Host, { class: host() }, 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: prefixIcon(), 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) }))));
   }

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

@@ -0,0 +1,17 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { tv } from "tailwind-variants";
+export const colorInputStyle = tv({
+  slots: {
+    host: [
+      "bcm-color-input",
+      "bcm-ui-element bcm-ui-inputs",
+      "tw-block",
+    ],
+    prefixIcon: "tw-flex tw-h-4 tw-w-4 tw-items-center tw-justify-center tw-rounded-full tw-border tw-border-gray-100",
+  },
+  variants: {},
+  defaultVariants: {},
+});

package/dist/collection/components/molecules/drawer/drawer.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,71 +122,10 @@
   margin-right: 8px;
 }
 
-* {
-  box-sizing: border-box;
-}
-
-.bcm-drawer {
-  user-select: none;
-  position: absolute;
-  width: 100vw;
-  height: 100vh;
-  top: -100%;
-  left: -100%;
-  overflow: hidden;
-  visibility: hidden;
-}
-.bcm-drawer--open {
-  visibility: visible;
-  top: 0;
-  left: 0;
-}
 .bcm-drawer__content {
-  font-family: "Inter", sans-serif;
-  font-size: 14px;
-  line-height: calc(14px + 8px);
-  font-weight: 400;
-  user-select: text;
-  position: fixed;
-  width: 100%;
-  height: 100%;
-  background-color: #f1f5f9;
-  z-index: 10350;
   transition: transform 0.2s ease-in-out;
   transform: translateX(-100%);
   visibility: hidden;
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  justify-content: flex-start;
-}
-.bcm-drawer__content-body {
-  padding: 0 24px 24px 24px;
-}
-.bcm-drawer__content.full-width {
-  max-width: 100%;
-}
-.bcm-drawer__content-header {
-  padding: 24px 24px 0 24px;
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  color: var(--bcm-color-grey-8);
-  margin-bottom: 8px;
-}
-.bcm-drawer__content-header-close {
-  padding: 4px 8px;
-  margin-right: -4px;
-  margin-top: -4px;
-  color: var(--bcm-color-grey-7);
-}
-.bcm-drawer__content-header-close:hover {
-  cursor: pointer;
-  color: var(--bcm-color-grey-8);
-}
-.bcm-drawer__content-footer {
-  padding: 12px 24px;
 }
 .bcm-drawer__content--position-left, .bcm-drawer__content--position-right {
   max-width: 500px;
@@ -229,24 +167,5 @@
   visibility: visible;
 }
 .bcm-drawer__overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.5);
-  z-index: 10349;
-  visibility: hidden;
-  opacity: 0;
   transition: opacity 0.3s ease-in-out;
-}
-.bcm-drawer__overlay--close {
-  opacity: 0;
-  visibility: visible;
-  transform: translateX(-100%);
-}
-.bcm-drawer__overlay--open {
-  opacity: 1;
-  visibility: visible;
-  transform: translateX(0);
 }

package/dist/collection/components/molecules/drawer/drawer.js

@@ -1,7 +1,8 @@
 import { Generate } from '@bcm/helpers';
 import { Bcm } from '@bcm/model';
 import { h, Host } from '@stencil/core';
-import cs from 'classnames';
+// import cs from 'classnames';
+import { drawerStyle } from './drawer.style';
 export class BcmDrawer {
   constructor() {
     this._id = Generate.UID();
@@ -47,19 +48,12 @@ export class BcmDrawer {
     this.el.remove();
   }
   render() {
-    const hostClasses = cs('bcm-drawer', {
-      'bcm-drawer--open': this._open,
+    const { host, content, overlay, contentHeader, contentHeaderTitle, contentHeaderClose, contentBody, contentFooter } = drawerStyle({
+      isShow: this._open,
+      fullWidth: this.fullWidth,
+      position: this.position,
     });
-    const contentClasses = cs('bcm-drawer__content', `bcm-drawer__content--position-${this.position}`, {
-      'bcm-drawer__content--open': this._open,
-      'bcm-drawer__content--close': this._close,
-      'full-width': this.fullWidth,
-    });
-    const overlay = cs('bcm-drawer__overlay', {
-      'bcm-drawer__overlay--open': this._open,
-      'bcm-drawer__overlay--close': this._close,
-    });
-    return (h(Host, { class: hostClasses }, h("div", { class: overlay, onClick: () => this.hide() }), h("div", { class: contentClasses }, h("div", { class: "bcm-drawer__content-header" }, h("bcm-text", { class: "bcm-drawer__content-header-title", "font-size": "6", weight: "600", color: "slate-800" }, this._title, " ", h("slot", { name: "header" })), h("div", { class: "bcm-drawer__content-header-close size-4", onClick: () => this.hide() }, h("bcm-icon", { icon: "fal fa-times" }))), h("div", { style: { 'overflow': 'auto', 'flex': '1' } }, h("div", { class: "bcm-drawer__content-body" }, h("slot", null))), h("div", { class: "bcm-drawer__content-footer" }, h("slot", { name: "footer" })))));
+    return (h(Host, { class: host() }, h("div", { class: overlay(), onClick: () => this.hide() }), h("div", { class: content() }, h("div", { class: contentHeader() }, h("span", { class: contentHeaderTitle() }, this._title, " ", h("slot", { name: "header" })), h("div", { class: contentHeaderClose(), onClick: () => this.hide() }, h("i", { class: "fa-solid fa-xmark" }))), h("div", { class: "tw-overflow-auto tw-flex-1" }, h("div", { class: contentBody() }, h("slot", null))), h("div", { class: contentFooter() }, h("slot", { name: "footer" })))));
   }
   static get is() { return "bcm-drawer"; }
   static get originalStyleUrls() {

package/dist/collection/components/molecules/drawer/drawer.style.js

@@ -0,0 +1,55 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { tv } from "tailwind-variants";
+export const drawerStyle = tv({
+  slots: {
+    host: ["bcm-drawer bcm-ui-element bcm-ui-content-display", "tw-user-select-none tw-absolute tw-overflow-hidden", "tw-w-screen tw-h-screen"],
+    content: ["bcm-drawer__content", "tw-flex tw-flex-col tw-items-stretch tw-justify-start", "tw-w-full tw-h-full tw-bg-color-surface-modal", "tw-fixed tw-user-select-text", "tw-z-drawer tw-overflow-hidden"],
+    contentHeader: ["bcm-drawer__content-header", "tw-px-6 tw-pt-6 tw-pb-0 tw-flex tw-justify-between tw-items-start", "tw-text-color tw-mb-2"],
+    contentHeaderTitle: ["bcm-drawer__content-header-title", "tw-text-size-6 tw-font-semibold"],
+    contentHeaderClose: ["bcm-drawer__content-header-close tw-text-size-6", "tw-px-2 tw-py-1 -tw-mr-1 -tw-mt-1 tw-text-color", "hover:tw-cursor-pointer"],
+    contentBody: ["bcm-drawer__content-body", "tw-px-6 tw-pt-0 tw-pb-6"],
+    contentFooter: ["bcm-drawer__content-footer", "tw-py-3 tw-px-6"],
+    overlay: ["bcm-drawer__overlay", "tw-fixed tw-bg-color-transparent-background tw-z-drawer-bd", "tw-top-0 tw-left-0 tw-w-full tw-h-full"],
+  },
+  variants: {
+    isShow: {
+      true: {
+        host: ["bcm-drawer--open", "tw-visible tw-top-0 tw-left-0"],
+        content: ["bcm-drawer__content--open"],
+        overlay: ["bcm-drawer__overlay--open", "tw-opacity-100 tw-visible tw-transform tw--translate-x-0"],
+      },
+      false: {
+        host: ["-tw-top-full -tw-left-full tw-invisible"],
+        content: ["bcm-drawer__content--close"],
+        overlay: ["bcm-drawer__overlay--close", "tw-opacity-0 tw-invisible tw-transform tw--translate-x-full"],
+      },
+    },
+    fullWidth: {
+      true: {
+        content: ["full-width tw-max-w-full"],
+      },
+    },
+    position: {
+      right: {
+        content: ["bcm-drawer__content--position-right"],
+      },
+      left: {
+        content: ["bcm-drawer__content--position-left"],
+      },
+      top: {
+        content: ["bcm-drawer__content--position-top"],
+      },
+      bottom: {
+        content: ["bcm-drawer__content--position-bottom"],
+      },
+    },
+  },
+  defaultVariants: {
+    isShow: false,
+    fullWidth: false,
+    position: "right",
+  },
+});

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

@@ -30,7 +30,7 @@ export class BcmDropdown {
     this.kind = Bcm.Kind.solid;
     this.icon = undefined;
     this.href = undefined;
-    this.target = undefined;
+    this.target = Bcm.Target["_blank"];
     this.value = undefined;
     this.noStyle = false;
     this.dropdownIcon = 'fas fa-angle-down';
@@ -238,7 +238,7 @@ export class BcmDropdown {
         "mutable": true,
         "complexType": {
           "original": "KindTypes",
-          "resolved": "\"ghost\" | \"ghost-link\" | \"link\" | \"solid\"",
+          "resolved": "\"ghost\" | \"link\" | \"outline\" | \"solid\"",
           "references": {
             "KindTypes": {
               "location": "import",
@@ -292,11 +292,16 @@ export class BcmDropdown {
       },
       "target": {
         "type": "string",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
+          "original": "TargetTypes",
+          "resolved": "\"blank\" | \"parent\" | \"self\" | \"top\"",
+          "references": {
+            "TargetTypes": {
+              "location": "import",
+              "path": "../../../models/bcm-types"
+            }
+          }
         },
         "required": false,
         "optional": false,
@@ -305,7 +310,8 @@ export class BcmDropdown {
           "text": ""
         },
         "attribute": "target",
-        "reflect": false
+        "reflect": false,
+        "defaultValue": "Bcm.Target[\"_blank\"]"
       },
       "value": {
         "type": "string",

package/dist/collection/components/molecules/empty/empty.js

@@ -2,13 +2,21 @@
  * Built with Stencil
  * Copyright (c) Bromcom.
  */
-import { h, Host } from '@stencil/core';
+import { Host, h } from "@stencil/core";
+import Bcm from "../../../models/bcm";
+import { emptyStyle } from "./empty.style";
 export class BcmEmpty {
   constructor() {
-    this.icon = undefined;
+    this.icon = "fa-duotone fa-folder-open";
+    this.text = undefined;
+    this.description = undefined;
+    this.status = Bcm.Status.default;
+    this.size = Bcm.Size.medium;
   }
   render() {
-    return (h(Host, { class: "tw-h-full tw-flex tw-flex-col tw-items-center tw-justify-center tw-w-full tw-flex-1 tw-bg-slate-50 tw-text-center tw-rounded tw-gap-3" }, this.icon && h("i", { class: `tw-text-8 tw-text-amber-500 ${this.icon}` }), h("bcm-typography", { class: "tw-text-slate-700 tw-text-2" }, h("slot", null))));
+    const { text, description, status, size, icon } = this;
+    const { host, textStyle, iconStyle, descriptionStyle } = emptyStyle({ size, status });
+    return (h(Host, { class: host() }, icon && (h("div", { class: iconStyle() }, h("i", { class: `${icon}` }))), text && h("bcm-typography", { class: textStyle() }, text), description && h("bcm-typography", { class: descriptionStyle() }, description), h("bcm-typography", { class: descriptionStyle() }, h("slot", null))));
   }
   static get is() { return "bcm-empty"; }
   static get properties() {
@@ -28,7 +36,87 @@ export class BcmEmpty {
           "text": ""
         },
         "attribute": "icon",
+        "reflect": false,
+        "defaultValue": "\"fa-duotone fa-folder-open\""
+      },
+      "text": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "text",
         "reflect": false
+      },
+      "description": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "description",
+        "reflect": false
+      },
+      "status": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Bcm.Status",
+          "resolved": "Status.default | Status.error | Status.info | Status.success | Status.warning",
+          "references": {
+            "Bcm": {
+              "location": "global"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "status",
+        "reflect": false,
+        "defaultValue": "Bcm.Status.default"
+      },
+      "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"
       }
     };
   }

package/dist/collection/components/molecules/empty/empty.style.js

@@ -0,0 +1,64 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { tv } from "tailwind-variants";
+export const emptyStyle = tv({
+  slots: {
+    host: [
+      "bcm-empty bcm-ui-element bcm-ui-feedback",
+      "tw-flex tw-flex-1 tw-flex-col tw-items-center tw-justify-center tw-gap-2",
+      "tw-h-full tw-w-fulltw-text-center",
+      "tw-text-color-caption",
+      "tw-font-medium"
+    ],
+    iconStyle: "tw-mb-1 tw-rounded-3xl tw-p-4",
+    textStyle: "tw-font-semibold tw-text-color",
+    descriptionStyle: "",
+  },
+  variants: {
+    size: {
+      small: {
+        host: "tw-text-size-3",
+        textStyle: "tw-text-size-4",
+        iconStyle: "tw-text-size-8",
+      },
+      medium: {
+        host: "tw-text-size-4",
+        textStyle: "tw-text-size-5",
+        iconStyle: "tw-text-size-9",
+      },
+      large: {
+        host: "tw-text-size-5",
+        textStyle: "tw-text-size-6",
+        iconStyle: "tw-text-size-10",
+      },
+    },
+    status: {
+      default: {
+        host: "",
+        iconStyle: "tw-bg-blue-50 tw-text-color-primary",
+      },
+      success: {
+        host: "",
+        iconStyle: "tw-bg-emerald-50 tw-text-color-success",
+      },
+      warning: {
+        host: "",
+        iconStyle: "tw-bg-amber-50 tw-text-color-warning",
+      },
+      error: {
+        host: "",
+        iconStyle: "tw-bg-red-50 tw-text-color-error",
+      },
+      info: {
+        host: "",
+        iconStyle: "tw-bg-blue-50 tw-text-color-primary",
+      },
+    },
+  },
+  defaultVariants: {
+    size: "medium",
+    status: "default",
+  },
+});