@ncds/ui-admin 1.8.1 → 1.8.3

package/dist/temp/assets/scripts/notification/FloatingNotification.js

@@ -1,157 +0,0 @@
-import { CLASS_NAMES, FLOATING_ICON_MAP, getSizes } from './const';
-import { isMobile } from './utils';
-import { MEDIA_QUERY } from '../../../src/constant/breakpoint';
-import { FeaturedIcon } from '../featuredIcon';
-import { ButtonCloseX } from '../shared/ButtonCloseX';
-import { createWrapperElement, renderSupportingText, renderActions, bindNotificationEvents, setupAutoClose, } from './utils';
-export class FloatingNotification {
-    constructor(options) {
-        this.options = {
-            color: 'neutral',
-            className: '',
-            actions: [],
-            autoClose: 0,
-            supportingText: undefined,
-            ...options,
-        };
-        this.element = this.createElement();
-        this.bindEvents();
-        this.setupAutoClose();
-        this.setupMobileListener();
-    }
-    createElement() {
-        const { title, supportingText, color, className, actions, onClose } = this.options;
-        // 플로팅 알림에서 info 색상 사용 시 neutral로 대체
-        let actualColor = color;
-        if (color === 'info') {
-            console.warn('Floating notification does not support "info" color. Using "neutral" instead.');
-            actualColor = 'neutral';
-        }
-        const wrapper = createWrapperElement(CLASS_NAMES.FLOATING.BASE, actualColor, className);
-        const iconFunction = FLOATING_ICON_MAP[actualColor];
-        const mobile = isMobile();
-        // FeaturedIcon 생성
-        let featuredIconElement = null;
-        if (iconFunction) {
-            const size = getSizes.featuredIcon(mobile);
-            const iconSize = getSizes.iconPixel(mobile);
-            const iconSvg = iconFunction(iconSize);
-            this.featuredIcon = FeaturedIcon.create({
-                svgString: iconSvg,
-                theme: 'dark-circle',
-                color: actualColor,
-                size: size,
-            });
-            featuredIconElement = this.featuredIcon.getElement();
-        }
-        wrapper.innerHTML = this.buildTemplate({
-            title,
-            supportingText,
-            actions,
-            onClose,
-            isMobile: mobile,
-        });
-        // FeaturedIcon을 container에 추가
-        if (featuredIconElement) {
-            const container = wrapper.querySelector(`.${CLASS_NAMES.FLOATING.CONTAINER}`);
-            if (container) {
-                container.insertBefore(featuredIconElement, container.firstChild);
-            }
-        }
-        return wrapper;
-    }
-    buildTemplate(params) {
-        const { title, supportingText, actions, onClose, isMobile } = params;
-        return `
-      <div class="${CLASS_NAMES.FLOATING.CONTENT}">
-        <div class="${CLASS_NAMES.FLOATING.CONTAINER}">
-          <div class="${CLASS_NAMES.FLOATING.TEXT_CONTAINER}">
-            <div class="${CLASS_NAMES.FLOATING.TITLE_WRAPPER}">
-              <span class="${CLASS_NAMES.FLOATING.TITLE}">${title}</span>
-            </div>
-            ${renderSupportingText(supportingText, CLASS_NAMES.FLOATING.SUPPORTING_TEXT)}
-            ${actions && actions.length > 0 ? renderActions(actions, CLASS_NAMES.FLOATING.ACTIONS) : ''}
-          </div>
-        </div>
-      </div>
-      ${this.renderCloseButton(onClose, isMobile)}
-    `;
-    }
-    renderCloseButton(onClose, isMobile = false) {
-        if (!onClose)
-            return '';
-        const size = getSizes.closeButton(isMobile);
-        return ButtonCloseX(size, 'light', CLASS_NAMES.FLOATING.CLOSE_BUTTON, '알림 닫기', onClose);
-    }
-    setupMobileListener() {
-        const mediaQuery = window.matchMedia(MEDIA_QUERY.mobile);
-        const handleChange = (e) => {
-            this.updateMobileStyles(e.matches);
-            if (e.matches && this.options.onClose) {
-                this.options.onClose();
-                this.remove();
-            }
-        };
-        handleChange({ matches: mediaQuery.matches });
-        mediaQuery.addEventListener('change', handleChange);
-        this.mobileCleanup = () => {
-            mediaQuery.removeEventListener('change', handleChange);
-        };
-    }
-    updateMobileStyles(mobile) {
-        if (this.featuredIcon) {
-            const newSize = getSizes.featuredIcon(mobile);
-            this.featuredIcon.updateSize(newSize);
-        }
-        const closeButton = this.element.querySelector('.ncua-button-close-x');
-        if (closeButton) {
-            const newSize = getSizes.closeButton(mobile);
-            const newSvgSize = getSizes.closeButtonSvg(newSize);
-            closeButton.className = closeButton.className.replace(/ncua-button-close-x--(xs|sm)/, `ncua-button-close-x--${newSize}`);
-            const svg = closeButton.querySelector('svg');
-            if (svg) {
-                svg.setAttribute('width', newSvgSize.toString());
-                svg.setAttribute('height', newSvgSize.toString());
-            }
-        }
-    }
-    bindEvents() {
-        bindNotificationEvents(this.element, this.options.actions, this.options.onClose, () => this.remove());
-    }
-    setupAutoClose() {
-        this.autoCloseTimer = setupAutoClose(this.options.autoClose, this.options.onClose, () => this.remove());
-    }
-    // Public methods
-    getElement() {
-        return this.element;
-    }
-    appendTo(parent) {
-        parent.appendChild(this.element);
-    }
-    remove() {
-        if (this.autoCloseTimer) {
-            clearTimeout(this.autoCloseTimer);
-            this.autoCloseTimer = undefined;
-        }
-        if (this.element && this.element.parentNode) {
-            this.element.parentNode.removeChild(this.element);
-        }
-    }
-    destroy() {
-        // FeaturedIcon 정리
-        if (this.featuredIcon) {
-            this.featuredIcon.destroy();
-            this.featuredIcon = undefined;
-        }
-        // 모바일 리스너 정리
-        if (this.mobileCleanup) {
-            this.mobileCleanup();
-            this.mobileCleanup = undefined;
-        }
-        this.remove();
-    }
-    // Static factory methods
-    static create(options) {
-        return new FloatingNotification(options);
-    }
-}

