scorer-ui-kit 3.0.3 → 3.0.5

package/dist/index.js

@@ -2219,6 +2219,9 @@ var ThemeVariables = styled_components.createGlobalStyle`
     --global-menu-width-closed: 80px;
     --global-menu-width-open: 280px;
 
+    --top-bar-height: 56px;
+    --top-bar-divider-width: 1px;
+
     --input-height: 40px;
     --input-compact-height: 32px;
     --input-required-dot-display: inline-block;
@@ -2420,7 +2423,7 @@ var Arrow$1 = styled_components.default.div`
   &.l { left: 24px; }
   &.r { right: 24px; }
 `;
-var Container$71 = styled_components.default.div`
+var Container$72 = styled_components.default.div`
   display: flex;
   position: relative;
   flex: 1;
@@ -2435,7 +2438,7 @@ var Container$71 = styled_components.default.div`
   color: var(--grey-10);
 `;
 var FlexContentPlaceholder = ({ title = "Placeholder" }) => {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Container$71, { children: [
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Container$72, { children: [
 		title,
 		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Arrow$1, {
 			className: "t l",
@@ -2572,7 +2575,7 @@ var AlertBar = ({ type = "info", message, hideCloseButton = false }) => {
 };
 //#endregion
 //#region src/Alerts/atom/Notification.tsx
-var Container$70 = styled_components.default.div`
+var Container$71 = styled_components.default.div`
   min-height: 50px;
   border-bottom-left-radius: 3px;
   border-bottom-right-radius: 3px;
@@ -2740,7 +2743,7 @@ var Notification = ({ id, type = "info", message, icon = "", isPinned = false, a
 			}
 		};
 	}, []);
-	return message && !dismiss ? react_dom.default.createPortal(/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Container$70, {
+	return message && !dismiss ? react_dom.default.createPortal(/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Container$71, {
 		$type: type,
 		$isClosing: slideUp,
 		$isVisible: isVisible,
@@ -3142,7 +3145,7 @@ var Button = ({ design = "primary", size = "normal", shadow = false, noPadding =
 };
 //#endregion
 //#region src/Form/atoms/ButtonWithIcon.tsx
-var Container$69 = styled_components.default.div`
+var Container$70 = styled_components.default.div`
   display: inline;
 `;
 var TextContainer$3 = styled_components.default.div`
@@ -3258,7 +3261,7 @@ var InnerContainer$3 = styled_components.default.div`
   `};
 `;
 var ButtonWithIcon = ({ design = "primary", size = "normal", loading = false, shadow = false, onClick, disabled, position, icon, weight = "regular", children, ...props }) => {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Container$69, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Container$70, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
 		noPadding: true,
 		disabled: disabled || loading,
 		design,
@@ -3290,7 +3293,7 @@ var ButtonWithIcon = ({ design = "primary", size = "normal", loading = false, sh
 };
 //#endregion
 //#region src/Form/atoms/ButtonWithLoading.tsx
-var Container$68 = styled_components.default.div`
+var Container$69 = styled_components.default.div`
   display: inline;
 `;
 var TextContainer$2 = styled_components.default.div`
@@ -3350,7 +3353,7 @@ var InnerContainer$2 = styled_components.default.div`
   `}
 `;
 var ButtonWithLoading = ({ design = "primary", size = "normal", shadow = false, onClick, disabled, position, loading = false, children, ...rest }) => {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Container$68, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Container$69, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
 		noPadding: true,
 		disabled: disabled || loading,
 		design,
@@ -3552,7 +3555,7 @@ var IconWrapper$3 = styled_components.default.div`
     }
   }
 `;
-var Container$67 = styled_components.default.label`
+var Container$68 = styled_components.default.label`
   display: inline-block;
   user-select: none;
   ${CheckboxOuter}{
@@ -3650,7 +3653,7 @@ var Checkbox = ({ indeterminate: _indeterminate = false, disabled, checked = fal
 		setIsChecked(checked);
 	}, [checked]);
 	const iconWeight = require_LineUIVideoBase.dimensions.icons.weights.regular;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Container$67, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Container$68, {
 		onChange: customOnChange,
 		$disabled: disabled,
 		$visualState: visualState,
@@ -3672,7 +3675,7 @@ var Checkbox = ({ indeterminate: _indeterminate = false, disabled, checked = fal
 };
 //#endregion
 //#region src/Form/atoms/DropArea.tsx
-var Container$66 = styled_components.default.div`
+var Container$67 = styled_components.default.div`
   ${({ $height }) => $height ? `height: ${$height}` : null};
   position: relative;
 `;
