@moderneinc/design-system-components 7.1.0-next.d21647 → 7.1.0

package/dist/index.js

@@ -967,17 +967,21 @@ ModButtonTab.displayName = 'ModButtonTab';
  *
  * Custom styling:
  * - Rounded-rectangle border (borderRadius.button)
- * - Size variants (small=32px, medium=40px)
+ * - Size variants (small=24px, medium=40px)
  * - Border colors using semantic tokens
  * - Selected state colors from design system tokens
  */
 const StyledButtonTabGroup = styles.styled(MuiToggleButtonGroup)(({ theme, size = 'medium' }) => {
     const sizeStyles = {
         small: {
-            height: designSystemTokens.spacing.spacing_4,
+            height: designSystemTokens.spacing.spacing_3,
+            padding: `0 ${designSystemTokens.spacing.spacing_1_1_2}px`,
+            fontSize: designSystemTokens.typography.fontSize.caption,
         },
         medium: {
             height: designSystemTokens.spacing.spacing_5,
+            padding: `${designSystemTokens.spacing.spacing_1}px ${designSystemTokens.spacing.spacing_2}px`,
+            fontSize: designSystemTokens.typography.fontSize.sm,
         },
     };
     return {
@@ -989,8 +993,8 @@ const StyledButtonTabGroup = styles.styled(MuiToggleButtonGroup)(({ theme, size
             flex: 1,
             minWidth: 'auto',
             height: sizeStyles[size].height,
-            padding: `${designSystemTokens.spacing.spacing_1}px ${designSystemTokens.spacing.spacing_2}px`,
-            fontSize: theme.typography.pxToRem(designSystemTokens.typography.fontSize.sm),
+            padding: sizeStyles[size].padding,
+            fontSize: theme.typography.pxToRem(sizeStyles[size].fontSize),
             fontWeight: designSystemTokens.typography.fontWeight.regular,
             lineHeight: 1,
             textTransform: 'none',
@@ -1802,7 +1806,7 @@ const StyledMenuItem = styles.styled(MenuItem)(({ theme }) => ({
     borderRadius: 0,
     color: designSystemTokens.semanticColors.color.icon.default,
     textDecoration: 'none',
-    fontSize: theme.typography.pxToRem(designSystemTokens.typography.fontSize.default),
+    fontSize: theme.typography.pxToRem(designSystemTokens.typography.fontSize.caption),
     fontWeight: designSystemTokens.typography.fontWeight.regular,
     lineHeight: '20px',
     transition: theme.transitions.create(['background-color'], {
@@ -1822,6 +1826,7 @@ const StyledMenuItem = styles.styled(MenuItem)(({ theme }) => ({
     },
     [`&.${MenuItem.menuItemClasses.focusVisible}`]: {
         backgroundColor: designSystemTokens.semanticColors.color.surface.rowHover,
+        outline: 'none',
     },
 }));
 const MenuItemContent = styles.styled('div')({
@@ -1899,7 +1904,11 @@ function ModMenuItem({ icon, shortcut, secondaryText, children, component, href,
     // root is `button` (as of @mui/material 9.2) — so an `href` on the default root lands as
     // an attribute on the `<li>` and never navigates (#722). Root at an anchor instead,
     // unless the caller named a component (e.g. a router link) themselves.
-    const rootProps = { ...rest, href, component: component ?? (href ? 'a' : undefined) };
+    const rootProps = {
+        ...rest,
+        href,
+        component: component ?? (href ? 'a' : undefined),
+    };
     return (jsxRuntime.jsx(StyledMenuItem, { ...rootProps, children: jsxRuntime.jsxs(MenuItemContent, { children: [icon && jsxRuntime.jsx(IconWrapper$1, { children: icon }), jsxRuntime.jsxs(LabelContainer$3, { children: [jsxRuntime.jsx(Label$3, { children: children }), secondaryText && jsxRuntime.jsx(SecondaryLabel, { children: secondaryText })] }), shortcut && jsxRuntime.jsx(Shortcut, { children: shortcut })] }) }));
 }
 ModMenuItem.displayName = 'ModMenuItem';
@@ -2409,7 +2418,7 @@ function ModDataGridColumnsButton() {
 }
 ModDataGridColumnsButton.displayName = 'ModDataGridColumnsButton';
 
-const sizeStyles$1 = {
+const sizeStyles$2 = {
     small: {
         height: 16,
         minWidth: 16,
@@ -2506,7 +2515,7 @@ const StyledChip$2 = styles.styled(Chip, {
     lineHeight: designSystemTokens.semanticTypography.chip.lineHeight,
     fontWeight: designSystemTokens.semanticTypography.chip.fontWeight,
     overflow: 'visible',
-    ...(size && sizeStyles$1[size]),
+    ...(size && sizeStyles$2[size]),
     [`& .${Chip.chipClasses.label}`]: {
         padding: 0,
         overflow: 'visible',
@@ -5320,12 +5329,24 @@ const ModRipplingDot = props => (jsxRuntime.jsx(material.Box, { "aria-hidden": "
     } }));
 ModRipplingDot.displayName = 'ModRipplingDot';
 
-const StyledSearchChip = styles.styled(InputBase)(({ theme }) => ({
+const sizeStyles$1 = {
+    small: {
+        height: designSystemTokens.height.input.dense,
+        padding: `0 ${designSystemTokens.spacing.spacing_1_1_4}px`,
+    },
+    medium: {
+        height: designSystemTokens.height.input.default,
+        padding: `0 ${designSystemTokens.spacing.spacing_1_1_2}px`,
+    },
+};
+const StyledSearchChip = styles.styled(InputBase, {
+    shouldForwardProp: prop => prop !== 'size' && !isMuiInternalProp(prop),
+})(({ theme, size = 'medium' }) => ({
     borderRadius: designSystemTokens.borderRadius.button,
     border: `1px solid ${designSystemTokens.semanticColors.color.border.primary}`,
     backgroundColor: designSystemTokens.semanticColors.color.surface.raised,
-    height: 40,
-    padding: `0 ${designSystemTokens.spacing.spacing_1_1_2}px`,
+    height: sizeStyles$1[size].height,
+    padding: sizeStyles$1[size].padding,
     gap: designSystemTokens.spacing.spacing_1_2,
     fontSize: theme.typography.pxToRem(designSystemTokens.typography.fontSize.sm),
     fontWeight: designSystemTokens.typography.fontWeight.medium,
@@ -5390,6 +5411,10 @@ const ClearButton = styles.styled(ButtonBase)({
  *
  * @example
  * <ModSearchChip placeholder="Search titles" value={query} onChange={handleChange} onClear={handleClear} />
+ *
+ * @example
+ * // Small size
+ * <ModSearchChip size="small" placeholder="Search titles" value={query} onChange={handleChange} />
  */
 const ModSearchChip = ({ onClear, value, ...props }) => {
     const hasValue = Boolean(value && String(value).length > 0);