@westpac/ui 0.13.0 → 0.14.1

package/dist/components/bottom-sheet/components/bottom-sheet-modal/bottom-sheet-modal.types.d.ts

@@ -0,0 +1,30 @@
+import { CSSProperties, ReactNode } from 'react';
+import { AriaModalOverlayProps } from 'react-aria';
+import { OverlayTriggerState } from 'react-stately';
+export type Sizes = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
+export type ModalProps = AriaModalOverlayProps & {
+    /**
+     * Body content of Modal
+     */
+    children: ReactNode;
+    /**
+     * Height of the Modal
+     */
+    height?: CSSProperties['height'];
+    /**
+     * Element where the modal will be rendered, by default it will be into the body
+     */
+    portalContainer?: Element;
+    /**
+     * Size of the Modal
+     */
+    size?: Sizes;
+    /**
+     * The modal opening and closing state, should use OverlayTriggerState from react-stately
+     */
+    state: OverlayTriggerState;
+    /**
+     * Width of the Modal
+     */
+    width?: CSSProperties['width'];
+};

package/dist/components/bottom-sheet/index.d.ts

@@ -0,0 +1,2 @@
+export * from './bottom-sheet.component.js';
+export * from './bottom-sheet.types.js';

package/dist/components/bottom-sheet/index.js

@@ -0,0 +1,2 @@
+export * from './bottom-sheet.component.js';
+export * from './bottom-sheet.types.js';

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

@@ -1,10 +1,2 @@
-import React from 'react';
 import { type BreadcrumbProps } from './breadcrumb.types.js';
 export declare function Breadcrumb({ className, children, ...props }: BreadcrumbProps): import("react/jsx-runtime").JSX.Element;
-export declare namespace Breadcrumb {
-    var Item: React.ForwardRefExoticComponent<{
-        isCurrent?: boolean | undefined;
-        isDisabled?: boolean | undefined;
-        tag?: keyof JSX.IntrinsicElements | undefined;
-    } & React.AnchorHTMLAttributes<Element> & React.RefAttributes<any>>;
-}

package/dist/components/breadcrumb/breadcrumb.component.js

@@ -15,7 +15,6 @@ function _extends() {
 }
 import React, { Children, cloneElement } from 'react';
 import { useBreadcrumbs } from 'react-aria';
-import { BreadcrumbItem } from './components/breadcrumb-item/breadcrumb-item.component.js';
 export function Breadcrumb({ className , children , ...props }) {
     const { navProps  } = useBreadcrumbs(props);
     const childCount = Children.count(children);
@@ -28,4 +27,3 @@ export function Breadcrumb({ className , children , ...props }) {
             isCurrent: i === childCount - 1
         })) !== null && _cloneElement !== void 0 ? _cloneElement : React.createElement(React.Fragment, null))));
 }
-Breadcrumb.Item = BreadcrumbItem;

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

@@ -2,7 +2,7 @@ import { HTMLAttributes, ReactElement } from 'react';
 import { type BreadcrumbItemProps } from './components/breadcrumb-item/index.js';
 export type BreadcrumbProps = HTMLAttributes<HTMLDivElement> & {
     /**
-     * Children with Breadcrumb.Item[]
+     * Children with BreadcrumbItem[]
      */
     children: ReactElement<BreadcrumbItemProps> | ReactElement<BreadcrumbItemProps>[];
 };

