@westpac/ui 0.2.1 → 0.4.0

package/dist/components/pictogram/components/informative/chat-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 ChatPictogram({ mode ='duo' , viewBoxWidth =78 , viewBoxHeight =78 , 'aria-label': ariaLabel = 'Chat' , 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("polygon", {
+        className: fill({
+            mode,
+            highlight: true
+        }),
+        points: "12.15 19.031 43.364 19.031 43.364 16.031 12.15 16.031"
+    }), React.createElement("polygon", {
+        className: fill({
+            mode,
+            highlight: true
+        }),
+        points: "12.15 26.01 43.364 26.01 43.364 23.01 12.15 23.01"
+    }), React.createElement("polygon", {
+        className: fill({
+            mode,
+            highlight: true
+        }),
+        points: "12.15 32.988 33.026 32.988 33.026 29.988 12.15 29.988"
+    }), React.createElement("path", {
+        className: fill({
+            mode,
+            outline: true
+        }),
+        d: "M71.2813,26.4472 L58.5753,26.4472 C57.9583,26.4472 57.4573,26.9472 57.4573,27.5652 L57.4573,44.6662 C57.4573,45.2842 56.9563,45.7842 56.3393,45.7842 L29.5513,45.7842 C28.9323,45.7842 28.4323,46.2852 28.4323,46.9032 L28.4323,48.1482 L28.4323,56.2362 C28.4323,56.7452 28.8443,57.1582 29.3543,57.1582 L50.2663,57.1522 C50.4463,57.1462 62.1863,56.7722 67.2733,61.6132 C69.0553,63.3102 70.0203,65.4182 70.2083,68.0372 C70.2433,68.5332 70.6353,68.9262 71.1343,68.9242076 L71.1823,68.9242076 C71.6903,68.9212 72.0993,68.5092 72.0993,68.0022 L72.0993,27.2652 C72.0993,26.8132 71.7333,26.4472 71.2813,26.4472"
+    }), React.createElement("path", {
+        className: fill({
+            mode,
+            outline: true
+        }),
+        d: "M10.2139,44.5097 C8.9459,45.7167 8.0469,47.0977 7.4999,48.6857 L7.4999,11.4997 L48.6669,11.4997 L48.6669,39.7107 L28.1239,39.7047 C27.6169,39.6837 15.6279,39.3587 10.2139,44.5097 L10.2139,44.5097 Z M48.9949,42.2107 C48.9979,42.2107 49.0009,42.2097 49.0049,42.2097 L51.9949,42.2107 C53.1929,42.2107 54.1669,41.2367 54.1669,40.0387 L54.1669,11.0687 C54.1669,9.9277 53.2389,8.9997 52.0989,8.9997 L49.0989,8.9997 L10.0679,8.9997 L7.0679,8.9997 C5.9279,8.9997 4.9999,9.9277 4.9999,11.0677 L4.9999,51.8047 C4.9999,52.9757 5.9389,53.9327 7.1489,53.9707 L7.1489,53.9737 L7.1849,53.9737 C7.1929,53.9737 7.1999,53.9767 7.2079,53.9767 L7.2209,53.9767 C7.2299,53.9767 7.2369,53.9737 7.2449,53.9737 L10.1849,53.9737 C10.1929,53.9737 10.1999,53.9767 10.2079,53.9767 L10.2209,53.9767 C10.2299,53.9767 10.2369,53.9737 10.2449,53.9737 L10.2959,53.9737 L10.2959,53.9687 C11.3979,53.9297 12.3089,53.0527 12.3889,51.9287 C12.5529,49.6317 13.3869,47.7977 14.9379,46.3207 C18.6519,42.7857 26.5889,42.2667 29.7459,42.2047 L48.9949,42.2107 Z"
+    })));
+}

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

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

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

