@razorpay/blade 12.3.0 → 12.3.1
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.
- package/build/lib/web/development/components/Card/CardRoot.web.js +7 -1
- package/build/lib/web/development/components/Card/CardRoot.web.js.map +1 -1
- package/build/lib/web/production/components/Card/CardRoot.web.js +7 -1
- package/build/lib/web/production/components/Card/CardRoot.web.js.map +1 -1
- package/package.json +1 -1
|
@@ -45,12 +45,18 @@ var StyledCardRoot = /*#__PURE__*/styled(BaseBox).withConfig({
|
|
|
45
45
|
'&:hover': {
|
|
46
46
|
transform: "scale(".concat(CARD_SCALE_UP_VALUE, ")")
|
|
47
47
|
}
|
|
48
|
-
}), {}, _defineProperty(_defineProperty({}, "& a[href]:not(a[data-blade-component=\"".concat(CARD_LINK_OVERLAY_ID, "\"])"), {
|
|
48
|
+
}), {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "& a[href]:not(a[data-blade-component=\"".concat(CARD_LINK_OVERLAY_ID, "\"])"), {
|
|
49
49
|
zIndex: 2,
|
|
50
50
|
position: 'relative'
|
|
51
51
|
}), "& button:not(button[data-blade-component=\"".concat(CARD_LINK_OVERLAY_ID, "\"])"), {
|
|
52
52
|
zIndex: 2,
|
|
53
53
|
position: 'relative'
|
|
54
|
+
}), "& label:not(a[data-blade-component=\"".concat(CARD_LINK_OVERLAY_ID, "\"])"), {
|
|
55
|
+
zIndex: 2,
|
|
56
|
+
position: 'relative'
|
|
57
|
+
}), "& label:not(button[data-blade-component=\"".concat(CARD_LINK_OVERLAY_ID, "\"])"), {
|
|
58
|
+
zIndex: 2,
|
|
59
|
+
position: 'relative'
|
|
54
60
|
}));
|
|
55
61
|
});
|
|
56
62
|
var _CardRoot = function _CardRoot(_ref2, ref) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CardRoot.web.js","sources":["../../../../../../src/components/Card/CardRoot.web.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport React from 'react';\nimport type { CardRootProps } from './types';\nimport { CARD_LINK_OVERLAY_ID, CARD_SCALE_DOWN_VALUE, CARD_SCALE_UP_VALUE } from './constants';\nimport BaseBox from '~components/Box/BaseBox';\nimport { castWebType, makeMotionTime } from '~utils';\nimport { makeAccessible } from '~utils/makeAccessible';\nimport { useIsMobile } from '~utils/useIsMobile';\nimport type { BladeElementRef } from '~utils/types';\n\nconst StyledCardRoot = styled(BaseBox)<CardRootProps & { isPressed: boolean; isMobile: boolean }>(\n ({ as, theme, isSelected, isFocused, shouldScaleOnHover, isPressed, isMobile }) => {\n const selectedColor = isSelected ? theme.colors.surface.border.primary.normal : 'transparent';\n const selectedBorder = `0px 0px 0px ${theme.border.width.thicker}px ${selectedColor}`;\n // focused state\n const focusRing = isFocused\n ? `, 0px 0px 0px 4px ${theme.colors.surface.border.primary.muted}`\n : '';\n\n return {\n // Selected state\n boxShadow: `${selectedBorder}${focusRing}`,\n cursor: as === 'label' ? 'pointer' : 'initial',\n\n // pressed state for mobile only\n ...(isMobile &&\n isPressed && {\n transform: `scale(${CARD_SCALE_DOWN_VALUE})`,\n }),\n\n // Hover state for desktop only\n ...(!isMobile &&\n shouldScaleOnHover && {\n transitionDuration: castWebType(makeMotionTime(theme.motion.duration.xquick)),\n transitionTimingFunction: castWebType(theme.motion.easing.standard),\n transitionProperty: 'transform, box-shadow',\n\n '&:hover': {\n transform: `scale(${CARD_SCALE_UP_VALUE})`,\n },\n }),\n\n // uplift all the nested links so they receive clicks and events (except the LinkOverlay)\n // https://www.sarasoueidan.com/blog/nested-links\n [`& a[href]:not(a[data-blade-component=\"${CARD_LINK_OVERLAY_ID}\"])`]: {\n zIndex: 2,\n position: 'relative',\n },\n [`& button:not(button[data-blade-component=\"${CARD_LINK_OVERLAY_ID}\"])`]: {\n zIndex: 2,\n position: 'relative',\n },\n };\n },\n);\n\nconst _CardRoot: React.ForwardRefRenderFunction<BladeElementRef, CardRootProps> = (\n { as, accessibilityLabel, children, ...props },\n ref,\n): React.ReactElement => {\n const isMobile = useIsMobile();\n const [isPressed, setIsPressed] = React.useState(false);\n\n return (\n <StyledCardRoot\n ref={ref as never}\n as={as}\n {...props}\n isMobile={isMobile}\n isPressed={props.shouldScaleOnHover ? isPressed : false}\n onTouchStart={() => setIsPressed(true)}\n onTouchEnd={() => setIsPressed(false)}\n onMouseDown={() => setIsPressed(true)}\n onMouseUp={() => setIsPressed(false)}\n {...makeAccessible({\n label: as === 'label' ? accessibilityLabel : undefined,\n })}\n >\n {children}\n </StyledCardRoot>\n );\n};\n\nconst CardRoot = React.forwardRef(_CardRoot);\n\nexport { CardRoot };\n"],"names":["StyledCardRoot","styled","BaseBox","withConfig","displayName","componentId","_ref","as","theme","isSelected","isFocused","shouldScaleOnHover","isPressed","isMobile","selectedColor","colors","surface","border","primary","normal","selectedBorder","concat","width","thicker","focusRing","muted","_objectSpread","boxShadow","cursor","transform","CARD_SCALE_DOWN_VALUE","transitionDuration","castWebType","makeMotionTime","motion","duration","xquick","transitionTimingFunction","easing","standard","transitionProperty","CARD_SCALE_UP_VALUE","_defineProperty","CARD_LINK_OVERLAY_ID","zIndex","position","_CardRoot","_ref2","ref","accessibilityLabel","children","props","_objectWithoutProperties","_excluded","useIsMobile","_React$useState","React","useState","_React$useState2","_slicedToArray","setIsPressed","_jsx","onTouchStart","onTouchEnd","onMouseDown","onMouseUp","makeAccessible","label","undefined","CardRoot","forwardRef"],"mappings":";;;;;;;;;;;;;;;;;;;AAUA,IAAMA,cAAc,gBAAGC,MAAM,CAACC,OAAO,CAAC,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,6BAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CACpC,CAAA,CAAA,UAAAC,IAAA,EAAmF;AAAA,EAAA,IAAhFC,EAAE,GAAAD,IAAA,CAAFC,EAAE;IAAEC,KAAK,GAAAF,IAAA,CAALE,KAAK;IAAEC,UAAU,GAAAH,IAAA,CAAVG,UAAU;IAAEC,SAAS,GAAAJ,IAAA,CAATI,SAAS;IAAEC,kBAAkB,GAAAL,IAAA,CAAlBK,kBAAkB;IAAEC,SAAS,GAAAN,IAAA,CAATM,SAAS;IAAEC,QAAQ,GAAAP,IAAA,CAARO,QAAQ,CAAA;AAC1E,EAAA,IAAMC,aAAa,GAAGL,UAAU,GAAGD,KAAK,CAACO,MAAM,CAACC,OAAO,CAACC,MAAM,CAACC,OAAO,CAACC,MAAM,GAAG,aAAa,CAAA;AAC7F,EAAA,IAAMC,cAAc,GAAA,cAAA,CAAAC,MAAA,CAAkBb,KAAK,CAACS,MAAM,CAACK,KAAK,CAACC,OAAO,EAAA,KAAA,CAAA,CAAAF,MAAA,CAAMP,aAAa,CAAE,CAAA;AACrF;AACA,EAAA,IAAMU,SAAS,GAAGd,SAAS,wBAAAW,MAAA,CACFb,KAAK,CAACO,MAAM,CAACC,OAAO,CAACC,MAAM,CAACC,OAAO,CAACO,KAAK,IAC9D,EAAE,CAAA;AAEN,EAAA,OAAAC,aAAA,CAAAA,aAAA,CAAAA,aAAA,CAAA;AACE;IACAC,SAAS,EAAA,EAAA,CAAAN,MAAA,CAAKD,cAAc,EAAAC,MAAA,CAAGG,SAAS,CAAE;AAC1CI,IAAAA,MAAM,EAAErB,EAAE,KAAK,OAAO,GAAG,SAAS,GAAG,SAAA;GAGjCM,EAAAA,QAAQ,IACVD,SAAS,IAAI;IACXiB,SAAS,EAAA,QAAA,CAAAR,MAAA,CAAWS,qBAAqB,EAAA,GAAA,CAAA;AAC3C,GAAC,CAGC,EAAA,CAACjB,QAAQ,IACXF,kBAAkB,IAAI;AACpBoB,IAAAA,kBAAkB,EAAEC,WAAW,CAACC,cAAc,CAACzB,KAAK,CAAC0B,MAAM,CAACC,QAAQ,CAACC,MAAM,CAAC,CAAC;IAC7EC,wBAAwB,EAAEL,WAAW,CAACxB,KAAK,CAAC0B,MAAM,CAACI,MAAM,CAACC,QAAQ,CAAC;AACnEC,IAAAA,kBAAkB,EAAE,uBAAuB;AAE3C,IAAA,SAAS,EAAE;MACTX,SAAS,EAAA,QAAA,CAAAR,MAAA,CAAWoB,mBAAmB,EAAA,GAAA,CAAA;AACzC,KAAA;
|
|
1
|
+
{"version":3,"file":"CardRoot.web.js","sources":["../../../../../../src/components/Card/CardRoot.web.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport React from 'react';\nimport type { CardRootProps } from './types';\nimport { CARD_LINK_OVERLAY_ID, CARD_SCALE_DOWN_VALUE, CARD_SCALE_UP_VALUE } from './constants';\nimport BaseBox from '~components/Box/BaseBox';\nimport { castWebType, makeMotionTime } from '~utils';\nimport { makeAccessible } from '~utils/makeAccessible';\nimport { useIsMobile } from '~utils/useIsMobile';\nimport type { BladeElementRef } from '~utils/types';\n\nconst StyledCardRoot = styled(BaseBox)<CardRootProps & { isPressed: boolean; isMobile: boolean }>(\n ({ as, theme, isSelected, isFocused, shouldScaleOnHover, isPressed, isMobile }) => {\n const selectedColor = isSelected ? theme.colors.surface.border.primary.normal : 'transparent';\n const selectedBorder = `0px 0px 0px ${theme.border.width.thicker}px ${selectedColor}`;\n // focused state\n const focusRing = isFocused\n ? `, 0px 0px 0px 4px ${theme.colors.surface.border.primary.muted}`\n : '';\n\n return {\n // Selected state\n boxShadow: `${selectedBorder}${focusRing}`,\n cursor: as === 'label' ? 'pointer' : 'initial',\n\n // pressed state for mobile only\n ...(isMobile &&\n isPressed && {\n transform: `scale(${CARD_SCALE_DOWN_VALUE})`,\n }),\n\n // Hover state for desktop only\n ...(!isMobile &&\n shouldScaleOnHover && {\n transitionDuration: castWebType(makeMotionTime(theme.motion.duration.xquick)),\n transitionTimingFunction: castWebType(theme.motion.easing.standard),\n transitionProperty: 'transform, box-shadow',\n\n '&:hover': {\n transform: `scale(${CARD_SCALE_UP_VALUE})`,\n },\n }),\n\n // uplift all the nested links so they receive clicks and events (except the LinkOverlay)\n // https://www.sarasoueidan.com/blog/nested-links\n [`& a[href]:not(a[data-blade-component=\"${CARD_LINK_OVERLAY_ID}\"])`]: {\n zIndex: 2,\n position: 'relative',\n },\n [`& button:not(button[data-blade-component=\"${CARD_LINK_OVERLAY_ID}\"])`]: {\n zIndex: 2,\n position: 'relative',\n },\n [`& label:not(a[data-blade-component=\"${CARD_LINK_OVERLAY_ID}\"])`]: {\n zIndex: 2,\n position: 'relative',\n },\n [`& label:not(button[data-blade-component=\"${CARD_LINK_OVERLAY_ID}\"])`]: {\n zIndex: 2,\n position: 'relative',\n },\n };\n },\n);\n\nconst _CardRoot: React.ForwardRefRenderFunction<BladeElementRef, CardRootProps> = (\n { as, accessibilityLabel, children, ...props },\n ref,\n): React.ReactElement => {\n const isMobile = useIsMobile();\n const [isPressed, setIsPressed] = React.useState(false);\n\n return (\n <StyledCardRoot\n ref={ref as never}\n as={as}\n {...props}\n isMobile={isMobile}\n isPressed={props.shouldScaleOnHover ? isPressed : false}\n onTouchStart={() => setIsPressed(true)}\n onTouchEnd={() => setIsPressed(false)}\n onMouseDown={() => setIsPressed(true)}\n onMouseUp={() => setIsPressed(false)}\n {...makeAccessible({\n label: as === 'label' ? accessibilityLabel : undefined,\n })}\n >\n {children}\n </StyledCardRoot>\n );\n};\n\nconst CardRoot = React.forwardRef(_CardRoot);\n\nexport { CardRoot };\n"],"names":["StyledCardRoot","styled","BaseBox","withConfig","displayName","componentId","_ref","as","theme","isSelected","isFocused","shouldScaleOnHover","isPressed","isMobile","selectedColor","colors","surface","border","primary","normal","selectedBorder","concat","width","thicker","focusRing","muted","_objectSpread","boxShadow","cursor","transform","CARD_SCALE_DOWN_VALUE","transitionDuration","castWebType","makeMotionTime","motion","duration","xquick","transitionTimingFunction","easing","standard","transitionProperty","CARD_SCALE_UP_VALUE","_defineProperty","CARD_LINK_OVERLAY_ID","zIndex","position","_CardRoot","_ref2","ref","accessibilityLabel","children","props","_objectWithoutProperties","_excluded","useIsMobile","_React$useState","React","useState","_React$useState2","_slicedToArray","setIsPressed","_jsx","onTouchStart","onTouchEnd","onMouseDown","onMouseUp","makeAccessible","label","undefined","CardRoot","forwardRef"],"mappings":"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"}
|
|
@@ -45,12 +45,18 @@ var StyledCardRoot = /*#__PURE__*/styled(BaseBox).withConfig({
|
|
|
45
45
|
'&:hover': {
|
|
46
46
|
transform: "scale(".concat(CARD_SCALE_UP_VALUE, ")")
|
|
47
47
|
}
|
|
48
|
-
}), {}, _defineProperty(_defineProperty({}, "& a[href]:not(a[data-blade-component=\"".concat(CARD_LINK_OVERLAY_ID, "\"])"), {
|
|
48
|
+
}), {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "& a[href]:not(a[data-blade-component=\"".concat(CARD_LINK_OVERLAY_ID, "\"])"), {
|
|
49
49
|
zIndex: 2,
|
|
50
50
|
position: 'relative'
|
|
51
51
|
}), "& button:not(button[data-blade-component=\"".concat(CARD_LINK_OVERLAY_ID, "\"])"), {
|
|
52
52
|
zIndex: 2,
|
|
53
53
|
position: 'relative'
|
|
54
|
+
}), "& label:not(a[data-blade-component=\"".concat(CARD_LINK_OVERLAY_ID, "\"])"), {
|
|
55
|
+
zIndex: 2,
|
|
56
|
+
position: 'relative'
|
|
57
|
+
}), "& label:not(button[data-blade-component=\"".concat(CARD_LINK_OVERLAY_ID, "\"])"), {
|
|
58
|
+
zIndex: 2,
|
|
59
|
+
position: 'relative'
|
|
54
60
|
}));
|
|
55
61
|
});
|
|
56
62
|
var _CardRoot = function _CardRoot(_ref2, ref) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CardRoot.web.js","sources":["../../../../../../src/components/Card/CardRoot.web.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport React from 'react';\nimport type { CardRootProps } from './types';\nimport { CARD_LINK_OVERLAY_ID, CARD_SCALE_DOWN_VALUE, CARD_SCALE_UP_VALUE } from './constants';\nimport BaseBox from '~components/Box/BaseBox';\nimport { castWebType, makeMotionTime } from '~utils';\nimport { makeAccessible } from '~utils/makeAccessible';\nimport { useIsMobile } from '~utils/useIsMobile';\nimport type { BladeElementRef } from '~utils/types';\n\nconst StyledCardRoot = styled(BaseBox)<CardRootProps & { isPressed: boolean; isMobile: boolean }>(\n ({ as, theme, isSelected, isFocused, shouldScaleOnHover, isPressed, isMobile }) => {\n const selectedColor = isSelected ? theme.colors.surface.border.primary.normal : 'transparent';\n const selectedBorder = `0px 0px 0px ${theme.border.width.thicker}px ${selectedColor}`;\n // focused state\n const focusRing = isFocused\n ? `, 0px 0px 0px 4px ${theme.colors.surface.border.primary.muted}`\n : '';\n\n return {\n // Selected state\n boxShadow: `${selectedBorder}${focusRing}`,\n cursor: as === 'label' ? 'pointer' : 'initial',\n\n // pressed state for mobile only\n ...(isMobile &&\n isPressed && {\n transform: `scale(${CARD_SCALE_DOWN_VALUE})`,\n }),\n\n // Hover state for desktop only\n ...(!isMobile &&\n shouldScaleOnHover && {\n transitionDuration: castWebType(makeMotionTime(theme.motion.duration.xquick)),\n transitionTimingFunction: castWebType(theme.motion.easing.standard),\n transitionProperty: 'transform, box-shadow',\n\n '&:hover': {\n transform: `scale(${CARD_SCALE_UP_VALUE})`,\n },\n }),\n\n // uplift all the nested links so they receive clicks and events (except the LinkOverlay)\n // https://www.sarasoueidan.com/blog/nested-links\n [`& a[href]:not(a[data-blade-component=\"${CARD_LINK_OVERLAY_ID}\"])`]: {\n zIndex: 2,\n position: 'relative',\n },\n [`& button:not(button[data-blade-component=\"${CARD_LINK_OVERLAY_ID}\"])`]: {\n zIndex: 2,\n position: 'relative',\n },\n };\n },\n);\n\nconst _CardRoot: React.ForwardRefRenderFunction<BladeElementRef, CardRootProps> = (\n { as, accessibilityLabel, children, ...props },\n ref,\n): React.ReactElement => {\n const isMobile = useIsMobile();\n const [isPressed, setIsPressed] = React.useState(false);\n\n return (\n <StyledCardRoot\n ref={ref as never}\n as={as}\n {...props}\n isMobile={isMobile}\n isPressed={props.shouldScaleOnHover ? isPressed : false}\n onTouchStart={() => setIsPressed(true)}\n onTouchEnd={() => setIsPressed(false)}\n onMouseDown={() => setIsPressed(true)}\n onMouseUp={() => setIsPressed(false)}\n {...makeAccessible({\n label: as === 'label' ? accessibilityLabel : undefined,\n })}\n >\n {children}\n </StyledCardRoot>\n );\n};\n\nconst CardRoot = React.forwardRef(_CardRoot);\n\nexport { CardRoot };\n"],"names":["StyledCardRoot","styled","BaseBox","withConfig","displayName","componentId","_ref","as","theme","isSelected","isFocused","shouldScaleOnHover","isPressed","isMobile","selectedColor","colors","surface","border","primary","normal","selectedBorder","concat","width","thicker","focusRing","muted","_objectSpread","boxShadow","cursor","transform","CARD_SCALE_DOWN_VALUE","transitionDuration","castWebType","makeMotionTime","motion","duration","xquick","transitionTimingFunction","easing","standard","transitionProperty","CARD_SCALE_UP_VALUE","_defineProperty","CARD_LINK_OVERLAY_ID","zIndex","position","_CardRoot","_ref2","ref","accessibilityLabel","children","props","_objectWithoutProperties","_excluded","useIsMobile","_React$useState","React","useState","_React$useState2","_slicedToArray","setIsPressed","_jsx","onTouchStart","onTouchEnd","onMouseDown","onMouseUp","makeAccessible","label","undefined","CardRoot","forwardRef"],"mappings":";;;;;;;;;;;;;;;;;;;AAUA,IAAMA,cAAc,gBAAGC,MAAM,CAACC,OAAO,CAAC,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,6BAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CACpC,CAAA,CAAA,UAAAC,IAAA,EAAmF;AAAA,EAAA,IAAhFC,EAAE,GAAAD,IAAA,CAAFC,EAAE;IAAEC,KAAK,GAAAF,IAAA,CAALE,KAAK;IAAEC,UAAU,GAAAH,IAAA,CAAVG,UAAU;IAAEC,SAAS,GAAAJ,IAAA,CAATI,SAAS;IAAEC,kBAAkB,GAAAL,IAAA,CAAlBK,kBAAkB;IAAEC,SAAS,GAAAN,IAAA,CAATM,SAAS;IAAEC,QAAQ,GAAAP,IAAA,CAARO,QAAQ,CAAA;AAC1E,EAAA,IAAMC,aAAa,GAAGL,UAAU,GAAGD,KAAK,CAACO,MAAM,CAACC,OAAO,CAACC,MAAM,CAACC,OAAO,CAACC,MAAM,GAAG,aAAa,CAAA;AAC7F,EAAA,IAAMC,cAAc,GAAA,cAAA,CAAAC,MAAA,CAAkBb,KAAK,CAACS,MAAM,CAACK,KAAK,CAACC,OAAO,EAAA,KAAA,CAAA,CAAAF,MAAA,CAAMP,aAAa,CAAE,CAAA;AACrF;AACA,EAAA,IAAMU,SAAS,GAAGd,SAAS,wBAAAW,MAAA,CACFb,KAAK,CAACO,MAAM,CAACC,OAAO,CAACC,MAAM,CAACC,OAAO,CAACO,KAAK,IAC9D,EAAE,CAAA;AAEN,EAAA,OAAAC,aAAA,CAAAA,aAAA,CAAAA,aAAA,CAAA;AACE;IACAC,SAAS,EAAA,EAAA,CAAAN,MAAA,CAAKD,cAAc,EAAAC,MAAA,CAAGG,SAAS,CAAE;AAC1CI,IAAAA,MAAM,EAAErB,EAAE,KAAK,OAAO,GAAG,SAAS,GAAG,SAAA;GAGjCM,EAAAA,QAAQ,IACVD,SAAS,IAAI;IACXiB,SAAS,EAAA,QAAA,CAAAR,MAAA,CAAWS,qBAAqB,EAAA,GAAA,CAAA;AAC3C,GAAC,CAGC,EAAA,CAACjB,QAAQ,IACXF,kBAAkB,IAAI;AACpBoB,IAAAA,kBAAkB,EAAEC,WAAW,CAACC,cAAc,CAACzB,KAAK,CAAC0B,MAAM,CAACC,QAAQ,CAACC,MAAM,CAAC,CAAC;IAC7EC,wBAAwB,EAAEL,WAAW,CAACxB,KAAK,CAAC0B,MAAM,CAACI,MAAM,CAACC,QAAQ,CAAC;AACnEC,IAAAA,kBAAkB,EAAE,uBAAuB;AAE3C,IAAA,SAAS,EAAE;MACTX,SAAS,EAAA,QAAA,CAAAR,MAAA,CAAWoB,mBAAmB,EAAA,GAAA,CAAA;AACzC,KAAA;
|
|
1
|
+
{"version":3,"file":"CardRoot.web.js","sources":["../../../../../../src/components/Card/CardRoot.web.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport React from 'react';\nimport type { CardRootProps } from './types';\nimport { CARD_LINK_OVERLAY_ID, CARD_SCALE_DOWN_VALUE, CARD_SCALE_UP_VALUE } from './constants';\nimport BaseBox from '~components/Box/BaseBox';\nimport { castWebType, makeMotionTime } from '~utils';\nimport { makeAccessible } from '~utils/makeAccessible';\nimport { useIsMobile } from '~utils/useIsMobile';\nimport type { BladeElementRef } from '~utils/types';\n\nconst StyledCardRoot = styled(BaseBox)<CardRootProps & { isPressed: boolean; isMobile: boolean }>(\n ({ as, theme, isSelected, isFocused, shouldScaleOnHover, isPressed, isMobile }) => {\n const selectedColor = isSelected ? theme.colors.surface.border.primary.normal : 'transparent';\n const selectedBorder = `0px 0px 0px ${theme.border.width.thicker}px ${selectedColor}`;\n // focused state\n const focusRing = isFocused\n ? `, 0px 0px 0px 4px ${theme.colors.surface.border.primary.muted}`\n : '';\n\n return {\n // Selected state\n boxShadow: `${selectedBorder}${focusRing}`,\n cursor: as === 'label' ? 'pointer' : 'initial',\n\n // pressed state for mobile only\n ...(isMobile &&\n isPressed && {\n transform: `scale(${CARD_SCALE_DOWN_VALUE})`,\n }),\n\n // Hover state for desktop only\n ...(!isMobile &&\n shouldScaleOnHover && {\n transitionDuration: castWebType(makeMotionTime(theme.motion.duration.xquick)),\n transitionTimingFunction: castWebType(theme.motion.easing.standard),\n transitionProperty: 'transform, box-shadow',\n\n '&:hover': {\n transform: `scale(${CARD_SCALE_UP_VALUE})`,\n },\n }),\n\n // uplift all the nested links so they receive clicks and events (except the LinkOverlay)\n // https://www.sarasoueidan.com/blog/nested-links\n [`& a[href]:not(a[data-blade-component=\"${CARD_LINK_OVERLAY_ID}\"])`]: {\n zIndex: 2,\n position: 'relative',\n },\n [`& button:not(button[data-blade-component=\"${CARD_LINK_OVERLAY_ID}\"])`]: {\n zIndex: 2,\n position: 'relative',\n },\n [`& label:not(a[data-blade-component=\"${CARD_LINK_OVERLAY_ID}\"])`]: {\n zIndex: 2,\n position: 'relative',\n },\n [`& label:not(button[data-blade-component=\"${CARD_LINK_OVERLAY_ID}\"])`]: {\n zIndex: 2,\n position: 'relative',\n },\n };\n },\n);\n\nconst _CardRoot: React.ForwardRefRenderFunction<BladeElementRef, CardRootProps> = (\n { as, accessibilityLabel, children, ...props },\n ref,\n): React.ReactElement => {\n const isMobile = useIsMobile();\n const [isPressed, setIsPressed] = React.useState(false);\n\n return (\n <StyledCardRoot\n ref={ref as never}\n as={as}\n {...props}\n isMobile={isMobile}\n isPressed={props.shouldScaleOnHover ? isPressed : false}\n onTouchStart={() => setIsPressed(true)}\n onTouchEnd={() => setIsPressed(false)}\n onMouseDown={() => setIsPressed(true)}\n onMouseUp={() => setIsPressed(false)}\n {...makeAccessible({\n label: as === 'label' ? accessibilityLabel : undefined,\n })}\n >\n {children}\n </StyledCardRoot>\n );\n};\n\nconst CardRoot = React.forwardRef(_CardRoot);\n\nexport { CardRoot };\n"],"names":["StyledCardRoot","styled","BaseBox","withConfig","displayName","componentId","_ref","as","theme","isSelected","isFocused","shouldScaleOnHover","isPressed","isMobile","selectedColor","colors","surface","border","primary","normal","selectedBorder","concat","width","thicker","focusRing","muted","_objectSpread","boxShadow","cursor","transform","CARD_SCALE_DOWN_VALUE","transitionDuration","castWebType","makeMotionTime","motion","duration","xquick","transitionTimingFunction","easing","standard","transitionProperty","CARD_SCALE_UP_VALUE","_defineProperty","CARD_LINK_OVERLAY_ID","zIndex","position","_CardRoot","_ref2","ref","accessibilityLabel","children","props","_objectWithoutProperties","_excluded","useIsMobile","_React$useState","React","useState","_React$useState2","_slicedToArray","setIsPressed","_jsx","onTouchStart","onTouchEnd","onMouseDown","onMouseUp","makeAccessible","label","undefined","CardRoot","forwardRef"],"mappings":"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"}
|