@westpac/ui 0.47.0 → 0.48.0

package/dist/components/accordion/accordion.component.js

@@ -32,15 +32,15 @@ function Accordion({ className, rounded = true, look = 'soft', ...props }, ref)
         ref: domRef,
         className: styles({
             className,
-            rounded
+            rounded,
+            lego: look === 'lego'
         })
-    }, React.createElement("div", {
-        className: "-ml-px -mt-px"
-    }, [
+    }, React.createElement("div", null, [
         ...state.collection
     ].map((item)=>React.createElement(AccordionItemContent, {
             key: item.key,
             item: item,
+            rounded: rounded,
             state: state,
             look: look
         }))));

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

@@ -2,16 +2,25 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
     rounded: {
         true: string;
     };
+    lego: {
+        true: string;
+    };
 }, undefined, "flex flex-col border border-border text-text", {
     responsiveVariants: string[];
 }, {
     rounded: {
         true: string;
     };
+    lego: {
+        true: string;
+    };
 }, undefined, import("tailwind-variants").TVReturnType<{
     rounded: {
         true: string;
     };
+    lego: {
+        true: string;
+    };
 }, undefined, "flex flex-col border border-border text-text", {
     responsiveVariants: string[];
 }, unknown, unknown, undefined>>;

package/dist/components/accordion/accordion.styles.js

@@ -3,7 +3,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/dist/components/accordion/components/accordion-item/accordion-item.component.d.ts

@@ -1,2 +1,2 @@
 import { type AccordionItemProps } from './accordion-item.types.js';
-export declare function AccordionItem<T = HTMLElement>({ className, tag: Tag, look, ...props }: AccordionItemProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function AccordionItem<T = HTMLElement>({ className, tag: Tag, look, rounded, ...props }: AccordionItemProps<T>): import("react/jsx-runtime").JSX.Element;

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

@@ -5,7 +5,7 @@ import { mergeProps, useFocusRing, useHover, useLocale } from 'react-aria';
 import { ArrowLeftIcon, ArrowRightIcon } from '../../../icon/index.js';
 import { styles as accordionItemStyles } from './accordion-item.styles.js';
 const loadAnimations = ()=>import('./accordion-item.utils.js').then((res)=>res.default);
-export function AccordionItem({ className, tag: Tag = 'div', look = 'soft', ...props }) {
+export function AccordionItem({ className, tag: Tag = 'div', look = 'soft', rounded = true, ...props }) {
     const ref = useRef(null);
     const { state, item } = props;
     const { buttonProps, regionProps } = useAccordionItem(props, state, ref);
@@ -20,7 +20,8 @@ export function AccordionItem({ className, tag: Tag = 'div', look = 'soft', ...p
         isOpen,
         isDisabled,
         look,
-        isFocusVisible
+        isFocusVisible,
+        rounded
     });
     return React.createElement(Tag, {
         className: styles.base({
@@ -63,6 +64,9 @@ export function AccordionItem({ className, tag: Tag = 'div', look = 'soft', ...p
             ]
         }
     }, React.createElement("div", {
-        className: styles.content()
+        className: styles.content(),
+        onBlur: (e)=>{
+            e.stopPropagation();
+        }
     }, item.props.children))))));
 }

package/dist/components/accordion/components/accordion-item/accordion-item.styles.d.ts

@@ -28,6 +28,11 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
             itemHeader: string;
         };
     };
+    rounded: {
+        true: {
+            itemHeader: string;
+        };
+    };
 }, {
     base: string;
     itemHeader: string;
@@ -66,6 +71,11 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
             itemHeader: string;
         };
     };
+    rounded: {
+        true: {
+            itemHeader: string;
+        };
+    };
 }, {
     base: string;
     itemHeader: string;
@@ -102,6 +112,11 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
             itemHeader: string;
         };
     };