@@ -0,0 +1,48 @@
+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 ClockPictogram({ mode ='duo' , viewBoxWidth =78 , viewBoxHeight =78 , 'aria-label': ariaLabel = 'Clock' , 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,
+            outline: true
+        }),
+        d: "M38.268,68.0371 C21.854,68.0371 8.5,54.6831 8.5,38.2681 C8.5,21.8551 21.854,8.5021 38.268,8.5021 C54.681,8.5021 68.035,21.8551 68.035,38.2681 C68.035,54.6831 54.681,68.0371 38.268,68.0371 M65.437,20.8941 C59.696,11.9471 49.666,6.0001 38.268,6.0001 C20.476,6.0001 6,20.4741 6,38.2671 C6,45.4011 8.331,51.9981 12.266,57.3461 C18.006,66.3001 28.039,72.2501 39.442,72.2501 C57.234,72.2501 71.709,57.7751 71.709,39.9831 C71.709,32.8451 69.375,26.2451 65.437,20.8941"
+    }), React.createElement("polygon", {
+        className: fill({
+            mode,
+            outline: true
+        }),
+        points: "39.857 18.905 36.857 18.905 36.857 38.847 38.357 38.847 37.272 39.884 53.44 56.814 55.61 54.742 39.857 38.246"
+    }), React.createElement("path", {
+        className: fill({
+            mode,
+            highlight: true
+        }),
+        d: "M38.3569,34.3574 C35.8769,34.3574 33.8659,36.3674 33.8659,38.8474 C33.8659,41.3284 35.8769,43.3374 38.3569,43.3374 C40.8369,43.3374 42.8479,41.3284 42.8479,38.8474 C42.8479,36.3674 40.8369,34.3574 38.3569,34.3574"
+    })));
+}

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

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

package/dist/components/pictogram/components/informative/coffee-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 CoffeePictogram({ mode ='duo' , viewBoxWidth =78 , viewBoxHeight =78 , 'aria-label': ariaLabel = 'Coffee' , copyrightYear ='2021' , 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("polygon", {
+        className: fill({
+            mode,
+            highlight: true
+        }),
+        points: "52.827 52 20.163 52 19 39 54 39"
+    }), React.createElement("path", {
+        className: fill({
+            mode,
+            outline: true
+        }),
+        d: "M13.594 22.366h45.8v-3.908h-45.8v3.908zm37.41 49.058h-29.02L17.92 24.942h37.148l-4.063 46.482zM18.512 9.007l36.09 3.675 1.189 3.2H16.877l1.634-6.875zm43.49 6.876l-3.26-4.793a1.294 1.294 0 0 0-.959-.554l.004-.004-2.116-.275-38.026-3.872a1.285 1.285 0 0 0-1.395.985l-2.026 8.513h-1.926c-.716 0-1.297.576-1.297 1.288v6.483c0 .711.581 1.288 1.297 1.288h3.018L19.5 72.823c.058.666.62 1.177 1.293 1.177h31.399c2.751 0 5.352-2.802 5.58-5.588l3.822-43.47h3.02c.716 0 1.297-.577 1.297-1.288v-6.483c0-.712-.581-1.288-1.297-1.288H62z"
+    })));
+}

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

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

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

