@dreamcommerce/aurora 3.0.0-244 → 3.0.0-246

package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_content.js

@@ -1,10 +1,14 @@
 import React from 'react';
-import { COLOR_PICKER_WIDTH, COLOR_PICKER_HEIGHT } from '../color_picker_constants.js';
+import { objectSpread2 as _objectSpread2 } from '../../../../../../_virtual/_rollupPluginBabelHelpers.js';
+import { COLOR_PICKER_WIDTH, COLOR_PICKER_HEIGHT, COLOR_PICKER_PADDING_LEFT, COLOR_PICKER_CONTENT_MAX_HEIGHT } from '../color_picker_constants.js';
 import { useColorPicker } from '../hooks/use_color_picker.js';
 import { ColorPickerFooter } from './color_picker_footer.js';
-import { ColorPickerHeader } from './color_picker_header.js';
-import { ColorPickerImpl } from './color_picker_impl/color_picker_impl.js';
 import { ColorPickerVariables } from './color_picker_variables.js';
+import { objectToString } from '../../../../../../external/react-best-gradient-color-picker/dist/esm/utils/utils.js';
+import PickerContextWrapper from '../../../../../../external/react-best-gradient-color-picker/dist/esm/context.js';
+import { getStyles } from '../../../../../../external/react-best-gradient-color-picker/dist/esm/styles/styles.js';
+import { ColorPickerControls } from './color_picker_controls.js';
+import { ColorPickerImpl } from './color_picker_impl.js';
 
 var ColorPickerContent = function ColorPickerContent() {
   var _useColorPicker = useColorPicker(),
@@ -13,16 +17,37 @@ var ColorPickerContent = function ColorPickerContent() {
     colorVariables = _useColorPicker.colorVariables,
     isCurrentValueGradient = _useColorPicker.isCurrentValueGradient;
   var colorValue = typeof color === 'string' ? color : color.value;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ColorPickerHeader, null), /*#__PURE__*/React.createElement("div", {
-    className: "aurora-flex aurora-flex-col aurora-max-w-72 aurora-py-2 aurora-px-4 aurora-border-x aurora-bg-neutral-0"
-  }, /*#__PURE__*/React.createElement(ColorPickerImpl, {
-    value: colorValue,
+  var safeValue = objectToString(colorValue);
+  var defaultStyles = getStyles(true);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(PickerContextWrapper, {
+    value: safeValue,
+    defaultStyles: defaultStyles,
     onChange: setColor,
-    width: COLOR_PICKER_WIDTH,
-    height: COLOR_PICKER_HEIGHT
-  }), colorVariables !== null && colorVariables !== void 0 && colorVariables.isVisible && !isCurrentValueGradient ? /*#__PURE__*/React.createElement(ColorPickerVariables, {
+    squareWidth: COLOR_PICKER_WIDTH,
+    squareHeight: COLOR_PICKER_HEIGHT,
+    hideOpacity: false
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "aurora-flex aurora-flex-col aurora-max-w-72 aurora-py-2 aurora-pl-2 aurora-pr-2 aurora-pt-3 aurora-border-x aurora-border-t aurora-border-subtle aurora-rounded-t-16 aurora-bg-neutral-0"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "aurora-flex aurora-flex-col aurora-pb-2 aurora-gap-2",
+    style: {
+      width: COLOR_PICKER_WIDTH + COLOR_PICKER_PADDING_LEFT,
+      paddingLeft: COLOR_PICKER_PADDING_LEFT
+    }
+  }, /*#__PURE__*/React.createElement(ColorPickerControls, null)), /*#__PURE__*/React.createElement("div", {
+    className: "aurora-overflow-y-scroll aurora-overflow-x-visible custom-scrollbar aurora-pr-0.5",
+    style: _objectSpread2(_objectSpread2({}, defaultStyles.body), {}, {
+      maxHeight: isCurrentValueGradient ? COLOR_PICKER_CONTENT_MAX_HEIGHT.gradient : COLOR_PICKER_CONTENT_MAX_HEIGHT.color
+    })
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "aurora-pl-2",
+    style: {
+      width: COLOR_PICKER_WIDTH + COLOR_PICKER_PADDING_LEFT,
+      paddingLeft: COLOR_PICKER_PADDING_LEFT
+    }
+  }, /*#__PURE__*/React.createElement(ColorPickerImpl, null), colorVariables !== null && colorVariables !== void 0 && colorVariables.isVisible && !isCurrentValueGradient ? (/*#__PURE__*/React.createElement(ColorPickerVariables, {
     variables: colorVariables.variables
-  }) : null), /*#__PURE__*/React.createElement(ColorPickerFooter, null));
+  })) : null)))), /*#__PURE__*/React.createElement(ColorPickerFooter, null));
 };
 
 export { ColorPickerContent };

