@dreamcommerce/aurora 3.0.0-9 → 3.0.0-90

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

@@ -1,20 +1,9 @@
 import React from 'react';
-import { defineProperty as _defineProperty } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
-import { cva } from '../../../../../external/class-variance-authority/dist/index.mjs.js';
+import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2, defineProperty as _defineProperty } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
 import { cn } from '../../utilities/cn.js';
-import { TYPOGRAPHY_COMPONENT_TYPES, TYPOGRAPHY_TRANSFORM_TYPES, TYPOGRAPHY_WEIGHT_TYPES } from './typography_constants.js';
+import { typographyVariants } from './typography_variants.js';
 
-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'),
-    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'),
-    defaultVariants: {
-      variant: TYPOGRAPHY_COMPONENT_TYPES.p,
-      weight: TYPOGRAPHY_WEIGHT_TYPES.normal
-    }
-  }
-});
+var _excluded = ["variant", "as", "style", "color", "weight", "size", "lineHeight", "transform", "children", "className"];
 var Typography = function Typography(_ref) {
   var variant = _ref.variant,
     _ref$as = _ref.as,
@@ -22,17 +11,23 @@ var Typography = function Typography(_ref) {
     style = _ref.style,
     color = _ref.color,
     weight = _ref.weight,
+    size = _ref.size,
+    lineHeight = _ref.lineHeight,
     transform = _ref.transform,
-    children = _ref.children;
-  return /*#__PURE__*/React.createElement(as, {
+    children = _ref.children,
+    className = _ref.className,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(as, _objectSpread2({
     className: cn(typographyVariants({
       variant: variant,
       transform: transform,
-      weight: weight
-    }), _defineProperty({}, "aurora-text-".concat(color), !!color)),
+      weight: weight,
+      size: size,
+      lineHeight: lineHeight
+    }), _defineProperty({}, "aurora-text-".concat(color), !!color), className),
     style: style
-  }, children);
+  }, rest), children);
 };
 
-export { Typography, typographyVariants };
+export { Typography };
 //# sourceMappingURL=typography.js.map

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

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA,oBAAoB,oEAAwE;AAC5F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"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/esm/packages/aurora/src/components/typography/typography_types.d.ts

@@ -1,11 +1,11 @@
-/// <reference types="react" />
 import { TYPOGRAPHY_COMPONENT_TYPES } from "./typography_constants";
 import { Any } from 'ts-toolbelt';
 import { TCssTextColorTokens } from "../../constants/css_tokens/css_tokens_types";
 import type { VariantProps } from 'class-variance-authority';
-import { typographyVariants } from "./typography";
+import { typographyVariants } from "./typography_variants";
+import * as React from 'react';
 export declare type TTypographyComponentTypes = Any.Keys<typeof TYPOGRAPHY_COMPONENT_TYPES>;
