@razorpay/blade 12.28.0 → 12.29.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/build/lib/native/components/Card/Card.js +1 -1
  2. package/build/lib/native/components/Card/Card.js.map +1 -1
  3. package/build/lib/web/development/components/Card/Card.js +3 -1
  4. package/build/lib/web/development/components/Card/Card.js.map +1 -1
  5. package/build/lib/web/production/components/Card/Card.js +3 -1
  6. package/build/lib/web/production/components/Card/Card.js.map +1 -1
  7. package/build/types/components/index.d.ts +8 -0
  8. package/build/types/components/index.native.d.ts +8 -0
  9. package/package.json +1 -1
package/build/lib/native/components/Card/Card.js CHANGED
@@ -21,7 +21,7 @@ import { useVerifyAllowedChildren } from '../../utils/useVerifyAllowedChildren/u
21
21
  import { makeAnalyticsAttribute } from '../../utils/makeAnalyticsAttribute/makeAnalyticsAttribute.js';
22
22
  import { jsx, jsxs } from 'react/jsx-runtime';
23
23
 
24
- var _excluded=["children","backgroundColor","borderRadius","elevation","testID","padding","width","height","minHeight","minWidth","onClick","isSelected","accessibilityLabel","shouldScaleOnHover","onHover","href","target","rel","as"],_excluded2=["height","children","testID"];var ComponentIds={CardHeader:'CardHeader',CardHeaderTrailing:'CardHeaderTrailing',CardHeaderLeading:'CardHeaderLeading',CardFooter:'CardFooter',CardFooterTrailing:'CardFooterTrailing',CardFooterLeading:'CardFooterLeading',CardBody:'CardBody',CardHeaderIcon:'CardHeaderIcon',CardHeaderCounter:'CardHeaderCounter',CardHeaderBadge:'CardHeaderBadge',CardHeaderAmount:'CardHeaderAmount',CardHeaderText:'CardHeaderText',CardHeaderLink:'CardHeaderLink',CardHeaderIconButton:'CardHeaderIconButton'};var _Card=function _Card(_ref,ref){var children=_ref.children,_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,_ref$padding=_ref.padding,padding=_ref$padding===void 0?'spacing.7':_ref$padding,width=_ref.width,height=_ref.height,minHeight=_ref.minHeight,minWidth=_ref.minWidth,onClick=_ref.onClick,_ref$isSelected=_ref.isSelected,isSelected=_ref$isSelected===void 0?false:_ref$isSelected,accessibilityLabel=_ref.accessibilityLabel,_ref$shouldScaleOnHov=_ref.shouldScaleOnHover,shouldScaleOnHover=_ref$shouldScaleOnHov===void 0?false:_ref$shouldScaleOnHov,onHover=_ref.onHover,href=_ref.href,target=_ref.target,rel=_ref.rel,as=_ref.as,rest=_objectWithoutProperties(_ref,_excluded);var _React$useState=React__default.useState(false),_React$useState2=_slicedToArray(_React$useState,2),isFocused=_React$useState2[0],setIsFocused=_React$useState2[1];useVerifyAllowedChildren({children:children,componentName:'Card',allowedComponents:[ComponentIds.CardHeader,ComponentIds.CardBody,ComponentIds.CardFooter]});var linkOverlayProps=Object.assign({},metaAttribute({name:CARD_LINK_OVERLAY_ID}),makeAccessible({label:accessibilityLabel,pressed:href?undefined:isSelected}),{onFocus:function onFocus(){setIsFocused(true);},onBlur:function onBlur(){setIsFocused(false);}});var defaultRel=target&&target==='_blank'?'noreferrer noopener':undefined;return jsx(CardProvider,{children:jsx(CardRoot,Object.assign({as:as,ref:ref,display:'block',borderRadius:borderRadius,onMouseEnter:onHover,shouldScaleOnHover:shouldScaleOnHover,isSelected:isSelected,isFocused:isFocused,onClick:isReactNative()?onClick:undefined,width:width,height:height,minHeight:minHeight,minWidth:minWidth,href:href,accessibilityLabel:accessibilityLabel},metaAttribute({name:MetaConstants.Card,testID:testID}),getStyledProps(rest),makeAnalyticsAttribute(rest),{children:jsxs(CardSurface,{height:height,minHeight:minHeight,padding:padding,borderRadius:borderRadius,elevation:elevation,textAlign:'left',backgroundColor:backgroundColor,children:[href?jsx(LinkOverlay,Object.assign({onClick:onClick,href:href,target:target,rel:rel!=null?rel:defaultRel},linkOverlayProps)):null,!href&&onClick?jsx(LinkOverlay,Object.assign({as:"button",onClick:onClick},linkOverlayProps)):null,children]})}))});};var _CardBody=function _CardBody(_ref2){var height=_ref2.height,children=_ref2.children,testID=_ref2.testID,rest=_objectWithoutProperties(_ref2,_excluded2);useVerifyInsideCard('CardBody');return jsx(BaseBox,Object.assign({},metaAttribute({name:MetaConstants.CardBody,testID:testID}),makeAnalyticsAttribute(rest),{height:height,children:children}));};var Card=React__default.forwardRef(_Card);var CardBody=assignWithoutSideEffects(_CardBody,{componentId:ComponentIds.CardBody});
24
+ var _excluded=["children","backgroundColor","borderRadius","elevation","testID","padding","width","height","minHeight","minWidth","maxWidth","onClick","isSelected","accessibilityLabel","shouldScaleOnHover","onHover","href","target","rel","as"],_excluded2=["height","children","testID"];var ComponentIds={CardHeader:'CardHeader',CardHeaderTrailing:'CardHeaderTrailing',CardHeaderLeading:'CardHeaderLeading',CardFooter:'CardFooter',CardFooterTrailing:'CardFooterTrailing',CardFooterLeading:'CardFooterLeading',CardBody:'CardBody',CardHeaderIcon:'CardHeaderIcon',CardHeaderCounter:'CardHeaderCounter',CardHeaderBadge:'CardHeaderBadge',CardHeaderAmount:'CardHeaderAmount',CardHeaderText:'CardHeaderText',CardHeaderLink:'CardHeaderLink',CardHeaderIconButton:'CardHeaderIconButton'};var _Card=function _Card(_ref,ref){var children=_ref.children,_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,_ref$padding=_ref.padding,padding=_ref$padding===void 0?'spacing.7':_ref$padding,width=_ref.width,height=_ref.height,minHeight=_ref.minHeight,minWidth=_ref.minWidth,maxWidth=_ref.maxWidth,onClick=_ref.onClick,_ref$isSelected=_ref.isSelected,isSelected=_ref$isSelected===void 0?false:_ref$isSelected,accessibilityLabel=_ref.accessibilityLabel,_ref$shouldScaleOnHov=_ref.shouldScaleOnHover,shouldScaleOnHover=_ref$shouldScaleOnHov===void 0?false:_ref$shouldScaleOnHov,onHover=_ref.onHover,href=_ref.href,target=_ref.target,rel=_ref.rel,as=_ref.as,rest=_objectWithoutProperties(_ref,_excluded);var _React$useState=React__default.useState(false),_React$useState2=_slicedToArray(_React$useState,2),isFocused=_React$useState2[0],setIsFocused=_React$useState2[1];useVerifyAllowedChildren({children:children,componentName:'Card',allowedComponents:[ComponentIds.CardHeader,ComponentIds.CardBody,ComponentIds.CardFooter]});var linkOverlayProps=Object.assign({},metaAttribute({name:CARD_LINK_OVERLAY_ID}),makeAccessible({label:accessibilityLabel,pressed:href?undefined:isSelected}),{onFocus:function onFocus(){setIsFocused(true);},onBlur:function onBlur(){setIsFocused(false);}});var defaultRel=target&&target==='_blank'?'noreferrer noopener':undefined;return jsx(CardProvider,{children:jsx(CardRoot,Object.assign({as:as,ref:ref,display:'block',borderRadius:borderRadius,onMouseEnter:onHover,shouldScaleOnHover:shouldScaleOnHover,isSelected:isSelected,isFocused:isFocused,onClick:isReactNative()?onClick:undefined,width:width,height:height,minHeight:minHeight,minWidth:minWidth,maxWidth:maxWidth,href:href,accessibilityLabel:accessibilityLabel},metaAttribute({name:MetaConstants.Card,testID:testID}),getStyledProps(rest),makeAnalyticsAttribute(rest),{children:jsxs(CardSurface,{height:height,minHeight:minHeight,padding:padding,borderRadius:borderRadius,elevation:elevation,textAlign:'left',backgroundColor:backgroundColor,children:[href?jsx(LinkOverlay,Object.assign({onClick:onClick,href:href,target:target,rel:rel!=null?rel:defaultRel},linkOverlayProps)):null,!href&&onClick?jsx(LinkOverlay,Object.assign({as:"button",onClick:onClick},linkOverlayProps)):null,children]})}))});};var _CardBody=function _CardBody(_ref2){var height=_ref2.height,children=_ref2.children,testID=_ref2.testID,rest=_objectWithoutProperties(_ref2,_excluded2);useVerifyInsideCard('CardBody');return jsx(BaseBox,Object.assign({},metaAttribute({name:MetaConstants.CardBody,testID:testID}),makeAnalyticsAttribute(rest),{height:height,children:children}));};var Card=React__default.forwardRef(_Card);var CardBody=assignWithoutSideEffects(_CardBody,{componentId:ComponentIds.CardBody});
25
25
 
