no-frills-ui 0.0.14-alpha.8 → 0.0.14-rc.0

package/dist/index.js

@@ -2,10 +2,8 @@
 
 var jsxRuntime = require('@emotion/react/jsx-runtime');
 var React = require('react');
-var PropTypes = require('prop-types');
-var react = require('@emotion/react');
 var styled = require('@emotion/styled');
-var ReactDOM = require('react-dom');
+var reactDom = require('react-dom');
 var client = require('react-dom/client');
 
 function Accordion(props) {
@@ -26,20 +24,14 @@ function Accordion(props) {
             if (!/*#__PURE__*/ React.isValidElement(child)) {
                 return child;
             }
-            return /*#__PURE__*/ React.cloneElement(child, {
+            const reactElement = child;
+            return /*#__PURE__*/ React.cloneElement(reactElement, {
                 open: active === index,
-                onStepClick: onStepClick(index, child.props.disabled)
+                onStepClick: onStepClick(index, reactElement.props.disabled || false)
             });
         })
     });
 }
-Accordion.propTypes = {
-    /** Currently opened step */ active: PropTypes.number,
-    /** Handler for click event on a step */ onStepClick: PropTypes.func
-};
-Accordion.defaultProps = {
-    active: -1
-};
 
 function CheckCircle$4(props) {
     return /*#__PURE__*/ jsxRuntime.jsxs("svg", {
@@ -276,7 +268,7 @@ var BADGE_TYPE = /*#__PURE__*/ function(BADGE_TYPE) {
     return BADGE_TYPE;
 }({});
 const BadgeSpan = /*#__PURE__*/ styled("span", {
-    target: "e5vd1rw0",
+    target: "e1aaenck0",
     label: "BadgeSpan"
 })("background-color:", (props)=>{
     switch(props.type){
@@ -292,69 +284,88 @@ const BadgeSpan = /*#__PURE__*/ styled("span", {
             return getThemeValue(THEME_NAME.PRIMARY);
     }
 }, ";color:", getThemeValue(THEME_NAME.TEXT_COLOR_LIGHT), ";border-radius:10px;padding:", (props)=>props.children ? '3px 10px' : '4px', ";display:inline-block;min-height:4px;min-width:4px;font-size:12px;margin:", (props)=>props.inline ? '0 5px' : '0', ";", (props)=>!props.inline && 'position: absolute; top: 0; right: 0; transform: translate(50%, -50%);', ";");
-function Badge(props) {
+/**
+ * Badge Component
+ * @param props - Component props
+ * @param ref - Ref forwarded to the underlying HTMLSpanElement
+ */ function BadgeComponent(props, ref) {
     return /*#__PURE__*/ jsxRuntime.jsx(BadgeSpan, {
-        ...props
+        ...props,
+        ref: ref
     });
 }
-Badge.propTypes = {
-    /** Display badge inline or overlay on parent component */ inline: PropTypes.bool,
-    /** Type of badge */ type: PropTypes.oneOf([
-        "primary",
-        "success",
-        "warning",
-        "danger",
-        "disabled"
-    ]),
-    css: PropTypes.any
-};
-Badge.defaultProps = {
-    inline: false,
-    type: "primary"
-};
+const Badge = /*#__PURE__*/ React.forwardRef(BadgeComponent);
 
-const Card = /*#__PURE__*/ styled("div", {
-    target: "e1jmwjfy0",
-    label: "Card"
+const StyledCard = /*#__PURE__*/ styled("div", {
+    target: "ebufzie0",
+    label: "StyledCard"
 })("border-radius:10px;background-color:", getThemeValue(THEME_NAME.BACKGROUND), ";", (props)=>props.elevated ? `box-shadow: ${getThemeValue(THEME_NAME.MODAL_SHADOW)};` : `box-shadow: ${getThemeValue(THEME_NAME.SHADOW)};`, "    margin:5px;overflow:auto;position:relative;");
+/**
+ * Card Component
+ * @param props - Component props
+ * @param ref - Ref forwarded to the underlying HTMLDivElement
+ */ function CardComponent(props, ref) {
+    return /*#__PURE__*/ jsxRuntime.jsx(StyledCard, {
+        ...props,
+        ref: ref
+    });
+}
+const Card = /*#__PURE__*/ React.forwardRef(CardComponent);
 
 const Step$1 = /*#__PURE__*/ styled(Card, {
-    target: "e3zsr580",
+    target: "e14f46gi0",
     label: "Step"
 })("transition:all 0.6s ease;overflow:visible;", (props)=>props.open && `margin: 20px 5px;`);
 const StepHeader = /*#__PURE__*/ styled("button", {
-    target: "e3zsr581",
+    target: "e14f46gi1",
     label: "StepHeader"
 })("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 ${getThemeValue(THEME_NAME.BORDER_LIGHT_COLOR)};`, " ", (props)=>props.disabled && `color: ${getThemeValue(THEME_NAME.DISABLED)};`);
 const HeaderContainer = /*#__PURE__*/ styled("div", {
-    target: "e3zsr582",
+    target: "e14f46gi2",
     label: "HeaderContainer"
 })("display:flex;align-items:center;min-width:40px;& svg{vertical-align:top;margin-right:10px;fill:", (props)=>props.open ? getThemeValue(THEME_NAME.PRIMARY) : props.completed ? 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;}");
 const ExpandContainer = /*#__PURE__*/ styled("div", {
-    target: "e3zsr583",
+    target: "e14f46gi3",
     label: "ExpandContainer"
 })("display:flex;align-items:center;& svg{vertical-align:top;margin-right:10px;transition:all 0.6s ease;fill:currentColor;}", (props)=>props.open ? `& svg { transform: rotate(180deg); }` : '');
 const StepBody = /*#__PURE__*/ styled("div", {
-    target: "e3zsr584",
+    target: "e14f46gi4",
     label: "StepBody"
 })("transition:all 0.6s ease;overflow:hidden;height:", (props)=>props.height || 0, "px;");
+const AccordionBadge = /*#__PURE__*/ styled(Badge, {
+    target: "e14f46gi5",
+    label: "AccordionBadge"
+})("margin-right:15px;");
 const AccordionStepBody = /*#__PURE__*/ styled("div", {
-    target: "e3zsr585",
+    target: "e14f46gi6",
     label: "AccordionStepBody"
 })("padding:20px 15px;");
 const AccordionStepFooter = /*#__PURE__*/ styled("div", {
-    target: "e3zsr586",
+    target: "e14f46gi7",
     label: "AccordionStepFooter"
 })("display:flex;justify-content:flex-end;padding:10px 15px;border-top:1px solid ", getThemeValue(THEME_NAME.BORDER_LIGHT_COLOR), ";");
-function AccordionStep(props) {
+/**
+ * AccordionStep Component
+ * @param props - Component props
+ * @param ref - Ref forwarded to the underlying HTMLDivElement
+ */ function AccordionStepComponent(props, ref) {
     const [height, setHeight] = React.useState(0);
-    const { open, disabled, header, errorText, completed, onStepClick, children, ...restProps } = props;
+    const { open, disabled = false, header, errorText, completed = false, onStepClick, children, ...restProps } = props;
     // Generate unique IDs for ARIA relationships
     const headerId = React.useId();
     const regionId = React.useId();
-    const ref = (el)=>setHeight(el?.scrollHeight || 0);
+    const contentRef = React.useRef(null);
+    // Measure content height when `open` or children change.
+    React.useEffect(()=>{
+        const el = contentRef.current;
+        setHeight(el?.scrollHeight || 0);
+    }, [
+        open,
+        children
+    ]);
     return /*#__PURE__*/ jsxRuntime.jsxs(Step$1, {
         ...restProps,
+        ref: ref,
         open: open,
         elevated: open,
         completed: completed,
@@ -382,8 +393,7 @@ function AccordionStep(props) {
                     /*#__PURE__*/ jsxRuntime.jsxs(ExpandContainer, {
                         open: open,
                         children: [
-                            errorText && /*#__PURE__*/ jsxRuntime.jsx(Badge, {
-                                css: /*#__PURE__*/ react.css("margin-right:15px;", "ref"),
+                            errorText && /*#__PURE__*/ jsxRuntime.jsx(AccordionBadge, {
                                 inline: true,
                                 type: BADGE_TYPE.DANGER,
                                 children: errorText
@@ -396,7 +406,7 @@ function AccordionStep(props) {
                 ]
             }),
             /*#__PURE__*/ jsxRuntime.jsx(StepBody, {
-                ref: ref,
+                ref: contentRef,
                 height: open ? height : 0,
                 role: "region",
                 id: regionId,
@@ -407,54 +417,111 @@ function AccordionStep(props) {
         ]
     });
 }
-AccordionStep.propTypes = {
-    /** Header text for the step */ header: PropTypes.string.isRequired,
-    /** Error text for the step */ errorText: PropTypes.string,
-    /** If steps has been marked as completed */ completed: PropTypes.bool,
-    /** If the step is disabled */ disabled: PropTypes.bool
-};
-AccordionStep.defaultProps = {
-    completed: false,
-    disabled: false
-};
+const AccordionStep = /*#__PURE__*/ React.forwardRef(AccordionStepComponent);
 
 const StyledButton = /*#__PURE__*/ styled("button", {
-    target: "e1p361zw0",
+    target: "e123477w0",
     label: "StyledButton"
 })("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;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;height:24px;width:24px;margin-left:-6px;fill:currentColor;}&:enabled:hover{border-color:", getThemeValue(THEME_NAME.PRIMARY), ";color:", getThemeValue(THEME_NAME.PRIMARY), ";}&:focus{border-color:", getThemeValue(THEME_NAME.PRIMARY), ";box-shadow:0 0 0 4px ", getThemeValue(THEME_NAME.PRIMARY_LIGHT), ";}&:disabled{background-color:", getThemeValue(THEME_NAME.DISABLED_BACKGROUND), ";border-color:", getThemeValue(THEME_NAME.LIGHT_GREY), ";color:", getThemeValue(THEME_NAME.DISABLED), ";}");
-StyledButton.defaultProps = {
-    type: 'button'
-};
+/**
+ * Button Component
+ * @param props - Component props
+ * @param ref - Ref forwarded to the underlying HTMLButtonElement
+ */ function ButtonComponent(props, ref) {
+    const { type = 'button', ...rest } = props;
+    return /*#__PURE__*/ jsxRuntime.jsx(StyledButton, {
+        ref: ref,
+        type: type,
+        ...rest
+    });
+}
+const Button$2 = /*#__PURE__*/ React.forwardRef(ButtonComponent);
 
-var LinkButton = /*#__PURE__*/ styled("button", {
-    target: "ecu06nw0",
-    label: ""
+const StyledLinkButton = /*#__PURE__*/ styled("button", {
+    target: "e1d039580",
+    label: "StyledLinkButton"
 })("min-width:100px;font-size:14px;text-align:center;height:32px;cursor:pointer;background-color:transparent;border:none;color:", getThemeValue(THEME_NAME.PRIMARY), ";padding:0 12px;margin:5px;position:relative;display:inline-flex;align-items:center;justify-content:center;& svg{vertical-align:middle;height:24px;width:24px;fill:currentColor;margin-left:-6px;}&:enabled:hover,&:focus{text-decoration:underline;}&:disabled{border-color:", getThemeValue(THEME_NAME.BORDER_COLOR), ";color:", getThemeValue(THEME_NAME.DISABLED), ";}");
+/**
+ * LinkButton Component
+ * @param props - Component props
+ * @param ref - Ref forwarded to the underlying HTMLButtonElement
+ */ const LinkButtonComponent = (props, ref)=>{
+    const { type = 'button', ...rest } = props;
+    return /*#__PURE__*/ jsxRuntime.jsx(StyledLinkButton, {
+        ref: ref,
+        type: type,
+        ...rest
+    });
+};
+const LinkButton = /*#__PURE__*/ React.forwardRef(LinkButtonComponent);
 
-var RaisedButton = /*#__PURE__*/ styled("button", {
-    target: "etv67u90",
-    label: ""
+const StyledRaisedButton = /*#__PURE__*/ styled("button", {
+    target: "e1p6mbrx0",
+    label: "StyledRaisedButton"
 })("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:", getThemeValue(THEME_NAME.TEXT_COLOR_DARK), ";color:inherit;background-color:", getThemeValue(THEME_NAME.BACKGROUND), ";transform:translateY(-2px);box-shadow:", getThemeValue(THEME_NAME.HOVER_SHADOW), ";margin:5px;position:relative;display:inline-flex;align-items:center;justify-content:center;& svg{vertical-align:middle;height:24px;width:24px;margin-left:-6px;fill:currentColor;}&:enabled:hover{border-color:", getThemeValue(THEME_NAME.PRIMARY), ";color:", getThemeValue(THEME_NAME.PRIMARY), ";}&:focus{border-color:", getThemeValue(THEME_NAME.PRIMARY), ";}&: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:", getThemeValue(THEME_NAME.SHADOW), ";}");
+/**
+ * RaisedButton Component
+ * @param props - Component props
+ * @param ref - Ref forwarded to the underlying HTMLButtonElement
+ */ const RaisedButtonComponent = (props, ref)=>{
+    const { type = 'button', ...rest } = props;
+    return /*#__PURE__*/ jsxRuntime.jsx(StyledRaisedButton, {
+        ref: ref,
+        type: type,
+        ...rest
+    });
+};
+const RaisedButton = /*#__PURE__*/ React.forwardRef(RaisedButtonComponent);
 
-var ActionButton = /*#__PURE__*/ styled("button", {
-    target: "e1s126ex0",
-    label: ""
+const StyledActionButton = /*#__PURE__*/ styled("button", {
+    target: "ec49rx60",
+    label: "StyledActionButton"
 })("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;font-size:14px;text-align:center;padding:0 12px;cursor:pointer;margin:5px;position:relative;display:inline-flex;align-items:center;justify-content:center;& svg{vertical-align:middle;height:24px;width:24px;fill:currentColor;margin-left:-6px;}&:enabled:hover{box-shadow:", getThemeValue(THEME_NAME.HOVER_SHADOW), ";}&:focus{box-shadow:0 0 0 4px ", getThemeValue(THEME_NAME.PRIMARY_LIGHT), ";}&:disabled{border:1px solid ", getThemeValue(THEME_NAME.BORDER_LIGHT_COLOR), ";background-color:", getThemeValue(THEME_NAME.DISABLED_BACKGROUND), ";color:", getThemeValue(THEME_NAME.DISABLED), ";}");
+/**
+ * ActionButton Component
+ * @param props - Component props
+ * @param ref - Ref forwarded to the underlying HTMLButtonElement
+ */ function ActionButtonComponent(props, ref) {
+    const { type = 'button', ...rest } = props;
+    return /*#__PURE__*/ jsxRuntime.jsx(StyledActionButton, {
+        ref: ref,
+        type: type,
+        ...rest
+    });
+}
+const ActionButton = /*#__PURE__*/ React.forwardRef(ActionButtonComponent);
 
-var IconButton = /*#__PURE__*/ styled("button", {
-    target: "eny3n5p0",
-    label: ""
+const StyledIconButton = /*#__PURE__*/ styled("button", {
+    target: "efmjh6j0",
+    label: "StyledIconButton"
 })("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:", 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;height:24px;width:24px;fill:currentColor;}&:enabled:hover{border-color:", getThemeValue(THEME_NAME.PRIMARY), ";color:", getThemeValue(THEME_NAME.PRIMARY), ";}&:focus{border-color:", getThemeValue(THEME_NAME.PRIMARY), ";box-shadow:0 0 0 4px ", getThemeValue(THEME_NAME.PRIMARY_LIGHT), ";}&:disabled{background-color:", getThemeValue(THEME_NAME.BORDER_LIGHT_COLOR), ";border-color:", getThemeValue(THEME_NAME.LIGHT_GREY), ";color:", getThemeValue(THEME_NAME.DISABLED), ";}&:disabled > svg{fill:", getThemeValue(THEME_NAME.DISABLED), ";}");
+/**
+ * IconButton Component
+ * @param props - Component props
+ * @param ref - Ref forwarded to the underlying HTMLButtonElement
+ */ function IconButtonComponent(props, ref) {
+    const { type = 'button', ...rest } = props;
+    return /*#__PURE__*/ jsxRuntime.jsx(StyledIconButton, {
+        ref: ref,
+        type: type,
+        ...rest
+    });
+}
+const IconButton = /*#__PURE__*/ React.forwardRef(IconButtonComponent);
 
 const Container$8 = /*#__PURE__*/ styled("span", {
-    target: "e1b6ywa20",
+    target: "eg8hsap0",
     label: "Container"
 })("padding:5px;padding-left:15px;border-radius:16px;background-color:", getThemeValue(THEME_NAME.BORDER_LIGHT_COLOR), ";display:inline-flex;margin:5px;line-height:20px;align-items:center;");
 const Button$1 = /*#__PURE__*/ styled("button", {
-    target: "e1b6ywa21",
+    target: "eg8hsap1",
     label: "Button"
 })("color:", getThemeValue(THEME_NAME.BACKGROUND), ";background-color:", getThemeValue(THEME_NAME.DISABLED), ";border-radius:50%;border:none;padding:4px;display:inline-flex;margin-left:5px;&:focus-within{outline:4px solid ", getThemeValue(THEME_NAME.ERROR_LIGHT), ";}");
-function Chip(props) {
+/**
+ * Chip Component
+ * @param props - Component props
+ * @param ref - Ref forwarded to the underlying HTMLSpanElement
+ */ function ChipComponent(props, ref) {
     const { label, onCloseClick, closeButtonAriaLabel, ...rest } = props;
     const keyUpHandler = (e)=>{
         if (e.key === 'Backspace' || e.key === 'Delete') {
@@ -469,6 +536,7 @@ function Chip(props) {
     };
     return /*#__PURE__*/ jsxRuntime.jsxs(Container$8, {
         ...rest,
+        ref: ref,
         onKeyUp: keyUpHandler,
         children: [
             label,
@@ -484,6 +552,7 @@ function Chip(props) {
         ]
     });
 }
+const Chip = /*#__PURE__*/ React.forwardRef(ChipComponent);
 
 var ORIENTATION = /*#__PURE__*/ function(ORIENTATION) {
     ORIENTATION["HORIZONTAL"] = "horizontal";
@@ -493,15 +562,15 @@ var ORIENTATION = /*#__PURE__*/ function(ORIENTATION) {
 const DragContext = React.createContext(null);
 
 /** Styled component for the draggable item container */ const Item = /*#__PURE__*/ styled("div", {
-    target: "ews8uza0",
+    target: "ertl9d70",
     label: "Item"
-})("cursor:", (props)=>props.showIndicator ? 'default' : 'move', ";display:flex;user-select:", (props)=>props.showIndicator ? 'auto' : 'none', ";border-top:2px dashed\n        ", (props)=>props.orientation === ORIENTATION.VERTICAL && props.active > 0 ? getThemeValue(THEME_NAME.PRIMARY) : 'transparent', ";border-bottom:2px dashed\n        ", (props)=>props.orientation === ORIENTATION.VERTICAL && props.active < 0 ? getThemeValue(THEME_NAME.PRIMARY) : 'transparent', ";border-left:2px dashed\n        ", (props)=>props.orientation === ORIENTATION.HORIZONTAL && props.active > 0 ? getThemeValue(THEME_NAME.PRIMARY) : 'transparent', ";border-right:2px dashed\n        ", (props)=>props.orientation === ORIENTATION.HORIZONTAL && props.active < 0 ? 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), ";}");
+})("cursor:", (props)=>props.showIndicator ? 'default' : 'move', ";display:flex;user-select:", (props)=>props.showIndicator ? 'auto' : 'none', ";border-top:2px dashed\n        ", (props)=>props.orientation === ORIENTATION.VERTICAL && props.active !== null && props.active > 0 ? getThemeValue(THEME_NAME.PRIMARY) : 'transparent', ";border-bottom:2px dashed\n        ", (props)=>props.orientation === ORIENTATION.VERTICAL && props.active !== null && props.active < 0 ? getThemeValue(THEME_NAME.PRIMARY) : 'transparent', ";border-left:2px dashed\n        ", (props)=>props.orientation === ORIENTATION.HORIZONTAL && props.active !== null && props.active > 0 ? getThemeValue(THEME_NAME.PRIMARY) : 'transparent', ";border-right:2px dashed\n        ", (props)=>props.orientation === ORIENTATION.HORIZONTAL && props.active !== null && props.active < 0 ? 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 = /*#__PURE__*/ styled("div", {
-    target: "ews8uza1",
+    target: "ertl9d71",
     label: "DragKnob"
 })("padding-top:8px;cursor:move;touch-action:none;color:", getThemeValue(THEME_NAME.DISABLED), ";");
 /** Container for the children */ const Container$7 = /*#__PURE__*/ styled("div", {
-    target: "ews8uza2",
+    target: "ertl9d72",
     label: "Container"
 })("flex:1;");
 /**
@@ -552,8 +621,8 @@ const DragContext = React.createContext(null);
      * Drag start event handler
      * @param e Event
      */ const dragStartHandler = ()=>{
-        context.setStartIndex(index);
-        context.setIsDragging(true);
+        context?.setStartIndex(index);
+        context?.setIsDragging(true);
     };
     /**
      * Drag over event handler
@@ -561,7 +630,9 @@ const DragContext = React.createContext(null);
      */ const dragOverHandler = (e)=>{
         e.preventDefault();
         e.stopPropagation();
-        setActive(context.startIndex - index);
+        if (context && context.startIndex !== null) {
+            setActive(context.startIndex - index);
+        }
     };
     /**
      * Drag leave event handler
@@ -574,8 +645,8 @@ const DragContext = React.createContext(null);
      */ const dropHandler = (e)=>{
         e.preventDefault();
         setActive(0);
-        context.drop(index);
-        context.setIsDragging(false);
+        context?.drop(index);
+        context?.setIsDragging(false);
     };
     /**
      * Touch start event handler
@@ -586,9 +657,9 @@ const DragContext = React.createContext(null);
             clearTimeout(touchTimerRef.current);
         }
         touchTimerRef.current = setTimeout(()=>{
-            context.setStartIndex(index);
-            context.setIsDragging(true);
-            context.setDragOver(index);
+            context?.setStartIndex(index);
+            context?.setIsDragging(true);
+            context?.setDragOver(index);
             document.body.style.overflow = 'hidden';
             vibrate(50);
         }, 200);
@@ -600,7 +671,7 @@ const DragContext = React.createContext(null);
      */ const touchMoveHandler = (e)=>{
         const touch = e.touches[0];
         if (!touch) return;
-        if (context.isDragging) {
+        if (context?.isDragging) {
             e.preventDefault();
             // get the element under the touch point
             const el = document.elementFromPoint(touch.clientX, touch.clientY);
@@ -608,7 +679,7 @@ const DragContext = React.createContext(null);
             const overIndex = overAttr != null ? parseInt(overAttr, 10) : null;
             // if we know which index we're over, update visual state
             if (overIndex !== null) {
-                context.setDragOver(overIndex);
+                context?.setDragOver(overIndex);
             }
         } else if (touchTimerRef.current) {
             clearTimeout(touchTimerRef.current);
@@ -623,10 +694,10 @@ const DragContext = React.createContext(null);
             clearTimeout(touchTimerRef.current);
             touchTimerRef.current = null;
         }
-        if (context.isDragging) {
-            context.drop(dragOver);
+        if (context?.isDragging) {
+            context?.drop(dragOver);
             vibrate(50);
-            context.setIsDragging(false);
+            context?.setIsDragging(false);
             document.body.style.overflow = 'auto';
         }
     };
@@ -637,35 +708,35 @@ const DragContext = React.createContext(null);
         const isVertical = orientation === ORIENTATION.VERTICAL;
         const moveUp = isVertical ? 'ArrowUp' : 'ArrowLeft';
         const moveDown = isVertical ? 'ArrowDown' : 'ArrowRight';
-        const isGrabbed = context.isDragging && context.startIndex === index;
+        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, {
+                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, {
+                context?.startGrab(index);
+                setAnnouncement(context?.i18n.replacePlaceholders(context?.i18n.grabbedAnnouncementTemplate, {
                     position: index + 1
                 }));
             }
         } else if (e.key === 'Enter' && isGrabbed) {
             e.preventDefault();
-            context.drop(index);
-            setAnnouncement(context.i18n.replacePlaceholders(context.i18n.droppedAnnouncementTemplate, {
+            context?.drop(index);
+            setAnnouncement(context?.i18n.replacePlaceholders(context?.i18n.droppedAnnouncementTemplate, {
                 position: index + 1
             }));
         } else if (e.key === 'Escape' && isGrabbed) {
             e.preventDefault();
-            context.cancel();
-            setAnnouncement(context.i18n.cancelledAnnouncementTemplate);
+            context?.cancel();
+            setAnnouncement(context?.i18n.cancelledAnnouncementTemplate);
         } else if (isGrabbed) {
-            if (e.key === moveUp && index > 0) {
+            if (e.key === moveUp && index > 0 && context.startIndex !== null) {
                 e.preventDefault();
                 // Move without dropping - just reorder and update startIndex
                 const newIndex = index - 1;
@@ -674,7 +745,7 @@ const DragContext = React.createContext(null);
                 setAnnouncement(context.i18n.replacePlaceholders(context.i18n.movedAnnouncementTemplate, {
                     position: newIndex + 1
                 }));
-            } else if (e.key === moveDown && index < totalItems - 1) {
+            } else if (e.key === moveDown && index < totalItems - 1 && context.startIndex !== null) {
                 e.preventDefault();
                 // Move without dropping - just reorder and update startIndex
                 const newIndex = index + 1;
@@ -696,30 +767,30 @@ const DragContext = React.createContext(null);
         };
     }, []);
     /** Update active state based on dragOver changes */ React.useEffect(()=>{
-        if (context.isDragging && dragOver === index) {
-            setActive(context.startIndex - index);
+        if (context?.isDragging && context?.startIndex !== null && dragOver === index) {
+            setActive(context?.startIndex - index);
         } else {
             setActive(0);
         }
     }, [
         dragOver,
-        context.startIndex,
+        context?.startIndex,
         index,
-        context.isDragging
+        context?.isDragging
     ]);
     return /*#__PURE__*/ jsxRuntime.jsxs(Item, {
         draggable: !showIndicator,
         showIndicator: showIndicator,
         active: active,
-        dragging: context.isDragging && context.startIndex === index,
+        dragging: !!(context?.isDragging && context.startIndex === index),
         orientation: orientation,
         "data-drag-index": index,
         tabIndex: 0,
         role: "listitem",
-        "aria-label": context.i18n.replacePlaceholders(context.i18n.itemAriaLabelTemplate, {
+        "aria-label": context?.i18n.replacePlaceholders(context.i18n.itemAriaLabelTemplate, {
             position: index + 1
         }),
-        "aria-grabbed": context.isDragging && context.startIndex === index,
+        "aria-grabbed": context?.isDragging && context.startIndex === index,
         onKeyDown: handleKeyDown,
         onDragStart: !showIndicator ? dragStartHandler : undefined,
         onDragOver: dragOverHandler,
@@ -733,7 +804,7 @@ const DragContext = React.createContext(null);
             showIndicator && /*#__PURE__*/ jsxRuntime.jsx(DragKnob, {
                 draggable: true,
                 role: "button",
-                "aria-label": context.i18n.dragHandleAriaLabel,
+                "aria-label": context?.i18n.dragHandleAriaLabel,
                 onDragStart: dragStartHandler,
                 onTouchStart: touchStartHandler,
                 onKeyDown: handleKeyDown,
@@ -748,11 +819,11 @@ const DragContext = React.createContext(null);
 }
 
 /** Container Component */ const Container$6 = /*#__PURE__*/ styled("div", {
-    target: "emx1u4x0",
+    target: "e18d6tqk0",
     label: "Container"
 })("flex:1;display:flex;position:relative;flex-wrap:wrap;flex-direction:", (props)=>props.orientation === ORIENTATION.HORIZONTAL ? 'row' : 'column', ";");
 /** Visually hidden but accessible to screen readers */ const VisuallyHidden$2 = /*#__PURE__*/ styled("div", {
-    target: "emx1u4x1",
+    target: "e18d6tqk1",
     label: "VisuallyHidden"
 })("position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0;");
 /**
@@ -772,15 +843,19 @@ const DragContext = React.createContext(null);
  * </DragAndDrop>
  * ```
  *
- * @param {DragAndDropProps} props - The component props
- * @param {ORIENTATION} props.orientation - Determines the layout direction (horizontal or vertical). Defaults to VERTICAL.
- * @param {(start: number, end: number) => void} props.onDrop - Callback fired when an item is dropped, receives the start and end indices
- * @param {boolean} props.showIndicator - Whether to display drag indicators for each list item. Defaults to false.
- * @param {React.ReactNode} props.children - Child elements to be rendered as draggable items
+ * @param props - The component props
+ * @param props.orientation - Determines the layout direction (horizontal or vertical). Defaults to VERTICAL.
+ * @param props.onDrop - Callback fired when an item is dropped, receives the start and end indices
+ * @param props.showIndicator - Whether to display drag indicators for each list item. Defaults to false.
+ * @param props.children - Child elements to be rendered as draggable items
  *
- * @returns {JSX.Element} A draggable container with reorderable items
- */ function DragAndDrop(props) {
-    const { orientation, children, onDrop, showIndicator, itemAriaLabelTemplate, dragHandleAriaLabel, grabbedAnnouncementTemplate, movedAnnouncementTemplate, droppedAnnouncementTemplate, cancelledAnnouncementTemplate } = props;
+ * @returns A draggable container with reorderable items
+ */ /**
+ * DragAndDrop Component
+ * @param props - Component props
+ * @param ref - Ref forwarded to the underlying HTMLDivElement
+ */ function DragAndDropComponent(props, ref) {
+    const { orientation = ORIENTATION.VERTICAL, children, onDrop, showIndicator = false, itemAriaLabelTemplate = 'Item {:position}. Press {:grabKey} to grab, {:moveKeys} to move, {:dropKey} or {:altDropKey} to drop', dragHandleAriaLabel = 'Drag to reorder', grabbedAnnouncementTemplate = 'Item {:position} grabbed. Use {:moveKeys} to move, {:dropKey} or {:altDropKey} to drop, {:cancelKey} to cancel', movedAnnouncementTemplate = 'Item moved to position {:position}', droppedAnnouncementTemplate = 'Item dropped at position {:position}', cancelledAnnouncementTemplate = 'Drag cancelled, item restored to original position', ...rest } = props;
     const [startIndex, setStartIndex] = React.useState(null);
     const [originalIndex, setOriginalIndex] = React.useState(null);
     const [isDragging, setIsDragging] = React.useState(false);
@@ -807,7 +882,7 @@ const DragContext = React.createContext(null);
      * Drop handler invoked when a draggable item is released.
      * @param index
      */ const drop = (index)=>{
-        if (startIndex !== null) {
+        if (startIndex !== null && index !== null) {
             onDrop?.(startIndex, index);
         }
         setStartIndex(null);
@@ -847,6 +922,8 @@ const DragContext = React.createContext(null);
                     i18n
                 },
                 children: /*#__PURE__*/ jsxRuntime.jsx(Container$6, {
+                    ...rest,
+                    ref: ref,
                     orientation: orientation,
                     role: "list",
                     children: React.Children.map(childrenArray, (child, index)=>/*#__PURE__*/ jsxRuntime.jsx(DragItem, {
@@ -869,20 +946,11 @@ const DragContext = React.createContext(null);
         ]
     });
 }
-DragAndDrop.defaultProps = {
-    /** Orientation of the list layout */ orientation: 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'
-};
+const DragAndDrop = /*#__PURE__*/ React.forwardRef(DragAndDropComponent);
 
 // Label component for the ChipInput
 const Label$6 = /*#__PURE__*/ styled("label", {
-    target: "ey9yju70",
+    target: "e12jan4z0",
     label: "Label"
 })("display:inline-flex;flex-direction:column;flex:1;position:relative;margin:10px 5px;color:inherit;padding:0 8px;width:250px;border-radius:3px;border:1px solid ", getThemeValue(THEME_NAME.BORDER_COLOR), ";background-color:", getThemeValue(THEME_NAME.BACKGROUND), ";&:has(:focus),&:has(:active){border-color:", getThemeValue(THEME_NAME.PRIMARY), ";box-shadow:0 0 0 4px ", getThemeValue(THEME_NAME.PRIMARY_LIGHT), ";}&:has(:focus) > span,&:has(:active) > span{color:", getThemeValue(THEME_NAME.PRIMARY), ";}&:has(:disabled){border-color:", getThemeValue(THEME_NAME.DISABLED_BORDER), ";background-color:", getThemeValue(THEME_NAME.DISABLED_BACKGROUND), ";}&:has(:disabled) > span{color:", getThemeValue(THEME_NAME.DISABLED), ";}&:has(:focus:invalid){border-color:", getThemeValue(THEME_NAME.ERROR), ";box-shadow:0 0 0 4px ", getThemeValue(THEME_NAME.ERROR_LIGHT), ";}", (props)=>props.touched ? `
         &:has(:invalid) {
@@ -898,7 +966,11 @@ const Label$6 = /*#__PURE__*/ styled("label", {
         & > span {
             color: ${getThemeValue(THEME_NAME.ERROR)};
         }
-        ` : '', "    \n    &:has(:required) > span:after{content:'*';margin-left:2px;color:", getThemeValue(THEME_NAME.ERROR), ";}& > input{border:none;outline:none;line-height:30px;min-height:30px;max-width:95%;}& > span{position:absolute;padding:0 5px;top:0px;left:4px;font-size:14px;line-height:32px;transition:all 300ms ease;}&:has(:focus) > span,&:has(:placeholder-shown) > span{top:-8px;background:", getThemeValue(THEME_NAME.BACKGROUND), ";font-size:12px;line-height:14px;}", (props)=>props.text !== '' ? `
+        ` : '', "    \n    ", (props)=>props.required ? `& > span:after {
+                content: '*';
+                margin-left: 2px;
+                color: ${getThemeValue(THEME_NAME.ERROR)};
+            }` : '', "    \n\n    & > input{border:none;outline:none;line-height:30px;min-height:30px;max-width:95%;}& > span{position:absolute;padding:0 5px;top:0px;left:4px;font-size:14px;line-height:32px;transition:all 300ms ease;}&:has(:focus) > span,&:has(:placeholder-shown) > span{top:-8px;background:", getThemeValue(THEME_NAME.BACKGROUND), ";font-size:12px;line-height:14px;}", (props)=>props.text !== '' ? `
     & > span {
         top: -8px;
         background: ${getThemeValue(THEME_NAME.BACKGROUND)};
@@ -908,12 +980,12 @@ const Label$6 = /*#__PURE__*/ styled("label", {
     ` : '');
 // Error message container
 const ErrorContainer$4 = /*#__PURE__*/ styled("div", {
-    target: "ey9yju71",
+    target: "e12jan4z1",
     label: "ErrorContainer"
 })("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 = /*#__PURE__*/ styled("ul", {
-    target: "ey9yju72",
+    target: "e12jan4z2",
     label: "VisuallyHidden"
 })("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;}");
 /**
@@ -928,26 +1000,35 @@ const VisuallyHidden$1 = /*#__PURE__*/ styled("ul", {
  *   errorText="At least one tag is required"
  * />
  * ```
- */ function ChipInput(props) {
+ */ function ChipInputComponent(props, ref) {
+    const { value: propValue = [], closeButtonAriaLabel = `Remove {:label}`, addedAnnouncementTemplate = '{:label} was added', removedAnnouncementTemplate = '{:label} was removed' } = props;
     const [text, setText] = React.useState('');
     const [touched, setTouched] = React.useState(false);
-    const [value, setValue] = React.useState(props.value || []);
+    const [value, setValue] = React.useState(propValue || []);
     const InputRef = React.useRef(null);
     const [announcement, setAnnouncement] = React.useState('');
     const errorId = React.useId();
+    // Forward the underlying input element.
+    React.useImperativeHandle(ref, ()=>InputRef.current);
     /**
      * Replace {:label} placeholder in template string
      */ const replacePlaceholder = (template, label)=>{
         if (!template) return undefined;
         return template.replace(/\{:label\}/g, label);
     };
+    const prevPropValueRef = React.useRef(undefined);
     // Sync internal value with props.value
     React.useEffect(()=>{
-        if (Array.isArray(props.value)) {
-            setValue(props.value);
+        if (Array.isArray(propValue)) {
+            const prevValue = prevPropValueRef.current;
+            const isEqual = prevValue && propValue.length === prevValue.length && propValue.every((val, index)=>val === prevValue[index]);
+            if (!isEqual) {
+                setValue(propValue);
+                prevPropValueRef.current = propValue;
+            }
         }
     }, [
-        props.value
+        propValue
     ]);
     /**
      * Update the chip values and notify changes.
@@ -976,14 +1057,14 @@ const VisuallyHidden$1 = /*#__PURE__*/ styled("ul", {
      * Adds a new chip on Enter key press.
      * @param e React keyboard event
      */ const handleKeyUp = (e)=>{
-        if (e.key === 'Enter' && text.trim() !== '' && InputRef.current.validity.valid) {
+        if (e.key === 'Enter' && text.trim() !== '' && InputRef.current?.validity.valid) {
             const newValue = [
                 ...value,
                 text.trim()
             ];
             updateValue(newValue);
             setText('');
-            setAnnouncement(replacePlaceholder(props.addedAnnouncementTemplate, text.trim()));
+            setAnnouncement(replacePlaceholder(addedAnnouncementTemplate, text.trim()));
         }
     };
     /**
@@ -992,7 +1073,7 @@ const VisuallyHidden$1 = /*#__PURE__*/ styled("ul", {
      */ const removeChip = (chipToRemove)=>{
         const newValue = value.filter((chip)=>chip !== chipToRemove);
         updateValue(newValue);
-        setAnnouncement(replacePlaceholder(props.removedAnnouncementTemplate, chipToRemove));
+        setAnnouncement(replacePlaceholder(removedAnnouncementTemplate, chipToRemove));
     };
     /**
      * Moves a chip from one position to another.
@@ -1017,6 +1098,7 @@ const VisuallyHidden$1 = /*#__PURE__*/ styled("ul", {
                 text: text,
                 touched: touched,
                 errorText: props.errorText,
+                required: props.required,
                 children: [
                     /*#__PURE__*/ jsxRuntime.jsx("input", {
                         ...props,
@@ -1037,7 +1119,7 @@ const VisuallyHidden$1 = /*#__PURE__*/ styled("ul", {
                             children: value.map((chip)=>/*#__PURE__*/ jsxRuntime.jsx(Chip, {
                                     label: chip,
                                     onCloseClick: ()=>removeChip(chip),
-                                    closeButtonAriaLabel: replacePlaceholder(props.closeButtonAriaLabel, chip)
+                                    closeButtonAriaLabel: replacePlaceholder(closeButtonAriaLabel, chip)
                                 }, chip))
                         })
                     }),
@@ -1058,21 +1140,7 @@ const VisuallyHidden$1 = /*#__PURE__*/ styled("ul", {
         ]
     });
 }
-ChipInput.propTypes = {
-    /** Label for the field */ label: PropTypes.string.isRequired,
-    /** Error message for the field */ errorText: PropTypes.string,
-    /** Values to display as chips */ 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'
-};
+const ChipInput = /*#__PURE__*/ React.forwardRef(ChipInputComponent);
 
 /** Enums for layer position on screen. */ var LAYER_POSITION = /*#__PURE__*/ function(LAYER_POSITION) {
     LAYER_POSITION[LAYER_POSITION["TOP_LEFT"] = 0] = "TOP_LEFT";
@@ -1103,7 +1171,7 @@ ChipInput.defaultProps = {
     [6]: 'top: 0; left: 0; justify-content: center; align-items: center;'
 };
 /** Layer container component. */ const Container$5 = /*#__PURE__*/ styled("div", {
-    target: "euaj5y50",
+    target: "erw6k0c0",
     label: "Container"
 })("position:fixed;display:flex;opacity:0;transition:opacity 0.3s ease;", (props)=>POSITION_STYLE[props.position], " ", (props)=>props.overlay && `
         width: 100%;
@@ -1158,7 +1226,7 @@ ChipInput.defaultProps = {
      * react to esc key press.
      */ constructor(){
         /** Layer stack */ this.layers = [];
-        /** z-index of the next layer */ this.nextIndex = 10000;
+        /** z-index of the next layer */ this.nextIndex = 0;
         this.timeoutIds = new Map(); // Track timeouts
         // Add cleanup method
         this.destroy = ()=>{
@@ -1194,14 +1262,21 @@ ChipInput.defaultProps = {
                 this.timeoutIds.delete(layer.id);
                 try {
                     layer.config.closeCallback?.(resp);
-                } catch (e) {
-                    console.warn(e.message);
+                } catch (err) {
+                    if (err instanceof Error) {
+                        console.warn(err.message);
+                    } else {
+                        console.warn(err);
+                    }
                 }
                 // Clear reference to help GC
                 layer.config.component = null;
             }, layer.config.exitDelay);
             this.timeoutIds.set(layer.id, timeoutId);
         };
+        this.Empty = ()=>{
+            return null;
+        };
         /**
      * Renders a layer.
      * @param config
@@ -1209,7 +1284,7 @@ ChipInput.defaultProps = {
             // SSR guard
             if (typeof document === 'undefined') {
                 return [
-                    ()=>null,
+                    /*#__PURE__*/ React.forwardRef(this.Empty),
                     ()=>{}
                 ];
             }
@@ -1219,10 +1294,12 @@ ChipInput.defaultProps = {
                 ...config
             };
             // Get the z-index for the new layer
-            const currentIndex = layerConfig.alwaysOnTop ? 2147483647 : this.nextIndex++;
+            const currentIndex = layerConfig.alwaysOnTop ? 2147483647 : 10000 + 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 layerId = `${className}-${currentIndex + this.nextIndex}`;
+            // Always increment for next layer
+            this.nextIndex += 1;
             const overlayClickHandler = ()=>{
                 const layer = this.layers.find((l)=>l.id === layerId);
                 if (layer && layer.config.closeOnOverlayClick !== false) {
@@ -1235,105 +1312,108 @@ ChipInput.defaultProps = {
                     this.unmount(layer, resp);
                 }
             };
-            // Return callback which will trigger the un-mount.
-            return [
-                ()=>{
-                    const [divElement, setDivElement] = React.useState(null);
-                    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
-                        const currentLayer = {
-                            id: layerId,
-                            config: layerConfig,
-                            element: div
-                        };
-                        this.layers.push(currentLayer);
-                        setDivElement(div);
-                        // Add entry animation class after a short delay
-                        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
-                                        });
-                                    }
+            const LayerContainer = (props, ref)=>{
+                const [divElement, setDivElement] = React.useState(null);
+                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
+                    const currentLayer = {
+                        id: layerId,
+                        config: layerConfig,
+                        element: div
+                    };
+                    this.layers.push(currentLayer);
+                    setDivElement(div);
+                    // Add entry animation class after a short delay
+                    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);
                             }
-                            // Remove from layers array
-                            const index = this.layers.findIndex((layer)=>layer.id === layerId);
-                            if (index !== -1) {
-                                this.layers.splice(index, 1);
-                            }
-                        };
-                    }, []); // Empty dependency array - run only once
-                    if (!divElement) {
-                        return null;
+                        });
+                        // 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`;
                     }
-                    return /*#__PURE__*/ ReactDOM.createPortal(/*#__PURE__*/ jsxRuntime.jsx(Container$5, {
-                        onClick: overlayClickHandler,
-                        zIndex: currentIndex,
-                        ...layerConfig,
-                        children: layerConfig.component
-                    }), divElement);
-                },
+                    // 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);
+                        }
+                        // Remove from layers array
+                        const index = this.layers.findIndex((layer)=>layer.id === layerId);
+                        if (index !== -1) {
+                            this.layers.splice(index, 1);
+                        }
+                    };
+                }, []); // Empty dependency array - run only once
+                if (!divElement) {
+                    return null;
+                }
+                return /*#__PURE__*/ reactDom.createPortal(/*#__PURE__*/ jsxRuntime.jsx(Container$5, {
+                    ...props,
+                    ref: ref,
+                    onClick: overlayClickHandler,
+                    zIndex: currentIndex,
+                    ...layerConfig,
+                    children: layerConfig.component
+                }), divElement);
+            };
+            // Return callback which will trigger the un-mount.
+            return [
+                /*#__PURE__*/ React.forwardRef(LayerContainer),
                 closeFn
             ];
         };
@@ -1355,7 +1435,7 @@ ChipInput.defaultProps = {
 var LayerManager$1 = new LayerManager();
 
 const DialogContainer = /*#__PURE__*/ styled(Card, {
-    target: "ej4fpry0",
+    target: "e1sxvvof0",
     label: "DialogContainer"
 })("max-width:768px;max-height:80vh;transform:scale(0);opacity:0;transition:all 0.3s ease;.nf-layer-enter &{opacity:1;transform:scale(1);}.nf-layer-exit &{opacity:0;transform:scale(0);}");
 class Dialog extends React.Component {
@@ -1380,7 +1460,7 @@ class Dialog extends React.Component {
         }
     }
     constructor(...args){
-        super(...args), this.lastFocusedElement = null, this.dialogRef = /*#__PURE__*/ React.createRef(), this.state = {
+        super(...args), this.closeDialog = null, this.onCloseFn = null, this.lastFocusedElement = null, this.dialogRef = /*#__PURE__*/ React.createRef(), this.state = {
             show: false,
             LayerComponent: undefined
         }, /**
@@ -1429,6 +1509,13 @@ class Dialog extends React.Component {
             if (node) {
                 this.setInitialFocus(node);
             }
+            if (this.props.forwardRef) {
+                if (typeof this.props.forwardRef === 'function') {
+                    this.props.forwardRef(node);
+                } else {
+                    this.props.forwardRef.current = node;
+                }
+            }
         }, /**
      * Sets initial focus within the dialog.
      * Tries to focus the header first, then the first interactive element, or falls back to the container.
@@ -1459,9 +1546,9 @@ class Dialog extends React.Component {
                 closeOnOverlayClick,
                 position: LAYER_POSITION.DIALOG,
                 component: /*#__PURE__*/ jsxRuntime.jsx(DialogContainer, {
+                    role: "dialog",
                     ...rest,
                     ref: this.setDialogRef,
-                    role: "dialog",
                     "aria-modal": "true",
                     tabIndex: -1,
                     onKeyDown: this.handleKeyDown,
@@ -1475,7 +1562,7 @@ class Dialog extends React.Component {
                 show: true,
                 LayerComponent: Component
             });
-            this.onCloseFn = closeCallback;
+            this.onCloseFn = closeCallback ?? null;
         }, this.close = (resp)=>{
             this.closeDialog?.(resp);
         }, this.closeCallback = (resp)=>{
@@ -1488,10 +1575,6 @@ class Dialog extends React.Component {
         };
     }
 }
-Dialog.propTypes = {
-    /** Flag to close dialog on `esc` click. Default value is true. */ closeOnEsc: PropTypes.bool,
-    /** Close layer overlay is clicked. Default value is true. */ closeOnOverlayClick: PropTypes.bool
-};
 Dialog.defaultProps = {
     closeOnEsc: true,
     closeOnOverlayClick: true
@@ -1520,7 +1603,7 @@ class AlertDialog extends React.Component {
                     children: this.props.body
                 }),
                 /*#__PURE__*/ jsxRuntime.jsx(Footer$1, {
-                    children: /*#__PURE__*/ jsxRuntime.jsx(StyledButton, {
+                    children: /*#__PURE__*/ jsxRuntime.jsx(Button$2, {
                         onClick: this.close,
                         children: this.props.buttonText
                     })
@@ -1532,17 +1615,11 @@ class AlertDialog extends React.Component {
         super(...args), this.dialog = /*#__PURE__*/ React.createRef(), this.show = ()=>{
             return new Promise((resolve)=>{
                 const onClose = ()=>resolve(null);
-                this.dialog.current.open(onClose);
+                this.dialog.current?.open(onClose);
             });
-        }, this.close = ()=>this.dialog.current.close();
+        }, this.close = ()=>this.dialog.current?.close();
     }
 }
-AlertDialog.propTypes = {
-    /** Shown as header of the dialog */ header: PropTypes.string,
-    /** Rendered in the body. */ body: PropTypes.any.isRequired,
-    /** Accept button text, default value is `OK` */ buttonText: PropTypes.string,
-    /** props for the dialog */ dialogProps: PropTypes.object
-};
 AlertDialog.defaultProps = {
     buttonText: 'OK'
 };
@@ -1564,7 +1641,7 @@ class ConfirmDialog extends React.Component {
                 }),
                 /*#__PURE__*/ jsxRuntime.jsxs(Footer$1, {
                     children: [
-                        /*#__PURE__*/ jsxRuntime.jsx(StyledButton, {
+                        /*#__PURE__*/ jsxRuntime.jsx(Button$2, {
                             onClick: this.cancel,
                             children: noText
                         }),
@@ -1587,29 +1664,22 @@ class ConfirmDialog extends React.Component {
                         reject();
                     }
                 };
-                this.dialog.current.open(onClose);
+                this.dialog.current?.open(onClose);
             });
-        }, this.cancel = ()=>this.dialog.current.close(false), this.confirm = ()=>this.dialog.current.close(true);
+        }, this.cancel = ()=>this.dialog.current?.close(false), this.confirm = ()=>this.dialog.current?.close(true);
     }
 }
-ConfirmDialog.propTypes = {
-    /** Shown as header of the dialog */ header: PropTypes.string,
-    /** Rendered as body of the dialog */ body: PropTypes.string.isRequired,
-    /** Accept button text */ yesText: PropTypes.string,
-    /** Reject button text */ noText: PropTypes.string,
-    /** Props for the dialog */ dialogProps: PropTypes.object
-};
 ConfirmDialog.defaultProps = {
     yesText: 'Yes',
     noText: 'No'
 };
 
 const Label$5 = /*#__PURE__*/ styled("label", {
-    target: "e1hw2ebx0",
+    target: "el9i5v60",
     label: "Label"
 })("display:inline-flex;flex-direction:column;position:relative;margin:10px 5px;");
 const TextField$1 = /*#__PURE__*/ styled("input", {
-    target: "e1hw2ebx1",
+    target: "el9i5v61",
     label: "TextField"
 })("outline:none;color:inherit;padding:0 8px;line-height:30px;min-height:30px;width:250px;border-radius:3px;border:1px solid ", getThemeValue(THEME_NAME.BORDER_COLOR), ";display:inline-block;background-color:", getThemeValue(THEME_NAME.BACKGROUND), ";&:focus,&:active{border-color:", getThemeValue(THEME_NAME.PRIMARY), ";box-shadow:0 0 0 4px ", getThemeValue(THEME_NAME.PRIMARY_LIGHT), ";}&:focus + span,&:active + span{color:", getThemeValue(THEME_NAME.PRIMARY), ";}&:disabled{border-color:", getThemeValue(THEME_NAME.DISABLED_BORDER), ";background-color:", getThemeValue(THEME_NAME.DISABLED_BACKGROUND), ";padding:0 8px;}&:disabled + span{color:", getThemeValue(THEME_NAME.DISABLED), ";}&:focus:invalid{border-color:", getThemeValue(THEME_NAME.ERROR), ";box-shadow:0 0 0 4px ", getThemeValue(THEME_NAME.ERROR_LIGHT), ";}", (props)=>props.touched ? `
     &:invalid {
@@ -1634,16 +1704,22 @@ const TextField$1 = /*#__PURE__*/ styled("input", {
     }
     ` : '', "    &:focus + span,&:placeholder-shown + span{top:-8px;background:", getThemeValue(THEME_NAME.BACKGROUND), ";font-size:12px;line-height:14px;}");
 const ErrorContainer$3 = /*#__PURE__*/ styled("div", {
-    target: "e1hw2ebx2",
+    target: "el9i5v62",
     label: "ErrorContainer"
 })("color:", getThemeValue(THEME_NAME.ERROR), ";padding-top:3px;font-size:12px;line-height:14px;margin-left:3px;");
-const Input$2 = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+/**
+ * Input Component
+ * @param props - Component props
+ * @param ref - Ref forwarded to the underlying HTMLInputElement
+ */ const Input$2 = /*#__PURE__*/ React.forwardRef((props, ref)=>{
     const [touched, setTouched] = React.useState(false);
     const [value, setValue] = React.useState(props.value || '');
     const errorId = React.useId();
+    const prevValueRef = React.useRef(undefined);
     React.useEffect(()=>{
-        if (props.value !== undefined) {
+        if (props.value !== undefined && props.value !== prevValueRef.current) {
             setValue(props.value);
+            prevValueRef.current = props.value;
         }
     }, [
         props.value
@@ -1686,17 +1762,13 @@ const Input$2 = /*#__PURE__*/ React.forwardRef((props, ref)=>{
     });
 });
 Input$2.displayName = 'Input';
-Input$2.propTypes = {
-    /** Label for the field */ label: PropTypes.string,
-    /** Error text to be shown below the field */ errorText: PropTypes.string
-};
 
 const Label$4 = /*#__PURE__*/ styled("label", {
-    target: "ee4amtm0",
+    target: "e1j32tnv0",
     label: "Label"
 })("display:inline-flex;flex-direction:column;position:relative;margin:10px 5px;");
 const TextField = /*#__PURE__*/ styled("textarea", {
-    target: "ee4amtm1",
+    target: "e1j32tnv1",
     label: "TextField"
 })("border:none;color:inherit;padding:8px;min-height:150px;min-width:250px;border-radius:3px;border:1px solid ", getThemeValue(THEME_NAME.BORDER_COLOR), ";display:inline-block;background-color:", getThemeValue(THEME_NAME.BACKGROUND), ";&:focus,&:active{border-color:", getThemeValue(THEME_NAME.PRIMARY), ";box-shadow:0 0 0 4px ", getThemeValue(THEME_NAME.PRIMARY_LIGHT), ";}&:focus + span,&:active + span{color:", getThemeValue(THEME_NAME.PRIMARY), ";}&:disabled{border-color:", getThemeValue(THEME_NAME.DISABLED_BORDER), ";background-color:", getThemeValue(THEME_NAME.DISABLED_BACKGROUND), ";}&:disabled + span{color:", getThemeValue(THEME_NAME.DISABLED), ";}&:focus:invalid{border-color:", getThemeValue(THEME_NAME.ERROR), ";box-shadow:0 0 0 4px ", getThemeValue(THEME_NAME.ERROR_LIGHT), ";}", (props)=>props.touched ? `
     &:invalid {
@@ -1721,19 +1793,26 @@ const TextField = /*#__PURE__*/ styled("textarea", {
     }
     ` : '', "    &:focus + span,&:placeholder-shown + span{top:-8px;background:", getThemeValue(THEME_NAME.BACKGROUND), ";font-size:12px;line-height:14px;}");
 const ErrorContainer$2 = /*#__PURE__*/ styled("div", {
-    target: "ee4amtm2",
+    target: "e1j32tnv2",
     label: "ErrorContainer"
 })("color:", getThemeValue(THEME_NAME.ERROR), ";padding-top:3px;font-size:12px;line-height:14px;margin-left:3px;");
-function TextArea(props) {
+/**
+ * TextArea Component
+ * @param props - Component props
+ * @param ref - Ref forwarded to the underlying HTMLTextAreaElement
+ */ function TextAreaComponent(props, ref) {
+    const { label, errorText, value: propsValue, required, ...rest } = props;
     const [touched, setTouched] = React.useState(false);
-    const [value, setValue] = React.useState(props.value || '');
+    const [value, setValue] = React.useState(propsValue || '');
     const errorId = React.useId();
+    const prevValueRef = React.useRef(undefined);
     React.useEffect(()=>{
-        if (props.value !== undefined) {
-            setValue(props.value);
+        if (propsValue !== undefined && propsValue !== prevValueRef.current) {
+            setValue(propsValue);
+            prevValueRef.current = propsValue;
         }
     }, [
-        props.value
+        propsValue
     ]);
     const handleFocus = (e)=>{
         setTouched(true);
@@ -1752,36 +1831,35 @@ function TextArea(props) {
     return /*#__PURE__*/ jsxRuntime.jsxs(Label$4, {
         children: [
             /*#__PURE__*/ jsxRuntime.jsx(TextField, {
-                ...props,
+                ...rest,
+                ref: ref,
                 value: value,
                 onChange: onChangeHandler,
                 onFocus: handleFocus,
                 touched: touched,
-                "aria-invalid": !!props.errorText,
-                "aria-required": props.required,
-                "aria-describedby": props.errorText ? errorId : undefined
+                required: required,
+                "aria-invalid": !!errorText,
+                "aria-required": required,
+                "aria-describedby": errorText ? errorId : undefined
             }),
             /*#__PURE__*/ jsxRuntime.jsx("span", {
-                children: props.label
+                children: label
             }),
-            props.errorText && /*#__PURE__*/ jsxRuntime.jsx(ErrorContainer$2, {
+            errorText && /*#__PURE__*/ jsxRuntime.jsx(ErrorContainer$2, {
                 id: errorId,
-                children: props.errorText
+                children: errorText
             })
         ]
     });
 }
-TextArea.propTypes = {
-    /** Label for the field */ label: PropTypes.string,
-    /** Error text to be shown below the field */ errorText: PropTypes.string
-};
+const TextArea = /*#__PURE__*/ React.forwardRef(TextAreaComponent);
 
 const Label$3 = /*#__PURE__*/ styled("label", {
-    target: "eao61d00",
+    target: "e13b7jm0",
     label: "Label"
 })("display:inline-flex;flex-direction:column;position:relative;margin:10px 5px;pointer-events:none;max-width:268px;& svg{fill:currentColor;}");
 const SelectField = /*#__PURE__*/ styled("select", {
-    target: "eao61d01",
+    target: "e13b7jm1",
     label: "SelectField"
 })("border:none;color:inherit;padding:0 8px;line-height:30px;min-height:32px;width:268px;border-radius:3px;border:1px solid ", getThemeValue(THEME_NAME.BORDER_COLOR), ";display:inline-block;background-color:", getThemeValue(THEME_NAME.BACKGROUND), ";pointer-events:auto;appearance:none;&:focus,&:active{border-color:", getThemeValue(THEME_NAME.PRIMARY), ";box-shadow:0 0 0 4px ", getThemeValue(THEME_NAME.PRIMARY_LIGHT), ";}&:focus ~ span,&:active ~ span{color:", getThemeValue(THEME_NAME.PRIMARY), ";}&:disabled{border-color:", getThemeValue(THEME_NAME.DISABLED_BORDER), ";background-color:", getThemeValue(THEME_NAME.DISABLED_BACKGROUND), ";}&:disabled ~ span{color:", getThemeValue(THEME_NAME.DISABLED), ";}&:focus:invalid{border-color:", getThemeValue(THEME_NAME.ERROR), ";box-shadow:0 0 0 4px ", getThemeValue(THEME_NAME.ERROR_LIGHT), ";}", (props)=>props.touched ? `
     &:invalid {
@@ -1806,20 +1884,26 @@ const SelectField = /*#__PURE__*/ styled("select", {
     }
     ` : '', "    &:focus + span,&:placeholder-shown + span{top:-8px;background:", getThemeValue(THEME_NAME.BACKGROUND), ";font-size:12px;line-height:14px;}");
 const ErrorContainer$1 = /*#__PURE__*/ styled("div", {
-    target: "eao61d02",
+    target: "e13b7jm2",
     label: "ErrorContainer"
 })("color:", getThemeValue(THEME_NAME.ERROR), ";padding-top:3px;font-size:12px;line-height:14px;margin-left:3px;");
 const ArrowContainer$1 = /*#__PURE__*/ styled("span", {
-    target: "eao61d03",
+    target: "e13b7jm3",
     label: "ArrowContainer"
 })("position:absolute;right:8px;top:8px;");
-function Select(props) {
+/**
+ * Select Component
+ * @param props - Component props
+ * @param ref - Ref forwarded to the underlying HTMLSelectElement
+ */ function SelectComponent(props, ref) {
     const [touched, setTouched] = React.useState(false);
     const [value, setValue] = React.useState(props.value || '');
     const errorId = React.useId();
+    const prevValueRef = React.useRef(undefined);
     React.useEffect(()=>{
-        if (props.value !== undefined) {
+        if (props.value !== undefined && props.value !== prevValueRef.current) {
             setValue(props.value);
+            prevValueRef.current = props.value;
         }
     }, [
         props.value
@@ -1842,6 +1926,7 @@ function Select(props) {
         children: [
             /*#__PURE__*/ jsxRuntime.jsxs(SelectField, {
                 ...props,
+                ref: ref,
                 multiple: false,
                 value: value,
                 onChange: onChangeHandler,
@@ -1869,70 +1954,77 @@ function Select(props) {
         ]
     });
 }
-Select.propTypes = {
-    /** Label for the field */ label: PropTypes.string,
-    /** Error text to be shown below the field */ errorText: PropTypes.string
-};
+const Select = /*#__PURE__*/ React.forwardRef(SelectComponent);
 
 const Label$2 = /*#__PURE__*/ styled("label", {
-    target: "e16qfxit0",
+    target: "e10ud8wb0",
     label: "Label"
 })("margin:5px 0;position:relative;display:inline-flex;align-items:center;cursor:pointer;");
 const StyledCheckmark = /*#__PURE__*/ styled("span", {
-    target: "e16qfxit1",
+    target: "e10ud8wb1",
     label: "StyledCheckmark"
 })("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;flex-shrink:0;&::after{content:'';width:3px;height:10px;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 = /*#__PURE__*/ styled("input", {
-    target: "e16qfxit2",
+    target: "e10ud8wb2",
     label: "HiddenInput"
 })("opacity:0;width:0;height:0;position:absolute;margin:0;&:checked + ", StyledCheckmark, "{background-color:", getThemeValue(THEME_NAME.PRIMARY), ";border-color:", getThemeValue(THEME_NAME.PRIMARY), ";}&:checked + ", StyledCheckmark, "::after{opacity:1;transform:rotate(45deg) scale(1);}&:indeterminate + ", StyledCheckmark, "{background-color:", getThemeValue(THEME_NAME.PRIMARY), ";border-color:", getThemeValue(THEME_NAME.PRIMARY), ";}&:indeterminate + ", StyledCheckmark, "::after{opacity:1;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;}&: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:", getThemeValue(THEME_NAME.PRIMARY), ";}&:enabled:hover + ", StyledCheckmark, "{border-color:", getThemeValue(THEME_NAME.PRIMARY), ";}&:enabled:hover ~ span{color:", getThemeValue(THEME_NAME.PRIMARY), ";}&:disabled + ", StyledCheckmark, "{border-color:", getThemeValue(THEME_NAME.DISABLED_BORDER), ";cursor:not-allowed;}&:disabled ~ span{color:", getThemeValue(THEME_NAME.DISABLED), ";cursor:not-allowed;}&:checked:disabled + ", StyledCheckmark, ",&:indeterminate:disabled + ", StyledCheckmark, "{background-color:", getThemeValue(THEME_NAME.DISABLED), ";}");
-function Checkbox(props) {
+/**
+ * Checkbox Component
+ * @param props - Component props
+ * @param fwdRef - Ref forwarded to the underlying HTMLInputElement
+ */ function CheckboxComponent(props, fwdRef) {
+    const { label = '', indeterminate = false, checked, ...rest } = props;
     const ref = React.useCallback((node)=>{
-        if (node !== null) {
-            if (props.indeterminate) {
-                node.indeterminate = true;
-            }
+        // Ensure the DOM `indeterminate` flag always matches the prop
+        if (node) {
+            node.indeterminate = !!indeterminate;
+        }
+        // Forward the node (or null) to the parent ref (supports function or ref object)
+        if (typeof fwdRef === 'function') {
+            fwdRef(node);
+        } else if (fwdRef) {
+            fwdRef.current = node;
         }
     }, [
-        props.indeterminate
+        indeterminate,
+        fwdRef
     ]);
     return /*#__PURE__*/ jsxRuntime.jsxs(Label$2, {
         children: [
             /*#__PURE__*/ jsxRuntime.jsx(HiddenInput$1, {
-                ...props,
+                ...rest,
                 ref: ref,
                 type: "checkbox",
-                "aria-checked": props.indeterminate ? 'mixed' : props.checked
+                checked: checked,
+                "aria-checked": indeterminate ? 'mixed' : checked
             }),
             /*#__PURE__*/ jsxRuntime.jsx(StyledCheckmark, {}),
             /*#__PURE__*/ jsxRuntime.jsx("span", {
-                children: props.label
+                children: label
             })
         ]
     });
 }
-Checkbox.propTypes = {
-    /** Label for the field */ label: PropTypes.string,
-    /** If the field is in indeterminate state */ indeterminate: PropTypes.bool
-};
-Checkbox.defaultProps = {
-    indeterminate: false,
-    label: ''
-};
+const Checkbox = /*#__PURE__*/ React.forwardRef(CheckboxComponent);
 
 const Switch = /*#__PURE__*/ styled("label", {
-    target: "ecfiyvb0",
+    target: "e185uavx0",
     label: "Switch"
 })("position:relative;display:inline-flex;margin:5px 0;");
 const Input$1 = /*#__PURE__*/ styled("input", {
-    target: "ecfiyvb1",
+    target: "e185uavx1",
     label: "Input"
 })("position:absolute;width:0;height:0;appearance:none;margin:0;& + span{position:relative;cursor:pointer;width:30px;height:18px;background-color:", getThemeValue(THEME_NAME.LIGHT_GREY), ";transition:0.4s;border-radius:10px;padding:0 3px;margin:0 10px 0 5px;}& + span:before{position:absolute;content:'';height:14px;width:14px;left:1px;top:1px;border:1px solid ", getThemeValue(THEME_NAME.DISABLED_BORDER), ";border-radius:50%;background-color:", getThemeValue(THEME_NAME.BACKGROUND), ";transition:0.4s;}&:checked + span{background-color:", getThemeValue(THEME_NAME.PRIMARY_LIGHT), ";}&:checked + span:before{transform:translateX(18px);border-color:", getThemeValue(THEME_NAME.PRIMARY), ";}&:enabled:focus + span:before{box-shadow:0 0 0 3px ", getThemeValue(THEME_NAME.PRIMARY_LIGHT), ";border-color:", getThemeValue(THEME_NAME.PRIMARY), ";}&:enabled:hover ~ span{cursor:pointer;color:", getThemeValue(THEME_NAME.PRIMARY), ";}&:disabled ~ span{color:", getThemeValue(THEME_NAME.DISABLED_BORDER), ";}&:disabled + span{background-color:", getThemeValue(THEME_NAME.LIGHT_GREY), ";cursor:not-allowed;}&:disabled + span:before{background-color:", getThemeValue(THEME_NAME.BORDER_LIGHT_COLOR), ";border-color:", getThemeValue(THEME_NAME.DISABLED_BORDER), ";}");
-function Toggle(props) {
+/**
+ * Toggle Component
+ * @param props - Component props
+ * @param ref - Ref forwarded to the underlying HTMLInputElement
+ */ function ToggleComponent(props, ref) {
     return /*#__PURE__*/ jsxRuntime.jsxs(Switch, {
         children: [
             /*#__PURE__*/ jsxRuntime.jsx(Input$1, {
                 ...props,
+                ref: ref,
                 type: "checkbox",
                 role: "switch",
                 "aria-checked": props.checked
@@ -1944,73 +2036,80 @@ function Toggle(props) {
         ]
     });
 }
-Toggle.propTypes = {
-    /** Label for the field */ label: PropTypes.string
-};
+const Toggle = /*#__PURE__*/ React.forwardRef(ToggleComponent);
 
 const Label$1 = /*#__PURE__*/ styled("label", {
-    target: "e1ji8xn0",
+    target: "e12cx2u30",
     label: "Label"
 })("display:inline-flex;align-items:center;margin:5px 0;cursor:pointer;position:relative;");
 const StyledRadio = /*#__PURE__*/ styled("span", {
-    target: "e1ji8xn1",
+    target: "e12cx2u31",
     label: "StyledRadio"
 })("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;&::after{content:'';width:100%;height:100%;border-radius:50%;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 = /*#__PURE__*/ styled("input", {
-    target: "e1ji8xn2",
+    target: "e12cx2u32",
     label: "HiddenInput"
 })("opacity:0;width:0;height:0;position:absolute;margin:0;&:checked + ", StyledRadio, "{border-color:", getThemeValue(THEME_NAME.PRIMARY), ";background-color:", getThemeValue(THEME_NAME.PRIMARY), ";}&:checked + ", StyledRadio, "::after{opacity:1;}&:enabled:focus + ", StyledRadio, "{border-color:", getThemeValue(THEME_NAME.PRIMARY), ";box-shadow:0 0 0 3px ", getThemeValue(THEME_NAME.PRIMARY_LIGHT), ";}&:enabled:checked:focus + ", StyledRadio, "{border-color:", getThemeValue(THEME_NAME.PRIMARY), ";box-shadow:0 0 0 3px ", getThemeValue(THEME_NAME.PRIMARY_LIGHT), ";}&:enabled:hover + ", StyledRadio, "{border-color:", getThemeValue(THEME_NAME.PRIMARY), ";}&:enabled:hover ~ span{color:", getThemeValue(THEME_NAME.PRIMARY), ";}&:disabled + ", StyledRadio, "{border-color:", getThemeValue(THEME_NAME.DISABLED_BORDER), ";background-color:", getThemeValue(THEME_NAME.LIGHT_GREY), ";cursor:not-allowed;}&:disabled:checked + ", StyledRadio, "{border-color:", getThemeValue(THEME_NAME.DISABLED_BORDER), ";background-color:", getThemeValue(THEME_NAME.DISABLED_BORDER), ";}&:disabled ~ span{color:", getThemeValue(THEME_NAME.DISABLED_BORDER), ";cursor:not-allowed;}");
-function Radio(props) {
+/**
+ * Radio Component
+ * @param props - Component props
+ * @param ref - Ref forwarded to the underlying HTMLInputElement
+ */ function RadioComponent(props, ref) {
+    const { label, ...rest } = props;
     return /*#__PURE__*/ jsxRuntime.jsxs(Label$1, {
         children: [
             /*#__PURE__*/ jsxRuntime.jsx(HiddenInput, {
-                ...props,
+                ...rest,
+                ref: ref,
                 type: "radio"
             }),
             /*#__PURE__*/ jsxRuntime.jsx(StyledRadio, {}),
             /*#__PURE__*/ jsxRuntime.jsx("span", {
-                children: props.label
+                children: label
             })
         ]
     });
 }
-Radio.propTypes = {
-    /** Label for the field */ label: PropTypes.string
-};
+const Radio = /*#__PURE__*/ React.forwardRef(RadioComponent);
 
 const Input = /*#__PURE__*/ styled("input", {
-    target: "e1ed8pyp0",
+    target: "e1yp0s5y0",
     label: "Input"
 })("appearance:none;margin:0;width:0;& + span{color:", getThemeValue(THEME_NAME.PRIMARY), ";padding:6px 12px;border:none;border:1px solid ", getThemeValue(THEME_NAME.PRIMARY), ";cursor:pointer;margin-right:-1px;line-height:18px;}&:enabled:focus + span{box-shadow:0 0 0 4px ", getThemeValue(THEME_NAME.PRIMARY_LIGHT), ";}&:enabled:hover + span{background-color:", getThemeValue(THEME_NAME.PRIMARY_LIGHT), ";color:", getThemeValue(THEME_NAME.TEXT_COLOR_LIGHT), ";}&:enabled:checked + span{background-color:", getThemeValue(THEME_NAME.PRIMARY), ";color:", getThemeValue(THEME_NAME.TEXT_COLOR_LIGHT), ";}&:disabled + span{background-color:", getThemeValue(THEME_NAME.BORDER_LIGHT_COLOR), ";color:", getThemeValue(THEME_NAME.DISABLED_BORDER), ";}&:disabled:checked + span{background-color:", getThemeValue(THEME_NAME.DISABLED_BORDER), ";color:", getThemeValue(THEME_NAME.TEXT_COLOR_LIGHT), ";}");
 const Label = /*#__PURE__*/ styled("label", {
-    target: "e1ed8pyp1",
+    target: "e1yp0s5y1",
     label: "Label"
 })("display:inline-flex;&:focus-within{z-index:1;}");
 const RadioGroup = /*#__PURE__*/ styled("div", {
-    target: "e1ed8pyp2",
+    target: "e1yp0s5y2",
     label: "RadioGroup"
 })("display:inline-flex;align-items:center;border-radius:3px;margin:5px 0;& ", Label, ":first-child > span{border-radius:3px 0 0 3px;}& ", Label, ":last-child > span{border-radius:0 3px 3px 0;}");
-function RadioButton(props) {
+/**
+ * RadioButton Component
+ * @param props - Component props
+ * @param ref - Ref forwarded to the underlying HTMLInputElement
+ */ function RadioButtonComponent(props, ref) {
+    const { label, ...rest } = props;
     return /*#__PURE__*/ jsxRuntime.jsxs(Label, {
         children: [
             /*#__PURE__*/ jsxRuntime.jsx(Input, {
-                ...props,
-                type: "radio"
+                ...rest,
+                type: "radio",
+                ref: ref
             }),
             /*#__PURE__*/ jsxRuntime.jsx("span", {
-                children: props.label
+                children: label
             })
         ]
     });
 }
-RadioButton.propTypes = {
-    /** Label for the field */ label: PropTypes.string
-};
+const RadioButton = /*#__PURE__*/ React.forwardRef(RadioButtonComponent);
 
+// Context may be undefined if used outside a Menu provider
 var MenuContext = React.createContext(undefined);
 
 const MenuContainer = /*#__PURE__*/ styled("div", {
-    target: "ez48lhb0",
+    target: "e1qc23xy0",
     label: "MenuContainer"
 })("flex:1;display:flex;flex-direction:column;& div:last-child{border-bottom:none;}&:focus-within{box-shadow:0 0 0 4px ", getThemeValue(THEME_NAME.PRIMARY_LIGHT), ";}");
 /**
@@ -2018,11 +2117,17 @@ const MenuContainer = /*#__PURE__*/ styled("div", {
  * Supports single and multi-select modes and keyboard navigation.
  *
  * @template T - The type of value(s) in the menu.
- * @param {MenuProps<T> & Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>} props - The menu properties.
- * @param {ForwardedRef<HTMLDivElement>} ref - The ref forwarded to the menu container.
- */ const Menu = /*#__PURE__*/ React.forwardRef(function(props, ref) {
-    const { multiSelect, onChange, value: propValue, ...rest } = props;
-    const [value, setValue] = React.useState(propValue || (multiSelect ? [] : ''));
+ * @param props - The menu properties.
+ * @param ref - The ref forwarded to the menu container.
+ */ /**
+ * Menu Component
+ * @template T - The type of value(s) in the menu.
+ * @param props - Component props
+ * @param ref - Ref forwarded to the underlying HTMLDivElement
+ */ function MenuInner(props, ref) {
+    const { multiSelect = false, onChange, value: propValue, children, ...rest } = props;
+    // State holds either a single T or an array of T when multiSelect
+    const [value, setValue] = React.useState(propValue);
     /**
      * Updates the selected value(s).
      * Handles both single and multi-select logic.
@@ -2040,6 +2145,10 @@ const MenuContainer = /*#__PURE__*/ styled("div", {
                         val
                     ];
                 }
+            } else {
+                newVal = [
+                    val
+                ];
             }
         } else {
             newVal = val;
@@ -2105,10 +2214,11 @@ const MenuContainer = /*#__PURE__*/ styled("div", {
             firstItem?.focus();
         }
     };
-    return /*#__PURE__*/ jsxRuntime.jsx(MenuContext.Provider, {
+    return(// @ts-expect-error Generic context typing
+    /*#__PURE__*/ jsxRuntime.jsx(MenuContext.Provider, {
         value: {
-            value,
-            multiSelect,
+            value: value,
+            multiSelect: !!multiSelect,
             updateValue
         },
         children: /*#__PURE__*/ jsxRuntime.jsx(MenuContainer, {
@@ -2119,27 +2229,38 @@ const MenuContainer = /*#__PURE__*/ styled("div", {
             tabIndex: 0,
             onKeyDown: handleKeyDown,
             onFocus: focusHandler,
-            children: props.children
+            children: children
         })
-    });
-});
-Menu.displayName = 'Menu';
-Menu.defaultProps = {
-    multiSelect: false
-};
+    }));
+}
+const Menu = /*#__PURE__*/ React.forwardRef(MenuInner);
 
 const Container$4 = /*#__PURE__*/ styled("button", {
-    target: "ea4jlaf0",
+    target: "ebwocs30",
     label: "Container"
 })("font-weight:", (props)=>props.selected ? 'bold' : 'normal', ";padding:8px;border:none;border-left:4px solid\n        ", (props)=>props.selected && !props.multiselect ? getThemeValue(THEME_NAME.TEXT_COLOR_DARK) : 'transparent', ";background-color:transparent;font-size:16px;border-bottom:1px solid ", getThemeValue(THEME_NAME.BORDER_LIGHT_COLOR), ";min-height:41px;display:flex;align-items:center;cursor:pointer;position:relative;color:", getThemeValue(THEME_NAME.TEXT_COLOR_DARK), ";&:hover,&:focus,&:focus-within{background-color:", getThemeValue(THEME_NAME.BORDER_LIGHT_COLOR), ";}& > label{margin:0 4px 0 0;}");
-const MenuItemInner = (props, ref)=>{
+/**
+ * MenuItem Component
+ * @template T - The type of value in the menu item.
+ * @param props - Component props
+ * @param ref - Ref forwarded to the underlying HTMLButtonElement
+ */ const MenuItemInner = (props, ref)=>{
     const context = React.useContext(MenuContext);
+    if (!context) {
+        throw new Error('`MenuItem` must be used within a `Menu` provider');
+    }
     const { value, children, ...rest } = props;
     const clickHandler = (e)=>{
         e.stopPropagation();
         context.updateValue(value);
     };
-    const selected = context.multiSelect ? context.value?.includes?.(value) : context.value === value;
+    let selected = false;
+    if (context.multiSelect) {
+        const arr = context.value;
+        selected = Array.isArray(arr) && arr.includes(value);
+    } else {
+        selected = context.value === value;
+    }
     return /*#__PURE__*/ jsxRuntime.jsxs(Container$4, {
         ...rest,
         ref: ref,
@@ -2188,25 +2309,30 @@ const positionMap$2 = {
     `
 };
 const PopoverDiv = /*#__PURE__*/ styled("div", {
-    target: "e1oy1jnn0",
+    target: "ejcb1ps0",
     label: "PopoverDiv"
 })("position:relative;display:inline-flex;");
 const Popper = /*#__PURE__*/ styled(Card, {
-    target: "e1oy1jnn1",
+    target: "ejcb1ps1",
     label: "Popper"
 })("position:absolute;width:100%;min-width:200px;overflow:auto;animation:enter 0.3s linear;border-radius:3px;z-index:1;transform:translate(", (props)=>props.translateX, "px,", (props)=>props.translateY, "px);", (props)=>positionMap$2[props.position], "    &.closing{animation:exit 0.3s linear;}@keyframes enter{from{max-height:0px;opacity:1;overflow:hidden;}to{max-height:300px;opacity:1;overflow:hidden;}}@keyframes exit{to{max-height:0px;opacity:1;overflow:hidden;}from{max-height:300px;opacity:1;overflow:hidden;}}");
 const KEY_CODES = {
     ESC: 27
 };
-function Popover(props) {
-    const [open, setOpen] = React.useState(props.open);
+/**
+ * Popover Component
+ * @param props - Component props
+ * @param ref - Ref forwarded to the underlying HTMLDivElement
+ */ function PopoverComponent(props, ref) {
+    const { open: propsOpen, element, position = "BOTTOM_LEFT", closeOnEsc = true, onClose, children, ...rest } = props;
+    const [open, setOpen] = React.useState(propsOpen);
     const [closing, setClosing] = React.useState(false);
     const [translate, setTranslate] = React.useState({
         x: 0,
         y: 0
     });
-    const popperRef = React.useRef();
-    const containerRef = React.useRef();
+    const popperRef = React.useRef(null);
+    const containerRef = React.useRef(null);
     const triggerRef = React.useRef(null);
     const closeTimeoutRef = React.useRef(null);
     const focusTimeoutRef = React.useRef(null);
@@ -2227,8 +2353,8 @@ function Popover(props) {
                 x: 0,
                 y: 0
             });
-            if (props.onClose) {
-                props.onClose();
+            if (onClose) {
+                onClose();
             }
             setClosing(false);
             // Restore focus to the trigger element after animation completes
@@ -2241,15 +2367,15 @@ function Popover(props) {
             closeTimeoutRef.current = null;
         }, 280);
     }, [
-        props
+        onClose
     ]);
     const keyupEventHandler = React.useCallback((e)=>{
-        if (props.closeOnEsc && e.keyCode === KEY_CODES.ESC) {
+        if (closeOnEsc && e.keyCode === KEY_CODES.ESC) {
             close();
         }
     }, [
         close,
-        props.closeOnEsc
+        closeOnEsc
     ]);
     const clickOutsideHandler = React.useCallback((e)=>{
         if (containerRef.current && !containerRef.current.contains(e.target)) {
@@ -2269,7 +2395,7 @@ function Popover(props) {
         keyupEventHandler
     ]);
     React.useEffect(()=>{
-        if (props.open) {
+        if (propsOpen) {
             setOpen(true);
             // Use requestAnimationFrame to add listener after current event loop
             const rafId = requestAnimationFrame(()=>{
@@ -2285,22 +2411,22 @@ function Popover(props) {
             }
         }
     }, [
-        props.open,
+        propsOpen,
         open,
         clickOutsideHandler,
         close
     ]);
     React.useEffect(()=>{
         if (open) {
-            const { top, left, right } = popperRef.current.getBoundingClientRect();
-            const height = popperRef.current.scrollHeight;
+            const { top = 0, left = 0, right = 0 } = popperRef.current?.getBoundingClientRect() ?? {};
+            const height = popperRef.current?.scrollHeight ?? 0;
             const viewportWidth = document.documentElement.clientWidth;
             const viewportHeight = document.documentElement.clientHeight;
             const translation = {
                 x: 0,
                 y: 0
             };
-            if (props.position === "BOTTOM_LEFT") {
+            if (position === "BOTTOM_LEFT") {
                 // overflow can happen at bottom and right
                 if (viewportHeight - top - height < 0) {
                     translation.y = -1 * (Math.abs(viewportHeight - top - height) + 5);
@@ -2308,7 +2434,7 @@ function Popover(props) {
                 if (viewportWidth - right < 0) {
                     translation.x = -1 * (Math.abs(viewportWidth - right) + 5);
                 }
-            } else if (props.position == "BOTTOM_RIGHT") {
+            } else if (position == "BOTTOM_RIGHT") {
                 // overflow can happen at bottom and left
                 if (viewportHeight - top - height < 0) {
                     translation.y = -1 * (Math.abs(viewportHeight - top - height) + 5);
@@ -2316,7 +2442,7 @@ function Popover(props) {
                 if (left < 0) {
                     translation.x = Math.abs(left) + 5;
                 }
-            } else if (props.position === "TOP_LEFT") {
+            } else if (position === "TOP_LEFT") {
                 // overflow can happen at top and right
                 if (top - height < 0) {
                     translation.y = Math.abs(top - height) + 5;
@@ -2336,11 +2462,11 @@ function Popover(props) {
             // Note it can still overflow, but in that case fitting popper inside the
             // window is not possible.
             setTranslate(translation);
-            popperRef.current.focus();
+            popperRef.current?.focus();
         }
     }, [
         open,
-        props.position
+        position
     ]);
     /**
      * Cleanup timeouts on unmount
@@ -2354,10 +2480,19 @@ function Popover(props) {
             }
         };
     }, []);
+    const forwardRef = (node)=>{
+        containerRef.current = node;
+        if (typeof ref === 'function') {
+            ref(node);
+        } else if (ref) {
+            ref.current = node;
+        }
+    };
     return /*#__PURE__*/ jsxRuntime.jsxs(PopoverDiv, {
-        ref: containerRef,
+        ref: forwardRef,
+        ...rest,
         children: [
-            /*#__PURE__*/ React.createElement(props.element, {
+            /*#__PURE__*/ React.createElement(element, {
                 ref: triggerRef,
                 id: triggerId,
                 'aria-expanded': open,
@@ -2370,39 +2505,24 @@ function Popover(props) {
                 role: "dialog",
                 "aria-labelledby": triggerId,
                 id: popperId,
-                position: props.position,
+                position: position,
                 translateX: translate.x,
                 translateY: translate.y,
-                className: closing && 'closing',
+                className: closing ? 'closing' : '',
                 ref: popperRef,
                 onClick: (e)=>{
                     e.stopPropagation();
                     e.nativeEvent.stopImmediatePropagation();
                 },
-                children: props.children
+                children: children
             })
         ]
     });
 }
-Popover.propTypes = {
-    /** Opens the popover */ open: PropTypes.bool.isRequired,
-    /** Anchor element for the popover */ element: PropTypes.func,
-    /** Position of the popover around anchor element */ position: PropTypes.oneOf([
-        "TOP_LEFT",
-        "TOP_RIGHT",
-        "BOTTOM_LEFT",
-        "BOTTOM_RIGHT"
-    ]),
-    /** If the popover should close on `esc` key press */ closeOnEsc: PropTypes.bool,
-    /** Popover close callback */ onClose: PropTypes.func
-};
-Popover.defaultProps = {
-    closeOnEsc: true,
-    position: "BOTTOM_LEFT"
-};
+const Popover = /*#__PURE__*/ React.forwardRef(PopoverComponent);
 
 const ArrowContainer = /*#__PURE__*/ styled("span", {
-    target: "elhmc4m0",
+    target: "e1d5dyoc0",
     label: "ArrowContainer"
 })("position:absolute;right:12px;top:16px;pointer-events:none;");
 /**
@@ -2410,12 +2530,17 @@ const ArrowContainer = /*#__PURE__*/ styled("span", {
  * 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;
+ * @param props - The properties for the Dropdown component.
+ * @returns The rendered Dropdown component.
+ */ /**
+ * Dropdown Component
+ * @template T - The type of value(s) in the dropdown.
+ * @param props - Component props
+ * @param outerRef - Ref forwarded to the underlying HTMLInputElement
+ */ function DropdownComponent(props, outerRef) {
+    const { multiSelect = false, onChange, children, value: propValue, label, errorText, required, disabled, ...rest } = props;
     const [open, setOpen] = React.useState(false);
-    const [value, setValue] = React.useState(props.value);
+    const [value, setValue] = React.useState(propValue);
     const id = React.useId();
     const menuId = `${id}-menu`;
     const menuRef = React.useRef(null);
@@ -2470,19 +2595,40 @@ const ArrowContainer = /*#__PURE__*/ styled("span", {
     /**
      * Toggles the dropdown open state on click.
      */ const clickHandler = ()=>setOpen(true);
-    const TriggerElement = /*#__PURE__*/ React.forwardRef((passedProps, ref)=>/*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    const TriggerElement = /*#__PURE__*/ React.forwardRef((passedProps, ref)=>{
+        // Helper to assign both internal triggerRef and external forwarded ref
+        const assignRefs = (node)=>{
+            triggerRef.current = node;
+            if (!outerRef) return;
+            if (typeof outerRef === 'function') {
+                outerRef(node);
+            } else {
+                outerRef.current = node;
+            }
+        };
+        // Combine the ref passed by parent with our assignRefs so both are updated
+        const combinedRef = (node)=>{
+            assignRefs(node);
+            if (typeof ref === 'function') {
+                ref(node);
+            } else if (ref) {
+                ref.current = node;
+            }
+        };
+        return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
             children: [
                 /*#__PURE__*/ jsxRuntime.jsx(Input$2, {
+                    ...rest,
                     ...passedProps,
-                    ref: ref,
+                    ref: combinedRef,
                     type: "text",
                     value: value && String(value),
-                    label: props.label,
-                    errorText: props.errorText,
+                    label: label,
+                    errorText: errorText,
                     onClick: clickHandler,
                     onKeyDown: onKeyDown,
-                    required: props.required,
-                    disabled: props.disabled,
+                    required: required,
+                    disabled: disabled,
                     readOnly: true,
                     role: "combobox",
                     "aria-haspopup": "listbox",
@@ -2494,7 +2640,8 @@ const ArrowContainer = /*#__PURE__*/ styled("span", {
                     children: /*#__PURE__*/ jsxRuntime.jsx(ExpandMore, {})
                 })
             ]
-        }));
+        });
+    });
     TriggerElement.displayName = 'DropdownTrigger';
     return /*#__PURE__*/ jsxRuntime.jsx(Popover, {
         position: POPOVER_POSITION.BOTTOM_LEFT,
@@ -2510,24 +2657,22 @@ const ArrowContainer = /*#__PURE__*/ styled("span", {
             value: value,
             multiSelect: multiSelect,
             onChange: changeHandler,
-            children: props.children
+            children: children
         })
     });
 }
-Dropdown.defaultProps = {
-    multiSelect: false
-};
+const Dropdown = /*#__PURE__*/ React.forwardRef(DropdownComponent);
 
 const BodyText = /*#__PURE__*/ styled("p", {
-    target: "ecd5j070",
+    target: "e18k0mlw0",
     label: "BodyText"
 })("margin-top:0;");
 const InputContainer = /*#__PURE__*/ styled("div", {
-    target: "ecd5j071",
+    target: "e18k0mlw1",
     label: "InputContainer"
 })("display:flex;flex:1;margin-top:10px;& > label{flex:1;width:100%;padding:0;& > input{width:100%;padding:0 8px;box-sizing:border-box;}}");
 const StyledInput = /*#__PURE__*/ styled(Input$2, {
-    target: "ecd5j072",
+    target: "e18k0mlw2",
     label: "StyledInput"
 })("flex:1;padding:0;");
 class PromptDialog extends React.Component {
@@ -2560,12 +2705,13 @@ class PromptDialog extends React.Component {
                     }),
                     /*#__PURE__*/ jsxRuntime.jsxs(Footer$1, {
                         children: [
-                            /*#__PURE__*/ jsxRuntime.jsx(StyledButton, {
+                            /*#__PURE__*/ jsxRuntime.jsx(Button$2, {
                                 type: "button",
                                 onClick: this.cancel,
                                 children: cancelText
                             }),
                             /*#__PURE__*/ jsxRuntime.jsx(ActionButton, {
+                                onClick: this.submit,
                                 children: submitText
                             })
                         ]
@@ -2579,9 +2725,10 @@ class PromptDialog extends React.Component {
             this.setState({
                 value: e.target.value
             });
-        }, this.cancel = ()=>this.dialog.current.close(), this.submit = (e)=>{
+        }, this.cancel = ()=>this.dialog.current?.close(), this.submit = (e)=>{
             e.preventDefault();
-            this.dialog.current.close(this.state.value);
+            if (!this.state.value) return;
+            this.dialog.current?.close(this.state.value);
         }, this.show = ()=>{
             return new Promise((resolve, reject)=>{
                 const onClose = (value)=>{
@@ -2594,7 +2741,7 @@ class PromptDialog extends React.Component {
                         value: this.props.defaultValue
                     });
                 };
-                this.dialog.current.open(onClose);
+                this.dialog.current?.open(onClose);
             });
         };
         this.state = {
@@ -2602,15 +2749,6 @@ class PromptDialog extends React.Component {
         };
     }
 }
-PromptDialog.propTypes = {
-    /** Shown as header of the dialog */ header: PropTypes.string,
-    /** Rendered as the body of the dialog */ body: PropTypes.string,
-    /** Default value for the input. */ defaultValue: PropTypes.string,
-    /** Submit button text. Default value is 'Submit' */ submitText: PropTypes.string,
-    /** Cancel button text. Default value is 'Cancel' */ cancelText: PropTypes.string,
-    /** Props for the input. */ inputProps: PropTypes.object,
-    /** Additional props for the dialog. */ dialogProps: PropTypes.object
-};
 PromptDialog.defaultProps = {
     cancelText: 'Cancel',
     submitText: 'Submit',
@@ -2645,22 +2783,9 @@ const positionStyle$1 = (size)=>({
         }
     });
 const DrawerDiv = /*#__PURE__*/ styled("div", {
-    target: "ehe19t90",
+    target: "e1topccf0",
     label: "DrawerDiv"
 })("display:flex;flex-direction:column;background-color:", getThemeValue(THEME_NAME.BACKGROUND), ";transition:transform 0.3s ease;box-shadow:", getThemeValue(THEME_NAME.MODAL_SHADOW), ";", (props)=>positionStyle$1(props.size)[props.position].before, "    .nf-layer-enter &{transform:translateX(0%);", (props)=>positionStyle$1(props.size)[props.position].after, "}");
-const drawerPropTypes = {
-    /** Opens the drawer */ open: PropTypes.bool.isRequired,
-    /** position of the drawer */ position: PropTypes.oneOf([
-        "LEFT",
-        "RIGHT",
-        "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 = {
     ["LEFT"]: LAYER_POSITION.TOP_LEFT,
     ["RIGHT"]: LAYER_POSITION.TOP_RIGHT,
@@ -2682,6 +2807,8 @@ class Drawer extends React.Component {
      */ componentDidMount() {
         if (this.props.open) {
             this.lastFocusedElement = document.activeElement;
+            // Handle initial open state
+            this.handleOpen();
         }
     }
     /**
@@ -2695,7 +2822,7 @@ class Drawer extends React.Component {
      * Lifecycle method to handle Drawer updates.
      * Manages opening/closing logic via LayerManager and focus preservation.
      */ getSnapshotBeforeUpdate(prevProps) {
-        const { open, closeOnEsc, closeOnOverlayClick, overlay, position, children, size, ...rest } = this.props;
+        const { open } = this.props;
         if (prevProps.open && !open) {
             this.closeCallback?.();
             this.restoreFocus();
@@ -2703,36 +2830,18 @@ class Drawer extends React.Component {
         if (!prevProps.open && open) {
             // Save current focus
             this.lastFocusedElement = document.activeElement;
-            this.layer = LayerManager$1.renderLayer({
-                overlay,
-                exitDelay: 300,
-                position: positionMap$1[position],
-                closeCallback: this.onClose,
-                closeOnEsc,
-                closeOnOverlayClick,
-                component: /*#__PURE__*/ jsxRuntime.jsx(DrawerDiv, {
-                    ...rest,
-                    ref: this.setDrawerRef,
-                    role: "dialog",
-                    "aria-modal": "true",
-                    tabIndex: -1,
-                    onKeyDown: this.handleKeyDown,
-                    position: position,
-                    size: size,
-                    onClick: (e)=>e.stopPropagation(),
-                    children: children
-                })
-            });
-            this.closeCallback = this.layer[1];
-            this.forceUpdate();
+            this.handleOpen();
         }
+        return null;
     }
     /**
      * Renders the Drawer component via the LayerManager portal.
      */ render() {
         if (this.state.open && this.layer) {
             const [Component] = this.layer;
-            return /*#__PURE__*/ jsxRuntime.jsx(Component, {});
+            return /*#__PURE__*/ jsxRuntime.jsx(Component, {
+                ref: this.setRefProp
+            });
         }
         return null;
     }
@@ -2748,8 +2857,8 @@ class Drawer extends React.Component {
                 open: false
             });
             this.props.onClose?.();
-            this.closeCallback = null;
-            this.layer = null;
+            this.closeCallback = undefined;
+            this.layer = undefined;
         }, this.lastFocusedElement = null, this.drawerRef = /*#__PURE__*/ React.createRef(), /**
      * Retrieves all focusable elements within the drawer.
      */ this.getFocusableElements = ()=>{
@@ -2777,6 +2886,32 @@ class Drawer extends React.Component {
                 }
             }
         }, /**
+     * Handles opening the drawer by creating the layer.
+     */ this.handleOpen = ()=>{
+            const { closeOnEsc, closeOnOverlayClick, position, size, overlay, children, ...rest } = this.props;
+            this.layer = LayerManager$1.renderLayer({
+                overlay,
+                exitDelay: 300,
+                position: positionMap$1[position],
+                closeCallback: this.onClose,
+                closeOnEsc,
+                closeOnOverlayClick,
+                component: /*#__PURE__*/ jsxRuntime.jsx(DrawerDiv, {
+                    ...rest,
+                    ref: this.setDrawerRef,
+                    role: "dialog",
+                    "aria-modal": "true",
+                    tabIndex: -1,
+                    onKeyDown: this.handleKeyDown,
+                    position: position,
+                    size: size,
+                    onClick: (e)=>e.stopPropagation(),
+                    children: children
+                })
+            });
+            this.closeCallback = this.layer[1];
+            this.forceUpdate();
+        }, /**
      * Restores focus to the element that was focused before the drawer opened.
      */ this.restoreFocus = ()=>{
             if (this.lastFocusedElement) {
@@ -2821,10 +2956,18 @@ class Drawer extends React.Component {
                 // Fallback to container
                 root.focus();
             }
+        }, /**
+     * Sets the ref prop passed to the Drawer Container component.
+     * @param node
+     */ this.setRefProp = (node)=>{
+            if (this.props.forwardRef && typeof this.props.forwardRef === 'function') {
+                this.props.forwardRef(node);
+            } else if (this.props.forwardRef && typeof this.props.forwardRef === 'object') {
+                this.props.forwardRef.current = node;
+            }
         };
     }
 }
-Drawer.propTypes = drawerPropTypes;
 Drawer.defaultProps = {
     overlay: true,
     position: "LEFT",
@@ -2833,7 +2976,7 @@ Drawer.defaultProps = {
 };
 
 const Container$3 = /*#__PURE__*/ styled("div", {
-    target: "e10z40ez0",
+    target: "eahc3qe0",
     label: "Container"
 })("display:inline-flex;border:1px solid ", getThemeValue(THEME_NAME.BORDER_COLOR), ";border-radius:3px;margin:5px;& button,& label{margin:0;border:none;border-radius:0;border-left:1px solid ", getThemeValue(THEME_NAME.BORDER_COLOR), ";box-shadow:none;height:32px;}& > div button{border-left:none;}& input,& select{border:none;height:32px;}& input,& select{border-radius:0;}& input:active,& select:active{box-shadow:none;}& > div > span{top:8px;}& > *:first-child,& > label:first-child input,& > label:first-child select,& > *:first-child label,& > *:first-child input{border-left:none;border-radius:2px 0 0 2px;}& > *:last-child,& > label:last-child input,& > label:last-child select,& > *:last-child label,& > *:last-child input{border-radius:0 2px 2px 0;}& *:focus,& *:focus + span{z-index:1;}&:focus-within,&:hover{box-shadow:", getThemeValue(THEME_NAME.HOVER_SHADOW), ";}", (props)=>props.errorText ? `
         border-color: ${getThemeValue(THEME_NAME.ERROR)};
@@ -2843,15 +2986,20 @@ const Container$3 = /*#__PURE__*/ styled("div", {
         }
     ` : '');
 const ErrorContainer = /*#__PURE__*/ styled("div", {
-    target: "e10z40ez1",
+    target: "eahc3qe1",
     label: "ErrorContainer"
 })("color:", getThemeValue(THEME_NAME.ERROR), ";margin-left:8px;font-size:12px;");
-function Group(props) {
+/**
+ * Group Component
+ * @param props - Component props
+ * @param ref - Ref forwarded to the underlying HTMLDivElement
+ */ function GroupComponent(props, ref) {
     const errorId = React.useId();
     return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
         children: [
             /*#__PURE__*/ jsxRuntime.jsx(Container$3, {
                 ...props,
+                ref: ref,
                 "aria-describedby": props.errorText ? errorId : undefined,
                 children: props.children
             }),
@@ -2862,21 +3010,13 @@ function Group(props) {
         ]
     });
 }
-Group.propTypes = {
-    /** Error Message for the group */ errorText: PropTypes.string
-};
+const Group = /*#__PURE__*/ React.forwardRef(GroupComponent);
 
 var GroupLabel = /*#__PURE__*/ styled("label", {
     target: "e1kv3eb90",
     label: ""
 })("height:32px;background-color:", getThemeValue(THEME_NAME.DISABLED_BACKGROUND), ";padding:0 4px;line-height:32px;min-width:24px;text-align:center;color:", getThemeValue(THEME_NAME.BORDER_COLOR), ";& > svg{height:24px;width:24px;vertical-align:middle;fill:currentColor;}");
 
-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
-};
 class Modal extends React.Component {
     /**
      * Syncs state with props.
@@ -2893,6 +3033,8 @@ class Modal extends React.Component {
      */ componentDidMount() {
         if (this.props.open) {
             this.lastFocusedElement = document.activeElement;
+            // Handle initial open state
+            this.handleOpen();
         }
     }
     /**
@@ -2904,15 +3046,15 @@ class Modal extends React.Component {
         // Clean up layer references
         if (this.closeCallback) {
             this.closeCallback();
-            this.closeCallback = null;
+            this.closeCallback = undefined;
         }
-        this.layer = null;
+        this.layer = undefined;
     }
     /**
      * Lifecycle method to handle Modal updates.
      * Manages opening/closing logic via LayerManager and focus preservation.
      */ getSnapshotBeforeUpdate(prevProps) {
-        const { open, closeOnEsc, closeOnOverlayClick, children, ...rest } = this.props;
+        const { open } = this.props;
         if (prevProps.open && !open) {
             this.closeCallback?.();
             this.restoreFocus();
@@ -2920,28 +3062,9 @@ class Modal extends React.Component {
         if (!prevProps.open && open) {
             // Save current focus
             this.lastFocusedElement = document.activeElement;
-            this.layer = LayerManager$1.renderLayer({
-                overlay: true,
-                exitDelay: 300,
-                position: LAYER_POSITION.DIALOG,
-                closeCallback: this.onClose,
-                closeOnEsc: closeOnEsc,
-                closeOnOverlayClick: closeOnOverlayClick,
-                component: /*#__PURE__*/ jsxRuntime.jsx(DialogContainer, {
-                    ...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();
+            this.handleOpen();
         }
+        return null;
     }
     /**
      * Renders the Modal component via the LayerManager portal.
@@ -2964,8 +3087,8 @@ class Modal extends React.Component {
                 open: false
             });
             this.props.onClose?.();
-            this.closeCallback = null;
-            this.layer = null;
+            this.closeCallback = undefined;
+            this.layer = undefined;
         }, this.lastFocusedElement = null, this.modalRef = /*#__PURE__*/ React.createRef(), /**
      * Retrieves all focusable elements within the modal.
      */ this.getFocusableElements = ()=>{
@@ -2993,6 +3116,31 @@ class Modal extends React.Component {
                 }
             }
         }, /**
+     * Handles opening the modal by creating the layer.
+     */ this.handleOpen = ()=>{
+            const { closeOnEsc, closeOnOverlayClick, children, ...rest } = this.props;
+            this.layer = LayerManager$1.renderLayer({
+                overlay: true,
+                exitDelay: 300,
+                position: LAYER_POSITION.DIALOG,
+                closeCallback: this.onClose,
+                closeOnEsc: closeOnEsc,
+                closeOnOverlayClick: closeOnOverlayClick,
+                component: /*#__PURE__*/ jsxRuntime.jsx(DialogContainer, {
+                    ...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();
+        }, /**
      * Restores focus to the element that was focused before the modal opened.
      */ this.restoreFocus = ()=>{
             if (this.lastFocusedElement) {
@@ -3015,6 +3163,9 @@ class Modal extends React.Component {
                 // Set initial focus when the node is mounted
                 this.setInitialFocus(node);
             }
+            if (this.props.forwardRef) {
+                this.props.forwardRef.current = 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.
@@ -3040,7 +3191,6 @@ class Modal extends React.Component {
         };
     }
 }
-Modal.propTypes = modalPropTypes;
 Modal.defaultProps = {
     closeOnEsc: true,
     closeOnOverlayClick: true
@@ -3116,39 +3266,39 @@ const getTypeStyle = (type)=>{
     }
 };
 const Container$2 = /*#__PURE__*/ styled("div", {
-    target: "e1cfscy10",
+    target: "e10n1sw0",
     label: "Container"
 })("display:flex;flex-direction:", (props)=>props.position === NOTIFICATION_POSITION.TOP_LEFT || props.position === NOTIFICATION_POSITION.TOP_RIGHT ? 'column' : 'column-reverse', ";");
 const Notice = /*#__PURE__*/ styled(Card, {
-    target: "e1cfscy11",
+    target: "e10n1sw1",
     label: "Notice"
 })("position:relative;border-radius:3px;border-left:4px solid ", (props)=>getBorderColor(props.type), ";width:300px;display:flex;padding:0 5px 5px 0;overflow:hidden;animation:", (props)=>getEntryAnimation(props.position), " 0.6s ease;& svg{fill:currentColor;vertical-align:middle;width:20px;height:20px;}&.leave{animation:", (props)=>getExitAnimation(props.position), " 0.6s;}@keyframes in-right{from{transform:translateX(100%);max-height:0;opacity:0;}to{transform:translateX(0%);max-height:150px;opacity:1;}}@keyframes out-right{to{transform:translateX(100%);max-height:0;opacity:0;}from{transform:translateX(0%);max-height:100px;opacity:1;}}@keyframes in-left{from{transform:translateX(-100%);max-height:0;opacity:0;}to{transform:translateX(0%);max-height:150px;opacity:1;}}@keyframes out-left{to{transform:translateX(-100%);max-height:0;opacity:0;}from{transform:translateX(0%);max-height:100px;opacity:1;}}");
 const Title = /*#__PURE__*/ styled("div", {
-    target: "e1cfscy12",
+    target: "e10n1sw2",
     label: "Title"
 })("padding:5px 0;font-size:14px;color:", (props)=>getTitleColor(props.type), ";display:flex;align-items:center;");
 const FillParent = /*#__PURE__*/ styled("div", {
-    target: "e1cfscy13",
+    target: "e10n1sw3",
     label: "FillParent"
 })("flex:1;");
 const CloseButton = /*#__PURE__*/ styled("button", {
-    target: "e1cfscy14",
+    target: "e10n1sw4",
     label: "CloseButton"
 })("position:absolute;background-color:transparent;border:none;padding:0;top:4px;right:4px;cursor:pointer;color:", getThemeValue(THEME_NAME.TEXT_COLOR_DARK), ";&:focus{box-shadow:0 0 0 3px ", getThemeValue(THEME_NAME.PRIMARY_LIGHT), ";border-radius:3px;}");
 const Body = /*#__PURE__*/ styled("div", {
-    target: "e1cfscy15",
+    target: "e10n1sw5",
     label: "Body"
 })("padding:5px 5px 5px 0;font-size:14px;");
 const IconContainer = /*#__PURE__*/ styled("div", {
-    target: "e1cfscy16",
+    target: "e10n1sw6",
     label: "IconContainer"
 })("padding:6px 10px;", (props)=>getTypeStyle(props.type), ";");
 const Footer = /*#__PURE__*/ styled("div", {
-    target: "e1cfscy17",
+    target: "e10n1sw7",
     label: "Footer"
 })("display:flex;justify-content:flex-end;padding:0 5px;");
 const VisuallyHidden = /*#__PURE__*/ styled("span", {
-    target: "e1cfscy18",
+    target: "e10n1sw8",
     label: "VisuallyHidden"
 })("position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;");
 
@@ -3249,6 +3399,7 @@ const DEFAULT_DURATION$1 = 5000;
      *
      * @param id
      */ this.remove = (id)=>{
+            if (!id) return;
             // Trigger leaving animation.
             this.setState({
                 notices: this.state.notices.map((notice)=>({
@@ -3293,15 +3444,15 @@ const DEFAULT_DURATION$1 = 5000;
                 const type = notice.type || NOTIFICATION_TYPE.INFO;
                 const isUrgent = type === NOTIFICATION_TYPE.WARNING || type === NOTIFICATION_TYPE.DANGER;
                 // Add notice to the top of stack.
-                this.setState({
-                    notices: [
-                        {
-                            ...notice,
-                            id
-                        },
-                        ...this.state.notices
-                    ]
-                }, ()=>{
+                this.setState((prevState)=>({
+                        notices: [
+                            {
+                                ...notice,
+                                id
+                            },
+                            ...prevState.notices
+                        ]
+                    }), ()=>{
                     // Update live region after state update
                     const announcement = `${notice.title} ${notice.description}`;
                     this.updateLiveRegion(announcement, isUrgent);
@@ -3340,47 +3491,23 @@ const DEFAULT_DURATION$1 = 5000;
      *
      * @param id
      */ this.pause = (id)=>()=>{
-                clearTimeout(this.timeouts[id]);
+                if (id && this.timeouts[id]) {
+                    clearTimeout(this.timeouts[id]);
+                    delete this.timeouts[id];
+                }
             }, /**
      * Restart the removal of notification.
      *
      * @param id
      */ this.resume = (id)=>()=>{
                 const notice = this.state.notices.find((notice)=>notice.id === id);
-                if (!notice.sticky) {
+                if (!notice?.sticky && id && !this.timeouts[id]) {
                     this.timeouts[id] = setTimeout(()=>this.remove(id), DEFAULT_DURATION$1);
                 }
             };
     }
 }
 
-/** This component is only used for storybook documentation */ class StoryProps extends React.Component {
-    render() {
-        return null;
-    }
-}
-StoryProps.propTypes = {
-    /** Title of the notification */ title: PropTypes.string.isRequired,
-    /** Body of the notification */ description: PropTypes.string.isRequired,
-    /** Id for the notification, helps in de-duplication. */ id: PropTypes.string,
-    /** Duration for the notification in milliseconds */ duration: PropTypes.number,
-    /** Creates sticky notification */ sticky: PropTypes.bool,
-    /** Type of notification */ type: PropTypes.oneOf([
-        NOTIFICATION_TYPE.INFO,
-        NOTIFICATION_TYPE.SUCCESS,
-        NOTIFICATION_TYPE.WARNING,
-        NOTIFICATION_TYPE.DANGER
-    ]),
-    /** Action button text */ buttonText: PropTypes.string,
-    /** Action button click callback */ 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,
-    sticky: false,
-    type: NOTIFICATION_TYPE.INFO
-};
 /** Maps notification position to layer position */ const positionMap = {
     [NOTIFICATION_POSITION.TOP_LEFT]: LAYER_POSITION.TOP_LEFT,
     [NOTIFICATION_POSITION.TOP_RIGHT]: LAYER_POSITION.TOP_RIGHT,
@@ -3390,6 +3517,7 @@ StoryProps.defaultProps = {
 /** Notification class */ class Notification {
     constructor(){
         /** Helps in maintaining single instance for different positions. */ this.containers = new Map();
+        /** Pending add requests waiting for manager to mount */ this.pending = new Map();
         /**
      * Adds a notification
      *
@@ -3404,6 +3532,12 @@ StoryProps.defaultProps = {
                         if (container) {
                             container.manager = instance;
                         }
+                        // Process pending requests
+                        const queue = this.pending.get(position);
+                        if (queue) {
+                            queue.forEach((cb)=>cb(instance));
+                            this.pending.delete(position);
+                        }
                     }
                 };
                 const [Component] = LayerManager$1.renderLayer({
@@ -3428,7 +3562,7 @@ StoryProps.defaultProps = {
                     div
                 });
                 // Render the Component which will trigger the LayerManager's useEffect
-                ReactDOM.flushSync(()=>{
+                reactDom.flushSync(()=>{
                     root.render(/*#__PURE__*/ jsxRuntime.jsx(Component, {}));
                 });
             }
@@ -3436,14 +3570,13 @@ StoryProps.defaultProps = {
             if (container && container.manager) {
                 return container.manager.add(options);
             }
-            // If manager is not ready yet, wait a bit and retry
+            // If manager is not ready yet, add to pending queue
             return new Promise((resolve)=>{
-                setTimeout(()=>{
-                    const container = this.containers.get(position);
-                    if (container && container.manager) {
-                        resolve(container.manager.add(options));
-                    }
-                }, 10);
+                const queue = this.pending.get(position) || [];
+                queue.push((manager)=>{
+                    resolve(manager.add(options));
+                });
+                this.pending.set(position, queue);
             });
         };
         /**
@@ -3474,50 +3607,53 @@ StoryProps.defaultProps = {
         };
     }
 }
-/** Export a singleton instance */ var Notification$1 = new Notification();
+/** Export a singleton instance */ var Notification_default = new Notification();
 
 const SpinnerDiv = /*#__PURE__*/ styled("div", {
-    target: "e12p7es30",
+    target: "e14pfj3w0",
     label: "SpinnerDiv"
 })("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;margin:0 auto;animation:spin 1s linear infinite;@keyframes spin{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}");
-function Spinner(props) {
-    const { label, ...rest } = props;
+/**
+ * Spinner Component
+ * @param props - Component props
+ * @param ref - Ref forwarded to the underlying HTMLDivElement
+ */ function SpinnerComponent(props, ref) {
+    const { label = 'Loading', size = 30, ...rest } = props;
     return /*#__PURE__*/ jsxRuntime.jsx(SpinnerDiv, {
         ...rest,
+        ref: ref,
+        size: size,
         role: "status",
-        "aria-label": label,
+        "aria-label": label || undefined,
         "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 Spinner = /*#__PURE__*/ React.forwardRef(SpinnerComponent);
 
 const Container$1 = /*#__PURE__*/ styled("div", {
-    target: "e1n4tau0",
+    target: "e14em2c80",
     label: "Container"
 })("flex:1;display:flex;flex-direction:column;min-height:400px;");
 const Header = /*#__PURE__*/ styled("div", {
-    target: "e1n4tau1",
+    target: "e14em2c81",
     label: "Header"
 })("display:flex;flex-direction:row;justify-content:space-between;border-bottom:1px solid ", getThemeValue(THEME_NAME.BORDER_LIGHT_COLOR), ";@media (min-width:601px){&::before{position:absolute;top:25px;left:0;right:0;height:2px;background-color:", getThemeValue(THEME_NAME.LIGHT_GREY), ";content:' ';z-index:0;}}& > *{z-index:1;}");
 const HeaderButton = /*#__PURE__*/ styled("button", {
-    target: "e1n4tau2",
+    target: "e14em2c82",
     label: "HeaderButton"
 })("border:none;padding:16px 24px 16px 16px;font-size:16px;cursor:pointer;background-color:", (props)=>props.active ? 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:", getThemeValue(THEME_NAME.DISABLED_BACKGROUND), ";}&:enabled:hover,&:focus{background-color:", getThemeValue(THEME_NAME.PRIMARY_LIGHTER), ";}@media (max-width:600px){&{display:none;}}");
 const MobileHeader = /*#__PURE__*/ styled("div", {
-    target: "e1n4tau3",
+    target: "e14em2c83",
     label: "MobileHeader"
 })("padding:16px;font-size:16px;line-height:18px;align-items:center;font-weight:bold;flex:1;display:flex;flex-direction:row;justify-content:space-between;@media (min-width:601px){&{display:none;}}");
-function Stepper(props) {
-    const [active, setActive] = React.useState(props.active);
-    const { children, onStepClick } = props;
+/**
+ * Stepper Component
+ * @param props - Component props
+ * @param ref - Ref forwarded to the underlying HTMLDivElement
+ */ function StepperComponent(props, ref) {
+    const { active: propsActive = 0, onStepClick, children, ...rest } = props;
+    const [active, setActive] = React.useState(propsActive);
     const childrenArray = React.Children.toArray(children);
     const stepRefs = [];
     const stepClickHandler = (index)=>()=>{
@@ -3549,6 +3685,8 @@ function Stepper(props) {
             }
         };
     return /*#__PURE__*/ jsxRuntime.jsxs(Container$1, {
+        ref: ref,
+        ...rest,
         children: [
             /*#__PURE__*/ jsxRuntime.jsxs(Header, {
                 role: "tablist",
@@ -3556,24 +3694,27 @@ function Stepper(props) {
                 children: [
                     React.Children.map(children, (child, index)=>{
                         if (!/*#__PURE__*/ React.isValidElement(child)) return null;
+                        const reactElement = child;
                         return /*#__PURE__*/ jsxRuntime.jsxs(HeaderButton, {
-                            ref: (el)=>stepRefs[index] = el,
+                            ref: (el)=>{
+                                stepRefs[index] = el;
+                            },
                             active: index === active,
                             type: "button",
                             role: "tab",
                             "aria-selected": index === active,
-                            "aria-disabled": !!child.props.disabled,
+                            "aria-disabled": !!reactElement.props.disabled,
                             tabIndex: index === active ? 0 : -1,
-                            disabled: child.props.disabled,
+                            disabled: reactElement.props.disabled,
                             onClick: stepClickHandler(index),
                             onKeyDown: onStepKeyDown(index),
                             children: [
                                 /*#__PURE__*/ jsxRuntime.jsx(Badge, {
                                     inline: true,
-                                    type: getBadgeType(index, child.props.completed, child.props.disabled)
+                                    type: getBadgeType(index, reactElement.props.completed || false, reactElement.props.disabled || false)
                                 }),
                                 /*#__PURE__*/ jsxRuntime.jsx(Ellipsis, {
-                                    children: child.props.name
+                                    children: reactElement.props.name
                                 })
                             ]
                         });
@@ -3600,51 +3741,51 @@ function Stepper(props) {
         ]
     });
 }
-Stepper.propTypes = {
-    /** Index of currently active step */ active: PropTypes.number,
-    /** Callback function for click event on a step */ onStepClick: PropTypes.func
-};
-Stepper.defaultProps = {
-    active: 0
-};
+const Stepper = /*#__PURE__*/ React.forwardRef(StepperComponent);
 
 const Container = /*#__PURE__*/ styled("div", {
-    target: "eac2nqz0",
+    target: "e1v23xop0",
     label: "Container"
 })("flex:1;display:flex;flex-direction:column;");
-function Step(props) {
+/**
+ * Step Component
+ * @param props - Component props
+ * @param ref - Ref forwarded to the underlying HTMLDivElement
+ */ function StepComponent(props, ref) {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const { name, disabled, completed, ...rest } = props;
     return /*#__PURE__*/ jsxRuntime.jsx(Container, {
-        ...rest
+        ...rest,
+        ref: ref
     });
 }
-Step.defaultProps = {
-    disabled: false,
-    completed: false
-};
+const Step = /*#__PURE__*/ React.forwardRef(StepComponent);
 
 const Button = /*#__PURE__*/ styled("button", {
-    target: "e6iym3a0",
+    target: "ewz2woa0",
     label: "Button"
 })("background-color:transparent;border:none;padding:8px 12px;font-size:14px;border-radius:3px 3px 0 0;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:", getThemeValue(THEME_NAME.PRIMARY_LIGHTER), ";border-bottom:", (props)=>props.active ? `3px solid ${getThemeValue(THEME_NAME.PRIMARY)}` : `3px solid ${getThemeValue(THEME_NAME.PRIMARY)}`, ";}&[disabled]{background-color:", getThemeValue(THEME_NAME.DISABLED_BACKGROUND), ";color:", getThemeValue(THEME_NAME.DISABLED), ";border-bottom:3px solid ", getThemeValue(THEME_NAME.DISABLED_BORDER), ";}");
 const ButtonContainer = /*#__PURE__*/ styled("div", {
-    target: "e6iym3a1",
+    target: "ewz2woa1",
     label: "ButtonContainer"
 })("border-bottom:1px solid ", getThemeValue(THEME_NAME.DISABLED_BORDER), ";margin-bottom:5px;position:relative;");
 const TabBody = /*#__PURE__*/ styled("div", {
-    target: "e6iym3a2",
+    target: "ewz2woa2",
     label: "TabBody"
 })("min-height:150px;");
-function Tabs(props) {
-    const [active, setActive] = React.useState(props.active);
-    const { children } = props;
+/**
+ * Tabs Component
+ * @param props - Component props
+ * @param ref - Ref forwarded to the underlying HTMLDivElement
+ */ function TabsComponent(props, ref) {
+    const { active: propsActive = 0, onChange, bodyProps, children, ...rest } = props;
+    const [active, setActive] = React.useState(propsActive);
     const tabRefs = [];
     const childrenArray = React.Children.toArray(children);
     const switchTab = (index)=>()=>{
             setActive(index);
             tabRefs[index]?.focus();
-            props.onChange?.(index);
+            onChange?.(index);
         };
     // Keyboard navigation for tab buttons
     const onTabKeyDown = (index)=>(e)=>{
@@ -3659,29 +3800,41 @@ function Tabs(props) {
             }
         };
     React.useEffect(()=>{
-        setActive(props.active);
-        props.onChange?.(props.active);
+        if (propsActive !== undefined) {
+            setActive(propsActive);
+            onChange?.(propsActive);
+        }
     }, [
-        props
+        propsActive,
+        onChange
     ]);
     // 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 = /*#__PURE__*/ React.isValidElement(child) && child.props.name ? child.props.name : `tab${i}`;
-        return `nfui-tab-${sanitize(name)}-${i}`;
+        return `nfui-tab-${sanitize(name || '')}-${i}`;
     });
     const panelIds = childrenArray.map((child, i)=>{
         const name = /*#__PURE__*/ React.isValidElement(child) && child.props.name ? child.props.name : `tab${i}`;
-        return `nfui-tabpanel-${sanitize(name)}-${i}`;
+        return `nfui-tabpanel-${sanitize(name || '')}-${i}`;
     });
+    // Sanity check for active index
+    if (active === undefined || active < 0 || active >= childrenArray.length) {
+        return null;
+    }
     return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
         children: [
             /*#__PURE__*/ jsxRuntime.jsx(ButtonContainer, {
                 role: "tablist",
                 "aria-label": "Tabs",
-                ...props.props,
-                children: childrenArray.map((child, index)=>/*#__PURE__*/ jsxRuntime.jsx(Button, {
-                        ref: (el)=>tabRefs[index] = el,
+                ref: ref,
+                ...rest,
+                children: childrenArray.map((child, index)=>{
+                    const reactElement = child;
+                    return /*#__PURE__*/ jsxRuntime.jsx(Button, {
+                        ref: (el)=>{
+                            tabRefs[index] = el;
+                        },
                         id: tabIds[index],
                         type: "button",
                         role: "tab",
@@ -3691,31 +3844,24 @@ function Tabs(props) {
                         active: active === index,
                         onClick: switchTab(index),
                         onKeyDown: onTabKeyDown(index),
-                        disabled: /*#__PURE__*/ React.isValidElement(child) ? child.props.disabled : false,
-                        "aria-disabled": /*#__PURE__*/ React.isValidElement(child) ? child.props.disabled : false,
-                        children: /*#__PURE__*/ React.isValidElement(child) ? child.props.name : ''
-                    }, tabIds[index]))
+                        disabled: /*#__PURE__*/ React.isValidElement(child) ? reactElement.props.disabled : false,
+                        "aria-disabled": /*#__PURE__*/ React.isValidElement(child) ? reactElement.props.disabled : false,
+                        children: /*#__PURE__*/ React.isValidElement(child) ? reactElement.props.name : ''
+                    }, tabIds[index]);
+                })
             }),
             /*#__PURE__*/ jsxRuntime.jsx(TabBody, {
+                ...bodyProps,
                 id: panelIds[active],
                 role: "tabpanel",
                 "aria-labelledby": tabIds[active],
                 tabIndex: 0,
-                ...props.bodyProps,
                 children: childrenArray[active]
             })
         ]
     });
 }
-Tabs.propTypes = {
-    /** Active Tab Index */ active: PropTypes.number,
-    /** OnChange event handler */ onChange: PropTypes.func,
-    /** Props for div that contains tab buttons */ props: PropTypes.object,
-    /** Props for div that contains tab body */ bodyProps: PropTypes.object
-};
-Tabs.defaultProps = {
-    active: 0
-};
+const Tabs = /*#__PURE__*/ React.forwardRef(TabsComponent);
 
 const Tab = (props)=>{
     const { children } = props;
@@ -3723,13 +3869,6 @@ const Tab = (props)=>{
         children: children
     });
 };
-Tab.propTypes = {
-    /** Name of the tab. This shown in the tab's button */ name: PropTypes.string.isRequired,
-    /** If the tab is disabled */ disabled: PropTypes.bool
-};
-Tab.defaultProps = {
-    disabled: false
-};
 
 var TOAST_TYPE = /*#__PURE__*/ function(TOAST_TYPE) {
     TOAST_TYPE["NORMAL"] = "NORMAL";
@@ -3754,15 +3893,15 @@ const getBackgroundColor = (type)=>{
     }
 };
 const ToastContainer = /*#__PURE__*/ styled(Card, {
-    target: "ei8ihm80",
+    target: "e1bc14ug0",
     label: "ToastContainer"
 })("box-sizing:border-box;border-radius:3px;padding:12px;background-color:", (props)=>getBackgroundColor(props.type), ";color:", getThemeValue(THEME_NAME.TEXT_COLOR_LIGHT), ";margin:20px;font-size:14px;line-height:20px;transform:translateY(100%);transition:transform 0.3s ease;width:344px;display:flex;align-items:center;position:relative;& svg{width:20px;height:20px;fill:currentColor;}@media (max-width:480px){&{margin:0;width:100vw;border-radius:0;}}.nf-layer-enter &{transform:translateY(0%);}");
 const TextContainer = /*#__PURE__*/ styled("div", {
-    target: "ei8ihm81",
+    target: "e1bc14ug1",
     label: "TextContainer"
 })("flex:1;");
 const CloseContainer = /*#__PURE__*/ styled("button", {
-    target: "ei8ihm82",
+    target: "e1bc14ug2",
     label: "CloseContainer"
 })("background-color:transparent;color:", getThemeValue(THEME_NAME.PRIMARY_LIGHT), ";padding:6px 10px;border:none;border-radius:3px;text-transform:uppercase;cursor:pointer;&:focus{background-color:rgba(255,255,255,0.1);}");
 const DEFAULT_DURATION = 2000;
@@ -3785,6 +3924,7 @@ const createAriaLiveRegion = (id, ariaLive)=>{
 };
 class Toast {
     add(options) {
+        if (!this.element) return;
         const { text, buttonText, buttonClick, duration, type = "NORMAL" } = options;
         this.currentOptions = options;
         this.isPaused = false;
@@ -3843,9 +3983,9 @@ class Toast {
             if (this.ariaLiveContainer && document.body.contains(this.ariaLiveContainer)) {
                 document.body.removeChild(this.ariaLiveContainer);
             }
-            this.politeRegion = null;
-            this.assertiveRegion = null;
-            this.ariaLiveContainer = null;
+            this.politeRegion = undefined;
+            this.assertiveRegion = undefined;
+            this.ariaLiveContainer = undefined;
         };
         /**
      * Set up keyboard listener for dismissing toast with Escape key
@@ -3874,8 +4014,8 @@ class Toast {
      * Update the appropriate live region with toast content
      */ this.updateLiveRegion = (content, isAssertive)=>{
             const region = isAssertive ? this.assertiveRegion : this.politeRegion;
-            region.textContent = '';
             if (region) {
+                region.textContent = '';
                 // Add content after delay
                 setTimeout(()=>{
                     if (region) {
@@ -3889,16 +4029,16 @@ class Toast {
                 this.toast[1]();
                 if (this.timeout) {
                     clearTimeout(this.timeout);
-                    this.timeout = null;
+                    this.timeout = undefined;
                 }
             }
-            this.toast = null;
+            this.toast = undefined;
             this.currentOptions = null;
             this.isPaused = false;
             setTimeout(()=>{
                 if (!this.toast && this.root) {
                     this.root.unmount();
-                    this.root = null;
+                    this.root = undefined;
                 }
             }, 300);
         };
@@ -3943,7 +4083,7 @@ class Toast {
         this.setupKeyboardListeners();
     }
 }
-var Toast$1 = new Toast();
+var Toast_default = new Toast();
 
 var TOOLTIP_POSITION = /*#__PURE__*/ function(TOOLTIP_POSITION) {
     TOOLTIP_POSITION["TOP"] = "TOP";
@@ -3985,15 +4125,19 @@ const positionHoverStyle = {
     `
 };
 const TooltipDiv = /*#__PURE__*/ styled("div", {
-    target: "es4cffs0",
+    target: "e1dfj1r70",
     label: "TooltipDiv"
 })("position:absolute;background-color:", getThemeValue(THEME_NAME.TOOLTIP_COLOR), ";padding:5px;color:", getThemeValue(THEME_NAME.TEXT_COLOR_LIGHT), ";border-radius:3px;transition:transform 0.3s ease;font-size:12px;z-index:1;", (props)=>positionStyle[props.position]);
 const TooltipContainer = /*#__PURE__*/ styled("div", {
-    target: "es4cffs1",
+    target: "e1dfj1r71",
     label: "TooltipContainer"
 })("position:relative;display:inline-flex;justify-content:center;align-items:center;&:hover ", TooltipDiv, ",&:focus-within ", TooltipDiv, "{", (props)=>positionHoverStyle[props.position], "}");
-function Tooltip(props) {
-    const { children, position, ...rest } = props;
+/**
+ * Tooltip Component
+ * @param props - Component props
+ * @param ref - Ref forwarded to the underlying HTMLDivElement
+ */ function TooltipComponent(props, ref) {
+    const { children, position = "BOTTOM", ...rest } = props;
     const tooltipId = React.useId();
     // Clone the child to inject aria-describedby and tabIndex if possible
     const trigger = /*#__PURE__*/ React.isValidElement(children) ? /*#__PURE__*/ React.cloneElement(children, {
@@ -4001,8 +4145,9 @@ function Tooltip(props) {
         tabIndex: children.props && typeof children.props.tabIndex !== 'undefined' ? children.props.tabIndex : 0
     }) : children;
     return /*#__PURE__*/ jsxRuntime.jsxs(TooltipContainer, {
-        position: position,
         ...rest,
+        ref: ref,
+        position: position,
         children: [
             trigger,
             /*#__PURE__*/ jsxRuntime.jsx(TooltipDiv, {
@@ -4015,21 +4160,7 @@ function Tooltip(props) {
         ]
     });
 }
-Tooltip.propTypes = {
-    /** Text to show in the tooltip */ tooltipText: PropTypes.oneOfType([
-        PropTypes.string,
-        PropTypes.node
-    ]).isRequired,
-    /** Position of the tooltip */ position: PropTypes.oneOf([
-        "TOP",
-        "LEFT",
-        "RIGHT",
-        "BOTTOM"
-    ])
-};
-Tooltip.defaultProps = {
-    position: "BOTTOM"
-};
+const Tooltip = /*#__PURE__*/ React.forwardRef(TooltipComponent);
 
 exports.Accordion = Accordion;
 exports.AccordionStep = AccordionStep;
@@ -4039,7 +4170,7 @@ exports.ActionButton = ActionButton;
 exports.AlertDialog = AlertDialog;
 exports.BADGE_TYPE = BADGE_TYPE;
 exports.Badge = Badge;
-exports.Button = StyledButton;
+exports.Button = Button$2;
 exports.Card = Card;
 exports.CardBody = Body$1;
 exports.CardFooter = Footer$1;
@@ -4072,7 +4203,7 @@ exports.ModalFooter = Footer$1;
 exports.ModalHeader = Header$1;
 exports.NOTIFICATION_POSITION = NOTIFICATION_POSITION;
 exports.NOTIFICATION_TYPE = NOTIFICATION_TYPE;
-exports.Notification = Notification$1;
+exports.Notification = Notification_default;
 exports.ORIENTATION = ORIENTATION;
 exports.POPOVER_POSITION = POPOVER_POSITION;
 exports.Popover = Popover;
@@ -4092,7 +4223,7 @@ exports.TOOLTIP_POSITION = TOOLTIP_POSITION;
 exports.Tab = Tab;
 exports.Tabs = Tabs;
 exports.TextArea = TextArea;
-exports.Toast = Toast$1;
+exports.Toast = Toast_default;
 exports.Toggle = Toggle;
 exports.Tooltip = Tooltip;
 //# sourceMappingURL=index.js.map