bromcom-ui-next 0.1.5 → 0.1.6

package/dist/collection/components/radio-group/radio-group.component.js

@@ -0,0 +1,523 @@
+/**
+ * @component BcmRadioGroup
+ * @description A radio group component that manages a collection of `bcm-radio` components, ensuring only one radio button is selected at a time.
+ * Supports horizontal or vertical layouts, various sizes, and states such as disabled, required, and error.
+ *
+ * @example
+ * <bcm-radio-group name="group1" size="medium" direction="vertical" label="Select an option">
+ *   <bcm-radio label="Option 1" value="1"></bcm-radio>
+ *   <bcm-radio label="Option 2" value="2"></bcm-radio>
+ * </bcm-radio-group>
+ *
+ * @example Radio group with error state and caption
+ * <bcm-radio-group name="group1" error={true} caption-text="Please select an option">
+ *   <bcm-radio label="Option 1" value="1"></bcm-radio>
+ *   <bcm-radio label="Option 2" value="2"></bcm-radio>
+ * </bcm-radio-group>
+ *
+ * @prop {string} name - The name attribute for the radio group, used to group radio buttons.
+ * @defaultValue undefined
+ * @prop {string} value - The currently selected value of the radio group.
+ * @defaultValue undefined
+ * @prop {boolean} disabled - Whether the radio group and its radio buttons are disabled.
+ * @defaultValue false
+ * @prop {boolean} required - Whether the radio group is required in a form.
+ * @defaultValue false
+ * @prop {boolean} error - Whether the radio group is in an error state.
+ * @defaultValue false
+ * @prop {string} label - The label text to display above the radio group.
+ * @defaultValue undefined
+ * @prop {RadioSize} size - Defines the size of the radio group and its radio buttons: 'small' | 'medium' | 'large'.
+ * @defaultValue 'medium'
+ * @prop {Direction} direction - The layout direction of the radio buttons: 'horizontal' | 'vertical'.
+ * @defaultValue 'vertical'
+ * @prop {string} captionText - Optional caption text to display below the radio group, often used for error messages or hints.
+ * @defaultValue undefined
+ *
+ * @event {EventEmitter<HTMLBcmRadioElement>} bcmRadioGroupChange - Emitted when the selected radio button changes, passing the selected radio element.
+ *
+ * @method setClear - Clears the selected value and unchecks all radio buttons.
+ * @method resetCaption - Resets the error state and caption.
+ *
+ * @csspart host - The root element of the radio group.
+ * @csspart container - The container for the radio buttons.
+ * @csspart label - The label element above the radio group.
+ * @csspart caption - The caption text below the radio group.
+ */
+import { h } from "@stencil/core";
+import { tv } from "tailwind-variants";
+import { generateId } from "../../utils/id/generate-id";
+import classNames from "classnames";
+export class BcmRadioGroup {
+    constructor() {
+        /**
+         * Whether the radio group and its radio buttons are disabled.
+         * @prop
+         * @defaultValue false
+         */
+        this.disabled = false;
+        /**
+         * Whether the radio group is required in a form.
+         * @prop
+         * @defaultValue false
+         */
+        this.required = false;
+        /**
+         * Whether the radio group is in an error state.
+         * @prop
+         * @defaultValue false
+         */
+        this.error = false;
+        /**
+         * Defines the size of the radio group and its radio buttons: 'small' | 'medium' | 'large'.
+         * @prop
+         * @defaultValue 'medium'
+         */
+        this.size = 'medium';
+        /**
+         * The layout direction of the radio buttons: 'horizontal' | 'vertical'.
+         * @prop
+         * @defaultValue 'vertical'
+         */
+        this.direction = 'vertical';
+        this.radioGroupName = generateId('radio-group-name');
+        this.handleSlotChange = () => {
+            this.radios.forEach(radio => {
+                var _a;
+                radio.size = this.size;
+                radio.name = (_a = this.name) !== null && _a !== void 0 ? _a : this.radioGroupName;
+                radio.disabled = this.disabled;
+                radio.error = this.error;
+            });
+        };
+        this.radioGroupClass = tv({
+            slots: {
+                host: ['bcm-ui-element bcm-radio-group flex flex-col'],
+                container: ['flex'],
+            },
+            variants: {
+                size: {
+                    small: {
+                        host: 'gap-1.5',
+                        container: 'gap-1.5',
+                    },
+                    medium: {
+                        host: 'gap-2',
+                        container: 'gap-2',
+                    },
+                    large: {
+                        host: 'gap-2.5',
+                        container: 'gap-2.5',
+                    },
+                },
+                direction: {
+                    horizontal: {
+                        container: ['flex-row flex-wrap'],
+                    },
+                    vertical: {
+                        container: ['flex-col'],
+                    },
+                },
+            },
+            defaultVariants: {
+                size: 'medium',
+                direction: 'vertical',
+            },
+        });
+    }
+    get radios() {
+        return this.host.querySelectorAll('bcm-radio');
+    }
+    componentWillLoad() {
+        if (this.value) {
+            this.updateRadios(this.value);
+        }
+    }
+    /**
+     * Clears the selected value (sets it to an empty string) and unchecks all radio buttons.
+     * @method
+     */
+    async setClear() {
+        var _a;
+        this.value = "";
+        (_a = this.radios) === null || _a === void 0 ? void 0 : _a.forEach(radio => {
+            radio.checked = false;
+        });
+    }
+    /**
+     * Resets the error state and caption.
+     * @method
+     */
+    async resetCaption() {
+        this.error = false;
+        this.captionText = undefined;
+    }
+    handleValueChange(newValue) {
+        this.updateRadios(newValue);
+    }
+    handleRadioChange(event) {
+        const radio = event.target;
+        const radios = this.host.querySelectorAll('bcm-radio');
+        radios.forEach(r => {
+            if (r !== radio) {
+                r.checked = false;
+            }
+        });
+        this.bcmRadioGroupChange.emit({
+            value: radio.value,
+            element: radio,
+        });
+    }
+    updateRadios(value) {
+        this.radios.forEach(radio => {
+            radio.checked = radio.value === value;
+        });
+    }
+    render() {
+        const { host, container } = this.radioGroupClass({
+            size: this.size,
+            direction: this.direction,
+        });
+        return (h("div", { key: '067e086951f511d9a15f0cf7dbaef97744615356', class: host() }, this.label && (h("label", { key: '912ab77a4b270dfd25bbc362932b6914af1cac6c', class: 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',
+            }) }, h("slot", { key: '93b8053888f906617b84a94a84fad525cbb5ea34', name: "label" }, this.label), this.required && h("span", { key: '654320a556ff7e0aa49c929af349c57ec9a8a59a' }, "*"))), h("div", { key: '722366cd4a7f7cebddf8151fcc935025bf12b5d6', class: container() }, h("slot", { key: '420447424d1e450911355ab4cd6b2ee51c1b2839', onSlotchange: this.handleSlotChange })), this.captionText && (h("div", { key: '38dcc2233985bdcaaefe62b072ef9b55d1e1908d', class: classNames('input-caption-text font-regular mt-1', {
+                'text-[--bcm-ui-color-text-caption]': !this.disabled,
+                'text-[--bcm-ui-color-text-error]': !this.disabled && this.error,
+                'text-[--bcm-ui-color-text-disabled]': this.disabled,
+            }, {
+                'text-size-3': this.size === 'small',
+                'text-size-4': this.size === 'medium',
+                'text-size-5': this.size === 'large',
+            }) }, this.captionText))));
+    }
+    static get is() { return "bcm-radio-group"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["radio-group.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["radio-group.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "prop",
+                            "text": undefined
+                        }, {
+                            "name": "defaultValue",
+                            "text": "undefined"
+                        }],
+                    "text": "The name attribute for the radio group, used to group radio buttons."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "name",
+                "reflect": false
+            },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "prop",
+                            "text": undefined
+                        }, {
+                            "name": "defaultValue",
+                            "text": "undefined"
+                        }],
+                    "text": "The currently selected value of the radio group."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "value",
+                "reflect": false
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "prop",
+                            "text": undefined
+                        }, {
+                            "name": "defaultValue",
+                            "text": "false"
+                        }],
+                    "text": "Whether the radio group and its radio buttons are disabled."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "prop",
+                            "text": undefined
+                        }, {
+                            "name": "defaultValue",
+                            "text": "false"
+                        }],
+                    "text": "Whether the radio group is required in a form."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "required",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "error": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "prop",
+                            "text": undefined
+                        }, {
+                            "name": "defaultValue",
+                            "text": "false"
+                        }],
+                    "text": "Whether the radio group is in an error state."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "error",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "prop",
+                            "text": undefined
+                        }, {
+                            "name": "defaultValue",
+                            "text": "undefined"
+                        }],
+                    "text": "The label text to display above the radio group."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "label",
+                "reflect": false
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'small' | 'medium' | 'large'",
+                    "resolved": "\"large\" | \"medium\" | \"small\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "prop",
+                            "text": undefined
+                        }, {
+                            "name": "defaultValue",
+                            "text": "'medium'"
+                        }],
+                    "text": "Defines the size of the radio group and its radio buttons: 'small' | 'medium' | 'large'."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "size",
+                "reflect": false,
+                "defaultValue": "'medium'"
+            },
+            "direction": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'horizontal' | 'vertical'",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "prop",
+                            "text": undefined
+                        }, {
+                            "name": "defaultValue",
+                            "text": "'vertical'"
+                        }],
+                    "text": "The layout direction of the radio buttons: 'horizontal' | 'vertical'."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "direction",
+                "reflect": false,
+                "defaultValue": "'vertical'"
+            },
+            "captionText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "prop",
+                            "text": undefined
+                        }, {
+                            "name": "defaultValue",
+                            "text": "undefined"
+                        }],
+                    "text": "Optional caption text to display below the radio group, often used for error messages or hints."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "caption-text",
+                "reflect": false
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "bcmRadioGroupChange",
+                "name": "bcmRadioGroupChange",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "setClear": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Clears the selected value (sets it to an empty string) and unchecks all radio buttons.",
+                    "tags": [{
+                            "name": "method",
+                            "text": undefined
+                        }]
+                }
+            },
+            "resetCaption": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Resets the error state and caption.",
+                    "tags": [{
+                            "name": "method",
+                            "text": undefined
+                        }]
+                }
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "handleValueChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "bcmRadioChange",
+                "method": "handleRadioChange",
+                "target": undefined,
+                "capture": true,
+                "passive": false
+            }];
+    }
+}
+//# sourceMappingURL=radio-group.component.js.map

