@westpac/ui 0.43.0 → 0.46.0

package/src/components/pagination/components/pagination-total-pages/pagination-total-pages.component.tsx

@@ -0,0 +1,234 @@
+/* eslint-disable sonarjs/cognitive-complexity */
+'use client';
+
+import React, { useCallback, useMemo } from 'react';
+
+import { useBreakpoint } from '../../../../hook/breakpoints.hook.js';
+import { getSiblingOrBoundaryCount } from '../../pagination.utils.js';
+import { PaginationPresentational } from '../pagination-presentational/pagination-presentational.component.js';
+
+import { type PaginationTotalPagesProps } from './pagination-total-pages.types.js';
+
+function generateArray(from: number, to: number) {
+  return Array.from({ length: to - from + 1 }, (_, i) => i + from);
+}
+
+export function PaginationTotalPages({
+  className,
+  totalPages,
+  tag = 'nav',
+  role = 'navigation',
+  current = 1,
+  linkComponent,
+  infinite = false,
+  onChange,
+  backLabel = 'Back',
+  backAriaLabel = 'Back',
+  nextLabel = 'Next',
+  nextAriaLabel = 'Next',
+  siblingCount = 2,
+  boundaryCount = 1,
+  onPageItemProps,
+  ...props
+}: PaginationTotalPagesProps) {
+  const breakpoint = useBreakpoint();
+
+  // catering for responsive usage of siblingCount.
+  const finalSiblingCount = useMemo(() => {
+    if (typeof siblingCount === 'number') {
+      return siblingCount;
+    }
+    return getSiblingOrBoundaryCount(siblingCount, breakpoint);
+  }, [breakpoint, siblingCount]);
+
+  // catering for responsive usage of BoundaryCount
+  const finalBoundaryCount = useMemo(() => {
+    if (typeof boundaryCount === 'number') {
+      return boundaryCount;
+    }
+    return getSiblingOrBoundaryCount(boundaryCount, breakpoint);
+  }, [boundaryCount, breakpoint]);
+
+  const generateHandleOnClickBackwards = useCallback(
+    (
+      current: number,
+      infinite: boolean,
+      forwardOnly: boolean,
+      onChange: (page: number) => unknown,
+      totalPages: number,
+    ) =>
+      () => {
+        if (infinite && forwardOnly) {
+          return onChange(totalPages);
+        }
+        if (!forwardOnly) {
+          return onChange(current - 1);
+        }
+      },
+    [],
+  );
+
+  const paginationBackProps = useMemo(() => {
+    const fowardOnly = (current || 1) <= 1;
+    const defaultBackProps = {
+      disabled: !infinite && fowardOnly,
+      firstItem: true,
+      'aria-label': backAriaLabel,
+    };
+    if (defaultBackProps.disabled) {
+      return {
+        ...defaultBackProps,
+        tag: 'button',
+      } as const;
+    }
+
+    if (onChange) {
+      return {
+        ...defaultBackProps,
+        tag: linkComponent || 'button',
+        ...(current && {
+          onClick: generateHandleOnClickBackwards(current, infinite, fowardOnly, onChange, totalPages),
+        }),
+      };
+    }
+    return {
+      ...defaultBackProps,
+      tag: linkComponent || 'a',
+      href: fowardOnly ? onPageItemProps(totalPages).href : onPageItemProps(current - 1)?.href,
+    };
+  }, [
+    current,
+    infinite,
+    backAriaLabel,
+    onChange,
+    linkComponent,
+    onPageItemProps,
+    totalPages,
+    generateHandleOnClickBackwards,
+  ]);
+
+  const generateHandleOnClickForward = useCallback(
+    (current: number, infinite: boolean, backwardsOnly: boolean, onChange: (page: number) => unknown) => () => {
+      if (infinite && backwardsOnly) {
+        return onChange(1);
+      }
+      if (backwardsOnly) {
+        return;
+      }
+      return onChange(current + 1);
+    },
+    [],
+  );
+
+  const paginationNextProps = useMemo(() => {
+    const backwardsOnly = (current || 1) >= totalPages;
+    const defaultNextProps = {
+      disabled: !infinite && backwardsOnly,
+      tag: linkComponent,
+      lastItem: true,
+      'aria-label': nextAriaLabel,
+    };
+    if (defaultNextProps.disabled) {
+      return {
+        ...defaultNextProps,
+        tag: 'button',
+      } as const;
+    }
+    if (onChange) {
+      return {
+        ...defaultNextProps,
+        tag: linkComponent || 'button',
+        ...(current && {
+          onClick: generateHandleOnClickForward(current, infinite, backwardsOnly, onChange),
+        }),
+      };
+    }
+    return {
+      ...defaultNextProps,
+      tag: linkComponent || 'a',
+      href: backwardsOnly ? onPageItemProps(1)?.href : onPageItemProps(current || 0)?.href,
+    };
+  }, [
+    current,
+    totalPages,
+    infinite,
+    linkComponent,
+    nextAriaLabel,
+    onChange,
+    onPageItemProps,
+    generateHandleOnClickForward,
+  ]);
+
+  /** Compute which pages and ellipses to show */
+  const pagesToRender = useMemo(() => {
+    const minEdgePagesVisible = Math.min(finalSiblingCount * 2 + finalBoundaryCount + 2, totalPages);
+
+    // Always show these boundaries
+    let leftCorner = generateArray(1, Math.min(finalBoundaryCount, totalPages));
+    let rightCorner =
+      finalBoundaryCount > 0
+        ? generateArray(totalPages + 1 - finalBoundaryCount, totalPages).filter(
+            page => !leftCorner.some(leftItem => leftItem === page),
+          )
+        : [];
+    let middle: (number | null)[] = [];
+
+    if (current) {
+      // Expand corners when near start or end
+      const nearStart = current < minEdgePagesVisible - finalSiblingCount;
+      const nearEnd = current > totalPages - minEdgePagesVisible + finalSiblingCount;
+
+      if (nearStart) {
+        leftCorner = generateArray(1, minEdgePagesVisible);
+      }
+      if (nearEnd) {
+        rightCorner = generateArray(totalPages - minEdgePagesVisible + 1, totalPages);
+      }
+      rightCorner = rightCorner.filter(page => !leftCorner.some(leftItem => leftItem === page));
+
+      // Compute middle pages
+      const leftEdge = current - finalSiblingCount;
+      middle = generateArray(Math.max(1, leftEdge), Math.min(leftEdge + finalSiblingCount * 2, totalPages)).filter(
+        middleItem => {
+          return !(leftCorner.some(left => left === middleItem) || rightCorner.some(right => right === middleItem));
+        },
+      );
+
+      // Decide where to show ellipses
+      const lastItemMiddle = middle.at(-1);
+      const hasLeftDots = middle[0] && middle[0] - 1 !== leftCorner.at(-1);
+      const hasRightDots = lastItemMiddle && lastItemMiddle + 1 !== rightCorner[0];
+
+      if (middle.length === 0 && leftCorner.length + rightCorner.length !== totalPages) {
+        middle = [null]; // full middle ellipsis
+      } else {
+        if (hasLeftDots) middle.unshift(null);
+        if (hasRightDots) middle.push(null);
+      }
+    }
+
+    return [...leftCorner, ...middle, ...rightCorner].map(page =>
+      page ? { page, text: page, ...onPageItemProps?.(page) } : null,
+    );
+  }, [finalBoundaryCount, current, onPageItemProps, finalSiblingCount, totalPages]);
+
+  if (totalPages <= 0) {
+    return <></>;
+  }
+
+  return (
+    <PaginationPresentational
+      className={className}
+      current={current}
+      paginationBackProps={paginationBackProps}
+      paginationNextProps={paginationNextProps}
+      pagesToRender={pagesToRender}
+      tag={tag}
+      role={role}
+      backLabel={backLabel}
+      nextLabel={nextLabel}
+      onChange={onChange}
+      {...props}
+    />
+  );
+}

