@westpac/ui 0.59.0 → 0.59.2

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

@@ -3,7 +3,7 @@ import React, { forwardRef, useMemo } from 'react';
 import { mergeProps, useFocusRing } from 'react-aria';
 import { styles as buttonStyles } from './button.styles.js';
 import { getIconSize } from './button.utils.js';
-function BaseButton({ className, size = 'medium', look = 'hero', soft, block = false, justify, tag: Tag = 'button', iconBefore: IconBefore, iconAfter: IconAfter, iconLook, iconColor, iconSize, children, removeLinkPadding, ...props }, ref) {
+function BaseButton({ className, size = 'medium', look = 'hero', soft, block = false, justify, tag: Tag = 'button', iconBefore: IconBefore, iconAfter: IconAfter, iconLook, iconColor, iconSize, children, removeLinkPadding, type = Tag === 'button' ? 'button' : undefined, ...props }, ref) {
     const { isFocusVisible, focusProps } = useFocusRing();
     const btnIconSize = useMemo(()=>iconSize || getIconSize(size), [
         iconSize,
@@ -24,7 +24,8 @@ function BaseButton({ className, size = 'medium', look = 'hero', soft, block = f
         className: styles.base({
             className
         }),
-        ...mergeProps(props, focusProps)
+        ...mergeProps(props, focusProps),
+        type: type
     }, IconBefore && React.createElement(IconBefore, {
         look: iconLook,
         size: btnIconSize,

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

@@ -1,2 +1,2 @@
 import { type CompactaProps } from './compacta.types.js';
-export declare function Compacta({ className, children, titleTag: Tag, addText, initialCompactas, ...props }: CompactaProps): import("react/jsx-runtime").JSX.Element;
+export declare function Compacta({ className, children, titleTag: Tag, addText, initialCompactas, onAdd, onRemove, ...props }: CompactaProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/compacta/compacta.component.js

@@ -7,7 +7,7 @@ import { AddCircleIcon, ExpandLessIcon, ExpandMoreIcon, RemoveCircleIcon } from
 import { VisuallyHidden } from '../index.js';
 import { styles as compactaStyles } from './compacta.styles.js';
 const loadAnimations = ()=>import('./compacta.utils.js').then((res)=>res.default);
-export function Compacta({ className, children, titleTag: Tag = 'h3', addText = 'Add another', initialCompactas, ...props }) {
+export function Compacta({ className, children, titleTag: Tag = 'h3', addText = 'Add another', initialCompactas, onAdd, onRemove, ...props }) {
     const [initial, setInitial] = useState(true);
     const id = useId();
     const [items, setItems] = useState([
@@ -61,6 +61,7 @@ export function Compacta({ className, children, titleTag: Tag = 'h3', addText =
             type: 'add',
             index: newItems.length
         });
+        onAdd === null || onAdd === void 0 ? void 0 : onAdd();
     }, [
         id,
         items
@@ -72,6 +73,7 @@ export function Compacta({ className, children, titleTag: Tag = 'h3', addText =
             index,
             id
         });
+        onRemove === null || onRemove === void 0 ? void 0 : onRemove(id, index);
     }, []);
     const handleToggle = useCallback((id, index)=>{
         if (initial) setInitial(false);
@@ -137,7 +139,7 @@ export function Compacta({ className, children, titleTag: Tag = 'h3', addText =
                 const itemId = (_item_id = item.id) !== null && _item_id !== void 0 ? _item_id : `${id}-${generateID()}`;
                 return {
                     id: itemId,
-                    open: index === initialCompactas.length - 1 ? true : false,
+                    open: item.open ? item.open : index === initialCompactas.length - 1,
                     delay: false,
                     title: {
                         primary: (_ref = (_item_title = item.title) === null || _item_title === void 0 ? void 0 : _item_title.primary) !== null && _ref !== void 0 ? _ref : '',
@@ -226,6 +228,7 @@ export function Compacta({ className, children, titleTag: Tag = 'h3', addText =
             id: `gel-compacta-content-${item.id}`
         }, children({
             id: item.id,
+            index,
             setPrimaryTitle: (title)=>setTitle(item.id, 'primary', title),
             setSecondaryTitle: (title)=>setTitle(item.id, 'secondary', title),
             setTertiaryTitle: (title)=>setTitle(item.id, 'tertiary', title)

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

@@ -14,12 +14,21 @@ export type CompactaProps = {
      */
     initialCompactas?: {
         id?: string;
+        open?: boolean;
         title?: {
             primary?: string;
             secondary?: string;
             tertiary?: string;
         };
     }[];
+    /**
+     * Callback when a compacta is added
+     */
+    onAdd?: () => void;
+    /**
+     * Callback when a compacta is removed, provides the id and index of the removed compacta
+     */
+    onRemove?: (id: string, index: number) => void;
     /**
      * Tag for primary title
      * @default h3
@@ -28,6 +37,7 @@ export type CompactaProps = {
 } & Omit<HTMLAttributes<Element>, 'children'>;
 type ContentProps = {
     id: string;
+    index: number;
     setPrimaryTitle: (title: string) => unknown;
     setSecondaryTitle: (title: string) => unknown;
     setTertiaryTitle: (title: string) => unknown;

package/dist/components/popover/components/panel/panel.component.js

@@ -5,17 +5,18 @@ import { Button } from '../../../button/index.js';
 import { CloseIcon } from '../../../icon/index.js';
 import { usePanel } from './panel.hook.js';
 import { styles as panelStyles } from './panel.styles.js';
-export function BasePanel({ state, heading, headingTag: Tag = 'h1', content, placement = 'bottom', id, triggerRef, portal }) {
+export function BasePanel({ state, heading, headingTag: Tag = 'h1', content, placement = 'top', id, triggerRef, portal }) {
     const popoverRef = useRef(null);
     const arrowRef = useRef(null);
-    const { popoverPosition, arrowPosition } = usePanel({
+    const { popoverPosition, arrowPosition, localPlacement } = usePanel({
         state,
         placement,
         triggerRef,
-        portal
+        portal,
+        popoverRef
     });
     const styles = panelStyles({
-        placement
+        placement: localPlacement
     });
     return React.createElement(FocusScope, {
         autoFocus: true,

package/dist/components/popover/components/panel/panel.hook.d.ts

@@ -13,7 +13,7 @@ export type PanelHookProps = {
  * @returns {Object} return.popoverPosition - The calculated position styles for the popover.
  * @returns {Object} return.arrowPosition - The calculated position styles for the popover arrow.
  */
-export declare function usePanel({ state, placement, triggerRef, portal }: PanelHookProps): {
+export declare function usePanel({ state, placement, triggerRef, portal, popoverRef }: PanelHookProps): {
     popoverPosition: {
         bottom: string;
         left: number;
@@ -38,4 +38,5 @@ export declare function usePanel({ state, placement, triggerRef, portal }: Panel
     arrowPosition: {
         left: string;
     };
+    localPlacement: "bottom" | "top" | undefined;
 };

package/dist/components/popover/components/panel/panel.hook.js

@@ -1,5 +1,6 @@
-import { useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useLayoutEffect, useMemo, useState } from 'react';
 const PANEL_WIDTH_SIZE = 300;
+const ARROW_HEIGHT = 7;
 const getHorizontalPositionPopover = (element, screenWidth)=>{
     const triggerDOMRect = element.getBoundingClientRect();
     const offsetLeftToCenter = (PANEL_WIDTH_SIZE - ((triggerDOMRect === null || triggerDOMRect === void 0 ? void 0 : triggerDOMRect.width) || 0)) / 2 * -1;
@@ -21,21 +22,72 @@ const getLeftOffsetPerHorizontalPosition = (element, screenWidth)=>{
             return (PANEL_WIDTH_SIZE - ((triggerDOMRect === null || triggerDOMRect === void 0 ? void 0 : triggerDOMRect.width) || 0)) / 2 * -1;
         case 'right':
             if (triggerDOMRect.left + rightOffset <= 0) {
+                if (triggerDOMRect.left + rightOffset - PANEL_WIDTH_SIZE <= -screenWidth) {
+                    return rightOffset - (triggerDOMRect.left + rightOffset) + (screenWidth - PANEL_WIDTH_SIZE) / 2;
+                }
                 return rightOffset - (triggerDOMRect.left + rightOffset) + 16;
             }
             return rightOffset;
         default:
+            if ((triggerDOMRect === null || triggerDOMRect === void 0 ? void 0 : triggerDOMRect.left) + PANEL_WIDTH_SIZE >= screenWidth) {
+                return -((triggerDOMRect === null || triggerDOMRect === void 0 ? void 0 : triggerDOMRect.left) || 0) + (screenWidth - PANEL_WIDTH_SIZE) / 2;
+            }
             return 0;
     }
 };
-export function usePanel({ state, placement = 'bottom', triggerRef, portal }) {
+export function usePanel({ state, placement = 'top', triggerRef, portal, popoverRef }) {
+    if (!triggerRef.current) {
+        throw new Error('You must pass valid refs.');
+    }
     const [screenWidth, setScreenWidth] = useState(document.documentElement.clientWidth);
+    const [localPlacement, setLocalPlacement] = useState(placement);
+    const [originalPosition, setOriginalPosition] = useState(null);
+    const trigger = triggerRef.current.getBoundingClientRect();
+    const getVerticalPosition = useCallback(()=>{
+        if (portal instanceof Element) {
+            const portalRect = portal.getBoundingClientRect();
+            if (originalPosition && (originalPosition === null || originalPosition === void 0 ? void 0 : originalPosition.top) < portalRect.top) {
+                setLocalPlacement('bottom');
+            }
+            if (originalPosition && (originalPosition === null || originalPosition === void 0 ? void 0 : originalPosition.bottom) > portalRect.bottom) {
+                setLocalPlacement('top');
+            }
+            return;
+        }
+        if (originalPosition && (originalPosition === null || originalPosition === void 0 ? void 0 : originalPosition.height) > trigger.top) {
+            setLocalPlacement('bottom');
+        }
+        if (originalPosition && (originalPosition === null || originalPosition === void 0 ? void 0 : originalPosition.bottom) > document.documentElement.clientHeight) {
+            setLocalPlacement('top');
+        }
+        if (originalPosition && (originalPosition === null || originalPosition === void 0 ? void 0 : originalPosition.bottom) <= document.documentElement.clientHeight && placement === 'bottom') {
+            setLocalPlacement('bottom');
+        }
+    }, [
+        placement,
+        portal,
+        originalPosition,
+        trigger.top
+    ]);
+    useLayoutEffect(()=>{
+        var _popoverRef_current;
+        setOriginalPosition((popoverRef === null || popoverRef === void 0 ? void 0 : (_popoverRef_current = popoverRef.current) === null || _popoverRef_current === void 0 ? void 0 : _popoverRef_current.getBoundingClientRect()) || null);
+    }, [
+        popoverRef
+    ]);
+    useLayoutEffect(()=>{
+        getVerticalPosition();
+    }, [
+        getVerticalPosition
+    ]);
     useEffect(()=>{
         const handleResize = ()=>{
             if (portal instanceof Element) {
                 setScreenWidth(portal.clientWidth);
+                getVerticalPosition();
             } else {
                 setScreenWidth(document.documentElement.clientWidth);
+                getVerticalPosition();
             }
         };
         window.addEventListener('resize', handleResize);
@@ -43,14 +95,15 @@ export function usePanel({ state, placement = 'bottom', triggerRef, portal }) {
             window.removeEventListener('resize', handleResize);
         };
     }, [
-        portal
+        portal,
+        getVerticalPosition
     ]);
     const popoverPosition = useMemo(()=>{
         var _triggerRef_current;
         const triggerDOMRect = (_triggerRef_current = triggerRef.current) === null || _triggerRef_current === void 0 ? void 0 : _triggerRef_current.getBoundingClientRect();
         const leftOffset = triggerRef.current ? getLeftOffsetPerHorizontalPosition(triggerRef.current, screenWidth) : 0;
         if (!portal) {
-            switch(placement){
+            switch(localPlacement){
                 case 'top':
                     return {
                         bottom: '100%',
@@ -65,7 +118,7 @@ export function usePanel({ state, placement = 'bottom', triggerRef, portal }) {
             }
         }
         const portalElement = portal;
-        switch(placement){
+        switch(localPlacement){
             case 'top':
                 return {
                     top: `${((triggerDOMRect === null || triggerDOMRect === void 0 ? void 0 : triggerDOMRect.top) || 0) - portalElement.getBoundingClientRect().top}px`,
@@ -80,7 +133,7 @@ export function usePanel({ state, placement = 'bottom', triggerRef, portal }) {
                 };
         }
     }, [
-        placement,
+        localPlacement,
         portal,
         triggerRef,
         state.isOpen,
@@ -91,15 +144,17 @@ export function usePanel({ state, placement = 'bottom', triggerRef, portal }) {
         const triggerDOMRect = (_triggerRef_current = triggerRef.current) === null || _triggerRef_current === void 0 ? void 0 : _triggerRef_current.getBoundingClientRect();
         const leftOffset = triggerRef.current ? getLeftOffsetPerHorizontalPosition(triggerRef.current, screenWidth) * -1 : 0;
         return {
-            left: `${((triggerDOMRect === null || triggerDOMRect === void 0 ? void 0 : triggerDOMRect.width) || 0) / 2 + leftOffset}px`
+            left: `${leftOffset - ARROW_HEIGHT + ((triggerDOMRect === null || triggerDOMRect === void 0 ? void 0 : triggerDOMRect.width) || 0) / 2}px`
         };
     }, [
         triggerRef,
         state.isOpen,
-        screenWidth
+        screenWidth,
+        originalPosition
     ]);
     return {
         popoverPosition,
-        arrowPosition
+        arrowPosition,
+        localPlacement
     };
 }

package/dist/components/popover/components/panel/panel.styles.js

@@ -16,11 +16,11 @@ export const styles = tv({
         placement: {
             top: {
                 popover: '-mt-2 mb-2',
-                arrow: 'top-full translate-x-[-6px] translate-y-0'
+                arrow: 'top-full translate-x-[-2.5px]'
             },
             bottom: {
                 popover: 'mt-2',
-                arrow: 'bottom-full translate-x-[6px] rotate-180 after:bottom-[1px]'
+                arrow: 'bottom-full translate-x-[14px] rotate-180'
             }
         }
     }

package/dist/css/westpac-ui.css

@@ -4266,20 +4266,16 @@ body {
   --tw-translate-x: 50%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
-.translate-x-\[-6px\] {
-  --tw-translate-x: -6px;
+.translate-x-\[-2\.5px\] {
+  --tw-translate-x: -2.5px;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 .translate-x-\[0\.125rem\] {
   --tw-translate-x: 0.125rem;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
-.translate-x-\[6px\] {
-  --tw-translate-x: 6px;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-.translate-y-0 {
-  --tw-translate-y: 0rem;
+.translate-x-\[14px\] {
+  --tw-translate-x: 14px;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 .-rotate-45 {
@@ -5990,6 +5986,9 @@ body {
 .pb-\[2\.75rem\] {
   padding-bottom: 2.75rem;
 }
+.pb-\[200px\] {
+  padding-bottom: 200px;
+}
 .pb-\[5vh\] {
   padding-bottom: 5vh;
 }
@@ -7972,10 +7971,6 @@ body {
   content: var(--tw-content);
   bottom: 1.5rem;
 }
-.after\:bottom-\[1px\]::after {
-  content: var(--tw-content);
-  bottom: 1px;
-}
 .after\:left-0::after {
   content: var(--tw-content);
   left: 0rem;
@@ -9368,20 +9363,16 @@ body {
     --tw-translate-x: 50%;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   }
-  .xsl\:translate-x-\[-6px\] {
-    --tw-translate-x: -6px;
+  .xsl\:translate-x-\[-2\.5px\] {
+    --tw-translate-x: -2.5px;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   }
   .xsl\:translate-x-\[0\.125rem\] {
     --tw-translate-x: 0.125rem;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   }
-  .xsl\:translate-x-\[6px\] {
-    --tw-translate-x: 6px;
-    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-  }
-  .xsl\:translate-y-0 {
-    --tw-translate-y: 0rem;
+  .xsl\:translate-x-\[14px\] {
+    --tw-translate-x: 14px;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   }
   .xsl\:-rotate-45 {
@@ -10215,10 +10206,6 @@ body {
     top: 1.25rem;
     bottom: 1.25rem;
   }
-  .xsl\:after\:bottom-\[1px\]::after {
-    content: var(--tw-content);
-    bottom: 1px;
-  }
   .xsl\:after\:left-1::after {
     content: var(--tw-content);
     left: 0.375rem;
@@ -11132,20 +11119,16 @@ body {
     --tw-translate-x: 50%;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   }
-  .sm\:translate-x-\[-6px\] {
-    --tw-translate-x: -6px;
+  .sm\:translate-x-\[-2\.5px\] {
+    --tw-translate-x: -2.5px;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   }
   .sm\:translate-x-\[0\.125rem\] {
     --tw-translate-x: 0.125rem;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   }
-  .sm\:translate-x-\[6px\] {
-    --tw-translate-x: 6px;
-    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-  }
-  .sm\:translate-y-0 {
-    --tw-translate-y: 0rem;
+  .sm\:translate-x-\[14px\] {
+    --tw-translate-x: 14px;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   }
   .sm\:-rotate-45 {
@@ -12002,10 +11985,6 @@ body {
     top: 1.25rem;
     bottom: 1.25rem;
   }
-  .sm\:after\:bottom-\[1px\]::after {
-    content: var(--tw-content);
-    bottom: 1px;
-  }
   .sm\:after\:left-1::after {
     content: var(--tw-content);
     left: 0.375rem;
@@ -12981,20 +12960,16 @@ body {
     --tw-translate-x: 50%;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   }
-  .md\:translate-x-\[-6px\] {
-    --tw-translate-x: -6px;
+  .md\:translate-x-\[-2\.5px\] {
+    --tw-translate-x: -2.5px;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   }
   .md\:translate-x-\[0\.125rem\] {
     --tw-translate-x: 0.125rem;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   }
-  .md\:translate-x-\[6px\] {
-    --tw-translate-x: 6px;
-    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-  }
-  .md\:translate-y-0 {
-    --tw-translate-y: 0rem;
+  .md\:translate-x-\[14px\] {
+    --tw-translate-x: 14px;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   }
   .md\:-rotate-45 {
@@ -13859,10 +13834,6 @@ body {
     top: 1.25rem;
     bottom: 1.25rem;
   }
-  .md\:after\:bottom-\[1px\]::after {
-    content: var(--tw-content);
-    bottom: 1px;
-  }
   .md\:after\:left-1::after {
     content: var(--tw-content);
     left: 0.375rem;
@@ -14829,20 +14800,16 @@ body {
     --tw-translate-x: 50%;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   }
-  .lg\:translate-x-\[-6px\] {
-    --tw-translate-x: -6px;
+  .lg\:translate-x-\[-2\.5px\] {
+    --tw-translate-x: -2.5px;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   }
   .lg\:translate-x-\[0\.125rem\] {
     --tw-translate-x: 0.125rem;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   }
-  .lg\:translate-x-\[6px\] {
-    --tw-translate-x: 6px;
-    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-  }
-  .lg\:translate-y-0 {
-    --tw-translate-y: 0rem;
+  .lg\:translate-x-\[14px\] {
+    --tw-translate-x: 14px;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   }
   .lg\:-rotate-45 {
@@ -15688,10 +15655,6 @@ body {
     top: 1.25rem;
     bottom: 1.25rem;
   }
-  .lg\:after\:bottom-\[1px\]::after {
-    content: var(--tw-content);
-    bottom: 1px;
-  }
   .lg\:after\:left-1::after {
     content: var(--tw-content);
     left: 0.375rem;
@@ -16604,20 +16567,16 @@ body {
     --tw-translate-x: 50%;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   }
-  .xl\:translate-x-\[-6px\] {
-    --tw-translate-x: -6px;
+  .xl\:translate-x-\[-2\.5px\] {
+    --tw-translate-x: -2.5px;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   }
   .xl\:translate-x-\[0\.125rem\] {
     --tw-translate-x: 0.125rem;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   }
-  .xl\:translate-x-\[6px\] {
-    --tw-translate-x: 6px;
-    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-  }
-  .xl\:translate-y-0 {
-    --tw-translate-y: 0rem;
+  .xl\:translate-x-\[14px\] {
+    --tw-translate-x: 14px;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   }
   .xl\:-rotate-45 {
@@ -17445,10 +17404,6 @@ body {
     top: 1.25rem;
     bottom: 1.25rem;
   }
-  .xl\:after\:bottom-\[1px\]::after {
-    content: var(--tw-content);
-    bottom: 1px;
-  }
   .xl\:after\:left-1::after {
     content: var(--tw-content);
     left: 0.375rem;