@westpac/ui 0.2.1 → 0.4.0

package/dist/components/pagination/pagination.styles.js

@@ -0,0 +1,16 @@
+import { tv } from 'tailwind-variants';
+export const styles = tv({
+    slots: {
+        base: 'overflow-hidden rounded border border-border',
+        ul: 'flex'
+    },
+    variants: {}
+}, {
+    responsiveVariants: [
+        'xsl',
+        'sm',
+        'md',
+        'lg',
+        'xl'
+    ]
+});

package/dist/components/pagination/pagination.types.d.ts

@@ -0,0 +1,61 @@
+import { HTMLAttributes, ReactNode } from 'react';
+import { type VariantProps } from 'tailwind-variants';
+import { type PaginationItemProps } from './components/index.js';
+import { styles } from './pagination.styles.js';
+export type PageProps = {
+    href: string;
+    text: ReactNode;
+};
+export type PaginationAsLinkProps = {
+    /**
+     * on page change
+     */
+    onChange?: never;
+    /**
+     * Pages items
+     */
+    pages: PageProps[];
+};
+export type PaginationAsButtonProps = {
+    /**
+     * on page change
+     */
+    onChange: (page: number) => any;
+    /**
+     * Pages items
+     */
+    pages: Omit<PageProps, 'href'>[];
+};
+export type PaginationHookProps = {
+    defaultCurrent?: number;
+    infinite?: boolean;
+    pages: (Omit<PageProps, 'href'> & {
+        href?: string;
+    })[];
+};
+export type PaginationProps = {
+    /**
+     * Back label
+     */
+    backLabel?: ReactNode;
+    /**
+     * Current page
+     */
+    current?: number;
+    /**
+     * Carousel feature
+     */
+    infinite?: boolean;
+    /**
+     * Link component to render
+     */
+    linkComponent?: PaginationItemProps['tag'];
+    /**
+     * Next label
+     */
+    nextLabel?: ReactNode;
+    /**
+     * Tag to render
+     */
+    tag?: keyof JSX.IntrinsicElements;
+} & (PaginationAsLinkProps | PaginationAsButtonProps) & VariantProps<typeof styles> & Omit<HTMLAttributes<Element>, 'onChange'>;

package/dist/components/pagination/pagination.types.js

@@ -0,0 +1 @@
+export { };

package/dist/components/panel/components/body/body.component.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" resolution-mode="require"/>
+import { type BodyProps } from './body.types.js';
+export declare function Body({ className, children, ...props }: BodyProps): JSX.Element;

package/dist/components/panel/components/body/body.component.js

@@ -0,0 +1,24 @@
+function _extends() {
+    _extends = Object.assign || function(target) {
+        for(var i = 1; i < arguments.length; i++){
+            var source = arguments[i];
+            for(var key in source){
+                if (Object.prototype.hasOwnProperty.call(source, key)) {
+                    target[key] = source[key];
+                }
+            }
+        }
+        return target;
+    };
+    return _extends.apply(this, arguments);
+}
+import React from 'react';
+import { styles as bodyStyles } from './body.styles.js';
+export function Body({ className , children , ...props }) {
+    const styles = bodyStyles({});
+    return React.createElement("div", _extends({
+        className: styles.base({
+            className
+        })
+    }, props), children);
+}

package/dist/components/panel/components/body/body.styles.d.ts

@@ -0,0 +1,7 @@
+export declare const styles: import("tailwind-variants").TVReturnType<{}, {
+    base: string;
+}, undefined, {
+    responsiveVariants: string[];
+}, {}, {
+    base: string;
+}>;

package/dist/components/panel/components/body/body.styles.js

@@ -0,0 +1,15 @@
+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/dist/components/panel/components/body/body.types.d.ts

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

package/dist/components/panel/components/body/body.types.js

@@ -0,0 +1 @@
+export { };

package/dist/components/panel/components/body/index.d.ts

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

package/dist/components/panel/components/body/index.js

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

