@westpac/ui 0.18.0 → 0.20.0

package/dist/components/pagination/pagination.hooks.js

@@ -10,7 +10,8 @@ export const usePagination = ({ defaultCurrent =1 , pages , infinite =false  })=
             return cannotGoForward ? currentPage : currentPage + 1;
         });
     }, [
-        pages
+        infinite,
+        pages.length
     ]);
     const previous = useCallback(()=>{
         setCurrentPage((currentPage)=>{
@@ -21,7 +22,8 @@ export const usePagination = ({ defaultCurrent =1 , pages , infinite =false  })=
             return cannotGoBackwards ? currentPage : currentPage - 1;
         });
     }, [
-        pages
+        infinite,
+        pages.length
     ]);
     const selectedPage = useMemo(()=>{
         return pages[currentPage - 1];

package/dist/components/pass-code/pass-code.component.js

@@ -38,9 +38,9 @@ export function PassCode({ length , onComplete , className , ...props }) {
             onComplete(newPasscode.join(''));
         }
     }, [
-        onComplete,
-        inputRefs,
-        passcode
+        passcode,
+        length,
+        onComplete
     ]);
     const handlePaste = useCallback((index, event)=>{
         event.preventDefault();
@@ -60,6 +60,8 @@ export function PassCode({ length , onComplete , className , ...props }) {
             onComplete(newPasscode.join(''));
         }
     }, [
+        length,
+        onComplete,
         passcode
     ]);
     const handleKeyDown = useCallback((index, event)=>{
@@ -81,7 +83,7 @@ export function PassCode({ length , onComplete , className , ...props }) {
             }
         }
     }, [
-        inputRefs
+        passcode
     ]);
     const handleFocus = useCallback((index)=>{
         var _inputRefs_current_index;

package/dist/components/pass-code-view/pass-code-view.types.d.ts

@@ -30,11 +30,11 @@ export type PassCodeViewProps = {
     /**
      * on click the resend button
      */
-    onResend?: () => any;
+    onResend?: () => void;
     /**
      * on click the update button
      */
-    onUpdate?: () => any;
+    onUpdate?: () => void;
     /**
      * length of the passcode
      */

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

@@ -1,13 +1,18 @@
-import React, { useCallback, useLayoutEffect, useRef, useState } from 'react';
+import React, { useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { FocusScope } from 'react-aria';
 import { Button } from '../../../button/index.js';
 import { CloseIcon } from '../../../icon/index.js';
-import { usePopoverPosition } from '../../popover.hooks.js';
+import { getPopoverPosition } from '../../popover.utils.js';
 import { styles as panelStyles } from './panel.styles.js';
 export function Panel({ state , heading , headingTag: Tag = 'h1' , content , placement , id , triggerRef  }) {
     const popoverRef = useRef(null);
     const arrowRef = useRef(null);
-    const remSize = parseInt(window.getComputedStyle(document.getElementsByTagName('html')[0]).fontSize);
+    const remSize = useMemo(()=>{
+        if (typeof window !== 'undefined') {
+            return parseInt(window.getComputedStyle(document.getElementsByTagName('html')[0]).fontSize);
+        }
+        return 1;
+    }, []);
     const [position, setPosition] = useState({
         placement: 'top',
         offset: 'left',
@@ -15,9 +20,12 @@ export function Panel({ state , heading , headingTag: Tag = 'h1' , content , pla
         arrowPosition: popoverRef.current ? popoverRef.current.getBoundingClientRect().width / 2 / remSize : 0
     });
     useLayoutEffect(()=>{
-        setPosition(usePopoverPosition(triggerRef, popoverRef, arrowRef, placement));
+        setPosition(getPopoverPosition(triggerRef, popoverRef, arrowRef, placement));
     }, [
-        state.isOpen
+        placement,
+        remSize,
+        state.isOpen,
+        triggerRef
     ]);
     const getPopoverClass = useCallback(()=>{
         return {

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

@@ -14,12 +14,12 @@ export function Popover({ children , className , headingTag , content , heading
         state.toggle();
     }, [
         onClick,
-        state.isOpen
+        state
     ]);
     const keyHandler = useCallback((event)=>{
         if (state.isOpen && event.key === 'Escape') state.close();
     }, [
-        state.isOpen
+        state
     ]);
     useEffect(()=>{
         window.document.addEventListener('keydown', keyHandler);
@@ -27,12 +27,14 @@ export function Popover({ children , className , headingTag , content , heading
             window.document.removeEventListener('keydown', keyHandler);
         };
     }, [
+        keyHandler,
         state.isOpen
     ]);
     useLayoutEffect(()=>{
         if (open) state.setOpen(true);
     }, [
-        open
+        open,
+        state
     ]);
     return React.createElement("div", {
         className: styles.base({

package/dist/components/popover/{popover.hooks.d.ts → popover.utils.d.ts}

@@ -1,3 +1,3 @@
 import { RefObject } from 'react';
 import { Position } from './components/panel/panel.types.js';
-export declare const usePopoverPosition: (triggerRef: RefObject<HTMLDivElement>, popoverRef: RefObject<HTMLDivElement>, arrowRef: RefObject<HTMLDivElement>, placement?: 'top' | 'bottom') => Position;
+export declare const getPopoverPosition: (triggerRef: RefObject<HTMLDivElement>, popoverRef: RefObject<HTMLDivElement>, arrowRef: RefObject<HTMLDivElement>, placement?: 'top' | 'bottom') => Position;

package/dist/components/popover/{popover.hooks.js → popover.utils.js}

@@ -1,11 +1,11 @@
-export const usePopoverPosition = (triggerRef, popoverRef, arrowRef, placement)=>{
+export const getPopoverPosition = (triggerRef, popoverRef, arrowRef, placement)=>{
     if (!triggerRef.current || !popoverRef.current || !arrowRef.current) {
         throw new Error('You must pass valid refs.');
     }
     const trigger = triggerRef.current.getBoundingClientRect();
     const popover = popoverRef.current.getBoundingClientRect();
     const arrow = arrowRef.current.getBoundingClientRect();
-    const remSize = parseInt(window.getComputedStyle(document.getElementsByTagName('html')[0]).fontSize);
+    const remSize = typeof window !== 'undefined' ? parseInt(window.getComputedStyle(document.getElementsByTagName('html')[0]).fontSize) : 1;
     const position = {
         placement: placement ? placement : 'top',
         offset: popover.right >= window.innerWidth ? 'right' : 'left',

package/dist/components/progress-rope/components/progress-rope-step/progress-rope-step.component.d.ts

@@ -2,4 +2,4 @@ import { type ProgressRopeStepProps } from './progress-rope-step.types.js';
 /**
  * @private
  */
-export declare function ProgressRopeStep({ className, current, visited, tag: Tag, type, size, children, firstItem, lastItemInGroup, lastItemInRope, furthest, previousStepGroup, ...props }: ProgressRopeStepProps): import("react/jsx-runtime").JSX.Element;
+export declare function ProgressRopeStep({ className, current, visited, tag: Tag, size, children, firstItem, lastItemInGroup, lastItemInRope, furthest, previousStepGroup, ...props }: ProgressRopeStepProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/progress-rope/components/progress-rope-step/progress-rope-step.component.js

@@ -16,7 +16,7 @@ import React, { useMemo } from 'react';
 import { mergeProps, useFocusRing } from 'react-aria';
 import { Circle, VisuallyHidden } from '../../../index.js';
 import { styles as progressRopeStyles } from './progress-rope-step.styles.js';
-export function ProgressRopeStep({ className , current , visited , tag: Tag = 'button' , type , size ='medium' , children , firstItem , lastItemInGroup , lastItemInRope , furthest , previousStepGroup , ...props }) {
+export function ProgressRopeStep({ className , current , visited , tag: Tag = 'button' , size ='medium' , children , firstItem , lastItemInGroup , lastItemInRope , furthest , previousStepGroup , ...props }) {
     const state = useMemo(()=>{
         if (lastItemInRope && visited && current) {
             return 'last-current';
@@ -36,6 +36,7 @@ export function ProgressRopeStep({ className , current , visited , tag: Tag = 'b
         return 'non-visited';
     }, [
         current,
+        lastItemInRope,
         visited
     ]);
     const { isFocusVisible , focusProps  } = useFocusRing();
@@ -61,6 +62,7 @@ export function ProgressRopeStep({ className , current , visited , tag: Tag = 'b
         return ', not started';
     }, [
         current,
+        furthest,
         visited
     ]);
     return React.createElement(Tag, _extends({

package/dist/components/progress-rope/components/progress-rope-step/progress-rope-step.types.d.ts

@@ -40,5 +40,5 @@ export type ProgressRopeStepProps = {
      * Says it is visited
      */
     visited?: boolean;
-} & Omit<ProgressRopeStepItem, 'text'> & HTMLAttributes<Element>;
+} & Omit<ProgressRopeStepItem, 'text' | 'type'> & HTMLAttributes<Element>;
 export {};

package/dist/components/progress-rope/progress-rope.component.js

@@ -70,7 +70,9 @@ export function ProgressRope({ 'aria-label': ariaLabel = 'In this form' , role =
             setOpenedGroupStepIndex(newGroupStepIndex);
         }
     }, [
-        current
+        current,
+        mappedData,
+        openedGroupStepIndex
     ]);
     return React.createElement(Tag, _extends({
         className: className,
@@ -93,7 +95,6 @@ export function ProgressRope({ 'aria-label': ariaLabel = 'In this form' , role =
             tag: headingTag
         }, item.text) : React.createElement(ProgressRopeStep, {
             firstItem: index === 0,
-            type: item.type,
             onClick: furthestVisitedStep >= item.index ? item.onClick : undefined,
             visited: furthestVisitedStep > item.index,
             furthest: furthestVisitedStep === item.index,

package/dist/components/radio-group/components/radio-group-radio/radio-group-radio.component.d.ts

@@ -3,4 +3,4 @@ export declare const RadioGroupRadio: React.ForwardRefExoticComponent<{
     className?: string | undefined;
     hint?: React.ReactNode;
     label: React.ReactNode;
-} & Omit<import("react-aria").AriaRadioProps, "children"> & React.RefAttributes<unknown>>;
+} & Omit<import("react-aria").AriaRadioProps, "children"> & React.RefAttributes<HTMLLabelElement>>;

package/dist/components/radio-group/radio-group.component.js

@@ -124,7 +124,7 @@ export function RadioGroup({ className , radios , label , orientation ='vertical
         className: styles.base({
             className
         })
-    }, radioGroupProps), React.createElement(Label, _extends({}, labelProps), label), hintMessage && React.createElement(Hint, _extends({}, descriptionProps), hintMessage), errorMessage && state.validationState === 'invalid' && React.createElement(ErrorMessage, _extends({}, errorMessageProps, {
+    }, radioGroupProps), React.createElement(Label, _extends({}, labelProps), label), hintMessage && React.createElement(Hint, _extends({}, descriptionProps), hintMessage), errorMessage && state.isInvalid && React.createElement(ErrorMessage, _extends({}, errorMessageProps, {
         message: errorMessage
     })), React.createElement("div", {
         className: styles.radioWrapper(),

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

@@ -31,7 +31,7 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
         20: string;
         30: string;
     };
-}, undefined, "form-control bg-no-repeat select-caret disabled:form-control-disabled group-[.add-on-after]:!rounded-r group-[.add-on-after]:rounded-l-none group-[.add-on-before]:!rounded-l group-[.add-on-before]:rounded-r-none group-[.input-group-after]:rounded-r-none group-[.input-group-before]:rounded-l-none group-[.add-on-after]:!border-x group-[.add-on-before]:!border-x group-[.input-group-after]:border-r-0 group-[.input-group-before]:border-l-0", {
+}, undefined, "form-control bg-no-repeat select-caret disabled:form-control-disabled group-first/add-on-before:!rounded-l group-first/add-on-before:rounded-r-none group-first/add-on-before:!border-x group-last/add-on-after:!rounded-r group-last/add-on-after:rounded-l-none group-last/add-on-after:!border-x group-[.input-group-after]:rounded-r-none group-[.input-group-before]:rounded-l-none group-[.input-group-after]:border-r-0 group-[.input-group-before]:border-l-0", {
     responsiveVariants: string[];
 }, {
     size: {

package/dist/components/select/select.styles.js

@@ -1,6 +1,6 @@
 import { tv } from 'tailwind-variants';
 export const styles = tv({
-    base: 'form-control bg-no-repeat select-caret disabled:form-control-disabled group-[.add-on-after]:!rounded-r group-[.add-on-after]:rounded-l-none group-[.add-on-before]:!rounded-l group-[.add-on-before]:rounded-r-none group-[.input-group-after]:rounded-r-none group-[.input-group-before]:rounded-l-none group-[.add-on-after]:!border-x group-[.add-on-before]:!border-x group-[.input-group-after]:border-r-0 group-[.input-group-before]:border-l-0',
+    base: 'form-control bg-no-repeat select-caret disabled:form-control-disabled group-first/add-on-before:!rounded-l group-first/add-on-before:rounded-r-none group-first/add-on-before:!border-x group-last/add-on-after:!rounded-r group-last/add-on-after:rounded-l-none group-last/add-on-after:!border-x group-[.input-group-after]:rounded-r-none group-[.input-group-before]:rounded-l-none group-[.input-group-after]:border-r-0 group-[.input-group-before]:border-l-0',
     variants: {
         size: {
             small: 'form-control-small bg-[right_0.5625rem_center] pr-[calc(0.5rem+14px+0.5625rem)]',

package/dist/components/selector/components/selector-button-group/components/selector-button-group-option/selector-button-group-option.component.js

@@ -31,8 +31,9 @@ function BaseSelectorButtonGroupOption({ className , children , withBorder =true
         onClick(event);
         state.onClick(id);
     }, [
+        id,
         onClick,
-        state.onClick
+        state
     ]);
     return React.createElement(FlexiCell, _extends({}, mergeProps(props, focusProps), {
         after: React.createElement("div", {

package/dist/components/selector/components/selector-button-group/selector-button-group.component.js

@@ -28,7 +28,6 @@ export function SelectorButtonGroup({ className , children , label , orientation
     const handleChange = useCallback((id)=>{
         setSelected(id);
     }, [
-        selected,
         setSelected
     ]);
     const state = useMemo(()=>({
@@ -37,6 +36,9 @@ export function SelectorButtonGroup({ className , children , label , orientation
             validationState: errorMessage ? 'invalid' : 'valid',
             isDisabled
         }), [
+        errorMessage,
+        handleChange,
+        isDisabled,
         selected
     ]);
     const { labelProps , fieldProps , descriptionProps , errorMessageProps  } = useField({

package/dist/components/selector/components/selector-checkbox-group/selector-checkbox-group.component.js

@@ -82,7 +82,7 @@ export function SelectorCheckboxGroup(props) {
     const { children , label , description , errorMessage  } = props;
     const state = useCheckboxGroupState(props);
     const { groupProps , labelProps , descriptionProps , errorMessageProps  } = useCheckboxGroup(props, state);
-    return React.createElement(React.Fragment, null, label && React.createElement(Label, _extends({}, labelProps), label), description && React.createElement(Hint, _extends({}, descriptionProps), description), errorMessage && state.validationState === 'invalid' && React.createElement(ErrorMessage, _extends({}, errorMessageProps, {
+    return React.createElement(React.Fragment, null, label && React.createElement(Label, _extends({}, labelProps), label), description && React.createElement(Hint, _extends({}, descriptionProps), description), errorMessage && state.isInvalid && React.createElement(ErrorMessage, _extends({}, errorMessageProps, {
         message: errorMessage
     })), React.createElement("div", _extends({}, groupProps, {
         className: styles({

package/dist/components/selector/components/selector-radio-group/selector-radio-group.component.js

@@ -89,7 +89,7 @@ export function SelectorRadioGroup({ className , children , label , orientation
         label,
         orientation
     }, state);
-    return React.createElement(React.Fragment, null, label && React.createElement(Label, _extends({}, labelProps), label), description && React.createElement(Hint, _extends({}, descriptionProps), description), errorMessage && state.validationState === 'invalid' && React.createElement(ErrorMessage, _extends({}, errorMessageProps, {
+    return React.createElement(React.Fragment, null, label && React.createElement(Label, _extends({}, labelProps), label), description && React.createElement(Hint, _extends({}, descriptionProps), description), errorMessage && state.isInvalid && React.createElement(ErrorMessage, _extends({}, errorMessageProps, {
         message: errorMessage
     })), React.createElement("div", _extends({
         className: styles({

package/dist/components/skip-link/skip-link.component.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
 import { type SkipLinkProps } from './skip-link.types.js';
-export declare const SkipLink: React.ForwardRefExoticComponent<SkipLinkProps & React.RefAttributes<unknown>>;
+export declare const SkipLink: React.ForwardRefExoticComponent<SkipLinkProps & React.RefAttributes<HTMLElement>>;

package/dist/components/tabs/components/tabs-tab/tabs-tab.types.d.ts

@@ -4,7 +4,7 @@ import { Node, TabListState } from 'react-stately';
 import { type VariantProps } from 'tailwind-variants';
 import { styles } from './tabs-tab.styles.js';
 type Variants = VariantProps<typeof styles>;
-export type TabsTabProps<T = any> = {
+export type TabsTabProps<T = object> = {
     /**
      * Color of tab
      */

package/dist/components/tabs/components/tabs-tab-panel/tabs-tab-panel.types.d.ts

@@ -4,7 +4,7 @@ import { TabListState } from 'react-stately';
 import { type VariantProps } from 'tailwind-variants';
 import { styles } from './tabs-tab-panel.styles.js';
 type Variants = VariantProps<typeof styles>;
-export type TabsTabPanelProps<T = any> = {
+export type TabsTabPanelProps<T = object> = {
     /**
      * Table panel content
      */

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

@@ -4,7 +4,7 @@ import { type VariantProps } from 'tailwind-variants';
 import { TabsTabProps } from './components/index.js';
 import { styles } from './tabs.styles.js';
 type Variants = VariantProps<typeof styles>;
-export type TabsProps<T = any> = SpectrumTabsProps<T> & {
+export type TabsProps<T = object> = SpectrumTabsProps<T> & {
     /**
      * Children
      */

package/dist/css/westpac-ui.css

@@ -3070,8 +3070,6 @@ video {
 }.inset-y-0 {
   top: 0rem;
   bottom: 0rem;
-}.bottom-\[1px\] {
-  bottom: 1px;
 }.bottom-full {
   bottom: 100%;
 }.left-0 {
@@ -4737,9 +4735,6 @@ video {
 }.py-4 {
   padding-top: 1.5rem;
   padding-bottom: 1.5rem;
-}.py-\[0\.125rem\] {
-  padding-top: 0.125rem;
-  padding-bottom: 0.125rem;
 }.py-\[0\.25rem\] {
   padding-top: 0.25rem;
   padding-bottom: 0.25rem;
@@ -6398,17 +6393,35 @@ video {
   pointer-events: none;
 }.disabled\:opacity-50:disabled {
   opacity: 0.5;
+}.group\/add-on-before:first-child .group-first\/add-on-before\:\!rounded-l {
+  border-top-left-radius: 0.1875rem !important;
+  border-bottom-left-radius: 0.1875rem !important;
+}.group\/add-on-before:first-child .group-first\/add-on-before\:rounded-r-none {
+  border-top-right-radius: 0px;
+  border-bottom-right-radius: 0px;
 }.group\/buttons:first-child .group-first\/buttons\:rounded-l {
   border-top-left-radius: 0.1875rem;
   border-bottom-left-radius: 0.1875rem;
+}.group\/add-on-before:first-child .group-first\/add-on-before\:\!border-x {
+  border-left-width: 1px !important;
+  border-right-width: 1px !important;
 }.group\/panel:first-child .group-first\/panel\:px-4 {
   padding-left: 1.5rem;
   padding-right: 1.5rem;
 }.group\/panel:first-child .group-first\/panel\:pt-4 {
   padding-top: 1.5rem;
+}.group\/add-on-after:last-child .group-last\/add-on-after\:\!rounded-r {
+  border-top-right-radius: 0.1875rem !important;
+  border-bottom-right-radius: 0.1875rem !important;
+}.group\/add-on-after:last-child .group-last\/add-on-after\:rounded-l-none {
+  border-top-left-radius: 0px;
+  border-bottom-left-radius: 0px;
 }.group\/buttons:last-child .group-last\/buttons\:rounded-r {
   border-top-right-radius: 0.1875rem;
   border-bottom-right-radius: 0.1875rem;
+}.group\/add-on-after:last-child .group-last\/add-on-after\:\!border-x {
+  border-left-width: 1px !important;
+  border-right-width: 1px !important;
 }@media (hover: hover) and (pointer: fine) {.group\/dualaction:hover .group-hover\/dualaction\:text-primary {
     --tw-text-opacity: 1;
     color: rgba(var(--colors-primary), var(--tw-text-opacity));
@@ -6416,30 +6429,12 @@ video {
     --tw-text-opacity: 1;
     color: rgba(var(--colors-primary), var(--tw-text-opacity));
   }
-}.group.add-on-after .group-\[\.add-on-after\]\:\!rounded-r {
-  border-top-right-radius: 0.1875rem !important;
-  border-bottom-right-radius: 0.1875rem !important;
-}.group.add-on-after .group-\[\.add-on-after\]\:rounded-l-none {
-  border-top-left-radius: 0px;
-  border-bottom-left-radius: 0px;
-}.group.add-on-before .group-\[\.add-on-before\]\:\!rounded-l {
-  border-top-left-radius: 0.1875rem !important;
-  border-bottom-left-radius: 0.1875rem !important;
-}.group.add-on-before .group-\[\.add-on-before\]\:rounded-r-none {
-  border-top-right-radius: 0px;
-  border-bottom-right-radius: 0px;
 }.group.input-group-after .group-\[\.input-group-after\]\:rounded-r-none {
   border-top-right-radius: 0px;
   border-bottom-right-radius: 0px;
 }.group.input-group-before .group-\[\.input-group-before\]\:rounded-l-none {
   border-top-left-radius: 0px;
   border-bottom-left-radius: 0px;
-}.group.add-on-after .group-\[\.add-on-after\]\:\!border-x {
-  border-left-width: 1px !important;
-  border-right-width: 1px !important;
-}.group.add-on-before .group-\[\.add-on-before\]\:\!border-x {
-  border-left-width: 1px !important;
-  border-right-width: 1px !important;
 }.group.input-group-after .group-\[\.input-group-after\]\:border-r-0 {
   border-right-width: 0px;
 }.group.input-group-before .group-\[\.input-group-before\]\:border-l-0 {
@@ -7176,9 +7171,6 @@ video {
   }.xsl\:py-3 {
     padding-top: 1.125rem;
     padding-bottom: 1.125rem;
-  }.xsl\:py-\[0\.125rem\] {
-    padding-top: 0.125rem;
-    padding-bottom: 0.125rem;
   }.xsl\:py-\[0\.25rem\] {
     padding-top: 0.25rem;
     padding-bottom: 0.25rem;
@@ -8239,9 +8231,6 @@ video {
   }.sm\:py-3 {
     padding-top: 1.125rem;
     padding-bottom: 1.125rem;
-  }.sm\:py-\[0\.125rem\] {
-    padding-top: 0.125rem;
-    padding-bottom: 0.125rem;
   }.sm\:py-\[0\.25rem\] {
     padding-top: 0.25rem;
     padding-bottom: 0.25rem;
@@ -9321,9 +9310,6 @@ video {
   }.md\:py-3 {
     padding-top: 1.125rem;
     padding-bottom: 1.125rem;
-  }.md\:py-\[0\.125rem\] {
-    padding-top: 0.125rem;
-    padding-bottom: 0.125rem;
   }.md\:py-\[0\.25rem\] {
     padding-top: 0.25rem;
     padding-bottom: 0.25rem;
@@ -10378,9 +10364,6 @@ video {
   }.lg\:py-3 {
     padding-top: 1.125rem;
     padding-bottom: 1.125rem;
-  }.lg\:py-\[0\.125rem\] {
-    padding-top: 0.125rem;
-    padding-bottom: 0.125rem;
   }.lg\:py-\[0\.25rem\] {
     padding-top: 0.25rem;
     padding-bottom: 0.25rem;
@@ -11404,9 +11387,6 @@ video {
   }.xl\:py-3 {
     padding-top: 1.125rem;
     padding-bottom: 1.125rem;
-  }.xl\:py-\[0\.125rem\] {
-    padding-top: 0.125rem;
-    padding-bottom: 0.125rem;
   }.xl\:py-\[0\.25rem\] {
     padding-top: 0.25rem;
     padding-bottom: 0.25rem;

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

@@ -3070,8 +3070,6 @@ video {
 }.inset-y-0 {
   top: 0rem;
   bottom: 0rem;
-}.bottom-\[1px\] {
-  bottom: 1px;
 }.bottom-full {
   bottom: 100%;
 }.left-0 {
@@ -4737,9 +4735,6 @@ video {
 }.py-4 {
   padding-top: 1.5rem;
   padding-bottom: 1.5rem;
-}.py-\[0\.125rem\] {
-  padding-top: 0.125rem;
-  padding-bottom: 0.125rem;
 }.py-\[0\.25rem\] {
   padding-top: 0.25rem;
   padding-bottom: 0.25rem;
@@ -6398,17 +6393,35 @@ video {
   pointer-events: none;
 }.disabled\:opacity-50:disabled {
   opacity: 0.5;
+}.group\/add-on-before:first-child .group-first\/add-on-before\:\!rounded-l {
+  border-top-left-radius: 0.1875rem !important;
+  border-bottom-left-radius: 0.1875rem !important;
+}.group\/add-on-before:first-child .group-first\/add-on-before\:rounded-r-none {
+  border-top-right-radius: 0px;
+  border-bottom-right-radius: 0px;
 }.group\/buttons:first-child .group-first\/buttons\:rounded-l {
   border-top-left-radius: 0.1875rem;
   border-bottom-left-radius: 0.1875rem;
+}.group\/add-on-before:first-child .group-first\/add-on-before\:\!border-x {
+  border-left-width: 1px !important;
+  border-right-width: 1px !important;
 }.group\/panel:first-child .group-first\/panel\:px-4 {
   padding-left: 1.5rem;
   padding-right: 1.5rem;
 }.group\/panel:first-child .group-first\/panel\:pt-4 {
   padding-top: 1.5rem;
+}.group\/add-on-after:last-child .group-last\/add-on-after\:\!rounded-r {
+  border-top-right-radius: 0.1875rem !important;
+  border-bottom-right-radius: 0.1875rem !important;
+}.group\/add-on-after:last-child .group-last\/add-on-after\:rounded-l-none {
+  border-top-left-radius: 0px;
+  border-bottom-left-radius: 0px;
 }.group\/buttons:last-child .group-last\/buttons\:rounded-r {
   border-top-right-radius: 0.1875rem;
   border-bottom-right-radius: 0.1875rem;
+}.group\/add-on-after:last-child .group-last\/add-on-after\:\!border-x {
+  border-left-width: 1px !important;
+  border-right-width: 1px !important;
 }@media (hover: hover) and (pointer: fine) {.group\/dualaction:hover .group-hover\/dualaction\:text-primary {
     --tw-text-opacity: 1;
     color: rgba(var(--colors-primary), var(--tw-text-opacity));
@@ -6416,30 +6429,12 @@ video {
     --tw-text-opacity: 1;
     color: rgba(var(--colors-primary), var(--tw-text-opacity));
   }
-}.group.add-on-after .group-\[\.add-on-after\]\:\!rounded-r {
-  border-top-right-radius: 0.1875rem !important;
-  border-bottom-right-radius: 0.1875rem !important;
-}.group.add-on-after .group-\[\.add-on-after\]\:rounded-l-none {
-  border-top-left-radius: 0px;
-  border-bottom-left-radius: 0px;
-}.group.add-on-before .group-\[\.add-on-before\]\:\!rounded-l {
-  border-top-left-radius: 0.1875rem !important;
-  border-bottom-left-radius: 0.1875rem !important;
-}.group.add-on-before .group-\[\.add-on-before\]\:rounded-r-none {
-  border-top-right-radius: 0px;
-  border-bottom-right-radius: 0px;
 }.group.input-group-after .group-\[\.input-group-after\]\:rounded-r-none {
   border-top-right-radius: 0px;
   border-bottom-right-radius: 0px;
 }.group.input-group-before .group-\[\.input-group-before\]\:rounded-l-none {
   border-top-left-radius: 0px;
   border-bottom-left-radius: 0px;
-}.group.add-on-after .group-\[\.add-on-after\]\:\!border-x {
-  border-left-width: 1px !important;
-  border-right-width: 1px !important;
-}.group.add-on-before .group-\[\.add-on-before\]\:\!border-x {
-  border-left-width: 1px !important;
-  border-right-width: 1px !important;
 }.group.input-group-after .group-\[\.input-group-after\]\:border-r-0 {
   border-right-width: 0px;
 }.group.input-group-before .group-\[\.input-group-before\]\:border-l-0 {
@@ -7176,9 +7171,6 @@ video {
   }.xsl\:py-3 {
     padding-top: 1.125rem;
     padding-bottom: 1.125rem;
-  }.xsl\:py-\[0\.125rem\] {
-    padding-top: 0.125rem;
-    padding-bottom: 0.125rem;
   }.xsl\:py-\[0\.25rem\] {
     padding-top: 0.25rem;
     padding-bottom: 0.25rem;
@@ -8239,9 +8231,6 @@ video {
   }.sm\:py-3 {
     padding-top: 1.125rem;
     padding-bottom: 1.125rem;
-  }.sm\:py-\[0\.125rem\] {
-    padding-top: 0.125rem;
-    padding-bottom: 0.125rem;
   }.sm\:py-\[0\.25rem\] {
     padding-top: 0.25rem;
     padding-bottom: 0.25rem;
@@ -9321,9 +9310,6 @@ video {
   }.md\:py-3 {
     padding-top: 1.125rem;
     padding-bottom: 1.125rem;
-  }.md\:py-\[0\.125rem\] {
-    padding-top: 0.125rem;
-    padding-bottom: 0.125rem;
   }.md\:py-\[0\.25rem\] {
     padding-top: 0.25rem;
     padding-bottom: 0.25rem;
@@ -10378,9 +10364,6 @@ video {
   }.lg\:py-3 {
     padding-top: 1.125rem;
     padding-bottom: 1.125rem;
-  }.lg\:py-\[0\.125rem\] {
-    padding-top: 0.125rem;
-    padding-bottom: 0.125rem;
   }.lg\:py-\[0\.25rem\] {
     padding-top: 0.25rem;
     padding-bottom: 0.25rem;
@@ -11404,9 +11387,6 @@ video {
   }.xl\:py-3 {
     padding-top: 1.125rem;
     padding-bottom: 1.125rem;
-  }.xl\:py-\[0\.125rem\] {
-    padding-top: 0.125rem;
-    padding-bottom: 0.125rem;
   }.xl\:py-\[0\.25rem\] {
     padding-top: 0.25rem;
     padding-bottom: 0.25rem;

package/dist/tailwind/tailwind-plugin.js

@@ -180,7 +180,7 @@ export const WestpacUIKitBasePlugin = plugin.withOptions(function(options = {})
                 }
             },
             button: {
-                base: 'inline-flex items-center justify-center rounded leading-[1.5] transition-[background] disabled:pointer-events-none disabled:opacity-50 group-[.add-on-after]:rounded-l-none group-[.add-on-before]:rounded-r-none',
+                base: 'inline-flex items-center justify-center rounded leading-[1.5] transition-[background] disabled:pointer-events-none disabled:opacity-50 group-last/add-on-after:rounded-l-none group-first/add-on-before:rounded-r-none',
                 look: {
                     base: {
                         primary: 'border border-primary bg-primary text-white hover:bg-primary-70 active:bg-primary-50',

package/dist/tailwind/utils/create-font-sizes.d.ts

@@ -1 +1,10 @@
-export declare const createFontSizes: (fontTypes: string[]) => Record<string, any>;
+type FontSizeType = Record<string, string | [fontSize: string, lineHeight: string] | [
+    fontSize: string,
+    configuration: Partial<{
+        fontWeight: string | number;
+        letterSpacing: string;
+        lineHeight: string;
+    }>
+]>;
+export declare const createFontSizes: (fontTypes: string[]) => FontSizeType;
+export {};

package/dist/tailwind/utils/generate-font-components.d.ts

@@ -1,5 +1,5 @@
-import { PluginAPI } from 'tailwindcss/types/config.js';
+import { CSSRuleObject, PluginAPI } from 'tailwindcss/types/config.js';
 export declare const generateFontComponents: (typographySizes: Record<string, {
     fontSize: string;
     lineHeight: string;
-}>, theme: PluginAPI['theme']) => Record<string, any>;
+}>, theme: PluginAPI['theme']) => CSSRuleObject[];