zds-pickers 4.0.8 → 4.0.9

package/lib/pickers/KnobPicker.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useMemo } from 'react';
+import { arraySequence } from '../utils';
+import Knob from './Knob';
+import Select from './Select';
+const KnobPicker = forwardRef((props, ref) => {
+    const { disabled, highToLow, includeLabel, includePicker, knobProps, label, max = 127, min = 0, onChange, shrinkLabel, value = 0, wheelEnabled, wheelSensitivity = 0.1, ...rest } = props;
+    const options = useMemo(() => {
+        const result = arraySequence(max - min + 1)
+            .map(i => min + i)
+            .map((i) => ({ value: i, label: String(i) }));
+        return highToLow ? result.reverse() : result;
+    }, [highToLow, max, min]);
+    return (_jsxs("div", { className: "zds-pickers__container", children: [Boolean(!shrinkLabel && Boolean(label)) && (_jsx("span", { className: "zds-pickers__label", children: label })), _jsxs("div", { style: { display: 'inline-flex', gap: 10, alignItems: 'center' }, children: [Boolean(includePicker) && (_jsx(Select, { ...rest,
+                        disabled,
+                        isDisabled: disabled,
+                        onChange,
+                        options,
+                        ref,
+                        value })), _jsx(Knob, { disabled,
+                        max,
+                        min,
+                        onChange,
+                        value,
+                        wheelEnabled,
+                        wheelSensitivity,
+                        ...knobProps })] })] }));
+});
+export default KnobPicker;

package/lib/pickers/LatchPicker.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import Select from './Select';
+const options = [
+    { value: 0, label: 'Momentary' },
+    { value: 1, label: 'Latching' },
+];
+const LatchPicker = forwardRef((props, ref) => (_jsx(Select, { ...props, options: options, ref: ref })));
+export default LatchPicker;

package/lib/pickers/MappingPicker.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useMemo } from 'react';
+import { getStockNames, getUserMappingNames } from 'zds-mappings';
+import Select from './Select';
+const MappingPicker = forwardRef(({ allowClearing, ...rest }, ref) => {
+    const stockMappings = getStockNames();
+    const userMappings = getUserMappingNames();
+    const options = useMemo(() => {
+        const result = allowClearing
+            ? [
+                {
+                    value: 'No Mapping',
+                    label: (_jsx("span", { className: "zds-mappings-clear-mapping", children: "No Mapping" })),
+                },
+            ]
+            : [];
+        return [
+            ...result,
+            {
+                label: allowClearing ? _jsx("hr", {}) : '',
+                options: userMappings.map(label => ({
+                    value: label,
+                    label: _jsx("span", { className: "zds-mappings-user-mapping", children: label }),
+                })),
+            },
+            {
+                label: userMappings.length ? _jsx("hr", {}) : allowClearing ? _jsx("hr", {}) : '',
+                options: stockMappings.map(label => ({
+                    label,
+                    value: label,
+                })),
+            },
+        ];
+    }, [allowClearing, stockMappings, userMappings]);
+    return (_jsx(Select, { ...rest, options: options, ref: ref }));
+});
+export default MappingPicker;

package/lib/pickers/NotePicker.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useCallback, useMemo } from 'react';
+import { Midi } from 'tonal';
+import { emptyMapping } from 'zds-mappings';
+import useStateWithDynamicDefault from '../hooks/useStateWithDynamicDefault';
+import { assertRange } from '../utils';
+import Select from './Select';
+const { midiToNoteName } = Midi;
+const formattedMapEntry = ({ note, name }) => `${note} ${name.length ? '-' : ''} ${name}`;
+const formattedListEntry = (label, idx) => ({
+    label,
+    value: idx + 1,
+});
+const NotePicker = forwardRef((props, ref) => {
+    const { channel, disabled = false, isMelodicMode = false, mapping, onChange, value: initialValue, ...rest } = props;
+    const options = useMemo(() => {
+        if (isMelodicMode) {
+            return emptyMapping()
+                .map(({ note }) => {
+                const midiNoteName = midiToNoteName(note, { sharps: false })
+                    .replace('b', '♭')
+                    .replace('#', '♯');
+                return `${midiNoteName} (#${note})`;
+            })
+                .map(formattedListEntry);
+        }
+        return (mapping || emptyMapping())
+            .map(formattedMapEntry)
+            .map(formattedListEntry);
+    }, [isMelodicMode, mapping]);
+    const [value, setValue] = useStateWithDynamicDefault(initialValue);
+    const handleChange = useCallback((v) => {
+        if (typeof v === 'string')
+            return;
+        const possibleNoteNumber = assertRange(v, 128, 0);
+        if (possibleNoteNumber > 0) {
+            onChange(possibleNoteNumber);
+        }
+        setValue(v);
+    }, [onChange, setValue]);
+    return (_jsx(Select, { ...rest, disabled: disabled, 
+        // isDisabled={disabled}
+        onChange: handleChange, options: options, ref: ref, value: value }));
+});
+export default NotePicker;