package/src/components/pagination/components/pagination-total-pages/pagination-total-pages.types.ts

@@ -0,0 +1,48 @@
+import { HTMLAttributes, ReactNode } from 'react';
+
+import { PaginationBase } from '../../pagination.types.js';
+
+export type PageProps = {
+  href: string;
+  text: ReactNode;
+};
+
+export type PaginationAsLinkProps = {
+  /**
+   * on page change
+   */
+  onChange?: never;
+  /**
+   * Pages items
+   */
+  onPageItemProps: (page: number) => Omit<PageToRenderHref, 'page'>;
+};
+
+export type PaginationAsButtonProps = {
+  /**
+   * on page change
+   */
+  onChange: (page: number) => unknown;
+  /**
+   * Pages items
+   */
+  onPageItemProps?: (page: number) => Omit<PageToRenderBase, 'page'>;
+};
+
+export type PaginationTotalPagesProps = {
+  /**
+   * total of pages
+   */
+  totalPages: number;
+} & PaginationBase &
+  (PaginationAsLinkProps | PaginationAsButtonProps) &
+  Omit<HTMLAttributes<Element>, 'onChange'>;
+
+export type PageToRenderBase = {
+  'aria-label'?: string;
+  page: number;
+  text: React.ReactNode;
+};
+export type PageToRenderHref = PageToRenderBase & {
+  href: string;
+};

