@westpac/ui 0.2.0 → 0.3.0

package/dist/components/pictogram/components/informative/gym-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 GymPictogram({ mode ='duo' , viewBoxWidth =78 , viewBoxHeight =78 , 'aria-label': ariaLabel = 'Gym' , 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: "24.855 57.164 24.855 40.328 28.081 40.328 28.081 49.263 31.86 44.968 35.834 44.968 31.666 49.424 36.133 57.164 32.653 57.164 29.585 51.686 28.081 53.26 28.081 57.164"
+    }), React.createElement("path", {
+        className: fill({
+            mode,
+            highlight: true
+        }),
+        d: "M40.575 50.813c0 1.294.25 2.241.752 2.843.5.6 1.12.901 1.855.901.789 0 1.455-.308 1.998-.925.544-.615.816-1.529.816-2.738 0-1.264-.26-2.201-.781-2.813-.521-.614-1.18-.92-1.975-.92-.774 0-1.412.3-1.913.902-.501.601-.752 1.518-.752 2.75m-2.883 7.155l3.687.448c.06.428.203.724.425.885.306.23.788.344 1.447.344.842 0 1.474-.127 1.895-.379.283-.169.498-.44.643-.816.099-.267.149-.762.149-1.48v-1.782c-.965 1.319-2.182 1.976-3.652 1.976-1.638 0-2.936-.693-3.893-2.078-.751-1.094-1.126-2.459-1.126-4.088 0-2.045.493-3.606 1.476-4.686.984-1.08 2.207-1.62 3.669-1.62 1.509 0 2.753.663 3.733 1.986v-1.71h3.02v10.944c0 1.44-.118 2.516-.356 3.227-.237.712-.57 1.272-1 1.677-.428.405-1 .724-1.716.953-.716.23-1.621.346-2.716.346-2.067 0-3.533-.355-4.398-1.064-.866-.708-1.298-1.605-1.298-2.693 0-.106.004-.236.01-.39"
+    }), React.createElement("path", {
+        className: fill({
+            mode,
+            outline: true
+        }),
+        d: "M46.712 18.294l-2.289 8.39a24.81 24.81 0 0 0-9.169-1.117 24.96 24.96 0 0 0-1.498.142l-2.023-7.415c-.187-.686-.076-1.386.297-1.872.133-.175.235-.229.251-.233h13.88c.02.006.121.058.255.233.372.488.483 1.188.296 1.872m-.548-4.604h-18.61c-.845 0-1.64.43-2.238 1.213-.843 1.103-1.112 2.617-.722 4.048l3.005 11.014 1.287-.488a22.267 22.267 0 0 1 6.525-1.413 22.296 22.296 0 0 1 9.42 1.41l1.289.491 3.004-11.012c.391-1.433.121-2.947-.722-4.048-.598-.784-1.393-1.215-2.238-1.215"
+    }), React.createElement("path", {
+        className: fill({
+            mode,
+            outline: true
+        }),
+        d: "M46.069 69.847H27.637a7.157 7.157 0 0 1-5.151-2.202c-4.215-4.41-8.306-12.171-7.973-18.473a22.437 22.437 0 0 1 7.865-15.861l.607-.515-3.404-12.478c-.812-2.983-.213-6.184 1.605-8.565 1.58-2.067 3.898-3.253 6.362-3.253h18.61c2.464 0 4.782 1.186 6.362 3.253 1.818 2.38 2.418 5.582 1.605 8.565L50.718 32.81l.603.514a22.46 22.46 0 0 1 7.904 17.065c0 5.809-4.012 13.062-7.975 17.224a7.193 7.193 0 0 1-5.181 2.234zm12.208-37.898l2.994-10.974c1.016-3.73.257-7.744-2.031-10.74C57.185 7.545 54.142 6 50.892 6H27.554c-3.25 0-6.292 1.544-8.348 4.236-2.288 2.996-3.047 7.01-2.03 10.739l2.989 10.958a24.953 24.953 0 0 0-8.142 17.107c-.388 7.337 4.218 15.683 8.663 20.333a9.67 9.67 0 0 0 6.958 2.974h23.159a9.706 9.706 0 0 0 6.992-3.01c4.306-4.522 8.664-12.483 8.664-18.948a24.965 24.965 0 0 0-8.182-18.44z"
+    })));
+}

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

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

