@dreamcommerce/aurora 0.3.4-99 → 0.3.5

package/build/esm/src/components/buttons_group/index.js

@@ -1,18 +0,0 @@
-import React from 'react';
-import classnames from 'classnames';
-import cssClasses from '../../css/buttons_group/main.module.less.js';
-import { cssButtonsGroup, cssButtonsGroupHCenter, cssButtonsGroupHRight, cssButtonsGroupReverseOrder } from './css_classes.js';
-
-var ButtonsGroup = function (_a) {
-    var _b;
-    var _c = _a.align, align = _c === void 0 ? 'right' : _c, isOrderReversed = _a.isOrderReversed, children = _a.children;
-    var classNames = classnames(cssClasses[cssButtonsGroup], (_b = {},
-        _b[cssClasses[cssButtonsGroupHCenter]] = align === 'center',
-        _b[cssClasses[cssButtonsGroupHRight]] = align === 'right',
-        _b[cssClasses[cssButtonsGroupReverseOrder]] = isOrderReversed,
-        _b));
-    return React.createElement("div", { className: classNames }, children);
-};
-
-export default ButtonsGroup;
-//# sourceMappingURL=index.js.map

package/build/esm/src/components/buttons_group/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sources":["../../../../../src/components/buttons_group/index.tsx"],"sourcesContent":["import React from 'react';\n\nimport classnames from 'classnames';\nimport cssClasses from '@css/buttons_group/main.module.less';\n\nimport { IButtonsGroupProps } from './types';\nimport { cssButtonsGroup, cssButtonsGroupHCenter, cssButtonsGroupHRight, cssButtonsGroupReverseOrder } from './css_classes';\n\nconst ButtonsGroup: React.FC<IButtonsGroupProps> = ({ align = 'right', isOrderReversed, children }): JSX.Element => {\n    const classNames = classnames(cssClasses[cssButtonsGroup], {\n        [cssClasses[cssButtonsGroupHCenter]]: align === 'center',\n        [cssClasses[cssButtonsGroupHRight]]: align === 'right',\n        [cssClasses[cssButtonsGroupReverseOrder]]: isOrderReversed\n    });\n\n    return <div className={classNames}>{children}</div>;\n};\n\nexport default ButtonsGroup;\n"],"names":[],"mappings":";;;;;IAQM,YAAY,GAAiC,UAAC,EAA8C;;QAA5C,aAAe,EAAf,oCAAe,EAAE,oCAAe,EAAE,sBAAQ;IAC5F,IAAM,UAAU,GAAG,UAAU,CAAC,UAAU,CAAC,eAAe,CAAC;QACrD,GAAC,UAAU,CAAC,sBAAsB,CAAC,IAAG,KAAK,KAAK,QAAQ;QACxD,GAAC,UAAU,CAAC,qBAAqB,CAAC,IAAG,KAAK,KAAK,OAAO;QACtD,GAAC,UAAU,CAAC,2BAA2B,CAAC,IAAG,eAAe;YAC5D,CAAC;IAEH,OAAO,6BAAK,SAAS,EAAE,UAAU,IAAG,QAAQ,CAAO,CAAC;AACxD;;;;"}

package/build/esm/src/components/buttons_group/types.d.ts

@@ -1,6 +0,0 @@
-import { ReactNode } from 'react';
-export interface IButtonsGroupProps {
-    align?: 'left' | 'center' | 'right';
-    isOrderReversed?: boolean;
-    children: ReactNode;
-}

package/build/esm/src/components/buttons_group/types.js

@@ -1,2 +0,0 @@
-import 'react';
-//# sourceMappingURL=types.js.map

package/build/esm/src/components/buttons_group/types.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../../src/components/buttons_group/types.ts"],"names":[],"mappings":"AAAA,OAA0B,OAAO,CAAC"}

package/build/esm/src/components/color_picker/components/buttons.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-import { IColorPickerButtonsProps } from '../types';
-declare const ColorPickerButtons: React.FC<IColorPickerButtonsProps>;
-export default ColorPickerButtons;

package/build/esm/src/components/color_picker/components/buttons.js

@@ -1,39 +0,0 @@
-import React, { useContext } from 'react';
-import { useTranslation } from '../../../../node_modules/react-i18next/dist/es/useTranslation.js';
-import { __assign } from '../../../../_virtual/_tslib.js';
-import { useScreenDetect } from '../../../hooks/use_screen_detect.js';
-import { DropdownContext } from '../../dropdown/context/index.js';
-import Button from '../../button/index.js';
-import ButtonsGroup from '../../buttons_group/index.js';
-import styles from '../../../css/color_picker/main.module.less.js';
-import { cssColorPickerButtonsGroup } from '../css_classes.js';
-
-var ColorPickerButtons = function (_a) {
-    var restoreInitialColor = _a.restoreInitialColor;
-    var t = useTranslation()[0];
-    var toggleDropdown = useContext(DropdownContext).toggleDropdown;
-    var screenSize = useScreenDetect();
-    var onCancel = function () {
-        restoreInitialColor();
-        toggleDropdown === null || toggleDropdown === void 0 ? void 0 : toggleDropdown();
-    };
-    var onChoose = function () {
-        toggleDropdown === null || toggleDropdown === void 0 ? void 0 : toggleDropdown();
-    };
-    var primaryButtonProps = {
-        variant: screenSize === 'xs' ? undefined : 'link',
-        size: screenSize === 'xs' ? 'small' : undefined,
-    };
-    var secondaryButtonProps = {
-        variant: screenSize === 'xs' ? 'outline' : 'link',
-        size: screenSize === 'xs' ? 'small' : undefined,
-        color: screenSize === 'xs' ? undefined : 'secondary',
-    };
-    return (React.createElement("div", { className: styles[cssColorPickerButtonsGroup] },
-        React.createElement(ButtonsGroup, null,
-            React.createElement(Button, __assign({ as: "button" }, secondaryButtonProps, { onClick: onCancel }), t('cancel')),
-            React.createElement(Button, __assign({ as: "button" }, primaryButtonProps, { onClick: onChoose }), t('choose')))));
-};
-
-export default ColorPickerButtons;
-//# sourceMappingURL=buttons.js.map