@@ -3721,7 +3724,7 @@ var DropArea = ({ height, text, dropCallback, ...props }) => {
 			window.removeEventListener("drop", handleWindowDragAndDrop);
 		};
 	}, [handleWindowDragAndDrop]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Container$66, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Container$67, {
 		$height: height,
 		...props,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DragAndDrop, {
@@ -3864,7 +3867,7 @@ var InputContainer$2 = styled_components.default.div`
   `}
 
 `;
-var Container$65 = styled_components.default.div`
+var Container$66 = styled_components.default.div`
   ${({ $fieldState, $showFeedback }) => styled_components.css`
 
     display: flex;
@@ -3923,7 +3926,7 @@ var Input = ({ type = "text", placeholder = "", defaultValue, fieldState = "defa
 			});
 		}
 	};
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Container$65, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Container$66, {
 		$fieldState: fieldState || "default",
 		$showFeedback: showFeedback,
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(InputContainer$2, {
@@ -3947,7 +3950,7 @@ var Input = ({ type = "text", placeholder = "", defaultValue, fieldState = "defa
 };
 //#endregion
 //#region src/Form/atoms/InputFileButton.tsx
-var Container$64 = styled_components.default.div``;
+var Container$65 = styled_components.default.div``;
 var HiddenInput$2 = styled_components.default.input`
   display: none;
 `;
@@ -3962,7 +3965,7 @@ var InputFileButton = ({ text, buttonDesign, buttonSize, inputCallback, children
 	const forwardClick = (0, react.useCallback)(() => {
 		if (fileInputRef.current) fileInputRef.current.click();
 	}, []);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Container$64, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(HiddenInput$2, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Container$65, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(HiddenInput$2, {
 		...props,
 		ref: fileInputRef,
 		type: "file",
@@ -4100,7 +4103,7 @@ var HiddenInput$1 = styled_components.default.input`
   padding:0;
   opacity: 0;
 `;
-var Container$63 = styled_components.default.div`
+var Container$64 = styled_components.default.div`
   position: relative;
   display: inline-block;
   width: 18px;
@@ -4114,7 +4117,7 @@ var RadioButton = ({ id, value, name, currentChecked, disabled = false, required
 		onChangeCallback(checkedValue);
 	}, [onChangeCallback]);
 	const isChecked = currentChecked !== void 0 ? currentChecked === value : false;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Container$63, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(HiddenInput$1, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Container$64, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(HiddenInput$1, {
 		type: "radio",
 		id,
 		name,
@@ -4203,7 +4206,7 @@ var StyledSelect = styled_components.default.select`
     display: none;
   }
 `;
-var Container$62 = styled_components.default.div`
+var Container$63 = styled_components.default.div`
 
   ${({ $activePlaceholder }) => $activePlaceholder && styled_components.css`
     ${StyledSelect} {
@@ -4268,7 +4271,7 @@ var SelectField = ({ fieldState = "default", placeholder, label, icon, isCompact
 			})
 		})
 	] });
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Container$62, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Container$63, {
 		$isCompact: isCompact,
 		$activePlaceholder: activePlaceholder,
 		children: label ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Label, {
@@ -4626,7 +4629,7 @@ var UnitKey = styled_components.default.div`
   margin-top: 1px;
   white-space: nowrap;
 `;
-var Container$61 = styled_components.default.div`
+var Container$62 = styled_components.default.div`
   position: relative;
 
   ${({ $fieldState }) => $fieldState && styled_components.css`
@@ -4637,7 +4640,7 @@ var Container$61 = styled_components.default.div`
   `};
 `;
 var SmallInput = ({ unit, label, name, type = "text", placeholder = "", defaultValue, fieldState = "default", required = false, className, children, formAction, ...props }) => {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Container$61, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Container$62, {
 		className,
 		$fieldState: fieldState || "default",
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Label, {
@@ -4734,7 +4737,7 @@ var IconWrapper$2 = styled_components.default.div`
   }
 `;
 var SpinnerWrapper = styled_components.default.div``;
-var Container$60 = (0, styled_components.default)(StyledLabel)`
+var Container$61 = (0, styled_components.default)(StyledLabel)`
   user-select: none;
   display: inline-flex;
   gap: 8px;
@@ -4900,7 +4903,7 @@ var Switch = ({ state = "default", leftTheme = "off", rightTheme = "on", labelTe
 	(0, react.useEffect)(() => {
 		if (innerRef.current) setInnerSize(parseInt(getComputedStyle(innerRef.current).getPropertyValue("--switch-inner-size"), 10));
 	}, []);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Container$60, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Container$61, {
 		onChange: customOnChange,
 		onMouseLeave: () => setJustUpdated(false),
 		$activeTheming: activeTheming,
@@ -5015,7 +5018,7 @@ var FeedbackMessage = styled_components.default.div`
   font-weight: 500;
   color: var(--white-1);
 `;
-var Container$59 = styled_components.default.div`
+var Container$60 = styled_components.default.div`
   ${({ $fieldState, $showFeedback }) => styled_components.css`
     display: flex;
     position: relative;
@@ -5077,7 +5080,7 @@ var TextArea = ({ placeholder = "", fieldState = "default", showFeedback = false
 			});
 		}
 	};
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Container$59, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Container$60, {
 		$fieldState: fieldState || "default",
 		$showFeedback: showFeedback,
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledTextArea, {
@@ -5109,7 +5112,7 @@ var Form = ({ children, spacing = "45px;", action, ...props }) => {
 //#endregion
 //#region src/Form/molecules/ActionButtons.tsx
 var StyledIconButton$1 = (0, styled_components.default)(IconButton)``;
-var Container$58 = styled_components.default.div`
+var Container$59 = styled_components.default.div`
   display: flex;
   ${StyledIconButton$1} {
     margin-left: 15px;
@@ -5131,7 +5134,7 @@ var Container$58 = styled_components.default.div`
   `};
 `;
 var ActionButtons = ({ buttonsConfig, alignment = "right" }) => {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Container$58, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Container$59, {
 		$alignment: alignment,
 		children: buttonsConfig.map((btn) => {
 			const { icon, size, weight, color, hoverColor, onClick } = btn;
@@ -5148,7 +5151,7 @@ var ActionButtons = ({ buttonsConfig, alignment = "right" }) => {
 };
 //#endregion
 //#region src/Form/molecules/ButtonsStack.tsx
-var Container$57 = styled_components.default.div`
+var Container$58 = styled_components.default.div`
   display: flex;
   flex-direction: column;
   gap: 8px;
@@ -5157,7 +5160,7 @@ var Container$57 = styled_components.default.div`
   }
 `;
 var ButtonsStack = ({ buttons }) => {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Container$57, { children: buttons.map(({ id, buttonType, icon, text, iconPosition, size, ...buttonProps }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Container$58, { children: buttons.map(({ id, buttonType, icon, text, iconPosition, size, ...buttonProps }) => {
 		if (buttonType === "icon-button") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ButtonWithIcon, {
 			size: size || "small",
 			icon: icon || "",
@@ -5530,7 +5533,7 @@ var CropArea = ({ isResizable, hasAspectRatio }) => {
 };
 //#endregion
 //#region src/Form/molecules/CropTool.tsx
-var Container$56 = styled_components.default.div`
+var Container$57 = styled_components.default.div`
   position: fixed;
   top: 0;
   left: 0;
@@ -5738,7 +5741,7 @@ var CropTool = ({ title = "Crop Image", cancelBtnTxt = "Cancel", cropBtnTxt = "C
 		if (!viewDimensions.isResizing) return;
 		viewDimensions.isResizing = false;
 	}, []);
-	return react_dom.default.createPortal(/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Container$56, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(InnerContainer$1, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ToolHeader, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(TextGroup$1, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_LineUIVideoBase.Icon, {
+	return react_dom.default.createPortal(/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Container$57, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(InnerContainer$1, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ToolHeader, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(TextGroup$1, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_LineUIVideoBase.Icon, {
 		icon: "Crop",
 		size: 20,
 		color: "mono"
@@ -5798,7 +5801,7 @@ var CropTool = ({ title = "Crop Image", cancelBtnTxt = "Cancel", cropBtnTxt = "C
 * Marks could also be handle by it.
 * Providing quantity of marks and generating the marks array based with unit
 */
-var Container$55 = styled_components.default.div``;
+var Container$56 = styled_components.default.div``;
 var Headers$1 = styled_components.default.div`
   font-size: 14px;
   color: var(--grey-10);
@@ -5881,7 +5884,7 @@ var DurationSlider = ({ max, min, defaultValue = 0, title = "", timeUnit, contro
 		if (inputCallback) inputCallback(value);
 		setSelectedValue(value);
 	}, [inputCallback]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Container$55, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Headers$1, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Label, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Container$56, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Headers$1, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Label, {
 		htmlFor: "duration-slider",
 		labelText: title
 	}), getValueTitle(controlledValue ? controlledValue : selectedValue, timeUnit, timeFormat)] }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SliderInput, {
@@ -5894,83 +5897,6 @@ var DurationSlider = ({ max, min, defaultValue = 0, title = "", timeUnit, contro
 	})] });
 };
 //#endregion
-//#region src/Form/molecules/PasswordField.tsx
-var PasswordField = ({ name, label, fieldState, feedbackMessage, required, children, formAction, ...props }) => {
-	const [showValue, setShowValue] = (0, react.useState)(false);
-	const [actionIcon, setActionIcon] = (0, react.useState)("PasswordHide");
-	const actionCallback = () => {
-		const newValue = !showValue;
-		setShowValue(newValue);
-		setActionIcon(newValue ? "PasswordShow" : "PasswordHide");
-	};
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Label, {
-		htmlFor: name,
-		labelText: label,
-		required,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Input, {
-			type: showValue ? "text" : "password",
-			actionCallback,
-			actionIcon,
-			name,
-			fieldState,
-			feedbackMessage,
-			required,
-			...props
-		})
-	});
-};
-//#endregion
-//#region src/Form/molecules/PercentageSlider.tsx
-var Container$54 = styled_components.default.div``;
-var Headers = styled_components.default.div`
-  font-size: 14px;
-  color: var(--grey-10);
-  display: flex;
-  justify-content: space-between;
-  margin-bottom: 20px;
-  ${({ $allMarkCentered }) => $allMarkCentered ? `padding: 0;` : `padding: 0 6px;`};
-`;
-var ValueTitle = (0, styled_components.default)(Label)`
-  font-family: ${({ theme }) => theme.fontFamily.data};
-`;
-var getThumbColor = (value) => {
-	if (value <= 10) return "error";
-	if (value > 10 && value <= 30) return "warning";
-	return "success";
-};
-var getTitleLevel = (value) => {
-	if (value <= 10) return "Critical Level";
-	if (value > 10 && value <= 30) return "Warning Level";
-	return "Safe Level";
-};
-var PercentageSlider = ({ defaultValue = 0, inputCallback, updateThumbColor, updateTitle, showValue, allMarkCentered, ...props }) => {
-	const [selectedValue, setSelectedValue] = (0, react.useState)(defaultValue);
-	const handleSelectedValue = (0, react.useCallback)((value) => {
-		if (inputCallback) inputCallback(value);
-		setSelectedValue(value);
-	}, [inputCallback]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Container$54, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Headers, {
-		$allMarkCentered: allMarkCentered,
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Label, {
-			htmlFor: "percentage-slider",
-			labelText: updateTitle ? updateTitle(selectedValue) : getTitleLevel(selectedValue)
-		}), showValue && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ValueTitle, {
-			htmlFor: "percentage-slider",
-			labelText: `${selectedValue}%`
-		})]
-	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SliderInput, {
-		...props,
-		id: "percentage-slider",
-		max: 100,
-		min: 0,
-		defaultValue,
-		showValue,
-		onChangeCallback: handleSelectedValue,
-		thumbColor: updateThumbColor ? updateThumbColor(selectedValue) : getThumbColor(selectedValue),
-		allMarkCentered
-	})] });
-};
-//#endregion
 //#region src/hooks/useMediaQuery.ts
 /**
 * Custom hook that tells you whether a given media query is active.
@@ -6224,7 +6150,7 @@ var MediaBox = ({ src: incomingSrc, alt, videoOptions = {}, mediaType, hasModalL
 };
 //#endregion
 //#region src/Modals/Modal.tsx
-var Container$53 = styled_components.default.div`
+var Container$55 = styled_components.default.div`
   position: fixed;
   top: 0;
   left: 0;
@@ -6299,7 +6225,7 @@ var Modal = ({ isOpen = false, isCloseEnable = true, closeText = "", width = "",
 		if (dismissCallback) dismissCallback();
 		onDismiss();
 	}, [onDismiss, dismissCallback]);
-	return isOpen ? react_dom.default.createPortal(/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Container$53, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(LightBox, {
+	return isOpen ? react_dom.default.createPortal(/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Container$55, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(LightBox, {
 		ref: lightBoxRef,
 		$width: width,
 		$padding: padding,
@@ -6631,6 +6557,325 @@ var useTo = () => {
 	return (0, react.useCallback)((url) => () => navigate(url), [navigate]);
 };
 //#endregion
+//#region src/Form/molecules/EditableText.tsx
+var IconSlot = styled_components.default.span`
+  display: flex;
+  flex-shrink: 0;
+`;
+var Text = styled_components.default.span`
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+`;
+var Container$54 = styled_components.default.div`
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+  height: 100%;
+  font-family: var(--font-ui);
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 20px;
+  color: var(--grey-12);
+`;
+var Trigger$1 = styled_components.default.button`
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+  padding: 0;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  outline: none;
+  font: inherit;
+  color: inherit;
+  text-align: left;
+
+  & svg [stroke] { stroke: currentColor; }
+
+  ${IconSlot} {
+    opacity: 0;
+    transition: opacity var(--speed-normal) var(--easing-primary-in-out);
+  }
+
+  &:hover ${IconSlot},
+  &:focus-visible ${IconSlot} {
+    opacity: 1;
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--primary-9);
+    outline-offset: 2px;
+  }
+
+  ${({ $alwaysShowIcon }) => $alwaysShowIcon && styled_components.css`
+    ${IconSlot} { opacity: 1; }
+  `}
+`;
+var Field = styled_components.default.input`
+  box-sizing: border-box;
+  height: 24px;
+  width: ${({ $fieldWidth }) => $fieldWidth};
+  max-width: 100%;
+  min-width: 0;
+  padding: 0 8px;
+  border: 1px solid var(--input-default-border-color);
+  border-radius: 3px;
+  background: var(--input-default-background-color);
+  color: var(--input-color-default);
+  font: inherit;
+  outline: none;
+
+  &:focus {
+    border-color: var(--input-default-focused-border-color);
+    box-shadow: 0 3px 3px var(--input-default-focused-shadow-color);
+  }
+
+  &::placeholder {
+    color: var(--input-color-placeholder);
+    font-style: italic;
+  }
+
+  &:lang(ja)::placeholder {
+    font-style: normal;
+  }
+
+  &[readonly] {
+    color: var(--input-color-disabled);
+  }
+`;
+var Actions = styled_components.default.div`
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  gap: 8px;
+`;
+var EditableText = ({ value, defaultValue, label, onSave, onCancel, onEditingChange, saveOnClickOutside = false, allowEmpty = false, fieldWidth = "240px", editIcon = "Edit", alwaysShowEditIcon = false, editText = "Edit", saveText = "Save", savingText = "Saving", cancelText = "Cancel", disabled = false, type = "text", onKeyDown, ...props }) => {
+	const [isEditing, setIsEditing] = (0, react.useState)(false);
+	const [isSaving, setIsSaving] = (0, react.useState)(false);
+	const [ownText, setOwnText] = (0, react.useState)(defaultValue ?? "");
+	const isControlled = value !== void 0;
+	const text = isControlled ? value : ownText;
+	const [draft, setDraft] = (0, react.useState)(text);
+	const containerRef = (0, react.useRef)(null);
+	const fieldRef = (0, react.useRef)(null);
+	const triggerRef = (0, react.useRef)(null);
+	const restoreFocus = (0, react.useRef)(false);
+	const setEditing = (0, react.useCallback)((next) => {
+		setIsEditing(next);
+		onEditingChange?.(next);
+	}, [onEditingChange]);
+	const open = (0, react.useCallback)(() => {
+		setDraft(text);
+		setEditing(true);
+	}, [text, setEditing]);
+	const close = (0, react.useCallback)((withFocus) => {
+		restoreFocus.current = withFocus;
+		setEditing(false);
+	}, [setEditing]);
+	(0, react.useEffect)(() => {
+		if (!isEditing) return;
+		fieldRef.current?.focus();
+		fieldRef.current?.select();
+	}, [isEditing]);
+	(0, react.useEffect)(() => {
+		if (isEditing || !restoreFocus.current) return;
+		restoreFocus.current = false;
+		triggerRef.current?.focus();
+	}, [isEditing]);
+	(0, react.useEffect)(() => {
+		if (disabled && isEditing) close(false);
+	}, [
+		disabled,
+		isEditing,
+		close
+	]);
+	const cancel = (0, react.useCallback)((withFocus) => {
+		close(withFocus);
+		onCancel?.();
+	}, [close, onCancel]);
+	const commit = (0, react.useCallback)(async (withFocus) => {
+		if (isSaving) return;
+		const next = draft.trim();
+		if (!next && !allowEmpty) return;
+		if (next === text) {
+			close(withFocus);
+			return;
+		}
+		setIsSaving(true);
+		try {
+			await onSave?.(next);
+			if (!isControlled) setOwnText(next);
+			close(withFocus);
+		} catch {} finally {
+			setIsSaving(false);
+		}
+	}, [
+		isSaving,
+		draft,
+		allowEmpty,
+		text,
+		isControlled,
+		onSave,
+		close
+	]);
+	useClickOutside(containerRef, (0, react.useCallback)(() => {
+		if (!isEditing || isSaving) return;
+		if (saveOnClickOutside) {
+			commit(false);
+			return;
+		}
+		cancel(false);
+	}, [
+		isEditing,
+		isSaving,
+		saveOnClickOutside,
+		commit,
+		cancel
+	]));
+	const handleKeyDown = (0, react.useCallback)((e) => {
+		onKeyDown?.(e);
+		if (e.nativeEvent.isComposing) return;
+		if (e.key === "Enter") {
+			e.preventDefault();
+			commit(true);
+			return;
+		}
+		if (e.key === "Escape") cancel(true);
+	}, [
+		onKeyDown,
+		commit,
+		cancel
+	]);
+	const canSave = allowEmpty || draft.trim().length > 0;
+	if (isEditing) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Container$54, {
+		ref: containerRef,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Field, {
+			...props,
+			ref: fieldRef,
+			type,
+			$fieldWidth: fieldWidth,
+			"aria-label": label,
+			"aria-busy": isSaving,
+			readOnly: isSaving,
+			value: draft,
+			onChange: (e) => setDraft(e.target.value),
+			onKeyDown: handleKeyDown
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Actions, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ButtonWithLoading, {
+			size: "small",
+			loading: isSaving,
+			disabled: !canSave,
+			"aria-label": isSaving ? savingText : saveText,
+			onClick: () => {
+				commit(true);
+			},
+			children: isSaving ? savingText : saveText
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
+			design: "secondary",
+			size: "small",
+			disabled: isSaving,
+			onClick: () => cancel(true),
+			children: cancelText
+		})] })]
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Container$54, {
+		ref: containerRef,
+		children: disabled ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Text, { children: text }) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Trigger$1, {
+			ref: triggerRef,
+			type: "button",
+			$alwaysShowIcon: alwaysShowEditIcon || text === "",
+			"aria-label": `${text}, ${editText}`,
+			onClick: open,
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Text, { children: text }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconSlot, {
+				"aria-hidden": "true",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_LineUIVideoBase.Icon, {
+					icon: editIcon,
+					size: 12
+				})
+			})]
+		})
+	});
+};
+//#endregion
+//#region src/Form/molecules/PasswordField.tsx
+var PasswordField = ({ name, label, fieldState, feedbackMessage, required, children, formAction, ...props }) => {
+	const [showValue, setShowValue] = (0, react.useState)(false);
+	const [actionIcon, setActionIcon] = (0, react.useState)("PasswordHide");
+	const actionCallback = () => {
+		const newValue = !showValue;
+		setShowValue(newValue);
+		setActionIcon(newValue ? "PasswordShow" : "PasswordHide");
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Label, {
+		htmlFor: name,
+		labelText: label,
+		required,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Input, {
+			type: showValue ? "text" : "password",
+			actionCallback,
+			actionIcon,
+			name,
+			fieldState,
+			feedbackMessage,
+			required,
+			...props
+		})
+	});
+};
+//#endregion
+//#region src/Form/molecules/PercentageSlider.tsx
+var Container$53 = styled_components.default.div``;
+var Headers = styled_components.default.div`
+  font-size: 14px;
+  color: var(--grey-10);
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 20px;
+  ${({ $allMarkCentered }) => $allMarkCentered ? `padding: 0;` : `padding: 0 6px;`};
+`;
+var ValueTitle = (0, styled_components.default)(Label)`
+  font-family: ${({ theme }) => theme.fontFamily.data};
+`;
+var getThumbColor = (value) => {
+	if (value <= 10) return "error";
+	if (value > 10 && value <= 30) return "warning";
+	return "success";
+};
+var getTitleLevel = (value) => {
+	if (value <= 10) return "Critical Level";
+	if (value > 10 && value <= 30) return "Warning Level";
+	return "Safe Level";
+};
+var PercentageSlider = ({ defaultValue = 0, inputCallback, updateThumbColor, updateTitle, showValue, allMarkCentered, ...props }) => {
+	const [selectedValue, setSelectedValue] = (0, react.useState)(defaultValue);
+	const handleSelectedValue = (0, react.useCallback)((value) => {
+		if (inputCallback) inputCallback(value);
+		setSelectedValue(value);
+	}, [inputCallback]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Container$53, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Headers, {
+		$allMarkCentered: allMarkCentered,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Label, {
+			htmlFor: "percentage-slider",
+			labelText: updateTitle ? updateTitle(selectedValue) : getTitleLevel(selectedValue)
+		}), showValue && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ValueTitle, {
+			htmlFor: "percentage-slider",
+			labelText: `${selectedValue}%`
+		})]
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SliderInput, {
+		...props,
+		id: "percentage-slider",
+		max: 100,
+		min: 0,
+		defaultValue,
+		showValue,
+		onChangeCallback: handleSelectedValue,
+		thumbColor: updateThumbColor ? updateThumbColor(selectedValue) : getThumbColor(selectedValue),
+		allMarkCentered
+	})] });
+};
+//#endregion
 //#region src/Form/atoms/SplitButtonOption.tsx
 var StyledButton$5 = styled_components.default.button`
   ${resetButtonStyles}
@@ -12409,10 +12654,15 @@ var TagList = ({ tagsConfig }) => {
 	}) });
 };
 //#endregion
+//#region src/Chips/ChipCompactContext.tsx
+var ChipCompactContext = (0, react.createContext)(false);
+//#endregion
 //#region src/Chips/atoms/ChipButton.tsx
 var collapse = styled_components.keyframes`
   to {
     width: 0;
+    padding-left: 0;
+    padding-right: 0;
     opacity: 0;
     border-left-width: 0;
   }
@@ -12422,6 +12672,7 @@ var StyledChip = styled_components.default.button`
   display: flex;
   align-items: center;
   justify-content: center;
+  gap: 8px;
   width: 56px;
   height: 56px;
   padding: 0;
@@ -12460,10 +12711,23 @@ var StyledChip = styled_components.default.button`
     outline-offset: -2px;
   }
 
-  ${({ $selected }) => $selected && styled_components.css`
-    background-color: var(--primary-a3);
-    color: var(--primary-11);
-    & svg [stroke] { stroke: var(--primary-11); }
+  ${({ $isCompact }) => $isCompact && styled_components.css`
+    width: auto;
+    height: 100%;
+    min-height: 32px;
+    padding: 0 12px;
+    justify-content: flex-start;
+    white-space: nowrap;
+
+    &::after { height: 2px; }
+  `}
+
+  ${({ $selected, $barOnly }) => $selected && styled_components.css`
+    ${!$barOnly && styled_components.css`
+      background-color: var(--primary-a3);
+      color: var(--primary-11);
+      & svg [stroke] { stroke: var(--primary-11); }
+    `}
     &::after { background-color: var(--primary-9); }
     &:hover:enabled::after { background-color: var(--primary-9); }
   `}
@@ -12479,9 +12743,19 @@ var StyledChip = styled_components.default.button`
     @media (prefers-reduced-motion: reduce) { animation: none; }
   `}
 `;
-var ChipButton = ({ variant = "text", icon, label, selected = false, noDivider = false, leaving = false, onLeaveEnd, onAnimationEnd, children, ...props }) => {
+var ChipButton = ({ variant = "text", isCompact, barOnly = false, icon, label, selected = false, noDivider = false, leaving = false, onLeaveEnd, onAnimationEnd, children, ...props }) => {
 	const showDivider = !noDivider;
+	const barIsCompact = (0, react.useContext)(ChipCompactContext);
+	const compact = isCompact ?? barIsCompact;
+	const showIcon = variant !== "text" && !!icon;
+	const showText = variant !== "icon" || !icon;
 	const isMenuButton = props["aria-haspopup"] !== void 0;
+	const chipRef = (0, react.useRef)(null);
+	(0, react.useLayoutEffect)(() => {
+		const chip = chipRef.current;
+		if (!chip) return;
+		chip.style.width = leaving && compact ? `${chip.offsetWidth}px` : "";
+	}, [leaving, compact]);
 	const hasFired = (0, react.useRef)(false);
 	const fireLeaveEnd = (0, react.useCallback)(() => {
 		if (hasFired.current) return;
@@ -12503,18 +12777,21 @@ var ChipButton = ({ variant = "text", icon, label, selected = false, noDivider =
 		fireLeaveEnd,
 		onAnimationEnd
 	]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledChip, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(StyledChip, {
+		ref: chipRef,
 		type: "button",
 		"aria-pressed": isMenuButton ? void 0 : selected,
 		$selected: selected,
 		$showDivider: showDivider,
 		$leaving: leaving,
+		$isCompact: compact,
+		$barOnly: barOnly,
 		...props,
 		onAnimationEnd: handleAnimationEnd,
-		children: variant === "icon" && icon ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_LineUIVideoBase.Icon, {
+		children: [showIcon ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_LineUIVideoBase.Icon, {
 			icon,
 			size: 16
-		}) : label ?? children
+		}) : null, showText ? label ?? children : null]
 	});
 };
 //#endregion
@@ -12562,19 +12839,20 @@ var Menu = styled_components.default.div`
   flex-direction: column;
   align-items: stretch;
   min-width: 216px;
-  padding: 4px 0;
+  padding: 0;
+  overflow: hidden;
   background: var(--grey-1);
-  border: 1px solid var(--grey-4);
+  border: 1px solid var(--grey-7);
   border-radius: 4px;
   box-shadow: 0px 5px 25px 0px var(--filter-button-shadow-color);
 `;
 var MenuItem = styled_components.default.button`
   display: flex;
   align-items: center;
-  gap: 4px;
+  gap: 12px;
   width: 100%;
   height: var(--button-height, 32px);
-  padding: 3px 8px;
+  padding: 0 8px;
   border: none;
   border-bottom: 1px solid var(--grey-7);
   background: transparent;
@@ -12587,11 +12865,15 @@ var MenuItem = styled_components.default.button`
   text-align: left;
   transition: background-color var(--speed-fast) var(--easing-primary-in-out);
 
-  & svg [stroke] { stroke: var(--grey-12); }
+  & svg [stroke] { stroke: var(--grey-10); }
 
   &:last-child { border-bottom: none; }
   &:hover:enabled { background-color: var(--grey-3); }
-  &:disabled { cursor: not-allowed; opacity: 0.5; }
+  &:disabled {
+    cursor: not-allowed;
+    color: var(--grey-7);
+    & svg [stroke] { stroke: var(--grey-7); }
+  }
 
   ${({ $current }) => $current && styled_components.css`
     background-color: var(--grey-4);
@@ -12601,6 +12883,8 @@ var MenuItem = styled_components.default.button`
 var CheckSlot = styled_components.default.span`
   display: flex;
   margin-left: auto;
+
+  & svg [stroke] { stroke: var(--primary-11); }
 `;
 var ChipDropdown = ({ items, icon = "FilterEllipsis", label, selectedId, checkIcon = "Success", triggerLabel, noDivider = false, disabled = false, onOpenChange, onKeyDown, ...props }) => {
 	const [isOpen, setIsOpen] = (0, react.useState)(false);
@@ -12702,6 +12986,11 @@ var Bar = styled_components.default.div`
   & > * {
     flex-shrink: 0;
   }
+
+  ${({ $isCompact }) => $isCompact && styled_components.css`
+    height: 100%;
+    min-height: 32px;
+  `}
 `;
 var NAV_KEYS = [
 	"ArrowLeft",
@@ -12709,7 +12998,7 @@ var NAV_KEYS = [
 	"Home",
 	"End"
 ];
-var ChipBar = ({ children, onKeyDown, onFocus, ...props }) => {
+var ChipBar = ({ children, isCompact = false, leadingDivider = false, onKeyDown, onFocus, ...props }) => {
 	const barRef = (0, react.useRef)(null);
 	const [activeIndex, setActiveIndex] = (0, react.useState)(0);
 	const getCells = (0, react.useCallback)(() => {
@@ -12758,14 +13047,18 @@ var ChipBar = ({ children, onKeyDown, onFocus, ...props }) => {
 		if (e.key === "End") next = focusables.length - 1;
 		focusables[next]?.focus();
 	}, [getCells, onKeyDown]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Bar, {
-		ref: barRef,
-		role: "toolbar",
-		"aria-label": "Chip bar",
-		...props,
-		onFocus: handleFocus,
-		onKeyDown: handleKeyDown,
-		children: cells.map((child, i) => i === 0 && typeof child.type !== "string" ? (0, react.cloneElement)(child, { noDivider: true }) : child)
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChipCompactContext.Provider, {
+		value: isCompact,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Bar, {
+			ref: barRef,
+			role: "toolbar",
+			"aria-label": "Chip bar",
+			$isCompact: isCompact,
+			...props,
+			onFocus: handleFocus,
+			onKeyDown: handleKeyDown,
+			children: cells.map((child, i) => i === 0 && !leadingDivider && typeof child.type !== "string" ? (0, react.cloneElement)(child, { noDivider: true }) : child)
+		})
 	});
 };
 //#endregion
@@ -14465,20 +14758,48 @@ var RESERVED_DRAWER_IDS = [
 	"notifications",
 	"custom"
 ];
+var TopBarHeightVars = styled_components.createGlobalStyle`
+  :root {
+    --top-bar-bottom-height: ${({ $bottomHeight }) => $bottomHeight};
+    --top-bar-total-height: calc(var(--top-bar-height, 56px) + var(--top-bar-bottom-height, 0px));
+  }
+`;
 var Container$10 = styled_components.default.div`
   z-index: 9;
   position: sticky;
   top: 0;
-  height: 56px;
-  padding: 0 16px 0 24px;
   width: 100%;
   display: flex;
-  justify-content: space-between;
+  flex-direction: column;
   align-self: flex-start;
-  border-bottom: 1px solid var(--dividing-line);
+  border-bottom: var(--top-bar-divider-width, 1px) solid var(--dividing-line);
   background: var(--grey-2);
   box-shadow: 5px 0px 10px 0px var(--primary-a2);
 `;
+var BarRow = styled_components.default.div`
+  height: calc(var(--top-bar-height, 56px) - var(--top-bar-divider-width, 1px));
+  padding: 0 16px 0 24px;
+  display: flex;
+  justify-content: space-between;
+`;
+var BottomArea = styled_components.default.div`
+  position: relative;
+  box-sizing: border-box;
+  height: var(--top-bar-bottom-height, 32px);
+  display: flex;
+  align-items: center;
+  background: var(--global-element-background);
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 1px;
+    background: var(--dividing-line);
+  }
+`;
 var RightArea = styled_components.default.div`
   display: flex;
   align-items: center;
@@ -14603,7 +14924,7 @@ var Drawer = styled_components.default.div`
 
   position: fixed;
   right: -10px;
-  top: 56px;
+  top: var(--top-bar-total-height, 56px);
   bottom: 0;
   background: var(--global-element-background);
   border-left: var(--dividing-line) 1px solid;
@@ -14634,7 +14955,7 @@ var NotificationsContainer = styled_components.default.div`
     overflow-y: scroll;
     margin-right: -17px;
 `;
-var TopBar = ({ hasNotifications = false, hasLanguage = false, selectedLanguageText = "", languageOptionsText, selectedLangAttribute, hasLogout = true, logoutLink = "/logout", logoutText = "Logout", hasSearch = false, hasCurrentUser = true, currentUserText = "Current User", accountOptionText = "Account Options", searchPlaceholder = "Search for devices, analysis tasks, etc.", userSubmenu = [], userDrawerBespoke, loggedInUser, notificationsHistory, customDrawer, hasSwitchTheme = false, isLightMode = true, switchThemeText = "SWITCH THEME", selectedThemeText = "", onLogout = () => {}, onLanguageToggle = () => {}, onThemeToggle = () => {}, userDrawerFooter, userDrawerMeta, onUserDrawerMetaClick = () => {}, hasUserDrawerMeta, copySuccessMessage, includeCopyTitle, hasUserDrawerFooter, badge, leftAreaElement, sideDrawers, activeDrawer, onActiveDrawerChange }) => {
+var TopBar = ({ hasNotifications = false, hasLanguage = false, selectedLanguageText = "", languageOptionsText, selectedLangAttribute, hasLogout = true, logoutLink = "/logout", logoutText = "Logout", hasSearch = false, hasCurrentUser = true, currentUserText = "Current User", accountOptionText = "Account Options", searchPlaceholder = "Search for devices, analysis tasks, etc.", userSubmenu = [], userDrawerBespoke, loggedInUser, notificationsHistory, customDrawer, hasSwitchTheme = false, isLightMode = true, switchThemeText = "SWITCH THEME", selectedThemeText = "", onLogout = () => {}, onLanguageToggle = () => {}, onThemeToggle = () => {}, userDrawerFooter, userDrawerMeta, onUserDrawerMetaClick = () => {}, hasUserDrawerMeta, copySuccessMessage, includeCopyTitle, hasUserDrawerFooter, badge, leftAreaElement, bottomAreaElement, bottomAreaHeight = "32px", sideDrawers, activeDrawer, onActiveDrawerChange }) => {
 	const [internalDrawer, setInternalDrawer] = (0, react.useState)(null);
 	const isControlled = activeDrawer !== void 0;
 	const openDrawer = isControlled ? activeDrawer : internalDrawer;
@@ -14668,12 +14989,12 @@ var TopBar = ({ hasNotifications = false, hasLanguage = false, selectedLanguageT
 		for (const warning of sideDrawerWarnings) console.warn(`TopBar: ${warning}`);
 	}, []);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Container$10, { children: [
-		hasSearch ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(SearchBar, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconWrapper, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_LineUIVideoBase.Icon, {
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TopBarHeightVars, { $bottomHeight: bottomAreaElement ? bottomAreaHeight : "0px" }),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(BarRow, { children: [hasSearch ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(SearchBar, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconWrapper, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_LineUIVideoBase.Icon, {
 			icon: "Search",
 			size: 16,
 			color: "grey-6"
-		}) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SearchInput, { placeholder: searchPlaceholder })] }) : leftAreaElement ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LeftArea, { children: leftAreaElement }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {}),
-		/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(RightArea, { children: [badge && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TopBarBadge, { ...badge }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ButtonArea, { children: [
+		}) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SearchInput, { placeholder: searchPlaceholder })] }) : leftAreaElement ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LeftArea, { children: leftAreaElement }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(RightArea, { children: [badge && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TopBarBadge, { ...badge }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ButtonArea, { children: [
 			customDrawer && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DrawerToggle, {
 				$isActive: openDrawer === "custom",
 				onClick: () => toggleDrawers("custom"),
@@ -14697,7 +15018,8 @@ var TopBar = ({ hasNotifications = false, hasLanguage = false, selectedLanguageT
 					color: "dimmed"
 				})
 			})
-		] })] }),
+		] })] })] }),
+		bottomAreaElement ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BottomArea, { children: bottomAreaElement }) : null,
 		react_dom.default.createPortal(/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(DrawerPortalWrapper, { children: [
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Drawer, {
 				$isOpen: openDrawer === "user",
@@ -15836,9 +16158,10 @@ var HeaderContainer = styled_components.default.div`
     flex-grow: 3;
   }
 `;
-var MobileNavbar = ({ content, home, logoMark, supportUrl, defaultMenuOpen = true, closeText, hasLanguage, hasLogout, logoutLink, hasCurrentUser, hasNotifications, userSubmenu, userDrawerBespoke, loggedInUser, notificationsHistory, customDrawer, sideDrawers, supportText, onLogout, onLanguageToggle, ...props }) => {
+var MobileNavbar = ({ content, home, logoMark, supportUrl, defaultMenuOpen = true, closeText, hasLanguage, hasLogout, logoutLink, hasCurrentUser, hasNotifications, userSubmenu, userDrawerBespoke, loggedInUser, notificationsHistory, customDrawer, sideDrawers, bottomAreaElement, supportText, onLogout, onLanguageToggle, ...props }) => {
 	(0, react.useEffect)(() => {
 		if (sideDrawers?.length) console.warn("MobileNavbar: `sideDrawers` are not supported on mobile and will not open. Use `customDrawer` for a drawer that works across breakpoints.");
+		if (bottomAreaElement) console.warn("MobileNavbar: `bottomAreaElement` is not supported on mobile and will not render.");
 	}, []);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Container$1, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Tabs, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(HeaderContainer, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(MobileLogoLink, {
 		home,
@@ -16070,6 +16393,7 @@ exports.DebouncedSearcher = DebouncedSearcher;
 exports.DropArea = DropArea;
 exports.DurationSlider = DurationSlider;
 exports.EditCell = EditCell;
+exports.EditableText = EditableText;
 exports.FilterBar = FilterBar;
 exports.FilterButton = FilterButton;
 exports.FilterDropdown = FilterDropdown;