package/dist/components/pictogram/components/informative/headset-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 HeadsetPictogram({ mode ='duo' , viewBoxWidth =78 , viewBoxHeight =78 , 'aria-label': ariaLabel = 'Headset' , 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: "M63.779 53.145c0 3.82-3.16 6.932-7.05 6.946a4.035 4.035 0 0 1-4.004-4.034V44.743c0-2.227 1.805-4.038 4.024-4.038h4.033v-6.786c0-12.833-10.588-23.272-23.602-23.272-13.014 0-23.603 10.44-23.603 23.272v6.786h5.066a4.035 4.035 0 0 1 4.024 4.038v11.314a4.034 4.034 0 0 1-4.024 4.034h-.986c-3.901 0-7.075-3.116-7.075-6.946V33.919c0-14.434 11.932-26.176 26.598-26.176 14.667 0 26.599 11.742 26.599 26.176v19.226zM36.673 5.166C20.817 5.436 8 18.226 8 33.92v19.226c0 4.982 3.891 9.078 8.83 9.494 1.729.132 4.203.344 6.534-.058a6.622 6.622 0 0 0 5.51-6.524V44.743c0-3.655-2.965-6.628-6.607-6.628h-2.484V33.92c0-10.803 8.466-19.683 19.209-20.592 10.744.909 19.208 9.79 19.208 20.592v4.196h-1.45c-3.643 0-6.607 2.973-6.607 6.628v11.314a6.624 6.624 0 0 0 5.525 6.526c2.138.327 3.74.279 5.533.053l.006-.001c4.914-.441 8.778-4.526 8.778-9.49V33.919c0-15.816-13.016-28.688-29.042-28.762l-4.27.01z"
+    }), React.createElement("path", {
+        className: fill({
+            mode,
+            highlight: true
+        }),
+        d: "M55.668 62.58a19.69 19.69 0 0 0 2.272.222c-.621 4.466-4.289 7.933-8.758 8.067l-.27.004h-4.284c-.477 1.186-1.579 2.04-2.88 2.118l-.197.006h-6.217c-1.838 0-3.334-1.542-3.334-3.435 0-1.834 1.398-3.337 3.152-3.435l.182-.005h6.217c1.32 0 2.462.797 3.001 1.95l.076.176h4.285c3.275 0 5.994-2.482 6.492-5.719.087.02.175.036.263.05z"
+    })));
+}

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

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

package/dist/components/pictogram/components/informative/heart-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 HeartPictogram({ mode ='duo' , viewBoxWidth =78 , viewBoxHeight =78 , 'aria-label': ariaLabel = 'Heart' , 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.078C18.006 66.3 28.039 72.25 39.442 72.25c17.792 0 32.267-14.475 32.267-32.267a32.095 32.095 0 0 0-6.272-19.088"
+    }), React.createElement("path", {
+        className: fill({
+            mode,
+            highlight: true
+        }),
+        d: "M46.548 24c-3.304 0-7.483 1.753-8.548 8.59-1.065-6.837-5.244-8.59-8.55-8.59C23.599 24 19 28.484 19 34.191c0 7.004 6.46 12.71 16.246 21.364l2.751 2.44V58l.003-.003.003.003v-.004l2.75-2.441C50.539 46.9 57 41.195 57 34.19 57 28.484 52.402 24 46.548 24"
+    })));
+}

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

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

