@razorpay/blade 10.23.5 → 11.1.0

package/build/lib/web/development/components/List/ListItemIcons.js

@@ -3,9 +3,11 @@ import { listItemUnorderedBulletSize } from './listTokens.js';
 import { useListContext } from './ListContext.js';
 import '../BladeProvider/index.js';
 import '../Icons/_Svg/index.js';
+import '../../tokens/global/index.js';
 import { jsx } from 'react/jsx-runtime';
 import Svg from '../Icons/_Svg/Svg/Svg.web.js';
 import Circle from '../Icons/_Svg/Circle/Circle.web.js';
+import { opacity } from '../../tokens/global/opacity.js';
 import Rect from '../Icons/_Svg/Rect/Rect.web.js';
 import useTheme from '../BladeProvider/useTheme.js';
 
@@ -21,7 +23,8 @@ var UnorderedLevel1Icon = function UnorderedLevel1Icon(_ref) {
       cx: "3px",
       cy: "3px",
       r: "3px",
-      fill: color
+      fill: color,
+      fillOpacity: opacity[6]
     })
   });
 };
@@ -53,7 +56,8 @@ var UnorderedLevel3Icon = function UnorderedLevel3Icon(_ref3) {
       width: iconDimensions,
       height: iconDimensions,
       rx: "1px",
-      fill: color
+      fill: color,
+      fillOpacity: opacity[6]
     })
   });
 };
@@ -65,27 +69,27 @@ var UnorderedItemIcon = function UnorderedItemIcon(_ref4) {
   var _useListContext = useListContext(),
     size = _useListContext.size;
   var iconDimensions = listItemUnorderedBulletSize[platform][size];
-  var color = theme.colors.surface.text.placeholder.lowContrast;
+  var backgroundToken = theme.colors.surface.text.gray.muted;
   switch (level) {
     case 1:
       return /*#__PURE__*/jsx(UnorderedLevel1Icon, {
         iconDimensions: iconDimensions,
-        color: color
+        color: backgroundToken
       });
     case 2:
       return /*#__PURE__*/jsx(UnorderedLevel2Icon, {
         iconDimensions: iconDimensions,
-        color: color
+        color: backgroundToken
       });
     case 3:
       return /*#__PURE__*/jsx(UnorderedLevel3Icon, {
         iconDimensions: iconDimensions,
-        color: color
+        color: backgroundToken
       });
     default:
       return /*#__PURE__*/jsx(UnorderedLevel3Icon, {
         iconDimensions: iconDimensions,
-        color: color
+        color: backgroundToken
       });
   }
 };

package/build/lib/web/development/components/List/ListItemIcons.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListItemIcons.js","sources":["../../../../../../src/components/List/ListItemIcons.tsx"],"sourcesContent":["import React from 'react';\nimport { listItemUnorderedBulletSize } from './listTokens';\nimport { useListContext } from './ListContext';\nimport { useTheme } from '~components/BladeProvider';\nimport { Svg, Circle, Rect } from '~components/Icons/_Svg';\n\ntype UnorderedIconProps = {\n  iconDimensions: string;\n  color: string;\n};\n\nconst UnorderedLevel1Icon = ({ iconDimensions, color }: UnorderedIconProps): React.ReactElement => {\n  return (\n    <Svg width={iconDimensions} height={iconDimensions} viewBox=\"0 0 6 6\" fill=\"none\">\n      <Circle cx=\"3px\" cy=\"3px\" r=\"3px\" fill={color} />\n    </Svg>\n  );\n};\n\nconst UnorderedLevel2Icon = ({ iconDimensions, color }: UnorderedIconProps): React.ReactElement => {\n  return (\n    <Svg width={iconDimensions} height={iconDimensions} viewBox=\"0 0 6 6\" fill=\"none\">\n      <Circle cx=\"3px\" cy=\"3px\" r=\"2.5px\" stroke={color} />\n    </Svg>\n  );\n};\n\nconst UnorderedLevel3Icon = ({ iconDimensions, color }: UnorderedIconProps): React.ReactElement => {\n  return (\n    <Svg width={iconDimensions} height={iconDimensions} viewBox=\"0 0 6 6\" fill=\"none\">\n      <Rect width={iconDimensions} height={iconDimensions} rx=\"1px\" fill={color} />\n    </Svg>\n  );\n};\n\nconst UnorderedItemIcon = ({ level }: { level?: number }): React.ReactElement => {\n  const { theme, platform } = useTheme();\n  const { size } = useListContext();\n  const iconDimensions = listItemUnorderedBulletSize[platform][size];\n  const color = theme.colors.surface.text.placeholder.lowContrast;\n\n  switch (level) {\n    case 1:\n      return <UnorderedLevel1Icon iconDimensions={iconDimensions} color={color} />;\n    case 2:\n      return <UnorderedLevel2Icon iconDimensions={iconDimensions} color={color} />;\n    case 3:\n      return <UnorderedLevel3Icon iconDimensions={iconDimensions} color={color} />;\n    default:\n      return <UnorderedLevel3Icon iconDimensions={iconDimensions} color={color} />;\n  }\n};\n\nexport { UnorderedItemIcon };\n"],"names":["UnorderedLevel1Icon","_ref","iconDimensions","color","_jsx","Svg","width","height","viewBox","fill","children","Circle","cx","cy","r","UnorderedLevel2Icon","_ref2","stroke","UnorderedLevel3Icon","_ref3","Rect","rx","UnorderedItemIcon","_ref4","level","_useTheme","useTheme","theme","platform","_useListContext","useListContext","size","listItemUnorderedBulletSize","colors","surface","text","placeholder","lowContrast"],"mappings":"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"}
+{"version":3,"file":"ListItemIcons.js","sources":["../../../../../../src/components/List/ListItemIcons.tsx"],"sourcesContent":["import React from 'react';\nimport { listItemUnorderedBulletSize } from './listTokens';\nimport { useListContext } from './ListContext';\nimport { useTheme } from '~components/BladeProvider';\nimport { Svg, Circle, Rect } from '~components/Icons/_Svg';\nimport { opacity } from '~tokens/global';\n\ntype UnorderedIconProps = {\n  iconDimensions: string;\n  color: string;\n};\n\nconst UnorderedLevel1Icon = ({ iconDimensions, color }: UnorderedIconProps): React.ReactElement => {\n  return (\n    <Svg width={iconDimensions} height={iconDimensions} viewBox=\"0 0 6 6\" fill=\"none\">\n      <Circle cx=\"3px\" cy=\"3px\" r=\"3px\" fill={color} fillOpacity={opacity[6]} />\n    </Svg>\n  );\n};\n\nconst UnorderedLevel2Icon = ({ iconDimensions, color }: UnorderedIconProps): React.ReactElement => {\n  return (\n    <Svg width={iconDimensions} height={iconDimensions} viewBox=\"0 0 6 6\" fill=\"none\">\n      <Circle cx=\"3px\" cy=\"3px\" r=\"2.5px\" stroke={color} />\n    </Svg>\n  );\n};\n\nconst UnorderedLevel3Icon = ({ iconDimensions, color }: UnorderedIconProps): React.ReactElement => {\n  return (\n    <Svg width={iconDimensions} height={iconDimensions} viewBox=\"0 0 6 6\" fill=\"none\">\n      <Rect\n        width={iconDimensions}\n        height={iconDimensions}\n        rx=\"1px\"\n        fill={color}\n        fillOpacity={opacity[6]}\n      />\n    </Svg>\n  );\n};\n\nconst UnorderedItemIcon = ({ level }: { level?: number }): React.ReactElement => {\n  const { theme, platform } = useTheme();\n  const { size } = useListContext();\n  const iconDimensions = listItemUnorderedBulletSize[platform][size];\n  const backgroundToken = theme.colors.surface.text.gray.muted;\n\n  switch (level) {\n    case 1:\n      return <UnorderedLevel1Icon iconDimensions={iconDimensions} color={backgroundToken} />;\n    case 2:\n      return <UnorderedLevel2Icon iconDimensions={iconDimensions} color={backgroundToken} />;\n    case 3:\n      return <UnorderedLevel3Icon iconDimensions={iconDimensions} color={backgroundToken} />;\n    default:\n      return <UnorderedLevel3Icon iconDimensions={iconDimensions} color={backgroundToken} />;\n  }\n};\n\nexport { UnorderedItemIcon };\n"],"names":["UnorderedLevel1Icon","_ref","iconDimensions","color","_jsx","Svg","width","height","viewBox","fill","children","Circle","cx","cy","r","fillOpacity","opacity","UnorderedLevel2Icon","_ref2","stroke","UnorderedLevel3Icon","_ref3","Rect","rx","UnorderedItemIcon","_ref4","level","_useTheme","useTheme","theme","platform","_useListContext","useListContext","size","listItemUnorderedBulletSize","backgroundToken","colors","surface","text","gray","muted"],"mappings":"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"}

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

