@dreamcommerce/aurora 0.3.4-15 → 0.3.4-153

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

@@ -0,0 +1,14 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var MAX_HUE_VALUE = 360;
+var MAX_LIGHTNESS_VALUE = 100;
+var MAX_SATURATION_VALUE = 100;
+var SATURATION_OFFSET = 0.00001; // To avoid package bug
+
+exports.MAX_HUE_VALUE = MAX_HUE_VALUE;
+exports.MAX_LIGHTNESS_VALUE = MAX_LIGHTNESS_VALUE;
+exports.MAX_SATURATION_VALUE = MAX_SATURATION_VALUE;
+exports.SATURATION_OFFSET = SATURATION_OFFSET;
+//# sourceMappingURL=constants.js.map

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

@@ -0,0 +1 @@
+{"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/cjs/src/components/color_picker/context.js

@@ -0,0 +1,30 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+var ColorPickerContext = React.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 () { },
+});
+
+exports.ColorPickerContext = ColorPickerContext;
+//# sourceMappingURL=context.js.map

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

@@ -0,0 +1 @@
+{"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":["createContext"],"mappings":";;;;;;IAGa,kBAAkB,GAAGA,mBAAa,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/cjs/src/components/color_picker/css_classes.js

@@ -0,0 +1,30 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+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";
+
+exports.cssColorPicker = cssColorPicker;
+exports.cssColorPickerButtonsGroup = cssColorPickerButtonsGroup;
+exports.cssColorPickerHuePicker = cssColorPickerHuePicker;
+exports.cssColorPickerInputColorPreview = cssColorPickerInputColorPreview;
+exports.cssColorPickerMask = cssColorPickerMask;
+exports.cssColorPickerMaskBlack = cssColorPickerMaskBlack;
+exports.cssColorPickerMaskWhite = cssColorPickerMaskWhite;
+exports.cssColorPickerPointer = cssColorPickerPointer;
+exports.cssColorPickerPointerInside = cssColorPickerPointerInside;
+exports.cssColorPickerPreview = cssColorPickerPreview;
+exports.cssColorPickerPreviewContainer = cssColorPickerPreviewContainer;
+exports.cssColorPickerSaturationLightnessPicker = cssColorPickerSaturationLightnessPicker;
+//# sourceMappingURL=css_classes.js.map

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

@@ -0,0 +1 @@
+{"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,YAAS;IACxD,uBAAuB,GAAM,kBAAkB,YAAS;IACxD,8BAA8B,GAAM,cAAc,yBAAsB;IACxE,qBAAqB,GAAM,cAAc;;;;;;;;;;;;;;;"}

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

@@ -0,0 +1,114 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var _tslib = require('../../../_virtual/_tslib.js');
+var reactJss_esm = require('../../../node_modules/react-jss/dist/react-jss.esm.js');
+var input = require('../controls/components/input.js');
+var main_module = require('../../css/color_picker/main.module.less.js');
+var utilities = require('./utilities.js');
+var context = require('./context.js');
+var css_classes = require('./css_classes.js');
+var saturation_lightness_picker = require('./components/saturation_lightness_picker.js');
+var hue_picker = require('./components/hue_picker.js');
+var buttons = require('./components/buttons.js');
+var use_color_picker = require('./use_color_picker.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var useStyles = reactJss_esm.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 = React.useContext(context.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 = React.useRef(null);
+    var hueSliderRef = React.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 = utilities.getColorFromHex(value);
+            var _a = utilities.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(_tslib.__assign(_tslib.__assign({}, color), { hex: value }));
+        }
+    };
+    var restoreInitialColor = function () {
+        setColor(initialColor);
+    };
+    return (React__default['default'].createElement("div", { className: "" + main_module['default'][css_classes.cssColorPicker] },
+        React__default['default'].createElement(saturation_lightness_picker['default'], { classes: classes, saturationLightnessPanelRef: saturationLightnessPanelRef }),
+        React__default['default'].createElement(hue_picker['default'], { hueSliderRef: hueSliderRef, classes: classes }),
+        React__default['default'].createElement("div", { className: main_module['default'][css_classes.cssColorPickerPreviewContainer] },
+            React__default['default'].createElement("div", { className: classes.preview + " " + main_module['default'][css_classes.cssColorPickerPreview] }),
+            React__default['default'].createElement("div", null,
+                React__default['default'].createElement(input['default'], { id: "color-picker-id", value: color === null || color === void 0 ? void 0 : color.hex, onChange: inputOnChange }))),
+        !hideChooseCancelButtons && React__default['default'].createElement(buttons['default'], { restoreInitialColor: restoreInitialColor })));
+};
+var index = (function (_a) {
+    var initialColor = _a.initialColor, onChange = _a.onChange, hideChooseCancelButtons = _a.hideChooseCancelButtons, name = _a.name;
+    var colorPickerContext = use_color_picker.useColorPicker({ initialColorHex: initialColor || '#ffffff', onChange: onChange });
+    return (React__default['default'].createElement(context.ColorPickerContext.Provider, { value: colorPickerContext },
+        React__default['default'].createElement("input", { type: "hidden", name: name }),
+        React__default['default'].createElement(PureColorPicker, { hideChooseCancelButtons: hideChooseCancelButtons })));
+});
+
+exports.PureColorPicker = PureColorPicker;
+exports.default = index;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../src/components/color_picker/index.tsx"],"sourcesContent":["import React, { ChangeEvent, useContext, useRef } 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 { cssColorPicker, cssColorPickerPreview, cssColorPickerPreviewContainer } from '@components/color_picker/css_classes';\nimport { useColorPicker } from '@components/color_picker/use_color_picker';\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\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 ({ initialColor, onChange, hideChooseCancelButtons, name }: IColorPickerProps) => {\n    const colorPickerContext = useColorPicker({ initialColorHex: initialColor || '#ffffff', onChange });\n\n    return (\n        <ColorPickerContext.Provider value={colorPickerContext}>\n            <input type=\"hidden\" name={name} />\n            <PureColorPicker hideChooseCancelButtons={hideChooseCancelButtons} />\n        </ColorPickerContext.Provider>\n    );\n};\n"],"names":["createUseStyles","useRef","getColorFromHex","React","styles","cssColorPicker","SaturationLightnessPicker","ColorPickerSlider","cssColorPickerPreviewContainer","cssColorPickerPreview","Input","ColorPickerButtons","useColorPicker","ColorPickerContext"],"mappings":"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"}

package/build/cjs/src/components/color_picker/use_color_picker.js

