@trackunit/react-components 5.0.0 → 6.0.4

package/index.cjs.js

@@ -1270,64 +1270,6 @@ const Popover = ({ children, isModal = false, ...restOptions }) => {
                 : children }) }));
 };
 
-/** @internal */
-const PORTAL_CONTAINER = "portal-container";
-/**
- * Creates or retrieves the default portal container element
- *
- * @internal
- */
-const getDefaultPortalContainer = () => {
-    let container = document.getElementById(PORTAL_CONTAINER);
-    if (!container) {
-        container = document.createElement("div");
-        container.id = PORTAL_CONTAINER;
-        document.body.appendChild(container);
-    }
-    return container;
-};
-
-/**
- * Portal renders its children into a separate DOM node, outside the normal React tree hierarchy.
- * By default, content is portalled into a z-index-isolated `div#portal-container` in the document body.
- * This is used internally by Popover, Tooltip, and other overlay components.
- *
- * ### When to use
- * Use Portal when you need to render content (modals, popovers, tooltips) outside its parent's DOM hierarchy to avoid z-index or overflow clipping issues.
- *
- * ### When not to use
- * Do not use Portal for regular content rendering. Most overlay components (`Popover`, `Tooltip`) already use Portal internally.
- *
- * @example Rendering into a specific container
- * ```tsx
- * import { Portal } from "@trackunit/react-components";
- *
- * const PortalledContent = () => (
- *   <Portal root={document.getElementById('sidebar-container')}>
- *     <div className="p-4">This content renders in #sidebar-container</div>
- *   </Portal>
- * );
- * ```
- * @example Default portal into document body
- * ```tsx
- * import { Portal } from "@trackunit/react-components";
- *
- * const FloatingContent = ({ isVisible }: { isVisible: boolean }) => (
- *   isVisible ? (
- *     <Portal>
- *       <div className="fixed bottom-4 right-4 bg-white p-4 rounded-lg shadow-lg">
- *         Toast notification content
- *       </div>
- *     </Portal>
- *   ) : null
- * );
- * @param {PortalProps} props - The props for the Portal component
- * @returns {ReactElement} Portal component
- */
-const Portal = (props) => {
-    return jsxRuntime.jsx(react$1.FloatingPortal, { ...props, root: props.root ?? getDefaultPortalContainer() });
-};
-
 const OVERFLOW_CLIPS = new Set(["auto", "scroll", "hidden", "clip"]);
 const clips = (overflow) => OVERFLOW_CLIPS.has(overflow);
 const rectsDisjoint = (a, b) => a.right <= b.left || a.left >= b.right || a.bottom <= b.top || a.top >= b.bottom;
