@chayns-components/color-picker 5.0.0-beta.998 → 5.0.0

package/lib/cjs/components/ColorPickerProvider.js

@@ -6,8 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.ColorPickerContext = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _color = require("../utils/color");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const ColorPickerContext = exports.ColorPickerContext = /*#__PURE__*/_react.default.createContext({
   selectedColor: undefined,
   updateSelectedColor: undefined,

package/lib/cjs/components/ColorPickerProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorPickerProvider.js","names":["_react","_interopRequireWildcard","require","_color","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ColorPickerContext","exports","React","createContext","selectedColor","undefined","updateSelectedColor","hueColor","updateHueColor","isPresetColor","updateIsPresetColor","shouldGetCoordinates","updateShouldGetCoordinates","shouldCallOnSelect","updateShouldCallOnSelect","canGetColorFromArea","updateCanGetColorFromArea","displayName","ColorPickerProvider","children","onSelect","internalSelectedColor","setInternalSelectedColor","useState","internalHueColor","setInternalHueColor","internalIsPresetColor","setInternalIsPresetColor","internalShouldGetCoordinates","setInternalShouldGetCoordinates","internalShouldCallOnSelect","setInternalShouldCallOnSelect","internalCanGetColorFromArea","setInternalCanGetColorFromArea","useCallback","color","useEffect","newColor","isValidRGBA","g","b","hexToRgb","providerValue","useMemo","createElement","Provider","value","_default"],"sources":["../../../src/components/ColorPickerProvider.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, useState, type ReactNode } from 'react';\nimport { hexToRgb, isValidRGBA } from '../utils/color';\n\ninterface IColorPickerContext {\n    selectedColor?: string;\n    updateSelectedColor?: (color: string | undefined) => void;\n    hueColor?: string;\n    updateHueColor?: (color: string | undefined) => void;\n    isPresetColor?: boolean;\n    updateIsPresetColor?: (isPresetColor: boolean) => void;\n    shouldGetCoordinates?: boolean;\n    updateShouldGetCoordinates?: (shouldGetCoordinates: boolean) => void;\n    shouldCallOnSelect?: boolean;\n    updateShouldCallOnSelect?: (shouldCallOnSelect: boolean) => void;\n    canGetColorFromArea?: boolean;\n    updateCanGetColorFromArea?: (canGetColorFromArea: boolean) => void;\n}\n\nexport const ColorPickerContext = React.createContext<IColorPickerContext>({\n    selectedColor: undefined,\n    updateSelectedColor: undefined,\n    hueColor: undefined,\n    updateHueColor: undefined,\n    isPresetColor: undefined,\n    updateIsPresetColor: undefined,\n    shouldGetCoordinates: undefined,\n    updateShouldGetCoordinates: undefined,\n    shouldCallOnSelect: undefined,\n    updateShouldCallOnSelect: undefined,\n    canGetColorFromArea: undefined,\n    updateCanGetColorFromArea: undefined,\n});\n\nColorPickerContext.displayName = 'ColorPickerContext';\n\ninterface ColorPickerProviderProps {\n    /**\n     * The children of the provider.\n     */\n    children: ReactNode;\n    /**\n     * Function to be executed when a color is selected.\n     */\n    onSelect?: (color: string) => void;\n    /**\n     * The color that should be preselected.\n     */\n    selectedColor?: string;\n}\n\nconst ColorPickerProvider = ({ children, selectedColor, onSelect }: ColorPickerProviderProps) => {\n    const [internalSelectedColor, setInternalSelectedColor] = useState<string>();\n    const [internalHueColor, setInternalHueColor] = useState<string>();\n    const [internalIsPresetColor, setInternalIsPresetColor] = useState<boolean>(false);\n    const [internalShouldGetCoordinates, setInternalShouldGetCoordinates] = useState<boolean>(true);\n    const [internalShouldCallOnSelect, setInternalShouldCallOnSelect] = useState<boolean>(false);\n    const [internalCanGetColorFromArea, setInternalCanGetColorFromArea] = useState<boolean>(false);\n\n    const updateSelectedColor = useCallback((color: string | undefined) => {\n        setInternalSelectedColor(color);\n    }, []);\n\n    const updateHueColor = useCallback((color: string | undefined) => {\n        setInternalHueColor(color);\n    }, []);\n\n    const updateIsPresetColor = useCallback((isPresetColor: boolean) => {\n        setInternalIsPresetColor(isPresetColor);\n    }, []);\n\n    const updateShouldGetCoordinates = useCallback((shouldGetCoordinates: boolean) => {\n        setInternalShouldGetCoordinates(shouldGetCoordinates);\n    }, []);\n\n    const updateShouldCallOnSelect = useCallback((shouldCallOnSelect: boolean) => {\n        setInternalShouldCallOnSelect(shouldCallOnSelect);\n    }, []);\n\n    const updateCanGetColorFromArea = useCallback((canGetColorFromArea: boolean) => {\n        setInternalCanGetColorFromArea(canGetColorFromArea);\n    }, []);\n\n    useEffect(() => {\n        let newColor = selectedColor;\n\n        if (newColor && !isValidRGBA(newColor)) {\n            const { r, g, b, a } = hexToRgb(newColor);\n\n            newColor = `rgba(${r},${g},${b},${a})`;\n        }\n\n        setInternalSelectedColor(newColor);\n        setInternalHueColor(newColor);\n        setInternalIsPresetColor(true);\n    }, [selectedColor]);\n\n    useEffect(() => {\n        if (typeof onSelect === 'function' && internalShouldCallOnSelect && internalSelectedColor) {\n            onSelect(internalSelectedColor);\n\n            setInternalShouldCallOnSelect(false);\n        }\n    }, [internalSelectedColor, internalShouldCallOnSelect, onSelect]);\n\n    const providerValue = useMemo<IColorPickerContext>(\n        () => ({\n            selectedColor: internalSelectedColor,\n            updateSelectedColor,\n            hueColor: internalHueColor,\n            updateHueColor,\n            isPresetColor: internalIsPresetColor,\n            updateIsPresetColor,\n            shouldGetCoordinates: internalShouldGetCoordinates,\n            updateShouldGetCoordinates,\n            shouldCallOnSelect: internalShouldCallOnSelect,\n            updateShouldCallOnSelect,\n            canGetColorFromArea: internalCanGetColorFromArea,\n            updateCanGetColorFromArea,\n        }),\n        [\n            internalCanGetColorFromArea,\n            internalHueColor,\n            internalIsPresetColor,\n            internalSelectedColor,\n            internalShouldCallOnSelect,\n            internalShouldGetCoordinates,\n            updateCanGetColorFromArea,\n            updateHueColor,\n            updateIsPresetColor,\n            updateSelectedColor,\n            updateShouldCallOnSelect,\n            updateShouldGetCoordinates,\n        ],\n    );\n\n    return (\n        <ColorPickerContext.Provider value={providerValue}>{children}</ColorPickerContext.Provider>\n    );\n};\n\nColorPickerProvider.displayName = 'ColorPickerProvider';\n\nexport default ColorPickerProvider;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"ColorPickerProvider.js","names":["_react","_interopRequireWildcard","require","_color","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","ColorPickerContext","exports","React","createContext","selectedColor","undefined","updateSelectedColor","hueColor","updateHueColor","isPresetColor","updateIsPresetColor","shouldGetCoordinates","updateShouldGetCoordinates","shouldCallOnSelect","updateShouldCallOnSelect","canGetColorFromArea","updateCanGetColorFromArea","displayName","ColorPickerProvider","children","onSelect","internalSelectedColor","setInternalSelectedColor","useState","internalHueColor","setInternalHueColor","internalIsPresetColor","setInternalIsPresetColor","internalShouldGetCoordinates","setInternalShouldGetCoordinates","internalShouldCallOnSelect","setInternalShouldCallOnSelect","internalCanGetColorFromArea","setInternalCanGetColorFromArea","useCallback","color","useEffect","newColor","isValidRGBA","g","b","a","hexToRgb","providerValue","useMemo","createElement","Provider","value","_default"],"sources":["../../../src/components/ColorPickerProvider.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, useState, type ReactNode } from 'react';\nimport { hexToRgb, isValidRGBA } from '../utils/color';\n\ninterface IColorPickerContext {\n    selectedColor?: string;\n    updateSelectedColor?: (color: string | undefined) => void;\n    hueColor?: string;\n    updateHueColor?: (color: string | undefined) => void;\n    isPresetColor?: boolean;\n    updateIsPresetColor?: (isPresetColor: boolean) => void;\n    shouldGetCoordinates?: boolean;\n    updateShouldGetCoordinates?: (shouldGetCoordinates: boolean) => void;\n    shouldCallOnSelect?: boolean;\n    updateShouldCallOnSelect?: (shouldCallOnSelect: boolean) => void;\n    canGetColorFromArea?: boolean;\n    updateCanGetColorFromArea?: (canGetColorFromArea: boolean) => void;\n}\n\nexport const ColorPickerContext = React.createContext<IColorPickerContext>({\n    selectedColor: undefined,\n    updateSelectedColor: undefined,\n    hueColor: undefined,\n    updateHueColor: undefined,\n    isPresetColor: undefined,\n    updateIsPresetColor: undefined,\n    shouldGetCoordinates: undefined,\n    updateShouldGetCoordinates: undefined,\n    shouldCallOnSelect: undefined,\n    updateShouldCallOnSelect: undefined,\n    canGetColorFromArea: undefined,\n    updateCanGetColorFromArea: undefined,\n});\n\nColorPickerContext.displayName = 'ColorPickerContext';\n\ninterface ColorPickerProviderProps {\n    /**\n     * The children of the provider.\n     */\n    children: ReactNode;\n    /**\n     * Function to be executed when a color is selected.\n     */\n    onSelect?: (color: string) => void;\n    /**\n     * The color that should be preselected.\n     */\n    selectedColor?: string;\n}\n\nconst ColorPickerProvider = ({ children, selectedColor, onSelect }: ColorPickerProviderProps) => {\n    const [internalSelectedColor, setInternalSelectedColor] = useState<string>();\n    const [internalHueColor, setInternalHueColor] = useState<string>();\n    const [internalIsPresetColor, setInternalIsPresetColor] = useState<boolean>(false);\n    const [internalShouldGetCoordinates, setInternalShouldGetCoordinates] = useState<boolean>(true);\n    const [internalShouldCallOnSelect, setInternalShouldCallOnSelect] = useState<boolean>(false);\n    const [internalCanGetColorFromArea, setInternalCanGetColorFromArea] = useState<boolean>(false);\n\n    const updateSelectedColor = useCallback((color: string | undefined) => {\n        setInternalSelectedColor(color);\n    }, []);\n\n    const updateHueColor = useCallback((color: string | undefined) => {\n        setInternalHueColor(color);\n    }, []);\n\n    const updateIsPresetColor = useCallback((isPresetColor: boolean) => {\n        setInternalIsPresetColor(isPresetColor);\n    }, []);\n\n    const updateShouldGetCoordinates = useCallback((shouldGetCoordinates: boolean) => {\n        setInternalShouldGetCoordinates(shouldGetCoordinates);\n    }, []);\n\n    const updateShouldCallOnSelect = useCallback((shouldCallOnSelect: boolean) => {\n        setInternalShouldCallOnSelect(shouldCallOnSelect);\n    }, []);\n\n    const updateCanGetColorFromArea = useCallback((canGetColorFromArea: boolean) => {\n        setInternalCanGetColorFromArea(canGetColorFromArea);\n    }, []);\n\n    useEffect(() => {\n        let newColor = selectedColor;\n\n        if (newColor && !isValidRGBA(newColor)) {\n            const { r, g, b, a } = hexToRgb(newColor);\n\n            newColor = `rgba(${r},${g},${b},${a})`;\n        }\n\n        setInternalSelectedColor(newColor);\n        setInternalHueColor(newColor);\n        setInternalIsPresetColor(true);\n    }, [selectedColor]);\n\n    useEffect(() => {\n        if (typeof onSelect === 'function' && internalShouldCallOnSelect && internalSelectedColor) {\n            onSelect(internalSelectedColor);\n\n            setInternalShouldCallOnSelect(false);\n        }\n    }, [internalSelectedColor, internalShouldCallOnSelect, onSelect]);\n\n    const providerValue = useMemo<IColorPickerContext>(\n        () => ({\n            selectedColor: internalSelectedColor,\n            updateSelectedColor,\n            hueColor: internalHueColor,\n            updateHueColor,\n            isPresetColor: internalIsPresetColor,\n            updateIsPresetColor,\n            shouldGetCoordinates: internalShouldGetCoordinates,\n            updateShouldGetCoordinates,\n            shouldCallOnSelect: internalShouldCallOnSelect,\n            updateShouldCallOnSelect,\n            canGetColorFromArea: internalCanGetColorFromArea,\n            updateCanGetColorFromArea,\n        }),\n        [\n            internalCanGetColorFromArea,\n            internalHueColor,\n            internalIsPresetColor,\n            internalSelectedColor,\n            internalShouldCallOnSelect,\n            internalShouldGetCoordinates,\n            updateCanGetColorFromArea,\n            updateHueColor,\n            updateIsPresetColor,\n            updateSelectedColor,\n            updateShouldCallOnSelect,\n            updateShouldGetCoordinates,\n        ],\n    );\n\n    return (\n        <ColorPickerContext.Provider value={providerValue}>{children}</ColorPickerContext.Provider>\n    );\n};\n\nColorPickerProvider.displayName = 'ColorPickerProvider';\n\nexport default ColorPickerProvider;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/color-picker/ColorPicker.js

@@ -14,6 +14,8 @@ const ColorPicker = ({
   onPresetColorAdd,
   onPresetColorRemove,
   onSelect,
+  shouldHideColorArea = false,
+  shouldHideDefaultPresetColors = false,
   presetColors,
   selectedColor = 'rgba(0, 94, 184, 1)',
   shouldShowAsPopup = true,
@@ -22,21 +24,25 @@ const ColorPicker = ({
   shouldShowPreviewColorString = true,
   shouldShowRoundPreviewColor = true,
   shouldShowTransparencySlider = false,
-  shouldUseSiteColors = false
+  shouldUseSiteColors = false,
+  alignment
 }) => /*#__PURE__*/_react.default.createElement(_ColorPickerProvider.default, {
   selectedColor: selectedColor,
   onSelect: onSelect
 }, /*#__PURE__*/_react.default.createElement(_ColorPicker.StyledColorPicker, null, /*#__PURE__*/_react.default.createElement(_ColorPickerWrapper.default, {
+  alignment: alignment,
   onPresetColorAdd: onPresetColorAdd,
   onPresetColorRemove: onPresetColorRemove,
   presetColors: presetColors,
+  shouldHideDefaultPresetColors: shouldHideDefaultPresetColors,
   shouldShowAsPopup: shouldShowAsPopup,
   shouldShowMoreOptions: shouldShowMoreOptions,
   shouldShowPresetColors: shouldShowPresetColors,
   shouldShowPreviewColorString: shouldShowPreviewColorString,
   shouldShowRoundPreviewColor: shouldShowRoundPreviewColor,
   shouldShowTransparencySlider: shouldShowTransparencySlider,
-  shouldUseSiteColors: shouldUseSiteColors
+  shouldUseSiteColors: shouldUseSiteColors,
+  shouldHideColorArea: shouldHideColorArea
 }, children)));
 ColorPicker.displayName = 'ColorPicker';
 var _default = exports.default = ColorPicker;

package/lib/cjs/components/color-picker/ColorPicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorPicker.js","names":["_react","_interopRequireDefault","require","_ColorPickerProvider","_ColorPickerWrapper","_ColorPicker","e","__esModule","default","ColorPicker","children","onPresetColorAdd","onPresetColorRemove","onSelect","presetColors","selectedColor","shouldShowAsPopup","shouldShowMoreOptions","shouldShowPresetColors","shouldShowPreviewColorString","shouldShowRoundPreviewColor","shouldShowTransparencySlider","shouldUseSiteColors","createElement","StyledColorPicker","displayName","_default","exports"],"sources":["../../../../src/components/color-picker/ColorPicker.tsx"],"sourcesContent":["import React, { ReactNode } from 'react';\nimport type { IPresetColor } from '../../types/colorPicker';\nimport ColorPickerProvider from '../ColorPickerProvider';\nimport ColorPickerWrapper from './color-picker-wrapper/ColorPickerWrapper';\nimport { StyledColorPicker } from './ColorPicker.styles';\n\ninterface ColorPickerProps {\n    /**\n     * The element that should be rendered to trigger the ColorPicker popup on click.\n     */\n    children?: ReactNode;\n    /**\n     * Function to be executed when a preset color is added.\n     */\n    onPresetColorAdd?: (presetColor: IPresetColor) => void;\n    /**\n     * Function to be executed when a preset color is removed.\n     */\n    onPresetColorRemove?: (presetColorId: IPresetColor['id']) => void;\n    /**\n     * Function to be executed when a color is selected.\n     */\n    onSelect?: (color: string) => void;\n    /**\n     * Colors the user can select from.\n     */\n    presetColors?: IPresetColor[];\n    /**\n     * The color that should be preselected.\n     */\n    selectedColor?: string;\n    /**\n     * Whether the ColorPicker should be displayed inside a popup.\n     */\n    shouldShowAsPopup?: boolean;\n    /**\n     * Whether the more options accordion should be displayed.\n     */\n    shouldShowMoreOptions?: boolean;\n    /**\n     * Whether the preset colors should be displayed.\n     */\n    shouldShowPresetColors?: boolean;\n    /**\n     * Whether the preview color should be displayed as text.\n     */\n    shouldShowPreviewColorString?: boolean;\n    /**\n     * Whether the preview color should be displayed round.\n     */\n    shouldShowRoundPreviewColor?: boolean;\n    /**\n     * Whether the transparency slider should be displayed.\n     */\n    shouldShowTransparencySlider?: boolean;\n    /**\n     * Whether presetColors should be got and uploaded to the site storage.\n     */\n    shouldUseSiteColors?: boolean;\n}\n\nconst ColorPicker = ({\n    children,\n    onPresetColorAdd,\n    onPresetColorRemove,\n    onSelect,\n    presetColors,\n    selectedColor = 'rgba(0, 94, 184, 1)',\n    shouldShowAsPopup = true,\n    shouldShowMoreOptions = false,\n    shouldShowPresetColors = false,\n    shouldShowPreviewColorString = true,\n    shouldShowRoundPreviewColor = true,\n    shouldShowTransparencySlider = false,\n    shouldUseSiteColors = false,\n}: ColorPickerProps) => (\n    <ColorPickerProvider selectedColor={selectedColor} onSelect={onSelect}>\n        <StyledColorPicker>\n            <ColorPickerWrapper\n                onPresetColorAdd={onPresetColorAdd}\n                onPresetColorRemove={onPresetColorRemove}\n                presetColors={presetColors}\n                shouldShowAsPopup={shouldShowAsPopup}\n                shouldShowMoreOptions={shouldShowMoreOptions}\n                shouldShowPresetColors={shouldShowPresetColors}\n                shouldShowPreviewColorString={shouldShowPreviewColorString}\n                shouldShowRoundPreviewColor={shouldShowRoundPreviewColor}\n                shouldShowTransparencySlider={shouldShowTransparencySlider}\n                shouldUseSiteColors={shouldUseSiteColors}\n            >\n                {children}\n            </ColorPickerWrapper>\n        </StyledColorPicker>\n    </ColorPickerProvider>\n);\n\nColorPicker.displayName = 'ColorPicker';\n\nexport default ColorPicker;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AAEA,IAAAC,oBAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,mBAAA,GAAAH,sBAAA,CAAAC,OAAA;AACA,IAAAG,YAAA,GAAAH,OAAA;AAAyD,SAAAD,uBAAAK,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAyDzD,MAAMG,WAAW,GAAGA,CAAC;EACjBC,QAAQ;EACRC,gBAAgB;EAChBC,mBAAmB;EACnBC,QAAQ;EACRC,YAAY;EACZC,aAAa,GAAG,qBAAqB;EACrCC,iBAAiB,GAAG,IAAI;EACxBC,qBAAqB,GAAG,KAAK;EAC7BC,sBAAsB,GAAG,KAAK;EAC9BC,4BAA4B,GAAG,IAAI;EACnCC,2BAA2B,GAAG,IAAI;EAClCC,4BAA4B,GAAG,KAAK;EACpCC,mBAAmB,GAAG;AACR,CAAC,kBACftB,MAAA,CAAAQ,OAAA,CAAAe,aAAA,CAACpB,oBAAA,CAAAK,OAAmB;EAACO,aAAa,EAAEA,aAAc;EAACF,QAAQ,EAAEA;AAAS,gBAClEb,MAAA,CAAAQ,OAAA,CAAAe,aAAA,CAAClB,YAAA,CAAAmB,iBAAiB,qBACdxB,MAAA,CAAAQ,OAAA,CAAAe,aAAA,CAACnB,mBAAA,CAAAI,OAAkB;EACfG,gBAAgB,EAAEA,gBAAiB;EACnCC,mBAAmB,EAAEA,mBAAoB;EACzCE,YAAY,EAAEA,YAAa;EAC3BE,iBAAiB,EAAEA,iBAAkB;EACrCC,qBAAqB,EAAEA,qBAAsB;EAC7CC,sBAAsB,EAAEA,sBAAuB;EAC/CC,4BAA4B,EAAEA,4BAA6B;EAC3DC,2BAA2B,EAAEA,2BAA4B;EACzDC,4BAA4B,EAAEA,4BAA6B;EAC3DC,mBAAmB,EAAEA;AAAoB,GAExCZ,QACe,CACL,CACF,CACxB;AAEDD,WAAW,CAACgB,WAAW,GAAG,aAAa;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAnB,OAAA,GAEzBC,WAAW","ignoreList":[]}
+{"version":3,"file":"ColorPicker.js","names":["_react","_interopRequireDefault","require","_ColorPickerProvider","_ColorPickerWrapper","_ColorPicker","e","__esModule","default","ColorPicker","children","onPresetColorAdd","onPresetColorRemove","onSelect","shouldHideColorArea","shouldHideDefaultPresetColors","presetColors","selectedColor","shouldShowAsPopup","shouldShowMoreOptions","shouldShowPresetColors","shouldShowPreviewColorString","shouldShowRoundPreviewColor","shouldShowTransparencySlider","shouldUseSiteColors","alignment","createElement","StyledColorPicker","displayName","_default","exports"],"sources":["../../../../src/components/color-picker/ColorPicker.tsx"],"sourcesContent":["import React, { ReactNode } from 'react';\nimport type { IPresetColor } from '../../types/colorPicker';\nimport ColorPickerProvider from '../ColorPickerProvider';\nimport ColorPickerWrapper from './color-picker-wrapper/ColorPickerWrapper';\nimport { StyledColorPicker } from './ColorPicker.styles';\nimport { PopupAlignment } from '@chayns-components/core';\n\ninterface ColorPickerProps {\n    /**\n     * The element that should be rendered to trigger the ColorPicker popup on click.\n     */\n    children?: ReactNode;\n    /**\n     * Function to be executed when a preset color is added.\n     */\n    onPresetColorAdd?: (presetColor: IPresetColor) => void;\n    /**\n     * Function to be executed when a preset color is removed.\n     */\n    onPresetColorRemove?: (presetColorId: IPresetColor['id']) => void;\n    /**\n     * Function to be executed when a color is selected.\n     */\n    onSelect?: (color: string) => void;\n    /**\n     * Colors the user can select from.\n     */\n    presetColors?: IPresetColor[];\n    /**\n     * The color that should be preselected.\n     */\n    selectedColor?: string;\n    /**\n     * Whether the ColorPicker should be displayed inside a popup.\n     */\n    shouldShowAsPopup?: boolean;\n    /**\n     * Whether the more options accordion should be displayed.\n     */\n    shouldShowMoreOptions?: boolean;\n    /**\n     * Whether the preset colors should be displayed.\n     */\n    shouldShowPresetColors?: boolean;\n    /**\n     * Whether the preview color should be displayed as text.\n     */\n    shouldShowPreviewColorString?: boolean;\n    /**\n     * Whether the preview color should be displayed round.\n     */\n    shouldShowRoundPreviewColor?: boolean;\n    /**\n     * Whether the transparency slider should be displayed.\n     */\n    shouldShowTransparencySlider?: boolean;\n    /**\n     * Whether presetColors should be got and uploaded to the site storage.\n     */\n    shouldUseSiteColors?: boolean;\n    /**\n     * Whether the color area should be displayed.\n     */\n    shouldHideColorArea?: boolean;\n    /**\n     * Whether the default preset colors should be hidden.\n     */\n    shouldHideDefaultPresetColors?: boolean;\n    /**\n     * The alignment of the popup\n     */\n    alignment?: PopupAlignment;\n}\n\nconst ColorPicker = ({\n    children,\n    onPresetColorAdd,\n    onPresetColorRemove,\n    onSelect,\n    shouldHideColorArea = false,\n    shouldHideDefaultPresetColors = false,\n    presetColors,\n    selectedColor = 'rgba(0, 94, 184, 1)',\n    shouldShowAsPopup = true,\n    shouldShowMoreOptions = false,\n    shouldShowPresetColors = false,\n    shouldShowPreviewColorString = true,\n    shouldShowRoundPreviewColor = true,\n    shouldShowTransparencySlider = false,\n    shouldUseSiteColors = false,\n    alignment,\n}: ColorPickerProps) => (\n    <ColorPickerProvider selectedColor={selectedColor} onSelect={onSelect}>\n        <StyledColorPicker>\n            <ColorPickerWrapper\n                alignment={alignment}\n                onPresetColorAdd={onPresetColorAdd}\n                onPresetColorRemove={onPresetColorRemove}\n                presetColors={presetColors}\n                shouldHideDefaultPresetColors={shouldHideDefaultPresetColors}\n                shouldShowAsPopup={shouldShowAsPopup}\n                shouldShowMoreOptions={shouldShowMoreOptions}\n                shouldShowPresetColors={shouldShowPresetColors}\n                shouldShowPreviewColorString={shouldShowPreviewColorString}\n                shouldShowRoundPreviewColor={shouldShowRoundPreviewColor}\n                shouldShowTransparencySlider={shouldShowTransparencySlider}\n                shouldUseSiteColors={shouldUseSiteColors}\n                shouldHideColorArea={shouldHideColorArea}\n            >\n                {children}\n            </ColorPickerWrapper>\n        </StyledColorPicker>\n    </ColorPickerProvider>\n);\n\nColorPicker.displayName = 'ColorPicker';\n\nexport default ColorPicker;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AAEA,IAAAC,oBAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,mBAAA,GAAAH,sBAAA,CAAAC,OAAA;AACA,IAAAG,YAAA,GAAAH,OAAA;AAAyD,SAAAD,uBAAAK,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAsEzD,MAAMG,WAAW,GAAGA,CAAC;EACjBC,QAAQ;EACRC,gBAAgB;EAChBC,mBAAmB;EACnBC,QAAQ;EACRC,mBAAmB,GAAG,KAAK;EAC3BC,6BAA6B,GAAG,KAAK;EACrCC,YAAY;EACZC,aAAa,GAAG,qBAAqB;EACrCC,iBAAiB,GAAG,IAAI;EACxBC,qBAAqB,GAAG,KAAK;EAC7BC,sBAAsB,GAAG,KAAK;EAC9BC,4BAA4B,GAAG,IAAI;EACnCC,2BAA2B,GAAG,IAAI;EAClCC,4BAA4B,GAAG,KAAK;EACpCC,mBAAmB,GAAG,KAAK;EAC3BC;AACc,CAAC,kBACfzB,MAAA,CAAAQ,OAAA,CAAAkB,aAAA,CAACvB,oBAAA,CAAAK,OAAmB;EAACS,aAAa,EAAEA,aAAc;EAACJ,QAAQ,EAAEA;AAAS,gBAClEb,MAAA,CAAAQ,OAAA,CAAAkB,aAAA,CAACrB,YAAA,CAAAsB,iBAAiB,qBACd3B,MAAA,CAAAQ,OAAA,CAAAkB,aAAA,CAACtB,mBAAA,CAAAI,OAAkB;EACfiB,SAAS,EAAEA,SAAU;EACrBd,gBAAgB,EAAEA,gBAAiB;EACnCC,mBAAmB,EAAEA,mBAAoB;EACzCI,YAAY,EAAEA,YAAa;EAC3BD,6BAA6B,EAAEA,6BAA8B;EAC7DG,iBAAiB,EAAEA,iBAAkB;EACrCC,qBAAqB,EAAEA,qBAAsB;EAC7CC,sBAAsB,EAAEA,sBAAuB;EAC/CC,4BAA4B,EAAEA,4BAA6B;EAC3DC,2BAA2B,EAAEA,2BAA4B;EACzDC,4BAA4B,EAAEA,4BAA6B;EAC3DC,mBAAmB,EAAEA,mBAAoB;EACzCV,mBAAmB,EAAEA;AAAoB,GAExCJ,QACe,CACL,CACF,CACxB;AAEDD,WAAW,CAACmB,WAAW,GAAG,aAAa;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAtB,OAAA,GAEzBC,WAAW","ignoreList":[]}

package/lib/cjs/components/color-picker/color-picker-wrapper/ColorPickerWrapper.js

@@ -10,8 +10,7 @@ var _ColorPickerPopup = _interopRequireDefault(require("../../color-picker-popup
 var _ColorPickerProvider = require("../../ColorPickerProvider");
 var _ColorPickerWrapper = require("./ColorPickerWrapper.styles");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const ColorPickerWrapper = ({
   children,
   onPresetColorAdd,
@@ -19,16 +18,21 @@ const ColorPickerWrapper = ({
   presetColors,
   shouldShowAsPopup,
   shouldShowMoreOptions,
+  shouldHideDefaultPresetColors,
   shouldShowPresetColors,
   shouldShowPreviewColorString,
   shouldShowRoundPreviewColor,
+  shouldHideColorArea,
   shouldShowTransparencySlider,
-  shouldUseSiteColors
+  shouldUseSiteColors,
+  alignment
 }) => {
   const {
     selectedColor
   } = (0, _react.useContext)(_ColorPickerProvider.ColorPickerContext);
   const content = (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_ColorPickerPopup.default, {
+    shouldHideDefaultPresetColors: shouldHideDefaultPresetColors,
+    shouldHideColorArea: shouldHideColorArea,
     shouldShowPresetColors: shouldShowPresetColors,
     onPresetColorRemove: onPresetColorRemove,
     onPresetColorAdd: onPresetColorAdd,
@@ -36,9 +40,10 @@ const ColorPickerWrapper = ({
     shouldUseSiteColors: shouldUseSiteColors,
     shouldShowMoreOptions: shouldShowMoreOptions,
     shouldShowTransparencySlider: shouldShowTransparencySlider
-  }), [onPresetColorAdd, onPresetColorRemove, presetColors, shouldShowMoreOptions, shouldShowPresetColors, shouldShowTransparencySlider, shouldUseSiteColors]);
+  }), [onPresetColorAdd, onPresetColorRemove, presetColors, shouldHideColorArea, shouldHideDefaultPresetColors, shouldShowMoreOptions, shouldShowPresetColors, shouldShowTransparencySlider, shouldUseSiteColors]);
   return /*#__PURE__*/_react.default.createElement(_ColorPickerWrapper.StyledColorPickerWrapper, null, shouldShowAsPopup ? /*#__PURE__*/_react.default.createElement(_core.Popup, {
-    content: content
+    content: content,
+    alignment: alignment
   }, children ?? /*#__PURE__*/_react.default.createElement(_ColorPickerWrapper.StyledColorPickerWrapperInfo, null, /*#__PURE__*/_react.default.createElement(_ColorPickerWrapper.StyledColorPickerWrapperInfoColorWrapper, {
     $shouldShowRoundPreviewColor: shouldShowRoundPreviewColor
   }, /*#__PURE__*/_react.default.createElement(_ColorPickerWrapper.StyledColorPickerWrapperInfoColor, {

package/lib/cjs/components/color-picker/color-picker-wrapper/ColorPickerWrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorPickerWrapper.js","names":["_core","require","_react","_interopRequireWildcard","_ColorPickerPopup","_interopRequireDefault","_ColorPickerProvider","_ColorPickerWrapper","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ColorPickerWrapper","children","onPresetColorAdd","onPresetColorRemove","presetColors","shouldShowAsPopup","shouldShowMoreOptions","shouldShowPresetColors","shouldShowPreviewColorString","shouldShowRoundPreviewColor","shouldShowTransparencySlider","shouldUseSiteColors","selectedColor","useContext","ColorPickerContext","content","useMemo","createElement","StyledColorPickerWrapper","Popup","StyledColorPickerWrapperInfo","StyledColorPickerWrapperInfoColorWrapper","$shouldShowRoundPreviewColor","StyledColorPickerWrapperInfoColor","$color","StyledColorPickerWrapperInfoText","displayName","_default","exports"],"sources":["../../../../../src/components/color-picker/color-picker-wrapper/ColorPickerWrapper.tsx"],"sourcesContent":["import { Popup } from '@chayns-components/core';\nimport React, { ReactNode, useContext, useMemo } from 'react';\nimport type { IPresetColor } from '../../../types/colorPicker';\nimport ColorPickerPopup from '../../color-picker-popup/ColorPickerPopup';\nimport { ColorPickerContext } from '../../ColorPickerProvider';\nimport {\n    StyledColorPickerWrapper,\n    StyledColorPickerWrapperInfo,\n    StyledColorPickerWrapperInfoColor,\n    StyledColorPickerWrapperInfoColorWrapper,\n    StyledColorPickerWrapperInfoText,\n} from './ColorPickerWrapper.styles';\n\ninterface ColorPickerWrapperProps {\n    children?: ReactNode;\n    onPresetColorAdd?: (presetColor: IPresetColor) => void;\n    onPresetColorRemove?: (presetColorId: IPresetColor['id']) => void;\n    presetColors?: IPresetColor[];\n    shouldShowAsPopup: boolean;\n    shouldShowMoreOptions: boolean;\n    shouldShowPresetColors: boolean;\n    shouldShowPreviewColorString: boolean;\n    shouldShowRoundPreviewColor: boolean;\n    shouldShowTransparencySlider: boolean;\n    shouldUseSiteColors: boolean;\n}\n\nconst ColorPickerWrapper = ({\n    children,\n    onPresetColorAdd,\n    onPresetColorRemove,\n    presetColors,\n    shouldShowAsPopup,\n    shouldShowMoreOptions,\n    shouldShowPresetColors,\n    shouldShowPreviewColorString,\n    shouldShowRoundPreviewColor,\n    shouldShowTransparencySlider,\n    shouldUseSiteColors,\n}: ColorPickerWrapperProps) => {\n    const { selectedColor } = useContext(ColorPickerContext);\n\n    const content = useMemo(\n        () => (\n            <ColorPickerPopup\n                shouldShowPresetColors={shouldShowPresetColors}\n                onPresetColorRemove={onPresetColorRemove}\n                onPresetColorAdd={onPresetColorAdd}\n                presetColors={presetColors}\n                shouldUseSiteColors={shouldUseSiteColors}\n                shouldShowMoreOptions={shouldShowMoreOptions}\n                shouldShowTransparencySlider={shouldShowTransparencySlider}\n            />\n        ),\n        [\n            onPresetColorAdd,\n            onPresetColorRemove,\n            presetColors,\n            shouldShowMoreOptions,\n            shouldShowPresetColors,\n            shouldShowTransparencySlider,\n            shouldUseSiteColors,\n        ],\n    );\n\n    return (\n        <StyledColorPickerWrapper>\n            {shouldShowAsPopup ? (\n                <Popup content={content}>\n                    {children ?? (\n                        <StyledColorPickerWrapperInfo>\n                            <StyledColorPickerWrapperInfoColorWrapper\n                                $shouldShowRoundPreviewColor={shouldShowRoundPreviewColor}\n                            >\n                                <StyledColorPickerWrapperInfoColor $color={selectedColor} />\n                            </StyledColorPickerWrapperInfoColorWrapper>\n\n                            {shouldShowPreviewColorString && (\n                                <StyledColorPickerWrapperInfoText>\n                                    {selectedColor}\n                                </StyledColorPickerWrapperInfoText>\n                            )}\n                        </StyledColorPickerWrapperInfo>\n                    )}\n                </Popup>\n            ) : (\n                content\n            )}\n        </StyledColorPickerWrapper>\n    );\n};\n\nColorPickerWrapper.displayName = 'ColorPickerWrapper';\n\nexport default ColorPickerWrapper;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"ColorPickerWrapper.js","names":["_core","require","_react","_interopRequireWildcard","_ColorPickerPopup","_interopRequireDefault","_ColorPickerProvider","_ColorPickerWrapper","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","ColorPickerWrapper","children","onPresetColorAdd","onPresetColorRemove","presetColors","shouldShowAsPopup","shouldShowMoreOptions","shouldHideDefaultPresetColors","shouldShowPresetColors","shouldShowPreviewColorString","shouldShowRoundPreviewColor","shouldHideColorArea","shouldShowTransparencySlider","shouldUseSiteColors","alignment","selectedColor","useContext","ColorPickerContext","content","useMemo","createElement","StyledColorPickerWrapper","Popup","StyledColorPickerWrapperInfo","StyledColorPickerWrapperInfoColorWrapper","$shouldShowRoundPreviewColor","StyledColorPickerWrapperInfoColor","$color","StyledColorPickerWrapperInfoText","displayName","_default","exports"],"sources":["../../../../../src/components/color-picker/color-picker-wrapper/ColorPickerWrapper.tsx"],"sourcesContent":["import { Popup, PopupAlignment } from '@chayns-components/core';\nimport React, { ReactNode, useContext, useMemo } from 'react';\nimport type { IPresetColor } from '../../../types/colorPicker';\nimport ColorPickerPopup from '../../color-picker-popup/ColorPickerPopup';\nimport { ColorPickerContext } from '../../ColorPickerProvider';\nimport {\n    StyledColorPickerWrapper,\n    StyledColorPickerWrapperInfo,\n    StyledColorPickerWrapperInfoColor,\n    StyledColorPickerWrapperInfoColorWrapper,\n    StyledColorPickerWrapperInfoText,\n} from './ColorPickerWrapper.styles';\n\ninterface ColorPickerWrapperProps {\n    children?: ReactNode;\n    onPresetColorAdd?: (presetColor: IPresetColor) => void;\n    onPresetColorRemove?: (presetColorId: IPresetColor['id']) => void;\n    presetColors?: IPresetColor[];\n    shouldShowAsPopup: boolean;\n    shouldShowMoreOptions: boolean;\n    shouldShowPresetColors: boolean;\n    shouldShowPreviewColorString: boolean;\n    shouldShowRoundPreviewColor: boolean;\n    shouldShowTransparencySlider: boolean;\n    shouldUseSiteColors: boolean;\n    shouldHideColorArea: boolean;\n    shouldHideDefaultPresetColors: boolean;\n    alignment?: PopupAlignment;\n}\n\nconst ColorPickerWrapper = ({\n    children,\n    onPresetColorAdd,\n    onPresetColorRemove,\n    presetColors,\n    shouldShowAsPopup,\n    shouldShowMoreOptions,\n    shouldHideDefaultPresetColors,\n    shouldShowPresetColors,\n    shouldShowPreviewColorString,\n    shouldShowRoundPreviewColor,\n    shouldHideColorArea,\n    shouldShowTransparencySlider,\n    shouldUseSiteColors,\n    alignment,\n}: ColorPickerWrapperProps) => {\n    const { selectedColor } = useContext(ColorPickerContext);\n\n    const content = useMemo(\n        () => (\n            <ColorPickerPopup\n                shouldHideDefaultPresetColors={shouldHideDefaultPresetColors}\n                shouldHideColorArea={shouldHideColorArea}\n                shouldShowPresetColors={shouldShowPresetColors}\n                onPresetColorRemove={onPresetColorRemove}\n                onPresetColorAdd={onPresetColorAdd}\n                presetColors={presetColors}\n                shouldUseSiteColors={shouldUseSiteColors}\n                shouldShowMoreOptions={shouldShowMoreOptions}\n                shouldShowTransparencySlider={shouldShowTransparencySlider}\n            />\n        ),\n        [\n            onPresetColorAdd,\n            onPresetColorRemove,\n            presetColors,\n            shouldHideColorArea,\n            shouldHideDefaultPresetColors,\n            shouldShowMoreOptions,\n            shouldShowPresetColors,\n            shouldShowTransparencySlider,\n            shouldUseSiteColors,\n        ],\n    );\n\n    return (\n        <StyledColorPickerWrapper>\n            {shouldShowAsPopup ? (\n                <Popup content={content} alignment={alignment}>\n                    {children ?? (\n                        <StyledColorPickerWrapperInfo>\n                            <StyledColorPickerWrapperInfoColorWrapper\n                                $shouldShowRoundPreviewColor={shouldShowRoundPreviewColor}\n                            >\n                                <StyledColorPickerWrapperInfoColor $color={selectedColor} />\n                            </StyledColorPickerWrapperInfoColorWrapper>\n\n                            {shouldShowPreviewColorString && (\n                                <StyledColorPickerWrapperInfoText>\n                                    {selectedColor}\n                                </StyledColorPickerWrapperInfoText>\n                            )}\n                        </StyledColorPickerWrapperInfo>\n                    )}\n                </Popup>\n            ) : (\n                content\n            )}\n        </StyledColorPickerWrapper>\n    );\n};\n\nColorPickerWrapper.displayName = 'ColorPickerWrapper';\n\nexport default ColorPickerWrapper;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/color-picker/color-picker-wrapper/ColorPickerWrapper.styles.js

@@ -29,9 +29,9 @@ const StyledColorPickerWrapperInfoColorWrapper = exports.StyledColorPickerWrappe
 const StyledColorPickerWrapperInfoColorBackground = exports.StyledColorPickerWrapperInfoColorBackground = _styledComponents.default.div`
     position: absolute;
     background-color: #fff;
-    background-image: linear-gradient(45deg, #a0a0a0 25%, #0000 0),
-        linear-gradient(-45deg, #a0a0a0 25%, #0000 0), linear-gradient(45deg, #0000 75%, #a0a0a0 0),
-        linear-gradient(-45deg, #0000 75%, #a0a0a0 0);
+    background-image:
+        linear-gradient(45deg, #a0a0a0 25%, #0000 0), linear-gradient(-45deg, #a0a0a0 25%, #0000 0),
+        linear-gradient(45deg, #0000 75%, #a0a0a0 0), linear-gradient(-45deg, #0000 75%, #a0a0a0 0);
     background-position:
         0 0,
         0 4px,

package/lib/cjs/components/color-picker/color-picker-wrapper/ColorPickerWrapper.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorPickerWrapper.styles.js","names":["_styledComponents","_interopRequireDefault","require","e","__esModule","default","StyledColorPickerWrapper","exports","styled","div","StyledColorPickerWrapperInfo","StyledColorPickerWrapperInfoColorWrapper","$shouldShowRoundPreviewColor","theme","text","StyledColorPickerWrapperInfoColorBackground","StyledColorPickerWrapperInfoColor","attrs","$color","style","backgroundColor","StyledColorPickerWrapperInfoText"],"sources":["../../../../../src/components/color-picker/color-picker-wrapper/ColorPickerWrapper.styles.ts"],"sourcesContent":["import type { WithTheme } from '@chayns-components/core';\nimport styled from 'styled-components';\n\nexport const StyledColorPickerWrapper = styled.div``;\n\nexport const StyledColorPickerWrapperInfo = styled.div`\n    display: flex;\n    align-items: center;\n    gap: 8px;\n`;\n\ntype StyledColorPickerWrapperInfoColorProps = WithTheme<{\n    $color?: string;\n}>;\n\ntype StyledColorPickerWrapperInfoColorWrapperProps = WithTheme<{\n    $shouldShowRoundPreviewColor: boolean;\n}>;\n\nexport const StyledColorPickerWrapperInfoColorWrapper = styled.div<StyledColorPickerWrapperInfoColorWrapperProps>`\n    border-radius: ${({ $shouldShowRoundPreviewColor }) =>\n        $shouldShowRoundPreviewColor ? '50px' : '0px'};\n    border: 1px ${({ theme }: StyledColorPickerWrapperInfoColorProps) => theme.text} solid;\n\n    width: 15px;\n    aspect-ratio: 1;\n    position: relative;\n\n    overflow: hidden;\n`;\n\nexport const StyledColorPickerWrapperInfoColorBackground = styled.div`\n    position: absolute;\n    background-color: #fff;\n    background-image: linear-gradient(45deg, #a0a0a0 25%, #0000 0),\n        linear-gradient(-45deg, #a0a0a0 25%, #0000 0), linear-gradient(45deg, #0000 75%, #a0a0a0 0),\n        linear-gradient(-45deg, #0000 75%, #a0a0a0 0);\n    background-position:\n        0 0,\n        0 4px,\n        4px -4px,\n        -4px 0;\n    background-repeat: repeat;\n    background-size: 8px 8px;\n    height: 100%;\n    width: 100%;\n`;\n\nexport const StyledColorPickerWrapperInfoColor = styled.div.attrs<StyledColorPickerWrapperInfoColorProps>(\n    ({ $color }) => ({\n        style: {\n            backgroundColor: $color,\n        },\n    }),\n)`\n    height: 100%;\n    width: 100%;\n    position: absolute;\n`;\n\ntype StyledColorPickerWrapperInfoTextProps = WithTheme<unknown>;\n\nexport const StyledColorPickerWrapperInfoText = styled.div<StyledColorPickerWrapperInfoTextProps>`\n    border-bottom-style: dashed;\n    border-bottom-width: 1px;\n\n    color: ${({ theme }: StyledColorPickerWrapperInfoTextProps) => theme.text};\n`;\n"],"mappings":";;;;;;AACA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAAuC,SAAAD,uBAAAE,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAEhC,MAAMG,wBAAwB,GAAAC,OAAA,CAAAD,wBAAA,GAAGE,yBAAM,CAACC,GAAG,EAAE;AAE7C,MAAMC,4BAA4B,GAAAH,OAAA,CAAAG,4BAAA,GAAGF,yBAAM,CAACC,GAAG;AACtD;AACA;AACA;AACA,CAAC;AAUM,MAAME,wCAAwC,GAAAJ,OAAA,CAAAI,wCAAA,GAAGH,yBAAM,CAACC,GAAkD;AACjH,qBAAqB,CAAC;EAAEG;AAA6B,CAAC,KAC9CA,4BAA4B,GAAG,MAAM,GAAG,KAAK;AACrD,kBAAkB,CAAC;EAAEC;AAA8C,CAAC,KAAKA,KAAK,CAACC,IAAI;AACnF;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAMC,2CAA2C,GAAAR,OAAA,CAAAQ,2CAAA,GAAGP,yBAAM,CAACC,GAAG;AACrE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAMO,iCAAiC,GAAAT,OAAA,CAAAS,iCAAA,GAAGR,yBAAM,CAACC,GAAG,CAACQ,KAAK,CAC7D,CAAC;EAAEC;AAAO,CAAC,MAAM;EACbC,KAAK,EAAE;IACHC,eAAe,EAAEF;EACrB;AACJ,CAAC,CACL,CAAC;AACD;AACA;AACA;AACA,CAAC;AAIM,MAAMG,gCAAgC,GAAAd,OAAA,CAAAc,gCAAA,GAAGb,yBAAM,CAACC,GAA0C;AACjG;AACA;AACA;AACA,aAAa,CAAC;EAAEI;AAA6C,CAAC,KAAKA,KAAK,CAACC,IAAI;AAC7E,CAAC","ignoreList":[]}
+{"version":3,"file":"ColorPickerWrapper.styles.js","names":["_styledComponents","_interopRequireDefault","require","e","__esModule","default","StyledColorPickerWrapper","exports","styled","div","StyledColorPickerWrapperInfo","StyledColorPickerWrapperInfoColorWrapper","$shouldShowRoundPreviewColor","theme","text","StyledColorPickerWrapperInfoColorBackground","StyledColorPickerWrapperInfoColor","attrs","$color","style","backgroundColor","StyledColorPickerWrapperInfoText"],"sources":["../../../../../src/components/color-picker/color-picker-wrapper/ColorPickerWrapper.styles.ts"],"sourcesContent":["import type { WithTheme } from '@chayns-components/core';\nimport styled from 'styled-components';\n\nexport const StyledColorPickerWrapper = styled.div``;\n\nexport const StyledColorPickerWrapperInfo = styled.div`\n    display: flex;\n    align-items: center;\n    gap: 8px;\n`;\n\ntype StyledColorPickerWrapperInfoColorProps = WithTheme<{\n    $color?: string;\n}>;\n\ntype StyledColorPickerWrapperInfoColorWrapperProps = WithTheme<{\n    $shouldShowRoundPreviewColor: boolean;\n}>;\n\nexport const StyledColorPickerWrapperInfoColorWrapper = styled.div<StyledColorPickerWrapperInfoColorWrapperProps>`\n    border-radius: ${({ $shouldShowRoundPreviewColor }) =>\n        $shouldShowRoundPreviewColor ? '50px' : '0px'};\n    border: 1px ${({ theme }: StyledColorPickerWrapperInfoColorProps) => theme.text} solid;\n\n    width: 15px;\n    aspect-ratio: 1;\n    position: relative;\n\n    overflow: hidden;\n`;\n\nexport const StyledColorPickerWrapperInfoColorBackground = styled.div`\n    position: absolute;\n    background-color: #fff;\n    background-image:\n        linear-gradient(45deg, #a0a0a0 25%, #0000 0), linear-gradient(-45deg, #a0a0a0 25%, #0000 0),\n        linear-gradient(45deg, #0000 75%, #a0a0a0 0), linear-gradient(-45deg, #0000 75%, #a0a0a0 0);\n    background-position:\n        0 0,\n        0 4px,\n        4px -4px,\n        -4px 0;\n    background-repeat: repeat;\n    background-size: 8px 8px;\n    height: 100%;\n    width: 100%;\n`;\n\nexport const StyledColorPickerWrapperInfoColor = styled.div.attrs<StyledColorPickerWrapperInfoColorProps>(\n    ({ $color }) => ({\n        style: {\n            backgroundColor: $color,\n        },\n    }),\n)`\n    height: 100%;\n    width: 100%;\n    position: absolute;\n`;\n\ntype StyledColorPickerWrapperInfoTextProps = WithTheme<unknown>;\n\nexport const StyledColorPickerWrapperInfoText = styled.div<StyledColorPickerWrapperInfoTextProps>`\n    border-bottom-style: dashed;\n    border-bottom-width: 1px;\n\n    color: ${({ theme }: StyledColorPickerWrapperInfoTextProps) => theme.text};\n`;\n"],"mappings":";;;;;;AACA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAAuC,SAAAD,uBAAAE,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAEhC,MAAMG,wBAAwB,GAAAC,OAAA,CAAAD,wBAAA,GAAGE,yBAAM,CAACC,GAAG,EAAE;AAE7C,MAAMC,4BAA4B,GAAAH,OAAA,CAAAG,4BAAA,GAAGF,yBAAM,CAACC,GAAG;AACtD;AACA;AACA;AACA,CAAC;AAUM,MAAME,wCAAwC,GAAAJ,OAAA,CAAAI,wCAAA,GAAGH,yBAAM,CAACC,GAAkD;AACjH,qBAAqB,CAAC;EAAEG;AAA6B,CAAC,KAC9CA,4BAA4B,GAAG,MAAM,GAAG,KAAK;AACrD,kBAAkB,CAAC;EAAEC;AAA8C,CAAC,KAAKA,KAAK,CAACC,IAAI;AACnF;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAMC,2CAA2C,GAAAR,OAAA,CAAAQ,2CAAA,GAAGP,yBAAM,CAACC,GAAG;AACrE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAMO,iCAAiC,GAAAT,OAAA,CAAAS,iCAAA,GAAGR,yBAAM,CAACC,GAAG,CAACQ,KAAK,CAC7D,CAAC;EAAEC;AAAO,CAAC,MAAM;EACbC,KAAK,EAAE;IACHC,eAAe,EAAEF;EACrB;AACJ,CAAC,CACL,CAAC;AACD;AACA;AACA;AACA,CAAC;AAIM,MAAMG,gCAAgC,GAAAd,OAAA,CAAAc,gCAAA,GAAGb,yBAAM,CAACC,GAA0C;AACjG;AACA;AACA;AACA,aAAa,CAAC;EAAEI;AAA6C,CAAC,KAAKA,KAAK,CAACC,IAAI;AAC7E,CAAC","ignoreList":[]}

package/lib/cjs/components/color-picker-popup/ColorPickerPopup.js

@@ -17,11 +17,14 @@ const ColorPickerPopup = ({
   onPresetColorAdd,
   shouldShowPresetColors,
   shouldShowTransparencySlider,
+  shouldHideDefaultPresetColors,
   shouldUseSiteColors,
-  shouldShowMoreOptions
-}) => /*#__PURE__*/_react.default.createElement(_ColorPickerPopup.StyledColorPickerPopup, null, /*#__PURE__*/_react.default.createElement(_ColorArea.default, null), /*#__PURE__*/_react.default.createElement(_Sliders.default, {
+  shouldShowMoreOptions,
+  shouldHideColorArea
+}) => /*#__PURE__*/_react.default.createElement(_ColorPickerPopup.StyledColorPickerPopup, null, !shouldHideColorArea && /*#__PURE__*/_react.default.createElement(_ColorArea.default, null), !shouldHideColorArea && /*#__PURE__*/_react.default.createElement(_Sliders.default, {
   shouldShowTransparencySlider: shouldShowTransparencySlider
 }), shouldShowPresetColors && /*#__PURE__*/_react.default.createElement(_PresetColors.default, {
+  shouldHideDefaultPresetColors: shouldHideDefaultPresetColors,
   presetColors: presetColors,
   shouldUseSiteColors: shouldUseSiteColors,
   onPresetColorAdd: onPresetColorAdd,

package/lib/cjs/components/color-picker-popup/ColorPickerPopup.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorPickerPopup.js","names":["_react","_interopRequireDefault","require","_ColorArea","_ColorPickerPopup","_MoreOptions","_PresetColors","_Sliders","e","__esModule","default","ColorPickerPopup","presetColors","onPresetColorRemove","onPresetColorAdd","shouldShowPresetColors","shouldShowTransparencySlider","shouldUseSiteColors","shouldShowMoreOptions","createElement","StyledColorPickerPopup","displayName","_default","exports"],"sources":["../../../../src/components/color-picker-popup/ColorPickerPopup.tsx"],"sourcesContent":["import React from 'react';\nimport type { IPresetColor } from '../../types/colorPicker';\nimport ColorArea from './color-area/ColorArea';\nimport { StyledColorPickerPopup } from './ColorPickerPopup.styles';\nimport MoreOptions from './more-options/MoreOptions';\nimport PresetColors from './preset-colors/PresetColors';\nimport Sliders from './sliders/Sliders';\n\ninterface ColorPickerPopupProps {\n    presetColors?: IPresetColor[];\n    shouldShowPresetColors: boolean;\n    onPresetColorAdd?: (presetColor: IPresetColor) => void;\n    onPresetColorRemove?: (presetColorId: IPresetColor['id']) => void;\n    shouldShowTransparencySlider: boolean;\n    shouldShowMoreOptions: boolean;\n    shouldUseSiteColors: boolean;\n}\n\nconst ColorPickerPopup = ({\n    presetColors,\n    onPresetColorRemove,\n    onPresetColorAdd,\n    shouldShowPresetColors,\n    shouldShowTransparencySlider,\n    shouldUseSiteColors,\n    shouldShowMoreOptions,\n}: ColorPickerPopupProps) => (\n    <StyledColorPickerPopup>\n        <ColorArea />\n        <Sliders shouldShowTransparencySlider={shouldShowTransparencySlider} />\n        {shouldShowPresetColors && (\n            <PresetColors\n                presetColors={presetColors}\n                shouldUseSiteColors={shouldUseSiteColors}\n                onPresetColorAdd={onPresetColorAdd}\n                onPresetColorRemove={onPresetColorRemove}\n            />\n        )}\n        {shouldShowMoreOptions && <MoreOptions />}\n    </StyledColorPickerPopup>\n);\n\nColorPickerPopup.displayName = 'ColorPickerPopup';\n\nexport default ColorPickerPopup;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AAEA,IAAAC,UAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,iBAAA,GAAAF,OAAA;AACA,IAAAG,YAAA,GAAAJ,sBAAA,CAAAC,OAAA;AACA,IAAAI,aAAA,GAAAL,sBAAA,CAAAC,OAAA;AACA,IAAAK,QAAA,GAAAN,sBAAA,CAAAC,OAAA;AAAwC,SAAAD,uBAAAO,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAYxC,MAAMG,gBAAgB,GAAGA,CAAC;EACtBC,YAAY;EACZC,mBAAmB;EACnBC,gBAAgB;EAChBC,sBAAsB;EACtBC,4BAA4B;EAC5BC,mBAAmB;EACnBC;AACmB,CAAC,kBACpBlB,MAAA,CAAAU,OAAA,CAAAS,aAAA,CAACf,iBAAA,CAAAgB,sBAAsB,qBACnBpB,MAAA,CAAAU,OAAA,CAAAS,aAAA,CAAChB,UAAA,CAAAO,OAAS,MAAE,CAAC,eACbV,MAAA,CAAAU,OAAA,CAAAS,aAAA,CAACZ,QAAA,CAAAG,OAAO;EAACM,4BAA4B,EAAEA;AAA6B,CAAE,CAAC,EACtED,sBAAsB,iBACnBf,MAAA,CAAAU,OAAA,CAAAS,aAAA,CAACb,aAAA,CAAAI,OAAY;EACTE,YAAY,EAAEA,YAAa;EAC3BK,mBAAmB,EAAEA,mBAAoB;EACzCH,gBAAgB,EAAEA,gBAAiB;EACnCD,mBAAmB,EAAEA;AAAoB,CAC5C,CACJ,EACAK,qBAAqB,iBAAIlB,MAAA,CAAAU,OAAA,CAAAS,aAAA,CAACd,YAAA,CAAAK,OAAW,MAAE,CACpB,CAC3B;AAEDC,gBAAgB,CAACU,WAAW,GAAG,kBAAkB;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAb,OAAA,GAEnCC,gBAAgB","ignoreList":[]}
+{"version":3,"file":"ColorPickerPopup.js","names":["_react","_interopRequireDefault","require","_ColorArea","_ColorPickerPopup","_MoreOptions","_PresetColors","_Sliders","e","__esModule","default","ColorPickerPopup","presetColors","onPresetColorRemove","onPresetColorAdd","shouldShowPresetColors","shouldShowTransparencySlider","shouldHideDefaultPresetColors","shouldUseSiteColors","shouldShowMoreOptions","shouldHideColorArea","createElement","StyledColorPickerPopup","displayName","_default","exports"],"sources":["../../../../src/components/color-picker-popup/ColorPickerPopup.tsx"],"sourcesContent":["import React from 'react';\nimport type { IPresetColor } from '../../types/colorPicker';\nimport ColorArea from './color-area/ColorArea';\nimport { StyledColorPickerPopup } from './ColorPickerPopup.styles';\nimport MoreOptions from './more-options/MoreOptions';\nimport PresetColors from './preset-colors/PresetColors';\nimport Sliders from './sliders/Sliders';\n\ninterface ColorPickerPopupProps {\n    presetColors?: IPresetColor[];\n    shouldShowPresetColors: boolean;\n    onPresetColorAdd?: (presetColor: IPresetColor) => void;\n    onPresetColorRemove?: (presetColorId: IPresetColor['id']) => void;\n    shouldShowTransparencySlider: boolean;\n    shouldShowMoreOptions: boolean;\n    shouldUseSiteColors: boolean;\n    shouldHideColorArea: boolean;\n    shouldHideDefaultPresetColors: boolean;\n}\n\nconst ColorPickerPopup = ({\n    presetColors,\n    onPresetColorRemove,\n    onPresetColorAdd,\n    shouldShowPresetColors,\n    shouldShowTransparencySlider,\n    shouldHideDefaultPresetColors,\n    shouldUseSiteColors,\n    shouldShowMoreOptions,\n    shouldHideColorArea,\n}: ColorPickerPopupProps) => (\n    <StyledColorPickerPopup>\n        {!shouldHideColorArea && <ColorArea />}\n        {!shouldHideColorArea && (\n            <Sliders shouldShowTransparencySlider={shouldShowTransparencySlider} />\n        )}\n        {shouldShowPresetColors && (\n            <PresetColors\n                shouldHideDefaultPresetColors={shouldHideDefaultPresetColors}\n                presetColors={presetColors}\n                shouldUseSiteColors={shouldUseSiteColors}\n                onPresetColorAdd={onPresetColorAdd}\n                onPresetColorRemove={onPresetColorRemove}\n            />\n        )}\n        {shouldShowMoreOptions && <MoreOptions />}\n    </StyledColorPickerPopup>\n);\n\nColorPickerPopup.displayName = 'ColorPickerPopup';\n\nexport default ColorPickerPopup;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AAEA,IAAAC,UAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,iBAAA,GAAAF,OAAA;AACA,IAAAG,YAAA,GAAAJ,sBAAA,CAAAC,OAAA;AACA,IAAAI,aAAA,GAAAL,sBAAA,CAAAC,OAAA;AACA,IAAAK,QAAA,GAAAN,sBAAA,CAAAC,OAAA;AAAwC,SAAAD,uBAAAO,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAcxC,MAAMG,gBAAgB,GAAGA,CAAC;EACtBC,YAAY;EACZC,mBAAmB;EACnBC,gBAAgB;EAChBC,sBAAsB;EACtBC,4BAA4B;EAC5BC,6BAA6B;EAC7BC,mBAAmB;EACnBC,qBAAqB;EACrBC;AACmB,CAAC,kBACpBpB,MAAA,CAAAU,OAAA,CAAAW,aAAA,CAACjB,iBAAA,CAAAkB,sBAAsB,QAClB,CAACF,mBAAmB,iBAAIpB,MAAA,CAAAU,OAAA,CAAAW,aAAA,CAAClB,UAAA,CAAAO,OAAS,MAAE,CAAC,EACrC,CAACU,mBAAmB,iBACjBpB,MAAA,CAAAU,OAAA,CAAAW,aAAA,CAACd,QAAA,CAAAG,OAAO;EAACM,4BAA4B,EAAEA;AAA6B,CAAE,CACzE,EACAD,sBAAsB,iBACnBf,MAAA,CAAAU,OAAA,CAAAW,aAAA,CAACf,aAAA,CAAAI,OAAY;EACTO,6BAA6B,EAAEA,6BAA8B;EAC7DL,YAAY,EAAEA,YAAa;EAC3BM,mBAAmB,EAAEA,mBAAoB;EACzCJ,gBAAgB,EAAEA,gBAAiB;EACnCD,mBAAmB,EAAEA;AAAoB,CAC5C,CACJ,EACAM,qBAAqB,iBAAInB,MAAA,CAAAU,OAAA,CAAAW,aAAA,CAAChB,YAAA,CAAAK,OAAW,MAAE,CACpB,CAC3B;AAEDC,gBAAgB,CAACY,WAAW,GAAG,kBAAkB;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAf,OAAA,GAEnCC,gBAAgB","ignoreList":[]}

package/lib/cjs/components/color-picker-popup/color-area/ColorArea.js

@@ -8,11 +8,11 @@ var _react = _interopRequireWildcard(require("react"));
 var _ColorArea = require("./ColorArea.styles");
 var _colors = require("@chayns/colors");
 var _chaynsApi = require("chayns-api");
-var _framerMotion = require("framer-motion");
+var _react2 = require("motion/react");
 var _color = require("../../../utils/color");
 var _ColorPickerProvider = require("../../ColorPickerProvider");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var _core = require("@chayns-components/core");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const ColorArea = () => {
   const {
     selectedColor,
@@ -35,9 +35,10 @@ const ColorArea = () => {
   const canDrag = (0, _react.useRef)(false);
   const canvasRef = (0, _react.useRef)(null);
   const pseudoRef = (0, _react.useRef)(null);
-  const dragControls = (0, _framerMotion.useDragControls)();
-  const x = (0, _framerMotion.useMotionValue)(0);
-  const y = (0, _framerMotion.useMotionValue)(0);
+  const [shouldPreventListener, ref] = (0, _core.useIsMeasuredClone)();
+  const dragControls = (0, _react2.useDragControls)();
+  const x = (0, _react2.useMotionValue)(0);
+  const y = (0, _react2.useMotionValue)(0);
   (0, _react.useEffect)(() => {
     isPresetColorRef.current = isPresetColor ?? false;
   }, [isPresetColor]);
@@ -116,12 +117,6 @@ const ColorArea = () => {
       setColor();
     }
   }, [canGetColorFromArea, hueColor, setColor, updateIsPresetColor]);
-  const handleStartDrag = (0, _react.useCallback)(() => {
-    if (typeof updateShouldGetCoordinates === 'function') {
-      updateShouldGetCoordinates(false);
-    }
-    canDrag.current = true;
-  }, [updateShouldGetCoordinates]);
   (0, _react.useEffect)(() => {
     if (selectedColor && shouldGetCoordinatesRef.current) {
       const cords = (0, _color.getCoordinatesFromColor)({
@@ -188,6 +183,9 @@ const ColorArea = () => {
     setColor();
   }, [setColor, x, y]);
   const handleMouseMove = (0, _react.useCallback)(event => {
+    if (shouldPreventListener) {
+      return;
+    }
     if (canDrag.current && pseudoRef.current) {
       const {
         left,
@@ -197,7 +195,7 @@ const ColorArea = () => {
       const yCords = event.clientY - top - 10;
       move(xCords, yCords);
     }
-  }, [move]);
+  }, [move, shouldPreventListener]);
   const handleTouchMove = (0, _react.useCallback)(event => {
     if (canDrag.current && pseudoRef.current) {
       event.preventDefault();
@@ -211,23 +209,29 @@ const ColorArea = () => {
       move(xCords, yCords);
     }
   }, [move]);
-  (0, _react.useEffect)(() => {
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
+  const handleStartDrag = (0, _react.useCallback)(() => {
+    if (typeof updateShouldGetCoordinates === 'function') {
+      updateShouldGetCoordinates(false);
+    }
+    canDrag.current = true;
     window.addEventListener('mousemove', handleMouseMove);
-    window.addEventListener('pointerup', handlePointerUp);
     window.addEventListener('touchmove', handleTouchMove);
-    window.addEventListener('touchend', handlePointerUp);
-    return () => {
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
+    const endTouching = () => {
+      if (shouldPreventListener) {
+        return;
+      }
+      handlePointerUp();
       window.removeEventListener('mousemove', handleMouseMove);
-      window.removeEventListener('pointerup', handlePointerUp);
       window.removeEventListener('touchmove', handleTouchMove);
-      window.removeEventListener('touchend', handlePointerUp);
+      window.removeEventListener('pointerup', endTouching);
+      window.removeEventListener('touchend', endTouching);
     };
-  }, [handleMouseMove, handlePointerUp, handleTouchMove]);
-  return (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_ColorArea.StyledColorArea, null, /*#__PURE__*/_react.default.createElement(_ColorArea.StyledColorAreaCanvas, {
+    window.addEventListener('pointerup', endTouching);
+    window.addEventListener('touchend', endTouching);
+  }, [handleMouseMove, handlePointerUp, handleTouchMove, shouldPreventListener, updateShouldGetCoordinates]);
+  return (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_ColorArea.StyledColorArea, {
+    ref: ref
+  }, /*#__PURE__*/_react.default.createElement(_ColorArea.StyledColorAreaCanvas, {
     ref: canvasRef
   }), /*#__PURE__*/_react.default.createElement(_ColorArea.StyledColorAreaPseudo, {
     ref: pseudoRef,
@@ -244,7 +248,7 @@ const ColorArea = () => {
     dragMomentum: false,
     dragControls: dragControls,
     onDrag: handleDrag
-  }))), [dragControls, handleClick, handleDrag, handleStartDrag, x, y]);
+  }))), [dragControls, handleClick, handleDrag, handleStartDrag, ref, x, y]);
 };
 ColorArea.displayName = 'ColorArea';
 var _default = exports.default = ColorArea;

package/lib/cjs/components/color-picker-popup/color-area/ColorArea.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorArea.js","names":["_react","_interopRequireWildcard","require","_ColorArea","_colors","_chaynsApi","_framerMotion","_color","_ColorPickerProvider","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ColorArea","selectedColor","updateSelectedColor","updateIsPresetColor","isPresetColor","shouldGetCoordinates","canGetColorFromArea","updateShouldGetCoordinates","updateShouldCallOnSelect","hueColor","useContext","ColorPickerContext","opacity","setOpacity","useState","scale","setScale","scaleX","scaleY","isPresetColorRef","useRef","shouldGetCoordinatesRef","canDrag","canvasRef","pseudoRef","dragControls","useDragControls","x","useMotionValue","y","useEffect","current","extractRgbValues","canvas","rect","getBoundingClientRect","width","height","setColor","useCallback","xCord","yCord","color","getColorFromCoordinates","coordinates","_canvasRef$current","ctx","getContext","hsv","rgbToHsv","hex","hsvToHex","h","s","v","colorGradiant","createLinearGradient","addColorStop","fillStyle","fillRect","transparentGradiant","handleStartDrag","cords","getCoordinatesFromColor","tolerance","handleDrag","handleClick","event","left","top","target","clientX","clientY","handlePointerUp","setRefreshScrollEnabled","move","xCords","yCords","newXCords","newYCords","handleMouseMove","handleTouchMove","preventDefault","changedTouches","pageX","pageY","window","addEventListener","removeEventListener","useMemo","createElement","StyledColorArea","StyledColorAreaCanvas","ref","StyledColorAreaPseudo","onPointerDown","onClick","StyledMotionColorAreaPointer","drag","dragConstraints","style","dragElastic","dragMomentum","onDrag","displayName","_default","exports"],"sources":["../../../../../src/components/color-picker-popup/color-area/ColorArea.tsx"],"sourcesContent":["import React, {\n    MouseEvent,\n    useCallback,\n    useContext,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport {\n    StyledColorArea,\n    StyledColorAreaCanvas,\n    StyledColorAreaPseudo,\n    StyledMotionColorAreaPointer,\n} from './ColorArea.styles';\n\nimport { hsvToHex } from '@chayns/colors';\nimport { setRefreshScrollEnabled } from 'chayns-api';\nimport { useDragControls, useMotionValue } from 'framer-motion';\nimport type { Scale } from '../../../types/colorPicker';\nimport {\n    extractRgbValues,\n    getColorFromCoordinates,\n    getCoordinatesFromColor,\n    rgbToHsv,\n} from '../../../utils/color';\nimport { ColorPickerContext } from '../../ColorPickerProvider';\n\nconst ColorArea = () => {\n    const {\n        selectedColor,\n        updateSelectedColor,\n        updateIsPresetColor,\n        isPresetColor,\n        shouldGetCoordinates,\n        canGetColorFromArea,\n        updateShouldGetCoordinates,\n        updateShouldCallOnSelect,\n        hueColor,\n    } = useContext(ColorPickerContext);\n\n    const [opacity, setOpacity] = useState<number>(1);\n    const [scale, setScale] = useState<Scale>({ scaleX: 0, scaleY: 0 });\n\n    const isPresetColorRef = useRef(false);\n    const shouldGetCoordinatesRef = useRef(false);\n    const canDrag = useRef(false);\n    const canvasRef = useRef<HTMLCanvasElement>(null);\n    const pseudoRef = useRef<HTMLDivElement>(null);\n\n    const dragControls = useDragControls();\n\n    const x = useMotionValue(0);\n    const y = useMotionValue(0);\n\n    useEffect(() => {\n        isPresetColorRef.current = isPresetColor ?? false;\n    }, [isPresetColor]);\n\n    useEffect(() => {\n        shouldGetCoordinatesRef.current = shouldGetCoordinates ?? true;\n    }, [shouldGetCoordinates]);\n\n    useEffect(() => {\n        if (selectedColor) {\n            const { a } = extractRgbValues(selectedColor);\n\n            setOpacity(a);\n        }\n    }, [selectedColor]);\n\n    useEffect(() => {\n        const canvas = canvasRef.current;\n\n        if (!canvas) {\n            return;\n        }\n\n        const rect = canvas.getBoundingClientRect();\n\n        const scaleX = canvas.width / rect.width;\n        const scaleY = canvas.height / rect.height;\n\n        setScale({ scaleX, scaleY });\n    }, []);\n\n    const setColor = useCallback(() => {\n        const xCord = x.get();\n        const yCord = y.get();\n\n        if (typeof updateSelectedColor === 'function') {\n            const color = getColorFromCoordinates({\n                coordinates: {\n                    x: xCord,\n                    y: yCord,\n                },\n                canvas: canvasRef,\n                opacity,\n                scale,\n            });\n\n            if (color === 'transparent') {\n                return;\n            }\n\n            updateSelectedColor(color);\n        }\n    }, [opacity, scale, updateSelectedColor, x, y]);\n\n    useEffect(() => {\n        const ctx = canvasRef.current?.getContext('2d');\n\n        if (!ctx) {\n            return;\n        }\n\n        const hsv = rgbToHsv(hueColor);\n\n        const hex = hsvToHex({ h: hsv?.h ?? 1, s: 1, v: 1 });\n\n        const colorGradiant = ctx.createLinearGradient(0, 0, 300, 0);\n        colorGradiant.addColorStop(0, '#fff');\n        colorGradiant.addColorStop(1, hex ?? 'red');\n\n        ctx.fillStyle = colorGradiant;\n        ctx.fillRect(0, 0, 300, 150);\n\n        const transparentGradiant = ctx.createLinearGradient(0, 0, 0, 150);\n\n        transparentGradiant.addColorStop(0, 'transparent');\n        transparentGradiant.addColorStop(1, '#000');\n\n        ctx.fillStyle = transparentGradiant;\n        ctx.fillRect(0, 0, 300, 150);\n\n        if (isPresetColorRef.current) {\n            if (typeof updateIsPresetColor === 'function') {\n                updateIsPresetColor(false);\n            }\n\n            return;\n        }\n\n        if (canGetColorFromArea) {\n            setColor();\n        }\n    }, [canGetColorFromArea, hueColor, setColor, updateIsPresetColor]);\n\n    const handleStartDrag = useCallback(() => {\n        if (typeof updateShouldGetCoordinates === 'function') {\n            updateShouldGetCoordinates(false);\n        }\n\n        canDrag.current = true;\n    }, [updateShouldGetCoordinates]);\n\n    useEffect(() => {\n        if (selectedColor && shouldGetCoordinatesRef.current) {\n            const cords = getCoordinatesFromColor({\n                color: selectedColor,\n                canvas: canvasRef,\n                tolerance: 10,\n            });\n\n            if (cords) {\n                x.set(cords.x);\n                y.set(cords.y);\n            }\n        }\n    }, [selectedColor, x, y]);\n\n    const handleDrag = useCallback(() => {\n        setColor();\n    }, [setColor]);\n\n    const handleClick = useCallback(\n        (event: MouseEvent<HTMLDivElement>) => {\n            if (typeof updateShouldGetCoordinates === 'function') {\n                updateShouldGetCoordinates(false);\n            }\n\n            const { left, top } = (event.target as HTMLDivElement).getBoundingClientRect();\n\n            x.set(event.clientX - left - 10);\n            y.set(event.clientY - top - 10);\n\n            setColor();\n        },\n        [setColor, updateShouldGetCoordinates, x, y],\n    );\n\n    const handlePointerUp = useCallback(() => {\n        canDrag.current = false;\n\n        void setRefreshScrollEnabled(true);\n\n        if (typeof updateShouldGetCoordinates === 'function') {\n            updateShouldGetCoordinates(true);\n        }\n\n        if (typeof updateShouldCallOnSelect === 'function') {\n            updateShouldCallOnSelect(true);\n        }\n    }, [updateShouldCallOnSelect, updateShouldGetCoordinates]);\n\n    const move = useCallback(\n        (xCords: number, yCords: number) => {\n            let newXCords = xCords;\n            let newYCords = yCords;\n\n            switch (true) {\n                case xCords > 300:\n                    newXCords = 300;\n                    break;\n                case xCords < 0:\n                    newXCords = 0;\n                    break;\n                default:\n                    break;\n            }\n\n            switch (true) {\n                case yCords > 150:\n                    newYCords = 150;\n                    break;\n                case yCords < 0:\n                    newYCords = 0;\n                    break;\n                default:\n                    break;\n            }\n\n            x.set(newXCords);\n            y.set(newYCords);\n\n            setColor();\n        },\n        [setColor, x, y],\n    );\n\n    const handleMouseMove = useCallback(\n        (event: MouseEvent) => {\n            if (canDrag.current && pseudoRef.current) {\n                const { left, top } = pseudoRef.current.getBoundingClientRect();\n\n                const xCords = event.clientX - left - 10;\n                const yCords = event.clientY - top - 10;\n\n                move(xCords, yCords);\n            }\n        },\n        [move],\n    );\n\n    const handleTouchMove = useCallback(\n        (event: TouchEvent) => {\n            if (canDrag.current && pseudoRef.current) {\n                event.preventDefault();\n\n                void setRefreshScrollEnabled(false);\n\n                const { left, top } = pseudoRef.current.getBoundingClientRect();\n\n                const xCords = event.changedTouches[0]\n                    ? event.changedTouches[0].clientX - left - 10\n                    : (event as unknown as { pageX: number }).pageX;\n                const yCords = event.changedTouches[0]\n                    ? event.changedTouches[0].clientY - top - 10\n                    : (event as unknown as { pageY: number }).pageY;\n\n                move(xCords, yCords);\n            }\n        },\n        [move],\n    );\n\n    useEffect(() => {\n        // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n        // @ts-ignore\n        window.addEventListener('mousemove', handleMouseMove);\n        window.addEventListener('pointerup', handlePointerUp);\n        window.addEventListener('touchmove', handleTouchMove);\n        window.addEventListener('touchend', handlePointerUp);\n\n        return () => {\n            // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n            // @ts-ignore\n            window.removeEventListener('mousemove', handleMouseMove);\n            window.removeEventListener('pointerup', handlePointerUp);\n            window.removeEventListener('touchmove', handleTouchMove);\n            window.removeEventListener('touchend', handlePointerUp);\n        };\n    }, [handleMouseMove, handlePointerUp, handleTouchMove]);\n\n    return useMemo(\n        () => (\n            <StyledColorArea>\n                <StyledColorAreaCanvas ref={canvasRef} />\n                <StyledColorAreaPseudo\n                    ref={pseudoRef}\n                    onPointerDown={handleStartDrag}\n                    onClick={handleClick}\n                >\n                    <StyledMotionColorAreaPointer\n                        drag\n                        dragConstraints={pseudoRef}\n                        style={{ x, y }}\n                        dragElastic={false}\n                        dragMomentum={false}\n                        dragControls={dragControls}\n                        onDrag={handleDrag}\n                    />\n                </StyledColorAreaPseudo>\n            </StyledColorArea>\n        ),\n        [dragControls, handleClick, handleDrag, handleStartDrag, x, y],\n    );\n};\n\nColorArea.displayName = 'ColorArea';\n\nexport default ColorArea;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"ColorArea.js","names":["_react","_interopRequireWildcard","require","_ColorArea","_colors","_chaynsApi","_react2","_color","_ColorPickerProvider","_core","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","ColorArea","selectedColor","updateSelectedColor","updateIsPresetColor","isPresetColor","shouldGetCoordinates","canGetColorFromArea","updateShouldGetCoordinates","updateShouldCallOnSelect","hueColor","useContext","ColorPickerContext","opacity","setOpacity","useState","scale","setScale","scaleX","scaleY","isPresetColorRef","useRef","shouldGetCoordinatesRef","canDrag","canvasRef","pseudoRef","shouldPreventListener","ref","useIsMeasuredClone","dragControls","useDragControls","x","useMotionValue","y","useEffect","current","a","extractRgbValues","canvas","rect","getBoundingClientRect","width","height","setColor","useCallback","xCord","yCord","color","getColorFromCoordinates","coordinates","_canvasRef$current","ctx","getContext","hsv","rgbToHsv","hex","hsvToHex","h","s","v","colorGradiant","createLinearGradient","addColorStop","fillStyle","fillRect","transparentGradiant","cords","getCoordinatesFromColor","tolerance","handleDrag","handleClick","event","left","top","target","clientX","clientY","handlePointerUp","setRefreshScrollEnabled","move","xCords","yCords","newXCords","newYCords","handleMouseMove","handleTouchMove","preventDefault","changedTouches","pageX","pageY","handleStartDrag","window","addEventListener","endTouching","removeEventListener","useMemo","createElement","StyledColorArea","StyledColorAreaCanvas","StyledColorAreaPseudo","onPointerDown","onClick","StyledMotionColorAreaPointer","drag","dragConstraints","style","dragElastic","dragMomentum","onDrag","displayName","_default","exports"],"sources":["../../../../../src/components/color-picker-popup/color-area/ColorArea.tsx"],"sourcesContent":["import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';\nimport {\n    StyledColorArea,\n    StyledColorAreaCanvas,\n    StyledColorAreaPseudo,\n    StyledMotionColorAreaPointer,\n} from './ColorArea.styles';\n\nimport { hsvToHex } from '@chayns/colors';\nimport { setRefreshScrollEnabled } from 'chayns-api';\nimport { useDragControls, useMotionValue } from 'motion/react';\nimport type { Scale } from '../../../types/colorPicker';\nimport {\n    extractRgbValues,\n    getColorFromCoordinates,\n    getCoordinatesFromColor,\n    rgbToHsv,\n} from '../../../utils/color';\nimport { ColorPickerContext } from '../../ColorPickerProvider';\nimport { useIsMeasuredClone } from '@chayns-components/core';\n\nconst ColorArea = () => {\n    const {\n        selectedColor,\n        updateSelectedColor,\n        updateIsPresetColor,\n        isPresetColor,\n        shouldGetCoordinates,\n        canGetColorFromArea,\n        updateShouldGetCoordinates,\n        updateShouldCallOnSelect,\n        hueColor,\n    } = useContext(ColorPickerContext);\n\n    const [opacity, setOpacity] = useState<number>(1);\n    const [scale, setScale] = useState<Scale>({ scaleX: 0, scaleY: 0 });\n\n    const isPresetColorRef = useRef(false);\n    const shouldGetCoordinatesRef = useRef(false);\n    const canDrag = useRef(false);\n    const canvasRef = useRef<HTMLCanvasElement>(null);\n    const pseudoRef = useRef<HTMLDivElement>(null);\n\n    const [shouldPreventListener, ref] = useIsMeasuredClone<HTMLDivElement>();\n\n    const dragControls = useDragControls();\n\n    const x = useMotionValue(0);\n    const y = useMotionValue(0);\n\n    useEffect(() => {\n        isPresetColorRef.current = isPresetColor ?? false;\n    }, [isPresetColor]);\n\n    useEffect(() => {\n        shouldGetCoordinatesRef.current = shouldGetCoordinates ?? true;\n    }, [shouldGetCoordinates]);\n\n    useEffect(() => {\n        if (selectedColor) {\n            const { a } = extractRgbValues(selectedColor);\n\n            setOpacity(a);\n        }\n    }, [selectedColor]);\n\n    useEffect(() => {\n        const canvas = canvasRef.current;\n\n        if (!canvas) {\n            return;\n        }\n\n        const rect = canvas.getBoundingClientRect();\n\n        const scaleX = canvas.width / rect.width;\n        const scaleY = canvas.height / rect.height;\n\n        setScale({ scaleX, scaleY });\n    }, []);\n\n    const setColor = useCallback(() => {\n        const xCord = x.get();\n        const yCord = y.get();\n\n        if (typeof updateSelectedColor === 'function') {\n            const color = getColorFromCoordinates({\n                coordinates: {\n                    x: xCord,\n                    y: yCord,\n                },\n                canvas: canvasRef,\n                opacity,\n                scale,\n            });\n\n            if (color === 'transparent') {\n                return;\n            }\n\n            updateSelectedColor(color);\n        }\n    }, [opacity, scale, updateSelectedColor, x, y]);\n\n    useEffect(() => {\n        const ctx = canvasRef.current?.getContext('2d');\n\n        if (!ctx) {\n            return;\n        }\n\n        const hsv = rgbToHsv(hueColor);\n\n        const hex = hsvToHex({ h: hsv?.h ?? 1, s: 1, v: 1 });\n\n        const colorGradiant = ctx.createLinearGradient(0, 0, 300, 0);\n        colorGradiant.addColorStop(0, '#fff');\n        colorGradiant.addColorStop(1, hex ?? 'red');\n\n        ctx.fillStyle = colorGradiant;\n        ctx.fillRect(0, 0, 300, 150);\n\n        const transparentGradiant = ctx.createLinearGradient(0, 0, 0, 150);\n\n        transparentGradiant.addColorStop(0, 'transparent');\n        transparentGradiant.addColorStop(1, '#000');\n\n        ctx.fillStyle = transparentGradiant;\n        ctx.fillRect(0, 0, 300, 150);\n\n        if (isPresetColorRef.current) {\n            if (typeof updateIsPresetColor === 'function') {\n                updateIsPresetColor(false);\n            }\n\n            return;\n        }\n\n        if (canGetColorFromArea) {\n            setColor();\n        }\n    }, [canGetColorFromArea, hueColor, setColor, updateIsPresetColor]);\n\n    useEffect(() => {\n        if (selectedColor && shouldGetCoordinatesRef.current) {\n            const cords = getCoordinatesFromColor({\n                color: selectedColor,\n                canvas: canvasRef,\n                tolerance: 10,\n            });\n\n            if (cords) {\n                x.set(cords.x);\n                y.set(cords.y);\n            }\n        }\n    }, [selectedColor, x, y]);\n\n    const handleDrag = useCallback(() => {\n        setColor();\n    }, [setColor]);\n\n    const handleClick = useCallback(\n        (event: React.MouseEvent<HTMLDivElement>) => {\n            if (typeof updateShouldGetCoordinates === 'function') {\n                updateShouldGetCoordinates(false);\n            }\n\n            const { left, top } = (event.target as HTMLDivElement).getBoundingClientRect();\n\n            x.set(event.clientX - left - 10);\n            y.set(event.clientY - top - 10);\n\n            setColor();\n        },\n        [setColor, updateShouldGetCoordinates, x, y],\n    );\n\n    const handlePointerUp = useCallback(() => {\n        canDrag.current = false;\n\n        void setRefreshScrollEnabled(true);\n\n        if (typeof updateShouldGetCoordinates === 'function') {\n            updateShouldGetCoordinates(true);\n        }\n\n        if (typeof updateShouldCallOnSelect === 'function') {\n            updateShouldCallOnSelect(true);\n        }\n    }, [updateShouldCallOnSelect, updateShouldGetCoordinates]);\n\n    const move = useCallback(\n        (xCords: number, yCords: number) => {\n            let newXCords = xCords;\n            let newYCords = yCords;\n\n            switch (true) {\n                case xCords > 300:\n                    newXCords = 300;\n                    break;\n                case xCords < 0:\n                    newXCords = 0;\n                    break;\n                default:\n                    break;\n            }\n\n            switch (true) {\n                case yCords > 150:\n                    newYCords = 150;\n                    break;\n                case yCords < 0:\n                    newYCords = 0;\n                    break;\n                default:\n                    break;\n            }\n\n            x.set(newXCords);\n            y.set(newYCords);\n\n            setColor();\n        },\n        [setColor, x, y],\n    );\n\n    const handleMouseMove = useCallback(\n        (event: MouseEvent) => {\n            if (shouldPreventListener) {\n                return;\n            }\n\n            if (canDrag.current && pseudoRef.current) {\n                const { left, top } = pseudoRef.current.getBoundingClientRect();\n\n                const xCords = event.clientX - left - 10;\n                const yCords = event.clientY - top - 10;\n\n                move(xCords, yCords);\n            }\n        },\n        [move, shouldPreventListener],\n    );\n\n    const handleTouchMove = useCallback(\n        (event: TouchEvent) => {\n            if (canDrag.current && pseudoRef.current) {\n                event.preventDefault();\n\n                void setRefreshScrollEnabled(false);\n\n                const { left, top } = pseudoRef.current.getBoundingClientRect();\n\n                const xCords = event.changedTouches[0]\n                    ? event.changedTouches[0].clientX - left - 10\n                    : (event as unknown as { pageX: number }).pageX;\n                const yCords = event.changedTouches[0]\n                    ? event.changedTouches[0].clientY - top - 10\n                    : (event as unknown as { pageY: number }).pageY;\n\n                move(xCords, yCords);\n            }\n        },\n        [move],\n    );\n\n    const handleStartDrag = useCallback(() => {\n        if (typeof updateShouldGetCoordinates === 'function') {\n            updateShouldGetCoordinates(false);\n        }\n\n        canDrag.current = true;\n\n        window.addEventListener('mousemove', handleMouseMove);\n        window.addEventListener('touchmove', handleTouchMove);\n\n        const endTouching = () => {\n            if (shouldPreventListener) {\n                return;\n            }\n\n            handlePointerUp();\n\n            window.removeEventListener('mousemove', handleMouseMove);\n            window.removeEventListener('touchmove', handleTouchMove);\n            window.removeEventListener('pointerup', endTouching);\n            window.removeEventListener('touchend', endTouching);\n        };\n\n        window.addEventListener('pointerup', endTouching);\n        window.addEventListener('touchend', endTouching);\n    }, [\n        handleMouseMove,\n        handlePointerUp,\n        handleTouchMove,\n        shouldPreventListener,\n        updateShouldGetCoordinates,\n    ]);\n\n    return useMemo(\n        () => (\n            <StyledColorArea ref={ref}>\n                <StyledColorAreaCanvas ref={canvasRef} />\n                <StyledColorAreaPseudo\n                    ref={pseudoRef}\n                    onPointerDown={handleStartDrag}\n                    onClick={handleClick}\n                >\n                    <StyledMotionColorAreaPointer\n                        drag\n                        dragConstraints={pseudoRef}\n                        style={{ x, y }}\n                        dragElastic={false}\n                        dragMomentum={false}\n                        dragControls={dragControls}\n                        onDrag={handleDrag}\n                    />\n                </StyledColorAreaPseudo>\n            </StyledColorArea>\n        ),\n        [dragControls, handleClick, handleDrag, handleStartDrag, ref, x, y],\n    );\n};\n\nColorArea.displayName = 'ColorArea';\n\nexport default ColorArea;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/color-picker-popup/color-area/ColorArea.styles.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.StyledMotionColorAreaPointer = exports.StyledColorAreaPseudo = exports.StyledColorAreaCanvas = exports.StyledColorArea = void 0;
-var _framerMotion = require("framer-motion");
+var _react = require("motion/react");
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const StyledColorArea = exports.StyledColorArea = _styledComponents.default.div`
@@ -28,7 +28,7 @@ const StyledColorAreaPseudo = exports.StyledColorAreaPseudo = _styledComponents.
     height: 170px;
     width: 320px;
 `;
-const StyledMotionColorAreaPointer = exports.StyledMotionColorAreaPointer = (0, _styledComponents.default)(_framerMotion.motion.div)`
+const StyledMotionColorAreaPointer = exports.StyledMotionColorAreaPointer = (0, _styledComponents.default)(_react.motion.div)`
     position: absolute;
     border-radius: 100%;
     border: 2px solid white;

package/lib/cjs/components/color-picker-popup/color-area/ColorArea.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorArea.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireDefault","e","__esModule","default","StyledColorArea","exports","styled","div","StyledColorAreaCanvas","canvas","StyledColorAreaPseudo","StyledMotionColorAreaPointer","motion"],"sources":["../../../../../src/components/color-picker-popup/color-area/ColorArea.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled from 'styled-components';\n\nexport const StyledColorArea = styled.div`\n    height: 150px;\n    width: 300px;\n    position: relative;\n    user-select: none;\n    overflow: hidden;\n    cursor: crosshair;\n`;\n\nexport const StyledColorAreaCanvas = styled.canvas`\n    user-select: none;\n`;\n\nexport const StyledColorAreaPseudo = styled.div`\n    position: absolute;\n    top: -10px;\n    left: -10px;\n    touch-action: none;\n    user-select: none;\n\n    height: 170px;\n    width: 320px;\n`;\n\nexport const StyledMotionColorAreaPointer = styled(motion.div)`\n    position: absolute;\n    border-radius: 100%;\n    border: 2px solid white;\n    width: 20px;\n    height: 20px;\n    box-shadow:\n        0 0 5px 0 rgba(0, 0, 0, 0.5),\n        0 0 3px 0 rgba(0, 0, 0, 0.5) inset;\n    pointer-events: none;\n    user-select: none;\n    top: 0;\n    left: 0;\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,aAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,sBAAA,CAAAF,OAAA;AAAuC,SAAAE,uBAAAC,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAEhC,MAAMG,eAAe,GAAAC,OAAA,CAAAD,eAAA,GAAGE,yBAAM,CAACC,GAAG;AACzC;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAMC,qBAAqB,GAAAH,OAAA,CAAAG,qBAAA,GAAGF,yBAAM,CAACG,MAAM;AAClD;AACA,CAAC;AAEM,MAAMC,qBAAqB,GAAAL,OAAA,CAAAK,qBAAA,GAAGJ,yBAAM,CAACC,GAAG;AAC/C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAMI,4BAA4B,GAAAN,OAAA,CAAAM,4BAAA,GAAG,IAAAL,yBAAM,EAACM,oBAAM,CAACL,GAAG,CAAC;AAC9D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
+{"version":3,"file":"ColorArea.styles.js","names":["_react","require","_styledComponents","_interopRequireDefault","e","__esModule","default","StyledColorArea","exports","styled","div","StyledColorAreaCanvas","canvas","StyledColorAreaPseudo","StyledMotionColorAreaPointer","motion"],"sources":["../../../../../src/components/color-picker-popup/color-area/ColorArea.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled from 'styled-components';\n\nexport const StyledColorArea = styled.div`\n    height: 150px;\n    width: 300px;\n    position: relative;\n    user-select: none;\n    overflow: hidden;\n    cursor: crosshair;\n`;\n\nexport const StyledColorAreaCanvas = styled.canvas`\n    user-select: none;\n`;\n\nexport const StyledColorAreaPseudo = styled.div`\n    position: absolute;\n    top: -10px;\n    left: -10px;\n    touch-action: none;\n    user-select: none;\n\n    height: 170px;\n    width: 320px;\n`;\n\nexport const StyledMotionColorAreaPointer = styled(motion.div)`\n    position: absolute;\n    border-radius: 100%;\n    border: 2px solid white;\n    width: 20px;\n    height: 20px;\n    box-shadow:\n        0 0 5px 0 rgba(0, 0, 0, 0.5),\n        0 0 3px 0 rgba(0, 0, 0, 0.5) inset;\n    pointer-events: none;\n    user-select: none;\n    top: 0;\n    left: 0;\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,sBAAA,CAAAF,OAAA;AAAuC,SAAAE,uBAAAC,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAEhC,MAAMG,eAAe,GAAAC,OAAA,CAAAD,eAAA,GAAGE,yBAAM,CAACC,GAAG;AACzC;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAMC,qBAAqB,GAAAH,OAAA,CAAAG,qBAAA,GAAGF,yBAAM,CAACG,MAAM;AAClD;AACA,CAAC;AAEM,MAAMC,qBAAqB,GAAAL,OAAA,CAAAK,qBAAA,GAAGJ,yBAAM,CAACC,GAAG;AAC/C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAMI,4BAA4B,GAAAN,OAAA,CAAAM,4BAAA,GAAG,IAAAL,yBAAM,EAACM,aAAM,CAACL,GAAG,CAAC;AAC9D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}

package/lib/cjs/components/color-picker-popup/more-options/MoreOptions.js

@@ -10,8 +10,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _color = require("../../../utils/color");
 var _ColorPickerProvider = require("../../ColorPickerProvider");
 var _MoreOptions = require("./MoreOptions.styles");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const MoreOptions = () => {
   const {
     selectedColor,