@antimatter-audio/antimatter-ui 16.6.0 → 16.8.0

package/dist/index.js

@@ -193,7 +193,19 @@ var IncrementType;
     IncrementType["fine"] = "fine";
     IncrementType["standard"] = "standard";
     IncrementType["button"] = "button";
+    IncrementType["index"] = "index";
+    IncrementType["indexButton"] = "indexButton";
 })(IncrementType || (IncrementType = {}));
+var NumberType;
+(function(NumberType) {
+    NumberType["float"] = "float";
+    NumberType["integer"] = "integer";
+})(NumberType || (NumberType = {}));
+var StepDirection;
+(function(StepDirection) {
+    StepDirection["up"] = "up";
+    StepDirection["down"] = "down";
+})(StepDirection || (StepDirection = {}));
 
 var SliderType;
 (function(SliderType) {
@@ -262,7 +274,7 @@ const clamp = (val, min = 0, max = 1)=>{
 };
 function snapToLegalValue({ value, properties }) {
     const { interval, start, end } = properties;
-    if (interval == 0) return value;
+    if (interval === 0) return value;
     const roundedInterval = parseFloat(interval?.toFixed(2));
     const formattedValue = start + roundedInterval * Math.floor((value - start) / roundedInterval + 0.5);
     return parseFloat(clamp(formattedValue, start, end)?.toFixed(2));
@@ -371,25 +383,59 @@ const randomizeValue = (min, max)=>{
 //   min?: number;
 //   max?: number;
 // }
-const incrementValue = ({ incrementType, numSteps, delta, prevVal, interval, incrementBy })=>{
-    const velocityMultiplier = incrementType === IncrementType.standard ? Math.abs(delta ?? 1) : incrementType === IncrementType.button && incrementBy ? incrementBy : 1;
-    const constrainedNumStepsMultiplier = incrementType === IncrementType.standard ? Math.abs(numSteps * 0.01) : 1;
-    const newValue = parseFloat(((prevVal ?? 0) + interval * velocityMultiplier * constrainedNumStepsMultiplier * Math.sign(delta ?? 1))?.toFixed(2));
-    return newValue;
+const getTotalNumStepsMultiplier = (incrementType, numSteps)=>{
+    return incrementType === IncrementType.standard || incrementType === IncrementType.button ? Math.max(Math.abs(numSteps * 0.01), 1) : 1;
 };
-const incrementIndex = ({ velocity = 0, numOptions, incrementBy, selectedIndex })=>{
-    let spreadMultiplier = 1;
-    if (numOptions) {
-        if (numOptions < 50) {
-            spreadMultiplier = 0.7;
-        } else if (numOptions >= 50 && numOptions < 150) {
-            spreadMultiplier = 3;
-        } else {
-            spreadMultiplier = 4;
-        }
-    }
-    const velocityMultiplier = Math.max(velocity, 1);
-    return velocity && velocity > 0.5 ? selectedIndex + incrementBy * velocityMultiplier * spreadMultiplier : selectedIndex + incrementBy;
+const incrementValue = ({ incrementType, sliderNumSteps, comboboxNumChoices, delta, startingValue, buttonIncrement, buttonDirection = StepDirection.up, sliderInterval, sliderMin, sliderMax })=>{
+    const hasButtonIncrementType = incrementType === IncrementType.button || incrementType === IncrementType.indexButton;
+    const hasVelocity = incrementType === IncrementType.standard || incrementType === IncrementType.index;
+    const isFloatValue = incrementType === IncrementType.standard || incrementType === IncrementType.fine || incrementType === IncrementType.button;
+    // const velocityMultiplier: number = 1;
+    const buttonIncrementMultiplier = hasButtonIncrementType && buttonIncrement ? Math.abs(buttonIncrement) : 1;
+    const totalNumStepsMultiplier = getTotalNumStepsMultiplier(incrementType, (isFloatValue ? sliderNumSteps : comboboxNumChoices) ?? 0);
+    const deltaMultiplier = hasVelocity ? Math.abs(delta ?? 1) : 1;
+    const signMultiplier = hasButtonIncrementType ? Math.sign(buttonDirection === StepDirection.down ? -1 : 1) : Math.sign(delta ?? 1);
+    const returnVal = (startingValue ?? 0) + (incrementType === IncrementType.indexButton || incrementType === IncrementType.index ? 1 : sliderInterval ?? 0) * signMultiplier * deltaMultiplier * buttonIncrementMultiplier * totalNumStepsMultiplier;
+    return isFloatValue ? Math.max(sliderMin, Math.min(parseFloat(returnVal?.toFixed(2)), sliderMax)) : Math.max(0, Math.min((comboboxNumChoices ?? 0) - 1, Math.round(returnVal)));
+};
+const incrementSlider = ({ delta, incrementType, startingValue, sliderInterval, sliderNumSteps, sliderMin, sliderMax })=>{
+    return incrementValue({
+        delta,
+        incrementType,
+        startingValue,
+        sliderInterval,
+        sliderNumSteps,
+        sliderMin,
+        sliderMax
+    });
+};
+const incrementSliderButton = ({ startingValue, buttonIncrement, buttonDirection, sliderInterval, sliderNumSteps, sliderMin, sliderMax })=>{
+    return incrementValue({
+        incrementType: IncrementType.button,
+        startingValue,
+        buttonIncrement,
+        buttonDirection,
+        sliderInterval,
+        sliderNumSteps,
+        sliderMin,
+        sliderMax
+    });
+};
+const incrementIndex = ({ delta, startingValue, comboboxNumChoices })=>{
+    return incrementValue({
+        delta,
+        incrementType: IncrementType.index,
+        startingValue,
+        comboboxNumChoices
+    });
+};
+const incrementIndexButton = ({ startingValue, comboboxNumChoices, buttonDirection })=>{
+    return incrementValue({
+        incrementType: IncrementType.indexButton,
+        startingValue,
+        comboboxNumChoices,
+        buttonDirection
+    });
 };
 const generateDropShadowFilterString = (colors, radius)=>{
     let output = [];
@@ -405,7 +451,7 @@ const generateDropShadowFilterString = (colors, radius)=>{
 };
 const getTextOuterGlowString = (outerGlowColor, outerGlowRadius)=>`${outerGlowColor} 0px 0px ${outerGlowRadius / 2}px, ${outerGlowColor} 0px 0px ${outerGlowRadius}px`;
 const getNumericValue = (value)=>typeof value === 'string' ? +(value?.match(/\d+/)?.[0] ?? '') : value;
-const getIncrementValue = (value)=>typeof value === 'string' ? value.match(/[a-z]/g)?.[0] : 'px';
+const getUnit = (value)=>typeof value === 'string' ? value.match(/[a-z]/g)?.[0] : 'px';
 const getStringSizeValue = (value, increment = 'px')=>typeof value === 'string' ? value : `${value}${increment}`;
 const getBorderValue = (borderArray, borderDirection, returnNumericValue)=>{
     switch(borderDirection){
@@ -1342,11 +1388,17 @@ function Tabs({ items, initialSelectedIndex = undefined, id = '', className, pad
     useEffect(()=>{
         if (dataSource === DataSource.JuceCombobox) {
             setTimeout(()=>{
-                setChoices(comboBoxState.properties.choices);
-                setSelectedIndex(comboBoxState.getChoiceIndex());
+                if (comboBoxState.properties.choices.length > 0) {
+                    setChoices(comboBoxState.properties.choices);
+                    setSelectedIndex(comboBoxState.getChoiceIndex());
+                }
             });
         } else {
-            setChoices(items?.length ? items : []);
+            setTimeout(()=>{
+                if (items?.length) {
+                    setChoices(items);
+                }
+            });
         }
     }, []);
     useEffect(()=>{
@@ -1911,8 +1963,6 @@ const useCombobox = ({ id, label, items = [], filter, onChange, displayValInHead
     const [properties, setProperties] = useState(comboBoxState?.properties);
     const [selectedIndex, setSelectedIndex] = useState(comboBoxState?.getChoiceIndex());
     const prevIndex = useRef(null);
-    const nextIndex = useRef(null);
-    const prevDragDirection = useRef(null);
     const { highlightedItemChanged, getModSlotPreview, updateModSlotRowTarget } = useGlobalContext();
     const modSlotPreview = getModSlotPreview();
     //TODO: Filter choices for subsequent rows
@@ -1978,7 +2028,7 @@ const useCombobox = ({ id, label, items = [], filter, onChange, displayValInHead
     const filteredChoices = getFilteredChoices(items, filter);
     // Used in RotaryCombobox
     const bindDrag = useGesture({
-        onDrag: ({ direction, velocity })=>{
+        onDrag: ({ direction, delta })=>{
             //TODO: Move this out of useSlider
             if (updateModSlotPreview) {
                 updateModSlotRowTarget({
@@ -1987,34 +2037,12 @@ const useCombobox = ({ id, label, items = [], filter, onChange, displayValInHead
                     saveToBackend: false
                 });
             }
-            let directionY;
-            if (direction[1] * -1 === 1 && directionY !== prevDragDirection.current) {
-                directionY = 1;
-            } else if (direction[1] * -1 === -1 && directionY !== prevDragDirection.current) {
-                directionY = -1;
-            }
-            if (selectedIndex < choices.length && directionY && directionY === 1) {
-                // throttle(() => {
-                nextIndex.current = incrementIndex({
-                    velocity: velocity[1],
-                    incrementBy: 1,
-                    numOptions: properties?.choices?.length,
-                    selectedIndex
-                });
-            // }, 90);
-            } else if (selectedIndex > 0 && directionY && directionY === -1) {
-                // throttle(() => {
-                nextIndex.current = incrementIndex({
-                    velocity: velocity[1],
-                    incrementBy: -1,
-                    numOptions: properties?.choices?.length,
-                    selectedIndex
-                });
-            // }, 90);
-            }
-            if (nextIndex.current !== null && nextIndex.current !== undefined && nextIndex.current !== selectedIndex.current) {
-                comboBoxState?.setChoiceIndex(nextIndex.current);
-            }
+            const newValue = incrementIndex({
+                delta: delta[1] * -1,
+                startingValue: selectedIndex,
+                comboboxNumChoices: properties?.choices?.length ?? 0
+            });
+            comboBoxState?.setChoiceIndex(newValue);
         }
     }, {
         enabled: !isDisabled,
@@ -2055,20 +2083,22 @@ const useCombobox = ({ id, label, items = [], filter, onChange, displayValInHead
             });
         }
     };
-    const incrementComboboxIndex = ()=>{
-        if (selectedIndex < properties.choices.length - 1) {
-            const newIndex = incrementIndex({
-                selectedIndex,
-                incrementBy: 1
+    const incrementComboboxButton = ()=>{
+        if (selectedIndex <= properties.choices.length - 1) {
+            const newIndex = incrementIndexButton({
+                startingValue: selectedIndex,
+                comboboxNumChoices: properties?.choices?.length,
+                buttonDirection: StepDirection.up
             });
             handleChange(newIndex);
         }
     };
-    const decrementComboboxIndex = ()=>{
+    const decrementComboboxButton = ()=>{
         if (selectedIndex > 0) {
-            const newIndex = incrementIndex({
-                selectedIndex,
-                incrementBy: -1
+            const newIndex = incrementIndexButton({
+                startingValue: selectedIndex,
+                comboboxNumChoices: properties?.choices?.length,
+                buttonDirection: StepDirection.down
             });
             handleChange(newIndex);
         }
@@ -2086,8 +2116,8 @@ const useCombobox = ({ id, label, items = [], filter, onChange, displayValInHead
         onClick,
         onDoubleClick,
         bindDrag,
-        incrementComboboxIndex,
-        decrementComboboxIndex
+        incrementComboboxButton,
+        decrementComboboxButton
     };
 };
 
@@ -2148,7 +2178,7 @@ function ComboboxComponent({ id, anchorTo, excludeItems = [], items, onChange, c
             }) : null,
             jsxs(Combobox$2, {
                 value: selectedIndexLabel,
-                onChange: (selectedIndexLabel)=>handleChange(selectedIndexLabel),
+                onChange: (selectedIndexLabel)=>selectedIndexLabel && handleChange(selectedIndexLabel),
                 onClose: ()=>{
                     setIncludeFilterString('');
                 },
@@ -2206,7 +2236,7 @@ function ComboboxComponent({ id, anchorTo, excludeItems = [], items, onChange, c
                         style: {
                             visibility: numVisibleItems === 0 ? 'hidden' : 'visible',
                             // bottom: `${-(listItemHeight * numVisibleItems)}px`,
-                            height: getStringSizeValue(getNumericValue(listItemHeight) * numVisibleItems, getIncrementValue(listItemHeight)),
+                            height: getStringSizeValue(getNumericValue(listItemHeight) * numVisibleItems, getUnit(listItemHeight)),
                             border: `${dropdownBorderWidth}px solid ${dropdownBorderColor}`,
                             background: dropdownBackgroundColor,
                             width: width && getStringSizeValue(width)
@@ -2247,7 +2277,7 @@ function Combobox$1({ label, showLabel, color = 'var(--color-text)', labelColor,
     0,
     0
 ], buttonBackgroundColor = 'var(--bg-lv4)', buttonHighlightColor, buttonHeight = 34, outerGlowRadius, outerGlowColors, className, onChange, isDisabled, anchorTo = AnchorTo.bottomLeft, width = 110, listItemHeight = 34, id, style }) {
-    const { selectedIndexLabel, choices, onMouseEnter, onMouseExit, handleChange, onClick, incrementComboboxIndex, properties, decrementComboboxIndex } = useCombobox({
+    const { selectedIndexLabel, choices, onMouseEnter, onMouseExit, handleChange, onClick, incrementComboboxButton, properties, decrementComboboxButton } = useCombobox({
         id,
         label,
         onChange
@@ -2385,7 +2415,7 @@ function Combobox$1({ label, showLabel, color = 'var(--color-text)', labelColor,
                                                     IconButton.padding.xSmall,
                                                     IconButton.padding.small
                                                 ],
-                                                onClick: decrementComboboxIndex
+                                                onClick: decrementComboboxButton
                                             }),
                                             jsx(IconButton, {
                                                 id: "Combobox-down-arrow",
@@ -2405,7 +2435,7 @@ function Combobox$1({ label, showLabel, color = 'var(--color-text)', labelColor,
                                                     IconButton.padding.small,
                                                     IconButton.padding.small
                                                 ],
-                                                onClick: incrementComboboxIndex
+                                                onClick: incrementComboboxButton
                                             })
                                         ]
                                     })
@@ -2818,12 +2848,14 @@ const useSlider = ({ id, rowId, label, displayValInHeader = true, mockProperties
                 }
                 if (dragOrientation !== DragOrientation.followCursor) {
                     const deltaVal = dragOrientation === DragOrientation.vertical ? delta[1] * -1 : delta[0];
-                    const newValue = incrementValue({
+                    const newValue = incrementSlider({
                         delta: deltaVal,
                         incrementType: optionIsDown ? IncrementType.fine : IncrementType.standard,
-                        prevVal: previousScaledValueRef.current || 0,
-                        interval: properties?.interval ?? 0,
-                        numSteps: properties?.numSteps ?? 0
+                        startingValue: previousScaledValueRef.current || 0,
+                        sliderInterval: properties?.interval ?? 0,
+                        sliderNumSteps: properties?.numSteps ?? 0,
+                        sliderMin: properties?.start ?? 0,
+                        sliderMax: properties?.end ?? 0
                     });
                     setJuceScaledValue(newValue);
                 }
@@ -3533,13 +3565,14 @@ activeColor = 'var(--color-brand)', inactiveColor = 'var(--bg-lv1)', shape = Ind
     });
 }
 
-function useGroupFocus({ isDisabled, id, inputRef }) {
+function useGroupFocus({ isDisabled, id, inputRef, incrementBy }) {
     const [isFocused, setIsFocused] = useState(false);
     const isOptionPressed = useRef(false);
     const groupId = `${id}-control-group`;
     const inputId = `${id}-input`;
     const sliderState = Juce.getSliderState(id);
     const comboBoxState = Juce.getComboBoxState(id);
+    const isMainSliderACombobox = comboBoxState?.properties?.choices?.length > 0;
     const mousedownListener = (event)=>{
         if (!isDisabled) {
             if (event.target.closest('.ControlGroup')?.id === groupId) {
@@ -3566,15 +3599,16 @@ function useGroupFocus({ isDisabled, id, inputRef }) {
         }
     };
     const increment = ()=>{
-        const isMainSliderACombobox = comboBoxState?.properties?.choices?.length > 0;
         if (!isMainSliderACombobox) {
             const scaledVal = sliderState?.scaledValue;
-            const newValue = incrementValue({
-                incrementType: IncrementType.button,
-                incrementBy: 5,
-                numSteps: sliderState?.properties?.numSteps,
-                prevVal: scaledVal,
-                interval: sliderState?.properties?.interval
+            const newValue = incrementSliderButton({
+                sliderNumSteps: sliderState?.properties?.numSteps,
+                startingValue: scaledVal,
+                buttonDirection: StepDirection.up,
+                sliderInterval: sliderState?.properties?.interval,
+                sliderMin: sliderState?.properties?.start,
+                sliderMax: sliderState?.properties?.end,
+                buttonIncrement: 1
             });
             sliderState.setScaledValue(newValue);
         } else {
@@ -3583,15 +3617,16 @@ function useGroupFocus({ isDisabled, id, inputRef }) {
         }
     };
     const decrement = ()=>{
-        const isMainSliderACombobox = comboBoxState?.properties?.choices?.length > 0;
         if (!isMainSliderACombobox) {
             const scaledVal = sliderState?.scaledValue;
-            const newValue = incrementValue({
-                incrementType: IncrementType.button,
-                incrementBy: -5,
-                numSteps: sliderState?.properties?.numSteps,
-                prevVal: scaledVal,
-                interval: sliderState?.properties?.interval
+            const newValue = incrementSliderButton({
+                sliderNumSteps: sliderState?.properties?.numSteps,
+                startingValue: scaledVal,
+                buttonDirection: StepDirection.down,
+                sliderInterval: sliderState?.properties?.interval,
+                sliderMin: sliderState?.properties?.start,
+                sliderMax: sliderState?.properties?.end,
+                buttonIncrement: 1
             });
             sliderState?.setScaledValue(newValue);
         } else {
@@ -3638,6 +3673,14 @@ function useGroupFocus({ isDisabled, id, inputRef }) {
                     event.preventDefault();
                     increment();
                 }
+                if (event.key === 'ArrowUp') {
+                    event.preventDefault();
+                    increment();
+                }
+                if (event.key === 'ArrowDown') {
+                    event.preventDefault();
+                    decrement();
+                }
             }
         }
     }
@@ -3804,7 +3847,7 @@ RotarySlider.trackWidth = TrackWidths;
 var css_248z$9 = ".BarSlider-innerWrapper:hover {\n  cursor: pointer;\n}\n\n.BarSlider-Track {\n  touch-action: none;\n  position: relative;\n  width: 100%;\n  height: 100%;\n  max-height: 100%;\n  max-width: 100%;\n  background-color: var(--bg-lv5);\n}\n\n.BarSlider-Track.isHighlighted {\n  background-color: var(--bg-lv6);\n}\n.Barslider-IndicatorLineWrapper,\n.BarSlider-HandleWrapper {\n  position: absolute;\n  pointer-events: none;\n}\n\n.BarSlider-IndicatorLine {\n  position: absolute;\n  top: 0;\n  /* left: 0; */\n  right: 0;\n  bottom: 0;\n  pointer-events: none;\n}\n.BarSlider-Handle {\n  position: absolute;\n  pointer-events: none;\n}\n\n.BarSliderHandle {\n  pointer-events: auto;\n}\n.Barslider-IndicatorLineWrapper {\n  /* border-radius: var(--trackBorderRadius); */\n  overflow: hidden;\n}\n\n.BarSlider-Input {\n  font-weight: bold;\n  width: 100%;\n}\n\n.BarSlider-Input.includeValueInHeightIsFalse {\n  position: absolute;\n  bottom: -1.7em;\n  left: 0;\n  right: 0;\n  z-index: 10;\n}\n";
 styleInject(css_248z$9);
 
-function Slider$1({ polarity = Polarity.unipolar, orientation = Orientation.vertical, dragOrientation = DragOrientation.followCursor, isRandomizable = false, randomizerObject, isStandalone = true, isHighlighted = false, showValue = true, showHandle = true, showLabel = true, showInsetBoxShadow = true, resetterObject, className, id, width, height = '100%', onChange, outerGlowRadius, outerGlowColors, trackBorderRadius = 20, blur, style, indicatorLineColor = 'var(--color-brand)', indicatorLineGradient, trackColor = 'var(--bg-lv3)', markColor = 'var(--bg-lv7)', markHighlightColor = 'var(--color-text)', trackStrokeColor, handleFillColor, handleStrokeColor, trackWidth = TrackWidths.small, label, labelColor, marks = [], inputHighlightColor = 'var(--color-brand)', includeValueInHeight = true, // Mocks the initial scaled value of the slider for web veiws outside of JUCE
+function Slider$1({ polarity = Polarity.unipolar, orientation = Orientation.vertical, dragOrientation = DragOrientation.followCursor, isRandomizable = false, randomizerObject, isStandalone = true, isHighlighted = false, showValue = true, showHandle = true, showLabel = true, showInsetBoxShadow = true, resetterObject, className, id, width, height = Height.full, onChange, outerGlowRadius, outerGlowColors, trackBorderRadius = 20, blur, style, indicatorLineColor = 'var(--color-brand)', indicatorLineGradient, trackColor = 'var(--bg-lv3)', markColor = 'var(--bg-lv7)', markHighlightColor = 'var(--color-text)', trackStrokeColor, handleFillColor, handleStrokeColor, cornerBorderHighlightColor, trackWidth = TrackWidths.small, label, labelColor, marks = [], inputHighlightColor = 'var(--color-brand)', includeValueInHeight = true, // Mocks the initial scaled value of the slider for web veiws outside of JUCE
 mockInitialNormalisedValue = 0, mockProperties = {
     start: 20.0,
     end: 15000.0,
@@ -3814,6 +3857,7 @@ mockInitialNormalisedValue = 0, mockProperties = {
     const sliderElementRef = useRef(null);
     const handleElementRef = useRef(null);
     const barSliderIndicatorRef = useRef(null);
+    const inputRef = useRef(null);
     const isHorizontal = orientation === Orientation.horizontal;
     const isVertical = orientation === Orientation.vertical;
     const handleWidth = 18;
@@ -3822,6 +3866,10 @@ mockInitialNormalisedValue = 0, mockProperties = {
     // const elementRef = useRef<HTMLDivElement>(null);
     const animationFrameRef = useRef(null);
     const prevValRef = useRef(null);
+    const { isFocused } = useGroupFocus({
+        id,
+        inputRef
+    });
     const animate = animateBarChart({
         animationFrameRef,
         elementRef: barSliderIndicatorRef,
@@ -3854,6 +3902,7 @@ mockInitialNormalisedValue = 0, mockProperties = {
         marks
     });
     const drag = isStandalone ? bindDrag : bindSequenceDrag;
+    // const focusBorderMargin = 10;
     useEffect(()=>{
         if (normalisedValue !== null && normalisedValue !== undefined && normalisedValue !== prevValRef.current) {
             animate(normalisedValue);
@@ -3879,6 +3928,7 @@ mockInitialNormalisedValue = 0, mockProperties = {
         [GradientStyles.multicolor]: multiColorGradient,
         [GradientStyles.unicolor]: singleColorGradient
     };
+    const marginSize = Spacing.mediumSmall;
     // const handleRef = useRef(null);
     // useEffect(() => {
     //   console.log(normalisedValue, 'NORMALIZEDVAL');
@@ -3890,7 +3940,7 @@ mockInitialNormalisedValue = 0, mockProperties = {
         className: classnames('BarSlider', isVertical && 'BarSlider--isVertical', isHorizontal && 'BarSlider--isHorizontal', className),
         id: id,
         ref: sliderElementRef,
-        gap: Box.gap.xSmall,
+        gap: Box.gap.none,
         height: isVertical ? height : 'auto',
         width: isHorizontal ? width : width ?? '100%',
         style: {
@@ -3904,185 +3954,196 @@ mockInitialNormalisedValue = 0, mockProperties = {
                 color: labelColor,
                 outerGlowRadius: outerGlowRadius,
                 outerGlowColor: labelColor,
-                blur: blur,
-                padding: [
-                    Label.padding.none,
-                    Label.padding.none,
-                    Label.padding.small,
-                    Label.padding.none
-                ]
+                blur: blur
             }) : null,
             polarity === Polarity.bipolar && jsx("div", {
                 className: 'Slider-center-marker'
             }),
-            jsxs(Box, {
-                style: {
-                    position: 'relative'
-                },
-                fullHeight: true,
-                padding: [
-                    Label.padding.none,
-                    Label.padding.none,
-                    Label.padding.small,
-                    Label.padding.none
-                ],
+            jsxs(ControlGroupWrapper, {
+                id: id,
+                width: '100%',
+                height: '100%',
+                isFocused: isFocused,
+                className: `RotarySlider-HighlightWrapper`,
+                borderHighlightColor: cornerBorderHighlightColor,
                 children: [
-                    marks && marks?.length > 0 ? marks?.map((item)=>jsxs(Box, {
-                            width: '2.5rem',
-                            height: '2rem',
-                            flexDirection: Box.flexDirection.column,
-                            style: {
-                                position: 'absolute',
-                                pointerEvents: 'none',
-                                top: `1px`,
-                                height: '2rem',
-                                width: '2rem',
-                                left: `calc(${item?.value * 100}% - 1rem)`,
-                                zIndex: 1
-                            },
-                            children: [
-                                jsx("div", {
-                                    className: "BarSlider-Mark",
-                                    style: {
-                                        width: '5px',
-                                        height: '5px',
-                                        borderRadius: '100%',
-                                        background: hoveredMark === item?.label ? markHighlightColor : markColor,
-                                        zIndex: 1,
-                                        cursor: 'pointer',
-                                        pointerEvents: 'auto'
-                                    },
-                                    onMouseEnter: ()=>setHoveredMark(item?.label),
-                                    onMouseLeave: ()=>setHoveredMark(null),
-                                    onClick: ()=>{
-                                        setNormalisedState(item?.value);
-                                    }
-                                }),
-                                item?.label ? jsx(Label, {
-                                    id: item?.label,
-                                    value: item?.label,
-                                    fontSize: Label.fontSize.xXSmall,
-                                    onMouseEnter: ()=>setHoveredMark(item?.label),
-                                    onMouseLeave: ()=>setHoveredMark(null),
-                                    color: +normalisedValue?.toFixed(2) === +item?.value?.toFixed(2) || hoveredMark === item?.label ? markHighlightColor : markColor,
-                                    highlightColor: markHighlightColor,
-                                    onClick: ()=>{
-                                        setNormalisedState(item?.value);
-                                    },
-                                    style: {
-                                        cursor: 'pointer',
-                                        pointerEvents: 'auto'
-                                    }
-                                }) : null
-                            ]
-                        })) : null,
-                    jsx(Box, {
-                        className: "BarSlider-innerWrapper",
-                        height: isHorizontal && showHandle ? `${handleWidth}px` : isHorizontal && !showHandle ? 'auto' : '100%',
-                        width: isVertical && showHandle ? `${handleWidth}px` : '100%',
+                    jsxs(Box, {
                         style: {
-                            filter: `blur(${blur}px)`,
-                            touchAction: 'none'
+                            position: 'relative'
                         },
-                        "data-sliderElement": "true",
-                        ...drag(),
-                        children: jsxs("div", {
-                            className: classnames('BarSlider-Track', isHighlighted && 'isHighlighted'),
-                            // onMouseEnter={onMouseEnter}
-                            id: id,
-                            style: {
-                                background: trackColor,
-                                stroke: trackStrokeColor ? `1px solid ${trackStrokeColor}` : 'none',
-                                width: isHorizontal ? '100%' : trackStringWidth,
-                                height: isHorizontal ? trackStringWidth : '100%',
-                                borderRadius: trackBorderRadius ? `${trackBorderRadius}px` : '0',
-                                boxShadow: showInsetBoxShadow ? `inset 0px 2px 6px rgba(0, 0, 0, 0.25)` : 'none',
-                                filter: generateDropShadowFilterString(outerGlowColors, outerGlowRadius),
-                                ...style
-                            },
-                            children: [
-                                normalisedValue !== null && normalisedValue !== undefined ? jsx("div", {
-                                    className: "Barslider-IndicatorLineWrapper",
+                        fullHeight: true,
+                        padding: isStandalone ? isVertical ? [
+                            Box.padding.none
+                        ] : [
+                            marginSize,
+                            Box.padding.small,
+                            Box.padding.none,
+                            Box.padding.small
+                        ] : [
+                            Box.padding.none
+                        ],
+                        children: [
+                            marks && marks?.length > 0 ? marks?.map((item)=>jsxs(Box, {
+                                    width: '2.5rem',
+                                    height: '2rem',
+                                    flexDirection: Box.flexDirection.column,
                                     style: {
-                                        borderRadius: trackBorderRadius ? `${trackBorderRadius}px` : '0',
-                                        bottom: '0',
-                                        left: '0',
-                                        width: isHorizontal ? '100%' : trackStringWidth,
-                                        height: '100%'
+                                        position: 'absolute',
+                                        pointerEvents: 'none',
+                                        top: `var(--spacing-${marginSize})`,
+                                        height: '2rem',
+                                        width: '2rem',
+                                        left: `calc(${item?.value * 100}% - 1rem)`,
+                                        zIndex: 1
                                     },
-                                    children: jsx("div", {
-                                        // TODO: Why aren't the Tailwind classes working?
-                                        // className={classnames('h-full', 'w-full', 'absolute', 'bg-panel')}
-                                        ref: barSliderIndicatorRef,
-                                        className: "BarSlider-IndicatorLine",
-                                        style: {
-                                            background: indicatorLineGradient ? selectedGradientMap[indicatorLineGradient] : indicatorLineColor,
-                                            opacity: isStandalone || isHighlighted ? '100%' : '80%',
-                                            top: `${isHorizontal && 'calc(50% - 3px)'}`,
-                                            left: `${isVertical && 'calc(50% - 3px)'}`,
-                                            filter: generateDropShadowFilterString(outerGlowColors, outerGlowRadius),
-                                            ...getBarTransformStyles({
-                                                orientation: orientation,
-                                                polarity
-                                            })
-                                        }
-                                    })
-                                }) : '',
-                                showHandle ? jsx("div", {
-                                    className: "BarSlider-HandleWrapper",
+                                    children: [
+                                        jsx("div", {
+                                            className: "BarSlider-Mark",
+                                            style: {
+                                                width: '5px',
+                                                height: '5px',
+                                                borderRadius: '100%',
+                                                background: hoveredMark === item?.label ? markHighlightColor : markColor,
+                                                zIndex: 1,
+                                                cursor: 'pointer',
+                                                pointerEvents: 'auto'
+                                            },
+                                            onMouseEnter: ()=>setHoveredMark(item?.label),
+                                            onMouseLeave: ()=>setHoveredMark(null),
+                                            onClick: ()=>{
+                                                setNormalisedState(item?.value);
+                                            }
+                                        }),
+                                        item?.label ? jsx(Label, {
+                                            id: item?.label,
+                                            value: item?.label,
+                                            fontSize: Label.fontSize.xXSmall,
+                                            onMouseEnter: ()=>setHoveredMark(item?.label),
+                                            onMouseLeave: ()=>setHoveredMark(null),
+                                            color: +normalisedValue?.toFixed(2) === +item?.value?.toFixed(2) || hoveredMark === item?.label ? markHighlightColor : markColor,
+                                            highlightColor: markHighlightColor,
+                                            onClick: ()=>{
+                                                setNormalisedState(item?.value);
+                                            },
+                                            style: {
+                                                cursor: 'pointer',
+                                                pointerEvents: 'auto'
+                                            }
+                                        }) : null
+                                    ]
+                                })) : null,
+                            jsx(Box, {
+                                className: "BarSlider-innerWrapper",
+                                height: isHorizontal && showHandle ? `${handleWidth}px` : isHorizontal && !showHandle ? 'auto' : '100%',
+                                width: isVertical && showHandle ? `${handleWidth}px` : '100%',
+                                style: {
+                                    filter: `blur(${blur}px)`,
+                                    touchAction: 'none'
+                                },
+                                "data-sliderElement": "true",
+                                ...drag(),
+                                children: jsxs("div", {
+                                    className: classnames('BarSlider-Track', isHighlighted && 'isHighlighted'),
+                                    // onMouseEnter={onMouseEnter}
+                                    id: id,
                                     style: {
-                                        top: isHorizontal ? 0 : handleMargin / 2,
-                                        left: isHorizontal ? handleMargin / 2 : 0,
-                                        width: isHorizontal ? `calc(100% - ${handleMargin}px)` : '100%',
-                                        height: isHorizontal ? '100%' : `calc(100% - ${handleMargin}px)`,
-                                        zIndex: 2
+                                        background: trackColor,
+                                        stroke: trackStrokeColor ? `1px solid ${trackStrokeColor}` : 'none',
+                                        width: isHorizontal ? '100%' : trackStringWidth,
+                                        height: isHorizontal ? trackStringWidth : '100%',
+                                        borderRadius: trackBorderRadius ? `${trackBorderRadius}px` : '0',
+                                        boxShadow: showInsetBoxShadow ? `inset 0px 2px 6px rgba(0, 0, 0, 0.25)` : 'none',
+                                        filter: generateDropShadowFilterString(outerGlowColors, outerGlowRadius),
+                                        ...style
                                     },
-                                    children: jsx("div", {
-                                        ref: handleElementRef,
-                                        className: "BarSlider-Handle",
-                                        style: {
-                                            borderRadius: trackBorderRadius ? `${trackBorderRadius}px` : 'none'
-                                        },
-                                        children: jsx(BarSliderHandle, {
-                                            handleFillColor: handleFillColor,
-                                            handleStrokeColor: handleStrokeColor,
-                                            strokeWidth: 5,
-                                            width: handleWidth
-                                        })
-                                    })
-                                }) : null
-                            ]
-                        })
-                    })
+                                    children: [
+                                        normalisedValue !== null && normalisedValue !== undefined ? jsx("div", {
+                                            className: "Barslider-IndicatorLineWrapper",
+                                            style: {
+                                                borderRadius: trackBorderRadius ? `${trackBorderRadius}px` : '0',
+                                                bottom: '0',
+                                                left: '0',
+                                                width: isHorizontal ? '100%' : trackStringWidth,
+                                                height: '100%'
+                                            },
+                                            children: jsx("div", {
+                                                // TODO: Why aren't the Tailwind classes working?
+                                                // className={classnames('h-full', 'w-full', 'absolute', 'bg-panel')}
+                                                ref: barSliderIndicatorRef,
+                                                className: "BarSlider-IndicatorLine",
+                                                style: {
+                                                    background: indicatorLineGradient ? selectedGradientMap[indicatorLineGradient] : indicatorLineColor,
+                                                    opacity: isStandalone || isHighlighted ? '100%' : '80%',
+                                                    top: `${isHorizontal && 'calc(50% - 3px)'}`,
+                                                    left: `${isVertical && 'calc(50% - 3px)'}`,
+                                                    filter: generateDropShadowFilterString(outerGlowColors, outerGlowRadius),
+                                                    ...getBarTransformStyles({
+                                                        orientation: orientation,
+                                                        polarity
+                                                    })
+                                                }
+                                            })
+                                        }) : '',
+                                        showHandle ? jsx("div", {
+                                            className: "BarSlider-HandleWrapper",
+                                            style: {
+                                                top: isHorizontal ? 0 : handleMargin / 2,
+                                                left: isHorizontal ? handleMargin / 2 : 0,
+                                                width: isHorizontal ? `calc(100% - ${handleMargin}px)` : '100%',
+                                                height: isHorizontal ? '100%' : `calc(100% - ${handleMargin}px)`,
+                                                zIndex: 2
+                                            },
+                                            children: jsx("div", {
+                                                ref: handleElementRef,
+                                                className: "BarSlider-Handle",
+                                                style: {
+                                                    borderRadius: trackBorderRadius ? `${trackBorderRadius}px` : 'none'
+                                                },
+                                                children: jsx(BarSliderHandle, {
+                                                    handleFillColor: handleFillColor,
+                                                    handleStrokeColor: handleStrokeColor,
+                                                    strokeWidth: 5,
+                                                    width: handleWidth
+                                                })
+                                            })
+                                        }) : null
+                                    ]
+                                })
+                            })
+                        ]
+                    }),
+                    showValue ? jsx(Input, {
+                        className: `BarSlider-Input ${includeValueInHeight ? 'includeValueInHeightIsTrue' : 'includeValueInHeightIsFalse'}`,
+                        ref: inputRef,
+                        value: scaledValue,
+                        id: id,
+                        min: properties?.start || 0,
+                        max: properties?.end || 0,
+                        type: Input.type.number,
+                        textColor: labelColor,
+                        highlightColor: inputHighlightColor,
+                        outerGlowRadius: outerGlowRadius,
+                        outerGlowColor: labelColor,
+                        style: {
+                        },
+                        blur: blur,
+                        textAlign: Input.textAlign.center,
+                        onComplete: (value)=>{
+                            // normalisedValue !== undefined &&
+                            //   setScaledState(normalisedValue);
+                            value !== undefined && setScaledState(value);
+                        }
+                    }) : null
                 ]
-            }),
-            showValue ? jsx(Input, {
-                className: `BarSlider-Input ${includeValueInHeight ? 'includeValueInHeightIsTrue' : 'includeValueInHeightIsFalse'}`,
-                value: scaledValue,
-                id: id,
-                min: properties?.start || 0,
-                max: properties?.end || 0,
-                type: Input.type.number,
-                textColor: labelColor,
-                highlightColor: inputHighlightColor,
-                outerGlowRadius: outerGlowRadius,
-                outerGlowColor: labelColor,
-                style: {
-                },
-                blur: blur,
-                textAlign: Input.textAlign.center,
-                onComplete: (value)=>{
-                    // normalisedValue !== undefined &&
-                    //   setScaledState(normalisedValue);
-                    value !== undefined && setScaledState(value);
-                }
-            }) : null
+            })
         ]
     });
 }
 Slider$1.sliderType = SliderType;
 Slider$1.polarity = Polarity;
 Slider$1.orientation = Orientation;
+Slider$1.width = Width;
+Slider$1.height = Height;
 
 // Rotary Slider UI component.
 // Connects to Juce's Slider element
@@ -4286,6 +4347,7 @@ mockInitialNormalisedValue = 0, showValue, includeValueInHeight, marks, isRandom
                 isStandalone: isStandalone,
                 isHighlighted: isHighlighted,
                 includeValueInHeight: includeValueInHeight,
+                cornerBorderHighlightColor: cornerBorderHighlightColor,
                 randomizerObject: randomizerObject,
                 blur: blur
             }) : null