@clerk/ui 1.0.0-snapshot.v20251215212157 → 1.0.0-snapshot.v20251217162523

package/dist/elements/Drawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.js","names":["React","FloatingOverlay","CloseIcon"],"sources":["../../src/elements/Drawer.tsx"],"sourcesContent":["import { usePortalRoot, useSafeLayoutEffect } from '@clerk/shared/react/index';\nimport type { UseDismissProps, UseFloatingOptions, UseRoleProps } from '@floating-ui/react';\nimport {\n  FloatingFocusManager,\n  FloatingPortal,\n  useClick,\n  useDismiss,\n  useFloating,\n  useInteractions,\n  useMergeRefs,\n  useRole,\n  useTransitionStyles,\n} from '@floating-ui/react';\nimport * as React from 'react';\n\nimport type { LocalizationKey } from '../customizables';\nimport { Box, descriptors, Flex, Heading, Icon, Span, useAppearance } from '../customizables';\nimport { transitionDurationValues, transitionTiming } from '../foundations/transitions';\nimport { useDirection, usePrefersReducedMotion, useScrollLock } from '../hooks';\nimport { Close as CloseIcon } from '../icons';\nimport type { ThemableCssProp } from '../styledSystem';\nimport { common } from '../styledSystem';\nimport { colors } from '../utils/colors';\nimport { IconButton } from './IconButton';\n\ntype FloatingPortalProps = React.ComponentProps<typeof FloatingPortal>;\n\n/* -------------------------------------------------------------------------------------------------\n * Drawer Context\n * -----------------------------------------------------------------------------------------------*/\n\ninterface DrawerContext {\n  isOpen: boolean;\n  setIsOpen: (open: boolean) => void;\n  strategy: UseFloatingOptions['strategy'];\n  refs: ReturnType<typeof useFloating>['refs'];\n  context: ReturnType<typeof useFloating>['context'];\n  getFloatingProps: ReturnType<typeof useInteractions>['getFloatingProps'];\n  portalProps: FloatingPortalProps;\n  direction: ReturnType<typeof useDirection>;\n}\n\nconst DrawerContext = React.createContext<DrawerContext | null>(null);\n\nexport const useDrawerContext = () => {\n  const context = React.useContext(DrawerContext);\n  if (!context) {\n    throw new Error('Drawer components must be wrapped in <Drawer.Root>');\n  }\n  return context;\n};\n\n/* -------------------------------------------------------------------------------------------------\n * Drawer.Root\n * -----------------------------------------------------------------------------------------------*/\n\ninterface RootProps {\n  children: React.ReactNode;\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n  /**\n   * The strategy to use when positioning the floating element.\n   * @default 'fixed'\n   * @see https://floating-ui.com/docs/useFloating#strategy\n   */\n  strategy?: UseFloatingOptions['strategy'];\n  /**\n   * @see https://floating-ui.com/docs/useFloating\n   */\n  floatingProps?: Omit<UseFloatingOptions, 'open' | 'onOpenChange' | 'strategy' | 'transform'>;\n  /**\n   * @see https://floating-ui.com/docs/FloatingPortal\n   */\n  portalProps?: FloatingPortalProps;\n  /**\n   * @see https://floating-ui.com/docs/useDismiss\n   */\n  dismissProps?: UseDismissProps;\n}\n\nfunction Root({\n  children,\n  open,\n  onOpenChange,\n  strategy = 'fixed',\n  floatingProps,\n  portalProps,\n  dismissProps,\n}: RootProps) {\n  const direction = useDirection();\n  const portalRoot = usePortalRoot();\n  const effectivePortalRoot = portalProps?.root ?? portalRoot?.() ?? undefined;\n\n  const { refs, context } = useFloating({\n    open,\n    onOpenChange,\n    transform: false,\n    strategy,\n    placement: direction === 'ltr' ? 'right' : 'left',\n    ...floatingProps,\n  });\n\n  const { getFloatingProps } = useInteractions([\n    useClick(context),\n    useDismiss(context, dismissProps),\n    useRole(context),\n  ]);\n\n  return (\n    <DrawerContext.Provider\n      value={{\n        isOpen: open,\n        setIsOpen: onOpenChange,\n        strategy,\n        portalProps: { ...portalProps, root: effectivePortalRoot },\n        refs,\n        context,\n        getFloatingProps,\n        direction,\n      }}\n    >\n      <FloatingPortal\n        {...portalProps}\n        root={effectivePortalRoot}\n      >\n        {children}\n      </FloatingPortal>\n    </DrawerContext.Provider>\n  );\n}\n\n/* -------------------------------------------------------------------------------------------------\n * Drawer.Overlay\n * -----------------------------------------------------------------------------------------------*/\n\nexport const FloatingOverlay = React.forwardRef(function FloatingOverlay(\n  props: React.ComponentPropsWithoutRef<typeof Box>,\n  ref: React.ForwardedRef<HTMLDivElement>,\n) {\n  const { strategy } = useDrawerContext();\n  const { disableScrollLock, enableScrollLock } = useScrollLock();\n\n  useSafeLayoutEffect(() => {\n    if (strategy !== 'fixed') {\n      return;\n    }\n    enableScrollLock();\n    return () => {\n      disableScrollLock();\n    };\n  }, [strategy, disableScrollLock, enableScrollLock]);\n\n  return (\n    <Box\n      ref={ref}\n      {...props}\n      elementDescriptor={descriptors.drawerBackdrop}\n      sx={[\n        t => ({\n          inset: 0,\n          backgroundColor: colors.setAlpha(t.colors.$colorBackground, 0.28),\n        }),\n        props.sx,\n      ]}\n    />\n  );\n});\n\nconst Overlay = React.forwardRef<HTMLDivElement>((_, ref) => {\n  const { strategy, context } = useDrawerContext();\n\n  const { isMounted, styles: transitionStyles } = useTransitionStyles(context, {\n    initial: { opacity: 0 },\n    open: { opacity: 1 },\n    close: { opacity: 0 },\n    common: {\n      position: strategy,\n      inset: 0,\n      transitionProperty: 'opacity',\n      transitionTimingFunction: transitionTiming.bezier,\n    },\n    duration: transitionDurationValues.drawer,\n  });\n\n  if (!isMounted) {\n    return null;\n  }\n\n  return (\n    <FloatingOverlay\n      ref={ref}\n      style={{\n        ...transitionStyles,\n      }}\n    />\n  );\n});\n\nOverlay.displayName = 'Drawer.Overlay';\n\n/* -------------------------------------------------------------------------------------------------\n * Drawer.Content\n * -----------------------------------------------------------------------------------------------*/\n\ninterface ContentProps {\n  children: React.ReactNode;\n}\n\nconst Content = React.forwardRef<HTMLDivElement, ContentProps>(({ children }, ref) => {\n  const prefersReducedMotion = usePrefersReducedMotion();\n  const { animations: layoutAnimations } = useAppearance().parsedOptions;\n  const isMotionSafe = !prefersReducedMotion && layoutAnimations === true;\n  const { strategy, refs, context, getFloatingProps, direction } = useDrawerContext();\n  const mergedRefs = useMergeRefs([ref, refs.setFloating]);\n\n  const { isMounted, styles: transitionStyles } = useTransitionStyles(context, {\n    initial: { transform: `translate3d(var(--transform-offset), 0, 0)` },\n    open: { transform: 'translate3d(0, 0, 0)' },\n    close: { transform: `translate3d(var(--transform-offset), 0, 0)` },\n    common: {\n      transitionProperty: 'transform',\n      transitionTimingFunction: transitionTiming.bezier,\n    },\n    duration: isMotionSafe ? transitionDurationValues.drawer : 0,\n  });\n\n  if (!isMounted) {\n    return null;\n  }\n\n  return (\n    <FloatingFocusManager\n      context={context}\n      modal\n      outsideElementsInert\n      initialFocus={refs.floating}\n    >\n      <Box\n        ref={mergedRefs}\n        {...getFloatingProps()}\n        sx={t => ({\n          position: strategy,\n          insetBlock: 0,\n          insetInline: 0,\n          pointerEvents: 'none',\n          isolation: 'isolate',\n          // When drawer is within the profile components, we need to ensure it is above the drawer\n          // renders above the profile close button\n          zIndex: strategy === 'absolute' ? t.zIndices.$modal : undefined,\n        })}\n        elementDescriptor={descriptors.drawerRoot}\n      >\n        <Flex\n          elementDescriptor={descriptors.drawerContent}\n          style={transitionStyles}\n          direction='col'\n          sx={t => ({\n            // Apply the conditional right offset + the spread of the\n            // box shadow to ensure it is fully offscreen before unmounting\n            '--transform-offset':\n              strategy === 'fixed'\n                ? `calc((100% + ${t.space.$3} + ${t.space.$8x75}) * ${direction === 'rtl' ? -1 : 1})`\n                : `calc((100% + ${t.space.$8x75}) * ${direction === 'rtl' ? -1 : 1})`,\n            willChange: 'transform',\n            position: strategy,\n            insetBlock: strategy === 'fixed' ? t.space.$3 : 0,\n            insetInlineEnd: strategy === 'fixed' ? t.space.$3 : 0,\n            outline: 0,\n            width: t.sizes.$100,\n            maxWidth: strategy === 'fixed' ? `calc(100% - ${t.space.$6})` : '100%',\n            backgroundColor: t.colors.$colorBackground,\n            borderStartStartRadius: t.radii.$lg,\n            borderEndStartRadius: t.radii.$lg,\n            borderEndEndRadius: strategy === 'fixed' ? t.radii.$lg : 0,\n            borderStartEndRadius: strategy === 'fixed' ? t.radii.$lg : 0,\n            borderWidth: t.borderWidths.$normal,\n            borderStyle: t.borderStyles.$solid,\n            borderColor: t.colors.$borderAlpha150,\n            overflow: 'hidden',\n            pointerEvents: 'auto',\n          })}\n        >\n          {children}\n        </Flex>\n      </Box>\n    </FloatingFocusManager>\n  );\n});\n\nContent.displayName = 'Drawer.Content';\n\n/* -------------------------------------------------------------------------------------------------\n * Drawer.Header\n * -----------------------------------------------------------------------------------------------*/\n\ninterface HeaderProps {\n  title?: string | LocalizationKey;\n  children?: React.ReactNode;\n  sx?: ThemableCssProp;\n}\n\nconst Header = React.forwardRef<HTMLDivElement, HeaderProps>(({ title, children, sx }, ref) => {\n  return (\n    <Box\n      ref={ref}\n      elementDescriptor={descriptors.drawerHeader}\n      as='header'\n      sx={[\n        t => ({\n          display: 'flex',\n          background: common.mergedColorsBackground(\n            colors.setAlpha(t.colors.$colorBackground, 1),\n            t.colors.$neutralAlpha50,\n          ),\n          borderBlockEndWidth: t.borderWidths.$normal,\n          borderBlockEndStyle: t.borderStyles.$solid,\n          borderBlockEndColor: t.colors.$borderAlpha150,\n          borderStartStartRadius: t.radii.$lg,\n          borderStartEndRadius: t.radii.$lg,\n          paddingBlock: title ? t.space.$3 : undefined,\n          paddingInline: title ? t.space.$4 : undefined,\n        }),\n        sx,\n      ]}\n    >\n      {title ? (\n        <>\n          <Heading\n            localizationKey={title}\n            as='h2'\n            elementDescriptor={descriptors.drawerTitle}\n            textVariant='h2'\n            sx={{\n              alignSelf: 'center',\n            }}\n          />\n          <Close />\n        </>\n      ) : (\n        children\n      )}\n    </Box>\n  );\n});\n\n/* -------------------------------------------------------------------------------------------------\n * Drawer.Body\n * -----------------------------------------------------------------------------------------------*/\n\ninterface BodyProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n  sx?: ThemableCssProp;\n}\n\nconst Body = React.forwardRef<HTMLDivElement, BodyProps>(({ children, ...props }, ref) => {\n  return (\n    <Box\n      ref={ref}\n      elementDescriptor={descriptors.drawerBody}\n      sx={[\n        () => ({\n          display: 'flex',\n          flexDirection: 'column',\n          flex: 1,\n          overflowY: 'auto',\n          overflowX: 'hidden',\n        }),\n        props.sx,\n      ]}\n      {...props}\n    >\n      {children}\n    </Box>\n  );\n});\n\n/* -------------------------------------------------------------------------------------------------\n * Drawer.Footer\n * -----------------------------------------------------------------------------------------------*/\n\ninterface FooterProps extends React.HTMLAttributes<HTMLDivElement> {\n  children?: React.ReactNode;\n  sx?: ThemableCssProp;\n}\n\nconst Footer = React.forwardRef<HTMLDivElement, FooterProps>(({ children, sx, ...props }, ref) => {\n  return (\n    <Box\n      ref={ref}\n      elementDescriptor={descriptors.drawerFooter}\n      sx={[\n        t => ({\n          display: 'flex',\n          flexDirection: 'column',\n          background: common.mergedColorsBackground(\n            colors.setAlpha(t.colors.$colorBackground, 1),\n            t.colors.$neutralAlpha50,\n          ),\n          borderBlockStartWidth: t.borderWidths.$normal,\n          borderBlockStartStyle: t.borderStyles.$solid,\n          borderBlockStartColor: t.colors.$borderAlpha100,\n          borderEndStartRadius: t.radii.$xl,\n          borderEndEndRadius: t.radii.$xl,\n          paddingBlock: t.space.$3,\n          paddingInline: t.space.$4,\n        }),\n        sx,\n      ]}\n      {...props}\n    >\n      {children}\n    </Box>\n  );\n});\n\n/* -------------------------------------------------------------------------------------------------\n * Drawer.Close\n * -----------------------------------------------------------------------------------------------*/\n\nconst Close = React.forwardRef<HTMLButtonElement>((_, ref) => {\n  const { setIsOpen } = useDrawerContext();\n  return (\n    <IconButton\n      ref={ref}\n      elementDescriptor={descriptors.drawerClose}\n      variant='ghost'\n      aria-label='Close drawer'\n      onClick={() => setIsOpen(false)}\n      icon={\n        <Icon\n          icon={CloseIcon}\n          size='sm'\n        />\n      }\n      sx={t => ({\n        color: t.colors.$colorMutedForeground,\n        padding: t.space.$3,\n        marginInlineStart: 'auto',\n      })}\n    />\n  );\n});\n\nClose.displayName = 'Drawer.Close';\n\n/* -------------------------------------------------------------------------------------------------\n * Drawer.Confirmation\n * -----------------------------------------------------------------------------------------------*/\n\ninterface ConfirmationProps {\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n  children: React.ReactNode;\n  actionsSlot: React.ReactNode;\n  /**\n   * @see https://floating-ui.com/docs/userole\n   */\n  roleProps?: UseRoleProps;\n}\n\nconst Confirmation = React.forwardRef<HTMLDivElement, ConfirmationProps>(\n  ({ open, onOpenChange, children, actionsSlot, roleProps }, ref) => {\n    const prefersReducedMotion = usePrefersReducedMotion();\n    const { animations: layoutAnimations } = useAppearance().parsedOptions;\n    const isMotionSafe = !prefersReducedMotion && layoutAnimations === true;\n\n    const { refs, context } = useFloating({\n      open,\n      onOpenChange,\n      transform: false,\n      strategy: 'absolute',\n    });\n    const { getFloatingProps } = useInteractions([\n      useClick(context),\n      useDismiss(context),\n      useRole(context, { role: 'alertdialog', ...roleProps }),\n    ]);\n\n    const mergedRefs = useMergeRefs([ref, refs.setFloating]);\n\n    const { styles: overlayTransitionStyles } = useTransitionStyles(context, {\n      initial: { opacity: 0 },\n      open: { opacity: 1 },\n      close: { opacity: 0 },\n      common: {\n        transitionProperty: 'opacity',\n        transitionTimingFunction: transitionTiming.bezier,\n      },\n      duration: transitionDurationValues.drawer,\n    });\n\n    const { isMounted, styles: modalTransitionStyles } = useTransitionStyles(context, {\n      initial: { transform: 'translate3D(0, 100%, 0)' },\n      open: { transform: 'translate3D(0, 0, 0)' },\n      close: { transform: 'translate3D(0, 100%, 0)' },\n      common: {\n        transitionProperty: 'transform',\n        transitionTimingFunction: transitionTiming.bezier,\n      },\n      duration: isMotionSafe ? transitionDurationValues.drawer : 0,\n    });\n\n    if (!isMounted) {\n      return null;\n    }\n\n    return (\n      <>\n        <Span\n          elementDescriptor={descriptors.drawerConfirmationBackdrop}\n          style={overlayTransitionStyles}\n          sx={t => ({\n            position: 'absolute',\n            inset: 0,\n            backgroundImage: `linear-gradient(to bottom, ${colors.setAlpha(t.colors.$colorBackground, 0.28)}, ${t.colors.$colorBackground})`,\n          })}\n        />\n\n        <FloatingFocusManager\n          context={context}\n          modal\n          outsideElementsInert\n          initialFocus={refs.floating}\n        >\n          <Box\n            ref={mergedRefs}\n            elementDescriptor={descriptors.drawerConfirmationRoot}\n            style={modalTransitionStyles}\n            {...getFloatingProps()}\n            sx={t => ({\n              display: 'flex',\n              flexDirection: 'column',\n              rowGap: t.space.$6,\n              outline: 'none',\n              willChange: 'transform',\n              position: 'absolute',\n              bottom: 0,\n              left: 0,\n              right: 0,\n              background: common.mergedColorsBackground(\n                colors.setAlpha(t.colors.$colorBackground, 1),\n                t.colors.$neutralAlpha50,\n              ),\n              padding: t.space.$4,\n              borderStartStartRadius: t.radii.$md,\n              borderStartEndRadius: t.radii.$md,\n              boxShadow: `0 0 0 1px ${t.colors.$borderAlpha100}`,\n            })}\n          >\n            {children}\n\n            <Flex\n              elementDescriptor={descriptors.drawerConfirmationActions}\n              gap={3}\n              justify='end'\n            >\n              {actionsSlot}\n            </Flex>\n          </Box>\n        </FloatingFocusManager>\n      </>\n    );\n  },\n);\n\nConfirmation.displayName = 'Drawer.Confirmation';\n\nexport const Drawer = {\n  Root,\n  Overlay,\n  Content,\n  Header,\n  Body,\n  Footer,\n  Confirmation,\n  Close,\n};\n"],"mappings":"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"}
+{"version":3,"file":"Drawer.js","names":["React","FloatingOverlay","CloseIcon"],"sources":["../../src/elements/Drawer.tsx"],"sourcesContent":["import { useSafeLayoutEffect } from '@clerk/shared/react/index';\nimport type { UseDismissProps, UseFloatingOptions, UseRoleProps } from '@floating-ui/react';\nimport {\n  FloatingFocusManager,\n  FloatingPortal,\n  useClick,\n  useDismiss,\n  useFloating,\n  useInteractions,\n  useMergeRefs,\n  useRole,\n  useTransitionStyles,\n} from '@floating-ui/react';\nimport * as React from 'react';\n\nimport type { LocalizationKey } from '../customizables';\nimport { Box, descriptors, Flex, Heading, Icon, Span, useAppearance } from '../customizables';\nimport { transitionDurationValues, transitionTiming } from '../foundations/transitions';\nimport { useDirection, usePrefersReducedMotion, useScrollLock } from '../hooks';\nimport { Close as CloseIcon } from '../icons';\nimport type { ThemableCssProp } from '../styledSystem';\nimport { common } from '../styledSystem';\nimport { colors } from '../utils/colors';\nimport { IconButton } from './IconButton';\n\ntype FloatingPortalProps = React.ComponentProps<typeof FloatingPortal>;\n\n/* -------------------------------------------------------------------------------------------------\n * Drawer Context\n * -----------------------------------------------------------------------------------------------*/\n\ninterface DrawerContext {\n  isOpen: boolean;\n  setIsOpen: (open: boolean) => void;\n  strategy: UseFloatingOptions['strategy'];\n  refs: ReturnType<typeof useFloating>['refs'];\n  context: ReturnType<typeof useFloating>['context'];\n  getFloatingProps: ReturnType<typeof useInteractions>['getFloatingProps'];\n  portalProps: FloatingPortalProps;\n  direction: ReturnType<typeof useDirection>;\n}\n\nconst DrawerContext = React.createContext<DrawerContext | null>(null);\n\nexport const useDrawerContext = () => {\n  const context = React.useContext(DrawerContext);\n  if (!context) {\n    throw new Error('Drawer components must be wrapped in <Drawer.Root>');\n  }\n  return context;\n};\n\n/* -------------------------------------------------------------------------------------------------\n * Drawer.Root\n * -----------------------------------------------------------------------------------------------*/\n\ninterface RootProps {\n  children: React.ReactNode;\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n  /**\n   * The strategy to use when positioning the floating element.\n   * @default 'fixed'\n   * @see https://floating-ui.com/docs/useFloating#strategy\n   */\n  strategy?: UseFloatingOptions['strategy'];\n  /**\n   * @see https://floating-ui.com/docs/useFloating\n   */\n  floatingProps?: Omit<UseFloatingOptions, 'open' | 'onOpenChange' | 'strategy' | 'transform'>;\n  /**\n   * @see https://floating-ui.com/docs/FloatingPortal\n   */\n  portalProps?: FloatingPortalProps;\n  /**\n   * @see https://floating-ui.com/docs/useDismiss\n   */\n  dismissProps?: UseDismissProps;\n}\n\nfunction Root({\n  children,\n  open,\n  onOpenChange,\n  strategy = 'fixed',\n  floatingProps,\n  portalProps,\n  dismissProps,\n}: RootProps) {\n  const direction = useDirection();\n\n  const { refs, context } = useFloating({\n    open,\n    onOpenChange,\n    transform: false,\n    strategy,\n    placement: direction === 'ltr' ? 'right' : 'left',\n    ...floatingProps,\n  });\n\n  const { getFloatingProps } = useInteractions([\n    useClick(context),\n    useDismiss(context, dismissProps),\n    useRole(context),\n  ]);\n\n  return (\n    <DrawerContext.Provider\n      value={{\n        isOpen: open,\n        setIsOpen: onOpenChange,\n        strategy,\n        portalProps: portalProps || {},\n        refs,\n        context,\n        getFloatingProps,\n        direction,\n      }}\n    >\n      <FloatingPortal {...portalProps}>{children}</FloatingPortal>\n    </DrawerContext.Provider>\n  );\n}\n\n/* -------------------------------------------------------------------------------------------------\n * Drawer.Overlay\n * -----------------------------------------------------------------------------------------------*/\n\nexport const FloatingOverlay = React.forwardRef(function FloatingOverlay(\n  props: React.ComponentPropsWithoutRef<typeof Box>,\n  ref: React.ForwardedRef<HTMLDivElement>,\n) {\n  const { strategy } = useDrawerContext();\n  const { disableScrollLock, enableScrollLock } = useScrollLock();\n\n  useSafeLayoutEffect(() => {\n    if (strategy !== 'fixed') {\n      return;\n    }\n    enableScrollLock();\n    return () => {\n      disableScrollLock();\n    };\n  }, [strategy, disableScrollLock, enableScrollLock]);\n\n  return (\n    <Box\n      ref={ref}\n      {...props}\n      elementDescriptor={descriptors.drawerBackdrop}\n      sx={[\n        t => ({\n          inset: 0,\n          backgroundColor: colors.setAlpha(t.colors.$colorBackground, 0.28),\n        }),\n        props.sx,\n      ]}\n    />\n  );\n});\n\nconst Overlay = React.forwardRef<HTMLDivElement>((_, ref) => {\n  const { strategy, context } = useDrawerContext();\n\n  const { isMounted, styles: transitionStyles } = useTransitionStyles(context, {\n    initial: { opacity: 0 },\n    open: { opacity: 1 },\n    close: { opacity: 0 },\n    common: {\n      position: strategy,\n      inset: 0,\n      transitionProperty: 'opacity',\n      transitionTimingFunction: transitionTiming.bezier,\n    },\n    duration: transitionDurationValues.drawer,\n  });\n\n  if (!isMounted) {\n    return null;\n  }\n\n  return (\n    <FloatingOverlay\n      ref={ref}\n      style={{\n        ...transitionStyles,\n      }}\n    />\n  );\n});\n\nOverlay.displayName = 'Drawer.Overlay';\n\n/* -------------------------------------------------------------------------------------------------\n * Drawer.Content\n * -----------------------------------------------------------------------------------------------*/\n\ninterface ContentProps {\n  children: React.ReactNode;\n}\n\nconst Content = React.forwardRef<HTMLDivElement, ContentProps>(({ children }, ref) => {\n  const prefersReducedMotion = usePrefersReducedMotion();\n  const { animations: layoutAnimations } = useAppearance().parsedOptions;\n  const isMotionSafe = !prefersReducedMotion && layoutAnimations === true;\n  const { strategy, refs, context, getFloatingProps, direction } = useDrawerContext();\n  const mergedRefs = useMergeRefs([ref, refs.setFloating]);\n\n  const { isMounted, styles: transitionStyles } = useTransitionStyles(context, {\n    initial: { transform: `translate3d(var(--transform-offset), 0, 0)` },\n    open: { transform: 'translate3d(0, 0, 0)' },\n    close: { transform: `translate3d(var(--transform-offset), 0, 0)` },\n    common: {\n      transitionProperty: 'transform',\n      transitionTimingFunction: transitionTiming.bezier,\n    },\n    duration: isMotionSafe ? transitionDurationValues.drawer : 0,\n  });\n\n  if (!isMounted) {\n    return null;\n  }\n\n  return (\n    <FloatingFocusManager\n      context={context}\n      modal\n      outsideElementsInert\n      initialFocus={refs.floating}\n    >\n      <Box\n        ref={mergedRefs}\n        {...getFloatingProps()}\n        sx={t => ({\n          position: strategy,\n          insetBlock: 0,\n          insetInline: 0,\n          pointerEvents: 'none',\n          isolation: 'isolate',\n          // When drawer is within the profile components, we need to ensure it is above the drawer\n          // renders above the profile close button\n          zIndex: strategy === 'absolute' ? t.zIndices.$modal : undefined,\n        })}\n        elementDescriptor={descriptors.drawerRoot}\n      >\n        <Flex\n          elementDescriptor={descriptors.drawerContent}\n          style={transitionStyles}\n          direction='col'\n          sx={t => ({\n            // Apply the conditional right offset + the spread of the\n            // box shadow to ensure it is fully offscreen before unmounting\n            '--transform-offset':\n              strategy === 'fixed'\n                ? `calc((100% + ${t.space.$3} + ${t.space.$8x75}) * ${direction === 'rtl' ? -1 : 1})`\n                : `calc((100% + ${t.space.$8x75}) * ${direction === 'rtl' ? -1 : 1})`,\n            willChange: 'transform',\n            position: strategy,\n            insetBlock: strategy === 'fixed' ? t.space.$3 : 0,\n            insetInlineEnd: strategy === 'fixed' ? t.space.$3 : 0,\n            outline: 0,\n            width: t.sizes.$100,\n            maxWidth: strategy === 'fixed' ? `calc(100% - ${t.space.$6})` : '100%',\n            backgroundColor: t.colors.$colorBackground,\n            borderStartStartRadius: t.radii.$lg,\n            borderEndStartRadius: t.radii.$lg,\n            borderEndEndRadius: strategy === 'fixed' ? t.radii.$lg : 0,\n            borderStartEndRadius: strategy === 'fixed' ? t.radii.$lg : 0,\n            borderWidth: t.borderWidths.$normal,\n            borderStyle: t.borderStyles.$solid,\n            borderColor: t.colors.$borderAlpha150,\n            overflow: 'hidden',\n            pointerEvents: 'auto',\n          })}\n        >\n          {children}\n        </Flex>\n      </Box>\n    </FloatingFocusManager>\n  );\n});\n\nContent.displayName = 'Drawer.Content';\n\n/* -------------------------------------------------------------------------------------------------\n * Drawer.Header\n * -----------------------------------------------------------------------------------------------*/\n\ninterface HeaderProps {\n  title?: string | LocalizationKey;\n  children?: React.ReactNode;\n  sx?: ThemableCssProp;\n}\n\nconst Header = React.forwardRef<HTMLDivElement, HeaderProps>(({ title, children, sx }, ref) => {\n  return (\n    <Box\n      ref={ref}\n      elementDescriptor={descriptors.drawerHeader}\n      as='header'\n      sx={[\n        t => ({\n          display: 'flex',\n          background: common.mergedColorsBackground(\n            colors.setAlpha(t.colors.$colorBackground, 1),\n            t.colors.$neutralAlpha50,\n          ),\n          borderBlockEndWidth: t.borderWidths.$normal,\n          borderBlockEndStyle: t.borderStyles.$solid,\n          borderBlockEndColor: t.colors.$borderAlpha150,\n          borderStartStartRadius: t.radii.$lg,\n          borderStartEndRadius: t.radii.$lg,\n          paddingBlock: title ? t.space.$3 : undefined,\n          paddingInline: title ? t.space.$4 : undefined,\n        }),\n        sx,\n      ]}\n    >\n      {title ? (\n        <>\n          <Heading\n            localizationKey={title}\n            as='h2'\n            elementDescriptor={descriptors.drawerTitle}\n            textVariant='h2'\n            sx={{\n              alignSelf: 'center',\n            }}\n          />\n          <Close />\n        </>\n      ) : (\n        children\n      )}\n    </Box>\n  );\n});\n\n/* -------------------------------------------------------------------------------------------------\n * Drawer.Body\n * -----------------------------------------------------------------------------------------------*/\n\ninterface BodyProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n  sx?: ThemableCssProp;\n}\n\nconst Body = React.forwardRef<HTMLDivElement, BodyProps>(({ children, ...props }, ref) => {\n  return (\n    <Box\n      ref={ref}\n      elementDescriptor={descriptors.drawerBody}\n      sx={[\n        () => ({\n          display: 'flex',\n          flexDirection: 'column',\n          flex: 1,\n          overflowY: 'auto',\n          overflowX: 'hidden',\n        }),\n        props.sx,\n      ]}\n      {...props}\n    >\n      {children}\n    </Box>\n  );\n});\n\n/* -------------------------------------------------------------------------------------------------\n * Drawer.Footer\n * -----------------------------------------------------------------------------------------------*/\n\ninterface FooterProps extends React.HTMLAttributes<HTMLDivElement> {\n  children?: React.ReactNode;\n  sx?: ThemableCssProp;\n}\n\nconst Footer = React.forwardRef<HTMLDivElement, FooterProps>(({ children, sx, ...props }, ref) => {\n  return (\n    <Box\n      ref={ref}\n      elementDescriptor={descriptors.drawerFooter}\n      sx={[\n        t => ({\n          display: 'flex',\n          flexDirection: 'column',\n          background: common.mergedColorsBackground(\n            colors.setAlpha(t.colors.$colorBackground, 1),\n            t.colors.$neutralAlpha50,\n          ),\n          borderBlockStartWidth: t.borderWidths.$normal,\n          borderBlockStartStyle: t.borderStyles.$solid,\n          borderBlockStartColor: t.colors.$borderAlpha100,\n          borderEndStartRadius: t.radii.$xl,\n          borderEndEndRadius: t.radii.$xl,\n          paddingBlock: t.space.$3,\n          paddingInline: t.space.$4,\n        }),\n        sx,\n      ]}\n      {...props}\n    >\n      {children}\n    </Box>\n  );\n});\n\n/* -------------------------------------------------------------------------------------------------\n * Drawer.Close\n * -----------------------------------------------------------------------------------------------*/\n\nconst Close = React.forwardRef<HTMLButtonElement>((_, ref) => {\n  const { setIsOpen } = useDrawerContext();\n  return (\n    <IconButton\n      ref={ref}\n      elementDescriptor={descriptors.drawerClose}\n      variant='ghost'\n      aria-label='Close drawer'\n      onClick={() => setIsOpen(false)}\n      icon={\n        <Icon\n          icon={CloseIcon}\n          size='sm'\n        />\n      }\n      sx={t => ({\n        color: t.colors.$colorMutedForeground,\n        padding: t.space.$3,\n        marginInlineStart: 'auto',\n      })}\n    />\n  );\n});\n\nClose.displayName = 'Drawer.Close';\n\n/* -------------------------------------------------------------------------------------------------\n * Drawer.Confirmation\n * -----------------------------------------------------------------------------------------------*/\n\ninterface ConfirmationProps {\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n  children: React.ReactNode;\n  actionsSlot: React.ReactNode;\n  /**\n   * @see https://floating-ui.com/docs/userole\n   */\n  roleProps?: UseRoleProps;\n}\n\nconst Confirmation = React.forwardRef<HTMLDivElement, ConfirmationProps>(\n  ({ open, onOpenChange, children, actionsSlot, roleProps }, ref) => {\n    const prefersReducedMotion = usePrefersReducedMotion();\n    const { animations: layoutAnimations } = useAppearance().parsedOptions;\n    const isMotionSafe = !prefersReducedMotion && layoutAnimations === true;\n\n    const { refs, context } = useFloating({\n      open,\n      onOpenChange,\n      transform: false,\n      strategy: 'absolute',\n    });\n    const { getFloatingProps } = useInteractions([\n      useClick(context),\n      useDismiss(context),\n      useRole(context, { role: 'alertdialog', ...roleProps }),\n    ]);\n\n    const mergedRefs = useMergeRefs([ref, refs.setFloating]);\n\n    const { styles: overlayTransitionStyles } = useTransitionStyles(context, {\n      initial: { opacity: 0 },\n      open: { opacity: 1 },\n      close: { opacity: 0 },\n      common: {\n        transitionProperty: 'opacity',\n        transitionTimingFunction: transitionTiming.bezier,\n      },\n      duration: transitionDurationValues.drawer,\n    });\n\n    const { isMounted, styles: modalTransitionStyles } = useTransitionStyles(context, {\n      initial: { transform: 'translate3D(0, 100%, 0)' },\n      open: { transform: 'translate3D(0, 0, 0)' },\n      close: { transform: 'translate3D(0, 100%, 0)' },\n      common: {\n        transitionProperty: 'transform',\n        transitionTimingFunction: transitionTiming.bezier,\n      },\n      duration: isMotionSafe ? transitionDurationValues.drawer : 0,\n    });\n\n    if (!isMounted) {\n      return null;\n    }\n\n    return (\n      <>\n        <Span\n          elementDescriptor={descriptors.drawerConfirmationBackdrop}\n          style={overlayTransitionStyles}\n          sx={t => ({\n            position: 'absolute',\n            inset: 0,\n            backgroundImage: `linear-gradient(to bottom, ${colors.setAlpha(t.colors.$colorBackground, 0.28)}, ${t.colors.$colorBackground})`,\n          })}\n        />\n\n        <FloatingFocusManager\n          context={context}\n          modal\n          outsideElementsInert\n          initialFocus={refs.floating}\n        >\n          <Box\n            ref={mergedRefs}\n            elementDescriptor={descriptors.drawerConfirmationRoot}\n            style={modalTransitionStyles}\n            {...getFloatingProps()}\n            sx={t => ({\n              display: 'flex',\n              flexDirection: 'column',\n              rowGap: t.space.$6,\n              outline: 'none',\n              willChange: 'transform',\n              position: 'absolute',\n              bottom: 0,\n              left: 0,\n              right: 0,\n              background: common.mergedColorsBackground(\n                colors.setAlpha(t.colors.$colorBackground, 1),\n                t.colors.$neutralAlpha50,\n              ),\n              padding: t.space.$4,\n              borderStartStartRadius: t.radii.$md,\n              borderStartEndRadius: t.radii.$md,\n              boxShadow: `0 0 0 1px ${t.colors.$borderAlpha100}`,\n            })}\n          >\n            {children}\n\n            <Flex\n              elementDescriptor={descriptors.drawerConfirmationActions}\n              gap={3}\n              justify='end'\n            >\n              {actionsSlot}\n            </Flex>\n          </Box>\n        </FloatingFocusManager>\n      </>\n    );\n  },\n);\n\nConfirmation.displayName = 'Drawer.Confirmation';\n\nexport const Drawer = {\n  Root,\n  Overlay,\n  Content,\n  Header,\n  Body,\n  Footer,\n  Confirmation,\n  Close,\n};\n"],"mappings":"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"}

package/dist/elements/Form.js

@@ -6,8 +6,8 @@ import { Button, Col, Flex, Form } from "../customizables/index.js";
 import { LastAuthenticationStrategyBadge } from "./Badge.js";
 import { Field } from "./FieldControl.js";
 import React, { forwardRef, useState } from "react";
-import { createContextAndHook } from "@clerk/shared/react";
 import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { createContextAndHook } from "@clerk/shared/react";
 
 //#region src/elements/Form.tsx
 const [FormState, useFormState] = createContextAndHook("FormState");

package/dist/elements/Menu.js

@@ -6,8 +6,8 @@ import { withFloatingTree } from "./contexts/index.js";
 import { Col, SimpleButton } from "../customizables/index.js";
 import { Popover } from "./Popover.js";
 import React, { cloneElement, isValidElement, useLayoutEffect, useRef } from "react";
-import { createContextAndHook } from "@clerk/shared/react";
 import { jsx } from "@emotion/react/jsx-runtime";
+import { createContextAndHook } from "@clerk/shared/react";
 
 //#region src/elements/Menu.tsx
 const [MenuStateCtx, useMenuState] = createContextAndHook("MenuState");
@@ -133,8 +133,7 @@ const MenuItem = (props) => {
 		sx: [(theme) => ({
 			justifyContent: "start",
 			borderRadius: theme.radii.$sm,
-			padding: `${theme.space.$1} ${theme.space.$3}`,
-			whiteSpace: "nowrap"
+			padding: `${theme.space.$1} ${theme.space.$3}`
 		}), sx],
 		...rest
 	});

package/dist/elements/Menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"Menu.js","names":["sibling: Element | null"],"sources":["../../src/elements/Menu.tsx"],"sourcesContent":["import { createContextAndHook } from '@clerk/shared/react';\nimport type { MenuId } from '@clerk/shared/types';\nimport type { Placement } from '@floating-ui/react';\nimport type { PropsWithChildren } from 'react';\nimport React, { cloneElement, isValidElement, useLayoutEffect, useRef } from 'react';\n\nimport type { Button } from '../customizables';\nimport { Col, descriptors, SimpleButton } from '../customizables';\nimport type { UsePopoverReturn } from '../hooks';\nimport { usePopover } from '../hooks';\nimport type { PropsOfComponent } from '../styledSystem';\nimport { animations } from '../styledSystem';\nimport { colors } from '../utils/colors';\nimport { withFloatingTree } from './contexts';\nimport { Popover } from './Popover';\n\ntype MenuState = {\n  popoverCtx: UsePopoverReturn;\n  elementId?: MenuId;\n};\n\nexport const [MenuStateCtx, useMenuState] = createContextAndHook<MenuState>('MenuState');\n\ntype MenuProps = PropsWithChildren<Record<never, never>> & {\n  elementId?: MenuId;\n  popoverPlacement?: Placement;\n};\n\nexport const Menu = withFloatingTree((props: MenuProps) => {\n  const { popoverPlacement = 'bottom-end', elementId, ...rest } = props;\n  const popoverCtx = usePopover({\n    placement: popoverPlacement,\n    offset: 8,\n    shoudFlip: true,\n  });\n\n  const value = React.useMemo(() => ({ value: { popoverCtx, elementId } }), [{ ...popoverCtx }, elementId]);\n\n  return (\n    <MenuStateCtx.Provider\n      value={value}\n      {...rest}\n    />\n  );\n});\n\ntype MenuTriggerProps = React.PropsWithChildren<{ arialLabel?: string | ((open: boolean) => string) }>;\n\nexport const MenuTrigger = (props: MenuTriggerProps) => {\n  const { children, arialLabel } = props;\n  const { popoverCtx, elementId } = useMenuState();\n  const { reference, toggle, isOpen } = popoverCtx;\n\n  const normalizedAriaLabel = typeof arialLabel === 'function' ? arialLabel(isOpen) : arialLabel;\n\n  if (!isValidElement(children)) {\n    return null;\n  }\n\n  return cloneElement(children, {\n    // @ts-expect-error\n    ref: reference,\n    elementDescriptor: children.props.elementDescriptor || descriptors.menuButton,\n    elementId: children.props.elementId || descriptors.menuButton.setId(elementId),\n    'aria-label': normalizedAriaLabel,\n    'aria-expanded': isOpen,\n    onClick: (e: React.MouseEvent) => {\n      children.props?.onClick?.(e);\n      toggle();\n    },\n  });\n};\n\nconst findMenuItem = (el: Element, siblingType: 'prev' | 'next', options?: { countSelf?: boolean }) => {\n  let tagName = options?.countSelf ? el.tagName : '';\n  let sibling: Element | null = el;\n  while (sibling && tagName.toUpperCase() !== 'BUTTON') {\n    sibling = sibling[siblingType === 'prev' ? 'previousElementSibling' : 'nextElementSibling'];\n    tagName = sibling?.tagName ?? '';\n  }\n  return sibling;\n};\n\ntype MenuListProps = PropsOfComponent<typeof Col> & {\n  asPortal?: boolean;\n};\n\nexport const MenuList = (props: MenuListProps) => {\n  const { sx, asPortal, ...rest } = props;\n  const { popoverCtx, elementId } = useMenuState();\n  const { floating, styles, isOpen, context, nodeId } = popoverCtx;\n  const containerRef = useRef<HTMLDivElement | null>(null);\n\n  useLayoutEffect(() => {\n    const current = containerRef.current;\n    floating(current);\n  }, [isOpen]);\n\n  const onKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n    const current = containerRef.current;\n    if (!current) {\n      return;\n    }\n\n    if (current !== document.activeElement) {\n      return;\n    }\n\n    if (e.key === 'ArrowDown') {\n      e.preventDefault();\n      return (findMenuItem(current.children[0], 'next', { countSelf: true }) as HTMLElement)?.focus();\n    }\n  };\n\n  return (\n    <Popover\n      context={context}\n      nodeId={nodeId}\n      isOpen={isOpen}\n      portal={asPortal}\n    >\n      <Col\n        elementDescriptor={descriptors.menuList}\n        elementId={descriptors.menuList.setId(elementId)}\n        ref={containerRef}\n        role='menu'\n        onKeyDown={onKeyDown}\n        sx={[\n          t => ({\n            backgroundColor: colors.makeSolid(t.colors.$colorBackground),\n            borderWidth: t.borderWidths.$normal,\n            borderStyle: t.borderStyles.$solid,\n            borderColor: t.colors.$borderAlpha150,\n            outline: 'none',\n            borderRadius: t.radii.$md,\n            padding: t.space.$0x5,\n            overflow: 'hidden',\n            top: `calc(100% + ${t.space.$2})`,\n            animation: `${animations.dropdownSlideInScaleAndFade} ${t.transitionDuration.$slower} ${t.transitionTiming.$slowBezier}`,\n            transformOrigin: 'top center',\n            zIndex: t.zIndices.$dropdown,\n            gap: t.space.$0x5,\n          }),\n          sx,\n        ]}\n        style={styles}\n        {...rest}\n      />\n    </Popover>\n  );\n};\n\ntype MenuItemProps = PropsOfComponent<typeof Button> & {\n  destructive?: boolean;\n  closeAfterClick?: boolean;\n};\n\nexport const MenuItem = (props: MenuItemProps) => {\n  const { sx, onClick, destructive, closeAfterClick = true, ...rest } = props;\n  const { popoverCtx, elementId } = useMenuState();\n  const { toggle } = popoverCtx;\n  const buttonRef = useRef<HTMLButtonElement>(null);\n\n  const onKeyDown = (e: React.KeyboardEvent<HTMLButtonElement>) => {\n    const current = buttonRef.current;\n    if (!current) {\n      return;\n    }\n\n    const key = e.key;\n    if (key !== 'ArrowUp' && key !== 'ArrowDown') {\n      return;\n    }\n\n    e.preventDefault();\n    const sibling = findMenuItem(current, key === 'ArrowUp' ? 'prev' : 'next');\n    (sibling as HTMLElement)?.focus();\n  };\n\n  return (\n    <SimpleButton\n      ref={buttonRef}\n      elementDescriptor={descriptors.menuItem}\n      elementId={descriptors.menuItem.setId(elementId)}\n      hoverAsFocus\n      variant='ghost'\n      colorScheme={destructive ? 'danger' : 'neutral'}\n      role='menuitem'\n      onKeyDown={onKeyDown}\n      focusRing={false}\n      onClick={e => {\n        onClick?.(e);\n        if (closeAfterClick) {\n          toggle();\n        }\n      }}\n      sx={[\n        theme => ({\n          justifyContent: 'start',\n          borderRadius: theme.radii.$sm,\n          padding: `${theme.space.$1} ${theme.space.$3}`,\n          whiteSpace: 'nowrap',\n        }),\n        sx,\n      ]}\n      {...rest}\n    />\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"Menu.js","names":["sibling: Element | null"],"sources":["../../src/elements/Menu.tsx"],"sourcesContent":["import { createContextAndHook } from '@clerk/shared/react';\nimport type { MenuId } from '@clerk/shared/types';\nimport type { Placement } from '@floating-ui/react';\nimport type { PropsWithChildren } from 'react';\nimport React, { cloneElement, isValidElement, useLayoutEffect, useRef } from 'react';\n\nimport type { Button } from '../customizables';\nimport { Col, descriptors, SimpleButton } from '../customizables';\nimport type { UsePopoverReturn } from '../hooks';\nimport { usePopover } from '../hooks';\nimport type { PropsOfComponent } from '../styledSystem';\nimport { animations } from '../styledSystem';\nimport { colors } from '../utils/colors';\nimport { withFloatingTree } from './contexts';\nimport { Popover } from './Popover';\n\ntype MenuState = {\n  popoverCtx: UsePopoverReturn;\n  elementId?: MenuId;\n};\n\nexport const [MenuStateCtx, useMenuState] = createContextAndHook<MenuState>('MenuState');\n\ntype MenuProps = PropsWithChildren<Record<never, never>> & {\n  elementId?: MenuId;\n  popoverPlacement?: Placement;\n};\n\nexport const Menu = withFloatingTree((props: MenuProps) => {\n  const { popoverPlacement = 'bottom-end', elementId, ...rest } = props;\n  const popoverCtx = usePopover({\n    placement: popoverPlacement,\n    offset: 8,\n    shoudFlip: true,\n  });\n\n  const value = React.useMemo(() => ({ value: { popoverCtx, elementId } }), [{ ...popoverCtx }, elementId]);\n\n  return (\n    <MenuStateCtx.Provider\n      value={value}\n      {...rest}\n    />\n  );\n});\n\ntype MenuTriggerProps = React.PropsWithChildren<{ arialLabel?: string | ((open: boolean) => string) }>;\n\nexport const MenuTrigger = (props: MenuTriggerProps) => {\n  const { children, arialLabel } = props;\n  const { popoverCtx, elementId } = useMenuState();\n  const { reference, toggle, isOpen } = popoverCtx;\n\n  const normalizedAriaLabel = typeof arialLabel === 'function' ? arialLabel(isOpen) : arialLabel;\n\n  if (!isValidElement(children)) {\n    return null;\n  }\n\n  return cloneElement(children, {\n    // @ts-expect-error\n    ref: reference,\n    elementDescriptor: children.props.elementDescriptor || descriptors.menuButton,\n    elementId: children.props.elementId || descriptors.menuButton.setId(elementId),\n    'aria-label': normalizedAriaLabel,\n    'aria-expanded': isOpen,\n    onClick: (e: React.MouseEvent) => {\n      children.props?.onClick?.(e);\n      toggle();\n    },\n  });\n};\n\nconst findMenuItem = (el: Element, siblingType: 'prev' | 'next', options?: { countSelf?: boolean }) => {\n  let tagName = options?.countSelf ? el.tagName : '';\n  let sibling: Element | null = el;\n  while (sibling && tagName.toUpperCase() !== 'BUTTON') {\n    sibling = sibling[siblingType === 'prev' ? 'previousElementSibling' : 'nextElementSibling'];\n    tagName = sibling?.tagName ?? '';\n  }\n  return sibling;\n};\n\ntype MenuListProps = PropsOfComponent<typeof Col> & {\n  asPortal?: boolean;\n};\n\nexport const MenuList = (props: MenuListProps) => {\n  const { sx, asPortal, ...rest } = props;\n  const { popoverCtx, elementId } = useMenuState();\n  const { floating, styles, isOpen, context, nodeId } = popoverCtx;\n  const containerRef = useRef<HTMLDivElement | null>(null);\n\n  useLayoutEffect(() => {\n    const current = containerRef.current;\n    floating(current);\n  }, [isOpen]);\n\n  const onKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n    const current = containerRef.current;\n    if (!current) {\n      return;\n    }\n\n    if (current !== document.activeElement) {\n      return;\n    }\n\n    if (e.key === 'ArrowDown') {\n      e.preventDefault();\n      return (findMenuItem(current.children[0], 'next', { countSelf: true }) as HTMLElement)?.focus();\n    }\n  };\n\n  return (\n    <Popover\n      context={context}\n      nodeId={nodeId}\n      isOpen={isOpen}\n      portal={asPortal}\n    >\n      <Col\n        elementDescriptor={descriptors.menuList}\n        elementId={descriptors.menuList.setId(elementId)}\n        ref={containerRef}\n        role='menu'\n        onKeyDown={onKeyDown}\n        sx={[\n          t => ({\n            backgroundColor: colors.makeSolid(t.colors.$colorBackground),\n            borderWidth: t.borderWidths.$normal,\n            borderStyle: t.borderStyles.$solid,\n            borderColor: t.colors.$borderAlpha150,\n            outline: 'none',\n            borderRadius: t.radii.$md,\n            padding: t.space.$0x5,\n            overflow: 'hidden',\n            top: `calc(100% + ${t.space.$2})`,\n            animation: `${animations.dropdownSlideInScaleAndFade} ${t.transitionDuration.$slower} ${t.transitionTiming.$slowBezier}`,\n            transformOrigin: 'top center',\n            zIndex: t.zIndices.$dropdown,\n            gap: t.space.$0x5,\n          }),\n          sx,\n        ]}\n        style={styles}\n        {...rest}\n      />\n    </Popover>\n  );\n};\n\ntype MenuItemProps = PropsOfComponent<typeof Button> & {\n  destructive?: boolean;\n  closeAfterClick?: boolean;\n};\n\nexport const MenuItem = (props: MenuItemProps) => {\n  const { sx, onClick, destructive, closeAfterClick = true, ...rest } = props;\n  const { popoverCtx, elementId } = useMenuState();\n  const { toggle } = popoverCtx;\n  const buttonRef = useRef<HTMLButtonElement>(null);\n\n  const onKeyDown = (e: React.KeyboardEvent<HTMLButtonElement>) => {\n    const current = buttonRef.current;\n    if (!current) {\n      return;\n    }\n\n    const key = e.key;\n    if (key !== 'ArrowUp' && key !== 'ArrowDown') {\n      return;\n    }\n\n    e.preventDefault();\n    const sibling = findMenuItem(current, key === 'ArrowUp' ? 'prev' : 'next');\n    (sibling as HTMLElement)?.focus();\n  };\n\n  return (\n    <SimpleButton\n      ref={buttonRef}\n      elementDescriptor={descriptors.menuItem}\n      elementId={descriptors.menuItem.setId(elementId)}\n      hoverAsFocus\n      variant='ghost'\n      colorScheme={destructive ? 'danger' : 'neutral'}\n      role='menuitem'\n      onKeyDown={onKeyDown}\n      focusRing={false}\n      onClick={e => {\n        onClick?.(e);\n        if (closeAfterClick) {\n          toggle();\n        }\n      }}\n      sx={[\n        theme => ({\n          justifyContent: 'start',\n          borderRadius: theme.radii.$sm,\n          padding: `${theme.space.$1} ${theme.space.$3}`,\n        }),\n        sx,\n      ]}\n      {...rest}\n    />\n  );\n};\n"],"mappings":"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"}

package/dist/elements/Modal.js

@@ -7,15 +7,14 @@ import { withFloatingTree } from "./contexts/index.js";
 import { Flex } from "../customizables/index.js";
 import { Popover } from "./Popover.js";
 import React, { useRef } from "react";
-import { createContextAndHook, usePortalRoot, useSafeLayoutEffect } from "@clerk/shared/react";
 import { jsx } from "@emotion/react/jsx-runtime";
+import { createContextAndHook, useSafeLayoutEffect } from "@clerk/shared/react";
 
 //#region src/elements/Modal.tsx
 const [ModalContext, _, useUnsafeModalContext] = createContextAndHook("ModalContext");
 const Modal = withFloatingTree((props) => {
 	const { disableScrollLock, enableScrollLock } = useScrollLock();
 	const { handleClose, handleOpen, contentSx, containerSx, canCloseModal, id, style, portalRoot, initialFocusRef } = props;
-	const portalRootFromContext = usePortalRoot();
 	const overlayRef = useRef(null);
 	const { floating, isOpen, context, nodeId, toggle } = usePopover({
 		defaultOpen: true,
@@ -39,7 +38,7 @@ const Modal = withFloatingTree((props) => {
 		context,
 		isOpen,
 		outsideElementsInert: true,
-		root: portalRoot ?? portalRootFromContext?.() ?? void 0,
+		root: portalRoot,
 		initialFocus: initialFocusRef,
 		children: /* @__PURE__ */ jsx(ModalContext.Provider, {
 			value: modalCtx,

package/dist/elements/Modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.js","names":[],"sources":["../../src/elements/Modal.tsx"],"sourcesContent":["import { createContextAndHook, usePortalRoot, useSafeLayoutEffect } from '@clerk/shared/react';\nimport React, { useRef } from 'react';\n\nimport { descriptors, Flex } from '../customizables';\nimport { usePopover } from '../hooks';\nimport { useScrollLock } from '../hooks/useScrollLock';\nimport type { ThemableCssProp } from '../styledSystem';\nimport { animations, mqu } from '../styledSystem';\nimport { withFloatingTree } from './contexts';\nimport { Popover } from './Popover';\n\nexport const [ModalContext, _, useUnsafeModalContext] = createContextAndHook<{ toggle?: () => void }>('ModalContext');\n\ntype ModalProps = React.PropsWithChildren<{\n  id?: string;\n  handleOpen?: () => void;\n  handleClose?: () => void;\n  contentSx?: ThemableCssProp;\n  containerSx?: ThemableCssProp;\n  canCloseModal?: boolean;\n  style?: React.CSSProperties;\n  portalRoot?: HTMLElement | React.MutableRefObject<HTMLElement | null>;\n  initialFocusRef?: number | React.MutableRefObject<HTMLElement | null>;\n}>;\n\nexport const Modal = withFloatingTree((props: ModalProps) => {\n  const { disableScrollLock, enableScrollLock } = useScrollLock();\n  const { handleClose, handleOpen, contentSx, containerSx, canCloseModal, id, style, portalRoot, initialFocusRef } =\n    props;\n  const portalRootFromContext = usePortalRoot();\n  const overlayRef = useRef<HTMLDivElement>(null);\n  const { floating, isOpen, context, nodeId, toggle } = usePopover({\n    defaultOpen: true,\n    autoUpdate: false,\n    outsidePress: e => e.target === overlayRef.current,\n    canCloseModal,\n  });\n\n  React.useEffect(() => {\n    if (!isOpen) {\n      handleClose?.();\n    } else {\n      handleOpen?.();\n    }\n  }, [isOpen]);\n  const modalCtx = React.useMemo(() => ({ value: canCloseModal === false ? {} : { toggle } }), [toggle, canCloseModal]);\n\n  useSafeLayoutEffect(() => {\n    enableScrollLock();\n\n    return () => {\n      disableScrollLock();\n    };\n  }, []);\n\n  const effectivePortalRoot = portalRoot ?? portalRootFromContext?.() ?? undefined;\n\n  return (\n    <Popover\n      nodeId={nodeId}\n      context={context}\n      isOpen={isOpen}\n      outsideElementsInert\n      root={effectivePortalRoot}\n      initialFocus={initialFocusRef}\n    >\n      <ModalContext.Provider value={modalCtx}>\n        <Flex\n          id={id}\n          ref={overlayRef}\n          elementDescriptor={descriptors.modalBackdrop}\n          style={style}\n          sx={[\n            t => ({\n              animation: `${animations.fadeIn} 150ms ${t.transitionTiming.$common}`,\n              zIndex: t.zIndices.$modal,\n              backgroundColor: t.colors.$colorModalBackdrop,\n              alignItems: 'flex-start',\n              justifyContent: 'center',\n              overflow: 'auto',\n              width: '100vw',\n              height: ['100vh', '-webkit-fill-available'],\n              position: 'fixed',\n              left: 0,\n              top: 0,\n            }),\n            containerSx,\n          ]}\n        >\n          <Flex\n            elementDescriptor={descriptors.modalContent}\n            ref={floating}\n            aria-modal='true'\n            role='dialog'\n            sx={[\n              t => ({\n                position: 'relative',\n                outline: 0,\n                animation: `${animations.modalSlideAndFade} 180ms ${t.transitionTiming.$easeOut}`,\n                margin: `${t.space.$16} 0`,\n                [mqu.sm]: {\n                  margin: `${t.space.$10} 0`,\n                },\n              }),\n              contentSx,\n            ]}\n          >\n            {props.children}\n          </Flex>\n        </Flex>\n      </ModalContext.Provider>\n    </Popover>\n  );\n});\n"],"mappings":";;;;;;;;;;;;;AAWA,MAAa,CAAC,cAAc,GAAG,yBAAyB,qBAA8C,eAAe;AAcrH,MAAa,QAAQ,kBAAkB,UAAsB;CAC3D,MAAM,EAAE,mBAAmB,qBAAqB,eAAe;CAC/D,MAAM,EAAE,aAAa,YAAY,WAAW,aAAa,eAAe,IAAI,OAAO,YAAY,oBAC7F;CACF,MAAM,wBAAwB,eAAe;CAC7C,MAAM,aAAa,OAAuB,KAAK;CAC/C,MAAM,EAAE,UAAU,QAAQ,SAAS,QAAQ,WAAW,WAAW;EAC/D,aAAa;EACb,YAAY;EACZ,eAAc,MAAK,EAAE,WAAW,WAAW;EAC3C;EACD,CAAC;AAEF,OAAM,gBAAgB;AACpB,MAAI,CAAC,OACH,gBAAe;MAEf,eAAc;IAEf,CAAC,OAAO,CAAC;CACZ,MAAM,WAAW,MAAM,eAAe,EAAE,OAAO,kBAAkB,QAAQ,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,CAAC,QAAQ,cAAc,CAAC;AAErH,2BAA0B;AACxB,oBAAkB;AAElB,eAAa;AACX,sBAAmB;;IAEpB,EAAE,CAAC;AAIN,QACE,oBAAC;EACS;EACC;EACD;EACR;EACA,MARwB,cAAc,yBAAyB,IAAI;EASnE,cAAc;YAEd,oBAAC,aAAa;GAAS,OAAO;aAC5B,oBAAC;IACK;IACJ,KAAK;IACL,mBAAmB,YAAY;IACxB;IACP,IAAI,EACF,OAAM;KACJ,WAAW,GAAG,WAAW,OAAO,SAAS,EAAE,iBAAiB;KAC5D,QAAQ,EAAE,SAAS;KACnB,iBAAiB,EAAE,OAAO;KAC1B,YAAY;KACZ,gBAAgB;KAChB,UAAU;KACV,OAAO;KACP,QAAQ,CAAC,SAAS,yBAAyB;KAC3C,UAAU;KACV,MAAM;KACN,KAAK;KACN,GACD,YACD;cAED,oBAAC;KACC,mBAAmB,YAAY;KAC/B,KAAK;KACL,cAAW;KACX,MAAK;KACL,IAAI,EACF,OAAM;MACJ,UAAU;MACV,SAAS;MACT,WAAW,GAAG,WAAW,kBAAkB,SAAS,EAAE,iBAAiB;MACvE,QAAQ,GAAG,EAAE,MAAM,IAAI;OACtB,IAAI,KAAK,EACR,QAAQ,GAAG,EAAE,MAAM,IAAI,KACxB;MACF,GACD,UACD;eAEA,MAAM;MACF;KACF;IACe;GAChB;EAEZ"}
+{"version":3,"file":"Modal.js","names":[],"sources":["../../src/elements/Modal.tsx"],"sourcesContent":["import { createContextAndHook, useSafeLayoutEffect } from '@clerk/shared/react';\nimport React, { useRef } from 'react';\n\nimport { descriptors, Flex } from '../customizables';\nimport { usePopover } from '../hooks';\nimport { useScrollLock } from '../hooks/useScrollLock';\nimport type { ThemableCssProp } from '../styledSystem';\nimport { animations, mqu } from '../styledSystem';\nimport { withFloatingTree } from './contexts';\nimport { Popover } from './Popover';\n\nexport const [ModalContext, _, useUnsafeModalContext] = createContextAndHook<{ toggle?: () => void }>('ModalContext');\n\ntype ModalProps = React.PropsWithChildren<{\n  id?: string;\n  handleOpen?: () => void;\n  handleClose?: () => void;\n  contentSx?: ThemableCssProp;\n  containerSx?: ThemableCssProp;\n  canCloseModal?: boolean;\n  style?: React.CSSProperties;\n  portalRoot?: HTMLElement | React.MutableRefObject<HTMLElement | null>;\n  initialFocusRef?: number | React.MutableRefObject<HTMLElement | null>;\n}>;\n\nexport const Modal = withFloatingTree((props: ModalProps) => {\n  const { disableScrollLock, enableScrollLock } = useScrollLock();\n  const { handleClose, handleOpen, contentSx, containerSx, canCloseModal, id, style, portalRoot, initialFocusRef } =\n    props;\n  const overlayRef = useRef<HTMLDivElement>(null);\n  const { floating, isOpen, context, nodeId, toggle } = usePopover({\n    defaultOpen: true,\n    autoUpdate: false,\n    outsidePress: e => e.target === overlayRef.current,\n    canCloseModal,\n  });\n\n  React.useEffect(() => {\n    if (!isOpen) {\n      handleClose?.();\n    } else {\n      handleOpen?.();\n    }\n  }, [isOpen]);\n  const modalCtx = React.useMemo(() => ({ value: canCloseModal === false ? {} : { toggle } }), [toggle, canCloseModal]);\n\n  useSafeLayoutEffect(() => {\n    enableScrollLock();\n\n    return () => {\n      disableScrollLock();\n    };\n  }, []);\n\n  return (\n    <Popover\n      nodeId={nodeId}\n      context={context}\n      isOpen={isOpen}\n      outsideElementsInert\n      root={portalRoot}\n      initialFocus={initialFocusRef}\n    >\n      <ModalContext.Provider value={modalCtx}>\n        <Flex\n          id={id}\n          ref={overlayRef}\n          elementDescriptor={descriptors.modalBackdrop}\n          style={style}\n          sx={[\n            t => ({\n              animation: `${animations.fadeIn} 150ms ${t.transitionTiming.$common}`,\n              zIndex: t.zIndices.$modal,\n              backgroundColor: t.colors.$colorModalBackdrop,\n              alignItems: 'flex-start',\n              justifyContent: 'center',\n              overflow: 'auto',\n              width: '100vw',\n              height: ['100vh', '-webkit-fill-available'],\n              position: 'fixed',\n              left: 0,\n              top: 0,\n            }),\n            containerSx,\n          ]}\n        >\n          <Flex\n            elementDescriptor={descriptors.modalContent}\n            ref={floating}\n            aria-modal='true'\n            role='dialog'\n            sx={[\n              t => ({\n                position: 'relative',\n                outline: 0,\n                animation: `${animations.modalSlideAndFade} 180ms ${t.transitionTiming.$easeOut}`,\n                margin: `${t.space.$16} 0`,\n                [mqu.sm]: {\n                  margin: `${t.space.$10} 0`,\n                },\n              }),\n              contentSx,\n            ]}\n          >\n            {props.children}\n          </Flex>\n        </Flex>\n      </ModalContext.Provider>\n    </Popover>\n  );\n});\n"],"mappings":";;;;;;;;;;;;;AAWA,MAAa,CAAC,cAAc,GAAG,yBAAyB,qBAA8C,eAAe;AAcrH,MAAa,QAAQ,kBAAkB,UAAsB;CAC3D,MAAM,EAAE,mBAAmB,qBAAqB,eAAe;CAC/D,MAAM,EAAE,aAAa,YAAY,WAAW,aAAa,eAAe,IAAI,OAAO,YAAY,oBAC7F;CACF,MAAM,aAAa,OAAuB,KAAK;CAC/C,MAAM,EAAE,UAAU,QAAQ,SAAS,QAAQ,WAAW,WAAW;EAC/D,aAAa;EACb,YAAY;EACZ,eAAc,MAAK,EAAE,WAAW,WAAW;EAC3C;EACD,CAAC;AAEF,OAAM,gBAAgB;AACpB,MAAI,CAAC,OACH,gBAAe;MAEf,eAAc;IAEf,CAAC,OAAO,CAAC;CACZ,MAAM,WAAW,MAAM,eAAe,EAAE,OAAO,kBAAkB,QAAQ,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,CAAC,QAAQ,cAAc,CAAC;AAErH,2BAA0B;AACxB,oBAAkB;AAElB,eAAa;AACX,sBAAmB;;IAEpB,EAAE,CAAC;AAEN,QACE,oBAAC;EACS;EACC;EACD;EACR;EACA,MAAM;EACN,cAAc;YAEd,oBAAC,aAAa;GAAS,OAAO;aAC5B,oBAAC;IACK;IACJ,KAAK;IACL,mBAAmB,YAAY;IACxB;IACP,IAAI,EACF,OAAM;KACJ,WAAW,GAAG,WAAW,OAAO,SAAS,EAAE,iBAAiB;KAC5D,QAAQ,EAAE,SAAS;KACnB,iBAAiB,EAAE,OAAO;KAC1B,YAAY;KACZ,gBAAgB;KAChB,UAAU;KACV,OAAO;KACP,QAAQ,CAAC,SAAS,yBAAyB;KAC3C,UAAU;KACV,MAAM;KACN,KAAK;KACN,GACD,YACD;cAED,oBAAC;KACC,mBAAmB,YAAY;KAC/B,KAAK;KACL,cAAW;KACX,MAAK;KACL,IAAI,EACF,OAAM;MACJ,UAAU;MACV,SAAS;MACT,WAAW,GAAG,WAAW,kBAAkB,SAAS,EAAE,iBAAiB;MACvE,QAAQ,GAAG,EAAE,MAAM,IAAI;OACtB,IAAI,KAAK,EACR,QAAQ,GAAG,EAAE,MAAM,IAAI,KACxB;MACF,GACD,UACD;eAEA,MAAM;MACF;KACF;IACe;GAChB;EAEZ"}

package/dist/elements/Navbar.js

@@ -14,8 +14,8 @@ import { DevModeOverlay } from "./DevModeNotice.js";
 import { Popover } from "./Popover.js";
 import { Card } from "./Card/index.js";
 import React, { useCallback } from "react";
-import { createContextAndHook } from "@clerk/shared/react";
 import { Fragment as Fragment$1, jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { createContextAndHook } from "@clerk/shared/react";
 
 //#region src/elements/Navbar.tsx
 const [NavbarContext, useNavbarContext, useUnsafeNavbarContext] = createContextAndHook("NavbarContext");

package/dist/elements/PhoneInput/index.js

@@ -8,8 +8,8 @@ import { Select, SelectButton, SelectOptionList } from "../Select.js";
 import { IsoToCountryMap } from "./countryCodeData.js";
 import { useFormattedPhoneNumber } from "./useFormattedPhoneNumber.js";
 import React, { forwardRef, memo, useEffect, useMemo, useRef } from "react";
-import { useClerk } from "@clerk/shared/react";
 import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { useClerk } from "@clerk/shared/react";
 
 //#region src/elements/PhoneInput/index.tsx
 const createSelectOption = (country) => {

package/dist/elements/Popover.js

@@ -1,17 +1,14 @@
 import React from "react";
-import { usePortalRoot } from "@clerk/shared/react";
 import { Fragment as Fragment$1, jsx } from "@emotion/react/jsx-runtime";
 import { FloatingFocusManager, FloatingNode, FloatingPortal } from "@floating-ui/react";
 
 //#region src/elements/Popover.tsx
 const Popover = (props) => {
 	const { context, initialFocus, outsideElementsInert = false, order = ["reference", "content"], nodeId, isOpen, portal = true, root, children } = props;
-	const portalRoot = usePortalRoot();
-	const effectiveRoot = root ?? portalRoot?.() ?? void 0;
 	if (portal) return /* @__PURE__ */ jsx(FloatingNode, {
 		id: nodeId,
 		children: /* @__PURE__ */ jsx(FloatingPortal, {
-			root: effectiveRoot,
+			root,
 			children: isOpen && /* @__PURE__ */ jsx(FloatingFocusManager, {
 				context,
 				initialFocus,

package/dist/elements/Popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"Popover.js","names":[],"sources":["../../src/elements/Popover.tsx"],"sourcesContent":["import { usePortalRoot } from '@clerk/shared/react';\nimport type { FloatingContext, ReferenceType } from '@floating-ui/react';\nimport { FloatingFocusManager, FloatingNode, FloatingPortal } from '@floating-ui/react';\nimport type { PropsWithChildren } from 'react';\nimport React from 'react';\n\ntype PopoverProps = PropsWithChildren<{\n  context: FloatingContext<ReferenceType>;\n  nodeId?: string;\n  isOpen?: boolean;\n  initialFocus?: number | React.MutableRefObject<HTMLElement | null>;\n  /**\n   * Determines whether outside elements are inert when modal is enabled. This enables pointer modality without a backdrop.\n   * @default false\n   */\n  outsideElementsInert?: boolean;\n  order?: Array<'reference' | 'floating' | 'content'>;\n  portal?: boolean;\n  /**\n   * The root element to render the portal into.\n   * @default document.body\n   */\n  root?: HTMLElement | React.MutableRefObject<HTMLElement | null>;\n}>;\n\nexport const Popover = (props: PopoverProps) => {\n  const {\n    context,\n    initialFocus,\n    outsideElementsInert = false,\n    order = ['reference', 'content'],\n    nodeId,\n    isOpen,\n    portal = true,\n    root,\n    children,\n  } = props;\n\n  const portalRoot = usePortalRoot();\n  const effectiveRoot = root ?? portalRoot?.() ?? undefined;\n\n  if (portal) {\n    return (\n      <FloatingNode id={nodeId}>\n        <FloatingPortal root={effectiveRoot}>\n          {isOpen && (\n            <FloatingFocusManager\n              context={context}\n              initialFocus={initialFocus}\n              outsideElementsInert={outsideElementsInert}\n              order={order}\n            >\n              <>{children}</>\n            </FloatingFocusManager>\n          )}\n        </FloatingPortal>\n      </FloatingNode>\n    );\n  }\n\n  return (\n    <FloatingNode id={nodeId}>\n      {isOpen && (\n        <FloatingFocusManager\n          context={context}\n          initialFocus={initialFocus}\n          order={order}\n        >\n          <>{children}</>\n        </FloatingFocusManager>\n      )}\n    </FloatingNode>\n  );\n};\n"],"mappings":";;;;;;AAyBA,MAAa,WAAW,UAAwB;CAC9C,MAAM,EACJ,SACA,cACA,uBAAuB,OACvB,QAAQ,CAAC,aAAa,UAAU,EAChC,QACA,QACA,SAAS,MACT,MACA,aACE;CAEJ,MAAM,aAAa,eAAe;CAClC,MAAM,gBAAgB,QAAQ,cAAc,IAAI;AAEhD,KAAI,OACF,QACE,oBAAC;EAAa,IAAI;YAChB,oBAAC;GAAe,MAAM;aACnB,UACC,oBAAC;IACU;IACK;IACQ;IACf;cAEP,kCAAG,WAAY;KACM;IAEV;GACJ;AAInB,QACE,oBAAC;EAAa,IAAI;YACf,UACC,oBAAC;GACU;GACK;GACP;aAEP,kCAAG,WAAY;IACM;GAEZ"}
+{"version":3,"file":"Popover.js","names":[],"sources":["../../src/elements/Popover.tsx"],"sourcesContent":["import type { FloatingContext, ReferenceType } from '@floating-ui/react';\nimport { FloatingFocusManager, FloatingNode, FloatingPortal } from '@floating-ui/react';\nimport type { PropsWithChildren } from 'react';\nimport React from 'react';\n\ntype PopoverProps = PropsWithChildren<{\n  context: FloatingContext<ReferenceType>;\n  nodeId?: string;\n  isOpen?: boolean;\n  initialFocus?: number | React.MutableRefObject<HTMLElement | null>;\n  /**\n   * Determines whether outside elements are inert when modal is enabled. This enables pointer modality without a backdrop.\n   * @default false\n   */\n  outsideElementsInert?: boolean;\n  order?: Array<'reference' | 'floating' | 'content'>;\n  portal?: boolean;\n  /**\n   * The root element to render the portal into.\n   * @default document.body\n   */\n  root?: HTMLElement | React.MutableRefObject<HTMLElement | null>;\n}>;\n\nexport const Popover = (props: PopoverProps) => {\n  const {\n    context,\n    initialFocus,\n    outsideElementsInert = false,\n    order = ['reference', 'content'],\n    nodeId,\n    isOpen,\n    portal = true,\n    root,\n    children,\n  } = props;\n\n  if (portal) {\n    return (\n      <FloatingNode id={nodeId}>\n        <FloatingPortal root={root}>\n          {isOpen && (\n            <FloatingFocusManager\n              context={context}\n              initialFocus={initialFocus}\n              outsideElementsInert={outsideElementsInert}\n              order={order}\n            >\n              <>{children}</>\n            </FloatingFocusManager>\n          )}\n        </FloatingPortal>\n      </FloatingNode>\n    );\n  }\n\n  return (\n    <FloatingNode id={nodeId}>\n      {isOpen && (\n        <FloatingFocusManager\n          context={context}\n          initialFocus={initialFocus}\n          order={order}\n        >\n          <>{children}</>\n        </FloatingFocusManager>\n      )}\n    </FloatingNode>\n  );\n};\n"],"mappings":";;;;;AAwBA,MAAa,WAAW,UAAwB;CAC9C,MAAM,EACJ,SACA,cACA,uBAAuB,OACvB,QAAQ,CAAC,aAAa,UAAU,EAChC,QACA,QACA,SAAS,MACT,MACA,aACE;AAEJ,KAAI,OACF,QACE,oBAAC;EAAa,IAAI;YAChB,oBAAC;GAAqB;aACnB,UACC,oBAAC;IACU;IACK;IACQ;IACf;cAEP,kCAAG,WAAY;KACM;IAEV;GACJ;AAInB,QACE,oBAAC;EAAa,IAAI;YACf,UACC,oBAAC;GACU;GACK;GACP;aAEP,kCAAG,WAAY;IACM;GAEZ"}

package/dist/elements/Select.js

@@ -9,8 +9,8 @@ import { withFloatingTree } from "./contexts/index.js";
 import { Button, Flex, Icon, Input, Text } from "../customizables/index.js";
 import { Popover } from "./Popover.js";
 import React, { useState } from "react";
-import { createContextAndHook } from "@clerk/shared/react";
 import { Fragment as Fragment$1, jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { createContextAndHook } from "@clerk/shared/react";
 
 //#region src/elements/Select.tsx
 const [SelectStateCtx, useSelectState] = createContextAndHook("SelectState");

package/dist/elements/SocialButtons.js

@@ -11,8 +11,8 @@ import { ProviderInitialIcon } from "../common/ProviderInitialIcon.js";
 import { LastAuthenticationStrategyBadge } from "./Badge.js";
 import { distributeStrategiesIntoRows } from "./utils.js";
 import React, { forwardRef, isValidElement } from "react";
-import { useClerk } from "@clerk/shared/react";
 import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { useClerk } from "@clerk/shared/react";
 import { getAlternativePhoneCodeProviderData } from "@clerk/shared/alternativePhoneCode";
 
 //#region src/elements/SocialButtons.tsx

package/dist/elements/Tabs.js

@@ -3,8 +3,8 @@ import { descriptors } from "../customizables/elementDescriptors.js";
 import { Button, Flex } from "../customizables/index.js";
 import { getValidChildren } from "../utils/getValidReactChildren.js";
 import React from "react";
-import { createContextAndHook } from "@clerk/shared/react";
 import { Fragment as Fragment$1, jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { createContextAndHook } from "@clerk/shared/react";
 
 //#region src/elements/Tabs.tsx
 const [TabsContext, useTabsContext] = createContextAndHook("TabsContext");

package/dist/elements/TimerButton.js

@@ -1,8 +1,8 @@
 import { useLocalizations } from "../localization/makeLocalizable.js";
 import { Button } from "../customizables/index.js";
 import React, { useEffect } from "react";
-import { useSafeLayoutEffect } from "@clerk/shared/react";
 import { jsxs } from "@emotion/react/jsx-runtime";
+import { useSafeLayoutEffect } from "@clerk/shared/react";
 
 //#region src/elements/TimerButton.tsx
 const TimerButton = (props) => {

package/dist/elements/Tooltip.js

@@ -3,7 +3,6 @@ import { descriptors } from "../customizables/elementDescriptors.js";
 import { useAppearance } from "../customizables/AppearanceContext.js";
 import { Box, Span, Text } from "../customizables/index.js";
 import * as React$1 from "react";
-import { usePortalRoot } from "@clerk/shared/react";
 import { jsx } from "@emotion/react/jsx-runtime";
 import { FloatingPortal, autoUpdate, flip, offset, shift, useDismiss, useFloating, useFocus, useHover, useInteractions, useMergeRefs, useRole, useTransitionStyles } from "@floating-ui/react";
 
@@ -122,38 +121,34 @@ const Trigger = React$1.forwardRef(function TooltipTrigger({ children, sx,...pro
 const Content = React$1.forwardRef(function TooltipContent({ style, text, sx,...props }, propRef) {
 	const context = useTooltipContext();
 	const ref = useMergeRefs([context.refs.setFloating, propRef]);
-	const effectiveRoot = usePortalRoot()?.() ?? void 0;
 	if (!context.isMounted) return null;
-	return /* @__PURE__ */ jsx(FloatingPortal, {
-		root: effectiveRoot,
+	return /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsx(Box, {
+		ref,
+		elementDescriptor: descriptors.tooltip,
+		style: {
+			...context.floatingStyles,
+			...style
+		},
+		...context.getFloatingProps(props),
 		children: /* @__PURE__ */ jsx(Box, {
-			ref,
-			elementDescriptor: descriptors.tooltip,
-			style: {
-				...context.floatingStyles,
-				...style
-			},
-			...context.getFloatingProps(props),
-			children: /* @__PURE__ */ jsx(Box, {
-				elementDescriptor: descriptors.tooltipContent,
-				style: context.transitionStyles,
-				sx: [(t) => ({
-					paddingBlock: t.space.$1,
-					paddingInline: t.space.$1x5,
-					borderRadius: t.radii.$md,
-					backgroundColor: t.colors.$black,
-					color: t.colors.$white,
-					maxWidth: t.sizes.$60
-				}), sx],
-				children: /* @__PURE__ */ jsx(Text, {
-					elementDescriptor: descriptors.tooltipText,
-					localizationKey: text,
-					variant: "body",
-					colorScheme: "inherit"
-				})
+			elementDescriptor: descriptors.tooltipContent,
+			style: context.transitionStyles,
+			sx: [(t) => ({
+				paddingBlock: t.space.$1,
+				paddingInline: t.space.$1x5,
+				borderRadius: t.radii.$md,
+				backgroundColor: t.colors.$black,
+				color: t.colors.$white,
+				maxWidth: t.sizes.$60
+			}), sx],
+			children: /* @__PURE__ */ jsx(Text, {
+				elementDescriptor: descriptors.tooltipText,
+				localizationKey: text,
+				variant: "body",
+				colorScheme: "inherit"
 			})
 		})
-	});
+	}) });
 });
 const Tooltip = {
 	Root,

package/dist/elements/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","names":["React"],"sources":["../../src/elements/Tooltip.tsx"],"sourcesContent":["import type { Placement, UseFloatingReturn, UseInteractionsReturn } from '@floating-ui/react';\nimport {\n  autoUpdate,\n  flip,\n  FloatingPortal,\n  offset,\n  shift,\n  useDismiss,\n  useFloating,\n  useFocus,\n  useHover,\n  useInteractions,\n  useMergeRefs,\n  useRole,\n  useTransitionStyles,\n} from '@floating-ui/react';\nimport * as React from 'react';\n\nimport { usePortalRoot } from '@clerk/shared/react';\n\nimport { Box, descriptors, type LocalizationKey, Span, Text, useAppearance } from '../customizables';\nimport { usePrefersReducedMotion } from '../hooks';\nimport type { ThemableCssProp } from '../styledSystem';\n\ninterface TooltipOptions {\n  initialOpen?: boolean;\n  placement?: Placement;\n  open?: boolean;\n  onOpenChange?: (open: boolean) => void;\n}\n\ninterface UseTooltipReturn extends UseFloatingReturn, UseInteractionsReturn {\n  open: boolean;\n  setOpen: (open: boolean) => void;\n  isMounted: boolean;\n  transitionStyles: React.CSSProperties;\n}\n\nexport function useTooltip({\n  initialOpen = false,\n  placement = 'top',\n  open: controlledOpen,\n  onOpenChange: setControlledOpen,\n}: TooltipOptions = {}): UseTooltipReturn {\n  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(initialOpen);\n\n  const open = controlledOpen ?? uncontrolledOpen;\n  const setOpen = setControlledOpen ?? setUncontrolledOpen;\n\n  const prefersReducedMotion = usePrefersReducedMotion();\n  const { animations: layoutAnimations } = useAppearance().parsedOptions;\n  const isMotionSafe = !prefersReducedMotion && layoutAnimations === true;\n\n  const data = useFloating({\n    placement,\n    open,\n    onOpenChange: setOpen,\n    whileElementsMounted: autoUpdate,\n    middleware: [\n      offset(6),\n      flip({\n        crossAxis: placement.includes('-'),\n        fallbackAxisSideDirection: 'start',\n        padding: 6,\n      }),\n      shift({ padding: 6 }),\n    ],\n  });\n\n  const context = data.context;\n\n  const hover = useHover(context, {\n    move: false,\n    enabled: controlledOpen == null,\n  });\n  const focus = useFocus(context, {\n    enabled: controlledOpen == null,\n  });\n  const dismiss = useDismiss(context);\n  const role = useRole(context, { role: 'tooltip' });\n\n  const { isMounted, styles: transitionStyles } = useTransitionStyles(context, {\n    duration: isMotionSafe ? 200 : 0,\n    initial: ({ side }) => {\n      return {\n        opacity: 0,\n        transform: side === 'top' ? 'translateY(4px)' : 'translateY(-4px)',\n      };\n    },\n    open: {\n      opacity: 1,\n      transform: 'translate(0)',\n    },\n    close: ({ side }) => ({\n      opacity: 0,\n      transform: side === 'top' ? 'translateY(4px)' : 'translateY(-4px)',\n    }),\n  });\n\n  const interactions = useInteractions([hover, focus, dismiss, role]);\n\n  return React.useMemo(\n    () => ({\n      open,\n      setOpen,\n      isMounted,\n      ...interactions,\n      ...data,\n      transitionStyles,\n    }),\n    [open, setOpen, interactions, data, isMounted, transitionStyles],\n  );\n}\n\ntype ContextType = UseTooltipReturn | null;\n\nconst TooltipContext = React.createContext<ContextType>(null);\n\nexport const useTooltipContext = (): UseTooltipReturn => {\n  const context = React.useContext(TooltipContext);\n\n  if (context == null) {\n    throw new Error('Tooltip components must be wrapped in <Tooltip />');\n  }\n\n  return context;\n};\n\nfunction Root({ children, ...options }: { children: React.ReactNode } & TooltipOptions) {\n  // This can accept any props as options, e.g. `placement`,\n  // or other positioning options.\n  const tooltip = useTooltip(options);\n  return <TooltipContext.Provider value={tooltip}>{children}</TooltipContext.Provider>;\n}\n\ntype TriggerProps = React.HTMLProps<HTMLElement> & {\n  sx?: ThemableCssProp;\n};\n\nconst Trigger = React.forwardRef<HTMLElement, TriggerProps>(function TooltipTrigger(\n  { children, sx, ...props },\n  propRef,\n) {\n  const context = useTooltipContext();\n  const childrenRef = (children as any).ref;\n  const ref = useMergeRefs([context.refs.setReference, propRef, childrenRef]);\n\n  if (!React.isValidElement(children)) {\n    return null;\n  }\n\n  // If the child is disabled, wrap it in a span to handle focus events\n  if (children.props.isDisabled || children.props.disabled) {\n    return (\n      <Span\n        ref={ref}\n        {...context.getReferenceProps({\n          ...props,\n        })}\n        data-state={context.open ? 'open' : 'closed'}\n        sx={[\n          {\n            width: 'fit-content',\n            display: 'inline-block',\n            cursor: 'not-allowed',\n            outline: 'none',\n          },\n          sx,\n        ]}\n        tabIndex={0}\n      >\n        {children}\n      </Span>\n    );\n  }\n\n  return React.cloneElement(\n    children,\n    context.getReferenceProps({\n      ref,\n      ...props,\n      ...children.props,\n      'data-state': context.open ? 'open' : 'closed',\n    }),\n  );\n});\n\nconst Content = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLProps<HTMLDivElement> & {\n    text: string | LocalizationKey;\n    sx?: ThemableCssProp;\n  }\n>(function TooltipContent({ style, text, sx, ...props }, propRef) {\n  const context = useTooltipContext();\n  const ref = useMergeRefs([context.refs.setFloating, propRef]);\n  const portalRoot = usePortalRoot();\n  const effectiveRoot = portalRoot?.() ?? undefined;\n\n  if (!context.isMounted) {\n    return null;\n  }\n\n  return (\n    <FloatingPortal root={effectiveRoot}>\n      <Box\n        ref={ref}\n        elementDescriptor={descriptors.tooltip}\n        style={{\n          ...context.floatingStyles,\n          ...style,\n        }}\n        {...context.getFloatingProps(props)}\n      >\n        <Box\n          elementDescriptor={descriptors.tooltipContent}\n          style={context.transitionStyles}\n          sx={[\n            t => ({\n              paddingBlock: t.space.$1,\n              paddingInline: t.space.$1x5,\n              borderRadius: t.radii.$md,\n              backgroundColor: t.colors.$black,\n              color: t.colors.$white,\n              maxWidth: t.sizes.$60,\n            }),\n            sx,\n          ]}\n        >\n          <Text\n            elementDescriptor={descriptors.tooltipText}\n            localizationKey={text}\n            variant='body'\n            colorScheme='inherit'\n          />\n        </Box>\n      </Box>\n    </FloatingPortal>\n  );\n});\n\nexport const Tooltip = {\n  Root,\n  Trigger,\n  Content,\n};\n"],"mappings":"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"}
+{"version":3,"file":"Tooltip.js","names":["React"],"sources":["../../src/elements/Tooltip.tsx"],"sourcesContent":["import type { Placement, UseFloatingReturn, UseInteractionsReturn } from '@floating-ui/react';\nimport {\n  autoUpdate,\n  flip,\n  FloatingPortal,\n  offset,\n  shift,\n  useDismiss,\n  useFloating,\n  useFocus,\n  useHover,\n  useInteractions,\n  useMergeRefs,\n  useRole,\n  useTransitionStyles,\n} from '@floating-ui/react';\nimport * as React from 'react';\n\nimport { Box, descriptors, type LocalizationKey, Span, Text, useAppearance } from '../customizables';\nimport { usePrefersReducedMotion } from '../hooks';\nimport type { ThemableCssProp } from '../styledSystem';\n\ninterface TooltipOptions {\n  initialOpen?: boolean;\n  placement?: Placement;\n  open?: boolean;\n  onOpenChange?: (open: boolean) => void;\n}\n\ninterface UseTooltipReturn extends UseFloatingReturn, UseInteractionsReturn {\n  open: boolean;\n  setOpen: (open: boolean) => void;\n  isMounted: boolean;\n  transitionStyles: React.CSSProperties;\n}\n\nexport function useTooltip({\n  initialOpen = false,\n  placement = 'top',\n  open: controlledOpen,\n  onOpenChange: setControlledOpen,\n}: TooltipOptions = {}): UseTooltipReturn {\n  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(initialOpen);\n\n  const open = controlledOpen ?? uncontrolledOpen;\n  const setOpen = setControlledOpen ?? setUncontrolledOpen;\n\n  const prefersReducedMotion = usePrefersReducedMotion();\n  const { animations: layoutAnimations } = useAppearance().parsedOptions;\n  const isMotionSafe = !prefersReducedMotion && layoutAnimations === true;\n\n  const data = useFloating({\n    placement,\n    open,\n    onOpenChange: setOpen,\n    whileElementsMounted: autoUpdate,\n    middleware: [\n      offset(6),\n      flip({\n        crossAxis: placement.includes('-'),\n        fallbackAxisSideDirection: 'start',\n        padding: 6,\n      }),\n      shift({ padding: 6 }),\n    ],\n  });\n\n  const context = data.context;\n\n  const hover = useHover(context, {\n    move: false,\n    enabled: controlledOpen == null,\n  });\n  const focus = useFocus(context, {\n    enabled: controlledOpen == null,\n  });\n  const dismiss = useDismiss(context);\n  const role = useRole(context, { role: 'tooltip' });\n\n  const { isMounted, styles: transitionStyles } = useTransitionStyles(context, {\n    duration: isMotionSafe ? 200 : 0,\n    initial: ({ side }) => {\n      return {\n        opacity: 0,\n        transform: side === 'top' ? 'translateY(4px)' : 'translateY(-4px)',\n      };\n    },\n    open: {\n      opacity: 1,\n      transform: 'translate(0)',\n    },\n    close: ({ side }) => ({\n      opacity: 0,\n      transform: side === 'top' ? 'translateY(4px)' : 'translateY(-4px)',\n    }),\n  });\n\n  const interactions = useInteractions([hover, focus, dismiss, role]);\n\n  return React.useMemo(\n    () => ({\n      open,\n      setOpen,\n      isMounted,\n      ...interactions,\n      ...data,\n      transitionStyles,\n    }),\n    [open, setOpen, interactions, data, isMounted, transitionStyles],\n  );\n}\n\ntype ContextType = UseTooltipReturn | null;\n\nconst TooltipContext = React.createContext<ContextType>(null);\n\nexport const useTooltipContext = (): UseTooltipReturn => {\n  const context = React.useContext(TooltipContext);\n\n  if (context == null) {\n    throw new Error('Tooltip components must be wrapped in <Tooltip />');\n  }\n\n  return context;\n};\n\nfunction Root({ children, ...options }: { children: React.ReactNode } & TooltipOptions) {\n  // This can accept any props as options, e.g. `placement`,\n  // or other positioning options.\n  const tooltip = useTooltip(options);\n  return <TooltipContext.Provider value={tooltip}>{children}</TooltipContext.Provider>;\n}\n\ntype TriggerProps = React.HTMLProps<HTMLElement> & {\n  sx?: ThemableCssProp;\n};\n\nconst Trigger = React.forwardRef<HTMLElement, TriggerProps>(function TooltipTrigger(\n  { children, sx, ...props },\n  propRef,\n) {\n  const context = useTooltipContext();\n  const childrenRef = (children as any).ref;\n  const ref = useMergeRefs([context.refs.setReference, propRef, childrenRef]);\n\n  if (!React.isValidElement(children)) {\n    return null;\n  }\n\n  // If the child is disabled, wrap it in a span to handle focus events\n  if (children.props.isDisabled || children.props.disabled) {\n    return (\n      <Span\n        ref={ref}\n        {...context.getReferenceProps({\n          ...props,\n        })}\n        data-state={context.open ? 'open' : 'closed'}\n        sx={[\n          {\n            width: 'fit-content',\n            display: 'inline-block',\n            cursor: 'not-allowed',\n            outline: 'none',\n          },\n          sx,\n        ]}\n        tabIndex={0}\n      >\n        {children}\n      </Span>\n    );\n  }\n\n  return React.cloneElement(\n    children,\n    context.getReferenceProps({\n      ref,\n      ...props,\n      ...children.props,\n      'data-state': context.open ? 'open' : 'closed',\n    }),\n  );\n});\n\nconst Content = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLProps<HTMLDivElement> & {\n    text: string | LocalizationKey;\n    sx?: ThemableCssProp;\n  }\n>(function TooltipContent({ style, text, sx, ...props }, propRef) {\n  const context = useTooltipContext();\n  const ref = useMergeRefs([context.refs.setFloating, propRef]);\n\n  if (!context.isMounted) {\n    return null;\n  }\n\n  return (\n    <FloatingPortal>\n      <Box\n        ref={ref}\n        elementDescriptor={descriptors.tooltip}\n        style={{\n          ...context.floatingStyles,\n          ...style,\n        }}\n        {...context.getFloatingProps(props)}\n      >\n        <Box\n          elementDescriptor={descriptors.tooltipContent}\n          style={context.transitionStyles}\n          sx={[\n            t => ({\n              paddingBlock: t.space.$1,\n              paddingInline: t.space.$1x5,\n              borderRadius: t.radii.$md,\n              backgroundColor: t.colors.$black,\n              color: t.colors.$white,\n              maxWidth: t.sizes.$60,\n            }),\n            sx,\n          ]}\n        >\n          <Text\n            elementDescriptor={descriptors.tooltipText}\n            localizationKey={text}\n            variant='body'\n            colorScheme='inherit'\n          />\n        </Box>\n      </Box>\n    </FloatingPortal>\n  );\n});\n\nexport const Tooltip = {\n  Root,\n  Trigger,\n  Content,\n};\n"],"mappings":";;;;;;;;;AAoCA,SAAgB,WAAW,EACzB,cAAc,OACd,YAAY,OACZ,MAAM,gBACN,cAAc,sBACI,EAAE,EAAoB;CACxC,MAAM,CAAC,kBAAkB,uBAAuBA,QAAM,SAAS,YAAY;CAE3E,MAAM,OAAO,kBAAkB;CAC/B,MAAM,UAAU,qBAAqB;CAErC,MAAM,uBAAuB,yBAAyB;CACtD,MAAM,EAAE,YAAY,qBAAqB,eAAe,CAAC;CACzD,MAAM,eAAe,CAAC,wBAAwB,qBAAqB;CAEnE,MAAM,OAAO,YAAY;EACvB;EACA;EACA,cAAc;EACd,sBAAsB;EACtB,YAAY;GACV,OAAO,EAAE;GACT,KAAK;IACH,WAAW,UAAU,SAAS,IAAI;IAClC,2BAA2B;IAC3B,SAAS;IACV,CAAC;GACF,MAAM,EAAE,SAAS,GAAG,CAAC;GACtB;EACF,CAAC;CAEF,MAAM,UAAU,KAAK;CAErB,MAAM,QAAQ,SAAS,SAAS;EAC9B,MAAM;EACN,SAAS,kBAAkB;EAC5B,CAAC;CACF,MAAM,QAAQ,SAAS,SAAS,EAC9B,SAAS,kBAAkB,MAC5B,CAAC;CACF,MAAM,UAAU,WAAW,QAAQ;CACnC,MAAM,OAAO,QAAQ,SAAS,EAAE,MAAM,WAAW,CAAC;CAElD,MAAM,EAAE,WAAW,QAAQ,qBAAqB,oBAAoB,SAAS;EAC3E,UAAU,eAAe,MAAM;EAC/B,UAAU,EAAE,WAAW;AACrB,UAAO;IACL,SAAS;IACT,WAAW,SAAS,QAAQ,oBAAoB;IACjD;;EAEH,MAAM;GACJ,SAAS;GACT,WAAW;GACZ;EACD,QAAQ,EAAE,YAAY;GACpB,SAAS;GACT,WAAW,SAAS,QAAQ,oBAAoB;GACjD;EACF,CAAC;CAEF,MAAM,eAAe,gBAAgB;EAAC;EAAO;EAAO;EAAS;EAAK,CAAC;AAEnE,QAAOA,QAAM,eACJ;EACL;EACA;EACA;EACA,GAAG;EACH,GAAG;EACH;EACD,GACD;EAAC;EAAM;EAAS;EAAc;EAAM;EAAW;EAAiB,CACjE;;AAKH,MAAM,iBAAiBA,QAAM,cAA2B,KAAK;AAE7D,MAAa,0BAA4C;CACvD,MAAM,UAAUA,QAAM,WAAW,eAAe;AAEhD,KAAI,WAAW,KACb,OAAM,IAAI,MAAM,oDAAoD;AAGtE,QAAO;;AAGT,SAAS,KAAK,EAAE,SAAU,GAAG,WAA2D;CAGtF,MAAM,UAAU,WAAW,QAAQ;AACnC,QAAO,oBAAC,eAAe;EAAS,OAAO;EAAU;GAAmC;;AAOtF,MAAM,UAAUA,QAAM,WAAsC,SAAS,eACnE,EAAE,UAAU,GAAI,GAAG,SACnB,SACA;CACA,MAAM,UAAU,mBAAmB;CACnC,MAAM,cAAe,SAAiB;CACtC,MAAM,MAAM,aAAa;EAAC,QAAQ,KAAK;EAAc;EAAS;EAAY,CAAC;AAE3E,KAAI,CAACA,QAAM,eAAe,SAAS,CACjC,QAAO;AAIT,KAAI,SAAS,MAAM,cAAc,SAAS,MAAM,SAC9C,QACE,oBAAC;EACM;EACL,GAAI,QAAQ,kBAAkB,EAC5B,GAAG,OACJ,CAAC;EACF,cAAY,QAAQ,OAAO,SAAS;EACpC,IAAI,CACF;GACE,OAAO;GACP,SAAS;GACT,QAAQ;GACR,SAAS;GACV,EACD,GACD;EACD,UAAU;EAET;GACI;AAIX,QAAOA,QAAM,aACX,UACA,QAAQ,kBAAkB;EACxB;EACA,GAAG;EACH,GAAG,SAAS;EACZ,cAAc,QAAQ,OAAO,SAAS;EACvC,CAAC,CACH;EACD;AAEF,MAAM,UAAUA,QAAM,WAMpB,SAAS,eAAe,EAAE,OAAO,MAAM,GAAI,GAAG,SAAS,SAAS;CAChE,MAAM,UAAU,mBAAmB;CACnC,MAAM,MAAM,aAAa,CAAC,QAAQ,KAAK,aAAa,QAAQ,CAAC;AAE7D,KAAI,CAAC,QAAQ,UACX,QAAO;AAGT,QACE,oBAAC,4BACC,oBAAC;EACM;EACL,mBAAmB,YAAY;EAC/B,OAAO;GACL,GAAG,QAAQ;GACX,GAAG;GACJ;EACD,GAAI,QAAQ,iBAAiB,MAAM;YAEnC,oBAAC;GACC,mBAAmB,YAAY;GAC/B,OAAO,QAAQ;GACf,IAAI,EACF,OAAM;IACJ,cAAc,EAAE,MAAM;IACtB,eAAe,EAAE,MAAM;IACvB,cAAc,EAAE,MAAM;IACtB,iBAAiB,EAAE,OAAO;IAC1B,OAAO,EAAE,OAAO;IAChB,UAAU,EAAE,MAAM;IACnB,GACD,GACD;aAED,oBAAC;IACC,mBAAmB,YAAY;IAC/B,iBAAiB;IACjB,SAAQ;IACR,aAAY;KACZ;IACE;GACF,GACS;EAEnB;AAEF,MAAa,UAAU;CACrB;CACA;CACA;CACD"}

package/dist/elements/contexts/index.js

@@ -1,8 +1,8 @@
 import { useRouter } from "../../router/RouteContext.js";
 import { useLocalizations } from "../../localization/makeLocalizable.js";
 import React from "react";
-import { createContextAndHook } from "@clerk/shared/react";
 import { jsx } from "@emotion/react/jsx-runtime";
+import { createContextAndHook } from "@clerk/shared/react";
 import { FloatingTree, useFloatingParentNodeId } from "@floating-ui/react";
 
 //#region src/elements/contexts/index.tsx

package/dist/{enableOrganizationsPrompt_ui_3321de_1.0.0-snapshot.v20251215212157.js → enableOrganizationsPrompt_ui_d63654_1.0.0-snapshot.v20251217162523.js}

@@ -1,4 +1,4 @@
-"use strict";(globalThis.webpackChunk_clerk_ui=globalThis.webpackChunk_clerk_ui||[]).push([["533"],{7334:function(e,i,n){n.r(i),n.d(i,{EnableOrganizationsPrompt:()=>f});var r=n(4518),t=n(9361),o=n(8802),a=n(5074),s=n(7697),l=n(6705),d=n(9406),c=n(1464),p=n(8272),h=n(1986),g=n(8307);let u=({caller:e,onSuccess:i,onClose:n})=>{let d=(0,t.ho)(),[c,u]=(0,a.useState)(!1),[f,b]=(0,a.useState)(!1),[x,v]=(0,a.useState)(!1),k=(0,a.useRef)(null),y=(0,s.O)(),z=!e.startsWith("use"),$=void 0!==y?.organizationSettings.forceOrganizationSelection;return(0,r.Y)(h.Z,{children:(0,r.Y)(l.Modal,{canCloseModal:!1,containerSx:()=>({alignItems:"center"}),initialFocusRef:k,children:(0,r.FD)(g.Uw,{sx:()=>({display:"flex",flexDirection:"column",width:"30rem",maxWidth:"calc(100vw - 2rem)"}),children:[(0,r.FD)(p.so,{direction:"col",sx:e=>({padding:`${e.sizes.$4} ${e.sizes.$6}`,paddingBottom:e.sizes.$4,gap:e.sizes.$2}),children:[(0,r.FD)(p.so,{as:"header",align:"center",sx:e=>({gap:e.sizes.$2}),children:[(0,r.Y)(Y,{isEnabled:f}),(0,r.Y)("h1",{css:[g.mk,(0,o.AH)`
+"use strict";(globalThis.webpackChunk_clerk_ui=globalThis.webpackChunk_clerk_ui||[]).push([["533"],{7334:function(e,i,n){n.r(i),n.d(i,{EnableOrganizationsPrompt:()=>f});var r=n(4518),t=n(1210),o=n(8802),a=n(5074),s=n(7697),l=n(6705),d=n(9406),c=n(1464),p=n(8272),h=n(1986),g=n(8307);let u=({caller:e,onSuccess:i,onClose:n})=>{let d=(0,t.ho)(),[c,u]=(0,a.useState)(!1),[f,b]=(0,a.useState)(!1),[x,v]=(0,a.useState)(!1),k=(0,a.useRef)(null),y=(0,s.O)(),z=!e.startsWith("use"),$=void 0!==y?.organizationSettings.forceOrganizationSelection;return(0,r.Y)(h.Z,{children:(0,r.Y)(l.Modal,{canCloseModal:!1,containerSx:()=>({alignItems:"center"}),initialFocusRef:k,children:(0,r.FD)(g.Uw,{sx:()=>({display:"flex",flexDirection:"column",width:"30rem",maxWidth:"calc(100vw - 2rem)"}),children:[(0,r.FD)(p.so,{direction:"col",sx:e=>({padding:`${e.sizes.$4} ${e.sizes.$6}`,paddingBottom:e.sizes.$4,gap:e.sizes.$2}),children:[(0,r.FD)(p.so,{as:"header",align:"center",sx:e=>({gap:e.sizes.$2}),children:[(0,r.Y)(Y,{isEnabled:f}),(0,r.Y)("h1",{css:[g.mk,(0,o.AH)`
                     color: white;
                     font-size: 0.875rem;
                     font-weight: 500;