@westpac/ui 1.0.0-canary.9 → 1.1.0

package/src/components/popover/components/panel/panel.hook.tsx

@@ -1,41 +1,47 @@
-import { useMemo } from 'react';
+import { RefObject, useCallback, useEffect, useLayoutEffect, useMemo, useState } from 'react';
 
 import { PanelProps } from './panel.types.js';
 
-const PANEL_WIDTH_SIZE = 282;
+const PANEL_WIDTH_SIZE = 300;
+const ARROW_HEIGHT = 7; // the border-x value for the before pseudo element in the styles, 2*ARROW_HEIGHT gives the width of the arrow
 
-const getVerticalPositionPopover = (element: HTMLDivElement) => {
+const getHorizontalPositionPopover = (element: HTMLDivElement, screenWidth: number) => {
   const triggerDOMRect = element.getBoundingClientRect();
-
-  const offsetLeftToCenter = (PANEL_WIDTH_SIZE - (triggerDOMRect?.width || 0) / 2) * -1;
+  const offsetLeftToCenter = ((PANEL_WIDTH_SIZE - (triggerDOMRect?.width || 0)) / 2) * -1;
   if (triggerDOMRect.left + offsetLeftToCenter <= 0) {
     return 'left';
   }
-  if (
-    triggerDOMRect.left + offsetLeftToCenter >= 0 &&
-    triggerDOMRect.right + offsetLeftToCenter * -1 <= window.innerWidth
-  ) {
+  if (triggerDOMRect.left + offsetLeftToCenter >= 0 && triggerDOMRect.right + offsetLeftToCenter * -1 <= screenWidth) {
     return 'center';
   }
-  if (PANEL_WIDTH_SIZE + (triggerDOMRect?.left || 0) >= window.innerWidth) {
+  if (PANEL_WIDTH_SIZE + (triggerDOMRect?.left || 0) >= screenWidth) {
     return 'right';
   }
 };
 
-const getLeftOffsetPerVerticalPosition = (element: HTMLDivElement) => {
+const getLeftOffsetPerHorizontalPosition = (element: HTMLDivElement, screenWidth: number) => {
   const triggerDOMRect = element.getBoundingClientRect();
-  switch (getVerticalPositionPopover(element)) {
+
+  const rightOffset =
+    (PANEL_WIDTH_SIZE + (triggerDOMRect?.left || 0) - screenWidth + (screenWidth - (triggerDOMRect?.right || 0))) * -1;
+  switch (getHorizontalPositionPopover(element, screenWidth)) {
     case 'center':
       return ((PANEL_WIDTH_SIZE - (triggerDOMRect?.width || 0)) / 2) * -1;
     case 'right':
-      return (
-        (PANEL_WIDTH_SIZE +
-          (triggerDOMRect?.left || 0) -
-          window.innerWidth +
-          (window.innerWidth - (triggerDOMRect?.right || 0))) *
-        -1
-      );
+      // For smaller screens, if adjusting for right makes it go off screen on the left, adjust it to have a 16px space from the edge
+      if (triggerDOMRect.left + rightOffset <= 0) {
+        // For extra small screens extra adjustment is needed e.g. <320px wide
+        if (triggerDOMRect.left + rightOffset - PANEL_WIDTH_SIZE <= -screenWidth) {
+          return rightOffset - (triggerDOMRect.left + rightOffset) + (screenWidth - PANEL_WIDTH_SIZE) / 2;
+        }
+        return rightOffset - (triggerDOMRect.left + rightOffset) + 16;
+      }
+      return rightOffset;
     default:
+      // For extra small screens extra adjustment is needed e.g. <320px wide
+      if (triggerDOMRect?.left + PANEL_WIDTH_SIZE >= screenWidth) {
+        return -(triggerDOMRect?.left || 0) + (screenWidth - PANEL_WIDTH_SIZE) / 2;
+      }
       return 0;
   }
 };
@@ -45,6 +51,7 @@ export type PanelHookProps = {
   portal: PanelProps['portal'];
   state: PanelProps['state'];
   triggerRef: PanelProps['triggerRef'];
+  popoverRef?: RefObject<HTMLDivElement>;
 };
 
 /**
@@ -53,14 +60,78 @@ export type PanelHookProps = {
  * @returns {Object} return.popoverPosition - The calculated position styles for the popover.
  * @returns {Object} return.arrowPosition - The calculated position styles for the popover arrow.
  */
-export function usePanel({ state, placement = 'bottom', triggerRef, portal }: PanelHookProps) {
+export function usePanel({ state, placement = 'top', triggerRef, portal, popoverRef }: PanelHookProps) {
+  if (!triggerRef.current) {
+    throw new Error('You must pass valid refs.');
+  }
+  // using documentElement to get the width of the viewport excluding scrollbar
+  const [screenWidth, setScreenWidth] = useState<number>(document.documentElement.clientWidth);
+  const [localPlacement, setLocalPlacement] = useState<PanelProps['placement']>(placement);
+  const [originalPosition, setOriginalPosition] = useState<DOMRect | null>(null);
+  const trigger = triggerRef.current.getBoundingClientRect();
+
+  // used for flipping popover if there is no space
+  const getVerticalPosition = useCallback(() => {
+    // handle vertical position with portal
+    if (portal instanceof Element) {
+      const portalRect = portal.getBoundingClientRect();
+      if (originalPosition && originalPosition?.top < portalRect.top) {
+        setLocalPlacement('bottom');
+      }
+      if (originalPosition && originalPosition?.bottom > portalRect.bottom) {
+        setLocalPlacement('top');
+      }
+      return;
+    }
+    // handle vertical position with no portal
+    if (originalPosition && originalPosition?.height > trigger.top) {
+      setLocalPlacement('bottom');
+    }
+    if (originalPosition && originalPosition?.bottom > document.documentElement.clientHeight) {
+      setLocalPlacement('top');
+    }
+    if (
+      originalPosition &&
+      originalPosition?.bottom <= document.documentElement.clientHeight &&
+      placement === 'bottom'
+    ) {
+      setLocalPlacement('bottom');
+    }
+  }, [placement, portal, originalPosition, trigger.top]);
+
+  useLayoutEffect(() => {
+    setOriginalPosition(popoverRef?.current?.getBoundingClientRect() || null);
+  }, [popoverRef]);
+
+  // So popover can be in correct position on open and doesn't move when opened
+  useLayoutEffect(() => {
+    getVerticalPosition();
+  }, [getVerticalPosition]);
+
+  useEffect(() => {
+    const handleResize = () => {
+      if (portal instanceof Element) {
+        setScreenWidth(portal.clientWidth);
+        getVerticalPosition();
+      } else {
+        setScreenWidth(document.documentElement.clientWidth);
+        getVerticalPosition();
+      }
+    };
+
+    window.addEventListener('resize', handleResize);
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, [portal, getVerticalPosition]);
+
   const popoverPosition = useMemo(() => {
     const triggerDOMRect = triggerRef.current?.getBoundingClientRect();
     // The offset is calculated according if the popover will overflow the window
-    const leftOffset = triggerRef.current ? getLeftOffsetPerVerticalPosition(triggerRef.current) : 0;
+    const leftOffset = triggerRef.current ? getLeftOffsetPerHorizontalPosition(triggerRef.current, screenWidth) : 0;
     // If it is not portal, we can simplify the logic
     if (!portal) {
-      switch (placement) {
+      switch (localPlacement) {
         case 'top':
           return {
             bottom: '100%',
@@ -77,7 +148,7 @@ export function usePanel({ state, placement = 'bottom', triggerRef, portal }: Pa
 
     // If it is portal, we need to considerate the scroll if there is a scroll in the portal
     const portalElement = portal as Element;
-    switch (placement) {
+    switch (localPlacement) {
       case 'top':
         return {
           // The top is calculated according to the portal element
@@ -94,20 +165,23 @@ export function usePanel({ state, placement = 'bottom', triggerRef, portal }: Pa
         };
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [placement, portal, triggerRef, state.isOpen]);
+  }, [localPlacement, portal, triggerRef, state.isOpen, screenWidth]);
 
   const arrowPosition = useMemo(() => {
     const triggerDOMRect = triggerRef.current?.getBoundingClientRect();
-    const leftOffset = triggerRef.current ? getLeftOffsetPerVerticalPosition(triggerRef.current) * -1 : 0;
+    const leftOffset = triggerRef.current
+      ? getLeftOffsetPerHorizontalPosition(triggerRef.current, screenWidth) * -1
+      : 0;
 
     return {
-      left: `${(triggerDOMRect?.width || 0) / 2 + leftOffset}px`,
+      left: `${leftOffset - ARROW_HEIGHT + (triggerDOMRect?.width || 0) / 2}px`,
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [triggerRef, state.isOpen]);
+  }, [triggerRef, state.isOpen, screenWidth, originalPosition]);
 
   return {
     popoverPosition,
     arrowPosition,
+    localPlacement,
   };
 }

package/src/components/popover/components/panel/panel.styles.ts

@@ -18,11 +18,11 @@ export const styles = tv({
     placement: {
       top: {
         popover: '-mt-2 mb-2',
-        arrow: 'top-full translate-x-[-6px] translate-y-0',
+        arrow: 'top-full translate-x-[-2.5px]',
       },
       bottom: {
         popover: 'mt-2',
-        arrow: 'bottom-full translate-x-[6px] rotate-180 after:bottom-[1px]',
+        arrow: 'bottom-full translate-x-[14px] rotate-180', // rotate-180 moves the arrow to the left, translate needed for centering
       },
     },
   },

package/src/components/popover/components/panel/panel.types.ts

@@ -16,6 +16,14 @@ export type PanelProps = {
    * Tag to render
    */
   headingTag?: keyof Pick<JSX.IntrinsicElements, 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'>;
+  /**
+   * onClose callback
+   */
+  onClose?: () => void;
+  /**
+   * Whether the popover is open by default
+   */
+  open?: boolean;
   /**
    * Placement of popover. If no placement provided it will default to top unless there is no space then will appear on bottom.
    */

package/src/components/popover/popover.component.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React, { useCallback, useEffect, useId, useLayoutEffect, useRef } from 'react';
+import React, { useCallback, useEffect, useId, useLayoutEffect, useRef, useState } from 'react';
 import { useOverlayTriggerState } from 'react-stately';
 
 import { Button } from '../button/index.js';
@@ -34,12 +34,15 @@ export function Popover({
   const panelId = useId();
   const styles = popoverStyles({ linkStyling });
   const ref = useRef<HTMLButtonElement & HTMLAnchorElement & HTMLSpanElement & HTMLDivElement>(null);
+  const [isOpenDefault, setIsOpenDefault] = useState(open);
 
   const handleClick = useCallback(
     (event: React.MouseEvent<HTMLElement>) => {
+      if (isOpenDefault) setIsOpenDefault(false);
       onClick(event);
       state.toggle();
     },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [onClick, state],
   );
 
@@ -59,7 +62,8 @@ export function Popover({
 
   useLayoutEffect(() => {
     if (open) state.setOpen(true);
-  }, [open, state]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open]);
 
   return (
     <div className={styles.base({ className })}>
@@ -70,6 +74,7 @@ export function Popover({
         soft={soft}
         aria-expanded={state.isOpen}
         aria-controls={panelId}
+        aria-haspopup="dialog"
         onClick={handleClick}
         ref={ref}
         size={size}
@@ -87,6 +92,15 @@ export function Popover({
           state={state}
           id={panelId}
           triggerRef={ref}
+          // Ensures popover heading doesn't get focused if default opened
+          open={isOpenDefault}
+          onClose={() => {
+            ref.current?.focus();
+            // Ensures focus handling works once popover is closed if it was default opened
+            if (isOpenDefault) {
+              setIsOpenDefault(false);
+            }
+          }}
         />
       )}
     </div>

package/src/components/radio-group/radio-group.component.tsx

@@ -19,6 +19,7 @@ export const RadioGroupContext = createContext<RadioGroupContextState>({
   size: 'medium',
   state: {
     name: '',
+    defaultSelectedValue: null,
     isDisabled: false,
     isReadOnly: false,
     isRequired: false,
@@ -71,7 +72,6 @@ export const RadioGroupContext = createContext<RadioGroupContextState>({
     commitValidation: function (): void {
       throw new Error(FUNCTION_NOT_IMPLEMENTED);
     },
-    defaultSelectedValue: null,
   },
 });
 

package/src/components/selector/components/selector-button-group/selector-button-group.component.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { createContext, useCallback, useMemo, useState } from 'react';
+import React, { createContext, useCallback, useMemo, useState } from 'react';
 import { useField } from 'react-aria';
 
 import { useBreakpoint } from '../../../../hook/breakpoints.hook.js';

package/src/components/selector/components/selector-checkbox-group/components/selector-checkbox-group-option/selector-checkbox-group-option.component.tsx

@@ -58,7 +58,12 @@ function BaseSelectorCheckboxGroupOption(
       className={styles.base({})}
     >
       <VisuallyHidden>
-        <input {...mergeProps(inputProps, focusProps)} ref={localRef} />
+        <input
+          {...mergeProps(inputProps, focusProps)}
+          // override the aria-describedby to prevent screen readers from reading the content of the option twice, once from the input and once from the cell
+          aria-describedby={undefined}
+          ref={localRef}
+        />
       </VisuallyHidden>
       {children}
     </FlexiCell>

package/src/components/selector/components/selector-checkbox-group/selector-checkbox-group.component.tsx

@@ -15,6 +15,7 @@ import {
 
 export const SelectorCheckboxGroupContext = createContext<SelectorCheckboxGroupContextState>({
   value: [],
+  defaultValue: [],
   isDisabled: false,
   isReadOnly: false,
   isSelected: () => false,
@@ -71,7 +72,6 @@ export const SelectorCheckboxGroupContext = createContext<SelectorCheckboxGroupC
   commitValidation: function (): void {
     throw new Error(FUNCTION_NOT_IMPLEMENTED);
   },
-  defaultValue: [],
 });
 
 export function SelectorCheckboxGroup(props: SelectorCheckboxGroupProps) {

package/src/components/selector/components/selector-link-group/selector-link-group.component.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { createContext } from 'react';
+import React, { createContext } from 'react';
 import { useField } from 'react-aria';
 
 import { useBreakpoint } from '../../../../hook/breakpoints.hook.js';

package/src/components/selector/components/selector-radio-group/components/selector-radio-group-option/selector-radio-group-option.component.tsx

@@ -55,7 +55,12 @@ function BaseSelectorRadioGroupOption(
       className={styles.base({})}
     >
       <VisuallyHidden>
-        <input {...mergeProps(inputProps, focusProps)} ref={localRef} />
+        <input
+          {...mergeProps(inputProps, focusProps)}
+          // override the aria-describedby to prevent screen readers from reading the content of the option twice, once from the input and once from the cell
+          aria-describedby={undefined}
+          ref={localRef}
+        />
       </VisuallyHidden>
       {children}
     </FlexiCell>

package/src/components/selector/components/selector-radio-group/selector-radio-group.component.tsx

@@ -17,6 +17,7 @@ export const SelectorRadioGroupContext = createContext<SelectorRadioGroupContext
   state: {
     // TODO: Remove deprecated name prop once React Aria removes it from RadioGroupState
     name: '',
+    defaultSelectedValue: null,
     isDisabled: false,
     isReadOnly: false,
     isRequired: false,
@@ -69,7 +70,6 @@ export const SelectorRadioGroupContext = createContext<SelectorRadioGroupContext
     commitValidation: function (): void {
       throw new Error(FUNCTION_NOT_IMPLEMENTED);
     },
-    defaultSelectedValue: null,
   },
 });
 

package/src/components/symbol/components/logos/bom-logo.tsx

@@ -9,7 +9,6 @@ export function BOMLogo({
   copyrightYear = '2025',
   viewBoxWidth = 150,
   viewBoxHeight = 39,
-  mode = 'auto',
   className,
   ...props
 }: SymbolProps) {
@@ -22,146 +21,93 @@ export function BOMLogo({
       viewBoxHeight={viewBoxHeight}
       {...props}
     >
-      <polygon points="0 0 0 13 6.5 6.5 " fill="#685AC0" />
-      <polygon points="13 0 0 0 6.5 6.5 " fill="#A094FC" />
-      <polygon points="13 13 13 0 6.5 6.5 " fill="#685AC0" />
-      <polygon points="0 13 13 13 6.5 6.5 " fill="#20024E" />
-      <polygon points="13 0 13 13 19.5 6.5 " fill="#C2BFEB" />
-      <polygon points="26 0 13 0 19.5 6.5 " fill="#685AC0" />
-      <polygon points="26 13 26 0 19.5 6.5 " fill="#20024E" />
-      <polygon points="13 13 26 13 19.5 6.5 " fill="#685AC0" />
-      <polygon points="13 13 13 26 19.5 19.5 " fill="#C2BFEB" />
-      <polygon points="26 13 13 13 19.5 19.5 " fill="#A094FC" />
-      <polygon points="26 26 26 13 19.5 19.5 " fill="#685AC0" />
-      <polygon points="13 26 26 26 19.5 19.5 " fill="#20024E" />
-      <polygon points="0 13 0 26 6.5 19.5 " fill="#685AC0" />
-      <polygon points="13 13 0 13 6.5 19.5 " fill="#C2BFEB" />
-      <polygon points="13 26 13 13 6.5 19.5 " fill="#20024E" />
-      <polygon points="0 26 13 26 6.5 19.5 " fill="#A094FC" />
-      <polygon points="13 26 13 39 19.5 32.5 " fill="#C2BFEB" />
-      <polygon points="26 26 13 26 19.5 32.5 " fill="#685AC0" />
-      <polygon points="13 26 0 26 6.5 32.5 " fill="#C2BFEB" />
-      <polygon points="13 39 13 26 6.5 32.5 " fill="#20024E" />
-      <path
-        d="M33 15.5h1c0.4 0 0.7-0.4 0.7-0.8V2.5c0-0.4-0.4-0.8-0.7-0.8h-1V0.2h6.7c3.8 0 6.1 1.2 6.1 4.3 0 2.2-1.3 3.2-3.4 3.7v0.1c2.5 0.3 4.1 1.6 4.1 4.1 0 3.3-2.6 4.8-6.5 4.8h-7V15.5zM39.6 7.4c2.2 0 3.4-0.8 3.4-2.8 0-2-1.1-2.7-3.3-2.7h-2.1v5.5H39.6zM39.9 15.4c2.6 0 3.7-1.1 3.7-3.2 0-2.1-1-3.1-3.8-3.1h-2.3v6.3H39.9z"
-        className={clsx({
-          'fill-[#20024E]': mode === 'light',
-          'fill-white': mode === 'dark',
-          'fill-[#20024E] dark:fill-white': mode === 'auto',
-        })}
-      />
-      <path
-        d="M47.6 13.5c0-2.6 2.1-3.8 5-3.8 1.1 0 2 0.1 2.9 0.3V8.3c0-1.6-0.9-2.2-2.6-2.2 -1.7 0-2.6 0.6-3.3 1.2h-1.2v-2c1.1-0.5 2.6-1 4.9-1 3 0 4.7 0.9 4.7 3.7v6.7c0 0.5 0.3 0.8 0.8 0.8h0.7v1.3c-0.3 0.2-0.9 0.4-1.7 0.4 -1.4 0-2.1-0.6-2.3-1.7 -0.9 1.2-2.2 1.7-3.9 1.7C49.3 17.2 47.6 16 47.6 13.5zM55.5 14.2v-2.7c-0.7-0.1-1.5-0.2-2.4-0.2 -1.8 0-2.9 0.7-2.9 2.2 0 1.5 0.9 2.2 2.3 2.2C53.9 15.5 54.7 15 55.5 14.2z"
-        className={clsx({
-          'fill-[#20024E]': mode === 'light',
-          'fill-white': mode === 'dark',
-          'fill-[#20024E] dark:fill-white': mode === 'auto',
-        })}
-      />
-      <path
-        d="M60.4 15.5h0.9c0.3 0 0.7-0.3 0.7-0.7V6.7c0-0.3-0.3-0.7-0.7-0.7h-1V4.4H64c0.4 0 0.6 0.3 0.6 1.5v0.3c1.3-1.2 3-2 5-2 1.8 0 3.3 0.7 3.3 3.1v7.4c0 0.3 0.3 0.7 0.6 0.7h0.8v1.5h-5.8v-1.5h1.7V8.3c0-1.6-0.7-2-2-2 -1.3 0-2.6 0.6-3.7 1.2v8h1.8v1.5h-6V15.5z"
-        className={clsx({
-          'fill-[#20024E]': mode === 'light',
-          'fill-white': mode === 'dark',
-          'fill-[#20024E] dark:fill-white': mode === 'auto',
-        })}
-      />
-      <path
-        d="M75.1 15.5h0.9c0.3 0 0.7-0.3 0.7-0.7V2.5c0-0.3-0.3-0.7-0.7-0.7h-1V0.2h3.8c0.3 0 0.5 0.2 0.5 0.7V11l4-4.1c0.4-0.4 0.2-0.9-0.2-0.9h-0.6V4.4h5.2v1.6h-0.6c-0.3 0-0.8 0.2-1.1 0.5l-3.1 3.1 3.5 5.1c0.3 0.5 0.7 0.7 1.1 0.7h0.4v1.5H85l-3.8-5.6 -1.8 1.8v2.3h1.6v1.5h-5.8V15.5z"
-        className={clsx({
-          'fill-[#20024E]': mode === 'light',
-          'fill-white': mode === 'dark',
-          'fill-[#20024E] dark:fill-white': mode === 'auto',
-        })}
-      />
-      <path
-        d="M93.2 10.8c0-4 2.8-6.5 6.4-6.5 3.6 0 6.4 2.5 6.4 6.5 0 4-2.8 6.4-6.4 6.4C96 17.2 93.2 14.8 93.2 10.8zM103.3 10.8c0-3.1-1.5-4.8-3.7-4.8 -2.2 0-3.7 1.6-3.7 4.8 0 3.1 1.5 4.7 3.7 4.7C101.8 15.5 103.3 13.9 103.3 10.8z"
-        className={clsx({
-          'fill-[#20024E]': mode === 'light',
-          'fill-white': mode === 'dark',
-          'fill-[#20024E] dark:fill-white': mode === 'auto',
-        })}
-      />
-      <path
-        d="M106.6 15.5h0.9c0.3 0 0.7-0.3 0.7-0.7V6.1h-1.7V4.4h1.7V3.4c0-2.4 1.4-3.4 3.7-3.4 1 0 1.6 0.1 2 0.3v1.5h-1.2c-1.1 0-1.9 0.2-1.9 1.6v1h2.7v1.6h-2.7v8.8c0 0.3 0.3 0.7 0.7 0.7h1.2v1.5h-6.1V15.5z"
-        className={clsx({
-          'fill-[#20024E]': mode === 'light',
-          'fill-white': mode === 'dark',
-          'fill-[#20024E] dark:fill-white': mode === 'auto',
-        })}
-      />
-      <path
-        d="M33 36.3h1c0.4 0 0.7-0.4 0.7-0.8V23.3c0-0.4-0.4-0.8-0.7-0.8h-1v-1.6h6.1l4 12.6h0.1l4-12.6h6.1v1.6h-1c-0.4 0-0.7 0.4-0.7 0.8v12.2c0 0.3 0.4 0.8 0.7 0.8h1v1.5h-6.4v-1.5h1.9V22.8h-0.2l-4.8 15h-2l-4.8-15h-0.1v13.5h1.9v1.5H33V36.3z"
-        className={clsx({
-          'fill-[#20024E]': mode === 'light',
-          'fill-white': mode === 'dark',
-          'fill-[#20024E] dark:fill-white': mode === 'auto',
-        })}
-      />
-      <path
-        d="M53.4 31.5c0-4 2.5-6.5 6.1-6.5 3.5 0 5.6 1.9 5.6 6.1 0 0.4 0 0.7 0 0.8h-9c0.1 2.9 1.4 4.4 3.9 4.4 1.8 0 2.6-0.6 3.3-1.4h1.5v1.8c-1 0.7-2.4 1.3-4.9 1.3C55.6 38 53.4 35.5 53.4 31.5zM62.6 30.3c-0.1-2.7-1.1-3.7-3-3.7 -1.9 0-3.1 1.2-3.4 3.7H62.6z"
-        className={clsx({
-          'fill-[#20024E]': mode === 'light',
-          'fill-white': mode === 'dark',
-          'fill-[#20024E] dark:fill-white': mode === 'auto',
-        })}
-      />
-      <path
-        d="M65.9 36.3h0.9c0.3 0 0.7-0.3 0.7-0.7V23.2c0-0.3-0.3-0.7-0.7-0.7h-1v-1.6h3.8c0.3 0 0.5 0.2 0.5 0.7v14c0 0.3 0.3 0.7 0.7 0.7h0.9v1.5h-5.8V36.3z"
-        className={clsx({
-          'fill-[#20024E]': mode === 'light',
-          'fill-white': mode === 'dark',
-          'fill-[#20024E] dark:fill-white': mode === 'auto',
-        })}
-      />
-      <path
-        d="M75.4 36.5c-0.2 0.8-0.7 1.3-1 1.3H73V23.2c0-0.3-0.3-0.7-0.7-0.7h-1v-1.6h3.8c0.3 0 0.5 0.2 0.5 0.7v5.5c1-1.1 2.3-2 4.4-2 2.4 0 4.8 1.5 4.8 6.3 0 4.9-2.8 6.6-5.5 6.6C77.3 38 76.2 37.4 75.4 36.5zM82.2 31.5c0-3.7-1.6-4.6-3.3-4.6 -1.2 0-2.4 0.7-3.2 1.4v6.9c0.7 0.7 1.6 1.2 3 1.2C80.3 36.4 82.2 35.5 82.2 31.5z"
-        className={clsx({
-          'fill-[#20024E]': mode === 'light',
-          'fill-white': mode === 'dark',
-          'fill-[#20024E] dark:fill-white': mode === 'auto',
-        })}
-      />
-      <path
-        d="M86 31.5c0-4 2.8-6.5 6.4-6.5 3.6 0 6.4 2.5 6.4 6.5 0 4-2.8 6.4-6.4 6.4C88.8 38 86 35.6 86 31.5zM96.2 31.6c0-3.1-1.5-4.8-3.7-4.8 -2.2 0-3.7 1.6-3.7 4.8 0 3.1 1.5 4.7 3.7 4.7C94.7 36.3 96.2 34.7 96.2 31.6z"
-        className={clsx({
-          'fill-[#20024E]': mode === 'light',
-          'fill-white': mode === 'dark',
-          'fill-[#20024E] dark:fill-white': mode === 'auto',
-        })}
-      />
-      <path
-        d="M100.8 34.9v-7.4c0-0.3-0.3-0.7-0.7-0.7h-0.9v-1.6h4.2V34c0 1.6 0.8 2 2 2 1.3 0 2.6-0.6 3.6-1.3v-8h-1.8v-1.6h4.4v10.4c0 0.3 0.3 0.7 0.7 0.7h1v1.5h-3.6c-0.3 0-0.6-0.3-0.6-1.5V36c-1.3 1.2-2.8 2-4.9 2C102.4 38 100.8 37.3 100.8 34.9z"
-        className={clsx({
-          'fill-[#20024E]': mode === 'light',
-          'fill-white': mode === 'dark',
-          'fill-[#20024E] dark:fill-white': mode === 'auto',
-        })}
-      />
-      <path
-        d="M114.1 36.3h0.9c0.3 0 0.7-0.3 0.7-0.7v-8.1c0-0.3-0.3-0.7-0.7-0.7h-1v-1.6h3.7c0.4 0 0.6 0.3 0.6 1.7v0.4c0.9-1.1 2-2.2 3.8-2.2 0.3 0 0.5 0 0.7 0.1v2.1h-0.5c-1.9 0-3 0.5-4 1.3v7.7h2v1.5h-6.2V36.3z"
-        className={clsx({
-          'fill-[#20024E]': mode === 'light',
-          'fill-white': mode === 'dark',
-          'fill-[#20024E] dark:fill-white': mode === 'auto',
-        })}
-      />
-      <path
-        d="M123.7 36.3h0.9c0.3 0 0.7-0.3 0.7-0.7v-8.1c0-0.3-0.3-0.7-0.7-0.7h-1v-1.6h3.7c0.4 0 0.6 0.3 0.6 1.5v0.3c1.3-1.2 3-2 5-2 1.8 0 3.3 0.7 3.3 3.1v7.4c0 0.3 0.3 0.7 0.6 0.7h0.8v1.5h-5.8v-1.5h1.7V29c0-1.6-0.7-2-2-2 -1.4 0-2.6 0.6-3.7 1.2v8h1.8v1.5h-6V36.3z"
-        className={clsx({
-          'fill-[#20024E]': mode === 'light',
-          'fill-white': mode === 'dark',
-          'fill-[#20024E] dark:fill-white': mode === 'auto',
-        })}
-      />
-      <path
-        d="M137.6 31.5c0-4 2.5-6.5 6.1-6.5 3.5 0 5.6 1.9 5.6 6.1 0 0.4 0 0.7 0 0.8h-9c0.1 2.9 1.4 4.4 3.9 4.4 1.8 0 2.6-0.6 3.3-1.4h1.5v1.8c-1 0.7-2.4 1.3-4.9 1.3C139.8 38 137.6 35.5 137.6 31.5zM146.8 30.3c-0.1-2.7-1.1-3.7-3-3.7 -1.9 0-3.1 1.2-3.4 3.7H146.8z"
-        className={clsx({
-          'fill-[#20024E]': mode === 'light',
-          'fill-white': mode === 'dark',
-          'fill-[#20024E] dark:fill-white': mode === 'auto',
-        })}
-      />
+      <g clipPath="url(#clip0_139_1246)">
+        <path d="M0 0V13L6.5 6.5L0 0Z" fill="#685AC0" />
+        <path d="M13 0H0L6.5 6.5L13 0Z" fill="#A094FC" />
+        <path d="M13 13V0L6.5 6.5L13 13Z" fill="#685AC0" />
+        <path d="M0 13H13L6.5 6.5L0 13Z" fill="#20024E" />
+        <path d="M13 0V13L19.5 6.5L13 0Z" fill="#C2BFEB" />
+        <path d="M26 0H13L19.5 6.5L26 0Z" fill="#685AC0" />
+        <path d="M26 13V0L19.5 6.5L26 13Z" fill="#20024E" />
+        <path d="M13 13H26L19.5 6.5L13 13Z" fill="#685AC0" />
+        <path d="M13 13V26L19.5 19.5L13 13Z" fill="#C2BFEB" />
+        <path d="M26 13H13L19.5 19.5L26 13Z" fill="#A094FC" />
+        <path d="M26 26V13L19.5 19.5L26 26Z" fill="#685AC0" />
+        <path d="M13 26H26L19.5 19.5L13 26Z" fill="#20024E" />
+        <path d="M0 13V26L6.5 19.5L0 13Z" fill="#685AC0" />
+        <path d="M13 13H0L6.5 19.5L13 13Z" fill="#C2BFEB" />
+        <path d="M13 26V13L6.5 19.5L13 26Z" fill="#20024E" />
+        <path d="M0 26H13L6.5 19.5L0 26Z" fill="#A094FC" />
+        <path d="M13 26V39L19.5 32.5L13 26Z" fill="#C2BFEB" />
+        <path d="M26 26H13L19.5 32.5L26 26Z" fill="#685AC0" />
+        <path d="M13 26H0L6.5 32.5L13 26Z" fill="#C2BFEB" />
+        <path d="M13 39V26L6.5 32.5L13 39Z" fill="#20024E" />
+        <path
+          d="M33 15.5H34C34.4 15.5 34.7 15.1 34.7 14.7V2.49995C34.7 2.09995 34.3 1.69995 34 1.69995H33V0.199951H39.7C43.5 0.199951 45.8 1.39995 45.8 4.49995C45.8 6.69995 44.5 7.69995 42.4 8.19995V8.29995C44.9 8.59995 46.5 9.89995 46.5 12.4C46.5 15.7 43.9 17.2 40 17.2H33V15.5V15.5ZM39.6 7.39995C41.8 7.39995 43 6.59995 43 4.59995C43 2.59995 41.9 1.89995 39.7 1.89995H37.6V7.39995H39.6ZM39.9 15.4C42.5 15.4 43.6 14.3 43.6 12.2C43.6 10.1 42.6 9.09995 39.8 9.09995H37.5V15.4H39.9V15.4Z"
+          className="fill-[#20024E]"
+        />
+        <path
+          d="M47.6001 13.5C47.6001 10.9 49.7001 9.70005 52.6001 9.70005C53.7001 9.70005 54.6001 9.80005 55.5001 10V8.30005C55.5001 6.70005 54.6001 6.10005 52.9001 6.10005C51.2001 6.10005 50.3001 6.70005 49.6001 7.30005H48.4001V5.30005C49.5001 4.80005 51.0001 4.30005 53.3001 4.30005C56.3001 4.30005 58.0001 5.20005 58.0001 8.00005V14.7C58.0001 15.2 58.3001 15.5 58.8001 15.5H59.5001V16.8C59.2001 17 58.6001 17.2 57.8001 17.2C56.4001 17.2 55.7001 16.6 55.5001 15.5C54.6001 16.7 53.3001 17.2 51.6001 17.2C49.3001 17.2 47.6001 16 47.6001 13.5ZM55.5001 14.2V11.5C54.8001 11.4 54.0001 11.3 53.1001 11.3C51.3001 11.3 50.2001 12 50.2001 13.5C50.2001 15 51.1001 15.7 52.5001 15.7C53.9001 15.5 54.7001 15 55.5001 14.2Z"
+          className="fill-[#20024E]"
+        />
+        <path
+          d="M60.3998 15.5H61.2998C61.5998 15.5 61.9998 15.2 61.9998 14.8V6.69995C61.9998 6.39995 61.6998 5.99995 61.2998 5.99995H60.2998V4.39995H63.9998C64.3998 4.39995 64.5998 4.69995 64.5998 5.89995V6.19995C65.8998 4.99995 67.5998 4.19995 69.5998 4.19995C71.3998 4.19995 72.8998 4.89995 72.8998 7.29995V14.7C72.8998 15 73.1998 15.4 73.4998 15.4H74.2998V16.9H68.4998V15.4H70.1998V8.29995C70.1998 6.69995 69.4998 6.29995 68.1998 6.29995C66.8998 6.29995 65.5998 6.89995 64.4998 7.49995V15.5H66.2998V17H60.2998V15.5H60.3998Z"
+          className="fill-[#20024E]"
+        />
+        <path
+          d="M75.1 15.5H76C76.3 15.5 76.7 15.2 76.7 14.8V2.49995C76.7 2.19995 76.4 1.79995 76 1.79995H75V0.199951H78.8C79.1 0.199951 79.3 0.399951 79.3 0.899951V11L83.3 6.89995C83.7 6.49995 83.5 5.99995 83.1 5.99995H82.5V4.39995H87.7V5.99995H87.1C86.8 5.99995 86.3 6.19995 86 6.49995L82.9 9.59995L86.4 14.7C86.7 15.2 87.1 15.4 87.5 15.4H87.9V16.9H85L81.2 11.3L79.4 13.1V15.4H81V16.9H75.2V15.5H75.1Z"
+          className="fill-[#20024E]"
+        />
+        <path
+          d="M93.2002 10.8C93.2002 6.80005 96.0002 4.30005 99.6002 4.30005C103.2 4.30005 106 6.80005 106 10.8C106 14.8 103.2 17.2 99.6002 17.2C96.0002 17.2 93.2002 14.8 93.2002 10.8ZM103.3 10.8C103.3 7.70005 101.8 6.00005 99.6002 6.00005C97.4002 6.00005 95.9002 7.60005 95.9002 10.8C95.9002 13.9 97.4002 15.5 99.6002 15.5C101.8 15.5 103.3 13.9 103.3 10.8Z"
+          className="fill-[#20024E]"
+        />
+        <path
+          d="M106.6 15.5H107.5C107.8 15.5 108.2 15.2 108.2 14.8V6.1H106.5V4.4H108.2V3.4C108.2 1 109.6 0 111.9 0C112.9 0 113.5 0.1 113.9 0.3V1.8H112.7C111.6 1.8 110.8 2 110.8 3.4V4.4H113.5V6H110.8V14.8C110.8 15.1 111.1 15.5 111.5 15.5H112.7V17H106.6V15.5V15.5Z"
+          className="fill-[#20024E]"
+        />
+        <path
+          d="M33 36.3H34C34.4 36.3 34.7 35.9 34.7 35.5V23.3C34.7 22.9 34.3 22.5 34 22.5H33V20.9H39.1L43.1 33.5H43.2L47.2 20.9H53.3V22.5H52.3C51.9 22.5 51.6 22.9 51.6 23.3V35.5C51.6 35.8 52 36.3 52.3 36.3H53.3V37.8H46.9V36.3H48.8V22.8H48.6L43.8 37.8H41.8L37 22.8H36.9V36.3H38.8V37.8H33V36.3Z"
+          className="fill-[#20024E]"
+        />
+        <path
+          d="M53.3999 31.5C53.3999 27.5 55.8999 25 59.4999 25C62.9999 25 65.0999 26.9 65.0999 31.1C65.0999 31.5 65.0999 31.8 65.0999 31.9H56.0999C56.1999 34.8 57.4999 36.3 59.9999 36.3C61.7999 36.3 62.5999 35.7 63.2999 34.9H64.7999V36.7C63.7999 37.4 62.3999 38 59.8999 38C55.5999 38 53.3999 35.5 53.3999 31.5ZM62.5999 30.3C62.4999 27.6 61.4999 26.6 59.5999 26.6C57.6999 26.6 56.4999 27.8 56.1999 30.3H62.5999Z"
+          className="fill-[#20024E]"
+        />
+        <path
+          d="M65.8998 36.3H66.7998C67.0998 36.3 67.4998 36 67.4998 35.6V23.2C67.4998 22.9 67.1998 22.5 66.7998 22.5H65.7998V20.9H69.5998C69.8998 20.9 70.0998 21.1 70.0998 21.6V35.6C70.0998 35.9 70.3998 36.3 70.7998 36.3H71.6998V37.8H65.8998V36.3V36.3Z"
+          className="fill-[#20024E]"
+        />
+        <path
+          d="M75.3998 36.5C75.1998 37.3 74.6998 37.8 74.3998 37.8H72.9998V23.2C72.9998 22.9 72.6998 22.5 72.2998 22.5H71.2998V20.9H75.0998C75.3998 20.9 75.5998 21.1 75.5998 21.6V27.1C76.5998 26 77.8998 25.1 79.9998 25.1C82.3998 25.1 84.7998 26.6 84.7998 31.4C84.7998 36.3 81.9998 38 79.2998 38C77.2998 38 76.1998 37.4 75.3998 36.5ZM82.1998 31.5C82.1998 27.8 80.5998 26.9 78.8998 26.9C77.6998 26.9 76.4998 27.6 75.6998 28.3V35.2C76.3998 35.9 77.2998 36.4 78.6998 36.4C80.2998 36.4 82.1998 35.5 82.1998 31.5Z"
+          className="fill-[#20024E]"
+        />
+        <path
+          d="M86 31.5C86 27.5 88.8 25 92.4 25C96 25 98.8 27.5 98.8 31.5C98.8 35.5 96 37.9 92.4 37.9C88.8 38 86 35.6 86 31.5ZM96.2 31.6C96.2 28.5 94.7 26.8 92.5 26.8C90.3 26.8 88.8 28.4 88.8 31.6C88.8 34.7 90.3 36.3 92.5 36.3C94.7 36.3 96.2 34.7 96.2 31.6Z"
+          className="fill-[#20024E]"
+        />
+        <path
+          d="M100.8 34.9V27.5C100.8 27.2 100.5 26.8 100.1 26.8H99.2002V25.2H103.4V34C103.4 35.6 104.2 36 105.4 36C106.7 36 108 35.4 109 34.7V26.7H107.2V25.1H111.6V35.5C111.6 35.8 111.9 36.2 112.3 36.2H113.3V37.7H109.7C109.4 37.7 109.1 37.4 109.1 36.2V36C107.8 37.2 106.3 38 104.2 38C102.4 38 100.8 37.3 100.8 34.9Z"
+          className="fill-[#20024E]"
+        />
+        <path
+          d="M114.1 36.3H115C115.3 36.3 115.7 36 115.7 35.6V27.5C115.7 27.2 115.4 26.8 115 26.8H114V25.2H117.7C118.1 25.2 118.3 25.5 118.3 26.9V27.3C119.2 26.2 120.3 25.1 122.1 25.1C122.4 25.1 122.6 25.1 122.8 25.2V27.3H122.3C120.4 27.3 119.3 27.8 118.3 28.6V36.3H120.3V37.8H114.1V36.3Z"
+          className="fill-[#20024E]"
+        />
+        <path
+          d="M123.7 36.3H124.6C124.9 36.3 125.3 36 125.3 35.6V27.5C125.3 27.2 125 26.8 124.6 26.8H123.6V25.2H127.3C127.7 25.2 127.9 25.5 127.9 26.7V27C129.2 25.8 130.9 25 132.9 25C134.7 25 136.2 25.7 136.2 28.1V35.5C136.2 35.8 136.5 36.2 136.8 36.2H137.6V37.7H131.8V36.2H133.5V29C133.5 27.4 132.8 27 131.5 27C130.1 27 128.9 27.6 127.8 28.2V36.2H129.6V37.7H123.6V36.3H123.7Z"
+          className="fill-[#20024E]"
+        />
+        <path
+          d="M137.6 31.5C137.6 27.5 140.1 25 143.7 25C147.2 25 149.3 26.9 149.3 31.1C149.3 31.5 149.3 31.8 149.3 31.9H140.3C140.4 34.8 141.7 36.3 144.2 36.3C146 36.3 146.8 35.7 147.5 34.9H149V36.7C148 37.4 146.6 38 144.1 38C139.8 38 137.6 35.5 137.6 31.5ZM146.8 30.3C146.7 27.6 145.7 26.6 143.8 26.6C141.9 26.6 140.7 27.8 140.4 30.3H146.8Z"
+          className="fill-[#20024E]"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_139_1246">
+          <rect width="150" height="39" fill="white" />
+        </clipPath>
+      </defs>
     </Symbol>
   );
 }