@cdx-ui/components 0.1.2 → 0.1.4

package/lib/module/components/Drawer/index.js

@@ -0,0 +1,724 @@
+"use strict";
+
+import { Children, forwardRef, isValidElement, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { BackHandler, Platform, ScrollView, StyleSheet, useWindowDimensions, View } from 'react-native';
+import Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
+import { FocusScope } from '@react-native-aria/focus';
+import { Close as CloseIcon } from '@cdx-ui/icons';
+import { DrawerClose as DrawerClosePrimitive, DrawerOverlay as DrawerOverlayPrimitive, DrawerPortal as DrawerPortalPrimitive, DrawerRoot as DrawerRootPrimitive, FullWindowOverlay, MODAL_OVERLAY_Z_INDEX, Slot, dataAttributes, mergeDataAttributes, useDrawer, useEscapeKey, useOverlayStackRegistration } from '@cdx-ui/primitives';
+import { cn, mergeRefs, ParentContext, useParentContext, useStyleContext } from '@cdx-ui/utils';
+import { usePopupOverlayAnimation, usePopupRootAnimation } from '../../animation';
+import { AnimationSettingsProvider, useAnimationSettings } from '../../providers/animation-settings';
+import { Heading } from '../Heading';
+import { Icon } from '../Icon';
+import { Text } from '../Text';
+import { DrawerAnimationProvider, useDrawerAnimation } from './animation';
+import { drawerCloseIconVariants, drawerCloseVariants, drawerContentInnerVariants, drawerContentVariants, drawerDescriptionVariants, drawerFooterVariants, drawerHeaderContentVariants, drawerHeaderVariants, drawerLeadingSlotVariants, drawerOverlayVariants, drawerPanelVariants, drawerPortalVariants, drawerTitleVariants } from './styles';
+import { DRAWER_EDGE_PADDING, DRAWER_ENTER_EASING, DRAWER_ENTER_MS, DRAWER_EXIT_EASING, DRAWER_EXIT_MS, DRAWER_WIDE_BREAKPOINT, WEB_TRANSITION_SAFETY_MS, getDrawerSlideKeyframes, isHorizontalDrawerPlacement, resolveDrawerPlacement, useClampedDrawerExtent, useSafeInsets } from './utils';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+export { useDrawer } from '@cdx-ui/primitives';
+const IS_WEB = Platform.OS === 'web';
+// =============================================================================
+// STYLE CONTEXT
+// =============================================================================
+
+const SCOPE = 'DRAWER';
+const useDrawerStyleContext = () => useStyleContext(SCOPE);
+
+// =============================================================================
+// ANIMATED PRIMITIVES
+// =============================================================================
+
+const AnimatedOverlay = Animated.createAnimatedComponent(DrawerOverlayPrimitive);
+
+// =============================================================================
+// STYLED ROOT
+// =============================================================================
+
+const DrawerRoot = /*#__PURE__*/forwardRef(({
+  variant = 'permanent',
+  size = 'default',
+  placement: placementProp,
+  fullBleed = false,
+  animation,
+  className,
+  children,
+  style,
+  isOpen,
+  defaultOpen,
+  onOpenChange,
+  closeOnBackdropPress = true,
+  closeOnEscKey = true,
+  zIndex = MODAL_OVERLAY_Z_INDEX,
+  ...props
+}, ref) => {
+  const placement = resolveDrawerPlacement(placementProp);
+  const parent = useParentContext();
+  const ctx = useMemo(() => ({
+    ...parent,
+    [SCOPE]: {
+      variant,
+      size,
+      placement,
+      fullBleed
+    }
+  }), [parent, variant, size, placement, fullBleed]);
+  const {
+    progress,
+    isAllAnimationsDisabled
+  } = usePopupRootAnimation({
+    animation
+  });
+  const panelExtent = useClampedDrawerExtent(size, placement);
+  const animationContextValue = useMemo(() => ({
+    progress
+  }), [progress]);
+  const animationSettingsContextValue = useMemo(() => ({
+    isAllAnimationsDisabled
+  }), [isAllAnimationsDisabled]);
+  if (variant === 'permanent') {
+    return /*#__PURE__*/_jsx(AnimationSettingsProvider, {
+      value: animationSettingsContextValue,
+      children: /*#__PURE__*/_jsx(ParentContext.Provider, {
+        value: ctx,
+        children: /*#__PURE__*/_jsx(DrawerRootPrimitive, {
+          ref: ref,
+          isOpen: isOpen,
+          defaultOpen: defaultOpen ?? true,
+          onOpenChange: onOpenChange,
+          closeOnBackdropPress: false,
+          closeOnEscKey: false,
+          className: cn('self-stretch overflow-hidden', className),
+          style: style,
+          ...props,
+          ...mergeDataAttributes(props, dataAttributes({
+            slot: 'drawer',
+            placement
+          })),
+          children: /*#__PURE__*/_jsx(DrawerPermanentPanel, {
+            size: size,
+            placement: placement,
+            panelExtent: panelExtent,
+            children: children
+          })
+        })
+      })
+    });
+  }
+  return /*#__PURE__*/_jsx(AnimationSettingsProvider, {
+    value: animationSettingsContextValue,
+    children: /*#__PURE__*/_jsx(DrawerAnimationProvider, {
+      value: animationContextValue,
+      children: /*#__PURE__*/_jsx(ParentContext.Provider, {
+        value: ctx,
+        children: /*#__PURE__*/_jsx(DrawerRootPrimitive, {
+          ref: ref,
+          isOpen: isOpen,
+          defaultOpen: defaultOpen,
+          onOpenChange: onOpenChange,
+          closeOnBackdropPress: closeOnBackdropPress,
+          closeOnEscKey: closeOnEscKey,
+          className: className,
+          style: style,
+          ...props,
+          ...mergeDataAttributes(props, dataAttributes({
+            slot: 'drawer',
+            placement
+          })),
+          children: /*#__PURE__*/_jsx(DrawerPopup, {
+            zIndex: zIndex,
+            children: children
+          })
+        })
+      })
+    })
+  });
+});
+DrawerRoot.displayName = 'Drawer';
+const DrawerPermanentPanel = ({
+  size,
+  placement,
+  panelExtent,
+  children
+}) => {
+  const {
+    open
+  } = useDrawer();
+  const {
+    isAllAnimationsDisabled
+  } = useAnimationSettings();
+  const isHorizontal = isHorizontalDrawerPlacement(placement);
+  const extent = useSharedValue(open ? panelExtent : 0);
+  const hasMounted = useRef(false);
+  useEffect(() => {
+    const target = open ? panelExtent : 0;
+    if (!hasMounted.current) {
+      hasMounted.current = true;
+      extent.set(target);
+      return;
+    }
+    if (isAllAnimationsDisabled) {
+      extent.set(target);
+      return;
+    }
+    extent.set(withTiming(target, {
+      duration: open ? DRAWER_ENTER_MS : DRAWER_EXIT_MS,
+      easing: open ? DRAWER_ENTER_EASING : DRAWER_EXIT_EASING
+    }));
+  }, [extent, isAllAnimationsDisabled, open, panelExtent]);
+  const animatedStyle = useAnimatedStyle(() => {
+    const value = extent.get();
+    return isHorizontal ? {
+      width: value
+    } : {
+      height: value
+    };
+  }, [isHorizontal]);
+  return /*#__PURE__*/_jsx(Animated.View, {
+    className: drawerPanelVariants({
+      size,
+      variant: 'permanent',
+      placement
+    }),
+    pointerEvents: open ? 'auto' : 'none',
+    style: animatedStyle,
+    children: /*#__PURE__*/_jsx(View, {
+      className: "h-full",
+      style: isHorizontal ? {
+        width: panelExtent
+      } : {
+        height: panelExtent
+      },
+      children: open ? children : null
+    })
+  });
+};
+
+// =============================================================================
+// INTERNAL POPUP (portal + overlay + panel — not a Figma slot)
+// =============================================================================
+
+const DrawerPopup = /*#__PURE__*/forwardRef(({
+  className,
+  children,
+  disableFullWindowOverlay = false,
+  zIndex = MODAL_OVERLAY_Z_INDEX
+}, ref) => {
+  const {
+    size,
+    placement: placementProp
+  } = useDrawerStyleContext();
+  const placement = resolveDrawerPlacement(placementProp);
+  const {
+    open,
+    onOpenChange,
+    closeOnEscKey,
+    nativeID
+  } = useDrawer();
+  const {
+    width: windowWidth,
+    height: windowHeight
+  } = useWindowDimensions();
+  const panelExtent = useClampedDrawerExtent(size, placement);
+  const parentContext = useParentContext();
+  const animationContext = useDrawerAnimation();
+  const parentAnimationSettings = useAnimationSettings();
+  const {
+    isAllAnimationsDisabled
+  } = parentAnimationSettings;
+  const panelMotion = useMemo(() => getDrawerSlideKeyframes(placement, panelExtent), [panelExtent, placement]);
+  const fallbackIsDragging = useSharedValue(false);
+  const fallbackIsGestureReleaseAnimationRunning = useSharedValue(false);
+  const progress = animationContext.progress;
+  useEffect(() => {
+    if (open) {
+      progress.set(1);
+    }
+  }, [open, progress]);
+  const {
+    rContainerStyle,
+    entering: overlayEntering,
+    exiting: overlayExiting
+  } = usePopupOverlayAnimation({
+    progress,
+    isDragging: fallbackIsDragging,
+    isGestureReleaseAnimationRunning: fallbackIsGestureReleaseAnimationRunning
+  });
+  const panelRef = useRef(null);
+  const prevOpenRef = useRef(open);
+  const [isExiting, setIsExiting] = useState(false);
+  const [webState, setWebState] = useState(open ? 'entering' : 'closed');
+  const handleClose = useCallback(() => {
+    onOpenChange(false);
+  }, [onOpenChange]);
+  useEscapeKey(open && closeOnEscKey, handleClose, {
+    id: nativeID,
+    groupId: nativeID,
+    layer: 'modal'
+  });
+  const {
+    isTopmost
+  } = useOverlayStackRegistration({
+    active: open && Platform.OS !== 'web',
+    capabilities: ['back'],
+    id: nativeID,
+    groupId: nativeID,
+    layer: 'modal'
+  });
+  useEffect(() => {
+    if (!open || Platform.OS === 'web') return;
+    const backHandler = BackHandler.addEventListener('hardwareBackPress', () => {
+      if (!isTopmost('back')) return false;
+      handleClose();
+      return true;
+    });
+    return () => {
+      backHandler.remove();
+    };
+  }, [handleClose, isTopmost, open]);
+  if (IS_WEB && prevOpenRef.current && !open && !isExiting) {
+    setIsExiting(true);
+    setWebState('closed');
+  }
+  if (IS_WEB && !prevOpenRef.current && open) {
+    setIsExiting(false);
+    setWebState('entering');
+  }
+  prevOpenRef.current = open;
+  useEffect(() => {
+    if (!IS_WEB || !open) return;
+    const raf = requestAnimationFrame(() => {
+      setWebState('open');
+    });
+    return () => cancelAnimationFrame(raf);
+  }, [open]);
+  useEffect(() => {
+    if (!IS_WEB || !isExiting) return;
+    const node = panelRef.current;
+    let done = false;
+    const finish = () => {
+      if (done) return;
+      done = true;
+      setIsExiting(false);
+    };
+    const safetyTimer = setTimeout(finish, WEB_TRANSITION_SAFETY_MS);
+    if (!node || typeof node.addEventListener !== 'function') {
+      return () => {
+        clearTimeout(safetyTimer);
+      };
+    }
+    const handler = event => {
+      if (event.target !== node) return;
+      const propertyName = event.propertyName ?? '';
+      if (propertyName === 'opacity' || propertyName === 'transform') {
+        finish();
+      }
+    };
+    node.addEventListener('transitionend', handler);
+    return () => {
+      clearTimeout(safetyTimer);
+      node.removeEventListener('transitionend', handler);
+    };
+  }, [isExiting]);
+  const dataState = webState;
+  const shouldMount = IS_WEB ? open || isExiting : open;
+  if (!shouldMount) {
+    return null;
+  }
+  const portalClassName = cn(drawerPortalVariants());
+  const overlayClassName = cn(drawerOverlayVariants());
+  const panelClassName = cn(drawerPanelVariants({
+    size,
+    variant: 'modal',
+    placement
+  }), className);
+  const panelSizeStyle = isHorizontalDrawerPlacement(placement) ? {
+    width: panelExtent,
+    height: windowHeight
+  } : {
+    width: windowWidth,
+    height: panelExtent
+  };
+  const nativePanelEntering = IS_WEB || isAllAnimationsDisabled ? undefined : panelMotion.entering;
+  const nativePanelExiting = IS_WEB || isAllAnimationsDisabled ? undefined : panelMotion.exiting;
+  return /*#__PURE__*/_jsx(DrawerPortalPrimitive, {
+    forceMount: true,
+    children: /*#__PURE__*/_jsx(ParentContext.Provider, {
+      value: parentContext,
+      children: /*#__PURE__*/_jsx(AnimationSettingsProvider, {
+        value: parentAnimationSettings,
+        children: /*#__PURE__*/_jsx(DrawerAnimationProvider, {
+          value: animationContext,
+          children: /*#__PURE__*/_jsx(FullWindowOverlay, {
+            disableFullWindowOverlay: disableFullWindowOverlay,
+            unstable_accessibilityContainerViewIsModal: true,
+            children: /*#__PURE__*/_jsxs(View, {
+              className: portalClassName,
+              style: {
+                zIndex
+              },
+              pointerEvents: "box-none",
+              ...(IS_WEB ? dataAttributes({
+                state: dataState
+              }) : undefined),
+              children: [/*#__PURE__*/_jsx(Animated.View, {
+                entering: overlayEntering,
+                exiting: overlayExiting,
+                style: StyleSheet.absoluteFill,
+                children: /*#__PURE__*/_jsx(AnimatedOverlay, {
+                  forceMount: true,
+                  testID: "drawer-overlay",
+                  className: overlayClassName,
+                  style: IS_WEB ? undefined : rContainerStyle,
+                  ...mergeDataAttributes({}, dataAttributes({
+                    slot: 'drawer-overlay'
+                  }), IS_WEB ? dataAttributes({
+                    state: dataState
+                  }) : undefined)
+                })
+              }), /*#__PURE__*/_jsx(Animated.View, {
+                entering: nativePanelEntering,
+                exiting: nativePanelExiting,
+                pointerEvents: "box-none",
+                style: [internalStyles[placement], panelSizeStyle],
+                children: /*#__PURE__*/_jsx(FocusScope, {
+                  contain: open,
+                  restoreFocus: true,
+                  autoFocus: open,
+                  children: /*#__PURE__*/_jsx(View, {
+                    ref: mergeRefs(ref, panelRef),
+                    nativeID: nativeID,
+                    role: "dialog",
+                    "aria-modal": true,
+                    "aria-labelledby": `${nativeID}-title`,
+                    "aria-describedby": `${nativeID}-description`,
+                    className: panelClassName,
+                    style: panelSizeStyle,
+                    ...mergeDataAttributes({}, dataAttributes({
+                      slot: 'drawer',
+                      placement
+                    }), IS_WEB ? dataAttributes({
+                      state: dataState
+                    }) : undefined),
+                    children: children
+                  })
+                })
+              })]
+            })
+          })
+        })
+      })
+    })
+  });
+});
+DrawerPopup.displayName = 'DrawerPopup';
+const DrawerClose = /*#__PURE__*/forwardRef(({
+  className,
+  accessibilityLabel = 'Close',
+  children,
+  style,
+  ...props
+}, ref) => /*#__PURE__*/_jsx(DrawerClosePrimitive, {
+  ref: ref,
+  className: cn(drawerCloseVariants(), className),
+  style: style,
+  hitSlop: 12,
+  accessibilityRole: "button",
+  accessibilityLabel: accessibilityLabel,
+  ...props,
+  ...mergeDataAttributes(props, dataAttributes({
+    slot: 'drawer-close'
+  })),
+  children: children ?? /*#__PURE__*/_jsx(Icon, {
+    as: CloseIcon,
+    className: drawerCloseIconVariants()
+  })
+}));
+DrawerClose.displayName = 'Drawer.Close';
+
+// =============================================================================
+// STYLED LEADING SLOT
+// =============================================================================
+
+const DrawerLeadingSlot = /*#__PURE__*/forwardRef(({
+  asChild,
+  className,
+  style,
+  'aria-hidden': ariaHidden,
+  ...props
+}, ref) => {
+  const Comp = asChild ? Slot : View;
+  return /*#__PURE__*/_jsx(Comp, {
+    ref: ref,
+    accessibilityElementsHidden: ariaHidden !== false,
+    "aria-hidden": ariaHidden ?? true,
+    className: cn(drawerLeadingSlotVariants(), className),
+    style: style,
+    ...props,
+    ...mergeDataAttributes(props, dataAttributes({
+      slot: 'drawer-leading'
+    }))
+  });
+});
+DrawerLeadingSlot.displayName = 'Drawer.LeadingSlot';
+
+// =============================================================================
+// STYLED HEADER
+// =============================================================================
+
+/**
+ * Props for `Drawer.Header`.
+ *
+ * The header lays out its direct children as a fixed row regardless of JSX
+ * order: the first `Drawer.LeadingSlot` at the start, every other child
+ * (`Drawer.Title`, `Drawer.Description`, custom content) in a text column, and
+ * the close control at the end. Additional `Drawer.LeadingSlot` or
+ * `Drawer.Close` children are ignored.
+ *
+ * `Drawer.LeadingSlot` and `Drawer.Close` must be direct children. They are
+ * matched by component identity, so wrapping them in `memo()`, an HOC, or a
+ * custom component hides them from the header and they render in the text
+ * column instead.
+ */
+
+const renderDrawerHeaderRow = (children, close) => {
+  const childArray = Children.toArray(children);
+  const leadingChild = childArray.find(child => /*#__PURE__*/isValidElement(child) && child.type === DrawerLeadingSlot);
+  const closeChild = childArray.find(child => /*#__PURE__*/isValidElement(child) && child.type === DrawerClose);
+  const textChildren = childArray.filter(child => ! /*#__PURE__*/isValidElement(child) || child.type !== DrawerLeadingSlot && child.type !== DrawerClose);
+  const closeElement = close === undefined ? closeChild ?? /*#__PURE__*/_jsx(DrawerClose, {}) : close;
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [leadingChild, textChildren.length > 0 ? /*#__PURE__*/_jsx(View, {
+      className: drawerHeaderContentVariants(),
+      children: textChildren
+    }) : null, closeElement]
+  });
+};
+const DrawerHeader = /*#__PURE__*/forwardRef(({
+  asChild,
+  close,
+  showSeparator = true,
+  className,
+  children,
+  style,
+  ...props
+}, ref) => {
+  const insets = useSafeInsets();
+  const {
+    placement: placementProp,
+    variant
+  } = useDrawerStyleContext();
+  const placement = resolveDrawerPlacement(placementProp);
+  const paddingTop = variant === 'modal' && placement !== 'bottom' ? Math.max(insets.top, DRAWER_EDGE_PADDING) : DRAWER_EDGE_PADDING;
+  const computedClassName = cn(drawerHeaderVariants({
+    showSeparator
+  }), className);
+  const Comp = asChild ? Slot : View;
+  return /*#__PURE__*/_jsx(Comp, {
+    ref: ref,
+    className: computedClassName,
+    style: [{
+      paddingTop
+    }, style],
+    ...props,
+    ...mergeDataAttributes(props, dataAttributes({
+      slot: 'drawer-header'
+    })),
+    children: asChild ? children : renderDrawerHeaderRow(children, close)
+  });
+});
+DrawerHeader.displayName = 'Drawer.Header';
+
+// =============================================================================
+// STYLED TITLE
+// =============================================================================
+
+const DrawerTitle = /*#__PURE__*/forwardRef(({
+  asChild,
+  className,
+  children,
+  style,
+  ...props
+}, ref) => {
+  const {
+    nativeID
+  } = useDrawer();
+  const computedClassName = cn(drawerTitleVariants(), className);
+  if (asChild) {
+    return /*#__PURE__*/_jsx(Slot, {
+      ref: ref,
+      nativeID: `${nativeID}-title`,
+      className: computedClassName,
+      style: style,
+      ...props,
+      ...mergeDataAttributes(props, dataAttributes({
+        slot: 'drawer-title'
+      })),
+      children: children
+    });
+  }
+  return /*#__PURE__*/_jsx(Heading, {
+    ref: ref,
+    size: "sm",
+    nativeID: `${nativeID}-title`,
+    className: computedClassName,
+    style: style,
+    ...props,
+    ...mergeDataAttributes(props, dataAttributes({
+      slot: 'drawer-title'
+    })),
+    children: children
+  });
+});
+DrawerTitle.displayName = 'Drawer.Title';
+
+// =============================================================================
+// STYLED DESCRIPTION
+// =============================================================================
+
+const DrawerDescription = /*#__PURE__*/forwardRef(({
+  asChild,
+  className,
+  children,
+  style,
+  ...props
+}, ref) => {
+  const {
+    nativeID
+  } = useDrawer();
+  const computedClassName = cn(drawerDescriptionVariants(), className);
+  const Comp = asChild ? Slot : Text;
+  return /*#__PURE__*/_jsx(Comp, {
+    ref: ref,
+    nativeID: `${nativeID}-description`,
+    size: "sm",
+    className: computedClassName,
+    style: style,
+    ...props,
+    ...mergeDataAttributes(props, dataAttributes({
+      slot: 'drawer-description'
+    })),
+    children: children
+  });
+});
+DrawerDescription.displayName = 'Drawer.Description';
+
+// =============================================================================
+// STYLED CONTENT (Figma Drawer.Content — scroll region)
+// =============================================================================
+
+const DrawerContent = /*#__PURE__*/forwardRef(({
+  className,
+  contentClassName,
+  children,
+  style,
+  contentContainerStyle,
+  fullBleed: fullBleedProp,
+  ...props
+}, ref) => {
+  const {
+    fullBleed: contextFullBleed
+  } = useDrawerStyleContext();
+  const fullBleed = fullBleedProp ?? contextFullBleed ?? false;
+  return /*#__PURE__*/_jsx(ScrollView, {
+    ref: ref,
+    className: cn(drawerContentVariants({
+      fullBleed
+    }), className),
+    style: style,
+    contentContainerClassName: cn(drawerContentInnerVariants(), contentClassName),
+    contentContainerStyle: contentContainerStyle,
+    ...props,
+    ...mergeDataAttributes(props, dataAttributes({
+      slot: 'drawer-content'
+    })),
+    children: children
+  });
+});
+DrawerContent.displayName = 'Drawer.Content';
+
+// =============================================================================
+// STYLED FOOTER
+// =============================================================================
+
+const DrawerFooter = /*#__PURE__*/forwardRef(({
+  asChild,
+  showSeparator = false,
+  direction: directionProp,
+  className,
+  children,
+  style,
+  ...props
+}, ref) => {
+  const {
+    width
+  } = useWindowDimensions();
+  const insets = useSafeInsets();
+  const {
+    placement: placementProp,
+    variant
+  } = useDrawerStyleContext();
+  const placement = resolveDrawerPlacement(placementProp);
+  const direction = directionProp ?? (width >= DRAWER_WIDE_BREAKPOINT ? 'row' : 'column');
+  const computedClassName = cn(drawerFooterVariants({
+    showSeparator,
+    direction
+  }), className);
+  const Comp = asChild ? Slot : View;
+  const paddingBottom = variant === 'modal' && placement !== 'top' ? Math.max(insets.bottom, DRAWER_EDGE_PADDING) : DRAWER_EDGE_PADDING;
+  return /*#__PURE__*/_jsx(Comp, {
+    ref: ref,
+    className: computedClassName,
+    style: [{
+      paddingBottom
+    }, style],
+    ...props,
+    ...mergeDataAttributes(props, dataAttributes({
+      slot: 'drawer-footer'
+    })),
+    children: children
+  });
+});
+DrawerFooter.displayName = 'Drawer.Footer';
+
+// =============================================================================
+// COMPOUND COMPONENT
+// =============================================================================
+
+export const Drawer = Object.assign(DrawerRoot, {
+  Header: DrawerHeader,
+  LeadingSlot: DrawerLeadingSlot,
+  Close: DrawerClose,
+  Title: DrawerTitle,
+  Description: DrawerDescription,
+  Content: DrawerContent,
+  Footer: DrawerFooter
+});
+const internalStyles = StyleSheet.create({
+  right: {
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    right: 0
+  },
+  left: {
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    left: 0
+  },
+  top: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0
+  },
+  bottom: {
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    right: 0
+  }
+});
+export { MODAL_OVERLAY_Z_INDEX };
+//# sourceMappingURL=index.js.map