react-science 0.19.1

package/lib-esm/components/color-picker/color-picker-dropdown/ColorPickerDropdown.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+/** @jsxImportSource @emotion/react */
+import { css } from '@emotion/react';
+import { useRef } from 'react';
+import { useModifiedPopper } from '../../hooks/useModifiedPopper';
+import { useOnClickOutside } from '../../hooks/useOnClickOutside';
+import { useOnOff } from '../../hooks/useOnOff';
+import { Portal } from '../../root-layout/Portal';
+import FixedColorPreview from '../preview/FixedColorPreview';
+import { ColorPicker } from '../react-color/ColorPicker';
+import * as colorHelper from '../react-color/helpers/color';
+const colorPickerDropdownCss = {
+    root: css `
+    position: relative;
+    width: 100%;
+    border: 1px solid darkgray;
+    border-radius: 0.25rem;
+    height: 30px;
+    padding: 5px;
+  `,
+    preview: css `
+    height: 100%;
+    width: 100%;
+    border-radius: 0.125rem;
+  `,
+};
+export function ColorPickerDropdown(props) {
+    const { color, ...otherProps } = props;
+    const ref = useRef(null);
+    const [isOpened, , close, toggle] = useOnOff(false);
+    const { hex } = colorHelper.toState(color || 'white');
+    const { setReferenceElement, setPopperElement, popperProps } = useModifiedPopper({
+        placement: 'bottom-start',
+        offset: 6,
+    });
+    useOnClickOutside(ref, close);
+    return (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", ref: setReferenceElement, css: colorPickerDropdownCss.root, onClick: toggle, children: _jsx("div", { css: colorPickerDropdownCss.preview, children: _jsx(FixedColorPreview, { color: hex }) }) }), isOpened && (_jsx(Portal, { children: _jsx("div", { ref: (div) => {
+                        setPopperElement(div);
+                        ref.current = div;
+                    }, ...popperProps, children: _jsx(ColorPicker, { color: color, ...otherProps }) }) }))] }));
+}
+//# sourceMappingURL=ColorPickerDropdown.js.map

package/lib-esm/components/color-picker/color-picker-dropdown/ColorPickerDropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPickerDropdown.js","sourceRoot":"","sources":["../../../../src/components/color-picker/color-picker-dropdown/ColorPickerDropdown.tsx"],"names":[],"mappings":";AAAA,sCAAsC;AACtC,OAAO,EAAE,GAAG,EAAE,MAAM,gBAAgB,CAAC;AACrC,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,iBAAiB,EAAE,MAAM,+BAA+B,CAAC;AAClE,OAAO,EAAE,iBAAiB,EAAE,MAAM,+BAA+B,CAAC;AAClE,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAChD,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,iBAAiB,MAAM,8BAA8B,CAAC;AAC7D,OAAO,EAAE,WAAW,EAAoB,MAAM,4BAA4B,CAAC;AAC3E,OAAO,KAAK,WAAW,MAAM,8BAA8B,CAAC;AAO5D,MAAM,sBAAsB,GAAG;IAC7B,IAAI,EAAE,GAAG,CAAA;;;;;;;GAOR;IACD,OAAO,EAAE,GAAG,CAAA;;;;GAIX;CACF,CAAC;AAEF,MAAM,UAAU,mBAAmB,CAAC,KAA+B;IACjE,MAAM,EAAE,KAAK,EAAE,GAAG,UAAU,EAAE,GAAG,KAAK,CAAC;IAEvC,MAAM,GAAG,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IAChD,MAAM,CAAC,QAAQ,EAAE,AAAD,EAAG,KAAK,EAAE,MAAM,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEpD,MAAM,EAAE,GAAG,EAAE,GAAG,WAAW,CAAC,OAAO,CAAC,KAAK,IAAI,OAAO,CAAC,CAAC;IAEtD,MAAM,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,WAAW,EAAE,GAC1D,iBAAiB,CAAoB;QACnC,SAAS,EAAE,cAAc;QACzB,MAAM,EAAE,CAAC;KACV,CAAC,CAAC;IAEL,iBAAiB,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC;IAE9B,OAAO,CACL,8BACE,iBACE,IAAI,EAAC,QAAQ,EACb,GAAG,EAAE,mBAAmB,EACxB,GAAG,EAAE,sBAAsB,CAAC,IAAI,EAChC,OAAO,EAAE,MAAM,YAEf,cAAK,GAAG,EAAE,sBAAsB,CAAC,OAAO,YACtC,KAAC,iBAAiB,IAAC,KAAK,EAAE,GAAG,GAAI,GAC7B,GACC,EACR,QAAQ,IAAI,CACX,KAAC,MAAM,cACL,cACE,GAAG,EAAE,CAAC,GAAG,EAAE,EAAE;wBACX,gBAAgB,CAAC,GAAG,CAAC,CAAC;wBACtB,GAAG,CAAC,OAAO,GAAG,GAAG,CAAC;oBACpB,CAAC,KACG,WAAW,YAEf,KAAC,WAAW,IAAC,KAAK,EAAE,KAAK,KAAM,UAAU,GAAI,GACzC,GACC,CACV,IACA,CACJ,CAAC;AACJ,CAAC"}