package/dist/components/pictogram/components/informative/house-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 HousePictogram({ mode ='duo' , viewBoxWidth =78 , viewBoxHeight =78 , 'aria-label': ariaLabel = 'House' , 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: "26.843 67.963 41.563 73.985 41.563 51.654 26.829 45.602"
+    }), React.createElement("path", {
+        className: fill({
+            mode,
+            outline: true
+        }),
+        d: "M57.4766,36.557 L57.4766,63.173 C57.4766,64.443 56.4466,65.473 55.1766,65.473 L47.2976,65.474 L47.2976,43.103 L24.3536,43.103 L24.3536,65.483 L14.1716,65.485 L14.1716,36.557 L7.4076,36.557 L35.8246,10.397 L64.2446,36.557 L57.4766,36.557 Z M41.1836,7 L35.8246,7 L0.9996,39.057 L11.6716,39.057 L11.6716,67.986 L17.0306,67.985 L17.0306,67.986 L22.5286,67.983 L26.8536,67.982 L26.8536,45.603 L44.7976,45.603 L44.7976,67.975 L51.1566,67.974 L51.1566,67.975 L58.8446,67.974 C62.4296,67.973 65.3356,65.066 65.3356,61.48 L65.3356,39.057 L70.6516,39.057 L76.0106,39.057 L41.1836,7 Z"
+    })));
+}

package/dist/components/pictogram/components/informative/light-bulb-pictogram.d.ts

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

package/dist/components/pictogram/components/informative/light-bulb-pictogram.js

@@ -0,0 +1,78 @@
+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 LightBulbPictogram({ mode ='duo' , viewBoxWidth =78 , viewBoxHeight =78 , 'aria-label': ariaLabel = 'Light bulb' , 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: "37.313 11.15 39.813 11.15 39.813 2.001 37.313 2.001"
+    }), React.createElement("polygon", {
+        className: fill({
+            mode,
+            highlight: true
+        }),
+        points: "61.976 33.873 71.126 33.873 71.126 31.373 61.976 31.373"
+    }), React.createElement("polygon", {
+        className: fill({
+            mode,
+            highlight: true
+        }),
+        points: "6 33.873 15.15 33.873 15.15 31.373 6 31.373"
+    }), React.createElement("polygon", {
+        className: fill({
+            mode,
+            highlight: true
+        }),
+        points: "57.47 48.209 63.94 54.679 65.707 52.911 59.238 46.441"
+    }), React.createElement("polygon", {
+        className: fill({
+            mode,
+            highlight: true
+        }),
+        points: "14.654 12.421 21.124 18.892 22.891 17.125 16.422 10.653"
+    }), React.createElement("polygon", {
+        className: fill({
+            mode,
+            highlight: true
+        }),
+        points: "13.218 52.911 14.986 54.679 21.455 48.209 19.688 46.441"
+    }), React.createElement("polygon", {
+        className: fill({
+            mode,
+            highlight: true
+        }),
+        points: "60.705 10.654 54.235 17.124 56.003 18.892 62.473 12.422"
+    }), React.createElement("path", {
+        className: fill({
+            mode,
+            outline: true
+        }),
+        d: "M48.475 42.983c-2.846 4.27-3.34 8.91-3.348 11.592h-14.7c-.008-2.681-.503-7.322-3.349-11.592-3.752-5.627-3.828-10.366-3.828-10.41 0-8.027 6.51-14.564 14.527-14.61 8.017.046 14.526 6.582 14.526 14.606 0 .047-.075 4.786-3.828 10.414zm-10.509 28.5c-1.643 0-3.054-1.249-3.712-3.035h7.424c-.657 1.787-2.068 3.035-3.712 3.035zm-7.65-11.558v-1.151c0-.64.008-1.191.022-1.7h14.876c.02.628.024 1.221.025 1.714v1.138H30.316zm14.924 2.5l.001 2.547H30.316v-2.546H45.24zm-.619-45.489a16.981 16.981 0 0 0-6.993-1.472c-9.328.125-16.878 7.752-16.878 17.11 0 .221.048 5.498 4.247 11.797 2.976 4.463 3.018 9.442 2.9 11.375-.057.878-.08 1.813-.08 3.029v7.447c0 .69.558 1.25 1.25 1.25h2.388c.135.943.408 1.83.804 2.628 1.52 3.89 6.125 5.893 9.048 5.893 3.248 0 5.935-2.864 6.354-6.56l2.171.07c.282 0 .55-.11.747-.31a1.05 1.05 0 0 0 .31-.746l-.005-7.436c0-1.189-.025-2.15-.079-3.027-.12-1.953-.077-6.986 2.93-11.495 4.166-6.252 4.215-11.47 4.215-11.69 0-7.331-6.175-14.953-13.329-17.863z"
+    })));
+}

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

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

