zds-pickers 4.0.13 → 4.0.15

package/dist/index.js

@@ -2,7 +2,7 @@ export * from './midi/ccValues';
 export * from './midi/export';
 export * from './other/DefaultTooltip';
 export * from './other/OctavePlayer';
-export * from './other/SVGText';
+export * from './other/SvgText';
 export * from './pickers/ChannelMappingPicker';
 export * from './pickers/ChannelPicker';
 export * from './pickers/Knob';

package/dist/midi/ccValues.js

@@ -1,4 +1,4 @@
-const CC_NAMES = [
+const changeControllerOptions = [
     'Bank Select',
     'Modulation Wheel',
     'Breath Controller',
@@ -131,4 +131,4 @@ const CC_NAMES = [
     label: String(label).length ? `${value} - ${label}` : String(value),
     value,
 }));
-export default CC_NAMES;
+export { changeControllerOptions };

package/dist/other/DefaultTooltip.js

@@ -1,3 +1,3 @@
 import { Fragment, createElement } from 'react';
 const DefaultTooltip = ({ children }) => createElement(Fragment, null, children);
-export default DefaultTooltip;
+export { DefaultTooltip };

package/dist/other/OctavePlayer.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { /* Midi, */ Note } from 'tonal';
 import { Piano as ReactPiano } from 'zds-react-piano';
