@dropi/ui 0.1.17 → 0.1.19

package/dist/collection/components/dropi-image-miniature/dropi-image-miniature.js

@@ -0,0 +1,150 @@
+import { h } from "@stencil/core";
+/**
+ * @component dropi-image-miniature
+ * Grid of image thumbnails with zoom-on-hover overlay trigger.
+ */
+export class DropiImageMiniature {
+    /** Optional label above the grid */
+    label = '';
+    /** Array of image URLs. Pass as JSON string or array */
+    images = [];
+    /** Thumbnail width (CSS value) */
+    width = '88px';
+    /** Thumbnail height (CSS value) */
+    height = '88px';
+    /** Emitted when a thumbnail is clicked. e.detail = { images, index } */
+    dropiImageClick;
+    get parsedImages() {
+        if (typeof this.images === 'string') {
+            try {
+                return JSON.parse(this.images);
+            }
+            catch {
+                return [];
+            }
+        }
+        return this.images || [];
+    }
+    handleError(e) {
+        e.target.src =
+            `data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA4OCA4OCI+PHJlY3Qgd2lkdGg9Ijg4IiBoZWlnaHQ9Ijg4IiBmaWxsPSIjZjdmOGZhIi8+PHRleHQgeD0iNDQiIHk9IjQ4IiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBmaWxsPSIjYzNjOWQ5IiBmb250LXNpemU9IjEyIj5TaW4gaW1hZ2VuPC90ZXh0Pjwvc3ZnPg==`;
+    }
+    render() {
+        const imgs = this.parsedImages;
+        return (h("div", { key: '5182a02b3f7da5b1440230c87c8661f5f33bb7be', class: "miniature" }, this.label && h("span", { key: 'bf649e5c27972799d600df583c0953938a1cacad', class: "miniature__label" }, this.label), h("div", { key: '7197ca2d4bbf5d65db4ca71addcf352045734d94', class: "miniature__grid" }, imgs.map((src, i) => (h("div", { class: "miniature__item", style: { width: this.width, height: this.height }, key: i, onClick: () => this.dropiImageClick.emit({ images: imgs, index: i }) }, h("img", { src: src, alt: `imagen ${i + 1}`, loading: "lazy", onError: (e) => this.handleError(e) }), h("div", { class: "miniature__zoom" }, h("dropi-icon", { name: "Search", width: "16px", height: "16px", color: "Neutral-White" }))))))));
+    }
+    static get is() { return "dropi-image-miniature"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["dropi-image-miniature.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["dropi-image-miniature.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional label above the grid"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "''"
+            },
+            "images": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string[] | string",
+                    "resolved": "string | string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Array of image URLs. Pass as JSON string or array"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "images",
+                "defaultValue": "[]"
+            },
+            "width": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Thumbnail width (CSS value)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "width",
+                "defaultValue": "'88px'"
+            },
+            "height": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Thumbnail height (CSS value)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "height",
+                "defaultValue": "'88px'"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dropiImageClick",
+                "name": "dropiImageClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when a thumbnail is clicked. e.detail = { images, index }"
+                },
+                "complexType": {
+                    "original": "{ images: string[]; index: number }",
+                    "resolved": "{ images: string[]; index: number; }",
+                    "references": {}
+                }
+            }];
+    }
+}

package/dist/collection/components/dropi-image-overlay/dropi-image-overlay.css

