@westpac/ui 0.26.0 → 0.27.0

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 px-1.5 active-theme-rams:before:h-[0.0625rem] h-5'
             },
             medium: {
-                base: 'typography-body-9 px-2 py-[0.3125rem] active-theme-rams:before:h-0.5'
+                base: 'typography-body-9 px-2 active-theme-rams:before:h-0.5 h-6'
             },
             large: {
-                base: 'typography-body-9 px-2.5 py-2 active-theme-rams:before:h-0.5'
+                base: 'typography-body-9 px-2.5 active-theme-rams:before:h-0.5 h-7'
             },
             xlarge: {
-                base: 'typography-body-8 px-3 pb-2.5 pt-1.5 active-theme-rams:before:h-1'
+                base: 'typography-body-8 px-3 active-theme-rams:before:h-1 h-8'
             }
         },
         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/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-y-visible overflow-x-auto whitespace-nowrap',
         scrollButton: 'absolute rounded-none contrast-more:bg-black'
     },
     variants: {

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"
     }));

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

@@ -12,31 +12,21 @@ function _extends() {
     };
     return _extends.apply(this, arguments);
 }
-import React, { Fragment } from 'react';
+import React from 'react';
 import { Icon } from '../icon.component.js';
-export function CircleIcon({ look ='filled' , 'aria-label': ariaLabel = 'Circle' , copyrightYear ='2024' , ...props }) {
+export function CircleIcon({ look ='filled' , 'aria-label': ariaLabel = 'Circle' , copyrightYear ='2023' , ...props }) {
     return React.createElement(Icon, _extends({
         "aria-label": ariaLabel,
         copyrightYear: copyrightYear
-    }, props), look === 'filled' ? React.createElement(Fragment, null, React.createElement("svg", {
-        width: "24",
-        height: "24",
-        fill: "none",
-        xmlns: "http://www.w3.org/2000/svg"
-    }, React.createElement("path", {
-        "fill-rule": "evenodd",
-        "clip-rule": "evenodd",
+    }, props), look === 'filled' ? React.createElement("path", {
+        fillRule: "evenodd",
+        clipRule: "evenodd",
         d: "M12 24c6.628 0 12-5.373 12-12S18.628 0 12 0 0 5.373 0 12s5.372 12 12 12Z",
         fill: "currentColor"
-    }))) : React.createElement(Fragment, null, React.createElement("svg", {
-        width: "24",
-        height: "24",
-        fill: "none",
-        xmlns: "http://www.w3.org/2000/svg"
-    }, React.createElement("path", {
-        "fill-rule": "evenodd",
-        "clip-rule": "evenodd",
+    }) : React.createElement("path", {
+        fillRule: "evenodd",
+        clipRule: "evenodd",
         d: "M24 12c0 6.627-5.372 12-12 12S0 18.627 0 12 5.372 0 12 0s12 5.373 12 12ZM12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2Z",
         fill: "currentColor"
-    }))));
+    }));
 }

package/dist/components/icon/components/drop-left-icon.js

@@ -14,7 +14,7 @@ function _extends() {
 }
 import React from 'react';
 import { Icon } from '../icon.component.js';
