@dreamcommerce/aurora 3.0.0-26 → 3.0.0-261

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

package/build/esm/packages/aurora/src/components/tree/context/tree_provider.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { TPropsWithChildren } from "../../../typings/general";
+export declare const TreeProvider: ({ children }: TPropsWithChildren) => React.JSX.Element;

package/build/esm/packages/aurora/src/components/tree/context/tree_provider.js

@@ -0,0 +1,66 @@
+import React, { useState } from 'react';
+import { slicedToArray as _slicedToArray, toConsumableArray as _toConsumableArray, objectSpread2 as _objectSpread2 } from '../../../../../../_virtual/_rollupPluginBabelHelpers.js';
+import { TreeContextProvider } from './tree_context.js';
+
+var TreeProvider = function TreeProvider(_ref) {
+  var children = _ref.children;
+  var _useState = useState([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    nodes = _useState2[0],
+    setNodes = _useState2[1];
+  var value = {
+    addNode: function addNode(node) {
+      setNodes(function (nodes) {
+        return [].concat(_toConsumableArray(nodes), [node]);
+      });
+    },
+    updateNode: function updateNode(nodeId, node) {
+      setNodes(function (nodes) {
+        return nodes.map(function (n) {
+          return n.id === nodeId ? _objectSpread2(_objectSpread2({}, n), node) : n;
+        });
+      });
+    },
+    getNode: function getNode(nodeId) {
+      return nodes.find(function (node) {
+        return node.id === nodeId;
+      });
+    },
+    removeNode: function removeNode(nodeId) {
+      setNodes(function (nodes) {
+        return nodes.filter(function (node) {
+          return node.id !== nodeId;
+        });
+      });
+    },
+    toggleNode: function toggleNode(nodeId) {
+      setNodes(function (nodes) {
+        return nodes.map(function (node) {
+          return node.id === nodeId ? _objectSpread2(_objectSpread2({}, node), {}, {
+            expanded: !node.expanded
+          }) : node;
+        });
+      });
+    },
+    closeNode: function closeNode(nodeId) {
+      setNodes(function (nodes) {
+        return nodes.map(function (node) {
+          return node.id === nodeId ? _objectSpread2(_objectSpread2({}, node), {}, {
+            expanded: false
+          }) : node;
+        });
+      });
+    },
+    hasNode: function hasNode(nodeId) {
+      return !!nodes.find(function (node) {
+        return node.id === nodeId;
+      });
+    }
+  };
+  return /*#__PURE__*/React.createElement(TreeContextProvider, {
+    value: value
+  }, children);
+};
+
+export { TreeProvider };
+//# sourceMappingURL=tree_provider.js.map

package/build/esm/packages/aurora/src/components/tree/context/tree_provider.js.map

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

package/build/esm/packages/aurora/src/components/tree/css_classes.d.ts

@@ -0,0 +1,22 @@
+export declare const TREE_CSS_CLASSES: {
+    readonly tree: "tree";
+    readonly treeNode: "tree__node";
+};
+export declare const TREE_NODE_CSS_CLASSES: {
+    readonly treeNode: "tree-node";
+    readonly treeNodeTogglerBtn: "tree-node__toggler-btn";
+    readonly treeNodeTogglerBtnExpanded: "tree-node__toggler-btn_expanded";
+    readonly treeNodeTogglerBtnIcon: "tree-node__toggler-btn-icon";
+    readonly treeNodeLabelContent: "tree-node__label-content";
+    readonly treeNodeLabel: "tree-node__label";
+    readonly treeNodeChildren: "tree-node__children";
+    readonly treeNodeChildrenEnter: "tree-node__children-enter";
+    readonly treeNodeChildrenEnterActive: "tree-node__children-enter-active";
+    readonly treeNodeChildrenExit: "tree-node__children-exit";
+    readonly treeNodeChildrenExitActive: "tree-node__children-exit-active";
+    readonly treeNodeChildrenExitDone: "tree-node__children-exit-done";
+    readonly treeNodeExpanded: "tree-node_expanded";
+    readonly treeNodeDisabled: "tree-node_disabled";
+    readonly treeNodeFocused: "tree-node_focused";
+    readonly treeNodeWithoutChildren: "tree-node_without-children";
+};

package/build/esm/packages/aurora/src/components/tree/css_classes.js

@@ -0,0 +1,25 @@
+const baseCssClass = 'tree';
+export const TREE_CSS_CLASSES = {
+    tree: baseCssClass,
+    treeNode: `${baseCssClass}__node`
+};
+const treeNodeBaseCssClass = `tree-node`;
+export const TREE_NODE_CSS_CLASSES = {
+    treeNode: treeNodeBaseCssClass,
+    treeNodeTogglerBtn: `${treeNodeBaseCssClass}__toggler-btn`,
+    treeNodeTogglerBtnExpanded: `${treeNodeBaseCssClass}__toggler-btn_expanded`,
+    treeNodeTogglerBtnIcon: `${treeNodeBaseCssClass}__toggler-btn-icon`,
+    treeNodeLabelContent: `${treeNodeBaseCssClass}__label-content`,
+    treeNodeLabel: `${treeNodeBaseCssClass}__label`,
+    treeNodeChildren: `${treeNodeBaseCssClass}__children`,
+    treeNodeChildrenEnter: `${treeNodeBaseCssClass}__children-enter`,
+    treeNodeChildrenEnterActive: `${treeNodeBaseCssClass}__children-enter-active`,
+    treeNodeChildrenExit: `${treeNodeBaseCssClass}__children-exit`,
+    treeNodeChildrenExitActive: `${treeNodeBaseCssClass}__children-exit-active`,
+    treeNodeChildrenExitDone: `${treeNodeBaseCssClass}__children-exit-done`,
+    treeNodeExpanded: `${treeNodeBaseCssClass}_expanded`,
+    treeNodeDisabled: `${treeNodeBaseCssClass}_disabled`,
+    treeNodeFocused: `${treeNodeBaseCssClass}_focused`,
+    treeNodeWithoutChildren: `${treeNodeBaseCssClass}_without-children`
+};
+//# sourceMappingURL=css_classes.js.map

package/build/esm/packages/aurora/src/components/tree/css_classes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"css_classes.js","sourceRoot":"","sources":["../../../../../../../src/components/tree/css_classes.ts"],"names":[],"mappings":"AAAA,MAAM,YAAY,GAAG,MAAM,CAAC;AAE5B,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC5B,IAAI,EAAE,YAAY;IAClB,QAAQ,EAAE,GAAG,YAAY,QAAQ;CAC3B,CAAC;AAEX,MAAM,oBAAoB,GAAG,WAAW,CAAC;AAEzC,MAAM,CAAC,MAAM,qBAAqB,GAAG;IACjC,QAAQ,EAAE,oBAAoB;IAC9B,kBAAkB,EAAE,GAAG,oBAAoB,eAAe;IAC1D,0BAA0B,EAAE,GAAG,oBAAoB,wBAAwB;IAC3E,sBAAsB,EAAE,GAAG,oBAAoB,oBAAoB;IACnE,oBAAoB,EAAE,GAAG,oBAAoB,iBAAiB;IAC9D,aAAa,EAAE,GAAG,oBAAoB,SAAS;IAC/C,gBAAgB,EAAE,GAAG,oBAAoB,YAAY;IACrD,qBAAqB,EAAE,GAAG,oBAAoB,kBAAkB;IAChE,2BAA2B,EAAE,GAAG,oBAAoB,yBAAyB;IAC7E,oBAAoB,EAAE,GAAG,oBAAoB,iBAAiB;IAC9D,0BAA0B,EAAE,GAAG,oBAAoB,wBAAwB;IAC3E,wBAAwB,EAAE,GAAG,oBAAoB,sBAAsB;IACvE,gBAAgB,EAAE,GAAG,oBAAoB,WAAW;IACpD,gBAAgB,EAAE,GAAG,oBAAoB,WAAW;IACpD,eAAe,EAAE,GAAG,oBAAoB,UAAU;IAClD,uBAAuB,EAAE,GAAG,oBAAoB,mBAAmB;CAC7D,CAAC"}

package/build/esm/packages/aurora/src/components/tree/hooks/tree_hook.d.ts

@@ -0,0 +1 @@
+export declare const useTree: () => import("../context/tree_context").ITreeContext;

package/build/esm/packages/aurora/src/components/tree/hooks/tree_hook.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { TreeContext } from '../context/tree_context.js';
+
+var useTree = function useTree() {
+  var context = React.useContext(TreeContext);
+  if (!context) {
+    throw new Error('useTree must be used within a TreeContextProvider');
+  }
+  return context;
+};
+
+export { useTree };
+//# sourceMappingURL=tree_hook.js.map

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

package/build/esm/packages/aurora/src/components/tree/hooks/tree_node_hook.d.ts

@@ -0,0 +1,2 @@
+import { ITreeNode } from "../context/tree_context";
+export declare const useTreeNode: (nodeId: string, props?: Partial<ITreeNode>) => ITreeNode | undefined;

package/build/esm/packages/aurora/src/components/tree/hooks/tree_node_hook.js

@@ -0,0 +1,24 @@
+import { useEffect } from 'react';
+import { objectSpread2 as _objectSpread2 } from '../../../../../../_virtual/_rollupPluginBabelHelpers.js';
+import { useTree } from './tree_hook.js';
+
+var useTreeNode = function useTreeNode(nodeId, props) {
+  var treeApi = useTree();
+  useEffect(function () {
+    if (!treeApi.hasNode(nodeId)) treeApi.addNode(_objectSpread2({
+      id: nodeId
+    }, props));
+  });
+  useEffect(function () {
+    if (treeApi.hasNode(nodeId) && props) treeApi.updateNode(nodeId, props);
+  }, [props === null || props === void 0 ? void 0 : props.expanded]);
+  useEffect(function () {
+    return function () {
+      return treeApi.removeNode(nodeId);
+    };
+  }, []);
+  return treeApi.getNode(nodeId);
+};
+
+export { useTreeNode };
+//# sourceMappingURL=tree_node_hook.js.map

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

package/build/esm/packages/aurora/src/components/tree/tree.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+declare type TTreeProps = {
+    cssClassNames?: string;
+    cssStyles?: React.CSSProperties;
+    onMouseEnter?: (event: React.MouseEvent<HTMLUListElement, MouseEvent>) => void;
+    onMouseLeave?: (event: React.MouseEvent<HTMLUListElement, MouseEvent>) => void;
+};
+export declare const Tree: React.ForwardRefExoticComponent<TTreeProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLUListElement>>;
+export default Tree;

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

@@ -0,0 +1,25 @@
+import React from 'react';
+import { cn } from '../../utilities/cn.js';
+import { TREE_ROLE_ATTRIBUTE } from './constants.js';
+import { TreeProvider } from './context/tree_provider.js';
+
+var Tree = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    cssClassNames = _ref.cssClassNames,
+    cssStyles = _ref.cssStyles,
+    onMouseEnter = _ref.onMouseEnter,
+    onMouseLeave = _ref.onMouseLeave;
+  return /*#__PURE__*/React.createElement(TreeProvider, null, /*#__PURE__*/React.createElement("ul", {
+    role: TREE_ROLE_ATTRIBUTE,
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave,
+    ref: ref,
+    style: cssStyles,
+    className: cn('aurora-flex aurora-flex-col aurora-gap-2 aurora-m-0 aurora-p-0 aurora-list-none', cssClassNames)
+  }, children));
+});
+Tree.displayName = 'Tree';
+
+export default Tree;
+export { Tree };
+//# sourceMappingURL=tree.js.map

