@westpac/ui 0.30.0 → 0.32.0

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

@@ -19,7 +19,7 @@ import { Pictogram } from '../../pictogram.component.js';
 import { fill } from '../../pictogram.styles.js';
 export function UmbrellaPictogram({ mode ='duo' , viewBoxWidth =78 , viewBoxHeight =78 , 'aria-label': ariaLabel = 'Umbrella' , copyrightYear ='2021' , className , ...props }) {
     return React.createElement(Pictogram, _extends({
-        className: clsx('h-13 w-13', className),
+        className: clsx('size-13', className),
         viewBoxWidth: viewBoxWidth,
         viewBoxHeight: viewBoxHeight,
         "aria-label": ariaLabel,

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

@@ -19,7 +19,7 @@ import { Pictogram } from '../../pictogram.component.js';
 import { fill } from '../../pictogram.styles.js';
 export function UnsecurePictogram({ mode ='duo' , viewBoxWidth =78 , viewBoxHeight =78 , 'aria-label': ariaLabel = 'Unsecure' , copyrightYear ='2021' , className , ...props }) {
     return React.createElement(Pictogram, _extends({
-        className: clsx('h-13 w-13', className),
+        className: clsx('size-13', className),
         viewBoxWidth: viewBoxWidth,
         viewBoxHeight: viewBoxHeight,
         "aria-label": ariaLabel,

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

@@ -19,7 +19,7 @@ import { Pictogram } from '../../pictogram.component.js';
 import { fill } from '../../pictogram.styles.js';
 export function WalletPictogram({ mode ='duo' , viewBoxWidth =78 , viewBoxHeight =78 , 'aria-label': ariaLabel = 'Wallet' , copyrightYear ='2024' , className , ...props }) {
     return React.createElement(Pictogram, _extends({
-        className: clsx('h-13 w-13', className),
+        className: clsx('size-13', className),
         viewBoxWidth: viewBoxWidth,
         viewBoxHeight: viewBoxHeight,
         "aria-label": ariaLabel,

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

@@ -19,7 +19,7 @@ import { Pictogram } from '../../pictogram.component.js';
 import { fill } from '../../pictogram.styles.js';
 export function WearablesPictogram({ mode ='duo' , viewBoxWidth =78 , viewBoxHeight =78 , 'aria-label': ariaLabel = 'Wearables' , copyrightYear ='2021' , className , ...props }) {
     return React.createElement(Pictogram, _extends({
-        className: clsx('h-13 w-13', className),
+        className: clsx('size-13', className),
         viewBoxWidth: viewBoxWidth,
         viewBoxHeight: viewBoxHeight,
         "aria-label": ariaLabel,

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

@@ -1,8 +1,9 @@
 import { type PanelProps } from './panel.types.js';
+export declare function BasePanel({ state, heading, headingTag: Tag, content, placement, id, triggerRef, portal, }: PanelProps): import("react/jsx-runtime").JSX.Element;
 /**
  * @private
  */
-export declare function Panel({ state, heading, headingTag: Tag, content, placement, id, triggerRef }: PanelProps): import("react/jsx-runtime").JSX.Element;
+export declare function Panel({ portal, ...props }: PanelProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace Panel {
     var displayName: string;
 }

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

@@ -1,60 +1,50 @@
-import React, { useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';
+function _extends() {
+    _extends = Object.assign || function(target) {
+        for(var i = 1; i < arguments.length; i++){
+            var source = arguments[i];
+            for(var key in source){
+                if (Object.prototype.hasOwnProperty.call(source, key)) {
+                    target[key] = source[key];
+                }
+            }
+        }
+        return target;
+    };
+    return _extends.apply(this, arguments);
+}
+import { useRef } from 'react';
 import { FocusScope } from 'react-aria';
+import { createPortal } from 'react-dom';
 import { Button } from '../../../button/index.js';
 import { CloseIcon } from '../../../icon/index.js';
-import { getPopoverPosition } from '../../popover.utils.js';
+import { usePanel } from './panel.hook.js';
 import { styles as panelStyles } from './panel.styles.js';
-export function Panel({ state , heading , headingTag: Tag = 'h1' , content , placement , id , triggerRef  }) {
+export function BasePanel({ state , heading , headingTag: Tag = 'h1' , content , placement ='bottom' , id , triggerRef , portal  }) {
     const popoverRef = useRef(null);
     const arrowRef = useRef(null);
-    const remSize = useMemo(()=>{
-        if (typeof window !== 'undefined') {
-            return parseInt(window.getComputedStyle(document.getElementsByTagName('html')[0]).fontSize);
-        }
-        return 1;
-    }, []);
-    const [position, setPosition] = useState({
-        placement: 'top',
-        offset: 'left',
-        panelPosition: triggerRef.current ? triggerRef.current.offsetWidth / 2 / remSize : 0,
-        arrowPosition: popoverRef.current ? popoverRef.current.getBoundingClientRect().width / 2 / remSize : 0
-    });
-    useLayoutEffect(()=>{
-        setPosition(getPopoverPosition(triggerRef, popoverRef, arrowRef, placement));
-    }, [
+    const { popoverPosition , arrowPosition  } = usePanel({
+        state,
         placement,
-        remSize,
-        state.isOpen,
-        triggerRef
-    ]);
-    const getPopoverClass = useCallback(()=>{
-        return {
-            [position.offset]: position.offset === 'left' ? `${position.panelPosition}rem` : `-${position.panelPosition}rem`,
-            transform: position.offset === 'left' ? 'translateX(-50%)' : 'none'
-        };
-    }, [
-        position
-    ]);
-    const getArrowClass = useCallback(()=>{
-        return {
-            [!position.offset || position.offset === 'left' ? 'left' : 'right']: `${position.arrowPosition}rem`
-        };
-    }, [
-        position
-    ]);
+        triggerRef,
+        portal
+    });
     const styles = panelStyles({
-        placement: position.placement
+        placement
     });
     return React.createElement(FocusScope, {
+        contain: true,
+        autoFocus: true,
         restoreFocus: true
     }, React.createElement("div", {
+        style: popoverPosition,
         className: styles.popover(),
-        style: getPopoverClass(),
+        "test-id": "popover",
         id: id,
         ref: popoverRef
     }, React.createElement("div", {
         className: styles.content()
     }, React.createElement(Tag, {
+        tabIndex: 0,
         className: styles.heading()
     }, heading), React.createElement("div", {
         className: styles.body()
@@ -71,8 +61,20 @@ export function Panel({ state , heading , headingTag: Tag = 'h1' , content , pla
     })), React.createElement("div", {
         "aria-hidden": true,
         className: styles.arrow(),
-        style: getArrowClass(),
+        style: arrowPosition,
+        "test-id": "arrow",
         ref: arrowRef
     })));
 }
+export function Panel({ portal =false , ...props }) {
+    if (portal) {
+        const portalValue = typeof portal === 'boolean' ? document.body : portal;
+        return createPortal(React.createElement(BasePanel, _extends({}, props, {
+            portal: portalValue
+        })), portalValue);
+    }
+    return React.createElement(BasePanel, _extends({
+        portal: portal
+    }, props));
+}
 Panel.displayName = 'Popover.Panel';

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

@@ -0,0 +1,39 @@
+import { PanelProps } from './panel.types.js';
+export type PanelHookProps = {
+    placement: PanelProps['placement'];
+    portal: PanelProps['portal'];
+    state: PanelProps['state'];
+    triggerRef: PanelProps['triggerRef'];
+};
+/**
+ * Custom hook to calculate the position of a popover panel relative to its trigger element.
+ * @returns {Object} An object containing the calculated positions for the popover and its arrow.
+ * @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): {
+    popoverPosition: {
+        bottom: string;
+        left: number;
+        top?: undefined;
+        transform?: undefined;
+    } | {
+        top: string;
+        left: number;
+        bottom?: undefined;
+        transform?: undefined;
+    } | {
+        top: string;
+        left: string;
+        transform: string;
+        bottom?: undefined;
+    } | {
+        top: string;
+        left: string;
+        bottom?: undefined;
+        transform?: undefined;
+    };
+    arrowPosition: {
+        left: string;
+    };
+};

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

@@ -0,0 +1,83 @@
+import { useMemo } from 'react';
+const PANEL_WIDTH_SIZE = 282;
+const getVerticalPositionPopover = (element)=>{
+    const triggerDOMRect = element.getBoundingClientRect();
+    const offsetLeftToCenter = (PANEL_WIDTH_SIZE - ((triggerDOMRect === null || triggerDOMRect === void 0 ? void 0 : triggerDOMRect.width) || 0) / 2) * -1;
+    if (triggerDOMRect.left + offsetLeftToCenter <= 0) {
+        return 'left';
+    }
+    if (triggerDOMRect.left + offsetLeftToCenter >= 0 && triggerDOMRect.right + offsetLeftToCenter * -1 <= window.innerWidth) {
+        return 'center';
+    }
+    if (PANEL_WIDTH_SIZE + ((triggerDOMRect === null || triggerDOMRect === void 0 ? void 0 : triggerDOMRect.left) || 0) >= window.innerWidth) {
+        return 'right';
+    }
+};
+const getLeftOffsetPerVerticalPosition = (element)=>{
+    const triggerDOMRect = element.getBoundingClientRect();
+    switch(getVerticalPositionPopover(element)){
+        case 'center':
+            return (PANEL_WIDTH_SIZE - ((triggerDOMRect === null || triggerDOMRect === void 0 ? void 0 : triggerDOMRect.width) || 0)) / 2 * -1;
+        case 'right':
+            return (PANEL_WIDTH_SIZE + ((triggerDOMRect === null || triggerDOMRect === void 0 ? void 0 : triggerDOMRect.left) || 0) - window.innerWidth + (window.innerWidth - ((triggerDOMRect === null || triggerDOMRect === void 0 ? void 0 : triggerDOMRect.right) || 0))) * -1;
+        default:
+            return 0;
+    }
+};
+export function usePanel({ state , placement ='bottom' , triggerRef , portal  }) {
+    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 ? getLeftOffsetPerVerticalPosition(triggerRef.current) : 0;
+        if (!portal) {
+            switch(placement){
+                case 'top':
+                    return {
+                        bottom: '100%',
+                        left: leftOffset
+                    };
+                case 'bottom':
+                default:
+                    return {
+                        top: '100%',
+                        left: leftOffset
+                    };
+            }
+        }
+        const portalElement = portal;
+        switch(placement){
+            case 'top':
+                return {
+                    top: `${((triggerDOMRect === null || triggerDOMRect === void 0 ? void 0 : triggerDOMRect.top) || 0) - portalElement.getBoundingClientRect().top}px`,
+                    left: `${((triggerDOMRect === null || triggerDOMRect === void 0 ? void 0 : triggerDOMRect.left) || 0) + leftOffset}px`,
+                    transform: 'translateY(-100%)'
+                };
+            case 'bottom':
+            default:
+                return {
+                    top: `${((triggerDOMRect === null || triggerDOMRect === void 0 ? void 0 : triggerDOMRect.bottom) || 0) - portalElement.getBoundingClientRect().top}px`,
+                    left: `${((triggerDOMRect === null || triggerDOMRect === void 0 ? void 0 : triggerDOMRect.left) || 0) + leftOffset}px`
+                };
+        }
+    }, [
+        placement,
+        portal,
+        triggerRef,
+        state.isOpen
+    ]);
+    const arrowPosition = useMemo(()=>{
+        var _triggerRef_current;
+        const triggerDOMRect = (_triggerRef_current = triggerRef.current) === null || _triggerRef_current === void 0 ? void 0 : _triggerRef_current.getBoundingClientRect();
+        const leftOffset = triggerRef.current ? getLeftOffsetPerVerticalPosition(triggerRef.current) * -1 : 0;
+        return {
+            left: `${((triggerDOMRect === null || triggerDOMRect === void 0 ? void 0 : triggerDOMRect.width) || 0) / 2 + leftOffset}px`
+        };
+    }, [
+        triggerRef,
+        state.isOpen
+    ]);
+    return {
+        popoverPosition,
+        arrowPosition
+    };
+}

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

@@ -3,21 +3,24 @@ export const styles = tv({
     slots: {
         base: '',
         popover: 'absolute z-[999] rounded border border-muted bg-white shadow-[0_5px_10px_rgba(0,0,0,0.2)]',
-        arrow: 'absolute h-0 w-0 border-x-8 border-t-[12px] border-x-[transparent] border-t-muted after:absolute after:h-0 after:w-0 after:border-x-[7px] after:border-t-[11px] after:border-x-[transparent] after:border-t-white',
+        arrow: `absolute -z-10 size-0
+        before:absolute before:left-0 before:top-0 before:size-0 before:border-x-[7px] before:border-t-[12px] before:border-x-[transparent] before:border-t-muted after:absolute
+        after:left-0 after:top-0 after:size-0 after:border-x-[7px] after:border-t-[11px] after:border-x-[transparent] after:border-t-white
+      `,
         closeBtn: 'absolute right-1 top-1 m-1 p-0 hover:opacity-80',
-        content: 'w-[17.625rem] py-4 pl-3 pr-5',
+        content: 'w-[17.625rem] bg-white py-4 pl-3 pr-5',
         heading: 'typography-body-9 mb-2 font-bold text-text',
         body: 'typography-body-10 text-text'
     },
     variants: {
         placement: {
             top: {
-                popover: 'bottom-full mb-2.5',
-                arrow: 'top-full after:top-[-12px] after:translate-x-[-7px]'
+                popover: '-mt-2.5 mb-2.5',
+                arrow: 'top-full translate-x-[-6px] translate-y-[-1px]'
             },
             bottom: {
-                popover: 'top-full mt-2.5',
-                arrow: 'bottom-full rotate-180 after:bottom-[1px] after:translate-x-[-7px]'
+                popover: 'mt-2.5',
+                arrow: 'bottom-full translate-x-[6px] rotate-180 after:bottom-[1px]'
             }
         }
     }

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

@@ -17,6 +17,10 @@ export type PanelProps = {
      * Placement of popover. If no placement provided it will default to top unless there is no space then will appear on bottom.
      */
     placement?: 'top' | 'bottom';
+    /**
+     * Uses portal to render popover
+     */
+    portal?: boolean | Element;
     /**
      * Overlay trigger state
      */

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

@@ -3,4 +3,4 @@ import { type PopoverProps } from './popover.types.js';
  * TODO: Revisit this component when react-aria has updated usePopover, see: https://github.com/adobe/react-spectrum/discussions/5341
  * This version does not currently use react-aria as it blocked so functionality that was needed to match GEL 3.0
  */
-export declare function Popover({ children, className, headingTag, content, heading, onClick, placement, look, soft, open, linkStyling, size, icon, }: PopoverProps): import("react/jsx-runtime").JSX.Element;
+export declare function Popover({ children, className, headingTag, content, heading, onClick, placement, look, soft, open, linkStyling, size, icon, portal, }: PopoverProps): import("react/jsx-runtime").JSX.Element;

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

@@ -4,15 +4,15 @@ import { useOverlayTriggerState } from 'react-stately';
 import { Button } from '../button/index.js';
 import { Panel } from './components/panel/panel.component.js';
 import { styles as popoverStyles } from './popover.styles.js';
-export function Popover({ children , className , headingTag , content , heading , onClick =()=>undefined , placement , look , soft =false , open =false , linkStyling =false , size ='medium' , icon  }) {
+export function Popover({ children , className , headingTag , content , heading , onClick =()=>undefined , placement , look , soft =false , open =false , linkStyling =false , size ='medium' , icon , portal =false  }) {
     const state = useOverlayTriggerState({});
     const panelId = useId();
     const styles = popoverStyles({
         linkStyling
     });
     const ref = useRef(null);
-    const handleClick = useCallback(()=>{
-        onClick();
+    const handleClick = useCallback((event)=>{
+        onClick(event);
         state.toggle();
     }, [
         onClick,
@@ -53,6 +53,7 @@ export function Popover({ children , className , headingTag , content , heading
         size: size,
         className: styles.button()
     }, children), state.isOpen && React.createElement(Panel, {
+        portal: portal,
         placement: placement,
         heading: heading ? heading : '',
         headingTag: headingTag,

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

@@ -1,6 +1,7 @@
 import { HTMLAttributes, ReactNode } from 'react';
 import { ButtonProps } from '../button/index.js';
 import { IconProps } from '../icon/icon.types.js';
+import { PanelProps } from './components/panel/panel.types.js';
 export type PopoverProps = {
     /**
      * Button text
@@ -40,4 +41,10 @@ export type PopoverProps = {
      * @default top
      */
     placement?: 'top' | 'bottom';
+    /**
+     * Renders the popover using a portal. You can either pass an HTML element to use as the portal container,
+     * or a boolean value to use the document.body as the portal container.
+     * @default false
+     */
+    portal?: PanelProps['portal'];
 } & HTMLAttributes<Element> & Pick<ButtonProps, 'look' | 'soft' | 'size'>;

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

@@ -9,19 +9,19 @@ export const styles = tv({
     variants: {
         size: {
             xsmall: {
-                base: 'h-2 w-2'
+                base: 'size-2'
             },
             small: {
-                base: 'h-3 w-3'
+                base: 'size-3'
             },
             medium: {
-                base: 'h-4 w-4'
+                base: 'size-4'
             },
             large: {
-                base: 'h-15 w-15'
+                base: 'size-15'
             },
             xlarge: {
-                base: 'h-15 w-15'
+                base: 'size-15'
             }
         },
         color: {

package/dist/components/progress-rope/components/progress-rope-group-step/progress-rope-group-step.styles.js

@@ -2,7 +2,7 @@ import { tv } from 'tailwind-variants';
 export const styles = tv({
     slots: {
         base: '',
-        circle: 'relative z-10 h-[14px] w-[14px] border-2 bg-white transition-colors',
+        circle: 'relative z-10 size-[14px] border-2 bg-white transition-colors',
         circleWrapper: 'typography-body-9 relative flex w-full cursor-pointer items-center gap-2 pb-[1.625rem] pt-1 leading-loose transition-colors ',
         stepsWrapper: 'relative transition-all'
     },

package/dist/components/progress-rope/components/progress-rope-step/progress-rope-step.styles.js

@@ -64,10 +64,10 @@ export const styles = tv({
         },
         size: {
             medium: {
-                circle: 'h-[0.875rem] w-[0.875rem]'
+                circle: 'size-[0.875rem]'
             },
             small: {
-                circle: 'mr-[0.25rem] h-[0.625rem] w-[0.625rem] translate-x-[0.125rem]',
+                circle: 'mr-[0.25rem] size-[0.625rem] translate-x-[0.125rem]',
                 base: 'gap-4'
             }
         },

package/dist/components/radio-group/components/radio-group-radio/radio-group-radio.styles.js

@@ -5,7 +5,7 @@ export const styles = tv({
         textWrapper: 'flex flex-col justify-center',
         labelText: 'typography-body-10 py-[2px] pl-1',
         hintText: 'typography-body-10 pl-1 text-muted',
-        selector: 'flex h-4 w-4 shrink-0 items-center justify-center rounded-full border border-hero'
+        selector: 'flex size-4 shrink-0 items-center justify-center rounded-full border border-hero'
     },
     variants: {
         isDisabled: {
@@ -19,7 +19,7 @@ export const styles = tv({
         },
         isSelected: {
             true: {
-                selector: 'before:block before:h-2 before:w-2 before:rounded-full before:bg-hero'
+                selector: 'before:block before:size-2 before:rounded-full before:bg-hero'
             }
         },
         isFocusVisible: {
@@ -37,11 +37,11 @@ export const styles = tv({
         },
         size: {
             large: {
-                selector: 'h-5 w-5',
+                selector: 'size-5',
                 base: 'mb-2'
             },
             medium: {
-                selector: 'h-4 w-4',
+                selector: 'size-4',
                 base: 'mb-1'
             }
         }

package/dist/components/switch/switch.styles.js

@@ -8,16 +8,16 @@ export const styles = tv({
     variants: {
         size: {
             small: {
-                switchDiv: 'h-[1.75rem] w-8 rounded-[1.75rem] after:h-[1.75rem] after:w-[1.75rem]'
+                switchDiv: 'h-[1.75rem] w-8 rounded-[1.75rem] after:size-[1.75rem]'
             },
             medium: {
-                switchDiv: 'h-[2.125rem] w-10 rounded-[2.125rem] after:h-[2.125rem] after:w-[2.125rem]'
+                switchDiv: 'h-[2.125rem] w-10 rounded-[2.125rem] after:size-[2.125rem]'
             },
             large: {
-                switchDiv: 'h-[2.5rem] w-12 rounded-[2.5rem] after:h-[2.5rem] after:w-[2.5rem]'
+                switchDiv: 'h-[2.5rem] w-12 rounded-[2.5rem] after:size-[2.5rem]'
             },
             xlarge: {
-                switchDiv: 'h-[2.875rem] w-14 rounded-[2.875rem] after:h-[2.875rem] after:w-[2.875rem]'
+                switchDiv: 'h-[2.875rem] w-14 rounded-[2.875rem] after:size-[2.875rem]'
             }
         },
         isFocusVisible: {

package/dist/components/symbol/components/logos/red-avatar-circle-logo.js

@@ -16,7 +16,7 @@ import { clsx } from 'clsx';
 import React from 'react';
 import { Symbol } from '../../symbol.component.js';
 export const RedAvatarCircleLogo = ({ 'aria-label': ariaLabel = 'Red Avatar' , copyrightYear ='2024' , viewBoxWidth =64 , viewBoxHeight =64 , className , ...props })=>React.createElement(Symbol, _extends({
-        className: clsx('h-[64px] w-[64px]', className),
+        className: clsx('size-[64px]', className),
         "aria-label": ariaLabel,
         copyrightYear: copyrightYear,
         viewBoxWidth: viewBoxWidth,

package/dist/components/symbol/components/logos/red-avatar-circle-reversed-logo.js

@@ -16,7 +16,7 @@ import { clsx } from 'clsx';
 import React from 'react';
 import { Symbol } from '../../symbol.component.js';
 export const RedAvatarCircleReversedLogo = ({ 'aria-label': ariaLabel = 'Red Avatar' , copyrightYear ='2024' , viewBoxWidth =64 , viewBoxHeight =64 , className , ...props })=>React.createElement(Symbol, _extends({
-        className: clsx('h-[64px] w-[64px]', className),
+        className: clsx('size-[64px]', className),
         "aria-label": ariaLabel,
         copyrightYear: copyrightYear,
         viewBoxWidth: viewBoxWidth,

package/dist/components/symbol/components/symbols/facebook-symbol.js

@@ -16,7 +16,7 @@ import { clsx } from 'clsx';
 import React from 'react';
 import { Symbol } from '../../symbol.component.js';
 export const FacebookSymbol = ({ 'aria-label': ariaLabel = 'Facebook' , copyrightYear ='' , viewBoxWidth =32 , viewBoxHeight =32 , className , ...props })=>React.createElement(Symbol, _extends({
-        className: clsx('h-[32px] w-[32px]', className),
+        className: clsx('size-[32px]', className),
         "aria-label": ariaLabel,
         copyrightYear: copyrightYear,
         viewBoxWidth: viewBoxWidth,

package/dist/components/symbol/components/symbols/google-plus-symbol.js

@@ -16,7 +16,7 @@ import { clsx } from 'clsx';
 import React from 'react';
 import { Symbol } from '../../symbol.component.js';
 export const GooglePlusSymbol = ({ 'aria-label': ariaLabel = 'Google+' , copyrightYear ='' , viewBoxWidth =32 , viewBoxHeight =32 , className , ...props })=>React.createElement(Symbol, _extends({
-        className: clsx('h-[32px] w-[32px]', className),
+        className: clsx('size-[32px]', className),
         "aria-label": ariaLabel,
         copyrightYear: copyrightYear,
         viewBoxWidth: viewBoxWidth,

package/dist/components/symbol/components/symbols/instagram-symbol.js

@@ -16,7 +16,7 @@ import { clsx } from 'clsx';
 import React from 'react';
 import { Symbol } from '../../symbol.component.js';
 export const InstagramSymbol = ({ 'aria-label': ariaLabel = 'Instagram' , copyrightYear ='' , viewBoxWidth =32 , viewBoxHeight =32 , className , ...props })=>React.createElement(Symbol, _extends({
-        className: clsx('h-[32px] w-[32px]', className),
+        className: clsx('size-[32px]', className),
         "aria-label": ariaLabel,
         copyrightYear: copyrightYear,
         viewBoxWidth: viewBoxWidth,

package/dist/components/symbol/components/symbols/linked-in-symbol.js

@@ -16,7 +16,7 @@ import { clsx } from 'clsx';
 import React from 'react';
 import { Symbol } from '../../symbol.component.js';
 export const LinkedInSymbol = ({ 'aria-label': ariaLabel = 'LinkedIn' , copyrightYear ='' , viewBoxWidth =32 , viewBoxHeight =32 , className , ...props })=>React.createElement(Symbol, _extends({
-        className: clsx('h-[32px] w-[32px]', className),
+        className: clsx('size-[32px]', className),
         "aria-label": ariaLabel,
         copyrightYear: copyrightYear,
         viewBoxWidth: viewBoxWidth,

package/dist/components/symbol/components/symbols/slack-symbol.js

@@ -16,7 +16,7 @@ import { clsx } from 'clsx';
 import React from 'react';
 import { Symbol } from '../../symbol.component.js';
 export const SlackSymbol = ({ 'aria-label': ariaLabel = 'Slack' , copyrightYear ='' , viewBoxWidth =32 , viewBoxHeight =32 , className , ...props })=>React.createElement(Symbol, _extends({
-        className: clsx('h-[32px] w-[32px]', className),
+        className: clsx('size-[32px]', className),
         "aria-label": ariaLabel,
         copyrightYear: copyrightYear,
         viewBoxWidth: viewBoxWidth,

package/dist/components/symbol/components/symbols/twitter-symbol.js

@@ -16,7 +16,7 @@ import { clsx } from 'clsx';
 import React from 'react';
 import { Symbol } from '../../symbol.component.js';
 export const TwitterSymbol = ({ 'aria-label': ariaLabel = 'Twitter' , copyrightYear ='' , viewBoxWidth =32 , viewBoxHeight =32 , className , ...props })=>React.createElement(Symbol, _extends({
-        className: clsx('h-[32px] w-[32px]', className),
+        className: clsx('size-[32px]', className),
         "aria-label": ariaLabel,
         copyrightYear: copyrightYear,
         viewBoxWidth: viewBoxWidth,

package/dist/components/symbol/components/symbols/x-mark-inverse-symbol.d.ts

@@ -0,0 +1,2 @@
+import { type SymbolProps } from '../../symbol.types.js';
+export declare const XMarkInverseSymbol: ({ "aria-label": ariaLabel, copyrightYear, viewBoxWidth, viewBoxHeight, className, ...props }: SymbolProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/symbol/components/symbols/x-mark-inverse-symbol.js

@@ -0,0 +1,27 @@
+function _extends() {
+    _extends = Object.assign || function(target) {
+        for(var i = 1; i < arguments.length; i++){
+            var source = arguments[i];
+            for(var key in source){
+                if (Object.prototype.hasOwnProperty.call(source, key)) {
+                    target[key] = source[key];
+                }
+            }
+        }
+        return target;
+    };
+    return _extends.apply(this, arguments);
+}
+import { clsx } from 'clsx';
+import React from 'react';
+import { Symbol } from '../../symbol.component.js';
+export const XMarkInverseSymbol = ({ 'aria-label': ariaLabel = 'X' , copyrightYear ='' , viewBoxWidth =32 , viewBoxHeight =32 , className , ...props })=>React.createElement(Symbol, _extends({
+        className: clsx('size-[32px]', className),
+        "aria-label": ariaLabel,
+        copyrightYear: copyrightYear,
+        viewBoxWidth: viewBoxWidth,
+        viewBoxHeight: viewBoxHeight
+    }, props), React.createElement("path", {
+        fill: "#fff",
+        d: "M44.635 32.455 72.555 0H65.94L41.696 28.18 22.333 0H0l29.28 42.614L0 76.648h6.617l25.601-29.76 20.449 29.76H75L44.634 32.455h.001ZM35.573 42.99l-2.967-4.243L9.001 4.98h10.162l19.05 27.25 2.967 4.243 24.762 35.42H55.78L35.573 42.99v-.002Z"
+    }));

package/dist/components/symbol/components/symbols/x-mark-symbol.d.ts

@@ -0,0 +1,2 @@
+import { type SymbolProps } from '../../symbol.types.js';
+export declare const XMarkSymbol: ({ "aria-label": ariaLabel, copyrightYear, viewBoxWidth, viewBoxHeight, className, ...props }: SymbolProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/symbol/components/symbols/x-mark-symbol.js

@@ -0,0 +1,27 @@
+function _extends() {
+    _extends = Object.assign || function(target) {
+        for(var i = 1; i < arguments.length; i++){
+            var source = arguments[i];
+            for(var key in source){
+                if (Object.prototype.hasOwnProperty.call(source, key)) {
+                    target[key] = source[key];
+                }
+            }
+        }
+        return target;
+    };
+    return _extends.apply(this, arguments);
+}
+import { clsx } from 'clsx';
+import React from 'react';
+import { Symbol } from '../../symbol.component.js';
+export const XMarkSymbol = ({ 'aria-label': ariaLabel = 'X' , copyrightYear ='' , viewBoxWidth =32 , viewBoxHeight =32 , className , ...props })=>React.createElement(Symbol, _extends({
+        className: clsx('size-[32px]', className),
+        "aria-label": ariaLabel,
+        copyrightYear: copyrightYear,
+        viewBoxWidth: viewBoxWidth,
+        viewBoxHeight: viewBoxHeight
+    }, props), React.createElement("path", {
+        fill: "#000",
+        d: "M44.635 32.455 72.555 0H65.94L41.696 28.18 22.333 0H0l29.28 42.614L0 76.648h6.617l25.601-29.76 20.449 29.76H75L44.634 32.455h.001ZM35.573 42.99l-2.967-4.243L9.001 4.98h10.162l19.05 27.25 2.967 4.243 24.762 35.42H55.78L35.573 42.99v-.002Z"
+    }));