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

package/dist/index.js

@@ -74,42 +74,106 @@ function CheckCircle(props) {
     return (jsxRuntime.jsxs("svg", Object.assign({ height: "24", viewBox: "0 0 24 24", width: "24", fill: "currentColor" }, props, { children: [jsxRuntime.jsx("path", { d: "M0 0h24v24H0V0z", fill: "none" }), jsxRuntime.jsx("path", { d: "M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" })] })));
 }
 
-var constants = {
-    PRIMARY: '#2283d2',
-    PRIMARY_LIGHT: '#64baff',
-    PRIMARY_LIGHTER: '#cfe9ff',
-    BACKDROP_COLOR: '#2681da80',
-    INFO: '#2283d2',
-    INFO_LIGHT: '#64baff',
-    SUCCESS: '#22d295',
-    SUCCESS_LIGHT: '#80eac6',
-    WARNING: '#cc9500',
-    WARNING_LIGHT: '#ffba00',
-    ERROR: '#d63b3b',
-    ERROR_LIGHT: '#f1a5a5',
-    BORDER_COLOR: '#555555',
-    TOAST: '#5f5f5f',
-    TOOLTIP_COLOR: 'rgba(0,0,0,0.5)',
-    BORDER_LIGHT_COLOR: '#eeeeee',
-    BACKGROUND: '#ffffff',
-    DISABLED_BACKGROUND: '#fafafa',
-    DISABLED_BORDER: '#aaa',
-    LIGHT_GREY: '#ccc',
-    DISABLED: '#777',
-    SHADOW: '0px 1px 3px 0px rgba(0,0,0,0.1), 0px 1px 2px 0px rgba(0,0,0,0.06)',
-    HOVER_SHADOW: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
-    MODAL_SHADOW: '0px 8px 17px 2px rgba(0,0,0,0.14), 0px 3px 14px 2px rgba(0,0,0,0.12), 0px 5px 5px -3px rgba(0,0,0,0.2)',
+var THEME_CONSTANTS;
+(function (THEME_CONSTANTS) {
+    THEME_CONSTANTS["PRIMARY"] = "#1f7ac5";
+    THEME_CONSTANTS["PRIMARY_LIGHT"] = "#64baff";
+    THEME_CONSTANTS["PRIMARY_LIGHTER"] = "#cfe9ff";
+    THEME_CONSTANTS["BACKDROP_COLOR"] = "#2681da80";
+    THEME_CONSTANTS["INFO"] = "#1f7ac5ff";
+    THEME_CONSTANTS["INFO_LIGHT"] = "#64baffff";
+    THEME_CONSTANTS["SUCCESS"] = "#1a835f";
+    THEME_CONSTANTS["SUCCESS_LIGHT"] = "#80eac6";
+    THEME_CONSTANTS["WARNING"] = "#916b01";
+    THEME_CONSTANTS["WARNING_LIGHT"] = "#ffba00";
+    THEME_CONSTANTS["ERROR"] = "#bb2828";
+    THEME_CONSTANTS["ERROR_LIGHT"] = "#f1a5a5";
+    THEME_CONSTANTS["BORDER_COLOR"] = "#555555";
+    THEME_CONSTANTS["TOAST"] = "#5f5f5f";
+    THEME_CONSTANTS["TOOLTIP_COLOR"] = "rgba(0,0,0,0.6)";
+    THEME_CONSTANTS["BORDER_LIGHT_COLOR"] = "#eeeeee";
+    THEME_CONSTANTS["BACKGROUND"] = "#ffffff";
+    THEME_CONSTANTS["DISABLED_BACKGROUND"] = "#fafafa";
+    THEME_CONSTANTS["DISABLED_BORDER"] = "#aaa";
+    THEME_CONSTANTS["LIGHT_GREY"] = "#ccc";
+    THEME_CONSTANTS["DISABLED"] = "#737373";
+    THEME_CONSTANTS["TEXT_COLOR_LIGHT"] = "#fff";
+    THEME_CONSTANTS["TEXT_COLOR_DARK"] = "#000";
+    THEME_CONSTANTS["SHADOW"] = "0px 1px 3px 0px rgba(0,0,0,0.1), 0px 1px 2px 0px rgba(0,0,0,0.06)";
+    THEME_CONSTANTS["HOVER_SHADOW"] = "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)";
+    THEME_CONSTANTS["MODAL_SHADOW"] = "0px 8px 17px 2px rgba(0,0,0,0.14), 0px 3px 14px 2px rgba(0,0,0,0.12), 0px 5px 5px -3px rgba(0,0,0,0.2)";
+})(THEME_CONSTANTS || (THEME_CONSTANTS = {}));
+var THEME_NAME;
+(function (THEME_NAME) {
+    THEME_NAME["PRIMARY"] = "--nfui-primary";
+    THEME_NAME["PRIMARY_LIGHT"] = "--nfui-primary-light";
+    THEME_NAME["PRIMARY_LIGHTER"] = "--nfui-primary-lighter";
+    THEME_NAME["INFO"] = "--nfui-info";
+    THEME_NAME["INFO_LIGHT"] = "--nfui-info-light";
+    THEME_NAME["SUCCESS"] = "--nfui-success";
+    THEME_NAME["SUCCESS_LIGHT"] = "--nfui-success-light";
+    THEME_NAME["WARNING"] = "--nfui-warning";
+    THEME_NAME["WARNING_LIGHT"] = "--nfui-warning-light";
+    THEME_NAME["ERROR"] = "--nfui-error";
+    THEME_NAME["ERROR_LIGHT"] = "--nfui-error-light";
+    THEME_NAME["BORDER_COLOR"] = "--nfui-border-color";
+    THEME_NAME["TOAST"] = "--nfui-toast";
+    THEME_NAME["TOOLTIP_COLOR"] = "--nfui-tooltip-color";
+    THEME_NAME["BORDER_LIGHT_COLOR"] = "--nfui-border-light-color";
+    THEME_NAME["BACKGROUND"] = "--nfui-background";
+    THEME_NAME["DISABLED_BACKGROUND"] = "--nfui-disabled-background";
+    THEME_NAME["DISABLED_BORDER"] = "--nfui-disabled-border";
+    THEME_NAME["LIGHT_GREY"] = "--nfui-light-grey";
+    THEME_NAME["DISABLED"] = "--nfui-disabled";
+    THEME_NAME["TEXT_COLOR_LIGHT"] = "--nfui-text-color-light";
+    THEME_NAME["TEXT_COLOR_DARK"] = "--nfui-text-color-dark";
+    THEME_NAME["SHADOW"] = "--nfui-shadow";
+    THEME_NAME["HOVER_SHADOW"] = "--nfui-hover-shadow";
+    THEME_NAME["MODAL_SHADOW"] = "--nfui-modal-shadow";
+    THEME_NAME["BACKDROP_COLOR"] = "--nfui-backdrop-color";
+})(THEME_NAME || (THEME_NAME = {}));
+const themeNameMap = {
+    [THEME_NAME.PRIMARY]: THEME_CONSTANTS.PRIMARY,
+    [THEME_NAME.PRIMARY_LIGHT]: THEME_CONSTANTS.PRIMARY_LIGHT,
+    [THEME_NAME.PRIMARY_LIGHTER]: THEME_CONSTANTS.PRIMARY_LIGHTER,
+    [THEME_NAME.INFO]: THEME_CONSTANTS.INFO,
+    [THEME_NAME.INFO_LIGHT]: THEME_CONSTANTS.INFO_LIGHT,
+    [THEME_NAME.SUCCESS]: THEME_CONSTANTS.SUCCESS,
+    [THEME_NAME.SUCCESS_LIGHT]: THEME_CONSTANTS.SUCCESS_LIGHT,
+    [THEME_NAME.WARNING]: THEME_CONSTANTS.WARNING,
+    [THEME_NAME.WARNING_LIGHT]: THEME_CONSTANTS.WARNING_LIGHT,
+    [THEME_NAME.ERROR]: THEME_CONSTANTS.ERROR,
+    [THEME_NAME.ERROR_LIGHT]: THEME_CONSTANTS.ERROR_LIGHT,
+    [THEME_NAME.BACKDROP_COLOR]: THEME_CONSTANTS.BACKDROP_COLOR,
+    [THEME_NAME.BORDER_COLOR]: THEME_CONSTANTS.BORDER_COLOR,
+    [THEME_NAME.TOAST]: THEME_CONSTANTS.TOAST,
+    [THEME_NAME.TOOLTIP_COLOR]: THEME_CONSTANTS.TOOLTIP_COLOR,
+    [THEME_NAME.BORDER_LIGHT_COLOR]: THEME_CONSTANTS.BORDER_LIGHT_COLOR,
+    [THEME_NAME.BACKGROUND]: THEME_CONSTANTS.BACKGROUND,
+    [THEME_NAME.DISABLED_BACKGROUND]: THEME_CONSTANTS.DISABLED_BACKGROUND,
+    [THEME_NAME.DISABLED_BORDER]: THEME_CONSTANTS.DISABLED_BORDER,
+    [THEME_NAME.LIGHT_GREY]: THEME_CONSTANTS.LIGHT_GREY,
+    [THEME_NAME.DISABLED]: THEME_CONSTANTS.DISABLED,
+    [THEME_NAME.TEXT_COLOR_LIGHT]: THEME_CONSTANTS.TEXT_COLOR_LIGHT,
+    [THEME_NAME.TEXT_COLOR_DARK]: THEME_CONSTANTS.TEXT_COLOR_DARK,
+    [THEME_NAME.SHADOW]: THEME_CONSTANTS.SHADOW,
+    [THEME_NAME.HOVER_SHADOW]: THEME_CONSTANTS.HOVER_SHADOW,
+    [THEME_NAME.MODAL_SHADOW]: THEME_CONSTANTS.MODAL_SHADOW,
+};
+const getThemeValue = (key) => {
+    return `var(${key}, ${themeNameMap[key]})`;
 };
 
 const Ellipsis = styled.span `
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
+    flex: 1;
 `;
-const Header$1 = styled.div `
+const Header$1 = styled.h1 `
     padding: 10px 15px;
     line-height: 26px;
-    border-bottom: 1px solid var(--border-light-color, #eeeeee);
+    border-bottom: 1px solid ${getThemeValue(THEME_NAME.BORDER_LIGHT_COLOR)};
     font-size: 16px;
     font-weight: bold;
 `;
@@ -120,7 +184,7 @@ const Body$1 = styled.div `
 `;
 const Footer$1 = styled.div `
     padding: 10px 15px;
-    border-top: 1px solid var(--border-light-color, #eeeeee);
+    border-top: 1px solid ${getThemeValue(THEME_NAME.BORDER_LIGHT_COLOR)};
     display: flex;
     justify-content: flex-end;
 `;
@@ -137,18 +201,18 @@ const BadgeSpan = styled.span `
     background-color: ${(props) => {
     switch (props.type) {
         case exports.BADGE_TYPE.SUCCESS:
-            return `var(--success, ${constants.SUCCESS})`;
+            return getThemeValue(THEME_NAME.SUCCESS);
         case exports.BADGE_TYPE.WARNING:
-            return `var(--info, ${constants.WARNING})`;
+            return getThemeValue(THEME_NAME.WARNING);
         case exports.BADGE_TYPE.DANGER:
-            return `var(--error, ${constants.ERROR})`;
+            return getThemeValue(THEME_NAME.ERROR);
         case exports.BADGE_TYPE.DISABLED:
-            return `var(--disabled, ${constants.DISABLED})`;
+            return getThemeValue(THEME_NAME.DISABLED);
         default:
-            return `var(--primary, ${constants.PRIMARY})`;
+            return getThemeValue(THEME_NAME.PRIMARY);
     }
 }};
-    color: #fff;
+    color: ${getThemeValue(THEME_NAME.TEXT_COLOR_LIGHT)};
     border-radius: 10px;
     padding: ${(props) => (props.children ? '3px 10px' : '4px')};
     display: inline-block;
@@ -182,10 +246,10 @@ Badge.defaultProps = {
 
 const Card = styled.div `
     border-radius: 10px;
-    background-color: var(--background, ${constants.BACKGROUND});
+    background-color: ${getThemeValue(THEME_NAME.BACKGROUND)};
     ${(props) => props.elevated
-    ? `box-shadow: var(--modal-shadow, ${constants.MODAL_SHADOW});`
-    : `box-shadow: var(--shadow, ${constants.SHADOW});`}
+    ? `box-shadow: ${getThemeValue(THEME_NAME.MODAL_SHADOW)};`
+    : `box-shadow: ${getThemeValue(THEME_NAME.SHADOW)};`}
     margin: 5px;
     overflow: auto;
     position: relative;
@@ -193,37 +257,33 @@ const Card = styled.div `
 
 const Step$1 = styled(Card) `
     transition: all 0.6s ease;
+    overflow: visible;
 
-    ${(props) => props.open &&
-    `
-        margin: 20px 5px;
-    `}
-
-    ${(props) => props.focused && `box-shadow: 0 0 0 4px var(--primary-light, ${constants.PRIMARY_LIGHT});`}
+    ${(props) => props.open && `margin: 20px 5px;`}
 `;
-const StepHeader = styled.div `
+const StepHeader = styled.button `
     padding: 20px 15px;
     display: flex;
     justify-content: space-between;
+    background: none;
+    border: none;
+    border-radius: 10px;
+    width: 100%;
+    font-size: inherit;
+    color: ${getThemeValue(THEME_NAME.TEXT_COLOR_DARK)};
+
+    &:focus-visible {
+        box-shadow: 0 0 0 4px ${getThemeValue(THEME_NAME.PRIMARY_LIGHT)};
+    }
 
     & input {
         appearance: none;
         margin: 0;
     }
 
-    ${(props) => props.open
-    ? `
-        border-bottom: 1px solid var(--border-light-color, ${constants.BORDER_LIGHT_COLOR});
-    `
-    : ''}
+    ${(props) => props.open && `border-bottom: 1px solid ${getThemeValue(THEME_NAME.BORDER_LIGHT_COLOR)};`}
 
-    ${(props) => props.disabled
-    ? `
-        color: ${constants.LIGHT_GREY};
-    `
-    : `
-        cursor: pointer;
-    `}
+    ${(props) => props.disabled && `color: ${getThemeValue(THEME_NAME.DISABLED)};`}
 `;
 const HeaderContainer = styled.div `
     display: flex;
@@ -234,10 +294,10 @@ const HeaderContainer = styled.div `
         vertical-align: top;
         margin-right: 10px;
         fill: ${(props) => props.open
-    ? `var(--primary, ${constants.PRIMARY})`
+    ? getThemeValue(THEME_NAME.PRIMARY)
     : props.completed
-        ? `var(--success, ${constants.SUCCESS})`
-        : constants.LIGHT_GREY};
+        ? getThemeValue(THEME_NAME.SUCCESS)
+        : getThemeValue(THEME_NAME.LIGHT_GREY)};
         transform: ${(props) => (props.open ? 'scale(0.8)' : 'scale(0.6)')};
         transition: all 0.3s ease;
         min-width: 24px;
@@ -254,13 +314,7 @@ const ExpandContainer = styled.div `
         fill: currentColor;
     }
 
-    ${(props) => props.open
-    ? `
-        & svg {
-            transform: rotate(180deg);
-        }
-    `
-    : ''}
+    ${(props) => (props.open ? `& svg { transform: rotate(180deg); }` : '')}
 `;
 const StepBody = styled.div `
     transition: all 0.6s ease;
@@ -274,19 +328,18 @@ const AccordionStepFooter = styled.div `
     display: flex;
     justify-content: flex-end;
     padding: 10px 15px;
-    border-top: 1px solid var(--border-light-color, ${constants.BORDER_LIGHT_COLOR});
+    border-top: 1px solid ${getThemeValue(THEME_NAME.BORDER_LIGHT_COLOR)};
 `;
 function AccordionStep(props) {
     const [height, setHeight] = React.useState(0);
-    const [focused, setFocused] = React.useState(false);
     const { open, disabled, header, errorText, completed, onStepClick } = props;
+    // Generate unique IDs for ARIA relationships
+    const headerId = React.useId();
+    const regionId = React.useId();
     const ref = (el) => setHeight((el === null || el === void 0 ? void 0 : el.scrollHeight) || 0);
-    const toggleFocus = () => {
-        setFocused(!focused);
-    };
-    return (jsxRuntime.jsxs(Step$1, Object.assign({}, props, { focused: focused, elevated: props.open, children: [jsxRuntime.jsxs(StepHeader, { open: open, disabled: disabled, onClick: onStepClick, children: [jsxRuntime.jsxs(HeaderContainer, { open: open, completed: completed, children: [jsxRuntime.jsx("input", { type: "checkbox", checked: open, disabled: disabled, onFocus: toggleFocus, onBlur: toggleFocus }), jsxRuntime.jsx(FiberManualRecord, {}), jsxRuntime.jsx(Ellipsis, { children: header })] }), jsxRuntime.jsxs(ExpandContainer, { open: open, children: [errorText && (jsxRuntime.jsx(Badge, { css: react.css `
+    return (jsxRuntime.jsxs(Step$1, Object.assign({}, props, { elevated: props.open, children: [jsxRuntime.jsxs(StepHeader, { open: open, disabled: disabled, onClick: onStepClick, "aria-expanded": open ? 'true' : 'false', "aria-controls": regionId, id: headerId, children: [jsxRuntime.jsxs(HeaderContainer, { open: open, completed: completed, children: [jsxRuntime.jsx(FiberManualRecord, { "aria-hidden": "true" }), jsxRuntime.jsx(Ellipsis, { children: header })] }), jsxRuntime.jsxs(ExpandContainer, { open: open, children: [errorText && (jsxRuntime.jsx(Badge, { css: react.css `
                                 margin-right: 15px;
-                            `, inline: true, type: exports.BADGE_TYPE.DANGER, children: errorText })), jsxRuntime.jsx(ExpandMore, {})] })] }), jsxRuntime.jsx(StepBody, { ref: ref, height: open ? height : 0, children: open && props.children })] })));
+                            `, inline: true, type: exports.BADGE_TYPE.DANGER, children: errorText })), jsxRuntime.jsx(ExpandMore, { "aria-hidden": "true" })] })] }), jsxRuntime.jsx(StepBody, { ref: ref, height: open ? height : 0, role: "region", id: regionId, "aria-labelledby": headerId, "aria-hidden": open ? 'false' : 'true', children: open && props.children })] })));
 }
 AccordionStep.propTypes = {
     /** Header text for the step */
@@ -303,8 +356,8 @@ AccordionStep.defaultProps = {
     disabled: false,
 };
 
-var Button$2 = styled.button `
-    border: 1px solid var(--border-color, ${constants.BORDER_COLOR});
+const StyledButton = styled.button `
+    border: 1px solid ${getThemeValue(THEME_NAME.BORDER_COLOR)};
     border-radius: 5px;
     height: 32px;
     min-width: 100px;
@@ -312,12 +365,13 @@ var Button$2 = styled.button `
     text-align: center;
     padding: 0 12px;
     cursor: pointer;
-    color: inherit;
-    background-color: var(--background, ${constants.BACKGROUND});
-    text-overflow: ellipsis;
-    white-space: nowrap;
+    color: ${getThemeValue(THEME_NAME.TEXT_COLOR_DARK)};
+    background-color: ${getThemeValue(THEME_NAME.BACKGROUND)};
     margin: 5px;
     position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
 
     & svg {
         vertical-align: middle;
@@ -328,21 +382,24 @@ var Button$2 = styled.button `
     }
 
     &:enabled:hover {
-        border-color: var(--primary, ${constants.PRIMARY});
-        color: var(--primary, ${constants.PRIMARY});
+        border-color: ${getThemeValue(THEME_NAME.PRIMARY)};
+        color: ${getThemeValue(THEME_NAME.PRIMARY)};
     }
 
     &:focus {
-        border-color: var(--primary, ${constants.PRIMARY});
-        box-shadow: 0 0 0 4px var(--primary-light, ${constants.PRIMARY_LIGHT});
+        border-color: ${getThemeValue(THEME_NAME.PRIMARY)};
+        box-shadow: 0 0 0 4px ${getThemeValue(THEME_NAME.PRIMARY_LIGHT)};
     }
 
     &:disabled {
-        background-color: var(--border-light-color, ${constants.BORDER_LIGHT_COLOR});
-        border-color: var(--light-grey, ${constants.LIGHT_GREY});
-        color: var(--disabled, ${constants.DISABLED});
+        background-color: ${getThemeValue(THEME_NAME.DISABLED_BACKGROUND)};
+        border-color: ${getThemeValue(THEME_NAME.LIGHT_GREY)};
+        color: ${getThemeValue(THEME_NAME.DISABLED)};
     }
 `;
+StyledButton.defaultProps = {
+    type: 'button',
+};
 
 var LinkButton = styled.button `
     min-width: 100px;
@@ -352,12 +409,13 @@ var LinkButton = styled.button `
     cursor: pointer;
     background-color: transparent;
     border: none;
-    color: var(--primary, ${constants.PRIMARY});
+    color: ${getThemeValue(THEME_NAME.PRIMARY)};
     padding: 0 12px;
-    text-overflow: ellipsis;
-    white-space: nowrap;
     margin: 5px;
     position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
 
     & svg {
         vertical-align: middle;
@@ -373,28 +431,29 @@ var LinkButton = styled.button `
     }
 
     &:disabled {
-        border-color: ${constants.BORDER_COLOR};
-        color: ${constants.DISABLED_BORDER};
+        border-color: ${getThemeValue(THEME_NAME.BORDER_COLOR)};
+        color: ${getThemeValue(THEME_NAME.DISABLED)};
     }
 `;
 
 var RaisedButton = styled.button `
-    border: 1px solid var(--border-color, ${constants.BORDER_COLOR});
+    border: 1px solid ${getThemeValue(THEME_NAME.BORDER_COLOR)};
     border-radius: 5px;
     height: 32px;
     min-width: 100px;
     font-size: 14px;
     text-align: center;
     padding: 0 12px;
-    cursor: pointer;
+    cursor: ${getThemeValue(THEME_NAME.TEXT_COLOR_DARK)};
     color: inherit;
-    background-color: var(--background, ${constants.BACKGROUND});
+    background-color: ${getThemeValue(THEME_NAME.BACKGROUND)};
     transform: translateY(-2px);
-    box-shadow: var(--hover-shadow, ${constants.HOVER_SHADOW});
-    text-overflow: ellipsis;
-    white-space: nowrap;
+    box-shadow: ${getThemeValue(THEME_NAME.HOVER_SHADOW)};
     margin: 5px;
     position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
 
     & svg {
         vertical-align: middle;
@@ -405,30 +464,30 @@ var RaisedButton = styled.button `
     }
 
     &:enabled:hover {
-        border-color: var(--primary, ${constants.PRIMARY});
-        color: var(--primary, ${constants.PRIMARY});
+        border-color: ${getThemeValue(THEME_NAME.PRIMARY)};
+        color: ${getThemeValue(THEME_NAME.PRIMARY)};
     }
 
     &:focus {
-        border-color: var(--primary, ${constants.PRIMARY});
+        border-color: ${getThemeValue(THEME_NAME.PRIMARY)};
     }
 
     &:disabled {
-        background-color: ${constants.BORDER_LIGHT_COLOR};
-        border-color: ${constants.LIGHT_GREY};
-        color: ${constants.DISABLED};
+        background-color: ${getThemeValue(THEME_NAME.DISABLED_BACKGROUND)};
+        border-color: ${getThemeValue(THEME_NAME.LIGHT_GREY)};
+        color: ${getThemeValue(THEME_NAME.DISABLED)};
     }
 
     &:active {
         transform: translateY(0);
-        box-shadow: var(--shadow, ${constants.SHADOW});
+        box-shadow: ${getThemeValue(THEME_NAME.SHADOW)};
     }
 `;
 
 var ActionButton = styled.button `
-    border: 1px solid var(--primary, ${constants.PRIMARY});
-    background-color: var(--primary, ${constants.PRIMARY});
-    color: #fff;
+    border: 1px solid ${getThemeValue(THEME_NAME.PRIMARY)};
+    background-color: ${getThemeValue(THEME_NAME.PRIMARY)};
+    color: ${getThemeValue(THEME_NAME.TEXT_COLOR_LIGHT)};
     border-radius: 5px;
     height: 32px;
     min-width: 100px;
@@ -436,10 +495,11 @@ var ActionButton = styled.button `
     text-align: center;
     padding: 0 12px;
     cursor: pointer;
-    text-overflow: ellipsis;
-    white-space: nowrap;
     margin: 5px;
     position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
 
     & svg {
         vertical-align: middle;
@@ -450,34 +510,35 @@ var ActionButton = styled.button `
     }
 
     &:enabled:hover {
-        box-shadow: var(--hover-shadow, ${constants.HOVER_SHADOW});
+        box-shadow: ${getThemeValue(THEME_NAME.HOVER_SHADOW)};
     }
 
     &:focus {
-        box-shadow: 0 0 0 4px var(--primary-light, ${constants.PRIMARY_LIGHT});
+        box-shadow: 0 0 0 4px ${getThemeValue(THEME_NAME.PRIMARY_LIGHT)};
     }
 
     &:disabled {
-        border: 1px solid ${constants.LIGHT_GREY};
-        background-color: var(--border-light-color, ${constants.BORDER_LIGHT_COLOR});
-        color: var(--disabled, ${constants.DISABLED});
+        border: 1px solid ${getThemeValue(THEME_NAME.BORDER_LIGHT_COLOR)};
+        background-color: ${getThemeValue(THEME_NAME.DISABLED_BACKGROUND)};
+        color: ${getThemeValue(THEME_NAME.DISABLED)};
     }
 `;
 
 var IconButton = styled.button `
-    border: 1px solid var(--border-color, ${constants.BORDER_COLOR});
+    border: 1px solid ${getThemeValue(THEME_NAME.BORDER_COLOR)};
     border-radius: 5px;
     height: 32px;
     font-size: 14px;
     text-align: center;
     padding: 0 3px;
     cursor: pointer;
-    color: inherit;
-    background-color: var(--background, ${constants.BACKGROUND});
-    text-overflow: ellipsis;
-    white-space: nowrap;
+    color: ${getThemeValue(THEME_NAME.TEXT_COLOR_DARK)};
+    background-color: ${getThemeValue(THEME_NAME.BACKGROUND)};
     margin: 5px;
     position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
 
     & svg {
         vertical-align: middle;
@@ -487,23 +548,23 @@ var IconButton = styled.button `
     }
 
     &:enabled:hover {
-        border-color: var(--primary, ${constants.PRIMARY});
-        color: var(--primary, ${constants.PRIMARY});
+        border-color: ${getThemeValue(THEME_NAME.PRIMARY)};
+        color: ${getThemeValue(THEME_NAME.PRIMARY)};
     }
 
     &:focus {
-        border-color: var(--primary, ${constants.PRIMARY});
-        box-shadow: 0 0 0 4px var(--primary-light, ${constants.PRIMARY_LIGHT});
+        border-color: ${getThemeValue(THEME_NAME.PRIMARY)};
+        box-shadow: 0 0 0 4px ${getThemeValue(THEME_NAME.PRIMARY_LIGHT)};
     }
 
     &:disabled {
-        background-color: ${constants.BORDER_LIGHT_COLOR};
-        border-color: ${constants.LIGHT_GREY};
-        color: ${constants.DISABLED};
+        background-color: ${getThemeValue(THEME_NAME.BORDER_LIGHT_COLOR)};
+        border-color: ${getThemeValue(THEME_NAME.LIGHT_GREY)};
+        color: ${getThemeValue(THEME_NAME.DISABLED)};
     }
 
     &:disabled > svg {
-        fill: ${constants.DISABLED};
+        fill: ${getThemeValue(THEME_NAME.DISABLED)};
     }
 `;
 
@@ -536,42 +597,58 @@ function __rest(s, e) {
     return t;
 }
 
+function __awaiter(thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+}
+
 typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
     var e = new Error(message);
     return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
-const Container$8 = styled.div `
+const Container$8 = styled.span `
     padding: 5px;
     padding-left: 15px;
     border-radius: 16px;
-    background-color: var(--border-light-color, ${constants.BORDER_LIGHT_COLOR});
+    background-color: ${getThemeValue(THEME_NAME.BORDER_LIGHT_COLOR)};
     display: inline-flex;
     margin: 5px;
     line-height: 20px;
     align-items: center;
-
-    &:focus-within {
-        outline: 2px solid var(--primary-light, ${constants.PRIMARY_LIGHT});
-    }
 `;
 const Button$1 = styled.button `
-    color: #fff;
-    background-color: var(--disabled-border, ${constants.DISABLED_BORDER});
+    color: ${getThemeValue(THEME_NAME.BACKGROUND)};
+    background-color: ${getThemeValue(THEME_NAME.DISABLED)};
     border-radius: 50%;
     border: none;
-    padding: 0;
+    padding: 4px;
     display: inline-flex;
     margin-left: 5px;
+
+    &:focus-within {
+        outline: 4px solid ${getThemeValue(THEME_NAME.ERROR_LIGHT)};
+    }
 `;
 function Chip(props) {
-    const { label, onCloseClick } = props, rest = __rest(props, ["label", "onCloseClick"]);
+    const { label, onCloseClick, closeButtonAriaLabel } = props, rest = __rest(props, ["label", "onCloseClick", "closeButtonAriaLabel"]);
     const keyUpHandler = (e) => {
-        if (e.keyCode === 8 || e.keyCode === 46) {
-            onCloseClick === null || onCloseClick === void 0 ? void 0 : onCloseClick();
+        if (e.key === 'Backspace' || e.key === 'Delete') {
+            onCloseClick === null || onCloseClick === void 0 ? void 0 : onCloseClick(e);
         }
     };
-    return (jsxRuntime.jsxs(Container$8, Object.assign({}, rest, { onKeyUp: keyUpHandler, children: [label, jsxRuntime.jsx(Button$1, { onClick: onCloseClick, "aria-label": `Remove ${label}`, children: jsxRuntime.jsx(Close, { height: 20, width: 20 }) })] })));
+    const buttonKeyDownHandler = (e) => {
+        // Stop propagation to prevent DragAndDrop from capturing Space/Enter
+        if (e.key === ' ' || e.key === 'Spacebar' || e.key === 'Enter') {
+            e.stopPropagation();
+        }
+    };
+    return (jsxRuntime.jsxs(Container$8, Object.assign({}, rest, { onKeyUp: keyUpHandler, children: [label, jsxRuntime.jsx(Button$1, { onClick: onCloseClick, onKeyDown: buttonKeyDownHandler, "aria-label": closeButtonAriaLabel !== null && closeButtonAriaLabel !== void 0 ? closeButtonAriaLabel : `Remove ${label}`, children: jsxRuntime.jsx(Close, { height: 16, width: 16 }) })] })));
 }
 
 exports.ORIENTATION = void 0;
@@ -586,30 +663,43 @@ const Item = styled.div `
     cursor: ${(props) => (props.showIndicator ? 'default' : 'move')};
     display: flex;
     user-select: ${(props) => (props.showIndicator ? 'auto' : 'none')};
-    border-top: 2px solid
+    border-top: 2px dashed
         ${(props) => props.orientation === exports.ORIENTATION.VERTICAL && props.active > 0
-    ? constants.PRIMARY
+    ? getThemeValue(THEME_NAME.PRIMARY)
     : 'transparent'};
-    border-bottom: 2px solid
+    border-bottom: 2px dashed
         ${(props) => props.orientation === exports.ORIENTATION.VERTICAL && props.active < 0
-    ? constants.PRIMARY
+    ? getThemeValue(THEME_NAME.PRIMARY)
     : 'transparent'};
-    border-left: 2px solid
+    border-left: 2px dashed
         ${(props) => props.orientation === exports.ORIENTATION.HORIZONTAL && props.active > 0
-    ? constants.PRIMARY
+    ? getThemeValue(THEME_NAME.PRIMARY)
     : 'transparent'};
-    border-right: 2px solid
+    border-right: 2px dashed
         ${(props) => props.orientation === exports.ORIENTATION.HORIZONTAL && props.active < 0
-    ? constants.PRIMARY
+    ? getThemeValue(THEME_NAME.PRIMARY)
     : 'transparent'};
     opacity: ${(props) => (props.dragging ? 0.5 : 1)};
+    border-radius: 10px;
+
+    &:focus {
+        box-shadow: 0 0 0 4px ${getThemeValue(THEME_NAME.PRIMARY_LIGHT)};
+    }
+
+    &:focus:not(:focus-visible) {
+        box-shadow: none;
+    }
+
+    &:focus-visible {
+        box-shadow: 0 0 0 4px ${getThemeValue(THEME_NAME.PRIMARY_LIGHT)};
+    }
 `;
 /** Styled component for the drag handle indicator */
 const DragKnob = styled.div `
     padding-top: 8px;
     cursor: move;
     touch-action: none;
-    color: var(--disabled, ${constants.DISABLED});
+    color: ${getThemeValue(THEME_NAME.DISABLED)};
 `;
 /** Container for the children */
 const Container$7 = styled.div `
@@ -648,7 +738,7 @@ const Container$7 = styled.div `
  * @returns A draggable item with optional drag indicator and visual feedback
  */
 function DragItem(props) {
-    const { index, orientation, children, showIndicator, dragOver } = props;
+    const { index, orientation, children, showIndicator, dragOver, totalItems, setAnnouncement } = props;
     const [active, setActive] = React.useState(0);
     const [touchTimer, setTouchTimer] = React.useState(null);
     const context = React.useContext(DragContext);
@@ -750,6 +840,71 @@ function DragItem(props) {
             document.body.style.overflow = 'auto';
         }
     };
+    /**
+     * Keyboard navigation handler for reordering items
+     * @param e Keyboard event
+     */
+    const handleKeyDown = (e) => {
+        const isVertical = orientation === exports.ORIENTATION.VERTICAL;
+        const moveUp = isVertical ? 'ArrowUp' : 'ArrowLeft';
+        const moveDown = isVertical ? 'ArrowDown' : 'ArrowRight';
+        const isGrabbed = context.isDragging && context.startIndex === index;
+        // Space to grab/drop
+        if (e.key === ' ' || e.key === 'Spacebar') {
+            e.preventDefault();
+            if (isGrabbed) {
+                // Drop at current position
+                context.drop(index);
+                setAnnouncement(context.i18n.replacePlaceholders(context.i18n.droppedAnnouncementTemplate, {
+                    position: index + 1,
+                }));
+            }
+            else {
+                // Grab item
+                context.startGrab(index);
+                setAnnouncement(context.i18n.replacePlaceholders(context.i18n.grabbedAnnouncementTemplate, {
+                    position: index + 1,
+                }));
+            }
+        }
+        // Enter to drop
+        else if (e.key === 'Enter' && isGrabbed) {
+            e.preventDefault();
+            context.drop(index);
+            setAnnouncement(context.i18n.replacePlaceholders(context.i18n.droppedAnnouncementTemplate, {
+                position: index + 1,
+            }));
+        }
+        // Escape to cancel
+        else if (e.key === 'Escape' && isGrabbed) {
+            e.preventDefault();
+            context.cancel();
+            setAnnouncement(context.i18n.cancelledAnnouncementTemplate);
+        }
+        // Arrow keys to move while grabbed
+        else if (isGrabbed) {
+            if (e.key === moveUp && index > 0) {
+                e.preventDefault();
+                // Move without dropping - just reorder and update startIndex
+                const newIndex = index - 1;
+                context.onDrop(context.startIndex, newIndex);
+                context.setStartIndex(newIndex);
+                setAnnouncement(context.i18n.replacePlaceholders(context.i18n.movedAnnouncementTemplate, {
+                    position: newIndex + 1,
+                }));
+            }
+            else if (e.key === moveDown && index < totalItems - 1) {
+                e.preventDefault();
+                // Move without dropping - just reorder and update startIndex
+                const newIndex = index + 1;
+                context.onDrop(context.startIndex, newIndex);
+                context.setStartIndex(newIndex);
+                setAnnouncement(context.i18n.replacePlaceholders(context.i18n.movedAnnouncementTemplate, {
+                    position: newIndex + 1,
+                }));
+            }
+        }
+    };
     /** Cleanup touch timer on unmount */
     React.useEffect(() => {
         return () => {
@@ -767,7 +922,9 @@ function DragItem(props) {
             setActive(0);
         }
     }, [dragOver, context.startIndex, index, context.isDragging]);
-    return (jsxRuntime.jsxs(Item, { draggable: !showIndicator, showIndicator: showIndicator, active: active, dragging: context.isDragging && context.startIndex === index, orientation: orientation, "data-drag-index": index, onDragStart: !showIndicator ? dragStartHandler : undefined, onDragOver: dragOverHandler, onDragLeave: dragExitHandler, onDrop: dropHandler, onTouchStart: !showIndicator ? touchStartHandler : undefined, onTouchMove: touchMoveHandler, onTouchEnd: touchEndHandler, onTouchCancel: touchEndHandler, children: [showIndicator && (jsxRuntime.jsx(DragKnob, { draggable: true, onDragStart: dragStartHandler, onTouchStart: touchStartHandler, children: jsxRuntime.jsx(CheckCircle, {}) })), jsxRuntime.jsx(Container$7, { children: children })] }));
+    return (jsxRuntime.jsxs(Item, { draggable: !showIndicator, showIndicator: showIndicator, active: active, dragging: context.isDragging && context.startIndex === index, orientation: orientation, "data-drag-index": index, tabIndex: 0, role: "listitem", "aria-label": context.i18n.replacePlaceholders(context.i18n.itemAriaLabelTemplate, {
+            position: index + 1,
+        }), "aria-grabbed": context.isDragging && context.startIndex === index, onKeyDown: handleKeyDown, onDragStart: !showIndicator ? dragStartHandler : undefined, onDragOver: dragOverHandler, onDragLeave: dragExitHandler, onDrop: dropHandler, onTouchStart: !showIndicator ? touchStartHandler : undefined, onTouchMove: touchMoveHandler, onTouchEnd: touchEndHandler, onTouchCancel: touchEndHandler, children: [showIndicator && (jsxRuntime.jsx(DragKnob, { draggable: true, role: "button", "aria-label": context.i18n.dragHandleAriaLabel, onDragStart: dragStartHandler, onTouchStart: touchStartHandler, onKeyDown: handleKeyDown, tabIndex: -1, children: jsxRuntime.jsx(CheckCircle, {}) })), jsxRuntime.jsx(Container$7, { children: children })] }));
 }
 
 /** Container Component */
@@ -778,6 +935,18 @@ const Container$6 = styled.div `
     flex-wrap: wrap;
     flex-direction: ${(props) => (props.orientation === exports.ORIENTATION.HORIZONTAL ? 'row' : 'column')};
 `;
+/** Visually hidden but accessible to screen readers */
+const VisuallyHidden$2 = styled.div `
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+`;
 /**
  * A drag and drop container component that enables reordering of child elements.
  *
@@ -804,10 +973,37 @@ const Container$6 = styled.div `
  * @returns {JSX.Element} A draggable container with reorderable items
  */
 function DragAndDrop(props) {
-    const { orientation, children, onDrop, showIndicator } = props;
+    const { orientation, children, onDrop, showIndicator, itemAriaLabelTemplate, dragHandleAriaLabel, grabbedAnnouncementTemplate, movedAnnouncementTemplate, droppedAnnouncementTemplate, cancelledAnnouncementTemplate, } = props;
     const [startIndex, setStartIndex] = React.useState(null);
+    const [originalIndex, setOriginalIndex] = React.useState(null);
     const [isDragging, setIsDragging] = React.useState(false);
     const [dragOver, setDragOver] = React.useState(null);
+    const [announcement, setAnnouncement] = React.useState('');
+    const childrenArray = React.Children.toArray(children);
+    const totalItems = childrenArray.length;
+    /**
+     * Replace placeholders in i18n templates
+     */
+    const replacePlaceholders = (template, data) => {
+        var _a, _b, _c, _d, _e, _f;
+        return template
+            .replace(/\{:position\}/g, String((_a = data.position) !== null && _a !== void 0 ? _a : ''))
+            .replace(/\{:grabKey\}/g, (_b = data.grabKey) !== null && _b !== void 0 ? _b : 'Space')
+            .replace(/\{:dropKey\}/g, (_c = data.dropKey) !== null && _c !== void 0 ? _c : 'Space')
+            .replace(/\{:altDropKey\}/g, (_d = data.altDropKey) !== null && _d !== void 0 ? _d : 'Enter')
+            .replace(/\{:cancelKey\}/g, (_e = data.cancelKey) !== null && _e !== void 0 ? _e : 'Escape')
+            .replace(/\{:moveKeys\}/g, (_f = data.moveKeys) !== null && _f !== void 0 ? _f : (orientation === exports.ORIENTATION.VERTICAL ? 'Arrow Up/Down' : 'Arrow Left/Right'));
+    };
+    // i18n configuration object
+    const i18n = {
+        itemAriaLabelTemplate: itemAriaLabelTemplate,
+        dragHandleAriaLabel: dragHandleAriaLabel,
+        grabbedAnnouncementTemplate: grabbedAnnouncementTemplate,
+        movedAnnouncementTemplate: movedAnnouncementTemplate,
+        droppedAnnouncementTemplate: droppedAnnouncementTemplate,
+        cancelledAnnouncementTemplate: cancelledAnnouncementTemplate,
+        replacePlaceholders,
+    };
     /**
      * Drop handler invoked when a draggable item is released.
      * @param index
@@ -817,15 +1013,58 @@ function DragAndDrop(props) {
             onDrop === null || onDrop === void 0 ? void 0 : onDrop(startIndex, index);
         }
         setStartIndex(null);
+        setOriginalIndex(null);
+        setIsDragging(false);
+    };
+    /**
+     * Cancel handler to restore item to original position
+     */
+    const cancel = () => {
+        if (originalIndex !== null && startIndex !== null && startIndex !== originalIndex) {
+            onDrop === null || onDrop === void 0 ? void 0 : onDrop(startIndex, originalIndex);
+        }
+        setStartIndex(null);
+        setOriginalIndex(null);
         setIsDragging(false);
     };
-    return (jsxRuntime.jsx(DragContext.Provider, { value: { startIndex, setStartIndex, drop, isDragging, setIsDragging, setDragOver }, children: jsxRuntime.jsx(Container$6, { orientation: orientation, children: React.Children.map(children, (child, index) => (jsxRuntime.jsx(DragItem, { index: index, orientation: orientation, showIndicator: showIndicator, dragOver: dragOver, children: child }))) }) }));
+    /**
+     * Start grab handler to track original position
+     */
+    const startGrab = (index) => {
+        setStartIndex(index);
+        setOriginalIndex(index);
+        setIsDragging(true);
+    };
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(DragContext.Provider, { value: {
+                    startIndex,
+                    setStartIndex,
+                    drop,
+                    onDrop,
+                    cancel,
+                    startGrab,
+                    isDragging,
+                    setIsDragging,
+                    setDragOver,
+                    i18n,
+                }, children: jsxRuntime.jsx(Container$6, { orientation: orientation, role: "list", children: React.Children.map(childrenArray, (child, index) => (jsxRuntime.jsx(DragItem, { index: index, orientation: orientation, showIndicator: showIndicator, dragOver: dragOver, totalItems: totalItems, setAnnouncement: setAnnouncement, children: child }))) }) }), jsxRuntime.jsx(VisuallyHidden$2, { role: "status", "aria-live": "polite", "aria-atomic": "true", children: announcement })] }));
 }
 DragAndDrop.defaultProps = {
     /** Orientation of the list layout */
     orientation: exports.ORIENTATION.VERTICAL,
     /** Whether to display drag indicators for each list item */
     showIndicator: false,
+    /** Default item aria-label template */
+    itemAriaLabelTemplate: 'Item {:position}. Press {:grabKey} to grab, {:moveKeys} to move, {:dropKey} or {:altDropKey} to drop',
+    /** Default drag handle aria-label */
+    dragHandleAriaLabel: 'Drag to reorder',
+    /** Default grabbed announcement template */
+    grabbedAnnouncementTemplate: 'Item {:position} grabbed. Use {:moveKeys} to move, {:dropKey} or {:altDropKey} to drop, {:cancelKey} to cancel',
+    /** Default moved announcement template */
+    movedAnnouncementTemplate: 'Item moved to position {:position}',
+    /** Default dropped announcement template */
+    droppedAnnouncementTemplate: 'Item dropped at position {:position}',
+    /** Default cancelled announcement template */
+    cancelledAnnouncementTemplate: 'Drag cancelled, item restored to original position',
 };
 
 // Label component for the ChipInput
