@actabldesign/bellhop-core 0.0.3

package/collection/components/bh-loader-spinner/bh-loader-spinner.js

@@ -0,0 +1,182 @@
+import { h } from "@stencil/core";
+export class BhLoaderSpinner {
+    /** Loader size */
+    size = 'md';
+    /** Loader color variant - use 'white' for dark surfaces like buttons */
+    variant = 'default';
+    /** Whether to show as overlay */
+    overlay = false;
+    /** Message to show in overlay mode */
+    overlayMessage = '';
+    /** Whether to show message */
+    showMessage = false;
+    /** Message text */
+    message = 'Loading...';
+    renderSpinner() {
+        const gradientId = this.variant === 'white' ? 'bellhop-gradient-white' : 'bellhop-gradient';
+        return (h("div", { class: `loader-spinner variant-${this.variant}` }, h("div", { class: "spinner-gradient" }, h("svg", { class: "gradient-svg", viewBox: "0 0 50 50" }, h("defs", null, this.variant === 'white' ? (h("linearGradient", { id: "bellhop-gradient-white", x1: "0%", y1: "0%", x2: "0%", y2: "100%" }, h("stop", { offset: "0%", style: { stopColor: 'rgba(255, 255, 255, 1)' } }), h("stop", { offset: "50%", style: { stopColor: 'rgba(255, 255, 255, 0.8)' } }), h("stop", { offset: "100%", style: { stopColor: 'rgba(255, 255, 255, 0.5)' } }))) : (h("linearGradient", { id: "bellhop-gradient", x1: "0%", y1: "0%", x2: "0%", y2: "100%" }, h("stop", { offset: "0%", style: { stopColor: 'var(--color-accent-300)' } }), h("stop", { offset: "51%", style: { stopColor: 'var(--color-brand-400)' } }), h("stop", { offset: "100%", style: { stopColor: 'var(--color-brand-600)' } })))), h("circle", { class: "gradient-path", cx: "25", cy: "25", r: "20", fill: "none", stroke: `url(#${gradientId})`, "stroke-width": "4", "stroke-linecap": "round" })))));
+    }
+    renderMessage(isOverlay) {
+        const shouldShowMessage = isOverlay
+            ? (this.showMessage || this.overlayMessage)
+            : this.showMessage;
+        if (!shouldShowMessage)
+            return null;
+        return (h("div", { class: "loader-message" }, isOverlay ? (this.overlayMessage || this.message) : this.message));
+    }
+    render() {
+        if (this.overlay) {
+            return (h("div", { class: "loader-overlay" }, h("div", { class: "loader-overlay-content" }, h("div", { class: `loader-container size-${this.size}` }, this.renderSpinner()), this.renderMessage(true))));
+        }
+        return (h("div", { class: `loader-container size-${this.size}` }, this.renderSpinner(), this.renderMessage(false)));
+    }
+    static get is() { return "bh-loader-spinner"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bh-loader-spinner.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bh-loader-spinner.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "LoaderSize",
+                    "resolved": "\"lg\" | \"md\" | \"sm\" | \"xl\"",
+                    "references": {
+                        "LoaderSize": {
+                            "location": "local",
+                            "path": "/home/runner/work/bellhopos/bellhopos/packages/bellhop-core/src/components/bh-loader-spinner/bh-loader-spinner.tsx",
+                            "id": "src/components/bh-loader-spinner/bh-loader-spinner.tsx::LoaderSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Loader size"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "LoaderVariant",
+                    "resolved": "\"default\" | \"white\"",
+                    "references": {
+                        "LoaderVariant": {
+                            "location": "local",
+                            "path": "/home/runner/work/bellhopos/bellhopos/packages/bellhop-core/src/components/bh-loader-spinner/bh-loader-spinner.tsx",
+                            "id": "src/components/bh-loader-spinner/bh-loader-spinner.tsx::LoaderVariant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Loader color variant - use 'white' for dark surfaces like buttons"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "'default'"
+            },
+            "overlay": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to show as overlay"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "overlay",
+                "defaultValue": "false"
+            },
+            "overlayMessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Message to show in overlay mode"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "overlay-message",
+                "defaultValue": "''"
+            },
+            "showMessage": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to show message"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-message",
+                "defaultValue": "false"
+            },
+            "message": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Message text"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "message",
+                "defaultValue": "'Loading...'"
+            }
+        };
+    }
+}
+//# sourceMappingURL=bh-loader-spinner.js.map

