no-frills-ui 0.0.14-alpha.4 → 0.0.14-alpha.6

package/lib-esm/components/Input/Toggle.js

@@ -1,83 +1,35 @@
-import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { jsxs, jsx } from '@emotion/react/jsx-runtime';
+import 'react';
 import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
-import constants from '../../shared/constants';
-const Switch = styled.label `
-    position: relative;
-    display: inline-flex;
-    margin: 5px 0;
-`;
-const Input = styled.input `
-    appearance: none;
-    margin: 0;
-
-    & + span {
-        position: relative;
-        cursor: pointer;
-        width: 30px;
-        height: 18px;
-        background-color: ${constants.LIGHT_GREY};
-        transition: 0.4s;
-        border-radius: 10px;
-        padding: 0 3px;
-        margin: 0 10px 0 5px;
-    }
-    & + span:before {
-        position: absolute;
-        content: '';
-        height: 14px;
-        width: 14px;
-        left: 1px;
-        top: 1px;
-        border: 1px solid var(--disabled-border, ${constants.DISABLED_BORDER});
-        border-radius: 50%;
-        background-color: var(--background, ${constants.BACKGROUND});
-        transition: 0.4s;
-    }
-
-    /* checked */
-    &:checked + span {
-        background-color: var(--primary, ${constants.PRIMARY_LIGHT});
-    }
-
-    &:checked + span:before {
-        transform: translateX(18px);
-        border-color: var(--primary, ${constants.PRIMARY});
-    }
-
-    /* focus */
-    &:enabled:focus + span:before {
-        box-shadow: 0 0 0 3px var(--primary, ${constants.PRIMARY_LIGHT});
-        border-color: var(--primary, ${constants.PRIMARY});
-    }
-
-    /* hover */
-    &:enabled:hover ~ span {
-        cursor: pointer;
-        color: var(--primary, ${constants.PRIMARY});
-    }
-
-    /* disabled */
-    &:disabled ~ span {
-        color: var(--disabled-border, ${constants.DISABLED_BORDER});
-    }
-
-    &:disabled + span {
-        background-color: ${constants.LIGHT_GREY};
-        cursor: not-allowed;
-    }
-
-    &:disabled + span:before {
-        background-color: var(--border-light-color, ${constants.BORDER_LIGHT_COLOR});
-        border-color: var(--disabled-border, ${constants.DISABLED_BORDER});
-    }
-`;
+import { getThemeValue, THEME_NAME } from '../../shared/constants.js';
+
+const Switch = /*#__PURE__*/ styled("label", {
+    target: "ecfiyvb0",
+    label: "Switch"
+})("position:relative;display:inline-flex;margin:5px 0;", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvbm8tZnJpbGxzLXVpL25vLWZyaWxscy11aS9zcmMvY29tcG9uZW50cy9JbnB1dC9Ub2dnbGUudHN4Iiwic291cmNlcyI6WyIvaG9tZS9ydW5uZXIvd29yay9uby1mcmlsbHMtdWkvbm8tZnJpbGxzLXVpL3NyYy9jb21wb25lbnRzL0lucHV0L1RvZ2dsZS50c3giXSwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0IGZyb20gJ3JlYWN0JztcbmltcG9ydCBQcm9wVHlwZXMgZnJvbSAncHJvcC10eXBlcyc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBnZXRUaGVtZVZhbHVlLCBUSEVNRV9OQU1FIH0gZnJvbSAnLi4vLi4vc2hhcmVkL2NvbnN0YW50cyc7XG5cbmNvbnN0IFN3aXRjaCA9IHN0eWxlZC5sYWJlbGBcbiAgICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gICAgZGlzcGxheTogaW5saW5lLWZsZXg7XG4gICAgbWFyZ2luOiA1cHggMDtcbmA7XG5cbmNvbnN0IElucHV0ID0gc3R5bGVkLmlucHV0YFxuICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICB3aWR0aDogMDtcbiAgICBoZWlnaHQ6IDA7XG4gICAgYXBwZWFyYW5jZTogbm9uZTtcbiAgICBtYXJnaW46IDA7XG5cbiAgICAmICsgc3BhbiB7XG4gICAgICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgICAgICAgY3Vyc29yOiBwb2ludGVyO1xuICAgICAgICB3aWR0aDogMzBweDtcbiAgICAgICAgaGVpZ2h0OiAxOHB4O1xuICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke2dldFRoZW1lVmFsdWUoVEhFTUVfTkFNRS5MSUdIVF9HUkVZKX07XG4gICAgICAgIHRyYW5zaXRpb246IDAuNHM7XG4gICAgICAgIGJvcmRlci1yYWRpdXM6IDEwcHg7XG4gICAgICAgIHBhZGRpbmc6IDAgM3B4O1xuICAgICAgICBtYXJnaW46IDAgMTBweCAwIDVweDtcbiAgICB9XG4gICAgJiArIHNwYW46YmVmb3JlIHtcbiAgICAgICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgICAgICBjb250ZW50OiAnJztcbiAgICAgICAgaGVpZ2h0OiAxNHB4O1xuICAgICAgICB3aWR0aDogMTRweDtcbiAgICAgICAgbGVmdDogMXB4O1xuICAgICAgICB0b3A6IDFweDtcbiAgICAgICAgYm9yZGVyOiAxcHggc29saWQgJHtnZXRUaGVtZVZhbHVlKFRIRU1FX05BTUUuRElTQUJMRURfQk9SREVSKX07XG4gICAgICAgIGJvcmRlci1yYWRpdXM6IDUwJTtcbiAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogJHtnZXRUaGVtZVZhbHVlKFRIRU1FX05BTUUuQkFDS0dST1VORCl9O1xuICAgICAgICB0cmFuc2l0aW9uOiAwLjRzO1xuICAgIH1cblxuICAgIC8qIGNoZWNrZWQgKi9cbiAgICAmOmNoZWNrZWQgKyBzcGFuIHtcbiAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogJHtnZXRUaGVtZVZhbHVlKFRIRU1FX05BTUUuUFJJTUFSWV9MSUdIVCl9O1xuICAgIH1cblxuICAgICY6Y2hlY2tlZCArIHNwYW46YmVmb3JlIHtcbiAgICAgICAgdHJhbnNmb3JtOiB0cmFuc2xhdGVYKDE4cHgpO1xuICAgICAgICBib3JkZXItY29sb3I6ICR7Z2V0VGhlbWVWYWx1ZShUSEVNRV9OQU1FLlBSSU1BUlkpfTtcbiAgICB9XG5cbiAgICAvKiBmb2N1cyAqL1xuICAgICY6ZW5hYmxlZDpmb2N1cyArIHNwYW46YmVmb3JlIHtcbiAgICAgICAgYm94LXNoYWRvdzogMCAwIDAgM3B4ICR7Z2V0VGhlbWVWYWx1ZShUSEVNRV9OQU1FLlBSSU1BUllfTElHSFQpfTtcbiAgICAgICAgYm9yZGVyLWNvbG9yOiAke2dldFRoZW1lVmFsdWUoVEhFTUVfTkFNRS5QUklNQVJZKX07XG4gICAgfVxuXG4gICAgLyogaG92ZXIgKi9cbiAgICAmOmVuYWJsZWQ6aG92ZXIgfiBzcGFuIHtcbiAgICAgICAgY3Vyc29yOiBwb2ludGVyO1xuICAgICAgICBjb2xvcjogJHtnZXRUaGVtZVZhbHVlKFRIRU1FX05BTUUuUFJJTUFSWSl9O1xuICAgIH1cblxuICAgIC8qIGRpc2FibGVkICovXG4gICAgJjpkaXNhYmxlZCB+IHNwYW4ge1xuICAgICAgICBjb2xvcjogJHtnZXRUaGVtZVZhbHVlKFRIRU1FX05BTUUuRElTQUJMRURfQk9SREVSKX07XG4gICAgfVxuXG4gICAgJjpkaXNhYmxlZCArIHNwYW4ge1xuICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke2dldFRoZW1lVmFsdWUoVEhFTUVfTkFNRS5MSUdIVF9HUkVZKX07XG4gICAgICAgIGN1cnNvcjogbm90LWFsbG93ZWQ7XG4gICAgfVxuXG4gICAgJjpkaXNhYmxlZCArIHNwYW46YmVmb3JlIHtcbiAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogJHtnZXRUaGVtZVZhbHVlKFRIRU1FX05BTUUuQk9SREVSX0xJR0hUX0NPTE9SKX07XG4gICAgICAgIGJvcmRlci1jb2xvcjogJHtnZXRUaGVtZVZhbHVlKFRIRU1FX05BTUUuRElTQUJMRURfQk9SREVSKX07XG4gICAgfVxuYDtcblxudHlwZSBUb2dnbGVQcm9wcyA9IFByb3BUeXBlcy5JbmZlclByb3BzPFxuICAgIFJlYWN0LkFsbEhUTUxBdHRyaWJ1dGVzPEhUTUxJbnB1dEVsZW1lbnQ+ICYgdHlwZW9mIFRvZ2dsZS5wcm9wVHlwZXNcbj47XG5cbmZ1bmN0aW9uIFRvZ2dsZShwcm9wczogVG9nZ2xlUHJvcHMpIHtcbiAgICByZXR1cm4gKFxuICAgICAgICA8U3dpdGNoPlxuICAgICAgICAgICAgPElucHV0IHsuLi5wcm9wc30gdHlwZT1cImNoZWNrYm94XCIgcm9sZT1cInN3aXRjaFwiIGFyaWEtY2hlY2tlZD17cHJvcHMuY2hlY2tlZH0gLz5cbiAgICAgICAgICAgIDxzcGFuPjwvc3Bhbj5cbiAgICAgICAgICAgIDxzcGFuPntwcm9wcy5sYWJlbH08L3NwYW4+XG4gICAgICAgIDwvU3dpdGNoPlxuICAgICk7XG59XG5cblRvZ2dsZS5wcm9wVHlwZXMgPSB7XG4gICAgLyoqIExhYmVsIGZvciB0aGUgZmllbGQgKi9cbiAgICBsYWJlbDogUHJvcFR5cGVzLnN0cmluZyxcbn07XG5cbmV4cG9ydCBkZWZhdWx0IFRvZ2dsZTtcbiJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFLZSJ9 */");
+const Input = /*#__PURE__*/ styled("input", {
+    target: "ecfiyvb1",
+    label: "Input"
+})("position:absolute;width:0;height:0;appearance:none;margin:0;& + span{position:relative;cursor:pointer;width:30px;height:18px;background-color:", getThemeValue(THEME_NAME.LIGHT_GREY), ";transition:0.4s;border-radius:10px;padding:0 3px;margin:0 10px 0 5px;}& + span:before{position:absolute;content:'';height:14px;width:14px;left:1px;top:1px;border:1px solid ", getThemeValue(THEME_NAME.DISABLED_BORDER), ";border-radius:50%;background-color:", getThemeValue(THEME_NAME.BACKGROUND), ";transition:0.4s;}&:checked + span{background-color:", getThemeValue(THEME_NAME.PRIMARY_LIGHT), ";}&:checked + span:before{transform:translateX(18px);border-color:", getThemeValue(THEME_NAME.PRIMARY), ";}&:enabled:focus + span:before{box-shadow:0 0 0 3px ", getThemeValue(THEME_NAME.PRIMARY_LIGHT), ";border-color:", getThemeValue(THEME_NAME.PRIMARY), ";}&:enabled:hover ~ span{cursor:pointer;color:", getThemeValue(THEME_NAME.PRIMARY), ";}&:disabled ~ span{color:", getThemeValue(THEME_NAME.DISABLED_BORDER), ";}&:disabled + span{background-color:", getThemeValue(THEME_NAME.LIGHT_GREY), ";cursor:not-allowed;}&:disabled + span:before{background-color:", getThemeValue(THEME_NAME.BORDER_LIGHT_COLOR), ";border-color:", getThemeValue(THEME_NAME.DISABLED_BORDER), ";}", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvbm8tZnJpbGxzLXVpL25vLWZyaWxscy11aS9zcmMvY29tcG9uZW50cy9JbnB1dC9Ub2dnbGUudHN4Iiwic291cmNlcyI6WyIvaG9tZS9ydW5uZXIvd29yay9uby1mcmlsbHMtdWkvbm8tZnJpbGxzLXVpL3NyYy9jb21wb25lbnRzL0lucHV0L1RvZ2dsZS50c3giXSwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0IGZyb20gJ3JlYWN0JztcbmltcG9ydCBQcm9wVHlwZXMgZnJvbSAncHJvcC10eXBlcyc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBnZXRUaGVtZVZhbHVlLCBUSEVNRV9OQU1FIH0gZnJvbSAnLi4vLi4vc2hhcmVkL2NvbnN0YW50cyc7XG5cbmNvbnN0IFN3aXRjaCA9IHN0eWxlZC5sYWJlbGBcbiAgICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gICAgZGlzcGxheTogaW5saW5lLWZsZXg7XG4gICAgbWFyZ2luOiA1cHggMDtcbmA7XG5cbmNvbnN0IElucHV0ID0gc3R5bGVkLmlucHV0YFxuICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICB3aWR0aDogMDtcbiAgICBoZWlnaHQ6IDA7XG4gICAgYXBwZWFyYW5jZTogbm9uZTtcbiAgICBtYXJnaW46IDA7XG5cbiAgICAmICsgc3BhbiB7XG4gICAgICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgICAgICAgY3Vyc29yOiBwb2ludGVyO1xuICAgICAgICB3aWR0aDogMzBweDtcbiAgICAgICAgaGVpZ2h0OiAxOHB4O1xuICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke2dldFRoZW1lVmFsdWUoVEhFTUVfTkFNRS5MSUdIVF9HUkVZKX07XG4gICAgICAgIHRyYW5zaXRpb246IDAuNHM7XG4gICAgICAgIGJvcmRlci1yYWRpdXM6IDEwcHg7XG4gICAgICAgIHBhZGRpbmc6IDAgM3B4O1xuICAgICAgICBtYXJnaW46IDAgMTBweCAwIDVweDtcbiAgICB9XG4gICAgJiArIHNwYW46YmVmb3JlIHtcbiAgICAgICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgICAgICBjb250ZW50OiAnJztcbiAgICAgICAgaGVpZ2h0OiAxNHB4O1xuICAgICAgICB3aWR0aDogMTRweDtcbiAgICAgICAgbGVmdDogMXB4O1xuICAgICAgICB0b3A6IDFweDtcbiAgICAgICAgYm9yZGVyOiAxcHggc29saWQgJHtnZXRUaGVtZVZhbHVlKFRIRU1FX05BTUUuRElTQUJMRURfQk9SREVSKX07XG4gICAgICAgIGJvcmRlci1yYWRpdXM6IDUwJTtcbiAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogJHtnZXRUaGVtZVZhbHVlKFRIRU1FX05BTUUuQkFDS0dST1VORCl9O1xuICAgICAgICB0cmFuc2l0aW9uOiAwLjRzO1xuICAgIH1cblxuICAgIC8qIGNoZWNrZWQgKi9cbiAgICAmOmNoZWNrZWQgKyBzcGFuIHtcbiAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogJHtnZXRUaGVtZVZhbHVlKFRIRU1FX05BTUUuUFJJTUFSWV9MSUdIVCl9O1xuICAgIH1cblxuICAgICY6Y2hlY2tlZCArIHNwYW46YmVmb3JlIHtcbiAgICAgICAgdHJhbnNmb3JtOiB0cmFuc2xhdGVYKDE4cHgpO1xuICAgICAgICBib3JkZXItY29sb3I6ICR7Z2V0VGhlbWVWYWx1ZShUSEVNRV9OQU1FLlBSSU1BUlkpfTtcbiAgICB9XG5cbiAgICAvKiBmb2N1cyAqL1xuICAgICY6ZW5hYmxlZDpmb2N1cyArIHNwYW46YmVmb3JlIHtcbiAgICAgICAgYm94LXNoYWRvdzogMCAwIDAgM3B4ICR7Z2V0VGhlbWVWYWx1ZShUSEVNRV9OQU1FLlBSSU1BUllfTElHSFQpfTtcbiAgICAgICAgYm9yZGVyLWNvbG9yOiAke2dldFRoZW1lVmFsdWUoVEhFTUVfTkFNRS5QUklNQVJZKX07XG4gICAgfVxuXG4gICAgLyogaG92ZXIgKi9cbiAgICAmOmVuYWJsZWQ6aG92ZXIgfiBzcGFuIHtcbiAgICAgICAgY3Vyc29yOiBwb2ludGVyO1xuICAgICAgICBjb2xvcjogJHtnZXRUaGVtZVZhbHVlKFRIRU1FX05BTUUuUFJJTUFSWSl9O1xuICAgIH1cblxuICAgIC8qIGRpc2FibGVkICovXG4gICAgJjpkaXNhYmxlZCB+IHNwYW4ge1xuICAgICAgICBjb2xvcjogJHtnZXRUaGVtZVZhbHVlKFRIRU1FX05BTUUuRElTQUJMRURfQk9SREVSKX07XG4gICAgfVxuXG4gICAgJjpkaXNhYmxlZCArIHNwYW4ge1xuICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke2dldFRoZW1lVmFsdWUoVEhFTUVfTkFNRS5MSUdIVF9HUkVZKX07XG4gICAgICAgIGN1cnNvcjogbm90LWFsbG93ZWQ7XG4gICAgfVxuXG4gICAgJjpkaXNhYmxlZCArIHNwYW46YmVmb3JlIHtcbiAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogJHtnZXRUaGVtZVZhbHVlKFRIRU1FX05BTUUuQk9SREVSX0xJR0hUX0NPTE9SKX07XG4gICAgICAgIGJvcmRlci1jb2xvcjogJHtnZXRUaGVtZVZhbHVlKFRIRU1FX05BTUUuRElTQUJMRURfQk9SREVSKX07XG4gICAgfVxuYDtcblxudHlwZSBUb2dnbGVQcm9wcyA9IFByb3BUeXBlcy5JbmZlclByb3BzPFxuICAgIFJlYWN0LkFsbEhUTUxBdHRyaWJ1dGVzPEhUTUxJbnB1dEVsZW1lbnQ+ICYgdHlwZW9mIFRvZ2dsZS5wcm9wVHlwZXNcbj47XG5cbmZ1bmN0aW9uIFRvZ2dsZShwcm9wczogVG9nZ2xlUHJvcHMpIHtcbiAgICByZXR1cm4gKFxuICAgICAgICA8U3dpdGNoPlxuICAgICAgICAgICAgPElucHV0IHsuLi5wcm9wc30gdHlwZT1cImNoZWNrYm94XCIgcm9sZT1cInN3aXRjaFwiIGFyaWEtY2hlY2tlZD17cHJvcHMuY2hlY2tlZH0gLz5cbiAgICAgICAgICAgIDxzcGFuPjwvc3Bhbj5cbiAgICAgICAgICAgIDxzcGFuPntwcm9wcy5sYWJlbH08L3NwYW4+XG4gICAgICAgIDwvU3dpdGNoPlxuICAgICk7XG59XG5cblRvZ2dsZS5wcm9wVHlwZXMgPSB7XG4gICAgLyoqIExhYmVsIGZvciB0aGUgZmllbGQgKi9cbiAgICBsYWJlbDogUHJvcFR5cGVzLnN0cmluZyxcbn07XG5cbmV4cG9ydCBkZWZhdWx0IFRvZ2dsZTtcbiJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFXYyJ9 */");
 function Toggle(props) {
-    return (_jsxs(Switch, { children: [_jsx(Input, Object.assign({}, props, { type: "checkbox" })), _jsx("span", {}), _jsx("span", { children: props.label })] }));
+    return /*#__PURE__*/ jsxs(Switch, {
+        children: [
+            /*#__PURE__*/ jsx(Input, {
+                ...props,
+                type: "checkbox",
+                role: "switch",
+                "aria-checked": props.checked
+            }),
+            /*#__PURE__*/ jsx("span", {}),
+            /*#__PURE__*/ jsx("span", {
+                children: props.label
+            })
+        ]
+    });
 }
 Toggle.propTypes = {
-    /** Label for the field */
-    label: PropTypes.string,
+    /** Label for the field */ label: PropTypes.string
 };
-export default Toggle;
-//# sourceMappingURL=Toggle.js.map
+
+export { Toggle as default };

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

@@ -6,4 +6,3 @@ export { default as Toggle } from './Toggle';
 export { default as Radio } from './Radio';
 export { default as RadioButton, RadioGroup } from './RadioButton';
 export { default as Dropdown } from './Dropdown';
-//# sourceMappingURL=index.d.ts.map

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

@@ -1,4 +1,8 @@
 import React, { ReactNode } from 'react';
+/**
+ * Props for the Menu component.
+ * @template T - The type of value(s) in the menu.
+ */
 interface MenuProps<T> {
     /** Multiple Menu Items can be selected */
     multiSelect?: boolean;
@@ -9,6 +13,13 @@ interface MenuProps<T> {
     /** Menu Items */
     children?: ReactNode;
 }
-declare const Menu: React.ForwardRefExoticComponent<MenuProps<object> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Menu component that allows selection of items from a list.
+ * Supports single and multi-select modes and keyboard navigation.
+ *
+ * @template T - The type of value(s) in the menu.
+ * @param {MenuProps<T> & Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>} props - The menu properties.
+ * @param {ForwardedRef<HTMLDivElement>} ref - The ref forwarded to the menu container.
+ */
+declare const Menu: React.ForwardRefExoticComponent<MenuProps<object> & Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> & React.RefAttributes<HTMLDivElement>>;
 export default Menu;
-//# sourceMappingURL=Menu.d.ts.map

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

@@ -1,46 +1,126 @@
-import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from '@emotion/react/jsx-runtime';
 import React, { useState } from 'react';
 import styled from '@emotion/styled';
-import MenuContext from './MenuContext';
-const MenuContainer = styled.div `
-    flex: 1;
-    display: flex;
-    flex-direction: column;
+import { getThemeValue, THEME_NAME } from '../../shared/constants.js';
+import MenuContext from './MenuContext.js';
 
-    & div:last-child {
-        border-bottom: none;
-    }
-`;
-const Menu = React.forwardRef(function (props, ref) {
-    const { multiSelect, onChange } = props;
-    const [value, setValue] = useState(props.value || (multiSelect ? [] : ''));
-    const updateValue = (val) => {
+const MenuContainer = /*#__PURE__*/ styled("div", {
+    target: "ez48lhb0",
+    label: "MenuContainer"
+})("flex:1;display:flex;flex-direction:column;& div:last-child{border-bottom:none;}&:focus-within{box-shadow:0 0 0 4px ", getThemeValue(THEME_NAME.PRIMARY_LIGHT), ";}", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvbm8tZnJpbGxzLXVpL25vLWZyaWxscy11aS9zcmMvY29tcG9uZW50cy9NZW51L01lbnUudHN4Iiwic291cmNlcyI6WyIvaG9tZS9ydW5uZXIvd29yay9uby1mcmlsbHMtdWkvbm8tZnJpbGxzLXVpL3NyYy9jb21wb25lbnRzL01lbnUvTWVudS50c3giXSwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0LCB7IHVzZVN0YXRlLCBSZWFjdE5vZGUsIEZvcndhcmRlZFJlZiB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IGdldFRoZW1lVmFsdWUsIFRIRU1FX05BTUUgfSBmcm9tICcuLi8uLi9zaGFyZWQvY29uc3RhbnRzJztcbmltcG9ydCBNZW51Q29udGV4dCBmcm9tICcuL01lbnVDb250ZXh0Jztcbi8qKlxuICogUHJvcHMgZm9yIHRoZSBNZW51IGNvbXBvbmVudC5cbiAqIEB0ZW1wbGF0ZSBUIC0gVGhlIHR5cGUgb2YgdmFsdWUocykgaW4gdGhlIG1lbnUuXG4gKi9cbmludGVyZmFjZSBNZW51UHJvcHM8VD4ge1xuICAgIC8qKiBNdWx0aXBsZSBNZW51IEl0ZW1zIGNhbiBiZSBzZWxlY3RlZCAqL1xuICAgIG11bHRpU2VsZWN0PzogYm9vbGVhbjtcbiAgICAvKiogVmFsdWUocykgc2VsZWN0ZWQgKi9cbiAgICB2YWx1ZT86IFQgfCBUW107XG4gICAgLyoqIENhbGxiYWNrIHdoZW4gdGhlIHNlbGVjdGVkIHZhbHVlIGNoYW5nZXMgKi9cbiAgICBvbkNoYW5nZT86ICh2YWx1ZTogVCB8IFRbXSkgPT4gdm9pZDtcbiAgICAvKiogTWVudSBJdGVtcyAqL1xuICAgIGNoaWxkcmVuPzogUmVhY3ROb2RlO1xufVxuXG5jb25zdCBNZW51Q29udGFpbmVyID0gc3R5bGVkLmRpdmBcbiAgICBmbGV4OiAxO1xuICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcblxuICAgICYgZGl2Omxhc3QtY2hpbGQge1xuICAgICAgICBib3JkZXItYm90dG9tOiBub25lO1xuICAgIH1cblxuICAgICY6Zm9jdXMtd2l0aGluIHtcbiAgICAgICAgYm94LXNoYWRvdzogMCAwIDAgNHB4ICR7Z2V0VGhlbWVWYWx1ZShUSEVNRV9OQU1FLlBSSU1BUllfTElHSFQpfTtcbiAgICB9XG5gO1xuXG4vKipcbiAqIE1lbnUgY29tcG9uZW50IHRoYXQgYWxsb3dzIHNlbGVjdGlvbiBvZiBpdGVtcyBmcm9tIGEgbGlzdC5cbiAqIFN1cHBvcnRzIHNpbmdsZSBhbmQgbXVsdGktc2VsZWN0IG1vZGVzIGFuZCBrZXlib2FyZCBuYXZpZ2F0aW9uLlxuICpcbiAqIEB0ZW1wbGF0ZSBUIC0gVGhlIHR5cGUgb2YgdmFsdWUocykgaW4gdGhlIG1lbnUuXG4gKiBAcGFyYW0ge01lbnVQcm9wczxUPiAmIE9taXQ8UmVhY3QuSFRNTEF0dHJpYnV0ZXM8SFRNTERpdkVsZW1lbnQ+LCAnb25DaGFuZ2UnPn0gcHJvcHMgLSBUaGUgbWVudSBwcm9wZXJ0aWVzLlxuICogQHBhcmFtIHtGb3J3YXJkZWRSZWY8SFRNTERpdkVsZW1lbnQ+fSByZWYgLSBUaGUgcmVmIGZvcndhcmRlZCB0byB0aGUgbWVudSBjb250YWluZXIuXG4gKi9cbmNvbnN0IE1lbnUgPSBSZWFjdC5mb3J3YXJkUmVmKGZ1bmN0aW9uIDxUIGV4dGVuZHMgb2JqZWN0PihcbiAgICBwcm9wczogTWVudVByb3BzPFQ+ICYgT21pdDxSZWFjdC5IVE1MQXR0cmlidXRlczxIVE1MRGl2RWxlbWVudD4sICdvbkNoYW5nZSc+LFxuICAgIHJlZjogRm9yd2FyZGVkUmVmPEhUTUxEaXZFbGVtZW50Pixcbikge1xuICAgIGNvbnN0IHsgbXVsdGlTZWxlY3QsIG9uQ2hhbmdlLCB2YWx1ZTogcHJvcFZhbHVlLCAuLi5yZXN0IH0gPSBwcm9wcztcbiAgICBjb25zdCBbdmFsdWUsIHNldFZhbHVlXSA9IHVzZVN0YXRlKHByb3BWYWx1ZSB8fCAobXVsdGlTZWxlY3QgPyBbXSA6ICcnKSk7XG5cbiAgICAvKipcbiAgICAgKiBVcGRhdGVzIHRoZSBzZWxlY3RlZCB2YWx1ZShzKS5cbiAgICAgKiBIYW5kbGVzIGJvdGggc2luZ2xlIGFuZCBtdWx0aS1zZWxlY3QgbG9naWMuXG4gICAgICpcbiAgICAgKiBAcGFyYW0ge1R9IHZhbCAtIFRoZSB2YWx1ZSB0byBzZWxlY3Qgb3IgZGVzZWxlY3QuXG4gICAgICovXG4gICAgY29uc3QgdXBkYXRlVmFsdWUgPSAodmFsOiBUKSA9PiB7XG4gICAgICAgIGxldCBuZXdWYWw7XG4gICAgICAgIGlmIChtdWx0aVNlbGVjdCkge1xuICAgICAgICAgICAgaWYgKEFycmF5LmlzQXJyYXkodmFsdWUpKSB7XG4gICAgICAgICAgICAgICAgaWYgKHZhbHVlLmluY2x1ZGVzKHZhbCkpIHtcbiAgICAgICAgICAgICAgICAgICAgbmV3VmFsID0gdmFsdWUuZmlsdGVyKChpdGVtKSA9PiBpdGVtICE9PSB2YWwpO1xuICAgICAgICAgICAgICAgIH0gZWxzZSB7XG4gICAgICAgICAgICAgICAgICAgIG5ld1ZhbCA9IFsuLi52YWx1ZSwgdmFsXTtcbiAgICAgICAgICAgICAgICB9XG4gICAgICAgICAgICB9XG4gICAgICAgIH0gZWxzZSB7XG4gICAgICAgICAgICBuZXdWYWwgPSB2YWw7XG4gICAgICAgIH1cbiAgICAgICAgc2V0VmFsdWUobmV3VmFsKTtcbiAgICAgICAgb25DaGFuZ2U/LihuZXdWYWwpO1xuICAgIH07XG5cbiAgICAvKipcbiAgICAgKiBIYW5kbGVzIGtleWJvYXJkIG5hdmlnYXRpb24gd2l0aGluIHRoZSBtZW51LlxuICAgICAqIFN1cHBvcnRzIEFycm93IGtleXMgZm9yIG5hdmlnYXRpb24sIGFuZCBFbnRlci9TcGFjZSBmb3Igc2VsZWN0aW9uLlxuICAgICAqXG4gICAgICogQHBhcmFtIHtSZWFjdC5LZXlib2FyZEV2ZW50fSBlIC0gVGhlIGtleWJvYXJkIGV2ZW50LlxuICAgICAqL1xuICAgIGNvbnN0IGhhbmRsZUtleURvd24gPSAoZTogUmVhY3QuS2V5Ym9hcmRFdmVudCkgPT4ge1xuICAgICAgICBjb25zdCB0YXJnZXQgPSBlLnRhcmdldCBhcyBIVE1MRWxlbWVudDtcbiAgICAgICAgY29uc3QgY29udGFpbmVyID0gZS5jdXJyZW50VGFyZ2V0IGFzIEhUTUxFbGVtZW50O1xuICAgICAgICBjb25zdCBpdGVtcyA9IEFycmF5LmZyb20oY29udGFpbmVyLnF1ZXJ5U2VsZWN0b3JBbGwoJ1tyb2xlPVwib3B0aW9uXCJdJykpIGFzIEhUTUxFbGVtZW50W107XG4gICAgICAgIGNvbnN0IGN1cnJlbnRJbmRleCA9IGl0ZW1zLmluZGV4T2YodGFyZ2V0IGFzIEhUTUxFbGVtZW50KTtcblxuICAgICAgICBsZXQgbmV4dEluZGV4O1xuXG4gICAgICAgIHN3aXRjaCAoZS5rZXkpIHtcbiAgICAgICAgICAgIGNhc2UgJ0Fycm93RG93bic6XG4gICAgICAgICAgICAgICAgZS5wcmV2ZW50RGVmYXVsdCgpO1xuICAgICAgICAgICAgICAgIG5leHRJbmRleCA9IGN1cnJlbnRJbmRleCArIDE7XG4gICAgICAgICAgICAgICAgaWYgKG5leHRJbmRleCA+PSBpdGVtcy5sZW5ndGgpIG5leHRJbmRleCA9IDA7XG4gICAgICAgICAgICAgICAgaXRlbXNbbmV4dEluZGV4XT8uZm9jdXMoKTtcbiAgICAgICAgICAgICAgICBicmVhaztcbiAgICAgICAgICAgIGNhc2UgJ0Fycm93VXAnOlxuICAgICAgICAgICAgICAgIGUucHJldmVudERlZmF1bHQoKTtcbiAgICAgICAgICAgICAgICBuZXh0SW5kZXggPSBjdXJyZW50SW5kZXggLSAxO1xuICAgICAgICAgICAgICAgIGlmIChuZXh0SW5kZXggPCAwKSBuZXh0SW5kZXggPSBpdGVtcy5sZW5ndGggLSAxO1xuICAgICAgICAgICAgICAgIGl0ZW1zW25leHRJbmRleF0/LmZvY3VzKCk7XG4gICAgICAgICAgICAgICAgYnJlYWs7XG4gICAgICAgICAgICBjYXNlICdIb21lJzpcbiAgICAgICAgICAgICAgICBlLnByZXZlbnREZWZhdWx0KCk7XG4gICAgICAgICAgICAgICAgaXRlbXNbMF0/LmZvY3VzKCk7XG4gICAgICAgICAgICAgICAgYnJlYWs7XG4gICAgICAgICAgICBjYXNlICdFbmQnOlxuICAgICAgICAgICAgICAgIGUucHJldmVudERlZmF1bHQoKTtcbiAgICAgICAgICAgICAgICBpdGVtc1tpdGVtcy5sZW5ndGggLSAxXT8uZm9jdXMoKTtcbiAgICAgICAgICAgICAgICBicmVhaztcbiAgICAgICAgICAgIGNhc2UgJ0VudGVyJzpcbiAgICAgICAgICAgIGNhc2UgJyAnOiAvLyBTcGFjZVxuICAgICAgICAgICAgICAgIGUucHJldmVudERlZmF1bHQoKTtcbiAgICAgICAgICAgICAgICB0YXJnZXQuY2xpY2soKTtcbiAgICAgICAgICAgICAgICBicmVhaztcbiAgICAgICAgICAgIGRlZmF1bHQ6XG4gICAgICAgICAgICAgICAgYnJlYWs7XG4gICAgICAgIH1cbiAgICB9O1xuXG4gICAgLyoqXG4gICAgICogSGFuZGxlcyBmb2N1cyBldmVudHMgb24gdGhlIG1lbnUgY29udGFpbmVyLlxuICAgICAqIERlbGVnYXRlcyBmb2N1cyB0byB0aGUgZmlyc3QgaXRlbSBpZiB0aGUgY29udGFpbmVyIGl0c2VsZiByZWNlaXZlcyBmb2N1cy5cbiAgICAgKlxuICAgICAqIEBwYXJhbSB7UmVhY3QuRm9jdXNFdmVudH0gZSAtIFRoZSBmb2N1cyBldmVudC5cbiAgICAgKi9cbiAgICBjb25zdCBmb2N1c0hhbmRsZXIgPSAoZTogUmVhY3QuRm9jdXNFdmVudCkgPT4ge1xuICAgICAgICAvLyBQcmV2ZW50IHRyYXA6IElmIGZvY3VzIGNhbWUgZnJvbSBpbnNpZGUgKFNoaWZ0K1RhYiksIGRvIE5PVCBhdXRvLWZvY3VzIGFnYWluLlxuICAgICAgICAvLyBUaGlzIGFsbG93cyBmb2N1cyB0byBsYW5kIG9uIHRoZSBjb250YWluZXIsIGFuZCB0aGUgbmV4dCBTaGlmdCtUYWIgd2lsbCBleGl0LlxuICAgICAgICBpZiAoZS5jdXJyZW50VGFyZ2V0LmNvbnRhaW5zKGUucmVsYXRlZFRhcmdldCBhcyBOb2RlKSkge1xuICAgICAgICAgICAgcmV0dXJuO1xuICAgICAgICB9XG5cbiAgICAgICAgLy8gT25seSBpZiBmb2N1cyBpcyBhY3R1YWxseSBvbiB0aGUgY29udGFpbmVyIChlLmcuIHRhYmJpbmcgaW50byBpdClcbiAgICAgICAgLy8gYW5kIG5vdCBidWJibGluZyB1cCBmcm9tIGEgY2hpbGRcbiAgICAgICAgaWYgKGUudGFyZ2V0ID09PSBlLmN1cnJlbnRUYXJnZXQpIHtcbiAgICAgICAgICAgIC8vIFByZXZlbnQgdGhlIGNvbnRhaW5lciBmcm9tIGhvbGRpbmcgZm9jdXM7IGRlbGVnYXRlIHRvIGZpcnN0IGl0ZW1cbiAgICAgICAgICAgIGNvbnN0IGZpcnN0SXRlbSA9IGUuY3VycmVudFRhcmdldC5xdWVyeVNlbGVjdG9yKCdbcm9sZT1cIm9wdGlvblwiXScpIGFzIEhUTUxFbGVtZW50O1xuICAgICAgICAgICAgZmlyc3RJdGVtPy5mb2N1cygpO1xuICAgICAgICB9XG4gICAgfTtcblxuICAgIHJldHVybiAoXG4gICAgICAgIDxNZW51Q29udGV4dC5Qcm92aWRlclxuICAgICAgICAgICAgdmFsdWU9e1xuICAgICAgICAgICAgICAgIHtcbiAgICAgICAgICAgICAgICAgICAgdmFsdWUsXG4gICAgICAgICAgICAgICAgICAgIG11bHRpU2VsZWN0LFxuICAgICAgICAgICAgICAgICAgICB1cGRhdGVWYWx1ZSxcbiAgICAgICAgICAgICAgICB9IGFzIHVua25vd24gYXMgUmVhY3QuQ29udGV4dFR5cGU8dHlwZW9mIE1lbnVDb250ZXh0PlxuICAgICAgICAgICAgfVxuICAgICAgICA+XG4gICAgICAgICAgICA8TWVudUNvbnRhaW5lclxuICAgICAgICAgICAgICAgIHsuLi5yZXN0fVxuICAgICAgICAgICAgICAgIHJlZj17cmVmfVxuICAgICAgICAgICAgICAgIHJvbGU9XCJsaXN0Ym94XCJcbiAgICAgICAgICAgICAgICBhcmlhLW11bHRpc2VsZWN0YWJsZT17bXVsdGlTZWxlY3R9XG4gICAgICAgICAgICAgICAgdGFiSW5kZXg9ezB9XG4gICAgICAgICAgICAgICAgb25LZXlEb3duPXtoYW5kbGVLZXlEb3dufVxuICAgICAgICAgICAgICAgIG9uRm9jdXM9e2ZvY3VzSGFuZGxlcn1cbiAgICAgICAgICAgID5cbiAgICAgICAgICAgICAgICB7cHJvcHMuY2hpbGRyZW59XG4gICAgICAgICAgICA8L01lbnVDb250YWluZXI+XG4gICAgICAgIDwvTWVudUNvbnRleHQuUHJvdmlkZXI+XG4gICAgKTtcbn0pO1xuXG5NZW51LmRpc3BsYXlOYW1lID0gJ01lbnUnO1xuXG5NZW51LmRlZmF1bHRQcm9wcyA9IHtcbiAgICBtdWx0aVNlbGVjdDogZmFsc2UsXG59O1xuXG5leHBvcnQgZGVmYXVsdCBNZW51O1xuIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQW1Cc0IifQ== */");
+/**
+ * Menu component that allows selection of items from a list.
+ * Supports single and multi-select modes and keyboard navigation.
+ *
+ * @template T - The type of value(s) in the menu.
+ * @param {MenuProps<T> & Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>} props - The menu properties.
+ * @param {ForwardedRef<HTMLDivElement>} ref - The ref forwarded to the menu container.
+ */ const Menu = /*#__PURE__*/ React.forwardRef(function(props, ref) {
+    const { multiSelect, onChange, value: propValue, ...rest } = props;
+    const [value, setValue] = useState(propValue || (multiSelect ? [] : ''));
+    /**
+     * Updates the selected value(s).
+     * Handles both single and multi-select logic.
+     *
+     * @param {T} val - The value to select or deselect.
+     */ const updateValue = (val)=>{
         let newVal;
         if (multiSelect) {
             if (Array.isArray(value)) {
                 if (value.includes(val)) {
-                    newVal = value.filter((item) => item !== val);
-                }
-                else {
-                    newVal = [...value, val];
+                    newVal = value.filter((item)=>item !== val);
+                } else {
+                    newVal = [
+                        ...value,
+                        val
+                    ];
                 }
             }
-        }
-        else {
+        } else {
             newVal = val;
         }
         setValue(newVal);
-        onChange === null || onChange === void 0 ? void 0 : onChange(newVal);
+        onChange?.(newVal);
+    };
+    /**
+     * Handles keyboard navigation within the menu.
+     * Supports Arrow keys for navigation, and Enter/Space for selection.
+     *
+     * @param {React.KeyboardEvent} e - The keyboard event.
+     */ const handleKeyDown = (e)=>{
+        const target = e.target;
+        const container = e.currentTarget;
+        const items = Array.from(container.querySelectorAll('[role="option"]'));
+        const currentIndex = items.indexOf(target);
+        let nextIndex;
+        switch(e.key){
+            case 'ArrowDown':
+                e.preventDefault();
+                nextIndex = currentIndex + 1;
+                if (nextIndex >= items.length) nextIndex = 0;
+                items[nextIndex]?.focus();
+                break;
+            case 'ArrowUp':
+                e.preventDefault();
+                nextIndex = currentIndex - 1;
+                if (nextIndex < 0) nextIndex = items.length - 1;
+                items[nextIndex]?.focus();
+                break;
+            case 'Home':
+                e.preventDefault();
+                items[0]?.focus();
+                break;
+            case 'End':
+                e.preventDefault();
+                items[items.length - 1]?.focus();
+                break;
+            case 'Enter':
+            case ' ':
+                e.preventDefault();
+                target.click();
+                break;
+        }
     };
-    return (_jsx(MenuContext.Provider, { value: {
+    /**
+     * Handles focus events on the menu container.
+     * Delegates focus to the first item if the container itself receives focus.
+     *
+     * @param {React.FocusEvent} e - The focus event.
+     */ const focusHandler = (e)=>{
+        // Prevent trap: If focus came from inside (Shift+Tab), do NOT auto-focus again.
+        // This allows focus to land on the container, and the next Shift+Tab will exit.
+        if (e.currentTarget.contains(e.relatedTarget)) {
+            return;
+        }
+        // Only if focus is actually on the container (e.g. tabbing into it)
+        // and not bubbling up from a child
+        if (e.target === e.currentTarget) {
+            // Prevent the container from holding focus; delegate to first item
+            const firstItem = e.currentTarget.querySelector('[role="option"]');
+            firstItem?.focus();
+        }
+    };
+    return /*#__PURE__*/ jsx(MenuContext.Provider, {
+        value: {
             value,
             multiSelect,
-            updateValue,
-        }, children: _jsx(MenuContainer, { ref: ref, children: props.children }) }));
+            updateValue
+        },
+        children: /*#__PURE__*/ jsx(MenuContainer, {
+            ...rest,
+            ref: ref,
+            role: "listbox",
+            "aria-multiselectable": multiSelect,
+            tabIndex: 0,
+            onKeyDown: handleKeyDown,
+            onFocus: focusHandler,
+            children: props.children
+        })
+    });
 });
 Menu.displayName = 'Menu';
 Menu.defaultProps = {
-    multiSelect: false,
+    multiSelect: false
 };
-export default Menu;
-//# sourceMappingURL=Menu.js.map
+
+export { Menu as default };

package/lib-esm/components/Menu/MenuContext.d.ts

@@ -11,4 +11,3 @@ type MultiSelect<T> = {
 export type MenuContextType<T> = SingleSelect<T> | MultiSelect<T>;
 declare const _default: import("react").Context<MenuContextType<object>>;
 export default _default;
-//# sourceMappingURL=MenuContext.d.ts.map

package/lib-esm/components/Menu/MenuContext.js

@@ -1,3 +1,5 @@
 import { createContext } from 'react';
-export default createContext(undefined);
-//# sourceMappingURL=MenuContext.js.map
+
+var MenuContext = createContext(undefined);
+
+export { MenuContext as default };

package/lib-esm/components/Menu/MenuItem.d.ts

@@ -1,8 +1,10 @@
 import React from 'react';
 interface MenuItemProps<T> {
     /** Value of the element */
-    value: T & T[];
+    value: T;
 }
-export default function MenuItem<T>(props: MenuItemProps<T> & React.PropsWithChildren<unknown>): import("@emotion/react/jsx-runtime").JSX.Element;
-export {};
-//# sourceMappingURL=MenuItem.d.ts.map
+declare const MenuItemInner: <T>(props: MenuItemProps<T> & React.PropsWithChildren, ref: React.Ref<HTMLButtonElement>) => import("@emotion/react/jsx-runtime").JSX.Element;
+declare const MenuItem: <T>(props: MenuItemProps<T> & React.PropsWithChildren & {
+    ref?: React.Ref<HTMLButtonElement>;
+}) => ReturnType<typeof MenuItemInner>;
+export default MenuItem;

package/lib-esm/components/Menu/MenuItem.js

@@ -1,57 +1,42 @@
-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, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-import { useContext } from 'react';
+import { jsxs, jsx } from '@emotion/react/jsx-runtime';
+import React, { useContext } from 'react';
 import styled from '@emotion/styled';
-import constants from '../../shared/constants';
-import Checkbox from '../Input/Checkbox';
-import MenuContext from './MenuContext';
-const Container = styled.button `
-    font-weight: ${(props) => (props.selected ? 'bold' : 'normal')};
-    padding: 8px 6px;
-    border: none;
-    background-color: transparent;
-    font-size: 16px;
-    border-bottom: 1px solid var(--border-light-color, ${constants.BORDER_LIGHT_COLOR});
-    min-height: 41px;
-    display: flex;
-    align-items: center;
-    cursor: pointer;
-    position: relative;
-
-    &:hover,
-    &:focus,
-    &:focus-within {
-        background-color: var(--border-light-color, ${constants.BORDER_LIGHT_COLOR});
-    }
+import { getThemeValue, THEME_NAME } from '../../shared/constants.js';
+import Checkbox from '../Input/Checkbox.js';
+import MenuContext from './MenuContext.js';
 
-    & > label {
-        margin: 0 4px 0 0;
-    }
-`;
-export default function MenuItem(props) {
-    var _a, _b;
+const Container = /*#__PURE__*/ styled("button", {
+    target: "ea4jlaf0",
+    label: "Container"
+})("font-weight:", (props)=>props.selected ? 'bold' : 'normal', ";padding:8px;border:none;border-left:4px solid\n        ", (props)=>props.selected && !props.multiselect ? getThemeValue(THEME_NAME.TEXT_COLOR_DARK) : 'transparent', ";background-color:transparent;font-size:16px;border-bottom:1px solid ", getThemeValue(THEME_NAME.BORDER_LIGHT_COLOR), ";min-height:41px;display:flex;align-items:center;cursor:pointer;position:relative;color:", getThemeValue(THEME_NAME.TEXT_COLOR_DARK), ";&:hover,&:focus,&:focus-within{background-color:", getThemeValue(THEME_NAME.BORDER_LIGHT_COLOR), ";}& > label{margin:0 4px 0 0;}", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvbm8tZnJpbGxzLXVpL25vLWZyaWxscy11aS9zcmMvY29tcG9uZW50cy9NZW51L01lbnVJdGVtLnRzeCIsInNvdXJjZXMiOlsiL2hvbWUvcnVubmVyL3dvcmsvbm8tZnJpbGxzLXVpL25vLWZyaWxscy11aS9zcmMvY29tcG9uZW50cy9NZW51L01lbnVJdGVtLnRzeCJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUmVhY3QsIHsgU3ludGhldGljRXZlbnQsIHVzZUNvbnRleHQgfSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBnZXRUaGVtZVZhbHVlLCBUSEVNRV9OQU1FIH0gZnJvbSAnLi4vLi4vc2hhcmVkL2NvbnN0YW50cyc7XG5pbXBvcnQgQ2hlY2tib3ggZnJvbSAnLi4vSW5wdXQvQ2hlY2tib3gnO1xuaW1wb3J0IE1lbnVDb250ZXh0LCB7IE1lbnVDb250ZXh0VHlwZSB9IGZyb20gJy4vTWVudUNvbnRleHQnO1xuXG5pbnRlcmZhY2UgTWVudUl0ZW1Qcm9wczxUPiB7XG4gICAgLyoqIFZhbHVlIG9mIHRoZSBlbGVtZW50ICovXG4gICAgdmFsdWU6IFQ7XG59XG5cbmNvbnN0IENvbnRhaW5lciA9IHN0eWxlZC5idXR0b248eyBzZWxlY3RlZDogYm9vbGVhbjsgbXVsdGlzZWxlY3Q/OiBib29sZWFuIH0+YFxuICAgIGZvbnQtd2VpZ2h0OiAkeyhwcm9wcykgPT4gKHByb3BzLnNlbGVjdGVkID8gJ2JvbGQnIDogJ25vcm1hbCcpfTtcbiAgICBwYWRkaW5nOiA4cHg7XG4gICAgYm9yZGVyOiBub25lO1xuICAgIGJvcmRlci1sZWZ0OiA0cHggc29saWRcbiAgICAgICAgJHsocHJvcHMpID0+XG4gICAgICAgICAgICBwcm9wcy5zZWxlY3RlZCAmJiAhcHJvcHMubXVsdGlzZWxlY3RcbiAgICAgICAgICAgICAgICA/IGdldFRoZW1lVmFsdWUoVEhFTUVfTkFNRS5URVhUX0NPTE9SX0RBUkspXG4gICAgICAgICAgICAgICAgOiAndHJhbnNwYXJlbnQnfTtcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiB0cmFuc3BhcmVudDtcbiAgICBmb250LXNpemU6IDE2cHg7XG4gICAgYm9yZGVyLWJvdHRvbTogMXB4IHNvbGlkICR7Z2V0VGhlbWVWYWx1ZShUSEVNRV9OQU1FLkJPUkRFUl9MSUdIVF9DT0xPUil9O1xuICAgIG1pbi1oZWlnaHQ6IDQxcHg7XG4gICAgZGlzcGxheTogZmxleDtcbiAgICBhbGlnbi1pdGVtczogY2VudGVyO1xuICAgIGN1cnNvcjogcG9pbnRlcjtcbiAgICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gICAgY29sb3I6ICR7Z2V0VGhlbWVWYWx1ZShUSEVNRV9OQU1FLlRFWFRfQ09MT1JfREFSSyl9O1xuXG4gICAgJjpob3ZlcixcbiAgICAmOmZvY3VzLFxuICAgICY6Zm9jdXMtd2l0aGluIHtcbiAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogJHtnZXRUaGVtZVZhbHVlKFRIRU1FX05BTUUuQk9SREVSX0xJR0hUX0NPTE9SKX07XG4gICAgfVxuXG4gICAgJiA+IGxhYmVsIHtcbiAgICAgICAgbWFyZ2luOiAwIDRweCAwIDA7XG4gICAgfVxuYDtcblxuY29uc3QgTWVudUl0ZW1Jbm5lciA9IDxULD4oXG4gICAgcHJvcHM6IE1lbnVJdGVtUHJvcHM8VD4gJiBSZWFjdC5Qcm9wc1dpdGhDaGlsZHJlbixcbiAgICByZWY6IFJlYWN0LlJlZjxIVE1MQnV0dG9uRWxlbWVudD4sXG4pID0+IHtcbiAgICBjb25zdCBjb250ZXh0ID0gdXNlQ29udGV4dChNZW51Q29udGV4dCkgYXMgTWVudUNvbnRleHRUeXBlPFQ+O1xuICAgIGNvbnN0IHsgdmFsdWUsIGNoaWxkcmVuLCAuLi5yZXN0IH0gPSBwcm9wcztcbiAgICBjb25zdCBjbGlja0hhbmRsZXIgPSAoZTogU3ludGhldGljRXZlbnQpID0+IHtcbiAgICAgICAgZS5zdG9wUHJvcGFnYXRpb24oKTtcbiAgICAgICAgY29udGV4dC51cGRhdGVWYWx1ZSh2YWx1ZSBhcyBUICYgVFtdKTtcbiAgICB9O1xuXG4gICAgY29uc3Qgc2VsZWN0ZWQgPSBjb250ZXh0Lm11bHRpU2VsZWN0XG4gICAgICAgID8gY29udGV4dC52YWx1ZT8uaW5jbHVkZXM/Lih2YWx1ZSlcbiAgICAgICAgOiBjb250ZXh0LnZhbHVlID09PSB2YWx1ZTtcblxuICAgIHJldHVybiAoXG4gICAgICAgIDxDb250YWluZXJcbiAgICAgICAgICAgIHsuLi5yZXN0fVxuICAgICAgICAgICAgcmVmPXtyZWZ9XG4gICAgICAgICAgICB0eXBlPVwiYnV0dG9uXCJcbiAgICAgICAgICAgIHJvbGU9XCJvcHRpb25cIlxuICAgICAgICAgICAgYXJpYS1zZWxlY3RlZD17c2VsZWN0ZWR9XG4gICAgICAgICAgICBzZWxlY3RlZD17c2VsZWN0ZWR9XG4gICAgICAgICAgICBvbkNsaWNrPXtjbGlja0hhbmRsZXJ9XG4gICAgICAgICAgICBtdWx0aXNlbGVjdD17Y29udGV4dC5tdWx0aVNlbGVjdCA/IHRydWUgOiB1bmRlZmluZWR9XG4gICAgICAgID5cbiAgICAgICAgICAgIHtjb250ZXh0Lm11bHRpU2VsZWN0ICYmIChcbiAgICAgICAgICAgICAgICA8Q2hlY2tib3hcbiAgICAgICAgICAgICAgICAgICAgY2hlY2tlZD17c2VsZWN0ZWR9XG4gICAgICAgICAgICAgICAgICAgIHJlYWRPbmx5XG4gICAgICAgICAgICAgICAgICAgIHRhYkluZGV4PXstMX1cbiAgICAgICAgICAgICAgICAgICAgb25DbGljaz17KGUpID0+IGUuc3RvcFByb3BhZ2F0aW9uKCl9XG4gICAgICAgICAgICAgICAgLz5cbiAgICAgICAgICAgICl9XG4gICAgICAgICAgICB7Y2hpbGRyZW59XG4gICAgICAgIDwvQ29udGFpbmVyPlxuICAgICk7XG59O1xuXG5jb25zdCBNZW51SXRlbSA9IFJlYWN0LmZvcndhcmRSZWYoTWVudUl0ZW1Jbm5lcikgYXMgPFQ+KFxuICAgIHByb3BzOiBNZW51SXRlbVByb3BzPFQ+ICYgUmVhY3QuUHJvcHNXaXRoQ2hpbGRyZW4gJiB7IHJlZj86IFJlYWN0LlJlZjxIVE1MQnV0dG9uRWxlbWVudD4gfSxcbikgPT4gUmV0dXJuVHlwZTx0eXBlb2YgTWVudUl0ZW1Jbm5lcj47XG5cbmV4cG9ydCBkZWZhdWx0IE1lbnVJdGVtO1xuIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVdrQiJ9 */");
+const MenuItemInner = (props, ref)=>{
     const context = useContext(MenuContext);
-    const { value, children } = props, rest = __rest(props, ["value", "children"]);
-    const clickHandler = (e) => {
+    const { value, children, ...rest } = props;
+    const clickHandler = (e)=>{
         e.stopPropagation();
-        if (context.multiSelect) {
-            e.nativeEvent.stopImmediatePropagation();
-        }
         context.updateValue(value);
     };
-    const selected = context.multiSelect
-        ? (_b = (_a = context.value) === null || _a === void 0 ? void 0 : _a.includes) === null || _b === void 0 ? void 0 : _b.call(_a, value)
-        : context.value === value;
-    return (_jsxs(Container, Object.assign({}, rest, { type: "button", tabIndex: context.multiSelect ? -1 : 0, selected: selected, onClick: clickHandler, children: [context.multiSelect && _jsx(Checkbox, { checked: selected }), children] })));
-}
-//# sourceMappingURL=MenuItem.js.map
+    const selected = context.multiSelect ? context.value?.includes?.(value) : context.value === value;
+    return /*#__PURE__*/ jsxs(Container, {
+        ...rest,
+        ref: ref,
+        type: "button",
+        role: "option",
+        "aria-selected": selected,
+        selected: selected,
+        onClick: clickHandler,
+        multiselect: context.multiSelect ? true : undefined,
+        children: [
+            context.multiSelect && /*#__PURE__*/ jsx(Checkbox, {
+                checked: selected,
+                readOnly: true,
+                tabIndex: -1,
+                onClick: (e)=>e.stopPropagation()
+            }),
+            children
+        ]
+    });
+};
+const MenuItem = /*#__PURE__*/ React.forwardRef(MenuItemInner);
+
+export { MenuItem as default };

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

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

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

@@ -1,10 +1,32 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 export { Header as ModalHeader, Body as ModalBody, Footer as ModalFooter, } from '../../shared/styles';
-type ModalProps = PropTypes.InferProps<typeof Modal.propTypes>;
+declare const modalPropTypes: {
+    /** Opens the modal */
+    open: PropTypes.Validator<boolean>;
+    /** Closes the modal on esc */
+    closeOnEsc: PropTypes.Requireable<boolean>;
+    /** Closes the modal on overlay click */
+    closeOnOverlayClick: PropTypes.Requireable<boolean>;
+    /** Call back function called when the modal closes. */
+    onClose: PropTypes.Requireable<(...args: any[]) => any>;
+};
+type ModalProps = PropTypes.InferProps<typeof modalPropTypes>;
 interface ModalState {
     open: boolean;
 }
+/**
+ * Modal component
+ *
+ * A dialog window that sits on top of the main application content.
+ * It disrupts the user's workflow to demand attention for a critical task or decision.
+ *
+ * Accessibility:
+ * - Implements ARIA `role="dialog"` and `aria-modal="true"`.
+ * - Traps focus effectively within the modal while open.
+ * - Restores focus to the triggering element upon closure.
+ * - Supports closing via ESC key and overlay click.
+ */
 export default class Modal extends React.Component<React.PropsWithChildren<ModalProps>, ModalState> {
     state: {
         open: boolean;
@@ -23,13 +45,59 @@ export default class Modal extends React.Component<React.PropsWithChildren<Modal
         closeOnEsc: boolean;
         closeOnOverlayClick: boolean;
     };
+    /**
+     * Syncs state with props.
+     */
     static getDerivedStateFromProps(props: ModalProps): {
         open: boolean;
     };
     private layer;
     private closeCallback;
+    /**
+     * Internal close handler.
+     * Restores focus and calls the external onClose callback.
+     */
     private onClose;
+    private lastFocusedElement;
+    private modalRef;
+    /**
+     * Retrieves all focusable elements within the modal.
+     */
+    private getFocusableElements;
+    /**
+     * Handles keydown events to implement the focus trap.
+     * Traps Tab and Shift+Tab within the modal.
+     */
+    private handleKeyDown;
+    /**
+     * Lifecycle method to save the currently focused element when the modal mounts while open.
+     */
+    componentDidMount(): void;
+    /**
+     * Lifecycle method to restore focus when the modal unmounts.
+     */
+    componentWillUnmount(): void;
+    /**
+     * Restores focus to the element that was focused before the modal opened.
+     */
+    private restoreFocus;
+    /**
+     * Callback ref to capture the Modal DOM element.
+     * Triggers initial focus setting when the element mounts.
+     */
+    private setModalRef;
+    /**
+     * Sets initial focus within the modal.
+     * Tries to focus the header (first child) first, then the first interactive element, or falls back to the container.
+     */
+    private setInitialFocus;
+    /**
+     * Lifecycle method to handle Modal updates.
+     * Manages opening/closing logic via LayerManager and focus preservation.
+     */
     getSnapshotBeforeUpdate(prevProps: ModalProps): void;
+    /**
+     * Renders the Modal component via the LayerManager portal.
+     */
     render(): import("@emotion/react/jsx-runtime").JSX.Element;
 }
-//# sourceMappingURL=Modal.d.ts.map