package/lib-esm/components/color-picker/gradient-select/GradientSelect.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import * as scaleChromatic from 'd3-scale-chromatic';
+export declare const fixedGradientScales: {
+    turbo: typeof scaleChromatic.interpolateTurbo;
+    viridis: typeof scaleChromatic.interpolateViridis;
+    inferno: typeof scaleChromatic.interpolateInferno;
+    magma: typeof scaleChromatic.interpolateMagma;
+    plasma: typeof scaleChromatic.interpolatePlasma;
+};
+export type GradientScaleName = keyof typeof fixedGradientScales;
+export interface GradientSelectProps {
+    value: GradientScaleName;
+    onChange: (value: GradientScaleName) => void;
+}
+export declare function GradientSelect(props: GradientSelectProps): JSX.Element;
+//# sourceMappingURL=GradientSelect.d.ts.map

package/lib-esm/components/color-picker/gradient-select/GradientSelect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GradientSelect.d.ts","sourceRoot":"","sources":["../../../../src/components/color-picker/gradient-select/GradientSelect.tsx"],"names":[],"mappings":";AAEA,OAAO,KAAK,cAAc,MAAM,oBAAoB,CAAC;AAMrD,eAAO,MAAM,mBAAmB;;;;;;CAM/B,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG,MAAM,OAAO,mBAAmB,CAAC;AA4CjE,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,iBAAiB,CAAC;IACzB,QAAQ,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;CAC9C;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,eA0BxD"}

package/lib-esm/components/color-picker/gradient-select/GradientSelect.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from '@emotion/styled';
+import { Listbox } from '@headlessui/react';
+import * as scaleChromatic from 'd3-scale-chromatic';
+import { Fragment } from 'react';
+import { FaChevronDown } from 'react-icons/fa';
+import FixedGradientPreview from '../preview/FixedGradientPreview';
+export const fixedGradientScales = {
+    turbo: scaleChromatic.interpolateTurbo,
+    viridis: scaleChromatic.interpolateViridis,
+    inferno: scaleChromatic.interpolateInferno,
+    magma: scaleChromatic.interpolateMagma,
+    plasma: scaleChromatic.interpolatePlasma,
+};
+const scaleOptions = Object.keys(fixedGradientScales);
+const GradientSelectListbox = styled.div `
+  position: relative;
+  width: 100%;
+  border: 1px solid darkgray;
+  border-radius: 0.25rem;
+`;
+const GradientSelectButton = styled.button `
+  position: relative;
+  width: 100%;
+  height: 30px;
+  padding: 3px;
+`;
+const GradientSelectChevron = styled(FaChevronDown) `
+  position: absolute;
+  height: 100%;
+  top: 0;
+  right: 0.5rem;
+`;
+const GradientSelectOptions = styled.ul `
+  position: absolute;
+  width: 100%;
+  margin-top: 5px;
+  border: 1px solid darkgray;
+  border-radius: 0.25rem;
+  padding-inline: 3px;
+  padding-bottom: 5px;
+`;
+const GradientSelectOption = styled.li `
+  display: flex;
+  flex-direction: column;
+  padding-top: 5px;
+  cursor: pointer;
+  ${(props) => !props.active && 'opacity: 0.8;'}
+  ${(props) => props.active && 'font-weight: bold;'}
+`;
+export function GradientSelect(props) {
+    const { value, onChange } = props;
+    return (_jsx(Listbox, { value: value, onChange: onChange, children: _jsxs(GradientSelectListbox, { children: [_jsxs(Listbox.Button, { as: GradientSelectButton, children: [_jsx(FixedGradientPreview, { gradient: value }), _jsx(GradientSelectChevron, {})] }), _jsx(Listbox.Options, { as: GradientSelectOptions, children: scaleOptions.map((option) => (_jsx(Listbox.Option, { as: Fragment, value: option, children: ({ active }) => (_jsxs(GradientSelectOption, { active: active, children: [option, _jsx("div", { style: { height: 15 }, children: _jsx(FixedGradientPreview, { gradient: option }) })] })) }, option))) })] }) }));
+}
+//# sourceMappingURL=GradientSelect.js.map

