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

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-import { useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
 import { Card } from '../Card';
@@ -26,7 +26,7 @@ const positionMap = {
     [POPOVER_POSITION.BOTTOM_LEFT]: `
         top: calc(100% - 10px);
         left: 0;
-    `
+    `,
 };
 const PopoverDiv = styled.div `
     position: relative;
@@ -37,17 +37,17 @@ const Popper = styled(Card) `
     width: 100%;
     min-width: 200px;
     overflow: auto;
-    animation: enter .3s linear;
+    animation: enter 0.3s linear;
     border-radius: 3px;
     z-index: 1;
-    transform: translate(${props => props.translateX}px, ${props => props.translateY}px);
-    ${props => positionMap[props.position]}
+    transform: translate(${(props) => props.translateX}px, ${(props) => props.translateY}px);
+    ${(props) => positionMap[props.position]}
 
     &.closing {
         /* max-height: 0px;
         opacity: 0;
         overflow: hidden; */
-        animation: exit .3s linear;
+        animation: exit 0.3s linear;
     }
 
     @keyframes enter {
@@ -77,7 +77,7 @@ const Popper = styled(Card) `
     }
 `;
 const KEY_CODES = {
-    ESC: 27
+    ESC: 27,
 };
 export default function Popover(props) {
     const [open, setOpen] = useState(props.open);
@@ -85,7 +85,7 @@ export default function Popover(props) {
     const [translate, setTranslate] = useState({ x: 0, y: 0 });
     const popperRef = useRef();
     const containerRef = useRef();
-    const close = () => {
+    const close = useCallback(() => {
         setClosing(true);
         setTimeout(() => {
             setOpen(false);
@@ -95,17 +95,17 @@ export default function Popover(props) {
             }
             setClosing(false);
         }, 280);
-    };
-    const keyupEventHandler = (e) => {
+    }, [props]);
+    const keyupEventHandler = useCallback((e) => {
         if (props.closeOnEsc && e.keyCode === KEY_CODES.ESC) {
             close();
         }
-    };
-    const clickOutsideHandler = (e) => {
+    }, [close, props.closeOnEsc]);
+    const clickOutsideHandler = useCallback((e) => {
         if (containerRef.current && !containerRef.current.contains(e.target)) {
             close();
         }
-    };
+    }, [close]);
     /**
      * Get called on popover mount.
      */
@@ -115,7 +115,7 @@ export default function Popover(props) {
             document.removeEventListener('keyup', keyupEventHandler);
             document.removeEventListener('click', clickOutsideHandler);
         };
-    }, []);
+    }, [clickOutsideHandler, close, keyupEventHandler]);
     useEffect(() => {
         if (props.open) {
             setOpen(true);
@@ -132,7 +132,7 @@ export default function Popover(props) {
         return () => {
             document.removeEventListener('click', clickOutsideHandler);
         };
-    }, [props.open]);
+    }, [props.open, open, clickOutsideHandler, close]);
     useEffect(() => {
         if (open) {
             const { top, left, right } = popperRef.current.getBoundingClientRect();
@@ -181,8 +181,11 @@ export default function Popover(props) {
             setTranslate(translation);
             popperRef.current.focus();
         }
-    }, [open]);
-    return (_jsxs(PopoverDiv, { ref: containerRef, children: [_jsx(props.element, {}), open && (_jsx(Popper, { elevated: true, tabIndex: 0, position: props.position, translateX: translate.x, translateY: translate.y, className: closing && 'closing', ref: popperRef, onClick: e => { e.stopPropagation(); e.nativeEvent.stopImmediatePropagation(); }, children: props.children }))] }));
+    }, [open, props.position]);
+    return (_jsxs(PopoverDiv, { ref: containerRef, children: [_jsx(props.element, {}), open && (_jsx(Popper, { elevated: true, tabIndex: 0, position: props.position, translateX: translate.x, translateY: translate.y, className: closing && 'closing', ref: popperRef, onClick: (e) => {
+                    e.stopPropagation();
+                    e.nativeEvent.stopImmediatePropagation();
+                }, children: props.children }))] }));
 }
 Popover.propTypes = {
     /** Opens the popover */

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

@@ -1 +1 @@
-{"version":3,"file":"Popover.js","sourceRoot":"","sources":["../../../src/components/Popover/Popover.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Popover.js","sourceRoot":"","sources":["../../../src/components/Popover/Popover.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useCallback, useEffect, useRef, useState } from 'react';\nimport PropTypes from 'prop-types';\nimport styled from '@emotion/styled';\nimport { Card } from '../Card';\n\nexport enum POPOVER_POSITION {\n    TOP_LEFT = 'TOP_LEFT',\n    TOP_RIGHT = 'TOP_RIGHT',\n    BOTTOM_LEFT = 'BOTTOM_LEFT',\n    BOTTOM_RIGHT = 'BOTTOM_RIGHT',\n}\n\ninterface translate {\n    x: number;\n    y: number;\n}\n\nconst positionMap = {\n    [POPOVER_POSITION.TOP_LEFT]: `\n        bottom: calc(100% - 10px);\n        left: 0;\n    `,\n    [POPOVER_POSITION.TOP_RIGHT]: `\n        bottom: calc(100% - 10px);\n        right: 0;\n    `,\n    [POPOVER_POSITION.BOTTOM_RIGHT]: `\n        top: calc(100% - 10px);\n        right: 0;\n    `,\n    [POPOVER_POSITION.BOTTOM_LEFT]: `\n        top: calc(100% - 10px);\n        left: 0;\n    `,\n};\n\nconst PopoverDiv = styled.div`\n    position: relative;\n    display: inline-flex;\n`;\n\nconst Popper = styled(Card)<{ position: POPOVER_POSITION; translateX: number; translateY: number }>`\n    position: absolute;\n    width: 100%;\n    min-width: 200px;\n    overflow: auto;\n    animation: enter 0.3s linear;\n    border-radius: 3px;\n    z-index: 1;\n    transform: translate(${(props) => props.translateX}px, ${(props) => props.translateY}px);\n    ${(props) => positionMap[props.position]}\n\n    &.closing {\n        /* max-height: 0px;\n        opacity: 0;\n        overflow: hidden; */\n        animation: exit 0.3s linear;\n    }\n\n    @keyframes enter {\n        from {\n            max-height: 0px;\n            opacity: 1;\n            overflow: hidden;\n        }\n        to {\n            max-height: 300px;\n            opacity: 1;\n            overflow: hidden;\n        }\n    }\n\n    @keyframes exit {\n        to {\n            max-height: 0px;\n            opacity: 1;\n            overflow: hidden;\n        }\n        from {\n            max-height: 300px;\n            opacity: 1;\n            overflow: hidden;\n        }\n    }\n`;\n\nconst KEY_CODES = {\n    ESC: 27,\n};\n\nexport default function Popover(\n    props: React.PropsWithChildren<PropTypes.InferProps<typeof Popover.propTypes>>,\n) {\n    const [open, setOpen] = useState(props.open);\n    const [closing, setClosing] = useState(false);\n    const [translate, setTranslate] = useState<translate>({ x: 0, y: 0 });\n    const popperRef = useRef<HTMLDivElement>();\n    const containerRef = useRef<HTMLDivElement>();\n\n    const close = useCallback(() => {\n        setClosing(true);\n        setTimeout(() => {\n            setOpen(false);\n            setTranslate({ x: 0, y: 0 });\n            if (props.onClose) {\n                props.onClose();\n            }\n            setClosing(false);\n        }, 280);\n    }, [props]);\n\n    const keyupEventHandler = useCallback(\n        (e: KeyboardEvent) => {\n            if (props.closeOnEsc && e.keyCode === KEY_CODES.ESC) {\n                close();\n            }\n        },\n        [close, props.closeOnEsc],\n    );\n\n    const clickOutsideHandler = useCallback(\n        (e: MouseEvent) => {\n            if (containerRef.current && !containerRef.current.contains(e.target as Node)) {\n                close();\n            }\n        },\n        [close],\n    );\n\n    /**\n     * Get called on popover mount.\n     */\n    useEffect(() => {\n        document.addEventListener('keyup', keyupEventHandler);\n\n        return () => {\n            document.removeEventListener('keyup', keyupEventHandler);\n            document.removeEventListener('click', clickOutsideHandler);\n        };\n    }, [clickOutsideHandler, close, keyupEventHandler]);\n\n    useEffect(() => {\n        if (props.open) {\n            setOpen(true);\n            // Use requestAnimationFrame to add listener after current event loop\n            requestAnimationFrame(() => {\n                document.addEventListener('click', clickOutsideHandler);\n            });\n        } else {\n            if (open) {\n                close();\n            }\n        }\n\n        return () => {\n            document.removeEventListener('click', clickOutsideHandler);\n        };\n    }, [props.open, open, clickOutsideHandler, close]);\n\n    useEffect(() => {\n        if (open) {\n            const { top, left, right } = popperRef.current.getBoundingClientRect();\n            const height = popperRef.current.scrollHeight;\n            const viewportWidth = document.documentElement.clientWidth;\n            const viewportHeight = document.documentElement.clientHeight;\n            const translation = { x: 0, y: 0 };\n\n            if (props.position === POPOVER_POSITION.BOTTOM_LEFT) {\n                // overflow can happen at bottom and right\n                if (viewportHeight - top - height < 0) {\n                    translation.y = -1 * (Math.abs(viewportHeight - top - height) + 5);\n                }\n                if (viewportWidth - right < 0) {\n                    translation.x = -1 * (Math.abs(viewportWidth - right) + 5);\n                }\n            } else if (props.position == POPOVER_POSITION.BOTTOM_RIGHT) {\n                // overflow can happen at bottom and left\n                if (viewportHeight - top - height < 0) {\n                    translation.y = -1 * (Math.abs(viewportHeight - top - height) + 5);\n                }\n                if (left < 0) {\n                    translation.x = Math.abs(left) + 5;\n                }\n            } else if (props.position === POPOVER_POSITION.TOP_LEFT) {\n                // overflow can happen at top and right\n                if (top - height < 0) {\n                    translation.y = Math.abs(top - height) + 5;\n                }\n                if (viewportWidth - right < 0) {\n                    translation.x = -1 * (Math.abs(viewportWidth - right) + 5);\n                }\n            } else {\n                // overflow can happen at top and left\n                if (top - height < 0) {\n                    translation.y = Math.abs(top - height) + 5;\n                }\n                if (left < 0) {\n                    translation.x = Math.abs(left) + 5;\n                }\n            }\n            // Note it can still overflow, but in that case fitting popper inside the\n            // window is not possible.\n            setTranslate(translation);\n            popperRef.current.focus();\n        }\n    }, [open, props.position]);\n\n    return (\n        <PopoverDiv ref={containerRef}>\n            <props.element />\n            {open && (\n                <Popper\n                    elevated\n                    tabIndex={0}\n                    position={props.position}\n                    translateX={translate.x}\n                    translateY={translate.y}\n                    className={closing && 'closing'}\n                    ref={popperRef}\n                    onClick={(e) => {\n                        e.stopPropagation();\n                        e.nativeEvent.stopImmediatePropagation();\n                    }}\n                >\n                    {props.children}\n                </Popper>\n            )}\n        </PopoverDiv>\n    );\n}\n\nPopover.propTypes = {\n    /** Opens the popover */\n    open: PropTypes.bool.isRequired,\n    /** Anchor element for the popover */\n    element: PropTypes.func,\n    /** Position of the popover around anchor element */\n    position: PropTypes.oneOf([\n        POPOVER_POSITION.TOP_LEFT,\n        POPOVER_POSITION.TOP_RIGHT,\n        POPOVER_POSITION.BOTTOM_LEFT,\n        POPOVER_POSITION.BOTTOM_RIGHT,\n    ]),\n    /** If the popover should close on `esc` key press */\n    closeOnEsc: PropTypes.bool,\n    /** Popover close callback */\n    onClose: PropTypes.func,\n};\n\nPopover.defaultProps = {\n    closeOnEsc: true,\n    position: POPOVER_POSITION.BOTTOM_LEFT,\n};\n"]}

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

@@ -1 +1,2 @@
 export { default as Popover, POPOVER_POSITION } from './Popover';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Popover/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAC"}

package/lib-esm/components/Popover/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Popover/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Popover/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAC","sourcesContent":["export { default as Popover, POPOVER_POSITION } from './Popover';\n"]}

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

@@ -11,3 +11,4 @@ declare namespace Spinner {
 }
 type SpinnerProp = PropTypes.InferProps<typeof Spinner.propTypes>;
 export default Spinner;
+//# sourceMappingURL=Spinner.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Spinner.d.ts","sourceRoot":"","sources":["../../../src/components/Spinner/Spinner.tsx"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AAuBnC,iBAAS,OAAO,CAAC,KAAK,EAAE,WAAW,oDAElC;kBAFQ,OAAO;;QAOZ,qBAAqB;;;;;;;AAHzB,KAAK,WAAW,GAAG,SAAS,CAAC,UAAU,CAAC,OAAO,OAAO,CAAC,SAAS,CAAC,CAAC;AAWlE,eAAe,OAAO,CAAC"}

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

@@ -1,19 +1,23 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import styled from '@emotion/styled';
 import PropTypes from 'prop-types';
+import styled from '@emotion/styled';
 import constants from '../../shared/constants';
 const SpinnerDiv = styled.div `
     border: 4px solid var(--primary, ${constants.PRIMARY});
     border-top: 4px solid var(--border-light-color, ${constants.BORDER_LIGHT_COLOR});
     border-radius: 50%;
-    width: ${props => props.size}px;
-    height: ${props => props.size}px;
+    width: ${(props) => props.size}px;
+    height: ${(props) => props.size}px;
     margin: 0 auto;
     animation: spin 1s linear infinite;
 
     @keyframes spin {
-        0% { transform: rotate(0deg); }
-        100% { transform: rotate(360deg); }
+        0% {
+            transform: rotate(0deg);
+        }
+        100% {
+            transform: rotate(360deg);
+        }
     }
 `;
 function Spinner(props) {
@@ -21,7 +25,7 @@ function Spinner(props) {
 }
 Spinner.propTypes = {
     /** Spinner's size */
-    size: PropTypes.number
+    size: PropTypes.number,
 };
 Spinner.defaultProps = {
     size: 30,

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

@@ -1 +1 @@
-{"version":3,"file":"Spinner.js","sourceRoot":"","sources":["../../../src/components/Spinner/Spinner.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,SAAS,MAAM,wBAAwB,CAAC;AAE/C,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAa;uCACH,SAAS,CAAC,OAAO;sDACF,SAAS,CAAC,kBAAkB;;aAErE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,IAAI;cAClB,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,IAAI;;;;;;;;CAQhC,CAAC;AAEF,SAAS,OAAO,CAAC,KAAkB;IAC/B,OAAO,KAAC,UAAU,oBAAK,KAAK,EAAI,CAAA;AACpC,CAAC;AAID,OAAO,CAAC,SAAS,GAAG;IAChB,qBAAqB;IACrB,IAAI,EAAE,SAAS,CAAC,MAAM;CACzB,CAAA;AAED,OAAO,CAAC,YAAY,GAAG;IACnB,IAAI,EAAE,EAAE;CACX,CAAC;AAEF,eAAe,OAAO,CAAC"}
+{"version":3,"file":"Spinner.js","sourceRoot":"","sources":["../../../src/components/Spinner/Spinner.tsx"],"names":[],"mappings":";AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,SAAS,MAAM,wBAAwB,CAAC;AAE/C,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAa;uCACH,SAAS,CAAC,OAAO;sDACF,SAAS,CAAC,kBAAkB;;aAErE,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,IAAI;cACpB,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,IAAI;;;;;;;;;;;;CAYlC,CAAC;AAEF,SAAS,OAAO,CAAC,KAAkB;IAC/B,OAAO,KAAC,UAAU,oBAAK,KAAK,EAAI,CAAC;AACrC,CAAC;AAID,OAAO,CAAC,SAAS,GAAG;IAChB,qBAAqB;IACrB,IAAI,EAAE,SAAS,CAAC,MAAM;CACzB,CAAC;AAEF,OAAO,CAAC,YAAY,GAAG;IACnB,IAAI,EAAE,EAAE;CACX,CAAC;AAEF,eAAe,OAAO,CAAC","sourcesContent":["import PropTypes from 'prop-types';\nimport styled from '@emotion/styled';\nimport constants from '../../shared/constants';\n\nconst SpinnerDiv = styled.div<SpinnerProp>`\n    border: 4px solid var(--primary, ${constants.PRIMARY});\n    border-top: 4px solid var(--border-light-color, ${constants.BORDER_LIGHT_COLOR});\n    border-radius: 50%;\n    width: ${(props) => props.size}px;\n    height: ${(props) => props.size}px;\n    margin: 0 auto;\n    animation: spin 1s linear infinite;\n\n    @keyframes spin {\n        0% {\n            transform: rotate(0deg);\n        }\n        100% {\n            transform: rotate(360deg);\n        }\n    }\n`;\n\nfunction Spinner(props: SpinnerProp) {\n    return <SpinnerDiv {...props} />;\n}\n\ntype SpinnerProp = PropTypes.InferProps<typeof Spinner.propTypes>;\n\nSpinner.propTypes = {\n    /** Spinner's size */\n    size: PropTypes.number,\n};\n\nSpinner.defaultProps = {\n    size: 30,\n};\n\nexport default Spinner;\n"]}

package/lib-esm/components/Spinner/index.d.ts

@@ -1 +1,2 @@
 export { default as Spinner } from './Spinner';
+//# sourceMappingURL=index.d.ts.map

package/lib-esm/components/Spinner/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Spinner/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC"}

package/lib-esm/components/Spinner/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Spinner/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Spinner/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC","sourcesContent":["export { default as Spinner } from './Spinner';\n"]}

package/lib-esm/components/Stepper/Step.d.ts

@@ -15,3 +15,4 @@ declare namespace Step {
     };
 }
 export default Step;
+//# sourceMappingURL=Step.d.ts.map

package/lib-esm/components/Stepper/Step.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Step.d.ts","sourceRoot":"","sources":["../../../src/components/Stepper/Step.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,UAAU,SAAS;IACf,qDAAqD;IACrD,IAAI,EAAE,MAAM,CAAC;IACb,wBAAwB;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kCAAkC;IAClC,SAAS,CAAC,EAAE,OAAO,CAAC;CACvB;AAQD,iBAAwB,IAAI,CAAC,KAAK,EAAE,KAAK,CAAC,iBAAiB,CAAC,SAAS,CAAC,oDAIrE;kBAJuB,IAAI;;;;;;eAAJ,IAAI"}

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

@@ -17,6 +17,7 @@ const Container = styled.div `
     flex-direction: column;
 `;
 export default function Step(props) {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const { name, disabled, completed } = props, rest = __rest(props, ["name", "disabled", "completed"]);
     return _jsx(Container, Object.assign({}, rest));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"Step.js","sourceRoot":"","sources":["../../../src/components/Stepper/Step.tsx"],"names":[],"mappings":";;;;;;;;;;;;AACA,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAWrC,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAA;;;;CAI3B,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,KAAyC;IAClE,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,SAAS,KAAc,KAAK,EAAd,IAAI,UAAK,KAAK,EAA9C,iCAAsC,CAAQ,CAAC;IACrD,OAAO,KAAC,SAAS,oBAAK,IAAI,EAAI,CAAC;AACnC,CAAC;AAED,IAAI,CAAC,YAAY,GAAG;IAChB,QAAQ,EAAE,KAAK;IACf,SAAS,EAAE,KAAK;CACnB,CAAA"}
+{"version":3,"file":"Step.js","sourceRoot":"","sources":["../../../src/components/Stepper/Step.tsx"],"names":[],"mappings":";;;;;;;;;;;;AACA,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAWrC,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAA;;;;CAI3B,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,KAAyC;IAClE,6DAA6D;IAC7D,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,SAAS,KAAc,KAAK,EAAd,IAAI,UAAK,KAAK,EAA9C,iCAAsC,CAAQ,CAAC;IACrD,OAAO,KAAC,SAAS,oBAAK,IAAI,EAAI,CAAC;AACnC,CAAC;AAED,IAAI,CAAC,YAAY,GAAG;IAChB,QAAQ,EAAE,KAAK;IACf,SAAS,EAAE,KAAK;CACnB,CAAC","sourcesContent":["import React from 'react';\nimport styled from '@emotion/styled';\n\ninterface StepProps {\n    /** Name of the step to be displayed in the header */\n    name: string;\n    /** Disables the step */\n    disabled?: boolean;\n    /** Marks the step as completed */\n    completed?: boolean;\n}\n\nconst Container = styled.div`\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n`;\n\nexport default function Step(props: React.PropsWithChildren<StepProps>) {\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    const { name, disabled, completed, ...rest } = props;\n    return <Container {...rest} />;\n}\n\nStep.defaultProps = {\n    disabled: false,\n    completed: false,\n};\n"]}

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

@@ -1,9 +1,9 @@
+import { PropsWithChildren } from 'react';
 import PropTypes from 'prop-types';
-type StepperProps = {
+type StepperProps = PropsWithChildren<{
     active: number;
     onStepClick?: (index: number) => void;
-    children: any;
-};
+}>;
 declare function Stepper(props: StepperProps): import("@emotion/react/jsx-runtime").JSX.Element;
 declare namespace Stepper {
     var propTypes: {
@@ -17,3 +17,4 @@ declare namespace Stepper {
     };
 }
 export default Stepper;
+//# sourceMappingURL=Stepper.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Stepper.d.ts","sourceRoot":"","sources":["../../../src/components/Stepper/Stepper.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,iBAAiB,EAA4B,MAAM,OAAO,CAAC;AAC9E,OAAO,SAAS,MAAM,YAAY,CAAC;AAMnC,KAAK,YAAY,GAAG,iBAAiB,CAAC;IAClC,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACzC,CAAC,CAAC;AAkFH,iBAAwB,OAAO,CAAC,KAAK,EAAE,YAAY,oDA6DlD;kBA7DuB,OAAO;;QAgE3B,qCAAqC;;QAErC,kDAAkD;;;;;;;eAlE9B,OAAO"}

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

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
-import { Children, useState } from 'react';
-import styled from '@emotion/styled';
+import { Children, useState, isValidElement } from 'react';
 import PropTypes from 'prop-types';
+import styled from '@emotion/styled';
 import constants from '../../shared/constants';
-import { Badge, BADGE_TYPE } from '../Badge';
 import { Ellipsis } from '../../shared/styles';
+import { Badge, BADGE_TYPE } from '../Badge';
 const Container = styled.div `
     flex: 1;
     display: flex;
@@ -29,7 +29,7 @@ const Header = styled.div `
             z-index: 0;
         }
     }
-    
+
     & > * {
         z-index: 1;
     }
@@ -39,12 +39,12 @@ const HeaderButton = styled.button `
     padding: 16px 24px 16px 16px;
     font-size: 16px;
     cursor: pointer;
-    background-color: ${props => props.active
+    background-color: ${(props) => props.active
     ? `var(--border-light-color, ${constants.BORDER_LIGHT_COLOR})`
     : `var(--background, ${constants.BACKGROUND})`};
-    font-weight: ${props => props.active ? 'bold' : 'normal'};
+    font-weight: ${(props) => (props.active ? 'bold' : 'normal')};
     overflow: hidden;
-    display:flex;
+    display: flex;
     align-items: center;
 
     &:disabled {
@@ -52,7 +52,8 @@ const HeaderButton = styled.button `
         background-color: var(--disabled-background, ${constants.DISABLED_BACKGROUND});
     }
 
-    &:enabled:hover, &:focus {
+    &:enabled:hover,
+    &:focus {
         background-color: var(--primary-light, ${constants.PRIMARY_LIGHTER});
     }
 
@@ -82,6 +83,7 @@ const MobileHeader = styled.div `
 export default function Stepper(props) {
     const [active, setActive] = useState(props.active);
     const { children, onStepClick } = props;
+    const childrenArray = Children.toArray(children);
     const stepClickHandler = (index) => () => {
         setActive(index);
         onStepClick === null || onStepClick === void 0 ? void 0 : onStepClick(index);
@@ -98,7 +100,13 @@ export default function Stepper(props) {
         }
         return BADGE_TYPE.DISABLED;
     };
-    return (_jsxs(Container, { children: [_jsxs(Header, { children: [Children.map(children, (child, index) => (_jsx(_Fragment, { children: _jsxs(HeaderButton, { active: index === active, type: 'button', disabled: child.props.disabled, onClick: stepClickHandler(index), children: [_jsx(Badge, { inline: true, type: getBadgeType(index, child.props.completed, child.props.disabled) }), _jsx(Ellipsis, { children: child.props.name })] }) }))), _jsxs(MobileHeader, { children: [_jsx("span", { children: children[active].props.name }), _jsxs(Badge, { inline: true, type: BADGE_TYPE.PRIMARY, children: [active + 1, " of ", children.length] })] })] }), children[active]] }));
+    return (_jsxs(Container, { children: [_jsxs(Header, { children: [Children.map(children, (child, index) => {
+                        if (!isValidElement(child))
+                            return null;
+                        return (_jsx(_Fragment, { children: _jsxs(HeaderButton, { active: index === active, type: "button", disabled: child.props.disabled, onClick: stepClickHandler(index), children: [_jsx(Badge, { inline: true, type: getBadgeType(index, child.props.completed, child.props.disabled) }), _jsx(Ellipsis, { children: child.props.name })] }) }));
+                    }), _jsxs(MobileHeader, { children: [_jsx("span", { children: isValidElement(childrenArray[active])
+                                    ? childrenArray[active].props.name
+                                    : '' }), _jsxs(Badge, { inline: true, type: BADGE_TYPE.PRIMARY, children: [active + 1, " of ", Children.count(children)] })] })] }), childrenArray[active]] }));
 }
 Stepper.propTypes = {
     /** Index of currently active step */

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

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

package/lib-esm/components/Stepper/index.d.ts

@@ -1,3 +1,4 @@
 export { default as Stepper } from './Stepper';
 export { default as Step } from './Step';
 export { Body as StepBody, Footer as StepFooter } from '../../shared/styles';
+//# sourceMappingURL=index.d.ts.map

package/lib-esm/components/Stepper/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Stepper/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AACzC,OAAO,EAAE,IAAI,IAAI,QAAQ,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Stepper/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AACzC,OAAO,EAAE,IAAI,IAAI,QAAQ,EAAE,MAAM,IAAI,UAAU,EAAE,MAAO,qBAAqB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Stepper/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AACzC,OAAO,EAAE,IAAI,IAAI,QAAQ,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC","sourcesContent":["export { default as Stepper } from './Stepper';\nexport { default as Step } from './Step';\nexport { Body as StepBody, Footer as StepFooter } from '../../shared/styles';\n"]}

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

@@ -16,3 +16,4 @@ declare const Tab: {
     };
 };
 export default Tab;
+//# sourceMappingURL=Tab.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tab.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/Tab.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,SAAS,MAAM,YAAY,CAAC;AAEnC,QAAA,MAAM,GAAG;YAAW,iBAAiB,CAAC;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,OAAO,CAAA;KAAE,CAAC;;QAMtE,sDAAsD;;QAEtD,6BAA6B;;;;;;CALhC,CAAC;AAaF,eAAe,GAAG,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"Tab.js","sourceRoot":"","sources":["../../../src/components/Tabs/Tab.tsx"],"names":[],"mappings":";AACA,OAAO,SAAS,MAAM,YAAY,CAAC;AAEnC,MAAM,GAAG,GAAG,CAAC,KAA2D,EAAE,EAAE;IACxE,MAAM,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAC3B,OAAO,4BAAG,QAAQ,GAAI,CAAC;AAC3B,CAAC,CAAC;AAEF,GAAG,CAAC,SAAS,GAAG;IACZ,sDAAsD;IACtD,IAAI,EAAE,SAAS,CAAC,MAAM,CAAC,UAAU;IACjC,6BAA6B;IAC7B,QAAQ,EAAE,SAAS,CAAC,IAAI;CAC3B,CAAA;AAED,GAAG,CAAC,YAAY,GAAG;IACf,QAAQ,EAAE,KAAK;CAClB,CAAA;AAED,eAAe,GAAG,CAAC"}
+{"version":3,"file":"Tab.js","sourceRoot":"","sources":["../../../src/components/Tabs/Tab.tsx"],"names":[],"mappings":";AACA,OAAO,SAAS,MAAM,YAAY,CAAC;AAEnC,MAAM,GAAG,GAAG,CAAC,KAA6D,EAAE,EAAE;IAC1E,MAAM,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAC3B,OAAO,4BAAG,QAAQ,GAAI,CAAC;AAC3B,CAAC,CAAC;AAEF,GAAG,CAAC,SAAS,GAAG;IACZ,sDAAsD;IACtD,IAAI,EAAE,SAAS,CAAC,MAAM,CAAC,UAAU;IACjC,6BAA6B;IAC7B,QAAQ,EAAE,SAAS,CAAC,IAAI;CAC3B,CAAC;AAEF,GAAG,CAAC,YAAY,GAAG;IACf,QAAQ,EAAE,KAAK;CAClB,CAAC;AAEF,eAAe,GAAG,CAAC","sourcesContent":["import { PropsWithChildren } from 'react';\nimport PropTypes from 'prop-types';\n\nconst Tab = (props: PropsWithChildren<{ name: string; disabled: boolean }>) => {\n    const { children } = props;\n    return <>{children}</>;\n};\n\nTab.propTypes = {\n    /** Name of the tab. This shown in the tab's button */\n    name: PropTypes.string.isRequired,\n    /** If the tab is disabled */\n    disabled: PropTypes.bool,\n};\n\nTab.defaultProps = {\n    disabled: false,\n};\n\nexport default Tab;\n"]}

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

@@ -1,11 +1,11 @@
+import { PropsWithChildren } from 'react';
 import PropTypes from 'prop-types';
-interface ITabsProps {
+type ITabsProps = PropsWithChildren<{
     active?: number;
     onChange?: (index: number) => void;
-    props?: any;
-    bodyProps?: any;
-    children: any;
-}
+    props?: object;
+    bodyProps?: object;
+}>;
 declare function Tabs(props: ITabsProps): import("@emotion/react/jsx-runtime").JSX.Element;
 declare namespace Tabs {
     var propTypes: {
@@ -23,3 +23,4 @@ declare namespace Tabs {
     };
 }
 export default Tabs;
+//# sourceMappingURL=Tabs.d.ts.map

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

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

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-import { useState, Children, useEffect } from 'react';
-import styled from '@emotion/styled';
+import { useState, Children, useEffect, isValidElement } from 'react';
 import PropTypes from 'prop-types';
+import styled from '@emotion/styled';
 import constants from '../../shared/constants';
 const Button = styled.button `
     background-color: transparent;
@@ -9,13 +9,16 @@ const Button = styled.button `
     padding: 8px 12px;
     font-size: 14px;
     border-radius: 3px 3px 0 0;
-    border-bottom: ${(props) => (props.active ? `3px solid var(--primary, ${constants.PRIMARY})` : 'none')};
+    border-bottom: ${(props) => props.active ? `3px solid var(--primary, ${constants.PRIMARY})` : 'none'};
     color: ${(props) => (props.active ? `var(--primary, ${constants.PRIMARY})` : '#000')};
     cursor: pointer;
 
-    &:hover, &:focus {
+    &:hover,
+    &:focus {
         background-color: var(--primary-lighter, #cfe9ff);
-        border-bottom: ${(props) => (props.active ? `3px solid var(--primary, ${constants.PRIMARY})` : `3px solid var(--primary, ${constants.PRIMARY})`)};
+        border-bottom: ${(props) => props.active
+    ? `3px solid var(--primary, ${constants.PRIMARY})`
+    : `3px solid var(--primary, ${constants.PRIMARY})`};
     }
 
     &[disabled] {
@@ -32,16 +35,16 @@ const ButtonContainer = styled.div `
 const TabBody = styled.div `
     min-height: 150px;
 `;
-;
 export default function Tabs(props) {
     const [active, setActive] = useState(props.active);
     const switchTab = (index) => () => setActive(index);
     const { children } = props;
     useEffect(() => {
+        var _a;
         setActive(props.active);
-        props.onChange && props.onChange(props.active);
-    }, [props.active]);
-    return (_jsxs(_Fragment, { children: [_jsx(ButtonContainer, Object.assign({}, props.props, { children: Children.map(children, (child, index) => (_jsx(Button, { type: "button", active: active === index, onClick: switchTab(index), disabled: child.props.disabled, children: child.props.name }))) })), _jsx(TabBody, Object.assign({}, props.bodyProps, { children: children[active] }))] }));
+        (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, props.active);
+    }, [props]);
+    return (_jsxs(_Fragment, { children: [_jsx(ButtonContainer, Object.assign({}, props.props, { children: Children.map(children, (child, index) => (_jsx(Button, { type: "button", active: active === index, onClick: switchTab(index), disabled: isValidElement(child) ? child.props.disabled : false, children: isValidElement(child) ? child.props.name : '' }))) })), _jsx(TabBody, Object.assign({}, props.bodyProps, { children: Children.toArray(children)[active] }))] }));
 }
 Tabs.propTypes = {
     /** Active Tab Index */

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

@@ -1 +1 @@
-{"version":3,"file":"Tabs.js","sourceRoot":"","sources":["../../../src/components/Tabs/Tabs.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC7D,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,SAAS,MAAM,wBAAwB,CAAC;AAE/C,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,CAAqB;;;;;;qBAM5B,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,4BAA4B,SAAS,CAAC,OAAO,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC;aAC7F,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,kBAAkB,SAAS,CAAC,OAAO,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC;;;;;yBAK/D,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,4BAA4B,SAAS,CAAC,OAAO,GAAG,CAAC,CAAC,CAAC,4BAA4B,SAAS,CAAC,OAAO,GAAG,CAAC;;;;uDAIjG,SAAS,CAAC,mBAAmB;iCACnD,SAAS,CAAC,QAAQ;0DACO,SAAS,CAAC,eAAe;;CAElF,CAAC;AAEF,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAA;sDACoB,SAAS,CAAC,eAAe;;;CAG9E,CAAC;AAEF,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAA;;CAEzB,CAAC;AAQD,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,KAAiB;IAC1C,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;IACnD,MAAM,SAAS,GAAG,CAAC,KAAa,EAAE,EAAE,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;IAC5D,MAAM,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAE3B,SAAS,CAAC,GAAG,EAAE;QACX,SAAS,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;QACxB,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;IACnD,CAAC,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC;IAEnB,OAAO,CACH,8BACI,KAAC,eAAe,oBAAK,KAAK,CAAC,KAAK,cAExB,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,CACrC,KAAC,MAAM,IACH,IAAI,EAAC,QAAQ,EACb,MAAM,EAAE,MAAM,KAAK,KAAK,EACxB,OAAO,EAAE,SAAS,CAAC,KAAK,CAAC,EACzB,QAAQ,EAAE,KAAK,CAAC,KAAK,CAAC,QAAQ,YAE7B,KAAK,CAAC,KAAK,CAAC,IAAI,GACZ,CACZ,CAAC,IAEQ,EAClB,KAAC,OAAO,oBAAK,KAAK,CAAC,SAAS,cACvB,QAAQ,CAAC,MAAM,CAAC,IACX,IACX,CACN,CAAC;AACN,CAAC;AAED,IAAI,CAAC,SAAS,GAAG;IACb,uBAAuB;IACvB,MAAM,EAAE,SAAS,CAAC,MAAM;IACxB,6BAA6B;IAC7B,QAAQ,EAAE,SAAS,CAAC,IAAI;IACxB,8CAA8C;IAC9C,KAAK,EAAE,SAAS,CAAC,MAAM;IACvB,2CAA2C;IAC3C,SAAS,EAAE,SAAS,CAAC,MAAM;CAC9B,CAAA;AAGD,IAAI,CAAC,YAAY,GAAE;IACf,MAAM,EAAE,CAAC;CACZ,CAAA"}
+{"version":3,"file":"Tabs.js","sourceRoot":"","sources":["../../../src/components/Tabs/Tabs.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState, Children, useEffect, PropsWithChildren, isValidElement } from 'react';\nimport PropTypes from 'prop-types';\nimport styled from '@emotion/styled';\nimport constants from '../../shared/constants';\n\nconst Button = styled.button<{ active: boolean }>`\n    background-color: transparent;\n    border: none;\n    padding: 8px 12px;\n    font-size: 14px;\n    border-radius: 3px 3px 0 0;\n    border-bottom: ${(props) =>\n        props.active ? `3px solid var(--primary, ${constants.PRIMARY})` : 'none'};\n    color: ${(props) => (props.active ? `var(--primary, ${constants.PRIMARY})` : '#000')};\n    cursor: pointer;\n\n    &:hover,\n    &:focus {\n        background-color: var(--primary-lighter, #cfe9ff);\n        border-bottom: ${(props) =>\n            props.active\n                ? `3px solid var(--primary, ${constants.PRIMARY})`\n                : `3px solid var(--primary, ${constants.PRIMARY})`};\n    }\n\n    &[disabled] {\n        background-color: var(--disabled-background, ${constants.DISABLED_BACKGROUND});\n        color: var(--disabled, ${constants.DISABLED});\n        border-bottom: 3px solid var(--disabled-border, ${constants.DISABLED_BORDER});\n    }\n`;\n\nconst ButtonContainer = styled.div`\n    border-bottom: 1px solid var(--disabled-border, ${constants.DISABLED_BORDER});\n    margin-bottom: 5px;\n    position: relative;\n`;\n\nconst TabBody = styled.div`\n    min-height: 150px;\n`;\n\ntype ITabsProps = PropsWithChildren<{\n    active?: number;\n    onChange?: (index: number) => void;\n    props?: object;\n    bodyProps?: object;\n}>;\n\nexport default function Tabs(props: ITabsProps) {\n    const [active, setActive] = useState(props.active);\n    const switchTab = (index: number) => () => setActive(index);\n    const { children } = props;\n\n    useEffect(() => {\n        setActive(props.active);\n        props.onChange?.(props.active);\n    }, [props]);\n\n    return (\n        <>\n            <ButtonContainer {...props.props}>\n                {Children.map(children, (child, index) => (\n                    <Button\n                        type=\"button\"\n                        active={active === index}\n                        onClick={switchTab(index)}\n                        disabled={isValidElement(child) ? child.props.disabled : false}\n                    >\n                        {isValidElement(child) ? child.props.name : ''}\n                    </Button>\n                ))}\n            </ButtonContainer>\n            <TabBody {...props.bodyProps}>{Children.toArray(children)[active]}</TabBody>\n        </>\n    );\n}\n\nTabs.propTypes = {\n    /** Active Tab Index */\n    active: PropTypes.number,\n    /** OnChange event handler */\n    onChange: PropTypes.func,\n    /** Props for div that contains tab buttons */\n    props: PropTypes.object,\n    /** Props for div that contains tab body */\n    bodyProps: PropTypes.object,\n};\n\nTabs.defaultProps = {\n    active: 0,\n};\n"]}

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

@@ -1,2 +1,3 @@
 export { default as Tabs } from './Tabs';
 export { default as Tab } from './Tab';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,GAAG,EAAE,MAAM,OAAO,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Tabs/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,GAAG,EAAE,MAAM,OAAO,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Tabs/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,GAAG,EAAE,MAAM,OAAO,CAAC","sourcesContent":["export { default as Tabs } from './Tabs';\nexport { default as Tab } from './Tab';\n"]}

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

@@ -16,6 +16,7 @@ declare class Toast {
     private element;
     private toast;
     private timeout;
+    private root;
     constructor();
     remove: () => void;
     /**
@@ -34,3 +35,4 @@ declare class Toast {
 }
 declare const _default: Toast;
 export default _default;
+//# sourceMappingURL=Toast.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../../src/components/Toast/Toast.tsx"],"names":[],"mappings":"AAMA,MAAM,WAAW,YAAY;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,UAAU,CAAC;CACrB;AAED,oBAAY,UAAU;IAClB,MAAM,WAAW;IACjB,IAAI,SAAS;IACb,OAAO,YAAY;IACnB,OAAO,YAAY;IACnB,MAAM,WAAW;CACpB;AAuED,cAAM,KAAK;IACP,OAAO,CAAC,OAAO,CAAiB;IAChC,OAAO,CAAC,KAAK,CAA8C;IAC3D,OAAO,CAAC,OAAO,CAAiB;IAChC,OAAO,CAAC,IAAI,CAAO;;IAMZ,MAAM,aAaX;IAEF;;;;OAIG;IACI,KAAK,aAEV;IAEF;;;;OAIG;IACI,MAAM,YAAa,YAAY,gBAIpC;IAEK,GAAG,CAAC,OAAO,EAAE,YAAY;CAkCnC;;AAED,wBAA2B"}

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

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import styled from '@emotion/styled';
-import { Card } from '../Card';
-import LayerManager, { LAYER_POSITION } from '../../shared/LayerManager';
 import constants from '../../shared/constants';
+import LayerManager, { LAYER_POSITION } from '../../shared/LayerManager';
+import { Card } from '../Card';
 export var TOAST_TYPE;
 (function (TOAST_TYPE) {
     TOAST_TYPE["NORMAL"] = "NORMAL";
@@ -30,13 +30,13 @@ const ToastContainer = styled(Card) `
     box-sizing: border-box;
     border-radius: 3px;
     padding: 12px;
-    background-color: ${props => getBackgroundColor(props.type)};
+    background-color: ${(props) => getBackgroundColor(props.type)};
     color: #fff;
     margin: 20px;
     font-size: 14px;
     line-height: 20px;
     transform: translateY(100%);
-    transition: transform .3s ease;
+    transition: transform 0.3s ease;
     width: 344px;
     display: flex;
     align-items: center;
@@ -87,7 +87,7 @@ class Toast {
             this.toast = null;
             setTimeout(() => {
                 if (!this.toast) {
-                    ReactDOM.unmountComponentAtNode(this.element);
+                    this.root.unmount();
                 }
             }, 300);
         };
@@ -120,10 +120,11 @@ class Toast {
             closeOnOverlayClick: false,
             alwaysOnTop: true,
             position: LAYER_POSITION.BOTTOM_LEFT,
-            component: (_jsxs(ToastContainer, Object.assign({}, options, { type: type, elevated: true, onMouseEnter: this.pause, onMouseLeave: this.resume(options), children: [_jsx(TextContainer, { children: text }), buttonText && (_jsx(CloseContainer, { onClick: buttonClick, type: 'button', children: buttonText }))] })))
+            component: (_jsxs(ToastContainer, Object.assign({}, options, { type: type, elevated: true, onMouseEnter: this.pause, onMouseLeave: this.resume(options), children: [_jsx(TextContainer, { children: text }), buttonText && (_jsx(CloseContainer, { onClick: buttonClick, type: "button", children: buttonText }))] }))),
         });
         const Component = this.toast[0];
-        ReactDOM.render(_jsx(Component, {}), this.element);
+        this.root = createRoot(this.element);
+        this.root.render(_jsx(Component, {}));
         this.timeout = setTimeout(() => {
             this.remove();
         }, duration || DEFAULT_DURATION);