package/lib/pickers/PianoPicker.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Piano as ReactPiano } from 'zds-react-piano';
+import SoundfontProvider from '../other/SoundFontProvider';
+const firstNote = 21;
+const lastNote = 108;
+const numNotes = lastNote - firstNote - 1;
+const whiteNotes = numNotes * 0.7; // approx
+const audioContext = new window.AudioContext();
+const PianoPicker = ({ height, width, ...rest }) => {
+    const keyWidth = width / whiteNotes + 2;
+    const keyWidthToHeight = keyWidth / height;
+    return (_jsx("div", { children: _jsx(ReactPiano, { keyWidthToHeight: keyWidthToHeight, noteRange: { first: firstNote, last: lastNote }, width: width, ...rest }) }));
+};
+const WithProvider = ({ format, height, hostname, instrumentName, onChange, onClick, onDoubleClick, onKeyMouseEnter, onKeyMouseLeave, soundfont, width, }) => (_jsx(SoundfontProvider, { audioContext,
+    format,
+    hostname,
+    instrumentName,
+    onChange,
+    soundfont, render: ({ isLoading, playNote, stopNote }) => (_jsx(PianoPicker, { disabled: isLoading, height,
+        onClick,
+        onDoubleClick,
+        onKeyMouseEnter,
+        onKeyMouseLeave,
+        playNote,
+        stopNote,
+        width })) }));
+export default WithProvider;

package/lib/pickers/PolarityPicker.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import Select from './Select';
+const PolarityPicker = forwardRef(({ labelOff = 'Normally Off', labelOn = 'Normally On', ...rest }, ref) => {
+    const options = [
+        { value: 0, label: labelOff },
+        { value: 1, label: labelOn },
+    ];
+    return (_jsx(Select, { ...rest, options: options, ref: ref }));
+});
+export default PolarityPicker;

package/lib/pickers/ResponseCurve.js