package/src/components/pagination/pagination.component.tsx

@@ -1,158 +1,49 @@
 'use client';
 
-import React, { useCallback, useMemo } from 'react';
+import React from 'react';
 
-import { PaginationItem } from './components/index.js';
-import { styles as paginationStyles } from './pagination.styles.js';
+import { PaginationPage } from './components/pagination-pages/pagination-pages.component.js';
+import { PaginationTotalPages } from './components/pagination-total-pages/pagination-total-pages.component.js';
 import { type PaginationProps } from './pagination.types.js';
 
 export function Pagination({
-  className,
-  pages,
-  tag: Tag = 'nav',
+  tag = 'nav',
   role = 'navigation',
-  current,
-  linkComponent,
+  current = 1,
   infinite = false,
-  onChange,
   backLabel = 'Back',
   nextLabel = 'Next',
+  siblingCount = 2,
+  boundaryCount = 1,
   ...props
 }: PaginationProps) {
-  const styles = paginationStyles({});
-
-  const generateHandleOnClickBackwards = useCallback(
-    (
-      current: number,
-      infinite: boolean,
-      forwardOnly: boolean,
-      onChange: (page: number) => unknown,
-      pages: PaginationProps['pages'],
-    ) =>
-      () => {
-        if (infinite && forwardOnly) {
-          return onChange(pages.length);
-        }
-        if (!forwardOnly) {
-          return onChange(current - 1);
-        }
-      },
-    [],
-  );
-
-  const paginationBackProps = useMemo(() => {
-    const fowardOnly = (current || 1) <= 1;
-    const defaultBackProps = {
-      disabled: !infinite && fowardOnly,
-      firstItem: true,
-    };
-    if (defaultBackProps.disabled) {
-      return {
-        ...defaultBackProps,
-        tag: 'button',
-      } as const;
-    }
-    if (onChange) {
-      return {
-        ...defaultBackProps,
-        tag: linkComponent || 'button',
-        ...(current && {
-          onClick: generateHandleOnClickBackwards(current, infinite, fowardOnly, onChange, pages),
-        }),
-      };
-    }
-    return {
-      ...defaultBackProps,
-      tag: linkComponent || 'a',
-      href: fowardOnly ? pages[pages.length - 1].href : pages[(current || 0) - 2]?.href,
-    };
-  }, [current, infinite, onChange, linkComponent, pages, generateHandleOnClickBackwards]);
-
-  const generateHandleOnClickForward = useCallback(
-    (current: number, infinite: boolean, backwardsOnly: boolean, onChange: (page: number) => unknown) => () => {
-      if (infinite && backwardsOnly) {
-        return onChange(1);
-      }
-      if (backwardsOnly) {
-        return;
-      }
-      return onChange(current + 1);
-    },
-    [],
-  );
-
-  const paginationNextProps = useMemo(() => {
-    const backwardsOnly = (current || 1) >= pages.length;
-    const defaultNextProps = {
-      disabled: !infinite && backwardsOnly,
-      tag: linkComponent,
-      lastItem: true,
-    };
-    if (defaultNextProps.disabled) {
-      return {
-        ...defaultNextProps,
-        tag: 'button',
-      } as const;
-    }
-    if (onChange) {
-      return {
-        ...defaultNextProps,
-        tag: linkComponent || 'button',
-        ...(current && {
-          onClick: generateHandleOnClickForward(current, infinite, backwardsOnly, onChange),
-        }),
-      };
-    }
-    return {
-      ...defaultNextProps,
-      tag: linkComponent || 'a',
-      href: backwardsOnly ? pages[0].href : pages[current || 0]?.href,
-    };
-  }, [current, pages, infinite, linkComponent, onChange, generateHandleOnClickForward]);
+  if ('totalPages' in props) {
+    return (
+      <PaginationTotalPages
+        tag={tag}
+        role={role}
+        current={current}
+        infinite={infinite}
+        backLabel={backLabel}
+        nextLabel={nextLabel}
+        siblingCount={siblingCount}
+        boundaryCount={boundaryCount}
+        {...props}
+      />
+    );
+  }
 
   return (
-    <Tag className={styles.base({ className })} role={role} aria-label="Page number" {...props}>
-      <ul className={styles.ul({})}>
-        <li>
-          <PaginationItem {...paginationBackProps}>{backLabel}</PaginationItem>
-        </li>
-        {pages.map((page, index) => {
-          const commonProps = {
-            active: (current || 0) === index + 1,
-          };
-
-          return (
-            <li key={index}>
-              {'href' in page ? (
-                <PaginationItem {...commonProps} tag={linkComponent || 'a'} href={page.href}>
-                  {page.text}
-                </PaginationItem>
-              ) : (
-                <PaginationItem
-                  {...commonProps}
-                  tag={linkComponent || 'button'}
-                  onClick={
-                    onChange &&
-                    (() => {
-                      onChange(index + 1);
-                    })
-                  }
-                >
-                  {page.text}
-                </PaginationItem>
-              )}
-            </li>
-          );
-        })}
-        <li>
-          <PaginationItem {...paginationNextProps}>{nextLabel}</PaginationItem>
-        </li>
-      </ul>
-      {current && (
-        <span className="sr-only" role="status">
-          Page {current}
-        </span>
-      )}
-    </Tag>
+    <PaginationPage
+      tag={tag}
+      role={role}
+      current={current}
+      infinite={infinite}
+      backLabel={backLabel}
+      nextLabel={nextLabel}
+      siblingCount={siblingCount}
+      boundaryCount={boundaryCount}
+      {...props}
+    />
   );
 }

