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

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

@@ -6,8 +6,27 @@ export declare const DragContext: import("react").Context<{
     startIndex: number;
     setStartIndex: (value: number) => void;
     drop: (index: number) => void;
+    onDrop: (start: number, end: number) => void;
+    cancel: () => void;
+    startGrab: (index: number) => void;
     isDragging: boolean;
     setIsDragging: (value: boolean) => void;
     setDragOver: (value: number) => void;
+    i18n: {
+        itemAriaLabelTemplate: string;
+        dragHandleAriaLabel: string;
+        grabbedAnnouncementTemplate: string;
+        movedAnnouncementTemplate: string;
+        droppedAnnouncementTemplate: string;
+        cancelledAnnouncementTemplate: string;
+        replacePlaceholders: (template: string, data: {
+            position?: number;
+            grabKey?: string;
+            dropKey?: string;
+            altDropKey?: string;
+            cancelKey?: string;
+            moveKeys?: string;
+        }) => string;
+    };
 }>;
 //# sourceMappingURL=types.d.ts.map

package/lib-esm/components/DragAndDrop/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/DragAndDrop/types.ts"],"names":[],"mappings":"AAEA,oBAAY,WAAW;IACnB,UAAU,eAAe;IACzB,QAAQ,aAAa;CACxB;AAED,eAAO,MAAM,WAAW;gBACR,MAAM;mBACH,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;UAChC,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;gBACjB,OAAO;mBACJ,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI;iBAC1B,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;EAChC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/DragAndDrop/types.ts"],"names":[],"mappings":"AAEA,oBAAY,WAAW;IACnB,UAAU,eAAe;IACzB,QAAQ,aAAa;CACxB;AAED,eAAO,MAAM,WAAW;gBACR,MAAM;mBACH,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;UAChC,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;YACrB,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,KAAK,IAAI;YACpC,MAAM,IAAI;eACP,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;gBACtB,OAAO;mBACJ,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI;iBAC1B,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;UAC9B;QACF,qBAAqB,EAAE,MAAM,CAAC;QAC9B,mBAAmB,EAAE,MAAM,CAAC;QAC5B,2BAA2B,EAAE,MAAM,CAAC;QACpC,yBAAyB,EAAE,MAAM,CAAC;QAClC,2BAA2B,EAAE,MAAM,CAAC;QACpC,6BAA6B,EAAE,MAAM,CAAC;QACtC,mBAAmB,EAAE,CACjB,QAAQ,EAAE,MAAM,EAChB,IAAI,EAAE;YACF,QAAQ,CAAC,EAAE,MAAM,CAAC;YAClB,OAAO,CAAC,EAAE,MAAM,CAAC;YACjB,OAAO,CAAC,EAAE,MAAM,CAAC;YACjB,UAAU,CAAC,EAAE,MAAM,CAAC;YACpB,SAAS,CAAC,EAAE,MAAM,CAAC;YACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;SACrB,KACA,MAAM,CAAC;KACf;EACG,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/DragAndDrop/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAEtC,MAAM,CAAN,IAAY,WAGX;AAHD,WAAY,WAAW;IACnB,wCAAyB,CAAA;IACzB,oCAAqB,CAAA;AACzB,CAAC,EAHW,WAAW,KAAX,WAAW,QAGtB;AAED,MAAM,CAAC,MAAM,WAAW,GAAG,aAAa,CAOrC,IAAI,CAAC,CAAC","sourcesContent":["import { createContext } from 'react';\n\nexport enum ORIENTATION {\n    HORIZONTAL = 'horizontal',\n    VERTICAL = 'vertical',\n}\n\nexport const DragContext = createContext<{\n    startIndex: number;\n    setStartIndex: (value: number) => void;\n    drop: (index: number) => void;\n    isDragging: boolean;\n    setIsDragging: (value: boolean) => void;\n    setDragOver: (value: number) => void;\n}>(null);\n"]}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/DragAndDrop/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAEtC,MAAM,CAAN,IAAY,WAGX;AAHD,WAAY,WAAW;IACnB,wCAAyB,CAAA;IACzB,oCAAqB,CAAA;AACzB,CAAC,EAHW,WAAW,KAAX,WAAW,QAGtB;AAED,MAAM,CAAC,MAAM,WAAW,GAAG,aAAa,CA6BrC,IAAI,CAAC,CAAC","sourcesContent":["import { createContext } from 'react';\n\nexport enum ORIENTATION {\n    HORIZONTAL = 'horizontal',\n    VERTICAL = 'vertical',\n}\n\nexport const DragContext = createContext<{\n    startIndex: number;\n    setStartIndex: (value: number) => void;\n    drop: (index: number) => void;\n    onDrop: (start: number, end: number) => void;\n    cancel: () => void;\n    startGrab: (index: number) => void;\n    isDragging: boolean;\n    setIsDragging: (value: boolean) => void;\n    setDragOver: (value: number) => void;\n    i18n: {\n        itemAriaLabelTemplate: string;\n        dragHandleAriaLabel: string;\n        grabbedAnnouncementTemplate: string;\n        movedAnnouncementTemplate: string;\n        droppedAnnouncementTemplate: string;\n        cancelledAnnouncementTemplate: string;\n        replacePlaceholders: (\n            template: string,\n            data: {\n                position?: number;\n                grabKey?: string;\n                dropKey?: string;\n                altDropKey?: string;\n                cancelKey?: string;\n                moveKeys?: string;\n            },\n        ) => string;\n    };\n}>(null);\n"]}

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

