@sproutsocial/seeds-react-modal 1.1.1 → 2.0.0

package/dist/esm/chunk-4ITF4DBY.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/v2/ModalV2.tsx","../../src/v2/ModalV2Styles.tsx","../../src/shared/constants.ts","../../src/v2/components/ModalHeader.tsx","../../src/v2/components/ModalCloseButton.tsx","../../src/v2/components/ModalFooter.tsx","../../src/v2/components/ModalContent.tsx","../../src/v2/components/ModalDescription.tsx","../../src/v2/components/ModalTrigger.tsx","../../src/v2/components/ModalClose.tsx","../../src/v2/components/ModalRail.tsx"],"sourcesContent":["import * as React from \"react\";\nimport * as Dialog from \"@radix-ui/react-dialog\";\nimport { StyledOverlay, StyledContent } from \"./ModalV2Styles\";\nimport {\n  ModalHeader,\n  ModalDescription,\n  ModalTrigger,\n  ModalRail,\n  ModalAction,\n} from \"./components\";\nimport {\n  DEFAULT_MODAL_WIDTH,\n  DEFAULT_MODAL_BG,\n  DEFAULT_MODAL_Z_INDEX,\n  MODAL_SIZE_PRESETS,\n  MODAL_PRIORITY_Z_INDEX,\n} from \"../shared/constants\";\nimport type { TypeModalV2Props } from \"./ModalV2Types\";\n\ninterface DraggableModalContentProps {\n  children: React.ReactNode;\n  computedWidth: any;\n  bg: any;\n  computedZIndex: number;\n  label?: string;\n  dataAttributes: Record<string, string>;\n  draggable?: boolean;\n  rest: any;\n  railProps?: Partial<TypeModalV2Props[\"railProps\"]>;\n}\n\n// Context to share drag state between modal content and header\ninterface DragContextValue {\n  position: { x: number; y: number };\n  isDragging: boolean;\n  onHeaderMouseDown: (e: React.MouseEvent) => void;\n  contentRef: React.RefObject<HTMLDivElement>;\n  draggable: boolean;\n}\n\nconst DragContext = React.createContext<DragContextValue | null>(null);\n\nexport const useDragContext = () => {\n  const context = React.useContext(DragContext);\n  return context;\n};\n\nconst DraggableModalContent: React.FC<DraggableModalContentProps> = ({\n  children,\n  computedWidth,\n  bg,\n  computedZIndex,\n  label,\n  dataAttributes,\n  draggable,\n  rest,\n  railProps,\n}) => {\n  const [position, setPosition] = React.useState({ x: 0, y: 0 });\n  const [isDragging, setIsDragging] = React.useState(false);\n  const contentRef = React.useRef<HTMLDivElement>(null);\n\n  // Calculate rail dimensions for boundary constraints\n  const railSize = railProps?.size ?? 44;\n  const railOffset = railProps?.offset ?? 12;\n  const railSide = railProps?.side ?? \"right\";\n\n  // Total extra space needed on the side with the rail\n  // (only when viewport is wider than 400px breakpoint)\n  const railExtraSpace = railSize + railOffset;\n\n  const handleHeaderMouseDown = React.useCallback(\n    (e: React.MouseEvent) => {\n      if (!draggable) return;\n\n      // Only allow dragging from header (not interactive elements)\n      const target = e.target as HTMLElement;\n      if (\n        target.tagName === \"BUTTON\" ||\n        target.tagName === \"INPUT\" ||\n        target.closest(\"button\")\n      ) {\n        return;\n      }\n\n      e.preventDefault();\n      setIsDragging(true);\n\n      const rect = contentRef.current?.getBoundingClientRect();\n      if (!rect) return;\n\n      // Calculate offset from mouse to current modal position\n      const offsetX = e.clientX - rect.left;\n      const offsetY = e.clientY - rect.top;\n\n      const handleMouseMove = (e: MouseEvent) => {\n        e.preventDefault();\n\n        // Calculate new position based on mouse position minus offset\n        const newX = e.clientX - offsetX;\n        const newY = e.clientY - offsetY;\n\n        // Determine if rail is on the side (viewport > 400px) or above (viewport <= 400px)\n        const isRailOnSide = window.innerWidth > 400;\n\n        // Constrain to viewport bounds (keeping modal AND rail fully visible)\n        const modalWidth = rect.width;\n        const modalHeight = rect.height;\n\n        // Adjust boundaries to account for rail position\n        let maxX = window.innerWidth - modalWidth;\n        let minX = 0;\n        let maxY = window.innerHeight - modalHeight;\n        let minY = 0;\n\n        if (isRailOnSide) {\n          // Rail is positioned on the side of the modal\n          if (railSide === \"right\") {\n            // Rail is on the right, so reduce maxX to prevent rail from going off-screen\n            maxX = window.innerWidth - modalWidth - railExtraSpace;\n          } else {\n            // Rail is on the left, so increase minX to prevent rail from going off-screen\n            minX = railExtraSpace;\n          }\n        } else {\n          // Rail is positioned above the modal (viewport <= 400px)\n          // Account for rail height + offset at the top\n          minY = railSize + railOffset;\n        }\n\n        const constrainedX = Math.max(minX, Math.min(maxX, newX));\n        const constrainedY = Math.max(minY, Math.min(maxY, newY));\n\n        // Convert to offset from center for our transform\n        const centerX = window.innerWidth / 2 - modalWidth / 2;\n        const centerY = window.innerHeight / 2 - modalHeight / 2;\n\n        setPosition({\n          x: constrainedX - centerX,\n          y: constrainedY - centerY,\n        });\n      };\n\n      const handleMouseUp = () => {\n        setIsDragging(false);\n        document.removeEventListener(\"mousemove\", handleMouseMove);\n        document.removeEventListener(\"mouseup\", handleMouseUp);\n      };\n\n      document.addEventListener(\"mousemove\", handleMouseMove);\n      document.addEventListener(\"mouseup\", handleMouseUp);\n    },\n    [draggable, railSide, railExtraSpace]\n  );\n\n  const dragContextValue = React.useMemo<DragContextValue>(\n    () => ({\n      position,\n      isDragging,\n      onHeaderMouseDown: handleHeaderMouseDown,\n      contentRef,\n      draggable: draggable ?? false,\n    }),\n    [position, isDragging, handleHeaderMouseDown, draggable]\n  );\n\n  // Prevent modal from closing on outside interaction when draggable\n  const handleInteractOutside = React.useCallback(\n    (e: Event) => {\n      if (draggable) {\n        e.preventDefault();\n      }\n    },\n    [draggable]\n  );\n\n  return (\n    <DragContext.Provider value={draggable ? dragContextValue : null}>\n      <StyledContent\n        ref={contentRef}\n        width={computedWidth}\n        bg={bg}\n        zIndex={computedZIndex}\n        aria-label={label}\n        draggable={draggable}\n        isDragging={isDragging}\n        railSize={railSize}\n        railOffset={railOffset}\n        railSide={railSide}\n        onInteractOutside={handleInteractOutside}\n        style={\n          draggable\n            ? {\n                transform: `translate(calc(-50% + ${position.x}px), calc(-50% + ${position.y}px))`,\n                transition: isDragging ? \"none\" : undefined,\n              }\n            : undefined\n        }\n        {...dataAttributes}\n        {...rest}\n      >\n        {children}\n      </StyledContent>\n    </DragContext.Provider>\n  );\n};\n\n/**\n * The modal you want - with Radix UI Dialog\n *\n * Features:\n * - Built with Radix UI Dialog for superior accessibility\n * - Same API as the original Modal component\n * - Automatic focus management and keyboard navigation\n * - Portal rendering for proper z-index layering\n * - Customizable styling through system props\n * - Optional draggable functionality using react-dnd\n */\nconst Modal = (props: TypeModalV2Props) => {\n  const {\n    children,\n    modalTrigger,\n    draggable = false,\n    open,\n    defaultOpen,\n    onOpenChange,\n    \"aria-label\": label,\n    title,\n    subtitle,\n    description,\n    size,\n    priority,\n    data = {},\n    bg = DEFAULT_MODAL_BG,\n    showOverlay = true,\n    actions,\n    railProps,\n    ...rest\n  } = props;\n\n  const handleOpenChange = React.useCallback(\n    (newOpen: boolean) => {\n      onOpenChange?.(newOpen);\n    },\n    [onOpenChange]\n  );\n\n  // Compute actual width\n  const computedWidth = React.useMemo(() => {\n    if (size) {\n      // Handle preset sizes\n      if (typeof size === \"string\" && size in MODAL_SIZE_PRESETS) {\n        return MODAL_SIZE_PRESETS[size as keyof typeof MODAL_SIZE_PRESETS];\n      }\n      // Handle custom size values\n      return size;\n    }\n    // Fall back to default width\n    return DEFAULT_MODAL_WIDTH;\n  }, [size]);\n\n  // Compute actual z-index\n  const computedZIndex = React.useMemo(() => {\n    if (priority) {\n      return MODAL_PRIORITY_Z_INDEX[priority];\n    }\n    return DEFAULT_MODAL_Z_INDEX;\n  }, [priority]);\n\n  // Create data attributes object\n  const dataAttributes = React.useMemo(() => {\n    const attrs: Record<string, string> = {};\n    Object.entries(data).forEach(([key, value]) => {\n      attrs[`data-${key}`] = String(value);\n    });\n    attrs[\"data-qa-modal\"] = \"\";\n    // Only add open attribute if in controlled mode\n    if (open !== undefined) {\n      attrs[\"data-qa-modal-open\"] = String(open);\n    }\n    return attrs;\n  }, [data, open]);\n\n  // Determine if we should auto-render the header from provided props\n  const shouldRenderHeader = Boolean(title || subtitle);\n\n  // Build Dialog.Root props conditionally\n  const dialogRootProps = React.useMemo(() => {\n    const props: any = {};\n\n    // If controlled (open prop provided), use it\n    if (open !== undefined) {\n      props.open = open;\n    }\n    // If uncontrolled with explicit defaultOpen, use it\n    else if (defaultOpen !== undefined) {\n      props.defaultOpen = defaultOpen;\n    }\n    // If completely uncontrolled (neither open nor defaultOpen provided), default to closed\n    else {\n      props.defaultOpen = false;\n    }\n\n    // Always add onOpenChange if provided\n    if (onOpenChange) {\n      props.onOpenChange = handleOpenChange;\n    }\n\n    // When draggable, prevent modal from closing on outside interaction\n    // This allows users to interact with background content\n    if (draggable) {\n      props.modal = false;\n    }\n\n    return props;\n  }, [open, defaultOpen, handleOpenChange, onOpenChange, draggable]);\n\n  // Handle trigger - use modalTrigger prop if provided, otherwise look for ModalTrigger children (backward compatibility)\n  const triggers: React.ReactNode[] = [];\n  const content: React.ReactNode[] = [];\n\n  if (modalTrigger) {\n    // New prop-based approach: wrap the provided element with Dialog.Trigger\n    triggers.push(\n      <Dialog.Trigger key=\"modal-trigger\" asChild>\n        {modalTrigger}\n      </Dialog.Trigger>\n    );\n    // All children are content\n    content.push(children);\n  } else {\n    // Legacy approach: separate ModalTrigger children from content children\n    React.Children.forEach(children, (child) => {\n      if (React.isValidElement(child) && child.type === ModalTrigger) {\n        triggers.push(child);\n      } else {\n        content.push(child);\n      }\n    });\n  }\n\n  return (\n    <Dialog.Root {...dialogRootProps}>\n      {/* Render triggers as direct children of Dialog.Root */}\n      {triggers}\n\n      <Dialog.Portal>\n        {showOverlay && (\n          <StyledOverlay zIndex={computedZIndex} allowInteraction={draggable} />\n        )}\n        <DraggableModalContent\n          computedWidth={computedWidth}\n          bg={bg}\n          computedZIndex={computedZIndex}\n          label={label}\n          dataAttributes={dataAttributes}\n          draggable={draggable}\n          rest={rest}\n          railProps={railProps}\n        >\n          {/* Floating actions rail - always show a close by default */}\n          <ModalRail {...railProps}>\n            <ModalAction\n              actionType=\"close\"\n              aria-label=\"Close\"\n              iconName=\"x-outline\"\n            />\n            {actions?.map((action, idx) => (\n              <ModalAction key={idx} {...action} />\n            ))}\n          </ModalRail>\n          {/* Auto-render header when title or subtitle is provided */}\n          {shouldRenderHeader && (\n            <ModalHeader title={title} subtitle={subtitle} />\n          )}\n\n          {/* Auto-render description when provided */}\n          {description && <ModalDescription>{description}</ModalDescription>}\n\n          {/* Main content (everything except triggers) */}\n          {content}\n        </DraggableModalContent>\n      </Dialog.Portal>\n    </Dialog.Root>\n  );\n};\n\nexport default Modal;\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport { width, zIndex } from \"styled-system\";\nimport * as Dialog from \"@radix-ui/react-dialog\";\nimport { COMMON } from \"@sproutsocial/seeds-react-system-props\";\nimport Box, { type TypeContainerProps } from \"@sproutsocial/seeds-react-box\";\nimport {\n  BODY_PADDING,\n  DEFAULT_OVERLAY_Z_INDEX_OFFSET,\n} from \"../shared/constants\";\n\ninterface StyledOverlayProps extends TypeContainerProps {\n  zIndex?: number;\n  allowInteraction?: boolean;\n}\n\nexport const StyledOverlay = styled(Dialog.Overlay)<StyledOverlayProps>`\n  position: fixed;\n  top: 0px;\n  left: 0px;\n  right: 0px;\n  bottom: 0px;\n  background-color: ${(props) => props.theme.colors.overlay.background.base};\n  opacity: 0;\n  will-change: opacity;\n  transition: opacity ${(props) => props.theme.duration.medium}\n    ${(props) => props.theme.easing.ease_inout};\n  z-index: ${(props) =>\n    props.zIndex ? props.zIndex + DEFAULT_OVERLAY_Z_INDEX_OFFSET : 999};\n\n  /* Allow clicking through overlay when modal is draggable */\n  ${(props) =>\n    props.allowInteraction &&\n    `\n    pointer-events: none;\n  `}\n\n  ${zIndex}\n\n  &[data-state=\"open\"] {\n    opacity: 1;\n  }\n  &[data-state=\"closed\"] {\n    opacity: 0;\n  }\n`;\n\ninterface StyledContentProps extends TypeContainerProps {\n  zIndex?: number;\n  isDragging?: boolean;\n  draggable?: boolean;\n  railSize?: number;\n  railOffset?: number;\n  railSide?: \"right\" | \"left\";\n}\n\nexport const StyledContent = styled(Dialog.Content)<StyledContentProps>`\n  position: fixed;\n  ${(props) =>\n    props.draggable\n      ? `\n        top: 50%;\n        left: 50%;\n        transform: translate(-50%, -50%);\n      `\n      : `\n        top: 50%;\n        left: 50%;\n        transform: translate(-50%, -50%);\n      `}\n  display: flex;\n  flex-direction: column;\n  border-radius: ${(props) => props.theme.radii[600]};\n  box-shadow: ${(props) => props.theme.shadows.medium};\n  filter: blur(0);\n  color: ${(props) => props.theme.colors.text.body};\n  outline: none;\n  max-width: ${(props) => {\n    // Calculate extra space needed for the rail when it's on the side (viewport > 400px)\n    const railSize = props.railSize ?? 44;\n    const railOffset = props.railOffset ?? 12;\n    const railExtraSpace = railSize + railOffset;\n\n    // Account for rail space when positioned on the side\n    // At viewport <= 400px, rail is above modal, so no horizontal space needed\n    return `calc(100vw - ${BODY_PADDING} - ${railExtraSpace}px)`;\n  }};\n  max-height: calc(100vh - ${BODY_PADDING});\n  z-index: ${(props) => props.zIndex || 1000};\n\n  /* When viewport is <= 400px, rail is above modal, so restore full width */\n  @media (max-width: 400px) {\n    max-width: calc(100vw - ${BODY_PADDING});\n  }\n\n  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n    height: calc(100vh - ${BODY_PADDING});\n  }\n\n  ${width}\n  ${COMMON}\n\n  /* Enhanced Radix Dialog animations */\n  opacity: 0;\n  ${(props) =>\n    !props.draggable\n      ? `\n    transform: translate(-50%, -50%) scale(0.95);\n    transition: opacity ${props.theme.duration.medium} ${props.theme.easing.ease_inout},\n      transform ${props.theme.duration.medium} ${props.theme.easing.ease_inout};\n  `\n      : `\n    transition: opacity ${props.theme.duration.medium} ${props.theme.easing.ease_inout};\n  `}\n\n  &[data-state=\"open\"] {\n    opacity: 1;\n    ${(props) =>\n      !props.draggable ? `transform: translate(-50%, -50%) scale(1);` : ``}\n  }\n  &[data-state=\"closed\"] {\n    opacity: 0;\n    ${(props) =>\n      !props.draggable ? `transform: translate(-50%, -50%) scale(0.95);` : ``}\n  }\n`;\n\nexport const Content = styled(Box)`\n  font-family: ${(props) => props.theme.fontFamily};\n  min-height: 80px;\n  overflow-y: auto;\n  flex: 1 1 auto;\n  padding: 0 ${(props) => props.theme.space[300]}\n    ${(props) => props.theme.space[300]} ${(props) => props.theme.space[300]};\n  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n    flex-basis: 100%;\n  }\n`;\n\ninterface HeaderProps {\n  draggable?: boolean;\n  isDragging?: boolean;\n}\n\nexport const Header = styled(Box)<HeaderProps>`\n  font-family: ${(props) => props.theme.fontFamily};\n  padding: ${(props) => props.theme.space[400]}\n    ${(props) => props.theme.space[300]};\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  flex: 0 0 auto;\n\n  /* Draggable cursor styling */\n  ${(props) =>\n    props.draggable &&\n    `\n    cursor: ${props.isDragging ? \"grabbing\" : \"grab\"};\n    user-select: none;\n  `}\n`;\n\nexport const Footer = styled(Box)`\n  flex: 0 0 auto;\n  font-family: ${(props) => props.theme.fontFamily};\n  padding: ${(props) => props.theme.space[400]}\n    ${(props) => props.theme.space[300]};\n  border-bottom-right-radius: ${(props) => props.theme.radii[500]};\n  border-bottom-left-radius: ${(props) => props.theme.radii[500]};\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  gap: ${(props) => props.theme.space[100]};\n`;\n\nStyledOverlay.displayName = \"ModalOverlay\";\nStyledContent.displayName = \"ModalContent\";\nContent.displayName = \"ModalContent\";\nHeader.displayName = \"ModalHeader\";\nFooter.displayName = \"ModalFooter\";\n","// Shared constants for both Modal versions\n\n// Default z-index values\nexport const DEFAULT_MODAL_Z_INDEX = 6;\nexport const DEFAULT_OVERLAY_Z_INDEX_OFFSET = -1;\n\n// Default styling values\nexport const DEFAULT_MODAL_WIDTH = \"600px\";\nexport const DEFAULT_MODAL_BG = \"container.background.base\";\nexport const DEFAULT_CLOSE_BUTTON_LABEL = \"Close dialog\";\n\n// Max space allowed between the modal and the edge of the browser\nexport const BODY_PADDING = \"64px\";\n\n// Size presets for simplified API\nexport const MODAL_SIZE_PRESETS = {\n  small: \"400px\",\n  medium: \"600px\",\n  large: \"800px\",\n  full: \"90vw\",\n} as const;\n\n// Priority level z-index mappings\nexport const MODAL_PRIORITY_Z_INDEX = {\n  low: 100,\n  medium: 1000,\n  high: 2000,\n} as const;\n","import * as React from \"react\";\nimport * as Dialog from \"@radix-ui/react-dialog\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport Text from \"@sproutsocial/seeds-react-text\";\nimport { Header } from \"../ModalV2Styles\";\nimport { ModalCloseButton } from \"./ModalCloseButton\";\nimport type { TypeModalV2HeaderProps } from \"../ModalV2Types\";\nimport { useDragContext } from \"../ModalV2\";\n\nexport const ModalHeader = (props: TypeModalV2HeaderProps) => {\n  const {\n    title,\n    subtitle,\n    children,\n    titleProps = {},\n    subtitleProps = {},\n    showInlineClose,\n    ...rest\n  } = props;\n\n  const dragContext = useDragContext();\n  const isDraggable = dragContext?.draggable ?? false;\n\n  return (\n    <Header\n      {...rest}\n      onMouseDown={isDraggable ? dragContext?.onHeaderMouseDown : undefined}\n      draggable={isDraggable}\n      isDragging={dragContext?.isDragging}\n    >\n      {children ? (\n        children\n      ) : (\n        <React.Fragment>\n          <Box>\n            {title && (\n              <Dialog.Title asChild {...titleProps}>\n                <Text.Headline>{title}</Text.Headline>\n              </Dialog.Title>\n            )}\n            {subtitle && (\n              <Dialog.Description asChild {...subtitleProps}>\n                <Text as=\"div\" fontSize={200}>\n                  {subtitle}\n                </Text>\n              </Dialog.Description>\n            )}\n          </Box>\n          {showInlineClose && (\n            <Box display=\"flex\" alignItems=\"center\" justifyContent=\"flex-end\">\n              <ModalCloseButton position=\"relative\" offset={0} />\n            </Box>\n          )}\n        </React.Fragment>\n      )}\n    </Header>\n  );\n};\n\nModalHeader.displayName = \"ModalHeader\";\n","import * as React from \"react\";\nimport * as Dialog from \"@radix-ui/react-dialog\";\nimport styled from \"styled-components\";\nimport Icon from \"@sproutsocial/seeds-react-icon\";\nimport type { TypeModalV2CloseButtonProps } from \"../ModalV2Types\";\n\nconst CloseButtonWrapper = styled.button<{\n  size?: number;\n  position?: \"absolute\" | \"relative\";\n  side?: \"right\" | \"left\";\n  offset?: number;\n}>`\n  width: ${(p) => p.size || 44}px;\n  height: ${(p) => p.size || 44}px;\n  display: inline-grid;\n  place-items: center;\n  border-radius: 8px;\n  border: none;\n  background: rgba(22, 32, 32, 0.56);\n  color: #ffffff;\n  cursor: pointer;\n  outline: none;\n  transition: all 0.2s ease;\n\n  ${(p) =>\n    p.position === \"absolute\" &&\n    `\n    position: absolute;\n    top: 0px;\n    ${p.side || \"right\"}: ${p.offset || -48}px;\n    z-index: 1;\n  `}\n\n  &:hover {\n    background: rgba(22, 32, 32, 0.7);\n    transform: translateY(-1px);\n  }\n\n  &:active {\n    transform: translateY(0);\n  }\n\n  &:focus-visible {\n    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #205bc3;\n  }\n\n  &:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n`;\n\nexport const ModalCloseButton = (props: TypeModalV2CloseButtonProps) => {\n  const {\n    children,\n    onClick,\n    asChild,\n    closeButtonLabel = \"Close modal\",\n    size = 44,\n    position = \"absolute\",\n    side = \"right\",\n    offset = -48,\n    ...rest\n  } = props;\n\n  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n    onClick?.(e);\n    // Dialog.Close automatically handles closing\n  };\n\n  if (asChild) {\n    return (\n      <Dialog.Close asChild>\n        {React.cloneElement(children as React.ReactElement, {\n          onClick: handleClick,\n          ...rest,\n        })}\n      </Dialog.Close>\n    );\n  }\n\n  return (\n    <Dialog.Close asChild>\n      <CloseButtonWrapper\n        onClick={handleClick}\n        size={size}\n        position={position}\n        side={side}\n        offset={offset}\n        aria-label={closeButtonLabel}\n        title={closeButtonLabel}\n        {...rest}\n      >\n        {children || <Icon name=\"x-outline\" size=\"small\" />}\n      </CloseButtonWrapper>\n    </Dialog.Close>\n  );\n};\n\nModalCloseButton.displayName = \"ModalCloseButton\";\n","import * as React from \"react\";\nimport { Footer } from \"../ModalV2Styles\";\nimport { DEFAULT_MODAL_BG } from \"../../shared/constants\";\nimport type { TypeModalV2FooterProps } from \"../ModalV2Types\";\n\nexport const ModalFooter = (props: TypeModalV2FooterProps) => {\n  const { bg = DEFAULT_MODAL_BG, children, ...rest } = props;\n  return (\n    <Footer\n      bg={bg}\n      borderTop={500}\n      borderColor=\"container.border.base\"\n      {...rest}\n    >\n      {children}\n    </Footer>\n  );\n};\n\nModalFooter.displayName = \"ModalFooter\";\n","import * as React from \"react\";\nimport { Content } from \"../ModalV2Styles\";\nimport type { TypeModalV2ContentProps } from \"../ModalV2Types\";\n\nexport const ModalContent = React.forwardRef<\n  HTMLDivElement,\n  TypeModalV2ContentProps\n>(({ children, ...rest }, ref) => {\n  return (\n    <Content data-qa-modal ref={ref} {...rest}>\n      {children}\n    </Content>\n  );\n});\n\nModalContent.displayName = \"ModalContent\";\n","import * as React from \"react\";\nimport * as Dialog from \"@radix-ui/react-dialog\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport type { TypeModalV2DescriptionProps } from \"../ModalV2Types\";\n\nexport const ModalDescription = React.forwardRef<\n  HTMLDivElement,\n  TypeModalV2DescriptionProps\n>(({ children, descriptionProps = {}, ...rest }, ref) => {\n  return (\n    <Dialog.Description asChild {...descriptionProps}>\n      <Box ref={ref} {...rest}>\n        {children}\n      </Box>\n    </Dialog.Description>\n  );\n});\n\nModalDescription.displayName = \"ModalDescription\";\n","import * as React from \"react\";\nimport * as Dialog from \"@radix-ui/react-dialog\";\nimport Button from \"@sproutsocial/seeds-react-button\";\nimport type { TypeModalV2TriggerProps } from \"../ModalV2Types\";\n\n/**\n * A trigger button that opens the modal when clicked.\n * Must be used inside a Modal component's Dialog.Root context.\n * Uses Seeds Button by default but supports asChild for custom elements.\n */\nexport const ModalTrigger = (props: TypeModalV2TriggerProps) => {\n  const { children, onClick, asChild, ...rest } = props;\n\n  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n    onClick?.(e);\n    // Dialog.Trigger automatically handles modal opening\n  };\n\n  if (asChild) {\n    return (\n      <Dialog.Trigger asChild>\n        {React.cloneElement(children as React.ReactElement, {\n          onClick: handleClick,\n          ...rest,\n        })}\n      </Dialog.Trigger>\n    );\n  }\n\n  return (\n    <Dialog.Trigger asChild>\n      <Button onClick={handleClick} {...rest}>\n        {children}\n      </Button>\n    </Dialog.Trigger>\n  );\n};\n\nModalTrigger.displayName = \"ModalTrigger\";\n","import * as React from \"react\";\nimport * as Dialog from \"@radix-ui/react-dialog\";\n\nexport interface ModalCloseProps {\n  children: React.ReactNode;\n  onClick?: (e: React.MouseEvent) => void;\n  asChild?: boolean;\n}\n\n/**\n * A component that closes the modal when clicked.\n * Uses asChild pattern like Radix primitives.\n */\nexport const ModalClose = (props: ModalCloseProps) => {\n  const { children, onClick, asChild = false, ...rest } = props;\n\n  const handleClick = (e: React.MouseEvent) => {\n    onClick?.(e);\n    // Dialog.Close automatically handles closing\n  };\n\n  return (\n    <Dialog.Close asChild={asChild} onClick={handleClick} {...rest}>\n      {children}\n    </Dialog.Close>\n  );\n};\n\nModalClose.displayName = \"ModalClose\";\n","// components/ModalRail.tsx\nimport * as React from \"react\";\nimport * as Dialog from \"@radix-ui/react-dialog\";\nimport styled from \"styled-components\";\nimport Icon from \"@sproutsocial/seeds-react-icon\";\nimport type { TypeModalRailProps, TypeModalActionProps } from \"../ModalV2Types\";\n\n// --- styled wrappers ---\nconst Rail = styled.div<{\n  side: \"right\" | \"left\";\n  offset: number;\n  gap: number;\n  size: number;\n}>`\n  position: absolute;\n  top: ${(p) => p.offset}px;\n  ${(p) =>\n    p.side === \"right\"\n      ? `right: calc(-1 * (${p.size}px + ${p.offset}px));`\n      : `left: calc(-1 * (${p.size}px + ${p.offset}px));`}\n  display: flex;\n  flex-direction: column;\n  gap: ${(p) => p.gap}px;\n  z-index: 1;\n\n  @media (max-width: 400px) {\n    /* Move rail above the modal on the right side */\n    top: auto;\n    bottom: calc(100% + ${(p) => p.offset}px);\n    right: ${(p) => p.offset}px;\n    left: auto;\n    /* Change to horizontal layout with reversed order */\n    flex-direction: row-reverse;\n  }\n`;\n\nconst RailBtn = styled.button<{ size: number }>`\n  width: ${(p) => p.size}px;\n  height: ${(p) => p.size}px;\n  display: inline-grid;\n  place-items: center;\n  border-radius: 8px;\n  border: none;\n  background: rgba(22, 32, 32, 0.56);\n  color: #ffffff;\n  cursor: pointer;\n  outline: none;\n  transition: all 0.2s ease;\n\n  &:hover {\n    background: rgba(22, 32, 32, 0.7);\n    transform: translateY(-1px);\n  }\n\n  &:active {\n    transform: translateY(0);\n  }\n\n  &:focus-visible {\n    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #205bc3;\n  }\n\n  &:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n`;\n\n// --- components ---\nexport const ModalRail: React.FC<TypeModalRailProps> = ({\n  side = \"right\",\n  offset = 12,\n  gap = 12,\n  size = 44,\n  children,\n}) => {\n  return (\n    <Rail\n      data-slot=\"modal-rail\"\n      side={side}\n      offset={offset}\n      gap={gap}\n      size={size}\n      aria-label=\"Modal quick actions\"\n    >\n      {React.Children.map(children, (child) =>\n        React.isValidElement(child)\n          ? React.cloneElement(child as any, { size })\n          : child\n      )}\n    </Rail>\n  );\n};\n\nexport const ModalAction: React.FC<\n  TypeModalActionProps & { size?: number }\n> = ({\n  \"aria-label\": ariaLabel,\n  iconName,\n  disabled,\n  size = 44,\n  actionType,\n  onClick,\n  ...rest\n}) => {\n  const Btn = (\n    <RailBtn\n      size={size}\n      aria-label={ariaLabel}\n      title={ariaLabel}\n      disabled={disabled}\n      {...rest}\n    >\n      {iconName ? <Icon name={iconName} size=\"small\" /> : ariaLabel}\n    </RailBtn>\n  );\n\n  return actionType === \"close\" ? (\n    <Dialog.Close asChild>{Btn}</Dialog.Close>\n  ) : (\n    React.cloneElement(Btn, { onClick })\n  );\n};\n"],"mappings":"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","names":["React","Dialog","Content","React","Dialog","Box","React","Dialog","styled","jsx","Box","jsx","React","jsx","Content","React","Dialog","Box","jsx","React","Dialog","jsx","Dialog","jsx","React","Dialog","styled","Icon","jsx","jsx","jsxs","e","props"]}