package/build/esm/src/components/color_picker/components/buttons.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"buttons.js","sources":["../../../../../../src/components/color_picker/components/buttons.tsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { IDropdownContext } from '@components/dropdown/context/types';\nimport { DropdownContext } from '@components/dropdown/context';\nimport { IColorPickerButtonsProps } from '../types';\nimport Button from '@components/button';\nimport ButtonsGroup from '@components/buttons_group';\nimport { useScreenDetect } from '@hooks/use_screen_detect';\nimport styles from '@css/color_picker/main.module.less';\nimport { cssColorPickerButtonsGroup } from '../css_classes';\n\nconst ColorPickerButtons: React.FC<IColorPickerButtonsProps> = ({ restoreInitialColor }) => {\n    const [t] = useTranslation();\n    const { toggleDropdown }: IDropdownContext = useContext(DropdownContext);\n    const screenSize = useScreenDetect();\n\n    const onCancel = () => {\n        restoreInitialColor();\n        toggleDropdown?.();\n    };\n\n    const onChoose = () => {\n        toggleDropdown?.();\n    };\n\n    const primaryButtonProps = {\n        variant: screenSize === 'xs' ? undefined : ('link' as const),\n        size: screenSize === 'xs' ? ('small' as const) : undefined,\n    };\n\n    const secondaryButtonProps = {\n        variant: screenSize === 'xs' ? ('outline' as const) : ('link' as const),\n        size: screenSize === 'xs' ? ('small' as const) : undefined,\n        color: screenSize === 'xs' ? undefined : ('secondary' as const),\n    };\n\n    return (\n        <div className={styles[cssColorPickerButtonsGroup]}>\n            <ButtonsGroup>\n                <Button as=\"button\" {...secondaryButtonProps} onClick={onCancel}>\n                    {t('cancel')}\n                </Button>\n\n                <Button as=\"button\" {...primaryButtonProps} onClick={onChoose}>\n                    {t('choose')}\n                </Button>\n            </ButtonsGroup>\n        </div>\n    );\n};\n\nexport default ColorPickerButtons;\n"],"names":[],"mappings":";;;;;;;;;;IAWM,kBAAkB,GAAuC,UAAC,EAAuB;QAArB,4CAAmB;IAC1E,IAAA,uBAAC,CAAqB;IACrB,IAAA,2DAAc,CAAmD;IACzE,IAAM,UAAU,GAAG,eAAe,EAAE,CAAC;IAErC,IAAM,QAAQ,GAAG;QACb,mBAAmB,EAAE,CAAC;QACtB,cAAc,aAAd,cAAc,uBAAd,cAAc,GAAK;KACtB,CAAC;IAEF,IAAM,QAAQ,GAAG;QACb,cAAc,aAAd,cAAc,uBAAd,cAAc,GAAK;KACtB,CAAC;IAEF,IAAM,kBAAkB,GAAG;QACvB,OAAO,EAAE,UAAU,KAAK,IAAI,GAAG,SAAS,GAAI,MAAgB;QAC5D,IAAI,EAAE,UAAU,KAAK,IAAI,GAAI,OAAiB,GAAG,SAAS;KAC7D,CAAC;IAEF,IAAM,oBAAoB,GAAG;QACzB,OAAO,EAAE,UAAU,KAAK,IAAI,GAAI,SAAmB,GAAI,MAAgB;QACvE,IAAI,EAAE,UAAU,KAAK,IAAI,GAAI,OAAiB,GAAG,SAAS;QAC1D,KAAK,EAAE,UAAU,KAAK,IAAI,GAAG,SAAS,GAAI,WAAqB;KAClE,CAAC;IAEF,QACI,6BAAK,SAAS,EAAE,MAAM,CAAC,0BAA0B,CAAC;QAC9C,oBAAC,YAAY;YACT,oBAAC,MAAM,aAAC,EAAE,EAAC,QAAQ,IAAK,oBAAoB,IAAE,OAAO,EAAE,QAAQ,KAC1D,CAAC,CAAC,QAAQ,CAAC,CACP;YAET,oBAAC,MAAM,aAAC,EAAE,EAAC,QAAQ,IAAK,kBAAkB,IAAE,OAAO,EAAE,QAAQ,KACxD,CAAC,CAAC,QAAQ,CAAC,CACP,CACE,CACb,EACR;AACN;;;;"}

package/build/esm/src/components/color_picker/components/hue_picker.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-import { IHuePickerProps } from '../types';
-declare const HuePicker: React.FC<IHuePickerProps>;
-export default HuePicker;

package/build/esm/src/components/color_picker/components/hue_picker.js

@@ -1,50 +0,0 @@
-import React, { useContext } from 'react';
-import { __assign } from '../../../../_virtual/_tslib.js';
-import 'lodash';
-import styles from '../../../css/color_picker/main.module.less.js';
-import { hsl2hex } from '../../../../node_modules/colors-convert/dist/lib/hsl.js';
-import '../../../../node_modules/colors-convert/dist/lib/hex.js';
-import { getHueFromPosition, getIndicatorPositionFromPosition, mapMouseEventToPosition, registerOnMouseEvents, mapTouchEventToPosition, registerOnTouchEvents } from '../utilities.js';
-import { ColorPickerContext } from '../context.js';
-import { cssColorPickerHuePicker, cssColorPickerPointer, cssColorPickerPointerInside } from '../css_classes.js';
-
-var HuePicker = function (_a) {
-    var hueSliderRef = _a.hueSliderRef, classes = _a.classes;
-    var _b = useContext(ColorPickerContext), setColor = _b.setColor, setHueSliderPointer = _b.setHueSliderPointer, screenName = _b.screenName;
-    var onSliderEvent = function (position) {
-        if (!(hueSliderRef === null || hueSliderRef === void 0 ? void 0 : hueSliderRef.current)) {
-            return;
-        }
-        var hue = getHueFromPosition({
-            hueSliderRect: hueSliderRef.current.getBoundingClientRect(),
-            position: position,
-            screenName: screenName,
-        }).hue;
-        var _a = getIndicatorPositionFromPosition({
-            elementRect: hueSliderRef.current.getBoundingClientRect(),
-            position: position,
-        }), positionY = _a.positionY, positionX = _a.positionX;
-        setColor(function (color) { return (__assign(__assign({}, color), { hue: hue, hex: hsl2hex({ h: hue, s: color.saturation, l: color.lightness }) })); });
-        setHueSliderPointer({ top: positionY, left: positionX });
-    };
-    var onSliderDown = function (event) {
-        if (!(hueSliderRef === null || hueSliderRef === void 0 ? void 0 : hueSliderRef.current)) {
-            return;
-        }
-        onSliderEvent(mapMouseEventToPosition(event));
-        registerOnMouseEvents(onSliderEvent);
-    };
-    var onTouchStart = function (event) {
-        if (!(hueSliderRef === null || hueSliderRef === void 0 ? void 0 : hueSliderRef.current)) {
-            return;
-        }
-        onSliderEvent(mapTouchEventToPosition(event));
-        registerOnTouchEvents(onSliderEvent);
-    };
-    return (React.createElement("div", { className: styles[cssColorPickerHuePicker], ref: hueSliderRef, onMouseDown: onSliderDown, onTouchStart: onTouchStart },
-        React.createElement("div", { className: classes.huePointer + " " + styles[cssColorPickerPointer], onDrag: onSliderEvent, onTouchStart: onTouchStart },
-            React.createElement("div", { className: styles[cssColorPickerPointerInside] }))));
-};
-
-export default HuePicker;
-//# sourceMappingURL=hue_picker.js.map