@@ -0,0 +1,154 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from 'react';
+import useComponentSize from '../hooks/useComponentSize';
+import DefaultTooltip from '../other/DefaultTooltip';
+import SVGText from '../other/SVGText';
+const RESPONSE_CURVE_0 = 0;
+const RESPONSE_CURVE_1 = 1;
+const RESPONSE_CURVE_2 = 2;
+const RESPONSE_CURVE_3 = 3;
+const RESPONSE_CURVE_4 = 4;
+const RESPONSE_CURVE_5 = 5;
+const RESPONSE_CURVE_6 = 6;
+const RESPONSE_CURVE_7 = 7;
+const RESPONSE_CURVES = [
+    {
+        value: RESPONSE_CURVE_7,
+        label: 'Always maxed out.',
+    },
+    {
+        value: RESPONSE_CURVE_6,
+        label: 'Most sensitive.',
+    },
+    {
+        value: RESPONSE_CURVE_5,
+        label: 'Moderately sensitive.',
+    },
+    {
+        value: RESPONSE_CURVE_4,
+        label: 'A little sensitive.',
+    },
+    {
+        value: RESPONSE_CURVE_0,
+        label: 'Linear, no change.',
+    },
+    {
+        value: RESPONSE_CURVE_1,
+        label: 'A little less sensitive.',
+    },
+    {
+        value: RESPONSE_CURVE_2,
+        label: 'Even less sensitive.',
+    },
+    {
+        value: RESPONSE_CURVE_3,
+        label: 'Least sensitive.',
+    },
+];
+// const width = 218
+// const height = 150
+const axisOffset = 20;
+const buttonSize = 15;
+const axisX1 = axisOffset;
+const axisY1 = axisOffset;
+const ResponseCurve = (props) => {
+    const { Tooltip = DefaultTooltip, autosize, disabled, inverted, onChange, value: responseCurve, } = props;
+    const ref = useRef(null);
+    const svgRef = useRef(null);
+    const { height: ourHeight, width: ourWidth } = useComponentSize(ref);
+    const width = autosize ? ourWidth || 218 : 218;
+    const height = autosize ? ourHeight || 150 : 150;
+    const axisX2 = width - axisOffset;
+    const axisY2 = height - axisOffset;
+    const xMid = width / 2;
+    const yMid = height / 2;
+    const svgProps = { ref: svgRef };
+    const responseCurves = RESPONSE_CURVES.map(
+    // biome-ignore lint/complexity/noExcessiveCognitiveComplexity: <explanation>
+    ({ value, label }) => {
+        let c1 = 0;
+        let c2 = 0;
+        let x1 = axisX1;
+        let y1 = inverted ? axisY1 : axisY2;
+        let x2 = axisX2;
+        let y2 = inverted ? axisY2 : axisY1;
+        let labelX = xMid;
+        let labelY = yMid;
+        switch (value) {
+            case RESPONSE_CURVE_0:
+                c1 = xMid;
+                c2 = yMid;
+                labelY += 3;
+                break;
+            case RESPONSE_CURVE_1:
+                c1 = inverted ? xMid + width * 0.13 : xMid - width * 0.13;
+                c2 = yMid - height * 0.13;
+                labelX = inverted ? xMid + width * 0.1 : xMid - width * 0.1;
+                labelY = yMid - height * 0.09;
+                break;
+            case RESPONSE_CURVE_2:
+                c1 = inverted ? xMid + width * 0.25 : xMid - width * 0.25;
+                c2 = yMid - height * 0.25;
+                labelX = inverted ? xMid + width * 0.2 : xMid - width * 0.2;
+                labelY = yMid - height * 0.17;
+                break;
+            case RESPONSE_CURVE_3:
+                c1 = inverted ? xMid + width * 0.35 : xMid - width * 0.35;
+                c2 = yMid - height * 0.35;
+                labelX = inverted ? xMid + width * 0.28 : xMid - width * 0.28;
+                labelY = yMid - height * 0.25;
+                break;
+            case RESPONSE_CURVE_4:
+                c1 = inverted ? xMid - width * 0.13 : xMid + width * 0.13;
+                c2 = yMid + height * 0.13;
+                labelX = inverted ? xMid - width * 0.1 : xMid + width * 0.1;
+                labelY = yMid + height * 0.1;
+                break;
+            case RESPONSE_CURVE_5:
+                c1 = inverted ? xMid - width * 0.25 : xMid + width * 0.25;
+                c2 = yMid + height * 0.25;
+                labelX = inverted ? xMid - width * 0.2 : xMid + width * 0.2;
+                labelY = yMid + height * 0.18;
+                break;
+            case RESPONSE_CURVE_6:
+                c1 = inverted ? xMid - width * 0.35 : xMid + width * 0.35;
+                c2 = yMid + height * 0.35;
+                labelX = inverted ? xMid - width * 0.28 : xMid + width * 0.28;
+                labelY = yMid + height * 0.25;
+                break;
+            case RESPONSE_CURVE_7:
+                x1 = inverted ? axisX1 : axisX2;
+                y1 = axisY1;
+                x2 = x1;
+                y2 = axisY2;
+                c1 = x1;
+                c2 = yMid;
+                labelX = x1 - 5;
+                labelY = height - 30;
+                break;
+            default:
+                break;
+        }
+        return {
+            value,
+            label,
+            c1,
+            c2,
+            x1,
+            y1,
+            x2,
+            y2,
+            labelX,
+            labelY,
+        };
+    });
+    return (_jsx("div", { className: "response-curve-picker", ref: ref, children: _jsxs("svg", { ...svgProps, children: [_jsx("rect", { className: "container", height: height, rx: 3, ry: 3, width: width, x: 0, y: 0 }), _jsx(SVGText, { className: "axis", textAnchor: "middle", transform: `translate(${axisX1 - 14} ${height / 2}) rotate(90)`, x: 0, y: 0, text: "Applied force" }), _jsx(SVGText, { className: "axis", textAnchor: "middle", transform: `translate(${width / 2} ${axisY2 + 13})`, x: 0, y: 0, text: "Output (velocity)" }), _jsx("line", { className: "axis", x1: axisX1, x2: axisX1, y1: axisY1, y2: axisY2 }), _jsx("line", { className: "axis", x1: axisX1, x2: axisX2, y1: axisY2, y2: axisY2 }), responseCurves.map(({ value, label, x1, y1, x2, y2, c1, c2, labelX, labelY }) => (_jsxs("g", { children: [_jsx("path", { className: value === responseCurve ? 'curve-selected' : 'curve', d: `M${x1} ${y1} C ${c1} ${c2}, ${c1} ${c2}, ${x2} ${y2}` }), _jsx(Tooltip, { placement: "left", title: label, children: _jsx("rect", { className: value === responseCurve ? 'button-selected' : 'button', height: buttonSize, onClick: disabled
+                                    ? f => f
+                                    : () => onChange({
+                                        target: {
+                                            value: Number.parseInt(String(value)),
+                                        },
+                                    }), transform: `translate(${labelX + 3} ${labelY - buttonSize / 1.05}) rotate(45)`, width: buttonSize }) }), _jsxs("text", { className: value === responseCurve ? 'button-selected' : 'button', transform: `translate(${labelX} ${labelY})`, children: [value, _jsx("title", { children: label })] })] }, value)))] }) }));
+};
+export default ResponseCurve;
+export { RESPONSE_CURVES };

