@dreamcommerce/aurora 3.0.0-232 → 3.0.0-234

package/build/cjs/packages/aurora/src/components/accordion/components/accordion_content.js

@@ -5,16 +5,70 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var _rollupPluginBabelHelpers = require('../../../../../../_virtual/_rollupPluginBabelHelpers.js');
 var AccordionPrimitive = require('@radix-ui/react-accordion');
+var cn = require('../../../utilities/cn.js');
 
-var _excluded = ["className", "children"];
-var AccordionContent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var _excluded = ["className", "children", "forceMount"];
+var AccordionContent = /*#__PURE__*/React__default['default'].forwardRef(function (_ref, forwardedRef) {
   var className = _ref.className,
     children = _ref.children,
+    forceMount = _ref.forceMount,
     props = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/React.createElement(AccordionPrimitive.Content, _rollupPluginBabelHelpers.objectSpread2({
-    ref: ref,
-    className: "aurora-overflow-hidden data-[state=closed]:aurora-animate-accordion-up data-[state=open]:aurora-animate-accordion-down"
-  }, props), children);
+  var contentRef = React__default['default'].useRef(null);
+  var _React$useState = React__default['default'].useState('0px'),
+    _React$useState2 = _rollupPluginBabelHelpers.slicedToArray(_React$useState, 2),
+    height = _React$useState2[0],
+    setHeight = _React$useState2[1];
+  var _React$useState3 = React__default['default'].useState(false),
+    _React$useState4 = _rollupPluginBabelHelpers.slicedToArray(_React$useState3, 2),
+    isOpen = _React$useState4[0],
+    setIsOpen = _React$useState4[1];
+  var localRef = React__default['default'].useRef(null);
+  React.useImperativeHandle(forwardedRef, function () {
+    return localRef.current;
+  }, []);
+  React.useEffect(function () {
+    var element = localRef.current;
+    if (!element) return;
+    var handleStateChange = function handleStateChange() {
+      var isOpenState = element.getAttribute('data-state') === 'open';
+      setIsOpen(isOpenState);
+    };
+    handleStateChange();
+    var observer = new MutationObserver(handleStateChange);
+    observer.observe(element, {
+      attributes: true,
+      attributeFilter: ['data-state']
+    });
+    if (!contentRef.current) return;
+    var resizeObserver = new ResizeObserver(function (entries) {
+      entries.forEach(function (entry) {
+        setHeight("".concat(entry.contentRect.height, "px"));
+      });
+    });
+    resizeObserver.observe(contentRef.current);
+    return function () {
+      observer.disconnect();
+      resizeObserver.disconnect();
+    };
+  }, []);
+  return /*#__PURE__*/React__default['default'].createElement(AccordionPrimitive.Content, _rollupPluginBabelHelpers.objectSpread2({
+    ref: localRef,
+    forceMount: forceMount,
+    className: cn.cn('aurora-overflow-hidden aurora-transition-all aurora-duration-200]', {
+      'data-[state=closed]:aurora-animate-accordion-up data-[state=open]:aurora-animate-accordion-down': !forceMount
+    }, className),
+    style: forceMount ? {
+      maxHeight: isOpen ? height : '0px',
+      opacity: isOpen ? 1 : 0
+    } : {},
+    "aria-hidden": !isOpen
+  }, props), /*#__PURE__*/React__default['default'].createElement("div", {
+    ref: contentRef
+  }, children));
 });
 AccordionContent.displayName = AccordionPrimitive.Content.displayName;
 

package/build/cjs/packages/aurora/src/components/accordion/components/accordion_content.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;"}
+{"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;"}

package/build/cjs/packages/aurora/src/components/action_list/action_list_variants.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var index = require('../../../../../external/class-variance-authority/dist/index.mjs.js');
 