package/collection/components/bh-loader-spinner/bh-loader-spinner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bh-loader-spinner.js","sourceRoot":"","sources":["../../../src/components/bh-loader-spinner/bh-loader-spinner.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h } from '@stencil/core';\n\nexport type LoaderSize = 'sm' | 'md' | 'lg' | 'xl';\nexport type LoaderVariant = 'default' | 'white';\n\n@Component({\n  tag: 'bh-loader-spinner',\n  styleUrl: 'bh-loader-spinner.css',\n  shadow: true,\n})\nexport class BhLoaderSpinner {\n  /** Loader size */\n  @Prop() size: LoaderSize = 'md';\n\n  /** Loader color variant - use 'white' for dark surfaces like buttons */\n  @Prop() variant: LoaderVariant = 'default';\n\n  /** Whether to show as overlay */\n  @Prop() overlay: boolean = false;\n\n  /** Message to show in overlay mode */\n  @Prop() overlayMessage: string = '';\n\n  /** Whether to show message */\n  @Prop() showMessage: boolean = false;\n\n  /** Message text */\n  @Prop() message: string = 'Loading...';\n\n  private renderSpinner() {\n    const gradientId = this.variant === 'white' ? 'bellhop-gradient-white' : 'bellhop-gradient';\n\n    return (\n      <div class={`loader-spinner variant-${this.variant}`}>\n        <div class=\"spinner-gradient\">\n          <svg class=\"gradient-svg\" viewBox=\"0 0 50 50\">\n            <defs>\n              {this.variant === 'white' ? (\n                <linearGradient\n                  id=\"bellhop-gradient-white\"\n                  x1=\"0%\"\n                  y1=\"0%\"\n                  x2=\"0%\"\n                  y2=\"100%\"\n                >\n                  <stop offset=\"0%\" style={{ stopColor: 'rgba(255, 255, 255, 1)' }} />\n                  <stop offset=\"50%\" style={{ stopColor: 'rgba(255, 255, 255, 0.8)' }} />\n                  <stop offset=\"100%\" style={{ stopColor: 'rgba(255, 255, 255, 0.5)' }} />\n                </linearGradient>\n              ) : (\n                <linearGradient\n                  id=\"bellhop-gradient\"\n                  x1=\"0%\"\n                  y1=\"0%\"\n                  x2=\"0%\"\n                  y2=\"100%\"\n                >\n                  <stop offset=\"0%\" style={{ stopColor: 'var(--color-accent-300)' }} />\n                  <stop offset=\"51%\" style={{ stopColor: 'var(--color-brand-400)' }} />\n                  <stop offset=\"100%\" style={{ stopColor: 'var(--color-brand-600)' }} />\n                </linearGradient>\n              )}\n            </defs>\n            <circle\n              class=\"gradient-path\"\n              cx=\"25\"\n              cy=\"25\"\n              r=\"20\"\n              fill=\"none\"\n              stroke={`url(#${gradientId})`}\n              stroke-width=\"4\"\n              stroke-linecap=\"round\"\n            />\n          </svg>\n        </div>\n      </div>\n    );\n  }\n\n  private renderMessage(isOverlay: boolean) {\n    const shouldShowMessage = isOverlay\n      ? (this.showMessage || this.overlayMessage)\n      : this.showMessage;\n\n    if (!shouldShowMessage) return null;\n\n    return (\n      <div class=\"loader-message\">\n        {isOverlay ? (this.overlayMessage || this.message) : this.message}\n      </div>\n    );\n  }\n\n  render() {\n    if (this.overlay) {\n      return (\n        <div class=\"loader-overlay\">\n          <div class=\"loader-overlay-content\">\n            <div class={`loader-container size-${this.size}`}>\n              {this.renderSpinner()}\n            </div>\n            {this.renderMessage(true)}\n          </div>\n        </div>\n      );\n    }\n\n    return (\n      <div class={`loader-container size-${this.size}`}>\n        {this.renderSpinner()}\n        {this.renderMessage(false)}\n      </div>\n    );\n  }\n}\n"]}

package/collection/components/bh-logo-box/bh-logo-box.css

@@ -0,0 +1,85 @@
+.logo-box {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  position: relative;
+  width: 40px;
+  flex-shrink: 0;
+  isolation: isolate;
+}
+
+.logo-active {
+  background-color: var(--color-brand-600);
+  box-sizing: border-box;
+  display: flex;
+  gap: var(--spacing-lg);
+  align-items: center;
+  justify-content: center;
+  padding: var(--spacing-sm);
+  position: relative;
+  border-radius: var(--radius-md);
+  flex-shrink: 0;
+  width: 40px;
+  height: 40px;
+  z-index: 2;
+  transition: background-color 0.3s ease;
+  cursor: pointer;
+}
+
+/* Hover effect for logo-active */
+.logo-box:hover .logo-active,
+.logo-box.dropdown-open .logo-active {
+  background-color: var(--color-brand-700);
+}
+
+.logo {
+  overflow: hidden;
+  position: relative;
+  flex-shrink: 0;
+  width: 32px;
+  height: 32px;
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+  transition: background-image 0.4s cubic-bezier(0.08, 0.52, 0.52, 1);
+}
+
+/* Logo variations - Background images must be configured by the consuming application */
+.logo-actabl {
+  /* background-image should be set by consuming application */
+}
+
+.logo-al {
+  /* background-image should be set by consuming application */
+}
+
+.logo-he {
+  /* background-image should be set by consuming application */
+}
+
+.logo-ps {
+  /* background-image should be set by consuming application */
+}
+
+.logo-tr {
+  /* background-image should be set by consuming application */
+}
+
+.logo-more-products {
+  position: absolute;
+  background-color: var(--color-brand-200);
+  right: 2px;
+  bottom: -4px;
+  border-radius: 5px;
+  width: 36px;
+  height: 35px;
+  z-index: 1;
+  transition: transform 0.3s ease;
+}
+
+/* Slide-up animation for logo-more-products */
+.logo-box:hover .logo-more-products,
+.logo-box.dropdown-open .logo-more-products {
+  transform: translateY(-4px);
+}

package/collection/components/bh-logo-box/bh-logo-box.js

@@ -0,0 +1,184 @@
+import { h, Host } from "@stencil/core";
+export class BhLogoBox {
+    /**
+     * Type of logo to display
+     */
+    logoType = 'actabl';
+    /**
+     * Array of products to display in the switcher
+     */
+    products = [
+        {
+            id: 'alice',
+            name: 'Alice',
+            description: 'Housekeeping & Guest Services',
+            logo: './assets/logos/AL.svg',
+        },
+        {
+            id: 'hotel-effectiveness',
+            name: 'Hotel Effectiveness',
+            description: 'Labor planning',
+            logo: './assets/logos/HE.svg',
+        },
+        {
+            id: 'profit-sword',
+            name: 'ProfitSword',
+            description: 'B.I and Finance',
+            logo: './assets/logos/PS.svg',
+        },
+        {
+            id: 'transcendent',
+            name: 'Transcendent',
+            description: 'Asset Management & CapEx',
+            logo: './assets/logos/TR.svg',
+        },
+    ];
+    /**
+     * Event emitted when a product is selected
+     */
+    bhProductSelect;
+    isOpen = false;
+    anchorPosition = { top: 0, left: 0 };
+    logoActiveRef;
+    handleLogoClick = () => {
+        if (this.logoActiveRef) {
+            const rect = this.logoActiveRef.getBoundingClientRect();
+            this.anchorPosition = {
+                top: rect.bottom + 8,
+                left: rect.left,
+            };
+            this.isOpen = !this.isOpen;
+        }
+    };
+    handleClose = () => {
+        this.isOpen = false;
+    };
+    handleProductSelect = (event) => {
+        this.bhProductSelect.emit(event.detail);
+        this.isOpen = false;
+    };
+    getLogoSrc = () => {
+        switch (this.logoType) {
+            case 'actabl':
+                return './assets/logos/actabl.svg';
+            case 'al':
+                return './assets/logos/AL.svg';
+            case 'he':
+                return './assets/logos/HE.svg';
+            case 'ps':
+                return './assets/logos/PS.svg';
+            case 'tr':
+                return './assets/logos/TR.svg';
+            default:
+                return './assets/logos/actabl.svg';
+        }
+    };
+    render() {
+        const logoBoxClasses = {
+            'logo-box': true,
+            'dropdown-open': this.isOpen,
+        };
+        const logoClasses = {
+            'logo': true,
+            [`logo-${this.logoType}`]: true,
+        };
+        return (h(Host, { key: '7701200e2297867a3188f74663d5dcfc3c1bddbe' }, h("div", { key: 'c625d8d74cd94e2e2abfa283f45a79a6928e3868', class: logoBoxClasses }, h("div", { key: 'bcc3c1e4dfd02e590264ac1075632af0c0626edb', ref: (el) => (this.logoActiveRef = el), class: "logo-active", onClick: this.handleLogoClick }, h("img", { key: '592a65fe63945bcb878a0065c4427f19e1bac041', src: this.getLogoSrc(), alt: `${this.logoType} logo`, class: logoClasses })), h("div", { key: '552fbdbb59627349a60f86724677cbec7403ddf8', class: "logo-more-products" })), h("bh-product-switcher", { key: '588e16d9ad19f15c2c46509562ca78bd0aa5f7ae', isOpen: this.isOpen, anchorPosition: this.anchorPosition, products: this.products, onBhClose: this.handleClose, onBhProductSelect: this.handleProductSelect })));
+    }
+    static get is() { return "bh-logo-box"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bh-logo-box.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bh-logo-box.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "logoType": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "LogoType",
+                    "resolved": "\"actabl\" | \"al\" | \"he\" | \"ps\" | \"tr\"",
+                    "references": {
+                        "LogoType": {
+                            "location": "local",
+                            "path": "/home/runner/work/bellhopos/bellhopos/packages/bellhop-core/src/components/bh-logo-box/bh-logo-box.tsx",
+                            "id": "src/components/bh-logo-box/bh-logo-box.tsx::LogoType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Type of logo to display"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "logo-type",
+                "defaultValue": "'actabl'"
+            },
+            "products": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "BhProduct[]",
+                    "resolved": "BhProduct[]",
+                    "references": {
+                        "BhProduct": {
+                            "location": "import",
+                            "path": "../bh-product-switcher/bh-product-switcher",
+                            "id": "src/components/bh-product-switcher/bh-product-switcher.tsx::BhProduct"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Array of products to display in the switcher"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[\n    {\n      id: 'alice',\n      name: 'Alice',\n      description: 'Housekeeping & Guest Services',\n      logo: './assets/logos/AL.svg',\n    },\n    {\n      id: 'hotel-effectiveness',\n      name: 'Hotel Effectiveness',\n      description: 'Labor planning',\n      logo: './assets/logos/HE.svg',\n    },\n    {\n      id: 'profit-sword',\n      name: 'ProfitSword',\n      description: 'B.I and Finance',\n      logo: './assets/logos/PS.svg',\n    },\n    {\n      id: 'transcendent',\n      name: 'Transcendent',\n      description: 'Asset Management & CapEx',\n      logo: './assets/logos/TR.svg',\n    },\n  ]"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isOpen": {},
+            "anchorPosition": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "bhProductSelect",
+                "name": "bhProductSelect",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when a product is selected"
+                },
+                "complexType": {
+                    "original": "BhProduct",
+                    "resolved": "BhProduct",
+                    "references": {
+                        "BhProduct": {
+                            "location": "import",
+                            "path": "../bh-product-switcher/bh-product-switcher",
+                            "id": "src/components/bh-product-switcher/bh-product-switcher.tsx::BhProduct"
+                        }
+                    }
+                }
+            }];
+    }
+}
+//# sourceMappingURL=bh-logo-box.js.map

package/collection/components/bh-logo-box/bh-logo-box.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bh-logo-box.js","sourceRoot":"","sources":["../../../src/components/bh-logo-box/bh-logo-box.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, Event, EventEmitter, State, h, Host } from '@stencil/core';\nimport { BhProduct } from '../bh-product-switcher/bh-product-switcher';\n\nexport type LogoType = 'actabl' | 'al' | 'he' | 'ps' | 'tr';\n\n@Component({\n  tag: 'bh-logo-box',\n  styleUrl: 'bh-logo-box.css',\n  shadow: true,\n})\nexport class BhLogoBox {\n  /**\n   * Type of logo to display\n   */\n  @Prop() logoType: LogoType = 'actabl';\n\n  /**\n   * Array of products to display in the switcher\n   */\n  @Prop() products: BhProduct[] = [\n    {\n      id: 'alice',\n      name: 'Alice',\n      description: 'Housekeeping & Guest Services',\n      logo: './assets/logos/AL.svg',\n    },\n    {\n      id: 'hotel-effectiveness',\n      name: 'Hotel Effectiveness',\n      description: 'Labor planning',\n      logo: './assets/logos/HE.svg',\n    },\n    {\n      id: 'profit-sword',\n      name: 'ProfitSword',\n      description: 'B.I and Finance',\n      logo: './assets/logos/PS.svg',\n    },\n    {\n      id: 'transcendent',\n      name: 'Transcendent',\n      description: 'Asset Management & CapEx',\n      logo: './assets/logos/TR.svg',\n    },\n  ];\n\n  /**\n   * Event emitted when a product is selected\n   */\n  @Event() bhProductSelect!: EventEmitter<BhProduct>;\n\n  @State() isOpen: boolean = false;\n  @State() anchorPosition = { top: 0, left: 0 };\n\n  private logoActiveRef?: HTMLDivElement;\n\n  private handleLogoClick = () => {\n    if (this.logoActiveRef) {\n      const rect = this.logoActiveRef.getBoundingClientRect();\n      this.anchorPosition = {\n        top: rect.bottom + 8,\n        left: rect.left,\n      };\n      this.isOpen = !this.isOpen;\n    }\n  };\n\n  private handleClose = () => {\n    this.isOpen = false;\n  };\n\n  private handleProductSelect = (event: CustomEvent<BhProduct>) => {\n    this.bhProductSelect.emit(event.detail);\n    this.isOpen = false;\n  };\n\n  private getLogoSrc = () => {\n    switch (this.logoType) {\n      case 'actabl':\n        return './assets/logos/actabl.svg';\n      case 'al':\n        return './assets/logos/AL.svg';\n      case 'he':\n        return './assets/logos/HE.svg';\n      case 'ps':\n        return './assets/logos/PS.svg';\n      case 'tr':\n        return './assets/logos/TR.svg';\n      default:\n        return './assets/logos/actabl.svg';\n    }\n  };\n\n  render() {\n    const logoBoxClasses = {\n      'logo-box': true,\n      'dropdown-open': this.isOpen,\n    };\n\n    const logoClasses = {\n      'logo': true,\n      [`logo-${this.logoType}`]: true,\n    };\n\n    return (\n      <Host>\n        <div class={logoBoxClasses}>\n          <div\n            ref={(el) => (this.logoActiveRef = el)}\n            class=\"logo-active\"\n            onClick={this.handleLogoClick}\n          >\n            <img\n              src={this.getLogoSrc()}\n              alt={`${this.logoType} logo`}\n              class={logoClasses}\n            />\n          </div>\n          <div class=\"logo-more-products\"></div>\n        </div>\n\n        <bh-product-switcher\n          isOpen={this.isOpen}\n          anchorPosition={this.anchorPosition}\n          products={this.products}\n          onBhClose={this.handleClose}\n          onBhProductSelect={this.handleProductSelect}\n        ></bh-product-switcher>\n      </Host>\n    );\n  }\n}\n"]}

package/collection/components/bh-modal/bh-modal.css

@@ -0,0 +1,87 @@
+/* ==========================================================================
+   BH-MODAL COMPONENT STYLES
+   ========================================================================== */
+
+:host {
+  display: block;
+}
+
+/* Modal wrapper - fixed positioning for modal dialog */
+.modal-wrapper {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--spacing-4xl, 32px);
+  z-index: 1000;
+}
+
+/* Backdrop overlay */
+.modal-overlay {
+  position: absolute;
+  inset: 0;
+  background: var(--color-bg-overlay, rgba(64, 73, 104, 0.7));
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+}
+
+/* Modal container */
+.modal {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  max-width: 400px;
+  background: var(--color-bg-primary, #ffffff);
+  border-radius: var(--radius-xl, 12px);
+  box-shadow:
+    0px 20px 24px -4px rgba(16, 24, 40, 0.08),
+    0px 8px 8px -4px rgba(16, 24, 40, 0.03);
+  overflow: hidden;
+  z-index: 1;
+}
+
+/* Responsive adjustments */
+@media (max-width: 480px) {
+  .modal-wrapper {
+    padding: var(--spacing-xl, 16px);
+  }
+
+  .modal {
+    max-width: 100%;
+  }
+}
+
+/* Animation for modal entry */
+@keyframes modalFadeIn {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes overlayFadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.modal {
+  animation: modalFadeIn 0.2s ease-out;
+}
+
+.modal-overlay {
+  animation: overlayFadeIn 0.2s ease-out;
+}