@dreamcommerce/aurora 3.0.0-99 → 3.1.0

package/build/cjs/packages/aurora/src/components/select/components/select_trigger.js

@@ -5,29 +5,32 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var _rollupPluginBabelHelpers = require('../../../../../../_virtual/_rollupPluginBabelHelpers.js');
 var cn = require('../../../utilities/cn.js');
-var SelectPrimitive = require('@radix-ui/react-select');
 var arrow_down_s_fill = require('../../../assets/icons/arrow_down_s_fill.js');
+var SelectPrimitive = require('@radix-ui/react-select');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var _excluded = ["className", "hasError", "children"];
+var _excluded = ["className", "hasError", "children", "clearValueButton"];
 var SelectTrigger = /*#__PURE__*/React__default['default'].forwardRef(function (_ref, ref) {
   var className = _ref.className,
     hasError = _ref.hasError,
     children = _ref.children,
+    clearValueButton = _ref.clearValueButton,
     props = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/React__default['default'].createElement(SelectPrimitive.Trigger, _rollupPluginBabelHelpers.objectSpread2({
     ref: ref,
-    className: cn.cn('aurora-flex aurora-h-10 aurora-w-full aurora-items-center aurora-justify-between aurora-rounded-8 aurora-border aurora-border-input aurora-bg-neutral-0 aurora-px-3 aurora-py-2 aurora-text-s hover:aurora-border-strong focus:focus disabled:aurora-cursor-not-allowed disabled:aurora-bg-subtle disabled:aurora-text-subtle-light disabled:aurora-border-subtle [&>span]:aurora-line-clamp-1 focus:aurora-border-active focus:aurora-border-2 active:aurora-border-active active:aurora-border-2', {
+    className: cn.cn('aurora-flex aurora-h-10 aurora-w-full aurora-items-center aurora-justify-between aurora-rounded-8 aurora-border aurora-border-input aurora-bg-neutral-0 aurora-px-3 aurora-py-2 aurora-text-s hover:aurora-border-strong focus-visible:focus disabled:aurora-cursor-not-allowed disabled:aurora-bg-subtle disabled:aurora-text-subtle-light disabled:aurora-border-subtle [&>span]:aurora-text-ellipsis [&>span]:aurora-whitespace-nowrap [&>span]:aurora-overflow-hidden focus-visible:aurora-border-active -visible:aurora-border-2 data-[state=open]:aurora-border-active data-[state=open]:aurora-border-2', {
       '!aurora-border-danger aurora-border-2': hasError
     }, className)
-  }, props), children, /*#__PURE__*/React__default['default'].createElement(SelectPrimitive.Icon, {
+  }, props), children, /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "aurora-flex aurora-flex-none aurora-items-center"
+  }, clearValueButton, /*#__PURE__*/React__default['default'].createElement(SelectPrimitive.Icon, {
     asChild: true
   }, /*#__PURE__*/React__default['default'].createElement(arrow_down_s_fill.ArrowDownSFillIcon, {
     className: "aurora-h-4 aurora-w-4 aurora-text-inverse-subtle-light"
-  })));
+  }))));
 });
 SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
 

package/build/cjs/packages/aurora/src/components/select/components/select_trigger.js.map

@@ -1 +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;"}
+{"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;"}

package/build/cjs/packages/aurora/src/components/select/hooks/use_prevent_search_blur.js

