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

package/lib-esm/components/Stepper/Stepper.js.map

@@ -1 +1 @@
-{"version":3,"file":"Stepper.js","sourceRoot":"","sources":["../../../src/components/Stepper/Stepper.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Children, PropsWithChildren, useState, isValidElement } from 'react';\nimport PropTypes from 'prop-types';\nimport styled from '@emotion/styled';\nimport constants from '../../shared/constants';\nimport { Ellipsis } from '../../shared/styles';\nimport { Badge, BADGE_TYPE } from '../Badge';\n\ntype StepperProps = PropsWithChildren<{\n    active: number;\n    onStepClick?: (index: number) => void;\n}>;\n\nconst Container = styled.div`\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    min-height: 400px;\n`;\n\nconst Header = styled.div`\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n    border-bottom: 1px solid var(--border-light-color, ${constants.BORDER_LIGHT_COLOR});\n\n    @media (min-width: 601px) {\n        &::before {\n            position: absolute;\n            top: 25px;\n            left: 0;\n            right: 0;\n            height: 2px;\n            background-color: var(--light-grey, ${constants.LIGHT_GREY});\n            content: ' ';\n            z-index: 0;\n        }\n    }\n\n    & > * {\n        z-index: 1;\n    }\n`;\n\nconst HeaderButton = styled.button<{ active: boolean }>`\n    border: none;\n    padding: 16px 24px 16px 16px;\n    font-size: 16px;\n    cursor: pointer;\n    background-color: ${(props) =>\n        props.active\n            ? `var(--border-light-color, ${constants.BORDER_LIGHT_COLOR})`\n            : `var(--background, ${constants.BACKGROUND})`};\n    font-weight: ${(props) => (props.active ? 'bold' : 'normal')};\n    overflow: hidden;\n    display: flex;\n    align-items: center;\n\n    &:disabled {\n        cursor: not-allowed;\n        background-color: var(--disabled-background, ${constants.DISABLED_BACKGROUND});\n    }\n\n    &:enabled:hover,\n    &:focus {\n        background-color: var(--primary-light, ${constants.PRIMARY_LIGHTER});\n    }\n\n    @media (max-width: 600px) {\n        & {\n            display: none;\n        }\n    }\n`;\n\nconst MobileHeader = styled.div`\n    padding: 16px;\n    font-size: 16px;\n    line-height: 18px;\n    align-items: center;\n    font-weight: bold;\n    flex: 1;\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n\n    @media (min-width: 601px) {\n        & {\n            display: none;\n        }\n    }\n`;\n\nexport default function Stepper(props: StepperProps) {\n    const [active, setActive] = useState(props.active);\n    const { children, onStepClick } = props;\n    const childrenArray = Children.toArray(children);\n\n    const stepClickHandler = (index: number) => () => {\n        setActive(index);\n        onStepClick?.(index);\n    };\n\n    const getBadgeType = (index: number, completed: boolean, disabled: boolean) => {\n        if (disabled) {\n            return BADGE_TYPE.DISABLED;\n        } else if (index === active) {\n            return BADGE_TYPE.PRIMARY;\n        } else if (completed) {\n            return BADGE_TYPE.SUCCESS;\n        }\n        return BADGE_TYPE.DISABLED;\n    };\n\n    return (\n        <Container>\n            <Header>\n                {Children.map(children, (child, index) => {\n                    if (!isValidElement(child)) return null;\n                    return (\n                        <>\n                            <HeaderButton\n                                active={index === active}\n                                type=\"button\"\n                                disabled={child.props.disabled}\n                                onClick={stepClickHandler(index)}\n                            >\n                                <Badge\n                                    inline\n                                    type={getBadgeType(\n                                        index,\n                                        child.props.completed,\n                                        child.props.disabled,\n                                    )}\n                                />\n                                <Ellipsis>{child.props.name}</Ellipsis>\n                            </HeaderButton>\n                        </>\n                    );\n                })}\n                <MobileHeader>\n                    <span>\n                        {isValidElement(childrenArray[active])\n                            ? childrenArray[active].props.name\n                            : ''}\n                    </span>\n                    <Badge inline type={BADGE_TYPE.PRIMARY}>\n                        {active + 1} of {Children.count(children)}\n                    </Badge>\n                </MobileHeader>\n            </Header>\n            {childrenArray[active]}\n        </Container>\n    );\n}\n\nStepper.propTypes = {\n    /** Index of currently active step */\n    active: PropTypes.number,\n    /** Callback function for click event on a step */\n    onStepClick: PropTypes.func,\n};\n\nStepper.defaultProps = {\n    active: 0,\n};\n"]}
+{"version":3,"file":"Stepper.js","sourceRoot":"","sources":["../../../src/components/Stepper/Stepper.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Children, PropsWithChildren, useState, isValidElement } from 'react';\nimport PropTypes from 'prop-types';\nimport styled from '@emotion/styled';\nimport { getThemeValue, THEME_NAME } from '../../shared/constants';\nimport { Ellipsis } from '../../shared/styles';\nimport { Badge, BADGE_TYPE } from '../Badge';\n\ntype StepperProps = PropsWithChildren<{\n    active: number;\n    onStepClick?: (index: number) => void;\n}>;\n\nconst Container = styled.div`\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    min-height: 400px;\n`;\n\nconst Header = styled.div`\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n    border-bottom: 1px solid ${getThemeValue(THEME_NAME.BORDER_LIGHT_COLOR)};\n\n    @media (min-width: 601px) {\n        &::before {\n            position: absolute;\n            top: 25px;\n            left: 0;\n            right: 0;\n            height: 2px;\n            background-color: ${getThemeValue(THEME_NAME.LIGHT_GREY)};\n            content: ' ';\n            z-index: 0;\n        }\n    }\n\n    & > * {\n        z-index: 1;\n    }\n`;\n\nconst HeaderButton = styled.button<{ active: boolean }>`\n    border: none;\n    padding: 16px 24px 16px 16px;\n    font-size: 16px;\n    cursor: pointer;\n    background-color: ${(props) =>\n        props.active\n            ? getThemeValue(THEME_NAME.BORDER_LIGHT_COLOR)\n            : getThemeValue(THEME_NAME.BACKGROUND)};\n    font-weight: ${(props) => (props.active ? 'bold' : 'normal')};\n    overflow: hidden;\n    display: flex;\n    align-items: center;\n    color: ${getThemeValue(THEME_NAME.TEXT_COLOR_DARK)};\n\n    &:disabled {\n        cursor: not-allowed;\n        background-color: ${getThemeValue(THEME_NAME.DISABLED_BACKGROUND)};\n    }\n\n    &:enabled:hover,\n    &:focus {\n        background-color: ${getThemeValue(THEME_NAME.PRIMARY_LIGHTER)};\n    }\n\n    @media (max-width: 600px) {\n        & {\n            display: none;\n        }\n    }\n`;\n\nconst MobileHeader = styled.div`\n    padding: 16px;\n    font-size: 16px;\n    line-height: 18px;\n    align-items: center;\n    font-weight: bold;\n    flex: 1;\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n\n    @media (min-width: 601px) {\n        & {\n            display: none;\n        }\n    }\n`;\n\nexport default function Stepper(props: StepperProps) {\n    const [active, setActive] = useState(props.active);\n    const { children, onStepClick } = props;\n    const childrenArray = Children.toArray(children);\n    const stepRefs = [] as Array<HTMLButtonElement | null>;\n\n    const stepClickHandler = (index: number) => () => {\n        setActive(index);\n        onStepClick?.(index);\n        // Move focus to the active step\n        stepRefs[index]?.focus();\n    };\n\n    const getBadgeType = (index: number, completed: boolean, disabled: boolean) => {\n        if (disabled) {\n            return BADGE_TYPE.DISABLED;\n        } else if (index === active) {\n            return BADGE_TYPE.PRIMARY;\n        } else if (completed) {\n            return BADGE_TYPE.SUCCESS;\n        }\n        return BADGE_TYPE.DISABLED;\n    };\n\n    // Keyboard navigation for step buttons\n    const onStepKeyDown = (index: number) => (e: React.KeyboardEvent<HTMLButtonElement>) => {\n        if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {\n            e.preventDefault();\n            const next = (index + 1) % childrenArray.length;\n            stepRefs[next]?.focus();\n        } else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {\n            e.preventDefault();\n            const prev = (index - 1 + childrenArray.length) % childrenArray.length;\n            stepRefs[prev]?.focus();\n        }\n    };\n\n    return (\n        <Container>\n            <Header role=\"tablist\" aria-label=\"Stepper Steps\">\n                {Children.map(children, (child, index) => {\n                    if (!isValidElement(child)) return null;\n                    return (\n                        <HeaderButton\n                            ref={(el) => (stepRefs[index] = el)}\n                            active={index === active}\n                            type=\"button\"\n                            role=\"tab\"\n                            aria-selected={index === active}\n                            aria-disabled={!!child.props.disabled}\n                            tabIndex={index === active ? 0 : -1}\n                            disabled={child.props.disabled}\n                            onClick={stepClickHandler(index)}\n                            onKeyDown={onStepKeyDown(index)}\n                        >\n                            <Badge\n                                inline\n                                type={getBadgeType(\n                                    index,\n                                    child.props.completed,\n                                    child.props.disabled,\n                                )}\n                            />\n                            <Ellipsis>{child.props.name}</Ellipsis>\n                        </HeaderButton>\n                    );\n                })}\n                <MobileHeader>\n                    <span>\n                        {isValidElement(childrenArray[active])\n                            ? childrenArray[active].props.name\n                            : ''}\n                    </span>\n                    <Badge inline type={BADGE_TYPE.PRIMARY}>\n                        {active + 1} of {Children.count(children)}\n                    </Badge>\n                </MobileHeader>\n            </Header>\n            {childrenArray[active]}\n        </Container>\n    );\n}\n\nStepper.propTypes = {\n    /** Index of currently active step */\n    active: PropTypes.number,\n    /** Callback function for click event on a step */\n    onStepClick: PropTypes.func,\n};\n\nStepper.defaultProps = {\n    active: 0,\n};\n"]}

