@westpac/ui 0.26.0 → 0.28.0

package/dist/components/alert/alert.styles.js

@@ -4,7 +4,7 @@ export const styles = tv({
         base: 'typography-body-10 relative mb-4 xsl:flex',
         icon: 'float-left flex-none',
         body: 'relative flex-1 overflow-hidden xsl:top-[0.125rem] [&_a]:underline',
-        heading: 'typography-body-9 mb-2 font-bold',
+        heading: 'typography-body-9 mb-1 font-bold',
         close: 'absolute right-0.5 top-0.5 p-1 hover:opacity-80'
     },
     variants: {

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

@@ -89,17 +89,6 @@ export function Autocomplete({ size ='medium' , invalid =false , isDisabled , fo
         state.collection.size,
         searchProps.value.length
     ]);
-    const iconSize = useMemo(()=>{
-        switch(size){
-            case 'small':
-            case 'medium':
-                return 'small';
-            default:
-                return 'medium';
-        }
-    }, [
-        size
-    ]);
     return React.createElement("div", {
         className: styles.base({
             className
@@ -112,11 +101,11 @@ export function Autocomplete({ size ='medium' , invalid =false , isDisabled , fo
     }, React.createElement("div", {
         className: styles.iconWrapper()
     }, loadingState ? React.createElement(ProgressIndicator, {
-        size: iconSize,
+        size: "small",
         color: "muted"
     }) : React.createElement(SearchIcon, {
         "aria-hidden": true,
-        size: iconSize,
+        size: "small",
         color: "muted"
     })), React.createElement("input", _extends({}, mergeProps(inputProps, inputFocusProps), {
         ref: inputRef,

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

@@ -25,7 +25,7 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
     soft: {
         true: string;
     };
-}, undefined, "inline-block whitespace-nowrap border text-center", {
+}, undefined, "inline-block w-fit whitespace-nowrap border text-center", {
     responsiveVariants: string[];
 }, {
     color: {
@@ -81,6 +81,6 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
     soft: {
         true: string;
     };
-}, undefined, "inline-block whitespace-nowrap border text-center", {
+}, undefined, "inline-block w-fit whitespace-nowrap border text-center", {
     responsiveVariants: string[];
 }, unknown, unknown, undefined>>;

package/dist/components/badge/badge.styles.js

@@ -1,6 +1,6 @@
 import { tv } from 'tailwind-variants';
 export const styles = tv({
-    base: 'inline-block whitespace-nowrap border text-center',
+    base: 'inline-block w-fit whitespace-nowrap border text-center',
     variants: {
         color: {
             danger: 'border-danger bg-danger text-white',
@@ -22,7 +22,7 @@ export const styles = tv({
             'warning-inverted': 'border-none bg-white text-warning'
         },
         type: {
-            pill: 'typography-body-10 h-4 rounded-xl px-[0.4375rem] py-[0.25rem] font-medium leading-none',
+            pill: 'typography-body-10 flex h-4 w-fit items-center rounded-xl px-[0.4375rem] font-medium leading-none',
             default: 'h-[1.25rem] rounded-sm px-1 text-[0.75rem] leading-[1.125rem]'
         },
         soft: {

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

@@ -15,8 +15,8 @@ export declare const Button: React.ForwardRefExoticComponent<{
     look?: "link" | "primary" | "hero" | "faint" | {
         [x: string]: "link" | "primary" | "hero" | "faint" | undefined;
     } | undefined;
-    size?: "small" | "medium" | "large" | "xlarge" | {
-        [x: string]: "small" | "medium" | "large" | "xlarge" | undefined;
+    size?: "small" | "xlarge" | "medium" | "large" | {
+        [x: string]: "small" | "xlarge" | "medium" | "large" | undefined;
     } | undefined;
     soft?: boolean | {
         [x: string]: boolean | undefined;

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

@@ -1,7 +1,7 @@
 import { tv } from 'tailwind-variants';
 export const styles = tv({
     slots: {
-        base: 'items-center justify-center rounded leading-normal transition-[background] disabled:pointer-events-none disabled:opacity-50 group-first/add-on-before:rounded-r-none group-last/add-on-after:rounded-l-none',
+        base: 'items-center justify-center rounded transition-[background] disabled:pointer-events-none disabled:opacity-50 group-first/add-on-before:rounded-r-none group-last/add-on-after:rounded-l-none',
         iconBefore: '',
         iconAfter: '',
         dropdown: 'ml-[0.4em]',
@@ -10,16 +10,16 @@ export const styles = tv({
     variants: {
         size: {
             small: {
-                base: 'typography-body-10 px-2 pb-1 pt-0.5 active-theme-rams:before:h-[0.0625rem]'
+                base: 'typography-body-10 h-5 px-1.5 active-theme-rams:before:h-[0.0625rem]'
             },
             medium: {
-                base: 'typography-body-9 px-2 py-[0.3125rem] active-theme-rams:before:h-0.5'
+                base: 'typography-body-9 h-6 px-2 active-theme-rams:before:h-0.5'
             },
             large: {
-                base: 'typography-body-9 px-2.5 py-2 active-theme-rams:before:h-0.5'
+                base: 'typography-body-9 h-7 px-2.5 active-theme-rams:before:h-0.5'
             },
             xlarge: {
-                base: 'typography-body-8 px-3 pb-2.5 pt-1.5 active-theme-rams:before:h-1'
+                base: 'typography-body-8 h-8 px-3 active-theme-rams:before:h-1'
             }
         },
         look: {
@@ -96,14 +96,30 @@ export const styles = tv({
                 'iconBefore'
             ],
             hasChildren: true,
-            className: 'mr-[0.4em]'
+            className: 'mr-1'
         },
         {
             slots: [
                 'iconAfter'
             ],
             hasChildren: true,
-            className: 'ml-[0.4em]'
+            className: 'ml-1'
+        },
+        {
+            slots: [
+                'iconBefore'
+            ],
+            size: 'xlarge',
+            hasChildren: true,
+            className: 'mr-1.5'
+        },
+        {
+            slots: [
+                'iconAfter'
+            ],
+            size: 'xlarge',
+            hasChildren: true,
+            className: 'ml-1.5'
         }
     ]
 }, {

package/dist/components/button/button.utils.js

@@ -1,8 +1,8 @@
 export const getIconSize = (size)=>{
     const iconSizeMap = {
-        small: 'small',
+        small: 'xsmall',
         medium: 'small',
-        large: 'medium',
+        large: 'small',
         xlarge: 'medium'
     };
     if (typeof size === 'string') {

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

@@ -31,10 +31,12 @@ export function ButtonGroupButton({ className , label , ...props }) {
         isDisabled,
         isFocusVisible
     });
+    const key = isSelected ? 'selected' : 'not-selected';
     return React.createElement("label", {
         className: styles.base({
             className
-        })
+        }),
+        key: key
     }, React.createElement(VisuallyHidden, null, React.createElement("input", _extends({}, inputProps, focusProps, {
         ref: ref
     }))), React.createElement(GELButton, {
@@ -44,6 +46,8 @@ export function ButtonGroupButton({ className , label , ...props }) {
         disabled: isDisabled,
         look: look,
         size: size,
-        className: styles.button()
+        className: styles.button({
+            hasTransition: !isSelected
+        })
     }, label));
 }

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

@@ -17,6 +17,14 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
             base: string;
         };
     };
+    hasTransition: {
+        true: {
+            button: string;
+        };
+        false: {
+            button: string;
+        };
+    };
 }, {
     base: string;
     button: string;
@@ -41,6 +49,14 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
             base: string;
         };
     };
+    hasTransition: {
+        true: {
+            button: string;
+        };
+        false: {
+            button: string;
+        };
+    };
 }, {
     base: string;
     button: string;
@@ -63,6 +79,14 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
             base: string;
         };
     };
+    hasTransition: {
+        true: {
+            button: string;
+        };
+        false: {
+            button: string;
+        };
+    };
 }, {
     base: string;
     button: string;

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

@@ -2,7 +2,7 @@ import { tv } from 'tailwind-variants';
 export const styles = tv({
     slots: {
         base: '',
-        button: 'rounded-none hover:cursor-pointer group-first/buttons:rounded-l group-last/buttons:rounded-r group-[:not(:first-child)]/buttons:border-l-0 active-theme-rams:border-b-primary active-theme-rams:before:hidden'
+        button: 'pointer-events-none rounded-none hover:cursor-pointer group-first/buttons:rounded-l group-last/buttons:rounded-r group-[:not(:first-child)]/buttons:border-l-0 active-theme-rams:border-b-primary active-theme-rams:before:hidden'
     },
     variants: {
         isDisabled: {
@@ -22,6 +22,14 @@ export const styles = tv({
             false: {
                 base: 'w-auto'
             }
+        },
+        hasTransition: {
+            true: {
+                button: 'pointer-events-auto'
+            },
+            false: {
+                button: 'pointer-events-none'
+            }
         }
     }
 }, {

package/dist/components/error-message/error-message.styles.js

@@ -3,6 +3,6 @@ export const styles = tv({
     slots: {
         base: 'typography-body-11 flex items-start text-danger',
         list: 'mb-2 flex flex-col gap-1',
-        icon: 'mr-[0.5em] align-top mt-[0.15rem]'
+        icon: 'mr-[0.5em] mt-[0.15rem] align-top'
     }
 });

package/dist/components/filter/components/filter-buttons/filter-buttons.component.js

@@ -68,7 +68,9 @@ export function FilterButtons({ filterButtons , onClick , selectedButton , tag:
             }
             setScroll(scrollBy, scrollX, container);
         }
-    }, []);
+    }, [
+        scrollTarget
+    ]);
     const getTargetLeft = useCallback((element, cLeft, index, targetLeft)=>{
         const eLeft = element.offsetLeft;
         const eRight = eLeft + element.clientWidth;
@@ -120,11 +122,18 @@ export function FilterButtons({ filterButtons , onClick , selectedButton , tag:
                 targetLeft -= 1;
             }
         });
-        setScrollTarget({
-            left: targetLeft,
-            right: targetRight
-        });
-    }, []);
+        if (targetLeft !== scrollTarget.left || targetRight !== scrollTarget.right) {
+            setScrollTarget({
+                left: targetLeft,
+                right: targetRight
+            });
+        }
+    }, [
+        scrollTarget,
+        getTargetLeft,
+        getTargetRight,
+        adjustTargets
+    ]);
     const handleScrollable = useCallback((container)=>{
         const isLeftScrollable = container.scrollLeft >= 1;
         const isRightScrollable = container.scrollLeft < container.scrollWidth - container.clientWidth - 1;
@@ -139,7 +148,10 @@ export function FilterButtons({ filterButtons , onClick , selectedButton , tag:
             handleScrollTarget(container);
             handleScrollable(container);
         }
-    }, []);
+    }, [
+        handleScrollTarget,
+        handleScrollable
+    ]);
     useEffect(()=>{
         const container = scrollContainerRef.current;
         if (container) {
@@ -150,9 +162,12 @@ export function FilterButtons({ filterButtons , onClick , selectedButton , tag:
         }
         return ()=>{
             container === null || container === void 0 ? void 0 : container.removeEventListener('scroll', handleScroll);
-            window.removeEventListener('reize', handleScroll);
+            window.removeEventListener('resize', handleScroll);
         };
-    }, []);
+    }, [
+        handleScrollTarget,
+        handleScrollable
+    ]);
     return React.createElement(Tag, {
         className: styles.base({
             className

package/dist/components/filter/components/filter-buttons/filter-buttons.styles.js

@@ -2,7 +2,7 @@ import { tv } from 'tailwind-variants';
 export const styles = tv({
     slots: {
         base: 'relative flex justify-start',
-        buttonList: 'flex w-full touch-pan-x gap-1 overflow-x-auto whitespace-nowrap',
+        buttonList: 'flex w-full touch-pan-x gap-1 overflow-x-auto overflow-y-visible whitespace-nowrap',
         scrollButton: 'absolute rounded-none contrast-more:bg-black'
     },
     variants: {

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

@@ -86,7 +86,7 @@ export function Header({ brand , className , children , fixed =false , leftIcon
     }, React.createElement(Button, {
         look: "link",
         iconAfter: ButtonIcon,
-        size: "large",
+        iconSize: leftIcon === 'arrow' ? 'medium' : 'small',
         onClick: leftOnClick,
         "aria-label": leftAssistiveText,
         className: styles.leftButton(),

package/dist/components/header/header.styles.js

@@ -7,7 +7,7 @@ export const styles = tv({
         smallLogo: 'sm:hidden',
         largeLogo: 'max-sm:hidden',
         leftContent: 'flex items-center',
-        leftButton: 'my-1 border-r border-[#E8E8ED] p-0 max-sm:-ml-2 max-sm:mr-2 max-sm:h-7 max-sm:min-w-[2.625rem] sm:-ml-4 sm:mr-3 sm:h-[3.3125rem] sm:min-w-[3.75rem]',
+        leftButton: 'my-1 border-r border-[#E8E8ED] p-0 rounded-none max-sm:-ml-2 max-sm:mr-2 max-sm:h-7 max-sm:min-w-[2.625rem] sm:-ml-4 sm:mr-3 sm:h-[3.3125rem] sm:min-w-[3.75rem]',
         rightContent: 'ml-auto flex items-center'
     },
     variants: {

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

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

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

@@ -0,0 +1,35 @@
+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, { Fragment } from 'react';
+import { Icon } from '../icon.component.js';
+export function ArrowBackCircleIcon({ look ='filled' , 'aria-label': ariaLabel = 'Arrow Back Circle' , copyrightYear ='2023' , ...props }) {
+    return React.createElement(Icon, _extends({
+        "aria-label": ariaLabel,
+        copyrightYear: copyrightYear
+    }, props), look === 'filled' ? React.createElement("path", {
+        fill: "currentColor",
+        fillRule: "evenodd",
+        d: "M12 0C5.372 0 0 5.373 0 12s5.372 12 12 12 12-5.373 12-12S18.628 0 12 0ZM9.414 13l3.293 3.293-1.414 1.414L5.586 12l5.707-5.707 1.414 1.414L9.414 11H18v2H9.414Z",
+        clipRule: "evenodd"
+    }) : React.createElement(Fragment, null, React.createElement("path", {
+        fill: "currentColor",
+        d: "m9.414 13 3.293 3.293-1.414 1.414L5.586 12l5.707-5.707 1.414 1.414L9.414 11H18v2H9.414Z"
+    }), React.createElement("path", {
+        fill: "currentColor",
+        fillRule: "evenodd",
+        d: "M12 0C5.372 0 0 5.373 0 12s5.372 12 12 12 12-5.373 12-12S18.628 0 12 0Zm10 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10Z",
+        clipRule: "evenodd"
+    })));
+}

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

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

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

@@ -0,0 +1,35 @@
+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, { Fragment } from 'react';
+import { Icon } from '../icon.component.js';
+export function ArrowDownCircleIcon({ look ='filled' , 'aria-label': ariaLabel = 'Arrow Down Circle' , copyrightYear ='2023' , ...props }) {
+    return React.createElement(Icon, _extends({
+        "aria-label": ariaLabel,
+        copyrightYear: copyrightYear
+    }, props), look === 'filled' ? React.createElement("path", {
+        fill: "currentColor",
+        fillRule: "evenodd",
+        d: "M0 12c0 6.628 5.373 12 12 12s12-5.372 12-12S18.627 0 12 0 0 5.372 0 12Zm13 2.586 3.293-3.293 1.414 1.414L12 18.414l-5.707-5.707 1.414-1.414L11 14.586V6h2v8.586Z",
+        clipRule: "evenodd"
+    }) : React.createElement(Fragment, null, React.createElement("path", {
+        fill: "currentColor",
+        d: "m13 14.586 3.293-3.293 1.414 1.414L12 18.414l-5.707-5.707 1.414-1.414L11 14.586V6h2v8.586Z"
+    }), React.createElement("path", {
+        fill: "currentColor",
+        fillRule: "evenodd",
+        d: "M0 12c0 6.628 5.373 12 12 12s12-5.372 12-12S18.627 0 12 0 0 5.372 0 12ZM12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2Z",
+        clipRule: "evenodd"
+    })));
+}

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

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

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

@@ -0,0 +1,35 @@
+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, { Fragment } from 'react';
+import { Icon } from '../icon.component.js';
+export function ArrowForwardCircleIcon({ look ='filled' , 'aria-label': ariaLabel = 'Arrow Forward Circle' , copyrightYear ='2023' , ...props }) {
+    return React.createElement(Icon, _extends({
+        "aria-label": ariaLabel,
+        copyrightYear: copyrightYear
+    }, props), look === 'filled' ? React.createElement("path", {
+        fill: "currentColor",
+        fillRule: "evenodd",
+        d: "M12 24c6.628 0 12-5.373 12-12S18.628 0 12 0 0 5.373 0 12s5.372 12 12 12Zm2.586-13-3.293-3.293 1.414-1.414L18.414 12l-5.707 5.707-1.414-1.414L14.586 13H6v-2h8.586Z",
+        clipRule: "evenodd"
+    }) : React.createElement(Fragment, null, React.createElement("path", {
+        fill: "currentColor",
+        d: "m14.586 11-3.293-3.293 1.414-1.414L18.414 12l-5.707 5.707-1.414-1.414L14.586 13H6v-2h8.586Z"
+    }), React.createElement("path", {
+        fill: "currentColor",
+        fillRule: "evenodd",
+        d: "M12 24c6.628 0 12-5.373 12-12S18.628 0 12 0 0 5.373 0 12s5.372 12 12 12ZM2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12Z",
+        clipRule: "evenodd"
+    })));
+}

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

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

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

@@ -0,0 +1,35 @@
+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, { Fragment } from 'react';
+import { Icon } from '../icon.component.js';
+export function ArrowUpCircleIcon({ look ='filled' , 'aria-label': ariaLabel = 'Arrow Up Circle' , copyrightYear ='2023' , ...props }) {
+    return React.createElement(Icon, _extends({
+        "aria-label": ariaLabel,
+        copyrightYear: copyrightYear
+    }, props), look === 'filled' ? React.createElement("path", {
+        fill: "currentColor",
+        fillRule: "evenodd",
+        d: "M24 12c0-6.628-5.373-12-12-12S0 5.372 0 12s5.373 12 12 12 12-5.372 12-12ZM11 9.414l-3.293 3.293-1.414-1.414L12 5.586l5.707 5.707-1.414 1.414L13 9.414V18h-2V9.414Z",
+        clipRule: "evenodd"
+    }) : React.createElement(Fragment, null, React.createElement("path", {
+        fill: "currentColor",
+        d: "m11 9.414-3.293 3.293-1.414-1.414L12 5.586l5.707 5.707-1.414 1.414L13 9.414V18h-2V9.414Z"
+    }), React.createElement("path", {
+        fill: "currentColor",
+        fillRule: "evenodd",
+        d: "M24 12c0-6.628-5.373-12-12-12S0 5.372 0 12s5.373 12 12 12 12-5.372 12-12ZM12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10Z",
+        clipRule: "evenodd"
+    })));
+}

package/dist/components/icon/components/cancel-card-icon.js

@@ -14,35 +14,25 @@ function _extends() {
 }
 import React, { Fragment } from 'react';
 import { Icon } from '../icon.component.js';
-export function CancelCardIcon({ look ='filled' , 'aria-label': ariaLabel = 'Cancel Card' , copyrightYear ='2024' , ...props }) {
+export function CancelCardIcon({ look ='filled' , 'aria-label': ariaLabel = 'Cancel Card' , copyrightYear ='2023' , ...props }) {
     return React.createElement(Icon, _extends({
         "aria-label": ariaLabel,
         copyrightYear: copyrightYear
-    }, props), look === 'filled' ? React.createElement(Fragment, null, React.createElement("svg", {
-        xmlns: "http://www.w3.org/2000/svg",
-        width: "24",
-        height: "24",
-        fill: "none"
-    }, React.createElement("path", {
-        "fill-rule": "evenodd",
+    }, props), look === 'filled' ? React.createElement(Fragment, null, React.createElement("path", {
+        fillRule: "evenodd",
         d: "M1.416.002 0 1.416l.908.907A1.998 1.998 0 0 0 0 4v16a2 2 0 0 0 2 2h18.585l1.998 1.998 1.415-1.414-.908-.907L1.416.002ZM4.585 6H1v4h7.585l-4-4Z",
-        "clip-rule": "evenodd",
+        clipRule: "evenodd",
         fill: "currentColor"
     }), React.createElement("path", {
         d: "M23 10h-8.758L24 19.757V4a2 2 0 0 0-2-2H6.242l4 4H23v4Z",
         fill: "currentColor"
-    }))) : React.createElement(Fragment, null, React.createElement("svg", {
-        xmlns: "http://www.w3.org/2000/svg",
-        width: "24",
-        height: "24",
-        fill: "none"
-    }, React.createElement("path", {
-        "fill-rule": "evenodd",
+    })) : React.createElement(Fragment, null, React.createElement("path", {
+        fillRule: "evenodd",
         d: "M1.416.002 0 1.416l.908.907A1.998 1.998 0 0 0 0 4v16a2 2 0 0 0 2 2h18.585l1.998 1.998 1.415-1.414-.908-.907L1.416.002ZM2.585 4H2v4h4.585l-4-4Zm8 8H2v8h16.585l-8-8Z",
-        "clip-rule": "evenodd",
+        clipRule: "evenodd",
         fill: "currentColor"
     }), React.createElement("path", {
         d: "M22 8h-9.758l4 4H22v5.757l2 2V4a2 2 0 0 0-2-2H6.242l2 2H22v4Z",
         fill: "currentColor"
-    }))));
+    })));
 }

package/dist/components/icon/components/child-care-icon.js

@@ -22,21 +22,21 @@ export function ChildCareIcon({ look ='filled' , 'aria-label': ariaLabel = 'Chil
         d: "M12 8a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z",
         fill: "currentColor"
     }), React.createElement("path", {
-        "fill-rule": "evenodd",
-        "clip-rule": "evenodd",
+        fillRule: "evenodd",
+        clipRule: "evenodd",
         d: "M12 9c3.338 0 10 1.519 10 4.533v5.934c0 1.321-1.28 2.355-3 3.1-.32.139-.655.267-1 .386v-3.286C18 17.893 14.002 17 12 17s-6 .893-6 2.667v.061c.225.104.483.21.773.316 1.547.562 3.416.88 4.747.944V21a1.5 1.5 0 1 1-.285 2.977c-1.537-.09-3.508-.431-5.235-1.024-2.199-.756-4-1.919-4-3.486v-5.934C2 10.52 8.662 9 12 9Zm2.5 4.5a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0Z",
         fill: "currentColor"
     })) : React.createElement(Fragment, null, React.createElement("path", {
-        "fill-rule": "evenodd",
-        "clip-rule": "evenodd",
+        fillRule: "evenodd",
+        clipRule: "evenodd",
         d: "M12 8a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm0-2a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z",
         fill: "currentColor"
     }), React.createElement("path", {
         d: "M12 17a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Z",
         fill: "currentColor"
     }), React.createElement("path", {
-        "fill-rule": "evenodd",
-        "clip-rule": "evenodd",
+        fillRule: "evenodd",
+        clipRule: "evenodd",
         d: "M12 24a1 1 0 1 0 0-2c-1.054 0-2.548-.182-4-.543v-.466c.175-.122.476-.28.92-.439C9.947 20.187 11.22 20 12 20c.78 0 2.053.187 3.08.552.444.159.745.317.92.44v2.52a18.837 18.837 0 0 0 2-.56c2.199-.755 4-1.918 4-3.485v-5.934C22 10.52 15.338 9 12 9S2 10.519 2 13.533v5.934c0 1.567 1.801 2.73 4 3.486l.144.048c.6.2 1.229.37 1.856.51 1.456.326 2.906.489 4 .489Zm5.569-11.984C15.712 11.341 13.443 11 12 11c-1.443 0-3.712.341-5.569 1.016-.93.338-1.627.713-2.054 1.071a1.52 1.52 0 0 0-.348.379.283.283 0 0 0-.028.06L4 13.533v5.934l.001.007a.283.283 0 0 0 .028.06c.043.075.142.207.348.379.358.3.906.613 1.623.905v-.151C6 18.893 9.998 18 12 18s6 .893 6 2.667v.151l.067-.028c.684-.284 1.21-.587 1.556-.877a1.52 1.52 0 0 0 .348-.379.279.279 0 0 0 .028-.06v-.005l.001-.002v-5.936l-.001-.005a.279.279 0 0 0-.028-.06 1.52 1.52 0 0 0-.348-.379c-.427-.357-1.123-.733-2.054-1.071Z",
         fill: "currentColor"
     })));

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

@@ -22,8 +22,8 @@ export function ChildIcon({ 'aria-label': ariaLabel = 'Child' , copyrightYear ='
         d: "M15.333 12a1.61 1.61 0 0 1-1.183-.483 1.61 1.61 0 0 1-.483-1.184c0-.466.16-.86.483-1.183a1.61 1.61 0 0 1 1.183-.483c.467 0 .861.16 1.184.483.322.322.483.717.483 1.183 0 .467-.161.861-.483 1.184a1.61 1.61 0 0 1-1.184.483ZM8.667 12a1.61 1.61 0 0 1-1.184-.483A1.61 1.61 0 0 1 7 10.333c0-.466.161-.86.483-1.183a1.61 1.61 0 0 1 1.184-.483c.466 0 .86.16 1.183.483.322.322.483.717.483 1.183 0 .467-.16.861-.483 1.184A1.61 1.61 0 0 1 8.667 12ZM12 19c-1.333 0-2.539-.367-3.617-1.1A6.536 6.536 0 0 1 6 15h12a6.536 6.536 0 0 1-2.383 2.9C14.539 18.633 13.333 19 12 19Z",
         fill: "currentColor"
     }), React.createElement("path", {
-        "fill-rule": "evenodd",
-        "clip-rule": "evenodd",
+        fillRule: "evenodd",
+        clipRule: "evenodd",
         d: "M12.262.003A12.24 12.24 0 0 0 12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12C24 5.56 18.928.306 12.56.013A1.007 1.007 0 0 0 12.4 0c-.046 0-.092 0-.138.003ZM12 22c5.523 0 10-4.477 10-10 0-5.424-4.318-9.84-9.705-9.996C11.603 2.061 11 2.674 11 3.5c0 .867.665 1.5 1.4 1.5.347 0 .668-.134.918-.368a1 1 0 1 1 1.364 1.463c-.599.558-1.4.905-2.282.905C10.484 7 9 5.394 9 3.5c0-.38.06-.748.17-1.094C5.027 3.626 2 7.46 2 12c0 5.523 4.477 10 10 10Z",
         fill: "currentColor"
     }));