package/dist/temp/assets/scripts/notification/FullWidthNotification.d.ts

@@ -1,21 +0,0 @@
-import type { BaseNotificationOptions } from './const';
-export interface FullWidthNotificationOptions extends BaseNotificationOptions {
-    type?: 'full-width';
-}
-export declare class FullWidthNotification {
-    private element;
-    private options;
-    private autoCloseTimer?;
-    constructor(options: FullWidthNotificationOptions);
-    private createElement;
-    private buildTemplate;
-    private renderHidePermanentlyButton;
-    private renderCloseButton;
-    private bindEvents;
-    private setupAutoClose;
-    getElement(): HTMLElement;
-    appendTo(parent: HTMLElement): void;
-    remove(): void;
-    destroy(): void;
-    static create(options: FullWidthNotificationOptions): FullWidthNotification;
-}

package/dist/temp/assets/scripts/notification/FullWidthNotification.js

@@ -1,110 +0,0 @@
-import { SVG_ICONS, CLASS_NAMES, FULL_WIDTH_ICON_MAP, FULL_WIDTH_SIZES } from './const';
-import { createWrapperElement, renderSupportingText, renderActions, bindNotificationEvents, setupAutoClose, } from './utils';
-export class FullWidthNotification {
-    constructor(options) {
-        this.options = {
-            color: 'neutral',
-            className: '',
-            actions: [],
-            autoClose: 0,
-            supportingText: undefined,
-            ...options,
-        };
-        this.element = this.createElement();
-        this.bindEvents();
-        this.setupAutoClose();
-    }
-    createElement() {
-        const { title, supportingText, color, className, actions, onClose, supportTextLink, onHidePermanently } = this.options;
-        const wrapper = createWrapperElement(CLASS_NAMES.FULL_WIDTH.BASE, color, className);
-        const iconHtml = FULL_WIDTH_ICON_MAP[color](FULL_WIDTH_SIZES.ICON);
-        wrapper.innerHTML = this.buildTemplate({
-            iconHtml,
-            title,
-            supportingText,
-            actions,
-            onClose,
-            supportTextLink,
-            onHidePermanently,
-        });
-        return wrapper;
-    }
-    buildTemplate(params) {
-        const { iconHtml, title, supportingText, actions, onClose, supportTextLink, onHidePermanently } = params;
-        return `
-      <div class="${CLASS_NAMES.FULL_WIDTH.CONTAINER}">
-        <div class="${CLASS_NAMES.FULL_WIDTH.CONTENT}">
-          <div class="${CLASS_NAMES.FULL_WIDTH.CONTENT_WRAPPER}">
-            <div class="${CLASS_NAMES.FULL_WIDTH.ICON}">${iconHtml}</div>
-            <div class="${CLASS_NAMES.FULL_WIDTH.TEXT_CONTAINER}">
-              <span class="${CLASS_NAMES.FULL_WIDTH.TITLE}">${title}</span>
-              ${renderSupportingText(supportingText, CLASS_NAMES.FULL_WIDTH.SUPPORTING_TEXT, supportTextLink)}
-            </div>
-          </div>
-          <div class="${CLASS_NAMES.FULL_WIDTH.ACTIONS_CONTAINER}">
-            ${actions && actions.length > 0 ? renderActions(actions, CLASS_NAMES.FULL_WIDTH.ACTIONS) : ''}
-            ${this.renderHidePermanentlyButton(onHidePermanently)}
-            ${this.renderCloseButton(onClose)}
-          </div>
-        </div>
-      </div>
-    `;
-    }
-    renderHidePermanentlyButton(onHidePermanently) {
-        if (!onHidePermanently)
-            return '';
-        return `
-      <button type="button" class="ncua-notification__action-button ncua-notification__action-button--text ncua-full-width-notification__link" data-hide-permanently="true">
-        다시보지 않기
-      </button>
-    `;
-    }
-    renderCloseButton(onClose) {
-        if (!onClose)
-            return '';
-        return `
-      <button type="button" class="${CLASS_NAMES.FULL_WIDTH.CLOSE_BUTTON}" aria-label="알림 닫기">
-        ${SVG_ICONS['x-close'](FULL_WIDTH_SIZES.CLOSE_BUTTON)}
-      </button>
-    `;
-    }
-    bindEvents() {
-        bindNotificationEvents(this.element, this.options.actions, this.options.onClose, () => this.remove());
-        // 다시보지 않기 버튼 이벤트 바인딩
-        if (this.options.onHidePermanently) {
-            const hidePermanentlyButton = this.element.querySelector('[data-hide-permanently="true"]');
-            if (hidePermanentlyButton) {
-                hidePermanentlyButton.addEventListener('click', () => {
-                    this.options.onHidePermanently?.();
-                    this.remove();
-                });
-            }
-        }
-    }
-    setupAutoClose() {
-        this.autoCloseTimer = setupAutoClose(this.options.autoClose, this.options.onClose, () => this.remove());
-    }
-    // Public methods
-    getElement() {
-        return this.element;
-    }
-    appendTo(parent) {
-        parent.appendChild(this.element);
-    }
-    remove() {
-        if (this.autoCloseTimer) {
-            clearTimeout(this.autoCloseTimer);
-            this.autoCloseTimer = undefined;
-        }
-        if (this.element && this.element.parentNode) {
-            this.element.parentNode.removeChild(this.element);
-        }
-    }
-    destroy() {
-        this.remove();
-    }
-    // Static factory methods
-    static create(options) {
-        return new FullWidthNotification(options);
-    }
-}

