Big change to how the AnchoredBox component is structured so that it can be used in more than just one spot. Now composed of the wrapper Anchored, with two children AnchoredTrigger and AnchoredBox, each of which can have their own arbitrary children.
Next steps will involve renaming the component file to Anchored.jsx, moving most styling out of the attached stylesheet (and into brewRenderer.less), and adding props to pass in Anchor Positioning properties.
If there were two inputs sending styles to the same target (ie row and column gap), they would override each other.
This change fixes that by deepening the merges. Admittedly, I turned to cGPT to help me with this as the nesting was throwing me for a loop. It works, though, and I understand it now that I can read it.
defaultValue matches the normal styled values of the gap property on the .pages element.
removed the "tooltip" that showed the current value from the range sliders inside the anchoredbox (the gap sliders).
Refactoring the AnchoredBox component because I wanted to set focus on the trigger button when the expanded box was closed. Wrapping the trigger into it's own component, with forwardRef, allows for passing the `ref` to the actual DOM node. Then the `.focus()` method will work on it.
Rather than a single button with three states, it is three buttons. Went with buttons with `role='radio'` rather than true radios mostly because that is what Radix does.
the `-alt` icons have better sizing/readability than the originals. The originals likely will be removed.
Also adds back in 'fit-width' icon which was mistakenly overwritten earlier.
Gazook89