@westpac/ui 0.47.0 → 0.48.0

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

@@ -3356,9 +3356,6 @@ body {
 .z-10 {
   z-index: 10;
 }
-.z-50 {
-  z-index: 50;
-}
 .z-\[999\] {
   z-index: 999;
 }
@@ -3620,6 +3617,9 @@ body {
 .mt-\[0\.875rem\] {
   margin-top: 0.875rem;
 }
+.mt-\[1px\] {
+  margin-top: 1px;
+}
 .mt-\[200px\] {
   margin-top: 200px;
 }
@@ -4655,10 +4655,6 @@ body {
   --tw-border-opacity: 1;
   border-bottom-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
 }
-.border-l-border {
-  --tw-border-opacity: 1;
-  border-left-color: rgba(var(--colors-border), var(--tw-border-opacity, 1));
-}
 .border-l-hero {
   --tw-border-opacity: 1;
   border-left-color: rgba(var(--colors-hero), var(--tw-border-opacity, 1));
@@ -6287,9 +6283,9 @@ body {
   --tw-shadow-colored: 0 5px 10px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
-.shadow-\[inset_0_1px_0_var\(--tw-shadow-color\)\] {
-  --tw-shadow: inset 0 1px 0 var(--tw-shadow-color);
-  --tw-shadow-colored: inset 0 1px 0 var(--tw-shadow-color);
+.shadow-\[inset_0px_1px_0_0_var\(--tw-shadow-color\)\2c inset_0_-1px_0_0_var\(--tw-shadow-color\)\] {
+  --tw-shadow: inset 0px 1px 0 0 var(--tw-shadow-color),inset 0 -1px 0 0 var(--tw-shadow-color);
+  --tw-shadow-colored: inset 0px 1px 0 0 var(--tw-shadow-color), inset 0 -1px 0 0 var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 .shadow-lg {
@@ -8190,10 +8186,17 @@ body {
   border-top-left-radius: 0.1875rem;
   border-bottom-left-radius: 0.1875rem;
 }
+.group:first-child .group-first\:rounded-t-sm {
+  border-top-left-radius: 0.125rem;
+  border-top-right-radius: 0.125rem;
+}
 .group\/add-on-before:first-child .group-first\/add-on-before\:\!border-x {
   border-left-width: 1px !important;
   border-right-width: 1px !important;
 }
+.group:first-child .group-first\:border-t-0 {
+  border-top-width: 0px;
+}
 .group\/panel:first-child .group-first\/panel\:px-4 {
   padding-left: 1.5rem;
   padding-right: 1.5rem;
@@ -8201,6 +8204,9 @@ body {
 .group\/panel:first-child .group-first\/panel\:pt-4 {
   padding-top: 1.5rem;
 }
+.group:last-child .group-last\:rounded-none {
+  border-radius: 0px;
+}
 .group\/add-on-after:last-child .group-last\/add-on-after\:\!rounded-r {
   border-top-right-radius: 0.1875rem !important;
   border-bottom-right-radius: 0.1875rem !important;
@@ -8213,6 +8219,10 @@ body {
   border-top-right-radius: 0.1875rem;
   border-bottom-right-radius: 0.1875rem;
 }
+.group:last-child .group-last\:rounded-b-sm {
+  border-bottom-right-radius: 0.125rem;
+  border-bottom-left-radius: 0.125rem;
+}
 .group\/add-on-after:last-child .group-last\/add-on-after\:\!border-x {
   border-left-width: 1px !important;
   border-right-width: 1px !important;
@@ -9014,9 +9024,6 @@ body {
   .xsl\:self-center {
     align-self: center;
   }
-  .xsl\:overflow-hidden {
-    overflow: hidden;
-  }
   .xsl\:truncate {
     overflow: hidden;
     text-overflow: ellipsis;
@@ -9111,6 +9118,9 @@ body {
   .xsl\:border-l-\[6px\] {
     border-left-width: 6px;
   }
+  .xsl\:border-r {
+    border-right-width: 1px;
+  }
   .xsl\:border-r-0 {
     border-right-width: 0px;
   }
@@ -9543,9 +9553,9 @@ body {
     --tw-shadow-colored: inset 0 0 0 2px var(--tw-shadow-color);
     box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
   }
-  .xsl\:shadow-\[inset_0_1px_0_var\(--tw-shadow-color\)\] {
-    --tw-shadow: inset 0 1px 0 var(--tw-shadow-color);
-    --tw-shadow-colored: inset 0 1px 0 var(--tw-shadow-color);
+  .xsl\:shadow-\[inset_0px_1px_0_0_var\(--tw-shadow-color\)\2c inset_0_-1px_0_0_var\(--tw-shadow-color\)\] {
+    --tw-shadow: inset 0px 1px 0 0 var(--tw-shadow-color),inset 0 -1px 0 0 var(--tw-shadow-color);
+    --tw-shadow-colored: inset 0px 1px 0 0 var(--tw-shadow-color), inset 0 -1px 0 0 var(--tw-shadow-color);
     box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
   }
   .xsl\:shadow-md {
@@ -9838,6 +9848,14 @@ body {
     --tw-bg-opacity: 1;
     background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
   }
+  .group:first-child .xsl\:group-first\:rounded-t-sm {
+    border-top-left-radius: 0.125rem;
+    border-top-right-radius: 0.125rem;
+  }
+  .group:last-child .xsl\:group-last\:rounded-b-sm {
+    border-bottom-right-radius: 0.125rem;
+    border-bottom-left-radius: 0.125rem;
+  }
   @media (hover: hover) and (pointer: fine) {
     .group\/dualaction:hover .xsl\:group-hover\/dualaction\:text-primary {
       --tw-text-opacity: 1;
@@ -10549,9 +10567,6 @@ body {
   .sm\:self-center {
     align-self: center;
   }
-  .sm\:overflow-hidden {
-    overflow: hidden;
-  }
   .sm\:truncate {
     overflow: hidden;
     text-overflow: ellipsis;
@@ -10646,6 +10661,9 @@ body {
   .sm\:border-l-\[6px\] {
     border-left-width: 6px;
   }
+  .sm\:border-r {
+    border-right-width: 1px;
+  }
   .sm\:border-r-0 {
     border-right-width: 0px;
   }
@@ -11101,9 +11119,9 @@ body {
     --tw-shadow-colored: inset 0 0 0 2px var(--tw-shadow-color);
     box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
   }
-  .sm\:shadow-\[inset_0_1px_0_var\(--tw-shadow-color\)\] {
-    --tw-shadow: inset 0 1px 0 var(--tw-shadow-color);
-    --tw-shadow-colored: inset 0 1px 0 var(--tw-shadow-color);
+  .sm\:shadow-\[inset_0px_1px_0_0_var\(--tw-shadow-color\)\2c inset_0_-1px_0_0_var\(--tw-shadow-color\)\] {
+    --tw-shadow: inset 0px 1px 0 0 var(--tw-shadow-color),inset 0 -1px 0 0 var(--tw-shadow-color);
+    --tw-shadow-colored: inset 0px 1px 0 0 var(--tw-shadow-color), inset 0 -1px 0 0 var(--tw-shadow-color);
     box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
   }
   .sm\:shadow-md {
@@ -11396,6 +11414,14 @@ body {
     --tw-bg-opacity: 1;
     background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
   }
+  .group:first-child .sm\:group-first\:rounded-t-sm {
+    border-top-left-radius: 0.125rem;
+    border-top-right-radius: 0.125rem;
+  }
+  .group:last-child .sm\:group-last\:rounded-b-sm {
+    border-bottom-right-radius: 0.125rem;
+    border-bottom-left-radius: 0.125rem;
+  }
   @media (hover: hover) and (pointer: fine) {
     .group\/checkbox-option:hover .sm\:group-hover\/checkbox-option\:translate-x-1 {
       --tw-translate-x: 0.375rem;
@@ -12178,9 +12204,6 @@ body {
   .md\:self-center {
     align-self: center;
   }
-  .md\:overflow-hidden {
-    overflow: hidden;
-  }
   .md\:truncate {
     overflow: hidden;
     text-overflow: ellipsis;
@@ -12278,6 +12301,9 @@ body {
   .md\:border-l-\[6px\] {
     border-left-width: 6px;
   }
+  .md\:border-r {
+    border-right-width: 1px;
+  }
   .md\:border-r-0 {
     border-right-width: 0px;
   }
@@ -12741,9 +12767,9 @@ body {
     --tw-shadow-colored: inset 0 0 0 2px var(--tw-shadow-color);
     box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
   }
-  .md\:shadow-\[inset_0_1px_0_var\(--tw-shadow-color\)\] {
-    --tw-shadow: inset 0 1px 0 var(--tw-shadow-color);
-    --tw-shadow-colored: inset 0 1px 0 var(--tw-shadow-color);
+  .md\:shadow-\[inset_0px_1px_0_0_var\(--tw-shadow-color\)\2c inset_0_-1px_0_0_var\(--tw-shadow-color\)\] {
+    --tw-shadow: inset 0px 1px 0 0 var(--tw-shadow-color),inset 0 -1px 0 0 var(--tw-shadow-color);
+    --tw-shadow-colored: inset 0px 1px 0 0 var(--tw-shadow-color), inset 0 -1px 0 0 var(--tw-shadow-color);
     box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
   }
   .md\:shadow-md {
@@ -13036,6 +13062,14 @@ body {
     --tw-bg-opacity: 1;
     background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
   }
+  .group:first-child .md\:group-first\:rounded-t-sm {
+    border-top-left-radius: 0.125rem;
+    border-top-right-radius: 0.125rem;
+  }
+  .group:last-child .md\:group-last\:rounded-b-sm {
+    border-bottom-right-radius: 0.125rem;
+    border-bottom-left-radius: 0.125rem;
+  }
   @media (hover: hover) and (pointer: fine) {
     .group\/dualaction:hover .md\:group-hover\/dualaction\:text-primary {
       --tw-text-opacity: 1;
@@ -13800,9 +13834,6 @@ body {
   .lg\:self-center {
     align-self: center;
   }
-  .lg\:overflow-hidden {
-    overflow: hidden;
-  }
   .lg\:truncate {
     overflow: hidden;
     text-overflow: ellipsis;
@@ -13897,6 +13928,9 @@ body {
   .lg\:border-l-\[6px\] {
     border-left-width: 6px;
   }
+  .lg\:border-r {
+    border-right-width: 1px;
+  }
   .lg\:border-r-0 {
     border-right-width: 0px;
   }
@@ -14341,9 +14375,9 @@ body {
     --tw-shadow-colored: inset 0 0 0 2px var(--tw-shadow-color);
     box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
   }
-  .lg\:shadow-\[inset_0_1px_0_var\(--tw-shadow-color\)\] {
-    --tw-shadow: inset 0 1px 0 var(--tw-shadow-color);
-    --tw-shadow-colored: inset 0 1px 0 var(--tw-shadow-color);
+  .lg\:shadow-\[inset_0px_1px_0_0_var\(--tw-shadow-color\)\2c inset_0_-1px_0_0_var\(--tw-shadow-color\)\] {
+    --tw-shadow: inset 0px 1px 0 0 var(--tw-shadow-color),inset 0 -1px 0 0 var(--tw-shadow-color);
+    --tw-shadow-colored: inset 0px 1px 0 0 var(--tw-shadow-color), inset 0 -1px 0 0 var(--tw-shadow-color);
     box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
   }
   .lg\:shadow-md {
@@ -14636,6 +14670,14 @@ body {
     --tw-bg-opacity: 1;
     background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
   }
+  .group:first-child .lg\:group-first\:rounded-t-sm {
+    border-top-left-radius: 0.125rem;
+    border-top-right-radius: 0.125rem;
+  }
+  .group:last-child .lg\:group-last\:rounded-b-sm {
+    border-bottom-right-radius: 0.125rem;
+    border-bottom-left-radius: 0.125rem;
+  }
   @media (hover: hover) and (pointer: fine) {
     .group\/dualaction:hover .lg\:group-hover\/dualaction\:text-primary {
       --tw-text-opacity: 1;
@@ -15346,9 +15388,6 @@ body {
   .xl\:self-center {
     align-self: center;
   }
-  .xl\:overflow-hidden {
-    overflow: hidden;
-  }
   .xl\:truncate {
     overflow: hidden;
     text-overflow: ellipsis;
@@ -15443,6 +15482,9 @@ body {
   .xl\:border-l-\[6px\] {
     border-left-width: 6px;
   }
+  .xl\:border-r {
+    border-right-width: 1px;
+  }
   .xl\:border-r-0 {
     border-right-width: 0px;
   }
@@ -15869,9 +15911,9 @@ body {
     --tw-shadow-colored: inset 0 0 0 2px var(--tw-shadow-color);
     box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
   }
-  .xl\:shadow-\[inset_0_1px_0_var\(--tw-shadow-color\)\] {
-    --tw-shadow: inset 0 1px 0 var(--tw-shadow-color);
-    --tw-shadow-colored: inset 0 1px 0 var(--tw-shadow-color);
+  .xl\:shadow-\[inset_0px_1px_0_0_var\(--tw-shadow-color\)\2c inset_0_-1px_0_0_var\(--tw-shadow-color\)\] {
+    --tw-shadow: inset 0px 1px 0 0 var(--tw-shadow-color),inset 0 -1px 0 0 var(--tw-shadow-color);
+    --tw-shadow-colored: inset 0px 1px 0 0 var(--tw-shadow-color), inset 0 -1px 0 0 var(--tw-shadow-color);
     box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
   }
   .xl\:shadow-md {
@@ -16164,6 +16206,14 @@ body {
     --tw-bg-opacity: 1;
     background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
   }
+  .group:first-child .xl\:group-first\:rounded-t-sm {
+    border-top-left-radius: 0.125rem;
+    border-top-right-radius: 0.125rem;
+  }
+  .group:last-child .xl\:group-last\:rounded-b-sm {
+    border-bottom-right-radius: 0.125rem;
+    border-bottom-left-radius: 0.125rem;
+  }
   @media (hover: hover) and (pointer: fine) {
     .group\/dualaction:hover .xl\:group-hover\/dualaction\:text-primary {
       --tw-text-opacity: 1;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@westpac/ui",
-  "version": "0.47.0",
+  "version": "0.48.0",
   "license": "MIT",
   "sideEffects": false,
   "type": "module",
@@ -229,7 +229,6 @@
     "@vitejs/plugin-react-swc": "^3.7.0",
     "@vitest/coverage-v8": "~3.2.4",
     "chokidar": "^3.5.3",
-    "colorjs.io": "~0.4.5",
     "cross-env": "~7.0.3",
     "csstype": "~3.1.3",
     "eslint": "^9.32.0",
@@ -253,8 +252,8 @@
     "typescript": "^5.5.4",
     "vite": "^7.0.5",
     "vitest": "^3.2.4",
-    "@westpac/eslint-config": "~1.0.1",
     "@westpac/test-config": "~0.0.0",
+    "@westpac/eslint-config": "~1.0.1",
     "@westpac/ts-config": "~0.0.0"
   },
   "dependencies": {
@@ -262,6 +261,7 @@
     "@react-aria/accordion": "3.0.0-alpha.37",
     "@react-aria/utils": "~3.29.1",
     "@react-spectrum/utils": "~3.11.5",
+    "colorjs.io": "~0.4.5",
     "clsx": "^1.2.1",
     "lodash.throttle": "~4.1.1",
     "motion": "~12.23.12",

package/src/components/accordion/accordion.component.tsx

@@ -50,11 +50,11 @@ function Accordion<T extends object>(
       {...filterDOMProps(finalProps as DOMProps)}
       {...accordionProps}
       ref={domRef}
-      className={styles({ className, rounded })}
+      className={styles({ className, rounded, lego: look === 'lego' })}
     >
-      <div className="-ml-px -mt-px">
+      <div>
         {[...state.collection].map(item => (
-          <AccordionItemContent<T> key={item.key} item={item} state={state} look={look} />
+          <AccordionItemContent<T> key={item.key} item={item} rounded={rounded} state={state} look={look} />
         ))}
       </div>
     </div>

package/src/components/accordion/accordion.styles.ts

@@ -5,7 +5,10 @@ export const styles = tv(
     base: 'flex flex-col border border-border text-text',
     variants: {
       rounded: {
-        true: 'overflow-hidden rounded',
+        true: 'rounded',
+      },
+      lego: {
+        true: 'border-0 border-b',
       },
     },
   },

package/src/components/accordion/components/accordion-item/accordion-item.component.tsx

@@ -16,6 +16,7 @@ export function AccordionItem<T = HTMLElement>({
   className,
   tag: Tag = 'div',
   look = 'soft',
+  rounded = true,
   ...props
 }: AccordionItemProps<T>) {
   const ref = useRef<HTMLButtonElement>(null);
@@ -26,7 +27,7 @@ export function AccordionItem<T = HTMLElement>({
   const isDisabled = state.disabledKeys.has(item.key);
   const { hoverProps } = useHover({ isDisabled });
   const { direction } = useLocale();
-  const styles = accordionItemStyles({ isOpen, isDisabled, look, isFocusVisible });
+  const styles = accordionItemStyles({ isOpen, isDisabled, look, isFocusVisible, rounded });
 
   return (
     <Tag className={styles.base({ className })}>
@@ -61,7 +62,16 @@ export function AccordionItem<T = HTMLElement>({
                 }}
                 transition={{ duration: 0.3, ease: [0.25, 0.1, 0.25, 1.0] }}
               >
-                <div className={styles.content()}>{item.props.children}</div>
+                <div
+                  className={styles.content()}
+                  // TODO: Remove below with updated accordion that uses disclosure as the issue doesn't happen with that version
+                  // Need to call stopPropagation here as some events from children are bubbling up and focusing the accordion i.e. inputs
+                  onBlur={e => {
+                    e.stopPropagation();
+                  }}
+                >
+                  {item.props.children}
+                </div>
               </m.div>
             )}
           </AnimatePresence>

package/src/components/accordion/components/accordion-item/accordion-item.styles.ts

@@ -3,8 +3,8 @@ import { tv } from 'tailwind-variants';
 export const styles = tv(
   {
     slots: {
-      base: 'relative',
-      itemHeader: 'typography-body-9 flex w-full flex-1 items-center justify-between px-3 py-2',
+      base: 'group',
+      itemHeader: 'typography-body-9 flex w-full flex-1 items-center justify-between px-3 py-2 group-first:border-t-0',
       headerTitleWrapper: 'flex-1 pr-2 text-left',
       indicator: 'size-3 rotate-90',
       content: 'hidden',
@@ -16,12 +16,12 @@ export const styles = tv(
         },
         lego: {
           itemHeader:
-            'border-l-[0.375rem] border-border bg-light shadow-[inset_0_1px_0_var(--tw-shadow-color)] !shadow-border transition-colors',
+            'mb-[-1px] border-l-[0.375rem] border-r border-border bg-light shadow-[inset_0px_1px_0_0_var(--tw-shadow-color),inset_0_-1px_0_0_var(--tw-shadow-color)] !shadow-border transition-colors',
         },
       },
       isOpen: {
         true: {
-          content: 'block border-t border-border p-3',
+          content: 'block border-border p-3',
         },
         false: {
           base: '',
@@ -40,6 +40,7 @@ export const styles = tv(
           itemHeader: 'outline-none',
         },
       },
+      rounded: { true: { itemHeader: 'group-first:rounded-t-sm group-last:rounded-b-sm' } },
     },
     compoundSlots: [
       {
@@ -55,9 +56,17 @@ export const styles = tv(
       },
       {
         slots: ['content'],
-        look: 'lego',
-        className: 'border-l-[0.375rem] border-l-border',
+        look: 'soft',
+        isOpen: true,
+        className: 'border-t',
+      },
+      {
+        slots: ['itemHeader'],
+        isOpen: true,
+        rounded: true,
+        className: 'group-last:rounded-none',
       },
+      { slots: ['content'], isOpen: true, look: 'lego', className: 'mt-[1px] border-l-[0.375rem] border-r' },
     ],
   },
   { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },

package/src/components/accordion/components/accordion-item/accordion-item.types.ts

@@ -2,6 +2,8 @@ import { HTMLAttributes, ReactNode } from 'react';
 import { Node, TreeState } from 'react-stately';
 import { type VariantProps } from 'tailwind-variants';
 
+import { AccordionProps } from '../../accordion.types.js';
+
 import { styles } from './accordion-item.styles.js';
 
 type Variants = VariantProps<typeof styles>;
@@ -19,6 +21,10 @@ export type AccordionItemProps<T = HTMLElement> = {
    * Look of the item
    */
   look?: Variants['look'];
+  /**
+   * Whether accordion is rounded
+   */
+  rounded?: AccordionProps['rounded'];
   /**
    * Tree state
    */

package/src/components/alert/alert.styles.ts

@@ -3,7 +3,7 @@ import { tv } from 'tailwind-variants';
 export const styles = tv(
   {
     slots: {
-      base: 'typography-body-10 relative mb-4 xsl:flex',
+      base: 'typography-body-10 relative mb-5 xsl:flex',
       icon: 'float-left flex-none',
       body: 'relative flex-1 overflow-hidden xsl:top-[0.125rem] [&_a]:underline',
       heading: 'typography-body-9 mb-1 font-bold',

package/src/components/field/field.component.tsx

@@ -37,9 +37,11 @@ export function Field({
 
   return (
     <Tag className={styles({ className })} {...props}>
-      <Label size={labelSize} {...labelProps}>
-        {label}
-      </Label>
+      {label && (
+        <Label size={labelSize} {...labelProps}>
+          {label}
+        </Label>
+      )}
       {hintMessage && <Hint {...descriptionProps}>{hintMessage}</Hint>}
       {errorMessage && <ErrorMessage {...errorMessageProps} message={errorMessage} />}
       {renderChildren()}

package/src/components/header/header.component.tsx

@@ -52,10 +52,12 @@ const logoMap = {
 };
 
 export function Header({
+  anchorTarget,
   brand,
   className,
   children,
   fixed = false,
+  fixedMaxWidth,
   isScrolled,
   leftIcon,
   leftOnClick,
@@ -97,7 +99,7 @@ export function Header({
 
   return (
     <header className={styles.base({ className })} {...props}>
-      <div className={styles.inner()}>
+      <div className={styles.inner()} style={{ maxWidth: fixed ? fixedMaxWidth : undefined }}>
         {skipToContentId && <SkipLink href={skipToContentId}>{skipLinkContent}</SkipLink>}
         {leftIcon && (
           <div className={styles.leftContent()}>
@@ -113,7 +115,7 @@ export function Header({
           </div>
         )}
         {/* useFocusRing was causing this link to need two clicks to activate so focus-visible styling is used instead */}
-        <a href={logoLink} className={styles.logoLink()} onClick={logoOnClick}>
+        <a href={logoLink} target={anchorTarget} className={styles.logoLink()} onClick={logoOnClick}>
           <SmallLogo align={logoAlignment} aria-label={logoAssistiveText} className={styles.smallLogo()} />
           <LargeLogo aria-label={logoAssistiveText} className={styles.largeLogo()} />
         </a>

package/src/components/header/header.types.ts

@@ -1,8 +1,13 @@
-import { HTMLAttributes } from 'react';
+import { Property } from 'csstype';
+import { HTMLAttributeAnchorTarget, HTMLAttributes } from 'react';
 
 import { BrandKey } from '../../tailwind/index.js';
 
 export type HeaderProps = {
+  /**
+   * Target for the logo link
+   */
+  anchorTarget?: HTMLAttributeAnchorTarget;
   /**
    * Icon for brand
    */
@@ -11,6 +16,11 @@ export type HeaderProps = {
    * Enable fixed header
    */
   fixed?: boolean;
+  /**
+   * Set max width for fixed header for certain layouts
+   * NOTE: Using max-w in classname will work for non-fixed headers
+   */
+  fixedMaxWidth?: Property.MaxWidth;
   /**
    * Used with fixed to show drop shadow when something on screen is scrolled that should trigger drop shadow but doesn't
    */

package/src/components/modal/components/modal-backdrop/modal-backdrop.component.tsx

@@ -1,5 +1,4 @@
 'use client';
-
 import React, { useMemo, useRef } from 'react';
 import { Overlay, useModalOverlay } from 'react-aria';
 
@@ -13,7 +12,7 @@ export function ModalBackdrop({ zIndex = 100, portalContainer, size, ...props }:
   const { children, state, className } = props;
 
   const ref = useRef(null);
-  const styles = backdropStyles({ className, fullscreen: size === 'full', fluid: size === 'fluid' });
+  const styles = backdropStyles({ fullscreen: size === 'full', fluid: size === 'fluid' });
 
   const { modalProps, underlayProps } = useModalOverlay(props, state, ref);
 
@@ -33,7 +32,7 @@ export function ModalBackdrop({ zIndex = 100, portalContainer, size, ...props }:
 
   return (
     <Overlay portalContainer={portalContainer || brandContainer}>
-      <div style={{ zIndex }} className={styles.base()} {...underlayProps}>
+      <div className={styles.base({ className })} style={{ zIndex }} {...underlayProps}>
         <div {...modalProps} ref={ref} className={styles.modal()}>
           {children}
         </div>

package/src/components/modal/components/modal-backdrop/modal-backdrop.styles.ts

@@ -2,7 +2,7 @@ import { tv } from 'tailwind-variants';
 
 export const styles = tv({
   slots: {
-    base: 'fixed inset-0 z-50 flex animate-fadeIn items-center justify-center overflow-y-auto bg-black/50 p-2',
+    base: 'fixed inset-0 flex animate-fadeIn items-center justify-center overflow-y-auto bg-black/50 p-2',
     modal: 'relative top-3 z-10 h-fit w-full animate-fadeInDown',
   },
   variants: {

package/src/components/modal/modal.component.tsx

@@ -5,9 +5,19 @@ import React from 'react';
 import { ModalBackdrop, ModalDialog } from './components/index.js';
 import { type ModalProps } from './modal.types.js';
 
-export function Modal({ children, title, role, body, size, className, fullscreen, ...props }: ModalProps) {
+export function Modal({
+  children,
+  backdropStyle,
+  title,
+  role,
+  body,
+  size,
+  className,
+  fullscreen,
+  ...props
+}: ModalProps) {
   return (
-    <ModalBackdrop size={size} {...props}>
+    <ModalBackdrop size={size} className={backdropStyle} {...props}>
       <ModalDialog
         fullscreen={fullscreen}
         onClose={props.isDismissable ? () => props.state.close() : undefined}

package/src/components/modal/modal.types.ts

@@ -1,6 +1,10 @@
 import { type ModalBackdropProps, ModalDialogProps } from './components/index.js';
 
 export type ModalProps = {
+  /**
+   * Provide inset styles for the backdrop for centering in certain containers
+   */
+  backdropStyle?: string;
   /**
    * Whether the modal is fullscreen
    */