@@ -0,0 +1,37 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var _tslib = require('../../../_virtual/_tslib.js');
+var constants = require('./constants.js');
+var use_screen_detect = require('../../hooks/use_screen_detect.js');
+
+var useColorPicker = function (_a) {
+    var initialColorHex = _a.initialColorHex, onChange = _a.onChange;
+    var _b = React.useState({ hue: 0, saturation: constants.SATURATION_OFFSET, lightness: 100, hex: initialColorHex }), color = _b[0], setColor = _b[1];
+    var _c = React.useState({ hue: 0, saturation: constants.SATURATION_OFFSET, lightness: 100, hex: initialColorHex }), initialColor = _c[0], setInitialColor = _c[1];
+    var _d = React.useState({ top: 0, left: 0 }), hueSliderPointer = _d[0], setHueSliderPointer = _d[1];
+    var _e = React.useState({ left: 0, top: 0 }), saturationLightnessPointer = _e[0], setSaturationLightnessPointer = _e[1];
+    var screenName = use_screen_detect.useScreenDetect();
+    React.useEffect(function () {
+        onChange === null || onChange === void 0 ? void 0 : onChange(color);
+    }, [color]);
+    React.useEffect(function () {
+        setColor(function (prevState) { return (_tslib.__assign(_tslib.__assign({}, prevState), { hex: initialColorHex })); });
+    }, [initialColorHex]);
+    return {
+        color: color,
+        setColor: setColor,
+        initialColor: initialColor,
+        setInitialColor: setInitialColor,
+        hueSliderPointer: hueSliderPointer,
+        setHueSliderPointer: setHueSliderPointer,
+        screenName: screenName,
+        saturationLightnessPointer: saturationLightnessPointer,
+        setSaturationLightnessPointer: setSaturationLightnessPointer,
+    };
+};
+
+exports.useColorPicker = useColorPicker;
+//# sourceMappingURL=use_color_picker.js.map

package/build/cjs/src/components/color_picker/use_color_picker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use_color_picker.js","sources":["../../../../../src/components/color_picker/use_color_picker.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport { SATURATION_OFFSET } from '@components/color_picker/constants';\nimport { useScreenDetect } from '@hooks/use_screen_detect';\nimport { IColor } from '@components/color_picker/types';\n\nexport const useColorPicker = ({ initialColorHex, onChange }: { initialColorHex: string; onChange?: (color: IColor) => void }) => {\n    const [color, setColor] = useState({ hue: 0, saturation: SATURATION_OFFSET, lightness: 100, hex: initialColorHex });\n    const [initialColor, setInitialColor] = useState({ hue: 0, saturation: SATURATION_OFFSET, lightness: 100, hex: initialColorHex });\n    const [hueSliderPointer, setHueSliderPointer] = useState({ top: 0, left: 0 });\n    const [saturationLightnessPointer, setSaturationLightnessPointer] = useState({ left: 0, top: 0 });\n    const screenName = useScreenDetect();\n\n    useEffect(() => {\n        onChange?.(color);\n    }, [color]);\n\n    useEffect(() => {\n        setColor((prevState) => ({ ...prevState, hex: initialColorHex }));\n    }, [initialColorHex]);\n\n    return {\n        color,\n        setColor,\n        initialColor,\n        setInitialColor,\n        hueSliderPointer,\n        setHueSliderPointer,\n        screenName,\n        saturationLightnessPointer,\n        setSaturationLightnessPointer,\n    };\n};\n"],"names":["useScreenDetect","useEffect"],"mappings":";;;;;;;;;IAKa,cAAc,GAAG,UAAC,EAA8F;QAA5F,oCAAe,EAAE,sBAAQ;IAChD,IAAA,8GAA6G,EAA5G,aAAK,EAAE,gBAAqG,CAAC;IAC9G,IAAA,8GAA2H,EAA1H,oBAAY,EAAE,uBAA4G,CAAC;IAC5H,IAAA,wCAAuE,EAAtE,wBAAgB,EAAE,2BAAoD,CAAC;IACxE,IAAA,wCAA2F,EAA1F,kCAA0B,EAAE,qCAA8D,CAAC;IAClG,IAAM,UAAU,GAAGA,iCAAe,EAAE,CAAC;IAErCC,eAAS,CAAC;QACN,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,KAAK,EAAE;KACrB,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZA,eAAS,CAAC;QACN,QAAQ,CAAC,UAAC,SAAS,IAAK,4CAAM,SAAS,KAAE,GAAG,EAAE,eAAe,OAAG,CAAC,CAAC;KACrE,EAAE,CAAC,eAAe,CAAC,CAAC,CAAC;IAEtB,OAAO;QACH,KAAK,OAAA;QACL,QAAQ,UAAA;QACR,YAAY,cAAA;QACZ,eAAe,iBAAA;QACf,gBAAgB,kBAAA;QAChB,mBAAmB,qBAAA;QACnB,UAAU,YAAA;QACV,0BAA0B,4BAAA;QAC1B,6BAA6B,+BAAA;KAChC,CAAC;AACN;;;;"}

package/build/cjs/src/components/color_picker/utilities.js