package/dist/components/pictogram/components/informative/loop-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 LoopPictogram({ mode ='duo' , viewBoxWidth =78 , viewBoxHeight =78 , 'aria-label': ariaLabel = 'Loop' , 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.078C18.006 66.3 28.039 72.25 39.442 72.25c17.792 0 32.267-14.475 32.267-32.267a32.095 32.095 0 0 0-6.272-19.088"
+    }), React.createElement("path", {
+        className: fill({
+            mode,
+            highlight: true
+        }),
+        fillRule: "nonzero",
+        d: "M39 19c10.217 0 18.5 8.283 18.5 18.5 0 2.564-.523 5.057-1.522 7.358l-.44.988 6.743-2.724 1.136 2.813-10.071 4.068a1.591 1.591 0 0 1-2.01-.748l-.06-.132-4.068-10.069 2.813-1.136 2.724 6.744c.104-.19.208-.394.312-.612A15.497 15.497 0 0 0 54.5 37.5C54.5 28.94 47.56 22 39 22c-1.656 0-3.272.26-4.801.757l-1.176-2.77A18.496 18.496 0 0 1 39 19zm-12.919 8.364l.06.131 4.068 10.07-2.812 1.136-2.724-6.744c-.104.19-.209.393-.312.612a15.497 15.497 0 0 0-1.444 6.55c0 8.56 6.94 15.5 15.5 15.5a15.5 15.5 0 0 0 4.962-.81l1.175 2.767a18.49 18.49 0 0 1-6.137 1.043c-10.217 0-18.5-8.283-18.5-18.5 0-2.564.523-5.057 1.522-7.359l.44-.987-6.743 2.724L14 30.684l10.072-4.068a1.592 1.592 0 0 1 1.938.624l.071.124z"
+    })));
+}

package/dist/components/pictogram/components/informative/medicare-card-pictogram.d.ts

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

