@ssa-ui-kit/core 3.12.0 → 3.13.0

package/dist/index.js

@@ -9653,6 +9653,8 @@ const main = {
     // #4178e1
     blue6RGB: 'rgb(244, 247, 252)',
     // #F4F7FC
+    blue12: 'rgba(65, 120, 225, 0.12)',
+    // #4178e1
     blue20: 'rgba(65, 120, 225, 0.2)',
     // #4178e1
     blueCool: 'rgba(108, 148, 247, 1)',
@@ -14386,7 +14388,7 @@ const IconMapComponent = ({
   ...props
 }) => {
   const Component = iconsMap[name];
-  if (Component == null) {
+  if ((0,utils_namespaceObject.isNill)(Component)) {
     return null;
   }
   return (0,jsx_runtime_namespaceObject.jsx)(Component, {
@@ -14485,10 +14487,11 @@ const useTooltip = props => {
 };
 ;// ./src/components/Tooltip/useTooltipContext.tsx
 
+
 const TooltipContext = /*#__PURE__*/(0,external_react_namespaceObject.createContext)(null);
 const useTooltipContext = () => {
   const tooltipContext = (0,external_react_namespaceObject.useContext)(TooltipContext);
-  if (tooltipContext == null) {
+  if ((0,utils_namespaceObject.isNill)(tooltipContext)) {
     throw new Error('The component should be wrapped with <Tooltip> to have access to the context');
   }
   return tooltipContext;
@@ -14886,7 +14889,7 @@ const IconButton = ({
 
 const LabelBase = /*#__PURE__*/base_default()("label",  true ? {
   target: "e1t1qetj0"
-} : 0)("display:inline-block;flex:1;font-weight:500;font-size:1rem;line-height:22px;color:", ({
+} : 0)("display:inline-block;flex:1;font-weight:500;font-size:1rem;line-height:18px;color:", ({
   theme,
   isDisabled
 }) => isDisabled ? theme.colors.grey : theme.colors.greyDarker, ";margin:0 0 6px 4px;" + ( true ? "" : 0));
@@ -15121,13 +15124,15 @@ const Checkbox = ({
 
 const FormHelperTextBase = /*#__PURE__*/base_default()("span",  true ? {
   target: "ereid9f0"
-} : 0)("display:block;font-weight:400;font-size:0.688rem;margin:6px 0 0 4px;color:", ({
+} : 0)("display:block;font-weight:400;font-size:0.75rem;margin:6px 0 0 4px;color:", ({
   theme,
-  status = 'basic'
+  status = 'basic',
+  isDisabled
 }) => {
-  if (status === 'error') return theme.palette.error.main;
-  if (status === 'success') return theme.palette.success.main;
-  return theme.colors.greyDarker60;
+  if (isDisabled) return theme.colors.grey;
+  if (status === 'error') return theme.palette.error.dark;
+  if (status === 'success') return theme.palette.success.dark;
+  return theme.colors.greyDarker80;
 }, ";" + ( true ? "" : 0));
 ;// ./src/components/FormHelperText/FormHelperText.tsx
 
@@ -15139,10 +15144,10 @@ const FormHelperText = ({
   children,
   ...rest
 }) => {
-  status = disabled ? 'basic' : status;
   return (0,jsx_runtime_namespaceObject.jsx)(FormHelperTextBase, {
     role: role,
     status: status,
+    isDisabled: disabled,
     ...rest,
     children: children
   });
@@ -15159,13 +15164,13 @@ const InputBase = /*#__PURE__*/base_default()("input",  true ? {
   theme
 }) => showBorders ? `1px solid ${theme.colors.grey}` : 'none', ";color:", ({
   theme
-}) => theme.colors.greyDarker, ";width:100%;height:44px;padding:14px;font-weight:400;font-size:0.875rem;line-height:1rem;&::placeholder{color:", ({
+}) => theme.colors.greyDarker, ";width:100%;height:44px;padding:14px;font-weight:500;font-size:0.875rem;line-height:18px;&::placeholder{color:", ({
   theme
-}) => theme.colors.greyDarker60, ";}&:disabled{color:", ({
+}) => theme.colors.greyDarker80, ";}&:disabled{color:", ({
   theme
 }) => `${theme.colors.grey}`, ";background:", ({
   theme
-}) => theme.colors.greyLighter, ";&::placeholder{color:", ({
+}) => theme.palette.secondary.light, ";&::placeholder{color:", ({
   theme
 }) => theme.colors.grey, ";}&:disabled,&:disabled:hover{border:", ({
   showBorders,
@@ -15190,7 +15195,7 @@ const basic = theme => /*#__PURE__*/(0,react_namespaceObject.css)({
       borderColor: theme.colors.greyDarker80
     },
     '&:focus': {
-      borderColor: theme.palette.primary.main
+      borderColor: theme.palette.primary.light
     }
   }
 },  true ? "" : 0,  true ? "" : 0);
@@ -15214,9 +15219,6 @@ const success = theme => /*#__PURE__*/(0,react_namespaceObject.css)({
     '&:focus': {
       borderColor: theme.palette.success.dark
     }
-  },
-  svg: {
-    stroke: theme.palette.success.main
   }
 },  true ? "" : 0,  true ? "" : 0);
 var styles_ref =  true ? {
@@ -15487,7 +15489,7 @@ const Input = /*#__PURE__*/(0,external_react_namespaceObject.forwardRef)(InputIn
 ;// ./src/components/Textarea/TextareaBase.tsx
 
 const statusToPalette = status => status === 'custom' ? 'basic' : status;
-function getStatusBoxShadow(theme, status, state) {
+function getStatusBorderColor(theme, status, state) {
   const palette = statusToPalette(status);
   const colorMap = {
     error: {
@@ -15502,41 +15504,40 @@ function getStatusBoxShadow(theme, status, state) {
     },
     default: {
       rest: theme.colors.grey ?? '',
-      hover: theme.colors.greyDarker60 ?? theme.colors.grey ?? '',
-      focus: theme.palette.primary.main ?? theme.colors.grey ?? ''
+      hover: theme.colors.greyDarker80 ?? theme.colors.grey ?? '',
+      focus: theme.palette.primary.light ?? theme.colors.grey ?? ''
     }
   };
   const colors = colorMap[palette] ?? colorMap.default;
-  const color = colors[state];
-  return `inset 0 0 1.5px 0 ${color}`;
+  return colors[state];
 }
 const TextareaBase = /*#__PURE__*/base_default()('textarea',  true ? {
   shouldForwardProp: prop => prop !== 'status',
   target: "e1jiml3c0"
 } : 0)("flex:1 100%;background:", ({
   theme
-}) => theme.colors.white, ";border-radius:12px;background-origin:border-box;background-clip:padding-box,border-box;border:none;box-shadow:", ({
+}) => theme.colors.white, ";border-radius:12px;border:", ({
   theme,
   status = 'basic'
-}) => getStatusBoxShadow(theme, status, 'rest'), ";color:", ({
+}) => `1px solid ${getStatusBorderColor(theme, status, 'rest')}`, ";color:", ({
   theme
-}) => theme.colors.greyDarker, ";width:100%;max-width:100%;max-height:100%;box-sizing:border-box;min-height:114px;padding:14px;font-weight:400;font-size:0.875rem;line-height:1rem;&::placeholder{color:", ({
+}) => theme.colors.greyDarker, ";width:100%;max-width:100%;max-height:100%;box-sizing:border-box;min-height:114px;padding:14px;font-weight:500;font-size:0.875rem;line-height:18px;&::placeholder{color:", ({
   theme
-}) => theme.colors.greyDarker60, ";}&[readonly]{cursor:default;}&:disabled{color:", ({
+}) => theme.colors.greyDarker80, ";}&[readonly]{cursor:default;}&:disabled{color:", ({
   theme
-}) => `${theme.colors.grey}`, ";box-shadow:", ({
+}) => `${theme.colors.grey}`, ";border:", ({
   theme
-}) => `inset 0 0 1.5px 0 ${theme.colors.grey}`, ";background:", ({
+}) => `1px solid ${theme.colors.grey}`, ";background:", ({
   theme
-}) => theme.colors.greyLighter, ";resize:none;&::placeholder{color:", ({
+}) => theme.palette.secondary.light, ";resize:none;&::placeholder{color:", ({
   theme
-}) => theme.colors.grey, ";}}&:hover:not(:disabled, [readonly]){box-shadow:", ({
+}) => theme.colors.grey, ";}}&:hover:not(:disabled, [readonly]){border-color:", ({
   theme,
   status = 'basic'
-}) => getStatusBoxShadow(theme, status, 'hover'), ";}&:focus:not(:disabled, [readonly]){box-shadow:", ({
+}) => getStatusBorderColor(theme, status, 'hover'), ";}&:focus:not(:disabled, [readonly]){border-color:", ({
   theme,
   status = 'basic'
-}) => getStatusBoxShadow(theme, status, 'focus'), ";}" + ( true ? "" : 0));
+}) => getStatusBorderColor(theme, status, 'focus'), ";}" + ( true ? "" : 0));
 ;// ./src/components/Textarea/Textarea.tsx
 
 
@@ -15774,6 +15775,7 @@ const TextField = ({
   return (0,jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
     children: [(0,jsx_runtime_namespaceObject.jsx)(Label_Label, {
       htmlFor: `formElement-${name}`,
+      isDisabled: disabled,
       children: label
     }), multirow ? (0,jsx_runtime_namespaceObject.jsx)(Textarea_Textarea, {
       name: name,
@@ -15787,6 +15789,7 @@ const TextField = ({
       status: status,
       disabled: disabled,
       maxLength: maxLength,
+      showStatusIcon: false,
       onKeyUp: handleInputKeyUp,
       ...props
     }), (0,jsx_runtime_namespaceObject.jsxs)("div", {
@@ -16269,6 +16272,7 @@ function NumberField_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried t
 
 
 
+
 var NumberField_ref =  true ? {
   name: "t1bvca",
   styles: "padding:0 14px"
@@ -16293,8 +16297,8 @@ const NumberField = ({
   const {
     disabled
   } = inputProps;
-  const formattedValue = value == null ? value : (0,number_format_namespaceObject.format)(value, numberFormat);
-  const formattedDefaultValue = defaultValue == null ? defaultValue : (0,number_format_namespaceObject.format)(defaultValue, numberFormat);
+  const formattedValue = (0,utils_namespaceObject.isNill)(value) ? value : (0,number_format_namespaceObject.format)(value, numberFormat);
+  const formattedDefaultValue = (0,utils_namespaceObject.isNill)(defaultValue) ? defaultValue : (0,number_format_namespaceObject.format)(defaultValue, numberFormat);
   const [_value, setValue] = (0,hooks_namespaceObject.useUncontrolled)({
     value: formattedValue,
     defaultValue: formattedDefaultValue,
@@ -16340,17 +16344,31 @@ const NumberField = ({
 
 ;// ./src/components/Switch/SwitchBase.tsx
 
-const SwitchBase = /*#__PURE__*/base_default()("button",  true ? {
+const SwitchBase = /*#__PURE__*/base_default()('button',  true ? {
+  shouldForwardProp: prop => prop !== 'onColor' && prop !== 'hoverColor' && prop !== 'offOutlineColor',
   target: "eb0rpfw0"
 } : 0)("width:44px;height:24px;border:0;outline:0;padding:0;border-radius:50px;position:relative;background:", ({
   onColor
 }) => onColor, ";cursor:pointer;&::before{position:absolute;content:'';height:14px;width:14px;right:5px;bottom:calc(50% - 7px);background-color:", ({
   theme
-}) => theme.colors.white, ";transition:0.4s;border-radius:50%;}&[aria-checked='false']{background:", ({
+}) => theme.colors.white, ";z-index:1;transition:0.4s;border-radius:50%;}&[aria-checked='false']{background:", ({
   theme
-}) => theme.colors.greyFocused, ";}&:disabled{background:", ({
+}) => theme.colors.greyFocused, ";}&:not(:disabled)[aria-checked='true']:hover{", ({
+  hoverColor
+}) => hoverColor ? `background: ${hoverColor};` : '', ";}", ({
+  hoverColor
+}) => !hoverColor ? `
+        &:not(:disabled)[aria-checked='true']:hover::after {
+          content: '';
+          position: absolute;
+          inset: 0;
+          border-radius: 50px;
+          background: rgba(0, 0, 0, 0.15);
+          pointer-events: none;
+        }
+      ` : '', " &:disabled{background:", ({
   theme
-}) => theme.colors.greyFocused40, ";cursor:auto;}&[aria-checked='false']:focus::after,&:not(:disabled)[aria-checked='false']:hover::after{content:'';position:absolute;inset:0;border-style:solid;border-width:1px;border-color:", ({
+}) => theme.colors.greySelectedMenuItem, ";cursor:auto;}&[aria-checked='false']:focus::after,&:not(:disabled)[aria-checked='false']:hover::after{content:'';position:absolute;inset:0;border-style:solid;border-width:1px;border-color:", ({
   offOutlineColor
 }) => offOutlineColor, ";border-radius:50px;}&[aria-checked='true']::before{transform:translateX(0);}&[aria-checked='false']::before{transform:translateX(-20px);}" + ( true ? "" : 0));
 /* harmony default export */ const Switch_SwitchBase = (SwitchBase);
@@ -16444,8 +16462,10 @@ const SwitchContextProvider = ({
  * Checkbox, and Radio. Pass `color="custom"` together with the `colors`
  * object to supply arbitrary CSS color values.
  *
- * The off state always shows a neutral grey background. The disabled state
- * always uses `greyFocused40`, regardless of color variant.
+ * The off state always shows a neutral grey background (`greyFocused`).
+ * The disabled state always uses `greySelectedMenuItem`, regardless of color variant.
+ * Hovering the on state darkens it: palette variants swap to their `palette.*.dark`
+ * token; custom colors get a `rgba(0,0,0,0.15)` overlay so the knob stays unaffected.
  *
  * @category Form Controls
  * @subcategory Input
@@ -16509,12 +16529,15 @@ const Switch = ({
     toggle
   } = useSwitchContext();
   let onColor;
+  let hoverColor;
   let offOutlineColor;
   if (color === 'primary') {
     onColor = theme.palette.primary.main;
+    hoverColor = theme.palette.primary.dark;
     offOutlineColor = theme.palette.primary.light;
   } else if (color === 'success') {
     onColor = theme.palette.success.main;
+    hoverColor = theme.palette.success.dark;
     offOutlineColor = theme.palette.success.light;
   } else {
     onColor = colors?.on || theme.palette.primary.main;
@@ -16529,6 +16552,7 @@ const Switch = ({
     disabled: isDisabled,
     onClick: () => !isDisabled && toggle(),
     onColor: onColor,
+    hoverColor: hoverColor,
     offOutlineColor: offOutlineColor
   });
 };
@@ -17013,10 +17037,9 @@ const Slider = ({
 
 const RadioBase = /*#__PURE__*/base_default()(Label_Label,  true ? {
   target: "efp6u1p0"
-} : 0)("display:inline-flex;flex-grow:0;align-items:center;cursor:pointer;gap:5px;&:has(input:disabled){cursor:default;}svg{flex-shrink:0;}input:focus+svg{filter:drop-shadow(\n      ", ({
-  theme,
-  focusShadowColor
-}) => `-4px 4px 10px ${focusShadowColor || theme.colors.blue20}`, "\n    );}input{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;}span{font-size:14px;font-weight:100;}" + ( true ? "" : 0));
+} : 0)("display:inline-flex;flex-grow:0;align-items:center;cursor:pointer;gap:8px;span{font-size:14px;font-weight:500;}&:has(input:disabled){cursor:default;}&:has(input:disabled) span{color:", ({
+  theme
+}) => theme.colors.grey, ";}svg{flex-shrink:0;}input{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;}" + ( true ? "" : 0));
 ;// ./src/components/Radio/Radio.tsx
 
 
@@ -17077,7 +17100,6 @@ const RadioBase = /*#__PURE__*/base_default()(Label_Label,  true ? {
  *     default: '#ff0000',
  *     hovered: '#cc0000',
  *     disabled: '#cccccc',
- *     focusShadow: 'rgba(255,0,0,0.25)',
  *   }}
  *   onChange={handleChange}
  * />
@@ -17111,27 +17133,22 @@ const Radio = ({
   let defaultColor;
   let hoveredColor;
   let disabledColor;
-  let focusShadowColor;
   if (color === 'primary') {
     defaultColor = theme.palette.primary.main;
     hoveredColor = theme.palette.primary.dark;
     disabledColor = theme.colors.greyFocused40;
-    focusShadowColor = theme.colors.blue20;
   } else if (color === 'success') {
     defaultColor = theme.palette.success.main;
     hoveredColor = theme.palette.success.dark;
     disabledColor = theme.colors.greyFocused40;
-    focusShadowColor = theme.colors.green40;
   } else {
     defaultColor = colors?.default || theme.palette.primary.main;
     hoveredColor = colors?.hovered || theme.palette.primary.dark;
     disabledColor = colors?.disabled || theme.colors.greyFocused40;
-    focusShadowColor = colors?.focusShadow;
   }
   return (0,jsx_runtime_namespaceObject.jsxs)(RadioBase, {
     htmlFor: radioId,
     className: className,
-    focusShadowColor: focusShadowColor,
     onMouseEnter: () => setIsHovered(true),
     onMouseLeave: () => setIsHovered(false),
     children: [(0,jsx_runtime_namespaceObject.jsx)("input", {
@@ -17706,6 +17723,7 @@ function Dropdown_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to s
 
 
 
+
 const DropdownBase = /*#__PURE__*/base_default()("div",  true ? {
   target: "eizhqtp1"
 } : 0)( true ? {
@@ -17901,12 +17919,12 @@ const Dropdown = ({
   }), [onChange, activeItem, maxHeight, placement]);
   const value = activeItem ? activeItem.label || activeItem.children || activeItem.value || activeItem || placeholder : placeholder;
   const rawAvatar = activeItem && activeItem.avatar;
-  const selectedAvatar = rawAvatar != null ? typeof rawAvatar === 'string' ? (0,jsx_runtime_namespaceObject.jsx)(Avatar_Avatar, {
+  const selectedAvatar = !(0,utils_namespaceObject.isNill)(rawAvatar) ? typeof rawAvatar === 'string' ? (0,jsx_runtime_namespaceObject.jsx)(Avatar_Avatar, {
     size: AvatarSizes.small,
     image: rawAvatar,
     border: avatarBorder
   }) : /*#__PURE__*/external_react_default().isValidElement(rawAvatar) ? rawAvatar : null : null;
-  const toggleContent = selectedAvatar != null ? (0,jsx_runtime_namespaceObject.jsxs)(SelectedContent, {
+  const toggleContent = !(0,utils_namespaceObject.isNill)(selectedAvatar) ? (0,jsx_runtime_namespaceObject.jsxs)(SelectedContent, {
     children: [selectedAvatar, (0,jsx_runtime_namespaceObject.jsx)("span", {
       style: {
         minWidth: 0
@@ -18350,6 +18368,7 @@ const MultipleDropdown = /*#__PURE__*/external_react_default().forwardRef(Multip
 ;// ./src/components/Popover/hooks/usePopover.tsx
 
 
+
 /**
  * usePopover - Hook for popover functionality
  *
@@ -18401,7 +18420,7 @@ const usePopover = ({
   });
   const context = data.context;
   const click = (0,external_floating_ui_react_namespaceObject.useClick)(context, {
-    enabled: controlledOpen == null && ['click', 'both'].includes(interactionsEnabled),
+    enabled: (0,utils_namespaceObject.isNill)(controlledOpen) && ['click', 'both'].includes(interactionsEnabled),
     keyboardHandlers
   });
   const isControlled = controlledOpen !== undefined;
@@ -18415,7 +18434,7 @@ const usePopover = ({
   });
   const role = (0,external_floating_ui_react_namespaceObject.useRole)(context);
   const hover = (0,external_floating_ui_react_namespaceObject.useHover)(context, {
-    enabled: controlledOpen == null && ['hover', 'both'].includes(interactionsEnabled),
+    enabled: (0,utils_namespaceObject.isNill)(controlledOpen) && ['hover', 'both'].includes(interactionsEnabled),
     handleClose: (0,external_floating_ui_react_namespaceObject.safePolygon)()
   });
   const interactionsHooks = [dismiss, role];
@@ -18452,6 +18471,7 @@ const usePopover = ({
 };
 ;// ./src/components/Popover/hooks/usePopoverContext.tsx
 
+
 /**
  * Context for popover components
  *
@@ -18479,7 +18499,7 @@ const PopoverContext = /*#__PURE__*/external_react_namespaceObject.createContext
  */
 const usePopoverContext = () => {
   const context = external_react_namespaceObject.useContext(PopoverContext);
-  if (context == null) {
+  if ((0,utils_namespaceObject.isNill)(context)) {
     throw new Error('Popover components must be wrapped in <Popover />');
   }
   return context;
@@ -18826,6 +18846,7 @@ const external_react_hook_form_namespaceObject = require("react-hook-form");
 
 
 
+
 const findExactMatch = (input, options) => {
   const normalizedInput = input.toLowerCase();
   return Object.values(options).find(opt => {
@@ -18927,7 +18948,7 @@ const useTypeahead = ({
   }, [optionsWithKey, selectedItems, allowCustomValues]);
   const inputValue = (0,external_react_namespaceObject.useMemo)(() => {
     if (isMultiple) return rawInput ?? '';
-    if (rawInput != null) return rawInput;
+    if (!(0,utils_namespaceObject.isNill)(rawInput)) return rawInput;
     return selectedItems.length === 1 ? optionsWithKey[selectedItems[0]]?.label?.toString() ?? String(selectedItems[0] ?? '') : '';
   }, [isMultiple, rawInput, selectedItems, optionsWithKey]);
   const filteredChildren = (0,external_react_namespaceObject.useMemo)(() => {
@@ -19008,7 +19029,7 @@ const useTypeahead = ({
     shouldClose = true,
     resetInput = true
   }) => {
-    if (isDisabled || value == null) return;
+    if (isDisabled || (0,utils_namespaceObject.isNill)(value)) return;
     const alreadySelected = selectedItems.includes(value);
     const updatedSelected = isMultiple ? alreadySelected ? selectedItems.filter(item => item !== value) : [...selectedItems, value] : alreadySelected ? [] : [value];
     const fieldValue = isMultiple ? updatedSelected : updatedSelected[0];
@@ -20270,6 +20291,7 @@ const useDatePickerMask = ({
 
 
 
+
 const CONFIG = {
   [PICKER_TYPE.DAYS]: {
     format: DEFAULT_MASK_FORMAT,
@@ -20299,7 +20321,7 @@ const CONFIG = {
     unit: 'year'
   }
 };
-const getNumberAtIndex = (parts, index, fallback) => index >= 0 && parts[index] != null ? parts[index] : fallback;
+const getNumberAtIndex = (parts, index, fallback) => index >= 0 && !(0,utils_namespaceObject.isNill)(parts[index]) ? parts[index] : fallback;
 const useDatePicker = ({
   dateMin,
   dateMax,
@@ -48995,12 +49017,7 @@ function NavBarPopover_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried
 
 
 
-var NavBarPopover_ref =  true ? {
-  name: "eqp0yr",
-  styles: "height:auto;padding:0;margin:0;cursor:pointer;background-color:unset;border-radius:0"
-} : 0;
-const CollapsibleNavBarPopover = ({
-  triggerIcon,
+const SubMenuContent = ({
   title,
   content
 }) => {
@@ -49008,42 +49025,29 @@ const CollapsibleNavBarPopover = ({
   const {
     theme: navBarTheme
   } = useCollapsibleNavBarContext();
-  const [open, setOpen] = (0,external_react_namespaceObject.useState)(false);
-  const onOpenChange = open => {
-    setOpen(open);
-  };
   const {
-    width
-  } = (0,hooks_namespaceObject.useWindowSize)();
-  (0,external_react_namespaceObject.useEffect)(() => {
-    setOpen(false);
-  }, [width]);
-  return (0,jsx_runtime_namespaceObject.jsxs)(Popover, {
-    floatingOptions: {
-      onOpenChange,
-      open,
-      middleware: [(0,external_floating_ui_react_namespaceObject.offset)({
-        mainAxis: 37
-      })]
-    },
-    placement: "right-start",
-    interactionsEnabled: "both",
-    children: [(0,jsx_runtime_namespaceObject.jsx)(PopoverTrigger, {
-      variant: "tertiary",
-      dataTestId: "collapsible-nav-bar-trigger-button",
-      css: NavBarPopover_ref,
-      startIcon: triggerIcon
-    }), (0,jsx_runtime_namespaceObject.jsxs)(PopoverContent, {
+    placement
+  } = usePopoverContext();
+  // When flip switches alignment to "-end" there's no room below the trigger,
+  // so the list renders above the heading instead of the heading drifting with it.
+  const isFlippedUp = placement.endsWith('-end');
+  return (0,jsx_runtime_namespaceObject.jsx)(PopoverContent, {
+    css: /*#__PURE__*/(0,react_namespaceObject.css)({
+      [theme.mediaQueries.xs]: {
+        display: 'none'
+      },
+      [theme.mediaQueries.md]: {
+        display: 'block'
+      },
+      zIndex: 20
+    },  true ? "" : 0,  true ? "" : 0),
+    isFocusManagerDisabled: true,
+    children: (0,jsx_runtime_namespaceObject.jsxs)("div", {
       css: /*#__PURE__*/(0,react_namespaceObject.css)({
-        [theme.mediaQueries.xs]: {
-          display: 'none'
-        },
-        [theme.mediaQueries.md]: {
-          display: 'block'
-        },
-        zIndex: 20
+        display: 'flex',
+        flexDirection: isFlippedUp ? 'column-reverse' : 'column',
+        gap: 1
       },  true ? "" : 0,  true ? "" : 0),
-      isFocusManagerDisabled: true,
       children: [(0,jsx_runtime_namespaceObject.jsx)(PopoverHeading, {
         css: /*#__PURE__*/(0,react_namespaceObject.css)({
           color: navBarTheme === 'default' ? theme.colors.white : theme.colors.greyGraphite,
@@ -49052,7 +49056,6 @@ const CollapsibleNavBarPopover = ({
           background: navBarTheme === 'default' ? theme.colors.greyGraphite : '#F4F5F9',
           borderRadius: 5,
           cursor: 'default',
-          marginBottom: 1,
           width: 'auto',
           whiteSpace: 'nowrap',
           '&::before': {
@@ -49063,7 +49066,11 @@ const CollapsibleNavBarPopover = ({
             position: 'absolute',
             width: 9,
             height: 9,
-            top: 7,
+            ...(isFlippedUp ? {
+              bottom: 7
+            } : {
+              top: 7
+            }),
             left: -4,
             transform: 'rotate(45deg)',
             zIndex: -1
@@ -49097,6 +49104,49 @@ const CollapsibleNavBarPopover = ({
         },  true ? "" : 0,  true ? "" : 0),
         children: content
       })]
+    })
+  });
+};
+var NavBarPopover_ref =  true ? {
+  name: "eqp0yr",
+  styles: "height:auto;padding:0;margin:0;cursor:pointer;background-color:unset;border-radius:0"
+} : 0;
+const CollapsibleNavBarPopover = ({
+  triggerIcon,
+  title,
+  content
+}) => {
+  const [open, setOpen] = (0,external_react_namespaceObject.useState)(false);
+  const onOpenChange = open => {
+    setOpen(open);
+  };
+  const {
+    width
+  } = (0,hooks_namespaceObject.useWindowSize)();
+  (0,external_react_namespaceObject.useEffect)(() => {
+    setOpen(false);
+  }, [width]);
+  return (0,jsx_runtime_namespaceObject.jsxs)(Popover, {
+    floatingOptions: {
+      onOpenChange,
+      open,
+      middleware: [(0,external_floating_ui_react_namespaceObject.offset)({
+        mainAxis: 37
+      }), (0,external_floating_ui_react_namespaceObject.flip)({
+        crossAxis: true,
+        padding: 5
+      })]
+    },
+    placement: "right-start",
+    interactionsEnabled: "both",
+    children: [(0,jsx_runtime_namespaceObject.jsx)(PopoverTrigger, {
+      variant: "tertiary",
+      dataTestId: "collapsible-nav-bar-trigger-button",
+      css: NavBarPopover_ref,
+      startIcon: triggerIcon
+    }), (0,jsx_runtime_namespaceObject.jsx)(SubMenuContent, {
+      title: title,
+      content: content
     })]
   });
 };
@@ -49981,22 +50031,86 @@ const History = ({
 function Pagination_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 
 
-const baseBtnStyles = theme => /*#__PURE__*/(0,react_namespaceObject.css)("height:30px;border-radius:6px;", theme.mediaQueries.md, "{height:25px;}&:disabled{cursor:default;}" + ( true ? "" : 0),  true ? "" : 0);
-const pageBtnStyles = theme => /*#__PURE__*/(0,react_namespaceObject.css)(baseBtnStyles(theme), " background:unset;box-shadow:unset;color:", theme.colors.greyDarker, ";padding:0 11px;", theme.mediaQueries.md, "{padding:0 9px;}&:disabled{background:unset;box-shadow:unset;}&:not(:disabled):hover,&:not(:disabled):active,&:not(:disabled):focus{background:", theme.colors.greyLighter, ";box-shadow:unset;}" + ( true ? "" : 0),  true ? "" : 0);
-const selectedBtnBg = theme => /*#__PURE__*/(0,react_namespaceObject.css)("background:", theme.palette.primary.main, ";&:disabled{background:", theme.palette.primary.main, ";}" + ( true ? "" : 0),  true ? "" : 0);
-const selectedPageBtnStyles = theme => /*#__PURE__*/(0,react_namespaceObject.css)(baseBtnStyles(theme), " ", selectedBtnBg(theme), " color:", theme.colors.white, ";margin:0 3px;padding:0 13px;", theme.mediaQueries.md, "{padding:0 10px;}&:hover,&:active,&:focus{", selectedBtnBg(theme), ";}&:not(:disabled):hover{box-shadow:0 5px 5px -1px rgba(0, 0, 0, 0.3);cursor:default;}" + ( true ? "" : 0),  true ? "" : 0);
-const arrowBtnStyles = theme => /*#__PURE__*/(0,react_namespaceObject.css)(baseBtnStyles(theme), " padding:0 8px;background:", theme.colors.white, ";&:disabled{background:unset;}&:not(:disabled):hover{box-shadow:0 5px 5px -2px rgba(0, 0, 0, 0.2);cursor:pointer;}" + ( true ? "" : 0),  true ? "" : 0);
+/** Square 26x26 cell shared by page/selected/arrow buttons (design "Number" atom). */
+const baseBtnStyles = {
+  width: 26,
+  height: 26,
+  padding: 0,
+  borderRadius: 6,
+  justifyContent: 'center',
+  fontSize: 14,
+  fontWeight: 500,
+  letterSpacing: 0,
+  lineHeight: '18px'
+};
+
+/** Shared by every `&:disabled` block below so it survives merging into one object. */
+const disabledCursor = {
+  cursor: 'default'
+};
+const pageBtnStyles = theme => /*#__PURE__*/(0,react_namespaceObject.css)({
+  ...baseBtnStyles,
+  background: 'transparent',
+  boxShadow: 'unset',
+  color: theme.colors.greyDarker,
+  '&:disabled': {
+    ...disabledCursor,
+    background: theme.palette.secondary.main,
+    color: theme.colors.grey,
+    boxShadow: 'unset'
+  },
+  '&:not(:disabled):hover, &:not(:disabled):active, &:not(:disabled):focus': {
+    background: theme.palette.secondary.light,
+    boxShadow: 'unset'
+  }
+},  true ? "" : 0,  true ? "" : 0);
+const selectedPageBtnStyles = theme => /*#__PURE__*/(0,react_namespaceObject.css)({
+  ...baseBtnStyles,
+  background: theme.palette.primary.main,
+  color: theme.colors.white,
+  '&:disabled': {
+    ...disabledCursor,
+    background: theme.palette.primary.main
+  },
+  '&:hover, &:active, &:focus': {
+    background: theme.palette.primary.dark
+  },
+  '&:not(:disabled):hover': {
+    cursor: 'default'
+  }
+},  true ? "" : 0,  true ? "" : 0);
+const arrowBtnStyles = /*#__PURE__*/(0,react_namespaceObject.css)({
+  ...baseBtnStyles,
+  background: 'transparent',
+  '&:disabled': {
+    ...disabledCursor,
+    background: 'transparent'
+  },
+  '&:not(:disabled):hover': {
+    cursor: 'pointer'
+  }
+},  true ? "" : 0,  true ? "" : 0);
+
+/** Ellipsis ("...") cell rendered between page-number breaks; sized to match a Number cell. */
+const breakStyles = theme => /*#__PURE__*/(0,react_namespaceObject.css)({
+  ...baseBtnStyles,
+  display: 'inline-flex',
+  alignItems: 'center',
+  background: 'transparent',
+  color: theme.colors.greyDarker,
+  cursor: 'default'
+},  true ? "" : 0,  true ? "" : 0);
 const PaginationNav = /*#__PURE__*/base_default()("nav",  true ? {
   target: "e93vg8b1"
 } : 0)( true ? {
-  name: "zjik7",
-  styles: "display:flex"
+  name: "1l7f8hp",
+  styles: "display:flex;align-items:center;gap:38px"
 } : 0);
 const PageNumberInput = /*#__PURE__*/base_default()(Input_Input,  true ? {
   target: "e93vg8b0"
 } : 0)( true ? {
-  name: "1ubbv3z",
-  styles: "width:65px;-moz-appearance:textfield;appearance:textfield;&::-webkit-outer-spin-button,&::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}&:focus,&:hover{border-width:1px!important;}&+div{right:24px;}"
+  name: "96v664",
+  styles: "width:80px;-moz-appearance:textfield;appearance:textfield;&::-webkit-outer-spin-button,&::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}&:focus,&:hover{border-width:1px!important;}&+div{right:24px;}"
 } : 0);
 ;// ./src/components/Pagination/ArrowButton.tsx
 
@@ -50047,15 +50161,15 @@ const ArrowButton = ({
   return (0,jsx_runtime_namespaceObject.jsx)(Button_Button, {
     startIcon: (0,jsx_runtime_namespaceObject.jsx)(Icon_Icon, {
       name: `carrot-${direction}`,
-      size: 12,
-      color: theme.colors.greyDisabled
+      size: 18,
+      color: theme.colors.greyDarker80
     }),
     variant: "tertiary",
     onClick: onClick,
     isDisabled: isDisabled,
     size: "small",
     className: className,
-    css: arrowBtnStyles(theme),
+    css: arrowBtnStyles,
     "aria-label": `Go to ${direction === 'left' ? 'previous' : 'next'} page`
   });
 };
@@ -50066,10 +50180,6 @@ function PaginationButtons_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have t
 
 
 
-var PaginationButtons_ref =  true ? {
-  name: "1ll9bqd",
-  styles: "cursor:default"
-} : 0;
 /**
  * Break - Ellipsis separator for page number ranges
  *
@@ -50079,7 +50189,7 @@ var PaginationButtons_ref =  true ? {
  * @internal
  */
 const Break = () => (0,jsx_runtime_namespaceObject.jsx)("span", {
-  css: PaginationButtons_ref,
+  css: breakStyles,
   children: "..."
 });
 
@@ -50151,19 +50261,26 @@ const PageButton = ({
  * - Screen reader friendly
  * - Proper focus management
  */
+var PaginationButtons_ref =  true ? {
+  name: "1lcc3va",
+  styles: "display:flex;align-items:center;gap:0"
+} : 0;
 const PaginationButtons = ({
   range,
   selectedPage,
   onClick,
   isDisabled
 }) => {
-  return Array.isArray(range) && range.map((page, index) => {
-    return page === -1 ? (0,jsx_runtime_namespaceObject.jsx)(Break, {}, index) : (0,jsx_runtime_namespaceObject.jsx)(PageButton, {
-      page: page,
-      isSelected: page === selectedPage,
-      onClick: () => onClick(page),
-      isDisabled: isDisabled
-    }, index);
+  return (0,jsx_runtime_namespaceObject.jsx)("div", {
+    css: PaginationButtons_ref,
+    children: Array.isArray(range) && range.map((page, index) => {
+      return page === -1 ? (0,jsx_runtime_namespaceObject.jsx)(Break, {}, index) : (0,jsx_runtime_namespaceObject.jsx)(PageButton, {
+        page: page,
+        isSelected: page === selectedPage,
+        onClick: () => onClick(page),
+        isDisabled: isDisabled
+      }, index);
+    })
   });
 };
 ;// ./src/components/Pagination/constants.ts
@@ -50236,7 +50353,6 @@ const PaginationContextProvider = ({
   });
 };
 ;// ./src/components/Pagination/components/RowsPerPageDropdown/RowsPerPageDropdown.tsx
-function RowsPerPageDropdown_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 
 
 
@@ -50287,14 +50403,6 @@ function RowsPerPageDropdown_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have
  * - Screen reader friendly
  */
 
-var RowsPerPageDropdown_ref =  true ? {
-  name: "cx840d",
-  styles: "width:auto;ul{width:auto;}"
-} : 0;
-var RowsPerPageDropdown_ref2 =  true ? {
-  name: "1nkb47o",
-  styles: "font-size:14px;line-height:1;text-wrap:nowrap"
-} : 0;
 const RowsPerPageDropdown = ({
   selectedItem = DEFAULT_PER_PAGE_VALUE,
   rowsPerPageList = ROWS_PER_PAGE_LIST,
@@ -50315,10 +50423,28 @@ const RowsPerPageDropdown = ({
     setPerPage(value);
   };
   return (0,jsx_runtime_namespaceObject.jsxs)(Wrapper_Wrapper, {
-    css: RowsPerPageDropdown_ref,
+    css: /*#__PURE__*/(0,react_namespaceObject.css)({
+      width: 'auto',
+      gap: 8,
+      ul: {
+        width: 'auto'
+      },
+      li: {
+        height: 40,
+        padding: '8px 12px'
+      },
+      'li[aria-selected="true"]': {
+        background: theme.colors.blue12
+      }
+    },  true ? "" : 0,  true ? "" : 0),
     children: [(0,jsx_runtime_namespaceObject.jsxs)(Typography_Typography, {
       variant: "subtitle",
-      css: RowsPerPageDropdown_ref2,
+      css: /*#__PURE__*/(0,react_namespaceObject.css)({
+        fontSize: 14,
+        lineHeight: 1,
+        textWrap: 'nowrap',
+        color: theme.colors.greyDarker
+      },  true ? "" : 0,  true ? "" : 0),
       children: [rowsPerPageText, ":"]
     }), (0,jsx_runtime_namespaceObject.jsx)(Dropdown_Dropdown, {
       selectedItem: selectedItemForDropdown,
@@ -50326,13 +50452,11 @@ const RowsPerPageDropdown = ({
       dropdownProps: {
         toggleButton: {
           css: {
-            marginLeft: 5,
-            marginRight: 15,
             border: 'none',
             background: 'transparent',
             borderRadius: 6,
             color: theme.colors.greyDarker,
-            gap: 5,
+            gap: 4,
             padding: 3,
             '&:focus': {
               color: theme.colors.greyDarker,
@@ -50369,6 +50493,7 @@ function Pagination_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to
 
 
 
+
 /**
  * Pagination - Navigation controls for paginated data
  *
@@ -50452,16 +50577,12 @@ function Pagination_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to
  */
 
 var Pagination_ref =  true ? {
-  name: "13slo1u",
-  styles: "width:auto;margin-right:5px"
+  name: "5rxe0u",
+  styles: "width:auto;gap:16px"
 } : 0;
 var Pagination_ref2 =  true ? {
-  name: "1j97xhc",
-  styles: "margin-right:12px"
-} : 0;
-var Pagination_ref3 =  true ? {
-  name: "lrb7um",
-  styles: "margin-left:7px"
+  name: "5rxe0u",
+  styles: "width:auto;gap:16px"
 } : 0;
 const Pagination = ({
   pagesCount,
@@ -50475,7 +50596,8 @@ const Pagination = ({
   isPageFromCountVisible = true,
   isRowPerPageVisible = false,
   rowPerPageProps,
-  manualPageNumberProps
+  manualPageNumberProps,
+  renderPageCount
 }) => {
   const theme = (0,react_namespaceObject.useTheme)();
   const {
@@ -50520,16 +50642,16 @@ const Pagination = ({
           autoComplete: 'off'
         },
         ...manualPageNumberProps
-      }), isPageFromCountVisible && (0,jsx_runtime_namespaceObject.jsxs)("span", {
+      }), isPageFromCountVisible && (renderPageCount ? renderPageCount(page || 0, pagesCount) : (0,jsx_runtime_namespaceObject.jsxs)("span", {
         css: /*#__PURE__*/(0,react_namespaceObject.css)({
           textWrap: 'nowrap',
           fontSize: 14,
-          marginLeft: 16,
           color: theme.colors.greyDarker
         },  true ? "" : 0,  true ? "" : 0),
         children: [page || 0, " / ", pagesCount]
-      })]
+      }))]
     }), (0,jsx_runtime_namespaceObject.jsxs)(Wrapper_Wrapper, {
+      css: Pagination_ref2,
       children: [(0,jsx_runtime_namespaceObject.jsx)(ArrowButton, {
         direction: "left",
         onClick: () => {
@@ -50537,8 +50659,7 @@ const Pagination = ({
             setPage(page - 1);
           }
         },
-        isDisabled: isDisabled || pagesCount == null || pagesCount <= 1 || page == null || page === 1,
-        css: Pagination_ref2
+        isDisabled: isDisabled || (0,utils_namespaceObject.isNill)(pagesCount) || pagesCount <= 1 || (0,utils_namespaceObject.isNill)(page) || page === 1
       }), (0,jsx_runtime_namespaceObject.jsx)(PaginationButtons, {
         range: range,
         selectedPage: page,
@@ -50551,8 +50672,7 @@ const Pagination = ({
             setPage(page + 1);
           }
         },
-        isDisabled: isDisabled || pagesCount == null || pagesCount <= 1 || page == null || page === pagesCount,
-        css: Pagination_ref3
+        isDisabled: isDisabled || (0,utils_namespaceObject.isNill)(pagesCount) || pagesCount <= 1 || (0,utils_namespaceObject.isNill)(page) || page === pagesCount
       })]
     })]
   });
@@ -53161,6 +53281,7 @@ const Notification_styles_actionBtnStyles = textColor => /*#__PURE__*/(0,react_n
 
 
 
+
 const NotificationItem = ({
   id,
   variant,
@@ -53231,7 +53352,7 @@ const NotificationItem = ({
     name: icon,
     color: resolvedIconColor,
     size: iconSize
-  }) : icon != null ? icon : (0,jsx_runtime_namespaceObject.jsx)(Icon_Icon, {
+  }) : !(0,utils_namespaceObject.isNill)(icon) ? icon : (0,jsx_runtime_namespaceObject.jsx)(Icon_Icon, {
     name: "user",
     color: resolvedIconColor,
     size: iconSize