@chayns-components/color-picker 5.0.0-beta.567 → 5.0.0-beta.569

package/lib/components/ColorPickerProvider.d.ts

@@ -0,0 +1,33 @@
+import React, { type ReactNode } from 'react';
+interface IColorPickerContext {
+    selectedColor?: string;
+    updateSelectedColor?: (color: string | undefined) => void;
+    hueColor?: string;
+    updateHueColor?: (color: string | undefined) => void;
+    isPresetColor?: boolean;
+    updateIsPresetColor?: (isPresetColor: boolean) => void;
+    shouldGetCoordinates?: boolean;
+    updateShouldGetCoordinates?: (shouldGetCoordinates: boolean) => void;
+    shouldCallOnSelect?: boolean;
+    updateShouldCallOnSelect?: (shouldCallOnSelect: boolean) => void;
+}
+export declare const ColorPickerContext: React.Context<IColorPickerContext>;
+interface ColorPickerProviderProps {
+    /**
+     * The children of the provider.
+     */
+    children: ReactNode;
+    /**
+     * Function to be executed when a color is selected.
+     */
+    onSelect?: (color: string) => void;
+    /**
+     * The color that should be preselected.
+     */
+    selectedColor?: string;
+}
+declare const ColorPickerProvider: {
+    ({ children, selectedColor, onSelect }: ColorPickerProviderProps): React.JSX.Element;
+    displayName: string;
+};
+export default ColorPickerProvider;

package/lib/components/ColorPickerProvider.js

@@ -0,0 +1,70 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+export const ColorPickerContext = /*#__PURE__*/React.createContext({
+  selectedColor: undefined,
+  updateSelectedColor: undefined,
+  hueColor: undefined,
+  updateHueColor: undefined,
+  isPresetColor: undefined,
+  updateIsPresetColor: undefined,
+  shouldGetCoordinates: undefined,
+  updateShouldGetCoordinates: undefined,
+  shouldCallOnSelect: undefined,
+  updateShouldCallOnSelect: undefined
+});
+ColorPickerContext.displayName = 'ColorPickerContext';
+const ColorPickerProvider = _ref => {
+  let {
+    children,
+    selectedColor,
+    onSelect
+  } = _ref;
+  const [internalSelectedColor, setInternalSelectedColor] = useState();
+  const [internalHueColor, setInternalHueColor] = useState();
+  const [internalIsPresetColor, setInternalIsPresetColor] = useState(false);
+  const [internalShouldGetCoordinates, setInternalShouldGetCoordinates] = useState(true);
+  const [internalShouldCallOnSelect, setInternalShouldCallOnSelect] = useState(false);
+  const updateSelectedColor = useCallback(color => {
+    setInternalSelectedColor(color);
+  }, []);
+  const updateHueColor = useCallback(color => {
+    setInternalHueColor(color);
+  }, []);
+  const updateIsPresetColor = useCallback(isPresetColor => {
+    setInternalIsPresetColor(isPresetColor);
+  }, []);
+  const updateShouldGetCoordinates = useCallback(shouldGetCoordinates => {
+    setInternalShouldGetCoordinates(shouldGetCoordinates);
+  }, []);
+  const updateShouldCallOnSelect = useCallback(shouldCallOnSelect => {
+    setInternalShouldCallOnSelect(shouldCallOnSelect);
+  }, []);
+  useEffect(() => {
+    setInternalSelectedColor(selectedColor);
+    setInternalHueColor(selectedColor);
+    setInternalIsPresetColor(true);
+  }, [selectedColor]);
+  useEffect(() => {
+    if (typeof onSelect === 'function' && internalShouldCallOnSelect && internalSelectedColor) {
+      onSelect(internalSelectedColor);
+      setInternalShouldCallOnSelect(false);
+    }
+  }, [internalSelectedColor, internalShouldCallOnSelect, onSelect]);
+  const providerValue = useMemo(() => ({
+    selectedColor: internalSelectedColor,
+    updateSelectedColor,
+    hueColor: internalHueColor,
+    updateHueColor,
+    isPresetColor: internalIsPresetColor,
+    updateIsPresetColor,
+    shouldGetCoordinates: internalShouldGetCoordinates,
+    updateShouldGetCoordinates,
+    shouldCallOnSelect: internalShouldCallOnSelect,
+    updateShouldCallOnSelect
+  }), [internalHueColor, internalIsPresetColor, internalSelectedColor, internalShouldCallOnSelect, internalShouldGetCoordinates, updateHueColor, updateIsPresetColor, updateSelectedColor, updateShouldCallOnSelect, updateShouldGetCoordinates]);
+  return /*#__PURE__*/React.createElement(ColorPickerContext.Provider, {
+    value: providerValue
+  }, children);
+};
+ColorPickerProvider.displayName = 'ColorPickerProvider';
+export default ColorPickerProvider;
+//# sourceMappingURL=ColorPickerProvider.js.map

