@westpac/ui 0.7.0 → 0.7.1

package/dist/components/flexi-cell/components/flexi-cell-button/flexi-cell-button.component.d.ts

@@ -1,3 +1,6 @@
 import { type FlexiCellButtonProps } from './flexi-cell-button.types.js';
 /** Flexi Cell Button: Flexi Cell Button */
-export declare const FlexiCellButton: ({ className, ...props }: FlexiCellButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const FlexiCellButton: {
+    ({ className, ...props }: FlexiCellButtonProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/flexi-cell/components/flexi-cell-button/flexi-cell-button.component.js

@@ -23,3 +23,4 @@ export const FlexiCellButton = ({ className , ...props })=>{
         look: "link"
     }, props));
 };
+FlexiCellButton.displayName = 'FlexiCell.Button';

package/dist/components/flexi-cell/components/flexi-cell-circle/flexi-cell-circle.component.d.ts

@@ -1,3 +1,6 @@
 import { FlexiCellCircleProps } from './flexi-cell-circle.types.js';
 /** Flexi Cell Circle: Flexi Cell Circle */
-export declare const FlexiCellCircle: ({ className, ...props }: FlexiCellCircleProps) => import("react/jsx-runtime").JSX.Element;
+export declare const FlexiCellCircle: {
+    ({ className, ...props }: FlexiCellCircleProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/flexi-cell/components/flexi-cell-circle/flexi-cell-circle.component.js

@@ -22,3 +22,4 @@ export const FlexiCellCircle = ({ className , ...props })=>{
         })
     }, props));
 };
+FlexiCellCircle.displayName = 'FlexiCell.Circle';

package/dist/components/flexi-cell/components/flexi-cell-footer/flexi-cell-footer.component.d.ts

@@ -1,3 +1,6 @@
 import { type FlexiCellFooterProps } from './flexi-cell-footer.types.js';
 /** Flexi Cell Footer: Flexi Cell Footer */
-export declare const FlexiCellFooter: ({ children, className, tag: Tag, ...props }: FlexiCellFooterProps) => import("react/jsx-runtime").JSX.Element;
+export declare const FlexiCellFooter: {
+    ({ children, className, tag: Tag, ...props }: FlexiCellFooterProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/flexi-cell/components/flexi-cell-footer/flexi-cell-footer.component.js

@@ -21,3 +21,4 @@ export const FlexiCellFooter = ({ children , className , tag: Tag = 'div' , ...p
         })
     }), children);
 };
+FlexiCellFooter.displayName = 'FlexiCell.Footer';

package/dist/components/flexi-cell/components/flexi-cell-hint/flexi-cell-hint.component.d.ts

@@ -1,3 +1,6 @@
 import { FlexiCellHintProps } from './flexi-cell-hint.types.js';
 /** Flexi Cell Hint: Flexi Cell Hint */
-export declare const FlexiCellHint: ({ children, tag: Tag, className, truncateText, ...props }: FlexiCellHintProps) => import("react/jsx-runtime").JSX.Element;
+export declare const FlexiCellHint: {
+    ({ children, tag: Tag, className, truncateText, ...props }: FlexiCellHintProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/flexi-cell/components/flexi-cell-hint/flexi-cell-hint.component.js

@@ -22,3 +22,4 @@ export const FlexiCellHint = ({ children , tag: Tag = 'p' , className , truncate
         })
     }), children);
 };
+FlexiCellHint.displayName = 'FlexiCell.Hint';

package/dist/components/flexi-cell/components/flexi-cell-hint/flexi-cell-hint.types.d.ts

@@ -1,6 +1,4 @@
 import { type HTMLAttributes, type ReactNode } from 'react';
-import { VariantProps } from 'tailwind-variants';
-import { styles } from './flexi-cell-hint.styles.js';
 export type FlexiCellHintProps = {
     /**
      * Children
@@ -14,4 +12,4 @@ export type FlexiCellHintProps = {
      * Define if it is going to truncate the text
      */
     truncateText?: boolean;
-} & HTMLAttributes<HTMLOrSVGElement> & VariantProps<typeof styles>;
+} & HTMLAttributes<HTMLOrSVGElement>;

package/dist/components/flexi-cell/components/flexi-cell-label/flexi-cell-label.component.d.ts

@@ -1,3 +1,6 @@
 import { FlexiCellLabelProps } from './flexi-cell-label.types.js';
 /** Flexi Cell Label: Flexi Cell Label */