@@ -1440,7 +1382,7 @@ const PopoverContent = function PopoverContent({ className, "data-testid": dataT
     // Floating UI's own app-wide "previously focused element" tracking, which isn't exposed here to
     // check against.
     const resolvedReturnFocus = typeof returnFocus === "boolean" ? returnFocus : withVisibilityCheck(returnFocus);
-    return (jsxRuntime.jsx(Portal, { id: portalId, children: context.isOpen === true ? (jsxRuntime.jsx(react$1.FloatingFocusManager, { closeOnFocusOut: false, context: floatingContext, guards: true, initialFocus: initialFocus, modal: context.isModal, order: ["reference", "content"], returnFocus: resolvedReturnFocus, children: jsxRuntime.jsx("div", { "aria-describedby": context.descriptionId, "aria-labelledby": context.labelId, className: cvaPopoverContainer({ className: className ?? customProps.className }), "data-testid": dataTestId ?? customProps["data-testid"] ?? "popover-content", ref: ref, style: {
+    return (jsxRuntime.jsx(react$1.FloatingPortal, { id: portalId, root: document.body, children: context.isOpen === true ? (jsxRuntime.jsx(react$1.FloatingFocusManager, { closeOnFocusOut: false, context: floatingContext, guards: true, initialFocus: initialFocus, modal: context.isModal, order: ["reference", "content"], returnFocus: resolvedReturnFocus, children: jsxRuntime.jsx("div", { "aria-describedby": context.descriptionId, "aria-labelledby": context.labelId, className: cvaPopoverContainer({ className: className ?? customProps.className }), "data-testid": dataTestId ?? customProps["data-testid"] ?? "popover-content", ref: ref, style: {
                     position: context.strategy,
                     top: context.y,
                     left: context.x,
@@ -11433,7 +11375,7 @@ const useSheetMotionOverflow = ({ panelEl, isDragging, scrollAreaEl, separatorEl
  *
  * Use Sheet for contextual surfaces that slide up from the bottom of a
  * container -- action menus, detail panels, element settings, or filters.
- * Every Sheet renders via Portal into a required `container` element.
+ * Every Sheet renders via a portal into a required `container` element.
  * On small screens, consider using Sheet instead of a Popover for better
  * touch UX. For app-level blocking dialogs, use Modal instead (which
  * automatically renders as a Sheet on small screens).
@@ -11570,7 +11512,7 @@ const Sheet = ({ isOpen, state, snap, onGeometryChange, onSnap, onClickHandle, o
             suppressTransition: skipEntryAnimation && animState.visuallyOpen,
             variant,
         }), style), children: [resizable ? (jsxRuntime.jsx(SheetHandle, { "data-testid": dataTestId !== undefined ? `${dataTestId}-handle` : undefined, isDragging: gestures.isDragging, onClick: handleClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, ...gestureHandlers })) : null, jsxRuntime.jsx("div", { className: "h-px shrink-0 bg-neutral-200 opacity-0 transition-opacity duration-200", ref: setSeparatorEl }), jsxRuntime.jsxs("div", { className: cvaSheetScrollArea({ fillHeight: state.sizingMode !== "fit" }), "data-sheet-scroll-area": true, ref: setScrollAreaEl, children: [persistentContent, state.sizingMode === "docked" ? dockedContent : children] })] }));
-    return (jsxRuntime.jsx(Portal, { root: container, children: jsxRuntime.jsxs("div", { className: cvaSheetContainer({
+    return (jsxRuntime.jsx(react$1.FloatingPortal, { root: container, children: jsxRuntime.jsxs("div", { className: cvaSheetContainer({
                 docked: state.sizingMode === "docked",
             }), "data-testid": dataTestId !== undefined ? `${dataTestId}-container` : undefined, ref: containerRef, children: [jsxRuntime.jsx(SheetOverlay, { "data-testid": dataTestId !== undefined ? `${dataTestId}-overlay` : undefined, visible: showOverlay }), shouldTrapFocus === true ? (jsxRuntime.jsx(react$1.FloatingFocusManager, { context: floatingUi.context, children: panel })) : (panel)] }) }));
 };
@@ -14667,7 +14609,6 @@ exports.Popover = Popover;
 exports.PopoverContent = PopoverContent;
 exports.PopoverTitle = PopoverTitle;
 exports.PopoverTrigger = PopoverTrigger;
-exports.Portal = Portal;
 exports.PreferenceCard = PreferenceCard;
 exports.PreferenceCardSkeleton = PreferenceCardSkeleton;
 exports.Prompt = Prompt;

package/index.esm.js

@@ -12,7 +12,7 @@ import IconSpriteOutline from '@trackunit/ui-icons/icons-sprite-outline.svg';
 import IconSpriteSolid from '@trackunit/ui-icons/icons-sprite-solid.svg';
 import { snakeCase, titleCase } from 'string-ts';
 import { cva } from '@trackunit/css-class-variance-utilities';
-import { FloatingTree, useFloatingNodeId, useFloatingParentNodeId, useFloatingTree, offset, flip, shift, size, useFloating, autoUpdate, useClick, useDismiss, useHover as useHover$1, safePolygon, useRole, useInteractions, FloatingNode, FloatingPortal, useMergeRefs as useMergeRefs$1, FloatingFocusManager, arrow, useTransitionStatus, FloatingArrow, useListNavigation, useTypeahead, FloatingList, useListItem } from '@floating-ui/react';
+import { FloatingTree, useFloatingNodeId, useFloatingParentNodeId, useFloatingTree, offset, flip, shift, size, useFloating, autoUpdate, useClick, useDismiss, useHover as useHover$1, safePolygon, useRole, useInteractions, FloatingNode, useMergeRefs as useMergeRefs$1, FloatingPortal, FloatingFocusManager, arrow, useTransitionStatus, FloatingArrow, useListNavigation, useTypeahead, FloatingList, useListItem } from '@floating-ui/react';
 import { Slot, Slottable } from '@radix-ui/react-slot';
 import { omit, isEqual } from 'es-toolkit';
 import { Link, useBlocker } from '@tanstack/react-router';
@@ -1269,64 +1269,6 @@ const Popover = ({ children, isModal = false, ...restOptions }) => {
                 : children }) }));
 };
 
-/** @internal */
-const PORTAL_CONTAINER = "portal-container";
-/**
- * Creates or retrieves the default portal container element
- *
- * @internal
- */
-const getDefaultPortalContainer = () => {
-    let container = document.getElementById(PORTAL_CONTAINER);
-    if (!container) {
-        container = document.createElement("div");
-        container.id = PORTAL_CONTAINER;
-        document.body.appendChild(container);
-    }
-    return container;
-};
-
-/**
- * Portal renders its children into a separate DOM node, outside the normal React tree hierarchy.
- * By default, content is portalled into a z-index-isolated `div#portal-container` in the document body.
- * This is used internally by Popover, Tooltip, and other overlay components.
- *
- * ### When to use
- * Use Portal when you need to render content (modals, popovers, tooltips) outside its parent's DOM hierarchy to avoid z-index or overflow clipping issues.
- *
- * ### When not to use
- * Do not use Portal for regular content rendering. Most overlay components (`Popover`, `Tooltip`) already use Portal internally.
- *
- * @example Rendering into a specific container
- * ```tsx
- * import { Portal } from "@trackunit/react-components";
- *
- * const PortalledContent = () => (
- *   <Portal root={document.getElementById('sidebar-container')}>
- *     <div className="p-4">This content renders in #sidebar-container</div>
- *   </Portal>
- * );
- * ```
- * @example Default portal into document body
- * ```tsx
- * import { Portal } from "@trackunit/react-components";
- *
- * const FloatingContent = ({ isVisible }: { isVisible: boolean }) => (
- *   isVisible ? (
- *     <Portal>
- *       <div className="fixed bottom-4 right-4 bg-white p-4 rounded-lg shadow-lg">
- *         Toast notification content
- *       </div>
- *     </Portal>
- *   ) : null
- * );
- * @param {PortalProps} props - The props for the Portal component
- * @returns {ReactElement} Portal component
- */
-const Portal = (props) => {
-    return jsx(FloatingPortal, { ...props, root: props.root ?? getDefaultPortalContainer() });
-};
-
 const OVERFLOW_CLIPS = new Set(["auto", "scroll", "hidden", "clip"]);
 const clips = (overflow) => OVERFLOW_CLIPS.has(overflow);
 const rectsDisjoint = (a, b) => a.right <= b.left || a.left >= b.right || a.bottom <= b.top || a.top >= b.bottom;
@@ -1439,7 +1381,7 @@ const PopoverContent = function PopoverContent({ className, "data-testid": dataT
     // Floating UI's own app-wide "previously focused element" tracking, which isn't exposed here to
     // check against.
     const resolvedReturnFocus = typeof returnFocus === "boolean" ? returnFocus : withVisibilityCheck(returnFocus);
-    return (jsx(Portal, { id: portalId, children: context.isOpen === true ? (jsx(FloatingFocusManager, { closeOnFocusOut: false, context: floatingContext, guards: true, initialFocus: initialFocus, modal: context.isModal, order: ["reference", "content"], returnFocus: resolvedReturnFocus, children: jsx("div", { "aria-describedby": context.descriptionId, "aria-labelledby": context.labelId, className: cvaPopoverContainer({ className: className ?? customProps.className }), "data-testid": dataTestId ?? customProps["data-testid"] ?? "popover-content", ref: ref, style: {
+    return (jsx(FloatingPortal, { id: portalId, root: document.body, children: context.isOpen === true ? (jsx(FloatingFocusManager, { closeOnFocusOut: false, context: floatingContext, guards: true, initialFocus: initialFocus, modal: context.isModal, order: ["reference", "content"], returnFocus: resolvedReturnFocus, children: jsx("div", { "aria-describedby": context.descriptionId, "aria-labelledby": context.labelId, className: cvaPopoverContainer({ className: className ?? customProps.className }), "data-testid": dataTestId ?? customProps["data-testid"] ?? "popover-content", ref: ref, style: {
                     position: context.strategy,
                     top: context.y,
                     left: context.x,
@@ -11432,7 +11374,7 @@ const useSheetMotionOverflow = ({ panelEl, isDragging, scrollAreaEl, separatorEl
  *
  * Use Sheet for contextual surfaces that slide up from the bottom of a
  * container -- action menus, detail panels, element settings, or filters.
- * Every Sheet renders via Portal into a required `container` element.
+ * Every Sheet renders via a portal into a required `container` element.
  * On small screens, consider using Sheet instead of a Popover for better
  * touch UX. For app-level blocking dialogs, use Modal instead (which
  * automatically renders as a Sheet on small screens).
@@ -11569,7 +11511,7 @@ const Sheet = ({ isOpen, state, snap, onGeometryChange, onSnap, onClickHandle, o
             suppressTransition: skipEntryAnimation && animState.visuallyOpen,
             variant,
         }), style), children: [resizable ? (jsx(SheetHandle, { "data-testid": dataTestId !== undefined ? `${dataTestId}-handle` : undefined, isDragging: gestures.isDragging, onClick: handleClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, ...gestureHandlers })) : null, jsx("div", { className: "h-px shrink-0 bg-neutral-200 opacity-0 transition-opacity duration-200", ref: setSeparatorEl }), jsxs("div", { className: cvaSheetScrollArea({ fillHeight: state.sizingMode !== "fit" }), "data-sheet-scroll-area": true, ref: setScrollAreaEl, children: [persistentContent, state.sizingMode === "docked" ? dockedContent : children] })] }));
-    return (jsx(Portal, { root: container, children: jsxs("div", { className: cvaSheetContainer({
+    return (jsx(FloatingPortal, { root: container, children: jsxs("div", { className: cvaSheetContainer({
                 docked: state.sizingMode === "docked",
             }), "data-testid": dataTestId !== undefined ? `${dataTestId}-container` : undefined, ref: containerRef, children: [jsx(SheetOverlay, { "data-testid": dataTestId !== undefined ? `${dataTestId}-overlay` : undefined, visible: showOverlay }), shouldTrapFocus === true ? (jsx(FloatingFocusManager, { context: floatingUi.context, children: panel })) : (panel)] }) }));
 };
@@ -14610,4 +14552,4 @@ const useWindowActivity = ({ onFocus, onBlur, skip = false } = { onBlur: undefin
  */
 setupLibraryTranslations();
 
-export { Alert, Badge, Button, Card, CardBody, CardFooter, CardHeader, Collapse, CompletionStatusIndicator, CopyButton, CopyableValue, DEFAULT_SKELETON_PREFERENCE_CARD_PROPS, DetailsList, EmptyState, EmptyValue, ExternalLink, GridAreas, Heading, Highlight, HorizontalOverflowScroller, Icon, IconButton, IdentityCard, IdentityCardSkeleton, Indicator, KPI, KPICard, KPICardSkeleton, KPISkeleton, LabeledValue, LabeledValueList, List, ListItem, MenuContent, MenuDivider, MenuItem, MenuTree, MoreMenu, Notice, PackageNameStoryComponent, Page, PageContent, PageHeader, PageHeaderKpiMetrics, PageHeaderSecondaryActions, PageHeaderTitle, Pagination, Polygon, Popover, PopoverContent, PopoverTitle, PopoverTrigger, Portal, PreferenceCard, PreferenceCardSkeleton, Prompt, ROLE_CARD, SHEET_TRANSITION_DURATION, SHEET_TRANSITION_DURATION_MS, SHEET_TRANSITION_EASING, SectionHeader, SegmentedValueBar, Sheet, Sidebar, SidebarContentLayout, SkeletonBlock, SkeletonLabel, SkeletonLines, Spacer, Spinner, StarButton, Tab, TabContent, TabList, Tabs, Tag, Text, ToggleGroup, Tooltip, TrendIndicator, TrendIndicators, ValueBar, ZStack, createGrid, cvaButton, cvaButtonPrefixSuffix, cvaButtonSpinner, cvaButtonSpinnerContainer, cvaClickable, cvaContainerStyles, cvaContentContainer, cvaContentWrapper, cvaDescriptionCard, cvaIconBackground, cvaIconButton, cvaImgStyles, cvaIndicator, cvaIndicatorIcon, cvaIndicatorIconBackground, cvaIndicatorLabel, cvaIndicatorPing, cvaInputContainer, cvaInteractableItem, cvaList, cvaListContainer, cvaListItem$1 as cvaListItem, cvaMenu, cvaMenuItem, cvaMenuItemLabel, cvaMenuItemPrefix, cvaMenuItemStyle, cvaMenuItemSuffix, cvaMenuList, cvaMenuListDivider, cvaMenuListItem, cvaMenuListMultiSelect, cvaPageHeader, cvaPageHeaderContainer, cvaPageHeaderHeading, cvaPreferenceCard, cvaTitleCard, cvaToggleGroup, cvaToggleGroupWithSlidingBackground, cvaToggleItem, cvaToggleItemContent, cvaToggleItemText, cvaZStackContainer, cvaZStackItem, defaultPageSize, docs, getDevicePixelRatio, getValueBarColorByValue, iconColorNames, iconPalette, noPagination, preferenceCardGrid, useBidirectionalScroll, useClickOutside, useContainerBreakpoints, useCopyToClipboard, useCustomEncoding, useDebounce, useDevicePixelRatio, useElevatedReducer, useElevatedState, useGridAreas, useHold, useHover, useInfiniteScroll, useIsFirstRender, useIsFullscreen, useIsTextTruncated, useKeyboardShortcut, useList, useListItemHeight, useLocalStorage, useLocalStorageReducer, useMeasure, useMenuSearchField, useMenuTree, useMergeRefs, useModifierKey, useOptionalPopoverContext, useOverflowBorder, useOverflowItems, usePopoverContext, usePrevious, usePrompt, useRandomCSSLengths, useRelayPagination, useResize, useScrollBlock, useScrollDetection, useSessionStorage, useSessionStorageReducer, useSheet, useSheetSnap, useStorageKey, useStripForeignIdentityHash, useTextSearch, useTimeout, useViewportBreakpoints, useWatch, useWindowActivity };
+export { Alert, Badge, Button, Card, CardBody, CardFooter, CardHeader, Collapse, CompletionStatusIndicator, CopyButton, CopyableValue, DEFAULT_SKELETON_PREFERENCE_CARD_PROPS, DetailsList, EmptyState, EmptyValue, ExternalLink, GridAreas, Heading, Highlight, HorizontalOverflowScroller, Icon, IconButton, IdentityCard, IdentityCardSkeleton, Indicator, KPI, KPICard, KPICardSkeleton, KPISkeleton, LabeledValue, LabeledValueList, List, ListItem, MenuContent, MenuDivider, MenuItem, MenuTree, MoreMenu, Notice, PackageNameStoryComponent, Page, PageContent, PageHeader, PageHeaderKpiMetrics, PageHeaderSecondaryActions, PageHeaderTitle, Pagination, Polygon, Popover, PopoverContent, PopoverTitle, PopoverTrigger, PreferenceCard, PreferenceCardSkeleton, Prompt, ROLE_CARD, SHEET_TRANSITION_DURATION, SHEET_TRANSITION_DURATION_MS, SHEET_TRANSITION_EASING, SectionHeader, SegmentedValueBar, Sheet, Sidebar, SidebarContentLayout, SkeletonBlock, SkeletonLabel, SkeletonLines, Spacer, Spinner, StarButton, Tab, TabContent, TabList, Tabs, Tag, Text, ToggleGroup, Tooltip, TrendIndicator, TrendIndicators, ValueBar, ZStack, createGrid, cvaButton, cvaButtonPrefixSuffix, cvaButtonSpinner, cvaButtonSpinnerContainer, cvaClickable, cvaContainerStyles, cvaContentContainer, cvaContentWrapper, cvaDescriptionCard, cvaIconBackground, cvaIconButton, cvaImgStyles, cvaIndicator, cvaIndicatorIcon, cvaIndicatorIconBackground, cvaIndicatorLabel, cvaIndicatorPing, cvaInputContainer, cvaInteractableItem, cvaList, cvaListContainer, cvaListItem$1 as cvaListItem, cvaMenu, cvaMenuItem, cvaMenuItemLabel, cvaMenuItemPrefix, cvaMenuItemStyle, cvaMenuItemSuffix, cvaMenuList, cvaMenuListDivider, cvaMenuListItem, cvaMenuListMultiSelect, cvaPageHeader, cvaPageHeaderContainer, cvaPageHeaderHeading, cvaPreferenceCard, cvaTitleCard, cvaToggleGroup, cvaToggleGroupWithSlidingBackground, cvaToggleItem, cvaToggleItemContent, cvaToggleItemText, cvaZStackContainer, cvaZStackItem, defaultPageSize, docs, getDevicePixelRatio, getValueBarColorByValue, iconColorNames, iconPalette, noPagination, preferenceCardGrid, useBidirectionalScroll, useClickOutside, useContainerBreakpoints, useCopyToClipboard, useCustomEncoding, useDebounce, useDevicePixelRatio, useElevatedReducer, useElevatedState, useGridAreas, useHold, useHover, useInfiniteScroll, useIsFirstRender, useIsFullscreen, useIsTextTruncated, useKeyboardShortcut, useList, useListItemHeight, useLocalStorage, useLocalStorageReducer, useMeasure, useMenuSearchField, useMenuTree, useMergeRefs, useModifierKey, useOptionalPopoverContext, useOverflowBorder, useOverflowItems, usePopoverContext, usePrevious, usePrompt, useRandomCSSLengths, useRelayPagination, useResize, useScrollBlock, useScrollDetection, useSessionStorage, useSessionStorageReducer, useSheet, useSheetSnap, useStorageKey, useStripForeignIdentityHash, useTextSearch, useTimeout, useViewportBreakpoints, useWatch, useWindowActivity };

package/migrations/assets/react-router-components/package.json

@@ -1,17 +1,17 @@
 {
   "name": "@trackunit/react-router-components",
-  "version": "1.2.1",
+  "version": "1.3.5",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
     "node": ">=24.x"
   },
   "dependencies": {
-    "@trackunit/css-class-variance-utilities": "2.6.9",
-    "@trackunit/i18n-library-translation": "2.13.1",
-    "@trackunit/react-components": "5.0.0",
-    "@trackunit/react-drawer": "2.16.1",
-    "@trackunit/shared-utils": "1.22.9",
+    "@trackunit/css-class-variance-utilities": "2.6.14",
+    "@trackunit/i18n-library-translation": "2.14.4",
+    "@trackunit/react-components": "6.0.4",
+    "@trackunit/react-drawer": "2.17.5",
+    "@trackunit/shared-utils": "1.22.14",
     "dequal": "^2.0.3",
     "zod": "^3.25.76"
   },

package/migrations.json

@@ -40,10 +40,10 @@
       "description": "Remove the no-longer-supported style property from inline ToggleGroup list items.",
       "implementation": "./migrations/v2-0-0/togglegroup-remove-item-style"
     },
-    "v3-0-0-menulist-rename-to-menucontent": {
-      "version": "3.0.0",
+    "v2-6-0-menulist-rename-to-menucontent": {
+      "version": "2.6.0",
       "description": "Rename MenuList/MenuListProps to MenuContent/MenuContentProps (import specifiers, JSX tags, and type references).",
-      "implementation": "./migrations/v3-0-0/menulist-rename-to-menucontent"
+      "implementation": "./migrations/v2-6-0/menulist-rename-to-menucontent"
     },
     "v3-0-0-copyabletext-to-text-copybutton": {
       "version": "3.0.0",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "5.0.0",
+  "version": "6.0.4",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "migrations": "./migrations.json",
@@ -14,15 +14,15 @@
     "@floating-ui/react": "^0.26.25",
     "string-ts": "^2.0.0",
     "tailwind-merge": "^3.7.0",
-    "@trackunit/ui-design-tokens": "1.21.9",
-    "@trackunit/css-class-variance-utilities": "2.6.9",
-    "@trackunit/shared-utils": "1.22.9",
-    "@trackunit/ui-icons": "1.20.9",
+    "@trackunit/ui-design-tokens": "1.21.14",
+    "@trackunit/css-class-variance-utilities": "2.6.14",
+    "@trackunit/shared-utils": "1.22.14",
+    "@trackunit/ui-icons": "1.20.14",
     "es-toolkit": "^1.52.0",
     "@tanstack/react-virtual": "^3.14.13",
     "fflate": "^0.8.3",
     "zod": "^3.25.76",
-    "@trackunit/i18n-library-translation": "2.13.1"
+    "@trackunit/i18n-library-translation": "2.14.4"
   },
   "peerDependencies": {
     "react": "^19.0.0",

package/src/components/Sheet/Sheet.d.ts

@@ -5,7 +5,7 @@ import type { SheetProps } from "./sheet-types";
  *
  * Use Sheet for contextual surfaces that slide up from the bottom of a
  * container -- action menus, detail panels, element settings, or filters.
- * Every Sheet renders via Portal into a required `container` element.
+ * Every Sheet renders via a portal into a required `container` element.
  * On small screens, consider using Sheet instead of a Popover for better
  * touch UX. For app-level blocking dialogs, use Modal instead (which
  * automatically renders as a Sheet on small screens).

package/src/components/Sheet/sheet-types.d.ts

@@ -185,7 +185,7 @@ export type SheetProps = CommonProps & Styleable & Refable<HTMLDivElement> & {
      * @default true
      */
     readonly trapFocus?: boolean;
-    /** The container element the sheet renders into via Portal. Required. Use a callback ref (useState setter) so mounting triggers a re-render. */
+    /** The container element the sheet renders into via a portal. Required. Use a callback ref (useState setter) so mounting triggers a re-render. */
     readonly container: HTMLElement | null;
     /** Content rendered when in docked mode. Presence enables docking behavior. */
     readonly dockedContent?: ReactNode;

package/src/index.d.ts

@@ -79,7 +79,6 @@ export * from "./components/Popover/PopoverContent";
 export * from "./components/Popover/PopoverTitle";
 export * from "./components/Popover/PopoverTrigger";
 export * from "./components/Popover/PopoverTypes";
-export * from "./components/Portal/Portal";
 export * from "./components/PreferenceCard/PreferenceCard";
 export * from "./components/PreferenceCard/PreferenceCard.variants";
 export * from "./components/PreferenceCard/PreferenceCardSkeleton";

package/src/components/Portal/Portal.d.ts

@@ -1,44 +0,0 @@
-import { FloatingPortalProps } from "@floating-ui/react";
-import { ReactElement } from "react";
-import { CommonProps } from "../../common/CommonProps";
-import { Refable } from "../../common/Refable";
-import type { Styleable } from "../../common/Styleable";
-export type PortalProps = FloatingPortalProps & CommonProps & Styleable & Refable<HTMLDivElement>;
-/**
- * Portal renders its children into a separate DOM node, outside the normal React tree hierarchy.
- * By default, content is portalled into a z-index-isolated `div#portal-container` in the document body.
- * This is used internally by Popover, Tooltip, and other overlay components.
- *
- * ### When to use
- * Use Portal when you need to render content (modals, popovers, tooltips) outside its parent's DOM hierarchy to avoid z-index or overflow clipping issues.
- *
- * ### When not to use
- * Do not use Portal for regular content rendering. Most overlay components (`Popover`, `Tooltip`) already use Portal internally.
- *
- * @example Rendering into a specific container
- * ```tsx
- * import { Portal } from "@trackunit/react-components";
- *
- * const PortalledContent = () => (
- *   <Portal root={document.getElementById('sidebar-container')}>
- *     <div className="p-4">This content renders in #sidebar-container</div>
- *   </Portal>
- * );
- * ```
- * @example Default portal into document body
- * ```tsx
- * import { Portal } from "@trackunit/react-components";
- *
- * const FloatingContent = ({ isVisible }: { isVisible: boolean }) => (
- *   isVisible ? (
- *     <Portal>
- *       <div className="fixed bottom-4 right-4 bg-white p-4 rounded-lg shadow-lg">
- *         Toast notification content
- *       </div>
- *     </Portal>
- *   ) : null
- * );
- * @param {PortalProps} props - The props for the Portal component
- * @returns {ReactElement} Portal component
- */
-export declare const Portal: (props: PortalProps) => ReactElement;

package/src/components/Portal/shared.d.ts

@@ -1,8 +0,0 @@
-/** @internal */
-export declare const PORTAL_CONTAINER = "portal-container";
-/**
- * Creates or retrieves the default portal container element
- *
- * @internal
- */
-export declare const getDefaultPortalContainer: () => HTMLElement;