@@ -839,45 +1078,45 @@ const Label$6 = styled.label `
     padding: 0 8px;
     width: 250px;
     border-radius: 3px;
-    border: 1px solid var(--border-color, ${constants.BORDER_COLOR});
-    background-color: var(--background, ${constants.BACKGROUND});
+    border: 1px solid ${getThemeValue(THEME_NAME.BORDER_COLOR)};
+    background-color: ${getThemeValue(THEME_NAME.BACKGROUND)};
 
     /** Focused */
     &:has(:focus),
     &:has(:active) {
-        border-color: var(--primary, ${constants.PRIMARY});
-        box-shadow: 0 0 0 4px var(--primary-light, ${constants.PRIMARY_LIGHT});
+        border-color: ${getThemeValue(THEME_NAME.PRIMARY)};
+        box-shadow: 0 0 0 4px ${getThemeValue(THEME_NAME.PRIMARY_LIGHT)};
     }
 
     &:has(:focus) > span,
     &:has(:active) > span {
-        color: var(--primary, ${constants.PRIMARY});
+        color: ${getThemeValue(THEME_NAME.PRIMARY)};
     }
 
     /** Disabled */
     &:has(:disabled) {
-        border-color: var(--disabled-border, ${constants.DISABLED_BORDER});
-        background-color: var(--disabled-background, ${constants.DISABLED_BACKGROUND});
+        border-color: ${getThemeValue(THEME_NAME.DISABLED_BORDER)};
+        background-color: ${getThemeValue(THEME_NAME.DISABLED_BACKGROUND)};
     }
 
     &:has(:disabled) > span {
-        color: #777;
+        color: ${getThemeValue(THEME_NAME.DISABLED)};
     }
 
     /** Invalid */
     &:has(:focus:invalid) {
-        border-color: var(--error, ${constants.ERROR});
-        box-shadow: 0 0 0 4px var(--error-light, ${constants.ERROR_LIGHT});
+        border-color: ${getThemeValue(THEME_NAME.ERROR)};
+        box-shadow: 0 0 0 4px ${getThemeValue(THEME_NAME.ERROR_LIGHT)};
     }
 
     ${(props) => props.touched
     ? `
         &:has(:invalid) {
-            border-color: var(--error, ${constants.ERROR});
+            border-color: ${getThemeValue(THEME_NAME.ERROR)};
         }
     
         &:has(:invalid) > span {
-            color: var(--error, ${constants.ERROR});
+            color: ${getThemeValue(THEME_NAME.ERROR)};
         }
         `
     : ''}
@@ -885,10 +1124,10 @@ const Label$6 = styled.label `
     /** Error */
     ${(props) => props.errorText
     ? `
-        border-color: var(--error, ${constants.ERROR});
+        border-color: ${getThemeValue(THEME_NAME.ERROR)};
 
         & > span {
-            color: var(--error, ${constants.ERROR});
+            color: ${getThemeValue(THEME_NAME.ERROR)};
         }
         `
     : ''}