-export declare const FlexiCellLabel: ({ children, tag: Tag, truncateText, className, ...props }: FlexiCellLabelProps) => import("react/jsx-runtime").JSX.Element;
+export declare const FlexiCellLabel: {
+    ({ children, tag: Tag, truncateText, className, ...props }: FlexiCellLabelProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/flexi-cell/components/flexi-cell-label/flexi-cell-label.component.js

@@ -22,3 +22,4 @@ export const FlexiCellLabel = ({ children , tag: Tag = 'div' , truncateText =fal
         })
     }, props), children);
 };
+FlexiCellLabel.displayName = 'FlexiCell.Label';

package/dist/components/flexi-cell/components/flexi-cell-label/flexi-cell-label.types.d.ts

@@ -1,6 +1,4 @@
 import { CSSProperties, type HTMLAttributes, type ReactNode } from 'react';
-import { type VariantProps } from 'tailwind-variants';
-import { styles } from './flexi-cell-label.styles.js';
 export type FlexiCellLabelProps = {
     /**
      * Children attribute
@@ -18,4 +16,4 @@ export type FlexiCellLabelProps = {
      * Define if it is going to truncate the text
      */
     truncateText?: boolean;
-} & HTMLAttributes<HTMLOrSVGElement> & VariantProps<typeof styles>;
+} & HTMLAttributes<HTMLOrSVGElement>;

package/dist/components/flexi-cell/flexi-cell.component.js

@@ -1,3 +1,4 @@
+'use client';
 function _extends() {
     _extends = Object.assign || function(target) {
         for(var i = 1; i < arguments.length; i++){

package/dist/components/flexi-cell/flexi-cell.types.d.ts

@@ -1,6 +1,4 @@
 import { CSSProperties, type HTMLAttributes, type ReactNode } from 'react';
-import { type VariantProps } from 'tailwind-variants';
-import { styles } from './flexi-cell.styles.js';
 type BaseFlexiCellProps = {
     /**
      * Renders an element on the right
@@ -61,5 +59,5 @@ type FlexiCellAsAllOtherTagsProps<Tag> = {
     href?: never;
     tag?: Tag;
 };
-export type FlexiCellProps<Tag extends keyof Omit<JSX.IntrinsicElements, 'a'> = keyof Omit<JSX.IntrinsicElements, 'a'>> = (FlexiCellAsLinkProps | FlexiCellAsAllOtherTagsProps<Tag>) & BaseFlexiCellProps & VariantProps<typeof styles> & HTMLAttributes<Element>;
+export type FlexiCellProps<Tag extends keyof Omit<JSX.IntrinsicElements, 'a'> = keyof Omit<JSX.IntrinsicElements, 'a'>> = (FlexiCellAsLinkProps | FlexiCellAsAllOtherTagsProps<Tag>) & BaseFlexiCellProps & HTMLAttributes<Element>;
 export {};

package/dist/components/form/components/form-chit-chat/form-chit-chat.types.d.ts

@@ -1,9 +1,7 @@
 import { HTMLAttributes } from 'react';
-import { type VariantProps } from 'tailwind-variants';
-import { styles } from './form-chit-chat.styles.js';
 export type FormChitChatProps = {
     /**
      * Tag to render
      */
     tag?: keyof JSX.IntrinsicElements;
-} & VariantProps<typeof styles> & HTMLAttributes<Element>;
+} & HTMLAttributes<Element>;

package/dist/components/form/components/form-group/form-group.types.d.ts

@@ -1,9 +1,7 @@
 import { HTMLAttributes } from 'react';
-import { type VariantProps } from 'tailwind-variants';
-import { styles } from './form-group.styles.js';
 export type FormGroupProps = {
     /**
      * Tag to render
      */
     tag?: keyof JSX.IntrinsicElements;
-} & Omit<VariantProps<typeof styles>, 'inline' | 'spacing'> & HTMLAttributes<Element>;
+} & HTMLAttributes<Element>;

package/dist/components/form/components/form-section/form-section.types.d.ts

@@ -1,9 +1,15 @@
 import { HTMLAttributes } from 'react';
 import { type VariantProps } from 'tailwind-variants';
 import { styles } from './form-section.styles.js';
+type Variants = VariantProps<typeof styles>;
 export type FormSectionProps = {
+    /**
+     * Remove padding
+     */
+    noPadding?: Variants['noPadding'];
     /**
      * Tag to render
      */
     tag?: keyof JSX.IntrinsicElements;
-} & VariantProps<typeof styles> & HTMLAttributes<Element>;
+} & HTMLAttributes<Element>;
+export {};

package/dist/components/form/form.component.js