-var actionListTriggerVariants = index.cva('aurora-group aurora-max-h-[32px] aurora-text-s aurora-py-1 aurora-px-3 aurora-rounded-6 aurora-bg aurora-flex aurora-justify-between hover:aurora-bg-hover aurora-select-none focus aurora-cursor-pointer aurora-items-center aurora-gap-2.5 aurora-transition-all data-[state=open]:aurora-bg-active data-[disabled]:aurora-pointer-events-none data-[disabled]:aurora-opacity-50', {
+var actionListTriggerVariants = index.cva('aurora-group aurora-max-h-[32px] aurora-text-s aurora-py-1 aurora-px-3 aurora-rounded-6 aurora-bg aurora-flex aurora-justify-between hover:aurora-bg-hover aurora-select-none focus aurora-cursor-pointer aurora-items-center aurora-gap-2.5 aurora-transition-all data-[state=open]:aurora-bg-active data-[disabled]:aurora-pointer-events-none data-[disabled]:aurora-text-subtle-light', {
   variants: {
     variant: {
       basic: '',

package/build/cjs/packages/aurora/src/components/action_list/components/action_list_item.js

@@ -19,7 +19,7 @@ var ActionListItem = /*#__PURE__*/React__default['default'].forwardRef(function
   return /*#__PURE__*/React__default['default'].createElement(DropdownMenuPrimitive.Item, _rollupPluginBabelHelpers.objectSpread2({
     ref: ref,
     "data-test-el": "action-list-item",
-    className: cn.cn('aurora-relative aurora-outline-none aurora-flex aurora-cursor-pointer aurora-select-none aurora-items-center aurora-gap-2.5 aurora-py-1.5 aurora-px-3 focus:aurora-bg-hover aurora-text-s aurora-transition-colors aurora-rounded-6 hover:aurora-bg-hover data-[disabled]:aurora-pointer-events-none data-[disabled]:aurora-opacity-50', inset && 'aurora-pl-8', className)
+    className: cn.cn('aurora-relative aurora-outline-none aurora-flex aurora-cursor-pointer aurora-select-none aurora-items-center aurora-gap-2.5 aurora-py-1.5 aurora-px-3 focus:aurora-bg-hover aurora-text-s aurora-transition-colors aurora-rounded-6 hover:aurora-bg-hover data-[disabled]:aurora-pointer-events-none data-[disabled]:aurora-text-subtle-light', inset && 'aurora-pl-8', className)
   }, props));
 });
 ActionListItem.displayName = 'ActionListItem';

package/build/cjs/packages/aurora/src/components/action_list/components/action_list_radio_item.js

@@ -22,7 +22,7 @@ var ActionListRadioItem = /*#__PURE__*/React__default['default'].forwardRef(func
   return /*#__PURE__*/React__default['default'].createElement(DropdownMenuPrimitive.RadioItem, _rollupPluginBabelHelpers.objectSpread2({
     ref: ref,
     "data-test-el": "action-list-radio-item",
-    className: cn.cn('aurora-relative aurora-outline-none aurora-py-1.5 aurora-pr-3 aurora-pl-10 aurora-flex aurora-cursor-pointer aurora-select-none aurora-items-center aurora-gap-2.5 focus:aurora-bg-hover aurora-text-s aurora-transition-colors aurora-rounded-6 hover:aurora-bg-hover data-[disabled]:aurora-pointer-events-none data-[disabled]:aurora-opacity-50 data-[state=checked]:aurora-font-semibold', className),
+    className: cn.cn('aurora-relative aurora-outline-none aurora-py-1.5 aurora-pr-3 aurora-pl-10 aurora-flex aurora-cursor-pointer aurora-select-none aurora-items-center aurora-gap-2.5 focus:aurora-bg-hover aurora-text-s aurora-transition-colors aurora-rounded-6 hover:aurora-bg-hover data-[disabled]:aurora-pointer-events-none data-[disabled]:aurora-text-subtle-light data-[state=checked]:aurora-font-semibold', className),
     disabled: disabled
   }, props), /*#__PURE__*/React__default['default'].createElement(DropdownMenuPrimitive.ItemIndicator, {
     className: "aurora-absolute aurora-left-2.5"

package/build/cjs/packages/aurora/src/components/action_list/components/action_list_radio_sub_trigger.js

@@ -24,7 +24,7 @@ var ActionListRadioSubTrigger = /*#__PURE__*/React__default['default'].forwardRe
     props = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/React__default['default'].createElement(DropdownMenuPrimitive.SubTrigger, _rollupPluginBabelHelpers.objectSpread2({
     ref: ref,
-    className: cn.cn('aurora-relative aurora-outline-none aurora-py-1.5 aurora-pr-3 aurora-pl-10 aurora-flex aurora-justify-between aurora-cursor-pointer aurora-select-none aurora-items-center aurora-gap-2.5 focus:aurora-bg-hover aurora-text-s aurora-transition-colors aurora-rounded-6 hover:aurora-bg-hover data-[disabled]:aurora-pointer-events-none data-[disabled]:aurora-opacity-50', inset && 'aurora-pl-8', className),
+    className: cn.cn('aurora-relative aurora-outline-none aurora-py-1.5 aurora-pr-3 aurora-pl-10 aurora-flex aurora-justify-between aurora-cursor-pointer aurora-select-none aurora-items-center aurora-gap-2.5 focus:aurora-bg-hover aurora-text-s aurora-transition-colors aurora-rounded-6 hover:aurora-bg-hover data-[disabled]:aurora-pointer-events-none data-[disabled]:aurora-text-subtle-light', inset && 'aurora-pl-8', className),
     "data-test-el": "action-list-sub-trigger"
   }, props), selected ? (/*#__PURE__*/React__default['default'].createElement(check_fill_icon.CheckFillIcon, {
     className: "aurora-absolute aurora-left-2.5",

package/build/cjs/packages/aurora/src/components/action_list/components/action_list_sub_trigger.js

@@ -22,7 +22,7 @@ var ActionListSubTrigger = /*#__PURE__*/React__default['default'].forwardRef(fun
     props = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/React__default['default'].createElement(DropdownMenuPrimitive.SubTrigger, _rollupPluginBabelHelpers.objectSpread2({
     ref: ref,
-    className: cn.cn('aurora-relative aurora-outline-none aurora-py-1.5 aurora-px-3 aurora-flex aurora-justify-between aurora-cursor-pointer aurora-select-none aurora-items-center aurora-gap-2.5 focus:aurora-bg-hover aurora-text-s aurora-transition-colors aurora-rounded-6 hover:aurora-bg-hover data-[disabled]:aurora-pointer-events-none data-[disabled]:aurora-opacity-50', inset && 'aurora-pl-8', className),
+    className: cn.cn('aurora-relative aurora-outline-none aurora-py-1.5 aurora-px-3 aurora-flex aurora-justify-between aurora-cursor-pointer aurora-select-none aurora-items-center aurora-gap-2.5 focus:aurora-bg-hover aurora-text-s aurora-transition-colors aurora-rounded-6 hover:aurora-bg-hover data-[disabled]:aurora-pointer-events-none data-[disabled]:aurora-text-subtle-light', inset && 'aurora-pl-8', className),
     "data-test-el": "action-list-sub-trigger"
   }, props), children, /*#__PURE__*/React__default['default'].createElement(arrow_right_line_icon.ArrowRightLineIcon, {
     size: 20,

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

@@ -41,7 +41,7 @@ var SelectContent = /*#__PURE__*/React__default['default'].forwardRef(function (
     style: {
       width: triggerWidth ? "".concat(triggerWidth, "px") : 'auto'
     },
-    className: cn.cn('aurora-relative aurora-z-[1000] aurora-max-h-96 aurora-min-w-[fit-content] aurora-overflow-y-hidden aurora-rounded-8 aurora-border aurora-bg-neutral-0 aurora-text-s aurora-shadow-m 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-[state=closed]:aurora-zoom-out-95 data-[state=open]:aurora-zoom-in-95 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 aurora-p-1', position === 'popper' && 'data-[side=bottom]:aurora-translate-y-1 data-[side=left]:-aurora-translate-x-1 data-[side=right]:aurora-translate-x-1 data-[side=top]:-aurora-translate-y-1', className),
+    className: cn.cn('aurora-relative aurora-z-[1000] aurora-max-h-96 aurora-min-w-[fit-content] aurora-overflow-y-hidden aurora-rounded-8 aurora-border aurora-bg-neutral-0 aurora-text-s aurora-shadow-m 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-[state=closed]:aurora-zoom-out-95 data-[state=open]:aurora-zoom-in-95 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 aurora-p-1 js__aurora-select-dropdown', position === 'popper' && 'data-[side=bottom]:aurora-translate-y-1 data-[side=left]:-aurora-translate-x-1 data-[side=right]:aurora-translate-x-1 data-[side=top]:-aurora-translate-y-1', className),
     position: position,
     onMouseEnter: function onMouseEnter() {
       return setIsHovered(true);
@@ -74,8 +74,7 @@ var SelectContent = /*#__PURE__*/React__default['default'].forwardRef(function (
       e.stopPropagation();
     },
     placeholder: searchPlaceholder,
-    ref: inputRef,
-    className: "js__select-search-input"
+    ref: inputRef
   }))), options === null || options === void 0 ? void 0 : options.map(function (option, index) {
     var isSelected = selectedValue ? option.value === selectedValue : false;
     return option.isHeader ? (/*#__PURE__*/React__default['default'].createElement(select_group_label.SelectGroupLabel, {

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

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

@@ -46,7 +46,7 @@ var PersistentSidebar = /*#__PURE__*/React__default['default'].forwardRef(functi
   });
   return /*#__PURE__*/React__default['default'].createElement("aside", _rollupPluginBabelHelpers.objectSpread2({
     "aria-expanded": open,
-    className: cn.cn('aurora-relative aurora-transition-all aurora-duration-200 aurora-overflow-hidden'),
+    className: cn.cn('aurora-relative aurora-transition-all aurora-duration-200'),
     style: {
       width: open ? width : 0,
       maxWidth: open ? width : 0,

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

@@ -91,7 +91,7 @@ var TemporalSidebar = /*#__PURE__*/React__default['default'].forwardRef(function
   });
   if (destroyed) return null;
   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-overflow-hidden', {
+    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
     }),

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

@@ -3,7 +3,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var useTranslation = require('../../../../../external/react-i18next/dist/es/useTranslation.js');
 var action_list = require('../action_list/action_list.js');
 var action_list_content = require('../action_list/components/action_list_content.js');
 var action_list_radio_group = require('../action_list/components/action_list_radio_group.js');
@@ -15,6 +14,7 @@ var tooltip_content = require('../tooltip/components/tooltip_content.js');
 var tooltip_provider = require('../tooltip/context/tooltip_provider.js');
 var subtract_line_icon = require('../../assets/icons/subtract_line_icon.js');
 var add_line_icon = require('../../assets/icons/add_line_icon.js');
+var zoom_stepper_button = require('./zoom_stepper_button.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -31,9 +31,9 @@ var ZoomStepper = function ZoomStepper(_ref) {
     min = _ref$min === void 0 ? 10 : _ref$min,
     _ref$max = _ref.max,
     max = _ref$max === void 0 ? 200 : _ref$max,
-    options = _ref.options;
-  var _useTranslation = useTranslation.useTranslation(),
-    t = _useTranslation.t;
+    options = _ref.options,
+    increaseTooltipText = _ref.increaseTooltipText,
+    decreaseTooltipText = _ref.decreaseTooltipText;
   var roundToNextStep = function roundToNextStep(val, step) {
     return Math.ceil(val / step) * step;
   };
@@ -58,19 +58,23 @@ var ZoomStepper = function ZoomStepper(_ref) {
       onChange === null || onChange === void 0 ? void 0 : onChange(parsed);
     }
   };
-  return /*#__PURE__*/React__default['default'].createElement("div", {
+  var renderButton = function renderButton(onClick, icon, tooltipText) {
+    var button = /*#__PURE__*/React__default['default'].createElement(zoom_stepper_button.ZoomStepperButton, {
+      onClick: onClick,
+      icon: icon
+    });
+    return tooltipText ? (/*#__PURE__*/React__default['default'].createElement(tooltip.Tooltip, null, /*#__PURE__*/React__default['default'].createElement(tooltip_trigger.TooltipTrigger, {
+      className: "aurora-h-5",
+      asChild: true
+    }, button), /*#__PURE__*/React__default['default'].createElement(tooltip_content.TooltipContent, {
+      variant: "dark"
+    }, tooltipText))) : button;
+  };
+  return /*#__PURE__*/React__default['default'].createElement(tooltip_provider.TooltipProvider, null, /*#__PURE__*/React__default['default'].createElement("div", {
     className: "aurora-flex aurora-items-center aurora-gap-1"
-  }, /*#__PURE__*/React__default['default'].createElement(tooltip_provider.TooltipProvider, null, /*#__PURE__*/React__default['default'].createElement(tooltip.Tooltip, null, /*#__PURE__*/React__default['default'].createElement(tooltip_trigger.TooltipTrigger, {
-    asChild: true,
-    className: "aurora-h-5"
-  }, /*#__PURE__*/React__default['default'].createElement("button", {
-    className: "aurora-p-0.5 aurora-border-0 aurora-bg-none aurora-cursor-pointer aurora-rounded-4 aurora-bg hover:aurora-bg-hover",
-    onClick: handleDecrease
-  }, /*#__PURE__*/React__default['default'].createElement(subtract_line_icon.SubtractLineIcon, {
+  }, renderButton(handleDecrease, /*#__PURE__*/React__default['default'].createElement(subtract_line_icon.SubtractLineIcon, {
     size: 16
-  }))), /*#__PURE__*/React__default['default'].createElement(tooltip_content.TooltipContent, {
-    variant: "dark"
-  }, "".concat(t('Zoom out ⌘ -'))))), /*#__PURE__*/React__default['default'].createElement(action_list.ActionList, null, /*#__PURE__*/React__default['default'].createElement(action_list_trigger.ActionListTrigger, {
+  }), decreaseTooltipText), /*#__PURE__*/React__default['default'].createElement(action_list.ActionList, null, /*#__PURE__*/React__default['default'].createElement(action_list_trigger.ActionListTrigger, {
     variant: "noDropdownIcon",
     className: "aurora-text-xs aurora-flex aurora-items-center !aurora-justify-center !aurora-px-1 !aurora-py-0 aurora-w-[46px]"
   }, "".concat(value, "%")), /*#__PURE__*/React__default['default'].createElement(action_list_content.ActionListContent, null, /*#__PURE__*/React__default['default'].createElement(action_list_radio_group.ActionListRadioGroup, {
@@ -81,17 +85,9 @@ var ZoomStepper = function ZoomStepper(_ref) {
       key: opt.value,
       value: opt.value
     }, opt.text);
-  })))), /*#__PURE__*/React__default['default'].createElement(tooltip_provider.TooltipProvider, null, /*#__PURE__*/React__default['default'].createElement(tooltip.Tooltip, null, /*#__PURE__*/React__default['default'].createElement(tooltip_trigger.TooltipTrigger, {
-    asChild: true,
-    className: "aurora-h-5"
-  }, /*#__PURE__*/React__default['default'].createElement("button", {
-    className: "aurora-p-0.5 aurora-border-0 aurora-bg-none aurora-cursor-pointer aurora-rounded-4 aurora-bg hover:aurora-bg-hover",
-    onClick: handleIncrease
-  }, /*#__PURE__*/React__default['default'].createElement(add_line_icon.AddLineIcon, {
+  })))), renderButton(handleIncrease, /*#__PURE__*/React__default['default'].createElement(add_line_icon.AddLineIcon, {
     size: 16
-  }))), /*#__PURE__*/React__default['default'].createElement(tooltip_content.TooltipContent, {
-    variant: "dark"
-  }, "".concat(t('Zoom in ⌘ +'))))));
+  }), increaseTooltipText)));
 };
 ZoomStepper.displayName = 'ZoomStepper';
 

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

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

package/build/cjs/packages/aurora/src/components/zoom_stepper/zoom_stepper_button.js

@@ -0,0 +1,21 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var ZoomStepperButton = function ZoomStepperButton(_ref) {
+  var onClick = _ref.onClick,
+    icon = _ref.icon;
+  return /*#__PURE__*/React__default['default'].createElement("button", {
+    onClick: onClick,
+    className: "aurora-h-5 aurora-p-0.5 aurora-border-0 aurora-bg-none aurora-cursor-pointer aurora-rounded-4 aurora-bg hover:aurora-bg-hover"
+  }, icon);
+};
+
+exports.ZoomStepperButton = ZoomStepperButton;
+//# sourceMappingURL=zoom_stepper_button.js.map

package/build/cjs/packages/aurora/src/components/zoom_stepper/zoom_stepper_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;"}

package/build/esm/packages/aurora/src/components/accordion/components/accordion_content.d.ts

@@ -1,3 +1,3 @@
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
-import * as React from 'react';
+import React from 'react';
 export declare const AccordionContent: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/build/esm/packages/aurora/src/components/accordion/components/accordion_content.js

@@ -1,16 +1,66 @@
-import { forwardRef, createElement } from 'react';
-import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../../../../../../_virtual/_rollupPluginBabelHelpers.js';
+import React, { useImperativeHandle, useEffect } from 'react';
+import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2 } from '../../../../../../_virtual/_rollupPluginBabelHelpers.js';
 import { Content } from '@radix-ui/react-accordion';
+import { cn } from '../../../utilities/cn.js';
 
-var _excluded = ["className", "children"];
-var AccordionContent = /*#__PURE__*/forwardRef(function (_ref, ref) {
+var _excluded = ["className", "children", "forceMount"];
+var AccordionContent = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
   var className = _ref.className,
     children = _ref.children,
+    forceMount = _ref.forceMount,
     props = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/createElement(Content, _objectSpread2({
-    ref: ref,
-    className: "aurora-overflow-hidden data-[state=closed]:aurora-animate-accordion-up data-[state=open]:aurora-animate-accordion-down"
-  }, props), children);
+  var contentRef = React.useRef(null);
+  var _React$useState = React.useState('0px'),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    height = _React$useState2[0],
+    setHeight = _React$useState2[1];
+  var _React$useState3 = React.useState(false),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    isOpen = _React$useState4[0],
+    setIsOpen = _React$useState4[1];
+  var localRef = React.useRef(null);
+  useImperativeHandle(forwardedRef, function () {
+    return localRef.current;
+  }, []);
+  useEffect(function () {
+    var element = localRef.current;
+    if (!element) return;
+    var handleStateChange = function handleStateChange() {
+      var isOpenState = element.getAttribute('data-state') === 'open';
+      setIsOpen(isOpenState);
+    };
+    handleStateChange();
+    var observer = new MutationObserver(handleStateChange);
+    observer.observe(element, {
+      attributes: true,
+      attributeFilter: ['data-state']
+    });
+    if (!contentRef.current) return;
+    var resizeObserver = new ResizeObserver(function (entries) {
+      entries.forEach(function (entry) {
+        setHeight("".concat(entry.contentRect.height, "px"));
+      });
+    });
+    resizeObserver.observe(contentRef.current);
+    return function () {
+      observer.disconnect();
+      resizeObserver.disconnect();
+    };
+  }, []);
+  return /*#__PURE__*/React.createElement(Content, _objectSpread2({
+    ref: localRef,
+    forceMount: forceMount,
+    className: cn('aurora-overflow-hidden aurora-transition-all aurora-duration-200]', {
+      'data-[state=closed]:aurora-animate-accordion-up data-[state=open]:aurora-animate-accordion-down': !forceMount
+    }, className),
+    style: forceMount ? {
+      maxHeight: isOpen ? height : '0px',
+      opacity: isOpen ? 1 : 0
+    } : {},
+    "aria-hidden": !isOpen
+  }, props), /*#__PURE__*/React.createElement("div", {
+    ref: contentRef
+  }, children));
 });
 AccordionContent.displayName = Content.displayName;
 

package/build/esm/packages/aurora/src/components/accordion/components/accordion_content.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;"}
+{"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;"}

package/build/esm/packages/aurora/src/components/action_list/action_list_variants.js

@@ -1,6 +1,6 @@
 import { cva } from '../../../../../external/class-variance-authority/dist/index.mjs.js';
 
-var actionListTriggerVariants = cva('aurora-group aurora-max-h-[32px] aurora-text-s aurora-py-1 aurora-px-3 aurora-rounded-6 aurora-bg aurora-flex aurora-justify-between hover:aurora-bg-hover aurora-select-none focus aurora-cursor-pointer aurora-items-center aurora-gap-2.5 aurora-transition-all data-[state=open]:aurora-bg-active data-[disabled]:aurora-pointer-events-none data-[disabled]:aurora-opacity-50', {
+var actionListTriggerVariants = cva('aurora-group aurora-max-h-[32px] aurora-text-s aurora-py-1 aurora-px-3 aurora-rounded-6 aurora-bg aurora-flex aurora-justify-between hover:aurora-bg-hover aurora-select-none focus aurora-cursor-pointer aurora-items-center aurora-gap-2.5 aurora-transition-all data-[state=open]:aurora-bg-active data-[disabled]:aurora-pointer-events-none data-[disabled]:aurora-text-subtle-light', {
   variants: {
     variant: {
       basic: '',

package/build/esm/packages/aurora/src/components/action_list/components/action_list_item.js

@@ -11,7 +11,7 @@ var ActionListItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   return /*#__PURE__*/React.createElement(Item, _objectSpread2({
     ref: ref,
     "data-test-el": "action-list-item",
-    className: cn('aurora-relative aurora-outline-none aurora-flex aurora-cursor-pointer aurora-select-none aurora-items-center aurora-gap-2.5 aurora-py-1.5 aurora-px-3 focus:aurora-bg-hover aurora-text-s aurora-transition-colors aurora-rounded-6 hover:aurora-bg-hover data-[disabled]:aurora-pointer-events-none data-[disabled]:aurora-opacity-50', inset && 'aurora-pl-8', className)
+    className: cn('aurora-relative aurora-outline-none aurora-flex aurora-cursor-pointer aurora-select-none aurora-items-center aurora-gap-2.5 aurora-py-1.5 aurora-px-3 focus:aurora-bg-hover aurora-text-s aurora-transition-colors aurora-rounded-6 hover:aurora-bg-hover data-[disabled]:aurora-pointer-events-none data-[disabled]:aurora-text-subtle-light', inset && 'aurora-pl-8', className)
   }, props));
 });
 ActionListItem.displayName = 'ActionListItem';

package/build/esm/packages/aurora/src/components/action_list/components/action_list_radio_item.js

@@ -14,7 +14,7 @@ var ActionListRadioItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   return /*#__PURE__*/React.createElement(RadioItem, _objectSpread2({
     ref: ref,
     "data-test-el": "action-list-radio-item",
-    className: cn('aurora-relative aurora-outline-none aurora-py-1.5 aurora-pr-3 aurora-pl-10 aurora-flex aurora-cursor-pointer aurora-select-none aurora-items-center aurora-gap-2.5 focus:aurora-bg-hover aurora-text-s aurora-transition-colors aurora-rounded-6 hover:aurora-bg-hover data-[disabled]:aurora-pointer-events-none data-[disabled]:aurora-opacity-50 data-[state=checked]:aurora-font-semibold', className),
+    className: cn('aurora-relative aurora-outline-none aurora-py-1.5 aurora-pr-3 aurora-pl-10 aurora-flex aurora-cursor-pointer aurora-select-none aurora-items-center aurora-gap-2.5 focus:aurora-bg-hover aurora-text-s aurora-transition-colors aurora-rounded-6 hover:aurora-bg-hover data-[disabled]:aurora-pointer-events-none data-[disabled]:aurora-text-subtle-light data-[state=checked]:aurora-font-semibold', className),
     disabled: disabled
   }, props), /*#__PURE__*/React.createElement(ItemIndicator, {
     className: "aurora-absolute aurora-left-2.5"

package/build/esm/packages/aurora/src/components/action_list/components/action_list_radio_sub_trigger.js

@@ -16,7 +16,7 @@ var ActionListRadioSubTrigger = /*#__PURE__*/React.forwardRef(function (_ref, re
     props = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/React.createElement(SubTrigger, _objectSpread2({
     ref: ref,
-    className: cn('aurora-relative aurora-outline-none aurora-py-1.5 aurora-pr-3 aurora-pl-10 aurora-flex aurora-justify-between aurora-cursor-pointer aurora-select-none aurora-items-center aurora-gap-2.5 focus:aurora-bg-hover aurora-text-s aurora-transition-colors aurora-rounded-6 hover:aurora-bg-hover data-[disabled]:aurora-pointer-events-none data-[disabled]:aurora-opacity-50', inset && 'aurora-pl-8', className),
+    className: cn('aurora-relative aurora-outline-none aurora-py-1.5 aurora-pr-3 aurora-pl-10 aurora-flex aurora-justify-between aurora-cursor-pointer aurora-select-none aurora-items-center aurora-gap-2.5 focus:aurora-bg-hover aurora-text-s aurora-transition-colors aurora-rounded-6 hover:aurora-bg-hover data-[disabled]:aurora-pointer-events-none data-[disabled]:aurora-text-subtle-light', inset && 'aurora-pl-8', className),
     "data-test-el": "action-list-sub-trigger"
   }, props), selected ? (/*#__PURE__*/React.createElement(CheckFillIcon, {
     className: "aurora-absolute aurora-left-2.5",

package/build/esm/packages/aurora/src/components/action_list/components/action_list_sub_trigger.js

@@ -14,7 +14,7 @@ var ActionListSubTrigger = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     props = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/React.createElement(SubTrigger, _objectSpread2({
     ref: ref,
-    className: cn('aurora-relative aurora-outline-none aurora-py-1.5 aurora-px-3 aurora-flex aurora-justify-between aurora-cursor-pointer aurora-select-none aurora-items-center aurora-gap-2.5 focus:aurora-bg-hover aurora-text-s aurora-transition-colors aurora-rounded-6 hover:aurora-bg-hover data-[disabled]:aurora-pointer-events-none data-[disabled]:aurora-opacity-50', inset && 'aurora-pl-8', className),
+    className: cn('aurora-relative aurora-outline-none aurora-py-1.5 aurora-px-3 aurora-flex aurora-justify-between aurora-cursor-pointer aurora-select-none aurora-items-center aurora-gap-2.5 focus:aurora-bg-hover aurora-text-s aurora-transition-colors aurora-rounded-6 hover:aurora-bg-hover data-[disabled]:aurora-pointer-events-none data-[disabled]:aurora-text-subtle-light', inset && 'aurora-pl-8', className),
     "data-test-el": "action-list-sub-trigger"
   }, props), children, /*#__PURE__*/React.createElement(ArrowRightLineIcon, {
     size: 20,

package/build/esm/packages/aurora/src/components/select/components/select_content.js

@@ -33,7 +33,7 @@ var SelectContent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     style: {
       width: triggerWidth ? "".concat(triggerWidth, "px") : 'auto'
     },
-    className: cn('aurora-relative aurora-z-[1000] aurora-max-h-96 aurora-min-w-[fit-content] aurora-overflow-y-hidden aurora-rounded-8 aurora-border aurora-bg-neutral-0 aurora-text-s aurora-shadow-m 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-[state=closed]:aurora-zoom-out-95 data-[state=open]:aurora-zoom-in-95 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 aurora-p-1', position === 'popper' && 'data-[side=bottom]:aurora-translate-y-1 data-[side=left]:-aurora-translate-x-1 data-[side=right]:aurora-translate-x-1 data-[side=top]:-aurora-translate-y-1', className),
+    className: cn('aurora-relative aurora-z-[1000] aurora-max-h-96 aurora-min-w-[fit-content] aurora-overflow-y-hidden aurora-rounded-8 aurora-border aurora-bg-neutral-0 aurora-text-s aurora-shadow-m 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-[state=closed]:aurora-zoom-out-95 data-[state=open]:aurora-zoom-in-95 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 aurora-p-1 js__aurora-select-dropdown', position === 'popper' && 'data-[side=bottom]:aurora-translate-y-1 data-[side=left]:-aurora-translate-x-1 data-[side=right]:aurora-translate-x-1 data-[side=top]:-aurora-translate-y-1', className),
     position: position,
     onMouseEnter: function onMouseEnter() {
       return setIsHovered(true);
@@ -66,8 +66,7 @@ var SelectContent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       e.stopPropagation();
     },
     placeholder: searchPlaceholder,
-    ref: inputRef,
-    className: "js__select-search-input"
+    ref: inputRef
   }))), options === null || options === void 0 ? void 0 : options.map(function (option, index) {
     var isSelected = selectedValue ? option.value === selectedValue : false;
     return option.isHeader ? (/*#__PURE__*/React.createElement(SelectGroupLabel, {

package/build/esm/packages/aurora/src/components/select/components/select_content.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA,+DAA+D,0EAA8E;AAC7I;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,+DAA+D,0EAA8E;AAC7I;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/persistent_sidebar.js

@@ -38,7 +38,7 @@ var PersistentSidebar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   });
   return /*#__PURE__*/React.createElement("aside", _objectSpread2({
     "aria-expanded": open,
-    className: cn('aurora-relative aurora-transition-all aurora-duration-200 aurora-overflow-hidden'),
+    className: cn('aurora-relative aurora-transition-all aurora-duration-200'),
     style: {
       width: open ? width : 0,
       maxWidth: open ? width : 0,

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

@@ -83,7 +83,7 @@ var TemporalSidebar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   });
   if (destroyed) return null;
   return /*#__PURE__*/createPortal(/*#__PURE__*/React.createElement("div", _objectSpread2({
-    className: cn('aurora-absolute aurora-z-20 aurora-top-0 aurora-h-full aurora-overflow-hidden', {
+    className: cn('aurora-absolute aurora-z-20 aurora-top-0 aurora-h-full', {
       'aurora-left-0': side === SIDEBAR_SIDE.left,
       'aurora-right-0': side === SIDEBAR_SIDE.right
     }),

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

@@ -1,5 +1,4 @@
 import React from 'react';
-import { useTranslation } from '../../../../../external/react-i18next/dist/es/useTranslation.js';
 import { ActionList } from '../action_list/action_list.js';
 import { ActionListContent } from '../action_list/components/action_list_content.js';
 import { ActionListRadioGroup } from '../action_list/components/action_list_radio_group.js';
@@ -11,6 +10,7 @@ import { TooltipContent } from '../tooltip/components/tooltip_content.js';
 import { TooltipProvider } from '../tooltip/context/tooltip_provider.js';
 import { SubtractLineIcon } from '../../assets/icons/subtract_line_icon.js';
 import { AddLineIcon } from '../../assets/icons/add_line_icon.js';
+import { ZoomStepperButton } from './zoom_stepper_button.js';
 
 var ZoomStepper = function ZoomStepper(_ref) {
   var value = _ref.value,
@@ -23,9 +23,9 @@ var ZoomStepper = function ZoomStepper(_ref) {
     min = _ref$min === void 0 ? 10 : _ref$min,
     _ref$max = _ref.max,
     max = _ref$max === void 0 ? 200 : _ref$max,
-    options = _ref.options;
-  var _useTranslation = useTranslation(),
-    t = _useTranslation.t;
+    options = _ref.options,
+    increaseTooltipText = _ref.increaseTooltipText,
+    decreaseTooltipText = _ref.decreaseTooltipText;
   var roundToNextStep = function roundToNextStep(val, step) {
     return Math.ceil(val / step) * step;
   };
@@ -50,19 +50,23 @@ var ZoomStepper = function ZoomStepper(_ref) {
       onChange === null || onChange === void 0 ? void 0 : onChange(parsed);
     }
   };
-  return /*#__PURE__*/React.createElement("div", {
+  var renderButton = function renderButton(onClick, icon, tooltipText) {
+    var button = /*#__PURE__*/React.createElement(ZoomStepperButton, {
+      onClick: onClick,
+      icon: icon
+    });
+    return tooltipText ? (/*#__PURE__*/React.createElement(Tooltip, null, /*#__PURE__*/React.createElement(TooltipTrigger, {
+      className: "aurora-h-5",
+      asChild: true
+    }, button), /*#__PURE__*/React.createElement(TooltipContent, {
+      variant: "dark"
+    }, tooltipText))) : button;
+  };
+  return /*#__PURE__*/React.createElement(TooltipProvider, null, /*#__PURE__*/React.createElement("div", {
     className: "aurora-flex aurora-items-center aurora-gap-1"
-  }, /*#__PURE__*/React.createElement(TooltipProvider, null, /*#__PURE__*/React.createElement(Tooltip, null, /*#__PURE__*/React.createElement(TooltipTrigger, {
-    asChild: true,
-    className: "aurora-h-5"
-  }, /*#__PURE__*/React.createElement("button", {
-    className: "aurora-p-0.5 aurora-border-0 aurora-bg-none aurora-cursor-pointer aurora-rounded-4 aurora-bg hover:aurora-bg-hover",
-    onClick: handleDecrease
-  }, /*#__PURE__*/React.createElement(SubtractLineIcon, {
+  }, renderButton(handleDecrease, /*#__PURE__*/React.createElement(SubtractLineIcon, {
     size: 16
-  }))), /*#__PURE__*/React.createElement(TooltipContent, {
-    variant: "dark"
-  }, "".concat(t('Zoom out ⌘ -'))))), /*#__PURE__*/React.createElement(ActionList, null, /*#__PURE__*/React.createElement(ActionListTrigger, {
+  }), decreaseTooltipText), /*#__PURE__*/React.createElement(ActionList, null, /*#__PURE__*/React.createElement(ActionListTrigger, {
     variant: "noDropdownIcon",
     className: "aurora-text-xs aurora-flex aurora-items-center !aurora-justify-center !aurora-px-1 !aurora-py-0 aurora-w-[46px]"
   }, "".concat(value, "%")), /*#__PURE__*/React.createElement(ActionListContent, null, /*#__PURE__*/React.createElement(ActionListRadioGroup, {
@@ -73,17 +77,9 @@ var ZoomStepper = function ZoomStepper(_ref) {
       key: opt.value,
       value: opt.value
     }, opt.text);
-  })))), /*#__PURE__*/React.createElement(TooltipProvider, null, /*#__PURE__*/React.createElement(Tooltip, null, /*#__PURE__*/React.createElement(TooltipTrigger, {
-    asChild: true,
-    className: "aurora-h-5"
-  }, /*#__PURE__*/React.createElement("button", {
-    className: "aurora-p-0.5 aurora-border-0 aurora-bg-none aurora-cursor-pointer aurora-rounded-4 aurora-bg hover:aurora-bg-hover",
-    onClick: handleIncrease
-  }, /*#__PURE__*/React.createElement(AddLineIcon, {
+  })))), renderButton(handleIncrease, /*#__PURE__*/React.createElement(AddLineIcon, {
     size: 16
-  }))), /*#__PURE__*/React.createElement(TooltipContent, {
-    variant: "dark"
-  }, "".concat(t('Zoom in ⌘ +'))))));
+  }), increaseTooltipText)));
 };
 ZoomStepper.displayName = 'ZoomStepper';
 

package/build/esm/packages/aurora/src/components/zoom_stepper/zoom_stepper.js.map

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

package/build/esm/packages/aurora/src/components/zoom_stepper/zoom_stepper_button.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+declare type TZoomStepperButtonProps = {
+    onClick: () => void;
+    icon: React.ReactNode;
+};
+export declare const ZoomStepperButton: React.FC<TZoomStepperButtonProps>;
+export {};

package/build/esm/packages/aurora/src/components/zoom_stepper/zoom_stepper_button.js

@@ -0,0 +1,13 @@
+import React from 'react';
+
+var ZoomStepperButton = function ZoomStepperButton(_ref) {
+  var onClick = _ref.onClick,
+    icon = _ref.icon;
+  return /*#__PURE__*/React.createElement("button", {
+    onClick: onClick,
+    className: "aurora-h-5 aurora-p-0.5 aurora-border-0 aurora-bg-none aurora-cursor-pointer aurora-rounded-4 aurora-bg hover:aurora-bg-hover"
+  }, icon);
+};
+
+export { ZoomStepperButton };
+//# sourceMappingURL=zoom_stepper_button.js.map

package/build/esm/packages/aurora/src/components/zoom_stepper/zoom_stepper_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;"}