package/dist/components/panel/components/footer/footer.component.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" resolution-mode="require"/>
+import { type FooterProps } from './footer.types.js';
+export declare function Footer({ className, children, ...props }: FooterProps): JSX.Element;

package/dist/components/panel/components/footer/footer.component.js

@@ -0,0 +1,24 @@
+function _extends() {
+    _extends = Object.assign || function(target) {
+        for(var i = 1; i < arguments.length; i++){
+            var source = arguments[i];
+            for(var key in source){
+                if (Object.prototype.hasOwnProperty.call(source, key)) {
+                    target[key] = source[key];
+                }
+            }
+        }
+        return target;
+    };
+    return _extends.apply(this, arguments);
+}
+import React from 'react';
+import { styles as footerStyles } from './footer.styles.js';
+export function Footer({ className , children , ...props }) {
+    const styles = footerStyles();
+    return React.createElement("div", _extends({
+        className: styles.base({
+            className
+        })
+    }, props), children);
+}

package/dist/components/panel/components/footer/footer.styles.d.ts

@@ -0,0 +1,7 @@
+export declare const styles: import("tailwind-variants").TVReturnType<{}, {
+    base: string;
+}, undefined, {
+    responsiveVariants: string[];
+}, {}, {
+    base: string;
+}>;

package/dist/components/panel/components/footer/footer.styles.js

@@ -0,0 +1,15 @@
+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/dist/components/panel/components/footer/footer.types.d.ts

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

package/dist/components/panel/components/footer/footer.types.js

@@ -0,0 +1 @@
+export { };

package/dist/components/panel/components/footer/index.d.ts

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

package/dist/components/panel/components/footer/index.js

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

package/dist/components/panel/components/index.d.ts

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

package/dist/components/panel/components/index.js

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

package/dist/components/panel/index.d.ts

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

package/dist/components/panel/index.js

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

package/dist/components/panel/panel.component.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" resolution-mode="require"/>
+import { type PanelProps } from './panel.types.js';
+export declare function Panel({ className, children, heading, headingTag: Tag, look, ...props }: PanelProps): JSX.Element;
+export declare namespace Panel {
+    var Body: typeof import("./components/index.js").Body;
+    var Footer: typeof import("./components/index.js").Footer;
+}

package/dist/components/panel/panel.component.js

@@ -0,0 +1,31 @@
+function _extends() {
+    _extends = Object.assign || function(target) {
+        for(var i = 1; i < arguments.length; i++){
+            var source = arguments[i];
+            for(var key in source){
+                if (Object.prototype.hasOwnProperty.call(source, key)) {
+                    target[key] = source[key];
+                }
+            }
+        }
+        return target;
+    };
+    return _extends.apply(this, arguments);
+}
+import React from 'react';
+import { Body, Footer } from './components/index.js';
+import { styles as panelStyles } from './panel.styles.js';
+export function Panel({ className , children , heading , headingTag: Tag = 'h1' , look ='hero' , ...props }) {
+    const styles = panelStyles({
+        look
+    });
+    return React.createElement("div", _extends({
+        className: styles.base({
+            className
+        })
+    }, props), React.createElement(Tag, {
+        className: styles.header()
+    }, heading), children);
+}
+Panel.Body = Body;
+Panel.Footer = Footer;

package/dist/components/panel/panel.stories.d.ts

@@ -0,0 +1,21 @@
+import { type Meta, type StoryObj } from '@storybook/react';
+import { Panel } from './panel.component.js';
+declare const meta: Meta<typeof Panel>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+/**
+ * > Default usage example
+ */
+export declare const DefaultStory: Story;
+/**
+ * > Faint look example
+ */
+export declare const FaintLookPanel: Story;
+/**
+ * > Example using a table
+ */
+export declare const PanelWithTable: Story;
+/**
+ * > Example using a table with a body and a panel footer
+ */
+export declare const PanelWithTableAndBody: Story;

package/dist/components/panel/panel.stories.js

