@hyphen/hyphen-components 7.3.1 → 7.3.2

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

@@ -3899,6 +3899,7 @@ var _excluded$3 = ["defaultOpen", "open", "storageKey", "onOpenChange", "classNa
   _excluded14 = ["className"],
   _excluded15 = ["className"];
 var SIDEBAR_WIDTH = '16rem';
+var SIDEBAR_RIGHT_WIDTH = '24rem';
 var SIDEBAR_WIDTH_ICON = '44px';
 var SIDEBAR_KEYBOARD_SHORTCUT_LEFT = '[';
 var SIDEBAR_KEYBOARD_SHORTCUT_RIGHT = ']';
@@ -4092,7 +4093,7 @@ var SidebarProvider = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
       '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,
       minBlockSize: '100svh'
     }, style),
-    className: classNames('display-flex w-100 background-color-secondary', className),
+    className: classNames('display-flex w-100 background-color-secondary overflow-hidden', className),
     ref: ref
   }, props), children)))));
 });
@@ -4110,6 +4111,7 @@ var Sidebar = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
     state = _useSidebar.state,
     openMobile = _useSidebar.openMobile,
     setOpenMobile = _useSidebar.setOpenMobile;
+  var sidebarWidth = side === 'right' ? SIDEBAR_RIGHT_WIDTH : SIDEBAR_WIDTH;
   if (isMobile) {
     return React.createElement(SidebarSideContext.Provider, {
       value: side
@@ -4131,6 +4133,7 @@ var Sidebar = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
     }, React.createElement("div", _extends({
       className: classNames('group display-flex h-100 font-size-xs flex-direction-column background-color-secondary font-color-base', className),
       style: {
+        '--sidebar-width': sidebarWidth,
         width: 'var(--sidebar-width)'
       },
       ref: ref
@@ -4148,9 +4151,9 @@ var Sidebar = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
     color: "base",
     fontSize: "sm",
     position: "relative",
-    style: side === 'right' && collapsible === 'offcanvas' ? {
-      overflowX: 'hidden'
-    } : undefined,
+    style: {
+      '--sidebar-width': sidebarWidth
+    },
     "data-state": state,
     "data-collapsible": collapsible,
     "data-side": side,
@@ -4428,9 +4431,10 @@ var SidebarRail = /*#__PURE__*/React.forwardRef(function (_ref16, ref) {
       top: '20px',
       bottom: '20px',
       right: side === 'left' ? '-14px' : undefined,
-      left: side === 'right' ? '-14px' : undefined,
+      left: side === 'right' ? '-18px' : undefined,
       width: '10px'
-    }
+    },
+    type: "button"
   }, props), React.createElement(Box, {
     radius: "xl",
     background: "primary",