package/dist/components/pictogram/components/informative/medicare-card-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 MedicareCardPictogram({ mode ='duo' , viewBoxWidth =78 , viewBoxHeight =78 , 'aria-label': ariaLabel = 'Medicare card' , 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: "M59.9678,30.8779 L35.4078,30.8779 L37.7828,24.3259 C38.0988,23.4569 38.9238,22.8779 39.8498,22.8779 L64.4068,22.8779 L62.0318,29.4309 C61.7178,30.2989 60.8928,30.8779 59.9678,30.8779"
+    }), React.createElement("polygon", {
+        className: fill({
+            mode,
+            outline: true
+        }),
+        points: "17.385 44.555 50.385 44.555 50.385 41.555 17.385 41.555"
+    }), React.createElement("polygon", {
+        className: fill({
+            mode,
+            outline: true
+        }),
+        points: "10.385 51.544 46.385 51.544 46.385 48.544 10.385 48.544"
+    }), React.createElement("path", {
+        className: fill({
+            mode,
+            outline: true
+        }),
+        d: "M68.9307,56.3857 C68.9307,57.6737 67.8827,58.7207 66.5957,58.7207 L8.8347,58.7207 C7.5477,58.7207 6.4997,57.6737 6.4997,56.3857 L6.4997,19.8347 C6.4997,18.5477 7.5477,17.4997 8.8347,17.4997 L66.5957,17.4997 C67.8827,17.4997 68.9307,18.5477 68.9307,19.8347 L68.9307,56.3857 Z M73.3007,19.6017 C71.5547,17.0367 68.7847,15.5127 68.7847,15.5127 C68.7847,15.5127 68.7767,15.5327 68.7727,15.5417 C68.1157,15.2067 67.3827,14.9997 66.5957,14.9997 L8.8347,14.9997 C6.1687,14.9997 3.9997,17.1687 3.9997,19.8347 L3.9997,56.3857 C3.9997,57.0577 4.1397,57.6977 4.3887,58.2807 C4.4177,58.4727 4.5307,58.7317 4.7727,59.0907 C6.5167,61.6717 9.3077,63.2067 9.3077,63.2067 C9.3077,63.2067 9.3137,63.1917 9.3157,63.1877 C10.0047,63.5667 10.7847,63.8027 11.6257,63.8027 L69.3857,63.8027 C72.0517,63.8027 74.2207,61.6337 74.2207,58.9677 L74.2207,22.4167 C74.2207,21.3647 73.8737,20.3967 73.3007,19.6017 L73.3007,19.6017 Z"
+    })));
+}

package/dist/components/pictogram/components/informative/mobile-device-pictogram.d.ts

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

package/dist/components/pictogram/components/informative/mobile-device-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 MobileDevicePictogram({ mode ='duo' , viewBoxWidth =78 , viewBoxHeight =78 , 'aria-label': ariaLabel = 'Mobile device' , 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: "M41.8564,62.8135 C41.8564,65.1335 39.9754,67.0155 37.6554,67.0155 C35.3354,67.0155 33.4544,65.1335 33.4544,62.8135 C33.4544,60.4935 35.3354,58.6125 37.6554,58.6125 C39.9754,58.6125 41.8564,60.4935 41.8564,62.8135"
+    }), React.createElement("path", {
+        className: fill({
+            mode,
+            outline: true
+        }),
+        d: "M57.2051,67.753 C57.2051,69.041 56.1571,70.088 54.8701,70.088 L20.7571,70.088 C19.4701,70.088 18.4221,69.041 18.4221,67.753 L18.4221,6.836 C18.4221,5.548 19.4701,4.5 20.7571,4.5 L54.8701,4.5 C56.1571,4.5 57.2051,5.548 57.2051,6.836 L57.2051,67.753 Z M61.6581,7.546 C61.6651,7.544 61.6841,7.536 61.6841,7.536 C61.6841,7.536 60.2381,4.698 57.7131,2.874 C57.7011,2.865 57.6921,2.861 57.6811,2.853 C57.6511,2.832 57.6201,2.815 57.5901,2.795 C57.3791,2.652 57.2021,2.557 57.0581,2.505 C56.4171,2.192 55.7081,2 54.9481,2 L20.8351,2 C18.1691,2 16.0001,4.169 16.0001,6.836 L16.0001,67.753 C16.0001,68.566 16.2141,69.324 16.5711,69.993 C16.5671,69.995 16.5521,70.001 16.5521,70.001 C16.5521,70.001 17.8271,72.454 20.0561,74.249 C20.9071,75.027 22.0271,75.514 23.2721,75.514 L57.3861,75.514 C60.0521,75.514 62.2211,73.345 62.2211,70.679 L62.2211,9.762 C62.2211,8.959 62.0051,8.213 61.6581,7.546 L61.6581,7.546 Z"
+    }), React.createElement("path", {
+        className: fill({
+            mode,
+            outline: true
+        }),
+        d: "M24.377,53.2562 L51.407,53.2562 L51.407,10.5762 L24.377,10.5762 L24.377,53.2562 Z M52.024,8.0762 L23.603,8.0762 C22.608,8.0762 21.798,8.8862 21.798,9.8802 L21.798,53.9522 C21.798,54.9462 22.608,55.7562 23.603,55.7562 L52.024,55.7562 C53.019,55.7562 53.829,54.9462 53.829,53.9522 L53.829,9.8802 C53.829,8.8862 53.019,8.0762 52.024,8.0762 L52.024,8.0762 Z"
+    })));
+}