@@ -1,3 +1,4 @@
+'use client';
 function _extends() {
     _extends = Object.assign || function(target) {
         for(var i = 1; i < arguments.length; i++){

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

@@ -1,7 +1,16 @@
 import { FormHTMLAttributes } from 'react';
 export type FormContextValue = {
+    /**
+     * Whether form is inline
+     */
     inline?: boolean;
+    /**
+     * Size of Form
+     */
     size?: 'small' | 'medium' | 'large';
+    /**
+     * Spacing of Form
+     */
     spacing?: 'medium' | 'large';
 };
 export type FormProps = FormContextValue & FormHTMLAttributes<HTMLFormElement>;

package/dist/components/form-hint/form-hint.types.d.ts

@@ -1,6 +1,4 @@
 import { HTMLAttributes } from 'react';
-import { type VariantProps } from 'tailwind-variants';
-import { styles } from './form-hint.styles.js';
 export type FormHintProps = {
     /**
      * spacing
@@ -10,4 +8,4 @@ export type FormHintProps = {
      * Tag to render
      */
     tag?: keyof JSX.IntrinsicElements;
-} & Omit<VariantProps<typeof styles>, 'spacing'> & HTMLAttributes<Element>;
+} & HTMLAttributes<Element>;

package/dist/components/form-label/form-label.types.d.ts

@@ -1,6 +1,7 @@
 import { HTMLAttributes, ReactNode } from 'react';
 import { type VariantProps } from 'tailwind-variants';
 import { styles } from './form-label.styles.js';
+type Variants = VariantProps<typeof styles>;
 export type FormLabelProps = {
     /**
      * Children
@@ -11,6 +12,10 @@ export type FormLabelProps = {
      *
      */
     htmlFor?: string;
+    /**
+     * Spacing
+     */
+    spacing?: Variants['spacing'];
     /**
      * Enable ‘screen reader only’ mode
      */
@@ -18,9 +23,10 @@ export type FormLabelProps = {
     /**
      * Sub-label mode (smaller label text size)
      */
-    subLabel?: boolean;
+    subLabel?: Variants['subLabel'];
     /**
      * Component tag
      */
     tag?: 'label' | 'legend';
-} & VariantProps<typeof styles> & HTMLAttributes<Element>;
+} & HTMLAttributes<Element>;
+export {};

package/dist/components/grid/components/container/container.types.d.ts

@@ -1,6 +1,4 @@
 import { HTMLAttributes } from 'react';
-import { type VariantProps } from 'tailwind-variants';
-import { styles } from './container.styles.js';
 export type ContainerProps = {
     /**
      * Enable fixed width container mode. In this mode the container width is fixed at each breakpoint.
@@ -10,4 +8,4 @@ export type ContainerProps = {
      * Tag to render
      */
     tag?: keyof JSX.IntrinsicElements;
-} & VariantProps<typeof styles> & HTMLAttributes<Element>;
+} & HTMLAttributes<Element>;

package/dist/components/grid/components/item/item.types.d.ts

@@ -1,9 +1,19 @@
 import { HTMLAttributes } from 'react';
 import { type VariantProps } from 'tailwind-variants';
 import { styles } from './item.styles.js';
+type Variants = VariantProps<typeof styles>;
 export type ItemProps = {
+    /**
+     * Controls width of item based on amount of grid spaces to cover
+     */
+    span?: Variants['span'];
+    /**
+     * Position item should start in grid
+     */
+    start?: Variants['start'];
     /**
      * Tag to render
      */
     tag?: keyof JSX.IntrinsicElements;
-} & VariantProps<typeof styles> & HTMLAttributes<Element>;
+} & HTMLAttributes<Element>;
+export {};

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

@@ -1,9 +1,7 @@
 import { HTMLAttributes } from 'react';
-import { type VariantProps } from 'tailwind-variants';
-import { styles } from './grid.styles.js';
 export type GridProps = {
     /**
      * Tag to render
      */
     tag?: keyof JSX.IntrinsicElements;
-} & VariantProps<typeof styles> & HTMLAttributes<Element>;
+} & HTMLAttributes<Element>;

package/dist/components/icon/components/credit-cards-icon.d.ts

