@dreamcommerce/aurora 3.0.0-99 → 3.0.0

package/build/cjs/packages/aurora/src/components/tree/components/tree_node.js

@@ -14,14 +14,16 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var _excluded = ["children", "id", "cssClassNames", "ContentComponent", "LabelComponent", "disabled", "hasDisabledHover"];
+var _excluded = ["children", "id", "className", "labelClassName", "ContentComponent", "LabelComponent", "disabled", "isHighlighted", "hasDisabledHover"];
 var TreeNode = function TreeNode(_ref) {
   var children = _ref.children,
     id = _ref.id,
-    cssClassNames = _ref.cssClassNames,
+    className = _ref.className,
+    labelClassName = _ref.labelClassName,
     ContentComponent = _ref.ContentComponent,
     LabelComponent = _ref.LabelComponent,
     disabled = _ref.disabled,
+    isHighlighted = _ref.isHighlighted,
     hasDisabledHover = _ref.hasDisabledHover,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
   var treeApi = tree_hook.useTree();
@@ -34,16 +36,18 @@ var TreeNode = function TreeNode(_ref) {
   };
   var Label = LabelComponent ? (/*#__PURE__*/React__default['default'].createElement("div", {
     className: cn.cn('aurora-w-full aurora-px-2 aurora-rounded-4 hover:aurora-bg-hover', {
-      'hover:aurora-bg-transparent': hasDisabledHover
-    })
+      'hover:aurora-bg-transparent': hasDisabledHover,
+      'aurora-bg-hover': isHighlighted
+    }, labelClassName)
   }, LabelComponent === null || LabelComponent === void 0 ? void 0 : LabelComponent({
     node: node,
     isLeaf: !children
   }))) : (/*#__PURE__*/React__default['default'].createElement("div", {
     tabIndex: !children ? 0 : -1,
     className: cn.cn('aurora-w-full aurora-px-2 aurora-rounded-4 hover:aurora-bg-hover', {
-      'hover:aurora-bg-transparent': hasDisabledHover
-    })
+      'hover:aurora-bg-transparent': hasDisabledHover,
+      'aurora-bg-hover': isHighlighted
+    }, labelClassName)
   }, node.label ? node.label : node.id));
   var Content = ContentComponent ? ContentComponent === null || ContentComponent === void 0 ? void 0 : ContentComponent({
     node: node,
@@ -51,20 +55,21 @@ var TreeNode = function TreeNode(_ref) {
     isLeaf: !childrenCount
   }) : (/*#__PURE__*/React__default['default'].createElement("div", {
     className: cn.cn('aurora-flex aurora-items-center aurora-rounded-4 hover:aurora-bg-hover', {
-      'hover:aurora-bg-transparent': hasDisabledHover
-    })
+      'hover:aurora-bg-transparent': hasDisabledHover,
+      'aurora-bg-hover': isHighlighted
+    }, labelClassName)
   }, /*#__PURE__*/React__default['default'].createElement("button", {
     className: "aurora-flex aurora-items-center aurora-p-1 aurora-cursor-pointer",
     onClick: toggleNode
   }, /*#__PURE__*/React__default['default'].createElement("span", {
     className: "aurora-flex"
   }, /*#__PURE__*/React__default['default'].createElement(arrow_down_s_fill.ArrowDownSFillIcon, {
-    className: cn.cn('aurora-h-4 aurora-w-4 aurora-text-inverse-subtle-light -aurora-rotate-90 tree-arrow-transition', {
+    className: cn.cn('aurora-h-4 aurora-w-4 aurora-text-inverse-subtle-light -aurora-rotate-90 aurora-transition-transform aurora-duration-200 aurora-ease-out', {
       'aurora-rotate-0': node.expanded
     })
   }))), Label));
   return /*#__PURE__*/React__default['default'].createElement("li", {
-    className: cn.cn('aurora-flex aurora-flex-col aurora-gap-2', cssClassNames),
+    className: cn.cn('aurora-flex aurora-flex-col aurora-gap-2', className),
     role: "treeitem",
     "aria-expanded": node.expanded,
     "data-disabled": !!disabled
@@ -74,16 +79,15 @@ var TreeNode = function TreeNode(_ref) {
     timeout: 50,
     classNames: {
       enter: 'tree__children-enter',
-      enterActive: 'tree__children-enter-active',
-      exit: 'tree__children-exit',
+      enterActive: 'aurora-opacity-100 aurora-scale-100',
+      exit: 'aurora-opacity-100 aurora-scale-100',
       exitActive: 'tree__children-exit-active'
     }
   }, /*#__PURE__*/React__default['default'].createElement("ul", {
-    className: "aurora-flex aurora-flex-col aurora-gap-2 aurora-pl-4 aurora-scale-100 aurora-origin-top aurora-list-none aurora-will-change-auto tree__children-transition",
+    className: "aurora-flex aurora-flex-col aurora-gap-2 aurora-pl-4 aurora-scale-100 aurora-origin-top aurora-will-change-auto aurora-duration-200 aurora-ease-out aurora-transition-all aurora-m-0 aurora-p-0 aurora-list-none",
     ref: nodeChildrenRef
   }, children))) : null);
 };
 
 exports.TreeNode = TreeNode;