package/dist/collection/components/radio-group/radio-group.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-group.component.js","sourceRoot":"","sources":["../../../src/components/radio-group/radio-group.component.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\n * @component BcmRadioGroup\n * @description A radio group component that manages a collection of `bcm-radio` components, ensuring only one radio button is selected at a time.\n * Supports horizontal or vertical layouts, various sizes, and states such as disabled, required, and error.\n *\n * @example\n * <bcm-radio-group name=\"group1\" size=\"medium\" direction=\"vertical\" label=\"Select an option\">\n *   <bcm-radio label=\"Option 1\" value=\"1\"></bcm-radio>\n *   <bcm-radio label=\"Option 2\" value=\"2\"></bcm-radio>\n * </bcm-radio-group>\n *\n * @example Radio group with error state and caption\n * <bcm-radio-group name=\"group1\" error={true} caption-text=\"Please select an option\">\n *   <bcm-radio label=\"Option 1\" value=\"1\"></bcm-radio>\n *   <bcm-radio label=\"Option 2\" value=\"2\"></bcm-radio>\n * </bcm-radio-group>\n *\n * @prop {string} name - The name attribute for the radio group, used to group radio buttons.\n * @defaultValue undefined\n * @prop {string} value - The currently selected value of the radio group.\n * @defaultValue undefined\n * @prop {boolean} disabled - Whether the radio group and its radio buttons are disabled.\n * @defaultValue false\n * @prop {boolean} required - Whether the radio group is required in a form.\n * @defaultValue false\n * @prop {boolean} error - Whether the radio group is in an error state.\n * @defaultValue false\n * @prop {string} label - The label text to display above the radio group.\n * @defaultValue undefined\n * @prop {RadioSize} size - Defines the size of the radio group and its radio buttons: 'small' | 'medium' | 'large'.\n * @defaultValue 'medium'\n * @prop {Direction} direction - The layout direction of the radio buttons: 'horizontal' | 'vertical'.\n * @defaultValue 'vertical'\n * @prop {string} captionText - Optional caption text to display below the radio group, often used for error messages or hints.\n * @defaultValue undefined\n *\n * @event {EventEmitter<HTMLBcmRadioElement>} bcmRadioGroupChange - Emitted when the selected radio button changes, passing the selected radio element.\n *\n * @method setClear - Clears the selected value and unchecks all radio buttons.\n * @method resetCaption - Resets the error state and caption.\n *\n * @csspart host - The root element of the radio group.\n * @csspart container - The container for the radio buttons.\n * @csspart label - The label element above the radio group.\n * @csspart caption - The caption text below the radio group.\n */\n\nimport { Component, ComponentInterface, Prop, h, Element, Listen, Event, EventEmitter, Method, Watch } from '@stencil/core';\nimport { tv } from 'tailwind-variants';\nimport { generateId } from '../../utils/id/generate-id';\nimport classNames from 'classnames';\n\n@Component({\n    tag: 'bcm-radio-group',\n    styleUrl: 'radio-group.css',\n    shadow: true,\n})\nexport class BcmRadioGroup implements ComponentInterface {\n    @Element() host: HTMLBcmRadioGroupElement;\n\n    /**\n     * The name attribute for the radio group, used to group radio buttons.\n     * @prop\n     * @defaultValue undefined\n     */\n    @Prop()\n    name: string;\n\n    /**\n     * The currently selected value of the radio group.\n     * @prop\n     * @defaultValue undefined\n     */\n    @Prop()\n    value: string;\n\n    /**\n     * Whether the radio group and its radio buttons are disabled.\n     * @prop\n     * @defaultValue false\n     */\n    @Prop()\n    disabled: boolean = false;\n\n    /**\n     * Whether the radio group is required in a form.\n     * @prop\n     * @defaultValue false\n     */\n    @Prop()\n    required: boolean = false;\n\n    /**\n     * Whether the radio group is in an error state.\n     * @prop\n     * @defaultValue false\n     */\n    @Prop()\n    error: boolean = false;\n\n    /**\n     * The label text to display above the radio group.\n     * @prop\n     * @defaultValue undefined\n     */\n    @Prop()\n    label: string;\n\n    /**\n     * Defines the size of the radio group and its radio buttons: 'small' | 'medium' | 'large'.\n     * @prop\n     * @defaultValue 'medium'\n     */\n    @Prop()\n    size: 'small' | 'medium' | 'large' = 'medium';\n\n    /**\n     * The layout direction of the radio buttons: 'horizontal' | 'vertical'.\n     * @prop\n     * @defaultValue 'vertical'\n     */\n    @Prop()\n    direction: 'horizontal' | 'vertical' = 'vertical';\n\n    /**\n     * Optional caption text to display below the radio group, often used for error messages or hints.\n     * @prop\n     * @defaultValue undefined\n     */\n    @Prop()\n    captionText?: string;\n\n    @Event({\n        composed: false,\n        bubbles: false,\n        cancelable: true,\n        eventName: 'bcmRadioGroupChange',\n    })\n    bcmRadioGroupChange: EventEmitter<any>;\n\n    private readonly radioGroupName = generateId('radio-group-name');\n\n    get radios() {\n        return this.host.querySelectorAll('bcm-radio');\n    }\n\n    componentWillLoad() {\n        if (this.value) {\n            this.updateRadios(this.value);\n        }\n    }\n\n    /**\n     * Clears the selected value (sets it to an empty string) and unchecks all radio buttons.\n     * @method\n     */\n    @Method()\n    async setClear() {\n        this.value = \"\";\n        this.radios?.forEach(radio => {\n            radio.checked = false;\n        });\n    }\n\n    /**\n     * Resets the error state and caption.\n     * @method\n     */\n    @Method()\n    async resetCaption() {\n        this.error = false;\n        this.captionText = undefined;\n    }\n\n    private handleSlotChange = () => {\n        this.radios.forEach(radio => {\n            radio.size = this.size;\n            radio.name = this.name ?? this.radioGroupName;\n            radio.disabled = this.disabled;\n            radio.error = this.error;\n        });\n    };\n\n    @Watch('value')\n    handleValueChange(newValue: string) {\n        this.updateRadios(newValue);\n    }\n\n    @Listen('bcmRadioChange', { capture: true })\n    handleRadioChange(event: CustomEvent) {\n        const radio = event.target as HTMLBcmRadioElement;\n        const radios = this.host.querySelectorAll('bcm-radio');\n        radios.forEach(r => {\n            if (r !== radio) {\n                r.checked = false;\n            }\n        });\n        this.bcmRadioGroupChange.emit({\n            value: radio.value,\n            element: radio,\n        });\n    }\n\n    private updateRadios(value: string) {\n        this.radios.forEach(radio => {\n            radio.checked = radio.value === value;\n        });\n    }\n\n    private radioGroupClass = tv({\n        slots: {\n            host: ['bcm-ui-element bcm-radio-group flex flex-col'],\n            container: ['flex'],\n        },\n        variants: {\n            size: {\n                small: {\n                    host: 'gap-1.5',\n                    container: 'gap-1.5',\n                },\n                medium: {\n                    host: 'gap-2',\n                    container: 'gap-2',\n                },\n                large: {\n                    host: 'gap-2.5',\n                    container: 'gap-2.5',\n                },\n            },\n            direction: {\n                horizontal: {\n                    container: ['flex-row flex-wrap'],\n                },\n                vertical: {\n                    container: ['flex-col'],\n                },\n            },\n        },\n        defaultVariants: {\n            size: 'medium',\n            direction: 'vertical',\n        },\n    });\n\n    render() {\n        const { host, container } = this.radioGroupClass({\n            size: this.size,\n            direction: this.direction,\n        });\n        return (\n            <div class={host()}>\n                {this.label && (\n                    <label\n                        class={classNames(\n                            'input-label font-medium',\n                            {\n                                'text-color-label': !this.disabled,\n                                'text-color-disabled': this.disabled,\n                            },\n                            {\n                                'text-size-3': this.size === 'small',\n                                'text-size-4': this.size === 'medium',\n                                'text-size-5': this.size === 'large',\n                            },\n                        )}\n                    >\n                        <slot name=\"label\">{this.label}</slot>\n                        {this.required && <span>*</span>}\n                    </label>\n                )}\n                <div class={container()}>\n                    <slot onSlotchange={this.handleSlotChange}></slot>\n                </div>\n\n                {this.captionText && (\n                    <div\n                        class={classNames(\n                            'input-caption-text font-regular mt-1',\n                            {\n                                'text-[--bcm-ui-color-text-caption]': !this.disabled,\n                                'text-[--bcm-ui-color-text-error]': !this.disabled && this.error,\n                                'text-[--bcm-ui-color-text-disabled]': this.disabled,\n                            },\n                            {\n                                'text-size-3': this.size === 'small',\n                                'text-size-4': this.size === 'medium',\n                                'text-size-5': this.size === 'large',\n                            },\n                        )}\n                    >\n                        {this.captionText}\n                    </div>\n                )}\n            </div>\n        );\n    }\n}\n"]}

package/dist/collection/components/radio-group/radio-group.css

@@ -0,0 +1 @@
+.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.static{position:static}.mt-1{margin-top:.25rem}.flex{display:flex}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.gap-1\.5{gap:.375rem}.gap-2{gap:.5rem}.gap-2\.5{gap:.625rem}.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}.text-\[--bcm-ui-color-text-caption\]{color:var(--bcm-ui-color-text-caption)}.text-\[--bcm-ui-color-text-disabled\]{color:var(--bcm-ui-color-text-disabled)}.text-\[--bcm-ui-color-text-error\]{color:var(--bcm-ui-color-text-error)}.text-color-disabled{color:var(--bcm-ui-color-text-disabled)}.text-color-label{color:var(--bcm-ui-color-text-label)}.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)}