@@ -897,15 +1136,15 @@ const Label$6 = styled.label `
     &:has(:required) > span:after {
         content: '*';
         margin-left: 2px;
-        color: var(--error, ${constants.ERROR});
+        color: ${getThemeValue(THEME_NAME.ERROR)};
     }
 
     & > input {
         border: none;
         outline: none;
-        width: 100%;
         line-height: 30px;
         min-height: 30px;
+        max-width: 95%;
     }
 
     /** Label Animation */
@@ -922,7 +1161,7 @@ const Label$6 = styled.label `
     &:has(:focus) > span,
     &:has(:placeholder-shown) > span {
         top: -8px;
-        background: var(--background, ${constants.BACKGROUND});
+        background: ${getThemeValue(THEME_NAME.BACKGROUND)};
         font-size: 12px;
         line-height: 14px;
     }
@@ -931,7 +1170,7 @@ const Label$6 = styled.label `
     ? `
     & > span {
         top: -8px;
-        background: var(--background, ${constants.BACKGROUND});
+        background: ${getThemeValue(THEME_NAME.BACKGROUND)};
         font-size: 12px;
         line-height: 14px;
     }
@@ -940,12 +1179,28 @@ const Label$6 = styled.label `
 `;
 // Error message container
 const ErrorContainer$4 = styled.div `
-    color: var(--error, ${constants.ERROR});
+    color: ${getThemeValue(THEME_NAME.ERROR)};
     padding-top: 3px;
     font-size: 12px;
     line-height: 14px;
     margin-left: 3px;
 `;
+// Visually hidden but accessible to screen readers
+const VisuallyHidden$1 = styled.ul `
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+
+    & li {
+        list-style: none;
+    }
+`;
 /**
  * A chip input component that allows users to add and remove chips (tags) by typing and pressing Enter.
  * @component
@@ -964,9 +1219,21 @@ function ChipInput(props) {
     const [touched, setTouched] = React.useState(false);
     const [value, setValue] = React.useState(props.value);
     const InputRef = React.useRef(null);
+    const [announcement, setAnnouncement] = React.useState('');
+    const errorId = React.useId();
+    /**
+     * Replace {:label} placeholder in template string
+     */
+    const replacePlaceholder = (template, label) => {
+        if (!template)
+            return undefined;
+        return template.replace(/\{:label\}/g, label);
+    };
     // Sync internal value with props.value
     React.useEffect(() => {
-        setValue(props.value);
+        if (Array.isArray(props.value)) {
+            setValue(props.value);
+        }
     }, [props.value]);
     /**
      * Update the chip values and notify changes.
@@ -1004,6 +1271,7 @@ function ChipInput(props) {
             const newValue = [...value, text.trim()];
             updateValue(newValue);
             setText('');
+            setAnnouncement(replacePlaceholder(props.addedAnnouncementTemplate, text.trim()));
         }
     };
     /**
@@ -1013,6 +1281,7 @@ function ChipInput(props) {
     const removeChip = (chipToRemove) => {
         const newValue = value.filter((chip) => chip !== chipToRemove);
         updateValue(newValue);
+        setAnnouncement(replacePlaceholder(props.removedAnnouncementTemplate, chipToRemove));
     };
     /**
      * Moves a chip from one position to another.
@@ -1030,7 +1299,7 @@ function ChipInput(props) {
         updateValue(newItems);
     };
     // Render the component
-    return (jsxRuntime.jsxs(Label$6, { text: text, touched: touched, errorText: props.errorText, children: [jsxRuntime.jsx("input", Object.assign({}, props, { ref: InputRef, type: "text", value: text, onChange: handleChange, onFocus: handleFocus, onKeyUp: handleKeyUp, required: props.required && value.length === 0 })), jsxRuntime.jsx("div", { children: (value === null || value === void 0 ? void 0 : value.length) > 0 && (jsxRuntime.jsx(DragAndDrop, { orientation: exports.ORIENTATION.HORIZONTAL, onDrop: onDrop, children: value.map((chip) => (jsxRuntime.jsx(Chip, { label: chip, onCloseClick: () => removeChip(chip) }, chip))) })) }), jsxRuntime.jsx("span", { children: props.label }), props.errorText && jsxRuntime.jsx(ErrorContainer$4, { children: props.errorText })] }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(Label$6, { text: text, touched: touched, errorText: props.errorText, children: [jsxRuntime.jsx("input", Object.assign({}, props, { ref: InputRef, value: text, onChange: handleChange, onFocus: handleFocus, onKeyUp: handleKeyUp, required: props.required && value.length === 0, "aria-required": props.required, "aria-invalid": !!props.errorText, "aria-describedby": props.errorText ? errorId : undefined })), jsxRuntime.jsx("div", { children: (value === null || value === void 0 ? void 0 : value.length) > 0 && (jsxRuntime.jsx(DragAndDrop, { orientation: exports.ORIENTATION.HORIZONTAL, onDrop: onDrop, children: value.map((chip) => (jsxRuntime.jsx(Chip, { label: chip, onCloseClick: () => removeChip(chip), closeButtonAriaLabel: replacePlaceholder(props.closeButtonAriaLabel, chip) }, chip))) })) }), jsxRuntime.jsx("span", { children: props.label }), props.errorText && jsxRuntime.jsx(ErrorContainer$4, { id: errorId, children: props.errorText })] }), jsxRuntime.jsx(VisuallyHidden$1, { "aria-live": "polite", "aria-atomic": "true", children: announcement })] }));
 }
 ChipInput.propTypes = {
     /** Label for the field */
@@ -1041,9 +1310,18 @@ ChipInput.propTypes = {
     value: PropTypes.arrayOf(PropTypes.string),
     /** Callback when chips change */
     onChange: PropTypes.func,
+    /** Aria label for the close button on chip. Defaults to "Remove {label}" */
+    closeButtonAriaLabel: PropTypes.string,
+    /** Announcement text when a chip is added. Defaults to "{label} was added" */
+    addedAnnouncementTemplate: PropTypes.string,
+    /** Announcement text when a chip is removed. Defaults to "{label} was removed" */
+    removedAnnouncementTemplate: PropTypes.string,
 };
 ChipInput.defaultProps = {
     value: [],
+    closeButtonAriaLabel: 'Remove {:label}',
+    addedAnnouncementTemplate: '{:label} was added',
+    removedAnnouncementTemplate: '{:label} was removed',
 };
 
 /** Enums for layer position on screen. */
@@ -1088,7 +1366,7 @@ const Container$5 = styled.div `
     `
         width: 100%;
         height: 100vh;