package/dist/temp/assets/scripts/notification/MessageNotification.d.ts

@@ -1,22 +0,0 @@
-import type { BaseNotificationOptions } from './const';
-export interface MessageNotificationOptions extends BaseNotificationOptions {
-    type?: 'message';
-}
-export declare class MessageNotification {
-    private element;
-    private options;
-    private autoCloseTimer?;
-    private featuredIcon?;
-    constructor(options: MessageNotificationOptions);
-    private createElement;
-    private buildTemplate;
-    private renderHidePermanentlyButton;
-    private renderCloseButton;
-    private bindEvents;
-    private setupAutoClose;
-    getElement(): HTMLElement;
-    appendTo(parent: HTMLElement): void;
-    remove(): void;
-    destroy(): void;
-    static create(options: MessageNotificationOptions): MessageNotification;
-}

package/dist/temp/assets/scripts/notification/MessageNotification.js

@@ -1,140 +0,0 @@
-import { SVG_ICONS, CLASS_NAMES, FLOATING_ICON_MAP, MESSAGE_SIZES } from './const';
-import { FeaturedIcon } from '../featuredIcon';
-import { createWrapperElement, renderSupportingText, renderActions, bindNotificationEvents, setupAutoClose, } from './utils';
-export class MessageNotification {
-    constructor(options) {
-        this.options = {
-            color: 'neutral',
-            className: '',
-            actions: [],
-            autoClose: 0,
-            supportingText: undefined,
-            ...options,
-        };
-        this.element = this.createElement();
-        this.bindEvents();
-        this.setupAutoClose();
-    }
-    createElement() {
-        const { title, supportingText, color, className, actions, onClose, onHidePermanently } = this.options;
-        // message 타입은 neutral, error, warning, success 4가지 색상만 지원
-        let actualColor = color;
-        if (color === 'info') {
-            console.warn('Message notification does not support "info" color. Using "neutral" instead.');
-            actualColor = 'neutral';
-        }
-        const wrapper = createWrapperElement(CLASS_NAMES.MESSAGE.BASE, actualColor, className);
-        const iconFunction = FLOATING_ICON_MAP[actualColor];
-        // FeaturedIcon 생성
-        let featuredIconElement = null;
-        if (iconFunction) {
-            const iconSvg = iconFunction(MESSAGE_SIZES.ICON_PIXEL);
-            this.featuredIcon = FeaturedIcon.create({
-                svgString: iconSvg,
-                theme: 'light-circle',
-                color: actualColor,
-                size: MESSAGE_SIZES.FEATURED_ICON,
-            });
-            featuredIconElement = this.featuredIcon.getElement();
-        }
-        wrapper.innerHTML = this.buildTemplate({
-            title,
-            supportingText,
-            actions,
-            onClose,
-            onHidePermanently,
-        });
-        // FeaturedIcon을 content-wrapper에 추가
-        if (featuredIconElement) {
-            const contentWrapper = wrapper.querySelector(`.${CLASS_NAMES.MESSAGE.CONTENT_WRAPPER}`);
-            if (contentWrapper) {
-                contentWrapper.insertBefore(featuredIconElement, contentWrapper.firstChild);
-            }
-        }
-        return wrapper;
-    }
-    buildTemplate(params) {
-        const { title, supportingText, actions, onClose, onHidePermanently } = params;
-        return `
-      <div class="${CLASS_NAMES.MESSAGE.CONTAINER}">
-        <div class="${CLASS_NAMES.MESSAGE.CONTENT}">
-          <div class="${CLASS_NAMES.MESSAGE.CONTENT_WRAPPER}">
-            <div class="${CLASS_NAMES.MESSAGE.TEXT_CONTAINER}">
-              <span class="${CLASS_NAMES.MESSAGE.TITLE}">${title}</span>
-              ${renderSupportingText(supportingText, CLASS_NAMES.MESSAGE.SUPPORTING_TEXT)}
-            </div>
-          </div>
-          <div class="${CLASS_NAMES.MESSAGE.ACTIONS_CONTAINER}">
-            ${actions && actions.length > 0 ? renderActions(actions, CLASS_NAMES.MESSAGE.ACTIONS) : ''}
-          </div>
-          <div class="${CLASS_NAMES.MESSAGE.ACTIONS_CONTAINER}">
-            ${this.renderHidePermanentlyButton(onHidePermanently)}
-            ${this.renderCloseButton(onClose)}
-          </div>
-        </div>
-      </div>
-    `;
-    }
-    renderHidePermanentlyButton(onHidePermanently) {
-        if (!onHidePermanently)
-            return '';
-        return `
-      <button type="button" class="${CLASS_NAMES.COMMON.ACTION_BUTTON} ${CLASS_NAMES.COMMON.ACTION_BUTTON}--text ${CLASS_NAMES.MESSAGE.HIDE_LINK}" data-hide-permanently="true">
-        다시 보지 않기
-      </button>
-    `;
-    }
-    renderCloseButton(onClose) {
-        if (!onClose)
-            return '';
-        return `
-      <button type="button" class="${CLASS_NAMES.MESSAGE.CLOSE_BUTTON}" aria-label="알림 닫기">
-        ${SVG_ICONS['x-close'](MESSAGE_SIZES.CLOSE_BUTTON).replace('stroke="currentColor"', `stroke="#2F2F30"`)}
-      </button>
-    `;
-    }
-    bindEvents() {
-        bindNotificationEvents(this.element, this.options.actions, this.options.onClose, () => this.remove());
-        // 다시보지 않기 버튼 이벤트 바인딩
-        if (this.options.onHidePermanently) {
-            const hidePermanentlyButton = this.element.querySelector('[data-hide-permanently="true"]');
-            if (hidePermanentlyButton) {
-                hidePermanentlyButton.addEventListener('click', () => {
-                    this.options.onHidePermanently?.();
-                    this.remove();
-                });
-            }
-        }
-    }
-    setupAutoClose() {
-        this.autoCloseTimer = setupAutoClose(this.options.autoClose, this.options.onClose, () => this.remove());
-    }
-    // Public methods
-    getElement() {
-        return this.element;
-    }
-    appendTo(parent) {
-        parent.appendChild(this.element);
-    }
-    remove() {
-        if (this.autoCloseTimer) {
-            clearTimeout(this.autoCloseTimer);
-            this.autoCloseTimer = undefined;
-        }
-        if (this.element && this.element.parentNode) {
-            this.element.parentNode.removeChild(this.element);
-        }
-    }
-    destroy() {
-        // FeaturedIcon 정리
-        if (this.featuredIcon) {
-            this.featuredIcon.destroy();
-            this.featuredIcon = undefined;
-        }
-        this.remove();
-    }
-    // Static factory methods
-    static create(options) {
-        return new MessageNotification(options);
-    }
-}

