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

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

@@ -1,38 +1,26 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from '@emotion/react/jsx-runtime';
 import React from 'react';
-import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
-import LayerManager, { LAYER_POSITION } from '../../shared/LayerManager';
-import constants from '../../shared/constants';
-export { Header as DrawerHeader, Body as DrawerBody, Footer as DrawerFooter, } from '../../shared/styles';
-export var DRAWER_POSITION;
-(function (DRAWER_POSITION) {
+import { getThemeValue, THEME_NAME } from '../../shared/constants.js';
+import LayerManager, { LAYER_POSITION } from '../../shared/LayerManager.js';
+
+var DRAWER_POSITION = /*#__PURE__*/ function(DRAWER_POSITION) {
     DRAWER_POSITION["LEFT"] = "LEFT";
     DRAWER_POSITION["RIGHT"] = "RIGHT";
     DRAWER_POSITION["BOTTOM"] = "BOTTOM";
-})(DRAWER_POSITION || (DRAWER_POSITION = {}));
-const positionStyle = (size) => ({
-    [DRAWER_POSITION.LEFT]: {
-        before: `height: 100vh; min-width: ${size || '300px'}; transform: translateX(-100%);`,
-        after: 'transform: translateX(0%);',
-    },
-    [DRAWER_POSITION.RIGHT]: {
-        before: `height: 100vh; min-width: ${size || '300px'}; transform: translateX(100%);`,
-        after: 'transform: translateX(0%);',
-    },
-    [DRAWER_POSITION.BOTTOM]: {
-        before: `
+    return DRAWER_POSITION;
+}({});
+const positionStyle$1 = (size)=>({
+        ["LEFT"]: {
+            before: `height: 100vh; min-width: ${size || '300px'}; transform: translateX(-100%);`,
+            after: 'transform: translateX(0%);'
+        },
+        ["RIGHT"]: {
+            before: `height: 100vh; min-width: ${size || '300px'}; transform: translateX(100%);`,
+            after: 'transform: translateX(0%);'
+        },
+        ["BOTTOM"]: {
+            before: `
             position: absolute;
             bottom: 0;
             width: 100%;
@@ -40,102 +28,193 @@ const positionStyle = (size) => ({
             transform: translateY(100%);
             border-radius: 15px 15px 0 0; 
         `,
-        after: 'transform: translateX(0%);',
-    },
-});
-const DrawerDiv = styled.div `
-    display: flex;
-    flex-direction: column;
-    background-color: #fff;
-    transition: transform .3s ease;
-    box-shadow: var(--modal-shadow, ${constants.MODAL_SHADOW});
-    ${props => positionStyle(props.size)[props.position].before}
-
-    .nf-layer-enter & {
-        transform: translateX(0%);
-        ${props => positionStyle(props.size)[props.position].after}
-    }
-`;
-const positionMap = {
-    [DRAWER_POSITION.LEFT]: LAYER_POSITION.TOP_LEFT,
-    [DRAWER_POSITION.RIGHT]: LAYER_POSITION.TOP_RIGHT,
-    [DRAWER_POSITION.BOTTOM]: LAYER_POSITION.BOTTOM_LEFT,
+            after: 'transform: translateX(0%);'
+        }
+    });
+const DrawerDiv = /*#__PURE__*/ styled("div", {
+    target: "egs35xi0",
+    label: "DrawerDiv"
+})("display:flex;flex-direction:column;background-color:", getThemeValue(THEME_NAME.BACKGROUND), ";transition:transform 0.3s ease;box-shadow:", getThemeValue(THEME_NAME.MODAL_SHADOW), ";", (props)=>positionStyle$1(props.size)[props.position].before, "    .nf-layer-enter &{transform:translateX(0%);", (props)=>positionStyle$1(props.size)[props.position].after, "}");
+const positionMap$1 = {
+    ["LEFT"]: LAYER_POSITION.TOP_LEFT,
+    ["RIGHT"]: LAYER_POSITION.TOP_RIGHT,
+    ["BOTTOM"]: LAYER_POSITION.BOTTOM_LEFT
 };
 class Drawer extends React.Component {
-    constructor() {
-        super(...arguments);
-        this.state = {
-            open: false,
-        };
-        this.onClose = () => {
-            this.setState({
-                open: false,
-            });
-            this.props.onClose && this.props.onClose();
-            this.closeCallback = null;
-            this.layer = null;
-        };
-    }
-    static getDerivedStateFromProps(props) {
+    /**
+     * Syncs state with props.
+     */ static getDerivedStateFromProps(props) {
         if (props.open) {
             return {
-                open: true,
+                open: true
             };
         }
         return null;
     }
-    getSnapshotBeforeUpdate(prevProps) {
-        const _a = this.props, { open, closeOnEsc, closeOnOverlayClick, overlay, position, children, size } = _a, rest = __rest(_a, ["open", "closeOnEsc", "closeOnOverlayClick", "overlay", "position", "children", "size"]);
+    /**
+     * Lifecycle method to save the currently focused element when the drawer mounts while open.
+     */ componentDidMount() {
+        if (this.props.open) {
+            this.lastFocusedElement = document.activeElement;
+        }
+    }
+    /**
+     * Lifecycle method to restore focus when the drawer unmounts.
+     */ componentWillUnmount() {
+        if (this.props.open) {
+            this.restoreFocus();
+        }
+    }
+    /**
+     * Lifecycle method to handle Drawer updates.
+     * Manages opening/closing logic via LayerManager and focus preservation.
+     */ getSnapshotBeforeUpdate(prevProps) {
+        const { open, closeOnEsc, closeOnOverlayClick, overlay, position, children, size, ...rest } = this.props;
         if (prevProps.open && !open) {
-            this.closeCallback && this.closeCallback();
+            this.closeCallback?.();
+            this.restoreFocus();
         }
         if (!prevProps.open && open) {
+            // Save current focus
+            this.lastFocusedElement = document.activeElement;
             this.layer = LayerManager.renderLayer({
                 overlay,
                 exitDelay: 300,
-                position: positionMap[position],
+                position: positionMap$1[position],
                 closeCallback: this.onClose,
                 closeOnEsc,
                 closeOnOverlayClick,
-                component: (_jsx(DrawerDiv, Object.assign({}, rest, { position: position, size: size, onClick: e => e.stopPropagation(), children: children })))
+                component: /*#__PURE__*/ jsx(DrawerDiv, {
+                    ...rest,
+                    ref: this.setDrawerRef,
+                    role: "dialog",
+                    "aria-modal": "true",
+                    tabIndex: -1,
+                    onKeyDown: this.handleKeyDown,
+                    position: position,
+                    size: size,
+                    onClick: (e)=>e.stopPropagation(),
+                    children: children
+                })
             });
             this.closeCallback = this.layer[1];
             this.forceUpdate();
         }
     }
-    render() {
+    /**
+     * Renders the Drawer component via the LayerManager portal.
+     */ render() {
         if (this.state.open && this.layer) {
             const [Component] = this.layer;
-            return _jsx(Component, {});
+            return /*#__PURE__*/ jsx(Component, {
+                ref: this.setRefProp
+            });
         }
         return null;
     }
+    constructor(...args){
+        super(...args), this.state = {
+            open: false
+        }, /**
+     * Internal close handler.
+     * Restores focus and calls the external onClose callback.
+     */ this.onClose = ()=>{
+            this.restoreFocus();
+            this.setState({
+                open: false
+            });
+            this.props.onClose?.();
+            this.closeCallback = undefined;
+            this.layer = undefined;
+        }, this.lastFocusedElement = null, this.drawerRef = /*#__PURE__*/ React.createRef(), /**
+     * Retrieves all focusable elements within the drawer.
+     */ this.getFocusableElements = ()=>{
+            if (!this.drawerRef.current) return [];
+            return Array.from(this.drawerRef.current.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'));
+        }, /**
+     * Handles keydown events to implement the focus trap.
+     * Traps Tab and Shift+Tab within the drawer.
+     */ this.handleKeyDown = (e)=>{
+            if (e.key === 'Tab') {
+                const focusableElements = this.getFocusableElements();
+                if (focusableElements.length === 0) return;
+                const firstElement = focusableElements[0];
+                const lastElement = focusableElements[focusableElements.length - 1];
+                if (e.shiftKey) {
+                    if (document.activeElement === firstElement) {
+                        lastElement.focus();
+                        e.preventDefault();
+                    }
+                } else {
+                    if (document.activeElement === lastElement) {
+                        firstElement.focus();
+                        e.preventDefault();
+                    }
+                }
+            }
+        }, /**
+     * Restores focus to the element that was focused before the drawer opened.
+     */ this.restoreFocus = ()=>{
+            if (this.lastFocusedElement) {
+                // Check if the element is still in the document
+                const elementToBeFocused = this.lastFocusedElement;
+                this.lastFocusedElement = null;
+                setTimeout(()=>{
+                    if (document.body.contains(elementToBeFocused)) {
+                        elementToBeFocused.focus();
+                    }
+                }, 100);
+            }
+        }, /**
+     * Callback ref to capture the Drawer DOM element.
+     * Triggers initial focus setting when the element mounts.
+     */ this.setDrawerRef = (node)=>{
+            // Update ref
+            this.drawerRef.current = node;
+            if (node) {
+                // Set initial focus when the node is mounted
+                this.setInitialFocus(node);
+            }
+        }, /**
+     * Sets initial focus within the drawer.
+     * Tries to focus the header first, then the first interactive element, or falls back to the container.
+     */ this.setInitialFocus = (root)=>{
+            // Try to find the header (assumed to be the first child)
+            const firstChild = root.firstElementChild;
+            if (firstChild) {
+                // Ensure it's focusable
+                if (firstChild.getAttribute('tabindex') === null) {
+                    firstChild.setAttribute('tabindex', '-1');
+                }
+                firstChild.focus();
+                return;
+            }
+            // Fallback to focusable elements
+            const focusableElements = this.getFocusableElements();
+            if (focusableElements.length > 0) {
+                focusableElements[0].focus();
+            } else {
+                // Fallback to container
+                root.focus();
+            }
+        }, /**
+     * Sets the ref prop passed to the Drawer Container component.
+     * @param node
+     */ this.setRefProp = (node)=>{
+            if (this.props.forwardRef && typeof this.props.forwardRef === 'function') {
+                this.props.forwardRef(node);
+            } else if (this.props.forwardRef && typeof this.props.forwardRef === 'object') {
+                this.props.forwardRef.current = node;
+            }
+        };
+    }
 }
-Drawer.propTypes = {
-    /** Opens the drawer */
-    open: PropTypes.bool.isRequired,
-    /** position of the drawer */
-    position: PropTypes.oneOf([
-        DRAWER_POSITION.LEFT,
-        DRAWER_POSITION.RIGHT,
-        DRAWER_POSITION.BOTTOM,
-    ]),
-    /** size of the drawer */
-    size: PropTypes.string,
-    /** Shows an overlay behind the drawer. */
-    overlay: PropTypes.bool,
-    /** Closes the drawer on esc */
-    closeOnEsc: PropTypes.bool,
-    /** Closes the drawer on overlay click */
-    closeOnOverlayClick: PropTypes.bool,
-    /** Call back function called when the drawer closes. */
-    onClose: PropTypes.func,
-};
 Drawer.defaultProps = {
     overlay: true,
-    position: DRAWER_POSITION.LEFT,
+    position: "LEFT",
     closeOnEsc: true,
-    closeOnOverlayClick: true,
+    closeOnOverlayClick: true
 };
-export default Drawer;
-//# sourceMappingURL=Drawer.js.map
+
+export { DRAWER_POSITION, Drawer as default };
+//# sourceMappingURL=Drawer.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Drawer.js","sourceRoot":"","sources":["../../../src/components/Drawer/Drawer.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Drawer.js","sources":["../../../src/components/Drawer/Drawer.tsx"],"sourcesContent":["import React from 'react';\nimport styled from '@emotion/styled';\nimport { getThemeValue, THEME_NAME } from '../../shared/constants';\nimport LayerManager, { LAYER_POSITION } from '../../shared/LayerManager';\n\nexport {\n    Header as DrawerHeader,\n    Body as DrawerBody,\n    Footer as DrawerFooter,\n} from '../../shared/styles';\n\nexport enum DRAWER_POSITION {\n    LEFT = 'LEFT',\n    RIGHT = 'RIGHT',\n    BOTTOM = 'BOTTOM',\n}\n\nconst positionStyle = (size?: string) => ({\n    [DRAWER_POSITION.LEFT]: {\n        before: `height: 100vh; min-width: ${size || '300px'}; transform: translateX(-100%);`,\n        after: 'transform: translateX(0%);',\n    },\n    [DRAWER_POSITION.RIGHT]: {\n        before: `height: 100vh; min-width: ${size || '300px'}; transform: translateX(100%);`,\n        after: 'transform: translateX(0%);',\n    },\n    [DRAWER_POSITION.BOTTOM]: {\n        before: `\n            position: absolute;\n            bottom: 0;\n            width: 100%;\n            height: ${size || '90vh'};\n            transform: translateY(100%);\n            border-radius: 15px 15px 0 0; \n        `,\n        after: 'transform: translateX(0%);',\n    },\n});\n\nconst DrawerDiv = styled.div<{ position: DRAWER_POSITION; size?: string }>`\n    display: flex;\n    flex-direction: column;\n    background-color: ${getThemeValue(THEME_NAME.BACKGROUND)};\n    transition: transform 0.3s ease;\n    box-shadow: ${getThemeValue(THEME_NAME.MODAL_SHADOW)};\n    ${(props) => positionStyle(props.size)[props.position].before}\n\n    .nf-layer-enter & {\n        transform: translateX(0%);\n        ${(props) => positionStyle(props.size)[props.position].after}\n    }\n`;\n\ntype DrawerProps = {\n    /** Opens the drawer */\n    open: boolean;\n    /** position of the drawer */\n    position: DRAWER_POSITION;\n    /** size of the drawer */\n    size?: string;\n    /** Shows an overlay behind the drawer. */\n    overlay?: boolean;\n    /** Closes the drawer on esc */\n    closeOnEsc?: boolean;\n    /** Closes the drawer on overlay click */\n    closeOnOverlayClick?: boolean;\n    /** Call back function called when the drawer closes. */\n    onClose?: () => void;\n    /** Ref to the drawer element */\n    forwardRef?: React.Ref<HTMLDivElement> | React.MutableRefObject<HTMLDivElement | null>;\n};\n\ninterface DrawerState {\n    open: boolean;\n}\n\nconst positionMap = {\n    [DRAWER_POSITION.LEFT]: LAYER_POSITION.TOP_LEFT,\n    [DRAWER_POSITION.RIGHT]: LAYER_POSITION.TOP_RIGHT,\n    [DRAWER_POSITION.BOTTOM]: LAYER_POSITION.BOTTOM_LEFT,\n};\n\n/**\n * Drawer component\n *\n * A panel that slides in from the edge of the screen.\n * It sits on top of the application content and is often used for navigation or details.\n *\n * Accessibility:\n * - Implements ARIA `role=\"dialog\"` and `aria-modal=\"true\"`.\n * - Traps focus effectively within the drawer while open.\n * - Restores focus to the triggering element upon closure.\n * - Supports closing via ESC key and overlay click.\n */\nexport default class Drawer extends React.Component<\n    React.PropsWithChildren<DrawerProps>,\n    DrawerState\n> {\n    state = {\n        open: false,\n    };\n\n    static defaultProps = {\n        overlay: true,\n        position: DRAWER_POSITION.LEFT,\n        closeOnEsc: true,\n        closeOnOverlayClick: true,\n    };\n\n    /**\n     * Syncs state with props.\n     */\n    static getDerivedStateFromProps(props: DrawerProps) {\n        if (props.open) {\n            return {\n                open: true,\n            };\n        }\n        return null;\n    }\n\n    private layer?: ReturnType<typeof LayerManager.renderLayer>;\n\n    private closeCallback?: (resp?: unknown) => void;\n\n    /**\n     * Internal close handler.\n     * Restores focus and calls the external onClose callback.\n     */\n    private onClose = () => {\n        this.restoreFocus();\n        this.setState({\n            open: false,\n        });\n        this.props.onClose?.();\n        this.closeCallback = undefined;\n        this.layer = undefined;\n    };\n\n    private lastFocusedElement: HTMLElement | null = null;\n    private drawerRef = React.createRef<HTMLDivElement>();\n\n    /**\n     * Retrieves all focusable elements within the drawer.\n     */\n    private getFocusableElements = (): HTMLElement[] => {\n        if (!this.drawerRef.current) return [];\n        return Array.from(\n            this.drawerRef.current.querySelectorAll(\n                'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])',\n            ),\n        ) as HTMLElement[];\n    };\n\n    /**\n     * Handles keydown events to implement the focus trap.\n     * Traps Tab and Shift+Tab within the drawer.\n     */\n    private handleKeyDown = (e: React.KeyboardEvent) => {\n        if (e.key === 'Tab') {\n            const focusableElements = this.getFocusableElements();\n            if (focusableElements.length === 0) return;\n\n            const firstElement = focusableElements[0];\n            const lastElement = focusableElements[focusableElements.length - 1];\n\n            if (e.shiftKey) {\n                if (document.activeElement === firstElement) {\n                    lastElement.focus();\n                    e.preventDefault();\n                }\n            } else {\n                if (document.activeElement === lastElement) {\n                    firstElement.focus();\n                    e.preventDefault();\n                }\n            }\n        }\n    };\n\n    /**\n     * Lifecycle method to save the currently focused element when the drawer mounts while open.\n     */\n    componentDidMount() {\n        if (this.props.open) {\n            this.lastFocusedElement = document.activeElement as HTMLElement;\n        }\n    }\n\n    /**\n     * Lifecycle method to restore focus when the drawer unmounts.\n     */\n    componentWillUnmount() {\n        if (this.props.open) {\n            this.restoreFocus();\n        }\n    }\n\n    /**\n     * Restores focus to the element that was focused before the drawer opened.\n     */\n    private restoreFocus = () => {\n        if (this.lastFocusedElement) {\n            // Check if the element is still in the document\n            const elementToBeFocused = this.lastFocusedElement;\n            this.lastFocusedElement = null;\n            setTimeout(() => {\n                if (document.body.contains(elementToBeFocused)) {\n                    elementToBeFocused.focus();\n                }\n            }, 100);\n        }\n    };\n\n    /**\n     * Callback ref to capture the Drawer DOM element.\n     * Triggers initial focus setting when the element mounts.\n     */\n    private setDrawerRef = (node: HTMLDivElement | null) => {\n        // Update ref\n        (this.drawerRef as React.MutableRefObject<HTMLDivElement | null>).current = node;\n\n        if (node) {\n            // Set initial focus when the node is mounted\n            this.setInitialFocus(node);\n        }\n    };\n\n    /**\n     * Sets initial focus within the drawer.\n     * Tries to focus the header first, then the first interactive element, or falls back to the container.\n     */\n    private setInitialFocus = (root: HTMLElement) => {\n        // Try to find the header (assumed to be the first child)\n        const firstChild = root.firstElementChild as HTMLElement;\n        if (firstChild) {\n            // Ensure it's focusable\n            if (firstChild.getAttribute('tabindex') === null) {\n                firstChild.setAttribute('tabindex', '-1');\n            }\n            firstChild.focus();\n            return;\n        }\n\n        // Fallback to focusable elements\n        const focusableElements = this.getFocusableElements();\n        if (focusableElements.length > 0) {\n            focusableElements[0].focus();\n        } else {\n            // Fallback to container\n            root.focus();\n        }\n    };\n\n    /**\n     * Lifecycle method to handle Drawer updates.\n     * Manages opening/closing logic via LayerManager and focus preservation.\n     */\n    getSnapshotBeforeUpdate(prevProps: DrawerProps) {\n        const {\n            open,\n            closeOnEsc,\n            closeOnOverlayClick,\n            overlay,\n            position,\n            children,\n            size,\n            ...rest\n        } = this.props;\n\n        if (prevProps.open && !open) {\n            this.closeCallback?.();\n            this.restoreFocus();\n        }\n\n        if (!prevProps.open && open) {\n            // Save current focus\n            this.lastFocusedElement = document.activeElement as HTMLElement;\n\n            this.layer = LayerManager.renderLayer({\n                overlay,\n                exitDelay: 300,\n                position: positionMap[position],\n                closeCallback: this.onClose,\n                closeOnEsc,\n                closeOnOverlayClick,\n                component: (\n                    <DrawerDiv\n                        {...rest}\n                        ref={this.setDrawerRef}\n                        role=\"dialog\"\n                        aria-modal=\"true\"\n                        tabIndex={-1}\n                        onKeyDown={this.handleKeyDown}\n                        position={position}\n                        size={size}\n                        onClick={(e) => e.stopPropagation()}\n                    >\n                        {children}\n                    </DrawerDiv>\n                ),\n            });\n            this.closeCallback = this.layer[1];\n            this.forceUpdate();\n        }\n    }\n\n    /**\n     * Sets the ref prop passed to the Drawer Container component.\n     * @param node\n     */\n    setRefProp = (node: HTMLDivElement | null) => {\n        if (this.props.forwardRef && typeof this.props.forwardRef === 'function') {\n            this.props.forwardRef(node);\n        } else if (this.props.forwardRef && typeof this.props.forwardRef === 'object') {\n            (this.props.forwardRef as React.MutableRefObject<HTMLDivElement | null>).current = node;\n        }\n    };\n\n    /**\n     * Renders the Drawer component via the LayerManager portal.\n     */\n    render() {\n        if (this.state.open && this.layer) {\n            const [Component] = this.layer;\n            return <Component ref={this.setRefProp} />;\n        }\n\n        return null;\n    }\n}\n"],"names":["DRAWER_POSITION","positionStyle","size","before","after","DrawerDiv","styled","getThemeValue","THEME_NAME","BACKGROUND","MODAL_SHADOW","props","position","positionMap","LAYER_POSITION","TOP_LEFT","TOP_RIGHT","BOTTOM_LEFT","Drawer","React","Component","getDerivedStateFromProps","open","componentDidMount","lastFocusedElement","document","activeElement","componentWillUnmount","restoreFocus","getSnapshotBeforeUpdate","prevProps","closeOnEsc","closeOnOverlayClick","overlay","children","rest","closeCallback","layer","LayerManager","renderLayer","exitDelay","onClose","component","_jsx","ref","setDrawerRef","role","aria-modal","tabIndex","onKeyDown","handleKeyDown","onClick","e","stopPropagation","forceUpdate","render","state","setRefProp","setState","undefined","drawerRef","createRef","getFocusableElements","current","Array","from","querySelectorAll","key","focusableElements","length","firstElement","lastElement","shiftKey","focus","preventDefault","elementToBeFocused","setTimeout","body","contains","node","setInitialFocus","root","firstChild","firstElementChild","getAttribute","setAttribute","forwardRef","defaultProps"],"mappings":";;;;;;AAWO,IAAA,eAAKA,iBAAAA,SAAAA,eAAAA,EAAAA;;;;AAAAA,IAAAA,OAAAA,eAAAA;AAIX,CAAA,CAAA,EAAA;AAED,MAAMC,eAAAA,GAAgB,CAACC,IAAAA,IAAmB;AACtC,QAAA,CAAA,MAAA,GAAwB;AACpBC,YAAAA,MAAAA,EAAQ,CAAC,0BAA0B,EAAED,IAAAA,IAAQ,OAAA,CAAQ,+BAA+B,CAAC;YACrFE,KAAAA,EAAO;AACX,SAAA;AACA,QAAA,CAAA,OAAA,GAAyB;AACrBD,YAAAA,MAAAA,EAAQ,CAAC,0BAA0B,EAAED,IAAAA,IAAQ,OAAA,CAAQ,8BAA8B,CAAC;YACpFE,KAAAA,EAAO;AACX,SAAA;AACA,QAAA,CAAA,QAAA,GAA0B;AACtBD,YAAAA,MAAAA,EAAQ;;;;AAII,oBAAA,EAAED,QAAQ,MAAA,CAAO;;;QAG7B,CAAC;YACDE,KAAAA,EAAO;AACX;KACJ,CAAA;AAEA,MAAMC,SAAAA,iBAAYC,MAAAA,CAAAA,KAAAA,EAAAA;;;AAGMC,CAAAA,CAAAA,CAAAA,sDAAAA,EAAAA,aAAAA,CAAcC,UAAAA,CAAWC,UAAU,CAAA,EAAA,6CAAA,EAEzCF,aAAAA,CAAcC,UAAAA,CAAWE,YAAY,CAAA,EAAA,GAAA,EACjD,CAACC,KAAAA,GAAUV,eAAAA,CAAcU,KAAAA,CAAMT,IAAI,CAAC,CAACS,KAAAA,CAAMC,QAAQ,CAAC,CAACT,MAAM,EAAA,iDAAA,EAIvD,CAACQ,QAAUV,eAAAA,CAAcU,KAAAA,CAAMT,IAAI,CAAC,CAACS,KAAAA,CAAMC,QAAQ,CAAC,CAACR,KAAK,EAAA,GAAA,CAAA;AA2BpE,MAAMS,aAAAA,GAAc;IAChB,CAAA,MAAA,GAAwBC,eAAeC,QAAQ;IAC/C,CAAA,OAAA,GAAyBD,eAAeE,SAAS;IACjD,CAAA,QAAA,GAA0BF,eAAeG;AAC7C,CAAA;AAce,MAAMC,MAAAA,SAAeC,MAAMC,SAAS,CAAA;AAe/C;;QAGA,OAAOC,wBAAAA,CAAyBV,KAAkB,EAAE;QAChD,IAAIA,KAAAA,CAAMW,IAAI,EAAE;YACZ,OAAO;gBACHA,IAAAA,EAAM;AACV,aAAA;AACJ,QAAA;QACA,OAAO,IAAA;AACX,IAAA;AA6DA;;AAEC,QACDC,iBAAAA,GAAoB;AAChB,QAAA,IAAI,IAAI,CAACZ,KAAK,CAACW,IAAI,EAAE;AACjB,YAAA,IAAI,CAACE,kBAAkB,GAAGC,QAAAA,CAASC,aAAa;AACpD,QAAA;AACJ,IAAA;AAEA;;AAEC,QACDC,oBAAAA,GAAuB;AACnB,QAAA,IAAI,IAAI,CAAChB,KAAK,CAACW,IAAI,EAAE;AACjB,YAAA,IAAI,CAACM,YAAY,EAAA;AACrB,QAAA;AACJ,IAAA;AA0DA;;;QAIAC,uBAAAA,CAAwBC,SAAsB,EAAE;QAC5C,MAAM,EACFR,IAAI,EACJS,UAAU,EACVC,mBAAmB,EACnBC,OAAO,EACPrB,QAAQ,EACRsB,QAAQ,EACRhC,IAAI,EACJ,GAAGiC,MACN,GAAG,IAAI,CAACxB,KAAK;AAEd,QAAA,IAAImB,SAAAA,CAAUR,IAAI,IAAI,CAACA,IAAAA,EAAM;AACzB,YAAA,IAAI,CAACc,aAAa,IAAA;AAClB,YAAA,IAAI,CAACR,YAAY,EAAA;AACrB,QAAA;AAEA,QAAA,IAAI,CAACE,SAAAA,CAAUR,IAAI,IAAIA,IAAAA,EAAM;;AAEzB,YAAA,IAAI,CAACE,kBAAkB,GAAGC,QAAAA,CAASC,aAAa;AAEhD,YAAA,IAAI,CAACW,KAAK,GAAGC,YAAAA,CAAaC,WAAW,CAAC;AAClCN,gBAAAA,OAAAA;gBACAO,SAAAA,EAAW,GAAA;gBACX5B,QAAAA,EAAUC,aAAW,CAACD,QAAAA,CAAS;gBAC/BwB,aAAAA,EAAe,IAAI,CAACK,OAAO;AAC3BV,gBAAAA,UAAAA;AACAC,gBAAAA,mBAAAA;AACAU,gBAAAA,SAAAA,gBACIC,GAAA,CAACtC,SAAAA,EAAAA;AACI,oBAAA,GAAG8B,IAAI;oBACRS,GAAAA,EAAK,IAAI,CAACC,YAAY;oBACtBC,IAAAA,EAAK,QAAA;oBACLC,YAAAA,EAAW,MAAA;AACXC,oBAAAA,QAAAA,EAAU,EAAC;oBACXC,SAAAA,EAAW,IAAI,CAACC,aAAa;oBAC7BtC,QAAAA,EAAUA,QAAAA;oBACVV,IAAAA,EAAMA,IAAAA;oBACNiD,OAAAA,EAAS,CAACC,CAAAA,GAAMA,CAAAA,CAAEC,eAAe,EAAA;AAEhCnB,oBAAAA,QAAAA,EAAAA;;AAGb,aAAA,CAAA;AACA,YAAA,IAAI,CAACE,aAAa,GAAG,IAAI,CAACC,KAAK,CAAC,CAAA,CAAE;AAClC,YAAA,IAAI,CAACiB,WAAW,EAAA;AACpB,QAAA;AACJ,IAAA;AAcA;;AAEC,QACDC,MAAAA,GAAS;QACL,IAAI,IAAI,CAACC,KAAK,CAAClC,IAAI,IAAI,IAAI,CAACe,KAAK,EAAE;AAC/B,YAAA,MAAM,CAACjB,SAAAA,CAAU,GAAG,IAAI,CAACiB,KAAK;AAC9B,YAAA,qBAAOM,GAAA,CAACvB,SAAAA,EAAAA;gBAAUwB,GAAAA,EAAK,IAAI,CAACa;;AAChC,QAAA;QAEA,OAAO,IAAA;AACX,IAAA;;AA3OW,QAAA,KAAA,CAAA,GAAA,IAAA,CAAA,EAAA,IAAA,CAIXD,KAAAA,GAAQ;YACJlC,IAAAA,EAAM;SACV;;;AA4BC,QAAA,IAAA,CACOmB,OAAAA,GAAU,IAAA;AACd,YAAA,IAAI,CAACb,YAAY,EAAA;YACjB,IAAI,CAAC8B,QAAQ,CAAC;gBACVpC,IAAAA,EAAM;AACV,aAAA,CAAA;YACA,IAAI,CAACX,KAAK,CAAC8B,OAAO,IAAA;YAClB,IAAI,CAACL,aAAa,GAAGuB,SAAAA;YACrB,IAAI,CAACtB,KAAK,GAAGsB,SAAAA;AACjB,QAAA,CAAA,EAAA,IAAA,CAEQnC,kBAAAA,GAAyC,IAAA,EAAA,IAAA,CACzCoC,SAAAA,iBAAYzC,KAAAA,CAAM0C,SAAS,EAAA;;AAIlC,QAAA,IAAA,CACOC,oBAAAA,GAAuB,IAAA;YAC3B,IAAI,CAAC,IAAI,CAACF,SAAS,CAACG,OAAO,EAAE,OAAO,EAAE;YACtC,OAAOC,KAAAA,CAAMC,IAAI,CACb,IAAI,CAACL,SAAS,CAACG,OAAO,CAACG,gBAAgB,CACnC,0EAAA,CAAA,CAAA;QAGZ,CAAA;;;AAKC,QAAA,IAAA,CACOhB,gBAAgB,CAACE,CAAAA,GAAAA;YACrB,IAAIA,CAAAA,CAAEe,GAAG,KAAK,KAAA,EAAO;gBACjB,MAAMC,iBAAAA,GAAoB,IAAI,CAACN,oBAAoB,EAAA;gBACnD,IAAIM,iBAAAA,CAAkBC,MAAM,KAAK,CAAA,EAAG;gBAEpC,MAAMC,YAAAA,GAAeF,iBAAiB,CAAC,CAAA,CAAE;AACzC,gBAAA,MAAMG,cAAcH,iBAAiB,CAACA,iBAAAA,CAAkBC,MAAM,GAAG,CAAA,CAAE;gBAEnE,IAAIjB,CAAAA,CAAEoB,QAAQ,EAAE;oBACZ,IAAI/C,QAAAA,CAASC,aAAa,KAAK4C,YAAAA,EAAc;AACzCC,wBAAAA,WAAAA,CAAYE,KAAK,EAAA;AACjBrB,wBAAAA,CAAAA,CAAEsB,cAAc,EAAA;AACpB,oBAAA;gBACJ,CAAA,MAAO;oBACH,IAAIjD,QAAAA,CAASC,aAAa,KAAK6C,WAAAA,EAAa;AACxCD,wBAAAA,YAAAA,CAAaG,KAAK,EAAA;AAClBrB,wBAAAA,CAAAA,CAAEsB,cAAc,EAAA;AACpB,oBAAA;AACJ,gBAAA;AACJ,YAAA;QACJ,CAAA;;AAsBC,QAAA,IAAA,CACO9C,YAAAA,GAAe,IAAA;YACnB,IAAI,IAAI,CAACJ,kBAAkB,EAAE;;gBAEzB,MAAMmD,kBAAAA,GAAqB,IAAI,CAACnD,kBAAkB;gBAClD,IAAI,CAACA,kBAAkB,GAAG,IAAA;gBAC1BoD,UAAAA,CAAW,IAAA;AACP,oBAAA,IAAInD,QAAAA,CAASoD,IAAI,CAACC,QAAQ,CAACH,kBAAAA,CAAAA,EAAqB;AAC5CA,wBAAAA,kBAAAA,CAAmBF,KAAK,EAAA;AAC5B,oBAAA;gBACJ,CAAA,EAAG,GAAA,CAAA;AACP,YAAA;QACJ,CAAA;;;AAKC,QAAA,IAAA,CACO5B,eAAe,CAACkC,IAAAA,GAAAA;;AAEnB,YAAA,IAAI,CAACnB,SAAS,CAAmDG,OAAO,GAAGgB,IAAAA;AAE5E,YAAA,IAAIA,IAAAA,EAAM;;gBAEN,IAAI,CAACC,eAAe,CAACD,IAAAA,CAAAA;AACzB,YAAA;QACJ,CAAA;;;AAKC,QAAA,IAAA,CACOC,kBAAkB,CAACC,IAAAA,GAAAA;;YAEvB,MAAMC,UAAAA,GAAaD,KAAKE,iBAAiB;AACzC,YAAA,IAAID,UAAAA,EAAY;;AAEZ,gBAAA,IAAIA,UAAAA,CAAWE,YAAY,CAAC,UAAA,CAAA,KAAgB,IAAA,EAAM;oBAC9CF,UAAAA,CAAWG,YAAY,CAAC,UAAA,EAAY,IAAA,CAAA;AACxC,gBAAA;AACAH,gBAAAA,UAAAA,CAAWT,KAAK,EAAA;AAChB,gBAAA;AACJ,YAAA;;YAGA,MAAML,iBAAAA,GAAoB,IAAI,CAACN,oBAAoB,EAAA;YACnD,IAAIM,iBAAAA,CAAkBC,MAAM,GAAG,CAAA,EAAG;gBAC9BD,iBAAiB,CAAC,CAAA,CAAE,CAACK,KAAK,EAAA;YAC9B,CAAA,MAAO;;AAEHQ,gBAAAA,IAAAA,CAAKR,KAAK,EAAA;AACd,YAAA;QACJ,CAAA;;;AA0DC,QAAA,IAAA,CACDhB,aAAa,CAACsB,IAAAA,GAAAA;AACV,YAAA,IAAI,IAAI,CAACpE,KAAK,CAAC2E,UAAU,IAAI,OAAO,IAAI,CAAC3E,KAAK,CAAC2E,UAAU,KAAK,UAAA,EAAY;AACtE,gBAAA,IAAI,CAAC3E,KAAK,CAAC2E,UAAU,CAACP,IAAAA,CAAAA;AAC1B,YAAA,CAAA,MAAO,IAAI,IAAI,CAACpE,KAAK,CAAC2E,UAAU,IAAI,OAAO,IAAI,CAAC3E,KAAK,CAAC2E,UAAU,KAAK,QAAA,EAAU;AAC1E,gBAAA,IAAI,CAAC3E,KAAK,CAAC2E,UAAU,CAAmDvB,OAAO,GAAGgB,IAAAA;AACvF,YAAA;AACJ,QAAA,CAAA;;AAaJ;AA5OqB7D,MAAAA,CAQVqE,YAAAA,GAAe;IAClBtD,OAAAA,EAAS,IAAA;IACTrB,QAAQ,EAAA,MAAA;IACRmB,UAAAA,EAAY,IAAA;IACZC,mBAAAA,EAAqB;AACzB,CAAA;;;;"}

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

@@ -1 +1 @@
-export { default as Drawer, DrawerHeader, DrawerBody, DrawerFooter, DRAWER_POSITION } from './Drawer';
+export { default as Drawer, DrawerHeader, DrawerBody, DrawerFooter, DRAWER_POSITION, } from './Drawer';

package/lib-esm/components/Groups/Group.d.ts

@@ -1,10 +1,7 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-declare function Group(props: React.PropsWithChildren<PropTypes.InferProps<typeof Group.propTypes>>): import("@emotion/react/jsx-runtime").JSX.Element;
-declare namespace Group {
-    var propTypes: {
-        /** Error Message for the group */
-        errorText: PropTypes.Requireable<string>;
-    };
-}
+type GroupProps = {
+    /** Error Message for the group */
+    errorText?: string;
+};
+declare const Group: React.ForwardRefExoticComponent<GroupProps & React.RefAttributes<HTMLDivElement>>;
 export default Group;

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

@@ -1,85 +1,40 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-import PropTypes from 'prop-types';
+import { jsxs, Fragment, jsx } from '@emotion/react/jsx-runtime';
+import React, { useId } from 'react';
 import styled from '@emotion/styled';
-import constants from '../../shared/constants';
-const Container = styled.div `
-    display: inline-flex;
-    border: 1px solid var(--border-color, ${constants.BORDER_COLOR});
-    border-radius: 3px;
-    margin: 5px;
+import { getThemeValue, THEME_NAME } from '../../shared/constants.js';
 
-    /* overrides */
-    & button, & label {
-        margin: 0;
-        border: none;
-        border-radius: 0;
-        border-left: 1px solid var(--border-color, ${constants.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;
-    }
-
-    /* Handling for first and last child */
-    & > *:first-child, & > label:first-child input,
-    & > label:first-child select, & > *:first-child label,
-    & > *:first-child 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, & *:focus + span {
-        z-index: 1;
-    }
-
-    &:focus-within, &:hover {
-        box-shadow: var(--hover-shadow, ${constants.HOVER_SHADOW});
-    }
-
-    ${props => props.errorText ? `
-        border-color: var(--error, ${constants.ERROR});
+const Container$3 = /*#__PURE__*/ styled("div", {
+    target: "eqhpibl0",
+    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-child,& > label:first-child input,& > label:first-child select,& > *:first-child label,& > *:first-child 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 {
-            border-color: var(--error, ${constants.ERROR});
+            border-color: ${getThemeValue(THEME_NAME.ERROR)};
         }
-    ` : ''}
-`;
-const ErrorContainer = styled.div `
-    color: var(--error, ${constants.ERROR});
-    margin-left: 8px;
-    font-size: 12px;
-`;
-export default function Group(props) {
-    return (_jsxs(_Fragment, { children: [_jsx(Container, Object.assign({}, props, { children: props.children })), props.errorText && _jsx(ErrorContainer, { children: props.errorText })] }));
+    ` : '');
+const ErrorContainer = /*#__PURE__*/ styled("div", {
+    target: "eqhpibl1",
+    label: "ErrorContainer"
+})("color:", getThemeValue(THEME_NAME.ERROR), ";margin-left:8px;font-size:12px;");
+function GroupComponent(props, ref) {
+    const errorId = useId();
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsx(Container$3, {
+                ...props,
+                ref: ref,
+                "aria-describedby": props.errorText ? errorId : undefined,
+                children: props.children
+            }),
+            props.errorText && /*#__PURE__*/ jsx(ErrorContainer, {
+                id: errorId,
+                children: props.errorText
+            })
+        ]
+    });
 }
-Group.propTypes = {
-    /** Error Message for the group */
-    errorText: PropTypes.string,
-};
-//# sourceMappingURL=Group.js.map
+const Group = /*#__PURE__*/ React.forwardRef(GroupComponent);
+
+export { Group as default };
+//# sourceMappingURL=Group.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Group.js","sourceRoot":"","sources":["../../../src/components/Groups/Group.tsx"],"names":[],"mappings":";AACA,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,SAAS,MAAM,wBAAwB,CAAC;AAE/C,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAA8C;;4CAE9B,SAAS,CAAC,YAAY;;;;;;;;;qDASb,SAAS,CAAC,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;0CA8CjC,SAAS,CAAC,YAAY;;;MAG1D,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC;qCACI,SAAS,CAAC,KAAK;;;yCAGX,SAAS,CAAC,KAAK;;KAEnD,CAAA,CAAC,CAAC,EAAE;CACR,CAAC;AAEF,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAAA;0BACP,SAAS,CAAC,KAAK;;;CAGxC,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,KAA4E;IACtG,OAAO,CACH,8BACI,KAAC,SAAS,oBAAK,KAAK,cACf,KAAK,CAAC,QAAQ,IACP,EACV,KAAK,CAAC,SAAS,IAAI,KAAC,cAAc,cAAE,KAAK,CAAC,SAAS,GAAkB,IACxE,CACN,CAAA;AACL,CAAC;AAED,KAAK,CAAC,SAAS,GAAG;IACd,kCAAkC;IAClC,SAAS,EAAE,SAAS,CAAC,MAAM;CAC9B,CAAA"}
+{"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-child,\n    & > label:first-child input,\n    & > label:first-child select,\n    & > *:first-child label,\n    & > *:first-child 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 = {\n    /** Error Message for the group */\n    errorText?: string;\n};\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,qlBAAA,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,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/Groups/GroupLabel.js

@@ -1,19 +1,10 @@
 import styled from '@emotion/styled';
-import constants from '../../shared/constants';
-export default styled.label `
-    height: 32px;
-    background-color: ${constants.DISABLED_BACKGROUND};
-    padding: 0 4px;
-    line-height: 32px;
-    min-width: 24px;
-    text-align: center;
-    color: ${constants.BORDER_COLOR};
+import { getThemeValue, THEME_NAME } from '../../shared/constants.js';
 
-    & > svg {
-        height: 24px;
-        width: 24px;
-        vertical-align: middle;
-        fill: currentColor;
-    }
-`;
-//# sourceMappingURL=GroupLabel.js.map
+var GroupLabel = /*#__PURE__*/ styled("label", {
+    target: "e1kv3eb90",
+    label: ""
+})("height:32px;background-color:", getThemeValue(THEME_NAME.DISABLED_BACKGROUND), ";padding:0 4px;line-height:32px;min-width:24px;text-align:center;color:", getThemeValue(THEME_NAME.BORDER_COLOR), ";& > svg{height:24px;width:24px;vertical-align:middle;fill:currentColor;}");
+
+export { GroupLabel as default };
+//# sourceMappingURL=GroupLabel.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"GroupLabel.js","sourceRoot":"","sources":["../../../src/components/Groups/GroupLabel.tsx"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,SAAS,MAAM,wBAAwB,CAAC;AAE/C,eAAe,MAAM,CAAC,KAAK,CAAA;;wBAEH,SAAS,CAAC,mBAAmB;;;;;aAKxC,SAAS,CAAC,YAAY;;;;;;;;CAQlC,CAAC"}
+{"version":3,"file":"GroupLabel.js","sources":["../../../src/components/Groups/GroupLabel.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport { getThemeValue, THEME_NAME } from '../../shared/constants';\n\nexport default styled.label`\n    height: 32px;\n    background-color: ${getThemeValue(THEME_NAME.DISABLED_BACKGROUND)};\n    padding: 0 4px;\n    line-height: 32px;\n    min-width: 24px;\n    text-align: center;\n    color: ${getThemeValue(THEME_NAME.BORDER_COLOR)};\n\n    & > svg {\n        height: 24px;\n        width: 24px;\n        vertical-align: middle;\n        fill: currentColor;\n    }\n`;\n"],"names":["styled","getThemeValue","THEME_NAME","DISABLED_BACKGROUND","BORDER_COLOR"],"mappings":";;;AAGA,iBAAA,cAAeA,MAAAA,CAAAA,OAAAA,EAAAA;;;AAESC,CAAAA,CAAAA,CAAAA,+BAAAA,EAAAA,aAAAA,CAAcC,WAAWC,mBAAmB,CAAA,EAAA,yEAAA,EAKvDF,aAAAA,CAAcC,UAAAA,CAAWE,YAAY,CAAA,EAAA,2EAAA,CAAA;;;;"}

package/lib-esm/components/Input/Checkbox.d.ts

@@ -1,17 +1,14 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-type CheckboxProps = Omit<React.HTMLProps<HTMLInputElement>, 'as'> & PropTypes.InferProps<typeof Checkbox.propTypes>;
-declare function Checkbox(props: CheckboxProps): import("@emotion/react/jsx-runtime").JSX.Element;
-declare namespace Checkbox {
-    var propTypes: {
-        /** Label for the field */
-        label: PropTypes.Requireable<string>;
-        /** If the field is in indeterminate state */
-        indeterminate: PropTypes.Requireable<boolean>;
-    };
-    var defaultProps: {
-        indeterminate: boolean;
-        label: string;
-    };
-}
+declare const Checkbox: React.ForwardRefExoticComponent<{
+    /**
+     * Label for the field
+     * @default ''
+     */
+    label?: string;
+    /**
+     * If the field is in indeterminate state
+     * @default false
+     */
+    indeterminate?: boolean;
+} & React.InputHTMLAttributes<HTMLInputElement> & React.RefAttributes<HTMLInputElement>>;
 export default Checkbox;