@westpac/ui 0.16.0 → 0.17.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@westpac/ui",
-  "version": "0.16.0",
+  "version": "0.17.0",
   "license": "MIT",
   "sideEffects": false,
   "type": "module",

package/src/components/badge/badge.component.tsx

@@ -11,7 +11,8 @@ export function BaseBadge(
 ) {
   return (
     <Tag {...({ ref } as any)} className={styles({ className, color, type, soft })} {...props}>
-      {children}
+      {/* styling vertically aligns text in the middle */}
+      <div className="relative bottom-[1px]">{children}</div>
     </Tag>
   );
 }

package/src/components/badge/badge.styles.ts

@@ -25,7 +25,7 @@ export const styles = tv(
       },
       type: {
         pill: 'typography-body-10 rounded-xl px-[0.4375rem] py-[0.25rem] font-medium leading-none',
-        default: 'rounded-sm px-1 py-0.5 pb-[0.125rem] text-[0.75rem] leading-none',
+        default: 'rounded-sm px-1 py-[0.125rem] text-[0.75rem] leading-none',
       },
       soft: {
         true: 'bg-white',

package/src/components/bottom-sheet/bottom-sheet.component.tsx

@@ -9,10 +9,28 @@ import { BottomSheetModal } from './components/bottom-sheet-modal/bottom-sheet-m
 /**
  * Bottom sheet component
  */
-export function BottomSheet({ children, state, ...props }: BottomSheetProps) {
+export function BottomSheet({
+  children,
+  state,
+  title,
+  primaryLabel,
+  secondaryLabel,
+  primaryOnClick,
+  secondaryOnClick,
+  ...props
+}: BottomSheetProps) {
   return (
     <BottomSheetModal state={state} {...props}>
-      <BottomSheetDialog onClose={state.close}>{children}</BottomSheetDialog>
+      <BottomSheetDialog
+        primaryLabel={primaryLabel}
+        secondaryLabel={secondaryLabel}
+        primaryOnClick={primaryOnClick}
+        secondaryOnClick={secondaryOnClick}
+        onClose={state.close}
+        title={title}
+      >
+        {children}
+      </BottomSheetDialog>
     </BottomSheetModal>
   );
 }

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

@@ -8,8 +8,28 @@ export type BottomSheetProps = ModalProps & {
    * Body content of Bottom Sheet
    */
   children: ReactNode;
+  /**
+   * Label for primary button
+   */
+  primaryLabel?: string;
+  /**
+   * onClick for primary button
+   */
+  primaryOnClick?: () => void;
+  /**
+   * Label for secondary button
+   */
+  secondaryLabel?: string;
+  /**
+   * onClick for secondary button
+   */
+  secondaryOnClick?: () => void;
   /**
    * The Bottom Sheet opening and closing state, should use OverlayTriggerState from react-stately
    */
   state: OverlayTriggerState;
+  /**
+   * Title for bottom sheet
+   */
+  title?: string;
 };

package/src/components/bottom-sheet/components/bottom-sheet-dialog/bottom-sheet-dialog.component.tsx

@@ -5,32 +5,51 @@ import { useDialog } from 'react-aria';
 import { CloseIcon } from '../../../../components/icon/index.js';
 import { Button } from '../../../../components/index.js';
 
+import { styles as bottomSheetDialogStyles } from './bottom-sheet-dialog.styles.js';
 import { DialogProps } from './bottom-sheet-dialog.types.js';
 
-export function BottomSheetDialog({ children, title, className, onClose, ...props }: DialogProps) {
+export function BottomSheetDialog({
+  children,
+  title,
+  className,
+  onClose,
+  primaryLabel,
+  primaryOnClick,
+  secondaryLabel,
+  secondaryOnClick,
+  ...props
+}: DialogProps) {
   const ref = useRef(null);
   const { dialogProps, titleProps } = useDialog({ ...props, role: 'dialog' }, ref);
+  const styles = bottomSheetDialogStyles({});
 
   return (
-    <div
-      {...dialogProps}
-      className={clsx(
-        className,
-        'flex max-h-screen max-w-full flex-1 flex-col overflow-hidden rounded-t-md bg-white shadow-sm md:rounded-md',
-      )}
-      ref={ref}
-    >
-      <header className="flex flex-row justify-between px-4 py-5 md:px-15 md:py-5">
-        <h3 className="typography-body-3 m-0 md:typography-body-2" {...titleProps}>
+    <div {...dialogProps} className={styles.base({ className })} ref={ref}>
+      <header>
+        <h3 className={styles.title()} {...titleProps}>
           {title}
         </h3>
         {onClose && (
-          <Button size="small" look="link" onClick={onClose} aria-label="close">
-            <CloseIcon color="primary" />
+          <Button size="small" look="link" onClick={onClose} aria-label="close" className={styles.closeBtn()}>
+            <CloseIcon color="muted" size="small" />
           </Button>
         )}
       </header>
-      <div className="flex-1 overflow-auto px-4 pb-10 md:px-15">{children}</div>
+      <div className={styles.body()}>{children}</div>
+      {(primaryLabel || secondaryLabel) && (
+        <div className={styles.buttonWrapper()}>
+          {primaryLabel && (
+            <Button look="primary" size="large" className={styles.primaryBtn()} onClick={primaryOnClick}>
+              {primaryLabel}
+            </Button>
+          )}
+          {secondaryLabel && (
+            <Button look="link" size="large" className={styles.secondaryBtn()} onClick={secondaryOnClick}>
+              {secondaryLabel}
+            </Button>
+          )}
+        </div>
+      )}
     </div>
   );
 }

package/src/components/bottom-sheet/components/bottom-sheet-dialog/bottom-sheet-dialog.styles.ts

@@ -0,0 +1,16 @@
+import { tv } from 'tailwind-variants';
+
+export const styles = tv(
+  {
+    slots: {
+      base: 'flex max-h-screen max-w-full flex-1 flex-col overflow-hidden rounded-t-md bg-white shadow-sm md:w-[37.5rem] md:rounded-md',
+      title: 'typography-body-7 p-7 pb-4 pt-9 font-bold max-md:px-5',
+      body: 'flex-1 overflow-auto px-7 pb-7 max-md:px-5',
+      closeBtn: 'absolute right-3 top-3 p-0',
+      buttonWrapper: '-mt-2 flex gap-1 px-7 pb-7 max-md:flex-col max-md:px-5 max-md:pb-5',
+      primaryBtn: '',
+      secondaryBtn: 'no-underline hover:underline',
+    },
+  },
+  { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },
+);

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

@@ -4,5 +4,21 @@ import { AriaDialogProps } from 'react-aria';
 export type DialogProps = AriaDialogProps & {
   children: ReactNode;
   onClose?: () => unknown;
-  title?: ReactNode;
+  /**
+   * Label for primary button
+   */
+  primaryLabel?: string;
+  /**
+   * onClick for primary button
+   */
+  primaryOnClick?: () => void;
+  /**
+   * Label for secondary button
+   */
+  secondaryLabel?: string;
+  /**
+   * onClick for secondary button
+   */
+  secondaryOnClick?: () => void;
+  title?: string;
 } & HTMLAttributes<HTMLDivElement>;

package/src/components/bottom-sheet/components/bottom-sheet-modal/bottom-sheet-modal.component.tsx

@@ -5,7 +5,8 @@ import { Overlay, useModalOverlay } from 'react-aria';
 
 import { BREAKPOINTS } from '../../../../tailwind/constants/index.js';
 
-import { ModalProps, Sizes } from './bottom-sheet-modal.types.js';
+import { styles as bottomSheetModalStyles } from './bottom-sheet-modal.styles.js';
+import { ModalProps } from './bottom-sheet-modal.types.js';
 
 const isBrowser = typeof window !== 'undefined';
 
@@ -18,27 +19,11 @@ function checkIfItIsMobile(breakpoint: number) {
   }
 }
 
-const SIZES: Record<Sizes, string> = {
-  xs: 'md:w-[20rem]',
-  sm: 'md:w-[32.25rem]',
-  md: 'md:w-[44.5rem]',
-  lg: 'md:w-[56.75rem]',
-  xl: 'md:w-[79rem]',
-  full: 'md:h-full md:w-full',
-};
-
 const MEDIUM_BREAKPOINT_AS_NUMBER = +BREAKPOINTS.md.replace('px', '');
 
 // TODO: discuss about the animation
-export function BottomSheetModal({
-  state,
-  height,
-  width,
-  children,
-  size = 'md',
-  portalContainer,
-  ...props
-}: ModalProps) {
+export function BottomSheetModal({ state, height, width, children, portalContainer, ...props }: ModalProps) {
+  const styles = bottomSheetModalStyles({});
   const ref = useRef(null);
   const { modalProps, underlayProps } = useModalOverlay(props, state, ref);
   const controls = useAnimation();
@@ -81,10 +66,7 @@ export function BottomSheetModal({
 
   return (
     <Overlay portalContainer={portalContainer}>
-      <div
-        className="fixed inset-0 z-10 flex animate-fadeIn flex-col justify-end bg-black/50 transition-all md:items-center md:justify-center"
-        {...underlayProps}
-      >
+      <div className={styles.underlay()} {...underlayProps}>
         <motion.div
           animate={controls}
           dragElastic={0}
@@ -103,9 +85,9 @@ export function BottomSheetModal({
             visible: { y: 0 },
             hidden: { y: '100%' },
           }}
-          className={clsx('flex flex-col', SIZES[size])}
+          className={styles.motionWrapper()}
         >
-          <div className="flex w-full flex-col" {...modalProps} ref={ref} style={{ height, width }}>
+          <div className={styles.modal()} {...modalProps} ref={ref} style={{ height, width }}>
             {children}
           </div>
         </motion.div>

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

@@ -0,0 +1,14 @@
+import { tv } from 'tailwind-variants';
+
+export const styles = tv(
+  {
+    slots: {
+      underlay:
+        'fixed inset-0 z-10 flex animate-fadeIn flex-col justify-end bg-black/50 transition-all md:items-center md:justify-center',
+      motionWrapper: 'flex flex-col',
+      modal: 'flex w-full flex-col',
+    },
+    variants: {},
+  },
+  { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },
+);

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

@@ -2,7 +2,6 @@ import { CSSProperties, ReactNode } from 'react';
 import { AriaModalOverlayProps } from 'react-aria';
 import { OverlayTriggerState } from 'react-stately';
 
-export type Sizes = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
 export type ModalProps = AriaModalOverlayProps & {
   /**
    * Body content of Modal
@@ -16,10 +15,6 @@ export type ModalProps = AriaModalOverlayProps & {
    * Element where the modal will be rendered, by default it will be into the body
    */
   portalContainer?: Element;
-  /**
-   * Size of the Modal
-   */
-  size?: Sizes;
   /**
    * The modal opening and closing state, should use OverlayTriggerState from react-stately
    */

package/src/components/icon/components/x-icon.tsx

@@ -0,0 +1,37 @@
+import React, { Fragment } from 'react';
+
+import { Icon } from '../icon.component.js';
+import { type IconProps } from '../icon.types.js';
+
+export function XIcon({ look = 'filled', 'aria-label': ariaLabel = 'X', copyrightYear = '2024', ...props }: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      {look === 'filled' ? (
+        <Fragment>
+          <path fill="currentColor" d="M15.815 19.008h2.12L8.178 5.04h-2.12l9.757 13.968Z" />
+          <path
+            fill="currentColor"
+            fill-rule="evenodd"
+            d="M2 0a2 2 0 0 0-2 2v20a2 2 0 0 0 2 2h20a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2Zm17.315 4-5.824 6.775L19.825 20h-4.659l-4.265-6.212L5.56 20H4.18l6.107-7.104L4.18 4H8.84l4.039 5.883L17.935 4h1.38Z"
+            clip-rule="evenodd"
+          />
+        </Fragment>
+      ) : (
+        <Fragment>
+          <path
+            fill="currentColor"
+            fill-rule="evenodd"
+            d="m19.315 4-5.824 6.775L19.825 20h-4.659l-4.265-6.212L5.56 20H4.18l6.107-7.104L4.18 4H8.84l4.039 5.883L17.935 4h1.38Zm-3.5 15.008h2.12L8.178 5.04h-2.12l9.757 13.968Z"
+            clip-rule="evenodd"
+          />
+          <path
+            fill="currentColor"
+            fill-rule="evenodd"
+            d="M0 2a2 2 0 0 1 2-2h20a2 2 0 0 1 2 2v20a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2Zm2 0h20v20H2V2Z"
+            clip-rule="evenodd"
+          />
+        </Fragment>
+      )}
+    </Icon>
+  );
+}

package/src/components/icon/index.ts

@@ -211,7 +211,6 @@ export { TransferIcon } from './components/transfer-icon.js';
 export { TransportIcon } from './components/transport-icon.js';
 export { TravelExploreIcon } from './components/travel-explore-icon.js';
 export { TuneIcon } from './components/tune-icon.js';
-export { TwitterIcon } from './components/twitter-icon.js';
 export { UmbrellaIcon } from './components/umbrella-icon.js';
 export { UploadIcon } from './components/upload-icon.js';
 export { VerifiedIcon } from './components/verified-icon.js';
@@ -229,6 +228,7 @@ export { WindowsNewIcon } from './components/windows-new-icon.js';
 export { WineGlassIcon } from './components/wine-glass-icon.js';
 export { WordFileIcon } from './components/word-file-icon.js';
 export { WriteIcon } from './components/write-icon.js';
+export { XIcon } from './components/x-icon.js';
 export { YammerIcon } from './components/yammer-icon.js';
 export { YoutubeIcon } from './components/youtube-icon.js';
 export { ZipFileIcon } from './components/zip-file-icon.js';

package/src/components/modal/components/modal-backdrop/modal-backdrop.component.tsx

@@ -11,7 +11,7 @@ export function ModalBackdrop({ zIndex = 100, portalContainer, size, ...props }:
   const { children, state, className } = props;
 
   const ref = useRef(null);
-  const styles = backdropStyles({ className, fullscreen: size === 'full' });
+  const styles = backdropStyles({ className, fullscreen: size === 'full', fluid: size === 'fluid' });
 
   const { modalProps, underlayProps } = useModalOverlay(props, state, ref);
 

package/src/components/modal/components/modal-backdrop/modal-backdrop.styles.ts

@@ -2,8 +2,8 @@ import { tv } from 'tailwind-variants';
 
 export const styles = tv({
   slots: {
-    base: 'fixed inset-0 z-50 flex animate-fadeIn justify-center overflow-y-auto bg-black/50 p-2',
-    modal: 'relative top-5 z-10 h-fit w-full animate-fadeInDown',
+    base: 'fixed inset-0 z-50 flex animate-fadeIn items-center justify-center overflow-y-auto bg-black/50 p-2',
+    modal: 'relative top-3 z-10 h-fit w-full animate-fadeInDown',
   },
   variants: {
     fullscreen: {
@@ -12,5 +12,10 @@ export const styles = tv({
         base: 'flex flex-col p-0',
       },
     },
+    fluid: {
+      true: {
+        modal: 'px-2',
+      },
+    },
   },
 });

package/src/components/modal/components/modal-dialog/components/modal-dialog-body/modal-dialog-body.component.tsx

@@ -1,11 +1,15 @@
 import React from 'react';
 
-import { styles } from './modal-dialog-body.styles.js';
+import { useModalDialogContext } from '../../modal-dialog.component.js';
+
+import { styles as modalBodyStyles } from './modal-dialog-body.styles.js';
 import { type ModalDialogBodyProps } from './modal-dialog-body.types.js';
 
 export function ModalDialogBody({ className, children, ...props }: ModalDialogBodyProps) {
+  const { size } = useModalDialogContext();
+  const styles = modalBodyStyles({ size });
   return (
-    <div className={styles({ className })} {...props}>
+    <div className={styles.base({ className })} {...props}>
       {children}
     </div>
   );

package/src/components/modal/components/modal-dialog/components/modal-dialog-body/modal-dialog-body.styles.ts

@@ -1,5 +1,17 @@
 import { tv } from 'tailwind-variants';
 
-export const styles = tv({
-  base: 'flex-1 overflow-auto px-4 py-3',
-});
+export const styles = tv(
+  {
+    slots: { base: 'flex-1 overflow-auto' },
+    variants: {
+      size: {
+        full: { base: 'px-4 py-3' },
+        lg: { base: 'px-12 pb-12' },
+        md: { base: 'px-7 pb-7' },
+        sm: { base: 'px-5 pb-7' },
+        fluid: { base: 'px-5 pb-7' },
+      },
+    },
+  },
+  { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },
+);

package/src/components/modal/components/modal-dialog/components/modal-dialog-footer/modal-dialog-footer.component.tsx

@@ -1,12 +1,33 @@
+'use client';
+
 import React from 'react';
 
-import { styles } from './modal-dialog-footer.styles.js';
+import { Button } from '../../../../../button/index.js';
+import { useModalDialogContext } from '../../modal-dialog.component.js';
+
+import { styles as modalFooterStyles } from './modal-dialog-footer.styles.js';
 import { type ModalDialogFooterProps } from './modal-dialog-footer.types.js';
 
-export function ModalDialogFooter({ className, children, ...props }: ModalDialogFooterProps) {
+export function ModalDialogFooter({
+  className,
+  primaryLabel,
+  primaryOnClick,
+  secondaryLabel,
+  secondaryOnClick,
+  ...props
+}: ModalDialogFooterProps) {
+  const { size } = useModalDialogContext();
+  const styles = modalFooterStyles({ size });
   return (
-    <div className={styles({ className })} {...props}>
-      {children}
+    <div className={styles.base({ className })} {...props}>
+      <Button look="primary" size="large" className={styles.primaryBtn()} onClick={primaryOnClick}>
+        {primaryLabel}
+      </Button>
+      {secondaryLabel && (
+        <Button look="link" size="large" className={styles.secondaryBtn()} onClick={secondaryOnClick}>
+          {secondaryLabel}
+        </Button>
+      )}
     </div>
   );
 }

package/src/components/modal/components/modal-dialog/components/modal-dialog-footer/modal-dialog-footer.styles.ts

@@ -1,5 +1,17 @@
 import { tv } from 'tailwind-variants';
 
-export const styles = tv({
-  base: 'border-t border-t-border bg-background px-3 py-2',
-});
+export const styles = tv(
+  {
+    slots: { base: 'flex gap-1', primaryBtn: '', secondaryBtn: 'no-underline hover:underline' },
+    variants: {
+      size: {
+        full: { base: 'px-4 py-3' },
+        lg: { base: '-mt-6 px-12 pb-12' },
+        md: { base: '-mt-2 px-7 pb-7' },
+        sm: { base: '-mt-2 flex-col px-5 pb-5' },
+        fluid: { base: '-mt-2 px-5 pb-5 max-md:flex-col' },
+      },
+    },
+  },
+  { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },
+);

package/src/components/modal/components/modal-dialog/components/modal-dialog-footer/modal-dialog-footer.types.ts

@@ -5,4 +5,20 @@ export type ModalDialogFooterProps = {
    * Footer content
    */
   children?: ReactNode;
+  /**
+   * Label for primary button
+   */
+  primaryLabel: string;
+  /**
+   * onClick for primary button
+   */
+  primaryOnClick: () => void;
+  /**
+   * Label for secondary button
+   */
+  secondaryLabel?: string;
+  /**
+   * onClick for secondary button
+   */
+  secondaryOnClick?: () => void;
 } & HTMLAttributes<HTMLElement>;

package/src/components/modal/components/modal-dialog/modal-dialog.component.tsx

@@ -1,4 +1,6 @@
-import React, { useRef } from 'react';
+'use client';
+
+import React, { createContext, useContext, useRef } from 'react';
 import { useDialog, useFocusRing } from 'react-aria';
 
 import { CloseIcon } from '../../../../components/icon/index.js';
@@ -6,8 +8,11 @@ import { CloseIcon } from '../../../../components/icon/index.js';
 import { ModalDialogBody } from './components/modal-dialog-body/index.js';
 import { ModalDialogFooter } from './components/modal-dialog-footer/index.js';
 import { styles as dialogStyles } from './modal-dialog.styles.js';
-import { type ModalDialogProps } from './modal-dialog.types.js';
+import { ModalDialogContextValue, type ModalDialogProps } from './modal-dialog.types.js';
+
+const ModalDialogContext = createContext<ModalDialogContextValue>({ size: 'md' });
 
+export const useModalDialogContext = () => useContext(ModalDialogContext);
 /**
  * @private
  */
@@ -32,7 +37,9 @@ export function ModalDialog({ className, body, onClose, size = 'md', ...props }:
           {props.title}
         </h3>
       )}
-      {body ? <ModalDialogBody>{children}</ModalDialogBody> : children}
+      <ModalDialogContext.Provider value={{ size }}>
+        {body ? <ModalDialogBody>{children}</ModalDialogBody> : children}
+      </ModalDialogContext.Provider>
     </div>
   );
 }

package/src/components/modal/components/modal-dialog/modal-dialog.styles.ts

@@ -4,22 +4,31 @@ export const styles = tv(
   {
     slots: {
       base: 'relative mx-auto flex max-w-full flex-col overflow-hidden rounded bg-white outline-none',
-      title: 'border-b border-b-heading pb-2 pl-4 pr-5 pt-3 text-lg font-medium',
-      close: 'absolute right-1 top-1 block p-1',
+      title: 'typography-body-7 pb-4 pt-9 font-bold',
+      close: 'absolute right-0 top-0 block p-3',
     },
     variants: {
       size: {
         full: {
           base: 'max-h-screen w-full flex-1',
+          close: 'p-2',
+          title: 'px-4 py-3',
         },
         lg: {
-          base: 'w-[56.25rem]',
+          base: 'w-[50rem]',
+          title: 'px-12 pt-12',
         },
         md: {
           base: 'w-[37.5rem]',
+          title: 'px-7 ',
         },
         sm: {
-          base: 'w-[18.75rem]',
+          base: 'w-[25rem]',
+          title: 'px-5',
+        },
+        fluid: {
+          base: 'w-full',
+          title: 'px-5',
         },
       },
       isFocusVisible: {

package/src/components/modal/components/modal-dialog/modal-dialog.types.ts

@@ -35,3 +35,10 @@ export type ModalDialogProps = {
    */
   title?: string;
 } & AriaDialogProps;
+
+export type ModalDialogContextValue = {
+  /**
+   * Size of dialog
+   */
+  size?: Variants['size'];
+};

package/src/components/repeater/repeater.component.tsx

@@ -99,6 +99,7 @@ export function Repeater({
                         size="small"
                         soft
                         onClick={() => handleRemove(item.id, index)}
+                        type="button"
                       >
                         Remove
                       </Button>
@@ -118,6 +119,7 @@ export function Repeater({
           size="small"
           soft
           onClick={() => handleAdd()}
+          type="button"
         >
           {addText}
         </Button>

package/dist/components/icon/components/twitter-icon.d.ts

@@ -1,2 +0,0 @@
-import { type IconProps } from '../icon.types.js';
-export declare function TwitterIcon({ look, 'aria-label': ariaLabel, copyrightYear, ...props }: IconProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/icon/components/twitter-icon.js

@@ -1,35 +0,0 @@
-function _extends() {
-    _extends = Object.assign || function(target) {
-        for(var i = 1; i < arguments.length; i++){
-            var source = arguments[i];
-            for(var key in source){
-                if (Object.prototype.hasOwnProperty.call(source, key)) {
-                    target[key] = source[key];
-                }
-            }
-        }
-        return target;
-    };
-    return _extends.apply(this, arguments);
-}
-import React, { Fragment } from 'react';
-import { Icon } from '../icon.component.js';
-export function TwitterIcon({ look ='filled' , 'aria-label': ariaLabel = 'Twitter' , copyrightYear ='2024' , ...props }) {
-    return React.createElement(Icon, _extends({
-        "aria-label": ariaLabel,
-        copyrightYear: copyrightYear
-    }, props), look === 'filled' ? React.createElement("path", {
-        fillRule: "evenodd",
-        clipRule: "evenodd",
-        d: "M2 0C0.895431 0 0 0.89543 0 2V22C0 23.1046 0.89543 24 2 24H22C23.1046 24 24 23.1046 24 22V2C24 0.895431 23.1046 0 22 0H2ZM18.1146 7.34209C18.7788 7.26155 19.4119 7.08237 20 6.81641C19.5605 7.48568 19.003 8.07379 18.3618 8.54452C18.368 8.68749 18.3712 8.83233 18.3712 8.97655C18.3712 13.3898 15.0691 18.4799 9.032 18.4799C7.1784 18.4799 5.45216 17.9261 4 16.9784C4.25597 17.0096 4.51506 17.0259 4.7804 17.0259C6.31809 17.0259 7.72905 16.4921 8.85219 15.5962C7.41626 15.5693 6.19572 14.6035 5.77743 13.2768C5.97846 13.3156 6.167 13.3362 6.37802 13.3362C6.6777 13.3362 6.93429 13.2956 7.20899 13.2194C5.70813 12.9122 4.50944 11.5625 4.50944 9.94487V9.90241C5.13376 10.1534 5.52583 10.3032 6.06337 10.3207C5.18308 9.72198 4.67052 8.69935 4.67052 7.54062C4.67052 6.92879 4.83221 6.35504 5.11503 5.86183C6.73451 7.88212 9.15249 9.21192 11.8801 9.35114C11.8239 9.10641 11.7952 8.85169 11.7952 8.58947C11.7952 6.74586 13.2655 5.25 15.0773 5.25C16.0219 5.25 16.8747 5.65581 17.4734 6.30447C18.2213 6.15401 18.9237 5.87681 19.558 5.49473C19.312 6.27388 18.7919 6.92879 18.1146 7.34209Z",
-        fill: "currentColor"
-    }) : React.createElement(Fragment, null, React.createElement("path", {
-        d: "M18.1146 7.34209C18.7788 7.26155 19.4119 7.08237 20 6.81641C19.5605 7.48568 19.003 8.07379 18.3618 8.54452C18.368 8.68749 18.3712 8.83233 18.3712 8.97655C18.3712 13.3898 15.0691 18.4799 9.032 18.4799C7.1784 18.4799 5.45216 17.9261 4 16.9784C4.25597 17.0096 4.51506 17.0259 4.7804 17.0259C6.31809 17.0259 7.72905 16.4921 8.85219 15.5962C7.41626 15.5693 6.19572 14.6035 5.77743 13.2768C5.97846 13.3156 6.167 13.3362 6.37802 13.3362C6.6777 13.3362 6.93429 13.2956 7.20899 13.2194C5.70813 12.9122 4.50944 11.5625 4.50944 9.94487V9.90241C5.13376 10.1534 5.52583 10.3032 6.06337 10.3207C5.18308 9.72198 4.67052 8.69935 4.67052 7.54062C4.67052 6.92879 4.83221 6.35504 5.11503 5.86183C6.73451 7.88212 9.15249 9.21192 11.8801 9.35114C11.8239 9.10641 11.7952 8.85169 11.7952 8.58947C11.7952 6.74586 13.2655 5.25 15.0773 5.25C16.0219 5.25 16.8747 5.65581 17.4734 6.30447C18.2213 6.15401 18.9237 5.87681 19.558 5.49473C19.312 6.27388 18.7919 6.92879 18.1146 7.34209Z",
-        fill: "currentColor"
-    }), React.createElement("path", {
-        fillRule: "evenodd",
-        clipRule: "evenodd",
-        d: "M0 2C0 0.89543 0.895431 0 2 0H22C23.1046 0 24 0.895431 24 2V22C24 23.1046 23.1046 24 22 24H2C0.89543 24 0 23.1046 0 22V2ZM2 2H22V22H2V2Z",
-        fill: "currentColor"
-    })));
-}