@actabldesign/bellhop-core 0.0.3

package/collection/components/bh-month-picker-content/bh-month-picker-content.js

@@ -0,0 +1,437 @@
+import { h, Host } from "@stencil/core";
+export class BhMonthPickerContent {
+    el;
+    /**
+     * Minimum year in the picker
+     */
+    minYear = 1998;
+    /**
+     * Maximum year in the picker
+     */
+    maxYear = 2060;
+    /**
+     * Whether the picker is disabled
+     */
+    disabled = false;
+    /**
+     * Array of disabled months
+     */
+    disabledMonths = [];
+    /**
+     * Whether the content is scrollable
+     */
+    scrollable = true;
+    /**
+     * Currently selected month (0-11)
+     */
+    selectedMonth;
+    /**
+     * Currently selected year
+     */
+    selectedYear;
+    /**
+     * Height of the content area
+     */
+    height = '375px';
+    /**
+     * Value object with month and year
+     */
+    value;
+    internalSelectedMonth = null;
+    internalSelectedYear = null;
+    isUsingKeyboard = false;
+    /**
+     * Event emitted when a month is selected
+     */
+    bhChange;
+    /**
+     * Event emitted when a month/year is selected
+     */
+    bhMonthYearSelect;
+    months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+    currentDate = new Date();
+    currentMonth = this.currentDate.getMonth();
+    currentYear = this.currentDate.getFullYear();
+    handleValueChange(newValue) {
+        if (newValue) {
+            this.internalSelectedMonth = newValue.month;
+            this.internalSelectedYear = newValue.year;
+        }
+    }
+    handleSelectedMonthChange(newValue) {
+        if (newValue !== undefined) {
+            this.internalSelectedMonth = newValue;
+        }
+    }
+    handleSelectedYearChange(newValue) {
+        if (newValue !== undefined) {
+            this.internalSelectedYear = newValue;
+        }
+    }
+    componentWillLoad() {
+        // Initialize with props or current date
+        if (this.value) {
+            this.internalSelectedMonth = this.value.month;
+            this.internalSelectedYear = this.value.year;
+        }
+        else if (this.selectedMonth !== undefined || this.selectedYear !== undefined) {
+            this.internalSelectedMonth = this.selectedMonth ?? this.currentMonth;
+            this.internalSelectedYear = this.selectedYear ?? this.currentYear;
+        }
+        else {
+            // Initialize with current date if within range
+            if (this.currentYear >= this.minYear && this.currentYear <= this.maxYear) {
+                this.internalSelectedMonth = this.currentMonth;
+                this.internalSelectedYear = this.currentYear;
+            }
+            else {
+                this.internalSelectedMonth = this.currentMonth;
+                this.internalSelectedYear = this.currentYear < this.minYear ? this.minYear : this.maxYear;
+            }
+        }
+    }
+    componentDidLoad() {
+        if (this.scrollable) {
+            setTimeout(() => this.scrollToSelectedYear(), 0);
+        }
+    }
+    scrollToSelectedYear() {
+        if (this.internalSelectedYear === null)
+            return;
+        const container = this.el.shadowRoot?.querySelector('.month-picker-content');
+        const yearElement = this.el.shadowRoot?.querySelector(`#year-${this.internalSelectedYear}`);
+        if (!container || !yearElement)
+            return;
+        const containerHeight = container.clientHeight;
+        const yearElementTop = yearElement.offsetTop;
+        const yearElementHeight = yearElement.offsetHeight;
+        const isFirstYear = this.internalSelectedYear === this.minYear;
+        const isLastYear = this.internalSelectedYear === this.maxYear;
+        if (!isFirstYear && !isLastYear) {
+            const scrollOffset = 50;
+            const scrollTop = yearElementTop - containerHeight / 2 + yearElementHeight / 2 + scrollOffset;
+            container.scrollTop = Math.max(0, scrollTop);
+        }
+        else if (isFirstYear) {
+            container.scrollTop = 0;
+        }
+        else {
+            container.scrollTop = container.scrollHeight;
+        }
+    }
+    getYears() {
+        return Array.from({ length: this.maxYear - this.minYear + 1 }, (_, i) => this.minYear + i);
+    }
+    isCurrentMonth(monthIndex, year) {
+        return this.currentMonth === monthIndex && this.currentYear === year;
+    }
+    isMonthSelectable(monthIndex, year) {
+        if (year < this.minYear || year > this.maxYear) {
+            return false;
+        }
+        return !this.disabledMonths.some(disabled => disabled.month === monthIndex && disabled.year === year);
+    }
+    selectMonth(monthIndex, year) {
+        if (this.disabled || !this.isMonthSelectable(monthIndex, year)) {
+            return;
+        }
+        this.internalSelectedMonth = monthIndex;
+        this.internalSelectedYear = year;
+        const selection = { month: monthIndex, year };
+        this.bhChange.emit(selection);
+        this.bhMonthYearSelect.emit(selection);
+    }
+    handleKeyDown = () => {
+        this.isUsingKeyboard = true;
+    };
+    handleMouseDown = () => {
+        this.isUsingKeyboard = false;
+    };
+    getMonthButtonClasses(monthIndex, year) {
+        const classes = ['month-button'];
+        if (!this.isMonthSelectable(monthIndex, year)) {
+            classes.push('inactive');
+        }
+        if (this.internalSelectedMonth === monthIndex && this.internalSelectedYear === year) {
+            classes.push('selected');
+        }
+        if (this.isCurrentMonth(monthIndex, year)) {
+            classes.push('today');
+        }
+        return classes.join(' ');
+    }
+    render() {
+        const years = this.getYears();
+        return (h(Host, { key: 'aa0bf635ddc8fffb3d21e705595e87ce4a60acea' }, h("div", { key: '0df1d3fed84f43c412e3c66becc237cdc5b8def0', class: `month-picker-content animate-slide-up-enter ${this.scrollable ? 'scrollable' : ''}`, style: { height: this.height }, onKeyDown: this.handleKeyDown, onMouseDown: this.handleMouseDown }, h("div", { key: '9745606dcf1196dd106f982beacd24ee6f16edaf', class: "calendar" }, years.map((year, yearIndex) => (h("div", { key: year, class: "year-section", id: `year-${year}` }, h("div", { class: "year-month-container" }, h("div", { class: "year-label" }, year), h("div", { class: "months-row" }, h("div", { class: "month-row" }, this.months.slice(0, 6).map((_, monthIndex) => (h("button", { key: monthIndex, class: this.getMonthButtonClasses(monthIndex, year), disabled: !this.isMonthSelectable(monthIndex, year), onClick: () => this.selectMonth(monthIndex, year) }, this.months[monthIndex])))), h("div", { class: "month-row" }, this.months.slice(6, 12).map((_, idx) => {
+            const monthIndex = idx + 6;
+            return (h("button", { key: monthIndex, class: this.getMonthButtonClasses(monthIndex, year), disabled: !this.isMonthSelectable(monthIndex, year), onClick: () => this.selectMonth(monthIndex, year) }, this.months[monthIndex]));
+        })))), yearIndex < years.length - 1 && (h("div", { class: "section-divider" }, h("div", { class: "divider-container" }, h("div", { class: "divider-line" })))))))))));
+    }
+    static get is() { return "bh-month-picker-content"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bh-month-picker-content.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bh-month-picker-content.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "minYear": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Minimum year in the picker"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "min-year",
+                "defaultValue": "1998"
+            },
+            "maxYear": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum year in the picker"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max-year",
+                "defaultValue": "2060"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the picker is disabled"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "disabledMonths": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "DisabledMonth[]",
+                    "resolved": "DisabledMonth[]",
+                    "references": {
+                        "DisabledMonth": {
+                            "location": "local",
+                            "path": "/home/runner/work/bellhopos/bellhopos/packages/bellhop-core/src/components/bh-month-picker-content/bh-month-picker-content.tsx",
+                            "id": "src/components/bh-month-picker-content/bh-month-picker-content.tsx::DisabledMonth"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Array of disabled months"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "scrollable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the content is scrollable"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "scrollable",
+                "defaultValue": "true"
+            },
+            "selectedMonth": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Currently selected month (0-11)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "selected-month"
+            },
+            "selectedYear": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Currently selected year"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "selected-year"
+            },
+            "height": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Height of the content area"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "height",
+                "defaultValue": "'375px'"
+            },
+            "value": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "MonthYear",
+                    "resolved": "MonthYear | undefined",
+                    "references": {
+                        "MonthYear": {
+                            "location": "local",
+                            "path": "/home/runner/work/bellhopos/bellhopos/packages/bellhop-core/src/components/bh-month-picker-content/bh-month-picker-content.tsx",
+                            "id": "src/components/bh-month-picker-content/bh-month-picker-content.tsx::MonthYear"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Value object with month and year"
+                },
+                "getter": false,
+                "setter": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "internalSelectedMonth": {},
+            "internalSelectedYear": {},
+            "isUsingKeyboard": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "bhChange",
+                "name": "bhChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when a month is selected"
+                },
+                "complexType": {
+                    "original": "MonthYear",
+                    "resolved": "MonthYear",
+                    "references": {
+                        "MonthYear": {
+                            "location": "local",
+                            "path": "/home/runner/work/bellhopos/bellhopos/packages/bellhop-core/src/components/bh-month-picker-content/bh-month-picker-content.tsx",
+                            "id": "src/components/bh-month-picker-content/bh-month-picker-content.tsx::MonthYear"
+                        }
+                    }
+                }
+            }, {
+                "method": "bhMonthYearSelect",
+                "name": "bhMonthYearSelect",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when a month/year is selected"
+                },
+                "complexType": {
+                    "original": "MonthYear",
+                    "resolved": "MonthYear",
+                    "references": {
+                        "MonthYear": {
+                            "location": "local",
+                            "path": "/home/runner/work/bellhopos/bellhopos/packages/bellhop-core/src/components/bh-month-picker-content/bh-month-picker-content.tsx",
+                            "id": "src/components/bh-month-picker-content/bh-month-picker-content.tsx::MonthYear"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "handleValueChange"
+            }, {
+                "propName": "selectedMonth",
+                "methodName": "handleSelectedMonthChange"
+            }, {
+                "propName": "selectedYear",
+                "methodName": "handleSelectedYearChange"
+            }];
+    }
+}
+//# sourceMappingURL=bh-month-picker-content.js.map

