@westpac/ui 0.44.0 → 0.47.0

package/src/components/header/header.component.tsx

@@ -56,6 +56,7 @@ export function Header({
   className,
   children,
   fixed = false,
+  isScrolled,
   leftIcon,
   leftOnClick,
   leftAssistiveText,
@@ -92,7 +93,7 @@ export function Header({
 
   const ButtonIcon = leftIcon === 'arrow' ? ArrowLeftIcon : HamburgerMenuIcon;
 
-  const styles = headerStyles({ logoCenter, fixed, leftIcon, scrolled });
+  const styles = headerStyles({ logoCenter, fixed, leftIcon, scrolled: isScrolled || scrolled });
 
   return (
     <header className={styles.base({ className })} {...props}>

package/src/components/header/header.styles.ts

@@ -49,7 +49,7 @@ export const styles = tv(
       {
         fixed: true,
         scrolled: true,
-        className: { inner: 'border-b-0 after:opacity-100' },
+        className: { inner: 'border-b-[transparent] after:opacity-100' },
       },
     ],
   },

package/src/components/header/header.types.ts

@@ -11,6 +11,10 @@ export type HeaderProps = {
    * Enable fixed header
    */
   fixed?: boolean;
+  /**
+   * Used with fixed to show drop shadow when something on screen is scrolled that should trigger drop shadow but doesn't
+   */
+  isScrolled?: boolean;
   /**
    * Visually hidden text for left button
    */

package/src/components/heading/heading.component.tsx

@@ -16,7 +16,7 @@ export function Heading({ className, tag, brandHeading, size, children, uppercas
     9: 'h6',
     10: 'h6',
   };
-  const Tag = typeof size === 'number' && !tag ? (sizeToTag[size] as keyof HeadingProps['tag']) : tag ? tag : 'h6';
+  const Tag = typeof size === 'number' && !tag ? (sizeToTag[size] as keyof HeadingProps['tag']) : tag || 'h6';
 
   return (
     <Tag className={styles({ className, brandHeading, size, uppercase })} {...props}>

package/src/components/input-group/input-group.styles.ts

@@ -27,7 +27,7 @@ export const styles = tv(
       width: {
         full: '',
         // Below ignored because tailwind was showing a transform error when using a const
-        // eslint-disable-next-line sonarjs/no-duplicate-string
+
         1: { input: 'inline-flex' },
         2: { input: 'inline-flex' },
         3: { input: 'inline-flex' },

package/src/components/list/list.component.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React, { Children, ReactElement, cloneElement, createContext, useContext } from 'react';
+import React, { Children, ReactElement, cloneElement, createContext, useContext, useMemo } from 'react';
 
 import { styles as listStyles } from './list.styles.js';
 import { ListContextState, type ListProps } from './list.types.js';
@@ -17,10 +17,12 @@ export function List({ assistiveText, className, children, look, nested, icon, t
     nested = (typeof state.nested === 'number' && state.nested + 1) || 0;
   }
 
+  const defaultAssistiveText = useMemo(() => {
+    return `The following items are ${type === 'tick' ? 'ticked' : 'crossed'}`;
+  }, [type]);
+
   assistiveText =
-    (type === 'tick' || type === 'cross') && nested === 0
-      ? assistiveText || `The following items are ${type === 'tick' ? 'ticked' : 'crossed'}`
-      : undefined;
+    (type === 'tick' || type === 'cross') && nested === 0 ? assistiveText || defaultAssistiveText : undefined;
 
   const styles = listStyles({ type: stateValues.type, nested: typeof state.nested === 'number' });
 

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

@@ -10,7 +10,7 @@ export function Modal({ children, title, role, body, size, className, fullscreen
     <ModalBackdrop size={size} {...props}>
       <ModalDialog
         fullscreen={fullscreen}
-        onClose={props.isDismissable ? props.state.close : undefined}
+        onClose={props.isDismissable ? () => props.state.close() : undefined}
         title={title}
         role={role}
         body={body}

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

@@ -1,3 +1,9 @@
 import { type ModalBackdropProps, ModalDialogProps } from './components/index.js';
 
-export type ModalProps = ModalBackdropProps & ModalDialogProps & { fullscreen?: boolean };
+export type ModalProps = {
+  /**
+   * Whether the modal is fullscreen
+   */
+  fullscreen?: boolean;
+} & ModalBackdropProps &
+  Omit<ModalDialogProps, 'onClose'>;

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

@@ -1,4 +1,3 @@
-/* eslint-disable sonarjs/cognitive-complexity */
 'use client';
 
 import React from 'react';

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

@@ -1,4 +1,3 @@
-/* eslint-disable sonarjs/cognitive-complexity */
 'use client';
 
 import React from 'react';

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

@@ -1,10 +1,14 @@
-import { Breakpoint } from '../../tailwind/index.js';
+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 finalBreakPoint = [breakpoint, 'initial', 'xsl', 'sm', 'md', 'lg', 'xl'].find(
+  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>
+  );
+}

package/src/components/pictogram/components/aeroplane-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 AeroplanePictogram({
+  mode = 'duo',
+  viewBoxWidth = 78,
+  viewBoxHeight = 78,
+  'aria-label': ariaLabel = 'Aeroplane',
+  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">
+        <polygon
+          className={fill({ mode, highlight: true })}
+          points="2 25.025 4.02 27.243 14.694 17.524 12.674 15.306"
+        />
+        <polygon
+          className={fill({ mode, highlight: true })}
+          points="12.173 26.43 14.196 28.645 21.129 22.315 19.106 20.1"
+        />
+        <polygon
+          className={fill({ mode, highlight: true })}
+          points="42.819 71.941 44.846 74.153 55.492 64.403 53.465 62.191"
+        />
+        <polygon
+          className={fill({ mode, highlight: true })}
+          points="44.288 63.905 51.22 57.576 49.197 55.36 42.265 61.689"
+        />
+        <path
+          className={fill({ mode, outline: true })}
+          d="M67.6466,13.1538 L56.2406,23.1728 C55.9346,23.4418 55.7786,23.8418 55.8226,24.2478 L59.0926,54.2408 L57.0426,56.0428 L46.7976,33.6118 C46.6326,33.2528 46.3086,32.9918 45.9216,32.9088 C45.8346,32.8898 45.7476,32.8818 45.6606,32.8818 C45.3596,32.8818 45.0656,32.9898 44.8346,33.1918 L33.4296,43.2118 C33.1516,43.4568 32.9956,43.8108 33.0046,44.1808 L33.2316,53.4568 L32.0836,54.4668 L27.3106,44.0148 C27.2086,43.7928 27.0426,43.6038 26.8346,43.4738 L17.0866,37.3938 L18.2356,36.3838 L27.4046,37.8048 C27.7716,37.8608 28.1426,37.7528 28.4206,37.5088 L39.8266,27.4908 C40.1236,27.2298 40.2796,26.8428 40.2476,26.4498 C40.2156,26.0548 39.9986,25.6998 39.6636,25.4908 L18.7406,12.4398 L20.7906,10.6388 L50.1126,17.7468 C50.5086,17.8408 50.9256,17.7388 51.2316,17.4708 L62.6376,7.4528 C63.4026,6.7798 64.3726,6.4338 65.3966,6.5088 C66.4096,6.5728 67.3356,7.0268 68.0046,7.7888 C68.6726,8.5498 69.0036,9.5258 68.9376,10.5388 C68.8696,11.5528 68.4116,12.4818 67.6466,13.1538 M73.2536,8.8188 C73.2456,8.8068 73.2476,8.8018 73.2386,8.7898 C70.9326,5.7488 67.4566,4.4328 67.4566,4.4328 L67.4566,4.4358 C66.8556,4.2018 66.2166,4.0558 65.5546,4.0138 C63.8786,3.9018 62.2526,4.4628 60.9876,5.5738 L50.0696,15.1638 L20.7486,8.0558 C20.3506,7.9618 19.9346,8.0628 19.6286,8.3318 L15.8266,11.6718 C15.5296,11.9328 15.3746,12.3188 15.4066,12.7128 C15.4386,13.1068 15.6546,13.4628 15.9906,13.6718 L34.7746,25.3878 L36.8146,26.8088 L27.2096,35.2458 L18.0416,33.8248 C17.6716,33.7668 17.3026,33.8768 17.0246,34.1208 L14.1736,36.6258 C13.8756,36.8868 13.7206,37.2728 13.7516,37.6668 C13.7846,38.0608 14.0006,38.4168 14.3366,38.6258 L25.1926,45.3958 L30.5076,57.0348 C30.5386,57.1018 30.5806,57.1628 30.6226,57.2228 L30.6206,57.2228 C30.6206,57.2228 30.6276,57.2328 30.6316,57.2378 C30.6506,57.2648 30.6696,57.2918 30.6916,57.3168 C31.0546,57.7888 32.8426,60.0008 34.4436,60.0238 C34.8286,60.1068 35.2326,60.0018 35.5296,59.7408 L38.3806,57.2358 C38.6586,56.9908 38.8146,56.6358 38.8056,56.2658 L38.5786,46.9908 L46.8426,39.7298 L55.4666,58.6108 C55.4926,58.6658 55.5276,58.7138 55.5596,58.7638 L55.5566,58.7648 L55.6046,58.8388 C55.6116,58.8458 55.6166,58.8558 55.6236,58.8648 C55.9316,59.3128 57.3146,61.1628 59.4016,61.5998 C59.4886,61.6188 59.5766,61.6278 59.6636,61.6278 C59.9646,61.6278 60.2586,61.5188 60.4886,61.3168 L64.2906,57.9768 C64.5966,57.7078 64.7516,57.3068 64.7086,56.9018 L61.4386,26.9098 L72.3556,17.3188 C74.8416,15.1338 75.1966,11.4208 73.2536,8.8188"
+        />
+      </g>
+    </Pictogram>
+  );
+}

package/src/components/pictogram/components/arrow-down-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 ArrowDownPictogram({
+  mode = 'duo',
+  viewBoxWidth = 78,
+  viewBoxHeight = 78,
+  'aria-label': ariaLabel = 'Arrow down',
+  copyrightYear = '2021',
+  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, outline: true })}
+          d="M38.268 68.037C21.854 68.037 8.5 54.683 8.5 38.27S21.854 8.502 38.268 8.502c16.413 0 29.767 13.353 29.767 29.767S54.681 68.037 38.268 68.037m27.168-47.142C59.696 11.947 49.666 6 38.268 6 20.476 6 6 20.475 6 38.268c0 7.133 2.331 13.73 6.266 19.078C18.006 66.3 28.039 72.25 39.442 72.25c17.792 0 32.267-14.475 32.267-32.267a32.09 32.09 0 0 0-6.273-19.088"
+        />
+        <path
+          className={fill({ mode, highlight: true })}
+          d="M49.264 38.438l-9.243 9.241V21.07h-3.5v26.612l-9.243-9.243-2.358 2.356L36.407 52.28a2.637 2.637 0 0 0 3.728 0l11.487-11.486-2.358-2.356z"
+        />
+      </g>
+    </Pictogram>
+  );
+}

package/src/components/pictogram/components/arrow-left-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 ArrowLeftPictogram({
+  mode = 'duo',
+  viewBoxWidth = 78,
+  viewBoxHeight = 78,
+  'aria-label': ariaLabel = 'Arrow left',
+  copyrightYear = '2021',
+  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="M37.086 27.045l-9.402 9.08 26.606.465-.06 3.5-26.608-.465 9.08 9.403-2.397 2.316-11.283-11.686a2.637 2.637 0 0 1 .065-3.727l11.684-11.285 2.315 2.399z"
+        />
+        <path
+          className={fill({ mode, outline: true })}
+          d="M38.268 68.037C21.854 68.037 8.5 54.683 8.5 38.27S21.854 8.502 38.268 8.502c16.413 0 29.767 13.353 29.767 29.767S54.681 68.037 38.268 68.037m27.168-47.142C59.696 11.947 49.666 6 38.268 6 20.476 6 6 20.475 6 38.268c0 7.133 2.331 13.73 6.266 19.078C18.006 66.3 28.039 72.25 39.442 72.25c17.792 0 32.267-14.475 32.267-32.267a32.09 32.09 0 0 0-6.273-19.088"
+        />
+      </g>
+    </Pictogram>
+  );
+}

package/src/components/pictogram/components/arrow-right-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 ArrowRightPictogram({
+  mode = 'duo',
+  viewBoxWidth = 78,
+  viewBoxHeight = 78,
+  'aria-label': ariaLabel = 'Arrow right',
+  copyrightYear = '2021',
+  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="M39.457 27.045l9.401 9.08-26.606.465.062 3.5 26.606-.465-9.08 9.403 2.398 2.316 11.283-11.686a2.637 2.637 0 0 0-.065-3.727L41.772 24.646l-2.315 2.399z"
+        />
+        <path
+          className={fill({ mode, outline: true })}
+          d="M38.268 68.037C21.854 68.037 8.5 54.683 8.5 38.27S21.854 8.502 38.268 8.502c16.413 0 29.767 13.353 29.767 29.767S54.681 68.037 38.268 68.037m27.168-47.142C59.696 11.947 49.666 6 38.268 6 20.476 6 6 20.475 6 38.268c0 7.133 2.331 13.73 6.266 19.078C18.006 66.3 28.039 72.25 39.442 72.25c17.792 0 32.267-14.475 32.267-32.267a32.09 32.09 0 0 0-6.273-19.088"
+        />
+      </g>
+    </Pictogram>
+  );
+}

package/src/components/pictogram/components/arrow-up-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 ArrowUpPictogram({
+  mode = 'duo',
+  viewBoxWidth = 78,
+  viewBoxHeight = 78,
+  'aria-label': ariaLabel = 'Arrow up',
+  copyrightYear = '2021',
+  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="M49.264 36.683l-9.243-9.242v26.61h-3.5v-26.61l-9.243 9.242-2.358-2.357 11.487-11.485a2.637 2.637 0 0 1 3.728 0l11.487 11.485-2.358 2.357z"
+        />
+        <path
+          className={fill({ mode, outline: true })}
+          d="M38.268 68.037C21.854 68.037 8.5 54.683 8.5 38.27S21.854 8.502 38.268 8.502c16.413 0 29.767 13.353 29.767 29.767S54.681 68.037 38.268 68.037m27.168-47.142C59.696 11.947 49.666 6 38.268 6 20.476 6 6 20.475 6 38.268c0 7.133 2.331 13.73 6.266 19.078C18.006 66.3 28.039 72.25 39.442 72.25c17.792 0 32.267-14.475 32.267-32.267a32.09 32.09 0 0 0-6.273-19.088"
+        />
+      </g>
+    </Pictogram>
+  );
+}

package/src/components/pictogram/components/arrows-passing-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 ArrowsPassingPictogram({
+  mode = 'duo',
+  viewBoxWidth = 78,
+  viewBoxHeight = 78,
+  'aria-label': ariaLabel = 'Arrows pointing left and right',
+  copyrightYear = '2021',
+  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, outline: true })}
+          d="M38.268 68.037C21.854 68.037 8.5 54.683 8.5 38.27S21.854 8.502 38.268 8.502c16.413 0 29.768 13.353 29.768 29.767S54.68 68.037 38.268 68.037m27.169-47.142C59.697 11.947 49.666 6 38.267 6 20.477 6 6 20.475 6 38.268a32.08 32.08 0 0 0 6.266 19.078C18.006 66.3 28.039 72.25 39.443 72.25c17.792 0 32.266-14.475 32.266-32.267a32.095 32.095 0 0 0-6.272-19.088"
+        />
+        <path
+          className={fill({ mode, highlight: true })}
+          d="M56.102 29.595L48.507 22l-2.12 2.121 5.084 5.086H21.365v3h30.107l-5.086 5.085 2.121 2.121 7.594-7.593c.614-.615.614-1.61.001-2.224m.095 16.599H26.091l5.085-5.085-2.122-2.121-7.593 7.595a1.57 1.57 0 0 0 0 2.223l7.593 7.594 2.122-2.121-5.085-5.085h30.106v-3z"
+        />
+      </g>
+    </Pictogram>
+  );
+}

package/src/components/pictogram/components/atm-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 ATMPictogram({
+  mode = 'duo',
+  viewBoxWidth = 78,
+  viewBoxHeight = 78,
+  'aria-label': ariaLabel = 'ATM',
+  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="M40.6362,46.5039 C40.2872,46.9159 39.8512,47.1999 39.3372,47.3669 L39.3372,42.1589 C39.9622,42.3899 40.4362,42.6889 40.7412,43.0619 C41.1092,43.5149 41.2942,44.0529 41.2942,44.6779 C41.2942,45.3769 41.0742,45.9849 40.6362,46.5039 M35.5422,36.3999 C35.2442,35.9769 35.0942,35.5169 35.0942,35.0219 C35.0942,34.4809 35.2582,33.9859 35.5842,33.5379 C35.8752,33.1399 36.2612,32.8499 36.7292,32.6579 L36.7292,37.3449 C36.2112,37.0949 35.8112,36.7819 35.5422,36.3999 M43.5052,40.4589 C42.7442,39.5539 41.3492,38.8099 39.3372,38.2199 L39.3372,32.8679 C39.9962,33.2929 40.4292,33.9499 40.6082,34.8679 L44.1492,34.4059 C43.9062,33.0069 43.3462,31.8899 42.4692,31.0549 C41.6772,30.3009 40.6242,29.8289 39.3372,29.6109 L39.3372,28.1509 L38.9292,28.1509 L36.9002,28.1509 L36.7292,28.1509 L36.7292,29.5669 C35.2072,29.7509 33.9742,30.3329 33.0442,31.3349 C32.0782,32.3749 31.5962,33.6599 31.5962,35.1899 C31.5962,36.7009 32.0232,37.9859 32.8762,39.0449 C33.7022,40.0699 34.9902,40.8409 36.7292,41.3629 L36.7292,47.1839 C36.2932,46.9389 35.8912,46.5839 35.5292,46.1059 C35.1182,45.5639 34.8382,44.9199 34.6892,44.1739 L31.0362,44.5659 C31.3162,46.4029 31.9602,47.8259 32.9682,48.8339 C33.9382,49.8049 35.1972,50.3889 36.7292,50.6069 L36.7292,53.1859 L36.9002,53.1859 L38.9292,53.1859 L39.3372,53.1859 L39.3372,50.4959 C40.9592,50.1919 42.2462,49.5099 43.1902,48.4419 C44.2112,47.2849 44.7222,45.8619 44.7222,44.1739 C44.7222,42.6619 44.3172,41.4239 43.5052,40.4589"
+        />
+        <path
+          className={fill({ mode, outline: true })}
+          d="M67.2153,27.8174 C67.2153,28.3754 66.7623,28.8284 66.2053,28.8284 L59.3163,28.8284 L58.7013,24.7324 L62.0753,24.7324 C62.7653,24.7324 63.3253,24.1724 63.3253,23.4824 L63.3253,15.5034 C63.3253,14.8124 62.7653,14.2534 62.0753,14.2534 L14.4613,14.2534 C13.7713,14.2534 13.2113,14.8124 13.2113,15.5034 L13.2113,23.4824 C13.2113,24.1724 13.7713,24.7324 14.4613,24.7324 L17.0573,24.7324 L16.4433,28.8284 L10.5103,28.8284 C9.9533,28.8284 9.5003,28.3754 9.5003,27.8174 L9.5003,11.5094 C9.5003,10.9534 9.9533,10.5004 10.5103,10.5004 L66.2053,10.5004 C66.7623,10.5004 67.2153,10.9534 67.2153,11.5094 L67.2153,27.8174 Z M61.5103,60.2694 L14.2493,60.2694 L20.5613,18.2374 L55.1973,18.2374 L61.5103,60.2694 Z M16.1323,66.3384 L16.6683,62.7694 L59.0903,62.7694 L59.6263,66.3384 L16.1323,66.3384 Z M66.4733,8.0004 L66.4883,8.0284 C66.3933,8.0204 66.3023,8.0004 66.2053,8.0004 L10.5103,8.0004 C8.5743,8.0004 7.0003,9.5744 7.0003,11.5094 L7.0003,27.8174 C7.0003,27.8194 7.0163,33.8944 11.5473,33.9204 C11.7153,33.9214 11.8633,33.9154 12.0013,33.9054 C12.0503,33.9074 12.0963,33.9204 12.1463,33.9204 L15.6783,33.9204 L11.5613,61.3344 C11.5073,61.6934 11.6123,62.0594 11.8503,62.3354 C12.0873,62.6114 12.4333,62.7694 12.7973,62.7694 L14.1403,62.7694 L13.4443,67.4024 C13.3903,67.7614 13.4963,68.1284 13.7333,68.4034 C13.9703,68.6794 14.3173,68.8384 14.6803,68.8384 L61.0783,68.8384 C61.4423,68.8384 61.7883,68.6794 62.0253,68.4034 C62.2623,68.1284 62.3683,67.7614 62.3143,67.4024 L61.6193,62.7694 L62.9623,62.7694 C63.3253,62.7694 63.6723,62.6114 63.9093,62.3354 C64.1463,62.0594 64.2523,61.6934 64.1983,61.3344 L60.0813,33.9204 L67.8413,33.9204 C69.7773,33.9204 71.3513,32.3454 71.3513,30.4104 L71.3513,14.1024 C71.3513,8.0004 66.4733,8.0004 66.4733,8.0004 L66.4733,8.0004 Z"
+        />
+      </g>
+    </Pictogram>
+  );
+}

package/src/components/pictogram/components/australia-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 AustraliaPictogram({
+  mode = 'duo',
+  viewBoxWidth = 78,
+  viewBoxHeight = 78,
+  'aria-label': ariaLabel = 'Australia',
+  copyrightYear = '2021',
+  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, outline: true })}
+          d="M8.5 38.269c0-16.414 13.354-29.767 29.768-29.767 16.413 0 29.767 13.353 29.767 29.767S54.68 68.037 38.268 68.037C21.854 68.037 8.5 54.683 8.5 38.269zm29.768-32.27C20.476 6 6 20.476 6 38.269a32.08 32.08 0 0 0 6.266 19.078C18.006 66.3 28.039 72.25 39.442 72.25c17.792 0 32.267-14.475 32.267-32.267a32.095 32.095 0 0 0-6.272-19.088C59.696 11.947 49.666 6 38.267 6z"
+        />
+        <path
+          className={fill({ mode, highlight: true })}
+          d="M54.931 38.297l.069 2.08-1.497 3.825-.814.47-1.768 3.96-2.925 1.208-.748-.873-1.427.47-2.79-1.878-.474-1.476-1.634-.338.817-2.077-1.428 1.876-.75-.468-.68-1.876-2.379-.874-4.147.874-1.36.803-.476.871-2.925.335-1.293 1.208-2.448-.47.274-2.279-.953-2.149-1.903-2.751.134-.737-.337-1.006L21 35.279l.406-.805 2.654-1.41 4.08-2.884.61-1.677 1.09-.135 1.428-2.415.883-.201 1.292 1.073 1.224.066-.273-.601 2.177-2.953 4.014.804.678-.2.342.4-1.496 2.35 4.825 2.55.818-2.147.135-2.417L46.907 23l.682 1.276.337 2.348 1.361.604.545 3.758 2.177 1.81.406 1.678.884.068 1.632 3.755zm-7.615 15.637l-.477-1.478-.27-1.341 1.222.535 1.36-.268v1.61l-.34.805-.409-.269-.406.472-.68-.066z"
+        />
+      </g>
+    </Pictogram>
+  );
+}