@@ -0,0 +1,2 @@
+import { type IconProps } from '../icon.types.js';
+export declare function CreditCardsIcon({ look, 'aria-label': ariaLabel, copyrightYear, ...props }: IconProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/icon/components/credit-cards-icon.js

@@ -0,0 +1,38 @@
+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, { Fragment } from 'react';
+import { Icon } from '../icon.component.js';
+export function CreditCardsIcon({ look ='filled' , 'aria-label': ariaLabel = 'Credit Cards' , copyrightYear ='2023' , ...props }) {
+    return React.createElement(Icon, _extends({
+        "aria-label": ariaLabel,
+        copyrightYear: copyrightYear
+    }, props), look === 'filled' ? React.createElement(Fragment, null, React.createElement("path", {
+        d: "M22 2H5.99999C4.88999 2 4.00999 2.89 4.00999 4L4.00916 5H5.99999V4H22V16H21V18H22C23.11 18 24 17.11 24 16V4C24 2.89 23.11 2 22 2Z",
+        fill: "currentColor"
+    }), React.createElement("path", {
+        fillRule: "evenodd",
+        clipRule: "evenodd",
+        d: "M18 6H2C0.89 6 0.01 6.89 0.01 8L0 20C0 21.11 0.89 22 2 22H18C19.11 22 20 21.11 20 20V8C20 6.89 19.11 6 18 6ZM1 10H19V12H1V10Z",
+        fill: "currentColor"
+    })) : React.createElement(Fragment, null, React.createElement("path", {
+        d: "M6 2H22C23.11 2 24 2.89 24 4V16C24 17.11 23.11 18 22 18H21V16H22V4H6V5H4.00917L4.01 4C4.01 2.89 4.89 2 6 2Z",
+        fill: "currentColor"
+    }), React.createElement("path", {
+        fillRule: "evenodd",
+        clipRule: "evenodd",
+        d: "M2 6H18C19.11 6 20 6.89 20 8V20C20 21.11 19.11 22 18 22H2C0.89 22 0 21.11 0 20L0.00999999 8C0.00999999 6.89 0.89 6 2 6ZM2 20H18V12H2V20ZM2 10V8H18V10H2Z",
+        fill: "currentColor"
+    })));
+}

package/dist/components/icon/components/exit-icon.js

@@ -19,10 +19,10 @@ export function ExitIcon({ 'aria-label': ariaLabel = 'Exit' , copyrightYear ='20
         "aria-label": ariaLabel,
         copyrightYear: copyrightYear
     }, props), React.createElement("path", {
-        d: "M0 12C0 5.373 5.37225 0 12 0V2C6.47714 2 2 6.47714 2 12C2 17.5229 6.47714 22 12 22C17.5229 22 22 17.5229 22 12H24C24 18.627 18.6278 24 12 24C5.37225 24 0 18.627 0 12Z",
+        d: "M3.51677 4.50981C8.20277 -0.176183 15.8008 -0.176713 20.4873 4.50981L19.0731 5.92403C15.1679 2.01878 8.83623 2.01878 4.93098 5.92403C1.02573 9.82928 1.02573 16.1609 4.93098 20.0662C8.83623 23.9714 15.1679 23.9714 19.0731 20.0662L20.4873 21.4804C15.8013 26.1664 8.2033 26.1669 3.51677 21.4804C-1.16976 16.7938 -1.16922 9.19581 3.51677 4.50981Z",
         fill: "currentColor"
     }), React.createElement("path", {
-        d: "M22.0144 8V3.41682L12.4142 13.017L11 11.6028L20.6028 2H16.0144V0H24.0144V8H22.0144Z",
+        d: "M16.9117 17.2479L20.1525 14.0071H12L12.0391 12.0071L20.1562 12.0071L16.9118 8.76266L18.326 7.34844L24 13L18.326 18.6621L16.9117 17.2479Z",
         fill: "currentColor"
     }));
 }

package/dist/components/icon/components/office-icon.d.ts

@@ -1,2 +1,2 @@
 import { type IconProps } from '../icon.types.js';
-export declare function OfficeIcon({ 'aria-label': ariaLabel, copyrightYear, ...props }: IconProps): import("react/jsx-runtime").JSX.Element;
+export declare function OfficeIcon({ look, 'aria-label': ariaLabel, copyrightYear, ...props }: IconProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/icon/components/office-icon.js

@@ -12,13 +12,27 @@ function _extends() {
     };
     return _extends.apply(this, arguments);
 }
-import React from 'react';
+import React, { Fragment } from 'react';
 import { Icon } from '../icon.component.js';
