@westpac/ui 0.24.1 → 0.25.0

package/dist/tailwind/constants/colors.d.ts

@@ -61,7 +61,7 @@ export declare const COLORS: {
         900: string;
         DEFAULT: string;
     };
-    primary: {
+    focus: {
         100: string;
         50: string;
         200: string;
@@ -74,7 +74,7 @@ export declare const COLORS: {
         900: string;
         DEFAULT: string;
     };
-    hero: {
+    primary: {
         100: string;
         50: string;
         200: string;
@@ -87,7 +87,7 @@ export declare const COLORS: {
         900: string;
         DEFAULT: string;
     };
-    background: {
+    hero: {
         100: string;
         50: string;
         200: string;
@@ -100,7 +100,7 @@ export declare const COLORS: {
         900: string;
         DEFAULT: string;
     };
-    borderDark: {
+    background: {
         100: string;
         50: string;
         200: string;
@@ -113,7 +113,7 @@ export declare const COLORS: {
         900: string;
         DEFAULT: string;
     };
-    focus: {
+    borderDark: {
         100: string;
         50: string;
         200: string;

package/dist/tailwind/tailwind-plugin.d.ts

@@ -5,7 +5,7 @@ import { type PluginOptions } from './types/tailwind.types.js';
 export declare const WestpacUIKitBasePlugin: {
     (options: PluginOptions): {
         handler: import("tailwindcss/types/config.js").PluginCreator;
-        config?: Partial<import("tailwindcss").Config> | undefined;
+        config?: Partial<import("tailwindcss").Config>;
     };
     __isOptionsFunction: true;
 };

package/dist/tailwind/tailwind-transformer.d.ts

@@ -2,7 +2,7 @@ import { type Config } from 'tailwindcss';
 export declare const withGEL: (config: Config) => {
     safelist: (string | {
         pattern: RegExp;
-        variants?: string[] | undefined;
+        variants?: string[];
     } | undefined)[];
     plugins: (import("tailwindcss/types/config.js").PluginCreator | {
         handler: import("tailwindcss/types/config.js").PluginCreator;

package/dist/tailwind/themes/index.d.ts

@@ -59,7 +59,7 @@ export declare const THEMES: {
                 900: string;
                 DEFAULT: string;
             };
-            primary: {
+            focus: {
                 100: string;
                 50: string;
                 200: string;
@@ -72,7 +72,7 @@ export declare const THEMES: {
                 900: string;
                 DEFAULT: string;
             };
-            hero: {
+            primary: {
                 100: string;
                 50: string;
                 200: string;
@@ -85,7 +85,7 @@ export declare const THEMES: {
                 900: string;
                 DEFAULT: string;
             };
-            white: {
+            hero: {
                 100: string;
                 50: string;
                 200: string;
@@ -98,7 +98,7 @@ export declare const THEMES: {
                 900: string;
                 DEFAULT: string;
             };
-            black: {
+            white: {
                 100: string;
                 50: string;
                 200: string;
@@ -111,7 +111,7 @@ export declare const THEMES: {
                 900: string;
                 DEFAULT: string;
             };
-            background: {
+            black: {
                 100: string;
                 50: string;
                 200: string;
@@ -124,7 +124,7 @@ export declare const THEMES: {
                 900: string;
                 DEFAULT: string;
             };
-            borderDark: {
+            background: {
                 100: string;
                 50: string;
                 200: string;
@@ -137,7 +137,7 @@ export declare const THEMES: {
                 900: string;
                 DEFAULT: string;
             };
-            focus: {
+            borderDark: {
                 100: string;
                 50: string;
                 200: string;

package/dist/tailwind/utils/generate-font-components.d.ts

@@ -2,4 +2,4 @@ import { CSSRuleObject, PluginAPI } from 'tailwindcss/types/config.js';
 export declare const generateFontComponents: (typographySizes: Record<string, {
     fontSize: string;
     lineHeight: string;
-}>, theme: PluginAPI['theme']) => CSSRuleObject[];
+}>, theme: PluginAPI["theme"]) => CSSRuleObject[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@westpac/ui",
-  "version": "0.24.1",
+  "version": "0.25.0",
   "license": "MIT",
   "sideEffects": false,
   "type": "module",
@@ -235,6 +235,7 @@
     "chokidar": "^3.5.3",
     "colorjs.io": "~0.4.5",
     "cross-env": "~7.0.3",
+    "csstype": "~3.1.3",
     "eslint": "^8.56.0",
     "eslint-plugin-storybook": "~0.6.15",
     "glob": "~10.3.3",
@@ -249,14 +250,14 @@
     "react-dom": "^18.2.0",
     "shx": "^0.3.4",
     "storybook": "^7.6.4",
-    "tailwind-variants": "~0.1.13",
+    "tailwind-variants": "~0.2.1",
     "tailwindcss": "~3.3.2",
     "tailwindcss-themer": "~3.1.0",
     "ts-node": "~10.9.1",
-    "typescript": "^5.1.6",
+    "typescript": "^5.5.4",
     "vite": "^5.2.12",
     "vitest": "^0.30.1",
-    "@westpac/eslint-config": "~0.2.2",
+    "@westpac/eslint-config": "~0.4.0",
     "@westpac/test-config": "~0.0.0",
     "@westpac/ts-config": "~0.0.0"
   },
@@ -281,7 +282,7 @@
     "@types/node": "~20.12.12",
     "colorjs.io": "~0.4.5",
     "react": ">=18.2.0",
-    "tailwind-variants": "~0.1.13",
+    "tailwind-variants": "~0.2.1",
     "tailwindcss": "~3.3.2",
     "tailwindcss-themer": "~3.1.0"
   },

package/src/components/bottom-sheet/components/bottom-sheet-modal/bottom-sheet-modal.types.ts

@@ -1,4 +1,5 @@
-import { CSSProperties, ReactNode } from 'react';
+import { Property } from 'csstype';
+import { ReactNode } from 'react';
 import { AriaModalOverlayProps } from 'react-aria';
 import { OverlayTriggerState } from 'react-stately';
 
@@ -10,7 +11,7 @@ export type ModalProps = AriaModalOverlayProps & {
   /**
    * Height of the Modal
    */
-  height?: CSSProperties['height'];
+  height?: Property.Height;
   /**
    * Element where the modal will be rendered, by default it will be into the body
    */
@@ -22,5 +23,5 @@ export type ModalProps = AriaModalOverlayProps & {
   /**
    * Width of the Modal
    */
-  width?: CSSProperties['width'];
+  width?: Property.Width;
 };

package/src/components/button/button.component.tsx

@@ -4,7 +4,7 @@ import React, { Ref, forwardRef, useMemo } from 'react';
 import { mergeProps, useFocusRing } from 'react-aria';
 
 import { styles as buttonStyles } from './button.styles.js';
-import { type ButtonProps } from './button.types.js';
+import { type ButtonProps, ButtonRef } from './button.types.js';
 import { getIconSize } from './button.utils.js';
 
 function BaseButton(
@@ -19,13 +19,14 @@ function BaseButton(
     iconBefore: IconBefore,
     iconAfter: IconAfter,
     iconColor,
+    iconSize,
     children,
     ...props
   }: ButtonProps,
-  ref: Ref<HTMLButtonElement & HTMLAnchorElement & HTMLSpanElement & HTMLDivElement>,
+  ref: Ref<ButtonRef>,
 ) {
   const { isFocusVisible, focusProps } = useFocusRing();
-  const iconSize = useMemo(() => getIconSize(size), [size]);
+  const btnIconSize = useMemo(() => iconSize || getIconSize(size), [iconSize, size]);
   const styles = buttonStyles({
     size,
     look,
@@ -38,9 +39,9 @@ function BaseButton(
 
   return (
     <Tag ref={ref} className={styles.base({ className })} {...mergeProps(props, focusProps)}>
-      {IconBefore && <IconBefore size={iconSize} className={styles.iconBefore()} color={iconColor} aria-hidden />}
+      {IconBefore && <IconBefore size={btnIconSize} className={styles.iconBefore()} color={iconColor} aria-hidden />}
       <span className={styles.text()}>{children}</span>
-      {IconAfter && <IconAfter size={iconSize} className={styles.iconAfter()} color={iconColor} aria-hidden />}
+      {IconAfter && <IconAfter size={btnIconSize} className={styles.iconAfter()} color={iconColor} aria-hidden />}
     </Tag>
   );
 }

package/src/components/button/button.styles.ts

@@ -6,7 +6,7 @@ import { tv } from 'tailwind-variants';
 export const styles = tv(
   {
     slots: {
-      base: 'items-center justify-center rounded leading-[1.5] transition-[background] disabled:pointer-events-none disabled:opacity-50 group-first/add-on-before:rounded-r-none group-last/add-on-after:rounded-l-none',
+      base: 'items-center justify-center rounded leading-normal transition-[background] disabled:pointer-events-none disabled:opacity-50 group-first/add-on-before:rounded-r-none group-last/add-on-after:rounded-l-none',
       iconBefore: '',
       iconAfter: '',
       dropdown: 'ml-[0.4em]',
@@ -14,17 +14,17 @@ export const styles = tv(
     },
     variants: {
       size: {
-        small: { base: 'typography-body-10 px-2 pb-[0.25rem] pt-0.5 active-theme-rams:before:h-[0.0625rem]' },
-        medium: { base: 'typography-body-9 px-2 py-[0.3125rem] active-theme-rams:before:h-[0.125rem]' },
-        large: { base: 'typography-body-9 px-2.5 py-[0.5rem] active-theme-rams:before:h-0.5' },
-        xlarge: { base: 'typography-body-8 px-3 pb-[0.625rem] pt-1.5 active-theme-rams:before:h-[0.25rem]' },
+        small: { base: 'typography-body-10 active-theme-rams:before:h-[0.0625rem] px-2 pb-1 pt-0.5' },
+        medium: { base: 'typography-body-9 active-theme-rams:before:h-0.5 px-2 py-[0.3125rem]' },
+        large: { base: 'typography-body-9 active-theme-rams:before:h-0.5 px-2.5 py-2' },
+        xlarge: { base: 'typography-body-8 active-theme-rams:before:h-1 px-3 pb-2.5 pt-1.5' },
       },
       look: {
         primary: {
-          base: 'relative border border-primary bg-primary text-white hover:bg-primary-70 active:bg-primary-50 active-theme-rams:border-b-pop active-theme-rams:before:absolute active-theme-rams:before:bottom-0 active-theme-rams:before:block active-theme-rams:before:w-full active-theme-rams:before:bg-pop',
+          base: 'border-primary bg-primary hover:bg-primary-70 active:bg-primary-50 active-theme-rams:border-b-pop active-theme-rams:before:absolute active-theme-rams:before:bottom-0 active-theme-rams:before:block active-theme-rams:before:w-full active-theme-rams:before:bg-pop relative border text-white',
         },
-        hero: { base: 'border border-hero bg-hero text-white hover:bg-hero-70 active:bg-hero-50' },
-        faint: { base: 'border border-border bg-light text-muted hover:bg-white active:bg-white' },
+        hero: { base: 'border-hero bg-hero hover:bg-hero-70 active:bg-hero-50 border text-white' },
+        faint: { base: 'border-border bg-light text-muted border hover:bg-white active:bg-white' },
         link: { base: 'text-link underline' },
       },
       soft: {
@@ -50,7 +50,7 @@ export const styles = tv(
         slots: ['base'],
         look: 'primary',
         soft: true,
-        className: 'text-text hover:text-white active-theme-rams:text-primary active-theme-rams:hover:text-white',
+        className: 'text-text active-theme-rams:text-primary active-theme-rams:hover:text-white hover:text-white',
       },
       {
         slots: ['base'],

package/src/components/button/button.types.ts

@@ -7,6 +7,8 @@ import { styles } from './button.styles.js';
 
 type Variants = VariantProps<typeof styles>;
 
+export type ButtonRef = HTMLButtonElement & HTMLAnchorElement & HTMLSpanElement & HTMLDivElement;
+
 export type ButtonProps = {
   /**
    * Fit button width to its parent width.
@@ -31,6 +33,12 @@ export type ButtonProps = {
    * Defaults to the current text color.
    */
   iconColor?: IconProps['color'];
+  /**
+   * The size of the icon
+   *
+   * Defaults to system size depending on size of the button
+   */
+  iconSize?: IconProps['size'];
   /**
    * When true, children will use flex justify-between
    * @default false

package/src/components/filter/components/filter-buttons/filter-buttons.component.tsx

@@ -1,36 +1,223 @@
-import React from 'react';
+'use client';
 
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+
+import { type ButtonRef } from '../../../button/button.types.js';
+import { ArrowLeftIcon, ArrowRightIcon } from '../../../icon/index.js';
 import { Button } from '../../../index.js';
-import { generateAriaDescription } from '../../filter.util.js';
 
-import { styles } from './filter-buttons.styles.js';
+import { styles as filterButtonsStyles } from './filter-buttons.styles.js';
 import { type FilterButtonsProps } from './filter-buttons.types.js';
 
 export function FilterButtons({
   filterButtons,
   onClick,
   selectedButton,
-  resultsFound,
   tag: Tag = 'div',
   className,
   ...props
 }: FilterButtonsProps) {
+  const scrollContainerRef = useRef<HTMLUListElement>(null);
+  const [isScrollable, setIsScrollable] = useState({ left: false, right: false });
+  const scrollElementRefs = useRef<ButtonRef[]>(new Array(filterButtons.length));
+  const [scrollTarget, setScrollTarget] = useState({ left: -1, right: -1 });
+
+  const styles = filterButtonsStyles();
+
+  const setScroll = useCallback((scrollBy: boolean, scroll: number, container: HTMLUListElement) => {
+    if (scrollBy) {
+      container.scrollBy({
+        left: scroll,
+        behavior: 'smooth',
+      });
+    } else {
+      container.scrollTo({
+        left: scroll,
+        behavior: 'smooth',
+      });
+    }
+  }, []);
+
+  const handleScrollButton = useCallback((direction: string) => {
+    if (scrollContainerRef.current) {
+      const container = scrollContainerRef.current;
+
+      let targetElement;
+      let scrollX;
+      let scrollBy = true;
+      const buttonPaddingOffset = 20;
+      if (direction === 'left') {
+        if (scrollTarget.left === -1) {
+          scrollX = -container.clientWidth;
+        } else {
+          scrollBy = false;
+          targetElement = scrollElementRefs.current[scrollTarget.left];
+          scrollX = targetElement.offsetLeft + targetElement.offsetWidth - container.offsetWidth + buttonPaddingOffset;
+        }
+      } else {
+        if (scrollTarget.right === -1) {
+          scrollX = container.clientWidth;
+        } else {
+          scrollBy = false;
+          targetElement = scrollElementRefs.current[scrollTarget.right];
+          scrollX = targetElement.offsetLeft - buttonPaddingOffset;
+        }
+      }
+      setScroll(scrollBy, scrollX, container);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const getTargetLeft = useCallback((element: HTMLButtonElement, cLeft: number, index: number, targetLeft: number) => {
+    const eLeft = element.offsetLeft;
+    const eRight = eLeft + element.clientWidth;
+
+    if (eLeft <= cLeft && eRight >= cLeft) {
+      targetLeft = index;
+    }
+
+    return targetLeft;
+  }, []);
+
+  const getTargetRight = useCallback(
+    (element: HTMLButtonElement, cRight: number, index: number, targetRight: number) => {
+      const eLeft = element.offsetLeft;
+      const eRight = eLeft + element.clientWidth;
+
+      if (eRight >= cRight && eLeft <= cRight) {
+        targetRight = index;
+      }
+
+      return targetRight;
+    },
+    [],
+  );
+
+  const adjustTargets = useCallback(
+    (element: HTMLButtonElement, cLeft: number, cRight: number, targetLeft: number, targetRight: number) => {
+      const eLeft = element.offsetLeft;
+      const eRight = eLeft + element.clientWidth;
+
+      if ((eRight >= cRight && eLeft <= cLeft) || targetRight === targetLeft + 1) {
+        if (targetRight >= filterButtons.length - 1) {
+          targetRight = -1;
+        } else {
+          targetRight = targetRight + 1;
+        }
+        if (targetLeft <= 0) {
+          targetLeft = -1;
+        } else {
+          targetLeft = targetLeft - 1;
+        }
+      }
+
+      return { targetLeft, targetRight };
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [],
+  );
+
+  const handleScrollTarget = useCallback((container: HTMLUListElement) => {
+    let targetRight = scrollTarget.right;
+    let targetLeft = scrollTarget.left;
+    const cLeft = container.scrollLeft;
+    const cRight = cLeft + container.clientWidth;
+
+    scrollElementRefs.current.forEach((element: HTMLButtonElement, index: number) => {
+      targetLeft = getTargetLeft(element, cLeft, index, targetLeft);
+      targetRight = getTargetRight(element, cRight, index, targetRight);
+      const targets = adjustTargets(element, cLeft, cRight, targetLeft, targetRight);
+      targetLeft = targets.targetLeft;
+      targetRight = targets.targetRight;
+      if (targetLeft === filterButtons.length - 1) {
+        targetLeft -= 1;
+      }
+    });
+
+    setScrollTarget({ left: targetLeft, right: targetRight });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const handleScrollable = useCallback((container: HTMLUListElement) => {
+    const isLeftScrollable = container.scrollLeft >= 1;
+    const isRightScrollable = container.scrollLeft < container.scrollWidth - container.clientWidth - 1;
+    setIsScrollable({ left: isLeftScrollable, right: isRightScrollable });
+  }, []);
+
+  const handleScroll = useCallback(() => {
+    const container = scrollContainerRef.current;
+    if (container) {
+      handleScrollTarget(container);
+      handleScrollable(container);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  useEffect(() => {
+    const container = scrollContainerRef.current;
+    if (container) {
+      handleScrollTarget(container);
+      handleScrollable(container);
+
+      container.addEventListener('scroll', handleScroll);
+      window.addEventListener('resize', handleScroll);
+    }
+
+    return () => {
+      container?.removeEventListener('scroll', handleScroll);
+      window.removeEventListener('reize', handleScroll);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   return (
-    <Tag className={styles({ className })} {...props}>
-      {filterButtons.map(button => (
-        <Button
-          aria-pressed={button.id === selectedButton}
-          aria-description={generateAriaDescription(button.id, selectedButton, filterButtons.length, resultsFound)}
-          aria-label={button.text}
-          look="hero"
-          size="small"
-          onClick={() => onClick(button.id)}
-          key={button.id}
-          soft={button.id !== selectedButton}
-        >
-          {button.text}
-        </Button>
-      ))}
+    <Tag className={styles.base({ className })}>
+      <Button
+        className={styles.scrollButton({ position: 'left', hidden: !isScrollable.left })}
+        onClick={() => handleScrollButton('left')}
+        look="link"
+        size="small"
+        iconBefore={ArrowLeftIcon}
+        iconColor="hero"
+        iconSize="medium"
+        aria-hidden="true"
+      />
+      <Button
+        className={styles.scrollButton({ position: 'right', hidden: !isScrollable.right })}
+        onClick={() => handleScrollButton('right')}
+        look="link"
+        size="small"
+        iconBefore={ArrowRightIcon}
+        iconColor="hero"
+        iconSize="medium"
+        aria-hidden="true"
+      />
+      <ul
+        className={styles.buttonList({ className })}
+        style={{
+          scrollbarWidth: 'none',
+          msOverflowStyle: 'none',
+          overflowX: 'scroll',
+        }}
+        {...props}
+        ref={scrollContainerRef}
+        role="list"
+      >
+        {filterButtons.map((button, index) => (
+          <Button
+            aria-pressed={button.id === selectedButton}
+            look="hero"
+            size="small"
+            onClick={() => onClick(button.id)}
+            key={button.id}
+            soft={button.id !== selectedButton}
+            button-index={index}
+            ref={(element: ButtonRef) => (scrollElementRefs.current[index] = element)}
+          >
+            {button.text}
+          </Button>
+        ))}
+      </ul>
     </Tag>
   );
 }

package/src/components/filter/components/filter-buttons/filter-buttons.styles.ts

@@ -1,5 +1,24 @@
 import { tv } from 'tailwind-variants';
 
 export const styles = tv({
-  base: 'flex w-full gap-1 overflow-auto whitespace-nowrap',
+  slots: {
+    base: 'relative flex justify-start',
+    buttonList: 'flex w-full touch-pan-x gap-1 overflow-x-auto whitespace-nowrap',
+    scrollButton: 'absolute rounded-none contrast-more:bg-black',
+  },
+  variants: {
+    position: {
+      left: {
+        scrollButton: '-left-1 bg-[linear-gradient(90deg,_#fff_66%,_transparent)] pl-0',
+      },
+      right: {
+        scrollButton: '-right-1 bg-[linear-gradient(270deg,_#fff_66%,_transparent)] pr-0',
+      },
+    },
+    hidden: {
+      true: {
+        scrollButton: 'hidden',
+      },
+    },
+  },
 });

package/src/components/filter/components/filter-buttons/filter-buttons.types.ts

@@ -22,10 +22,6 @@ export type FilterButtonsProps = {
    * Function that is called when a button on the filter is clicked
    */
   onClick: (id: string) => unknown;
-  /**
-   * Needed for custom `aria-description`, number of results filter returns
-   */
-  resultsFound: number;
   /**
    * id of which button should be selected
    */

package/src/components/flexi-cell/flexi-cell.component.tsx

@@ -24,6 +24,7 @@ function FlexiCellBase(
     size = 'default',
     disabled,
     tabIndex,
+    body = true,
     ...props
   }: FlexiCellProps,
   ref: Ref<HTMLElement>,
@@ -58,8 +59,10 @@ function FlexiCellBase(
         <FlexiCellBody tag="a" href={href}>
           {children}
         </FlexiCellBody>
-      ) : (
+      ) : body ? (
         <FlexiCellBody>{children}</FlexiCellBody>
+      ) : (
+        <div className="flex-1">{children}</div>
       )}
       {after}
       {withArrow && (

package/src/components/flexi-cell/flexi-cell.types.ts

@@ -16,6 +16,10 @@ type BaseFlexiCellProps = {
    * Renders an element on the left
    */
   before?: ReactNode;
+  /**
+   * Wraps everything into FlexiCellBody
+   */
+  body?: boolean;
   /**
    * the middle content of FlexiCell
    */

package/src/components/icon/components/cancel-card-icon.tsx

@@ -0,0 +1,41 @@
+import React, { Fragment } from 'react';
+
+import { Icon } from '../icon.component.js';
+import { type IconProps } from '../icon.types.js';
+
+export function CancelCardIcon({
+  look = 'filled',
+  'aria-label': ariaLabel = 'Cancel Card',
+  copyrightYear = '2024',
+  ...props
+}: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      {look === 'filled' ? (
+        <Fragment>
+          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none">
+            <path
+              fill-rule="evenodd"
+              d="M1.416.002 0 1.416l.908.907A1.998 1.998 0 0 0 0 4v16a2 2 0 0 0 2 2h18.585l1.998 1.998 1.415-1.414-.908-.907L1.416.002ZM4.585 6H1v4h7.585l-4-4Z"
+              clip-rule="evenodd"
+              fill="currentColor"
+            />
+            <path d="M23 10h-8.758L24 19.757V4a2 2 0 0 0-2-2H6.242l4 4H23v4Z" fill="currentColor" />
+          </svg>
+        </Fragment>
+      ) : (
+        <Fragment>
+          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none">
+            <path
+              fill-rule="evenodd"
+              d="M1.416.002 0 1.416l.908.907A1.998 1.998 0 0 0 0 4v16a2 2 0 0 0 2 2h18.585l1.998 1.998 1.415-1.414-.908-.907L1.416.002ZM2.585 4H2v4h4.585l-4-4Zm8 8H2v8h16.585l-8-8Z"
+              clip-rule="evenodd"
+              fill="currentColor"
+            />
+            <path d="M22 8h-9.758l4 4H22v5.757l2 2V4a2 2 0 0 0-2-2H6.242l2 2H22v4Z" fill="currentColor" />
+          </svg>
+        </Fragment>
+      )}
+    </Icon>
+  );
+}