no-frills-ui 0.0.14-alpha.4 → 0.0.14-alpha.5

package/lib-esm/shared/LayerManager.js

@@ -2,6 +2,7 @@ import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import React, { useEffect } from 'react';
 import ReactDOM from 'react-dom';
 import styled from '@emotion/styled';
+import { getThemeValue, THEME_NAME } from './constants';
 /** Enums for layer position on screen. */
 export var LAYER_POSITION;
 (function (LAYER_POSITION) {
@@ -44,7 +45,7 @@ const Container = styled.div `
     `
         width: 100%;
         height: 100vh;
-        background-color: var(--backdrop-color, #2681da80);
+        background-color: ${getThemeValue(THEME_NAME.BACKDROP_COLOR)};
         backdrop-filter: blur(0px);
         pointer-events: all;
     `}
@@ -144,6 +145,7 @@ class LayerManager {
             const layerConfig = Object.assign(Object.assign({}, defaultConfig), config);
             // Get the z-index for the new layer
             const currentIndex = layerConfig.alwaysOnTop ? 2147483647 : this.nextIndex++;
+            const className = layerConfig.alwaysOnTop ? 'nf-layer-manager-top' : 'nf-layer-manager';
             // Create a unique ID for tracking this layer
             const layerId = `nf-layer-manager-${currentIndex}`;
             const overlayClickHandler = () => {
@@ -165,6 +167,7 @@ class LayerManager {
                     useEffect(() => {
                         // Create the div element only once when component mounts
                         const div = document.createElement('div');
+                        div.setAttribute('class', className);
                         div.setAttribute('id', layerId);
                         document.body.appendChild(div);
                         // Add layer to stack
@@ -179,8 +182,67 @@ class LayerManager {
                         setTimeout(() => {
                             div.setAttribute('class', 'nf-layer-enter');
                         }, 10);
+                        // Track elements modified for accessibility
+                        const modifiedElements = [];
+                        let originalBodyOverflow = null;
+                        let originalBodyPosition = null;
+                        let originalBodyWidth = null;
+                        let originalBodyTop = null;
+                        let scrollY = 0;
+                        // Apply aria-hidden to siblings and body scroll lock for overlay modals
+                        if (layerConfig.overlay) {
+                            // Hide all body children except this layer portal, scripts, and styles
+                            const bodyChildren = Array.from(document.body.children);
+                            bodyChildren.forEach((child) => {
+                                if (child !== div &&
+                                    child.className !== 'nf-layer-manager-top' &&
+                                    child.tagName !== 'SCRIPT' &&
+                                    child.tagName !== 'STYLE') {
+                                    const hadAriaHidden = child.hasAttribute('aria-hidden');
+                                    const previousValue = child.getAttribute('aria-hidden');
+                                    // Only set aria-hidden if not already hidden
+                                    if (previousValue !== 'true') {
+                                        child.setAttribute('aria-hidden', 'true');
+                                        modifiedElements.push({
+                                            element: child,
+                                            hadAriaHidden,
+                                            previousValue,
+                                        });
+                                    }
+                                }
+                            });
+                            // Prevent body scroll on iOS
+                            scrollY = window.scrollY;
+                            originalBodyOverflow = document.body.style.overflow;
+                            originalBodyPosition = document.body.style.position;
+                            originalBodyWidth = document.body.style.width;
+                            originalBodyTop = document.body.style.top;
+                            document.body.style.overflow = 'hidden';
+                            document.body.style.position = 'fixed';
+                            document.body.style.width = '100%';
+                            document.body.style.top = `-${scrollY}px`;
+                        }
                         // Cleanup function - remove div when component unmounts
                         return () => {
+                            // Restore aria-hidden attributes
+                            modifiedElements.forEach(({ element, hadAriaHidden, previousValue }) => {
+                                if (document.body.contains(element)) {
+                                    if (hadAriaHidden && previousValue !== null) {
+                                        element.setAttribute('aria-hidden', previousValue);
+                                    }
+                                    else {
+                                        element.removeAttribute('aria-hidden');
+                                    }
+                                }
+                            });
+                            // Restore body scroll
+                            if (layerConfig.overlay) {
+                                document.body.style.overflow = originalBodyOverflow || '';
+                                document.body.style.position = originalBodyPosition || '';
+                                document.body.style.width = originalBodyWidth || '';
+                                document.body.style.top = originalBodyTop || '';
+                                window.scrollTo(0, scrollY);
+                            }
                             if (document.body.contains(div)) {
                                 document.body.removeChild(div);
                             }

package/lib-esm/shared/LayerManager.js.map

@@ -1 +1 @@
-{"version":3,"file":"LayerManager.js","sourceRoot":"","sources":["../../src/shared/LayerManager.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { ReactPortal, useEffect } from 'react';\nimport ReactDOM from 'react-dom';\nimport styled from '@emotion/styled';\n\n/** Enums for layer position on screen. */\nexport enum LAYER_POSITION {\n    TOP_LEFT,\n    TOP_CENTER,\n    TOP_RIGHT,\n    BOTTOM_LEFT,\n    BOTTOM_CENTER,\n    BOTTOM_RIGHT,\n    DIALOG,\n}\n\ninterface LayerConfig {\n    /** Show an overlay */\n    overlay?: boolean;\n    /** Element to render inside the layer. */\n    component: JSX.Element;\n    /** Position of the layer */\n    position?: LAYER_POSITION;\n    /** Delay for exit */\n    exitDelay?: number;\n    /** Close layer on `esc` key press. */\n    closeOnEsc?: boolean;\n    /** Close layer overlay is clicked. */\n    closeOnOverlayClick?: boolean;\n    /** Callback called when modal closes */\n    closeCallback?: <T>(resp: T) => void;\n    /** Layer is created with max z-index */\n    alwaysOnTop?: boolean;\n}\n\n/** Default value of config */\nconst defaultConfig: LayerConfig = {\n    closeOnEsc: true,\n    overlay: false,\n    position: LAYER_POSITION.TOP_LEFT,\n    component: null,\n    exitDelay: 0,\n    closeOnOverlayClick: true,\n    alwaysOnTop: false,\n};\n\n/** Metadata of each layer */\ninterface Layer {\n    id: string;\n    config: LayerConfig;\n    element: HTMLDivElement;\n}\n\n/** Styles for each position */\nconst POSITION_STYLE = {\n    [LAYER_POSITION.TOP_LEFT]: 'top: 0; left: 0;',\n    [LAYER_POSITION.TOP_CENTER]: 'top: 0; left: 50%; justify-content: center;',\n    [LAYER_POSITION.TOP_RIGHT]: 'top: 0; right: 0; justify-content: flex-end;',\n    [LAYER_POSITION.BOTTOM_LEFT]: 'bottom: 0; left: 0;',\n    [LAYER_POSITION.BOTTOM_CENTER]: 'bottom: 0; left: 50%; justify-content: center;',\n    [LAYER_POSITION.BOTTOM_RIGHT]: 'bottom: 0; right: 0; justify-content: flex-end;',\n    [LAYER_POSITION.DIALOG]: 'top: 0; left: 0; justify-content: center; align-items: center;',\n};\n\n/** Layer container component. */\nconst Container = styled.div<LayerConfig & { zIndex: number }>`\n    position: fixed;\n    display: flex;\n    opacity: 0;\n    transition: opacity 0.3s ease;\n    ${(props) => POSITION_STYLE[props.position]}\n    ${(props) =>\n        props.overlay &&\n        `\n        width: 100%;\n        height: 100vh;\n        background-color: var(--backdrop-color, #2681da80);\n        backdrop-filter: blur(0px);\n        pointer-events: all;\n    `}\n    z-index: ${(props) => props.zIndex};\n\n    .nf-layer-enter & {\n        opacity: 1;\n        ${(props) =>\n            props.overlay &&\n            `\n            backdrop-filter: blur(3px);\n        `}\n    }\n`;\n\n/** Key code for different keys. */\nconst KEY_CODES = {\n    ESC: 27,\n};\n\n/**\n * This is a shared helper class which manages the z-index of each layer.\n * If a component needs to be rendered in a different layer then this class\n * should be used. It internally maintains the stack of opened layer and each\n * `renderLayer` call will push a new layer in stack.\n *\n * This way we need not worry about the z-index and can freely keep on creating\n * new layers. The staring layer z-index is 10000. Leaving enough z-index for the\n * user if they desires so.\n *\n * @important Usage Pattern\n * To avoid creating duplicate layers (especially in React Strict Mode or Next.js),\n * always call `renderLayer` only once - either in a lifecycle method (like `componentDidUpdate`)\n * or in an imperative method (like `open()`).\n *\n * @example\n * // ❌ Don't call renderLayer in render() method\n * render() {\n *   if (this.state.show) {\n *     const [Component, closeFn] = LayerManager.renderLayer({ ... }); // Creates new layer on every render\n *     return <Component />;\n *   }\n * }\n *\n * @example\n * // ✅ Do call renderLayer once in a method and store the component\n * open() {\n *   const [Component, closeFn] = LayerManager.renderLayer({ ... });\n *   this.setState({ LayerComponent: Component });\n * }\n *\n * render() {\n *   const { LayerComponent } = this.state;\n *   return LayerComponent ? <LayerComponent /> : null;\n * }\n */\nclass LayerManager {\n    /** Layer stack */\n    private layers: Layer[] = [];\n    /** z-index of the next layer */\n    private nextIndex = 10000;\n\n    /**\n     * Constructor simply registers a event listener on body to\n     * react to esc key press.\n     */\n    constructor() {\n        if (typeof document !== 'undefined') {\n            document.body.addEventListener('keyup', (e) => {\n                if (this.layers.length && e.keyCode === KEY_CODES.ESC) {\n                    const lastLayer = this.layers.slice(-1)[0];\n                    if (lastLayer.config.closeOnEsc !== false) {\n                        this.unmount(lastLayer);\n                    }\n                }\n            });\n        }\n    }\n\n    /**\n     * Un-mounts a layer.\n     *\n     * It first adds a class 'nf-layer-exit' and then un-mounts the\n     * layer after the `exitDelay` mentioned in the layer config.\n     * This class will help component in triggering the entry animation.\n     *\n     * @param layer\n     */\n    private unmount = (layer: Layer, resp?: unknown) => {\n        layer.element.setAttribute('class', 'nf-layer-exit');\n        this.layers.splice(\n            this.layers.findIndex((item) => item === layer),\n            1,\n        );\n\n        setTimeout(() => {\n            try {\n                layer.config.closeCallback?.(resp);\n            } catch (e) {\n                // Error in callback function. Ignore and proceed.\n                console.warn(e.message);\n            }\n        }, layer.config.exitDelay);\n    };\n\n    /**\n     * Renders a layer.\n     * @param config\n     */\n    public renderLayer = (\n        config: LayerConfig,\n    ): [() => React.ReactPortal | null, (resp?: unknown) => void] => {\n        // SSR guard\n        if (typeof document === 'undefined') {\n            return [() => null, () => {}];\n        }\n\n        // Merge default config with the provided config.\n        const layerConfig = {\n            ...defaultConfig,\n            ...config,\n        };\n\n        // Get the z-index for the new layer\n        const currentIndex = layerConfig.alwaysOnTop ? 2147483647 : this.nextIndex++;\n\n        // Create a unique ID for tracking this layer\n        const layerId = `nf-layer-manager-${currentIndex}`;\n\n        const overlayClickHandler = () => {\n            const layer = this.layers.find((l) => l.id === layerId);\n            if (layer && layer.config.closeOnOverlayClick !== false) {\n                this.unmount(layer);\n            }\n        };\n\n        const closeFn = (resp?: unknown) => {\n            const layer = this.layers.find((l) => l.id === layerId);\n            if (layer) {\n                this.unmount(layer, resp);\n            }\n        };\n\n        // Return callback which will trigger the un-mount.\n        return [\n            (): ReactPortal | null => {\n                const [divElement, setDivElement] = React.useState<HTMLDivElement | null>(null);\n\n                useEffect(() => {\n                    // Create the div element only once when component mounts\n                    const div = document.createElement('div');\n                    div.setAttribute('id', layerId);\n                    document.body.appendChild(div);\n\n                    // Add layer to stack\n                    const currentLayer = {\n                        id: layerId,\n                        config: layerConfig,\n                        element: div,\n                    };\n                    this.layers.push(currentLayer);\n\n                    setDivElement(div);\n                    // Add entry animation class after a short delay\n                    setTimeout(() => {\n                        div.setAttribute('class', 'nf-layer-enter');\n                    }, 10);\n\n                    // Cleanup function - remove div when component unmounts\n                    return () => {\n                        if (document.body.contains(div)) {\n                            document.body.removeChild(div);\n                        }\n                        // Remove from layers array\n                        const index = this.layers.findIndex((layer) => layer.id === layerId);\n                        if (index !== -1) {\n                            this.layers.splice(index, 1);\n                        }\n                    };\n                }, []); // Empty dependency array - run only once\n\n                if (!divElement) {\n                    return null;\n                }\n\n                return ReactDOM.createPortal(\n                    <Container onClick={overlayClickHandler} zIndex={currentIndex} {...layerConfig}>\n                        {layerConfig.component}\n                    </Container>,\n                    divElement,\n                );\n            },\n            closeFn,\n        ];\n    };\n}\n\n// Return the instance of the class to create a Singleton.\nexport default new LayerManager();\n"]}
+{"version":3,"file":"LayerManager.js","sourceRoot":"","sources":["../../src/shared/LayerManager.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { ReactPortal, useEffect } from 'react';\nimport ReactDOM from 'react-dom';\nimport styled from '@emotion/styled';\nimport { getThemeValue, THEME_NAME } from './constants';\n\n/** Enums for layer position on screen. */\nexport enum LAYER_POSITION {\n    TOP_LEFT,\n    TOP_CENTER,\n    TOP_RIGHT,\n    BOTTOM_LEFT,\n    BOTTOM_CENTER,\n    BOTTOM_RIGHT,\n    DIALOG,\n}\n\ninterface LayerConfig {\n    /** Show an overlay */\n    overlay?: boolean;\n    /** Element to render inside the layer. */\n    component: JSX.Element;\n    /** Position of the layer */\n    position?: LAYER_POSITION;\n    /** Delay for exit */\n    exitDelay?: number;\n    /** Close layer on `esc` key press. */\n    closeOnEsc?: boolean;\n    /** Close layer overlay is clicked. */\n    closeOnOverlayClick?: boolean;\n    /** Callback called when modal closes */\n    closeCallback?: <T>(resp: T) => void;\n    /** Layer is created with max z-index */\n    alwaysOnTop?: boolean;\n}\n\n/** Default value of config */\nconst defaultConfig: LayerConfig = {\n    closeOnEsc: true,\n    overlay: false,\n    position: LAYER_POSITION.TOP_LEFT,\n    component: null,\n    exitDelay: 0,\n    closeOnOverlayClick: true,\n    alwaysOnTop: false,\n};\n\n/** Metadata of each layer */\ninterface Layer {\n    id: string;\n    config: LayerConfig;\n    element: HTMLDivElement;\n}\n\n/** Styles for each position */\nconst POSITION_STYLE = {\n    [LAYER_POSITION.TOP_LEFT]: 'top: 0; left: 0;',\n    [LAYER_POSITION.TOP_CENTER]: 'top: 0; left: 50%; justify-content: center;',\n    [LAYER_POSITION.TOP_RIGHT]: 'top: 0; right: 0; justify-content: flex-end;',\n    [LAYER_POSITION.BOTTOM_LEFT]: 'bottom: 0; left: 0;',\n    [LAYER_POSITION.BOTTOM_CENTER]: 'bottom: 0; left: 50%; justify-content: center;',\n    [LAYER_POSITION.BOTTOM_RIGHT]: 'bottom: 0; right: 0; justify-content: flex-end;',\n    [LAYER_POSITION.DIALOG]: 'top: 0; left: 0; justify-content: center; align-items: center;',\n};\n\n/** Layer container component. */\nconst Container = styled.div<LayerConfig & { zIndex: number }>`\n    position: fixed;\n    display: flex;\n    opacity: 0;\n    transition: opacity 0.3s ease;\n    ${(props) => POSITION_STYLE[props.position]}\n    ${(props) =>\n        props.overlay &&\n        `\n        width: 100%;\n        height: 100vh;\n        background-color: ${getThemeValue(THEME_NAME.BACKDROP_COLOR)};\n        backdrop-filter: blur(0px);\n        pointer-events: all;\n    `}\n    z-index: ${(props) => props.zIndex};\n\n    .nf-layer-enter & {\n        opacity: 1;\n        ${(props) =>\n            props.overlay &&\n            `\n            backdrop-filter: blur(3px);\n        `}\n    }\n`;\n\n/** Key code for different keys. */\nconst KEY_CODES = {\n    ESC: 27,\n};\n\n/**\n * This is a shared helper class which manages the z-index of each layer.\n * If a component needs to be rendered in a different layer then this class\n * should be used. It internally maintains the stack of opened layer and each\n * `renderLayer` call will push a new layer in stack.\n *\n * This way we need not worry about the z-index and can freely keep on creating\n * new layers. The staring layer z-index is 10000. Leaving enough z-index for the\n * user if they desires so.\n *\n * @important Usage Pattern\n * To avoid creating duplicate layers (especially in React Strict Mode or Next.js),\n * always call `renderLayer` only once - either in a lifecycle method (like `componentDidUpdate`)\n * or in an imperative method (like `open()`).\n *\n * @example\n * // ❌ Don't call renderLayer in render() method\n * render() {\n *   if (this.state.show) {\n *     const [Component, closeFn] = LayerManager.renderLayer({ ... }); // Creates new layer on every render\n *     return <Component />;\n *   }\n * }\n *\n * @example\n * // ✅ Do call renderLayer once in a method and store the component\n * open() {\n *   const [Component, closeFn] = LayerManager.renderLayer({ ... });\n *   this.setState({ LayerComponent: Component });\n * }\n *\n * render() {\n *   const { LayerComponent } = this.state;\n *   return LayerComponent ? <LayerComponent /> : null;\n * }\n */\nclass LayerManager {\n    /** Layer stack */\n    private layers: Layer[] = [];\n    /** z-index of the next layer */\n    private nextIndex = 10000;\n\n    /**\n     * Constructor simply registers a event listener on body to\n     * react to esc key press.\n     */\n    constructor() {\n        if (typeof document !== 'undefined') {\n            document.body.addEventListener('keyup', (e) => {\n                if (this.layers.length && e.keyCode === KEY_CODES.ESC) {\n                    const lastLayer = this.layers.slice(-1)[0];\n                    if (lastLayer.config.closeOnEsc !== false) {\n                        this.unmount(lastLayer);\n                    }\n                }\n            });\n        }\n    }\n\n    /**\n     * Un-mounts a layer.\n     *\n     * It first adds a class 'nf-layer-exit' and then un-mounts the\n     * layer after the `exitDelay` mentioned in the layer config.\n     * This class will help component in triggering the entry animation.\n     *\n     * @param layer\n     */\n    private unmount = (layer: Layer, resp?: unknown) => {\n        layer.element.setAttribute('class', 'nf-layer-exit');\n        this.layers.splice(\n            this.layers.findIndex((item) => item === layer),\n            1,\n        );\n\n        setTimeout(() => {\n            try {\n                layer.config.closeCallback?.(resp);\n            } catch (e) {\n                // Error in callback function. Ignore and proceed.\n                console.warn(e.message);\n            }\n        }, layer.config.exitDelay);\n    };\n\n    /**\n     * Renders a layer.\n     * @param config\n     */\n    public renderLayer = (\n        config: LayerConfig,\n    ): [() => React.ReactPortal | null, (resp?: unknown) => void] => {\n        // SSR guard\n        if (typeof document === 'undefined') {\n            return [() => null, () => {}];\n        }\n\n        // Merge default config with the provided config.\n        const layerConfig = {\n            ...defaultConfig,\n            ...config,\n        };\n\n        // Get the z-index for the new layer\n        const currentIndex = layerConfig.alwaysOnTop ? 2147483647 : this.nextIndex++;\n        const className = layerConfig.alwaysOnTop ? 'nf-layer-manager-top' : 'nf-layer-manager';\n\n        // Create a unique ID for tracking this layer\n        const layerId = `nf-layer-manager-${currentIndex}`;\n\n        const overlayClickHandler = () => {\n            const layer = this.layers.find((l) => l.id === layerId);\n            if (layer && layer.config.closeOnOverlayClick !== false) {\n                this.unmount(layer);\n            }\n        };\n\n        const closeFn = (resp?: unknown) => {\n            const layer = this.layers.find((l) => l.id === layerId);\n            if (layer) {\n                this.unmount(layer, resp);\n            }\n        };\n\n        // Return callback which will trigger the un-mount.\n        return [\n            (): ReactPortal | null => {\n                const [divElement, setDivElement] = React.useState<HTMLDivElement | null>(null);\n\n                useEffect(() => {\n                    // Create the div element only once when component mounts\n                    const div = document.createElement('div');\n                    div.setAttribute('class', className);\n                    div.setAttribute('id', layerId);\n                    document.body.appendChild(div);\n\n                    // Add layer to stack\n                    const currentLayer = {\n                        id: layerId,\n                        config: layerConfig,\n                        element: div,\n                    };\n                    this.layers.push(currentLayer);\n\n                    setDivElement(div);\n                    // Add entry animation class after a short delay\n                    setTimeout(() => {\n                        div.setAttribute('class', 'nf-layer-enter');\n                    }, 10);\n\n                    // Track elements modified for accessibility\n                    const modifiedElements: Array<{\n                        element: Element;\n                        hadAriaHidden: boolean;\n                        previousValue: string | null;\n                    }> = [];\n                    let originalBodyOverflow: string | null = null;\n                    let originalBodyPosition: string | null = null;\n                    let originalBodyWidth: string | null = null;\n                    let originalBodyTop: string | null = null;\n                    let scrollY = 0;\n\n                    // Apply aria-hidden to siblings and body scroll lock for overlay modals\n                    if (layerConfig.overlay) {\n                        // Hide all body children except this layer portal, scripts, and styles\n                        const bodyChildren = Array.from(document.body.children);\n                        bodyChildren.forEach((child) => {\n                            if (\n                                child !== div &&\n                                child.className !== 'nf-layer-manager-top' &&\n                                child.tagName !== 'SCRIPT' &&\n                                child.tagName !== 'STYLE'\n                            ) {\n                                const hadAriaHidden = child.hasAttribute('aria-hidden');\n                                const previousValue = child.getAttribute('aria-hidden');\n\n                                // Only set aria-hidden if not already hidden\n                                if (previousValue !== 'true') {\n                                    child.setAttribute('aria-hidden', 'true');\n                                    modifiedElements.push({\n                                        element: child,\n                                        hadAriaHidden,\n                                        previousValue,\n                                    });\n                                }\n                            }\n                        });\n\n                        // Prevent body scroll on iOS\n                        scrollY = window.scrollY;\n                        originalBodyOverflow = document.body.style.overflow;\n                        originalBodyPosition = document.body.style.position;\n                        originalBodyWidth = document.body.style.width;\n                        originalBodyTop = document.body.style.top;\n\n                        document.body.style.overflow = 'hidden';\n                        document.body.style.position = 'fixed';\n                        document.body.style.width = '100%';\n                        document.body.style.top = `-${scrollY}px`;\n                    }\n\n                    // Cleanup function - remove div when component unmounts\n                    return () => {\n                        // Restore aria-hidden attributes\n                        modifiedElements.forEach(({ element, hadAriaHidden, previousValue }) => {\n                            if (document.body.contains(element)) {\n                                if (hadAriaHidden && previousValue !== null) {\n                                    element.setAttribute('aria-hidden', previousValue);\n                                } else {\n                                    element.removeAttribute('aria-hidden');\n                                }\n                            }\n                        });\n\n                        // Restore body scroll\n                        if (layerConfig.overlay) {\n                            document.body.style.overflow = originalBodyOverflow || '';\n                            document.body.style.position = originalBodyPosition || '';\n                            document.body.style.width = originalBodyWidth || '';\n                            document.body.style.top = originalBodyTop || '';\n                            window.scrollTo(0, scrollY);\n                        }\n\n                        if (document.body.contains(div)) {\n                            document.body.removeChild(div);\n                        }\n                        // Remove from layers array\n                        const index = this.layers.findIndex((layer) => layer.id === layerId);\n                        if (index !== -1) {\n                            this.layers.splice(index, 1);\n                        }\n                    };\n                }, []); // Empty dependency array - run only once\n\n                if (!divElement) {\n                    return null;\n                }\n\n                return ReactDOM.createPortal(\n                    <Container onClick={overlayClickHandler} zIndex={currentIndex} {...layerConfig}>\n                        {layerConfig.component}\n                    </Container>,\n                    divElement,\n                );\n            },\n            closeFn,\n        ];\n    };\n}\n\n// Return the instance of the class to create a Singleton.\nexport default new LayerManager();\n"]}

package/lib-esm/shared/constants.d.ts

@@ -1,28 +1,59 @@
-declare const _default: {
-    PRIMARY: string;
-    PRIMARY_LIGHT: string;
-    PRIMARY_LIGHTER: string;
-    BACKDROP_COLOR: string;
-    INFO: string;
-    INFO_LIGHT: string;
-    SUCCESS: string;
-    SUCCESS_LIGHT: string;
-    WARNING: string;
-    WARNING_LIGHT: string;
-    ERROR: string;
-    ERROR_LIGHT: string;
-    BORDER_COLOR: string;
-    TOAST: string;
-    TOOLTIP_COLOR: string;
-    BORDER_LIGHT_COLOR: string;
-    BACKGROUND: string;
-    DISABLED_BACKGROUND: string;
-    DISABLED_BORDER: string;
-    LIGHT_GREY: string;
-    DISABLED: string;
-    SHADOW: string;
-    HOVER_SHADOW: string;
-    MODAL_SHADOW: string;
-};
-export default _default;
+export declare enum THEME_CONSTANTS {
+    PRIMARY = "#1f7ac5",
+    PRIMARY_LIGHT = "#64baff",
+    PRIMARY_LIGHTER = "#cfe9ff",
+    BACKDROP_COLOR = "#2681da80",
+    INFO = "#1f7ac5ff",
+    INFO_LIGHT = "#64baffff",
+    SUCCESS = "#1a835f",
+    SUCCESS_LIGHT = "#80eac6",
+    WARNING = "#916b01",
+    WARNING_LIGHT = "#ffba00",
+    ERROR = "#bb2828",
+    ERROR_LIGHT = "#f1a5a5",
+    BORDER_COLOR = "#555555",
+    TOAST = "#5f5f5f",
+    TOOLTIP_COLOR = "rgba(0,0,0,0.6)",
+    BORDER_LIGHT_COLOR = "#eeeeee",
+    BACKGROUND = "#ffffff",
+    DISABLED_BACKGROUND = "#fafafa",
+    DISABLED_BORDER = "#aaa",
+    LIGHT_GREY = "#ccc",
+    DISABLED = "#737373",
+    TEXT_COLOR_LIGHT = "#fff",
+    TEXT_COLOR_DARK = "#000",
+    SHADOW = "0px 1px 3px 0px rgba(0,0,0,0.1), 0px 1px 2px 0px rgba(0,0,0,0.06)",
+    HOVER_SHADOW = "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
+    MODAL_SHADOW = "0px 8px 17px 2px rgba(0,0,0,0.14), 0px 3px 14px 2px rgba(0,0,0,0.12), 0px 5px 5px -3px rgba(0,0,0,0.2)"
+}
+export declare enum THEME_NAME {
+    PRIMARY = "--nfui-primary",
+    PRIMARY_LIGHT = "--nfui-primary-light",
+    PRIMARY_LIGHTER = "--nfui-primary-lighter",
+    INFO = "--nfui-info",
+    INFO_LIGHT = "--nfui-info-light",
+    SUCCESS = "--nfui-success",
+    SUCCESS_LIGHT = "--nfui-success-light",
+    WARNING = "--nfui-warning",
+    WARNING_LIGHT = "--nfui-warning-light",
+    ERROR = "--nfui-error",
+    ERROR_LIGHT = "--nfui-error-light",
+    BORDER_COLOR = "--nfui-border-color",
+    TOAST = "--nfui-toast",
+    TOOLTIP_COLOR = "--nfui-tooltip-color",
+    BORDER_LIGHT_COLOR = "--nfui-border-light-color",
+    BACKGROUND = "--nfui-background",
+    DISABLED_BACKGROUND = "--nfui-disabled-background",
+    DISABLED_BORDER = "--nfui-disabled-border",
+    LIGHT_GREY = "--nfui-light-grey",
+    DISABLED = "--nfui-disabled",
+    TEXT_COLOR_LIGHT = "--nfui-text-color-light",
+    TEXT_COLOR_DARK = "--nfui-text-color-dark",
+    SHADOW = "--nfui-shadow",
+    HOVER_SHADOW = "--nfui-hover-shadow",
+    MODAL_SHADOW = "--nfui-modal-shadow",
+    BACKDROP_COLOR = "--nfui-backdrop-color"
+}
+export declare const themeNameMap: Record<THEME_NAME, THEME_CONSTANTS>;
+export declare const getThemeValue: (key: THEME_NAME) => string;
 //# sourceMappingURL=constants.d.ts.map

package/lib-esm/shared/constants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../src/shared/constants.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,wBA0BE"}
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../src/shared/constants.ts"],"names":[],"mappings":"AAAA,oBAAY,eAAe;IACvB,OAAO,YAAY;IACnB,aAAa,YAAY;IACzB,eAAe,YAAY;IAC3B,cAAc,cAAc;IAC5B,IAAI,cAAc;IAClB,UAAU,cAAc;IACxB,OAAO,YAAY;IACnB,aAAa,YAAY;IACzB,OAAO,YAAY;IACnB,aAAa,YAAY;IACzB,KAAK,YAAY;IACjB,WAAW,YAAY;IACvB,YAAY,YAAY;IACxB,KAAK,YAAY;IACjB,aAAa,oBAAoB;IACjC,kBAAkB,YAAY;IAC9B,UAAU,YAAY;IACtB,mBAAmB,YAAY;IAC/B,eAAe,SAAS;IACxB,UAAU,SAAS;IACnB,QAAQ,YAAY;IACpB,gBAAgB,SAAS;IACzB,eAAe,SAAS;IACxB,MAAM,sEAAsE;IAC5E,YAAY,0EAA0E;IACtF,YAAY,2GAA2G;CAC1H;AAED,oBAAY,UAAU;IAClB,OAAO,mBAAmB;IAC1B,aAAa,yBAAyB;IACtC,eAAe,2BAA2B;IAC1C,IAAI,gBAAgB;IACpB,UAAU,sBAAsB;IAChC,OAAO,mBAAmB;IAC1B,aAAa,yBAAyB;IACtC,OAAO,mBAAmB;IAC1B,aAAa,yBAAyB;IACtC,KAAK,iBAAiB;IACtB,WAAW,uBAAuB;IAClC,YAAY,wBAAwB;IACpC,KAAK,iBAAiB;IACtB,aAAa,yBAAyB;IACtC,kBAAkB,8BAA8B;IAChD,UAAU,sBAAsB;IAChC,mBAAmB,+BAA+B;IAClD,eAAe,2BAA2B;IAC1C,UAAU,sBAAsB;IAChC,QAAQ,oBAAoB;IAC5B,gBAAgB,4BAA4B;IAC5C,eAAe,2BAA2B;IAC1C,MAAM,kBAAkB;IACxB,YAAY,wBAAwB;IACpC,YAAY,wBAAwB;IACpC,cAAc,0BAA0B;CAC3C;AAED,eAAO,MAAM,YAAY,EAAE,MAAM,CAAC,UAAU,EAAE,eAAe,CA2B5D,CAAC;AAEF,eAAO,MAAM,aAAa,QAAS,UAAU,WAE5C,CAAC"}

package/lib-esm/shared/constants.js

@@ -1,27 +1,90 @@
-export default {
-    PRIMARY: '#1f7ac5',
-    PRIMARY_LIGHT: '#64baff',
-    PRIMARY_LIGHTER: '#cfe9ff',
-    BACKDROP_COLOR: '#2681da80',
-    INFO: '#1d6eaf',
-    INFO_LIGHT: '#64baff',
-    SUCCESS: '#1a835f',
-    SUCCESS_LIGHT: '#80eac6',
-    WARNING: '#916b01',
-    WARNING_LIGHT: '#ffba00',
-    ERROR: '#bb2828',
-    ERROR_LIGHT: '#f1a5a5',
-    BORDER_COLOR: '#555555',
-    TOAST: '#5f5f5f',
-    TOOLTIP_COLOR: 'rgba(0,0,0,0.6)',
-    BORDER_LIGHT_COLOR: '#eeeeee',
-    BACKGROUND: '#ffffff',
-    DISABLED_BACKGROUND: '#fafafa',
-    DISABLED_BORDER: '#aaa',
-    LIGHT_GREY: '#ccc',
-    DISABLED: '#737373',
-    SHADOW: '0px 1px 3px 0px rgba(0,0,0,0.1), 0px 1px 2px 0px rgba(0,0,0,0.06)',
-    HOVER_SHADOW: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
-    MODAL_SHADOW: '0px 8px 17px 2px rgba(0,0,0,0.14), 0px 3px 14px 2px rgba(0,0,0,0.12), 0px 5px 5px -3px rgba(0,0,0,0.2)',
+export var THEME_CONSTANTS;
+(function (THEME_CONSTANTS) {
+    THEME_CONSTANTS["PRIMARY"] = "#1f7ac5";
+    THEME_CONSTANTS["PRIMARY_LIGHT"] = "#64baff";
+    THEME_CONSTANTS["PRIMARY_LIGHTER"] = "#cfe9ff";
+    THEME_CONSTANTS["BACKDROP_COLOR"] = "#2681da80";
+    THEME_CONSTANTS["INFO"] = "#1f7ac5ff";
+    THEME_CONSTANTS["INFO_LIGHT"] = "#64baffff";
+    THEME_CONSTANTS["SUCCESS"] = "#1a835f";
+    THEME_CONSTANTS["SUCCESS_LIGHT"] = "#80eac6";
+    THEME_CONSTANTS["WARNING"] = "#916b01";
+    THEME_CONSTANTS["WARNING_LIGHT"] = "#ffba00";
+    THEME_CONSTANTS["ERROR"] = "#bb2828";
+    THEME_CONSTANTS["ERROR_LIGHT"] = "#f1a5a5";
+    THEME_CONSTANTS["BORDER_COLOR"] = "#555555";
+    THEME_CONSTANTS["TOAST"] = "#5f5f5f";
+    THEME_CONSTANTS["TOOLTIP_COLOR"] = "rgba(0,0,0,0.6)";
+    THEME_CONSTANTS["BORDER_LIGHT_COLOR"] = "#eeeeee";
+    THEME_CONSTANTS["BACKGROUND"] = "#ffffff";
+    THEME_CONSTANTS["DISABLED_BACKGROUND"] = "#fafafa";
+    THEME_CONSTANTS["DISABLED_BORDER"] = "#aaa";
+    THEME_CONSTANTS["LIGHT_GREY"] = "#ccc";
+    THEME_CONSTANTS["DISABLED"] = "#737373";
+    THEME_CONSTANTS["TEXT_COLOR_LIGHT"] = "#fff";
+    THEME_CONSTANTS["TEXT_COLOR_DARK"] = "#000";
+    THEME_CONSTANTS["SHADOW"] = "0px 1px 3px 0px rgba(0,0,0,0.1), 0px 1px 2px 0px rgba(0,0,0,0.06)";
+    THEME_CONSTANTS["HOVER_SHADOW"] = "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)";
+    THEME_CONSTANTS["MODAL_SHADOW"] = "0px 8px 17px 2px rgba(0,0,0,0.14), 0px 3px 14px 2px rgba(0,0,0,0.12), 0px 5px 5px -3px rgba(0,0,0,0.2)";
+})(THEME_CONSTANTS || (THEME_CONSTANTS = {}));
+export var THEME_NAME;
+(function (THEME_NAME) {
+    THEME_NAME["PRIMARY"] = "--nfui-primary";
+    THEME_NAME["PRIMARY_LIGHT"] = "--nfui-primary-light";
+    THEME_NAME["PRIMARY_LIGHTER"] = "--nfui-primary-lighter";
+    THEME_NAME["INFO"] = "--nfui-info";
+    THEME_NAME["INFO_LIGHT"] = "--nfui-info-light";
+    THEME_NAME["SUCCESS"] = "--nfui-success";
+    THEME_NAME["SUCCESS_LIGHT"] = "--nfui-success-light";
+    THEME_NAME["WARNING"] = "--nfui-warning";
+    THEME_NAME["WARNING_LIGHT"] = "--nfui-warning-light";
+    THEME_NAME["ERROR"] = "--nfui-error";
+    THEME_NAME["ERROR_LIGHT"] = "--nfui-error-light";
+    THEME_NAME["BORDER_COLOR"] = "--nfui-border-color";
+    THEME_NAME["TOAST"] = "--nfui-toast";
+    THEME_NAME["TOOLTIP_COLOR"] = "--nfui-tooltip-color";
+    THEME_NAME["BORDER_LIGHT_COLOR"] = "--nfui-border-light-color";
+    THEME_NAME["BACKGROUND"] = "--nfui-background";
+    THEME_NAME["DISABLED_BACKGROUND"] = "--nfui-disabled-background";
+    THEME_NAME["DISABLED_BORDER"] = "--nfui-disabled-border";
+    THEME_NAME["LIGHT_GREY"] = "--nfui-light-grey";
+    THEME_NAME["DISABLED"] = "--nfui-disabled";
+    THEME_NAME["TEXT_COLOR_LIGHT"] = "--nfui-text-color-light";
+    THEME_NAME["TEXT_COLOR_DARK"] = "--nfui-text-color-dark";
+    THEME_NAME["SHADOW"] = "--nfui-shadow";
+    THEME_NAME["HOVER_SHADOW"] = "--nfui-hover-shadow";
+    THEME_NAME["MODAL_SHADOW"] = "--nfui-modal-shadow";
+    THEME_NAME["BACKDROP_COLOR"] = "--nfui-backdrop-color";
+})(THEME_NAME || (THEME_NAME = {}));
+export const themeNameMap = {
+    [THEME_NAME.PRIMARY]: THEME_CONSTANTS.PRIMARY,
+    [THEME_NAME.PRIMARY_LIGHT]: THEME_CONSTANTS.PRIMARY_LIGHT,
+    [THEME_NAME.PRIMARY_LIGHTER]: THEME_CONSTANTS.PRIMARY_LIGHTER,
+    [THEME_NAME.INFO]: THEME_CONSTANTS.INFO,
+    [THEME_NAME.INFO_LIGHT]: THEME_CONSTANTS.INFO_LIGHT,
+    [THEME_NAME.SUCCESS]: THEME_CONSTANTS.SUCCESS,
+    [THEME_NAME.SUCCESS_LIGHT]: THEME_CONSTANTS.SUCCESS_LIGHT,
+    [THEME_NAME.WARNING]: THEME_CONSTANTS.WARNING,
+    [THEME_NAME.WARNING_LIGHT]: THEME_CONSTANTS.WARNING_LIGHT,
+    [THEME_NAME.ERROR]: THEME_CONSTANTS.ERROR,
+    [THEME_NAME.ERROR_LIGHT]: THEME_CONSTANTS.ERROR_LIGHT,
+    [THEME_NAME.BACKDROP_COLOR]: THEME_CONSTANTS.BACKDROP_COLOR,
+    [THEME_NAME.BORDER_COLOR]: THEME_CONSTANTS.BORDER_COLOR,
+    [THEME_NAME.TOAST]: THEME_CONSTANTS.TOAST,
+    [THEME_NAME.TOOLTIP_COLOR]: THEME_CONSTANTS.TOOLTIP_COLOR,
+    [THEME_NAME.BORDER_LIGHT_COLOR]: THEME_CONSTANTS.BORDER_LIGHT_COLOR,
+    [THEME_NAME.BACKGROUND]: THEME_CONSTANTS.BACKGROUND,
+    [THEME_NAME.DISABLED_BACKGROUND]: THEME_CONSTANTS.DISABLED_BACKGROUND,
+    [THEME_NAME.DISABLED_BORDER]: THEME_CONSTANTS.DISABLED_BORDER,
+    [THEME_NAME.LIGHT_GREY]: THEME_CONSTANTS.LIGHT_GREY,
+    [THEME_NAME.DISABLED]: THEME_CONSTANTS.DISABLED,
+    [THEME_NAME.TEXT_COLOR_LIGHT]: THEME_CONSTANTS.TEXT_COLOR_LIGHT,
+    [THEME_NAME.TEXT_COLOR_DARK]: THEME_CONSTANTS.TEXT_COLOR_DARK,
+    [THEME_NAME.SHADOW]: THEME_CONSTANTS.SHADOW,
+    [THEME_NAME.HOVER_SHADOW]: THEME_CONSTANTS.HOVER_SHADOW,
+    [THEME_NAME.MODAL_SHADOW]: THEME_CONSTANTS.MODAL_SHADOW,
+};
+export const getThemeValue = (key) => {
+    return `var(${key}, ${themeNameMap[key]})`;
 };
 //# sourceMappingURL=constants.js.map

package/lib-esm/shared/constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../src/shared/constants.ts"],"names":[],"mappings":"AAAA,eAAe;IACX,OAAO,EAAE,SAAS;IAClB,aAAa,EAAE,SAAS;IACxB,eAAe,EAAE,SAAS;IAC1B,cAAc,EAAE,WAAW;IAC3B,IAAI,EAAE,SAAS;IACf,UAAU,EAAE,SAAS;IACrB,OAAO,EAAE,SAAS;IAClB,aAAa,EAAE,SAAS;IACxB,OAAO,EAAE,SAAS;IAClB,aAAa,EAAE,SAAS;IACxB,KAAK,EAAE,SAAS;IAChB,WAAW,EAAE,SAAS;IACtB,YAAY,EAAE,SAAS;IACvB,KAAK,EAAE,SAAS;IAChB,aAAa,EAAE,iBAAiB;IAChC,kBAAkB,EAAE,SAAS;IAC7B,UAAU,EAAE,SAAS;IACrB,mBAAmB,EAAE,SAAS;IAC9B,eAAe,EAAE,MAAM;IACvB,UAAU,EAAE,MAAM;IAClB,QAAQ,EAAE,SAAS;IACnB,MAAM,EAAE,mEAAmE;IAC3E,YAAY,EAAE,uEAAuE;IACrF,YAAY,EACR,wGAAwG;CAC/G,CAAC","sourcesContent":["export default {\n    PRIMARY: '#1f7ac5',\n    PRIMARY_LIGHT: '#64baff',\n    PRIMARY_LIGHTER: '#cfe9ff',\n    BACKDROP_COLOR: '#2681da80',\n    INFO: '#1d6eaf',\n    INFO_LIGHT: '#64baff',\n    SUCCESS: '#1a835f',\n    SUCCESS_LIGHT: '#80eac6',\n    WARNING: '#916b01',\n    WARNING_LIGHT: '#ffba00',\n    ERROR: '#bb2828',\n    ERROR_LIGHT: '#f1a5a5',\n    BORDER_COLOR: '#555555',\n    TOAST: '#5f5f5f',\n    TOOLTIP_COLOR: 'rgba(0,0,0,0.6)',\n    BORDER_LIGHT_COLOR: '#eeeeee',\n    BACKGROUND: '#ffffff',\n    DISABLED_BACKGROUND: '#fafafa',\n    DISABLED_BORDER: '#aaa',\n    LIGHT_GREY: '#ccc',\n    DISABLED: '#737373',\n    SHADOW: '0px 1px 3px 0px rgba(0,0,0,0.1), 0px 1px 2px 0px rgba(0,0,0,0.06)',\n    HOVER_SHADOW: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',\n    MODAL_SHADOW:\n        '0px 8px 17px 2px rgba(0,0,0,0.14), 0px 3px 14px 2px rgba(0,0,0,0.12), 0px 5px 5px -3px rgba(0,0,0,0.2)',\n};\n"]}
+{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../src/shared/constants.ts"],"names":[],"mappings":"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","sourcesContent":["export enum THEME_CONSTANTS {\n    PRIMARY = '#1f7ac5',\n    PRIMARY_LIGHT = '#64baff',\n    PRIMARY_LIGHTER = '#cfe9ff',\n    BACKDROP_COLOR = '#2681da80',\n    INFO = '#1f7ac5ff',\n    INFO_LIGHT = '#64baffff',\n    SUCCESS = '#1a835f',\n    SUCCESS_LIGHT = '#80eac6',\n    WARNING = '#916b01',\n    WARNING_LIGHT = '#ffba00',\n    ERROR = '#bb2828',\n    ERROR_LIGHT = '#f1a5a5',\n    BORDER_COLOR = '#555555',\n    TOAST = '#5f5f5f',\n    TOOLTIP_COLOR = 'rgba(0,0,0,0.6)',\n    BORDER_LIGHT_COLOR = '#eeeeee',\n    BACKGROUND = '#ffffff',\n    DISABLED_BACKGROUND = '#fafafa',\n    DISABLED_BORDER = '#aaa',\n    LIGHT_GREY = '#ccc',\n    DISABLED = '#737373',\n    TEXT_COLOR_LIGHT = '#fff',\n    TEXT_COLOR_DARK = '#000',\n    SHADOW = '0px 1px 3px 0px rgba(0,0,0,0.1), 0px 1px 2px 0px rgba(0,0,0,0.06)',\n    HOVER_SHADOW = '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',\n    MODAL_SHADOW = '0px 8px 17px 2px rgba(0,0,0,0.14), 0px 3px 14px 2px rgba(0,0,0,0.12), 0px 5px 5px -3px rgba(0,0,0,0.2)',\n}\n\nexport enum THEME_NAME {\n    PRIMARY = '--nfui-primary',\n    PRIMARY_LIGHT = '--nfui-primary-light',\n    PRIMARY_LIGHTER = '--nfui-primary-lighter',\n    INFO = '--nfui-info',\n    INFO_LIGHT = '--nfui-info-light',\n    SUCCESS = '--nfui-success',\n    SUCCESS_LIGHT = '--nfui-success-light',\n    WARNING = '--nfui-warning',\n    WARNING_LIGHT = '--nfui-warning-light',\n    ERROR = '--nfui-error',\n    ERROR_LIGHT = '--nfui-error-light',\n    BORDER_COLOR = '--nfui-border-color',\n    TOAST = '--nfui-toast',\n    TOOLTIP_COLOR = '--nfui-tooltip-color',\n    BORDER_LIGHT_COLOR = '--nfui-border-light-color',\n    BACKGROUND = '--nfui-background',\n    DISABLED_BACKGROUND = '--nfui-disabled-background',\n    DISABLED_BORDER = '--nfui-disabled-border',\n    LIGHT_GREY = '--nfui-light-grey',\n    DISABLED = '--nfui-disabled',\n    TEXT_COLOR_LIGHT = '--nfui-text-color-light',\n    TEXT_COLOR_DARK = '--nfui-text-color-dark',\n    SHADOW = '--nfui-shadow',\n    HOVER_SHADOW = '--nfui-hover-shadow',\n    MODAL_SHADOW = '--nfui-modal-shadow',\n    BACKDROP_COLOR = '--nfui-backdrop-color',\n}\n\nexport const themeNameMap: Record<THEME_NAME, THEME_CONSTANTS> = {\n    [THEME_NAME.PRIMARY]: THEME_CONSTANTS.PRIMARY,\n    [THEME_NAME.PRIMARY_LIGHT]: THEME_CONSTANTS.PRIMARY_LIGHT,\n    [THEME_NAME.PRIMARY_LIGHTER]: THEME_CONSTANTS.PRIMARY_LIGHTER,\n    [THEME_NAME.INFO]: THEME_CONSTANTS.INFO,\n    [THEME_NAME.INFO_LIGHT]: THEME_CONSTANTS.INFO_LIGHT,\n    [THEME_NAME.SUCCESS]: THEME_CONSTANTS.SUCCESS,\n    [THEME_NAME.SUCCESS_LIGHT]: THEME_CONSTANTS.SUCCESS_LIGHT,\n    [THEME_NAME.WARNING]: THEME_CONSTANTS.WARNING,\n    [THEME_NAME.WARNING_LIGHT]: THEME_CONSTANTS.WARNING_LIGHT,\n    [THEME_NAME.ERROR]: THEME_CONSTANTS.ERROR,\n    [THEME_NAME.ERROR_LIGHT]: THEME_CONSTANTS.ERROR_LIGHT,\n    [THEME_NAME.BACKDROP_COLOR]: THEME_CONSTANTS.BACKDROP_COLOR,\n    [THEME_NAME.BORDER_COLOR]: THEME_CONSTANTS.BORDER_COLOR,\n    [THEME_NAME.TOAST]: THEME_CONSTANTS.TOAST,\n    [THEME_NAME.TOOLTIP_COLOR]: THEME_CONSTANTS.TOOLTIP_COLOR,\n    [THEME_NAME.BORDER_LIGHT_COLOR]: THEME_CONSTANTS.BORDER_LIGHT_COLOR,\n    [THEME_NAME.BACKGROUND]: THEME_CONSTANTS.BACKGROUND,\n    [THEME_NAME.DISABLED_BACKGROUND]: THEME_CONSTANTS.DISABLED_BACKGROUND,\n    [THEME_NAME.DISABLED_BORDER]: THEME_CONSTANTS.DISABLED_BORDER,\n    [THEME_NAME.LIGHT_GREY]: THEME_CONSTANTS.LIGHT_GREY,\n    [THEME_NAME.DISABLED]: THEME_CONSTANTS.DISABLED,\n    [THEME_NAME.TEXT_COLOR_LIGHT]: THEME_CONSTANTS.TEXT_COLOR_LIGHT,\n    [THEME_NAME.TEXT_COLOR_DARK]: THEME_CONSTANTS.TEXT_COLOR_DARK,\n    [THEME_NAME.SHADOW]: THEME_CONSTANTS.SHADOW,\n    [THEME_NAME.HOVER_SHADOW]: THEME_CONSTANTS.HOVER_SHADOW,\n    [THEME_NAME.MODAL_SHADOW]: THEME_CONSTANTS.MODAL_SHADOW,\n};\n\nexport const getThemeValue = (key: THEME_NAME) => {\n    return `var(${key}, ${themeNameMap[key]})`;\n};\n"]}

package/lib-esm/shared/styles.d.ts

@@ -5,7 +5,7 @@ export declare const Ellipsis: import("@emotion/styled").StyledComponent<{
 export declare const Header: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, {}>;
 export declare const Body: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;

package/lib-esm/shared/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/shared/styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,QAAQ;;SA0BrB,MAAO,WAAW;2GAtBjB,CAAC;AAEF,eAAO,MAAM,MAAM;;SAoBnB,MAAO,WAAW;yGAdjB,CAAC;AAEF,eAAO,MAAM,IAAI;;SAYjB,MAAO,WAAW;yGARjB,CAAC;AAEF,eAAO,MAAM,MAAM;;SAMnB,MAAO,WAAW;yGADjB,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/shared/styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,QAAQ;;SAuBY,MAAO,WAAW;2GAlBlD,CAAC;AAEF,eAAO,MAAM,MAAM;;SAgBc,MAAO,WAAW;iHAVlD,CAAC;AAEF,eAAO,MAAM,IAAI;;SAQgB,MAAO,WAAW;yGAJlD,CAAC;AAEF,eAAO,MAAM,MAAM;;SAEc,MAAO,WAAW;yGAGlD,CAAC"}

package/lib-esm/shared/styles.js

@@ -1,13 +1,15 @@
 import styled from '@emotion/styled';
+import { getThemeValue, THEME_NAME } from './constants';
 export const Ellipsis = styled.span `
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
+    flex: 1;
 `;
-export const Header = styled.div `
+export const Header = styled.h1 `
     padding: 10px 15px;
     line-height: 26px;
-    border-bottom: 1px solid var(--border-light-color, #eeeeee);
+    border-bottom: 1px solid ${getThemeValue(THEME_NAME.BORDER_LIGHT_COLOR)};
     font-size: 16px;
     font-weight: bold;
 `;
@@ -18,7 +20,7 @@ export const Body = styled.div `
 `;
 export const Footer = styled.div `
     padding: 10px 15px;
-    border-top: 1px solid var(--border-light-color, #eeeeee);
+    border-top: 1px solid ${getThemeValue(THEME_NAME.BORDER_LIGHT_COLOR)};
     display: flex;
     justify-content: flex-end;
 `;

package/lib-esm/shared/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/shared/styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,MAAM,CAAC,MAAM,QAAQ,GAAG,MAAM,CAAC,IAAI,CAAA;;;;CAIlC,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;CAM/B,CAAC;AAEF,MAAM,CAAC,MAAM,IAAI,GAAG,MAAM,CAAC,GAAG,CAAA;;;;CAI7B,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;CAK/B,CAAC","sourcesContent":["import styled from '@emotion/styled';\n\nexport const Ellipsis = styled.span`\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    overflow: hidden;\n`;\n\nexport const Header = styled.div`\n    padding: 10px 15px;\n    line-height: 26px;\n    border-bottom: 1px solid var(--border-light-color, #eeeeee);\n    font-size: 16px;\n    font-weight: bold;\n`;\n\nexport const Body = styled.div`\n    padding: 20px 15px;\n    flex: 1;\n    overflow: auto;\n`;\n\nexport const Footer = styled.div`\n    padding: 10px 15px;\n    border-top: 1px solid var(--border-light-color, #eeeeee);\n    display: flex;\n    justify-content: flex-end;\n`;\n"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/shared/styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAExD,MAAM,CAAC,MAAM,QAAQ,GAAG,MAAM,CAAC,IAAI,CAAA;;;;;CAKlC,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,MAAM,CAAC,EAAE,CAAA;;;+BAGA,aAAa,CAAC,UAAU,CAAC,kBAAkB,CAAC;;;CAG1E,CAAC;AAEF,MAAM,CAAC,MAAM,IAAI,GAAG,MAAM,CAAC,GAAG,CAAA;;;;CAI7B,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,MAAM,CAAC,GAAG,CAAA;;4BAEJ,aAAa,CAAC,UAAU,CAAC,kBAAkB,CAAC;;;CAGvE,CAAC","sourcesContent":["import styled from '@emotion/styled';\nimport { getThemeValue, THEME_NAME } from './constants';\n\nexport const Ellipsis = styled.span`\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    overflow: hidden;\n    flex: 1;\n`;\n\nexport const Header = styled.h1`\n    padding: 10px 15px;\n    line-height: 26px;\n    border-bottom: 1px solid ${getThemeValue(THEME_NAME.BORDER_LIGHT_COLOR)};\n    font-size: 16px;\n    font-weight: bold;\n`;\n\nexport const Body = styled.div`\n    padding: 20px 15px;\n    flex: 1;\n    overflow: auto;\n`;\n\nexport const Footer = styled.div`\n    padding: 10px 15px;\n    border-top: 1px solid ${getThemeValue(THEME_NAME.BORDER_LIGHT_COLOR)};\n    display: flex;\n    justify-content: flex-end;\n`;\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "no-frills-ui",
-    "version": "0.0.14-alpha.4",
+    "version": "0.0.14-alpha.5",
     "description": "React components that are made of styled native components. Mostly!",
     "main": "dist/index.js",
     "module": "lib-esm/index.js",