package/lib/pickers/ResponseCurvePicker.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useCallback } from 'react';
+import DefaultTooltip from '../other/DefaultTooltip';
+import { findObj } from '../utils';
+import ResponseCurve, { RESPONSE_CURVES } from './ResponseCurve';
+import Select from './Select';
+const ResponseCurvePicker = forwardRef((props, ref) => {
+    const { Tooltip = DefaultTooltip, inverted = false, onChange, value, ...rest } = props;
+    const Placeholder = useCallback(() => (_jsx("div", { className: "singleValue", children: findObj('value', value)(RESPONSE_CURVES)?.label })), [value]);
+    const MenuList = useCallback(({ setValue }) => (_jsx(ResponseCurve, { autosize: true, inverted: inverted, onChange: ({ target: { value: v } }) => {
+            setValue(v);
+            onChange(v);
+        }, Tooltip: Tooltip, value: Number.parseInt(String(value)) })), [Tooltip, inverted, onChange, value]);
+    return (_jsx(Select, { ...rest, components: {
+            Placeholder,
+            MenuList,
+        }, isSearchable: false, onChange: f => f, ref: ref, value: value }));
+});
+export default ResponseCurvePicker;

package/lib/pickers/Select.js

@@ -0,0 +1,79 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Children, forwardRef, isValidElement, useCallback, useMemo, } from 'react';
+import ReactSelect, { components as originalComponents, } from 'react-select';
+import { omit } from '../utils';
+const { IndicatorsContainer, Placeholder, ValueContainer } = originalComponents;
+const CustomIndicatorsContainer = ({ children, ...rest }) => {
+    const actionButton = rest.selectProps?.actionButton;
+    return (_jsx(IndicatorsContainer, { ...rest, children: _jsxs("div", { onMouseDown: e => {
+                e.stopPropagation();
+                e.preventDefault();
+            }, style: { display: 'flex' }, children: [actionButton, children] }) }));
+};
+const CustomValueContainer = ({ children, ...props }) => (_jsxs(ValueContainer, { ...props, children: [_jsx(Placeholder, { ...props, innerProps: props.innerProps || {}, className: props.hasValue || props.selectProps.inputValue ? 'shrunk' : '', isFocused: props.isFocused ?? false, children: props.selectProps.placeholder }), Children.map(children, child => isValidElement(child) && child.type !== Placeholder ? child : null)] }));
+const Select = forwardRef((props, ref) => {
+    const { components, disabled, label, onChange, options = [], preserveMenuWidth, shrinkLabel, value, ...rest } = props;
+    const handleChange = useCallback((option) => {
+        if (option) {
+            onChange(option.value);
+        }
+    }, [onChange]);
+    const flatOptionsList = options.reduce((acc, entry) => {
+        if ('entries' in entry) {
+            return acc.concat(entry.entries);
+        }
+        return acc.concat(entry);
+    }, []);
+    const selectedOption = flatOptionsList.find(option => value === option.value) || undefined;
+    const styles = useMemo(() => {
+        const base = preserveMenuWidth
+            ? {
+                menu: (base) => omit('width')(base),
+                menuList: (base) => ({
+                    ...base,
+                    overflowX: 'hidden',
+                }),
+                option: (base) => ({
+                    ...base,
+                    whiteSpace: 'nowrap',
+                    paddingRight: 10,
+                }),
+            }
+            : {};
+        return shrinkLabel
+            ? {
+                ...base,
+                container: (provided /* , state */) => ({
+                    ...provided,
+                    marginTop: 10,
+                }),
+                placeholder: (_provided, state) => ({
+                    position: 'absolute',
+                    left: state.hasValue || state.selectProps.inputValue ? -2 : '4%',
+                    top: state.hasValue || state.selectProps.inputValue ? -12 : '50%',
+                    transition: 'top 0.1s, font-size 0.1s, color 0.1s',
+                    fontSize: (state.hasValue || state.selectProps.inputValue) && 13,
+                }),
+                valueContainer: (provided /* , state */) => ({
+                    ...provided,
+                    overflow: 'visible',
+                }),
+            }
+            : {
+                ...base,
+            };
+    }, [preserveMenuWidth, shrinkLabel]);
+    return shrinkLabel ? (_jsx("div", { className: "zds-pickers__container", children: _jsx(ReactSelect, { ...rest, classNamePrefix: "zds-pickers", components: {
+                IndicatorsContainer: CustomIndicatorsContainer,
+                ValueContainer: CustomValueContainer,
+                ...components,
+            }, isDisabled: disabled, onChange: handleChange, options: flatOptionsList, placeholder: label, 
+            // biome-ignore lint/suspicious/noExplicitAny: <explanation>
+            ref: ref, styles: styles, value: selectedOption }) })) : (_jsxs("div", { className: "zds-pickers__container", children: [Boolean(label) && _jsx("span", { className: "zds-pickers__label", children: label }), _jsx(ReactSelect, { ...rest, classNamePrefix: "zds-pickers", components: {
+                    IndicatorsContainer: CustomIndicatorsContainer,
+                    ...components,
+                }, isDisabled: disabled, onChange: handleChange, options: flatOptionsList, 
+                // biome-ignore lint/suspicious/noExplicitAny: <explanation>
+                ref: ref, styles: styles, value: selectedOption })] }));
+});
+export default Select;