@@ -0,0 +1,44 @@
+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 CoinsPictogram({ mode ='duo' , viewBoxWidth =78 , viewBoxHeight =78 , 'aria-label': ariaLabel = 'Coins' , 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,
+            outline: true
+        }),
+        fillRule: "nonzero",
+        d: "M32,15.123752 C33.9177195,14.6301651 35.9282026,14.3676471 38,14.3676471 C40.0717974,14.3676471 42.0822805,14.6301651 44,15.123752 C45.9177195,14.6301651 47.9282026,14.3676471 50,14.3676471 C63.254834,14.3676471 74,25.1128131 74,38.3676471 C74,51.6224811 63.254834,62.3676471 50,62.3676471 C47.9282026,62.3676471 45.9177195,62.105129 44,61.6115421 C42.0822805,62.105129 40.0717974,62.3676471 38,62.3676471 C35.9282026,62.3676471 33.9177195,62.105129 32,61.6115421 C30.0822805,62.105129 28.0717974,62.3676471 26,62.3676471 C12.745166,62.3676471 2,51.6224811 2,38.3676471 C2,25.1128131 12.745166,14.3676471 26,14.3676471 C28.0717974,14.3676471 30.0822805,14.6301651 32,15.123752 L32,15.123752 Z M24.6628705,18.4116367 C14.2406232,19.0996068 6,27.7712766 6,38.3676471 C6,48.9640175 14.2406232,57.6356873 24.6628705,58.3236574 C25.1048295,58.3528305 25.5506845,58.3676471 26,58.3676471 C28.0904114,58.3676471 30.1059176,58.0469394 32,57.4520425 C40.1142139,54.9035152 46,47.3229306 46,38.3676471 C46,29.4123635 40.1142139,21.8317789 32,19.2832516 C30.1059176,18.6883547 28.0904114,18.3676471 26,18.3676471 C25.5506845,18.3676471 25.1048295,18.3824637 24.6628971,18.4116349 L24.6628705,18.4116367 Z M39.3371029,18.4116349 C45.7669118,22.71737 50,30.0481631 50,38.3676471 C50,46.687131 45.7669118,54.0179242 39.3371029,58.3236592 C49.7593628,57.635702 58,48.9640265 58,38.3676471 C58,27.7712676 49.7593628,19.0995921 39.3371029,18.4116349 L39.3371029,18.4116349 Z M51.3371029,18.4116349 C57.7669118,22.71737 62,30.0481631 62,38.3676471 C62,46.687131 57.7669118,54.0179242 51.3371029,58.3236592 C61.7593628,57.635702 70,48.9640265 70,38.3676471 C70,27.7712676 61.7593628,19.0995921 51.3371029,18.4116349 L51.3371029,18.4116349 Z"
+    }), React.createElement("path", {
+        className: fill({
+            mode,
+            highlight: true
+        }),
+        fillRule: "nonzero",
+        d: "M27.2,51.68 L24.08,51.68 L24.08,48.65 C21.5,48.32 18.98,47.3 17,45.8 L19.34,42.38 C20.96,43.61 22.46,44.45 24.23,44.81 L24.23,40.04 C19.91,38.87 17.78,37.19 17.78,33.65 C17.78,30.32 20.3,28.13 24.08,27.74 L24.08,26 L27.2,26 L27.2,27.8 C29.33,28.1 31.16,28.88 32.78,30.02 L30.77,33.53 C29.57,32.72 28.31,32.09 27.05,31.76 L27.05,36.29 C31.61,37.52 33.56,39.41 33.56,42.77 C33.56,46.1 31.01,48.29 27.2,48.71 L27.2,51.68 Z M24.23,35.54 L24.23,31.49 C22.79,31.7 22.16,32.42 22.16,33.38 C22.16,34.31 22.58,34.94 24.23,35.54 Z M27.05,44.96 C28.46,44.75 29.18,44.09 29.18,43.01 C29.18,41.99 28.67,41.36 27.05,40.76 L27.05,44.96 Z"
+    })));
+}

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

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

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

@@ -0,0 +1,48 @@
+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 CompassPictogram({ mode ='duo' , viewBoxWidth =78 , viewBoxHeight =78 , 'aria-label': ariaLabel = 'Compass' , copyrightYear ='2021' , 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: "M37.014 35.276a2.602 2.602 0 1 1 3.681 3.681l2.877 2.878c.021-.02.047-.036.061-.06l10.464-19.502a.295.295 0 0 0-.4-.399l-19.5 10.464c-.026.013-.04.04-.06.06l2.877 2.878z"
+    }), React.createElement("path", {
+        className: fill({
+            mode,
+            outline: true
+        }),
+        d: "M38.268 68.037C21.854 68.037 8.5 54.683 8.5 38.269S21.854 8.502 38.268 8.502c16.413 0 29.767 13.353 29.767 29.767S54.681 68.037 38.268 68.037m27.17-47.142C59.695 11.947 49.665 6 38.267 6 20.476 6 6 20.475 6 38.268c0 7.133 2.331 13.73 6.266 19.078C18.006 66.3 28.04 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.088"
+    }), React.createElement("path", {
+        className: fill({
+            mode,
+            outline: true
+        }),
+        d: "M40.606 14.275a2.416 2.416 0 1 0-4.831.001 2.416 2.416 0 0 0 4.831 0zM38.19 59.396a2.416 2.416 0 1 0 0 4.831 2.416 2.416 0 0 0 0-4.83m23.863-23.543a2.415 2.415 0 1 0 0 4.83 2.415 2.415 0 0 0 0-4.83m-47.779 0a2.415 2.415 0 1 0 0 4.83 2.415 2.415 0 0 0 0-4.83m22.74 3.103a2.604 2.604 0 0 1 0-3.681l-2.878-2.878c-.02.02-.046.036-.06.06l-10.464 19.5a.295.295 0 0 0 .4.4l19.5-10.463c.025-.014.04-.041.061-.06l-2.878-2.878a2.604 2.604 0 0 1-3.68 0"
+    })));
+}

