@razorpay/blade 10.23.5 → 11.0.0

package/build/lib/web/production/components/Button/IconButton/StyledIconButton.web.js

@@ -5,9 +5,11 @@ import '../../../utils/index.js';
 import '../../../utils/metaAttribute/index.js';
 import '../../../utils/makeAccessible/index.js';
 import '../../../utils/makeMotionTime/index.web.js';
+import '../../../utils/getFocusRingStyles/index.js';
 import { jsx } from 'react/jsx-runtime';
 import { castWebType } from '../../../utils/platform/castUtils.js';
 import { makeMotionTime } from '../../../utils/makeMotionTime/makeMotionTime.web.js';
+import { getFocusRingStyles } from '../../../utils/getFocusRingStyles/getFocusRingStyles.web.js';
 import { makeAccessible } from '../../../utils/makeAccessible/makeAccessible.web.js';
 import { metaAttribute } from '../../../utils/metaAttribute/metaAttribute.web.js';
 import { MetaConstants } from '../../../utils/metaAttribute/metaConstants.js';
@@ -19,10 +21,9 @@ var StyledButton = /*#__PURE__*/styled.button.withConfig({
   componentId: "sc-1f4cg7d-0"
 })(function (props) {
   var theme = props.theme,
-    contrast = props.contrast;
-  var iconColorToken = theme.colors.surface.action.icon;
-  var contrastToken = contrast === 'high' ? 'highContrast' : 'lowContrast';
+    emphasis = props.emphasis;
   var motionToken = theme.motion;
+  var emphasisColor = emphasis === 'intense' ? 'gray' : 'staticWhite';
   return {
     border: 'none',
     cursor: props.disabled ? 'not-allowed' : 'pointer',
@@ -32,20 +33,20 @@ var StyledButton = /*#__PURE__*/styled.button.withConfig({
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
-    color: iconColorToken["default"][contrastToken],
+    color: props.disabled ? theme.colors.interactive.icon[emphasisColor].disabled : theme.colors.interactive.icon[emphasisColor].muted,
     transitionProperty: 'color, box-shadow',
     transitionDuration: castWebType(makeMotionTime(motionToken.duration.xquick)),
     transitionTimingFunction: motionToken.easing.standard.effective,
     '&:hover': {
-      color: iconColorToken.hover[contrastToken]
-    },
-    '&:focus-visible': {
-      outline: 'none',
-      boxShadow: "0px 0px 0px 4px ".concat(theme.colors.brand.primary[400]),
-      color: iconColorToken.focus[contrastToken]
+      color: theme.colors.interactive.icon[emphasisColor].subtle
     },
+    '&:focus-visible': _objectSpread(_objectSpread({}, getFocusRingStyles({
+      theme: theme
+    })), {}, {
+      color: theme.colors.interactive.icon[emphasisColor].subtle
+    }),
     '&:active': {
-      color: iconColorToken.active[contrastToken]
+      color: theme.colors.interactive.icon[emphasisColor].subtle
     }
   };
 });
@@ -53,7 +54,7 @@ var StyledIconButton = /*#__PURE__*/React__default.forwardRef(function (_ref, re
   var Icon = _ref.icon,
     onClick = _ref.onClick,
     size = _ref.size,
-    contrast = _ref.contrast,
+    emphasis = _ref.emphasis,
     accessibilityLabel = _ref.accessibilityLabel,
     isDisabled = _ref.isDisabled,
     testID = _ref.testID,
@@ -69,7 +70,7 @@ var StyledIconButton = /*#__PURE__*/React__default.forwardRef(function (_ref, re
   return /*#__PURE__*/jsx(StyledButton, _objectSpread(_objectSpread(_objectSpread({
     ref: ref,
     onClick: castWebType(onClick),
-    contrast: contrast,
+    emphasis: emphasis,
     type: "button",
     onBlur: onBlur,
     onFocus: onFocus,
@@ -89,7 +90,7 @@ var StyledIconButton = /*#__PURE__*/React__default.forwardRef(function (_ref, re
   })), {}, {
     children: /*#__PURE__*/jsx(Icon, {
       size: size,
-      color: isDisabled ? 'surface.action.icon.disabled.lowContrast' : 'currentColor'
+      color: isDisabled ? 'interactive.icon.gray.disabled' : 'currentColor'
     })
   }));
 });

package/build/lib/web/production/components/Button/IconButton/StyledIconButton.web.js.map

@@ -1 +1 @@
-{"version":3,"file":"StyledIconButton.web.js","sources":["../../../../../../../src/components/Button/IconButton/StyledIconButton.web.tsx"],"sourcesContent":["/* eslint-disable react/display-name */\nimport styled from 'styled-components';\nimport type { ReactElement } from 'react';\nimport React from 'react';\nimport type { StyledIconButtonProps } from './types';\nimport { castWebType } from '~utils';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport type { ColorContrastTypes } from '~tokens/theme/theme';\nimport { makeAccessible } from '~utils/makeAccessible';\nimport { makeMotionTime } from '~utils/makeMotionTime';\n\ntype StyledButtonProps = {\n  contrast: ColorContrastTypes;\n};\n\nconst StyledButton = styled.button<StyledButtonProps>((props) => {\n  const { theme, contrast } = props;\n  const iconColorToken = theme.colors.surface.action.icon;\n  const contrastToken = contrast === 'high' ? 'highContrast' : 'lowContrast';\n  const motionToken = theme.motion;\n\n  return {\n    border: 'none',\n    cursor: props.disabled ? 'not-allowed' : 'pointer',\n    padding: 0,\n    borderRadius: theme.border.radius.small,\n    background: 'transparent',\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    color: iconColorToken.default[contrastToken],\n    transitionProperty: 'color, box-shadow',\n    transitionDuration: castWebType(makeMotionTime(motionToken.duration.xquick)),\n    transitionTimingFunction: motionToken.easing.standard.effective as string,\n\n    '&:hover': {\n      color: iconColorToken.hover[contrastToken],\n    },\n\n    '&:focus-visible': {\n      outline: 'none',\n      boxShadow: `0px 0px 0px 4px ${theme.colors.brand.primary[400]}`,\n      color: iconColorToken.focus[contrastToken],\n    },\n\n    '&:active': {\n      color: iconColorToken.active[contrastToken],\n    },\n  };\n});\n\nconst StyledIconButton = React.forwardRef<HTMLButtonElement, StyledIconButtonProps>(\n  (\n    {\n      icon: Icon,\n      onClick,\n      size,\n      contrast,\n      accessibilityLabel,\n      isDisabled,\n      testID,\n      onBlur,\n      onFocus,\n      onMouseLeave,\n      onMouseMove,\n      onPointerDown,\n      onPointerEnter,\n      onTouchEnd,\n      onTouchStart,\n      tabIndex,\n    },\n    ref,\n  ): ReactElement => (\n    <StyledButton\n      ref={ref}\n      onClick={castWebType(onClick)}\n      contrast={contrast}\n      type=\"button\"\n      onBlur={onBlur}\n      onFocus={onFocus}\n      onMouseLeave={onMouseLeave}\n      onMouseMove={onMouseMove}\n      onPointerDown={onPointerDown}\n      onPointerEnter={onPointerEnter}\n      onTouchEnd={onTouchEnd}\n      onTouchStart={onTouchStart}\n      disabled={isDisabled}\n      tabIndex={tabIndex}\n      {...makeAccessible({ label: accessibilityLabel })}\n      {...metaAttribute({ name: MetaConstants.IconButton, testID })}\n    >\n      <Icon\n        size={size}\n        color={isDisabled ? 'surface.action.icon.disabled.lowContrast' : 'currentColor'}\n      />\n    </StyledButton>\n  ),\n);\n\nexport default StyledIconButton;\n"],"names":["StyledButton","styled","button","withConfig","displayName","componentId","props","theme","contrast","iconColorToken","colors","surface","action","icon","contrastToken","motionToken","motion","border","cursor","disabled","padding","borderRadius","radius","small","background","display","alignItems","justifyContent","color","transitionProperty","transitionDuration","castWebType","makeMotionTime","duration","xquick","transitionTimingFunction","easing","standard","effective","hover","outline","boxShadow","concat","brand","primary","focus","active","StyledIconButton","React","forwardRef","_ref","ref","Icon","onClick","size","accessibilityLabel","isDisabled","testID","onBlur","onFocus","onMouseLeave","onMouseMove","onPointerDown","onPointerEnter","onTouchEnd","onTouchStart","tabIndex","_jsx","_objectSpread","type","makeAccessible","label","metaAttribute","name","MetaConstants","IconButton","children"],"mappings":"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"}
+{"version":3,"file":"StyledIconButton.web.js","sources":["../../../../../../../src/components/Button/IconButton/StyledIconButton.web.tsx"],"sourcesContent":["/* eslint-disable react/display-name */\nimport styled from 'styled-components';\nimport type { ReactElement } from 'react';\nimport React from 'react';\nimport type { StyledIconButtonProps } from './types';\nimport { castWebType } from '~utils';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport type { SubtleOrIntense } from '~tokens/theme/theme';\nimport { makeAccessible } from '~utils/makeAccessible';\nimport { makeMotionTime } from '~utils/makeMotionTime';\nimport { getFocusRingStyles } from '~utils/getFocusRingStyles';\n\ntype StyledButtonProps = {\n  emphasis: SubtleOrIntense;\n};\n\nconst StyledButton = styled.button<StyledButtonProps>((props) => {\n  const { theme, emphasis } = props;\n  const motionToken = theme.motion;\n\n  const emphasisColor = emphasis === 'intense' ? 'gray' : 'staticWhite';\n\n  return {\n    border: 'none',\n    cursor: props.disabled ? 'not-allowed' : 'pointer',\n    padding: 0,\n    borderRadius: theme.border.radius.small,\n    background: 'transparent',\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    color: props.disabled\n      ? theme.colors.interactive.icon[emphasisColor].disabled\n      : theme.colors.interactive.icon[emphasisColor].muted,\n    transitionProperty: 'color, box-shadow',\n    transitionDuration: castWebType(makeMotionTime(motionToken.duration.xquick)),\n    transitionTimingFunction: motionToken.easing.standard.effective as string,\n\n    '&:hover': {\n      color: theme.colors.interactive.icon[emphasisColor].subtle,\n    },\n\n    '&:focus-visible': {\n      ...getFocusRingStyles({ theme }),\n      color: theme.colors.interactive.icon[emphasisColor].subtle,\n    },\n\n    '&:active': {\n      color: theme.colors.interactive.icon[emphasisColor].subtle,\n    },\n  };\n});\n\nconst StyledIconButton = React.forwardRef<HTMLButtonElement, StyledIconButtonProps>(\n  (\n    {\n      icon: Icon,\n      onClick,\n      size,\n      emphasis,\n      accessibilityLabel,\n      isDisabled,\n      testID,\n      onBlur,\n      onFocus,\n      onMouseLeave,\n      onMouseMove,\n      onPointerDown,\n      onPointerEnter,\n      onTouchEnd,\n      onTouchStart,\n      tabIndex,\n    },\n    ref,\n  ): ReactElement => (\n    <StyledButton\n      ref={ref}\n      onClick={castWebType(onClick)}\n      emphasis={emphasis}\n      type=\"button\"\n      onBlur={onBlur}\n      onFocus={onFocus}\n      onMouseLeave={onMouseLeave}\n      onMouseMove={onMouseMove}\n      onPointerDown={onPointerDown}\n      onPointerEnter={onPointerEnter}\n      onTouchEnd={onTouchEnd}\n      onTouchStart={onTouchStart}\n      disabled={isDisabled}\n      tabIndex={tabIndex}\n      {...makeAccessible({ label: accessibilityLabel })}\n      {...metaAttribute({ name: MetaConstants.IconButton, testID })}\n    >\n      <Icon size={size} color={isDisabled ? 'interactive.icon.gray.disabled' : 'currentColor'} />\n    </StyledButton>\n  ),\n);\n\nexport default StyledIconButton;\n"],"names":["StyledButton","styled","button","withConfig","displayName","componentId","props","theme","emphasis","motionToken","motion","emphasisColor","border","cursor","disabled","padding","borderRadius","radius","small","background","display","alignItems","justifyContent","color","colors","interactive","icon","muted","transitionProperty","transitionDuration","castWebType","makeMotionTime","duration","xquick","transitionTimingFunction","easing","standard","effective","subtle","_objectSpread","getFocusRingStyles","StyledIconButton","React","forwardRef","_ref","ref","Icon","onClick","size","accessibilityLabel","isDisabled","testID","onBlur","onFocus","onMouseLeave","onMouseMove","onPointerDown","onPointerEnter","onTouchEnd","onTouchStart","tabIndex","_jsx","type","makeAccessible","label","metaAttribute","name","MetaConstants","IconButton","children"],"mappings":"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"}

package/build/lib/web/production/components/Card/Card.js

@@ -23,7 +23,7 @@ import { getStyledProps } from '../Box/styledProps/getStyledProps.js';
 import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
 import { assignWithoutSideEffects } from '../../utils/assignWithoutSideEffects/assignWithoutSideEffects.js';
 
-var _excluded = ["children", "surfaceLevel", "elevation", "testID", "padding", "width", "height", "minHeight", "minWidth", "onClick", "isSelected", "accessibilityLabel", "shouldScaleOnHover", "onHover", "href", "target", "rel", "as"];
+var _excluded = ["children", "backgroundColor", "borderRadius", "elevation", "testID", "padding", "width", "height", "minHeight", "minWidth", "onClick", "isSelected", "accessibilityLabel", "shouldScaleOnHover", "onHover", "href", "target", "rel", "as"];
 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 ComponentIds = {
@@ -37,14 +37,17 @@ var ComponentIds = {
   CardHeaderIcon: 'CardHeaderIcon',
   CardHeaderCounter: 'CardHeaderCounter',
   CardHeaderBadge: 'CardHeaderBadge',
+  CardHeaderAmount: 'CardHeaderAmount',
   CardHeaderText: 'CardHeaderText',
   CardHeaderLink: 'CardHeaderLink',
   CardHeaderIconButton: 'CardHeaderIconButton'
 };
 var Card = function Card(_ref) {
   var children = _ref.children,
-    _ref$surfaceLevel = _ref.surfaceLevel,
-    surfaceLevel = _ref$surfaceLevel === void 0 ? 2 : _ref$surfaceLevel,
+    _ref$backgroundColor = _ref.backgroundColor,
+    backgroundColor = _ref$backgroundColor === void 0 ? 'surface.background.gray.intense' : _ref$backgroundColor,
+    _ref$borderRadius = _ref.borderRadius,
+    borderRadius = _ref$borderRadius === void 0 ? 'medium' : _ref$borderRadius,
     _ref$elevation = _ref.elevation,
     elevation = _ref$elevation === void 0 ? 'lowRaised' : _ref$elevation,
     testID = _ref.testID,
@@ -115,10 +118,10 @@ var Card = function Card(_ref) {
         height: height,
         minHeight: minHeight,
         padding: padding,
-        borderRadius: "medium",
-        surfaceLevel: surfaceLevel,
+        borderRadius: borderRadius,
         elevation: elevation,
         textAlign: 'left',
+        backgroundColor: backgroundColor,
         children: [href ? /*#__PURE__*/jsx(LinkOverlay, _objectSpread({
           onClick: onClick,
           href: href,

package/build/lib/web/production/components/Card/Card.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card.js","sources":["../../../../../../src/components/Card/Card.tsx"],"sourcesContent":["import React from 'react';\nimport type { GestureResponderEvent } from 'react-native';\nimport { CardSurface } from './CardSurface';\nimport { CardProvider, useVerifyInsideCard } from './CardContext';\nimport { LinkOverlay } from './LinkOverlay';\nimport { CardRoot } from './CardRoot';\nimport type { LinkOverlayProps } from './types';\nimport { CARD_LINK_OVERLAY_ID } from './constants';\nimport type { SpacingValueType } from '~components/Box/BaseBox';\nimport BaseBox from '~components/Box/BaseBox';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport type { StyledPropsBlade } from '~components/Box/styledProps';\nimport type { TestID } from '~utils/types';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport type { Elevation } from '~tokens/global';\nimport type { SurfaceLevels } from '~tokens/theme/theme';\nimport type { BoxProps } from '~components/Box';\nimport { makeAccessible } from '~utils/makeAccessible';\nimport { useVerifyAllowedChildren } from '~utils/useVerifyAllowedChildren/useVerifyAllowedChildren';\nimport type { Platform } from '~utils';\nimport { isReactNative } from '~utils';\n\nexport const ComponentIds = {\n  CardHeader: 'CardHeader',\n  CardHeaderTrailing: 'CardHeaderTrailing',\n  CardHeaderLeading: 'CardHeaderLeading',\n  CardFooter: 'CardFooter',\n  CardFooterTrailing: 'CardFooterTrailing',\n  CardFooterLeading: 'CardFooterLeading',\n  CardBody: 'CardBody',\n  CardHeaderIcon: 'CardHeaderIcon',\n  CardHeaderCounter: 'CardHeaderCounter',\n  CardHeaderBadge: 'CardHeaderBadge',\n  CardHeaderText: 'CardHeaderText',\n  CardHeaderLink: 'CardHeaderLink',\n  CardHeaderIconButton: 'CardHeaderIconButton',\n};\n\nexport type CardProps = {\n  /**\n   * Card contents\n   */\n  children: React.ReactNode;\n  /**\n   * Sets the background color of the Card according to the surface level tokens\n   *\n   * eg: `theme.colors.surface.background.level1`\n   *\n   * @default `2`\n   *\n   * **Description:**\n   *\n   * - 2: Used in layouts which are on top of the main background\n   * - 3: Used over the cards template or as a text input backgrounds.\n   *\n   * **Links:**\n   * - Docs: https://blade.razorpay.com/?path=/docs/tokens-colors--page#-theme-tokens\n   */\n  surfaceLevel?: Exclude<SurfaceLevels, 1>;\n  /**\n   * Sets the elevation for Cards\n   *\n   * eg: `theme.elevation.midRaised`\n   *\n   * @default `theme.elevation.lowRaised`\n   *\n   * **Links:**\n   * - Docs: https://blade.razorpay.com/?path=/docs/tokens-elevation--page\n   */\n  elevation?: keyof Elevation;\n  /**\n   * Sets the padding equally on all sides. Only few `spacing` tokens are allowed deliberately\n   * @default `spacing.7`\n   *\n   * **Links:**\n   * - Docs: https://blade.razorpay.com/?path=/docs/tokens-spacing--page\n   */\n  padding?: Extract<SpacingValueType, 'spacing.0' | 'spacing.3' | 'spacing.5' | 'spacing.7'>;\n  /**\n   * Sets the width of the card\n   */\n  width?: BoxProps['width'];\n  /**\n   * Sets the height of the card\n   */\n  height?: BoxProps['height'];\n  /**\n   * Sets minimum height of the card\n   */\n  minHeight?: BoxProps['minHeight'];\n  /**\n   * Sets minimum width of the card\n   */\n  minWidth?: BoxProps['minWidth'];\n  /**\n   * If `true`, the card will be in selected state\n   * Card will have a primary color border around it.\n   *\n   * @default false\n   */\n\n  isSelected?: boolean;\n  /**\n   * Makes the Card linkable by setting the `href` prop\n   *\n   * @default undefined\n   */\n  href?: string;\n  /**\n   * Sets the `target` attribute for the linkable card\n   */\n  target?: string;\n  /**\n   * Sets the `rel` attribute for the linkable card\n   */\n  rel?: string;\n  /**\n   * Sets the accessibility label for the card\n   * This is useful when the card has an `href` or `onClick` prop\n   * Setting this will announce the label when the card is focused\n   */\n  accessibilityLabel?: string;\n  /**\n   * If `true`, the card will scale up on hover\n   *\n   * On mobile devices it will scale down on press\n   *\n   * @default false\n   */\n  shouldScaleOnHover?: boolean;\n  /**\n   * Callback triggered when the card is hovered\n   */\n  onHover?: () => void;\n  /**\n   * Callback triggered when the card is clicked\n   */\n  onClick?: (\n    event: Platform.Select<{\n      web: React.MouseEvent;\n      native: GestureResponderEvent;\n    }>,\n  ) => void;\n  /**\n   * Sets the HTML element for the Card\n   *\n   * When `as` is set to `label`, the card will be rendered as a label element\n   * This can be used to create a custom checkbox or radio button using the card\n   *\n   * @default undefined\n   */\n  as?: 'label';\n} & TestID &\n  StyledPropsBlade;\n\nconst Card = ({\n  children,\n  surfaceLevel = 2,\n  elevation = 'lowRaised',\n  testID,\n  padding = 'spacing.7',\n  width,\n  height,\n  minHeight,\n  minWidth,\n  onClick,\n  isSelected = false,\n  accessibilityLabel,\n  shouldScaleOnHover = false,\n  onHover,\n  href,\n  target,\n  rel,\n  as,\n  ...styledProps\n}: CardProps): React.ReactElement => {\n  const [isFocused, setIsFocused] = React.useState(false);\n\n  useVerifyAllowedChildren({\n    children,\n    componentName: 'Card',\n    allowedComponents: [ComponentIds.CardHeader, ComponentIds.CardBody, ComponentIds.CardFooter],\n  });\n\n  const linkOverlayProps: LinkOverlayProps = {\n    ...metaAttribute({ name: CARD_LINK_OVERLAY_ID }),\n    ...makeAccessible({ label: accessibilityLabel, pressed: isSelected }),\n    onFocus: () => {\n      setIsFocused(true);\n    },\n    onBlur: () => {\n      setIsFocused(false);\n    },\n  };\n  const defaultRel = target && target === '_blank' ? 'noreferrer noopener' : undefined;\n\n  return (\n    <CardProvider>\n      <CardRoot\n        as={as}\n        display={'block' as never}\n        borderRadius=\"medium\"\n        onMouseEnter={onHover as never}\n        shouldScaleOnHover={shouldScaleOnHover}\n        isSelected={isSelected}\n        isFocused={isFocused}\n        // on react native we need to pass onClick to root, because we don't need the LinkOverlay in RN\n        onClick={isReactNative() ? onClick : undefined}\n        width={width}\n        height={height}\n        minHeight={minHeight}\n        minWidth={minWidth}\n        href={href}\n        accessibilityLabel={accessibilityLabel}\n        {...metaAttribute({ name: MetaConstants.Card, testID })}\n        {...getStyledProps(styledProps)}\n      >\n        <CardSurface\n          height={height}\n          minHeight={minHeight}\n          padding={padding}\n          borderRadius=\"medium\"\n          surfaceLevel={surfaceLevel}\n          elevation={elevation}\n          textAlign={'left' as never}\n        >\n          {href ? (\n            <LinkOverlay\n              onClick={onClick}\n              href={href}\n              target={target}\n              rel={rel ?? defaultRel}\n              {...linkOverlayProps}\n            />\n          ) : null}\n          {!href && onClick ? (\n            <LinkOverlay as=\"button\" onClick={onClick} {...linkOverlayProps} />\n          ) : null}\n          {children}\n        </CardSurface>\n      </CardRoot>\n    </CardProvider>\n  );\n};\n\ntype CardBodyProps = {\n  children: React.ReactNode;\n  height?: BoxProps['height'];\n} & TestID;\n\nconst _CardBody = ({ height, children, testID }: CardBodyProps): React.ReactElement => {\n  useVerifyInsideCard('CardBody');\n\n  return (\n    <BaseBox {...metaAttribute({ name: MetaConstants.CardBody, testID })} height={height}>\n      {children}\n    </BaseBox>\n  );\n};\n\nconst CardBody = assignWithoutSideEffects(_CardBody, { componentId: ComponentIds.CardBody });\n\nexport { Card, CardBody };\n"],"names":["ComponentIds","CardHeader","CardHeaderTrailing","CardHeaderLeading","CardFooter","CardFooterTrailing","CardFooterLeading","CardBody","CardHeaderIcon","CardHeaderCounter","CardHeaderBadge","CardHeaderText","CardHeaderLink","CardHeaderIconButton","Card","_ref","children","_ref$surfaceLevel","surfaceLevel","_ref$elevation","elevation","testID","_ref$padding","padding","width","height","minHeight","minWidth","onClick","_ref$isSelected","isSelected","accessibilityLabel","_ref$shouldScaleOnHov","shouldScaleOnHover","onHover","href","target","rel","as","styledProps","_objectWithoutProperties","_excluded","_React$useState","React","useState","_React$useState2","_slicedToArray","isFocused","setIsFocused","useVerifyAllowedChildren","componentName","allowedComponents","linkOverlayProps","_objectSpread","metaAttribute","name","CARD_LINK_OVERLAY_ID","makeAccessible","label","pressed","onFocus","onBlur","defaultRel","undefined","_jsx","CardProvider","CardRoot","display","borderRadius","onMouseEnter","isReactNative","MetaConstants","getStyledProps","_jsxs","CardSurface","textAlign","LinkOverlay","_CardBody","_ref2","useVerifyInsideCard","BaseBox","assignWithoutSideEffects","componentId"],"mappings":"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"}
+{"version":3,"file":"Card.js","sources":["../../../../../../src/components/Card/Card.tsx"],"sourcesContent":["import React from 'react';\nimport type { GestureResponderEvent } from 'react-native';\nimport { CardSurface } from './CardSurface';\nimport { CardProvider, useVerifyInsideCard } from './CardContext';\nimport { LinkOverlay } from './LinkOverlay';\nimport { CardRoot } from './CardRoot';\nimport type { CardSpacingValueType, LinkOverlayProps } from './types';\nimport { CARD_LINK_OVERLAY_ID } from './constants';\nimport BaseBox from '~components/Box/BaseBox';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport type { StyledPropsBlade } from '~components/Box/styledProps';\nimport type { TestID } from '~utils/types';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport type { Elevation } from '~tokens/global';\nimport type { BoxProps } from '~components/Box';\nimport { makeAccessible } from '~utils/makeAccessible';\nimport { useVerifyAllowedChildren } from '~utils/useVerifyAllowedChildren/useVerifyAllowedChildren';\nimport type { Platform } from '~utils';\nimport { isReactNative } from '~utils';\nimport type { Theme } from '~components/BladeProvider';\nimport type { DotNotationToken } from '~utils/lodashButBetter/get';\n\nexport const ComponentIds = {\n  CardHeader: 'CardHeader',\n  CardHeaderTrailing: 'CardHeaderTrailing',\n  CardHeaderLeading: 'CardHeaderLeading',\n  CardFooter: 'CardFooter',\n  CardFooterTrailing: 'CardFooterTrailing',\n  CardFooterLeading: 'CardFooterLeading',\n  CardBody: 'CardBody',\n  CardHeaderIcon: 'CardHeaderIcon',\n  CardHeaderCounter: 'CardHeaderCounter',\n  CardHeaderBadge: 'CardHeaderBadge',\n  CardHeaderAmount: 'CardHeaderAmount',\n  CardHeaderText: 'CardHeaderText',\n  CardHeaderLink: 'CardHeaderLink',\n  CardHeaderIconButton: 'CardHeaderIconButton',\n};\n\ntype CardSurfaceBackgroundColors = `surface.background.gray.${DotNotationToken<\n  Theme['colors']['surface']['background']['gray']\n>}`;\n\nexport type CardProps = {\n  /**\n   * Card contents\n   */\n  children: React.ReactNode;\n  /**\n   * Sets the background color of the Card\n   *\n   * @default `surface.background.gray.intense`\n   */\n  backgroundColor?: CardSurfaceBackgroundColors;\n  /**\n   * Sets the border radius of the Card\n   *\n   * @default `medium`\n   */\n  borderRadius?: Extract<BoxProps['borderRadius'], 'medium' | 'large' | 'xlarge'>;\n  /**\n   * Sets the elevation for Cards\n   *\n   * eg: `theme.elevation.midRaised`\n   *\n   * @default `theme.elevation.lowRaised`\n   *\n   * **Links:**\n   * - Docs: https://blade.razorpay.com/?path=/docs/tokens-elevation--page\n   */\n  elevation?: keyof Elevation;\n  /**\n   * Sets the padding equally on all sides. Only few `spacing` tokens are allowed deliberately\n   * @default `spacing.7`\n   *\n   * **Links:**\n   * - Docs: https://blade.razorpay.com/?path=/docs/tokens-spacing--page\n   */\n  padding?: CardSpacingValueType;\n  /**\n   * Sets the width of the card\n   */\n  width?: BoxProps['width'];\n  /**\n   * Sets the height of the card\n   */\n  height?: BoxProps['height'];\n  /**\n   * Sets minimum height of the card\n   */\n  minHeight?: BoxProps['minHeight'];\n  /**\n   * Sets minimum width of the card\n   */\n  minWidth?: BoxProps['minWidth'];\n  /**\n   * If `true`, the card will be in selected state\n   * Card will have a primary color border around it.\n   *\n   * @default false\n   */\n\n  isSelected?: boolean;\n  /**\n   * Makes the Card linkable by setting the `href` prop\n   *\n   * @default undefined\n   */\n  href?: string;\n  /**\n   * Sets the `target` attribute for the linkable card\n   */\n  target?: string;\n  /**\n   * Sets the `rel` attribute for the linkable card\n   */\n  rel?: string;\n  /**\n   * Sets the accessibility label for the card\n   * This is useful when the card has an `href` or `onClick` prop\n   * Setting this will announce the label when the card is focused\n   */\n  accessibilityLabel?: string;\n  /**\n   * If `true`, the card will scale up on hover\n   *\n   * On mobile devices it will scale down on press\n   *\n   * @default false\n   */\n  shouldScaleOnHover?: boolean;\n  /**\n   * Callback triggered when the card is hovered\n   */\n  onHover?: () => void;\n  /**\n   * Callback triggered when the card is clicked\n   */\n  onClick?: (\n    event: Platform.Select<{\n      web: React.MouseEvent;\n      native: GestureResponderEvent;\n    }>,\n  ) => void;\n  /**\n   * Sets the HTML element for the Card\n   *\n   * When `as` is set to `label`, the card will be rendered as a label element\n   * This can be used to create a custom checkbox or radio button using the card\n   *\n   * @default undefined\n   */\n  as?: 'label';\n} & TestID &\n  StyledPropsBlade;\n\nconst Card = ({\n  children,\n  backgroundColor = 'surface.background.gray.intense',\n  borderRadius = 'medium',\n  elevation = 'lowRaised',\n  testID,\n  padding = 'spacing.7',\n  width,\n  height,\n  minHeight,\n  minWidth,\n  onClick,\n  isSelected = false,\n  accessibilityLabel,\n  shouldScaleOnHover = false,\n  onHover,\n  href,\n  target,\n  rel,\n  as,\n  ...styledProps\n}: CardProps): React.ReactElement => {\n  const [isFocused, setIsFocused] = React.useState(false);\n\n  useVerifyAllowedChildren({\n    children,\n    componentName: 'Card',\n    allowedComponents: [ComponentIds.CardHeader, ComponentIds.CardBody, ComponentIds.CardFooter],\n  });\n\n  const linkOverlayProps: LinkOverlayProps = {\n    ...metaAttribute({ name: CARD_LINK_OVERLAY_ID }),\n    ...makeAccessible({ label: accessibilityLabel, pressed: isSelected }),\n    onFocus: () => {\n      setIsFocused(true);\n    },\n    onBlur: () => {\n      setIsFocused(false);\n    },\n  };\n  const defaultRel = target && target === '_blank' ? 'noreferrer noopener' : undefined;\n\n  return (\n    <CardProvider>\n      <CardRoot\n        as={as}\n        display={'block' as never}\n        borderRadius=\"medium\"\n        onMouseEnter={onHover as never}\n        shouldScaleOnHover={shouldScaleOnHover}\n        isSelected={isSelected}\n        isFocused={isFocused}\n        // on react native we need to pass onClick to root, because we don't need the LinkOverlay in RN\n        onClick={isReactNative() ? onClick : undefined}\n        width={width}\n        height={height}\n        minHeight={minHeight}\n        minWidth={minWidth}\n        href={href}\n        accessibilityLabel={accessibilityLabel}\n        {...metaAttribute({ name: MetaConstants.Card, testID })}\n        {...getStyledProps(styledProps)}\n      >\n        <CardSurface\n          height={height}\n          minHeight={minHeight}\n          padding={padding}\n          borderRadius={borderRadius}\n          elevation={elevation}\n          textAlign={'left' as never}\n          backgroundColor={backgroundColor}\n        >\n          {href ? (\n            <LinkOverlay\n              onClick={onClick}\n              href={href}\n              target={target}\n              rel={rel ?? defaultRel}\n              {...linkOverlayProps}\n            />\n          ) : null}\n          {!href && onClick ? (\n            <LinkOverlay as=\"button\" onClick={onClick} {...linkOverlayProps} />\n          ) : null}\n          {children}\n        </CardSurface>\n      </CardRoot>\n    </CardProvider>\n  );\n};\n\ntype CardBodyProps = {\n  children: React.ReactNode;\n  height?: BoxProps['height'];\n} & TestID;\n\nconst _CardBody = ({ height, children, testID }: CardBodyProps): React.ReactElement => {\n  useVerifyInsideCard('CardBody');\n\n  return (\n    <BaseBox {...metaAttribute({ name: MetaConstants.CardBody, testID })} height={height}>\n      {children}\n    </BaseBox>\n  );\n};\n\nconst CardBody = assignWithoutSideEffects(_CardBody, { componentId: ComponentIds.CardBody });\n\nexport { Card, CardBody };\n"],"names":["ComponentIds","CardHeader","CardHeaderTrailing","CardHeaderLeading","CardFooter","CardFooterTrailing","CardFooterLeading","CardBody","CardHeaderIcon","CardHeaderCounter","CardHeaderBadge","CardHeaderAmount","CardHeaderText","CardHeaderLink","CardHeaderIconButton","Card","_ref","children","_ref$backgroundColor","backgroundColor","_ref$borderRadius","borderRadius","_ref$elevation","elevation","testID","_ref$padding","padding","width","height","minHeight","minWidth","onClick","_ref$isSelected","isSelected","accessibilityLabel","_ref$shouldScaleOnHov","shouldScaleOnHover","onHover","href","target","rel","as","styledProps","_objectWithoutProperties","_excluded","_React$useState","React","useState","_React$useState2","_slicedToArray","isFocused","setIsFocused","useVerifyAllowedChildren","componentName","allowedComponents","linkOverlayProps","_objectSpread","metaAttribute","name","CARD_LINK_OVERLAY_ID","makeAccessible","label","pressed","onFocus","onBlur","defaultRel","undefined","_jsx","CardProvider","CardRoot","display","onMouseEnter","isReactNative","MetaConstants","getStyledProps","_jsxs","CardSurface","textAlign","LinkOverlay","_CardBody","_ref2","useVerifyInsideCard","BaseBox","assignWithoutSideEffects","componentId"],"mappings":"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"}

package/build/lib/web/production/components/Card/CardFooter.js

@@ -26,7 +26,13 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 var _CardFooter = function _CardFooter(_ref) {
   var _footerChildrensArray, _footerChildrensArray2;
   var children = _ref.children,
-    testID = _ref.testID;
+    testID = _ref.testID,
+    _ref$marginTop = _ref.marginTop,
+    marginTop = _ref$marginTop === void 0 ? 'spacing.4' : _ref$marginTop,
+    _ref$paddingTop = _ref.paddingTop,
+    paddingTop = _ref$paddingTop === void 0 ? 'spacing.4' : _ref$paddingTop,
+    _ref$showDivider = _ref.showDivider,
+    showDivider = _ref$showDivider === void 0 ? true : _ref$showDivider;
   var isMobile = useIsMobile();
   useVerifyInsideCard('CardFooter');
   useVerifyAllowedChildren({
@@ -50,15 +56,13 @@ var _CardFooter = function _CardFooter(_ref) {
   // then the content of footerLeading will be justified to the end.
   var baseBoxJustifyContent = footerChildrensArray.length === 2 || !((_footerChildrensArray = footerChildrensArray[0]) !== null && _footerChildrensArray !== void 0 && (_footerChildrensArray2 = _footerChildrensArray.props) !== null && _footerChildrensArray2 !== void 0 && _footerChildrensArray2.actions) ? 'space-between' : 'flex-end';
   return /*#__PURE__*/jsxs(BaseBox, _objectSpread(_objectSpread({
-    marginTop: "auto"
+    marginTop: marginTop
   }, metaAttribute({
     name: MetaConstants.CardFooter,
     testID: testID
   })), {}, {
-    children: [/*#__PURE__*/jsx(BaseBox, {
-      marginTop: "spacing.7"
-    }), /*#__PURE__*/jsx(Divider, {}), /*#__PURE__*/jsx(BaseBox, {
-      marginTop: "spacing.7",
+    children: [showDivider ? /*#__PURE__*/jsx(Divider, {}) : null, /*#__PURE__*/jsx(BaseBox, {
+      paddingTop: paddingTop,
       display: "flex",
       flexDirection: isMobile ? 'column' : 'row',
       justifyContent: baseBoxJustifyContent,
@@ -77,12 +81,12 @@ var _CardFooterLeading = function _CardFooterLeading(_ref2) {
   return /*#__PURE__*/jsxs(BaseBox, {
     textAlign: 'left',
     children: [title && /*#__PURE__*/jsx(Text, {
-      variant: "body",
+      color: "surface.text.gray.normal",
       size: "medium",
-      weight: "bold",
+      weight: "semibold",
       children: title
     }), subtitle && /*#__PURE__*/jsx(Text, {
-      variant: "body",
+      color: "surface.text.gray.subtle",
       size: "small",
       weight: "regular",
       children: subtitle

package/build/lib/web/production/components/Card/CardFooter.js.map

@@ -1 +1 @@
-{"version":3,"file":"CardFooter.js","sources":["../../../../../../src/components/Card/CardFooter.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-unnecessary-type-assertion */\nimport type { ReactElement } from 'react';\nimport React from 'react';\nimport { useVerifyInsideCard } from './CardContext';\nimport { ComponentIds } from './Card';\nimport type { ButtonProps } from '~components/Button';\nimport { Button } from '~components/Button';\nimport { Divider } from '~components/Divider';\nimport BaseBox from '~components/Box/BaseBox';\nimport { Text } from '~components/Typography';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport type { TestID } from '~utils/types';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport { useIsMobile } from '~utils/useIsMobile';\nimport { throwBladeError } from '~utils/logger';\nimport { useVerifyAllowedChildren } from '~utils/useVerifyAllowedChildren/useVerifyAllowedChildren';\n\nexport type CardFooterAction = Pick<\n  ButtonProps,\n  'type' | 'accessibilityLabel' | 'isLoading' | 'isDisabled' | 'icon' | 'iconPosition' | 'onClick'\n> & {\n  text: ButtonProps['children'];\n};\n\ntype CardFooterProps = {\n  children?: React.ReactNode;\n} & TestID;\n\nconst _CardFooter = ({ children, testID }: CardFooterProps): React.ReactElement => {\n  const isMobile = useIsMobile();\n  useVerifyInsideCard('CardFooter');\n  useVerifyAllowedChildren({\n    children,\n    componentName: 'CardFooter',\n    allowedComponents: [ComponentIds.CardFooterLeading, ComponentIds.CardFooterTrailing],\n  });\n\n  const footerChildrensArray = React.Children.toArray(children);\n  if (__DEV__) {\n    if (!React.isValidElement(footerChildrensArray[0])) {\n      throwBladeError({\n        message: `Invalid React Element ${footerChildrensArray}`,\n        moduleName: 'CardFooter',\n      });\n    }\n  }\n\n  // the reason why we are checking for actions here is, because we want the footerTrailing\n  // to always be aligned to the right\n  // if we don't check for action here, and if we do not have footerTrailing and only footerLeading\n  // then the content of footerLeading will be justified to the end.\n  const baseBoxJustifyContent =\n    footerChildrensArray.length === 2 || !(footerChildrensArray[0] as ReactElement)?.props?.actions\n      ? 'space-between'\n      : 'flex-end';\n\n  return (\n    <BaseBox marginTop=\"auto\" {...metaAttribute({ name: MetaConstants.CardFooter, testID })}>\n      <BaseBox marginTop=\"spacing.7\" />\n      <Divider />\n      <BaseBox\n        marginTop=\"spacing.7\"\n        display=\"flex\"\n        flexDirection={isMobile ? 'column' : 'row'}\n        justifyContent={baseBoxJustifyContent}\n        alignItems={isMobile ? 'stretch' : 'center'}\n      >\n        {children}\n      </BaseBox>\n    </BaseBox>\n  );\n};\nconst CardFooter = assignWithoutSideEffects(_CardFooter, { componentId: ComponentIds.CardFooter });\n\ntype CardFooterLeadingProps = {\n  title?: string;\n  subtitle?: string;\n};\nconst _CardFooterLeading = ({ title, subtitle }: CardFooterLeadingProps): React.ReactElement => {\n  useVerifyInsideCard('CardFooterLeading');\n\n  return (\n    <BaseBox textAlign={'left' as never}>\n      {title && (\n        <Text variant=\"body\" size=\"medium\" weight=\"bold\">\n          {title}\n        </Text>\n      )}\n      {subtitle && (\n        <Text variant=\"body\" size=\"small\" weight=\"regular\">\n          {subtitle}\n        </Text>\n      )}\n    </BaseBox>\n  );\n};\nconst CardFooterLeading = assignWithoutSideEffects(_CardFooterLeading, {\n  componentId: ComponentIds.CardFooterLeading,\n});\n\ntype CardFooterTrailingProps = {\n  actions?: {\n    primary?: CardFooterAction;\n    secondary?: CardFooterAction;\n  };\n};\nconst _CardFooterTrailing = ({ actions }: CardFooterTrailingProps): React.ReactElement => {\n  const isMobile = useIsMobile();\n  useVerifyInsideCard('CardFooterTrailing');\n\n  return (\n    <BaseBox\n      display=\"flex\"\n      flexDirection=\"row\"\n      alignSelf={isMobile ? 'auto' : 'center'}\n      marginTop={isMobile ? 'spacing.5' : 'spacing.0'}\n      marginLeft={isMobile ? 'spacing.0' : 'spacing.5'}\n    >\n      <BaseBox flexGrow={1}>\n        {actions?.secondary ? (\n          <Button isFullWidth size=\"medium\" variant=\"secondary\" {...actions.secondary}>\n            {actions.secondary.text!}\n          </Button>\n        ) : null}\n      </BaseBox>\n      <BaseBox marginLeft=\"spacing.5\" />\n      <BaseBox flexGrow={1}>\n        {actions?.primary ? (\n          <Button isFullWidth size=\"medium\" {...actions.primary}>\n            {actions.primary.text!}\n          </Button>\n        ) : null}\n      </BaseBox>\n    </BaseBox>\n  );\n};\nconst CardFooterTrailing = assignWithoutSideEffects(_CardFooterTrailing, {\n  componentId: ComponentIds.CardFooterTrailing,\n});\n\nexport { CardFooter, CardFooterLeading, CardFooterTrailing };\n"],"names":["_CardFooter","_ref","_footerChildrensArray","_footerChildrensArray2","children","testID","isMobile","useIsMobile","useVerifyInsideCard","useVerifyAllowedChildren","componentName","allowedComponents","ComponentIds","CardFooterLeading","CardFooterTrailing","footerChildrensArray","React","Children","toArray","isValidElement","throwBladeError","message","concat","moduleName","baseBoxJustifyContent","length","props","actions","_jsxs","BaseBox","_objectSpread","marginTop","metaAttribute","name","MetaConstants","CardFooter","_jsx","Divider","display","flexDirection","justifyContent","alignItems","assignWithoutSideEffects","componentId","_CardFooterLeading","_ref2","title","subtitle","textAlign","Text","variant","size","weight","_CardFooterTrailing","_ref3","alignSelf","marginLeft","flexGrow","secondary","Button","isFullWidth","text","primary"],"mappings":"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"}
+{"version":3,"file":"CardFooter.js","sources":["../../../../../../src/components/Card/CardFooter.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-unnecessary-type-assertion */\nimport type { ReactElement } from 'react';\nimport React from 'react';\nimport { useVerifyInsideCard } from './CardContext';\nimport { ComponentIds } from './Card';\nimport type { CardSpacingValueType } from './types';\nimport type { ButtonProps } from '~components/Button';\nimport { Button } from '~components/Button';\nimport { Divider } from '~components/Divider';\nimport BaseBox from '~components/Box/BaseBox';\nimport { Text } from '~components/Typography';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport type { TestID } from '~utils/types';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport { useIsMobile } from '~utils/useIsMobile';\nimport { throwBladeError } from '~utils/logger';\nimport { useVerifyAllowedChildren } from '~utils/useVerifyAllowedChildren/useVerifyAllowedChildren';\n\nexport type CardFooterAction = Pick<\n  ButtonProps,\n  'type' | 'accessibilityLabel' | 'isLoading' | 'isDisabled' | 'icon' | 'iconPosition' | 'onClick'\n> & {\n  text: ButtonProps['children'];\n};\n\ntype CardFooterProps = {\n  children?: React.ReactNode;\n  /**\n   * For spacing between divider and footer title\n   */\n  paddingTop?: CardSpacingValueType;\n  /**\n   * For spacing between body content and divider\n   */\n  marginTop?: CardSpacingValueType;\n  /**\n   * @default true\n   */\n  showDivider?: boolean;\n} & TestID;\n\nconst _CardFooter = ({\n  children,\n  testID,\n  marginTop = 'spacing.4',\n  paddingTop = 'spacing.4',\n  showDivider = true,\n}: CardFooterProps): React.ReactElement => {\n  const isMobile = useIsMobile();\n  useVerifyInsideCard('CardFooter');\n  useVerifyAllowedChildren({\n    children,\n    componentName: 'CardFooter',\n    allowedComponents: [ComponentIds.CardFooterLeading, ComponentIds.CardFooterTrailing],\n  });\n\n  const footerChildrensArray = React.Children.toArray(children);\n  if (__DEV__) {\n    if (!React.isValidElement(footerChildrensArray[0])) {\n      throwBladeError({\n        message: `Invalid React Element ${footerChildrensArray}`,\n        moduleName: 'CardFooter',\n      });\n    }\n  }\n\n  // the reason why we are checking for actions here is, because we want the footerTrailing\n  // to always be aligned to the right\n  // if we don't check for action here, and if we do not have footerTrailing and only footerLeading\n  // then the content of footerLeading will be justified to the end.\n  const baseBoxJustifyContent =\n    footerChildrensArray.length === 2 || !(footerChildrensArray[0] as ReactElement)?.props?.actions\n      ? 'space-between'\n      : 'flex-end';\n\n  return (\n    <BaseBox marginTop={marginTop} {...metaAttribute({ name: MetaConstants.CardFooter, testID })}>\n      {showDivider ? <Divider /> : null}\n      <BaseBox\n        paddingTop={paddingTop}\n        display=\"flex\"\n        flexDirection={isMobile ? 'column' : 'row'}\n        justifyContent={baseBoxJustifyContent}\n        alignItems={isMobile ? 'stretch' : 'center'}\n      >\n        {children}\n      </BaseBox>\n    </BaseBox>\n  );\n};\nconst CardFooter = assignWithoutSideEffects(_CardFooter, { componentId: ComponentIds.CardFooter });\n\ntype CardFooterLeadingProps = {\n  title?: string;\n  subtitle?: string;\n};\nconst _CardFooterLeading = ({ title, subtitle }: CardFooterLeadingProps): React.ReactElement => {\n  useVerifyInsideCard('CardFooterLeading');\n\n  return (\n    <BaseBox textAlign={'left' as never}>\n      {title && (\n        <Text color=\"surface.text.gray.normal\" size=\"medium\" weight=\"semibold\">\n          {title}\n        </Text>\n      )}\n      {subtitle && (\n        <Text color=\"surface.text.gray.subtle\" size=\"small\" weight=\"regular\">\n          {subtitle}\n        </Text>\n      )}\n    </BaseBox>\n  );\n};\nconst CardFooterLeading = assignWithoutSideEffects(_CardFooterLeading, {\n  componentId: ComponentIds.CardFooterLeading,\n});\n\ntype CardFooterTrailingProps = {\n  actions?: {\n    primary?: CardFooterAction;\n    secondary?: CardFooterAction;\n  };\n};\nconst _CardFooterTrailing = ({ actions }: CardFooterTrailingProps): React.ReactElement => {\n  const isMobile = useIsMobile();\n  useVerifyInsideCard('CardFooterTrailing');\n\n  return (\n    <BaseBox\n      display=\"flex\"\n      flexDirection=\"row\"\n      alignSelf={isMobile ? 'auto' : 'center'}\n      marginTop={isMobile ? 'spacing.5' : 'spacing.0'}\n      marginLeft={isMobile ? 'spacing.0' : 'spacing.5'}\n    >\n      <BaseBox flexGrow={1}>\n        {actions?.secondary ? (\n          <Button isFullWidth size=\"medium\" variant=\"secondary\" {...actions.secondary}>\n            {actions.secondary.text!}\n          </Button>\n        ) : null}\n      </BaseBox>\n      <BaseBox marginLeft=\"spacing.5\" />\n      <BaseBox flexGrow={1}>\n        {actions?.primary ? (\n          <Button isFullWidth size=\"medium\" {...actions.primary}>\n            {actions.primary.text!}\n          </Button>\n        ) : null}\n      </BaseBox>\n    </BaseBox>\n  );\n};\nconst CardFooterTrailing = assignWithoutSideEffects(_CardFooterTrailing, {\n  componentId: ComponentIds.CardFooterTrailing,\n});\n\nexport { CardFooter, CardFooterLeading, CardFooterTrailing };\n"],"names":["_CardFooter","_ref","_footerChildrensArray","_footerChildrensArray2","children","testID","_ref$marginTop","marginTop","_ref$paddingTop","paddingTop","_ref$showDivider","showDivider","isMobile","useIsMobile","useVerifyInsideCard","useVerifyAllowedChildren","componentName","allowedComponents","ComponentIds","CardFooterLeading","CardFooterTrailing","footerChildrensArray","React","Children","toArray","isValidElement","throwBladeError","message","concat","moduleName","baseBoxJustifyContent","length","props","actions","_jsxs","BaseBox","_objectSpread","metaAttribute","name","MetaConstants","CardFooter","_jsx","Divider","display","flexDirection","justifyContent","alignItems","assignWithoutSideEffects","componentId","_CardFooterLeading","_ref2","title","subtitle","textAlign","Text","color","size","weight","_CardFooterTrailing","_ref3","alignSelf","marginLeft","flexGrow","secondary","Button","isFullWidth","variant","text","primary"],"mappings":"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"}

package/build/lib/web/production/components/Card/CardHeader.js

@@ -16,10 +16,12 @@ import '../../utils/makeSpace/index.js';
 import '../../utils/isValidAllowedChildren/index.js';
 import '../../utils/logger/index.js';
 import { useVerifyAllowedChildren } from '../../utils/useVerifyAllowedChildren/useVerifyAllowedChildren.js';
+import '../Amount/index.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { assignWithoutSideEffects } from '../../utils/assignWithoutSideEffects/assignWithoutSideEffects.js';
 import { Counter } from '../Counter/Counter.js';
 import { Badge } from '../Badge/Badge.js';
+import { Amount } from '../Amount/Amount.js';
 import { Text } from '../Typography/Text/Text.js';
 import Link from '../Link/Link/Link.js';
 import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
@@ -30,7 +32,6 @@ import { MetaConstants } from '../../utils/metaAttribute/metaConstants.js';
 import { Divider } from '../Divider/Divider.js';
 import { isValidAllowedChildren, getComponentId } from '../../utils/isValidAllowedChildren/isValidAllowedChildren.js';
 import { throwBladeError } from '../../utils/logger/logger.js';
-import { Heading } from '../Typography/Heading/Heading.js';
 
 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; }
@@ -38,8 +39,8 @@ var _CardHeaderIcon = function _CardHeaderIcon(_ref) {
   var Icon = _ref.icon;
   useVerifyInsideCard('CardHeaderIcon');
   return /*#__PURE__*/jsx(Icon, {
-    color: "surface.text.normal.lowContrast",
-    size: "xlarge"
+    color: "surface.icon.gray.normal",
+    size: "large"
   });
 };
 var CardHeaderIcon = /*#__PURE__*/assignWithoutSideEffects(_CardHeaderIcon, {
@@ -59,6 +60,13 @@ var _CardHeaderBadge = function _CardHeaderBadge(props) {
 var CardHeaderBadge = /*#__PURE__*/assignWithoutSideEffects(_CardHeaderBadge, {
   componentId: ComponentIds.CardHeaderBadge
 });
+var _CardHeaderAmount = function _CardHeaderAmount(props) {
+  useVerifyInsideCard('CardHeaderAmount');
+  return /*#__PURE__*/jsx(Amount, _objectSpread({}, props));
+};
+var CardHeaderAmount = /*#__PURE__*/assignWithoutSideEffects(_CardHeaderAmount, {
+  componentId: ComponentIds.CardHeaderAmount
+});
 var _CardHeaderText = function _CardHeaderText(props) {
   useVerifyInsideCard('CardHeaderText');
   return /*#__PURE__*/jsx(Text, _objectSpread({
@@ -92,7 +100,13 @@ var CardHeaderIconButton = /*#__PURE__*/assignWithoutSideEffects(_CardHeaderIcon
 });
 var _CardHeader = function _CardHeader(_ref2) {
   var children = _ref2.children,
-    testID = _ref2.testID;
+    testID = _ref2.testID,
+    _ref2$marginBottom = _ref2.marginBottom,
+    marginBottom = _ref2$marginBottom === void 0 ? 'spacing.4' : _ref2$marginBottom,
+    _ref2$paddingBottom = _ref2.paddingBottom,
+    paddingBottom = _ref2$paddingBottom === void 0 ? 'spacing.4' : _ref2$paddingBottom,
+    _ref2$showDivider = _ref2.showDivider,
+    showDivider = _ref2$showDivider === void 0 ? true : _ref2$showDivider;
   useVerifyInsideCard('CardHeader');
   useVerifyAllowedChildren({
     children: children,
@@ -100,18 +114,18 @@ var _CardHeader = function _CardHeader(_ref2) {
     allowedComponents: [ComponentIds.CardHeaderLeading, ComponentIds.CardHeaderTrailing]
   });
   return /*#__PURE__*/jsxs(BaseBox, _objectSpread(_objectSpread({
-    marginBottom: "spacing.7"
+    marginBottom: marginBottom
   }, metaAttribute({
     name: MetaConstants.CardHeader,
     testID: testID
   })), {}, {
     children: [/*#__PURE__*/jsx(BaseBox, {
-      marginBottom: "spacing.7",
+      paddingBottom: paddingBottom,
       display: "flex",
       flexDirection: "row",
       justifyContent: "space-between",
       children: children
-    }), /*#__PURE__*/jsx(Divider, {})]
+    }), showDivider ? /*#__PURE__*/jsx(Divider, {}) : null]
   }));
 };
 var CardHeader = /*#__PURE__*/assignWithoutSideEffects(_CardHeader, {
@@ -153,20 +167,19 @@ var _CardHeaderLeading = function _CardHeaderLeading(_ref3) {
         flexDirection: "row",
         alignItems: "center",
         flexWrap: "wrap",
-        children: [/*#__PURE__*/jsx(Heading, {
-          size: "small",
-          variant: "regular",
-          type: "normal",
+        children: [/*#__PURE__*/jsx(Text, {
+          color: "surface.text.gray.normal",
+          size: "large",
+          weight: "semibold",
           children: title
         }), /*#__PURE__*/jsx(BaseBox, {
           marginLeft: "spacing.3",
           children: suffix
         })]
       }), subtitle && /*#__PURE__*/jsx(Text, {
+        color: "surface.text.gray.subtle",
         textAlign: "left",
-        variant: "body",
         size: "small",
-        weight: "regular",
         children: subtitle
       })]
     })]
@@ -175,7 +188,7 @@ var _CardHeaderLeading = function _CardHeaderLeading(_ref3) {
 var CardHeaderLeading = /*#__PURE__*/assignWithoutSideEffects(_CardHeaderLeading, {
   componentId: ComponentIds.CardHeaderLeading
 });
-var headerTrailingAllowedComponents = [ComponentIds.CardHeaderLink, ComponentIds.CardHeaderText, ComponentIds.CardHeaderIconButton, ComponentIds.CardHeaderBadge];
+var headerTrailingAllowedComponents = [ComponentIds.CardHeaderLink, ComponentIds.CardHeaderText, ComponentIds.CardHeaderIconButton, ComponentIds.CardHeaderBadge, ComponentIds.CardHeaderAmount];
 var _CardHeaderTrailing = function _CardHeaderTrailing(_ref4) {
   var visual = _ref4.visual;
   useVerifyInsideCard('CardHeaderTrailing');
@@ -196,5 +209,5 @@ var CardHeaderTrailing = /*#__PURE__*/assignWithoutSideEffects(_CardHeaderTraili
   componentId: ComponentIds.CardHeaderTrailing
 });
 
-export { CardHeader, CardHeaderBadge, CardHeaderCounter, CardHeaderIcon, CardHeaderIconButton, CardHeaderLeading, CardHeaderLink, CardHeaderText, CardHeaderTrailing };
+export { CardHeader, CardHeaderAmount, CardHeaderBadge, CardHeaderCounter, CardHeaderIcon, CardHeaderIconButton, CardHeaderLeading, CardHeaderLink, CardHeaderText, CardHeaderTrailing };
 //# sourceMappingURL=CardHeader.js.map

package/build/lib/web/production/components/Card/CardHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"CardHeader.js","sources":["../../../../../../src/components/Card/CardHeader.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport React from 'react';\nimport { useVerifyInsideCard } from './CardContext';\nimport { ComponentIds } from './Card';\nimport type { BadgeProps } from '~components/Badge';\nimport { Badge } from '~components/Badge';\nimport type { LinkProps } from '~components/Link';\nimport { Link } from '~components/Link';\nimport type { ButtonProps } from '~components/Button';\nimport { Button } from '~components/Button';\nimport { Counter } from '~components/Counter';\nimport type { CounterProps } from '~components/Counter';\nimport { Divider } from '~components/Divider';\nimport BaseBox from '~components/Box/BaseBox';\nimport type { TextProps, TextVariant } from '~components/Typography';\nimport { Heading, Text } from '~components/Typography';\nimport type { IconComponent } from '~components/Icons';\nimport { minHeight } from '~components/Button/BaseButton/buttonTokens';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport type { TestID } from '~utils/types';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport { makeSpace } from '~utils/makeSpace';\nimport { getComponentId, isValidAllowedChildren } from '~utils/isValidAllowedChildren';\nimport { throwBladeError } from '~utils/logger';\nimport { useVerifyAllowedChildren } from '~utils/useVerifyAllowedChildren/useVerifyAllowedChildren';\n\nconst _CardHeaderIcon = ({ icon: Icon }: { icon: IconComponent }): React.ReactElement => {\n  useVerifyInsideCard('CardHeaderIcon');\n\n  return <Icon color=\"surface.text.normal.lowContrast\" size=\"xlarge\" />;\n};\nconst CardHeaderIcon = assignWithoutSideEffects(_CardHeaderIcon, {\n  componentId: ComponentIds.CardHeaderIcon,\n});\n\nconst _CardHeaderCounter = (props: CounterProps): React.ReactElement => {\n  useVerifyInsideCard('CardHeaderCounter');\n\n  return <Counter {...props} />;\n};\nconst CardHeaderCounter = assignWithoutSideEffects(_CardHeaderCounter, {\n  componentId: ComponentIds.CardHeaderCounter,\n});\n\nconst _CardHeaderBadge = (props: BadgeProps): React.ReactElement => {\n  useVerifyInsideCard('CardHeaderBadge');\n\n  return <Badge {...props} />;\n};\nconst CardHeaderBadge = assignWithoutSideEffects(_CardHeaderBadge, {\n  componentId: ComponentIds.CardHeaderBadge,\n});\n\nconst _CardHeaderText = (props: TextProps<{ variant: TextVariant }>): React.ReactElement => {\n  useVerifyInsideCard('CardHeaderText');\n\n  return <Text textAlign=\"left\" {...props} />;\n};\nconst CardHeaderText = assignWithoutSideEffects(_CardHeaderText, {\n  componentId: ComponentIds.CardHeaderText,\n});\n\nconst _CardHeaderLink = (props: LinkProps): React.ReactElement => {\n  useVerifyInsideCard('CardHeaderLink');\n\n  return <Link {...props} />;\n};\nconst CardHeaderLink = assignWithoutSideEffects(_CardHeaderLink, {\n  componentId: ComponentIds.CardHeaderLink,\n});\n\ntype CardHeaderIconButtonProps = Omit<\n  ButtonProps,\n  'variant' | 'size' | 'iconPosition' | 'isFullWidth' | 'children'\n> & {\n  icon: IconComponent;\n};\n\nconst _CardHeaderIconButton = (props: CardHeaderIconButtonProps): React.ReactElement => {\n  useVerifyInsideCard('CardHeaderIconButton');\n\n  return (\n    <BaseBox width={makeSpace(minHeight.xsmall)}>\n      <Button {...props} variant=\"tertiary\" size=\"xsmall\" iconPosition=\"left\" isFullWidth />\n    </BaseBox>\n  );\n};\nconst CardHeaderIconButton = assignWithoutSideEffects(_CardHeaderIconButton, {\n  componentId: ComponentIds.CardHeaderIconButton,\n});\n\ntype CardHeaderProps = {\n  children?: React.ReactNode;\n} & TestID;\n\nconst _CardHeader = ({ children, testID }: CardHeaderProps): React.ReactElement => {\n  useVerifyInsideCard('CardHeader');\n  useVerifyAllowedChildren({\n    children,\n    componentName: 'CardHeader',\n    allowedComponents: [ComponentIds.CardHeaderLeading, ComponentIds.CardHeaderTrailing],\n  });\n\n  return (\n    <BaseBox\n      marginBottom=\"spacing.7\"\n      {...metaAttribute({ name: MetaConstants.CardHeader, testID })}\n    >\n      <BaseBox\n        marginBottom=\"spacing.7\"\n        display=\"flex\"\n        flexDirection=\"row\"\n        justifyContent=\"space-between\"\n      >\n        {children}\n      </BaseBox>\n      <Divider />\n    </BaseBox>\n  );\n};\nconst CardHeader = assignWithoutSideEffects(_CardHeader, { componentId: ComponentIds.CardHeader });\n\ntype CardHeaderLeadingProps = {\n  title: string;\n  subtitle?: string;\n  /**\n   * prefix element of Card\n   *\n   * Accepts: `CardHeaderIcon` component\n   */\n  prefix?: React.ReactNode;\n  /**\n   * suffix element of Card\n   *\n   * Accepts: `CardHeaderCounter` component\n   */\n  suffix?: React.ReactNode;\n};\nconst _CardHeaderLeading = ({\n  title,\n  subtitle,\n  prefix,\n  suffix,\n}: CardHeaderLeadingProps): React.ReactElement => {\n  useVerifyInsideCard('CardHeaderLeading');\n\n  if (__DEV__) {\n    if (prefix && !isValidAllowedChildren(prefix, ComponentIds.CardHeaderIcon)) {\n      throwBladeError({\n        message: `Only \\`${ComponentIds.CardHeaderIcon}\\` component is accepted in prefix`,\n        moduleName: 'CardHeaderLeading',\n      });\n    }\n\n    if (suffix && !isValidAllowedChildren(suffix, ComponentIds.CardHeaderCounter)) {\n      throwBladeError({\n        message: `Only \\`${ComponentIds.CardHeaderCounter}\\` component is accepted in prefix`,\n        moduleName: 'CardHeaderLeading',\n      });\n    }\n  }\n\n  return (\n    <BaseBox flex={1} display=\"flex\" flexDirection=\"row\">\n      <BaseBox marginRight=\"spacing.3\" alignSelf=\"center\" display=\"flex\">\n        {prefix}\n      </BaseBox>\n      <BaseBox marginRight=\"spacing.5\">\n        <BaseBox display=\"flex\" flexDirection=\"row\" alignItems=\"center\" flexWrap=\"wrap\">\n          <Heading size=\"small\" variant=\"regular\" type=\"normal\">\n            {title}\n          </Heading>\n          <BaseBox marginLeft=\"spacing.3\">{suffix}</BaseBox>\n        </BaseBox>\n        {subtitle && (\n          <Text textAlign=\"left\" variant=\"body\" size=\"small\" weight=\"regular\">\n            {subtitle}\n          </Text>\n        )}\n      </BaseBox>\n    </BaseBox>\n  );\n};\nconst CardHeaderLeading = assignWithoutSideEffects(_CardHeaderLeading, {\n  componentId: ComponentIds.CardHeaderLeading,\n});\n\ntype CardHeaderTrailingProps = {\n  /**\n   * Renders a visual ornament in card header trailing section\n   *\n   * Accepts: `CardHeaderLink`, `CardHeaderText`, `CardHeaderIconButton`, `CardHeaderBadge`\n   */\n  visual?: React.ReactNode;\n};\n\nconst headerTrailingAllowedComponents = [\n  ComponentIds.CardHeaderLink,\n  ComponentIds.CardHeaderText,\n  ComponentIds.CardHeaderIconButton,\n  ComponentIds.CardHeaderBadge,\n];\n\nconst _CardHeaderTrailing = ({ visual }: CardHeaderTrailingProps): React.ReactElement => {\n  useVerifyInsideCard('CardHeaderTrailing');\n\n  if (__DEV__) {\n    if (visual && !headerTrailingAllowedComponents.includes(getComponentId(visual)!)) {\n      throwBladeError({\n        message: `Only one of \\`${headerTrailingAllowedComponents.join(\n          ', ',\n        )}\\` component is accepted in visual`,\n        moduleName: 'CardHeaderTrailing',\n      });\n    }\n  }\n\n  return <BaseBox alignSelf=\"center\">{visual}</BaseBox>;\n};\nconst CardHeaderTrailing = assignWithoutSideEffects(_CardHeaderTrailing, {\n  componentId: ComponentIds.CardHeaderTrailing,\n});\n\nexport {\n  CardHeader,\n  CardHeaderLeading,\n  CardHeaderTrailing,\n  CardHeaderBadge,\n  CardHeaderIcon,\n  CardHeaderCounter,\n  CardHeaderText,\n  CardHeaderLink,\n  CardHeaderIconButton,\n};\n"],"names":["_CardHeaderIcon","_ref","Icon","icon","useVerifyInsideCard","_jsx","color","size","CardHeaderIcon","assignWithoutSideEffects","componentId","ComponentIds","_CardHeaderCounter","props","Counter","_objectSpread","CardHeaderCounter","_CardHeaderBadge","Badge","CardHeaderBadge","_CardHeaderText","Text","textAlign","CardHeaderText","_CardHeaderLink","Link","CardHeaderLink","_CardHeaderIconButton","BaseBox","width","makeSpace","minHeight","xsmall","children","Button","variant","iconPosition","isFullWidth","CardHeaderIconButton","_CardHeader","_ref2","testID","useVerifyAllowedChildren","componentName","allowedComponents","CardHeaderLeading","CardHeaderTrailing","_jsxs","marginBottom","metaAttribute","name","MetaConstants","CardHeader","display","flexDirection","justifyContent","Divider","_CardHeaderLeading","_ref3","title","subtitle","prefix","suffix","isValidAllowedChildren","throwBladeError","message","concat","moduleName","flex","marginRight","alignSelf","alignItems","flexWrap","Heading","type","marginLeft","weight","headerTrailingAllowedComponents","_CardHeaderTrailing","_ref4","visual","includes","getComponentId","join"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0BA,IAAMA,eAAe,GAAG,SAAlBA,eAAeA,CAAAC,IAAA,EAAoE;AAAA,EAAA,IAAxDC,IAAI,GAAAD,IAAA,CAAVE,IAAI,CAAA;EAC7BC,mBAAmB,CAAC,gBAAgB,CAAC,CAAA;EAErC,oBAAOC,GAAA,CAACH,IAAI,EAAA;AAACI,IAAAA,KAAK,EAAC,iCAAiC;AAACC,IAAAA,IAAI,EAAC,QAAA;AAAQ,GAAE,CAAC,CAAA;AACvE,CAAC,CAAA;AACD,IAAMC,cAAc,gBAAGC,wBAAwB,CAACT,eAAe,EAAE;EAC/DU,WAAW,EAAEC,YAAY,CAACH,cAAAA;AAC5B,CAAC,EAAC;AAEF,IAAMI,kBAAkB,GAAG,SAArBA,kBAAkBA,CAAIC,KAAmB,EAAyB;EACtET,mBAAmB,CAAC,mBAAmB,CAAC,CAAA;EAExC,oBAAOC,GAAA,CAACS,OAAO,EAAAC,aAAA,CAAKF,EAAAA,EAAAA,KAAK,CAAG,CAAC,CAAA;AAC/B,CAAC,CAAA;AACD,IAAMG,iBAAiB,gBAAGP,wBAAwB,CAACG,kBAAkB,EAAE;EACrEF,WAAW,EAAEC,YAAY,CAACK,iBAAAA;AAC5B,CAAC,EAAC;AAEF,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAgBA,CAAIJ,KAAiB,EAAyB;EAClET,mBAAmB,CAAC,iBAAiB,CAAC,CAAA;EAEtC,oBAAOC,GAAA,CAACa,KAAK,EAAAH,aAAA,CAAKF,EAAAA,EAAAA,KAAK,CAAG,CAAC,CAAA;AAC7B,CAAC,CAAA;AACD,IAAMM,eAAe,gBAAGV,wBAAwB,CAACQ,gBAAgB,EAAE;EACjEP,WAAW,EAAEC,YAAY,CAACQ,eAAAA;AAC5B,CAAC,EAAC;AAEF,IAAMC,eAAe,GAAG,SAAlBA,eAAeA,CAAIP,KAA0C,EAAyB;EAC1FT,mBAAmB,CAAC,gBAAgB,CAAC,CAAA;AAErC,EAAA,oBAAOC,GAAA,CAACgB,IAAI,EAAAN,aAAA,CAAA;AAACO,IAAAA,SAAS,EAAC,MAAA;GAAWT,EAAAA,KAAK,CAAG,CAAC,CAAA;AAC7C,CAAC,CAAA;AACD,IAAMU,cAAc,gBAAGd,wBAAwB,CAACW,eAAe,EAAE;EAC/DV,WAAW,EAAEC,YAAY,CAACY,cAAAA;AAC5B,CAAC,EAAC;AAEF,IAAMC,eAAe,GAAG,SAAlBA,eAAeA,CAAIX,KAAgB,EAAyB;EAChET,mBAAmB,CAAC,gBAAgB,CAAC,CAAA;EAErC,oBAAOC,GAAA,CAACoB,IAAI,EAAAV,aAAA,CAAKF,EAAAA,EAAAA,KAAK,CAAG,CAAC,CAAA;AAC5B,CAAC,CAAA;AACD,IAAMa,cAAc,gBAAGjB,wBAAwB,CAACe,eAAe,EAAE;EAC/Dd,WAAW,EAAEC,YAAY,CAACe,cAAAA;AAC5B,CAAC,EAAC;AASF,IAAMC,qBAAqB,GAAG,SAAxBA,qBAAqBA,CAAId,KAAgC,EAAyB;EACtFT,mBAAmB,CAAC,sBAAsB,CAAC,CAAA;EAE3C,oBACEC,GAAA,CAACuB,OAAO,EAAA;AAACC,IAAAA,KAAK,EAAEC,SAAS,CAACC,SAAS,CAACC,MAAM,CAAE;IAAAC,QAAA,eAC1C5B,GAAA,CAAC6B,MAAM,EAAAnB,aAAA,CAAAA,aAAA,CAAA,EAAA,EAAKF,KAAK,CAAA,EAAA,EAAA,EAAA;AAAEsB,MAAAA,OAAO,EAAC,UAAU;AAAC5B,MAAAA,IAAI,EAAC,QAAQ;AAAC6B,MAAAA,YAAY,EAAC,MAAM;MAACC,WAAW,EAAA,IAAA;KAAE,CAAA,CAAA;AAAC,GAC/E,CAAC,CAAA;AAEd,CAAC,CAAA;AACD,IAAMC,oBAAoB,gBAAG7B,wBAAwB,CAACkB,qBAAqB,EAAE;EAC3EjB,WAAW,EAAEC,YAAY,CAAC2B,oBAAAA;AAC5B,CAAC,EAAC;AAMF,IAAMC,WAAW,GAAG,SAAdA,WAAWA,CAAAC,KAAA,EAAkE;AAAA,EAAA,IAA5DP,QAAQ,GAAAO,KAAA,CAARP,QAAQ;IAAEQ,MAAM,GAAAD,KAAA,CAANC,MAAM,CAAA;EACrCrC,mBAAmB,CAAC,YAAY,CAAC,CAAA;AACjCsC,EAAAA,wBAAwB,CAAC;AACvBT,IAAAA,QAAQ,EAARA,QAAQ;AACRU,IAAAA,aAAa,EAAE,YAAY;IAC3BC,iBAAiB,EAAE,CAACjC,YAAY,CAACkC,iBAAiB,EAAElC,YAAY,CAACmC,kBAAkB,CAAA;AACrF,GAAC,CAAC,CAAA;AAEF,EAAA,oBACEC,IAAA,CAACnB,OAAO,EAAAb,aAAA,CAAAA,aAAA,CAAA;AACNiC,IAAAA,YAAY,EAAC,WAAA;AAAW,GAAA,EACpBC,aAAa,CAAC;IAAEC,IAAI,EAAEC,aAAa,CAACC,UAAU;AAAEX,IAAAA,MAAM,EAANA,MAAAA;AAAO,GAAC,CAAC,CAAA,EAAA,EAAA,EAAA;IAAAR,QAAA,EAAA,cAE7D5B,GAAA,CAACuB,OAAO,EAAA;AACNoB,MAAAA,YAAY,EAAC,WAAW;AACxBK,MAAAA,OAAO,EAAC,MAAM;AACdC,MAAAA,aAAa,EAAC,KAAK;AACnBC,MAAAA,cAAc,EAAC,eAAe;AAAAtB,MAAAA,QAAA,EAE7BA,QAAAA;AAAQ,KACF,CAAC,eACV5B,GAAA,CAACmD,OAAO,IAAE,CAAC,CAAA;AAAA,GAAA,CACJ,CAAC,CAAA;AAEd,CAAC,CAAA;AACD,IAAMJ,UAAU,gBAAG3C,wBAAwB,CAAC8B,WAAW,EAAE;EAAE7B,WAAW,EAAEC,YAAY,CAACyC,UAAAA;AAAW,CAAC,EAAC;AAkBlG,IAAMK,kBAAkB,GAAG,SAArBA,kBAAkBA,CAAAC,KAAA,EAK0B;AAAA,EAAA,IAJhDC,KAAK,GAAAD,KAAA,CAALC,KAAK;IACLC,QAAQ,GAAAF,KAAA,CAARE,QAAQ;IACRC,MAAM,GAAAH,KAAA,CAANG,MAAM;IACNC,MAAM,GAAAJ,KAAA,CAANI,MAAM,CAAA;EAEN1D,mBAAmB,CAAC,mBAAmB,CAAC,CAAA;AAExC,EAAA,IAAI,KAAO,EAAE;IACX,IAAIyD,MAAM,IAAI,CAACE,sBAAsB,CAACF,MAAM,EAAElD,YAAY,CAACH,cAAc,CAAC,EAAE;AAC1EwD,MAAAA,eAAe,CAAC;AACdC,QAAAA,OAAO,WAAAC,MAAA,CAAYvD,YAAY,CAACH,cAAc,EAAoC,mCAAA,CAAA;AAClF2D,QAAAA,UAAU,EAAE,mBAAA;AACd,OAAC,CAAC,CAAA;AACJ,KAAA;IAEA,IAAIL,MAAM,IAAI,CAACC,sBAAsB,CAACD,MAAM,EAAEnD,YAAY,CAACK,iBAAiB,CAAC,EAAE;AAC7EgD,MAAAA,eAAe,CAAC;AACdC,QAAAA,OAAO,WAAAC,MAAA,CAAYvD,YAAY,CAACK,iBAAiB,EAAoC,mCAAA,CAAA;AACrFmD,QAAAA,UAAU,EAAE,mBAAA;AACd,OAAC,CAAC,CAAA;AACJ,KAAA;AACF,GAAA;EAEA,oBACEpB,IAAA,CAACnB,OAAO,EAAA;AAACwC,IAAAA,IAAI,EAAE,CAAE;AAACf,IAAAA,OAAO,EAAC,MAAM;AAACC,IAAAA,aAAa,EAAC,KAAK;IAAArB,QAAA,EAAA,cAClD5B,GAAA,CAACuB,OAAO,EAAA;AAACyC,MAAAA,WAAW,EAAC,WAAW;AAACC,MAAAA,SAAS,EAAC,QAAQ;AAACjB,MAAAA,OAAO,EAAC,MAAM;AAAApB,MAAAA,QAAA,EAC/D4B,MAAAA;AAAM,KACA,CAAC,eACVd,IAAA,CAACnB,OAAO,EAAA;AAACyC,MAAAA,WAAW,EAAC,WAAW;MAAApC,QAAA,EAAA,cAC9Bc,IAAA,CAACnB,OAAO,EAAA;AAACyB,QAAAA,OAAO,EAAC,MAAM;AAACC,QAAAA,aAAa,EAAC,KAAK;AAACiB,QAAAA,UAAU,EAAC,QAAQ;AAACC,QAAAA,QAAQ,EAAC,MAAM;QAAAvC,QAAA,EAAA,cAC7E5B,GAAA,CAACoE,OAAO,EAAA;AAAClE,UAAAA,IAAI,EAAC,OAAO;AAAC4B,UAAAA,OAAO,EAAC,SAAS;AAACuC,UAAAA,IAAI,EAAC,QAAQ;AAAAzC,UAAAA,QAAA,EAClD0B,KAAAA;AAAK,SACC,CAAC,eACVtD,GAAA,CAACuB,OAAO,EAAA;AAAC+C,UAAAA,UAAU,EAAC,WAAW;AAAA1C,UAAAA,QAAA,EAAE6B,MAAAA;AAAM,SAAU,CAAC,CAAA;AAAA,OAC3C,CAAC,EACTF,QAAQ,iBACPvD,GAAA,CAACgB,IAAI,EAAA;AAACC,QAAAA,SAAS,EAAC,MAAM;AAACa,QAAAA,OAAO,EAAC,MAAM;AAAC5B,QAAAA,IAAI,EAAC,OAAO;AAACqE,QAAAA,MAAM,EAAC,SAAS;AAAA3C,QAAAA,QAAA,EAChE2B,QAAAA;AAAQ,OACL,CACP,CAAA;AAAA,KACM,CAAC,CAAA;AAAA,GACH,CAAC,CAAA;AAEd,CAAC,CAAA;AACD,IAAMf,iBAAiB,gBAAGpC,wBAAwB,CAACgD,kBAAkB,EAAE;EACrE/C,WAAW,EAAEC,YAAY,CAACkC,iBAAAA;AAC5B,CAAC,EAAC;AAWF,IAAMgC,+BAA+B,GAAG,CACtClE,YAAY,CAACe,cAAc,EAC3Bf,YAAY,CAACY,cAAc,EAC3BZ,YAAY,CAAC2B,oBAAoB,EACjC3B,YAAY,CAACQ,eAAe,CAC7B,CAAA;AAED,IAAM2D,mBAAmB,GAAG,SAAtBA,mBAAmBA,CAAAC,KAAA,EAAgE;AAAA,EAAA,IAA1DC,MAAM,GAAAD,KAAA,CAANC,MAAM,CAAA;EACnC5E,mBAAmB,CAAC,oBAAoB,CAAC,CAAA;AAEzC,EAAA,IAAI,KAAO,EAAE;AACX,IAAA,IAAI4E,MAAM,IAAI,CAACH,+BAA+B,CAACI,QAAQ,CAACC,cAAc,CAACF,MAAM,CAAE,CAAC,EAAE;AAChFhB,MAAAA,eAAe,CAAC;QACdC,OAAO,EAAA,eAAA,CAAAC,MAAA,CAAmBW,+BAA+B,CAACM,IAAI,CAC5D,IACF,CAAC,EAAoC,mCAAA,CAAA;AACrChB,QAAAA,UAAU,EAAE,oBAAA;AACd,OAAC,CAAC,CAAA;AACJ,KAAA;AACF,GAAA;EAEA,oBAAO9D,GAAA,CAACuB,OAAO,EAAA;AAAC0C,IAAAA,SAAS,EAAC,QAAQ;AAAArC,IAAAA,QAAA,EAAE+C,MAAAA;AAAM,GAAU,CAAC,CAAA;AACvD,CAAC,CAAA;AACD,IAAMlC,kBAAkB,gBAAGrC,wBAAwB,CAACqE,mBAAmB,EAAE;EACvEpE,WAAW,EAAEC,YAAY,CAACmC,kBAAAA;AAC5B,CAAC;;;;"}
+{"version":3,"file":"CardHeader.js","sources":["../../../../../../src/components/Card/CardHeader.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport React from 'react';\nimport { useVerifyInsideCard } from './CardContext';\nimport { ComponentIds } from './Card';\nimport type { CardSpacingValueType } from './types';\nimport type { BadgeProps } from '~components/Badge';\nimport { Badge } from '~components/Badge';\nimport type { LinkProps } from '~components/Link';\nimport { Link } from '~components/Link';\nimport type { ButtonProps } from '~components/Button';\nimport { Button } from '~components/Button';\nimport { Counter } from '~components/Counter';\nimport type { CounterProps } from '~components/Counter';\nimport { Divider } from '~components/Divider';\nimport BaseBox from '~components/Box/BaseBox';\nimport type { TextProps, TextVariant } from '~components/Typography';\nimport { Text } from '~components/Typography';\nimport type { IconComponent } from '~components/Icons';\nimport { minHeight } from '~components/Button/BaseButton/buttonTokens';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport type { TestID } from '~utils/types';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport { makeSpace } from '~utils/makeSpace';\nimport { getComponentId, isValidAllowedChildren } from '~utils/isValidAllowedChildren';\nimport { throwBladeError } from '~utils/logger';\nimport { useVerifyAllowedChildren } from '~utils/useVerifyAllowedChildren/useVerifyAllowedChildren';\nimport type { AmountProps } from '~components/Amount';\nimport { Amount } from '~components/Amount';\n\nconst _CardHeaderIcon = ({ icon: Icon }: { icon: IconComponent }): React.ReactElement => {\n  useVerifyInsideCard('CardHeaderIcon');\n\n  return <Icon color=\"surface.icon.gray.normal\" size=\"large\" />;\n};\nconst CardHeaderIcon = assignWithoutSideEffects(_CardHeaderIcon, {\n  componentId: ComponentIds.CardHeaderIcon,\n});\n\nconst _CardHeaderCounter = (props: CounterProps): React.ReactElement => {\n  useVerifyInsideCard('CardHeaderCounter');\n\n  return <Counter {...props} />;\n};\nconst CardHeaderCounter = assignWithoutSideEffects(_CardHeaderCounter, {\n  componentId: ComponentIds.CardHeaderCounter,\n});\n\nconst _CardHeaderBadge = (props: BadgeProps): React.ReactElement => {\n  useVerifyInsideCard('CardHeaderBadge');\n\n  return <Badge {...props} />;\n};\nconst CardHeaderBadge = assignWithoutSideEffects(_CardHeaderBadge, {\n  componentId: ComponentIds.CardHeaderBadge,\n});\n\nconst _CardHeaderAmount = (props: AmountProps): React.ReactElement => {\n  useVerifyInsideCard('CardHeaderAmount');\n\n  return <Amount {...props} />;\n};\n\nconst CardHeaderAmount = assignWithoutSideEffects(_CardHeaderAmount, {\n  componentId: ComponentIds.CardHeaderAmount,\n});\n\nconst _CardHeaderText = (props: TextProps<{ variant: TextVariant }>): React.ReactElement => {\n  useVerifyInsideCard('CardHeaderText');\n\n  return <Text textAlign=\"left\" {...props} />;\n};\nconst CardHeaderText = assignWithoutSideEffects(_CardHeaderText, {\n  componentId: ComponentIds.CardHeaderText,\n});\n\nconst _CardHeaderLink = (props: LinkProps): React.ReactElement => {\n  useVerifyInsideCard('CardHeaderLink');\n\n  return <Link {...props} />;\n};\nconst CardHeaderLink = assignWithoutSideEffects(_CardHeaderLink, {\n  componentId: ComponentIds.CardHeaderLink,\n});\n\ntype CardHeaderIconButtonProps = Omit<\n  ButtonProps,\n  'variant' | 'size' | 'iconPosition' | 'isFullWidth' | 'children'\n> & {\n  icon: IconComponent;\n};\n\nconst _CardHeaderIconButton = (props: CardHeaderIconButtonProps): React.ReactElement => {\n  useVerifyInsideCard('CardHeaderIconButton');\n\n  return (\n    <BaseBox width={makeSpace(minHeight.xsmall)}>\n      <Button {...props} variant=\"tertiary\" size=\"xsmall\" iconPosition=\"left\" isFullWidth />\n    </BaseBox>\n  );\n};\nconst CardHeaderIconButton = assignWithoutSideEffects(_CardHeaderIconButton, {\n  componentId: ComponentIds.CardHeaderIconButton,\n});\n\ntype CardHeaderProps = {\n  children?: React.ReactNode;\n  /**\n   * For spacing between divider and header title\n   */\n  paddingBottom?: CardSpacingValueType;\n  /**\n   * For spacing between body content and divider\n   */\n  marginBottom?: CardSpacingValueType;\n  /**\n   * @default true\n   */\n  showDivider?: boolean;\n} & TestID;\n\nconst _CardHeader = ({\n  children,\n  testID,\n  marginBottom = 'spacing.4',\n  paddingBottom = 'spacing.4',\n  showDivider = true,\n}: CardHeaderProps): React.ReactElement => {\n  useVerifyInsideCard('CardHeader');\n  useVerifyAllowedChildren({\n    children,\n    componentName: 'CardHeader',\n    allowedComponents: [ComponentIds.CardHeaderLeading, ComponentIds.CardHeaderTrailing],\n  });\n\n  return (\n    <BaseBox\n      marginBottom={marginBottom}\n      {...metaAttribute({ name: MetaConstants.CardHeader, testID })}\n    >\n      <BaseBox\n        paddingBottom={paddingBottom}\n        display=\"flex\"\n        flexDirection=\"row\"\n        justifyContent=\"space-between\"\n      >\n        {children}\n      </BaseBox>\n      {showDivider ? <Divider /> : null}\n    </BaseBox>\n  );\n};\nconst CardHeader = assignWithoutSideEffects(_CardHeader, { componentId: ComponentIds.CardHeader });\n\ntype CardHeaderLeadingProps = {\n  title: string;\n  subtitle?: string;\n  /**\n   * prefix element of Card\n   *\n   * Accepts: `CardHeaderIcon` component\n   */\n  prefix?: React.ReactNode;\n  /**\n   * suffix element of Card\n   *\n   * Accepts: `CardHeaderCounter` component\n   */\n  suffix?: React.ReactNode;\n};\nconst _CardHeaderLeading = ({\n  title,\n  subtitle,\n  prefix,\n  suffix,\n}: CardHeaderLeadingProps): React.ReactElement => {\n  useVerifyInsideCard('CardHeaderLeading');\n\n  if (__DEV__) {\n    if (prefix && !isValidAllowedChildren(prefix, ComponentIds.CardHeaderIcon)) {\n      throwBladeError({\n        message: `Only \\`${ComponentIds.CardHeaderIcon}\\` component is accepted in prefix`,\n        moduleName: 'CardHeaderLeading',\n      });\n    }\n\n    if (suffix && !isValidAllowedChildren(suffix, ComponentIds.CardHeaderCounter)) {\n      throwBladeError({\n        message: `Only \\`${ComponentIds.CardHeaderCounter}\\` component is accepted in prefix`,\n        moduleName: 'CardHeaderLeading',\n      });\n    }\n  }\n\n  return (\n    <BaseBox flex={1} display=\"flex\" flexDirection=\"row\">\n      <BaseBox marginRight=\"spacing.3\" alignSelf=\"center\" display=\"flex\">\n        {prefix}\n      </BaseBox>\n      <BaseBox marginRight=\"spacing.5\">\n        <BaseBox display=\"flex\" flexDirection=\"row\" alignItems=\"center\" flexWrap=\"wrap\">\n          <Text color=\"surface.text.gray.normal\" size=\"large\" weight=\"semibold\">\n            {title}\n          </Text>\n          <BaseBox marginLeft=\"spacing.3\">{suffix}</BaseBox>\n        </BaseBox>\n        {subtitle && (\n          <Text color=\"surface.text.gray.subtle\" textAlign=\"left\" size=\"small\">\n            {subtitle}\n          </Text>\n        )}\n      </BaseBox>\n    </BaseBox>\n  );\n};\nconst CardHeaderLeading = assignWithoutSideEffects(_CardHeaderLeading, {\n  componentId: ComponentIds.CardHeaderLeading,\n});\n\ntype CardHeaderTrailingProps = {\n  /**\n   * Renders a visual ornament in card header trailing section\n   *\n   * Accepts: `CardHeaderLink`, `CardHeaderText`, `CardHeaderIconButton`, `CardHeaderBadge`\n   */\n  visual?: React.ReactNode;\n};\n\nconst headerTrailingAllowedComponents = [\n  ComponentIds.CardHeaderLink,\n  ComponentIds.CardHeaderText,\n  ComponentIds.CardHeaderIconButton,\n  ComponentIds.CardHeaderBadge,\n  ComponentIds.CardHeaderAmount,\n];\n\nconst _CardHeaderTrailing = ({ visual }: CardHeaderTrailingProps): React.ReactElement => {\n  useVerifyInsideCard('CardHeaderTrailing');\n\n  if (__DEV__) {\n    if (visual && !headerTrailingAllowedComponents.includes(getComponentId(visual)!)) {\n      throwBladeError({\n        message: `Only one of \\`${headerTrailingAllowedComponents.join(\n          ', ',\n        )}\\` component is accepted in visual`,\n        moduleName: 'CardHeaderTrailing',\n      });\n    }\n  }\n\n  return <BaseBox alignSelf=\"center\">{visual}</BaseBox>;\n};\nconst CardHeaderTrailing = assignWithoutSideEffects(_CardHeaderTrailing, {\n  componentId: ComponentIds.CardHeaderTrailing,\n});\n\nexport {\n  CardHeader,\n  CardHeaderLeading,\n  CardHeaderTrailing,\n  CardHeaderBadge,\n  CardHeaderIcon,\n  CardHeaderCounter,\n  CardHeaderText,\n  CardHeaderLink,\n  CardHeaderAmount,\n  CardHeaderIconButton,\n};\n"],"names":["_CardHeaderIcon","_ref","Icon","icon","useVerifyInsideCard","_jsx","color","size","CardHeaderIcon","assignWithoutSideEffects","componentId","ComponentIds","_CardHeaderCounter","props","Counter","_objectSpread","CardHeaderCounter","_CardHeaderBadge","Badge","CardHeaderBadge","_CardHeaderAmount","Amount","CardHeaderAmount","_CardHeaderText","Text","textAlign","CardHeaderText","_CardHeaderLink","Link","CardHeaderLink","_CardHeaderIconButton","BaseBox","width","makeSpace","minHeight","xsmall","children","Button","variant","iconPosition","isFullWidth","CardHeaderIconButton","_CardHeader","_ref2","testID","_ref2$marginBottom","marginBottom","_ref2$paddingBottom","paddingBottom","_ref2$showDivider","showDivider","useVerifyAllowedChildren","componentName","allowedComponents","CardHeaderLeading","CardHeaderTrailing","_jsxs","metaAttribute","name","MetaConstants","CardHeader","display","flexDirection","justifyContent","Divider","_CardHeaderLeading","_ref3","title","subtitle","prefix","suffix","isValidAllowedChildren","throwBladeError","message","concat","moduleName","flex","marginRight","alignSelf","alignItems","flexWrap","weight","marginLeft","headerTrailingAllowedComponents","_CardHeaderTrailing","_ref4","visual","includes","getComponentId","join"],"mappings":"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"}

package/build/lib/web/production/components/Card/CardRoot.web.js

@@ -28,10 +28,10 @@ var StyledCardRoot = /*#__PURE__*/styled(BaseBox).withConfig({
     shouldScaleOnHover = _ref.shouldScaleOnHover,
     isPressed = _ref.isPressed,
     isMobile = _ref.isMobile;
-  var selectedColor = isSelected ? theme.colors.brand.primary[500] : 'transparent';
+  var selectedColor = isSelected ? theme.colors.surface.border.primary.normal : 'transparent';
   var selectedBorder = "0px 0px 0px ".concat(theme.border.width.thicker, "px ").concat(selectedColor);
   //  focused state
-  var focusRing = isFocused ? ", 0px 0px 0px 4px ".concat(theme.colors.brand.primary[400]) : '';
+  var focusRing = isFocused ? ", 0px 0px 0px 4px ".concat(theme.colors.surface.border.primary.muted) : '';
   return _objectSpread(_objectSpread(_objectSpread({
     // Selected state
     boxShadow: "".concat(selectedBorder).concat(focusRing),