@dropi/ui 0.1.18 → 0.1.19

package/dist/collection/components/dropi-lottie-loader/dropi-lottie-loader.js

@@ -0,0 +1,116 @@
+import { h } from "@stencil/core";
+/**
+ * @component dropi-lottie-loader
+ * Full-screen or inline loading overlay with a Lottie animation.
+ */
+export class DropiLottieLoader {
+    /** Show or hide the loader */
+    visible = false;
+    /** Path to the Lottie JSON animation file */
+    loadingAnimation = '';
+    /** Title shown below the animation */
+    loaderTitle = '';
+    /** Descriptive message below the title */
+    message = '';
+    render() {
+        if (!this.visible)
+            return null;
+        return (h("div", { class: "loader-overlay" }, h("div", { class: "loader-container" }, this.loadingAnimation && (h("div", { class: "lottie-animation", innerHTML: `<lottie-player src="${this.loadingAnimation}" background="transparent" speed="1" style="width:200px;height:200px" loop autoplay></lottie-player>` })), (this.loaderTitle || this.message) && (h("div", { class: "loader-text" }, this.loaderTitle && h("h3", { class: "loader-title" }, this.loaderTitle), this.message && h("p", { class: "loader-message" }, this.message))))));
+    }
+    static get is() { return "dropi-lottie-loader"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["dropi-lottie-loader.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["dropi-lottie-loader.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "visible": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show or hide the loader"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "visible",
+                "defaultValue": "false"
+            },
+            "loadingAnimation": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Path to the Lottie JSON animation file"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "loading-animation",
+                "defaultValue": "''"
+            },
+            "loaderTitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Title shown below the animation"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "loader-title",
+                "defaultValue": "''"
+            },
+            "message": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Descriptive message below the title"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "message",
+                "defaultValue": "''"
+            }
+        };
+    }
+}

package/dist/collection/components/dropi-otp-send-code/dropi-otp-send-code.css