package/build/esm/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;"}

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

@@ -1,4 +1,4 @@
-import t__default from 'react';
+import React from 'react';
 import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2, defineProperty as _defineProperty } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
 import { cn } from '../../utilities/cn.js';
 import { typographyVariants } from './typography_variants.js';
@@ -17,14 +17,14 @@ var Typography = function Typography(_ref) {
     children = _ref.children,
     className = _ref.className,
     rest = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/t__default.createElement(as, _objectSpread2({
+  return /*#__PURE__*/React.createElement(as, _objectSpread2({
     className: cn(typographyVariants({
       variant: variant,
       transform: transform,
       weight: weight,
       size: size,
       lineHeight: lineHeight
-    }), _defineProperty({}, "aurora-text-".concat(color), !!color), className),
+    }), _defineProperty(_defineProperty({}, "aurora-text-".concat(color), !!color), 'aurora-text', !color), className),
     style: style
   }, rest), children);
 };

package/build/esm/packages/aurora/src/components/typography/typography_variants.d.ts

@@ -1,5 +1,5 @@
 export declare const typographyVariants: (props?: ({
-    variant?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | null | undefined;
+    variant?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "caption" | null | undefined;
     transform?: "uppercase" | "lowercase" | "capitalize" | null | undefined;
     weight?: "normal" | "medium" | "semibold" | "bold" | "extrabold" | null | undefined;
     size?: "xs" | "s" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | null | undefined;

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

@@ -6,11 +6,11 @@ import { CSS_LINE_HEIGHT_TOKENS } from '../../constants/css_tokens/css_line_heig
 
 var typographyVariants = cva('', {
   variants: {
-    variant: _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, TYPOGRAPHY_COMPONENT_TYPES.h1, 'aurora-text-6xl aurora-font-bold aurora-tracking-4xs'), TYPOGRAPHY_COMPONENT_TYPES.h2, 'aurora-text-5xl aurora-font-bold aurora-tracking-3xs'), TYPOGRAPHY_COMPONENT_TYPES.h3, 'aurora-text-4xl aurora-font-bold aurora-tracking-2xs'), TYPOGRAPHY_COMPONENT_TYPES.h4, 'aurora-text-3xl aurora-font-bold aurora-tracking-xs'), TYPOGRAPHY_COMPONENT_TYPES.h5, 'aurora-text-2xl aurora-font-bold aurora-tracking-s'), TYPOGRAPHY_COMPONENT_TYPES.h6, 'aurora-text-xl aurora-font-bold'), TYPOGRAPHY_COMPONENT_TYPES.p, 'aurora-text-xs'),
+    variant: _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, TYPOGRAPHY_COMPONENT_TYPES.h1, 'aurora-text-6xl aurora-font-bold aurora-tracking-4xs'), TYPOGRAPHY_COMPONENT_TYPES.h2, 'aurora-text-5xl aurora-font-bold aurora-tracking-3xs'), TYPOGRAPHY_COMPONENT_TYPES.h3, 'aurora-text-4xl aurora-font-bold aurora-tracking-2xs'), TYPOGRAPHY_COMPONENT_TYPES.h4, 'aurora-text-3xl aurora-font-bold aurora-tracking-xs'), TYPOGRAPHY_COMPONENT_TYPES.h5, 'aurora-text-2xl aurora-font-bold aurora-tracking-s'), TYPOGRAPHY_COMPONENT_TYPES.h6, 'aurora-text-xl aurora-font-bold'), TYPOGRAPHY_COMPONENT_TYPES.p, 'aurora-text-xs'), "caption", 'aurora-font-extrabold aurora-tracking-md aurora-uppercase'),
     transform: _defineProperty(_defineProperty(_defineProperty({}, TYPOGRAPHY_TRANSFORM_TYPES.uppercase, 'aurora-uppercase'), TYPOGRAPHY_TRANSFORM_TYPES.lowercase, 'aurora-lowercase'), TYPOGRAPHY_TRANSFORM_TYPES.capitalize, 'aurora-capitalize'),
     weight: _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, TYPOGRAPHY_WEIGHT_TYPES.normal, 'aurora-font-normal'), TYPOGRAPHY_WEIGHT_TYPES.medium, 'aurora-font-medium'), TYPOGRAPHY_WEIGHT_TYPES.semibold, 'aurora-font-semibold'), TYPOGRAPHY_WEIGHT_TYPES.bold, 'aurora-font-bold'), TYPOGRAPHY_WEIGHT_TYPES.extrabold, 'aurora-font-extrabold'),
     size: _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, CSS_FONT_SIZE_TOKENS.xs, 'aurora-text-xs'), CSS_FONT_SIZE_TOKENS.s, 'aurora-text-s'), CSS_FONT_SIZE_TOKENS.md, 'aurora-text'), CSS_FONT_SIZE_TOKENS.lg, 'aurora-text-lg'), CSS_FONT_SIZE_TOKENS.xl, 'aurora-text-xl'), CSS_FONT_SIZE_TOKENS['2xl'], 'aurora-text-2xl'), CSS_FONT_SIZE_TOKENS['3xl'], 'aurora-text-3xl'), CSS_FONT_SIZE_TOKENS['4xl'], 'aurora-text-4xl'), CSS_FONT_SIZE_TOKENS['5xl'], 'aurora-text-5xl'), CSS_FONT_SIZE_TOKENS['6xl'], 'aurora-text-6xl'),