package/lib/pickers/StatusPicker.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import Select from './Select';
+const StatusPicker = forwardRef(({ statuses, ...rest }, ref) => (_jsx(Select, { ...rest, options: statuses, ref: ref })));
+export default StatusPicker;

package/lib/pickers/ValuePicker.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useCallback, useMemo } from 'react';
+import useStateWithDynamicDefault from '../hooks/useStateWithDynamicDefault';
+import { arraySequence, assertRange } from '../utils';
+import Select from './Select';
+const ValuePicker = forwardRef((props, ref) => {
+    const { disabled, highToLow, max = 127, min = 0, onChange, value: initialValue = 0, ...rest } = props;
+    const options = useMemo(() => {
+        const result = arraySequence(max - min + 1)
+            .map(i => min + i)
+            .map(value => ({ value, label: value }));
+        return (highToLow
+            ? result.reverse()
+            : result);
+    }, [highToLow, max, min]);
+    const [value, setValue] = useStateWithDynamicDefault(initialValue);
+    const handleChange = useCallback((v) => {
+        onChange(assertRange(v, max, min));
+        setValue(Number.parseInt(String(v), 10));
+    }, [max, min, onChange, setValue]);
+    return (_jsx(Select, { ...rest, disabled: disabled, onChange: handleChange, options: options, ref: ref, value: value }));
+});
+export default ValuePicker;

package/lib/pickers/knobSkin10.js