package/dist/temp/assets/scripts/notification/Notification.d.ts

@@ -1,21 +0,0 @@
-import type { NotificationColor, BaseNotificationOptions } from './const';
-export interface NotificationOptions extends BaseNotificationOptions {
-    type?: 'full-width' | 'floating' | 'message';
-}
-export declare class Notification {
-    private instance;
-    constructor(options: NotificationOptions);
-    getElement(): HTMLElement;
-    appendTo(parent: HTMLElement): void;
-    remove(): void;
-    destroy(): void;
-    show(parent?: HTMLElement): void;
-    static create(options: NotificationOptions): Notification;
-    static createWithColor(color: NotificationColor, title: string, supportingText?: string, options?: Partial<NotificationOptions>): Notification;
-    static success(title: string, supportingText?: string, options?: Partial<NotificationOptions>): Notification;
-    static error(title: string, supportingText?: string, options?: Partial<NotificationOptions>): Notification;
-    static warning(title: string, supportingText?: string, options?: Partial<NotificationOptions>): Notification;
-    static info(title: string, supportingText?: string, options?: Partial<NotificationOptions>): Notification;
-    static neutral(title: string, supportingText?: string, options?: Partial<NotificationOptions>): Notification;
-    static showFullWidth(options: Omit<NotificationOptions, 'type'>): Notification;
-}

