Enhance Pill component with styling, layout, and type improvements

This commit introduces styling and layout improvements to the Pill component, along with enhancements to its types.

A new styled component, `IconContainerStyled`, has been introduced to handle the styles of the decorative icon container. This component uses the `IPillStyled` interface for its props and is utilized within the `PillStandAloneComponent` to wrap the `ElementOrIcon` component when a decorative icon is present.

The `PillStateStylesType` interface has been enhanced with a new type, `decorativeIconContainer`, which handles the styles for the decorative icon container in the Pill component.

These enhancements improve the styling and layout of the Pill component, making it more flexible and customizable.

Author: Hector Arce De Las Heras

src/components/pill/pill.styled.ts

@@ -23,3 +23,7 @@ export const PillLabelStyled = styled.label<IPillStyled>`
   align-items: center;
   ${props => getTypographyStyles(props.styles?.label)}
 `;
+
+export const IconContainerStyled = styled.div<IPillStyled>`
+  ${props => getStyles(props.styles?.decorativeIconContainer)}
+`;

src/components/pill/pillStandAlone.tsx

@@ -5,7 +5,7 @@ import { InputTypeType } from '@/components/input';
 import { useId } from '@/hooks';
 import { pickAriaProps } from '@/utils/aria/aria';
 
-import { PillInputStyled, PillLabelStyled, PillStyled } from './pill.styled';
+import { IconContainerStyled, PillInputStyled, PillLabelStyled, PillStyled } from './pill.styled';
 import { IPillStandAlone } from './types';
 import { getPillState } from './utils';
 
@@ -60,13 +60,15 @@ const PillStandAloneComponent = (
         onFocus={onFocus}
       />
       {decorativeIcon && (
-        <ElementOrIcon
-          color={stateStyles?.decorativeIcon?.color}
-          dataTestId={dataTestId + 'DecorativeIcon'}
-          height={stateStyles?.decorativeIcon?.height}
-          width={stateStyles?.decorativeIcon?.width}
-          {...decorativeIcon}
-        />
+        <IconContainerStyled styles={stateStyles}>
+          <ElementOrIcon
+            color={stateStyles?.decorativeIcon?.color}
+            dataTestId={dataTestId + 'DecorativeIcon'}
+            height={stateStyles?.decorativeIcon?.height}
+            width={stateStyles?.decorativeIcon?.width}
+            {...decorativeIcon}
+          />
+        </IconContainerStyled>
       )}
       <PillLabelStyled htmlFor={id} styles={stateStyles}>
         {children}

src/components/pill/types/pillTheme.ts

@@ -11,6 +11,7 @@ export type PillStateStylesType = {
     box_shadow?: string;
   };
   input?: CommonStyleType;
+  decorativeIconContainer?: CommonStyleType;
   decorativeIcon?: IconTypes;
   selectedIcon?: IconTypes;
   label?: TypographyTypes;