package/lib-esm/components/color-picker/gradient-select/GradientSelect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GradientSelect.js","sourceRoot":"","sources":["../../../../src/components/color-picker/gradient-select/GradientSelect.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,OAAO,KAAK,cAAc,MAAM,oBAAoB,CAAC;AACrD,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAE/C,OAAO,oBAAoB,MAAM,iCAAiC,CAAC;AAEnE,MAAM,CAAC,MAAM,mBAAmB,GAAG;IACjC,KAAK,EAAE,cAAc,CAAC,gBAAgB;IACtC,OAAO,EAAE,cAAc,CAAC,kBAAkB;IAC1C,OAAO,EAAE,cAAc,CAAC,kBAAkB;IAC1C,KAAK,EAAE,cAAc,CAAC,gBAAgB;IACtC,MAAM,EAAE,cAAc,CAAC,iBAAiB;CACzC,CAAC;AAIF,MAAM,YAAY,GAAG,MAAM,CAAC,IAAI,CAAC,mBAAmB,CAAwB,CAAC;AAE7E,MAAM,qBAAqB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;CAKvC,CAAC;AAEF,MAAM,oBAAoB,GAAG,MAAM,CAAC,MAAM,CAAA;;;;;CAKzC,CAAC;AAEF,MAAM,qBAAqB,GAAG,MAAM,CAAC,aAAa,CAAC,CAAA;;;;;CAKlD,CAAC;AAEF,MAAM,qBAAqB,GAAG,MAAM,CAAC,EAAE,CAAA;;;;;;;;CAQtC,CAAC;AAEF,MAAM,oBAAoB,GAAG,MAAM,CAAC,EAAE,CAAqB;;;;;IAKvD,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,MAAM,IAAI,eAAe;IAC3C,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,MAAM,IAAI,oBAAoB;CAClD,CAAC;AAOF,MAAM,UAAU,cAAc,CAAC,KAA0B;IACvD,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAClC,OAAO,CACL,KAAC,OAAO,IAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,YACvC,MAAC,qBAAqB,eACpB,MAAC,OAAO,CAAC,MAAM,IAAC,EAAE,EAAE,oBAAoB,aACtC,KAAC,oBAAoB,IAAC,QAAQ,EAAE,KAAK,GAAI,EACzC,KAAC,qBAAqB,KAAG,IACV,EACjB,KAAC,OAAO,CAAC,OAAO,IAAC,EAAE,EAAE,qBAAqB,YACvC,YAAY,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAC5B,KAAC,OAAO,CAAC,MAAM,IAAC,EAAE,EAAE,QAAQ,EAAe,KAAK,EAAE,MAAM,YACrD,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CACf,MAAC,oBAAoB,IAAC,MAAM,EAAE,MAAM,aACjC,MAAM,EACP,cAAK,KAAK,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,YACxB,KAAC,oBAAoB,IAAC,QAAQ,EAAE,MAAM,GAAI,GACtC,IACe,CACxB,IARgC,MAAM,CASxB,CAClB,CAAC,GACc,IACI,GAChB,CACX,CAAC;AACJ,CAAC"}

package/lib-esm/components/color-picker/index.d.ts

@@ -0,0 +1,6 @@
+export * from './color-picker-dropdown/ColorPickerDropdown';
+export * from './gradient-select/GradientSelect';
+export * from './preview/ColorPreview';
+export * from './react-color/ColorPicker';
+export * from './palette';
+//# sourceMappingURL=index.d.ts.map

package/lib-esm/components/color-picker/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/color-picker/index.ts"],"names":[],"mappings":"AAAA,cAAc,6CAA6C,CAAC;AAC5D,cAAc,kCAAkC,CAAC;AACjD,cAAc,wBAAwB,CAAC;AACvC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,WAAW,CAAC"}

package/lib-esm/components/color-picker/index.js

@@ -0,0 +1,6 @@
+export * from './color-picker-dropdown/ColorPickerDropdown';
+export * from './gradient-select/GradientSelect';
+export * from './preview/ColorPreview';
+export * from './react-color/ColorPicker';
+export * from './palette';
+//# sourceMappingURL=index.js.map

package/lib-esm/components/color-picker/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/color-picker/index.ts"],"names":[],"mappings":"AAAA,cAAc,6CAA6C,CAAC;AAC5D,cAAc,kCAAkC,CAAC;AACjD,cAAc,wBAAwB,CAAC;AACvC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,WAAW,CAAC"}

package/lib-esm/components/color-picker/palette.d.ts

@@ -0,0 +1,2 @@
+export declare const defaultColorPalette: string[];
+//# sourceMappingURL=palette.d.ts.map