26
26
  export { Card, CardBody, ComponentIds };
27
27
  //# sourceMappingURL=Card.js.map
package/build/lib/native/components/Card/Card.js.map CHANGED
@@ -1 +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 { 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 { DataAnalyticsAttribute, BladeElementRef, 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';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\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--docs\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--docs\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 * **This prop is deprecated in favour of motion presets released in v12**\n *\n * ### Migration\n *\n * ```diff\n * - <Card\n * - shouldScaleOnHover\n * - />\n *\n * + <Scale motionTriggers={['hover']}>\n * + <Card />\n * + </Scale>\n * ```\n *\n * @default false\n *\n * @deprecated This prop is deprecated in favour of motion presets released in v12\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 DataAnalyticsAttribute &\n StyledPropsBlade;\n\nconst _Card: React.ForwardRefRenderFunction<BladeElementRef, CardProps> = (\n {\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 ...rest\n },\n ref,\n): 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: href ? undefined : 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 ref={ref as never}\n display={'block' as never}\n borderRadius={borderRadius}\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(rest)}\n {...makeAnalyticsAttribute(rest)}\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 DataAnalyticsAttribute;\n\nconst _CardBody = ({ height, children, testID, ...rest }: CardBodyProps): React.ReactElement => {\n useVerifyInsideCard('CardBody');\n\n return (\n <BaseBox\n {...metaAttribute({ name: MetaConstants.CardBody, testID })}\n {...makeAnalyticsAttribute(rest)}\n height={height}\n >\n {children}\n </BaseBox>\n );\n};\n\nconst Card = React.forwardRef(_Card);\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","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","rest","_objectWithoutProperties","_excluded","_React$useState","React","useState","_React$useState2","_slicedToArray","isFocused","setIsFocused","useVerifyAllowedChildren","componentName","allowedComponents","linkOverlayProps","Object","assign","metaAttribute","name","CARD_LINK_OVERLAY_ID","makeAccessible","label","pressed","undefined","onFocus","onBlur","defaultRel","_jsx","CardProvider","CardRoot","display","onMouseEnter","isReactNative","MetaConstants","Card","getStyledProps","makeAnalyticsAttribute","_jsxs","CardSurface","textAlign","LinkOverlay","_CardBody","_ref2","_excluded2","useVerifyInsideCard","BaseBox","forwardRef","assignWithoutSideEffects","componentId"],"mappings":"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"}
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 { 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 { DataAnalyticsAttribute, BladeElementRef, 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';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\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--docs\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--docs\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 * Sets maximum width of the card\n */\n maxWidth?: BoxProps['maxWidth'];\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 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 * **This prop is deprecated in favour of motion presets released in v12**\n *\n * ### Migration\n *\n * ```diff\n * - <Card\n * - shouldScaleOnHover\n * - />\n *\n * + <Scale motionTriggers={['hover']}>\n * + <Card />\n * + </Scale>\n * ```\n *\n * @default false\n *\n * @deprecated This prop is deprecated in favour of motion presets released in v12\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 DataAnalyticsAttribute &\n StyledPropsBlade;\n\nconst _Card: React.ForwardRefRenderFunction<BladeElementRef, CardProps> = (\n {\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 maxWidth,\n onClick,\n isSelected = false,\n accessibilityLabel,\n shouldScaleOnHover = false,\n onHover,\n href,\n target,\n rel,\n as,\n ...rest\n },\n ref,\n): 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: href ? undefined : 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 ref={ref as never}\n display={'block' as never}\n borderRadius={borderRadius}\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 maxWidth={maxWidth}\n href={href}\n accessibilityLabel={accessibilityLabel}\n {...metaAttribute({ name: MetaConstants.Card, testID })}\n {...getStyledProps(rest)}\n {...makeAnalyticsAttribute(rest)}\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 DataAnalyticsAttribute;\n\nconst _CardBody = ({ height, children, testID, ...rest }: CardBodyProps): React.ReactElement => {\n useVerifyInsideCard('CardBody');\n\n return (\n <BaseBox\n {...metaAttribute({ name: MetaConstants.CardBody, testID })}\n {...makeAnalyticsAttribute(rest)}\n height={height}\n >\n {children}\n </BaseBox>\n );\n};\n\nconst Card = React.forwardRef(_Card);\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","ref","children","_ref$backgroundColor","backgroundColor","_ref$borderRadius","borderRadius","_ref$elevation","elevation","testID","_ref$padding","padding","width","height","minHeight","minWidth","maxWidth","onClick","_ref$isSelected","isSelected","accessibilityLabel","_ref$shouldScaleOnHov","shouldScaleOnHover","onHover","href","target","rel","as","rest","_objectWithoutProperties","_excluded","_React$useState","React","useState","_React$useState2","_slicedToArray","isFocused","setIsFocused","useVerifyAllowedChildren","componentName","allowedComponents","linkOverlayProps","Object","assign","metaAttribute","name","CARD_LINK_OVERLAY_ID","makeAccessible","label","pressed","undefined","onFocus","onBlur","defaultRel","_jsx","CardProvider","CardRoot","display","onMouseEnter","isReactNative","MetaConstants","Card","getStyledProps","makeAnalyticsAttribute","_jsxs","CardSurface","textAlign","LinkOverlay","_CardBody","_ref2","_excluded2","useVerifyInsideCard","BaseBox","forwardRef","assignWithoutSideEffects","componentId"],"mappings":"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"}
package/build/lib/web/development/components/Card/Card.js CHANGED
@@ -25,7 +25,7 @@ import { makeAnalyticsAttribute } from '../../utils/makeAnalyticsAttribute/makeA
25
25
  import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
26
26
  import { assignWithoutSideEffects } from '../../utils/assignWithoutSideEffects/assignWithoutSideEffects.js';
27
27
 
28
- var _excluded = ["children", "backgroundColor", "borderRadius", "elevation", "testID", "padding", "width", "height", "minHeight", "minWidth", "onClick", "isSelected", "accessibilityLabel", "shouldScaleOnHover", "onHover", "href", "target", "rel", "as"],
28
+ var _excluded = ["children", "backgroundColor", "borderRadius", "elevation", "testID", "padding", "width", "height", "minHeight", "minWidth", "maxWidth", "onClick", "isSelected", "accessibilityLabel", "shouldScaleOnHover", "onHover", "href", "target", "rel", "as"],
29
29
  _excluded2 = ["height", "children", "testID"];
30
30
  function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
31
31
  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -60,6 +60,7 @@ var _Card = function _Card(_ref, ref) {
60
60
  height = _ref.height,
61
61
  minHeight = _ref.minHeight,
62
62
  minWidth = _ref.minWidth,
63
+ maxWidth = _ref.maxWidth,
63
64
  onClick = _ref.onClick,
64
65
  _ref$isSelected = _ref.isSelected,
65
66
  isSelected = _ref$isSelected === void 0 ? false : _ref$isSelected,
@@ -112,6 +113,7 @@ var _Card = function _Card(_ref, ref) {
112
113
  height: height,
113
114
  minHeight: minHeight,
114
115
  minWidth: minWidth,
116
+ maxWidth: maxWidth,
115
117
  href: href,
116
118
  accessibilityLabel: accessibilityLabel
117
119
  }, metaAttribute({
package/build/lib/web/development/components/Card/Card.js.map CHANGED
@@ -1 +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 { 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 { DataAnalyticsAttribute, BladeElementRef, 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';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\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--docs\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--docs\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 * **This prop is deprecated in favour of motion presets released in v12**\n *\n * ### Migration\n *\n * ```diff\n * - <Card\n * - shouldScaleOnHover\n * - />\n *\n * + <Scale motionTriggers={['hover']}>\n * + <Card />\n * + </Scale>\n * ```\n *\n * @default false\n *\n * @deprecated This prop is deprecated in favour of motion presets released in v12\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 DataAnalyticsAttribute &\n StyledPropsBlade;\n\nconst _Card: React.ForwardRefRenderFunction<BladeElementRef, CardProps> = (\n {\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 ...rest\n },\n ref,\n): 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: href ? undefined : 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 ref={ref as never}\n display={'block' as never}\n borderRadius={borderRadius}\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(rest)}\n {...makeAnalyticsAttribute(rest)}\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 DataAnalyticsAttribute;\n\nconst _CardBody = ({ height, children, testID, ...rest }: CardBodyProps): React.ReactElement => {\n useVerifyInsideCard('CardBody');\n\n return (\n <BaseBox\n {...metaAttribute({ name: MetaConstants.CardBody, testID })}\n {...makeAnalyticsAttribute(rest)}\n height={height}\n >\n {children}\n </BaseBox>\n );\n};\n\nconst Card = React.forwardRef(_Card);\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","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","rest","_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","undefined","onFocus","onBlur","defaultRel","_jsx","CardProvider","CardRoot","display","onMouseEnter","isReactNative","MetaConstants","Card","getStyledProps","makeAnalyticsAttribute","_jsxs","CardSurface","textAlign","LinkOverlay","_CardBody","_ref2","_excluded2","useVerifyInsideCard","BaseBox","forwardRef","assignWithoutSideEffects","componentId"],"mappings":"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"}
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 { 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 { DataAnalyticsAttribute, BladeElementRef, 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';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\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--docs\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--docs\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 * Sets maximum width of the card\n */\n maxWidth?: BoxProps['maxWidth'];\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 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 * **This prop is deprecated in favour of motion presets released in v12**\n *\n * ### Migration\n *\n * ```diff\n * - <Card\n * - shouldScaleOnHover\n * - />\n *\n * + <Scale motionTriggers={['hover']}>\n * + <Card />\n * + </Scale>\n * ```\n *\n * @default false\n *\n * @deprecated This prop is deprecated in favour of motion presets released in v12\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 DataAnalyticsAttribute &\n StyledPropsBlade;\n\nconst _Card: React.ForwardRefRenderFunction<BladeElementRef, CardProps> = (\n {\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 maxWidth,\n onClick,\n isSelected = false,\n accessibilityLabel,\n shouldScaleOnHover = false,\n onHover,\n href,\n target,\n rel,\n as,\n ...rest\n },\n ref,\n): 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: href ? undefined : 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 ref={ref as never}\n display={'block' as never}\n borderRadius={borderRadius}\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 maxWidth={maxWidth}\n href={href}\n accessibilityLabel={accessibilityLabel}\n {...metaAttribute({ name: MetaConstants.Card, testID })}\n {...getStyledProps(rest)}\n {...makeAnalyticsAttribute(rest)}\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 DataAnalyticsAttribute;\n\nconst _CardBody = ({ height, children, testID, ...rest }: CardBodyProps): React.ReactElement => {\n useVerifyInsideCard('CardBody');\n\n return (\n <BaseBox\n {...metaAttribute({ name: MetaConstants.CardBody, testID })}\n {...makeAnalyticsAttribute(rest)}\n height={height}\n >\n {children}\n </BaseBox>\n );\n};\n\nconst Card = React.forwardRef(_Card);\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","ref","children","_ref$backgroundColor","backgroundColor","_ref$borderRadius","borderRadius","_ref$elevation","elevation","testID","_ref$padding","padding","width","height","minHeight","minWidth","maxWidth","onClick","_ref$isSelected","isSelected","accessibilityLabel","_ref$shouldScaleOnHov","shouldScaleOnHover","onHover","href","target","rel","as","rest","_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","undefined","onFocus","onBlur","defaultRel","_jsx","CardProvider","CardRoot","display","onMouseEnter","isReactNative","MetaConstants","Card","getStyledProps","makeAnalyticsAttribute","_jsxs","CardSurface","textAlign","LinkOverlay","_CardBody","_ref2","_excluded2","useVerifyInsideCard","BaseBox","forwardRef","assignWithoutSideEffects","componentId"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwBO,IAAMA,YAAY,GAAG;AAC1BC,EAAAA,UAAU,EAAE,YAAY;AACxBC,EAAAA,kBAAkB,EAAE,oBAAoB;AACxCC,EAAAA,iBAAiB,EAAE,mBAAmB;AACtCC,EAAAA,UAAU,EAAE,YAAY;AACxBC,EAAAA,kBAAkB,EAAE,oBAAoB;AACxCC,EAAAA,iBAAiB,EAAE,mBAAmB;AACtCC,EAAAA,QAAQ,EAAE,UAAU;AACpBC,EAAAA,cAAc,EAAE,gBAAgB;AAChCC,EAAAA,iBAAiB,EAAE,mBAAmB;AACtCC,EAAAA,eAAe,EAAE,iBAAiB;AAClCC,EAAAA,gBAAgB,EAAE,kBAAkB;AACpCC,EAAAA,cAAc,EAAE,gBAAgB;AAChCC,EAAAA,cAAc,EAAE,gBAAgB;AAChCC,EAAAA,oBAAoB,EAAE,sBAAA;AACxB,EAAC;AA2ID,IAAMC,KAAiE,GAAG,SAApEA,KAAiEA,CAAAC,IAAA,EAwBrEC,GAAG,EACoB;AAAA,EAAA,IAvBrBC,QAAQ,GAAAF,IAAA,CAARE,QAAQ;IAAAC,oBAAA,GAAAH,IAAA,CACRI,eAAe;AAAfA,IAAAA,eAAe,GAAAD,oBAAA,KAAG,KAAA,CAAA,GAAA,iCAAiC,GAAAA,oBAAA;IAAAE,iBAAA,GAAAL,IAAA,CACnDM,YAAY;AAAZA,IAAAA,YAAY,GAAAD,iBAAA,KAAG,KAAA,CAAA,GAAA,QAAQ,GAAAA,iBAAA;IAAAE,cAAA,GAAAP,IAAA,CACvBQ,SAAS;AAATA,IAAAA,SAAS,GAAAD,cAAA,KAAG,KAAA,CAAA,GAAA,WAAW,GAAAA,cAAA;IACvBE,MAAM,GAAAT,IAAA,CAANS,MAAM;IAAAC,YAAA,GAAAV,IAAA,CACNW,OAAO;AAAPA,IAAAA,OAAO,GAAAD,YAAA,KAAG,KAAA,CAAA,GAAA,WAAW,GAAAA,YAAA;IACrBE,KAAK,GAAAZ,IAAA,CAALY,KAAK;IACLC,MAAM,GAAAb,IAAA,CAANa,MAAM;IACNC,SAAS,GAAAd,IAAA,CAATc,SAAS;IACTC,QAAQ,GAAAf,IAAA,CAARe,QAAQ;IACRC,QAAQ,GAAAhB,IAAA,CAARgB,QAAQ;IACRC,OAAO,GAAAjB,IAAA,CAAPiB,OAAO;IAAAC,eAAA,GAAAlB,IAAA,CACPmB,UAAU;AAAVA,IAAAA,UAAU,GAAAD,eAAA,KAAG,KAAA,CAAA,GAAA,KAAK,GAAAA,eAAA;IAClBE,kBAAkB,GAAApB,IAAA,CAAlBoB,kBAAkB;IAAAC,qBAAA,GAAArB,IAAA,CAClBsB,kBAAkB;AAAlBA,IAAAA,kBAAkB,GAAAD,qBAAA,KAAG,KAAA,CAAA,GAAA,KAAK,GAAAA,qBAAA;IAC1BE,OAAO,GAAAvB,IAAA,CAAPuB,OAAO;IACPC,IAAI,GAAAxB,IAAA,CAAJwB,IAAI;IACJC,MAAM,GAAAzB,IAAA,CAANyB,MAAM;IACNC,GAAG,GAAA1B,IAAA,CAAH0B,GAAG;IACHC,EAAE,GAAA3B,IAAA,CAAF2B,EAAE;AACCC,IAAAA,IAAI,GAAAC,wBAAA,CAAA7B,IAAA,EAAA8B,SAAA,CAAA,CAAA;AAIT,EAAA,IAAAC,eAAA,GAAkCC,cAAK,CAACC,QAAQ,CAAC,KAAK,CAAC;IAAAC,gBAAA,GAAAC,cAAA,CAAAJ,eAAA,EAAA,CAAA,CAAA;AAAhDK,IAAAA,SAAS,GAAAF,gBAAA,CAAA,CAAA,CAAA;AAAEG,IAAAA,YAAY,GAAAH,gBAAA,CAAA,CAAA,CAAA,CAAA;AAE9BI,EAAAA,wBAAwB,CAAC;AACvBpC,IAAAA,QAAQ,EAARA,QAAQ;AACRqC,IAAAA,aAAa,EAAE,MAAM;AACrBC,IAAAA,iBAAiB,EAAE,CAACxD,YAAY,CAACC,UAAU,EAAED,YAAY,CAACO,QAAQ,EAAEP,YAAY,CAACI,UAAU,CAAA;AAC7F,GAAC,CAAC,CAAA;EAEF,IAAMqD,gBAAkC,GAAAC,aAAA,CAAAA,aAAA,CAAAA,aAAA,CACnCC,EAAAA,EAAAA,aAAa,CAAC;AAAEC,IAAAA,IAAI,EAAEC,oBAAAA;GAAsB,CAAC,CAC7CC,EAAAA,cAAc,CAAC;AAAEC,IAAAA,KAAK,EAAE3B,kBAAkB;AAAE4B,IAAAA,OAAO,EAAExB,IAAI,GAAGyB,SAAS,GAAG9B,UAAAA;AAAW,GAAC,CAAC,CAAA,EAAA,EAAA,EAAA;IACxF+B,OAAO,EAAE,SAAAA,OAAAA,GAAM;MACbb,YAAY,CAAC,IAAI,CAAC,CAAA;KACnB;IACDc,MAAM,EAAE,SAAAA,MAAAA,GAAM;MACZd,YAAY,CAAC,KAAK,CAAC,CAAA;AACrB,KAAA;GACD,CAAA,CAAA;EACD,IAAMe,UAAU,GAAG3B,MAAM,IAAIA,MAAM,KAAK,QAAQ,GAAG,qBAAqB,GAAGwB,SAAS,CAAA;EAEpF,oBACEI,GAAA,CAACC,YAAY,EAAA;IAAApD,QAAA,eACXmD,GAAA,CAACE,QAAQ,EAAAb,aAAA,CAAAA,aAAA,CAAAA,aAAA,CAAAA,aAAA,CAAA;AACPf,MAAAA,EAAE,EAAEA,EAAG;AACP1B,MAAAA,GAAG,EAAEA,GAAa;AAClBuD,MAAAA,OAAO,EAAE,OAAiB;AAC1BlD,MAAAA,YAAY,EAAEA,YAAa;AAC3BmD,MAAAA,YAAY,EAAElC,OAAiB;AAC/BD,MAAAA,kBAAkB,EAAEA,kBAAmB;AACvCH,MAAAA,UAAU,EAAEA,UAAW;AACvBiB,MAAAA,SAAS,EAAEA,SAAAA;AACX;AAAA;AACAnB,MAAAA,OAAO,EAAEyC,aAAa,EAAE,GAAGzC,OAAO,GAAGgC,SAAU;AAC/CrC,MAAAA,KAAK,EAAEA,KAAM;AACbC,MAAAA,MAAM,EAAEA,MAAO;AACfC,MAAAA,SAAS,EAAEA,SAAU;AACrBC,MAAAA,QAAQ,EAAEA,QAAS;AACnBC,MAAAA,QAAQ,EAAEA,QAAS;AACnBQ,MAAAA,IAAI,EAAEA,IAAK;AACXJ,MAAAA,kBAAkB,EAAEA,kBAAAA;AAAmB,KAAA,EACnCuB,aAAa,CAAC;MAAEC,IAAI,EAAEe,aAAa,CAACC,IAAI;AAAEnD,MAAAA,MAAM,EAANA,MAAAA;KAAQ,CAAC,CACnDoD,EAAAA,cAAc,CAACjC,IAAI,CAAC,CACpBkC,EAAAA,sBAAsB,CAAClC,IAAI,CAAC,CAAA,EAAA,EAAA,EAAA;MAAA1B,QAAA,eAEhC6D,IAAA,CAACC,WAAW,EAAA;AACVnD,QAAAA,MAAM,EAAEA,MAAO;AACfC,QAAAA,SAAS,EAAEA,SAAU;AACrBH,QAAAA,OAAO,EAAEA,OAAQ;AACjBL,QAAAA,YAAY,EAAEA,YAAa;AAC3BE,QAAAA,SAAS,EAAEA,SAAU;AACrByD,QAAAA,SAAS,EAAE,MAAgB;AAC3B7D,QAAAA,eAAe,EAAEA,eAAgB;AAAAF,QAAAA,QAAA,GAEhCsB,IAAI,gBACH6B,GAAA,CAACa,WAAW,EAAAxB,aAAA,CAAA;AACVzB,UAAAA,OAAO,EAAEA,OAAQ;AACjBO,UAAAA,IAAI,EAAEA,IAAK;AACXC,UAAAA,MAAM,EAAEA,MAAO;AACfC,UAAAA,GAAG,EAAEA,GAAG,KAAA,IAAA,IAAHA,GAAG,KAAA,KAAA,CAAA,GAAHA,GAAG,GAAI0B,UAAAA;AAAW,SAAA,EACnBX,gBAAgB,CACrB,CAAC,GACA,IAAI,EACP,CAACjB,IAAI,IAAIP,OAAO,gBACfoC,GAAA,CAACa,WAAW,EAAAxB,aAAA,CAAA;AAACf,UAAAA,EAAE,EAAC,QAAQ;AAACV,UAAAA,OAAO,EAAEA,OAAAA;AAAQ,SAAA,EAAKwB,gBAAgB,CAAG,CAAC,GACjE,IAAI,EACPvC,QAAQ,CAAA;OACE,CAAA;KACL,CAAA,CAAA;AAAC,GACC,CAAC,CAAA;AAEnB,CAAC,CAAA;AAQD,IAAMiE,SAAS,GAAG,SAAZA,SAASA,CAAAC,KAAA,EAAiF;AAAA,EAAA,IAA3EvD,MAAM,GAAAuD,KAAA,CAANvD,MAAM;IAAEX,QAAQ,GAAAkE,KAAA,CAARlE,QAAQ;IAAEO,MAAM,GAAA2D,KAAA,CAAN3D,MAAM;AAAKmB,IAAAA,IAAI,GAAAC,wBAAA,CAAAuC,KAAA,EAAAC,UAAA,CAAA,CAAA;EACpDC,mBAAmB,CAAC,UAAU,CAAC,CAAA;EAE/B,oBACEjB,GAAA,CAACkB,OAAO,EAAA7B,aAAA,CAAAA,aAAA,CAAAA,aAAA,CACFC,EAAAA,EAAAA,aAAa,CAAC;IAAEC,IAAI,EAAEe,aAAa,CAACpE,QAAQ;AAAEkB,IAAAA,MAAM,EAANA,MAAAA;AAAO,GAAC,CAAC,CAAA,EACvDqD,sBAAsB,CAAClC,IAAI,CAAC,CAAA,EAAA,EAAA,EAAA;AAChCf,IAAAA,MAAM,EAAEA,MAAO;AAAAX,IAAAA,QAAA,EAEdA,QAAAA;AAAQ,GAAA,CACF,CAAC,CAAA;AAEd,CAAC,CAAA;AAED,IAAM0D,IAAI,gBAAG5B,cAAK,CAACwC,UAAU,CAACzE,KAAK,EAAC;AACpC,IAAMR,QAAQ,gBAAGkF,wBAAwB,CAACN,SAAS,EAAE;EAAEO,WAAW,EAAE1F,YAAY,CAACO,QAAAA;AAAS,CAAC;;;;"}
package/build/lib/web/production/components/Card/Card.js CHANGED
@@ -25,7 +25,7 @@ import { makeAnalyticsAttribute } from '../../utils/makeAnalyticsAttribute/makeA
25
25
  import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
26
26
  import { assignWithoutSideEffects } from '../../utils/assignWithoutSideEffects/assignWithoutSideEffects.js';
27
27
 
28
- var _excluded = ["children", "backgroundColor", "borderRadius", "elevation", "testID", "padding", "width", "height", "minHeight", "minWidth", "onClick", "isSelected", "accessibilityLabel", "shouldScaleOnHover", "onHover", "href", "target", "rel", "as"],
28
+ var _excluded = ["children", "backgroundColor", "borderRadius", "elevation", "testID", "padding", "width", "height", "minHeight", "minWidth", "maxWidth", "onClick", "isSelected", "accessibilityLabel", "shouldScaleOnHover", "onHover", "href", "target", "rel", "as"],
29
29
  _excluded2 = ["height", "children", "testID"];
30
30
  function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
31
31
  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -60,6 +60,7 @@ var _Card = function _Card(_ref, ref) {
60
60
  height = _ref.height,
61
61
  minHeight = _ref.minHeight,
62
62
  minWidth = _ref.minWidth,
63
+ maxWidth = _ref.maxWidth,
63
64
  onClick = _ref.onClick,
64
65
  _ref$isSelected = _ref.isSelected,
65
66
  isSelected = _ref$isSelected === void 0 ? false : _ref$isSelected,
@@ -112,6 +113,7 @@ var _Card = function _Card(_ref, ref) {
112
113
  height: height,
113
114
  minHeight: minHeight,
114
115
  minWidth: minWidth,
116
+ maxWidth: maxWidth,
115
117
  href: href,
116
118
  accessibilityLabel: accessibilityLabel
117
119
  }, metaAttribute({
package/build/lib/web/production/components/Card/Card.js.map CHANGED
@@ -1 +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 { 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 { DataAnalyticsAttribute, BladeElementRef, 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';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\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--docs\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--docs\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 * **This prop is deprecated in favour of motion presets released in v12**\n *\n * ### Migration\n *\n * ```diff\n * - <Card\n * - shouldScaleOnHover\n * - />\n *\n * + <Scale motionTriggers={['hover']}>\n * + <Card />\n * + </Scale>\n * ```\n *\n * @default false\n *\n * @deprecated This prop is deprecated in favour of motion presets released in v12\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 DataAnalyticsAttribute &\n StyledPropsBlade;\n\nconst _Card: React.ForwardRefRenderFunction<BladeElementRef, CardProps> = (\n {\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 ...rest\n },\n ref,\n): 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: href ? undefined : 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 ref={ref as never}\n display={'block' as never}\n borderRadius={borderRadius}\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(rest)}\n {...makeAnalyticsAttribute(rest)}\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 DataAnalyticsAttribute;\n\nconst _CardBody = ({ height, children, testID, ...rest }: CardBodyProps): React.ReactElement => {\n useVerifyInsideCard('CardBody');\n\n return (\n <BaseBox\n {...metaAttribute({ name: MetaConstants.CardBody, testID })}\n {...makeAnalyticsAttribute(rest)}\n height={height}\n >\n {children}\n </BaseBox>\n );\n};\n\nconst Card = React.forwardRef(_Card);\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","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","rest","_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","undefined","onFocus","onBlur","defaultRel","_jsx","CardProvider","CardRoot","display","onMouseEnter","isReactNative","MetaConstants","Card","getStyledProps","makeAnalyticsAttribute","_jsxs","CardSurface","textAlign","LinkOverlay","_CardBody","_ref2","_excluded2","useVerifyInsideCard","BaseBox","forwardRef","assignWithoutSideEffects","componentId"],"mappings":"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"}
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 { 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 { DataAnalyticsAttribute, BladeElementRef, 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';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\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--docs\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--docs\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 * Sets maximum width of the card\n */\n maxWidth?: BoxProps['maxWidth'];\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 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 * **This prop is deprecated in favour of motion presets released in v12**\n *\n * ### Migration\n *\n * ```diff\n * - <Card\n * - shouldScaleOnHover\n * - />\n *\n * + <Scale motionTriggers={['hover']}>\n * + <Card />\n * + </Scale>\n * ```\n *\n * @default false\n *\n * @deprecated This prop is deprecated in favour of motion presets released in v12\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 DataAnalyticsAttribute &\n StyledPropsBlade;\n\nconst _Card: React.ForwardRefRenderFunction<BladeElementRef, CardProps> = (\n {\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 maxWidth,\n onClick,\n isSelected = false,\n accessibilityLabel,\n shouldScaleOnHover = false,\n onHover,\n href,\n target,\n rel,\n as,\n ...rest\n },\n ref,\n): 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: href ? undefined : 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 ref={ref as never}\n display={'block' as never}\n borderRadius={borderRadius}\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 maxWidth={maxWidth}\n href={href}\n accessibilityLabel={accessibilityLabel}\n {...metaAttribute({ name: MetaConstants.Card, testID })}\n {...getStyledProps(rest)}\n {...makeAnalyticsAttribute(rest)}\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 DataAnalyticsAttribute;\n\nconst _CardBody = ({ height, children, testID, ...rest }: CardBodyProps): React.ReactElement => {\n useVerifyInsideCard('CardBody');\n\n return (\n <BaseBox\n {...metaAttribute({ name: MetaConstants.CardBody, testID })}\n {...makeAnalyticsAttribute(rest)}\n height={height}\n >\n {children}\n </BaseBox>\n );\n};\n\nconst Card = React.forwardRef(_Card);\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","ref","children","_ref$backgroundColor","backgroundColor","_ref$borderRadius","borderRadius","_ref$elevation","elevation","testID","_ref$padding","padding","width","height","minHeight","minWidth","maxWidth","onClick","_ref$isSelected","isSelected","accessibilityLabel","_ref$shouldScaleOnHov","shouldScaleOnHover","onHover","href","target","rel","as","rest","_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","undefined","onFocus","onBlur","defaultRel","_jsx","CardProvider","CardRoot","display","onMouseEnter","isReactNative","MetaConstants","Card","getStyledProps","makeAnalyticsAttribute","_jsxs","CardSurface","textAlign","LinkOverlay","_CardBody","_ref2","_excluded2","useVerifyInsideCard","BaseBox","forwardRef","assignWithoutSideEffects","componentId"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwBO,IAAMA,YAAY,GAAG;AAC1BC,EAAAA,UAAU,EAAE,YAAY;AACxBC,EAAAA,kBAAkB,EAAE,oBAAoB;AACxCC,EAAAA,iBAAiB,EAAE,mBAAmB;AACtCC,EAAAA,UAAU,EAAE,YAAY;AACxBC,EAAAA,kBAAkB,EAAE,oBAAoB;AACxCC,EAAAA,iBAAiB,EAAE,mBAAmB;AACtCC,EAAAA,QAAQ,EAAE,UAAU;AACpBC,EAAAA,cAAc,EAAE,gBAAgB;AAChCC,EAAAA,iBAAiB,EAAE,mBAAmB;AACtCC,EAAAA,eAAe,EAAE,iBAAiB;AAClCC,EAAAA,gBAAgB,EAAE,kBAAkB;AACpCC,EAAAA,cAAc,EAAE,gBAAgB;AAChCC,EAAAA,cAAc,EAAE,gBAAgB;AAChCC,EAAAA,oBAAoB,EAAE,sBAAA;AACxB,EAAC;AA2ID,IAAMC,KAAiE,GAAG,SAApEA,KAAiEA,CAAAC,IAAA,EAwBrEC,GAAG,EACoB;AAAA,EAAA,IAvBrBC,QAAQ,GAAAF,IAAA,CAARE,QAAQ;IAAAC,oBAAA,GAAAH,IAAA,CACRI,eAAe;AAAfA,IAAAA,eAAe,GAAAD,oBAAA,KAAG,KAAA,CAAA,GAAA,iCAAiC,GAAAA,oBAAA;IAAAE,iBAAA,GAAAL,IAAA,CACnDM,YAAY;AAAZA,IAAAA,YAAY,GAAAD,iBAAA,KAAG,KAAA,CAAA,GAAA,QAAQ,GAAAA,iBAAA;IAAAE,cAAA,GAAAP,IAAA,CACvBQ,SAAS;AAATA,IAAAA,SAAS,GAAAD,cAAA,KAAG,KAAA,CAAA,GAAA,WAAW,GAAAA,cAAA;IACvBE,MAAM,GAAAT,IAAA,CAANS,MAAM;IAAAC,YAAA,GAAAV,IAAA,CACNW,OAAO;AAAPA,IAAAA,OAAO,GAAAD,YAAA,KAAG,KAAA,CAAA,GAAA,WAAW,GAAAA,YAAA;IACrBE,KAAK,GAAAZ,IAAA,CAALY,KAAK;IACLC,MAAM,GAAAb,IAAA,CAANa,MAAM;IACNC,SAAS,GAAAd,IAAA,CAATc,SAAS;IACTC,QAAQ,GAAAf,IAAA,CAARe,QAAQ;IACRC,QAAQ,GAAAhB,IAAA,CAARgB,QAAQ;IACRC,OAAO,GAAAjB,IAAA,CAAPiB,OAAO;IAAAC,eAAA,GAAAlB,IAAA,CACPmB,UAAU;AAAVA,IAAAA,UAAU,GAAAD,eAAA,KAAG,KAAA,CAAA,GAAA,KAAK,GAAAA,eAAA;IAClBE,kBAAkB,GAAApB,IAAA,CAAlBoB,kBAAkB;IAAAC,qBAAA,GAAArB,IAAA,CAClBsB,kBAAkB;AAAlBA,IAAAA,kBAAkB,GAAAD,qBAAA,KAAG,KAAA,CAAA,GAAA,KAAK,GAAAA,qBAAA;IAC1BE,OAAO,GAAAvB,IAAA,CAAPuB,OAAO;IACPC,IAAI,GAAAxB,IAAA,CAAJwB,IAAI;IACJC,MAAM,GAAAzB,IAAA,CAANyB,MAAM;IACNC,GAAG,GAAA1B,IAAA,CAAH0B,GAAG;IACHC,EAAE,GAAA3B,IAAA,CAAF2B,EAAE;AACCC,IAAAA,IAAI,GAAAC,wBAAA,CAAA7B,IAAA,EAAA8B,SAAA,CAAA,CAAA;AAIT,EAAA,IAAAC,eAAA,GAAkCC,cAAK,CAACC,QAAQ,CAAC,KAAK,CAAC;IAAAC,gBAAA,GAAAC,cAAA,CAAAJ,eAAA,EAAA,CAAA,CAAA;AAAhDK,IAAAA,SAAS,GAAAF,gBAAA,CAAA,CAAA,CAAA;AAAEG,IAAAA,YAAY,GAAAH,gBAAA,CAAA,CAAA,CAAA,CAAA;AAE9BI,EAAAA,wBAAwB,CAAC;AACvBpC,IAAAA,QAAQ,EAARA,QAAQ;AACRqC,IAAAA,aAAa,EAAE,MAAM;AACrBC,IAAAA,iBAAiB,EAAE,CAACxD,YAAY,CAACC,UAAU,EAAED,YAAY,CAACO,QAAQ,EAAEP,YAAY,CAACI,UAAU,CAAA;AAC7F,GAAC,CAAC,CAAA;EAEF,IAAMqD,gBAAkC,GAAAC,aAAA,CAAAA,aAAA,CAAAA,aAAA,CACnCC,EAAAA,EAAAA,aAAa,CAAC;AAAEC,IAAAA,IAAI,EAAEC,oBAAAA;GAAsB,CAAC,CAC7CC,EAAAA,cAAc,CAAC;AAAEC,IAAAA,KAAK,EAAE3B,kBAAkB;AAAE4B,IAAAA,OAAO,EAAExB,IAAI,GAAGyB,SAAS,GAAG9B,UAAAA;AAAW,GAAC,CAAC,CAAA,EAAA,EAAA,EAAA;IACxF+B,OAAO,EAAE,SAAAA,OAAAA,GAAM;MACbb,YAAY,CAAC,IAAI,CAAC,CAAA;KACnB;IACDc,MAAM,EAAE,SAAAA,MAAAA,GAAM;MACZd,YAAY,CAAC,KAAK,CAAC,CAAA;AACrB,KAAA;GACD,CAAA,CAAA;EACD,IAAMe,UAAU,GAAG3B,MAAM,IAAIA,MAAM,KAAK,QAAQ,GAAG,qBAAqB,GAAGwB,SAAS,CAAA;EAEpF,oBACEI,GAAA,CAACC,YAAY,EAAA;IAAApD,QAAA,eACXmD,GAAA,CAACE,QAAQ,EAAAb,aAAA,CAAAA,aAAA,CAAAA,aAAA,CAAAA,aAAA,CAAA;AACPf,MAAAA,EAAE,EAAEA,EAAG;AACP1B,MAAAA,GAAG,EAAEA,GAAa;AAClBuD,MAAAA,OAAO,EAAE,OAAiB;AAC1BlD,MAAAA,YAAY,EAAEA,YAAa;AAC3BmD,MAAAA,YAAY,EAAElC,OAAiB;AAC/BD,MAAAA,kBAAkB,EAAEA,kBAAmB;AACvCH,MAAAA,UAAU,EAAEA,UAAW;AACvBiB,MAAAA,SAAS,EAAEA,SAAAA;AACX;AAAA;AACAnB,MAAAA,OAAO,EAAEyC,aAAa,EAAE,GAAGzC,OAAO,GAAGgC,SAAU;AAC/CrC,MAAAA,KAAK,EAAEA,KAAM;AACbC,MAAAA,MAAM,EAAEA,MAAO;AACfC,MAAAA,SAAS,EAAEA,SAAU;AACrBC,MAAAA,QAAQ,EAAEA,QAAS;AACnBC,MAAAA,QAAQ,EAAEA,QAAS;AACnBQ,MAAAA,IAAI,EAAEA,IAAK;AACXJ,MAAAA,kBAAkB,EAAEA,kBAAAA;AAAmB,KAAA,EACnCuB,aAAa,CAAC;MAAEC,IAAI,EAAEe,aAAa,CAACC,IAAI;AAAEnD,MAAAA,MAAM,EAANA,MAAAA;KAAQ,CAAC,CACnDoD,EAAAA,cAAc,CAACjC,IAAI,CAAC,CACpBkC,EAAAA,sBAAsB,CAAClC,IAAI,CAAC,CAAA,EAAA,EAAA,EAAA;MAAA1B,QAAA,eAEhC6D,IAAA,CAACC,WAAW,EAAA;AACVnD,QAAAA,MAAM,EAAEA,MAAO;AACfC,QAAAA,SAAS,EAAEA,SAAU;AACrBH,QAAAA,OAAO,EAAEA,OAAQ;AACjBL,QAAAA,YAAY,EAAEA,YAAa;AAC3BE,QAAAA,SAAS,EAAEA,SAAU;AACrByD,QAAAA,SAAS,EAAE,MAAgB;AAC3B7D,QAAAA,eAAe,EAAEA,eAAgB;AAAAF,QAAAA,QAAA,GAEhCsB,IAAI,gBACH6B,GAAA,CAACa,WAAW,EAAAxB,aAAA,CAAA;AACVzB,UAAAA,OAAO,EAAEA,OAAQ;AACjBO,UAAAA,IAAI,EAAEA,IAAK;AACXC,UAAAA,MAAM,EAAEA,MAAO;AACfC,UAAAA,GAAG,EAAEA,GAAG,KAAA,IAAA,IAAHA,GAAG,KAAA,KAAA,CAAA,GAAHA,GAAG,GAAI0B,UAAAA;AAAW,SAAA,EACnBX,gBAAgB,CACrB,CAAC,GACA,IAAI,EACP,CAACjB,IAAI,IAAIP,OAAO,gBACfoC,GAAA,CAACa,WAAW,EAAAxB,aAAA,CAAA;AAACf,UAAAA,EAAE,EAAC,QAAQ;AAACV,UAAAA,OAAO,EAAEA,OAAAA;AAAQ,SAAA,EAAKwB,gBAAgB,CAAG,CAAC,GACjE,IAAI,EACPvC,QAAQ,CAAA;OACE,CAAA;KACL,CAAA,CAAA;AAAC,GACC,CAAC,CAAA;AAEnB,CAAC,CAAA;AAQD,IAAMiE,SAAS,GAAG,SAAZA,SAASA,CAAAC,KAAA,EAAiF;AAAA,EAAA,IAA3EvD,MAAM,GAAAuD,KAAA,CAANvD,MAAM;IAAEX,QAAQ,GAAAkE,KAAA,CAARlE,QAAQ;IAAEO,MAAM,GAAA2D,KAAA,CAAN3D,MAAM;AAAKmB,IAAAA,IAAI,GAAAC,wBAAA,CAAAuC,KAAA,EAAAC,UAAA,CAAA,CAAA;EACpDC,mBAAmB,CAAC,UAAU,CAAC,CAAA;EAE/B,oBACEjB,GAAA,CAACkB,OAAO,EAAA7B,aAAA,CAAAA,aAAA,CAAAA,aAAA,CACFC,EAAAA,EAAAA,aAAa,CAAC;IAAEC,IAAI,EAAEe,aAAa,CAACpE,QAAQ;AAAEkB,IAAAA,MAAM,EAANA,MAAAA;AAAO,GAAC,CAAC,CAAA,EACvDqD,sBAAsB,CAAClC,IAAI,CAAC,CAAA,EAAA,EAAA,EAAA;AAChCf,IAAAA,MAAM,EAAEA,MAAO;AAAAX,IAAAA,QAAA,EAEdA,QAAAA;AAAQ,GAAA,CACF,CAAC,CAAA;AAEd,CAAC,CAAA;AAED,IAAM0D,IAAI,gBAAG5B,cAAK,CAACwC,UAAU,CAACzE,KAAK,EAAC;AACpC,IAAMR,QAAQ,gBAAGkF,wBAAwB,CAACN,SAAS,EAAE;EAAEO,WAAW,EAAE1F,YAAY,CAACO,QAAAA;AAAS,CAAC;;;;"}
package/build/types/components/index.d.ts CHANGED
@@ -9122,6 +9122,10 @@ type CardProps = {
9122
9122
  * Sets minimum width of the card
9123
9123
  */
9124
9124
  minWidth?: BoxProps['minWidth'];
9125
+ /**
9126
+ * Sets maximum width of the card
9127
+ */
9128
+ maxWidth?: BoxProps['maxWidth'];
9125
9129
  /**
9126
9130
  * If `true`, the card will be in selected state
9127
9131
  * Card will have a primary color border around it.
@@ -9250,6 +9254,10 @@ declare const Card: React__default.ForwardRefExoticComponent<{
9250
9254
  * Sets minimum width of the card
9251
9255
  */
9252
9256
  minWidth?: BoxProps['minWidth'];
9257
+ /**
9258
+ * Sets maximum width of the card
9259
+ */
9260
+ maxWidth?: BoxProps['maxWidth'];
9253
9261
  /**
9254
9262
  * If `true`, the card will be in selected state
9255
9263
  * Card will have a primary color border around it.
package/build/types/components/index.native.d.ts CHANGED
@@ -5676,6 +5676,10 @@ type CardProps = {
5676
5676
  * Sets minimum width of the card
5677
5677
  */
5678
5678
  minWidth?: BoxProps['minWidth'];
5679
+ /**
5680
+ * Sets maximum width of the card
5681
+ */
5682
+ maxWidth?: BoxProps['maxWidth'];
5679
5683
  /**
5680
5684
  * If `true`, the card will be in selected state
5681
5685
  * Card will have a primary color border around it.
@@ -5804,6 +5808,10 @@ declare const Card: React__default.ForwardRefExoticComponent<{
5804
5808
  * Sets minimum width of the card
5805
5809
  */
5806
5810
  minWidth?: BoxProps['minWidth'];
5811
+ /**
5812
+ * Sets maximum width of the card
5813
+ */
5814
+ maxWidth?: BoxProps['maxWidth'];
5807
5815
  /**
5808
5816
  * If `true`, the card will be in selected state
5809
5817
  * Card will have a primary color border around it.
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@razorpay/blade",
3
3
  "description": "The Design System that powers Razorpay",
4
- "version": "12.28.0",
4
+ "version": "12.29.0",
5
5
  "license": "MIT",
6
6
  "engines": {
7
7
  "node": ">=18.12.1"