package/dist/temp/assets/scripts/notification/Notification.js

@@ -1,94 +0,0 @@
-import { FullWidthNotification } from './FullWidthNotification';
-import { FloatingNotification } from './FloatingNotification';
-import { MessageNotification } from './MessageNotification';
-// 통합 Notification 클래스
-export class Notification {
-    constructor(options) {
-        const { type = 'floating', ...baseOptions } = options;
-        if (type === 'message') {
-            this.instance = new MessageNotification(baseOptions);
-        }
-        else if (type === 'full-width') {
-            this.instance = new FullWidthNotification(baseOptions);
-        }
-        else {
-            this.instance = new FloatingNotification(baseOptions);
-        }
-    }
-    // 모든 메서드를 instance에 위임
-    getElement() {
-        return this.instance.getElement();
-    }
-    appendTo(parent) {
-        return this.instance.appendTo(parent);
-    }
-    remove() {
-        return this.instance.remove();
-    }
-    destroy() {
-        return this.instance.destroy();
-    }
-    show(parent) {
-        if (parent) {
-            this.instance.appendTo(parent);
-        }
-        else {
-            this.instance.appendTo(document.body);
-        }
-    }
-    // Static factory methods
-    static create(options) {
-        return new Notification(options);
-    }
-    // Convenience method for creating notifications with specific color
-    static createWithColor(color, title, supportingText, options) {
-        const autoCloseMap = {
-            success: 3000,
-            error: 5000,
-            warning: 3000,
-            info: 3000,
-            neutral: 0,
-        };
-        return new Notification({
-            title,
-            supportingText,
-            color,
-            type: 'floating',
-            autoClose: autoCloseMap[color],
-            ...options,
-        });
-    }
-    // 클래스를 생성하지 않고도 기본 floating 알림 생성을 하기 위한 함수들
-    static success(title, supportingText, options) {
-        const notification = this.createWithColor('success', title, supportingText, options);
-        notification.show();
-        return notification;
-    }
-    static error(title, supportingText, options) {
-        const notification = this.createWithColor('error', title, supportingText, options);
-        notification.show();
-        return notification;
-    }
-    static warning(title, supportingText, options) {
-        const notification = this.createWithColor('warning', title, supportingText, options);
-        notification.show();
-        return notification;
-    }
-    static info(title, supportingText, options) {
-        const notification = this.createWithColor('info', title, supportingText, options);
-        notification.show();
-        return notification;
-    }
-    static neutral(title, supportingText, options) {
-        const notification = this.createWithColor('neutral', title, supportingText, options);
-        notification.show();
-        return notification;
-    }
-    // showFullWidth method for backward compatibility
-    static showFullWidth(options) {
-        return new Notification({
-            ...options,
-            type: 'full-width',
-        });
-    }
-}