package/lib/components/ColorPickerProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPickerProvider.js","names":["React","useCallback","useEffect","useMemo","useState","ColorPickerContext","createContext","selectedColor","undefined","updateSelectedColor","hueColor","updateHueColor","isPresetColor","updateIsPresetColor","shouldGetCoordinates","updateShouldGetCoordinates","shouldCallOnSelect","updateShouldCallOnSelect","displayName","ColorPickerProvider","_ref","children","onSelect","internalSelectedColor","setInternalSelectedColor","internalHueColor","setInternalHueColor","internalIsPresetColor","setInternalIsPresetColor","internalShouldGetCoordinates","setInternalShouldGetCoordinates","internalShouldCallOnSelect","setInternalShouldCallOnSelect","color","providerValue","createElement","Provider","value"],"sources":["../../src/components/ColorPickerProvider.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, useState, type ReactNode } from 'react';\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}\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});\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\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    useEffect(() => {\n        setInternalSelectedColor(selectedColor);\n        setInternalHueColor(selectedColor);\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        }),\n        [\n            internalHueColor,\n            internalIsPresetColor,\n            internalSelectedColor,\n            internalShouldCallOnSelect,\n            internalShouldGetCoordinates,\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/components/color-picker/ColorPicker.d.ts

@@ -0,0 +1,45 @@
+import React from 'react';
+import type { IPresetColor } from '../../types';
+interface ColorPickerProps {
+    /**
+     * Function to be executed when a color is selected.
+     */
+    onSelect?: (color: string) => void;
+    /**
+     * The color that should be preselected.
+     */
+    selectedColor?: string;
+    /**
+     * Colors the user can select from.
+     */
+    presetColors?: IPresetColor[];
+    /**
+     * Whether the preset colors should be displayed.
+     */
+    shouldShowPresetColors?: boolean;
+    /**
+     * Function to be executed when a preset color is added.
+     */
+    onPresetColorAdd?: (presetColor: IPresetColor) => void;
+    /**
+     * Function to be executed when a preset color is removed.
+     */
+    onPresetColorRemove?: (presetColorId: IPresetColor['id']) => void;
+    /**
+     * Whether the transparency slider should be displayed.
+     */
+    shouldShowTransparencySlider?: boolean;
+    /**
+     * Whether the more options accordion should be displayed.
+     */
+    shouldShowMoreOptions?: boolean;
+    /**
+     * Whether the ColorPicker should be displayed inside a popup.
+     */
+    shouldShowAsPopup?: boolean;
+}
+declare const ColorPicker: {
+    ({ selectedColor, presetColors, onPresetColorRemove, onPresetColorAdd, shouldShowPresetColors, shouldShowAsPopup, shouldShowTransparencySlider, shouldShowMoreOptions, onSelect, }: ColorPickerProps): React.JSX.Element;
+    displayName: string;
+};
+export default ColorPicker;

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

@@ -0,0 +1,32 @@
+import React from 'react';
+import ColorPickerProvider from '../ColorPickerProvider';
+import ColorPickerWrapper from './color-picker-wrapper/ColorPickerWrapper';
+import { StyledColorPicker } from './ColorPicker.styles';
+const ColorPicker = _ref => {
+  let {
+    selectedColor = 'rgba(255, 0, 0, 1)',
+    presetColors,
+    onPresetColorRemove,
+    onPresetColorAdd,
+    shouldShowPresetColors = false,
+    shouldShowAsPopup = true,
+    shouldShowTransparencySlider = false,
+    shouldShowMoreOptions = false,
+    onSelect
+  } = _ref;
+  return /*#__PURE__*/React.createElement(ColorPickerProvider, {
+    selectedColor: selectedColor,
+    onSelect: onSelect
+  }, /*#__PURE__*/React.createElement(StyledColorPicker, null, /*#__PURE__*/React.createElement(ColorPickerWrapper, {
+    shouldShowTransparencySlider: shouldShowTransparencySlider,
+    presetColors: presetColors,
+    onPresetColorAdd: onPresetColorAdd,
+    onPresetColorRemove: onPresetColorRemove,
+    shouldShowAsPopup: shouldShowAsPopup,
+    shouldShowMoreOptions: shouldShowMoreOptions,
+    shouldShowPresetColors: shouldShowPresetColors
+  })));
+};
+ColorPicker.displayName = 'ColorPicker';
+export default ColorPicker;
+//# sourceMappingURL=ColorPicker.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPicker.js","names":["React","ColorPickerProvider","ColorPickerWrapper","StyledColorPicker","ColorPicker","_ref","selectedColor","presetColors","onPresetColorRemove","onPresetColorAdd","shouldShowPresetColors","shouldShowAsPopup","shouldShowTransparencySlider","shouldShowMoreOptions","onSelect","createElement","displayName"],"sources":["../../../src/components/color-picker/ColorPicker.tsx"],"sourcesContent":["import React from 'react';\nimport type { IPresetColor } from '../../types';\nimport ColorPickerProvider from '../ColorPickerProvider';\nimport ColorPickerWrapper from './color-picker-wrapper/ColorPickerWrapper';\nimport { StyledColorPicker } from './ColorPicker.styles';\n\ninterface ColorPickerProps {\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     * Colors the user can select from.\n     */\n    presetColors?: IPresetColor[];\n    /**\n     * Whether the preset colors should be displayed.\n     */\n    shouldShowPresetColors?: boolean;\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     * Whether the transparency slider should be displayed.\n     */\n    shouldShowTransparencySlider?: boolean;\n    /**\n     * Whether the more options accordion should be displayed.\n     */\n    shouldShowMoreOptions?: boolean;\n    /**\n     * Whether the ColorPicker should be displayed inside a popup.\n     */\n    shouldShowAsPopup?: boolean;\n}\n\nconst ColorPicker = ({\n    selectedColor = 'rgba(255, 0, 0, 1)',\n    presetColors,\n    onPresetColorRemove,\n    onPresetColorAdd,\n    shouldShowPresetColors = false,\n    shouldShowAsPopup = true,\n    shouldShowTransparencySlider = false,\n    shouldShowMoreOptions = false,\n    onSelect,\n}: ColorPickerProps) => (\n    <ColorPickerProvider selectedColor={selectedColor} onSelect={onSelect}>\n        <StyledColorPicker>\n            <ColorPickerWrapper\n                shouldShowTransparencySlider={shouldShowTransparencySlider}\n                presetColors={presetColors}\n                onPresetColorAdd={onPresetColorAdd}\n                onPresetColorRemove={onPresetColorRemove}\n                shouldShowAsPopup={shouldShowAsPopup}\n                shouldShowMoreOptions={shouldShowMoreOptions}\n                shouldShowPresetColors={shouldShowPresetColors}\n            />\n        </StyledColorPicker>\n    </ColorPickerProvider>\n);\n\nColorPicker.displayName = 'ColorPicker';\n\nexport default ColorPicker;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,OAAOC,mBAAmB,MAAM,wBAAwB;AACxD,OAAOC,kBAAkB,MAAM,2CAA2C;AAC1E,SAASC,iBAAiB,QAAQ,sBAAsB;AAyCxD,MAAMC,WAAW,GAAGC,IAAA;EAAA,IAAC;IACjBC,aAAa,GAAG,oBAAoB;IACpCC,YAAY;IACZC,mBAAmB;IACnBC,gBAAgB;IAChBC,sBAAsB,GAAG,KAAK;IAC9BC,iBAAiB,GAAG,IAAI;IACxBC,4BAA4B,GAAG,KAAK;IACpCC,qBAAqB,GAAG,KAAK;IAC7BC;EACc,CAAC,GAAAT,IAAA;EAAA,oBACfL,KAAA,CAAAe,aAAA,CAACd,mBAAmB;IAACK,aAAa,EAAEA,aAAc;IAACQ,QAAQ,EAAEA;EAAS,gBAClEd,KAAA,CAAAe,aAAA,CAACZ,iBAAiB,qBACdH,KAAA,CAAAe,aAAA,CAACb,kBAAkB;IACfU,4BAA4B,EAAEA,4BAA6B;IAC3DL,YAAY,EAAEA,YAAa;IAC3BE,gBAAgB,EAAEA,gBAAiB;IACnCD,mBAAmB,EAAEA,mBAAoB;IACzCG,iBAAiB,EAAEA,iBAAkB;IACrCE,qBAAqB,EAAEA,qBAAsB;IAC7CH,sBAAsB,EAAEA;EAAuB,CAClD,CACc,CACF,CAAC;AAAA,CACzB;AAEDN,WAAW,CAACY,WAAW,GAAG,aAAa;AAEvC,eAAeZ,WAAW","ignoreList":[]}

package/lib/components/color-picker/ColorPicker.styles.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const StyledColorPicker: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;

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

@@ -0,0 +1,5 @@
+import styled from 'styled-components';
+export const StyledColorPicker = styled.div`
+    width: 100%;
+`;
+//# sourceMappingURL=ColorPicker.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPicker.styles.js","names":["styled","StyledColorPicker","div"],"sources":["../../../src/components/color-picker/ColorPicker.styles.ts"],"sourcesContent":["import styled from 'styled-components';\n\nexport const StyledColorPicker = styled.div`\n    width: 100%;\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AAEtC,OAAO,MAAMC,iBAAiB,GAAGD,MAAM,CAACE,GAAI;AAC5C;AACA,CAAC","ignoreList":[]}

package/lib/components/color-picker/color-picker-wrapper/ColorPickerWrapper.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import type { IPresetColor } from '../../../types';
+interface ColorPickerWrapperProps {
+    presetColors?: IPresetColor[];
+    shouldShowPresetColors: boolean;
+    onPresetColorAdd?: (presetColor: IPresetColor) => void;
+    onPresetColorRemove?: (presetColorId: IPresetColor['id']) => void;
+    shouldShowTransparencySlider: boolean;
+    shouldShowMoreOptions: boolean;
+    shouldShowAsPopup: boolean;
+}
+declare const ColorPickerWrapper: {
+    ({ presetColors, onPresetColorRemove, onPresetColorAdd, shouldShowPresetColors, shouldShowAsPopup, shouldShowTransparencySlider, shouldShowMoreOptions, }: ColorPickerWrapperProps): React.JSX.Element;
+    displayName: string;
+};
+export default ColorPickerWrapper;

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

@@ -0,0 +1,35 @@
+import { Popup } from '@chayns-components/core';
+import React, { useContext, useMemo } from 'react';
+import { ColorPickerContext } from '../../ColorPickerProvider';
+import ColorPickerPopup from './color-picker-popup/ColorPickerPopup';
+import { StyledColorPickerWrapper, StyledColorPickerWrapperInfo, StyledColorPickerWrapperInfoColor, StyledColorPickerWrapperInfoText } from './ColorPickerWrapper.styles';
+const ColorPickerWrapper = _ref => {
+  let {
+    presetColors,
+    onPresetColorRemove,
+    onPresetColorAdd,
+    shouldShowPresetColors,
+    shouldShowAsPopup,
+    shouldShowTransparencySlider,
+    shouldShowMoreOptions
+  } = _ref;
+  const {
+    selectedColor
+  } = useContext(ColorPickerContext);
+  const content = useMemo(() => /*#__PURE__*/React.createElement(ColorPickerPopup, {
+    shouldShowPresetColors: shouldShowPresetColors,
+    onPresetColorRemove: onPresetColorRemove,
+    onPresetColorAdd: onPresetColorAdd,
+    presetColors: presetColors,
+    shouldShowMoreOptions: shouldShowMoreOptions,
+    shouldShowTransparencySlider: shouldShowTransparencySlider
+  }), [onPresetColorAdd, onPresetColorRemove, presetColors, shouldShowMoreOptions, shouldShowPresetColors, shouldShowTransparencySlider]);
+  return /*#__PURE__*/React.createElement(StyledColorPickerWrapper, null, shouldShowAsPopup ? /*#__PURE__*/React.createElement(Popup, {
+    content: content
+  }, /*#__PURE__*/React.createElement(StyledColorPickerWrapperInfo, null, /*#__PURE__*/React.createElement(StyledColorPickerWrapperInfoColor, {
+    $color: selectedColor
+  }), /*#__PURE__*/React.createElement(StyledColorPickerWrapperInfoText, null, selectedColor))) : content);
+};
+ColorPickerWrapper.displayName = 'ColorPickerWrapper';
+export default ColorPickerWrapper;
+//# sourceMappingURL=ColorPickerWrapper.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPickerWrapper.js","names":["Popup","React","useContext","useMemo","ColorPickerContext","ColorPickerPopup","StyledColorPickerWrapper","StyledColorPickerWrapperInfo","StyledColorPickerWrapperInfoColor","StyledColorPickerWrapperInfoText","ColorPickerWrapper","_ref","presetColors","onPresetColorRemove","onPresetColorAdd","shouldShowPresetColors","shouldShowAsPopup","shouldShowTransparencySlider","shouldShowMoreOptions","selectedColor","content","createElement","$color","displayName"],"sources":["../../../../src/components/color-picker/color-picker-wrapper/ColorPickerWrapper.tsx"],"sourcesContent":["import { Popup } from '@chayns-components/core';\nimport React, { useContext, useMemo } from 'react';\nimport type { IPresetColor } from '../../../types';\nimport { ColorPickerContext } from '../../ColorPickerProvider';\nimport ColorPickerPopup from './color-picker-popup/ColorPickerPopup';\nimport {\n    StyledColorPickerWrapper,\n    StyledColorPickerWrapperInfo,\n    StyledColorPickerWrapperInfoColor,\n    StyledColorPickerWrapperInfoText,\n} from './ColorPickerWrapper.styles';\n\ninterface ColorPickerWrapperProps {\n    presetColors?: IPresetColor[];\n    shouldShowPresetColors: boolean;\n    onPresetColorAdd?: (presetColor: IPresetColor) => void;\n    onPresetColorRemove?: (presetColorId: IPresetColor['id']) => void;\n    shouldShowTransparencySlider: boolean;\n    shouldShowMoreOptions: boolean;\n    shouldShowAsPopup: boolean;\n}\n\nconst ColorPickerWrapper = ({\n    presetColors,\n    onPresetColorRemove,\n    onPresetColorAdd,\n    shouldShowPresetColors,\n    shouldShowAsPopup,\n    shouldShowTransparencySlider,\n    shouldShowMoreOptions,\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                shouldShowMoreOptions={shouldShowMoreOptions}\n                shouldShowTransparencySlider={shouldShowTransparencySlider}\n            />\n        ),\n        [\n            onPresetColorAdd,\n            onPresetColorRemove,\n            presetColors,\n            shouldShowMoreOptions,\n            shouldShowPresetColors,\n            shouldShowTransparencySlider,\n        ],\n    );\n\n    return (\n        <StyledColorPickerWrapper>\n            {shouldShowAsPopup ? (\n                <Popup content={content}>\n                    <StyledColorPickerWrapperInfo>\n                        <StyledColorPickerWrapperInfoColor $color={selectedColor} />\n                        <StyledColorPickerWrapperInfoText>\n                            {selectedColor}\n                        </StyledColorPickerWrapperInfoText>\n                    </StyledColorPickerWrapperInfo>\n                </Popup>\n            ) : (\n                content\n            )}\n        </StyledColorPickerWrapper>\n    );\n};\n\nColorPickerWrapper.displayName = 'ColorPickerWrapper';\n\nexport default ColorPickerWrapper;\n"],"mappings":"AAAA,SAASA,KAAK,QAAQ,yBAAyB;AAC/C,OAAOC,KAAK,IAAIC,UAAU,EAAEC,OAAO,QAAQ,OAAO;AAElD,SAASC,kBAAkB,QAAQ,2BAA2B;AAC9D,OAAOC,gBAAgB,MAAM,uCAAuC;AACpE,SACIC,wBAAwB,EACxBC,4BAA4B,EAC5BC,iCAAiC,EACjCC,gCAAgC,QAC7B,6BAA6B;AAYpC,MAAMC,kBAAkB,GAAGC,IAAA,IAQI;EAAA,IARH;IACxBC,YAAY;IACZC,mBAAmB;IACnBC,gBAAgB;IAChBC,sBAAsB;IACtBC,iBAAiB;IACjBC,4BAA4B;IAC5BC;EACqB,CAAC,GAAAP,IAAA;EACtB,MAAM;IAAEQ;EAAc,CAAC,GAAGjB,UAAU,CAACE,kBAAkB,CAAC;EAExD,MAAMgB,OAAO,GAAGjB,OAAO,CACnB,mBACIF,KAAA,CAAAoB,aAAA,CAAChB,gBAAgB;IACbU,sBAAsB,EAAEA,sBAAuB;IAC/CF,mBAAmB,EAAEA,mBAAoB;IACzCC,gBAAgB,EAAEA,gBAAiB;IACnCF,YAAY,EAAEA,YAAa;IAC3BM,qBAAqB,EAAEA,qBAAsB;IAC7CD,4BAA4B,EAAEA;EAA6B,CAC9D,CACJ,EACD,CACIH,gBAAgB,EAChBD,mBAAmB,EACnBD,YAAY,EACZM,qBAAqB,EACrBH,sBAAsB,EACtBE,4BAA4B,CAEpC,CAAC;EAED,oBACIhB,KAAA,CAAAoB,aAAA,CAACf,wBAAwB,QACpBU,iBAAiB,gBACdf,KAAA,CAAAoB,aAAA,CAACrB,KAAK;IAACoB,OAAO,EAAEA;EAAQ,gBACpBnB,KAAA,CAAAoB,aAAA,CAACd,4BAA4B,qBACzBN,KAAA,CAAAoB,aAAA,CAACb,iCAAiC;IAACc,MAAM,EAAEH;EAAc,CAAE,CAAC,eAC5DlB,KAAA,CAAAoB,aAAA,CAACZ,gCAAgC,QAC5BU,aAC6B,CACR,CAC3B,CAAC,GAERC,OAEkB,CAAC;AAEnC,CAAC;AAEDV,kBAAkB,CAACa,WAAW,GAAG,oBAAoB;AAErD,eAAeb,kBAAkB","ignoreList":[]}

package/lib/components/color-picker/color-picker-wrapper/ColorPickerWrapper.styles.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import type { WithTheme } from '@chayns-components/core';
+export declare const StyledColorPickerWrapper: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
+export declare const StyledColorPickerWrapperInfo: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
+type StyledColorPickerWrapperInfoColorProps = WithTheme<{
+    $color?: string;
+}>;
+export declare const StyledColorPickerWrapperInfoColor: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}>, StyledColorPickerWrapperInfoColorProps>, never>>;
+export declare const StyledColorPickerWrapperInfoText: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    theme: import("@chayns-components/core/lib/components/color-scheme-provider/ColorSchemeProvider").Theme;
+}>>;
+export {};

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