package/dist/components/pictogram/components/informative/customer-profile-pictogram.d.ts

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

package/dist/components/pictogram/components/informative/customer-profile-pictogram.js

@@ -0,0 +1,43 @@
+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 CustomerProfilePictogram({ mode ='duo' , viewBoxWidth =78 , viewBoxHeight =78 , 'aria-label': ariaLabel = 'Customer profile' , copyrightYear ='2021' , 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,
+            outline: true
+        }),
+        d: "M38.268 68.037C21.854 68.037 8.5 54.683 8.5 38.269S21.854 8.502 38.268 8.502c16.413 0 29.767 13.353 29.767 29.767S54.681 68.037 38.268 68.037m27.169-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.079C18.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.088"
+    }), React.createElement("path", {
+        className: fill({
+            mode,
+            highlight: true
+        }),
+        fillRule: "nonzero",
+        d: "M43.704 41.03c4.501 0 8.202 3.26 8.338 7.282l.004.228v3.253c0 .66-.565 1.173-1.25 1.232l-.13.005H26.34c-.694 0-1.223-.472-1.287-1.108l-.006-.129V48.54c0-4.05 3.617-7.384 8.087-7.506l.254-.004h10.317zm-5.158-20a8.499 8.499 0 0 0-8.5 8.5c0 2.366.972 4.579 2.656 6.173a8.5 8.5 0 1 0 5.843-14.673z"
+    })));
+}

package/dist/components/pictogram/components/informative/desktop-computer-pictogram.d.ts

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

package/dist/components/pictogram/components/informative/desktop-computer-pictogram.js

@@ -0,0 +1,48 @@
+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 DesktopComputerPictogram({ mode ='duo' , viewBoxWidth =78 , viewBoxHeight =78 , 'aria-label': ariaLabel = 'Desktop computer' , 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,
+            outline: true
+        }),
+        d: "M12.936,47.6466 L61.229,47.6466 L61.229,17.1096 L12.936,17.1096 L12.936,47.6466 Z M61.987,14.6096 L12.177,14.6096 C11.217,14.6096 10.436,15.3906 10.436,16.3506 L10.436,48.4046 C10.436,49.3656 11.217,50.1466 12.177,50.1466 L61.987,50.1466 C62.947,50.1466 63.729,49.3656 63.729,48.4046 L63.729,16.3506 C63.729,15.3906 62.947,14.6096 61.987,14.6096 L61.987,14.6096 Z"
+    }), React.createElement("path", {
+        className: fill({
+            mode,
+            outline: true
+        }),
+        d: "M66.9102,51.145 C66.9102,52.309 65.9642,53.255 64.8002,53.255 L45.2362,53.255 L31.2322,53.255 L9.6102,53.255 C8.4462,53.255 7.5002,52.309 7.5002,51.145 L7.5002,13.611 C7.5002,12.447 8.4462,11.5 9.6102,11.5 L64.8002,11.5 C65.9642,11.5 66.9102,12.447 66.9102,13.611 L66.9102,51.145 Z M68.1412,9 L64.8002,9 L12.9522,9 L9.6102,9 C7.0682,9 5.0002,11.068 5.0002,13.611 L5.0002,51.145 C5.0002,53.687 7.0682,55.755 9.6102,55.755 L12.9522,55.755 L31.2322,55.755 L31.2322,60.515 L33.7322,60.515 L33.7322,55.755 L42.7362,55.755 L42.7362,60.515 L47.5492,60.515 L47.5492,55.755 L64.8002,55.755 L68.1412,55.755 C70.6842,55.755 72.7532,53.687 72.7532,51.145 L72.7532,13.611 C72.7532,11.068 70.6842,9 68.1412,9 L68.1412,9 Z"
+    }), React.createElement("path", {
+        className: fill({
+            mode,
+            highlight: true
+        }),
+        d: "M53.8887,68.2934 L23.9137,68.2934 C23.2687,68.2934 22.7407,67.7654 22.7407,67.1204 L22.7407,66.7364 C22.7407,63.3144 25.5397,60.5154 28.9617,60.5154 L48.8407,60.5154 C52.2627,60.5154 55.0627,63.3144 55.0627,66.7364 L55.0627,67.1204 C55.0627,67.7654 54.5347,68.2934 53.8887,68.2934"
+    })));
+}