@@ -0,0 +1,58 @@
+import { Table } from '../table/index.js';
+import { Panel } from './panel.component.js';
+const meta = {
+    title: 'Example/Panel',
+    component: Panel,
+    tags: [
+        'autodocs'
+    ],
+    decorators: [
+        (Story)=>React.createElement("div", {
+                className: "p-3"
+            }, React.createElement(Story, null))
+    ],
+    parameters: {
+        layout: 'fullscreen'
+    },
+    args: {
+        heading: 'Panel title'
+    }
+};
+export default meta;
+export const DefaultStory = {
+    args: {
+        children: [
+            React.createElement(Panel.Body, null, "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."),
+            React.createElement(Panel.Footer, null, "Panel footer")
+        ]
+    }
+};
+export const FaintLookPanel = {
+    args: {
+        look: 'faint',
+        children: [
+            React.createElement(Panel.Body, null, "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."),
+            React.createElement(Panel.Footer, null, "Panel footer")
+        ]
+    }
+};
+export const PanelWithTable = {
+    args: {
+        children: [
+            React.createElement(Table, null, React.createElement(Table.Caption, null, "Caption this table width is: ", React.createElement("em", null, "(100%)")), React.createElement(Table.Header, null, React.createElement(Table.HeaderRow, null, React.createElement(Table.HeaderCell, null, "Name"), React.createElement(Table.HeaderCell, null, "Type"), React.createElement(Table.HeaderCell, null, "Date Modified"))), React.createElement(Table.Body, null, React.createElement(Table.Row, null, React.createElement(Table.Cell, null, "Games"), React.createElement(Table.Cell, null, "File folder"), React.createElement(Table.Cell, null, "6/7/2020")), React.createElement(Table.Row, null, React.createElement(Table.Cell, null, "Program Files"), React.createElement(Table.Cell, null, "File folder"), React.createElement(Table.Cell, null, "4/7/2021")), React.createElement(Table.Row, null, React.createElement(Table.Cell, null, "bootmgr"), React.createElement(Table.Cell, null, "System file"), React.createElement(Table.Cell, null, "11/20/2010")), React.createElement(Table.Row, null, React.createElement(Table.Cell, null, "log.txt"), React.createElement(Table.Cell, null, "Text Document"), React.createElement(Table.Cell, null, "1/18/2016"))), React.createElement(Table.Footer, {
+                colspan: 3
+            }, "Footer goes here and should colSpan all columns"))
+        ]
+    }
+};
+export const PanelWithTableAndBody = {
+    args: {
+        children: [
+            React.createElement(Panel.Body, null, "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."),
+            React.createElement(Table, null, React.createElement(Table.Caption, null, "Caption this table width is: ", React.createElement("em", null, "(100%)")), React.createElement(Table.Header, null, React.createElement(Table.HeaderRow, null, React.createElement(Table.HeaderCell, null, "Name"), React.createElement(Table.HeaderCell, null, "Type"), React.createElement(Table.HeaderCell, null, "Date Modified"))), React.createElement(Table.Body, null, React.createElement(Table.Row, null, React.createElement(Table.Cell, null, "Games"), React.createElement(Table.Cell, null, "File folder"), React.createElement(Table.Cell, null, "6/7/2020")), React.createElement(Table.Row, null, React.createElement(Table.Cell, null, "Program Files"), React.createElement(Table.Cell, null, "File folder"), React.createElement(Table.Cell, null, "4/7/2021")), React.createElement(Table.Row, null, React.createElement(Table.Cell, null, "bootmgr"), React.createElement(Table.Cell, null, "System file"), React.createElement(Table.Cell, null, "11/20/2010")), React.createElement(Table.Row, null, React.createElement(Table.Cell, null, "log.txt"), React.createElement(Table.Cell, null, "Text Document"), React.createElement(Table.Cell, null, "1/18/2016"))), React.createElement(Table.Footer, {
+                colspan: 3
+            }, "Footer goes here and should colSpan all columns")),
+            React.createElement(Panel.Footer, null, "Panel footer")
+        ]
+    }
+};