@@ -0,0 +1,33 @@
+import styled from 'styled-components';
+export const StyledColorPickerWrapper = styled.div``;
+export const StyledColorPickerWrapperInfo = styled.div`
+    display: flex;
+    align-items: center;
+    gap: 8px;
+`;
+export const StyledColorPickerWrapperInfoColor = styled.div.attrs(_ref => {
+  let {
+    $color
+  } = _ref;
+  return {
+    style: {
+      backgroundColor: $color
+    }
+  };
+})`
+    width: 15px;
+    aspect-ratio: 1;
+    border-radius: 50px;
+`;
+export const StyledColorPickerWrapperInfoText = styled.div`
+    border-bottom-style: dashed;
+    border-bottom-width: 1px;
+
+    color: ${_ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.text;
+}};
+`;
+//# sourceMappingURL=ColorPickerWrapper.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPickerWrapper.styles.js","names":["styled","StyledColorPickerWrapper","div","StyledColorPickerWrapperInfo","StyledColorPickerWrapperInfoColor","attrs","_ref","$color","style","backgroundColor","StyledColorPickerWrapperInfoText","_ref2","theme","text"],"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<{ $color?: string }>;\n\nexport const StyledColorPickerWrapperInfoColor = styled.div.attrs<StyledColorPickerWrapperInfoColorProps>(\n    ({ $color }) => ({\n        style: {\n            backgroundColor: $color,\n        },\n    }),\n)`\n    width: 15px;\n    aspect-ratio: 1;\n    border-radius: 50px;\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,OAAOA,MAAM,MAAM,mBAAmB;AAEtC,OAAO,MAAMC,wBAAwB,GAAGD,MAAM,CAACE,GAAI,EAAC;AAEpD,OAAO,MAAMC,4BAA4B,GAAGH,MAAM,CAACE,GAAI;AACvD;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAME,iCAAiC,GAAGJ,MAAM,CAACE,GAAG,CAACG,KAAK,CAC7DC,IAAA;EAAA,IAAC;IAAEC;EAAO,CAAC,GAAAD,IAAA;EAAA,OAAM;IACbE,KAAK,EAAE;MACHC,eAAe,EAAEF;IACrB;EACJ,CAAC;AAAA,CACL,CAAE;AACF;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAMG,gCAAgC,GAAGV,MAAM,CAACE,GAA2C;AAClG;AACA;AACA;AACA,aAAaS,KAAA;EAAA,IAAC;IAAEC;EAA6C,CAAC,GAAAD,KAAA;EAAA,OAAKC,KAAK,CAACC,IAAI;AAAA,CAAC;AAC9E,CAAC","ignoreList":[]}