package/collection/components/bh-month-picker-content/bh-month-picker-content.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bh-month-picker-content.js","sourceRoot":"","sources":["../../../src/components/bh-month-picker-content/bh-month-picker-content.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, State, Event, EventEmitter, Element, Watch, h, Host } from '@stencil/core';\n\nexport interface MonthYear {\n  month: number; // 0-11 (January = 0, December = 11)\n  year: number;\n}\n\nexport interface DisabledMonth {\n  month: number;\n  year: number;\n}\n\n@Component({\n  tag: 'bh-month-picker-content',\n  styleUrl: 'bh-month-picker-content.css',\n  shadow: true,\n})\nexport class BhMonthPickerContent {\n  @Element() el!: HTMLElement;\n\n  /**\n   * Minimum year in the picker\n   */\n  @Prop() minYear: number = 1998;\n\n  /**\n   * Maximum year in the picker\n   */\n  @Prop() maxYear: number = 2060;\n\n  /**\n   * Whether the picker is disabled\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Array of disabled months\n   */\n  @Prop() disabledMonths: DisabledMonth[] = [];\n\n  /**\n   * Whether the content is scrollable\n   */\n  @Prop() scrollable: boolean = true;\n\n  /**\n   * Currently selected month (0-11)\n   */\n  @Prop() selectedMonth?: number;\n\n  /**\n   * Currently selected year\n   */\n  @Prop() selectedYear?: number;\n\n  /**\n   * Height of the content area\n   */\n  @Prop() height: string = '375px';\n\n  /**\n   * Value object with month and year\n   */\n  @Prop() value?: MonthYear;\n\n  @State() internalSelectedMonth: number | null = null;\n  @State() internalSelectedYear: number | null = null;\n  @State() isUsingKeyboard: boolean = false;\n\n  /**\n   * Event emitted when a month is selected\n   */\n  @Event() bhChange!: EventEmitter<MonthYear>;\n\n  /**\n   * Event emitted when a month/year is selected\n   */\n  @Event() bhMonthYearSelect!: EventEmitter<MonthYear>;\n\n  private months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];\n  private currentDate = new Date();\n  private currentMonth = this.currentDate.getMonth();\n  private currentYear = this.currentDate.getFullYear();\n\n  @Watch('value')\n  handleValueChange(newValue: MonthYear | undefined) {\n    if (newValue) {\n      this.internalSelectedMonth = newValue.month;\n      this.internalSelectedYear = newValue.year;\n    }\n  }\n\n  @Watch('selectedMonth')\n  handleSelectedMonthChange(newValue: number | undefined) {\n    if (newValue !== undefined) {\n      this.internalSelectedMonth = newValue;\n    }\n  }\n\n  @Watch('selectedYear')\n  handleSelectedYearChange(newValue: number | undefined) {\n    if (newValue !== undefined) {\n      this.internalSelectedYear = newValue;\n    }\n  }\n\n  componentWillLoad() {\n    // Initialize with props or current date\n    if (this.value) {\n      this.internalSelectedMonth = this.value.month;\n      this.internalSelectedYear = this.value.year;\n    } else if (this.selectedMonth !== undefined || this.selectedYear !== undefined) {\n      this.internalSelectedMonth = this.selectedMonth ?? this.currentMonth;\n      this.internalSelectedYear = this.selectedYear ?? this.currentYear;\n    } else {\n      // Initialize with current date if within range\n      if (this.currentYear >= this.minYear && this.currentYear <= this.maxYear) {\n        this.internalSelectedMonth = this.currentMonth;\n        this.internalSelectedYear = this.currentYear;\n      } else {\n        this.internalSelectedMonth = this.currentMonth;\n        this.internalSelectedYear = this.currentYear < this.minYear ? this.minYear : this.maxYear;\n      }\n    }\n  }\n\n  componentDidLoad() {\n    if (this.scrollable) {\n      setTimeout(() => this.scrollToSelectedYear(), 0);\n    }\n  }\n\n  private scrollToSelectedYear() {\n    if (this.internalSelectedYear === null) return;\n\n    const container = this.el.shadowRoot?.querySelector('.month-picker-content') as HTMLElement;\n    const yearElement = this.el.shadowRoot?.querySelector(`#year-${this.internalSelectedYear}`) as HTMLElement;\n\n    if (!container || !yearElement) return;\n\n    const containerHeight = container.clientHeight;\n    const yearElementTop = yearElement.offsetTop;\n    const yearElementHeight = yearElement.offsetHeight;\n\n    const isFirstYear = this.internalSelectedYear === this.minYear;\n    const isLastYear = this.internalSelectedYear === this.maxYear;\n\n    if (!isFirstYear && !isLastYear) {\n      const scrollOffset = 50;\n      const scrollTop = yearElementTop - containerHeight / 2 + yearElementHeight / 2 + scrollOffset;\n      container.scrollTop = Math.max(0, scrollTop);\n    } else if (isFirstYear) {\n      container.scrollTop = 0;\n    } else {\n      container.scrollTop = container.scrollHeight;\n    }\n  }\n\n  private getYears(): number[] {\n    return Array.from({ length: this.maxYear - this.minYear + 1 }, (_, i) => this.minYear + i);\n  }\n\n  private isCurrentMonth(monthIndex: number, year: number): boolean {\n    return this.currentMonth === monthIndex && this.currentYear === year;\n  }\n\n  private isMonthSelectable(monthIndex: number, year: number): boolean {\n    if (year < this.minYear || year > this.maxYear) {\n      return false;\n    }\n\n    return !this.disabledMonths.some(\n      disabled => disabled.month === monthIndex && disabled.year === year\n    );\n  }\n\n  private selectMonth(monthIndex: number, year: number) {\n    if (this.disabled || !this.isMonthSelectable(monthIndex, year)) {\n      return;\n    }\n\n    this.internalSelectedMonth = monthIndex;\n    this.internalSelectedYear = year;\n\n    const selection: MonthYear = { month: monthIndex, year };\n    this.bhChange.emit(selection);\n    this.bhMonthYearSelect.emit(selection);\n  }\n\n  private handleKeyDown = () => {\n    this.isUsingKeyboard = true;\n  };\n\n  private handleMouseDown = () => {\n    this.isUsingKeyboard = false;\n  };\n\n  private getMonthButtonClasses(monthIndex: number, year: number): string {\n    const classes = ['month-button'];\n\n    if (!this.isMonthSelectable(monthIndex, year)) {\n      classes.push('inactive');\n    }\n    if (this.internalSelectedMonth === monthIndex && this.internalSelectedYear === year) {\n      classes.push('selected');\n    }\n    if (this.isCurrentMonth(monthIndex, year)) {\n      classes.push('today');\n    }\n\n    return classes.join(' ');\n  }\n\n  render() {\n    const years = this.getYears();\n\n    return (\n      <Host>\n        <div\n          class={`month-picker-content animate-slide-up-enter ${this.scrollable ? 'scrollable' : ''}`}\n          style={{ height: this.height }}\n          onKeyDown={this.handleKeyDown}\n          onMouseDown={this.handleMouseDown}\n        >\n          <div class=\"calendar\">\n            {years.map((year, yearIndex) => (\n              <div key={year} class=\"year-section\" id={`year-${year}`}>\n                <div class=\"year-month-container\">\n                  <div class=\"year-label\">{year}</div>\n\n                  <div class=\"months-row\">\n                    {/* First row: Jan-Jun */}\n                    <div class=\"month-row\">\n                      {this.months.slice(0, 6).map((_, monthIndex) => (\n                        <button\n                          key={monthIndex}\n                          class={this.getMonthButtonClasses(monthIndex, year)}\n                          disabled={!this.isMonthSelectable(monthIndex, year)}\n                          onClick={() => this.selectMonth(monthIndex, year)}\n                        >\n                          {this.months[monthIndex]}\n                        </button>\n                      ))}\n                    </div>\n\n                    {/* Second row: Jul-Dec */}\n                    <div class=\"month-row\">\n                      {this.months.slice(6, 12).map((_, idx) => {\n                        const monthIndex = idx + 6;\n                        return (\n                          <button\n                            key={monthIndex}\n                            class={this.getMonthButtonClasses(monthIndex, year)}\n                            disabled={!this.isMonthSelectable(monthIndex, year)}\n                            onClick={() => this.selectMonth(monthIndex, year)}\n                          >\n                            {this.months[monthIndex]}\n                          </button>\n                        );\n                      })}\n                    </div>\n                  </div>\n                </div>\n\n                {/* Section Divider (not for last year) */}\n                {yearIndex < years.length - 1 && (\n                  <div class=\"section-divider\">\n                    <div class=\"divider-container\">\n                      <div class=\"divider-line\"></div>\n                    </div>\n                  </div>\n                )}\n              </div>\n            ))}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,117 @@
+:host {
+  display: block;
+  font-family: var(
+    --font-inter,
+    'Inter',
+    -apple-system,
+    BlinkMacSystemFont,
+    sans-serif
+  );
+}
+
+/* Base Notification */
+.notification {
+  display: flex;
+  align-items: flex-start;
+  gap: 16px;
+  padding: 16px;
+  background: var(--color-white, #ffffff);
+  border: 1px solid var(--color-neutral-200, #eaecf0);
+  border-radius: 12px;
+  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.1), 0 1px 2px rgba(16, 24, 40, 0.06);
+  position: relative;
+}
+
+/* Content Area */
+.notification-content {
+  display: flex;
+  gap: 12px;
+  flex: 1;
+  min-width: 0;
+}
+
+/* Icon Wrapper */
+.notification-icon-wrapper {
+  flex-shrink: 0;
+}
+
+/* Text Content */
+.notification-text {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  flex: 1;
+  min-width: 0;
+}
+
+.notification-text-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.notification-title {
+  font-size: var(--text-sm-size, 14px);
+  font-weight: 600;
+  color: var(--color-neutral-900, #101828);
+  margin: 0;
+  line-height: 1.43;
+}
+
+.notification-description {
+  font-size: var(--text-sm-size, 14px);
+  font-weight: 400;
+  color: var(--color-neutral-600, #475467);
+  margin: 0;
+  line-height: 1.43;
+}
+
+/* Actions */
+.notification-actions {
+  display: flex;
+  gap: 12px;
+}
+
+/* Close Button */
+.notification-close {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  padding: 0;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  border-radius: 4px;
+  transition: background 0.2s ease-in-out;
+}
+
+.notification-close:hover {
+  background: var(--color-neutral-100, #f2f4f7);
+}
+
+.close-icon {
+  font-size: 16px;
+  color: var(--color-neutral-400, #98a2b3);
+}
+
+/* Material Symbols */
+.material-symbols-outlined {
+  font-family: 'Material Symbols Outlined';
+  font-weight: normal;
+  font-style: normal;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  font-feature-settings: 'liga';
+  -webkit-font-smoothing: antialiased;
+  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
+}