package/dist/components/pictogram/components/informative/document-and-pen-pictogram.d.ts

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

package/dist/components/pictogram/components/informative/document-and-pen-pictogram.js

@@ -0,0 +1,54 @@
+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 DocumentAndPenPictogram({ mode ='duo' , viewBoxWidth =78 , viewBoxHeight =78 , 'aria-label': ariaLabel = 'Document and pen' , copyrightYear ='2021' , 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("polygon", {
+        className: fill({
+            mode,
+            highlight: true
+        }),
+        points: "15.655 19.999 47.317 19.999 47.317 16.999 15.655 16.999"
+    }), React.createElement("polygon", {
+        className: fill({
+            mode,
+            highlight: true
+        }),
+        points: "15.655 28.298 47.317 28.298 47.317 25.298 15.655 25.298"
+    }), React.createElement("polygon", {
+        className: fill({
+            mode,
+            highlight: true
+        }),
+        points: "15.655 36.594 35.682 36.594 35.682 33.594 15.655 33.594"
+    }), React.createElement("path", {
+        className: fill({
+            mode,
+            outline: true
+        }),
+        d: "M41.556 57.24l-6.204-6.203 25.822-25.821 6.204 6.203L41.556 57.24zm-6.463 2.044l-1.891-1.892 1.177-3.793 4.573 4.573-3.86 1.112zm-22.005 9.149A3.593 3.593 0 0 1 9.5 64.845V9.579h43.972v19.726L33.185 49.592c-.24.242-.421.54-.525.867l-4.13 13.296 13.534-3.901c.323-.103.62-.284.862-.526l10.546-10.546v14.536c.153 3.136 1.183 4.42 2.98 5.115H13.088zm56.274-35.54c.813-.813.83-2.117.04-2.907l-6.872-6.873a2.012 2.012 0 0 0-1.49-.58 2.1 2.1 0 0 0-1.417.622l-3.651 3.65V7H7v57.767a6.095 6.095 0 0 0 6.088 6.088h42.884l4.146-.01a4.25 4.25 0 0 0 4.248-4.248V56.479h-8.394V46.283l13.39-13.39z"
+    })));
+}

package/dist/components/pictogram/components/informative/dollar-sign-pictogram.d.ts

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

