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

package/lib/esm/components/color-picker-popup/preset-colors/preset-color/PresetColor.styles.js

@@ -6,20 +6,14 @@ export const StyledPresetColor = styled.div`
     position: relative;
     overflow: hidden;
     border-radius: 50px;
-    border: ${_ref => {
-  let {
-    $isSelected
-  } = _ref;
-  return $isSelected ? '2px solid rgba(255, 255, 255, 1)' : '1px solid rgba(160, 160, 160, 0.3)';
-}};
+    border: ${({
+  $isSelected
+}) => $isSelected ? '2px solid rgba(255, 255, 255, 1)' : '1px solid rgba(160, 160, 160, 0.3)'};
 `;
 export const StyledPresetColorColor = styled.div`
-    background-color: ${_ref2 => {
-  let {
-    $color
-  } = _ref2;
-  return $color;
-}};
+    background-color: ${({
+  $color
+}) => $color};
     height: 100%;
     width: 100%;
     position: absolute;
@@ -27,9 +21,9 @@ export const StyledPresetColorColor = styled.div`
 export const StyledPresetColorBackground = styled.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/esm/components/color-picker-popup/preset-colors/preset-color/PresetColor.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"PresetColor.styles.js","names":["styled","StyledPresetColor","div","_ref","$isSelected","StyledPresetColorColor","_ref2","$color","StyledPresetColorBackground"],"sources":["../../../../../../src/components/color-picker-popup/preset-colors/preset-color/PresetColor.styles.ts"],"sourcesContent":["import type { WithTheme } from '@chayns-components/core';\nimport styled from 'styled-components';\n\ntype StyledPresetColorProps = WithTheme<{ $isSelected?: boolean }>;\n\nexport const StyledPresetColor = styled.div<StyledPresetColorProps>`\n    width: 22px;\n    aspect-ratio: 1;\n    cursor: pointer;\n    position: relative;\n    overflow: hidden;\n    border-radius: 50px;\n    border: ${({ $isSelected }) =>\n        $isSelected ? '2px solid rgba(255, 255, 255, 1)' : '1px solid rgba(160, 160, 160, 0.3)'};\n`;\n\ntype StyledPresetColorColorProps = WithTheme<{ $color: string; $isSelected?: boolean }>;\n\nexport const StyledPresetColorColor = styled.div<StyledPresetColorColorProps>`\n    background-color: ${({ $color }) => $color};\n    height: 100%;\n    width: 100%;\n    position: absolute;\n`;\n\nexport const StyledPresetColorBackground = 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"],"mappings":"AACA,OAAOA,MAAM,MAAM,mBAAmB;AAItC,OAAO,MAAMC,iBAAiB,GAAGD,MAAM,CAACE,GAA2B;AACnE;AACA;AACA;AACA;AACA;AACA;AACA,cAAcC,IAAA;EAAA,IAAC;IAAEC;EAAY,CAAC,GAAAD,IAAA;EAAA,OACtBC,WAAW,GAAG,kCAAkC,GAAG,oCAAoC;AAAA;AAC/F,CAAC;AAID,OAAO,MAAMC,sBAAsB,GAAGL,MAAM,CAACE,GAAgC;AAC7E,wBAAwBI,KAAA;EAAA,IAAC;IAAEC;EAAO,CAAC,GAAAD,KAAA;EAAA,OAAKC,MAAM;AAAA;AAC9C;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMC,2BAA2B,GAAGR,MAAM,CAACE,GAAG;AACrD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