@@ -134,7 +134,7 @@ var Modal = function Modal(_ref2) {
             maxHeight: modalMaxHeight,
             width: "calc(100vw - ".concat(makeSize(modalResponsiveScreenGap), ")"),
             borderRadius: modalBorderRadius,
-            backgroundColor: theme.colors.surface.background.level2.lowContrast,
+            backgroundColor: "popup.background.subtle",
             position: "absolute",
             display: "flex",
             flexDirection: "column",

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

@@ -1 +1 @@
-{"version":3,"file":"Modal.web.js","sources":["../../../../../../src/components/Modal/Modal.web.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport React, { useEffect } from 'react';\nimport styled, { css, keyframes } from 'styled-components';\nimport { FloatingFocusManager, FloatingPortal, useFloating } from '@floating-ui/react';\nimport usePresence from 'use-presence';\nimport { ModalHeader } from './ModalHeader';\nimport type { ModalHeaderProps } from './ModalHeader';\nimport { ModalFooter } from './ModalFooter';\nimport type { ModalFooterProps } from './ModalFooter';\nimport { ModalBody } from './ModalBody';\nimport type { ModalBodyProps } from './ModalBody';\nimport { ModalContext } from './ModalContext';\nimport { ModalBackdrop } from './ModalBackdrop';\nimport {\n  modalBorderRadius,\n  modalHighestZIndex,\n  modalMaxHeight,\n  modalMaxWidth,\n  modalMinWidth,\n  modalResponsiveScreenGap,\n} from './modalTokens';\nimport type { ModalProps } from './types';\nimport { castWebType, makeMotionTime, makeSize } from '~utils';\nimport { BaseBox } from '~components/Box/BaseBox';\nimport { useTheme } from '~components/BladeProvider';\nimport { Box } from '~components/Box';\nimport { isValidAllowedChildren } from '~utils/isValidAllowedChildren';\nimport { MetaConstants, metaAttribute } from '~utils/metaAttribute';\nimport { makeAccessible } from '~utils/makeAccessible';\nimport { logger, throwBladeError } from '~utils/logger';\n\nconst entry = keyframes`\n  from {\n    opacity: 0;\n    transform: translate(-50%, -50%) scale(0.9) translateY(20px);\n  }\n  to {\n    opacity: 1;\n    transform: translate(-50%, -50%) scale(1) translateY(0px);\n  }\n`;\n\nconst exit = keyframes`\n  from {\n    opacity: 1;\n    transform: translate(-50%, -50%) scale(1) translateY(0px);\n  }\n  to {\n    opacity: 0;\n    transform: translate(-50%, -50%) scale(0.9) translateY(20px);\n  }\n`;\n\nconst ModalContent = styled(BaseBox)<{ isVisible: boolean }>(({ isVisible, theme }) => {\n  return css`\n    box-shadow: ${theme.elevation.highRaised};\n    position: fixed;\n    transform: translate(-50%, -50%);\n    opacity: ${isVisible ? 1 : 0};\n    animation: ${isVisible ? entry : exit}\n      ${castWebType(makeMotionTime(theme.motion.duration.xmoderate))}\n      ${isVisible\n        ? castWebType(theme.motion.easing.entrance.revealing)\n        : castWebType(theme.motion.easing.exit.revealing)};\n  `;\n});\n\nconst Modal = ({\n  isOpen = false,\n  children,\n  onDismiss,\n  initialFocusRef,\n  size = 'small',\n  accessibilityLabel,\n  zIndex = modalHighestZIndex,\n}: ModalProps): React.ReactElement => {\n  const { theme, platform } = useTheme();\n  const { isMounted, isVisible } = usePresence(isOpen, {\n    transitionDuration: theme.motion.duration.xmoderate,\n    initialEnter: true,\n  });\n\n  // Warn consumer if modal is opened on mobile\n  useEffect(() => {\n    if (__DEV__) {\n      if (platform === 'onMobile') {\n        logger({\n          message: 'Modal is not supported on mobile devices. Please use BottomSheet instead.',\n          moduleName: 'Modal',\n          type: 'warn',\n        });\n      }\n    }\n  }, [platform]);\n\n  // required by floating ui to handle focus\n  const { refs, context } = useFloating({\n    open: isMounted,\n  });\n\n  const defaultInitialFocusRef = React.useRef<any>(null);\n\n  const modalContext = React.useMemo(\n    () => ({\n      isOpen,\n      close: onDismiss,\n      defaultInitialFocusRef,\n      isVisible,\n    }),\n    [isOpen, onDismiss, defaultInitialFocusRef, isVisible],\n  );\n  const handleKeyDown = (event: React.KeyboardEvent): void => {\n    // close modal on escape key press\n    if (event?.key === 'Escape' || event?.code === 'Escape') {\n      onDismiss();\n    }\n  };\n\n  // Only allow ModalHeader, ModalBody and ModalFooter as children\n  const validChildren = React.Children.map(children, (child) => {\n    if (\n      isValidAllowedChildren(child, MetaConstants.ModalHeader) ||\n      isValidAllowedChildren(child, MetaConstants.ModalBody) ||\n      isValidAllowedChildren(child, MetaConstants.ModalFooter)\n    ) {\n      return child;\n    } else if (__DEV__) {\n      throwBladeError({\n        message: 'Modal only accepts ModalHeader, ModalBody and ModalFooter as children',\n        moduleName: 'Modal',\n      });\n    }\n    return null;\n  });\n\n  return (\n    <FloatingPortal>\n      <ModalContext.Provider value={modalContext}>\n        {isMounted ? (\n          <FloatingFocusManager\n            returnFocus\n            initialFocus={initialFocusRef ?? defaultInitialFocusRef}\n            context={context}\n            modal={true}\n          >\n            <Box zIndex={zIndex} position=\"fixed\" testID=\"modal-wrapper\">\n              <ModalBackdrop />\n              <ModalContent\n                {...metaAttribute({\n                  name: MetaConstants.Modal,\n                })}\n                {...makeAccessible({\n                  role: 'dialog',\n                  modal: true,\n                  label: accessibilityLabel,\n                })}\n                maxWidth={makeSize(modalMaxWidth[size])}\n                minWidth={makeSize(modalMinWidth)}\n                maxHeight={modalMaxHeight}\n                width={`calc(100vw - ${makeSize(modalResponsiveScreenGap)})`}\n                borderRadius={modalBorderRadius}\n                backgroundColor={theme.colors.surface.background.level2.lowContrast}\n                position=\"absolute\"\n                display=\"flex\"\n                flexDirection=\"column\"\n                top=\"50%\"\n                left=\"50%\"\n                onKeyDown={handleKeyDown}\n                isVisible={isVisible}\n                ref={refs.setFloating}\n              >\n                {validChildren}\n              </ModalContent>\n            </Box>\n          </FloatingFocusManager>\n        ) : null}\n      </ModalContext.Provider>\n    </FloatingPortal>\n  );\n};\n\nexport { Modal, ModalHeader, ModalFooter, ModalBody };\nexport type { ModalProps, ModalHeaderProps, ModalFooterProps, ModalBodyProps };\n"],"names":["entry","keyframes","exit","ModalContent","styled","BaseBox","withConfig","displayName","componentId","_ref","isVisible","theme","css","elevation","highRaised","castWebType","makeMotionTime","motion","duration","xmoderate","easing","entrance","revealing","Modal","_ref2","_ref2$isOpen","isOpen","children","onDismiss","initialFocusRef","_ref2$size","size","accessibilityLabel","_ref2$zIndex","zIndex","modalHighestZIndex","_useTheme","useTheme","platform","_usePresence","usePresence","transitionDuration","initialEnter","isMounted","useEffect","logger","message","moduleName","type","_useFloating","useFloating","open","refs","context","defaultInitialFocusRef","React","useRef","modalContext","useMemo","close","handleKeyDown","event","key","code","validChildren","Children","map","child","isValidAllowedChildren","MetaConstants","ModalHeader","ModalBody","ModalFooter","throwBladeError","_jsx","FloatingPortal","ModalContext","Provider","value","FloatingFocusManager","returnFocus","initialFocus","modal","_jsxs","Box","position","testID","ModalBackdrop","_objectSpread","metaAttribute","name","makeAccessible","role","label","maxWidth","makeSize","modalMaxWidth","minWidth","modalMinWidth","maxHeight","modalMaxHeight","width","concat","modalResponsiveScreenGap","borderRadius","modalBorderRadius","backgroundColor","colors","surface","background","level2","lowContrast","display","flexDirection","top","left","onKeyDown","ref","setFloating"],"mappings":"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"}
+{"version":3,"file":"Modal.web.js","sources":["../../../../../../src/components/Modal/Modal.web.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport React, { useEffect } from 'react';\nimport styled, { css, keyframes } from 'styled-components';\nimport { FloatingFocusManager, FloatingPortal, useFloating } from '@floating-ui/react';\nimport usePresence from 'use-presence';\nimport { ModalHeader } from './ModalHeader';\nimport type { ModalHeaderProps } from './ModalHeader';\nimport { ModalFooter } from './ModalFooter';\nimport type { ModalFooterProps } from './ModalFooter';\nimport { ModalBody } from './ModalBody';\nimport type { ModalBodyProps } from './ModalBody';\nimport { ModalContext } from './ModalContext';\nimport { ModalBackdrop } from './ModalBackdrop';\nimport {\n  modalBorderRadius,\n  modalHighestZIndex,\n  modalMaxHeight,\n  modalMaxWidth,\n  modalMinWidth,\n  modalResponsiveScreenGap,\n} from './modalTokens';\nimport type { ModalProps } from './types';\nimport { castWebType, makeMotionTime, makeSize } from '~utils';\nimport { BaseBox } from '~components/Box/BaseBox';\nimport { useTheme } from '~components/BladeProvider';\nimport { Box } from '~components/Box';\nimport { isValidAllowedChildren } from '~utils/isValidAllowedChildren';\nimport { MetaConstants, metaAttribute } from '~utils/metaAttribute';\nimport { makeAccessible } from '~utils/makeAccessible';\nimport { logger, throwBladeError } from '~utils/logger';\n\nconst entry = keyframes`\n  from {\n    opacity: 0;\n    transform: translate(-50%, -50%) scale(0.9) translateY(20px);\n  }\n  to {\n    opacity: 1;\n    transform: translate(-50%, -50%) scale(1) translateY(0px);\n  }\n`;\n\nconst exit = keyframes`\n  from {\n    opacity: 1;\n    transform: translate(-50%, -50%) scale(1) translateY(0px);\n  }\n  to {\n    opacity: 0;\n    transform: translate(-50%, -50%) scale(0.9) translateY(20px);\n  }\n`;\n\nconst ModalContent = styled(BaseBox)<{ isVisible: boolean }>(({ isVisible, theme }) => {\n  return css`\n    box-shadow: ${theme.elevation.highRaised};\n    position: fixed;\n    transform: translate(-50%, -50%);\n    opacity: ${isVisible ? 1 : 0};\n    animation: ${isVisible ? entry : exit}\n      ${castWebType(makeMotionTime(theme.motion.duration.xmoderate))}\n      ${isVisible\n        ? castWebType(theme.motion.easing.entrance.revealing)\n        : castWebType(theme.motion.easing.exit.revealing)};\n  `;\n});\n\nconst Modal = ({\n  isOpen = false,\n  children,\n  onDismiss,\n  initialFocusRef,\n  size = 'small',\n  accessibilityLabel,\n  zIndex = modalHighestZIndex,\n}: ModalProps): React.ReactElement => {\n  const { theme, platform } = useTheme();\n  const { isMounted, isVisible } = usePresence(isOpen, {\n    transitionDuration: theme.motion.duration.xmoderate,\n    initialEnter: true,\n  });\n\n  // Warn consumer if modal is opened on mobile\n  useEffect(() => {\n    if (__DEV__) {\n      if (platform === 'onMobile') {\n        logger({\n          message: 'Modal is not supported on mobile devices. Please use BottomSheet instead.',\n          moduleName: 'Modal',\n          type: 'warn',\n        });\n      }\n    }\n  }, [platform]);\n\n  // required by floating ui to handle focus\n  const { refs, context } = useFloating({\n    open: isMounted,\n  });\n\n  const defaultInitialFocusRef = React.useRef<any>(null);\n\n  const modalContext = React.useMemo(\n    () => ({\n      isOpen,\n      close: onDismiss,\n      defaultInitialFocusRef,\n      isVisible,\n    }),\n    [isOpen, onDismiss, defaultInitialFocusRef, isVisible],\n  );\n  const handleKeyDown = (event: React.KeyboardEvent): void => {\n    // close modal on escape key press\n    if (event?.key === 'Escape' || event?.code === 'Escape') {\n      onDismiss();\n    }\n  };\n\n  // Only allow ModalHeader, ModalBody and ModalFooter as children\n  const validChildren = React.Children.map(children, (child) => {\n    if (\n      isValidAllowedChildren(child, MetaConstants.ModalHeader) ||\n      isValidAllowedChildren(child, MetaConstants.ModalBody) ||\n      isValidAllowedChildren(child, MetaConstants.ModalFooter)\n    ) {\n      return child;\n    } else if (__DEV__) {\n      throwBladeError({\n        message: 'Modal only accepts ModalHeader, ModalBody and ModalFooter as children',\n        moduleName: 'Modal',\n      });\n    }\n    return null;\n  });\n\n  return (\n    <FloatingPortal>\n      <ModalContext.Provider value={modalContext}>\n        {isMounted ? (\n          <FloatingFocusManager\n            returnFocus\n            initialFocus={initialFocusRef ?? defaultInitialFocusRef}\n            context={context}\n            modal={true}\n          >\n            <Box zIndex={zIndex} position=\"fixed\" testID=\"modal-wrapper\">\n              <ModalBackdrop />\n              <ModalContent\n                {...metaAttribute({\n                  name: MetaConstants.Modal,\n                })}\n                {...makeAccessible({\n                  role: 'dialog',\n                  modal: true,\n                  label: accessibilityLabel,\n                })}\n                maxWidth={makeSize(modalMaxWidth[size])}\n                minWidth={makeSize(modalMinWidth)}\n                maxHeight={modalMaxHeight}\n                width={`calc(100vw - ${makeSize(modalResponsiveScreenGap)})`}\n                borderRadius={modalBorderRadius}\n                backgroundColor=\"popup.background.subtle\"\n                position=\"absolute\"\n                display=\"flex\"\n                flexDirection=\"column\"\n                top=\"50%\"\n                left=\"50%\"\n                onKeyDown={handleKeyDown}\n                isVisible={isVisible}\n                ref={refs.setFloating}\n              >\n                {validChildren}\n              </ModalContent>\n            </Box>\n          </FloatingFocusManager>\n        ) : null}\n      </ModalContext.Provider>\n    </FloatingPortal>\n  );\n};\n\nexport { Modal, ModalHeader, ModalFooter, ModalBody };\nexport type { ModalProps, ModalHeaderProps, ModalFooterProps, ModalBodyProps };\n"],"names":["entry","keyframes","exit","ModalContent","styled","BaseBox","withConfig","displayName","componentId","_ref","isVisible","theme","css","elevation","highRaised","castWebType","makeMotionTime","motion","duration","xmoderate","easing","entrance","revealing","Modal","_ref2","_ref2$isOpen","isOpen","children","onDismiss","initialFocusRef","_ref2$size","size","accessibilityLabel","_ref2$zIndex","zIndex","modalHighestZIndex","_useTheme","useTheme","platform","_usePresence","usePresence","transitionDuration","initialEnter","isMounted","useEffect","logger","message","moduleName","type","_useFloating","useFloating","open","refs","context","defaultInitialFocusRef","React","useRef","modalContext","useMemo","close","handleKeyDown","event","key","code","validChildren","Children","map","child","isValidAllowedChildren","MetaConstants","ModalHeader","ModalBody","ModalFooter","throwBladeError","_jsx","FloatingPortal","ModalContext","Provider","value","FloatingFocusManager","returnFocus","initialFocus","modal","_jsxs","Box","position","testID","ModalBackdrop","_objectSpread","metaAttribute","name","makeAccessible","role","label","maxWidth","makeSize","modalMaxWidth","minWidth","modalMinWidth","maxHeight","modalMaxHeight","width","concat","modalResponsiveScreenGap","borderRadius","modalBorderRadius","backgroundColor","display","flexDirection","top","left","onKeyDown","ref","setFloating"],"mappings":"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"}

package/build/lib/web/development/components/Modal/ModalBackdrop.js

@@ -25,7 +25,7 @@ var StyledModalBackdrop = /*#__PURE__*/styled(FloatingOverlay).withConfig({
     transitionTimingFunction: isVisible ? castWebType(theme.motion.easing.entrance.revealing) : castWebType(theme.motion.easing.exit.revealing),
     transitionProperty: 'opacity',
     opacity: isVisible ? 1 : 0,
-    backgroundColor: theme.colors.surface.overlay.background[800]
+    backgroundColor: theme.colors.overlay.background.subtle
   };
 });
 var ModalBackdrop = function ModalBackdrop() {

package/build/lib/web/development/components/Modal/ModalBackdrop.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModalBackdrop.js","sources":["../../../../../../src/components/Modal/ModalBackdrop.tsx"],"sourcesContent":["/* eslint-disable react/display-name */\nimport React from 'react';\nimport styled from 'styled-components';\nimport { FloatingOverlay } from '@floating-ui/react';\nimport { useModalContext } from './ModalContext';\nimport { castWebType, makeMotionTime } from '~utils';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\n\nconst StyledModalBackdrop = styled(FloatingOverlay)(({ theme }) => {\n  const { isVisible } = useModalContext();\n\n  return {\n    transitionDuration: `${makeMotionTime(theme.motion.duration.xmoderate)}`,\n    transitionTimingFunction: isVisible\n      ? castWebType(theme.motion.easing.entrance.revealing)\n      : castWebType(theme.motion.easing.exit.revealing),\n    transitionProperty: 'opacity',\n    opacity: isVisible ? 1 : 0,\n    backgroundColor: theme.colors.surface.overlay.background[800],\n  };\n});\n\nconst ModalBackdrop = (): React.ReactElement => {\n  const { close } = useModalContext();\n\n  return (\n    <StyledModalBackdrop\n      {...metaAttribute({ name: MetaConstants.ModalBackdrop, testID: MetaConstants.ModalBackdrop })}\n      onClick={() => {\n        close();\n      }}\n      lockScroll={true}\n    />\n  );\n};\n\nexport { ModalBackdrop };\n"],"names":["StyledModalBackdrop","styled","FloatingOverlay","withConfig","displayName","componentId","_ref","theme","_useModalContext","useModalContext","isVisible","transitionDuration","concat","makeMotionTime","motion","duration","xmoderate","transitionTimingFunction","castWebType","easing","entrance","revealing","exit","transitionProperty","opacity","backgroundColor","colors","surface","overlay","background","ModalBackdrop","_useModalContext2","close","_jsx","_objectSpread","metaAttribute","name","MetaConstants","testID","onClick","lockScroll"],"mappings":";;;;;;;;;;;;;;;AAQA,IAAMA,mBAAmB,gBAAGC,MAAM,CAACC,eAAe,CAAC,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,oCAAA;EAAAC,WAAA,EAAA,aAAA;AAAA,CAAC,CAAA,CAAA,UAAAC,IAAA,EAAe;AAAA,EAAA,IAAZC,KAAK,GAAAD,IAAA,CAALC,KAAK,CAAA;AAC1D,EAAA,IAAAC,gBAAA,GAAsBC,eAAe,EAAE;IAA/BC,SAAS,GAAAF,gBAAA,CAATE,SAAS,CAAA;EAEjB,OAAO;AACLC,IAAAA,kBAAkB,EAAAC,EAAAA,CAAAA,MAAA,CAAKC,cAAc,CAACN,KAAK,CAACO,MAAM,CAACC,QAAQ,CAACC,SAAS,CAAC,CAAE;IACxEC,wBAAwB,EAAEP,SAAS,GAC/BQ,WAAW,CAACX,KAAK,CAACO,MAAM,CAACK,MAAM,CAACC,QAAQ,CAACC,SAAS,CAAC,GACnDH,WAAW,CAACX,KAAK,CAACO,MAAM,CAACK,MAAM,CAACG,IAAI,CAACD,SAAS,CAAC;AACnDE,IAAAA,kBAAkB,EAAE,SAAS;AAC7BC,IAAAA,OAAO,EAAEd,SAAS,GAAG,CAAC,GAAG,CAAC;IAC1Be,eAAe,EAAElB,KAAK,CAACmB,MAAM,CAACC,OAAO,CAACC,OAAO,CAACC,UAAU,CAAC,GAAG,CAAA;GAC7D,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,IAAMC,aAAa,GAAG,SAAhBA,aAAaA,GAA6B;AAC9C,EAAA,IAAAC,iBAAA,GAAkBtB,eAAe,EAAE;IAA3BuB,KAAK,GAAAD,iBAAA,CAALC,KAAK,CAAA;EAEb,oBACEC,GAAA,CAACjC,mBAAmB,EAAAkC,aAAA,CAAAA,aAAA,CACdC,EAAAA,EAAAA,aAAa,CAAC;IAAEC,IAAI,EAAEC,aAAa,CAACP,aAAa;IAAEQ,MAAM,EAAED,aAAa,CAACP,aAAAA;AAAc,GAAC,CAAC,CAAA,EAAA,EAAA,EAAA;IAC7FS,OAAO,EAAE,SAAAA,OAAAA,GAAM;AACbP,MAAAA,KAAK,EAAE,CAAA;KACP;AACFQ,IAAAA,UAAU,EAAE,IAAA;AAAK,GAAA,CAClB,CAAC,CAAA;AAEN;;;;"}
+{"version":3,"file":"ModalBackdrop.js","sources":["../../../../../../src/components/Modal/ModalBackdrop.tsx"],"sourcesContent":["/* eslint-disable react/display-name */\nimport React from 'react';\nimport styled from 'styled-components';\nimport { FloatingOverlay } from '@floating-ui/react';\nimport { useModalContext } from './ModalContext';\nimport { castWebType, makeMotionTime } from '~utils';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\n\nconst StyledModalBackdrop = styled(FloatingOverlay)(({ theme }) => {\n  const { isVisible } = useModalContext();\n\n  return {\n    transitionDuration: `${makeMotionTime(theme.motion.duration.xmoderate)}`,\n    transitionTimingFunction: isVisible\n      ? castWebType(theme.motion.easing.entrance.revealing)\n      : castWebType(theme.motion.easing.exit.revealing),\n    transitionProperty: 'opacity',\n    opacity: isVisible ? 1 : 0,\n    backgroundColor: theme.colors.overlay.background.subtle,\n  };\n});\n\nconst ModalBackdrop = (): React.ReactElement => {\n  const { close } = useModalContext();\n\n  return (\n    <StyledModalBackdrop\n      {...metaAttribute({ name: MetaConstants.ModalBackdrop, testID: MetaConstants.ModalBackdrop })}\n      onClick={() => {\n        close();\n      }}\n      lockScroll={true}\n    />\n  );\n};\n\nexport { ModalBackdrop };\n"],"names":["StyledModalBackdrop","styled","FloatingOverlay","withConfig","displayName","componentId","_ref","theme","_useModalContext","useModalContext","isVisible","transitionDuration","concat","makeMotionTime","motion","duration","xmoderate","transitionTimingFunction","castWebType","easing","entrance","revealing","exit","transitionProperty","opacity","backgroundColor","colors","overlay","background","subtle","ModalBackdrop","_useModalContext2","close","_jsx","_objectSpread","metaAttribute","name","MetaConstants","testID","onClick","lockScroll"],"mappings":";;;;;;;;;;;;;;;AAQA,IAAMA,mBAAmB,gBAAGC,MAAM,CAACC,eAAe,CAAC,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,oCAAA;EAAAC,WAAA,EAAA,aAAA;AAAA,CAAC,CAAA,CAAA,UAAAC,IAAA,EAAe;AAAA,EAAA,IAAZC,KAAK,GAAAD,IAAA,CAALC,KAAK,CAAA;AAC1D,EAAA,IAAAC,gBAAA,GAAsBC,eAAe,EAAE;IAA/BC,SAAS,GAAAF,gBAAA,CAATE,SAAS,CAAA;EAEjB,OAAO;AACLC,IAAAA,kBAAkB,EAAAC,EAAAA,CAAAA,MAAA,CAAKC,cAAc,CAACN,KAAK,CAACO,MAAM,CAACC,QAAQ,CAACC,SAAS,CAAC,CAAE;IACxEC,wBAAwB,EAAEP,SAAS,GAC/BQ,WAAW,CAACX,KAAK,CAACO,MAAM,CAACK,MAAM,CAACC,QAAQ,CAACC,SAAS,CAAC,GACnDH,WAAW,CAACX,KAAK,CAACO,MAAM,CAACK,MAAM,CAACG,IAAI,CAACD,SAAS,CAAC;AACnDE,IAAAA,kBAAkB,EAAE,SAAS;AAC7BC,IAAAA,OAAO,EAAEd,SAAS,GAAG,CAAC,GAAG,CAAC;IAC1Be,eAAe,EAAElB,KAAK,CAACmB,MAAM,CAACC,OAAO,CAACC,UAAU,CAACC,MAAAA;GAClD,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,IAAMC,aAAa,GAAG,SAAhBA,aAAaA,GAA6B;AAC9C,EAAA,IAAAC,iBAAA,GAAkBtB,eAAe,EAAE;IAA3BuB,KAAK,GAAAD,iBAAA,CAALC,KAAK,CAAA;EAEb,oBACEC,GAAA,CAACjC,mBAAmB,EAAAkC,aAAA,CAAAA,aAAA,CACdC,EAAAA,EAAAA,aAAa,CAAC;IAAEC,IAAI,EAAEC,aAAa,CAACP,aAAa;IAAEQ,MAAM,EAAED,aAAa,CAACP,aAAAA;AAAc,GAAC,CAAC,CAAA,EAAA,EAAA,EAAA;IAC7FS,OAAO,EAAE,SAAAA,OAAAA,GAAM;AACbP,MAAAA,KAAK,EAAE,CAAA;KACP;AACFQ,IAAAA,UAAU,EAAE,IAAA;AAAK,GAAA,CAClB,CAAC,CAAA;AAEN;;;;"}

package/build/lib/web/development/components/Modal/ModalHeader.web.js

@@ -4,13 +4,11 @@ import '../../utils/index.js';
 import { BaseHeader } from '../BaseHeaderFooter/BaseHeader.js';
 import '../Box/BaseBox/index.js';
 import '../../tokens/global/index.js';
-import '../BladeProvider/index.js';
 import '../Button/IconButton/index.js';
 import '../Icons/index.js';
 import '../../utils/metaAttribute/index.js';
 import '../../utils/assignWithoutSideEffects/index.js';
 import { jsx } from 'react/jsx-runtime';
-import useTheme from '../BladeProvider/useTheme.js';
 import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
 import { makeSize } from '../../utils/makeSize/makeSize.js';
 import { size } from '../../tokens/global/size.js';
@@ -29,8 +27,6 @@ var _ModalHeader = function _ModalHeader(_ref) {
   var _useModalContext = useModalContext(),
     close = _useModalContext.close,
     defaultInitialFocusRef = _useModalContext.defaultInitialFocusRef;
-  var _useTheme = useTheme(),
-    theme = _useTheme.theme;
   var isHeaderEmpty = !(title || subtitle || leading || trailing);
   return isHeaderEmpty ? /*#__PURE__*/jsx(BaseBox, {
     display: "flex",
@@ -42,7 +38,7 @@ var _ModalHeader = function _ModalHeader(_ref) {
     width: makeSize(size[28]),
     height: makeSize(size[28]),
     flexShrink: 0,
-    backgroundColor: theme.colors.surface.background.level2.lowContrast,
+    backgroundColor: "popup.background.subtle",
     borderRadius: "max",
     zIndex: modalHighestZIndex,
     children: /*#__PURE__*/jsx(IconButton, {

package/build/lib/web/development/components/Modal/ModalHeader.web.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModalHeader.web.js","sources":["../../../../../../src/components/Modal/ModalHeader.web.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/prefer-nullish-coalescing */\nimport { useModalContext } from './ModalContext';\nimport { modalHighestZIndex } from './modalTokens';\nimport type { BaseHeaderProps } from '~components/BaseHeaderFooter/BaseHeader';\nimport { makeSize } from '~utils';\nimport { BaseHeader } from '~components/BaseHeaderFooter/BaseHeader';\nimport { BaseBox } from '~components/Box/BaseBox';\nimport { size } from '~tokens/global';\nimport { useTheme } from '~components/BladeProvider';\nimport { IconButton } from '~components/Button/IconButton';\nimport { CloseIcon } from '~components/Icons';\nimport { MetaConstants } from '~utils/metaAttribute';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\n\ntype ModalHeaderProps = Pick<\n  BaseHeaderProps,\n  'title' | 'subtitle' | 'leading' | 'trailing' | 'titleSuffix'\n>;\n\nconst _ModalHeader = ({\n  leading,\n  subtitle,\n  title,\n  titleSuffix,\n  trailing,\n}: ModalHeaderProps): React.ReactElement => {\n  const { close, defaultInitialFocusRef } = useModalContext();\n  const { theme } = useTheme();\n\n  const isHeaderEmpty = !(title || subtitle || leading || trailing);\n  return isHeaderEmpty ? (\n    <BaseBox\n      display=\"flex\"\n      alignItems=\"center\"\n      justifyContent=\"center\"\n      position=\"absolute\"\n      top=\"spacing.5\"\n      right=\"spacing.5\"\n      width={makeSize(size[28])}\n      height={makeSize(size[28])}\n      flexShrink={0}\n      backgroundColor={theme.colors.surface.background.level2.lowContrast}\n      borderRadius=\"max\"\n      zIndex={modalHighestZIndex}\n    >\n      <IconButton\n        ref={defaultInitialFocusRef}\n        size=\"large\"\n        icon={CloseIcon}\n        accessibilityLabel=\"Close\"\n        onClick={close}\n      />\n    </BaseBox>\n  ) : (\n    <BaseHeader\n      metaComponentName={MetaConstants.ModalHeader}\n      title={title}\n      subtitle={subtitle}\n      leading={leading}\n      trailing={trailing}\n      titleSuffix={titleSuffix}\n      closeButtonRef={defaultInitialFocusRef}\n      showCloseButton={true}\n      onCloseButtonClick={close}\n    />\n  );\n};\nconst ModalHeader = assignWithoutSideEffects(_ModalHeader, {\n  componentId: MetaConstants.ModalHeader,\n});\n\nexport { ModalHeader };\nexport type { ModalHeaderProps };\n"],"names":["_ModalHeader","_ref","leading","subtitle","title","titleSuffix","trailing","_useModalContext","useModalContext","close","defaultInitialFocusRef","_useTheme","useTheme","theme","isHeaderEmpty","_jsx","BaseBox","display","alignItems","justifyContent","position","top","right","width","makeSize","size","height","flexShrink","backgroundColor","colors","surface","background","level2","lowContrast","borderRadius","zIndex","modalHighestZIndex","children","IconButton","ref","icon","CloseIcon","accessibilityLabel","onClick","BaseHeader","metaComponentName","MetaConstants","ModalHeader","closeButtonRef","showCloseButton","onCloseButtonClick","assignWithoutSideEffects","componentId"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAmBA,IAAMA,YAAY,GAAG,SAAfA,YAAYA,CAAAC,IAAA,EAM0B;AAAA,EAAA,IAL1CC,OAAO,GAAAD,IAAA,CAAPC,OAAO;IACPC,QAAQ,GAAAF,IAAA,CAARE,QAAQ;IACRC,KAAK,GAAAH,IAAA,CAALG,KAAK;IACLC,WAAW,GAAAJ,IAAA,CAAXI,WAAW;IACXC,QAAQ,GAAAL,IAAA,CAARK,QAAQ,CAAA;AAER,EAAA,IAAAC,gBAAA,GAA0CC,eAAe,EAAE;IAAnDC,KAAK,GAAAF,gBAAA,CAALE,KAAK;IAAEC,sBAAsB,GAAAH,gBAAA,CAAtBG,sBAAsB,CAAA;AACrC,EAAA,IAAAC,SAAA,GAAkBC,QAAQ,EAAE;IAApBC,KAAK,GAAAF,SAAA,CAALE,KAAK,CAAA;EAEb,IAAMC,aAAa,GAAG,EAAEV,KAAK,IAAID,QAAQ,IAAID,OAAO,IAAII,QAAQ,CAAC,CAAA;AACjE,EAAA,OAAOQ,aAAa,gBAClBC,GAAA,CAACC,OAAO,EAAA;AACNC,IAAAA,OAAO,EAAC,MAAM;AACdC,IAAAA,UAAU,EAAC,QAAQ;AACnBC,IAAAA,cAAc,EAAC,QAAQ;AACvBC,IAAAA,QAAQ,EAAC,UAAU;AACnBC,IAAAA,GAAG,EAAC,WAAW;AACfC,IAAAA,KAAK,EAAC,WAAW;AACjBC,IAAAA,KAAK,EAAEC,QAAQ,CAACC,IAAI,CAAC,EAAE,CAAC,CAAE;AAC1BC,IAAAA,MAAM,EAAEF,QAAQ,CAACC,IAAI,CAAC,EAAE,CAAC,CAAE;AAC3BE,IAAAA,UAAU,EAAE,CAAE;IACdC,eAAe,EAAEf,KAAK,CAACgB,MAAM,CAACC,OAAO,CAACC,UAAU,CAACC,MAAM,CAACC,WAAY;AACpEC,IAAAA,YAAY,EAAC,KAAK;AAClBC,IAAAA,MAAM,EAAEC,kBAAmB;IAAAC,QAAA,eAE3BtB,GAAA,CAACuB,UAAU,EAAA;AACTC,MAAAA,GAAG,EAAE7B,sBAAuB;AAC5Be,MAAAA,IAAI,EAAC,OAAO;AACZe,MAAAA,IAAI,EAAEC,SAAU;AAChBC,MAAAA,kBAAkB,EAAC,OAAO;AAC1BC,MAAAA,OAAO,EAAElC,KAAAA;KACV,CAAA;AAAC,GACK,CAAC,gBAEVM,GAAA,CAAC6B,UAAU,EAAA;IACTC,iBAAiB,EAAEC,aAAa,CAACC,WAAY;AAC7C3C,IAAAA,KAAK,EAAEA,KAAM;AACbD,IAAAA,QAAQ,EAAEA,QAAS;AACnBD,IAAAA,OAAO,EAAEA,OAAQ;AACjBI,IAAAA,QAAQ,EAAEA,QAAS;AACnBD,IAAAA,WAAW,EAAEA,WAAY;AACzB2C,IAAAA,cAAc,EAAEtC,sBAAuB;AACvCuC,IAAAA,eAAe,EAAE,IAAK;AACtBC,IAAAA,kBAAkB,EAAEzC,KAAAA;AAAM,GAC3B,CACF,CAAA;AACH,CAAC,CAAA;AACD,IAAMsC,WAAW,gBAAGI,wBAAwB,CAACnD,YAAY,EAAE;EACzDoD,WAAW,EAAEN,aAAa,CAACC,WAAAA;AAC7B,CAAC;;;;"}
+{"version":3,"file":"ModalHeader.web.js","sources":["../../../../../../src/components/Modal/ModalHeader.web.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/prefer-nullish-coalescing */\nimport { useModalContext } from './ModalContext';\nimport { modalHighestZIndex } from './modalTokens';\nimport type { BaseHeaderProps } from '~components/BaseHeaderFooter/BaseHeader';\nimport { makeSize } from '~utils';\nimport { BaseHeader } from '~components/BaseHeaderFooter/BaseHeader';\nimport { BaseBox } from '~components/Box/BaseBox';\nimport { size } from '~tokens/global';\nimport { IconButton } from '~components/Button/IconButton';\nimport { CloseIcon } from '~components/Icons';\nimport { MetaConstants } from '~utils/metaAttribute';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\n\ntype ModalHeaderProps = Pick<\n  BaseHeaderProps,\n  'title' | 'subtitle' | 'leading' | 'trailing' | 'titleSuffix'\n>;\n\nconst _ModalHeader = ({\n  leading,\n  subtitle,\n  title,\n  titleSuffix,\n  trailing,\n}: ModalHeaderProps): React.ReactElement => {\n  const { close, defaultInitialFocusRef } = useModalContext();\n\n  const isHeaderEmpty = !(title || subtitle || leading || trailing);\n  return isHeaderEmpty ? (\n    <BaseBox\n      display=\"flex\"\n      alignItems=\"center\"\n      justifyContent=\"center\"\n      position=\"absolute\"\n      top=\"spacing.5\"\n      right=\"spacing.5\"\n      width={makeSize(size[28])}\n      height={makeSize(size[28])}\n      flexShrink={0}\n      backgroundColor=\"popup.background.subtle\"\n      borderRadius=\"max\"\n      zIndex={modalHighestZIndex}\n    >\n      <IconButton\n        ref={defaultInitialFocusRef}\n        size=\"large\"\n        icon={CloseIcon}\n        accessibilityLabel=\"Close\"\n        onClick={close}\n      />\n    </BaseBox>\n  ) : (\n    <BaseHeader\n      metaComponentName={MetaConstants.ModalHeader}\n      title={title}\n      subtitle={subtitle}\n      leading={leading}\n      trailing={trailing}\n      titleSuffix={titleSuffix}\n      closeButtonRef={defaultInitialFocusRef}\n      showCloseButton={true}\n      onCloseButtonClick={close}\n    />\n  );\n};\nconst ModalHeader = assignWithoutSideEffects(_ModalHeader, {\n  componentId: MetaConstants.ModalHeader,\n});\n\nexport { ModalHeader };\nexport type { ModalHeaderProps };\n"],"names":["_ModalHeader","_ref","leading","subtitle","title","titleSuffix","trailing","_useModalContext","useModalContext","close","defaultInitialFocusRef","isHeaderEmpty","_jsx","BaseBox","display","alignItems","justifyContent","position","top","right","width","makeSize","size","height","flexShrink","backgroundColor","borderRadius","zIndex","modalHighestZIndex","children","IconButton","ref","icon","CloseIcon","accessibilityLabel","onClick","BaseHeader","metaComponentName","MetaConstants","ModalHeader","closeButtonRef","showCloseButton","onCloseButtonClick","assignWithoutSideEffects","componentId"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAkBA,IAAMA,YAAY,GAAG,SAAfA,YAAYA,CAAAC,IAAA,EAM0B;AAAA,EAAA,IAL1CC,OAAO,GAAAD,IAAA,CAAPC,OAAO;IACPC,QAAQ,GAAAF,IAAA,CAARE,QAAQ;IACRC,KAAK,GAAAH,IAAA,CAALG,KAAK;IACLC,WAAW,GAAAJ,IAAA,CAAXI,WAAW;IACXC,QAAQ,GAAAL,IAAA,CAARK,QAAQ,CAAA;AAER,EAAA,IAAAC,gBAAA,GAA0CC,eAAe,EAAE;IAAnDC,KAAK,GAAAF,gBAAA,CAALE,KAAK;IAAEC,sBAAsB,GAAAH,gBAAA,CAAtBG,sBAAsB,CAAA;EAErC,IAAMC,aAAa,GAAG,EAAEP,KAAK,IAAID,QAAQ,IAAID,OAAO,IAAII,QAAQ,CAAC,CAAA;AACjE,EAAA,OAAOK,aAAa,gBAClBC,GAAA,CAACC,OAAO,EAAA;AACNC,IAAAA,OAAO,EAAC,MAAM;AACdC,IAAAA,UAAU,EAAC,QAAQ;AACnBC,IAAAA,cAAc,EAAC,QAAQ;AACvBC,IAAAA,QAAQ,EAAC,UAAU;AACnBC,IAAAA,GAAG,EAAC,WAAW;AACfC,IAAAA,KAAK,EAAC,WAAW;AACjBC,IAAAA,KAAK,EAAEC,QAAQ,CAACC,IAAI,CAAC,EAAE,CAAC,CAAE;AAC1BC,IAAAA,MAAM,EAAEF,QAAQ,CAACC,IAAI,CAAC,EAAE,CAAC,CAAE;AAC3BE,IAAAA,UAAU,EAAE,CAAE;AACdC,IAAAA,eAAe,EAAC,yBAAyB;AACzCC,IAAAA,YAAY,EAAC,KAAK;AAClBC,IAAAA,MAAM,EAAEC,kBAAmB;IAAAC,QAAA,eAE3BjB,GAAA,CAACkB,UAAU,EAAA;AACTC,MAAAA,GAAG,EAAErB,sBAAuB;AAC5BY,MAAAA,IAAI,EAAC,OAAO;AACZU,MAAAA,IAAI,EAAEC,SAAU;AAChBC,MAAAA,kBAAkB,EAAC,OAAO;AAC1BC,MAAAA,OAAO,EAAE1B,KAAAA;KACV,CAAA;AAAC,GACK,CAAC,gBAEVG,GAAA,CAACwB,UAAU,EAAA;IACTC,iBAAiB,EAAEC,aAAa,CAACC,WAAY;AAC7CnC,IAAAA,KAAK,EAAEA,KAAM;AACbD,IAAAA,QAAQ,EAAEA,QAAS;AACnBD,IAAAA,OAAO,EAAEA,OAAQ;AACjBI,IAAAA,QAAQ,EAAEA,QAAS;AACnBD,IAAAA,WAAW,EAAEA,WAAY;AACzBmC,IAAAA,cAAc,EAAE9B,sBAAuB;AACvC+B,IAAAA,eAAe,EAAE,IAAK;AACtBC,IAAAA,kBAAkB,EAAEjC,KAAAA;AAAM,GAC3B,CACF,CAAA;AACH,CAAC,CAAA;AACD,IAAM8B,WAAW,gBAAGI,wBAAwB,CAAC3C,YAAY,EAAE;EACzD4C,WAAW,EAAEN,aAAa,CAACC,WAAAA;AAC7B,CAAC;;;;"}

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

@@ -177,8 +177,8 @@ var Popover = function Popover(_ref) {
               context: context,
               width: ARROW_WIDTH,
               height: ARROW_HEIGHT,
-              fillColor: theme.colors.surface.popup.background,
-              strokeColor: theme.colors.brand.gray[400].lowContrast
+              fillColor: theme.colors.popup.background.subtle,
+              strokeColor: theme.colors.popup.border.subtle
             }),
             children: content
           })

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  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, popoverZIndex } 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';\n\nconst Popover = ({\n  content,\n  title,\n  titleLeading,\n  footer,\n  children,\n  placement = 'top',\n  onOpenChange,\n  zIndex = popoverZIndex,\n  isOpen,\n  defaultIsOpen,\n  initialFocusRef,\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 });\n  const dismiss = useDismiss(context);\n  const role = useRole(context);\n\n  const { getReferenceProps, getFloatingProps } = useInteractions([click, dismiss, role]);\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    };\n  }, [close, titleId]);\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={initialFocusRef ?? defaultInitialFocusRef}\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            >\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.surface.popup.background}\n                    strokeColor={theme.colors.brand.gray[400].lowContrast}\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","popoverZIndex","isOpen","defaultIsOpen","initialFocusRef","_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","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","PopoverContent","PopupArrow","width","height","fillColor","colors","surface","popup","background","strokeColor","brand","gray","lowContrast"],"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  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, popoverZIndex } 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';\n\nconst Popover = ({\n  content,\n  title,\n  titleLeading,\n  footer,\n  children,\n  placement = 'top',\n  onOpenChange,\n  zIndex = popoverZIndex,\n  isOpen,\n  defaultIsOpen,\n  initialFocusRef,\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 });\n  const dismiss = useDismiss(context);\n  const role = useRole(context);\n\n  const { getReferenceProps, getFloatingProps } = useInteractions([click, dismiss, role]);\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    };\n  }, [close, titleId]);\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={initialFocusRef ?? defaultInitialFocusRef}\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            >\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","popoverZIndex","isOpen","defaultIsOpen","initialFocusRef","_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","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","PopoverContent","PopupArrow","width","height","fillColor","colors","popup","background","subtle","strokeColor","border"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiCA,IAAMA,OAAO,GAAG,SAAVA,OAAOA,CAAAC,IAAA,EAY2B;AAAA,EAAA,IAXtCC,OAAO,GAAAD,IAAA,CAAPC,OAAO;IACPC,KAAK,GAAAF,IAAA,CAALE,KAAK;IACLC,YAAY,GAAAH,IAAA,CAAZG,YAAY;IACZC,MAAM,GAAAJ,IAAA,CAANI,MAAM;IACNC,QAAQ,GAAAL,IAAA,CAARK,QAAQ;IAAAC,cAAA,GAAAN,IAAA,CACRO,SAAS;AAATA,IAAAA,SAAS,GAAAD,cAAA,KAAG,KAAA,CAAA,GAAA,KAAK,GAAAA,cAAA;IACjBE,YAAY,GAAAR,IAAA,CAAZQ,YAAY;IAAAC,WAAA,GAAAT,IAAA,CACZU,MAAM;AAANA,IAAAA,MAAM,GAAAD,WAAA,KAAGE,KAAAA,CAAAA,GAAAA,aAAa,GAAAF,WAAA;IACtBG,MAAM,GAAAZ,IAAA,CAANY,MAAM;IACNC,aAAa,GAAAb,IAAA,CAAba,aAAa;IACbC,eAAe,GAAAd,IAAA,CAAfc,eAAe,CAAA;AAEf,EAAA,IAAAC,SAAA,GAAkBC,QAAQ,EAAE;IAApBC,KAAK,GAAAF,SAAA,CAALE,KAAK,CAAA;AACb,EAAA,IAAMC,sBAAsB,GAAGC,cAAK,CAACC,MAAM,CAAoB,IAAI,CAAC,CAAA;AACpE,EAAA,IAAMC,QAAQ,GAAGF,cAAK,CAACC,MAAM,CAAgB,IAAI,CAAC,CAAA;AAClD,EAAA,IAAME,OAAO,GAAGC,KAAK,CAAC,eAAe,CAAC,CAAA;AAEtC,EAAA,IAAMC,GAAG,GAAGP,KAAK,CAACQ,OAAO,CAAC,CAAC,CAAC,CAAA;AAC5B,EAAA,IAAAC,qBAAA,GAAeC,yBAAyB,CAACpB,SAAS,CAAC;IAAAqB,sBAAA,GAAAC,cAAA,CAAAH,qBAAA,EAAA,CAAA,CAAA;AAA5CI,IAAAA,IAAI,GAAAF,sBAAA,CAAA,CAAA,CAAA,CAAA;EACX,IAAMG,YAAY,GAAGD,IAAI,KAAK,MAAM,IAAIA,IAAI,KAAK,OAAO,CAAA;EACxD,IAAME,cAAc,GAAGF,IAAI,KAAK,OAAO,IAAIA,IAAI,KAAK,QAAQ,CAAA;EAE5D,IAAAG,qBAAA,GAAoDC,oBAAoB,CAAC;AACvEC,MAAAA,KAAK,EAAEvB,MAAM;AACbwB,MAAAA,YAAY,EAAEvB,aAAa;MAC3BwB,QAAQ,EAAE,SAAAA,QAAAA,CAACzB,MAAM,EAAA;AAAA,QAAA,OAAKJ,YAAY,KAAA,IAAA,IAAZA,YAAY,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAZA,YAAY,CAAG;AAAEI,UAAAA,MAAM,EAANA,MAAAA;AAAO,SAAC,CAAC,CAAA;AAAA,OAAA;AAClD,KAAC,CAAC;IAAA0B,sBAAA,GAAAT,cAAA,CAAAI,qBAAA,EAAA,CAAA,CAAA;AAJKM,IAAAA,kBAAkB,GAAAD,sBAAA,CAAA,CAAA,CAAA;AAAEE,IAAAA,qBAAqB,GAAAF,sBAAA,CAAA,CAAA,CAAA,CAAA;EAMhD,IAAAG,YAAA,GAAwEC,WAAW,CAAC;AAClFC,MAAAA,IAAI,EAAEJ,kBAAkB;MACxB/B,YAAY,EAAE,SAAAA,YAAAA,CAACI,MAAM,EAAA;AAAA,QAAA,OAAK4B,qBAAqB,CAAC,YAAA;AAAA,UAAA,OAAM5B,MAAM,CAAA;SAAC,CAAA,CAAA;AAAA,OAAA;AAC7DL,MAAAA,SAAS,EAATA,SAAS;AACTqC,MAAAA,QAAQ,EAAE,OAAO;MACjBC,UAAU,EAAE,CACVC,KAAK,CAAC;AAAEC,QAAAA,SAAS,EAAE,KAAK;AAAEC,QAAAA,OAAO,EAAExB,GAAAA;OAAK,CAAC,EACzCyB,IAAI,CAAC;AAAED,QAAAA,OAAO,EAAExB,GAAG;AAAE0B,QAAAA,yBAAyB,EAAE,KAAA;OAAO,CAAC,EACxDC,MAAM,CAAC3B,GAAG,GAAG4B,YAAY,CAAC,EAC1BC,KAAK,CAAC;AACJC,QAAAA,OAAO,EAAEjC,QAAQ;AACjB2B,QAAAA,OAAO,EAAEjB,YAAY,GAAGP,GAAG,GAAG4B,YAAY,GAAGG,WAAAA;AAC/C,OAAC,CAAC,CACH;AACDC,MAAAA,oBAAoB,EAAEC,UAAAA;AACxB,KAAC,CAAC;IAfMC,IAAI,GAAAjB,YAAA,CAAJiB,IAAI;IAAEC,cAAc,GAAAlB,YAAA,CAAdkB,cAAc;IAAEC,OAAO,GAAAnB,YAAA,CAAPmB,OAAO;IAAaC,iBAAiB,GAAApB,YAAA,CAA5BlC,SAAS,CAAA;AAiBhD,EAAA,IAAMuD,KAAK,GAAG3C,cAAK,CAAC4C,WAAW,CAAC,YAAM;AACpCvB,IAAAA,qBAAqB,CAAC,YAAA;AAAA,MAAA,OAAM,KAAK,CAAA;KAAC,CAAA,CAAA;AACpC,GAAC,EAAE,CAACA,qBAAqB,CAAC,CAAC,CAAA;;AAE3B;AACA;AACA,EAAA,IAAAwB,sBAAA,GAAuBrC,yBAAyB,CAACkC,iBAAiB,CAAC;IAAAI,sBAAA,GAAApC,cAAA,CAAAmC,sBAAA,EAAA,CAAA,CAAA;AAA5DE,IAAAA,YAAY,GAAAD,sBAAA,CAAA,CAAA,CAAA,CAAA;EACnB,IAAME,oBAAoB,GAAGD,YAAY,KAAK,MAAM,IAAIA,YAAY,KAAK,OAAO,CAAA;AAChF,EAAA,IAAME,eAAe,GAAGpC,cAAc,GAAG,CAACqC,IAAI,CAAC,CAAC,CAAC,GAAGA,IAAI,CAAC,CAAC,CAAC,CAAA;AAC3D,EAAA,IAAAC,oBAAA,GAA8BC,mBAAmB,CAACX,OAAO,EAAE;AACzDY,MAAAA,QAAQ,EAAEvD,KAAK,CAACwD,MAAM,CAACD,QAAQ,CAACE,KAAK;AACrCC,MAAAA,OAAO,EAAE;AACPC,QAAAA,OAAO,EAAE,CAAC;QACVC,SAAS,EAAA,WAAA,CAAAC,MAAA,CAAcX,oBAAoB,GAAG,GAAG,GAAG,GAAG,EAAA,GAAA,CAAA,CAAAW,MAAA,CAAIV,eAAe,EAAA,KAAA,CAAA;AAC5E,OAAA;AACF,KAAC,CAAC;IANMW,SAAS,GAAAT,oBAAA,CAATS,SAAS;IAAEC,MAAM,GAAAV,oBAAA,CAANU,MAAM,CAAA;;AAQzB;AACA,EAAA,IAAMC,YAAY,GAAGrE,MAAM,KAAKsE,SAAS,CAAA;AACzC,EAAA,IAAMC,KAAK,GAAGC,QAAQ,CAACxB,OAAO,EAAE;AAAEyB,IAAAA,OAAO,EAAE,CAACJ,YAAAA;AAAa,GAAC,CAAC,CAAA;AAC3D,EAAA,IAAMK,OAAO,GAAGC,UAAU,CAAC3B,OAAO,CAAC,CAAA;AACnC,EAAA,IAAM4B,IAAI,GAAGC,OAAO,CAAC7B,OAAO,CAAC,CAAA;EAE7B,IAAA8B,gBAAA,GAAgDC,eAAe,CAAC,CAACR,KAAK,EAAEG,OAAO,EAAEE,IAAI,CAAC,CAAC;IAA/EI,iBAAiB,GAAAF,gBAAA,CAAjBE,iBAAiB;IAAEC,gBAAgB,GAAAH,gBAAA,CAAhBG,gBAAgB,CAAA;AAC3C,EAAA,IAAMC,UAAU,GAAG3E,cAAK,CAACC,MAAM,CAAoB,IAAI,CAAC,CAAA;EACxD,IAAM2E,SAAS,GAAGC,YAAY,CAACtC,IAAI,CAACuC,YAAY,EAAEH,UAAU,CAAC,CAAA;AAE7D,EAAA,IAAMI,YAAY,GAAG/E,cAAK,CAACgF,OAAO,CAAC,YAAM;IACvC,OAAO;AACLrC,MAAAA,KAAK,EAALA,KAAK;AACL5C,MAAAA,sBAAsB,EAAtBA,sBAAsB;AACtBI,MAAAA,OAAO,EAAPA,OAAAA;KACD,CAAA;AACH,GAAC,EAAE,CAACwC,KAAK,EAAExC,OAAO,CAAC,CAAC,CAAA;;AAEpB;AACA;AACA;AACA;EACAH,cAAK,CAACiF,eAAe,CAAC,YAAM;AAC1B,IAAA,IAAI,CAACN,UAAU,CAACO,OAAO,EAAE,OAAA;AAEzB,IAAA,IAAMC,KAAK,GAAGV,iBAAiB,EAA4B,CAAA;AAC3D,IAAA,KAAA,IAAAW,EAAA,GAAAC,CAAAA,EAAAA,YAAA,GAAkBC,MAAM,CAACC,IAAI,CAACJ,KAAK,CAAC,EAAAC,EAAA,GAAAC,YAAA,CAAAG,MAAA,EAAAJ,EAAA,EAAE,EAAA;AAAjC,MAAA,IAAMK,GAAG,GAAAJ,YAAA,CAAAD,EAAA,CAAA,CAAA;AACZ,MAAA,IAAIK,GAAG,CAACC,UAAU,CAAC,OAAO,CAAC,EAAE;QAC3Bf,UAAU,CAACO,OAAO,CAACS,YAAY,CAACF,GAAG,EAAEN,KAAK,CAACM,GAAG,CAAC,CAAC,CAAA;AAClD,OAAA;AACF,KAAA;AACF,GAAC,EAAE,CAAChB,iBAAiB,EAAEE,UAAU,CAAC,CAAC,CAAA;AAEnC,EAAA,oBACEiB,IAAA,CAACC,cAAc,CAACC,QAAQ,EAAA;AAAC9E,IAAAA,KAAK,EAAE+D,YAAa;AAAA7F,IAAAA,QAAA,gBAE1Cc,cAAK,CAAC+F,YAAY,CAAC7G,QAAQ,EAAA8G,aAAA,CAAA;AAC1BC,MAAAA,GAAG,EAAErB,SAAAA;AAAS,KAAA,EACXsB,UAAU,CAAChH,QAAQ,CAACiG,KAAK,EAAEV,iBAAiB,EAAE,CAAC,CACnD,CAAC,EACDb,SAAS,iBACRuC,GAAA,CAACC,cAAc,EAAA;MAAAlH,QAAA,eACbiH,GAAA,CAACE,oBAAoB,EAAA;AACnBC,QAAAA,YAAY,EAAE3G,eAAe,KAAA,IAAA,IAAfA,eAAe,KAAfA,KAAAA,CAAAA,GAAAA,eAAe,GAAII,sBAAuB;AACxD0C,QAAAA,OAAO,EAAEA,OAAQ;AACjB8D,QAAAA,KAAK,EAAE,IAAK;AACZC,QAAAA,MAAM,EAAE,IAAK;QAAAtH,QAAA,eAEbiH,GAAA,CAACM,OAAO,EAAAT,aAAA,CAAAA,aAAA,CAAAA,aAAA,CAAAA,aAAA,CAAA;UACNC,GAAG,EAAE1D,IAAI,CAACmE,WAAY;AACtBC,UAAAA,KAAK,EAAEnE,cAAAA;AACP;AAAA;AACAjD,UAAAA,MAAM,EAAEA,MAAAA;AAAO,SAAA,EACXmF,gBAAgB,EAAE,CAAA,EAClBkC,aAAa,CAAC;UAAEC,IAAI,EAAEC,aAAa,CAAClI,OAAAA;SAAS,CAAC,CAC9CmI,EAAAA,cAAc,CAAC;AAAEC,UAAAA,UAAU,EAAE7G,OAAAA;AAAQ,SAAC,CAAC,CAAA,EAAA,EAAA,EAAA;UAAAjB,QAAA,eAE3CiH,GAAA,CAACc,cAAc,EAAA;AACblI,YAAAA,KAAK,EAAEA,KAAM;AACbC,YAAAA,YAAY,EAAEA,YAAa;AAC3BC,YAAAA,MAAM,EAAEA,MAAO;AACf0H,YAAAA,KAAK,EAAE9C,MAAO;YACd3B,KAAK,eACHiE,GAAA,CAACe,UAAU,EAAA;AACTjB,cAAAA,GAAG,EAAE/F,QAAS;AACduC,cAAAA,OAAO,EAAEA,OAAQ;AACjB0E,cAAAA,KAAK,EAAE/E,WAAY;AACnBgF,cAAAA,MAAM,EAAEnF,YAAa;cACrBoF,SAAS,EAAEvH,KAAK,CAACwH,MAAM,CAACC,KAAK,CAACC,UAAU,CAACC,MAAO;cAChDC,WAAW,EAAE5H,KAAK,CAACwH,MAAM,CAACC,KAAK,CAACI,MAAM,CAACF,MAAAA;AAAO,aAC/C,CACF;AAAAvI,YAAAA,QAAA,EAEAJ,OAAAA;WACa,CAAA;SACT,CAAA,CAAA;OACW,CAAA;AAAC,KACT,CACjB,CAAA;AAAA,GACsB,CAAC,CAAA;AAE9B;;;;"}

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

@@ -9,7 +9,7 @@ import { useIsMobile } from '../../utils/useIsMobile.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
 import { isReactNative } from '../../utils/platform/isReactNative.js';
-import { Heading } from '../Typography/Heading/Heading.js';
+import { Text } from '../Typography/Text/Text.js';
 
 /* eslint-disable @typescript-eslint/prefer-nullish-coalescing */
 var PopoverHeader = function PopoverHeader(_ref) {
@@ -40,10 +40,9 @@ var PopoverHeader = function PopoverHeader(_ref) {
     }) : null, title ? /*#__PURE__*/jsx(BaseBox, {
       id: titleId,
       paddingRight: "spacing.4",
-      children: /*#__PURE__*/jsx(Heading, {
-        size: "small",
-        weight: "bold",
-        type: "normal",
+      children: /*#__PURE__*/jsx(Text, {
+        size: "large",
+        weight: "semibold",
         children: title
       })
     }) : null, /*#__PURE__*/jsx(BaseBox, {

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 { Heading } 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 => {\n  const { titleId } = usePopoverContext();\n\n  const isFloating = !(title || titleLeading);\n  if (isFloating) {\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          <Heading size=\"small\" weight=\"bold\" type=\"normal\">\n            {title}\n          </Heading>\n        </BaseBox>\n      ) : null}\n      <BaseBox marginLeft=\"auto\">\n        <PopoverCloseButton />\n      </BaseBox>\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","isFloating","_jsx","BaseBox","borderRadius","position","padding","top","right","zIndex","children","PopoverCloseButton","_jsxs","display","flexDirection","flexWrap","isReactNative","alignItems","gap","React","cloneElement","size","id","paddingRight","Heading","weight","type","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 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 => {\n  const { titleId } = usePopoverContext();\n\n  const isFloating = !(title || titleLeading);\n  if (isFloating) {\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      <BaseBox marginLeft=\"auto\">\n        <PopoverCloseButton />\n      </BaseBox>\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","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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"}

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

@@ -6,7 +6,9 @@ import { usePopoverContext } from './PopoverContext.js';
 import '../../utils/metaAttribute/index.js';
 import '../../utils/makeAccessible/index.js';
 import { useMemoizedStyles } from '../Box/BaseBox/useMemoizedStyles.web.js';
+import '../../utils/getFocusRingStyles/index.js';
 import { jsx } from 'react/jsx-runtime';
+import { getFocusRingStyles } from '../../utils/getFocusRingStyles/getFocusRingStyles.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';
@@ -25,11 +27,9 @@ var StyledPopoverInteractiveWrapper = /*#__PURE__*/styled.button.withConfig({
     appearance: 'none',
     cursor: 'pointer',
     lineHeight: 0,
-    '&:focus-visible': {
-      // TODO: refactor to use focus ring token
-      outline: 'none',
-      boxShadow: "0px 0px 0px 4px ".concat(props.theme.colors.brand.primary[400])
-    }
+    '&:focus-visible': _objectSpread({}, getFocusRingStyles({
+      theme: props.theme
+    }))
   });
 });
 var PopoverInteractiveWrapper = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {

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

@@ -1 +1 @@
-{"version":3,"file":"PopoverInteractiveWrapper.web.js","sources":["../../../../../../src/components/Popover/PopoverInteractiveWrapper.web.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport React from 'react';\nimport { usePopoverContext } from './PopoverContext';\nimport type { BaseBoxProps } from '~components/Box/BaseBox';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { makeAccessible } from '~utils/makeAccessible';\nimport { useMemoizedStyles } from '~components/Box/BaseBox/useMemoizedStyles';\n\nconst StyledPopoverInteractiveWrapper = styled.button((props) => {\n  const cssObject = useMemoizedStyles(props as never);\n\n  return {\n    all: 'unset',\n    ...cssObject,\n    appearance: 'none',\n    cursor: 'pointer',\n    lineHeight: 0,\n    '&:focus-visible': {\n      // TODO: refactor to use focus ring token\n      outline: 'none',\n      boxShadow: `0px 0px 0px 4px ${props.theme.colors.brand.primary[400]}`,\n    },\n  };\n});\n\ntype PopoverInteractiveWrapper = {\n  /**\n   * A label for screen readers to announce when the popover is opened.\n   */\n  accessibilityLabel?: string;\n  /**\n   * The content of the PopoverInteractiveWrapper.\n   */\n  children?: React.ReactNode;\n  onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;\n  onKeyDown?: (event: React.KeyboardEvent<HTMLButtonElement>) => void;\n} & Omit<BaseBoxProps, 'as'>;\n\nconst PopoverInteractiveWrapper = React.forwardRef<HTMLButtonElement, PopoverInteractiveWrapper>(\n  ({ accessibilityLabel, ...props }, ref) => {\n    usePopoverContext();\n\n    return (\n      <StyledPopoverInteractiveWrapper\n        ref={ref}\n        display={props.display || 'inline-block'}\n        {...props}\n        {...metaAttribute({\n          testID: 'popover-interactive-wrapper',\n          name: MetaConstants.PopoverInteractiveWrapper,\n        })}\n        {...makeAccessible({\n          label: accessibilityLabel,\n        })}\n      />\n    );\n  },\n);\n\nexport { PopoverInteractiveWrapper };\n"],"names":["StyledPopoverInteractiveWrapper","styled","button","withConfig","displayName","componentId","props","cssObject","useMemoizedStyles","_objectSpread","all","appearance","cursor","lineHeight","outline","boxShadow","concat","theme","colors","brand","primary","PopoverInteractiveWrapper","React","forwardRef","_ref","ref","accessibilityLabel","_objectWithoutProperties","_excluded","usePopoverContext","_jsx","display","metaAttribute","testID","name","MetaConstants","makeAccessible","label"],"mappings":";;;;;;;;;;;;;;;;AAQA,IAAMA,+BAA+B,gBAAGC,MAAM,CAACC,MAAM,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,+DAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CAAC,CAAA,CAAA,UAACC,KAAK,EAAK;AAC/D,EAAA,IAAMC,SAAS,GAAGC,iBAAiB,CAACF,KAAc,CAAC,CAAA;EAEnD,OAAAG,aAAA,CAAAA,aAAA,CAAA;AACEC,IAAAA,GAAG,EAAE,OAAA;AAAO,GAAA,EACTH,SAAS,CAAA,EAAA,EAAA,EAAA;AACZI,IAAAA,UAAU,EAAE,MAAM;AAClBC,IAAAA,MAAM,EAAE,SAAS;AACjBC,IAAAA,UAAU,EAAE,CAAC;AACb,IAAA,iBAAiB,EAAE;AACjB;AACAC,MAAAA,OAAO,EAAE,MAAM;AACfC,MAAAA,SAAS,EAAAC,kBAAAA,CAAAA,MAAA,CAAqBV,KAAK,CAACW,KAAK,CAACC,MAAM,CAACC,KAAK,CAACC,OAAO,CAAC,GAAG,CAAC,CAAA;AACrE,KAAA;AAAC,GAAA,CAAA,CAAA;AAEL,CAAC,CAAC,CAAA;AAeIC,IAAAA,yBAAyB,gBAAGC,cAAK,CAACC,UAAU,CAChD,UAAAC,IAAA,EAAmCC,GAAG,EAAK;AAAA,EAAA,IAAxCC,kBAAkB,GAAAF,IAAA,CAAlBE,kBAAkB;AAAKpB,IAAAA,KAAK,GAAAqB,wBAAA,CAAAH,IAAA,EAAAI,SAAA,CAAA,CAAA;AAC7BC,EAAAA,iBAAiB,EAAE,CAAA;EAEnB,oBACEC,GAAA,CAAC9B,+BAA+B,EAAAS,aAAA,CAAAA,aAAA,CAAAA,aAAA,CAAA;AAC9BgB,IAAAA,GAAG,EAAEA,GAAI;AACTM,IAAAA,OAAO,EAAEzB,KAAK,CAACyB,OAAO,IAAI,cAAA;GACtBzB,EAAAA,KAAK,CACL0B,EAAAA,aAAa,CAAC;AAChBC,IAAAA,MAAM,EAAE,6BAA6B;IACrCC,IAAI,EAAEC,aAAa,CAACd,yBAAAA;GACrB,CAAC,CACEe,EAAAA,cAAc,CAAC;AACjBC,IAAAA,KAAK,EAAEX,kBAAAA;GACR,CAAC,CACH,CAAC,CAAA;AAEN,CACF;;;;"}
+{"version":3,"file":"PopoverInteractiveWrapper.web.js","sources":["../../../../../../src/components/Popover/PopoverInteractiveWrapper.web.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport React from 'react';\nimport { usePopoverContext } from './PopoverContext';\nimport type { BaseBoxProps } from '~components/Box/BaseBox';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { makeAccessible } from '~utils/makeAccessible';\nimport { useMemoizedStyles } from '~components/Box/BaseBox/useMemoizedStyles';\nimport { getFocusRingStyles } from '~utils/getFocusRingStyles';\n\nconst StyledPopoverInteractiveWrapper = styled.button((props) => {\n  const cssObject = useMemoizedStyles(props as never);\n\n  return {\n    all: 'unset',\n    ...cssObject,\n    appearance: 'none',\n    cursor: 'pointer',\n    lineHeight: 0,\n    '&:focus-visible': {\n      ...getFocusRingStyles({ theme: props.theme }),\n    },\n  };\n});\n\ntype PopoverInteractiveWrapper = {\n  /**\n   * A label for screen readers to announce when the popover is opened.\n   */\n  accessibilityLabel?: string;\n  /**\n   * The content of the PopoverInteractiveWrapper.\n   */\n  children?: React.ReactNode;\n  onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;\n  onKeyDown?: (event: React.KeyboardEvent<HTMLButtonElement>) => void;\n} & Omit<BaseBoxProps, 'as'>;\n\nconst PopoverInteractiveWrapper = React.forwardRef<HTMLButtonElement, PopoverInteractiveWrapper>(\n  ({ accessibilityLabel, ...props }, ref) => {\n    usePopoverContext();\n\n    return (\n      <StyledPopoverInteractiveWrapper\n        ref={ref}\n        display={props.display || 'inline-block'}\n        {...props}\n        {...metaAttribute({\n          testID: 'popover-interactive-wrapper',\n          name: MetaConstants.PopoverInteractiveWrapper,\n        })}\n        {...makeAccessible({\n          label: accessibilityLabel,\n        })}\n      />\n    );\n  },\n);\n\nexport { PopoverInteractiveWrapper };\n"],"names":["StyledPopoverInteractiveWrapper","styled","button","withConfig","displayName","componentId","props","cssObject","useMemoizedStyles","_objectSpread","all","appearance","cursor","lineHeight","getFocusRingStyles","theme","PopoverInteractiveWrapper","React","forwardRef","_ref","ref","accessibilityLabel","_objectWithoutProperties","_excluded","usePopoverContext","_jsx","display","metaAttribute","testID","name","MetaConstants","makeAccessible","label"],"mappings":";;;;;;;;;;;;;;;;;;AASA,IAAMA,+BAA+B,gBAAGC,MAAM,CAACC,MAAM,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,+DAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CAAC,CAAA,CAAA,UAACC,KAAK,EAAK;AAC/D,EAAA,IAAMC,SAAS,GAAGC,iBAAiB,CAACF,KAAc,CAAC,CAAA;EAEnD,OAAAG,aAAA,CAAAA,aAAA,CAAA;AACEC,IAAAA,GAAG,EAAE,OAAA;AAAO,GAAA,EACTH,SAAS,CAAA,EAAA,EAAA,EAAA;AACZI,IAAAA,UAAU,EAAE,MAAM;AAClBC,IAAAA,MAAM,EAAE,SAAS;AACjBC,IAAAA,UAAU,EAAE,CAAC;AACb,IAAA,iBAAiB,EAAAJ,aAAA,CACZK,EAAAA,EAAAA,kBAAkB,CAAC;MAAEC,KAAK,EAAET,KAAK,CAACS,KAAAA;AAAM,KAAC,CAAC,CAAA;AAC9C,GAAA,CAAA,CAAA;AAEL,CAAC,CAAC,CAAA;AAeIC,IAAAA,yBAAyB,gBAAGC,cAAK,CAACC,UAAU,CAChD,UAAAC,IAAA,EAAmCC,GAAG,EAAK;AAAA,EAAA,IAAxCC,kBAAkB,GAAAF,IAAA,CAAlBE,kBAAkB;AAAKf,IAAAA,KAAK,GAAAgB,wBAAA,CAAAH,IAAA,EAAAI,SAAA,CAAA,CAAA;AAC7BC,EAAAA,iBAAiB,EAAE,CAAA;EAEnB,oBACEC,GAAA,CAACzB,+BAA+B,EAAAS,aAAA,CAAAA,aAAA,CAAAA,aAAA,CAAA;AAC9BW,IAAAA,GAAG,EAAEA,GAAI;AACTM,IAAAA,OAAO,EAAEpB,KAAK,CAACoB,OAAO,IAAI,cAAA;GACtBpB,EAAAA,KAAK,CACLqB,EAAAA,aAAa,CAAC;AAChBC,IAAAA,MAAM,EAAE,6BAA6B;IACrCC,IAAI,EAAEC,aAAa,CAACd,yBAAAA;GACrB,CAAC,CACEe,EAAAA,cAAc,CAAC;AACjBC,IAAAA,KAAK,EAAEX,kBAAAA;GACR,CAAC,CACH,CAAC,CAAA;AAEN,CACF;;;;"}

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

@@ -15,10 +15,10 @@ var getPopoverContentWrapperStyles = function getPopoverContentWrapperStyles(_re
     width: '100%',
     maxWidth: makeSpace(isMobile ? 288 : 328),
     position: isReactNative() ? 'absolute' : 'relative',
-    backgroundColor: theme.colors.surface.popup.background,
+    backgroundColor: theme.colors.popup.background.subtle,
     borderWidth: makeBorderSize(theme.border.width.thin),
     borderRadius: makeBorderSize(theme.border.radius.large),
-    borderColor: theme.colors.brand.gray[400].lowContrast,
+    borderColor: theme.colors.popup.border.subtle,
     borderStyle: 'solid',
     boxShadow: isReactNative() ? undefined : castWebType(theme.elevation.midRaised)
   }, 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.surface.popup.background,\n    borderWidth: makeBorderSize(theme.border.width.thin),\n    borderRadius: makeBorderSize(theme.border.radius.large),\n    borderColor: theme.colors.brand.gray[400].lowContrast,\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","surface","popup","background","borderWidth","makeBorderSize","border","thin","borderRadius","radius","large","borderColor","brand","gray","lowContrast","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,OAAO,CAACC,KAAK,CAACC,UAAU;IACtDC,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;AACvDC,IAAAA,WAAW,EAAErB,KAAK,CAACU,MAAM,CAACY,KAAK,CAACC,IAAI,CAAC,GAAG,CAAC,CAACC,WAAW;AACrDC,IAAAA,WAAW,EAAE,OAAO;AACpBC,IAAAA,SAAS,EAAElB,aAAa,EAAE,GAAGmB,SAAS,GAAGC,WAAW,CAAC5B,KAAK,CAAC6B,SAAS,CAACC,SAAS,CAAA;AAAC,GAAA,EAC5E7B,MAAM,CAAA,CAAA;AAEb;;;;"}
+{"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;;;;"}

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

@@ -2,7 +2,6 @@ import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { ProgressBarFilled } from './ProgressBarFilled.web.js';
 import clamp from '../../utils/lodashButBetter/clamp.js';
-import '../Form/index.js';
 import '../../utils/metaAttribute/index.js';
 import '../Typography/Text/index.js';
 import '../Box/styledProps/index.js';
@@ -21,12 +20,11 @@ import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
 import { getStyledProps } from '../Box/styledProps/getStyledProps.js';
 import { metaAttribute } from '../../utils/metaAttribute/metaAttribute.web.js';
 import { MetaConstants } from '../../utils/metaAttribute/metaConstants.js';
-import { FormLabel } from '../Form/FormLabel.js';
 import { Text } from '../Typography/Text/Text.js';
 import { makeAccessible } from '../../utils/makeAccessible/makeAccessible.web.js';
 import { makeSize } from '../../utils/makeSize/makeSize.js';
 
-var _excluded = ["accessibilityLabel", "contrast", "intent", "isIndeterminate", "label", "showPercentage", "size", "value", "variant", "min", "max", "testID"];
+var _excluded = ["accessibilityLabel", "color", "isIndeterminate", "label", "showPercentage", "size", "value", "variant", "min", "max", "testID"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var progressBarHeight = {
@@ -36,9 +34,7 @@ var progressBarHeight = {
 var ProgressBar = function ProgressBar(_ref) {
   var _label$trim;
   var accessibilityLabel = _ref.accessibilityLabel,
-    _ref$contrast = _ref.contrast,
-    contrast = _ref$contrast === void 0 ? 'low' : _ref$contrast,
-    intent = _ref.intent,
+    color = _ref.color,
     _ref$isIndeterminate = _ref.isIndeterminate,
     isIndeterminate = _ref$isIndeterminate === void 0 ? false : _ref$isIndeterminate,
     label = _ref.label,
@@ -67,8 +63,8 @@ var ProgressBar = function ProgressBar(_ref) {
       });
     }
   }
-  var unfilledBackgroundColor = theme.colors.brand.gray.a100["".concat(contrast, "Contrast")];
-  var filledBackgroundColor = intent ? theme.colors.feedback.background[intent].highContrast : theme.colors.brand.primary[500];
+  var unfilledBackgroundColor = theme.colors.feedback.background.neutral.subtle;
+  var filledBackgroundColor = color ? theme.colors.feedback.background[color].intense : theme.colors.surface.background.primary.intense;
   var hasLabel = label && ((_label$trim = label.trim()) === null || _label$trim === void 0 ? void 0 : _label$trim.length) > 0;
   var isMeter = variant === 'meter';
   var progressValue = clamp(value, min, max);
@@ -105,18 +101,18 @@ var ProgressBar = function ProgressBar(_ref) {
         display: "flex",
         flexDirection: "row",
         justifyContent: hasLabel ? 'space-between' : 'flex-end',
-        children: [hasLabel ? /*#__PURE__*/jsx(FormLabel, {
+        children: [hasLabel ? /*#__PURE__*/jsx(Text, {
           as: "label",
-          htmlFor: id,
-          contrast: contrast,
+          variant: "body",
+          size: "small",
+          color: "surface.text.gray.subtle",
           children: label
         }) : null, shouldShowPercentage ? /*#__PURE__*/jsx(BaseBox, {
           marginBottom: "spacing.2",
           children: /*#__PURE__*/jsx(Text, {
-            type: "subdued",
             variant: "body",
-            contrast: contrast,
             size: "small",
+            color: "surface.text.gray.subtle",
             children: "".concat(percentageProgressValue, "%")
           })
         }) : null]