package/build/esm/src/components/color_picker/components/hue_picker.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"hue_picker.js","sources":["../../../../../../src/components/color_picker/components/hue_picker.tsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport styles from '@css/color_picker/main.module.less';\nimport { hsl2hex } from 'colors-convert';\nimport {\n    getHueFromPosition,\n    getIndicatorPositionFromPosition,\n    mapMouseEventToPosition,\n    mapTouchEventToPosition,\n    registerOnMouseEvents,\n    registerOnTouchEvents,\n} from '../utilities';\nimport { IColorPickerContextProps, IHuePickerProps, IPosition } from '../types';\nimport { ColorPickerContext } from '@components/color_picker/context';\nimport { cssColorPickerHuePicker, cssColorPickerPointer, cssColorPickerPointerInside } from '../css_classes';\n\nconst HuePicker: React.FC<IHuePickerProps> = ({ hueSliderRef, classes }) => {\n    const { setColor, setHueSliderPointer, screenName } = useContext<IColorPickerContextProps>(ColorPickerContext);\n\n    const onSliderEvent = (position: IPosition) => {\n        if (!hueSliderRef?.current) {\n            return;\n        }\n        const { hue } = getHueFromPosition({\n            hueSliderRect: hueSliderRef.current.getBoundingClientRect(),\n            position,\n            screenName,\n        });\n        const { positionY, positionX } = getIndicatorPositionFromPosition({\n            elementRect: hueSliderRef.current.getBoundingClientRect(),\n            position,\n        });\n\n        setColor((color) => ({ ...color, hue, hex: hsl2hex({ h: hue, s: color.saturation, l: color.lightness }) }));\n        setHueSliderPointer({ top: positionY, left: positionX });\n    };\n\n    const onSliderDown = (event: React.MouseEvent<HTMLDivElement, MouseEvent> | MouseEvent) => {\n        if (!hueSliderRef?.current) {\n            return;\n        }\n        onSliderEvent(mapMouseEventToPosition(event));\n        registerOnMouseEvents(onSliderEvent);\n    };\n\n    const onTouchStart = (event: React.TouchEvent<HTMLDivElement>) => {\n        if (!hueSliderRef?.current) {\n            return;\n        }\n        onSliderEvent(mapTouchEventToPosition(event));\n        registerOnTouchEvents(onSliderEvent);\n    };\n\n    return (\n        <div className={styles[cssColorPickerHuePicker]} ref={hueSliderRef} onMouseDown={onSliderDown} onTouchStart={onTouchStart}>\n            <div className={`${classes.huePointer} ${styles[cssColorPickerPointer]}`} onDrag={onSliderEvent} onTouchStart={onTouchStart}>\n                <div className={styles[cssColorPickerPointerInside]} />\n            </div>\n        </div>\n    );\n};\n\nexport default HuePicker;\n"],"names":[],"mappings":";;;;;;;;;;IAeM,SAAS,GAA8B,UAAC,EAAyB;QAAvB,8BAAY,EAAE,oBAAO;IAC3D,IAAA,mCAAwG,EAAtG,sBAAQ,EAAE,4CAAmB,EAAE,0BAAuE,CAAC;IAE/G,IAAM,aAAa,GAAG,UAAC,QAAmB;QACtC,IAAI,EAAC,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,OAAO,CAAA,EAAE;YACxB,OAAO;SACV;QACO,IAAA;;;;cAAG,CAIR;QACG,IAAA;;;UAGJ,EAHM,wBAAS,EAAE,wBAGjB,CAAC;QAEH,QAAQ,CAAC,UAAC,KAAK,IAAK,8BAAM,KAAK,KAAE,GAAG,KAAA,EAAE,GAAG,EAAE,OAAO,CAAC,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,KAAK,CAAC,UAAU,EAAE,CAAC,EAAE,KAAK,CAAC,SAAS,EAAE,CAAC,OAAG,CAAC,CAAC;QAC5G,mBAAmB,CAAC,EAAE,GAAG,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,CAAC;KAC5D,CAAC;IAEF,IAAM,YAAY,GAAG,UAAC,KAAgE;QAClF,IAAI,EAAC,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,OAAO,CAAA,EAAE;YACxB,OAAO;SACV;QACD,aAAa,CAAC,uBAAuB,CAAC,KAAK,CAAC,CAAC,CAAC;QAC9C,qBAAqB,CAAC,aAAa,CAAC,CAAC;KACxC,CAAC;IAEF,IAAM,YAAY,GAAG,UAAC,KAAuC;QACzD,IAAI,EAAC,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,OAAO,CAAA,EAAE;YACxB,OAAO;SACV;QACD,aAAa,CAAC,uBAAuB,CAAC,KAAK,CAAC,CAAC,CAAC;QAC9C,qBAAqB,CAAC,aAAa,CAAC,CAAC;KACxC,CAAC;IAEF,QACI,6BAAK,SAAS,EAAE,MAAM,CAAC,uBAAuB,CAAC,EAAE,GAAG,EAAE,YAAY,EAAE,WAAW,EAAE,YAAY,EAAE,YAAY,EAAE,YAAY;QACrH,6BAAK,SAAS,EAAK,OAAO,CAAC,UAAU,SAAI,MAAM,CAAC,qBAAqB,CAAG,EAAE,MAAM,EAAE,aAAa,EAAE,YAAY,EAAE,YAAY;YACvH,6BAAK,SAAS,EAAE,MAAM,CAAC,2BAA2B,CAAC,GAAI,CACrD,CACJ,EACR;AACN;;;;"}

package/build/esm/src/components/color_picker/components/label.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-import { IColorPickerLabelProps } from '../types';
-declare const ColorPickerLabel: React.FC<IColorPickerLabelProps>;
-export default ColorPickerLabel;

package/build/esm/src/components/color_picker/components/label.js

@@ -1,34 +0,0 @@
-import React, { useContext, useEffect } from 'react';
-import { DropdownContext } from '../../dropdown/context/index.js';
-import InputWrapper from '../../controls/components/input_wrapper.js';
-import { createUseStyles } from '../../../../node_modules/react-jss/dist/react-jss.esm.js';
-import styles from '../../../css/color_picker/main.module.less.js';
-import { ColorPickerContext } from '../context.js';
-import { cssColorPickerInputColorPreview } from '../css_classes.js';
-
-var useStyles = createUseStyles({
-    colorPreview: {
-        background: function (_a) {
-            var hex = _a.color.hex;
-            return hex;
-        },
-    },
-});
-var ColorPickerLabel = function (_a) {
-    var name = _a.name, isRequired = _a.isRequired, id = _a.id;
-    var _b = useContext(ColorPickerContext), setInitialColor = _b.setInitialColor, color = _b.color;
-    var isOpen = useContext(DropdownContext).isOpen;
-    var classes = useStyles({ color: color });
-    useEffect(function () {
-        if (isOpen) {
-            setInitialColor(color);
-        }
-        // eslint-disable-next-line
-    }, [isOpen]);
-    return (React.createElement(React.Fragment, null,
-        React.createElement(InputWrapper, { value: color === null || color === void 0 ? void 0 : color.hex, size: "small", isFocused: isOpen, preElements: React.createElement("div", { className: classes.colorPreview + " " + styles[cssColorPickerInputColorPreview] }) }),
-        React.createElement("input", { type: "hidden", id: id, name: name, value: (color === null || color === void 0 ? void 0 : color.hex) || '', "aria-required": isRequired })));
-};
-
-export default ColorPickerLabel;
-//# sourceMappingURL=label.js.map