package/lib-esm/components/color-picker/palette.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"palette.d.ts","sourceRoot":"","sources":["../../../src/components/color-picker/palette.ts"],"names":[],"mappings":"AACA,eAAO,MAAM,mBAAmB,UAU/B,CAAC"}

package/lib-esm/components/color-picker/palette.js

@@ -0,0 +1,13 @@
+// Taken from https://personal.sron.nl/~pault/#fig:scheme_muted
+export const defaultColorPalette = [
+    '#CC6677',
+    '#332288',
+    '#DDCC77',
+    '#117733',
+    '#88CCEE',
+    '#882255',
+    '#44AA99',
+    '#999933',
+    '#AA4499',
+];
+//# sourceMappingURL=palette.js.map

package/lib-esm/components/color-picker/palette.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"palette.js","sourceRoot":"","sources":["../../../src/components/color-picker/palette.ts"],"names":[],"mappings":"AAAA,+DAA+D;AAC/D,MAAM,CAAC,MAAM,mBAAmB,GAAG;IACjC,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;CACV,CAAC"}

package/lib-esm/components/color-picker/preview/ColorPreview.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { ColorConfig } from '../../../app-data/index';
+export interface ColorPreviewProps {
+    color: ColorConfig;
+}
+export declare function ColorPreview(props: ColorPreviewProps): JSX.Element;
+//# sourceMappingURL=ColorPreview.d.ts.map

package/lib-esm/components/color-picker/preview/ColorPreview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPreview.d.ts","sourceRoot":"","sources":["../../../../src/components/color-picker/preview/ColorPreview.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAMtD,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,WAAW,CAAC;CACpB;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,eAYpD"}

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

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { assertUnreachable } from '../../utils/assert';
+import FixedColorPreview from './FixedColorPreview';
+import FixedGradientPreview from './FixedGradientPreview';
+export function ColorPreview(props) {
+    const { color } = props;
+    switch (color.kind) {
+        case 'fixed': {
+            return _jsx(FixedColorPreview, { color: color.color });
+        }
+        case 'fixedGradient': {
+            return _jsx(FixedGradientPreview, { gradient: color.gradient });
+        }
+        default:
+            assertUnreachable(color);
+    }
+}
+//# sourceMappingURL=ColorPreview.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPreview.js","sourceRoot":"","sources":["../../../../src/components/color-picker/preview/ColorPreview.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAEvD,OAAO,iBAAiB,MAAM,qBAAqB,CAAC;AACpD,OAAO,oBAAoB,MAAM,wBAAwB,CAAC;AAM1D,MAAM,UAAU,YAAY,CAAC,KAAwB;IACnD,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC;IACxB,QAAQ,KAAK,CAAC,IAAI,EAAE;QAClB,KAAK,OAAO,CAAC,CAAC;YACZ,OAAO,KAAC,iBAAiB,IAAC,KAAK,EAAE,KAAK,CAAC,KAAK,GAAI,CAAC;SAClD;QACD,KAAK,eAAe,CAAC,CAAC;YACpB,OAAO,KAAC,oBAAoB,IAAC,QAAQ,EAAE,KAAK,CAAC,QAAQ,GAAI,CAAC;SAC3D;QACD;YACE,iBAAiB,CAAC,KAAK,CAAC,CAAC;KAC5B;AACH,CAAC"}

package/lib-esm/components/color-picker/preview/FixedColorPreview.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+interface FixedColorPreviewProps {
+    color: string;
+}
+export default function FixedColorPreview(props: FixedColorPreviewProps): JSX.Element;
+export {};
+//# sourceMappingURL=FixedColorPreview.d.ts.map

package/lib-esm/components/color-picker/preview/FixedColorPreview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FixedColorPreview.d.ts","sourceRoot":"","sources":["../../../../src/components/color-picker/preview/FixedColorPreview.tsx"],"names":[],"mappings":";AAAA,UAAU,sBAAsB;IAC9B,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,eAKtE"}

package/lib-esm/components/color-picker/preview/FixedColorPreview.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function FixedColorPreview(props) {
+    const { color } = props;
+    return (_jsx("div", { style: { width: '100%', height: '100%', backgroundColor: color } }));
+}
+//# sourceMappingURL=FixedColorPreview.js.map

package/lib-esm/components/color-picker/preview/FixedColorPreview.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FixedColorPreview.js","sourceRoot":"","sources":["../../../../src/components/color-picker/preview/FixedColorPreview.tsx"],"names":[],"mappings":";AAIA,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,KAA6B;IACrE,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC;IACxB,OAAO,CACL,cAAK,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,eAAe,EAAE,KAAK,EAAE,GAAI,CAC1E,CAAC;AACJ,CAAC"}