@@ -0,0 +1,71 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('react');
+require('../../../node_modules/lodash/_baseGetTag.js');
+require('../../../node_modules/lodash/_baseToString.js');
+require('../../../node_modules/lodash/_createRound.js');
+var hex = require('../../../node_modules/colors-convert/dist/lib/hex.js');
+require('../../../node_modules/lodash/_ListCache.js');
+require('../../../node_modules/lodash/_Map.js');
+require('../../../node_modules/lodash/_MapCache.js');
+require('../../../node_modules/lodash/_SetCache.js');
+require('../../../node_modules/lodash/_equalByTag.js');
+require('../../../node_modules/lodash/isArguments.js');
+require('../../../node_modules/lodash/isBuffer.js');
+require('../../../node_modules/lodash/isTypedArray.js');
+require('../../../node_modules/lodash/_getTag.js');
+require('../../../node_modules/lodash/_stringToPath.js');
+var constants = require('./constants.js');
+var range_mappings = require('../../utilities/range/range_mappings.js');
+
+/**
+ * Function to calculate indicators position based on hex value
+ * @param saturationLightnessPanelRef, reference
+ * @param hueSliderRef, reference
+ * @param hex, string with color
+ * @return
+ */
+var getIndicatorPositionsFromHEX = function (_a) {
+    var saturationLightnessPanelRef = _a.saturationLightnessPanelRef, hueSliderRef = _a.hueSliderRef, hex$1 = _a.hex;
+    var _b, _c;
+    var _d = hex.hex2hsl(hex$1), h = _d.h, s = _d.s, l = _d.l;
+    var _e = ((_b = saturationLightnessPanelRef === null || saturationLightnessPanelRef === void 0 ? void 0 : saturationLightnessPanelRef.current) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect()) || {}, _f = _e.width, width = _f === void 0 ? 0 : _f, _g = _e.height, height = _g === void 0 ? 0 : _g;
+    var hueSliderRect = (_c = hueSliderRef === null || hueSliderRef === void 0 ? void 0 : hueSliderRef.current) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect();
+    var saturationLightnessPointer = {
+        left: range_mappings.constrainToRange((s * width) / constants.MAX_SATURATION_VALUE, 0, width),
+        top: range_mappings.constrainToRange((l * height) / constants.MAX_LIGHTNESS_VALUE, 0, height),
+    };
+    var hueSliderPointer = {
+        top: h * (((hueSliderRect === null || hueSliderRect === void 0 ? void 0 : hueSliderRect.height) || 0) / constants.MAX_HUE_VALUE),
+        left: h * (((hueSliderRect === null || hueSliderRect === void 0 ? void 0 : hueSliderRect.width) || 0) / constants.MAX_HUE_VALUE),
+    };
+    return { saturationLightnessPointer: saturationLightnessPointer, hueSliderPointer: hueSliderPointer };
+};
+var getColorFromHex = function (value) {
+    var _a = hex.hex2hsl(value), hue = _a.h, saturation = _a.s, lightness = _a.l;
+    return { hue: hue, saturation: saturation, lightness: lightness, hex: value };
+};
+var getHueFromPosition = function (_a) {
+    var hueSliderRect = _a.hueSliderRect, position = _a.position, screenName = _a.screenName;
+    var clientY = position.clientY, clientX = position.clientX;
+    var top = hueSliderRect.top, height = hueSliderRect.height, width = hueSliderRect.width, left = hueSliderRect.left;
+    var distance = screenName === 'xs' ? range_mappings.constrainToRange(clientX - left, 0, width) : range_mappings.constrainToRange(clientY - top, 0, height);
+    var hue = screenName === 'xs' ? (distance * (constants.MAX_HUE_VALUE - 1)) / width : (distance * (constants.MAX_HUE_VALUE - 1)) / height;
+    return { hue: hue };
+};
+var getSaturationLightnessFromPosition = function (_a) {
+    var elementRect = _a.elementRect, position = _a.position;
+    var width = elementRect.width, height = elementRect.height;
+    var _b = range_mappings.getIndicatorPositionFromPosition({ elementRect: elementRect, position: position }), positionX = _b.positionX, positionY = _b.positionY;
+    var saturation = (positionX * constants.MAX_SATURATION_VALUE) / width || constants.SATURATION_OFFSET;
+    var lightness = constants.MAX_LIGHTNESS_VALUE - (positionY * (constants.MAX_LIGHTNESS_VALUE / 2)) / height - saturation / 2;
+    return { lightness: lightness, saturation: saturation };
+};
+
+exports.getColorFromHex = getColorFromHex;
+exports.getHueFromPosition = getHueFromPosition;
+exports.getIndicatorPositionsFromHEX = getIndicatorPositionsFromHEX;
+exports.getSaturationLightnessFromPosition = getSaturationLightnessFromPosition;
+//# sourceMappingURL=utilities.js.map