package/src/v2/ModalV2.tsx

@@ -1,388 +0,0 @@
-import * as React from "react";
-import * as Dialog from "@radix-ui/react-dialog";
-import { StyledOverlay, StyledContent } from "./ModalV2Styles";
-import {
-  ModalHeader,
-  ModalDescription,
-  ModalTrigger,
-  ModalRail,
-  ModalAction,
-} from "./components";
-import {
-  DEFAULT_MODAL_WIDTH,
-  DEFAULT_MODAL_BG,
-  DEFAULT_MODAL_Z_INDEX,
-  MODAL_SIZE_PRESETS,
-  MODAL_PRIORITY_Z_INDEX,
-} from "../shared/constants";
-import type { TypeModalV2Props } from "./ModalV2Types";
-
-interface DraggableModalContentProps {
-  children: React.ReactNode;
-  computedWidth: any;
-  bg: any;
-  computedZIndex: number;
-  label?: string;
-  dataAttributes: Record<string, string>;
-  draggable?: boolean;
-  rest: any;
-  railProps?: Partial<TypeModalV2Props["railProps"]>;
-}
-
-// Context to share drag state between modal content and header
-interface DragContextValue {
-  position: { x: number; y: number };
-  isDragging: boolean;
-  onHeaderMouseDown: (e: React.MouseEvent) => void;
-  contentRef: React.RefObject<HTMLDivElement>;
-  draggable: boolean;
-}
-
-const DragContext = React.createContext<DragContextValue | null>(null);
-
-export const useDragContext = () => {
-  const context = React.useContext(DragContext);
-  return context;
-};
-
-const DraggableModalContent: React.FC<DraggableModalContentProps> = ({
-  children,
-  computedWidth,
-  bg,
-  computedZIndex,
-  label,
-  dataAttributes,
-  draggable,
-  rest,
-  railProps,
-}) => {
-  const [position, setPosition] = React.useState({ x: 0, y: 0 });
-  const [isDragging, setIsDragging] = React.useState(false);
-  const contentRef = React.useRef<HTMLDivElement>(null);
-
-  // Calculate rail dimensions for boundary constraints
-  const railSize = railProps?.size ?? 44;
-  const railOffset = railProps?.offset ?? 12;
-  const railSide = railProps?.side ?? "right";
-
-  // Total extra space needed on the side with the rail
-  // (only when viewport is wider than 400px breakpoint)
-  const railExtraSpace = railSize + railOffset;
-
-  const handleHeaderMouseDown = React.useCallback(
-    (e: React.MouseEvent) => {
-      if (!draggable) return;
-
-      // Only allow dragging from header (not interactive elements)
-      const target = e.target as HTMLElement;
-      if (
-        target.tagName === "BUTTON" ||
-        target.tagName === "INPUT" ||
-        target.closest("button")
-      ) {
-        return;
-      }
-
-      e.preventDefault();
-      setIsDragging(true);
-
-      const rect = contentRef.current?.getBoundingClientRect();
-      if (!rect) return;
-
-      // Calculate offset from mouse to current modal position
-      const offsetX = e.clientX - rect.left;
-      const offsetY = e.clientY - rect.top;
-
-      const handleMouseMove = (e: MouseEvent) => {
-        e.preventDefault();
-
-        // Calculate new position based on mouse position minus offset
-        const newX = e.clientX - offsetX;
-        const newY = e.clientY - offsetY;
-
-        // Determine if rail is on the side (viewport > 400px) or above (viewport <= 400px)
-        const isRailOnSide = window.innerWidth > 400;
-
-        // Constrain to viewport bounds (keeping modal AND rail fully visible)
-        const modalWidth = rect.width;
-        const modalHeight = rect.height;
-
-        // Adjust boundaries to account for rail position
-        let maxX = window.innerWidth - modalWidth;
-        let minX = 0;
-        let maxY = window.innerHeight - modalHeight;
-        let minY = 0;
-
-        if (isRailOnSide) {
-          // Rail is positioned on the side of the modal
-          if (railSide === "right") {
-            // Rail is on the right, so reduce maxX to prevent rail from going off-screen
-            maxX = window.innerWidth - modalWidth - railExtraSpace;
-          } else {
-            // Rail is on the left, so increase minX to prevent rail from going off-screen
-            minX = railExtraSpace;
-          }
-        } else {
-          // Rail is positioned above the modal (viewport <= 400px)
-          // Account for rail height + offset at the top
-          minY = railSize + railOffset;
-        }
-
-        const constrainedX = Math.max(minX, Math.min(maxX, newX));
-        const constrainedY = Math.max(minY, Math.min(maxY, newY));
-
-        // Convert to offset from center for our transform
-        const centerX = window.innerWidth / 2 - modalWidth / 2;
-        const centerY = window.innerHeight / 2 - modalHeight / 2;
-
-        setPosition({
-          x: constrainedX - centerX,
-          y: constrainedY - centerY,
-        });
-      };
-
-      const handleMouseUp = () => {
-        setIsDragging(false);
-        document.removeEventListener("mousemove", handleMouseMove);
-        document.removeEventListener("mouseup", handleMouseUp);
-      };
-
-      document.addEventListener("mousemove", handleMouseMove);
-      document.addEventListener("mouseup", handleMouseUp);
-    },
-    [draggable, railSide, railExtraSpace]
-  );
-
-  const dragContextValue = React.useMemo<DragContextValue>(
-    () => ({
-      position,
-      isDragging,
-      onHeaderMouseDown: handleHeaderMouseDown,
-      contentRef,
-      draggable: draggable ?? false,
-    }),
-    [position, isDragging, handleHeaderMouseDown, draggable]
-  );
-
-  // Prevent modal from closing on outside interaction when draggable
-  const handleInteractOutside = React.useCallback(
-    (e: Event) => {
-      if (draggable) {
-        e.preventDefault();
-      }
-    },
-    [draggable]
-  );
-
-  return (
-    <DragContext.Provider value={draggable ? dragContextValue : null}>
-      <StyledContent
-        ref={contentRef}
-        width={computedWidth}
-        bg={bg}
-        zIndex={computedZIndex}
-        aria-label={label}
-        draggable={draggable}
-        isDragging={isDragging}
-        railSize={railSize}
-        railOffset={railOffset}
-        railSide={railSide}
-        onInteractOutside={handleInteractOutside}
-        style={
-          draggable
-            ? {
-                transform: `translate(calc(-50% + ${position.x}px), calc(-50% + ${position.y}px))`,
-                transition: isDragging ? "none" : undefined,
-              }
-            : undefined
-        }
-        {...dataAttributes}
-        {...rest}
-      >
-        {children}
-      </StyledContent>
-    </DragContext.Provider>
-  );
-};
-
-/**
- * The modal you want - with Radix UI Dialog
- *
- * Features:
- * - Built with Radix UI Dialog for superior accessibility
- * - Same API as the original Modal component
- * - Automatic focus management and keyboard navigation
- * - Portal rendering for proper z-index layering
- * - Customizable styling through system props
- * - Optional draggable functionality using react-dnd
- */
-const Modal = (props: TypeModalV2Props) => {
-  const {
-    children,
-    modalTrigger,
-    draggable = false,
-    open,
-    defaultOpen,
-    onOpenChange,
-    "aria-label": label,
-    title,
-    subtitle,
-    description,
-    size,
-    priority,
-    data = {},
-    bg = DEFAULT_MODAL_BG,
-    showOverlay = true,
-    actions,
-    railProps,
-    ...rest
-  } = props;
-
-  const handleOpenChange = React.useCallback(
-    (newOpen: boolean) => {
-      onOpenChange?.(newOpen);
-    },
-    [onOpenChange]
-  );
-
-  // Compute actual width
-  const computedWidth = React.useMemo(() => {
-    if (size) {
-      // Handle preset sizes
-      if (typeof size === "string" && size in MODAL_SIZE_PRESETS) {
-        return MODAL_SIZE_PRESETS[size as keyof typeof MODAL_SIZE_PRESETS];
-      }
-      // Handle custom size values
-      return size;
-    }
-    // Fall back to default width
-    return DEFAULT_MODAL_WIDTH;
-  }, [size]);
-
-  // Compute actual z-index
-  const computedZIndex = React.useMemo(() => {
-    if (priority) {
-      return MODAL_PRIORITY_Z_INDEX[priority];
-    }
-    return DEFAULT_MODAL_Z_INDEX;
-  }, [priority]);
-
-  // Create data attributes object
-  const dataAttributes = React.useMemo(() => {
-    const attrs: Record<string, string> = {};
-    Object.entries(data).forEach(([key, value]) => {
-      attrs[`data-${key}`] = String(value);
-    });
-    attrs["data-qa-modal"] = "";
-    // Only add open attribute if in controlled mode
-    if (open !== undefined) {
-      attrs["data-qa-modal-open"] = String(open);
-    }
-    return attrs;
-  }, [data, open]);
-
-  // Determine if we should auto-render the header from provided props
-  const shouldRenderHeader = Boolean(title || subtitle);
-
-  // Build Dialog.Root props conditionally
-  const dialogRootProps = React.useMemo(() => {
-    const props: any = {};
-
-    // If controlled (open prop provided), use it
-    if (open !== undefined) {
-      props.open = open;
-    }
-    // If uncontrolled with explicit defaultOpen, use it
-    else if (defaultOpen !== undefined) {
-      props.defaultOpen = defaultOpen;
-    }
-    // If completely uncontrolled (neither open nor defaultOpen provided), default to closed
-    else {
-      props.defaultOpen = false;
-    }
-
-    // Always add onOpenChange if provided
-    if (onOpenChange) {
-      props.onOpenChange = handleOpenChange;
-    }
-
-    // When draggable, prevent modal from closing on outside interaction
-    // This allows users to interact with background content
-    if (draggable) {
-      props.modal = false;
-    }
-
-    return props;
-  }, [open, defaultOpen, handleOpenChange, onOpenChange, draggable]);
-
-  // Handle trigger - use modalTrigger prop if provided, otherwise look for ModalTrigger children (backward compatibility)
-  const triggers: React.ReactNode[] = [];
-  const content: React.ReactNode[] = [];
-
-  if (modalTrigger) {
-    // New prop-based approach: wrap the provided element with Dialog.Trigger
-    triggers.push(
-      <Dialog.Trigger key="modal-trigger" asChild>
-        {modalTrigger}
-      </Dialog.Trigger>
-    );
-    // All children are content
-    content.push(children);
-  } else {
-    // Legacy approach: separate ModalTrigger children from content children
-    React.Children.forEach(children, (child) => {
-      if (React.isValidElement(child) && child.type === ModalTrigger) {
-        triggers.push(child);
-      } else {
-        content.push(child);
-      }
-    });
-  }
-
-  return (
-    <Dialog.Root {...dialogRootProps}>
-      {/* Render triggers as direct children of Dialog.Root */}
-      {triggers}
-
-      <Dialog.Portal>
-        {showOverlay && (
-          <StyledOverlay zIndex={computedZIndex} allowInteraction={draggable} />
-        )}
-        <DraggableModalContent
-          computedWidth={computedWidth}
-          bg={bg}
-          computedZIndex={computedZIndex}
-          label={label}
-          dataAttributes={dataAttributes}
-          draggable={draggable}
-          rest={rest}
-          railProps={railProps}
-        >
-          {/* Floating actions rail - always show a close by default */}
-          <ModalRail {...railProps}>
-            <ModalAction
-              actionType="close"
-              aria-label="Close"
-              iconName="x-outline"
-            />
-            {actions?.map((action, idx) => (
-              <ModalAction key={idx} {...action} />
-            ))}
-          </ModalRail>
-          {/* Auto-render header when title or subtitle is provided */}
-          {shouldRenderHeader && (
-            <ModalHeader title={title} subtitle={subtitle} />
-          )}
-
-          {/* Auto-render description when provided */}
-          {description && <ModalDescription>{description}</ModalDescription>}
-
-          {/* Main content (everything except triggers) */}
-          {content}
-        </DraggableModalContent>
-      </Dialog.Portal>
-    </Dialog.Root>
-  );
-};
-
-export default Modal;