@@ -0,0 +1,49 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var index = require('../../../../../../external/fast-equals/dist/esm/index.mjs.js');
+
+var BLUR_GUARD_TIMEOUT = 100;
+var usePreventSearchBlur = function usePreventSearchBlur(_ref) {
+  var options = _ref.options,
+    inputRef = _ref.inputRef;
+  // SHOPSVE-1360 (bardzo slaby hack)
+  // Radix w momencie usuniecia z dom aktualnie wybranego itemu przenosi focus na body
+  var blurGuardRef = React.useRef(false);
+  var handleBlur = React.useCallback(function () {
+    var _inputRef$current;
+    if (!blurGuardRef.current) return;
+    (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
+  }, [inputRef]);
+  var optionsRef = React.useRef();
+  var timeoutRef = React.useRef();
+  // Uzycie useLayoutEffect ze wzgledu na to ze itemy na liscie moga sie zmienic po dluzszym czasie po wpisaniu w search
+  // np. moga byc wczytane z serwera
+  // Wiec nie mozemy sie podpiac pod onKeyDown i wtedy ustawiac timeout
+  React.useLayoutEffect(function () {
+    if (optionsRef.current === undefined) {
+      optionsRef.current = options;
+      return;
+    }
+    if (!index.deepEqual(optionsRef.current, options)) {
+      optionsRef.current = options;
+      blurGuardRef.current = true;
+      timeoutRef.current = setTimeout(function () {
+        blurGuardRef.current = false;
+      }, BLUR_GUARD_TIMEOUT);
+    }
+    return function () {
+      return timeoutRef.current && clearTimeout(timeoutRef.current);
+    };
+  }, [options]);
+  return React.useMemo(function () {
+    return {
+      handleBlur: handleBlur
+    };
+  }, [handleBlur]);
+};
+
+exports.usePreventSearchBlur = usePreventSearchBlur;
+//# sourceMappingURL=use_prevent_search_blur.js.map

package/build/cjs/packages/aurora/src/components/{color_picker/components/color_picker_impl/color_picker_impl.js.map → select/hooks/use_prevent_search_blur.js.map}

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA,oBAAoB,wFAA4F;AAChH,sBAAsB,oFAAwF;AAC9G,qBAAqB,0FAA8F;AACnH;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;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA,oBAAoB,8DAAkE;AACtF;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/cjs/packages/aurora/src/components/select/hooks/use_select_value.js

@@ -0,0 +1,39 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var _rollupPluginBabelHelpers = require('../../../../../../_virtual/_rollupPluginBabelHelpers.js');
+var select_utils = require('../select_utils.js');
+
+var useSelectValue = function useSelectValue(_ref) {
+  var value = _ref.value,
+    options = _ref.options;
+  // Przechowanie aktualnie wybranej opcji w razie jakby przy wyszukiwaniu aktualna opcja zniknela z listy options
+  var _useState = React.useState(function () {
+      return select_utils.SelectUtils.findValueInOptions(value, options);
+    }),
+    _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
+    selectedOption = _useState2[0],
+    _setSelectedOption = _useState2[1];
+  var selectedOptionRef = React.useRef(selectedOption);
+  var setSelectedOption = React.useCallback(function (option) {
+    selectedOptionRef.current = option;
+    _setSelectedOption(option);
+  }, []);
+  React.useEffect(function () {
+    var _selectedOptionRef$cu;
+    if (value === ((_selectedOptionRef$cu = selectedOptionRef.current) === null || _selectedOptionRef$cu === void 0 ? void 0 : _selectedOptionRef$cu.value)) return;
+    var option = select_utils.SelectUtils.findValueInOptions(value, options);
+    setSelectedOption(option);
+  }, [options, setSelectedOption, value]);
+  return React.useMemo(function () {
+    return {
+      selectedOption: selectedOption,
+      setSelectedOption: setSelectedOption
+    };
+  }, [selectedOption, setSelectedOption]);
+};
+
+exports.useSelectValue = useSelectValue;
+//# sourceMappingURL=use_select_value.js.map

package/build/cjs/packages/aurora/src/components/select/hooks/use_select_value.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;"}

package/build/cjs/packages/aurora/src/components/select/select.js

@@ -4,21 +4,23 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var _rollupPluginBabelHelpers = require('../../../../../_virtual/_rollupPluginBabelHelpers.js');
+var cn = require('../../utilities/cn.js');
 var SelectPrimitive = require('@radix-ui/react-select');
 var close_circle_fill_icon = require('../../assets/icons/close_circle_fill_icon.js');
 var select_content = require('./components/select_content.js');
 var select_trigger = require('./components/select_trigger.js');
-var select_value = require('./components/select_value.js');
+var use_select_value = require('./hooks/use_select_value.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var _excluded = ["children", "id", "defaultValue", "options", "disabled", "placeholder", "hasSearch", "searchPlaceholder", "hasClearValueButton", "innerAdditionalContent", "hasError", "onValueChange"];
+var _excluded = ["children", "id", "value", "options", "disabled", "placeholder", "hasSearch", "searchPlaceholder", "hasClearValueButton", "innerAdditionalContent", "enableLocalSearch", "localSearchNotFoundContent", "errors", "onValueChange", "onScroll", "onSearch", "onClose", "hasError"];
 var Select = function Select(_ref) {
+  var _selectedOption$value;
   var children = _ref.children,
     id = _ref.id,
-    defaultValue = _ref.defaultValue,
+    value = _ref.value,
     options = _ref.options,
     disabled = _ref.disabled,
     placeholder = _ref.placeholder,
@@ -26,58 +28,75 @@ var Select = function Select(_ref) {
     searchPlaceholder = _ref.searchPlaceholder,
     hasClearValueButton = _ref.hasClearValueButton,
     innerAdditionalContent = _ref.innerAdditionalContent,
-    hasError = _ref.hasError,
+    enableLocalSearch = _ref.enableLocalSearch,
+    localSearchNotFoundContent = _ref.localSearchNotFoundContent,
+    errors = _ref.errors,
     onValueChange = _ref.onValueChange,
+    onScroll = _ref.onScroll,
+    onSearch = _ref.onSearch,
+    onClose = _ref.onClose,
+    hasError = _ref.hasError,
     props = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+  var _useSelectValue = use_select_value.useSelectValue({
+      value: value,
+      options: options
+    }),
+    selectedOption = _useSelectValue.selectedOption,
+    setSelectedOption = _useSelectValue.setSelectedOption;
   var _useState = React.useState(''),
     _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
-    filterTerm = _useState2[0],
-    setFilterTerm = _useState2[1];
-  var _useState3 = React.useState(defaultValue),
-    _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
-    selectedValue = _useState4[0],
-    setSelectedValue = _useState4[1];
-  var clearFilterInputOnClose = function clearFilterInputOnClose(openState) {
-    if (hasSearch && !openState) setFilterTerm('');
+    search = _useState2[0],
+    setSearch = _useState2[1];
+  var handleSearch = function handleSearch(str) {
+    setSearch(str);
+    onSearch === null || onSearch === void 0 ? void 0 : onSearch(str);
+  };
+  var handleChange = function handleChange(val) {
+    var _option$value;
+    var option = val ? options.find(function (opt) {
+      return opt.value === val;
+    }) : undefined;
+    setSelectedOption(option);
+    onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange((_option$value = option === null || option === void 0 ? void 0 : option.value) !== null && _option$value !== void 0 ? _option$value : '');
   };
-  React.useEffect(function () {
-    onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(selectedValue !== null && selectedValue !== void 0 ? selectedValue : '');
-  }, [selectedValue]);
-  var getSelectedLabel = function getSelectedLabel(options, selectedValue) {
-    var _options$find;
-    return ((_options$find = options.find(function (opt) {
-      return opt.value === selectedValue;
-    })) === null || _options$find === void 0 ? void 0 : _options$find.text) || '';
+  var handleOpenChange = function handleOpenChange(open) {
+    if (hasSearch && !open) setSearch('');
+    if (onClose && !open) onClose();
   };
+  var showPlaceholder = !selectedOption;
   return /*#__PURE__*/React__default['default'].createElement(SelectPrimitive.Root, _rollupPluginBabelHelpers.objectSpread2({
-    value: selectedValue,
-    defaultValue: defaultValue,
-    onValueChange: setSelectedValue,
+    value: (_selectedOption$value = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value) !== null && _selectedOption$value !== void 0 ? _selectedOption$value : '',
+    onValueChange: handleChange,
     disabled: disabled,
-    onOpenChange: function onOpenChange(openState) {
-      return clearFilterInputOnClose(openState);
-    }
+    onOpenChange: handleOpenChange
   }, props), /*#__PURE__*/React__default['default'].createElement("div", {
     className: "aurora-relative aurora-flex aurora-items-center aurora-flex-col"
   }, /*#__PURE__*/React__default['default'].createElement(select_trigger.SelectTrigger, {
     id: id,
-    hasError: hasError
-  }, /*#__PURE__*/React__default['default'].createElement(select_value.SelectValue, {
-    placeholder: placeholder
-  }, selectedValue ? getSelectedLabel(options, selectedValue) : placeholder !== null && placeholder !== void 0 ? placeholder : '')), selectedValue && hasClearValueButton && (/*#__PURE__*/React__default['default'].createElement("div", {
-    className: "aurora-absolute aurora-top-3 aurora-right-8 aurora-z-10",
-    onClick: function onClick() {
-      return setSelectedValue('');
-    }
-  }, /*#__PURE__*/React__default['default'].createElement(close_circle_fill_icon.CloseCircleFillIcon, {
-    className: "aurora-h-4 aurora-w-4 aurora-cursor-pointer"
-  })))), /*#__PURE__*/React__default['default'].createElement(select_content.SelectContent, {
+    hasError: hasError || !!(errors !== null && errors !== void 0 && errors.length),
+    clearValueButton: value && hasClearValueButton && onValueChange && (/*#__PURE__*/React__default['default'].createElement("div", {
+      onPointerDown: function onPointerDown(e) {
+        return e.stopPropagation();
+      },
+      onClick: function onClick() {
+        handleChange('');
+      },
+      className: "aurora-w-5 aurora-h-5 aurora-flex aurora-items-center aurora-justify-center"
+    }, /*#__PURE__*/React__default['default'].createElement(close_circle_fill_icon.CloseCircleFillIcon, {
+      className: "aurora-h-4 aurora-w-4 aurora-cursor-pointer"
+    })))
+  }, /*#__PURE__*/React__default['default'].createElement("span", {
+    className: cn.cn('aurora-pointer-events-none aurora-select-none', showPlaceholder && 'aurora-text-subtle')
+  }, !showPlaceholder ? selectedOption.text : placeholder))), /*#__PURE__*/React__default['default'].createElement(select_content.SelectContent, {
     options: options,
     hasSearch: hasSearch,
     searchPlaceholder: searchPlaceholder,
     innerAdditionalContent: innerAdditionalContent,
-    filterTerm: filterTerm,
-    setFilterTerm: setFilterTerm
+    search: search,
+    onSearch: handleSearch,
+    onScroll: onScroll,
+    enableLocalSearch: enableLocalSearch,
+    localSearchNotFoundContent: localSearchNotFoundContent
   }));
 };
 Select.displayName = SelectPrimitive.Root.displayName;

package/build/cjs/packages/aurora/src/components/select/select.js.map

@@ -1 +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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"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;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/cjs/packages/aurora/src/components/select/select_utils.js

@@ -0,0 +1,42 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../../../../_virtual/_rollupPluginBabelHelpers.js');
+
+var _SelectUtils;
+var SelectUtils = /*#__PURE__*/_rollupPluginBabelHelpers.createClass(function SelectUtils() {
+  _rollupPluginBabelHelpers.classCallCheck(this, SelectUtils);
+});
+_SelectUtils = SelectUtils;
+_rollupPluginBabelHelpers.defineProperty(SelectUtils, "localSearchIsOptionVisible", function (option, search) {
+  var normalizePolish = function normalizePolish(str) {
+    return str.normalize('NFD').replace(/[\u0300-\u036f]/g, '').replace(/[\u0141-\u0142]/g, 'l').toLowerCase();
+  };
+  return normalizePolish(option.text).includes(normalizePolish(search));
+});
+_rollupPluginBabelHelpers.defineProperty(SelectUtils, "localSearchIsHeaderVisible", function (search, options, index) {
+  var visible = false;
+  var i = index + 1;
+  while (options[i]) {
+    var curr = options[i];
+    if (curr.isHeader) {
+      break;
+    }
+    if (_SelectUtils.localSearchIsOptionVisible(curr, search)) {
+      visible = true;
+      break;
+    }
+    i++;
+  }
+  return visible;
+});
+_rollupPluginBabelHelpers.defineProperty(SelectUtils, "findValueInOptions", function (value, options) {
+  if (!value) return undefined;
+  return options.find(function (opt) {
+    return opt.value === value;
+  });
+});
+
+exports.SelectUtils = SelectUtils;
+//# sourceMappingURL=select_utils.js.map

package/build/cjs/packages/aurora/src/components/select/select_utils.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;"}

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

@@ -5,37 +5,57 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var _rollupPluginBabelHelpers = require('../../../../../../_virtual/_rollupPluginBabelHelpers.js');
 var cn = require('../../../utilities/cn.js');
+var use_click_outside = require('../../../hooks/use_click_outside.js');
 var use_sidebar = require('../hooks/use_sidebar.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var _excluded = ["className", "width", "children", "TriggerButton", "side"];
+var _excluded = ["className", "width", "children", "TriggerButton", "side", "onScroll", "onClickOutside"];
 var PersistentSidebar = /*#__PURE__*/React__default['default'].forwardRef(function (_ref, ref) {
   var className = _ref.className,
     width = _ref.width,
     children = _ref.children,
     TriggerButton = _ref.TriggerButton,
     side = _ref.side,
+    onScroll = _ref.onScroll,
+    onClickOutside = _ref.onClickOutside,
     props = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
   var _useSidebar = use_sidebar.useSidebar(),
-    open = _useSidebar.open;
+    open = _useSidebar.open,
+    toggle = _useSidebar.toggle,
+    close = _useSidebar.close;
   var sidebarRef = React.useRef(null);
+  var _ref2 = onClickOutside !== null && onClickOutside !== void 0 ? onClickOutside : {},
+    config = _ref2.config,
+    onClickOutsideCallback = _ref2.callback;
   React.useImperativeHandle(ref, function () {
     return sidebarRef.current;
   });
+  use_click_outside.useClickOutside({
+    refs: [sidebarRef],
+    callback: function callback() {
+      if (open) onClickOutsideCallback === null || onClickOutsideCallback === void 0 ? void 0 : onClickOutsideCallback({
+        open: open,
+        toggle: toggle,
+        close: close
+      });
+    },
+    config: config
+  });
   return /*#__PURE__*/React__default['default'].createElement("aside", _rollupPluginBabelHelpers.objectSpread2({
     "aria-expanded": open,
-    ref: sidebarRef,
-    className: cn.cn('aurora-relative aurora-transition-all aurora-duration-200', className),
+    className: cn.cn('aurora-relative aurora-transition-all aurora-duration-200'),
     style: {
       width: open ? width : 0,
       maxWidth: open ? width : 0,
       minWidth: open ? width : 0
     }
   }, props), TriggerButton ? TriggerButton : null, /*#__PURE__*/React__default['default'].createElement("div", {
-    className: cn.cn('aurora-overflow-auto aurora-h-full aurora-w-full')
+    onScroll: onScroll,
+    ref: sidebarRef,
+    className: cn.cn('aurora-overflow-auto aurora-h-full aurora-w-full custom-scrollbar', className)
   }, children));
 });
 PersistentSidebar.displayName = 'PersistentSidebar';

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

@@ -1 +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;"}
+{"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;"}

package/build/cjs/packages/aurora/src/components/sidebar/components/sidebar_close_button.js

@@ -0,0 +1,28 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var use_sidebar = require('../hooks/use_sidebar.js');
+var close_line_icon = require('../../../assets/icons/close_line_icon.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var SidebarCloseButton = function SidebarCloseButton(_ref) {
+  var onClose = _ref.onClose;
+  var _useSidebar = use_sidebar.useSidebar(),
+    close = _useSidebar.close;
+  return /*#__PURE__*/React__default['default'].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() {
+      close();
+      onClose === null || onClose === void 0 ? void 0 : onClose();
+    },
+    "data-test-el": "close-sidebar"
+  }, /*#__PURE__*/React__default['default'].createElement(close_line_icon.CloseLineIcon, null));
+};
+
+exports.SidebarCloseButton = SidebarCloseButton;
+//# sourceMappingURL=sidebar_close_button.js.map

package/build/cjs/packages/aurora/src/components/sidebar/components/sidebar_close_button.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;"}

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

@@ -6,14 +6,15 @@ var React = require('react');
 var _rollupPluginBabelHelpers = require('../../../../../../_virtual/_rollupPluginBabelHelpers.js');
 var cn = require('../../../utilities/cn.js');
 var sidebar_constants = require('../sidebar_constants.js');
-var use_sidebar = require('../hooks/use_sidebar.js');
-var reactDom = require('react-dom');
 var use_click_outside = require('../../../hooks/use_click_outside.js');
+var use_sidebar = require('../hooks/use_sidebar.js');
+var ReactDOM = require('react-dom');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
+var _excluded = ["children", "container", "className", "width", "side", "closeOnOutsideClick", "onClickOutside", "TriggerButton", "onScroll"];
 var TemporalSidebar = /*#__PURE__*/React__default['default'].forwardRef(function (_ref, ref) {
   var children = _ref.children,
     _ref$container = _ref.container,
@@ -24,11 +25,15 @@ var TemporalSidebar = /*#__PURE__*/React__default['default'].forwardRef(function
     side = _ref$side === void 0 ? sidebar_constants.SIDEBAR_SIDE.left : _ref$side,
     _ref$closeOnOutsideCl = _ref.closeOnOutsideClick,
     closeOnOutsideClick = _ref$closeOnOutsideCl === void 0 ? true : _ref$closeOnOutsideCl,
-    TriggerButton = _ref.TriggerButton;
+    onClickOutside = _ref.onClickOutside,
+    TriggerButton = _ref.TriggerButton,
+    onScroll = _ref.onScroll,
+    props = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
   var _useSidebar = use_sidebar.useSidebar(),
     open = _useSidebar.open,
     close = _useSidebar.close,
-    defaultOpen = _useSidebar.defaultOpen;
+    defaultOpen = _useSidebar.defaultOpen,
+    toggle = _useSidebar.toggle;
   var sidebarRef = React.useRef(null);
   var _useState = React.useState(!open),
     _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
@@ -44,11 +49,20 @@ var TemporalSidebar = /*#__PURE__*/React__default['default'].forwardRef(function
     if (open && side == sidebar_constants.SIDEBAR_SIDE.right) (_sidebarRef$current6 = sidebarRef.current) === null || _sidebarRef$current6 === void 0 ? void 0 : _sidebarRef$current6.classList.add('aurora-translate-x-0');
     if (!open && side == sidebar_constants.SIDEBAR_SIDE.right) (_sidebarRef$current7 = sidebarRef.current) === null || _sidebarRef$current7 === void 0 ? void 0 : _sidebarRef$current7.classList.add('aurora-translate-x-full');
   };
+  var _ref2 = onClickOutside !== null && onClickOutside !== void 0 ? onClickOutside : {},
+    config = _ref2.config,
+    onClickOutsideCallback = _ref2.callback;
   use_click_outside.useClickOutside({
     refs: [sidebarRef],
     callback: function callback() {
+      if (open) onClickOutsideCallback === null || onClickOutsideCallback === void 0 ? void 0 : onClickOutsideCallback({
+        open: open,
+        toggle: toggle,
+        close: close
+      });
       if (closeOnOutsideClick && open) close();
-    }
+    },
+    config: config
   });
   React.useEffect(function () {
     if (!defaultOpen) return;
@@ -76,8 +90,8 @@ var TemporalSidebar = /*#__PURE__*/React__default['default'].forwardRef(function
     return sidebarRef.current;
   });
   if (destroyed) return null;
-  return /*#__PURE__*/reactDom.createPortal(/*#__PURE__*/React__default['default'].createElement("div", {
-    className: cn.cn('aurora-absolute aurora-z-20 aurora-top-0 aurora-h-full aurora-overflow-hidden', {
+  return /*#__PURE__*/ReactDOM.createPortal(/*#__PURE__*/React__default['default'].createElement("div", _rollupPluginBabelHelpers.objectSpread2({
+    className: cn.cn('aurora-absolute aurora-z-20 aurora-top-0 aurora-h-full', {
       'aurora-left-0': side === sidebar_constants.SIDEBAR_SIDE.left,
       'aurora-right-0': side === sidebar_constants.SIDEBAR_SIDE.right
     }),
@@ -86,9 +100,10 @@ var TemporalSidebar = /*#__PURE__*/React__default['default'].forwardRef(function
       maxWidth: width ? width : 'auto',
       minWidth: width ? width : 'auto'
     }
-  }, TriggerButton ? TriggerButton : null, /*#__PURE__*/React__default['default'].createElement("aside", {
+  }, props), TriggerButton ? TriggerButton : null, /*#__PURE__*/React__default['default'].createElement("aside", {
+    onScroll: onScroll,
     ref: sidebarRef,
-    className: cn.cn(' aurora-w-full aurora-h-full -aurora-translate-x-full aurora-duration-300 aurora-transition-[transform]', {
+    className: cn.cn(' aurora-w-full aurora-h-full -aurora-translate-x-full aurora-duration-300 aurora-transition-[transform] aurora-overflow-auto custom-scrollbar', {
       'aurora-translate-x-full': side === sidebar_constants.SIDEBAR_SIDE.right,
       '-aurora-translate-x-full': side === sidebar_constants.SIDEBAR_SIDE.left
     }, className)

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

@@ -1 +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;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;"}
+{"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;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/cjs/packages/aurora/src/components/stack/stack.js

@@ -5,14 +5,14 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var _rollupPluginBabelHelpers = require('../../../../../_virtual/_rollupPluginBabelHelpers.js');
 var cn = require('../../utilities/cn.js');
-var stack_constants = require('./stack_constants.js');
 var index = require('../../../../../external/class-variance-authority/dist/index.mjs.js');
+var stack_constants = require('./stack_constants.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var _excluded = ["children", "spacing", "className", "direction", "justify", "align", "wrap", "as", "inline", "width", "minWidth", "maxWidth", "height", "minHeight", "maxHeight", "style"];
+var _excluded = ["children", "spacing", "className", "direction", "justify", "align", "wrap", "as", "inline", "width", "minWidth", "maxWidth", "height", "minHeight", "maxHeight", "style", "shrink", "grow"];
 var stackVariants = index.cva('aurora-flex', {
   variants: {
     direction: _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, stack_constants.STACK_DIRECTION_TYPES.row, 'aurora-flex-row'), stack_constants.STACK_DIRECTION_TYPES.column, 'aurora-flex-col'), stack_constants.STACK_DIRECTION_TYPES.rowReverse, 'aurora-flex-row-reverse'), stack_constants.STACK_DIRECTION_TYPES.columnReverse, 'aurora-flex-col-reverse'),
@@ -21,6 +21,14 @@ var stackVariants = index.cva('aurora-flex', {
     justify: _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, stack_constants.STACK_JUSTIFY_CONTENT_TYPES.normal, 'aurora-justify-normal'), stack_constants.STACK_JUSTIFY_CONTENT_TYPES.start, 'aurora-justify-start'), stack_constants.STACK_JUSTIFY_CONTENT_TYPES.end, 'aurora-justify-end'), stack_constants.STACK_JUSTIFY_CONTENT_TYPES.center, 'aurora-justify-center'), stack_constants.STACK_JUSTIFY_CONTENT_TYPES.between, 'aurora-justify-between'), stack_constants.STACK_JUSTIFY_CONTENT_TYPES.around, 'aurora-justify-around'), stack_constants.STACK_JUSTIFY_CONTENT_TYPES.evenly, 'aurora-justify-evenly'), stack_constants.STACK_JUSTIFY_CONTENT_TYPES.stretch, 'aurora-justify-stretch'),
     display: {
       inline: 'aurora-inline-flex'
+    },
+    grow: {
+      0: 'aurora-flex-grow-0',
+      1: 'aurora-flex-grow'
+    },
+    shrink: {
+      0: 'aurora-flex-shrink-0',
+      1: 'aurora-flex-shrink'
     }
   }
 });
@@ -47,6 +55,8 @@ var Stack = /*#__PURE__*/React__default['default'].forwardRef(function (_ref, re
     minHeight = _ref.minHeight,
     maxHeight = _ref.maxHeight,
     style = _ref.style,
+    shrink = _ref.shrink,
+    grow = _ref.grow,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
   var internalRef = React.useRef(null);
   React.useImperativeHandle(ref, function () {
@@ -60,7 +70,9 @@ var Stack = /*#__PURE__*/React__default['default'].forwardRef(function (_ref, re
       justify: justify,
       align: align,
       wrap: wrap,
-      display: display
+      display: display,
+      shrink: shrink,
+      grow: grow
     }), className, _rollupPluginBabelHelpers.defineProperty({}, "aurora-gap-".concat(spacing), !!spacing)),
     style: _rollupPluginBabelHelpers.objectSpread2({
       width: width,

package/build/cjs/packages/aurora/src/components/stack/stack.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,oBAAoB,oEAAwE;AAC5F;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;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,oBAAoB,oEAAwE;AAC5F;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/cjs/packages/aurora/src/components/switch/switch.js

@@ -29,16 +29,16 @@ var Switch = /*#__PURE__*/React__default['default'].forwardRef(function (_ref, r
     name: name,
     value: value,
     ref: ref,
-    className: cn.cn('aurora-inline-flex aurora-items-center aurora-relative aurora-w-11 aurora-h-6 aurora-rounded-full aurora-bg-active hover:aurora-ring-2 hover:aurora-ring-subtle focus:aurora-ring-2 focus:aurora-ring-primary focus:aurora-outline-none focus:aurora-ring-offset aurora-cursor-pointer aurora-transition-all data-[state=checked]:aurora-bg-primary aurora-shrink-0', {
+    className: cn.cn('aurora-inline-flex aurora-items-center aurora-relative aurora-w-[36px] aurora-h-[20px] aurora-rounded-full aurora-bg-active hover:aurora-ring-2 hover:aurora-ring-subtle focus:aurora-ring-2 focus:aurora-ring-primary focus:aurora-outline-none focus:aurora-ring-offset aurora-cursor-pointer aurora-transition-all data-[state=checked]:aurora-bg-primary aurora-shrink-0', {
       'aurora-cursor-not-allowed aurora-pointer-events-none aurora-bg-neutral-300 data-[state=checked]:!aurora-bg-active': disabled,
-      'aurora-ring-danger aurora-ring-2': errors && errors.length > 0
+      'aurora-ring-danger aurora-ring-2': !!(errors !== null && errors !== void 0 && errors.length)
     }, className),
     disabled: disabled,
     defaultChecked: defaultChecked,
     checked: checked,
     onCheckedChange: onCheckedChange
   }, props), /*#__PURE__*/React__default['default'].createElement(SwitchPrimitive.SwitchThumb, {
-    className: cn.cn('aurora-block aurora-w-5 aurora-h-5 aurora-rounded-full aurora-transition-transform', disabled ? 'aurora-bg-subtle' : 'aurora-bg', 'data-[state=checked]:aurora-translate-x-[22px] aurora-translate-x-[2px]')
+    className: cn.cn('aurora-block aurora-w-[16px] aurora-h-[16px] aurora-rounded-full aurora-transition-transform', disabled ? 'aurora-bg-subtle' : 'aurora-bg', 'data-[state=checked]:aurora-translate-x-[18px] aurora-translate-x-[2px]')
   }));
 });
 Switch.displayName = SwitchPrimitive.Root.displayName;

package/build/cjs/packages/aurora/src/components/tabs/components/tabs_trigger.js

@@ -20,7 +20,7 @@ var TabsTrigger = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var context = React.useContext(tabs_context.TabsContext);
   return /*#__PURE__*/React.createElement(TabsPrimitive.Trigger, _rollupPluginBabelHelpers.objectSpread2({
     ref: ref,
-    className: cn.cn("[&:not(:last-child)]:after:aurora-content-[''] focus aurora-rounded-2 [&: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-all aurora-duration-300\n                data-[state=active]:aurora-bg data-[state=active]:aurora-font-semibold\n                data-[state=active]:before:aurora-content-[''] data-[state=active]:before:aurora-block data-[state=active]:before:aurora-absolute data-[state=active]:before:aurora--left-px data-[state=active]:before:aurora--right-px data-[state=active]:before:aurora--top-px data-[state=active]:before:aurora--bottom-px data-[state=active]:before:aurora-border-active data-[state=active]:before:aurora-border data-[state=active]:before:aurora-rounded-4 data-[state=active]:before:aurora-z-10", tabs_variants.tabsVariants({
+    className: cn.cn("[&:not(:last-child)]:after:aurora-content-[''] focus aurora-rounded-2 [&: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-all aurora-duration-300\n                data-[state=active]:aurora-bg data-[state=active]:aurora-font-semibold\n                data-[state=active]:before:aurora-content-[''] data-[state=active]:before:aurora-block data-[state=active]:before:aurora-absolute data-[state=active]:before:aurora--left-px data-[state=active]:before:aurora--right-px data-[state=active]:before:aurora--top-px data-[state=active]:before:aurora--bottom-px data-[state=active]:before:aurora-border-active data-[state=active]:before:aurora-border-2 data-[state=active]:before:aurora-rounded-4 data-[state=active]:before:aurora-z-10", tabs_variants.tabsVariants({
       size: (_context$size = context.size) !== null && _context$size !== void 0 ? _context$size : size,
       variant: (_context$variant = context.variant) !== null && _context$variant !== void 0 ? _context$variant : variant
     }), className),