-export declare type TTypographyProps = {
+export declare type TTypographyProps = React.HTMLAttributes<HTMLElement> & {
     as?: TTypographyComponentTypes;
     color?: TCssTextColorTokens;
     style?: React.CSSProperties;

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

@@ -1,5 +1,6 @@
 import '@auroraComponents/typography/typography_constants';
 import 'ts-toolbelt';
 import '@auroraConstants/css_tokens/css_tokens_types';
-import '@auroraComponents/typography/typography';
+import '@auroraComponents/typography/typography_variants';
+import 'react';
 //# sourceMappingURL=typography_types.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"typography_types.js","sourceRoot":"","sources":["../../../../../../../src/components/typography/typography_types.ts"],"names":[],"mappings":"AAAA,OAA2C,mDAAmD,CAAC;AAC/F,OAAoB,aAAa,CAAC;AAClC,OAAoC,8CAA8C,CAAC;AAEnF,OAAmC,yCAAyC,CAAC"}
+{"version":3,"file":"typography_types.js","sourceRoot":"","sources":["../../../../../../../src/components/typography/typography_types.ts"],"names":[],"mappings":"AAAA,OAA2C,mDAAmD,CAAC;AAC/F,OAAoB,aAAa,CAAC;AAClC,OAAoC,8CAA8C,CAAC;AAEnF,OAAmC,kDAAkD,CAAC;AACtF,OAAuB,OAAO,CAAC"}

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

@@ -0,0 +1,8 @@
+export declare const typographyVariants: (props?: ({
+    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;
+    lineHeight?: "xs" | "s" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | null | undefined;
+    defaultVariants?: "variant" | "weight" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

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

@@ -0,0 +1,22 @@
+import { defineProperty as _defineProperty } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
+import { CSS_FONT_SIZE_TOKENS } from '../../constants/css_tokens/css_font_size_tokens.js';
+import { cva } from '../../../../../external/class-variance-authority/dist/index.mjs.js';
+import { TYPOGRAPHY_COMPONENT_TYPES, TYPOGRAPHY_TRANSFORM_TYPES, TYPOGRAPHY_WEIGHT_TYPES } from './typography_constants.js';
+import { CSS_LINE_HEIGHT_TOKENS } from '../../constants/css_tokens/css_line_height_tokens.js';
+
+var typographyVariants = cva('', {
+  variants: {
+    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'),
+    defaultVariants: {
+      variant: TYPOGRAPHY_COMPONENT_TYPES.p,
+      weight: TYPOGRAPHY_WEIGHT_TYPES.normal
+    }
+  }
+});
+
+export { typographyVariants };
+//# sourceMappingURL=typography_variants.js.map

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

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

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.js.map

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

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,194 @@
+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", null, /*#__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-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
+  }), isLoading && (/*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Loader, null), /*#__PURE__*/React.createElement("span", null, "".concat(t('Transfering file...')))))), !!ImageEditor && (/*#__PURE__*/React.createElement(Modal, {
+    name: modalId,
+    header: 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;"}

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.js

@@ -1,46 +1,48 @@
-export const CSS_BACKGROUND_TOKENS = {
-    hover: 'hover',
-    active: 'active',
-    subtle: 'subtle',
-    transparent: 'transparent',
-    transparentHover: 'transparent-hover',
-    transparentActive: 'transparent-active',
-    transparentSubtle: 'transparent-subtle',
-    inverse: 'inverse',
-    inverseHover: 'inverse-hover',
-    inverseActive: 'inverse-active',
-    inverseSubtle: 'inverse-subtle',
-    highlighted: 'highlighted',
-    primary: 'primary',
-    primaryHover: 'primary-hover',
-    primaryActive: 'primary-active',
-    primaryDark: 'primary-dark',
-    primaryTransparent: 'primary-transparent',
-    primaryTransparentHover: 'primary-transparent-hover',
-    primaryTransparentActive: 'primary-transparent-active',
-    successSubtle: 'success-subtle',
-    successSubtleHover: 'success-subtle-hover',
-    successSubtleActive: 'success-subtle-active',
-    success: 'success',
-    successHover: 'success-hover',
-    successActive: 'success-active',
-    dangerSubtle: 'danger-subtle',
-    dangerSubtleHover: 'danger-subtle-hover',
-    dangerSubtleActive: 'danger-subtle-active',
-    danger: 'danger',
-    dangerHover: 'danger-hover',
-    dangerActive: 'danger-active',
-    warningSubtle: 'warning-subtle',
-    warningSubtleHover: 'warning-subtle-hover',
-    warningSubtleActive: 'warning-subtle-active',
-    warning: 'warning',
-    warningHover: 'warning-hover',
-    warningActive: 'warning-active',
-    infoSubtle: 'info-subtle',
-    infoSubtleHover: 'info-subtle-hover',
-    infoSubtleActive: 'info-subtle-active',
-    info: 'info',
-    infoHover: 'info-hover',
-    infoActive: 'info-active'
+var CSS_BACKGROUND_TOKENS = {
+  hover: 'hover',
+  active: 'active',
+  subtle: 'subtle',
+  transparent: 'transparent',
+  transparentHover: 'transparent-hover',
+  transparentActive: 'transparent-active',
+  transparentSubtle: 'transparent-subtle',
+  inverse: 'inverse',
+  inverseHover: 'inverse-hover',
+  inverseActive: 'inverse-active',
+  inverseSubtle: 'inverse-subtle',
+  highlighted: 'highlighted',
+  primary: 'primary',
+  primaryHover: 'primary-hover',
+  primaryActive: 'primary-active',
+  primaryDark: 'primary-dark',
+  primaryTransparent: 'primary-transparent',
+  primaryTransparentHover: 'primary-transparent-hover',
+  primaryTransparentActive: 'primary-transparent-active',
+  successSubtle: 'success-subtle',
+  successSubtleHover: 'success-subtle-hover',
+  successSubtleActive: 'success-subtle-active',
+  success: 'success',
+  successHover: 'success-hover',
+  successActive: 'success-active',
+  dangerSubtle: 'danger-subtle',
+  dangerSubtleHover: 'danger-subtle-hover',
+  dangerSubtleActive: 'danger-subtle-active',
+  danger: 'danger',
+  dangerHover: 'danger-hover',
+  dangerActive: 'danger-active',
+  warningSubtle: 'warning-subtle',
+  warningSubtleHover: 'warning-subtle-hover',
+  warningSubtleActive: 'warning-subtle-active',
+  warning: 'warning',
+  warningHover: 'warning-hover',
+  warningActive: 'warning-active',
+  infoSubtle: 'info-subtle',
+  infoSubtleHover: 'info-subtle-hover',
+  infoSubtleActive: 'info-subtle-active',
+  info: 'info',
+  infoHover: 'info-hover',
+  infoActive: 'info-active'
 };
-//# sourceMappingURL=css_background_tokens.js.map
+
+export { CSS_BACKGROUND_TOKENS };
+//# sourceMappingURL=css_background_tokens.js.map

package/build/esm/packages/aurora/src/constants/css_tokens/css_background_tokens.js.map

@@ -1 +1 @@
-{"version":3,"file":"css_background_tokens.js","sourceRoot":"","sources":["../../../../../../../src/constants/css_tokens/css_background_tokens.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,qBAAqB,GAAG;IACjC,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,QAAQ;IAChB,MAAM,EAAE,QAAQ;IAChB,WAAW,EAAE,aAAa;IAC1B,gBAAgB,EAAE,mBAAmB;IACrC,iBAAiB,EAAE,oBAAoB;IACvC,iBAAiB,EAAE,oBAAoB;IACvC,OAAO,EAAE,SAAS;IAClB,YAAY,EAAE,eAAe;IAC7B,aAAa,EAAE,gBAAgB;IAC/B,aAAa,EAAE,gBAAgB;IAC/B,WAAW,EAAE,aAAa;IAC1B,OAAO,EAAE,SAAS;IAClB,YAAY,EAAE,eAAe;IAC7B,aAAa,EAAE,gBAAgB;IAC/B,WAAW,EAAE,cAAc;IAC3B,kBAAkB,EAAE,qBAAqB;IACzC,uBAAuB,EAAE,2BAA2B;IACpD,wBAAwB,EAAE,4BAA4B;IACtD,aAAa,EAAE,gBAAgB;IAC/B,kBAAkB,EAAE,sBAAsB;IAC1C,mBAAmB,EAAE,uBAAuB;IAC5C,OAAO,EAAE,SAAS;IAClB,YAAY,EAAE,eAAe;IAC7B,aAAa,EAAE,gBAAgB;IAC/B,YAAY,EAAE,eAAe;IAC7B,iBAAiB,EAAE,qBAAqB;IACxC,kBAAkB,EAAE,sBAAsB;IAC1C,MAAM,EAAE,QAAQ;IAChB,WAAW,EAAE,cAAc;IAC3B,YAAY,EAAE,eAAe;IAC7B,aAAa,EAAE,gBAAgB;IAC/B,kBAAkB,EAAE,sBAAsB;IAC1C,mBAAmB,EAAE,uBAAuB;IAC5C,OAAO,EAAE,SAAS;IAClB,YAAY,EAAE,eAAe;IAC7B,aAAa,EAAE,gBAAgB;IAC/B,UAAU,EAAE,aAAa;IACzB,eAAe,EAAE,mBAAmB;IACpC,gBAAgB,EAAE,oBAAoB;IACtC,IAAI,EAAE,MAAM;IACZ,SAAS,EAAE,YAAY;IACvB,UAAU,EAAE,aAAa;CACnB,CAAC"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/constants/css_tokens/css_border_color_tokens.d.ts

@@ -14,5 +14,6 @@ export declare const CSS_BORDER_COLOR_TOKENS: {
     readonly info: "info";
     readonly success: "success";
     readonly primary: "primary";
+    readonly primaryHover: "primary-hover";
     readonly transparent: "transparent";
 };

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

@@ -14,6 +14,7 @@ var CSS_BORDER_COLOR_TOKENS = {
   info: 'info',
   success: 'success',
   primary: 'primary',
+  primaryHover: 'primary-hover',
   transparent: 'transparent'
 };
 

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