package/build/esm/src/components/color_picker/components/label.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"label.js","sources":["../../../../../../src/components/color_picker/components/label.tsx"],"sourcesContent":["import styles from '@css/color_picker/main.module.less';\nimport React, { useContext, useEffect } from 'react';\nimport { IDropdownContext } from '@components/dropdown/context/types';\nimport { DropdownContext } from '@components/dropdown/context';\nimport { IColorPickerLabelProps } from '../types';\nimport { createUseStyles } from 'react-jss';\nimport { ColorPickerContext } from '../context';\nimport InputWrapper from '@components/controls/components/input_wrapper';\nimport { cssColorPickerInputColorPreview } from '../css_classes';\n\nconst useStyles = createUseStyles({\n    colorPreview: {\n        background: ({ color: { hex } }) => hex,\n    },\n});\n\nconst ColorPickerLabel: React.FC<IColorPickerLabelProps> = ({ name, isRequired, id }) => {\n    const { setInitialColor, color } = useContext(ColorPickerContext);\n    const { isOpen }: IDropdownContext = useContext(DropdownContext);\n    const classes = useStyles({ color });\n    useEffect(() => {\n        if (isOpen) {\n            setInitialColor(color);\n        }\n        // eslint-disable-next-line\n    }, [isOpen]);\n\n    return (\n        <>\n            <InputWrapper\n                value={color?.hex}\n                size=\"small\"\n                isFocused={isOpen}\n                preElements={<div className={`${classes.colorPreview} ${styles[cssColorPickerInputColorPreview]}`} />}\n            />\n\n            <input type=\"hidden\" id={id} name={name} value={color?.hex || ''} aria-required={isRequired} />\n        </>\n    );\n};\n\nexport default ColorPickerLabel;\n"],"names":[],"mappings":";;;;;;;;AAUA,IAAM,SAAS,GAAG,eAAe,CAAC;IAC9B,YAAY,EAAE;QACV,UAAU,EAAE,UAAC,EAAkB;gBAAP,kBAAG;YAAS,OAAA,GAAG;SAAA;KAC1C;CACJ,CAAC,CAAC;IAEG,gBAAgB,GAAqC,UAAC,EAAwB;QAAtB,cAAI,EAAE,0BAAU,EAAE,UAAE;IACxE,IAAA,mCAA2D,EAAzD,oCAAe,EAAE,gBAAwC,CAAC;IAC1D,IAAA,2CAAM,CAAmD;IACjE,IAAM,OAAO,GAAG,SAAS,CAAC,EAAE,KAAK,OAAA,EAAE,CAAC,CAAC;IACrC,SAAS,CAAC;QACN,IAAI,MAAM,EAAE;YACR,eAAe,CAAC,KAAK,CAAC,CAAC;SAC1B;;KAEJ,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAEb,QACI;QACI,oBAAC,YAAY,IACT,KAAK,EAAE,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,GAAG,EACjB,IAAI,EAAC,OAAO,EACZ,SAAS,EAAE,MAAM,EACjB,WAAW,EAAE,6BAAK,SAAS,EAAK,OAAO,CAAC,YAAY,SAAI,MAAM,CAAC,+BAA+B,CAAG,GAAI,GACvG;QAEF,+BAAO,IAAI,EAAC,QAAQ,EAAC,EAAE,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,GAAG,KAAI,EAAE,mBAAiB,UAAU,GAAI,CAChG,EACL;AACN;;;;"}

package/build/esm/src/components/color_picker/components/saturation_lightness_picker.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-import { ISaturationLightnessPickerProps } from '../types';
-declare const SaturationLightnessPicker: React.FC<ISaturationLightnessPickerProps>;
-export default SaturationLightnessPicker;

package/build/esm/src/components/color_picker/components/saturation_lightness_picker.js

@@ -1,52 +0,0 @@
-import React, { useContext } from 'react';
-import { __assign } from '../../../../_virtual/_tslib.js';
-import 'lodash';
-import styles from '../../../css/color_picker/main.module.less.js';
-import { hsl2hex } from '../../../../node_modules/colors-convert/dist/lib/hsl.js';
-import '../../../../node_modules/colors-convert/dist/lib/hex.js';
-import { getIndicatorPositionFromPosition, getSaturationLightnessFromPosition, mapMouseEventToPosition, registerOnMouseEvents, mapTouchEventToPosition, registerOnTouchEvents } from '../utilities.js';
-import { ColorPickerContext } from '../context.js';
-import { cssColorPickerSaturationLightnessPicker, cssColorPickerMask, cssColorPickerMaskWhite, cssColorPickerMaskBlack, cssColorPickerPointer, cssColorPickerPointerInside } from '../css_classes.js';
-
-var SaturationLightnessPicker = function (_a) {
-    var classes = _a.classes, saturationLightnessPanelRef = _a.saturationLightnessPanelRef;
-    var _b = useContext(ColorPickerContext), setColor = _b.setColor, setSaturationLightnessPointer = _b.setSaturationLightnessPointer;
-    var saturationLightnessPickerEvent = function (position) {
-        if (!saturationLightnessPanelRef.current) {
-            return;
-        }
-        var elementRect = saturationLightnessPanelRef.current.getBoundingClientRect();
-        var _a = getIndicatorPositionFromPosition({ elementRect: elementRect, position: position }), positionX = _a.positionX, positionY = _a.positionY;
-        var _b = getSaturationLightnessFromPosition({ elementRect: elementRect, position: position }), lightness = _b.lightness, saturation = _b.saturation;
-        setColor(function (color) { return (__assign(__assign({}, color), { saturation: saturation,
-            lightness: lightness, hex: hsl2hex({ h: color.hue, l: lightness, s: saturation }) })); });
-        setSaturationLightnessPointer({
-            left: positionX,
-            top: positionY,
-        });
-    };
-    var onMouseDown = function (event) {
-        event.preventDefault();
-        if (!(saturationLightnessPanelRef === null || saturationLightnessPanelRef === void 0 ? void 0 : saturationLightnessPanelRef.current)) {
-            return;
-        }
-        saturationLightnessPickerEvent(mapMouseEventToPosition(event));
-        registerOnMouseEvents(saturationLightnessPickerEvent);
-    };
-    var onTouchStart = function (event) {
-        event.preventDefault();
-        if (!(saturationLightnessPanelRef === null || saturationLightnessPanelRef === void 0 ? void 0 : saturationLightnessPanelRef.current)) {
-            return;
-        }
-        saturationLightnessPickerEvent(mapTouchEventToPosition(event));
-        registerOnTouchEvents(saturationLightnessPickerEvent);
-    };
-    return (React.createElement("div", { className: classes.saturationLightnessPanel + " " + styles[cssColorPickerSaturationLightnessPicker], ref: saturationLightnessPanelRef, onMouseDown: onMouseDown, onTouchStart: onTouchStart },
-        React.createElement("div", { className: styles[cssColorPickerMask] + " " + styles[cssColorPickerMaskWhite] }),
-        React.createElement("div", { className: styles[cssColorPickerMask] + " " + styles[cssColorPickerMaskBlack] }),
-        React.createElement("div", { className: classes.saturationLightnessPointer + " " + styles[cssColorPickerPointer], onDrag: saturationLightnessPickerEvent, onTouchStart: onTouchStart },
-            React.createElement("div", { className: styles[cssColorPickerPointerInside] }))));
-};
-
-export default SaturationLightnessPicker;
-//# sourceMappingURL=saturation_lightness_picker.js.map