package/build/cjs/src/components/color_picker/utilities.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utilities.js","sources":["../../../../../src/components/color_picker/utilities.ts"],"sourcesContent":["import { RefObject } from 'react';\nimport { hex2hsl } from 'colors-convert';\nimport { MAX_HUE_VALUE, MAX_LIGHTNESS_VALUE, MAX_SATURATION_VALUE, SATURATION_OFFSET } from './constants';\nimport { IPosition } from '@components/color_picker/types';\nimport { constrainToRange, getIndicatorPositionFromPosition } from '@utilities/range/range_mappings';\n\n/**\n * Function to calculate indicators position based on hex value\n * @param saturationLightnessPanelRef, reference\n * @param hueSliderRef, reference\n * @param hex, string with color\n * @return\n */\nexport const getIndicatorPositionsFromHEX = ({\n    saturationLightnessPanelRef,\n    hueSliderRef,\n    hex,\n}: {\n    saturationLightnessPanelRef?: RefObject<HTMLDivElement>;\n    hueSliderRef?: RefObject<HTMLDivElement>;\n    hex: string;\n}) => {\n    const { h, s, l } = hex2hsl(hex);\n    const { width = 0, height = 0 } = saturationLightnessPanelRef?.current?.getBoundingClientRect() || {};\n    const hueSliderRect = hueSliderRef?.current?.getBoundingClientRect();\n    const saturationLightnessPointer = {\n        left: constrainToRange((s * width) / MAX_SATURATION_VALUE, 0, width),\n        top: constrainToRange((l * height) / MAX_LIGHTNESS_VALUE, 0, height),\n    };\n    const hueSliderPointer = {\n        top: h * ((hueSliderRect?.height || 0) / MAX_HUE_VALUE),\n        left: h * ((hueSliderRect?.width || 0) / MAX_HUE_VALUE),\n    };\n\n    return { saturationLightnessPointer, hueSliderPointer };\n};\n\nexport const getColorFromHex = (value: string) => {\n    const { h: hue, s: saturation, l: lightness } = hex2hsl(value);\n\n    return { hue, saturation, lightness, hex: value };\n};\n\nexport const getHueFromPosition = ({\n    hueSliderRect,\n    position,\n    screenName,\n}: {\n    hueSliderRect: DOMRect;\n    position: IPosition;\n    screenName: string;\n}) => {\n    const { clientY, clientX } = position;\n    const { top, height, width, left } = hueSliderRect;\n    const distance = screenName === 'xs' ? constrainToRange(clientX - left, 0, width) : constrainToRange(clientY - top, 0, height);\n    const hue = screenName === 'xs' ? (distance * (MAX_HUE_VALUE - 1)) / width : (distance * (MAX_HUE_VALUE - 1)) / height;\n\n    return { hue };\n};\n\nexport const getSaturationLightnessFromPosition = ({ elementRect, position }: { elementRect: DOMRect; position: IPosition }) => {\n    const { width, height } = elementRect;\n    const { positionX, positionY } = getIndicatorPositionFromPosition({ elementRect, position });\n    const saturation = (positionX * MAX_SATURATION_VALUE) / width || SATURATION_OFFSET;\n    const lightness = MAX_LIGHTNESS_VALUE - (positionY * (MAX_LIGHTNESS_VALUE / 2)) / height - saturation / 2;\n\n    return { lightness, saturation };\n};\n"],"names":["hex","constrainToRange","MAX_SATURATION_VALUE","MAX_LIGHTNESS_VALUE","MAX_HUE_VALUE","SATURATION_OFFSET"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAMA;;;;;;;IAOa,4BAA4B,GAAG,UAAC,EAQ5C;QAPG,4DAA2B,EAC3B,8BAAY,EACZA,cAAG;;IAMG,IAAA,uBAA0B,EAAxB,QAAC,EAAE,QAAC,EAAE,QAAkB,CAAC;IAC3B,IAAA,iNAA+F,EAA7F,aAAS,EAAT,8BAAS,EAAE,cAAU,EAAV,+BAAkF,CAAC;IACtG,IAAM,aAAa,SAAG,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,OAAO,0CAAE,qBAAqB,EAAE,CAAC;IACrE,IAAM,0BAA0B,GAAG;QAC/B,IAAI,EAAEC,+BAAgB,CAAC,CAAC,CAAC,GAAG,KAAK,IAAIC,8BAAoB,EAAE,CAAC,EAAE,KAAK,CAAC;QACpE,GAAG,EAAED,+BAAgB,CAAC,CAAC,CAAC,GAAG,MAAM,IAAIE,6BAAmB,EAAE,CAAC,EAAE,MAAM,CAAC;KACvE,CAAC;IACF,IAAM,gBAAgB,GAAG;QACrB,GAAG,EAAE,CAAC,IAAI,CAAC,CAAA,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,MAAM,KAAI,CAAC,IAAIC,uBAAa,CAAC;QACvD,IAAI,EAAE,CAAC,IAAI,CAAC,CAAA,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,KAAK,KAAI,CAAC,IAAIA,uBAAa,CAAC;KAC1D,CAAC;IAEF,OAAO,EAAE,0BAA0B,4BAAA,EAAE,gBAAgB,kBAAA,EAAE,CAAC;AAC5D,EAAE;IAEW,eAAe,GAAG,UAAC,KAAa;IACnC,IAAA,uBAAwD,EAAtD,UAAM,EAAE,iBAAa,EAAE,gBAA+B,CAAC;IAE/D,OAAO,EAAE,GAAG,KAAA,EAAE,UAAU,YAAA,EAAE,SAAS,WAAA,EAAE,GAAG,EAAE,KAAK,EAAE,CAAC;AACtD,EAAE;IAEW,kBAAkB,GAAG,UAAC,EAQlC;QAPG,gCAAa,EACb,sBAAQ,EACR,0BAAU;IAMF,IAAA,0BAAO,EAAE,0BAAO,CAAc;IAC9B,IAAA,uBAAG,EAAE,6BAAM,EAAE,2BAAK,EAAE,yBAAI,CAAmB;IACnD,IAAM,QAAQ,GAAG,UAAU,KAAK,IAAI,GAAGH,+BAAgB,CAAC,OAAO,GAAG,IAAI,EAAE,CAAC,EAAE,KAAK,CAAC,GAAGA,+BAAgB,CAAC,OAAO,GAAG,GAAG,EAAE,CAAC,EAAE,MAAM,CAAC,CAAC;IAC/H,IAAM,GAAG,GAAG,UAAU,KAAK,IAAI,GAAG,CAAC,QAAQ,IAAIG,uBAAa,GAAG,CAAC,CAAC,IAAI,KAAK,GAAG,CAAC,QAAQ,IAAIA,uBAAa,GAAG,CAAC,CAAC,IAAI,MAAM,CAAC;IAEvH,OAAO,EAAE,GAAG,KAAA,EAAE,CAAC;AACnB,EAAE;IAEW,kCAAkC,GAAG,UAAC,EAAwE;QAAtE,4BAAW,EAAE,sBAAQ;IAC9D,IAAA,yBAAK,EAAE,2BAAM,CAAiB;IAChC,IAAA,sGAAsF,EAApF,wBAAS,EAAE,wBAAyE,CAAC;IAC7F,IAAM,UAAU,GAAG,CAAC,SAAS,GAAGF,8BAAoB,IAAI,KAAK,IAAIG,2BAAiB,CAAC;IACnF,IAAM,SAAS,GAAGF,6BAAmB,GAAG,CAAC,SAAS,IAAIA,6BAAmB,GAAG,CAAC,CAAC,IAAI,MAAM,GAAG,UAAU,GAAG,CAAC,CAAC;IAE1G,OAAO,EAAE,SAAS,WAAA,EAAE,UAAU,YAAA,EAAE,CAAC;AACrC;;;;;;;"}

package/build/cjs/src/components/controls/components/cell_selector.js

@@ -0,0 +1,48 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var useTranslation = require('../../../../node_modules/react-i18next/dist/es/useTranslation.js');
+var css_classes = require('../css_classes.js');
+var main_module = require('../../../css/cell_selector/main.module.less.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var CellSelector = function (_a) {
+    var _b = _a.rows, rows = _b === void 0 ? 3 : _b, _c = _a.cols, cols = _c === void 0 ? 3 : _c, name = _a.name, initialSelected = _a.initialSelected, _d = _a.withValueOffset, withValueOffset = _d === void 0 ? true : _d, onChange = _a.onChange, _e = _a.className, className = _e === void 0 ? '' : _e;
+    var _f = React.useState(initialSelected), selectedCell = _f[0], setSelectedCell = _f[1];
+    var t = useTranslation.useTranslation().t;
+    React.useEffect(function () {
+        if (initialSelected === undefined) {
+            setSelectedCell(initialSelected);
+        }
+        else {
+            setSelectedCell(initialSelected - (withValueOffset ? 1 : 0));
+        }
+    }, [setSelectedCell, withValueOffset, initialSelected]);
+    var isSelected = function (row, col) {
+        if (selectedCell === undefined) {
+            return false;
+        }
+        if (parseInt("" + selectedCell / cols) !== row) {
+            return false;
+        }
+        if (selectedCell % cols !== col) {
+            return false;
+        }
+        return true;
+    };
+    var onClick = function (row, col) {
+        var cellIndex = row * cols + col;
+        setSelectedCell(cellIndex);
+        onChange === null || onChange === void 0 ? void 0 : onChange(cellIndex + (withValueOffset ? 1 : 0));
+    };
+    return (React__default['default'].createElement("div", { className: main_module['default'][css_classes.cellSelector] + " " + className },
+        React__default['default'].createElement("div", { className: main_module['default'][css_classes.cellSelectorContainer] }, Array.from({ length: rows }).map(function (_, rowIndex) { return (React__default['default'].createElement("div", { key: "CellSelector-" + name + "-Row-" + rowIndex, className: main_module['default'][css_classes.cellSelectorRow] }, Array.from({ length: cols }).map(function (_, colIndex) { return (React__default['default'].createElement("div", { key: "CellSelector-" + name + "-Row-" + rowIndex + "-Col-" + colIndex, className: main_module['default'][css_classes.cellSelectorCell] + " " + (isSelected(rowIndex, colIndex) ? main_module['default'][css_classes.cellSelectorCellActive] : ''), onClick: function () { return onClick(rowIndex, colIndex); } })); }))); }))));
+};
+
+exports.default = CellSelector;
+//# sourceMappingURL=cell_selector.js.map