@@ -0,0 +1,93 @@
+const knobSkin10 = {
+    knobX: 71.44,
+    knobY: 71.44,
+    svg: `
+  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="207px" height="207px" viewBox="0 0 207 207" version="1.1">
+  <!-- Generator: Sketch 47.1 (45422) - http://www.bohemiancoding.com/sketch -->
+  <desc>Created with Sketch.</desc>
+  <defs>
+      <linearGradient x1="50%" y1="50%" x2="50%" y2="100%" id="27c61b0f-392f-962d-de12-cb9da898274b">
+          <stop stop-color="#444040" stop-opacity="0.51098279" offset="0%"/>
+          <stop stop-color="#131111" stop-opacity="0.893200861" offset="100%"/>
+      </linearGradient>
+      <circle id="e966567b-3869-4bcd-76b6-2cf084e45390" cx="100.497487" cy="100.497487" r="99.4974874"/>
+      <filter x="-3.3%" y="-3.3%" width="106.5%" height="106.5%" filterUnits="objectBoundingBox" id="e2e6829f-0086-96b2-e92a-6f3809b8ac61">
+          <feMorphology radius="0.5" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"/>
+          <feOffset dx="0" dy="0" in="shadowSpreadOuter1" result="shadowOffsetOuter1"/>
+          <feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"/>
+          <feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"/>
+          <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1"/>
+      </filter>
+      <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="0facd5c9-8e04-e83f-4842-8ba16f949942">
+          <stop stop-color="#FFFFFF" stop-opacity="0.5" offset="0%"/>
+          <stop stop-color="#000000" stop-opacity="0.5" offset="100%"/>
+      </linearGradient>
+      <circle id="c54189ed-7ea3-956c-f040-f0207548b268" cx="100.432161" cy="100.432161" r="86.4321608"/>
+      <filter x="-4.0%" y="-3.5%" width="108.1%" height="108.1%" filterUnits="objectBoundingBox" id="dedf2e7e-f008-c315-f682-e424d670f210">
+          <feMorphology radius="0.5" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"/>
+          <feOffset dx="0" dy="1" in="shadowSpreadOuter1" result="shadowOffsetOuter1"/>
+          <feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"/>
+          <feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"/>
+          <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1"/>
+      </filter>
+
+      <filter x="-5.3%" y="-11.3%" width="110.7%" height="122.6%" filterUnits="objectBoundingBox" id="12f618f7-e258-b597-3ed6-242484ddad8f">
+          <feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"/>
+          <feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"/>
+          <feColorMatrix values="0 0 0 0 0.915577168   0 0 0 0 0.797591325   0 0 0 0 0.601479722  0 0 0 1 0" type="matrix" in="shadowBlurOuter1"/>
+      </filter>
+      <pattern id="3cc0e5b8-1f0a-886b-f635-8fcb19212870" width="8.04411765" height="8.04411765" x="21.9558824" y="21.9558824" patternUnits="userSpaceOnUse">
+          <use xlink:href="#2b8719c1-286b-ebf8-a488-ac66a6598fc5" transform="scale(0.167585784,0.167585784)"/>
+      </pattern>
+      <image id="2b8719c1-286b-ebf8-a488-ac66a6598fc5" width="48" height="48" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAEGWlDQ1BrQ0dDb2xvclNwYWNlR2VuZXJpY1JHQgAAOI2NVV1oHFUUPrtzZyMkzlNsNIV0qD8NJQ2TVjShtLp/3d02bpZJNtoi6GT27s6Yyc44M7v9oU9FUHwx6psUxL+3gCAo9Q/bPrQvlQol2tQgKD60+INQ6Ium65k7M5lpurHeZe58853vnnvuuWfvBei5qliWkRQBFpquLRcy4nOHj4g9K5CEh6AXBqFXUR0rXalMAjZPC3e1W99Dwntf2dXd/p+tt0YdFSBxH2Kz5qgLiI8B8KdVy3YBevqRHz/qWh72Yui3MUDEL3q44WPXw3M+fo1pZuQs4tOIBVVTaoiXEI/MxfhGDPsxsNZfoE1q66ro5aJim3XdoLFw72H+n23BaIXzbcOnz5mfPoTvYVz7KzUl5+FRxEuqkp9G/Ajia219thzg25abkRE/BpDc3pqvphHvRFys2weqvp+krbWKIX7nhDbzLOItiM8358pTwdirqpPFnMF2xLc1WvLyOwTAibpbmvHHcvttU57y5+XqNZrLe3lE/Pq8eUj2fXKfOe3pfOjzhJYtB/yll5SDFcSDiH+hRkH25+L+sdxKEAMZahrlSX8ukqMOWy/jXW2m6M9LDBc31B9LFuv6gVKg/0Szi3KAr1kGq1GMjU/aLbnq6/lRxc4XfJ98hTargX++DbMJBSiYMIe9Ck1YAxFkKEAG3xbYaKmDDgYyFK0UGYpfoWYXG+fAPPI6tJnNwb7ClP7IyF+D+bjOtCpkhz6CFrIa/I6sFtNl8auFXGMTP34sNwI/JhkgEtmDz14ySfaRcTIBInmKPE32kxyyE2Tv+thKbEVePDfW/byMM1Kmm0XdObS7oGD/MypMXFPXrCwOtoYjyyn7BV29/MZfsVzpLDdRtuIZnbpXzvlf+ev8MvYr/Gqk4H/kV/G3csdazLuyTMPsbFhzd1UabQbjFvDRmcWJxR3zcfHkVw9GfpbJmeev9F08WW8uDkaslwX6avlWGU6NRKz0g/SHtCy9J30o/ca9zX3Kfc19zn3BXQKRO8ud477hLnAfc1/G9mrzGlrfexZ5GLdn6ZZrrEohI2wVHhZywjbhUWEy8icMCGNCUdiBlq3r+xafL549HQ5jH+an+1y+LlYBifuxAvRN/lVVVOlwlCkdVm9NOL5BE4wkQ2SMlDZU97hX86EilU/lUmkQUztTE6mx1EEPh7OmdqBtAvv8HdWpbrJS6tJj3n0CWdM6busNzRV3S9KTYhqvNiqWmuroiKgYhshMjmhTh9ptWhsF7970j/SbMrsPE1suR5z7DMC+P/Hs+y7ijrQAlhyAgccjbhjPygfeBTjzhNqy28EdkUh8C+DU9+z2v/oyeH791OncxHOs5y2AtTc7nb/f73TWPkD/qwBnjX8BoJ98VQNcC+8AAAFFSURBVGgF7djbDYMwDAXQBjEMYqyqY1WMxTppLiJIQIA8ariWkp8IPuweO60am67r7MstY8wwjuPH7dMz3uUua63p+/7r9rePIRW/9QmQzCV9ub0YgSIgzhxvQkjFb1EZBAdEKolkfJTqtnb7bv/zOJm58moRE0AzYgFoRawAGhE7gDZEEKAJcQjQgjgFaEBcAtgRUQBmRDSAFZEEYEQkA9gQWQAmRDaABVEEYEAUAx5H4EaGOyw+SMl66mbXzNOD4k6gCPNUY/CFwF1YOn5zRxJJRINqaUbUuZA/79sd3wm3xIdbdS60rXzo2XVCbO60/HxKJgFKKv4CkEziuyKBWAE0InYAbYggQBPiEKAFcQrQgLgEsCOiAMyIaAArIgnAiEgGsCGyAEyIbAALogjAgCgGPI7AX9w6F3JtqHMhnMWLFSrSD9jOnakVHpZYAAAAAElFTkSuQmCC"/>
+  </defs>
+  <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+      <g id="s10" transform="translate(3.000000, 3.000000)">
+          <g id="container">
+              <g id="Oval-2">
+                  <use fill="black" fill-opacity="1" filter="url(#e2e6829f-0086-96b2-e92a-6f3809b8ac61)" xlink:href="#e966567b-3869-4bcd-76b6-2cf084e45390"/>
+                  <use stroke="#979797" stroke-width="1" fill="url(#27c61b0f-392f-962d-de12-cb9da898274b)" fill-rule="evenodd" xlink:href="#e966567b-3869-4bcd-76b6-2cf084e45390"/>
+              </g>
+              <g id="Oval-2">
+                  <use fill="black" fill-opacity="1" filter="url(#dedf2e7e-f008-c315-f682-e424d670f210)" xlink:href="#c54189ed-7ea3-956c-f040-f0207548b268"/>
+                  <use fill="" fill-rule="evenodd" xlink:href="#c54189ed-7ea3-956c-f040-f0207548b268"/>
+                  <use stroke="#4A4A4A" stroke-width="1" fill="url(#0facd5c9-8e04-e83f-4842-8ba16f949942)" fill-rule="evenodd" xlink:href="#c54189ed-7ea3-956c-f040-f0207548b268"/>
+              </g>
+              <g id="knob" transform="translate(28.574244, 28.574244)">
+                  <circle id="Oval-5" fill="#322E2E" cx="71.4356094" cy="71.4356094" r="71.4356094"/>
+                  <path d="M72.4209282,3.63066376 L88.6786876,16.869789 C81.585496,18.1548295 76.1662428,18.7973498 72.4209282,18.7973498 C68.6756135,18.7973498 63.2563604,18.1548295 56.1631688,16.869789 L72.4209282,3.63066376 Z" id="Rectangle" fill="#E6D7D7" transform="translate(72.420928, 11.214007) scale(1, -1) translate(-72.420928, -11.214007) "/>
+              </g>
+              <g id="label">
+                  <g id="labeltext" fill-opacity="1" fill="#E6D7D7">
+                      <text id="534f4e02-5541-3607-0966-af0b025d80e0" font-family="Helvetica" font-size="44" font-weight="normal" fill="#E6D7D7" class="text-7" filter="url(#12f618f7-e258-b597-3ed6-242484ddad8f)">
+          <tspan x="45.3246625" y="117.884225">10.10</tspan>
+      </text>
+                      <text id="92ebe866-c281-70c7-7b0e-a373cee013a9" font-family="Helvetica" font-size="44" font-weight="normal" fill="#E6D7D7" class="text-7">
+          <tspan x="45.3246625" y="117.884225">10.10</tspan>
+      </text>
+                  </g>
+                  <circle id="Oval-6" stroke="#979797" fill-opacity="0.730000019" fill="url(#3cc0e5b8-1f0a-886b-f635-8fcb19212870)" transform="translate(100.351759, 100.351759) rotate(-45.000000) translate(-100.351759, -100.351759) " cx="100.351759" cy="100.351759" r="70.3517588"/>
+              </g>
+          </g>
+      </g>
+  </g>
+</svg>
+`,
+    updateAttributes: [
+        {
+            element: '#labeltext text tspan',
+            content: (_props, value) => value.toFixed(0),
+            attrs: [
+                {
+                    name: 'text-anchor',
+                    value: ( /* props, value */) => 'middle',
+                },
+                {
+                    name: 'x',
+                    value: ( /* props, value */) => '100',
+                },
+            ],
+        },
+    ],
+};
+export default knobSkin10;

