@hyphen/hyphen-components 5.2.1 → 5.3.0

package/dist/hyphen-components.cjs.development.js

@@ -25,9 +25,9 @@ var AsyncCreatableSelect = require('react-select/async-creatable');
 var AsyncSelect = require('react-select/async');
 var CreatableSelect = require('react-select/creatable');
 var ToggleGroupPrimitive = require('@radix-ui/react-toggle-group');
+var TooltipPrimitive = require('@radix-ui/react-tooltip');
 var uuid = require('uuid');
 var TogglePrimitive = require('@radix-ui/react-toggle');
-var TooltipPrimitive = require('@radix-ui/react-tooltip');
 
 function _interopNamespaceDefault(e) {
   var n = Object.create(null);
@@ -50,8 +50,8 @@ var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
 var CollapsiblePrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(CollapsiblePrimitive);
 var DropdownMenuPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(DropdownMenuPrimitive);
 var ToggleGroupPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(ToggleGroupPrimitive);
-var TogglePrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(TogglePrimitive);
 var TooltipPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(TooltipPrimitive);
+var TogglePrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(TogglePrimitive);
 
 function _extends() {
   return _extends = Object.assign ? Object.assign.bind() : function (n) {
@@ -69,7 +69,7 @@ function _objectWithoutPropertiesLoose(r, e) {
   if (null == r) return {};
   var t = {};
   for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
-    if (e.indexOf(n) >= 0) continue;
+    if (-1 !== e.indexOf(n)) continue;
     t[n] = r[n];
   }
   return t;
@@ -4002,9 +4002,29 @@ function useIsMobile() {
   return !!isMobile;
 }
 
-var styles$8 = {"rail":"Sidebar-module_rail__nWu0Q"};
+var styles$8 = {"rail":"Sidebar-module_rail__nWu0Q","group-data-":"Sidebar-module_group-data-__GTJmR"};
+
+var styles$7 = {"TooltipContent":"Tooltip-module_TooltipContent__wLEZU","tooltip-slideUpAndFade":"Tooltip-module_tooltip-slideUpAndFade__Y05jp","tooltip-slideRightAndFade":"Tooltip-module_tooltip-slideRightAndFade__K04p9","tooltip-slideDownAndFade":"Tooltip-module_tooltip-slideDownAndFade__1wMd-","tooltip-slideLeftAndFade":"Tooltip-module_tooltip-slideLeftAndFade__iQ1fp"};
+
+var _excluded$4 = ["className", "sideOffset"];
+var TooltipProvider = TooltipPrimitive__namespace.Provider;
+var Tooltip = TooltipPrimitive__namespace.Root;
+var TooltipTrigger = TooltipPrimitive__namespace.Trigger;
+var TooltipPortal = TooltipPrimitive__namespace.Portal;
+var TooltipContent = /*#__PURE__*/React__namespace.forwardRef(function (_ref, ref) {
+  var className = _ref.className,
+    _ref$sideOffset = _ref.sideOffset,
+    sideOffset = _ref$sideOffset === void 0 ? 4 : _ref$sideOffset,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$4);
+  return React__namespace.createElement(TooltipPrimitive__namespace.Content, _extends({
+    ref: ref,
+    sideOffset: sideOffset,
+    className: classNames(styles$7.TooltipContent, 'background-color-tooltip font-color-tooltip font-size-xs z-index-popover overflow-hidden br-sm p-h-sm p-v-xs shadow-sm', className)
+  }, props));
+});
+TooltipContent.displayName = TooltipPrimitive__namespace.Content.displayName;
 
-var _excluded$4 = ["defaultOpen", "open", "onOpenChange", "className", "style", "children"],
+var _excluded$3 = ["defaultOpen", "open", "onOpenChange", "className", "style", "children"],
   _excluded2 = ["side", "collapsible", "className", "children"],
   _excluded3 = ["className", "onClick"],
   _excluded4 = ["className"],
@@ -4013,18 +4033,18 @@ var _excluded$4 = ["defaultOpen", "open", "onOpenChange", "className", "style",
   _excluded7 = ["className"],
   _excluded8 = ["className"],
   _excluded9 = ["className"],
-  _excluded10 = ["asChild", "isActive", "icon", "className"],
+  _excluded0 = ["asChild", "isActive", "icon", "tooltip", "className"],
+  _excluded1 = ["className"],
+  _excluded10 = ["className"],
   _excluded11 = ["className"],
-  _excluded12 = ["className"],
-  _excluded13 = ["className"],
-  _excluded14 = ["asChild", "isActive", "className"],
-  _excluded15 = ["className", "asChild"],
-  _excluded16 = ["className"],
-  _excluded17 = ["className"];
-var SIDEBAR_COOKIE_NAME = 'sidebar:state';
+  _excluded12 = ["asChild", "isActive", "className"],
+  _excluded13 = ["className", "asChild"],
+  _excluded14 = ["className"],
+  _excluded15 = ["className"];
+var SIDEBAR_COOKIE_NAME = 'sidebar_expanded';
 var SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
 var SIDEBAR_WIDTH = '16rem';
-var SIDEBAR_WIDTH_ICON = '3rem';
+var SIDEBAR_WIDTH_ICON = '44px';
 var SIDEBAR_KEYBOARD_SHORTCUT = '[';
 var SidebarContext = /*#__PURE__*/React.createContext(null);
 function useSidebar() {
@@ -4042,7 +4062,7 @@ var SidebarProvider = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     className = _ref.className,
     style = _ref.style,
     children = _ref.children,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$4);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$3);
   var isMobile = useIsMobile();
   var _useState = React.useState(function () {
       return isMobile ? false : openProp != null ? openProp : defaultOpen;
@@ -4110,6 +4130,8 @@ var SidebarProvider = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }, [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]);
   return React.createElement(SidebarContext.Provider, {
     value: contextValue
+  }, React.createElement(TooltipProvider, {
+    delayDuration: 0
   }, React.createElement("div", _extends({
     style: _extends({
       '--sidebar-width': SIDEBAR_WIDTH,
@@ -4118,7 +4140,7 @@ var SidebarProvider = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     }, style),
     className: classNames('display-flex w-100 background-color-secondary', className),
     ref: ref
-  }, props), children));
+  }, props), children)));
 });
 SidebarProvider.displayName = 'SidebarProvider';
 var Sidebar = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