-        background-color: var(--backdrop-color, #2681da80);
+        background-color: ${getThemeValue(THEME_NAME.BACKDROP_COLOR)};
         backdrop-filter: blur(0px);
         pointer-events: all;
     `}
@@ -1188,6 +1466,7 @@ class LayerManager {
             const layerConfig = Object.assign(Object.assign({}, defaultConfig), config);
             // Get the z-index for the new layer
             const currentIndex = layerConfig.alwaysOnTop ? 2147483647 : this.nextIndex++;
+            const className = layerConfig.alwaysOnTop ? 'nf-layer-manager-top' : 'nf-layer-manager';
             // Create a unique ID for tracking this layer
             const layerId = `nf-layer-manager-${currentIndex}`;
             const overlayClickHandler = () => {
@@ -1209,6 +1488,7 @@ class LayerManager {
                     React.useEffect(() => {
                         // Create the div element only once when component mounts
                         const div = document.createElement('div');
+                        div.setAttribute('class', className);
                         div.setAttribute('id', layerId);
                         document.body.appendChild(div);
                         // Add layer to stack
@@ -1223,8 +1503,67 @@ class LayerManager {
                         setTimeout(() => {
                             div.setAttribute('class', 'nf-layer-enter');
                         }, 10);
+                        // Track elements modified for accessibility
+                        const modifiedElements = [];
+                        let originalBodyOverflow = null;
+                        let originalBodyPosition = null;
+                        let originalBodyWidth = null;
+                        let originalBodyTop = null;
+                        let scrollY = 0;
+                        // Apply aria-hidden to siblings and body scroll lock for overlay modals
+                        if (layerConfig.overlay) {
+                            // Hide all body children except this layer portal, scripts, and styles
+                            const bodyChildren = Array.from(document.body.children);
+                            bodyChildren.forEach((child) => {
+                                if (child !== div &&
+                                    child.className !== 'nf-layer-manager-top' &&
+                                    child.tagName !== 'SCRIPT' &&
+                                    child.tagName !== 'STYLE') {
+                                    const hadAriaHidden = child.hasAttribute('aria-hidden');
+                                    const previousValue = child.getAttribute('aria-hidden');
+                                    // Only set aria-hidden if not already hidden
+                                    if (previousValue !== 'true') {
+                                        child.setAttribute('aria-hidden', 'true');
+                                        modifiedElements.push({
+                                            element: child,
+                                            hadAriaHidden,
+                                            previousValue,
+                                        });
+                                    }
+                                }
+                            });
+                            // Prevent body scroll on iOS
+                            scrollY = window.scrollY;
+                            originalBodyOverflow = document.body.style.overflow;
+                            originalBodyPosition = document.body.style.position;
+                            originalBodyWidth = document.body.style.width;
+                            originalBodyTop = document.body.style.top;
+                            document.body.style.overflow = 'hidden';
+                            document.body.style.position = 'fixed';
+                            document.body.style.width = '100%';
+                            document.body.style.top = `-${scrollY}px`;
+                        }
                         // Cleanup function - remove div when component unmounts
                         return () => {
+                            // Restore aria-hidden attributes
+                            modifiedElements.forEach(({ element, hadAriaHidden, previousValue }) => {
+                                if (document.body.contains(element)) {
+                                    if (hadAriaHidden && previousValue !== null) {
+                                        element.setAttribute('aria-hidden', previousValue);
+                                    }
+                                    else {
+                                        element.removeAttribute('aria-hidden');
+                                    }
+                                }
+                            });
+                            // Restore body scroll
+                            if (layerConfig.overlay) {
+                                document.body.style.overflow = originalBodyOverflow || '';
+                                document.body.style.position = originalBodyPosition || '';
+                                document.body.style.width = originalBodyWidth || '';
+                                document.body.style.top = originalBodyTop || '';
+                                window.scrollTo(0, scrollY);
+                            }
                             if (document.body.contains(div)) {
                                 document.body.removeChild(div);
                             }
@@ -1278,12 +1617,94 @@ const DialogContainer = styled(Card) `
 class Dialog extends React.Component {
     constructor() {
         super(...arguments);
+        this.lastFocusedElement = null;
+        this.dialogRef = React.createRef();
         this.state = {
             show: false,
             LayerComponent: undefined,
         };
+        /**
+         * Retrieves all focusable elements within the dialog.
+         */
+        this.getFocusableElements = () => {
+            if (!this.dialogRef.current)
+                return [];
+            return Array.from(this.dialogRef.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 dialog.
+         */
+        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 dialog opened.
+         */
+        this.restoreFocus = () => {
+            if (this.lastFocusedElement) {
+                const elementToBeFocused = this.lastFocusedElement;
+                this.lastFocusedElement = null;
+                setTimeout(() => {
+                    if (document.body.contains(elementToBeFocused)) {
+                        elementToBeFocused.focus();
+                    }
+                }, 100);
+            }
+        };
+        /**
+         * Callback ref to capture the Dialog DOM element.
+         * Triggers initial focus setting when the element mounts.
+         */
+        this.setDialogRef = (node) => {
+            this.dialogRef.current = node;
+            if (node) {
+                this.setInitialFocus(node);
+            }
+        };
+        /**
+         * Sets initial focus within the dialog.
+         * Tries to focus the header first, then the first interactive element, or falls back to the container.
+         */
+        this.setInitialFocus = (root) => {
+            const firstChild = root.firstElementChild;
+            if (firstChild) {
+                if (firstChild.getAttribute('tabindex') === null) {
+                    firstChild.setAttribute('tabindex', '-1');
+                }
+                firstChild.focus();
+                return;
+            }
+            const focusableElements = this.getFocusableElements();
+            if (focusableElements.length > 0) {
+                focusableElements[0].focus();
+            }
+            else {
+                root.focus();
+            }
+        };
         this.open = (closeCallback) => {
             const _a = this.props, { closeOnEsc, closeOnOverlayClick, children } = _a, rest = __rest(_a, ["closeOnEsc", "closeOnOverlayClick", "children"]);
+            // Save current focus
+            this.lastFocusedElement = document.activeElement;
             const [Component, closeFn] = LayerManager$1.renderLayer({
                 exitDelay: 300,
                 overlay: true,
@@ -1291,7 +1712,7 @@ class Dialog extends React.Component {
                 closeCallback: this.closeCallback,
                 closeOnOverlayClick,
                 position: LAYER_POSITION.DIALOG,
-                component: (jsxRuntime.jsx(DialogContainer, Object.assign({}, rest, { onClick: (e) => e.stopPropagation(), elevated: true, children: children }))),
+                component: (jsxRuntime.jsx(DialogContainer, Object.assign({}, rest, { ref: this.setDialogRef, role: "dialog", "aria-modal": "true", tabIndex: -1, onKeyDown: this.handleKeyDown, onClick: (e) => e.stopPropagation(), elevated: true, children: children }))),
             });
             this.closeDialog = closeFn;
             this.setState({
@@ -1306,6 +1727,7 @@ class Dialog extends React.Component {
         };
         this.closeCallback = (resp) => {
             var _a;
+            this.restoreFocus();
             this.setState({
                 show: false,
                 LayerComponent: undefined,
@@ -1337,6 +1759,7 @@ Dialog.defaultProps = {
     closeOnOverlayClick: true,
 };
 
+let dialogCounter = 0;
 class AlertDialog extends React.Component {
     constructor() {
         super(...arguments);
@@ -1350,7 +1773,9 @@ class AlertDialog extends React.Component {
         this.close = () => this.dialog.current.close();
     }
     render() {
-        return (jsxRuntime.jsxs(Dialog, Object.assign({}, this.props.dialogProps, { ref: this.dialog, closeOnEsc: false, closeOnOverlayClick: true, children: [this.props.header && jsxRuntime.jsx(Header$1, { children: this.props.header }), jsxRuntime.jsx(Body$1, { children: this.props.body }), jsxRuntime.jsx(Footer$1, { children: jsxRuntime.jsx(Button$2, { onClick: this.close, children: this.props.buttonText }) })] })));
+        const titleId = `nfui-alert-dialog-${dialogCounter++}-title`;
+        const descriptionId = `nfui-alert-dialog-${dialogCounter++}-description`;
+        return (jsxRuntime.jsxs(Dialog, Object.assign({}, this.props.dialogProps, { role: "alertdialog", "aria-labelledby": titleId, "aria-describedby": descriptionId, ref: this.dialog, closeOnEsc: false, closeOnOverlayClick: false, children: [this.props.header && jsxRuntime.jsx(Header$1, { id: titleId, children: this.props.header }), jsxRuntime.jsx(Body$1, { id: descriptionId, children: this.props.body }), jsxRuntime.jsx(Footer$1, { children: jsxRuntime.jsx(StyledButton, { onClick: this.close, children: this.props.buttonText }) })] })));
     }
 }
 AlertDialog.propTypes = {
@@ -1389,7 +1814,7 @@ class ConfirmDialog extends React.Component {
     }
     render() {
         const { header, body, yesText, noText, dialogProps } = this.props;
-        return (jsxRuntime.jsxs(Dialog, Object.assign({}, dialogProps, { ref: this.dialog, closeOnEsc: false, closeOnOverlayClick: false, children: [header && jsxRuntime.jsx(Header$1, { children: header }), jsxRuntime.jsx(Body$1, { children: body }), jsxRuntime.jsxs(Footer$1, { children: [jsxRuntime.jsx(Button$2, { onClick: this.cancel, children: noText }), jsxRuntime.jsx(ActionButton, { onClick: this.confirm, children: yesText })] })] })));
+        return (jsxRuntime.jsxs(Dialog, Object.assign({}, dialogProps, { ref: this.dialog, closeOnEsc: false, closeOnOverlayClick: false, children: [header && jsxRuntime.jsx(Header$1, { children: header }), jsxRuntime.jsx(Body$1, { children: body }), jsxRuntime.jsxs(Footer$1, { children: [jsxRuntime.jsx(StyledButton, { onClick: this.cancel, children: noText }), jsxRuntime.jsx(ActionButton, { onClick: this.confirm, children: yesText })] })] })));
     }
 }
 ConfirmDialog.propTypes = {
@@ -1412,7 +1837,6 @@ ConfirmDialog.defaultProps = {
 const Label$5 = styled.label `
     display: inline-flex;
     flex-direction: column;
-    flex: 1;
     position: relative;
     margin: 10px 5px;
 `;
@@ -1424,46 +1848,46 @@ const TextField$1 = styled.input `
     min-height: 30px;
     width: 250px;
     border-radius: 3px;
-    border: 1px solid var(--border-color, ${constants.BORDER_COLOR});
+    border: 1px solid ${getThemeValue(THEME_NAME.BORDER_COLOR)};
     display: inline-block;
-    background-color: var(--background, ${constants.BACKGROUND});
+    background-color: ${getThemeValue(THEME_NAME.BACKGROUND)};
 
     /** Focused */
     &:focus,
     &:active {
-        border-color: var(--primary, ${constants.PRIMARY});
-        box-shadow: 0 0 0 4px var(--primary-light, ${constants.PRIMARY_LIGHT});
+        border-color: ${getThemeValue(THEME_NAME.PRIMARY)};
+        box-shadow: 0 0 0 4px ${getThemeValue(THEME_NAME.PRIMARY_LIGHT)};
     }
 
     &:focus + span,
     &:active + span {
-        color: var(--primary, ${constants.PRIMARY});
+        color: ${getThemeValue(THEME_NAME.PRIMARY)};
     }
 
     /** Disabled */
     &:disabled {
-        border-color: var(--disabled-border, ${constants.DISABLED_BORDER});
-        background-color: var(--disabled-background, ${constants.DISABLED_BACKGROUND});
+        border-color: ${getThemeValue(THEME_NAME.DISABLED_BORDER)};
+        background-color: ${getThemeValue(THEME_NAME.DISABLED_BACKGROUND)};
     }
 
     &:disabled + span {
-        color: #777;
+        color: ${getThemeValue(THEME_NAME.DISABLED)};
     }
 
     /** Invalid */
     &:focus:invalid {
-        border-color: var(--error, ${constants.ERROR});
-        box-shadow: 0 0 0 4px var(--error-light, ${constants.ERROR_LIGHT});
+        border-color: ${getThemeValue(THEME_NAME.ERROR)};
+        box-shadow: 0 0 0 4px ${getThemeValue(THEME_NAME.ERROR_LIGHT)};
     }
 
     ${(props) => props.touched
     ? `
     &:invalid {
-        border-color: var(--error, ${constants.ERROR});
+        border-color: ${getThemeValue(THEME_NAME.ERROR)};
     }
 
     &:invalid + span {
-        color: var(--error, ${constants.ERROR});
+        color: ${getThemeValue(THEME_NAME.ERROR)};
     }
     `
     : ''}
@@ -1471,10 +1895,10 @@ const TextField$1 = styled.input `
     /** Error */
     ${(props) => props.errorText
     ? `
-    border-color: var(--error, ${constants.ERROR});
+    border-color: ${getThemeValue(THEME_NAME.ERROR)};
 
     & + span {
-        color: var(--error, ${constants.ERROR});
+        color: ${getThemeValue(THEME_NAME.ERROR)};
     }
     `
     : ''}
@@ -1483,7 +1907,7 @@ const TextField$1 = styled.input `
     &:required + span:after {
         content: '*';
         margin-left: 2px;
-        color: var(--error, ${constants.ERROR});
+        color: ${getThemeValue(THEME_NAME.ERROR)};
     }
 
     /** Label Animation */
@@ -1501,7 +1925,7 @@ const TextField$1 = styled.input `
     ? `
     & + span {
         top: -8px;
-        background: var(--background, ${constants.BACKGROUND});
+        background: ${getThemeValue(THEME_NAME.BACKGROUND)};
         font-size: 12px;
         line-height: 14px;
     }
@@ -1510,21 +1934,27 @@ const TextField$1 = styled.input `
 
     &:focus + span, &:placeholder-shown + span {
         top: -8px;
-        background: var(--background, ${constants.BACKGROUND});
+        background: ${getThemeValue(THEME_NAME.BACKGROUND)};
         font-size: 12px;
         line-height: 14px;
     }
 `;
 const ErrorContainer$3 = styled.div `
-    color: var(--error, ${constants.ERROR});
+    color: ${getThemeValue(THEME_NAME.ERROR)};
     padding-top: 3px;
     font-size: 12px;
     line-height: 14px;
     margin-left: 3px;
 `;
-const Input$4 = React.forwardRef((props, ref) => {
+const Input$2 = React.forwardRef((props, ref) => {
     const [touched, setTouched] = React.useState(false);
     const [value, setValue] = React.useState(props.value || '');
+    const errorId = React.useId();
+    React.useEffect(() => {
+        if (props.value !== undefined) {
+            setValue(props.value);
+        }
+    }, [props.value]);
     const handleFocus = (e) => {
         setTouched(true);
         if (props.onFocus) {
@@ -1540,10 +1970,10 @@ const Input$4 = React.forwardRef((props, ref) => {
             setValue(e.target.value);
         }
     };
-    return (jsxRuntime.jsxs(Label$5, { children: [jsxRuntime.jsx(TextField$1, Object.assign({}, props, { ref: ref, value: value, onChange: onChangeHandler, onFocus: handleFocus, touched: touched })), jsxRuntime.jsx("span", { children: props.label }), props.errorText && jsxRuntime.jsx(ErrorContainer$3, { children: props.errorText })] }));
+    return (jsxRuntime.jsxs(Label$5, { children: [jsxRuntime.jsx(TextField$1, Object.assign({}, props, { ref: ref, value: value, onChange: onChangeHandler, onFocus: handleFocus, touched: touched, "aria-invalid": !!props.errorText, "aria-required": props.required, "aria-describedby": props.errorText ? errorId : undefined })), jsxRuntime.jsx("span", { children: props.label }), props.errorText && jsxRuntime.jsx(ErrorContainer$3, { id: errorId, children: props.errorText })] }));
 });
-Input$4.displayName = 'Input';
-Input$4.propTypes = {
+Input$2.displayName = 'Input';
+Input$2.propTypes = {
     /** Label for the field */
     label: PropTypes.string,
     /** Error text to be shown below the field */
@@ -1553,7 +1983,6 @@ Input$4.propTypes = {
 const Label$4 = styled.label `
     display: inline-flex;
     flex-direction: column;
-    flex: 1;
     position: relative;
     margin: 10px 5px;
 `;
@@ -1564,46 +1993,46 @@ const TextField = styled.textarea `
     min-height: 150px;
     min-width: 250px;
     border-radius: 3px;
-    border: 1px solid var(--border-color, ${constants.BORDER_COLOR});
+    border: 1px solid ${getThemeValue(THEME_NAME.BORDER_COLOR)};
     display: inline-block;
-    background-color: var(--background, ${constants.BACKGROUND});
+    background-color: ${getThemeValue(THEME_NAME.BACKGROUND)};
 
     /** Focused */
     &:focus,
     &:active {
-        border-color: var(--primary, ${constants.PRIMARY});
-        box-shadow: 0 0 0 4px var(--primary, ${constants.PRIMARY_LIGHT});
+        border-color: ${getThemeValue(THEME_NAME.PRIMARY)};
+        box-shadow: 0 0 0 4px ${getThemeValue(THEME_NAME.PRIMARY_LIGHT)};
     }
 
     &:focus + span,
     &:active + span {
-        color: var(--primary, ${constants.PRIMARY});
+        color: ${getThemeValue(THEME_NAME.PRIMARY)};
     }
 
     /** Disabled */
     &:disabled {
-        border-color: var(--disabled-border, ${constants.DISABLED_BORDER});
-        background-color: var(--disabled-background, ${constants.DISABLED_BACKGROUND});
+        border-color: ${getThemeValue(THEME_NAME.DISABLED_BORDER)};
+        background-color: ${getThemeValue(THEME_NAME.DISABLED_BACKGROUND)};
     }
 
     &:disabled + span {
-        color: var(--disabled, ${constants.DISABLED});
+        color: ${getThemeValue(THEME_NAME.DISABLED)};
     }
 
     /** Invalid */
     &:focus:invalid {
-        border-color: var(--error, ${constants.ERROR});
-        box-shadow: 0 0 0 4px var(--error-light, ${constants.ERROR_LIGHT});
+        border-color: ${getThemeValue(THEME_NAME.ERROR)};
+        box-shadow: 0 0 0 4px ${getThemeValue(THEME_NAME.ERROR_LIGHT)};
     }
 
     ${(props) => props.touched
     ? `
     &:invalid {
-        border-color: var(--error, ${constants.ERROR});
+        border-color: ${getThemeValue(THEME_NAME.ERROR)};
     }
 
     &:invalid + span {
-        color: var(--error, ${constants.ERROR});
+        color: ${getThemeValue(THEME_NAME.ERROR)};
     }
     `
     : ''}
@@ -1611,10 +2040,10 @@ const TextField = styled.textarea `
     /** Error */
     ${(props) => props.errorText
     ? `
-    border-color: var(--error, ${constants.ERROR});
+    border-color: ${getThemeValue(THEME_NAME.ERROR)};
 
     & + span {
-        color: var(--error, ${constants.ERROR});
+        color: ${getThemeValue(THEME_NAME.ERROR)};
     }
     `
     : ''}
@@ -1623,7 +2052,7 @@ const TextField = styled.textarea `
     &:required + span:after {
         content: '*';
         margin-left: 2px;
-        color: var(--error, ${constants.ERROR});
+        color: ${getThemeValue(THEME_NAME.ERROR)};
     }
 
     /** Label Animation */
@@ -1641,7 +2070,7 @@ const TextField = styled.textarea `
     ? `
     & + span {
         top: -8px;
-        background: var(--background, ${constants.BACKGROUND});
+        background: ${getThemeValue(THEME_NAME.BACKGROUND)};
         font-size: 12px;
         line-height: 14px;
     }
@@ -1650,13 +2079,13 @@ const TextField = styled.textarea `
 
     &:focus + span, &:placeholder-shown + span {
         top: -8px;
-        background: var(--background, ${constants.BACKGROUND});
+        background: ${getThemeValue(THEME_NAME.BACKGROUND)};
         font-size: 12px;
         line-height: 14px;
     }
 `;
 const ErrorContainer$2 = styled.div `
-    color: var(--error, ${constants.ERROR});
+    color: ${getThemeValue(THEME_NAME.ERROR)};
     padding-top: 3px;
     font-size: 12px;
     line-height: 14px;
@@ -1665,6 +2094,12 @@ const ErrorContainer$2 = styled.div `
 function TextArea(props) {
     const [touched, setTouched] = React.useState(false);
     const [value, setValue] = React.useState(props.value || '');
+    const errorId = React.useId();
+    React.useEffect(() => {
+        if (props.value !== undefined) {
+            setValue(props.value);
+        }
+    }, [props.value]);
     const handleFocus = (e) => {
         setTouched(true);
         if (props.onFocus) {
@@ -1680,7 +2115,7 @@ function TextArea(props) {
             setValue(e.target.value);
         }
     };
-    return (jsxRuntime.jsxs(Label$4, { children: [jsxRuntime.jsx(TextField, Object.assign({}, props, { value: value, onChange: onChangeHandler, onFocus: handleFocus, touched: touched })), jsxRuntime.jsx("span", { children: props.label }), props.errorText && jsxRuntime.jsx(ErrorContainer$2, { children: props.errorText })] }));
+    return (jsxRuntime.jsxs(Label$4, { children: [jsxRuntime.jsx(TextField, Object.assign({}, props, { value: value, onChange: onChangeHandler, onFocus: handleFocus, touched: touched, "aria-invalid": !!props.errorText, "aria-required": props.required, "aria-describedby": props.errorText ? errorId : undefined })), jsxRuntime.jsx("span", { children: props.label }), props.errorText && jsxRuntime.jsx(ErrorContainer$2, { id: errorId, children: props.errorText })] }));
 }
 TextArea.propTypes = {
     /** Label for the field */
@@ -1692,7 +2127,6 @@ TextArea.propTypes = {
 const Label$3 = styled.label `
     display: inline-flex;
     flex-direction: column;
-    flex: 1;
     position: relative;
     margin: 10px 5px;
     pointer-events: none;
@@ -1710,48 +2144,48 @@ const SelectField = styled.select `
     min-height: 32px;
     width: 268px;
     border-radius: 3px;
-    border: 1px solid var(--border-color, ${constants.BORDER_COLOR});
+    border: 1px solid ${getThemeValue(THEME_NAME.BORDER_COLOR)};
     display: inline-block;
-    background-color: var(--background, ${constants.BACKGROUND});
+    background-color: ${getThemeValue(THEME_NAME.BACKGROUND)};
     pointer-events: auto;
     appearance: none;
 
     /** Focused */
     &:focus,
     &:active {
-        border-color: var(--primary, ${constants.PRIMARY});
-        box-shadow: 0 0 0 4px var(--primary, ${constants.PRIMARY_LIGHT});
+        border-color: ${getThemeValue(THEME_NAME.PRIMARY)};
+        box-shadow: 0 0 0 4px ${getThemeValue(THEME_NAME.PRIMARY_LIGHT)};
     }
 
     &:focus ~ span,
     &:active ~ span {
-        color: var(--primary, ${constants.PRIMARY});
+        color: ${getThemeValue(THEME_NAME.PRIMARY)};
     }
 
     /** Disabled */
     &:disabled {
-        border-color: var(--disabled-border, ${constants.DISABLED_BORDER});
-        background-color: var(--disabled-background, ${constants.DISABLED_BACKGROUND});
+        border-color: ${getThemeValue(THEME_NAME.DISABLED_BORDER)};
+        background-color: ${getThemeValue(THEME_NAME.DISABLED_BACKGROUND)};
     }
 
     &:disabled ~ span {
-        color: var(--disabled, ${constants.DISABLED});
+        color: ${getThemeValue(THEME_NAME.DISABLED)};
     }
 
     /** Invalid */
     &:focus:invalid {
-        border-color: var(--error, ${constants.ERROR});
-        box-shadow: 0 0 0 4px var(--error-light, ${constants.ERROR_LIGHT});
+        border-color: ${getThemeValue(THEME_NAME.ERROR)};
+        box-shadow: 0 0 0 4px ${getThemeValue(THEME_NAME.ERROR_LIGHT)};
     }
 
     ${(props) => props.touched
     ? `
     &:invalid {
-        border-color: var(--error, ${constants.ERROR});
+        border-color: ${getThemeValue(THEME_NAME.ERROR)};
     }
 
     &:invalid ~ span {
-        color: var(--error, ${constants.ERROR});
+        color: ${getThemeValue(THEME_NAME.ERROR)};
     }
     `
     : ''}
@@ -1759,10 +2193,10 @@ const SelectField = styled.select `
     /** Error */
     ${(props) => props.errorText
     ? `
-    border-color: var(--error, ${constants.ERROR});
+    border-color: ${getThemeValue(THEME_NAME.ERROR)};
 
     & ~ span {
-        color: var(--error, ${constants.ERROR});
+        color: ${getThemeValue(THEME_NAME.ERROR)};
     }
     `
     : ''}
@@ -1771,7 +2205,7 @@ const SelectField = styled.select `
     &:required + span:after {
         content: '*';
         margin-left: 2px;
-        color: var(--error, ${constants.ERROR});
+        color: ${getThemeValue(THEME_NAME.ERROR)};
     }
 
     /** Label Animation */
@@ -1789,7 +2223,7 @@ const SelectField = styled.select `
     ? `
     & + span {
         top: -8px;
-        background: var(--background, ${constants.BACKGROUND});
+        background: ${getThemeValue(THEME_NAME.BACKGROUND)};
         font-size: 12px;
         line-height: 14px;
     }
@@ -1798,13 +2232,13 @@ const SelectField = styled.select `
 
     &:focus + span, &:placeholder-shown + span {
         top: -8px;
-        background: var(--background, ${constants.BACKGROUND});
+        background: ${getThemeValue(THEME_NAME.BACKGROUND)};
         font-size: 12px;
         line-height: 14px;
     }
 `;
 const ErrorContainer$1 = styled.div `
-    color: var(--error, ${constants.ERROR});
+    color: ${getThemeValue(THEME_NAME.ERROR)};
     padding-top: 3px;
     font-size: 12px;
     line-height: 14px;
@@ -1818,6 +2252,12 @@ const ArrowContainer$1 = styled.span `
 function Select(props) {
     const [touched, setTouched] = React.useState(false);
     const [value, setValue] = React.useState(props.value || '');
+    const errorId = React.useId();
+    React.useEffect(() => {
+        if (props.value !== undefined) {
+            setValue(props.value);
+        }
+    }, [props.value]);
     const handleFocus = (e) => {
         setTouched(true);
         if (props.onFocus) {
@@ -1833,7 +2273,7 @@ function Select(props) {
             setValue(e.target.value);
         }
     };
-    return (jsxRuntime.jsxs(Label$3, { children: [jsxRuntime.jsxs(SelectField, Object.assign({}, props, { multiple: false, value: value, onChange: onChangeHandler, onFocus: handleFocus, touched: touched, children: [jsxRuntime.jsx("option", {}), props.children] })), jsxRuntime.jsx("span", { children: props.label }), jsxRuntime.jsx(ArrowContainer$1, { children: jsxRuntime.jsx(ExpandMore, {}) }), props.errorText && jsxRuntime.jsx(ErrorContainer$1, { children: props.errorText })] }));
+    return (jsxRuntime.jsxs(Label$3, { children: [jsxRuntime.jsxs(SelectField, Object.assign({}, props, { multiple: false, value: value, onChange: onChangeHandler, onFocus: handleFocus, touched: touched, "aria-invalid": !!props.errorText, "aria-required": props.required, "aria-describedby": props.errorText ? errorId : undefined, children: [jsxRuntime.jsx("option", {}), props.children] })), jsxRuntime.jsx("span", { children: props.label }), jsxRuntime.jsx(ArrowContainer$1, { "aria-hidden": "true", children: jsxRuntime.jsx(ExpandMore, {}) }), props.errorText && jsxRuntime.jsx(ErrorContainer$1, { id: errorId, children: props.errorText })] }));
 }
 Select.propTypes = {
     /** Label for the field */
@@ -1845,99 +2285,104 @@ Select.propTypes = {
 const Label$2 = styled.label `
     margin: 5px 0;
     position: relative;
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
 `;
-const Input$3 = styled.input `
-    appearance: none;
+const StyledCheckmark = styled.span `
+    width: 16px;
+    height: 16px;
+    border: 1px solid ${getThemeValue(THEME_NAME.BORDER_COLOR)};
+    display: inline-block;
+    border-radius: 3px;
+    margin-right: 5px;
+    background-color: ${getThemeValue(THEME_NAME.BACKGROUND)};
+    transition: all 0.3s ease;
     position: relative;
-    margin: 0;
-
-    &::before {
-        content: '';
-        width: 16px;
-        height: 16px;
-        border: 1px solid var(--border-color, ${constants.BORDER_COLOR});
-        display: inline-block;
-        border-radius: 3px;
-        vertical-align: bottom;
-        margin: 0 5px;
-        text-align: center;
-        line-height: 16px;
-        background-color: var(--background, ${constants.BACKGROUND});
-        transition: background-color 0.3s ease;
-    }
+    flex-shrink: 0;
 
     &::after {
         content: '';
         width: 3px;
         height: 10px;
-        border-right: 2px solid #fff;
-        border-bottom: 2px solid #fff;
-        transform: translate(-16px, 1px);
-        opacity: 0;
-        transition: transform 0.3s ease;
+        border-right: 2px solid ${getThemeValue(THEME_NAME.TEXT_COLOR_LIGHT)};
+        border-bottom: 2px solid ${getThemeValue(THEME_NAME.TEXT_COLOR_LIGHT)};
         position: absolute;
+        top: 1px;
+        left: 6px;
+        opacity: 0;
+        transform: rotate(45deg) scale(0);
+        transition: all 0.2s ease;
     }
+`;
+const HiddenInput$1 = styled.input `
+    opacity: 0;
+    width: 0;
+    height: 0;
+    position: absolute;
+    margin: 0;
 
     /** checked */
-    &:checked::before {
-        content: '';
-        background-color: var(--primary, ${constants.PRIMARY});
-        border-color: var(--primary, ${constants.PRIMARY});
-        color: #fff;
+    &:checked + ${StyledCheckmark} {
+        background-color: ${getThemeValue(THEME_NAME.PRIMARY)};
+        border-color: ${getThemeValue(THEME_NAME.PRIMARY)};
     }
 
-    &:checked::after {
+    &:checked + ${StyledCheckmark}::after {
         opacity: 1;
-        transform: translate(-16px, 2px) rotate(45deg);
+        transform: rotate(45deg) scale(1);
     }
 
     /** indeterminate */
-    &:indeterminate::before {
-        content: '';
-        background-color: var(--primary, ${constants.PRIMARY});
-        border-color: var(--primary, ${constants});
-        color: #fff;
+    &:indeterminate + ${StyledCheckmark} {
+        background-color: ${getThemeValue(THEME_NAME.PRIMARY)};
+        border-color: ${getThemeValue(THEME_NAME.PRIMARY)};
     }
 
-    &:indeterminate::after {
-        width: 0;
+    &:indeterminate + ${StyledCheckmark}::after {
         opacity: 1;
-        transform: translate(-15px, 3px) rotate(90deg);
+        height: 0;
+        width: 8px;
+        border-right: none;
+        border-bottom: 2px solid ${getThemeValue(THEME_NAME.TEXT_COLOR_LIGHT)};
+        transform: rotate(0deg) scale(1);
+        top: 7px;
+        left: 4px;
     }
 
     /** active and focus */
-    &:enabled:active::before,
-    &:focus::before {
-        border-color: var(--primary, ${constants.PRIMARY});
-        box-shadow: 0 0 0 3px var(--primary, ${constants.PRIMARY_LIGHT});
+    &:enabled:active + ${StyledCheckmark}, &:focus + ${StyledCheckmark} {
+        border-color: ${getThemeValue(THEME_NAME.PRIMARY)};
+        box-shadow: 0 0 0 3px ${getThemeValue(THEME_NAME.PRIMARY_LIGHT)};
     }
 
-    &:enabled:active + span,
-    &:focus + span {
-        color: var(--primary, ${constants.PRIMARY});
+    &:enabled:active ~ span,
+    &:focus ~ span {
+        color: ${getThemeValue(THEME_NAME.PRIMARY)};
     }
 
     /** hover */
-    &:enabled:hover::before {
-        border-color: var(--primary, ${constants.PRIMARY});
+    &:enabled:hover + ${StyledCheckmark} {
+        border-color: ${getThemeValue(THEME_NAME.PRIMARY)};
     }
 
-    &:enabled:hover + span {
-        color: var(--primary, ${constants.PRIMARY});
+    &:enabled:hover ~ span {
+        color: ${getThemeValue(THEME_NAME.PRIMARY)};
     }
 
     /** disabled */
-    &:disabled::before {
-        border-color: #aaa;
+    &:disabled + ${StyledCheckmark} {
+        border-color: ${getThemeValue(THEME_NAME.DISABLED_BORDER)};
+        cursor: not-allowed;
     }
 
-    &:disabled + span {
-        color: #aaa;
+    &:disabled ~ span {
+        color: ${getThemeValue(THEME_NAME.DISABLED)};
+        cursor: not-allowed;
     }
 
-    &:checked:disabled::before,
-    &:indeterminate:disabled::before {
-        background-color: #aaa;
+    &:checked:disabled + ${StyledCheckmark}, &:indeterminate:disabled + ${StyledCheckmark} {
+        background-color: ${getThemeValue(THEME_NAME.DISABLED)};
     }
 `;
 function Checkbox(props) {
@@ -1948,7 +2393,7 @@ function Checkbox(props) {
             }
         }
     }, [props.indeterminate]);
-    return (jsxRuntime.jsxs(Label$2, { children: [jsxRuntime.jsx(Input$3, Object.assign({}, props, { ref: ref, type: "checkbox" })), jsxRuntime.jsx("span", { children: props.label })] }));
+    return (jsxRuntime.jsxs(Label$2, { children: [jsxRuntime.jsx(HiddenInput$1, Object.assign({}, props, { ref: ref, type: "checkbox", "aria-checked": props.indeterminate ? 'mixed' : props.checked })), jsxRuntime.jsx(StyledCheckmark, {}), jsxRuntime.jsx("span", { children: props.label })] }));
 }
 Checkbox.propTypes = {
     /** Label for the field */
@@ -1966,7 +2411,10 @@ const Switch = styled.label `
     display: inline-flex;
     margin: 5px 0;
 `;
-const Input$2 = styled.input `
+const Input$1 = styled.input `
+    position: absolute;
+    width: 0;
+    height: 0;
     appearance: none;
     margin: 0;
 
@@ -1975,7 +2423,7 @@ const Input$2 = styled.input `
         cursor: pointer;
         width: 30px;
         height: 18px;
-        background-color: ${constants.LIGHT_GREY};
+        background-color: ${getThemeValue(THEME_NAME.LIGHT_GREY)};
         transition: 0.4s;
         border-radius: 10px;
         padding: 0 3px;
@@ -1988,51 +2436,51 @@ const Input$2 = styled.input `
         width: 14px;
         left: 1px;
         top: 1px;
-        border: 1px solid var(--disabled-border, ${constants.DISABLED_BORDER});
+        border: 1px solid ${getThemeValue(THEME_NAME.DISABLED_BORDER)};
         border-radius: 50%;
-        background-color: var(--background, ${constants.BACKGROUND});
+        background-color: ${getThemeValue(THEME_NAME.BACKGROUND)};
         transition: 0.4s;
     }
 
     /* checked */
     &:checked + span {
-        background-color: var(--primary, ${constants.PRIMARY_LIGHT});
+        background-color: ${getThemeValue(THEME_NAME.PRIMARY_LIGHT)};
     }
 
     &:checked + span:before {
         transform: translateX(18px);
-        border-color: var(--primary, ${constants.PRIMARY});
+        border-color: ${getThemeValue(THEME_NAME.PRIMARY)};
     }
 
     /* focus */
     &:enabled:focus + span:before {
-        box-shadow: 0 0 0 3px var(--primary, ${constants.PRIMARY_LIGHT});
-        border-color: var(--primary, ${constants.PRIMARY});
+        box-shadow: 0 0 0 3px ${getThemeValue(THEME_NAME.PRIMARY_LIGHT)};
+        border-color: ${getThemeValue(THEME_NAME.PRIMARY)};
     }
 
     /* hover */
     &:enabled:hover ~ span {
         cursor: pointer;
-        color: var(--primary, ${constants.PRIMARY});
+        color: ${getThemeValue(THEME_NAME.PRIMARY)};
     }
 
     /* disabled */
     &:disabled ~ span {
-        color: var(--disabled-border, ${constants.DISABLED_BORDER});
+        color: ${getThemeValue(THEME_NAME.DISABLED_BORDER)};
     }
 
     &:disabled + span {
-        background-color: ${constants.LIGHT_GREY};
+        background-color: ${getThemeValue(THEME_NAME.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});
+        background-color: ${getThemeValue(THEME_NAME.BORDER_LIGHT_COLOR)};
+        border-color: ${getThemeValue(THEME_NAME.DISABLED_BORDER)};
     }
 `;
 function Toggle(props) {
-    return (jsxRuntime.jsxs(Switch, { children: [jsxRuntime.jsx(Input$2, Object.assign({}, props, { type: "checkbox" })), jsxRuntime.jsx("span", {}), jsxRuntime.jsx("span", { children: props.label })] }));
+    return (jsxRuntime.jsxs(Switch, { children: [jsxRuntime.jsx(Input$1, Object.assign({}, props, { type: "checkbox", role: "switch", "aria-checked": props.checked })), jsxRuntime.jsx("span", {}), jsxRuntime.jsx("span", { children: props.label })] }));
 }
 Toggle.propTypes = {
     /** Label for the field */
@@ -2043,73 +2491,89 @@ const Label$1 = styled.label `
     display: inline-flex;
     align-items: center;
     margin: 5px 0;
+    cursor: pointer;
+    position: relative;
 `;
-const Input$1 = styled.input `
-    appearance: none;
-    margin: 0;
+const StyledRadio = styled.span `
+    width: 16px;
+    height: 16px;
+    margin-right: 5px;
+    border: 1px solid ${getThemeValue(THEME_NAME.BORDER_COLOR)};
+    border-radius: 50%;
+    display: block;
+    transition: background-color 0.3s ease;
+    position: relative;
+    flex-shrink: 0;
 
-    &::before {
-        content: ' ';
-        width: 16px;
-        height: 16px;
-        margin: 0 5px;
-        border: 1px solid var(--border-color, ${constants.BORDER_COLOR});
+    &::after {
+        content: '';
+        width: 100%;
+        height: 100%;
         border-radius: 50%;
-        display: block;
-        transition: background-color 0.3s ease;
+        position: absolute;
+        top: 0;
+        left: 0;
+        box-shadow: inset 0 0 0 3px ${getThemeValue(THEME_NAME.BACKGROUND)};
+        opacity: 0;
+        transition: opacity 0.2s ease;
     }
+`;
+const HiddenInput = styled.input `
+    opacity: 0;
+    width: 0;
+    height: 0;
+    position: absolute;
+    margin: 0;
 
     /* checked */
-    &:checked::before {
-        border: 1px solid var(--primary, ${constants.PRIMARY});
-        background-color: var(--primary, ${constants.PRIMARY});
-        box-shadow: inset 0 0 0 3px var(--background, ${constants.BACKGROUND});
+    &:checked + ${StyledRadio} {
+        border-color: ${getThemeValue(THEME_NAME.PRIMARY)};
+        background-color: ${getThemeValue(THEME_NAME.PRIMARY)};
+    }
+
+    &:checked + ${StyledRadio}::after {
+        opacity: 1;
     }
 
     /* focus */
-    &:enabled:focus::before {
-        border: 1px solid var(--primary, ${constants.PRIMARY});
-        box-shadow: 0 0 0 3px var(--primary, ${constants.PRIMARY_LIGHT});
-        cursor: pointer;
+    &:enabled:focus + ${StyledRadio} {
+        border-color: ${getThemeValue(THEME_NAME.PRIMARY)};
+        box-shadow: 0 0 0 3px ${getThemeValue(THEME_NAME.PRIMARY_LIGHT)};
     }
 
-    &:enabled:checked:focus::before {
-        border: 1px solid var(--primary, ${constants.PRIMARY});
-        box-shadow:
-            0 0 0 3px var(--primary, ${constants.PRIMARY_LIGHT}),
-            inset 0 0 0 3px var(--background, ${constants.BACKGROUND});
-        cursor: pointer;
+    &:enabled:checked:focus + ${StyledRadio} {
+        border-color: ${getThemeValue(THEME_NAME.PRIMARY)};
+        box-shadow: 0 0 0 3px ${getThemeValue(THEME_NAME.PRIMARY_LIGHT)};
     }
 
     /* hover */
-    &:enabled:hover::before {
-        border: 1px solid var(--primary, ${constants.PRIMARY});
-        cursor: pointer;
+    &:enabled:hover + ${StyledRadio} {
+        border-color: ${getThemeValue(THEME_NAME.PRIMARY)};
     }
 
-    &:enabled:hover + span {
-        color: var(--primary, ${constants.PRIMARY});
-        cursor: pointer;
+    &:enabled:hover ~ span {
+        color: ${getThemeValue(THEME_NAME.PRIMARY)};
     }
 
     /* disabled */
-    &:disabled::before {
-        border: 1px solid var(--disabled-border, ${constants.DISABLED_BORDER});
-        background-color: var(--light-grey, ${constants.LIGHT_GREY});
+    &:disabled + ${StyledRadio} {
+        border-color: ${getThemeValue(THEME_NAME.DISABLED_BORDER)};
+        background-color: ${getThemeValue(THEME_NAME.LIGHT_GREY)};
+        cursor: not-allowed;
     }
 
-    &:disabled:checked::before {
-        border: 1px solid var(--disabled-border, ${constants.DISABLED_BORDER});
-        background-color: var(--disabled-border, ${constants.DISABLED_BORDER});
-        box-shadow: inset 0 0 0 3px var(--background, ${constants.BACKGROUND});
+    &:disabled:checked + ${StyledRadio} {
+        border-color: ${getThemeValue(THEME_NAME.DISABLED_BORDER)};
+        background-color: ${getThemeValue(THEME_NAME.DISABLED_BORDER)};
     }
 
-    &:disabled + span {
-        color: var(--disabled-border, ${constants.DISABLED_BORDER});
+    &:disabled ~ span {
+        color: ${getThemeValue(THEME_NAME.DISABLED_BORDER)};
+        cursor: not-allowed;
     }
 `;
 function Radio(props) {
-    return (jsxRuntime.jsxs(Label$1, { children: [jsxRuntime.jsx(Input$1, Object.assign({}, props, { type: "radio" })), jsxRuntime.jsx("span", { children: props.label })] }));
+    return (jsxRuntime.jsxs(Label$1, { children: [jsxRuntime.jsx(HiddenInput, Object.assign({}, props, { type: "radio" })), jsxRuntime.jsx(StyledRadio, {}), jsxRuntime.jsx("span", { children: props.label })] }));
 }
 Radio.propTypes = {
     /** Label for the field */
@@ -2122,37 +2586,37 @@ const Input = styled.input `
     width: 0;
 
     & + span {
-        color: var(--primary, ${constants.PRIMARY});
+        color: ${getThemeValue(THEME_NAME.PRIMARY)};
         padding: 6px 12px;
         border: none;
-        border: 1px solid var(--primary, ${constants.PRIMARY});
+        border: 1px solid ${getThemeValue(THEME_NAME.PRIMARY)};
         cursor: pointer;
         margin-right: -1px;
         line-height: 18px;
     }
 
     &:enabled:focus + span {
-        box-shadow: 0 0 0 4px var(--primary, ${constants.PRIMARY_LIGHT});
+        box-shadow: 0 0 0 4px ${getThemeValue(THEME_NAME.PRIMARY_LIGHT)};
     }
 
     &:enabled:hover + span {
-        background-color: var(--primary, ${constants.PRIMARY_LIGHT});
-        color: #fff;
+        background-color: ${getThemeValue(THEME_NAME.PRIMARY_LIGHT)};
+        color: ${getThemeValue(THEME_NAME.TEXT_COLOR_LIGHT)};
     }
 
     &:enabled:checked + span {
-        background-color: var(--primary, ${constants.PRIMARY});
-        color: #fff;
+        background-color: ${getThemeValue(THEME_NAME.PRIMARY)};
+        color: ${getThemeValue(THEME_NAME.TEXT_COLOR_LIGHT)};
     }
 
     &:disabled + span {
-        background-color: var(--border-light-color, ${constants.BORDER_LIGHT_COLOR});
-        color: var(--disabled-border, ${constants.DISABLED_BORDER});
+        background-color: ${getThemeValue(THEME_NAME.BORDER_LIGHT_COLOR)};
+        color: ${getThemeValue(THEME_NAME.DISABLED_BORDER)};
     }
 
     &:disabled:checked + span {
-        background-color: var(--disabled-border, ${constants.DISABLED_BORDER});
-        color: #fff;
+        background-color: ${getThemeValue(THEME_NAME.DISABLED_BORDER)};
+        color: ${getThemeValue(THEME_NAME.TEXT_COLOR_LIGHT)};
     }
 `;
 const Label = styled.label `
@@ -2194,10 +2658,28 @@ const MenuContainer = styled.div `
     & div:last-child {
         border-bottom: none;
     }
+
+    &:focus-within {
+        box-shadow: 0 0 0 4px ${getThemeValue(THEME_NAME.PRIMARY_LIGHT)};
+    }
 `;
+/**
+ * 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 = React.forwardRef(function (props, ref) {
-    const { multiSelect, onChange } = props;
-    const [value, setValue] = React.useState(props.value || (multiSelect ? [] : ''));
+    const { multiSelect, onChange, value: propValue } = props, rest = __rest(props, ["multiSelect", "onChange", "value"]);
+    const [value, setValue] = React.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) {
@@ -2216,11 +2698,74 @@ const Menu = React.forwardRef(function (props, ref) {
         setValue(newVal);
         onChange === null || onChange === void 0 ? void 0 : 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) => {
+        var _a, _b, _c, _d;
+        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;
+                (_a = items[nextIndex]) === null || _a === void 0 ? void 0 : _a.focus();
+                break;
+            case 'ArrowUp':
+                e.preventDefault();
+                nextIndex = currentIndex - 1;
+                if (nextIndex < 0)
+                    nextIndex = items.length - 1;
+                (_b = items[nextIndex]) === null || _b === void 0 ? void 0 : _b.focus();
+                break;
+            case 'Home':
+                e.preventDefault();
+                (_c = items[0]) === null || _c === void 0 ? void 0 : _c.focus();
+                break;
+            case 'End':
+                e.preventDefault();
+                (_d = items[items.length - 1]) === null || _d === void 0 ? void 0 : _d.focus();
+                break;
+            case 'Enter':
+            case ' ': // Space
+                e.preventDefault();
+                target.click();
+                break;
+        }
+    };
+    /**
+     * 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 === null || firstItem === void 0 ? void 0 : firstItem.focus();
+        }
+    };
     return (jsxRuntime.jsx(MenuContext.Provider, { value: {
             value,
             multiSelect,
             updateValue,
-        }, children: jsxRuntime.jsx(MenuContainer, { ref: ref, children: props.children }) }));
+        }, children: jsxRuntime.jsx(MenuContainer, Object.assign({}, rest, { ref: ref, role: "listbox", "aria-multiselectable": multiSelect, tabIndex: 0, onKeyDown: handleKeyDown, onFocus: focusHandler, children: props.children })) }));
 });
 Menu.displayName = 'Menu';
 Menu.defaultProps = {
@@ -2233,39 +2778,38 @@ const Container$4 = styled.button `
     border: none;
     background-color: transparent;
     font-size: 16px;
-    border-bottom: 1px solid var(--border-light-color, ${constants.BORDER_LIGHT_COLOR});
+    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: var(--border-light-color, ${constants.BORDER_LIGHT_COLOR});
+        background-color: ${getThemeValue(THEME_NAME.BORDER_LIGHT_COLOR)};
     }
 
     & > label {
         margin: 0 4px 0 0;
     }
 `;
-function MenuItem(props) {
+const MenuItemInner = (props, ref) => {
     var _a, _b;
     const context = React.useContext(MenuContext);
     const { value, children } = props, rest = __rest(props, ["value", "children"]);
     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 (jsxRuntime.jsxs(Container$4, Object.assign({}, rest, { type: "button", tabIndex: context.multiSelect ? -1 : 0, selected: selected, onClick: clickHandler, children: [context.multiSelect && jsxRuntime.jsx(Checkbox, { checked: selected }), children] })));
-}
+    return (jsxRuntime.jsxs(Container$4, Object.assign({}, rest, { ref: ref, type: "button", role: "option", "aria-selected": selected, selected: selected, onClick: clickHandler, children: [context.multiSelect && (jsxRuntime.jsx(Checkbox, { checked: selected, readOnly: true, tabIndex: -1, onClick: (e) => e.stopPropagation() })), children] })));
+};
+const MenuItem = React.forwardRef(MenuItemInner);
 
 exports.POPOVER_POSITION = void 0;
 (function (POPOVER_POSITION) {
@@ -2349,6 +2893,9 @@ function Popover(props) {
     const [translate, setTranslate] = React.useState({ x: 0, y: 0 });
     const popperRef = React.useRef();
     const containerRef = React.useRef();
+    const triggerRef = React.useRef(null);
+    const popperId = React.useId();
+    const triggerId = React.useId();
     const close = React.useCallback(() => {
         setClosing(true);
         setTimeout(() => {
@@ -2358,6 +2905,12 @@ function Popover(props) {
                 props.onClose();
             }
             setClosing(false);
+            // Restore focus to the trigger element after animation completes
+            setTimeout(() => {
+                if (triggerRef.current) {
+                    triggerRef.current.focus();
+                }
+            }, 50);
         }, 280);
     }, [props]);
     const keyupEventHandler = React.useCallback((e) => {
@@ -2446,7 +2999,13 @@ function Popover(props) {
             popperRef.current.focus();
         }
     }, [open, props.position]);
-    return (jsxRuntime.jsxs(PopoverDiv, { ref: containerRef, children: [jsxRuntime.jsx(props.element, {}), open && (jsxRuntime.jsx(Popper, { elevated: true, tabIndex: 0, position: props.position, translateX: translate.x, translateY: translate.y, className: closing && 'closing', ref: popperRef, onClick: (e) => {
+    return (jsxRuntime.jsxs(PopoverDiv, { ref: containerRef, children: [React.createElement(props.element, {
+                ref: triggerRef,
+                id: triggerId,
+                'aria-expanded': open,
+                'aria-haspopup': 'dialog',
+                'aria-controls': popperId,
+            }), open && (jsxRuntime.jsx(Popper, { elevated: true, tabIndex: 0, role: "dialog", "aria-labelledby": triggerId, id: popperId, position: props.position, translateX: translate.x, translateY: translate.y, className: closing && 'closing', ref: popperRef, onClick: (e) => {
                     e.stopPropagation();
                     e.nativeEvent.stopImmediatePropagation();
                 }, children: props.children }))] }));
@@ -2479,54 +3038,77 @@ const ArrowContainer = styled.span `
     top: 16px;
     pointer-events: none;
 `;
+/**
+ * Dropdown component that allows selection from a list of options.
+ * Supports single and multi-select modes.
+ *
+ * @template T - The type of the value(s) in the dropdown.
+ * @param {DropdownProps<T>} props - The properties for the Dropdown component.
+ * @returns {JSX.Element} The rendered Dropdown component.
+ */
 function Dropdown(props) {
     const { multiSelect, onChange } = props;
     const [open, setOpen] = React.useState(false);
     const [value, setValue] = React.useState(props.value);
+    const id = React.useId();
+    const menuId = `${id}-menu`;
+    const menuRef = React.useRef(null);
+    const triggerRef = React.useRef(null);
+    // Focus menu when opened
     React.useEffect(() => {
-        const focusHandler = (e) => {
-            var _a, _b;
-            if (open && (e.keyCode === 38 || e.keyCode === 40)) {
-                e.preventDefault();
-                const current = document.querySelector(':focus');
-                if (current.tagName === 'DIV') {
-                    const firstBtn = current.querySelector('button');
-                    firstBtn === null || firstBtn === void 0 ? void 0 : firstBtn.focus();
-                }
-                else {
-                    const currentBtn = current.closest('button');
-                    if (e.keyCode === 38) {
-                        const prev = (_a = currentBtn === null || currentBtn === void 0 ? void 0 : currentBtn.previousElementSibling) === null || _a === void 0 ? void 0 : _a.closest('button');
-                        prev === null || prev === void 0 ? void 0 : prev.focus();
-                    }
-                    else {
-                        const next = (_b = currentBtn === null || currentBtn === void 0 ? void 0 : currentBtn.nextElementSibling) === null || _b === void 0 ? void 0 : _b.closest('button');
-                        next === null || next === void 0 ? void 0 : next.focus();
-                    }
+        if (open) {
+            // Wait for Popover to fully open and focus itself first
+            // Then move focus to the first menu item
+            const timer = setTimeout(() => {
+                var _a;
+                const firstItem = (_a = menuRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('[role="option"]');
+                if (firstItem) {
+                    firstItem.focus();
                 }
-                return false;
-            }
-        };
-        document.addEventListener('keydown', focusHandler);
-        return () => {
-            document.removeEventListener('keydown', focusHandler);
-        };
+            }, 100); // Wait after Popover has set initial focus
+            return () => clearTimeout(timer);
+        }
     }, [open]);
-    const clickHandler = () => setOpen(true);
-    const keyUp = (e) => {
-        if (e.keyCode === 40) {
+    /**
+     * Handles keydown events on the input trigger.
+     * Opens the menu on 'Enter', 'Space', 'ArrowDown', or 'ArrowUp'.
+     *
+     * @param {React.KeyboardEvent<HTMLInputElement>} e - The keyboard event.
+     */
+    const onKeyDown = (e) => {
+        if (['ArrowDown', 'ArrowUp', 'Enter', ' '].includes(e.key)) {
+            e.preventDefault();
             setOpen(true);
         }
     };
+    /**
+     * Handles changes to the dropdown value.
+     * Updates local state and calls the external onChange handler.
+     * Closes the dropdown if not in multi-select mode.
+     *
+     * @param {T | T[]} val - The new value(s).
+     */
     const changeHandler = (val) => {
+        var _a;
         setValue(val);
         onChange === null || onChange === void 0 ? void 0 : onChange(val);
         // Close dropdown after selection if not multiSelect
         if (!multiSelect) {
             setOpen(false);
+            (_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
         }
     };
-    return (jsxRuntime.jsx(Popover, { position: exports.POPOVER_POSITION.BOTTOM_LEFT, open: open, element: () => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Input$4, { type: "text", value: value && String(value), label: props.label, errorText: props.errorText, onClick: clickHandler, onKeyUp: keyUp, required: props.required, disabled: props.disabled }), jsxRuntime.jsx(ArrowContainer, { children: jsxRuntime.jsx(ExpandMore, {}) })] })), onClose: () => setOpen(false), children: jsxRuntime.jsx(Menu, { value: value, multiSelect: multiSelect, onChange: changeHandler, children: props.children }) }));
+    /**
+     * Toggles the dropdown open state on click.
+     */
+    const clickHandler = () => setOpen(true);
+    const TriggerElement = React.forwardRef((passedProps, ref) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Input$2, Object.assign({}, passedProps, { ref: ref, type: "text", value: value && String(value), label: props.label, errorText: props.errorText, onClick: clickHandler, onKeyDown: onKeyDown, required: props.required, disabled: props.disabled, readOnly: true, role: "combobox", "aria-haspopup": "listbox", "aria-expanded": open, "aria-controls": menuId })), jsxRuntime.jsx(ArrowContainer, { "aria-hidden": "true", children: jsxRuntime.jsx(ExpandMore, {}) })] })));
+    TriggerElement.displayName = 'DropdownTrigger';
+    return (jsxRuntime.jsx(Popover, { position: exports.POPOVER_POSITION.BOTTOM_LEFT, open: open, element: TriggerElement, onClose: () => {
+            var _a;
+            setOpen(false);
+            (_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }, children: jsxRuntime.jsx(Menu, { ref: menuRef, id: menuId, value: value, multiSelect: multiSelect, onChange: changeHandler, children: props.children }) }));
 }
 Dropdown.defaultProps = {
     multiSelect: false,
@@ -2571,7 +3153,7 @@ class PromptDialog extends React.Component {
     }
     render() {
         const { header, body, inputProps, submitText, cancelText, dialogProps } = this.props;
-        return (jsxRuntime.jsx(Dialog, Object.assign({}, dialogProps, { ref: this.dialog, closeOnEsc: false, closeOnOverlayClick: false, children: jsxRuntime.jsxs("form", { onSubmit: this.submit, children: [header && jsxRuntime.jsx(Header$1, { children: header }), jsxRuntime.jsxs(Body$1, { children: [jsxRuntime.jsx(BodyText, { children: body }), jsxRuntime.jsx("div", { style: { display: 'flex' }, children: jsxRuntime.jsx(Input$4, Object.assign({ style: { width: 'auto', flex: '1' }, value: this.state.value, onChange: this.valueChange }, inputProps)) })] }), jsxRuntime.jsxs(Footer$1, { children: [jsxRuntime.jsx(Button$2, { type: "button", onClick: this.cancel, children: cancelText }), jsxRuntime.jsx(ActionButton, { children: submitText })] })] }) })));
+        return (jsxRuntime.jsx(Dialog, Object.assign({}, dialogProps, { ref: this.dialog, closeOnEsc: false, closeOnOverlayClick: false, children: jsxRuntime.jsxs("form", { onSubmit: this.submit, children: [header && jsxRuntime.jsx(Header$1, { children: header }), jsxRuntime.jsxs(Body$1, { children: [jsxRuntime.jsx(BodyText, { children: body }), jsxRuntime.jsx("div", { style: { display: 'flex' }, children: jsxRuntime.jsx(Input$2, Object.assign({ style: { width: 'auto', flex: '1' }, value: this.state.value, onChange: this.valueChange }, inputProps)) })] }), jsxRuntime.jsxs(Footer$1, { children: [jsxRuntime.jsx(StyledButton, { type: "button", onClick: this.cancel, children: cancelText }), jsxRuntime.jsx(ActionButton, { children: submitText })] })] }) })));
     }
 }
 PromptDialog.propTypes = {
@@ -2626,9 +3208,9 @@ const positionStyle$1 = (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$1(props.size)[props.position].before}
 
     .nf-layer-enter & {
@@ -2636,19 +3218,56 @@ const DrawerDiv = styled.div `
         ${(props) => positionStyle$1(props.size)[props.position].after}
     }
 `;
+const drawerPropTypes = {
+    /** Opens the drawer */
+    open: PropTypes.bool.isRequired,
+    /** position of the drawer */
+    position: PropTypes.oneOf([
+        exports.DRAWER_POSITION.LEFT,
+        exports.DRAWER_POSITION.RIGHT,
+        exports.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$1 = {
     [exports.DRAWER_POSITION.LEFT]: LAYER_POSITION.TOP_LEFT,
     [exports.DRAWER_POSITION.RIGHT]: LAYER_POSITION.TOP_RIGHT,
     [exports.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,
             });
@@ -2656,7 +3275,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 {
@@ -2665,13 +3374,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$1.renderLayer({
                 overlay,
                 exitDelay: 300,
@@ -2679,12 +3411,15 @@ class Drawer extends React.Component {
                 closeCallback: this.onClose,
                 closeOnEsc,
                 closeOnOverlayClick,
-                component: (jsxRuntime.jsx(DrawerDiv, Object.assign({}, rest, { position: position, size: size, onClick: (e) => e.stopPropagation(), children: children }))),
+                component: (jsxRuntime.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;
@@ -2693,26 +3428,7 @@ class Drawer extends React.Component {
         return null;
     }
 }
-Drawer.propTypes = {
-    /** Opens the drawer */
-    open: PropTypes.bool.isRequired,
-    /** position of the drawer */
-    position: PropTypes.oneOf([
-        exports.DRAWER_POSITION.LEFT,
-        exports.DRAWER_POSITION.RIGHT,
-        exports.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: exports.DRAWER_POSITION.LEFT,
@@ -2722,7 +3438,7 @@ Drawer.defaultProps = {
 
 const Container$3 = 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;
 
@@ -2732,7 +3448,7 @@ const Container$3 = 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;
     }
@@ -2787,26 +3503,27 @@ const Container$3 = 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;
 `;
 function Group(props) {
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Container$3, Object.assign({}, props, { children: props.children })), props.errorText && jsxRuntime.jsx(ErrorContainer, { children: props.errorText })] }));
+    const errorId = React.useId();
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Container$3, Object.assign({}, props, { "aria-describedby": props.errorText ? errorId : undefined, children: props.children })), props.errorText && jsxRuntime.jsx(ErrorContainer, { id: errorId, children: props.errorText })] }));
 }
 Group.propTypes = {
     /** Error Message for the group */
@@ -2815,12 +3532,12 @@ Group.propTypes = {
 
 var GroupLabel = 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;
@@ -2830,14 +3547,41 @@ var GroupLabel = styled.label `
     }
 `;
 
+const modalPropTypes = {
+    /** Opens the modal */
+    open: PropTypes.bool.isRequired,
+    /** Closes the modal on esc */
+    closeOnEsc: PropTypes.bool,
+    /** Closes the modal on overlay click */
+    closeOnOverlayClick: PropTypes.bool,
+    /** Call back function called when the modal closes. */
+    onClose: PropTypes.func,
+};
+/**
+ * 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.
+ */
 class Modal 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,
             });
@@ -2845,7 +3589,97 @@ class Modal extends React.Component {
             this.closeCallback = null;
             this.layer = null;
         };
+        this.lastFocusedElement = null;
+        this.modalRef = React.createRef();
+        /**
+         * Retrieves all focusable elements within the modal.
+         */
+        this.getFocusableElements = () => {
+            if (!this.modalRef.current)
+                return [];
+            return Array.from(this.modalRef.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 modal.
+         */
+        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 modal 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 Modal DOM element.
+         * Triggers initial focus setting when the element mounts.
+         */
+        this.setModalRef = (node) => {
+            // Update ref
+            this.modalRef.current = node;
+            if (node) {
+                // Set initial focus when the node is mounted
+                this.setInitialFocus(node);
+            }
+        };
+        /**
+         * 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.
+         */
+        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 {
@@ -2854,13 +3688,36 @@ class Modal extends React.Component {
         }
         return null;
     }
+    /**
+     * Lifecycle method to save the currently focused element when the modal mounts while open.
+     */
+    componentDidMount() {
+        if (this.props.open) {
+            this.lastFocusedElement = document.activeElement;
+        }
+    }
+    /**
+     * Lifecycle method to restore focus when the modal unmounts.
+     */
+    componentWillUnmount() {
+        if (this.props.open) {
+            this.restoreFocus();
+        }
+    }
+    /**
+     * Lifecycle method to handle Modal updates.
+     * Manages opening/closing logic via LayerManager and focus preservation.
+     */
     getSnapshotBeforeUpdate(prevProps) {
         var _a;
         const _b = this.props, { open, closeOnEsc, closeOnOverlayClick, children } = _b, rest = __rest(_b, ["open", "closeOnEsc", "closeOnOverlayClick", "children"]);
         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$1.renderLayer({
                 overlay: true,
                 exitDelay: 300,
@@ -2868,12 +3725,15 @@ class Modal extends React.Component {
                 closeCallback: this.onClose,
                 closeOnEsc: closeOnEsc,
                 closeOnOverlayClick: closeOnOverlayClick,
-                component: (jsxRuntime.jsx(DialogContainer, Object.assign({}, rest, { onClick: (e) => e.stopPropagation(), elevated: true, children: children }))),
+                component: (jsxRuntime.jsx(DialogContainer, Object.assign({}, rest, { ref: this.setModalRef, role: "dialog", "aria-modal": "true", tabIndex: -1, onKeyDown: this.handleKeyDown, onClick: (e) => e.stopPropagation(), elevated: true, children: children }))),
             });
             this.closeCallback = this.layer[1];
             this.forceUpdate();
         }
     }
+    /**
+     * Renders the Modal component via the LayerManager portal.
+     */
     render() {
         if (this.state.open && this.layer) {
             const [Component] = this.layer;
@@ -2882,16 +3742,7 @@ class Modal extends React.Component {
         return null;
     }
 }
-Modal.propTypes = {
-    /** Opens the modal */
-    open: PropTypes.bool.isRequired,
-    /** Closes the modal on esc */
-    closeOnEsc: PropTypes.bool,
-    /** Closes the modal on overlay click */
-    closeOnOverlayClick: PropTypes.bool,
-    /** Call back function called when the modal closes. */
-    onClose: PropTypes.func,
-};
+Modal.propTypes = modalPropTypes;
 Modal.defaultProps = {
     closeOnEsc: true,
     closeOnOverlayClick: true,
@@ -2935,37 +3786,37 @@ const getExitAnimation = (position) => {
 const getBorderColor = (type) => {
     switch (type) {
         case exports.NOTIFICATION_TYPE.SUCCESS:
-            return `var(--success-light, ${constants.SUCCESS_LIGHT})`;
+            return getThemeValue(THEME_NAME.SUCCESS_LIGHT);
         case exports.NOTIFICATION_TYPE.DANGER:
-            return `var(--error-light, ${constants.ERROR_LIGHT})`;
+            return getThemeValue(THEME_NAME.ERROR_LIGHT);
         case exports.NOTIFICATION_TYPE.WARNING:
-            return `var(--warning-light, ${constants.WARNING_LIGHT})`;
+            return getThemeValue(THEME_NAME.WARNING_LIGHT);
         default:
-            return `var(--info-light, ${constants.INFO_LIGHT})`;
+            return getThemeValue(THEME_NAME.INFO_LIGHT);
     }
 };
 const getTitleColor = (type) => {
     switch (type) {
         case exports.NOTIFICATION_TYPE.SUCCESS:
-            return `var(--success, ${constants.SUCCESS})`;
+            return getThemeValue(THEME_NAME.SUCCESS);
         case exports.NOTIFICATION_TYPE.DANGER:
-            return `var(--error, ${constants.ERROR})`;
+            return getThemeValue(THEME_NAME.ERROR);
         case exports.NOTIFICATION_TYPE.WARNING:
-            return `var(--warning, ${constants.WARNING})`;
+            return getThemeValue(THEME_NAME.WARNING);
         case exports.NOTIFICATION_TYPE.INFO:
-            return `var(--info, ${constants.INFO})`;
+            return getThemeValue(THEME_NAME.INFO);
     }
 };
 const getTypeStyle = (type) => {
     switch (type) {
         case exports.NOTIFICATION_TYPE.INFO:
-            return `color:  var(--info, ${constants.INFO})`;
+            return `color: ${getThemeValue(THEME_NAME.INFO)}`;
         case exports.NOTIFICATION_TYPE.SUCCESS:
-            return `color: var(--success, ${constants.SUCCESS})`;
+            return `color: ${getThemeValue(THEME_NAME.SUCCESS)}`;
         case exports.NOTIFICATION_TYPE.DANGER:
-            return `color: var(--error, ${constants.ERROR})`;
+            return `color: ${getThemeValue(THEME_NAME.ERROR)}`;
         case exports.NOTIFICATION_TYPE.WARNING:
-            return `color: var(--warning, ${constants.WARNING})`;
+            return `color: ${getThemeValue(THEME_NAME.WARNING)}`;
     }
 };
 const Container$2 = styled.div `
@@ -2976,6 +3827,7 @@ const Container$2 = styled.div `
     : 'column-reverse'};
 `;
 const Notice = styled(Card) `
+    position: relative;
     border-radius: 3px;
     border-left: 4px solid ${(props) => getBorderColor(props.type)};
     width: 300px;
@@ -3062,13 +3914,16 @@ const FillParent = styled.div `
     flex: 1;
 `;
 const CloseButton = styled.button `
+    position: absolute;
     background-color: transparent;
     border: none;
-    padding: none;
+    padding: 0;
+    top: 4px;
+    right: 4px;
     cursor: pointer;
 
     &:focus {
-        box-shadow: 0 0 0 3px var(--primary, ${constants.PRIMARY_LIGHT});
+        box-shadow: 0 0 0 3px ${getThemeValue(THEME_NAME.PRIMARY_LIGHT)};
         border-radius: 3px;
     }
 `;
@@ -3085,6 +3940,17 @@ const Footer = styled.div `
     justify-content: flex-end;
     padding: 0 5px;
 `;
+const VisuallyHidden = styled.span `
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+`;
 
 const DEFAULT_DURATION$1 = 5000;
 /**
@@ -3100,6 +3966,9 @@ class NotificationManager extends React.Component {
         this.timeouts = {};
         // Set of notification ids
         this.set = new Set();
+        // Refs for live regions to ensure they exist before updates
+        this.politeRegionRef = React.createRef();
+        this.assertiveRegionRef = React.createRef();
         /**
          * Removes a notification from stack if the notification with the given id is found.
          *
@@ -3142,17 +4011,23 @@ class NotificationManager extends React.Component {
          *
          * @param notice
          */
-        this.add = (notice) => {
+        this.add = (notice) => __awaiter(this, void 0, void 0, function* () {
             // Generate unique id if not provided.
             const id = notice.id || (Math.random() * Math.pow(10, 7)).toFixed(0);
             // De-dupe on id
             if (!this.set.has(id)) {
+                const type = notice.type || exports.NOTIFICATION_TYPE.INFO;
+                const isUrgent = type === exports.NOTIFICATION_TYPE.WARNING || type === exports.NOTIFICATION_TYPE.DANGER;
                 // Add notice to the top of stack.
                 this.setState({
                     notices: [
                         Object.assign(Object.assign({}, notice), { id }),
                         ...this.state.notices,
                     ],
+                }, () => {
+                    // Update live region after state update
+                    const announcement = `${notice.title} ${notice.description}`;
+                    this.updateLiveRegion(announcement, isUrgent);
                 });
                 // set timeout for closing the notification.
                 if (!notice.sticky) {
@@ -3162,6 +4037,23 @@ class NotificationManager extends React.Component {
                 this.set.add(id);
             }
             return id;
+        });
+        /**
+         * Update live region content with clear-then-set pattern for reliable VoiceOver announcements.
+         *
+         * @param content - The text content to announce
+         * @param isAssertive - Whether to use assertive (alert) or polite (log) live region
+         */
+        this.updateLiveRegion = (content, isAssertive) => {
+            const region = isAssertive ? this.assertiveRegionRef.current : this.politeRegionRef.current;
+            if (region) {
+                // Add content after delay
+                setTimeout(() => {
+                    if (region) {
+                        region.textContent = content;
+                    }
+                }, 150);
+            }
         };
         /**
          * Handler for close button click.
@@ -3192,12 +4084,12 @@ class NotificationManager extends React.Component {
         };
     }
     render() {
-        return (jsxRuntime.jsx(Container$2, { position: this.props.position, children: this.state.notices.map((notice) => {
-                const { id, title, description, leaving, type = exports.NOTIFICATION_TYPE.INFO, buttonText, buttonClick, } = notice;
-                return (jsxRuntime.jsxs(Notice, Object.assign({}, notice, { position: this.props.position, className: leaving ? 'leave' : '', onMouseEnter: this.pause(id), onMouseLeave: this.resume(id), children: [jsxRuntime.jsxs(IconContainer, { type: type, children: [type === exports.NOTIFICATION_TYPE.INFO && jsxRuntime.jsx(CheckCircle$3, {}), type === exports.NOTIFICATION_TYPE.SUCCESS && jsxRuntime.jsx(CheckCircle$4, {}), type === exports.NOTIFICATION_TYPE.WARNING && jsxRuntime.jsx(CheckCircle$2, {}), type === exports.NOTIFICATION_TYPE.DANGER && jsxRuntime.jsx(CheckCircle$1, {})] }), jsxRuntime.jsxs(FillParent, { children: [jsxRuntime.jsxs(Title, { type: type, children: [jsxRuntime.jsx(FillParent, { children: title }), jsxRuntime.jsx(CloseButton, { onClick: this.closeClickHandler(id), children: jsxRuntime.jsx(Close, {}) })] }), jsxRuntime.jsx(Body, { children: description }), buttonText && (jsxRuntime.jsx(Footer, { children: jsxRuntime.jsx(ActionButton, { onClick: () => {
-                                            buttonClick === null || buttonClick === void 0 ? void 0 : buttonClick();
-                                        }, children: buttonText }) }))] })] }), id));
-            }) }));
+        return (jsxRuntime.jsxs(Container$2, { position: this.props.position, children: [jsxRuntime.jsx(VisuallyHidden, { ref: this.politeRegionRef, role: "log", "aria-live": "polite", "aria-atomic": "false", "aria-relevant": "additions text" }), jsxRuntime.jsx(VisuallyHidden, { ref: this.assertiveRegionRef, role: "alert", "aria-live": "assertive", "aria-atomic": "true" }), jsxRuntime.jsx("div", { role: "list", "aria-label": this.props.ariaLabel, children: this.state.notices.map((notice) => {
+                        const { id, title, description, leaving, type = exports.NOTIFICATION_TYPE.INFO, buttonText, buttonClick, closeButtonAriaLabel, } = notice;
+                        return (jsxRuntime.jsxs(Notice, Object.assign({}, notice, { position: this.props.position, className: leaving ? 'leave' : '', onMouseEnter: this.pause(id), onMouseLeave: this.resume(id), role: "listitem", children: [jsxRuntime.jsxs(IconContainer, { type: type, "aria-hidden": "true", children: [type === exports.NOTIFICATION_TYPE.INFO && jsxRuntime.jsx(CheckCircle$3, {}), type === exports.NOTIFICATION_TYPE.SUCCESS && jsxRuntime.jsx(CheckCircle$4, {}), type === exports.NOTIFICATION_TYPE.WARNING && jsxRuntime.jsx(CheckCircle$2, {}), type === exports.NOTIFICATION_TYPE.DANGER && jsxRuntime.jsx(CheckCircle$1, {})] }), jsxRuntime.jsxs(FillParent, { children: [jsxRuntime.jsx(Title, { type: type, children: title }), jsxRuntime.jsx(Body, { children: description }), buttonText && (jsxRuntime.jsx(Footer, { children: jsxRuntime.jsx(ActionButton, { onClick: () => {
+                                                    buttonClick === null || buttonClick === void 0 ? void 0 : buttonClick();
+                                                }, children: buttonText }) }))] }), jsxRuntime.jsx(CloseButton, { onClick: this.closeClickHandler(id), "aria-label": closeButtonAriaLabel || 'Close notification', tabIndex: 0, children: jsxRuntime.jsx(Close, {}) })] }), id));
+                    }) })] }));
     }
 }
 
@@ -3231,6 +4123,8 @@ StoryProps.propTypes = {
     buttonClick: PropTypes.func,
     /** Notification close callback. */
     onClose: PropTypes.func,
+    /** Aria label for the close button on the notification. Defaults to "Close notification" */
+    closeButtonAriaLabel: PropTypes.string,
 };
 StoryProps.defaultProps = {
     duration: 5000,
@@ -3252,56 +4146,83 @@ class Notification {
         /**
          * Adds a notification
          *
-         * @param position
-         * @param options
+         * @param position - The position where the notification should appear
+         * @param options - Configuration options for the notification
+         * @returns The notification ID or a promise that resolves to the notification ID
          */
-        this.add = (position, options) => {
-            let notification;
+        this.add = (position, options, ariaLabel = 'Notifications') => {
             if (!this.containers.has(position)) {
-                const div = document === null || document === void 0 ? void 0 : document.createElement('div');
-                const ref = React.createRef();
+                /** Callback ref to capture the NotificationManager instance when it mounts */
+                const refCallback = (instance) => {
+                    if (instance) {
+                        const container = this.containers.get(position);
+                        if (container) {
+                            container.manager = instance;
+                        }
+                    }
+                };
                 const [Component] = LayerManager$1.renderLayer({
                     closeOnEsc: false,
                     closeOnOverlayClick: false,
                     position: positionMap[position],
                     alwaysOnTop: true,
-                    component: (jsxRuntime.jsx(NotificationManager, { ref: ref, position: position, onEmpty: () => this.destroy(position) })),
+                    component: (jsxRuntime.jsx(NotificationManager, { ref: refCallback, position: position, onEmpty: () => this.destroy(position), ariaLabel: ariaLabel })),
                 });
+                // Create a div to mount the Component
+                const div = document.createElement('div');
+                document.body.appendChild(div);
+                const root = client.createRoot(div);
                 this.containers.set(position, {
-                    ref,
-                    element: div,
-                    root: client.createRoot(div),
+                    manager: null,
+                    root,
+                    div,
                 });
+                // Render the Component which will trigger the LayerManager's useEffect
                 ReactDOM.flushSync(() => {
-                    this.containers.get(position).root.render(jsxRuntime.jsx(Component, {}));
+                    root.render(jsxRuntime.jsx(Component, {}));
                 });
-                notification = ref;
             }
-            else {
-                notification = this.containers.get(position).ref;
+            const container = this.containers.get(position);
+            if (container && container.manager) {
+                return container.manager.add(options);
             }
-            return notification.current.add(options);
+            // If manager is not ready yet, wait a bit and retry
+            return new Promise((resolve) => {
+                setTimeout(() => {
+                    const container = this.containers.get(position);
+                    if (container && container.manager) {
+                        resolve(container.manager.add(options));
+                    }
+                }, 10);
+            });
         };
         /**
          * Removes a notification
          *
-         * @param position
-         * @param id
+         * @param position - The position of the notification container
+         * @param id - The unique ID of the notification to remove
          */
         this.remove = (position, id) => {
-            if (this.containers.has(position)) {
-                this.containers.get(position).ref.current.remove(id);
+            const container = this.containers.get(position);
+            if (container && container.manager) {
+                container.manager.remove(id);
             }
         };
         /**
-         * Destroys entire stack of notifications.
+         * Destroys entire stack of notifications at a position.
+         * Unmounts the React root and cleans up DOM elements.
          *
-         * @param position
+         * @param position - The position of the notification container to destroy
          */
         this.destroy = (position) => {
-            const notification = this.containers.get(position);
-            notification.root.unmount();
-            this.containers.delete(position);
+            const container = this.containers.get(position);
+            if (container) {
+                container.root.unmount();
+                if (document.body.contains(container.div)) {
+                    document.body.removeChild(container.div);
+                }
+                this.containers.delete(position);
+            }
         };
     }
 }
@@ -3309,8 +4230,8 @@ class Notification {
 var Notification$1 = new Notification();
 
 const SpinnerDiv = styled.div `
-    border: 4px solid var(--primary, ${constants.PRIMARY});
-    border-top: 4px solid var(--border-light-color, ${constants.BORDER_LIGHT_COLOR});
+    border: 4px solid ${getThemeValue(THEME_NAME.PRIMARY)};
+    border-top: 4px solid ${getThemeValue(THEME_NAME.BORDER_LIGHT_COLOR)};
     border-radius: 50%;
     width: ${(props) => props.size}px;
     height: ${(props) => props.size}px;
@@ -3327,14 +4248,18 @@ const SpinnerDiv = styled.div `
     }
 `;
 function Spinner(props) {
-    return jsxRuntime.jsx(SpinnerDiv, Object.assign({}, props));
+    const { label } = props, rest = __rest(props, ["label"]);
+    return (jsxRuntime.jsx(SpinnerDiv, Object.assign({}, rest, { role: "status", "aria-label": label, "aria-live": "polite", "aria-busy": "true" })));
 }
 Spinner.propTypes = {
     /** Spinner's size */
     size: PropTypes.number,
+    /** Accessible label for screen readers */
+    label: PropTypes.string,
 };
 Spinner.defaultProps = {
     size: 30,
+    label: 'Loading',
 };
 
 const Container$1 = styled.div `
@@ -3347,7 +4272,7 @@ const Header = styled.div `
     display: flex;
     flex-direction: row;
     justify-content: space-between;
-    border-bottom: 1px solid var(--border-light-color, ${constants.BORDER_LIGHT_COLOR});
+    border-bottom: 1px solid ${getThemeValue(THEME_NAME.BORDER_LIGHT_COLOR)};
 
     @media (min-width: 601px) {
         &::before {
@@ -3356,7 +4281,7 @@ const Header = styled.div `
             left: 0;
             right: 0;
             height: 2px;
-            background-color: var(--light-grey, ${constants.LIGHT_GREY});
+            background-color: ${getThemeValue(THEME_NAME.LIGHT_GREY)};
             content: ' ';
             z-index: 0;
         }
@@ -3372,21 +4297,22 @@ const HeaderButton = styled.button `
     font-size: 16px;
     cursor: pointer;
     background-color: ${(props) => props.active
-    ? `var(--border-light-color, ${constants.BORDER_LIGHT_COLOR})`
-    : `var(--background, ${constants.BACKGROUND})`};
+    ? getThemeValue(THEME_NAME.BORDER_LIGHT_COLOR)
+    : getThemeValue(THEME_NAME.BACKGROUND)};
     font-weight: ${(props) => (props.active ? 'bold' : 'normal')};
     overflow: hidden;
     display: flex;
     align-items: center;
+    color: ${getThemeValue(THEME_NAME.TEXT_COLOR_DARK)};
 
     &:disabled {
         cursor: not-allowed;
-        background-color: var(--disabled-background, ${constants.DISABLED_BACKGROUND});
+        background-color: ${getThemeValue(THEME_NAME.DISABLED_BACKGROUND)};
     }
 
     &:enabled:hover,
     &:focus {
-        background-color: var(--primary-light, ${constants.PRIMARY_LIGHTER});
+        background-color: ${getThemeValue(THEME_NAME.PRIMARY_LIGHTER)};
     }
 
     @media (max-width: 600px) {
@@ -3416,9 +4342,13 @@ function Stepper(props) {
     const [active, setActive] = React.useState(props.active);
     const { children, onStepClick } = props;
     const childrenArray = React.Children.toArray(children);
+    const stepRefs = [];
     const stepClickHandler = (index) => () => {
+        var _a;
         setActive(index);
         onStepClick === null || onStepClick === void 0 ? void 0 : onStepClick(index);
+        // Move focus to the active step
+        (_a = stepRefs[index]) === null || _a === void 0 ? void 0 : _a.focus();
     };
     const getBadgeType = (index, completed, disabled) => {
         if (disabled) {
@@ -3432,10 +4362,24 @@ function Stepper(props) {
         }
         return exports.BADGE_TYPE.DISABLED;
     };
-    return (jsxRuntime.jsxs(Container$1, { children: [jsxRuntime.jsxs(Header, { children: [React.Children.map(children, (child, index) => {
+    // Keyboard navigation for step buttons
+    const onStepKeyDown = (index) => (e) => {
+        var _a, _b;
+        if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
+            e.preventDefault();
+            const next = (index + 1) % childrenArray.length;
+            (_a = stepRefs[next]) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+        else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
+            e.preventDefault();
+            const prev = (index - 1 + childrenArray.length) % childrenArray.length;
+            (_b = stepRefs[prev]) === null || _b === void 0 ? void 0 : _b.focus();
+        }
+    };
+    return (jsxRuntime.jsxs(Container$1, { children: [jsxRuntime.jsxs(Header, { role: "tablist", "aria-label": "Stepper Steps", children: [React.Children.map(children, (child, index) => {
                         if (!React.isValidElement(child))
                             return null;
-                        return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(HeaderButton, { active: index === active, type: "button", disabled: child.props.disabled, onClick: stepClickHandler(index), children: [jsxRuntime.jsx(Badge, { inline: true, type: getBadgeType(index, child.props.completed, child.props.disabled) }), jsxRuntime.jsx(Ellipsis, { children: child.props.name })] }) }));
+                        return (jsxRuntime.jsxs(HeaderButton, { ref: (el) => (stepRefs[index] = el), active: index === active, type: "button", role: "tab", "aria-selected": index === active, "aria-disabled": !!child.props.disabled, tabIndex: index === active ? 0 : -1, disabled: child.props.disabled, onClick: stepClickHandler(index), onKeyDown: onStepKeyDown(index), children: [jsxRuntime.jsx(Badge, { inline: true, type: getBadgeType(index, child.props.completed, child.props.disabled) }), jsxRuntime.jsx(Ellipsis, { children: child.props.name })] }));
                     }), jsxRuntime.jsxs(MobileHeader, { children: [jsxRuntime.jsx("span", { children: React.isValidElement(childrenArray[active])
                                     ? childrenArray[active].props.name
                                     : '' }), jsxRuntime.jsxs(Badge, { inline: true, type: exports.BADGE_TYPE.PRIMARY, children: [active + 1, " of ", React.Children.count(children)] })] })] }), childrenArray[active]] }));
@@ -3471,26 +4415,28 @@ const Button = styled.button `
     padding: 8px 12px;
     font-size: 14px;
     border-radius: 3px 3px 0 0;
-    border-bottom: ${(props) => props.active ? `3px solid var(--primary, ${constants.PRIMARY})` : 'none'};
-    color: ${(props) => (props.active ? `var(--primary, ${constants.PRIMARY})` : '#000')};
+    border-bottom: ${(props) => props.active ? `3px solid ${getThemeValue(THEME_NAME.PRIMARY)}` : 'none'};
+    color: ${(props) => props.active
+    ? getThemeValue(THEME_NAME.PRIMARY)
+    : getThemeValue(THEME_NAME.TEXT_COLOR_DARK)};
     cursor: pointer;
 
     &:hover,
     &:focus {
-        background-color: var(--primary-lighter, #cfe9ff);
+        background-color: ${getThemeValue(THEME_NAME.PRIMARY_LIGHTER)};
         border-bottom: ${(props) => props.active
-    ? `3px solid var(--primary, ${constants.PRIMARY})`
-    : `3px solid var(--primary, ${constants.PRIMARY})`};
+    ? `3px solid ${getThemeValue(THEME_NAME.PRIMARY)}`
+    : `3px solid ${getThemeValue(THEME_NAME.PRIMARY)}`};
     }
 
     &[disabled] {
-        background-color: var(--disabled-background, ${constants.DISABLED_BACKGROUND});
-        color: var(--disabled, ${constants.DISABLED});
-        border-bottom: 3px solid var(--disabled-border, ${constants.DISABLED_BORDER});
+        background-color: ${getThemeValue(THEME_NAME.DISABLED_BACKGROUND)};
+        color: ${getThemeValue(THEME_NAME.DISABLED)};
+        border-bottom: 3px solid ${getThemeValue(THEME_NAME.DISABLED_BORDER)};
     }
 `;
 const ButtonContainer = styled.div `
-    border-bottom: 1px solid var(--disabled-border, ${constants.DISABLED_BORDER});
+    border-bottom: 1px solid ${getThemeValue(THEME_NAME.DISABLED_BORDER)};
     margin-bottom: 5px;
     position: relative;
 `;
@@ -3499,14 +4445,45 @@ const TabBody = styled.div `
 `;
 function Tabs(props) {
     const [active, setActive] = React.useState(props.active);
-    const switchTab = (index) => () => setActive(index);
     const { children } = props;
+    const tabRefs = [];
+    const childrenArray = React.Children.toArray(children);
+    const switchTab = (index) => () => {
+        var _a, _b;
+        setActive(index);
+        (_a = tabRefs[index]) === null || _a === void 0 ? void 0 : _a.focus();
+        (_b = props.onChange) === null || _b === void 0 ? void 0 : _b.call(props, index);
+    };
+    // Keyboard navigation for tab buttons
+    const onTabKeyDown = (index) => (e) => {
+        var _a, _b;
+        if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
+            e.preventDefault();
+            const next = (index + 1) % childrenArray.length;
+            (_a = tabRefs[next]) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+        else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
+            e.preventDefault();
+            const prev = (index - 1 + childrenArray.length) % childrenArray.length;
+            (_b = tabRefs[prev]) === null || _b === void 0 ? void 0 : _b.focus();
+        }
+    };
     React.useEffect(() => {
         var _a;
         setActive(props.active);
         (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, props.active);
     }, [props]);
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ButtonContainer, Object.assign({}, props.props, { children: React.Children.map(children, (child, index) => (jsxRuntime.jsx(Button, { type: "button", active: active === index, onClick: switchTab(index), disabled: React.isValidElement(child) ? child.props.disabled : false, children: React.isValidElement(child) ? child.props.name : '' }))) })), jsxRuntime.jsx(TabBody, Object.assign({}, props.bodyProps, { children: React.Children.toArray(children)[active] }))] }));
+    // Generate unique IDs for tabs and panels using sanitized tab name and index
+    const sanitize = (str) => str.replace(/[^a-zA-Z0-9_-]/g, '').toLowerCase();
+    const tabIds = childrenArray.map((child, i) => {
+        const name = React.isValidElement(child) && child.props.name ? child.props.name : `tab${i}`;
+        return `nfui-tab-${sanitize(name)}-${i}`;
+    });
+    const panelIds = childrenArray.map((child, i) => {
+        const name = React.isValidElement(child) && child.props.name ? child.props.name : `tab${i}`;
+        return `nfui-tabpanel-${sanitize(name)}-${i}`;
+    });
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ButtonContainer, Object.assign({ role: "tablist", "aria-label": "Tabs" }, props.props, { children: childrenArray.map((child, index) => (jsxRuntime.jsx(Button, { ref: (el) => (tabRefs[index] = el), id: tabIds[index], type: "button", role: "tab", "aria-selected": active === index, "aria-controls": panelIds[index], tabIndex: active === index ? 0 : -1, active: active === index, onClick: switchTab(index), onKeyDown: onTabKeyDown(index), disabled: React.isValidElement(child) ? child.props.disabled : false, "aria-disabled": React.isValidElement(child) ? child.props.disabled : false, children: React.isValidElement(child) ? child.props.name : '' }, tabIds[index]))) })), jsxRuntime.jsx(TabBody, Object.assign({ id: panelIds[active], role: "tabpanel", "aria-labelledby": tabIds[active], tabIndex: 0 }, props.bodyProps, { children: childrenArray[active] }))] }));
 }
 Tabs.propTypes = {
     /** Active Tab Index */
@@ -3547,15 +4524,15 @@ exports.TOAST_TYPE = void 0;
 const getBackgroundColor = (type) => {
     switch (type) {
         case exports.TOAST_TYPE.INFO:
-            return `var(--info, ${constants.INFO})`;
+            return getThemeValue(THEME_NAME.INFO);
         case exports.TOAST_TYPE.SUCCESS:
-            return `var(--success, ${constants.SUCCESS})`;
+            return getThemeValue(THEME_NAME.SUCCESS);
         case exports.TOAST_TYPE.WARNING:
-            return `var(--warning, ${constants.WARNING})`;
+            return getThemeValue(THEME_NAME.WARNING);
         case exports.TOAST_TYPE.DANGER:
-            return `var(--error, ${constants.ERROR})`;
+            return getThemeValue(THEME_NAME.ERROR);
         case exports.TOAST_TYPE.NORMAL:
-            return `var(--toast, ${constants.TOAST})`;
+            return getThemeValue(THEME_NAME.TOAST);
     }
 };
 const ToastContainer = styled(Card) `
@@ -3563,7 +4540,7 @@ const ToastContainer = styled(Card) `
     border-radius: 3px;
     padding: 12px;
     background-color: ${(props) => getBackgroundColor(props.type)};
-    color: #fff;
+    color: ${getThemeValue(THEME_NAME.TEXT_COLOR_LIGHT)};
     margin: 20px;
     font-size: 14px;
     line-height: 20px;
@@ -3572,6 +4549,7 @@ const ToastContainer = styled(Card) `
     width: 344px;
     display: flex;
     align-items: center;
+    position: relative;
 
     & svg {
         width: 20px;
@@ -3596,7 +4574,7 @@ const TextContainer = styled.div `
 `;
 const CloseContainer = styled.button `
     background-color: transparent;
-    color: var(--primary, ${constants.PRIMARY_LIGHT});
+    color: ${getThemeValue(THEME_NAME.PRIMARY_LIGHT)};
     padding: 6px 10px;
     border: none;
     border-radius: 3px;
@@ -3608,8 +4586,71 @@ const CloseContainer = styled.button `
     }
 `;
 const DEFAULT_DURATION = 2000;
+const createAriaLiveRegion = (id, ariaLive) => {
+    const region = document.createElement('div');
+    region.id = id;
+    region.style.position = 'absolute';
+    region.style.width = '1px';
+    region.style.height = '1px';
+    region.style.padding = '0';
+    region.style.margin = '-1px';
+    region.style.overflow = 'hidden';
+    region.style.clip = 'rect(0, 0, 0, 0)';
+    region.style.whiteSpace = 'nowrap';
+    region.style.borderWidth = '0';
+    region.setAttribute('role', ariaLive === 'assertive' ? 'alert' : 'log');
+    region.setAttribute('aria-live', ariaLive);
+    region.setAttribute('aria-atomic', 'true');
+    return region;
+};
 class Toast {
     constructor() {
+        this.isPaused = false;
+        this.currentOptions = null;
+        /**
+         * Set up keyboard listener for dismissing toast with Escape key
+         */
+        this.setupKeyboardListeners = () => {
+            if (typeof document !== 'undefined') {
+                document.addEventListener('keydown', this.handleKeyDown);
+            }
+        };
+        /**
+         * Handle keyboard events for toast interaction
+         */
+        this.handleKeyDown = (event) => {
+            if (!this.toast)
+                return;
+            // Escape key dismisses the toast
+            if (event.key === 'Escape') {
+                this.remove();
+            }
+            // Space key pauses/resumes auto-dismiss
+            else if (event.key === ' ' && this.currentOptions) {
+                event.preventDefault();
+                if (this.isPaused) {
+                    this.resumeTimeout();
+                }
+                else {
+                    this.pauseTimeout();
+                }
+            }
+        };
+        /**
+         * Update the appropriate live region with toast content
+         */
+        this.updateLiveRegion = (content, isAssertive) => {
+            const region = isAssertive ? this.assertiveRegion : this.politeRegion;
+            region.textContent = '';
+            if (region) {
+                // Add content after delay
+                setTimeout(() => {
+                    if (region) {
+                        region.textContent = content;
+                    }
+                }, 200);
+            }
+        };
         this.remove = () => {
             if (this.toast) {
                 this.toast[1]();
@@ -3623,36 +4664,68 @@ class Toast {
                 }
             }, 300);
         };
+        /**
+         * Pause toast auto-dismiss
+         */
+        this.pauseTimeout = () => {
+            if (this.timeout) {
+                clearTimeout(this.timeout);
+                this.isPaused = true;
+            }
+        };
+        /**
+         * Resume toast auto-dismiss
+         */
+        this.resumeTimeout = () => {
+            if (this.currentOptions && this.isPaused) {
+                this.timeout = setTimeout(() => {
+                    this.remove();
+                }, this.currentOptions.duration || DEFAULT_DURATION);
+                this.isPaused = false;
+            }
+        };
         /**
          * Pause toast when user is hovering over it.
-         *
-         * @param id
          */
         this.pause = () => {
-            clearTimeout(this.timeout);
+            this.pauseTimeout();
         };
         /**
          * Restart the removal of toast.
-         *
-         * @param id
          */
         this.resume = (options) => () => {
-            this.timeout = setTimeout(() => {
-                this.remove();
-            }, options.duration || DEFAULT_DURATION);
+            this.currentOptions = options;
+            this.resumeTimeout();
         };
+        if (typeof document === 'undefined')
+            return;
         this.element = document === null || document === void 0 ? void 0 : document.createElement('div');
+        this.ariaLiveContainer = document === null || document === void 0 ? void 0 : document.createElement('div');
+        this.ariaLiveContainer.id = 'nf-toast-container';
+        document.body.appendChild(this.ariaLiveContainer);
+        this.politeRegion = createAriaLiveRegion('nf-toast-polite-region', 'polite');
+        this.assertiveRegion = createAriaLiveRegion('nf-toast-assertive-region', 'assertive');
+        this.ariaLiveContainer.appendChild(this.politeRegion);
+        this.ariaLiveContainer.appendChild(this.assertiveRegion);
+        this.setupKeyboardListeners();
     }
     add(options) {
         const { text, buttonText, buttonClick, duration, type = exports.TOAST_TYPE.NORMAL } = options;
+        this.currentOptions = options;
+        this.isPaused = false;
         this.remove();
+        // Determine if this is an assertive message (warning/danger)
+        const isAssertive = type === exports.TOAST_TYPE.WARNING || type === exports.TOAST_TYPE.DANGER;
+        // Announce to screen readers
+        const announcement = buttonText ? `${text} ${buttonText} button available` : text;
+        this.updateLiveRegion(announcement, isAssertive);
         this.toast = LayerManager$1.renderLayer({
             exitDelay: 300,
             closeOnEsc: false,
             closeOnOverlayClick: false,
             alwaysOnTop: true,
             position: LAYER_POSITION.BOTTOM_LEFT,
-            component: (jsxRuntime.jsxs(ToastContainer, Object.assign({}, options, { type: type, elevated: true, onMouseEnter: this.pause, onMouseLeave: this.resume(options), children: [jsxRuntime.jsx(TextContainer, { children: text }), buttonText && (jsxRuntime.jsx(CloseContainer, { onClick: buttonClick, type: "button", children: buttonText }))] }))),
+            component: (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(ToastContainer, Object.assign({}, options, { type: type, elevated: true, onMouseEnter: this.pause, onMouseLeave: this.resume(options), "aria-hidden": "true", children: [jsxRuntime.jsx(TextContainer, { children: text }), buttonText && (jsxRuntime.jsx(CloseContainer, { onClick: buttonClick, type: "button", "aria-label": `${buttonText} - Press Space to pause auto-dismiss, Escape to close`, children: buttonText }))] })) })),
         });
         const Component = this.toast[0];
         this.root = client.createRoot(this.element);
@@ -3705,9 +4778,9 @@ const positionHoverStyle = {
 };
 const TooltipDiv = styled.div `
     position: absolute;
-    background-color: var(--tooltip-color, ${constants.TOOLTIP_COLOR});
+    background-color: ${getThemeValue(THEME_NAME.TOOLTIP_COLOR)};
     padding: 5px;
-    color: #fff;
+    color: ${getThemeValue(THEME_NAME.TEXT_COLOR_LIGHT)};
     border-radius: 3px;
     transition: transform 0.3s ease;
     font-size: 12px;
@@ -3720,13 +4793,23 @@ const TooltipContainer = styled.div `
     justify-content: center;
     align-items: center;
 
-    &:hover ${TooltipDiv} {
+    &:hover ${TooltipDiv}, &:focus-within ${TooltipDiv} {
         ${(props) => positionHoverStyle[props.position]}
     }
 `;
 function Tooltip(props) {
     const { children, position } = props, rest = __rest(props, ["children", "position"]);
-    return (jsxRuntime.jsxs(TooltipContainer, Object.assign({ position: position }, rest, { children: [children, jsxRuntime.jsx(TooltipDiv, { position: position, children: rest.tooltipText })] })));
+    const tooltipId = React.useId();
+    // Clone the child to inject aria-describedby and tabIndex if possible
+    const trigger = React.isValidElement(children)
+        ? React.cloneElement(children, {
+            'aria-describedby': tooltipId,
+            tabIndex: children.props && typeof children.props.tabIndex !== 'undefined'
+                ? children.props.tabIndex
+                : 0,
+        })
+        : children;
+    return (jsxRuntime.jsxs(TooltipContainer, Object.assign({ position: position }, rest, { children: [trigger, jsxRuntime.jsx(TooltipDiv, { id: tooltipId, "aria-hidden": "true", role: "tooltip", position: position, children: rest.tooltipText })] })));
 }
 Tooltip.propTypes = {
     /** Text to show in the tooltip */
@@ -3750,7 +4833,7 @@ exports.AccordionStepFooter = AccordionStepFooter;
 exports.ActionButton = ActionButton;
 exports.AlertDialog = AlertDialog;
 exports.Badge = Badge;
-exports.Button = Button$2;
+exports.Button = StyledButton;
 exports.Card = Card;
 exports.CardBody = Body$1;
 exports.CardFooter = Footer$1;
@@ -3772,7 +4855,7 @@ exports.Dropdown = Dropdown;
 exports.Group = Group;
 exports.GroupLabel = GroupLabel;
 exports.IconButton = IconButton;
-exports.Input = Input$4;
+exports.Input = Input$2;
 exports.LinkButton = LinkButton;
 exports.Menu = Menu;
 exports.MenuItem = MenuItem;