-import SoundfontProvider from './SoundFontProvider';
+import { SoundfontProvider } from './SoundFontProvider';
 const baseNotes = [
     'C',
     'C#',
@@ -23,7 +23,7 @@ const baseNotes = [
 const numNotes = 12;
 const whiteNotes = numNotes * 0.7; // approx
 const audioContext = new window.AudioContext();
-const OctavePlayer = ({ octave, height, width, ...rest }) => {
+const BaseOctavePlayer = ({ octave, height, width, ...rest }) => {
     const keyWidth = width / whiteNotes + 2;
     const keyWidthToHeight = keyWidth / height;
     const firstNote = Note.midi(baseNotes[0] + String(octave)) || 0;
@@ -35,7 +35,7 @@ const WithProvider = ({ format, height, hostname, instrumentName, octave = 4, on
     hostname,
     instrumentName,
     onChange,
-    soundfont, render: ({ isLoading, playNote, stopNote, }) => (_jsxs(_Fragment, { children: [_jsx("div", { children: _jsxs("h2", { children: ["Octave: ", octave] }) }), _jsx(OctavePlayer, { disabled: isLoading, height,
+    soundfont, render: ({ isLoading, playNote, stopNote, }) => (_jsxs(_Fragment, { children: [_jsx("div", { children: _jsxs("h2", { children: ["Octave: ", octave] }) }), _jsx(BaseOctavePlayer, { disabled: isLoading, height,
                 octave,
                 onClick,
                 onDoubleClick,
@@ -45,4 +45,4 @@ const WithProvider = ({ format, height, hostname, instrumentName, octave = 4, on
                 stopNote,
                 Tooltip,
                 width })] })) }));
-export default WithProvider;
+export { WithProvider as OctavePlayer };

package/dist/other/SoundFontProvider.js

@@ -22,7 +22,7 @@ const SoundfontProvider = (props) => {
                 setInstrument(newInstrument);
             });
         }
-        else if (isDefined(instrumentName)) {
+        else if (instrumentName) {
             // the host app has already injected the soundfont into global space
             Soundfont.instrument(audioContext, instrumentName).then(newInstrument => {
                 setInstrument(newInstrument);
@@ -34,7 +34,9 @@ const SoundfontProvider = (props) => {
         }
     }, [audioContext, format, hostname, instrumentName, soundfont]);
     useEffect(() => {
-        loadInstrument(instrumentName);
+        if (instrumentName) {
+            loadInstrument(instrumentName);
+        }
     }, [instrumentName, loadInstrument]);
     useEffect(() => {
         if (isDefined(instrumentName)) {
@@ -84,4 +86,4 @@ const SoundfontProvider = (props) => {
 };
 // https://gleitz.github.io/midi-js-soundfonts/MusyngKite/acoustic_grand_piano-mp3.js
 // https://gleitz.github.io/midi-js-soundfonts/FluidR3_GM/.js
-export default SoundfontProvider;
+export { SoundfontProvider };

package/dist/other/{SVGText.js → SvgText.js}

@@ -43,7 +43,7 @@ const calculateWordWidths = (style, textNode, text) => {
     }
     return undefined;
 };
-const Text = (props) => {
+const SvgText = (props) => {
     const { className = '', dx = 0, dy = 0, maxHeight = 1000, maxWidth = 1000, 
     // textAnchor = 'start',
     text = '', verticalAnchor = 'start', x = 0, y = 0, transform = '', ...rest } = props;
@@ -105,5 +105,4 @@ const Text = (props) => {
         // textAnchor={textAnchor}
         transform: transform, ...rest, children: _jsxs(_Fragment, { children: [displayedLines.map((line, idx) => (_jsx("tspan", { dx: x + dx, dy: idx === 0 ? startDy + dy : wordWidths?.lineHeight || 0, x: 0, children: line.words.join(' ') }, idx))), textLines.length && displayedLines.length !== textLines.length && (_jsxs(_Fragment, { children: [_jsx("tspan", { children: "..." }), _jsx("title", { children: text })] }))] }) }));
 };
-export default Text;
-export { MEASUREMENT_ELEMENT_ID };
+export { SvgText, MEASUREMENT_ELEMENT_ID };

package/dist/pickers/CCPicker.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
-import ccValues from '../midi/ccValues';
-import Select from './Select';
-const CCPicker = forwardRef((props, ref) => (_jsx(Select, { ...props, options: ccValues, ref: ref })));
-export default CCPicker;
+import { changeControllerOptions } from '../midi/ccValues';
+import { Select } from './Select';
+const CCPicker = forwardRef((props, ref) => (_jsx(Select, { ...props, options: changeControllerOptions, ref: ref })));
+export { CCPicker };

package/dist/pickers/ChannelMappingPicker.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import cl from 'classnames';
 import { forwardRef, useCallback, useEffect, useState } from 'react';
 import { arraySequence } from '../utils';
-import Select from './Select';
+import { Select } from './Select';
 const defaultOptions = arraySequence(16).map(value => ({
     value,
     label: value,
@@ -47,4 +47,4 @@ const ChannelMappingPicker = forwardRef(({ channels, className, ...rest }, ref)
     }, [channels]);
     return (_jsx(Select, { ...rest, className: cl(className, 'channel-mapping-picker'), formatOptionLabel: formatOptionLabel, options: options, ref: ref }));
 });
-export default ChannelMappingPicker;
+export { ChannelMappingPicker };

package/dist/pickers/ChannelPicker.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import cl from 'classnames';
 import { forwardRef } from 'react';
 import { arraySequence } from '../utils';
-import Select from './Select';
+import { Select } from './Select';
 const options = arraySequence(16).map(value => ({
     value: value,
     label: `Channel ${value + 1}`,
@@ -18,4 +18,4 @@ const filterOptions = (option, input) => {
 const ChannelPicker = forwardRef(({ className, ...rest }, ref) => {
     return (_jsx(Select, { ...rest, className: cl(className, 'channel-picker'), filterOptions: filterOptions, formatOptionLabel: formatOptionLabel, options: options, ref: ref }));
 });
-export default ChannelPicker;
+export { ChannelPicker };

package/dist/pickers/Knob.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useCallback } from 'react';
 import useStateWithDynamicDefault from '../hooks/useStateWithDynamicDefault';
-import RotaryKnob from '../rotaryKnob';
+import { RotaryKnob } from '../rotaryKnob';
 import { assertRange } from '../utils';
-import knobSkin10 from './knobSkin10';
+import { knobSkin10 } from './knobSkin10';
 const Knob = (props) => {
     const { disabled = false, max = 127, min = 0, onChange, value: initialValue = 0, wheelEnabled = false, wheelSensitivity = 0.1, ...rest } = props;
     const [value, setValue] = useStateWithDynamicDefault(initialValue);
@@ -46,4 +46,4 @@ const Knob = (props) => {
          */
         skin: knobSkin10, style: { opacity: disabled ? 0.4 : 1 }, unlockDistance: 0, defaultValue: value, max, min, value, ...rest }));
 };
-export default Knob;
+export { Knob };

package/dist/pickers/KnobPicker.js

@@ -1,8 +1,8 @@
 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';
+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(() => {
@@ -26,4 +26,4 @@ const KnobPicker = forwardRef((props, ref) => {
                         wheelSensitivity,
                         ...knobProps })] })] }));
 });
-export default KnobPicker;
+export { KnobPicker };

package/dist/pickers/LatchPicker.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
-import Select from './Select';
+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;
+export { LatchPicker };

package/dist/pickers/MappingPicker.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef, useMemo } from 'react';
 import { getStockNames, getUserMappingNames } from 'zds-mappings';
-import Select from './Select';
+import { Select } from './Select';
 const MappingPicker = forwardRef(({ allowClearing, ...rest }, ref) => {
     const stockMappings = getStockNames();
     const userMappings = getUserMappingNames();
@@ -34,4 +34,4 @@ const MappingPicker = forwardRef(({ allowClearing, ...rest }, ref) => {
     }, [allowClearing, stockMappings, userMappings]);
     return (_jsx(Select, { ...rest, options: options, ref: ref }));
 });
-export default MappingPicker;
+export { MappingPicker };

package/dist/pickers/NotePicker.js

@@ -4,7 +4,7 @@ import { Midi } from 'tonal';
 import { emptyMapping } from 'zds-mappings';
 import useStateWithDynamicDefault from '../hooks/useStateWithDynamicDefault';
 import { assertRange } from '../utils';
-import Select from './Select';
+import { Select } from './Select';
 const { midiToNoteName } = Midi;
 const formattedMapEntry = ({ note, name }) => `${note} ${name.length ? '-' : ''} ${name}`;
 const formattedListEntry = (label, idx) => ({
@@ -42,4 +42,4 @@ const NotePicker = forwardRef((props, ref) => {
         // isDisabled={disabled}
         onChange: handleChange, options: options, ref: ref, value: value }));
 });
-export default NotePicker;
+export { NotePicker };

package/dist/pickers/PianoPicker.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Piano as ReactPiano } from 'zds-react-piano';
-import SoundfontProvider from '../other/SoundFontProvider';
+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 BasePianoPicker = ({ 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 }) }));
@@ -16,7 +16,7 @@ const WithProvider = ({ format, height, hostname, instrumentName, onChange, onCl
     hostname,
     instrumentName,
     onChange,
-    soundfont, render: ({ isLoading, playNote, stopNote }) => (_jsx(PianoPicker, { disabled: isLoading, height,
+    soundfont, render: ({ isLoading, playNote, stopNote }) => (_jsx(BasePianoPicker, { disabled: isLoading, height,
         onClick,
         onDoubleClick,
         onKeyMouseEnter,
@@ -24,4 +24,4 @@ const WithProvider = ({ format, height, hostname, instrumentName, onChange, onCl
         playNote,
         stopNote,
         width })) }));
-export default WithProvider;
+export { WithProvider as PianoPicker };

package/dist/pickers/PolarityPicker.js

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

package/dist/pickers/ResponseCurve.js

@@ -2,8 +2,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef } from 'react';
 import useComponentSize from '../hooks/useComponentSize';
 import { responseCurves as origResponseCurves, } from '../midi/export';
-import DefaultTooltip from '../other/DefaultTooltip';
-import SVGText from '../other/SVGText';
+import { DefaultTooltip } from '../other/DefaultTooltip';
+import { SvgText } from '../other/SvgText';
 // const width = 218
 // const height = 150
 const axisOffset = 20;
@@ -101,7 +101,7 @@ const ResponseCurve = (props) => {
             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
+    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: {
@@ -109,4 +109,4 @@ const ResponseCurve = (props) => {
                                         },
                                     }), 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 { ResponseCurve };

package/dist/pickers/ResponseCurvePicker.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef, useCallback } from 'react';
 import { responseCurves } from '../midi/export';
-import DefaultTooltip from '../other/DefaultTooltip';
+import { DefaultTooltip } from '../other/DefaultTooltip';
 import { findObj } from '../utils';
-import ResponseCurve from './ResponseCurve';
-import Select from './Select';
+import { ResponseCurve } 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)(responseCurves)?.label })), [value]);
@@ -17,4 +17,4 @@ const ResponseCurvePicker = forwardRef((props, ref) => {
             MenuList,
         }, isSearchable: false, onChange: f => f, ref: ref, value: value }));
 });
