@chayns-components/color-picker 5.0.0-beta.999 → 5.0.1

package/lib/esm/utils/color.js

@@ -1,11 +1,10 @@
 import { hexToHsl, rgb255ToHsl, rgb255ToHsv } from '@chayns/colors';
-export const getColorFromCoordinates = _ref => {
-  let {
-    coordinates,
-    canvas,
-    opacity,
-    scale
-  } = _ref;
+export const getColorFromCoordinates = ({
+  coordinates,
+  canvas,
+  opacity,
+  scale
+}) => {
   if (!canvas.current) {
     return undefined;
   }
@@ -27,12 +26,11 @@ export const getColorFromCoordinates = _ref => {
   }
   return `rgba(${pixels[0] ?? 0}, ${pixels[1] ?? 0}, ${pixels[2] ?? 0}, ${opacity})`;
 };
-export const getCoordinatesFromColor = _ref2 => {
-  let {
-    canvas,
-    color,
-    tolerance = 0
-  } = _ref2;
+export const getCoordinatesFromColor = ({
+  canvas,
+  color,
+  tolerance = 0
+}) => {
   const ctx = canvas.current?.getContext('2d', {
     willReadFrequently: true
   });
@@ -196,7 +194,7 @@ export const hexToRgb = hex => {
     r = parseInt(result[1] ?? '0', 16);
     g = parseInt(result[2] ?? '0', 16);
     b = parseInt(result[3] ?? '0', 16);
-    a = result[4] ? parseInt(result[4], 16) / 100 : 1;
+    a = result[4] ? Math.round(parseInt(result[4], 16) / 255 * 1000) / 1000 : 1;
     return {
       r,
       g,
@@ -211,19 +209,18 @@ export const hexToRgb = hex => {
     a: 1
   };
 };
-export const rgbToHex = _ref3 => {
-  let {
-    r,
-    g,
-    b,
-    a = 1
-  } = _ref3;
+export const rgbToHex = ({
+  r,
+  g,
+  b,
+  a = 1
+}) => {
   const clamp = value => Math.max(0, Math.min(255, Math.round(value)));
   const alpha = Math.max(0, Math.min(1, a));
   const hex = x => {
     const hexValue = clamp(x).toString(16);
     return hexValue.length === 1 ? `0${hexValue}` : hexValue;
   };
-  return `#${hex(r)}${hex(g)}${hex(b)}${alpha <= 1 ? hex(alpha * 100) : ''}`;
+  return `#${hex(r)}${hex(g)}${hex(b)}${alpha <= 1 ? hex(alpha * 255) : ''}`;
 };
 //# sourceMappingURL=color.js.map

package/lib/esm/utils/color.js.map

@@ -1 +1 @@
-{"version":3,"file":"color.js","names":["hexToHsl","rgb255ToHsl","rgb255ToHsv","getColorFromCoordinates","_ref","coordinates","canvas","opacity","scale","current","undefined","xCords","x","yCords","y","scaleX","scaleY","ctx","getContext","willReadFrequently","pixels","getImageData","data","getCoordinatesFromColor","_ref2","color","tolerance","height","width","imageData","rgb","splitRgb","r","targetR","g","targetG","b","targetB","index","Math","abs","isValidRGBA","rgbaString","rgbaRegex","test","matches","match","red","parseInt","green","blue","alpha","parseFloat","isValidRGB","rgbString","rgbRegex","convertColorToHsl","hexRegex","hslRegex","rgba","hsl","newColor","replaceAll","floor","h","Number","rgbToHsv","extractRgbValues","extractHsl","s","l","a","hexToRgb","hex","result","exec","rgbToHex","_ref3","clamp","value","max","min","round","hexValue","toString","length"],"sources":["../../../src/utils/color.ts"],"sourcesContent":["import type { CSSProperties, RefObject } from 'react';\n\nimport { hexToHsl, rgb255ToHsl, rgb255ToHsv } from '@chayns/colors';\nimport type { HSL, HSLA } from '@chayns/colors/lib/types/hsl';\nimport type { Coordinates, RGBA, Scale } from '../types/colorPicker';\n\ninterface GetColorFromCoordinatesOptions {\n    coordinates: Coordinates;\n    canvas: RefObject<HTMLCanvasElement>;\n    opacity: number;\n    scale: Scale;\n}\n\nexport const getColorFromCoordinates = ({\n    coordinates,\n    canvas,\n    opacity,\n    scale,\n}: GetColorFromCoordinatesOptions) => {\n    if (!canvas.current) {\n        return undefined;\n    }\n\n    const xCords = coordinates.x;\n    const yCords = coordinates.y;\n\n    const x = (xCords - 0.5) * scale.scaleX;\n    const y = (yCords - 0.5) * scale.scaleY;\n\n    const ctx = canvas.current?.getContext('2d', { willReadFrequently: true });\n    const pixels = ctx?.getImageData(x, y, 1, 1).data;\n\n    if (!pixels) {\n        return undefined;\n    }\n\n    // If transparency\n    if (pixels[0] === 0 && pixels[1] === 0 && pixels[2] === 0 && pixels[3] === 0) {\n        return 'transparent';\n    }\n\n    return `rgba(${pixels[0] ?? 0}, ${pixels[1] ?? 0}, ${pixels[2] ?? 0}, ${opacity})`;\n};\n\ninterface GetCoordinatesFromColorOptions {\n    color: CSSProperties['color'];\n    canvas: RefObject<HTMLCanvasElement>;\n    tolerance?: number;\n}\n\nexport const getCoordinatesFromColor = ({\n    canvas,\n    color,\n    tolerance = 0,\n}: GetCoordinatesFromColorOptions) => {\n    const ctx = canvas.current?.getContext('2d', { willReadFrequently: true });\n\n    if (!ctx) {\n        return null;\n    }\n\n    const height = canvas.current?.height ?? 150;\n    const width = canvas.current?.width ?? 300;\n\n    const imageData = ctx.getImageData(0, 0, width, height);\n    const pixels = imageData.data;\n\n    const rgb = splitRgb(color);\n\n    if (!rgb) {\n        return null;\n    }\n\n    const { r: targetR, g: targetG, b: targetB } = rgb;\n\n    for (let y = 0; y < height; y++) {\n        for (let x = 0; x < width; x++) {\n            const index = (y * width + x) * 4;\n            const r = pixels[index] ?? 0;\n            const g = pixels[index + 1] ?? 0;\n            const b = pixels[index + 2] ?? 0;\n\n            if (\n                Math.abs(targetR - r) <= tolerance &&\n                Math.abs(targetG - g) <= tolerance &&\n                Math.abs(targetB - b) <= tolerance\n            ) {\n                return { x, y };\n            }\n        }\n    }\n\n    return null;\n};\n\nexport const isValidRGBA = (rgbaString: string): boolean => {\n    if (rgbaString === '') {\n        return false;\n    }\n\n    const rgbaRegex = /^rgba\\(\\s*(\\d{1,3}),\\s*(\\d{1,3}),\\s*(\\d{1,3}),\\s*((0?\\.\\d+)|(1|0))\\s*\\)$/;\n    if (!rgbaRegex.test(rgbaString)) {\n        return false;\n    }\n\n    const matches = rgbaString.match(rgbaRegex);\n    if (!matches) {\n        return false;\n    }\n\n    const red = parseInt(matches[1] ?? '', 10);\n    const green = parseInt(matches[2] ?? '', 10);\n    const blue = parseInt(matches[3] ?? '', 10);\n    const alpha = parseFloat(matches[4] ?? '');\n\n    return !(\n        red < 0 ||\n        red > 255 ||\n        green < 0 ||\n        green > 255 ||\n        blue < 0 ||\n        blue > 255 ||\n        alpha < 0 ||\n        alpha > 1\n    );\n};\n\nexport const isValidRGB = (rgbString: string): boolean => {\n    if (rgbString === '') {\n        return false;\n    }\n\n    const rgbRegex = /^rgb\\(\\s*(\\d{1,3}),\\s*(\\d{1,3}),\\s*(\\d{1,3})\\s*\\)$/;\n    if (!rgbRegex.test(rgbString)) {\n        return false;\n    }\n\n    const matches = rgbString.match(rgbRegex);\n    if (!matches) {\n        return false;\n    }\n\n    const red = parseInt(matches[1] ?? '', 10);\n    const green = parseInt(matches[2] ?? '', 10);\n    const blue = parseInt(matches[3] ?? '', 10);\n\n    return red >= 0 && red <= 255 && green >= 0 && green <= 255 && blue >= 0 && blue <= 255;\n};\n\nexport const convertColorToHsl = (color: string) => {\n    const hexRegex = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/;\n    const rgbRegex =\n        /^rgb(a)?\\(\\s*((25[0-5]|2[0-4]\\d|1\\d{2}|\\d{1,2})\\s*,\\s*){2}(25[0-5]|2[0-4]\\d|1\\d{2}|\\d{1,2})\\s*(,\\s*\\d+(\\.\\d+)?)?\\)$/i;\n    const hslRegex =\n        /^hsla?\\(\\s*((360|3[0-5]\\d|[12]\\d{2}|[1-9]\\d|\\d)\\s*,\\s*){2}(360|3[0-5]\\d|[12]\\d{2}|[1-9]\\d|\\d)\\s*(,\\s*\\d+(\\.\\d+)?)?\\)$/i;\n\n    let rgba: string[] | null;\n    let hsl: HSL | HSLA | null;\n\n    const newColor = color.replaceAll('%', '');\n\n    switch (true) {\n        case hexRegex.test(newColor):\n            hsl = hexToHsl(color);\n\n            if (!hsl) {\n                return undefined;\n            }\n\n            return `hsl(${Math.floor(hsl.h)},100%,100%)`;\n        case rgbRegex.test(newColor):\n            rgba = color.match(/[\\d.]+/g);\n\n            if (!rgba) {\n                return undefined;\n            }\n\n            hsl = rgb255ToHsl({\n                r: Number(rgba[0]),\n                g: Number(rgba[1]),\n                b: Number(rgba[2]),\n            });\n\n            if (!hsl) {\n                return undefined;\n            }\n\n            return `hsl(${Math.floor(hsl.h)},100%,100%)`;\n        case hslRegex.test(newColor):\n            return color;\n        default:\n            return undefined;\n    }\n};\n\nexport const rgbToHsv = (color: CSSProperties['color']) =>\n    rgb255ToHsv(extractRgbValues(color ?? ''));\n\nexport const extractHsl = (hsl: string) => {\n    const match = hsl.match(\n        /hsl\\(\\s*(\\d+(?:\\.\\d+)?)\\s*,\\s*(\\d+(?:\\.\\d+)?)%\\s*,\\s*(\\d+(?:\\.\\d+)?)%\\s*\\)/i,\n    );\n\n    if (!match) {\n        return null;\n    }\n\n    const h = parseFloat(match[1] ?? '');\n    const s = parseFloat(match[2] ?? '') / 100;\n    const l = parseFloat(match[3] ?? '') / 100;\n\n    return { h, s, l };\n};\n\nexport const splitRgb = (color: CSSProperties['color']): null | RGBA => {\n    const rgba = color?.match(/[\\d.]+/g);\n\n    if (!rgba) {\n        return null;\n    }\n\n    return { r: Number(rgba[0]), g: Number(rgba[1]), b: Number(rgba[2]), a: Number(rgba[3]) };\n};\n\nexport const extractRgbValues = (rgbString: string): RGBA => {\n    const rgbaRegex = /rgba\\(\\s*(\\d+)\\s*,\\s*(\\d+)\\s*,\\s*(\\d+)\\s*,\\s*([\\d.]+)\\s*\\)/;\n    const match = rgbString.match(rgbaRegex);\n\n    if (match) {\n        const r = parseInt(match[1] ?? '', 10);\n        const g = parseInt(match[2] ?? '', 10);\n        const b = parseInt(match[3] ?? '', 10);\n        const a = parseFloat(match[4] ?? '');\n\n        return { r, g, b, a };\n    }\n\n    return {\n        r: 255,\n        g: 255,\n        b: 255,\n        a: 1,\n    };\n};\n\nexport const hexToRgb = (hex: string): RGBA => {\n    let r: number;\n    let g: number;\n    let b: number;\n    let a: number;\n\n    const result = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})?$/i.exec(hex);\n\n    if (result) {\n        r = parseInt(result[1] ?? '0', 16);\n        g = parseInt(result[2] ?? '0', 16);\n        b = parseInt(result[3] ?? '0', 16);\n        a = result[4] ? parseInt(result[4], 16) / 100 : 1;\n\n        return { r, g, b, a };\n    }\n\n    return {\n        r: 255,\n        g: 255,\n        b: 255,\n        a: 1,\n    };\n};\n\nexport const rgbToHex = ({ r, g, b, a = 1 }: RGBA): string => {\n    const clamp = (value: number) => Math.max(0, Math.min(255, Math.round(value)));\n    const alpha = Math.max(0, Math.min(1, a));\n    const hex = (x: number) => {\n        const hexValue = clamp(x).toString(16);\n        return hexValue.length === 1 ? `0${hexValue}` : hexValue;\n    };\n    return `#${hex(r)}${hex(g)}${hex(b)}${alpha <= 1 ? hex(alpha * 100) : ''}`;\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"color.js","names":["hexToHsl","rgb255ToHsl","rgb255ToHsv","getColorFromCoordinates","coordinates","canvas","opacity","scale","current","undefined","xCords","x","yCords","y","scaleX","scaleY","ctx","getContext","willReadFrequently","pixels","getImageData","data","getCoordinatesFromColor","color","tolerance","height","width","imageData","rgb","splitRgb","r","targetR","g","targetG","b","targetB","index","Math","abs","isValidRGBA","rgbaString","rgbaRegex","test","matches","match","red","parseInt","green","blue","alpha","parseFloat","isValidRGB","rgbString","rgbRegex","convertColorToHsl","hexRegex","hslRegex","rgba","hsl","newColor","replaceAll","floor","h","Number","rgbToHsv","extractRgbValues","extractHsl","s","l","a","hexToRgb","hex","result","exec","round","rgbToHex","clamp","value","max","min","hexValue","toString","length"],"sources":["../../../src/utils/color.ts"],"sourcesContent":["import type { CSSProperties, RefObject } from 'react';\n\nimport { hexToHsl, rgb255ToHsl, rgb255ToHsv } from '@chayns/colors';\nimport type { HSL, HSLA } from '@chayns/colors/lib/types/hsl';\nimport type { Coordinates, RGBA, Scale } from '../types/colorPicker';\n\ninterface GetColorFromCoordinatesOptions {\n    coordinates: Coordinates;\n    canvas: RefObject<HTMLCanvasElement>;\n    opacity: number;\n    scale: Scale;\n}\n\nexport const getColorFromCoordinates = ({\n    coordinates,\n    canvas,\n    opacity,\n    scale,\n}: GetColorFromCoordinatesOptions) => {\n    if (!canvas.current) {\n        return undefined;\n    }\n\n    const xCords = coordinates.x;\n    const yCords = coordinates.y;\n\n    const x = (xCords - 0.5) * scale.scaleX;\n    const y = (yCords - 0.5) * scale.scaleY;\n\n    const ctx = canvas.current?.getContext('2d', { willReadFrequently: true });\n    const pixels = ctx?.getImageData(x, y, 1, 1).data;\n\n    if (!pixels) {\n        return undefined;\n    }\n\n    // If transparency\n    if (pixels[0] === 0 && pixels[1] === 0 && pixels[2] === 0 && pixels[3] === 0) {\n        return 'transparent';\n    }\n\n    return `rgba(${pixels[0] ?? 0}, ${pixels[1] ?? 0}, ${pixels[2] ?? 0}, ${opacity})`;\n};\n\ninterface GetCoordinatesFromColorOptions {\n    color: CSSProperties['color'];\n    canvas: RefObject<HTMLCanvasElement>;\n    tolerance?: number;\n}\n\nexport const getCoordinatesFromColor = ({\n    canvas,\n    color,\n    tolerance = 0,\n}: GetCoordinatesFromColorOptions) => {\n    const ctx = canvas.current?.getContext('2d', { willReadFrequently: true });\n\n    if (!ctx) {\n        return null;\n    }\n\n    const height = canvas.current?.height ?? 150;\n    const width = canvas.current?.width ?? 300;\n\n    const imageData = ctx.getImageData(0, 0, width, height);\n    const pixels = imageData.data;\n\n    const rgb = splitRgb(color);\n\n    if (!rgb) {\n        return null;\n    }\n\n    const { r: targetR, g: targetG, b: targetB } = rgb;\n\n    for (let y = 0; y < height; y++) {\n        for (let x = 0; x < width; x++) {\n            const index = (y * width + x) * 4;\n            const r = pixels[index] ?? 0;\n            const g = pixels[index + 1] ?? 0;\n            const b = pixels[index + 2] ?? 0;\n\n            if (\n                Math.abs(targetR - r) <= tolerance &&\n                Math.abs(targetG - g) <= tolerance &&\n                Math.abs(targetB - b) <= tolerance\n            ) {\n                return { x, y };\n            }\n        }\n    }\n\n    return null;\n};\n\nexport const isValidRGBA = (rgbaString: string): boolean => {\n    if (rgbaString === '') {\n        return false;\n    }\n\n    const rgbaRegex = /^rgba\\(\\s*(\\d{1,3}),\\s*(\\d{1,3}),\\s*(\\d{1,3}),\\s*((0?\\.\\d+)|(1|0))\\s*\\)$/;\n    if (!rgbaRegex.test(rgbaString)) {\n        return false;\n    }\n\n    const matches = rgbaString.match(rgbaRegex);\n    if (!matches) {\n        return false;\n    }\n\n    const red = parseInt(matches[1] ?? '', 10);\n    const green = parseInt(matches[2] ?? '', 10);\n    const blue = parseInt(matches[3] ?? '', 10);\n    const alpha = parseFloat(matches[4] ?? '');\n\n    return !(\n        red < 0 ||\n        red > 255 ||\n        green < 0 ||\n        green > 255 ||\n        blue < 0 ||\n        blue > 255 ||\n        alpha < 0 ||\n        alpha > 1\n    );\n};\n\nexport const isValidRGB = (rgbString: string): boolean => {\n    if (rgbString === '') {\n        return false;\n    }\n\n    const rgbRegex = /^rgb\\(\\s*(\\d{1,3}),\\s*(\\d{1,3}),\\s*(\\d{1,3})\\s*\\)$/;\n    if (!rgbRegex.test(rgbString)) {\n        return false;\n    }\n\n    const matches = rgbString.match(rgbRegex);\n    if (!matches) {\n        return false;\n    }\n\n    const red = parseInt(matches[1] ?? '', 10);\n    const green = parseInt(matches[2] ?? '', 10);\n    const blue = parseInt(matches[3] ?? '', 10);\n\n    return red >= 0 && red <= 255 && green >= 0 && green <= 255 && blue >= 0 && blue <= 255;\n};\n\nexport const convertColorToHsl = (color: string) => {\n    const hexRegex = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/;\n    const rgbRegex =\n        /^rgb(a)?\\(\\s*((25[0-5]|2[0-4]\\d|1\\d{2}|\\d{1,2})\\s*,\\s*){2}(25[0-5]|2[0-4]\\d|1\\d{2}|\\d{1,2})\\s*(,\\s*\\d+(\\.\\d+)?)?\\)$/i;\n    const hslRegex =\n        /^hsla?\\(\\s*((360|3[0-5]\\d|[12]\\d{2}|[1-9]\\d|\\d)\\s*,\\s*){2}(360|3[0-5]\\d|[12]\\d{2}|[1-9]\\d|\\d)\\s*(,\\s*\\d+(\\.\\d+)?)?\\)$/i;\n\n    let rgba: string[] | null;\n    let hsl: HSL | HSLA | null;\n\n    const newColor = color.replaceAll('%', '');\n\n    switch (true) {\n        case hexRegex.test(newColor):\n            hsl = hexToHsl(color);\n\n            if (!hsl) {\n                return undefined;\n            }\n\n            return `hsl(${Math.floor(hsl.h)},100%,100%)`;\n        case rgbRegex.test(newColor):\n            rgba = color.match(/[\\d.]+/g);\n\n            if (!rgba) {\n                return undefined;\n            }\n\n            hsl = rgb255ToHsl({\n                r: Number(rgba[0]),\n                g: Number(rgba[1]),\n                b: Number(rgba[2]),\n            });\n\n            if (!hsl) {\n                return undefined;\n            }\n\n            return `hsl(${Math.floor(hsl.h)},100%,100%)`;\n        case hslRegex.test(newColor):\n            return color;\n        default:\n            return undefined;\n    }\n};\n\nexport const rgbToHsv = (color: CSSProperties['color']) =>\n    rgb255ToHsv(extractRgbValues(color ?? ''));\n\nexport const extractHsl = (hsl: string) => {\n    const match = hsl.match(\n        /hsl\\(\\s*(\\d+(?:\\.\\d+)?)\\s*,\\s*(\\d+(?:\\.\\d+)?)%\\s*,\\s*(\\d+(?:\\.\\d+)?)%\\s*\\)/i,\n    );\n\n    if (!match) {\n        return null;\n    }\n\n    const h = parseFloat(match[1] ?? '');\n    const s = parseFloat(match[2] ?? '') / 100;\n    const l = parseFloat(match[3] ?? '') / 100;\n\n    return { h, s, l };\n};\n\nexport const splitRgb = (color: CSSProperties['color']): null | RGBA => {\n    const rgba = color?.match(/[\\d.]+/g);\n\n    if (!rgba) {\n        return null;\n    }\n\n    return { r: Number(rgba[0]), g: Number(rgba[1]), b: Number(rgba[2]), a: Number(rgba[3]) };\n};\n\nexport const extractRgbValues = (rgbString: string): RGBA => {\n    const rgbaRegex = /rgba\\(\\s*(\\d+)\\s*,\\s*(\\d+)\\s*,\\s*(\\d+)\\s*,\\s*([\\d.]+)\\s*\\)/;\n    const match = rgbString.match(rgbaRegex);\n\n    if (match) {\n        const r = parseInt(match[1] ?? '', 10);\n        const g = parseInt(match[2] ?? '', 10);\n        const b = parseInt(match[3] ?? '', 10);\n        const a = parseFloat(match[4] ?? '');\n\n        return { r, g, b, a };\n    }\n\n    return {\n        r: 255,\n        g: 255,\n        b: 255,\n        a: 1,\n    };\n};\n\nexport const hexToRgb = (hex: string): RGBA => {\n    let r: number;\n    let g: number;\n    let b: number;\n    let a: number;\n\n    const result = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})?$/i.exec(hex);\n\n    if (result) {\n        r = parseInt(result[1] ?? '0', 16);\n        g = parseInt(result[2] ?? '0', 16);\n        b = parseInt(result[3] ?? '0', 16);\n        a = result[4] ? Math.round((parseInt(result[4], 16) / 255) * 1000) / 1000 : 1;\n\n        return { r, g, b, a };\n    }\n\n    return {\n        r: 255,\n        g: 255,\n        b: 255,\n        a: 1,\n    };\n};\n\nexport const rgbToHex = ({ r, g, b, a = 1 }: RGBA): string => {\n    const clamp = (value: number) => Math.max(0, Math.min(255, Math.round(value)));\n    const alpha = Math.max(0, Math.min(1, a));\n    const hex = (x: number) => {\n        const hexValue = clamp(x).toString(16);\n        return hexValue.length === 1 ? `0${hexValue}` : hexValue;\n    };\n    return `#${hex(r)}${hex(g)}${hex(b)}${alpha <= 1 ? hex(alpha * 255) : ''}`;\n};\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,5 +1,6 @@
 import React, { ReactNode } from 'react';
 import type { IPresetColor } from '../../types/colorPicker';
+import { PopupAlignment } from '@chayns-components/core';
 interface ColorPickerProps {
     /**
      * The element that should be rendered to trigger the ColorPicker popup on click.
@@ -53,9 +54,21 @@ interface ColorPickerProps {
      * Whether presetColors should be got and uploaded to the site storage.
      */
     shouldUseSiteColors?: boolean;
+    /**
+     * Whether the color area should be displayed.
+     */
+    shouldHideColorArea?: boolean;
+    /**
+     * Whether the default preset colors should be hidden.
+     */
+    shouldHideDefaultPresetColors?: boolean;
+    /**
+     * The alignment of the popup
+     */
+    alignment?: PopupAlignment;
 }
 declare const ColorPicker: {
-    ({ children, onPresetColorAdd, onPresetColorRemove, onSelect, presetColors, selectedColor, shouldShowAsPopup, shouldShowMoreOptions, shouldShowPresetColors, shouldShowPreviewColorString, shouldShowRoundPreviewColor, shouldShowTransparencySlider, shouldUseSiteColors, }: ColorPickerProps): React.JSX.Element;
+    ({ children, onPresetColorAdd, onPresetColorRemove, onSelect, shouldHideColorArea, shouldHideDefaultPresetColors, presetColors, selectedColor, shouldShowAsPopup, shouldShowMoreOptions, shouldShowPresetColors, shouldShowPreviewColorString, shouldShowRoundPreviewColor, shouldShowTransparencySlider, shouldUseSiteColors, alignment, }: ColorPickerProps): React.JSX.Element;
     displayName: string;
 };
 export default ColorPicker;

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

@@ -1,3 +1,4 @@
+import { PopupAlignment } from '@chayns-components/core';
 import React, { ReactNode } from 'react';
 import type { IPresetColor } from '../../../types/colorPicker';
 interface ColorPickerWrapperProps {
@@ -12,9 +13,12 @@ interface ColorPickerWrapperProps {
     shouldShowRoundPreviewColor: boolean;
     shouldShowTransparencySlider: boolean;
     shouldUseSiteColors: boolean;
+    shouldHideColorArea: boolean;
+    shouldHideDefaultPresetColors: boolean;
+    alignment?: PopupAlignment;
 }
 declare const ColorPickerWrapper: {
-    ({ children, onPresetColorAdd, onPresetColorRemove, presetColors, shouldShowAsPopup, shouldShowMoreOptions, shouldShowPresetColors, shouldShowPreviewColorString, shouldShowRoundPreviewColor, shouldShowTransparencySlider, shouldUseSiteColors, }: ColorPickerWrapperProps): React.JSX.Element;
+    ({ children, onPresetColorAdd, onPresetColorRemove, presetColors, shouldShowAsPopup, shouldShowMoreOptions, shouldHideDefaultPresetColors, shouldShowPresetColors, shouldShowPreviewColorString, shouldShowRoundPreviewColor, shouldHideColorArea, shouldShowTransparencySlider, shouldUseSiteColors, alignment, }: ColorPickerWrapperProps): React.JSX.Element;
     displayName: string;
 };
 export default ColorPickerWrapper;

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

@@ -13,6 +13,6 @@ export declare const StyledColorPickerWrapperInfoColor: import("styled-component
     ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
 }>, StyledColorPickerWrapperInfoColorProps>, never>> & string;
 export declare const StyledColorPickerWrapperInfoText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
-    theme: import("@chayns-components/core/lib/types/components/color-scheme-provider/ColorSchemeProvider").Theme;
+    theme: import("@chayns-components/core").Theme;
 }>> & string;
 export {};

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

@@ -8,9 +8,11 @@ interface ColorPickerPopupProps {
     shouldShowTransparencySlider: boolean;
     shouldShowMoreOptions: boolean;
     shouldUseSiteColors: boolean;
+    shouldHideColorArea: boolean;
+    shouldHideDefaultPresetColors: boolean;
 }
 declare const ColorPickerPopup: {
-    ({ presetColors, onPresetColorRemove, onPresetColorAdd, shouldShowPresetColors, shouldShowTransparencySlider, shouldUseSiteColors, shouldShowMoreOptions, }: ColorPickerPopupProps): React.JSX.Element;
+    ({ presetColors, onPresetColorRemove, onPresetColorAdd, shouldShowPresetColors, shouldShowTransparencySlider, shouldHideDefaultPresetColors, shouldUseSiteColors, shouldShowMoreOptions, shouldHideColorArea, }: ColorPickerPopupProps): React.JSX.Element;
     displayName: string;
 };
 export default ColorPickerPopup;

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

@@ -1,267 +1,6 @@
 export declare const StyledColorArea: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const StyledColorAreaCanvas: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").CanvasHTMLAttributes<HTMLCanvasElement>, HTMLCanvasElement>, never>> & string;
 export declare const StyledColorAreaPseudo: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const StyledMotionColorAreaPointer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<{
-    title?: string | undefined;
-    slot?: string | undefined;
-    defaultChecked?: boolean | undefined;
-    defaultValue?: string | number | readonly string[] | undefined;
-    suppressContentEditableWarning?: boolean | undefined;
-    suppressHydrationWarning?: boolean | undefined;
-    accessKey?: string | undefined;
-    autoCapitalize?: (string & {}) | "none" | "off" | "on" | "sentences" | "words" | "characters" | undefined;
-    autoFocus?: boolean | undefined;
-    className?: string | undefined;
-    contentEditable?: "inherit" | (boolean | "true" | "false") | "plaintext-only" | undefined;
-    contextMenu?: string | undefined;
-    dir?: string | undefined;
-    draggable?: (boolean | "true" | "false") | undefined;
-    enterKeyHint?: "search" | "enter" | "done" | "go" | "next" | "previous" | "send" | undefined;
-    hidden?: boolean | undefined;
-    id?: string | undefined;
-    lang?: string | undefined;
-    nonce?: string | undefined;
-    spellCheck?: (boolean | "true" | "false") | undefined;
-    tabIndex?: number | undefined;
-    translate?: "yes" | "no" | undefined;
-    radioGroup?: string | undefined;
-    role?: import("react").AriaRole | undefined;
-    about?: string | undefined;
-    content?: string | undefined;
-    datatype?: string | undefined;
-    inlist?: any;
-    prefix?: string | undefined;
-    property?: string | undefined;
-    rel?: string | undefined;
-    resource?: string | undefined;
-    rev?: string | undefined;
-    typeof?: string | undefined;
-    vocab?: string | undefined;
-    autoCorrect?: string | undefined;
-    autoSave?: string | undefined;
-    color?: string | undefined;
-    itemProp?: string | undefined;
-    itemScope?: boolean | undefined;
-    itemType?: string | undefined;
-    itemID?: string | undefined;
-    itemRef?: string | undefined;
-    results?: number | undefined;
-    security?: string | undefined;
-    unselectable?: "off" | "on" | undefined;
-    inputMode?: "none" | "text" | "search" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
-    is?: string | undefined;
-    "aria-activedescendant"?: string | undefined;
-    "aria-atomic"?: (boolean | "true" | "false") | undefined;
-    "aria-autocomplete"?: "none" | "list" | "inline" | "both" | undefined;
-    "aria-braillelabel"?: string | undefined;
-    "aria-brailleroledescription"?: string | undefined;
-    "aria-busy"?: (boolean | "true" | "false") | undefined;
-    "aria-checked"?: boolean | "true" | "false" | "mixed" | undefined;
-    "aria-colcount"?: number | undefined;
-    "aria-colindex"?: number | undefined;
-    "aria-colindextext"?: string | undefined;
-    "aria-colspan"?: number | undefined;
-    "aria-controls"?: string | undefined;
-    "aria-current"?: boolean | "time" | "true" | "false" | "step" | "page" | "date" | "location" | undefined;
-    "aria-describedby"?: string | undefined;
-    "aria-description"?: string | undefined;
-    "aria-details"?: string | undefined;
-    "aria-disabled"?: (boolean | "true" | "false") | undefined;
-    "aria-dropeffect"?: "none" | "link" | "copy" | "execute" | "move" | "popup" | undefined;
-    "aria-errormessage"?: string | undefined;
-    "aria-expanded"?: (boolean | "true" | "false") | undefined;
-    "aria-flowto"?: string | undefined;
-    "aria-grabbed"?: (boolean | "true" | "false") | undefined;
-    "aria-haspopup"?: boolean | "dialog" | "menu" | "true" | "false" | "grid" | "listbox" | "tree" | undefined;
-    "aria-hidden"?: (boolean | "true" | "false") | undefined;
-    "aria-invalid"?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
-    "aria-keyshortcuts"?: string | undefined;
-    "aria-label"?: string | undefined;
-    "aria-labelledby"?: string | undefined;
-    "aria-level"?: number | undefined;
-    "aria-live"?: "off" | "assertive" | "polite" | undefined;
-    "aria-modal"?: (boolean | "true" | "false") | undefined;
-    "aria-multiline"?: (boolean | "true" | "false") | undefined;
-    "aria-multiselectable"?: (boolean | "true" | "false") | undefined;
-    "aria-orientation"?: "horizontal" | "vertical" | undefined;
-    "aria-owns"?: string | undefined;
-    "aria-placeholder"?: string | undefined;
-    "aria-posinset"?: number | undefined;
-    "aria-pressed"?: boolean | "true" | "false" | "mixed" | undefined;
-    "aria-readonly"?: (boolean | "true" | "false") | undefined;
-    "aria-relevant"?: "text" | "all" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
-    "aria-required"?: (boolean | "true" | "false") | undefined;
-    "aria-roledescription"?: string | undefined;
-    "aria-rowcount"?: number | undefined;
-    "aria-rowindex"?: number | undefined;
-    "aria-rowindextext"?: string | undefined;
-    "aria-rowspan"?: number | undefined;
-    "aria-selected"?: (boolean | "true" | "false") | undefined;
-    "aria-setsize"?: number | undefined;
-    "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined;
-    "aria-valuemax"?: number | undefined;
-    "aria-valuemin"?: number | undefined;
-    "aria-valuenow"?: number | undefined;
-    "aria-valuetext"?: string | undefined;
-    dangerouslySetInnerHTML?: {
-        __html: string | TrustedHTML;
-    } | undefined;
-    onCopy?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
-    onCopyCapture?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
-    onCut?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
-    onCutCapture?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
-    onPaste?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
-    onPasteCapture?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
-    onCompositionEnd?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
-    onCompositionEndCapture?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
-    onCompositionStart?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
-    onCompositionStartCapture?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
-    onCompositionUpdate?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
-    onCompositionUpdateCapture?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
-    onFocus?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
-    onFocusCapture?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
-    onBlur?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
-    onBlurCapture?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
-    onChange?: import("react").FormEventHandler<HTMLDivElement> | undefined;
-    onChangeCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
-    onBeforeInput?: import("react").FormEventHandler<HTMLDivElement> | undefined;
-    onBeforeInputCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
-    onInput?: import("react").FormEventHandler<HTMLDivElement> | undefined;
-    onInputCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
-    onReset?: import("react").FormEventHandler<HTMLDivElement> | undefined;
-    onResetCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
-    onSubmit?: import("react").FormEventHandler<HTMLDivElement> | undefined;
-    onSubmitCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
-    onInvalid?: import("react").FormEventHandler<HTMLDivElement> | undefined;
-    onInvalidCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
-    onLoad?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onLoadCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onError?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onErrorCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onKeyDown?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
-    onKeyDownCapture?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
-    onKeyPress?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
-    onKeyPressCapture?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
-    onKeyUp?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
-    onKeyUpCapture?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
-    onAbort?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onAbortCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onCanPlay?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onCanPlayCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onCanPlayThrough?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onCanPlayThroughCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onDurationChange?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onDurationChangeCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onEmptied?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onEmptiedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onEncrypted?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onEncryptedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onEnded?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onEndedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onLoadedData?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onLoadedDataCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onLoadedMetadata?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onLoadedMetadataCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onLoadStart?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onLoadStartCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onPause?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onPauseCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onPlay?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onPlayCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onPlaying?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onPlayingCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onProgress?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onProgressCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onRateChange?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onRateChangeCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onResize?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onResizeCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onSeeked?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onSeekedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onSeeking?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onSeekingCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onStalled?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onStalledCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onSuspend?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onSuspendCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onTimeUpdate?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onTimeUpdateCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onVolumeChange?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onVolumeChangeCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onWaiting?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onWaitingCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onAuxClick?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
-    onAuxClickCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
-    onClick?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
-    onClickCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
-    onContextMenu?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
-    onContextMenuCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
-    onDoubleClick?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
-    onDoubleClickCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
-    onDragCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
-    onDragEndCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
-    onDragEnter?: import("react").DragEventHandler<HTMLDivElement> | undefined;
-    onDragEnterCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
-    onDragExit?: import("react").DragEventHandler<HTMLDivElement> | undefined;
-    onDragExitCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
-    onDragLeave?: import("react").DragEventHandler<HTMLDivElement> | undefined;
-    onDragLeaveCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
-    onDragOver?: import("react").DragEventHandler<HTMLDivElement> | undefined;
-    onDragOverCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
-    onDragStartCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
-    onDrop?: import("react").DragEventHandler<HTMLDivElement> | undefined;
-    onDropCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
-    onMouseDown?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
-    onMouseDownCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
-    onMouseEnter?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
-    onMouseLeave?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
-    onMouseMove?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
-    onMouseMoveCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
-    onMouseOut?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
-    onMouseOutCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
-    onMouseOver?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
-    onMouseOverCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
-    onMouseUp?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
-    onMouseUpCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
-    onSelect?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onSelectCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onTouchCancel?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
-    onTouchCancelCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
-    onTouchEnd?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
-    onTouchEndCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
-    onTouchMove?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
-    onTouchMoveCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
-    onTouchStart?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
-    onTouchStartCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
-    onPointerDown?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
-    onPointerDownCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
-    onPointerMove?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
-    onPointerMoveCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
-    onPointerUp?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
-    onPointerUpCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
-    onPointerCancel?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
-    onPointerCancelCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
-    onPointerEnter?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
-    onPointerLeave?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
-    onPointerOver?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
-    onPointerOverCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
-    onPointerOut?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
-    onPointerOutCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
-    onGotPointerCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
-    onGotPointerCaptureCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
-    onLostPointerCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
-    onLostPointerCaptureCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
-    onScroll?: import("react").UIEventHandler<HTMLDivElement> | undefined;
-    onScrollCapture?: import("react").UIEventHandler<HTMLDivElement> | undefined;
-    onWheel?: import("react").WheelEventHandler<HTMLDivElement> | undefined;
-    onWheelCapture?: import("react").WheelEventHandler<HTMLDivElement> | undefined;
-    onAnimationStartCapture?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
-    onAnimationEnd?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
-    onAnimationEndCapture?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
-    onAnimationIteration?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
-    onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
-    onTransitionEnd?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
-    onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
-} & import("framer-motion").MotionProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
+export declare const StyledMotionColorAreaPointer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<Omit<import("motion/react").HTMLMotionProps<"div">, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, never>> & string & Omit<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, keyof import("react").Component<any, {}, any>>;
+}, never>> & string & Omit<import("motion/react").ForwardRefComponent<HTMLDivElement, import("motion/react").HTMLMotionProps<"div">>, keyof import("react").Component<any, {}, any>>;

package/lib/types/components/color-picker-popup/preset-colors/PresetColors.d.ts

@@ -5,9 +5,10 @@ interface PresetColorsProps {
     onPresetColorAdd?: (presetColor: IPresetColor) => void;
     onPresetColorRemove?: (presetColorId: IPresetColor['id']) => void;
     shouldUseSiteColors: boolean;
+    shouldHideDefaultPresetColors: boolean;
 }
 declare const PresetColors: {
-    ({ presetColors, onPresetColorRemove, onPresetColorAdd, shouldUseSiteColors, }: PresetColorsProps): React.JSX.Element;
+    ({ presetColors, onPresetColorRemove, onPresetColorAdd, shouldUseSiteColors, shouldHideDefaultPresetColors, }: PresetColorsProps): React.JSX.Element;
     displayName: string;
 };
 export default PresetColors;

package/lib/types/index.d.ts

@@ -3,4 +3,4 @@ export { default as ColorPicker } from './components/color-picker/ColorPicker';
 export { default as HueSlider } from './components/hue-slider/HueSlider';
 export { default as TransparencySlider } from './components/transparency-slider/TransparencySlider';
 export type { IPresetColor as PresetColor, RGB, RGBA } from './types/colorPicker';
-export { hexToRgb, rgbToHex } from './utils/color';
+export { hexToRgb, rgbToHex, splitRgb } from './utils/color';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@chayns-components/color-picker",
-    "version": "5.0.0-beta.999",
+    "version": "5.0.1",
     "description": "A set of beautiful React components for developing your own applications with chayns.",
     "sideEffects": false,
     "browserslist": [
@@ -23,8 +23,9 @@
     "exports": {
         ".": {
             "types": "./lib/types/index.d.ts",
+            "node": "./lib/cjs/index.js",
             "require": "./lib/cjs/index.js",
-            "import": "./lib/esm/index.js"
+            "default": "./lib/esm/index.js"
         }
     },
     "directories": {
@@ -51,30 +52,30 @@
         "url": "https://github.com/TobitSoftware/chayns-components/issues"
     },
     "devDependencies": {
-        "@babel/cli": "^7.26.4",
-        "@babel/core": "^7.26.0",
-        "@babel/preset-env": "^7.26.0",
-        "@babel/preset-react": "^7.26.3",
-        "@babel/preset-typescript": "^7.26.0",
-        "@types/react": "^18.3.18",
-        "@types/react-dom": "^18.3.5",
-        "@types/styled-components": "^5.1.34",
+        "@babel/cli": "^7.28.6",
+        "@babel/core": "^7.29.0",
+        "@babel/preset-env": "^7.29.0",
+        "@babel/preset-react": "^7.28.5",
+        "@babel/preset-typescript": "^7.28.5",
+        "@types/react": "^18.3.28",
+        "@types/react-dom": "^18.3.7",
+        "@types/styled-components": "^5.1.36",
         "@types/uuid": "^10.0.0",
         "babel-loader": "^9.2.1",
         "cross-env": "^7.0.3",
-        "lerna": "^8.1.9",
+        "lerna": "^8.2.4",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
-        "styled-components": "^6.1.14",
-        "typescript": "^5.7.3"
+        "styled-components": "^6.3.9",
+        "typescript": "^5.9.3"
     },
     "dependencies": {
-        "@chayns-components/core": "^5.0.0-beta.998",
-        "@chayns/colors": "^2.0.0"
+        "@chayns-components/core": "^5.0.1",
+        "@chayns/colors": "^2.0.2"
     },
     "peerDependencies": {
-        "chayns-api": ">=2.0.0",
-        "framer-motion": ">=10.18.0",
+        "chayns-api": ">=2.2.0",
+        "motion": ">=12.4.1",
         "react": ">=18.0.0",
         "react-dom": ">=18.0.0",
         "styled-components": ">=5.3.11"
@@ -82,5 +83,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "324111da4ed3bab3c49ecb49881e1bfc3d328e36"
+    "gitHead": "836fc172829209cb3ad26c1f1ed42d9af11425df"
 }