-exports.default = TreeNode;
 //# sourceMappingURL=tree_node.js.map

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

package/build/cjs/packages/aurora/src/components/tree/context/tree_context.js

@@ -9,6 +9,7 @@ var TreeContext = /*#__PURE__*/React.createContext({
   updateNode: function updateNode() {},
   removeNode: function removeNode() {},
   toggleNode: function toggleNode() {},
+  closeNode: function closeNode() {},
   getNode: function getNode() {
     return undefined;
   },

package/build/cjs/packages/aurora/src/components/tree/context/tree_context.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;"}
+{"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/cjs/packages/aurora/src/components/tree/context/tree_provider.js

@@ -50,6 +50,15 @@ var TreeProvider = function TreeProvider(_ref) {
         });
       });
     },
+    closeNode: function closeNode(nodeId) {
+      setNodes(function (nodes) {
+        return nodes.map(function (node) {
+          return node.id === nodeId ? _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, node), {}, {
+            expanded: false
+          }) : node;
+        });
+      });
+    },
     hasNode: function hasNode(nodeId) {
       return !!nodes.find(function (node) {
         return node.id === nodeId;

package/build/cjs/packages/aurora/src/components/tree/context/tree_provider.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;"}
+{"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/cjs/packages/aurora/src/components/tree/{index.js → tree.js}

@@ -11,7 +11,6 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-// eslint-disable-next-line react/display-name
 var Tree = /*#__PURE__*/React__default['default'].forwardRef(function (_ref, ref) {
   var children = _ref.children,
     cssClassNames = _ref.cssClassNames,
@@ -24,10 +23,11 @@ var Tree = /*#__PURE__*/React__default['default'].forwardRef(function (_ref, ref
     onMouseLeave: onMouseLeave,
     ref: ref,
     style: cssStyles,
-    className: cn.cn('aurora-list-none aurora-flex aurora-flex-col aurora-gap-2', cssClassNames)
+    className: cn.cn('aurora-flex aurora-flex-col aurora-gap-2 aurora-m-0 aurora-p-0 aurora-list-none', cssClassNames)
   }, children));
 });
+Tree.displayName = 'Tree';
 
 exports.Tree = Tree;
 exports.default = Tree;
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=tree.js.map

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

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

@@ -32,7 +32,7 @@ var Typography = function Typography(_ref) {
       weight: weight,
       size: size,
       lineHeight: lineHeight
-    }), _rollupPluginBabelHelpers.defineProperty({}, "aurora-text-".concat(color), !!color), className),
+    }), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "aurora-text-".concat(color), !!color), 'aurora-text', !color), className),
     style: style
   }, rest), children);
 };

package/build/cjs/packages/aurora/src/components/typography/typography_variants.js