package/build/esm/src/components/color_picker/components/saturation_lightness_picker.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"saturation_lightness_picker.js","sources":["../../../../../../src/components/color_picker/components/saturation_lightness_picker.tsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport { hsl2hex } from 'colors-convert';\nimport styles from '@css/color_picker/main.module.less';\nimport { IColorPickerContextProps, IPosition, ISaturationLightnessPickerProps } from '../types';\nimport {\n    getIndicatorPositionFromPosition,\n    getSaturationLightnessFromPosition,\n    mapTouchEventToPosition,\n    mapMouseEventToPosition,\n    registerOnMouseEvents,\n    registerOnTouchEvents,\n} from '../utilities';\nimport { ColorPickerContext } from '@components/color_picker/context';\nimport {\n    cssColorPickerMask,\n    cssColorPickerMaskBlack,\n    cssColorPickerMaskWhite,\n    cssColorPickerPointer,\n    cssColorPickerPointerInside,\n    cssColorPickerSaturationLightnessPicker,\n} from '@components/color_picker/css_classes';\n\nconst SaturationLightnessPicker: React.FC<ISaturationLightnessPickerProps> = ({ classes, saturationLightnessPanelRef }) => {\n    const { setColor, setSaturationLightnessPointer } = useContext<IColorPickerContextProps>(ColorPickerContext);\n    const saturationLightnessPickerEvent = (position: IPosition) => {\n        if (!saturationLightnessPanelRef.current) {\n            return;\n        }\n        const elementRect = saturationLightnessPanelRef.current.getBoundingClientRect();\n        const { positionX, positionY } = getIndicatorPositionFromPosition({ elementRect, position });\n        const { lightness, saturation } = getSaturationLightnessFromPosition({ elementRect, position });\n        setColor((color) => ({\n            ...color,\n            saturation,\n            lightness,\n            hex: hsl2hex({ h: color.hue, l: lightness, s: saturation }),\n        }));\n\n        setSaturationLightnessPointer({\n            left: positionX,\n            top: positionY,\n        });\n    };\n\n    const onMouseDown = (event: React.MouseEvent<HTMLElement, MouseEvent> | MouseEvent) => {\n        event.preventDefault();\n        if (!saturationLightnessPanelRef?.current) {\n            return;\n        }\n        saturationLightnessPickerEvent(mapMouseEventToPosition(event));\n        registerOnMouseEvents(saturationLightnessPickerEvent);\n    };\n\n    const onTouchStart = (event: React.TouchEvent<HTMLDivElement>) => {\n        event.preventDefault();\n        if (!saturationLightnessPanelRef?.current) {\n            return;\n        }\n        saturationLightnessPickerEvent(mapTouchEventToPosition(event));\n\n        registerOnTouchEvents(saturationLightnessPickerEvent);\n    };\n\n    return (\n        <div\n            className={`${classes.saturationLightnessPanel} ${styles[cssColorPickerSaturationLightnessPicker]}`}\n            ref={saturationLightnessPanelRef}\n            onMouseDown={onMouseDown}\n            onTouchStart={onTouchStart}\n        >\n            <div className={`${styles[cssColorPickerMask]} ${styles[cssColorPickerMaskWhite]}`} />\n            <div className={`${styles[cssColorPickerMask]} ${styles[cssColorPickerMaskBlack]}`} />\n            <div\n                className={`${classes.saturationLightnessPointer} ${styles[cssColorPickerPointer]}`}\n                onDrag={saturationLightnessPickerEvent}\n                onTouchStart={onTouchStart}\n            >\n                <div className={styles[cssColorPickerPointerInside]} />\n            </div>\n        </div>\n    );\n};\n\nexport default SaturationLightnessPicker;\n"],"names":[],"mappings":";;;;;;;;;;IAsBM,yBAAyB,GAA8C,UAAC,EAAwC;QAAtC,oBAAO,EAAE,4DAA2B;IAC1G,IAAA,mCAAsG,EAApG,sBAAQ,EAAE,gEAA0F,CAAC;IAC7G,IAAM,8BAA8B,GAAG,UAAC,QAAmB;QACvD,IAAI,CAAC,2BAA2B,CAAC,OAAO,EAAE;YACtC,OAAO;SACV;QACD,IAAM,WAAW,GAAG,2BAA2B,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAC;QAC1E,IAAA,uFAAsF,EAApF,wBAAS,EAAE,wBAAyE,CAAC;QACvF,IAAA,yFAAyF,EAAvF,wBAAS,EAAE,0BAA4E,CAAC;QAChG,QAAQ,CAAC,UAAC,KAAK,IAAK,8BACb,KAAK,KACR,UAAU,YAAA;YACV,SAAS,WAAA,EACT,GAAG,EAAE,OAAO,CAAC,EAAE,CAAC,EAAE,KAAK,CAAC,GAAG,EAAE,CAAC,EAAE,SAAS,EAAE,CAAC,EAAE,UAAU,EAAE,CAAC,OAC7D,CAAC,CAAC;QAEJ,6BAA6B,CAAC;YAC1B,IAAI,EAAE,SAAS;YACf,GAAG,EAAE,SAAS;SACjB,CAAC,CAAC;KACN,CAAC;IAEF,IAAM,WAAW,GAAG,UAAC,KAA6D;QAC9E,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,IAAI,EAAC,2BAA2B,aAA3B,2BAA2B,uBAA3B,2BAA2B,CAAE,OAAO,CAAA,EAAE;YACvC,OAAO;SACV;QACD,8BAA8B,CAAC,uBAAuB,CAAC,KAAK,CAAC,CAAC,CAAC;QAC/D,qBAAqB,CAAC,8BAA8B,CAAC,CAAC;KACzD,CAAC;IAEF,IAAM,YAAY,GAAG,UAAC,KAAuC;QACzD,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,IAAI,EAAC,2BAA2B,aAA3B,2BAA2B,uBAA3B,2BAA2B,CAAE,OAAO,CAAA,EAAE;YACvC,OAAO;SACV;QACD,8BAA8B,CAAC,uBAAuB,CAAC,KAAK,CAAC,CAAC,CAAC;QAE/D,qBAAqB,CAAC,8BAA8B,CAAC,CAAC;KACzD,CAAC;IAEF,QACI,6BACI,SAAS,EAAK,OAAO,CAAC,wBAAwB,SAAI,MAAM,CAAC,uCAAuC,CAAG,EACnG,GAAG,EAAE,2BAA2B,EAChC,WAAW,EAAE,WAAW,EACxB,YAAY,EAAE,YAAY;QAE1B,6BAAK,SAAS,EAAK,MAAM,CAAC,kBAAkB,CAAC,SAAI,MAAM,CAAC,uBAAuB,CAAG,GAAI;QACtF,6BAAK,SAAS,EAAK,MAAM,CAAC,kBAAkB,CAAC,SAAI,MAAM,CAAC,uBAAuB,CAAG,GAAI;QACtF,6BACI,SAAS,EAAK,OAAO,CAAC,0BAA0B,SAAI,MAAM,CAAC,qBAAqB,CAAG,EACnF,MAAM,EAAE,8BAA8B,EACtC,YAAY,EAAE,YAAY;YAE1B,6BAAK,SAAS,EAAE,MAAM,CAAC,2BAA2B,CAAC,GAAI,CACrD,CACJ,EACR;AACN;;;;"}

package/build/esm/src/components/color_picker/constants.d.ts

@@ -1,4 +0,0 @@
-export declare const MAX_HUE_VALUE = 360;
-export declare const MAX_LIGHTNESS_VALUE = 100;
-export declare const MAX_SATURATION_VALUE = 100;
-export declare const SATURATION_OFFSET = 0.00001;

package/build/esm/src/components/color_picker/constants.js

@@ -1,7 +0,0 @@
-var MAX_HUE_VALUE = 360;
-var MAX_LIGHTNESS_VALUE = 100;
-var MAX_SATURATION_VALUE = 100;
-var SATURATION_OFFSET = 0.00001; // To avoid package bug
-
-export { MAX_HUE_VALUE, MAX_LIGHTNESS_VALUE, MAX_SATURATION_VALUE, SATURATION_OFFSET };
-//# sourceMappingURL=constants.js.map

package/build/esm/src/components/color_picker/constants.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"constants.js","sources":["../../../../../src/components/color_picker/constants.ts"],"sourcesContent":["export const MAX_HUE_VALUE = 360;\nexport const MAX_LIGHTNESS_VALUE = 100;\nexport const MAX_SATURATION_VALUE = 100;\nexport const SATURATION_OFFSET = 0.00001; // To avoid package bug\n"],"names":[],"mappings":"IAAa,aAAa,GAAG,IAAI;IACpB,mBAAmB,GAAG,IAAI;IAC1B,oBAAoB,GAAG,IAAI;IAC3B,iBAAiB,GAAG,QAAQ;;;;"}

