@moderneinc/neo-styled-components 2.4.0 → 2.5.0

package/dist/index.esm.js

@@ -4,7 +4,7 @@ import Box from '@mui/material/Box';
 import { styled, alpha } from '@mui/material/styles';
 import Avatar from '@mui/material/Avatar';
 import Chip, { chipClasses } from '@mui/material/Chip';
-import SvgIcon from '@mui/material/SvgIcon';
+import SvgIcon, { svgIconClasses } from '@mui/material/SvgIcon';
 import Alert, { alertClasses } from '@mui/material/Alert';
 import IconButton, { iconButtonClasses } from '@mui/material/IconButton';
 import { forwardRef, createElement, useState, useMemo, useRef, useEffect } from 'react';
@@ -149,7 +149,10 @@ NeoAvatar.displayName = 'NeoAvatar';
 
 const StyledChip$1 = styled(Chip)(({ theme }) => ({
     height: 24,
-    padding: `${spacing.spacing_1_4}px ${spacing.spacing_1}px`,
+    paddingTop: spacing.spacing_1_4,
+    paddingBottom: spacing.spacing_1_4,
+    paddingLeft: spacing.spacing_1,
+    paddingRight: spacing.spacing_1,
     borderRadius: borderRadius.full,
     fontSize: theme.typography.pxToRem(typography.fontSize.xs),
     lineHeight: 1,
@@ -157,16 +160,19 @@ const StyledChip$1 = styled(Chip)(({ theme }) => ({
     gap: spacing.spacing_1_2,
     overflow: 'visible',
     [`& .${chipClasses.label}`]: {
-        padding: 0,
+        paddingLeft: 0,
+        paddingRight: 0,
         overflow: 'visible',
     },
     [`& .${chipClasses.icon}`]: {
-        margin: 0,
+        marginLeft: 0,
+        marginRight: 0,
         width: 12,
         height: 12,
     },
     [`& .${chipClasses.deleteIcon}`]: {
-        margin: 0,
+        marginLeft: 0,
+        marginRight: 0,
         width: 12,
         height: 12,
     },
@@ -493,7 +499,7 @@ const NeoActivityIndicatorCell = ({ event = 'commit-job', secondaryEvent, scene
 NeoActivityIndicatorCell.displayName = 'NeoActivityIndicatorCell';
 
 /**
- * @license lucide-react v0.563.0 - ISC
+ * @license lucide-react v0.564.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -504,7 +510,7 @@ const mergeClasses = (...classes) => classes.filter((className, index, array) =>
 }).join(" ").trim();
 
 /**
- * @license lucide-react v0.563.0 - ISC
+ * @license lucide-react v0.564.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -513,7 +519,7 @@ const mergeClasses = (...classes) => classes.filter((className, index, array) =>
 const toKebabCase = (string) => string.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
 
 /**
- * @license lucide-react v0.563.0 - ISC
+ * @license lucide-react v0.564.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -525,7 +531,7 @@ const toCamelCase = (string) => string.replace(
 );
 
 /**
- * @license lucide-react v0.563.0 - ISC
+ * @license lucide-react v0.564.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -538,7 +544,7 @@ const toPascalCase = (string) => {
 };
 
 /**
- * @license lucide-react v0.563.0 - ISC
+ * @license lucide-react v0.564.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -557,7 +563,7 @@ var defaultAttributes = {
 };
 
 /**
- * @license lucide-react v0.563.0 - ISC
+ * @license lucide-react v0.564.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -573,7 +579,7 @@ const hasA11yProp = (props) => {
 };
 
 /**
- * @license lucide-react v0.563.0 - ISC
+ * @license lucide-react v0.564.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -611,7 +617,7 @@ const Icon = forwardRef(
 );
 
 /**
- * @license lucide-react v0.563.0 - ISC
+ * @license lucide-react v0.564.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -636,7 +642,7 @@ const createLucideIcon = (iconName, iconNode) => {
 };
 
 /**
- * @license lucide-react v0.563.0 - ISC
+ * @license lucide-react v0.564.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -650,7 +656,7 @@ const __iconNode$h = [
 const ArrowDown = createLucideIcon("arrow-down", __iconNode$h);
 
 /**
- * @license lucide-react v0.563.0 - ISC
+ * @license lucide-react v0.564.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -664,7 +670,7 @@ const __iconNode$g = [
 const ArrowUp = createLucideIcon("arrow-up", __iconNode$g);
 
 /**
- * @license lucide-react v0.563.0 - ISC
+ * @license lucide-react v0.564.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -686,7 +692,7 @@ const __iconNode$f = [
 const CalendarDays = createLucideIcon("calendar-days", __iconNode$f);
 
 /**
- * @license lucide-react v0.563.0 - ISC
+ * @license lucide-react v0.564.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -697,7 +703,7 @@ const __iconNode$e = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]];
 const ChevronDown = createLucideIcon("chevron-down", __iconNode$e);
 
 /**
- * @license lucide-react v0.563.0 - ISC
+ * @license lucide-react v0.564.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -708,7 +714,7 @@ const __iconNode$d = [["path", { d: "m15 18-6-6 6-6", key: "1wnfg3" }]];
 const ChevronLeft = createLucideIcon("chevron-left", __iconNode$d);
 
 /**
- * @license lucide-react v0.563.0 - ISC
+ * @license lucide-react v0.564.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -719,7 +725,7 @@ const __iconNode$c = [["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]];
 const ChevronRight = createLucideIcon("chevron-right", __iconNode$c);
 
 /**
- * @license lucide-react v0.563.0 - ISC
+ * @license lucide-react v0.564.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -730,7 +736,7 @@ const __iconNode$b = [["path", { d: "m18 15-6-6-6 6", key: "153udz" }]];
 const ChevronUp = createLucideIcon("chevron-up", __iconNode$b);
 
 /**
- * @license lucide-react v0.563.0 - ISC
+ * @license lucide-react v0.564.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -744,7 +750,7 @@ const __iconNode$a = [
 const ChevronsUpDown = createLucideIcon("chevrons-up-down", __iconNode$a);
 
 /**
- * @license lucide-react v0.563.0 - ISC
+ * @license lucide-react v0.564.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -759,7 +765,7 @@ const __iconNode$9 = [
 const CircleAlert = createLucideIcon("circle-alert", __iconNode$9);
 
 /**
- * @license lucide-react v0.563.0 - ISC
+ * @license lucide-react v0.564.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -773,7 +779,7 @@ const __iconNode$8 = [
 const CircleCheck = createLucideIcon("circle-check", __iconNode$8);
 
 /**
- * @license lucide-react v0.563.0 - ISC
+ * @license lucide-react v0.564.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -788,7 +794,7 @@ const __iconNode$7 = [
 const CircleQuestionMark = createLucideIcon("circle-question-mark", __iconNode$7);
 
 /**
- * @license lucide-react v0.563.0 - ISC
+ * @license lucide-react v0.564.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -803,7 +809,7 @@ const __iconNode$6 = [
 const Columns3 = createLucideIcon("columns-3", __iconNode$6);
 
 /**
- * @license lucide-react v0.563.0 - ISC
+ * @license lucide-react v0.564.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -818,7 +824,7 @@ const __iconNode$5 = [
 const ListFilter = createLucideIcon("list-filter", __iconNode$5);
 
 /**
- * @license lucide-react v0.563.0 - ISC
+ * @license lucide-react v0.564.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -832,7 +838,7 @@ const __iconNode$4 = [
 const Plus = createLucideIcon("plus", __iconNode$4);
 
 /**
- * @license lucide-react v0.563.0 - ISC
+ * @license lucide-react v0.564.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -846,7 +852,7 @@ const __iconNode$3 = [
 const Search = createLucideIcon("search", __iconNode$3);
 
 /**
- * @license lucide-react v0.563.0 - ISC
+ * @license lucide-react v0.564.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -863,7 +869,7 @@ const __iconNode$2 = [
 const Trash2 = createLucideIcon("trash-2", __iconNode$2);
 
 /**
- * @license lucide-react v0.563.0 - ISC
+ * @license lucide-react v0.564.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -882,7 +888,7 @@ const __iconNode$1 = [
 const WifiOff = createLucideIcon("wifi-off", __iconNode$1);
 
 /**
- * @license lucide-react v0.563.0 - ISC
+ * @license lucide-react v0.564.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -972,7 +978,7 @@ const LinkText = styled('span')(({ variant = 'light' }) => {
         return colors.grey['800'];
     };
     return {
-        fontWeight: 600,
+        fontWeight: typography.fontWeight.semiBold,
         color: getLinkColor(),
         cursor: 'pointer',
         '&:hover': {
@@ -1116,7 +1122,7 @@ const StyledButtonBase$1 = styled(ButtonBase, {
         height: sizeStyles.height,
         padding: sizeStyles.padding,
         fontSize: sizeStyles.fontSize,
-        fontWeight: 500,
+        fontWeight: typography.fontWeight.medium,
         lineHeight: '1.25rem',
         borderRadius: borderRadius.button,
         textTransform: 'none',
@@ -1407,7 +1413,7 @@ const IndeterminateIcon = ({ size = 'medium' }) => (jsxs(SvgIcon, { viewBox: "0
 const CheckboxContainer = styled('label')(({ disabled }) => ({
     display: 'inline-flex',
     alignItems: 'flex-start',
-    gap: 8,
+    gap: spacing.spacing_1,
     cursor: disabled ? 'not-allowed' : 'pointer',
     userSelect: 'none',
 }));
@@ -1443,6 +1449,7 @@ const StyledCheckbox = styled(Checkbox, {
     const sizeConfig = {
         xs: {
             size: 12,
+            // biome-ignore plugin: Figma-exact 1px for xs — no matching token
             borderRadius: 1, // From Figma: 1px for xs
         },
         small: {
@@ -1611,7 +1618,7 @@ const StyledButtonBase = styled(ButtonBase, {
         fontFamily: typography.fontFamily.code,
         fontWeight: typography.fontWeight.regular,
         lineHeight: isMultiline ? 1.5 : size === 'xs' ? 1.2 : 'normal',
-        borderRadius: 4,
+        borderRadius: borderRadius.xS,
         textAlign: 'left',
         textTransform: 'none',
         gap: isMultiline ? undefined : theme.spacing(1.25), // 10px gap only for single-line
@@ -1714,7 +1721,7 @@ const StyledSearchField = styled(TextField)(({ theme }) => ({
             borderColor: semanticColors.buttons.primary.default,
         },
     },
-    '& .MuiInputAdornment-root': {
+    [`& .${inputAdornmentClasses.root}`]: {
         color: semanticColors.icons.placeholder,
         '& svg': {
             width: 20,
@@ -1733,6 +1740,7 @@ const MenuItemContent$1 = styled('div')(({ theme }) => ({
     alignItems: 'center',
     gap: theme.spacing(1),
     padding: theme.spacing(1),
+    // biome-ignore plugin: no exact token for 6px
     borderRadius: 6,
     width: '100%',
     '&:hover': {
@@ -1762,7 +1770,7 @@ const FooterRow = styled(Box)(({ theme }) => ({
 }));
 const ResetButton = styled(Button)(({ theme }) => ({
     fontSize: theme.typography.pxToRem(16),
-    fontWeight: 400,
+    fontWeight: typography.fontWeight.regular,
     color: semanticColors.buttons.primary.default,
     textTransform: 'none',
     padding: theme.spacing(1),
@@ -1874,7 +1882,7 @@ const LabelContainer$3 = styled('div')({
     flex: 1,
     display: 'flex',
     alignItems: 'center',
-    gap: 8,
+    gap: spacing.spacing_1,
     minWidth: 0,
 });
 const Label$2 = styled('span')({
@@ -1893,7 +1901,7 @@ const Shortcut = styled('span')(({ theme }) => ({
     marginLeft: 'auto',
     flexShrink: 0,
     border: `1px solid ${semanticColors.border.secondary}`,
-    borderRadius: 4,
+    borderRadius: borderRadius.xS,
     padding: `${theme.spacing(0.25)} ${theme.spacing(0.75)}`,
     backgroundColor: semanticColors.surfaces.white,
 }));
@@ -1996,7 +2004,7 @@ const NeoSelect = (props) => {
                     backgroundColor: semanticColors.surfaces.white,
                     borderRadius: `${borderRadius.s}px`,
                     border: `1px solid ${semanticColors.border.primary}`,
-                    boxShadow: '0px 4px 12px rgba(0, 0, 0, 0.1)',
+                    boxShadow: `${shadows.dropdown.x}px ${shadows.dropdown.y}px ${shadows.dropdown.blur}px ${shadows.dropdown.spread}px ${shadows.dropdown.shadow}`,
                     marginTop: 1,
                     ...props.MenuProps?.PaperProps?.sx,
                 },
@@ -2160,14 +2168,14 @@ const StyledGridFilterPanel = styled(GridFilterPanel)({
         height: 32, // NeoButton small size
         padding: `0 ${spacing.spacing_1}px`, // NeoButton link variant padding
         fontSize: typography.fontSize.sm,
-        fontWeight: 500,
+        fontWeight: typography.fontWeight.medium,
         lineHeight: 1.5,
         textTransform: 'none',
         minHeight: 'auto',
         backgroundColor: 'transparent',
         color: semanticColors.buttons.tertiary.default,
         border: 'none',
-        '& .MuiButton-startIcon': {
+        [`& .${buttonClasses.startIcon}`]: {
             display: 'none', // Hide the trash icon
         },
         '&:hover': {
@@ -2276,7 +2284,7 @@ const getDataGridHeaderStyles = () => {
         // Style the checkbox in header to match Neo design (16x16 from Figma)
         [`& .${gridClasses.columnHeaderCheckbox}`]: {
             padding: 0,
-            '& .MuiCheckbox-root': {
+            [`& .${checkboxClasses.root}`]: {
                 padding: 0,
                 width: 16,
                 height: 16,
@@ -2381,7 +2389,7 @@ function NeoDataGrid({ autoHeight = false, toolbar, slots, sx, density = 'standa
         // Fix for MUI X 8.15.0+ scroll shadow issue - backgroundColor must be on main, not root
         // See: https://github.com/mui/mui-x/issues/20107
         // This must be set to prevent scroll shadow artifacts
-        '& .MuiDataGrid-main': {
+        [`& .${gridClasses$1.main}`]: {
             backgroundColor: semanticColors.surfaces.white,
         },
         // White background for empty/loading overlays
@@ -2392,9 +2400,9 @@ function NeoDataGrid({ autoHeight = false, toolbar, slots, sx, density = 'standa
         border: `1px solid ${semanticColors.border.primary}`,
         // Style row selection checkboxes to match header (16px, proper spacing)
         [`& .${gridClasses$1.cellCheckbox}`]: {
-            '& .MuiCheckbox-root': {
+            [`& .${checkboxClasses.root}`]: {
                 padding: `${spacing.spacing_1}px`,
-                '& .MuiSvgIcon-root': {
+                [`& .${svgIconClasses.root}`]: {
                     width: 16,
                     height: 16,
                 },
@@ -3331,7 +3339,7 @@ const shortcutChipStyles = {
         paddingY: `${spacing.spacing_1}px`,
         justifyContent: 'flex-start',
         width: '100%',
-        '& .MuiChip-label': {
+        [`& .${chipClasses.label}`]: {
             padding: 0,
         },
         '&:hover': {
@@ -3889,7 +3897,7 @@ const StyledInputLabel = styled(InputLabel, {
     position: 'static',
     transform: 'none',
     fontSize: theme.typography.pxToRem(typography.fontSize.sm),
-    fontWeight: 500,
+    fontWeight: typography.fontWeight.medium,
     color: semanticColors.typography.input.label,
     display: 'flex',
     alignItems: 'center',
@@ -3969,7 +3977,7 @@ const StyledInputBase = styled(InputBase, {
             borderColor: semanticColors.status.error.medium,
         },
         // Adornment styling
-        '& .MuiInputAdornment-root': {
+        [`& .${inputAdornmentClasses.root}`]: {
             color: destructive ? semanticColors.status.error.medium : semanticColors.icons.placeholder,
         },
     };
@@ -4274,7 +4282,7 @@ const StyledListItemButton = styled(ListItemButton)(({ theme }) => ({
     display: 'flex',
     alignItems: 'center',
     gap: spacing.spacing_2,
-    borderRadius: theme.typography.pxToRem(12),
+    borderRadius: borderRadius.m,
     paddingTop: spacing.spacing_1,
     paddingBottom: spacing.spacing_1,
     paddingLeft: spacing.spacing_3_4,
@@ -4393,15 +4401,15 @@ const activeShadow = `${shadows.card.x}px ${shadows.card.y}px ${shadows.card.blu
 const StyledCard = styled(MuiCard, {
     shouldForwardProp: prop => prop !== 'selected' && prop !== 'disabled',
 })(({ theme, selected, disabled }) => ({
-    width: theme.typography.pxToRem(160),
-    height: theme.typography.pxToRem(160),
+    width: 160,
+    height: 160,
     padding: theme.spacing(1.5), // 12px
     display: 'flex',
     flexDirection: 'column',
     gap: theme.spacing(2), // 16px
     backgroundColor: semanticColors.surfaces.card,
     border: `1px solid ${selected ? semanticColors.border.tabActive : semanticColors.border.card}`,
-    borderRadius: theme.typography.pxToRem(4),
+    borderRadius: borderRadius.xS,
     boxShadow: selected ? activeShadow : 'none',
     transition: theme.transitions.create(['border-color', 'background-color', 'box-shadow']),
     cursor: 'pointer',
@@ -4432,11 +4440,11 @@ const CardHeader = styled('div')({
 /**
  * Logo container
  */
-const LogoContainer = styled('div')(({ theme }) => ({
-    width: theme.typography.pxToRem(spacing.spacing_6),
-    height: theme.typography.pxToRem(spacing.spacing_6),
+const LogoContainer = styled('div')({
+    width: spacing.spacing_6,
+    height: spacing.spacing_6,
     flexShrink: 0,
-}));
+});
 /**
  * Recipe count badge
  */
@@ -5493,14 +5501,14 @@ const StyledTab = styled(MuiTab)(({ theme }) => ({
     minHeight: spacing.spacing_5,
     padding: `${theme.spacing(1)} ${theme.spacing(2)}`,
     textTransform: 'none',
-    fontWeight: 400,
+    fontWeight: typography.fontWeight.regular,
     fontSize: theme.typography.pxToRem(14),
     lineHeight: '1.5rem',
     color: semanticColors.typography.tab.inactive,
     transition: 'none', // Remove animation
     [`&.${tabClasses.selected}`]: {
         color: semanticColors.typography.tab.active,
-        fontWeight: 600,
+        fontWeight: typography.fontWeight.semiBold,
     },
     [`&.${buttonBaseClasses.focusVisible}`]: {
         outline: `2px solid ${semanticColors.buttons.primary.focus}`,
@@ -5619,7 +5627,7 @@ const ToastTitle = styled('p')(({ theme, variant = 'default' }) => {
     return {
         margin: 0,
         fontSize: theme.typography.pxToRem(typography.fontSize.sm),
-        fontWeight: 600,
+        fontWeight: typography.fontWeight.semiBold,
         lineHeight: 1.4,
         color: colorMap[variant],
     };
@@ -5637,7 +5645,7 @@ const ToastMessage = styled('p')(({ theme, variant = 'default' }) => {
     return {
         margin: 0,
         fontSize: theme.typography.pxToRem(typography.fontSize.sm),
-        fontWeight: 400,
+        fontWeight: typography.fontWeight.regular,
         lineHeight: 1.4,
         color: colorMap[variant],
     };
@@ -5677,7 +5685,7 @@ const ToastButton = styled(Button, {
         padding: 0,
         minWidth: 'auto',
         fontSize: typography.fontSize.sm,
-        fontWeight: 500,
+        fontWeight: typography.fontWeight.medium,
         lineHeight: 'normal',
         textTransform: 'none',
         color: getColor(),
@@ -5694,14 +5702,14 @@ const ProgressSection = styled(Stack)({
 const FileName = styled('p')(({ theme }) => ({
     margin: 0,
     fontSize: theme.typography.pxToRem(typography.fontSize.xs),
-    fontWeight: 500,
+    fontWeight: typography.fontWeight.medium,
     lineHeight: 1.5,
     color: colors.grey['800'],
 }));
 const ProgressLabel = styled('p')(({ theme }) => ({
     margin: 0,
     fontSize: theme.typography.pxToRem(typography.fontSize.xs),
-    fontWeight: 500,
+    fontWeight: typography.fontWeight.medium,
     lineHeight: 1.5,
     color: colors.grey['800'],
 }));
@@ -5773,13 +5781,13 @@ const LabelContainer = styled('div')({
 });
 const Label = styled('span')(({ theme, size = 'medium' }) => ({
     fontSize: theme.typography.pxToRem(size === 'small' ? typography.fontSize.sm : typography.fontSize.default),
-    fontWeight: 500,
+    fontWeight: typography.fontWeight.medium,
     lineHeight: size === 'small' ? 1.4 : 1.5,
     color: semanticColors.typography.input.default,
 }));
 const HelperText = styled('span')(({ theme, size = 'medium' }) => ({
     fontSize: theme.typography.pxToRem(size === 'small' ? typography.fontSize.sm : typography.fontSize.default),
-    fontWeight: 400,
+    fontWeight: typography.fontWeight.regular,
     lineHeight: size === 'small' ? 1.4 : 1.5,
     color: semanticColors.typography.bodySecondary,
 }));
@@ -6069,13 +6077,16 @@ const StyledToggleButtonGroup = styled(ToggleButtonGroup)(({ theme }) => ({
     gap: 0,
     [`& .${toggleButtonGroupClasses.grouped}`]: {
         border: 'none',
+        // biome-ignore plugin: no exact token for 14px
         borderRadius: 14,
         margin: 0,
         '&:not(:first-of-type)': {
+            // biome-ignore plugin: no exact token for 14px
             borderRadius: 14,
             marginLeft: 0,
         },
         '&:not(:last-of-type)': {
+            // biome-ignore plugin: no exact token for 14px
             borderRadius: 14,
         },
     },