@@ -14,7 +14,7 @@ var typographyVariants = index.cva('', {
     transform: _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, typography_constants.TYPOGRAPHY_TRANSFORM_TYPES.uppercase, 'aurora-uppercase'), typography_constants.TYPOGRAPHY_TRANSFORM_TYPES.lowercase, 'aurora-lowercase'), typography_constants.TYPOGRAPHY_TRANSFORM_TYPES.capitalize, 'aurora-capitalize'),
     weight: _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, typography_constants.TYPOGRAPHY_WEIGHT_TYPES.normal, 'aurora-font-normal'), typography_constants.TYPOGRAPHY_WEIGHT_TYPES.medium, 'aurora-font-medium'), typography_constants.TYPOGRAPHY_WEIGHT_TYPES.semibold, 'aurora-font-semibold'), typography_constants.TYPOGRAPHY_WEIGHT_TYPES.bold, 'aurora-font-bold'), typography_constants.TYPOGRAPHY_WEIGHT_TYPES.extrabold, 'aurora-font-extrabold'),
     size: _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, css_font_size_tokens.CSS_FONT_SIZE_TOKENS.xs, 'aurora-text-xs'), css_font_size_tokens.CSS_FONT_SIZE_TOKENS.s, 'aurora-text-s'), css_font_size_tokens.CSS_FONT_SIZE_TOKENS.md, 'aurora-text'), css_font_size_tokens.CSS_FONT_SIZE_TOKENS.lg, 'aurora-text-lg'), css_font_size_tokens.CSS_FONT_SIZE_TOKENS.xl, 'aurora-text-xl'), css_font_size_tokens.CSS_FONT_SIZE_TOKENS['2xl'], 'aurora-text-2xl'), css_font_size_tokens.CSS_FONT_SIZE_TOKENS['3xl'], 'aurora-text-3xl'), css_font_size_tokens.CSS_FONT_SIZE_TOKENS['4xl'], 'aurora-text-4xl'), css_font_size_tokens.CSS_FONT_SIZE_TOKENS['5xl'], 'aurora-text-5xl'), css_font_size_tokens.CSS_FONT_SIZE_TOKENS['6xl'], 'aurora-text-6xl'),