package/build/esm/src/components/color_picker/context.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-import { IColorPickerContextProps } from './types';
-export declare const ColorPickerContext: import("react").Context<IColorPickerContextProps>;

package/build/esm/src/components/color_picker/context.js

@@ -1,26 +0,0 @@
-import { createContext } from 'react';
-
-var ColorPickerContext = createContext({
-    color: {
-        hue: 0,
-        saturation: 0,
-        lightness: 0,
-        hex: '',
-    },
-    setColor: function () { },
-    initialColor: {
-        hue: 0,
-        saturation: 0,
-        lightness: 0,
-        hex: '',
-    },
-    screenName: '',
-    setInitialColor: function () { },
-    hueSliderPointer: { top: 0, left: 0 },
-    setHueSliderPointer: function () { },
-    saturationLightnessPointer: { top: 0, left: 0 },
-    setSaturationLightnessPointer: function () { },
-});
-
-export { ColorPickerContext };
-//# sourceMappingURL=context.js.map

package/build/esm/src/components/color_picker/context.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"context.js","sources":["../../../../../src/components/color_picker/context.tsx"],"sourcesContent":["import { createContext } from 'react';\nimport { IColorPickerContextProps } from './types';\n\nexport const ColorPickerContext = createContext<IColorPickerContextProps>({\n    color: {\n        hue: 0,\n        saturation: 0,\n        lightness: 0,\n        hex: '',\n    },\n    setColor: () => {},\n    initialColor: {\n        hue: 0,\n        saturation: 0,\n        lightness: 0,\n        hex: '',\n    },\n    screenName: '',\n    setInitialColor: () => {},\n    hueSliderPointer: { top: 0, left: 0 },\n    setHueSliderPointer: () => {},\n    saturationLightnessPointer: { top: 0, left: 0 },\n    setSaturationLightnessPointer: () => {},\n});\n"],"names":[],"mappings":";;IAGa,kBAAkB,GAAG,aAAa,CAA2B;IACtE,KAAK,EAAE;QACH,GAAG,EAAE,CAAC;QACN,UAAU,EAAE,CAAC;QACb,SAAS,EAAE,CAAC;QACZ,GAAG,EAAE,EAAE;KACV;IACD,QAAQ,EAAE,eAAQ;IAClB,YAAY,EAAE;QACV,GAAG,EAAE,CAAC;QACN,UAAU,EAAE,CAAC;QACb,SAAS,EAAE,CAAC;QACZ,GAAG,EAAE,EAAE;KACV;IACD,UAAU,EAAE,EAAE;IACd,eAAe,EAAE,eAAQ;IACzB,gBAAgB,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE;IACrC,mBAAmB,EAAE,eAAQ;IAC7B,0BAA0B,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE;IAC/C,6BAA6B,EAAE,eAAQ;CAC1C;;;;"}

package/build/esm/src/components/color_picker/css_classes.d.ts

@@ -1,12 +0,0 @@
-export declare const cssColorPicker = "color-picker";
-export declare const cssColorPickerInputColorPreview: string;
-export declare const cssColorPickerButtonsGroup: string;
-export declare const cssColorPickerHuePicker: string;
-export declare const cssColorPickerPointer: string;
-export declare const cssColorPickerPointerInside: string;
-export declare const cssColorPickerSaturationLightnessPicker: string;
-export declare const cssColorPickerMask: string;
-export declare const cssColorPickerMaskWhite: string;
-export declare const cssColorPickerMaskBlack: string;
-export declare const cssColorPickerPreviewContainer: string;
-export declare const cssColorPickerPreview: string;

package/build/esm/src/components/color_picker/css_classes.js

@@ -1,15 +0,0 @@
-var cssColorPicker = 'color-picker';
-var cssColorPickerInputColorPreview = cssColorPicker + "__input-color-preview";
-var cssColorPickerButtonsGroup = cssColorPicker + "__buttons-group";
-var cssColorPickerHuePicker = cssColorPicker + "__hue-picker";
-var cssColorPickerPointer = cssColorPicker + "__pointer";
-var cssColorPickerPointerInside = cssColorPicker + "__pointer-inside";
-var cssColorPickerSaturationLightnessPicker = cssColorPicker + "__saturation-lightness-picker";
-var cssColorPickerMask = cssColorPicker + "__mask";
-var cssColorPickerMaskWhite = cssColorPickerMask + "--white";
-var cssColorPickerMaskBlack = cssColorPickerMask + "--black";
-var cssColorPickerPreviewContainer = cssColorPicker + "__preview-container";
-var cssColorPickerPreview = cssColorPicker + "__preview";
-
-export { cssColorPicker, cssColorPickerButtonsGroup, cssColorPickerHuePicker, cssColorPickerInputColorPreview, cssColorPickerMask, cssColorPickerMaskBlack, cssColorPickerMaskWhite, cssColorPickerPointer, cssColorPickerPointerInside, cssColorPickerPreview, cssColorPickerPreviewContainer, cssColorPickerSaturationLightnessPicker };
-//# sourceMappingURL=css_classes.js.map

package/build/esm/src/components/color_picker/css_classes.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"css_classes.js","sources":["../../../../../src/components/color_picker/css_classes.ts"],"sourcesContent":["export const cssColorPicker = 'color-picker';\nexport const cssColorPickerInputColorPreview = `${cssColorPicker}__input-color-preview`;\nexport const cssColorPickerButtonsGroup = `${cssColorPicker}__buttons-group`;\nexport const cssColorPickerHuePicker = `${cssColorPicker}__hue-picker`;\nexport const cssColorPickerPointer = `${cssColorPicker}__pointer`;\nexport const cssColorPickerPointerInside = `${cssColorPicker}__pointer-inside`;\nexport const cssColorPickerSaturationLightnessPicker = `${cssColorPicker}__saturation-lightness-picker`;\nexport const cssColorPickerMask = `${cssColorPicker}__mask`;\nexport const cssColorPickerMaskWhite = `${cssColorPickerMask}--white`;\nexport const cssColorPickerMaskBlack = `${cssColorPickerMask}--black`;\nexport const cssColorPickerPreviewContainer = `${cssColorPicker}__preview-container`;\nexport const cssColorPickerPreview = `${cssColorPicker}__preview`;\n"],"names":[],"mappings":"IAAa,cAAc,GAAG,eAAe;IAChC,+BAA+B,GAAM,cAAc,2BAAwB;IAC3E,0BAA0B,GAAM,cAAc,qBAAkB;IAChE,uBAAuB,GAAM,cAAc,kBAAe;IAC1D,qBAAqB,GAAM,cAAc,eAAY;IACrD,2BAA2B,GAAM,cAAc,sBAAmB;IAClE,uCAAuC,GAAM,cAAc,mCAAgC;IAC3F,kBAAkB,GAAM,cAAc,YAAS;IAC/C,uBAAuB,GAAM,kBAAkB,aAAU;IACzD,uBAAuB,GAAM,kBAAkB,aAAU;IACzD,8BAA8B,GAAM,cAAc,yBAAsB;IACxE,qBAAqB,GAAM,cAAc;;;;"}

package/build/esm/src/components/color_picker/index.d.ts