package/dist/components/pictogram/components/informative/dollar-sign-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 DollarSignPictogram({ mode ='duo' , viewBoxWidth =78 , viewBoxHeight =78 , 'aria-label': ariaLabel = 'Dollar sign' , 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,
+            outline: true
+        }),
+        d: "M38.2678,68.0367 C21.8538,68.0367 8.4998,54.6827 8.4998,38.2687 C8.4998,21.8547 21.8538,8.5017 38.2678,8.5017 C54.6808,8.5017 68.0348,21.8547 68.0348,38.2687 C68.0348,54.6827 54.6808,68.0367 38.2678,68.0367 M65.4368,20.8947 C59.6958,11.9467 49.6658,5.9997 38.2678,5.9997 C20.4758,5.9997 5.9998,20.4747 5.9998,38.2677 C5.9998,45.4007 8.3308,51.9977 12.2658,57.3457 C18.0058,66.2997 28.0388,72.2497 39.4418,72.2497 C57.2338,72.2497 71.7088,57.7747 71.7088,39.9827 C71.7088,32.8447 69.3748,26.2447 65.4368,20.8947"
+    }), React.createElement("path", {
+        className: fill({
+            mode,
+            highlight: true
+        }),
+        d: "M42.0295,46.857 C41.5525,47.419 40.9585,47.807 40.2555,48.035 L40.2555,40.927 C41.1095,41.242 41.7565,41.649 42.1725,42.159 C42.6755,42.776 42.9265,43.511 42.9265,44.364 C42.9265,45.319 42.6275,46.149 42.0295,46.857 M35.0775,33.068 C34.6705,32.489 34.4665,31.861 34.4665,31.187 C34.4665,30.448 34.6895,29.774 35.1345,29.162 C35.5315,28.618 36.0575,28.223 36.6975,27.961 L36.6975,34.357 C35.9905,34.016 35.4445,33.59 35.0775,33.068 M45.9445,38.607 C44.9065,37.372 43.0035,36.356 40.2555,35.551 L40.2555,28.248 C41.1555,28.828 41.7465,29.724 41.9905,30.977 L46.8225,30.346 C46.4915,28.437 45.7285,26.913 44.5315,25.773 C43.4495,24.743 42.0125,24.1 40.2555,23.803 L40.2555,21.81 L39.6995,21.81 L36.9305,21.81 L36.6975,21.81 L36.6975,23.741 C34.6205,23.993 32.9365,24.788 31.6685,26.155 C30.3505,27.574 29.6925,29.328 29.6925,31.416 C29.6925,33.479 30.2745,35.233 31.4395,36.677 C32.5665,38.077 34.3235,39.128 36.6975,39.841 L36.6975,47.784 C36.1025,47.45 35.5545,46.966 35.0585,46.313 C34.4985,45.574 34.1165,44.695 33.9125,43.677 L28.9275,44.211 C29.3105,46.72 30.1885,48.662 31.5635,50.037 C32.8875,51.361 34.6055,52.158 36.6975,52.455 L36.6975,55.976 L36.9305,55.976 L39.6995,55.976 L40.2555,55.976 L40.2555,52.305 C42.4705,51.889 44.2275,50.96 45.5145,49.502 C46.9085,47.923 47.6065,45.982 47.6065,43.677 C47.6065,41.614 47.0515,39.924 45.9445,38.607"
+    })));
+}

package/dist/components/pictogram/components/informative/drivers-licence-pictogram.d.ts

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

package/dist/components/pictogram/components/informative/drivers-licence-pictogram.js

