@westpac/ui 1.0.0-canary.9 → 1.0.0

package/dist/components/autocomplete/components/autocomplete-list-box/autocomplete-list-box.component.js

@@ -8,7 +8,7 @@ export function AutocompleteListBox(props) {
     return React.createElement("ul", {
         ...listBoxProps,
         ref: listBoxRef,
-        className: "max-h-[400px] w-full overflow-auto outline-none"
+        className: "w-full overflow-hidden rounded-xl outline-none"
     }, [
         ...state.collection
     ].map((item)=>item.type === 'section' ? React.createElement(AutocompleteListBoxSection, {

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

@@ -29,10 +29,12 @@ export function AutocompletePopover(props) {
             maxHeight: ((_popoverProps_style = popoverProps.style) === null || _popoverProps_style === void 0 ? void 0 : _popoverProps_style.maxHeight) && +((_popoverProps_style1 = popoverProps.style) === null || _popoverProps_style1 === void 0 ? void 0 : _popoverProps_style1.maxHeight) <= 400 ? +popoverProps.style.maxHeight : 400
         },
         ref: popoverRef,
-        className: clsx('z-10 my-1 rounded-xl border border-border-muted-soft shadow-[0_2px_12px_rgba(0,0,0,0.2)]', className)
+        className: clsx('z-10 my-1 flex flex-col rounded-xl border border-border-muted-soft shadow-[0_2px_12px_rgba(0,0,0,0.2)]', className)
     }, !isNonModal && React.createElement(DismissButton, {
         onDismiss: ()=>state.close()
-    }), children, React.createElement(DismissButton, {
+    }), React.createElement("div", {
+        className: "min-h-0 flex-1 overflow-auto"
+    }, children), React.createElement(DismissButton, {
         onDismiss: ()=>state.close()
     })));
 }

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

@@ -11,7 +11,7 @@ export function BottomSheet({ children, state, title, primaryLabel, secondaryLab
         secondaryLabel: secondaryLabel,
         primaryOnClick: primaryOnClick,
         secondaryOnClick: secondaryOnClick,
-        onClose: ()=>state.close(),
+        onClose: props.isDismissable ? ()=>state.close() : undefined,
         title: title
     }, children));
 }

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

@@ -5,7 +5,7 @@ import { useBreakpoint } from '../../hook/breakpoints.hook.js';
 import { resolveResponsiveVariant } from '../../utils/breakpoint.util.js';
 import { styles as buttonStyles } from './button.styles.js';
 import { getIconSize } from './button.utils.js';