@@ -0,0 +1,82 @@
+:host { display: block; }
+
+.overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0,0,0,0.92);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  z-index: 9999;
+  gap: var(--Size-3, 12px);
+}
+
+.overlay__close {
+  position: absolute;
+  top: var(--Size-4, 16px);
+  right: var(--Size-4, 16px);
+  background: rgba(255,255,255,0.1);
+  border: none;
+  border-radius: 50%;
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: background 0.15s;
+}
+.overlay__close:hover { background: rgba(255,255,255,0.2); }
+
+.overlay__main {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: var(--Size-3, 12px);
+  max-width: 90vw;
+  max-height: 75vh;
+}
+
+.overlay__image {
+  max-width: 80vw;
+  max-height: 72vh;
+  object-fit: contain;
+  border-radius: var(--Border-2, 8px);
+}
+
+.overlay__nav {
+  background: rgba(255,255,255,0.1);
+  border: none;
+  border-radius: 50%;
+  width: 44px;
+  height: 44px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: background 0.15s;
+}
+.overlay__nav:hover { background: rgba(255,255,255,0.2); }
+
+.overlay__thumbs {
+  display: flex;
+  gap: var(--Size-2, 8px);
+  flex-wrap: wrap;
+  justify-content: center;
+  max-width: 90vw;
+}
+
+.overlay__thumb {
+  width: 56px;
+  height: 56px;
+  object-fit: cover;
+  border-radius: var(--Border-1, 4px);
+  cursor: pointer;
+  opacity: 0.5;
+  border: 2px solid transparent;
+  transition: opacity 0.15s, border-color 0.15s;
+}
+.overlay__thumb:hover { opacity: 0.8; }
+.overlay__thumb--active { opacity: 1; border-color: var(--Primary-Primary-500, #f49a3d); }

package/dist/collection/components/dropi-image-overlay/dropi-image-overlay.js

@@ -0,0 +1,155 @@
+import { h } from "@stencil/core";
+/**
+ * @component dropi-image-overlay
+ * Full-screen image lightbox with prev/next navigation and thumbnails.
+ */
+export class DropiImageOverlay {
+    /** Whether the overlay is visible */
+    visible = false;
+    /** Images array or JSON string */
+    images = [];
+    /** Initially active image index */
+    activeIndex = 0;
+    current = 0;
+    parsedImages = [];
+    /** Emitted when overlay closes */
+    dropiClose;
+    imagesChanged(val) {
+        this.parsedImages = typeof val === 'string' ? JSON.parse(val) : (val || []);
+    }
+    indexChanged(val) { this.current = val; }
+    visibleChanged(val) {
+        if (val)
+            this.current = this.activeIndex;
+    }
+    componentWillLoad() {
+        this.imagesChanged(this.images);
+        this.current = this.activeIndex;
+    }
+    close() { this.visible = false; this.dropiClose.emit(); }
+    prev() { this.current = (this.current - 1 + this.parsedImages.length) % this.parsedImages.length; }
+    next() { this.current = (this.current + 1) % this.parsedImages.length; }
+    handleError(e) {
+        e.target.src =
+            `data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MDAgMzAwIj48cmVjdCB3aWR0aD0iNDAwIiBoZWlnaHQ9IjMwMCIgZmlsbD0iIzFhMjAzMyIvPjx0ZXh0IHg9IjIwMCIgeT0iMTU1IiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBmaWxsPSIjNDc1MDY2IiBmb250LXNpemU9IjE0Ij5TaW4gaW1hZ2VuPC90ZXh0Pjwvc3ZnPg==`;
+    }
+    render() {
+        if (!this.visible)
+            return null;
+        const imgs = this.parsedImages;
+        const multi = imgs.length > 1;
+        return (h("div", { class: "overlay", onClick: () => this.close() }, h("button", { class: "overlay__close", onClick: (e) => { e.stopPropagation(); this.close(); }, "aria-label": "Cerrar" }, h("dropi-icon", { name: "Close-small", width: "24px", height: "24px", color: "Neutral-White" })), h("div", { class: "overlay__main", onClick: (e) => e.stopPropagation() }, multi && (h("button", { class: "overlay__nav overlay__nav--prev", onClick: () => this.prev(), "aria-label": "Anterior" }, h("dropi-icon", { name: "Dropdown-left", width: "24px", height: "24px", color: "Neutral-White" }))), h("img", { class: "overlay__image", src: imgs[this.current], alt: `imagen ${this.current + 1}`, onError: (e) => this.handleError(e) }), multi && (h("button", { class: "overlay__nav overlay__nav--next", onClick: () => this.next(), "aria-label": "Siguiente" }, h("dropi-icon", { name: "Dropdown-Right", width: "24px", height: "24px", color: "Neutral-White" })))), multi && (h("div", { class: "overlay__thumbs", onClick: (e) => e.stopPropagation() }, imgs.map((src, i) => (h("img", { key: i, class: { 'overlay__thumb': true, 'overlay__thumb--active': i === this.current }, src: src, alt: `miniatura ${i + 1}`, onClick: () => this.current = i, onError: (e) => this.handleError(e) })))))));
+    }
+    static get is() { return "dropi-image-overlay"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["dropi-image-overlay.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["dropi-image-overlay.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "visible": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the overlay is visible"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "visible",
+                "defaultValue": "false"
+            },
+            "images": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string[] | string",
+                    "resolved": "string | string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Images array or JSON string"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "images",
+                "defaultValue": "[]"
+            },
+            "activeIndex": {
+                "type": "number",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Initially active image index"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "active-index",
+                "defaultValue": "0"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "current": {},
+            "parsedImages": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dropiClose",
+                "name": "dropiClose",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when overlay closes"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "images",
+                "methodName": "imagesChanged"
+            }, {
+                "propName": "activeIndex",
+                "methodName": "indexChanged"
+            }, {
+                "propName": "visible",
+                "methodName": "visibleChanged"
+            }];
+    }
+}

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