-export function DropLeftIcon({ 'aria-label': ariaLabel = 'Drop Left' , copyrightYear ='2024' , ...props }) {
+export function DropLeftIcon({ 'aria-label': ariaLabel = 'Drop Left' , copyrightYear ='2023' , ...props }) {
     return React.createElement(Icon, _extends({
         "aria-label": ariaLabel,
         copyrightYear: copyrightYear

package/dist/components/icon/components/drop-right-icon.js

@@ -14,7 +14,7 @@ function _extends() {
 }
 import React from 'react';
 import { Icon } from '../icon.component.js';
-export function DropRightIcon({ 'aria-label': ariaLabel = 'Drop Right' , copyrightYear ='2024' , ...props }) {
+export function DropRightIcon({ 'aria-label': ariaLabel = 'Drop Right' , copyrightYear ='2023' , ...props }) {
     return React.createElement(Icon, _extends({
         "aria-label": ariaLabel,
         copyrightYear: copyrightYear

package/dist/components/icon/components/piggy-bank.js

@@ -20,16 +20,16 @@ export function PiggyBankIcon({ look ='filled' , 'aria-label': ariaLabel = 'Pigg
         copyrightYear: copyrightYear
     }, props), look === 'filled' ? React.createElement(Fragment, null, React.createElement("path", {
         fill: "currentColor",
-        "fill-rule": "evenodd",
+        fillRule: "evenodd",
         d: "M.99 15.975A101.66 101.66 0 0 0 3 24h6v-3h4v3h5.6l2.01-7.92L24 14.97V6.5h-2.61l-2.73-2.63c.04-.24.095-.475.165-.705.07-.23.145-.455.225-.675.04-.1.075-.21.105-.33a1.736 1.736 0 0 0-.48-1.635A1.736 1.736 0 0 0 17.4 0c-.96 0-1.855.21-2.685.63A6.098 6.098 0 0 0 12.6 2.4h-6c-1.84 0-3.4.64-4.68 1.92C.64 5.6 0 7.16 0 9c0 2.136.42 4.19.845 6.264l.145.711ZM6 7a1 1 0 0 1 1-1h5a1 1 0 1 1 0 2H7a1 1 0 0 1-1-1Zm12.5 3.25a1.25 1.25 0 1 1-2.5 0 1.25 1.25 0 0 1 2.5 0Z",
-        "clip-rule": "evenodd"
+        clipRule: "evenodd"
     })) : React.createElement(Fragment, null, React.createElement("path", {
         fill: "currentColor",
         d: "M18.5 10.25a1.25 1.25 0 1 1-2.5 0 1.25 1.25 0 0 1 2.5 0ZM7 6a1 1 0 0 0 0 2h5a1 1 0 1 0 0-2H7Z"
     }), React.createElement("path", {
         fill: "currentColor",
-        "fill-rule": "evenodd",
+        fillRule: "evenodd",
         d: "M12.6 2.4h-6c-1.84 0-3.4.64-4.68 1.92C.64 5.6 0 7.16 0 9c0 2.136.42 4.19.845 6.264l.145.711A101.66 101.66 0 0 0 3 24h6v-3h4v3h5.6l2.01-7.92L24 14.97V6.5h-2.61l-2.73-2.63c.04-.24.095-.475.165-.705.07-.23.145-.455.225-.675.04-.1.075-.21.105-.33a1.736 1.736 0 0 0-.48-1.635A1.736 1.736 0 0 0 17.4 0c-.96 0-1.855.21-2.685.63A6.098 6.098 0 0 0 12.6 2.4ZM22 8.5h-1.417l-4.069-3.92.173-1.039c.054-.324.129-.644.225-.958.058-.193.12-.384.186-.573a3.808 3.808 0 0 0-1.48.405 4.1 4.1 0 0 0-1.428 1.198l-.6.787H6.6c-1.32 0-2.368.436-3.266 1.334C2.436 6.632 2 7.681 2 9c0 1.921.378 3.772.808 5.877l.142.702A99.66 99.66 0 0 0 4.507 22H7v-3h8v3h2.044l1.898-7.478L22 13.52V8.5Z",
-        "clip-rule": "evenodd"
+        clipRule: "evenodd"
     })));
 }

package/dist/components/icon/components/quick-balance-icon.js

@@ -18,28 +18,18 @@ export function QuickBalanceIcon({ look ='filled' , 'aria-label': ariaLabel = 'Q
     return React.createElement(Icon, _extends({
         "aria-label": ariaLabel,
         copyrightYear: copyrightYear
-    }, props), look === 'filled' ? 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("path", {
+        fillRule: "evenodd",
         d: "M24 14c0 3.073-1.155 5.877-3.056 8H3.056A11.955 11.955 0 0 1 0 14C0 7.373 5.373 2 12 2s12 5.373 12 12Zm-3.877-3.88-1.528 1.528c.262.735.405 1.527.405 2.352 0 1.277-.34 2.47-.936 3.5a1 1 0 0 0 1.731 1A8.963 8.963 0 0 0 21 14c0-1.39-.315-2.705-.877-3.88ZM15.88 5.877A9 9 0 0 0 4.204 18.501a1 1 0 0 0 1.732-1.002 7 7 0 0 1 8.416-10.094l1.528-1.528Zm2.827 2.83a1 1 0 0 0-1.414-1.414l-4.775 4.775a2 2 0 1 0 1.414 1.414l4.775-4.775Z",
-        "clip-rule": "evenodd",
+        clipRule: "evenodd",
         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", {
+    }) : React.createElement(Fragment, null, React.createElement("path", {
         d: "m17.797 12.446 1.57-1.57c.407.96.633 2.016.633 3.124a7.983 7.983 0 0 1-.526 2.857 1 1 0 1 1-1.868-.714A5.984 5.984 0 0 0 18 14a6.01 6.01 0 0 0-.203-1.554ZM12 6c1.108 0 2.164.225 3.124.633l-1.57 1.57a6 6 0 0 0-7.16 7.94 1 1 0 1 1-1.868.714A8 8 0 0 1 12 6ZM17.293 7.293a1 1 0 1 1 1.414 1.414l-4.775 4.775a2 2 0 1 1-1.414-1.414l4.775-4.775Z",
         fill: "currentColor"
     }), React.createElement("path", {
-        "fill-rule": "evenodd",
+        fillRule: "evenodd",
         d: "M24 14c0 3.073-1.155 5.877-3.056 8H3.056A11.955 11.955 0 0 1 0 14C0 7.373 5.373 2 12 2s12 5.373 12 12Zm-2 0a9.947 9.947 0 0 1-2 6H4a9.948 9.948 0 0 1-2-6C2 8.477 6.477 4 12 4s10 4.477 10 10Z",
-        "clip-rule": "evenodd",
+        clipRule: "evenodd",
         fill: "currentColor"
-    }))));
+    })));
 }

package/dist/components/icon/components/target-icon.d.ts

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

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

@@ -14,17 +14,11 @@ function _extends() {
 }
 import React from 'react';
 import { Icon } from '../icon.component.js';
-export function TargetIcon({ look ='filled' , 'aria-label': ariaLabel = 'Target' , copyrightYear ='2023' , ...props }) {
+export function TargetIcon({ 'aria-label': ariaLabel = 'Target' , copyrightYear ='2023' , ...props }) {
     return React.createElement(Icon, _extends({
         "aria-label": ariaLabel,
         copyrightYear: copyrightYear
-    }, props), React.createElement("svg", {
-        xmlns: "http://www.w3.org/2000/svg",
-        width: "24",
-        height: "24",
-        viewBox: "0 0 24 24",
-        fill: "none"
-    }, React.createElement("path", {
+    }, props), React.createElement("path", {
         d: "M16.9431 11.2432C16.9806 11.49 17 11.7427 17 12C17 14.7614 14.7614 17 12 17C9.23858 17 7 14.7614 7 12C7 9.23858 9.23858 7 12 7C12.2821 7 12.5588 7.02337 12.8282 7.06827L13.1617 5.09595C12.7838 5.03284 12.3957 5 12 5C8.13401 5 5 8.13401 5 12C5 15.866 8.13401 19 12 19C15.866 19 19 15.866 19 12C19 11.6291 18.9712 11.265 18.9156 10.9097L16.9431 11.2432Z",
         fill: "currentColor"
     }), React.createElement("path", {
@@ -33,5 +27,5 @@ export function TargetIcon({ look ='filled' , 'aria-label': ariaLabel = 'Target'
     }), React.createElement("path", {
         d: "M14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12C10 10.8954 10.8954 10 12 10C12.1791 10 12.3528 10.0236 12.518 10.0677L15.9861 6.59968L15.5146 4.24268L19.7573 0L20.3129 3.68706L24 4.24264L19.7573 8.48532L17.4003 8.01389L13.9322 11.4819C13.9764 11.6472 14 11.8208 14 12Z",
         fill: "currentColor"
-    })));
+    }));
 }

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

@@ -23,18 +23,18 @@ export function XIcon({ look ='filled' , 'aria-label': ariaLabel = 'X' , copyrig
         d: "M15.815 19.008h2.12L8.178 5.04h-2.12l9.757 13.968Z"
     }), React.createElement("path", {
         fill: "currentColor",
-        "fill-rule": "evenodd",
+        fillRule: "evenodd",
         d: "M2 0a2 2 0 0 0-2 2v20a2 2 0 0 0 2 2h20a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2Zm17.315 4-5.824 6.775L19.825 20h-4.659l-4.265-6.212L5.56 20H4.18l6.107-7.104L4.18 4H8.84l4.039 5.883L17.935 4h1.38Z",
-        "clip-rule": "evenodd"
+        clipRule: "evenodd"
     })) : React.createElement(Fragment, null, React.createElement("path", {
         fill: "currentColor",
-        "fill-rule": "evenodd",
+        fillRule: "evenodd",
         d: "m19.315 4-5.824 6.775L19.825 20h-4.659l-4.265-6.212L5.56 20H4.18l6.107-7.104L4.18 4H8.84l4.039 5.883L17.935 4h1.38Zm-3.5 15.008h2.12L8.178 5.04h-2.12l9.757 13.968Z",
-        "clip-rule": "evenodd"
+        clipRule: "evenodd"
     }), React.createElement("path", {
         fill: "currentColor",
-        "fill-rule": "evenodd",
+        fillRule: "evenodd",
         d: "M0 2a2 2 0 0 1 2-2h20a2 2 0 0 1 2 2v20a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2Zm2 0h20v20H2V2Z",
-        "clip-rule": "evenodd"
+        clipRule: "evenodd"
     })));
 }

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

@@ -62,9 +62,9 @@ export { DownloadFileIcon } from './components/download-file-icon.js';
 export { DownloadIcon } from './components/download-icon.js';
 export { DragIcon } from './components/drag-icon.js';
 export { DropDownIcon } from './components/drop-down-icon.js';
-export { DropUpIcon } from './components/drop-up-icon.js';
 export { DropLeftIcon } from './components/drop-left-icon.js';
 export { DropRightIcon } from './components/drop-right-icon.js';
+export { DropUpIcon } from './components/drop-up-icon.js';
 export { DropboxIcon } from './components/dropbox-icon.js';
 export { EditIcon } from './components/edit-icon.js';
 export { EducationIcon } from './components/education-icon.js';

package/dist/components/icon/index.js

@@ -62,9 +62,9 @@ export { DownloadFileIcon } from './components/download-file-icon.js';
 export { DownloadIcon } from './components/download-icon.js';
 export { DragIcon } from './components/drag-icon.js';
 export { DropDownIcon } from './components/drop-down-icon.js';
-export { DropUpIcon } from './components/drop-up-icon.js';
 export { DropLeftIcon } from './components/drop-left-icon.js';
 export { DropRightIcon } from './components/drop-right-icon.js';
+export { DropUpIcon } from './components/drop-up-icon.js';
 export { DropboxIcon } from './components/dropbox-icon.js';
 export { EditIcon } from './components/edit-icon.js';
 export { EducationIcon } from './components/education-icon.js';

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

@@ -3,8 +3,8 @@ import { type InputProps } from './input.types.js';
 export declare function BaseInput({ className, size, invalid, width, ...props }: InputProps, ref: ForwardedRef<HTMLInputElement>): import("react/jsx-runtime").JSX.Element;
 export declare const Input: React.ForwardRefExoticComponent<{
     invalid?: boolean;
-    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;
     width?: 1 | 2 | "full" | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 20 | 30 | {
         [x: string]: 1 | 2 | "full" | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 20 | 30 | undefined;

package/dist/components/pictogram/components/informative/sparkle-pictogram.js

@@ -31,7 +31,7 @@ export function SparklePictogram({ mode ='duo' , viewBoxWidth =78 , viewBoxHeigh
         fill: "none",
         xmlns: "http://www.w3.org/2000/svg"
     }, React.createElement("g", {
-        "clip-path": "url(#clip0_882_7929)"
+        clipPath: "url(#clip0_882_7929)"
     }, React.createElement("path", {
         d: "M38.9999 61.716C37.7659 61.716 36.6949 60.9716 36.2758 59.8201L32.4922 49.5961C31.782 47.6885 30.2802 46.1765 28.371 45.4786L18.1378 41.6984C16.9853 41.268 16.2402 40.1979 16.2402 38.9766C16.2402 37.7553 16.9853 36.6736 18.1378 36.2549L28.371 32.4747C30.2802 31.7652 31.7937 30.2647 32.4922 28.3572L36.2758 18.1332C36.7065 16.9817 37.7775 16.2373 38.9999 16.2373C40.2223 16.2373 43.5 17 44.0525 18.1332L47.8361 28.3572C48.5462 30.2647 50.048 31.7768 51.9572 32.4747L62.1904 36.2549C63.3429 36.6853 64.088 37.7553 64.088 38.9766C64.088 40.1979 63.3429 41.2797 62.1904 41.6984L51.9572 45.4786C50.048 46.1881 48.5346 47.6885 47.8361 49.5961C47.8361 49.5961 45.6049 57.6401 44.0525 59.8201C42.5 62 40.2223 61.716 38.9999 61.716ZM38.9999 18.5403C38.8835 18.5403 38.5808 18.5752 38.4528 18.9242L34.6692 29.1481C33.7262 31.6954 31.7238 33.7076 29.1626 34.6498L18.9295 38.43C18.5919 38.5579 18.5453 38.8487 18.5453 38.9766C18.5453 39.1046 18.5802 39.3954 18.9295 39.5233L29.1626 43.3035C31.7122 44.2457 33.7262 46.2463 34.6692 48.8052L38.4528 59.0291C38.5808 59.3664 38.8719 59.413 38.9999 59.413C39.128 59.413 39.419 59.3781 39.5471 59.0291L43.3307 48.8052C44.2737 46.2579 46.2761 44.2457 48.8372 43.3035L59.0704 39.5233C59.408 39.3954 59.4546 39.1046 59.4546 38.9766C59.4546 38.8487 59.4196 38.5579 59.0704 38.43L48.8372 34.6498C46.2877 33.7076 44.2737 31.707 43.3307 29.1481L41.4389 24.0361L39.5471 18.9242C39.419 18.5868 39.128 18.5403 38.9999 18.5403Z",
         className: fill({
@@ -39,56 +39,56 @@ export function SparklePictogram({ mode ='duo' , viewBoxWidth =78 , viewBoxHeigh
             outline: true
         })
     }), React.createElement("path", {
-        "fill-rule": "evenodd",
-        "clip-rule": "evenodd",
+        fillRule: "evenodd",
+        clipRule: "evenodd",
         d: "M67.5225 39.5465H78.0001V37.2202H67.5225V39.5465Z",
         className: fill({
             mode,
             highlight: true
         })
     }), React.createElement("path", {
-        "fill-rule": "evenodd",
-        "clip-rule": "evenodd",
+        fillRule: "evenodd",
+        clipRule: "evenodd",
         d: "M39.582 10.4682V0H37.2537V10.4682H39.582Z",
         className: fill({
             mode,
             highlight: true
         })
     }), React.createElement("path", {
-        "fill-rule": "evenodd",
-        "clip-rule": "evenodd",
+        fillRule: "evenodd",
+        clipRule: "evenodd",
         d: "M58.8375 20.192L66.0671 12.9689L64.4605 11.3638L57.231 18.5869L58.8375 20.192Z",
         className: fill({
             mode,
             highlight: true
         })
     }), React.createElement("path", {
-        "fill-rule": "evenodd",
-        "clip-rule": "evenodd",
+        fillRule: "evenodd",
+        clipRule: "evenodd",
         d: "M19.9772 18.5869L12.7477 11.3638L11.1411 12.9689L18.3707 20.192L19.9772 18.5869Z",
         className: fill({
             mode,
             highlight: true
         })
     }), React.createElement("path", {
-        "fill-rule": "evenodd",
-        "clip-rule": "evenodd",
+        fillRule: "evenodd",
+        clipRule: "evenodd",
         d: "M0 39.5465H10.4776V37.2202H0V39.5465Z",
         className: fill({
             mode,
             highlight: true
         })
     }), React.createElement("path", {
-        "fill-rule": "evenodd",
-        "clip-rule": "evenodd",
+        fillRule: "evenodd",
+        clipRule: "evenodd",
         d: "M39.582 77.9302V67.4619H37.2537V77.9302H39.582Z",
         className: fill({
             mode,
             highlight: true
         })
     }), React.createElement("path", {
-        "fill-rule": "evenodd",
-        "clip-rule": "evenodd",
+        fillRule: "evenodd",
+        clipRule: "evenodd",
         d: "M12.7477 66.2408L19.9772 59.0177L18.3707 57.4126L11.1411 64.6357L12.7477 66.2408Z",
         className: fill({
             mode,

package/dist/components/progress-indicator/progress-indicator.component.d.ts

@@ -1,2 +1,2 @@
-import { type ProgressIndicatorProps } from './progress-indicator.types.js';
-export declare function ProgressIndicator({ className, children, inverted, size, 'aria-label': ariaLabel, ...props }: ProgressIndicatorProps): import("react/jsx-runtime").JSX.Element;
+import { ProgressIndicatorProps } from './progress-indicator.types.js';
+export declare function ProgressIndicator({ className, children, color, size, 'aria-label': ariaLabel, ...props }: ProgressIndicatorProps): import("react/jsx-runtime").JSX.Element;

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

@@ -13,14 +13,15 @@ function _extends() {
     return _extends.apply(this, arguments);
 }
 import React from 'react';
+import { Icon } from '../icon/icon.component.js';
 import { styles } from './progress-indicator.styles.js';
-export function ProgressIndicator({ className , children , inverted =false , size ='medium' , 'aria-label': ariaLabel = 'Loading' , ...props }) {
-    return React.createElement("div", _extends({
+export function ProgressIndicator({ className , children , color ='hero' , size ='medium' , 'aria-label': ariaLabel = 'Loading' , ...props }) {
+    return React.createElement(Icon, _extends({
         className: styles({
-            className,
-            size,
-            inverted
+            className
         }),
+        size: size,
+        color: color,
         "aria-label": ariaLabel
     }, props), children);
 }

package/dist/components/progress-indicator/progress-indicator.styles.d.ts

@@ -1,41 +1,5 @@
-export declare const styles: import("tailwind-variants").TVReturnType<{
-    size: {
-        xsmall: string;
-        small: string;
-        medium: string;
-        large: string;
-        xlarge: string;
-    };
-    inverted: {
-        true: string;
-        false: string;
-    };
-}, undefined, "box-border inline-block animate-[spin_0.7s_linear_infinite] rounded-full border border-r-0 border-t-[transparent]", {
+export declare const styles: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "box-border inline-block animate-[spin_0.7s_linear_infinite] rounded-full border border-r-0 border-t-transparent", {
     responsiveVariants: string[];
-}, {
-    size: {
-        xsmall: string;
-        small: string;
-        medium: string;
-        large: string;
-        xlarge: string;
-    };
-    inverted: {
-        true: string;
-        false: string;
-    };
-}, undefined, import("tailwind-variants").TVReturnType<{
-    size: {
-        xsmall: string;
-        small: string;
-        medium: string;
-        large: string;
-        xlarge: string;
-    };
-    inverted: {
-        true: string;
-        false: string;
-    };
-}, undefined, "box-border inline-block animate-[spin_0.7s_linear_infinite] rounded-full border border-r-0 border-t-[transparent]", {
+}, {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "box-border inline-block animate-[spin_0.7s_linear_infinite] rounded-full border border-r-0 border-t-transparent", {
     responsiveVariants: string[];
 }, unknown, unknown, undefined>>;