-export default ResponseCurvePicker;
+export { ResponseCurvePicker };

package/dist/pickers/Select.js

@@ -76,4 +76,4 @@ const Select = forwardRef((props, ref) => {
                 // biome-ignore lint/suspicious/noExplicitAny: <explanation>
                 ref: ref, styles: styles, value: selectedOption })] }));
 });
-export default Select;
+export { Select };

package/dist/pickers/StatusPicker.js

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

package/dist/pickers/ValuePicker.js

@@ -2,7 +2,7 @@ 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';
+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(() => {
@@ -20,4 +20,4 @@ const ValuePicker = forwardRef((props, ref) => {
     }, [max, min, onChange, setValue]);
     return (_jsx(Select, { ...rest, disabled: disabled, onChange: handleChange, options: options, ref: ref, value: value }));
 });
-export default ValuePicker;
+export { ValuePicker };

package/dist/pickers/knobSkin10.js

@@ -90,4 +90,4 @@ const knobSkin10 = {
         },
     ],
 };
-export default knobSkin10;
+export { knobSkin10 };

package/dist/rotaryKnob/InternalInput.js

@@ -19,4 +19,4 @@ Object.defineProperty(InternalInput, "defaultProps", {
         step: 1,
     }
 });
-export default InternalInput;
+export { InternalInput };

