@westpac/ui 0.2.1 → 0.4.0

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

@@ -0,0 +1,9 @@
+import { tv } from 'tailwind-variants';
+
+export const styles = tv(
+  {
+    slots: { base: 'typography-body-10 p-4 max-xsl:px-2' },
+    variants: {},
+  },
+  { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },
+);

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

@@ -0,0 +1,3 @@
+import { HTMLAttributes } from 'react';
+
+export type BodyProps = HTMLAttributes<Element>;

package/src/components/panel/components/body/index.ts

@@ -0,0 +1,2 @@
+export { Body } from './body.component.js';
+export { type BodyProps } from './body.types.js';

package/src/components/panel/components/footer/footer.component.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+
+import { styles as footerStyles } from './footer.styles.js';
+import { type FooterProps } from './footer.types.js';
+
+export function Footer({ className, children, ...props }: FooterProps) {
+  const styles = footerStyles();
+  return (
+    <div className={styles.base({ className })} {...props}>
+      {children}
+    </div>
+  );
+}

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

@@ -0,0 +1,11 @@
+import { tv } from 'tailwind-variants';
+
+export const styles = tv(
+  {
+    slots: {
+      base: 'border-t-1 border-0 border-t border-border bg-light px-4 py-[0.625rem] max-xsl:px-2',
+    },
+    variants: {},
+  },
+  { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },
+);

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

@@ -0,0 +1,3 @@
+import { HTMLAttributes } from 'react';
+
+export type FooterProps = HTMLAttributes<Element>;

package/src/components/panel/components/footer/index.ts

@@ -0,0 +1,2 @@
+export { Footer } from './footer.component.js';
+export { type FooterProps } from './footer.types.js';

package/src/components/panel/components/index.ts

@@ -0,0 +1,2 @@
+export * from './body/index.js';
+export * from './footer/index.js';

package/src/components/panel/index.ts

@@ -0,0 +1,2 @@
+export { Panel } from './panel.component.js';
+export { type PanelProps } from './panel.types.js';

package/src/components/panel/panel.component.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import { Body, Footer } from './components/index.js';
+import { styles as panelStyles } from './panel.styles.js';
+import { type PanelProps } from './panel.types.js';
+
+export function Panel({ className, children, heading, headingTag: Tag = 'h1', look = 'hero', ...props }: PanelProps) {
+  const styles = panelStyles({ look });
+  return (
+    <div className={styles.base({ className })} {...props}>
+      <Tag className={styles.header()}>{heading}</Tag>
+      {children}
+    </div>
+  );
+}
+Panel.Body = Body;
+Panel.Footer = Footer;

package/src/components/panel/panel.stories.tsx