package/dist/components/pictogram/components/informative/money-in-pictogram.d.ts

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

package/dist/components/pictogram/components/informative/money-in-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 MoneyInPictogram({ mode ='duo' , viewBoxWidth =78 , viewBoxHeight =78 , 'aria-label': ariaLabel = 'Money in' , 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: "M65.8799,20.77 C60.1389,11.822 50.1089,5.875 38.7109,5.875 C27.2289,5.875 17.1349,11.908 11.4139,20.966 L13.2209,22.786 C18.4399,14.158 27.9119,8.377 38.7109,8.377 C55.1239,8.377 68.4779,21.73 68.4779,38.144 C68.4779,54.558 55.1239,67.912 38.7109,67.912 C28.0959,67.912 18.7659,62.322 13.4939,53.936 L11.7039,55.739 C12.0309,56.239 12.3559,56.741 12.7089,57.221 C18.4489,66.175 28.4819,72.125 39.8849,72.125 C57.6769,72.125 72.1519,57.65 72.1519,39.858 C72.1519,32.72 69.8179,26.12 65.8799,20.77"
+    }), React.createElement("path", {
+        className: fill({
+            mode,
+            outline: true
+        }),
+        d: "M5.9863,23.8462 L5.9863,53.8832 C5.9863,54.1452 6.0913,54.3942 6.2733,54.5782 C6.6553,54.9642 7.2733,54.9642 7.6543,54.5782 L22.5603,39.5592 C22.9423,39.1762 22.9423,38.5532 22.5603,38.1682 L7.6543,23.1492 C7.4703,22.9642 7.2243,22.8622 6.9653,22.8622 C6.4243,22.8622 5.9863,23.3032 5.9863,23.8462"
+    }), React.createElement("path", {
+        className: fill({
+            mode,
+            highlight: true
+        }),
+        d: "M42.8447,46.6279 C42.3677,47.1899 41.7737,47.5779 41.0717,47.8049 L41.0717,40.6979 C41.9247,41.0129 42.5727,41.4199 42.9877,41.9299 C43.4907,42.5469 43.7417,43.2819 43.7417,44.1349 C43.7417,45.0899 43.4437,45.9199 42.8447,46.6279 M35.8927,32.8389 C35.4857,32.2599 35.2827,31.6319 35.2827,30.9579 C35.2827,30.2189 35.5047,29.5439 35.9497,28.9329 C36.3477,28.3879 36.8727,27.9929 37.5127,27.7319 L37.5127,34.1269 C36.8057,33.7859 36.2597,33.3599 35.8927,32.8389 M46.7597,38.3779 C45.7217,37.1419 43.8187,36.1259 41.0717,35.3219 L41.0717,28.0179 C41.9707,28.5979 42.5627,29.4939 42.8067,30.7469 L47.6387,30.1169 C47.3077,28.2069 46.5427,26.6829 45.3467,25.5439 C44.2657,24.5139 42.8277,23.8709 41.0717,23.5739 L41.0717,21.5799 L40.5147,21.5799 L37.7447,21.5799 L37.5127,21.5799 L37.5127,23.5119 C35.4357,23.7639 33.7517,24.5589 32.4837,25.9249 C31.1657,27.3449 30.5077,29.0989 30.5077,31.1869 C30.5077,33.2489 31.0897,35.0029 32.2547,36.4479 C33.3817,37.8469 35.1387,38.8989 37.5127,39.6119 L37.5127,47.5549 C36.9177,47.2209 36.3687,46.7359 35.8737,46.0829 C35.3137,45.3449 34.9317,44.4659 34.7287,43.4469 L29.7427,43.9819 C30.1247,46.4899 31.0037,48.4319 32.3787,49.8069 C33.7027,51.1309 35.4207,51.9289 37.5127,52.2259 L37.5127,55.7469 L37.7447,55.7469 L40.5147,55.7469 L41.0717,55.7469 L41.0717,52.0759 C43.2857,51.6599 45.0427,50.7299 46.3297,49.2729 C47.7237,47.6929 48.4207,45.7519 48.4207,43.4469 C48.4207,41.3849 47.8667,39.6939 46.7597,38.3779"
+    })));
+}