-    lineHeight: _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, css_line_height_tokens.CSS_LINE_HEIGHT_TOKENS.xs, 'aurora-line-height-xs'), css_line_height_tokens.CSS_LINE_HEIGHT_TOKENS.s, 'aurora-line-height-s'), css_line_height_tokens.CSS_LINE_HEIGHT_TOKENS.md, 'aurora-line-height'), css_line_height_tokens.CSS_LINE_HEIGHT_TOKENS.lg, 'aurora-line-height-lg'), css_line_height_tokens.CSS_LINE_HEIGHT_TOKENS.xl, 'aurora-line-height-xl'), css_line_height_tokens.CSS_LINE_HEIGHT_TOKENS['2xl'], 'aurora-line-height-2xl'), css_line_height_tokens.CSS_LINE_HEIGHT_TOKENS['3xl'], 'aurora-line-height-3xl'), css_line_height_tokens.CSS_LINE_HEIGHT_TOKENS['4xl'], 'aurora-line-height-4xl'), css_line_height_tokens.CSS_LINE_HEIGHT_TOKENS['5xl'], 'aurora-line-height-5xl'), css_line_height_tokens.CSS_LINE_HEIGHT_TOKENS['6xl'], 'aurora-line-height-6xl'),
+    lineHeight: _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, css_line_height_tokens.CSS_LINE_HEIGHT_TOKENS.xs, 'aurora-leading-xs'), css_line_height_tokens.CSS_LINE_HEIGHT_TOKENS.s, 'aurora-leading-s'), css_line_height_tokens.CSS_LINE_HEIGHT_TOKENS.md, 'aurora-leading'), css_line_height_tokens.CSS_LINE_HEIGHT_TOKENS.lg, 'aurora-leading-lg'), css_line_height_tokens.CSS_LINE_HEIGHT_TOKENS.xl, 'aurora-leading-xl'), css_line_height_tokens.CSS_LINE_HEIGHT_TOKENS['2xl'], 'aurora-leading-2xl'), css_line_height_tokens.CSS_LINE_HEIGHT_TOKENS['3xl'], 'aurora-leading-3xl'), css_line_height_tokens.CSS_LINE_HEIGHT_TOKENS['4xl'], 'aurora-leading-4xl'), css_line_height_tokens.CSS_LINE_HEIGHT_TOKENS['5xl'], 'aurora-leading-5xl'), css_line_height_tokens.CSS_LINE_HEIGHT_TOKENS['6xl'], 'aurora-leading-6xl'),
     defaultVariants: {
       variant: typography_constants.TYPOGRAPHY_COMPONENT_TYPES.p,
       weight: typography_constants.TYPOGRAPHY_WEIGHT_TYPES.normal

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

@@ -17,73 +17,98 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var ValuesSyncer = function ValuesSyncer(_ref) {
   var firstControl = _ref.firstControl,
     secondControl = _ref.secondControl,
-    initialFirstValue = _ref.initialFirstValue,
-    initialSecondValue = _ref.initialSecondValue,
-    _ref$isLocked = _ref.isLocked,
-    isLocked = _ref$isLocked === void 0 ? false : _ref$isLocked,
+    firstValue = _ref.firstValue,
+    secondValue = _ref.secondValue,
+    isLocked = _ref.isLocked,
     onLock = _ref.onLock,
-    onChange = _ref.onChange;
-  var _useState = React.useState(isLocked),
+    _ref$disableLockButto = _ref.disableLockButton,
+    disableLockButton = _ref$disableLockButto === void 0 ? false : _ref$disableLockButto,
+    onChange = _ref.onChange,
+    className = _ref.className;
+  var _useState = React.useState(isLocked !== null && isLocked !== void 0 ? isLocked : false),
     _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
     locked = _useState2[0],
     setLocked = _useState2[1];
-  var _useState3 = React.useState(initialFirstValue),
-    _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
-    firstControlValue = _useState4[0],
-    setFirstControlValue = _useState4[1];
-  var _useState5 = React.useState(initialSecondValue),
-    _useState6 = _rollupPluginBabelHelpers.slicedToArray(_useState5, 2),
-    secondControlValue = _useState6[0],
-    setSecondControlValue = _useState6[1];
-  React.useEffect(function () {
-    onLock === null || onLock === void 0 ? void 0 : onLock(locked);
+  var firstValueRef = React.useRef(firstValue);
+  var secondValueRef = React.useRef(secondValue);
+  var lockedRef = React.useRef(locked);
+  var handleFirstControlChange = React.useCallback(function (value) {
+    firstValueRef.current = value;
     if (locked) {
-      setSecondControlValue(firstControlValue);
+      onChange === null || onChange === void 0 ? void 0 : onChange({
+        first: value,
+        second: value,
+        isLocked: locked
+      });
+    } else {
+      onChange === null || onChange === void 0 ? void 0 : onChange({
+        first: value,
+        second: secondValue,
+        isLocked: locked
+      });
     }
-  }, [locked]);
-  React.useEffect(function () {
-    setFirstControlValue(initialFirstValue);
-    setSecondControlValue(initialSecondValue);
-  }, [initialFirstValue, initialSecondValue]);
-  React.useEffect(function () {
-    onChange === null || onChange === void 0 ? void 0 : onChange({
-      first: firstControlValue,
-      second: secondControlValue,
-      isLocked: locked
-    });
-  }, [firstControlValue, secondControlValue, locked]);
-  var handleFirstControlChange = function handleFirstControlChange(value) {
-    setFirstControlValue(value);
+  }, [locked, onChange, secondValue]);
+  var handleSecondControlChange = React.useCallback(function (value) {
+    secondValueRef.current = value;
     if (locked) {
-      setSecondControlValue(value);
+      onChange === null || onChange === void 0 ? void 0 : onChange({
+        first: value,
+        second: value,
+        isLocked: locked
+      });
+    } else {
+      onChange === null || onChange === void 0 ? void 0 : onChange({
+        first: firstValue,
+        second: value,
+        isLocked: locked
+      });
     }
-  };
-  var handleSecondControlChange = function handleSecondControlChange(value) {
-    setSecondControlValue(value);
-    if (locked) {
-      setFirstControlValue(value);
+  }, [firstValue, locked, onChange]);
+  var handleLockedChange = React.useCallback(function (newLock) {
+    var triggerOnLock = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+    setLocked(newLock);
+    lockedRef.current = newLock;
+    if (triggerOnLock && onLock) onLock(newLock);
+    if (newLock) {
+      onChange === null || onChange === void 0 ? void 0 : onChange({
+        first: firstValue,
+        second: firstValue,
+        isLocked: newLock
+      });
     }
-  };
-  var toggleLock = function toggleLock() {
-    return setLocked(function (prev) {
-      return !prev;
-    });
-  };
+  }, [firstValue, onChange, onLock]);
+  // Reagujemy na zmiany wszystkiego co przychodzi z gory
+  // zebysmy nigdy nie skonczyli z nielegalnym stanem -> first !== second && locked
+  React.useEffect(function () {
+    if (isLocked === undefined || isLocked === lockedRef.current) return;
+    handleLockedChange(isLocked, false);
+  }, [isLocked, handleLockedChange]);
+  React.useEffect(function () {
+    if (firstValue === firstValueRef.current && secondValue === secondValueRef.current) return;
+    firstValueRef.current = firstValue;
+    secondValueRef.current = secondValue;
+    if (firstValue !== secondValue) {
+      handleLockedChange(false);
+    }
+  }, [firstValue, secondValue, handleLockedChange]);
   return /*#__PURE__*/React__default['default'].createElement(stack.Stack, {
     spacing: "3",
     align: "end",
-    className: "aurora-items-end"
-  }, firstControl(firstControlValue, handleFirstControlChange), /*#__PURE__*/React__default['default'].createElement("button", {
+    className: cn.cn('aurora-items-end', className)
+  }, firstControl(firstValue, handleFirstControlChange), /*#__PURE__*/React__default['default'].createElement("button", {
     type: "button",
+    disabled: disableLockButton,
     className: cn.cn(locked ? 'aurora-bg-active aurora-rounded-4' : 'aurora-bg-subtle', 'aurora-h-6 aurora-w-6 aurora-p-1 aurora-mb-2 aurora-rounded-4 focus'),
-    onClick: toggleLock
-  }, locked ? (/*#__PURE__*/React__default['default'].createElement(lock_icon.LockLineIcon, {
+    onClick: function onClick() {
+      return handleLockedChange(!locked);
+    }
+  }, locked && !disableLockButton ? (/*#__PURE__*/React__default['default'].createElement(lock_icon.LockLineIcon, {
     className: "aurora-h-4 aurora-w-4",
     color: css_color_tokens_values.CSS_COLOR_TOKENS_VALUES.neutral900
   })) : (/*#__PURE__*/React__default['default'].createElement(lock_unlock_icon.LockUnlockLineIcon, {
     className: "aurora-h-4 aurora-w-4",
     color: css_color_tokens_values.CSS_COLOR_TOKENS_VALUES.neutral600
-  }))), secondControl(secondControlValue, handleSecondControlChange));
+  }))), secondControl(secondValue, handleSecondControlChange));
 };
 
 exports.ValuesSyncer = ValuesSyncer;

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