package/lib-esm/components/color-picker/preview/FixedGradientPreview.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { GradientScaleName } from '../gradient-select/GradientSelect';
+interface FixedGradientPreviewProps {
+    gradient: GradientScaleName;
+}
+export default function FixedGradientPreview(props: FixedGradientPreviewProps): JSX.Element;
+export {};
+//# sourceMappingURL=FixedGradientPreview.d.ts.map

package/lib-esm/components/color-picker/preview/FixedGradientPreview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FixedGradientPreview.d.ts","sourceRoot":"","sources":["../../../../src/components/color-picker/preview/FixedGradientPreview.tsx"],"names":[],"mappings":";AAEA,OAAO,EACL,iBAAiB,EAElB,MAAM,mCAAmC,CAAC;AAE3C,UAAU,yBAAyB;IACjC,QAAQ,EAAE,iBAAiB,CAAC;CAC7B;AAED,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAC,KAAK,EAAE,yBAAyB,eAsB5E"}

package/lib-esm/components/color-picker/preview/FixedGradientPreview.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { fixedGradientScales, } from '../gradient-select/GradientSelect';
+export default function FixedGradientPreview(props) {
+    const { gradient } = props;
+    const scale = fixedGradientScales[gradient];
+    const gradientCss = useMemo(() => {
+        const stops = [];
+        for (let i = 0; i <= 100; i++) {
+            stops.push(scale(i / 100));
+        }
+        return `linear-gradient(to right, ${stops.join(', ')})`;
+    }, [scale]);
+    return (_jsx("div", { style: {
+            width: '100%',
+            height: '100%',
+            borderRadius: '0.125rem',
+            background: gradientCss,
+        } }));
+}
+//# sourceMappingURL=FixedGradientPreview.js.map

package/lib-esm/components/color-picker/preview/FixedGradientPreview.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FixedGradientPreview.js","sourceRoot":"","sources":["../../../../src/components/color-picker/preview/FixedGradientPreview.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAEhC,OAAO,EAEL,mBAAmB,GACpB,MAAM,mCAAmC,CAAC;AAM3C,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAC,KAAgC;IAC3E,MAAM,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAC3B,MAAM,KAAK,GAAG,mBAAmB,CAAC,QAAQ,CAAC,CAAC;IAE5C,MAAM,WAAW,GAAG,OAAO,CAAC,GAAG,EAAE;QAC/B,MAAM,KAAK,GAAa,EAAE,CAAC;QAC3B,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,GAAG,EAAE,CAAC,EAAE,EAAE;YAC7B,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC;SAC5B;QACD,OAAO,6BAA6B,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC;IAC1D,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,OAAO,CACL,cACE,KAAK,EAAE;YACL,KAAK,EAAE,MAAM;YACb,MAAM,EAAE,MAAM;YACd,YAAY,EAAE,UAAU;YACxB,UAAU,EAAE,WAAW;SACxB,GACD,CACH,CAAC;AACJ,CAAC"}

package/lib-esm/components/color-picker/react-color/ColorPicker.d.ts

@@ -0,0 +1,43 @@
+import { CSSProperties } from 'react';
+export interface RGB {
+    r: number;
+    g: number;
+    b: number;
+    a: number;
+}
+export interface HSL {
+    h: number;
+    l: number;
+    s: number;
+    a: number;
+}
+export interface HSV {
+    h: number;
+    s: number;
+    v: number;
+    a: number;
+}
+interface ChangeCallbackProps {
+    hex: string;
+    hsl: HSL;
+    hsv: HSV;
+    oldHue: number;
+    rgb: RGB;
+    source: 'hsv' | 'hsl' | 'rgb' | 'hex';
+}
+export interface ColorPickerProps {
+    width?: string | number;
+    className?: string;
+    presetColors?: string[];
+    color?: {
+        hex: string;
+    } | RGB | HSL | HSV;
+    disableAlpha?: boolean;
+    onChange?: (props: ChangeCallbackProps, event?: Event) => void;
+    onChangeComplete?: (props: ChangeCallbackProps, event?: Event) => void;
+    onSwatchHover?: (props: ChangeCallbackProps, event?: Event) => void;
+    style?: CSSProperties;
+}
+export declare function ColorPicker(props: ColorPickerProps): JSX.Element;
+export {};
+//# sourceMappingURL=ColorPicker.d.ts.map

