@razorpay/blade 12.68.0 → 12.89.1

package/build/lib/web/development/components/Popover/Popover.web.js

@@ -6,7 +6,9 @@ import React__default from 'react';
 import { PopoverContent } from './PopoverContent.js';
 import { ARROW_HEIGHT, ARROW_WIDTH } from './constants.js';
 import { PopoverContext } from './PopoverContext.js';
+import { componentIds } from './componentIds.js';
 import '../BladeProvider/index.js';
+import { TopNavOverlayThemeOverride } from '../TopNav/TopNavOverlayThemeOverride.js';
 import '../Box/BaseBox/index.js';
 import '../../utils/metaAttribute/index.js';
 import '../../tokens/global/index.js';
@@ -19,20 +21,24 @@ import { useId } from '../../utils/useId.js';
 import { getFloatingPlacementParts } from '../../utils/getFloatingPlacementParts.js';
 import { componentZIndices } from '../../utils/componentZIndices.js';
 import '../../utils/makeAnalyticsAttribute/index.js';
+import '../../utils/assignWithoutSideEffects/index.js';
+import '../OverlayContextReset/index.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import useTheme from '../BladeProvider/useTheme.js';
 import { size } from '../../tokens/global/size.js';
+import { OverlayContextReset } from '../OverlayContextReset/OverlayContextReset.js';
 import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
 import { metaAttribute } from '../../utils/metaAttribute/metaAttribute.web.js';
 import { MetaConstants } from '../../utils/metaAttribute/metaConstants.js';
 import { makeAccessible } from '../../utils/makeAccessible/makeAccessible.web.js';
 import { makeAnalyticsAttribute } from '../../utils/makeAnalyticsAttribute/makeAnalyticsAttribute.js';
 import { PopupArrow } from '../PopupArrow/PopupArrow.web.js';
+import { assignWithoutSideEffects } from '../../utils/assignWithoutSideEffects/assignWithoutSideEffects.js';
 
 var _excluded = ["content", "title", "titleLeading", "footer", "children", "placement", "onOpenChange", "zIndex", "isOpen", "defaultIsOpen", "initialFocusRef", "openInteraction"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var Popover = function Popover(_ref) {
+var _Popover = function _Popover(_ref) {
   var content = _ref.content,
     title = _ref.title,
     titleLeading = _ref.titleLeading,
@@ -163,42 +169,53 @@ var Popover = function Popover(_ref) {
     children: [/*#__PURE__*/React__default.cloneElement(children, _objectSpread({
       ref: mergedRef
     }, mergeProps(children.props, getReferenceProps()))), isMounted && /*#__PURE__*/jsx(FloatingPortal, {
-      children: /*#__PURE__*/jsx(FloatingFocusManager, {
-        initialFocus: initialFocusRef !== null && initialFocusRef !== void 0 ? initialFocusRef : openInteraction === 'hover' ? -1 : defaultInitialFocusRef,
-        context: context,
-        modal: true,
-        guards: true,
-        children: /*#__PURE__*/jsx(BaseBox, _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
-          ref: refs.setFloating,
-          style: floatingStyles
-          // TODO: Tokenize zIndex values
-          ,
-          zIndex: zIndex
-        }, getFloatingProps()), metaAttribute({
-          name: MetaConstants.Popover
-        })), makeAccessible({
-          labelledBy: titleId
-        })), makeAnalyticsAttribute(rest)), {}, {
-          children: /*#__PURE__*/jsx(PopoverContent, {
-            title: title,
-            titleLeading: titleLeading,
-            footer: footer,
-            style: styles,
-            arrow: /*#__PURE__*/jsx(PopupArrow, {
-              ref: arrowRef,
-              context: context,
-              width: ARROW_WIDTH,
-              height: ARROW_HEIGHT,
-              fillColor: theme.colors.popup.background.subtle,
-              strokeColor: theme.colors.popup.border.subtle
-            }),
-            children: content
+      children: /*#__PURE__*/jsx(OverlayContextReset, {
+        children: /*#__PURE__*/jsx(FloatingFocusManager, {
+          initialFocus: initialFocusRef !== null && initialFocusRef !== void 0 ? initialFocusRef : openInteraction === 'hover' ? -1 : defaultInitialFocusRef,
+          context: context,
+          modal: true,
+          guards: true,
+          children: /*#__PURE__*/jsx(TopNavOverlayThemeOverride, {
+            children: /*#__PURE__*/jsx(BaseBox, _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
+              ref: refs.setFloating,
+              style: floatingStyles
+              // TODO: Tokenize zIndex values
+              ,
+              zIndex: zIndex
+            }, getFloatingProps()), metaAttribute({
+              name: MetaConstants.Popover
+            })), makeAccessible({
+              labelledBy: titleId
+            })), makeAnalyticsAttribute(rest)), {}, {
+              children: /*#__PURE__*/jsx(PopoverContent, {
+                title: title,
+                titleLeading: titleLeading,
+                footer: footer,
+                style: styles,
+                arrow: /*#__PURE__*/jsx(PopupArrow, {
+                  ref: arrowRef,
+                  context: context,
+                  width: ARROW_WIDTH,
+                  height: ARROW_HEIGHT,
+                  fillColor: theme.colors.popup.background.gray.moderate,
+                  strokeColor: theme.colors.popup.border.gray.moderate,
+                  strokeWidth: theme.border.width.thin,
+                  style: {
+                    transform: 'translateY(-1px)'
+                  }
+                }),
+                children: content
+              })
+            }))
           })
-        }))
+        })
       })
     })]
   });
 };
+var Popover = /*#__PURE__*/assignWithoutSideEffects(_Popover, {
+  componentId: componentIds.Popover
+});
 
 export { Popover };
 //# sourceMappingURL=Popover.web.js.map

package/build/lib/web/development/components/Popover/Popover.web.js.map