@@ -1,5 +0,0 @@
-import React from 'react';
-import { IColorPickerProps, IPureColorPickerProps } from './types';
-export declare const PureColorPicker: React.FC<IPureColorPickerProps>;
-declare const _default: ({ defaultColor, onChange, hideChooseCancelButtons, name }: IColorPickerProps) => JSX.Element;
-export default _default;

package/build/esm/src/components/color_picker/index.js

@@ -1,124 +0,0 @@
-import React, { useState, useMemo, useContext, useRef } from 'react';
-import { __assign } from '../../../_virtual/_tslib.js';
-import { useScreenDetect } from '../../hooks/use_screen_detect.js';
-import Input from '../controls/components/input.js';
-import { createUseStyles } from '../../../node_modules/react-jss/dist/react-jss.esm.js';
-import styles from '../../css/color_picker/main.module.less.js';
-import { SATURATION_OFFSET } from './constants.js';
-import { getColorFromHex, getIndicatorPositionsFromHEX } from './utilities.js';
-import { ColorPickerContext } from './context.js';
-import { cssColorPicker, cssColorPickerPreviewContainer, cssColorPickerPreview } from './css_classes.js';
-import SaturationLightnessPicker from './components/saturation_lightness_picker.js';
-import HuePicker from './components/hue_picker.js';
-import ColorPickerButtons from './components/buttons.js';
-
-var useStyles = createUseStyles({
-    saturationLightnessPanel: {
-        background: function (_a) {
-            var hue = _a.color.hue;
-            return "hsl(" + hue + ",100%, 50%)";
-        },
-    },
-    saturationLightnessPointer: {
-        transform: function (_a) {
-            var _b = _a.saturationLightnessPointer, left = _b.left, top = _b.top;
-            return "translate3d(" + (left - 10) + "px," + (top - 10) + "px,0px)";
-        },
-        '& > div': {
-            background: function (_a) {
-                var hex = _a.color.hex;
-                return hex;
-            },
-        },
-    },
-    preview: {
-        background: function (_a) {
-            var hex = _a.color.hex;
-            return hex;
-        },
-    },
-    huePointer: {
-        transform: function (_a) {
-            var _b = _a.hueSliderPointer, top = _b.top, left = _b.left, screenName = _a.screenName;
-            return screenName === 'xs' ? "translate3d(" + (left - 10) + "px,0px,0px)" : "translate3d(0px," + (top - 10) + "px,0px)";
-        },
-        '& > div': {
-            background: function (_a) {
-                var hue = _a.color.hue;
-                return "hsl(" + hue + ",100%, 50%)";
-            },
-        },
-    },
-    colorPreview: {
-        background: function (_a) {
-            var hex = _a.color.hex;
-            return hex;
-        },
-    },
-});
-var PureColorPicker = function (_a) {
-    var hideChooseCancelButtons = _a.hideChooseCancelButtons;
-    var _b = useContext(ColorPickerContext), color = _b.color, setColor = _b.setColor, initialColor = _b.initialColor, hueSliderPointer = _b.hueSliderPointer, saturationLightnessPointer = _b.saturationLightnessPointer, setHueSliderPointer = _b.setHueSliderPointer, setSaturationLightnessPointer = _b.setSaturationLightnessPointer, screenName = _b.screenName;
-    var saturationLightnessPanelRef = useRef(null);
-    var hueSliderRef = useRef(null);
-    var classes = useStyles({ color: color, saturationLightnessPointer: saturationLightnessPointer, hueSliderPointer: hueSliderPointer, screenName: screenName });
-    var inputOnChange = function (event) {
-        var value = event.target.value;
-        if (!(hueSliderRef === null || hueSliderRef === void 0 ? void 0 : hueSliderRef.current) || !(saturationLightnessPanelRef === null || saturationLightnessPanelRef === void 0 ? void 0 : saturationLightnessPanelRef.current)) {
-            return;
-        }
-        try {
-            var color_1 = getColorFromHex(value);
-            var _a = getIndicatorPositionsFromHEX({
-                hueSliderRef: hueSliderRef,
-                saturationLightnessPanelRef: saturationLightnessPanelRef,
-                hex: event.target.value,
-            }), saturationLightnessPointer_1 = _a.saturationLightnessPointer, hueSliderPointer_1 = _a.hueSliderPointer;
-            setColor(color_1);
-            setSaturationLightnessPointer(saturationLightnessPointer_1);
-            setHueSliderPointer(hueSliderPointer_1);
-        }
-        catch (e) {
-            setColor(__assign(__assign({}, color), { hex: value }));
-        }
-    };
-    var restoreInitialColor = function () {
-        setColor(initialColor);
-    };
-    return (React.createElement("div", { className: "" + styles[cssColorPicker] },
-        React.createElement(SaturationLightnessPicker, { classes: classes, saturationLightnessPanelRef: saturationLightnessPanelRef }),
-        React.createElement(HuePicker, { hueSliderRef: hueSliderRef, classes: classes }),
-        React.createElement("div", { className: styles[cssColorPickerPreviewContainer] },
-            React.createElement("div", { className: classes.preview + " " + styles[cssColorPickerPreview] }),
-            React.createElement("div", null,
-                React.createElement(Input, { id: "color-picker-id", value: color === null || color === void 0 ? void 0 : color.hex, onChange: inputOnChange }))),
-        !hideChooseCancelButtons && React.createElement(ColorPickerButtons, { restoreInitialColor: restoreInitialColor })));
-};
-var index = (function (_a) {
-    var _b = _a.defaultColor, defaultColor = _b === void 0 ? '#ffffff' : _b, onChange = _a.onChange, hideChooseCancelButtons = _a.hideChooseCancelButtons, name = _a.name;
-    var _c = useState({ hue: 0, saturation: SATURATION_OFFSET, lightness: 100, hex: defaultColor }), color = _c[0], setColor = _c[1];
-    var _d = useState({ hue: 0, saturation: SATURATION_OFFSET, lightness: 100, hex: defaultColor }), initialColor = _d[0], setInitialColor = _d[1];
-    var _e = useState({ top: 0, left: 0 }), hueSliderPointer = _e[0], setHueSliderPointer = _e[1];
-    var _f = useState({ left: 0, top: 0 }), saturationLightnessPointer = _f[0], setSaturationLightnessPointer = _f[1];
-    var screenName = useScreenDetect();
-    useMemo(function () {
-        onChange === null || onChange === void 0 ? void 0 : onChange(color);
-    }, [color, onChange]);
-    return (React.createElement(ColorPickerContext.Provider, { value: {
-            color: color,
-            setColor: setColor,
-            initialColor: initialColor,
-            setInitialColor: setInitialColor,
-            hueSliderPointer: hueSliderPointer,
-            setHueSliderPointer: setHueSliderPointer,
-            screenName: screenName,
-            saturationLightnessPointer: saturationLightnessPointer,
-            setSaturationLightnessPointer: setSaturationLightnessPointer,
-        } },
-        React.createElement("input", { type: "hidden", name: name }),
-        React.createElement(PureColorPicker, { hideChooseCancelButtons: hideChooseCancelButtons })));
-});
-
-export default index;
-export { PureColorPicker };
-//# sourceMappingURL=index.js.map

