@wix/site-ui 1.29.0 → 1.31.0

package/dist/8106.js

@@ -0,0 +1,238 @@
+import { FloatingRootStore } from "./5992.js";
+import { useIsoLayoutEffect } from "./6499.js";
+import { isElement } from "./3829.js";
+import { FOCUSABLE_ATTRIBUTE } from "./4745.js";
+import { useId } from "./6046.js";
+import { useFloatingParentNodeId } from "./285.js";
+import { useStableCallback } from "./7541.js";
+import { useOpenChangeComplete, useTransitionStatus } from "./880.js";
+import { EMPTY_OBJECT } from "./8272.js";
+import * as __rspack_external_react from "react";
+function useSyncedFloatingRootContext(options) {
+    const { popupStore, treatPopupAsFloatingElement = false, floatingRootContext: floatingRootContextProp, floatingId, nested, onOpenChange } = options;
+    const open = popupStore.useState('open');
+    const referenceElement = popupStore.useState('activeTriggerElement');
+    const floatingElement = popupStore.useState(treatPopupAsFloatingElement ? 'popupElement' : 'positionerElement');
+    const triggerElements = popupStore.context.triggerElements;
+    const handleOpenChange = onOpenChange;
+    const internalStoreRef = __rspack_external_react.useRef(null);
+    if (void 0 === floatingRootContextProp && null === internalStoreRef.current) internalStoreRef.current = new FloatingRootStore({
+        open,
+        transitionStatus: void 0,
+        referenceElement,
+        floatingElement,
+        triggerElements,
+        onOpenChange: handleOpenChange,
+        floatingId,
+        syncOnly: true,
+        nested
+    });
+    const store = floatingRootContextProp ?? internalStoreRef.current;
+    popupStore.useSyncedValue('floatingId', floatingId);
+    useIsoLayoutEffect(()=>{
+        const valuesToSync = {
+            open,
+            floatingId,
+            referenceElement,
+            floatingElement
+        };
+        if (isElement(referenceElement)) valuesToSync.domReferenceElement = referenceElement;
+        if (store.state.positionReference === store.state.referenceElement) valuesToSync.positionReference = referenceElement;
+        store.update(valuesToSync);
+    }, [
+        open,
+        floatingId,
+        referenceElement,
+        floatingElement,
+        store
+    ]);
+    store.context.onOpenChange = handleOpenChange;
+    store.context.nested = nested;
+    return store;
+}
+const FOCUSABLE_POPUP_PROPS = {
+    tabIndex: -1,
+    [FOCUSABLE_ATTRIBUTE]: ''
+};
+function usePopupStore(externalStore, createStore, treatPopupAsFloatingElement = false) {
+    const floatingId = useId();
+    const nested = null != useFloatingParentNodeId();
+    const internalStoreRef = __rspack_external_react.useRef(null);
+    if (void 0 === externalStore && null === internalStoreRef.current) internalStoreRef.current = createStore(floatingId, nested);
+    const store = externalStore ?? internalStoreRef.current;
+    useSyncedFloatingRootContext({
+        popupStore: store,
+        treatPopupAsFloatingElement,
+        floatingRootContext: store.state.floatingRootContext,
+        floatingId,
+        nested,
+        onOpenChange: store.setOpen
+    });
+    return {
+        store,
+        internalStore: internalStoreRef.current
+    };
+}
+function useTriggerRegistration(id, store) {
+    const registeredElementIdRef = __rspack_external_react.useRef(null);
+    const registeredElementRef = __rspack_external_react.useRef(null);
+    return __rspack_external_react.useCallback((element)=>{
+        if (void 0 === id) return;
+        let shouldSyncTriggerCount = false;
+        if (null !== registeredElementIdRef.current) {
+            const registeredId = registeredElementIdRef.current;
+            const registeredElement = registeredElementRef.current;
+            const currentElement = store.context.triggerElements.getById(registeredId);
+            if (registeredElement && currentElement === registeredElement) {
+                store.context.triggerElements.delete(registeredId);
+                shouldSyncTriggerCount = true;
+            }
+            registeredElementIdRef.current = null;
+            registeredElementRef.current = null;
+        }
+        if (null !== element) {
+            registeredElementIdRef.current = id;
+            registeredElementRef.current = element;
+            store.context.triggerElements.add(id, element);
+            shouldSyncTriggerCount = true;
+        }
+        if (shouldSyncTriggerCount) {
+            const triggerCount = store.context.triggerElements.size;
+            if (store.select('open') && store.state.triggerCount !== triggerCount) store.set('triggerCount', triggerCount);
+        }
+    }, [
+        store,
+        id
+    ]);
+}
+function setOpenTriggerState(state, open, trigger) {
+    const triggerId = trigger?.id ?? null;
+    if (triggerId || open) {
+        state.activeTriggerId = triggerId;
+        state.activeTriggerElement = trigger ?? null;
+    }
+}
+function useTriggerDataForwarding(triggerId, triggerElementRef, store, stateUpdates) {
+    const isMountedByThisTrigger = store.useState('isMountedByTrigger', triggerId);
+    const baseRegisterTrigger = useTriggerRegistration(triggerId, store);
+    const registerTrigger = useStableCallback((element)=>{
+        baseRegisterTrigger(element);
+        if (!element) return;
+        const open = store.select('open');
+        const activeTriggerId = store.select('activeTriggerId');
+        if (activeTriggerId === triggerId) return void store.update({
+            activeTriggerElement: element,
+            ...open ? stateUpdates : null
+        });
+        if (null == activeTriggerId && open) store.update({
+            activeTriggerId: triggerId,
+            activeTriggerElement: element,
+            ...stateUpdates
+        });
+    });
+    useIsoLayoutEffect(()=>{
+        if (isMountedByThisTrigger) store.update({
+            activeTriggerElement: triggerElementRef.current,
+            ...stateUpdates
+        });
+    }, [
+        isMountedByThisTrigger,
+        store,
+        triggerElementRef,
+        ...Object.values(stateUpdates)
+    ]);
+    return {
+        registerTrigger,
+        isMountedByThisTrigger
+    };
+}
+function useImplicitActiveTrigger(store) {
+    const open = store.useState('open');
+    const reactiveTriggerCount = store.useState('triggerCount');
+    useIsoLayoutEffect(()=>{
+        if (!open) {
+            if (0 !== store.state.triggerCount) store.set('triggerCount', 0);
+            return;
+        }
+        const triggerCount = store.context.triggerElements.size;
+        const stateUpdates = {};
+        if (store.state.triggerCount !== triggerCount) stateUpdates.triggerCount = triggerCount;
+        if (!store.select('activeTriggerId') && 1 === triggerCount) {
+            const iteratorResult = store.context.triggerElements.entries().next();
+            if (!iteratorResult.done) {
+                const [implicitTriggerId, implicitTriggerElement] = iteratorResult.value;
+                stateUpdates.activeTriggerId = implicitTriggerId;
+                stateUpdates.activeTriggerElement = implicitTriggerElement;
+            }
+        }
+        if (void 0 !== stateUpdates.triggerCount || void 0 !== stateUpdates.activeTriggerId) store.update(stateUpdates);
+    }, [
+        open,
+        store,
+        reactiveTriggerCount
+    ]);
+}
+function useOpenStateTransitions(open, store, onUnmount) {
+    const { mounted, setMounted, transitionStatus } = useTransitionStatus(open);
+    store.useSyncedValues({
+        mounted,
+        transitionStatus
+    });
+    const forceUnmount = useStableCallback(()=>{
+        setMounted(false);
+        store.update({
+            activeTriggerId: null,
+            activeTriggerElement: null,
+            mounted: false,
+            preventUnmountingOnClose: false
+        });
+        onUnmount?.();
+        store.context.onOpenChangeComplete?.(false);
+    });
+    const preventUnmountingOnClose = store.useState('preventUnmountingOnClose');
+    useOpenChangeComplete({
+        enabled: mounted && !open && !preventUnmountingOnClose,
+        open,
+        ref: store.context.popupRef,
+        onComplete () {
+            if (!open) forceUnmount();
+        }
+    });
+    return {
+        forceUnmount,
+        transitionStatus
+    };
+}
+function usePopupInteractionProps(store, statePart) {
+    store.useSyncedValues(statePart);
+    useIsoLayoutEffect(()=>()=>{
+            store.update({
+                activeTriggerProps: EMPTY_OBJECT,
+                inactiveTriggerProps: EMPTY_OBJECT,
+                popupProps: EMPTY_OBJECT
+            });
+        }, [
+        store
+    ]);
+}
+function usePopupRootSync(store, open) {
+    useIsoLayoutEffect(()=>{
+        if (!open && null !== store.state.openMethod) store.set('openMethod', null);
+    }, [
+        open,
+        store
+    ]);
+    useIsoLayoutEffect(()=>()=>{
+            if (null !== store.state.openMethod) store.set('openMethod', null);
+        }, [
+        store
+    ]);
+}
+function useOnFirstRender(fn) {
+    const ref = __rspack_external_react.useRef(true);
+    if (ref.current) {
+        ref.current = false;
+        fn();
+    }
+}
+export { FOCUSABLE_POPUP_PROPS, setOpenTriggerState, useImplicitActiveTrigger, useOnFirstRender, useOpenStateTransitions, usePopupInteractionProps, usePopupRootSync, usePopupStore, useSyncedFloatingRootContext, useTriggerDataForwarding, useTriggerRegistration };

