no-frills-ui 0.0.14-alpha.0 → 0.0.14-alpha.10

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

@@ -1 +1 @@
-{"version":3,"file":"NotificationManager.js","sourceRoot":"","sources":["../../../src/components/Notification/NotificationManager.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"NotificationManager.js","sources":["../../../src/components/Notification/NotificationManager.tsx"],"sourcesContent":["import React from 'react';\nimport { Close, Info, ReportProblem, ErrorOutline, CheckCircle } from '../../icons';\nimport { ActionButton } from '../Button';\nimport {\n    Container,\n    Notice,\n    Title,\n    IconContainer,\n    FillParent,\n    Body,\n    CloseButton,\n    Footer,\n    VisuallyHidden,\n} from './style';\nimport { NOTIFICATION_POSITION, NOTIFICATION_TYPE, NotificationOptions } from './types';\n\ninterface NotificationManagerProps {\n    // Notification Position\n    position: NOTIFICATION_POSITION;\n    // Callback for when stack is emptied\n    onEmpty: () => void;\n    // Aria label for the notification list\n    ariaLabel?: string;\n}\n\n// Notice prop\ninterface NoticeProp extends NotificationOptions {\n    leaving?: boolean;\n}\n\n// Manager state\ninterface NotificationManagerState {\n    notices: NoticeProp[];\n}\n\ntype timeouts = {\n    [id: string]: NodeJS.Timeout;\n};\n\nconst DEFAULT_DURATION = 5000;\n\n/**\n * Notification Manager class\n */\nclass NotificationManager extends React.Component<\n    NotificationManagerProps,\n    NotificationManagerState\n> {\n    state: NotificationManagerState = {\n        notices: [],\n    };\n\n    // bookkeeping for timeouts\n    private timeouts: timeouts = {};\n\n    // Set of notification ids\n    private set = new Set<string>();\n\n    // Refs for live regions to ensure they exist before updates\n    private politeRegionRef = React.createRef<HTMLDivElement>();\n    private assertiveRegionRef = React.createRef<HTMLDivElement>();\n\n    /**\n     * Removes a notification from stack if the notification with the given id is found.\n     *\n     * @param id\n     */\n    public remove = (id?: string) => {\n        if (!id) return;\n\n        // Trigger leaving animation.\n        this.setState({\n            notices: this.state.notices.map((notice) => ({\n                ...notice,\n                leaving: notice.id === id ? true : notice.leaving,\n            })),\n        });\n        this.set.delete(id);\n\n        // Remove notification on animation completion.\n        setTimeout(() => {\n            const notice = this.state.notices.find((notice) => notice.id === id);\n            if (notice) {\n                // call close callback, ignore any errors in callback.\n                if (notice.onClose) {\n                    try {\n                        notice.onClose();\n                    } catch (e: unknown) {\n                        console.warn('Error in notification close callback', (e as Error).message);\n                    }\n                }\n\n                // Remove the notification\n                this.setState(\n                    {\n                        notices: this.state.notices.filter((notice) => notice.id !== id),\n                    },\n                    () => {\n                        // Check if the stack is empty and then call the\n                        // empty callback function.\n                        if (this.state.notices.length === 0) {\n                            this.props.onEmpty();\n                        }\n                    },\n                );\n            }\n        }, 550);\n    };\n\n    /**\n     * Adds a notification to stack.\n     *\n     * @param notice\n     */\n    public add = async (notice: NotificationOptions) => {\n        // Generate unique id if not provided.\n        const id = notice.id || (Math.random() * 10 ** 7).toFixed(0);\n\n        // De-dupe on id\n        if (!this.set.has(id)) {\n            const type = notice.type || NOTIFICATION_TYPE.INFO;\n            const isUrgent =\n                type === NOTIFICATION_TYPE.WARNING || type === NOTIFICATION_TYPE.DANGER;\n\n            // Add notice to the top of stack.\n            this.setState(\n                (prevState) => ({\n                    notices: [\n                        {\n                            ...notice,\n                            id,\n                        },\n                        ...prevState.notices,\n                    ],\n                }),\n                () => {\n                    // Update live region after state update\n                    const announcement = `${notice.title} ${notice.description}`;\n                    this.updateLiveRegion(announcement, isUrgent);\n                },\n            );\n\n            // set timeout for closing the notification.\n            if (!notice.sticky) {\n                this.timeouts[id] = setTimeout(\n                    () => this.remove(id),\n                    notice.duration || DEFAULT_DURATION,\n                );\n            }\n\n            // Add id to the set.\n            this.set.add(id);\n        }\n\n        return id;\n    };\n\n    /**\n     * Update live region content with clear-then-set pattern for reliable VoiceOver announcements.\n     *\n     * @param content - The text content to announce\n     * @param isAssertive - Whether to use assertive (alert) or polite (log) live region\n     */\n    private updateLiveRegion = (content: string, isAssertive: boolean) => {\n        const region = isAssertive ? this.assertiveRegionRef.current : this.politeRegionRef.current;\n\n        if (region) {\n            // Add content after delay\n            setTimeout(() => {\n                if (region) {\n                    region.textContent = content;\n                }\n            }, 150);\n        }\n    };\n\n    /**\n     * Handler for close button click.\n     *\n     * @param id\n     */\n    public closeClickHandler = (id?: string) => () => {\n        this.remove(id);\n    };\n\n    /**\n     * Pause notification when user is hovering over it.\n     *\n     * @param id\n     */\n    public pause = (id?: string) => () => {\n        if (id && this.timeouts[id]) {\n            clearTimeout(this.timeouts[id]);\n        }\n    };\n\n    /**\n     * Restart the removal of notification.\n     *\n     * @param id\n     */\n    public resume = (id?: string) => () => {\n        const notice = this.state.notices.find((notice) => notice.id === id);\n        if (!notice?.sticky && id && !this.timeouts[id]) {\n            this.timeouts[id] = setTimeout(() => this.remove(id), DEFAULT_DURATION);\n        }\n    };\n\n    /**\n     * Clean up all pending timeouts when component unmounts\n     */\n    componentWillUnmount() {\n        // Clear all pending timeouts\n        Object.keys(this.timeouts).forEach((id) => {\n            clearTimeout(this.timeouts[id]);\n        });\n        this.timeouts = {};\n        this.set.clear();\n    }\n\n    render() {\n        return (\n            <Container position={this.props.position}>\n                {/* Polite live region - uses role=\"log\" for better VoiceOver compatibility */}\n                <VisuallyHidden\n                    ref={this.politeRegionRef}\n                    role=\"log\"\n                    aria-live=\"polite\"\n                    aria-atomic=\"false\"\n                    aria-relevant=\"additions text\"\n                />\n\n                {/* Assertive live region - pre-rendered and persistent */}\n                <VisuallyHidden\n                    ref={this.assertiveRegionRef}\n                    role=\"alert\"\n                    aria-live=\"assertive\"\n                    aria-atomic=\"true\"\n                />\n\n                {/* Visual notifications with list semantics */}\n                <div role=\"list\" aria-label={this.props.ariaLabel}>\n                    {this.state.notices.map((notice) => {\n                        const {\n                            id,\n                            title,\n                            description,\n                            leaving,\n                            type = NOTIFICATION_TYPE.INFO,\n                            buttonText,\n                            buttonClick,\n                            closeButtonAriaLabel,\n                        } = notice;\n\n                        return (\n                            <Notice\n                                key={id}\n                                {...notice}\n                                position={this.props.position}\n                                className={leaving ? 'leave' : ''}\n                                onMouseEnter={this.pause(id)}\n                                onMouseLeave={this.resume(id)}\n                                role=\"listitem\"\n                            >\n                                <IconContainer type={type} aria-hidden=\"true\">\n                                    {type === NOTIFICATION_TYPE.INFO && <Info />}\n                                    {type === NOTIFICATION_TYPE.SUCCESS && <CheckCircle />}\n                                    {type === NOTIFICATION_TYPE.WARNING && <ReportProblem />}\n                                    {type === NOTIFICATION_TYPE.DANGER && <ErrorOutline />}\n                                </IconContainer>\n                                <FillParent>\n                                    <Title type={type}>{title}</Title>\n                                    <Body>{description}</Body>\n                                    {buttonText && (\n                                        <Footer>\n                                            <ActionButton\n                                                onClick={() => {\n                                                    buttonClick?.();\n                                                }}\n                                            >\n                                                {buttonText}\n                                            </ActionButton>\n                                        </Footer>\n                                    )}\n                                </FillParent>\n                                <CloseButton\n                                    onClick={this.closeClickHandler(id)}\n                                    aria-label={closeButtonAriaLabel || 'Close notification'}\n                                    tabIndex={0}\n                                >\n                                    <Close />\n                                </CloseButton>\n                            </Notice>\n                        );\n                    })}\n                </div>\n            </Container>\n        );\n    }\n}\n\nexport default NotificationManager;\n"],"names":["DEFAULT_DURATION","NotificationManager","React","Component","componentWillUnmount","Object","keys","timeouts","forEach","id","clearTimeout","set","clear","render","_jsxs","Container","position","props","_jsx","VisuallyHidden","ref","politeRegionRef","role","aria-live","aria-atomic","aria-relevant","assertiveRegionRef","div","aria-label","ariaLabel","state","notices","map","notice","title","description","leaving","type","NOTIFICATION_TYPE","INFO","buttonText","buttonClick","closeButtonAriaLabel","Notice","className","onMouseEnter","pause","onMouseLeave","resume","IconContainer","aria-hidden","Info","SUCCESS","CheckCircle","WARNING","ReportProblem","DANGER","ErrorOutline","FillParent","Title","Body","Footer","ActionButton","onClick","CloseButton","closeClickHandler","tabIndex","Close","Set","createRef","remove","setState","delete","setTimeout","find","onClose","e","console","warn","message","filter","length","onEmpty","add","Math","random","toFixed","has","isUrgent","prevState","announcement","updateLiveRegion","sticky","duration","content","isAssertive","region","current","textContent"],"mappings":";;;;;;;;;;;AAuCA,MAAMA,kBAAAA,GAAmB,IAAA;AAEzB;;IAGA,MAAMC,mBAAAA,SAA4BC,KAAAA,CAAMC,SAAS,CAAA;AAoK7C;;AAEC,QACDC,oBAAAA,GAAuB;;QAEnBC,MAAAA,CAAOC,IAAI,CAAC,IAAI,CAACC,QAAQ,CAAA,CAAEC,OAAO,CAAC,CAACC,EAAAA,GAAAA;AAChCC,YAAAA,YAAAA,CAAa,IAAI,CAACH,QAAQ,CAACE,EAAAA,CAAG,CAAA;AAClC,QAAA,CAAA,CAAA;QACA,IAAI,CAACF,QAAQ,GAAG,EAAC;QACjB,IAAI,CAACI,GAAG,CAACC,KAAK,EAAA;AAClB,IAAA;IAEAC,MAAAA,GAAS;AACL,QAAA,qBACIC,IAAA,CAACC,SAAAA,EAAAA;AAAUC,YAAAA,QAAAA,EAAU,IAAI,CAACC,KAAK,CAACD,QAAQ;;8BAEpCE,GAAA,CAACC,cAAAA,EAAAA;oBACGC,GAAAA,EAAK,IAAI,CAACC,eAAe;oBACzBC,IAAAA,EAAK,KAAA;oBACLC,WAAAA,EAAU,QAAA;oBACVC,aAAAA,EAAY,OAAA;oBACZC,eAAAA,EAAc;;8BAIlBP,GAAA,CAACC,cAAAA,EAAAA;oBACGC,GAAAA,EAAK,IAAI,CAACM,kBAAkB;oBAC5BJ,IAAAA,EAAK,OAAA;oBACLC,WAAAA,EAAU,WAAA;oBACVC,aAAAA,EAAY;;8BAIhBN,GAAA,CAACS,KAAAA,EAAAA;oBAAIL,IAAAA,EAAK,MAAA;AAAOM,oBAAAA,YAAAA,EAAY,IAAI,CAACX,KAAK,CAACY,SAAS;AAC5C,oBAAA,QAAA,EAAA,IAAI,CAACC,KAAK,CAACC,OAAO,CAACC,GAAG,CAAC,CAACC,MAAAA,GAAAA;AACrB,wBAAA,MAAM,EACFxB,EAAE,EACFyB,KAAK,EACLC,WAAW,EACXC,OAAO,EACPC,OAAOC,iBAAAA,CAAkBC,IAAI,EAC7BC,UAAU,EACVC,WAAW,EACXC,oBAAoB,EACvB,GAAGT,MAAAA;AAEJ,wBAAA,qBACInB,IAAA,CAAC6B,MAAAA,EAAAA;AAEI,4BAAA,GAAGV,MAAM;AACVjB,4BAAAA,QAAAA,EAAU,IAAI,CAACC,KAAK,CAACD,QAAQ;AAC7B4B,4BAAAA,SAAAA,EAAWR,UAAU,OAAA,GAAU,EAAA;4BAC/BS,YAAAA,EAAc,IAAI,CAACC,KAAK,CAACrC,EAAAA,CAAAA;4BACzBsC,YAAAA,EAAc,IAAI,CAACC,MAAM,CAACvC,EAAAA,CAAAA;4BAC1Ba,IAAAA,EAAK,UAAA;;8CAELR,IAAA,CAACmC,aAAAA,EAAAA;oCAAcZ,IAAAA,EAAMA,IAAAA;oCAAMa,aAAAA,EAAY,MAAA;;wCAClCb,IAAAA,KAASC,iBAAAA,CAAkBC,IAAI,kBAAIrB,GAAA,CAACiC,WAAAA,EAAAA,EAAAA,CAAAA;wCACpCd,IAAAA,KAASC,iBAAAA,CAAkBc,OAAO,kBAAIlC,GAAA,CAACmC,aAAAA,EAAAA,EAAAA,CAAAA;wCACvChB,IAAAA,KAASC,iBAAAA,CAAkBgB,OAAO,kBAAIpC,GAAA,CAACqC,aAAAA,EAAAA,EAAAA,CAAAA;wCACvClB,IAAAA,KAASC,iBAAAA,CAAkBkB,MAAM,kBAAItC,GAAA,CAACuC,aAAAA,EAAAA,EAAAA;;;8CAE3C3C,IAAA,CAAC4C,UAAAA,EAAAA;;sDACGxC,GAAA,CAACyC,KAAAA,EAAAA;4CAAMtB,IAAAA,EAAMA,IAAAA;AAAOH,4CAAAA,QAAAA,EAAAA;;sDACpBhB,GAAA,CAAC0C,IAAAA,EAAAA;AAAMzB,4CAAAA,QAAAA,EAAAA;;AACNK,wCAAAA,UAAAA,kBACGtB,GAAA,CAAC2C,MAAAA,EAAAA;AACG,4CAAA,QAAA,gBAAA3C,GAAA,CAAC4C,YAAAA,EAAAA;gDACGC,OAAAA,EAAS,IAAA;AACLtB,oDAAAA,WAAAA,IAAAA;AACJ,gDAAA,CAAA;AAECD,gDAAAA,QAAAA,EAAAA;;;;;8CAKjBtB,GAAA,CAAC8C,WAAAA,EAAAA;oCACGD,OAAAA,EAAS,IAAI,CAACE,iBAAiB,CAACxD,EAAAA,CAAAA;AAChCmB,oCAAAA,YAAAA,EAAYc,oBAAAA,IAAwB,oBAAA;oCACpCwB,QAAAA,EAAU,CAAA;AAEV,oCAAA,QAAA,gBAAAhD,GAAA,CAACiD,KAAAA,EAAAA,EAAAA;;;AAlCA1D,yBAAAA,EAAAA,EAAAA,CAAAA;AAsCjB,oBAAA,CAAA;;;;AAIhB,IAAA;;AA9PJ,QAAA,KAAA,CAAA,GAAA,IAAA,CAAA,EAAA,IAAA,CAIIqB,KAAAA,GAAkC;AAC9BC,YAAAA,OAAAA,EAAS;AACb,SAAA;aAGQxB,QAAAA,GAAqB;aAGrBI,GAAAA,GAAM,IAAIyD;AAGV/C,QAAAA,IAAAA,CAAAA,eAAAA,iBAAkBnB,MAAMmE,SAAS,EAAA,EAAA,IAAA,CACjC3C,kBAAAA,iBAAqBxB,KAAAA,CAAMmE,SAAS,EAAA;;;;AAM3C,QAAA,IAAA,CACMC,SAAS,CAAC7D,EAAAA,GAAAA;AACb,YAAA,IAAI,CAACA,EAAAA,EAAI;;YAGT,IAAI,CAAC8D,QAAQ,CAAC;gBACVxC,OAAAA,EAAS,IAAI,CAACD,KAAK,CAACC,OAAO,CAACC,GAAG,CAAC,CAACC,MAAAA,IAAY;AACzC,wBAAA,GAAGA,MAAM;AACTG,wBAAAA,OAAAA,EAASH,OAAOxB,EAAE,KAAKA,EAAAA,GAAK,IAAA,GAAOwB,OAAOG;qBAC9C,CAAA;AACJ,aAAA,CAAA;AACA,YAAA,IAAI,CAACzB,GAAG,CAAC6D,MAAM,CAAC/D,EAAAA,CAAAA;;YAGhBgE,UAAAA,CAAW,IAAA;AACP,gBAAA,MAAMxC,MAAAA,GAAS,IAAI,CAACH,KAAK,CAACC,OAAO,CAAC2C,IAAI,CAAC,CAACzC,MAAAA,GAAWA,MAAAA,CAAOxB,EAAE,KAAKA,EAAAA,CAAAA;AACjE,gBAAA,IAAIwB,MAAAA,EAAQ;;oBAER,IAAIA,MAAAA,CAAO0C,OAAO,EAAE;wBAChB,IAAI;AACA1C,4BAAAA,MAAAA,CAAO0C,OAAO,EAAA;AAClB,wBAAA,CAAA,CAAE,OAAOC,CAAAA,EAAY;AACjBC,4BAAAA,OAAAA,CAAQC,IAAI,CAAC,sCAAA,EAAyCF,EAAYG,OAAO,CAAA;AAC7E,wBAAA;AACJ,oBAAA;;oBAGA,IAAI,CAACR,QAAQ,CACT;AACIxC,wBAAAA,OAAAA,EAAS,IAAI,CAACD,KAAK,CAACC,OAAO,CAACiD,MAAM,CAAC,CAAC/C,MAAAA,GAAWA,MAAAA,CAAOxB,EAAE,KAAKA,EAAAA;qBACjE,EACA,IAAA;;;wBAGI,IAAI,IAAI,CAACqB,KAAK,CAACC,OAAO,CAACkD,MAAM,KAAK,CAAA,EAAG;4BACjC,IAAI,CAAChE,KAAK,CAACiE,OAAO,EAAA;AACtB,wBAAA;AACJ,oBAAA,CAAA,CAAA;AAER,gBAAA;YACJ,CAAA,EAAG,GAAA,CAAA;QACP,CAAA;;;;AAMC,QAAA,IAAA,CACMC,MAAM,OAAOlD,MAAAA,GAAAA;;AAEhB,YAAA,MAAMxB,EAAAA,GAAKwB,MAAAA,CAAOxB,EAAE,IAAI,CAAC2E,IAAAA,CAAKC,MAAM,EAAA,GAAK,EAAA,IAAM,CAAA,EAAGC,OAAO,CAAC,CAAA,CAAA;;AAG1D,YAAA,IAAI,CAAC,IAAI,CAAC3E,GAAG,CAAC4E,GAAG,CAAC9E,EAAAA,CAAAA,EAAK;AACnB,gBAAA,MAAM4B,IAAAA,GAAOJ,MAAAA,CAAOI,IAAI,IAAIC,kBAAkBC,IAAI;AAClD,gBAAA,MAAMiD,WACFnD,IAAAA,KAASC,iBAAAA,CAAkBgB,OAAO,IAAIjB,IAAAA,KAASC,kBAAkBkB,MAAM;;AAG3E,gBAAA,IAAI,CAACe,QAAQ,CACT,CAACkB,aAAe;wBACZ1D,OAAAA,EAAS;AACL,4BAAA;AACI,gCAAA,GAAGE,MAAM;AACTxB,gCAAAA;AACJ,6BAAA;AACGgF,4BAAAA,GAAAA,SAAAA,CAAU1D;AAChB;AACL,qBAAA,CAAA,EACA,IAAA;;oBAEI,MAAM2D,YAAAA,GAAe,GAAGzD,MAAAA,CAAOC,KAAK,CAAC,CAAC,EAAED,MAAAA,CAAOE,WAAW,CAAA,CAAE;oBAC5D,IAAI,CAACwD,gBAAgB,CAACD,YAAAA,EAAcF,QAAAA,CAAAA;AACxC,gBAAA,CAAA,CAAA;;gBAIJ,IAAI,CAACvD,MAAAA,CAAO2D,MAAM,EAAE;AAChB,oBAAA,IAAI,CAACrF,QAAQ,CAACE,EAAAA,CAAG,GAAGgE,UAAAA,CAChB,IAAM,IAAI,CAACH,MAAM,CAAC7D,EAAAA,CAAAA,EAClBwB,MAAAA,CAAO4D,QAAQ,IAAI7F,kBAAAA,CAAAA;AAE3B,gBAAA;;AAGA,gBAAA,IAAI,CAACW,GAAG,CAACwE,GAAG,CAAC1E,EAAAA,CAAAA;AACjB,YAAA;YAEA,OAAOA,EAAAA;QACX,CAAA;;;;;QAOC,IAAA,CACOkF,gBAAAA,GAAmB,CAACG,OAAAA,EAAiBC,WAAAA,GAAAA;AACzC,YAAA,MAAMC,MAAAA,GAASD,WAAAA,GAAc,IAAI,CAACrE,kBAAkB,CAACuE,OAAO,GAAG,IAAI,CAAC5E,eAAe,CAAC4E,OAAO;AAE3F,YAAA,IAAID,MAAAA,EAAQ;;gBAERvB,UAAAA,CAAW,IAAA;AACP,oBAAA,IAAIuB,MAAAA,EAAQ;AACRA,wBAAAA,MAAAA,CAAOE,WAAW,GAAGJ,OAAAA;AACzB,oBAAA;gBACJ,CAAA,EAAG,GAAA,CAAA;AACP,YAAA;QACJ,CAAA;;;;QAMC,IAAA,CACM7B,iBAAAA,GAAoB,CAACxD,EAAAA,GAAgB,IAAA;gBACxC,IAAI,CAAC6D,MAAM,CAAC7D,EAAAA,CAAAA;YAChB,CAAA;;;;QAMC,IAAA,CACMqC,KAAAA,GAAQ,CAACrC,EAAAA,GAAgB,IAAA;AAC5B,gBAAA,IAAIA,MAAM,IAAI,CAACF,QAAQ,CAACE,GAAG,EAAE;AACzBC,oBAAAA,YAAAA,CAAa,IAAI,CAACH,QAAQ,CAACE,EAAAA,CAAG,CAAA;AAClC,gBAAA;YACJ,CAAA;;;;QAMC,IAAA,CACMuC,MAAAA,GAAS,CAACvC,EAAAA,GAAgB,IAAA;AAC7B,gBAAA,MAAMwB,MAAAA,GAAS,IAAI,CAACH,KAAK,CAACC,OAAO,CAAC2C,IAAI,CAAC,CAACzC,MAAAA,GAAWA,MAAAA,CAAOxB,EAAE,KAAKA,EAAAA,CAAAA;gBACjE,IAAI,CAACwB,MAAAA,EAAQ2D,MAAAA,IAAUnF,EAAAA,IAAM,CAAC,IAAI,CAACF,QAAQ,CAACE,EAAAA,CAAG,EAAE;oBAC7C,IAAI,CAACF,QAAQ,CAACE,EAAAA,CAAG,GAAGgE,UAAAA,CAAW,IAAM,IAAI,CAACH,MAAM,CAAC7D,EAAAA,CAAAA,EAAKT,kBAAAA,CAAAA;AAC1D,gBAAA;AACJ,YAAA,CAAA;;AA6FJ;;;;"}

package/lib-esm/components/Notification/style.d.ts

@@ -9,9 +9,8 @@ export declare const Container: import("@emotion/styled").StyledComponent<{
     position: NOTIFICATION_POSITION;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const Notice: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
-} & import("../Card/Card").CardExtraProps & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+    elevated?: boolean;
+} & import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement> & {
     theme?: import("@emotion/react").Theme;
 } & NoticeProp, {}, {}>;
 export declare const Title: import("@emotion/styled").StyledComponent<{
@@ -42,4 +41,8 @@ export declare const Footer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const VisuallyHidden: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
 export {};

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

@@ -1,9 +1,10 @@
 import styled from '@emotion/styled';
-import constants from '../../shared/constants';
-import { Card } from '../Card';
-import { NOTIFICATION_POSITION, NOTIFICATION_TYPE } from './types';
-const getEntryAnimation = (position) => {
-    switch (position) {
+import { getThemeValue, THEME_NAME } from '../../shared/constants.js';
+import { NOTIFICATION_POSITION, NOTIFICATION_TYPE } from './types.js';
+import Card from '../Card/Card.js';
+
+const getEntryAnimation = (position)=>{
+    switch(position){
         case NOTIFICATION_POSITION.TOP_LEFT:
         case NOTIFICATION_POSITION.BOTTOM_LEFT:
             return 'in-left';
@@ -11,8 +12,8 @@ const getEntryAnimation = (position) => {
             return 'in-right';
     }
 };
-const getExitAnimation = (position) => {
-    switch (position) {
+const getExitAnimation = (position)=>{
+    switch(position){
         case NOTIFICATION_POSITION.TOP_LEFT:
         case NOTIFICATION_POSITION.BOTTOM_LEFT:
             return 'out-left';
@@ -20,155 +21,78 @@ const getExitAnimation = (position) => {
             return 'out-right';
     }
 };
-const getBorderColor = (type) => {
-    switch (type) {
+const getBorderColor = (type)=>{
+    switch(type){
         case NOTIFICATION_TYPE.SUCCESS:
-            return `var(--success-light, ${constants.SUCCESS_LIGHT})`;
+            return getThemeValue(THEME_NAME.SUCCESS_LIGHT);
         case NOTIFICATION_TYPE.DANGER:
-            return `var(--error-light, ${constants.ERROR_LIGHT})`;
+            return getThemeValue(THEME_NAME.ERROR_LIGHT);
         case NOTIFICATION_TYPE.WARNING:
-            return `var(--warning-light, ${constants.WARNING_LIGHT})`;
+            return getThemeValue(THEME_NAME.WARNING_LIGHT);
         default:
-            return `var(--info-light, ${constants.INFO_LIGHT})`;
+            return getThemeValue(THEME_NAME.INFO_LIGHT);
     }
 };
-const getTitleColor = (type) => {
-    switch (type) {
+const getTitleColor = (type)=>{
+    switch(type){
         case NOTIFICATION_TYPE.SUCCESS:
-            return `var(--success, ${constants.SUCCESS})`;
+            return getThemeValue(THEME_NAME.SUCCESS);
         case NOTIFICATION_TYPE.DANGER:
-            return `var(--error, ${constants.ERROR})`;
+            return getThemeValue(THEME_NAME.ERROR);
         case NOTIFICATION_TYPE.WARNING:
-            return `var(--warning, ${constants.WARNING})`;
+            return getThemeValue(THEME_NAME.WARNING);
         case NOTIFICATION_TYPE.INFO:
-            return `var(--info, ${constants.INFO})`;
+            return getThemeValue(THEME_NAME.INFO);
     }
 };
-const getTypeStyle = (type) => {
-    switch (type) {
+const getTypeStyle = (type)=>{
+    switch(type){
         case NOTIFICATION_TYPE.INFO:
-            return `color:  var(--info, ${constants.INFO})`;
+            return `color: ${getThemeValue(THEME_NAME.INFO)}`;
         case NOTIFICATION_TYPE.SUCCESS:
-            return `color: var(--success, ${constants.SUCCESS})`;
+            return `color: ${getThemeValue(THEME_NAME.SUCCESS)}`;
         case NOTIFICATION_TYPE.DANGER:
-            return `color: var(--error, ${constants.ERROR})`;
+            return `color: ${getThemeValue(THEME_NAME.ERROR)}`;
         case NOTIFICATION_TYPE.WARNING:
-            return `color: var(--warning, ${constants.WARNING})`;
+            return `color: ${getThemeValue(THEME_NAME.WARNING)}`;
     }
 };
-export const Container = styled.div `
-    display: flex;
-    flex-direction: ${props => (props.position === NOTIFICATION_POSITION.TOP_LEFT ||
-    props.position === NOTIFICATION_POSITION.TOP_RIGHT) ? 'column' : 'column-reverse'};
-`;
-export const Notice = styled(Card) `
-    border-radius: 3px;
-    border-left: 4px solid ${props => getBorderColor(props.type)};
-    width: 300px;
-    display: flex;
-    padding: 0 5px 5px 0;
-    overflow: hidden;
-    animation: ${props => getEntryAnimation(props.position)} .6s ease;
-    
-    & svg {
-        fill: currentColor;
-        vertical-align: middle;
-        width: 20px;
-        height: 20px;
-    }
-
-    &.leave {
-        animation: ${props => getExitAnimation(props.position)} .6s;
-    }
-
-    @keyframes in-right {
-        from {
-            transform: translateX(100%);
-            max-height: 0;
-            opacity: 0;
-        }
+const Container$2 = /*#__PURE__*/ styled("div", {
+    target: "e10n1sw0",
+    label: "Container"
+})("display:flex;flex-direction:", (props)=>props.position === NOTIFICATION_POSITION.TOP_LEFT || props.position === NOTIFICATION_POSITION.TOP_RIGHT ? 'column' : 'column-reverse', ";");
+const Notice = /*#__PURE__*/ styled(Card, {
+    target: "e10n1sw1",
+    label: "Notice"
+})("position:relative;border-radius:3px;border-left:4px solid ", (props)=>getBorderColor(props.type), ";width:300px;display:flex;padding:0 5px 5px 0;overflow:hidden;animation:", (props)=>getEntryAnimation(props.position), " 0.6s ease;& svg{fill:currentColor;vertical-align:middle;width:20px;height:20px;}&.leave{animation:", (props)=>getExitAnimation(props.position), " 0.6s;}@keyframes in-right{from{transform:translateX(100%);max-height:0;opacity:0;}to{transform:translateX(0%);max-height:150px;opacity:1;}}@keyframes out-right{to{transform:translateX(100%);max-height:0;opacity:0;}from{transform:translateX(0%);max-height:100px;opacity:1;}}@keyframes in-left{from{transform:translateX(-100%);max-height:0;opacity:0;}to{transform:translateX(0%);max-height:150px;opacity:1;}}@keyframes out-left{to{transform:translateX(-100%);max-height:0;opacity:0;}from{transform:translateX(0%);max-height:100px;opacity:1;}}");
+const Title = /*#__PURE__*/ styled("div", {
+    target: "e10n1sw2",
+    label: "Title"
+})("padding:5px 0;font-size:14px;color:", (props)=>getTitleColor(props.type), ";display:flex;align-items:center;");
+const FillParent = /*#__PURE__*/ styled("div", {
+    target: "e10n1sw3",
+    label: "FillParent"
+})("flex:1;");
+const CloseButton = /*#__PURE__*/ styled("button", {
+    target: "e10n1sw4",
+    label: "CloseButton"
+})("position:absolute;background-color:transparent;border:none;padding:0;top:4px;right:4px;cursor:pointer;color:", getThemeValue(THEME_NAME.TEXT_COLOR_DARK), ";&:focus{box-shadow:0 0 0 3px ", getThemeValue(THEME_NAME.PRIMARY_LIGHT), ";border-radius:3px;}");
+const Body = /*#__PURE__*/ styled("div", {
+    target: "e10n1sw5",
+    label: "Body"
+})("padding:5px 5px 5px 0;font-size:14px;");
+const IconContainer = /*#__PURE__*/ styled("div", {
+    target: "e10n1sw6",
+    label: "IconContainer"
+})("padding:6px 10px;", (props)=>getTypeStyle(props.type), ";");
+const Footer = /*#__PURE__*/ styled("div", {
+    target: "e10n1sw7",
+    label: "Footer"
+})("display:flex;justify-content:flex-end;padding:0 5px;");
+const VisuallyHidden = /*#__PURE__*/ styled("span", {
+    target: "e10n1sw8",
+    label: "VisuallyHidden"
+})("position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;");
 
-        to {
-            transform: translateX(0%);
-            max-height: 150px;
-            opacity: 1;
-        }
-    }
-
-    @keyframes out-right {
-        to {
-            transform: translateX(100%);
-            max-height: 0;
-            opacity: 0;
-        }
-
-        from {
-            transform: translateX(0%);
-            max-height: 100px;
-            opacity: 1;
-        }
-    }
-
-    @keyframes in-left {
-        from {
-            transform: translateX(-100%);
-            max-height: 0;
-            opacity: 0;
-        }
-
-        to {
-            transform: translateX(0%);
-            max-height: 150px;
-            opacity: 1;
-        }
-    }
-
-    @keyframes out-left {
-        to {
-            transform: translateX(-100%);
-            max-height: 0;
-            opacity: 0;
-        }
-
-        from {
-            transform: translateX(0%);
-            max-height: 100px;
-            opacity: 1;
-        }
-    }
-`;
-export const Title = styled.div `
-    padding: 5px 0;
-    font-size: 14px;
-    color: ${props => getTitleColor(props.type)};
-    display: flex;
-    align-items: center;
-`;
-export const FillParent = styled.div `
-    flex: 1;
-`;
-export const CloseButton = styled.button `
-    background-color: transparent;
-    border: none;
-    padding: none;
-    cursor: pointer;
-
-    &:focus {
-        box-shadow: 0 0 0 3px var(--primary, ${constants.PRIMARY_LIGHT});
-        border-radius: 3px;
-    }
-`;
-export const Body = styled.div `
-    padding: 5px 5px 5px 0;
-    font-size: 14px;
-`;
-export const IconContainer = styled.div `
-    padding: 6px 10px;
-    ${props => getTypeStyle(props.type)};
-`;
-export const Footer = styled.div `
-    display: flex;
-    justify-content: flex-end;
-    padding: 0 5px;
-`;
-//# sourceMappingURL=style.js.map
+export { Body, CloseButton, Container$2 as Container, FillParent, Footer, IconContainer, Notice, Title, VisuallyHidden };
+//# sourceMappingURL=style.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"style.js","sourceRoot":"","sources":["../../../src/components/Notification/style.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"style.js","sources":["../../../src/components/Notification/style.ts"],"sourcesContent":["import styled from '@emotion/styled';\nimport { getThemeValue, THEME_NAME } from '../../shared/constants';\nimport { Card } from '../Card';\nimport { NOTIFICATION_POSITION, NOTIFICATION_TYPE, NotificationOptions } from './types';\n\nconst getEntryAnimation = (position: NOTIFICATION_POSITION) => {\n    switch (position) {\n        case NOTIFICATION_POSITION.TOP_LEFT:\n        case NOTIFICATION_POSITION.BOTTOM_LEFT:\n            return 'in-left';\n        default:\n            return 'in-right';\n    }\n};\n\nconst getExitAnimation = (position: NOTIFICATION_POSITION) => {\n    switch (position) {\n        case NOTIFICATION_POSITION.TOP_LEFT:\n        case NOTIFICATION_POSITION.BOTTOM_LEFT:\n            return 'out-left';\n        default:\n            return 'out-right';\n    }\n};\n\nconst getBorderColor = (type?: NOTIFICATION_TYPE) => {\n    switch (type) {\n        case NOTIFICATION_TYPE.SUCCESS:\n            return getThemeValue(THEME_NAME.SUCCESS_LIGHT);\n        case NOTIFICATION_TYPE.DANGER:\n            return getThemeValue(THEME_NAME.ERROR_LIGHT);\n        case NOTIFICATION_TYPE.WARNING:\n            return getThemeValue(THEME_NAME.WARNING_LIGHT);\n        default:\n            return getThemeValue(THEME_NAME.INFO_LIGHT);\n    }\n};\n\nconst getTitleColor = (type: NOTIFICATION_TYPE) => {\n    switch (type) {\n        case NOTIFICATION_TYPE.SUCCESS:\n            return getThemeValue(THEME_NAME.SUCCESS);\n        case NOTIFICATION_TYPE.DANGER:\n            return getThemeValue(THEME_NAME.ERROR);\n        case NOTIFICATION_TYPE.WARNING:\n            return getThemeValue(THEME_NAME.WARNING);\n        case NOTIFICATION_TYPE.INFO:\n            return getThemeValue(THEME_NAME.INFO);\n    }\n};\n\nconst getTypeStyle = (type: NOTIFICATION_TYPE) => {\n    switch (type) {\n        case NOTIFICATION_TYPE.INFO:\n            return `color: ${getThemeValue(THEME_NAME.INFO)}`;\n        case NOTIFICATION_TYPE.SUCCESS:\n            return `color: ${getThemeValue(THEME_NAME.SUCCESS)}`;\n        case NOTIFICATION_TYPE.DANGER:\n            return `color: ${getThemeValue(THEME_NAME.ERROR)}`;\n        case NOTIFICATION_TYPE.WARNING:\n            return `color: ${getThemeValue(THEME_NAME.WARNING)}`;\n    }\n};\n\ninterface NoticeProp extends NotificationOptions {\n    position: NOTIFICATION_POSITION;\n}\n\nexport const Container = styled.div<{ position: NOTIFICATION_POSITION }>`\n    display: flex;\n    flex-direction: ${(props) =>\n        props.position === NOTIFICATION_POSITION.TOP_LEFT ||\n        props.position === NOTIFICATION_POSITION.TOP_RIGHT\n            ? 'column'\n            : 'column-reverse'};\n`;\n\nexport const Notice = styled(Card)<NoticeProp>`\n    position: relative;\n    border-radius: 3px;\n    border-left: 4px solid ${(props) => getBorderColor(props.type)};\n    width: 300px;\n    display: flex;\n    padding: 0 5px 5px 0;\n    overflow: hidden;\n    animation: ${(props) => getEntryAnimation(props.position)} 0.6s ease;\n\n    & svg {\n        fill: currentColor;\n        vertical-align: middle;\n        width: 20px;\n        height: 20px;\n    }\n\n    &.leave {\n        animation: ${(props) => getExitAnimation(props.position)} 0.6s;\n    }\n\n    @keyframes in-right {\n        from {\n            transform: translateX(100%);\n            max-height: 0;\n            opacity: 0;\n        }\n\n        to {\n            transform: translateX(0%);\n            max-height: 150px;\n            opacity: 1;\n        }\n    }\n\n    @keyframes out-right {\n        to {\n            transform: translateX(100%);\n            max-height: 0;\n            opacity: 0;\n        }\n\n        from {\n            transform: translateX(0%);\n            max-height: 100px;\n            opacity: 1;\n        }\n    }\n\n    @keyframes in-left {\n        from {\n            transform: translateX(-100%);\n            max-height: 0;\n            opacity: 0;\n        }\n\n        to {\n            transform: translateX(0%);\n            max-height: 150px;\n            opacity: 1;\n        }\n    }\n\n    @keyframes out-left {\n        to {\n            transform: translateX(-100%);\n            max-height: 0;\n            opacity: 0;\n        }\n\n        from {\n            transform: translateX(0%);\n            max-height: 100px;\n            opacity: 1;\n        }\n    }\n`;\n\nexport const Title = styled.div<{ type: NOTIFICATION_TYPE }>`\n    padding: 5px 0;\n    font-size: 14px;\n    color: ${(props) => getTitleColor(props.type)};\n    display: flex;\n    align-items: center;\n`;\n\nexport const FillParent = styled.div`\n    flex: 1;\n`;\n\nexport const CloseButton = styled.button`\n    position: absolute;\n    background-color: transparent;\n    border: none;\n    padding: 0;\n    top: 4px;\n    right: 4px;\n    cursor: pointer;\n    color: ${getThemeValue(THEME_NAME.TEXT_COLOR_DARK)};\n\n    &:focus {\n        box-shadow: 0 0 0 3px ${getThemeValue(THEME_NAME.PRIMARY_LIGHT)};\n        border-radius: 3px;\n    }\n`;\n\nexport const Body = styled.div`\n    padding: 5px 5px 5px 0;\n    font-size: 14px;\n`;\n\nexport const IconContainer = styled.div<{ type: NOTIFICATION_TYPE }>`\n    padding: 6px 10px;\n    ${(props) => getTypeStyle(props.type)};\n`;\n\nexport const Footer = styled.div`\n    display: flex;\n    justify-content: flex-end;\n    padding: 0 5px;\n`;\n\nexport const VisuallyHidden = styled.span`\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    clip: rect(0, 0, 0, 0);\n    white-space: nowrap;\n    border: 0;\n`;\n"],"names":["getEntryAnimation","position","NOTIFICATION_POSITION","TOP_LEFT","BOTTOM_LEFT","getExitAnimation","getBorderColor","type","NOTIFICATION_TYPE","SUCCESS","getThemeValue","THEME_NAME","SUCCESS_LIGHT","DANGER","ERROR_LIGHT","WARNING","WARNING_LIGHT","INFO_LIGHT","getTitleColor","ERROR","INFO","getTypeStyle","Container","styled","props","TOP_RIGHT","Notice","Card","Title","FillParent","CloseButton","TEXT_COLOR_DARK","PRIMARY_LIGHT","Body","IconContainer","Footer","VisuallyHidden"],"mappings":"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"}

package/lib-esm/components/Notification/types.d.ts

@@ -31,4 +31,6 @@ export interface NotificationOptions {
     buttonClick?: () => void;
     /** Notification close callback. */
     onClose?: () => void;
+    /** aria label for the close button on the notification */
+    closeButtonAriaLabel?: string;
 }

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

@@ -1,18 +1,17 @@
-/** Position for Notification */
-export var NOTIFICATION_POSITION;
-(function (NOTIFICATION_POSITION) {
+/** Position for Notification */ var NOTIFICATION_POSITION = /*#__PURE__*/ function(NOTIFICATION_POSITION) {
     NOTIFICATION_POSITION["TOP_LEFT"] = "TOP_LEFT";
     NOTIFICATION_POSITION["TOP_RIGHT"] = "TOP_RIGHT";
     NOTIFICATION_POSITION["BOTTOM_LEFT"] = "BOTTOM_LEFT";
     NOTIFICATION_POSITION["BOTTOM_RIGHT"] = "BOTTOM_RIGHT";
-})(NOTIFICATION_POSITION || (NOTIFICATION_POSITION = {}));
-;
-/** Type of Notifications */
-export var NOTIFICATION_TYPE;
-(function (NOTIFICATION_TYPE) {
+    return NOTIFICATION_POSITION;
+}({});
+/** Type of Notifications */ var NOTIFICATION_TYPE = /*#__PURE__*/ function(NOTIFICATION_TYPE) {
     NOTIFICATION_TYPE["INFO"] = "INFO";
     NOTIFICATION_TYPE["SUCCESS"] = "SUCCESS";
     NOTIFICATION_TYPE["DANGER"] = "DANGER";
     NOTIFICATION_TYPE["WARNING"] = "WARNING";
-})(NOTIFICATION_TYPE || (NOTIFICATION_TYPE = {}));
-//# sourceMappingURL=types.js.map
+    return NOTIFICATION_TYPE;
+}({});
+
+export { NOTIFICATION_POSITION, NOTIFICATION_TYPE };
+//# sourceMappingURL=types.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/Notification/types.ts"],"names":[],"mappings":"AAAA,gCAAgC;AAChC,MAAM,CAAN,IAAY,qBAKX;AALD,WAAY,qBAAqB;IAC7B,8CAAmB,CAAA;IACnB,gDAAqB,CAAA;IACrB,oDAAyB,CAAA;IACzB,sDAA2B,CAAA;AAC/B,CAAC,EALW,qBAAqB,KAArB,qBAAqB,QAKhC;AAAA,CAAC;AAEF,4BAA4B;AAC5B,MAAM,CAAN,IAAY,iBAKX;AALD,WAAY,iBAAiB;IACzB,kCAAW,CAAA;IACX,wCAAiB,CAAA;IACjB,sCAAe,CAAA;IACf,wCAAiB,CAAA;AACrB,CAAC,EALW,iBAAiB,KAAjB,iBAAiB,QAK5B"}
+{"version":3,"file":"types.js","sources":["../../../src/components/Notification/types.ts"],"sourcesContent":["/** Position for Notification */\nexport enum NOTIFICATION_POSITION {\n    TOP_LEFT = 'TOP_LEFT',\n    TOP_RIGHT = 'TOP_RIGHT',\n    BOTTOM_LEFT = 'BOTTOM_LEFT',\n    BOTTOM_RIGHT = 'BOTTOM_RIGHT',\n}\n\n/** Type of Notifications */\nexport enum NOTIFICATION_TYPE {\n    INFO = 'INFO',\n    SUCCESS = 'SUCCESS',\n    DANGER = 'DANGER',\n    WARNING = 'WARNING',\n}\n\nexport interface NotificationOptions {\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    /** Duration for the notification in milliseconds */\n    duration?: number;\n    /** Creates sticky notification */\n    sticky?: boolean;\n    /** Type of notification */\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 */\n    closeButtonAriaLabel?: string;\n}\n"],"names":["NOTIFICATION_POSITION","NOTIFICATION_TYPE"],"mappings":"AAAA,iCACO,IAAKA,qBAAAA,iBAAAA,SAAAA,qBAAAA,EAAAA;;;;;AAAAA,IAAAA,OAAAA,qBAAAA;AAKX,CAAA,CAAA,EAAA;AAED,6BACO,IAAKC,iBAAAA,iBAAAA,SAAAA,iBAAAA,EAAAA;;;;;AAAAA,IAAAA,OAAAA,iBAAAA;AAKX,CAAA,CAAA,EAAA;;;;"}

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

@@ -1,28 +1,29 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 export declare enum POPOVER_POSITION {
     TOP_LEFT = "TOP_LEFT",
     TOP_RIGHT = "TOP_RIGHT",
     BOTTOM_LEFT = "BOTTOM_LEFT",
     BOTTOM_RIGHT = "BOTTOM_RIGHT"
 }
-declare function Popover(props: React.PropsWithChildren<PropTypes.InferProps<typeof Popover.propTypes>>): import("@emotion/react/jsx-runtime").JSX.Element;
-declare namespace Popover {
-    var propTypes: {
-        /** Opens the popover */
-        open: PropTypes.Validator<boolean>;
-        /** Anchor element for the popover */
-        element: PropTypes.Requireable<(...args: any[]) => any>;
-        /** Position of the popover around anchor element */
-        position: PropTypes.Requireable<POPOVER_POSITION>;
-        /** If the popover should close on `esc` key press */
-        closeOnEsc: PropTypes.Requireable<boolean>;
-        /** Popover close callback */
-        onClose: PropTypes.Requireable<(...args: any[]) => any>;
-    };
-    var defaultProps: {
-        closeOnEsc: boolean;
-        position: POPOVER_POSITION;
-    };
-}
+type PopoverProps = {
+    /** Opens the popover */
+    open: boolean;
+    /** Anchor element for the popover */
+    element: React.ElementType;
+    /**
+     * Position of the popover around anchor element
+     * @default POPOVER_POSITION.BOTTOM_LEFT
+     */
+    position?: POPOVER_POSITION;
+    /**
+     * If the popover should close on `esc` key press
+     * @default true
+     */
+    closeOnEsc?: boolean;
+    /** Popover close callback */
+    onClose?: () => void;
+};
+declare const Popover: React.ForwardRefExoticComponent<PopoverProps & {
+    children?: React.ReactNode | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
 export default Popover;