@moderneinc/neo-styled-components 2.0.3-next.46edb3 → 2.0.3-next.9b94c6

package/dist/index.esm.js

@@ -4332,6 +4332,10 @@ NeoListItemButton.displayName = 'NeoListItemButton';
  * Combines focusWhite1 (inner white ring) and focusBlue2 (outer blue ring)
  */
 const focusRingShadow = `${shadows.focusWhite1.x}px ${shadows.focusWhite1.y}px ${shadows.focusWhite1.blur}px ${shadows.focusWhite1.spread}px ${shadows.focusWhite1.shadow}, ${shadows.focusBlue2.x}px ${shadows.focusBlue2.y}px ${shadows.focusBlue2.blur}px ${shadows.focusBlue2.spread}px ${shadows.focusBlue2.shadow}`;
+/**
+ * Card box-shadow using Neo design tokens for hover and selected states
+ */
+const activeShadow = `${shadows.card.x}px ${shadows.card.y}px ${shadows.card.blur}px ${shadows.card.spread}px ${shadows.card.shadow}`;
 /**
  * Styled Card component with Neo design tokens
  */
@@ -4344,17 +4348,17 @@ const StyledCard = styled(MuiCard, {
     display: 'flex',
     flexDirection: 'column',
     gap: theme.spacing(2), // 16px
-    backgroundColor: selected ? semanticColors.status.info.light : semanticColors.surfaces.card,
+    backgroundColor: semanticColors.surfaces.card,
     border: `1px solid ${selected ? semanticColors.border.tabActive : semanticColors.border.card}`,
     borderRadius: theme.typography.pxToRem(4),
-    boxShadow: 'none',
+    boxShadow: selected ? activeShadow : 'none',
     transition: theme.transitions.create(['border-color', 'background-color', 'box-shadow']),
     cursor: 'pointer',
     '&:hover': {
-        borderColor: selected ? semanticColors.border.tabActive : semanticColors.border.card,
+        borderColor: semanticColors.border.tabActive,
+        boxShadow: activeShadow,
     },
     '&:focus-visible': {
-        backgroundColor: semanticColors.status.info.light,
         borderColor: semanticColors.border.tabActive,
         boxShadow: focusRingShadow,
         outline: 'none',
@@ -4423,6 +4427,11 @@ const Description = styled('p')(({ theme }) => ({
     lineHeight: 1.5,
     color: colors.grey[800],
     width: '100%',
+    display: '-webkit-box',
+    WebkitLineClamp: 2,
+    WebkitBoxOrient: 'vertical',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
 }));
 /**
  * NeoMarketplaceCard - Selectable card component for marketplace items