package/src/v2/ModalV2Styles.tsx

@@ -1,180 +0,0 @@
-import React from "react";
-import styled from "styled-components";
-import { width, zIndex } from "styled-system";
-import * as Dialog from "@radix-ui/react-dialog";
-import { COMMON } from "@sproutsocial/seeds-react-system-props";
-import Box, { type TypeContainerProps } from "@sproutsocial/seeds-react-box";
-import {
-  BODY_PADDING,
-  DEFAULT_OVERLAY_Z_INDEX_OFFSET,
-} from "../shared/constants";
-
-interface StyledOverlayProps extends TypeContainerProps {
-  zIndex?: number;
-  allowInteraction?: boolean;
-}
-
-export const StyledOverlay = styled(Dialog.Overlay)<StyledOverlayProps>`
-  position: fixed;
-  top: 0px;
-  left: 0px;
-  right: 0px;
-  bottom: 0px;
-  background-color: ${(props) => props.theme.colors.overlay.background.base};
-  opacity: 0;
-  will-change: opacity;
-  transition: opacity ${(props) => props.theme.duration.medium}
-    ${(props) => props.theme.easing.ease_inout};
-  z-index: ${(props) =>
-    props.zIndex ? props.zIndex + DEFAULT_OVERLAY_Z_INDEX_OFFSET : 999};
-
-  /* Allow clicking through overlay when modal is draggable */
-  ${(props) =>
-    props.allowInteraction &&
-    `
-    pointer-events: none;
-  `}
-
-  ${zIndex}
-
-  &[data-state="open"] {
-    opacity: 1;
-  }
-  &[data-state="closed"] {
-    opacity: 0;
-  }
-`;
-
-interface StyledContentProps extends TypeContainerProps {
-  zIndex?: number;
-  isDragging?: boolean;
-  draggable?: boolean;
-  railSize?: number;
-  railOffset?: number;
-  railSide?: "right" | "left";
-}
-
-export const StyledContent = styled(Dialog.Content)<StyledContentProps>`
-  position: fixed;
-  ${(props) =>
-    props.draggable
-      ? `
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-      `
-      : `
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-      `}
-  display: flex;
-  flex-direction: column;
-  border-radius: ${(props) => props.theme.radii[600]};
-  box-shadow: ${(props) => props.theme.shadows.medium};
-  filter: blur(0);
-  color: ${(props) => props.theme.colors.text.body};
-  outline: none;
-  max-width: ${(props) => {
-    // Calculate extra space needed for the rail when it's on the side (viewport > 400px)
-    const railSize = props.railSize ?? 44;
-    const railOffset = props.railOffset ?? 12;
-    const railExtraSpace = railSize + railOffset;
-
-    // Account for rail space when positioned on the side
-    // At viewport <= 400px, rail is above modal, so no horizontal space needed
-    return `calc(100vw - ${BODY_PADDING} - ${railExtraSpace}px)`;
-  }};
-  max-height: calc(100vh - ${BODY_PADDING});
-  z-index: ${(props) => props.zIndex || 1000};
-
-  /* When viewport is <= 400px, rail is above modal, so restore full width */
-  @media (max-width: 400px) {
-    max-width: calc(100vw - ${BODY_PADDING});
-  }
-
-  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
-    height: calc(100vh - ${BODY_PADDING});
-  }
-
-  ${width}
-  ${COMMON}
-
-  /* Enhanced Radix Dialog animations */
-  opacity: 0;
-  ${(props) =>
-    !props.draggable
-      ? `
-    transform: translate(-50%, -50%) scale(0.95);
-    transition: opacity ${props.theme.duration.medium} ${props.theme.easing.ease_inout},
-      transform ${props.theme.duration.medium} ${props.theme.easing.ease_inout};
-  `
-      : `
-    transition: opacity ${props.theme.duration.medium} ${props.theme.easing.ease_inout};
-  `}
-
-  &[data-state="open"] {
-    opacity: 1;
-    ${(props) =>
-      !props.draggable ? `transform: translate(-50%, -50%) scale(1);` : ``}
-  }
-  &[data-state="closed"] {
-    opacity: 0;
-    ${(props) =>
-      !props.draggable ? `transform: translate(-50%, -50%) scale(0.95);` : ``}
-  }
-`;
-
-export const Content = styled(Box)`
-  font-family: ${(props) => props.theme.fontFamily};
-  min-height: 80px;
-  overflow-y: auto;
-  flex: 1 1 auto;
-  padding: 0 ${(props) => props.theme.space[300]}
-    ${(props) => props.theme.space[300]} ${(props) => props.theme.space[300]};
-  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
-    flex-basis: 100%;
-  }
-`;
-
-interface HeaderProps {
-  draggable?: boolean;
-  isDragging?: boolean;
-}
-
-export const Header = styled(Box)<HeaderProps>`
-  font-family: ${(props) => props.theme.fontFamily};
-  padding: ${(props) => props.theme.space[400]}
-    ${(props) => props.theme.space[300]};
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  flex: 0 0 auto;
-
-  /* Draggable cursor styling */
-  ${(props) =>
-    props.draggable &&
-    `
-    cursor: ${props.isDragging ? "grabbing" : "grab"};
-    user-select: none;
-  `}
-`;
-
-export const Footer = styled(Box)`
-  flex: 0 0 auto;
-  font-family: ${(props) => props.theme.fontFamily};
-  padding: ${(props) => props.theme.space[400]}
-    ${(props) => props.theme.space[300]};
-  border-bottom-right-radius: ${(props) => props.theme.radii[500]};
-  border-bottom-left-radius: ${(props) => props.theme.radii[500]};
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  gap: ${(props) => props.theme.space[100]};
-`;
-
-StyledOverlay.displayName = "ModalOverlay";
-StyledContent.displayName = "ModalContent";
-Content.displayName = "ModalContent";
-Header.displayName = "ModalHeader";
-Footer.displayName = "ModalFooter";