package/dist/temp/assets/scripts/notification/const/classNames.d.ts

@@ -1,43 +0,0 @@
-export declare const CLASS_NAMES: {
-    readonly FULL_WIDTH: {
-        readonly BASE: "ncua-full-width-notification";
-        readonly CONTAINER: "ncua-full-width-notification__container";
-        readonly CONTENT: "ncua-full-width-notification__content";
-        readonly CONTENT_WRAPPER: "ncua-full-width-notification__content-wrapper";
-        readonly ICON: "ncua-full-width-notification__icon";
-        readonly TEXT_CONTAINER: "ncua-full-width-notification__text-container";
-        readonly TITLE: "ncua-full-width-notification__title";
-        readonly SUPPORTING_TEXT: "ncua-full-width-notification__supporting-text";
-        readonly ACTIONS_CONTAINER: "ncua-full-width-notification__actions-container";
-        readonly ACTIONS: "ncua-full-width-notification__actions";
-        readonly CLOSE_BUTTON: "ncua-full-width-notification__close-button";
-    };
-    readonly FLOATING: {
-        readonly BASE: "ncua-floating-notification";
-        readonly CONTAINER: "ncua-floating-notification__container";
-        readonly CONTENT: "ncua-floating-notification__content";
-        readonly TEXT_CONTAINER: "ncua-floating-notification__text-container";
-        readonly TITLE_WRAPPER: "ncua-floating-notification__title-wrapper";
-        readonly TITLE: "ncua-floating-notification__title";
-        readonly SUPPORTING_TEXT: "ncua-floating-notification__supporting-text";
-        readonly ACTIONS: "ncua-floating-notification__actions";
-        readonly CLOSE_BUTTON: "ncua-floating-notification__close-button";
-    };
-    readonly MESSAGE: {
-        readonly BASE: "ncua-message-notification";
-        readonly CONTAINER: "ncua-message-notification__container";
-        readonly CONTENT: "ncua-message-notification__content";
-        readonly CONTENT_WRAPPER: "ncua-message-notification__content-wrapper";
-        readonly ICON: "ncua-message-notification__icon";
-        readonly TEXT_CONTAINER: "ncua-message-notification__text-container";
-        readonly TITLE: "ncua-message-notification__title";
-        readonly SUPPORTING_TEXT: "ncua-message-notification__supporting-text";
-        readonly ACTIONS_CONTAINER: "ncua-message-notification__actions-container";
-        readonly ACTIONS: "ncua-message-notification__actions";
-        readonly HIDE_LINK: "ncua-message-notification__hide-link";
-        readonly CLOSE_BUTTON: "ncua-message-notification__close-button";
-    };
-    readonly COMMON: {
-        readonly ACTION_BUTTON: "ncua-notification__action-button";
-    };
-};

