alignment is wrong when isHidden is set to true for Text inside ActionButton with icon

### Provide a general summary of the issue here

For responsive design I would like to remove `` when in mobile view but show it when in larger screens.

### 🤔 Expected Behavior?

Correct alignment.


### 😯 Current Behavior

left padding is bigger than the right instead of center aligned.


### 💁 Possible Solution

`isHidden` should be respected for now I'm using the following workaround.

```typescript
export const useInBaseReponsiveMode = () => {
const { matchedBreakpoints } = useBreakpoint();
const isBase = useMemo(() => {
return getResponsiveProp(
{
base: true,
M: false,
},
matchedBreakpoints
);
}, [matchedBreakpoints]);
return isBase;
};

return (


{!isBase && New}

);
```

Seems like a hack.

### 🔦 Context

_No response_

### 🖥️ Steps to Reproduce

Set isHidden for ActionButton and resize the window.

```jsx

New

```

### Version

3.29.0

### What browsers are you seeing the problem on?

Chrome

### If other, please specify.

_No response_

### What operating system are you using?

linux

### 🧢 Your Company/Team

_No response_

### 🕷 Tracking Issue

_No response_