@@ -0,0 +1,156 @@
+import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
+
+import { Table } from '../table/index.js';
+
+import { Panel } from './panel.component.js';
+
+const meta: Meta<typeof Panel> = {
+  title: 'Example/Panel',
+  component: Panel,
+  tags: ['autodocs'],
+  decorators: [
+    (Story: StoryFn) => (
+      <div className="p-3">
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    layout: 'fullscreen',
+  },
+  args: {
+    heading: 'Panel title',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * > Default usage example
+ */
+export const DefaultStory: Story = {
+  args: {
+    children: [
+      <Panel.Body>
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora officiis officia omnis aperiam voluptate
+        suscipit, laudantium praesentium quas consequatur placeat, perferendis eligendi saepe in unde sequi dolores
+        excepturi doloremque autem! Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+      </Panel.Body>,
+      <Panel.Footer>Panel footer</Panel.Footer>,
+    ],
+  },
+};
+
+/**
+ * > Faint look example
+ */
+export const FaintLookPanel: Story = {
+  args: {
+    look: 'faint',
+    children: [
+      <Panel.Body>
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora officiis officia omnis aperiam voluptate
+        suscipit, laudantium praesentium quas consequatur placeat, perferendis eligendi saepe in unde sequi dolores
+        excepturi doloremque autem! Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+      </Panel.Body>,
+      <Panel.Footer>Panel footer</Panel.Footer>,
+    ],
+  },
+};
+
+/**
+ * > Example using a table
+ */
+export const PanelWithTable: Story = {
+  args: {
+    children: [
+      <Table>
+        <Table.Caption>
+          Caption this table width is: <em>(100%)</em>
+        </Table.Caption>
+        <Table.Header>
+          <Table.HeaderRow>
+            <Table.HeaderCell>Name</Table.HeaderCell>
+            <Table.HeaderCell>Type</Table.HeaderCell>
+            <Table.HeaderCell>Date Modified</Table.HeaderCell>
+          </Table.HeaderRow>
+        </Table.Header>
+        <Table.Body>
+          <Table.Row>
+            <Table.Cell>Games</Table.Cell>
+            <Table.Cell>File folder</Table.Cell>
+            <Table.Cell>6/7/2020</Table.Cell>
+          </Table.Row>
+          <Table.Row>
+            <Table.Cell>Program Files</Table.Cell>
+            <Table.Cell>File folder</Table.Cell>
+            <Table.Cell>4/7/2021</Table.Cell>
+          </Table.Row>
+          <Table.Row>
+            <Table.Cell>bootmgr</Table.Cell>
+            <Table.Cell>System file</Table.Cell>
+            <Table.Cell>11/20/2010</Table.Cell>
+          </Table.Row>
+          <Table.Row>
+            <Table.Cell>log.txt</Table.Cell>
+            <Table.Cell>Text Document</Table.Cell>
+            <Table.Cell>1/18/2016</Table.Cell>
+          </Table.Row>
+        </Table.Body>
+        <Table.Footer colspan={3}>Footer goes here and should colSpan all columns</Table.Footer>
+      </Table>,
+    ],
+  },
+};
+
+/**
+ * > Example using a table with a body and a panel footer
+ */
+export const PanelWithTableAndBody: Story = {
+  args: {
+    children: [
+      <Panel.Body>
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora officiis officia omnis aperiam voluptate
+        suscipit, laudantium praesentium quas consequatur placeat, perferendis eligendi saepe in unde sequi dolores
+        excepturi doloremque autem! Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+      </Panel.Body>,
+      <Table>
+        <Table.Caption>
+          Caption this table width is: <em>(100%)</em>
+        </Table.Caption>
+        <Table.Header>
+          <Table.HeaderRow>
+            <Table.HeaderCell>Name</Table.HeaderCell>
+            <Table.HeaderCell>Type</Table.HeaderCell>
+            <Table.HeaderCell>Date Modified</Table.HeaderCell>
+          </Table.HeaderRow>
+        </Table.Header>
+        <Table.Body>
+          <Table.Row>
+            <Table.Cell>Games</Table.Cell>
+            <Table.Cell>File folder</Table.Cell>
+            <Table.Cell>6/7/2020</Table.Cell>
+          </Table.Row>
+          <Table.Row>
+            <Table.Cell>Program Files</Table.Cell>
+            <Table.Cell>File folder</Table.Cell>
+            <Table.Cell>4/7/2021</Table.Cell>
+          </Table.Row>
+          <Table.Row>
+            <Table.Cell>bootmgr</Table.Cell>
+            <Table.Cell>System file</Table.Cell>
+            <Table.Cell>11/20/2010</Table.Cell>
+          </Table.Row>
+          <Table.Row>
+            <Table.Cell>log.txt</Table.Cell>
+            <Table.Cell>Text Document</Table.Cell>
+            <Table.Cell>1/18/2016</Table.Cell>
+          </Table.Row>
+        </Table.Body>
+        <Table.Footer colspan={3}>Footer goes here and should colSpan all columns</Table.Footer>
+      </Table>,
+      <Panel.Footer>Panel footer</Panel.Footer>,
+    ],
+  },
+};

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

@@ -0,0 +1,22 @@
+import { tv } from 'tailwind-variants';
+
+export const styles = tv(
+  {
+    slots: {
+      base: 'group/panel mb-4 overflow-hidden rounded-[0.1875rem] border border-hero',
+      header: 'px-4 py-[0.625rem] max-xsl:px-2',
+    },
+    variants: {
+      look: {
+        hero: {
+          header: 'bg-hero text-white',
+        },
+        faint: {
+          base: 'border-border',
+          header: 'border-0 border-b border-b-border bg-background text-text',
+        },
+      },
+    },
+  },
+  { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },
+);

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

@@ -0,0 +1,16 @@
+import { HTMLAttributes } from 'react';
+
+export type PanelProps = {
+  /**
+   * The heading of the panel
+   */
+  heading: string;
+  /**
+   * Tag for heading defaults to h1
+   */
+  headingTag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+  /**
+   * The styling of the panel
+   */
+  look?: 'faint' | 'hero';
+} & HTMLAttributes<Element>;

package/src/components/pictogram/components/decorative/wbc-bank-card-pictogram.tsx

@@ -0,0 +1,60 @@
+import { clsx } from 'clsx';
+import React from 'react';
+
+import { Pictogram } from '../../pictogram.component.js';
+import { type PictogramProps } from '../../pictogram.types.js';
+
+export function WBCBankCardPictogram({
+  'aria-label': ariaLabel = 'Bank card',
+  copyrightYear = '2023',
+  viewBoxHeight = 200,
+  viewBoxWidth = 200,
+  className,
+  ...props
+}: PictogramProps) {
+  return (
+    <Pictogram
+      className={clsx('h-[200px] w-[200px]', className)}
+      aria-label={ariaLabel}
+      copyrightYear={copyrightYear}
+      viewBoxHeight={viewBoxHeight}
+      viewBoxWidth={viewBoxWidth}
+      {...props}
+    >
+      <path fill="#ffd8f7" d="M31.98 48h16.01v8H31.98z" />
+      <circle cx="160" cy="176" r="8" fill="#ffd8f7" />
+      <path
+        fill="#1f1c4f"
+        d="M159.113 49.297l7.314-7.152 2.447 2.502-7.314 7.153zM146.033 40.447l4.43-9.221 3.155 1.516-4.43 9.22zM168.402 62.112l9.32-4.218 1.444 3.188-9.32 4.218zM32.04 134.25h-6.3v-6.3h-3.5v6.3h-6.3v3.5h6.3v6.3h3.5v-6.3h6.3v-3.5z"
+      />
+      <circle cx="19.97" cy="180" r="4" fill="#1f1c4f" />
+      <path
+        d="M57.7 144.41l81.18-23.81c4.48-1.32 7.23-5.38 6.15-9.08l-15.72-53.6c-1.09-3.7-5.6-5.64-10.09-4.32L38.05 77.41c-4.48 1.31-7.24 5.38-6.15 9.08l15.72 53.6c1.08 3.7 5.6 5.63 10.08 4.32z"
+        fill="#da1710"
+        fillRule="evenodd"
+      />
+      <path fill="#da1710" d="M63.99 23.71h24v8h-24z" />
+      <path
+        d="M162.77 84l-8.25-1.35-78-12.94a10.8 10.8 0 00-1.69-.14c-3.69 0-7 2-8.1 5v.09c0 .17-.11.34-.15.52l-.44 1.77-13.7 55.37c-.95 3.82 2.09 7.55 6.77 8.33L144 154.71c.3 0 .59.08.88.11h1.94l.52-.06.3-.06.48-.1.3-.07.45-.13.3-.1.44-.17.26-.11.46-.23.21-.1c.22-.12.43-.25.64-.38a6 6 0 00.57-.42l.18-.15.36-.32.19-.19c.1-.1.2-.21.29-.32a1.68 1.68 0 00.18-.21l.26-.34.15-.23c.08-.12.15-.24.22-.37l.13-.23c.07-.14.13-.28.19-.43l.09-.2a5.53 5.53 0 00.2-.66l12.9-52.12 1.26-4.12a7 7 0 00-5.58-9z"
+        fill="#1f1b4f"
+        fillRule="evenodd"
+      />
+      <path
+        d="M56.84 132.19a5.08 5.08 0 003.42 2l82.91 13.74a6 6 0 001.12.1c2.37 0 4.47-1.25 4.88-2.9l13.43-54.31a2.32 2.32 0 00-.36-1.89 5.11 5.11 0 00-3.42-2L75.9 73.21a6.84 6.84 0 00-1.11-.1c-2.38 0-4.48 1.25-4.89 2.9L56.47 130.3a2.29 2.29 0 00.37 1.89z"
+        fill="#fff"
+        fillRule="evenodd"
+      />
+      <path
+        d="M158.82 87l-12.73-2.11-18 29.45c-4.69 8.11-13.64 11.2-22.7 9.67l-45.48-7.67-3.47 14a2.33 2.33 0 000 .91 9.79 9.79 0 003.29 2.85l.53.11 82.91 13.74a6 6 0 001.12.1c2.37 0 4.47-1.25 4.88-2.9l13.43-54.33a2.32 2.32 0 00-.36-1.89 5.11 5.11 0 00-3.42-1.93z"
+        fill="#e8e8ed"
+        fillRule="evenodd"
+      />
+      <path
+        d="M101.28 87.61L73.7 83.32a.69.69 0 01-.55-.89l1.39-5.88a.86.86 0 01.93-.67L103 80.17a.72.72 0 01.56.9L102.2 87a.84.84 0 01-.92.61z"
+        fill="#ff3ddb"
+        fillRule="evenodd"
+      />
+      <circle cx="135.78" cy="133.93" r="7.94" fill="#da1710" />
+    </Pictogram>
+  );
+}

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

@@ -0,0 +1,38 @@
+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 = '2023',
+  className,
+  ...props
+}: PictogramProps) {
+  return (
+    <Pictogram
+      className={clsx('h-13 w-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/informative/accounts-pictogram.tsx

@@ -0,0 +1,50 @@
+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 = '2023',
+  className,
+  ...props
+}: PictogramProps) {
+  return (
+    <Pictogram
+      className={clsx('h-13 w-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/informative/aeroplane-pictogram.tsx

@@ -0,0 +1,50 @@
+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 = '2023',
+  className,
+  ...props
+}: PictogramProps) {
+  return (
+    <Pictogram
+      className={clsx('h-13 w-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/informative/arrow-down-pictogram.tsx

@@ -0,0 +1,38 @@
+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('h-13 w-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/informative/arrow-left-pictogram.tsx

@@ -0,0 +1,38 @@
+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('h-13 w-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/informative/arrow-right-pictogram.tsx

@@ -0,0 +1,38 @@
+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('h-13 w-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/informative/arrow-up-pictogram.tsx

@@ -0,0 +1,38 @@
+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('h-13 w-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>
+  );
+}