package/build/cjs/src/components/controls/components/cell_selector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cell_selector.js","sources":["../../../../../../src/components/controls/components/cell_selector.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport styles from '@css/cell_selector/main.module.less';\nimport {\n    cellSelector,\n    cellSelectorRow,\n    cellSelectorCell,\n    cellSelectorCellActive,\n    cellSelectorContainer,\n    cellSelectorDescription,\n} from '../css_classes';\nimport { ICellSelector } from '@components/controls/types';\nimport { useTranslation } from 'react-i18next';\n\nconst CellSelector: React.FC<ICellSelector> = ({\n    rows = 3,\n    cols = 3,\n    name,\n    initialSelected,\n    withValueOffset = true,\n    onChange,\n    className = '',\n}) => {\n    const [selectedCell, setSelectedCell] = useState(initialSelected);\n    const { t } = useTranslation();\n\n    useEffect(() => {\n        if (initialSelected === undefined) {\n            setSelectedCell(initialSelected);\n        } else {\n            setSelectedCell(initialSelected - (withValueOffset ? 1 : 0));\n        }\n    }, [setSelectedCell, withValueOffset, initialSelected]);\n\n    const isSelected = (row: number, col: number) => {\n        if (selectedCell === undefined) {\n            return false;\n        }\n        if (parseInt(`${selectedCell / cols}`) !== row) {\n            return false;\n        }\n        if (selectedCell % cols !== col) {\n            return false;\n        }\n\n        return true;\n    };\n\n    const onClick = (row: number, col: number) => {\n        const cellIndex = row * cols + col;\n        setSelectedCell(cellIndex);\n        onChange?.(cellIndex + (withValueOffset ? 1 : 0));\n    };\n\n    return (\n        <div className={`${styles[cellSelector]} ${className}`}>\n            <div className={styles[cellSelectorContainer]}>\n                {Array.from({ length: rows }).map((_, rowIndex) => (\n                    <div key={`CellSelector-${name}-Row-${rowIndex}`} className={styles[cellSelectorRow]}>\n                        {Array.from({ length: cols }).map((_, colIndex) => (\n                            <div\n                                key={`CellSelector-${name}-Row-${rowIndex}-Col-${colIndex}`}\n                                className={`${styles[cellSelectorCell]} ${isSelected(rowIndex, colIndex) ? styles[cellSelectorCellActive] : ''}`}\n                                onClick={() => onClick(rowIndex, colIndex)}\n                            />\n                        ))}\n                    </div>\n                ))}\n            </div>\n        </div>\n    );\n};\n\nexport default CellSelector;\n"],"names":["useEffect","React","styles","cellSelector","cellSelectorContainer","cellSelectorRow","cellSelectorCell","cellSelectorCellActive"],"mappings":";;;;;;;;;;;;;IAaM,YAAY,GAA4B,UAAC,EAQ9C;QAPG,YAAQ,EAAR,6BAAQ,EACR,YAAQ,EAAR,6BAAQ,EACR,cAAI,EACJ,oCAAe,EACf,uBAAsB,EAAtB,2CAAsB,EACtB,sBAAQ,EACR,iBAAc,EAAd,mCAAc;IAER,IAAA,oCAA2D,EAA1D,oBAAY,EAAE,uBAA4C,CAAC;IAC1D,IAAA,qCAAC,CAAsB;IAE/BA,eAAS,CAAC;QACN,IAAI,eAAe,KAAK,SAAS,EAAE;YAC/B,eAAe,CAAC,eAAe,CAAC,CAAC;SACpC;aAAM;YACH,eAAe,CAAC,eAAe,IAAI,eAAe,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;SAChE;KACJ,EAAE,CAAC,eAAe,EAAE,eAAe,EAAE,eAAe,CAAC,CAAC,CAAC;IAExD,IAAM,UAAU,GAAG,UAAC,GAAW,EAAE,GAAW;QACxC,IAAI,YAAY,KAAK,SAAS,EAAE;YAC5B,OAAO,KAAK,CAAC;SAChB;QACD,IAAI,QAAQ,CAAC,KAAG,YAAY,GAAG,IAAM,CAAC,KAAK,GAAG,EAAE;YAC5C,OAAO,KAAK,CAAC;SAChB;QACD,IAAI,YAAY,GAAG,IAAI,KAAK,GAAG,EAAE;YAC7B,OAAO,KAAK,CAAC;SAChB;QAED,OAAO,IAAI,CAAC;KACf,CAAC;IAEF,IAAM,OAAO,GAAG,UAAC,GAAW,EAAE,GAAW;QACrC,IAAM,SAAS,GAAG,GAAG,GAAG,IAAI,GAAG,GAAG,CAAC;QACnC,eAAe,CAAC,SAAS,CAAC,CAAC;QAC3B,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,SAAS,IAAI,eAAe,GAAG,CAAC,GAAG,CAAC,CAAC,EAAE;KACrD,CAAC;IAEF,QACIC,iDAAK,SAAS,EAAKC,sBAAM,CAACC,wBAAY,CAAC,SAAI,SAAW;QAClDF,iDAAK,SAAS,EAAEC,sBAAM,CAACE,iCAAqB,CAAC,IACxC,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC,UAAC,CAAC,EAAE,QAAQ,IAAK,QAC/CH,iDAAK,GAAG,EAAE,kBAAgB,IAAI,aAAQ,QAAU,EAAE,SAAS,EAAEC,sBAAM,CAACG,2BAAe,CAAC,IAC/E,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC,UAAC,CAAC,EAAE,QAAQ,IAAK,QAC/CJ,iDACI,GAAG,EAAE,kBAAgB,IAAI,aAAQ,QAAQ,aAAQ,QAAU,EAC3D,SAAS,EAAKC,sBAAM,CAACI,4BAAgB,CAAC,UAAI,UAAU,CAAC,QAAQ,EAAE,QAAQ,CAAC,GAAGJ,sBAAM,CAACK,kCAAsB,CAAC,GAAG,EAAE,CAAE,EAChH,OAAO,EAAE,cAAM,OAAA,OAAO,CAAC,QAAQ,EAAE,QAAQ,CAAC,GAAA,GAC5C,IACL,CAAC,CACA,IACT,CAAC,CACA,CACJ,EACR;AACN;;;;"}