@@ -0,0 +1,61 @@
+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 DriversLicencePictogram({ mode ='duo' , viewBoxWidth =78 , viewBoxHeight =78 , 'aria-label': ariaLabel = 'Drivers licence' , 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
+        }),
+        fillRule: "nonzero",
+        d: "M56.0127 42.0302C60.3477151 42.0302 63.9114924 45.2895846 64.0419975 49.3118788L64.0457 49.5403538 64.0457 52.7932769C64.0457 53.4521863 63.5016274 53.9664784 62.842525 54.0247034L62.7177 54.0302 39.2907 54.0302C38.6228856 54.0302 38.1129849 53.5578876 38.051856 52.9224482L38.0457 52.7932769 38.0457 49.5403538C38.0457 45.4903111 41.5290396 42.1557768 45.833209 42.0336644L46.0777 42.0302 56.0127 42.0302zM51.0459 23.0302C46.6267576 23.0302 43.0459 26.6110576 43.0459 31.0302 43.0459 33.257235 43.9609904 35.3392322 45.5462212 36.8402718 47.0217111 38.2373988 48.9720703 39.0302 51.0459 39.0302 55.4640424 39.0302 59.0459 35.4483424 59.0459 31.0302 59.0459 26.6113927 55.4643775 23.0302 51.0459 23.0302z"
+    }), React.createElement("polygon", {
+        className: fill({
+            mode,
+            outline: true
+        }),
+        points: "12.58 26.777 35.022 26.777 35.022 23.777 12.58 23.777"
+    }), React.createElement("polygon", {
+        className: fill({
+            mode,
+            outline: true
+        }),
+        points: "12.58 34.169 35.022 34.169 35.022 31.169 12.58 31.169"
+    }), React.createElement("polygon", {
+        className: fill({
+            mode,
+            outline: true
+        }),
+        points: "12.58 41.561 35.022 41.561 35.022 38.561 12.58 38.561"
+    }), React.createElement("path", {
+        className: fill({
+            mode,
+            outline: true
+        }),
+        d: "M68.9297,56.333 C68.9297,57.621 67.8817,58.668 66.5947,58.668 L8.8347,58.668 C7.5477,58.668 6.4997,57.621 6.4997,56.333 L6.4997,19.782 C6.4997,18.495 7.5477,17.447 8.8347,17.447 L66.5947,17.447 C67.8817,17.447 68.9297,18.495 68.9297,19.782 L68.9297,56.333 Z M73.2947,19.595 C71.5487,17.035 68.7837,15.513 68.7837,15.513 C68.7837,15.513 68.7767,15.533 68.7727,15.542 C68.1157,15.207 67.3817,15 66.5947,15 L8.8347,15 C6.1687,15 3.9997,17.169 3.9997,19.835 L3.9997,56.386 C3.9997,57.058 4.1387,57.697 4.3877,58.279 C4.4167,58.472 4.5287,58.73 4.7717,59.091 C6.5157,61.672 9.3067,63.207 9.3067,63.207 C9.3067,63.207 9.3127,63.192 9.3147,63.188 C10.0037,63.567 10.7837,63.802 11.6247,63.802 L69.3847,63.802 C72.0517,63.802 74.2207,61.633 74.2207,58.967 L74.2207,22.416 C74.2207,21.361 73.8707,20.391 73.2947,19.595 L73.2947,19.595 Z"
+    })));
+}

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

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

package/dist/components/pictogram/components/informative/education-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 EducationPictogram({ mode ='duo' , viewBoxWidth =78 , viewBoxHeight =78 , 'aria-label': ariaLabel = 'Education' , copyrightYear ='2021' , 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: "M62.64 22.584c-5.59-.42-13.53-.284-20.12 2.649v-3c6.59-2.933 14.53-3.069 20.12-2.649v3zm0 8.883c-5.59-.421-13.53-.285-20.12 2.649v-3c6.59-2.934 14.53-3.07 20.12-2.65v3zm0 8.883c-5.59-.42-13.53-.285-20.12 2.648v-3c6.59-2.933 14.53-3.069 20.12-2.649v3zm0 8.881c-5.59-.42-13.53-.284-20.12 2.649v-3c6.59-2.933 14.53-3.069 20.12-2.649v3z"
+    }), React.createElement("path", {
+        className: fill({
+            mode,
+            outline: true
+        }),
+        d: "M67.553 56.169c-4.723-.81-19.258-2.607-29.288 3.582V19.507c9.435-6.934 25.21-4.76 29.288-4.05V56.17zM35.765 59.75c-5.719-3.527-12.898-4.46-18.889-4.46a63.2 63.2 0 0 0-10.399.879V15.456c4.076-.712 19.851-2.885 29.288 4.05V59.75zM70.27 13.709c-.149-.186-.346-.4-1.186-.583-.84-.184-20.28-4.22-32.063 4.208C25.24 8.919 5.823 13.027 4.983 13.21L4 13.424v45.32l.013.002c.003.27.082.533.248.748l1.63 2.111c.293.38.781.559 1.251.457l.746-.163c.194-.043 19.468-4.12 30.305 3.886.274.205.683.31.925.31s.48 0 .711-.007c.233-.007.56-.123.8-.3 10.841-8.005 30.108-3.93 30.302-3.887l1.517.33V16.86c0-.287-.098-.564-.277-.787l-1.9-2.364z"
+    })));
+}

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

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