@@ -8,12 +8,12 @@ var _rollupPluginBabelHelpers = require('../../../../../_virtual/_rollupPluginBa
 var loader = require('../loader/loader.js');
 var use_modals_context = require('../modal/hooks/use_modals_context.js');
 var modal = require('../modal/components/modal/modal.js');
-var utilities = require('@dreamcommerce/utilities');
 var image_picker_constants = require('../image_picker/image_picker_constants.js');
+var utilities = require('@dreamcommerce/utilities');
 var image_picker = require('../image_picker/image_picker.js');
+var image_edit_icon = require('../../assets/icons/image_edit_icon.js');
 var http_requester_contants = require('../../../../star_core/build/esm/packages/star_core/src/features/http_requester/http_requester_contants.js');
 var use_http_api = require('../../hooks/use_http_api.js');
-var image_edit_icon = require('../../assets/icons/image_edit_icon.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -31,6 +31,7 @@ var XhrImagePicker = function XhrImagePicker(_ref) {
     onImageSizeUpdated = _ref.onImageSizeUpdated,
     _ref$allowedExtension = _ref.allowedExtensions,
     allowedExtensions = _ref$allowedExtension === void 0 ? [image_picker_constants.IMAGE_PICKER_EXTENSIONS.WEBP, image_picker_constants.IMAGE_PICKER_EXTENSIONS.JPG, image_picker_constants.IMAGE_PICKER_EXTENSIONS.PNG, image_picker_constants.IMAGE_PICKER_EXTENSIONS.GIF, image_picker_constants.IMAGE_PICKER_EXTENSIONS.SVG, image_picker_constants.IMAGE_PICKER_EXTENSIONS.JPEG] : _ref$allowedExtension,
+    allowedExtensionsLabel = _ref.allowedExtensionsLabel,
     ImageEditor = _ref.ImageEditor;
   var _useTranslation = useTranslation.useTranslation(),
     _useTranslation2 = _rollupPluginBabelHelpers.slicedToArray(_useTranslation, 1),
@@ -164,13 +165,22 @@ var XhrImagePicker = function XhrImagePicker(_ref) {
   var renderImageEditor = function renderImageEditor(defaultProps) {
     return ImageEditor ? (/*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement(ImageEditor, _rollupPluginBabelHelpers.objectSpread2({}, defaultProps)))) : null;
   };
-  return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement(image_picker.ImagePicker, {
+  return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "aurora-relative"
+  }, isLoading && (/*#__PURE__*/React__default['default'].createElement("div", {
+    className: "aurora-absolute aurora-z-30 aurora-h-full aurora-w-full"
+  }, /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "aurora-bg aurora-h-full aurora-w-full aurora-border aurora-border-dashed aurora-rounded-8 aurora-flex aurora-flex-col aurora-items-center aurora-justify-center"
+  }, /*#__PURE__*/React__default['default'].createElement(loader.Loader, null), /*#__PURE__*/React__default['default'].createElement("span", {
+    className: "aurora-text-subtle-light aurora-text-xs aurora-pt-2"
+  }, "".concat(t('Transfering file...')))))), /*#__PURE__*/React__default['default'].createElement(image_picker.ImagePicker, {
     id: id,
     name: name,
     onChange: handleControlChange,
     onError: onError,
     errors: errors,
     allowedExtensions: allowedExtensions,
+    allowedExtensionsLabel: allowedExtensionsLabel,
     initialFile: initialImageFile.current,
     onImageSizeUpdated: onImageSizeUpdated,
     topButtons: !!ImageEditor && imageExtenstion !== 'svg' && (/*#__PURE__*/React__default['default'].createElement("button", {
@@ -178,16 +188,16 @@ var XhrImagePicker = function XhrImagePicker(_ref) {
         return showModal(modalId);
       },
       type: "button",
-      className: " aurora-absolute aurora-top-2 aurora-right-2 aurora-flex aurora-items-center aurora-gap-1 aurora-border aurora-rounded-full aurora-px-3 aurora-py-[6px] aurora-bg"
+      className: "aurora-absolute aurora-top-2 aurora-right-2 aurora-z-10 aurora-flex aurora-items-center aurora-gap-1 aurora-border aurora-rounded-full aurora-px-3 aurora-py-[6px] aurora-bg"
     }, /*#__PURE__*/React__default['default'].createElement(image_edit_icon.ImageEditLineIcon, {
       className: "aurora-w-4 aurora-h-4 aurora-fill"
     }), /*#__PURE__*/React__default['default'].createElement("span", {
       className: "aurora-text-xs aurora-text aurora-font-semibold"
     }, "".concat(t('Edit'))))),
     editedImageResult: imageEditorResult
-  }), isLoading && (/*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement(loader.Loader, null), /*#__PURE__*/React__default['default'].createElement("span", null, "".concat(t('Transfering file...')))))), !!ImageEditor && (/*#__PURE__*/React__default['default'].createElement(modal.Modal, {
+  })), !!ImageEditor && (/*#__PURE__*/React__default['default'].createElement(modal.Modal, {
     name: modalId,
-    header: t('Edit image'),
+    header: /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, t('Edit image')),
     width: "l"
   }, renderImageEditor({
     src: imageEditorSrc,

package/build/cjs/packages/aurora/src/components/xhr_image_picker/xhr_image_picker.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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/constants/css_tokens/css_background_tokens.js

@@ -6,6 +6,7 @@ var CSS_BACKGROUND_TOKENS = {
   hover: 'hover',
   active: 'active',
   subtle: 'subtle',
+  subtleStrong: 'subtle-strong',
   transparent: 'transparent',
   transparentHover: 'transparent-hover',
   transparentActive: 'transparent-active',

package/build/cjs/packages/aurora/src/constants/css_tokens/css_background_tokens.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;"}
+{"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;"}

package/build/cjs/packages/aurora/src/constants/css_tokens/css_border_color_tokens.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var CSS_BORDER_COLOR_TOKENS = {
   subtle: 'subtle',
   strong: 'strong',
+  extraStrong: 'extraStrong',
   active: 'active',
   inverse: 'inverse',
   inverseSubtle: 'inverse-subtle',

package/build/cjs/packages/aurora/src/constants/css_tokens/css_border_color_tokens.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;"}
+{"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;"}

package/build/cjs/packages/aurora/src/hooks/use_click_outside.js

@@ -4,13 +4,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 
-/**
- * adds listener on mousedown event which detects if click was inside elemnents provided in refs array. If click was
- * made outside element callback function is called
- * @param {Array<React.RefObject<HTMLElement>>} refs array of refs
- * @param {Function} callback called when click is made outside refs elements
- * @returns {void} void
- */
 function useClickOutside(_ref) {
   var refs = _ref.refs,
     config = _ref.config,
@@ -19,8 +12,15 @@ function useClickOutside(_ref) {
     _ref2$documents = _ref2.documents,
     documents = _ref2$documents === void 0 ? [globalThis.document] : _ref2$documents,
     _ref2$blackListSelect = _ref2.blackListSelectors,
-    blackListSelectors = _ref2$blackListSelect === void 0 ? [] : _ref2$blackListSelect;
+    blackListSelectors = _ref2$blackListSelect === void 0 ? [] : _ref2$blackListSelect,
+    _ref2$eventName = _ref2.eventName,
+    eventName = _ref2$eventName === void 0 ? 'mousedown' : _ref2$eventName;
   function handleClickOutside(event) {
+    // Don't trigger if text is being selected
+    var selection = window.getSelection();
+    if (selection && selection.toString().length > 0) {
+      return;
+    }
     var isBlacklisted = blackListSelectors.reduce(function test(acc, blackListSelector) {
       var $el = documents.reduce(function test(acc, doc) {
         return acc || doc.querySelector(blackListSelector);
@@ -36,11 +36,11 @@ function useClickOutside(_ref) {
   }
   React.useEffect(function () {
     documents.forEach(function (document) {
-      return document.addEventListener('click', handleClickOutside, true);
+      return document.addEventListener(eventName, handleClickOutside, true);
     });
     return function () {
       documents.forEach(function (document) {
-        return document.removeEventListener('click', handleClickOutside, true);
+        return document.removeEventListener(eventName, handleClickOutside, true);
       });
     };
   });

package/build/cjs/packages/aurora/src/hooks/use_resize_observer.js

@@ -0,0 +1,51 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var _rollupPluginBabelHelpers = require('../../../../_virtual/_rollupPluginBabelHelpers.js');
+
+var useResizeObserver = function useResizeObserver(ref, callback) {
+  var _useState = React.useState(null),
+    _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
+    size = _useState2[0],
+    setSize = _useState2[1];
+  var observerRef = React.useRef(null);
+  React.useEffect(function () {
+    var element = ref.current;
+    if (!element) return;
+    var handleResize = function handleResize(entries) {
+      var _iterator = _rollupPluginBabelHelpers.createForOfIteratorHelper(entries),
+        _step;
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var entry = _step.value;
+          var _entry$contentRect = entry.contentRect,
+            width = _entry$contentRect.width,
+            height = _entry$contentRect.height;
+          var newSize = {
+            width: width,
+            height: height
+          };
+          setSize(newSize);
+          callback === null || callback === void 0 ? void 0 : callback(newSize);
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+    };
+    observerRef.current = new ResizeObserver(handleResize);
+    observerRef.current.observe(element);
+    return function () {
+      var _observerRef$current;
+      (_observerRef$current = observerRef.current) === null || _observerRef$current === void 0 ? void 0 : _observerRef$current.disconnect();
+      observerRef.current = null;
+    };
+  }, [callback, ref]);
+  return size;
+};
+
+exports.useResizeObserver = useResizeObserver;
+//# sourceMappingURL=use_resize_observer.js.map

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

package/build/cjs/packages/aurora/src/hooks/use_scroll.js

@@ -0,0 +1,41 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var _rollupPluginBabelHelpers = require('../../../../_virtual/_rollupPluginBabelHelpers.js');
+
+function useScroll(elRef) {
+  var _useState = React.useState(true),
+    _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
+    atTop = _useState2[0],
+    setAtTop = _useState2[1];
+  var _useState3 = React.useState(false),
+    _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
+    atBottom = _useState4[0],
+    setAtBottom = _useState4[1];
+  React.useEffect(function () {
+    var element = elRef.current;
+    if (!element) return;
+    function handleScroll() {
+      if (!element) return;
+      setAtTop(element.scrollTop === 0);
+      var bottom = element.scrollHeight - element.scrollTop === element.clientHeight;
+      setAtBottom(bottom);
+    }
+    handleScroll();
+    element.addEventListener('scroll', handleScroll);
+    return function () {
+      return element.removeEventListener('scroll', handleScroll);
+    };
+  }, [elRef]);
+  return React.useMemo(function () {
+    return {
+      atTop: atTop,
+      atBottom: atBottom
+    };
+  }, [atTop, atBottom]);
+}
+
+exports.useScroll = useScroll;
+//# sourceMappingURL=use_scroll.js.map

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