@@ -1 +1 @@
-{"version":3,"file":"Popover.web.js","sources":["../../../../../../src/components/Popover/Popover.web.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/restrict-plus-operands */\nimport {\n  shift,\n  FloatingPortal,\n  arrow,\n  flip,\n  offset,\n  useFloating,\n  useInteractions,\n  useRole,\n  useTransitionStyles,\n  autoUpdate,\n  useClick,\n  useHover,\n  useDismiss,\n  FloatingFocusManager,\n} from '@floating-ui/react';\nimport React from 'react';\nimport type { PopoverProps } from './types';\nimport { PopoverContent } from './PopoverContent';\nimport { ARROW_HEIGHT, ARROW_WIDTH } from './constants';\nimport { PopoverContext } from './PopoverContext';\nimport { useTheme } from '~components/BladeProvider';\nimport BaseBox from '~components/Box/BaseBox';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { size } from '~tokens/global';\nimport { useControllableState } from '~utils/useControllable';\nimport { mergeProps } from '~utils/mergeProps';\nimport { PopupArrow } from '~components/PopupArrow';\nimport { useMergeRefs } from '~utils/useMergeRefs';\nimport { makeAccessible } from '~utils/makeAccessible';\nimport { useId } from '~utils/useId';\nimport { getFloatingPlacementParts } from '~utils/getFloatingPlacementParts';\nimport { componentZIndices } from '~utils/componentZIndices';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\n\nconst Popover = ({\n  content,\n  title,\n  titleLeading,\n  footer,\n  children,\n  placement = 'top',\n  onOpenChange,\n  zIndex = componentZIndices.popover,\n  isOpen,\n  defaultIsOpen,\n  initialFocusRef,\n  openInteraction = 'click',\n  ...rest\n}: PopoverProps): React.ReactElement => {\n  const { theme } = useTheme();\n  const defaultInitialFocusRef = React.useRef<HTMLButtonElement>(null);\n  const arrowRef = React.useRef<SVGSVGElement>(null);\n  const titleId = useId('popover-title');\n\n  const GAP = theme.spacing[2];\n  const [side] = getFloatingPlacementParts(placement);\n  const isHorizontal = side === 'left' || side === 'right';\n  const isOppositeAxis = side === 'right' || side === 'bottom';\n\n  const [controllableIsOpen, controllableSetIsOpen] = useControllableState({\n    value: isOpen,\n    defaultValue: defaultIsOpen,\n    onChange: (isOpen) => onOpenChange?.({ isOpen }),\n  });\n\n  const { refs, floatingStyles, context, placement: computedPlacement } = useFloating({\n    open: controllableIsOpen,\n    onOpenChange: (isOpen) => controllableSetIsOpen(() => isOpen),\n    placement,\n    strategy: 'fixed',\n    middleware: [\n      shift({ crossAxis: false, padding: GAP }),\n      flip({ padding: GAP, fallbackAxisSideDirection: 'end' }),\n      offset(GAP + ARROW_HEIGHT),\n      arrow({\n        element: arrowRef,\n        padding: isHorizontal ? GAP + ARROW_HEIGHT : ARROW_WIDTH,\n      }),\n    ],\n    whileElementsMounted: autoUpdate,\n  });\n\n  const close = React.useCallback(() => {\n    controllableSetIsOpen(() => false);\n  }, [controllableSetIsOpen]);\n\n  // we need to animate from the offset of the computed placement\n  // because placement can change dynamically based on available space\n  const [computedSide] = getFloatingPlacementParts(computedPlacement);\n  const computedIsHorizontal = computedSide === 'left' || computedSide === 'right';\n  const animationOffset = isOppositeAxis ? -size[4] : size[4];\n  const { isMounted, styles } = useTransitionStyles(context, {\n    duration: theme.motion.duration.quick,\n    initial: {\n      opacity: 0,\n      transform: `translate${computedIsHorizontal ? 'X' : 'Y'}(${animationOffset}px)`,\n    },\n  });\n\n  // remove click handler if popover is controlled\n  const isControlled = isOpen !== undefined;\n  const click = useClick(context, { enabled: !isControlled && openInteraction === 'click' });\n  const hover = useHover(context, { enabled: !isControlled && openInteraction === 'hover' });\n  const dismiss = useDismiss(context);\n  const role = useRole(context);\n\n  const { getReferenceProps, getFloatingProps } = useInteractions([click, dismiss, role, hover]);\n  const triggerRef = React.useRef<HTMLButtonElement>(null);\n  const mergedRef = useMergeRefs(refs.setReference, triggerRef);\n\n  const contextValue = React.useMemo(() => {\n    return {\n      close,\n      defaultInitialFocusRef,\n      titleId,\n      openInteraction,\n    };\n  }, [close, titleId, openInteraction]);\n\n  // Inject aria attributes to trigger\n  // Doing it this way instead of makeAccessible()\n  // because with makeAccessible we will need to make sure aria-controls, aria-expanded etc\n  // are exposed from the trigger component prop, which we cannot ensure\n  React.useLayoutEffect(() => {\n    if (!triggerRef.current) return;\n\n    const props = getReferenceProps() as Record<string, string>;\n    for (const key of Object.keys(props)) {\n      if (key.startsWith('aria-')) {\n        triggerRef.current.setAttribute(key, props[key]);\n      }\n    }\n  }, [getReferenceProps, triggerRef]);\n\n  return (\n    <PopoverContext.Provider value={contextValue}>\n      {/* Cloning the trigger children to enhance it with ref and event handler */}\n      {React.cloneElement(children, {\n        ref: mergedRef,\n        ...mergeProps(children.props, getReferenceProps()),\n      })}\n      {isMounted && (\n        <FloatingPortal>\n          <FloatingFocusManager\n            initialFocus={\n              initialFocusRef ?? (openInteraction === 'hover' ? -1 : defaultInitialFocusRef)\n            }\n            context={context}\n            modal={true}\n            guards={true}\n          >\n            <BaseBox\n              ref={refs.setFloating}\n              style={floatingStyles}\n              // TODO: Tokenize zIndex values\n              zIndex={zIndex}\n              {...getFloatingProps()}\n              {...metaAttribute({ name: MetaConstants.Popover })}\n              {...makeAccessible({ labelledBy: titleId })}\n              {...makeAnalyticsAttribute(rest)}\n            >\n              <PopoverContent\n                title={title}\n                titleLeading={titleLeading}\n                footer={footer}\n                style={styles}\n                arrow={\n                  <PopupArrow\n                    ref={arrowRef}\n                    context={context}\n                    width={ARROW_WIDTH}\n                    height={ARROW_HEIGHT}\n                    fillColor={theme.colors.popup.background.subtle}\n                    strokeColor={theme.colors.popup.border.subtle}\n                  />\n                }\n              >\n                {content}\n              </PopoverContent>\n            </BaseBox>\n          </FloatingFocusManager>\n        </FloatingPortal>\n      )}\n    </PopoverContext.Provider>\n  );\n};\n\nexport { Popover };\n"],"names":["Popover","_ref","content","title","titleLeading","footer","children","_ref$placement","placement","onOpenChange","_ref$zIndex","zIndex","componentZIndices","popover","isOpen","defaultIsOpen","initialFocusRef","_ref$openInteraction","openInteraction","rest","_objectWithoutProperties","_excluded","_useTheme","useTheme","theme","defaultInitialFocusRef","React","useRef","arrowRef","titleId","useId","GAP","spacing","_getFloatingPlacement","getFloatingPlacementParts","_getFloatingPlacement2","_slicedToArray","side","isHorizontal","isOppositeAxis","_useControllableState","useControllableState","value","defaultValue","onChange","_useControllableState2","controllableIsOpen","controllableSetIsOpen","_useFloating","useFloating","open","strategy","middleware","shift","crossAxis","padding","flip","fallbackAxisSideDirection","offset","ARROW_HEIGHT","arrow","element","ARROW_WIDTH","whileElementsMounted","autoUpdate","refs","floatingStyles","context","computedPlacement","close","useCallback","_getFloatingPlacement3","_getFloatingPlacement4","computedSide","computedIsHorizontal","animationOffset","size","_useTransitionStyles","useTransitionStyles","duration","motion","quick","initial","opacity","transform","concat","isMounted","styles","isControlled","undefined","click","useClick","enabled","hover","useHover","dismiss","useDismiss","role","useRole","_useInteractions","useInteractions","getReferenceProps","getFloatingProps","triggerRef","mergedRef","useMergeRefs","setReference","contextValue","useMemo","useLayoutEffect","current","props","_i","_Object$keys","Object","keys","length","key","startsWith","setAttribute","_jsxs","PopoverContext","Provider","cloneElement","_objectSpread","ref","mergeProps","_jsx","FloatingPortal","FloatingFocusManager","initialFocus","modal","guards","BaseBox","setFloating","style","metaAttribute","name","MetaConstants","makeAccessible","labelledBy","makeAnalyticsAttribute","PopoverContent","PopupArrow","width","height","fillColor","colors","popup","background","subtle","strokeColor","border"],"mappings":"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"}
+{"version":3,"file":"Popover.web.js","sources":["../../../../../../src/components/Popover/Popover.web.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/restrict-plus-operands */\nimport {\n  shift,\n  FloatingPortal,\n  arrow,\n  flip,\n  offset,\n  useFloating,\n  useInteractions,\n  useRole,\n  useTransitionStyles,\n  autoUpdate,\n  useClick,\n  useHover,\n  useDismiss,\n  FloatingFocusManager,\n} from '@floating-ui/react';\nimport React from 'react';\nimport type { PopoverProps } from './types';\nimport { PopoverContent } from './PopoverContent';\nimport { ARROW_HEIGHT, ARROW_WIDTH } from './constants';\nimport { PopoverContext } from './PopoverContext';\nimport { componentIds } from './componentIds';\nimport { useTheme } from '~components/BladeProvider';\nimport { TopNavOverlayThemeOverride } from '~components/TopNav/TopNavOverlayThemeOverride';\nimport BaseBox from '~components/Box/BaseBox';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { size } from '~tokens/global';\nimport { useControllableState } from '~utils/useControllable';\nimport { mergeProps } from '~utils/mergeProps';\nimport { PopupArrow } from '~components/PopupArrow';\nimport { useMergeRefs } from '~utils/useMergeRefs';\nimport { makeAccessible } from '~utils/makeAccessible';\nimport { useId } from '~utils/useId';\nimport { getFloatingPlacementParts } from '~utils/getFloatingPlacementParts';\nimport { componentZIndices } from '~utils/componentZIndices';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport { OverlayContextReset } from '~components/OverlayContextReset';\n\nconst _Popover = ({\n  content,\n  title,\n  titleLeading,\n  footer,\n  children,\n  placement = 'top',\n  onOpenChange,\n  zIndex = componentZIndices.popover,\n  isOpen,\n  defaultIsOpen,\n  initialFocusRef,\n  openInteraction = 'click',\n  ...rest\n}: PopoverProps): React.ReactElement => {\n  const { theme } = useTheme();\n  const defaultInitialFocusRef = React.useRef<HTMLButtonElement>(null);\n  const arrowRef = React.useRef<SVGSVGElement>(null);\n  const titleId = useId('popover-title');\n\n  const GAP = theme.spacing[2];\n  const [side] = getFloatingPlacementParts(placement);\n  const isHorizontal = side === 'left' || side === 'right';\n  const isOppositeAxis = side === 'right' || side === 'bottom';\n\n  const [controllableIsOpen, controllableSetIsOpen] = useControllableState({\n    value: isOpen,\n    defaultValue: defaultIsOpen,\n    onChange: (isOpen) => onOpenChange?.({ isOpen }),\n  });\n\n  const { refs, floatingStyles, context, placement: computedPlacement } = useFloating({\n    open: controllableIsOpen,\n    onOpenChange: (isOpen) => controllableSetIsOpen(() => isOpen),\n    placement,\n    strategy: 'fixed',\n    middleware: [\n      shift({ crossAxis: false, padding: GAP }),\n      flip({ padding: GAP, fallbackAxisSideDirection: 'end' }),\n      offset(GAP + ARROW_HEIGHT),\n      arrow({\n        element: arrowRef,\n        padding: isHorizontal ? GAP + ARROW_HEIGHT : ARROW_WIDTH,\n      }),\n    ],\n    whileElementsMounted: autoUpdate,\n  });\n\n  const close = React.useCallback(() => {\n    controllableSetIsOpen(() => false);\n  }, [controllableSetIsOpen]);\n\n  // we need to animate from the offset of the computed placement\n  // because placement can change dynamically based on available space\n  const [computedSide] = getFloatingPlacementParts(computedPlacement);\n  const computedIsHorizontal = computedSide === 'left' || computedSide === 'right';\n  const animationOffset = isOppositeAxis ? -size[4] : size[4];\n  const { isMounted, styles } = useTransitionStyles(context, {\n    duration: theme.motion.duration.quick,\n    initial: {\n      opacity: 0,\n      transform: `translate${computedIsHorizontal ? 'X' : 'Y'}(${animationOffset}px)`,\n    },\n  });\n\n  // remove click handler if popover is controlled\n  const isControlled = isOpen !== undefined;\n  const click = useClick(context, { enabled: !isControlled && openInteraction === 'click' });\n  const hover = useHover(context, { enabled: !isControlled && openInteraction === 'hover' });\n  const dismiss = useDismiss(context);\n  const role = useRole(context);\n\n  const { getReferenceProps, getFloatingProps } = useInteractions([click, dismiss, role, hover]);\n  const triggerRef = React.useRef<HTMLButtonElement>(null);\n  const mergedRef = useMergeRefs(refs.setReference, triggerRef);\n\n  const contextValue = React.useMemo(() => {\n    return {\n      close,\n      defaultInitialFocusRef,\n      titleId,\n      openInteraction,\n    };\n  }, [close, titleId, openInteraction]);\n\n  // Inject aria attributes to trigger\n  // Doing it this way instead of makeAccessible()\n  // because with makeAccessible we will need to make sure aria-controls, aria-expanded etc\n  // are exposed from the trigger component prop, which we cannot ensure\n  React.useLayoutEffect(() => {\n    if (!triggerRef.current) return;\n\n    const props = getReferenceProps() as Record<string, string>;\n    for (const key of Object.keys(props)) {\n      if (key.startsWith('aria-')) {\n        triggerRef.current.setAttribute(key, props[key]);\n      }\n    }\n  }, [getReferenceProps, triggerRef]);\n\n  return (\n    <PopoverContext.Provider value={contextValue}>\n      {/* Cloning the trigger children to enhance it with ref and event handler */}\n      {React.cloneElement(children, {\n        ref: mergedRef,\n        ...mergeProps(children.props, getReferenceProps()),\n      })}\n      {isMounted && (\n        <FloatingPortal>\n          <OverlayContextReset>\n            <FloatingFocusManager\n              initialFocus={\n                initialFocusRef ?? (openInteraction === 'hover' ? -1 : defaultInitialFocusRef)\n              }\n              context={context}\n              modal={true}\n              guards={true}\n            >\n              <TopNavOverlayThemeOverride>\n                <BaseBox\n                  ref={refs.setFloating}\n                  style={floatingStyles}\n                  // TODO: Tokenize zIndex values\n                  zIndex={zIndex}\n                  {...getFloatingProps()}\n                  {...metaAttribute({ name: MetaConstants.Popover })}\n                  {...makeAccessible({ labelledBy: titleId })}\n                  {...makeAnalyticsAttribute(rest)}\n                >\n                  <PopoverContent\n                    title={title}\n                    titleLeading={titleLeading}\n                    footer={footer}\n                    style={styles}\n                    arrow={\n                      <PopupArrow\n                        ref={arrowRef}\n                        context={context}\n                        width={ARROW_WIDTH}\n                        height={ARROW_HEIGHT}\n                        fillColor={theme.colors.popup.background.gray.moderate}\n                        strokeColor={theme.colors.popup.border.gray.moderate}\n                        strokeWidth={theme.border.width.thin}\n                        style={{ transform: 'translateY(-1px)' }}\n                      />\n                    }\n                  >\n                    {content}\n                  </PopoverContent>\n                </BaseBox>\n              </TopNavOverlayThemeOverride>\n            </FloatingFocusManager>\n          </OverlayContextReset>\n        </FloatingPortal>\n      )}\n    </PopoverContext.Provider>\n  );\n};\n\nconst Popover = assignWithoutSideEffects(_Popover, {\n  componentId: componentIds.Popover,\n});\n\nexport { Popover };\n"],"names":["_Popover","_ref","content","title","titleLeading","footer","children","_ref$placement","placement","onOpenChange","_ref$zIndex","zIndex","componentZIndices","popover","isOpen","defaultIsOpen","initialFocusRef","_ref$openInteraction","openInteraction","rest","_objectWithoutProperties","_excluded","_useTheme","useTheme","theme","defaultInitialFocusRef","React","useRef","arrowRef","titleId","useId","GAP","spacing","_getFloatingPlacement","getFloatingPlacementParts","_getFloatingPlacement2","_slicedToArray","side","isHorizontal","isOppositeAxis","_useControllableState","useControllableState","value","defaultValue","onChange","_useControllableState2","controllableIsOpen","controllableSetIsOpen","_useFloating","useFloating","open","strategy","middleware","shift","crossAxis","padding","flip","fallbackAxisSideDirection","offset","ARROW_HEIGHT","arrow","element","ARROW_WIDTH","whileElementsMounted","autoUpdate","refs","floatingStyles","context","computedPlacement","close","useCallback","_getFloatingPlacement3","_getFloatingPlacement4","computedSide","computedIsHorizontal","animationOffset","size","_useTransitionStyles","useTransitionStyles","duration","motion","quick","initial","opacity","transform","concat","isMounted","styles","isControlled","undefined","click","useClick","enabled","hover","useHover","dismiss","useDismiss","role","useRole","_useInteractions","useInteractions","getReferenceProps","getFloatingProps","triggerRef","mergedRef","useMergeRefs","setReference","contextValue","useMemo","useLayoutEffect","current","props","_i","_Object$keys","Object","keys","length","key","startsWith","setAttribute","_jsxs","PopoverContext","Provider","cloneElement","_objectSpread","ref","mergeProps","_jsx","FloatingPortal","OverlayContextReset","FloatingFocusManager","initialFocus","modal","guards","TopNavOverlayThemeOverride","BaseBox","setFloating","style","metaAttribute","name","MetaConstants","Popover","makeAccessible","labelledBy","makeAnalyticsAttribute","PopoverContent","PopupArrow","width","height","fillColor","colors","popup","background","gray","moderate","strokeColor","border","strokeWidth","thin","assignWithoutSideEffects","componentId","componentIds"],"mappings":"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"}

