@westpac/ui 0.26.0 → 0.27.0

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

@@ -3252,6 +3252,8 @@ video {
   margin-bottom: -1px;
 }.ml-1 {
   margin-left: 0.375rem;
+}.ml-1\.5 {
+  margin-left: 0.5625rem;
 }.ml-\[-1px\] {
   margin-left: -1px;
 }.ml-\[0\.4em\] {
@@ -3260,6 +3262,8 @@ video {
   margin-left: auto;
 }.mr-1 {
   margin-right: 0.375rem;
+}.mr-1\.5 {
+  margin-right: 0.5625rem;
 }.mr-2 {
   margin-right: 0.75rem;
 }.mr-3 {
@@ -3270,8 +3274,6 @@ video {
   margin-right: -6px;
 }.mr-\[0\.25rem\] {
   margin-right: 0.25rem;
-}.mr-\[0\.4em\] {
-  margin-right: 0.4em;
 }.mr-\[0\.5em\] {
   margin-right: 0.5em;
 }.mt-0 {
@@ -3556,6 +3558,9 @@ video {
   width: fit-content;
 }.w-full {
   width: 100%;
+}.w-max {
+  width: -moz-max-content;
+  width: max-content;
 }.min-w-0 {
   min-width: 0px;
 }.min-w-\[100px\] {
@@ -3752,6 +3757,8 @@ video {
   overflow-x: auto;
 }.overflow-y-auto {
   overflow-y: auto;
+}.overflow-y-visible {
+  overflow-y: visible;
 }.truncate {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -3973,8 +3980,6 @@ video {
 }.border-r-border {
   --tw-border-opacity: 1;
   border-right-color: rgba(var(--colors-border), var(--tw-border-opacity));
-}.border-t-\[transparent\] {
-  border-top-color: transparent;
 }.border-t-border {
   --tw-border-opacity: 1;
   border-top-color: rgba(var(--colors-border), var(--tw-border-opacity));
@@ -4773,8 +4778,6 @@ video {
   padding-bottom: 4.5rem;
 }.pb-2 {
   padding-bottom: 0.75rem;
-}.pb-2\.5 {
-  padding-bottom: 0.9375rem;
 }.pb-4 {
   padding-bottom: 1.5rem;
 }.pb-5 {
@@ -4953,8 +4956,6 @@ video {
   padding-top: 0.1875rem;
 }.pt-1 {
   padding-top: 0.375rem;
-}.pt-1\.5 {
-  padding-top: 0.5625rem;
 }.pt-12 {
   padding-top: 4.5rem;
 }.pt-2 {
@@ -7094,24 +7095,12 @@ video {
   }.xsl\:border-b-border {
     --tw-border-opacity: 1;
     border-bottom-color: rgba(var(--colors-border), var(--tw-border-opacity));
-  }.xsl\:border-b-hero {
-    --tw-border-opacity: 1;
-    border-bottom-color: rgba(var(--colors-hero), var(--tw-border-opacity));
   }.xsl\:border-b-primary {
     --tw-border-opacity: 1;
     border-bottom-color: rgba(var(--colors-primary), var(--tw-border-opacity));
-  }.xsl\:border-b-white {
-    --tw-border-opacity: 1;
-    border-bottom-color: rgb(255 255 255 / var(--tw-border-opacity));
-  }.xsl\:border-l-hero {
-    --tw-border-opacity: 1;
-    border-left-color: rgba(var(--colors-hero), var(--tw-border-opacity));
   }.xsl\:border-l-primary {
     --tw-border-opacity: 1;
     border-left-color: rgba(var(--colors-primary), var(--tw-border-opacity));
-  }.xsl\:border-l-white {
-    --tw-border-opacity: 1;
-    border-left-color: rgb(255 255 255 / var(--tw-border-opacity));
   }.xsl\:border-t-border {
     --tw-border-opacity: 1;
     border-top-color: rgba(var(--colors-border), var(--tw-border-opacity));
@@ -7215,9 +7204,6 @@ video {
   }.xsl\:py-1\.5 {
     padding-top: 0.5625rem;
     padding-bottom: 0.5625rem;
-  }.xsl\:py-2 {
-    padding-top: 0.75rem;
-    padding-bottom: 0.75rem;
   }.xsl\:py-3 {
     padding-top: 1.125rem;
     padding-bottom: 1.125rem;
@@ -7234,14 +7220,8 @@ video {
       padding-left: 1.875rem;
       padding-right: 1.875rem;
     }
-  }.xsl\:pb-1 {
-    padding-bottom: 0.375rem;
   }.xsl\:pb-12 {
     padding-bottom: 4.5rem;
-  }.xsl\:pb-2 {
-    padding-bottom: 0.75rem;
-  }.xsl\:pb-2\.5 {
-    padding-bottom: 0.9375rem;
   }.xsl\:pb-5 {
     padding-bottom: 1.875rem;
   }.xsl\:pb-7 {
@@ -7280,10 +7260,6 @@ video {
     padding-top: 0rem;
   }.xsl\:pt-0\.5 {
     padding-top: 0.1875rem;
-  }.xsl\:pt-1 {
-    padding-top: 0.375rem;
-  }.xsl\:pt-1\.5 {
-    padding-top: 0.5625rem;
   }.xsl\:pt-12 {
     padding-top: 4.5rem;
   }.xsl\:pt-\[0\.625rem\] {
@@ -8224,24 +8200,12 @@ video {
   }.sm\:border-b-border {
     --tw-border-opacity: 1;
     border-bottom-color: rgba(var(--colors-border), var(--tw-border-opacity));
-  }.sm\:border-b-hero {
-    --tw-border-opacity: 1;
-    border-bottom-color: rgba(var(--colors-hero), var(--tw-border-opacity));
   }.sm\:border-b-primary {
     --tw-border-opacity: 1;
     border-bottom-color: rgba(var(--colors-primary), var(--tw-border-opacity));
-  }.sm\:border-b-white {
-    --tw-border-opacity: 1;
-    border-bottom-color: rgb(255 255 255 / var(--tw-border-opacity));
-  }.sm\:border-l-hero {
-    --tw-border-opacity: 1;
-    border-left-color: rgba(var(--colors-hero), var(--tw-border-opacity));
   }.sm\:border-l-primary {
     --tw-border-opacity: 1;
     border-left-color: rgba(var(--colors-primary), var(--tw-border-opacity));
-  }.sm\:border-l-white {
-    --tw-border-opacity: 1;
-    border-left-color: rgb(255 255 255 / var(--tw-border-opacity));
   }.sm\:border-t-border {
     --tw-border-opacity: 1;
     border-top-color: rgba(var(--colors-border), var(--tw-border-opacity));
@@ -8353,9 +8317,6 @@ video {
   }.sm\:py-1\.5 {
     padding-top: 0.5625rem;
     padding-bottom: 0.5625rem;
-  }.sm\:py-2 {
-    padding-top: 0.75rem;
-    padding-bottom: 0.75rem;
   }.sm\:py-3 {
     padding-top: 1.125rem;
     padding-bottom: 1.125rem;
@@ -8375,14 +8336,8 @@ video {
       padding-left: 3.375rem;
       padding-right: 3.375rem;
     }
-  }.sm\:pb-1 {
-    padding-bottom: 0.375rem;
   }.sm\:pb-12 {
     padding-bottom: 4.5rem;
-  }.sm\:pb-2 {
-    padding-bottom: 0.75rem;
-  }.sm\:pb-2\.5 {
-    padding-bottom: 0.9375rem;
   }.sm\:pb-5 {
     padding-bottom: 1.875rem;
   }.sm\:pb-7 {
@@ -8421,10 +8376,6 @@ video {
     padding-top: 0rem;
   }.sm\:pt-0\.5 {
     padding-top: 0.1875rem;
-  }.sm\:pt-1 {
-    padding-top: 0.375rem;
-  }.sm\:pt-1\.5 {
-    padding-top: 0.5625rem;
   }.sm\:pt-12 {
     padding-top: 4.5rem;
   }.sm\:pt-\[0\.625rem\] {
@@ -9422,24 +9373,12 @@ video {
   }.md\:border-b-border {
     --tw-border-opacity: 1;
     border-bottom-color: rgba(var(--colors-border), var(--tw-border-opacity));
-  }.md\:border-b-hero {
-    --tw-border-opacity: 1;
-    border-bottom-color: rgba(var(--colors-hero), var(--tw-border-opacity));
   }.md\:border-b-primary {
     --tw-border-opacity: 1;
     border-bottom-color: rgba(var(--colors-primary), var(--tw-border-opacity));
-  }.md\:border-b-white {
-    --tw-border-opacity: 1;
-    border-bottom-color: rgb(255 255 255 / var(--tw-border-opacity));
-  }.md\:border-l-hero {
-    --tw-border-opacity: 1;
-    border-left-color: rgba(var(--colors-hero), var(--tw-border-opacity));
   }.md\:border-l-primary {
     --tw-border-opacity: 1;
     border-left-color: rgba(var(--colors-primary), var(--tw-border-opacity));
-  }.md\:border-l-white {
-    --tw-border-opacity: 1;
-    border-left-color: rgb(255 255 255 / var(--tw-border-opacity));
   }.md\:border-t-border {
     --tw-border-opacity: 1;
     border-top-color: rgba(var(--colors-border), var(--tw-border-opacity));
@@ -9568,9 +9507,6 @@ video {
   }.md\:py-1\.5 {
     padding-top: 0.5625rem;
     padding-bottom: 0.5625rem;
-  }.md\:py-2 {
-    padding-top: 0.75rem;
-    padding-bottom: 0.75rem;
   }.md\:py-3 {
     padding-top: 1.125rem;
     padding-bottom: 1.125rem;
@@ -9583,14 +9519,8 @@ video {
   }.md\:py-\[0\.5rem\] {
     padding-top: 0.5rem;
     padding-bottom: 0.5rem;
-  }.md\:pb-1 {
-    padding-bottom: 0.375rem;
   }.md\:pb-12 {
     padding-bottom: 4.5rem;
-  }.md\:pb-2 {
-    padding-bottom: 0.75rem;
-  }.md\:pb-2\.5 {
-    padding-bottom: 0.9375rem;
   }.md\:pb-4 {
     padding-bottom: 1.5rem;
   }.md\:pb-5 {
@@ -9631,10 +9561,6 @@ video {
     padding-top: 0rem;
   }.md\:pt-0\.5 {
     padding-top: 0.1875rem;
-  }.md\:pt-1 {
-    padding-top: 0.375rem;
-  }.md\:pt-1\.5 {
-    padding-top: 0.5625rem;
   }.md\:pt-12 {
     padding-top: 4.5rem;
   }.md\:pt-\[0\.625rem\] {
@@ -10612,24 +10538,12 @@ video {
   }.lg\:border-b-border {
     --tw-border-opacity: 1;
     border-bottom-color: rgba(var(--colors-border), var(--tw-border-opacity));
-  }.lg\:border-b-hero {
-    --tw-border-opacity: 1;
-    border-bottom-color: rgba(var(--colors-hero), var(--tw-border-opacity));
   }.lg\:border-b-primary {
     --tw-border-opacity: 1;
     border-bottom-color: rgba(var(--colors-primary), var(--tw-border-opacity));
-  }.lg\:border-b-white {
-    --tw-border-opacity: 1;
-    border-bottom-color: rgb(255 255 255 / var(--tw-border-opacity));
-  }.lg\:border-l-hero {
-    --tw-border-opacity: 1;
-    border-left-color: rgba(var(--colors-hero), var(--tw-border-opacity));
   }.lg\:border-l-primary {
     --tw-border-opacity: 1;
     border-left-color: rgba(var(--colors-primary), var(--tw-border-opacity));
-  }.lg\:border-l-white {
-    --tw-border-opacity: 1;
-    border-left-color: rgb(255 255 255 / var(--tw-border-opacity));
   }.lg\:border-t-border {
     --tw-border-opacity: 1;
     border-top-color: rgba(var(--colors-border), var(--tw-border-opacity));
@@ -10746,9 +10660,6 @@ video {
   }.lg\:py-1\.5 {
     padding-top: 0.5625rem;
     padding-bottom: 0.5625rem;
-  }.lg\:py-2 {
-    padding-top: 0.75rem;
-    padding-bottom: 0.75rem;
   }.lg\:py-3 {
     padding-top: 1.125rem;
     padding-bottom: 1.125rem;
@@ -10761,14 +10672,8 @@ video {
   }.lg\:py-\[0\.5rem\] {
     padding-top: 0.5rem;
     padding-bottom: 0.5rem;
-  }.lg\:pb-1 {
-    padding-bottom: 0.375rem;
   }.lg\:pb-12 {
     padding-bottom: 4.5rem;
-  }.lg\:pb-2 {
-    padding-bottom: 0.75rem;
-  }.lg\:pb-2\.5 {
-    padding-bottom: 0.9375rem;
   }.lg\:pb-5 {
     padding-bottom: 1.875rem;
   }.lg\:pb-7 {
@@ -10807,10 +10712,6 @@ video {
     padding-top: 0rem;
   }.lg\:pt-0\.5 {
     padding-top: 0.1875rem;
-  }.lg\:pt-1 {
-    padding-top: 0.375rem;
-  }.lg\:pt-1\.5 {
-    padding-top: 0.5625rem;
   }.lg\:pt-12 {
     padding-top: 4.5rem;
   }.lg\:pt-\[0\.625rem\] {
@@ -11753,24 +11654,12 @@ video {
   }.xl\:border-b-border {
     --tw-border-opacity: 1;
     border-bottom-color: rgba(var(--colors-border), var(--tw-border-opacity));
-  }.xl\:border-b-hero {
-    --tw-border-opacity: 1;
-    border-bottom-color: rgba(var(--colors-hero), var(--tw-border-opacity));
   }.xl\:border-b-primary {
     --tw-border-opacity: 1;
     border-bottom-color: rgba(var(--colors-primary), var(--tw-border-opacity));
-  }.xl\:border-b-white {
-    --tw-border-opacity: 1;
-    border-bottom-color: rgb(255 255 255 / var(--tw-border-opacity));
-  }.xl\:border-l-hero {
-    --tw-border-opacity: 1;
-    border-left-color: rgba(var(--colors-hero), var(--tw-border-opacity));
   }.xl\:border-l-primary {
     --tw-border-opacity: 1;
     border-left-color: rgba(var(--colors-primary), var(--tw-border-opacity));
-  }.xl\:border-l-white {
-    --tw-border-opacity: 1;
-    border-left-color: rgb(255 255 255 / var(--tw-border-opacity));
   }.xl\:border-t-border {
     --tw-border-opacity: 1;
     border-top-color: rgba(var(--colors-border), var(--tw-border-opacity));
@@ -11874,9 +11763,6 @@ video {
   }.xl\:py-1\.5 {
     padding-top: 0.5625rem;
     padding-bottom: 0.5625rem;
-  }.xl\:py-2 {
-    padding-top: 0.75rem;
-    padding-bottom: 0.75rem;
   }.xl\:py-3 {
     padding-top: 1.125rem;
     padding-bottom: 1.125rem;
@@ -11889,14 +11775,8 @@ video {
   }.xl\:py-\[0\.5rem\] {
     padding-top: 0.5rem;
     padding-bottom: 0.5rem;
-  }.xl\:pb-1 {
-    padding-bottom: 0.375rem;
   }.xl\:pb-12 {
     padding-bottom: 4.5rem;
-  }.xl\:pb-2 {
-    padding-bottom: 0.75rem;
-  }.xl\:pb-2\.5 {
-    padding-bottom: 0.9375rem;
   }.xl\:pb-5 {
     padding-bottom: 1.875rem;
   }.xl\:pb-7 {
@@ -11935,10 +11815,6 @@ video {
     padding-top: 0rem;
   }.xl\:pt-0\.5 {
     padding-top: 0.1875rem;
-  }.xl\:pt-1 {
-    padding-top: 0.375rem;
-  }.xl\:pt-1\.5 {
-    padding-top: 0.5625rem;
   }.xl\:pt-12 {
     padding-top: 4.5rem;
   }.xl\:pt-\[0\.625rem\] {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@westpac/ui",
-  "version": "0.26.0",
+  "version": "0.27.0",
   "license": "MIT",
   "sideEffects": false,
   "type": "module",
@@ -257,9 +257,9 @@
     "typescript": "^5.5.4",
     "vite": "^5.2.12",
     "vitest": "^0.30.1",
+    "@westpac/test-config": "~0.0.0",
     "@westpac/eslint-config": "~0.4.0",
-    "@westpac/ts-config": "~0.0.0",
-    "@westpac/test-config": "~0.0.0"
+    "@westpac/ts-config": "~0.0.0"
   },
   "dependencies": {
     "@duetds/date-picker": "~1.4.0",
@@ -294,7 +294,7 @@
     "build:css:all": "pnpm build:css && pnpm build:css:min",
     "build:types": "tsc --project tsconfig.build.json",
     "build:esm": "swc ./src -d dist --no-swcrc --config-file .swcrc",
-    "build:icons": "ts-node --esm ./utils/build-icons/index.ts",
+    "build:icons": "node --loader ts-node/esm ./utils/build-icons/index.ts",
     "build:exports": "ts-node --esm ./utils/build-exports/index.ts && prettier --write package.json",
     "build:watch": "pnpm clean && pnpm build:types && pnpm build:esm -w && pnpm build:css:all",
     "build:type-table": "node generate-component-types.cjs",

package/src/components/button/button.styles.ts

@@ -6,7 +6,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]',
@@ -14,10 +14,18 @@ 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]' },
-        medium: { base: 'typography-body-9 px-2 py-[0.3125rem] active-theme-rams:before:h-0.5' },
-        large: { base: 'typography-body-9 px-2.5 py-2 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' },
+        small: {
+          base: 'typography-body-10 px-1.5 active-theme-rams:before:h-[0.0625rem] h-5',
+        },
+        medium: {
+          base: 'typography-body-9 px-2 active-theme-rams:before:h-0.5 h-6',
+        },
+        large: {
+          base: 'typography-body-9 px-2.5 active-theme-rams:before:h-0.5 h-7',
+        },
+        xlarge: {
+          base: 'typography-body-8 px-3 active-theme-rams:before:h-1 h-8',
+        },
       },
       look: {
         primary: {
@@ -67,12 +75,24 @@ export const styles = tv(
       {
         slots: ['iconBefore'],
         hasChildren: true,
-        className: 'mr-[0.4em]',
+        className: 'mr-1',
+      },
+      {
+        slots: ['iconAfter'],
+        hasChildren: true,
+        className: 'ml-1',
+      },
+      {
+        slots: ['iconBefore'],
+        size: 'xlarge',
+        hasChildren: true,
+        className: 'mr-1.5',
       },
       {
         slots: ['iconAfter'],
+        size: 'xlarge',
         hasChildren: true,
-        className: 'ml-[0.4em]',
+        className: 'ml-1.5',
       },
     ],
   },

package/src/components/button/button.utils.ts

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

package/src/components/filter/components/filter-buttons/filter-buttons.component.tsx

@@ -38,35 +38,38 @@ export function FilterButtons({
     }
   }, []);
 
-  const handleScrollButton = useCallback((direction: string) => {
-    if (scrollContainerRef.current) {
-      const container = scrollContainerRef.current;
-
-      let targetElement;
-      let scrollX;
-      let scrollBy = true;
-      const buttonPaddingOffset = 20;
-      if (direction === 'left') {
-        if (scrollTarget.left === -1) {
-          scrollX = -container.clientWidth;
+  const handleScrollButton = useCallback(
+    (direction: string) => {
+      if (scrollContainerRef.current) {
+        const container = scrollContainerRef.current;
+
+        let targetElement;
+        let scrollX;
+        let scrollBy = true;
+        const buttonPaddingOffset = 20;
+        if (direction === 'left') {
+          if (scrollTarget.left === -1) {
+            scrollX = -container.clientWidth;
+          } else {
+            scrollBy = false;
+            targetElement = scrollElementRefs.current[scrollTarget.left];
+            scrollX =
+              targetElement.offsetLeft + targetElement.offsetWidth - container.offsetWidth + buttonPaddingOffset;
+          }
         } else {
-          scrollBy = false;
-          targetElement = scrollElementRefs.current[scrollTarget.left];
-          scrollX = targetElement.offsetLeft + targetElement.offsetWidth - container.offsetWidth + buttonPaddingOffset;
-        }
-      } else {
-        if (scrollTarget.right === -1) {
-          scrollX = container.clientWidth;
-        } else {
-          scrollBy = false;
-          targetElement = scrollElementRefs.current[scrollTarget.right];
-          scrollX = targetElement.offsetLeft - buttonPaddingOffset;
+          if (scrollTarget.right === -1) {
+            scrollX = container.clientWidth;
+          } else {
+            scrollBy = false;
+            targetElement = scrollElementRefs.current[scrollTarget.right];
+            scrollX = targetElement.offsetLeft - buttonPaddingOffset;
+          }
         }
+        setScroll(scrollBy, scrollX, container);
       }
-      setScroll(scrollBy, scrollX, container);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+    },
+    [scrollTarget],
+  );
 
   const getTargetLeft = useCallback((element: HTMLButtonElement, cLeft: number, index: number, targetLeft: number) => {
     const eLeft = element.offsetLeft;
@@ -113,30 +116,33 @@ export function FilterButtons({
 
       return { targetLeft, targetRight };
     },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
     [],
   );
 
-  const handleScrollTarget = useCallback((container: HTMLUListElement) => {
-    let targetRight = scrollTarget.right;
-    let targetLeft = scrollTarget.left;
-    const cLeft = container.scrollLeft;
-    const cRight = cLeft + container.clientWidth;
-
-    scrollElementRefs.current.forEach((element: HTMLButtonElement, index: number) => {
-      targetLeft = getTargetLeft(element, cLeft, index, targetLeft);
-      targetRight = getTargetRight(element, cRight, index, targetRight);
-      const targets = adjustTargets(element, cLeft, cRight, targetLeft, targetRight);
-      targetLeft = targets.targetLeft;
-      targetRight = targets.targetRight;
-      if (targetLeft === filterButtons.length - 1) {
-        targetLeft -= 1;
-      }
-    });
+  const handleScrollTarget = useCallback(
+    (container: HTMLUListElement) => {
+      let targetRight = scrollTarget.right;
+      let targetLeft = scrollTarget.left;
+      const cLeft = container.scrollLeft;
+      const cRight = cLeft + container.clientWidth;
+
+      scrollElementRefs.current.forEach((element: HTMLButtonElement, index: number) => {
+        targetLeft = getTargetLeft(element, cLeft, index, targetLeft);
+        targetRight = getTargetRight(element, cRight, index, targetRight);
+        const targets = adjustTargets(element, cLeft, cRight, targetLeft, targetRight);
+        targetLeft = targets.targetLeft;
+        targetRight = targets.targetRight;
+        if (targetLeft === filterButtons.length - 1) {
+          targetLeft -= 1;
+        }
+      });
 
-    setScrollTarget({ left: targetLeft, right: targetRight });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+      if (targetLeft !== scrollTarget.left || targetRight !== scrollTarget.right) {
+        setScrollTarget({ left: targetLeft, right: targetRight });
+      }
+    },
+    [scrollTarget, getTargetLeft, getTargetRight, adjustTargets],
+  );
 
   const handleScrollable = useCallback((container: HTMLUListElement) => {
     const isLeftScrollable = container.scrollLeft >= 1;
@@ -150,8 +156,7 @@ export function FilterButtons({
       handleScrollTarget(container);
       handleScrollable(container);
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [handleScrollTarget, handleScrollable]);
 
   useEffect(() => {
     const container = scrollContainerRef.current;
@@ -165,10 +170,9 @@ export function FilterButtons({
 
     return () => {
       container?.removeEventListener('scroll', handleScroll);
-      window.removeEventListener('reize', handleScroll);
+      window.removeEventListener('resize', handleScroll);
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [handleScrollTarget, handleScrollable]);
 
   return (
     <Tag className={styles.base({ className })}>

package/src/components/filter/components/filter-buttons/filter-buttons.styles.ts

@@ -3,7 +3,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/src/components/icon/components/cancel-card-icon.tsx

@@ -6,34 +6,30 @@ import { type IconProps } from '../icon.types.js';
 export function CancelCardIcon({
   look = 'filled',
   'aria-label': ariaLabel = 'Cancel Card',
-  copyrightYear = '2024',
+  copyrightYear = '2023',
   ...props
 }: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
       {look === 'filled' ? (
         <Fragment>
-          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none">
-            <path
-              fill-rule="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"
-              fill="currentColor"
-            />
-            <path d="M23 10h-8.758L24 19.757V4a2 2 0 0 0-2-2H6.242l4 4H23v4Z" fill="currentColor" />
-          </svg>
+          <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"
+            clipRule="evenodd"
+            fill="currentColor"
+          />
+          <path d="M23 10h-8.758L24 19.757V4a2 2 0 0 0-2-2H6.242l4 4H23v4Z" fill="currentColor" />
         </Fragment>
       ) : (
         <Fragment>
-          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none">
-            <path
-              fill-rule="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"
-              fill="currentColor"
-            />
-            <path d="M22 8h-9.758l4 4H22v5.757l2 2V4a2 2 0 0 0-2-2H6.242l2 2H22v4Z" fill="currentColor" />
-          </svg>
+          <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"
+            clipRule="evenodd"
+            fill="currentColor"
+          />
+          <path d="M22 8h-9.758l4 4H22v5.757l2 2V4a2 2 0 0 0-2-2H6.242l2 2H22v4Z" fill="currentColor" />
         </Fragment>
       )}
     </Icon>