package/dist/components/panel/panel.styles.d.ts

@@ -0,0 +1,29 @@
+export declare const styles: import("tailwind-variants").TVReturnType<{
+    look: {
+        hero: {
+            header: string;
+        };
+        faint: {
+            base: string;
+            header: string;
+        };
+    };
+}, {
+    base: string;
+    header: string;
+}, undefined, {
+    responsiveVariants: string[];
+}, {
+    look: {
+        hero: {
+            header: string;
+        };
+        faint: {
+            base: string;
+            header: string;
+        };
+    };
+}, {
+    base: string;
+    header: string;
+}>;

package/dist/components/panel/panel.styles.js

@@ -0,0 +1,26 @@
+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/dist/components/panel/panel.types.d.ts

@@ -0,0 +1,15 @@
+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/dist/components/panel/panel.types.js

@@ -0,0 +1 @@
+export { };

package/dist/components/pictogram/components/decorative/wbc-bank-card-pictogram.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" resolution-mode="require"/>
+import { type PictogramProps } from '../../pictogram.types.js';
+export declare function WBCBankCardPictogram({ 'aria-label': ariaLabel, copyrightYear, viewBoxHeight, viewBoxWidth, className, ...props }: PictogramProps): JSX.Element;

package/dist/components/pictogram/components/decorative/wbc-bank-card-pictogram.js

@@ -0,0 +1,70 @@
+function _extends() {
+    _extends = Object.assign || function(target) {
+        for(var i = 1; i < arguments.length; i++){
+            var source = arguments[i];
+            for(var key in source){
+                if (Object.prototype.hasOwnProperty.call(source, key)) {
+                    target[key] = source[key];
+                }
+            }
+        }
+        return target;
+    };
+    return _extends.apply(this, arguments);
+}
+import { clsx } from 'clsx';
+import React from 'react';
+import { Pictogram } from '../../pictogram.component.js';
+export function WBCBankCardPictogram({ 'aria-label': ariaLabel = 'Bank card' , copyrightYear ='2023' , viewBoxHeight =200 , viewBoxWidth =200 , className , ...props }) {
+    return React.createElement(Pictogram, _extends({
+        className: clsx('h-[200px] w-[200px]', className),
+        "aria-label": ariaLabel,
+        copyrightYear: copyrightYear,
+        viewBoxHeight: viewBoxHeight,
+        viewBoxWidth: viewBoxWidth
+    }, props), React.createElement("path", {
+        fill: "#ffd8f7",
+        d: "M31.98 48h16.01v8H31.98z"
+    }), React.createElement("circle", {
+        cx: "160",
+        cy: "176",
+        r: "8",
+        fill: "#ffd8f7"
+    }), React.createElement("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"
+    }), React.createElement("circle", {
+        cx: "19.97",
+        cy: "180",
+        r: "4",
+        fill: "#1f1c4f"
+    }), React.createElement("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"
+    }), React.createElement("path", {
+        fill: "#da1710",
+        d: "M63.99 23.71h24v8h-24z"
+    }), React.createElement("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"
+    }), React.createElement("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"
+    }), React.createElement("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"
+    }), React.createElement("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"
+    }), React.createElement("circle", {
+        cx: "135.78",
+        cy: "133.93",
+        r: "7.94",
+        fill: "#da1710"
+    }));
+}

package/dist/components/pictogram/components/informative/accessibility-pictogram.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" resolution-mode="require"/>
+import { type PictogramProps } from '../../pictogram.types.js';
+export declare function AccessibilityPictogram({ mode, viewBoxWidth, viewBoxHeight, 'aria-label': ariaLabel, copyrightYear, className, ...props }: PictogramProps): JSX.Element;

package/dist/components/pictogram/components/informative/accessibility-pictogram.js

