no-frills-ui 0.0.14-rc.3 → 0.0.14-rc.4

package/lib-esm/components/Accordion/AccordionStep.js

@@ -9,35 +9,35 @@ import ExpandMore from '../../icons/ExpandMore.js';
 import Card from '../Card/Card.js';
 
 const Step$1 = /*#__PURE__*/ styled(Card, {
-    target: "ex87x7i0",
+    target: "e1vu5oed0",
     label: "Step"
-})("transition:all 0.6s ease;overflow:visible;", (props)=>props.open && `margin: 20px 5px;`);
+})("transition:all 0.6s ease;overflow:visible;display:flow-root;", (props)=>props.open && `margin: 20px 5px;`);
 const StepHeader = /*#__PURE__*/ styled("button", {
-    target: "ex87x7i1",
+    target: "e1vu5oed1",
     label: "StepHeader"
 })("padding:20px 15px;display:flex;justify-content:space-between;background:none;border:none;border-radius:10px;width:100%;font-size:inherit;color:", getThemeValue(THEME_NAME.TEXT_COLOR_DARK), ";&:focus-visible{box-shadow:0 0 0 4px ", getThemeValue(THEME_NAME.PRIMARY_LIGHT), ";}& input{appearance:none;margin:0;}", (props)=>props.open && `border-bottom: 1px solid ${getThemeValue(THEME_NAME.BORDER_LIGHT_COLOR)};`, " ", (props)=>props.open && `border-radius: 10px 10px 0 0;`, " ", (props)=>props.disabled && `color: ${getThemeValue(THEME_NAME.DISABLED)};`);
 const HeaderContainer = /*#__PURE__*/ styled("div", {
-    target: "ex87x7i2",
+    target: "e1vu5oed2",
     label: "HeaderContainer"
 })("display:flex;align-items:center;min-width:40px;& svg{vertical-align:top;margin-right:10px;fill:", (props)=>props.open ? getThemeValue(THEME_NAME.PRIMARY) : props.completed ? getThemeValue(THEME_NAME.SUCCESS) : getThemeValue(THEME_NAME.LIGHT_GREY), ";transform:", (props)=>props.open ? 'scale(0.8)' : 'scale(0.6)', ";transition:all 0.3s ease;min-width:24px;}");
 const ExpandContainer = /*#__PURE__*/ styled("div", {
-    target: "ex87x7i3",
+    target: "e1vu5oed3",
     label: "ExpandContainer"
 })("display:flex;align-items:center;& svg{vertical-align:top;margin-right:10px;transition:all 0.6s ease;fill:currentColor;}", (props)=>props.open ? `& svg { transform: rotate(180deg); }` : '');
 const StepBody = /*#__PURE__*/ styled("div", {
-    target: "ex87x7i4",
+    target: "e1vu5oed4",
     label: "StepBody"
 })("transition:all 0.6s ease;overflow:hidden;height:", (props)=>props.height || 0, "px;");
 const AccordionBadge = /*#__PURE__*/ styled(Badge, {
-    target: "ex87x7i5",
+    target: "e1vu5oed5",
     label: "AccordionBadge"
 })("margin-right:15px;");
 const AccordionStepBody = /*#__PURE__*/ styled("div", {
-    target: "ex87x7i6",
+    target: "e1vu5oed6",
     label: "AccordionStepBody"
 })("padding:20px 15px;");
 const AccordionStepFooter = /*#__PURE__*/ styled("div", {
-    target: "ex87x7i7",
+    target: "e1vu5oed7",
     label: "AccordionStepFooter"
 })("display:flex;justify-content:flex-end;padding:10px 15px;border-top:1px solid ", getThemeValue(THEME_NAME.BORDER_LIGHT_COLOR), ";");
 /**

package/lib-esm/components/Accordion/AccordionStep.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionStep.js","sources":["../../../src/components/Accordion/AccordionStep.tsx"],"sourcesContent":["import React, { useState, useId, useRef, useEffect } from 'react';\nimport styled from '@emotion/styled';\nimport { FiberManualRecord, ExpandMore } from '../../icons';\nimport { THEME_NAME, getThemeValue } from '../../shared/constants';\nimport { Ellipsis } from '../../shared/styles';\nimport { Badge, BADGE_TYPE } from '../Badge';\nimport { Card } from '../Card';\n\nconst Step = styled(Card)<{ open?: boolean; completed?: boolean }>`\n    transition: all 0.6s ease;\n    overflow: visible;\n\n    ${(props) => props.open && `margin: 20px 5px;`}\n`;\n\nconst StepHeader = styled.button<{ open?: boolean; disabled?: boolean }>`\n    padding: 20px 15px;\n    display: flex;\n    justify-content: space-between;\n    background: none;\n    border: none;\n    border-radius: 10px;\n    width: 100%;\n    font-size: inherit;\n    color: ${getThemeValue(THEME_NAME.TEXT_COLOR_DARK)};\n\n    &:focus-visible {\n        box-shadow: 0 0 0 4px ${getThemeValue(THEME_NAME.PRIMARY_LIGHT)};\n    }\n\n    & input {\n        appearance: none;\n        margin: 0;\n    }\n\n    ${(props) =>\n        props.open && `border-bottom: 1px solid ${getThemeValue(THEME_NAME.BORDER_LIGHT_COLOR)};`}\n    ${(props) => props.open && `border-radius: 10px 10px 0 0;`}\n\n    ${(props) => props.disabled && `color: ${getThemeValue(THEME_NAME.DISABLED)};`}\n`;\n\nconst HeaderContainer = styled.div<{ open?: boolean; completed?: boolean }>`\n    display: flex;\n    align-items: center;\n    min-width: 40px;\n\n    & svg {\n        vertical-align: top;\n        margin-right: 10px;\n        fill: ${(props) =>\n            props.open\n                ? getThemeValue(THEME_NAME.PRIMARY)\n                : props.completed\n                  ? getThemeValue(THEME_NAME.SUCCESS)\n                  : getThemeValue(THEME_NAME.LIGHT_GREY)};\n        transform: ${(props) => (props.open ? 'scale(0.8)' : 'scale(0.6)')};\n        transition: all 0.3s ease;\n        min-width: 24px;\n    }\n`;\n\nconst ExpandContainer = styled.div<{ open?: boolean }>`\n    display: flex;\n    align-items: center;\n\n    & svg {\n        vertical-align: top;\n        margin-right: 10px;\n        transition: all 0.6s ease;\n        fill: currentColor;\n    }\n\n    ${(props) => (props.open ? `& svg { transform: rotate(180deg); }` : '')}\n`;\n\nconst StepBody = styled.div<{ height: number }>`\n    transition: all 0.6s ease;\n    overflow: hidden;\n    height: ${(props) => props.height || 0}px;\n`;\n\nconst AccordionBadge = styled(Badge)`\n    margin-right: 15px;\n`;\n\nexport const AccordionStepBody = styled.div`\n    padding: 20px 15px;\n`;\n\nexport const AccordionStepFooter = styled.div`\n    display: flex;\n    justify-content: flex-end;\n    padding: 10px 15px;\n    border-top: 1px solid ${getThemeValue(THEME_NAME.BORDER_LIGHT_COLOR)};\n`;\n\n/** Props for `AccordionStep` component */\ninterface AccordionStepProps {\n    /**\n     * If the step has been marked as completed\n     * @default false\n     */\n    completed?: boolean;\n    /** If the step is disabled\n     * @default false\n     */\n    disabled?: boolean;\n    /** Header content for the step */\n    header: React.ReactNode;\n    /** Error text to display as a badge in the header */\n    errorText?: React.ReactNode;\n    /** If the step is expanded */\n    open?: boolean;\n    /** Click handler for the step header */\n    onStepClick?: React.MouseEventHandler<HTMLButtonElement>;\n}\n\n/**\n * AccordionStep Component\n * @param props - Component props\n * @param ref - Ref forwarded to the underlying HTMLDivElement\n */\nfunction AccordionStepComponent(\n    props: React.PropsWithChildren<AccordionStepProps> & React.HTMLAttributes<HTMLDivElement>,\n    ref: React.Ref<HTMLDivElement>,\n) {\n    const [height, setHeight] = useState(0);\n    const {\n        open,\n        disabled = false,\n        header,\n        errorText,\n        completed = false,\n        onStepClick,\n        children,\n        ...restProps\n    } = props;\n\n    // Generate unique IDs for ARIA relationships\n    const headerId = useId();\n    const regionId = useId();\n\n    const contentRef = useRef<HTMLDivElement | null>(null);\n\n    // Measure content height when `open` or children change.\n    useEffect(() => {\n        const el = contentRef.current;\n        setHeight(el?.scrollHeight || 0);\n    }, [open, children]);\n\n    return (\n        <Step {...restProps} ref={ref} open={open} elevated={open} completed={completed}>\n            <StepHeader\n                type=\"button\"\n                open={open}\n                disabled={disabled}\n                onClick={onStepClick}\n                aria-expanded={open ? 'true' : 'false'}\n                aria-controls={regionId}\n                id={headerId}\n            >\n                <HeaderContainer open={open} completed={completed}>\n                    <FiberManualRecord aria-hidden=\"true\" />\n                    <Ellipsis>{header}</Ellipsis>\n                </HeaderContainer>\n                <ExpandContainer open={open}>\n                    {errorText && (\n                        <AccordionBadge inline type={BADGE_TYPE.DANGER}>\n                            {errorText}\n                        </AccordionBadge>\n                    )}\n                    <ExpandMore aria-hidden=\"true\" />\n                </ExpandContainer>\n            </StepHeader>\n            <StepBody\n                ref={contentRef}\n                height={open ? height : 0}\n                role=\"region\"\n                id={regionId}\n                aria-labelledby={headerId}\n                aria-hidden={open ? 'false' : 'true'}\n            >\n                {open && children}\n            </StepBody>\n        </Step>\n    );\n}\n\nconst AccordionStep = React.forwardRef<\n    HTMLDivElement,\n    React.PropsWithChildren<AccordionStepProps> & React.HTMLAttributes<HTMLDivElement>\n>(AccordionStepComponent);\n\nexport default AccordionStep;\n"],"names":["Step","styled","Card","props","open","StepHeader","getThemeValue","THEME_NAME","TEXT_COLOR_DARK","PRIMARY_LIGHT","BORDER_LIGHT_COLOR","disabled","DISABLED","HeaderContainer","PRIMARY","completed","SUCCESS","LIGHT_GREY","ExpandContainer","StepBody","height","AccordionBadge","Badge","AccordionStepBody","AccordionStepFooter","AccordionStepComponent","ref","setHeight","useState","header","errorText","onStepClick","children","restProps","headerId","useId","regionId","contentRef","useRef","useEffect","el","current","scrollHeight","_jsxs","elevated","type","onClick","aria-expanded","aria-controls","id","_jsx","FiberManualRecord","aria-hidden","Ellipsis","inline","BADGE_TYPE","DANGER","ExpandMore","role","aria-labelledby","AccordionStep","React","forwardRef"],"mappings":"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"}
+{"version":3,"file":"AccordionStep.js","sources":["../../../src/components/Accordion/AccordionStep.tsx"],"sourcesContent":["import React, { useState, useId, useRef, useEffect } from 'react';\nimport styled from '@emotion/styled';\nimport { FiberManualRecord, ExpandMore } from '../../icons';\nimport { THEME_NAME, getThemeValue } from '../../shared/constants';\nimport { Ellipsis } from '../../shared/styles';\nimport { Badge, BADGE_TYPE } from '../Badge';\nimport { Card } from '../Card';\n\nconst Step = styled(Card)<{ open?: boolean; completed?: boolean }>`\n    transition: all 0.6s ease;\n    overflow: visible;\n    display: flow-root;\n\n    ${(props) => props.open && `margin: 20px 5px;`}\n`;\n\nconst StepHeader = styled.button<{ open?: boolean; disabled?: boolean }>`\n    padding: 20px 15px;\n    display: flex;\n    justify-content: space-between;\n    background: none;\n    border: none;\n    border-radius: 10px;\n    width: 100%;\n    font-size: inherit;\n    color: ${getThemeValue(THEME_NAME.TEXT_COLOR_DARK)};\n\n    &:focus-visible {\n        box-shadow: 0 0 0 4px ${getThemeValue(THEME_NAME.PRIMARY_LIGHT)};\n    }\n\n    & input {\n        appearance: none;\n        margin: 0;\n    }\n\n    ${(props) =>\n        props.open && `border-bottom: 1px solid ${getThemeValue(THEME_NAME.BORDER_LIGHT_COLOR)};`}\n    ${(props) => props.open && `border-radius: 10px 10px 0 0;`}\n\n    ${(props) => props.disabled && `color: ${getThemeValue(THEME_NAME.DISABLED)};`}\n`;\n\nconst HeaderContainer = styled.div<{ open?: boolean; completed?: boolean }>`\n    display: flex;\n    align-items: center;\n    min-width: 40px;\n\n    & svg {\n        vertical-align: top;\n        margin-right: 10px;\n        fill: ${(props) =>\n            props.open\n                ? getThemeValue(THEME_NAME.PRIMARY)\n                : props.completed\n                  ? getThemeValue(THEME_NAME.SUCCESS)\n                  : getThemeValue(THEME_NAME.LIGHT_GREY)};\n        transform: ${(props) => (props.open ? 'scale(0.8)' : 'scale(0.6)')};\n        transition: all 0.3s ease;\n        min-width: 24px;\n    }\n`;\n\nconst ExpandContainer = styled.div<{ open?: boolean }>`\n    display: flex;\n    align-items: center;\n\n    & svg {\n        vertical-align: top;\n        margin-right: 10px;\n        transition: all 0.6s ease;\n        fill: currentColor;\n    }\n\n    ${(props) => (props.open ? `& svg { transform: rotate(180deg); }` : '')}\n`;\n\nconst StepBody = styled.div<{ height: number }>`\n    transition: all 0.6s ease;\n    overflow: hidden;\n    height: ${(props) => props.height || 0}px;\n`;\n\nconst AccordionBadge = styled(Badge)`\n    margin-right: 15px;\n`;\n\nexport const AccordionStepBody = styled.div`\n    padding: 20px 15px;\n`;\n\nexport const AccordionStepFooter = styled.div`\n    display: flex;\n    justify-content: flex-end;\n    padding: 10px 15px;\n    border-top: 1px solid ${getThemeValue(THEME_NAME.BORDER_LIGHT_COLOR)};\n`;\n\n/** Props for `AccordionStep` component */\ninterface AccordionStepProps {\n    /**\n     * If the step has been marked as completed\n     * @default false\n     */\n    completed?: boolean;\n    /** If the step is disabled\n     * @default false\n     */\n    disabled?: boolean;\n    /** Header content for the step */\n    header: React.ReactNode;\n    /** Error text to display as a badge in the header */\n    errorText?: React.ReactNode;\n    /** If the step is expanded */\n    open?: boolean;\n    /** Click handler for the step header */\n    onStepClick?: React.MouseEventHandler<HTMLButtonElement>;\n}\n\n/**\n * AccordionStep Component\n * @param props - Component props\n * @param ref - Ref forwarded to the underlying HTMLDivElement\n */\nfunction AccordionStepComponent(\n    props: React.PropsWithChildren<AccordionStepProps> & React.HTMLAttributes<HTMLDivElement>,\n    ref: React.Ref<HTMLDivElement>,\n) {\n    const [height, setHeight] = useState(0);\n    const {\n        open,\n        disabled = false,\n        header,\n        errorText,\n        completed = false,\n        onStepClick,\n        children,\n        ...restProps\n    } = props;\n\n    // Generate unique IDs for ARIA relationships\n    const headerId = useId();\n    const regionId = useId();\n\n    const contentRef = useRef<HTMLDivElement | null>(null);\n\n    // Measure content height when `open` or children change.\n    useEffect(() => {\n        const el = contentRef.current;\n        setHeight(el?.scrollHeight || 0);\n    }, [open, children]);\n\n    return (\n        <Step {...restProps} ref={ref} open={open} elevated={open} completed={completed}>\n            <StepHeader\n                type=\"button\"\n                open={open}\n                disabled={disabled}\n                onClick={onStepClick}\n                aria-expanded={open ? 'true' : 'false'}\n                aria-controls={regionId}\n                id={headerId}\n            >\n                <HeaderContainer open={open} completed={completed}>\n                    <FiberManualRecord aria-hidden=\"true\" />\n                    <Ellipsis>{header}</Ellipsis>\n                </HeaderContainer>\n                <ExpandContainer open={open}>\n                    {errorText && (\n                        <AccordionBadge inline type={BADGE_TYPE.DANGER}>\n                            {errorText}\n                        </AccordionBadge>\n                    )}\n                    <ExpandMore aria-hidden=\"true\" />\n                </ExpandContainer>\n            </StepHeader>\n            <StepBody\n                ref={contentRef}\n                height={open ? height : 0}\n                role=\"region\"\n                id={regionId}\n                aria-labelledby={headerId}\n                aria-hidden={open ? 'false' : 'true'}\n            >\n                {open && children}\n            </StepBody>\n        </Step>\n    );\n}\n\nconst AccordionStep = React.forwardRef<\n    HTMLDivElement,\n    React.PropsWithChildren<AccordionStepProps> & React.HTMLAttributes<HTMLDivElement>\n>(AccordionStepComponent);\n\nexport default AccordionStep;\n"],"names":["Step","styled","Card","props","open","StepHeader","getThemeValue","THEME_NAME","TEXT_COLOR_DARK","PRIMARY_LIGHT","BORDER_LIGHT_COLOR","disabled","DISABLED","HeaderContainer","PRIMARY","completed","SUCCESS","LIGHT_GREY","ExpandContainer","StepBody","height","AccordionBadge","Badge","AccordionStepBody","AccordionStepFooter","AccordionStepComponent","ref","setHeight","useState","header","errorText","onStepClick","children","restProps","headerId","useId","regionId","contentRef","useRef","useEffect","el","current","scrollHeight","_jsxs","elevated","type","onClick","aria-expanded","aria-controls","id","_jsx","FiberManualRecord","aria-hidden","Ellipsis","inline","BADGE_TYPE","DANGER","ExpandMore","role","aria-labelledby","AccordionStep","React","forwardRef"],"mappings":"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"}

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

@@ -4,9 +4,9 @@ import styled from '@emotion/styled';
 import { getThemeValue, THEME_NAME } from '../../shared/constants.js';
 
 const StyledCard = /*#__PURE__*/ styled("div", {
-    target: "e9lfq9w0",
+    target: "e7s3yg90",
     label: "StyledCard"
-})("border-radius:10px;background-color:", getThemeValue(THEME_NAME.BACKGROUND), ";", (props)=>props.elevated ? `box-shadow: ${getThemeValue(THEME_NAME.MODAL_SHADOW)};` : `box-shadow: ${getThemeValue(THEME_NAME.SHADOW)};`, "    margin:5px;overflow:auto;position:relative;");
+})("border-radius:10px;background-color:", getThemeValue(THEME_NAME.BACKGROUND), ";", (props)=>props.elevated ? `box-shadow: ${getThemeValue(THEME_NAME.MODAL_SHADOW)};` : `box-shadow: ${getThemeValue(THEME_NAME.SHADOW)};`, "    margin:5px;overflow:visible;display:flow-root;position:relative;");
 /**
  * Card Component
  * @param props - Component props

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

@@ -1 +1 @@
-{"version":3,"file":"Card.js","sources":["../../../src/components/Card/Card.tsx"],"sourcesContent":["import React from 'react';\nimport styled from '@emotion/styled';\nimport { THEME_NAME, getThemeValue } from '../../shared/constants';\n\ntype CardProps = {\n    /** Shows a shadow around the card to show elevation */\n    elevated?: boolean;\n} & React.HTMLAttributes<HTMLDivElement>;\n\nconst StyledCard = styled.div<CardProps>`\n    border-radius: 10px;\n    background-color: ${getThemeValue(THEME_NAME.BACKGROUND)};\n    ${(props) =>\n        props.elevated\n            ? `box-shadow: ${getThemeValue(THEME_NAME.MODAL_SHADOW)};`\n            : `box-shadow: ${getThemeValue(THEME_NAME.SHADOW)};`}\n    margin: 5px;\n    overflow: auto;\n    position: relative;\n`;\n\n/**\n * Card Component\n * @param props - Component props\n * @param ref - Ref forwarded to the underlying HTMLAr\n */\nfunction CardComponent(props: CardProps, ref: React.Ref<HTMLDivElement>) {\n    return <StyledCard {...props} ref={ref} />;\n}\n\nconst Card = React.forwardRef<HTMLDivElement, CardProps>(CardComponent);\nexport default Card;\n"],"names":["StyledCard","styled","getThemeValue","THEME_NAME","BACKGROUND","props","elevated","MODAL_SHADOW","SHADOW","CardComponent","ref","_jsx","Card","React","forwardRef"],"mappings":";;;;;AASA,MAAMA,UAAAA,iBAAaC,MAAAA,CAAAA,KAAAA,EAAAA;;;2CAEKC,aAAAA,CAAcC,UAAAA,CAAWC,UAAU,CAAA,EAAA,GAAA,EACrD,CAACC,KAAAA,GACCA,KAAAA,CAAMC,QAAQ,GACR,CAAC,YAAY,EAAEJ,aAAAA,CAAcC,UAAAA,CAAWI,YAAY,CAAA,CAAE,CAAC,CAAC,GACxD,CAAC,YAAY,EAAEL,aAAAA,CAAcC,UAAAA,CAAWK,MAAM,CAAA,CAAE,CAAC,CAAC,EAAA,iDAAA,CAAA;AAMhE;;;;AAIC,IACD,SAASC,aAAAA,CAAcJ,KAAgB,EAAEK,GAA8B,EAAA;AACnE,IAAA,qBAAOC,GAAA,CAACX,UAAAA,EAAAA;AAAY,QAAA,GAAGK,KAAK;QAAEK,GAAAA,EAAKA;;AACvC;AAEA,MAAME,IAAAA,iBAAOC,KAAAA,CAAMC,UAAU,CAA4BL,aAAAA;;;;"}
+{"version":3,"file":"Card.js","sources":["../../../src/components/Card/Card.tsx"],"sourcesContent":["import React from 'react';\nimport styled from '@emotion/styled';\nimport { THEME_NAME, getThemeValue } from '../../shared/constants';\n\ntype CardProps = {\n    /** Shows a shadow around the card to show elevation */\n    elevated?: boolean;\n} & React.HTMLAttributes<HTMLDivElement>;\n\nconst StyledCard = styled.div<CardProps>`\n    border-radius: 10px;\n    background-color: ${getThemeValue(THEME_NAME.BACKGROUND)};\n    ${(props) =>\n        props.elevated\n            ? `box-shadow: ${getThemeValue(THEME_NAME.MODAL_SHADOW)};`\n            : `box-shadow: ${getThemeValue(THEME_NAME.SHADOW)};`}\n    margin: 5px;\n    overflow: visible;\n    display: flow-root;\n    position: relative;\n`;\n\n/**\n * Card Component\n * @param props - Component props\n * @param ref - Ref forwarded to the underlying HTMLAr\n */\nfunction CardComponent(props: CardProps, ref: React.Ref<HTMLDivElement>) {\n    return <StyledCard {...props} ref={ref} />;\n}\n\nconst Card = React.forwardRef<HTMLDivElement, CardProps>(CardComponent);\nexport default Card;\n"],"names":["StyledCard","styled","getThemeValue","THEME_NAME","BACKGROUND","props","elevated","MODAL_SHADOW","SHADOW","CardComponent","ref","_jsx","Card","React","forwardRef"],"mappings":";;;;;AASA,MAAMA,UAAAA,iBAAaC,MAAAA,CAAAA,KAAAA,EAAAA;;;2CAEKC,aAAAA,CAAcC,UAAAA,CAAWC,UAAU,CAAA,EAAA,GAAA,EACrD,CAACC,KAAAA,GACCA,KAAAA,CAAMC,QAAQ,GACR,CAAC,YAAY,EAAEJ,aAAAA,CAAcC,UAAAA,CAAWI,YAAY,CAAA,CAAE,CAAC,CAAC,GACxD,CAAC,YAAY,EAAEL,aAAAA,CAAcC,UAAAA,CAAWK,MAAM,CAAA,CAAE,CAAC,CAAC,EAAA,sEAAA,CAAA;AAOhE;;;;AAIC,IACD,SAASC,aAAAA,CAAcJ,KAAgB,EAAEK,GAA8B,EAAA;AACnE,IAAA,qBAAOC,GAAA,CAACX,UAAAA,EAAAA;AAAY,QAAA,GAAGK,KAAK;QAAEK,GAAAA,EAAKA;;AACvC;AAEA,MAAME,IAAAA,iBAAOC,KAAAA,CAAMC,UAAU,CAA4BL,aAAAA;;;;"}