package/src/components/pagination/pagination.types.ts

@@ -1,46 +1,32 @@
-import { HTMLAttributes, ReactNode } from 'react';
+import { ReactNode } from 'react';
 
-import { type PaginationItemProps } from './components/index.js';
+import { Breakpoint } from '../../tailwind/constants/breakpoints.js';
+
+import { PaginationItemProps } from './components/index.js';
+import { PaginationPageProps } from './components/pagination-pages/pagination-pages.types.js';
+import { PaginationTotalPagesProps } from './components/pagination-total-pages/pagination-total-pages.types.js';
 
 export type PageProps = {
   href: string;
   text: ReactNode;
 };
 
-export type PaginationAsLinkProps = {
-  /**
-   * on page change
-   */
-  onChange?: never;
+export type PaginationBase = {
   /**
-   * Pages items
-   */
-  pages: PageProps[];
-};
-
-export type PaginationAsButtonProps = {
-  /**
-   * on page change
+   * Back aria label
+   * @default Back
    */
-  onChange: (page: number) => unknown;
-  /**
-   * Pages items
-   */
-  pages: Omit<PageProps, 'href'>[];
-};
-
-export type PaginationHookProps = {
-  defaultCurrent?: number;
-  infinite?: boolean;
-  pages: (Omit<PageProps, 'href'> & { href?: string })[];
-};
-
-export type PaginationProps = {
+  backAriaLabel?: string;
   /**
    * Back label
    * @default Back
    */
   backLabel?: ReactNode;
+  /**
+   * boundaryCount
+   * @default 1
+   */
+  boundaryCount?: number | Partial<Record<Breakpoint | 'initial', number>>;
   /**
    * Current page
    */
@@ -54,15 +40,32 @@ export type PaginationProps = {
    * Link component to render
    */
   linkComponent?: PaginationItemProps['tag'];
+  /**
+   * Next aria label
+   * @default Next
+   */
+  nextAriaLabel?: string;
   /**
    * Next label
    * @default Next
    */
   nextLabel?: ReactNode;
+  /**
+   * siblingCount
+   * @default 1
+   */
+  siblingCount?: number | Partial<Record<Breakpoint | 'initial', number>>;
   /**
    * Tag to render
    * @default nav
    */
   tag?: keyof JSX.IntrinsicElements;
-} & (PaginationAsLinkProps | PaginationAsButtonProps) &
-  Omit<HTMLAttributes<Element>, 'onChange'>;
+};
+
+export type PaginationHookProps = {
+  defaultCurrent?: number;
+  infinite?: boolean;
+  pages: (Omit<PageProps, 'href'> & { href?: string })[];
+};
+
+export type PaginationProps = PaginationPageProps | PaginationTotalPagesProps;

package/src/components/pagination/pagination.utils.ts

@@ -0,0 +1,15 @@
+import { BREAKPOINTS, Breakpoint } from '../../tailwind/constants/index.js';
+
+const BREAKPOINTS_DECRESCENT = Object.keys(BREAKPOINTS).reverse();
+export function getSiblingOrBoundaryCount(
+  count: Partial<Record<Breakpoint | 'initial', number>>,
+  breakpoint: Breakpoint | 'initial',
+) {
+  const currentBreakpointIndex = Object.keys(BREAKPOINTS)
+    .reverse()
+    .findIndex(bp => bp === breakpoint);
+  const finalBreakPoint = [breakpoint, ...BREAKPOINTS_DECRESCENT.slice(currentBreakpointIndex)].find(
+    currentBreakpoint => count[currentBreakpoint as Breakpoint | 'initial'] !== undefined,
+  ) as Breakpoint | 'initial';
+  return count[finalBreakPoint] || 0;
+}

package/src/components/pass-code/pass-code.component.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable sonarjs/cognitive-complexity */
 'use client';
 
 import React, {
@@ -22,7 +21,7 @@ export const PassCode = forwardRef<PassCodeRef, PassCodeProps>(
   ({ length, value, onChange, onComplete, className, type = 'alphanumeric', onBlur, ...props }, ref) => {
     const [internalPasscode, setInternalPasscode] = useState<string[]>(Array.from({ length }).map(() => ''));
     const passcode = value ? value : internalPasscode;
-    const inputRefs = useRef<Array<HTMLInputElement | null>>([]);
+    const inputRefs = useRef<(HTMLInputElement | null)[]>([]);
 
     const styles = passCodeStyles({});
 

package/src/components/pictogram/components/accessibility-pictogram.tsx

@@ -0,0 +1,40 @@
+'use client';
+
+import { clsx } from 'clsx';
+import React from 'react';
+
+import { Pictogram } from '../pictogram.component.js';
+import { fill } from '../pictogram.styles.js';
+import { type PictogramProps } from '../pictogram.types.js';
+
+export function AccessibilityPictogram({
+  mode = 'duo',
+  viewBoxWidth = 78,
+  viewBoxHeight = 78,
+  'aria-label': ariaLabel = 'Accessibility',
+  copyrightYear = '2025',
+  className,
+  ...props
+}: PictogramProps) {
+  return (
+    <Pictogram
+      className={clsx('size-13', className)}
+      viewBoxWidth={viewBoxWidth}
+      viewBoxHeight={viewBoxHeight}
+      aria-label={ariaLabel}
+      copyrightYear={copyrightYear}
+      {...props}
+    >
+      <g fill="none" fillRule="evenodd">
+        <path
+          className={fill({ mode, highlight: true })}
+          d="M51.9648 29.7974L25.0348 29.7974C23.9298 29.7974 23.0348 30.6934 23.0348 31.7974 23.0348 32.9014 23.9298 33.7974 25.0348 33.7974L31.3668 33.7974C33.4118 33.9344 34.4198 35.6614 34.4198 37.7944L31.4038 54.2864C31.2068 55.3734 31.9258 56.4154 33.0138 56.6134 33.1348 56.6364 33.2558 56.6474 33.3748 56.6474 34.3218 56.6474 35.1638 55.9714 35.3398 55.0064L37.5658 42.8324 37.5658 42.8344C37.5658 42.3494 37.9588 41.9574 38.4428 41.9574 38.8648 41.9574 39.2008 42.2614 39.2838 42.6594L41.5408 55.0064C41.7188 55.9714 42.5608 56.6474 43.5078 56.6474 43.6268 56.6474 43.7478 56.6364 43.8688 56.6134 44.9548 56.4154 45.6758 55.3734 45.4768 54.2864L42.4548 37.7554C42.4668 35.6414 43.4728 33.9334 45.5048 33.7974L51.9648 33.7974C53.0698 33.7974 53.9648 32.9014 53.9648 31.7974 53.9648 30.6934 53.0698 29.7974 51.9648 29.7974M38.5 28.6543C40.582 28.6543 42.27 26.9663 42.27 24.8843 42.27 22.8023 40.582 21.1143 38.5 21.1143 36.418 21.1143 34.73 22.8023 34.73 24.8843 34.73 26.9663 36.418 28.6543 38.5 28.6543"
+        />
+        <path
+          className={fill({ mode, outline: true })}
+          d="M38.7109,67.9121 C22.2969,67.9121 8.9419,54.5581 8.9419,38.1441 C8.9419,21.7301 22.2969,8.3771 38.7109,8.3771 C55.1239,8.3771 68.4779,21.7301 68.4779,38.1441 C68.4779,54.5581 55.1239,67.9121 38.7109,67.9121 M65.8799,20.7701 C60.1389,11.8221 50.1079,5.8751 38.7109,5.8751 C20.9189,5.8751 6.4419,20.3501 6.4419,38.1431 C6.4419,45.2761 8.7739,51.8731 12.7089,57.2211 C18.4489,66.1751 28.4819,72.1251 39.8849,72.1251 C57.6769,72.1251 72.1509,57.6501 72.1509,39.8581 C72.1509,32.7201 69.8169,26.1201 65.8799,20.7701"
+        />
+      </g>
+    </Pictogram>
+  );
+}

package/src/components/pictogram/components/accounts-pictogram.tsx

@@ -0,0 +1,52 @@
+'use client';
+
+import { clsx } from 'clsx';
+import React from 'react';
+
+import { Pictogram } from '../pictogram.component.js';
+import { fill } from '../pictogram.styles.js';
+import { type PictogramProps } from '../pictogram.types.js';
+
+export function AccountsPictogram({
+  mode = 'duo',
+  viewBoxWidth = 78,
+  viewBoxHeight = 78,
+  'aria-label': ariaLabel = 'Accounts',
+  copyrightYear = '2025',
+  className,
+  ...props
+}: PictogramProps) {
+  return (
+    <Pictogram
+      className={clsx('size-13', className)}
+      viewBoxWidth={viewBoxWidth}
+      viewBoxHeight={viewBoxHeight}
+      aria-label={ariaLabel}
+      copyrightYear={copyrightYear}
+      {...props}
+    >
+      <g fill="none" fillRule="evenodd">
+        <path
+          className={fill({ mode, highlight: true })}
+          d="M24.482 43.035c-.39.46-.876.777-1.452.964v-5.816c.699.258 1.229.59 1.569 1.008.412.505.617 1.107.617 1.804 0 .782-.245 1.46-.734 2.04m-5.688-11.283a2.627 2.627 0 0 1-.5-1.54c0-.604.182-1.156.546-1.656a2.906 2.906 0 0 1 1.279-.983v5.234c-.578-.28-1.025-.628-1.325-1.055m8.892 4.533c-.85-1.011-2.407-1.842-4.656-2.501v-5.976c.737.475 1.22 1.208 1.42 2.233l3.954-.516c-.271-1.562-.895-2.81-1.875-3.742-.885-.843-2.061-1.37-3.5-1.612V22.54h-2.91v1.58c-1.7.207-3.077.857-4.115 1.976-1.08 1.16-1.617 2.596-1.617 4.304 0 1.688.476 3.124 1.429 4.305.923 1.146 2.36 2.006 4.303 2.589v6.5c-.487-.274-.935-.67-1.341-1.204-.458-.605-.771-1.324-.938-2.157l-4.08.437c.314 2.053 1.033 3.643 2.158 4.768 1.084 1.083 2.489 1.735 4.2 1.978v2.88h2.912v-3.003c1.813-.34 3.25-1.101 4.304-2.293 1.14-1.293 1.71-2.881 1.71-4.767 0-1.688-.453-3.071-1.358-4.148"
+        />
+        <polygon
+          className={fill({ mode, outline: true })}
+          points="36.545 29.543 62.498 29.543 62.498 26.543 36.545 26.543"
+        />
+        <polygon
+          className={fill({ mode, outline: true })}
+          points="36.545 38.61 62.498 38.61 62.498 35.61 36.545 35.61"
+        />
+        <polygon
+          className={fill({ mode, outline: true })}
+          points="36.545 47.678 62.498 47.678 62.498 44.678 36.545 44.678"
+        />
+        <path
+          className={fill({ mode, outline: true })}
+          d="M68.93 55.333a2.338 2.338 0 0 1-2.335 2.335H8.835A2.338 2.338 0 0 1 6.5 55.333V18.782a2.338 2.338 0 0 1 2.335-2.335h57.76a2.338 2.338 0 0 1 2.335 2.335v36.551zm4.365-36.738c-.77-.984-3.865-3.718-4.522-4.053A4.776 4.776 0 0 0 66.595 14H8.835A4.84 4.84 0 0 0 4 18.835v36.551c0 .743.139 1.311.388 1.893 1.172 2.649 4.39 4.642 5.078 5.02.69.38 1.318.503 2.159.503h57.76a4.84 4.84 0 0 0 4.836-4.835V21.416c0-1.055-.157-1.837-.926-2.821z"
+        />
+      </g>
+    </Pictogram>
+  );
+}