package/dist/components/pictogram/components/informative/money-out-pictogram.d.ts

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

package/dist/components/pictogram/components/informative/money-out-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 MoneyOutPictogram({ mode ='duo' , viewBoxWidth =78 , viewBoxHeight =78 , 'aria-label': ariaLabel = 'Money out' , 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: "M63.5,54.6001 C58.16,62.6171 49.043,67.9121 38.711,67.9121 C22.297,67.9121 8.943,54.5581 8.943,38.1441 C8.943,21.7301 22.297,8.3771 38.711,8.3771 C50.842,8.3771 61.295,15.6751 65.927,26.1091 L68.458,24.8951 C67.699,23.4541 66.84,22.0731 65.88,20.7701 C60.139,11.8221 50.109,5.8751 38.711,5.8751 C20.919,5.8751 6.443,20.3501 6.443,38.1431 C6.443,45.2761 8.773,51.8731 12.709,57.2211 C18.449,66.1751 28.481,72.1251 39.885,72.1251 C51.347,72.1251 61.425,66.1131 67.15,57.0811 L63.5,54.6001 Z"
+    }), React.createElement("path", {
+        className: fill({
+            mode,
+            outline: true
+        }),
+        d: "M54.1396,23.9019 L54.1396,53.9389 C54.1396,54.2009 54.2436,54.4499 54.4266,54.6329 C54.8086,55.0199 55.4266,55.0199 55.8076,54.6329 L70.7136,39.6149 C71.0956,39.2319 71.0956,38.6089 70.7136,38.2239 L55.8076,23.2049 C55.6236,23.0199 55.3766,22.9179 55.1176,22.9179 C54.5776,22.9179 54.1396,23.3589 54.1396,23.9019"
+    }), React.createElement("path", {
+        className: fill({
+            mode,
+            highlight: true
+        }),
+        d: "M39.8428,46.6279 C39.3658,47.1899 38.7718,47.5779 38.0698,47.8049 L38.0698,40.6979 C38.9228,41.0129 39.5708,41.4199 39.9858,41.9299 C40.4888,42.5469 40.7398,43.2819 40.7398,44.1349 C40.7398,45.0899 40.4418,45.9199 39.8428,46.6279 M32.8908,32.8389 C32.4838,32.2599 32.2798,31.6319 32.2798,30.9579 C32.2798,30.2189 32.5028,29.5439 32.9478,28.9329 C33.3458,28.3879 33.8708,27.9929 34.5108,27.7319 L34.5108,34.1269 C33.8038,33.7859 33.2578,33.3599 32.8908,32.8389 M43.7578,38.3779 C42.7198,37.1419 40.8168,36.1259 38.0698,35.3219 L38.0698,28.0179 C38.9688,28.5979 39.5608,29.4939 39.8048,30.7469 L44.6358,30.1169 C44.3048,28.2069 43.5408,26.6829 42.3448,25.5439 C41.2628,24.5139 39.8248,23.8709 38.0698,23.5739 L38.0698,21.5799 L37.5128,21.5799 L34.7428,21.5799 L34.5108,21.5799 L34.5108,23.5119 C32.4338,23.7639 30.7498,24.5589 29.4818,25.9249 C28.1638,27.3449 27.5048,29.0989 27.5048,31.1869 C27.5048,33.2489 28.0868,35.0029 29.2518,36.4479 C30.3798,37.8469 32.1368,38.8989 34.5108,39.6119 L34.5108,47.5549 C33.9158,47.2209 33.3668,46.7359 32.8718,46.0829 C32.3118,45.3449 31.9298,44.4659 31.7258,43.4469 L26.7408,43.9819 C27.1228,46.4899 28.0018,48.4319 29.3768,49.8069 C30.7008,51.1309 32.4188,51.9289 34.5108,52.2259 L34.5108,55.7469 L34.7428,55.7469 L37.5128,55.7469 L38.0698,55.7469 L38.0698,52.0759 C40.2838,51.6599 42.0398,50.7299 43.3268,49.2729 C44.7218,47.6929 45.4188,45.7519 45.4188,43.4469 C45.4188,41.3849 44.8648,39.6939 43.7578,38.3779"
+    })));
+}