@@ -109,6 +109,17 @@
   padding-left: 28px;
 }
 
+/* When icon is always visible, shift the floating label right to avoid overlap */
+.input-container--has-icon label.label-bottom {
+  left: 28px;
+}
+
+/* When focused or has value, float up to left: 0 regardless */
+.input-container--has-icon .form-control:focus + label.label-bottom,
+.input-container--has-icon .form-control:not(:placeholder-shown) + label.label-bottom {
+  left: 0;
+}
+
 /* Password: hide characters via CSS (no type=password needed for font trick) */
 .text-password {
   -webkit-text-security: disc;

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

@@ -101,7 +101,7 @@ export class DropiInput {
         this.dropiInput.emit(val);
     }
     handleKeyDown(e) {
-        if (this.onlyNumbers && !this.isAllowedNumberKey(e)) {
+        if ((this.onlyNumbers || this.moneyFormat || this.thousandSeparator) && !this.isAllowedNumberKey(e)) {
             e.preventDefault();
         }
         if (this.onlyLetters && !this.isAllowedLetterKey(e)) {
@@ -178,15 +178,15 @@ export class DropiInput {
     // ── Render ───────────────────────────────────────────────────
     render() {
         const showAsterisk = this.required && this.showAsterisk && !this.disabled;
-        const showIconInline = !!this.icon && !!this.value;
-        return (h("div", { key: '4ea9c2118e6452345a2a92eedc807e6d94019784', class: { 'fixed-label-container': this.fixedLabel } }, this.fixedLabel && (h("div", { key: 'b8c1269e9d583becd9614f6f3c28f6a2b536f18f', class: "input-label Body-S-Regular" }, this.label, showAsterisk && h("span", { key: '945665772caab1a1c95f1a054dea1b8dd88287a3', class: "asterisk" }, " *"))), h("div", { key: 'f550584dde83c907429255d9a98b8a59ff322cbb', class: "form-group" }, h("div", { key: '6cc46f5822e62d59bb211e7d9eb7909ab2b833c9', class: "input-container" }, showIconInline && (h("dropi-icon", { key: 'c860e808ae7cd805aa9c430d52743f7eab0aaeba', class: "icon-input", name: this.icon, color: this.iconColor, width: "20px", height: "20px" })), this.passwordInput && (h("dropi-icon", { key: 'ba571d4d14ec2a911a8b0bd4cdc7a8481aebe746', class: "icon-input-password", name: this.showPassword ? 'Eye' : 'Eye-crossed', width: "20px", height: "20px", color: "Gray-Gray-500", onClick: () => this.togglePassword() })), h("input", { key: 'aad18a94d94c9600236bac7c23e38b1c1c41f06a', id: this.resolvedId, class: {
+        const showIconInline = !!this.icon;
+        return (h("div", { key: '444e873dc4175e75a5c85814499e28afb3f80b37', class: { 'fixed-label-container': this.fixedLabel } }, this.fixedLabel && (h("div", { key: 'a501500f872b87ad701f5c18e0e3b532005c3fcb', class: "input-label Body-S-Regular" }, this.label, showAsterisk && h("span", { key: '1ca3afb47b67cfb61cd8bceb8657c9f061462064', class: "asterisk" }, " *"))), h("div", { key: 'eb31110de652f6db7c5fdd747046280b0e81e2b6', class: "form-group" }, h("div", { key: 'b0bb2cac1e8d7f20d927437e4ba6327e333d1fdb', class: { 'input-container': true, 'input-container--has-icon': showIconInline } }, showIconInline && (h("dropi-icon", { key: '604a369b358b1c95a19cc23dd4bc4f9c77e4b050', class: "icon-input", name: this.icon, color: this.iconColor, width: "20px", height: "20px" })), this.passwordInput && (h("dropi-icon", { key: 'b1b3b979d172ada0c3fe616f795c7cd5b2bf45cb', class: "icon-input-password", name: this.showPassword ? 'Eye' : 'Eye-crossed', width: "20px", height: "20px", color: "Gray-Gray-500", onClick: () => this.togglePassword() })), h("input", { key: 'b5488711765a12b6e9fea7b0f8d5a23ae95de925', id: this.resolvedId, class: {
                 'form-control': true,
                 'form-control-valid': !this.isInvalid && this.touched && !!this.value,
                 'form-control-invalid': this.isInvalid,
                 'padding-icon': showIconInline,
                 'text-password': this.passwordInput && !this.showPassword,
                 'fixed-label-input': this.fixedLabel,
-            }, type: this.inputType, value: this.value, placeholder: this.fixedLabel ? this.placeholder : ' ', disabled: this.disabled, required: this.required, maxLength: this.maxlength, inputMode: this.inputMode, "data-cy": undefined, onInput: (e) => this.handleInput(e), onKeyDown: (e) => this.handleKeyDown(e), onFocus: () => this.handleFocus(), onBlur: () => this.handleBlur() }), !this.fixedLabel && (h("label", { key: '8ba7ea50525aa8990662d45829ba732094c41f80', class: "Body-S-Regular label-bottom", htmlFor: this.resolvedId }, this.label, showAsterisk && h("span", { key: '3916d3de6392da62b8086920cd2fce3b96238416', class: "asterisk" }, " *"))), this.showHelper && (h("div", { key: '83e17f7d0cdb503b86fd035775e1cb45d9f41709', class: "form-control-helper" }, this.isInvalid && (h("dropi-icon", { key: '4e034348270853f8a3aafbbbb938a5974076aebd', name: "Warning-circle", width: "12px", height: "12px", color: "Error-Error-500" })), h("span", { key: '7832f200ccc6f6273d65012b9e642c313399a277', class: {
+            }, type: this.inputType, value: this.value, placeholder: this.fixedLabel ? this.placeholder : ' ', disabled: this.disabled, required: this.required, maxLength: this.maxlength, inputMode: this.inputMode, "data-cy": undefined, onInput: (e) => this.handleInput(e), onKeyDown: (e) => this.handleKeyDown(e), onFocus: () => this.handleFocus(), onBlur: () => this.handleBlur() }), !this.fixedLabel && (h("label", { key: 'f3008d901c41e6f362977e1232e7597733c4288e', class: "Body-S-Regular label-bottom", htmlFor: this.resolvedId }, this.label, showAsterisk && h("span", { key: '1b982a1630f88557380df2f22c0c27bcceebbdc6', class: "asterisk" }, " *"))), this.showHelper && (h("div", { key: '30382a8e7beb0a14bb06f8fd25dae3da5371efd3', class: "form-control-helper" }, this.isInvalid && (h("dropi-icon", { key: 'a1ef2b7a9a659301cc22c19d5e5f65bd7a595a2c', name: "Warning-circle", width: "12px", height: "12px", color: "Error-Error-500" })), h("span", { key: '289250769c59d1ddde821395a9e97368404ca1ab', class: {
                 'disabled-helper': this.disabled,
                 'invalid-color': this.isInvalid,
             } }, this.helperText)))))));

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

@@ -0,0 +1,26 @@
+:host {
+  display: inline-block;
+}
+
+.dropi-logo {
+  margin: 0;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.dropi-logo img {
+  display: block;
+  object-fit: contain;
+}
+
+.dropi-logo--large img {
+  width: 256px;
+  height: 84px;
+}
+
+.dropi-logo--small img {
+  width: 86px;
+  height: 81px;
+}

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

@@ -0,0 +1,96 @@
+import { h } from "@stencil/core";
+const FALLBACK_SVG = `data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgNDAiPjx0ZXh0IHk9IjMwIiBmb250LXNpemU9IjI0IiBmb250LWZhbWlseT0ic2Fucy1zZXJpZiIgZmlsbD0iI2Y0OWEzZCI+ZHJvcGk8L3RleHQ+PC9zdmc+`;
+/**
+ * @component dropi-logo
+ * Displays the Dropi brand logo with size variants.
+ */
+export class DropiLogo {
+    /** Logo image URL */
+    urlLogo = '';
+    /** Size variant */
+    size = 'large';
+    /** Theme (reserved for future use) */
+    theme = 'light';
+    handleError(e) {
+        e.target.src = FALLBACK_SVG;
+    }
+    render() {
+        return (h("figure", { key: '6b3335e9c4e8d799106f3c2080822d35d74bb16d', class: { 'dropi-logo': true, [`dropi-logo--${this.size}`]: true } }, h("img", { key: 'e54ff2f0d1fb1f0f4eea4c46aae7a39f69268217', src: this.urlLogo || FALLBACK_SVG, alt: "Dropi logo", loading: "lazy", onError: (e) => this.handleError(e) })));
+    }
+    static get is() { return "dropi-logo"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["dropi-logo.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["dropi-logo.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "urlLogo": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Logo image URL"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "url-logo",
+                "defaultValue": "''"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'small' | 'large'",
+                    "resolved": "\"large\" | \"small\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Size variant"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'large'"
+            },
+            "theme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'dark' | 'light'",
+                    "resolved": "\"dark\" | \"light\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Theme (reserved for future use)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "theme",
+                "defaultValue": "'light'"
+            }
+        };
+    }
+}

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

@@ -0,0 +1,50 @@
+:host {
+  display: block;
+}
+
+.loader-overlay {
+  position: fixed;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(255, 255, 255, 0.85);
+  z-index: 9999;
+}
+
+.loader-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--Size-4, 16px);
+}
+
+.lottie-animation {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 200px;
+  height: 200px;
+}
+
+.loader-text {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--Size-2, 8px);
+  text-align: center;
+}
+
+.loader-title {
+  margin: 0;
+  font-size: var(--font-size-m, 14px);
+  font-weight: var(--font-weight-bold, 700);
+  color: var(--Gray-Gray-700, #32394d);
+}
+
+.loader-message {
+  margin: 0;
+  font-size: var(--font-size-s, 12px);
+  font-weight: var(--font-weight-regular, 400);
+  color: var(--Gray-Gray-500, #69738c);
+}