@dreamcommerce/aurora 3.0.0-53 → 3.0.0-55

package/build/esm/packages/aurora/src/components/loader/loader.js

@@ -1,4 +1,4 @@
-import React__default from 'react';
+import React from 'react';
 import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
 import { cn } from '../../utilities/cn.js';
 import { loaderVariants } from './loader_variants.js';
@@ -8,7 +8,7 @@ var Loader = function Loader(_ref) {
   var className = _ref.className,
     variant = _ref.variant,
     props = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/React__default.createElement("div", _objectSpread2({
+  return /*#__PURE__*/React.createElement("div", _objectSpread2({
     className: cn(loaderVariants({
       variant: variant
     }), className)

package/build/esm/packages/aurora/src/components/message_box/message_box.js

@@ -1,4 +1,4 @@
-import React__default from 'react';
+import React from 'react';
 import { cn } from '../../utilities/cn.js';
 import { Typography } from '../typography/typography.js';
 import { MESSAGE_BOX_ICONS, MESSAGE_BOX_ICON_COLORS, MESSAGE_BOX_VARIANTS } from './message_box_constants.js';
@@ -19,32 +19,32 @@ var MessageBox = function MessageBox(_ref) {
   var Icon = MESSAGE_BOX_ICONS[variant];
   var iconColor = MESSAGE_BOX_ICON_COLORS[variant];
   var canClose = !!onClose;
-  return /*#__PURE__*/React__default.createElement("div", {
+  return /*#__PURE__*/React.createElement("div", {
     className: cn(classnames(fullWidth ? 'aurora-w-full aurora-border-none' : 'aurora-w-[272px] aurora-border aurora-rounded-4', children && !header && !fullWidth && 'aurora-shadow-l'), messageBoxVariants({
       variant: variant
     }), className)
-  }, showIcon ? (/*#__PURE__*/React__default.createElement("div", {
+  }, showIcon ? (/*#__PURE__*/React.createElement("div", {
     className: classnames(children && !fullWidth && 'aurora-h-full aurora-flex aurora-self-start aurora-mt-1')
-  }, /*#__PURE__*/React__default.createElement(Icon, {
+  }, /*#__PURE__*/React.createElement(Icon, {
     className: classnames('aurora-mr-2 aurora-w-4 aurora-h-4', iconColor)
-  }))) : null, /*#__PURE__*/React__default.createElement("div", {
+  }))) : null, /*#__PURE__*/React.createElement("div", {
     className: "aurora-flex aurora-justify-between aurora-items-center aurora-w-full aurora-max-w-7xl"
-  }, /*#__PURE__*/React__default.createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     className: "aurora-flex aurora-max-w-full aurora-w-full"
-  }, header && (/*#__PURE__*/React__default.createElement("div", {
+  }, header && (/*#__PURE__*/React.createElement("div", {
     className: "aurora-flex aurora-items-center"
-  }, /*#__PURE__*/React__default.createElement("h4", {
+  }, /*#__PURE__*/React.createElement("h4", {
     className: "aurora-text-s aurora-font-semibold aurora-text"
-  }, header))), /*#__PURE__*/React__default.createElement(Typography, {
+  }, header))), /*#__PURE__*/React.createElement(Typography, {
     className: "aurora-w-full",
     size: "xs"
-  }, children)), canClose && (/*#__PURE__*/React__default.createElement("button", {
+  }, children)), canClose && (/*#__PURE__*/React.createElement("button", {
     className: classnames(children && !fullWidth && 'aurora-h-full aurora-flex aurora-self-start aurora-mt-1'),
     onClick: function onClick(e) {
       e.stopPropagation();
       onClose === null || onClose === void 0 ? void 0 : onClose();
     }
-  }, /*#__PURE__*/React__default.createElement(CloseLineIcon, {
+  }, /*#__PURE__*/React.createElement(CloseLineIcon, {
     className: classnames('aurora-mx-2 aurora-w-4 aurora-h-4 aurora-fill')
   })))));
 };

package/build/esm/packages/aurora/src/components/modal/components/modal/modal.js

@@ -1,10 +1,10 @@
-import React__default, { useState, useEffect } from 'react';
+import React, { useState, useEffect } from 'react';
 import { slicedToArray as _slicedToArray } from '../../../../../../../_virtual/_rollupPluginBabelHelpers.js';
 import { cn } from '../../../../utilities/cn.js';
+import { createPortal } from 'react-dom';
 import { MODAL_VISIBILITY_STATE, MODAL_SLIDE_FADE_DURATION, MODAL_WIDTH_VARIANT } from '../../modal_constants.js';
 import { ModalFooter } from './modal_footer.js';
 import { ModalHeader } from './modal_header.js';
-import { createPortal } from 'react-dom';
 import { modalVariants } from '../../modal_variants.js';
 import { useModalsContext } from '../../hooks/use_modals_context.js';
 
@@ -69,19 +69,19 @@ var Modal = function Modal(_ref) {
     hideAllModalsOnClose ? hideAllModals(onCloseAction) : hideModal(name, onCloseAction);
   };
   if (!$modalsManagerContainer) return null;
-  return renderModal ? /*#__PURE__*/createPortal(/*#__PURE__*/React__default.createElement("div", {
+  return renderModal ? /*#__PURE__*/createPortal(/*#__PURE__*/React.createElement("div", {
     "data-modal-id": name,
     "data-test-id": "modal",
     className: cn(modalVariants({
       width: width
     }), visibleClass ? 'aurora-opacity-100 aurora-animate-modal-slide-in' : 'aurora-opacity-0 aurora-animate-modal-slide-out')
-  }, header && /*#__PURE__*/React__default.createElement(ModalHeader, {
+  }, header && /*#__PURE__*/React.createElement(ModalHeader, {
     hasCloseIcon: hasCloseIcon,
     text: header.text,
     onClose: handleCloseModal
-  }), children && /*#__PURE__*/React__default.createElement("div", {
-    className: "aurora-overflow-y-auto"
-  }, children), footer && /*#__PURE__*/React__default.createElement(ModalFooter, {
+  }), children && /*#__PURE__*/React.createElement("div", {
+    className: "aurora-overflow-y-auto custom-scrollbar"
+  }, children), footer && /*#__PURE__*/React.createElement(ModalFooter, {
     text: footer.text
   })), $modalsManagerContainer) : null;
 };

package/build/esm/packages/aurora/src/components/modal/components/modal/modal_close_icon.js

@@ -1,15 +1,15 @@
-import React__default from 'react';
+import React from 'react';
 import { CloseLine } from '../../../../assets/icons/close_line.js';
 
 var ModalCloseIcon = function ModalCloseIcon(_ref) {
   var onClose = _ref.onClose;
-  return /*#__PURE__*/React__default.createElement("button", {
+  return /*#__PURE__*/React.createElement("button", {
     className: "aurora-p-1 aurora-border-0 aurora-bg-none aurora-cursor-pointer aurora-rounded-4 aurora-bg-transparent hover:aurora-bg-hover",
     onClick: function onClick() {
       return onClose();
     },
     "data-test-id": "close-modal"
-  }, /*#__PURE__*/React__default.createElement(CloseLine, null));
+  }, /*#__PURE__*/React.createElement(CloseLine, null));
 };
 
 export { ModalCloseIcon };

package/build/esm/packages/aurora/src/components/modal/components/modal/modal_footer.js

@@ -1,8 +1,8 @@
-import React__default from 'react';
+import React from 'react';
 
 var ModalFooter = function ModalFooter(_ref) {
   var text = _ref.text;
-  return /*#__PURE__*/React__default.createElement("footer", {
+  return /*#__PURE__*/React.createElement("footer", {
     className: 'aurora-flex aurora-items-center aurora-justify-end aurora-gap-3 aurora-mt-5',
     "data-test-id": "modal-footer"
   }, text);

package/build/esm/packages/aurora/src/components/modal/components/modal/modal_header.js

@@ -1,4 +1,4 @@
-import React__default from 'react';
+import React from 'react';
 import { ModalCloseIcon } from './modal_close_icon.js';
 
 var ModalHeader = function ModalHeader(_ref) {
@@ -6,12 +6,12 @@ var ModalHeader = function ModalHeader(_ref) {
     text = _ref$text === void 0 ? '' : _ref$text,
     onClose = _ref.onClose,
     hasCloseIcon = _ref.hasCloseIcon;
-  return /*#__PURE__*/React__default.createElement("header", {
+  return /*#__PURE__*/React.createElement("header", {
     className: 'aurora-flex aurora-items-center aurora-justify-between aurora-mb-5',
     "data-test-id": "modal-header"
-  }, /*#__PURE__*/React__default.createElement("h3", {
+  }, /*#__PURE__*/React.createElement("h3", {
     className: "aurora-font-bold aurora-text-xl"
-  }, text), hasCloseIcon && /*#__PURE__*/React__default.createElement(ModalCloseIcon, {
+  }, text), hasCloseIcon && /*#__PURE__*/React.createElement(ModalCloseIcon, {
     onClose: onClose
   }));
 };

package/build/esm/packages/aurora/src/components/modal/components/modals_wrapper.js

@@ -1,7 +1,7 @@
-import React__default, { useState, useEffect } from 'react';
+import React, { useState, useEffect } from 'react';
 import { slicedToArray as _slicedToArray } from '../../../../../../_virtual/_rollupPluginBabelHelpers.js';
-import { MODALS_WRAPPER_BACKDROP_FADE_DURATION, MODALS_CONTENT_ID } from '../modal_constants.js';
 import { createPortal } from 'react-dom';
+import { MODALS_WRAPPER_BACKDROP_FADE_DURATION, MODALS_CONTENT_ID } from '../modal_constants.js';
 import { useModalsContext } from '../hooks/use_modals_context.js';
 
 var ModalsWrapper = function ModalsWrapper(_ref) {
@@ -31,11 +31,11 @@ var ModalsWrapper = function ModalsWrapper(_ref) {
       return clearTimeout(showWrapperTimeout);
     };
   }, [openedModals]);
-  return /*#__PURE__*/createPortal(/*#__PURE__*/React__default.createElement("div", null, showWrapper && (/*#__PURE__*/React__default.createElement("div", {
+  return /*#__PURE__*/createPortal(/*#__PURE__*/React.createElement("div", null, showWrapper && (/*#__PURE__*/React.createElement("div", {
     className: "aurora-fixed aurora-flex aurora-items-center aurora-justify-center aurora-top-0 aurora-left-0 aurora-w-full aurora-h-full aurora-z-20 aurora-p-4"
-  }, /*#__PURE__*/React__default.createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     className: "aurora-absolute aurora-inset-x-0 aurora-inset-y-0 aurora-bg-inverse aurora-z-10 aurora-transition-opacity aurora-duration-300 aurora-animate-modal-backdrop-fade-in ".concat(visibleClass ? 'aurora-opacity-70' : 'aurora-opacity-0', " js__modal-mask")
-  }), /*#__PURE__*/React__default.createElement("div", {
+  }), /*#__PURE__*/React.createElement("div", {
     id: MODALS_CONTENT_ID,
     className: "aurora-flex aurora-items-center aurora-justify-center aurora-z-30"
   }))), children), document.body);

package/build/esm/packages/aurora/src/components/modal/modal_variants.js

@@ -2,7 +2,7 @@ import { defineProperty as _defineProperty } from '../../../../../_virtual/_roll
 import { cva } from '../../../../../external/class-variance-authority/dist/index.mjs.js';
 import { MODAL_WIDTH_VARIANT } from './modal_constants.js';
 
-var modalVariants = cva('aurora-w-full aurora-absolute aurora-bg aurora-rounded-16 aurora-shadow-xl aurora-p-6 aurora-opacity-0 aurora-transition-all js__modal', {
+var modalVariants = cva('aurora-flex aurora-flex-col aurora-w-full aurora-max-h-[90vh] aurora-absolute aurora-bg aurora-rounded-16 aurora-shadow-xl aurora-p-6 aurora-opacity-0 aurora-transition-all js__modal', {
   variants: {
     width: _defineProperty(_defineProperty(_defineProperty({}, MODAL_WIDTH_VARIANT.s, 'aurora-max-w-[25rem]'), MODAL_WIDTH_VARIANT.m, 'aurora-max-w-[40rem]'), MODAL_WIDTH_VARIANT.l, 'aurora-max-w-[61rem]')
   },

package/build/esm/packages/aurora/src/components/modal/modals_manager.js

@@ -1,4 +1,4 @@
-import React__default, { useMemo } from 'react';
+import React, { useMemo } from 'react';
 import { ModalsManagerContext } from './modal_context.js';
 import { ModalsWrapper } from './components/modals_wrapper.js';
 import useModals from './hooks/use_modals.js';
@@ -26,9 +26,9 @@ var ModalsManager = function ModalsManager(_ref) {
       openedModals: openedModals
     };
   }, [modalsManagerContainerSelector, addModal, updateModal, getModal, showModal, hideModal, hideAllModals, openedModals]);
-  return /*#__PURE__*/React__default.createElement(ModalsManagerContext.Provider, {
+  return /*#__PURE__*/React.createElement(ModalsManagerContext.Provider, {
     value: value
-  }, /*#__PURE__*/React__default.createElement(ModalsWrapper, null, children));
+  }, /*#__PURE__*/React.createElement(ModalsWrapper, null, children));
 };
 
 export { ModalsManager };

package/build/esm/packages/aurora/src/components/popover/components/popover_content.js

@@ -1,7 +1,24 @@
 import React from 'react';
-import * as PopoverPrimitive from '@radix-ui/react-popover';
-import { cn } from '@auroraUtilities/cn';
-export const PopoverContent = React.forwardRef(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (React.createElement(PopoverPrimitive.Portal, null,
-    React.createElement(PopoverPrimitive.Content, { ref: ref, align: align, sideOffset: sideOffset, className: cn('aurora-z-50 w-72 aurora-shadow-m aurora-outline-none data-[state=open]:aurora-animate-in data-[state=closed]:aurora-animate-out data-[state=closed]:aurora-fade-out-0 data-[state=open]:aurora-fade-in-0 data-[side=bottom]:aurora-slide-in-from-top-2 data-[side=left]:aurora-slide-in-from-right-2 data-[side=right]:aurora-slide-in-from-left-2 data-[side=top]:aurora-slide-in-from-bottom-2', className), ...props }))));
-PopoverContent.displayName = PopoverPrimitive.Content.displayName;
-//# sourceMappingURL=popover_content.js.map
+import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../../../../../../_virtual/_rollupPluginBabelHelpers.js';
+import { cn } from '../../../utilities/cn.js';
+import { Portal, Content } from '@radix-ui/react-popover';
+
+var _excluded = ["className", "align", "sideOffset"];
+var PopoverContent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var className = _ref.className,
+    _ref$align = _ref.align,
+    align = _ref$align === void 0 ? 'center' : _ref$align,
+    _ref$sideOffset = _ref.sideOffset,
+    sideOffset = _ref$sideOffset === void 0 ? 4 : _ref$sideOffset,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(Content, _objectSpread2({
+    ref: ref,
+    align: align,
+    sideOffset: sideOffset,
+    className: cn('aurora-z-50 w-72 aurora-shadow-m aurora-outline-none data-[state=open]:aurora-animate-in data-[state=closed]:aurora-animate-out data-[state=closed]:aurora-fade-out-0 data-[state=open]:aurora-fade-in-0 data-[side=bottom]:aurora-slide-in-from-top-2 data-[side=left]:aurora-slide-in-from-right-2 data-[side=right]:aurora-slide-in-from-left-2 data-[side=top]:aurora-slide-in-from-bottom-2', className)
+  }, props)));
+});
+PopoverContent.displayName = Content.displayName;
+
+export { PopoverContent };
+//# sourceMappingURL=popover_content.js.map

package/build/esm/packages/aurora/src/components/popover/components/popover_content.js.map

@@ -1 +1 @@
-{"version":3,"file":"popover_content.js","sourceRoot":"","sources":["../../../../../../../../src/components/popover/components/popover_content.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,gBAAgB,MAAM,yBAAyB,CAAC;AAC5D,OAAO,EAAE,EAAE,EAAE,MAAM,qBAAqB,CAAC;AAEzC,MAAM,CAAC,MAAM,cAAc,GAAG,KAAK,CAAC,UAAU,CAG5C,CAAC,EAAE,SAAS,EAAE,KAAK,GAAG,QAAQ,EAAE,UAAU,GAAG,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CAClE,oBAAC,gBAAgB,CAAC,MAAM;IACpB,oBAAC,gBAAgB,CAAC,OAAO,IACrB,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,EACZ,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,EAAE,CACT,kYAAkY,EAClY,SAAS,CACZ,KACG,KAAK,GACX,CACoB,CAC7B,CAAC,CAAC;AACH,cAAc,CAAC,WAAW,GAAG,gBAAgB,CAAC,OAAO,CAAC,WAAW,CAAC"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/aurora/src/components/segmented_control/components/segmented_control_item.js

@@ -1,4 +1,4 @@
-import React__default from 'react';
+import React from 'react';
 import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../../../../../../_virtual/_rollupPluginBabelHelpers.js';
 import { cn } from '../../../utilities/cn.js';
 import { Item } from '@radix-ui/react-toggle-group';
@@ -6,15 +6,15 @@ import { segmentedControlItemVariants } from './segmented_control_item_variants.
 import { SegmentedControlContext } from '../context/segmented_control_context.js';
 
 var _excluded = ["className", "children", "size", "variant"];
-var SegmentedControlItem = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
+var SegmentedControlItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _context$size, _context$variant;
   var className = _ref.className,
     children = _ref.children,
     size = _ref.size,
     variant = _ref.variant,
     props = _objectWithoutProperties(_ref, _excluded);
-  var context = React__default.useContext(SegmentedControlContext);
-  return /*#__PURE__*/React__default.createElement(Item, _objectSpread2({
+  var context = React.useContext(SegmentedControlContext);
+  return /*#__PURE__*/React.createElement(Item, _objectSpread2({
     ref: ref,
     className: cn("[&:not(:last-child)]:after:aurora-content-[''] focus last:aurora-rounded-r-4 first:aurora-rounded-l-4 [&:not(:last-child)]:after:aurora-absolute [&:not(:last-child)]:after:aurora-block [&:not(:last-child)]:after:aurora-w-px [&:not(:last-child)]:after:aurora-bg-active [&:not(:last-child)]:after:aurora--right-px [&:not(:last-child)]:after:aurora-h-3/6\n                aurora-relative aurora-flex aurora-item aurora-basis-full aurora-items-center aurora-justify-center aurora-gap-2 hover:aurora-bg-active aurora-cursor-pointer aurora-transition-[background-color] aurora-duration-300\n                data-[state=on]:aurora-bg data-[state=on]:aurora-font-semibold\n                data-[state=on]:before:aurora-content-[''] data-[state=on]:before:aurora-block data-[state=on]:before:aurora-absolute data-[state=on]:before:aurora--left-px data-[state=on]:before:aurora--right-px data-[state=on]:before:aurora--top-px data-[state=on]:before:aurora--bottom-px data-[state=on]:before:aurora-border-active data-[state=on]:before:aurora-border data-[state=on]:before:aurora-rounded-4 data-[state=on]:before:aurora-z-10", segmentedControlItemVariants({
       size: (_context$size = context.size) !== null && _context$size !== void 0 ? _context$size : size,

package/build/esm/packages/aurora/src/components/segmented_control/context/segmented_control_context.js

@@ -1,7 +1,7 @@
-import React__default from 'react';
+import React from 'react';
 import { SEGMENTED_CONTROL_SIZE_TYPES, SEGMENTED_CONTROL_VARIANT_TYPES } from '../segmented_control_constants.js';
 
-var SegmentedControlContext = /*#__PURE__*/React__default.createContext({
+var SegmentedControlContext = /*#__PURE__*/React.createContext({
   size: SEGMENTED_CONTROL_SIZE_TYPES.basic,
   variant: SEGMENTED_CONTROL_VARIANT_TYPES.basic
 });

package/build/esm/packages/aurora/src/components/segmented_control/segmented_control.js

@@ -1,4 +1,4 @@
-import React__default from 'react';
+import React from 'react';
 import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
 import { cn } from '../../utilities/cn.js';
 import { Root } from '@radix-ui/react-toggle-group';
@@ -6,7 +6,7 @@ import { SEGMENTED_CONTROL_TYPE } from './segmented_control_constants.js';
 import { SegmentedControlContext } from './context/segmented_control_context.js';
 
 var _excluded = ["className", "size", "variant", "children", "type"];
-var SegmentedControl = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
+var SegmentedControl = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     size = _ref.size,
     variant = _ref.variant,
@@ -14,11 +14,11 @@ var SegmentedControl = /*#__PURE__*/React__default.forwardRef(function (_ref, re
     _ref$type = _ref.type,
     type = _ref$type === void 0 ? SEGMENTED_CONTROL_TYPE.single : _ref$type,
     props = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/React__default.createElement(Root, _objectSpread2({
+  return /*#__PURE__*/React.createElement(Root, _objectSpread2({
     ref: ref,
     className: cn('aurora-w-max aurora-flex aurora-items-center aurora-justify-center aurora-border aurora-rounded-6 aurora-bg-subtle', className),
     type: type
-  }, props), /*#__PURE__*/React__default.createElement(SegmentedControlContext.Provider, {
+  }, props), /*#__PURE__*/React.createElement(SegmentedControlContext.Provider, {
     value: {
       size: size,
       variant: variant,

package/build/esm/packages/aurora/src/components/sidebar/components/persistent_sidebar.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare const PersistentSidebar: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
+    width?: string | undefined;
+    className?: string | undefined;
+}, "ref"> & React.RefAttributes<HTMLDivElement | null>>;

package/build/esm/packages/aurora/src/components/sidebar/components/persistent_sidebar.js

@@ -0,0 +1,37 @@
+import React, { useRef, useImperativeHandle } from 'react';
+import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../../../../../../_virtual/_rollupPluginBabelHelpers.js';
+import { cn } from '../../../utilities/cn.js';
+import { useSidebar } from '../hooks/use_sidebar.js';
+
+var _excluded = ["className", "width", "children"];
+var PersistentSidebar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var className = _ref.className,
+    width = _ref.width,
+    children = _ref.children,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var _useSidebar = useSidebar(),
+    open = _useSidebar.open;
+  var sidebarRef = useRef(null);
+  useImperativeHandle(ref, function () {
+    return sidebarRef.current;
+  });
+  return /*#__PURE__*/React.createElement("aside", _objectSpread2({
+    "aria-expanded": open,
+    ref: sidebarRef,
+    className: cn('aurora-relative aurora-transition-all aurora-duration-200', className),
+    style: {
+      width: open ? width : 0,
+      maxWidth: open ? width : 0,
+      minWidth: open ? width : 0
+    }
+  }, props), /*#__PURE__*/React.createElement("div", {
+    className: cn('aurora-overflow-auto aurora-h-full aurora-w-full', {
+      'aurora-opacity-0': !open,
+      'aurora-opacity-100': open
+    })
+  }, children));
+});
+PersistentSidebar.displayName = 'PersistentSidebar';
+
+export { PersistentSidebar };
+//# sourceMappingURL=persistent_sidebar.js.map

package/build/esm/packages/aurora/src/components/sidebar/components/persistent_sidebar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/aurora/src/components/sidebar/components/sidebar_components_types.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { TSidebarSide } from "../sidebar_types_types";
+export declare type TPersistentSidebarProps = {
+    width?: string;
+    className?: string;
+} & React.HTMLAttributes<HTMLDivElement>;
+export declare type TTemporalSidebar = React.PropsWithoutRef<{
+    width?: string;
+    className?: string;
+    side?: TSidebarSide;
+    container?: HTMLElement;
+    closeOnOutsideClick?: boolean;
+} & React.HTMLAttributes<HTMLDivElement>>;

package/build/esm/packages/aurora/src/components/sidebar/components/sidebar_components_types.js

@@ -0,0 +1,3 @@
+import 'react';
+import '@auroraComponents/sidebar/sidebar_types_types';
+//# sourceMappingURL=sidebar_components_types.js.map

package/build/esm/packages/aurora/src/components/sidebar/components/sidebar_components_types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar_components_types.js","sourceRoot":"","sources":["../../../../../../../../src/components/sidebar/components/sidebar_components_types.ts"],"names":[],"mappings":"AAAA,OAAkB,OAAO,CAAC;AAC1B,OAA6B,+CAA+C,CAAC"}

package/build/esm/packages/aurora/src/components/sidebar/components/sidebar_toggle.d.ts

@@ -1,3 +1,2 @@
-import React from 'react';
-import { TSidebarToggleProps } from "../sidebar_types";
-export declare const SidebarToggle: ({ side }: TSidebarToggleProps) => React.JSX.Element;
+import React, { PropsWithChildren } from 'react';
+export declare const SidebarToggle: ({ children }: PropsWithChildren) => React.JSX.Element;

package/build/esm/packages/aurora/src/components/sidebar/components/sidebar_toggle.js

@@ -1,24 +1,14 @@
 import React from 'react';
-import { useSidebar } from '@auroraComponents/sidebar/hooks/use_sidebar';
-import { cn } from '@auroraUtilities/cn';
-import { CSS_COLOR_TOKENS_VALUES } from '@auroraConstants/css_tokens/css_color_tokens_values';
-import '@auroraComponents/sidebar/sidebar_types';
-import { cva } from 'class-variance-authority';
-import { SIDEBAR_SIDE } from '@auroraComponents/sidebar/sidebar_constants';
-import { ArrowLeftSLineIcon } from '@auroraAssets/icons/arrow_left_s_line_icon';
-const toggleVariants = cva('aurora-border-solid aurora-z-10 aurora-border-subtle aurora-bg aurora-py-1 aurora-absolute aurora-top-11 ', {
-    variants: {
-        side: {
-            [SIDEBAR_SIDE.left]: 'aurora-left-full aurora-rounded-r-2 aurora-rounded-l-0 aurora-border-l-0 aurora-border-r aurora-border-t aurora-border-b',
-            [SIDEBAR_SIDE.right]: 'aurora-right-full aurora-rounded-r-0 aurora-rounded-l-2  aurora-border-r-0 aurora-border-l aurora-border-t aurora-border-b'
-        }
-    }
-});
-export const SidebarToggle = ({ side }) => {
-    const { toggleSidebar, open } = useSidebar();
-    return (React.createElement("button", { className: toggleVariants({ side }), onClick: toggleSidebar },
-        React.createElement(ArrowLeftSLineIcon, { color: CSS_COLOR_TOKENS_VALUES.neutral900, className: cn('aurora-overflow-hidden aurora-pointer aurora-transition-transform aurora-duration-100 aurora-text hover:aurora-scale-125', {
-                'aurora-rotate-180': (side === SIDEBAR_SIDE.right && open) || (side === SIDEBAR_SIDE.left && !open)
-            }) })));
+import { useSidebar } from '../hooks/use_sidebar.js';
+
+var SidebarToggle = function SidebarToggle(_ref) {
+  var children = _ref.children;
+  var _useSidebar = useSidebar(),
+    toggle = _useSidebar.toggle;
+  return /*#__PURE__*/React.createElement("button", {
+    onClick: toggle
+  }, children);
 };
-//# sourceMappingURL=sidebar_toggle.js.map
+
+export { SidebarToggle };
+//# sourceMappingURL=sidebar_toggle.js.map

package/build/esm/packages/aurora/src/components/sidebar/components/sidebar_toggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"sidebar_toggle.js","sourceRoot":"","sources":["../../../../../../../../src/components/sidebar/components/sidebar_toggle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,6CAA6C,CAAC;AACzE,OAAO,EAAE,EAAE,EAAE,MAAM,qBAAqB,CAAC;AACzC,OAAO,EAAE,uBAAuB,EAAE,MAAM,qDAAqD,CAAC;AAC9F,OAAoC,yCAAyC,CAAC;AAC9E,OAAO,EAAE,GAAG,EAAE,MAAM,0BAA0B,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,6CAA6C,CAAC;AAC3E,OAAO,EAAE,kBAAkB,EAAE,MAAM,4CAA4C,CAAC;AAEhF,MAAM,cAAc,GAAG,GAAG,CAAC,2GAA2G,EAAE;IACpI,QAAQ,EAAE;QACN,IAAI,EAAE;YACF,CAAC,YAAY,CAAC,IAAI,CAAC,EACf,0HAA0H;YAC9H,CAAC,YAAY,CAAC,KAAK,CAAC,EAChB,4HAA4H;SACnI;KACJ;CACJ,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,EAAE,IAAI,EAAuB,EAAE,EAAE;IAC3D,MAAM,EAAE,aAAa,EAAE,IAAI,EAAE,GAAG,UAAU,EAAE,CAAC;IAE7C,OAAO,CACH,gCAAQ,SAAS,EAAE,cAAc,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,OAAO,EAAE,aAAa;QAC/D,oBAAC,kBAAkB,IACf,KAAK,EAAE,uBAAuB,CAAC,UAAU,EACzC,SAAS,EAAE,EAAE,CACT,0HAA0H,EAC1H;gBACI,mBAAmB,EAAE,CAAC,IAAI,KAAK,YAAY,CAAC,KAAK,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI,KAAK,YAAY,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC;aACtG,CACJ,GACH,CACG,CACZ,CAAC;AACN,CAAC,CAAC"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/aurora/src/components/sidebar/components/temporal_sidebar.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export declare const TemporalSidebar: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
+    width?: string | undefined;
+    className?: string | undefined;
+    side?: "left" | "right" | undefined;
+    container?: HTMLElement | undefined;
+    closeOnOutsideClick?: boolean | undefined;
+}, "ref"> & React.RefAttributes<HTMLDivElement | null>>;

package/build/esm/packages/aurora/src/components/sidebar/components/temporal_sidebar.js

@@ -0,0 +1,74 @@
+import React, { useRef, useEffect, useImperativeHandle } from 'react';
+import { slicedToArray as _slicedToArray } from '../../../../../../_virtual/_rollupPluginBabelHelpers.js';
+import { cn } from '../../../utilities/cn.js';
+import { SIDEBAR_SIDE } from '../sidebar_constants.js';
+import { useSidebar } from '../hooks/use_sidebar.js';
+import { createPortal } from 'react-dom';
+import { useClickOutside } from '../../../hooks/use_click_outside.js';
+
+var TemporalSidebar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    _ref$container = _ref.container,
+    container = _ref$container === void 0 ? document.body : _ref$container,
+    className = _ref.className,
+    width = _ref.width,
+    _ref$side = _ref.side,
+    side = _ref$side === void 0 ? SIDEBAR_SIDE.left : _ref$side,
+    _ref$closeOnOutsideCl = _ref.closeOnOutsideClick,
+    closeOnOutsideClick = _ref$closeOnOutsideCl === void 0 ? true : _ref$closeOnOutsideCl;
+  var _useSidebar = useSidebar(),
+    open = _useSidebar.open,
+    close = _useSidebar.close;
+  var sidebarRef = useRef(null);
+  var _React$useState = React.useState(!open ? '0' : 'auto'),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    containerWidth = _React$useState2[0],
+    setContainerWidth = _React$useState2[1];
+  useClickOutside({
+    refs: [sidebarRef],
+    callback: function callback() {
+      if (closeOnOutsideClick && open) close();
+    }
+  });
+  useEffect(function () {
+    if (open) setContainerWidth('auto');
+  }, [open]);
+  var handleTransitionEnd = function handleTransitionEnd() {
+    if (!open) setContainerWidth('0');
+  };
+  useEffect(function () {
+    var sidebar = sidebarRef.current;
+    sidebar === null || sidebar === void 0 ? void 0 : sidebar.addEventListener('transitionend', handleTransitionEnd);
+    return function () {
+      sidebar === null || sidebar === void 0 ? void 0 : sidebar.removeEventListener('transitionend', handleTransitionEnd);
+    };
+  }, [open]);
+  useImperativeHandle(ref, function () {
+    return sidebarRef.current;
+  });
+  return /*#__PURE__*/createPortal(/*#__PURE__*/React.createElement("div", {
+    className: cn('aurora-absolute aurora-top-0 aurora-h-full aurora-overflow-hidden', {
+      'aurora-left-0': side === SIDEBAR_SIDE.left,
+      'aurora-right-0': side === SIDEBAR_SIDE.right
+    }),
+    style: {
+      width: containerWidth
+    }
+  }, /*#__PURE__*/React.createElement("aside", {
+    ref: sidebarRef,
+    className: cn(' aurora-w-full aurora-h-full aurora-duration-300 aurora-transition-[transform]', {
+      'aurora-translate-x-0': open && side === SIDEBAR_SIDE.left,
+      '-aurora-translate-x-full': !open && side === SIDEBAR_SIDE.left,
+      'aurora-translate-x-full': !open && side === SIDEBAR_SIDE.right
+    }, className),
+    style: {
+      width: open && width ? width : undefined,
+      maxWidth: open && width ? width : undefined,
+      minWidth: open && width ? width : undefined
+    }
+  }, children)), container);
+});
+TemporalSidebar.displayName = 'TemporalSidebar';
+
+export { TemporalSidebar };
+//# sourceMappingURL=temporal_sidebar.js.map

package/build/esm/packages/aurora/src/components/sidebar/components/temporal_sidebar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/aurora/src/components/sidebar/context/sidebar_context.js

@@ -1,4 +1,6 @@
 import React from 'react';
-import '@auroraComponents/sidebar/context/sidebar_context_types';
-export const SidebarContext = React.createContext(null);
-//# sourceMappingURL=sidebar_context.js.map
+
+var SidebarContext = /*#__PURE__*/React.createContext(null);
+
+export { SidebarContext };
+//# sourceMappingURL=sidebar_context.js.map

package/build/esm/packages/aurora/src/components/sidebar/context/sidebar_context.js.map

@@ -1 +1 @@
-{"version":3,"file":"sidebar_context.js","sourceRoot":"","sources":["../../../../../../../../src/components/sidebar/context/sidebar_context.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAgC,yDAAyD,CAAC;AAE1F,MAAM,CAAC,MAAM,cAAc,GAAG,KAAK,CAAC,aAAa,CAAyB,IAAI,CAAC,CAAC"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/aurora/src/components/sidebar/context/sidebar_context_types.d.ts

@@ -1,12 +1,5 @@
-import React from 'react';
 export declare type TSidebarContext = {
-    toggleSidebar: () => void;
+    toggle: () => void;
+    close: () => void;
     open: boolean;
 };
-export declare type TSidebarProviderProps = {
-    onToggle?: (open: boolean) => void;
-    open?: boolean;
-    className?: string;
-    style?: React.CSSProperties;
-    persistentKey?: string;
-};

package/build/esm/packages/aurora/src/components/sidebar/context/sidebar_context_types.js

@@ -1,2 +1,2 @@
-import 'react';
+export {};
 //# sourceMappingURL=sidebar_context_types.js.map

package/build/esm/packages/aurora/src/components/sidebar/context/sidebar_context_types.js.map

@@ -1 +1 @@
-{"version":3,"file":"sidebar_context_types.js","sourceRoot":"","sources":["../../../../../../../../src/components/sidebar/context/sidebar_context_types.ts"],"names":[],"mappings":"AAAA,OAAkB,OAAO,CAAC"}
+{"version":3,"file":"sidebar_context_types.js","sourceRoot":"","sources":["../../../../../../../../src/components/sidebar/context/sidebar_context_types.ts"],"names":[],"mappings":""}

package/build/esm/packages/aurora/src/components/sidebar/context/sidebar_prvider.d.ts

@@ -1,4 +1,4 @@
 import * as React from 'react';
-import { TSidebarProviderProps } from "./sidebar_context_types";
 import { PropsWithChildren } from 'react';
-export declare const SidebarProvider: ({ onToggle, open: openProp, className, style, children, persistentKey, ...props }: PropsWithChildren<TSidebarProviderProps>) => React.JSX.Element;
+import { TSidebarProps } from "../sidebar_types_types";
+export declare const SidebarProvider: ({ open, defaultOpen, onOpenChange, children, persistentKey, variant }: PropsWithChildren<TSidebarProps>) => React.JSX.Element;