package/lib-esm/components/color-picker/react-color/ColorPicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPicker.d.ts","sourceRoot":"","sources":["../../../../src/components/color-picker/react-color/ColorPicker.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAA4C,MAAM,OAAO,CAAC;AAShF,MAAM,WAAW,GAAG;IAClB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AACD,MAAM,WAAW,GAAG;IAClB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AACD,MAAM,WAAW,GAAG;IAClB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAED,UAAU,mBAAmB;IAC3B,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,GAAG,CAAC;IACT,GAAG,EAAE,GAAG,CAAC;IACT,MAAM,EAAE,MAAM,CAAC;IACf,GAAG,EAAE,GAAG,CAAC;IACT,MAAM,EAAE,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC;CACvC;AAED,MAAM,WAAW,gBAAgB;IAC/B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,KAAK,CAAC,EACF;QACE,GAAG,EAAE,MAAM,CAAC;KACb,GACD,GAAG,GACH,GAAG,GACH,GAAG,CAAC;IACR,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,mBAAmB,EAAE,KAAK,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;IAC/D,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,mBAAmB,EAAE,KAAK,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;IACvE,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,mBAAmB,EAAE,KAAK,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;IACpE,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAsFD,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,eA+FlD"}

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

@@ -0,0 +1,110 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import lodashDebounce from 'lodash/debounce';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { defaultColorPalette } from '../palette';
+import { Saturation, Hue, Alpha, CheckBoard } from './common';
+import * as colorHelper from './helpers/color';
+import SketchFields from './sketch/SketchFields';
+import SketchPresetColors from './sketch/SketchPresetColors';
+const defaultColor = {
+    h: 250,
+    s: 0.5,
+    l: 0.2,
+    a: 1,
+};
+const styles = {
+    picker: (width) => ({
+        width: typeof width === 'string' ? width : `${width}px`,
+        padding: '10px 10px 0',
+        boxSizing: 'initial',
+        background: '#fff',
+        borderRadius: '4px',
+        boxShadow: '0 0 0 1px rgba(0,0,0,.15), 0 8px 16px rgba(0,0,0,.15)',
+    }),
+    controls: {
+        display: 'flex',
+    },
+    sliders: {
+        padding: '4px 0',
+        flex: '1',
+    },
+    color: (disableAlpha) => ({
+        width: '24px',
+        height: disableAlpha ? '10px' : '24px',
+        position: 'relative',
+        marginTop: '4px',
+        marginLeft: '4px',
+        borderRadius: '3px',
+    }),
+    activeColor: (rgb) => ({
+        position: 'absolute',
+        left: 0,
+        top: 0,
+        right: 0,
+        bottom: 0,
+        borderRadius: '2px',
+        background: `rgba(${rgb.r},${rgb.g},${rgb.b},${rgb.a})`,
+        boxShadow: 'inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25)',
+    }),
+    saturationContainer: {
+        width: '100%',
+        paddingBottom: '75%',
+        position: 'relative',
+        overflow: 'hidden',
+    },
+    hueContainer: {
+        position: 'relative',
+        height: '10px',
+        overflow: 'hidden',
+    },
+    hueElement: {
+        borderRadius: '2px',
+        boxShadow: 'inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25)',
+    },
+    alphaContainer: (disableAlpha) => ({
+        position: 'relative',
+        height: '10px',
+        marginTop: '4px',
+        overflow: 'hidden',
+        ...(disableAlpha && { display: 'none' }),
+    }),
+    alphaElement: {
+        borderRadius: '2px',
+        boxShadow: 'inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25)',
+    },
+};
+export function ColorPicker(props) {
+    const { width = 200, onChange, onSwatchHover, disableAlpha = false, presetColors = defaultColorPalette, className = '', color = defaultColor, onChangeComplete, style = {}, } = props;
+    const [state, setState] = useState(colorHelper.toState(color, 0));
+    const debounce = useRef(lodashDebounce((fn, data, event) => {
+        fn(data, event);
+    }, 100)).current;
+    useEffect(() => {
+        setState((prevState) => colorHelper.toState(color, prevState.oldHue));
+    }, [color]);
+    const handleChange = useCallback((data, event) => {
+        const isValidColor = colorHelper.simpleCheckForValidColor(data);
+        if (isValidColor) {
+            const colors = colorHelper.toState(data, data.h || state.oldHue);
+            setState(colors);
+            if (onChangeComplete) {
+                debounce(onChangeComplete, colors, event);
+            }
+            if (onChange) {
+                onChange(colors, event);
+            }
+        }
+    }, [debounce, onChange, onChangeComplete, state.oldHue]);
+    const handleSwatchHover = useCallback((data, event) => {
+        const isValidColor = colorHelper.simpleCheckForValidColor(data);
+        if (isValidColor) {
+            const colors = colorHelper.toState(data, data.h || state.oldHue);
+            if (onSwatchHover) {
+                onSwatchHover(colors, event);
+            }
+        }
+    }, [onSwatchHover, state.oldHue]);
+    const { rgb, hex, hsv, hsl } = state;
+    return (_jsxs("div", { style: { ...styles.picker(width), ...style }, className: className, children: [_jsx("div", { style: styles.saturationContainer, children: _jsx(Saturation, { hsl: hsl, hsv: hsv, onChange: handleChange }) }), _jsxs("div", { style: styles.controls, children: [_jsxs("div", { style: styles.sliders, children: [_jsx("div", { style: styles.hueContainer, children: _jsx(Hue, { style: styles.hueElement, hsl: hsl, onChange: handleChange }) }), _jsx("div", { style: styles.alphaContainer(disableAlpha), children: _jsx(Alpha, { style: styles.alphaElement, rgb: rgb, hsl: hsl, onChange: handleChange }) })] }), _jsxs("div", { style: styles.color(disableAlpha), children: [_jsx(CheckBoard, {}), _jsx("div", { style: styles.activeColor(rgb) })] })] }), _jsx(SketchFields, { hsl: hsl, hex: hex, rgb: rgb, onChange: handleChange, disableAlpha: disableAlpha }), _jsx(SketchPresetColors, { colors: presetColors, onClick: (data, e) => handleChange?.(data, e), onSwatchHover: handleSwatchHover })] }));
+}
+//# sourceMappingURL=ColorPicker.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPicker.js","sourceRoot":"","sources":["../../../../src/components/color-picker/react-color/ColorPicker.tsx"],"names":[],"mappings":"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"}