package/dist/rotaryKnob/helpers/DrawCircle.js

@@ -6,4 +6,4 @@ class DrawCircle extends React.Component {
         return (_jsx("circle", { stroke: borderColor, fill: fillColor, fillOpacity: fillOpacity, r: r, ...rest }));
     }
 }
-export default DrawCircle;
+export { DrawCircle };

package/dist/rotaryKnob/helpers/DrawLine.js

@@ -6,4 +6,4 @@ class DrawLine extends React.Component {
         return (_jsx("line", { ...rest, stroke: color, strokeWidth: width, x1: p1.x, y1: p1.y, x2: p2.x, y2: p2.y }));
     }
 }
-export default DrawLine;
+export { DrawLine };

package/dist/rotaryKnob/helpers/HelpersOverlay.js

@@ -23,4 +23,4 @@ class HelpersOverlay extends React.Component {
         return ReactDOM.createPortal(_jsx("div", { style: styles.overlay, ...rest, children: children }), document.body);
     }
 }
-export default HelpersOverlay;
+export { HelpersOverlay };

package/dist/rotaryKnob/helpers/KnobVisualHelpers.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
-import utils from '../utils';
-import DrawCircle from './DrawCircle';
-import DrawLine from './DrawLine';
-import HelpersOverlay from './HelpersOverlay';
+import { toRadians } from '../utils';
+import { DrawCircle } from './DrawCircle';
+import { DrawLine } from './DrawLine';
+import { HelpersOverlay } from './HelpersOverlay';
 class KnobVisualHelpers extends React.Component {
     constructor() {
         super(...arguments);
@@ -27,8 +27,8 @@ class KnobVisualHelpers extends React.Component {
         const halfWidth = vbox.width / 2;
         //Calculate current angle segment end point
         //Note: Not sure why we need to subtract 90 here
-        const valueMarkerX = props.radius * Math.cos(utils.toRadians(props.valueAngle - 90));
-        const valueMarkerY = props.radius * Math.sin(utils.toRadians(props.valueAngle - 90));
+        const valueMarkerX = props.radius * Math.cos(toRadians(props.valueAngle - 90));
+        const valueMarkerY = props.radius * Math.sin(toRadians(props.valueAngle - 90));
         return {
             ...state,
             centerX: vbox.left + halfWidth,

package/dist/rotaryKnob/index.js

@@ -8,10 +8,10 @@ import { scaleLinear } from 'd3-scale';
 import { select } from 'd3-selection';
 import { useEffect, useRef, useState } from 'react';
 import { SvgLoader, SvgProxy } from 'react-svgmt';
-import InternalInput from './InternalInput';
+import { InternalInput } from './InternalInput';
 import { KnobVisualHelpers } from './helpers/KnobVisualHelpers';
 import defaultSkin from './knobdefaultskin';
-import utils from './utils';
+import { getAngleForPoint } from './utils';
 // function printDebugValues(obj) {
 //   console.log('------------')
 //   Object.keys(obj).forEach(key => {
@@ -145,7 +145,7 @@ const RotaryKnob = (props) => {
             elem.classed('dragging', true);
             onStart();
             startPos = { x: event.x - cx, y: event.y - cy };
-            startAngle = utils.getAngleForPoint(startPos.x, startPos.y);
+            startAngle = getAngleForPoint(startPos.x, startPos.y);
             initialAngle = convertValueToAngle(currentValue);
             monitoring = false;
             // ...existing setState code...
@@ -156,14 +156,14 @@ const RotaryKnob = (props) => {
             if (preciseMode) {
                 if (!monitoring && distanceFromCenter >= unlockDistance) {
                     startPos = currentPos;
-                    startAngle = utils.getAngleForPoint(currentPos.x, currentPos.y);
+                    startAngle = getAngleForPoint(currentPos.x, currentPos.y);
                     monitoring = true;
                 }
             }
             else {
                 monitoring = true;
             }
-            const currentAngle = utils.getAngleForPoint(currentPos.x, currentPos.y);
+            const currentAngle = getAngleForPoint(currentPos.x, currentPos.y);
             const deltaAngle = currentAngle - startAngle;
             let finalAngle = initialAngle + deltaAngle;
             finalAngle = normalizeAngle(finalAngle);
@@ -241,4 +241,4 @@ const RotaryKnob = (props) => {
         : null;
     return (_jsxs(_Fragment, { children: [_jsxs("div", { ref: container, style: styles.container, ...rest, children: [_jsx(InternalInput, { disabled: disabled, inputRef: inputRef, style: styles.input, value: currentValue, min: min, max: max, step: step, onChange: onFormControlChange }), _jsxs(SvgLoader, { height: "100%", svgXML: skin.svg, width: "100%", onSVGReady: saveRef, children: [_jsx(SvgProxy, { selector: "#knob", transform: `$ORIGINAL rotate(${angle}, ${skin.knobX}, ${skin.knobY})` }), skinElemUpdates] })] }), state.dragging && preciseMode && (_jsx(KnobVisualHelpers, { svgRef: state.svgRef, radius: state.dragDistance, mousePos: state.mousePos, minimumDragDistance: unlockDistance, valueAngle: state.valueAngle }))] }));
 };
-export default RotaryKnob;
+export { RotaryKnob };

package/dist/rotaryKnob/utils.js

@@ -96,11 +96,7 @@ function transformBoundingClientRectToDocument(box) {
     //info needed to draw line from center to mousepos
     return { top: ttop, left: tleft, width: box.width, height: box.height };
 }
-export default {
-    // toGlobalCoordinates,
-    // toLocalCoordinates,
-    toRadians,
-    getQuadrant,
-    getAngleForPoint,
-    transformBoundingClientRectToDocument,
-};
+export { 
+// toGlobalCoordinates,
+// toLocalCoordinates,
+toRadians, getQuadrant, getAngleForPoint, transformBoundingClientRectToDocument, };

package/dist/types/index.d.ts

@@ -2,7 +2,7 @@ export * from './midi/ccValues';
 export * from './midi/export';
 export * from './other/DefaultTooltip';
 export * from './other/OctavePlayer';
-export * from './other/SVGText';
+export * from './other/SvgText';
 export * from './pickers/ChannelMappingPicker';
 export * from './pickers/ChannelPicker';
 export * from './pickers/Knob';
@@ -21,7 +21,7 @@ export type * from './midi/export';
 export type * from './other/DefaultTooltip';
 export type * from './other/OctavePlayer';
 export type * from './other/SoundFontProvider';
-export type * from './other/SVGText';
+export type * from './other/SvgText';
 export type * from './pickers/CCPicker';
 export type * from './pickers/ChannelMappingPicker';
 export type * from './pickers/ChannelPicker';

package/dist/types/midi/ccValues.d.ts

@@ -1,3 +1,3 @@
 import type { Option } from '../pickers/Select';
-declare const CC_NAMES: Option<number>[];
-export default CC_NAMES;
+declare const changeControllerOptions: Option<number>[];
+export { changeControllerOptions };

package/dist/types/other/DefaultTooltip.d.ts

@@ -6,5 +6,5 @@ type TooltipProps = {
 declare const DefaultTooltip: ({ children }: React.PropsWithoutRef<TooltipProps>) => import("react").FunctionComponentElement<{
     children?: import("react").ReactNode | undefined;
 }>;
-export default DefaultTooltip;
+export { DefaultTooltip };
 export type { TooltipProps };

package/dist/types/other/OctavePlayer.d.ts

@@ -1,5 +1,11 @@
 import type Soundfont from 'soundfont-player';
 import type { TooltipProps } from './DefaultTooltip';
+type PianoMidiNote = {
+    accidental: boolean;
+    left: number;
+    midiNumber: number;
+    width: number;
+};
 type OctavePlayerProps = {
     disabled?: boolean;
     height: number;
@@ -10,17 +16,17 @@ type WithProviderProps = {
     format?: 'mp3' | 'ogg';
     height: number;
     hostname?: string;
-    instrumentName: Soundfont.InstrumentName;
+    instrumentName?: Soundfont.InstrumentName;
     octave?: number;
     onChange?: (note: number) => void;
     onClick?: (note: number) => void;
     onDoubleClick?: (note: number) => void;
-    onKeyMouseEnter?: (note: number) => void;
+    onKeyMouseEnter?: (note: PianoMidiNote) => void;
     onKeyMouseLeave?: (note: number) => void;
     soundfont?: 'MusyngKite' | 'FluidR3_GM';
     Tooltip?: TooltipProps;
     width: number;
 };
 declare const WithProvider: ({ format, height, hostname, instrumentName, octave, onChange, onClick, onDoubleClick, onKeyMouseEnter, onKeyMouseLeave, soundfont, Tooltip, width, }: WithProviderProps) => import("react/jsx-runtime").JSX.Element;
-export default WithProvider;
-export type { OctavePlayerProps, WithProviderProps };
+export { WithProvider as OctavePlayer };
+export type { OctavePlayerProps, PianoMidiNote, WithProviderProps };

package/dist/types/other/SoundFontProvider.d.ts

@@ -3,7 +3,7 @@ type SoundfontProviderProps = {
     audioContext: AudioContext;
     format?: 'mp3' | 'ogg';
     hostname?: string;
-    instrumentName: Soundfont.InstrumentName;
+    instrumentName?: Soundfont.InstrumentName;
     onChange?: (midiNumber: number) => void;
     render: (props: {
         isLoading: boolean;
@@ -14,5 +14,5 @@ type SoundfontProviderProps = {
     soundfont?: 'MusyngKite' | 'FluidR3_GM';
 };
 declare const SoundfontProvider: (props: SoundfontProviderProps) => import("react").ReactNode;
-export default SoundfontProvider;
+export { SoundfontProvider };
 export type { SoundfontProviderProps };

package/dist/types/other/{SVGText.d.ts → SvgText.d.ts}

@@ -22,7 +22,6 @@ type TextProps = Partial<HTMLOrSVGElement> & {
     x?: number;
     y?: number;
 };
-declare const Text: (props: TextProps) => import("react/jsx-runtime").JSX.Element;
-export default Text;
-export { MEASUREMENT_ELEMENT_ID };
+declare const SvgText: (props: TextProps) => import("react/jsx-runtime").JSX.Element;
+export { SvgText, MEASUREMENT_ELEMENT_ID };
 export type { TextProps, WordWidths, WordsByLine };

package/dist/types/pickers/CCPicker.d.ts

@@ -3,5 +3,5 @@ import type { Option, SelectProps } from './Select';
 type CCPickerProps = SelectProps<number>;
 type CCPickerRef = SelectInstance<Option<number>, false, GroupBase<Option<number>>>;
 declare const CCPicker: import("react").ForwardRefExoticComponent<CCPickerProps & import("react").RefAttributes<SelectInstance<Option<number>, false, GroupBase<Option<number>>>>>;
-export default CCPicker;
+export { CCPicker };
 export type { CCPickerProps, CCPickerRef };

package/dist/types/pickers/ChannelMappingPicker.d.ts

@@ -11,5 +11,5 @@ interface ChannelMappingPickerProps extends SelectProps<InternalValue> {
 }
 type ChannelMappingPickerRef = SelectInstance<Option<number>, false, GroupBase<Option<number>>>;
 declare const ChannelMappingPicker: import("react").ForwardRefExoticComponent<ChannelMappingPickerProps & import("react").RefAttributes<SelectInstance<Option<InternalValue>, false, GroupBase<Option<InternalValue>>>>>;
-export default ChannelMappingPicker;
+export { ChannelMappingPicker };
 export type { ChannelMappingOption, ChannelMappingPickerProps, ChannelMappingPickerRef, };

package/dist/types/pickers/ChannelPicker.d.ts

@@ -4,5 +4,5 @@ type Channel = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
 type ChannelPickerProps = SelectProps<Channel>;
 type ChannelPickerRef = SelectInstance<Option<Channel>, false, GroupBase<Option<Channel>>>;
 declare const ChannelPicker: import("react").ForwardRefExoticComponent<ChannelPickerProps & import("react").RefAttributes<SelectInstance<Option<Channel>, false, GroupBase<Option<Channel>>>>>;
-export default ChannelPicker;
+export { ChannelPicker };
 export type { Channel, ChannelPickerProps, ChannelPickerRef };

package/dist/types/pickers/Knob.d.ts

@@ -8,5 +8,5 @@ type KnobProps = {
     wheelSensitivity?: number;
 };
 declare const Knob: (props: KnobProps) => import("react/jsx-runtime").JSX.Element;
-export default Knob;
+export { Knob };
 export type { KnobProps };

package/dist/types/pickers/KnobPicker.d.ts

@@ -23,5 +23,5 @@ declare const KnobPicker: import("react").ForwardRefExoticComponent<SelectProps<
     wheelSensitivity?: number;
     value: number;
 } & import("react").RefAttributes<SelectInstance<Option<number>, false, GroupBase<Option<number>>>>>;
-export default KnobPicker;
+export { KnobPicker };
 export type { KnobPickerProps, KnobPickerRef };