@@ -0,0 +1,60 @@
+:host { display: block; width: 100%; }
+*, *::before, *::after { box-sizing: border-box; }
+
+.otp { display: flex; flex-direction: column; align-items: center; gap: var(--Size-4, 16px); }
+
+.otp__label {
+  font-size: var(--font-size-s, 12px);
+  color: var(--Gray-Gray-600, #475066);
+  text-align: center;
+  margin: 0;
+}
+
+.otp__inputs {
+  display: flex;
+  gap: var(--Size-2, 8px);
+}
+
+.otp__digit {
+  width: 48px;
+  height: 56px;
+  border: 2px solid var(--Gray-Gray-200, #c3c9d9);
+  border-radius: var(--Border-2, 8px);
+  text-align: center;
+  font-size: var(--font-size-xl, 20px);
+  font-weight: var(--font-weight-bold, 700);
+  font-family: inherit;
+  color: var(--Gray-Gray-800, #1a2033);
+  outline: none;
+  transition: border-color 0.15s;
+  background: var(--Neutral-White, #fff);
+}
+
+.otp__digit:focus { border-color: var(--Info-Info-500, #50a5f1); }
+.otp__digit--filled { border-color: var(--Success-Success-500, #34c55a); color: var(--Success-Success-500, #34c55a); }
+.otp__digit--error { border-color: var(--Error-Error-500, #f46a6b); }
+
+.otp__error {
+  margin: 0;
+  font-size: var(--font-size-xs, 10px);
+  color: var(--Error-Error-500, #f46a6b);
+  text-align: center;
+}
+
+.otp__resend { text-align: center; }
+
+.otp__countdown {
+  font-size: var(--font-size-xs, 10px);
+  color: var(--Gray-Gray-400, #858ea6);
+}
+
+.otp__resend-btn {
+  background: none;
+  border: none;
+  padding: 0;
+  font-size: var(--font-size-s, 12px);
+  font-weight: var(--font-weight-bold, 700);
+  color: var(--Primary-Primary-500, #f49a3d);
+  cursor: pointer;
+  text-decoration: underline;
+}

package/dist/collection/components/dropi-otp-send-code/dropi-otp-send-code.js

@@ -0,0 +1,221 @@
+import { h } from "@stencil/core";
+const OTP_LENGTH = 6;
+const RESEND_SECONDS = 30;
+/**
+ * @component dropi-otp-send-code
+ * 6-digit OTP input with countdown timer and resend capability.
+ */
+export class DropiOtpSendCode {
+    /** Delivery method label */
+    engine = 'email';
+    /** Contact info (email/phone to show in label) */
+    labelContact = '';
+    /** Show contact label */
+    showLabelContact = true;
+    /** Error message to display */
+    errorMessage = '';
+    digits = Array(OTP_LENGTH).fill('');
+    digitStates = Array(OTP_LENGTH).fill('idle');
+    countdown = RESEND_SECONDS;
+    canResend = false;
+    error = false;
+    inputs = [];
+    timer;
+    /** Emitted when all 6 digits are entered. e.detail = the complete code string */
+    dropiCodeCompleted;
+    /** Emitted when resend is requested */
+    dropiResend;
+    componentDidLoad() { this.startCountdown(); }
+    disconnectedCallback() { clearInterval(this.timer); }
+    startCountdown() {
+        this.countdown = RESEND_SECONDS;
+        this.canResend = false;
+        clearInterval(this.timer);
+        this.timer = setInterval(() => {
+            this.countdown--;
+            if (this.countdown <= 0) {
+                clearInterval(this.timer);
+                this.canResend = true;
+            }
+        }, 1000);
+    }
+    handleInput(e, index) {
+        const val = e.target.value.replace(/\D/g, '').slice(-1);
+        const newDigits = [...this.digits];
+        newDigits[index] = val;
+        this.digits = newDigits;
+        const newStates = [...this.digitStates];
+        newStates[index] = val ? 'filled' : 'idle';
+        this.digitStates = newStates;
+        if (val && index < OTP_LENGTH - 1)
+            this.inputs[index + 1]?.focus();
+        if (newDigits.every(d => d !== '')) {
+            this.dropiCodeCompleted.emit(newDigits.join(''));
+        }
+    }
+    handleKeyDown(e, index) {
+        if (e.key === 'Backspace' && !this.digits[index] && index > 0) {
+            this.inputs[index - 1]?.focus();
+        }
+    }
+    handlePaste(e) {
+        e.preventDefault();
+        const text = e.clipboardData?.getData('text')?.replace(/\D/g, '').slice(0, OTP_LENGTH) || '';
+        const newDigits = Array(OTP_LENGTH).fill('');
+        text.split('').forEach((c, i) => { newDigits[i] = c; });
+        this.digits = newDigits;
+        this.digitStates = newDigits.map(d => d ? 'filled' : 'idle');
+        this.inputs[Math.min(text.length, OTP_LENGTH - 1)]?.focus();
+        if (newDigits.every(d => d !== ''))
+            this.dropiCodeCompleted.emit(newDigits.join(''));
+    }
+    render() {
+        const engineLabel = this.engine === 'sms' ? 'SMS' : this.engine === '2fa' ? 'autenticador' : 'correo';
+        return (h("div", { key: '9c8e1efcdb61bd8f6988826b769240354d42339e', class: "otp" }, this.showLabelContact && (h("p", { key: 'dd8ccef18ed569371c1bba5fc2a39a43b6daf1b9', class: "otp__label" }, "Ingresa el c\u00F3digo enviado a tu ", engineLabel, this.labelContact && h("strong", { key: 'a3fc70430e66b153cf12ed2c0240f2fb00ec4a47' }, " ", this.labelContact))), h("div", { key: '450a3a7923a363c1ebbbbd06ca1cc291eba3281c', class: "otp__inputs", onPaste: (e) => this.handlePaste(e) }, Array.from({ length: OTP_LENGTH }, (_, i) => (h("input", { key: i, ref: (el) => {
+                if (el)
+                    this.inputs[i] = el;
+            }, class: {
+                'otp__digit': true,
+                'otp__digit--filled': this.digitStates[i] === 'filled',
+                'otp__digit--error': this.error,
+            }, type: "text", inputMode: "numeric", maxLength: 1, value: this.digits[i], onInput: (e) => this.handleInput(e, i), onKeyDown: (e) => this.handleKeyDown(e, i) })))), this.error && this.errorMessage && (h("p", { key: '4c6f9131d4a5b197dea318d6309540823b4cdfeb', class: "otp__error" }, this.errorMessage)), h("div", { key: 'a6a32b9ee19bc1b0394d5c14fbc44ddf73536630', class: "otp__resend" }, this.canResend ? (h("button", { class: "otp__resend-btn", onClick: () => { this.startCountdown(); this.dropiResend.emit(); } }, "Reenviar c\u00F3digo")) : (h("span", { class: "otp__countdown" }, "Reenviar en ", this.countdown, "s")))));
+    }
+    static get is() { return "dropi-otp-send-code"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["dropi-otp-send-code.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["dropi-otp-send-code.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "engine": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'email' | 'sms' | '2fa'",
+                    "resolved": "\"2fa\" | \"email\" | \"sms\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Delivery method label"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "engine",
+                "defaultValue": "'email'"
+            },
+            "labelContact": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Contact info (email/phone to show in label)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label-contact",
+                "defaultValue": "''"
+            },
+            "showLabelContact": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show contact label"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-label-contact",
+                "defaultValue": "true"
+            },
+            "errorMessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Error message to display"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "error-message",
+                "defaultValue": "''"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "digits": {},
+            "digitStates": {},
+            "countdown": {},
+            "canResend": {},
+            "error": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dropiCodeCompleted",
+                "name": "dropiCodeCompleted",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when all 6 digits are entered. e.detail = the complete code string"
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "dropiResend",
+                "name": "dropiResend",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when resend is requested"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+}

package/dist/collection/components/dropi-paginator/dropi-paginator.css

@@ -19,12 +19,12 @@
 }
 
 .paginator-btn {
-  min-width: 32px;
+  width: 32px;
   height: 32px;
-  padding: 0 var(--Size-2, 8px);
-  border: 1px solid var(--Gray-Gray-200, #c3c9d9);
-  border-radius: var(--Border-1, 4px);
-  background: var(--Neutral-White, #fff);
+  padding: 0;
+  border: none;
+  border-radius: 50%;
+  background: transparent;
   color: var(--Gray-Gray-600, #475066);
   font-size: var(--font-size-s, 12px);
   font-family: inherit;
@@ -32,12 +32,11 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  transition: background 0.15s ease, border-color 0.15s ease;
+  transition: background 0.15s ease;
 }
 
 .paginator-btn:hover:not(:disabled) {
   background: var(--Gray-Gray-50, #f7f8fa);
-  border-color: var(--Gray-Gray-300, #a3abbf);
 }
 
 .paginator-btn:disabled {
@@ -47,24 +46,28 @@
 
 .paginator-btn--active {
   background: var(--Primary-Primary-500, #f49a3d);
-  border-color: var(--Primary-Primary-500, #f49a3d);
   color: var(--Neutral-White, #fff);
   font-weight: var(--font-weight-bold, 700);
 }
 
 .paginator-btn--active:hover {
   background: var(--Primary-Primary-500, #f49a3d);
-  border-color: var(--Primary-Primary-500, #f49a3d);
 }
 
 .paginator-btn--arrow {
-  border-color: transparent;
-  background: transparent;
+  width: auto;
+  padding: 0 var(--Size-2, 8px);
+  border-radius: var(--Border-1, 4px);
+  gap: 4px;
 }
 
 .paginator-btn--arrow:hover:not(:disabled) {
   background: var(--Gray-Gray-50, #f7f8fa);
-  border-color: var(--Gray-Gray-100, #e6eaf2);
+}
+
+.paginator-label {
+  font-size: var(--font-size-s, 12px);
+  color: inherit;
 }
 
 .paginator-ellipsis {

package/dist/collection/components/dropi-paginator/dropi-paginator.js

@@ -12,6 +12,8 @@ export class DropiPaginator {
     page = 1;
     /** Max page buttons to show at once */
     maxPages = 5;
+    /** Hide "Anterior"/"Siguiente" text labels, show only arrows */
+    noLabels = false;
     /** Whether to show the items-per-page selector */
     showPageSizeSelector = false;
     /** Options for items per page */
@@ -69,9 +71,9 @@ export class DropiPaginator {
         const pages = this.pageNumbers;
         const isFirst = this.page <= 1;
         const isLast = this.page >= this.totalPages;
-        return (h("div", { key: '3fbb545d6ff0b345da7698e51bfdee51a13de49e', class: "paginator" }, this.showPageSizeSelector && (h("div", { key: '7ae643988a60f2016dce24b53bb9f5ac13414cf0', class: "paginator-size" }, h("span", { key: 'fee6db32b0d13e6c455174f1c57fb35401e65c10', class: "paginator-size-label" }, "Por p\u00E1gina:"), h("select", { key: '0e37733de81c70ac274c8e89af65f0f94115ecb5', class: "paginator-size-select", onChange: (e) => this.onPageSizeChange(e) }, this.parsedOptions.map(opt => (h("option", { value: opt, selected: opt === this.pageSize }, opt)))))), h("div", { key: 'fb70589d0fd3d8072190099fe187359439707dc1', class: "paginator-pages" }, h("button", { key: '6348dda14005ed8dcd3e96d788715bbd5a9d432e', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, disabled: isFirst, onClick: () => this.goTo(this.page - 1), "aria-label": "Anterior" }, h("dropi-icon", { key: '2b2c17304b3c246a660b71f5ab5feedfb93ba044', name: "Dropdown-left", width: "16px", height: "16px", color: isFirst ? 'Gray-Gray-300' : 'Gray-Gray-600' })), pages.map((p, i) => p === '...'
+        return (h("div", { key: '7a2b5b626be626d66d33cb7857d9243440559587', class: "paginator" }, this.showPageSizeSelector && (h("div", { key: 'e113aee78c554393e41ad1e2ec94daa24c65043e', class: "paginator-size" }, h("span", { key: 'ee5124c3b99a5d80b309df9d41daaf5c530a1313', class: "paginator-size-label" }, "Por p\u00E1gina:"), h("select", { key: '8c58fd97f11866a2467e4412be2cc18252d55d79', class: "paginator-size-select", onChange: (e) => this.onPageSizeChange(e) }, this.parsedOptions.map(opt => (h("option", { value: opt, selected: opt === this.pageSize }, opt)))))), h("div", { key: 'd727c882a91240cc9d777156c7b6cd2fac01ca67', class: "paginator-pages" }, !isFirst && !this.noLabels && (h("button", { key: '7efb966e0f8a6e8270ec8fda44551072acb46152', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, onClick: () => this.goTo(1), "aria-label": "Primera p\u00E1gina" }, h("dropi-icon", { key: 'ac59bf489afc4622101bdeaa2b1eb9d8628041d4', name: "Arrow-double-small-left", width: "16px", height: "16px", color: "Gray-Gray-600" }))), !isFirst && (h("button", { key: '0347c7803eed753d73fd0260330853995e74e734', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, onClick: () => this.goTo(this.page - 1), "aria-label": "Anterior" }, h("dropi-icon", { key: '7097ac1ba68a1953c686022ea73f812437cc96cd', name: "Dropdown-left", width: "16px", height: "16px", color: "Gray-Gray-600" }), !this.noLabels && h("span", { key: '786be5b0f0116c35c2685356607695e8f22328e0', class: "paginator-label" }, "Anterior"))), pages.map((p, i) => p === '...'
             ? h("span", { class: "paginator-ellipsis", key: `e${i}` }, "\u2026")
-            : h("button", { key: p, class: { 'paginator-btn': true, 'paginator-btn--active': p === this.page }, onClick: () => this.goTo(p), "aria-current": p === this.page ? 'page' : undefined }, p)), h("button", { key: 'fea38306411fd4a73f35231ff632d8846301dd5f', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, disabled: isLast, onClick: () => this.goTo(this.page + 1), "aria-label": "Siguiente" }, h("dropi-icon", { key: 'f7ed587cb578ef0b9872f290cdc17eebe2f9efeb', name: "Dropdown-Right", width: "16px", height: "16px", color: isLast ? 'Gray-Gray-300' : 'Gray-Gray-600' })))));
+            : h("button", { key: p, class: { 'paginator-btn': true, 'paginator-btn--active': p === this.page }, onClick: () => this.goTo(p), "aria-current": p === this.page ? 'page' : undefined }, p)), !isLast && (h("button", { key: 'e462ff2d53d1b1361e813701fb549505e0eada30', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, onClick: () => this.goTo(this.page + 1), "aria-label": "Siguiente" }, !this.noLabels && h("span", { key: '1d40fa0b8b69c72c3e7eed4cd4732f009508e052', class: "paginator-label" }, "Siguiente"), h("dropi-icon", { key: 'efcc1414a52a3946f38e2b7790bcbed2fce42328', name: "Dropdown-Right", width: "16px", height: "16px", color: "Gray-Gray-600" }))), !isLast && !this.noLabels && (h("button", { key: 'ad08274cb7d624d141ee7c1599fb5662e5715aca', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, onClick: () => this.goTo(this.totalPages), "aria-label": "\u00DAltima p\u00E1gina" }, h("dropi-icon", { key: '579969aa3a6c0bc538a2d68fc399e017a836136d', name: "Arrow-double-small-right", width: "16px", height: "16px", color: "Gray-Gray-600" }))))));
     }
     static get is() { return "dropi-paginator"; }
     static get encapsulation() { return "shadow"; }
@@ -167,6 +169,26 @@ export class DropiPaginator {
                 "attribute": "max-pages",
                 "defaultValue": "5"
             },
+            "noLabels": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Hide \"Anterior\"/\"Siguiente\" text labels, show only arrows"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "no-labels",
+                "defaultValue": "false"
+            },
             "showPageSizeSelector": {
                 "type": "boolean",
                 "mutable": false,

package/dist/collection/components/dropi-radio-button/dropi-radio-button.js

@@ -28,7 +28,7 @@ export class DropiRadioButton {
         this.dropiChange.emit(e);
     }
     render() {
-        return (h("div", { key: 'fd1153aa79130eeb865c0289b7e323bdf2459a8c', class: "dropi-radio-button" }, h("label", { key: 'b4fbe10ac36213905779f0976e2e80b549323a52', htmlFor: this.inputId }, h("input", { key: '8f9b74ed53912bdff637b879a50faf4d83b7d62b', id: this.inputId, type: "radio", name: this.name, checked: this.checked, onChange: (e) => this.handleChange(e) }), this.label)));
+        return (h("div", { key: 'd1f58dca9ddeacc153cfd1808fdc19d8c830e738', class: "dropi-radio-button" }, h("label", { key: '569169ec20f9d8fe69abe1869aed04f80f569fe8', htmlFor: this.inputId }, h("input", { key: '47f93ccdeedb805ec79e3f349aefb1b5e818437d', id: this.inputId, type: "radio", name: this.name, checked: this.checked, onChange: (e) => this.handleChange(e) }), this.label)));
     }
     static get is() { return "dropi-radio-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/dropi-radio-selection-list/dropi-radio-selection-list.css

@@ -0,0 +1,64 @@
+:host { display: block; width: 100%; }
+*, *::before, *::after { box-sizing: border-box; }
+
+.rsl__search {
+  display: flex;
+  align-items: center;
+  gap: var(--Size-2, 8px);
+  padding: var(--Size-2, 8px) var(--Size-3, 12px);
+  border: 1px solid var(--Gray-Gray-200, #c3c9d9);
+  border-radius: var(--Border-2, 8px);
+  margin-bottom: var(--Size-2, 8px);
+}
+
+.rsl__search-input {
+  flex: 1;
+  border: none;
+  outline: none;
+  font-size: var(--font-size-s, 12px);
+  font-family: inherit;
+  color: var(--Gray-Gray-700, #32394d);
+  background: transparent;
+}
+
+.rsl__list { display: flex; flex-direction: column; gap: var(--Size-2, 8px); }
+
+.rsl__item {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--Size-3, 12px);
+  padding: var(--Size-3, 12px);
+  border: 1px solid var(--Gray-Gray-200, #c3c9d9);
+  border-radius: var(--Border-2, 8px);
+  cursor: pointer;
+  transition: border-color 0.15s, background 0.15s;
+}
+
+.rsl__item:hover { background: var(--Gray-Gray-50, #f7f8fa); }
+.rsl__item--selected { border-color: var(--Primary-Primary-500, #f49a3d); background: var(--Primary-Primary-50, #fff5eb); }
+
+.rsl__radio {
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  border: 2px solid var(--Gray-Gray-300, #a3abbf);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  margin-top: 1px;
+  transition: border-color 0.15s;
+}
+
+.rsl__radio--checked { border-color: var(--Primary-Primary-500, #f49a3d); }
+
+.rsl__radio-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--Primary-Primary-500, #f49a3d);
+}
+
+.rsl__content { display: flex; flex-direction: column; gap: 2px; }
+.rsl__name { font-size: var(--font-size-s, 12px); font-weight: var(--font-weight-bold, 700); color: var(--Gray-Gray-700, #32394d); }
+.rsl__desc { font-size: var(--font-size-xs, 10px); color: var(--Gray-Gray-500, #69738c); }