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

package/dist/index.js

@@ -24,9 +24,10 @@ 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)
             });
         })
     });
@@ -267,7 +268,7 @@ var BADGE_TYPE = /*#__PURE__*/ function(BADGE_TYPE) {
     return BADGE_TYPE;
 }({});
 const BadgeSpan = /*#__PURE__*/ styled("span", {
-    target: "e1px9hio0",
+    target: "e1aaenck0",
     label: "BadgeSpan"
 })("background-color:", (props)=>{
     switch(props.type){
@@ -283,7 +284,11 @@ 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 BadgeComponent(props, ref) {
+/**
+ * Badge Component
+ * @param props - Component props
+ * @param ref - Ref forwarded to the underlying HTMLSpanElement
+ */ function BadgeComponent(props, ref) {
     return /*#__PURE__*/ jsxRuntime.jsx(BadgeSpan, {
         ...props,
         ref: ref
@@ -292,10 +297,14 @@ function BadgeComponent(props, ref) {
 const Badge = /*#__PURE__*/ React.forwardRef(BadgeComponent);
 
 const StyledCard = /*#__PURE__*/ styled("div", {
-    target: "e1td4b5c0",
+    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;");
-function CardComponent(props, ref) {
+/**
+ * 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
@@ -304,38 +313,42 @@ function CardComponent(props, ref) {
 const Card = /*#__PURE__*/ React.forwardRef(CardComponent);
 
 const Step$1 = /*#__PURE__*/ styled(Card, {
-    target: "e9r63nq0",
+    target: "e14f46gi0",
     label: "Step"
 })("transition:all 0.6s ease;overflow:visible;", (props)=>props.open && `margin: 20px 5px;`);
 const StepHeader = /*#__PURE__*/ styled("button", {
-    target: "e9r63nq1",
+    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: "e9r63nq2",
+    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: "e9r63nq3",
+    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: "e9r63nq4",
+    target: "e14f46gi4",
     label: "StepBody"
 })("transition:all 0.6s ease;overflow:hidden;height:", (props)=>props.height || 0, "px;");
 const AccordionBadge = /*#__PURE__*/ styled(Badge, {
-    target: "e9r63nq5",
+    target: "e14f46gi5",
     label: "AccordionBadge"
 })("margin-right:15px;");
 const AccordionStepBody = /*#__PURE__*/ styled("div", {
-    target: "e9r63nq6",
+    target: "e14f46gi6",
     label: "AccordionStepBody"
 })("padding:20px 15px;");
 const AccordionStepFooter = /*#__PURE__*/ styled("div", {
-    target: "e9r63nq7",
+    target: "e14f46gi7",
     label: "AccordionStepFooter"
 })("display:flex;justify-content:flex-end;padding:10px 15px;border-top:1px solid ", getThemeValue(THEME_NAME.BORDER_LIGHT_COLOR), ";");
-function AccordionStepComponent(props, ref) {
+/**
+ * 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 = false, header, errorText, completed = false, onStepClick, children, ...restProps } = props;
     // Generate unique IDs for ARIA relationships
@@ -407,10 +420,14 @@ function AccordionStepComponent(props, ref) {
 const AccordionStep = /*#__PURE__*/ React.forwardRef(AccordionStepComponent);
 
 const StyledButton = /*#__PURE__*/ styled("button", {
-    target: "e15a5nlf0",
+    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), ";}");
-function ButtonComponent(props, ref) {
+/**
+ * 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,
@@ -421,10 +438,14 @@ function ButtonComponent(props, ref) {
 const Button$2 = /*#__PURE__*/ React.forwardRef(ButtonComponent);
 
 const StyledLinkButton = /*#__PURE__*/ styled("button", {
-    target: "e1vgmm1k0",
+    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), ";}");
-const LinkButtonComponent = (props, ref)=>{
+/**
+ * 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,
@@ -435,10 +456,14 @@ const LinkButtonComponent = (props, ref)=>{
 const LinkButton = /*#__PURE__*/ React.forwardRef(LinkButtonComponent);
 
 const StyledRaisedButton = /*#__PURE__*/ styled("button", {
-    target: "e1vw7xh30",
+    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), ";}");
-const RaisedButtonComponent = (props, ref)=>{
+/**
+ * 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,
@@ -449,10 +474,14 @@ const RaisedButtonComponent = (props, ref)=>{
 const RaisedButton = /*#__PURE__*/ React.forwardRef(RaisedButtonComponent);
 
 const StyledActionButton = /*#__PURE__*/ styled("button", {
-    target: "ezu3m6y0",
+    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), ";}");
-function ActionButtonComponent(props, ref) {
+/**
+ * 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,
@@ -463,10 +492,14 @@ function ActionButtonComponent(props, ref) {
 const ActionButton = /*#__PURE__*/ React.forwardRef(ActionButtonComponent);
 
 const StyledIconButton = /*#__PURE__*/ styled("button", {
-    target: "e1mks0xv0",
+    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), ";}");
-function IconButtonComponent(props, ref) {
+/**
+ * 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,
@@ -477,14 +510,18 @@ function IconButtonComponent(props, ref) {
 const IconButton = /*#__PURE__*/ React.forwardRef(IconButtonComponent);
 
 const Container$8 = /*#__PURE__*/ styled("span", {
-    target: "ehb6hld0",
+    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: "ehb6hld1",
+    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 ChipComponent(props, ref) {
+/**
+ * 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') {
@@ -782,11 +819,11 @@ const DragContext = React.createContext(null);
 }
 
 /** Container Component */ const Container$6 = /*#__PURE__*/ styled("div", {
-    target: "ec7q6t50",
+    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: "ec7q6t51",
+    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;");
 /**
@@ -813,6 +850,10 @@ const DragContext = React.createContext(null);
  * @param props.children - Child elements to be rendered as draggable items
  *
  * @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);
@@ -909,7 +950,7 @@ const DragAndDrop = /*#__PURE__*/ React.forwardRef(DragAndDropComponent);
 
 // Label component for the ChipInput
 const Label$6 = /*#__PURE__*/ styled("label", {
-    target: "e1fb0gvp0",
+    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) {
@@ -939,12 +980,12 @@ const Label$6 = /*#__PURE__*/ styled("label", {
     ` : '');
 // Error message container
 const ErrorContainer$4 = /*#__PURE__*/ styled("div", {
-    target: "e1fb0gvp1",
+    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: "e1fb0gvp2",
+    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;}");
 /**
@@ -975,10 +1016,16 @@ const VisuallyHidden$1 = /*#__PURE__*/ styled("ul", {
         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(propValue)) {
-            setValue(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;
+            }
         }
     }, [
         propValue
@@ -1124,7 +1171,7 @@ const ChipInput = /*#__PURE__*/ React.forwardRef(ChipInputComponent);
     [6]: 'top: 0; left: 0; justify-content: center; align-items: center;'
 };
 /** Layer container component. */ const Container$5 = /*#__PURE__*/ styled("div", {
-    target: "e1wjyeea0",
+    target: "e6b1pc60",
     label: "Container"
 })("position:fixed;display:flex;opacity:0;transition:opacity 0.3s ease;", (props)=>POSITION_STYLE[props.position], " ", (props)=>props.overlay && `
         width: 100%;
@@ -1388,7 +1435,7 @@ const ChipInput = /*#__PURE__*/ React.forwardRef(ChipInputComponent);
 var LayerManager$1 = new LayerManager();
 
 const DialogContainer = /*#__PURE__*/ styled(Card, {
-    target: "e6d22q10",
+    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 {
@@ -1462,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.
@@ -1492,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,
@@ -1621,11 +1675,11 @@ ConfirmDialog.defaultProps = {
 };
 
 const Label$5 = /*#__PURE__*/ styled("label", {
-    target: "e13ukqtd0",
+    target: "el9i5v60",
     label: "Label"
 })("display:inline-flex;flex-direction:column;position:relative;margin:10px 5px;");
 const TextField$1 = /*#__PURE__*/ styled("input", {
-    target: "e13ukqtd1",
+    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 {
@@ -1650,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: "e13ukqtd2",
+    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
@@ -1704,11 +1764,11 @@ const Input$2 = /*#__PURE__*/ React.forwardRef((props, ref)=>{
 Input$2.displayName = 'Input';
 
 const Label$4 = /*#__PURE__*/ styled("label", {
-    target: "e1ifgue60",
+    target: "e1j32tnv0",
     label: "Label"
 })("display:inline-flex;flex-direction:column;position:relative;margin:10px 5px;");
 const TextField = /*#__PURE__*/ styled("textarea", {
-    target: "e1ifgue61",
+    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 {
@@ -1733,17 +1793,23 @@ 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: "e1ifgue62",
+    target: "e1j32tnv2",
     label: "ErrorContainer"
 })("color:", getThemeValue(THEME_NAME.ERROR), ";padding-top:3px;font-size:12px;line-height:14px;margin-left:3px;");
-function TextAreaComponent(props, ref) {
+/**
+ * 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(propsValue || '');
     const errorId = React.useId();
+    const prevValueRef = React.useRef(undefined);
     React.useEffect(()=>{
-        if (propsValue !== undefined) {
+        if (propsValue !== undefined && propsValue !== prevValueRef.current) {
             setValue(propsValue);
+            prevValueRef.current = propsValue;
         }
     }, [
         propsValue
@@ -1789,11 +1855,11 @@ function TextAreaComponent(props, ref) {
 const TextArea = /*#__PURE__*/ React.forwardRef(TextAreaComponent);
 
 const Label$3 = /*#__PURE__*/ styled("label", {
-    target: "e1l48s8r0",
+    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: "e1l48s8r1",
+    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 {
@@ -1818,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: "e1l48s8r2",
+    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: "e1l48s8r3",
+    target: "e13b7jm3",
     label: "ArrowContainer"
 })("position:absolute;right:8px;top:8px;");
-function SelectComponent(props, ref) {
+/**
+ * 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
@@ -1885,18 +1957,22 @@ function SelectComponent(props, ref) {
 const Select = /*#__PURE__*/ React.forwardRef(SelectComponent);
 
 const Label$2 = /*#__PURE__*/ styled("label", {
-    target: "e11g7h820",
+    target: "e10ud8wb0",
     label: "Label"
 })("margin:5px 0;position:relative;display:inline-flex;align-items:center;cursor:pointer;");
 const StyledCheckmark = /*#__PURE__*/ styled("span", {
-    target: "e11g7h821",
+    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: "e11g7h822",
+    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 CheckboxComponent(props, fwdRef) {
+/**
+ * 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)=>{
         // Ensure the DOM `indeterminate` flag always matches the prop
@@ -1932,14 +2008,18 @@ function CheckboxComponent(props, fwdRef) {
 const Checkbox = /*#__PURE__*/ React.forwardRef(CheckboxComponent);
 
 const Switch = /*#__PURE__*/ styled("label", {
-    target: "ebp76g50",
+    target: "e185uavx0",
     label: "Switch"
 })("position:relative;display:inline-flex;margin:5px 0;");
 const Input$1 = /*#__PURE__*/ styled("input", {
-    target: "ebp76g51",
+    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 ToggleComponent(props, ref) {
+/**
+ * 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, {
@@ -1959,18 +2039,22 @@ function ToggleComponent(props, ref) {
 const Toggle = /*#__PURE__*/ React.forwardRef(ToggleComponent);
 
 const Label$1 = /*#__PURE__*/ styled("label", {
-    target: "e10nk2o50",
+    target: "e12cx2u30",
     label: "Label"
 })("display:inline-flex;align-items:center;margin:5px 0;cursor:pointer;position:relative;");
 const StyledRadio = /*#__PURE__*/ styled("span", {
-    target: "e10nk2o51",
+    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: "e10nk2o52",
+    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 RadioComponent(props, ref) {
+/**
+ * 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: [
@@ -1989,18 +2073,22 @@ function RadioComponent(props, ref) {
 const Radio = /*#__PURE__*/ React.forwardRef(RadioComponent);
 
 const Input = /*#__PURE__*/ styled("input", {
-    target: "e1fy5k9l0",
+    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: "e1fy5k9l1",
+    target: "e1yp0s5y1",
     label: "Label"
 })("display:inline-flex;&:focus-within{z-index:1;}");
 const RadioGroup = /*#__PURE__*/ styled("div", {
-    target: "e1fy5k9l2",
+    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 RadioButtonComponent(props, ref) {
+/**
+ * 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: [
@@ -2021,7 +2109,7 @@ const RadioButton = /*#__PURE__*/ React.forwardRef(RadioButtonComponent);
 var MenuContext = React.createContext(undefined);
 
 const MenuContainer = /*#__PURE__*/ styled("div", {
-    target: "e1nm0ogj0",
+    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), ";}");
 /**
@@ -2031,6 +2119,11 @@ const MenuContainer = /*#__PURE__*/ styled("div", {
  * @template T - The type of value(s) in the menu.
  * @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
@@ -2143,10 +2236,15 @@ const MenuContainer = /*#__PURE__*/ styled("div", {
 const Menu = /*#__PURE__*/ React.forwardRef(MenuInner);
 
 const Container$4 = /*#__PURE__*/ styled("button", {
-    target: "eum9bel0",
+    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');
@@ -2211,17 +2309,21 @@ const positionMap$2 = {
     `
 };
 const PopoverDiv = /*#__PURE__*/ styled("div", {
-    target: "egy90l40",
+    target: "ejcb1ps0",
     label: "PopoverDiv"
 })("position:relative;display:inline-flex;");
 const Popper = /*#__PURE__*/ styled(Card, {
-    target: "egy90l41",
+    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 PopoverComponent(props, ref) {
+/**
+ * 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);
@@ -2420,7 +2522,7 @@ function PopoverComponent(props, ref) {
 const Popover = /*#__PURE__*/ React.forwardRef(PopoverComponent);
 
 const ArrowContainer = /*#__PURE__*/ styled("span", {
-    target: "eqzh0a30",
+    target: "e1d5dyoc0",
     label: "ArrowContainer"
 })("position:absolute;right:12px;top:16px;pointer-events:none;");
 /**
@@ -2430,6 +2532,11 @@ const ArrowContainer = /*#__PURE__*/ styled("span", {
  * @template T - The type of the value(s) in the dropdown.
  * @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);
@@ -2557,15 +2664,15 @@ const ArrowContainer = /*#__PURE__*/ styled("span", {
 const Dropdown = /*#__PURE__*/ React.forwardRef(DropdownComponent);
 
 const BodyText = /*#__PURE__*/ styled("p", {
-    target: "evq93jk0",
+    target: "e18k0mlw0",
     label: "BodyText"
 })("margin-top:0;");
 const InputContainer = /*#__PURE__*/ styled("div", {
-    target: "evq93jk1",
+    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: "evq93jk2",
+    target: "e18k0mlw2",
     label: "StyledInput"
 })("flex:1;padding:0;");
 class PromptDialog extends React.Component {
@@ -2604,6 +2711,7 @@ class PromptDialog extends React.Component {
                                 children: cancelText
                             }),
                             /*#__PURE__*/ jsxRuntime.jsx(ActionButton, {
+                                onClick: this.submit,
                                 children: submitText
                             })
                         ]
@@ -2619,6 +2727,7 @@ class PromptDialog extends React.Component {
             });
         }, this.cancel = ()=>this.dialog.current?.close(), this.submit = (e)=>{
             e.preventDefault();
+            if (!this.state.value) return;
             this.dialog.current?.close(this.state.value);
         }, this.show = ()=>{
             return new Promise((resolve, reject)=>{
@@ -2674,7 +2783,7 @@ const positionStyle$1 = (size)=>({
         }
     });
 const DrawerDiv = /*#__PURE__*/ styled("div", {
-    target: "egs35xi0",
+    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 positionMap$1 = {
@@ -2698,6 +2807,8 @@ class Drawer extends React.Component {
      */ componentDidMount() {
         if (this.props.open) {
             this.lastFocusedElement = document.activeElement;
+            // Handle initial open state
+            this.handleOpen();
         }
     }
     /**
@@ -2711,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();
@@ -2719,29 +2830,9 @@ 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.
@@ -2795,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) {
@@ -2859,7 +2976,7 @@ Drawer.defaultProps = {
 };
 
 const Container$3 = /*#__PURE__*/ styled("div", {
-    target: "eqhpibl0",
+    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)};
@@ -2869,10 +2986,14 @@ const Container$3 = /*#__PURE__*/ styled("div", {
         }
     ` : '');
 const ErrorContainer = /*#__PURE__*/ styled("div", {
-    target: "eqhpibl1",
+    target: "eahc3qe1",
     label: "ErrorContainer"
 })("color:", getThemeValue(THEME_NAME.ERROR), ";margin-left:8px;font-size:12px;");
-function GroupComponent(props, ref) {
+/**
+ * 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: [
@@ -2912,6 +3033,8 @@ class Modal extends React.Component {
      */ componentDidMount() {
         if (this.props.open) {
             this.lastFocusedElement = document.activeElement;
+            // Handle initial open state
+            this.handleOpen();
         }
     }
     /**
@@ -2931,7 +3054,7 @@ class Modal extends React.Component {
      * 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();
@@ -2939,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.
@@ -3012,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) {
@@ -3035,11 +3164,7 @@ class Modal extends React.Component {
                 this.setInitialFocus(node);
             }
             if (this.props.forwardRef) {
-                try {
-                    this.props.forwardRef.current = node;
-                } catch (e) {
-                    console.warn(e);
-                }
+                this.props.forwardRef.current = node;
             }
         }, /**
      * Sets initial focus within the modal.
@@ -3368,6 +3493,7 @@ const DEFAULT_DURATION$1 = 5000;
      */ this.pause = (id)=>()=>{
                 if (id && this.timeouts[id]) {
                     clearTimeout(this.timeouts[id]);
+                    delete this.timeouts[id];
                 }
             }, /**
      * Restart the removal of notification.
@@ -3391,6 +3517,7 @@ const DEFAULT_DURATION$1 = 5000;
 /** 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
      *
@@ -3405,6 +3532,12 @@ const DEFAULT_DURATION$1 = 5000;
                         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({
@@ -3437,14 +3570,13 @@ const DEFAULT_DURATION$1 = 5000;
             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);
             });
         };
         /**
@@ -3478,10 +3610,14 @@ const DEFAULT_DURATION$1 = 5000;
 /** Export a singleton instance */ var Notification_default = new Notification();
 
 const SpinnerDiv = /*#__PURE__*/ styled("div", {
-    target: "ejfhe5c0",
+    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 SpinnerComponent(props, ref) {
+/**
+ * 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,
@@ -3496,22 +3632,26 @@ function SpinnerComponent(props, ref) {
 const Spinner = /*#__PURE__*/ React.forwardRef(SpinnerComponent);
 
 const Container$1 = /*#__PURE__*/ styled("div", {
-    target: "e1o5kbe30",
+    target: "e14em2c80",
     label: "Container"
 })("flex:1;display:flex;flex-direction:column;min-height:400px;");
 const Header = /*#__PURE__*/ styled("div", {
-    target: "e1o5kbe31",
+    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: "e1o5kbe32",
+    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: "e1o5kbe33",
+    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 StepperComponent(props, ref) {
+/**
+ * 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);
@@ -3554,24 +3694,27 @@ function StepperComponent(props, ref) {
                 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
                                 })
                             ]
                         });
@@ -3601,10 +3744,14 @@ function StepperComponent(props, ref) {
 const Stepper = /*#__PURE__*/ React.forwardRef(StepperComponent);
 
 const Container = /*#__PURE__*/ styled("div", {
-    target: "e67x9110",
+    target: "e1v23xop0",
     label: "Container"
 })("flex:1;display:flex;flex-direction:column;");
-function StepComponent(props, ref) {
+/**
+ * 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, {
@@ -3615,21 +3762,24 @@ function StepComponent(props, ref) {
 const Step = /*#__PURE__*/ React.forwardRef(StepComponent);
 
 const Button = /*#__PURE__*/ styled("button", {
-    target: "ewv2rsc0",
+    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: "ewv2rsc1",
+    target: "ewz2woa1",
     label: "ButtonContainer"
 })("border-bottom:1px solid ", getThemeValue(THEME_NAME.DISABLED_BORDER), ";margin-bottom:5px;position:relative;");
 const TabBody = /*#__PURE__*/ styled("div", {
-    target: "ewv2rsc2",
+    target: "ewz2woa2",
     label: "TabBody"
 })("min-height:150px;");
-function TabsComponent(props, ref) {
-    const { active: propsActive = 0, onChange, bodyProps, ...rest } = 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 { children } = props;
     const tabRefs = [];
     const childrenArray = React.Children.toArray(children);
     const switchTab = (index)=>()=>{
@@ -3662,11 +3812,11 @@ function TabsComponent(props, ref) {
     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) {
@@ -3679,8 +3829,12 @@ function TabsComponent(props, ref) {
                 "aria-label": "Tabs",
                 ref: ref,
                 ...rest,
-                children: childrenArray.map((child, index)=>/*#__PURE__*/ jsxRuntime.jsx(Button, {
-                        ref: (el)=>tabRefs[index] = el,
+                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",
@@ -3690,10 +3844,11 @@ function TabsComponent(props, ref) {
                         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,
@@ -3970,14 +4125,18 @@ const positionHoverStyle = {
     `
 };
 const TooltipDiv = /*#__PURE__*/ styled("div", {
-    target: "ebjobmh0",
+    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: "ebjobmh1",
+    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 TooltipComponent(props, ref) {
+/**
+ * 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