package/lib/components/color-picker/color-picker-wrapper/color-picker-popup/ColorPickerPopup.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import type { IPresetColor } from '../../../../types';
+interface ColorPickerPopupProps {
+    presetColors?: IPresetColor[];
+    shouldShowPresetColors: boolean;
+    onPresetColorAdd?: (presetColor: IPresetColor) => void;
+    onPresetColorRemove?: (presetColorId: IPresetColor['id']) => void;
+    shouldShowTransparencySlider: boolean;
+    shouldShowMoreOptions: boolean;
+}
+declare const ColorPickerPopup: {
+    ({ presetColors, onPresetColorRemove, onPresetColorAdd, shouldShowPresetColors, shouldShowTransparencySlider, shouldShowMoreOptions, }: ColorPickerPopupProps): React.JSX.Element;
+    displayName: string;
+};
+export default ColorPickerPopup;

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

@@ -0,0 +1,26 @@
+import React from 'react';
+import ColorArea from './color-area/ColorArea';
+import { StyledColorPickerPopup } from './ColorPickerPopup.styles';
+import MoreOptions from './more-options/MoreOptions';
+import PresetColors from './preset-colors/PresetColors';
+import Sliders from './sliders/Sliders';
+const ColorPickerPopup = _ref => {
+  let {
+    presetColors,
+    onPresetColorRemove,
+    onPresetColorAdd,
+    shouldShowPresetColors,
+    shouldShowTransparencySlider,
+    shouldShowMoreOptions
+  } = _ref;
+  return /*#__PURE__*/React.createElement(StyledColorPickerPopup, null, /*#__PURE__*/React.createElement(ColorArea, null), /*#__PURE__*/React.createElement(Sliders, {
+    shouldShowTransparencySlider: shouldShowTransparencySlider
+  }), shouldShowPresetColors && /*#__PURE__*/React.createElement(PresetColors, {
+    presetColors: presetColors,
+    onPresetColorAdd: onPresetColorAdd,
+    onPresetColorRemove: onPresetColorRemove
+  }), shouldShowMoreOptions && /*#__PURE__*/React.createElement(MoreOptions, null));
+};
+ColorPickerPopup.displayName = 'ColorPickerPopup';
+export default ColorPickerPopup;
+//# sourceMappingURL=ColorPickerPopup.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPickerPopup.js","names":["React","ColorArea","StyledColorPickerPopup","MoreOptions","PresetColors","Sliders","ColorPickerPopup","_ref","presetColors","onPresetColorRemove","onPresetColorAdd","shouldShowPresetColors","shouldShowTransparencySlider","shouldShowMoreOptions","createElement","displayName"],"sources":["../../../../../src/components/color-picker/color-picker-wrapper/color-picker-popup/ColorPickerPopup.tsx"],"sourcesContent":["import React from 'react';\nimport type { IPresetColor } from '../../../../types';\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}\n\nconst ColorPickerPopup = ({\n    presetColors,\n    onPresetColorRemove,\n    onPresetColorAdd,\n    shouldShowPresetColors,\n    shouldShowTransparencySlider,\n    shouldShowMoreOptions,\n}: ColorPickerPopupProps) => (\n    <StyledColorPickerPopup>\n        <ColorArea />\n        <Sliders shouldShowTransparencySlider={shouldShowTransparencySlider} />\n        {shouldShowPresetColors && (\n            <PresetColors\n                presetColors={presetColors}\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,OAAOA,KAAK,MAAM,OAAO;AAEzB,OAAOC,SAAS,MAAM,wBAAwB;AAC9C,SAASC,sBAAsB,QAAQ,2BAA2B;AAClE,OAAOC,WAAW,MAAM,4BAA4B;AACpD,OAAOC,YAAY,MAAM,8BAA8B;AACvD,OAAOC,OAAO,MAAM,mBAAmB;AAWvC,MAAMC,gBAAgB,GAAGC,IAAA;EAAA,IAAC;IACtBC,YAAY;IACZC,mBAAmB;IACnBC,gBAAgB;IAChBC,sBAAsB;IACtBC,4BAA4B;IAC5BC;EACmB,CAAC,GAAAN,IAAA;EAAA,oBACpBP,KAAA,CAAAc,aAAA,CAACZ,sBAAsB,qBACnBF,KAAA,CAAAc,aAAA,CAACb,SAAS,MAAE,CAAC,eACbD,KAAA,CAAAc,aAAA,CAACT,OAAO;IAACO,4BAA4B,EAAEA;EAA6B,CAAE,CAAC,EACtED,sBAAsB,iBACnBX,KAAA,CAAAc,aAAA,CAACV,YAAY;IACTI,YAAY,EAAEA,YAAa;IAC3BE,gBAAgB,EAAEA,gBAAiB;IACnCD,mBAAmB,EAAEA;EAAoB,CAC5C,CACJ,EACAI,qBAAqB,iBAAIb,KAAA,CAAAc,aAAA,CAACX,WAAW,MAAE,CACpB,CAAC;AAAA,CAC5B;AAEDG,gBAAgB,CAACS,WAAW,GAAG,kBAAkB;AAEjD,eAAeT,gBAAgB","ignoreList":[]}