package/lib/rotaryKnob/InternalInput.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+class InternalInput extends React.Component {
+    render() {
+        const props = this.props;
+        const hideStyle = {};
+        function onValChange(event) {
+            props.onChange(Number(event.target.value));
+        }
+        const { value, min, max, step, onChange, inputRef, ...rest } = props;
+        return (_jsx("input", { ref: inputRef, value: value, step: step, onChange: onValChange, style: hideStyle, type: "range", min: min, max: max, ...rest }));
+    }
+}
+Object.defineProperty(InternalInput, "defaultProps", {
+    enumerable: true,
+    configurable: true,
+    writable: true,
+    value: {
+        step: 1,
+    }
+});
+export default InternalInput;

package/lib/rotaryKnob/Types.js

@@ -0,0 +1 @@
+export {};

package/lib/rotaryKnob/helpers/DrawCircle.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+class DrawCircle extends React.Component {
+    render() {
+        const { r, borderColor = 'black', fillColor = 'transparent', borderWidth = 2, fillOpacity = 1, ...rest } = this.props;
+        return (_jsx("circle", { stroke: borderColor, fill: fillColor, fillOpacity: fillOpacity, r: r, ...rest }));
+    }
+}
+export default DrawCircle;

package/lib/rotaryKnob/helpers/DrawLine.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+class DrawLine extends React.Component {
+    render() {
+        const { width = 2, color = 'black', p1, p2, ...rest } = this.props;
+        return (_jsx("line", { ...rest, stroke: color, strokeWidth: width, x1: p1.x, y1: p1.y, x2: p2.x, y2: p2.y }));
+    }
+}
+export default DrawLine;

package/lib/rotaryKnob/helpers/HelpersOverlay.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import ReactDOM from 'react-dom';
+/**
+ * Draws the overlay and the children
+ */
+class HelpersOverlay extends React.Component {
+    render() {
+        const { children, ...rest } = this.props;
+        const styles = {
+            overlay: Object.assign({
+                width: '100%',
+                height: '100vh',
+                top: 0,
+                left: 0,
+                zIndex: 2147483647,
+                margin: '0',
+                padding: '0',
+                boxSizing: 'border-box',
+                position: 'fixed',
+            }, this.props.overlayStyle),
+        };
+        return ReactDOM.createPortal(_jsx("div", { style: styles.overlay, ...rest, children: children }), document.body);
+    }
+}
+export default HelpersOverlay;