@@ -6,10 +6,38 @@ export declare enum DRAWER_POSITION {
     RIGHT = "RIGHT",
     BOTTOM = "BOTTOM"
 }
-type DrawerProps = PropTypes.InferProps<typeof Drawer.propTypes>;
+declare const drawerPropTypes: {
+    /** Opens the drawer */
+    open: PropTypes.Validator<boolean>;
+    /** position of the drawer */
+    position: PropTypes.Requireable<DRAWER_POSITION>;
+    /** size of the drawer */
+    size: PropTypes.Requireable<string>;
+    /** Shows an overlay behind the drawer. */
+    overlay: PropTypes.Requireable<boolean>;
+    /** Closes the drawer on esc */
+    closeOnEsc: PropTypes.Requireable<boolean>;
+    /** Closes the drawer on overlay click */
+    closeOnOverlayClick: PropTypes.Requireable<boolean>;
+    /** Call back function called when the drawer closes. */
+    onClose: PropTypes.Requireable<(...args: any[]) => any>;
+};
+type DrawerProps = PropTypes.InferProps<typeof drawerPropTypes>;
 interface DrawerState {
     open: boolean;
 }
+/**
+ * Drawer component
+ *
+ * A panel that slides in from the edge of the screen.
+ * It sits on top of the application content and is often used for navigation or details.
+ *
+ * Accessibility:
+ * - Implements ARIA `role="dialog"` and `aria-modal="true"`.
+ * - Traps focus effectively within the drawer while open.
+ * - Restores focus to the triggering element upon closure.
+ * - Supports closing via ESC key and overlay click.
+ */
 export default class Drawer extends React.Component<React.PropsWithChildren<DrawerProps>, DrawerState> {
     state: {
         open: boolean;
@@ -36,13 +64,60 @@ export default class Drawer extends React.Component<React.PropsWithChildren<Draw
         closeOnEsc: boolean;
         closeOnOverlayClick: boolean;
     };
+    /**
+     * Syncs state with props.
+     */
     static getDerivedStateFromProps(props: DrawerProps): {
         open: boolean;
     };
     private layer;
     private closeCallback;
+    /**
+     * Internal close handler.
+     * Restores focus and calls the external onClose callback.
+     */
     private onClose;
+    private lastFocusedElement;
+    private drawerRef;
+    /**
+     * Retrieves all focusable elements within the drawer.
+     */
+    private getFocusableElements;
+    /**
+     * Handles keydown events to implement the focus trap.
+     * Traps Tab and Shift+Tab within the drawer.
+     */
+    private handleKeyDown;
+    /**
+     * Lifecycle method to save the currently focused element when the drawer mounts while open.
+     */
+    componentDidMount(): void;
+    /**
+     * Lifecycle method to restore focus when the drawer unmounts.
+     */
+    componentWillUnmount(): void;
+    /**
+     * Restores focus to the element that was focused before the drawer opened.
+     */
+    private restoreFocus;
+    /**
+     * Callback ref to capture the Drawer DOM element.
+     * Triggers initial focus setting when the element mounts.
+     */
+    private setDrawerRef;
+    /**
+     * Sets initial focus within the drawer.
+     * Tries to focus the header first, then the first interactive element, or falls back to the container.
+     */
+    private setInitialFocus;
+    /**
+     * Lifecycle method to handle Drawer updates.
+     * Manages opening/closing logic via LayerManager and focus preservation.
+     */
     getSnapshotBeforeUpdate(prevProps: DrawerProps): void;
+    /**
+     * Renders the Drawer component via the LayerManager portal.
+     */
     render(): import("@emotion/react/jsx-runtime").JSX.Element;
 }
 //# sourceMappingURL=Drawer.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../src/components/Drawer/Drawer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,SAAS,MAAM,YAAY,CAAC;AAKnC,OAAO,EACH,MAAM,IAAI,YAAY,EACtB,IAAI,IAAI,UAAU,EAClB,MAAM,IAAI,YAAY,GACzB,MAAM,qBAAqB,CAAC;AAE7B,oBAAY,eAAe;IACvB,IAAI,SAAS;IACb,KAAK,UAAU;IACf,MAAM,WAAW;CACpB;AAsCD,KAAK,WAAW,GAAG,SAAS,CAAC,UAAU,CAAC,OAAO,MAAM,CAAC,SAAS,CAAC,CAAC;AACjE,UAAU,WAAW;IACjB,IAAI,EAAE,OAAO,CAAC;CACjB;AAQD,MAAM,CAAC,OAAO,OAAO,MAAO,SAAQ,KAAK,CAAC,SAAS,CAC/C,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,EACpC,WAAW,CACd;IACG,KAAK;;MAEH;IAEF,MAAM,CAAC,SAAS;QACZ,uBAAuB;;QAEvB,6BAA6B;;QAM7B,yBAAyB;;QAEzB,0CAA0C;;QAE1C,+BAA+B;;QAE/B,yCAAyC;;QAEzC,wDAAwD;;MAE1D;IAEF,MAAM,CAAC,YAAY;;;;;MAKjB;IAEF,MAAM,CAAC,wBAAwB,CAAC,KAAK,EAAE,WAAW;;;IASlD,OAAO,CAAC,KAAK,CAA8C;IAE3D,OAAO,CAAC,aAAa,CAA2B;IAEhD,OAAO,CAAC,OAAO,CAOb;IAEF,uBAAuB,CAAC,SAAS,EAAE,WAAW;IAwC9C,MAAM;CAQT"}