package/dist/8171.js

@@ -0,0 +1,346 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useAnimationsFinished } from "./880.js";
+import { useAnimationFrame } from "./8996.js";
+import { NOOP, EMPTY_OBJECT } from "./8272.js";
+import { useStableCallback } from "./7541.js";
+import { useIsoLayoutEffect } from "./6499.js";
+import { getCssDimensions } from "./7642.js";
+import { useDirection } from "./9863.js";
+import { usePreviousValue } from "./7021.js";
+import { ownerDocument } from "./9829.js";
+import { inertValue } from "./167.js";
+import * as __rspack_external_react from "react";
+import * as __rspack_external_react_dom_7136dc57 from "react-dom";
+const DEFAULT_ENABLED = ()=>true;
+function usePopupAutoResize(parameters) {
+    const { popupElement, positionerElement, content, mounted, enabled = DEFAULT_ENABLED, onMeasureLayout: onMeasureLayoutParam, onMeasureLayoutComplete: onMeasureLayoutCompleteParam, side, direction } = parameters;
+    const runOnceAnimationsFinish = useAnimationsFinished(popupElement, true, false);
+    const animationFrame = useAnimationFrame();
+    const committedDimensionsRef = __rspack_external_react.useRef(null);
+    const liveDimensionsRef = __rspack_external_react.useRef(null);
+    const isInitialRenderRef = __rspack_external_react.useRef(true);
+    const restoreAnchoringStylesRef = __rspack_external_react.useRef(NOOP);
+    const onMeasureLayout = useStableCallback(onMeasureLayoutParam);
+    const onMeasureLayoutComplete = useStableCallback(onMeasureLayoutCompleteParam);
+    const anchoringStyles = __rspack_external_react.useMemo(()=>{
+        let isOriginSide = 'top' === side;
+        let isPhysicalLeft = 'left' === side;
+        if ('rtl' === direction) {
+            isOriginSide = isOriginSide || 'inline-end' === side;
+            isPhysicalLeft = isPhysicalLeft || 'inline-end' === side;
+        } else {
+            isOriginSide = isOriginSide || 'inline-start' === side;
+            isPhysicalLeft = isPhysicalLeft || 'inline-start' === side;
+        }
+        return isOriginSide ? {
+            position: 'absolute',
+            ['top' === side ? 'bottom' : 'top']: '0',
+            [isPhysicalLeft ? 'right' : 'left']: '0'
+        } : EMPTY_OBJECT;
+    }, [
+        side,
+        direction
+    ]);
+    useIsoLayoutEffect(()=>{
+        if (!mounted || !enabled() || 'function' != typeof ResizeObserver) {
+            restoreAnchoringStylesRef.current = NOOP;
+            isInitialRenderRef.current = true;
+            committedDimensionsRef.current = null;
+            liveDimensionsRef.current = null;
+            return;
+        }
+        if (!popupElement || !positionerElement) return;
+        restoreAnchoringStylesRef.current = applyElementStyles(popupElement, anchoringStyles);
+        const observer = new ResizeObserver((entries)=>{
+            const entry = entries[0];
+            if (entry) liveDimensionsRef.current = {
+                width: Math.ceil(entry.borderBoxSize[0].inlineSize),
+                height: Math.ceil(entry.borderBoxSize[0].blockSize)
+            };
+        });
+        observer.observe(popupElement);
+        setPopupCssSize(popupElement, 'auto');
+        const restorePopupPosition = overrideElementStyle(popupElement, 'position', 'static');
+        const restorePopupTransform = overrideElementStyle(popupElement, 'transform', 'none');
+        const restorePopupScale = overrideElementStyle(popupElement, 'scale', '1');
+        const restorePositionerAvailableSize = applyElementStyles(positionerElement, {
+            '--available-width': 'max-content',
+            '--available-height': 'max-content'
+        });
+        function restoreMeasurementOverrides() {
+            restorePopupPosition();
+            restorePopupTransform();
+            restorePositionerAvailableSize();
+        }
+        function restoreMeasurementOverridesIncludingScale() {
+            restoreMeasurementOverrides();
+            restorePopupScale();
+        }
+        onMeasureLayout?.();
+        if (isInitialRenderRef.current || null === committedDimensionsRef.current) {
+            setPositionerCssSize(positionerElement, 'max-content');
+            const dimensions = getCssDimensions(popupElement);
+            committedDimensionsRef.current = dimensions;
+            setPositionerCssSize(positionerElement, dimensions);
+            restoreMeasurementOverridesIncludingScale();
+            onMeasureLayoutComplete?.(null, dimensions);
+            isInitialRenderRef.current = false;
+            return ()=>{
+                observer.disconnect();
+                restoreAnchoringStylesRef.current();
+                restoreAnchoringStylesRef.current = NOOP;
+            };
+        }
+        setPopupCssSize(popupElement, 'auto');
+        setPositionerCssSize(positionerElement, 'max-content');
+        const previousDimensions = committedDimensionsRef.current ?? liveDimensionsRef.current;
+        const newDimensions = getCssDimensions(popupElement);
+        committedDimensionsRef.current = newDimensions;
+        if (!previousDimensions) {
+            setPositionerCssSize(positionerElement, newDimensions);
+            restoreMeasurementOverridesIncludingScale();
+            onMeasureLayoutComplete?.(null, newDimensions);
+            return ()=>{
+                observer.disconnect();
+                animationFrame.cancel();
+                restoreAnchoringStylesRef.current();
+                restoreAnchoringStylesRef.current = NOOP;
+            };
+        }
+        setPopupCssSize(popupElement, previousDimensions);
+        restoreMeasurementOverridesIncludingScale();
+        onMeasureLayoutComplete?.(previousDimensions, newDimensions);
+        setPositionerCssSize(positionerElement, newDimensions);
+        const abortController = new AbortController();
+        animationFrame.request(()=>{
+            setPopupCssSize(popupElement, newDimensions);
+            runOnceAnimationsFinish(()=>{
+                popupElement.style.setProperty('--popup-width', 'auto');
+                popupElement.style.setProperty('--popup-height', 'auto');
+            }, abortController.signal);
+        });
+        return ()=>{
+            observer.disconnect();
+            abortController.abort();
+            animationFrame.cancel();
+            restoreAnchoringStylesRef.current();
+            restoreAnchoringStylesRef.current = NOOP;
+        };
+    }, [
+        content,
+        popupElement,
+        positionerElement,
+        runOnceAnimationsFinish,
+        animationFrame,
+        enabled,
+        mounted,
+        onMeasureLayout,
+        onMeasureLayoutComplete,
+        anchoringStyles
+    ]);
+}
+function overrideElementStyle(element, property, value) {
+    const originalValue = element.style.getPropertyValue(property);
+    element.style.setProperty(property, value);
+    return ()=>{
+        element.style.setProperty(property, originalValue);
+    };
+}
+function applyElementStyles(element, styles) {
+    const restorers = [];
+    for (const [key, value] of Object.entries(styles))restorers.push(overrideElementStyle(element, key, value));
+    return restorers.length ? ()=>{
+        restorers.forEach((restore)=>restore());
+    } : NOOP;
+}
+function setPopupCssSize(popupElement, size) {
+    const width = 'auto' === size ? 'auto' : `${size.width}px`;
+    const height = 'auto' === size ? 'auto' : `${size.height}px`;
+    popupElement.style.setProperty('--popup-width', width);
+    popupElement.style.setProperty('--popup-height', height);
+}
+function setPositionerCssSize(positionerElement, size) {
+    const width = 'max-content' === size ? 'max-content' : `${size.width}px`;
+    const height = 'max-content' === size ? 'max-content' : `${size.height}px`;
+    positionerElement.style.setProperty('--positioner-width', width);
+    positionerElement.style.setProperty('--positioner-height', height);
+}
+function usePopupViewport(parameters) {
+    const { store, side, cssVars, children } = parameters;
+    const direction = useDirection();
+    const activeTrigger = store.useState('activeTriggerElement');
+    const activeTriggerId = store.useState('activeTriggerId');
+    const open = store.useState('open');
+    const payload = store.useState('payload');
+    const mounted = store.useState('mounted');
+    const popupElement = store.useState('popupElement');
+    const positionerElement = store.useState('positionerElement');
+    const previousActiveTrigger = usePreviousValue(open ? activeTrigger : null);
+    const currentContentKey = usePopupContentKey(activeTriggerId, payload);
+    const capturedNodeRef = __rspack_external_react.useRef(null);
+    const [previousContentNode, setPreviousContentNode] = __rspack_external_react.useState(null);
+    const [newTriggerOffset, setNewTriggerOffset] = __rspack_external_react.useState(null);
+    const currentContainerRef = __rspack_external_react.useRef(null);
+    const previousContainerRef = __rspack_external_react.useRef(null);
+    const onAnimationsFinished = useAnimationsFinished(currentContainerRef, true, false);
+    const cleanupFrame = useAnimationFrame();
+    const [previousContentDimensions, setPreviousContentDimensions] = __rspack_external_react.useState(null);
+    const [showStartingStyleAttribute, setShowStartingStyleAttribute] = __rspack_external_react.useState(false);
+    useIsoLayoutEffect(()=>{
+        store.set('hasViewport', true);
+        return ()=>{
+            store.set('hasViewport', false);
+        };
+    }, [
+        store
+    ]);
+    const handleMeasureLayout = useStableCallback(()=>{
+        currentContainerRef.current?.style.setProperty('animation', 'none');
+        currentContainerRef.current?.style.setProperty('transition', 'none');
+        previousContainerRef.current?.style.setProperty('display', 'none');
+    });
+    const handleMeasureLayoutComplete = useStableCallback((previousDimensions)=>{
+        currentContainerRef.current?.style.removeProperty('animation');
+        currentContainerRef.current?.style.removeProperty('transition');
+        previousContainerRef.current?.style.removeProperty('display');
+        if (previousDimensions) setPreviousContentDimensions(previousDimensions);
+    });
+    const lastHandledTriggerRef = __rspack_external_react.useRef(null);
+    useIsoLayoutEffect(()=>{
+        if (activeTrigger && previousActiveTrigger && activeTrigger !== previousActiveTrigger && lastHandledTriggerRef.current !== activeTrigger && capturedNodeRef.current) {
+            setPreviousContentNode(capturedNodeRef.current);
+            setShowStartingStyleAttribute(true);
+            const offset = calculateRelativePosition(previousActiveTrigger, activeTrigger);
+            setNewTriggerOffset(offset);
+            cleanupFrame.request(()=>{
+                __rspack_external_react_dom_7136dc57.flushSync(()=>{
+                    setShowStartingStyleAttribute(false);
+                });
+                onAnimationsFinished(()=>{
+                    setPreviousContentNode(null);
+                    setPreviousContentDimensions(null);
+                    capturedNodeRef.current = null;
+                });
+            });
+            lastHandledTriggerRef.current = activeTrigger;
+        }
+    }, [
+        activeTrigger,
+        previousActiveTrigger,
+        previousContentNode,
+        onAnimationsFinished,
+        cleanupFrame
+    ]);
+    useIsoLayoutEffect(()=>{
+        const source = currentContainerRef.current;
+        if (!source) return;
+        const wrapper = ownerDocument(source).createElement('div');
+        for (const child of Array.from(source.childNodes))wrapper.appendChild(child.cloneNode(true));
+        capturedNodeRef.current = wrapper;
+    });
+    const isTransitioning = null != previousContentNode;
+    let childrenToRender;
+    childrenToRender = isTransitioning ? /*#__PURE__*/ jsxs(__rspack_external_react.Fragment, {
+        children: [
+            /*#__PURE__*/ jsx("div", {
+                "data-previous": true,
+                inert: inertValue(true),
+                ref: previousContainerRef,
+                style: {
+                    ...previousContentDimensions ? {
+                        [cssVars.popupWidth]: `${previousContentDimensions.width}px`,
+                        [cssVars.popupHeight]: `${previousContentDimensions.height}px`
+                    } : null,
+                    position: 'absolute'
+                },
+                "data-ending-style": showStartingStyleAttribute ? void 0 : ''
+            }, "previous"),
+            /*#__PURE__*/ jsx("div", {
+                "data-current": true,
+                ref: currentContainerRef,
+                "data-starting-style": showStartingStyleAttribute ? '' : void 0,
+                children: children
+            }, currentContentKey)
+        ]
+    }) : /*#__PURE__*/ jsx("div", {
+        "data-current": true,
+        ref: currentContainerRef,
+        children: children
+    }, currentContentKey);
+    useIsoLayoutEffect(()=>{
+        const container = previousContainerRef.current;
+        if (!container || !previousContentNode) return;
+        container.replaceChildren(...Array.from(previousContentNode.childNodes));
+    }, [
+        previousContentNode
+    ]);
+    usePopupAutoResize({
+        popupElement,
+        positionerElement,
+        mounted,
+        content: payload,
+        onMeasureLayout: handleMeasureLayout,
+        onMeasureLayoutComplete: handleMeasureLayoutComplete,
+        side,
+        direction
+    });
+    const state = {
+        activationDirection: getActivationDirection(newTriggerOffset),
+        transitioning: isTransitioning
+    };
+    return {
+        children: childrenToRender,
+        state
+    };
+}
+function getActivationDirection(offset) {
+    if (!offset) return;
+    return `${getValueWithTolerance(offset.horizontal, 5, 'right', 'left')} ${getValueWithTolerance(offset.vertical, 5, 'down', 'up')}`;
+}
+function getValueWithTolerance(value, tolerance, positiveLabel, negativeLabel) {
+    if (value > tolerance) return positiveLabel;
+    if (value < -tolerance) return negativeLabel;
+    return '';
+}
+function calculateRelativePosition(from, to) {
+    const fromRect = from.getBoundingClientRect();
+    const toRect = to.getBoundingClientRect();
+    const fromCenter = {
+        x: fromRect.left + fromRect.width / 2,
+        y: fromRect.top + fromRect.height / 2
+    };
+    const toCenter = {
+        x: toRect.left + toRect.width / 2,
+        y: toRect.top + toRect.height / 2
+    };
+    return {
+        horizontal: toCenter.x - fromCenter.x,
+        vertical: toCenter.y - fromCenter.y
+    };
+}
+function usePopupContentKey(activeTriggerId, payload) {
+    const [contentKey, setContentKey] = __rspack_external_react.useState(0);
+    const previousActiveTriggerIdRef = __rspack_external_react.useRef(activeTriggerId);
+    const previousPayloadRef = __rspack_external_react.useRef(payload);
+    const pendingPayloadUpdateRef = __rspack_external_react.useRef(false);
+    useIsoLayoutEffect(()=>{
+        const previousActiveTriggerId = previousActiveTriggerIdRef.current;
+        const previousPayload = previousPayloadRef.current;
+        const triggerIdChanged = activeTriggerId !== previousActiveTriggerId;
+        const payloadChanged = payload !== previousPayload;
+        if (triggerIdChanged) {
+            setContentKey((value)=>value + 1);
+            pendingPayloadUpdateRef.current = !payloadChanged;
+        } else if (pendingPayloadUpdateRef.current && payloadChanged) {
+            setContentKey((value)=>value + 1);
+            pendingPayloadUpdateRef.current = false;
+        }
+        previousActiveTriggerIdRef.current = activeTriggerId;
+        previousPayloadRef.current = payload;
+    }, [
+        activeTriggerId,
+        payload
+    ]);
+    return `${activeTriggerId ?? 'current'}-${contentKey}`;
+}
+export { usePopupViewport };

package/dist/8225.js

@@ -0,0 +1,21 @@
+const visuallyHiddenBase = {
+    clipPath: 'inset(50%)',
+    overflow: 'hidden',
+    whiteSpace: 'nowrap',
+    border: 0,
+    padding: 0,
+    width: 1,
+    height: 1,
+    margin: -1
+};
+const visuallyHidden = {
+    ...visuallyHiddenBase,
+    position: 'fixed',
+    top: 0,
+    left: 0
+};
+const visuallyHiddenInput = {
+    ...visuallyHiddenBase,
+    position: 'absolute'
+};
+export { visuallyHidden, visuallyHiddenInput };