package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_content.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA,+BAA+B,qFAAyF;AACxH,iCAAiC,iFAAqF;AACtH,0BAA0B,uFAA2F;AACrH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/color_picker/components/color_picker_controls.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { useTranslation } from '../../../../../../external/react-i18next/dist/es/useTranslation.js';
+import { CSS_TEXT_COLOR_TOKENS } from '../../../constants/css_tokens/css_text_color_tokens.js';
 import { Stack } from '../../stack/stack.js';
 import { Typography } from '../../typography/typography.js';
 import { Tooltip } from '../../tooltip/tooltip.js';
@@ -11,9 +12,9 @@ import { useColorPicker } from '../hooks/use_color_picker.js';
 import { usePicker } from '../../../../../../external/react-best-gradient-color-picker/dist/esm/context.js';
 import { ColorPickerGradientAngle } from './color_picker_gradient_controls/color_picker_gradient_angle.js';
 import { ColorPickerModeToggler } from './color_picker_mode_toggler.js';
-import Dropper from '../../../../../../external/react-best-gradient-color-picker/dist/esm/components/EyeDropper.js';
-import GradientBar from '../../../../../../external/react-best-gradient-color-picker/dist/esm/components/GradientBar.js';
-import GradientControls from '../../../../../../external/react-best-gradient-color-picker/dist/esm/components/GradientControls.js';
+import { GradientBar } from './color_picker_overrides/color_picker_gradient_bar.js';
+import { EyeDropper } from './color_picker_overrides/color_picker_eye_dropper.js';
+import { GradientControls } from './color_picker_overrides/color_picker_gradient_controls.js';
 
 var ColorPickerControls = function ColorPickerControls() {
   var _usePicker = usePicker(),
@@ -25,28 +26,33 @@ var ColorPickerControls = function ColorPickerControls() {
     gradientType = _useColorPicker.gradientType,
     isCurrentValueGradient = _useColorPicker.isCurrentValueGradient;
   var isLinearGradient = gradientType === GRADIENT_TYPES.linear;
+  var EyeDropperAvailable = typeof window['EyeDropper'] !== 'undefined';
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Stack, {
     justify: withGradient ? 'between' : 'end'
   }, withGradient ? (/*#__PURE__*/React.createElement(Stack, {
     spacing: "8"
-  }, /*#__PURE__*/React.createElement(ColorPickerModeToggler, null))) : null, window.EyeDropper && (/*#__PURE__*/React.createElement(TooltipProvider, null, /*#__PURE__*/React.createElement(Tooltip, null, /*#__PURE__*/React.createElement(TooltipTrigger, null, /*#__PURE__*/React.createElement(Dropper, {
+  }, /*#__PURE__*/React.createElement(ColorPickerModeToggler, null))) : null, EyeDropperAvailable && (/*#__PURE__*/React.createElement(TooltipProvider, null, /*#__PURE__*/React.createElement(Tooltip, null, /*#__PURE__*/React.createElement(TooltipTrigger, null, /*#__PURE__*/React.createElement(EyeDropper, {
     onSelect: handleChange
   })), /*#__PURE__*/React.createElement(TooltipContent, {
     variant: "dark"
   }, /*#__PURE__*/React.createElement(Typography, {
     size: "xs",
-    weight: "medium"
+    weight: "medium",
+    color: CSS_TEXT_COLOR_TOKENS.inverse
   }, "".concat(t('Sample color')))))))), withGradient && isCurrentValueGradient ? (/*#__PURE__*/React.createElement(Stack, {
     justify: isLinearGradient ? 'between' : 'end'
   }, /*#__PURE__*/React.createElement(React.Fragment, null, isLinearGradient ? /*#__PURE__*/React.createElement(ColorPickerGradientAngle, null) : null, /*#__PURE__*/React.createElement(GradientControls, {
     hideGradientType: true,
     hideGradientAngle: true,
     hideGradientStop: true
-  })))) : null, withGradient && isCurrentValueGradient ? (/*#__PURE__*/React.createElement(Stack, null, /*#__PURE__*/React.createElement(TooltipProvider, null, /*#__PURE__*/React.createElement(Tooltip, null, /*#__PURE__*/React.createElement(TooltipTrigger, null, /*#__PURE__*/React.createElement(GradientBar, null)), /*#__PURE__*/React.createElement(TooltipContent, {
+  })))) : null, withGradient && isCurrentValueGradient ? (/*#__PURE__*/React.createElement(Stack, {
+    className: "aurora-border-b aurora-border-subtle aurora-pb-2 aurora-pl-4 aurora-pr-[1.125rem] -aurora-mb-[1px] -aurora-ml-4 -aurora-mr-[1.125rem]"
+  }, /*#__PURE__*/React.createElement(TooltipProvider, null, /*#__PURE__*/React.createElement(Tooltip, null, /*#__PURE__*/React.createElement(TooltipTrigger, null, /*#__PURE__*/React.createElement(GradientBar, null)), /*#__PURE__*/React.createElement(TooltipContent, {
     variant: "dark"
   }, /*#__PURE__*/React.createElement(Typography, {
     size: "xs",
-    weight: "medium"
+    weight: "medium",
+    color: CSS_TEXT_COLOR_TOKENS.inverse
   }, "".concat(t('Add color')))))))) : null);
 };
 

package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_controls.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA,+BAA+B,oEAAwE;AACvG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,0BAA0B,iFAAqF;AAC/G;AACA;AACA,oBAAoB,+FAAmG;AACvH,wBAAwB,gGAAoG;AAC5H,6BAA6B,qGAAyG;AACtI;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,+BAA+B,oEAAwE;AACvG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,0BAA0B,iFAAqF;AAC/G;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/color_picker/components/color_picker_footer.js

@@ -25,7 +25,7 @@ var ColorPickerFooter = function ColorPickerFooter() {
     handleSave(ColorPickerUtils.getAllColorTypes(color));
   };
   return /*#__PURE__*/React.createElement("div", {
-    className: "aurora-flex aurora-items-center aurora-justify-between aurora-gap-2 aurora-pt-2 aurora-pb-3 aurora-px-4 aurora-border aurora-rounded-b-16 aurora-bg-neutral-0"
+    className: "aurora-flex aurora-items-center aurora-justify-between aurora-gap-2 aurora-pt-2 aurora-pb-3 aurora-px-4 aurora-border aurora-border-subtle aurora-rounded-b-16 aurora-bg-neutral-0"
   }, /*#__PURE__*/React.createElement(Button, {
     className: "aurora-flex-1",
     variant: "secondary",
@@ -36,6 +36,7 @@ var ColorPickerFooter = function ColorPickerFooter() {
     className: "aurora-flex-1",
     type: "button",
     size: "s",
+    autoFocus: true,
     onClick: handleSaveButton
   }, "".concat(t('Choose'))));
 };

package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_footer.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA,+BAA+B,oEAAwE;AACvG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,+BAA+B,oEAAwE;AACvG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/color_picker/components/color_picker_gradient_controls/color_picker_gradient_angle.js

@@ -1,8 +1,7 @@
 import React from 'react';
-import { Input } from '../../../input/input.js';
 import { formatInputValues } from '../../../../../../../external/react-best-gradient-color-picker/dist/esm/utils/formatters.js';
 import { usePicker } from '../../../../../../../external/react-best-gradient-color-picker/dist/esm/context.js';
-import { DegreesIcon } from '../../../../../../../external/react-best-gradient-color-picker/dist/esm/components/icon.js';
+import { AngleIcon } from '../../../../assets/icons/angle_icon.js';
 
 var ColorPickerGradientAngle = function ColorPickerGradientAngle() {
   var _usePicker = usePicker(),
@@ -15,15 +14,17 @@ var ColorPickerGradientAngle = function ColorPickerGradientAngle() {
     onChange("linear-gradient(".concat(newValue || 0, "deg, ").concat(remaining));
   };
   return /*#__PURE__*/React.createElement("div", {
-    className: 'aurora-relative aurora-p-0 aurora-flex aurora-justify-between aurora-gap-1.5 aurora-h-6 aurora-border-2 aurora-border-solid aurora-rounded-4 aurora-bg-active'
-  }, /*#__PURE__*/React.createElement(DegreesIcon, {
-    color: "#5c657e"
-  }), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Input, {
+    className: 'aurora-relative aurora-flex aurora-justify-between aurora-gap-1.5 aurora-h-6 aurora-border-0 aurora-p-0.5 aurora-rounded-4 aurora-bg-subtle aurora-items-center'
+  }, /*#__PURE__*/React.createElement(AngleIcon, {
+    className: "aurora-w-3 aurora-h-3 aurora-stroke-0 aurora-ml-1"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "aurora-flex aurora-items-center"
+  }, /*#__PURE__*/React.createElement("input", {
     value: degrees,
     onChange: function onChange(e) {
       return handleDegrees(e);
     },
-    className: '!aurora-h-[18px] !aurora-w-10 !aurora-px-1 !aurora-text-xs aurora-rounded-4 aurora-text-center'
+    className: 'aurora-h-[18px] aurora-w-10 aurora-text-xs aurora-rounded-4 aurora-text-center aurora-outline-none aurora-p-0'
   }), /*#__PURE__*/React.createElement("div", {
     style: {
       position: 'absolute',

package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_gradient_controls/color_picker_gradient_angle.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA,kCAAkC,6FAAiG;AACnI,0BAA0B,oFAAwF;AAClH,4BAA4B,4FAAgG;AAC5H;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,kCAAkC,6FAAiG;AACnI,0BAA0B,oFAAwF;AAClH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/color_picker/components/color_picker_header.js

@@ -1,46 +1,30 @@
 import React, { useContext, useEffect } from 'react';
-import { useTranslation } from '../../../../../../external/react-i18next/dist/es/useTranslation.js';
-import { slicedToArray as _slicedToArray } from '../../../../../../_virtual/_rollupPluginBabelHelpers.js';
-import { Typography } from '../../typography/typography.js';
-import { CloseLineIcon } from '../../../assets/icons/close_line_icon.js';
-import { ColorPickerContext } from '../color_picker_context.js';
-import { useColorPicker } from '../hooks/use_color_picker.js';
-
-var ColorPickerHeader = function ColorPickerHeader() {
-  var _useColorPicker = useColorPicker(),
-    handleCancel = _useColorPicker.handleCancel;
-  var _useTranslation = useTranslation(),
-    _useTranslation2 = _slicedToArray(_useTranslation, 1),
-    t = _useTranslation2[0];
-  var _useContext = useContext(ColorPickerContext),
-    isColorPickerOpened = _useContext.isColorPickerOpened,
-    setIsColorPickerOpened = _useContext.setIsColorPickerOpened;
-  var handleCancelButton = function handleCancelButton() {
-    closePicker();
-  };
-  var closePicker = function closePicker() {
-    setIsColorPickerOpened(false);
-    handleCancel === null || handleCancel === void 0 ? void 0 : handleCancel();
-  };
-  useEffect(function () {
-    if (!isColorPickerOpened) return;
-    document.addEventListener('visibilitychange', closePicker);
-    return function () {
-      return document.removeEventListener('visibilitychange', closePicker);
+import { CloseLineIcon } from '@auroraAssets/icons/close_line_icon';
+import { ColorPickerContext } from '../color_picker_context';
+import '../color_picker_types';
+import { Typography } from '@auroraComponents/typography/typography';
+import { useColorPicker } from '@auroraComponents/color_picker/hooks/use_color_picker';
+import { useTranslation } from 'react-i18next';
+export const ColorPickerHeader = () => {
+    const { handleCancel } = useColorPicker();
+    const [t] = useTranslation();
+    const { isColorPickerOpened, setIsColorPickerOpened } = useContext(ColorPickerContext);
+    const handleCancelButton = () => {
+        closePicker();
     };
-  }, [isColorPickerOpened]);
-  return /*#__PURE__*/React.createElement("div", {
-    className: "aurora-flex aurora-items-center aurora-justify-between aurora-py-2 aurora-px-4 aurora-border aurora-rounded-t-16 aurora-bg-neutral-0"
-  }, /*#__PURE__*/React.createElement(Typography, {
-    size: "s",
-    weight: "semibold"
-  }, "".concat(t('Select color'))), /*#__PURE__*/React.createElement("button", {
-    onClick: handleCancelButton,
-    className: "color-picker__close-icon aurora-flex aurora-bg-transparent aurora-cursor-pointer"
-  }, /*#__PURE__*/React.createElement(CloseLineIcon, {
-    className: "aurora-w-4 aurora-h-4"
-  })));
+    const closePicker = () => {
+        setIsColorPickerOpened(false);
+        handleCancel?.();
+    };
+    useEffect(() => {
+        if (!isColorPickerOpened)
+            return;
+        document.addEventListener('visibilitychange', closePicker);
+        return () => document.removeEventListener('visibilitychange', closePicker);
+    }, [isColorPickerOpened]);
+    return (React.createElement("div", { className: "aurora-flex aurora-items-center aurora-justify-between aurora-py-2 aurora-px-4 aurora-border aurora-rounded-t-16 aurora-bg-neutral-0" },
+        React.createElement(Typography, { size: "s", weight: "semibold" }, `${t('Select color')}`),
+        React.createElement("button", { onClick: handleCancelButton, className: "color-picker__close-icon aurora-flex aurora-bg-transparent aurora-cursor-pointer" },
+            React.createElement(CloseLineIcon, { className: "aurora-w-4 aurora-h-4" }))));
 };
-
-export { ColorPickerHeader };
-//# sourceMappingURL=color_picker_header.js.map
+//# sourceMappingURL=color_picker_header.js.map

package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_header.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA,+BAA+B,oEAAwE;AACvG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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":"color_picker_header.js","sourceRoot":"","sources":["../../../../../../../../src/components/color_picker/components/color_picker_header.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAErD,OAAO,EAAE,aAAa,EAAE,MAAM,qCAAqC,CAAC;AACpE,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAoC,uBAAuB,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAE,MAAM,yCAAyC,CAAC;AACrE,OAAO,EAAE,cAAc,EAAE,MAAM,uDAAuD,CAAC;AACvF,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAE/C,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,EAAE;IAClC,MAAM,EAAE,YAAY,EAAE,GAAG,cAAc,EAAE,CAAC;IAC1C,MAAM,CAAC,CAAC,CAAC,GAAG,cAAc,EAAE,CAAC;IAC7B,MAAM,EAAE,mBAAmB,EAAE,sBAAsB,EAAE,GAAwB,UAAU,CAAC,kBAAkB,CAAC,CAAC;IAE5G,MAAM,kBAAkB,GAAG,GAAG,EAAE;QAC5B,WAAW,EAAE,CAAC;IAClB,CAAC,CAAC;IAEF,MAAM,WAAW,GAAG,GAAG,EAAE;QACrB,sBAAsB,CAAC,KAAK,CAAC,CAAC;QAC9B,YAAY,EAAE,EAAE,CAAC;IACrB,CAAC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,CAAC,mBAAmB;YAAE,OAAO;QACjC,QAAQ,CAAC,gBAAgB,CAAC,kBAAkB,EAAE,WAAW,CAAC,CAAC;QAC3D,OAAO,GAAG,EAAE,CAAC,QAAQ,CAAC,mBAAmB,CAAC,kBAAkB,EAAE,WAAW,CAAC,CAAC;IAC/E,CAAC,EAAE,CAAC,mBAAmB,CAAC,CAAC,CAAC;IAE1B,OAAO,CACH,6BAAK,SAAS,EAAC,sIAAsI;QACjJ,oBAAC,UAAU,IAAC,IAAI,EAAC,GAAG,EAAC,MAAM,EAAC,UAAU,IAAE,GAAG,CAAC,CAAC,cAAc,CAAC,EAAE,CAAc;QAE5E,gCAAQ,OAAO,EAAE,kBAAkB,EAAE,SAAS,EAAC,kFAAkF;YAC7H,oBAAC,aAAa,IAAC,SAAS,EAAC,uBAAuB,GAAG,CAC9C,CACP,CACT,CAAC;AACN,CAAC,CAAC"}

package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_impl.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const ColorPickerImpl: () => React.JSX.Element;

package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_impl.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Stack } from '../../stack/stack.js';
+import { useColorPicker } from '../hooks/use_color_picker.js';
+import { ColorPickerInputs } from './color_picker_inputs/color_picker_inputs.js';
+import { ColorPickerShades } from './color_picker_shades.js';
+import { Hue } from './color_picker_overrides/color_picker_hue.js';
+import { Opacity } from './color_picker_overrides/color_picker_opacity.js';
+import { Square } from './color_picker_overrides/color_picker_square.js';
+
+var ColorPickerImpl = function ColorPickerImpl() {
+  var _useColorPicker = useColorPicker(),
+    isCurrentValueGradient = _useColorPicker.isCurrentValueGradient;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "aurora-flex aurora-flex-col aurora-gap-2"
+  }, /*#__PURE__*/React.createElement(Stack, {
+    spacing: "2.5",
+    direction: "column",
+    onMouseDown: function onMouseDown(ev) {
+      return (
+        // Prevents whole page from being selected when dragging
+        ev.preventDefault()
+      );
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "color-picker__square aurora-overflow-hidden"
+  }, /*#__PURE__*/React.createElement(Square, null)), /*#__PURE__*/React.createElement("div", {
+    className: "color-picker__hue aurora-w-full"
+  }, /*#__PURE__*/React.createElement(Hue, null)), /*#__PURE__*/React.createElement("div", {
+    className: "color-picker__opacity aurora-w-full"
+  }, /*#__PURE__*/React.createElement(Opacity, null))), /*#__PURE__*/React.createElement(ColorPickerInputs, null), !isCurrentValueGradient ? /*#__PURE__*/React.createElement(ColorPickerShades, null) : null);
+};
+
+export { ColorPickerImpl };
+//# sourceMappingURL=color_picker_impl.js.map

package/build/{cjs/external/react-best-gradient-color-picker/dist/esm/components/Portal.js.map → esm/packages/aurora/src/components/color_picker/components/color_picker_impl.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;"}
+{"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;"}

package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_inputs/color_picker_inputs.js

@@ -25,9 +25,12 @@ var ColorPickerInputs = function ColorPickerInputs() {
     }
   };
   return /*#__PURE__*/React.createElement(Stack, {
-    spacing: "2",
-    align: "center"
-  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("select", {
+    spacing: "1",
+    align: "center",
+    className: "aurora-pt-2"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "aurora-flex aurora-items-center"
+  }, /*#__PURE__*/React.createElement("select", {
     value: type,
     onChange: handleSelectType,
     className: "color-picker__inputs-select aurora-text-xs aurora-text-info-strong aurora-uppercase aurora-pr-2.5 aurora-appearance-none"
@@ -38,7 +41,7 @@ var ColorPickerInputs = function ColorPickerInputs() {
   }, COLOR_PICKER_TYPES.RGB))), /*#__PURE__*/React.createElement("div", {
     className: "aurora-flex-1"
   }, /*#__PURE__*/React.createElement("div", {
-    className: "color-picker__inputs-value-container aurora-flex aurora-border aurora-rounded-4 aurora-overflow-hidden"
+    className: "color-picker__inputs-value-container aurora-flex aurora-border aurora-rounded-4 aurora-overflow-hidden aurora-h-6"
   }, inputs())), /*#__PURE__*/React.createElement(CurrentColorPreview, null));
 };
 

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

package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_inputs/color_picker_inputs_hex.js

@@ -38,20 +38,24 @@ var ColorPickerInputsHex = function ColorPickerInputsHex() {
     }
   }, [hex, disable]);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Input, {
-    className: "!aurora-h-6 !aurora-px-2 aurora-text-xs",
+    className: "aurora-h-full aurora-px-2 aurora-text-xs",
     type: "text",
     maxLength: 8,
     value: value.toUpperCase(),
     onChange: handleOnChange,
     onBlur: hexBlur,
     onFocus: hexFocus
-  }), /*#__PURE__*/React.createElement(Input, {
-    className: "!aurora-h-6 !aurora-px-1.5 aurora-text-xs",
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "aurora-flex aurora-rounded-6 focus aurora-text aurora-w-[46px] aurora-flex-none aurora-px-1 aurora-items-center"
+  }, /*#__PURE__*/React.createElement("input", {
+    className: "aurora-w-full focus:aurora-outline-none focus:aurora-shadow-none aurora-rounded-6 aurora-h-full aurora-text-xs",
     type: "text",
     value: alphaValue,
     onChange: handleOnChangeAlpha,
     onKeyPress: InputUtils.preventTypingLetters
-  }));
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "aurora-text-xs aurora-pl-0.5"
+  }, "%")));
 };
 
 export { ColorPickerInputsHex };

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