-    lineHeight: _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, CSS_LINE_HEIGHT_TOKENS.xs, 'aurora-line-height-xs'), CSS_LINE_HEIGHT_TOKENS.s, 'aurora-line-height-s'), CSS_LINE_HEIGHT_TOKENS.md, 'aurora-line-height'), CSS_LINE_HEIGHT_TOKENS.lg, 'aurora-line-height-lg'), CSS_LINE_HEIGHT_TOKENS.xl, 'aurora-line-height-xl'), CSS_LINE_HEIGHT_TOKENS['2xl'], 'aurora-line-height-2xl'), CSS_LINE_HEIGHT_TOKENS['3xl'], 'aurora-line-height-3xl'), CSS_LINE_HEIGHT_TOKENS['4xl'], 'aurora-line-height-4xl'), CSS_LINE_HEIGHT_TOKENS['5xl'], 'aurora-line-height-5xl'), CSS_LINE_HEIGHT_TOKENS['6xl'], 'aurora-line-height-6xl'),
+    lineHeight: _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, CSS_LINE_HEIGHT_TOKENS.xs, 'aurora-leading-xs'), CSS_LINE_HEIGHT_TOKENS.s, 'aurora-leading-s'), CSS_LINE_HEIGHT_TOKENS.md, 'aurora-leading'), CSS_LINE_HEIGHT_TOKENS.lg, 'aurora-leading-lg'), CSS_LINE_HEIGHT_TOKENS.xl, 'aurora-leading-xl'), CSS_LINE_HEIGHT_TOKENS['2xl'], 'aurora-leading-2xl'), CSS_LINE_HEIGHT_TOKENS['3xl'], 'aurora-leading-3xl'), CSS_LINE_HEIGHT_TOKENS['4xl'], 'aurora-leading-4xl'), CSS_LINE_HEIGHT_TOKENS['5xl'], 'aurora-leading-5xl'), CSS_LINE_HEIGHT_TOKENS['6xl'], 'aurora-leading-6xl'),
     defaultVariants: {
       variant: TYPOGRAPHY_COMPONENT_TYPES.p,
       weight: TYPOGRAPHY_WEIGHT_TYPES.normal

package/build/esm/packages/aurora/src/components/values_syncer/values_syncer.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { TValuesSyncerProps } from './values_syncer_types';
+export declare const ValuesSyncer: React.FC<TValuesSyncerProps>;

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

@@ -0,0 +1,82 @@
+import React, { useState, useEffect } from 'react';
+import { slicedToArray as _slicedToArray } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
+import { CSS_COLOR_TOKENS_VALUES } from '../../constants/css_tokens/css_color_tokens_values.js';
+import { cn } from '../../utilities/cn.js';
+import { Stack } from '../stack/stack.js';
+import { LockLineIcon } from '../../assets/icons/lock_icon.js';
+import { LockUnlockLineIcon } from '../../assets/icons/lock_unlock_icon.js';
+
+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,
+    onLock = _ref.onLock,
+    onChange = _ref.onChange;
+  var _useState = useState(isLocked),
+    _useState2 = _slicedToArray(_useState, 2),
+    locked = _useState2[0],
+    setLocked = _useState2[1];
+  var _useState3 = useState(initialFirstValue),
+    _useState4 = _slicedToArray(_useState3, 2),
+    firstControlValue = _useState4[0],
+    setFirstControlValue = _useState4[1];
+  var _useState5 = useState(initialSecondValue),
+    _useState6 = _slicedToArray(_useState5, 2),
+    secondControlValue = _useState6[0],
+    setSecondControlValue = _useState6[1];
+  useEffect(function () {
+    onLock === null || onLock === void 0 ? void 0 : onLock(locked);
+    if (locked) {
+      setSecondControlValue(firstControlValue);
+    }
+  }, [locked]);
+  useEffect(function () {
+    setFirstControlValue(initialFirstValue);
+    setSecondControlValue(initialSecondValue);
+  }, [initialFirstValue, initialSecondValue]);
+  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);
+    if (locked) {
+      setSecondControlValue(value);
+    }
+  };
+  var handleSecondControlChange = function handleSecondControlChange(value) {
+    setSecondControlValue(value);
+    if (locked) {
+      setFirstControlValue(value);
+    }
+  };
+  var toggleLock = function toggleLock() {
+    return setLocked(function (prev) {
+      return !prev;
+    });
+  };
+  return /*#__PURE__*/React.createElement(Stack, {
+    spacing: "3",
+    align: "end",
+    className: "aurora-items-end"
+  }, firstControl(firstControlValue, handleFirstControlChange), /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: 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.createElement(LockLineIcon, {
+    className: "aurora-h-4 aurora-w-4",
+    color: CSS_COLOR_TOKENS_VALUES.neutral900
+  })) : (/*#__PURE__*/React.createElement(LockUnlockLineIcon, {
+    className: "aurora-h-4 aurora-w-4",
+    color: CSS_COLOR_TOKENS_VALUES.neutral600
+  }))), secondControl(secondControlValue, handleSecondControlChange));
+};
+
+export { ValuesSyncer };
+//# sourceMappingURL=values_syncer.js.map