package/lib/components/color-picker/color-picker-wrapper/color-picker-popup/ColorPickerPopup.styles.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const StyledColorPickerPopup: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;

package/lib/components/color-picker/color-picker-wrapper/color-picker-popup/ColorPickerPopup.styles.js

@@ -0,0 +1,6 @@
+import styled from 'styled-components';
+export const StyledColorPickerPopup = styled.div`
+    width: 320px;
+    padding: 11px;
+`;
+//# sourceMappingURL=ColorPickerPopup.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPickerPopup.styles.js","names":["styled","StyledColorPickerPopup","div"],"sources":["../../../../../src/components/color-picker/color-picker-wrapper/color-picker-popup/ColorPickerPopup.styles.ts"],"sourcesContent":["import styled from 'styled-components';\n\nexport const StyledColorPickerPopup = styled.div`\n    width: 320px;\n    padding: 11px;\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AAEtC,OAAO,MAAMC,sBAAsB,GAAGD,MAAM,CAACE,GAAI;AACjD;AACA;AACA,CAAC","ignoreList":[]}

package/lib/components/color-picker/color-picker-wrapper/color-picker-popup/color-area/ColorArea.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+declare const ColorArea: {
+    (): React.JSX.Element;
+    displayName: string;
+};
+export default ColorArea;

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