+    rounded: {
+        true: {
+            itemHeader: string;
+        };
+    };
 }, {
     base: string;
     itemHeader: string;

package/dist/components/accordion/components/accordion-item/accordion-item.styles.js

@@ -1,8 +1,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'
@@ -13,12 +13,12 @@ export const styles = tv({
                 itemHeader: 'border-t border-border bg-light'
             },
             lego: {
-                itemHeader: 'border-l-[0.375rem] border-border bg-light shadow-[inset_0_1px_0_var(--tw-shadow-color)] !shadow-border transition-colors'
+                itemHeader: '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: '',
@@ -36,6 +36,11 @@ export const styles = tv({
             false: {
                 itemHeader: 'outline-none'
             }
+        },
+        rounded: {
+            true: {
+                itemHeader: 'group-first:rounded-t-sm group-last:rounded-b-sm'
+            }
         }
     },
     compoundSlots: [
@@ -58,8 +63,25 @@ export const styles = tv({
             slots: [
                 'content'
             ],
+            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: 'border-l-[0.375rem] border-l-border'
+            className: 'mt-[1px] border-l-[0.375rem] border-r'
         }
     ]
 }, {

package/dist/components/accordion/components/accordion-item/accordion-item.types.d.ts

@@ -1,6 +1,7 @@
 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>;
 export type AccordionItemProps<T = HTMLElement> = {
@@ -16,6 +17,10 @@ export type AccordionItemProps<T = HTMLElement> = {
      * Look of the item
      */
     look?: Variants['look'];
+    /**
+     * Whether accordion is rounded
+     */
+    rounded?: AccordionProps['rounded'];
     /**
      * Tree state
      */

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

@@ -1,7 +1,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/dist/components/field/field.component.js

@@ -26,7 +26,7 @@ export function Field({ className, label, tag: Tag = 'div', children, hintMessag
             className
         }),
         ...props
-    }, React.createElement(Label, {
+    }, label && React.createElement(Label, {
         size: labelSize,
         ...labelProps
     }, label), hintMessage && React.createElement(Hint, descriptionProps, hintMessage), errorMessage && React.createElement(ErrorMessage, {

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

@@ -1,2 +1,2 @@
 import { type HeaderProps } from './header.types.js';
-export declare function Header({ brand, className, children, fixed, isScrolled, leftIcon, leftOnClick, leftAssistiveText, logoAssistiveText, logoLink, logoCenter, logoOnClick, skipLinkContent, skipToContentId, ...props }: HeaderProps): import("react/jsx-runtime").JSX.Element;
+export declare function Header({ anchorTarget, brand, className, children, fixed, fixedMaxWidth, isScrolled, leftIcon, leftOnClick, leftAssistiveText, logoAssistiveText, logoLink, logoCenter, logoOnClick, skipLinkContent, skipToContentId, ...props }: HeaderProps): import("react/jsx-runtime").JSX.Element;

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

@@ -31,7 +31,7 @@ const logoMap = {
         largeLogo: (props)=>React.createElement(RAMSMultibrandLargeLogo, props)
     }
 };
-export function Header({ brand, className, children, fixed = false, isScrolled, leftIcon, leftOnClick, leftAssistiveText, logoAssistiveText, logoLink = '#', logoCenter = false, logoOnClick, skipLinkContent = 'Skip to main content', skipToContentId, ...props }) {
+export function Header({ anchorTarget, brand, className, children, fixed = false, fixedMaxWidth, isScrolled, leftIcon, leftOnClick, leftAssistiveText, logoAssistiveText, logoLink = '#', logoCenter = false, logoOnClick, skipLinkContent = 'Skip to main content', skipToContentId, ...props }) {
     const [scrolled, setScrolled] = useState(false);
     const handleScroll = throttle(()=>{
         let hasScrolled = false;
@@ -65,7 +65,10 @@ export function Header({ brand, className, children, fixed = false, isScrolled,
         }),
         ...props
     }, React.createElement("div", {
-        className: styles.inner()
+        className: styles.inner(),
+        style: {
+            maxWidth: fixed ? fixedMaxWidth : undefined
+        }
     }, skipToContentId && React.createElement(SkipLink, {
         href: skipToContentId
     }, skipLinkContent), leftIcon && React.createElement("div", {
@@ -80,6 +83,7 @@ export function Header({ brand, className, children, fixed = false, isScrolled,
         iconColor: "text"
     })), React.createElement("a", {
         href: logoLink,
+        target: anchorTarget,
         className: styles.logoLink(),
         onClick: logoOnClick
     }, React.createElement(SmallLogo, {

package/dist/components/header/header.types.d.ts

@@ -1,6 +1,11 @@
-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
      */
@@ -9,6 +14,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/dist/components/modal/components/modal-backdrop/modal-backdrop.component.js

@@ -6,7 +6,6 @@ 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'
     });
@@ -22,10 +21,12 @@ export function ModalBackdrop({ zIndex = 100, portalContainer, size, ...props })
     return React.createElement(Overlay, {
         portalContainer: portalContainer || brandContainer
     }, React.createElement("div", {
+        className: styles.base({
+            className
+        }),
         style: {
             zIndex
         },
-        className: styles.base(),
         ...underlayProps
     }, React.createElement("div", {
         ...modalProps,

package/dist/components/modal/components/modal-backdrop/modal-backdrop.styles.js

@@ -1,7 +1,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/dist/components/modal/modal.component.d.ts

@@ -1,2 +1,2 @@
 import { type ModalProps } from './modal.types.js';
-export declare function Modal({ children, title, role, body, size, className, fullscreen, ...props }: ModalProps): import("react/jsx-runtime").JSX.Element;
+export declare function Modal({ children, backdropStyle, title, role, body, size, className, fullscreen, ...props }: ModalProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/modal/modal.component.js

@@ -1,9 +1,10 @@
 'use client';
 import React from 'react';
 import { ModalBackdrop, ModalDialog } from './components/index.js';
-export function Modal({ children, title, role, body, size, className, fullscreen, ...props }) {
+export function Modal({ children, backdropStyle, title, role, body, size, className, fullscreen, ...props }) {
     return React.createElement(ModalBackdrop, {
         size: size,
+        className: backdropStyle,
         ...props
     }, React.createElement(ModalDialog, {
         fullscreen: fullscreen,

package/dist/components/modal/modal.types.d.ts

@@ -1,5 +1,9 @@
 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
      */

package/dist/css/westpac-ui.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;