@sproutsocial/seeds-react-modal 2.4.7 → 2.4.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (18) hide show
  1. package/.turbo/turbo-build.log +14 -14
  2. package/CHANGELOG.md +13 -0
  3. package/dist/esm/{chunk-OG7KEB5Z.js → chunk-HOGEFGDN.js} +6 -2
  4. package/dist/esm/chunk-HOGEFGDN.js.map +1 -0
  5. package/dist/esm/index.js +1 -1
  6. package/dist/esm/v2/index.js +1 -1
  7. package/dist/index.js +5 -1
  8. package/dist/index.js.map +1 -1
  9. package/dist/v2/index.d.mts +1 -1
  10. package/dist/v2/index.d.ts +1 -1
  11. package/dist/v2/index.js +5 -1
  12. package/dist/v2/index.js.map +1 -1
  13. package/package.json +1 -1
  14. package/src/__tests__/v2/Modal.test.tsx +105 -0
  15. package/src/shared/constants.ts +1 -1
  16. package/src/v2/Modal.tsx +8 -0
  17. package/src/v2/ModalV2.stories.tsx +208 -0
  18. package/dist/esm/chunk-OG7KEB5Z.js.map +0 -1
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/index.ts","../src/v1/Modal.tsx","../src/v1/styles.tsx","../src/v1/index.ts","../src/v2/Modal.tsx","../src/v2/components/ModalHeader.tsx","../src/v2/components/ModalContent.tsx","../src/shared/constants.ts","../src/v2/MotionConfig.ts","../src/v2/components/ModalFooter.tsx","../src/v2/components/ModalCloseWrapper.tsx","../src/v2/components/ModalBody.tsx","../src/v2/components/ModalDescription.tsx","../src/v2/components/ModalRail.tsx","../src/v2/components/ModalAction.tsx","../../seeds-react-mixins/src/index.ts","../src/v2/components/ModalExternalTrigger.tsx","../src/v2/components/ModalOverlay.tsx"],"sourcesContent":["// Main export - V1 Modal for backwards compatibility\nimport Modal from \"./v1\";\nexport default Modal;\nexport { Modal };\n\n// Explicit type exports from V1 for tree shaking\nexport type {\n TypeModalProps,\n TypeModalHeaderProps,\n TypeModalFooterProps,\n TypeModalContentProps,\n TypeModalCloseButtonProps,\n} from \"./v1\";\n\n// V2 Modal exports (renamed to just Modal)\nexport {\n Modal as ModalV2,\n ModalDescription,\n ModalHeader,\n ModalFooter,\n ModalBody,\n ModalCloseWrapper,\n ModalRail,\n ModalAction,\n ModalCustomHeader,\n ModalCustomFooter,\n} from \"./v2\";\nexport type {\n TypeModalProps as TypeModalV2Props,\n TypeModalHeaderProps as TypeModalV2HeaderProps,\n TypeModalFooterProps as TypeModalV2FooterProps,\n TypeModalBodyProps as TypeModalV2BodyProps,\n TypeModalDescriptionProps as TypeModalV2DescriptionProps,\n TypeModalRailProps,\n TypeModalActionProps,\n ModalCloseWrapperProps,\n} from \"./v2\";\n","import * as React from \"react\";\nimport { useContext } from \"react\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport Button from \"@sproutsocial/seeds-react-button\";\nimport Icon from \"@sproutsocial/seeds-react-icon\";\nimport Text from \"@sproutsocial/seeds-react-text\";\nimport { Container, Content, Header, Footer, Body } from \"./styles\";\nimport type {\n TypeModalProps,\n TypeModalCloseButtonProps,\n TypeModalContentProps,\n TypeModalFooterProps,\n TypeModalHeaderProps,\n} from \"./ModalTypes\";\n\ntype TypeModalContext = Partial<{\n onClose: () => void;\n closeButtonLabel: string;\n label: string;\n}>;\n\nconst ModalContext = React.createContext<TypeModalContext>({});\n\nconst ModalHeader = (props: TypeModalHeaderProps) => {\n const { title, subtitle, children, bordered, ...rest } = props;\n return (\n <Header bordered={title || subtitle || bordered} {...rest}>\n {children ? (\n children\n ) : (\n <React.Fragment>\n <Box>\n {title && (\n <Text as=\"h1\" fontSize={400} fontWeight=\"semibold\">\n {title}\n </Text>\n )}\n {subtitle && (\n <Text as=\"div\" fontSize={200}>\n {subtitle}\n </Text>\n )}\n </Box>\n <Box display=\"flex\" alignItems=\"center\" justify-content=\"flex-end\">\n <ModalCloseButton ml={400} />\n </Box>\n </React.Fragment>\n )}\n </Header>\n );\n};\n\nconst ModalCloseButton = (props: TypeModalCloseButtonProps) => {\n const { onClose, closeButtonLabel } = useContext(ModalContext);\n if (!onClose) return null;\n return (\n <Button onClick={onClose} {...props}>\n <Icon name=\"x-outline\" ariaLabel={closeButtonLabel} />\n </Button>\n );\n};\n\nconst ModalFooter = ({\n bg = \"container.background.base\",\n ...rest\n}: TypeModalFooterProps) => (\n <Footer\n bg={bg}\n borderTop={500}\n borderColor=\"container.border.base\"\n {...rest}\n />\n);\n\nconst ModalContent = React.forwardRef(\n ({ children, ...rest }: TypeModalContentProps, ref) => {\n const { label } = useContext(ModalContext);\n return (\n <Content data-qa-modal data-qa-label={label} ref={ref} {...rest}>\n {children}\n </Content>\n );\n }\n);\n\n/**\n * The modal you want\n */\nconst Modal = (props: TypeModalProps) => {\n const {\n appElementSelector,\n children,\n isOpen,\n label,\n onClose,\n closeButtonLabel,\n width = \"800px\",\n zIndex = 6,\n data = {},\n ...rest\n } = props;\n\n const isCloseable = Boolean(onClose);\n const appElement =\n appElementSelector && document\n ? (document.querySelector(appElementSelector) as HTMLElement)\n : undefined;\n\n return (\n <Container\n appElement={appElement}\n ariaHideApp={!!appElement}\n isOpen={isOpen}\n contentLabel={label}\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n onRequestClose={onClose || (() => {})}\n shouldFocusAfterRender={true}\n shouldCloseOnOverlayClick={isCloseable}\n shouldCloseOnEsc={isCloseable}\n shouldReturnFocusAfterClose={true}\n closeTimeoutMS={200}\n role=\"dialog\"\n width={width}\n zIndex={zIndex}\n data={{\n \"qa-modal\": \"\",\n \"qa-modal-isopen\": isOpen,\n ...data,\n }}\n {...rest}\n >\n <React.Fragment>\n <Body />\n\n <ModalContext.Provider\n value={{\n onClose,\n closeButtonLabel,\n label,\n }}\n >\n {children}\n </ModalContext.Provider>\n </React.Fragment>\n </Container>\n );\n};\n\nModalHeader.displayName = \"Modal.Header\";\nModalFooter.displayName = \"Modal.Footer\";\nModalContent.displayName = \"Modal.Content\";\nModalCloseButton.displayName = \"Modal.CloseButton\";\n\nModal.Header = ModalHeader;\nModal.Footer = ModalFooter;\nModal.Content = ModalContent;\nModal.CloseButton = ModalCloseButton;\n\nexport default Modal;\n","import React from \"react\";\nimport styled, { createGlobalStyle } from \"styled-components\";\nimport { width, zIndex } from \"styled-system\";\nimport ReactModal from \"react-modal\";\nimport { COMMON } from \"@sproutsocial/seeds-react-system-props\";\nimport Box, { type TypeContainerProps } from \"@sproutsocial/seeds-react-box\";\n\n// This is the max space allowed between the modal and the edge of the browser\nconst BODY_PADDING = \"64px\";\n\nconst ReactModalAdapter = ({\n className = \"\",\n ...props\n}: { className?: string } & Omit<\n ReactModal.Props,\n \"portalClassName\" | \"className\" | \"overlayClassName\"\n>) => {\n // We want to create *__Content and *__Overlay class names on the subcomponents.\n // Because `className` could be a space-separated list of class names, we make\n // sure that we append `__Content` and `__Overlay` to every class name.\n const contentClassName = className\n .split(\" \")\n .map((className) => `${className} ${className}__Content`)\n .join(\" \");\n\n const overlayClassName = className\n .split(\" \")\n .map((className) => `${className} ${className}__Overlay`)\n .join(\" \");\n\n return (\n <ReactModal\n portalClassName={className}\n className={contentClassName}\n overlayClassName={overlayClassName}\n {...props}\n />\n );\n};\n\nexport const Body = createGlobalStyle`\n .ReactModal__Body--open {\n overflow: hidden;\n }\n`;\n\nexport const Container = styled(ReactModalAdapter)<TypeContainerProps>`\n &__Overlay {\n position: fixed;\n top: 0px;\n left: 0px;\n right: 0px;\n bottom: 0px;\n display: flex;\n align-items: center;\n justify-content: center;\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\n ${zIndex}\n\n &.ReactModal__Overlay--after-open {\n opacity: 1;\n }\n &.ReactModal__Overlay--before-close {\n opacity: 0;\n }\n }\n\n &__Content {\n display: flex;\n flex-direction: column;\n background: ${(props) => props.theme.colors.container.background.base};\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\n outline: none;\n max-width: calc(100vw - ${BODY_PADDING});\n max-height: calc(100vh - ${BODY_PADDING});\n @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n /**\n * This prevents the modal from being very short in IE11. Better too big\n * than too small.\n */\n height: calc(100vh - ${BODY_PADDING});\n }\n\n ${width}\n\n ${COMMON}\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: ${(props) => props.theme.space[400]}\n ${(props) => props.theme.space[450]};\n @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n /* 'flex-basis: auto' breaks overflow in IE11 */\n flex-basis: 100%;\n }\n`;\n\nexport const HeaderContainer = styled(Box)`\n font-family: ${(props) => props.theme.fontFamily};\n padding: ${(props) => props.theme.space[400]}\n ${(props) => props.theme.space[450]};\n`;\n\nexport const Header = styled(HeaderContainer)<{ bordered?: boolean }>`\n display: flex;\n align-items: center;\n justify-content: space-between;\n flex: 0 0 auto;\n border-bottom-width: ${(props) => props.theme.borderWidths[500]};\n border-bottom-color: ${(props) =>\n props.bordered ? props.theme.colors.container.border.base : \"transparent\"};\n border-bottom-style: solid;\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[450]};\n border-bottom-right-radius: ${(props) => props.theme.radii[500]};\n border-bottom-left-radius: ${(props) => props.theme.radii[500]};\n`;\n\nContainer.displayName = \"ModalContainer\";\nContent.displayName = \"Content\";\nHeader.displayName = \"Modal.Header\";\nFooter.displayName = \"Modal.Footer\";\n","// V1 Modal - Explicit exports for optimal tree shaking\nimport Modal from \"./Modal\";\n\nexport default Modal;\nexport { Modal };\n\n// Explicit type exports\nexport type {\n TypeModalProps,\n TypeModalHeaderProps,\n TypeModalFooterProps,\n TypeModalContentProps,\n TypeModalCloseButtonProps,\n} from \"./ModalTypes\";\n","import * as React from \"react\";\nimport * as Dialog from \"@radix-ui/react-dialog\";\nimport { AnimatePresence } from \"motion/react\";\nimport {\n StyledOverlay,\n StyledMotionOverlay,\n DraggableModalContent,\n StaticModalContent,\n ModalHeader,\n ModalDescription,\n ModalRail,\n ModalAction,\n} from \"./components\";\nimport type { TypeModalProps } from \"./ModalTypes\";\nimport { getOverlayVariants, useIsMobile } from \"./MotionConfig\";\n\n// Type aliases for Dialog.Content event handlers\ntype InteractOutsideHandler = NonNullable<\n React.ComponentPropsWithoutRef<typeof Dialog.Content>[\"onInteractOutside\"]\n>;\ntype EscapeKeyDownHandler = NonNullable<\n React.ComponentPropsWithoutRef<typeof Dialog.Content>[\"onEscapeKeyDown\"]\n>;\n\n/**\n * Accessible modal dialog component built on Radix UI Dialog primitives.\n *\n * This component provides a flexible modal implementation with comprehensive accessibility\n * features, keyboard navigation, and focus management built in.\n *\n * Key capabilities:\n * - Automatic ARIA attributes and focus trapping\n * - ESC key and outside click to close\n * - Simplified API with title/subtitle props for common use cases\n * - Controlled and uncontrolled state modes\n * - Optional draggable behavior for side-by-side interaction\n * - Floating action rail for quick actions like close, expand, etc.\n * - Responsive bottom sheet layout on mobile\n *\n * @example\n * // Simple uncontrolled modal\n * <Modal\n * title=\"Delete Item\"\n * subtitle=\"This action cannot be undone\"\n * modalTrigger={<Button>Delete</Button>}\n * >\n * <ModalBody>Are you sure you want to delete this item?</ModalBody>\n * <ModalFooter\n * cancelButton={<Button>Cancel</Button>}\n * primaryButton={<Button appearance=\"destructive\">Delete</Button>}\n * />\n * </Modal>\n */\nconst Modal = (props: TypeModalProps) => {\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 data = {},\n showOverlay = true,\n actions,\n closeButtonAriaLabel = \"Close\",\n closeButtonProps,\n zIndex = 6,\n // Extract Dialog.Content event handlers\n onOpenAutoFocus,\n onCloseAutoFocus,\n onEscapeKeyDown,\n onPointerDownOutside,\n onFocusOutside,\n onInteractOutside,\n // Extract convenience boolean props\n disableOutsideClickClose = false,\n disableEscapeKeyClose = false,\n ...rest\n } = props;\n\n // Track open state for AnimatePresence\n // This state is synced via onOpenChange regardless of controlled/uncontrolled mode\n const [isOpen, setIsOpen] = React.useState(defaultOpen ?? false);\n\n const handleOpenChange = React.useCallback(\n (newOpen: boolean) => {\n // Always sync state for AnimatePresence\n setIsOpen(newOpen);\n // Call user's callback\n onOpenChange?.(newOpen);\n },\n [onOpenChange]\n );\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 // Get mobile state and appropriate overlay variants\n const isMobile = useIsMobile();\n const overlayVariants = getOverlayVariants(isMobile);\n\n // Choose the appropriate content component based on draggable prop\n const ModalContentComponent = draggable\n ? DraggableModalContent\n : StaticModalContent;\n\n // Wrap event handlers to support convenience boolean props\n const wrappedOnInteractOutside = React.useCallback<InteractOutsideHandler>(\n (e) => {\n if (disableOutsideClickClose) {\n e.preventDefault();\n }\n onInteractOutside?.(e);\n },\n [disableOutsideClickClose, onInteractOutside]\n );\n\n const wrappedOnEscapeKeyDown = React.useCallback<EscapeKeyDownHandler>(\n (e) => {\n if (disableEscapeKeyClose) {\n e.preventDefault();\n }\n onEscapeKeyDown?.(e);\n },\n [disableEscapeKeyClose, onEscapeKeyDown]\n );\n\n return (\n <Dialog.Root\n open={open}\n defaultOpen={defaultOpen}\n onOpenChange={handleOpenChange}\n modal={!draggable}\n >\n {/* Render trigger button if provided */}\n {modalTrigger && <Dialog.Trigger asChild>{modalTrigger}</Dialog.Trigger>}\n\n <Dialog.Portal forceMount>\n <AnimatePresence mode=\"wait\">\n {(open ?? isOpen) && (\n <>\n {showOverlay && (\n <Dialog.Overlay asChild>\n <StyledMotionOverlay\n $zIndex={zIndex}\n variants={overlayVariants}\n initial=\"initial\"\n animate=\"animate\"\n exit=\"exit\"\n >\n <StyledOverlay\n data-slot=\"modal-overlay\"\n data-qa-modal-overlay\n data-testid=\"modal-overlay\"\n allowInteraction={draggable}\n />\n </StyledMotionOverlay>\n </Dialog.Overlay>\n )}\n <ModalContentComponent\n label={label}\n dataAttributes={dataAttributes}\n draggable={draggable}\n zIndex={zIndex}\n rest={rest}\n dialogContentProps={{\n onOpenAutoFocus,\n onCloseAutoFocus,\n onEscapeKeyDown: wrappedOnEscapeKeyDown,\n onPointerDownOutside,\n onFocusOutside,\n onInteractOutside: wrappedOnInteractOutside,\n }}\n >\n {/* Floating actions rail - always show a close by default */}\n <ModalRail>\n <ModalAction\n actionType=\"close\"\n iconName=\"x-outline\"\n {...closeButtonProps}\n aria-label={\n (closeButtonProps as any)?.[\"aria-label\"] ??\n closeButtonAriaLabel\n }\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 && (\n <ModalDescription>{description}</ModalDescription>\n )}\n\n {/* Main content */}\n {children}\n </ModalContentComponent>\n </>\n )}\n </AnimatePresence>\n </Dialog.Portal>\n </Dialog.Root>\n );\n};\n\n/**\n * Hook for adding proper ARIA attributes to external modal triggers.\n *\n * ⚠️ **NOT RECOMMENDED** - Prefer using modalTrigger prop or ModalTrigger component.\n * Use this hook ONLY as a last resort when architectural constraints prevent keeping\n * the trigger inside the Modal component tree.\n *\n * **Important Limitations:**\n * - This hook only provides ARIA attributes (aria-haspopup, aria-expanded)\n * - Focus restoration is NOT automatic - you must manually handle it with refs\n * - Radix UI cannot track external triggers for proper accessibility\n *\n * **Why modalTrigger prop is better:**\n * - Automatic ARIA attributes\n * - Automatic focus restoration\n * - Better touch device support\n * - Follows WAI-ARIA Dialog best practices\n *\n * @param isOpen - Current open state of the modal\n * @param modalId - Optional ID of the modal element for aria-controls\n * @returns Object with ARIA attributes to spread onto trigger element\n *\n * @example\n * ```tsx\n * // Manual focus restoration required\n * const [isOpen, setIsOpen] = useState(false);\n * const triggerRef = useRef<HTMLButtonElement>(null);\n * const triggerProps = useModalTriggerProps(isOpen);\n *\n * return (\n * <>\n * <Button\n * ref={triggerRef}\n * {...triggerProps}\n * onClick={() => setIsOpen(true)}\n * >\n * Open Modal\n * </Button>\n * <Modal\n * open={isOpen}\n * onOpenChange={setIsOpen}\n * onCloseAutoFocus={(e) => {\n * e.preventDefault();\n * triggerRef.current?.focus();\n * }}\n * >\n * <ModalBody>Content</ModalBody>\n * </Modal>\n * </>\n * );\n * ```\n */\nexport function useModalTriggerProps(\n isOpen: boolean,\n modalId?: string\n): {\n \"aria-haspopup\": \"dialog\";\n \"aria-expanded\": boolean;\n \"aria-controls\"?: string;\n} {\n return React.useMemo(\n () => ({\n \"aria-haspopup\": \"dialog\" as const,\n \"aria-expanded\": isOpen,\n ...(modalId ? { \"aria-controls\": modalId } : {}),\n }),\n [isOpen, modalId]\n );\n}\n\n/**\n * Hook for managing external modal triggers with automatic focus restoration.\n *\n * ⚠️ **NOT RECOMMENDED** - Prefer using modalTrigger prop or ModalTrigger component.\n * Use this hook ONLY as a last resort when architectural constraints prevent keeping\n * the trigger inside the Modal component tree.\n *\n * This hook improves upon useModalTriggerProps by managing the trigger ref internally\n * and providing the onCloseAutoFocus callback, eliminating the need for manual\n * focus restoration boilerplate.\n *\n * **Improvements over useModalTriggerProps:**\n * - ✅ No manual ref creation\n * - ✅ Automatic focus restoration via onCloseAutoFocus callback\n * - ✅ Automatic ARIA attributes\n *\n * **Why modalTrigger prop is still better:**\n * - Better touch device support\n * - Follows WAI-ARIA Dialog best practices\n * - Less boilerplate overall\n *\n * @param modalId - Optional ID of the modal element for aria-controls\n * @returns Object with triggerRef, ARIA props, and onCloseAutoFocus callback\n *\n * @example\n * ```tsx\n * const [isOpen, setIsOpen] = useState(false);\n * const { triggerRef, triggerProps, onCloseAutoFocus } = useModalExternalTrigger();\n *\n * return (\n * <>\n * <Button\n * ref={triggerRef}\n * {...triggerProps(isOpen)}\n * onClick={() => setIsOpen(true)}\n * >\n * Open Modal\n * </Button>\n * <Modal\n * open={isOpen}\n * onOpenChange={setIsOpen}\n * onCloseAutoFocus={onCloseAutoFocus}\n * >\n * <ModalBody>Content</ModalBody>\n * </Modal>\n * </>\n * );\n * ```\n */\nexport function useModalExternalTrigger<\n T extends HTMLElement = HTMLButtonElement\n>(modalId?: string) {\n const triggerRef = React.useRef<T>(null);\n\n const triggerProps = React.useCallback(\n (isOpen: boolean) => ({\n \"aria-haspopup\": \"dialog\" as const,\n \"aria-expanded\": isOpen,\n ...(modalId ? { \"aria-controls\": modalId } : {}),\n }),\n [modalId]\n );\n\n const onCloseAutoFocus = React.useCallback((e: Event) => {\n e.preventDefault();\n triggerRef.current?.focus();\n }, []);\n\n return { triggerRef, triggerProps, onCloseAutoFocus };\n}\n\nexport default Modal;\n","import * as React from \"react\";\nimport * as Dialog from \"@radix-ui/react-dialog\";\nimport styled from \"styled-components\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport Text from \"@sproutsocial/seeds-react-text\";\nimport {\n COMMON,\n FLEXBOX,\n BORDER,\n LAYOUT,\n} from \"@sproutsocial/seeds-react-system-props\";\nimport type { TypeModalHeaderProps } from \"../ModalTypes\";\nimport { useDragContext } from \"./ModalContent\";\n\ninterface HeaderProps {\n draggable?: boolean;\n isDragging?: boolean;\n}\n\n/**\n * Base styled header component for custom modal headers.\n *\n * Use this component when you need complete control over the header layout\n * and don't want to use the slot-based ModalHeader component.\n *\n * @example\n * <ModalCustomHeader>\n * <YourCustomHeaderContent />\n * </ModalCustomHeader>\n */\nexport const ModalCustomHeader = styled(Box).withConfig({\n shouldForwardProp: (prop) => ![\"draggable\", \"isDragging\"].includes(prop),\n})<HeaderProps>`\n font-family: ${(props) => props.theme.fontFamily};\n padding: ${(props) => props.theme.space[400]};\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 ${COMMON}\n ${FLEXBOX}\n ${BORDER}\n ${LAYOUT}\n`;\n\nModalCustomHeader.displayName = \"ModalCustomHeader\";\n\n/**\n * Modal header component with title and subtitle slots.\n *\n * This component only supports slot-based rendering via title and subtitle props.\n * For custom header layouts, use ModalCustomHeader instead.\n *\n * @example\n * <ModalHeader title=\"Delete Item\" subtitle=\"This action cannot be undone\" />\n */\nexport const ModalHeader = (props: TypeModalHeaderProps) => {\n const {\n title,\n subtitle,\n titleProps = {},\n subtitleProps = {},\n ...rest\n } = props;\n\n const dragContext = useDragContext();\n const isDraggable = dragContext?.draggable ?? false;\n\n return (\n <ModalCustomHeader\n data-slot=\"modal-header\"\n data-qa-modal-header\n {...rest}\n onMouseDown={isDraggable ? dragContext?.onHeaderMouseDown : undefined}\n draggable={isDraggable}\n isDragging={dragContext?.isDragging}\n >\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 </ModalCustomHeader>\n );\n};\n\nModalHeader.displayName = \"ModalHeader\";\n","import * as React from \"react\";\nimport * as Dialog from \"@radix-ui/react-dialog\";\nimport { motion } from \"motion/react\";\nimport styled from \"styled-components\";\nimport { DisablePortalToBodyContext } from \"@sproutsocial/seeds-react-portal\";\nimport {\n BODY_PADDING,\n DEFAULT_MODAL_WIDTH,\n MOBILE_BREAKPOINT,\n RAIL_EXTRA_SPACE,\n RAIL_BUTTON_SIZE,\n RAIL_OFFSET,\n} from \"../../shared/constants\";\nimport {\n COMMON,\n FLEXBOX,\n BORDER,\n LAYOUT,\n type TypeSystemCommonProps,\n type TypeSystemBorderProps,\n type TypeSystemLayoutProps,\n type TypeSystemFlexboxProps,\n} from \"@sproutsocial/seeds-react-system-props\";\nimport { getContentVariants, useIsMobile } from \"../MotionConfig\";\n\ninterface StyledContentProps\n extends TypeSystemCommonProps,\n TypeSystemFlexboxProps,\n TypeSystemBorderProps,\n TypeSystemLayoutProps {\n isDragging?: boolean;\n draggable?: boolean;\n}\n\n// Styled motion.div wrapper that handles positioning\nconst StyledMotionWrapper = styled(motion.div)<{\n $isMobile: boolean;\n $zIndex?: number;\n}>`\n position: fixed;\n top: ${(props) => (props.$isMobile ? \"auto\" : \"50%\")};\n left: 50%;\n bottom: ${(props) => (props.$isMobile ? 0 : \"auto\")};\n z-index: ${(props) => (props.$zIndex ? props.$zIndex + 1 : 7)};\n`;\n\nexport const StyledContent = styled.div.withConfig({\n shouldForwardProp: (prop) => ![\"isDragging\", \"draggable\"].includes(prop),\n})<StyledContentProps>`\n display: flex;\n flex-direction: column;\n border-radius: ${(props) => props.theme.radii[800]};\n box-shadow: ${(props) => props.theme.shadows.high};\n filter: blur(0);\n background-color: ${(props) => props.theme.colors.container.background.base};\n color: ${(props) => props.theme.colors.text.body};\n outline: none;\n width: ${DEFAULT_MODAL_WIDTH};\n max-width: ${(props) => {\n // Account for rail space when positioned on the side (viewport > ${MOBILE_BREAKPOINT})\n // At viewport <= ${MOBILE_BREAKPOINT}, rail is above modal, so no horizontal space needed\n return `calc(100vw - ${BODY_PADDING} - ${RAIL_EXTRA_SPACE}px)`;\n }};\n max-height: calc(100vh - ${BODY_PADDING});\n\n /* Mobile styles for viewport <= ${MOBILE_BREAKPOINT} */\n @media (max-width: ${MOBILE_BREAKPOINT}) {\n /* Full viewport width - edge to edge */\n width: 100vw;\n max-width: 100vw;\n min-width: 100vw;\n\n /* Height hugs content, with increased max-height to get closer to top */\n /* Subtract space for rail + comfortable gap (44px rail + ~40px gap) */\n height: auto;\n max-height: calc(95vh - 84px);\n\n /* Adjust border radius for mobile - rounded top, flat bottom to blend with device */\n border-top-left-radius: ${(props) => props.theme.radii[800]};\n border-top-right-radius: ${(props) => props.theme.radii[800]};\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n\n /* Mobile shadow - appears to cast upward (high-reverse) */\n box-shadow: 0px -16px 32px 0px rgba(39, 51, 51, 0.24);\n }\n\n @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n height: calc(100vh - ${BODY_PADDING});\n }\n\n ${COMMON}\n ${FLEXBOX}\n ${BORDER}\n ${LAYOUT}\n`;\n\nStyledContent.displayName = \"ModalContent\";\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\nexport const DragContext = React.createContext<DragContextValue | null>(null);\n\nexport const useDragContext = () => {\n const context = React.useContext(DragContext);\n return context;\n};\n\ninterface ModalContentProps {\n children: React.ReactNode;\n label?: string;\n dataAttributes: Record<string, string>;\n draggable?: boolean;\n zIndex?: number;\n rest: any;\n dialogContentProps?: Pick<\n React.ComponentPropsWithoutRef<typeof Dialog.Content>,\n | \"onOpenAutoFocus\"\n | \"onCloseAutoFocus\"\n | \"onEscapeKeyDown\"\n | \"onPointerDownOutside\"\n | \"onFocusOutside\"\n | \"onInteractOutside\"\n >;\n}\n\n/**\n * Static modal content component for non-draggable modals.\n * This is a lightweight version that doesn't include any drag logic.\n */\nexport const StaticModalContent: React.FC<ModalContentProps> = ({\n children,\n label,\n dataAttributes,\n zIndex,\n rest,\n dialogContentProps,\n}) => {\n const isMobile = useIsMobile();\n const contentVariants = getContentVariants(isMobile, false);\n\n return (\n <DragContext.Provider value={null}>\n <Dialog.Content asChild aria-label={label} {...dialogContentProps}>\n <StyledMotionWrapper\n $isMobile={isMobile}\n $zIndex={zIndex}\n variants={contentVariants}\n initial=\"initial\"\n animate=\"animate\"\n exit=\"exit\"\n >\n <StyledContent\n data-slot=\"modal-content\"\n draggable={false}\n {...dataAttributes}\n {...rest}\n >\n <DisablePortalToBodyContext.Provider value={true}>\n {children}\n </DisablePortalToBodyContext.Provider>\n </StyledContent>\n </StyledMotionWrapper>\n </Dialog.Content>\n </DragContext.Provider>\n );\n};\n\n/**\n * Draggable modal content component with full drag-and-drop functionality.\n * Only rendered when draggable={true} to avoid unnecessary overhead.\n */\nexport const DraggableModalContent: React.FC<ModalContentProps> = ({\n children,\n label,\n dataAttributes,\n zIndex,\n rest,\n dialogContentProps,\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 const isMobile = useIsMobile();\n\n const handleHeaderMouseDown = React.useCallback((e: React.MouseEvent) => {\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 > 780px) or above (viewport <= 780px)\n const isRailOnSide = window.innerWidth > 780;\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 right side of the modal\n // Reduce maxX to prevent rail from going off-screen\n maxX = window.innerWidth - modalWidth - RAIL_EXTRA_SPACE;\n } else {\n // Rail is positioned above the modal (viewport <= 780px)\n // Account for rail height + offset at the top\n minY = RAIL_BUTTON_SIZE + RAIL_OFFSET;\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\n const dragContextValue = React.useMemo<DragContextValue>(\n () => ({\n position,\n isDragging,\n onHeaderMouseDown: handleHeaderMouseDown,\n contentRef,\n draggable: true,\n }),\n [position, isDragging, handleHeaderMouseDown]\n );\n\n // Prevent modal from closing on outside interaction when draggable\n const handleInteractOutside = React.useCallback((e: Event) => {\n e.preventDefault();\n }, []);\n\n // Get appropriate animation variants based on context\n const contentVariants = getContentVariants(isMobile, true);\n\n return (\n <DragContext.Provider value={dragContextValue}>\n <Dialog.Content\n asChild\n aria-label={label}\n {...dialogContentProps}\n onInteractOutside={handleInteractOutside}\n >\n <StyledMotionWrapper\n $isMobile={isMobile}\n $zIndex={zIndex}\n variants={contentVariants}\n initial=\"initial\"\n animate=\"animate\"\n exit=\"exit\"\n style={{\n // Apply drag offset transforms\n // For draggable modals, variants only handle opacity, so we apply transforms here\n // Combined with top: 50%, left: 50%, these create the centering + drag offset\n x: `calc(-50% + ${position.x}px)`,\n y: `calc(-50% + ${position.y}px)`,\n }}\n >\n <StyledContent\n data-slot=\"modal-content\"\n ref={contentRef}\n draggable={true}\n isDragging={isDragging}\n {...dataAttributes}\n {...rest}\n >\n {children}\n </StyledContent>\n </StyledMotionWrapper>\n </Dialog.Content>\n </DragContext.Provider>\n );\n};\n","// Shared constants for both Modal versions\n\n// Default z-index values (v1 only - v2 relies on portal stacking order)\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\n// Note: 64px doesn't have a direct space token match (space[500] = 32px, space[600] = 40px)\n// Keeping as hardcoded value for now as it's a specific layout constraint\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// Mobile breakpoint for bottom sheet layout\nexport const MOBILE_BREAKPOINT = \"780px\";\n\n// Rail button constants\nexport const RAIL_BUTTON_SIZE = 44; // px\nexport const RAIL_OFFSET = 12; // px from card edge\nexport const RAIL_GAP = 12; // px between buttons\nexport const RAIL_EXTRA_SPACE = RAIL_BUTTON_SIZE + RAIL_OFFSET; // 56px\n","import type { Variants } from \"motion/react\";\nimport { MOBILE_BREAKPOINT } from \"../shared/constants\";\n\nconst DURATION_MOBILE: number = 0.6;\nconst DURATION_DESKTOP: number = 0.3;\n\nconst desktopTransition = {\n duration: DURATION_DESKTOP,\n ease: \"easeInOut\" as const,\n};\n\nconst mobileTransition = {\n duration: DURATION_MOBILE,\n ease: \"easeInOut\" as const,\n};\n\n/**\n * Animation variants for desktop modal (content and overlay).\n * Content: Fade in with subtle scale effect for a polished entrance.\n * Overlay: Simple fade to match content timing.\n * IMPORTANT: Content includes translate(-50%, -50%) to center the modal since\n * CSS transform is removed to prevent conflicts with Motion.\n */\nexport const desktopModalVariants: Variants = {\n initial: {\n opacity: 0,\n scale: 0.95,\n x: \"-50%\",\n y: \"-50%\",\n transition: desktopTransition,\n },\n animate: {\n opacity: 1,\n scale: 1,\n x: \"-50%\",\n y: \"-50%\",\n transition: desktopTransition,\n },\n exit: {\n opacity: 0,\n scale: 0.95,\n x: \"-50%\",\n y: \"-50%\",\n transition: desktopTransition,\n },\n};\n\n/**\n * Animation variants for desktop overlay.\n * Matches desktop modal transition timing.\n */\nexport const desktopOverlayVariants: Variants = {\n initial: {\n opacity: 0,\n transition: desktopTransition,\n },\n animate: {\n opacity: 1,\n transition: desktopTransition,\n },\n exit: {\n opacity: 0,\n transition: desktopTransition,\n },\n};\n\n/**\n * Animation variants for mobile drawer (content).\n * Slides up from bottom with fade for a native-feeling drawer interaction.\n * Includes horizontal centering (translateX(-50%)) for proper positioning.\n */\nexport const mobileDrawerVariants: Variants = {\n initial: {\n opacity: 0,\n x: \"-50%\",\n y: \"100%\",\n transition: mobileTransition,\n },\n animate: {\n opacity: 1,\n x: \"-50%\",\n y: 0,\n transition: mobileTransition,\n },\n exit: {\n opacity: 0,\n x: \"-50%\",\n y: \"100%\",\n transition: mobileTransition,\n },\n};\n\n/**\n * Animation variants for mobile overlay.\n * Matches mobile drawer transition timing.\n */\nexport const mobileOverlayVariants: Variants = {\n initial: {\n opacity: 0,\n transition: mobileTransition,\n },\n animate: {\n opacity: 1,\n transition: mobileTransition,\n },\n exit: {\n opacity: 0,\n transition: mobileTransition,\n },\n};\n\n/**\n * Animation variants for draggable modals.\n * Only animates opacity, not transforms, since dragging handles positioning.\n * Uses desktop timing since draggable modals are desktop-only.\n * NOTE: Centering transforms are handled in StyledContent to work with drag positioning.\n */\nexport const draggableModalVariants: Variants = {\n initial: {\n opacity: 0,\n transition: desktopTransition,\n },\n animate: {\n opacity: 1,\n transition: desktopTransition,\n },\n exit: {\n opacity: 0,\n transition: desktopTransition,\n },\n};\n\n/**\n * Get the appropriate content variants based on context.\n */\nexport function getContentVariants(\n isMobile: boolean,\n isDraggable: boolean\n): Variants {\n if (isDraggable) {\n return draggableModalVariants;\n }\n return isMobile ? mobileDrawerVariants : desktopModalVariants;\n}\n\n/**\n * Get the appropriate overlay variants based on context.\n */\nexport function getOverlayVariants(isMobile: boolean): Variants {\n return isMobile ? mobileOverlayVariants : desktopOverlayVariants;\n}\n\n/**\n * Hook to detect mobile viewport based on MOBILE_BREAKPOINT (780px).\n * Returns true if viewport is at or below the mobile breakpoint.\n */\nexport function useIsMobile(): boolean {\n const [isMobile, setIsMobile] = React.useState(() => {\n if (typeof window === \"undefined\") return false;\n return window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT})`).matches;\n });\n\n React.useEffect(() => {\n if (typeof window === \"undefined\") return;\n\n const mediaQuery = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT})`);\n const handler = (e: MediaQueryListEvent) => setIsMobile(e.matches);\n\n // Modern browsers\n if (mediaQuery.addEventListener) {\n mediaQuery.addEventListener(\"change\", handler);\n return () => mediaQuery.removeEventListener(\"change\", handler);\n }\n // Fallback for older browsers\n else if (mediaQuery.addListener) {\n mediaQuery.addListener(handler);\n return () => mediaQuery.removeListener(handler);\n }\n }, []);\n\n return isMobile;\n}\n\n// Need to import React for the hook\nimport * as React from \"react\";\n","import * as React from \"react\";\nimport styled from \"styled-components\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport {\n COMMON,\n FLEXBOX,\n BORDER,\n LAYOUT,\n} from \"@sproutsocial/seeds-react-system-props\";\nimport { MOBILE_BREAKPOINT } from \"../../shared/constants\";\nimport type { TypeModalFooterProps } from \"../ModalTypes\";\nimport { ModalCloseWrapper } from \"./ModalCloseWrapper\";\n\n/**\n * Base styled footer component for custom modal footers.\n *\n * Use this component when you need complete control over the footer layout\n * and don't want to use the slot-based ModalFooter component.\n *\n * @example\n * <ModalCustomFooter>\n * <YourCustomFooterContent />\n * </ModalCustomFooter>\n */\nexport const ModalCustomFooter = styled(Box)`\n flex: 0 0 auto;\n font-family: ${(props) => props.theme.fontFamily};\n background-color: ${(props) => props.theme.colors.container.background.base};\n padding: ${(props) => props.theme.space[400]};\n border-bottom-right-radius: ${(props) => props.theme.radii[800]};\n border-bottom-left-radius: ${(props) => props.theme.radii[800]};\n display: flex;\n align-items: center;\n justify-content: flex-end;\n gap: ${(props) => props.theme.space[100]};\n\n /* Flat bottom corners to blend with device edge on mobile */\n @media (max-width: ${MOBILE_BREAKPOINT}) {\n border-bottom-right-radius: 0;\n border-bottom-left-radius: 0;\n }\n\n ${COMMON}\n ${FLEXBOX}\n ${BORDER}\n ${LAYOUT}\n`;\n\nModalCustomFooter.displayName = \"ModalCustomFooter\";\n\n/**\n * Modal footer component for action buttons.\n *\n * This component only supports slot-based rendering with button props.\n * For custom footer layouts, use ModalCustomFooter instead.\n *\n * Provides automatic button wrapping and layout management. Supports three button positions:\n * - primaryButton: Main action button on the right (auto-closes modal)\n * - cancelButton: Secondary action on the right (auto-closes modal)\n * - leftAction: Optional action on the left (no auto-close, for destructive actions)\n *\n * @example\n * <ModalFooter\n * cancelButton={<Button>Cancel</Button>}\n * primaryButton={<Button appearance=\"primary\">Save</Button>}\n * />\n *\n * @example\n * // With left action\n * <ModalFooter\n * leftAction={<Button appearance=\"destructive\">Delete</Button>}\n * cancelButton={<Button>Cancel</Button>}\n * primaryButton={<Button appearance=\"primary\">Save</Button>}\n * />\n */\nexport const ModalFooter = (props: TypeModalFooterProps) => {\n const { cancelButton, primaryButton, leftAction, ...rest } = props;\n\n // If no simplified props provided, return empty footer\n if (!cancelButton && !primaryButton && !leftAction) {\n return null;\n }\n\n // Build simplified API layout\n return (\n <ModalCustomFooter data-slot=\"modal-footer\" data-qa-modal-footer {...rest}>\n {/* Left action (e.g., Delete button) */}\n {leftAction ? leftAction : null}\n\n {/* Right-aligned button group (Cancel + Primary) */}\n <Box display=\"flex\" gap={300} marginLeft=\"auto\">\n {cancelButton && <ModalCloseWrapper>{cancelButton}</ModalCloseWrapper>}\n {primaryButton && (\n <ModalCloseWrapper>{primaryButton}</ModalCloseWrapper>\n )}\n </Box>\n </ModalCustomFooter>\n );\n};\n\nModalFooter.displayName = \"ModalFooter\";\n","import * as React from \"react\";\nimport * as Dialog from \"@radix-ui/react-dialog\";\n\n/**\n * Props for ModalCloseWrapper component.\n */\nexport interface ModalCloseWrapperProps {\n /** The element to wrap with close functionality */\n children: React.ReactNode;\n /** Optional click handler called before closing the modal */\n onClick?: (e: React.MouseEvent) => void;\n /** Whether to merge props into the child element (default: true) */\n asChild?: boolean;\n}\n\n/**\n * A wrapper component that closes the modal when its child is clicked.\n * Uses asChild pattern like Radix primitives - by default asChild is true.\n */\nexport const ModalCloseWrapper = (props: ModalCloseWrapperProps) => {\n const { children, onClick, asChild = true, ...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 {React.isValidElement(children)\n ? React.cloneElement(children as React.ReactElement<any>, {\n \"data-slot\": \"modal-close-wrapper\",\n \"data-qa-modal-close-wrapper\": \"\",\n ...((children as React.ReactElement<any>).props || {}),\n })\n : children}\n </Dialog.Close>\n );\n};\n\nModalCloseWrapper.displayName = \"ModalCloseWrapper\";\n","import * as React from \"react\";\nimport styled from \"styled-components\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport {\n COMMON,\n FLEXBOX,\n BORDER,\n LAYOUT,\n} from \"@sproutsocial/seeds-react-system-props\";\nimport type { TypeModalBodyProps } from \"../ModalTypes\";\n\n/**\n * Modal body component for the main content area.\n *\n * This component provides the scrollable content area of the modal with proper spacing\n * and overflow handling. It automatically takes up available space between the header\n * and footer, with vertical scrolling enabled when content exceeds available height.\n *\n * @example\n * <ModalBody>\n * <Text>Your modal content goes here.</Text>\n * <FormField label=\"Name\" />\n * </ModalBody>\n */\nconst StyledModalBody = styled(Box)`\n font-family: ${(props) => props.theme.fontFamily};\n overflow-y: auto;\n flex: 1 1 auto;\n padding: ${(props) => `0 ${props.theme.space[400]}`};\n ${(props) => props.theme.typography[300]}\n color: ${(props) => props.theme.colors.text.body};\n @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n flex-basis: 100%;\n }\n\n ${COMMON}\n ${FLEXBOX}\n ${BORDER}\n ${LAYOUT}\n`;\n\nStyledModalBody.displayName = \"ModalBody\";\n\nexport const ModalBody = React.forwardRef<HTMLDivElement, TypeModalBodyProps>(\n ({ children, ...rest }, ref) => {\n return (\n <StyledModalBody\n data-slot=\"modal-body\"\n data-qa-modal-body\n ref={ref}\n {...rest}\n >\n {children}\n </StyledModalBody>\n );\n }\n);\n\nModalBody.displayName = \"ModalBody\";\n","import * as React from \"react\";\nimport * as Dialog from \"@radix-ui/react-dialog\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport type { TypeModalDescriptionProps } from \"../ModalTypes\";\n\n/**\n * Modal description component that wraps content with accessible Dialog.Description.\n *\n * This component automatically connects description text to the modal dialog via ARIA attributes,\n * ensuring screen readers announce the description when the modal opens. Use this for additional\n * context beyond the title that helps users understand the modal's purpose.\n *\n * @example\n * <ModalDescription>\n * Deleting this item will permanently remove it from your account.\n * </ModalDescription>\n */\nexport const ModalDescription = React.forwardRef<\n HTMLDivElement,\n TypeModalDescriptionProps\n>(({ children, descriptionProps = {}, ...rest }, ref) => {\n return (\n <Dialog.Description asChild {...descriptionProps}>\n <Box\n data-slot=\"modal-description\"\n data-qa-modal-description\n ref={ref}\n {...rest}\n >\n {children}\n </Box>\n </Dialog.Description>\n );\n});\n\nModalDescription.displayName = \"ModalDescription\";\n","import * as React from \"react\";\nimport styled from \"styled-components\";\nimport type { TypeModalRailProps } from \"../ModalTypes\";\nimport {\n MOBILE_BREAKPOINT,\n RAIL_BUTTON_SIZE,\n RAIL_OFFSET,\n RAIL_GAP,\n} from \"../../shared/constants\";\n\n/**\n * Container for floating action buttons displayed alongside the modal.\n *\n * The rail provides a vertical column of action buttons positioned to the right of the modal\n * on desktop, and switches to a horizontal row positioned above the modal on mobile devices.\n * Always includes a close button by default, with support for additional custom actions.\n *\n * Actions are rendered through the Modal's `actions` prop or by directly including\n * ModalAction components as children.\n *\n * @example\n * <ModalRail>\n * <ModalAction actionType=\"close\" aria-label=\"Close\" iconName=\"x-outline\" />\n * <ModalAction aria-label=\"Expand\" iconName=\"arrows-pointing-out\" onClick={handleExpand} />\n * </ModalRail>\n */\nconst Rail = styled.div`\n position: absolute;\n top: ${RAIL_OFFSET}px;\n right: calc(-1 * (${RAIL_BUTTON_SIZE}px + ${RAIL_OFFSET}px));\n display: flex;\n flex-direction: column;\n gap: ${RAIL_GAP}px;\n z-index: 1;\n\n @media (max-width: ${MOBILE_BREAKPOINT}) {\n /* Move rail above the modal on the right side */\n top: auto;\n bottom: calc(100% + ${RAIL_OFFSET}px);\n right: ${RAIL_OFFSET}px;\n left: auto;\n /* Change to horizontal layout with reversed order */\n flex-direction: row-reverse;\n }\n`;\n\nexport const ModalRail: React.FC<TypeModalRailProps> = ({ children }) => {\n return (\n <Rail\n data-slot=\"modal-rail\"\n data-qa-modal-rail\n aria-label=\"Modal quick actions\"\n >\n {children}\n </Rail>\n );\n};\n\nModalRail.displayName = \"ModalRail\";\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 { focusRing } from \"@sproutsocial/seeds-react-mixins\";\nimport type { TypeModalActionProps } from \"../ModalTypes\";\nimport { RAIL_BUTTON_SIZE } from \"../../shared/constants\";\n\n/**\n * Action button component for the modal's floating rail.\n *\n * These buttons appear in the vertical rail next to the modal (horizontal on mobile)\n * and provide quick access to common actions. Supports two action types:\n * - \"close\": Automatically closes the modal when clicked\n * - \"button\" (default): Custom action with your own onClick handler\n *\n * @example\n * // Close button (built-in functionality)\n * <ModalAction\n * actionType=\"close\"\n * aria-label=\"Close\"\n * iconName=\"x-outline\"\n * />\n *\n * @example\n * // Custom action button\n * <ModalAction\n * aria-label=\"Expand to fullscreen\"\n * iconName=\"arrows-pointing-out\"\n * onClick={() => console.log('expand')}\n * />\n */\n\nconst RailButton = styled.button`\n width: ${RAIL_BUTTON_SIZE}px;\n height: ${(props) => props.theme.space[500]};\n display: inline-grid;\n place-items: center;\n border-radius: ${(props) => props.theme.radii.outer};\n border: none;\n background: ${(props) => props.theme.colors.button.overlay.background.base};\n color: ${(props) => props.theme.colors.button.overlay.text.base};\n cursor: pointer;\n outline: none;\n transition: all ${(props) => props.theme.duration.fast}\n ${(props) => props.theme.easing.ease_inout};\n\n &:hover {\n background: ${(props) =>\n props.theme.colors.button.overlay.background.hover};\n }\n\n &:hover,\n &:active {\n transform: none;\n }\n\n &:focus-visible {\n ${focusRing}\n }\n\n &:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n }\n`;\n\nexport const ModalAction: React.FC<TypeModalActionProps> = ({\n \"aria-label\": ariaLabel,\n iconName,\n disabled,\n actionType,\n onClick,\n ...rest\n}) => {\n const button = (\n <RailButton\n data-slot=\"modal-action\"\n data-qa-modal-action\n data-qa-modal-action-type={actionType || \"button\"}\n aria-label={ariaLabel}\n title={ariaLabel}\n disabled={disabled}\n onClick={onClick}\n {...rest}\n >\n {iconName && <Icon name={iconName} size=\"small\" aria-label={ariaLabel} />}\n </RailButton>\n );\n\n if (actionType === \"close\") {\n return <Dialog.Close asChild>{button}</Dialog.Close>;\n }\n\n return button;\n};\n\nModalAction.displayName = \"ModalAction\";\n","import { css } from \"styled-components\";\nimport { theme } from \"@sproutsocial/seeds-react-theme\";\n\nexport const svgToDataURL = (svgStr: string) => {\n const encoded = encodeURIComponent(svgStr)\n .replace(/'/g, \"%27\")\n .replace(/\"/g, \"%22\");\n\n const header = \"data:image/svg+xml,\";\n const dataUrl = header + encoded;\n\n return dataUrl;\n};\n\nexport const visuallyHidden = css`\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0 0 0 0);\n border: 0;\n`;\n\nexport const focusRing = css`\n box-shadow: 0 0 0 1px ${theme.colors.button.primary.background.base},\n 0 0px 0px 4px\n color-mix(\n in srgb,\n ${theme.colors.button.primary.background.base},\n transparent 70%\n );\n outline: none;\n\n &::-moz-focus-inner {\n border: 0;\n }\n`;\n\nexport const pill = css`\n min-width: ${theme.space[600]};\n min-height: ${theme.space[600]};\n padding: ${theme.space[300]};\n border-radius: ${theme.radii.pill};\n`;\n\nexport const disabled = css`\n opacity: 0.4;\n pointer-events: none;\n`;\n","import * as React from \"react\";\nimport { Button } from \"@sproutsocial/seeds-react-button\";\nimport type { TypeButtonProps } from \"@sproutsocial/seeds-react-button\";\n\n/**\n * Props for ModalExternalTrigger component.\n */\nexport interface ModalExternalTriggerProps\n extends Omit<TypeButtonProps, \"onClick\"> {\n /** Callback when button is clicked to trigger modal open */\n onTrigger: () => void;\n /** Whether the modal is currently open (for ARIA expanded state) */\n isOpen: boolean;\n /** Optional modal ID for aria-controls attribute */\n modalId?: string;\n /** Optional onClick handler (called before onTrigger) */\n onClick?: React.MouseEventHandler<HTMLButtonElement>;\n}\n\n/**\n * A Button component pre-configured for triggering modals from outside the Modal component tree.\n *\n * ⚠️ **NOT RECOMMENDED** - Prefer using modalTrigger prop or ModalTrigger component.\n * Use this component ONLY as a last resort when architectural constraints prevent keeping\n * the trigger inside the Modal component tree.\n *\n * This component wraps the Seeds Button with automatic ARIA attributes for modal triggers.\n * However, focus restoration still requires manual handling via onCloseAutoFocus callback\n * due to Radix UI's architectural limitations with external triggers.\n *\n * **Why modalTrigger prop is better:**\n * - Automatic ARIA attributes\n * - Automatic focus restoration (no onCloseAutoFocus needed)\n * - Better touch device support\n * - Follows WAI-ARIA Dialog best practices\n *\n * **When to use ModalExternalTrigger:**\n * - Trigger must live outside Modal component tree (e.g., in a page header)\n * - Using Seeds Button as the trigger\n * - Want automatic ARIA attributes without manual hook usage\n *\n * **Usage pattern with focus restoration:**\n * You must still handle focus restoration manually by passing a ref and implementing\n * onCloseAutoFocus on the Modal component.\n *\n * @example\n * ```tsx\n * const [isOpen, setIsOpen] = useState(false);\n * const triggerRef = useRef<HTMLButtonElement>(null);\n *\n * return (\n * <>\n * <ModalExternalTrigger\n * ref={triggerRef}\n * isOpen={isOpen}\n * onTrigger={() => setIsOpen(true)}\n * appearance=\"primary\"\n * >\n * Open Modal\n * </ModalExternalTrigger>\n *\n * <Modal\n * open={isOpen}\n * onOpenChange={setIsOpen}\n * onCloseAutoFocus={(e) => {\n * e.preventDefault();\n * triggerRef.current?.focus();\n * }}\n * >\n * <ModalBody>Content</ModalBody>\n * </Modal>\n * </>\n * );\n * ```\n *\n * @see useModalExternalTrigger - Hook alternative for non-Button triggers\n */\nexport const ModalExternalTrigger = React.forwardRef<\n HTMLButtonElement,\n ModalExternalTriggerProps\n>(({ isOpen, onTrigger, modalId, onClick, ...buttonProps }, ref) => {\n const handleClick = React.useCallback(\n (e: React.MouseEvent<HTMLButtonElement>) => {\n onClick?.(e);\n if (!e.defaultPrevented) {\n onTrigger();\n }\n },\n [onClick, onTrigger]\n );\n\n return (\n <Button\n ref={ref}\n onClick={handleClick}\n aria-haspopup=\"dialog\"\n aria-expanded={isOpen}\n aria-controls={modalId}\n {...buttonProps}\n />\n );\n});\n\nModalExternalTrigger.displayName = \"ModalExternalTrigger\";\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport { motion } from \"motion/react\";\nimport {\n COMMON,\n BORDER,\n LAYOUT,\n POSITION,\n type TypeSystemCommonProps,\n type TypeSystemBorderProps,\n type TypeSystemLayoutProps,\n type TypeSystemPositionProps,\n} from \"@sproutsocial/seeds-react-system-props\";\n\ninterface StyledOverlayProps\n extends TypeSystemCommonProps,\n TypeSystemBorderProps,\n TypeSystemLayoutProps,\n TypeSystemPositionProps {\n allowInteraction?: boolean;\n}\n\n// Styled motion.div for the overlay wrapper\nexport const StyledMotionOverlay = styled(motion.div)<{ $zIndex?: number }>`\n position: fixed;\n top: 0px;\n left: 0px;\n right: 0px;\n bottom: 0px;\n z-index: ${(props) => props.$zIndex ?? 6};\n`;\n\nexport const StyledOverlay = styled.div.withConfig({\n shouldForwardProp: (prop) => ![\"allowInteraction\"].includes(prop),\n})<StyledOverlayProps>`\n width: 100%;\n height: 100%;\n background-color: ${(props) => props.theme.colors.overlay.background.base};\n\n /* Allow clicking through overlay when modal is draggable */\n ${(props) =>\n props.allowInteraction &&\n `\n pointer-events: none;\n `}\n\n ${COMMON}\n ${BORDER}\n ${LAYOUT}\n ${POSITION}\n`;\n\nStyledOverlay.displayName = \"ModalOverlay\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAAAA;AAAA,EAAA,mBAAAC;AAAA,EAAA;AAAA,iBAAAC;AAAA,EAAA;AAAA;AAAA;;;ACAA,IAAAC,SAAuB;AACvB,IAAAC,gBAA2B;AAC3B,IAAAC,0BAAgB;AAChB,gCAAmB;AACnB,8BAAiB;AACjB,8BAAiB;;;ACLjB,mBAAkB;AAClB,+BAA0C;AAC1C,2BAA8B;AAC9B,yBAAuB;AACvB,sCAAuB;AACvB,6BAA6C;AA0BzC;AAvBJ,IAAM,eAAe;AAErB,IAAM,oBAAoB,CAAC;AAAA,EACzB,YAAY;AAAA,EACZ,GAAG;AACL,MAGM;AAIJ,QAAM,mBAAmB,UACtB,MAAM,GAAG,EACT,IAAI,CAACC,eAAc,GAAGA,UAAS,IAAIA,UAAS,WAAW,EACvD,KAAK,GAAG;AAEX,QAAM,mBAAmB,UACtB,MAAM,GAAG,EACT,IAAI,CAACA,eAAc,GAAGA,UAAS,IAAIA,UAAS,WAAW,EACvD,KAAK,GAAG;AAEX,SACE;AAAA,IAAC,mBAAAC;AAAA,IAAA;AAAA,MACC,iBAAiB;AAAA,MACjB,WAAW;AAAA,MACX;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;AAEO,IAAM,OAAO;AAAA;AAAA;AAAA;AAAA;AAMb,IAAM,gBAAY,yBAAAC,SAAO,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAUzB,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,WAAW,IAAI;AAAA;AAAA;AAAA,0BAGnD,CAAC,UAAU,MAAM,MAAM,SAAS,MAAM;AAAA,QACxD,CAAC,UAAU,MAAM,MAAM,OAAO,UAAU;AAAA;AAAA,MAE1C,2BAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAaM,CAAC,UAAU,MAAM,MAAM,OAAO,UAAU,WAAW,IAAI;AAAA,qBACpD,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA,kBACpC,CAAC,UAAU,MAAM,MAAM,QAAQ,MAAM;AAAA;AAAA,aAE1C,CAAC,UAAU,MAAM,MAAM,OAAO,KAAK,IAAI;AAAA;AAAA;AAAA,8BAGtB,YAAY;AAAA,+BACX,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,6BAMd,YAAY;AAAA;AAAA;AAAA,MAGnC,0BAAK;AAAA;AAAA,MAEL,sCAAM;AAAA;AAAA;AAIL,IAAM,cAAU,yBAAAA,SAAO,uBAAAC,OAAG;AAAA,iBAChB,CAAC,UAAU,MAAM,MAAM,UAAU;AAAA;AAAA;AAAA;AAAA,aAIrC,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA,MACxC,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAOhC,IAAM,sBAAkB,yBAAAD,SAAO,uBAAAC,OAAG;AAAA,iBACxB,CAAC,UAAU,MAAM,MAAM,UAAU;AAAA,aACrC,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA,MACxC,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA;AAGhC,IAAM,aAAS,yBAAAD,SAAO,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA,yBAKnB,CAAC,UAAU,MAAM,MAAM,aAAa,GAAG,CAAC;AAAA,yBACxC,CAAC,UACtB,MAAM,WAAW,MAAM,MAAM,OAAO,UAAU,OAAO,OAAO,aAAa;AAAA;AAAA;AAItE,IAAM,aAAS,yBAAAA,SAAO,uBAAAC,OAAG;AAAA;AAAA,iBAEf,CAAC,UAAU,MAAM,MAAM,UAAU;AAAA,aACrC,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA,MACxC,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA,gCACP,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA,+BAClC,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA;AAGhE,UAAU,cAAc;AACxB,QAAQ,cAAc;AACtB,OAAO,cAAc;AACrB,OAAO,cAAc;;;AD7GX,IAAAC,sBAAA;AAVV,IAAM,eAAqB,qBAAgC,CAAC,CAAC;AAE7D,IAAM,cAAc,CAAC,UAAgC;AACnD,QAAM,EAAE,OAAO,UAAU,UAAU,UAAU,GAAG,KAAK,IAAI;AACzD,SACE,6CAAC,UAAO,UAAU,SAAS,YAAY,UAAW,GAAG,MAClD,qBACC,WAEA,8CAAO,iBAAN,EACC;AAAA,kDAAC,wBAAAC,SAAA,EACE;AAAA,eACC,6CAAC,wBAAAC,SAAA,EAAK,IAAG,MAAK,UAAU,KAAK,YAAW,YACrC,iBACH;AAAA,MAED,YACC,6CAAC,wBAAAA,SAAA,EAAK,IAAG,OAAM,UAAU,KACtB,oBACH;AAAA,OAEJ;AAAA,IACA,6CAAC,wBAAAD,SAAA,EAAI,SAAQ,QAAO,YAAW,UAAS,mBAAgB,YACtD,uDAAC,oBAAiB,IAAI,KAAK,GAC7B;AAAA,KACF,GAEJ;AAEJ;AAEA,IAAM,mBAAmB,CAAC,UAAqC;AAC7D,QAAM,EAAE,SAAS,iBAAiB,QAAI,0BAAW,YAAY;AAC7D,MAAI,CAAC,QAAS,QAAO;AACrB,SACE,6CAAC,0BAAAE,SAAA,EAAO,SAAS,SAAU,GAAG,OAC5B,uDAAC,wBAAAC,SAAA,EAAK,MAAK,aAAY,WAAW,kBAAkB,GACtD;AAEJ;AAEA,IAAM,cAAc,CAAC;AAAA,EACnB,KAAK;AAAA,EACL,GAAG;AACL,MACE;AAAA,EAAC;AAAA;AAAA,IACC;AAAA,IACA,WAAW;AAAA,IACX,aAAY;AAAA,IACX,GAAG;AAAA;AACN;AAGF,IAAM,eAAqB;AAAA,EACzB,CAAC,EAAE,UAAU,GAAG,KAAK,GAA0B,QAAQ;AACrD,UAAM,EAAE,MAAM,QAAI,0BAAW,YAAY;AACzC,WACE,6CAAC,WAAQ,iBAAa,MAAC,iBAAe,OAAO,KAAW,GAAG,MACxD,UACH;AAAA,EAEJ;AACF;AAKA,IAAM,QAAQ,CAAC,UAA0B;AACvC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAAC,SAAQ;AAAA,IACR,QAAAC,UAAS;AAAA,IACT,OAAO,CAAC;AAAA,IACR,GAAG;AAAA,EACL,IAAI;AAEJ,QAAM,cAAc,QAAQ,OAAO;AACnC,QAAM,aACJ,sBAAsB,WACjB,SAAS,cAAc,kBAAkB,IAC1C;AAEN,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,aAAa,CAAC,CAAC;AAAA,MACf;AAAA,MACA,cAAc;AAAA,MAEd,gBAAgB,YAAY,MAAM;AAAA,MAAC;AAAA,MACnC,wBAAwB;AAAA,MACxB,2BAA2B;AAAA,MAC3B,kBAAkB;AAAA,MAClB,6BAA6B;AAAA,MAC7B,gBAAgB;AAAA,MAChB,MAAK;AAAA,MACL,OAAOD;AAAA,MACP,QAAQC;AAAA,MACR,MAAM;AAAA,QACJ,YAAY;AAAA,QACZ,mBAAmB;AAAA,QACnB,GAAG;AAAA,MACL;AAAA,MACC,GAAG;AAAA,MAEJ,wDAAO,iBAAN,EACC;AAAA,qDAAC,QAAK;AAAA,QAEN;AAAA,UAAC,aAAa;AAAA,UAAb;AAAA,YACC,OAAO;AAAA,cACL;AAAA,cACA;AAAA,cACA;AAAA,YACF;AAAA,YAEC;AAAA;AAAA,QACH;AAAA,SACF;AAAA;AAAA,EACF;AAEJ;AAEA,YAAY,cAAc;AAC1B,YAAY,cAAc;AAC1B,aAAa,cAAc;AAC3B,iBAAiB,cAAc;AAE/B,MAAM,SAAS;AACf,MAAM,SAAS;AACf,MAAM,UAAU;AAChB,MAAM,cAAc;AAEpB,IAAO,gBAAQ;;;AE3Jf,IAAO,aAAQ;;;ACHf,IAAAC,UAAuB;AACvB,IAAAC,UAAwB;AACxB,IAAAC,gBAAgC;;;ACFhC,IAAAC,SAAuB;AACvB,IAAAC,UAAwB;AACxB,IAAAC,4BAAmB;AACnB,IAAAC,0BAAgB;AAChB,IAAAC,2BAAiB;AACjB,IAAAC,mCAKO;;;ACVP,IAAAC,SAAuB;AACvB,aAAwB;AACxB,IAAAC,gBAAuB;AACvB,IAAAC,4BAAmB;AACnB,gCAA2C;;;ACGpC,IAAM,sBAAsB;AAO5B,IAAMC,gBAAe;AAWrB,IAAM,oBAAoB;AAG1B,IAAM,mBAAmB;AACzB,IAAM,cAAc;AACpB,IAAM,WAAW;AACjB,IAAM,mBAAmB,mBAAmB;;;ADlBnD,IAAAC,mCASO;;;AEkKP,IAAAC,SAAuB;AArLvB,IAAM,kBAA0B;AAChC,IAAM,mBAA2B;AAEjC,IAAM,oBAAoB;AAAA,EACxB,UAAU;AAAA,EACV,MAAM;AACR;AAEA,IAAM,mBAAmB;AAAA,EACvB,UAAU;AAAA,EACV,MAAM;AACR;AASO,IAAM,uBAAiC;AAAA,EAC5C,SAAS;AAAA,IACP,SAAS;AAAA,IACT,OAAO;AAAA,IACP,GAAG;AAAA,IACH,GAAG;AAAA,IACH,YAAY;AAAA,EACd;AAAA,EACA,SAAS;AAAA,IACP,SAAS;AAAA,IACT,OAAO;AAAA,IACP,GAAG;AAAA,IACH,GAAG;AAAA,IACH,YAAY;AAAA,EACd;AAAA,EACA,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,OAAO;AAAA,IACP,GAAG;AAAA,IACH,GAAG;AAAA,IACH,YAAY;AAAA,EACd;AACF;AAMO,IAAM,yBAAmC;AAAA,EAC9C,SAAS;AAAA,IACP,SAAS;AAAA,IACT,YAAY;AAAA,EACd;AAAA,EACA,SAAS;AAAA,IACP,SAAS;AAAA,IACT,YAAY;AAAA,EACd;AAAA,EACA,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,YAAY;AAAA,EACd;AACF;AAOO,IAAM,uBAAiC;AAAA,EAC5C,SAAS;AAAA,IACP,SAAS;AAAA,IACT,GAAG;AAAA,IACH,GAAG;AAAA,IACH,YAAY;AAAA,EACd;AAAA,EACA,SAAS;AAAA,IACP,SAAS;AAAA,IACT,GAAG;AAAA,IACH,GAAG;AAAA,IACH,YAAY;AAAA,EACd;AAAA,EACA,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,GAAG;AAAA,IACH,GAAG;AAAA,IACH,YAAY;AAAA,EACd;AACF;AAMO,IAAM,wBAAkC;AAAA,EAC7C,SAAS;AAAA,IACP,SAAS;AAAA,IACT,YAAY;AAAA,EACd;AAAA,EACA,SAAS;AAAA,IACP,SAAS;AAAA,IACT,YAAY;AAAA,EACd;AAAA,EACA,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,YAAY;AAAA,EACd;AACF;AAQO,IAAM,yBAAmC;AAAA,EAC9C,SAAS;AAAA,IACP,SAAS;AAAA,IACT,YAAY;AAAA,EACd;AAAA,EACA,SAAS;AAAA,IACP,SAAS;AAAA,IACT,YAAY;AAAA,EACd;AAAA,EACA,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,YAAY;AAAA,EACd;AACF;AAKO,SAAS,mBACd,UACA,aACU;AACV,MAAI,aAAa;AACf,WAAO;AAAA,EACT;AACA,SAAO,WAAW,uBAAuB;AAC3C;AAKO,SAAS,mBAAmB,UAA6B;AAC9D,SAAO,WAAW,wBAAwB;AAC5C;AAMO,SAAS,cAAuB;AACrC,QAAM,CAAC,UAAU,WAAW,IAAU,gBAAS,MAAM;AACnD,QAAI,OAAO,WAAW,YAAa,QAAO;AAC1C,WAAO,OAAO,WAAW,eAAe,iBAAiB,GAAG,EAAE;AAAA,EAChE,CAAC;AAED,EAAM,iBAAU,MAAM;AACpB,QAAI,OAAO,WAAW,YAAa;AAEnC,UAAM,aAAa,OAAO,WAAW,eAAe,iBAAiB,GAAG;AACxE,UAAM,UAAU,CAAC,MAA2B,YAAY,EAAE,OAAO;AAGjE,QAAI,WAAW,kBAAkB;AAC/B,iBAAW,iBAAiB,UAAU,OAAO;AAC7C,aAAO,MAAM,WAAW,oBAAoB,UAAU,OAAO;AAAA,IAC/D,WAES,WAAW,aAAa;AAC/B,iBAAW,YAAY,OAAO;AAC9B,aAAO,MAAM,WAAW,eAAe,OAAO;AAAA,IAChD;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,SAAO;AACT;;;AFhBY,IAAAC,sBAAA;AAlIZ,IAAM,0BAAsB,0BAAAC,SAAO,qBAAO,GAAG;AAAA;AAAA,SAKpC,CAAC,UAAW,MAAM,YAAY,SAAS,KAAM;AAAA;AAAA,YAE1C,CAAC,UAAW,MAAM,YAAY,IAAI,MAAO;AAAA,aACxC,CAAC,UAAW,MAAM,UAAU,MAAM,UAAU,IAAI,CAAE;AAAA;AAGxD,IAAM,gBAAgB,0BAAAA,QAAO,IAAI,WAAW;AAAA,EACjD,mBAAmB,CAAC,SAAS,CAAC,CAAC,cAAc,WAAW,EAAE,SAAS,IAAI;AACzE,CAAC;AAAA;AAAA;AAAA,mBAGkB,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA,gBACpC,CAAC,UAAU,MAAM,MAAM,QAAQ,IAAI;AAAA;AAAA,sBAE7B,CAAC,UAAU,MAAM,MAAM,OAAO,UAAU,WAAW,IAAI;AAAA,WAClE,CAAC,UAAU,MAAM,MAAM,OAAO,KAAK,IAAI;AAAA;AAAA,WAEvC,mBAAmB;AAAA,eACf,CAAC,UAAU;AAGtB,SAAO,gBAAgBC,aAAY,MAAM,gBAAgB;AAC3D,CAAC;AAAA,6BAC0BA,aAAY;AAAA;AAAA,qCAEJ,iBAAiB;AAAA,uBAC/B,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,8BAYV,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA,+BAChC,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,2BASrCA,aAAY;AAAA;AAAA;AAAA,IAGnC,uCAAM;AAAA,IACN,wCAAO;AAAA,IACP,uCAAM;AAAA,IACN,uCAAM;AAAA;AAGV,cAAc,cAAc;AAWrB,IAAM,cAAoB,qBAAuC,IAAI;AAErE,IAAM,iBAAiB,MAAM;AAClC,QAAM,UAAgB,kBAAW,WAAW;AAC5C,SAAO;AACT;AAwBO,IAAM,qBAAkD,CAAC;AAAA,EAC9D;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAAC;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,WAAW,YAAY;AAC7B,QAAM,kBAAkB,mBAAmB,UAAU,KAAK;AAE1D,SACE,6CAAC,YAAY,UAAZ,EAAqB,OAAO,MAC3B,uDAAQ,gBAAP,EAAe,SAAO,MAAC,cAAY,OAAQ,GAAG,oBAC7C;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,MACX,SAASA;AAAA,MACT,UAAU;AAAA,MACV,SAAQ;AAAA,MACR,SAAQ;AAAA,MACR,MAAK;AAAA,MAEL;AAAA,QAAC;AAAA;AAAA,UACC,aAAU;AAAA,UACV,WAAW;AAAA,UACV,GAAG;AAAA,UACH,GAAG;AAAA,UAEJ,uDAAC,qDAA2B,UAA3B,EAAoC,OAAO,MACzC,UACH;AAAA;AAAA,MACF;AAAA;AAAA,EACF,GACF,GACF;AAEJ;AAMO,IAAM,wBAAqD,CAAC;AAAA,EACjE;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAAA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,CAAC,UAAU,WAAW,IAAU,gBAAS,EAAE,GAAG,GAAG,GAAG,EAAE,CAAC;AAC7D,QAAM,CAAC,YAAY,aAAa,IAAU,gBAAS,KAAK;AACxD,QAAM,aAAmB,cAAuB,IAAI;AACpD,QAAM,WAAW,YAAY;AAE7B,QAAM,wBAA8B,mBAAY,CAAC,MAAwB;AAEvE,UAAM,SAAS,EAAE;AACjB,QACE,OAAO,YAAY,YACnB,OAAO,YAAY,WACnB,OAAO,QAAQ,QAAQ,GACvB;AACA;AAAA,IACF;AAEA,MAAE,eAAe;AACjB,kBAAc,IAAI;AAElB,UAAM,OAAO,WAAW,SAAS,sBAAsB;AACvD,QAAI,CAAC,KAAM;AAGX,UAAM,UAAU,EAAE,UAAU,KAAK;AACjC,UAAM,UAAU,EAAE,UAAU,KAAK;AAEjC,UAAM,kBAAkB,CAACC,OAAkB;AACzC,MAAAA,GAAE,eAAe;AAGjB,YAAM,OAAOA,GAAE,UAAU;AACzB,YAAM,OAAOA,GAAE,UAAU;AAGzB,YAAM,eAAe,OAAO,aAAa;AAGzC,YAAM,aAAa,KAAK;AACxB,YAAM,cAAc,KAAK;AAGzB,UAAI,OAAO,OAAO,aAAa;AAC/B,UAAI,OAAO;AACX,UAAI,OAAO,OAAO,cAAc;AAChC,UAAI,OAAO;AAEX,UAAI,cAAc;AAGhB,eAAO,OAAO,aAAa,aAAa;AAAA,MAC1C,OAAO;AAGL,eAAO,mBAAmB;AAAA,MAC5B;AAEA,YAAM,eAAe,KAAK,IAAI,MAAM,KAAK,IAAI,MAAM,IAAI,CAAC;AACxD,YAAM,eAAe,KAAK,IAAI,MAAM,KAAK,IAAI,MAAM,IAAI,CAAC;AAGxD,YAAM,UAAU,OAAO,aAAa,IAAI,aAAa;AACrD,YAAM,UAAU,OAAO,cAAc,IAAI,cAAc;AAEvD,kBAAY;AAAA,QACV,GAAG,eAAe;AAAA,QAClB,GAAG,eAAe;AAAA,MACpB,CAAC;AAAA,IACH;AAEA,UAAM,gBAAgB,MAAM;AAC1B,oBAAc,KAAK;AACnB,eAAS,oBAAoB,aAAa,eAAe;AACzD,eAAS,oBAAoB,WAAW,aAAa;AAAA,IACvD;AAEA,aAAS,iBAAiB,aAAa,eAAe;AACtD,aAAS,iBAAiB,WAAW,aAAa;AAAA,EACpD,GAAG,CAAC,CAAC;AAEL,QAAM,mBAAyB;AAAA,IAC7B,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA,mBAAmB;AAAA,MACnB;AAAA,MACA,WAAW;AAAA,IACb;AAAA,IACA,CAAC,UAAU,YAAY,qBAAqB;AAAA,EAC9C;AAGA,QAAM,wBAA8B,mBAAY,CAAC,MAAa;AAC5D,MAAE,eAAe;AAAA,EACnB,GAAG,CAAC,CAAC;AAGL,QAAM,kBAAkB,mBAAmB,UAAU,IAAI;AAEzD,SACE,6CAAC,YAAY,UAAZ,EAAqB,OAAO,kBAC3B;AAAA,IAAQ;AAAA,IAAP;AAAA,MACC,SAAO;AAAA,MACP,cAAY;AAAA,MACX,GAAG;AAAA,MACJ,mBAAmB;AAAA,MAEnB;AAAA,QAAC;AAAA;AAAA,UACC,WAAW;AAAA,UACX,SAASD;AAAA,UACT,UAAU;AAAA,UACV,SAAQ;AAAA,UACR,SAAQ;AAAA,UACR,MAAK;AAAA,UACL,OAAO;AAAA;AAAA;AAAA;AAAA,YAIL,GAAG,eAAe,SAAS,CAAC;AAAA,YAC5B,GAAG,eAAe,SAAS,CAAC;AAAA,UAC9B;AAAA,UAEA;AAAA,YAAC;AAAA;AAAA,cACC,aAAU;AAAA,cACV,KAAK;AAAA,cACL,WAAW;AAAA,cACX;AAAA,cACC,GAAG;AAAA,cACH,GAAG;AAAA,cAEH;AAAA;AAAA,UACH;AAAA;AAAA,MACF;AAAA;AAAA,EACF,GACF;AAEJ;;;AD5OM,IAAAE,sBAAA;AAxDC,IAAM,wBAAoB,0BAAAC,SAAO,wBAAAC,OAAG,EAAE,WAAW;AAAA,EACtD,mBAAmB,CAAC,SAAS,CAAC,CAAC,aAAa,YAAY,EAAE,SAAS,IAAI;AACzE,CAAC;AAAA,iBACgB,CAAC,UAAU,MAAM,MAAM,UAAU;AAAA,aACrC,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAO1C,CAAC,UACD,MAAM,aACN;AAAA,cACU,MAAM,aAAa,aAAa,MAAM;AAAA;AAAA,GAEjD;AAAA;AAAA,IAEC,uCAAM;AAAA,IACN,wCAAO;AAAA,IACP,uCAAM;AAAA,IACN,uCAAM;AAAA;AAGV,kBAAkB,cAAc;AAWzB,IAAMC,eAAc,CAAC,UAAgC;AAC1D,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,aAAa,CAAC;AAAA,IACd,gBAAgB,CAAC;AAAA,IACjB,GAAG;AAAA,EACL,IAAI;AAEJ,QAAM,cAAc,eAAe;AACnC,QAAM,cAAc,aAAa,aAAa;AAE9C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,wBAAoB;AAAA,MACnB,GAAG;AAAA,MACJ,aAAa,cAAc,aAAa,oBAAoB;AAAA,MAC5D,WAAW;AAAA,MACX,YAAY,aAAa;AAAA,MAEzB,wDAAC,wBAAAD,SAAA,EACE;AAAA,iBACC,6CAAQ,eAAP,EAAa,SAAO,MAAE,GAAG,YACxB,uDAAC,yBAAAE,QAAK,UAAL,EAAe,iBAAM,GACxB;AAAA,QAED,YACC,6CAAQ,qBAAP,EAAmB,SAAO,MAAE,GAAG,eAC9B,uDAAC,yBAAAA,SAAA,EAAK,IAAG,OAAM,UAAU,KACtB,oBACH,GACF;AAAA,SAEJ;AAAA;AAAA,EACF;AAEJ;AAEAD,aAAY,cAAc;;;AIxG1B,IAAAE,SAAuB;AACvB,IAAAC,4BAAmB;AACnB,IAAAC,0BAAgB;AAChB,IAAAC,mCAKO;;;ACRP,IAAAC,SAAuB;AACvB,IAAAC,UAAwB;AA2BpB,IAAAC,sBAAA;AATG,IAAM,oBAAoB,CAAC,UAAkC;AAClE,QAAM,EAAE,UAAU,SAAS,UAAU,MAAM,GAAG,KAAK,IAAI;AAEvD,QAAM,cAAc,CAAC,MAAwB;AAC3C,cAAU,CAAC;AAAA,EAEb;AAEA,SACE,6CAAQ,eAAP,EAAa,SAAkB,SAAS,aAAc,GAAG,MACvD,UAAM,sBAAe,QAAQ,IACpB,oBAAa,UAAqC;AAAA,IACtD,aAAa;AAAA,IACb,+BAA+B;AAAA,IAC/B,GAAK,SAAqC,SAAS,CAAC;AAAA,EACtD,CAAC,IACD,UACN;AAEJ;AAEA,kBAAkB,cAAc;;;ADkD1B,IAAAC,sBAAA;AAlEC,IAAM,wBAAoB,0BAAAC,SAAO,wBAAAC,OAAG;AAAA;AAAA,iBAE1B,CAAC,UAAU,MAAM,MAAM,UAAU;AAAA,sBAC5B,CAAC,UAAU,MAAM,MAAM,OAAO,UAAU,WAAW,IAAI;AAAA,aAChE,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA,gCACd,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA,+BAClC,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA,SAIvD,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA,uBAGnB,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA,IAKpC,uCAAM;AAAA,IACN,wCAAO;AAAA,IACP,uCAAM;AAAA,IACN,uCAAM;AAAA;AAGV,kBAAkB,cAAc;AA2BzB,IAAMC,eAAc,CAAC,UAAgC;AAC1D,QAAM,EAAE,cAAc,eAAe,YAAY,GAAG,KAAK,IAAI;AAG7D,MAAI,CAAC,gBAAgB,CAAC,iBAAiB,CAAC,YAAY;AAClD,WAAO;AAAA,EACT;AAGA,SACE,8CAAC,qBAAkB,aAAU,gBAAe,wBAAoB,MAAE,GAAG,MAElE;AAAA,iBAAa,aAAa;AAAA,IAG3B,8CAAC,wBAAAD,SAAA,EAAI,SAAQ,QAAO,KAAK,KAAK,YAAW,QACtC;AAAA,sBAAgB,6CAAC,qBAAmB,wBAAa;AAAA,MACjD,iBACC,6CAAC,qBAAmB,yBAAc;AAAA,OAEtC;AAAA,KACF;AAEJ;AAEAC,aAAY,cAAc;;;AEpG1B,IAAAC,SAAuB;AACvB,IAAAC,4BAAmB;AACnB,IAAAC,0BAAgB;AAChB,IAAAC,mCAKO;AAsCD,IAAAC,sBAAA;AAtBN,IAAM,sBAAkB,0BAAAC,SAAO,wBAAAC,OAAG;AAAA,iBACjB,CAAC,UAAU,MAAM,MAAM,UAAU;AAAA;AAAA;AAAA,aAGrC,CAAC,UAAU,KAAK,MAAM,MAAM,MAAM,GAAG,CAAC,EAAE;AAAA,IACjD,CAAC,UAAU,MAAM,MAAM,WAAW,GAAG,CAAC;AAAA,WAC/B,CAAC,UAAU,MAAM,MAAM,OAAO,KAAK,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA,IAK9C,uCAAM;AAAA,IACN,wCAAO;AAAA,IACP,uCAAM;AAAA,IACN,uCAAM;AAAA;AAGV,gBAAgB,cAAc;AAEvB,IAAM,YAAkB;AAAA,EAC7B,CAAC,EAAE,UAAU,GAAG,KAAK,GAAG,QAAQ;AAC9B,WACE;AAAA,MAAC;AAAA;AAAA,QACC,aAAU;AAAA,QACV,sBAAkB;AAAA,QAClB;AAAA,QACC,GAAG;AAAA,QAEH;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAEA,UAAU,cAAc;;;AC1DxB,IAAAC,SAAuB;AACvB,IAAAC,UAAwB;AACxB,IAAAC,0BAAgB;AAqBV,IAAAC,sBAAA;AANC,IAAM,mBAAyB,kBAGpC,CAAC,EAAE,UAAU,mBAAmB,CAAC,GAAG,GAAG,KAAK,GAAG,QAAQ;AACvD,SACE,6CAAQ,qBAAP,EAAmB,SAAO,MAAE,GAAG,kBAC9B;AAAA,IAAC,wBAAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,6BAAyB;AAAA,MACzB;AAAA,MACC,GAAG;AAAA,MAEH;AAAA;AAAA,EACH,GACF;AAEJ,CAAC;AAED,iBAAiB,cAAc;;;ACnC/B,IAAAC,UAAuB;AACvB,IAAAC,4BAAmB;AA+Cf,IAAAC,sBAAA;AAtBJ,IAAM,OAAO,0BAAAC,QAAO;AAAA;AAAA,SAEX,WAAW;AAAA,sBACE,gBAAgB,QAAQ,WAAW;AAAA;AAAA;AAAA,SAGhD,QAAQ;AAAA;AAAA;AAAA,uBAGM,iBAAiB;AAAA;AAAA;AAAA,0BAGd,WAAW;AAAA,aACxB,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAOjB,IAAM,YAA0C,CAAC,EAAE,SAAS,MAAM;AACvE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,sBAAkB;AAAA,MAClB,cAAW;AAAA,MAEV;AAAA;AAAA,EACH;AAEJ;AAEA,UAAU,cAAc;;;AC1DxB,IAAAC,UAAuB;AACvB,IAAAC,UAAwB;AACxB,IAAAC,4BAAmB;AACnB,IAAAC,2BAAiB;;;ACHjB,IAAAC,4BAAoB;AACpB,+BAAsB;AAaf,IAAM,iBAAiB;;;;;;;;;;AAWvB,IAAM,YAAY;0BACC,+BAAM,OAAO,OAAO,QAAQ,WAAW,IAAI;;;;UAI3D,+BAAM,OAAO,OAAO,QAAQ,WAAW,IAAI;;;;;;;;;AAU9C,IAAM,OAAO;eACL,+BAAM,MAAM,GAAG,CAAC;gBACf,+BAAM,MAAM,GAAG,CAAC;aACnB,+BAAM,MAAM,GAAG,CAAC;mBACV,+BAAM,MAAM,IAAI;;AAG5B,IAAM,WAAW;;;;;;ADuCL,IAAAC,uBAAA;AArDnB,IAAM,aAAa,0BAAAC,QAAO;AAAA,WACf,gBAAgB;AAAA,YACf,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA,mBAG1B,CAAC,UAAU,MAAM,MAAM,MAAM,KAAK;AAAA;AAAA,gBAErC,CAAC,UAAU,MAAM,MAAM,OAAO,OAAO,QAAQ,WAAW,IAAI;AAAA,WACjE,CAAC,UAAU,MAAM,MAAM,OAAO,OAAO,QAAQ,KAAK,IAAI;AAAA;AAAA;AAAA,oBAG7C,CAAC,UAAU,MAAM,MAAM,SAAS,IAAI;AAAA,MAClD,CAAC,UAAU,MAAM,MAAM,OAAO,UAAU;AAAA;AAAA;AAAA,kBAG5B,CAAC,UACb,MAAM,MAAM,OAAO,OAAO,QAAQ,WAAW,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MASlD,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASR,IAAM,cAA8C,CAAC;AAAA,EAC1D,cAAc;AAAA,EACd;AAAA,EACA,UAAAC;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,SACJ;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,wBAAoB;AAAA,MACpB,6BAA2B,cAAc;AAAA,MACzC,cAAY;AAAA,MACZ,OAAO;AAAA,MACP,UAAUA;AAAA,MACV;AAAA,MACC,GAAG;AAAA,MAEH,sBAAY,8CAAC,yBAAAC,SAAA,EAAK,MAAM,UAAU,MAAK,SAAQ,cAAY,WAAW;AAAA;AAAA,EACzE;AAGF,MAAI,eAAe,SAAS;AAC1B,WAAO,8CAAQ,eAAP,EAAa,SAAO,MAAE,kBAAO;AAAA,EACvC;AAEA,SAAO;AACT;AAEA,YAAY,cAAc;;;AEjG1B,IAAAC,UAAuB;AACvB,IAAAC,6BAAuB;AA2FnB,IAAAC,uBAAA;AAfG,IAAM,uBAA6B,mBAGxC,CAAC,EAAE,QAAQ,WAAW,SAAS,SAAS,GAAG,YAAY,GAAG,QAAQ;AAClE,QAAM,cAAoB;AAAA,IACxB,CAAC,MAA2C;AAC1C,gBAAU,CAAC;AACX,UAAI,CAAC,EAAE,kBAAkB;AACvB,kBAAU;AAAA,MACZ;AAAA,IACF;AAAA,IACA,CAAC,SAAS,SAAS;AAAA,EACrB;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,SAAS;AAAA,MACT,iBAAc;AAAA,MACd,iBAAe;AAAA,MACf,iBAAe;AAAA,MACd,GAAG;AAAA;AAAA,EACN;AAEJ,CAAC;AAED,qBAAqB,cAAc;;;ACvGnC,IAAAC,gBAAkB;AAClB,IAAAC,4BAAmB;AACnB,IAAAD,gBAAuB;AACvB,IAAAE,mCASO;AAWA,IAAM,0BAAsB,0BAAAC,SAAO,qBAAO,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAMvC,CAAC,UAAU,MAAM,WAAW,CAAC;AAAA;AAGnC,IAAM,gBAAgB,0BAAAA,QAAO,IAAI,WAAW;AAAA,EACjD,mBAAmB,CAAC,SAAS,CAAC,CAAC,kBAAkB,EAAE,SAAS,IAAI;AAClE,CAAC;AAAA;AAAA;AAAA,sBAGqB,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,WAAW,IAAI;AAAA;AAAA;AAAA,IAGvE,CAAC,UACD,MAAM,oBACN;AAAA;AAAA,GAED;AAAA;AAAA,IAEC,uCAAM;AAAA,IACN,uCAAM;AAAA,IACN,uCAAM;AAAA,IACN,yCAAQ;AAAA;AAGZ,cAAc,cAAc;;;AbqGL,IAAAC,uBAAA;AApGvB,IAAMC,SAAQ,CAAC,UAA0B;AACvC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,CAAC;AAAA,IACR,cAAc;AAAA,IACd;AAAA,IACA,uBAAuB;AAAA,IACvB;AAAA,IACA,QAAAC,UAAS;AAAA;AAAA,IAET;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA,IAEA,2BAA2B;AAAA,IAC3B,wBAAwB;AAAA,IACxB,GAAG;AAAA,EACL,IAAI;AAIJ,QAAM,CAAC,QAAQ,SAAS,IAAU,iBAAS,eAAe,KAAK;AAE/D,QAAM,mBAAyB;AAAA,IAC7B,CAAC,YAAqB;AAEpB,gBAAU,OAAO;AAEjB,qBAAe,OAAO;AAAA,IACxB;AAAA,IACA,CAAC,YAAY;AAAA,EACf;AAGA,QAAM,iBAAuB,gBAAQ,MAAM;AACzC,UAAM,QAAgC,CAAC;AACvC,WAAO,QAAQ,IAAI,EAAE,QAAQ,CAAC,CAAC,KAAK,KAAK,MAAM;AAC7C,YAAM,QAAQ,GAAG,EAAE,IAAI,OAAO,KAAK;AAAA,IACrC,CAAC;AACD,UAAM,eAAe,IAAI;AAEzB,QAAI,SAAS,QAAW;AACtB,YAAM,oBAAoB,IAAI,OAAO,IAAI;AAAA,IAC3C;AACA,WAAO;AAAA,EACT,GAAG,CAAC,MAAM,IAAI,CAAC;AAGf,QAAM,qBAAqB,QAAQ,SAAS,QAAQ;AAGpD,QAAM,WAAW,YAAY;AAC7B,QAAM,kBAAkB,mBAAmB,QAAQ;AAGnD,QAAM,wBAAwB,YAC1B,wBACA;AAGJ,QAAM,2BAAiC;AAAA,IACrC,CAAC,MAAM;AACL,UAAI,0BAA0B;AAC5B,UAAE,eAAe;AAAA,MACnB;AACA,0BAAoB,CAAC;AAAA,IACvB;AAAA,IACA,CAAC,0BAA0B,iBAAiB;AAAA,EAC9C;AAEA,QAAM,yBAA+B;AAAA,IACnC,CAAC,MAAM;AACL,UAAI,uBAAuB;AACzB,UAAE,eAAe;AAAA,MACnB;AACA,wBAAkB,CAAC;AAAA,IACrB;AAAA,IACA,CAAC,uBAAuB,eAAe;AAAA,EACzC;AAEA,SACE;AAAA,IAAQ;AAAA,IAAP;AAAA,MACC;AAAA,MACA;AAAA,MACA,cAAc;AAAA,MACd,OAAO,CAAC;AAAA,MAGP;AAAA,wBAAgB,8CAAQ,iBAAP,EAAe,SAAO,MAAE,wBAAa;AAAA,QAEvD,8CAAQ,gBAAP,EAAc,YAAU,MACvB,wDAAC,iCAAgB,MAAK,QAClB,mBAAQ,WACR,gFACG;AAAA,yBACC,8CAAQ,iBAAP,EAAe,SAAO,MACrB;AAAA,YAAC;AAAA;AAAA,cACC,SAASA;AAAA,cACT,UAAU;AAAA,cACV,SAAQ;AAAA,cACR,SAAQ;AAAA,cACR,MAAK;AAAA,cAEL;AAAA,gBAAC;AAAA;AAAA,kBACC,aAAU;AAAA,kBACV,yBAAqB;AAAA,kBACrB,eAAY;AAAA,kBACZ,kBAAkB;AAAA;AAAA,cACpB;AAAA;AAAA,UACF,GACF;AAAA,UAEF;AAAA,YAAC;AAAA;AAAA,cACC;AAAA,cACA;AAAA,cACA;AAAA,cACA,QAAQA;AAAA,cACR;AAAA,cACA,oBAAoB;AAAA,gBAClB;AAAA,gBACA;AAAA,gBACA,iBAAiB;AAAA,gBACjB;AAAA,gBACA;AAAA,gBACA,mBAAmB;AAAA,cACrB;AAAA,cAGA;AAAA,+DAAC,aACC;AAAA;AAAA,oBAAC;AAAA;AAAA,sBACC,YAAW;AAAA,sBACX,UAAS;AAAA,sBACR,GAAG;AAAA,sBACJ,cACG,mBAA2B,YAAY,KACxC;AAAA;AAAA,kBAEJ;AAAA,kBACC,SAAS,IAAI,CAAC,QAAQ,QACrB,8CAAC,eAAuB,GAAG,UAAT,GAAiB,CACpC;AAAA,mBACH;AAAA,gBAEC,sBACC,8CAACC,cAAA,EAAY,OAAc,UAAoB;AAAA,gBAIhD,eACC,8CAAC,oBAAkB,uBAAY;AAAA,gBAIhC;AAAA;AAAA;AAAA,UACH;AAAA,WACF,GAEJ,GACF;AAAA;AAAA;AAAA,EACF;AAEJ;AA+IA,IAAOC,iBAAQC;;;AJ/Wf,IAAO,cAAQ;","names":["ModalFooter","ModalHeader","Modal_default","React","import_react","import_seeds_react_box","className","ReactModal","styled","Box","import_jsx_runtime","Box","Text","Button","Icon","width","zIndex","React","Dialog","import_react","React","Dialog","import_styled_components","import_seeds_react_box","import_seeds_react_text","import_seeds_react_system_props","React","import_react","import_styled_components","BODY_PADDING","import_seeds_react_system_props","React","import_jsx_runtime","styled","BODY_PADDING","zIndex","e","import_jsx_runtime","styled","Box","ModalHeader","Text","React","import_styled_components","import_seeds_react_box","import_seeds_react_system_props","React","Dialog","import_jsx_runtime","import_jsx_runtime","styled","Box","ModalFooter","React","import_styled_components","import_seeds_react_box","import_seeds_react_system_props","import_jsx_runtime","styled","Box","React","Dialog","import_seeds_react_box","import_jsx_runtime","Box","React","import_styled_components","import_jsx_runtime","styled","React","Dialog","import_styled_components","import_seeds_react_icon","import_styled_components","import_jsx_runtime","styled","disabled","Icon","React","import_seeds_react_button","import_jsx_runtime","import_react","import_styled_components","import_seeds_react_system_props","styled","import_jsx_runtime","Modal","zIndex","ModalHeader","Modal_default","Modal"]}
1
+ {"version":3,"sources":["../src/index.ts","../src/v1/Modal.tsx","../src/v1/styles.tsx","../src/v1/index.ts","../src/v2/Modal.tsx","../src/v2/components/ModalHeader.tsx","../src/v2/components/ModalContent.tsx","../src/shared/constants.ts","../src/v2/MotionConfig.ts","../src/v2/components/ModalFooter.tsx","../src/v2/components/ModalCloseWrapper.tsx","../src/v2/components/ModalBody.tsx","../src/v2/components/ModalDescription.tsx","../src/v2/components/ModalRail.tsx","../src/v2/components/ModalAction.tsx","../../seeds-react-mixins/src/index.ts","../src/v2/components/ModalExternalTrigger.tsx","../src/v2/components/ModalOverlay.tsx"],"sourcesContent":["// Main export - V1 Modal for backwards compatibility\nimport Modal from \"./v1\";\nexport default Modal;\nexport { Modal };\n\n// Explicit type exports from V1 for tree shaking\nexport type {\n TypeModalProps,\n TypeModalHeaderProps,\n TypeModalFooterProps,\n TypeModalContentProps,\n TypeModalCloseButtonProps,\n} from \"./v1\";\n\n// V2 Modal exports (renamed to just Modal)\nexport {\n Modal as ModalV2,\n ModalDescription,\n ModalHeader,\n ModalFooter,\n ModalBody,\n ModalCloseWrapper,\n ModalRail,\n ModalAction,\n ModalCustomHeader,\n ModalCustomFooter,\n} from \"./v2\";\nexport type {\n TypeModalProps as TypeModalV2Props,\n TypeModalHeaderProps as TypeModalV2HeaderProps,\n TypeModalFooterProps as TypeModalV2FooterProps,\n TypeModalBodyProps as TypeModalV2BodyProps,\n TypeModalDescriptionProps as TypeModalV2DescriptionProps,\n TypeModalRailProps,\n TypeModalActionProps,\n ModalCloseWrapperProps,\n} from \"./v2\";\n","import * as React from \"react\";\nimport { useContext } from \"react\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport Button from \"@sproutsocial/seeds-react-button\";\nimport Icon from \"@sproutsocial/seeds-react-icon\";\nimport Text from \"@sproutsocial/seeds-react-text\";\nimport { Container, Content, Header, Footer, Body } from \"./styles\";\nimport type {\n TypeModalProps,\n TypeModalCloseButtonProps,\n TypeModalContentProps,\n TypeModalFooterProps,\n TypeModalHeaderProps,\n} from \"./ModalTypes\";\n\ntype TypeModalContext = Partial<{\n onClose: () => void;\n closeButtonLabel: string;\n label: string;\n}>;\n\nconst ModalContext = React.createContext<TypeModalContext>({});\n\nconst ModalHeader = (props: TypeModalHeaderProps) => {\n const { title, subtitle, children, bordered, ...rest } = props;\n return (\n <Header bordered={title || subtitle || bordered} {...rest}>\n {children ? (\n children\n ) : (\n <React.Fragment>\n <Box>\n {title && (\n <Text as=\"h1\" fontSize={400} fontWeight=\"semibold\">\n {title}\n </Text>\n )}\n {subtitle && (\n <Text as=\"div\" fontSize={200}>\n {subtitle}\n </Text>\n )}\n </Box>\n <Box display=\"flex\" alignItems=\"center\" justify-content=\"flex-end\">\n <ModalCloseButton ml={400} />\n </Box>\n </React.Fragment>\n )}\n </Header>\n );\n};\n\nconst ModalCloseButton = (props: TypeModalCloseButtonProps) => {\n const { onClose, closeButtonLabel } = useContext(ModalContext);\n if (!onClose) return null;\n return (\n <Button onClick={onClose} {...props}>\n <Icon name=\"x-outline\" ariaLabel={closeButtonLabel} />\n </Button>\n );\n};\n\nconst ModalFooter = ({\n bg = \"container.background.base\",\n ...rest\n}: TypeModalFooterProps) => (\n <Footer\n bg={bg}\n borderTop={500}\n borderColor=\"container.border.base\"\n {...rest}\n />\n);\n\nconst ModalContent = React.forwardRef(\n ({ children, ...rest }: TypeModalContentProps, ref) => {\n const { label } = useContext(ModalContext);\n return (\n <Content data-qa-modal data-qa-label={label} ref={ref} {...rest}>\n {children}\n </Content>\n );\n }\n);\n\n/**\n * The modal you want\n */\nconst Modal = (props: TypeModalProps) => {\n const {\n appElementSelector,\n children,\n isOpen,\n label,\n onClose,\n closeButtonLabel,\n width = \"800px\",\n zIndex = 6,\n data = {},\n ...rest\n } = props;\n\n const isCloseable = Boolean(onClose);\n const appElement =\n appElementSelector && document\n ? (document.querySelector(appElementSelector) as HTMLElement)\n : undefined;\n\n return (\n <Container\n appElement={appElement}\n ariaHideApp={!!appElement}\n isOpen={isOpen}\n contentLabel={label}\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n onRequestClose={onClose || (() => {})}\n shouldFocusAfterRender={true}\n shouldCloseOnOverlayClick={isCloseable}\n shouldCloseOnEsc={isCloseable}\n shouldReturnFocusAfterClose={true}\n closeTimeoutMS={200}\n role=\"dialog\"\n width={width}\n zIndex={zIndex}\n data={{\n \"qa-modal\": \"\",\n \"qa-modal-isopen\": isOpen,\n ...data,\n }}\n {...rest}\n >\n <React.Fragment>\n <Body />\n\n <ModalContext.Provider\n value={{\n onClose,\n closeButtonLabel,\n label,\n }}\n >\n {children}\n </ModalContext.Provider>\n </React.Fragment>\n </Container>\n );\n};\n\nModalHeader.displayName = \"Modal.Header\";\nModalFooter.displayName = \"Modal.Footer\";\nModalContent.displayName = \"Modal.Content\";\nModalCloseButton.displayName = \"Modal.CloseButton\";\n\nModal.Header = ModalHeader;\nModal.Footer = ModalFooter;\nModal.Content = ModalContent;\nModal.CloseButton = ModalCloseButton;\n\nexport default Modal;\n","import React from \"react\";\nimport styled, { createGlobalStyle } from \"styled-components\";\nimport { width, zIndex } from \"styled-system\";\nimport ReactModal from \"react-modal\";\nimport { COMMON } from \"@sproutsocial/seeds-react-system-props\";\nimport Box, { type TypeContainerProps } from \"@sproutsocial/seeds-react-box\";\n\n// This is the max space allowed between the modal and the edge of the browser\nconst BODY_PADDING = \"64px\";\n\nconst ReactModalAdapter = ({\n className = \"\",\n ...props\n}: { className?: string } & Omit<\n ReactModal.Props,\n \"portalClassName\" | \"className\" | \"overlayClassName\"\n>) => {\n // We want to create *__Content and *__Overlay class names on the subcomponents.\n // Because `className` could be a space-separated list of class names, we make\n // sure that we append `__Content` and `__Overlay` to every class name.\n const contentClassName = className\n .split(\" \")\n .map((className) => `${className} ${className}__Content`)\n .join(\" \");\n\n const overlayClassName = className\n .split(\" \")\n .map((className) => `${className} ${className}__Overlay`)\n .join(\" \");\n\n return (\n <ReactModal\n portalClassName={className}\n className={contentClassName}\n overlayClassName={overlayClassName}\n {...props}\n />\n );\n};\n\nexport const Body = createGlobalStyle`\n .ReactModal__Body--open {\n overflow: hidden;\n }\n`;\n\nexport const Container = styled(ReactModalAdapter)<TypeContainerProps>`\n &__Overlay {\n position: fixed;\n top: 0px;\n left: 0px;\n right: 0px;\n bottom: 0px;\n display: flex;\n align-items: center;\n justify-content: center;\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\n ${zIndex}\n\n &.ReactModal__Overlay--after-open {\n opacity: 1;\n }\n &.ReactModal__Overlay--before-close {\n opacity: 0;\n }\n }\n\n &__Content {\n display: flex;\n flex-direction: column;\n background: ${(props) => props.theme.colors.container.background.base};\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\n outline: none;\n max-width: calc(100vw - ${BODY_PADDING});\n max-height: calc(100vh - ${BODY_PADDING});\n @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n /**\n * This prevents the modal from being very short in IE11. Better too big\n * than too small.\n */\n height: calc(100vh - ${BODY_PADDING});\n }\n\n ${width}\n\n ${COMMON}\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: ${(props) => props.theme.space[400]}\n ${(props) => props.theme.space[450]};\n @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n /* 'flex-basis: auto' breaks overflow in IE11 */\n flex-basis: 100%;\n }\n`;\n\nexport const HeaderContainer = styled(Box)`\n font-family: ${(props) => props.theme.fontFamily};\n padding: ${(props) => props.theme.space[400]}\n ${(props) => props.theme.space[450]};\n`;\n\nexport const Header = styled(HeaderContainer)<{ bordered?: boolean }>`\n display: flex;\n align-items: center;\n justify-content: space-between;\n flex: 0 0 auto;\n border-bottom-width: ${(props) => props.theme.borderWidths[500]};\n border-bottom-color: ${(props) =>\n props.bordered ? props.theme.colors.container.border.base : \"transparent\"};\n border-bottom-style: solid;\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[450]};\n border-bottom-right-radius: ${(props) => props.theme.radii[500]};\n border-bottom-left-radius: ${(props) => props.theme.radii[500]};\n`;\n\nContainer.displayName = \"ModalContainer\";\nContent.displayName = \"Content\";\nHeader.displayName = \"Modal.Header\";\nFooter.displayName = \"Modal.Footer\";\n","// V1 Modal - Explicit exports for optimal tree shaking\nimport Modal from \"./Modal\";\n\nexport default Modal;\nexport { Modal };\n\n// Explicit type exports\nexport type {\n TypeModalProps,\n TypeModalHeaderProps,\n TypeModalFooterProps,\n TypeModalContentProps,\n TypeModalCloseButtonProps,\n} from \"./ModalTypes\";\n","import * as React from \"react\";\nimport * as Dialog from \"@radix-ui/react-dialog\";\nimport { AnimatePresence } from \"motion/react\";\nimport {\n StyledOverlay,\n StyledMotionOverlay,\n DraggableModalContent,\n StaticModalContent,\n ModalHeader,\n ModalDescription,\n ModalRail,\n ModalAction,\n} from \"./components\";\nimport type { TypeModalProps } from \"./ModalTypes\";\nimport { getOverlayVariants, useIsMobile } from \"./MotionConfig\";\n\n// Type aliases for Dialog.Content event handlers\ntype InteractOutsideHandler = NonNullable<\n React.ComponentPropsWithoutRef<typeof Dialog.Content>[\"onInteractOutside\"]\n>;\ntype EscapeKeyDownHandler = NonNullable<\n React.ComponentPropsWithoutRef<typeof Dialog.Content>[\"onEscapeKeyDown\"]\n>;\n\n/**\n * Accessible modal dialog component built on Radix UI Dialog primitives.\n *\n * This component provides a flexible modal implementation with comprehensive accessibility\n * features, keyboard navigation, and focus management built in.\n *\n * Key capabilities:\n * - Automatic ARIA attributes and focus trapping\n * - ESC key and outside click to close\n * - Simplified API with title/subtitle props for common use cases\n * - Controlled and uncontrolled state modes\n * - Optional draggable behavior for side-by-side interaction\n * - Floating action rail for quick actions like close, expand, etc.\n * - Responsive bottom sheet layout on mobile\n *\n * @example\n * // Simple uncontrolled modal\n * <Modal\n * title=\"Delete Item\"\n * subtitle=\"This action cannot be undone\"\n * modalTrigger={<Button>Delete</Button>}\n * >\n * <ModalBody>Are you sure you want to delete this item?</ModalBody>\n * <ModalFooter\n * cancelButton={<Button>Cancel</Button>}\n * primaryButton={<Button appearance=\"destructive\">Delete</Button>}\n * />\n * </Modal>\n */\nconst Modal = (props: TypeModalProps) => {\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 data = {},\n showOverlay = true,\n actions,\n closeButtonAriaLabel = \"Close\",\n closeButtonProps,\n zIndex = 6,\n // Extract Dialog.Content event handlers\n onOpenAutoFocus,\n onCloseAutoFocus,\n onEscapeKeyDown,\n onPointerDownOutside,\n onFocusOutside,\n onInteractOutside,\n // Extract convenience boolean props\n disableOutsideClickClose = false,\n disableEscapeKeyClose = false,\n ...rest\n } = props;\n\n // Track open state for AnimatePresence\n // This state is synced via onOpenChange regardless of controlled/uncontrolled mode\n const [isOpen, setIsOpen] = React.useState(defaultOpen ?? false);\n\n const handleOpenChange = React.useCallback(\n (newOpen: boolean) => {\n // Always sync state for AnimatePresence\n setIsOpen(newOpen);\n // Call user's callback\n onOpenChange?.(newOpen);\n },\n [onOpenChange]\n );\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 // Get mobile state and appropriate overlay variants\n const isMobile = useIsMobile();\n const overlayVariants = getOverlayVariants(isMobile);\n\n // Choose the appropriate content component based on draggable prop\n const ModalContentComponent = draggable\n ? DraggableModalContent\n : StaticModalContent;\n\n // Wrap event handlers to support convenience boolean props\n const wrappedOnInteractOutside = React.useCallback<InteractOutsideHandler>(\n (e) => {\n if (disableOutsideClickClose) {\n e.preventDefault();\n }\n onInteractOutside?.(e);\n },\n [disableOutsideClickClose, onInteractOutside]\n );\n\n const wrappedOnEscapeKeyDown = React.useCallback<EscapeKeyDownHandler>(\n (e) => {\n // If a V1 Popout is open, prevent the modal from closing.\n // The Popout's own escape handler (on document.body capture phase)\n // will fire next and close just the popout.\n const hasOpenPopout = document.querySelector(\"[data-qa-popout]\") !== null;\n if (hasOpenPopout) {\n e.preventDefault();\n }\n\n if (disableEscapeKeyClose) {\n e.preventDefault();\n }\n onEscapeKeyDown?.(e);\n },\n [disableEscapeKeyClose, onEscapeKeyDown]\n );\n\n return (\n <Dialog.Root\n open={open}\n defaultOpen={defaultOpen}\n onOpenChange={handleOpenChange}\n modal={!draggable}\n >\n {/* Render trigger button if provided */}\n {modalTrigger && <Dialog.Trigger asChild>{modalTrigger}</Dialog.Trigger>}\n\n <Dialog.Portal forceMount>\n <AnimatePresence mode=\"wait\">\n {(open ?? isOpen) && (\n <>\n {showOverlay && (\n <Dialog.Overlay asChild>\n <StyledMotionOverlay\n $zIndex={zIndex}\n variants={overlayVariants}\n initial=\"initial\"\n animate=\"animate\"\n exit=\"exit\"\n >\n <StyledOverlay\n data-slot=\"modal-overlay\"\n data-qa-modal-overlay\n data-testid=\"modal-overlay\"\n allowInteraction={draggable}\n />\n </StyledMotionOverlay>\n </Dialog.Overlay>\n )}\n <ModalContentComponent\n label={label}\n dataAttributes={dataAttributes}\n draggable={draggable}\n zIndex={zIndex}\n rest={rest}\n dialogContentProps={{\n onOpenAutoFocus,\n onCloseAutoFocus,\n onEscapeKeyDown: wrappedOnEscapeKeyDown,\n onPointerDownOutside,\n onFocusOutside,\n onInteractOutside: wrappedOnInteractOutside,\n }}\n >\n {/* Floating actions rail - always show a close by default */}\n <ModalRail>\n <ModalAction\n actionType=\"close\"\n iconName=\"x-outline\"\n {...closeButtonProps}\n aria-label={\n (closeButtonProps as any)?.[\"aria-label\"] ??\n closeButtonAriaLabel\n }\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 && (\n <ModalDescription>{description}</ModalDescription>\n )}\n\n {/* Main content */}\n {children}\n </ModalContentComponent>\n </>\n )}\n </AnimatePresence>\n </Dialog.Portal>\n </Dialog.Root>\n );\n};\n\n/**\n * Hook for adding proper ARIA attributes to external modal triggers.\n *\n * ⚠️ **NOT RECOMMENDED** - Prefer using modalTrigger prop or ModalTrigger component.\n * Use this hook ONLY as a last resort when architectural constraints prevent keeping\n * the trigger inside the Modal component tree.\n *\n * **Important Limitations:**\n * - This hook only provides ARIA attributes (aria-haspopup, aria-expanded)\n * - Focus restoration is NOT automatic - you must manually handle it with refs\n * - Radix UI cannot track external triggers for proper accessibility\n *\n * **Why modalTrigger prop is better:**\n * - Automatic ARIA attributes\n * - Automatic focus restoration\n * - Better touch device support\n * - Follows WAI-ARIA Dialog best practices\n *\n * @param isOpen - Current open state of the modal\n * @param modalId - Optional ID of the modal element for aria-controls\n * @returns Object with ARIA attributes to spread onto trigger element\n *\n * @example\n * ```tsx\n * // Manual focus restoration required\n * const [isOpen, setIsOpen] = useState(false);\n * const triggerRef = useRef<HTMLButtonElement>(null);\n * const triggerProps = useModalTriggerProps(isOpen);\n *\n * return (\n * <>\n * <Button\n * ref={triggerRef}\n * {...triggerProps}\n * onClick={() => setIsOpen(true)}\n * >\n * Open Modal\n * </Button>\n * <Modal\n * open={isOpen}\n * onOpenChange={setIsOpen}\n * onCloseAutoFocus={(e) => {\n * e.preventDefault();\n * triggerRef.current?.focus();\n * }}\n * >\n * <ModalBody>Content</ModalBody>\n * </Modal>\n * </>\n * );\n * ```\n */\nexport function useModalTriggerProps(\n isOpen: boolean,\n modalId?: string\n): {\n \"aria-haspopup\": \"dialog\";\n \"aria-expanded\": boolean;\n \"aria-controls\"?: string;\n} {\n return React.useMemo(\n () => ({\n \"aria-haspopup\": \"dialog\" as const,\n \"aria-expanded\": isOpen,\n ...(modalId ? { \"aria-controls\": modalId } : {}),\n }),\n [isOpen, modalId]\n );\n}\n\n/**\n * Hook for managing external modal triggers with automatic focus restoration.\n *\n * ⚠️ **NOT RECOMMENDED** - Prefer using modalTrigger prop or ModalTrigger component.\n * Use this hook ONLY as a last resort when architectural constraints prevent keeping\n * the trigger inside the Modal component tree.\n *\n * This hook improves upon useModalTriggerProps by managing the trigger ref internally\n * and providing the onCloseAutoFocus callback, eliminating the need for manual\n * focus restoration boilerplate.\n *\n * **Improvements over useModalTriggerProps:**\n * - ✅ No manual ref creation\n * - ✅ Automatic focus restoration via onCloseAutoFocus callback\n * - ✅ Automatic ARIA attributes\n *\n * **Why modalTrigger prop is still better:**\n * - Better touch device support\n * - Follows WAI-ARIA Dialog best practices\n * - Less boilerplate overall\n *\n * @param modalId - Optional ID of the modal element for aria-controls\n * @returns Object with triggerRef, ARIA props, and onCloseAutoFocus callback\n *\n * @example\n * ```tsx\n * const [isOpen, setIsOpen] = useState(false);\n * const { triggerRef, triggerProps, onCloseAutoFocus } = useModalExternalTrigger();\n *\n * return (\n * <>\n * <Button\n * ref={triggerRef}\n * {...triggerProps(isOpen)}\n * onClick={() => setIsOpen(true)}\n * >\n * Open Modal\n * </Button>\n * <Modal\n * open={isOpen}\n * onOpenChange={setIsOpen}\n * onCloseAutoFocus={onCloseAutoFocus}\n * >\n * <ModalBody>Content</ModalBody>\n * </Modal>\n * </>\n * );\n * ```\n */\nexport function useModalExternalTrigger<\n T extends HTMLElement = HTMLButtonElement\n>(modalId?: string) {\n const triggerRef = React.useRef<T>(null);\n\n const triggerProps = React.useCallback(\n (isOpen: boolean) => ({\n \"aria-haspopup\": \"dialog\" as const,\n \"aria-expanded\": isOpen,\n ...(modalId ? { \"aria-controls\": modalId } : {}),\n }),\n [modalId]\n );\n\n const onCloseAutoFocus = React.useCallback((e: Event) => {\n e.preventDefault();\n triggerRef.current?.focus();\n }, []);\n\n return { triggerRef, triggerProps, onCloseAutoFocus };\n}\n\nexport default Modal;\n","import * as React from \"react\";\nimport * as Dialog from \"@radix-ui/react-dialog\";\nimport styled from \"styled-components\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport Text from \"@sproutsocial/seeds-react-text\";\nimport {\n COMMON,\n FLEXBOX,\n BORDER,\n LAYOUT,\n} from \"@sproutsocial/seeds-react-system-props\";\nimport type { TypeModalHeaderProps } from \"../ModalTypes\";\nimport { useDragContext } from \"./ModalContent\";\n\ninterface HeaderProps {\n draggable?: boolean;\n isDragging?: boolean;\n}\n\n/**\n * Base styled header component for custom modal headers.\n *\n * Use this component when you need complete control over the header layout\n * and don't want to use the slot-based ModalHeader component.\n *\n * @example\n * <ModalCustomHeader>\n * <YourCustomHeaderContent />\n * </ModalCustomHeader>\n */\nexport const ModalCustomHeader = styled(Box).withConfig({\n shouldForwardProp: (prop) => ![\"draggable\", \"isDragging\"].includes(prop),\n})<HeaderProps>`\n font-family: ${(props) => props.theme.fontFamily};\n padding: ${(props) => props.theme.space[400]};\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 ${COMMON}\n ${FLEXBOX}\n ${BORDER}\n ${LAYOUT}\n`;\n\nModalCustomHeader.displayName = \"ModalCustomHeader\";\n\n/**\n * Modal header component with title and subtitle slots.\n *\n * This component only supports slot-based rendering via title and subtitle props.\n * For custom header layouts, use ModalCustomHeader instead.\n *\n * @example\n * <ModalHeader title=\"Delete Item\" subtitle=\"This action cannot be undone\" />\n */\nexport const ModalHeader = (props: TypeModalHeaderProps) => {\n const {\n title,\n subtitle,\n titleProps = {},\n subtitleProps = {},\n ...rest\n } = props;\n\n const dragContext = useDragContext();\n const isDraggable = dragContext?.draggable ?? false;\n\n return (\n <ModalCustomHeader\n data-slot=\"modal-header\"\n data-qa-modal-header\n {...rest}\n onMouseDown={isDraggable ? dragContext?.onHeaderMouseDown : undefined}\n draggable={isDraggable}\n isDragging={dragContext?.isDragging}\n >\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 </ModalCustomHeader>\n );\n};\n\nModalHeader.displayName = \"ModalHeader\";\n","import * as React from \"react\";\nimport * as Dialog from \"@radix-ui/react-dialog\";\nimport { motion } from \"motion/react\";\nimport styled from \"styled-components\";\nimport { DisablePortalToBodyContext } from \"@sproutsocial/seeds-react-portal\";\nimport {\n BODY_PADDING,\n DEFAULT_MODAL_WIDTH,\n MOBILE_BREAKPOINT,\n RAIL_EXTRA_SPACE,\n RAIL_BUTTON_SIZE,\n RAIL_OFFSET,\n} from \"../../shared/constants\";\nimport {\n COMMON,\n FLEXBOX,\n BORDER,\n LAYOUT,\n type TypeSystemCommonProps,\n type TypeSystemBorderProps,\n type TypeSystemLayoutProps,\n type TypeSystemFlexboxProps,\n} from \"@sproutsocial/seeds-react-system-props\";\nimport { getContentVariants, useIsMobile } from \"../MotionConfig\";\n\ninterface StyledContentProps\n extends TypeSystemCommonProps,\n TypeSystemFlexboxProps,\n TypeSystemBorderProps,\n TypeSystemLayoutProps {\n isDragging?: boolean;\n draggable?: boolean;\n}\n\n// Styled motion.div wrapper that handles positioning\nconst StyledMotionWrapper = styled(motion.div)<{\n $isMobile: boolean;\n $zIndex?: number;\n}>`\n position: fixed;\n top: ${(props) => (props.$isMobile ? \"auto\" : \"50%\")};\n left: 50%;\n bottom: ${(props) => (props.$isMobile ? 0 : \"auto\")};\n z-index: ${(props) => (props.$zIndex ? props.$zIndex + 1 : 7)};\n`;\n\nexport const StyledContent = styled.div.withConfig({\n shouldForwardProp: (prop) => ![\"isDragging\", \"draggable\"].includes(prop),\n})<StyledContentProps>`\n display: flex;\n flex-direction: column;\n border-radius: ${(props) => props.theme.radii[800]};\n box-shadow: ${(props) => props.theme.shadows.high};\n filter: blur(0);\n background-color: ${(props) => props.theme.colors.container.background.base};\n color: ${(props) => props.theme.colors.text.body};\n outline: none;\n width: ${DEFAULT_MODAL_WIDTH};\n max-width: ${(props) => {\n // Account for rail space when positioned on the side (viewport > ${MOBILE_BREAKPOINT})\n // At viewport <= ${MOBILE_BREAKPOINT}, rail is above modal, so no horizontal space needed\n return `calc(100vw - ${BODY_PADDING} - ${RAIL_EXTRA_SPACE}px)`;\n }};\n max-height: calc(100vh - ${BODY_PADDING});\n\n /* Mobile styles for viewport <= ${MOBILE_BREAKPOINT} */\n @media (max-width: ${MOBILE_BREAKPOINT}) {\n /* Full viewport width - edge to edge */\n width: 100vw;\n max-width: 100vw;\n min-width: 100vw;\n\n /* Height hugs content, with increased max-height to get closer to top */\n /* Subtract space for rail + comfortable gap (44px rail + ~40px gap) */\n height: auto;\n max-height: calc(95vh - 84px);\n\n /* Adjust border radius for mobile - rounded top, flat bottom to blend with device */\n border-top-left-radius: ${(props) => props.theme.radii[800]};\n border-top-right-radius: ${(props) => props.theme.radii[800]};\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n\n /* Mobile shadow - appears to cast upward (high-reverse) */\n box-shadow: 0px -16px 32px 0px rgba(39, 51, 51, 0.24);\n }\n\n @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n height: calc(100vh - ${BODY_PADDING});\n }\n\n ${COMMON}\n ${FLEXBOX}\n ${BORDER}\n ${LAYOUT}\n`;\n\nStyledContent.displayName = \"ModalContent\";\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\nexport const DragContext = React.createContext<DragContextValue | null>(null);\n\nexport const useDragContext = () => {\n const context = React.useContext(DragContext);\n return context;\n};\n\ninterface ModalContentProps {\n children: React.ReactNode;\n label?: string;\n dataAttributes: Record<string, string>;\n draggable?: boolean;\n zIndex?: number;\n rest: any;\n dialogContentProps?: Pick<\n React.ComponentPropsWithoutRef<typeof Dialog.Content>,\n | \"onOpenAutoFocus\"\n | \"onCloseAutoFocus\"\n | \"onEscapeKeyDown\"\n | \"onPointerDownOutside\"\n | \"onFocusOutside\"\n | \"onInteractOutside\"\n >;\n}\n\n/**\n * Static modal content component for non-draggable modals.\n * This is a lightweight version that doesn't include any drag logic.\n */\nexport const StaticModalContent: React.FC<ModalContentProps> = ({\n children,\n label,\n dataAttributes,\n zIndex,\n rest,\n dialogContentProps,\n}) => {\n const isMobile = useIsMobile();\n const contentVariants = getContentVariants(isMobile, false);\n\n return (\n <DragContext.Provider value={null}>\n <Dialog.Content asChild aria-label={label} {...dialogContentProps}>\n <StyledMotionWrapper\n $isMobile={isMobile}\n $zIndex={zIndex}\n variants={contentVariants}\n initial=\"initial\"\n animate=\"animate\"\n exit=\"exit\"\n >\n <StyledContent\n data-slot=\"modal-content\"\n draggable={false}\n {...dataAttributes}\n {...rest}\n >\n <DisablePortalToBodyContext.Provider value={true}>\n {children}\n </DisablePortalToBodyContext.Provider>\n </StyledContent>\n </StyledMotionWrapper>\n </Dialog.Content>\n </DragContext.Provider>\n );\n};\n\n/**\n * Draggable modal content component with full drag-and-drop functionality.\n * Only rendered when draggable={true} to avoid unnecessary overhead.\n */\nexport const DraggableModalContent: React.FC<ModalContentProps> = ({\n children,\n label,\n dataAttributes,\n zIndex,\n rest,\n dialogContentProps,\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 const isMobile = useIsMobile();\n\n const handleHeaderMouseDown = React.useCallback((e: React.MouseEvent) => {\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 > 780px) or above (viewport <= 780px)\n const isRailOnSide = window.innerWidth > 780;\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 right side of the modal\n // Reduce maxX to prevent rail from going off-screen\n maxX = window.innerWidth - modalWidth - RAIL_EXTRA_SPACE;\n } else {\n // Rail is positioned above the modal (viewport <= 780px)\n // Account for rail height + offset at the top\n minY = RAIL_BUTTON_SIZE + RAIL_OFFSET;\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\n const dragContextValue = React.useMemo<DragContextValue>(\n () => ({\n position,\n isDragging,\n onHeaderMouseDown: handleHeaderMouseDown,\n contentRef,\n draggable: true,\n }),\n [position, isDragging, handleHeaderMouseDown]\n );\n\n // Prevent modal from closing on outside interaction when draggable\n const handleInteractOutside = React.useCallback((e: Event) => {\n e.preventDefault();\n }, []);\n\n // Get appropriate animation variants based on context\n const contentVariants = getContentVariants(isMobile, true);\n\n return (\n <DragContext.Provider value={dragContextValue}>\n <Dialog.Content\n asChild\n aria-label={label}\n {...dialogContentProps}\n onInteractOutside={handleInteractOutside}\n >\n <StyledMotionWrapper\n $isMobile={isMobile}\n $zIndex={zIndex}\n variants={contentVariants}\n initial=\"initial\"\n animate=\"animate\"\n exit=\"exit\"\n style={{\n // Apply drag offset transforms\n // For draggable modals, variants only handle opacity, so we apply transforms here\n // Combined with top: 50%, left: 50%, these create the centering + drag offset\n x: `calc(-50% + ${position.x}px)`,\n y: `calc(-50% + ${position.y}px)`,\n }}\n >\n <StyledContent\n data-slot=\"modal-content\"\n ref={contentRef}\n draggable={true}\n isDragging={isDragging}\n {...dataAttributes}\n {...rest}\n >\n {children}\n </StyledContent>\n </StyledMotionWrapper>\n </Dialog.Content>\n </DragContext.Provider>\n );\n};\n","// Shared constants for both Modal versions\n\n// Default z-index values (v1 only - v2 relies on portal stacking order)\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 = \"800px\";\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\n// Note: 64px doesn't have a direct space token match (space[500] = 32px, space[600] = 40px)\n// Keeping as hardcoded value for now as it's a specific layout constraint\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// Mobile breakpoint for bottom sheet layout\nexport const MOBILE_BREAKPOINT = \"780px\";\n\n// Rail button constants\nexport const RAIL_BUTTON_SIZE = 44; // px\nexport const RAIL_OFFSET = 12; // px from card edge\nexport const RAIL_GAP = 12; // px between buttons\nexport const RAIL_EXTRA_SPACE = RAIL_BUTTON_SIZE + RAIL_OFFSET; // 56px\n","import type { Variants } from \"motion/react\";\nimport { MOBILE_BREAKPOINT } from \"../shared/constants\";\n\nconst DURATION_MOBILE: number = 0.6;\nconst DURATION_DESKTOP: number = 0.3;\n\nconst desktopTransition = {\n duration: DURATION_DESKTOP,\n ease: \"easeInOut\" as const,\n};\n\nconst mobileTransition = {\n duration: DURATION_MOBILE,\n ease: \"easeInOut\" as const,\n};\n\n/**\n * Animation variants for desktop modal (content and overlay).\n * Content: Fade in with subtle scale effect for a polished entrance.\n * Overlay: Simple fade to match content timing.\n * IMPORTANT: Content includes translate(-50%, -50%) to center the modal since\n * CSS transform is removed to prevent conflicts with Motion.\n */\nexport const desktopModalVariants: Variants = {\n initial: {\n opacity: 0,\n scale: 0.95,\n x: \"-50%\",\n y: \"-50%\",\n transition: desktopTransition,\n },\n animate: {\n opacity: 1,\n scale: 1,\n x: \"-50%\",\n y: \"-50%\",\n transition: desktopTransition,\n },\n exit: {\n opacity: 0,\n scale: 0.95,\n x: \"-50%\",\n y: \"-50%\",\n transition: desktopTransition,\n },\n};\n\n/**\n * Animation variants for desktop overlay.\n * Matches desktop modal transition timing.\n */\nexport const desktopOverlayVariants: Variants = {\n initial: {\n opacity: 0,\n transition: desktopTransition,\n },\n animate: {\n opacity: 1,\n transition: desktopTransition,\n },\n exit: {\n opacity: 0,\n transition: desktopTransition,\n },\n};\n\n/**\n * Animation variants for mobile drawer (content).\n * Slides up from bottom with fade for a native-feeling drawer interaction.\n * Includes horizontal centering (translateX(-50%)) for proper positioning.\n */\nexport const mobileDrawerVariants: Variants = {\n initial: {\n opacity: 0,\n x: \"-50%\",\n y: \"100%\",\n transition: mobileTransition,\n },\n animate: {\n opacity: 1,\n x: \"-50%\",\n y: 0,\n transition: mobileTransition,\n },\n exit: {\n opacity: 0,\n x: \"-50%\",\n y: \"100%\",\n transition: mobileTransition,\n },\n};\n\n/**\n * Animation variants for mobile overlay.\n * Matches mobile drawer transition timing.\n */\nexport const mobileOverlayVariants: Variants = {\n initial: {\n opacity: 0,\n transition: mobileTransition,\n },\n animate: {\n opacity: 1,\n transition: mobileTransition,\n },\n exit: {\n opacity: 0,\n transition: mobileTransition,\n },\n};\n\n/**\n * Animation variants for draggable modals.\n * Only animates opacity, not transforms, since dragging handles positioning.\n * Uses desktop timing since draggable modals are desktop-only.\n * NOTE: Centering transforms are handled in StyledContent to work with drag positioning.\n */\nexport const draggableModalVariants: Variants = {\n initial: {\n opacity: 0,\n transition: desktopTransition,\n },\n animate: {\n opacity: 1,\n transition: desktopTransition,\n },\n exit: {\n opacity: 0,\n transition: desktopTransition,\n },\n};\n\n/**\n * Get the appropriate content variants based on context.\n */\nexport function getContentVariants(\n isMobile: boolean,\n isDraggable: boolean\n): Variants {\n if (isDraggable) {\n return draggableModalVariants;\n }\n return isMobile ? mobileDrawerVariants : desktopModalVariants;\n}\n\n/**\n * Get the appropriate overlay variants based on context.\n */\nexport function getOverlayVariants(isMobile: boolean): Variants {\n return isMobile ? mobileOverlayVariants : desktopOverlayVariants;\n}\n\n/**\n * Hook to detect mobile viewport based on MOBILE_BREAKPOINT (780px).\n * Returns true if viewport is at or below the mobile breakpoint.\n */\nexport function useIsMobile(): boolean {\n const [isMobile, setIsMobile] = React.useState(() => {\n if (typeof window === \"undefined\") return false;\n return window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT})`).matches;\n });\n\n React.useEffect(() => {\n if (typeof window === \"undefined\") return;\n\n const mediaQuery = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT})`);\n const handler = (e: MediaQueryListEvent) => setIsMobile(e.matches);\n\n // Modern browsers\n if (mediaQuery.addEventListener) {\n mediaQuery.addEventListener(\"change\", handler);\n return () => mediaQuery.removeEventListener(\"change\", handler);\n }\n // Fallback for older browsers\n else if (mediaQuery.addListener) {\n mediaQuery.addListener(handler);\n return () => mediaQuery.removeListener(handler);\n }\n }, []);\n\n return isMobile;\n}\n\n// Need to import React for the hook\nimport * as React from \"react\";\n","import * as React from \"react\";\nimport styled from \"styled-components\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport {\n COMMON,\n FLEXBOX,\n BORDER,\n LAYOUT,\n} from \"@sproutsocial/seeds-react-system-props\";\nimport { MOBILE_BREAKPOINT } from \"../../shared/constants\";\nimport type { TypeModalFooterProps } from \"../ModalTypes\";\nimport { ModalCloseWrapper } from \"./ModalCloseWrapper\";\n\n/**\n * Base styled footer component for custom modal footers.\n *\n * Use this component when you need complete control over the footer layout\n * and don't want to use the slot-based ModalFooter component.\n *\n * @example\n * <ModalCustomFooter>\n * <YourCustomFooterContent />\n * </ModalCustomFooter>\n */\nexport const ModalCustomFooter = styled(Box)`\n flex: 0 0 auto;\n font-family: ${(props) => props.theme.fontFamily};\n background-color: ${(props) => props.theme.colors.container.background.base};\n padding: ${(props) => props.theme.space[400]};\n border-bottom-right-radius: ${(props) => props.theme.radii[800]};\n border-bottom-left-radius: ${(props) => props.theme.radii[800]};\n display: flex;\n align-items: center;\n justify-content: flex-end;\n gap: ${(props) => props.theme.space[100]};\n\n /* Flat bottom corners to blend with device edge on mobile */\n @media (max-width: ${MOBILE_BREAKPOINT}) {\n border-bottom-right-radius: 0;\n border-bottom-left-radius: 0;\n }\n\n ${COMMON}\n ${FLEXBOX}\n ${BORDER}\n ${LAYOUT}\n`;\n\nModalCustomFooter.displayName = \"ModalCustomFooter\";\n\n/**\n * Modal footer component for action buttons.\n *\n * This component only supports slot-based rendering with button props.\n * For custom footer layouts, use ModalCustomFooter instead.\n *\n * Provides automatic button wrapping and layout management. Supports three button positions:\n * - primaryButton: Main action button on the right (auto-closes modal)\n * - cancelButton: Secondary action on the right (auto-closes modal)\n * - leftAction: Optional action on the left (no auto-close, for destructive actions)\n *\n * @example\n * <ModalFooter\n * cancelButton={<Button>Cancel</Button>}\n * primaryButton={<Button appearance=\"primary\">Save</Button>}\n * />\n *\n * @example\n * // With left action\n * <ModalFooter\n * leftAction={<Button appearance=\"destructive\">Delete</Button>}\n * cancelButton={<Button>Cancel</Button>}\n * primaryButton={<Button appearance=\"primary\">Save</Button>}\n * />\n */\nexport const ModalFooter = (props: TypeModalFooterProps) => {\n const { cancelButton, primaryButton, leftAction, ...rest } = props;\n\n // If no simplified props provided, return empty footer\n if (!cancelButton && !primaryButton && !leftAction) {\n return null;\n }\n\n // Build simplified API layout\n return (\n <ModalCustomFooter data-slot=\"modal-footer\" data-qa-modal-footer {...rest}>\n {/* Left action (e.g., Delete button) */}\n {leftAction ? leftAction : null}\n\n {/* Right-aligned button group (Cancel + Primary) */}\n <Box display=\"flex\" gap={300} marginLeft=\"auto\">\n {cancelButton && <ModalCloseWrapper>{cancelButton}</ModalCloseWrapper>}\n {primaryButton && (\n <ModalCloseWrapper>{primaryButton}</ModalCloseWrapper>\n )}\n </Box>\n </ModalCustomFooter>\n );\n};\n\nModalFooter.displayName = \"ModalFooter\";\n","import * as React from \"react\";\nimport * as Dialog from \"@radix-ui/react-dialog\";\n\n/**\n * Props for ModalCloseWrapper component.\n */\nexport interface ModalCloseWrapperProps {\n /** The element to wrap with close functionality */\n children: React.ReactNode;\n /** Optional click handler called before closing the modal */\n onClick?: (e: React.MouseEvent) => void;\n /** Whether to merge props into the child element (default: true) */\n asChild?: boolean;\n}\n\n/**\n * A wrapper component that closes the modal when its child is clicked.\n * Uses asChild pattern like Radix primitives - by default asChild is true.\n */\nexport const ModalCloseWrapper = (props: ModalCloseWrapperProps) => {\n const { children, onClick, asChild = true, ...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 {React.isValidElement(children)\n ? React.cloneElement(children as React.ReactElement<any>, {\n \"data-slot\": \"modal-close-wrapper\",\n \"data-qa-modal-close-wrapper\": \"\",\n ...((children as React.ReactElement<any>).props || {}),\n })\n : children}\n </Dialog.Close>\n );\n};\n\nModalCloseWrapper.displayName = \"ModalCloseWrapper\";\n","import * as React from \"react\";\nimport styled from \"styled-components\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport {\n COMMON,\n FLEXBOX,\n BORDER,\n LAYOUT,\n} from \"@sproutsocial/seeds-react-system-props\";\nimport type { TypeModalBodyProps } from \"../ModalTypes\";\n\n/**\n * Modal body component for the main content area.\n *\n * This component provides the scrollable content area of the modal with proper spacing\n * and overflow handling. It automatically takes up available space between the header\n * and footer, with vertical scrolling enabled when content exceeds available height.\n *\n * @example\n * <ModalBody>\n * <Text>Your modal content goes here.</Text>\n * <FormField label=\"Name\" />\n * </ModalBody>\n */\nconst StyledModalBody = styled(Box)`\n font-family: ${(props) => props.theme.fontFamily};\n overflow-y: auto;\n flex: 1 1 auto;\n padding: ${(props) => `0 ${props.theme.space[400]}`};\n ${(props) => props.theme.typography[300]}\n color: ${(props) => props.theme.colors.text.body};\n @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n flex-basis: 100%;\n }\n\n ${COMMON}\n ${FLEXBOX}\n ${BORDER}\n ${LAYOUT}\n`;\n\nStyledModalBody.displayName = \"ModalBody\";\n\nexport const ModalBody = React.forwardRef<HTMLDivElement, TypeModalBodyProps>(\n ({ children, ...rest }, ref) => {\n return (\n <StyledModalBody\n data-slot=\"modal-body\"\n data-qa-modal-body\n ref={ref}\n {...rest}\n >\n {children}\n </StyledModalBody>\n );\n }\n);\n\nModalBody.displayName = \"ModalBody\";\n","import * as React from \"react\";\nimport * as Dialog from \"@radix-ui/react-dialog\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport type { TypeModalDescriptionProps } from \"../ModalTypes\";\n\n/**\n * Modal description component that wraps content with accessible Dialog.Description.\n *\n * This component automatically connects description text to the modal dialog via ARIA attributes,\n * ensuring screen readers announce the description when the modal opens. Use this for additional\n * context beyond the title that helps users understand the modal's purpose.\n *\n * @example\n * <ModalDescription>\n * Deleting this item will permanently remove it from your account.\n * </ModalDescription>\n */\nexport const ModalDescription = React.forwardRef<\n HTMLDivElement,\n TypeModalDescriptionProps\n>(({ children, descriptionProps = {}, ...rest }, ref) => {\n return (\n <Dialog.Description asChild {...descriptionProps}>\n <Box\n data-slot=\"modal-description\"\n data-qa-modal-description\n ref={ref}\n {...rest}\n >\n {children}\n </Box>\n </Dialog.Description>\n );\n});\n\nModalDescription.displayName = \"ModalDescription\";\n","import * as React from \"react\";\nimport styled from \"styled-components\";\nimport type { TypeModalRailProps } from \"../ModalTypes\";\nimport {\n MOBILE_BREAKPOINT,\n RAIL_BUTTON_SIZE,\n RAIL_OFFSET,\n RAIL_GAP,\n} from \"../../shared/constants\";\n\n/**\n * Container for floating action buttons displayed alongside the modal.\n *\n * The rail provides a vertical column of action buttons positioned to the right of the modal\n * on desktop, and switches to a horizontal row positioned above the modal on mobile devices.\n * Always includes a close button by default, with support for additional custom actions.\n *\n * Actions are rendered through the Modal's `actions` prop or by directly including\n * ModalAction components as children.\n *\n * @example\n * <ModalRail>\n * <ModalAction actionType=\"close\" aria-label=\"Close\" iconName=\"x-outline\" />\n * <ModalAction aria-label=\"Expand\" iconName=\"arrows-pointing-out\" onClick={handleExpand} />\n * </ModalRail>\n */\nconst Rail = styled.div`\n position: absolute;\n top: ${RAIL_OFFSET}px;\n right: calc(-1 * (${RAIL_BUTTON_SIZE}px + ${RAIL_OFFSET}px));\n display: flex;\n flex-direction: column;\n gap: ${RAIL_GAP}px;\n z-index: 1;\n\n @media (max-width: ${MOBILE_BREAKPOINT}) {\n /* Move rail above the modal on the right side */\n top: auto;\n bottom: calc(100% + ${RAIL_OFFSET}px);\n right: ${RAIL_OFFSET}px;\n left: auto;\n /* Change to horizontal layout with reversed order */\n flex-direction: row-reverse;\n }\n`;\n\nexport const ModalRail: React.FC<TypeModalRailProps> = ({ children }) => {\n return (\n <Rail\n data-slot=\"modal-rail\"\n data-qa-modal-rail\n aria-label=\"Modal quick actions\"\n >\n {children}\n </Rail>\n );\n};\n\nModalRail.displayName = \"ModalRail\";\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 { focusRing } from \"@sproutsocial/seeds-react-mixins\";\nimport type { TypeModalActionProps } from \"../ModalTypes\";\nimport { RAIL_BUTTON_SIZE } from \"../../shared/constants\";\n\n/**\n * Action button component for the modal's floating rail.\n *\n * These buttons appear in the vertical rail next to the modal (horizontal on mobile)\n * and provide quick access to common actions. Supports two action types:\n * - \"close\": Automatically closes the modal when clicked\n * - \"button\" (default): Custom action with your own onClick handler\n *\n * @example\n * // Close button (built-in functionality)\n * <ModalAction\n * actionType=\"close\"\n * aria-label=\"Close\"\n * iconName=\"x-outline\"\n * />\n *\n * @example\n * // Custom action button\n * <ModalAction\n * aria-label=\"Expand to fullscreen\"\n * iconName=\"arrows-pointing-out\"\n * onClick={() => console.log('expand')}\n * />\n */\n\nconst RailButton = styled.button`\n width: ${RAIL_BUTTON_SIZE}px;\n height: ${(props) => props.theme.space[500]};\n display: inline-grid;\n place-items: center;\n border-radius: ${(props) => props.theme.radii.outer};\n border: none;\n background: ${(props) => props.theme.colors.button.overlay.background.base};\n color: ${(props) => props.theme.colors.button.overlay.text.base};\n cursor: pointer;\n outline: none;\n transition: all ${(props) => props.theme.duration.fast}\n ${(props) => props.theme.easing.ease_inout};\n\n &:hover {\n background: ${(props) =>\n props.theme.colors.button.overlay.background.hover};\n }\n\n &:hover,\n &:active {\n transform: none;\n }\n\n &:focus-visible {\n ${focusRing}\n }\n\n &:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n }\n`;\n\nexport const ModalAction: React.FC<TypeModalActionProps> = ({\n \"aria-label\": ariaLabel,\n iconName,\n disabled,\n actionType,\n onClick,\n ...rest\n}) => {\n const button = (\n <RailButton\n data-slot=\"modal-action\"\n data-qa-modal-action\n data-qa-modal-action-type={actionType || \"button\"}\n aria-label={ariaLabel}\n title={ariaLabel}\n disabled={disabled}\n onClick={onClick}\n {...rest}\n >\n {iconName && <Icon name={iconName} size=\"small\" aria-label={ariaLabel} />}\n </RailButton>\n );\n\n if (actionType === \"close\") {\n return <Dialog.Close asChild>{button}</Dialog.Close>;\n }\n\n return button;\n};\n\nModalAction.displayName = \"ModalAction\";\n","import { css } from \"styled-components\";\nimport { theme } from \"@sproutsocial/seeds-react-theme\";\n\nexport const svgToDataURL = (svgStr: string) => {\n const encoded = encodeURIComponent(svgStr)\n .replace(/'/g, \"%27\")\n .replace(/\"/g, \"%22\");\n\n const header = \"data:image/svg+xml,\";\n const dataUrl = header + encoded;\n\n return dataUrl;\n};\n\nexport const visuallyHidden = css`\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0 0 0 0);\n border: 0;\n`;\n\nexport const focusRing = css`\n box-shadow: 0 0 0 1px ${theme.colors.button.primary.background.base},\n 0 0px 0px 4px\n color-mix(\n in srgb,\n ${theme.colors.button.primary.background.base},\n transparent 70%\n );\n outline: none;\n\n &::-moz-focus-inner {\n border: 0;\n }\n`;\n\nexport const pill = css`\n min-width: ${theme.space[600]};\n min-height: ${theme.space[600]};\n padding: ${theme.space[300]};\n border-radius: ${theme.radii.pill};\n`;\n\nexport const disabled = css`\n opacity: 0.4;\n pointer-events: none;\n`;\n","import * as React from \"react\";\nimport { Button } from \"@sproutsocial/seeds-react-button\";\nimport type { TypeButtonProps } from \"@sproutsocial/seeds-react-button\";\n\n/**\n * Props for ModalExternalTrigger component.\n */\nexport interface ModalExternalTriggerProps\n extends Omit<TypeButtonProps, \"onClick\"> {\n /** Callback when button is clicked to trigger modal open */\n onTrigger: () => void;\n /** Whether the modal is currently open (for ARIA expanded state) */\n isOpen: boolean;\n /** Optional modal ID for aria-controls attribute */\n modalId?: string;\n /** Optional onClick handler (called before onTrigger) */\n onClick?: React.MouseEventHandler<HTMLButtonElement>;\n}\n\n/**\n * A Button component pre-configured for triggering modals from outside the Modal component tree.\n *\n * ⚠️ **NOT RECOMMENDED** - Prefer using modalTrigger prop or ModalTrigger component.\n * Use this component ONLY as a last resort when architectural constraints prevent keeping\n * the trigger inside the Modal component tree.\n *\n * This component wraps the Seeds Button with automatic ARIA attributes for modal triggers.\n * However, focus restoration still requires manual handling via onCloseAutoFocus callback\n * due to Radix UI's architectural limitations with external triggers.\n *\n * **Why modalTrigger prop is better:**\n * - Automatic ARIA attributes\n * - Automatic focus restoration (no onCloseAutoFocus needed)\n * - Better touch device support\n * - Follows WAI-ARIA Dialog best practices\n *\n * **When to use ModalExternalTrigger:**\n * - Trigger must live outside Modal component tree (e.g., in a page header)\n * - Using Seeds Button as the trigger\n * - Want automatic ARIA attributes without manual hook usage\n *\n * **Usage pattern with focus restoration:**\n * You must still handle focus restoration manually by passing a ref and implementing\n * onCloseAutoFocus on the Modal component.\n *\n * @example\n * ```tsx\n * const [isOpen, setIsOpen] = useState(false);\n * const triggerRef = useRef<HTMLButtonElement>(null);\n *\n * return (\n * <>\n * <ModalExternalTrigger\n * ref={triggerRef}\n * isOpen={isOpen}\n * onTrigger={() => setIsOpen(true)}\n * appearance=\"primary\"\n * >\n * Open Modal\n * </ModalExternalTrigger>\n *\n * <Modal\n * open={isOpen}\n * onOpenChange={setIsOpen}\n * onCloseAutoFocus={(e) => {\n * e.preventDefault();\n * triggerRef.current?.focus();\n * }}\n * >\n * <ModalBody>Content</ModalBody>\n * </Modal>\n * </>\n * );\n * ```\n *\n * @see useModalExternalTrigger - Hook alternative for non-Button triggers\n */\nexport const ModalExternalTrigger = React.forwardRef<\n HTMLButtonElement,\n ModalExternalTriggerProps\n>(({ isOpen, onTrigger, modalId, onClick, ...buttonProps }, ref) => {\n const handleClick = React.useCallback(\n (e: React.MouseEvent<HTMLButtonElement>) => {\n onClick?.(e);\n if (!e.defaultPrevented) {\n onTrigger();\n }\n },\n [onClick, onTrigger]\n );\n\n return (\n <Button\n ref={ref}\n onClick={handleClick}\n aria-haspopup=\"dialog\"\n aria-expanded={isOpen}\n aria-controls={modalId}\n {...buttonProps}\n />\n );\n});\n\nModalExternalTrigger.displayName = \"ModalExternalTrigger\";\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport { motion } from \"motion/react\";\nimport {\n COMMON,\n BORDER,\n LAYOUT,\n POSITION,\n type TypeSystemCommonProps,\n type TypeSystemBorderProps,\n type TypeSystemLayoutProps,\n type TypeSystemPositionProps,\n} from \"@sproutsocial/seeds-react-system-props\";\n\ninterface StyledOverlayProps\n extends TypeSystemCommonProps,\n TypeSystemBorderProps,\n TypeSystemLayoutProps,\n TypeSystemPositionProps {\n allowInteraction?: boolean;\n}\n\n// Styled motion.div for the overlay wrapper\nexport const StyledMotionOverlay = styled(motion.div)<{ $zIndex?: number }>`\n position: fixed;\n top: 0px;\n left: 0px;\n right: 0px;\n bottom: 0px;\n z-index: ${(props) => props.$zIndex ?? 6};\n`;\n\nexport const StyledOverlay = styled.div.withConfig({\n shouldForwardProp: (prop) => ![\"allowInteraction\"].includes(prop),\n})<StyledOverlayProps>`\n width: 100%;\n height: 100%;\n background-color: ${(props) => props.theme.colors.overlay.background.base};\n\n /* Allow clicking through overlay when modal is draggable */\n ${(props) =>\n props.allowInteraction &&\n `\n pointer-events: none;\n `}\n\n ${COMMON}\n ${BORDER}\n ${LAYOUT}\n ${POSITION}\n`;\n\nStyledOverlay.displayName = \"ModalOverlay\";\n"],"mappings":"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","names":["ModalFooter","ModalHeader","Modal_default","React","import_react","import_seeds_react_box","className","ReactModal","styled","Box","import_jsx_runtime","Box","Text","Button","Icon","width","zIndex","React","Dialog","import_react","React","Dialog","import_styled_components","import_seeds_react_box","import_seeds_react_text","import_seeds_react_system_props","React","import_react","import_styled_components","BODY_PADDING","import_seeds_react_system_props","React","import_jsx_runtime","styled","BODY_PADDING","zIndex","e","import_jsx_runtime","styled","Box","ModalHeader","Text","React","import_styled_components","import_seeds_react_box","import_seeds_react_system_props","React","Dialog","import_jsx_runtime","import_jsx_runtime","styled","Box","ModalFooter","React","import_styled_components","import_seeds_react_box","import_seeds_react_system_props","import_jsx_runtime","styled","Box","React","Dialog","import_seeds_react_box","import_jsx_runtime","Box","React","import_styled_components","import_jsx_runtime","styled","React","Dialog","import_styled_components","import_seeds_react_icon","import_styled_components","import_jsx_runtime","styled","disabled","Icon","React","import_seeds_react_button","import_jsx_runtime","import_react","import_styled_components","import_seeds_react_system_props","styled","import_jsx_runtime","Modal","zIndex","ModalHeader","Modal_default","Modal"]}
package/dist/v2/index.d.mts CHANGED
@@ -80,7 +80,7 @@ interface ModalExternalTriggerProps extends Omit<TypeButtonProps, "onClick"> {
80
80
  */
81
81
  declare const ModalExternalTrigger: React.ForwardRefExoticComponent<Omit<ModalExternalTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
82
82
 
83
- declare const DEFAULT_MODAL_WIDTH = "600px";
83
+ declare const DEFAULT_MODAL_WIDTH = "800px";
84
84
  declare const DEFAULT_MODAL_BG = "container.background.base";
85
85
  declare const BODY_PADDING = "64px";
86
86
  declare const MODAL_SIZE_PRESETS: {
package/dist/v2/index.d.ts CHANGED
@@ -80,7 +80,7 @@ interface ModalExternalTriggerProps extends Omit<TypeButtonProps, "onClick"> {
80
80
  */
81
81
  declare const ModalExternalTrigger: React.ForwardRefExoticComponent<Omit<ModalExternalTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
82
82
 
83
- declare const DEFAULT_MODAL_WIDTH = "600px";
83
+ declare const DEFAULT_MODAL_WIDTH = "800px";
84
84
  declare const DEFAULT_MODAL_BG = "container.background.base";
85
85
  declare const BODY_PADDING = "64px";
86
86
  declare const MODAL_SIZE_PRESETS: {
package/dist/v2/index.js CHANGED
@@ -71,7 +71,7 @@ var import_styled_components = __toESM(require("styled-components"));
71
71
  var import_seeds_react_portal = require("@sproutsocial/seeds-react-portal");
72
72
 
73
73
  // src/shared/constants.ts
74
- var DEFAULT_MODAL_WIDTH = "600px";
74
+ var DEFAULT_MODAL_WIDTH = "800px";
75
75
  var DEFAULT_MODAL_BG = "container.background.base";
76
76
  var BODY_PADDING = "64px";
77
77
  var MODAL_SIZE_PRESETS = {
@@ -864,6 +864,10 @@ var Modal = (props) => {
864
864
  );
865
865
  const wrappedOnEscapeKeyDown = React12.useCallback(
866
866
  (e) => {
867
+ const hasOpenPopout = document.querySelector("[data-qa-popout]") !== null;
868
+ if (hasOpenPopout) {
869
+ e.preventDefault();
870
+ }
867
871
  if (disableEscapeKeyClose) {
868
872
  e.preventDefault();
869
873
  }