bromcom-ui-next 0.1.20 → 0.1.21

package/dist/cjs/bcm-badge.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"bcm-badge.entry.cjs.js","mappings":"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","names":["tv","h"],"sources":["src/components/badge/badge.css?tag=bcm-badge&encapsulation=shadow","src/components/badge/badge.component.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n  position: relative;\n  --bcm-badge-bg: var(--bcm-ui-color-background-default-default);\n  --bcm-badge-text: var(--bcm-ui-color-text-default);\n  --bcm-badge-radius: 9999px;\n}\n\n::slotted([slot='badge']) {\n  color: var(--bcm-badge-text);\n  font-weight: 500;\n}\n","import { Component, ComponentInterface, Prop, h } from '@stencil/core';\nimport { tv } from 'tailwind-variants';\n\n/**\n * @component BcmBadge\n * @description A versatile badge component that can be positioned around its container.\n * Supports different sizes, variants (dot/text), colors, and positioning options.\n * Can display status indicators with optional blinking animation.\n *\n * @example Basic usage\n * <bcm-badge color=\"primary\" position=\"top-right\">\n *   <div>Container Content</div>\n *   <span slot=\"badge\">New</span>\n * </bcm-badge>\n *\n * @example Status indicator with blink\n * <bcm-badge variant=\"dot\" color=\"success\" blink={true} status=\"Online\">\n *   <div>User Profile</div>\n * </bcm-badge>\n */\n@Component({\n    tag: 'bcm-badge',\n    styleUrl: 'badge.css',\n    shadow: true,\n})\nexport class Badge implements ComponentInterface {\n    /**\n     * Determines the size of the badge.\n     * @type {'small' | 'medium' | 'large'}\n     * @default 'medium'\n     */\n    @Prop()\n    size: 'small' | 'medium' | 'large' = 'medium';\n\n    /**\n     * Sets the visual variant of the badge.\n     * 'dot': Appears as a small dot indicator\n     * 'text': Displays content as text\n     * @type {'dot' | 'text'}\n     * @default 'text'\n     */\n    @Prop()\n    variant: 'dot' | 'text' = 'text';\n\n    /**\n     * Defines the color of the badge.\n     * Uses system color variables (e.g., 'primary', 'success', 'warning', etc.)\n     * @type {string}\n     * @optional\n     */\n    @Prop()\n    color?: string;\n\n    /**\n     * Enables soft color mode for the badge.\n     * When true, uses lighter tones and pastel colors.\n     * @type {boolean}\n     * @default false\n     */\n    @Prop()\n    soft: boolean = false;\n\n    /**\n     * Enables blinking animation for the badge.\n     * Useful for drawing attention or indicating active status.\n     * @type {boolean}\n     * @default false\n     */\n    @Prop()\n    blink: boolean = false;\n\n    /**\n     * Status message for accessibility purposes.\n     * Will be read by screen readers.\n     * @type {string}\n     * @optional\n     */\n    @Prop()\n    status?: string;\n\n    /**\n     * Sets the position of the badge relative to its container.\n     * @type {'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'}\n     * @default 'top-right'\n     */\n    @Prop()\n    position: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' = 'top-right';\n\n    /**\n     * Fine-tune the badge position with custom offset.\n     * Format: \"x,y\" in pixels (e.g., \"10,-5\")\n     * @type {string}\n     * @optional\n     */\n    @Prop()\n    offset: string;\n\n    /**\n     * Text to be displayed inside the badge.\n     * Used when variant is set to 'text'.\n     * Can be overridden using the \"badge\" slot.\n     * @type {string}\n     * @optional\n     */\n    @Prop()\n    text?: string;\n\n    private classes = tv({\n        base: 'badge bcm-ui-element absolute font-medium inline-flex items-center justify-center bg-[--bcm-badge-bg] text-[--bcm-badge-text] rounded-[--bcm-badge-radius] z-10',\n        variants: {\n            size: {\n                small: 'gap-1 px-1 text-size-3',\n                medium: 'gap-1 py-0.5 px-1.5 text-size-4',\n                large: 'gap-2 py-1 px-2 text-size-5',\n            },\n            variant: {\n                dot: 'gap-0 p-0 text-[0px] leading-none',\n                text: '',\n            },\n            position: {\n                'top-right': '-top-1 -right-1',\n                'top-left': '-top-1 -left-1',\n                'bottom-right': '-bottom-1 -right-1',\n                'bottom-left': '-bottom-1 -left-1',\n            },\n            blink: {\n                true: 'after:content-[\"\"] after:absolute  after:rounded-full after:bg-[--bcm-badge-bg] after:animate-blink after:w-full after:h-full',\n            },\n        },\n        compoundVariants: [\n            {\n                variant: 'dot',\n                size: 'small',\n                class: 'size-1',\n            },\n            {\n                variant: 'dot',\n                size: 'medium',\n                class: 'size-1.5',\n            },\n            {\n                variant: 'dot',\n                size: 'large',\n                class: 'size-2',\n            },\n        ],\n        defaultVariants: {\n            variant: 'text',\n            size: 'medium',\n            position: 'top-right',\n            blink: false,\n        },\n    });\n\n    private get offsetStyle() {\n        if (!this.offset) return {};\n        const [x = 0, y = 0] = this.offset.split(',').map(val => val.trim());\n        return { transform: `translate(${x}px, ${y}px)` };\n    }\n\n    private get badgeStyle() {\n        if (!this.color) return {};\n        const variantType = this.soft ? 'soft' : 'vivid';\n\n        return {\n            '--bcm-badge-bg': `var(--bcm-ui-color-background-${variantType}-${this.color}-default)`,\n            '--bcm-badge-text': this.soft ? `var(--bcm-ui-color-text-palette-${this.color})` : 'var(--bcm-ui-color-text-base)',\n        };\n    }\n\n    render() {\n        return (\n            <div class=\"relative inline-flex\">\n                <slot></slot>\n                <div\n                    role=\"status\"\n                    aria-live=\"polite\"\n                    aria-label={this.status ? `Status: ${this.status}` : undefined}\n                    class={this.classes({\n                        size: this.size,\n                        variant: this.variant,\n                        position: this.position,\n                        blink: this.blink,\n                    })}\n                    style={{\n                        ...this.badgeStyle,\n                        ...this.offsetStyle,\n                    }}\n                >\n                    {this.variant == 'text' && <slot name=\"badge\">{this.text}</slot>}\n                </div>\n            </div>\n        );\n    }\n}\n"],"version":3}
+{"file":"bcm-badge.entry.cjs.js","mappings":"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","names":["tv","h"],"sources":["src/components/badge/badge.css?tag=bcm-badge&encapsulation=shadow","src/components/badge/badge.component.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n  position: relative;\n  --bcm-badge-bg: var(--bcm-ui-color-background-default-default);\n  --bcm-badge-text: var(--bcm-ui-color-text-default);\n  --bcm-badge-radius: 9999px;\n}\n\n::slotted([slot='badge']) {\n  color: var(--bcm-badge-text);\n  font-weight: 500;\n}\n","import { Component, ComponentInterface, Prop, h } from '@stencil/core';\nimport { tv } from '@utils/tv';\n\n/**\n * @component BcmBadge\n * @description A versatile badge component that can be positioned around its container.\n * Supports different sizes, variants (dot/text), colors, and positioning options.\n * Can display status indicators with optional blinking animation.\n *\n * @example Basic usage\n * <bcm-badge color=\"primary\" position=\"top-right\">\n *   <div>Container Content</div>\n *   <span slot=\"badge\">New</span>\n * </bcm-badge>\n *\n * @example Status indicator with blink\n * <bcm-badge variant=\"dot\" color=\"success\" blink={true} status=\"Online\">\n *   <div>User Profile</div>\n * </bcm-badge>\n */\n@Component({\n  tag: 'bcm-badge',\n  styleUrl: 'badge.css',\n  shadow: true,\n})\nexport class Badge implements ComponentInterface {\n  /**\n   * Determines the size of the badge.\n   * @type {'small' | 'medium' | 'large'}\n   * @default 'medium'\n   */\n  @Prop()\n  size: 'small' | 'medium' | 'large' = 'medium';\n\n  /**\n   * Sets the visual variant of the badge.\n   * 'dot': Appears as a small dot indicator\n   * 'text': Displays content as text\n   * @type {'dot' | 'text'}\n   * @default 'text'\n   */\n  @Prop()\n  variant: 'dot' | 'text' = 'text';\n\n  /**\n   * Defines the color of the badge.\n   * Uses system color variables (e.g., 'primary', 'success', 'warning', etc.)\n   * @type {string}\n   * @optional\n   */\n  @Prop()\n  color?: string;\n\n  /**\n   * Enables soft color mode for the badge.\n   * When true, uses lighter tones and pastel colors.\n   * @type {boolean}\n   * @default false\n   */\n  @Prop()\n  soft: boolean = false;\n\n  /**\n   * Enables blinking animation for the badge.\n   * Useful for drawing attention or indicating active status.\n   * @type {boolean}\n   * @default false\n   */\n  @Prop()\n  blink: boolean = false;\n\n  /**\n   * Status message for accessibility purposes.\n   * Will be read by screen readers.\n   * @type {string}\n   * @optional\n   */\n  @Prop()\n  status?: string;\n\n  /**\n   * Sets the position of the badge relative to its container.\n   * @type {'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'}\n   * @default 'top-right'\n   */\n  @Prop()\n  position: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' = 'top-right';\n\n  /**\n   * Fine-tune the badge position with custom offset.\n   * Format: \"x,y\" in pixels (e.g., \"10,-5\")\n   * @type {string}\n   * @optional\n   */\n  @Prop()\n  offset: string;\n\n  /**\n   * Text to be displayed inside the badge.\n   * Used when variant is set to 'text'.\n   * Can be overridden using the \"badge\" slot.\n   * @type {string}\n   * @optional\n   */\n  @Prop()\n  text?: string;\n\n  private classes = tv({\n    base: 'badge bcm-ui-element absolute font-medium inline-flex items-center justify-center bg-[--bcm-badge-bg] text-[--bcm-badge-text] rounded-[--bcm-badge-radius] z-10',\n    variants: {\n      size: {\n        small: 'gap-1 px-1 text-size-3',\n        medium: 'gap-1 py-0.5 px-1.5 text-size-4',\n        large: 'gap-2 py-1 px-2 text-size-5',\n      },\n      variant: {\n        dot: 'gap-0 p-0 text-[0px] leading-none',\n        text: '',\n      },\n      position: {\n        'top-right': '-top-1 -right-1',\n        'top-left': '-top-1 -left-1',\n        'bottom-right': '-bottom-1 -right-1',\n        'bottom-left': '-bottom-1 -left-1',\n      },\n      blink: {\n        true: 'after:content-[\"\"] after:absolute  after:rounded-full after:bg-[--bcm-badge-bg] after:animate-blink after:w-full after:h-full',\n      },\n    },\n    compoundVariants: [\n      {\n        variant: 'dot',\n        size: 'small',\n        class: 'size-1',\n      },\n      {\n        variant: 'dot',\n        size: 'medium',\n        class: 'size-1.5',\n      },\n      {\n        variant: 'dot',\n        size: 'large',\n        class: 'size-2',\n      },\n    ],\n    defaultVariants: {\n      variant: 'text',\n      size: 'medium',\n      position: 'top-right',\n      blink: false,\n    },\n  });\n\n  private get offsetStyle() {\n    if (!this.offset) return {};\n    const [x = 0, y = 0] = this.offset.split(',').map(val => val.trim());\n    return { transform: `translate(${x}px, ${y}px)` };\n  }\n\n  private get badgeStyle() {\n    if (!this.color) return {};\n    const variantType = this.soft ? 'soft' : 'vivid';\n\n    return {\n      '--bcm-badge-bg': `var(--bcm-ui-color-background-${variantType}-${this.color}-default)`,\n      '--bcm-badge-text': this.soft ? `var(--bcm-ui-color-text-palette-${this.color})` : 'var(--bcm-ui-color-text-base)',\n    };\n  }\n\n  render() {\n    return (\n      <div class=\"relative inline-flex\">\n        <slot></slot>\n        <div\n          role=\"status\"\n          aria-live=\"polite\"\n          aria-label={this.status ? `Status: ${this.status}` : undefined}\n          class={this.classes({\n            size: this.size,\n            variant: this.variant,\n            position: this.position,\n            blink: this.blink,\n          })}\n          style={{\n            ...this.badgeStyle,\n            ...this.offsetStyle,\n          }}\n        >\n          {this.variant == 'text' && <slot name=\"badge\">{this.text}</slot>}\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/bcm-basic-badge.cjs.entry.js

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-6710808e.js');
-const index$1 = require('./index-310db2a6.js');
+const tv = require('./tv-d2e35446.js');
 
-const basicBadgeCss = ":host{--bcm-badge-bg:var(--bcm-ui-color-background-default-default);--bcm-badge-text:var(--bcm-ui-color-text-default);--bcm-badge-radius:9999px;display:inline-flex;height:-moz-fit-content;height:fit-content;width:-moz-fit-content;width:fit-content}.badge-content{color:var(--bcm-badge-text);font-weight:500}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.static{position:static}.inline-flex{display:inline-flex}.size-1{height:.25rem;width:.25rem}.size-1\\.5{height:.375rem;width:.375rem}.size-2{height:.5rem;width:.5rem}.select-none{user-select:none}.items-center{align-items:center}.justify-center{justify-content:center}.gap-0{gap:0}.whitespace-nowrap{white-space:nowrap}.rounded-\\[--bcm-badge-radius\\]{border-radius:var(--bcm-badge-radius)}.bg-\\[--bcm-badge-bg\\]{background-color:var(--bcm-badge-bg)}.p-0{padding:0}.px-1{padding-left:.25rem;padding-right:.25rem}.px-1\\.5{padding-left:.375rem;padding-right:.375rem}.px-2{padding-left:.5rem;padding-right:.5rem}.py-0\\.5{padding-bottom:.125rem;padding-top:.125rem}.py-1{padding-bottom:.25rem;padding-top:.25rem}.text-\\[0px\\]{font-size:0}.text-size-3{font-size:var(--bcm-ui-font-size-3,12px);line-height:var(--bcm-ui-line-height-3,16px)}.text-size-4{font-size:var(--bcm-ui-font-size-4,14px);line-height:var(--bcm-ui-line-height-4,20px)}.text-size-5{font-size:var(--bcm-ui-font-size-5,16px);line-height:var(--bcm-ui-line-height-5,24px)}.font-medium{font-weight:500}.leading-none{line-height:1}.text-\\[--bcm-badge-text\\]{color:var(--bcm-badge-text)}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}";
+const basicBadgeCss = ":host{--bcm-badge-bg:var(--bcm-ui-color-background-default-default);--bcm-badge-text:var(--bcm-ui-color-text-default);--bcm-badge-radius:9999px;display:inline-flex;height:-moz-fit-content;height:fit-content;width:-moz-fit-content;width:fit-content}.badge-content{color:var(--bcm-badge-text);font-weight:500}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.inline-flex{display:inline-flex}.size-1{height:.25rem;width:.25rem}.size-1\\.5{height:.375rem;width:.375rem}.size-2{height:.5rem;width:.5rem}.select-none{user-select:none}.items-center{align-items:center}.justify-center{justify-content:center}.gap-0{gap:0}.whitespace-nowrap{white-space:nowrap}.rounded-\\[--bcm-badge-radius\\]{border-radius:var(--bcm-badge-radius)}.bg-\\[--bcm-badge-bg\\]{background-color:var(--bcm-badge-bg)}.p-0{padding:0}.px-1{padding-left:.25rem;padding-right:.25rem}.px-1\\.5{padding-left:.375rem;padding-right:.375rem}.px-2{padding-left:.5rem;padding-right:.5rem}.py-0\\.5{padding-bottom:.125rem;padding-top:.125rem}.py-1{padding-bottom:.25rem;padding-top:.25rem}.text-\\[0px\\]{font-size:0}.text-size-3{font-size:var(--bcm-ui-font-size-3,12px);line-height:var(--bcm-ui-line-height-3,16px)}.text-size-4{font-size:var(--bcm-ui-font-size-4,14px);line-height:var(--bcm-ui-line-height-4,20px)}.text-size-5{font-size:var(--bcm-ui-font-size-5,16px);line-height:var(--bcm-ui-line-height-5,24px)}.font-medium{font-weight:500}.leading-none{line-height:1}.text-\\[--bcm-badge-text\\]{color:var(--bcm-badge-text)}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}";
 const BcmBasicBadgeStyle0 = basicBadgeCss;
 
 const BasicBadge = class {
@@ -32,7 +32,7 @@ const BasicBadge = class {
          * @default false
          */
         this.soft = false;
-        this.classes = index$1.ce({
+        this.classes = tv.tv({
             base: 'badge bcm-ui-element inline-flex items-center justify-center whitespace-nowrap select-none font-medium bg-[--bcm-badge-bg] text-[--bcm-badge-text] rounded-[--bcm-badge-radius]',
             variants: {
                 size: {
@@ -79,10 +79,10 @@ const BasicBadge = class {
         };
     }
     render() {
-        return (index.h("span", { key: '50278a91e220a4557bfebf2e061be0351f3bad51', part: "base", role: "status", "aria-live": "polite", style: this.badgeStyle, class: this.classes({
+        return (index.h("span", { key: 'bfbf8ca56ea7e47a7ae8905ba85e851241a847e4', part: "base", role: "status", "aria-live": "polite", style: this.badgeStyle, class: this.classes({
                 size: this.size,
                 variant: this.variant,
-            }) }, this.variant === 'text' && (index.h("span", { key: 'd0f6c86104dc092a00dd4e8a886431fc5eb1e793', class: "badge-content" }, index.h("slot", { key: '2133ac8cc0cf07a385544d395a6881942960bd5d' })))));
+            }) }, this.variant === 'text' && (index.h("span", { key: '7f752ae67fe7eff49c9e95fb2fd5043223e1beb8', class: "badge-content" }, index.h("slot", { key: '25cc949858b1c39614be77f4f06cd98a7ce5a62a' })))));
     }
 };
 BasicBadge.style = BcmBasicBadgeStyle0;

package/dist/cjs/bcm-basic-badge.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"bcm-basic-badge.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,aAAa,GAAG,ovDAAovD,CAAC;AAC3wD,4BAAe,aAAa;;MCqBf,UAAU;IALvB;;;;;;;QAYE,SAAI,GAAiC,QAAQ,CAAC;;;;;;;;QAU9C,YAAO,GAAmB,MAAM,CAAC;;;;;;;QAkBjC,SAAI,GAAY,KAAK,CAAC;QAWd,YAAO,GAAGA,UAAE,CAAC;YACnB,IAAI,EAAE,iLAAiL;YACvL,QAAQ,EAAE;gBACR,IAAI,EAAE;oBACJ,KAAK,EAAE,kBAAkB;oBACzB,MAAM,EAAE,2BAA2B;oBACnC,KAAK,EAAE,uBAAuB;iBAC/B;gBACD,OAAO,EAAE;oBACP,GAAG,EAAE,mCAAmC;oBACxC,IAAI,EAAE,EAAE;iBACT;aACF;YACD,gBAAgB,EAAE;gBAChB;oBACE,OAAO,EAAE,KAAK;oBACd,IAAI,EAAE,OAAO;oBACb,KAAK,EAAE,QAAQ;iBAChB;gBACD;oBACE,OAAO,EAAE,KAAK;oBACd,IAAI,EAAE,QAAQ;oBACd,KAAK,EAAE,UAAU;iBAClB;gBACD;oBACE,OAAO,EAAE,KAAK;oBACd,IAAI,EAAE,OAAO;oBACb,KAAK,EAAE,QAAQ;iBAChB;aACF;YACD,eAAe,EAAE;gBACf,OAAO,EAAE,MAAM;gBACf,IAAI,EAAE,QAAQ;gBACd,KAAK,EAAE,KAAK;aACb;SACF,CAAC,CAAC;KAgCJ;IA9BC,IAAY,UAAU;QACpB,IAAI,CAAC,IAAI,CAAC,KAAK;YAAE,OAAO,EAAE,CAAC;QAC3B,MAAM,WAAW,GAAG,IAAI,CAAC,IAAI,GAAG,SAAS,GAAG,OAAO,CAAC;QAEpD,OAAO;YACL,gBAAgB,EAAE,iCAAiC,WAAW,IAAI,IAAI,CAAC,KAAK,WAAW;YACvF,kBAAkB,EAAE,IAAI,CAAC,IAAI,GAAG,mCAAmC,IAAI,CAAC,KAAK,GAAG,GAAG,+BAA+B;SACnH,CAAC;KACH;IAED,MAAM;QACJ,QACEC,mEACE,IAAI,EAAC,MAAM,EACX,IAAI,EAAC,QAAQ,eACH,QAAQ,EAClB,KAAK,EAAE,IAAI,CAAC,UAAU,EACtB,KAAK,EAAE,IAAI,CAAC,OAAO,CAAC;gBAClB,IAAI,EAAE,IAAI,CAAC,IAAI;gBACf,OAAO,EAAE,IAAI,CAAC,OAAO;aACtB,CAAC,IAED,IAAI,CAAC,OAAO,KAAK,MAAM,KACtBA,mEAAM,KAAK,EAAC,eAAe,IACzBA,oEAAa,CACR,CACR,CACI,EACP;KACH;;;;;;","names":["tv","h"],"sources":["src/components/basic-badge/basic-badge.css?tag=bcm-basic-badge&encapsulation=shadow","src/components/basic-badge/basic-badge.component.tsx"],"sourcesContent":[":host {\n  display: inline-flex;\n  height: fit-content;\n  width: fit-content;\n  --bcm-badge-bg: var(--bcm-ui-color-background-default-default);\n  --bcm-badge-text: var(--bcm-ui-color-text-default);\n  --bcm-badge-radius: 9999px;\n}\n\n.badge-content {\n  color: var(--bcm-badge-text);\n  font-weight: 500;\n}\n","import { Component, ComponentInterface, Prop, h } from '@stencil/core';\nimport { tv } from 'tailwind-variants';\n\n/**\n * @component BcmBasicBadge\n * @description A basic badge component that can be used as a status indicator or to highlight content.\n * Supports dot and text variants with different sizes and color options.\n *\n * @example Basic usage\n * <bcm-basic-badge size=\"medium\" color=\"primary\">\n *   New\n * </bcm-basic-badge>\n *\n * @example Dot variant\n * <bcm-basic-badge variant=\"dot\" color=\"success\" />\n */\n\n@Component({\n  tag: 'bcm-basic-badge',\n  styleUrl: 'basic-badge.css',\n  shadow: true,\n})\nexport class BasicBadge implements ComponentInterface {\n  /**\n   * Determines the size of the badge.\n   * @type {'small' | 'medium' | 'large'}\n   * @default 'medium'\n   */\n  @Prop()\n  size: 'small' | 'medium' | 'large' = 'medium';\n\n  /**\n   * Sets the visual variant of the badge.\n   * 'dot': Appears as a small dot indicator\n   * 'text': Displays content as text\n   * @type {'dot' | 'text'}\n   * @default 'text'\n   */\n  @Prop()\n  variant: 'dot' | 'text' = 'text';\n\n  /**\n   * Defines the color of the badge.\n   * Uses system color variables (e.g., 'primary', 'success', 'warning', etc.)\n   * @type {string}\n   * @optional\n   */\n  @Prop()\n  color?: string;\n\n  /**\n   * Enables soft color mode for the badge.\n   * When true, uses lighter tones and pastel colors.\n   * @type {boolean}\n   * @default false\n   */\n  @Prop()\n  soft: boolean = false;\n\n  /**\n   * Text to be displayed inside the badge.\n   * Used when variant is set to 'text'.\n   * @type {string}\n   * @optional\n   */\n  @Prop()\n  text?: string;\n\n  private classes = tv({\n    base: 'badge bcm-ui-element inline-flex items-center justify-center whitespace-nowrap select-none font-medium bg-[--bcm-badge-bg] text-[--bcm-badge-text] rounded-[--bcm-badge-radius]',\n    variants: {\n      size: {\n        small: 'px-1 text-size-3',\n        medium: 'py-0.5 px-1.5 text-size-4',\n        large: 'py-1 px-2 text-size-5',\n      },\n      variant: {\n        dot: 'gap-0 p-0 text-[0px] leading-none',\n        text: '',\n      },\n    },\n    compoundVariants: [\n      {\n        variant: 'dot',\n        size: 'small',\n        class: 'size-1',\n      },\n      {\n        variant: 'dot',\n        size: 'medium',\n        class: 'size-1.5',\n      },\n      {\n        variant: 'dot',\n        size: 'large',\n        class: 'size-2',\n      },\n    ],\n    defaultVariants: {\n      variant: 'text',\n      size: 'medium',\n      blink: false,\n    },\n  });\n\n  private get badgeStyle() {\n    if (!this.color) return {};\n    const variantType = this.soft ? 'palette' : 'vivid';\n\n    return {\n      '--bcm-badge-bg': `var(--bcm-ui-color-background-${variantType}-${this.color}-default)`,\n      '--bcm-badge-text': this.soft ? `var(--bcm-ui-color-text-palette-${this.color})` : 'var(--bcm-ui-color-text-base)',\n    };\n  }\n\n  render() {\n    return (\n      <span\n        part=\"base\"\n        role=\"status\"\n        aria-live=\"polite\"\n        style={this.badgeStyle}\n        class={this.classes({\n          size: this.size,\n          variant: this.variant,\n        })}\n      >\n        {this.variant === 'text' && (\n          <span class=\"badge-content\">\n            <slot></slot>\n          </span>\n        )}\n      </span>\n    );\n  }\n}\n"],"version":3}
+{"file":"bcm-basic-badge.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,aAAa,GAAG,4tDAA4tD,CAAC;AACnvD,4BAAe,aAAa;;MCqBf,UAAU;IALvB;;;;;;;QAYE,SAAI,GAAiC,QAAQ,CAAC;;;;;;;;QAU9C,YAAO,GAAmB,MAAM,CAAC;;;;;;;QAkBjC,SAAI,GAAY,KAAK,CAAC;QAWd,YAAO,GAAGA,KAAE,CAAC;YACnB,IAAI,EAAE,iLAAiL;YACvL,QAAQ,EAAE;gBACR,IAAI,EAAE;oBACJ,KAAK,EAAE,kBAAkB;oBACzB,MAAM,EAAE,2BAA2B;oBACnC,KAAK,EAAE,uBAAuB;iBAC/B;gBACD,OAAO,EAAE;oBACP,GAAG,EAAE,mCAAmC;oBACxC,IAAI,EAAE,EAAE;iBACT;aACF;YACD,gBAAgB,EAAE;gBAChB;oBACE,OAAO,EAAE,KAAK;oBACd,IAAI,EAAE,OAAO;oBACb,KAAK,EAAE,QAAQ;iBAChB;gBACD;oBACE,OAAO,EAAE,KAAK;oBACd,IAAI,EAAE,QAAQ;oBACd,KAAK,EAAE,UAAU;iBAClB;gBACD;oBACE,OAAO,EAAE,KAAK;oBACd,IAAI,EAAE,OAAO;oBACb,KAAK,EAAE,QAAQ;iBAChB;aACF;YACD,eAAe,EAAE;gBACf,OAAO,EAAE,MAAM;gBACf,IAAI,EAAE,QAAQ;gBACd,KAAK,EAAE,KAAK;aACb;SACF,CAAC,CAAC;KAgCJ;IA9BC,IAAY,UAAU;QACpB,IAAI,CAAC,IAAI,CAAC,KAAK;YAAE,OAAO,EAAE,CAAC;QAC3B,MAAM,WAAW,GAAG,IAAI,CAAC,IAAI,GAAG,SAAS,GAAG,OAAO,CAAC;QAEpD,OAAO;YACL,gBAAgB,EAAE,iCAAiC,WAAW,IAAI,IAAI,CAAC,KAAK,WAAW;YACvF,kBAAkB,EAAE,IAAI,CAAC,IAAI,GAAG,mCAAmC,IAAI,CAAC,KAAK,GAAG,GAAG,+BAA+B;SACnH,CAAC;KACH;IAED,MAAM;QACJ,QACEC,mEACE,IAAI,EAAC,MAAM,EACX,IAAI,EAAC,QAAQ,eACH,QAAQ,EAClB,KAAK,EAAE,IAAI,CAAC,UAAU,EACtB,KAAK,EAAE,IAAI,CAAC,OAAO,CAAC;gBAClB,IAAI,EAAE,IAAI,CAAC,IAAI;gBACf,OAAO,EAAE,IAAI,CAAC,OAAO;aACtB,CAAC,IAED,IAAI,CAAC,OAAO,KAAK,MAAM,KACtBA,mEAAM,KAAK,EAAC,eAAe,IACzBA,oEAAa,CACR,CACR,CACI,EACP;KACH;;;;;;","names":["tv","h"],"sources":["src/components/basic-badge/basic-badge.css?tag=bcm-basic-badge&encapsulation=shadow","src/components/basic-badge/basic-badge.component.tsx"],"sourcesContent":[":host {\n  display: inline-flex;\n  height: fit-content;\n  width: fit-content;\n  --bcm-badge-bg: var(--bcm-ui-color-background-default-default);\n  --bcm-badge-text: var(--bcm-ui-color-text-default);\n  --bcm-badge-radius: 9999px;\n}\n\n.badge-content {\n  color: var(--bcm-badge-text);\n  font-weight: 500;\n}\n","import { Component, ComponentInterface, Prop, h } from '@stencil/core';\nimport { tv } from '@utils/tv';\n\n/**\n * @component BcmBasicBadge\n * @description A basic badge component that can be used as a status indicator or to highlight content.\n * Supports dot and text variants with different sizes and color options.\n *\n * @example Basic usage\n * <bcm-basic-badge size=\"medium\" color=\"primary\">\n *   New\n * </bcm-basic-badge>\n *\n * @example Dot variant\n * <bcm-basic-badge variant=\"dot\" color=\"success\" />\n */\n\n@Component({\n  tag: 'bcm-basic-badge',\n  styleUrl: 'basic-badge.css',\n  shadow: true,\n})\nexport class BasicBadge implements ComponentInterface {\n  /**\n   * Determines the size of the badge.\n   * @type {'small' | 'medium' | 'large'}\n   * @default 'medium'\n   */\n  @Prop()\n  size: 'small' | 'medium' | 'large' = 'medium';\n\n  /**\n   * Sets the visual variant of the badge.\n   * 'dot': Appears as a small dot indicator\n   * 'text': Displays content as text\n   * @type {'dot' | 'text'}\n   * @default 'text'\n   */\n  @Prop()\n  variant: 'dot' | 'text' = 'text';\n\n  /**\n   * Defines the color of the badge.\n   * Uses system color variables (e.g., 'primary', 'success', 'warning', etc.)\n   * @type {string}\n   * @optional\n   */\n  @Prop()\n  color?: string;\n\n  /**\n   * Enables soft color mode for the badge.\n   * When true, uses lighter tones and pastel colors.\n   * @type {boolean}\n   * @default false\n   */\n  @Prop()\n  soft: boolean = false;\n\n  /**\n   * Text to be displayed inside the badge.\n   * Used when variant is set to 'text'.\n   * @type {string}\n   * @optional\n   */\n  @Prop()\n  text?: string;\n\n  private classes = tv({\n    base: 'badge bcm-ui-element inline-flex items-center justify-center whitespace-nowrap select-none font-medium bg-[--bcm-badge-bg] text-[--bcm-badge-text] rounded-[--bcm-badge-radius]',\n    variants: {\n      size: {\n        small: 'px-1 text-size-3',\n        medium: 'py-0.5 px-1.5 text-size-4',\n        large: 'py-1 px-2 text-size-5',\n      },\n      variant: {\n        dot: 'gap-0 p-0 text-[0px] leading-none',\n        text: '',\n      },\n    },\n    compoundVariants: [\n      {\n        variant: 'dot',\n        size: 'small',\n        class: 'size-1',\n      },\n      {\n        variant: 'dot',\n        size: 'medium',\n        class: 'size-1.5',\n      },\n      {\n        variant: 'dot',\n        size: 'large',\n        class: 'size-2',\n      },\n    ],\n    defaultVariants: {\n      variant: 'text',\n      size: 'medium',\n      blink: false,\n    },\n  });\n\n  private get badgeStyle() {\n    if (!this.color) return {};\n    const variantType = this.soft ? 'palette' : 'vivid';\n\n    return {\n      '--bcm-badge-bg': `var(--bcm-ui-color-background-${variantType}-${this.color}-default)`,\n      '--bcm-badge-text': this.soft ? `var(--bcm-ui-color-text-palette-${this.color})` : 'var(--bcm-ui-color-text-base)',\n    };\n  }\n\n  render() {\n    return (\n      <span\n        part=\"base\"\n        role=\"status\"\n        aria-live=\"polite\"\n        style={this.badgeStyle}\n        class={this.classes({\n          size: this.size,\n          variant: this.variant,\n        })}\n      >\n        {this.variant === 'text' && (\n          <span class=\"badge-content\">\n            <slot></slot>\n          </span>\n        )}\n      </span>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/bcm-button-group.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-6710808e.js');
-const index$1 = require('./index-310db2a6.js');
+const tv = require('./tv-d2e35446.js');
 
 const buttonGroupCss = ".block{display:block}.flex{display:flex}:host{display:block}.bcm-button-group{display:flex}.static{position:static}.w-full{width:100%}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}";
 const BcmButtonGroupStyle0 = buttonGroupCss;
@@ -13,7 +13,7 @@ const BcmButtonGroup = class {
         index.registerInstance(this, hostRef);
         /** Button orientation */
         this.orientation = 'horizontal';
-        this.buttonGroupClass = index$1.ce({
+        this.buttonGroupClass = tv.tv({
             base: 'bcm-button-group',
             variants: {
                 orientation: {
@@ -83,10 +83,10 @@ const BcmButtonGroup = class {
         });
     }
     render() {
-        return (index.h(index.Host, { key: '12320236b3364ea1322ce3ccaced89e17f527657' }, index.h("div", { key: '24e1acb79b8dbae8ce504f7aa2ec91e4cf799788', class: this.buttonGroupClass({
+        return (index.h(index.Host, { key: 'd42d48fa72f0956f51e627a96fa880960150bb0d' }, index.h("div", { key: '470a6acf604f16ba3d63f55b5683177e3cf7fabe', class: this.buttonGroupClass({
                 orientation: this.orientation,
                 fullWidth: this.fullWidth,
-            }) }, index.h("slot", { key: '18e1e423bd5e2743f83817ef5d3f1e0f3dfa648f' }))));
+            }) }, index.h("slot", { key: 'dc17cdcd5d5c1ce5084f7739dcb954d4e58ee4fb' }))));
     }
     get host() { return index.getElement(this); }
 };

package/dist/cjs/bcm-button-group.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"bcm-button-group.entry.cjs.js","mappings":"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","names":["tv","h","Host"],"sources":["src/components/button-group/button-group.css?tag=bcm-button-group&encapsulation=shadow","src/components/button-group/button-group.component.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.bcm-button-group {\n  display: flex;\n}\n","import { Component, Prop, h, Host, Element, ComponentInterface } from '@stencil/core';\nimport { ButtonKind, ButtonSize, ButtonStatus } from '../button/types';\nimport { tv } from 'tailwind-variants';\n\n@Component({\n  tag: 'bcm-button-group',\n  styleUrl: 'button-group.css',\n  shadow: true,\n})\nexport class BcmButtonGroup implements ComponentInterface {\n  @Element() host: HTMLElement;\n\n  /** Defines the main visual style of buttons */\n  @Prop()\n  kind?: ButtonKind;\n\n  /** Controls the button size */\n  @Prop()\n  size?: ButtonSize;\n\n  /** Defines the button's status/state color */\n  @Prop()\n  status?: ButtonStatus;\n\n  /** Full width buttons */\n  @Prop({ attribute: 'full-width', reflect: true })\n  fullWidth?: boolean;\n\n  /** Loading state */\n  @Prop()\n  loading?: boolean;\n\n  /** Disabled state */\n  @Prop()\n  disabled?: boolean;\n\n  /** Button orientation */\n  @Prop({ reflect: true })\n  orientation: 'horizontal' | 'vertical' = 'horizontal';\n\n  componentDidLoad() {\n    this.applyPropertiesToButtons();\n    this.setButtonPositions();\n  }\n\n  componentDidUpdate() {\n    this.applyPropertiesToButtons();\n    this.setButtonPositions();\n  }\n\n  private applyPropertiesToButtons() {\n    const buttons = this.host.querySelectorAll('bcm-button');\n\n    buttons.forEach(button => {\n      if (this.kind !== undefined) button.kind = this.kind;\n      if (this.size !== undefined) button.size = this.size;\n      if (this.status !== undefined) button.status = this.status;\n      if (this.fullWidth !== undefined) button.fullWidth = this.fullWidth;\n      if (this.loading !== undefined) button.loading = this.loading;\n      if (this.disabled !== undefined) button.disabled = this.disabled;\n\n      if (this.orientation === 'vertical') {\n        button.classList.add('orientation-vertical');\n      } else {\n        button.classList.remove('orientation-vertical');\n      }\n    });\n  }\n\n  private setButtonPositions() {\n    const buttons = this.host.querySelectorAll('bcm-button');\n    const totalButtons = buttons.length;\n\n    if (totalButtons === 0) return;\n\n    buttons.forEach((button, index) => {\n      if (totalButtons === 1) {\n        button.position = null;\n      } else if (index === 0) {\n        button.position = 'first';\n      } else if (index === totalButtons - 1) {\n        button.position = 'last';\n      } else {\n        button.position = 'middle';\n      }\n    });\n  }\n\n  private buttonGroupClass = tv(\n    {\n      base: 'bcm-button-group',\n      variants: {\n        orientation: {\n          horizontal: 'flex flex-row',\n          vertical: 'flex flex-col',\n        },\n        fullWidth: {\n          true: 'w-full',\n        },\n      },\n      defaultVariants: {\n        orientation: 'horizontal',\n      },\n    },\n    {\n      twMerge: false,\n    },\n  );\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={this.buttonGroupClass({\n            orientation: this.orientation,\n            fullWidth: this.fullWidth,\n          })}\n        >\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"bcm-button-group.entry.cjs.js","mappings":"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","names":["tv","h","Host"],"sources":["src/components/button-group/button-group.css?tag=bcm-button-group&encapsulation=shadow","src/components/button-group/button-group.component.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.bcm-button-group {\n  display: flex;\n}\n","import { Component, Prop, h, Host, Element, ComponentInterface } from '@stencil/core';\nimport { ButtonKind, ButtonSize, ButtonStatus } from '../button/types';\nimport { tv } from '@utils/tv';\n\n@Component({\n  tag: 'bcm-button-group',\n  styleUrl: 'button-group.css',\n  shadow: true,\n})\nexport class BcmButtonGroup implements ComponentInterface {\n  @Element() host: HTMLElement;\n\n  /** Defines the main visual style of buttons */\n  @Prop()\n  kind?: ButtonKind;\n\n  /** Controls the button size */\n  @Prop()\n  size?: ButtonSize;\n\n  /** Defines the button's status/state color */\n  @Prop()\n  status?: ButtonStatus;\n\n  /** Full width buttons */\n  @Prop({ attribute: 'full-width', reflect: true })\n  fullWidth?: boolean;\n\n  /** Loading state */\n  @Prop()\n  loading?: boolean;\n\n  /** Disabled state */\n  @Prop()\n  disabled?: boolean;\n\n  /** Button orientation */\n  @Prop({ reflect: true })\n  orientation: 'horizontal' | 'vertical' = 'horizontal';\n\n  componentDidLoad() {\n    this.applyPropertiesToButtons();\n    this.setButtonPositions();\n  }\n\n  componentDidUpdate() {\n    this.applyPropertiesToButtons();\n    this.setButtonPositions();\n  }\n\n  private applyPropertiesToButtons() {\n    const buttons = this.host.querySelectorAll('bcm-button');\n\n    buttons.forEach(button => {\n      if (this.kind !== undefined) button.kind = this.kind;\n      if (this.size !== undefined) button.size = this.size;\n      if (this.status !== undefined) button.status = this.status;\n      if (this.fullWidth !== undefined) button.fullWidth = this.fullWidth;\n      if (this.loading !== undefined) button.loading = this.loading;\n      if (this.disabled !== undefined) button.disabled = this.disabled;\n\n      if (this.orientation === 'vertical') {\n        button.classList.add('orientation-vertical');\n      } else {\n        button.classList.remove('orientation-vertical');\n      }\n    });\n  }\n\n  private setButtonPositions() {\n    const buttons = this.host.querySelectorAll('bcm-button');\n    const totalButtons = buttons.length;\n\n    if (totalButtons === 0) return;\n\n    buttons.forEach((button, index) => {\n      if (totalButtons === 1) {\n        button.position = null;\n      } else if (index === 0) {\n        button.position = 'first';\n      } else if (index === totalButtons - 1) {\n        button.position = 'last';\n      } else {\n        button.position = 'middle';\n      }\n    });\n  }\n\n  private buttonGroupClass = tv(\n    {\n      base: 'bcm-button-group',\n      variants: {\n        orientation: {\n          horizontal: 'flex flex-row',\n          vertical: 'flex flex-col',\n        },\n        fullWidth: {\n          true: 'w-full',\n        },\n      },\n      defaultVariants: {\n        orientation: 'horizontal',\n      },\n    },\n    {\n      twMerge: false,\n    },\n  );\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={this.buttonGroupClass({\n            orientation: this.orientation,\n            fullWidth: this.fullWidth,\n          })}\n        >\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/bcm-button_8.cjs.entry.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-6710808e.js');
-const index$1 = require('./index-310db2a6.js');
-const index$2 = require('./index-5a88e57b.js');
+const tv = require('./tv-d2e35446.js');
+const index$1 = require('./index-5a88e57b.js');
 const generateId = require('./generate-id-f6982042.js');
 const validationMessages = require('./validation-messages-18389279.js');
 const floatingUi_dom_esm = require('./floating-ui.dom.esm-3ec8404c.js');
@@ -191,7 +191,7 @@ const BcmButton = class {
         this.handleBlur = (event) => {
             this.bcmBlur.emit(event);
         };
-        this.buttonClass = index$1.ce({
+        this.buttonClass = tv.tv({
             base: 'bcm-button appearance-none inline-flex items-center justify-center border border-solid rounded outline-0',
             variants: {
                 size: {
@@ -305,19 +305,19 @@ const BcmButton = class {
     }
     render() {
         const { icon, position } = this.buttonIcon;
-        return (index.h(index.Host, { key: '821f52c3a042fed2dce63e90152aebe3e9f40dc5' }, index.h("button", { key: '429988208144ebd9b52f1543825860e9fdf6c538', type: this.type, disabled: this.disabled || this.loading, "aria-label": this.label, "aria-expanded": this.expanded, "aria-controls": this.controls, "aria-disabled": this.disabled, onClick: this.handleClick, onFocus: this.handleFocus, onBlur: this.handleBlur, style: this.buttonStyles, class: this.buttonClass({
+        return (index.h(index.Host, { key: '33e438220fdb261ff87289f8dcbaa7e0601d73c1' }, index.h("button", { key: '4fb4d22a44bac12b3780f9570c734f60fdaba788', type: this.type, disabled: this.disabled || this.loading, "aria-label": this.label, "aria-expanded": this.expanded, "aria-controls": this.controls, "aria-disabled": this.disabled, onClick: this.handleClick, onFocus: this.handleFocus, onBlur: this.handleBlur, style: this.buttonStyles, class: this.buttonClass({
                 size: this.size,
                 kind: this.kind,
                 fullWidth: this.fullWidth,
                 disabled: this.disabled,
                 loading: this.loading,
                 position: this.position,
-            }) }, this.loading && index.h("slot", { key: '525e1f9ffdc301e0bba2939d9fece560b377d9a3', name: "loading" }), index.h("span", { key: '530f53a3d0f483555752f5ac95d5f029faf03a8d' }, index.h("slot", { key: '61b27a37dce9588633f45f18d025c207ee9d23f7', name: "prefix" }, position === 'prefix' && icon && index.h("i", { key: '6b0d757356f94f0d1ed4731175f2340dfdb3ba45', class: ' leading-none ' + icon }))), index.h("slot", { key: '8b014d1f25d7c8387c6a3b18474207695a911e12' }, this.buttonText), index.h("span", { key: '9e9c42c69be3891d2720dbd9882ea418a90802b8' }, index.h("slot", { key: 'fc676b39c8c79225d09c9cd18506087bef811acc', name: "suffix" }, position === 'suffix' && icon && index.h("i", { key: '0ad46cc5204af2a6525cc0156d828c57bd5078a5', class: ' leading-none ' + icon }))))));
+            }) }, this.loading && index.h("slot", { key: 'fa8dcbcba338f94700842fd0482d0261c9a1d3e3', name: "loading" }), index.h("span", { key: '345162b4ad0034d5081dee0438ceeefe4930ecfb' }, index.h("slot", { key: 'c65c9aa07fd2f159426192fc6239c394ee6ec58d', name: "prefix" }, position === 'prefix' && icon && index.h("i", { key: 'c94e32a5d308ba3ad98ac10239fc9a155f47e2ac', class: ' leading-none ' + icon }))), index.h("slot", { key: '171402bb9251492c7e5b0cf572fb0e2ae62a6add' }, this.buttonText), index.h("span", { key: 'ae3c5a885029b3d4c54e5ca21ac22adffa26b013' }, index.h("slot", { key: 'f80819d122624bb279d19822278c8e651dec27c7', name: "suffix" }, position === 'suffix' && icon && index.h("i", { key: '69631e99a8b7f47dd1d00984f582ec6e7b5433e8', class: ' leading-none ' + icon }))))));
     }
 };
 BcmButton.style = BcmButtonStyle0;
 
-const drawerCss = ".contents{display:contents}:host{display:contents}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.visible{visibility:visible}.invisible{visibility:hidden}.static{position:static}.fixed{position:fixed}.inset-0{inset:0}.bottom-0{bottom:0}.left-0{left:0}.right-0{right:0}.top-0{top:0}.z-40{z-index:40}.z-50{z-index:50}.m-0{margin:0}.flex{display:flex}.hidden{display:none}.h-6{height:1.5rem}.w-6{width:1.5rem}.flex-grow{flex-grow:1}.-translate-x-full{--tw-translate-x:-100%}.-translate-x-full,.-translate-y-full{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-full{--tw-translate-y:-100%}.translate-x-0{--tw-translate-x:0px}.translate-x-0,.translate-x-full{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-x-full{--tw-translate-x:100%}.translate-y-0{--tw-translate-y:0px}.translate-y-0,.translate-y-full{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-y-full{--tw-translate-y:100%}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-pointer{cursor:pointer}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-between{justify-content:space-between}.overflow-y-auto{overflow-y:auto}.border-none{border-style:none}.bg-color-base{background-color:var(--bcm-ui-color-background-base-default)}.bg-color-default{background-color:var(--bcm-ui-color-background-default-default)}.bg-color-transparent{background-color:var(--bcm-ui-color-background-transparent-default)}.bg-transparent{background-color:transparent}.p-0{padding:0}.p-4{padding:1rem}.px-4{padding-left:1rem;padding-right:1rem}.py-3{padding-bottom:.75rem;padding-top:.75rem}.text-size-5{font-size:var(--bcm-ui-font-size-5,16px);line-height:var(--bcm-ui-line-height-5,24px)}.text-size-6{font-size:var(--bcm-ui-font-size-6,18px);line-height:var(--bcm-ui-line-height-6,24px)}.font-semibold{font-weight:600}.text-color-default{color:var(--bcm-ui-color-text-default)}.opacity-0{opacity:0}.opacity-100{opacity:1}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.transition-opacity{transition-duration:.15s;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-transform{transition-duration:.15s;transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-300{transition-duration:.3s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.hover\\:bg-color-default-hover:hover{background-color:var(--bcm-ui-color-background-default-hover)}.active\\:bg-color-default-active:active{background-color:var(--bcm-ui-color-background-default-active)}";
+const drawerCss = ".contents{display:contents}:host{display:contents}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.visible{visibility:visible}.invisible{visibility:hidden}.static{position:static}.fixed{position:fixed}.inset-0{inset:0}.bottom-0{bottom:0}.left-0{left:0}.right-0{right:0}.top-0{top:0}.z-40{z-index:40}.z-50{z-index:50}.m-0{margin:0}.flex{display:flex}.hidden{display:none}.h-6{height:1.5rem}.w-6{width:1.5rem}.flex-grow{flex-grow:1}.-translate-x-full{--tw-translate-x:-100%}.-translate-x-full,.-translate-y-full{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-full{--tw-translate-y:-100%}.translate-x-0{--tw-translate-x:0px}.translate-x-0,.translate-x-full{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-x-full{--tw-translate-x:100%}.translate-y-0{--tw-translate-y:0px}.translate-y-0,.translate-y-full{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-y-full{--tw-translate-y:100%}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-pointer{cursor:pointer}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-between{justify-content:space-between}.overflow-y-auto{overflow-y:auto}.border-none{border-style:none}.bg-color-base{background-color:var(--bcm-ui-color-background-base-default)}.bg-color-default{background-color:var(--bcm-ui-color-background-default-default)}.bg-color-transparent{background-color:var(--bcm-ui-color-background-transparent-default)}.bg-transparent{background-color:transparent}.p-0{padding:0}.p-4{padding:1rem}.px-4{padding-left:1rem;padding-right:1rem}.py-3{padding-bottom:.75rem;padding-top:.75rem}.text-size-5{font-size:var(--bcm-ui-font-size-5,16px);line-height:var(--bcm-ui-line-height-5,24px)}.text-size-6{font-size:var(--bcm-ui-font-size-6,18px);line-height:var(--bcm-ui-line-height-6,24px)}.font-medium{font-weight:500}.font-semibold{font-weight:600}.text-color-default{color:var(--bcm-ui-color-text-default)}.opacity-0{opacity:0}.opacity-100{opacity:1}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.transition-opacity{transition-duration:.15s;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-transform{transition-duration:.15s;transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-300{transition-duration:.3s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.hover\\:bg-color-default-hover:hover{background-color:var(--bcm-ui-color-background-default-hover)}.active\\:bg-color-default-active:active{background-color:var(--bcm-ui-color-background-default-active)}";
 const BcmDrawerStyle0 = drawerCss;
 
 const BcmDrawer = class {
@@ -332,13 +332,13 @@ const BcmDrawer = class {
         this.position = 'right';
         this.fullWidth = false;
         this.noHeader = false;
-        this.drawerClass = index$1.ce({
+        this.drawerClass = tv.tv({
             slots: {
                 backdrop: 'fixed inset-0 bg-color-transparent z-40 transition-opacity duration-300',
                 wrapper: 'bcm-ui-element fixed bg-color-base text-color-default z-50 transform transition-transform duration-300 ease-in-out flex flex-col',
                 header: 'flex justify-between items-center bg-color-default text-color-default',
                 title: 'font-semibold m-0 text-size-6',
-                closeButton: 'text-size-5 text-color-default bg-transparent border-none p-0 h-6 w-6 hover:bg-color-default-hover cursor-pointer active:bg-color-default-active',
+                closeButton: 'text-size-5 font-medium text-color-default bg-transparent border-none p-0 h-6 w-6 hover:bg-color-default-hover cursor-pointer active:bg-color-default-active',
                 content: 'overflow-y-auto flex-grow',
             },
             variants: {
@@ -428,8 +428,6 @@ const BcmDrawer = class {
                     },
                 },
             ],
-        }, {
-            twMerge: false,
         });
     }
     handleOpenChange(isOpen) {
@@ -508,7 +506,7 @@ const BcmDrawer = class {
             size: this.size,
             noHeader: this.noHeader,
         });
-        return (index.h("div", { key: '6311b0bed989d41cf504487545f414ce5b881749', part: "base" }, index.h("div", { key: '5aa597edf8d0d5523570fbb326072c2e02c813b0', part: "backdrop", class: backdrop(), onClick: () => this.hide() }), index.h("div", { key: '736cc10ae7341ad5139bc37ee9265801e0da6a6c', part: "wrapper", class: wrapper(), style: this.getWrapperStyle(), role: "dialog", "aria-modal": "true", "aria-hidden": !this.open ? 'true' : 'false', "aria-label": this.headerText }, index.h("div", { key: 'ddaf3499e8709f0ad8a58891baacfa9c5a595973', part: "header", class: header() }, index.h("h2", { key: '0124009ad323dfb4fca18618d750789a0c805ebd', part: "title", class: title() }, index.h("slot", { key: '95813a9ea32872ab5cd00f5d641cdaef8d43504d', name: "header" }, this.headerText)), index.h("button", { key: '7b7b0e998a01f29b96d0029eac9e2b87cceb0b1d', part: "close-button", class: closeButton(), onClick: () => this.hide(), "aria-label": "Close" }, index.h("bcm-icon", { key: 'd61996a289c3a0727475a3e7798866b874292885', name: "fa-solid fa-xmark" }))), index.h("div", { key: '6650b5e079d31b2bd372f80a648256761bc78a14', part: "content", class: content() }, index.h("slot", { key: '8858d3e8e12eeeb0745a3aee54507f104bd6506f' })), index.h("div", { key: '97c1aca7d7ba509aa0d1e5c2f5e28b1c3da56b80', part: "footer" }, index.h("slot", { key: 'ee90d5b261eef5e435d8247717e5fa79593893f3', name: "footer" })))));
+        return (index.h("div", { key: '44379905f1499a16d625ac4d1ff5e89fc6367d46', part: "base" }, index.h("div", { key: 'bc53e5322a61cd4af0691905c509d4c5fb765939', part: "backdrop", class: backdrop(), onClick: () => this.hide() }), index.h("div", { key: 'd5a666671d24b2f3b55b7462b5218a3e11358982', part: "wrapper", class: wrapper(), style: this.getWrapperStyle(), role: "dialog", "aria-modal": "true", "aria-hidden": !this.open ? 'true' : 'false', "aria-label": this.headerText }, index.h("div", { key: '5124de9d7fa8f3aa7267f0998f4c4f98f3ebbc4a', part: "header", class: header() }, index.h("h2", { key: '8aa4b971efa9fe0fafa1cfb94f0b6b96f21f2f15', part: "title", class: title() }, index.h("slot", { key: '949ae8f65d13e9e1c973c16a9f90205ac7e7042f', name: "header" }, this.headerText)), index.h("button", { key: 'a0c42761ee859e87dee5c267ea7245dde4fb8756', part: "close-button", class: closeButton(), onClick: () => this.hide(), "aria-label": "Close" }, index.h("bcm-icon", { key: '2df273d63da93eda2280759a909906fe4ae0c493', name: "fa-solid fa-xmark" }))), index.h("div", { key: 'b2532537d10f9aa0dcfa2fca8ac806577363e05b', part: "content", class: content() }, index.h("slot", { key: 'bfec5cff35a7bf7bf1d9801ba89559501e6f301f' })), index.h("div", { key: '4d44fdba62c74fd5c893c5296f998754228cf961', part: "footer" }, index.h("slot", { key: 'fd0a58127fd2f0ba0955cef629e55700142a8f32', name: "footer" })))));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {
@@ -526,7 +524,7 @@ const Dropdown = class {
         this.bcmDropdownChange = index.createEvent(this, "bcmDropdownChange", 1);
         this.isReady = false;
         this.dropdownItems = [];
-        this.dropdownClass = index$1.ce({
+        this.dropdownClass = tv.tv({
             base: 'dropdown flex flex-col items-center min-w-10 shadow-3 max-w-64 max-h-64 w-full bg-color-basic-panel rounded-lg py-1.5 overflow-y-auto',
         });
         this.handleSlotChange = () => {
@@ -557,7 +555,7 @@ const Dropdown = class {
         });
     }
     render() {
-        return (index.h(index.Host, { key: '7c13b65d8c966a4a2de522aa9d765cb7933bcd81' }, index.h("bcm-button", { key: '7511bf043370dd8360c458800c1518205c35ac3c', kind: "outline" }, index.h("span", { key: '1a67377235ffe4b5989adab0b185585e9e4d1080', part: "text" }, this.text)), this.isReady && (index.h("bcm-linked", { key: '78a528e16b5c76409a9546e7f2523b9535d47276', targetElement: this.buttonRef }, index.h("div", { key: 'afec0593ed669692ab2e97e58a2e918689fc9175', part: "dropdown-container", class: this.dropdownClass() }, index.h("slot", { key: '4f94568837c8c32619aa6c586b35c8d8bb60a74c', onSlotchange: this.handleSlotChange }))))));
+        return (index.h(index.Host, { key: '6aaff12c84d38c32df5bc8dccb83421afb315eef' }, index.h("bcm-button", { key: '5612cef7303a6b839531e125c895a4e7b8d32282', kind: "outline" }, index.h("span", { key: '951418845cb1ec71fe6dc5bbbc33c49934447640', part: "text" }, this.text)), this.isReady && (index.h("bcm-linked", { key: 'd594359d6a9b7c673307c6a92e6d69cc47be3e1a', targetElement: this.buttonRef }, index.h("div", { key: '9badba5b1e99af6a5d58b02e849cb0923e49dfd8', part: "dropdown-container", class: this.dropdownClass() }, index.h("slot", { key: 'c8191f215600170475d514bb6b4056047e6442d2', onSlotchange: this.handleSlotChange }))))));
     }
     get host() { return index.getElement(this); }
 };
@@ -573,7 +571,7 @@ const DropdownItem = class {
         this.selected = false;
         this.error = false;
         this.disabled = false;
-        this.dropdownItemClass = index$1.ce({
+        this.dropdownItemClass = tv.tv({
             base: 'dropdown-item bcm-ui-element bcm-ui-content-display flex flex-row gap-2 py-2 px-4 cursor-pointer text-color',
             variants: {
                 selected: {
@@ -607,10 +605,10 @@ const DropdownItem = class {
     }
     render() {
         var _a;
-        return (index.h("div", { key: '3c989e05b18e183481b760f24d3d37bae4a68eea', "aria-checked": this.selected, class: this.dropdownItemClass({
+        return (index.h("div", { key: '69beaac4c9225bc7803b4002f1543c18e76e36cc', "aria-checked": this.selected, class: this.dropdownItemClass({
                 selected: this.selected,
                 error: this.error,
-            }), onClick: () => this.handleClick() }, index.h("slot", { key: '9edf937944435ae070541bd5952fbbda1ffe5d9d', name: "left-content" }, this.icon && index.h("bcm-icon", { key: '1b452c2a57af6d3a7c85bd9e48107f24224eae4b', "icon-name": this.icon })), index.h("div", { key: 'd4114f8e306accdc373e753d02870ad21e65c8b1', class: "flex flex-row text-pretty w-full" }, index.h("slot", { key: '0f1a8d78b7c91f117d5389d8bdf1efb894168df4' }, this.text)), index.h("slot", { key: 'e428dadc7ca757302c47431a3dda05895387a9f5', name: "right-content" }, (_a = this.rightIcons) === null || _a === void 0 ? void 0 : _a.map(icon => (index.h("bcm-icon", { "icon-name": icon }))))));
+            }), onClick: () => this.handleClick() }, index.h("slot", { key: 'ca2712023285689a1774b5869d982e87d3add46a', name: "left-content" }, this.icon && index.h("bcm-icon", { key: 'bef7483a47c823ed746c39ae37acc3a2360f0c59', "icon-name": this.icon })), index.h("div", { key: 'a9bdddf97d4a4e07e601599a4adb11354227dd0f', class: "flex flex-row text-pretty w-full" }, index.h("slot", { key: '51c488350d2daabc32fc9693211a4e89d8cce16f' }, this.text)), index.h("slot", { key: '9bf3f8b4affa41ea72f181a073aea8cd56f8a2df', name: "right-content" }, (_a = this.rightIcons) === null || _a === void 0 ? void 0 : _a.map(icon => (index.h("bcm-icon", { "icon-name": icon }))))));
     }
     get host() { return index.getElement(this); }
 };
@@ -693,7 +691,7 @@ const BcmInput = class {
         this.onKeyUp = (event) => {
             this.bcmKeyUp.emit(event);
         };
-        this.styleClass = index$1.ce({
+        this.styleClass = tv.tv({
             slots: {
                 base: [
                     'bcm-input bcm-input__container',
@@ -891,14 +889,14 @@ const BcmInput = class {
             disabled: this.disabled,
             focused: this.isFocused,
         });
-        return (index.h("div", { key: '77a0be85ac2a3749e95bedafc01134a5a6a9f655', class: "bcm-ui-element" }, this.label && (index.h("label", { key: 'a202e383e92085bed836777a5484f306d73638dd', class: index$2.classNames('input-label font-medium', {
+        return (index.h("div", { key: '2b470d6a8d48e3867345a1baaf038f464167bd8c', class: "bcm-ui-element" }, this.label && (index.h("label", { key: '65aa7f333c4cc7deb68dec12ac25fd953d03e5a9', class: index$1.classNames('input-label font-medium', {
                 'text-color-label': !this.disabled,
                 'text-color-disabled': this.disabled,
             }, {
                 'text-size-3': this.size === 'small',
                 'text-size-4': this.size === 'medium',
                 'text-size-5': this.size === 'large',
-            }), htmlFor: inputId }, index.h("slot", { key: '204121e272f4a168db119322aaba8c4ed2e5c125', name: "label" }, this.label), this.required && index.h("span", { key: 'eb658a88419adb4003525dc711676628b832a3c4' }, "*"))), index.h("div", { key: '584edbfd2e49a4e37e45781d7844ce8b850532ff', class: base() }, (this.hasSlotContent('prefix') || this.prefixIcon || this.getDefaultIconForType()) && (index.h("div", { key: '0cbc9f42756c643cc5277fe1e7a7636a4fd490be', class: "flex items-center gap-2 px-2" }, (this.prefixIcon || this.getDefaultIconForType()) && (index.h("bcm-icon", { key: 'a6c0dd258d7c28f2c8d5876fc703fa230ee3ce1a', class: "prefix-icon", "icon-name": this.prefixIcon || this.getDefaultIconForType(), size: this.iconSize })), index.h("slot", { key: '9f8ff60b443210f0f3fd68e43ac73248bd3c4b35', name: "prefix" }))), index.h("input", { key: 'd811a67abb5727f2f2d3051d5dded8d5d78564ec', ref: el => (this.inputRef = el), id: inputId, class: inputClass(), type: this.type, name: this.name, disabled: this.disabled, readonly: this.readonly, required: this.required, placeholder: this.placeholder, autocomplete: this.autocomplete, minlength: this.minLength, maxlength: this.maxLength, min: this.min, max: this.max, step: this.step, pattern: this.pattern, "aria-invalid": this.status === 'error', "aria-required": this.required, "aria-labelledby": this.labelledby, "aria-describedby": this.describedby, value: this.value, onInput: this.onInput, onChange: this.onChange, onFocus: this.onFocus, onBlur: this.onBlur, onKeyDown: this.onKeyDown, onKeyUp: this.onKeyUp }), (this.hasSlotContent('suffix') || this.suffixIcon) && (index.h("div", { key: 'c10515b9f3a9fb8d87e8c0f0abd383220ba5554c', class: "flex items-center gap-2 px-2" }, index.h("slot", { key: '5902fa399e7fad8a82e1deaf6bc45f9a5ba8b94a', name: "suffix" }), this.suffixIcon && index.h("bcm-icon", { key: '46721b1a002b2b0a04686e2e8968b2c0b51c1061', class: "suffix-icon", "icon-name": this.suffixIcon, size: this.iconSize }))), this.PasswordToggleButton()), (this.captionText || this.internalErrorMessage || this.validationMessage) && (index.h("div", { key: '46f3360446fe8c40aab58d1d4047c4f1bb010fff', class: index$2.classNames('input-caption-text font-regular mt-1', {
+            }), htmlFor: inputId }, index.h("slot", { key: '5507aaf837e03b059b5ee37270406519e3460d84', name: "label" }, this.label), this.required && index.h("span", { key: 'ae92e270cf66574dd511403df99ce6f0172f7cf0' }, "*"))), index.h("div", { key: 'c562649dbb4085830f2229af20b450de50af18ab', class: base() }, (this.hasSlotContent('prefix') || this.prefixIcon || this.getDefaultIconForType()) && (index.h("div", { key: '8e53088d990111325fad2c78c99818761e729e80', class: "flex items-center gap-2 px-2" }, (this.prefixIcon || this.getDefaultIconForType()) && (index.h("bcm-icon", { key: '0dd292f047e02ce75051b8a271ffcedb35036631', class: "prefix-icon", "icon-name": this.prefixIcon || this.getDefaultIconForType(), size: this.iconSize })), index.h("slot", { key: '6dd835e17b66f29681232748a9cc8fd04ef8365e', name: "prefix" }))), index.h("input", { key: '965fa5a5d2188a8608ae997973c792708fd986bf', ref: el => (this.inputRef = el), id: inputId, class: inputClass(), type: this.type, name: this.name, disabled: this.disabled, readonly: this.readonly, required: this.required, placeholder: this.placeholder, autocomplete: this.autocomplete, minlength: this.minLength, maxlength: this.maxLength, min: this.min, max: this.max, step: this.step, pattern: this.pattern, "aria-invalid": this.status === 'error', "aria-required": this.required, "aria-labelledby": this.labelledby, "aria-describedby": this.describedby, value: this.value, onInput: this.onInput, onChange: this.onChange, onFocus: this.onFocus, onBlur: this.onBlur, onKeyDown: this.onKeyDown, onKeyUp: this.onKeyUp }), (this.hasSlotContent('suffix') || this.suffixIcon) && (index.h("div", { key: 'f0f78deaa350963ff31b07c2076a405bb4560fc5', class: "flex items-center gap-2 px-2" }, index.h("slot", { key: '6b6afb6088fa96b9c1daa97641e70bd9d1a8f044', name: "suffix" }), this.suffixIcon && index.h("bcm-icon", { key: '9f33e74c6629341ba5cc447af1b4ba9237997138', class: "suffix-icon", "icon-name": this.suffixIcon, size: this.iconSize }))), this.PasswordToggleButton()), (this.captionText || this.internalErrorMessage || this.validationMessage) && (index.h("div", { key: '416b4a6c586ebd6e722a68181ca4dc1125fc5e7d', class: index$1.classNames('input-caption-text font-regular mt-1', {
                 'text-[--bcm-ui-color-text-caption]': !this.disabled && this.internalStatus === 'default',
                 'text-[--bcm-ui-color-text-error]': !this.disabled && (this.internalStatus === 'error' || !this.isValid),
                 'text-[--bcm-ui-color-text-success]': !this.disabled && this.internalStatus === 'success',
@@ -1288,7 +1286,7 @@ const BcmShortcut = class {
     }
     render() {
         const { size, hotkey } = this;
-        return (index.h("div", { key: '007588d1d20941ead644a3d1fd72410cb6793ff5', class: index$2.classNames('bcm-ui-element bcm-ui-content-display', 'block h-fit w-fit rounded border border-solid px-1', 'border-color-default bg-color-default text-color-default', 'text-center font-medium capitalize', {
+        return (index.h("div", { key: '007588d1d20941ead644a3d1fd72410cb6793ff5', class: index$1.classNames('bcm-ui-element bcm-ui-content-display', 'block h-fit w-fit rounded border border-solid px-1', 'border-color-default bg-color-default text-color-default', 'text-center font-medium capitalize', {
                 'text-size-2': size === 'small',
                 'text-size-3': size === 'medium',
                 'text-size-4': size === 'large',
@@ -1408,7 +1406,7 @@ const BcmText = class {
         const Tag = variantTagMap[this.variant];
         const variantClass = this.getTextClass(this.variant, this.size);
         const overflowClass = this.getOverflowClass((_a = this.overflow) !== null && _a !== void 0 ? _a : false);
-        return (index.h(Tag, { key: '152d737752eea962ac3c5086011da69578ef0920', class: index$2.classNames('bcm-text appearance-none m-0 p-0', variantClass, overflowClass), part: "text" }, index.h("slot", { key: 'e8c8c89a5925936a2e22a75265b7f42317eab983' }, this.text)));
+        return (index.h(Tag, { key: '152d737752eea962ac3c5086011da69578ef0920', class: index$1.classNames('bcm-text appearance-none m-0 p-0', variantClass, overflowClass), part: "text" }, index.h("slot", { key: 'e8c8c89a5925936a2e22a75265b7f42317eab983' }, this.text)));
     }
 };
 BcmText.style = BcmTextStyle0;