+{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../src/components/Drawer/Drawer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,SAAS,MAAM,YAAY,CAAC;AAKnC,OAAO,EACH,MAAM,IAAI,YAAY,EACtB,IAAI,IAAI,UAAU,EAClB,MAAM,IAAI,YAAY,GACzB,MAAM,qBAAqB,CAAC;AAE7B,oBAAY,eAAe;IACvB,IAAI,SAAS;IACb,KAAK,UAAU;IACf,MAAM,WAAW;CACpB;AAsCD,QAAA,MAAM,eAAe;IACjB,uBAAuB;;IAEvB,6BAA6B;;IAM7B,yBAAyB;;IAEzB,0CAA0C;;IAE1C,+BAA+B;;IAE/B,yCAAyC;;IAEzC,wDAAwD;;CAE3D,CAAC;AAEF,KAAK,WAAW,GAAG,SAAS,CAAC,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAEhE,UAAU,WAAW;IACjB,IAAI,EAAE,OAAO,CAAC;CACjB;AAQD;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,OAAO,OAAO,MAAO,SAAQ,KAAK,CAAC,SAAS,CAC/C,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,EACpC,WAAW,CACd;IACG,KAAK;;MAEH;IAEF,MAAM,CAAC,SAAS;QApDhB,uBAAuB;;QAEvB,6BAA6B;;QAM7B,yBAAyB;;QAEzB,0CAA0C;;QAE1C,+BAA+B;;QAE/B,yCAAyC;;QAEzC,wDAAwD;;MAoCrB;IAEnC,MAAM,CAAC,YAAY;;;;;MAKjB;IAEF;;OAEG;IACH,MAAM,CAAC,wBAAwB,CAAC,KAAK,EAAE,WAAW;;;IASlD,OAAO,CAAC,KAAK,CAA8C;IAE3D,OAAO,CAAC,aAAa,CAA2B;IAEhD;;;OAGG;IACH,OAAO,CAAC,OAAO,CAQb;IAEF,OAAO,CAAC,kBAAkB,CAA4B;IACtD,OAAO,CAAC,SAAS,CAAqC;IAEtD;;OAEG;IACH,OAAO,CAAC,oBAAoB,CAO1B;IAEF;;;OAGG;IACH,OAAO,CAAC,aAAa,CAoBnB;IAEF;;OAEG;IACH,iBAAiB;IAMjB;;OAEG;IACH,oBAAoB;IAMpB;;OAEG;IACH,OAAO,CAAC,YAAY,CAWlB;IAEF;;;OAGG;IACH,OAAO,CAAC,YAAY,CAQlB;IAEF;;;OAGG;IACH,OAAO,CAAC,eAAe,CAoBrB;IAEF;;;OAGG;IACH,uBAAuB,CAAC,SAAS,EAAE,WAAW;IAiD9C;;OAEG;IACH,MAAM;CAQT"}

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

@@ -13,7 +13,7 @@ import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import React from 'react';
 import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
-import constants from '../../shared/constants';
+import { getThemeValue, THEME_NAME } from '../../shared/constants';
 import LayerManager, { LAYER_POSITION } from '../../shared/LayerManager';
 export { Header as DrawerHeader, Body as DrawerBody, Footer as DrawerFooter, } from '../../shared/styles';
 export var DRAWER_POSITION;
@@ -46,9 +46,9 @@ const positionStyle = (size) => ({
 const DrawerDiv = styled.div `
     display: flex;
     flex-direction: column;
-    background-color: #fff;
+    background-color: ${getThemeValue(THEME_NAME.BACKGROUND)};
     transition: transform 0.3s ease;
-    box-shadow: var(--modal-shadow, ${constants.MODAL_SHADOW});
+    box-shadow: ${getThemeValue(THEME_NAME.MODAL_SHADOW)};
     ${(props) => positionStyle(props.size)[props.position].before}
 
     .nf-layer-enter & {
@@ -56,19 +56,56 @@ const DrawerDiv = styled.div `
         ${(props) => positionStyle(props.size)[props.position].after}
     }
 `;
+const drawerPropTypes = {
+    /** 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,
+};
 const positionMap = {
     [DRAWER_POSITION.LEFT]: LAYER_POSITION.TOP_LEFT,
     [DRAWER_POSITION.RIGHT]: LAYER_POSITION.TOP_RIGHT,
     [DRAWER_POSITION.BOTTOM]: LAYER_POSITION.BOTTOM_LEFT,
 };
+/**
+ * Drawer component
+ *
+ * A panel that slides in from the edge of the screen.
+ * It sits on top of the application content and is often used for navigation or details.
+ *
+ * Accessibility:
+ * - Implements ARIA `role="dialog"` and `aria-modal="true"`.
+ * - Traps focus effectively within the drawer while open.
+ * - Restores focus to the triggering element upon closure.
+ * - Supports closing via ESC key and overlay click.
+ */
 class Drawer extends React.Component {
     constructor() {
         super(...arguments);
         this.state = {
             open: false,
         };
+        /**
+         * Internal close handler.
+         * Restores focus and calls the external onClose callback.
+         */
         this.onClose = () => {
             var _a, _b;
+            this.restoreFocus();
             this.setState({
                 open: false,
             });
@@ -76,7 +113,97 @@ class Drawer extends React.Component {
             this.closeCallback = null;
             this.layer = null;
         };
+        this.lastFocusedElement = null;
+        this.drawerRef = 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();
+            }
+        };
     }
+    /**
+     * Syncs state with props.
+     */
     static getDerivedStateFromProps(props) {
         if (props.open) {
             return {
@@ -85,13 +212,36 @@ class Drawer extends React.Component {
         }
         return null;
     }
+    /**
+     * 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) {
         var _a;
         const _b = this.props, { open, closeOnEsc, closeOnOverlayClick, overlay, position, children, size } = _b, rest = __rest(_b, ["open", "closeOnEsc", "closeOnOverlayClick", "overlay", "position", "children", "size"]);
         if (prevProps.open && !open) {
             (_a = this.closeCallback) === null || _a === void 0 ? void 0 : _a.call(this);
+            this.restoreFocus();
         }
         if (!prevProps.open && open) {
+            // Save current focus
+            this.lastFocusedElement = document.activeElement;
             this.layer = LayerManager.renderLayer({
                 overlay,
                 exitDelay: 300,
@@ -99,12 +249,15 @@ class Drawer extends React.Component {
                 closeCallback: this.onClose,
                 closeOnEsc,
                 closeOnOverlayClick,
-                component: (_jsx(DrawerDiv, Object.assign({}, rest, { position: position, size: size, onClick: (e) => e.stopPropagation(), children: children }))),
+                component: (_jsx(DrawerDiv, Object.assign({}, 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();
         }
     }
+    /**
+     * Renders the Drawer component via the LayerManager portal.
+     */
     render() {
         if (this.state.open && this.layer) {
             const [Component] = this.layer;
@@ -113,26 +266,7 @@ class Drawer extends React.Component {
         return null;
     }
 }
-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.propTypes = drawerPropTypes;
 Drawer.defaultProps = {
     overlay: true,
     position: DRAWER_POSITION.LEFT,

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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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from '@emotion/styled';\nimport constants 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: #fff;\n    transition: transform 0.3s ease;\n    box-shadow: var(--modal-shadow, ${constants.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 = PropTypes.InferProps<typeof Drawer.propTypes>;\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\nexport default class Drawer extends React.Component<\n    React.PropsWithChildren<DrawerProps>,\n    DrawerState\n> {\n    state = {\n        open: false,\n    };\n\n    static propTypes = {\n        /** Opens the drawer */\n        open: PropTypes.bool.isRequired,\n        /** position of the drawer */\n        position: PropTypes.oneOf([\n            DRAWER_POSITION.LEFT,\n            DRAWER_POSITION.RIGHT,\n            DRAWER_POSITION.BOTTOM,\n        ]),\n        /** size of the drawer */\n        size: PropTypes.string,\n        /** Shows an overlay behind the drawer. */\n        overlay: PropTypes.bool,\n        /** Closes the drawer on esc */\n        closeOnEsc: PropTypes.bool,\n        /** Closes the drawer on overlay click */\n        closeOnOverlayClick: PropTypes.bool,\n        /** Call back function called when the drawer closes. */\n        onClose: PropTypes.func,\n    };\n\n    static defaultProps = {\n        overlay: true,\n        position: DRAWER_POSITION.LEFT,\n        closeOnEsc: true,\n        closeOnOverlayClick: true,\n    };\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    private onClose = () => {\n        this.setState({\n            open: false,\n        });\n        this.props.onClose?.();\n        this.closeCallback = null;\n        this.layer = null;\n    };\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        }\n\n        if (!prevProps.open && open) {\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                        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    render() {\n        if (this.state.open && this.layer) {\n            const [Component] = this.layer;\n            return <Component />;\n        }\n\n        return null;\n    }\n}\n"]}
+{"version":3,"file":"Drawer.js","sourceRoot":"","sources":["../../../src/components/Drawer/Drawer.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\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\nconst drawerPropTypes = {\n    /** Opens the drawer */\n    open: PropTypes.bool.isRequired,\n    /** position of the drawer */\n    position: PropTypes.oneOf([\n        DRAWER_POSITION.LEFT,\n        DRAWER_POSITION.RIGHT,\n        DRAWER_POSITION.BOTTOM,\n    ]),\n    /** size of the drawer */\n    size: PropTypes.string,\n    /** Shows an overlay behind the drawer. */\n    overlay: PropTypes.bool,\n    /** Closes the drawer on esc */\n    closeOnEsc: PropTypes.bool,\n    /** Closes the drawer on overlay click */\n    closeOnOverlayClick: PropTypes.bool,\n    /** Call back function called when the drawer closes. */\n    onClose: PropTypes.func,\n};\n\ntype DrawerProps = PropTypes.InferProps<typeof drawerPropTypes>;\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 propTypes = drawerPropTypes;\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 = null;\n        this.layer = null;\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     * 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 />;\n        }\n\n        return null;\n    }\n}\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"Group.d.ts","sourceRoot":"","sources":["../../../src/components/Groups/Group.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,SAAS,MAAM,YAAY,CAAC;AA4FnC,iBAAwB,KAAK,CACzB,KAAK,EAAE,KAAK,CAAC,iBAAiB,CAAC,SAAS,CAAC,UAAU,CAAC,OAAO,KAAK,CAAC,SAAS,CAAC,CAAC,oDAQ/E;kBATuB,KAAK;;QAYzB,kCAAkC;;;;eAZd,KAAK"}
+{"version":3,"file":"Group.d.ts","sourceRoot":"","sources":["../../../src/components/Groups/Group.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgB,MAAM,OAAO,CAAC;AACrC,OAAO,SAAS,MAAM,YAAY,CAAC;AA4FnC,iBAAwB,KAAK,CACzB,KAAK,EAAE,KAAK,CAAC,iBAAiB,CAAC,SAAS,CAAC,UAAU,CAAC,OAAO,KAAK,CAAC,SAAS,CAAC,CAAC,oDAY/E;kBAbuB,KAAK;;QAgBzB,kCAAkC;;;;eAhBd,KAAK"}

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

@@ -1,10 +1,11 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { useId } from 'react';
 import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
-import constants from '../../shared/constants';
+import { getThemeValue, THEME_NAME } from '../../shared/constants';
 const Container = styled.div `
     display: inline-flex;
-    border: 1px solid var(--border-color, ${constants.BORDER_COLOR});
+    border: 1px solid ${getThemeValue(THEME_NAME.BORDER_COLOR)};
     border-radius: 3px;
     margin: 5px;
 
@@ -14,7 +15,7 @@ const Container = styled.div `
         margin: 0;
         border: none;
         border-radius: 0;
-        border-left: 1px solid var(--border-color, ${constants.BORDER_COLOR});
+        border-left: 1px solid ${getThemeValue(THEME_NAME.BORDER_COLOR)};
         box-shadow: none;
         height: 32px;
     }
@@ -69,26 +70,27 @@ const Container = styled.div `
 
     &:focus-within,
     &:hover {
-        box-shadow: var(--hover-shadow, ${constants.HOVER_SHADOW});
+        box-shadow: ${getThemeValue(THEME_NAME.HOVER_SHADOW)};
     }
 
     ${(props) => props.errorText
     ? `
-        border-color: var(--error, ${constants.ERROR});
+        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});
+    color: ${getThemeValue(THEME_NAME.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 errorId = useId();
+    return (_jsxs(_Fragment, { children: [_jsx(Container, Object.assign({}, props, { "aria-describedby": props.errorText ? errorId : undefined, children: props.children })), props.errorText && _jsx(ErrorContainer, { id: errorId, children: props.errorText })] }));
 }
 Group.propTypes = {
     /** Error Message for the group */

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;;;;;;;;;;qDAUb,SAAS,CAAC,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;0CAuDjC,SAAS,CAAC,YAAY;;;MAG1D,CAAC,KAAK,EAAE,EAAE,CACR,KAAK,CAAC,SAAS;IACX,CAAC,CAAC;qCACuB,SAAS,CAAC,KAAK;;;yCAGX,SAAS,CAAC,KAAK;;KAEnD;IACO,CAAC,CAAC,EAAE;CACf,CAAC;AAEF,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAAA;0BACP,SAAS,CAAC,KAAK;;;CAGxC,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,KAAK,CACzB,KAA4E;IAE5E,OAAO,CACH,8BACI,KAAC,SAAS,oBAAK,KAAK,cAAG,KAAK,CAAC,QAAQ,IAAa,EACjD,KAAK,CAAC,SAAS,IAAI,KAAC,cAAc,cAAE,KAAK,CAAC,SAAS,GAAkB,IACvE,CACN,CAAC;AACN,CAAC;AAED,KAAK,CAAC,SAAS,GAAG;IACd,kCAAkC;IAClC,SAAS,EAAE,SAAS,CAAC,MAAM;CAC9B,CAAC","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from '@emotion/styled';\nimport constants from '../../shared/constants';\n\nconst Container = styled.div<PropTypes.InferProps<typeof Group.propTypes>>`\n    display: inline-flex;\n    border: 1px solid var(--border-color, ${constants.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 var(--border-color, ${constants.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: var(--hover-shadow, ${constants.HOVER_SHADOW});\n    }\n\n    ${(props) =>\n        props.errorText\n            ? `\n        border-color: var(--error, ${constants.ERROR});\n\n        & > button, & > label {\n            border-color: var(--error, ${constants.ERROR});\n        }\n    `\n            : ''}\n`;\n\nconst ErrorContainer = styled.div`\n    color: var(--error, ${constants.ERROR});\n    margin-left: 8px;\n    font-size: 12px;\n`;\n\nexport default function Group(\n    props: React.PropsWithChildren<PropTypes.InferProps<typeof Group.propTypes>>,\n) {\n    return (\n        <>\n            <Container {...props}>{props.children}</Container>\n            {props.errorText && <ErrorContainer>{props.errorText}</ErrorContainer>}\n        </>\n    );\n}\n\nGroup.propTypes = {\n    /** Error Message for the group */\n    errorText: PropTypes.string,\n};\n"]}
+{"version":3,"file":"Group.js","sourceRoot":"","sources":["../../../src/components/Groups/Group.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,KAAK,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAEnE,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAA8C;;wBAElD,aAAa,CAAC,UAAU,CAAC,YAAY,CAAC;;;;;;;;;;iCAU7B,aAAa,CAAC,UAAU,CAAC,YAAY,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sBAuDjD,aAAa,CAAC,UAAU,CAAC,YAAY,CAAC;;;MAGtD,CAAC,KAAK,EAAE,EAAE,CACR,KAAK,CAAC,SAAS;IACX,CAAC,CAAC;wBACU,aAAa,CAAC,UAAU,CAAC,KAAK,CAAC;;;4BAG3B,aAAa,CAAC,UAAU,CAAC,KAAK,CAAC;;KAEtD;IACO,CAAC,CAAC,EAAE;CACf,CAAC;AAEF,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAAA;aACpB,aAAa,CAAC,UAAU,CAAC,KAAK,CAAC;;;CAG3C,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,KAAK,CACzB,KAA4E;IAE5E,MAAM,OAAO,GAAG,KAAK,EAAE,CAAC;IAExB,OAAO,CACH,8BACI,KAAC,SAAS,oBAAK,KAAK,wBAAoB,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,YACxE,KAAK,CAAC,QAAQ,IACP,EACX,KAAK,CAAC,SAAS,IAAI,KAAC,cAAc,IAAC,EAAE,EAAE,OAAO,YAAG,KAAK,CAAC,SAAS,GAAkB,IACpF,CACN,CAAC;AACN,CAAC;AAED,KAAK,CAAC,SAAS,GAAG;IACd,kCAAkC;IAClC,SAAS,EAAE,SAAS,CAAC,MAAM;CAC9B,CAAC","sourcesContent":["import React, { useId } from 'react';\nimport PropTypes from 'prop-types';\nimport styled from '@emotion/styled';\nimport { getThemeValue, THEME_NAME } from '../../shared/constants';\n\nconst Container = styled.div<PropTypes.InferProps<typeof Group.propTypes>>`\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\nexport default function Group(\n    props: React.PropsWithChildren<PropTypes.InferProps<typeof Group.propTypes>>,\n) {\n    const errorId = useId();\n\n    return (\n        <>\n            <Container {...props} aria-describedby={props.errorText ? errorId : undefined}>\n                {props.children}\n            </Container>\n            {props.errorText && <ErrorContainer id={errorId}>{props.errorText}</ErrorContainer>}\n        </>\n    );\n}\n\nGroup.propTypes = {\n    /** Error Message for the group */\n    errorText: PropTypes.string,\n};\n"]}

package/lib-esm/components/Groups/GroupLabel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GroupLabel.d.ts","sourceRoot":"","sources":["../../../src/components/Groups/GroupLabel.tsx"],"names":[],"mappings":";;SAmB6K,MAAO,WAAW;;AAhB/L,wBAeE"}
+{"version":3,"file":"GroupLabel.d.ts","sourceRoot":"","sources":["../../../src/components/Groups/GroupLabel.tsx"],"names":[],"mappings":";;SAmByH,MAAO,WAAW;;AAhB3I,wBAeE"}

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

@@ -1,13 +1,13 @@
 import styled from '@emotion/styled';
-import constants from '../../shared/constants';
+import { getThemeValue, THEME_NAME } from '../../shared/constants';
 export default styled.label `
     height: 32px;
-    background-color: ${constants.DISABLED_BACKGROUND};
+    background-color: ${getThemeValue(THEME_NAME.DISABLED_BACKGROUND)};
     padding: 0 4px;
     line-height: 32px;
     min-width: 24px;
     text-align: center;
-    color: ${constants.BORDER_COLOR};
+    color: ${getThemeValue(THEME_NAME.BORDER_COLOR)};
 
     & > svg {
         height: 24px;

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","sourcesContent":["import styled from '@emotion/styled';\nimport constants from '../../shared/constants';\n\nexport default styled.label`\n    height: 32px;\n    background-color: ${constants.DISABLED_BACKGROUND};\n    padding: 0 4px;\n    line-height: 32px;\n    min-width: 24px;\n    text-align: center;\n    color: ${constants.BORDER_COLOR};\n\n    & > svg {\n        height: 24px;\n        width: 24px;\n        vertical-align: middle;\n        fill: currentColor;\n    }\n`;\n"]}
+{"version":3,"file":"GroupLabel.js","sourceRoot":"","sources":["../../../src/components/Groups/GroupLabel.tsx"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAEnE,eAAe,MAAM,CAAC,KAAK,CAAA;;wBAEH,aAAa,CAAC,UAAU,CAAC,mBAAmB,CAAC;;;;;aAKxD,aAAa,CAAC,UAAU,CAAC,YAAY,CAAC;;;;;;;;CAQlD,CAAC","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"]}

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

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/Input/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAC3C,OAAO,SAAS,MAAM,YAAY,CAAC;AAwGnC,KAAK,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,EAAE,IAAI,CAAC,GAC9D,SAAS,CAAC,UAAU,CAAC,OAAO,QAAQ,CAAC,SAAS,CAAC,CAAC;AAEpD,iBAAwB,QAAQ,CAAC,KAAK,EAAE,aAAa,oDAkBpD;kBAlBuB,QAAQ;;QAqB5B,0BAA0B;;QAE1B,6CAA6C;;;;;;;;eAvBzB,QAAQ"}
+{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/Input/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAC3C,OAAO,SAAS,MAAM,YAAY,CAAC;AA8GnC,KAAK,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,EAAE,IAAI,CAAC,GAC9D,SAAS,CAAC,UAAU,CAAC,OAAO,QAAQ,CAAC,SAAS,CAAC,CAAC;AAEpD,iBAAwB,QAAQ,CAAC,KAAK,EAAE,aAAa,oDAwBpD;kBAxBuB,QAAQ;;QA2B5B,0BAA0B;;QAE1B,6CAA6C;;;;;;;;eA7BzB,QAAQ"}