-export function OfficeIcon({ 'aria-label': ariaLabel = 'Office' , copyrightYear ='2023' , ...props }) {
+export function OfficeIcon({ look ='filled' , 'aria-label': ariaLabel = 'Office' , copyrightYear ='2023' , ...props }) {
     return React.createElement(Icon, _extends({
         "aria-label": ariaLabel,
         copyrightYear: copyrightYear
-    }, props), React.createElement("path", {
+    }, props), look === 'filled' ? React.createElement("path", {
+        fillRule: "evenodd",
+        clipRule: "evenodd",
+        d: "M14 0L0 4V24H24V6H14V0ZM4 10H10V12H4V10ZM4 14H10V16H4V14ZM10 18H4V20H10V18ZM16 10H20V12H16V10ZM16 14H20V16H16V14ZM20 18H16V20H20V18Z",
+        fill: "currentColor"
+    }) : React.createElement(Fragment, null, React.createElement("path", {
+        d: "M10 10H4V12H10V10Z",
+        fill: "currentColor"
+    }), React.createElement("path", {
+        d: "M10 14H4V16H10V14Z",
+        fill: "currentColor"
+    }), React.createElement("path", {
+        d: "M4 18H10V20H4V18Z",
+        fill: "currentColor"
+    }), React.createElement("path", {
         d: "M20 10H16V12H20V10Z",
         fill: "currentColor"
     }), React.createElement("path", {
@@ -30,7 +44,7 @@ export function OfficeIcon({ 'aria-label': ariaLabel = 'Office' , copyrightYear
     }), React.createElement("path", {
         fillRule: "evenodd",
         clipRule: "evenodd",
-        d: "M14 6H24V24H0V0H14V6ZM14 8H22V22H14V8ZM2 4H6V8H2V4ZM12 4H8V8H12V4ZM2 10H6V14H2V10ZM12 10H8V14H12V10ZM2 16H6V20H2V16ZM12 16H8V20H12V16Z",
+        d: "M14 6V0L0 4V24H24V6H14ZM2 22V5.5086L12 2.65146V22H2ZM14 22V8H22V22H14Z",
         fill: "currentColor"
-    }));
+    })));
 }

package/dist/components/icon/components/pay-to-icon.d.ts