-function BaseButton({ className, size = 'medium', look = 'hero', soft, block = false, justify, tag: Tag = 'button', iconBefore: IconBefore, iconAfter: IconAfter, iconLook, iconColor, iconSize, children, removeLinkPadding, ...props }, ref) {
+function BaseButton({ className, size = 'medium', look = 'hero', soft, block = false, justify, tag: Tag = 'button', iconBefore: IconBefore, iconAfter: IconAfter, iconLook, iconColor, iconSize, children, removeLinkPadding, type = Tag === 'button' ? 'button' : undefined, ...props }, ref) {
     const { isFocusVisible, focusProps } = useFocusRing();
     const btnIconSize = useMemo(()=>iconSize || getIconSize(size), [
         iconSize,
@@ -57,7 +57,8 @@ function BaseButton({ className, size = 'medium', look = 'hero', soft, block = f
         className: styles.base({
             className
         }),
-        ...mergeProps(props, focusProps)
+        ...mergeProps(props, focusProps),
+        type: type
     }, IconBefore && React.createElement(IconBefore, {
         look: iconLook,
         size: btnIconSize,

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

@@ -1,4 +1,5 @@
 'use client';
+import { mergeProps } from '@react-aria/utils';
 import React, { useContext, useRef } from 'react';
 import { useFocusRing, useToggleButtonGroupItem } from 'react-aria';
 import { useBreakpoint } from '../../../../hook/breakpoints.hook.js';
@@ -21,8 +22,7 @@ export function ButtonGroupButton({ className, ...props }) {
         orientation
     });
     return React.createElement(Button, {
-        ...buttonProps,
-        ...focusProps,
+        ...mergeProps(buttonProps, focusProps),
         className: styles.button({
             className
         }),

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

@@ -13,6 +13,7 @@ export const CheckboxGroupContext = createContext({
     orientation: 'vertical',
     size: 'medium',
     state: {
+        defaultValue: [],
         value: [],
         isDisabled: false,
         isReadOnly: false,
@@ -69,8 +70,7 @@ export const CheckboxGroupContext = createContext({
         },
         commitValidation: function() {
             throw new Error(FUNCTION_NOT_IMPLEMENTED);
-        },
-        defaultValue: []
+        }
     }
 });
 export function CheckboxGroup({ className, checkboxes, label, orientation = 'vertical', showAmount = 0, size = 'medium', errorMessage, hintMessage, ...props }) {

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

@@ -25,8 +25,8 @@ export function CompactaItem({ className, children, titleTag: Tag = 'h3', onRemo
         }
     }, []);
     useEffect(()=>{
-        const secondLastIndex = totalItems - 2;
-        if (index === secondLastIndex) {
+        const secondLastIndex = totalItems - 1;
+        if (index !== secondLastIndex && !props.defaultExpanded) {
             state.setExpanded(false);
         }
     }, [

package/dist/components/date-picker/components/date-field/components/date-segment/date-segment.component.js

@@ -8,7 +8,6 @@ export function DateSegment({ segment, state, separator, ...props }) {
     const { segmentProps } = useDateSegment(segment, state, ref);
     const styles = dateSegmentStyles({
         isFocusVisible,
-        isPlaceholder: segment.isPlaceholder,
         isSeparator: segmentProps.role !== 'spinbutton'
     });
     return React.createElement("span", {

package/dist/components/date-picker/components/date-field/components/date-segment/date-segment.styles.d.ts

@@ -1,8 +1,4 @@
 export declare const styles: import("tailwind-variants").TVReturnType<{
-    isPlaceholder: {
-        true: string;
-        false: string;
-    };
     isFocusVisible: {
         true: string;
         false: string;
@@ -11,11 +7,7 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
         true: string;
         false: string;
     };
-}, undefined, "rounded-sm font-light text-text-body focus:focus-outline disabled:form-control-disabled", {
-    isPlaceholder: {
-        true: string;
-        false: string;
-    };
+}, undefined, "rounded-sm text-text-body uppercase focus:focus-outline disabled:form-control-disabled", {
     isFocusVisible: {
         true: string;
         false: string;
@@ -25,10 +17,6 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
         false: string;
     };
 }, undefined, import("tailwind-variants").TVReturnType<{
-    isPlaceholder: {
-        true: string;
-        false: string;
-    };
     isFocusVisible: {
         true: string;
         false: string;
@@ -37,4 +25,4 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
         true: string;
         false: string;
     };
-}, undefined, "rounded-sm font-light text-text-body focus:focus-outline disabled:form-control-disabled", unknown, unknown, undefined>>;
+}, undefined, "rounded-sm text-text-body uppercase focus:focus-outline disabled:form-control-disabled", unknown, unknown, undefined>>;

package/dist/components/date-picker/components/date-field/components/date-segment/date-segment.styles.js

@@ -1,17 +1,13 @@
 import { tv } from 'tailwind-variants';
 export const styles = tv({
-    base: 'rounded-sm font-light text-text-body focus:focus-outline disabled:form-control-disabled',
+    base: 'rounded-sm text-text-body uppercase focus:focus-outline disabled:form-control-disabled',
     variants: {
-        isPlaceholder: {
-            true: 'text-text-muted/50 opacity-100',
-            false: ''
-        },
         isFocusVisible: {
             true: 'focus-outline',
             false: ''
         },
         isSeparator: {
-            true: 'px-0.5 text-text-body/50',
+            true: 'px-0.5 text-text-body',
             false: ''
         }
     }

package/dist/components/date-picker/components/popover/popover.styles.js

@@ -19,7 +19,7 @@ export const styles = tv({
                 underlay: '',
                 closeButton: 'pointer-events-none absolute top-0 right-0 touch-none rounded-full opacity-0 focus:pointer-events-auto focus:touch-auto focus:opacity-100',
                 headerLabel: 'hidden',
-                popover: 'absolute mt-1 scale-100 animate-fadeIn rounded-2xl border border-border-muted-soft bg-background-white opacity-100 shadow-[0_5px_10px_rgba(0,0,0,0.2)]'
+                popover: 'absolute my-1 scale-100 animate-fadeIn rounded-2xl border border-border-muted-soft bg-background-white opacity-100 shadow-[0_5px_10px_rgba(0,0,0,0.2)]'
             }
         }
     }

package/dist/components/date-picker/date-picker.component.d.ts

@@ -1,2 +1,2 @@
 import { type DatePickerProps } from './date-picker.types.js';
-export declare function DatePicker({ size, className, bottomSheetView, block, isDateUnavailable, disableDaysOfWeek, disableWeekends, separator, portalContainer, ...props }: DatePickerProps): import("react/jsx-runtime").JSX.Element;
+export declare function DatePicker({ size, className, bottomSheetView, block, isDateUnavailable, disableDaysOfWeek, disableWeekends, separator, portalContainer, placement, ...props }: DatePickerProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/date-picker/date-picker.component.js

@@ -23,7 +23,7 @@ const BREAKPOINTS_DECRECENT = [
 export function DatePicker({ size = 'medium', className, bottomSheetView = {
     initial: true,
     xsl: false
-}, block, isDateUnavailable, disableDaysOfWeek, disableWeekends, separator, portalContainer, ...props }) {
+}, block, isDateUnavailable, disableDaysOfWeek, disableWeekends, separator, portalContainer, placement = 'bottom left', ...props }) {
     const { locale } = useLocale();
     const enhancedIsDateUnavailable = useMemo(()=>{
         return disableDaysOfWeek || disableWeekends ? (date)=>{
@@ -61,6 +61,7 @@ export function DatePicker({ size = 'medium', className, bottomSheetView = {
         block: resolvedBlock,
         size: resolvedSize,
         isInvalid: state.isInvalid,
+        isReadOnly: props.isReadOnly,
         isDisabled: props.isDisabled
     });
     const ref = useRef(null);
@@ -91,6 +92,14 @@ export function DatePicker({ size = 'medium', className, bottomSheetView = {
         ...props,
         ...groupProps,
         ref: ref,
+        onBlur: (e)=>{
+            var _props_onBlur;
+            if (state.value) {
+                var _props_onBlur1;
+                return (_props_onBlur1 = props.onBlur) === null || _props_onBlur1 === void 0 ? void 0 : _props_onBlur1.call(props, e, state.value);
+            }
+            return (_props_onBlur = props.onBlur) === null || _props_onBlur === void 0 ? void 0 : _props_onBlur.call(props, e);
+        },
         className: styles.input({
             className
         })
@@ -111,7 +120,7 @@ export function DatePicker({ size = 'medium', className, bottomSheetView = {
         showAsBottomSheet: showAsBottomSheet,
         state: state,
         triggerRef: ref,
-        placement: "bottom left"
+        placement: placement
     }, React.createElement(Dialog, dialogProps, React.createElement(Calendar, {
         ...calendarProps,
         firstDayOfWeek: props.firstDayOfWeek

package/dist/components/date-picker/date-picker.styles.d.ts

@@ -2,129 +2,144 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
     size: {
         small: {
             input: string;
-            button: string;
+            dateField: string;
         };
         medium: {
             input: string;
-            button: string;
+            dateField: string;
         };
         large: {
             input: string;
-            button: string;
+            dateField: string;
         };
         xlarge: {
             input: string;
-            button: string;
+            dateField: string;
         };
     };
     block: {
         true: {
             input: string;
-        };
-        false: {
-            input: string;
+            dateField: string;
         };
     };
     isInvalid: {
         true: {
-            input: string;
+            dateField: string;
+            button: string;
         };
         false: {};
     };
     isDisabled: {
         true: {
-            input: string;
+            dateField: string;
+        };
+        false: {};
+    };
+    isReadOnly: {
+        true: {
+            dateField: string;
         };
         false: {};
     };
 }, {
     input: string;
-    button: string;
     dateField: string;
+    button: string;
 }, undefined, {
     size: {
         small: {
             input: string;
-            button: string;
+            dateField: string;
         };
         medium: {
             input: string;
-            button: string;
+            dateField: string;
         };
         large: {
             input: string;
-            button: string;
+            dateField: string;
         };
         xlarge: {
             input: string;
-            button: string;
+            dateField: string;
         };
     };
     block: {
         true: {
             input: string;
-        };
-        false: {
-            input: string;
+            dateField: string;
         };
     };
     isInvalid: {
         true: {
-            input: string;
+            dateField: string;
+            button: string;
         };
         false: {};
     };
     isDisabled: {
         true: {
-            input: string;
+            dateField: string;
+        };
+        false: {};
+    };
+    isReadOnly: {
+        true: {
+            dateField: string;
         };
         false: {};
     };
 }, {
     input: string;
-    button: string;
     dateField: string;
+    button: string;
 }, import("tailwind-variants").TVReturnType<{
     size: {
         small: {
             input: string;
-            button: string;
+            dateField: string;
         };
         medium: {
             input: string;
-            button: string;
+            dateField: string;
         };
         large: {
             input: string;
-            button: string;
+            dateField: string;
         };
         xlarge: {
             input: string;
-            button: string;
+            dateField: string;
         };
     };
     block: {
         true: {
             input: string;
-        };
-        false: {
-            input: string;
+            dateField: string;
         };
     };
     isInvalid: {
         true: {
-            input: string;
+            dateField: string;
+            button: string;
         };
         false: {};
     };
     isDisabled: {
         true: {
-            input: string;
+            dateField: string;
+        };
+        false: {};
+    };
+    isReadOnly: {
+        true: {
+            dateField: string;
         };
         false: {};
     };
 }, {
     input: string;
-    button: string;
     dateField: string;
+    button: string;
 }, undefined, unknown, unknown, undefined>>;

package/dist/components/date-picker/date-picker.styles.js

@@ -1,46 +1,51 @@
 import { tv } from 'tailwind-variants';
 export const styles = tv({
     slots: {
-        input: 'form-control flex items-center border-border-muted-strong disabled:form-control-disabled',
-        button: 'flex h-auto items-center justify-center rounded-l-none border-y-0 border-r-0 border-l border-l-border-muted-strong bg-surface-muted-pale',
-        dateField: 'flex-1'
+        input: 'form-control flex items-center border-0',
+        dateField: 'rounded rounded-r-none border border-r-0 border-border-muted-strong',
+        button: 'flex items-center justify-center rounded-l-none border-border-muted-strong bg-surface-muted-pale'
     },
     variants: {
         size: {
             small: {
-                input: 'gap-1.5 form-control-small',
-                button: '-my-0.5 -mr-1.5 mb-[-0.25rem] min-h-5 py-[0.25rem]'
+                input: 'max-h-5',
+                dateField: 'h-5 w-[120px] form-control-small'
             },
             medium: {
-                input: 'gap-2 form-control-medium',
-                button: 'my-[-0.3125rem] -mr-2 min-h-6 py-[0.3125rem]'
+                input: 'max-h-6',
+                dateField: 'h-6 w-[140px] form-control-medium'
             },
             large: {
-                input: 'gap-2.5 form-control-large',
-                button: 'my-[-0.5rem] -mr-2.5 min-h-7 py-[0.5rem]'
+                input: 'max-h-7',
+                dateField: 'h-7 w-[145px] form-control-large'
             },
             xlarge: {
-                input: 'gap-3 form-control-xlarge',
-                button: '-my-1.5 -mr-3 mb-[-0.625rem] min-h-8 py-1.5'
+                input: 'max-h-8',
+                dateField: 'h-8 w-[165px] form-control-xlarge'
             }
         },
         block: {
             true: {
-                input: 'w-full'
-            },
-            false: {
-                input: ''
+                input: 'w-full gap-0',
+                dateField: 'w-full'
             }
         },
         isInvalid: {
             true: {
-                input: 'border-border-danger'
+                dateField: 'border-border-danger',
+                button: 'border-border-danger border-l-border-muted-strong'
             },
             false: {}
         },
         isDisabled: {
             true: {
-                input: 'form-control-disabled'
+                dateField: '!form-control-disabled'
+            },
+            false: {}
+        },
+        isReadOnly: {
+            true: {
+                dateField: '!form-control-disabled'
             },
             false: {}
         }

package/dist/components/date-picker/date-picker.types.d.ts

@@ -1,12 +1,12 @@
 import { Breakpoint } from '@westpac/style-config/constants';
-import { HTMLAttributes } from 'react';
+import { HTMLAttributes, FocusEvent } from 'react';
 import { DateValue } from 'react-aria';
 import { DatePickerStateOptions } from 'react-stately';
 import { VariantProps } from 'tailwind-variants';
 import { ResponsiveVariants } from 'src/types/responsive-variants.types.js';
 import { styles } from './date-picker.styles.js';
 type Variants = VariantProps<typeof styles>;
-export type DatePickerProps<T extends DateValue = DateValue> = DatePickerStateOptions<T> & Omit<Variants, 'size' | 'block'> & Omit<HTMLAttributes<HTMLDivElement>, 'invalid' | 'block'> & {
+export type DatePickerProps<T extends DateValue = DateValue> = Omit<DatePickerStateOptions<T>, 'onBlur'> & Omit<Variants, 'size' | 'block'> & Omit<HTMLAttributes<HTMLDivElement>, 'invalid' | 'block' | 'onBlur'> & {
     /**
      * Determines whether to display the component as a bottom sheet view.
      * Can also accept an object to conditionally enable the bottom sheet based on breakpoints.
@@ -25,6 +25,15 @@ export type DatePickerProps<T extends DateValue = DateValue> = DatePickerStateOp
      * Separator character used in the date field. Defaults to "/".
      */
     separator?: string;
+    /**
+     * Custom onBlur that provides the regular event as the first parameter and the date value in the same format as onChange as the second.
+     */
+    onBlur?: (event: FocusEvent<Element, Element>, date?: T) => void;
+    /**
+     * Placement for the datepicker popover.
+     * @default "bottom left"
+     */
+    placement?: 'top left' | 'top right' | 'bottom left' | 'bottom right';
     /**
      * portal container for date picker
      */

package/dist/components/header/header.component.js

@@ -1,6 +1,6 @@
 'use client';
 import throttle from 'lodash.throttle';
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useBreakpoint } from '../../hook/breakpoints.hook.js';
 import { resolveResponsiveVariant } from '../../utils/breakpoint.util.js';
 import { ArrowLeftIcon, HamburgerMenuIcon } from '../icon/index.js';
@@ -59,14 +59,19 @@ export function Header({ anchorTarget, brand, className, children, disableLogoLi
         leftIcon: resolveResponsiveVariant(leftIcon, breakpoint),
         scrolled: isScrolled || scrolled
     });
-    const HeaderLogo = ()=>React.createElement(React.Fragment, null, React.createElement(SmallLogo, {
+    const HeaderLogo = useCallback(()=>React.createElement(React.Fragment, null, React.createElement(SmallLogo, {
             align: logoAlignment,
             "aria-label": logoAssistiveText,
             className: styles.smallLogo()
         }), React.createElement(LargeLogo, {
             "aria-label": logoAssistiveText,
             className: styles.largeLogo()
-        }));
+        })), [
+        logoAlignment,
+        logoAssistiveText,
+        LargeLogo,
+        SmallLogo
+    ]);
     const defaultAssistiveText = leftIcon === 'arrow' ? 'Back' : 'Menu';
     return React.createElement("header", {
         className: styles.base({

package/dist/components/icon/components/arrow-back-icon.d.ts

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

package/dist/components/icon/components/arrow-back-icon.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Icon } from '../icon.component.js';
+export function ArrowBackIcon({ look = 'filled', 'aria-label': ariaLabel = 'Arrow Back', copyrightYear = '2025', ...props }) {
+    return React.createElement(Icon, {
+        "aria-label": ariaLabel,
+        copyrightYear: copyrightYear,
+        ...props
+    }, React.createElement("path", {
+        d: "M12 20L13.41 18.59L7.83 13L20 13V11L7.83 11L13.41 5.41L12 4L4 12L12 20Z",
+        fill: "currentColor"
+    }));
+}

package/dist/components/icon/components/arrow-down-icon.d.ts

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

package/dist/components/icon/components/arrow-down-icon.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Icon } from '../icon.component.js';
+export function ArrowDownIcon({ look = 'filled', 'aria-label': ariaLabel = 'Arrow Down', copyrightYear = '2025', ...props }) {
+    return React.createElement(Icon, {
+        "aria-label": ariaLabel,
+        copyrightYear: copyrightYear,
+        ...props
+    }, React.createElement("path", {
+        d: "M20 12L18.59 10.59L13 16.17V4L11 4L11 16.17L5.41 10.59L4 12L12 20L20 12Z",
+        fill: "currentColor"
+    }));
+}

package/dist/components/icon/components/arrow-forward-icon.d.ts

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

package/dist/components/icon/components/arrow-forward-icon.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Icon } from '../icon.component.js';
+export function ArrowForwardIcon({ look = 'filled', 'aria-label': ariaLabel = 'Arrow Forward', copyrightYear = '2025', ...props }) {
+    return React.createElement(Icon, {
+        "aria-label": ariaLabel,
+        copyrightYear: copyrightYear,
+        ...props
+    }, React.createElement("path", {
+        d: "M12 4L10.59 5.41L16.17 11H4V13H16.17L10.59 18.59L12 20L20 12L12 4Z",
+        fill: "currentColor"
+    }));
+}

package/dist/components/icon/components/arrow-up-icon.d.ts

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

package/dist/components/icon/components/arrow-up-icon.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Icon } from '../icon.component.js';
+export function ArrowUpIcon({ look = 'filled', 'aria-label': ariaLabel = 'Arrow Up', copyrightYear = '2025', ...props }) {
+    return React.createElement(Icon, {
+        "aria-label": ariaLabel,
+        copyrightYear: copyrightYear,
+        ...props
+    }, React.createElement("path", {
+        d: "M4 12L5.41 13.41L11 7.83L11 20H13V7.83L18.59 13.41L20 12L12 4L4 12Z",
+        fill: "currentColor"
+    }));
+}

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

@@ -3,11 +3,11 @@ export const styles = tv({
     base: 'inline-block transition-colors disabled:pointer-events-none disabled:opacity-50',
     variants: {
         size: {
-            xsmall: 'size-2',
-            small: 'size-3',
-            medium: 'size-4',
-            large: 'size-6',
-            xlarge: 'size-8'
+            xsmall: 'size-2 min-h-2 min-w-2',
+            small: 'size-3 min-h-3 min-w-3',
+            medium: 'size-4 min-h-4 min-w-4',
+            large: 'size-6 min-h-6 min-w-6',
+            xlarge: 'size-8 min-h-8 min-w-8'
         },
         color: {
             muted: 'text-surface-muted',

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

@@ -6,14 +6,18 @@ export { AlertIcon } from './components/alert-icon.js';
 export { AndroidIcon } from './components/android-icon.js';
 export { AppleIcon } from './components/apple-icon.js';
 export { ArchiveBoxIcon } from './components/archive-box-icon.js';
+export { ArrowBackIcon } from './components/arrow-back-icon.js';
 export { ArrowBackCircleIcon } from './components/arrow-back-circle-icon.js';
+export { ArrowDownIcon } from './components/arrow-down-icon.js';
 export { ArrowDownCircleIcon } from './components/arrow-down-circle-icon.js';
 export { ArrowForkIcon } from './components/arrow-fork-icon.js';
+export { ArrowForwardIcon } from './components/arrow-forward-icon.js';
 export { ArrowForwardCircleIcon } from './components/arrow-forward-circle-icon.js';
 export { ArrowLeftIcon } from './components/arrow-left-icon.js';
 export { ArrowRightIcon } from './components/arrow-right-icon.js';
 export { ArrowSplitIcon } from './components/arrow-split-icon.js';
 export { ArrowThreadReplyIcon } from './components/arrow-thread-reply-icon.js';
+export { ArrowUpIcon } from './components/arrow-up-icon.js';
 export { ArrowUpCircleIcon } from './components/arrow-up-circle-icon.js';
 export { AtmIcon } from './components/atm-icon.js';
 export { AttacheCaseIcon } from './components/attache-case-icon.js';