package/lib-esm/components/Groups/Group.js

@@ -4,9 +4,9 @@ import styled from '@emotion/styled';
 import { getThemeValue, THEME_NAME } from '../../shared/constants.js';
 
 const Container$3 = /*#__PURE__*/ styled("div", {
-    target: "e1m58trk0",
+    target: "e1t79jfh0",
     label: "Container"
-})("display:inline-flex;border:1px solid ", getThemeValue(THEME_NAME.BORDER_COLOR), ";border-radius:3px;margin:5px;& button,& label{margin:0;border:none;border-radius:0;border-left:1px solid ", getThemeValue(THEME_NAME.BORDER_COLOR), ";box-shadow:none;height:32px;}& > div button{border-left:none;}& input,& select{border:none;height:32px;}& input,& select{border-radius:0;}& input:active,& select:active{box-shadow:none;}& > div > span{top:8px;}& > *:first-of-type,& > label:first-of-type input,& > label:first-of-type select,& > *:first-of-type label,& > *:first-of-type input{border-left:none;border-radius:2px 0 0 2px;}& > *:last-child,& > label:last-child input,& > label:last-child select,& > *:last-child label,& > *:last-child input{border-radius:0 2px 2px 0;}& *:focus,& *:focus + span{z-index:1;}&:focus-within,&:hover{box-shadow:", getThemeValue(THEME_NAME.HOVER_SHADOW), ";}", (props)=>props.errorText ? `
+})("display:inline-flex;border:1px solid ", getThemeValue(THEME_NAME.BORDER_COLOR), ";border-radius:3px;margin:5px;& button,& label{margin:0;border:none;border-radius:0;border-left:1px solid ", getThemeValue(THEME_NAME.BORDER_COLOR), ";box-shadow:none;height:32px;}& > div button{border-left:none;}& input,& select{border:none;height:32px;}& input,& select{border-radius:0;}& input:active,& select:active{box-shadow:none;}& > div > span{top:8px;}& > *:nth-child(1 of:not(style)),& > label:nth-child(1 of:not(style)) input,& > label:nth-child(1 of:not(style)) select,& > *:nth-child(1 of:not(style)) label,& > *:nth-child(1 of:not(style)) input{border-left:none;border-radius:2px 0 0 2px;}& > *:last-child,& > label:last-child input,& > label:last-child select,& > *:last-child label,& > *:last-child input{border-radius:0 2px 2px 0;}& *:focus,& *:focus + span{z-index:1;}&:focus-within,&:hover{box-shadow:", getThemeValue(THEME_NAME.HOVER_SHADOW), ";}", (props)=>props.errorText ? `
         border-color: ${getThemeValue(THEME_NAME.ERROR)};
 
         & > button, & > label {
@@ -14,7 +14,7 @@ const Container$3 = /*#__PURE__*/ styled("div", {
         }
     ` : '');
 const ErrorContainer = /*#__PURE__*/ styled("div", {
-    target: "e1m58trk1",
+    target: "e1t79jfh1",
     label: "ErrorContainer"
 })("color:", getThemeValue(THEME_NAME.ERROR), ";margin-left:8px;font-size:12px;");
 /**

package/lib-esm/components/Groups/Group.js.map

@@ -1 +1 @@
-{"version":3,"file":"Group.js","sources":["../../../src/components/Groups/Group.tsx"],"sourcesContent":["import React, { useId } from 'react';\nimport styled from '@emotion/styled';\nimport { getThemeValue, THEME_NAME } from '../../shared/constants';\n\nconst Container = styled.div<GroupProps>`\n    display: inline-flex;\n    border: 1px solid ${getThemeValue(THEME_NAME.BORDER_COLOR)};\n    border-radius: 3px;\n    margin: 5px;\n\n    /* overrides */\n    & button,\n    & label {\n        margin: 0;\n        border: none;\n        border-radius: 0;\n        border-left: 1px solid ${getThemeValue(THEME_NAME.BORDER_COLOR)};\n        box-shadow: none;\n        height: 32px;\n    }\n\n    & > div button {\n        border-left: none;\n    }\n\n    & input,\n    & select {\n        border: none;\n        height: 32px;\n    }\n\n    & input,\n    & select {\n        border-radius: 0;\n    }\n\n    & input:active,\n    & select:active {\n        box-shadow: none;\n    }\n\n    & > div > span {\n        top: 8px;\n    }\n\n    /* Handling for first and last child */\n    & > *:first-of-type,\n    & > label:first-of-type input,\n    & > label:first-of-type select,\n    & > *:first-of-type label,\n    & > *:first-of-type input {\n        border-left: none;\n        border-radius: 2px 0 0 2px;\n    }\n\n    & > *:last-child,\n    & > label:last-child input,\n    & > label:last-child select,\n    & > *:last-child label,\n    & > *:last-child input {\n        border-radius: 0 2px 2px 0;\n    }\n\n    /* focus */\n    & *:focus,\n    & *:focus + span {\n        z-index: 1;\n    }\n\n    &:focus-within,\n    &:hover {\n        box-shadow: ${getThemeValue(THEME_NAME.HOVER_SHADOW)};\n    }\n\n    ${(props) =>\n        props.errorText\n            ? `\n        border-color: ${getThemeValue(THEME_NAME.ERROR)};\n\n        & > button, & > label {\n            border-color: ${getThemeValue(THEME_NAME.ERROR)};\n        }\n    `\n            : ''}\n`;\n\nconst ErrorContainer = styled.div`\n    color: ${getThemeValue(THEME_NAME.ERROR)};\n    margin-left: 8px;\n    font-size: 12px;\n`;\n\ntype GroupProps = React.PropsWithChildren<{\n    /** Error Message for the group */\n    errorText?: string;\n}>;\n\n/**\n * Group Component\n * @param props - Component props\n * @param ref - Ref forwarded to the underlying HTMLDivElement\n */\nfunction GroupComponent(\n    props: React.PropsWithChildren<GroupProps>,\n    ref: React.Ref<HTMLDivElement>,\n) {\n    const errorId = useId();\n\n    return (\n        <>\n            <Container\n                {...props}\n                ref={ref}\n                aria-describedby={props.errorText ? errorId : undefined}\n            >\n                {props.children}\n            </Container>\n            {props.errorText && <ErrorContainer id={errorId}>{props.errorText}</ErrorContainer>}\n        </>\n    );\n}\n\nconst Group = React.forwardRef<HTMLDivElement, GroupProps>(GroupComponent);\nexport default Group;\n"],"names":["Container","styled","getThemeValue","THEME_NAME","BORDER_COLOR","HOVER_SHADOW","props","errorText","ERROR","ErrorContainer","GroupComponent","ref","errorId","useId","_jsxs","_Fragment","_jsx","aria-describedby","undefined","children","id","Group","React","forwardRef"],"mappings":";;;;;AAIA,MAAMA,WAAAA,iBAAYC,MAAAA,CAAAA,KAAAA,EAAAA;;;AAEMC,CAAAA,CAAAA,CAAAA,uCAAAA,EAAAA,aAAAA,CAAcC,WAAWC,YAAY,CAAA,EAAA,4GAAA,EAU5BF,aAAAA,CAAcC,UAAAA,CAAWC,YAAY,CAAA,EAAA,+lBAAA,EAuDhDF,aAAAA,CAAcC,UAAAA,CAAWE,YAAY,SAGrD,CAACC,KAAAA,GACCA,KAAAA,CAAMC,SAAS,GACT;sBACQ,EAAEL,aAAAA,CAAcC,UAAAA,CAAWK,KAAK,CAAA,CAAE;;;0BAG9B,EAAEN,aAAAA,CAAcC,UAAAA,CAAWK,KAAK,CAAA,CAAE;;AAExD,IAAA,CAAC,GACS,EAAA,CAAA;AAGd,MAAMC,cAAAA,iBAAiBR,MAAAA,CAAAA,KAAAA,EAAAA;;;AACVC,CAAAA,CAAAA,CAAAA,QAAAA,EAAAA,aAAAA,CAAcC,WAAWK,KAAK,CAAA,EAAA,kCAAA,CAAA;AAU3C;;;;AAIC,IACD,SAASE,cAAAA,CACLJ,KAA0C,EAC1CK,GAA8B,EAAA;AAE9B,IAAA,MAAMC,OAAAA,GAAUC,KAAAA,EAAAA;IAEhB,qBACIC,IAAA,CAAAC,QAAA,EAAA;;0BACIC,GAAA,CAAChB,WAAAA,EAAAA;AACI,gBAAA,GAAGM,KAAK;gBACTK,GAAAA,EAAKA,GAAAA;gBACLM,kBAAAA,EAAkBX,KAAAA,CAAMC,SAAS,GAAGK,OAAAA,GAAUM,SAAAA;AAE7CZ,gBAAAA,QAAAA,EAAAA,KAAAA,CAAMa;;YAEVb,KAAAA,CAAMC,SAAS,kBAAIS,GAAA,CAACP,cAAAA,EAAAA;gBAAeW,EAAAA,EAAIR,OAAAA;AAAUN,gBAAAA,QAAAA,EAAAA,KAAAA,CAAMC;;;;AAGpE;AAEA,MAAMc,KAAAA,iBAAQC,KAAAA,CAAMC,UAAU,CAA6Bb,cAAAA;;;;"}
+{"version":3,"file":"Group.js","sources":["../../../src/components/Groups/Group.tsx"],"sourcesContent":["import React, { useId } from 'react';\nimport styled from '@emotion/styled';\nimport { getThemeValue, THEME_NAME } from '../../shared/constants';\n\nconst Container = styled.div<GroupProps>`\n    display: inline-flex;\n    border: 1px solid ${getThemeValue(THEME_NAME.BORDER_COLOR)};\n    border-radius: 3px;\n    margin: 5px;\n\n    /* overrides */\n    & button,\n    & label {\n        margin: 0;\n        border: none;\n        border-radius: 0;\n        border-left: 1px solid ${getThemeValue(THEME_NAME.BORDER_COLOR)};\n        box-shadow: none;\n        height: 32px;\n    }\n\n    & > div button {\n        border-left: none;\n    }\n\n    & input,\n    & select {\n        border: none;\n        height: 32px;\n    }\n\n    & input,\n    & select {\n        border-radius: 0;\n    }\n\n    & input:active,\n    & select:active {\n        box-shadow: none;\n    }\n\n    & > div > span {\n        top: 8px;\n    }\n\n    /* Handling for first and last child */\n    & > *:nth-child(1 of :not(style)),\n    & > label:nth-child(1 of :not(style)) input,\n    & > label:nth-child(1 of :not(style)) select,\n    & > *:nth-child(1 of :not(style)) label,\n    & > *:nth-child(1 of :not(style)) input {\n        border-left: none;\n        border-radius: 2px 0 0 2px;\n    }\n\n    & > *:last-child,\n    & > label:last-child input,\n    & > label:last-child select,\n    & > *:last-child label,\n    & > *:last-child input {\n        border-radius: 0 2px 2px 0;\n    }\n\n    /* focus */\n    & *:focus,\n    & *:focus + span {\n        z-index: 1;\n    }\n\n    &:focus-within,\n    &:hover {\n        box-shadow: ${getThemeValue(THEME_NAME.HOVER_SHADOW)};\n    }\n\n    ${(props) =>\n        props.errorText\n            ? `\n        border-color: ${getThemeValue(THEME_NAME.ERROR)};\n\n        & > button, & > label {\n            border-color: ${getThemeValue(THEME_NAME.ERROR)};\n        }\n    `\n            : ''}\n`;\n\nconst ErrorContainer = styled.div`\n    color: ${getThemeValue(THEME_NAME.ERROR)};\n    margin-left: 8px;\n    font-size: 12px;\n`;\n\ntype GroupProps = React.PropsWithChildren<{\n    /** Error Message for the group */\n    errorText?: string;\n}>;\n\n/**\n * Group Component\n * @param props - Component props\n * @param ref - Ref forwarded to the underlying HTMLDivElement\n */\nfunction GroupComponent(\n    props: React.PropsWithChildren<GroupProps>,\n    ref: React.Ref<HTMLDivElement>,\n) {\n    const errorId = useId();\n\n    return (\n        <>\n            <Container\n                {...props}\n                ref={ref}\n                aria-describedby={props.errorText ? errorId : undefined}\n            >\n                {props.children}\n            </Container>\n            {props.errorText && <ErrorContainer id={errorId}>{props.errorText}</ErrorContainer>}\n        </>\n    );\n}\n\nconst Group = React.forwardRef<HTMLDivElement, GroupProps>(GroupComponent);\nexport default Group;\n"],"names":["Container","styled","getThemeValue","THEME_NAME","BORDER_COLOR","HOVER_SHADOW","props","errorText","ERROR","ErrorContainer","GroupComponent","ref","errorId","useId","_jsxs","_Fragment","_jsx","aria-describedby","undefined","children","id","Group","React","forwardRef"],"mappings":";;;;;AAIA,MAAMA,WAAAA,iBAAYC,MAAAA,CAAAA,KAAAA,EAAAA;;;AAEMC,CAAAA,CAAAA,CAAAA,uCAAAA,EAAAA,aAAAA,CAAcC,WAAWC,YAAY,CAAA,EAAA,4GAAA,EAU5BF,aAAAA,CAAcC,UAAAA,CAAWC,YAAY,CAAA,EAAA,gqBAAA,EAuDhDF,aAAAA,CAAcC,UAAAA,CAAWE,YAAY,SAGrD,CAACC,KAAAA,GACCA,KAAAA,CAAMC,SAAS,GACT;sBACQ,EAAEL,aAAAA,CAAcC,UAAAA,CAAWK,KAAK,CAAA,CAAE;;;0BAG9B,EAAEN,aAAAA,CAAcC,UAAAA,CAAWK,KAAK,CAAA,CAAE;;AAExD,IAAA,CAAC,GACS,EAAA,CAAA;AAGd,MAAMC,cAAAA,iBAAiBR,MAAAA,CAAAA,KAAAA,EAAAA;;;AACVC,CAAAA,CAAAA,CAAAA,QAAAA,EAAAA,aAAAA,CAAcC,WAAWK,KAAK,CAAA,EAAA,kCAAA,CAAA;AAU3C;;;;AAIC,IACD,SAASE,cAAAA,CACLJ,KAA0C,EAC1CK,GAA8B,EAAA;AAE9B,IAAA,MAAMC,OAAAA,GAAUC,KAAAA,EAAAA;IAEhB,qBACIC,IAAA,CAAAC,QAAA,EAAA;;0BACIC,GAAA,CAAChB,WAAAA,EAAAA;AACI,gBAAA,GAAGM,KAAK;gBACTK,GAAAA,EAAKA,GAAAA;gBACLM,kBAAAA,EAAkBX,KAAAA,CAAMC,SAAS,GAAGK,OAAAA,GAAUM,SAAAA;AAE7CZ,gBAAAA,QAAAA,EAAAA,KAAAA,CAAMa;;YAEVb,KAAAA,CAAMC,SAAS,kBAAIS,GAAA,CAACP,cAAAA,EAAAA;gBAAeW,EAAAA,EAAIR,OAAAA;AAAUN,gBAAAA,QAAAA,EAAAA,KAAAA,CAAMC;;;;AAGpE;AAEA,MAAMc,KAAAA,iBAAQC,KAAAA,CAAMC,UAAU,CAA6Bb,cAAAA;;;;"}

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

@@ -95,11 +95,15 @@ import { NOTIFICATION_POSITION } from './types.js';
      */ this.destroy = (position)=>{
             const container = this.containers.get(position);
             if (container) {
-                container.root.unmount();
-                if (document.body.contains(container.div)) {
-                    document.body.removeChild(container.div);
-                }
-                this.containers.delete(position);
+                // Defer unmount to avoid trying to synchronously unmount a root
+                // while React is already rendering which can cause a race.
+                setTimeout(()=>{
+                    container.root.unmount();
+                    if (document.body.contains(container.div)) {
+                        document.body.removeChild(container.div);
+                    }
+                    this.containers.delete(position);
+                }, 0);
             }
         };
     }

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

@@ -1 +1 @@
-{"version":3,"file":"Notification.js","sources":["../../../src/components/Notification/Notification.tsx"],"sourcesContent":["import { type RefCallback } from 'react';\nimport { flushSync } from 'react-dom';\nimport { createRoot, type Root } from 'react-dom/client';\nimport LayerManager, { LAYER_POSITION } from '../../shared/LayerManager';\nimport NotificationManager from './NotificationManager';\nimport { NOTIFICATION_POSITION, NOTIFICATION_TYPE, NotificationOptions } from './types';\n\ntype NotificationProps = {\n    /** Title of the notification */\n    title: string;\n    /** Body of the notification */\n    description: string;\n    /** Id for the notification, helps in de-duplication. */\n    id?: string;\n    /**\n     * Duration for the notification in milliseconds\n     * @default 5000\n     */\n    duration?: number;\n    /**\n     * Creates sticky notification\n     * @default false\n     */\n    sticky?: boolean;\n    /**\n     * Type of notification\n     * @default NOTIFICATION_TYPE.INFO\n     */\n    type?: NOTIFICATION_TYPE;\n    /** Action button text */\n    buttonText?: string;\n    /** Action button click callback */\n    buttonClick?: () => void;\n    /** Notification close callback. */\n    onClose?: () => void;\n    /** Aria label for the close button on the notification. Defaults to \"Close notification\" */\n    closeButtonAriaLabel?: string;\n};\n\n/**\n * This dummy component is used to extract props for documentation in Storybook.\n * @param props\n * @returns\n */\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nexport function StoryProps(props: NotificationProps) {\n    return null;\n}\n\n/** Maps notification position to layer position */\nconst positionMap = {\n    [NOTIFICATION_POSITION.TOP_LEFT]: LAYER_POSITION.TOP_LEFT,\n    [NOTIFICATION_POSITION.TOP_RIGHT]: LAYER_POSITION.TOP_RIGHT,\n    [NOTIFICATION_POSITION.BOTTOM_LEFT]: LAYER_POSITION.BOTTOM_LEFT,\n    [NOTIFICATION_POSITION.BOTTOM_RIGHT]: LAYER_POSITION.BOTTOM_RIGHT,\n};\n\n/** Notification class */\nclass Notification {\n    /** Helps in maintaining single instance for different positions. */\n    private containers: Map<\n        NOTIFICATION_POSITION,\n        {\n            manager: NotificationManager | null;\n            root: Root;\n            div: HTMLDivElement;\n        }\n    > = new Map();\n\n    /** Pending add requests waiting for manager to mount */\n    private pending: Map<NOTIFICATION_POSITION, Array<(manager: NotificationManager) => void>> =\n        new Map();\n\n    /**\n     * Adds a notification\n     *\n     * @param position - The position where the notification should appear\n     * @param options - Configuration options for the notification\n     * @returns The notification ID or a promise that resolves to the notification ID\n     */\n    public add = (\n        position: NOTIFICATION_POSITION,\n        options: NotificationOptions,\n        ariaLabel: string = 'Notifications',\n    ) => {\n        if (!this.containers.has(position)) {\n            /** Callback ref to capture the NotificationManager instance when it mounts */\n            const refCallback: RefCallback<NotificationManager> = (instance) => {\n                if (instance) {\n                    const container = this.containers.get(position);\n                    if (container) {\n                        container.manager = instance;\n                    }\n\n                    // Process pending requests\n                    const queue = this.pending.get(position);\n                    if (queue) {\n                        queue.forEach((cb) => cb(instance));\n                        this.pending.delete(position);\n                    }\n                }\n            };\n\n            const [Component] = LayerManager.renderLayer({\n                closeOnEsc: false,\n                closeOnOverlayClick: false,\n                position: positionMap[position],\n                alwaysOnTop: true,\n                component: (\n                    <NotificationManager\n                        ref={refCallback}\n                        position={position}\n                        onEmpty={() => this.destroy(position)}\n                        ariaLabel={ariaLabel}\n                    />\n                ),\n            });\n\n            // Create a div to mount the Component\n            const div = document.createElement('div');\n            document.body.appendChild(div);\n            const root = createRoot(div);\n\n            this.containers.set(position, {\n                manager: null,\n                root,\n                div,\n            });\n\n            // Render the Component which will trigger the LayerManager's useEffect\n            flushSync(() => {\n                root.render(<Component />);\n            });\n        }\n\n        const container = this.containers.get(position);\n        if (container && container.manager) {\n            return container.manager.add(options);\n        }\n\n        // If manager is not ready yet, add to pending queue\n        return new Promise<string>((resolve) => {\n            const queue = this.pending.get(position) || [];\n            queue.push((manager) => {\n                resolve(manager.add(options));\n            });\n            this.pending.set(position, queue);\n        });\n    };\n\n    /**\n     * Removes a notification\n     *\n     * @param position - The position of the notification container\n     * @param id - The unique ID of the notification to remove\n     */\n    public remove = (position: NOTIFICATION_POSITION, id: string) => {\n        const container = this.containers.get(position);\n        if (container && container.manager) {\n            container.manager.remove(id);\n        }\n    };\n\n    /**\n     * Destroys entire stack of notifications at a position.\n     * Unmounts the React root and cleans up DOM elements.\n     *\n     * @param position - The position of the notification container to destroy\n     */\n    public destroy = (position: NOTIFICATION_POSITION) => {\n        const container = this.containers.get(position);\n        if (container) {\n            container.root.unmount();\n            if (document.body.contains(container.div)) {\n                document.body.removeChild(container.div);\n            }\n            this.containers.delete(position);\n        }\n    };\n}\n\n/** Export a singleton instance */\nexport default new Notification();\n"],"names":["positionMap","NOTIFICATION_POSITION","TOP_LEFT","LAYER_POSITION","TOP_RIGHT","BOTTOM_LEFT","BOTTOM_RIGHT","Notification","containers","Map","pending","add","position","options","ariaLabel","has","refCallback","instance","container","get","manager","queue","forEach","cb","delete","Component","LayerManager","renderLayer","closeOnEsc","closeOnOverlayClick","alwaysOnTop","component","_jsx","NotificationManager","ref","onEmpty","destroy","div","document","createElement","body","appendChild","root","createRoot","set","flushSync","render","Promise","resolve","push","remove","id","unmount","contains","removeChild"],"mappings":"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"}
+{"version":3,"file":"Notification.js","sources":["../../../src/components/Notification/Notification.tsx"],"sourcesContent":["import { type RefCallback } from 'react';\nimport { flushSync } from 'react-dom';\nimport { createRoot, type Root } from 'react-dom/client';\nimport LayerManager, { LAYER_POSITION } from '../../shared/LayerManager';\nimport NotificationManager from './NotificationManager';\nimport { NOTIFICATION_POSITION, NOTIFICATION_TYPE, NotificationOptions } from './types';\n\ntype NotificationProps = {\n    /** Title of the notification */\n    title: string;\n    /** Body of the notification */\n    description: string;\n    /** Id for the notification, helps in de-duplication. */\n    id?: string;\n    /**\n     * Duration for the notification in milliseconds\n     * @default 5000\n     */\n    duration?: number;\n    /**\n     * Creates sticky notification\n     * @default false\n     */\n    sticky?: boolean;\n    /**\n     * Type of notification\n     * @default NOTIFICATION_TYPE.INFO\n     */\n    type?: NOTIFICATION_TYPE;\n    /** Action button text */\n    buttonText?: string;\n    /** Action button click callback */\n    buttonClick?: () => void;\n    /** Notification close callback. */\n    onClose?: () => void;\n    /** Aria label for the close button on the notification. Defaults to \"Close notification\" */\n    closeButtonAriaLabel?: string;\n};\n\n/**\n * This dummy component is used to extract props for documentation in Storybook.\n * @param props\n * @returns\n */\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nexport function StoryProps(props: NotificationProps) {\n    return null;\n}\n\n/** Maps notification position to layer position */\nconst positionMap = {\n    [NOTIFICATION_POSITION.TOP_LEFT]: LAYER_POSITION.TOP_LEFT,\n    [NOTIFICATION_POSITION.TOP_RIGHT]: LAYER_POSITION.TOP_RIGHT,\n    [NOTIFICATION_POSITION.BOTTOM_LEFT]: LAYER_POSITION.BOTTOM_LEFT,\n    [NOTIFICATION_POSITION.BOTTOM_RIGHT]: LAYER_POSITION.BOTTOM_RIGHT,\n};\n\n/** Notification class */\nclass Notification {\n    /** Helps in maintaining single instance for different positions. */\n    private containers: Map<\n        NOTIFICATION_POSITION,\n        {\n            manager: NotificationManager | null;\n            root: Root;\n            div: HTMLDivElement;\n        }\n    > = new Map();\n\n    /** Pending add requests waiting for manager to mount */\n    private pending: Map<NOTIFICATION_POSITION, Array<(manager: NotificationManager) => void>> =\n        new Map();\n\n    /**\n     * Adds a notification\n     *\n     * @param position - The position where the notification should appear\n     * @param options - Configuration options for the notification\n     * @returns The notification ID or a promise that resolves to the notification ID\n     */\n    public add = (\n        position: NOTIFICATION_POSITION,\n        options: NotificationOptions,\n        ariaLabel: string = 'Notifications',\n    ) => {\n        if (!this.containers.has(position)) {\n            /** Callback ref to capture the NotificationManager instance when it mounts */\n            const refCallback: RefCallback<NotificationManager> = (instance) => {\n                if (instance) {\n                    const container = this.containers.get(position);\n                    if (container) {\n                        container.manager = instance;\n                    }\n\n                    // Process pending requests\n                    const queue = this.pending.get(position);\n                    if (queue) {\n                        queue.forEach((cb) => cb(instance));\n                        this.pending.delete(position);\n                    }\n                }\n            };\n\n            const [Component] = LayerManager.renderLayer({\n                closeOnEsc: false,\n                closeOnOverlayClick: false,\n                position: positionMap[position],\n                alwaysOnTop: true,\n                component: (\n                    <NotificationManager\n                        ref={refCallback}\n                        position={position}\n                        onEmpty={() => this.destroy(position)}\n                        ariaLabel={ariaLabel}\n                    />\n                ),\n            });\n\n            // Create a div to mount the Component\n            const div = document.createElement('div');\n            document.body.appendChild(div);\n            const root = createRoot(div);\n\n            this.containers.set(position, {\n                manager: null,\n                root,\n                div,\n            });\n\n            // Render the Component which will trigger the LayerManager's useEffect\n            flushSync(() => {\n                root.render(<Component />);\n            });\n        }\n\n        const container = this.containers.get(position);\n        if (container && container.manager) {\n            return container.manager.add(options);\n        }\n\n        // If manager is not ready yet, add to pending queue\n        return new Promise<string>((resolve) => {\n            const queue = this.pending.get(position) || [];\n            queue.push((manager) => {\n                resolve(manager.add(options));\n            });\n            this.pending.set(position, queue);\n        });\n    };\n\n    /**\n     * Removes a notification\n     *\n     * @param position - The position of the notification container\n     * @param id - The unique ID of the notification to remove\n     */\n    public remove = (position: NOTIFICATION_POSITION, id: string) => {\n        const container = this.containers.get(position);\n        if (container && container.manager) {\n            container.manager.remove(id);\n        }\n    };\n\n    /**\n     * Destroys entire stack of notifications at a position.\n     * Unmounts the React root and cleans up DOM elements.\n     *\n     * @param position - The position of the notification container to destroy\n     */\n    public destroy = (position: NOTIFICATION_POSITION) => {\n        const container = this.containers.get(position);\n        if (container) {\n            // Defer unmount to avoid trying to synchronously unmount a root\n            // while React is already rendering which can cause a race.\n            setTimeout(() => {\n                container.root.unmount();\n                if (document.body.contains(container.div)) {\n                    document.body.removeChild(container.div);\n                }\n                this.containers.delete(position);\n            }, 0);\n        }\n    };\n}\n\n/** Export a singleton instance */\nexport default new Notification();\n"],"names":["positionMap","NOTIFICATION_POSITION","TOP_LEFT","LAYER_POSITION","TOP_RIGHT","BOTTOM_LEFT","BOTTOM_RIGHT","Notification","containers","Map","pending","add","position","options","ariaLabel","has","refCallback","instance","container","get","manager","queue","forEach","cb","delete","Component","LayerManager","renderLayer","closeOnEsc","closeOnOverlayClick","alwaysOnTop","component","_jsx","NotificationManager","ref","onEmpty","destroy","div","document","createElement","body","appendChild","root","createRoot","set","flushSync","render","Promise","resolve","push","remove","id","setTimeout","unmount","contains","removeChild"],"mappings":"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"}

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

@@ -28,15 +28,15 @@ const getBackgroundColor = (type)=>{
     }
 };
 const ToastContainer = /*#__PURE__*/ styled(Card, {
-    target: "e1bc14ug0",
+    target: "eb8x2sp0",
     label: "ToastContainer"
 })("box-sizing:border-box;border-radius:3px;padding:12px;background-color:", (props)=>getBackgroundColor(props.type), ";color:", getThemeValue(THEME_NAME.TEXT_COLOR_LIGHT), ";margin:20px;font-size:14px;line-height:20px;transform:translateY(100%);transition:transform 0.3s ease;width:344px;display:flex;align-items:center;position:relative;& svg{width:20px;height:20px;fill:currentColor;}@media (max-width:480px){&{margin:0;width:100vw;border-radius:0;}}.nf-layer-enter &{transform:translateY(0%);}");
 const TextContainer = /*#__PURE__*/ styled("div", {
-    target: "e1bc14ug1",
+    target: "eb8x2sp1",
     label: "TextContainer"
 })("flex:1;");
 const CloseContainer = /*#__PURE__*/ styled("button", {
-    target: "e1bc14ug2",
+    target: "eb8x2sp2",
     label: "CloseContainer"
 })("background-color:transparent;color:", getThemeValue(THEME_NAME.PRIMARY_LIGHT), ";padding:6px 10px;border:none;border-radius:3px;text-transform:uppercase;cursor:pointer;&:focus{background-color:rgba(255,255,255,0.1);}");
 const DEFAULT_DURATION = 2000;
@@ -98,7 +98,9 @@ class Toast {
             })
         });
         const Component = this.toast[0];
-        this.root = createRoot(this.element);
+        if (!this.root) {
+            this.root = createRoot(this.element);
+        }
         this.root.render(/*#__PURE__*/ jsx(Component, {}));
         this.timeout = setTimeout(()=>{
             this.remove();

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

@@ -1 +1 @@
-{"version":3,"file":"Toast.js","sources":["../../../src/components/Toast/Toast.tsx"],"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     * Clean up event listeners and DOM elements\n     * Call this when the app is tearing down (useful for tests)\n     */\n    public destroy = () => {\n        if (typeof document !== 'undefined') {\n            document.removeEventListener('keydown', this.handleKeyDown);\n        }\n        this.remove();\n        if (this.ariaLiveContainer && document.body.contains(this.ariaLiveContainer)) {\n            document.body.removeChild(this.ariaLiveContainer);\n        }\n        this.politeRegion = undefined;\n        this.assertiveRegion = undefined;\n        this.ariaLiveContainer = undefined;\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\n        if (region) {\n            region.textContent = '';\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            if (this.timeout) {\n                clearTimeout(this.timeout);\n                this.timeout = undefined;\n            }\n        }\n        this.toast = undefined;\n        this.currentOptions = null;\n        this.isPaused = false;\n\n        setTimeout(() => {\n            if (!this.toast && this.root) {\n                this.root.unmount();\n                this.root = undefined;\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        if (!this.element) return;\n\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"],"names":["TOAST_TYPE","getBackgroundColor","type","getThemeValue","THEME_NAME","INFO","SUCCESS","WARNING","ERROR","TOAST","ToastContainer","styled","Card","props","TEXT_COLOR_LIGHT","TextContainer","CloseContainer","PRIMARY_LIGHT","DEFAULT_DURATION","createAriaLiveRegion","id","ariaLive","region","document","createElement","style","position","width","height","padding","margin","overflow","clip","whiteSpace","borderWidth","setAttribute","Toast","add","options","element","text","buttonText","buttonClick","duration","currentOptions","isPaused","remove","isAssertive","announcement","updateLiveRegion","toast","LayerManager","renderLayer","exitDelay","closeOnEsc","closeOnOverlayClick","alwaysOnTop","LAYER_POSITION","BOTTOM_LEFT","component","_jsx","_Fragment","_jsxs","elevated","onMouseEnter","pause","onMouseLeave","resume","aria-hidden","onClick","aria-label","Component","root","createRoot","render","timeout","setTimeout","destroy","removeEventListener","handleKeyDown","ariaLiveContainer","body","contains","removeChild","politeRegion","undefined","assertiveRegion","setupKeyboardListeners","addEventListener","event","key","preventDefault","resumeTimeout","pauseTimeout","content","textContent","clearTimeout","unmount","appendChild"],"mappings":"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"}
+{"version":3,"file":"Toast.js","sources":["../../../src/components/Toast/Toast.tsx"],"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     * Clean up event listeners and DOM elements\n     * Call this when the app is tearing down (useful for tests)\n     */\n    public destroy = () => {\n        if (typeof document !== 'undefined') {\n            document.removeEventListener('keydown', this.handleKeyDown);\n        }\n        this.remove();\n        if (this.ariaLiveContainer && document.body.contains(this.ariaLiveContainer)) {\n            document.body.removeChild(this.ariaLiveContainer);\n        }\n        this.politeRegion = undefined;\n        this.assertiveRegion = undefined;\n        this.ariaLiveContainer = undefined;\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\n        if (region) {\n            region.textContent = '';\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            if (this.timeout) {\n                clearTimeout(this.timeout);\n                this.timeout = undefined;\n            }\n        }\n        this.toast = undefined;\n        this.currentOptions = null;\n        this.isPaused = false;\n\n        setTimeout(() => {\n            if (!this.toast && this.root) {\n                this.root.unmount();\n                this.root = undefined;\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        if (!this.element) return;\n\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        if (!this.root) {\n            this.root = createRoot(this.element);\n        }\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"],"names":["TOAST_TYPE","getBackgroundColor","type","getThemeValue","THEME_NAME","INFO","SUCCESS","WARNING","ERROR","TOAST","ToastContainer","styled","Card","props","TEXT_COLOR_LIGHT","TextContainer","CloseContainer","PRIMARY_LIGHT","DEFAULT_DURATION","createAriaLiveRegion","id","ariaLive","region","document","createElement","style","position","width","height","padding","margin","overflow","clip","whiteSpace","borderWidth","setAttribute","Toast","add","options","element","text","buttonText","buttonClick","duration","currentOptions","isPaused","remove","isAssertive","announcement","updateLiveRegion","toast","LayerManager","renderLayer","exitDelay","closeOnEsc","closeOnOverlayClick","alwaysOnTop","LAYER_POSITION","BOTTOM_LEFT","component","_jsx","_Fragment","_jsxs","elevated","onMouseEnter","pause","onMouseLeave","resume","aria-hidden","onClick","aria-label","Component","root","createRoot","render","timeout","setTimeout","destroy","removeEventListener","handleKeyDown","ariaLiveContainer","body","contains","removeChild","politeRegion","undefined","assertiveRegion","setupKeyboardListeners","addEventListener","event","key","preventDefault","resumeTimeout","pauseTimeout","content","textContent","clearTimeout","unmount","appendChild"],"mappings":"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"}

package/lib-esm/shared/styles.js

@@ -2,23 +2,23 @@ import styled from '@emotion/styled';
 import { getThemeValue, THEME_NAME } from './constants.js';
 
 const Ellipsis = /*#__PURE__*/ styled("span", {
-    target: "eot8j4m0",
+    target: "e10k0igo0",
     label: "Ellipsis"
 })("white-space:nowrap;text-overflow:ellipsis;overflow:hidden;flex:1;");
 const Header$1 = /*#__PURE__*/ styled("div", {
-    target: "eot8j4m1",
+    target: "e10k0igo1",
     label: "Header"
 })("padding:10px 15px;line-height:26px;border-bottom:1px solid ", getThemeValue(THEME_NAME.BORDER_LIGHT_COLOR), ";font-size:16px;font-weight:bold;");
 const Body$1 = /*#__PURE__*/ styled("div", {
-    target: "eot8j4m2",
+    target: "e10k0igo2",
     label: "Body"
-})("padding:0 15px;margin:20px 0;flex:1;overflow:visible;");
+})("padding:0 15px;margin:20px 0;flex:1;overflow:visible;display:flow-root;");
 const Footer$1 = /*#__PURE__*/ styled("div", {
-    target: "eot8j4m3",
+    target: "e10k0igo3",
     label: "Footer"
 })("padding:10px 15px;border-top:1px solid ", getThemeValue(THEME_NAME.BORDER_LIGHT_COLOR), ";display:flex;justify-content:flex-end;");
 const ErrorContainer$7 = /*#__PURE__*/ styled("div", {
-    target: "eot8j4m4",
+    target: "e10k0igo4",
     label: "ErrorContainer"
 })("color:", getThemeValue(THEME_NAME.ERROR), ";padding-top:3px;font-size:12px;line-height:14px;");
 

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sources":["../../src/shared/styles.ts"],"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.div`\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: 0 15px;\n    margin: 20px 0;\n    flex: 1;\n    overflow: visible;\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\nexport const ErrorContainer = styled.div`\n    color: ${getThemeValue(THEME_NAME.ERROR)};\n    padding-top: 3px;\n    font-size: 12px;\n    line-height: 14px;\n`;\n"],"names":["Ellipsis","styled","Header","getThemeValue","THEME_NAME","BORDER_LIGHT_COLOR","Body","Footer","ErrorContainer","ERROR"],"mappings":";;;MAGaA,QAAAA,iBAAWC,MAAAA,CAAAA,MAAAA,EAAAA;;;AAKtB,CAAA,CAAA,CAAA,mEAAA;MAEWC,QAAAA,iBAASD,MAAAA,CAAAA,KAAAA,EAAAA;;;kEAGSE,aAAAA,CAAcC,UAAAA,CAAWC,kBAAkB,CAAA,EAAA,mCAAA;MAK7DC,MAAAA,iBAAOL,MAAAA,CAAAA,KAAAA,EAAAA;;;AAKlB,CAAA,CAAA,CAAA,uDAAA;MAEWM,QAAAA,iBAASN,MAAAA,CAAAA,KAAAA,EAAAA;;;8CAEME,aAAAA,CAAcC,UAAAA,CAAWC,kBAAkB,CAAA,EAAA,yCAAA;MAK1DG,gBAAAA,iBAAiBP,MAAAA,CAAAA,KAAAA,EAAAA;;;aACjBE,aAAAA,CAAcC,UAAAA,CAAWK,KAAK,CAAA,EAAA,mDAAA;;;;"}
+{"version":3,"file":"styles.js","sources":["../../src/shared/styles.ts"],"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.div`\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: 0 15px;\n    margin: 20px 0;\n    flex: 1;\n    overflow: visible;\n    display: flow-root;\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\nexport const ErrorContainer = styled.div`\n    color: ${getThemeValue(THEME_NAME.ERROR)};\n    padding-top: 3px;\n    font-size: 12px;\n    line-height: 14px;\n`;\n"],"names":["Ellipsis","styled","Header","getThemeValue","THEME_NAME","BORDER_LIGHT_COLOR","Body","Footer","ErrorContainer","ERROR"],"mappings":";;;MAGaA,QAAAA,iBAAWC,MAAAA,CAAAA,MAAAA,EAAAA;;;AAKtB,CAAA,CAAA,CAAA,mEAAA;MAEWC,QAAAA,iBAASD,MAAAA,CAAAA,KAAAA,EAAAA;;;kEAGSE,aAAAA,CAAcC,UAAAA,CAAWC,kBAAkB,CAAA,EAAA,mCAAA;MAK7DC,MAAAA,iBAAOL,MAAAA,CAAAA,KAAAA,EAAAA;;;AAMlB,CAAA,CAAA,CAAA,yEAAA;MAEWM,QAAAA,iBAASN,MAAAA,CAAAA,KAAAA,EAAAA;;;8CAEME,aAAAA,CAAcC,UAAAA,CAAWC,kBAAkB,CAAA,EAAA,yCAAA;MAK1DG,gBAAAA,iBAAiBP,MAAAA,CAAAA,KAAAA,EAAAA;;;aACjBE,aAAAA,CAAcC,UAAAA,CAAWK,KAAK,CAAA,EAAA,mDAAA;;;;"}

package/package.json

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