package/dist/temp/assets/scripts/notification/const/classNames.js

@@ -1,44 +0,0 @@
-// CSS class names
-export const CLASS_NAMES = {
-    FULL_WIDTH: {
-        BASE: 'ncua-full-width-notification',
-        CONTAINER: 'ncua-full-width-notification__container',
-        CONTENT: 'ncua-full-width-notification__content',
-        CONTENT_WRAPPER: 'ncua-full-width-notification__content-wrapper',
-        ICON: 'ncua-full-width-notification__icon',
-        TEXT_CONTAINER: 'ncua-full-width-notification__text-container',
-        TITLE: 'ncua-full-width-notification__title',
-        SUPPORTING_TEXT: 'ncua-full-width-notification__supporting-text',
-        ACTIONS_CONTAINER: 'ncua-full-width-notification__actions-container',
-        ACTIONS: 'ncua-full-width-notification__actions',
-        CLOSE_BUTTON: 'ncua-full-width-notification__close-button',
-    },
-    FLOATING: {
-        BASE: 'ncua-floating-notification',
-        CONTAINER: 'ncua-floating-notification__container',
-        CONTENT: 'ncua-floating-notification__content',
-        TEXT_CONTAINER: 'ncua-floating-notification__text-container',
-        TITLE_WRAPPER: 'ncua-floating-notification__title-wrapper',
-        TITLE: 'ncua-floating-notification__title',
-        SUPPORTING_TEXT: 'ncua-floating-notification__supporting-text',
-        ACTIONS: 'ncua-floating-notification__actions',
-        CLOSE_BUTTON: 'ncua-floating-notification__close-button',
-    },
-    MESSAGE: {
-        BASE: 'ncua-message-notification',
-        CONTAINER: 'ncua-message-notification__container',
-        CONTENT: 'ncua-message-notification__content',
-        CONTENT_WRAPPER: 'ncua-message-notification__content-wrapper',
-        ICON: 'ncua-message-notification__icon',
-        TEXT_CONTAINER: 'ncua-message-notification__text-container',
-        TITLE: 'ncua-message-notification__title',
-        SUPPORTING_TEXT: 'ncua-message-notification__supporting-text',
-        ACTIONS_CONTAINER: 'ncua-message-notification__actions-container',
-        ACTIONS: 'ncua-message-notification__actions',
-        HIDE_LINK: 'ncua-message-notification__hide-link',
-        CLOSE_BUTTON: 'ncua-message-notification__close-button',
-    },
-    COMMON: {
-        ACTION_BUTTON: 'ncua-notification__action-button',
-    },
-};