package/build/cjs/src/components/controls/components/checkbox.js

@@ -0,0 +1,37 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var classnames = require('classnames');
+var css_classes = require('../css_classes.js');
+var main_module = require('../../../css/checkbox/main.module.less.js');
+var icon_tick = require('../../../assets/icon_tick.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
+
+var Checkbox = function (_a) {
+    var _b;
+    var id = _a.id, name = _a.name, value = _a.value, _c = _a.initiallyChecked, initiallyChecked = _c === void 0 ? false : _c, isDisabled = _a.disabled, onChange = _a.onChange;
+    var _d = React.useState(initiallyChecked), isChecked = _d[0], setIsChecked = _d[1];
+    var checkboxClasses = classnames__default['default'](main_module['default'][css_classes.checkbox], (_b = {},
+        _b[main_module['default'][css_classes.checkboxDisabled]] = isDisabled,
+        _b));
+    var handleCheckboxChange = function (ev) {
+        onChange === null || onChange === void 0 ? void 0 : onChange(ev);
+        setIsChecked(function (prevState) { return !prevState; });
+    };
+    React.useEffect(function () {
+        setIsChecked(initiallyChecked);
+    }, [initiallyChecked]);
+    return (React__default['default'].createElement("span", { className: checkboxClasses },
+        React__default['default'].createElement("input", { className: main_module['default'][css_classes.checkboxControl], id: id, name: name, type: "checkbox", value: value, checked: isChecked, disabled: isDisabled, onChange: handleCheckboxChange }),
+        React__default['default'].createElement("label", { className: main_module['default'][css_classes.checkboxLabel], htmlFor: id },
+            React__default['default'].createElement(icon_tick['default'], { className: main_module['default'][css_classes.checkboxIcon] }))));
+};
+
+exports.default = Checkbox;
+//# sourceMappingURL=checkbox.js.map

package/build/cjs/src/components/controls/components/checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.js","sources":["../../../../../../src/components/controls/components/checkbox.tsx"],"sourcesContent":["import cssClasses from '@css/checkbox/main.module.less';\n\nimport React, { useEffect, useState } from 'react';\nimport classnames from 'classnames';\n\nimport { ICheckboxProps } from '../types';\nimport { checkbox, checkboxDisabled, checkboxControl, checkboxLabel, checkboxIcon } from '../css_classes';\nimport IconTick from '@assets/icon_tick';\n\nconst Checkbox: React.FC<ICheckboxProps> = ({ id, name, value, initiallyChecked = false, disabled: isDisabled, onChange }): JSX.Element => {\n    const [isChecked, setIsChecked] = useState<boolean>(initiallyChecked);\n\n    const checkboxClasses = classnames(cssClasses[checkbox], {\n        [cssClasses[checkboxDisabled]]: isDisabled\n    });\n\n    const handleCheckboxChange = (ev: React.ChangeEvent<HTMLInputElement>) => {\n        onChange?.(ev);\n        setIsChecked((prevState) => !prevState);\n    };\n\n    useEffect(() => {\n        setIsChecked(initiallyChecked);\n    }, [initiallyChecked]);\n\n    return (\n        <span className={checkboxClasses}>\n            <input\n                className={cssClasses[checkboxControl]}\n                id={id}\n                name={name}\n                type=\"checkbox\"\n                value={value}\n                checked={isChecked}\n                disabled={isDisabled}\n                onChange={handleCheckboxChange}\n            />\n\n            <label className={cssClasses[checkboxLabel]} htmlFor={id}>\n                <IconTick className={cssClasses[checkboxIcon]} />\n            </label>\n        </span>\n    );\n};\n\nexport default Checkbox;\n"],"names":["classnames","cssClasses","checkbox","checkboxDisabled","useEffect","React","checkboxControl","checkboxLabel","IconTick","checkboxIcon"],"mappings":";;;;;;;;;;;;;;;IASM,QAAQ,GAA6B,UAAC,EAA6E;;QAA3E,UAAE,EAAE,cAAI,EAAE,gBAAK,EAAE,wBAAwB,EAAxB,6CAAwB,EAAE,wBAAoB,EAAE,sBAAQ;IAC7G,IAAA,qCAA+D,EAA9D,iBAAS,EAAE,oBAAmD,CAAC;IAEtE,IAAM,eAAe,GAAGA,8BAAU,CAACC,sBAAU,CAACC,oBAAQ,CAAC;QACnD,GAACD,sBAAU,CAACE,4BAAgB,CAAC,IAAG,UAAU;YAC5C,CAAC;IAEH,IAAM,oBAAoB,GAAG,UAAC,EAAuC;QACjE,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,EAAE,EAAE;QACf,YAAY,CAAC,UAAC,SAAS,IAAK,OAAA,CAAC,SAAS,GAAA,CAAC,CAAC;KAC3C,CAAC;IAEFC,eAAS,CAAC;QACN,YAAY,CAAC,gBAAgB,CAAC,CAAC;KAClC,EAAE,CAAC,gBAAgB,CAAC,CAAC,CAAC;IAEvB,QACIC,kDAAM,SAAS,EAAE,eAAe;QAC5BA,mDACI,SAAS,EAAEJ,sBAAU,CAACK,2BAAe,CAAC,EACtC,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,IAAI,EACV,IAAI,EAAC,UAAU,EACf,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,SAAS,EAClB,QAAQ,EAAE,UAAU,EACpB,QAAQ,EAAE,oBAAoB,GAChC;QAEFD,mDAAO,SAAS,EAAEJ,sBAAU,CAACM,yBAAa,CAAC,EAAE,OAAO,EAAE,EAAE;YACpDF,wCAACG,oBAAQ,IAAC,SAAS,EAAEP,sBAAU,CAACQ,wBAAY,CAAC,GAAI,CAC7C,CACL,EACT;AACN;;;;"}

package/build/cjs/src/components/controls/components/checkbox_switch.js

@@ -0,0 +1,37 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var classnames = require('classnames');
+var css_classes = require('../css_classes.js');
+var main_module = require('../../../css/checkbox/main.module.less.js');
+var icon_tick = require('../../../assets/icon_tick.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
+
+var CheckboxSwitch = function (_a) {
+    var _b;
+    var id = _a.id, name = _a.name, value = _a.value, _c = _a.initiallyChecked, initiallyChecked = _c === void 0 ? false : _c, isDisabled = _a.disabled, onChange = _a.onChange;
+    var _d = React.useState(initiallyChecked), isChecked = _d[0], setIsChecked = _d[1];
+    var checkboxClasses = classnames__default['default'](main_module['default'][css_classes.checkboxSwitch], (_b = {},
+        _b[main_module['default'][css_classes.checkboxSwitchDisabled]] = isDisabled,
+        _b));
+    var handleCheckboxChange = function (ev) {
+        onChange === null || onChange === void 0 ? void 0 : onChange(ev);
+        setIsChecked(function (prevState) { return !prevState; });
+    };
+    React.useEffect(function () {
+        setIsChecked(initiallyChecked);
+    }, [initiallyChecked]);
+    return (React__default['default'].createElement("span", { className: checkboxClasses },
+        React__default['default'].createElement("input", { className: main_module['default'][css_classes.checkboxSwitchControl], id: id, name: name, type: "checkbox", value: value, checked: isChecked, disabled: isDisabled, onChange: handleCheckboxChange }),
+        React__default['default'].createElement("label", { className: main_module['default'][css_classes.checkboxSwitchLabel], htmlFor: id },
+            React__default['default'].createElement(icon_tick['default'], { className: main_module['default'][css_classes.checkboxSwitchIcon] }))));
+};
+
+exports.default = CheckboxSwitch;
+//# sourceMappingURL=checkbox_switch.js.map

package/build/cjs/src/components/controls/components/checkbox_switch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox_switch.js","sources":["../../../../../../src/components/controls/components/checkbox_switch.tsx"],"sourcesContent":["import cssClasses from '@css/checkbox/main.module.less';\n\nimport React, { useEffect, useState } from 'react';\nimport classnames from 'classnames';\n\nimport { ICheckboxProps } from '../types';\nimport { checkboxSwitch, checkboxSwitchDisabled, checkboxSwitchControl, checkboxSwitchLabel, checkboxSwitchIcon } from '../css_classes';\nimport IconTick from '@assets/icon_tick';\n\nconst CheckboxSwitch: React.FC<ICheckboxProps> = ({\n    id,\n    name,\n    value,\n    initiallyChecked = false,\n    disabled: isDisabled,\n    onChange\n}): JSX.Element => {\n    const [isChecked, setIsChecked] = useState<boolean>(initiallyChecked);\n\n    const checkboxClasses = classnames(cssClasses[checkboxSwitch], {\n        [cssClasses[checkboxSwitchDisabled]]: isDisabled\n    });\n\n    const handleCheckboxChange = (ev: React.ChangeEvent<HTMLInputElement>) => {\n        onChange?.(ev);\n        setIsChecked((prevState) => !prevState);\n    };\n\n    useEffect(() => {\n        setIsChecked(initiallyChecked);\n    }, [initiallyChecked]);\n\n    return (\n        <span className={checkboxClasses}>\n            <input\n                className={cssClasses[checkboxSwitchControl]}\n                id={id}\n                name={name}\n                type=\"checkbox\"\n                value={value}\n                checked={isChecked}\n                disabled={isDisabled}\n                onChange={handleCheckboxChange}\n            />\n\n            <label className={cssClasses[checkboxSwitchLabel]} htmlFor={id}>\n                <IconTick className={cssClasses[checkboxSwitchIcon]} />\n            </label>\n        </span>\n    );\n};\n\nexport default CheckboxSwitch;\n"],"names":["classnames","cssClasses","checkboxSwitch","checkboxSwitchDisabled","useEffect","React","checkboxSwitchControl","checkboxSwitchLabel","IconTick","checkboxSwitchIcon"],"mappings":";;;;;;;;;;;;;;;IASM,cAAc,GAA6B,UAAC,EAOjD;;QANG,UAAE,EACF,cAAI,EACJ,gBAAK,EACL,wBAAwB,EAAxB,6CAAwB,EACxB,wBAAoB,EACpB,sBAAQ;IAEF,IAAA,qCAA+D,EAA9D,iBAAS,EAAE,oBAAmD,CAAC;IAEtE,IAAM,eAAe,GAAGA,8BAAU,CAACC,sBAAU,CAACC,0BAAc,CAAC;QACzD,GAACD,sBAAU,CAACE,kCAAsB,CAAC,IAAG,UAAU;YAClD,CAAC;IAEH,IAAM,oBAAoB,GAAG,UAAC,EAAuC;QACjE,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,EAAE,EAAE;QACf,YAAY,CAAC,UAAC,SAAS,IAAK,OAAA,CAAC,SAAS,GAAA,CAAC,CAAC;KAC3C,CAAC;IAEFC,eAAS,CAAC;QACN,YAAY,CAAC,gBAAgB,CAAC,CAAC;KAClC,EAAE,CAAC,gBAAgB,CAAC,CAAC,CAAC;IAEvB,QACIC,kDAAM,SAAS,EAAE,eAAe;QAC5BA,mDACI,SAAS,EAAEJ,sBAAU,CAACK,iCAAqB,CAAC,EAC5C,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,IAAI,EACV,IAAI,EAAC,UAAU,EACf,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,SAAS,EAClB,QAAQ,EAAE,UAAU,EACpB,QAAQ,EAAE,oBAAoB,GAChC;QAEFD,mDAAO,SAAS,EAAEJ,sBAAU,CAACM,+BAAmB,CAAC,EAAE,OAAO,EAAE,EAAE;YAC1DF,wCAACG,oBAAQ,IAAC,SAAS,EAAEP,sBAAU,CAACQ,8BAAkB,CAAC,GAAI,CACnD,CACL,EACT;AACN;;;;"}

package/build/cjs/src/components/controls/components/content.js

@@ -0,0 +1,19 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var css_classes = require('../css_classes.js');
+var main_module = require('../../../css/controls/main.module.less.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var Content = function (_a) {
+    var children = _a.children;
+    return React__default['default'].createElement("div", { className: main_module['default'][css_classes.cssControlsContent] }, children);
+};
+
+exports.default = Content;
+//# sourceMappingURL=content.js.map

package/build/cjs/src/components/controls/components/content.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"content.js","sources":["../../../../../../src/components/controls/components/content.tsx"],"sourcesContent":["import cssStyles from '@css/controls/main.module.less';\n\nimport React from 'react';\n\nimport { IContentProps } from '../types';\nimport { cssControlsContent } from '../css_classes';\n\nconst Content: React.FC<IContentProps> = ({ children }): JSX.Element => {\n    return <div className={cssStyles[cssControlsContent]}>{children}</div>;\n};\n\nexport default Content;\n"],"names":["React","cssStyles","cssControlsContent"],"mappings":";;;;;;;;;;;;IAOM,OAAO,GAA4B,UAAC,EAAY;QAAV,sBAAQ;IAChD,OAAOA,iDAAK,SAAS,EAAEC,sBAAS,CAACC,8BAAkB,CAAC,IAAG,QAAQ,CAAO,CAAC;AAC3E;;;;"}

package/build/cjs/src/components/controls/components/element.js

@@ -0,0 +1,28 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var classnames = require('classnames');
+var css_classes = require('../css_classes.js');
+var main_module = require('../../../css/controls/main.module.less.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
+
+var Element = function (_a) {
+    var _b;
+    var type = _a.type, prefix = _a.prefix, postfix = _a.postfix, children = _a.children;
+    var controlElementClasses = classnames__default['default'](main_module['default'][css_classes.cssControlsElement], (_b = {},
+        _b[main_module['default'][css_classes.cssControlsElementPrefix]] = prefix,
+        _b[main_module['default'][css_classes.cssControlsElementPostfix]] = postfix,
+        _b[main_module['default'][css_classes.cssControlsElementCheckbox]] = type === 'checkbox',
+        _b[main_module['default'][css_classes.cssControlsElementRadio]] = type === 'radio',
+        _b));
+    return (React__default['default'].createElement("div", { className: controlElementClasses, "data-postfix": postfix, "data-prefix": prefix }, children));
+};
+
+exports.default = Element;
+//# sourceMappingURL=element.js.map

package/build/cjs/src/components/controls/components/element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"element.js","sources":["../../../../../../src/components/controls/components/element.tsx"],"sourcesContent":["import cssStyles from '@css/controls/main.module.less';\n\nimport React from 'react';\nimport classnames from 'classnames';\n\nimport { IElementProps } from '../types';\nimport {\n    cssControlsElement,\n    cssControlsElementCheckbox,\n    cssControlsElementPrefix,\n    cssControlsElementPostfix,\n    cssControlsElementRadio,\n} from '../css_classes';\n\nconst Element: React.FC<IElementProps> = ({ type, prefix, postfix, children }): JSX.Element => {\n    const controlElementClasses = classnames(cssStyles[cssControlsElement], {\n        [cssStyles[cssControlsElementPrefix]]: prefix,\n        [cssStyles[cssControlsElementPostfix]]: postfix,\n        [cssStyles[cssControlsElementCheckbox]]: type === 'checkbox',\n        [cssStyles[cssControlsElementRadio]]: type === 'radio',\n    });\n\n    return (\n        <div className={controlElementClasses} data-postfix={postfix} data-prefix={prefix}>\n            {children}\n        </div>\n    );\n};\n\nexport default Element;\n"],"names":["classnames","cssStyles","cssControlsElement","cssControlsElementPrefix","cssControlsElementPostfix","cssControlsElementCheckbox","cssControlsElementRadio","React"],"mappings":";;;;;;;;;;;;;;IAcM,OAAO,GAA4B,UAAC,EAAmC;;QAAjC,cAAI,EAAE,kBAAM,EAAE,oBAAO,EAAE,sBAAQ;IACvE,IAAM,qBAAqB,GAAGA,8BAAU,CAACC,sBAAS,CAACC,8BAAkB,CAAC;QAClE,GAACD,sBAAS,CAACE,oCAAwB,CAAC,IAAG,MAAM;QAC7C,GAACF,sBAAS,CAACG,qCAAyB,CAAC,IAAG,OAAO;QAC/C,GAACH,sBAAS,CAACI,sCAA0B,CAAC,IAAG,IAAI,KAAK,UAAU;QAC5D,GAACJ,sBAAS,CAACK,mCAAuB,CAAC,IAAG,IAAI,KAAK,OAAO;YACxD,CAAC;IAEH,QACIC,iDAAK,SAAS,EAAE,qBAAqB,kBAAgB,OAAO,iBAAe,MAAM,IAC5E,QAAQ,CACP,EACR;AACN;;;;"}

package/build/cjs/src/components/controls/components/errors.js

@@ -0,0 +1,22 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var css_classes = require('../css_classes.js');
+var context = require('../context.js');
+var main_module = require('../../../css/controls/main.module.less.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var Errors = function () {
+    var _a = context.useControlContext(), errors = _a.errors, id = _a.id;
+    return errors ? (React__default['default'].createElement("div", { className: main_module['default'][css_classes.cssControlsErrors] },
+        React__default['default'].createElement("ul", { className: main_module['default'][css_classes.cssControlsErrorsList] }, errors.map(function (error, key) { return (React__default['default'].createElement("label", { htmlFor: id, key: "error-item-" + id + "-" + key },
+            React__default['default'].createElement("li", { className: main_module['default'][css_classes.cssControlsErrorsListItem] }, error))); })))) : null;
+};
+
+exports.default = Errors;
+//# sourceMappingURL=errors.js.map

package/build/cjs/src/components/controls/components/errors.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"errors.js","sources":["../../../../../../src/components/controls/components/errors.tsx"],"sourcesContent":["import React from 'react';\nimport { useControlContext } from '@components/controls/context';\nimport styles from '@css/controls/main.module.less';\nimport { cssControlsErrors, cssControlsErrorsList, cssControlsErrorsListItem } from '@components/controls/css_classes';\n\nconst Errors: React.FC = () => {\n    const { errors, id } = useControlContext();\n\n    return errors ? (\n        <div className={styles[cssControlsErrors]}>\n            <ul className={styles[cssControlsErrorsList]}>\n                {errors.map((error, key) => (\n                    <label htmlFor={id} key={`error-item-${id}-${key}`}>\n                        <li className={styles[cssControlsErrorsListItem]}>{error}</li>\n                    </label>\n                ))}\n            </ul>\n        </div>\n    ) : null;\n};\n\nexport default Errors;\n"],"names":["React","styles","cssControlsErrors","cssControlsErrorsList","cssControlsErrorsListItem"],"mappings":";;;;;;;;;;;;;IAKM,MAAM,GAAa;IACf,IAAA,gCAAoC,EAAlC,kBAAM,EAAE,UAA0B,CAAC;IAE3C,OAAO,MAAM,IACTA,iDAAK,SAAS,EAAEC,sBAAM,CAACC,6BAAiB,CAAC;QACrCF,gDAAI,SAAS,EAAEC,sBAAM,CAACE,iCAAqB,CAAC,IACvC,MAAM,CAAC,GAAG,CAAC,UAAC,KAAK,EAAE,GAAG,IAAK,QACxBH,mDAAO,OAAO,EAAE,EAAE,EAAE,GAAG,EAAE,gBAAc,EAAE,SAAI,GAAK;YAC9CA,gDAAI,SAAS,EAAEC,sBAAM,CAACG,qCAAyB,CAAC,IAAG,KAAK,CAAM,CAC1D,IACX,CAAC,CACD,CACH,IACN,IAAI,CAAC;AACb;;;;"}