@@ -0,0 +1,2 @@
+import { type IconProps } from '../icon.types.js';
+export declare function PayToIcon({ look, 'aria-label': ariaLabel, copyrightYear, ...props }: IconProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/icon/components/pay-to-icon.js

@@ -0,0 +1,34 @@
+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 { Icon } from '../icon.component.js';
+export function PayToIcon({ look ='filled' , 'aria-label': ariaLabel = 'Pay To' , copyrightYear ='2023' , ...props }) {
+    return React.createElement(Icon, _extends({
+        "aria-label": ariaLabel,
+        copyrightYear: copyrightYear
+    }, props), look === 'filled' ? React.createElement("g", {
+        id: "Size=Md-24px, Style=Filled"
+    }, React.createElement("path", {
+        id: "pay-to",
+        d: "M18.5761 0H5.42394C3.9858 0.00123817 2.60692 0.573085 1.59 1.59C0.573085 2.60692 0.00123817 3.9858 0 5.42394V18.5807C0 20.0193 0.571449 21.3989 1.58864 22.416C2.60582 23.4332 3.98542 24.0047 5.42394 24.0047H18.5761C20.0146 24.0047 21.3942 23.4332 22.4114 22.416C23.4285 21.3989 24 20.0193 24 18.5807V5.42862C24.0006 4.71594 23.8608 4.01013 23.5885 3.35153C23.3162 2.69293 22.9167 2.09444 22.413 1.59029C21.9093 1.08613 21.3112 0.686191 20.6528 0.41332C19.9944 0.140449 19.2887 -2.64817e-07 18.5761 0ZM13.9517 17.9158C13.3451 17.9245 12.7428 17.8125 12.1799 17.5864C11.617 17.3603 11.1046 17.0245 10.6726 16.5986C10.2406 16.1727 9.89753 15.6652 9.66337 15.1056C9.42922 14.5459 9.30864 13.9453 9.30864 13.3387C9.30864 12.732 9.42922 12.1314 9.66337 11.5718C9.89753 11.0122 10.2406 10.5047 10.6726 10.0788C11.1046 9.65288 11.617 9.31711 12.1799 9.09098C12.7428 8.86485 13.3451 8.75286 13.9517 8.76153H19.1156V7.33915L21.7706 9.54894L19.111 11.7615V10.3092H13.8853C12.2852 10.3092 10.962 11.7391 10.962 13.3382C10.9445 13.7417 11.0089 14.1446 11.1512 14.5226C11.2936 14.9005 11.511 15.2458 11.7903 15.5375C12.0697 15.8292 12.4052 16.0613 12.7766 16.2199C13.1481 16.3785 13.5478 16.4603 13.9517 16.4603C14.3556 16.4603 14.7553 16.3785 15.1267 16.2199C15.4982 16.0613 15.8337 15.8292 16.113 15.5375C16.3924 15.2458 16.6098 14.9005 16.7521 14.5226C16.8945 14.1446 16.9589 13.7417 16.9414 13.3382C16.9327 12.6562 16.7289 11.991 16.3541 11.4211H18.1085C18.3852 12.0224 18.5287 12.6763 18.5293 13.3382C18.5345 13.9408 18.4197 14.5384 18.1915 15.0962C17.9633 15.6539 17.6263 16.1606 17.2002 16.5868C16.7741 17.0129 16.2674 17.3499 15.7096 17.5781C15.1519 17.8062 14.5543 17.9211 13.9517 17.9158ZM7.59258 16.3261C7.95868 16.308 8.3204 16.2384 8.66708 16.1194V17.6923C8.32503 17.8303 7.96124 17.9066 7.59258 17.9177C6.83494 17.9115 6.11066 17.6051 5.5786 17.0657C5.04654 16.5263 4.75013 15.7979 4.75436 15.0402V10.3092H2.9654V8.76153H4.75623V6.79769H6.30954V8.76153H10.5486C9.94358 9.17639 9.42204 9.70143 9.01122 10.3092H6.30954V15.0383C6.31174 15.3785 6.44779 15.7042 6.68826 15.9448C6.92872 16.1854 7.25427 16.3217 7.59445 16.3242L7.59258 16.3261Z",
+        fill: "currentColor"
+    })) : React.createElement("g", {
+        id: "Size=Md-24px, Style=Outlined"
+    }, React.createElement("path", {
+        id: "pay-to",
+        d: "M18.5761 0H5.42394C3.9858 0.00123817 2.60692 0.573085 1.59 1.59C0.573085 2.60692 0.00123817 3.9858 0 5.42394V18.5807C0 20.0193 0.571449 21.3989 1.58864 22.416C2.60582 23.4332 3.98542 24.0047 5.42394 24.0047H18.5761C20.0146 24.0047 21.3942 23.4332 22.4114 22.416C23.4285 21.3989 24 20.0193 24 18.5807V5.42862C24.0006 4.71594 23.8608 4.01013 23.5885 3.35153C23.3162 2.69293 22.9167 2.09444 22.413 1.59029C21.9093 1.08613 21.3112 0.686191 20.6528 0.41332C19.9944 0.140449 19.2887 -2.64817e-07 18.5761 0ZM13.9517 17.9158C13.3451 17.9245 12.7428 17.8125 12.1799 17.5864C11.617 17.3603 11.1046 17.0245 10.6726 16.5986C10.2406 16.1727 9.89753 15.6652 9.66337 15.1056C9.42922 14.5459 9.30864 13.9453 9.30864 13.3387C9.30864 12.732 9.42922 12.1314 9.66337 11.5718C9.89753 11.0122 10.2406 10.5047 10.6726 10.0788C11.1046 9.65288 11.617 9.31711 12.1799 9.09098C12.7428 8.86485 13.3451 8.75286 13.9517 8.76153H19.1156V7.33915L21.7706 9.54894L19.111 11.7615V10.3092H13.8853C12.2852 10.3092 10.962 11.7391 10.962 13.3382C10.9445 13.7417 11.0089 14.1446 11.1512 14.5226C11.2936 14.9005 11.511 15.2458 11.7903 15.5375C12.0697 15.8292 12.4052 16.0613 12.7766 16.2199C13.1481 16.3785 13.5478 16.4603 13.9517 16.4603C14.3556 16.4603 14.7553 16.3785 15.1267 16.2199C15.4982 16.0613 15.8337 15.8292 16.113 15.5375C16.3924 15.2458 16.6098 14.9005 16.7521 14.5226C16.8945 14.1446 16.9589 13.7417 16.9414 13.3382C16.9327 12.6562 16.7289 11.991 16.3541 11.4211H18.1085C18.3852 12.0224 18.5287 12.6763 18.5293 13.3382C18.5345 13.9408 18.4197 14.5384 18.1915 15.0962C17.9633 15.6539 17.6263 16.1606 17.2002 16.5868C16.7741 17.0129 16.2674 17.3499 15.7096 17.5781C15.1519 17.8062 14.5543 17.9211 13.9517 17.9158ZM7.59258 16.3261C7.95868 16.308 8.3204 16.2384 8.66708 16.1194V17.6923C8.32503 17.8303 7.96124 17.9066 7.59258 17.9177C6.83494 17.9115 6.11066 17.6051 5.5786 17.0657C5.04654 16.5263 4.75013 15.7979 4.75436 15.0402V10.3092H2.9654V8.76153H4.75623V6.79769H6.30954V8.76153H10.5486C9.94358 9.17639 9.42204 9.70143 9.01122 10.3092H6.30954V15.0383C6.31174 15.3785 6.44779 15.7042 6.68826 15.9448C6.92872 16.1854 7.25427 16.3217 7.59445 16.3242L7.59258 16.3261Z",
+        fill: "currentColor"
+    })));
+}

package/dist/components/icon/components/tiles-icon.d.ts

@@ -0,0 +1,2 @@
+import { type IconProps } from '../icon.types.js';
+export declare function TilesIcon({ look, 'aria-label': ariaLabel, copyrightYear, ...props }: IconProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/icon/components/tiles-icon.js

@@ -0,0 +1,39 @@
+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, { Fragment } from 'react';
+import { Icon } from '../icon.component.js';
+export function TilesIcon({ look ='filled' , 'aria-label': ariaLabel = 'Tiles' , copyrightYear ='2023' , ...props }) {
+    return React.createElement(Icon, _extends({
+        "aria-label": ariaLabel,
+        copyrightYear: copyrightYear
+    }, props), look === 'filled' ? React.createElement(Fragment, null, React.createElement("path", {
+        d: "M4 2C2.89543 2 2 2.89543 2 4V9C2 10.1046 2.89543 11 4 11H9C10.1046 11 11 10.1046 11 9V4C11 2.89543 10.1046 2 9 2H4Z",
+        fill: "currentColor"
+    }), React.createElement("path", {
+        d: "M4 13C2.89543 13 2 13.8954 2 15V20C2 21.1046 2.89543 22 4 22H9C10.1046 22 11 21.1046 11 20V15C11 13.8954 10.1046 13 9 13H4Z",
+        fill: "currentColor"
+    }), React.createElement("path", {
+        d: "M13 4C13 2.89543 13.8954 2 15 2H20C21.1046 2 22 2.89543 22 4V9C22 10.1046 21.1046 11 20 11H15C13.8954 11 13 10.1046 13 9V4Z",
+        fill: "currentColor"
+    }), React.createElement("path", {
+        d: "M15 13C13.8954 13 13 13.8954 13 15V20C13 21.1046 13.8954 22 15 22H20C21.1046 22 22 21.1046 22 20V15C22 13.8954 21.1046 13 20 13H15Z",
+        fill: "currentColor"
+    })) : React.createElement("path", {
+        fillRule: "evenodd",
+        clipRule: "evenodd",
+        d: "M11 20V15C11 13.8954 10.1046 13 9 13H4C2.89543 13 2 13.8954 2 15V20C2 21.1046 2.89543 22 4 22H9C10.1046 22 11 21.1046 11 20ZM4 4V9H9V4H4ZM4 15V20H9V15H4ZM20 4H15V9H20V4ZM15 15V20H20V15H15ZM2 4C2 2.89543 2.89543 2 4 2H9C10.1046 2 11 2.89543 11 4V9C11 10.1046 10.1046 11 9 11H4C2.89543 11 2 10.1046 2 9V4ZM13 4C13 2.89543 13.8954 2 15 2H20C21.1046 2 22 2.89543 22 4V9C22 10.1046 21.1046 11 20 11H15C13.8954 11 13 10.1046 13 9V4ZM13 15C13 13.8954 13.8954 13 15 13H20C21.1046 13 22 13.8954 22 15V20C22 21.1046 21.1046 22 20 22H15C13.8954 22 13 21.1046 13 20V15Z",
+        fill: "currentColor"
+    }));
+}

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

@@ -28,7 +28,7 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
         primary: string;
         text: string;
     };
-}, undefined, "inline-block rounded transition-colors disabled:pointer-events-none disabled:opacity-50", {
+}, undefined, "inline-block transition-colors disabled:pointer-events-none disabled:opacity-50", {
     responsiveVariants: string[];
 }, {
     size: {

package/dist/components/icon/icon.styles.js

@@ -1,6 +1,6 @@
 import { tv } from 'tailwind-variants';
 export const styles = tv({
-    base: 'inline-block rounded transition-colors disabled:pointer-events-none disabled:opacity-50',
+    base: 'inline-block transition-colors disabled:pointer-events-none disabled:opacity-50',
     variants: {
         size: {
             xsmall: 'h-2 w-2',

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

@@ -1,11 +1,16 @@
 import { type ReactNode, type SVGAttributes } from 'react';
 import { type VariantProps } from 'tailwind-variants';
 import { styles } from './icon.styles.js';
+type Variants = VariantProps<typeof styles>;
 export type IconProps = SVGAttributes<SVGElement> & {
     /**
      * children prop
      */
     children?: ReactNode;
+    /**
+     * Icon color
+     */
+    color?: Variants['color'];
     /**
      * The icon SVG metadata copyright year text
      */
@@ -14,4 +19,9 @@ export type IconProps = SVGAttributes<SVGElement> & {
      * Icon look variation. Defaults to filled
      */
     look?: 'filled' | 'outlined';
-} & VariantProps<typeof styles>;
+    /**
+     * Icon size
+     */
+    size?: Variants['size'];
+};
+export {};

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

@@ -44,6 +44,7 @@ export { CompassIcon } from './components/compass-icon.js';
 export { ContactIcon } from './components/contact-icon.js';
 export { ContentCopyIcon } from './components/content-copy-icon.js';
 export { CreditCardIcon } from './components/credit-card-icon.js';
+export { CreditCardsIcon } from './components/credit-cards-icon.js';
 export { CubeIcon } from './components/cube-icon.js';
 export { CursorArrowClickIcon } from './components/cursor-arrow-click-icon.js';
 export { CursorArrowDoubleclickIcon } from './components/cursor-arrow-doubleclick-icon.js';
@@ -145,6 +146,7 @@ export { PauseIcon } from './components/pause-icon.js';
 export { PawIcon } from './components/paw-icon.js';
 export { PayIcon } from './components/pay-icon.js';
 export { PayIdIcon } from './components/pay-id-icon.js';
+export { PayToIcon } from './components/pay-to-icon.js';
 export { PayToMobileIcon } from './components/pay-to-mobile-icon.js';
 export { PaypassIcon } from './components/paypass-icon.js';
 export { PdfFileIcon } from './components/pdf-file-icon.js';
@@ -201,6 +203,7 @@ export { ThumbDownIcon } from './components/thumb-down-icon.js';
 export { ThumbUpIcon } from './components/thumb-up-icon.js';
 export { TickCircleIcon } from './components/tick-circle-icon.js';
 export { TickIcon } from './components/tick-icon.js';
+export { TilesIcon } from './components/tiles-icon.js';
 export { TransferIcon } from './components/transfer-icon.js';
 export { TransportIcon } from './components/transport-icon.js';
 export { TravelExploreIcon } from './components/travel-explore-icon.js';
@@ -226,11 +229,5 @@ export { WriteIcon } from './components/write-icon.js';
 export { YammerIcon } from './components/yammer-icon.js';
 export { YoutubeIcon } from './components/youtube-icon.js';
 export { ZipFileIcon } from './components/zip-file-icon.js';
-export { BOMLogoIcon } from './components/bom-logo-icon.js';
-export { BSALogoIcon } from './components/bsa-logo-icon.js';
-export { RAMSLogoIcon } from './components/rams-logo-icon.js';
-export { STGLogoIcon } from './components/stg-logo-icon.js';
-export { WBCLogoIcon } from './components/wbc-logo-icon.js';
-export { WBGLogoIcon } from './components/wbg-logo-icon.js';
 export { Icon } from './icon.component.js';
 export { type IconProps } from './icon.types.js';

package/dist/components/icon/index.js

@@ -44,6 +44,7 @@ export { CompassIcon } from './components/compass-icon.js';
 export { ContactIcon } from './components/contact-icon.js';
 export { ContentCopyIcon } from './components/content-copy-icon.js';
 export { CreditCardIcon } from './components/credit-card-icon.js';
+export { CreditCardsIcon } from './components/credit-cards-icon.js';
 export { CubeIcon } from './components/cube-icon.js';
 export { CursorArrowClickIcon } from './components/cursor-arrow-click-icon.js';
 export { CursorArrowDoubleclickIcon } from './components/cursor-arrow-doubleclick-icon.js';
@@ -145,6 +146,7 @@ export { PauseIcon } from './components/pause-icon.js';
 export { PawIcon } from './components/paw-icon.js';
 export { PayIcon } from './components/pay-icon.js';
 export { PayIdIcon } from './components/pay-id-icon.js';
+export { PayToIcon } from './components/pay-to-icon.js';
 export { PayToMobileIcon } from './components/pay-to-mobile-icon.js';
 export { PaypassIcon } from './components/paypass-icon.js';
 export { PdfFileIcon } from './components/pdf-file-icon.js';
@@ -201,6 +203,7 @@ export { ThumbDownIcon } from './components/thumb-down-icon.js';
 export { ThumbUpIcon } from './components/thumb-up-icon.js';
 export { TickCircleIcon } from './components/tick-circle-icon.js';
 export { TickIcon } from './components/tick-icon.js';
+export { TilesIcon } from './components/tiles-icon.js';
 export { TransferIcon } from './components/transfer-icon.js';
 export { TransportIcon } from './components/transport-icon.js';
 export { TravelExploreIcon } from './components/travel-explore-icon.js';
@@ -226,10 +229,4 @@ export { WriteIcon } from './components/write-icon.js';
 export { YammerIcon } from './components/yammer-icon.js';
 export { YoutubeIcon } from './components/youtube-icon.js';
 export { ZipFileIcon } from './components/zip-file-icon.js';
-export { BOMLogoIcon } from './components/bom-logo-icon.js';
-export { BSALogoIcon } from './components/bsa-logo-icon.js';
-export { RAMSLogoIcon } from './components/rams-logo-icon.js';
-export { STGLogoIcon } from './components/stg-logo-icon.js';
-export { WBCLogoIcon } from './components/wbc-logo-icon.js';
-export { WBGLogoIcon } from './components/wbg-logo-icon.js';
 export { Icon } from './icon.component.js';