@@ -0,0 +1,42 @@
+function _extends() {
+    _extends = Object.assign || function(target) {
+        for(var i = 1; i < arguments.length; i++){
+            var source = arguments[i];
+            for(var key in source){
+                if (Object.prototype.hasOwnProperty.call(source, key)) {
+                    target[key] = source[key];
+                }
+            }
+        }
+        return target;
+    };
+    return _extends.apply(this, arguments);
+}
+import { clsx } from 'clsx';
+import React from 'react';
+import { Pictogram } from '../../pictogram.component.js';
+import { fill } from '../../pictogram.styles.js';
+export function AccessibilityPictogram({ mode ='duo' , viewBoxWidth =78 , viewBoxHeight =78 , 'aria-label': ariaLabel = 'Accessibility' , copyrightYear ='2023' , className , ...props }) {
+    return React.createElement(Pictogram, _extends({
+        className: clsx('h-13 w-13', className),
+        viewBoxWidth: viewBoxWidth,
+        viewBoxHeight: viewBoxHeight,
+        "aria-label": ariaLabel,
+        copyrightYear: copyrightYear
+    }, props), React.createElement("g", {
+        fill: "none",
+        fillRule: "evenodd"
+    }, React.createElement("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"
+    }), React.createElement("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"
+    })));
+}

package/dist/components/pictogram/components/informative/accounts-pictogram.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" resolution-mode="require"/>
+import { type PictogramProps } from '../../pictogram.types.js';
+export declare function AccountsPictogram({ mode, viewBoxWidth, viewBoxHeight, 'aria-label': ariaLabel, copyrightYear, className, ...props }: PictogramProps): JSX.Element;

package/dist/components/pictogram/components/informative/accounts-pictogram.js

@@ -0,0 +1,60 @@
+function _extends() {
+    _extends = Object.assign || function(target) {
+        for(var i = 1; i < arguments.length; i++){
+            var source = arguments[i];
+            for(var key in source){
+                if (Object.prototype.hasOwnProperty.call(source, key)) {
+                    target[key] = source[key];
+                }
+            }
+        }
+        return target;
+    };
+    return _extends.apply(this, arguments);
+}
+import { clsx } from 'clsx';
+import React from 'react';
+import { Pictogram } from '../../pictogram.component.js';
+import { fill } from '../../pictogram.styles.js';
+export function AccountsPictogram({ mode ='duo' , viewBoxWidth =78 , viewBoxHeight =78 , 'aria-label': ariaLabel = 'Accounts' , copyrightYear ='2023' , className , ...props }) {
+    return React.createElement(Pictogram, _extends({
+        className: clsx('h-13 w-13', className),
+        viewBoxWidth: viewBoxWidth,
+        viewBoxHeight: viewBoxHeight,
+        "aria-label": ariaLabel,
+        copyrightYear: copyrightYear
+    }, props), React.createElement("g", {
+        fill: "none",
+        fillRule: "evenodd"
+    }, React.createElement("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"
+    }), React.createElement("polygon", {
+        className: fill({
+            mode,
+            outline: true
+        }),
+        points: "36.545 29.543 62.498 29.543 62.498 26.543 36.545 26.543"
+    }), React.createElement("polygon", {
+        className: fill({
+            mode,
+            outline: true
+        }),
+        points: "36.545 38.61 62.498 38.61 62.498 35.61 36.545 35.61"
+    }), React.createElement("polygon", {
+        className: fill({
+            mode,
+            outline: true
+        }),
+        points: "36.545 47.678 62.498 47.678 62.498 44.678 36.545 44.678"
+    }), React.createElement("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"
+    })));
+}

package/dist/components/pictogram/components/informative/aeroplane-pictogram.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" resolution-mode="require"/>
+import { type PictogramProps } from '../../pictogram.types.js';
+export declare function AeroplanePictogram({ mode, viewBoxWidth, viewBoxHeight, 'aria-label': ariaLabel, copyrightYear, className, ...props }: PictogramProps): JSX.Element;