@@ -4149,7 +4171,7 @@ var Sidebar = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
   }
   if (collapsible === 'none') {
     return React.createElement("div", _extends({
-      className: classNames('display-flex h-100 font-size-xs flex-direction-column background-color-secondary font-color-base', className),
+      className: classNames('group display-flex h-100 font-size-xs flex-direction-column background-color-secondary font-color-base', className),
       style: {
         width: 'var(--sidebar-width)'
       },
@@ -4168,7 +4190,8 @@ var Sidebar = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
     position: "relative",
     "data-state": state,
     "data-collapsible": collapsible,
-    "data-side": side
+    "data-side": side,
+    className: "group"
   }, React.createElement("div", {
     style: {
       animationTimingFunction: 'var(--sidebar-transition-timing, linear)',
@@ -4176,14 +4199,14 @@ var Sidebar = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
       transitionDuration: 'var(--sidebar-transition-duration, 200ms)',
       animationDuration: 'var(--sidebar-transition-duration, 200ms)',
       transitionProperty: 'width',
-      width: state === 'collapsed' ? '0' : 'var(--sidebar-width)',
+      width: state === 'collapsed' && collapsible === 'icon' ? 'var(--sidebar-width-icon)' : state === 'collapsed' ? '0' : 'var(--sidebar-width)',
       height: '100svh'
     },
     className: classNames('position-relative', className)
   }), React.createElement("div", _extends({
     className: classNames('position-absolute display-none display-flex-desktop ', className),
     style: {
-      left: state === 'expanded' ? '0' : 'calc(var(--sidebar-width)*-1)',
+      left: state === 'expanded' || collapsible === 'icon' ? '0' : 'calc(var(--sidebar-width)*-1)',
       top: '0',
       bottom: '0',
       zIndex: 'var(--size-z-index-drawer)',
@@ -4192,7 +4215,7 @@ var Sidebar = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
       transitionDuration: 'var(--sidebar-transition-duration, 200ms)',
       animationDuration: 'var(--sidebar-transition-duration, 200ms)',
       transitionProperty: 'left, right, width',
-      width: 'var(--sidebar-width)',
+      width: state === 'collapsed' && collapsible === 'icon' ? 'var(--sidebar-width-icon)' : 'var(--sidebar-width)',
       height: '100svh'
     }
   }, props), React.createElement("div", {
@@ -4237,7 +4260,7 @@ var SidebarHeader = /*#__PURE__*/React.forwardRef(function (_ref5, ref) {
   return React.createElement("div", _extends({
     ref: ref,
     "data-sidebar": "header",
-    className: classNames('display-flex g-sm p-v-md p-h-md p-right-0-desktop', className)
+    className: classNames('display-flex g-sm p-v-md p-h-md p-right-0-desktop overflow-hidden', className)
   }, props));
 });
 SidebarHeader.displayName = 'SidebarHeader';
@@ -4247,7 +4270,7 @@ var SidebarFooter = /*#__PURE__*/React.forwardRef(function (_ref6, ref) {
   return React.createElement("div", _extends({
     ref: ref,
     "data-sidebar": "footer",
-    className: classNames('display-flex g-sm  p-v-md p-h-md p-right-0-desktop', className)
+    className: classNames('display-flex g-sm  p-v-md p-h-md p-right-0-desktop overflow-hidden', className)
   }, props));
 });
 SidebarFooter.displayName = 'SidebarFooter';
@@ -4257,7 +4280,11 @@ var SidebarContent = /*#__PURE__*/React.forwardRef(function (_ref7, ref) {
   return React.createElement("div", _extends({
     ref: ref,
     "data-sidebar": "content",
-    className: classNames('display-flex flex-direction-column g-xl minh-0 flex-auto overflow-auto', className)
+    className: classNames('display-flex flex-direction-column g-xl minh-0 flex-auto', className),
+    style: {
+      overflowX: 'hidden',
+      overflowY: 'auto'
+    }
   }, props));
 });
 SidebarContent.displayName = 'SidebarContent';
@@ -4280,18 +4307,25 @@ var SidebarMenuItem = /*#__PURE__*/React.forwardRef(function (_ref9, ref) {
   return React.createElement("li", _extends({
     ref: ref,
     "data-sidebar": "menu-item",
-    className: classNames('font-size-sm position-relative', className)
+    className: classNames('font-size-sm position-relative', className),
+    style: {
+      whiteSpace: 'nowrap'
+    }
   }, props));
 });
 SidebarMenuItem.displayName = 'SidebarMenuItem';
-var SidebarMenuButton = /*#__PURE__*/React.forwardRef(function (_ref10, ref) {
-  var _ref10$asChild = _ref10.asChild,
-    asChild = _ref10$asChild === void 0 ? false : _ref10$asChild,
-    _ref10$isActive = _ref10.isActive,
-    isActive = _ref10$isActive === void 0 ? false : _ref10$isActive,
-    className = _ref10.className,
-    props = _objectWithoutPropertiesLoose(_ref10, _excluded10);
+var SidebarMenuButton = /*#__PURE__*/React.forwardRef(function (_ref0, ref) {
+  var _ref0$asChild = _ref0.asChild,
+    asChild = _ref0$asChild === void 0 ? false : _ref0$asChild,
+    _ref0$isActive = _ref0.isActive,
+    isActive = _ref0$isActive === void 0 ? false : _ref0$isActive,
+    tooltip = _ref0.tooltip,
+    className = _ref0.className,
+    props = _objectWithoutPropertiesLoose(_ref0, _excluded0);
   var Comp = asChild ? reactSlot.Slot : 'button';
+  var _useSidebar3 = useSidebar(),
+    isMobile = _useSidebar3.isMobile,
+    state = _useSidebar3.state;
   var button = React.createElement(Comp, _extends({
     ref: ref,
     "data-sidebar": "menu-button",
@@ -4301,32 +4335,46 @@ var SidebarMenuButton = /*#__PURE__*/React.forwardRef(function (_ref10, ref) {
       'background-color-transparent': !isActive
     }, className)
   }, props), props.children);
-  return button;
+  if (!tooltip) {
+    return button;
+  }
+  if (typeof tooltip === 'string') {
+    tooltip = {
+      children: tooltip
+    };
+  }
+  return React.createElement(Tooltip, null, React.createElement(TooltipTrigger, {
+    asChild: true
+  }, button), React.createElement(TooltipContent, _extends({
+    side: "right",
+    align: "center",
+    hidden: state !== 'collapsed' || isMobile
+  }, tooltip)));
 });
 SidebarMenuButton.displayName = 'SidebarMenuButton';
-var SidebarGroup = /*#__PURE__*/React.forwardRef(function (_ref11, ref) {
-  var className = _ref11.className,
-    props = _objectWithoutPropertiesLoose(_ref11, _excluded11);
+var SidebarGroup = /*#__PURE__*/React.forwardRef(function (_ref1, ref) {
+  var className = _ref1.className,
+    props = _objectWithoutPropertiesLoose(_ref1, _excluded1);
   return React.createElement("div", _extends({
     ref: ref,
     "data-sidebar": "group",
-    className: classNames('position-relative p-h-md p-right-0-desktop display-flex w-100 minw-0 flex-direction-column', className)
+    className: classNames('position-relative p-h-md p-right-0-desktop display-flex w-100 minw-0 flex-direction-column ', className)
   }, props));
 });
 SidebarGroup.displayName = 'SidebarGroup';
-var SidebarGroupLabel = /*#__PURE__*/React.forwardRef(function (_ref12, ref) {
-  var className = _ref12.className,
-    props = _objectWithoutPropertiesLoose(_ref12, _excluded12);
+var SidebarGroupLabel = /*#__PURE__*/React.forwardRef(function (_ref10, ref) {
+  var className = _ref10.className,
+    props = _objectWithoutPropertiesLoose(_ref10, _excluded10);
   return React.createElement("div", _extends({
     ref: ref,
     "data-sidebar": "group-label",
-    className: classNames('display-flex h-3xl align-items-center br-sm p-h-sm font-color-secondary font-size-xs font-weight-medium outline-none', className)
+    className: classNames('group-data-collapsible-icon-hidden display-flex h-3xl align-items-center br-sm p-h-sm font-color-secondary font-size-xs font-weight-medium outline-none', className)
   }, props));
 });
 SidebarGroupLabel.displayName = 'SidebarGroupLabel';
-var SidebarMenuSub = /*#__PURE__*/React.forwardRef(function (_ref13, ref) {
-  var className = _ref13.className,
-    props = _objectWithoutPropertiesLoose(_ref13, _excluded13);
+var SidebarMenuSub = /*#__PURE__*/React.forwardRef(function (_ref11, ref) {
+  var className = _ref11.className,
+    props = _objectWithoutPropertiesLoose(_ref11, _excluded11);
   return React.createElement("ul", _extends({
     ref: ref,
     "data-sidebar": "menu-sub",
@@ -4337,19 +4385,19 @@ var SidebarMenuSub = /*#__PURE__*/React.forwardRef(function (_ref13, ref) {
   }, props));
 });
 SidebarMenuSub.displayName = 'SidebarMenuSub';
-var SidebarMenuSubItem = /*#__PURE__*/React.forwardRef(function (_ref14, ref) {
-  var props = _extends({}, (_objectDestructuringEmpty(_ref14), _ref14));
+var SidebarMenuSubItem = /*#__PURE__*/React.forwardRef(function (_ref12, ref) {
+  var props = _extends({}, (_objectDestructuringEmpty(_ref12), _ref12));
   return React.createElement("li", _extends({
     ref: ref
   }, props));
 });
 SidebarMenuSubItem.displayName = 'SidebarMenuSubItem';
-var SidebarMenuSubButton = /*#__PURE__*/React.forwardRef(function (_ref15, ref) {
-  var _ref15$asChild = _ref15.asChild,
-    asChild = _ref15$asChild === void 0 ? false : _ref15$asChild,
-    isActive = _ref15.isActive,
-    className = _ref15.className,
-    props = _objectWithoutPropertiesLoose(_ref15, _excluded14);
+var SidebarMenuSubButton = /*#__PURE__*/React.forwardRef(function (_ref13, ref) {
+  var _ref13$asChild = _ref13.asChild,
+    asChild = _ref13$asChild === void 0 ? false : _ref13$asChild,
+    isActive = _ref13.isActive,
+    className = _ref13.className,
+    props = _objectWithoutPropertiesLoose(_ref13, _excluded12);
   var Comp = asChild ? reactSlot.Slot : 'a';
   return React.createElement(Comp, _extends({
     ref: ref,
@@ -4362,11 +4410,11 @@ var SidebarMenuSubButton = /*#__PURE__*/React.forwardRef(function (_ref15, ref)
   }, props));
 });
 SidebarMenuSubButton.displayName = 'SidebarMenuSubButton';
-var SidebarMenuAction = /*#__PURE__*/React.forwardRef(function (_ref16, ref) {
-  var className = _ref16.className,
-    _ref16$asChild = _ref16.asChild,
-    asChild = _ref16$asChild === void 0 ? false : _ref16$asChild,
-    props = _objectWithoutPropertiesLoose(_ref16, _excluded15);
+var SidebarMenuAction = /*#__PURE__*/React.forwardRef(function (_ref14, ref) {
+  var className = _ref14.className,
+    _ref14$asChild = _ref14.asChild,
+    asChild = _ref14$asChild === void 0 ? false : _ref14$asChild,
+    props = _objectWithoutPropertiesLoose(_ref14, _excluded13);
   var Comp = asChild ? reactSlot.Slot : 'button';
   return React.createElement(Comp, _extends({
     ref: ref,
@@ -4379,12 +4427,12 @@ var SidebarMenuAction = /*#__PURE__*/React.forwardRef(function (_ref16, ref) {
   }, props));
 });
 SidebarMenuAction.displayName = 'SidebarMenuAction';
-var SidebarRail = /*#__PURE__*/React.forwardRef(function (_ref17, ref) {
-  var className = _ref17.className,
-    props = _objectWithoutPropertiesLoose(_ref17, _excluded16);
-  var _useSidebar3 = useSidebar(),
-    open = _useSidebar3.open,
-    toggleSidebar = _useSidebar3.toggleSidebar;
+var SidebarRail = /*#__PURE__*/React.forwardRef(function (_ref15, ref) {
+  var className = _ref15.className,
+    props = _objectWithoutPropertiesLoose(_ref15, _excluded14);
+  var _useSidebar4 = useSidebar(),
+    open = _useSidebar4.open,
+    toggleSidebar = _useSidebar4.toggleSidebar;
   var caretIcon = open ? 'caret-sm-left' : 'caret-sm-right';
   return React.createElement("button", _extends({
     ref: ref,
@@ -4424,13 +4472,13 @@ var SidebarRail = /*#__PURE__*/React.forwardRef(function (_ref17, ref) {
   })));
 });
 SidebarRail.displayName = 'SidebarRail';
-var SidebarMenuBadge = /*#__PURE__*/React.forwardRef(function (_ref18, ref) {
-  var className = _ref18.className,
-    props = _objectWithoutPropertiesLoose(_ref18, _excluded17);
+var SidebarMenuBadge = /*#__PURE__*/React.forwardRef(function (_ref16, ref) {
+  var className = _ref16.className,
+    props = _objectWithoutPropertiesLoose(_ref16, _excluded15);
   return React.createElement("div", _extends({
     ref: ref,
     "data-sidebar": "menu-badge",
-    className: classNames('position-absolute font-size-xs cursor-default lh-none p-xs font-color-base minw-0 align-items-center bw-0 br-sm outline-none background-color-transparent', className),
+    className: classNames('group-data-collapsible-icon-hidden position-absolute font-size-xs cursor-default lh-none p-xs font-color-base minw-0 align-items-center bw-0 br-sm outline-none background-color-transparent', className),
     style: {
       top: 'var(--size-spacing-sm)',
       right: 'var(--size-spacing-xs)'
@@ -4439,13 +4487,13 @@ var SidebarMenuBadge = /*#__PURE__*/React.forwardRef(function (_ref18, ref) {
 });
 SidebarMenuBadge.displayName = 'SidebarMenuBadge';
 
-var styles$7 = {"container":"Table-module_container__BsXT7","loading-mask":"Table-module_loading-mask__qoRPG","scroll-container":"Table-module_scroll-container__5WV5T","table":"Table-module_table__-ZPCW","auto":"Table-module_auto__1R8wm","fixed":"Table-module_fixed__T-EXg","borderless":"Table-module_borderless__BbsqE","scrollable":"Table-module_scrollable__Apjbs","scrollable-x":"Table-module_scrollable-x__mguJX","scrollable-y":"Table-module_scrollable-y__292qB","table-bordered":"Table-module_table-bordered__wM9u-","full-height":"Table-module_full-height__MlrSg"};
+var styles$6 = {"container":"Table-module_container__BsXT7","loading-mask":"Table-module_loading-mask__qoRPG","scroll-container":"Table-module_scroll-container__5WV5T","table":"Table-module_table__-ZPCW","auto":"Table-module_auto__1R8wm","fixed":"Table-module_fixed__T-EXg","borderless":"Table-module_borderless__BbsqE","scrollable":"Table-module_scrollable__Apjbs","scrollable-x":"Table-module_scrollable-x__mguJX","scrollable-y":"Table-module_scrollable-y__292qB","table-bordered":"Table-module_table-bordered__wM9u-","full-height":"Table-module_full-height__MlrSg"};
 
-var styles$6 = {"table-body":"TableBody-module_table-body__Y5WbD","striped":"TableBody-module_striped__5MlEr","hover":"TableBody-module_hover__2CRgY"};
+var styles$5 = {"table-body":"TableBody-module_table-body__Y5WbD","striped":"TableBody-module_striped__5MlEr","hover":"TableBody-module_hover__2CRgY"};
 
-var styles$5 = {"table-row":"TableRow-module_table-row__-Y9FQ","hoverable":"TableRow-module_hoverable__53-l9"};
+var styles$4 = {"table-row":"TableRow-module_table-row__-Y9FQ","hoverable":"TableRow-module_hoverable__53-l9"};
 
-var styles$4 = {"table-cell":"TableBodyCell-module_table-cell__pKl29","borderless":"TableBodyCell-module_borderless__qwKQA","compact":"TableBodyCell-module_compact__zfdBf","truncated":"TableBodyCell-module_truncated__4YtPF","sticky-column-left":"TableBodyCell-module_sticky-column-left__tKIGW","sticky-column-right":"TableBodyCell-module_sticky-column-right__680hS","sticky-column":"TableBodyCell-module_sticky-column__QpEbV","align-right":"TableBodyCell-module_align-right__j-VqN","align-center":"TableBodyCell-module_align-center__saqzC"};
+var styles$3 = {"table-cell":"TableBodyCell-module_table-cell__pKl29","borderless":"TableBodyCell-module_borderless__qwKQA","compact":"TableBodyCell-module_compact__zfdBf","truncated":"TableBodyCell-module_truncated__4YtPF","sticky-column-left":"TableBodyCell-module_sticky-column-left__tKIGW","sticky-column-right":"TableBodyCell-module_sticky-column-right__680hS","sticky-column":"TableBodyCell-module_sticky-column__QpEbV","align-right":"TableBodyCell-module_align-right__j-VqN","align-center":"TableBodyCell-module_align-center__saqzC"};
 
 var TableBodyCell = function TableBodyCell(_ref) {
   var _classNames;
@@ -4468,7 +4516,7 @@ var TableBodyCell = function TableBodyCell(_ref) {
     _ref$width = _ref.width,
     width = _ref$width === void 0 ? undefined : _ref$width;
   var columnIsSticky = sticky === 'left' || sticky === 'right';
-  var tableCellClasses = classNames(styles$4['table-cell'], (_classNames = {}, _classNames[styles$4.truncated] = truncateOverflow, _classNames[styles$4.compact] = isCompact, _classNames[styles$4.borderless] = isBorderless, _classNames[styles$4['sticky-column']] = columnIsSticky, _classNames[styles$4['sticky-column-left']] = sticky === 'left', _classNames[styles$4['sticky-column-right']] = sticky === 'right', _classNames[styles$4['align-right']] = align === 'right', _classNames[styles$4['align-center']] = align === 'center', _classNames), className);
+  var tableCellClasses = classNames(styles$3['table-cell'], (_classNames = {}, _classNames[styles$3.truncated] = truncateOverflow, _classNames[styles$3.compact] = isCompact, _classNames[styles$3.borderless] = isBorderless, _classNames[styles$3['sticky-column']] = columnIsSticky, _classNames[styles$3['sticky-column-left']] = sticky === 'left', _classNames[styles$3['sticky-column-right']] = sticky === 'right', _classNames[styles$3['align-right']] = align === 'right', _classNames[styles$3['align-center']] = align === 'center', _classNames), className);
   return React.createElement(Box, {
     as: columnIsSticky ? 'th' : 'td',
     className: tableCellClasses,
@@ -4482,7 +4530,7 @@ var TableBodyCell = function TableBodyCell(_ref) {
   }, children === null || typeof children === 'undefined' || children === '' ? emptyCellPlaceholder : children);
 };
 
-var styles$3 = {"table-header-cell":"TableHeaderCell-module_table-header-cell__aufSm","sortable":"TableHeaderCell-module_sortable__qjrkY","borderless":"TableHeaderCell-module_borderless__uos2k","truncated":"TableHeaderCell-module_truncated__wmNfw","compact":"TableHeaderCell-module_compact__ujtrZ","sticky-header":"TableHeaderCell-module_sticky-header__PEP9t","sticky-column-left":"TableHeaderCell-module_sticky-column-left__t8qIz","sticky-column-right":"TableHeaderCell-module_sticky-column-right__6D8-X","sticky-column":"TableHeaderCell-module_sticky-column__g9ybV","align-right":"TableHeaderCell-module_align-right__Qw0YQ","align-center":"TableHeaderCell-module_align-center__1RmCS","heading":"TableHeaderCell-module_heading__fEcYT","sort-icon":"TableHeaderCell-module_sort-icon__SHgic"};
+var styles$2 = {"table-header-cell":"TableHeaderCell-module_table-header-cell__aufSm","sortable":"TableHeaderCell-module_sortable__qjrkY","borderless":"TableHeaderCell-module_borderless__uos2k","truncated":"TableHeaderCell-module_truncated__wmNfw","compact":"TableHeaderCell-module_compact__ujtrZ","sticky-header":"TableHeaderCell-module_sticky-header__PEP9t","sticky-column-left":"TableHeaderCell-module_sticky-column-left__t8qIz","sticky-column-right":"TableHeaderCell-module_sticky-column-right__6D8-X","sticky-column":"TableHeaderCell-module_sticky-column__g9ybV","align-right":"TableHeaderCell-module_align-right__Qw0YQ","align-center":"TableHeaderCell-module_align-center__1RmCS","heading":"TableHeaderCell-module_heading__fEcYT","sort-icon":"TableHeaderCell-module_sort-icon__SHgic"};
 
 // eslint-disable-line import/prefer-default-export
 var TableHeaderCell = function TableHeaderCell(_ref) {
@@ -4541,7 +4589,7 @@ var TableHeaderCell = function TableHeaderCell(_ref) {
       });
     };
     return React.createElement("span", {
-      className: styles$3['sort-icon']
+      className: styles$2['sort-icon']
     }, renderArrows());
   };
   var handleKeyPress = function handleKeyPress(event) {
@@ -4562,7 +4610,7 @@ var TableHeaderCell = function TableHeaderCell(_ref) {
     });
     onSort(eventWithKey);
   };
-  var tableHeaderClasses = classNames(styles$3['table-header-cell'], (_classNames = {}, _classNames[styles$3.sortable] = isSortable, _classNames[styles$3.compact] = isCompact, _classNames[styles$3.truncated] = truncateOverflow, _classNames[styles$3.borderless] = isBorderless, _classNames[styles$3['sticky-header']] = hasStickyHeader, _classNames[styles$3['sticky-column']] = sticky === 'left' || sticky === 'right', _classNames[styles$3['sticky-column-left']] = sticky === 'left', _classNames[styles$3['sticky-column-right']] = sticky === 'right', _classNames[styles$3['align-right']] = align === 'right', _classNames[styles$3['align-center']] = align === 'center', _classNames), className);
+  var tableHeaderClasses = classNames(styles$2['table-header-cell'], (_classNames = {}, _classNames[styles$2.sortable] = isSortable, _classNames[styles$2.compact] = isCompact, _classNames[styles$2.truncated] = truncateOverflow, _classNames[styles$2.borderless] = isBorderless, _classNames[styles$2['sticky-header']] = hasStickyHeader, _classNames[styles$2['sticky-column']] = sticky === 'left' || sticky === 'right', _classNames[styles$2['sticky-column-left']] = sticky === 'left', _classNames[styles$2['sticky-column-right']] = sticky === 'right', _classNames[styles$2['align-right']] = align === 'right', _classNames[styles$2['align-center']] = align === 'center', _classNames), className);
   return React.createElement(Box, {
     as: "th",
     display: "table-cell",
@@ -4574,7 +4622,7 @@ var TableHeaderCell = function TableHeaderCell(_ref) {
     onKeyDown: handleKeyPress,
     scope: "col"
   }, React.createElement("div", {
-    className: styles$3.heading
+    className: styles$2.heading
   }, column.heading, isSortable && renderIcon()));
 };
 
@@ -4607,7 +4655,7 @@ var TableRow = function TableRow(_ref) {
     rowIndex = _ref$rowIndex === void 0 ? undefined : _ref$rowIndex,
     _ref$truncateOverflow = _ref.truncateOverflow,
     truncateOverflow = _ref$truncateOverflow === void 0 ? false : _ref$truncateOverflow;
-  var tableRowClasses = classNames(styles$5['table-row'], (_classNames = {}, _classNames[styles$5.hoverable] = isHoverable, _classNames), className);
+  var tableRowClasses = classNames(styles$4['table-row'], (_classNames = {}, _classNames[styles$4.hoverable] = isHoverable, _classNames), className);
   var renderCellContent = function renderCellContent(column) {
     if (column.render) {
       var cellValue = column.dataKey && row ? row[column.dataKey] : undefined;
@@ -4676,7 +4724,7 @@ var TableBody = function TableBody(_ref) {
     isStriped = _ref$isStriped === void 0 ? false : _ref$isStriped,
     _ref$truncateOverflow = _ref.truncateOverflow,
     truncateOverflow = _ref$truncateOverflow === void 0 ? false : _ref$truncateOverflow;
-  var tableBodyClasses = classNames(styles$6['table-body'], (_classNames = {}, _classNames[styles$6.striped] = isStriped, _classNames[styles$6.hover] = hoverableRows, _classNames), className);
+  var tableBodyClasses = classNames(styles$5['table-body'], (_classNames = {}, _classNames[styles$5.striped] = isStriped, _classNames[styles$5.hover] = hoverableRows, _classNames), className);
   return React.createElement("tbody", {
     className: tableBodyClasses
   }, rows.map(function (row, rowIndex) {
@@ -4761,13 +4809,13 @@ var Table = function Table(_ref) {
     useFixedTableLayout = _ref$useFixedTableLay === void 0 ? false : _ref$useFixedTableLay,
     _ref$truncateOverflow = _ref.truncateOverflow,
     truncateOverflow = _ref$truncateOverflow === void 0 ? false : _ref$truncateOverflow;
-  var containerClasses = classNames(styles$7.container, (_classNames = {}, _classNames[styles$7['full-height']] = !!(isScrollable != null && isScrollable.y), _classNames));
-  var scrollContainerClasses = classNames(styles$7['scroll-container'], (_classNames2 = {}, _classNames2[styles$7.scrollable] = !!(isScrollable != null && isScrollable.x) || !!(isScrollable != null && isScrollable.y), _classNames2[styles$7['scrollable-x']] = !!(isScrollable != null && isScrollable.x), _classNames2[styles$7['scrollable-y']] = !!(isScrollable != null && isScrollable.y), _classNames2), className);
-  var tableClasses = classNames(styles$7.table, (_classNames3 = {}, _classNames3[styles$7.fixed] = useFixedTableLayout, _classNames3[styles$7.striped] = isStriped, _classNames3[styles$7.borderless] = isBorderless, _classNames3[styles$7.compact] = isCompact, _classNames3));
+  var containerClasses = classNames(styles$6.container, (_classNames = {}, _classNames[styles$6['full-height']] = !!(isScrollable != null && isScrollable.y), _classNames));
+  var scrollContainerClasses = classNames(styles$6['scroll-container'], (_classNames2 = {}, _classNames2[styles$6.scrollable] = !!(isScrollable != null && isScrollable.x) || !!(isScrollable != null && isScrollable.y), _classNames2[styles$6['scrollable-x']] = !!(isScrollable != null && isScrollable.x), _classNames2[styles$6['scrollable-y']] = !!(isScrollable != null && isScrollable.y), _classNames2), className);
+  var tableClasses = classNames(styles$6.table, (_classNames3 = {}, _classNames3[styles$6.fixed] = useFixedTableLayout, _classNames3[styles$6.striped] = isStriped, _classNames3[styles$6.borderless] = isBorderless, _classNames3[styles$6.compact] = isCompact, _classNames3));
   return React.createElement("div", {
     className: containerClasses
   }, isLoading && React.createElement("div", {
-    className: styles$7['loading-mask']
+    className: styles$6['loading-mask']
   }, React.createElement(Spinner, {
     size: "xl"
   })), React.createElement("div", {
@@ -4798,7 +4846,7 @@ var Table = function Table(_ref) {
   }))));
 };
 
-var _excluded$3 = ["children", "defaultTheme", "storageKey"];
+var _excluded$2 = ["children", "defaultTheme", "storageKey"];
 var initialState = {
   theme: 'system',
   setTheme: function setTheme() {
@@ -4812,7 +4860,7 @@ function ThemeProvider(_ref) {
     defaultTheme = _ref$defaultTheme === void 0 ? 'system' : _ref$defaultTheme,
     _ref$storageKey = _ref.storageKey,
     storageKey = _ref$storageKey === void 0 ? 'hyphen-ui-theme' : _ref$storageKey,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$3);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
   var _useState = React.useState(function () {
       return localStorage.getItem(storageKey) || defaultTheme;
     }),
@@ -4842,13 +4890,13 @@ function ThemeProvider(_ref) {
   }), children);
 }
 
-var styles$2 = {"toast-notification":"ToastNotification-module_toast-notification__2xiTW","toast-error":"ToastNotification-module_toast-error__4ArAY","toast-dismiss":"ToastNotification-module_toast-dismiss__xxmkb","toast-notification-enter-top":"ToastNotification-module_toast-notification-enter-top__ZZDCr","toast-notification-exit-top":"ToastNotification-module_toast-notification-exit-top__fOIkZ","toast-notification-enter-bottom":"ToastNotification-module_toast-notification-enter-bottom__So3w7","toast-notification-exit-bottom":"ToastNotification-module_toast-notification-exit-bottom__DDthi","toast-notification-exit-left":"ToastNotification-module_toast-notification-exit-left__Fh1hC","toast-notification-exit-right":"ToastNotification-module_toast-notification-exit-right__C1jQ9","toast-notification-fade-in":"ToastNotification-module_toast-notification-fade-in__JlSGi","toast-notification-fade-out":"ToastNotification-module_toast-notification-fade-out__r6q4Q"};
+var styles$1 = {"toast-notification":"ToastNotification-module_toast-notification__2xiTW","toast-error":"ToastNotification-module_toast-error__4ArAY","toast-dismiss":"ToastNotification-module_toast-dismiss__xxmkb","toast-notification-enter-top":"ToastNotification-module_toast-notification-enter-top__ZZDCr","toast-notification-exit-top":"ToastNotification-module_toast-notification-exit-top__fOIkZ","toast-notification-enter-bottom":"ToastNotification-module_toast-notification-enter-bottom__So3w7","toast-notification-exit-bottom":"ToastNotification-module_toast-notification-exit-bottom__DDthi","toast-notification-exit-left":"ToastNotification-module_toast-notification-exit-left__Fh1hC","toast-notification-exit-right":"ToastNotification-module_toast-notification-exit-right__C1jQ9","toast-notification-fade-in":"ToastNotification-module_toast-notification-fade-in__JlSGi","toast-notification-fade-out":"ToastNotification-module_toast-notification-fade-out__r6q4Q"};
 
 var getAnimationClass = function getAnimationClass(position, visible) {
   var verticalPosition = position.includes('top') ? 'top' : 'bottom';
   var horizontalPosition = position.includes('left') ? 'left' : 'right';
   var isCentered = position.includes('center');
-  var _ref = prefersReducedMotion() ? [styles$2['toast-notification-fade-in'], styles$2['toast-notification-fade-out']] : [styles$2["toast-notification-enter-" + verticalPosition], styles$2["toast-notification-exit-" + (isCentered ? verticalPosition : horizontalPosition)]],
+  var _ref = prefersReducedMotion() ? [styles$1['toast-notification-fade-in'], styles$1['toast-notification-fade-out']] : [styles$1["toast-notification-enter-" + verticalPosition], styles$1["toast-notification-exit-" + (isCentered ? verticalPosition : horizontalPosition)]],
     enter = _ref[0],
     exit = _ref[1];
   return visible ? enter : exit;
@@ -4882,7 +4930,7 @@ var renderDismissIcon = function renderDismissIcon(toast, onDismiss) {
   return React.createElement(Box, {
     as: "button",
     borderWidth: "0",
-    className: styles$2['toast-dismiss'],
+    className: styles$1['toast-dismiss'],
     padding: "0 0 0 sm",
     alignItems: "center",
     justifyContent: "center",
@@ -4913,9 +4961,9 @@ var ToastNotification = /*#__PURE__*/React.memo(function (_ref2) {
     }
   }, toast.ariaProps), resolveValue(toast.message, toast));
   var animationClass = toast != null && toast.height ? getAnimationClass(toast.position || position, toast.visible) : undefined;
-  var classes = classNames(toast.className, styles$2['toast-notification'], animationClass, (_classNames = {
+  var classes = classNames(toast.className, styles$1['toast-notification'], animationClass, (_classNames = {
     'toast-notification--not-visible': !toast.visible
-  }, _classNames[styles$2['toast-error']] = toast.type === 'error', _classNames));
+  }, _classNames[styles$1['toast-error']] = toast.type === 'error', _classNames));
   return React.createElement(Box, {
     alignItems: "center",
     maxWidth: "300px",
@@ -5288,7 +5336,7 @@ var useToasts = function useToasts(toastOptions) {
   };
 };
 
-var _excluded$2 = ["children", "containerStyle", "containerClassName", "gutter", "position", "reverseOrder", "toastOptions"];
+var _excluded$1 = ["children", "containerStyle", "containerClassName", "gutter", "position", "reverseOrder", "toastOptions"];
 var createRectRef = function createRectRef(onRect) {
   return function (el) {
     if (el) {
@@ -5349,7 +5397,7 @@ var ToastContainer = function ToastContainer(_ref) {
     _ref$reverseOrder = _ref.reverseOrder,
     reverseOrder = _ref$reverseOrder === void 0 ? false : _ref$reverseOrder,
     toastOptions = _ref.toastOptions,
-    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$2);
+    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$1);
   var _useToasts = useToasts(toastOptions),
     toasts = _useToasts.toasts,
     handlers = _useToasts.handlers;
@@ -5387,41 +5435,21 @@ var ToastContainer = function ToastContainer(_ref) {
   }));
 };
 
-var styles$1 = {"item":"Toggle-module_item__NQ7iu","outline":"Toggle-module_outline__tR6T1"};
+var styles = {"item":"Toggle-module_item__NQ7iu","outline":"Toggle-module_outline__tR6T1"};
 
-var _excluded$1 = ["className", "variant", "children"];
+var _excluded = ["className", "variant", "children"];
 var Toggle = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? 'default' : _ref$variant,
     children = _ref.children,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
   return React.createElement(TogglePrimitive__namespace.Root, _extends({
     ref: ref,
-    className: classNames('br-sm display-flex g-sm p-sm', styles$1.item, variant === 'outline' && styles$1.outline, className)
+    className: classNames('br-sm display-flex g-sm p-sm', styles.item, variant === 'outline' && styles.outline, className)
   }, props), children);
 });
 
-var styles = {"TooltipContent":"Tooltip-module_TooltipContent__wLEZU","tooltip-slideUpAndFade":"Tooltip-module_tooltip-slideUpAndFade__Y05jp","tooltip-slideRightAndFade":"Tooltip-module_tooltip-slideRightAndFade__K04p9","tooltip-slideDownAndFade":"Tooltip-module_tooltip-slideDownAndFade__1wMd-","tooltip-slideLeftAndFade":"Tooltip-module_tooltip-slideLeftAndFade__iQ1fp"};
-
-var _excluded = ["className", "sideOffset"];
-var TooltipProvider = TooltipPrimitive__namespace.Provider;
-var Tooltip = TooltipPrimitive__namespace.Root;
-var TooltipTrigger = TooltipPrimitive__namespace.Trigger;
-var TooltipPortal = TooltipPrimitive__namespace.Portal;
-var TooltipContent = /*#__PURE__*/React__namespace.forwardRef(function (_ref, ref) {
-  var className = _ref.className,
-    _ref$sideOffset = _ref.sideOffset,
-    sideOffset = _ref$sideOffset === void 0 ? 4 : _ref$sideOffset,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded);
-  return React__namespace.createElement(TooltipPrimitive__namespace.Content, _extends({
-    ref: ref,
-    sideOffset: sideOffset,
-    className: classNames(styles.TooltipContent, 'background-color-tooltip font-color-tooltip font-size-xs z-index-popover overflow-hidden br-sm p-h-sm p-v-xs shadow-sm', className)
-  }, props));
-});
-TooltipContent.displayName = TooltipPrimitive__namespace.Content.displayName;
-
 var useWindowSize = function useWindowSize() {
   var _React$useContext = React.useContext(ResponsiveContext),
     innerWidth = _React$useContext.innerWidth,