package/dist/components/breadcrumb/components/breadcrumb-item/breadcrumb-item.component.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 import { type BreadcrumbItemProps } from './breadcrumb-item.types.js';
 export declare function BaseBreadcrumbItem({ className, isDisabled, isCurrent, href, children, tag: Tag, ...props }: BreadcrumbItemProps, propRef: any): import("react/jsx-runtime").JSX.Element;
 export declare const BreadcrumbItem: React.ForwardRefExoticComponent<{
+    children?: React.ReactNode;
     isCurrent?: boolean | undefined;
     isDisabled?: boolean | undefined;
     tag?: keyof JSX.IntrinsicElements | undefined;

package/dist/components/breadcrumb/components/breadcrumb-item/breadcrumb-item.component.js

@@ -1,3 +1,4 @@
+'use client';
 function _extends() {
     _extends = Object.assign || function(target) {
         for(var i = 1; i < arguments.length; i++){
@@ -48,4 +49,3 @@ export function BaseBreadcrumbItem({ className , isDisabled =false , isCurrent =
     })));
 }
 export const BreadcrumbItem = forwardRef(BaseBreadcrumbItem);
-BreadcrumbItem.displayName = 'Breadcrumb.Item';

package/dist/components/breadcrumb/components/breadcrumb-item/breadcrumb-item.types.d.ts

@@ -1,15 +1,22 @@
-import { AnchorHTMLAttributes } from 'react';
+import { AnchorHTMLAttributes, ReactNode } from 'react';
 export type BreadcrumbItemProps = {
+    /**
+     * BreadCrumbItem body content
+     */
+    children?: ReactNode;
     /**
      * isCurrent flag
+     * @default false
      */
     isCurrent?: boolean;
     /**
      * isDisabled flag
+     * @default false
      */
     isDisabled?: boolean;
     /**
      * Tag to render
+     * @default span
      */
     tag?: keyof JSX.IntrinsicElements;
 } & AnchorHTMLAttributes<Element>;

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

@@ -1,2 +1,3 @@
+export { BreadcrumbItem } from './components/breadcrumb-item/breadcrumb-item.component.js';
 export { Breadcrumb } from './breadcrumb.component.js';
 export { type BreadcrumbProps } from './breadcrumb.types.js';

package/dist/components/breadcrumb/index.js

@@ -1 +1,2 @@
+export { BreadcrumbItem } from './components/breadcrumb-item/breadcrumb-item.component.js';
 export { Breadcrumb } from './breadcrumb.component.js';

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

@@ -3,6 +3,7 @@ export declare const Button: React.ForwardRefExoticComponent<{
     block?: boolean | {
         [x: string]: boolean | undefined;
     } | undefined;
+    children?: React.ReactNode;
     iconAfter?: ((props: import("../icon/icon.types.js").IconProps) => JSX.Element) | undefined;
     iconBefore?: ((props: import("../icon/icon.types.js").IconProps) => JSX.Element) | undefined;
     iconColor?: "link" | "text" | "border" | "heading" | "primary" | "hero" | "success" | "info" | "warning" | "danger" | "system" | "white" | "black" | "background" | "borderDark" | "focus" | "light" | "muted" | "neutral" | "pop" | (string & {

package/dist/components/button/button.component.js

@@ -17,7 +17,7 @@ import React, { forwardRef, useMemo } from 'react';
 import { mergeProps, useFocusRing } from 'react-aria';
 import { styles as buttonStyles } from './button.styles.js';
 import { getIconSize } from './button.utils.js';
-function BaseButton({ className , size ='medium' , look ='hero' , soft , block , justify , tag: Tag = 'button' , iconBefore: IconBefore , iconAfter: IconAfter , iconColor , children , ...props }, ref) {
+function BaseButton({ className , size ='medium' , look ='hero' , soft , block =false , justify , tag: Tag = 'button' , iconBefore: IconBefore , iconAfter: IconAfter , iconColor , children , ...props }, ref) {
     const { isFocusVisible , focusProps  } = useFocusRing();
     const iconSize = useMemo(()=>getIconSize(size), [
         size

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

@@ -39,6 +39,9 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
         true: {
             base: string;
         };
+        false: {
+            base: string;
+        };
     };
     justify: {
         true: {
@@ -102,6 +105,9 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
         true: {
             base: string;
         };
+        false: {
+            base: string;
+        };
     };
     justify: {
         true: {

package/dist/components/button/button.styles.js

@@ -1,7 +1,7 @@
 import { tv } from 'tailwind-variants';
 export const styles = tv({
     slots: {
-        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: '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',
         iconBefore: '',
         iconAfter: '',
         dropdown: 'ml-[0.4em]',
@@ -44,6 +44,9 @@ export const styles = tv({
         block: {
             true: {
                 base: 'flex w-full'
+            },
+            false: {
+                base: 'inline-flex w-auto'
             }
         },
         justify: {

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

@@ -1,4 +1,4 @@
-import { AnchorHTMLAttributes, ButtonHTMLAttributes } from 'react';
+import { AnchorHTMLAttributes, ButtonHTMLAttributes, ReactNode } from 'react';
 import { type VariantProps } from 'tailwind-variants';
 import { IconProps } from '../icon/index.js';
 import { styles } from './button.styles.js';
@@ -6,8 +6,13 @@ type Variants = VariantProps<typeof styles>;
 export type ButtonProps = {
     /**
      * Fit button width to its parent width.
+     * @default false
      */
     block?: Variants['block'];
+    /**
+     * Badge body content
+     */
+    children?: ReactNode;
     /**
      * Places an icon within the button, after the button’s text
      */
@@ -23,15 +28,18 @@ export type ButtonProps = {
      */
     iconColor?: IconProps['color'];
     /**
-     * Justify align button children
+     * When true, children will use flex justify-between
+     * @default false
      */
     justify?: Variants['justify'];
     /**
      * Button look
+     * @default hero
      */
     look?: Variants['look'];
     /**
      * Size of the button
+     * @default medium
      */
     size?: Variants['size'];
     /**
@@ -40,6 +48,7 @@ export type ButtonProps = {
     soft?: Variants['soft'];
     /**
      * Tag to render
+     * @default button
      */
     tag?: keyof Pick<JSX.IntrinsicElements, 'a' | 'span' | 'button' | 'div'>;
 } & ButtonHTMLAttributes<Element> & AnchorHTMLAttributes<Element>;

package/dist/components/button-dropdown/button-dropdown.component.d.ts

@@ -1,5 +1,2 @@
 import { type ButtonDropdownProps } from './button-dropdown.types.js';
 export declare function ButtonDropdown({ className, dropdownSize, iconBefore: IconBefore, open, text, children, size, look, soft, block, }: ButtonDropdownProps): import("react/jsx-runtime").JSX.Element;
-export declare namespace ButtonDropdown {
-    var Heading: typeof import("./components/heading/heading.component.js").Heading;
-}

package/dist/components/button-dropdown/button-dropdown.component.js

@@ -19,8 +19,7 @@ import { useOverlayTriggerState } from 'react-stately';
 import { Button } from '../button/index.js';
 import { DropDownIcon } from '../icon/index.js';
 import { styles as buttonDropdownStyles } from './button-dropdown.styles.js';
-import { Heading } from './components/heading/index.js';
-import { Panel } from './components/panel/panel.component.js';
+import { ButtonDropdownPanel } from './components/button-dropdown-panel/button-dropdown-panel.component.js';
 export function ButtonDropdown({ className , dropdownSize ='medium' , iconBefore: IconBefore , open =false , text , children , size , look ='hero' , soft =false , block =false  }) {
     const ref = useRef(null);
     const panelId = useId();
@@ -31,7 +30,7 @@ export function ButtonDropdown({ className , dropdownSize ='medium' , iconBefore
     const state = useOverlayTriggerState({
         defaultOpen: open
     });
-    const { overlayProps , triggerProps  } = useOverlayTrigger({
+    const { triggerProps  } = useOverlayTrigger({
         type: 'menu'
     }, state, ref);
     const { buttonProps  } = useButton(triggerProps, ref);
@@ -61,7 +60,7 @@ export function ButtonDropdown({ className , dropdownSize ='medium' , iconBefore
         "aria-expanded": state.isOpen,
         "aria-controls": panelId,
         className: styles.base()
-    }, buttonProps), text), state.isOpen && React.createElement(Panel, _extends({
+    }, buttonProps), text), state.isOpen && React.createElement(ButtonDropdownPanel, {
         className: styles.panel({
             className
         }),
@@ -70,6 +69,5 @@ export function ButtonDropdown({ className , dropdownSize ='medium' , iconBefore
         state: state,
         block: block,
         id: panelId
-    }, overlayProps), children));
+    }, children));
 }
-ButtonDropdown.Heading = Heading;

package/dist/components/button-dropdown/button-dropdown.types.d.ts

@@ -1,11 +1,15 @@
-import { ButtonHTMLAttributes } from 'react';
+import { ButtonHTMLAttributes, ReactNode } from 'react';
 import { type VariantProps } from 'tailwind-variants';
 import { ButtonProps } from '../button/index.js';
 import { styles } from './button-dropdown.styles.js';
 type Variants = VariantProps<typeof styles>;
 export type ButtonDropdownProps = {
     /**
-     * Size of the the dropdown panel
+     * ButtonDropdown body content
+     */
+    children?: ReactNode;
+    /**
+     * Size of the dropdown panel
      */
     dropdownSize?: Variants['dropdownSize'];
     /**

package/dist/components/button-dropdown/components/button-dropdown-heading/button-dropdown-heading.component.d.ts

@@ -0,0 +1,2 @@
+import { type ButtonDropdownHeadingProps } from './button-dropdown-heading.types.js';
+export declare function ButtonDropdownHeading({ className, tag: Tag, children, ...props }: ButtonDropdownHeadingProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/button-dropdown/components/button-dropdown-heading/button-dropdown-heading.component.js

@@ -0,0 +1,24 @@
+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 { styles as headingStyles } from './button-dropdown-heading.styles.js';
+export function ButtonDropdownHeading({ className , tag: Tag = 'h1' , children , ...props }) {
+    const styles = headingStyles({});
+    return React.createElement(Tag, _extends({
+        className: styles.base({
+            className
+        })
+    }, props), children);
+}

package/dist/components/button-dropdown/components/button-dropdown-heading/button-dropdown-heading.types.d.ts

@@ -0,0 +1,12 @@
+import { HTMLAttributes, ReactNode } from 'react';
+export type ButtonDropdownHeadingProps = {
+    /**
+     * ButtonDropdownHeading content
+     */
+    children?: ReactNode;
+    /**
+     * The tag of the heading element for semantic reasons
+     * @default h1
+     */
+    tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+} & HTMLAttributes<Element>;

package/dist/components/button-dropdown/components/button-dropdown-heading/index.d.ts

@@ -0,0 +1,2 @@
+export { ButtonDropdownHeading } from './button-dropdown-heading.component.js';
+export { type ButtonDropdownHeadingProps } from './button-dropdown-heading.types.js';

package/dist/components/button-dropdown/components/button-dropdown-heading/index.js

@@ -0,0 +1 @@
+export { ButtonDropdownHeading } from './button-dropdown-heading.component.js';

package/dist/components/button-dropdown/components/button-dropdown-panel/button-dropdown-panel.component.d.ts

@@ -0,0 +1,5 @@
+import { type ButtonDropdownPanelProps } from './button-dropdown-panel.types.js';
+/**
+ * @private
+ */
+export declare function ButtonDropdownPanel({ className, children, state, block, id, ...props }: ButtonDropdownPanelProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/button-dropdown/components/button-dropdown-panel/button-dropdown-panel.component.js

@@ -0,0 +1,67 @@
+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, { useCallback, useEffect, useRef } from 'react';
+import { DismissButton, mergeProps, useFocusRing, usePopover } from 'react-aria';
+import { styles as panelStyles } from './button-dropdown-panel.styles.js';
+export function ButtonDropdownPanel({ className , children , state , block , id , ...props }) {
+    var _props_triggerRef_current;
+    const popoverRef = useRef(null);
+    const { popoverProps  } = usePopover({
+        popoverRef,
+        shouldFlip: false,
+        isNonModal: true,
+        ...props
+    }, state);
+    const { isFocused , focusProps  } = useFocusRing();
+    const styles = panelStyles({
+        isFocused
+    });
+    const width = (_props_triggerRef_current = props.triggerRef.current) === null || _props_triggerRef_current === void 0 ? void 0 : _props_triggerRef_current.getBoundingClientRect().width;
+    const focusHandler = useCallback((event)=>{
+        if (event.target && popoverRef.current && event.target !== props.triggerRef.current && !popoverRef.current.contains(event.target) && state.isOpen) state.close();
+    }, [
+        state.isOpen
+    ]);
+    const clickHandler = useCallback((event)=>{
+        if (event.target && props.triggerRef.current && !props.triggerRef.current.contains(event.target) && popoverRef.current && !popoverRef.current.contains(event.target) && state.isOpen) state.close();
+    }, [
+        state.isOpen
+    ]);
+    useEffect(()=>{
+        window.document.addEventListener('focusin', focusHandler);
+        window.document.addEventListener('click', clickHandler);
+        return ()=>{
+            window.document.removeEventListener('focusin', focusHandler);
+            window.document.removeEventListener('click', clickHandler);
+        };
+    }, []);
+    return React.createElement("div", _extends({}, mergeProps(popoverProps, focusProps), {
+        id: id,
+        style: {
+            ...popoverProps.style,
+            width: block && width ? `${width}px` : undefined
+        },
+        ref: popoverRef,
+        className: styles.base({
+            className
+        })
+    }), React.createElement(DismissButton, {
+        onDismiss: state.close
+    }), React.createElement("div", {
+        className: styles.dialog()
+    }, children), React.createElement(DismissButton, {
+        onDismiss: state.close
+    }));
+}

package/dist/components/button-dropdown/components/button-dropdown-panel/button-dropdown-panel.types.d.ts

@@ -0,0 +1,10 @@
+import { HTMLAttributes } from 'react';
+import { AriaPopoverProps } from 'react-aria';
+import { OverlayTriggerState } from 'react-stately';
+import { ButtonProps } from '../../../button/index.js';
+export type ButtonDropdownPanelProps = {
+    /**
+     * State for the panel
+     */
+    state: OverlayTriggerState;
+} & HTMLAttributes<Element> & Omit<AriaPopoverProps, 'popoverRef'> & Pick<ButtonProps, 'block'>;

package/dist/components/button-dropdown/components/button-dropdown-panel/index.d.ts

@@ -0,0 +1,2 @@
+export { ButtonDropdownPanel } from './button-dropdown-panel.component.js';
+export { type ButtonDropdownPanelProps } from './button-dropdown-panel.types.js';

package/dist/components/button-dropdown/components/button-dropdown-panel/index.js

@@ -0,0 +1 @@
+export { ButtonDropdownPanel } from './button-dropdown-panel.component.js';

package/dist/components/button-dropdown/index.d.ts

@@ -1,2 +1,3 @@
+export { ButtonDropdownHeading } from './components/button-dropdown-heading/index.js';
 export { ButtonDropdown } from './button-dropdown.component.js';
 export { type ButtonDropdownProps } from './button-dropdown.types.js';

package/dist/components/button-dropdown/index.js

@@ -1 +1,2 @@
+export { ButtonDropdownHeading } from './components/button-dropdown-heading/index.js';
 export { ButtonDropdown } from './button-dropdown.component.js';

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

@@ -2,6 +2,3 @@ import React from 'react';
 import { ButtonGroupContextState, type ButtonGroupProps } from './button-group.types.js';
 export declare const ButtonGroupContext: React.Context<ButtonGroupContextState>;
 export declare function ButtonGroup({ className, children, label, look, size, block, errorMessage, hintMessage, ...props }: ButtonGroupProps): import("react/jsx-runtime").JSX.Element;
-export declare namespace ButtonGroup {
-    var Button: typeof import("./components/button/button.component.js").Button;
-}

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

@@ -16,9 +16,8 @@ function _extends() {
 import React, { cloneElement, createContext } from 'react';
 import { useRadioGroup } from 'react-aria';
 import { useRadioGroupState } from 'react-stately';
-import { ErrorMessage, FormHint, FormLabel } from '../index.js';
+import { ErrorMessage, Hint, Label } from '../index.js';
 import { styles as buttonGroupStyles } from './button-group.styles.js';
-import { Button } from './components/button/button.component.js';
 export const ButtonGroupContext = createContext({
     name: '',
     isDisabled: false,
@@ -56,7 +55,7 @@ export function ButtonGroup({ className , children , label , look ='hero' , size
         className: styles.base({
             className
         })
-    }, radioGroupProps), React.createElement(FormLabel, _extends({}, labelProps), label), hintMessage && React.createElement(FormHint, _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.validationState === 'invalid' && React.createElement(ErrorMessage, _extends({}, errorMessageProps, {
         message: errorMessage
     })), React.createElement("div", {
         className: styles.buttonWrapper()
@@ -69,4 +68,3 @@ export function ButtonGroup({ className , children , label , look ='hero' , size
         }
     }, childrenToRender)));
 }
-ButtonGroup.Button = Button;

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

@@ -0,0 +1,2 @@
+import { type ButtonGroupButtonProps } from './button-group-button.types.js';
+export declare function ButtonGroupButton({ className, children, ...props }: ButtonGroupButtonProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,50 @@
+'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 React, { useContext, useRef } from 'react';
+import { VisuallyHidden, useFocusRing, useRadio } from 'react-aria';
+import { Button as GELButton } from '../../../button/index.js';
+import { ButtonGroupContext } from '../../button-group.component.js';
+import { styles as buttonStyles } from './button-group-button.styles.js';
+export function ButtonGroupButton({ className , children , ...props }) {
+    const state = useContext(ButtonGroupContext);
+    const { size , look , block  } = state;
+    const ref = useRef(null);
+    const { inputProps , isSelected , isDisabled  } = useRadio({
+        ...props,
+        children
+    }, state, ref);
+    const { isFocusVisible , focusProps  } = useFocusRing();
+    const styles = buttonStyles({
+        block,
+        isDisabled,
+        isFocusVisible
+    });
+    return React.createElement("label", {
+        className: styles.base({
+            className
+        })
+    }, React.createElement(VisuallyHidden, null, React.createElement("input", _extends({}, inputProps, focusProps, {
+        ref: ref
+    }))), React.createElement(GELButton, {
+        tag: "div",
+        block: block,
+        soft: !isSelected,
+        disabled: isDisabled,
+        look: look,
+        size: size,
+        className: styles.button()
+    }, children));
+}

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

@@ -0,0 +1,7 @@
+import { AriaRadioProps } from 'react-aria';
+export type ButtonGroupButtonProps = {
+    /**
+     * `string` for overriding base style
+     */
+    className?: string;
+} & AriaRadioProps;

package/dist/components/button-group/components/button-group-button/index.d.ts

@@ -0,0 +1,2 @@
+export { ButtonGroupButton } from './button-group-button.component.js';
+export { type ButtonGroupButtonProps } from './button-group-button.types.js';

package/dist/components/button-group/components/button-group-button/index.js

@@ -0,0 +1 @@
+export { ButtonGroupButton } from './button-group-button.component.js';

package/dist/components/button-group/index.d.ts

@@ -1,2 +1,3 @@
+export { ButtonGroupButton } from './components/button-group-button/index.js';
 export { ButtonGroup } from './button-group.component.js';
 export { type ButtonGroupProps } from './button-group.types.js';

package/dist/components/button-group/index.js

@@ -1 +1,2 @@
+export { ButtonGroupButton } from './components/button-group-button/index.js';
 export { ButtonGroup } from './button-group.component.js';

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

@@ -2,9 +2,3 @@ import React from 'react';
 import { type CheckboxGroupContextState, type CheckboxGroupProps } from './checkbox-group.types.js';
 export declare const CheckboxGroupContext: React.Context<CheckboxGroupContextState>;
 export declare function CheckboxGroup({ className, children, label, orientation, showAmount, size, errorMessage, hintMessage, ...props }: CheckboxGroupProps): import("react/jsx-runtime").JSX.Element;
-export declare namespace CheckboxGroup {
-    var Checkbox: React.ForwardRefExoticComponent<{
-        className?: string | undefined;
-        hint?: React.ReactNode;
-    } & Omit<import("react-aria").AriaCheckboxGroupItemProps, "isIndeterminate"> & React.RefAttributes<unknown>>;
-}

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

@@ -18,9 +18,8 @@ import { useCheckboxGroup, useFocusRing } from 'react-aria';
 import { useCheckboxGroupState } from 'react-stately';
 import { Button } from '../button/index.js';
 import { ExpandMoreIcon } from '../icon/index.js';
-import { ErrorMessage, FormHint, FormLabel } from '../index.js';
+import { ErrorMessage, Hint, Label } from '../index.js';
 import { styles as checkboxStyles } from './checkbox-group.styles.js';
-import { Checkbox } from './components/checkbox/checkbox.component.js';
 export const CheckboxGroupContext = createContext({
     orientation: 'vertical',
     size: 'medium',
@@ -77,7 +76,7 @@ export function CheckboxGroup({ className , children , label , orientation ='ver
         className: styles.base({
             className
         })
-    }, groupProps), React.createElement(FormLabel, _extends({}, labelProps), label), hintMessage && React.createElement(FormHint, _extends({}, descriptionProps), hintMessage), errorMessage && state.validationState === 'invalid' && React.createElement(ErrorMessage, _extends({}, errorMessageProps, {
+    }, groupProps), React.createElement(Label, _extends({}, labelProps), label), hintMessage && React.createElement(Hint, _extends({}, descriptionProps), hintMessage), errorMessage && state.validationState === 'invalid' && React.createElement(ErrorMessage, _extends({}, errorMessageProps, {
         message: errorMessage
     })), React.createElement("div", {
         className: styles.itemWrapper()
@@ -99,4 +98,3 @@ export function CheckboxGroup({ className , children , label , orientation ='ver
         className: styles.buttonText()
     }, `Show ${revealAmount} more ${revealAmount === 1 ? 'item' : 'items'}`))));
 }
-CheckboxGroup.Checkbox = Checkbox;

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

@@ -12,7 +12,7 @@ export const styles = tv({
                 itemWrapper: 'flex flex-wrap'
             },
             vertical: {
-                itemWrapper: 'flex flex-col'
+                itemWrapper: 'flex flex-col items-start'
             }
         },
         isFocusVisible: {

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

@@ -1,7 +1,7 @@
 import { ReactNode } from 'react';
 import { AriaCheckboxGroupProps } from 'react-aria';
 import { CheckboxGroupState } from 'react-stately';
-import { FormHintProps } from '../index.js';
+import { HintProps } from '../index.js';
 export type CheckboxGroupProps = {
     /**
      * The `CheckboxItem` components to render
@@ -18,7 +18,7 @@ export type CheckboxGroupProps = {
     /**
      * hint message
      */
-    hintMessage?: FormHintProps['children'];
+    hintMessage?: HintProps['children'];
     /**
      * Orientation of checkbox items
      */