package/lib-esm/components/color-picker/react-color/common/Alpha.d.ts

@@ -0,0 +1,3 @@
+export default Alpha;
+declare function Alpha(props: any): JSX.Element;
+//# sourceMappingURL=Alpha.d.ts.map

package/lib-esm/components/color-picker/react-color/common/Alpha.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Alpha.d.ts","sourceRoot":"","sources":["../../../../../src/components/color-picker/react-color/common/Alpha.jsx"],"names":[],"mappings":";AA0EA,gDA2CC"}

package/lib-esm/components/color-picker/react-color/common/Alpha.js

@@ -0,0 +1,83 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useRef } from 'react';
+import * as alpha from '../helpers/alpha';
+import CheckBoard from './CheckBoard';
+import { useOnChange } from './useOnChange';
+const styles = {
+    alpha: (borderRadius) => ({
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        borderRadius,
+    }),
+    checkerboard: (borderRadius) => ({
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        overflow: 'hidden',
+        borderRadius,
+    }),
+    gradient: (direction, boxShadow, borderRadius, rgb) => {
+        let gradientDirection = 'right';
+        if (direction === 'vertical') {
+            gradientDirection = 'bottom';
+        }
+        return {
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            boxShadow,
+            borderRadius,
+            background: `linear-gradient(to ${gradientDirection}, rgba(${rgb.r},${rgb.g},${rgb.b}, 0) 0%,
+      rgba(${rgb.r},${rgb.g},${rgb.b}, 1) 100%)`,
+        };
+    },
+    container: {
+        position: 'relative',
+        height: '100%',
+        margin: '0 3px',
+    },
+    pointer: (direction, rgb) => {
+        if (direction === 'vertical') {
+            return {
+                position: 'absolute',
+                left: 0,
+                top: `${rgb.a * 100}%`,
+            };
+        }
+        return {
+            position: 'absolute',
+            left: `${rgb.a * 100}%`,
+        };
+    },
+    slider: {
+        width: '4px',
+        borderRadius: '1px',
+        height: '8px',
+        boxShadow: '0 0 2px rgba(0, 0, 0, .6)',
+        background: '#fff',
+        marginTop: '1px',
+        transform: 'translateX(-2px)',
+    },
+};
+const Alpha = (props) => {
+    const containerRef = useRef();
+    const handleChange = useCallback((e) => {
+        const change = alpha.calculateChange(e, props.hsl, props.direction, props.a, containerRef.current);
+        if (change && typeof props.onChange === 'function') {
+            props.onChange(change, e);
+        }
+    }, [props]);
+    const mouseDownHandler = useOnChange(handleChange);
+    const rgb = props.rgb;
+    const { borderRadius, boxShadow, direction } = props.style;
+    return (_jsxs("div", { style: styles.alpha(borderRadius), children: [_jsx("div", { style: styles.checkerboard(borderRadius), children: _jsx(CheckBoard, { renderers: props.renderers }) }), _jsx("div", { style: styles.gradient(direction, boxShadow, borderRadius, rgb) }), _jsx("div", { style: styles.container, ref: containerRef, onMouseDown: mouseDownHandler, onTouchMove: handleChange, onTouchStart: handleChange, children: _jsx("div", { style: styles.pointer(direction, rgb), children: props.pointer ? (_jsx(props.pointer, { ...props })) : (_jsx("div", { style: styles.slider })) }) })] }));
+};
+export default Alpha;
+//# sourceMappingURL=Alpha.js.map