package/build/esm/packages/aurora/src/components/values_syncer/values_syncer_types.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+export declare type TValuesSyncerProps = {
+    firstControl: (value: unknown, setValue: (value: unknown) => void) => React.ReactNode;
+    secondControl: (value: unknown, setValue: (value: unknown) => void) => React.ReactNode;
+    initialFirstValue?: unknown;
+    initialSecondValue?: unknown;
+    isLocked?: boolean;
+    onLock?: (isLocked: boolean) => void;
+    onChange?: (props: {
+        first: unknown;
+        second: unknown;
+        isLocked: boolean;
+    }) => void;
+};

package/build/esm/packages/aurora/src/components/values_syncer/values_syncer_types.js

@@ -0,0 +1,2 @@
+import 'react';
+//# sourceMappingURL=values_syncer_types.js.map

package/build/esm/packages/aurora/src/components/values_syncer/values_syncer_types.js.map

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

package/build/esm/packages/aurora/src/components/xhr_image_picker/xhr_image_picker.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { IXhrImagePickerProps } from './xhr_image_picker_types';
+export declare const XhrImagePicker: React.FC<IXhrImagePickerProps>;

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

@@ -0,0 +1,202 @@
+import React, { useRef, useState, useEffect } from 'react';
+import { useTranslation } from '../../../../../external/react-i18next/dist/es/useTranslation.js';
+import { slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2, asyncToGenerator as _asyncToGenerator, regeneratorRuntime as _regeneratorRuntime } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
+import { Loader } from '../loader/loader.js';
+import { useModalsContext } from '../modal/hooks/use_modals_context.js';
+import { Modal } from '../modal/components/modal/modal.js';
+import { FileUtils } from '@dreamcommerce/utilities';
+import { IMAGE_PICKER_EXTENSIONS } from '../image_picker/image_picker_constants.js';
+import { ImagePicker } from '../image_picker/image_picker.js';
+import { REQUEST_TYPES } from '../../../../star_core/build/esm/packages/star_core/src/features/http_requester/http_requester_contants.js';
+import { useHttpApi } from '../../hooks/use_http_api.js';
+import { ImageEditLineIcon } from '../../assets/icons/image_edit_icon.js';
+
+var XhrImagePicker = function XhrImagePicker(_ref) {
+  var id = _ref.id,
+    url = _ref.url,
+    name = _ref.name,
+    onUploaded = _ref.onUploaded,
+    initialFile = _ref.initialFile,
+    errors = _ref.errors,
+    onError = _ref.onError,
+    onChange = _ref.onChange,
+    onImageSizeUpdated = _ref.onImageSizeUpdated,
+    _ref$allowedExtension = _ref.allowedExtensions,
+    allowedExtensions = _ref$allowedExtension === void 0 ? [IMAGE_PICKER_EXTENSIONS.WEBP, IMAGE_PICKER_EXTENSIONS.JPG, IMAGE_PICKER_EXTENSIONS.PNG, IMAGE_PICKER_EXTENSIONS.GIF, IMAGE_PICKER_EXTENSIONS.SVG, IMAGE_PICKER_EXTENSIONS.JPEG] : _ref$allowedExtension,
+    ImageEditor = _ref.ImageEditor;
+  var _useTranslation = useTranslation(),
+    _useTranslation2 = _slicedToArray(_useTranslation, 1),
+    t = _useTranslation2[0];
+  var httpApi = useHttpApi();
+  var pendingRequestRef = React.useRef();
+  var initialImageFile = useRef();
+  var _useModalsContext = useModalsContext(),
+    showModal = _useModalsContext.showModal,
+    hideModal = _useModalsContext.hideModal;
+  var modalId = "image-picker-editor-".concat(id);
+  var _useState = useState(),
+    _useState2 = _slicedToArray(_useState, 2),
+    initialImage = _useState2[0],
+    setInitialImage = _useState2[1];
+  var _useState3 = useState(),
+    _useState4 = _slicedToArray(_useState3, 2),
+    image = _useState4[0],
+    setImage = _useState4[1];
+  var _useState5 = useState(''),
+    _useState6 = _slicedToArray(_useState5, 2),
+    imageEditorSrc = _useState6[0],
+    setImageEditorSrc = _useState6[1];
+  var _useState7 = useState(),
+    _useState8 = _slicedToArray(_useState7, 2),
+    imageEditorResult = _useState8[0],
+    setImageEditorResult = _useState8[1];
+  var _useState9 = useState(false),
+    _useState10 = _slicedToArray(_useState9, 2),
+    isLoading = _useState10[0],
+    setIsLoading = _useState10[1];
+  var _useState11 = useState(),
+    _useState12 = _slicedToArray(_useState11, 2),
+    imageExtenstion = _useState12[0],
+    setImageExtenstion = _useState12[1];
+  var handleControlChange = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee(file) {
+      var fileList, fileAsDataUrl, _httpApi$fetch, response, cancelRequest, responseObject;
+      return _regeneratorRuntime().wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            fileList = file.fileList, fileAsDataUrl = file.fileAsDataUrl;
+            fileList && setImage(fileList[0]);
+            onChange === null || onChange === void 0 ? void 0 : onChange({
+              fileList: fileList,
+              fileAsDataUrl: fileAsDataUrl
+            });
+            if (!(!fileList || !fileList.length)) {
+              _context.next = 5;
+              break;
+            }
+            return _context.abrupt("return");
+          case 5:
+            if (pendingRequestRef.current) {
+              pendingRequestRef.current();
+              pendingRequestRef.current = undefined;
+            }
+            setIsLoading(true);
+            _httpApi$fetch = httpApi.fetch({
+              url: url,
+              method: REQUEST_TYPES.post,
+              data: fileList[0]
+            }), response = _httpApi$fetch.response, cancelRequest = _httpApi$fetch.cancelRequest;
+            pendingRequestRef.current = cancelRequest;
+            _context.next = 11;
+            return response.finally(function () {
+              return setIsLoading(false);
+            });
+          case 11:
+            responseObject = _context.sent;
+            onUploaded === null || onUploaded === void 0 ? void 0 : onUploaded({
+              fileList: fileList,
+              dataUrl: fileAsDataUrl,
+              imageId: responseObject.data.imageId
+            });
+          case 13:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function handleControlChange(_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+  useEffect(function () {
+    if (initialFile) {
+      setImageExtenstion(FileUtils.getFileExtension(initialFile === null || initialFile === void 0 ? void 0 : initialFile.fileName));
+      initialImageFile.current = initialFile;
+      var setFileFromUrl = /*#__PURE__*/function () {
+        var _ref3 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee2(fileData) {
+          var response, data, file;
+          return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+            while (1) switch (_context2.prev = _context2.next) {
+              case 0:
+                _context2.next = 2;
+                return fetch(fileData.fileUrl);
+              case 2:
+                response = _context2.sent;
+                _context2.next = 5;
+                return response.blob();
+              case 5:
+                data = _context2.sent;
+                file = new File([data], fileData.fileName);
+                setInitialImage(file);
+              case 8:
+              case "end":
+                return _context2.stop();
+            }
+          }, _callee2);
+        }));
+        return function setFileFromUrl(_x2) {
+          return _ref3.apply(this, arguments);
+        };
+      }();
+      if (!initialImageFile.current) return;
+      setFileFromUrl(initialImageFile.current);
+    }
+  }, []);
+  useEffect(function () {
+    image && setImageExtenstion(FileUtils.getFileExtension(image === null || image === void 0 ? void 0 : image.name));
+    return function () {
+      var _pendingRequestRef$cu;
+      return (_pendingRequestRef$cu = pendingRequestRef.current) === null || _pendingRequestRef$cu === void 0 ? void 0 : _pendingRequestRef$cu.call(pendingRequestRef);
+    };
+  }, [image]);
+  useEffect(function () {
+    var src = image !== null && image !== void 0 ? image : initialImage;
+    setImageEditorSrc(src !== null && src !== void 0 ? src : '');
+  }, [image, initialImage, isLoading]);
+  var renderImageEditor = function renderImageEditor(defaultProps) {
+    return ImageEditor ? (/*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(ImageEditor, _objectSpread2({}, defaultProps)))) : null;
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "aurora-relative"
+  }, isLoading && (/*#__PURE__*/React.createElement("div", {
+    className: "aurora-absolute aurora-z-30 aurora-h-full aurora-w-full"
+  }, /*#__PURE__*/React.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.createElement(Loader, null), /*#__PURE__*/React.createElement("span", {
+    className: "aurora-text-subtle-light aurora-text-xs aurora-pt-2"
+  }, "".concat(t('Transfering file...')))))), /*#__PURE__*/React.createElement(ImagePicker, {
+    id: id,
+    name: name,
+    onChange: handleControlChange,
+    onError: onError,
+    errors: errors,
+    allowedExtensions: allowedExtensions,
+    initialFile: initialImageFile.current,
+    onImageSizeUpdated: onImageSizeUpdated,
+    topButtons: !!ImageEditor && imageExtenstion !== 'svg' && (/*#__PURE__*/React.createElement("button", {
+      onClick: function onClick() {
+        return showModal(modalId);
+      },
+      type: "button",
+      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.createElement(ImageEditLineIcon, {
+      className: "aurora-w-4 aurora-h-4 aurora-fill"
+    }), /*#__PURE__*/React.createElement("span", {
+      className: "aurora-text-xs aurora-text aurora-font-semibold"
+    }, "".concat(t('Edit'))))),
+    editedImageResult: imageEditorResult
+  })), !!ImageEditor && (/*#__PURE__*/React.createElement(Modal, {
+    name: modalId,
+    header: /*#__PURE__*/React.createElement(React.Fragment, null, t('Edit image')),
+    width: "l"
+  }, renderImageEditor({
+    src: imageEditorSrc,
+    onEditionDone: function onEditionDone(result) {
+      hideModal(modalId);
+      setImageEditorResult(result);
+    }
+  }))));
+};
+
+export { XhrImagePicker };
+//# sourceMappingURL=xhr_image_picker.js.map

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