package/lib-esm/components/Tabs/Tabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiC,iBAAiB,EAAkB,MAAM,OAAO,CAAC;AACzF,OAAO,SAAS,MAAM,YAAY,CAAC;AAyCnC,KAAK,UAAU,GAAG,iBAAiB,CAAC;IAChC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC,CAAC;AAEH,iBAAwB,IAAI,CAAC,KAAK,EAAE,UAAU,oDA2B7C;kBA3BuB,IAAI;;QA8BxB,uBAAuB;;QAEvB,6BAA6B;;QAE7B,8CAA8C;;QAE9C,2CAA2C;;;;;;;eApCvB,IAAI"}
+{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiC,iBAAiB,EAAkB,MAAM,OAAO,CAAC;AACzF,OAAO,SAAS,MAAM,YAAY,CAAC;AA4CnC,KAAK,UAAU,GAAG,iBAAiB,CAAC;IAChC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC,CAAC;AAEH,iBAAwB,IAAI,CAAC,KAAK,EAAE,UAAU,oDA2E7C;kBA3EuB,IAAI;;QA8ExB,uBAAuB;;QAEvB,6BAA6B;;QAE7B,8CAA8C;;QAE9C,2CAA2C;;;;;;;eApFvB,IAAI"}

package/lib-esm/components/Tabs/Tabs.js

@@ -2,33 +2,35 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/reac
 import { useState, Children, useEffect, isValidElement } from 'react';
 import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
-import constants from '../../shared/constants';
+import { getThemeValue, THEME_NAME } from '../../shared/constants';
 const Button = styled.button `
     background-color: transparent;
     border: none;
     padding: 8px 12px;
     font-size: 14px;
     border-radius: 3px 3px 0 0;
-    border-bottom: ${(props) => props.active ? `3px solid var(--primary, ${constants.PRIMARY})` : 'none'};
-    color: ${(props) => (props.active ? `var(--primary, ${constants.PRIMARY})` : '#000')};
+    border-bottom: ${(props) => props.active ? `3px solid ${getThemeValue(THEME_NAME.PRIMARY)}` : 'none'};
+    color: ${(props) => props.active
+    ? getThemeValue(THEME_NAME.PRIMARY)
+    : getThemeValue(THEME_NAME.TEXT_COLOR_DARK)};
     cursor: pointer;
 
     &:hover,
     &:focus {
-        background-color: var(--primary-lighter, #cfe9ff);
+        background-color: ${getThemeValue(THEME_NAME.PRIMARY_LIGHTER)};
         border-bottom: ${(props) => props.active
-    ? `3px solid var(--primary, ${constants.PRIMARY})`
-    : `3px solid var(--primary, ${constants.PRIMARY})`};
+    ? `3px solid ${getThemeValue(THEME_NAME.PRIMARY)}`
+    : `3px solid ${getThemeValue(THEME_NAME.PRIMARY)}`};
     }
 
     &[disabled] {
-        background-color: var(--disabled-background, ${constants.DISABLED_BACKGROUND});
-        color: var(--disabled, ${constants.DISABLED});
-        border-bottom: 3px solid var(--disabled-border, ${constants.DISABLED_BORDER});
+        background-color: ${getThemeValue(THEME_NAME.DISABLED_BACKGROUND)};
+        color: ${getThemeValue(THEME_NAME.DISABLED)};
+        border-bottom: 3px solid ${getThemeValue(THEME_NAME.DISABLED_BORDER)};
     }
 `;
 const ButtonContainer = styled.div `
-    border-bottom: 1px solid var(--disabled-border, ${constants.DISABLED_BORDER});
+    border-bottom: 1px solid ${getThemeValue(THEME_NAME.DISABLED_BORDER)};
     margin-bottom: 5px;
     position: relative;
 `;
@@ -37,14 +39,45 @@ const TabBody = styled.div `
 `;
 export default function Tabs(props) {
     const [active, setActive] = useState(props.active);
-    const switchTab = (index) => () => setActive(index);
     const { children } = props;
+    const tabRefs = [];
+    const childrenArray = Children.toArray(children);
+    const switchTab = (index) => () => {
+        var _a, _b;
+        setActive(index);
+        (_a = tabRefs[index]) === null || _a === void 0 ? void 0 : _a.focus();
+        (_b = props.onChange) === null || _b === void 0 ? void 0 : _b.call(props, index);
+    };
+    // Keyboard navigation for tab buttons
+    const onTabKeyDown = (index) => (e) => {
+        var _a, _b;
+        if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
+            e.preventDefault();
+            const next = (index + 1) % childrenArray.length;
+            (_a = tabRefs[next]) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+        else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
+            e.preventDefault();
+            const prev = (index - 1 + childrenArray.length) % childrenArray.length;
+            (_b = tabRefs[prev]) === null || _b === void 0 ? void 0 : _b.focus();
+        }
+    };
     useEffect(() => {
         var _a;
         setActive(props.active);
         (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, props.active);
     }, [props]);
-    return (_jsxs(_Fragment, { children: [_jsx(ButtonContainer, Object.assign({}, props.props, { children: Children.map(children, (child, index) => (_jsx(Button, { type: "button", active: active === index, onClick: switchTab(index), disabled: isValidElement(child) ? child.props.disabled : false, children: isValidElement(child) ? child.props.name : '' }))) })), _jsx(TabBody, Object.assign({}, props.bodyProps, { children: Children.toArray(children)[active] }))] }));
+    // Generate unique IDs for tabs and panels using sanitized tab name and index
+    const sanitize = (str) => str.replace(/[^a-zA-Z0-9_-]/g, '').toLowerCase();
+    const tabIds = childrenArray.map((child, i) => {
+        const name = isValidElement(child) && child.props.name ? child.props.name : `tab${i}`;
+        return `nfui-tab-${sanitize(name)}-${i}`;
+    });
+    const panelIds = childrenArray.map((child, i) => {
+        const name = isValidElement(child) && child.props.name ? child.props.name : `tab${i}`;
+        return `nfui-tabpanel-${sanitize(name)}-${i}`;
+    });
+    return (_jsxs(_Fragment, { children: [_jsx(ButtonContainer, Object.assign({ role: "tablist", "aria-label": "Tabs" }, props.props, { children: childrenArray.map((child, index) => (_jsx(Button, { ref: (el) => (tabRefs[index] = el), id: tabIds[index], type: "button", role: "tab", "aria-selected": active === index, "aria-controls": panelIds[index], tabIndex: active === index ? 0 : -1, active: active === index, onClick: switchTab(index), onKeyDown: onTabKeyDown(index), disabled: isValidElement(child) ? child.props.disabled : false, "aria-disabled": isValidElement(child) ? child.props.disabled : false, children: isValidElement(child) ? child.props.name : '' }, tabIds[index]))) })), _jsx(TabBody, Object.assign({ id: panelIds[active], role: "tabpanel", "aria-labelledby": tabIds[active], tabIndex: 0 }, props.bodyProps, { children: childrenArray[active] }))] }));
 }
 Tabs.propTypes = {
     /** Active Tab Index */

package/lib-esm/components/Tabs/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.js","sourceRoot":"","sources":["../../../src/components/Tabs/Tabs.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState, Children, useEffect, PropsWithChildren, isValidElement } from 'react';\nimport PropTypes from 'prop-types';\nimport styled from '@emotion/styled';\nimport constants from '../../shared/constants';\n\nconst Button = styled.button<{ active: boolean }>`\n    background-color: transparent;\n    border: none;\n    padding: 8px 12px;\n    font-size: 14px;\n    border-radius: 3px 3px 0 0;\n    border-bottom: ${(props) =>\n        props.active ? `3px solid var(--primary, ${constants.PRIMARY})` : 'none'};\n    color: ${(props) => (props.active ? `var(--primary, ${constants.PRIMARY})` : '#000')};\n    cursor: pointer;\n\n    &:hover,\n    &:focus {\n        background-color: var(--primary-lighter, #cfe9ff);\n        border-bottom: ${(props) =>\n            props.active\n                ? `3px solid var(--primary, ${constants.PRIMARY})`\n                : `3px solid var(--primary, ${constants.PRIMARY})`};\n    }\n\n    &[disabled] {\n        background-color: var(--disabled-background, ${constants.DISABLED_BACKGROUND});\n        color: var(--disabled, ${constants.DISABLED});\n        border-bottom: 3px solid var(--disabled-border, ${constants.DISABLED_BORDER});\n    }\n`;\n\nconst ButtonContainer = styled.div`\n    border-bottom: 1px solid var(--disabled-border, ${constants.DISABLED_BORDER});\n    margin-bottom: 5px;\n    position: relative;\n`;\n\nconst TabBody = styled.div`\n    min-height: 150px;\n`;\n\ntype ITabsProps = PropsWithChildren<{\n    active?: number;\n    onChange?: (index: number) => void;\n    props?: object;\n    bodyProps?: object;\n}>;\n\nexport default function Tabs(props: ITabsProps) {\n    const [active, setActive] = useState(props.active);\n    const switchTab = (index: number) => () => setActive(index);\n    const { children } = props;\n\n    useEffect(() => {\n        setActive(props.active);\n        props.onChange?.(props.active);\n    }, [props]);\n\n    return (\n        <>\n            <ButtonContainer {...props.props}>\n                {Children.map(children, (child, index) => (\n                    <Button\n                        type=\"button\"\n                        active={active === index}\n                        onClick={switchTab(index)}\n                        disabled={isValidElement(child) ? child.props.disabled : false}\n                    >\n                        {isValidElement(child) ? child.props.name : ''}\n                    </Button>\n                ))}\n            </ButtonContainer>\n            <TabBody {...props.bodyProps}>{Children.toArray(children)[active]}</TabBody>\n        </>\n    );\n}\n\nTabs.propTypes = {\n    /** Active Tab Index */\n    active: PropTypes.number,\n    /** OnChange event handler */\n    onChange: PropTypes.func,\n    /** Props for div that contains tab buttons */\n    props: PropTypes.object,\n    /** Props for div that contains tab body */\n    bodyProps: PropTypes.object,\n};\n\nTabs.defaultProps = {\n    active: 0,\n};\n"]}
+{"version":3,"file":"Tabs.js","sourceRoot":"","sources":["../../../src/components/Tabs/Tabs.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState, Children, useEffect, PropsWithChildren, isValidElement } from 'react';\nimport PropTypes from 'prop-types';\nimport styled from '@emotion/styled';\nimport { getThemeValue, THEME_NAME } from '../../shared/constants';\n\nconst Button = styled.button<{ active: boolean }>`\n    background-color: transparent;\n    border: none;\n    padding: 8px 12px;\n    font-size: 14px;\n    border-radius: 3px 3px 0 0;\n    border-bottom: ${(props) =>\n        props.active ? `3px solid ${getThemeValue(THEME_NAME.PRIMARY)}` : 'none'};\n    color: ${(props) =>\n        props.active\n            ? getThemeValue(THEME_NAME.PRIMARY)\n            : getThemeValue(THEME_NAME.TEXT_COLOR_DARK)};\n    cursor: pointer;\n\n    &:hover,\n    &:focus {\n        background-color: ${getThemeValue(THEME_NAME.PRIMARY_LIGHTER)};\n        border-bottom: ${(props) =>\n            props.active\n                ? `3px solid ${getThemeValue(THEME_NAME.PRIMARY)}`\n                : `3px solid ${getThemeValue(THEME_NAME.PRIMARY)}`};\n    }\n\n    &[disabled] {\n        background-color: ${getThemeValue(THEME_NAME.DISABLED_BACKGROUND)};\n        color: ${getThemeValue(THEME_NAME.DISABLED)};\n        border-bottom: 3px solid ${getThemeValue(THEME_NAME.DISABLED_BORDER)};\n    }\n`;\n\nconst ButtonContainer = styled.div`\n    border-bottom: 1px solid ${getThemeValue(THEME_NAME.DISABLED_BORDER)};\n    margin-bottom: 5px;\n    position: relative;\n`;\n\nconst TabBody = styled.div`\n    min-height: 150px;\n`;\n\ntype ITabsProps = PropsWithChildren<{\n    active?: number;\n    onChange?: (index: number) => void;\n    props?: object;\n    bodyProps?: object;\n}>;\n\nexport default function Tabs(props: ITabsProps) {\n    const [active, setActive] = useState(props.active);\n    const { children } = props;\n    const tabRefs = [] as Array<HTMLButtonElement | null>;\n    const childrenArray = Children.toArray(children);\n\n    const switchTab = (index: number) => () => {\n        setActive(index);\n        tabRefs[index]?.focus();\n        props.onChange?.(index);\n    };\n\n    // Keyboard navigation for tab buttons\n    const onTabKeyDown = (index: number) => (e: React.KeyboardEvent<HTMLButtonElement>) => {\n        if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {\n            e.preventDefault();\n            const next = (index + 1) % childrenArray.length;\n            tabRefs[next]?.focus();\n        } else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {\n            e.preventDefault();\n            const prev = (index - 1 + childrenArray.length) % childrenArray.length;\n            tabRefs[prev]?.focus();\n        }\n    };\n\n    useEffect(() => {\n        setActive(props.active);\n        props.onChange?.(props.active);\n    }, [props]);\n\n    // Generate unique IDs for tabs and panels using sanitized tab name and index\n    const sanitize = (str: string) => str.replace(/[^a-zA-Z0-9_-]/g, '').toLowerCase();\n    const tabIds = childrenArray.map((child, i) => {\n        const name = isValidElement(child) && child.props.name ? child.props.name : `tab${i}`;\n        return `nfui-tab-${sanitize(name)}-${i}`;\n    });\n    const panelIds = childrenArray.map((child, i) => {\n        const name = isValidElement(child) && child.props.name ? child.props.name : `tab${i}`;\n        return `nfui-tabpanel-${sanitize(name)}-${i}`;\n    });\n\n    return (\n        <>\n            <ButtonContainer role=\"tablist\" aria-label=\"Tabs\" {...props.props}>\n                {childrenArray.map((child, index) => (\n                    <Button\n                        key={tabIds[index]}\n                        ref={(el) => (tabRefs[index] = el)}\n                        id={tabIds[index]}\n                        type=\"button\"\n                        role=\"tab\"\n                        aria-selected={active === index}\n                        aria-controls={panelIds[index]}\n                        tabIndex={active === index ? 0 : -1}\n                        active={active === index}\n                        onClick={switchTab(index)}\n                        onKeyDown={onTabKeyDown(index)}\n                        disabled={isValidElement(child) ? child.props.disabled : false}\n                        aria-disabled={isValidElement(child) ? child.props.disabled : false}\n                    >\n                        {isValidElement(child) ? child.props.name : ''}\n                    </Button>\n                ))}\n            </ButtonContainer>\n            <TabBody\n                id={panelIds[active]}\n                role=\"tabpanel\"\n                aria-labelledby={tabIds[active]}\n                tabIndex={0}\n                {...props.bodyProps}\n            >\n                {childrenArray[active]}\n            </TabBody>\n        </>\n    );\n}\n\nTabs.propTypes = {\n    /** Active Tab Index */\n    active: PropTypes.number,\n    /** OnChange event handler */\n    onChange: PropTypes.func,\n    /** Props for div that contains tab buttons */\n    props: PropTypes.object,\n    /** Props for div that contains tab body */\n    bodyProps: PropTypes.object,\n};\n\nTabs.defaultProps = {\n    active: 0,\n};\n"]}

package/lib-esm/components/Toast/Toast.d.ts

@@ -14,21 +14,42 @@ export declare enum TOAST_TYPE {
 }
 declare class Toast {
     private element;
+    private ariaLiveContainer;
     private toast;
     private timeout;
     private root;
+    private politeRegion;
+    private assertiveRegion;
+    private isPaused;
+    private currentOptions;
     constructor();
+    /**
+     * Set up keyboard listener for dismissing toast with Escape key
+     */
+    private setupKeyboardListeners;
+    /**
+     * Handle keyboard events for toast interaction
+     */
+    private handleKeyDown;
+    /**
+     * Update the appropriate live region with toast content
+     */
+    private updateLiveRegion;
     remove: () => void;
+    /**
+     * Pause toast auto-dismiss
+     */
+    private pauseTimeout;
+    /**
+     * Resume toast auto-dismiss
+     */
+    private resumeTimeout;
     /**
      * Pause toast when user is hovering over it.
-     *
-     * @param id
      */
     pause: () => void;
     /**
      * Restart the removal of toast.
-     *
-     * @param id
      */
     resume: (options: ToastOptions) => () => void;
     add(options: ToastOptions): void;

package/lib-esm/components/Toast/Toast.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../../src/components/Toast/Toast.tsx"],"names":[],"mappings":"AAMA,MAAM,WAAW,YAAY;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,UAAU,CAAC;CACrB;AAED,oBAAY,UAAU;IAClB,MAAM,WAAW;IACjB,IAAI,SAAS;IACb,OAAO,YAAY;IACnB,OAAO,YAAY;IACnB,MAAM,WAAW;CACpB;AAuED,cAAM,KAAK;IACP,OAAO,CAAC,OAAO,CAAiB;IAChC,OAAO,CAAC,KAAK,CAA8C;IAC3D,OAAO,CAAC,OAAO,CAAiB;IAChC,OAAO,CAAC,IAAI,CAAO;;IAMZ,MAAM,aAaX;IAEF;;;;OAIG;IACI,KAAK,aAEV;IAEF;;;;OAIG;IACI,MAAM,YAAa,YAAY,gBAIpC;IAEK,GAAG,CAAC,OAAO,EAAE,YAAY;CAkCnC;;AAED,wBAA2B"}
+{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../../src/components/Toast/Toast.tsx"],"names":[],"mappings":"AAMA,MAAM,WAAW,YAAY;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,UAAU,CAAC;CACrB;AAED,oBAAY,UAAU;IAClB,MAAM,WAAW;IACjB,IAAI,SAAS;IACb,OAAO,YAAY;IACnB,OAAO,YAAY;IACnB,MAAM,WAAW;CACpB;AA0FD,cAAM,KAAK;IACP,OAAO,CAAC,OAAO,CAAiB;IAChC,OAAO,CAAC,iBAAiB,CAAiB;IAC1C,OAAO,CAAC,KAAK,CAA8C;IAC3D,OAAO,CAAC,OAAO,CAAiB;IAChC,OAAO,CAAC,IAAI,CAAO;IACnB,OAAO,CAAC,YAAY,CAAiB;IACrC,OAAO,CAAC,eAAe,CAAiB;IACxC,OAAO,CAAC,QAAQ,CAAkB;IAClC,OAAO,CAAC,cAAc,CAA6B;;IAkBnD;;OAEG;IACH,OAAO,CAAC,sBAAsB,CAI5B;IAEF;;OAEG;IACH,OAAO,CAAC,aAAa,CAgBnB;IAEF;;OAEG;IACH,OAAO,CAAC,gBAAgB,CAYtB;IAEK,MAAM,aAaX;IAEF;;OAEG;IACH,OAAO,CAAC,YAAY,CAKlB;IAEF;;OAEG;IACH,OAAO,CAAC,aAAa,CAOnB;IAEF;;OAEG;IACI,KAAK,aAEV;IAEF;;OAEG;IACI,MAAM,YAAa,YAAY,gBAGpC;IAEK,GAAG,CAAC,OAAO,EAAE,YAAY;CAoDnC;;AAED,wBAA2B"}

package/lib-esm/components/Toast/Toast.js

@@ -1,7 +1,7 @@
-import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
 import { createRoot } from 'react-dom/client';
 import styled from '@emotion/styled';
-import constants from '../../shared/constants';
+import { getThemeValue, THEME_NAME } from '../../shared/constants';
 import LayerManager, { LAYER_POSITION } from '../../shared/LayerManager';
 import { Card } from '../Card';
 export var TOAST_TYPE;
@@ -15,15 +15,15 @@ export var TOAST_TYPE;
 const getBackgroundColor = (type) => {
     switch (type) {
         case TOAST_TYPE.INFO:
-            return `var(--info, ${constants.INFO})`;
+            return getThemeValue(THEME_NAME.INFO);
         case TOAST_TYPE.SUCCESS:
-            return `var(--success, ${constants.SUCCESS})`;
+            return getThemeValue(THEME_NAME.SUCCESS);
         case TOAST_TYPE.WARNING:
-            return `var(--warning, ${constants.WARNING})`;
+            return getThemeValue(THEME_NAME.WARNING);
         case TOAST_TYPE.DANGER:
-            return `var(--error, ${constants.ERROR})`;
+            return getThemeValue(THEME_NAME.ERROR);
         case TOAST_TYPE.NORMAL:
-            return `var(--toast, ${constants.TOAST})`;
+            return getThemeValue(THEME_NAME.TOAST);
     }
 };
 const ToastContainer = styled(Card) `
@@ -31,7 +31,7 @@ const ToastContainer = styled(Card) `
     border-radius: 3px;
     padding: 12px;
     background-color: ${(props) => getBackgroundColor(props.type)};
-    color: #fff;
+    color: ${getThemeValue(THEME_NAME.TEXT_COLOR_LIGHT)};
     margin: 20px;
     font-size: 14px;
     line-height: 20px;
@@ -40,6 +40,7 @@ const ToastContainer = styled(Card) `
     width: 344px;
     display: flex;
     align-items: center;
+    position: relative;
 
     & svg {
         width: 20px;
@@ -64,7 +65,7 @@ const TextContainer = styled.div `
 `;
 const CloseContainer = styled.button `
     background-color: transparent;
-    color: var(--primary, ${constants.PRIMARY_LIGHT});
+    color: ${getThemeValue(THEME_NAME.PRIMARY_LIGHT)};
     padding: 6px 10px;
     border: none;
     border-radius: 3px;
@@ -76,8 +77,71 @@ const CloseContainer = styled.button `
     }
 `;
 const DEFAULT_DURATION = 2000;
+const createAriaLiveRegion = (id, ariaLive) => {
+    const region = document.createElement('div');
+    region.id = id;
+    region.style.position = 'absolute';
+    region.style.width = '1px';
+    region.style.height = '1px';
+    region.style.padding = '0';
+    region.style.margin = '-1px';
+    region.style.overflow = 'hidden';
+    region.style.clip = 'rect(0, 0, 0, 0)';
+    region.style.whiteSpace = 'nowrap';
+    region.style.borderWidth = '0';
+    region.setAttribute('role', ariaLive === 'assertive' ? 'alert' : 'log');
+    region.setAttribute('aria-live', ariaLive);
+    region.setAttribute('aria-atomic', 'true');
+    return region;
+};
 class Toast {
     constructor() {
+        this.isPaused = false;
+        this.currentOptions = null;
+        /**
+         * Set up keyboard listener for dismissing toast with Escape key
+         */
+        this.setupKeyboardListeners = () => {
+            if (typeof document !== 'undefined') {
+                document.addEventListener('keydown', this.handleKeyDown);
+            }
+        };
+        /**
+         * Handle keyboard events for toast interaction
+         */
+        this.handleKeyDown = (event) => {
+            if (!this.toast)
+                return;
+            // Escape key dismisses the toast
+            if (event.key === 'Escape') {
+                this.remove();
+            }
+            // Space key pauses/resumes auto-dismiss
+            else if (event.key === ' ' && this.currentOptions) {
+                event.preventDefault();
+                if (this.isPaused) {
+                    this.resumeTimeout();
+                }
+                else {
+                    this.pauseTimeout();
+                }
+            }
+        };
+        /**
+         * Update the appropriate live region with toast content
+         */
+        this.updateLiveRegion = (content, isAssertive) => {
+            const region = isAssertive ? this.assertiveRegion : this.politeRegion;
+            region.textContent = '';
+            if (region) {
+                // Add content after delay
+                setTimeout(() => {
+                    if (region) {
+                        region.textContent = content;
+                    }
+                }, 200);
+            }
+        };
         this.remove = () => {
             if (this.toast) {
                 this.toast[1]();
@@ -91,36 +155,68 @@ class Toast {
                 }
             }, 300);
         };
+        /**
+         * Pause toast auto-dismiss
+         */
+        this.pauseTimeout = () => {
+            if (this.timeout) {
+                clearTimeout(this.timeout);
+                this.isPaused = true;
+            }
+        };
+        /**
+         * Resume toast auto-dismiss
+         */
+        this.resumeTimeout = () => {
+            if (this.currentOptions && this.isPaused) {
+                this.timeout = setTimeout(() => {
+                    this.remove();
+                }, this.currentOptions.duration || DEFAULT_DURATION);
+                this.isPaused = false;
+            }
+        };
         /**
          * Pause toast when user is hovering over it.
-         *
-         * @param id
          */
         this.pause = () => {
-            clearTimeout(this.timeout);
+            this.pauseTimeout();
         };
         /**
          * Restart the removal of toast.
-         *
-         * @param id
          */
         this.resume = (options) => () => {
-            this.timeout = setTimeout(() => {
-                this.remove();
-            }, options.duration || DEFAULT_DURATION);
+            this.currentOptions = options;
+            this.resumeTimeout();
         };
+        if (typeof document === 'undefined')
+            return;
         this.element = document === null || document === void 0 ? void 0 : document.createElement('div');
+        this.ariaLiveContainer = document === null || document === void 0 ? void 0 : document.createElement('div');
+        this.ariaLiveContainer.id = 'nf-toast-container';
+        document.body.appendChild(this.ariaLiveContainer);
+        this.politeRegion = createAriaLiveRegion('nf-toast-polite-region', 'polite');
+        this.assertiveRegion = createAriaLiveRegion('nf-toast-assertive-region', 'assertive');
+        this.ariaLiveContainer.appendChild(this.politeRegion);
+        this.ariaLiveContainer.appendChild(this.assertiveRegion);
+        this.setupKeyboardListeners();
     }
     add(options) {
         const { text, buttonText, buttonClick, duration, type = TOAST_TYPE.NORMAL } = options;
+        this.currentOptions = options;
+        this.isPaused = false;
         this.remove();
+        // Determine if this is an assertive message (warning/danger)
+        const isAssertive = type === TOAST_TYPE.WARNING || type === TOAST_TYPE.DANGER;
+        // Announce to screen readers
+        const announcement = buttonText ? `${text} ${buttonText} button available` : text;
+        this.updateLiveRegion(announcement, isAssertive);
         this.toast = LayerManager.renderLayer({
             exitDelay: 300,
             closeOnEsc: false,
             closeOnOverlayClick: false,
             alwaysOnTop: true,
             position: LAYER_POSITION.BOTTOM_LEFT,
-            component: (_jsxs(ToastContainer, Object.assign({}, options, { type: type, elevated: true, onMouseEnter: this.pause, onMouseLeave: this.resume(options), children: [_jsx(TextContainer, { children: text }), buttonText && (_jsx(CloseContainer, { onClick: buttonClick, type: "button", children: buttonText }))] }))),
+            component: (_jsx(_Fragment, { children: _jsxs(ToastContainer, Object.assign({}, options, { type: type, elevated: true, onMouseEnter: this.pause, onMouseLeave: this.resume(options), "aria-hidden": "true", children: [_jsx(TextContainer, { children: text }), buttonText && (_jsx(CloseContainer, { onClick: buttonClick, type: "button", "aria-label": `${buttonText} - Press Space to pause auto-dismiss, Escape to close`, children: buttonText }))] })) })),
         });
         const Component = this.toast[0];
         this.root = createRoot(this.element);

package/lib-esm/components/Toast/Toast.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toast.js","sourceRoot":"","sources":["../../../src/components/Toast/Toast.tsx"],"names":[],"mappings":"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","sourcesContent":["import { createRoot, type Root } from 'react-dom/client';\nimport styled from '@emotion/styled';\nimport constants from '../../shared/constants';\nimport LayerManager, { LAYER_POSITION } from '../../shared/LayerManager';\nimport { Card } from '../Card';\n\nexport interface ToastOptions {\n    text: string;\n    buttonText?: string;\n    buttonClick?: () => void;\n    duration?: number;\n    type?: TOAST_TYPE;\n}\n\nexport enum TOAST_TYPE {\n    NORMAL = 'NORMAL',\n    INFO = 'INFO',\n    SUCCESS = 'SUCCESS',\n    WARNING = 'WARNING',\n    DANGER = 'DANGER',\n}\n\nconst getBackgroundColor = (type: TOAST_TYPE) => {\n    switch (type) {\n        case TOAST_TYPE.INFO:\n            return `var(--info, ${constants.INFO})`;\n        case TOAST_TYPE.SUCCESS:\n            return `var(--success, ${constants.SUCCESS})`;\n        case TOAST_TYPE.WARNING:\n            return `var(--warning, ${constants.WARNING})`;\n        case TOAST_TYPE.DANGER:\n            return `var(--error, ${constants.ERROR})`;\n        case TOAST_TYPE.NORMAL:\n            return `var(--toast, ${constants.TOAST})`;\n    }\n};\n\nconst ToastContainer = styled(Card)<{ type: TOAST_TYPE }>`\n    box-sizing: border-box;\n    border-radius: 3px;\n    padding: 12px;\n    background-color: ${(props) => getBackgroundColor(props.type)};\n    color: #fff;\n    margin: 20px;\n    font-size: 14px;\n    line-height: 20px;\n    transform: translateY(100%);\n    transition: transform 0.3s ease;\n    width: 344px;\n    display: flex;\n    align-items: center;\n\n    & svg {\n        width: 20px;\n        height: 20px;\n        fill: currentColor;\n    }\n\n    @media (max-width: 480px) {\n        & {\n            margin: 0;\n            width: 100vw;\n            border-radius: 0;\n        }\n    }\n\n    .nf-layer-enter & {\n        transform: translateY(0%);\n    }\n`;\n\nconst TextContainer = styled.div`\n    flex: 1;\n`;\n\nconst CloseContainer = styled.button`\n    background-color: transparent;\n    color: var(--primary, ${constants.PRIMARY_LIGHT});\n    padding: 6px 10px;\n    border: none;\n    border-radius: 3px;\n    text-transform: uppercase;\n    cursor: pointer;\n\n    &:focus {\n        background-color: rgba(255, 255, 255, 0.1);\n    }\n`;\n\nconst DEFAULT_DURATION = 2000;\n\nclass Toast {\n    private element: HTMLDivElement;\n    private toast: ReturnType<typeof LayerManager.renderLayer>;\n    private timeout: NodeJS.Timeout;\n    private root: Root;\n\n    constructor() {\n        this.element = document?.createElement('div');\n    }\n\n    public remove = () => {\n        if (this.toast) {\n            this.toast[1]();\n            clearTimeout(this.timeout);\n            this.timeout = null;\n        }\n        this.toast = null;\n\n        setTimeout(() => {\n            if (!this.toast) {\n                this.root.unmount();\n            }\n        }, 300);\n    };\n\n    /**\n     * Pause toast when user is hovering over it.\n     *\n     * @param id\n     */\n    public pause = () => {\n        clearTimeout(this.timeout);\n    };\n\n    /**\n     * Restart the removal of toast.\n     *\n     * @param id\n     */\n    public resume = (options: ToastOptions) => () => {\n        this.timeout = setTimeout(() => {\n            this.remove();\n        }, options.duration || DEFAULT_DURATION);\n    };\n\n    public add(options: ToastOptions) {\n        const { text, buttonText, buttonClick, duration, type = TOAST_TYPE.NORMAL } = options;\n        this.remove();\n        this.toast = LayerManager.renderLayer({\n            exitDelay: 300,\n            closeOnEsc: false,\n            closeOnOverlayClick: false,\n            alwaysOnTop: true,\n            position: LAYER_POSITION.BOTTOM_LEFT,\n            component: (\n                <ToastContainer\n                    {...options}\n                    type={type}\n                    elevated\n                    onMouseEnter={this.pause}\n                    onMouseLeave={this.resume(options)}\n                >\n                    <TextContainer>{text}</TextContainer>\n                    {buttonText && (\n                        <CloseContainer onClick={buttonClick} type=\"button\">\n                            {buttonText}\n                        </CloseContainer>\n                    )}\n                </ToastContainer>\n            ),\n        });\n        const Component = this.toast[0];\n        this.root = createRoot(this.element);\n        this.root.render(<Component />);\n\n        this.timeout = setTimeout(() => {\n            this.remove();\n        }, duration || DEFAULT_DURATION);\n    }\n}\n\nexport default new Toast();\n"]}
+{"version":3,"file":"Toast.js","sourceRoot":"","sources":["../../../src/components/Toast/Toast.tsx"],"names":[],"mappings":"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","sourcesContent":["import { createRoot, type Root } from 'react-dom/client';\nimport styled from '@emotion/styled';\nimport { getThemeValue, THEME_NAME } from '../../shared/constants';\nimport LayerManager, { LAYER_POSITION } from '../../shared/LayerManager';\nimport { Card } from '../Card';\n\nexport interface ToastOptions {\n    text: string;\n    buttonText?: string;\n    buttonClick?: () => void;\n    duration?: number;\n    type?: TOAST_TYPE;\n}\n\nexport enum TOAST_TYPE {\n    NORMAL = 'NORMAL',\n    INFO = 'INFO',\n    SUCCESS = 'SUCCESS',\n    WARNING = 'WARNING',\n    DANGER = 'DANGER',\n}\n\nconst getBackgroundColor = (type: TOAST_TYPE) => {\n    switch (type) {\n        case TOAST_TYPE.INFO:\n            return getThemeValue(THEME_NAME.INFO);\n        case TOAST_TYPE.SUCCESS:\n            return getThemeValue(THEME_NAME.SUCCESS);\n        case TOAST_TYPE.WARNING:\n            return getThemeValue(THEME_NAME.WARNING);\n        case TOAST_TYPE.DANGER:\n            return getThemeValue(THEME_NAME.ERROR);\n        case TOAST_TYPE.NORMAL:\n            return getThemeValue(THEME_NAME.TOAST);\n    }\n};\n\nconst ToastContainer = styled(Card)<{ type: TOAST_TYPE }>`\n    box-sizing: border-box;\n    border-radius: 3px;\n    padding: 12px;\n    background-color: ${(props) => getBackgroundColor(props.type)};\n    color: ${getThemeValue(THEME_NAME.TEXT_COLOR_LIGHT)};\n    margin: 20px;\n    font-size: 14px;\n    line-height: 20px;\n    transform: translateY(100%);\n    transition: transform 0.3s ease;\n    width: 344px;\n    display: flex;\n    align-items: center;\n    position: relative;\n\n    & svg {\n        width: 20px;\n        height: 20px;\n        fill: currentColor;\n    }\n\n    @media (max-width: 480px) {\n        & {\n            margin: 0;\n            width: 100vw;\n            border-radius: 0;\n        }\n    }\n\n    .nf-layer-enter & {\n        transform: translateY(0%);\n    }\n`;\n\nconst TextContainer = styled.div`\n    flex: 1;\n`;\n\nconst CloseContainer = styled.button`\n    background-color: transparent;\n    color: ${getThemeValue(THEME_NAME.PRIMARY_LIGHT)};\n    padding: 6px 10px;\n    border: none;\n    border-radius: 3px;\n    text-transform: uppercase;\n    cursor: pointer;\n\n    &:focus {\n        background-color: rgba(255, 255, 255, 0.1);\n    }\n`;\n\nconst DEFAULT_DURATION = 2000;\n\nconst createAriaLiveRegion = (id: string, ariaLive: 'polite' | 'assertive') => {\n    const region = document.createElement('div');\n    region.id = id;\n    region.style.position = 'absolute';\n    region.style.width = '1px';\n    region.style.height = '1px';\n    region.style.padding = '0';\n    region.style.margin = '-1px';\n    region.style.overflow = 'hidden';\n    region.style.clip = 'rect(0, 0, 0, 0)';\n    region.style.whiteSpace = 'nowrap';\n    region.style.borderWidth = '0';\n    region.setAttribute('role', ariaLive === 'assertive' ? 'alert' : 'log');\n    region.setAttribute('aria-live', ariaLive);\n    region.setAttribute('aria-atomic', 'true');\n    return region;\n};\n\nclass Toast {\n    private element: HTMLDivElement;\n    private ariaLiveContainer: HTMLDivElement;\n    private toast: ReturnType<typeof LayerManager.renderLayer>;\n    private timeout: NodeJS.Timeout;\n    private root: Root;\n    private politeRegion: HTMLDivElement;\n    private assertiveRegion: HTMLDivElement;\n    private isPaused: boolean = false;\n    private currentOptions: ToastOptions | null = null;\n\n    constructor() {\n        if (typeof document === 'undefined') return;\n\n        this.element = document?.createElement('div');\n        this.ariaLiveContainer = document?.createElement('div');\n        this.ariaLiveContainer.id = 'nf-toast-container';\n        document.body.appendChild(this.ariaLiveContainer);\n\n        this.politeRegion = createAriaLiveRegion('nf-toast-polite-region', 'polite');\n        this.assertiveRegion = createAriaLiveRegion('nf-toast-assertive-region', 'assertive');\n        this.ariaLiveContainer.appendChild(this.politeRegion);\n        this.ariaLiveContainer.appendChild(this.assertiveRegion);\n\n        this.setupKeyboardListeners();\n    }\n\n    /**\n     * Set up keyboard listener for dismissing toast with Escape key\n     */\n    private setupKeyboardListeners = () => {\n        if (typeof document !== 'undefined') {\n            document.addEventListener('keydown', this.handleKeyDown);\n        }\n    };\n\n    /**\n     * Handle keyboard events for toast interaction\n     */\n    private handleKeyDown = (event: KeyboardEvent) => {\n        if (!this.toast) return;\n\n        // Escape key dismisses the toast\n        if (event.key === 'Escape') {\n            this.remove();\n        }\n        // Space key pauses/resumes auto-dismiss\n        else if (event.key === ' ' && this.currentOptions) {\n            event.preventDefault();\n            if (this.isPaused) {\n                this.resumeTimeout();\n            } else {\n                this.pauseTimeout();\n            }\n        }\n    };\n\n    /**\n     * Update the appropriate live region with toast content\n     */\n    private updateLiveRegion = (content: string, isAssertive: boolean) => {\n        const region = isAssertive ? this.assertiveRegion : this.politeRegion;\n        region.textContent = '';\n\n        if (region) {\n            // Add content after delay\n            setTimeout(() => {\n                if (region) {\n                    region.textContent = content;\n                }\n            }, 200);\n        }\n    };\n\n    public remove = () => {\n        if (this.toast) {\n            this.toast[1]();\n            clearTimeout(this.timeout);\n            this.timeout = null;\n        }\n        this.toast = null;\n\n        setTimeout(() => {\n            if (!this.toast) {\n                this.root.unmount();\n            }\n        }, 300);\n    };\n\n    /**\n     * Pause toast auto-dismiss\n     */\n    private pauseTimeout = () => {\n        if (this.timeout) {\n            clearTimeout(this.timeout);\n            this.isPaused = true;\n        }\n    };\n\n    /**\n     * Resume toast auto-dismiss\n     */\n    private resumeTimeout = () => {\n        if (this.currentOptions && this.isPaused) {\n            this.timeout = setTimeout(() => {\n                this.remove();\n            }, this.currentOptions.duration || DEFAULT_DURATION);\n            this.isPaused = false;\n        }\n    };\n\n    /**\n     * Pause toast when user is hovering over it.\n     */\n    public pause = () => {\n        this.pauseTimeout();\n    };\n\n    /**\n     * Restart the removal of toast.\n     */\n    public resume = (options: ToastOptions) => () => {\n        this.currentOptions = options;\n        this.resumeTimeout();\n    };\n\n    public add(options: ToastOptions) {\n        const { text, buttonText, buttonClick, duration, type = TOAST_TYPE.NORMAL } = options;\n        this.currentOptions = options;\n        this.isPaused = false;\n        this.remove();\n\n        // Determine if this is an assertive message (warning/danger)\n        const isAssertive = type === TOAST_TYPE.WARNING || type === TOAST_TYPE.DANGER;\n\n        // Announce to screen readers\n        const announcement = buttonText ? `${text} ${buttonText} button available` : text;\n        this.updateLiveRegion(announcement, isAssertive);\n\n        this.toast = LayerManager.renderLayer({\n            exitDelay: 300,\n            closeOnEsc: false,\n            closeOnOverlayClick: false,\n            alwaysOnTop: true,\n            position: LAYER_POSITION.BOTTOM_LEFT,\n            component: (\n                <>\n                    {/* Visual toast (hidden from screen readers) */}\n                    <ToastContainer\n                        {...options}\n                        type={type}\n                        elevated\n                        onMouseEnter={this.pause}\n                        onMouseLeave={this.resume(options)}\n                        aria-hidden=\"true\"\n                    >\n                        <TextContainer>{text}</TextContainer>\n                        {buttonText && (\n                            <CloseContainer\n                                onClick={buttonClick}\n                                type=\"button\"\n                                aria-label={`${buttonText} - Press Space to pause auto-dismiss, Escape to close`}\n                            >\n                                {buttonText}\n                            </CloseContainer>\n                        )}\n                    </ToastContainer>\n                </>\n            ),\n        });\n        const Component = this.toast[0];\n        this.root = createRoot(this.element);\n        this.root.render(<Component />);\n\n        this.timeout = setTimeout(() => {\n            this.remove();\n        }, duration || DEFAULT_DURATION);\n    }\n}\n\nexport default new Toast();\n"]}

package/lib-esm/components/Tooltip/Tooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,SAAS,MAAM,YAAY,CAAC;AAInC,oBAAY,gBAAgB;IACxB,GAAG,QAAQ;IACX,MAAM,WAAW;IACjB,IAAI,SAAS;IACb,KAAK,UAAU;CAClB;AA2DD,iBAAwB,OAAO,CAAC,KAAK,EAAE,KAAK,CAAC,iBAAiB,CAAC,YAAY,CAAC,oDAS3E;kBATuB,OAAO;;QAc3B,kCAAkC;;QAElC,8BAA8B;;;;;;;eAhBV,OAAO;AAW/B,KAAK,YAAY,GAAG,SAAS,CAAC,UAAU,CAAC,OAAO,OAAO,CAAC,SAAS,CAAC,CAAC"}
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgB,MAAM,OAAO,CAAC;AACrC,OAAO,SAAS,MAAM,YAAY,CAAC;AAInC,oBAAY,gBAAgB;IACxB,GAAG,QAAQ;IACX,MAAM,WAAW;IACjB,IAAI,SAAS;IACb,KAAK,UAAU;CAClB;AA2DD,iBAAwB,OAAO,CAAC,KAAK,EAAE,KAAK,CAAC,iBAAiB,CAAC,YAAY,CAAC,oDAuB3E;kBAvBuB,OAAO;;QA4B3B,kCAAkC;;QAElC,8BAA8B;;;;;;;eA9BV,OAAO;AAyB/B,KAAK,YAAY,GAAG,SAAS,CAAC,UAAU,CAAC,OAAO,OAAO,CAAC,SAAS,CAAC,CAAC"}

package/lib-esm/components/Tooltip/Tooltip.js

@@ -10,9 +10,10 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import React, { useId } from 'react';
 import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
-import constants from '../../shared/constants';
+import { getThemeValue, THEME_NAME } from '../../shared/constants';
 export var TOOLTIP_POSITION;
 (function (TOOLTIP_POSITION) {
     TOOLTIP_POSITION["TOP"] = "TOP";
@@ -54,9 +55,9 @@ const positionHoverStyle = {
 };
 const TooltipDiv = styled.div `
     position: absolute;
-    background-color: var(--tooltip-color, ${constants.TOOLTIP_COLOR});
+    background-color: ${getThemeValue(THEME_NAME.TOOLTIP_COLOR)};
     padding: 5px;
-    color: #fff;
+    color: ${getThemeValue(THEME_NAME.TEXT_COLOR_LIGHT)};
     border-radius: 3px;
     transition: transform 0.3s ease;
     font-size: 12px;
@@ -69,13 +70,23 @@ const TooltipContainer = styled.div `
     justify-content: center;
     align-items: center;
 
-    &:hover ${TooltipDiv} {
+    &:hover ${TooltipDiv}, &:focus-within ${TooltipDiv} {
         ${(props) => positionHoverStyle[props.position]}
     }
 `;
 export default function Tooltip(props) {
     const { children, position } = props, rest = __rest(props, ["children", "position"]);
-    return (_jsxs(TooltipContainer, Object.assign({ position: position }, rest, { children: [children, _jsx(TooltipDiv, { position: position, children: rest.tooltipText })] })));
+    const tooltipId = useId();
+    // Clone the child to inject aria-describedby and tabIndex if possible
+    const trigger = React.isValidElement(children)
+        ? React.cloneElement(children, {
+            'aria-describedby': tooltipId,
+            tabIndex: children.props && typeof children.props.tabIndex !== 'undefined'
+                ? children.props.tabIndex
+                : 0,
+        })
+        : children;
+    return (_jsxs(TooltipContainer, Object.assign({ position: position }, rest, { children: [trigger, _jsx(TooltipDiv, { id: tooltipId, "aria-hidden": "true", role: "tooltip", position: position, children: rest.tooltipText })] })));
 }
 Tooltip.propTypes = {
     /** Text to show in the tooltip */

package/lib-esm/components/Tooltip/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"names":[],"mappings":";;;;;;;;;;;;AACA,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,SAAS,MAAM,wBAAwB,CAAC;AAE/C,MAAM,CAAN,IAAY,gBAKX;AALD,WAAY,gBAAgB;IACxB,+BAAW,CAAA;IACX,qCAAiB,CAAA;IACjB,iCAAa,CAAA;IACb,mCAAe,CAAA;AACnB,CAAC,EALW,gBAAgB,KAAhB,gBAAgB,QAK3B;AAED,MAAM,aAAa,GAAG;IAClB,CAAC,gBAAgB,CAAC,IAAI,CAAC,EAAE;;;KAGxB;IACD,CAAC,gBAAgB,CAAC,KAAK,CAAC,EAAE;;;KAGzB;IACD,CAAC,gBAAgB,CAAC,GAAG,CAAC,EAAE;;;KAGvB;IACD,CAAC,gBAAgB,CAAC,MAAM,CAAC,EAAE;;;KAG1B;CACJ,CAAC;AAEF,MAAM,kBAAkB,GAAG;IACvB,CAAC,gBAAgB,CAAC,IAAI,CAAC,EAAE;;KAExB;IACD,CAAC,gBAAgB,CAAC,KAAK,CAAC,EAAE;;KAEzB;IACD,CAAC,gBAAgB,CAAC,GAAG,CAAC,EAAE;;KAEvB;IACD,CAAC,gBAAgB,CAAC,MAAM,CAAC,EAAE;;KAE1B;CACJ,CAAC;AAEF,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAgC;;6CAEhB,SAAS,CAAC,aAAa;;;;;;;MAO9D,CAAC,KAAK,EAAE,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,QAAQ,CAAC;CAC7C,CAAC;AAEF,MAAM,gBAAgB,GAAG,MAAM,CAAC,GAAG,CAAgC;;;;;;cAMrD,UAAU;UACd,CAAC,KAAK,EAAE,EAAE,CAAC,kBAAkB,CAAC,KAAK,CAAC,QAAQ,CAAC;;CAEtD,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,KAA4C;IACxE,MAAM,EAAE,QAAQ,EAAE,QAAQ,KAAc,KAAK,EAAd,IAAI,UAAK,KAAK,EAAvC,wBAA+B,CAAQ,CAAC;IAE9C,OAAO,CACH,MAAC,gBAAgB,kBAAC,QAAQ,EAAE,QAAQ,IAAM,IAAI,eACzC,QAAQ,EACT,KAAC,UAAU,IAAC,QAAQ,EAAE,QAAQ,YAAG,IAAI,CAAC,WAAW,GAAc,KAChD,CACtB,CAAC;AACN,CAAC;AAID,OAAO,CAAC,SAAS,GAAG;IAChB,kCAAkC;IAClC,WAAW,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC,SAAS,CAAC,MAAM,EAAE,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,UAAU;IAC/E,8BAA8B;IAC9B,QAAQ,EAAE,SAAS,CAAC,KAAK,CAAC;QACtB,gBAAgB,CAAC,GAAG;QACpB,gBAAgB,CAAC,IAAI;QACrB,gBAAgB,CAAC,KAAK;QACtB,gBAAgB,CAAC,MAAM;KAC1B,CAAC;CACL,CAAC;AAEF,OAAO,CAAC,YAAY,GAAG;IACnB,QAAQ,EAAE,gBAAgB,CAAC,MAAM;CACpC,CAAC","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from '@emotion/styled';\nimport constants from '../../shared/constants';\n\nexport enum TOOLTIP_POSITION {\n    TOP = 'TOP',\n    BOTTOM = 'BOTTOM',\n    LEFT = 'LEFT',\n    RIGHT = 'RIGHT',\n}\n\nconst positionStyle = {\n    [TOOLTIP_POSITION.LEFT]: `\n        left: 0;\n        transform: translateX(-50%) scale(0);\n    `,\n    [TOOLTIP_POSITION.RIGHT]: `\n        right: 0;\n        transform: translateX(50%) scale(0);\n    `,\n    [TOOLTIP_POSITION.TOP]: `\n        top: 0;\n        transform: translateY(-10px) scale(0);\n    `,\n    [TOOLTIP_POSITION.BOTTOM]: `\n        bottom: 0;\n        transform: translateY(10px) scale(0);\n    `,\n};\n\nconst positionHoverStyle = {\n    [TOOLTIP_POSITION.LEFT]: `\n        transform: translateX(-100%) scale(1);\n    `,\n    [TOOLTIP_POSITION.RIGHT]: `\n        transform: translateX(100%) scale(1);\n    `,\n    [TOOLTIP_POSITION.TOP]: `\n        transform: translateY(-25px) scale(1);\n    `,\n    [TOOLTIP_POSITION.BOTTOM]: `\n        transform: translateY(25px) scale(1);\n    `,\n};\n\nconst TooltipDiv = styled.div<{ position: TOOLTIP_POSITION }>`\n    position: absolute;\n    background-color: var(--tooltip-color, ${constants.TOOLTIP_COLOR});\n    padding: 5px;\n    color: #fff;\n    border-radius: 3px;\n    transition: transform 0.3s ease;\n    font-size: 12px;\n    z-index: 1;\n    ${(props) => positionStyle[props.position]}\n`;\n\nconst TooltipContainer = styled.div<{ position: TOOLTIP_POSITION }>`\n    position: relative;\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n\n    &:hover ${TooltipDiv} {\n        ${(props) => positionHoverStyle[props.position]}\n    }\n`;\n\nexport default function Tooltip(props: React.PropsWithChildren<TooltipProps>) {\n    const { children, position, ...rest } = props;\n\n    return (\n        <TooltipContainer position={position} {...rest}>\n            {children}\n            <TooltipDiv position={position}>{rest.tooltipText}</TooltipDiv>\n        </TooltipContainer>\n    );\n}\n\ntype TooltipProps = PropTypes.InferProps<typeof Tooltip.propTypes>;\n\nTooltip.propTypes = {\n    /** Text to show in the tooltip */\n    tooltipText: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,\n    /** Position of the tooltip */\n    position: PropTypes.oneOf([\n        TOOLTIP_POSITION.TOP,\n        TOOLTIP_POSITION.LEFT,\n        TOOLTIP_POSITION.RIGHT,\n        TOOLTIP_POSITION.BOTTOM,\n    ]),\n};\n\nTooltip.defaultProps = {\n    position: TOOLTIP_POSITION.BOTTOM,\n};\n"]}
+{"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useId } from 'react';\nimport PropTypes from 'prop-types';\nimport styled from '@emotion/styled';\nimport { getThemeValue, THEME_NAME } from '../../shared/constants';\n\nexport enum TOOLTIP_POSITION {\n    TOP = 'TOP',\n    BOTTOM = 'BOTTOM',\n    LEFT = 'LEFT',\n    RIGHT = 'RIGHT',\n}\n\nconst positionStyle = {\n    [TOOLTIP_POSITION.LEFT]: `\n        left: 0;\n        transform: translateX(-50%) scale(0);\n    `,\n    [TOOLTIP_POSITION.RIGHT]: `\n        right: 0;\n        transform: translateX(50%) scale(0);\n    `,\n    [TOOLTIP_POSITION.TOP]: `\n        top: 0;\n        transform: translateY(-10px) scale(0);\n    `,\n    [TOOLTIP_POSITION.BOTTOM]: `\n        bottom: 0;\n        transform: translateY(10px) scale(0);\n    `,\n};\n\nconst positionHoverStyle = {\n    [TOOLTIP_POSITION.LEFT]: `\n        transform: translateX(-100%) scale(1);\n    `,\n    [TOOLTIP_POSITION.RIGHT]: `\n        transform: translateX(100%) scale(1);\n    `,\n    [TOOLTIP_POSITION.TOP]: `\n        transform: translateY(-25px) scale(1);\n    `,\n    [TOOLTIP_POSITION.BOTTOM]: `\n        transform: translateY(25px) scale(1);\n    `,\n};\n\nconst TooltipDiv = styled.div<{ position: TOOLTIP_POSITION }>`\n    position: absolute;\n    background-color: ${getThemeValue(THEME_NAME.TOOLTIP_COLOR)};\n    padding: 5px;\n    color: ${getThemeValue(THEME_NAME.TEXT_COLOR_LIGHT)};\n    border-radius: 3px;\n    transition: transform 0.3s ease;\n    font-size: 12px;\n    z-index: 1;\n    ${(props) => positionStyle[props.position]}\n`;\n\nconst TooltipContainer = styled.div<{ position: TOOLTIP_POSITION }>`\n    position: relative;\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n\n    &:hover ${TooltipDiv}, &:focus-within ${TooltipDiv} {\n        ${(props) => positionHoverStyle[props.position]}\n    }\n`;\n\nexport default function Tooltip(props: React.PropsWithChildren<TooltipProps>) {\n    const { children, position, ...rest } = props;\n    const tooltipId = useId();\n\n    // Clone the child to inject aria-describedby and tabIndex if possible\n    const trigger = React.isValidElement(children)\n        ? React.cloneElement(children as React.ReactElement, {\n              'aria-describedby': tooltipId,\n              tabIndex:\n                  children.props && typeof children.props.tabIndex !== 'undefined'\n                      ? children.props.tabIndex\n                      : 0,\n          })\n        : children;\n\n    return (\n        <TooltipContainer position={position} {...rest}>\n            {trigger}\n            <TooltipDiv id={tooltipId} aria-hidden=\"true\" role=\"tooltip\" position={position}>\n                {rest.tooltipText}\n            </TooltipDiv>\n        </TooltipContainer>\n    );\n}\n\ntype TooltipProps = PropTypes.InferProps<typeof Tooltip.propTypes>;\n\nTooltip.propTypes = {\n    /** Text to show in the tooltip */\n    tooltipText: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,\n    /** Position of the tooltip */\n    position: PropTypes.oneOf([\n        TOOLTIP_POSITION.TOP,\n        TOOLTIP_POSITION.LEFT,\n        TOOLTIP_POSITION.RIGHT,\n        TOOLTIP_POSITION.BOTTOM,\n    ]),\n};\n\nTooltip.defaultProps = {\n    position: TOOLTIP_POSITION.BOTTOM,\n};\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"LayerManager.d.ts","sourceRoot":"","sources":["../../src/shared/LayerManager.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiC,MAAM,OAAO,CAAC;AAItD,0CAA0C;AAC1C,oBAAY,cAAc;IACtB,QAAQ,IAAA;IACR,UAAU,IAAA;IACV,SAAS,IAAA;IACT,WAAW,IAAA;IACX,aAAa,IAAA;IACb,YAAY,IAAA;IACZ,MAAM,IAAA;CACT;AAED,UAAU,WAAW;IACjB,sBAAsB;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,0CAA0C;IAC1C,SAAS,EAAE,GAAG,CAAC,OAAO,CAAC;IACvB,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,qBAAqB;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sCAAsC;IACtC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,sCAAsC;IACtC,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,wCAAwC;IACxC,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;IACrC,wCAAwC;IACxC,WAAW,CAAC,EAAE,OAAO,CAAC;CACzB;AAgED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,cAAM,YAAY;IACd,kBAAkB;IAClB,OAAO,CAAC,MAAM,CAAe;IAC7B,gCAAgC;IAChC,OAAO,CAAC,SAAS,CAAS;IAE1B;;;OAGG;;IAcH;;;;;;;;OAQG;IACH,OAAO,CAAC,OAAO,CAeb;IAEF;;;OAGG;IACI,WAAW,WACN,WAAW,KACpB,CAAC,MAAM,KAAK,CAAC,WAAW,GAAG,IAAI,EAAE,CAAC,IAAI,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC,CAmF3D;CACL;;AAGD,wBAAkC"}
+{"version":3,"file":"LayerManager.d.ts","sourceRoot":"","sources":["../../src/shared/LayerManager.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiC,MAAM,OAAO,CAAC;AAKtD,0CAA0C;AAC1C,oBAAY,cAAc;IACtB,QAAQ,IAAA;IACR,UAAU,IAAA;IACV,SAAS,IAAA;IACT,WAAW,IAAA;IACX,aAAa,IAAA;IACb,YAAY,IAAA;IACZ,MAAM,IAAA;CACT;AAED,UAAU,WAAW;IACjB,sBAAsB;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,0CAA0C;IAC1C,SAAS,EAAE,GAAG,CAAC,OAAO,CAAC;IACvB,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,qBAAqB;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sCAAsC;IACtC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,sCAAsC;IACtC,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,wCAAwC;IACxC,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;IACrC,wCAAwC;IACxC,WAAW,CAAC,EAAE,OAAO,CAAC;CACzB;AAgED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,cAAM,YAAY;IACd,kBAAkB;IAClB,OAAO,CAAC,MAAM,CAAe;IAC7B,gCAAgC;IAChC,OAAO,CAAC,SAAS,CAAS;IAE1B;;;OAGG;;IAcH;;;;;;;;OAQG;IACH,OAAO,CAAC,OAAO,CAeb;IAEF;;;OAGG;IACI,WAAW,WACN,WAAW,KACpB,CAAC,MAAM,KAAK,CAAC,WAAW,GAAG,IAAI,EAAE,CAAC,IAAI,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC,CA4J3D;CACL;;AAGD,wBAAkC"}