package/lib-esm/components/color-picker/react-color/common/Alpha.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Alpha.js","sourceRoot":"","sources":["../../../../../src/components/color-picker/react-color/common/Alpha.jsx"],"names":[],"mappings":"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"}

package/lib-esm/components/color-picker/react-color/common/CheckBoard.d.ts

@@ -0,0 +1,3 @@
+export default CheckBoard;
+declare function CheckBoard(props: any): JSX.Element;
+//# sourceMappingURL=CheckBoard.d.ts.map

package/lib-esm/components/color-picker/react-color/common/CheckBoard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckBoard.d.ts","sourceRoot":"","sources":["../../../../../src/components/color-picker/react-color/common/CheckBoard.jsx"],"names":[],"mappings":";AAiCA,qDAWC"}

package/lib-esm/components/color-picker/react-color/common/CheckBoard.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cloneElement, isValidElement } from 'react';
+import * as checkBoard from '../helpers/checkBoard';
+const styles = {
+    grid: (props) => {
+        const { size = 8, white = 'transparent', grey = 'rgba(0,0,0,.08)', renderers = {}, borderRadius, boxShadow, } = props;
+        return {
+            borderRadius,
+            boxShadow,
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            background: `url(${checkBoard.get(white, grey, size, renderers.canvas)}) center left`,
+        };
+    },
+};
+const CheckBoard = (props) => {
+    const { children } = props;
+    if (!isValidElement(children)) {
+        return _jsx("div", { style: styles.grid(props) });
+    }
+    return cloneElement(children, {
+        ...children.props,
+        style: { ...children.props.style, ...styles.grid(props) },
+    });
+};
+export default CheckBoard;
+//# sourceMappingURL=CheckBoard.js.map

package/lib-esm/components/color-picker/react-color/common/CheckBoard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckBoard.js","sourceRoot":"","sources":["../../../../../src/components/color-picker/react-color/common/CheckBoard.jsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAErD,OAAO,KAAK,UAAU,MAAM,uBAAuB,CAAC;AAEpD,MAAM,MAAM,GAAG;IACb,IAAI,EAAE,CAAC,KAAK,EAAE,EAAE;QACd,MAAM,EACJ,IAAI,GAAG,CAAC,EACR,KAAK,GAAG,aAAa,EACrB,IAAI,GAAG,iBAAiB,EACxB,SAAS,GAAG,EAAE,EACd,YAAY,EACZ,SAAS,GACV,GAAG,KAAK,CAAC;QAEV,OAAO;YACL,YAAY;YACZ,SAAS;YACT,QAAQ,EAAE,UAAU;YACpB,GAAG,EAAE,CAAC;YACN,IAAI,EAAE,CAAC;YACP,KAAK,EAAE,CAAC;YACR,MAAM,EAAE,CAAC;YACT,UAAU,EAAE,OAAO,UAAU,CAAC,GAAG,CAC/B,KAAK,EACL,IAAI,EACJ,IAAI,EACJ,SAAS,CAAC,MAAM,CACjB,eAAe;SACjB,CAAC;IACJ,CAAC;CACF,CAAC;AAEF,MAAM,UAAU,GAAG,CAAC,KAAK,EAAE,EAAE;IAC3B,MAAM,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAE3B,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE;QAC7B,OAAO,cAAK,KAAK,EAAE,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,GAAI,CAAC;KAC3C;IAED,OAAO,YAAY,CAAC,QAAQ,EAAE;QAC5B,GAAG,QAAQ,CAAC,KAAK;QACjB,KAAK,EAAE,EAAE,GAAG,QAAQ,CAAC,KAAK,CAAC,KAAK,EAAE,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE;KAC1D,CAAC,CAAC;AACL,CAAC,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/lib-esm/components/color-picker/react-color/common/EditableInput.d.ts

@@ -0,0 +1,3 @@
+export default EditableInput;
+declare function EditableInput(props: any): JSX.Element;
+//# sourceMappingURL=EditableInput.d.ts.map

package/lib-esm/components/color-picker/react-color/common/EditableInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditableInput.d.ts","sourceRoot":"","sources":["../../../../../src/components/color-picker/react-color/common/EditableInput.jsx"],"names":[],"mappings":";AAkBA,wDA2IC"}