@westpac/ui 0.20.1 → 0.22.0

package/dist/components/icon/components/windows-new-icon.js

@@ -14,7 +14,7 @@ function _extends() {
 }
 import React from 'react';
 import { Icon } from '../icon.component.js';
-export function WindowsNewIcon({ 'aria-label': ariaLabel = 'Windows New' , copyrightYear ='2024' , ...props }) {
+export function WindowsNewIcon({ 'aria-label': ariaLabel = 'Windows New' , copyrightYear ='2023' , ...props }) {
     return React.createElement(Icon, _extends({
         "aria-label": ariaLabel,
         copyrightYear: copyrightYear

package/dist/components/icon/components/wine-glass-icon.js

@@ -14,7 +14,7 @@ function _extends() {
 }
 import React from 'react';
 import { Icon } from '../icon.component.js';
-export function WineGlassIcon({ look ='filled' , 'aria-label': ariaLabel = 'Wine Glass' , copyrightYear ='2024' , ...props }) {
+export function WineGlassIcon({ look ='filled' , 'aria-label': ariaLabel = 'Wine Glass' , copyrightYear ='2023' , ...props }) {
     return React.createElement(Icon, _extends({
         "aria-label": ariaLabel,
         copyrightYear: copyrightYear

package/dist/components/icon/components/word-file-icon.js

@@ -14,7 +14,7 @@ function _extends() {
 }
 import React, { Fragment } from 'react';
 import { Icon } from '../icon.component.js';
-export function WordFileIcon({ look ='filled' , 'aria-label': ariaLabel = 'Word File' , copyrightYear ='2024' , ...props }) {
+export function WordFileIcon({ look ='filled' , 'aria-label': ariaLabel = 'Word File' , copyrightYear ='2023' , ...props }) {
     return React.createElement(Icon, _extends({
         "aria-label": ariaLabel,
         copyrightYear: copyrightYear

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

@@ -14,7 +14,7 @@ function _extends() {
 }
 import React, { Fragment } from 'react';
 import { Icon } from '../icon.component.js';
-export function WriteIcon({ look ='filled' , 'aria-label': ariaLabel = 'Write' , copyrightYear ='2024' , ...props }) {
+export function WriteIcon({ look ='filled' , 'aria-label': ariaLabel = 'Write' , copyrightYear ='2023' , ...props }) {
     return React.createElement(Icon, _extends({
         "aria-label": ariaLabel,
         copyrightYear: copyrightYear

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

@@ -14,7 +14,7 @@ function _extends() {
 }
 import React, { Fragment } from 'react';
 import { Icon } from '../icon.component.js';
-export function YammerIcon({ look ='filled' , 'aria-label': ariaLabel = 'Yammer' , copyrightYear ='2024' , ...props }) {
+export function YammerIcon({ look ='filled' , 'aria-label': ariaLabel = 'Yammer' , copyrightYear ='2023' , ...props }) {
     return React.createElement(Icon, _extends({
         "aria-label": ariaLabel,
         copyrightYear: copyrightYear

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

@@ -14,7 +14,7 @@ function _extends() {
 }
 import React, { Fragment } from 'react';
 import { Icon } from '../icon.component.js';
-export function YoutubeIcon({ look ='filled' , 'aria-label': ariaLabel = 'Youtube' , copyrightYear ='2024' , ...props }) {
+export function YoutubeIcon({ look ='filled' , 'aria-label': ariaLabel = 'Youtube' , copyrightYear ='2023' , ...props }) {
     return React.createElement(Icon, _extends({
         "aria-label": ariaLabel,
         copyrightYear: copyrightYear

package/dist/components/icon/components/zip-file-icon.js

@@ -14,7 +14,7 @@ function _extends() {
 }
 import React, { Fragment } from 'react';
 import { Icon } from '../icon.component.js';
-export function ZipFileIcon({ look ='filled' , 'aria-label': ariaLabel = 'Zip File' , copyrightYear ='2024' , ...props }) {
+export function ZipFileIcon({ look ='filled' , 'aria-label': ariaLabel = 'Zip File' , copyrightYear ='2023' , ...props }) {
     return React.createElement(Icon, _extends({
         "aria-label": ariaLabel,
         copyrightYear: copyrightYear

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

@@ -36,8 +36,6 @@ export { CardlessCashIcon } from './components/cardless-cash-icon.js';
 export { CartIcon } from './components/cart-icon.js';
 export { ChatIcon } from './components/chat-icon.js';
 export { CheckIcon } from './components/check-icon.js';
-export { ChildCareIcon } from './components/child-care-icon.js';
-export { ChildIcon } from './components/child-icon.js';
 export { ClearIcon } from './components/clear-icon.js';
 export { ClockIcon } from './components/clock-icon.js';
 export { CloseIcon } from './components/close-icon.js';
@@ -158,7 +156,6 @@ export { PercentIcon } from './components/percent-icon.js';
 export { PersonIcon } from './components/person-icon.js';
 export { PhoneIcon } from './components/phone-icon.js';
 export { PieChartIcon } from './components/pie-chart-icon.js';
-export { PiggyBankIcon } from './components/piggy-bank.js';
 export { PizzaIcon } from './components/pizza-icon.js';
 export { PlaneIcon } from './components/plane-icon.js';
 export { PlayCircleIcon } from './components/play-circle-icon.js';
@@ -192,6 +189,7 @@ export { SmsIcon } from './components/sms-icon.js';
 export { SpaIcon } from './components/spa-icon.js';
 export { StarHalfIcon } from './components/star-half-icon.js';
 export { StarRateIcon } from './components/star-rate-icon.js';
+export { StarsIcon } from './components/stars-icon.js';
 export { StopwatchIcon } from './components/stopwatch-icon.js';
 export { StrollerIcon } from './components/stroller-icon.js';
 export { SuccessIcon } from './components/success-icon.js';
@@ -211,6 +209,7 @@ export { TransferIcon } from './components/transfer-icon.js';
 export { TransportIcon } from './components/transport-icon.js';
 export { TravelExploreIcon } from './components/travel-explore-icon.js';
 export { TuneIcon } from './components/tune-icon.js';
+export { TwitterIcon } from './components/twitter-icon.js';
 export { UmbrellaIcon } from './components/umbrella-icon.js';
 export { UploadIcon } from './components/upload-icon.js';
 export { VerifiedIcon } from './components/verified-icon.js';
@@ -228,7 +227,6 @@ export { WindowsNewIcon } from './components/windows-new-icon.js';
 export { WineGlassIcon } from './components/wine-glass-icon.js';
 export { WordFileIcon } from './components/word-file-icon.js';
 export { WriteIcon } from './components/write-icon.js';
-export { XIcon } from './components/x-icon.js';
 export { YammerIcon } from './components/yammer-icon.js';
 export { YoutubeIcon } from './components/youtube-icon.js';
 export { ZipFileIcon } from './components/zip-file-icon.js';

package/dist/components/icon/index.js

@@ -36,8 +36,6 @@ export { CardlessCashIcon } from './components/cardless-cash-icon.js';
 export { CartIcon } from './components/cart-icon.js';
 export { ChatIcon } from './components/chat-icon.js';
 export { CheckIcon } from './components/check-icon.js';
-export { ChildCareIcon } from './components/child-care-icon.js';
-export { ChildIcon } from './components/child-icon.js';
 export { ClearIcon } from './components/clear-icon.js';
 export { ClockIcon } from './components/clock-icon.js';
 export { CloseIcon } from './components/close-icon.js';
@@ -158,7 +156,6 @@ export { PercentIcon } from './components/percent-icon.js';
 export { PersonIcon } from './components/person-icon.js';
 export { PhoneIcon } from './components/phone-icon.js';
 export { PieChartIcon } from './components/pie-chart-icon.js';
-export { PiggyBankIcon } from './components/piggy-bank.js';
 export { PizzaIcon } from './components/pizza-icon.js';
 export { PlaneIcon } from './components/plane-icon.js';
 export { PlayCircleIcon } from './components/play-circle-icon.js';
@@ -192,6 +189,7 @@ export { SmsIcon } from './components/sms-icon.js';
 export { SpaIcon } from './components/spa-icon.js';
 export { StarHalfIcon } from './components/star-half-icon.js';
 export { StarRateIcon } from './components/star-rate-icon.js';
+export { StarsIcon } from './components/stars-icon.js';
 export { StopwatchIcon } from './components/stopwatch-icon.js';
 export { StrollerIcon } from './components/stroller-icon.js';
 export { SuccessIcon } from './components/success-icon.js';
@@ -211,6 +209,7 @@ export { TransferIcon } from './components/transfer-icon.js';
 export { TransportIcon } from './components/transport-icon.js';
 export { TravelExploreIcon } from './components/travel-explore-icon.js';
 export { TuneIcon } from './components/tune-icon.js';
+export { TwitterIcon } from './components/twitter-icon.js';
 export { UmbrellaIcon } from './components/umbrella-icon.js';
 export { UploadIcon } from './components/upload-icon.js';
 export { VerifiedIcon } from './components/verified-icon.js';
@@ -228,7 +227,6 @@ export { WindowsNewIcon } from './components/windows-new-icon.js';
 export { WineGlassIcon } from './components/wine-glass-icon.js';
 export { WordFileIcon } from './components/word-file-icon.js';
 export { WriteIcon } from './components/write-icon.js';
-export { XIcon } from './components/x-icon.js';
 export { YammerIcon } from './components/yammer-icon.js';
 export { YoutubeIcon } from './components/youtube-icon.js';
 export { ZipFileIcon } from './components/zip-file-icon.js';

package/dist/components/input-group/input-group.styles.js

@@ -1,7 +1,4 @@
 import { tv } from 'tailwind-variants';
-const inlineFlexInput = {
-    input: 'inline-flex'
-};
 export const styles = tv({
     slots: {
         base: 'group m-0 mb-5 border-none p-0',
@@ -26,18 +23,42 @@ export const styles = tv({
         },
         width: {
             full: '',
-            1: inlineFlexInput,
-            2: inlineFlexInput,
-            3: inlineFlexInput,
-            4: inlineFlexInput,
-            5: inlineFlexInput,
-            6: inlineFlexInput,
-            7: inlineFlexInput,
-            8: inlineFlexInput,
-            9: inlineFlexInput,
-            10: inlineFlexInput,
-            20: inlineFlexInput,
-            30: inlineFlexInput
+            1: {
+                input: 'inline-flex'
+            },
+            2: {
+                input: 'inline-flex'
+            },
+            3: {
+                input: 'inline-flex'
+            },
+            4: {
+                input: 'inline-flex'
+            },
+            5: {
+                input: 'inline-flex'
+            },
+            6: {
+                input: 'inline-flex'
+            },
+            7: {
+                input: 'inline-flex'
+            },
+            8: {
+                input: 'inline-flex'
+            },
+            9: {
+                input: 'inline-flex'
+            },
+            10: {
+                input: 'inline-flex'
+            },
+            20: {
+                input: 'inline-flex'
+            },
+            30: {
+                input: 'inline-flex'
+            }
         }
     },
     compoundVariants: [

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

@@ -22,7 +22,7 @@ export function Panel({ className , children , heading , headingTag: Tag = 'h1'
         className: styles.base({
             className
         })
-    }, props), React.createElement(Tag, {
+    }, props), heading && React.createElement(Tag, {
         className: styles.header()
     }, heading), children);
 }

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

@@ -1,7 +1,7 @@
 import { tv } from 'tailwind-variants';
 export const styles = tv({
     slots: {
-        base: 'group/panel mb-4 overflow-hidden rounded border border-hero',
+        base: 'group/panel overflow-hidden rounded border border-hero',
         header: 'px-2 py-[0.625rem] sm:px-4'
     },
     variants: {

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

@@ -7,7 +7,7 @@ export type PanelProps = {
     /**
      * The heading of the panel
      */
-    heading: string;
+    heading?: string;
     /**
      * Tag for heading defaults to h1
      * @default h1

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

@@ -0,0 +1,2 @@
+import { type PictogramProps } from '../../pictogram.types.js';
+export declare function SparklePictogram({ mode, viewBoxWidth, viewBoxHeight, 'aria-label': ariaLabel, copyrightYear, className, ...props }: PictogramProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,110 @@
+'use client';
+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 SparklePictogram({ mode ='duo' , viewBoxWidth =78 , viewBoxHeight =78 , 'aria-label': ariaLabel = 'Sparkle' , copyrightYear ='2024' , 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("svg", {
+        width: "78",
+        height: "78",
+        viewBox: "0 0 78 78",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg"
+    }, React.createElement("g", {
+        "clip-path": "url(#clip0_882_7929)"
+    }, React.createElement("path", {
+        d: "M38.9999 61.716C37.7659 61.716 36.6949 60.9716 36.2758 59.8201L32.4922 49.5961C31.782 47.6885 30.2802 46.1765 28.371 45.4786L18.1378 41.6984C16.9853 41.268 16.2402 40.1979 16.2402 38.9766C16.2402 37.7553 16.9853 36.6736 18.1378 36.2549L28.371 32.4747C30.2802 31.7652 31.7937 30.2647 32.4922 28.3572L36.2758 18.1332C36.7065 16.9817 37.7775 16.2373 38.9999 16.2373C40.2223 16.2373 43.5 17 44.0525 18.1332L47.8361 28.3572C48.5462 30.2647 50.048 31.7768 51.9572 32.4747L62.1904 36.2549C63.3429 36.6853 64.088 37.7553 64.088 38.9766C64.088 40.1979 63.3429 41.2797 62.1904 41.6984L51.9572 45.4786C50.048 46.1881 48.5346 47.6885 47.8361 49.5961C47.8361 49.5961 45.6049 57.6401 44.0525 59.8201C42.5 62 40.2223 61.716 38.9999 61.716ZM38.9999 18.5403C38.8835 18.5403 38.5808 18.5752 38.4528 18.9242L34.6692 29.1481C33.7262 31.6954 31.7238 33.7076 29.1626 34.6498L18.9295 38.43C18.5919 38.5579 18.5453 38.8487 18.5453 38.9766C18.5453 39.1046 18.5802 39.3954 18.9295 39.5233L29.1626 43.3035C31.7122 44.2457 33.7262 46.2463 34.6692 48.8052L38.4528 59.0291C38.5808 59.3664 38.8719 59.413 38.9999 59.413C39.128 59.413 39.419 59.3781 39.5471 59.0291L43.3307 48.8052C44.2737 46.2579 46.2761 44.2457 48.8372 43.3035L59.0704 39.5233C59.408 39.3954 59.4546 39.1046 59.4546 38.9766C59.4546 38.8487 59.4196 38.5579 59.0704 38.43L48.8372 34.6498C46.2877 33.7076 44.2737 31.707 43.3307 29.1481L41.4389 24.0361L39.5471 18.9242C39.419 18.5868 39.128 18.5403 38.9999 18.5403Z",
+        className: fill({
+            mode,
+            outline: true
+        })
+    }), React.createElement("path", {
+        "fill-rule": "evenodd",
+        "clip-rule": "evenodd",
+        d: "M67.5225 39.5465H78.0001V37.2202H67.5225V39.5465Z",
+        className: fill({
+            mode,
+            highlight: true
+        })
+    }), React.createElement("path", {
+        "fill-rule": "evenodd",
+        "clip-rule": "evenodd",
+        d: "M39.582 10.4682V0H37.2537V10.4682H39.582Z",
+        className: fill({
+            mode,
+            highlight: true
+        })
+    }), React.createElement("path", {
+        "fill-rule": "evenodd",
+        "clip-rule": "evenodd",
+        d: "M58.8375 20.192L66.0671 12.9689L64.4605 11.3638L57.231 18.5869L58.8375 20.192Z",
+        className: fill({
+            mode,
+            highlight: true
+        })
+    }), React.createElement("path", {
+        "fill-rule": "evenodd",
+        "clip-rule": "evenodd",
+        d: "M19.9772 18.5869L12.7477 11.3638L11.1411 12.9689L18.3707 20.192L19.9772 18.5869Z",
+        className: fill({
+            mode,
+            highlight: true
+        })
+    }), React.createElement("path", {
+        "fill-rule": "evenodd",
+        "clip-rule": "evenodd",
+        d: "M0 39.5465H10.4776V37.2202H0V39.5465Z",
+        className: fill({
+            mode,
+            highlight: true
+        })
+    }), React.createElement("path", {
+        "fill-rule": "evenodd",
+        "clip-rule": "evenodd",
+        d: "M39.582 77.9302V67.4619H37.2537V77.9302H39.582Z",
+        className: fill({
+            mode,
+            highlight: true
+        })
+    }), React.createElement("path", {
+        "fill-rule": "evenodd",
+        "clip-rule": "evenodd",
+        d: "M12.7477 66.2408L19.9772 59.0177L18.3707 57.4126L11.1411 64.6357L12.7477 66.2408Z",
+        className: fill({
+            mode,
+            highlight: true
+        })
+    }), React.createElement("path", {
+        d: "M61.6275 73.7087C60.836 73.6589 60.05 72.9352 59.8447 72.3711L57.991 67.362C57.643 66.4275 56.471 65.6434 55.5356 65.3015L50.9297 63.4561C50.365 63.2453 50 62.721 50 62.1227C50 61.5243 50.365 60.9943 50.9297 60.7892L55.8328 58.9986C56.7682 58.651 57.5097 57.9159 57.8519 56.9813L59.7056 51.9723C59.9167 51.4081 60.1646 50.7097 60.836 50.1765C61.6275 49.548 64.3923 50.7127 64.7478 51.867L66.8552 56.9132C67.2031 57.8478 67.8241 58.2113 68.7595 58.5532L73.8878 60.7826C74.5 61 75 61.7053 75 62.1192C75 62.4206 75 63.4565 73.8878 63.9616L68.7595 65.6852C67.8241 66.0328 67.1974 66.3843 66.8552 67.3188C66.8552 67.3188 65.4472 71.4364 65.1935 71.9257C64.9399 72.415 64.7416 73.9044 61.6275 73.7087ZM61.6346 52.1036C61.5775 52.1036 61.4292 52.1207 61.3665 52.2917L59.5128 57.3007C59.0508 58.5487 58.0698 59.5346 56.8149 59.9962L51.8014 61.8482C51.636 61.9109 51.6132 62.0534 51.6132 62.116C51.6132 62.1787 51.6303 62.3212 51.8014 62.3839L56.8149 64.2359C58.0641 64.6975 59.0508 65.6776 59.5128 66.9313L61.3665 71.9404C61.4292 72.1056 61.5718 72.1284 61.6346 72.1284C61.6973 72.1284 61.8399 72.1113 61.9026 71.9404L63.7563 66.9313C64.2183 65.6833 65.1994 64.6975 66.4542 64.2359L71.4677 62.3839C71.6331 62.3212 71.6559 62.1787 71.6559 62.116C71.6559 62.0534 71.6388 61.9109 71.4677 61.8482L66.4542 59.9962C65.2051 59.5346 64.2183 58.5544 63.7563 57.3007L62.8295 54.7962L61.9026 52.2917C61.8399 52.1264 61.6973 52.1036 61.6346 52.1036Z",
+        className: fill({
+            mode,
+            outline: true
+        })
+    })), React.createElement("defs", null, React.createElement("clipPath", {
+        id: "clip0_882_7929"
+    }, React.createElement("rect", {
+        width: "78",
+        height: "78",
+        fill: "white"
+    })))));
+}

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

@@ -78,6 +78,7 @@ export { SearchPictogram } from './components/informative/search-pictogram.js';
 export { SecurePictogram } from './components/informative/secure-pictogram.js';
 export { ShopPictogram } from './components/informative/shop-pictogram.js';
 export { ShoppingPictogram } from './components/informative/shopping-pictogram.js';
+export { SparklePictogram } from './components/informative/sparkle-pictogram.js';
 export { StarPictogram } from './components/informative/star-pictogram.js';
 export { StopwatchPictogram } from './components/informative/stopwatch-pictogram.js';
 export { TaxDocumentPictogram } from './components/informative/tax-document-pictogram.js';

package/dist/components/pictogram/index.js

@@ -78,6 +78,7 @@ export { SearchPictogram } from './components/informative/search-pictogram.js';
 export { SecurePictogram } from './components/informative/secure-pictogram.js';
 export { ShopPictogram } from './components/informative/shop-pictogram.js';
 export { ShoppingPictogram } from './components/informative/shopping-pictogram.js';
+export { SparklePictogram } from './components/informative/sparkle-pictogram.js';
 export { StarPictogram } from './components/informative/star-pictogram.js';
 export { StopwatchPictogram } from './components/informative/stopwatch-pictogram.js';
 export { TaxDocumentPictogram } from './components/informative/tax-document-pictogram.js';

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

@@ -3,4 +3,4 @@ import { type PopoverProps } from './popover.types.js';
  * TODO: Revisit this component when react-aria has updated usePopover, see: https://github.com/adobe/react-spectrum/discussions/5341
  * This version does not currently use react-aria as it blocked so functionality that was needed to match GEL 3.0
  */
-export declare function Popover({ children, className, headingTag, content, heading, onClick, placement, look, soft, open, icon, }: PopoverProps): import("react/jsx-runtime").JSX.Element;
+export declare function Popover({ children, className, headingTag, content, heading, onClick, placement, look, soft, open, linkStyling, size, icon, }: PopoverProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/popover/popover.component.js

@@ -4,10 +4,12 @@ import { useOverlayTriggerState } from 'react-stately';
 import { Button } from '../button/index.js';
 import { Panel } from './components/panel/panel.component.js';
 import { styles as popoverStyles } from './popover.styles.js';
-export function Popover({ children , className , headingTag , content , heading , onClick =()=>undefined , placement , look , soft =false , open =false , icon  }) {
+export function Popover({ children , className , headingTag , content , heading , onClick =()=>undefined , placement , look , soft =false , open =false , linkStyling =false , size ='medium' , icon  }) {
     const state = useOverlayTriggerState({});
     const panelId = useId();
-    const styles = popoverStyles({});
+    const styles = popoverStyles({
+        linkStyling
+    });
     const ref = useRef(null);
     const handleClick = useCallback(()=>{
         onClick();
@@ -41,13 +43,15 @@ export function Popover({ children , className , headingTag , content , heading
             className
         })
     }, React.createElement(Button, {
-        look: icon && !children ? 'link' : look,
+        look: icon && !children || linkStyling ? 'link' : look,
         iconAfter: icon,
         soft: soft,
         "aria-expanded": state.isOpen,
         "aria-controls": panelId,
         onClick: handleClick,
-        ref: ref
+        ref: ref,
+        size: size,
+        className: styles.button()
     }, children), state.isOpen && React.createElement(Panel, {
         placement: placement,
         heading: heading ? heading : '',

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

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

package/dist/components/popover/popover.styles.js

@@ -1,9 +1,17 @@
 import { tv } from 'tailwind-variants';
 export const styles = tv({
     slots: {
-        base: 'relative inline-block'
+        base: 'relative inline-block',
+        button: ''
     },
-    variants: {}
+    variants: {
+        linkStyling: {
+            true: {
+                button: 'p-0'
+            },
+            false: {}
+        }
+    }
 }, {
     responsiveVariants: [
         'xsl',

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

@@ -23,6 +23,10 @@ export type PopoverProps = {
      * Use an icon as the button
      */
     icon?: (props: IconProps) => JSX.Element;
+    /**
+     * Removes padding from trigger button and sets look to link to be able to look inline, use size prop to match font size
+     */
+    linkStyling?: boolean;
     /**
      * A function for the onClick event
      */
@@ -36,4 +40,4 @@ export type PopoverProps = {
      * @default top
      */
     placement?: 'top' | 'bottom';
-} & HTMLAttributes<Element> & Pick<ButtonProps, 'look' | 'soft'>;
+} & HTMLAttributes<Element> & Pick<ButtonProps, 'look' | 'soft' | 'size'>;

package/dist/css/westpac-ui.css

@@ -1,5 +1,3 @@
-Tailwind Variants Transform Failed: inlineFlexInput is not defined
-If you think this is an issue, please submit it at https://github.com/nextui-org/tailwind-variants/issues/new/choose
 /*
 ! tailwindcss v3.3.2 | MIT License | https://tailwindcss.com
 *//*
@@ -7124,6 +7122,8 @@ video {
   }.xsl\:bg-white {
     --tw-bg-opacity: 1;
     background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+  }.xsl\:p-0 {
+    padding: 0rem;
   }.xsl\:p-2 {
     padding: 0.75rem;
   }.xsl\:p-3 {
@@ -8176,6 +8176,8 @@ video {
   }.sm\:bg-white {
     --tw-bg-opacity: 1;
     background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+  }.sm\:p-0 {
+    padding: 0rem;
   }.sm\:p-2 {
     padding: 0.75rem;
   }.sm\:p-3 {
@@ -9247,6 +9249,8 @@ video {
   }.md\:bg-white {
     --tw-bg-opacity: 1;
     background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+  }.md\:p-0 {
+    padding: 0rem;
   }.md\:p-2 {
     padding: 0.75rem;
   }.md\:p-3 {
@@ -10311,6 +10315,8 @@ video {
   }.lg\:bg-white {
     --tw-bg-opacity: 1;
     background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+  }.lg\:p-0 {
+    padding: 0rem;
   }.lg\:p-2 {
     padding: 0.75rem;
   }.lg\:p-3 {
@@ -11340,6 +11346,8 @@ video {
   }.xl\:bg-white {
     --tw-bg-opacity: 1;
     background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+  }.xl\:p-0 {
+    padding: 0rem;
   }.xl\:p-2 {
     padding: 0.75rem;
   }.xl\:p-3 {

package/dist/css/westpac-ui.min.css

@@ -1,5 +1,3 @@
-Tailwind Variants Transform Failed: inlineFlexInput is not defined
-If you think this is an issue, please submit it at https://github.com/nextui-org/tailwind-variants/issues/new/choose
 /*
 ! tailwindcss v3.3.2 | MIT License | https://tailwindcss.com
 *//*
@@ -7124,6 +7122,8 @@ video {
   }.xsl\:bg-white {
     --tw-bg-opacity: 1;
     background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+  }.xsl\:p-0 {
+    padding: 0rem;
   }.xsl\:p-2 {
     padding: 0.75rem;
   }.xsl\:p-3 {
@@ -8176,6 +8176,8 @@ video {
   }.sm\:bg-white {
     --tw-bg-opacity: 1;
     background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+  }.sm\:p-0 {
+    padding: 0rem;
   }.sm\:p-2 {
     padding: 0.75rem;
   }.sm\:p-3 {
@@ -9247,6 +9249,8 @@ video {
   }.md\:bg-white {
     --tw-bg-opacity: 1;
     background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+  }.md\:p-0 {
+    padding: 0rem;
   }.md\:p-2 {
     padding: 0.75rem;
   }.md\:p-3 {
@@ -10311,6 +10315,8 @@ video {
   }.lg\:bg-white {
     --tw-bg-opacity: 1;
     background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+  }.lg\:p-0 {
+    padding: 0rem;
   }.lg\:p-2 {
     padding: 0.75rem;
   }.lg\:p-3 {
@@ -11340,6 +11346,8 @@ video {
   }.xl\:bg-white {
     --tw-bg-opacity: 1;
     background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+  }.xl\:p-0 {
+    padding: 0rem;
   }.xl\:p-2 {
     padding: 0.75rem;
   }.xl\:p-3 {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@westpac/ui",
-  "version": "0.20.1",
+  "version": "0.22.0",
   "license": "MIT",
   "sideEffects": false,
   "type": "module",
@@ -255,9 +255,9 @@
     "typescript": "^5.1.6",
     "vite": "^4.3.9",
     "vitest": "^0.30.1",
-    "@westpac/ts-config": "~0.0.0",
     "@westpac/test-config": "~0.0.0",
-    "@westpac/eslint-config": "~0.2.1"
+    "@westpac/eslint-config": "~0.2.1",
+    "@westpac/ts-config": "~0.0.0"
   },
   "dependencies": {
     "@duetds/date-picker": "~1.4.0",

package/src/components/icon/components/accessibility-icon.tsx

@@ -5,7 +5,7 @@ import { type IconProps } from '../icon.types.js';
 
 export function AccessibilityIcon({
   'aria-label': ariaLabel = 'Accessibility',
-  copyrightYear = '2024',
+  copyrightYear = '2023',
   ...props
 }: IconProps) {
   return (

package/src/components/icon/components/account-icon.tsx

@@ -6,7 +6,7 @@ import { type IconProps } from '../icon.types.js';
 export function AccountIcon({
   look = 'filled',
   'aria-label': ariaLabel = 'Account',
-  copyrightYear = '2024',
+  copyrightYear = '2023',
   ...props
 }: IconProps) {
   return (

package/src/components/icon/components/add-circle-icon.tsx

@@ -6,7 +6,7 @@ import { type IconProps } from '../icon.types.js';
 export function AddCircleIcon({
   look = 'filled',
   'aria-label': ariaLabel = 'Add Circle',
-  copyrightYear = '2024',
+  copyrightYear = '2023',
   ...props
 }: IconProps) {
   return (

package/src/components/icon/components/add-icon.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { Icon } from '../icon.component.js';
 import { type IconProps } from '../icon.types.js';
 
-export function AddIcon({ 'aria-label': ariaLabel = 'Add', copyrightYear = '2024', ...props }: IconProps) {
+export function AddIcon({ 'aria-label': ariaLabel = 'Add', copyrightYear = '2023', ...props }: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
       <path d="M11 11H4V13H11V20H13V13H20V11H13V4H11V11Z" fill="currentColor" />