feat: input component: adds searchbox, textarea and textinput components

src/components/Button/BaseButton.tsx

@@ -21,6 +21,7 @@ export const BaseButton: FC<InternalButtonProps> = ({
     disruptive = false,
     htmlType,
     icon,
+    iconColor,
     id,
     onClick,
     primaryColor,
@@ -95,7 +96,12 @@ export const BaseButton: FC<InternalButtonProps> = ({
     };
 
     const getButtonIcon = (icon: IconName): JSX.Element => (
-        <Icon className={styles.icon} path={icon} size={getButtonIconSize()} />
+        <Icon
+            className={styles.icon}
+            color={iconColor}
+            path={icon}
+            size={getButtonIconSize()}
+        />
     );
 
     const buttonStyles = (): CSSVariables => {

src/components/Button/Button.types.ts

@@ -57,6 +57,10 @@ export interface ButtonProps {
      * The button icon.
      */
     icon?: IconName;
+    /**
+     * The button icon color.
+     */
+    iconColor?: string;
     /**
      * The button id.
      */

src/components/Button/DefaultButton/DefaultButton.tsx

@@ -12,6 +12,7 @@ export const DefaultButton: FC<ButtonProps> = ({
     disabled = false,
     htmlType,
     icon,
+    iconColor,
     onClick,
     primaryColor,
     text,
@@ -34,6 +35,7 @@ export const DefaultButton: FC<ButtonProps> = ({
             disabled={disabled}
             htmlType={htmlType}
             icon={icon}
+            iconColor={iconColor}
             onClick={onClick}
             primaryColor={primaryColor}
             size={size}

src/components/Button/PrimaryButton/PrimaryButton.tsx

@@ -13,6 +13,7 @@ export const PrimaryButton: FC<ButtonProps> = ({
     disruptive = false,
     htmlType,
     icon,
+    iconColor,
     onClick,
     primaryColor,
     size = ButtonSize.Flex,
@@ -37,6 +38,7 @@ export const PrimaryButton: FC<ButtonProps> = ({
             disruptive={disruptive}
             htmlType={htmlType}
             icon={icon}
+            iconColor={iconColor}
             onClick={onClick}
             primaryColor={primaryColor}
             size={size}

src/components/Button/SecondaryButton/SecondaryButton.tsx

@@ -13,6 +13,7 @@ export const SecondaryButton: FC<ButtonProps> = ({
     disruptive = false,
     htmlType,
     icon,
+    iconColor,
     onClick,
     primaryColor,
     text,
@@ -37,6 +38,7 @@ export const SecondaryButton: FC<ButtonProps> = ({
             disruptive={disruptive}
             htmlType={htmlType}
             icon={icon}
+            iconColor={iconColor}
             onClick={onClick}
             primaryColor={primaryColor}
             size={size}

src/components/Button/button.module.scss

@@ -32,9 +32,8 @@
     }
 
     &:focus-visible {
-        box-sizing: border-box;
-        padding: $space-xs $space-s;
-        border-width: rem(4px);
+        outline: rem(2px) solid var(--primary-color-80);
+        outline-offset: rem(-2px);
     }
 }
 

src/components/Icon/mdi.ts

@@ -293,6 +293,7 @@ export enum IconName {
     mdiReplyAll = 'M13,9V5L6,12L13,19V14.9C18,14.9 21.5,16.5 24,20C23,15 20,10 13,9M7,8V5L0,12L7,19V16L3,12L7,8Z',
     mdiReplyAllOutline = 'M11,9.8V10.7L12.7,10.9C15.3,11.3 17.2,12.3 18.6,13.6C16.9,13.1 15.1,12.8 13,12.8H11V14.1L8.8,12L11,9.8M13,5L6,12L13,19V14.9C18,14.9 21.5,16.5 24,20C23,15 20,10 13,9M7,8V5L0,12L7,19V16L3,12',
     mdiReplyOutline = 'M8,9.8V10.7L9.7,11C12.3,11.4 14.2,12.4 15.6,13.7C13.9,13.2 12.1,12.9 10,12.9H8V14.2L5.8,12L8,9.8M10,5L3,12L10,19V14.9C15,14.9 18.5,16.5 21,20C20,15 17,10 10,9',
+    mdiResizeBottomRight = 'M22,22H20V20H22V22M22,18H20V16H22V18M18,22H16V20H18V22M18,18H16V16H18V18M14,22H12V20H14V22M22,14H20V12H22V14Z',
     mdiRoad = 'M11,16H13V20H11M11,10H13V14H11M11,4H13V8H11M4,22H20V2H4V22Z',
     mdiRoadVariant = 'M18.1,4.8C18,4.3 17.6,4 17.1,4H13L13.2,7H10.8L11,4H6.8C6.3,4 5.9,4.4 5.8,4.8L3.1,18.8C3,19.4 3.5,20 4.1,20H10L10.3,15H13.7L14,20H19.8C20.4,20 20.9,19.4 20.8,18.8L18.1,4.8M10.4,13L10.6,9H13.2L13.4,13H10.4Z',
     mdiRocket = 'M20 22L16.14 20.45C16.84 18.92 17.34 17.34 17.65 15.73L20 22M7.86 20.45L4 22L6.35 15.73C6.66 17.34 7.16 18.92 7.86 20.45M12 2C12 2 17 4 17 12C17 15.1 16.25 17.75 15.33 19.83C15 20.55 14.29 21 13.5 21H10.5C9.71 21 9 20.55 8.67 19.83C7.76 17.75 7 15.1 7 12C7 4 12 2 12 2M12 12C13.1 12 14 11.1 14 10C14 8.9 13.1 8 12 8C10.9 8 10 8.9 10 10C10 11.1 10.9 12 12 12Z',