package/build/esm/src/components/color_picker/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sources":["../../../../../src/components/color_picker/index.tsx"],"sourcesContent":["import React, { ChangeEvent, useContext, useMemo, useRef, useState } from 'react';\nimport { createUseStyles } from 'react-jss';\nimport Input from '@components/controls/components/input';\nimport styles from '@css/color_picker/main.module.less';\nimport SaturationLightnessPicker from './components/saturation_lightness_picker';\nimport ColorPickerSlider from './components/hue_picker';\nimport ColorPickerButtons from './components/buttons';\nimport { getColorFromHex, getIndicatorPositionsFromHEX } from './utilities';\nimport { IColorPickerContextProps, IColorPickerProps, IPureColorPickerProps } from './types';\nimport { ColorPickerContext } from './context';\nimport { SATURATION_OFFSET } from './constants';\nimport { useScreenDetect } from '@hooks/use_screen_detect';\nimport { cssColorPicker, cssColorPickerPreview, cssColorPickerPreviewContainer } from '@components/color_picker/css_classes';\n\nconst useStyles = createUseStyles({\n    saturationLightnessPanel: {\n        background: ({ color: { hue } }) => `hsl(${hue},100%, 50%)`,\n    },\n    saturationLightnessPointer: {\n        transform: ({ saturationLightnessPointer: { left, top } }) => `translate3d(${left - 10}px,${top - 10}px,0px)`,\n        '& > div': {\n            background: ({ color: { hex } }) => hex,\n        },\n    },\n    preview: {\n        background: ({ color: { hex } }) => hex,\n    },\n    huePointer: {\n        transform: ({ hueSliderPointer: { top, left }, screenName }) =>\n            screenName === 'xs' ? `translate3d(${left - 10}px,0px,0px)` : `translate3d(0px,${top - 10}px,0px)`,\n        '& > div': {\n            background: ({ color: { hue } }) => `hsl(${hue},100%, 50%)`,\n        },\n    },\n    colorPreview: {\n        background: ({ color: { hex } }) => hex,\n    },\n});\n\nexport const PureColorPicker: React.FC<IPureColorPickerProps> = ({ hideChooseCancelButtons }) => {\n    const {\n        color,\n        setColor,\n        initialColor,\n        hueSliderPointer,\n        saturationLightnessPointer,\n        setHueSliderPointer,\n        setSaturationLightnessPointer,\n        screenName,\n    } = useContext<IColorPickerContextProps>(ColorPickerContext);\n    const saturationLightnessPanelRef = useRef<HTMLDivElement>(null);\n    const hueSliderRef = useRef<HTMLDivElement>(null);\n    const classes = useStyles({ color, saturationLightnessPointer, hueSliderPointer, screenName });\n\n    const inputOnChange = (event: ChangeEvent<HTMLInputElement>) => {\n        const { value } = event.target;\n        if (!hueSliderRef?.current || !saturationLightnessPanelRef?.current) {\n            return;\n        }\n        try {\n            const color = getColorFromHex(value);\n            const { saturationLightnessPointer, hueSliderPointer } = getIndicatorPositionsFromHEX({\n                hueSliderRef,\n                saturationLightnessPanelRef,\n                hex: event.target.value,\n            });\n            setColor(color);\n            setSaturationLightnessPointer(saturationLightnessPointer);\n            setHueSliderPointer(hueSliderPointer);\n        } catch (e) {\n            setColor({ ...color, hex: value });\n        }\n    };\n    const restoreInitialColor = () => {\n        setColor(initialColor);\n    };\n\n    return (\n        <div className={`${styles[cssColorPicker]}`}>\n            <SaturationLightnessPicker classes={classes} saturationLightnessPanelRef={saturationLightnessPanelRef} />\n            <ColorPickerSlider hueSliderRef={hueSliderRef} classes={classes} />\n            <div className={styles[cssColorPickerPreviewContainer]}>\n                <div className={`${classes.preview} ${styles[cssColorPickerPreview]}`} />\n                <div>\n                    <Input id=\"color-picker-id\" value={color?.hex} onChange={inputOnChange} />\n                </div>\n            </div>\n            {!hideChooseCancelButtons && <ColorPickerButtons restoreInitialColor={restoreInitialColor} />}\n        </div>\n    );\n};\n\nexport default ({ defaultColor = '#ffffff', onChange, hideChooseCancelButtons, name }: IColorPickerProps) => {\n    const [color, setColor] = useState({ hue: 0, saturation: SATURATION_OFFSET, lightness: 100, hex: defaultColor });\n    const [initialColor, setInitialColor] = useState({ hue: 0, saturation: SATURATION_OFFSET, lightness: 100, hex: defaultColor });\n    const [hueSliderPointer, setHueSliderPointer] = useState({ top: 0, left: 0 });\n    const [saturationLightnessPointer, setSaturationLightnessPointer] = useState({ left: 0, top: 0 });\n    const screenName = useScreenDetect();\n\n    useMemo(() => {\n        onChange?.(color);\n    }, [color, onChange]);\n\n    return (\n        <ColorPickerContext.Provider\n            value={{\n                color,\n                setColor,\n                initialColor,\n                setInitialColor,\n                hueSliderPointer,\n                setHueSliderPointer,\n                screenName,\n                saturationLightnessPointer,\n                setSaturationLightnessPointer,\n            }}\n        >\n            <input type=\"hidden\" name={name} />\n            <PureColorPicker hideChooseCancelButtons={hideChooseCancelButtons} />\n        </ColorPickerContext.Provider>\n    );\n};\n"],"names":["ColorPickerSlider"],"mappings":"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"}

package/build/esm/src/components/color_picker/types.d.ts

@@ -1,59 +0,0 @@
-import { Dispatch, RefObject, SetStateAction } from 'react';
-export interface IPosition {
-    clientX: number;
-    clientY: number;
-}
-export interface IColor {
-    hue: number;
-    saturation: number;
-    lightness: number;
-    hex: string;
-}
-export interface IHuePickerProps {
-    hueSliderRef: RefObject<HTMLDivElement>;
-    classes: any;
-}
-export interface IColorPickerButtonsProps {
-    restoreInitialColor: () => void;
-}
-export interface IPureColorPickerProps {
-    hideChooseCancelButtons?: boolean;
-}
-export interface IColorPickerProps extends IPureColorPickerProps {
-    onChange?: (color: IColor) => void;
-    defaultColor?: string;
-    name?: string;
-}
-export interface IColorPickerContextProps {
-    color: IColor;
-    screenName: string;
-    initialColor: IColor;
-    setInitialColor: Dispatch<SetStateAction<IColor | undefined>>;
-    setColor: Dispatch<SetStateAction<IColor>>;
-    hueSliderPointer: {
-        top: number;
-        left: number;
-    };
-    setHueSliderPointer: Dispatch<SetStateAction<{
-        top: number;
-        left: number;
-    } | undefined>>;
-    saturationLightnessPointer: {
-        top: number;
-        left: number;
-    };
-    setSaturationLightnessPointer: Dispatch<SetStateAction<{
-        top: number;
-        left: number;
-    } | undefined>>;
-}
-export declare type IColorPickerLabelProps = {
-    isRequired?: boolean;
-    label?: string;
-    name: string;
-    id: string;
-};
-export declare type ISaturationLightnessPickerProps = {
-    classes?: any;
-    saturationLightnessPanelRef: RefObject<HTMLDivElement>;
-};

package/build/esm/src/components/color_picker/types.js

@@ -1,2 +0,0 @@
-import 'react';
-//# sourceMappingURL=types.js.map

package/build/esm/src/components/color_picker/types.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../../src/components/color_picker/types.ts"],"names":[],"mappings":"AAAA,OAAoD,OAAO,CAAC"}