package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_inputs/color_picker_inputs_rgba.js

@@ -12,7 +12,7 @@ var ColorPickerInputsRgba = function ColorPickerInputsRgba() {
     alphaValue = _useColorPicker.alphaValue,
     rgbaArr = _useColorPicker.rgbaArr;
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Input, {
-    className: "!aurora-h-6 !aurora-px-1.5 aurora-text-xs",
+    className: "aurora-h-full aurora-px-1.5 aurora-text-xs",
     type: "text",
     value: rgbaArr[0],
     onChange: function onChange(e) {
@@ -20,7 +20,7 @@ var ColorPickerInputsRgba = function ColorPickerInputsRgba() {
     },
     onKeyPress: InputUtils.preventTypingLetters
   }), /*#__PURE__*/React.createElement(Input, {
-    className: "!aurora-h-6 !aurora-px-1.5 aurora-text-xs",
+    className: "aurora-h-full aurora-px-1.5 aurora-text-xs",
     type: "text",
     value: rgbaArr[1],
     onChange: function onChange(e) {
@@ -28,20 +28,24 @@ var ColorPickerInputsRgba = function ColorPickerInputsRgba() {
     },
     onKeyPress: InputUtils.preventTypingLetters
   }), /*#__PURE__*/React.createElement(Input, {
-    className: "!aurora-h-6 !aurora-px-1.5 aurora-text-xs",
+    className: "aurora-h-full aurora-px-1.5 aurora-text-xs",
     type: "text",
     value: rgbaArr[2],
     onChange: function onChange(e) {
       return setB(Number(e.target.value));
     },
     onKeyPress: InputUtils.preventTypingLetters
-  }), /*#__PURE__*/React.createElement(Input, {
-    className: "!aurora-h-6 !aurora-px-1.5 aurora-text-xs",
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "aurora-flex aurora-rounded-6 focus aurora-text aurora-w-[46px] aurora-flex-none aurora-px-1 aurora-items-center"
+  }, /*#__PURE__*/React.createElement("input", {
+    className: "aurora-w-full focus:aurora-outline-none focus:aurora-shadow-none aurora-rounded-6 aurora-h-full aurora-text-xs",
     type: "text",
     value: alphaValue,
     onChange: handleOnChangeAlpha,
     onKeyPress: InputUtils.preventTypingLetters
-  }));
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "aurora-text-xs aurora-pl-0.5"
+  }, "%")));
 };
 
 export { ColorPickerInputsRgba };

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