package/build/lib/web/development/components/Popover/PopoverCloseButton.js

@@ -11,7 +11,7 @@ var PopoverCloseButton = function PopoverCloseButton() {
     defaultInitialFocusRef = _usePopoverContext.defaultInitialFocusRef;
   return /*#__PURE__*/jsx(IconButton, {
     ref: defaultInitialFocusRef,
-    size: "large",
+    size: "medium",
     icon: CloseIcon,
     accessibilityLabel: "Close",
     onClick: close

package/build/lib/web/development/components/Popover/PopoverCloseButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"PopoverCloseButton.js","sources":["../../../../../../src/components/Popover/PopoverCloseButton.tsx"],"sourcesContent":["import { usePopoverContext } from './PopoverContext';\nimport { IconButton } from '~components/Button/IconButton';\nimport { CloseIcon } from '~components/Icons';\n\nconst PopoverCloseButton = (): React.ReactElement => {\n  const { close, defaultInitialFocusRef } = usePopoverContext();\n\n  return (\n    <IconButton\n      ref={defaultInitialFocusRef as never}\n      size=\"large\"\n      icon={CloseIcon}\n      accessibilityLabel=\"Close\"\n      onClick={close}\n    />\n  );\n};\n\nexport { PopoverCloseButton };\n"],"names":["PopoverCloseButton","_usePopoverContext","usePopoverContext","close","defaultInitialFocusRef","_jsx","IconButton","ref","size","icon","CloseIcon","accessibilityLabel","onClick"],"mappings":";;;;;;;AAIA,IAAMA,kBAAkB,GAAG,SAArBA,kBAAkBA,GAA6B;AACnD,EAAA,IAAAC,kBAAA,GAA0CC,iBAAiB,EAAE;IAArDC,KAAK,GAAAF,kBAAA,CAALE,KAAK;IAAEC,sBAAsB,GAAAH,kBAAA,CAAtBG,sBAAsB,CAAA;EAErC,oBACEC,GAAA,CAACC,UAAU,EAAA;AACTC,IAAAA,GAAG,EAAEH,sBAAgC;AACrCI,IAAAA,IAAI,EAAC,OAAO;AACZC,IAAAA,IAAI,EAAEC,SAAU;AAChBC,IAAAA,kBAAkB,EAAC,OAAO;AAC1BC,IAAAA,OAAO,EAAET,KAAAA;AAAM,GAChB,CAAC,CAAA;AAEN;;;;"}
+{"version":3,"file":"PopoverCloseButton.js","sources":["../../../../../../src/components/Popover/PopoverCloseButton.tsx"],"sourcesContent":["import { usePopoverContext } from './PopoverContext';\nimport { IconButton } from '~components/Button/IconButton';\nimport { CloseIcon } from '~components/Icons';\n\nconst PopoverCloseButton = (): React.ReactElement => {\n  const { close, defaultInitialFocusRef } = usePopoverContext();\n\n  return (\n    <IconButton\n      ref={defaultInitialFocusRef as never}\n      size=\"medium\"\n      icon={CloseIcon}\n      accessibilityLabel=\"Close\"\n      onClick={close}\n    />\n  );\n};\n\nexport { PopoverCloseButton };\n"],"names":["PopoverCloseButton","_usePopoverContext","usePopoverContext","close","defaultInitialFocusRef","_jsx","IconButton","ref","size","icon","CloseIcon","accessibilityLabel","onClick"],"mappings":";;;;;;;AAIA,IAAMA,kBAAkB,GAAG,SAArBA,kBAAkBA,GAA6B;AACnD,EAAA,IAAAC,kBAAA,GAA0CC,iBAAiB,EAAE;IAArDC,KAAK,GAAAF,kBAAA,CAALE,KAAK;IAAEC,sBAAsB,GAAAH,kBAAA,CAAtBG,sBAAsB,CAAA;EAErC,oBACEC,GAAA,CAACC,UAAU,EAAA;AACTC,IAAAA,GAAG,EAAEH,sBAAgC;AACrCI,IAAAA,IAAI,EAAC,QAAQ;AACbC,IAAAA,IAAI,EAAEC,SAAU;AAChBC,IAAAA,kBAAkB,EAAC,OAAO;AAC1BC,IAAAA,OAAO,EAAET,KAAAA;AAAM,GAChB,CAAC,CAAA;AAEN;;;;"}

package/build/lib/web/development/components/Popover/PopoverContent.js

@@ -2,14 +2,16 @@ import React__default from 'react';
 import { PopoverContentWrapper } from './PopoverContentWrapper.web.js';
 import { PopoverCloseButton } from './PopoverCloseButton.js';
 import { usePopoverContext } from './PopoverContext.js';
+import '../../utils/index.js';
 import '../Box/BaseBox/index.js';
 import '../Typography/index.js';
-import '../../utils/index.js';
 import { useIsMobile } from '../../utils/useIsMobile.js';
+import '../BladeProvider/index.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
 import { isReactNative } from '../../utils/platform/isReactNative.js';
 import { Text } from '../Typography/Text/Text.js';
+import useTheme from '../BladeProvider/useTheme.js';
 
 /* eslint-disable @typescript-eslint/prefer-nullish-coalescing */
 var PopoverHeader = function PopoverHeader(_ref) {
@@ -28,8 +30,8 @@ var PopoverHeader = function PopoverHeader(_ref) {
       borderRadius: "max",
       position: "absolute",
       padding: "spacing.2",
-      top: "spacing.2",
-      right: "spacing.2",
+      top: "spacing.3",
+      right: "spacing.3",
       zIndex: 1,
       children: /*#__PURE__*/jsx(PopoverCloseButton, {})
     });
@@ -41,7 +43,7 @@ var PopoverHeader = function PopoverHeader(_ref) {
     alignItems: "center",
     gap: "spacing.3",
     children: [titleLeading ? /*#__PURE__*/React__default.cloneElement(titleLeading, {
-      size: 'large'
+      size: 'medium'
     }) : null, title ? /*#__PURE__*/jsx(BaseBox, {
       id: titleId,
       paddingRight: "spacing.4",
@@ -66,22 +68,30 @@ var PopoverContent = /*#__PURE__*/React__default.forwardRef(function (_ref2, ref
     style = _ref2.style,
     isVisible = _ref2.isVisible;
   var isMobile = useIsMobile();
+  var _useTheme = useTheme(),
+    colorScheme = _useTheme.colorScheme;
   return /*#__PURE__*/jsxs(PopoverContentWrapper, {
     ref: ref,
     styles: style,
     side: side,
     isVisible: isVisible,
     isMobile: isMobile,
+    colorScheme: colorScheme,
     children: [/*#__PURE__*/jsxs(BaseBox, {
-      padding: "spacing.4",
+      padding: "spacing.5",
       display: "flex",
       flexDirection: "column",
-      gap: "spacing.4",
-      children: [/*#__PURE__*/jsx(PopoverHeader, {
-        title: title,
-        titleLeading: titleLeading
-      }), /*#__PURE__*/jsx(BaseBox, {
-        children: children
+      gap: "spacing.5",
+      children: [/*#__PURE__*/jsxs(BaseBox, {
+        display: "flex",
+        flexDirection: "column",
+        gap: "spacing.2",
+        children: [/*#__PURE__*/jsx(PopoverHeader, {
+          title: title,
+          titleLeading: titleLeading
+        }), /*#__PURE__*/jsx(BaseBox, {
+          children: children
+        })]
       }), footer ? /*#__PURE__*/jsx(BaseBox, {
         children: footer
       }) : null]

package/build/lib/web/development/components/Popover/PopoverContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"PopoverContent.js","sources":["../../../../../../src/components/Popover/PopoverContent.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/prefer-nullish-coalescing */\nimport React from 'react';\nimport { PopoverContentWrapper } from './PopoverContentWrapper';\nimport type { PopoverContentProps } from './types';\nimport { PopoverCloseButton } from './PopoverCloseButton';\nimport { usePopoverContext } from './PopoverContext';\nimport BaseBox from '~components/Box/BaseBox';\nimport { Text } from '~components/Typography';\nimport { isReactNative } from '~utils';\nimport { useIsMobile } from '~utils/useIsMobile';\n\ntype PopoverHeaderProps = {\n  title?: string;\n  titleLeading?: React.ReactNode;\n};\n\nconst PopoverHeader = ({ title, titleLeading }: PopoverHeaderProps): React.ReactElement | null => {\n  const { titleId, openInteraction } = usePopoverContext();\n\n  const showCloseButton = openInteraction === 'click';\n  const isFloating = !(title || titleLeading);\n\n  if (isFloating) {\n    if (!showCloseButton) {\n      return null;\n    }\n    return (\n      <BaseBox\n        borderRadius=\"max\"\n        position=\"absolute\"\n        padding=\"spacing.2\"\n        top=\"spacing.2\"\n        right=\"spacing.2\"\n        zIndex={1}\n      >\n        <PopoverCloseButton />\n      </BaseBox>\n    );\n  }\n\n  return (\n    <BaseBox\n      display=\"flex\"\n      flexDirection=\"row\"\n      flexWrap={isReactNative() ? 'wrap' : 'nowrap'}\n      alignItems=\"center\"\n      gap=\"spacing.3\"\n    >\n      {titleLeading\n        ? React.cloneElement(titleLeading as React.ReactElement, { size: 'large' })\n        : null}\n      {title ? (\n        <BaseBox id={titleId} paddingRight=\"spacing.4\">\n          <Text size=\"large\" weight=\"semibold\">\n            {title}\n          </Text>\n        </BaseBox>\n      ) : null}\n      {showCloseButton ? (\n        <BaseBox marginLeft=\"auto\">\n          <PopoverCloseButton />\n        </BaseBox>\n      ) : null}\n    </BaseBox>\n  );\n};\n\nconst PopoverContent = React.forwardRef<HTMLDivElement, PopoverContentProps>(\n  ({ children, title, titleLeading, footer, arrow, side, style, isVisible }, ref) => {\n    const isMobile = useIsMobile();\n    return (\n      <PopoverContentWrapper\n        ref={ref as never}\n        styles={style}\n        side={side}\n        isVisible={isVisible}\n        isMobile={isMobile}\n      >\n        <BaseBox padding=\"spacing.4\" display=\"flex\" flexDirection=\"column\" gap=\"spacing.4\">\n          <PopoverHeader title={title} titleLeading={titleLeading} />\n          <BaseBox>{children}</BaseBox>\n          {footer ? <BaseBox>{footer}</BaseBox> : null}\n        </BaseBox>\n        {arrow}\n      </PopoverContentWrapper>\n    );\n  },\n);\n\nexport { PopoverContent };\n"],"names":["PopoverHeader","_ref","title","titleLeading","_usePopoverContext","usePopoverContext","titleId","openInteraction","showCloseButton","isFloating","_jsx","BaseBox","borderRadius","position","padding","top","right","zIndex","children","PopoverCloseButton","_jsxs","display","flexDirection","flexWrap","isReactNative","alignItems","gap","React","cloneElement","size","id","paddingRight","Text","weight","marginLeft","PopoverContent","forwardRef","_ref2","ref","footer","arrow","side","style","isVisible","isMobile","useIsMobile","PopoverContentWrapper","styles"],"mappings":"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"}
+{"version":3,"file":"PopoverContent.js","sources":["../../../../../../src/components/Popover/PopoverContent.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/prefer-nullish-coalescing */\nimport React from 'react';\nimport { PopoverContentWrapper } from './PopoverContentWrapper';\nimport type { PopoverContentProps } from './types';\nimport { PopoverCloseButton } from './PopoverCloseButton';\nimport { usePopoverContext } from './PopoverContext';\nimport { isReactNative } from '~utils';\nimport BaseBox from '~components/Box/BaseBox';\nimport { Text } from '~components/Typography';\nimport { useIsMobile } from '~utils/useIsMobile';\nimport { useTheme } from '~components/BladeProvider';\n\ntype PopoverHeaderProps = {\n  title?: string;\n  titleLeading?: React.ReactNode;\n};\n\nconst PopoverHeader = ({ title, titleLeading }: PopoverHeaderProps): React.ReactElement | null => {\n  const { titleId, openInteraction } = usePopoverContext();\n\n  const showCloseButton = openInteraction === 'click';\n  const isFloating = !(title || titleLeading);\n\n  if (isFloating) {\n    if (!showCloseButton) {\n      return null;\n    }\n    return (\n      <BaseBox\n        borderRadius=\"max\"\n        position=\"absolute\"\n        padding=\"spacing.2\"\n        top=\"spacing.3\"\n        right=\"spacing.3\"\n        zIndex={1}\n      >\n        <PopoverCloseButton />\n      </BaseBox>\n    );\n  }\n\n  return (\n    <BaseBox\n      display=\"flex\"\n      flexDirection=\"row\"\n      flexWrap={isReactNative() ? 'wrap' : 'nowrap'}\n      alignItems=\"center\"\n      gap=\"spacing.3\"\n    >\n      {titleLeading\n        ? React.cloneElement(titleLeading as React.ReactElement, { size: 'medium' })\n        : null}\n      {title ? (\n        <BaseBox id={titleId} paddingRight=\"spacing.4\">\n          <Text size=\"large\" weight=\"semibold\">\n            {title}\n          </Text>\n        </BaseBox>\n      ) : null}\n      {showCloseButton ? (\n        <BaseBox marginLeft=\"auto\">\n          <PopoverCloseButton />\n        </BaseBox>\n      ) : null}\n    </BaseBox>\n  );\n};\n\nconst PopoverContent = React.forwardRef<HTMLDivElement, PopoverContentProps>(\n  ({ children, title, titleLeading, footer, arrow, side, style, isVisible }, ref) => {\n    const isMobile = useIsMobile();\n    const { colorScheme } = useTheme();\n    return (\n      <PopoverContentWrapper\n        ref={ref as never}\n        styles={style}\n        side={side}\n        isVisible={isVisible}\n        isMobile={isMobile}\n        colorScheme={colorScheme}\n      >\n        <BaseBox padding=\"spacing.5\" display=\"flex\" flexDirection=\"column\" gap=\"spacing.5\">\n          <BaseBox display=\"flex\" flexDirection=\"column\" gap=\"spacing.2\">\n            <PopoverHeader title={title} titleLeading={titleLeading} />\n            <BaseBox>{children}</BaseBox>\n          </BaseBox>\n          {footer ? <BaseBox>{footer}</BaseBox> : null}\n        </BaseBox>\n        {arrow}\n      </PopoverContentWrapper>\n    );\n  },\n);\n\nexport { PopoverContent };\n"],"names":["PopoverHeader","_ref","title","titleLeading","_usePopoverContext","usePopoverContext","titleId","openInteraction","showCloseButton","isFloating","_jsx","BaseBox","borderRadius","position","padding","top","right","zIndex","children","PopoverCloseButton","_jsxs","display","flexDirection","flexWrap","isReactNative","alignItems","gap","React","cloneElement","size","id","paddingRight","Text","weight","marginLeft","PopoverContent","forwardRef","_ref2","ref","footer","arrow","side","style","isVisible","isMobile","useIsMobile","_useTheme","useTheme","colorScheme","PopoverContentWrapper","styles"],"mappings":"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"}

package/build/lib/web/development/components/Popover/PopoverContentWrapper.web.js

@@ -9,11 +9,13 @@ var PopoverContentWrapper = /*#__PURE__*/styled(BaseBox).withConfig({
 })(function (_ref) {
   var theme = _ref.theme,
     isMobile = _ref.isMobile,
-    styles = _ref.styles;
+    styles = _ref.styles,
+    colorScheme = _ref.colorScheme;
   return getPopoverContentWrapperStyles({
     theme: theme,
     styles: styles,
-    isMobile: isMobile
+    isMobile: isMobile,
+    colorScheme: colorScheme
   });
 });
 

package/build/lib/web/development/components/Popover/PopoverContentWrapper.web.js.map

@@ -1 +1 @@
-{"version":3,"file":"PopoverContentWrapper.web.js","sources":["../../../../../../src/components/Popover/PopoverContentWrapper.web.ts"],"sourcesContent":["import type { CSSProperties } from 'react';\nimport styled from 'styled-components';\nimport { getPopoverContentWrapperStyles } from './getPopoverContentWrapperStyles';\nimport type { PopoverContentWrapperProps } from './types';\nimport BaseBox from '~components/Box/BaseBox';\n\nconst PopoverContentWrapper = styled(BaseBox)<\n  { styles: CSSProperties } & PopoverContentWrapperProps\n>(({ theme, isMobile, styles }) => {\n  return getPopoverContentWrapperStyles({ theme, styles, isMobile });\n});\n\nexport { PopoverContentWrapper };\n"],"names":["PopoverContentWrapper","styled","BaseBox","withConfig","displayName","componentId","_ref","theme","isMobile","styles","getPopoverContentWrapperStyles"],"mappings":";;;;;AAMA,IAAMA,qBAAqB,gBAAGC,MAAM,CAACC,OAAO,CAAC,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,iDAAA;EAAAC,WAAA,EAAA,UAAA;AAAA,CAE3C,CAAA,CAAA,UAAAC,IAAA,EAAiC;AAAA,EAAA,IAA9BC,KAAK,GAAAD,IAAA,CAALC,KAAK;IAAEC,QAAQ,GAAAF,IAAA,CAARE,QAAQ;IAAEC,MAAM,GAAAH,IAAA,CAANG,MAAM,CAAA;AAC1B,EAAA,OAAOC,8BAA8B,CAAC;AAAEH,IAAAA,KAAK,EAALA,KAAK;AAAEE,IAAAA,MAAM,EAANA,MAAM;AAAED,IAAAA,QAAQ,EAARA,QAAAA;AAAS,GAAC,CAAC,CAAA;AACpE,CAAC;;;;"}
+{"version":3,"file":"PopoverContentWrapper.web.js","sources":["../../../../../../src/components/Popover/PopoverContentWrapper.web.ts"],"sourcesContent":["import type { CSSProperties } from 'react';\nimport styled from 'styled-components';\nimport { getPopoverContentWrapperStyles } from './getPopoverContentWrapperStyles';\nimport type { PopoverContentWrapperProps } from './types';\nimport BaseBox from '~components/Box/BaseBox';\n\nconst PopoverContentWrapper = styled(BaseBox)<\n  { styles: CSSProperties } & PopoverContentWrapperProps\n>(({ theme, isMobile, styles, colorScheme }) => {\n  return getPopoverContentWrapperStyles({ theme, styles, isMobile, colorScheme });\n});\n\nexport { PopoverContentWrapper };\n"],"names":["PopoverContentWrapper","styled","BaseBox","withConfig","displayName","componentId","_ref","theme","isMobile","styles","colorScheme","getPopoverContentWrapperStyles"],"mappings":";;;;;AAMA,IAAMA,qBAAqB,gBAAGC,MAAM,CAACC,OAAO,CAAC,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,iDAAA;EAAAC,WAAA,EAAA,UAAA;AAAA,CAE3C,CAAA,CAAA,UAAAC,IAAA,EAA8C;AAAA,EAAA,IAA3CC,KAAK,GAAAD,IAAA,CAALC,KAAK;IAAEC,QAAQ,GAAAF,IAAA,CAARE,QAAQ;IAAEC,MAAM,GAAAH,IAAA,CAANG,MAAM;IAAEC,WAAW,GAAAJ,IAAA,CAAXI,WAAW,CAAA;AACvC,EAAA,OAAOC,8BAA8B,CAAC;AAAEJ,IAAAA,KAAK,EAALA,KAAK;AAAEE,IAAAA,MAAM,EAANA,MAAM;AAAED,IAAAA,QAAQ,EAARA,QAAQ;AAAEE,IAAAA,WAAW,EAAXA,WAAAA;AAAY,GAAC,CAAC,CAAA;AACjF,CAAC;;;;"}

package/build/lib/web/development/components/Popover/componentIds.js

@@ -0,0 +1,6 @@
+var componentIds = {
+  Popover: 'Popover'
+};
+
+export { componentIds };
+//# sourceMappingURL=componentIds.js.map

package/build/lib/web/development/components/Popover/componentIds.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"componentIds.js","sources":["../../../../../../src/components/Popover/componentIds.ts"],"sourcesContent":["const componentIds = {\n  Popover: 'Popover',\n};\n\nexport { componentIds };\n"],"names":["componentIds","Popover"],"mappings":"AAAA,IAAMA,YAAY,GAAG;AACnBC,EAAAA,OAAO,EAAE,SAAA;AACX;;;;"}

package/build/lib/web/development/components/Popover/constants.js

@@ -1,5 +1,5 @@
-var ARROW_WIDTH = 14;
-var ARROW_HEIGHT = 7;
+var ARROW_WIDTH = 22;
+var ARROW_HEIGHT = 12;
 
 export { ARROW_HEIGHT, ARROW_WIDTH };
 //# sourceMappingURL=constants.js.map

package/build/lib/web/development/components/Popover/constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"constants.js","sources":["../../../../../../src/components/Popover/constants.ts"],"sourcesContent":["export const ARROW_WIDTH = 14;\nexport const ARROW_HEIGHT = 7;\n"],"names":["ARROW_WIDTH","ARROW_HEIGHT"],"mappings":"AAAO,IAAMA,WAAW,GAAG,GAAE;AACtB,IAAMC,YAAY,GAAG;;;;"}
+{"version":3,"file":"constants.js","sources":["../../../../../../src/components/Popover/constants.ts"],"sourcesContent":["export const ARROW_WIDTH = 22;\nexport const ARROW_HEIGHT = 12;\n"],"names":["ARROW_WIDTH","ARROW_HEIGHT"],"mappings":"AAAO,IAAMA,WAAW,GAAG,GAAE;AACtB,IAAMC,YAAY,GAAG;;;;"}

package/build/lib/web/development/components/Popover/getPopoverContentWrapperStyles.js

@@ -2,25 +2,26 @@ import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import '../../utils/index.js';
 import { makeSpace } from '../../utils/makeSpace/makeSpace.js';
 import { isReactNative } from '../../utils/platform/isReactNative.js';
+import { getPopupBoxShadowString } from '../../utils/makePopupBoxShadow/makePopupBoxShadow.js';
 import { makeBorderSize } from '../../utils/makeBorderSize/makeBorderSize.js';
-import { castWebType } from '../../utils/platform/castUtils.js';
 
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var getPopoverContentWrapperStyles = function getPopoverContentWrapperStyles(_ref) {
   var theme = _ref.theme,
     styles = _ref.styles,
-    isMobile = _ref.isMobile;
+    isMobile = _ref.isMobile,
+    colorScheme = _ref.colorScheme;
   return _objectSpread({
+    border: 'none',
     width: '100%',
     maxWidth: makeSpace(isMobile ? 288 : 328),
     position: isReactNative() ? 'absolute' : 'relative',
-    backgroundColor: theme.colors.popup.background.subtle,
-    borderWidth: makeBorderSize(theme.border.width.thin),
+    boxShadow: isReactNative() ? undefined : getPopupBoxShadowString(theme, colorScheme),
+    boxSizing: 'border-box',
+    backgroundColor: theme.colors.popup.background.gray.moderate,
     borderRadius: makeBorderSize(theme.border.radius.large),
-    borderColor: theme.colors.popup.border.subtle,
-    borderStyle: 'solid',
-    boxShadow: isReactNative() ? undefined : castWebType(theme.elevation.midRaised)
+    backdropFilter: isReactNative() ? undefined : "blur(".concat(theme.backdropBlur.high, "px)")
   }, styles);
 };
 

package/build/lib/web/development/components/Popover/getPopoverContentWrapperStyles.js.map

@@ -1 +1 @@
-{"version":3,"file":"getPopoverContentWrapperStyles.js","sources":["../../../../../../src/components/Popover/getPopoverContentWrapperStyles.ts"],"sourcesContent":["/* eslint-disable react-hooks/rules-of-hooks */\nimport type React from 'react';\nimport type { CSSObject } from 'styled-components';\nimport type { Theme } from '~components/BladeProvider';\nimport { makeBorderSize, castWebType, isReactNative, makeSpace } from '~utils';\n\nconst getPopoverContentWrapperStyles = ({\n  theme,\n  styles,\n  isMobile,\n}: {\n  isMobile: boolean;\n  theme: Theme;\n  styles: React.CSSProperties;\n}): CSSObject => {\n  return {\n    width: '100%',\n    maxWidth: makeSpace(isMobile ? 288 : 328),\n    position: isReactNative() ? 'absolute' : 'relative',\n    backgroundColor: theme.colors.popup.background.subtle,\n    borderWidth: makeBorderSize(theme.border.width.thin),\n    borderRadius: makeBorderSize(theme.border.radius.large),\n    borderColor: theme.colors.popup.border.subtle,\n    borderStyle: 'solid',\n    boxShadow: isReactNative() ? undefined : castWebType(theme.elevation.midRaised),\n    ...styles,\n  };\n};\n\nexport { getPopoverContentWrapperStyles };\n"],"names":["getPopoverContentWrapperStyles","_ref","theme","styles","isMobile","_objectSpread","width","maxWidth","makeSpace","position","isReactNative","backgroundColor","colors","popup","background","subtle","borderWidth","makeBorderSize","border","thin","borderRadius","radius","large","borderColor","borderStyle","boxShadow","undefined","castWebType","elevation","midRaised"],"mappings":";;;;;;;;;AAMA,IAAMA,8BAA8B,GAAG,SAAjCA,8BAA8BA,CAAAC,IAAA,EAQnB;AAAA,EAAA,IAPfC,KAAK,GAAAD,IAAA,CAALC,KAAK;IACLC,MAAM,GAAAF,IAAA,CAANE,MAAM;IACNC,QAAQ,GAAAH,IAAA,CAARG,QAAQ,CAAA;AAMR,EAAA,OAAAC,aAAA,CAAA;AACEC,IAAAA,KAAK,EAAE,MAAM;IACbC,QAAQ,EAAEC,SAAS,CAACJ,QAAQ,GAAG,GAAG,GAAG,GAAG,CAAC;AACzCK,IAAAA,QAAQ,EAAEC,aAAa,EAAE,GAAG,UAAU,GAAG,UAAU;IACnDC,eAAe,EAAET,KAAK,CAACU,MAAM,CAACC,KAAK,CAACC,UAAU,CAACC,MAAM;IACrDC,WAAW,EAAEC,cAAc,CAACf,KAAK,CAACgB,MAAM,CAACZ,KAAK,CAACa,IAAI,CAAC;IACpDC,YAAY,EAAEH,cAAc,CAACf,KAAK,CAACgB,MAAM,CAACG,MAAM,CAACC,KAAK,CAAC;IACvDC,WAAW,EAAErB,KAAK,CAACU,MAAM,CAACC,KAAK,CAACK,MAAM,CAACH,MAAM;AAC7CS,IAAAA,WAAW,EAAE,OAAO;AACpBC,IAAAA,SAAS,EAAEf,aAAa,EAAE,GAAGgB,SAAS,GAAGC,WAAW,CAACzB,KAAK,CAAC0B,SAAS,CAACC,SAAS,CAAA;AAAC,GAAA,EAC5E1B,MAAM,CAAA,CAAA;AAEb;;;;"}
+{"version":3,"file":"getPopoverContentWrapperStyles.js","sources":["../../../../../../src/components/Popover/getPopoverContentWrapperStyles.ts"],"sourcesContent":["import type React from 'react';\nimport type { CSSObject } from 'styled-components';\nimport { isReactNative, makeSpace, makeBorderSize, getPopupBoxShadowString } from '~utils';\nimport type { ColorSchemeNames } from '~tokens/theme';\nimport type { Theme } from '~components/BladeProvider';\n\nconst getPopoverContentWrapperStyles = ({\n  theme,\n  styles,\n  isMobile,\n  colorScheme,\n}: {\n  isMobile: boolean;\n  theme: Theme;\n  styles: React.CSSProperties;\n  colorScheme: ColorSchemeNames;\n}): CSSObject => {\n  return {\n    border: 'none',\n    width: '100%',\n    maxWidth: makeSpace(isMobile ? 288 : 328),\n    position: isReactNative() ? 'absolute' : 'relative',\n    boxShadow: isReactNative() ? undefined : getPopupBoxShadowString(theme, colorScheme),\n    boxSizing: 'border-box',\n    backgroundColor: theme.colors.popup.background.gray.moderate,\n    borderRadius: makeBorderSize(theme.border.radius.large),\n    backdropFilter: isReactNative() ? undefined : `blur(${theme.backdropBlur.high}px)`,\n    ...styles,\n  };\n};\n\nexport { getPopoverContentWrapperStyles };\n"],"names":["getPopoverContentWrapperStyles","_ref","theme","styles","isMobile","colorScheme","_objectSpread","border","width","maxWidth","makeSpace","position","isReactNative","boxShadow","undefined","getPopupBoxShadowString","boxSizing","backgroundColor","colors","popup","background","gray","moderate","borderRadius","makeBorderSize","radius","large","backdropFilter","concat","backdropBlur","high"],"mappings":";;;;;;;;;AAMA,IAAMA,8BAA8B,GAAG,SAAjCA,8BAA8BA,CAAAC,IAAA,EAUnB;AAAA,EAAA,IATfC,KAAK,GAAAD,IAAA,CAALC,KAAK;IACLC,MAAM,GAAAF,IAAA,CAANE,MAAM;IACNC,QAAQ,GAAAH,IAAA,CAARG,QAAQ;IACRC,WAAW,GAAAJ,IAAA,CAAXI,WAAW,CAAA;AAOX,EAAA,OAAAC,aAAA,CAAA;AACEC,IAAAA,MAAM,EAAE,MAAM;AACdC,IAAAA,KAAK,EAAE,MAAM;IACbC,QAAQ,EAAEC,SAAS,CAACN,QAAQ,GAAG,GAAG,GAAG,GAAG,CAAC;AACzCO,IAAAA,QAAQ,EAAEC,aAAa,EAAE,GAAG,UAAU,GAAG,UAAU;AACnDC,IAAAA,SAAS,EAAED,aAAa,EAAE,GAAGE,SAAS,GAAGC,uBAAuB,CAACb,KAAK,EAAEG,WAAW,CAAC;AACpFW,IAAAA,SAAS,EAAE,YAAY;IACvBC,eAAe,EAAEf,KAAK,CAACgB,MAAM,CAACC,KAAK,CAACC,UAAU,CAACC,IAAI,CAACC,QAAQ;IAC5DC,YAAY,EAAEC,cAAc,CAACtB,KAAK,CAACK,MAAM,CAACkB,MAAM,CAACC,KAAK,CAAC;AACvDC,IAAAA,cAAc,EAAEf,aAAa,EAAE,GAAGE,SAAS,GAAAc,OAAAA,CAAAA,MAAA,CAAW1B,KAAK,CAAC2B,YAAY,CAACC,IAAI,EAAA,KAAA,CAAA;AAAK,GAAA,EAC/E3B,MAAM,CAAA,CAAA;AAEb;;;;"}

package/build/lib/web/development/components/PopupArrow/PopupArrow.web.js

@@ -1,15 +1,20 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import React__default from 'react';
 import { FloatingArrow } from '@floating-ui/react';
 import '../BladeProvider/index.js';
 import { jsx } from 'react/jsx-runtime';
 import useTheme from '../BladeProvider/useTheme.js';
 
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var PopupArrow = /*#__PURE__*/React__default.forwardRef(function (_ref, arrowRef) {
   var context = _ref.context,
     width = _ref.width,
     height = _ref.height,
     fillColor = _ref.fillColor,
-    strokeColor = _ref.strokeColor;
+    strokeColor = _ref.strokeColor,
+    strokeWidth = _ref.strokeWidth,
+    style = _ref.style;
   var _useTheme = useTheme(),
     theme = _useTheme.theme;
   return /*#__PURE__*/jsx(FloatingArrow, {
@@ -19,7 +24,9 @@ var PopupArrow = /*#__PURE__*/React__default.forwardRef(function (_ref, arrowRef
     height: height,
     fill: fillColor,
     stroke: strokeColor,
-    strokeWidth: theme.border.width.thin
+    strokeWidth: strokeWidth !== null && strokeWidth !== void 0 ? strokeWidth : 0,
+    tipRadius: theme.border.radius['2xsmall'],
+    style: _objectSpread({}, style)
   });
 });
 

package/build/lib/web/development/components/PopupArrow/PopupArrow.web.js.map

@@ -1 +1 @@
-{"version":3,"file":"PopupArrow.web.js","sources":["../../../../../../src/components/PopupArrow/PopupArrow.web.tsx"],"sourcesContent":["import React from 'react';\nimport { FloatingArrow } from '@floating-ui/react';\nimport type { PopupArrowProps } from './types';\nimport { useTheme } from '~components/BladeProvider';\n\nconst PopupArrow = React.forwardRef<SVGSVGElement, PopupArrowProps>(\n  ({ context, width, height, fillColor, strokeColor }, arrowRef) => {\n    const { theme } = useTheme();\n    return (\n      <FloatingArrow\n        ref={arrowRef}\n        context={context}\n        width={width}\n        height={height}\n        fill={fillColor}\n        stroke={strokeColor}\n        strokeWidth={theme.border.width.thin}\n      />\n    );\n  },\n);\n\nexport { PopupArrow };\n"],"names":["PopupArrow","React","forwardRef","_ref","arrowRef","context","width","height","fillColor","strokeColor","_useTheme","useTheme","theme","_jsx","FloatingArrow","ref","fill","stroke","strokeWidth","border","thin"],"mappings":";;;;;;AAKMA,IAAAA,UAAU,gBAAGC,cAAK,CAACC,UAAU,CACjC,UAAAC,IAAA,EAAqDC,QAAQ,EAAK;AAAA,EAAA,IAA/DC,OAAO,GAAAF,IAAA,CAAPE,OAAO;IAAEC,KAAK,GAAAH,IAAA,CAALG,KAAK;IAAEC,MAAM,GAAAJ,IAAA,CAANI,MAAM;IAAEC,SAAS,GAAAL,IAAA,CAATK,SAAS;IAAEC,WAAW,GAAAN,IAAA,CAAXM,WAAW,CAAA;AAC/C,EAAA,IAAAC,SAAA,GAAkBC,QAAQ,EAAE;IAApBC,KAAK,GAAAF,SAAA,CAALE,KAAK,CAAA;EACb,oBACEC,GAAA,CAACC,aAAa,EAAA;AACZC,IAAAA,GAAG,EAAEX,QAAS;AACdC,IAAAA,OAAO,EAAEA,OAAQ;AACjBC,IAAAA,KAAK,EAAEA,KAAM;AACbC,IAAAA,MAAM,EAAEA,MAAO;AACfS,IAAAA,IAAI,EAAER,SAAU;AAChBS,IAAAA,MAAM,EAAER,WAAY;AACpBS,IAAAA,WAAW,EAAEN,KAAK,CAACO,MAAM,CAACb,KAAK,CAACc,IAAAA;AAAK,GACtC,CAAC,CAAA;AAEN,CACF;;;;"}
+{"version":3,"file":"PopupArrow.web.js","sources":["../../../../../../src/components/PopupArrow/PopupArrow.web.tsx"],"sourcesContent":["import React from 'react';\nimport { FloatingArrow } from '@floating-ui/react';\nimport type { PopupArrowProps } from './types';\nimport { useTheme } from '~components/BladeProvider';\n\nconst PopupArrow = React.forwardRef<SVGSVGElement, PopupArrowProps>(\n  ({ context, width, height, fillColor, strokeColor, strokeWidth, style }, arrowRef) => {\n    const { theme } = useTheme();\n    return (\n      <FloatingArrow\n        ref={arrowRef}\n        context={context}\n        width={width}\n        height={height}\n        fill={fillColor}\n        stroke={strokeColor}\n        strokeWidth={strokeWidth ?? 0}\n        tipRadius={theme.border.radius['2xsmall']}\n        style={{ ...style }}\n      />\n    );\n  },\n);\n\nexport { PopupArrow };\n"],"names":["PopupArrow","React","forwardRef","_ref","arrowRef","context","width","height","fillColor","strokeColor","strokeWidth","style","_useTheme","useTheme","theme","_jsx","FloatingArrow","ref","fill","stroke","tipRadius","border","radius","_objectSpread"],"mappings":";;;;;;;;;AAKMA,IAAAA,UAAU,gBAAGC,cAAK,CAACC,UAAU,CACjC,UAAAC,IAAA,EAAyEC,QAAQ,EAAK;AAAA,EAAA,IAAnFC,OAAO,GAAAF,IAAA,CAAPE,OAAO;IAAEC,KAAK,GAAAH,IAAA,CAALG,KAAK;IAAEC,MAAM,GAAAJ,IAAA,CAANI,MAAM;IAAEC,SAAS,GAAAL,IAAA,CAATK,SAAS;IAAEC,WAAW,GAAAN,IAAA,CAAXM,WAAW;IAAEC,WAAW,GAAAP,IAAA,CAAXO,WAAW;IAAEC,KAAK,GAAAR,IAAA,CAALQ,KAAK,CAAA;AACnE,EAAA,IAAAC,SAAA,GAAkBC,QAAQ,EAAE;IAApBC,KAAK,GAAAF,SAAA,CAALE,KAAK,CAAA;EACb,oBACEC,GAAA,CAACC,aAAa,EAAA;AACZC,IAAAA,GAAG,EAAEb,QAAS;AACdC,IAAAA,OAAO,EAAEA,OAAQ;AACjBC,IAAAA,KAAK,EAAEA,KAAM;AACbC,IAAAA,MAAM,EAAEA,MAAO;AACfW,IAAAA,IAAI,EAAEV,SAAU;AAChBW,IAAAA,MAAM,EAAEV,WAAY;AACpBC,IAAAA,WAAW,EAAEA,WAAW,KAAA,IAAA,IAAXA,WAAW,KAAXA,KAAAA,CAAAA,GAAAA,WAAW,GAAI,CAAE;IAC9BU,SAAS,EAAEN,KAAK,CAACO,MAAM,CAACC,MAAM,CAAC,SAAS,CAAE;IAC1CX,KAAK,EAAAY,aAAA,CAAA,EAAA,EAAOZ,KAAK,CAAA;AAAG,GACrB,CAAC,CAAA;AAEN,CACF;;;;"}