package/dist/components/pictogram/components/informative/movie-tickets-pictogram.d.ts

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

package/dist/components/pictogram/components/informative/movie-tickets-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 MovieTicketsPictogram({ mode ='duo' , viewBoxWidth =78 , viewBoxHeight =78 , 'aria-label': ariaLabel = 'Movie tickets' , 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: "M40.891 24.223l3.598-6.217c.112-.195.407-.137.44.085l1.033 7.108a.239.239 0 0 0 .185.198l7.025 1.5a.237.237 0 0 1 .055.445l-6.44 3.179a.238.238 0 0 0-.132.238l.743 7.144a.236.236 0 0 1-.404.19L41.98 32.95a.236.236 0 0 0-.266-.051l-6.566 2.914a.236.236 0 0 1-.305-.326l3.342-6.36a.235.235 0 0 0-.034-.267l-4.8-5.344a.237.237 0 0 1 .216-.392l7.08 1.214a.236.236 0 0 0 .245-.115"
+    }), React.createElement("polygon", {
+        className: fill({
+            mode,
+            outline: true
+        }),
+        points: "27.249 52.284 33.16 56.902 34.699 54.931 28.788 50.314"
+    }), React.createElement("polygon", {
+        className: fill({
+            mode,
+            outline: true
+        }),
+        points: "18.805 45.689 24.716 50.306 26.255 48.336 20.344 43.719"
+    }), React.createElement("path", {
+        className: fill({
+            mode,
+            outline: true
+        }),
+        d: "M39.005 58.295l-1.773-1.385-1.54 1.97 1.774 1.386-8.493 10.873-5.142-4.017c2.725-3.54 2.085-8.64-1.441-11.395-3.528-2.756-8.632-2.141-11.406 1.36l-4.979-3.89 8.494-10.872 1.773 1.386 1.539-1.97-1.774-1.385L42.088 7.005l22.968 17.94-26.051 33.35zM51.397 5.024a1.252 1.252 0 0 0-1.735.047l-2.6 2.647-4.42-3.452a1.25 1.25 0 0 0-1.755.215L3.265 52.645a1.25 1.25 0 0 0 .216 1.754l7.036 5.497a1.251 1.251 0 0 0 1.872-.397c.169-.316.342-.587.53-.827a5.655 5.655 0 0 1 7.931-.975 5.659 5.659 0 0 1 .975 7.932c-.188.24-.408.474-.675.715a1.248 1.248 0 0 0 .069 1.912l7.2 5.623a1.246 1.246 0 0 0 1.754-.216l44.637-45.5a1.251 1.251 0 0 0-.049-1.798L51.397 5.024z"
+    })));
+}

package/dist/components/pictogram/components/informative/nest-egg-pictogram.d.ts

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