package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_mode_toggler.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { useTranslation } from '../../../../../../external/react-i18next/dist/es/useTranslation.js';
 import { CSS_TEXT_COLOR_TOKENS } from '../../../constants/css_tokens/css_text_color_tokens.js';
+import { cn } from '../../../utilities/cn.js';
 import { Stack } from '../../stack/stack.js';
 import { Typography } from '../../typography/typography.js';
 import { Tooltip } from '../../tooltip/tooltip.js';
@@ -31,7 +32,7 @@ var ColorPickerModeToggler = function ColorPickerModeToggler() {
       return setSolid(previousSolidColor);
     },
     "aria-label": "Color picker solid mode",
-    className: "aurora-bg-info-active ".concat(commonClassNames, " ").concat(!isCurrentValueGradient && activeClassNames)
+    className: cn('aurora-bg-neutral-700', commonClassNames, !isCurrentValueGradient && activeClassNames)
   })), /*#__PURE__*/React.createElement(TooltipContent, {
     variant: "dark"
   }, /*#__PURE__*/React.createElement(Typography, {
@@ -44,7 +45,7 @@ var ColorPickerModeToggler = function ColorPickerModeToggler() {
       return setLinear(previousGradientColor);
     },
     "aria-label": "Color picker linear gradient mode",
-    className: "color-picker-mode-toggler__button_gradient_linear ".concat(commonClassNames, " ").concat(gradientType === 'linear-gradient' && activeClassNames)
+    className: cn('color-picker-mode-toggler__button_gradient_linear', commonClassNames, gradientType === 'linear-gradient' && activeClassNames)
   })), /*#__PURE__*/React.createElement(TooltipContent, {
     variant: "dark"
   }, /*#__PURE__*/React.createElement(Typography, {
@@ -57,7 +58,7 @@ var ColorPickerModeToggler = function ColorPickerModeToggler() {
       return setRadial(previousGradientColor);
     },
     "aria-label": "Color picker radial gradient mode",
-    className: "color-picker-mode-toggler__button_gradient_radial ".concat(commonClassNames, " ").concat(gradientType === 'radial-gradient' && activeClassNames)
+    className: cn('color-picker-mode-toggler__button_gradient_radial', commonClassNames, gradientType === 'radial-gradient' && activeClassNames)
   })), /*#__PURE__*/React.createElement(TooltipContent, {
     variant: "dark"
   }, /*#__PURE__*/React.createElement(Typography, {

package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_mode_toggler.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA,+BAA+B,oEAAwE;AACvG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,+BAA+B,oEAAwE;AACvG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/color_picker/components/color_picker_overrides/color_picker_eye_dropper.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+/**
+ * Zmieniono wzgledem react-best-gradient-color-picker:
+ * - Zmieniono ikonke
+ * - Usunieto caly kod zwiazany z html2canvas
+ */
+export declare const EyeDropper: ({ onSelect }: {
+    onSelect: (arg0: string) => void;
+}) => React.JSX.Element;

package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_overrides/color_picker_eye_dropper.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import { objectSpread2 as _objectSpread2 } from '../../../../../../../_virtual/_rollupPluginBabelHelpers.js';
+import tinycolor from '../../../../../../../external/tinycolor2/esm/tinycolor.js';
+import { usePicker } from '../../../../../../../external/react-best-gradient-color-picker/dist/esm/context.js';
+import { controlBtnStyles } from '../../../../../../../external/react-best-gradient-color-picker/dist/esm/styles/styles.js';
+import { DropperFillIcon } from '../../../../assets/icons/dropper_fill_icon.js';
+
+/**
+ * Zmieniono wzgledem react-best-gradient-color-picker:
+ * - Zmieniono ikonke
+ * - Usunieto caly kod zwiazany z html2canvas
+ */
+var EyeDropper = function EyeDropper(_ref) {
+  var onSelect = _ref.onSelect;
+  var _usePicker = usePicker(),
+    defaultStyles = _usePicker.defaultStyles;
+  var getEyeDrop = function getEyeDrop() {
+    // @ts-expect-error - ts does not evaluate for window.EyeDropper
+    if (!window.EyeDropper) {
+      return;
+    }
+    // @ts-expect-error - ts does not evaluate for window.EyeDropper
+    var eyeDropper = new window.EyeDropper();
+    var abortController = new window.AbortController();
+    eyeDropper.open({
+      signal: abortController.signal
+    }).then(function (result) {
+      var tinyHex = tinycolor(result.sRGBHex);
+      var _tinyHex$toRgb = tinyHex.toRgb(),
+        r = _tinyHex$toRgb.r,
+        g = _tinyHex$toRgb.g,
+        b = _tinyHex$toRgb.b;
+      onSelect("rgba(".concat(r, ", ").concat(g, ", ").concat(b, ", 1)"));
+    }).catch(function (e) {
+      console.log(e);
+    });
+  };
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    onClick: getEyeDrop,
+    id: "rbgcp-eyedropper-btn",
+    style: _objectSpread2(_objectSpread2(_objectSpread2({}, defaultStyles.rbgcpEyedropperBtn), controlBtnStyles(false, defaultStyles)), {}, {
+      background: '#F5F6FA'
+    })
+  }, /*#__PURE__*/React.createElement(DropperFillIcon, {
+    className: "aurora-w-4 aurora-h-4 aurora-stroke-0"
+  })));
+};
+
+export { EyeDropper };
+//# sourceMappingURL=color_picker_eye_dropper.js.map

package/build/esm/packages/aurora/src/components/color_picker/components/{color_picker_impl/color_picker_impl.js.map → color_picker_overrides/color_picker_eye_dropper.js.map}

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA,+BAA+B,wFAA4F;AAC3H,iCAAiC,oFAAwF;AACzH,0BAA0B,0FAA8F;AACxH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,sBAAsB,2DAA+D;AACrF,0BAA0B,oFAAwF;AAClH,iCAAiC,0FAA8F;AAC/H;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/color_picker/components/color_picker_overrides/color_picker_gradient_bar.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+/**
+ * Zmieniono wzgledem react-best-gradient-color-picker:
+ * - Dodano e.preventDefault() do handleDown
+ * - Wysokosc i szerokosc Handle
+ */
+export declare const Handle: ({ left, i, setDragging }: {
+    left?: number | undefined;
+    i: number;
+    setDragging: (arg0: boolean) => void;
+}) => React.JSX.Element;
+/**
+ * Zmieniono wzgledem react-best-gradient-color-picker:
+ * - Przeniesiono handleMove na window
+ * - Wysokosc i marginesy GradientBar
+ */
+export declare const GradientBar: () => React.JSX.Element;