@@ -0,0 +1,215 @@
+import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { StyledColorArea, StyledColorAreaCanvas, StyledColorAreaPseudo, StyledMotionColorAreaPointer } from './ColorArea.styles';
+import { hsvToHex } from '@chayns/colors';
+import { useDragControls, useMotionValue } from 'framer-motion';
+import { extractRgbValues, getColorFromCoordinates, getCoordinatesFromColor, rgbToHsv } from '../../../../../utils/color';
+import { ColorPickerContext } from '../../../../ColorPickerProvider';
+const ColorArea = () => {
+  const {
+    selectedColor,
+    updateSelectedColor,
+    updateIsPresetColor,
+    isPresetColor,
+    shouldGetCoordinates,
+    updateShouldGetCoordinates,
+    updateShouldCallOnSelect,
+    hueColor
+  } = useContext(ColorPickerContext);
+  const [opacity, setOpacity] = useState(1);
+  const [scale, setScale] = useState({
+    scaleX: 0,
+    scaleY: 0
+  });
+  const isPresetColorRef = useRef(false);
+  const shouldGetCoordinatesRef = useRef(false);
+  const canDrag = useRef(false);
+  const canvasRef = useRef(null);
+  const pseudoRef = useRef(null);
+  const dragControls = useDragControls();
+  const x = useMotionValue(0);
+  const y = useMotionValue(0);
+  useEffect(() => {
+    isPresetColorRef.current = isPresetColor ?? false;
+  }, [isPresetColor]);
+  useEffect(() => {
+    shouldGetCoordinatesRef.current = shouldGetCoordinates ?? true;
+  }, [shouldGetCoordinates]);
+  useEffect(() => {
+    if (selectedColor) {
+      const {
+        a
+      } = extractRgbValues(selectedColor);
+      setOpacity(a);
+    }
+  }, [selectedColor]);
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) {
+      return;
+    }
+    const rect = canvas.getBoundingClientRect();
+    const scaleX = canvas.width / rect.width;
+    const scaleY = canvas.height / rect.height;
+    setScale({
+      scaleX,
+      scaleY
+    });
+  }, []);
+  const setColor = useCallback(() => {
+    const xCord = x.get();
+    const yCord = y.get();
+    if (typeof updateSelectedColor === 'function') {
+      const color = getColorFromCoordinates({
+        coordinates: {
+          x: xCord,
+          y: yCord
+        },
+        canvas: canvasRef,
+        opacity,
+        scale
+      });
+      if (color === 'transparent') {
+        return;
+      }
+      updateSelectedColor(color);
+    }
+  }, [opacity, scale, updateSelectedColor, x, y]);
+  useEffect(() => {
+    const ctx = canvasRef.current?.getContext('2d');
+    if (!ctx) {
+      return;
+    }
+    const hsv = rgbToHsv(hueColor);
+    const hex = hsvToHex({
+      h: hsv?.h ?? 1,
+      s: 1,
+      v: 1
+    });
+    const colorGradiant = ctx.createLinearGradient(0, 0, 300, 0);
+    colorGradiant.addColorStop(0, '#fff');
+    colorGradiant.addColorStop(1, hex ?? 'red');
+    ctx.fillStyle = colorGradiant;
+    ctx.fillRect(0, 0, 300, 150);
+    const transparentGradiant = ctx.createLinearGradient(0, 0, 0, 150);
+    transparentGradiant.addColorStop(0, 'transparent');
+    transparentGradiant.addColorStop(1, '#000');
+    ctx.fillStyle = transparentGradiant;
+    ctx.fillRect(0, 0, 300, 150);
+    if (isPresetColorRef.current) {
+      if (typeof updateIsPresetColor === 'function') {
+        updateIsPresetColor(false);
+      }
+      return;
+    }
+    setColor();
+  }, [hueColor, setColor, updateIsPresetColor]);
+  const handleStartDrag = useCallback(() => {
+    if (typeof updateShouldGetCoordinates === 'function') {
+      updateShouldGetCoordinates(false);
+    }
+    canDrag.current = true;
+  }, [updateShouldGetCoordinates]);
+  useEffect(() => {
+    if (selectedColor && shouldGetCoordinatesRef.current) {
+      const cords = getCoordinatesFromColor({
+        color: selectedColor,
+        canvas: canvasRef,
+        tolerance: 10
+      });
+      if (cords) {
+        x.set(cords.x);
+        y.set(cords.y);
+      }
+    }
+  }, [selectedColor, x, y]);
+  const handleDrag = useCallback(() => {
+    setColor();
+  }, [setColor]);
+  const handleClick = useCallback(event => {
+    if (typeof updateShouldGetCoordinates === 'function') {
+      updateShouldGetCoordinates(false);
+    }
+    const {
+      left,
+      top
+    } = event.target.getBoundingClientRect();
+    x.set(event.clientX - left - 10);
+    y.set(event.clientY - top - 10);
+    setColor();
+  }, [setColor, updateShouldGetCoordinates, x, y]);
+  const handlePointerUp = useCallback(() => {
+    canDrag.current = false;
+    if (typeof updateShouldGetCoordinates === 'function') {
+      updateShouldGetCoordinates(true);
+    }
+    if (typeof updateShouldCallOnSelect === 'function') {
+      updateShouldCallOnSelect(true);
+    }
+  }, [updateShouldCallOnSelect, updateShouldGetCoordinates]);
+  const handleMouseMove = useCallback(event => {
+    if (canDrag.current && pseudoRef.current) {
+      const {
+        left,
+        top
+      } = pseudoRef.current.getBoundingClientRect();
+      let xCords = event.clientX - left - 10;
+      let yCords = event.clientY - top - 10;
+      switch (true) {
+        case xCords > 300:
+          xCords = 300;
+          break;
+        case xCords < 0:
+          xCords = 0;
+          break;
+        default:
+          break;
+      }
+      switch (true) {
+        case yCords > 150:
+          yCords = 150;
+          break;
+        case yCords < 0:
+          yCords = 0;
+          break;
+        default:
+          break;
+      }
+      x.set(xCords);
+      y.set(yCords);
+      setColor();
+    }
+  }, [setColor, x, y]);
+  useEffect(() => {
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    window.addEventListener('mousemove', handleMouseMove);
+    window.addEventListener('pointerup', handlePointerUp);
+    return () => {
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      window.removeEventListener('mousemove', handleMouseMove);
+      window.removeEventListener('pointerup', handlePointerUp);
+    };
+  }, [handleMouseMove, handlePointerUp]);
+  return useMemo(() => /*#__PURE__*/React.createElement(StyledColorArea, null, /*#__PURE__*/React.createElement(StyledColorAreaCanvas, {
+    ref: canvasRef
+  }), /*#__PURE__*/React.createElement(StyledColorAreaPseudo, {
+    ref: pseudoRef,
+    onPointerDown: handleStartDrag,
+    onClick: handleClick
+  }, /*#__PURE__*/React.createElement(StyledMotionColorAreaPointer, {
+    drag: true,
+    dragConstraints: pseudoRef,
+    style: {
+      x,
+      y
+    },
+    dragElastic: false,
+    dragMomentum: false,
+    dragControls: dragControls,
+    onDrag: handleDrag
+  }))), [dragControls, handleClick, handleDrag, handleStartDrag, x, y]);
+};
+ColorArea.displayName = 'ColorArea';
+export default ColorArea;
+//# sourceMappingURL=ColorArea.js.map