@westpac/ui 0.14.0 → 0.15.0

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

@@ -1,12 +1,8 @@
-import { ReactNode } from 'react';
 import { type AriaRadioGroupProps } from 'react-aria';
 import { type RadioGroupState } from 'react-stately';
 import { HintProps } from '../index.js';
+import { RadioGroupRadioProps } from './components/radio-group-radio/radio-group-radio.types.js';
 export type RadioGroupProps = {
-    /**
-     * The `Radio` components to render
-     */
-    children: ReactNode[];
     /**
      * String to override base style
      */
@@ -19,6 +15,10 @@ export type RadioGroupProps = {
      * hint message
      */
     hintMessage?: HintProps['children'];
+    /**
+     * The `Radio` components to render
+     */
+    radios: RadioGroupRadioProps[];
     /**
      * Amount of Radios to display, remainder will be hidden behind reveal button
      */

package/dist/components/selector/components/selector-button-group/selector-button-group.component.d.ts

@@ -2,10 +2,3 @@
 import { SelectorButtonGroupContextState, SelectorButtonGroupProps } from './selector-button-group.types.js';
 export declare const SelectorButtonContext: import("react").Context<SelectorButtonGroupContextState>;
 export declare function SelectorButtonGroup({ className, children, label, orientation, errorMessage, description, value, isDisabled, ...props }: SelectorButtonGroupProps): import("react/jsx-runtime").JSX.Element;
-export declare namespace SelectorButtonGroup {
-    var Option: import("react").ForwardRefExoticComponent<{
-        id: string;
-        isDisabled?: boolean | undefined;
-        tag?: keyof JSX.IntrinsicElements | undefined;
-    } & import("react").ButtonHTMLAttributes<Element> & Omit<import("../../../index.js").FlexiCellProps, "href" | "dualAction"> & import("react").RefAttributes<unknown>>;
-}

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

@@ -16,7 +16,6 @@ function _extends() {
 import { createContext, useCallback, useState } from 'react';
 import { useField } from 'react-aria';
 import { ErrorMessage, Hint, Label } from '../../../index.js';
-import { SelectorButtonGroupOption } from './components/index.js';
 import { styles } from './selector-button-group.styles.js';
 export const SelectorButtonContext = createContext({
     value: '',
@@ -56,4 +55,3 @@ export function SelectorButtonGroup({ className , children , label , orientation
         value: state
     }, children));
 }
-SelectorButtonGroup.Option = SelectorButtonGroupOption;

package/dist/components/selector/components/selector-checkbox-group/selector-checkbox-group.component.d.ts

@@ -2,6 +2,3 @@ import React from 'react';
 import { type SelectorCheckboxGroupProps } from './selector-checkbox-group.types.js';
 export declare const SelectorCheckboxGroupContext: React.Context<import("react-stately").CheckboxGroupState>;
 export declare function SelectorCheckboxGroup(props: SelectorCheckboxGroupProps): import("react/jsx-runtime").JSX.Element;
-export declare namespace SelectorCheckboxGroup {
-    var Option: React.ForwardRefExoticComponent<import("./components/index.js").SelectorCheckboxGroupOptionProps & React.RefAttributes<unknown>>;
-}

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

@@ -17,7 +17,6 @@ import React, { createContext } from 'react';
 import { useCheckboxGroup } from 'react-aria';
 import { useCheckboxGroupState } from 'react-stately';
 import { ErrorMessage, Hint, Label } from '../../../index.js';
-import { SelectorCheckboxGroupOption } from './components/index.js';
 import { styles } from './selector-checkbox-group.styles.js';
 export const SelectorCheckboxGroupContext = createContext({
     value: [],
@@ -44,4 +43,3 @@ export function SelectorCheckboxGroup(props) {
         value: state
     }, children));
 }
-SelectorCheckboxGroup.Option = SelectorCheckboxGroupOption;

package/dist/components/selector/components/selector-link-group/selector-link-group.component.d.ts

@@ -4,10 +4,3 @@ export declare const SelectorLinkContext: import("react").Context<{
     isDisabled?: boolean | undefined;
 }>;
 export declare function SelectorLinkGroup({ className, children, label, orientation, errorMessage, description, isDisabled, ...props }: SelectorLinkGroupProps): import("react/jsx-runtime").JSX.Element;
-export declare namespace SelectorLinkGroup {
-    var Option: import("react").ForwardRefExoticComponent<{
-        href: string;
-        isDisabled?: boolean | undefined;
-        tag?: keyof JSX.IntrinsicElements | undefined;
-    } & Omit<import("react-aria").AriaLinkOptions, "isDisabled" | "elementType"> & Omit<import("../../../index.js").FlexiCellProps, "href" | "dualAction"> & import("react").AnchorHTMLAttributes<Element> & import("react").RefAttributes<unknown>>;
-}

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

@@ -16,7 +16,6 @@ function _extends() {
 import { createContext } from 'react';
 import { useField } from 'react-aria';
 import { ErrorMessage, Hint, Label } from '../../../index.js';
-import { SelectorLinkGroupOption } from './components/index.js';
 import { styles } from './selector-link-group.styles.js';
 export const SelectorLinkContext = createContext({
     isDisabled: undefined
@@ -44,4 +43,3 @@ export function SelectorLinkGroup({ className , children , label , orientation =
         value: state
     }, children));
 }
-SelectorLinkGroup.Option = SelectorLinkGroupOption;

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

@@ -2,6 +2,3 @@ import React from 'react';
 import { type SelectorRadioGroupContextState, type SelectorRadioGroupProps } from './selector-radio-group.types.js';
 export declare const SelectorRadioGroupContext: React.Context<SelectorRadioGroupContextState>;
 export declare function SelectorRadioGroup({ className, children, label, orientation, errorMessage, description, ...props }: SelectorRadioGroupProps): import("react/jsx-runtime").JSX.Element;
-export declare namespace SelectorRadioGroup {
-    var Option: React.ForwardRefExoticComponent<import("./components/index.js").SelectorRadioGroupOptionProps & React.RefAttributes<unknown>>;
-}

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

@@ -17,7 +17,6 @@ import React, { createContext } from 'react';
 import { useRadioGroup } from 'react-aria';
 import { useRadioGroupState } from 'react-stately';
 import { ErrorMessage, Hint, Label } from '../../../index.js';
-import { SelectorRadioGroupOption } from './components/index.js';
 import { styles } from './selector-radio-group.styles.js';
 export const SelectorRadioGroupContext = createContext({
     name: '',
@@ -57,4 +56,3 @@ export function SelectorRadioGroup({ className , children , label , orientation
         }
     }, children));
 }
-SelectorRadioGroup.Option = SelectorRadioGroupOption;

package/dist/css/westpac-ui.css

@@ -2643,8 +2643,6 @@ video {
   flex: none;
 }.shrink-0 {
   flex-shrink: 0;
-}.flex-grow-0 {
-  flex-grow: 0;
 }.-translate-x-1\/2 {
   --tw-translate-x: -50%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -6048,6 +6046,9 @@ video {
   }.xsl\:border-link {
     --tw-border-opacity: 1;
     border-color: rgba(var(--colors-link), var(--tw-border-opacity));
+  }.xsl\:border-muted {
+    --tw-border-opacity: 1;
+    border-color: rgba(var(--colors-muted), var(--tw-border-opacity));
   }.xsl\:border-neutral {
     --tw-border-opacity: 1;
     border-color: rgba(var(--colors-neutral), var(--tw-border-opacity));
@@ -6086,6 +6087,9 @@ video {
   }.xsl\:bg-background {
     --tw-bg-opacity: 1;
     background-color: rgba(var(--colors-background), var(--tw-bg-opacity));
+  }.xsl\:bg-border {
+    --tw-bg-opacity: 1;
+    background-color: rgba(var(--colors-border), var(--tw-bg-opacity));
   }.xsl\:bg-border-20 {
     --tw-bg-opacity: 1;
     background-color: rgba(var(--colors-border-20), var(--tw-bg-opacity));
@@ -6104,6 +6108,9 @@ video {
   }.xsl\:bg-link {
     --tw-bg-opacity: 1;
     background-color: rgba(var(--colors-link), var(--tw-bg-opacity));
+  }.xsl\:bg-muted {
+    --tw-bg-opacity: 1;
+    background-color: rgba(var(--colors-muted), var(--tw-bg-opacity));
   }.xsl\:bg-neutral {
     --tw-bg-opacity: 1;
     background-color: rgba(var(--colors-neutral), var(--tw-bg-opacity));
@@ -6215,6 +6222,8 @@ video {
     font-size: 0.75rem;
   }.xsl\:font-bold {
     font-weight: 700;
+  }.xsl\:font-medium {
+    font-weight: 500;
   }.xsl\:font-normal {
     font-weight: 400;
   }.xsl\:uppercase {
@@ -7076,6 +7085,9 @@ video {
   }.sm\:border-link {
     --tw-border-opacity: 1;
     border-color: rgba(var(--colors-link), var(--tw-border-opacity));
+  }.sm\:border-muted {
+    --tw-border-opacity: 1;
+    border-color: rgba(var(--colors-muted), var(--tw-border-opacity));
   }.sm\:border-neutral {
     --tw-border-opacity: 1;
     border-color: rgba(var(--colors-neutral), var(--tw-border-opacity));
@@ -7114,6 +7126,9 @@ video {
   }.sm\:bg-background {
     --tw-bg-opacity: 1;
     background-color: rgba(var(--colors-background), var(--tw-bg-opacity));
+  }.sm\:bg-border {
+    --tw-bg-opacity: 1;
+    background-color: rgba(var(--colors-border), var(--tw-bg-opacity));
   }.sm\:bg-border-20 {
     --tw-bg-opacity: 1;
     background-color: rgba(var(--colors-border-20), var(--tw-bg-opacity));
@@ -7132,6 +7147,9 @@ video {
   }.sm\:bg-link {
     --tw-bg-opacity: 1;
     background-color: rgba(var(--colors-link), var(--tw-bg-opacity));
+  }.sm\:bg-muted {
+    --tw-bg-opacity: 1;
+    background-color: rgba(var(--colors-muted), var(--tw-bg-opacity));
   }.sm\:bg-neutral {
     --tw-bg-opacity: 1;
     background-color: rgba(var(--colors-neutral), var(--tw-bg-opacity));
@@ -7254,6 +7272,8 @@ video {
     font-size: 0.75rem;
   }.sm\:font-bold {
     font-weight: 700;
+  }.sm\:font-medium {
+    font-weight: 500;
   }.sm\:font-normal {
     font-weight: 400;
   }.sm\:uppercase {
@@ -8118,6 +8138,9 @@ video {
   }.md\:border-link {
     --tw-border-opacity: 1;
     border-color: rgba(var(--colors-link), var(--tw-border-opacity));
+  }.md\:border-muted {
+    --tw-border-opacity: 1;
+    border-color: rgba(var(--colors-muted), var(--tw-border-opacity));
   }.md\:border-neutral {
     --tw-border-opacity: 1;
     border-color: rgba(var(--colors-neutral), var(--tw-border-opacity));
@@ -8156,6 +8179,9 @@ video {
   }.md\:bg-background {
     --tw-bg-opacity: 1;
     background-color: rgba(var(--colors-background), var(--tw-bg-opacity));
+  }.md\:bg-border {
+    --tw-bg-opacity: 1;
+    background-color: rgba(var(--colors-border), var(--tw-bg-opacity));
   }.md\:bg-border-20 {
     --tw-bg-opacity: 1;
     background-color: rgba(var(--colors-border-20), var(--tw-bg-opacity));
@@ -8174,6 +8200,9 @@ video {
   }.md\:bg-link {
     --tw-bg-opacity: 1;
     background-color: rgba(var(--colors-link), var(--tw-bg-opacity));
+  }.md\:bg-muted {
+    --tw-bg-opacity: 1;
+    background-color: rgba(var(--colors-muted), var(--tw-bg-opacity));
   }.md\:bg-neutral {
     --tw-bg-opacity: 1;
     background-color: rgba(var(--colors-neutral), var(--tw-bg-opacity));
@@ -8304,6 +8333,8 @@ video {
     font-size: 0.75rem;
   }.md\:font-bold {
     font-weight: 700;
+  }.md\:font-medium {
+    font-weight: 500;
   }.md\:font-normal {
     font-weight: 400;
   }.md\:uppercase {
@@ -9155,6 +9186,9 @@ video {
   }.lg\:border-link {
     --tw-border-opacity: 1;
     border-color: rgba(var(--colors-link), var(--tw-border-opacity));
+  }.lg\:border-muted {
+    --tw-border-opacity: 1;
+    border-color: rgba(var(--colors-muted), var(--tw-border-opacity));
   }.lg\:border-neutral {
     --tw-border-opacity: 1;
     border-color: rgba(var(--colors-neutral), var(--tw-border-opacity));
@@ -9193,6 +9227,9 @@ video {
   }.lg\:bg-background {
     --tw-bg-opacity: 1;
     background-color: rgba(var(--colors-background), var(--tw-bg-opacity));
+  }.lg\:bg-border {
+    --tw-bg-opacity: 1;
+    background-color: rgba(var(--colors-border), var(--tw-bg-opacity));
   }.lg\:bg-border-20 {
     --tw-bg-opacity: 1;
     background-color: rgba(var(--colors-border-20), var(--tw-bg-opacity));
@@ -9211,6 +9248,9 @@ video {
   }.lg\:bg-link {
     --tw-bg-opacity: 1;
     background-color: rgba(var(--colors-link), var(--tw-bg-opacity));
+  }.lg\:bg-muted {
+    --tw-bg-opacity: 1;
+    background-color: rgba(var(--colors-muted), var(--tw-bg-opacity));
   }.lg\:bg-neutral {
     --tw-bg-opacity: 1;
     background-color: rgba(var(--colors-neutral), var(--tw-bg-opacity));
@@ -9323,6 +9363,8 @@ video {
     font-size: 0.75rem;
   }.lg\:font-bold {
     font-weight: 700;
+  }.lg\:font-medium {
+    font-weight: 500;
   }.lg\:font-normal {
     font-weight: 400;
   }.lg\:uppercase {
@@ -10151,6 +10193,9 @@ video {
   }.xl\:border-link {
     --tw-border-opacity: 1;
     border-color: rgba(var(--colors-link), var(--tw-border-opacity));
+  }.xl\:border-muted {
+    --tw-border-opacity: 1;
+    border-color: rgba(var(--colors-muted), var(--tw-border-opacity));
   }.xl\:border-neutral {
     --tw-border-opacity: 1;
     border-color: rgba(var(--colors-neutral), var(--tw-border-opacity));
@@ -10189,6 +10234,9 @@ video {
   }.xl\:bg-background {
     --tw-bg-opacity: 1;
     background-color: rgba(var(--colors-background), var(--tw-bg-opacity));
+  }.xl\:bg-border {
+    --tw-bg-opacity: 1;
+    background-color: rgba(var(--colors-border), var(--tw-bg-opacity));
   }.xl\:bg-border-20 {
     --tw-bg-opacity: 1;
     background-color: rgba(var(--colors-border-20), var(--tw-bg-opacity));
@@ -10207,6 +10255,9 @@ video {
   }.xl\:bg-link {
     --tw-bg-opacity: 1;
     background-color: rgba(var(--colors-link), var(--tw-bg-opacity));
+  }.xl\:bg-muted {
+    --tw-bg-opacity: 1;
+    background-color: rgba(var(--colors-muted), var(--tw-bg-opacity));
   }.xl\:bg-neutral {
     --tw-bg-opacity: 1;
     background-color: rgba(var(--colors-neutral), var(--tw-bg-opacity));
@@ -10313,6 +10364,8 @@ video {
     font-size: 0.75rem;
   }.xl\:font-bold {
     font-weight: 700;
+  }.xl\:font-medium {
+    font-weight: 500;
   }.xl\:font-normal {
     font-weight: 400;
   }.xl\:uppercase {

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

@@ -2643,8 +2643,6 @@ video {
   flex: none;
 }.shrink-0 {
   flex-shrink: 0;
-}.flex-grow-0 {
-  flex-grow: 0;
 }.-translate-x-1\/2 {
   --tw-translate-x: -50%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -6048,6 +6046,9 @@ video {
   }.xsl\:border-link {
     --tw-border-opacity: 1;
     border-color: rgba(var(--colors-link), var(--tw-border-opacity));
+  }.xsl\:border-muted {
+    --tw-border-opacity: 1;
+    border-color: rgba(var(--colors-muted), var(--tw-border-opacity));
   }.xsl\:border-neutral {
     --tw-border-opacity: 1;
     border-color: rgba(var(--colors-neutral), var(--tw-border-opacity));
@@ -6086,6 +6087,9 @@ video {
   }.xsl\:bg-background {
     --tw-bg-opacity: 1;
     background-color: rgba(var(--colors-background), var(--tw-bg-opacity));
+  }.xsl\:bg-border {
+    --tw-bg-opacity: 1;
+    background-color: rgba(var(--colors-border), var(--tw-bg-opacity));
   }.xsl\:bg-border-20 {
     --tw-bg-opacity: 1;
     background-color: rgba(var(--colors-border-20), var(--tw-bg-opacity));
@@ -6104,6 +6108,9 @@ video {
   }.xsl\:bg-link {
     --tw-bg-opacity: 1;
     background-color: rgba(var(--colors-link), var(--tw-bg-opacity));
+  }.xsl\:bg-muted {
+    --tw-bg-opacity: 1;
+    background-color: rgba(var(--colors-muted), var(--tw-bg-opacity));
   }.xsl\:bg-neutral {
     --tw-bg-opacity: 1;
     background-color: rgba(var(--colors-neutral), var(--tw-bg-opacity));
@@ -6215,6 +6222,8 @@ video {
     font-size: 0.75rem;
   }.xsl\:font-bold {
     font-weight: 700;
+  }.xsl\:font-medium {
+    font-weight: 500;
   }.xsl\:font-normal {
     font-weight: 400;
   }.xsl\:uppercase {
@@ -7076,6 +7085,9 @@ video {
   }.sm\:border-link {
     --tw-border-opacity: 1;
     border-color: rgba(var(--colors-link), var(--tw-border-opacity));
+  }.sm\:border-muted {
+    --tw-border-opacity: 1;
+    border-color: rgba(var(--colors-muted), var(--tw-border-opacity));
   }.sm\:border-neutral {
     --tw-border-opacity: 1;
     border-color: rgba(var(--colors-neutral), var(--tw-border-opacity));
@@ -7114,6 +7126,9 @@ video {
   }.sm\:bg-background {
     --tw-bg-opacity: 1;
     background-color: rgba(var(--colors-background), var(--tw-bg-opacity));
+  }.sm\:bg-border {
+    --tw-bg-opacity: 1;
+    background-color: rgba(var(--colors-border), var(--tw-bg-opacity));
   }.sm\:bg-border-20 {
     --tw-bg-opacity: 1;
     background-color: rgba(var(--colors-border-20), var(--tw-bg-opacity));
@@ -7132,6 +7147,9 @@ video {
   }.sm\:bg-link {
     --tw-bg-opacity: 1;
     background-color: rgba(var(--colors-link), var(--tw-bg-opacity));
+  }.sm\:bg-muted {
+    --tw-bg-opacity: 1;
+    background-color: rgba(var(--colors-muted), var(--tw-bg-opacity));
   }.sm\:bg-neutral {
     --tw-bg-opacity: 1;
     background-color: rgba(var(--colors-neutral), var(--tw-bg-opacity));
@@ -7254,6 +7272,8 @@ video {
     font-size: 0.75rem;
   }.sm\:font-bold {
     font-weight: 700;
+  }.sm\:font-medium {
+    font-weight: 500;
   }.sm\:font-normal {
     font-weight: 400;
   }.sm\:uppercase {
@@ -8118,6 +8138,9 @@ video {
   }.md\:border-link {
     --tw-border-opacity: 1;
     border-color: rgba(var(--colors-link), var(--tw-border-opacity));
+  }.md\:border-muted {
+    --tw-border-opacity: 1;
+    border-color: rgba(var(--colors-muted), var(--tw-border-opacity));
   }.md\:border-neutral {
     --tw-border-opacity: 1;
     border-color: rgba(var(--colors-neutral), var(--tw-border-opacity));
@@ -8156,6 +8179,9 @@ video {
   }.md\:bg-background {
     --tw-bg-opacity: 1;
     background-color: rgba(var(--colors-background), var(--tw-bg-opacity));
+  }.md\:bg-border {
+    --tw-bg-opacity: 1;
+    background-color: rgba(var(--colors-border), var(--tw-bg-opacity));
   }.md\:bg-border-20 {
     --tw-bg-opacity: 1;
     background-color: rgba(var(--colors-border-20), var(--tw-bg-opacity));
@@ -8174,6 +8200,9 @@ video {
   }.md\:bg-link {
     --tw-bg-opacity: 1;
     background-color: rgba(var(--colors-link), var(--tw-bg-opacity));
+  }.md\:bg-muted {
+    --tw-bg-opacity: 1;
+    background-color: rgba(var(--colors-muted), var(--tw-bg-opacity));
   }.md\:bg-neutral {
     --tw-bg-opacity: 1;
     background-color: rgba(var(--colors-neutral), var(--tw-bg-opacity));
@@ -8304,6 +8333,8 @@ video {
     font-size: 0.75rem;
   }.md\:font-bold {
     font-weight: 700;
+  }.md\:font-medium {
+    font-weight: 500;
   }.md\:font-normal {
     font-weight: 400;
   }.md\:uppercase {
@@ -9155,6 +9186,9 @@ video {
   }.lg\:border-link {
     --tw-border-opacity: 1;
     border-color: rgba(var(--colors-link), var(--tw-border-opacity));
+  }.lg\:border-muted {
+    --tw-border-opacity: 1;
+    border-color: rgba(var(--colors-muted), var(--tw-border-opacity));
   }.lg\:border-neutral {
     --tw-border-opacity: 1;
     border-color: rgba(var(--colors-neutral), var(--tw-border-opacity));
@@ -9193,6 +9227,9 @@ video {
   }.lg\:bg-background {
     --tw-bg-opacity: 1;
     background-color: rgba(var(--colors-background), var(--tw-bg-opacity));
+  }.lg\:bg-border {
+    --tw-bg-opacity: 1;
+    background-color: rgba(var(--colors-border), var(--tw-bg-opacity));
   }.lg\:bg-border-20 {
     --tw-bg-opacity: 1;
     background-color: rgba(var(--colors-border-20), var(--tw-bg-opacity));
@@ -9211,6 +9248,9 @@ video {
   }.lg\:bg-link {
     --tw-bg-opacity: 1;
     background-color: rgba(var(--colors-link), var(--tw-bg-opacity));
+  }.lg\:bg-muted {
+    --tw-bg-opacity: 1;
+    background-color: rgba(var(--colors-muted), var(--tw-bg-opacity));
   }.lg\:bg-neutral {
     --tw-bg-opacity: 1;
     background-color: rgba(var(--colors-neutral), var(--tw-bg-opacity));
@@ -9323,6 +9363,8 @@ video {
     font-size: 0.75rem;
   }.lg\:font-bold {
     font-weight: 700;
+  }.lg\:font-medium {
+    font-weight: 500;
   }.lg\:font-normal {
     font-weight: 400;
   }.lg\:uppercase {
@@ -10151,6 +10193,9 @@ video {
   }.xl\:border-link {
     --tw-border-opacity: 1;
     border-color: rgba(var(--colors-link), var(--tw-border-opacity));
+  }.xl\:border-muted {
+    --tw-border-opacity: 1;
+    border-color: rgba(var(--colors-muted), var(--tw-border-opacity));
   }.xl\:border-neutral {
     --tw-border-opacity: 1;
     border-color: rgba(var(--colors-neutral), var(--tw-border-opacity));
@@ -10189,6 +10234,9 @@ video {
   }.xl\:bg-background {
     --tw-bg-opacity: 1;
     background-color: rgba(var(--colors-background), var(--tw-bg-opacity));
+  }.xl\:bg-border {
+    --tw-bg-opacity: 1;
+    background-color: rgba(var(--colors-border), var(--tw-bg-opacity));
   }.xl\:bg-border-20 {
     --tw-bg-opacity: 1;
     background-color: rgba(var(--colors-border-20), var(--tw-bg-opacity));
@@ -10207,6 +10255,9 @@ video {
   }.xl\:bg-link {
     --tw-bg-opacity: 1;
     background-color: rgba(var(--colors-link), var(--tw-bg-opacity));
+  }.xl\:bg-muted {
+    --tw-bg-opacity: 1;
+    background-color: rgba(var(--colors-muted), var(--tw-bg-opacity));
   }.xl\:bg-neutral {
     --tw-bg-opacity: 1;
     background-color: rgba(var(--colors-neutral), var(--tw-bg-opacity));
@@ -10313,6 +10364,8 @@ video {
     font-size: 0.75rem;
   }.xl\:font-bold {
     font-weight: 700;
+  }.xl\:font-medium {
+    font-weight: 500;
   }.xl\:font-normal {
     font-weight: 400;
   }.xl\:uppercase {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@westpac/ui",
-  "version": "0.14.0",
+  "version": "0.15.0",
   "license": "MIT",
   "sideEffects": false,
   "type": "module",
@@ -256,8 +256,8 @@
     "vite": "^4.3.9",
     "vitest": "^0.30.1",
     "@westpac/eslint-config": "~0.1.0",
-    "@westpac/ts-config": "~0.0.0",
-    "@westpac/test-config": "~0.0.0"
+    "@westpac/test-config": "~0.0.0",
+    "@westpac/ts-config": "~0.0.0"
   },
   "dependencies": {
     "@duetds/date-picker": "~1.4.0",

package/src/components/badge/badge.component.tsx

@@ -6,11 +6,11 @@ import { styles } from './badge.styles.js';
 import { type BadgeProps } from './badge.types.js';
 
 export function BaseBadge(
-  { className, tag: Tag = 'div', color = 'hero', type = 'default', children, ...props }: BadgeProps,
+  { className, tag: Tag = 'div', color = 'hero', type = 'default', soft = false, children, ...props }: BadgeProps,
   ref: any,
 ) {
   return (
-    <Tag {...({ ref } as any)} className={styles({ className, color, type })} {...props}>
+    <Tag {...({ ref } as any)} className={styles({ className, color, type, soft })} {...props}>
       {children}
     </Tag>
   );

package/src/components/badge/badge.styles.ts

@@ -6,10 +6,11 @@ export const styles = tv(
     variants: {
       color: {
         danger: 'border-danger bg-danger text-white',
-        faint: 'border-border bg-white text-muted',
+        faint: 'border-border bg-border text-muted',
         hero: 'border-hero bg-hero text-white',
         info: 'border-info bg-info text-white',
         neutral: 'border-neutral bg-neutral text-white',
+        muted: 'border-muted bg-muted text-white',
         primary: 'border-primary bg-primary text-white',
         success: 'border-success bg-success text-white',
         warning: 'border-warning bg-warning text-white',
@@ -23,10 +24,60 @@ export const styles = tv(
         'warning-inverted': 'border-none bg-white text-warning',
       },
       type: {
-        pill: 'typography-body-10 rounded-xl px-[0.4375rem] py-[0.25rem] font-bold leading-none',
+        pill: 'typography-body-10 rounded-xl px-[0.4375rem] py-[0.25rem] font-medium leading-none',
         default: 'rounded-sm px-1 py-0.5 pb-[0.125rem] text-[0.75rem] leading-none',
       },
+      soft: {
+        true: 'bg-white',
+      },
     },
+    compoundVariants: [
+      {
+        color: 'danger',
+        soft: true,
+        className: 'text-danger',
+      },
+      {
+        color: 'faint',
+        soft: true,
+        className: 'text-muted',
+      },
+      {
+        color: 'hero',
+        soft: true,
+        className: 'text-hero',
+      },
+      {
+        color: 'info',
+        soft: true,
+        className: 'text-info',
+      },
+      {
+        color: 'neutral',
+        soft: true,
+        className: 'text-neutral',
+      },
+      {
+        color: 'muted',
+        soft: true,
+        className: 'text-muted',
+      },
+      {
+        color: 'primary',
+        soft: true,
+        className: 'text-primary',
+      },
+      {
+        color: 'success',
+        soft: true,
+        className: 'text-success',
+      },
+      {
+        color: 'warning',
+        soft: true,
+        className: 'text-warning',
+      },
+    ],
   },
   { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },
 );

package/src/components/badge/badge.types.ts

@@ -15,6 +15,11 @@ export type BadgeProps = {
    * @default hero
    */
   color?: Variants['color'];
+  /**
+   * Removes background colour and adjusts text colour.
+   * @default false
+   */
+  soft?: Variants['soft'];
   /**
    * Tag to render
    * @default div

package/src/components/button-group/button-group.component.tsx

@@ -1,10 +1,10 @@
 'use client';
 
-import React, { ReactElement, cloneElement, createContext } from 'react';
+import React, { createContext } from 'react';
 import { useRadioGroup } from 'react-aria';
 import { useRadioGroupState } from 'react-stately';
 
-import { ErrorMessage, Hint, Label } from '../index.js';
+import { ButtonGroupButton, ErrorMessage, Hint, Label } from '../index.js';
 
 import { styles as buttonGroupStyles } from './button-group.styles.js';
 import { ButtonGroupContextState, type ButtonGroupProps } from './button-group.types.js';
@@ -27,7 +27,7 @@ export const ButtonGroupContext = createContext<ButtonGroupContextState>({
 
 export function ButtonGroup({
   className,
-  children,
+  buttons,
   label,
   look = 'hero',
   size = 'medium',
@@ -47,12 +47,6 @@ export function ButtonGroup({
     state,
   );
   const styles = buttonGroupStyles({});
-  const childrenToRender = children.map((child, index) => {
-    return cloneElement(child as ReactElement, {
-      key: index,
-      className: 'group/buttons',
-    });
-  });
 
   return (
     <div className={styles.base({ className })} {...radioGroupProps}>
@@ -63,7 +57,9 @@ export function ButtonGroup({
       )}
       <div className={styles.buttonWrapper()}>
         <ButtonGroupContext.Provider value={{ ...state, size, look, block }}>
-          {childrenToRender}
+          {buttons.map((button, index) => (
+            <ButtonGroupButton key={index} className="group/buttons" {...button} />
+          ))}
         </ButtonGroupContext.Provider>
       </div>
     </div>