@@ -0,0 +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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/xhr_image_picker/xhr_image_picker_types.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import { IImagePicker } from "../image_picker/image_picker_types";
+export interface IXhrImagePickerProps extends Omit<IImagePicker, 'topButtons'> {
+    url: string;
+    onUploaded?: (data: TUploadedImageData) => void;
+    onUploadError?: Function;
+    ImageEditor?: React.FunctionComponent<IImageEditorProps>;
+}
+export interface IImageEditorProps {
+    src?: File | string;
+    onEditionDone?: (result: File | undefined) => void;
+}
+export declare type TUploadedImageData = {
+    fileList: FileList;
+    dataUrl: string | ArrayBuffer | null | undefined;
+    imageId: string;
+};

package/build/esm/packages/aurora/src/components/xhr_image_picker/xhr_image_picker_types.js

@@ -0,0 +1,2 @@
+import '@auroraComponents/image_picker/image_picker_types';
+//# sourceMappingURL=xhr_image_picker_types.js.map

package/build/esm/packages/aurora/src/components/xhr_image_picker/xhr_image_picker_types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"xhr_image_picker_types.js","sourceRoot":"","sources":["../../../../../../../src/components/xhr_image_picker/xhr_image_picker_types.ts"],"names":[],"mappings":"AAAA,OAA6B,mDAAmD,CAAC"}

package/build/esm/packages/aurora/src/constants/css_tokens/css_background_tokens.d.ts

@@ -2,6 +2,7 @@ export declare const CSS_BACKGROUND_TOKENS: {
     readonly hover: "hover";
     readonly active: "active";
     readonly subtle: "subtle";
+    readonly subtleStrong: "subtle-strong";
     readonly transparent: "transparent";
     readonly transparentHover: "transparent-hover";
     readonly transparentActive: "transparent-active";