@startdownnotez404/ui 1.0.0 → 1.3.5

package/dist/tab.js

@@ -0,0 +1,1418 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/elemental/Tab/index.ts
+var Tab_exports = {};
+__export(Tab_exports, {
+  Tab: () => import_Tab.default,
+  TabPanel: () => TabPanel,
+  Tabs: () => import_Tabs.default,
+  tabPanelRootSx: () => tabPanelRootSx,
+  tabPanelStyleToCssVars: () => tabPanelStyleToCssVars,
+  tabTheme: () => tabTheme,
+  tabsTheme: () => tabsTheme
+});
+module.exports = __toCommonJS(Tab_exports);
+
+// src/components/elemental/Tab/src/Tab/index.ts
+var import_Tab = __toESM(require("@mui/material/Tab"));
+var import_Tabs = __toESM(require("@mui/material/Tabs"));
+
+// src/components/elemental/Tab/src/Tab/themes.ts
+var tabTheme = {
+  defaultProps: {
+    disableRipple: true
+  },
+  styleOverrides: {
+    root: ({ theme }) => ({
+      minHeight: 44,
+      minWidth: 0,
+      paddingInline: theme.spacing(1.5),
+      paddingBlock: theme.spacing(1),
+      borderRadius: theme.shape.borderRadius,
+      textTransform: "none",
+      fontWeight: theme.typography.fontWeightMedium,
+      color: "var(--mui-palette-text-secondary)",
+      transition: theme.transitions.create(["color", "background-color"], {
+        duration: theme.transitions.duration.shorter
+      }),
+      "&:hover": {
+        color: "var(--mui-palette-primary-emphasis)",
+        backgroundColor: "color-mix(in lab, var(--mui-palette-primary-emphasis), transparent 92%)"
+      },
+      "&.Mui-selected": {
+        color: "var(--mui-palette-primary-emphasis)",
+        backgroundColor: "transparent"
+      },
+      "&.Mui-selected:hover": {
+        backgroundColor: "color-mix(in lab, var(--mui-palette-primary-emphasis), transparent 94%)"
+      },
+      "&.Mui-disabled": {
+        color: "var(--mui-palette-text-disabled)"
+      }
+    })
+  }
+};
+var tabsTheme = {
+  styleOverrides: {
+    root: {
+      minHeight: 44
+    },
+    list: {
+      gap: 4
+    },
+    indicator: {
+      height: 3,
+      borderRadius: 999,
+      backgroundColor: "var(--mui-palette-primary-emphasis)"
+    },
+    scrollButtons: {
+      color: "var(--mui-palette-text-secondary)",
+      "&.Mui-disabled": {
+        opacity: 0.4
+      }
+    }
+  }
+};
+
+// src/components/elemental/Tab/src/TabPanel/TabPanel.tsx
+var import_react4 = require("react");
+
+// src/_utils/_func/sx.ts
+function flattenSx(part) {
+  if (part == null || typeof part === "boolean") {
+    return [];
+  }
+  if (Array.isArray(part)) {
+    return part.flatMap(flattenSx);
+  }
+  if (typeof part === "function" || typeof part === "object") {
+    return [part];
+  }
+  return [];
+}
+function mergeSx(...parts) {
+  const list = parts.flatMap(flattenSx);
+  if (list.length === 0) {
+    return void 0;
+  }
+  if (list.length === 1) {
+    return list[0];
+  }
+  return list;
+}
+
+// src/components/elemental/Box/src/index.ts
+var import_Box = __toESM(require("@mui/material/Box"));
+var import_Stack = __toESM(require("@mui/material/Stack"));
+var import_Grid = __toESM(require("@mui/material/Grid"));
+
+// src/components/elemental/Typography/src/Typography.ts
+var import_Typography = __toESM(require("@mui/material/Typography"));
+
+// src/components/Icons/MuiIcon/index.ts
+var import_ArrowRightAlt = __toESM(require("@mui/icons-material/ArrowRightAlt"));
+var import_DescriptionOutlined = __toESM(require("@mui/icons-material/DescriptionOutlined"));
+var import_Description = __toESM(require("@mui/icons-material/Description"));
+var import_PictureAsPdf = __toESM(require("@mui/icons-material/PictureAsPdf"));
+var import_AudioFile = __toESM(require("@mui/icons-material/AudioFile"));
+var import_VideoFile = __toESM(require("@mui/icons-material/VideoFile"));
+var import_TableChart = __toESM(require("@mui/icons-material/TableChart"));
+var import_FolderZip = __toESM(require("@mui/icons-material/FolderZip"));
+var import_InsertDriveFile = __toESM(require("@mui/icons-material/InsertDriveFile"));
+var import_ImageOutlined = __toESM(require("@mui/icons-material/ImageOutlined"));
+var import_LayersOutlined = __toESM(require("@mui/icons-material/LayersOutlined"));
+var import_TextFormat = __toESM(require("@mui/icons-material/TextFormat"));
+var import_Remove = __toESM(require("@mui/icons-material/Remove"));
+var import_PostAdd = __toESM(require("@mui/icons-material/PostAdd"));
+var import_ErrorOutline = __toESM(require("@mui/icons-material/ErrorOutline"));
+var import_QuestionMarkOutlined = __toESM(require("@mui/icons-material/QuestionMarkOutlined"));
+var import_MeetingRoomOutlined = __toESM(require("@mui/icons-material/MeetingRoomOutlined"));
+var import_PlaylistRemove = __toESM(require("@mui/icons-material/PlaylistRemove"));
+var import_ChecklistRtl = __toESM(require("@mui/icons-material/ChecklistRtl"));
+var import_HideImageOutlined = __toESM(require("@mui/icons-material/HideImageOutlined"));
+var import_RemoveRedEyeTwoTone = __toESM(require("@mui/icons-material/RemoveRedEyeTwoTone"));
+var import_PhotoSizeSelectLarge = __toESM(require("@mui/icons-material/PhotoSizeSelectLarge"));
+var import_LockPersonOutlined = __toESM(require("@mui/icons-material/LockPersonOutlined"));
+var import_Person = __toESM(require("@mui/icons-material/Person"));
+var import_InsertEmoticon = __toESM(require("@mui/icons-material/InsertEmoticon"));
+var import_RemoveDoneOutlined = __toESM(require("@mui/icons-material/RemoveDoneOutlined"));
+var import_Tag = __toESM(require("@mui/icons-material/Tag"));
+var import_Audiotrack = __toESM(require("@mui/icons-material/Audiotrack"));
+var import_Videocam = __toESM(require("@mui/icons-material/Videocam"));
+var import_Code = __toESM(require("@mui/icons-material/Code"));
+var import_Equalizer = __toESM(require("@mui/icons-material/Equalizer"));
+var import_PivotTableChart = __toESM(require("@mui/icons-material/PivotTableChart"));
+var import_Search = __toESM(require("@mui/icons-material/Search"));
+var import_DataObject = __toESM(require("@mui/icons-material/DataObject"));
+var import_SortByAlpha = __toESM(require("@mui/icons-material/SortByAlpha"));
+var import_ThumbUp = __toESM(require("@mui/icons-material/ThumbUp"));
+var import_AttachMoneyOutlined = __toESM(require("@mui/icons-material/AttachMoneyOutlined"));
+var import_Storage = __toESM(require("@mui/icons-material/Storage"));
+var import_WorkspacePremium = __toESM(require("@mui/icons-material/WorkspacePremium"));
+var import_Numbers = __toESM(require("@mui/icons-material/Numbers"));
+var import_Functions = __toESM(require("@mui/icons-material/Functions"));
+var import_Lightbulb = __toESM(require("@mui/icons-material/Lightbulb"));
+var import_CropRotate = __toESM(require("@mui/icons-material/CropRotate"));
+var import_PhotoSizeSelectLarge2 = __toESM(require("@mui/icons-material/PhotoSizeSelectLarge"));
+var import_CollectionsBookmark = __toESM(require("@mui/icons-material/CollectionsBookmark"));
+var import_Schedule = __toESM(require("@mui/icons-material/Schedule"));
+var import_Style = __toESM(require("@mui/icons-material/Style"));
+var import_Crop169 = __toESM(require("@mui/icons-material/Crop169"));
+var import_CropSquare = __toESM(require("@mui/icons-material/CropSquare"));
+var import_GraphicEqRounded = __toESM(require("@mui/icons-material/GraphicEqRounded"));
+var import_MemoryRounded = __toESM(require("@mui/icons-material/MemoryRounded"));
+var import_AddCircleOutlineRounded = __toESM(require("@mui/icons-material/AddCircleOutlineRounded"));
+var import_Add = __toESM(require("@mui/icons-material/Add"));
+var import_Close = __toESM(require("@mui/icons-material/Close"));
+var import_ExpandMore = __toESM(require("@mui/icons-material/ExpandMore"));
+var import_Autorenew = __toESM(require("@mui/icons-material/Autorenew"));
+var import_CheckCircle = __toESM(require("@mui/icons-material/CheckCircle"));
+var import_Menu = __toESM(require("@mui/icons-material/Menu"));
+var import_MoreVert = __toESM(require("@mui/icons-material/MoreVert"));
+var import_MoreHoriz = __toESM(require("@mui/icons-material/MoreHoriz"));
+var import_ContentCopy = __toESM(require("@mui/icons-material/ContentCopy"));
+var import_ContentPaste = __toESM(require("@mui/icons-material/ContentPaste"));
+var import_Cloud = __toESM(require("@mui/icons-material/Cloud"));
+var import_DownloadOutlined = __toESM(require("@mui/icons-material/DownloadOutlined"));
+var import_DownloadDoneOutlined = __toESM(require("@mui/icons-material/DownloadDoneOutlined"));
+var import_StarBorderOutlined = __toESM(require("@mui/icons-material/StarBorderOutlined"));
+var import_DeleteForever = __toESM(require("@mui/icons-material/DeleteForever"));
+var import_LayersClear = __toESM(require("@mui/icons-material/LayersClear"));
+var import_Check = __toESM(require("@mui/icons-material/Check"));
+var import_DoneAll = __toESM(require("@mui/icons-material/DoneAll"));
+var import_PowerSettingsNew = __toESM(require("@mui/icons-material/PowerSettingsNew"));
+var import_Send = __toESM(require("@mui/icons-material/Send"));
+var import_ZoomInMap = __toESM(require("@mui/icons-material/ZoomInMap"));
+var import_ZoomOutMap = __toESM(require("@mui/icons-material/ZoomOutMap"));
+var import_HomeRepairService = __toESM(require("@mui/icons-material/HomeRepairService"));
+var import_Construction = __toESM(require("@mui/icons-material/Construction"));
+var import_Help = __toESM(require("@mui/icons-material/Help"));
+var import_EmojiFlags = __toESM(require("@mui/icons-material/EmojiFlags"));
+var import_Edit = __toESM(require("@mui/icons-material/Edit"));
+var import_ForkRight = __toESM(require("@mui/icons-material/ForkRight"));
+var import_Settings = __toESM(require("@mui/icons-material/Settings"));
+var import_Restore = __toESM(require("@mui/icons-material/Restore"));
+var import_EditNote = __toESM(require("@mui/icons-material/EditNote"));
+var import_HomeOutlined = __toESM(require("@mui/icons-material/HomeOutlined"));
+var import_ExitToAppOutlined = __toESM(require("@mui/icons-material/ExitToAppOutlined"));
+var import_WbSunnyOutlined = __toESM(require("@mui/icons-material/WbSunnyOutlined"));
+var import_DarkModeOutlined = __toESM(require("@mui/icons-material/DarkModeOutlined"));
+var import_AttachFileOutlined = __toESM(require("@mui/icons-material/AttachFileOutlined"));
+var import_NoteAdd = __toESM(require("@mui/icons-material/NoteAdd"));
+var import_CloudUpload = __toESM(require("@mui/icons-material/CloudUpload"));
+var import_KeyboardDoubleArrowRight = __toESM(require("@mui/icons-material/KeyboardDoubleArrowRight"));
+var import_KeyboardDoubleArrowLeft = __toESM(require("@mui/icons-material/KeyboardDoubleArrowLeft"));
+var import_KeyboardDoubleArrowRightRounded = __toESM(require("@mui/icons-material/KeyboardDoubleArrowRightRounded"));
+var import_FitScreen = __toESM(require("@mui/icons-material/FitScreen"));
+var import_Fullscreen = __toESM(require("@mui/icons-material/Fullscreen"));
+var import_Biotech = __toESM(require("@mui/icons-material/Biotech"));
+var import_Share = __toESM(require("@mui/icons-material/Share"));
+var import_FilterAlt = __toESM(require("@mui/icons-material/FilterAlt"));
+var import_Sync = __toESM(require("@mui/icons-material/Sync"));
+var import_PlayArrow = __toESM(require("@mui/icons-material/PlayArrow"));
+var import_PauseOutlined = __toESM(require("@mui/icons-material/PauseOutlined"));
+var import_Casino = __toESM(require("@mui/icons-material/Casino"));
+var import_Paid = __toESM(require("@mui/icons-material/Paid"));
+var import_Save = __toESM(require("@mui/icons-material/Save"));
+var import_StopRounded = __toESM(require("@mui/icons-material/StopRounded"));
+var import_Replay = __toESM(require("@mui/icons-material/Replay"));
+var import_AccountTree = __toESM(require("@mui/icons-material/AccountTree"));
+var import_Close2 = __toESM(require("@mui/icons-material/Close"));
+var import_KeyboardArrowDown = __toESM(require("@mui/icons-material/KeyboardArrowDown"));
+var import_KeyboardArrowRight = __toESM(require("@mui/icons-material/KeyboardArrowRight"));
+var import_SearchRounded = __toESM(require("@mui/icons-material/SearchRounded"));
+var import_CloseRounded = __toESM(require("@mui/icons-material/CloseRounded"));
+var import_SortByAlphaRounded = __toESM(require("@mui/icons-material/SortByAlphaRounded"));
+var import_FilterAltOutlined = __toESM(require("@mui/icons-material/FilterAltOutlined"));
+var import_InboxOutlined = __toESM(require("@mui/icons-material/InboxOutlined"));
+var import_SearchOff = __toESM(require("@mui/icons-material/SearchOff"));
+var import_ClearRounded = __toESM(require("@mui/icons-material/ClearRounded"));
+var import_ArrowDropDownRounded = __toESM(require("@mui/icons-material/ArrowDropDownRounded"));
+var import_AccountBox = __toESM(require("@mui/icons-material/AccountBox"));
+var import_Logout = __toESM(require("@mui/icons-material/Logout"));
+var import_Login = __toESM(require("@mui/icons-material/Login"));
+var import_Dashboard = __toESM(require("@mui/icons-material/Dashboard"));
+var import_AccountTreeOutlined = __toESM(require("@mui/icons-material/AccountTreeOutlined"));
+var import_HelpOutline = __toESM(require("@mui/icons-material/HelpOutline"));
+var import_NavigateBefore = __toESM(require("@mui/icons-material/NavigateBefore"));
+var import_NavigateNext = __toESM(require("@mui/icons-material/NavigateNext"));
+var import_Person2 = __toESM(require("@mui/icons-material/Person"));
+var import_CalendarToday = __toESM(require("@mui/icons-material/CalendarToday"));
+var import_QuestionAnswerOutlined = __toESM(require("@mui/icons-material/QuestionAnswerOutlined"));
+var import_Today = __toESM(require("@mui/icons-material/Today"));
+var import_DeleteForever2 = __toESM(require("@mui/icons-material/DeleteForever"));
+var import_AdsClick = __toESM(require("@mui/icons-material/AdsClick"));
+var import_Fingerprint = __toESM(require("@mui/icons-material/Fingerprint"));
+var import_SportsEsportsOutlined = __toESM(require("@mui/icons-material/SportsEsportsOutlined"));
+var import_HelpOutlineRounded = __toESM(require("@mui/icons-material/HelpOutlineRounded"));
+var import_AccountTreeOutlined2 = __toESM(require("@mui/icons-material/AccountTreeOutlined"));
+var import_SmartToyOutlined = __toESM(require("@mui/icons-material/SmartToyOutlined"));
+var import_AcUnit = __toESM(require("@mui/icons-material/AcUnit"));
+var import_Loop = __toESM(require("@mui/icons-material/Loop"));
+var import_Pending = __toESM(require("@mui/icons-material/Pending"));
+var import_AllInclusive = __toESM(require("@mui/icons-material/AllInclusive"));
+var import_WarningOutlined = __toESM(require("@mui/icons-material/WarningOutlined"));
+var import_InfoOutlined = __toESM(require("@mui/icons-material/InfoOutlined"));
+var import_AutoAwesomeRounded = __toESM(require("@mui/icons-material/AutoAwesomeRounded"));
+var import_ErrorOutlineOutlined = __toESM(require("@mui/icons-material/ErrorOutlineOutlined"));
+var import_Download = __toESM(require("@mui/icons-material/Download"));
+
+// src/components/elemental/Menu/src/Menu/Menu.tsx
+var import_react = require("react");
+var import_MenuList = __toESM(require("@mui/material/MenuList"));
+var import_ListItemText = __toESM(require("@mui/material/ListItemText"));
+var import_styles2 = require("@mui/material/styles");
+
+// src/components/elemental/Menu/src/MenuItem.tsx
+var import_MenuItem = __toESM(require("@mui/material/MenuItem"));
+var import_ListItemIcon = __toESM(require("@mui/material/ListItemIcon"));
+var import_styles = require("@mui/material/styles");
+var StyledMenuItem = (0, import_styles.styled)(import_MenuItem.default, {
+  shouldForwardProp: (prop) => prop !== "customPadding" && prop !== "customFontSize"
+})(({ customPadding, customFontSize }) => ({
+  width: "-webkit-fill-available",
+  borderRadius: "8px",
+  minHeight: "fit-content",
+  padding: customPadding || "6px 16px",
+  margin: "0",
+  overflow: "hidden",
+  gap: "4px",
+  "& .MuiListItemText-primary": {
+    fontSize: customFontSize || "1rem",
+    overflow: "hidden",
+    textOverflow: "ellipsis"
+  }
+}));
+var StyledItemIcon = (0, import_styles.styled)(import_ListItemIcon.default, {
+  shouldForwardProp: (prop) => prop !== "isIconOnly"
+})({
+  "&.MuiListItemIcon-root": {
+    minWidth: "var(--minW)"
+  },
+  variants: [
+    {
+      props: { isIconOnly: true },
+      style: {
+        "--minW": "0"
+      }
+    },
+    {
+      props: { isIconOnly: false },
+      style: {
+        "--minW": "auto"
+      }
+    },
+    {
+      props: { isIconOnly: void 0 },
+      // default
+      style: {
+        "--minW": "auto"
+      }
+    }
+  ]
+});
+
+// src/components/elemental/Menu/src/Menu/Menu.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var CustomMenuList = (0, import_react.forwardRef)(({
+  options = [],
+  extraItemClickHandler,
+  menuItemProps,
+  initSelected = [],
+  multiple = false,
+  autoFocusItem,
+  menuRef,
+  isIconOnly = false,
+  optionHeader,
+  sorted = true
+}, ref) => {
+  const [localSelected, setLocalSelected] = (0, import_react.useState)(initSelected);
+  (0, import_react.useImperativeHandle)(ref, () => ({
+    getSelectedItem: () => localSelected
+  }), [localSelected]);
+  (0, import_react.useEffect)(() => {
+    setLocalSelected(initSelected);
+  }, [initSelected]);
+  const sortedOptions = (0, import_react.useMemo)(() => {
+    if (!sorted) return options;
+    return [...options].sort((a, b) => {
+      if (a.label && b.label) {
+        return a.label.toString().localeCompare(b.label.toString());
+      }
+      return 0;
+    });
+  }, [sorted, options]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    StyledMenuList,
+    {
+      ref: menuRef,
+      autoFocusItem,
+      fontSize: menuItemProps?.fontSize,
+      padding: menuItemProps?.padding,
+      children: [
+        optionHeader,
+        sortedOptions.map((o, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          StyledMenuItem,
+          {
+            selected: localSelected.includes(o.id),
+            customPadding: menuItemProps?.padding,
+            customFontSize: menuItemProps?.fontSize,
+            onClick: (e) => {
+              if (extraItemClickHandler) extraItemClickHandler(e);
+              if (multiple) setLocalSelected((old) => {
+                if (old.includes(o.id)) return old.filter((id) => id !== o.id);
+                return [...old, o.id];
+              });
+              o.onClick?.();
+            },
+            children: [
+              o.icon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledItemIcon, { isIconOnly, children: o.icon }),
+              o.label && !isIconOnly && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ListItemText.default, { children: o.label }),
+              o.extension
+            ]
+          },
+          i
+        ))
+      ]
+    }
+  );
+});
+var Menu_default = CustomMenuList;
+var StyledMenuList = (0, import_styles2.styled)(import_MenuList.default, {
+  shouldForwardProp: (prop) => prop !== "fontSize" && prop !== "padding"
+})((p) => createMenuListTheme(p));
+function createMenuListTheme(p) {
+  return {
+    "&.MuiList-root": {
+      padding: "8px 4px",
+      display: "flex",
+      flexDirection: "column",
+      alignContent: "center",
+      alignItems: "center",
+      width: "100%",
+      gap: "2px",
+      "& li": {
+        width: "-webkit-fill-available",
+        borderRadius: "8px",
+        minHeight: "fit-content",
+        padding: p.padding || "6px 16px",
+        margin: "0",
+        overflow: "hidden",
+        "& .MuiListItemText-primary": {
+          fontSize: p.fontSize || "1rem",
+          overflow: "hidden",
+          textOverflow: "ellipsis"
+        }
+      }
+    }
+  };
+}
+
+// src/components/elemental/Menu/src/Menu/index.ts
+var import_MenuItem3 = __toESM(require("@mui/material/MenuItem"));
+
+// src/components/elemental/Overlay/src/index.ts
+var import_ClickAwayListener = __toESM(require("@mui/material/ClickAwayListener"));
+var import_Popper = __toESM(require("@mui/material/Popper"));
+
+// src/components/elemental/Paper/src/Paper/Paper.tsx
+var import_Paper = __toESM(require("@mui/material/Paper"));
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function MuiPaper(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_Paper.default, { ...props });
+}
+
+// src/components/elemental/Menu/src/useMenu/useMenu.tsx
+var import_react2 = require("react");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var MenuPopper = ({
+  placement = "bottom-start",
+  options = [],
+  openMenuProps,
+  menuItemProps,
+  optionHeader
+}) => {
+  const {
+    closeHandler,
+    anchorEl,
+    onItemClickClientArg,
+    multiple,
+    ref,
+    menuRef,
+    initSelected,
+    sorted = true
+  } = openMenuProps;
+  const open = Boolean(anchorEl);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    import_Popper.default,
+    {
+      open,
+      anchorEl,
+      placement,
+      sx: { zIndex: "1301" },
+      modifiers: [{
+        name: "offset",
+        options: { offset: [0, 8] }
+      }],
+      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        MuiPaper,
+        {
+          variant: "outlined",
+          sx: {
+            "&.MuiPaper-root": {
+              pr: 1,
+              minWidth: 150,
+              maxHeight: 300,
+              borderRadius: "16px",
+              overflow: "hidden",
+              display: "flex",
+              flexDirection: "column",
+              "& .MuiList-root": {
+                display: "flex",
+                flexDirection: "column",
+                alignContent: "center",
+                alignItems: "center",
+                width: "100%",
+                overflowY: "auto",
+                height: "100%"
+              },
+              "& li": {
+                width: "100%"
+              }
+            }
+          },
+          children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_ClickAwayListener.default, { onClickAway: closeHandler, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            Menu_default,
+            {
+              ref,
+              menuRef,
+              autoFocusItem: open,
+              menuItemProps,
+              optionHeader,
+              options,
+              multiple,
+              initSelected,
+              extraItemClickHandler: (e) => {
+                if (onItemClickClientArg) onItemClickClientArg({ event: e, closeHandler });
+              },
+              sorted
+            }
+          ) })
+        }
+      )
+    }
+  );
+};
+function useMenu({
+  onItemClickClientArg,
+  multiple = false,
+  initSelected = [],
+  setSelected
+}) {
+  const [anchorEl, setAnchorEl] = (0, import_react2.useState)(null);
+  const [anchorPosition, setAnchorPosition] = (0, import_react2.useState)({ top: 0, left: 0 });
+  const ref = (0, import_react2.useRef)(null);
+  const menuRef = (0, import_react2.useRef)(null);
+  const closeHandler = (event) => {
+    if (event && menuRef.current && event.target instanceof Node && menuRef.current.contains(event.target)) {
+      return;
+    }
+    if (setSelected && multiple) {
+      const localSelected = ref.current?.getSelectedItem();
+      if (localSelected && Array.isArray(localSelected)) {
+        setSelected(localSelected);
+      }
+    }
+    setAnchorEl(null);
+  };
+  const onTriggerClickHandler = (event) => {
+    const bottom = event.clientY;
+    const right = event.clientX;
+    setAnchorEl(event.currentTarget);
+    setAnchorPosition({ top: bottom, left: right });
+  };
+  return {
+    anchorEl,
+    anchorPosition,
+    onTriggerClickHandler,
+    onItemClickClientArg,
+    closeHandler,
+    multiple,
+    ref,
+    initSelected,
+    menuRef
+  };
+}
+
+// src/components/elemental/Tab/src/TabPanel/useTabsOverflow.ts
+var import_react3 = require("react");
+function computeVisibleIndexes(itemWidths, moreWidth, availableWidth, selectedIndex, gapPx) {
+  const count = itemWidths.length;
+  if (count === 0) {
+    return { visibleIndexes: [], overflowIndexes: [] };
+  }
+  if (itemWidths.some((width) => width <= 0) || availableWidth <= 0) {
+    return {
+      visibleIndexes: itemWidths.map((_, index) => index),
+      overflowIndexes: []
+    };
+  }
+  const totalNeeded = itemWidths.reduce((sum, width) => sum + width, 0) + Math.max(0, count - 1) * gapPx;
+  if (totalNeeded <= availableWidth) {
+    return {
+      visibleIndexes: itemWidths.map((_, index) => index),
+      overflowIndexes: []
+    };
+  }
+  const reserveMore = moreWidth > 0 ? moreWidth + gapPx : 0;
+  const budget = Math.max(0, availableWidth - reserveMore);
+  const pickPrefix = (maxExclusive, limit) => {
+    const indexes = [];
+    let used = 0;
+    for (let i = 0; i < maxExclusive; i += 1) {
+      const width = itemWidths[i] ?? 0;
+      const nextUsed = used + width + (indexes.length > 0 ? gapPx : 0);
+      if (nextUsed <= limit) {
+        indexes.push(i);
+        used = nextUsed;
+      } else {
+        break;
+      }
+    }
+    return indexes;
+  };
+  let visibleIndexes;
+  if (selectedIndex < 0 || selectedIndex >= count) {
+    visibleIndexes = pickPrefix(count, budget);
+  } else {
+    const selectedWidth = itemWidths[selectedIndex] ?? 0;
+    const prefixBudget = Math.max(
+      0,
+      budget - selectedWidth - (selectedWidth > 0 ? gapPx : 0)
+    );
+    const prefix = pickPrefix(selectedIndex, prefixBudget);
+    let used = prefix.reduce((sum, index, order) => {
+      return sum + (itemWidths[index] ?? 0) + (order > 0 ? gapPx : 0);
+    }, 0) + (prefix.length > 0 ? gapPx : 0) + selectedWidth;
+    const after = [];
+    for (let i = selectedIndex + 1; i < count; i += 1) {
+      const width = itemWidths[i] ?? 0;
+      const nextUsed = used + gapPx + width;
+      if (nextUsed <= budget) {
+        after.push(i);
+        used = nextUsed;
+      } else {
+        break;
+      }
+    }
+    visibleIndexes = [...prefix, selectedIndex, ...after];
+  }
+  if (visibleIndexes.length === 0 && selectedIndex >= 0 && selectedIndex < count) {
+    visibleIndexes = [selectedIndex];
+  }
+  const visibleSet = new Set(visibleIndexes);
+  const overflowIndexes = itemWidths.map((_, index) => index).filter((index) => !visibleSet.has(index));
+  return { visibleIndexes, overflowIndexes };
+}
+function useTabsOverflowSplit(itemWidths, moreWidth, availableWidth, selectedIndex, gapPx) {
+  return (0, import_react3.useMemo)(
+    () => computeVisibleIndexes(
+      itemWidths,
+      moreWidth,
+      availableWidth,
+      selectedIndex,
+      gapPx
+    ),
+    [itemWidths, moreWidth, availableWidth, selectedIndex, gapPx]
+  );
+}
+
+// src/components/elemental/Tab/src/TabPanel/tabPanelVars.ts
+var tabPanelRootSx = {
+  "--tabpanel-accent": "var(--mui-palette-primary-emphasis)",
+  "--tabpanel-track-bg": "color-mix(in lab, var(--tabpanel-accent), transparent 92%)",
+  "--tabpanel-tab-color": "var(--mui-palette-text-secondary)",
+  "--tabpanel-tab-color-active": "var(--tabpanel-accent)",
+  "--tabpanel-tab-color-disabled": "var(--mui-palette-text-disabled)",
+  "--tabpanel-badge-color": "var(--mui-palette-error-main)",
+  "--tabpanel-badge-bg": "color-mix(in lab, var(--mui-palette-error-main), transparent 86%)",
+  "--tabpanel-focus-bg": "color-mix(in lab, var(--mui-palette-background-paper), transparent 78%)",
+  "--tabpanel-focus-bg-dark": "color-mix(in lab, var(--mui-palette-background-paper), transparent 55%)",
+  "--tabpanel-focus-shadow": [
+    "inset 0 1px 1px color-mix(in lab, var(--mui-palette-background-paper), transparent 15%)",
+    "inset 0 -1px 3px color-mix(in lab, var(--tabpanel-accent), transparent 80%)",
+    "inset 0 0 16px color-mix(in lab, var(--mui-palette-background-paper), transparent 50%)",
+    "0 0 0 1px color-mix(in lab, var(--mui-palette-background-paper), transparent 45%)",
+    "0 0 20px color-mix(in lab, var(--tabpanel-accent), transparent 76%)",
+    "0 8px 22px color-mix(in lab, var(--tabpanel-accent), transparent 84%)"
+  ].join(", "),
+  "--tabpanel-focus-shadow-dark": [
+    "inset 0 1px 0 rgba(255, 255, 255, 0.06)",
+    "inset 0 0 0 1px color-mix(in lab, var(--tabpanel-accent), transparent 82%)",
+    "0 0 0 1px rgba(0, 0, 0, 0.35)",
+    "0 4px 12px rgba(0, 0, 0, 0.35)"
+  ].join(", "),
+  "--tabpanel-focus-radius": "10px",
+  "--tabpanel-track-radius": "12px",
+  "--tabpanel-track-pad": "3px",
+  "--tabpanel-item-gap": "1px",
+  "--tabpanel-indicator-ease": "cubic-bezier(0.32, 0.72, 0, 1)",
+  "--tabpanel-indicator-ms": "380ms"
+};
+function tabPanelStyleToCssVars(style) {
+  if (!style) {
+    return {};
+  }
+  const vars = {};
+  if (style.accent != null) vars["--tabpanel-accent"] = style.accent;
+  if (style.trackBg != null) vars["--tabpanel-track-bg"] = style.trackBg;
+  if (style.tabColor != null) vars["--tabpanel-tab-color"] = style.tabColor;
+  if (style.tabColorActive != null) {
+    vars["--tabpanel-tab-color-active"] = style.tabColorActive;
+  }
+  if (style.tabColorDisabled != null) {
+    vars["--tabpanel-tab-color-disabled"] = style.tabColorDisabled;
+  }
+  if (style.badgeColor != null) vars["--tabpanel-badge-color"] = style.badgeColor;
+  if (style.badgeBg != null) vars["--tabpanel-badge-bg"] = style.badgeBg;
+  if (style.focusBg != null) vars["--tabpanel-focus-bg"] = style.focusBg;
+  if (style.focusBgDark != null) {
+    vars["--tabpanel-focus-bg-dark"] = style.focusBgDark;
+  }
+  if (style.focusShadow != null) {
+    vars["--tabpanel-focus-shadow"] = style.focusShadow;
+  }
+  if (style.focusShadowDark != null) {
+    vars["--tabpanel-focus-shadow-dark"] = style.focusShadowDark;
+  }
+  if (style.focusRadius != null) {
+    vars["--tabpanel-focus-radius"] = style.focusRadius;
+  }
+  if (style.trackRadius != null) {
+    vars["--tabpanel-track-radius"] = style.trackRadius;
+  }
+  return vars;
+}
+
+// src/components/elemental/Tab/src/TabPanel/TabPanel.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var TRACK_PAD = 3;
+var ITEM_GAP = 1;
+var DEFAULT_TRACK_RADIUS = 12;
+var DEFAULT_FOCUS_RADIUS = 10;
+var INDICATOR_EASE = "cubic-bezier(0.32, 0.72, 0, 1)";
+var INDICATOR_MS = 380;
+function toCssRadius(value) {
+  return typeof value === "number" ? `${value}px` : value;
+}
+function finishIndicatorAnimation(animation) {
+  try {
+    animation.commitStyles?.();
+  } catch {
+  }
+  animation.cancel();
+}
+function clearIndicatorAnimations(element) {
+  element.getAnimations().forEach((animation) => {
+    finishIndicatorAnimation(animation);
+  });
+}
+function resolveSelectedId(items, value, internal) {
+  const candidate = value ?? internal;
+  if (candidate && items.some((item) => item.id === candidate && !item.disabled)) {
+    return candidate;
+  }
+  return items.find((item) => !item.disabled)?.id;
+}
+function TabItemContent({
+  item,
+  showLabels,
+  active,
+  endAdornment
+}) {
+  const showLabel = showLabels || !item.icon;
+  const badgeLabel = item.badge == null ? null : typeof item.badge === "number" && item.badge > 99 ? "99+" : String(item.badge);
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    import_Box.default,
+    {
+      sx: {
+        position: "relative",
+        display: "inline-flex",
+        alignItems: "center",
+        gap: 0.5,
+        px: showLabels ? 1.15 : 0.9,
+        py: 0.5,
+        minHeight: 28,
+        pr: endAdornment ? 0.75 : void 0
+      },
+      children: [
+        item.icon ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          import_Box.default,
+          {
+            component: "span",
+            sx: {
+              display: "inline-flex",
+              color: "inherit",
+              lineHeight: 0,
+              opacity: active ? 1 : 0.88,
+              transition: "opacity var(--tabpanel-indicator-ms) var(--tabpanel-indicator-ease)",
+              "& > *": { fontSize: 16 }
+            },
+            children: item.icon
+          }
+        ) : null,
+        showLabel ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          import_Typography.default,
+          {
+            component: "span",
+            sx: {
+              m: 0,
+              fontSize: "0.75rem",
+              letterSpacing: "0.01em",
+              fontWeight: active ? 600 : 500,
+              color: "inherit",
+              lineHeight: 1.15,
+              whiteSpace: "nowrap"
+            },
+            children: item.label
+          }
+        ) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          import_Typography.default,
+          {
+            component: "span",
+            sx: {
+              position: "absolute",
+              width: 1,
+              height: 1,
+              overflow: "hidden",
+              clip: "rect(0 0 0 0)"
+            },
+            children: item.label
+          }
+        ),
+        endAdornment,
+        badgeLabel != null ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          import_Box.default,
+          {
+            component: "span",
+            "aria-label": `${item.badge} notifications`,
+            sx: {
+              position: "absolute",
+              top: 1,
+              right: endAdornment ? 10 : 1,
+              zIndex: 1,
+              pointerEvents: "none",
+              minWidth: 12,
+              height: 12,
+              px: 0.3,
+              display: "inline-flex",
+              alignItems: "center",
+              justifyContent: "center",
+              borderRadius: 999,
+              bgcolor: "var(--tabpanel-badge-bg)",
+              color: "var(--tabpanel-badge-color)",
+              fontSize: 8,
+              fontWeight: 700,
+              lineHeight: 1
+            },
+            children: badgeLabel
+          }
+        ) : null
+      ]
+    }
+  );
+}
+function MoreTriggerContent({
+  showLabels,
+  open
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    import_Box.default,
+    {
+      sx: {
+        position: "relative",
+        display: "inline-flex",
+        alignItems: "center",
+        gap: 0.35,
+        px: showLabels ? 1.15 : 0.9,
+        py: 0.5,
+        minHeight: 28
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_MoreHoriz.default, { sx: { fontSize: 16 } }),
+        showLabels ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          import_Typography.default,
+          {
+            component: "span",
+            sx: {
+              m: 0,
+              fontSize: "0.75rem",
+              fontWeight: 500,
+              color: "inherit",
+              lineHeight: 1.15,
+              whiteSpace: "nowrap"
+            },
+            children: "More"
+          }
+        ) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          import_KeyboardArrowDown.default,
+          {
+            sx: {
+              fontSize: 14,
+              opacity: 0.75,
+              transition: "transform 180ms ease",
+              transform: open ? "rotate(180deg)" : "none"
+            }
+          }
+        )
+      ]
+    }
+  );
+}
+function TabPanel({
+  items,
+  value,
+  defaultValue,
+  onChange,
+  showLabels = true,
+  focusRadius = DEFAULT_FOCUS_RADIUS,
+  trackRadius = DEFAULT_TRACK_RADIUS,
+  sx,
+  className,
+  slotProps
+}) {
+  const isControlled = value !== void 0;
+  const [internalValue, setInternalValue] = (0, import_react4.useState)(
+    () => defaultValue ?? items.find((item) => !item.disabled)?.id
+  );
+  const selectedId = resolveSelectedId(items, value, internalValue);
+  const select = (0, import_react4.useCallback)(
+    (id) => {
+      const item = items.find((entry) => entry.id === id);
+      if (!item || item.disabled) {
+        return;
+      }
+      if (!isControlled) {
+        setInternalValue(id);
+      }
+      onChange?.(id);
+    },
+    [isControlled, items, onChange]
+  );
+  const rootRef = (0, import_react4.useRef)(null);
+  const stripRef = (0, import_react4.useRef)(null);
+  const measureRef = (0, import_react4.useRef)(null);
+  const moreMeasureRef = (0, import_react4.useRef)(null);
+  const indicatorRef = (0, import_react4.useRef)(null);
+  const itemRefs = (0, import_react4.useRef)(/* @__PURE__ */ new Map());
+  const indicatorRectRef = (0, import_react4.useRef)({ top: 0, left: 0, width: 0, height: 0 });
+  const indicatorMountedRef = (0, import_react4.useRef)(false);
+  const indicatorAnimatingRef = (0, import_react4.useRef)(false);
+  const [availableWidth, setAvailableWidth] = (0, import_react4.useState)(0);
+  const [itemWidths, setItemWidths] = (0, import_react4.useState)([]);
+  const [moreWidth, setMoreWidth] = (0, import_react4.useState)(0);
+  const selectedIndex = (0, import_react4.useMemo)(
+    () => items.findIndex((item) => item.id === selectedId),
+    [items, selectedId]
+  );
+  const { visibleIndexes, overflowIndexes } = useTabsOverflowSplit(
+    itemWidths,
+    moreWidth,
+    availableWidth,
+    selectedIndex,
+    ITEM_GAP
+  );
+  const visibleItems = (0, import_react4.useMemo)(
+    () => visibleIndexes.map((index) => items[index]).filter(Boolean),
+    [visibleIndexes, items]
+  );
+  const overflowItems = (0, import_react4.useMemo)(
+    () => overflowIndexes.map((index) => items[index]).filter(Boolean),
+    [overflowIndexes, items]
+  );
+  const hasOverflow = overflowItems.length > 0;
+  const rootCssVars = (0, import_react4.useMemo)(
+    () => ({
+      ...tabPanelStyleToCssVars(slotProps?.root?.style),
+      "--tabpanel-focus-radius": toCssRadius(focusRadius),
+      "--tabpanel-track-radius": toCssRadius(trackRadius),
+      // Prop radii win unless style explicitly set them.
+      ...slotProps?.root?.style?.focusRadius != null ? { "--tabpanel-focus-radius": slotProps.root.style.focusRadius } : null,
+      ...slotProps?.root?.style?.trackRadius != null ? { "--tabpanel-track-radius": slotProps.root.style.trackRadius } : null
+    }),
+    [focusRadius, trackRadius, slotProps?.root?.style]
+  );
+  (0, import_react4.useLayoutEffect)(() => {
+    const root = rootRef.current;
+    const measure = measureRef.current;
+    const moreMeasure = moreMeasureRef.current;
+    if (!root || !measure || !moreMeasure) {
+      return;
+    }
+    const update = () => {
+      setAvailableWidth(Math.max(0, root.clientWidth - TRACK_PAD * 2));
+      const widths = Array.from(
+        measure.querySelectorAll("[data-tab-measure]")
+      ).map((node) => node.getBoundingClientRect().width);
+      setItemWidths((prev) => {
+        if (prev.length === widths.length && prev.every((width, index) => Math.abs(width - (widths[index] ?? 0)) < 0.5)) {
+          return prev;
+        }
+        return widths;
+      });
+      const nextMore = Math.max(
+        moreMeasure.scrollWidth,
+        moreMeasure.getBoundingClientRect().width
+      );
+      setMoreWidth((prev) => Math.abs(prev - nextMore) < 0.5 ? prev : nextMore);
+    };
+    update();
+    const observer = new ResizeObserver(update);
+    observer.observe(root);
+    observer.observe(measure);
+    observer.observe(moreMeasure);
+    return () => observer.disconnect();
+  }, [items, showLabels]);
+  (0, import_react4.useLayoutEffect)(() => {
+    const strip = stripRef.current;
+    const indicator = indicatorRef.current;
+    if (!strip || !indicator || !selectedId) {
+      return;
+    }
+    const slideToActive = () => {
+      const activeEl = itemRefs.current.get(selectedId);
+      if (!activeEl) {
+        return;
+      }
+      const stripBox = strip.getBoundingClientRect();
+      const itemBox = activeEl.getBoundingClientRect();
+      const next = {
+        top: itemBox.top - stripBox.top,
+        left: itemBox.left - stripBox.left,
+        width: itemBox.width,
+        height: itemBox.height
+      };
+      const applyRect = (rect) => {
+        indicator.style.transform = `translate3d(${rect.left}px, ${rect.top}px, 0)`;
+        indicator.style.width = `${rect.width}px`;
+        indicator.style.height = `${rect.height}px`;
+      };
+      if (!indicatorMountedRef.current || indicatorRectRef.current.width <= 0) {
+        clearIndicatorAnimations(indicator);
+        indicator.style.transition = "none";
+        applyRect(next);
+        indicator.style.opacity = "1";
+        indicatorRectRef.current = next;
+        indicatorMountedRef.current = true;
+        return;
+      }
+      clearIndicatorAnimations(indicator);
+      const liveBox = indicator.getBoundingClientRect();
+      const prev = {
+        top: liveBox.top - stripBox.top,
+        left: liveBox.left - stripBox.left,
+        width: liveBox.width,
+        height: liveBox.height
+      };
+      const same = Math.abs(prev.left - next.left) < 0.5 && Math.abs(prev.top - next.top) < 0.5 && Math.abs(prev.width - next.width) < 0.5 && Math.abs(prev.height - next.height) < 0.5;
+      if (same) {
+        applyRect(next);
+        indicatorRectRef.current = next;
+        return;
+      }
+      const bridgeLeft = Math.min(prev.left, next.left);
+      const bridgeRight = Math.max(prev.left + prev.width, next.left + next.width);
+      const bridge = {
+        left: bridgeLeft,
+        top: next.top,
+        width: Math.max(bridgeRight - bridgeLeft, next.width),
+        height: next.height
+      };
+      indicator.style.transition = "none";
+      applyRect(prev);
+      indicator.style.opacity = "1";
+      indicatorAnimatingRef.current = true;
+      const animation = indicator.animate(
+        [
+          {
+            transform: `translate3d(${prev.left}px, ${prev.top}px, 0)`,
+            width: `${prev.width}px`,
+            height: `${prev.height}px`
+          },
+          {
+            transform: `translate3d(${bridge.left}px, ${bridge.top}px, 0)`,
+            width: `${bridge.width}px`,
+            height: `${bridge.height}px`,
+            offset: 0.4
+          },
+          {
+            transform: `translate3d(${next.left}px, ${next.top}px, 0)`,
+            width: `${next.width}px`,
+            height: `${next.height}px`
+          }
+        ],
+        {
+          duration: INDICATOR_MS,
+          easing: INDICATOR_EASE,
+          fill: "forwards"
+        }
+      );
+      animation.onfinish = () => {
+        finishIndicatorAnimation(animation);
+        applyRect(next);
+        indicatorRectRef.current = next;
+        indicatorAnimatingRef.current = false;
+      };
+      animation.oncancel = () => {
+        indicatorAnimatingRef.current = false;
+      };
+      indicatorRectRef.current = next;
+    };
+    slideToActive();
+    const observer = new ResizeObserver(() => {
+      if (indicatorAnimatingRef.current) {
+        return;
+      }
+      const activeEl = itemRefs.current.get(selectedId);
+      const ind = indicatorRef.current;
+      if (!activeEl || !ind || !stripRef.current) {
+        return;
+      }
+      const stripBox = stripRef.current.getBoundingClientRect();
+      const itemBox = activeEl.getBoundingClientRect();
+      const next = {
+        top: itemBox.top - stripBox.top,
+        left: itemBox.left - stripBox.left,
+        width: itemBox.width,
+        height: itemBox.height
+      };
+      clearIndicatorAnimations(ind);
+      ind.style.transition = "none";
+      ind.style.transform = `translate3d(${next.left}px, ${next.top}px, 0)`;
+      ind.style.width = `${next.width}px`;
+      ind.style.height = `${next.height}px`;
+      ind.style.opacity = "1";
+      indicatorRectRef.current = next;
+      indicatorMountedRef.current = true;
+    });
+    observer.observe(strip);
+    return () => observer.disconnect();
+  }, [visibleIndexes, overflowIndexes, selectedId, items, showLabels, focusRadius]);
+  (0, import_react4.useEffect)(() => {
+    if (isControlled) {
+      return;
+    }
+    const next = resolveSelectedId(items, void 0, internalValue);
+    if (next && next !== internalValue) {
+      setInternalValue(next);
+    }
+  }, [items, isControlled, internalValue]);
+  const menu = useMenu({
+    onItemClickClientArg: ({ closeHandler }) => {
+      closeHandler?.();
+    }
+  });
+  const menuOptions = (0, import_react4.useMemo)(
+    () => overflowItems.map((item) => ({
+      id: item.id,
+      label: item.label,
+      icon: item.icon ? item.icon : void 0,
+      onClick: () => {
+        if (!item.disabled) {
+          select(item.id);
+        }
+      }
+    })),
+    [overflowItems, select]
+  );
+  const selectedItem = items.find((item) => item.id === selectedId);
+  const stripSx = {
+    position: "relative",
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "flex-start",
+    flexWrap: "nowrap",
+    alignSelf: "flex-start",
+    maxWidth: "100%",
+    gap: "var(--tabpanel-item-gap)",
+    p: "var(--tabpanel-track-pad)",
+    borderRadius: "var(--tabpanel-track-radius)",
+    border: "none",
+    bgcolor: "var(--tabpanel-track-bg)"
+  };
+  const tabButtonSx = {
+    position: "relative",
+    zIndex: 1,
+    appearance: "none",
+    border: "none",
+    background: "transparent",
+    p: 0,
+    m: 0,
+    borderRadius: "var(--tabpanel-focus-radius)",
+    color: "var(--tabpanel-tab-color)",
+    transition: "color var(--tabpanel-indicator-ms) var(--tabpanel-indicator-ease)",
+    flexShrink: 0,
+    "&:hover": {
+      color: "var(--tabpanel-tab-color-active)"
+    },
+    "&:focus-visible": {
+      outline: "2px solid var(--tabpanel-accent)",
+      outlineOffset: 3
+    },
+    '&[aria-selected="true"]': {
+      color: "var(--tabpanel-tab-color-active)",
+      "&:hover": {
+        color: "var(--tabpanel-tab-color-active)"
+      }
+    }
+  };
+  const setItemRef = (id) => (node) => {
+    if (node) {
+      itemRefs.current.set(id, node);
+    } else {
+      itemRefs.current.delete(id);
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    import_Box.default,
+    {
+      ref: rootRef,
+      className,
+      sx: mergeSx(
+        {
+          ...tabPanelRootSx,
+          ...rootCssVars,
+          width: "100%",
+          minWidth: 0,
+          maxWidth: "100%",
+          overflow: "hidden",
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "stretch",
+          gap: 1.5
+        },
+        slotProps?.root?.sx,
+        sx
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          import_Box.default,
+          {
+            ref: measureRef,
+            "aria-hidden": true,
+            sx: {
+              position: "fixed",
+              left: -99999,
+              top: 0,
+              visibility: "hidden",
+              pointerEvents: "none",
+              display: "inline-flex",
+              alignItems: "center",
+              flexWrap: "nowrap",
+              gap: "var(--tabpanel-item-gap)",
+              width: "max-content",
+              maxWidth: "none"
+            },
+            children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              import_Box.default,
+              {
+                "data-tab-measure": true,
+                sx: { display: "inline-flex", flexShrink: 0 },
+                children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(TabItemContent, { item, showLabels, active: false })
+              },
+              `measure-${item.id}`
+            ))
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          import_Box.default,
+          {
+            ref: moreMeasureRef,
+            "aria-hidden": true,
+            sx: {
+              position: "fixed",
+              left: -99999,
+              top: 0,
+              visibility: "hidden",
+              pointerEvents: "none",
+              display: "inline-flex",
+              width: "max-content"
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(MoreTriggerContent, { showLabels, open: false })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+          import_Box.default,
+          {
+            ref: stripRef,
+            role: "tablist",
+            sx: mergeSx(
+              stripSx,
+              hasOverflow ? slotProps?.menu?.sx ?? slotProps?.strip?.sx : slotProps?.strip?.sx
+            ),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                import_Box.default,
+                {
+                  ref: indicatorRef,
+                  "aria-hidden": true,
+                  sx: mergeSx(
+                    {
+                      position: "absolute",
+                      top: 0,
+                      left: 0,
+                      width: 0,
+                      height: 0,
+                      borderRadius: "var(--tabpanel-focus-radius)",
+                      border: "none",
+                      bgcolor: "var(--tabpanel-focus-bg)",
+                      backdropFilter: "blur(12px) saturate(1.2)",
+                      WebkitBackdropFilter: "blur(12px) saturate(1.2)",
+                      boxShadow: "var(--tabpanel-focus-shadow)",
+                      opacity: 0,
+                      pointerEvents: "none",
+                      zIndex: 0,
+                      // Geometry (transform / width / height) is JS + WAAPI only —
+                      // never set transform here or Emotion fights fill: 'forwards'.
+                      willChange: "transform, width, height",
+                      "[color-scheme=dark] &": {
+                        bgcolor: "var(--tabpanel-focus-bg-dark)",
+                        backdropFilter: "blur(8px) saturate(1.05)",
+                        WebkitBackdropFilter: "blur(8px) saturate(1.05)",
+                        boxShadow: "var(--tabpanel-focus-shadow-dark)"
+                      }
+                    },
+                    slotProps?.indicator?.sx
+                  )
+                }
+              ),
+              visibleItems.map((item) => {
+                const active = item.id === selectedId;
+                return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                  import_Box.default,
+                  {
+                    component: "button",
+                    type: "button",
+                    role: "tab",
+                    "aria-selected": active,
+                    disabled: item.disabled,
+                    ref: setItemRef(item.id),
+                    onClick: () => select(item.id),
+                    sx: mergeSx(
+                      {
+                        ...tabButtonSx,
+                        cursor: item.disabled ? "not-allowed" : "pointer",
+                        opacity: item.disabled ? 0.4 : 1,
+                        ...item.disabled ? {
+                          color: "var(--tabpanel-tab-color-disabled)",
+                          "&:hover": {
+                            color: "var(--tabpanel-tab-color-disabled)"
+                          }
+                        } : null
+                      },
+                      slotProps?.tab?.sx
+                    ),
+                    children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                      TabItemContent,
+                      {
+                        item,
+                        showLabels,
+                        active
+                      }
+                    )
+                  },
+                  item.id
+                );
+              }),
+              hasOverflow ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                  import_Box.default,
+                  {
+                    component: "button",
+                    type: "button",
+                    "aria-haspopup": "menu",
+                    "aria-expanded": Boolean(menu.anchorEl),
+                    "aria-label": `More tabs, ${overflowItems.length} hidden`,
+                    onClick: menu.onTriggerClickHandler,
+                    sx: mergeSx(
+                      {
+                        ...tabButtonSx,
+                        cursor: "pointer"
+                      },
+                      slotProps?.tab?.sx
+                    ),
+                    children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                      MoreTriggerContent,
+                      {
+                        showLabels,
+                        open: Boolean(menu.anchorEl)
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                  MenuPopper,
+                  {
+                    placement: "bottom-end",
+                    options: menuOptions,
+                    openMenuProps: {
+                      ...menu,
+                      initSelected: selectedId ? [selectedId] : []
+                    }
+                  }
+                )
+              ] }) : null
+            ]
+          }
+        ),
+        selectedItem?.content != null ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          import_Box.default,
+          {
+            role: "tabpanel",
+            sx: mergeSx({ minWidth: 0 }, slotProps?.panel?.sx),
+            children: selectedItem.content
+          }
+        ) : null
+      ]
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Tab,
+  TabPanel,
+  Tabs,
+  tabPanelRootSx,
+  tabPanelStyleToCssVars,
+  tabTheme,
+  tabsTheme
+});
+//# sourceMappingURL=tab.js.map