+{"version":3,"file":"PresetColor.styles.js","names":["styled","StyledPresetColor","div","$isSelected","StyledPresetColorColor","$color","StyledPresetColorBackground"],"sources":["../../../../../../src/components/color-picker-popup/preset-colors/preset-color/PresetColor.styles.ts"],"sourcesContent":["import type { WithTheme } from '@chayns-components/core';\nimport styled from 'styled-components';\n\ntype StyledPresetColorProps = WithTheme<{ $isSelected?: boolean }>;\n\nexport const StyledPresetColor = styled.div<StyledPresetColorProps>`\n    width: 22px;\n    aspect-ratio: 1;\n    cursor: pointer;\n    position: relative;\n    overflow: hidden;\n    border-radius: 50px;\n    border: ${({ $isSelected }) =>\n        $isSelected ? '2px solid rgba(255, 255, 255, 1)' : '1px solid rgba(160, 160, 160, 0.3)'};\n`;\n\ntype StyledPresetColorColorProps = WithTheme<{ $color: string; $isSelected?: boolean }>;\n\nexport const StyledPresetColorColor = styled.div<StyledPresetColorColorProps>`\n    background-color: ${({ $color }) => $color};\n    height: 100%;\n    width: 100%;\n    position: absolute;\n`;\n\nexport const StyledPresetColorBackground = 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"],"mappings":"AACA,OAAOA,MAAM,MAAM,mBAAmB;AAItC,OAAO,MAAMC,iBAAiB,GAAGD,MAAM,CAACE,GAA2B;AACnE;AACA;AACA;AACA;AACA;AACA;AACA,cAAc,CAAC;EAAEC;AAAY,CAAC,KACtBA,WAAW,GAAG,kCAAkC,GAAG,oCAAoC;AAC/F,CAAC;AAID,OAAO,MAAMC,sBAAsB,GAAGJ,MAAM,CAACE,GAAgC;AAC7E,wBAAwB,CAAC;EAAEG;AAAO,CAAC,KAAKA,MAAM;AAC9C;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMC,2BAA2B,GAAGN,MAAM,CAACE,GAAG;AACrD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}

package/lib/esm/components/color-picker-popup/sliders/Sliders.js

@@ -5,10 +5,9 @@ import HueSlider from '../../hue-slider/HueSlider';
 import TransparencySlider from '../../transparency-slider/TransparencySlider';
 import ColorPreview from './color-preview/ColorPreview';
 import { StyledSliders, StyledSlidersWrapper } from './Sliders.styles';
-const Sliders = _ref => {
-  let {
-    shouldShowTransparencySlider
-  } = _ref;
+const Sliders = ({
+  shouldShowTransparencySlider
+}) => {
   const {
     selectedColor,
     updateSelectedColor,

package/lib/esm/components/color-picker-popup/sliders/Sliders.js.map

@@ -1 +1 @@
-{"version":3,"file":"Sliders.js","names":["React","useContext","useMemo","extractRgbValues","ColorPickerContext","HueSlider","TransparencySlider","ColorPreview","StyledSliders","StyledSlidersWrapper","Sliders","_ref","shouldShowTransparencySlider","selectedColor","updateSelectedColor","updateHueColor","updateShouldGetCoordinates","updateShouldCallOnSelect","updateCanGetColorFromArea","hueColor","handleColorChange","color","handleHueColorChange","handleStart","handleHueStart","handleEnd","opacity","a","createElement","onEnd","onStart","onChange","displayName"],"sources":["../../../../../src/components/color-picker-popup/sliders/Sliders.tsx"],"sourcesContent":["import React, { useContext, useMemo, type CSSProperties } from 'react';\nimport { extractRgbValues } from '../../../utils/color';\nimport { ColorPickerContext } from '../../ColorPickerProvider';\nimport HueSlider from '../../hue-slider/HueSlider';\nimport TransparencySlider from '../../transparency-slider/TransparencySlider';\nimport ColorPreview from './color-preview/ColorPreview';\nimport { StyledSliders, StyledSlidersWrapper } from './Sliders.styles';\n\ninterface SlidersProps {\n    shouldShowTransparencySlider: boolean;\n}\n\nconst Sliders = ({ shouldShowTransparencySlider }: SlidersProps) => {\n    const {\n        selectedColor,\n        updateSelectedColor,\n        updateHueColor,\n        updateShouldGetCoordinates,\n        updateShouldCallOnSelect,\n        updateCanGetColorFromArea,\n        hueColor,\n    } = useContext(ColorPickerContext);\n\n    const handleColorChange = (color: CSSProperties['color']) => {\n        if (typeof updateSelectedColor === 'function' && color) {\n            updateSelectedColor(color);\n        }\n    };\n\n    const handleHueColorChange = (color: CSSProperties['color']) => {\n        if (typeof updateHueColor === 'function' && color) {\n            updateHueColor(color);\n        }\n    };\n\n    const handleStart = () => {\n        if (typeof updateShouldGetCoordinates === 'function') {\n            updateShouldGetCoordinates(false);\n        }\n    };\n\n    const handleHueStart = () => {\n        handleStart();\n\n        if (typeof updateCanGetColorFromArea === 'function') {\n            updateCanGetColorFromArea(true);\n        }\n    };\n\n    const handleEnd = () => {\n        if (\n            typeof updateShouldGetCoordinates === 'function' &&\n            typeof updateShouldCallOnSelect === 'function'\n        ) {\n            updateShouldGetCoordinates(true);\n            updateShouldCallOnSelect(true);\n        }\n\n        if (typeof updateCanGetColorFromArea === 'function') {\n            updateCanGetColorFromArea(false);\n        }\n    };\n\n    const opacity = useMemo(() => extractRgbValues(selectedColor ?? '').a, [selectedColor]);\n\n    return (\n        <StyledSliders>\n            <StyledSlidersWrapper>\n                <HueSlider\n                    color={hueColor}\n                    opacity={opacity}\n                    onEnd={handleEnd}\n                    onStart={handleHueStart}\n                    onChange={handleHueColorChange}\n                />\n                {shouldShowTransparencySlider && (\n                    <TransparencySlider\n                        color={selectedColor}\n                        onEnd={handleEnd}\n                        onStart={handleStart}\n                        onChange={handleColorChange}\n                    />\n                )}\n            </StyledSlidersWrapper>\n            <ColorPreview />\n        </StyledSliders>\n    );\n};\n\nSliders.displayName = 'Sliders';\n\nexport default Sliders;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,UAAU,EAAEC,OAAO,QAA4B,OAAO;AACtE,SAASC,gBAAgB,QAAQ,sBAAsB;AACvD,SAASC,kBAAkB,QAAQ,2BAA2B;AAC9D,OAAOC,SAAS,MAAM,4BAA4B;AAClD,OAAOC,kBAAkB,MAAM,8CAA8C;AAC7E,OAAOC,YAAY,MAAM,8BAA8B;AACvD,SAASC,aAAa,EAAEC,oBAAoB,QAAQ,kBAAkB;AAMtE,MAAMC,OAAO,GAAGC,IAAA,IAAoD;EAAA,IAAnD;IAAEC;EAA2C,CAAC,GAAAD,IAAA;EAC3D,MAAM;IACFE,aAAa;IACbC,mBAAmB;IACnBC,cAAc;IACdC,0BAA0B;IAC1BC,wBAAwB;IACxBC,yBAAyB;IACzBC;EACJ,CAAC,GAAGlB,UAAU,CAACG,kBAAkB,CAAC;EAElC,MAAMgB,iBAAiB,GAAIC,KAA6B,IAAK;IACzD,IAAI,OAAOP,mBAAmB,KAAK,UAAU,IAAIO,KAAK,EAAE;MACpDP,mBAAmB,CAACO,KAAK,CAAC;IAC9B;EACJ,CAAC;EAED,MAAMC,oBAAoB,GAAID,KAA6B,IAAK;IAC5D,IAAI,OAAON,cAAc,KAAK,UAAU,IAAIM,KAAK,EAAE;MAC/CN,cAAc,CAACM,KAAK,CAAC;IACzB;EACJ,CAAC;EAED,MAAME,WAAW,GAAGA,CAAA,KAAM;IACtB,IAAI,OAAOP,0BAA0B,KAAK,UAAU,EAAE;MAClDA,0BAA0B,CAAC,KAAK,CAAC;IACrC;EACJ,CAAC;EAED,MAAMQ,cAAc,GAAGA,CAAA,KAAM;IACzBD,WAAW,CAAC,CAAC;IAEb,IAAI,OAAOL,yBAAyB,KAAK,UAAU,EAAE;MACjDA,yBAAyB,CAAC,IAAI,CAAC;IACnC;EACJ,CAAC;EAED,MAAMO,SAAS,GAAGA,CAAA,KAAM;IACpB,IACI,OAAOT,0BAA0B,KAAK,UAAU,IAChD,OAAOC,wBAAwB,KAAK,UAAU,EAChD;MACED,0BAA0B,CAAC,IAAI,CAAC;MAChCC,wBAAwB,CAAC,IAAI,CAAC;IAClC;IAEA,IAAI,OAAOC,yBAAyB,KAAK,UAAU,EAAE;MACjDA,yBAAyB,CAAC,KAAK,CAAC;IACpC;EACJ,CAAC;EAED,MAAMQ,OAAO,GAAGxB,OAAO,CAAC,MAAMC,gBAAgB,CAACU,aAAa,IAAI,EAAE,CAAC,CAACc,CAAC,EAAE,CAACd,aAAa,CAAC,CAAC;EAEvF,oBACIb,KAAA,CAAA4B,aAAA,CAACpB,aAAa,qBACVR,KAAA,CAAA4B,aAAA,CAACnB,oBAAoB,qBACjBT,KAAA,CAAA4B,aAAA,CAACvB,SAAS;IACNgB,KAAK,EAAEF,QAAS;IAChBO,OAAO,EAAEA,OAAQ;IACjBG,KAAK,EAAEJ,SAAU;IACjBK,OAAO,EAAEN,cAAe;IACxBO,QAAQ,EAAET;EAAqB,CAClC,CAAC,EACDV,4BAA4B,iBACzBZ,KAAA,CAAA4B,aAAA,CAACtB,kBAAkB;IACfe,KAAK,EAAER,aAAc;IACrBgB,KAAK,EAAEJ,SAAU;IACjBK,OAAO,EAAEP,WAAY;IACrBQ,QAAQ,EAAEX;EAAkB,CAC/B,CAEa,CAAC,eACvBpB,KAAA,CAAA4B,aAAA,CAACrB,YAAY,MAAE,CACJ,CAAC;AAExB,CAAC;AAEDG,OAAO,CAACsB,WAAW,GAAG,SAAS;AAE/B,eAAetB,OAAO","ignoreList":[]}
+{"version":3,"file":"Sliders.js","names":["React","useContext","useMemo","extractRgbValues","ColorPickerContext","HueSlider","TransparencySlider","ColorPreview","StyledSliders","StyledSlidersWrapper","Sliders","shouldShowTransparencySlider","selectedColor","updateSelectedColor","updateHueColor","updateShouldGetCoordinates","updateShouldCallOnSelect","updateCanGetColorFromArea","hueColor","handleColorChange","color","handleHueColorChange","handleStart","handleHueStart","handleEnd","opacity","a","createElement","onEnd","onStart","onChange","displayName"],"sources":["../../../../../src/components/color-picker-popup/sliders/Sliders.tsx"],"sourcesContent":["import React, { useContext, useMemo, type CSSProperties } from 'react';\nimport { extractRgbValues } from '../../../utils/color';\nimport { ColorPickerContext } from '../../ColorPickerProvider';\nimport HueSlider from '../../hue-slider/HueSlider';\nimport TransparencySlider from '../../transparency-slider/TransparencySlider';\nimport ColorPreview from './color-preview/ColorPreview';\nimport { StyledSliders, StyledSlidersWrapper } from './Sliders.styles';\n\ninterface SlidersProps {\n    shouldShowTransparencySlider: boolean;\n}\n\nconst Sliders = ({ shouldShowTransparencySlider }: SlidersProps) => {\n    const {\n        selectedColor,\n        updateSelectedColor,\n        updateHueColor,\n        updateShouldGetCoordinates,\n        updateShouldCallOnSelect,\n        updateCanGetColorFromArea,\n        hueColor,\n    } = useContext(ColorPickerContext);\n\n    const handleColorChange = (color: CSSProperties['color']) => {\n        if (typeof updateSelectedColor === 'function' && color) {\n            updateSelectedColor(color);\n        }\n    };\n\n    const handleHueColorChange = (color: CSSProperties['color']) => {\n        if (typeof updateHueColor === 'function' && color) {\n            updateHueColor(color);\n        }\n    };\n\n    const handleStart = () => {\n        if (typeof updateShouldGetCoordinates === 'function') {\n            updateShouldGetCoordinates(false);\n        }\n    };\n\n    const handleHueStart = () => {\n        handleStart();\n\n        if (typeof updateCanGetColorFromArea === 'function') {\n            updateCanGetColorFromArea(true);\n        }\n    };\n\n    const handleEnd = () => {\n        if (\n            typeof updateShouldGetCoordinates === 'function' &&\n            typeof updateShouldCallOnSelect === 'function'\n        ) {\n            updateShouldGetCoordinates(true);\n            updateShouldCallOnSelect(true);\n        }\n\n        if (typeof updateCanGetColorFromArea === 'function') {\n            updateCanGetColorFromArea(false);\n        }\n    };\n\n    const opacity = useMemo(() => extractRgbValues(selectedColor ?? '').a, [selectedColor]);\n\n    return (\n        <StyledSliders>\n            <StyledSlidersWrapper>\n                <HueSlider\n                    color={hueColor}\n                    opacity={opacity}\n                    onEnd={handleEnd}\n                    onStart={handleHueStart}\n                    onChange={handleHueColorChange}\n                />\n                {shouldShowTransparencySlider && (\n                    <TransparencySlider\n                        color={selectedColor}\n                        onEnd={handleEnd}\n                        onStart={handleStart}\n                        onChange={handleColorChange}\n                    />\n                )}\n            </StyledSlidersWrapper>\n            <ColorPreview />\n        </StyledSliders>\n    );\n};\n\nSliders.displayName = 'Sliders';\n\nexport default Sliders;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,UAAU,EAAEC,OAAO,QAA4B,OAAO;AACtE,SAASC,gBAAgB,QAAQ,sBAAsB;AACvD,SAASC,kBAAkB,QAAQ,2BAA2B;AAC9D,OAAOC,SAAS,MAAM,4BAA4B;AAClD,OAAOC,kBAAkB,MAAM,8CAA8C;AAC7E,OAAOC,YAAY,MAAM,8BAA8B;AACvD,SAASC,aAAa,EAAEC,oBAAoB,QAAQ,kBAAkB;AAMtE,MAAMC,OAAO,GAAGA,CAAC;EAAEC;AAA2C,CAAC,KAAK;EAChE,MAAM;IACFC,aAAa;IACbC,mBAAmB;IACnBC,cAAc;IACdC,0BAA0B;IAC1BC,wBAAwB;IACxBC,yBAAyB;IACzBC;EACJ,CAAC,GAAGjB,UAAU,CAACG,kBAAkB,CAAC;EAElC,MAAMe,iBAAiB,GAAIC,KAA6B,IAAK;IACzD,IAAI,OAAOP,mBAAmB,KAAK,UAAU,IAAIO,KAAK,EAAE;MACpDP,mBAAmB,CAACO,KAAK,CAAC;IAC9B;EACJ,CAAC;EAED,MAAMC,oBAAoB,GAAID,KAA6B,IAAK;IAC5D,IAAI,OAAON,cAAc,KAAK,UAAU,IAAIM,KAAK,EAAE;MAC/CN,cAAc,CAACM,KAAK,CAAC;IACzB;EACJ,CAAC;EAED,MAAME,WAAW,GAAGA,CAAA,KAAM;IACtB,IAAI,OAAOP,0BAA0B,KAAK,UAAU,EAAE;MAClDA,0BAA0B,CAAC,KAAK,CAAC;IACrC;EACJ,CAAC;EAED,MAAMQ,cAAc,GAAGA,CAAA,KAAM;IACzBD,WAAW,CAAC,CAAC;IAEb,IAAI,OAAOL,yBAAyB,KAAK,UAAU,EAAE;MACjDA,yBAAyB,CAAC,IAAI,CAAC;IACnC;EACJ,CAAC;EAED,MAAMO,SAAS,GAAGA,CAAA,KAAM;IACpB,IACI,OAAOT,0BAA0B,KAAK,UAAU,IAChD,OAAOC,wBAAwB,KAAK,UAAU,EAChD;MACED,0BAA0B,CAAC,IAAI,CAAC;MAChCC,wBAAwB,CAAC,IAAI,CAAC;IAClC;IAEA,IAAI,OAAOC,yBAAyB,KAAK,UAAU,EAAE;MACjDA,yBAAyB,CAAC,KAAK,CAAC;IACpC;EACJ,CAAC;EAED,MAAMQ,OAAO,GAAGvB,OAAO,CAAC,MAAMC,gBAAgB,CAACS,aAAa,IAAI,EAAE,CAAC,CAACc,CAAC,EAAE,CAACd,aAAa,CAAC,CAAC;EAEvF,oBACIZ,KAAA,CAAA2B,aAAA,CAACnB,aAAa,qBACVR,KAAA,CAAA2B,aAAA,CAAClB,oBAAoB,qBACjBT,KAAA,CAAA2B,aAAA,CAACtB,SAAS;IACNe,KAAK,EAAEF,QAAS;IAChBO,OAAO,EAAEA,OAAQ;IACjBG,KAAK,EAAEJ,SAAU;IACjBK,OAAO,EAAEN,cAAe;IACxBO,QAAQ,EAAET;EAAqB,CAClC,CAAC,EACDV,4BAA4B,iBACzBX,KAAA,CAAA2B,aAAA,CAACrB,kBAAkB;IACfc,KAAK,EAAER,aAAc;IACrBgB,KAAK,EAAEJ,SAAU;IACjBK,OAAO,EAAEP,WAAY;IACrBQ,QAAQ,EAAEX;EAAkB,CAC/B,CAEa,CAAC,eACvBnB,KAAA,CAAA2B,aAAA,CAACpB,YAAY,MAAE,CACJ,CAAC;AAExB,CAAC;AAEDG,OAAO,CAACqB,WAAW,GAAG,SAAS;AAE/B,eAAerB,OAAO","ignoreList":[]}

package/lib/esm/components/color-picker-popup/sliders/color-preview/ColorPreview.styles.js

@@ -10,9 +10,9 @@ export const StyledColorPreview = styled.div`
 export const StyledColorPreviewBackground = styled.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,
@@ -23,18 +23,15 @@ export const StyledColorPreviewBackground = styled.div`
     height: 100%;
     width: 100%;
 `;
-export const StyledColorPreviewColor = styled.div.attrs(_ref => {
-  let {
-    $color,
-    theme
-  } = _ref;
-  return {
-    style: {
-      backgroundColor: $color,
-      border: `1px ${theme.text} solid`
-    }
-  };
-})`
+export const StyledColorPreviewColor = styled.div.attrs(({
+  $color,
+  theme
+}) => ({
+  style: {
+    backgroundColor: $color,
+    border: `1px ${theme.text} solid`
+  }
+}))`
     height: 100%;
     width: 100%;
     position: absolute;

package/lib/esm/components/color-picker-popup/sliders/color-preview/ColorPreview.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorPreview.styles.js","names":["styled","StyledColorPreview","div","StyledColorPreviewBackground","StyledColorPreviewColor","attrs","_ref","$color","theme","style","backgroundColor","border","text"],"sources":["../../../../../../src/components/color-picker-popup/sliders/color-preview/ColorPreview.styles.ts"],"sourcesContent":["import type { WithTheme } from '@chayns-components/core';\nimport type { Theme } from '@chayns-components/core/lib/types/components/color-scheme-provider/ColorSchemeProvider';\nimport styled from 'styled-components';\n\nexport const StyledColorPreview = styled.div`\n    width: 40px;\n    aspect-ratio: 1;\n    position: relative;\n\n    border-radius: 2px;\n    overflow: hidden;\n`;\n\nexport const StyledColorPreviewBackground = 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\ntype StyledColorPreviewColorProps = WithTheme<{ $color?: string }>;\n\nexport const StyledColorPreviewColor = styled.div.attrs<StyledColorPreviewColorProps>(\n    ({ $color, theme }) => ({\n        style: {\n            backgroundColor: $color,\n            border: `1px ${(theme as Theme).text} solid`,\n        },\n    }),\n)`\n    height: 100%;\n    width: 100%;\n    position: absolute;\n`;\n"],"mappings":"AAEA,OAAOA,MAAM,MAAM,mBAAmB;AAEtC,OAAO,MAAMC,kBAAkB,GAAGD,MAAM,CAACE,GAAG;AAC5C;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMC,4BAA4B,GAAGH,MAAM,CAACE,GAAG;AACtD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAME,uBAAuB,GAAGJ,MAAM,CAACE,GAAG,CAACG,KAAK,CACnDC,IAAA;EAAA,IAAC;IAAEC,MAAM;IAAEC;EAAM,CAAC,GAAAF,IAAA;EAAA,OAAM;IACpBG,KAAK,EAAE;MACHC,eAAe,EAAEH,MAAM;MACvBI,MAAM,EAAE,OAAQH,KAAK,CAAWI,IAAI;IACxC;EACJ,CAAC;AAAA,CACL,CAAC;AACD;AACA;AACA;AACA,CAAC","ignoreList":[]}
+{"version":3,"file":"ColorPreview.styles.js","names":["styled","StyledColorPreview","div","StyledColorPreviewBackground","StyledColorPreviewColor","attrs","$color","theme","style","backgroundColor","border","text"],"sources":["../../../../../../src/components/color-picker-popup/sliders/color-preview/ColorPreview.styles.ts"],"sourcesContent":["import type { WithTheme } from '@chayns-components/core';\nimport type { Theme } from '@chayns-components/core/lib/types/components/color-scheme-provider/ColorSchemeProvider';\nimport styled from 'styled-components';\n\nexport const StyledColorPreview = styled.div`\n    width: 40px;\n    aspect-ratio: 1;\n    position: relative;\n\n    border-radius: 2px;\n    overflow: hidden;\n`;\n\nexport const StyledColorPreviewBackground = 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\ntype StyledColorPreviewColorProps = WithTheme<{ $color?: string }>;\n\nexport const StyledColorPreviewColor = styled.div.attrs<StyledColorPreviewColorProps>(\n    ({ $color, theme }) => ({\n        style: {\n            backgroundColor: $color,\n            border: `1px ${(theme as Theme).text} solid`,\n        },\n    }),\n)`\n    height: 100%;\n    width: 100%;\n    position: absolute;\n`;\n"],"mappings":"AAEA,OAAOA,MAAM,MAAM,mBAAmB;AAEtC,OAAO,MAAMC,kBAAkB,GAAGD,MAAM,CAACE,GAAG;AAC5C;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMC,4BAA4B,GAAGH,MAAM,CAACE,GAAG;AACtD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAME,uBAAuB,GAAGJ,MAAM,CAACE,GAAG,CAACG,KAAK,CACnD,CAAC;EAAEC,MAAM;EAAEC;AAAM,CAAC,MAAM;EACpBC,KAAK,EAAE;IACHC,eAAe,EAAEH,MAAM;IACvBI,MAAM,EAAE,OAAQH,KAAK,CAAWI,IAAI;EACxC;AACJ,CAAC,CACL,CAAC;AACD;AACA;AACA;AACA,CAAC","ignoreList":[]}

package/lib/esm/components/hue-slider/HueSlider.js

@@ -3,14 +3,13 @@ import { setRefreshScrollEnabled } from 'chayns-api';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { convertColorToHsl, extractHsl, hexToRgb, isValidRGBA, splitRgb } from '../../utils/color';
 import { StyledHueSlider, StyledHueSliderInput, StyledHueSliderThumb } from './HueSlider.styles';
-const HueSlider = _ref => {
-  let {
-    onChange,
-    onStart,
-    onEnd,
-    opacity,
-    color = 'rgba(255, 0, 0, 1)'
-  } = _ref;
+const HueSlider = ({
+  onChange,
+  onStart,
+  onEnd,
+  opacity,
+  color = 'rgba(255, 0, 0, 1)'
+}) => {
   const [editedValue, setEditedValue] = useState(0);
   const [hslColor, setHslColor] = useState('hsl(0, 0, 100)');
   const [internalOpacity, setInternalOpacity] = useState(1);

package/lib/esm/components/hue-slider/HueSlider.js.map

@@ -1 +1 @@
-{"version":3,"file":"HueSlider.js","names":["hslToRgb255","setRefreshScrollEnabled","React","useCallback","useEffect","useMemo","useRef","useState","convertColorToHsl","extractHsl","hexToRgb","isValidRGBA","splitRgb","StyledHueSlider","StyledHueSliderInput","StyledHueSliderThumb","HueSlider","_ref","onChange","onStart","onEnd","opacity","color","editedValue","setEditedValue","hslColor","setHslColor","internalOpacity","setInternalOpacity","sliderThumbRef","sliderRef","rgb","r","g","b","a","hsl","match","toString","parseInt","handleInputChange","event","Number","target","value","percentage","hue","saturation","lightness","h","s","l","sliderThumbPosition","current","offsetWidth","handleStart","handleEnd","createElement","ref","$color","type","min","max","onPointerDown","onPointerUp","$position","displayName"],"sources":["../../../../src/components/hue-slider/HueSlider.tsx"],"sourcesContent":["import { hslToRgb255 } from '@chayns/colors';\nimport { setRefreshScrollEnabled } from 'chayns-api';\nimport React, {\n    ChangeEvent,\n    CSSProperties,\n    FC,\n    useCallback,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { convertColorToHsl, extractHsl, hexToRgb, isValidRGBA, splitRgb } from '../../utils/color';\nimport { StyledHueSlider, StyledHueSliderInput, StyledHueSliderThumb } from './HueSlider.styles';\n\nexport type HueSliderProps = {\n    /**\n     * The color that should be selected.\n     */\n    color?: CSSProperties['color'];\n    /**\n     * Function that will be executed when the color is changed.\n     */\n    onChange?: (rgb: CSSProperties['color'], hsl: CSSProperties['color']) => void;\n    /**\n     * Function that will be executed when the color is ending to change.\n     */\n    onEnd?: (rgb: CSSProperties['color'], hsl: CSSProperties['color']) => void;\n    /**\n     * Function that will be executed when the color is starting to change.\n     */\n    onStart?: (rgb: CSSProperties['color'], hsl: CSSProperties['color']) => void;\n    /**\n     * The opacity of the Color. Is used if the color has no opacity value.\n     */\n    opacity?: number;\n};\n\nconst HueSlider: FC<HueSliderProps> = ({\n    onChange,\n    onStart,\n    onEnd,\n    opacity,\n    color = 'rgba(255, 0, 0, 1)',\n}) => {\n    const [editedValue, setEditedValue] = useState(0);\n    const [hslColor, setHslColor] = useState<CSSProperties['color']>('hsl(0, 0, 100)');\n    const [internalOpacity, setInternalOpacity] = useState(1);\n\n    const sliderThumbRef = useRef<HTMLDivElement>(null);\n    const sliderRef = useRef<HTMLInputElement>(null);\n\n    useEffect(() => {\n        if (color) {\n            let rgb;\n\n            if (isValidRGBA(color)) {\n                rgb = splitRgb(color);\n            } else {\n                rgb = hexToRgb(color);\n            }\n\n            if (!rgb) {\n                return;\n            }\n\n            const { r, g, b, a } = rgb;\n\n            setInternalOpacity(a);\n\n            const hsl = convertColorToHsl(`rgba(${r}, ${g}, ${b}, 1)`);\n            const match = hsl?.toString().match(/hsl\\((\\d+),\\s*([\\d.]+)%,\\s*([\\d.]+)%\\)/);\n\n            if (!match || !match[1]) {\n                return;\n            }\n\n            setHslColor(`hsl(${match[1]}, 100%, 50%)`);\n            setEditedValue(parseInt(match[1], 10));\n        }\n    }, [color]);\n\n    const handleInputChange = useCallback(\n        (event: ChangeEvent<HTMLInputElement>) => {\n            setEditedValue(Number(event.target.value));\n\n            const percentage = (Number(event.target.value) / 360) * 100;\n            const hue = (percentage / 100) * 360;\n            const saturation = 100;\n            const lightness = 50;\n\n            const hsl = `hsl(${hue}, ${saturation}%, ${lightness}%)`;\n            setHslColor(hsl);\n\n            if (typeof onChange === 'function') {\n                const rgb = hslToRgb255({ h: hue, s: 1, l: 0.5 });\n\n                if (!rgb) {\n                    return;\n                }\n\n                onChange(`rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${opacity ?? internalOpacity})`, hsl);\n            }\n        },\n        [internalOpacity, onChange, opacity],\n    );\n\n    const sliderThumbPosition = useMemo(() => {\n        if (sliderRef.current && sliderThumbRef.current) {\n            return (\n                (editedValue / 360) *\n                (sliderRef.current.offsetWidth - sliderThumbRef.current.offsetWidth / 2)\n            );\n        }\n        return 0;\n    }, [editedValue]);\n\n    const handleStart = useCallback(() => {\n        void setRefreshScrollEnabled(false);\n\n        if (typeof onStart === 'function' && hslColor) {\n            const hsl = extractHsl(hslColor);\n\n            if (!hsl) {\n                return;\n            }\n\n            const rgb = hslToRgb255(hsl);\n\n            if (!rgb) {\n                return;\n            }\n\n            const { r, g, b } = rgb;\n\n            onStart(`rgba(${r}, ${g}, ${b}, ${opacity ?? internalOpacity})`, hslColor);\n        }\n    }, [hslColor, internalOpacity, onStart, opacity]);\n\n    const handleEnd = useCallback(() => {\n        void setRefreshScrollEnabled(true);\n\n        if (typeof onEnd === 'function' && hslColor) {\n            const hsl = extractHsl(hslColor);\n\n            if (!hsl) {\n                return;\n            }\n\n            const rgb = hslToRgb255(hsl);\n\n            if (!rgb) {\n                return;\n            }\n\n            const { r, g, b } = rgb;\n\n            onEnd(`rgba(${r}, ${g}, ${b}, ${opacity ?? internalOpacity})`, hslColor);\n        }\n    }, [hslColor, internalOpacity, onEnd, opacity]);\n\n    return useMemo(\n        () => (\n            <StyledHueSlider>\n                <StyledHueSliderInput\n                    ref={sliderRef}\n                    $color={hslColor}\n                    type=\"range\"\n                    min={0}\n                    max={360}\n                    value={editedValue}\n                    onChange={handleInputChange}\n                    onPointerDown={handleStart}\n                    onPointerUp={handleEnd}\n                />\n                <StyledHueSliderThumb\n                    ref={sliderThumbRef}\n                    $position={sliderThumbPosition}\n                    $color={hslColor}\n                />\n            </StyledHueSlider>\n        ),\n        [editedValue, handleEnd, handleInputChange, handleStart, hslColor, sliderThumbPosition],\n    );\n};\n\nHueSlider.displayName = 'HueSlider';\n\nexport default HueSlider;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"HueSlider.js","names":["hslToRgb255","setRefreshScrollEnabled","React","useCallback","useEffect","useMemo","useRef","useState","convertColorToHsl","extractHsl","hexToRgb","isValidRGBA","splitRgb","StyledHueSlider","StyledHueSliderInput","StyledHueSliderThumb","HueSlider","onChange","onStart","onEnd","opacity","color","editedValue","setEditedValue","hslColor","setHslColor","internalOpacity","setInternalOpacity","sliderThumbRef","sliderRef","rgb","r","g","b","a","hsl","match","toString","parseInt","handleInputChange","event","Number","target","value","percentage","hue","saturation","lightness","h","s","l","sliderThumbPosition","current","offsetWidth","handleStart","handleEnd","createElement","ref","$color","type","min","max","onPointerDown","onPointerUp","$position","displayName"],"sources":["../../../../src/components/hue-slider/HueSlider.tsx"],"sourcesContent":["import { hslToRgb255 } from '@chayns/colors';\nimport { setRefreshScrollEnabled } from 'chayns-api';\nimport React, {\n    ChangeEvent,\n    CSSProperties,\n    FC,\n    useCallback,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { convertColorToHsl, extractHsl, hexToRgb, isValidRGBA, splitRgb } from '../../utils/color';\nimport { StyledHueSlider, StyledHueSliderInput, StyledHueSliderThumb } from './HueSlider.styles';\n\nexport type HueSliderProps = {\n    /**\n     * The color that should be selected.\n     */\n    color?: CSSProperties['color'];\n    /**\n     * Function that will be executed when the color is changed.\n     */\n    onChange?: (rgb: CSSProperties['color'], hsl: CSSProperties['color']) => void;\n    /**\n     * Function that will be executed when the color is ending to change.\n     */\n    onEnd?: (rgb: CSSProperties['color'], hsl: CSSProperties['color']) => void;\n    /**\n     * Function that will be executed when the color is starting to change.\n     */\n    onStart?: (rgb: CSSProperties['color'], hsl: CSSProperties['color']) => void;\n    /**\n     * The opacity of the Color. Is used if the color has no opacity value.\n     */\n    opacity?: number;\n};\n\nconst HueSlider: FC<HueSliderProps> = ({\n    onChange,\n    onStart,\n    onEnd,\n    opacity,\n    color = 'rgba(255, 0, 0, 1)',\n}) => {\n    const [editedValue, setEditedValue] = useState(0);\n    const [hslColor, setHslColor] = useState<CSSProperties['color']>('hsl(0, 0, 100)');\n    const [internalOpacity, setInternalOpacity] = useState(1);\n\n    const sliderThumbRef = useRef<HTMLDivElement>(null);\n    const sliderRef = useRef<HTMLInputElement>(null);\n\n    useEffect(() => {\n        if (color) {\n            let rgb;\n\n            if (isValidRGBA(color)) {\n                rgb = splitRgb(color);\n            } else {\n                rgb = hexToRgb(color);\n            }\n\n            if (!rgb) {\n                return;\n            }\n\n            const { r, g, b, a } = rgb;\n\n            setInternalOpacity(a);\n\n            const hsl = convertColorToHsl(`rgba(${r}, ${g}, ${b}, 1)`);\n            const match = hsl?.toString().match(/hsl\\((\\d+),\\s*([\\d.]+)%,\\s*([\\d.]+)%\\)/);\n\n            if (!match || !match[1]) {\n                return;\n            }\n\n            setHslColor(`hsl(${match[1]}, 100%, 50%)`);\n            setEditedValue(parseInt(match[1], 10));\n        }\n    }, [color]);\n\n    const handleInputChange = useCallback(\n        (event: ChangeEvent<HTMLInputElement>) => {\n            setEditedValue(Number(event.target.value));\n\n            const percentage = (Number(event.target.value) / 360) * 100;\n            const hue = (percentage / 100) * 360;\n            const saturation = 100;\n            const lightness = 50;\n\n            const hsl = `hsl(${hue}, ${saturation}%, ${lightness}%)`;\n            setHslColor(hsl);\n\n            if (typeof onChange === 'function') {\n                const rgb = hslToRgb255({ h: hue, s: 1, l: 0.5 });\n\n                if (!rgb) {\n                    return;\n                }\n\n                onChange(`rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${opacity ?? internalOpacity})`, hsl);\n            }\n        },\n        [internalOpacity, onChange, opacity],\n    );\n\n    const sliderThumbPosition = useMemo(() => {\n        if (sliderRef.current && sliderThumbRef.current) {\n            return (\n                (editedValue / 360) *\n                (sliderRef.current.offsetWidth - sliderThumbRef.current.offsetWidth / 2)\n            );\n        }\n        return 0;\n    }, [editedValue]);\n\n    const handleStart = useCallback(() => {\n        void setRefreshScrollEnabled(false);\n\n        if (typeof onStart === 'function' && hslColor) {\n            const hsl = extractHsl(hslColor);\n\n            if (!hsl) {\n                return;\n            }\n\n            const rgb = hslToRgb255(hsl);\n\n            if (!rgb) {\n                return;\n            }\n\n            const { r, g, b } = rgb;\n\n            onStart(`rgba(${r}, ${g}, ${b}, ${opacity ?? internalOpacity})`, hslColor);\n        }\n    }, [hslColor, internalOpacity, onStart, opacity]);\n\n    const handleEnd = useCallback(() => {\n        void setRefreshScrollEnabled(true);\n\n        if (typeof onEnd === 'function' && hslColor) {\n            const hsl = extractHsl(hslColor);\n\n            if (!hsl) {\n                return;\n            }\n\n            const rgb = hslToRgb255(hsl);\n\n            if (!rgb) {\n                return;\n            }\n\n            const { r, g, b } = rgb;\n\n            onEnd(`rgba(${r}, ${g}, ${b}, ${opacity ?? internalOpacity})`, hslColor);\n        }\n    }, [hslColor, internalOpacity, onEnd, opacity]);\n\n    return useMemo(\n        () => (\n            <StyledHueSlider>\n                <StyledHueSliderInput\n                    ref={sliderRef}\n                    $color={hslColor}\n                    type=\"range\"\n                    min={0}\n                    max={360}\n                    value={editedValue}\n                    onChange={handleInputChange}\n                    onPointerDown={handleStart}\n                    onPointerUp={handleEnd}\n                />\n                <StyledHueSliderThumb\n                    ref={sliderThumbRef}\n                    $position={sliderThumbPosition}\n                    $color={hslColor}\n                />\n            </StyledHueSlider>\n        ),\n        [editedValue, handleEnd, handleInputChange, handleStart, hslColor, sliderThumbPosition],\n    );\n};\n\nHueSlider.displayName = 'HueSlider';\n\nexport default HueSlider;\n"],"mappings":"AAAA,SAASA,WAAW,QAAQ,gBAAgB;AAC5C,SAASC,uBAAuB,QAAQ,YAAY;AACpD,OAAOC,KAAK,IAIRC,WAAW,EACXC,SAAS,EACTC,OAAO,EACPC,MAAM,EACNC,QAAQ,QACL,OAAO;AACd,SAASC,iBAAiB,EAAEC,UAAU,EAAEC,QAAQ,EAAEC,WAAW,EAAEC,QAAQ,QAAQ,mBAAmB;AAClG,SAASC,eAAe,EAAEC,oBAAoB,EAAEC,oBAAoB,QAAQ,oBAAoB;AAyBhG,MAAMC,SAA6B,GAAGA,CAAC;EACnCC,QAAQ;EACRC,OAAO;EACPC,KAAK;EACLC,OAAO;EACPC,KAAK,GAAG;AACZ,CAAC,KAAK;EACF,MAAM,CAACC,WAAW,EAAEC,cAAc,CAAC,GAAGhB,QAAQ,CAAC,CAAC,CAAC;EACjD,MAAM,CAACiB,QAAQ,EAAEC,WAAW,CAAC,GAAGlB,QAAQ,CAAyB,gBAAgB,CAAC;EAClF,MAAM,CAACmB,eAAe,EAAEC,kBAAkB,CAAC,GAAGpB,QAAQ,CAAC,CAAC,CAAC;EAEzD,MAAMqB,cAAc,GAAGtB,MAAM,CAAiB,IAAI,CAAC;EACnD,MAAMuB,SAAS,GAAGvB,MAAM,CAAmB,IAAI,CAAC;EAEhDF,SAAS,CAAC,MAAM;IACZ,IAAIiB,KAAK,EAAE;MACP,IAAIS,GAAG;MAEP,IAAInB,WAAW,CAACU,KAAK,CAAC,EAAE;QACpBS,GAAG,GAAGlB,QAAQ,CAACS,KAAK,CAAC;MACzB,CAAC,MAAM;QACHS,GAAG,GAAGpB,QAAQ,CAACW,KAAK,CAAC;MACzB;MAEA,IAAI,CAACS,GAAG,EAAE;QACN;MACJ;MAEA,MAAM;QAAEC,CAAC;QAAEC,CAAC;QAAEC,CAAC;QAAEC;MAAE,CAAC,GAAGJ,GAAG;MAE1BH,kBAAkB,CAACO,CAAC,CAAC;MAErB,MAAMC,GAAG,GAAG3B,iBAAiB,CAAC,QAAQuB,CAAC,KAAKC,CAAC,KAAKC,CAAC,MAAM,CAAC;MAC1D,MAAMG,KAAK,GAAGD,GAAG,EAAEE,QAAQ,CAAC,CAAC,CAACD,KAAK,CAAC,wCAAwC,CAAC;MAE7E,IAAI,CAACA,KAAK,IAAI,CAACA,KAAK,CAAC,CAAC,CAAC,EAAE;QACrB;MACJ;MAEAX,WAAW,CAAC,OAAOW,KAAK,CAAC,CAAC,CAAC,cAAc,CAAC;MAC1Cb,cAAc,CAACe,QAAQ,CAACF,KAAK,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;IAC1C;EACJ,CAAC,EAAE,CAACf,KAAK,CAAC,CAAC;EAEX,MAAMkB,iBAAiB,GAAGpC,WAAW,CAChCqC,KAAoC,IAAK;IACtCjB,cAAc,CAACkB,MAAM,CAACD,KAAK,CAACE,MAAM,CAACC,KAAK,CAAC,CAAC;IAE1C,MAAMC,UAAU,GAAIH,MAAM,CAACD,KAAK,CAACE,MAAM,CAACC,KAAK,CAAC,GAAG,GAAG,GAAI,GAAG;IAC3D,MAAME,GAAG,GAAID,UAAU,GAAG,GAAG,GAAI,GAAG;IACpC,MAAME,UAAU,GAAG,GAAG;IACtB,MAAMC,SAAS,GAAG,EAAE;IAEpB,MAAMZ,GAAG,GAAG,OAAOU,GAAG,KAAKC,UAAU,MAAMC,SAAS,IAAI;IACxDtB,WAAW,CAACU,GAAG,CAAC;IAEhB,IAAI,OAAOlB,QAAQ,KAAK,UAAU,EAAE;MAChC,MAAMa,GAAG,GAAG9B,WAAW,CAAC;QAAEgD,CAAC,EAAEH,GAAG;QAAEI,CAAC,EAAE,CAAC;QAAEC,CAAC,EAAE;MAAI,CAAC,CAAC;MAEjD,IAAI,CAACpB,GAAG,EAAE;QACN;MACJ;MAEAb,QAAQ,CAAC,QAAQa,GAAG,CAACC,CAAC,KAAKD,GAAG,CAACE,CAAC,KAAKF,GAAG,CAACG,CAAC,KAAKb,OAAO,IAAIM,eAAe,GAAG,EAAES,GAAG,CAAC;IACtF;EACJ,CAAC,EACD,CAACT,eAAe,EAAET,QAAQ,EAAEG,OAAO,CACvC,CAAC;EAED,MAAM+B,mBAAmB,GAAG9C,OAAO,CAAC,MAAM;IACtC,IAAIwB,SAAS,CAACuB,OAAO,IAAIxB,cAAc,CAACwB,OAAO,EAAE;MAC7C,OACK9B,WAAW,GAAG,GAAG,IACjBO,SAAS,CAACuB,OAAO,CAACC,WAAW,GAAGzB,cAAc,CAACwB,OAAO,CAACC,WAAW,GAAG,CAAC,CAAC;IAEhF;IACA,OAAO,CAAC;EACZ,CAAC,EAAE,CAAC/B,WAAW,CAAC,CAAC;EAEjB,MAAMgC,WAAW,GAAGnD,WAAW,CAAC,MAAM;IAClC,KAAKF,uBAAuB,CAAC,KAAK,CAAC;IAEnC,IAAI,OAAOiB,OAAO,KAAK,UAAU,IAAIM,QAAQ,EAAE;MAC3C,MAAMW,GAAG,GAAG1B,UAAU,CAACe,QAAQ,CAAC;MAEhC,IAAI,CAACW,GAAG,EAAE;QACN;MACJ;MAEA,MAAML,GAAG,GAAG9B,WAAW,CAACmC,GAAG,CAAC;MAE5B,IAAI,CAACL,GAAG,EAAE;QACN;MACJ;MAEA,MAAM;QAAEC,CAAC;QAAEC,CAAC;QAAEC;MAAE,CAAC,GAAGH,GAAG;MAEvBZ,OAAO,CAAC,QAAQa,CAAC,KAAKC,CAAC,KAAKC,CAAC,KAAKb,OAAO,IAAIM,eAAe,GAAG,EAAEF,QAAQ,CAAC;IAC9E;EACJ,CAAC,EAAE,CAACA,QAAQ,EAAEE,eAAe,EAAER,OAAO,EAAEE,OAAO,CAAC,CAAC;EAEjD,MAAMmC,SAAS,GAAGpD,WAAW,CAAC,MAAM;IAChC,KAAKF,uBAAuB,CAAC,IAAI,CAAC;IAElC,IAAI,OAAOkB,KAAK,KAAK,UAAU,IAAIK,QAAQ,EAAE;MACzC,MAAMW,GAAG,GAAG1B,UAAU,CAACe,QAAQ,CAAC;MAEhC,IAAI,CAACW,GAAG,EAAE;QACN;MACJ;MAEA,MAAML,GAAG,GAAG9B,WAAW,CAACmC,GAAG,CAAC;MAE5B,IAAI,CAACL,GAAG,EAAE;QACN;MACJ;MAEA,MAAM;QAAEC,CAAC;QAAEC,CAAC;QAAEC;MAAE,CAAC,GAAGH,GAAG;MAEvBX,KAAK,CAAC,QAAQY,CAAC,KAAKC,CAAC,KAAKC,CAAC,KAAKb,OAAO,IAAIM,eAAe,GAAG,EAAEF,QAAQ,CAAC;IAC5E;EACJ,CAAC,EAAE,CAACA,QAAQ,EAAEE,eAAe,EAAEP,KAAK,EAAEC,OAAO,CAAC,CAAC;EAE/C,OAAOf,OAAO,CACV,mBACIH,KAAA,CAAAsD,aAAA,CAAC3C,eAAe,qBACZX,KAAA,CAAAsD,aAAA,CAAC1C,oBAAoB;IACjB2C,GAAG,EAAE5B,SAAU;IACf6B,MAAM,EAAElC,QAAS;IACjBmC,IAAI,EAAC,OAAO;IACZC,GAAG,EAAE,CAAE;IACPC,GAAG,EAAE,GAAI;IACTlB,KAAK,EAAErB,WAAY;IACnBL,QAAQ,EAAEsB,iBAAkB;IAC5BuB,aAAa,EAAER,WAAY;IAC3BS,WAAW,EAAER;EAAU,CAC1B,CAAC,eACFrD,KAAA,CAAAsD,aAAA,CAACzC,oBAAoB;IACjB0C,GAAG,EAAE7B,cAAe;IACpBoC,SAAS,EAAEb,mBAAoB;IAC/BO,MAAM,EAAElC;EAAS,CACpB,CACY,CACpB,EACD,CAACF,WAAW,EAAEiC,SAAS,EAAEhB,iBAAiB,EAAEe,WAAW,EAAE9B,QAAQ,EAAE2B,mBAAmB,CAC1F,CAAC;AACL,CAAC;AAEDnC,SAAS,CAACiD,WAAW,GAAG,WAAW;AAEnC,eAAejD,SAAS","ignoreList":[]}

package/lib/esm/components/hue-slider/HueSlider.styles.js

@@ -55,18 +55,15 @@ export const StyledHueSliderInput = styled.input`
         border-radius: 50%;
     }
 `;
-export const StyledHueSliderThumb = styled.div.attrs(_ref => {
-  let {
-    $position,
-    $color
-  } = _ref;
-  return {
-    style: {
-      left: `${$position}px`,
-      backgroundColor: $color
-    }
-  };
-})`
+export const StyledHueSliderThumb = styled.div.attrs(({
+  $position,
+  $color
+}) => ({
+  style: {
+    left: `${$position}px`,
+    backgroundColor: $color
+  }
+}))`
     min-width: 20px;
     height: 20px;
     cursor: pointer;

package/lib/esm/components/hue-slider/HueSlider.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"HueSlider.styles.js","names":["styled","StyledHueSlider","div","StyledHueSliderInput","input","StyledHueSliderThumb","attrs","_ref","$position","$color","style","left","backgroundColor"],"sources":["../../../../src/components/hue-slider/HueSlider.styles.ts"],"sourcesContent":["import type { WithTheme } from '@chayns-components/core';\nimport type { CSSProperties } from 'react';\nimport styled from 'styled-components';\n\nexport const StyledHueSlider = styled.div`\n    width: 100%;\n    height: 30px;\n    cursor: pointer;\n    position: relative;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    touch-action: none;\n`;\n\ntype StyledHueSliderInputProps = WithTheme<{\n    $color: CSSProperties['color'];\n}>;\n\nexport const StyledHueSliderInput = styled.input<StyledHueSliderInputProps>`\n    width: calc(100% - 10px);\n    border-radius: 100px;\n    -webkit-appearance: none;\n    height: 10px;\n    background: linear-gradient(\n        to right,\n        hsl(0, 100%, 50%),\n        hsl(30, 100%, 50%),\n        hsl(60, 100%, 50%),\n        hsl(90, 100%, 50%),\n        hsl(120, 100%, 50%),\n        hsl(150, 100%, 50%),\n        hsl(180, 100%, 50%),\n        hsl(210, 100%, 50%),\n        hsl(240, 100%, 50%),\n        hsl(270, 100%, 50%),\n        hsl(300, 100%, 50%),\n        hsl(330, 100%, 50%),\n        hsl(360, 100%, 50%)\n    );\n    outline: none;\n    opacity: 0.7;\n    -webkit-transition: 0.2s;\n    transition: opacity 0.2s;\n\n    // Slider thumb for chrome\n    &::-webkit-slider-thumb {\n        -webkit-appearance: none;\n        appearance: none;\n        width: 20px;\n        height: 20px;\n        opacity: 0;\n        cursor: pointer;\n        border-radius: 50%;\n    }\n\n    // slider thumb for firefox\n    &::-moz-range-thumb {\n        width: 20px;\n        opacity: 0;\n        height: 20px;\n        cursor: pointer;\n        border-radius: 50%;\n    }\n`;\n\ntype StyledHueSliderThumbProps = WithTheme<{ $position: number; $color: CSSProperties['color'] }>;\n\nexport const StyledHueSliderThumb = styled.div.attrs<StyledHueSliderThumbProps>(\n    ({ $position, $color }) => ({\n        style: {\n            left: `${$position}px`,\n            backgroundColor: $color,\n        },\n    }),\n)`\n    min-width: 20px;\n    height: 20px;\n    cursor: pointer;\n    border-radius: 100px;\n    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);\n    pointer-events: none;\n    z-index: 3;\n    position: absolute;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0 8px;\n    white-space: nowrap;\n`;\n"],"mappings":"AAEA,OAAOA,MAAM,MAAM,mBAAmB;AAEtC,OAAO,MAAMC,eAAe,GAAGD,MAAM,CAACE,GAAG;AACzC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAMD,OAAO,MAAMC,oBAAoB,GAAGH,MAAM,CAACI,KAAgC;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAMC,oBAAoB,GAAGL,MAAM,CAACE,GAAG,CAACI,KAAK,CAChDC,IAAA;EAAA,IAAC;IAAEC,SAAS;IAAEC;EAAO,CAAC,GAAAF,IAAA;EAAA,OAAM;IACxBG,KAAK,EAAE;MACHC,IAAI,EAAE,GAAGH,SAAS,IAAI;MACtBI,eAAe,EAAEH;IACrB;EACJ,CAAC;AAAA,CACL,CAAC;AACD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
+{"version":3,"file":"HueSlider.styles.js","names":["styled","StyledHueSlider","div","StyledHueSliderInput","input","StyledHueSliderThumb","attrs","$position","$color","style","left","backgroundColor"],"sources":["../../../../src/components/hue-slider/HueSlider.styles.ts"],"sourcesContent":["import type { WithTheme } from '@chayns-components/core';\nimport type { CSSProperties } from 'react';\nimport styled from 'styled-components';\n\nexport const StyledHueSlider = styled.div`\n    width: 100%;\n    height: 30px;\n    cursor: pointer;\n    position: relative;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    touch-action: none;\n`;\n\ntype StyledHueSliderInputProps = WithTheme<{\n    $color: CSSProperties['color'];\n}>;\n\nexport const StyledHueSliderInput = styled.input<StyledHueSliderInputProps>`\n    width: calc(100% - 10px);\n    border-radius: 100px;\n    -webkit-appearance: none;\n    height: 10px;\n    background: linear-gradient(\n        to right,\n        hsl(0, 100%, 50%),\n        hsl(30, 100%, 50%),\n        hsl(60, 100%, 50%),\n        hsl(90, 100%, 50%),\n        hsl(120, 100%, 50%),\n        hsl(150, 100%, 50%),\n        hsl(180, 100%, 50%),\n        hsl(210, 100%, 50%),\n        hsl(240, 100%, 50%),\n        hsl(270, 100%, 50%),\n        hsl(300, 100%, 50%),\n        hsl(330, 100%, 50%),\n        hsl(360, 100%, 50%)\n    );\n    outline: none;\n    opacity: 0.7;\n    -webkit-transition: 0.2s;\n    transition: opacity 0.2s;\n\n    // Slider thumb for chrome\n    &::-webkit-slider-thumb {\n        -webkit-appearance: none;\n        appearance: none;\n        width: 20px;\n        height: 20px;\n        opacity: 0;\n        cursor: pointer;\n        border-radius: 50%;\n    }\n\n    // slider thumb for firefox\n    &::-moz-range-thumb {\n        width: 20px;\n        opacity: 0;\n        height: 20px;\n        cursor: pointer;\n        border-radius: 50%;\n    }\n`;\n\ntype StyledHueSliderThumbProps = WithTheme<{ $position: number; $color: CSSProperties['color'] }>;\n\nexport const StyledHueSliderThumb = styled.div.attrs<StyledHueSliderThumbProps>(\n    ({ $position, $color }) => ({\n        style: {\n            left: `${$position}px`,\n            backgroundColor: $color,\n        },\n    }),\n)`\n    min-width: 20px;\n    height: 20px;\n    cursor: pointer;\n    border-radius: 100px;\n    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);\n    pointer-events: none;\n    z-index: 3;\n    position: absolute;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0 8px;\n    white-space: nowrap;\n`;\n"],"mappings":"AAEA,OAAOA,MAAM,MAAM,mBAAmB;AAEtC,OAAO,MAAMC,eAAe,GAAGD,MAAM,CAACE,GAAG;AACzC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAMD,OAAO,MAAMC,oBAAoB,GAAGH,MAAM,CAACI,KAAgC;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAMC,oBAAoB,GAAGL,MAAM,CAACE,GAAG,CAACI,KAAK,CAChD,CAAC;EAAEC,SAAS;EAAEC;AAAO,CAAC,MAAM;EACxBC,KAAK,EAAE;IACHC,IAAI,EAAE,GAAGH,SAAS,IAAI;IACtBI,eAAe,EAAEH;EACrB;AACJ,CAAC,CACL,CAAC;AACD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}

package/lib/esm/components/transparency-slider/TransparencySlider.js

@@ -2,13 +2,12 @@ import { setRefreshScrollEnabled } from 'chayns-api';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { hexToRgb, isValidRGBA, splitRgb } from '../../utils/color';
 import { StyledTransparencySlider, StyledTransparencySliderBackground, StyledTransparencySliderInput, StyledTransparencySliderThumb, StyledTransparencySliderThumbBackground, StyledTransparencySliderThumbWrapper } from './TransparencySlider.styles';
-const TransparencySlider = _ref => {
-  let {
-    onChange,
-    onStart,
-    onEnd,
-    color = 'rgba(255, 0, 0, 1)'
-  } = _ref;
+const TransparencySlider = ({
+  onChange,
+  onStart,
+  onEnd,
+  color = 'rgba(255, 0, 0, 1)'
+}) => {
   const [editedValue, setEditedValue] = useState(0);
   const [pureColor, setPureColor] = useState();
   const [previewColor, setPreviewColor] = useState();

package/lib/esm/components/transparency-slider/TransparencySlider.js.map

@@ -1 +1 @@
-{"version":3,"file":"TransparencySlider.js","names":["setRefreshScrollEnabled","React","useCallback","useEffect","useMemo","useRef","useState","hexToRgb","isValidRGBA","splitRgb","StyledTransparencySlider","StyledTransparencySliderBackground","StyledTransparencySliderInput","StyledTransparencySliderThumb","StyledTransparencySliderThumbBackground","StyledTransparencySliderThumbWrapper","TransparencySlider","_ref","onChange","onStart","onEnd","color","editedValue","setEditedValue","pureColor","setPureColor","previewColor","setPreviewColor","sliderThumbRef","sliderRef","rgb","r","g","b","a","newColor","handleInputChange","event","Number","target","value","sliderThumbPosition","current","offsetWidth","handleStart","handleEnd","createElement","ref","$color","type","min","max","onPointerDown","onPointerUp","$position","displayName"],"sources":["../../../../src/components/transparency-slider/TransparencySlider.tsx"],"sourcesContent":["import { setRefreshScrollEnabled } from 'chayns-api';\nimport React, { ChangeEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { hexToRgb, isValidRGBA, splitRgb } from '../../utils/color';\nimport {\n    StyledTransparencySlider,\n    StyledTransparencySliderBackground,\n    StyledTransparencySliderInput,\n    StyledTransparencySliderThumb,\n    StyledTransparencySliderThumbBackground,\n    StyledTransparencySliderThumbWrapper,\n} from './TransparencySlider.styles';\n\ninterface TransparencySliderProps {\n    /**\n     * The color that should be selected.\n     */\n    color?: string;\n    /**\n     * Function that will be executed when the opacity is changed.\n     */\n    onChange?: (color: string) => void;\n    /**\n     * Function that will be executed when the opacity is ending to change.\n     */\n    onEnd?: (color: string) => void;\n    /**\n     * Function that will be executed when the opacity is starting to change.\n     */\n    onStart?: (color: string) => void;\n}\n\nconst TransparencySlider = ({\n    onChange,\n    onStart,\n    onEnd,\n    color = 'rgba(255, 0, 0, 1)',\n}: TransparencySliderProps) => {\n    const [editedValue, setEditedValue] = useState(0);\n    const [pureColor, setPureColor] = useState<string>();\n    const [previewColor, setPreviewColor] = useState<string>();\n\n    const sliderThumbRef = useRef<HTMLDivElement>(null);\n    const sliderRef = useRef<HTMLInputElement>(null);\n\n    useEffect(() => {\n        if (color) {\n            let rgb;\n\n            if (isValidRGBA(color)) {\n                rgb = splitRgb(color);\n            } else {\n                rgb = hexToRgb(color);\n            }\n\n            if (!rgb) {\n                return;\n            }\n\n            const { r, g, b, a } = rgb;\n\n            const newColor = `rgba(${r}, ${g}, ${b}, ${a})`;\n\n            setPreviewColor(newColor);\n            setPureColor(`rgb(${r},${g},${b},1)`);\n            setEditedValue(100 - a * 100);\n        }\n    }, [color]);\n\n    const handleInputChange = useCallback(\n        (event: ChangeEvent<HTMLInputElement>) => {\n            const a = Number(event.target.value);\n\n            setEditedValue(a);\n\n            const rgb = splitRgb(pureColor);\n\n            if (!rgb) {\n                return;\n            }\n\n            const { r, g, b } = rgb;\n\n            const newColor = `rgba(${r}, ${g}, ${b}, ${(100 - a) / 100})`;\n\n            setPreviewColor(newColor);\n\n            if (typeof onChange === 'function') {\n                onChange(newColor);\n            }\n        },\n        [onChange, pureColor],\n    );\n\n    const sliderThumbPosition = useMemo(() => {\n        if (sliderRef.current && sliderThumbRef.current) {\n            return (\n                (editedValue / 100) *\n                (sliderRef.current.offsetWidth - sliderThumbRef.current.offsetWidth / 2)\n            );\n        }\n        return 0;\n    }, [editedValue]);\n\n    const handleStart = useCallback(() => {\n        void setRefreshScrollEnabled(false);\n\n        if (typeof onStart === 'function') {\n            const rgb = splitRgb(pureColor);\n\n            if (!rgb) {\n                return;\n            }\n\n            const { r, g, b } = rgb;\n\n            const newColor = `rgba(${r}, ${g}, ${b}, ${(100 - editedValue) / 100})`;\n\n            onStart(newColor);\n        }\n    }, [editedValue, onStart, pureColor]);\n\n    const handleEnd = useCallback(() => {\n        void setRefreshScrollEnabled(true);\n\n        if (typeof onEnd === 'function') {\n            const rgb = splitRgb(pureColor);\n\n            if (!rgb) {\n                return;\n            }\n\n            const { r, g, b } = rgb;\n\n            const newColor = `rgba(${r}, ${g}, ${b}, ${(100 - editedValue) / 100})`;\n\n            onEnd(newColor);\n        }\n    }, [editedValue, onEnd, pureColor]);\n\n    return (\n        <StyledTransparencySlider>\n            <StyledTransparencySliderInput\n                ref={sliderRef}\n                $color={pureColor}\n                type=\"range\"\n                min={0}\n                max={100}\n                value={editedValue}\n                onPointerDown={handleStart}\n                onPointerUp={handleEnd}\n                onChange={handleInputChange}\n            />\n            <StyledTransparencySliderBackground />\n            <StyledTransparencySliderThumbWrapper\n                ref={sliderThumbRef}\n                $position={sliderThumbPosition}\n            >\n                <StyledTransparencySliderThumbBackground />\n                <StyledTransparencySliderThumb $color={previewColor} />\n            </StyledTransparencySliderThumbWrapper>\n        </StyledTransparencySlider>\n    );\n};\n\nTransparencySlider.displayName = 'TransparencySlider';\n\nexport default TransparencySlider;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"TransparencySlider.js","names":["setRefreshScrollEnabled","React","useCallback","useEffect","useMemo","useRef","useState","hexToRgb","isValidRGBA","splitRgb","StyledTransparencySlider","StyledTransparencySliderBackground","StyledTransparencySliderInput","StyledTransparencySliderThumb","StyledTransparencySliderThumbBackground","StyledTransparencySliderThumbWrapper","TransparencySlider","onChange","onStart","onEnd","color","editedValue","setEditedValue","pureColor","setPureColor","previewColor","setPreviewColor","sliderThumbRef","sliderRef","rgb","r","g","b","a","newColor","handleInputChange","event","Number","target","value","sliderThumbPosition","current","offsetWidth","handleStart","handleEnd","createElement","ref","$color","type","min","max","onPointerDown","onPointerUp","$position","displayName"],"sources":["../../../../src/components/transparency-slider/TransparencySlider.tsx"],"sourcesContent":["import { setRefreshScrollEnabled } from 'chayns-api';\nimport React, { ChangeEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { hexToRgb, isValidRGBA, splitRgb } from '../../utils/color';\nimport {\n    StyledTransparencySlider,\n    StyledTransparencySliderBackground,\n    StyledTransparencySliderInput,\n    StyledTransparencySliderThumb,\n    StyledTransparencySliderThumbBackground,\n    StyledTransparencySliderThumbWrapper,\n} from './TransparencySlider.styles';\n\ninterface TransparencySliderProps {\n    /**\n     * The color that should be selected.\n     */\n    color?: string;\n    /**\n     * Function that will be executed when the opacity is changed.\n     */\n    onChange?: (color: string) => void;\n    /**\n     * Function that will be executed when the opacity is ending to change.\n     */\n    onEnd?: (color: string) => void;\n    /**\n     * Function that will be executed when the opacity is starting to change.\n     */\n    onStart?: (color: string) => void;\n}\n\nconst TransparencySlider = ({\n    onChange,\n    onStart,\n    onEnd,\n    color = 'rgba(255, 0, 0, 1)',\n}: TransparencySliderProps) => {\n    const [editedValue, setEditedValue] = useState(0);\n    const [pureColor, setPureColor] = useState<string>();\n    const [previewColor, setPreviewColor] = useState<string>();\n\n    const sliderThumbRef = useRef<HTMLDivElement>(null);\n    const sliderRef = useRef<HTMLInputElement>(null);\n\n    useEffect(() => {\n        if (color) {\n            let rgb;\n\n            if (isValidRGBA(color)) {\n                rgb = splitRgb(color);\n            } else {\n                rgb = hexToRgb(color);\n            }\n\n            if (!rgb) {\n                return;\n            }\n\n            const { r, g, b, a } = rgb;\n\n            const newColor = `rgba(${r}, ${g}, ${b}, ${a})`;\n\n            setPreviewColor(newColor);\n            setPureColor(`rgb(${r},${g},${b},1)`);\n            setEditedValue(100 - a * 100);\n        }\n    }, [color]);\n\n    const handleInputChange = useCallback(\n        (event: ChangeEvent<HTMLInputElement>) => {\n            const a = Number(event.target.value);\n\n            setEditedValue(a);\n\n            const rgb = splitRgb(pureColor);\n\n            if (!rgb) {\n                return;\n            }\n\n            const { r, g, b } = rgb;\n\n            const newColor = `rgba(${r}, ${g}, ${b}, ${(100 - a) / 100})`;\n\n            setPreviewColor(newColor);\n\n            if (typeof onChange === 'function') {\n                onChange(newColor);\n            }\n        },\n        [onChange, pureColor],\n    );\n\n    const sliderThumbPosition = useMemo(() => {\n        if (sliderRef.current && sliderThumbRef.current) {\n            return (\n                (editedValue / 100) *\n                (sliderRef.current.offsetWidth - sliderThumbRef.current.offsetWidth / 2)\n            );\n        }\n        return 0;\n    }, [editedValue]);\n\n    const handleStart = useCallback(() => {\n        void setRefreshScrollEnabled(false);\n\n        if (typeof onStart === 'function') {\n            const rgb = splitRgb(pureColor);\n\n            if (!rgb) {\n                return;\n            }\n\n            const { r, g, b } = rgb;\n\n            const newColor = `rgba(${r}, ${g}, ${b}, ${(100 - editedValue) / 100})`;\n\n            onStart(newColor);\n        }\n    }, [editedValue, onStart, pureColor]);\n\n    const handleEnd = useCallback(() => {\n        void setRefreshScrollEnabled(true);\n\n        if (typeof onEnd === 'function') {\n            const rgb = splitRgb(pureColor);\n\n            if (!rgb) {\n                return;\n            }\n\n            const { r, g, b } = rgb;\n\n            const newColor = `rgba(${r}, ${g}, ${b}, ${(100 - editedValue) / 100})`;\n\n            onEnd(newColor);\n        }\n    }, [editedValue, onEnd, pureColor]);\n\n    return (\n        <StyledTransparencySlider>\n            <StyledTransparencySliderInput\n                ref={sliderRef}\n                $color={pureColor}\n                type=\"range\"\n                min={0}\n                max={100}\n                value={editedValue}\n                onPointerDown={handleStart}\n                onPointerUp={handleEnd}\n                onChange={handleInputChange}\n            />\n            <StyledTransparencySliderBackground />\n            <StyledTransparencySliderThumbWrapper\n                ref={sliderThumbRef}\n                $position={sliderThumbPosition}\n            >\n                <StyledTransparencySliderThumbBackground />\n                <StyledTransparencySliderThumb $color={previewColor} />\n            </StyledTransparencySliderThumbWrapper>\n        </StyledTransparencySlider>\n    );\n};\n\nTransparencySlider.displayName = 'TransparencySlider';\n\nexport default TransparencySlider;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/transparency-slider/TransparencySlider.styles.js

@@ -12,9 +12,9 @@ export const StyledTransparencySlider = styled.div`
 export const StyledTransparencySliderBackground = styled.div`
     height: 10px;
     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,
@@ -27,16 +27,13 @@ export const StyledTransparencySliderBackground = styled.div`
     position: absolute;
     width: calc(100% - 10px);
 `;
-export const StyledTransparencySliderInput = styled.input.attrs(_ref => {
-  let {
-    $color
-  } = _ref;
-  return {
-    style: {
-      background: `linear-gradient(90deg, ${$color ?? ''}, transparent)`
-    }
-  };
-})`
+export const StyledTransparencySliderInput = styled.input.attrs(({
+  $color
+}) => ({
+  style: {
+    background: `linear-gradient(90deg, ${$color ?? ''}, transparent)`
+  }
+}))`
     width: calc(100% - 10px);
     border-radius: 100px;
     -webkit-appearance: none;
@@ -67,16 +64,13 @@ export const StyledTransparencySliderInput = styled.input.attrs(_ref => {
         border-radius: 50%;
     }
 `;
-export const StyledTransparencySliderThumbWrapper = styled.div.attrs(_ref2 => {
-  let {
-    $position
-  } = _ref2;
-  return {
-    style: {
-      left: $position
-    }
-  };
-})`
+export const StyledTransparencySliderThumbWrapper = styled.div.attrs(({
+  $position
+}) => ({
+  style: {
+    left: $position
+  }
+}))`
     position: absolute;
     min-width: 20px;
     height: 20px;
@@ -95,9 +89,9 @@ export const StyledTransparencySliderThumbWrapper = styled.div.attrs(_ref2 => {
 export const StyledTransparencySliderThumbBackground = styled.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,
@@ -108,16 +102,13 @@ export const StyledTransparencySliderThumbBackground = styled.div`
     height: 100%;
     width: 100%;
 `;
-export const StyledTransparencySliderThumb = styled.div.attrs(_ref3 => {
-  let {
-    $color
-  } = _ref3;
-  return {
-    style: {
-      backgroundColor: $color
-    }
-  };
-})`
+export const StyledTransparencySliderThumb = styled.div.attrs(({
+  $color
+}) => ({
+  style: {
+    backgroundColor: $color
+  }
+}))`
     height: 100%;
     width: 100%;
     position: absolute;

package/lib/esm/components/transparency-slider/TransparencySlider.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"TransparencySlider.styles.js","names":["styled","StyledTransparencySlider","div","StyledTransparencySliderBackground","StyledTransparencySliderInput","input","attrs","_ref","$color","style","background","StyledTransparencySliderThumbWrapper","_ref2","$position","left","StyledTransparencySliderThumbBackground","StyledTransparencySliderThumb","_ref3","backgroundColor"],"sources":["../../../../src/components/transparency-slider/TransparencySlider.styles.ts"],"sourcesContent":["import type { WithTheme } from '@chayns-components/core';\nimport type { CSSProperties } from 'react';\nimport styled from 'styled-components';\n\nexport const StyledTransparencySlider = styled.div`\n    width: 100%;\n    height: 30px;\n    cursor: pointer;\n    position: relative;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    touch-action: none;\n`;\n\nexport const StyledTransparencySliderBackground = styled.div`\n    height: 10px;\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    border-radius: 100px;\n    background-size: 8px 8px;\n    content: '';\n    position: absolute;\n    width: calc(100% - 10px);\n`;\n\ntype StyledTransparencySliderInputProps = WithTheme<{ $color?: string }>;\n\nexport const StyledTransparencySliderInput = styled.input.attrs<StyledTransparencySliderInputProps>(\n    ({ $color }) => ({\n        style: {\n            background: `linear-gradient(90deg, ${$color ?? ''}, transparent)`,\n        },\n    }),\n)`\n    width: calc(100% - 10px);\n    border-radius: 100px;\n    -webkit-appearance: none;\n    height: 10px;\n    outline: none;\n    opacity: 0.7;\n    -webkit-transition: 0.2s;\n    transition: opacity 0.2s;\n    z-index: 4;\n\n    // Slider thumb for chrome\n    &::-webkit-slider-thumb {\n        -webkit-appearance: none;\n        appearance: none;\n        opacity: 0;\n        width: 20px;\n        height: 20px;\n        cursor: pointer;\n        border-radius: 50%;\n    }\n\n    // slider thumb for firefox\n    &::-moz-range-thumb {\n        width: 20px;\n        height: 20px;\n        opacity: 0;\n        cursor: pointer;\n        border-radius: 50%;\n    }\n`;\n\ntype StyledTransparencySliderThumbWrapperProps = WithTheme<{\n    $position: number;\n}>;\n\nexport const StyledTransparencySliderThumbWrapper = styled.div.attrs<StyledTransparencySliderThumbWrapperProps>(\n    ({ $position }) => ({\n        style: {\n            left: $position,\n        },\n    }),\n)`\n    position: absolute;\n    min-width: 20px;\n    height: 20px;\n    cursor: pointer;\n    border-radius: 100px;\n    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);\n    pointer-events: none;\n    z-index: 3;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    overflow: hidden;\n    padding: 0 8px;\n    white-space: nowrap;\n`;\n\nexport const StyledTransparencySliderThumbBackground = 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\ntype StyledTransparencySliderThumbProps = WithTheme<{\n    $color: CSSProperties['color'];\n}>;\n\nexport const StyledTransparencySliderThumb = styled.div.attrs<StyledTransparencySliderThumbProps>(\n    ({ $color }) => ({\n        style: {\n            backgroundColor: $color,\n        },\n    }),\n)`\n    height: 100%;\n    width: 100%;\n    position: absolute;\n`;\n"],"mappings":"AAEA,OAAOA,MAAM,MAAM,mBAAmB;AAEtC,OAAO,MAAMC,wBAAwB,GAAGD,MAAM,CAACE,GAAG;AAClD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMC,kCAAkC,GAAGH,MAAM,CAACE,GAAG;AAC5D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAME,6BAA6B,GAAGJ,MAAM,CAACK,KAAK,CAACC,KAAK,CAC3DC,IAAA;EAAA,IAAC;IAAEC;EAAO,CAAC,GAAAD,IAAA;EAAA,OAAM;IACbE,KAAK,EAAE;MACHC,UAAU,EAAE,0BAA0BF,MAAM,IAAI,EAAE;IACtD;EACJ,CAAC;AAAA,CACL,CAAC;AACD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAMD,OAAO,MAAMG,oCAAoC,GAAGX,MAAM,CAACE,GAAG,CAACI,KAAK,CAChEM,KAAA;EAAA,IAAC;IAAEC;EAAU,CAAC,GAAAD,KAAA;EAAA,OAAM;IAChBH,KAAK,EAAE;MACHK,IAAI,EAAED;IACV;EACJ,CAAC;AAAA,CACL,CAAC;AACD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAME,uCAAuC,GAAGf,MAAM,CAACE,GAAG;AACjE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAMD,OAAO,MAAMc,6BAA6B,GAAGhB,MAAM,CAACE,GAAG,CAACI,KAAK,CACzDW,KAAA;EAAA,IAAC;IAAET;EAAO,CAAC,GAAAS,KAAA;EAAA,OAAM;IACbR,KAAK,EAAE;MACHS,eAAe,EAAEV;IACrB;EACJ,CAAC;AAAA,CACL,CAAC;AACD;AACA;AACA;AACA,CAAC","ignoreList":[]}
+{"version":3,"file":"TransparencySlider.styles.js","names":["styled","StyledTransparencySlider","div","StyledTransparencySliderBackground","StyledTransparencySliderInput","input","attrs","$color","style","background","StyledTransparencySliderThumbWrapper","$position","left","StyledTransparencySliderThumbBackground","StyledTransparencySliderThumb","backgroundColor"],"sources":["../../../../src/components/transparency-slider/TransparencySlider.styles.ts"],"sourcesContent":["import type { WithTheme } from '@chayns-components/core';\nimport type { CSSProperties } from 'react';\nimport styled from 'styled-components';\n\nexport const StyledTransparencySlider = styled.div`\n    width: 100%;\n    height: 30px;\n    cursor: pointer;\n    position: relative;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    touch-action: none;\n`;\n\nexport const StyledTransparencySliderBackground = styled.div`\n    height: 10px;\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    border-radius: 100px;\n    background-size: 8px 8px;\n    content: '';\n    position: absolute;\n    width: calc(100% - 10px);\n`;\n\ntype StyledTransparencySliderInputProps = WithTheme<{ $color?: string }>;\n\nexport const StyledTransparencySliderInput = styled.input.attrs<StyledTransparencySliderInputProps>(\n    ({ $color }) => ({\n        style: {\n            background: `linear-gradient(90deg, ${$color ?? ''}, transparent)`,\n        },\n    }),\n)`\n    width: calc(100% - 10px);\n    border-radius: 100px;\n    -webkit-appearance: none;\n    height: 10px;\n    outline: none;\n    opacity: 0.7;\n    -webkit-transition: 0.2s;\n    transition: opacity 0.2s;\n    z-index: 4;\n\n    // Slider thumb for chrome\n    &::-webkit-slider-thumb {\n        -webkit-appearance: none;\n        appearance: none;\n        opacity: 0;\n        width: 20px;\n        height: 20px;\n        cursor: pointer;\n        border-radius: 50%;\n    }\n\n    // slider thumb for firefox\n    &::-moz-range-thumb {\n        width: 20px;\n        height: 20px;\n        opacity: 0;\n        cursor: pointer;\n        border-radius: 50%;\n    }\n`;\n\ntype StyledTransparencySliderThumbWrapperProps = WithTheme<{\n    $position: number;\n}>;\n\nexport const StyledTransparencySliderThumbWrapper = styled.div.attrs<StyledTransparencySliderThumbWrapperProps>(\n    ({ $position }) => ({\n        style: {\n            left: $position,\n        },\n    }),\n)`\n    position: absolute;\n    min-width: 20px;\n    height: 20px;\n    cursor: pointer;\n    border-radius: 100px;\n    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);\n    pointer-events: none;\n    z-index: 3;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    overflow: hidden;\n    padding: 0 8px;\n    white-space: nowrap;\n`;\n\nexport const StyledTransparencySliderThumbBackground = 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\ntype StyledTransparencySliderThumbProps = WithTheme<{\n    $color: CSSProperties['color'];\n}>;\n\nexport const StyledTransparencySliderThumb = styled.div.attrs<StyledTransparencySliderThumbProps>(\n    ({ $color }) => ({\n        style: {\n            backgroundColor: $color,\n        },\n    }),\n)`\n    height: 100%;\n    width: 100%;\n    position: absolute;\n`;\n"],"mappings":"AAEA,OAAOA,MAAM,MAAM,mBAAmB;AAEtC,OAAO,MAAMC,wBAAwB,GAAGD,MAAM,CAACE,GAAG;AAClD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMC,kCAAkC,GAAGH,MAAM,CAACE,GAAG;AAC5D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAME,6BAA6B,GAAGJ,MAAM,CAACK,KAAK,CAACC,KAAK,CAC3D,CAAC;EAAEC;AAAO,CAAC,MAAM;EACbC,KAAK,EAAE;IACHC,UAAU,EAAE,0BAA0BF,MAAM,IAAI,EAAE;EACtD;AACJ,CAAC,CACL,CAAC;AACD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAMD,OAAO,MAAMG,oCAAoC,GAAGV,MAAM,CAACE,GAAG,CAACI,KAAK,CAChE,CAAC;EAAEK;AAAU,CAAC,MAAM;EAChBH,KAAK,EAAE;IACHI,IAAI,EAAED;EACV;AACJ,CAAC,CACL,CAAC;AACD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAME,uCAAuC,GAAGb,MAAM,CAACE,GAAG;AACjE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAMD,OAAO,MAAMY,6BAA6B,GAAGd,MAAM,CAACE,GAAG,CAACI,KAAK,CACzD,CAAC;EAAEC;AAAO,CAAC,MAAM;EACbC,KAAK,EAAE;IACHO,eAAe,EAAER;EACrB;AACJ,CAAC,CACL,CAAC;AACD;AACA;AACA;AACA,CAAC","ignoreList":[]}

package/lib/esm/constants/color.js

@@ -39,28 +39,31 @@ export const PRESETCOLORS = [{
   color: 'rgba(255,235,59,1)'
 }, {
   id: '13',
-  color: 'rgba(0,150,136,1)'
+  color: 'rgba(139,195,74,1)'
 }, {
   id: '14',
-  color: 'rgba(121,85,72,1)'
+  color: 'rgba(76,175,80,1)'
 }, {
   id: '15',
-  color: 'rgba(139,195,74,1)'
+  color: 'rgba(0, 150, 136,1)'
 }, {
   id: '16',
-  color: 'rgba(76,175,80,1)'
+  color: 'rgba(15,109,126,1)'
 }, {
   id: '17',
-  color: 'rgba(156,39,176,1)'
+  color: 'rgba(3,169,244,1)'
 }, {
   id: '18',
-  color: 'rgba(63,81,181,1)'
+  color: 'rgba(0,94,184,1)'
 }, {
   id: '19',
-  color: 'rgba(3,169,244,1)'
+  color: 'rgba(63,81,181,1)'
 }, {
   id: '20',
-  color: 'rgba(0,94,184,1)'
+  color: 'rgba(156,39,176,1)'
+}, {
+  id: '21',
+  color: 'rgba(121,85,72,1)'
 }];
 export const ITEM_STORAGE_URL = 'https://cube.tobit.cloud/item-storage/api/v1.0';
 //# sourceMappingURL=color.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"color.js","names":["PRESETCOLORS","id","color","ITEM_STORAGE_URL"],"sources":["../../../src/constants/color.ts"],"sourcesContent":["import type { IPresetColor } from '../types/colorPicker';\n\nexport const PRESETCOLORS: IPresetColor[] = [\n    { id: '0', color: 'rgba(0,0,0,1)' },\n    { id: '1', color: 'rgba(67,67,67,1)' },\n    { id: '2', color: 'rgba(102,102,102,1)' },\n    { id: '3', color: 'rgba(153,153,153,1)' },\n    { id: '4', color: 'rgba(183,183,183,1)' },\n    { id: '5', color: 'rgba(204,204,204,1)' },\n    { id: '6', color: 'rgba(217,217,217,1)' },\n    { id: '7', color: 'rgba(239,239,239,1)' },\n    { id: '8', color: 'rgba(243,243,243,1)' },\n    { id: '9', color: 'rgba(255,255,255,1)' },\n    { id: '10', color: 'rgba(244,67,54,1)' },\n    { id: '11', color: 'rgba(255,152,0,1)' },\n    { id: '12', color: 'rgba(255,235,59,1)' },\n    { id: '13', color: 'rgba(0,150,136,1)' },\n    { id: '14', color: 'rgba(121,85,72,1)' },\n    { id: '15', color: 'rgba(139,195,74,1)' },\n    { id: '16', color: 'rgba(76,175,80,1)' },\n    { id: '17', color: 'rgba(156,39,176,1)' },\n    { id: '18', color: 'rgba(63,81,181,1)' },\n    { id: '19', color: 'rgba(3,169,244,1)' },\n    { id: '20', color: 'rgba(0,94,184,1)' },\n];\n\nexport const ITEM_STORAGE_URL = 'https://cube.tobit.cloud/item-storage/api/v1.0';\n"],"mappings":"AAEA,OAAO,MAAMA,YAA4B,GAAG,CACxC;EAAEC,EAAE,EAAE,GAAG;EAAEC,KAAK,EAAE;AAAgB,CAAC,EACnC;EAAED,EAAE,EAAE,GAAG;EAAEC,KAAK,EAAE;AAAmB,CAAC,EACtC;EAAED,EAAE,EAAE,GAAG;EAAEC,KAAK,EAAE;AAAsB,CAAC,EACzC;EAAED,EAAE,EAAE,GAAG;EAAEC,KAAK,EAAE;AAAsB,CAAC,EACzC;EAAED,EAAE,EAAE,GAAG;EAAEC,KAAK,EAAE;AAAsB,CAAC,EACzC;EAAED,EAAE,EAAE,GAAG;EAAEC,KAAK,EAAE;AAAsB,CAAC,EACzC;EAAED,EAAE,EAAE,GAAG;EAAEC,KAAK,EAAE;AAAsB,CAAC,EACzC;EAAED,EAAE,EAAE,GAAG;EAAEC,KAAK,EAAE;AAAsB,CAAC,EACzC;EAAED,EAAE,EAAE,GAAG;EAAEC,KAAK,EAAE;AAAsB,CAAC,EACzC;EAAED,EAAE,EAAE,GAAG;EAAEC,KAAK,EAAE;AAAsB,CAAC,EACzC;EAAED,EAAE,EAAE,IAAI;EAAEC,KAAK,EAAE;AAAoB,CAAC,EACxC;EAAED,EAAE,EAAE,IAAI;EAAEC,KAAK,EAAE;AAAoB,CAAC,EACxC;EAAED,EAAE,EAAE,IAAI;EAAEC,KAAK,EAAE;AAAqB,CAAC,EACzC;EAAED,EAAE,EAAE,IAAI;EAAEC,KAAK,EAAE;AAAoB,CAAC,EACxC;EAAED,EAAE,EAAE,IAAI;EAAEC,KAAK,EAAE;AAAoB,CAAC,EACxC;EAAED,EAAE,EAAE,IAAI;EAAEC,KAAK,EAAE;AAAqB,CAAC,EACzC;EAAED,EAAE,EAAE,IAAI;EAAEC,KAAK,EAAE;AAAoB,CAAC,EACxC;EAAED,EAAE,EAAE,IAAI;EAAEC,KAAK,EAAE;AAAqB,CAAC,EACzC;EAAED,EAAE,EAAE,IAAI;EAAEC,KAAK,EAAE;AAAoB,CAAC,EACxC;EAAED,EAAE,EAAE,IAAI;EAAEC,KAAK,EAAE;AAAoB,CAAC,EACxC;EAAED,EAAE,EAAE,IAAI;EAAEC,KAAK,EAAE;AAAmB,CAAC,CAC1C;AAED,OAAO,MAAMC,gBAAgB,GAAG,gDAAgD","ignoreList":[]}
+{"version":3,"file":"color.js","names":["PRESETCOLORS","id","color","ITEM_STORAGE_URL"],"sources":["../../../src/constants/color.ts"],"sourcesContent":["import type { IPresetColor } from '../types/colorPicker';\n\nexport const PRESETCOLORS: IPresetColor[] = [\n    { id: '0', color: 'rgba(0,0,0,1)' },\n    { id: '1', color: 'rgba(67,67,67,1)' },\n    { id: '2', color: 'rgba(102,102,102,1)' },\n    { id: '3', color: 'rgba(153,153,153,1)' },\n    { id: '4', color: 'rgba(183,183,183,1)' },\n    { id: '5', color: 'rgba(204,204,204,1)' },\n    { id: '6', color: 'rgba(217,217,217,1)' },\n    { id: '7', color: 'rgba(239,239,239,1)' },\n    { id: '8', color: 'rgba(243,243,243,1)' },\n    { id: '9', color: 'rgba(255,255,255,1)' },\n    { id: '10', color: 'rgba(244,67,54,1)' },\n    { id: '11', color: 'rgba(255,152,0,1)' },\n    { id: '12', color: 'rgba(255,235,59,1)' },\n    { id: '13', color: 'rgba(139,195,74,1)' },\n    { id: '14', color: 'rgba(76,175,80,1)' },\n    { id: '15', color: 'rgba(0, 150, 136,1)' },\n    { id: '16', color: 'rgba(15,109,126,1)' },\n    { id: '17', color: 'rgba(3,169,244,1)' },\n    { id: '18', color: 'rgba(0,94,184,1)' },\n    { id: '19', color: 'rgba(63,81,181,1)' },\n    { id: '20', color: 'rgba(156,39,176,1)' },\n    { id: '21', color: 'rgba(121,85,72,1)' },\n];\n\nexport const ITEM_STORAGE_URL = 'https://cube.tobit.cloud/item-storage/api/v1.0';\n"],"mappings":"AAEA,OAAO,MAAMA,YAA4B,GAAG,CACxC;EAAEC,EAAE,EAAE,GAAG;EAAEC,KAAK,EAAE;AAAgB,CAAC,EACnC;EAAED,EAAE,EAAE,GAAG;EAAEC,KAAK,EAAE;AAAmB,CAAC,EACtC;EAAED,EAAE,EAAE,GAAG;EAAEC,KAAK,EAAE;AAAsB,CAAC,EACzC;EAAED,EAAE,EAAE,GAAG;EAAEC,KAAK,EAAE;AAAsB,CAAC,EACzC;EAAED,EAAE,EAAE,GAAG;EAAEC,KAAK,EAAE;AAAsB,CAAC,EACzC;EAAED,EAAE,EAAE,GAAG;EAAEC,KAAK,EAAE;AAAsB,CAAC,EACzC;EAAED,EAAE,EAAE,GAAG;EAAEC,KAAK,EAAE;AAAsB,CAAC,EACzC;EAAED,EAAE,EAAE,GAAG;EAAEC,KAAK,EAAE;AAAsB,CAAC,EACzC;EAAED,EAAE,EAAE,GAAG;EAAEC,KAAK,EAAE;AAAsB,CAAC,EACzC;EAAED,EAAE,EAAE,GAAG;EAAEC,KAAK,EAAE;AAAsB,CAAC,EACzC;EAAED,EAAE,EAAE,IAAI;EAAEC,KAAK,EAAE;AAAoB,CAAC,EACxC;EAAED,EAAE,EAAE,IAAI;EAAEC,KAAK,EAAE;AAAoB,CAAC,EACxC;EAAED,EAAE,EAAE,IAAI;EAAEC,KAAK,EAAE;AAAqB,CAAC,EACzC;EAAED,EAAE,EAAE,IAAI;EAAEC,KAAK,EAAE;AAAqB,CAAC,EACzC;EAAED,EAAE,EAAE,IAAI;EAAEC,KAAK,EAAE;AAAoB,CAAC,EACxC;EAAED,EAAE,EAAE,IAAI;EAAEC,KAAK,EAAE;AAAsB,CAAC,EAC1C;EAAED,EAAE,EAAE,IAAI;EAAEC,KAAK,EAAE;AAAqB,CAAC,EACzC;EAAED,EAAE,EAAE,IAAI;EAAEC,KAAK,EAAE;AAAoB,CAAC,EACxC;EAAED,EAAE,EAAE,IAAI;EAAEC,KAAK,EAAE;AAAmB,CAAC,EACvC;EAAED,EAAE,EAAE,IAAI;EAAEC,KAAK,EAAE;AAAoB,CAAC,EACxC;EAAED,EAAE,EAAE,IAAI;EAAEC,KAAK,EAAE;AAAqB,CAAC,EACzC;EAAED,EAAE,EAAE,IAAI;EAAEC,KAAK,EAAE;AAAoB,CAAC,CAC3C;AAED,OAAO,MAAMC,gBAAgB,GAAG,gDAAgD","ignoreList":[]}

package/lib/esm/index.js

@@ -2,5 +2,5 @@ export { default as ColorPickerPopup } from './components/color-picker-popup/Col
 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 { hexToRgb, rgbToHex } from './utils/color';
+export { hexToRgb, rgbToHex, splitRgb } from './utils/color';
 //# sourceMappingURL=index.js.map

package/lib/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["default","ColorPickerPopup","ColorPicker","HueSlider","TransparencySlider","hexToRgb","rgbToHex"],"sources":["../../src/index.ts"],"sourcesContent":["export { default as ColorPickerPopup } from './components/color-picker-popup/ColorPickerPopup';\nexport { default as ColorPicker } from './components/color-picker/ColorPicker';\nexport { default as HueSlider } from './components/hue-slider/HueSlider';\nexport { default as TransparencySlider } from './components/transparency-slider/TransparencySlider';\nexport type { IPresetColor as PresetColor, RGB, RGBA } from './types/colorPicker';\nexport { hexToRgb, rgbToHex } from './utils/color';\n"],"mappings":"AAAA,SAASA,OAAO,IAAIC,gBAAgB,QAAQ,kDAAkD;AAC9F,SAASD,OAAO,IAAIE,WAAW,QAAQ,uCAAuC;AAC9E,SAASF,OAAO,IAAIG,SAAS,QAAQ,mCAAmC;AACxE,SAASH,OAAO,IAAII,kBAAkB,QAAQ,qDAAqD;AAEnG,SAASC,QAAQ,EAAEC,QAAQ,QAAQ,eAAe","ignoreList":[]}
+{"version":3,"file":"index.js","names":["default","ColorPickerPopup","ColorPicker","HueSlider","TransparencySlider","hexToRgb","rgbToHex","splitRgb"],"sources":["../../src/index.ts"],"sourcesContent":["export { default as ColorPickerPopup } from './components/color-picker-popup/ColorPickerPopup';\nexport { default as ColorPicker } from './components/color-picker/ColorPicker';\nexport { default as HueSlider } from './components/hue-slider/HueSlider';\nexport { default as TransparencySlider } from './components/transparency-slider/TransparencySlider';\nexport type { IPresetColor as PresetColor, RGB, RGBA } from './types/colorPicker';\nexport { hexToRgb, rgbToHex, splitRgb } from './utils/color';\n"],"mappings":"AAAA,SAASA,OAAO,IAAIC,gBAAgB,QAAQ,kDAAkD;AAC9F,SAASD,OAAO,IAAIE,WAAW,QAAQ,uCAAuC;AAC9E,SAASF,OAAO,IAAIG,SAAS,QAAQ,mCAAmC;AACxE,SAASH,OAAO,IAAII,kBAAkB,QAAQ,qDAAqD;AAEnG,SAASC,QAAQ,EAAEC,QAAQ,EAAEC,QAAQ,QAAQ,eAAe","ignoreList":[]}

package/lib/esm/types/colorPicker.js

@@ -1,2 +1,2 @@
-
+export {};
 //# sourceMappingURL=colorPicker.js.map