@tomorrowevening/theatre-studio 1.0.5 → 1.0.6

package/dist/uiComponents/Popover/PopoverArrow.js

@@ -1,38 +0,0 @@
-import React, { forwardRef, useContext } from 'react';
-import styled from 'styled-components';
-import ArrowContext from './ArrowContext';
-const Container = styled.div `
-  position: absolute;
-  width: 0;
-  height: 0;
-  color: var(--popover-arrow-color);
-  pointer-events: none;
-`;
-const Adjust = styled.div `
-  width: 12px;
-  height: 8px;
-  position: absolute;
-  left: -7px;
-  top: -8px;
-  text-align: center;
-  line-height: 0;
-`;
-const InnerTriangle = styled.path `
-  fill: var(--popover-bg);
-`;
-const InnerStroke = styled.path `
-  fill: var(--popover-inner-stroke);
-`;
-const OuterStroke = styled.path `
-  fill: var(--popover-outer-stroke);
-`;
-const PopoverArrow = forwardRef(({ className }, ref) => {
-    const arrowStyle = useContext(ArrowContext);
-    return (React.createElement(Container, { className: className, ref: ref, style: { ...arrowStyle } },
-        React.createElement(Adjust, null,
-            React.createElement("svg", { width: "12", height: "8", viewBox: "0 0 12 8", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-                React.createElement(OuterStroke, { d: "M6 0L0 6H12L6 0Z" }),
-                React.createElement(InnerStroke, { d: "M6 1.5L0 7.5H12L6 1.5Z" }),
-                React.createElement(InnerTriangle, { d: "M6 3L0 9H12L6 3Z" })))));
-});
-export default PopoverArrow;

package/dist/uiComponents/Popover/TooltipContext.js

@@ -1,46 +0,0 @@
-import { Atom } from '@tomorrowevening/theatre-dataverse';
-import useRefAndState from '@tomorrowevening/theatre-studio/utils/useRefAndState';
-import React, { createContext, useCallback, useContext, useEffect, useMemo, } from 'react';
-const ctx = createContext(null);
-let lastTooltipId = 0;
-export const useTooltipOpenState = () => {
-    const id = useMemo(() => lastTooltipId++, []);
-    const { cur, set } = useContext(ctx);
-    const [isOpenRef, isOpen] = useRefAndState(false);
-    const setIsOpen = useCallback((shouldOpen, delay) => {
-        set(shouldOpen ? id : -1, delay);
-    }, []);
-    useEffect(() => {
-        return cur.onStale(() => {
-            const flag = cur.getValue() === id;
-            if (isOpenRef.current !== flag)
-                isOpenRef.current = flag;
-        });
-    }, [cur, id]);
-    return [isOpen, setIsOpen];
-};
-const TooltipContext = ({ children }) => {
-    const currentTooltipId = useMemo(() => new Atom(-1), []);
-    const cur = currentTooltipId.prism;
-    const set = useMemo(() => {
-        let lastTimeout = undefined;
-        return (id, delay) => {
-            const overridingPreviousTimeout = lastTimeout !== undefined;
-            if (lastTimeout !== undefined) {
-                clearTimeout(lastTimeout);
-                lastTimeout = undefined;
-            }
-            if (delay === 0 || overridingPreviousTimeout) {
-                currentTooltipId.set(id);
-            }
-            else {
-                lastTimeout = setTimeout(() => {
-                    currentTooltipId.set(id);
-                    lastTimeout = undefined;
-                }, delay);
-            }
-        };
-    }, []);
-    return React.createElement(ctx.Provider, { value: { cur, set } }, children);
-};
-export default TooltipContext;

package/dist/uiComponents/Popover/TooltipWrapper.js

@@ -1,103 +0,0 @@
-import React from 'react';
-import { cloneElement, useLayoutEffect, useState } from 'react';
-import useWindowSize from 'react-use/esm/useWindowSize';
-import useBoundingClientRect from '@tomorrowevening/theatre-studio/uiComponents/useBoundingClientRect';
-import ArrowContext from './ArrowContext';
-import useRefAndState from '@tomorrowevening/theatre-studio/utils/useRefAndState';
-import useOnClickOutside from '@tomorrowevening/theatre-studio/uiComponents/useOnClickOutside';
-import onPointerOutside from '@tomorrowevening/theatre-studio/uiComponents/onPointerOutside';
-import noop from '@tomorrowevening/theatre-shared/utils/noop';
-import { clamp } from 'lodash-es';
-const minimumDistanceOfArrowToEdgeOfPopover = 8;
-const TooltipWrapper = (props) => {
-    const originalElement = props.children();
-    const [ref, container] = useRefAndState(null);
-    const style = originalElement.props.style
-        ? { ...originalElement.props.style }
-        : {};
-    style.position = 'absolute';
-    const containerRect = useBoundingClientRect(container);
-    const targetRect = useBoundingClientRect(props.target);
-    const windowSize = useWindowSize();
-    const [arrowContextValue, setArrowContextValue] = useState({});
-    useLayoutEffect(() => {
-        if (!containerRect || !container || !targetRect)
-            return;
-        const gap = props.verticalGap ?? 8;
-        const arrowStyle = {};
-        let verticalPlacement = props.verticalPlacement ?? 'bottom';
-        let top = 0;
-        let left = 0;
-        if (verticalPlacement === 'bottom') {
-            if (targetRect.bottom + containerRect.height + gap < windowSize.height) {
-                verticalPlacement = 'bottom';
-                top = targetRect.bottom + gap;
-                arrowStyle.top = '0px';
-            }
-            else if (targetRect.top > containerRect.height + gap) {
-                verticalPlacement = 'top';
-                top = targetRect.top - (containerRect.height + gap);
-                arrowStyle.bottom = '0px';
-                arrowStyle.transform = 'rotateZ(180deg)';
-            }
-            else {
-                verticalPlacement = 'overlay';
-            }
-        }
-        else if (verticalPlacement === 'top') {
-            if (targetRect.top > containerRect.height + gap) {
-                verticalPlacement = 'top';
-                top = targetRect.top - (containerRect.height + gap);
-                arrowStyle.bottom = '0px';
-                arrowStyle.transform = 'rotateZ(180deg)';
-            }
-            else if (targetRect.bottom + containerRect.height + gap <
-                windowSize.height) {
-                verticalPlacement = 'bottom';
-                top = targetRect.bottom + gap;
-                arrowStyle.top = '0px';
-            }
-            else {
-                verticalPlacement = 'overlay';
-            }
-        }
-        let arrowLeft = 0;
-        if (verticalPlacement !== 'overlay') {
-            const anchorLeft = targetRect.left + targetRect.width / 2;
-            if (anchorLeft < containerRect.width / 2) {
-                left = gap;
-                arrowLeft = Math.max(anchorLeft - gap, minimumDistanceOfArrowToEdgeOfPopover);
-            }
-            else if (anchorLeft + containerRect.width / 2 > windowSize.width) {
-                left = windowSize.width - (gap + containerRect.width);
-                arrowLeft = Math.min(anchorLeft - left, containerRect.width - minimumDistanceOfArrowToEdgeOfPopover);
-            }
-            else {
-                left = anchorLeft - containerRect.width / 2;
-                arrowLeft = containerRect.width / 2;
-            }
-            arrowStyle.left = arrowLeft + 'px';
-        }
-        const { minX = -Infinity, maxX = Infinity, minY = -Infinity, maxY = Infinity, } = props.constraints ?? {};
-        const pos = {
-            left: clamp(left, minX, maxX - containerRect.width),
-            top: clamp(top, minY, maxY + containerRect.height),
-        };
-        container.style.left = pos.left + 'px';
-        container.style.top = pos.top + 'px';
-        setArrowContextValue(arrowStyle);
-        if (props.onPointerOutside) {
-            return onPointerOutside(container, props.onPointerOutside.threshold, props.onPointerOutside.callback);
-        }
-    }, [
-        containerRect,
-        container,
-        props.target,
-        targetRect,
-        windowSize,
-        props.onPointerOutside,
-    ]);
-    useOnClickOutside([container, props.target ?? null], props.onClickOutside ?? noop);
-    return (React.createElement(ArrowContext.Provider, { value: arrowContextValue }, cloneElement(originalElement, { ref, style })));
-};
-export default TooltipWrapper;

package/dist/uiComponents/Popover/usePopover.js

@@ -1,132 +0,0 @@
-import { usePointerCapturing } from '@tomorrowevening/theatre-studio/UIRoot/PointerCapturing';
-import useRefAndState from '@tomorrowevening/theatre-studio/utils/useRefAndState';
-import React, { useCallback, useContext, useEffect, useRef } from 'react';
-import { createPortal } from 'react-dom';
-import { PortalContext } from 'reakit';
-import TooltipWrapper from './TooltipWrapper';
-import { contextMenuShownContext } from '@tomorrowevening/theatre-studio/panels/DetailPanel/DetailPanel';
-const PopoverAutoCloseLock = React.createContext({
-    // defaults have no effects, since there would not be a
-    // parent popover to worry about auto-closing.
-    takeFocus() {
-        return {
-            releaseFocus() { },
-        };
-    },
-});
-export default function usePopover(opts, render) {
-    const _debug = (...args) => { };
-    // want to make sure that we don't close a popover when dragging something (like a curve editor handle)
-    // I think this could be improved to handle closing after done dragging, better.
-    const { isPointerBeingCaptured } = usePointerCapturing(`usePopover`);
-    const [stateRef, state] = useRefAndState({
-        isOpen: false,
-    });
-    const optsRef = useRef(opts);
-    const close = useCallback((reason) => {
-        _debug(`closing due to "${reason}"`);
-        stateRef.current = { isOpen: false };
-    }, []);
-    const open = useCallback((e, target) => {
-        const opts = typeof optsRef.current === 'function'
-            ? optsRef.current()
-            : optsRef.current;
-        function onClickOutside() {
-            if (lock.childHasFocusRef.current)
-                return;
-            if (opts.closeOnClickOutside !== false) {
-                close('clicked outside popover');
-            }
-        }
-        stateRef.current = {
-            isOpen: true,
-            clickPoint: { clientX: e.clientX, clientY: e.clientY },
-            target,
-            opts,
-            onClickOutside: onClickOutside,
-            onPointerOutside: opts.closeWhenPointerIsDistant === false
-                ? undefined
-                : {
-                    threshold: opts.pointerDistanceThreshold ?? 100,
-                    callback: () => {
-                        if (lock.childHasFocusRef.current)
-                            return;
-                        // this is a bit weird, because when you stop capturing, then the popover can close on you...
-                        // TODO: Better fixes?
-                        if (isPointerBeingCaptured())
-                            return;
-                        close('pointer outside');
-                    },
-                },
-        };
-    }, []);
-    const toggle = useCallback((...args) => {
-        if (stateRef.current.isOpen) {
-            close('toggled');
-        }
-        else {
-            open(...args);
-        }
-    }, []);
-    /**
-     * See doc comment on {@link useAutoCloseLockState}.
-     * Used to ensure that moving far away from a parent popover doesn't
-     * close a child popover.
-     */
-    const lock = useAutoCloseLockState({
-        _debug,
-        state,
-    });
-    // TODO: this lock is now exported from the detail panel, do refactor it when you get the chance
-    const [, addContextMenu] = useContext(contextMenuShownContext);
-    useEffect(() => {
-        let removeContextMenu;
-        if (state.isOpen) {
-            removeContextMenu = addContextMenu();
-        }
-        return () => removeContextMenu?.();
-    }, [state.isOpen]);
-    const portalLayer = useContext(PortalContext);
-    const node = state.isOpen ? (createPortal(React.createElement(PopoverAutoCloseLock.Provider, { value: lock.childPopoverLock },
-        React.createElement(TooltipWrapper, { children: render, target: state.target, onClickOutside: state.onClickOutside, onPointerOutside: state.onPointerOutside, constraints: state.opts.constraints, verticalGap: state.opts.verticalGap })), portalLayer)) : (React.createElement(React.Fragment, null));
-    return { node, open, close, toggle, isOpen: state.isOpen };
-}
-/**
- * Keep track of the current lock state, and provide
- * a lock that can be passed down to popover children.
- *
- * Used to ensure that moving far away from a parent popover doesn't
- * close a child popover.
- * When child popovers are opened, we want to suspend all auto-closing
- * behaviors for parenting popovers.
- */
-function useAutoCloseLockState(options) {
-    const parentLock = useContext(PopoverAutoCloseLock);
-    useEffect(() => {
-        if (options.state.isOpen) {
-            // when this "popover" is open, then take focus from parent
-            const focused = parentLock.takeFocus();
-            options._debug('take focus');
-            return () => {
-                // when closed / unmounted, release focus
-                options._debug('release focus');
-                focused.releaseFocus();
-            };
-        }
-    }, [options.state.isOpen]);
-    // child of us
-    const childHasFocusRef = useRef(false);
-    return {
-        childHasFocusRef: childHasFocusRef,
-        childPopoverLock: {
-            takeFocus() {
-                childHasFocusRef.current = true;
-                return {
-                    releaseFocus() {
-                        childHasFocusRef.current = false;
-                    },
-                };
-            },
-        },
-    };
-}

package/dist/uiComponents/Popover/useTooltip.js

@@ -1,33 +0,0 @@
-import useRefAndState from '@tomorrowevening/theatre-studio/utils/useRefAndState';
-import { useContext } from 'react';
-import { useEffect } from 'react';
-import React from 'react';
-import TooltipWrapper from './TooltipWrapper';
-import { createPortal } from 'react-dom';
-import { useTooltipOpenState } from './TooltipContext';
-import { PortalContext } from 'reakit';
-import noop from '@tomorrowevening/theatre-shared/utils/noop';
-export default function useTooltip(opts, render) {
-    const enabled = opts.enabled !== false;
-    const [isOpen, setIsOpen] = useTooltipOpenState();
-    const [targetRef, targetNode] = useRefAndState(null);
-    useEffect(() => {
-        if (!enabled) {
-            return;
-        }
-        const target = targetRef.current;
-        if (!target)
-            return;
-        const onMouseEnter = () => setIsOpen(true, opts.enterDelay ?? 400);
-        const onMouseLeave = () => setIsOpen(false, opts.exitDelay ?? 200);
-        target.addEventListener('mouseenter', onMouseEnter);
-        target.addEventListener('mouseleave', onMouseLeave);
-        return () => {
-            target.removeEventListener('mouseenter', onMouseEnter);
-            target.removeEventListener('mouseleave', onMouseLeave);
-        };
-    }, [targetRef, enabled, opts.enterDelay, opts.exitDelay]);
-    const portalLayer = useContext(PortalContext);
-    const node = enabled && isOpen && targetNode ? (createPortal(React.createElement(TooltipWrapper, { children: render, target: targetNode, onClickOutside: noop, verticalPlacement: opts.verticalPlacement, verticalGap: opts.verticalGap }), portalLayer)) : (React.createElement(React.Fragment, null));
-    return [node, targetRef, isOpen];
-}

package/dist/uiComponents/RoomToClick.js

@@ -1,10 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-const Container = styled.div `
-  position: absolute;
-  inset: ${(props) => props.room * -1}px;
-`;
-const RoomToClick = (props) => {
-    return React.createElement(Container, { room: props.room });
-};
-export default RoomToClick;

package/dist/uiComponents/SVGIcon.js

@@ -1,19 +0,0 @@
-import React from 'react';
-import styled, { css } from 'styled-components';
-const Container = styled.div `
-  width: ${(props) => (props.sizing === 'em' ? '1em' : '100%')};
-  ${(props) => props.sizing === 'absoluteFill' &&
-    css `
-      & > svg {
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-      }
-    `}
-`;
-const SvgIcon = (props) => {
-    return (React.createElement(Container, { sizing: props.sizing || 'em', dangerouslySetInnerHTML: { __html: props.src } }));
-};
-export default SvgIcon;

package/dist/uiComponents/ShowMousePosition.js

@@ -1,30 +0,0 @@
-import mousePositionD from '@tomorrowevening/theatre-studio/utils/mousePositionD';
-import { usePrism } from '@tomorrowevening/theatre-react';
-import { val } from '@tomorrowevening/theatre-dataverse';
-import React from 'react';
-import { createPortal } from 'react-dom';
-const ShowMousePosition = (props) => {
-    const pos = usePrism(() => val(mousePositionD) ?? { clientX: 0, clientY: 0 }, []);
-    return createPortal(React.createElement(React.Fragment, null,
-        React.createElement("div", { style: {
-                position: 'fixed',
-                top: '0',
-                bottom: '0',
-                width: '1px',
-                background: 'rgba(255, 255, 255, 0.2)',
-                pointerEvents: 'none',
-                zIndex: 9999,
-                left: `${pos.clientX}px`,
-            } }),
-        React.createElement("div", { style: {
-                position: 'fixed',
-                left: '0',
-                right: '0',
-                height: '1px',
-                background: 'rgba(255, 255, 255, 0.2)',
-                pointerEvents: 'none',
-                zIndex: 9999,
-                top: `${pos.clientY}px`,
-            } })), document.body);
-};
-export default ShowMousePosition;

package/dist/uiComponents/colorPicker/components/EditingProvider.js

@@ -1,15 +0,0 @@
-import React, { createContext, useContext, useState } from 'react';
-const editingContext = createContext(undefined);
-/**
- * Provides the current mode the color picker is in. When editing, the picker should be
- * stateful and disregard controlling props, while not editing, it should behave
- * in a controlled manner.
- */
-export const EditingProvider = ({ children, }) => {
-    const [editing, setEditing] = useState(false);
-    return (React.createElement(editingContext.Provider, { value: {
-            editing,
-            setEditing,
-        } }, children));
-};
-export const useEditing = () => useContext(editingContext);

package/dist/uiComponents/colorPicker/components/RgbaColorPicker.js

@@ -1,31 +0,0 @@
-import React from 'react';
-import { AlphaColorPicker } from './common/AlphaColorPicker';
-import { equalColorObjects } from '@tomorrowevening/theatre-studio/uiComponents/colorPicker/utils/compare';
-import { rgbaToHsva, hsvaToRgba, } from '@tomorrowevening/theatre-studio/uiComponents/colorPicker/utils/convert';
-import { EditingProvider } from './EditingProvider';
-const normalizeRgba = (rgba) => {
-    return {
-        r: rgba.r / 255,
-        g: rgba.g / 255,
-        b: rgba.b / 255,
-        a: rgba.a,
-    };
-};
-const denormalizeRgba = (rgba) => {
-    return {
-        r: rgba.r * 255,
-        g: rgba.g * 255,
-        b: rgba.b * 255,
-        a: rgba.a,
-    };
-};
-const colorModel = {
-    defaultColor: { r: 0, g: 0, b: 0, a: 1 },
-    toHsva: (rgba) => rgbaToHsva(denormalizeRgba(rgba)),
-    fromHsva: (hsva) => normalizeRgba(hsvaToRgba(hsva)),
-    equal: equalColorObjects,
-};
-export const RgbaColorPicker = (props) => (React.createElement(EditingProvider, null,
-    React.createElement(AlphaColorPicker, { ...props, permanentlySetValue: (newColor) => {
-            props.permanentlySetValue(newColor);
-        }, colorModel: colorModel })));

package/dist/uiComponents/colorPicker/components/common/Alpha.js

@@ -1,54 +0,0 @@
-import React from 'react';
-import { Interactive } from './Interactive';
-import { Pointer } from './Pointer';
-import { hsvaToHslaString } from '@tomorrowevening/theatre-studio/uiComponents/colorPicker/utils/convert';
-import { clamp } from '@tomorrowevening/theatre-studio/uiComponents/colorPicker/utils/clamp';
-import { round } from '@tomorrowevening/theatre-studio/uiComponents/colorPicker/utils/round';
-import styled from 'styled-components';
-const Container = styled.div `
-  position: relative;
-  height: 16px;
-  border-radius: 2px;
-  // Checkerboard
-  background-color: #fff;
-  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill-opacity=".05"><rect x="8" width="8" height="8"/><rect y="8" width="8" height="8"/></svg>');
-`;
-const Gradient = styled.div.attrs(({ colorFrom, colorTo }) => ({
-    style: {
-        backgroundImage: `linear-gradient(90deg, ${colorFrom}, ${colorTo})`,
-    },
-})) `
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  pointer-events: none;
-  border-radius: inherit;
-
-  // Improve rendering on light backgrounds
-  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
-`;
-const StyledPointer = styled(Pointer) `
-  // Checkerboard
-  background-color: #fff;
-  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill-opacity=".05"><rect x="8" width="8" height="8"/><rect y="8" width="8" height="8"/></svg>');
-`;
-export const Alpha = ({ className, hsva, onChange }) => {
-    const handleMove = (interaction) => {
-        onChange({ a: interaction.left });
-    };
-    const handleKey = (offset) => {
-        // Alpha always fit into [0, 1] range
-        onChange({ a: clamp(hsva.a + offset.left) });
-    };
-    // We use `Object.assign` instead of the spread operator
-    // to prevent adding the polyfill (about 150 bytes gzipped)
-    const colorFrom = hsvaToHslaString(Object.assign({}, hsva, { a: 0 }));
-    const colorTo = hsvaToHslaString(Object.assign({}, hsva, { a: 1 }));
-    return (React.createElement(Container, { className: className },
-        React.createElement(Gradient, { colorFrom: colorFrom, colorTo: colorTo }),
-        React.createElement(Interactive, { onMove: handleMove, onKey: handleKey, "aria-label": "Alpha", "aria-valuetext": `${round(hsva.a * 100)}%` },
-            React.createElement(StyledPointer, { left: hsva.a, color: hsvaToHslaString(hsva) }))));
-};

package/dist/uiComponents/colorPicker/components/common/AlphaColorPicker.js

@@ -1,28 +0,0 @@
-import React, { useEffect } from 'react';
-import { Hue } from './Hue';
-import { Saturation } from './Saturation';
-import { Alpha } from './Alpha';
-import { useColorManipulation } from '@tomorrowevening/theatre-studio/uiComponents/colorPicker/hooks/useColorManipulation';
-import styled from 'styled-components';
-const Container = styled.div `
-  position: relative;
-  display: flex;
-  gap: 4px;
-  flex-direction: column;
-  width: 200px;
-  height: 200px;
-  user-select: none;
-  cursor: default;
-`;
-export const AlphaColorPicker = ({ className, colorModel, color = colorModel.defaultColor, temporarilySetValue, permanentlySetValue, discardTemporaryValue, ...rest }) => {
-    const [tempHsva, updateHsva] = useColorManipulation(colorModel, color, temporarilySetValue, permanentlySetValue);
-    useEffect(() => {
-        return () => {
-            discardTemporaryValue();
-        };
-    }, []);
-    return (React.createElement(Container, { ...rest },
-        React.createElement(Saturation, { hsva: tempHsva, onChange: updateHsva }),
-        React.createElement(Hue, { hue: tempHsva.h, onChange: updateHsva }),
-        React.createElement(Alpha, { hsva: tempHsva, onChange: updateHsva })));
-};

package/dist/uiComponents/colorPicker/components/common/Hue.js

@@ -1,41 +0,0 @@
-import React from 'react';
-import { Interactive } from './Interactive';
-import { Pointer } from './Pointer';
-import { hsvaToHslString } from '@tomorrowevening/theatre-studio/uiComponents/colorPicker/utils/convert';
-import { clamp } from '@tomorrowevening/theatre-studio/uiComponents/colorPicker/utils/clamp';
-import { round } from '@tomorrowevening/theatre-studio/uiComponents/colorPicker/utils/round';
-import styled from 'styled-components';
-const Container = styled.div `
-  position: relative;
-  height: 16px;
-  border-radius: 2px;
-
-  background: linear-gradient(
-    to right,
-    #f00 0%,
-    #ff0 17%,
-    #0f0 33%,
-    #0ff 50%,
-    #00f 67%,
-    #f0f 83%,
-    #f00 100%
-  );
-`;
-const StyledPointer = styled(Pointer) `
-  z-index: 2;
-`;
-const HueBase = ({ className, hue, onChange }) => {
-    const handleMove = (interaction) => {
-        onChange({ h: 360 * interaction.left });
-    };
-    const handleKey = (offset) => {
-        // Hue measured in degrees of the color circle ranging from 0 to 360
-        onChange({
-            h: clamp(hue + offset.left * 360, 0, 360),
-        });
-    };
-    return (React.createElement(Container, { className: className },
-        React.createElement(Interactive, { onMove: handleMove, onKey: handleKey, "aria-label": "Hue", "aria-valuetext": round(hue) },
-            React.createElement(StyledPointer, { left: hue / 360, color: hsvaToHslString({ h: hue, s: 100, v: 100, a: 1 }) }))));
-};
-export const Hue = React.memo(HueBase);