npm - @westpac/ui - Versions diffs - 0.12.0 → 0.14.0 - Mend

@westpac/ui 0.12.0 → 0.14.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1356) hide show

package/dist/components/flexi-cell/components/flexi-cell-adornment/flexi-cell-adornment.styles.d.ts CHANGED Viewed

@@ -1,15 +1,31 @@
 export declare const styles: import("tailwind-variants").TVReturnType<{
     align: {
-        center: string;
-        top: string;
-        bottom: string;
+        center: {
+            base: string;
+        };
+        top: {
+            base: string;
+        };
+        bottom: {
+            base: string;
+        };
     };
-}, undefined, "flex flex-col items-end gap-1", {
+}, {
+    base: string;
+}, undefined, {
     responsiveVariants: string[];
 }, {
     align: {
-        center: string;
-        top: string;
-        bottom: string;
+        center: {
+            base: string;
+        };
+        top: {
+            base: string;
+        };
+        bottom: {
+            base: string;
+        };
     };
-}, undefined>;
+}, {
+    base: string;
+}>;

package/dist/components/flexi-cell/components/flexi-cell-adornment/flexi-cell-adornment.styles.js CHANGED Viewed

@@ -1,11 +1,19 @@
 import { tv } from 'tailwind-variants';
 export const styles = tv({
-    base: 'flex flex-col items-end gap-1',
+    slots: {
+        base: 'flex flex-none flex-col items-end gap-1'
+    },
     variants: {
         align: {
-            center: 'justify-center',
-            top: 'justify-start',
-            bottom: 'justify-end'
+            center: {
+                base: 'justify-center'
+            },
+            top: {
+                base: 'justify-start'
+            },
+            bottom: {
+                base: 'justify-end'
+            }
         }
     }
 }, {

package/dist/components/flexi-cell/components/flexi-cell-adornment/flexi-cell-adornment.types.d.ts CHANGED Viewed

@@ -7,7 +7,7 @@ export type FlexiCellAdornmentProps = {
     /**
      * Children attribute
      */
-    children: ReactNode;
+    children?: ReactNode;
     /**
      * Component's tag
      */

package/dist/components/flexi-cell/components/flexi-cell-body/flexi-cell-body.component.d.ts CHANGED Viewed

@@ -1,6 +1,3 @@
 import { type FlexiCellBodyProps } from './flexi-cell-body.types.js';
 /** Flexi Cell Body: Flexi Cell Body */
-export declare const FlexiCellBody: {
-    ({ children, tag: Tag, className, ...props }: FlexiCellBodyProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+export declare const FlexiCellBody: ({ children, tag: Tag, href, className, ...props }: FlexiCellBodyProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/flexi-cell/components/flexi-cell-body/flexi-cell-body.component.js CHANGED Viewed

@@ -13,12 +13,16 @@ function _extends() {
     return _extends.apply(this, arguments);
 }
 import React from 'react';
+import { mergeProps, useFocusRing } from 'react-aria';
 import { styles } from './flexi-cell-body.styles.js';
-export const FlexiCellBody = ({ children , tag: Tag = 'div' , className , ...props })=>{
-    return React.createElement(Tag, _extends({}, props, {
+export const FlexiCellBody = ({ children , tag: Tag = 'div' , href , className , ...props })=>{
+    const { isFocusVisible , focusProps  } = useFocusRing();
+    return React.createElement(Tag, _extends({}, mergeProps(props, focusProps), {
+        href: href,
         className: styles({
+            isLink: !!href,
+            isFocusVisible,
             className
         })
     }), children);
 };
-FlexiCellBody.displayName = 'FlexiCell.Body';

package/dist/components/flexi-cell/components/flexi-cell-body/flexi-cell-body.styles.d.ts CHANGED Viewed

@@ -1,3 +1,27 @@
-export declare const styles: import("tailwind-variants").TVReturnType<{}, undefined, "flex flex-1 flex-col gap-1", {
+export declare const styles: import("tailwind-variants").TVReturnType<{
+    isLink: {
+        true: string;
+    };
+    isFocusVisible: {
+        true: string;
+    };
+    multipleChildren: {
+        true: {
+            base: string;
+        };
+    };
+}, undefined, "flex flex-1 flex-col gap-1 overflow-hidden", {
     responsiveVariants: string[];
-}, {}, undefined>;
+}, {
+    isLink: {
+        true: string;
+    };
+    isFocusVisible: {
+        true: string;
+    };
+    multipleChildren: {
+        true: {
+            base: string;
+        };
+    };
+}, undefined>;

package/dist/components/flexi-cell/components/flexi-cell-body/flexi-cell-body.styles.js CHANGED Viewed

@@ -1,7 +1,19 @@
 import { tv } from 'tailwind-variants';
 export const styles = tv({
-    base: 'flex flex-1 flex-col gap-1',
-    variants: {}
+    base: 'flex flex-1 flex-col gap-1 overflow-hidden',
+    variants: {
+        isLink: {
+            true: 'group/dualaction'
+        },
+        isFocusVisible: {
+            true: 'focus-outline'
+        },
+        multipleChildren: {
+            true: {
+                base: ''
+            }
+        }
+    }
 }, {
     responsiveVariants: [
         'xsl',

package/dist/components/flexi-cell/components/flexi-cell-button/flexi-cell-button.component.d.ts CHANGED Viewed

@@ -1,6 +1,3 @@
 import { type FlexiCellButtonProps } from './flexi-cell-button.types.js';
 /** Flexi Cell Button: Flexi Cell Button */
-export declare const FlexiCellButton: {
-    ({ className, ...props }: FlexiCellButtonProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+export declare const FlexiCellButton: ({ className, icon: Icon, ...props }: FlexiCellButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/flexi-cell/components/flexi-cell-button/flexi-cell-button.component.js CHANGED Viewed

@@ -14,13 +14,14 @@ function _extends() {
 }
 import React from 'react';
 import { Button } from '../../../../components/index.js';
-import { styles } from './flexi-cell-button.styles.js';
-export const FlexiCellButton = ({ className , ...props })=>{
-    return React.createElement(Button, _extends({
-        className: styles({
+import { styles as flexiButtonStyles } from './flexi-cell-button.styles.js';
+export const FlexiCellButton = ({ className , icon: Icon , ...props })=>{
+    const styles = flexiButtonStyles();
+    return React.createElement(React.Fragment, null, Icon && React.createElement(Button, _extends({
+        className: styles.base({
             className
         }),
+        iconBefore: Icon,
         look: "link"
-    }, props));
+    }, props)));
 };
-FlexiCellButton.displayName = 'FlexiCell.Button';

package/dist/components/flexi-cell/components/flexi-cell-button/flexi-cell-button.styles.d.ts CHANGED Viewed

@@ -1,3 +1,7 @@
-export declare const styles: import("tailwind-variants").TVReturnType<{}, undefined, "text-muted hover:text-link", {
+export declare const styles: import("tailwind-variants").TVReturnType<{}, {
+    base: string;
+}, undefined, {
     responsiveVariants: string[];
-}, {}, undefined>;
+}, {}, {
+    base: string;
+}>;

package/dist/components/flexi-cell/components/flexi-cell-button/flexi-cell-button.styles.js CHANGED Viewed

@@ -1,6 +1,8 @@
 import { tv } from 'tailwind-variants';
 export const styles = tv({
-    base: 'text-muted hover:text-link',
+    slots: {
+        base: 'text-muted'
+    },
     variants: {}
 }, {
     responsiveVariants: [

package/dist/components/flexi-cell/components/flexi-cell-button/flexi-cell-button.types.d.ts CHANGED Viewed

@@ -1,2 +1,9 @@
+/// <reference types="react" resolution-mode="require"/>
+import { IconProps } from '../../../../components/icon/icon.types.js';
 import { type ButtonProps } from '../../../../components/index.js';
-export type FlexiCellButtonProps = ButtonProps;
+export type FlexiCellButtonProps = {
+    /**
+     * Icon to render
+     */
+    icon?: (props: IconProps) => JSX.Element;
+} & Omit<ButtonProps, 'iconBefore' | 'iconAfter'>;

package/dist/components/flexi-cell/components/flexi-cell-circle/flexi-cell-circle.component.d.ts CHANGED Viewed

@@ -1,6 +1,3 @@
 import { FlexiCellCircleProps } from './flexi-cell-circle.types.js';
 /** Flexi Cell Circle: Flexi Cell Circle */
-export declare const FlexiCellCircle: {
-    ({ className, ...props }: FlexiCellCircleProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+export declare const FlexiCellCircle: ({ className, ...props }: FlexiCellCircleProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/flexi-cell/components/flexi-cell-circle/flexi-cell-circle.component.js CHANGED Viewed

@@ -14,12 +14,12 @@ function _extends() {
 }
 import React from 'react';
 import { Circle } from '../../../../components/index.js';
-import { styles } from './flexi-cell-circle.styles.js';
+import { styles as flexiCellCircleStyles } from './flexi-cell-circle.styles.js';
 export const FlexiCellCircle = ({ className , ...props })=>{
+    const styles = flexiCellCircleStyles({});
     return React.createElement(Circle, _extends({
-        className: styles({
+        className: styles.base({
             className
         })
     }, props));
 };
-FlexiCellCircle.displayName = 'FlexiCell.Circle';

package/dist/components/flexi-cell/components/flexi-cell-circle/flexi-cell-circle.styles.d.ts CHANGED Viewed

@@ -1,3 +1,7 @@
-export declare const styles: import("tailwind-variants").TVReturnType<{}, undefined, "h-5 w-5 text-muted hover:text-link xsl:h-6 xsl:w-6", {
+export declare const styles: import("tailwind-variants").TVReturnType<{}, {
+    base: string;
+}, undefined, {
     responsiveVariants: string[];
-}, {}, undefined>;
+}, {}, {
+    base: string;
+}>;

package/dist/components/flexi-cell/components/flexi-cell-circle/flexi-cell-circle.styles.js CHANGED Viewed

@@ -1,6 +1,8 @@
 import { tv } from 'tailwind-variants';
 export const styles = tv({
-    base: 'h-5 w-5 text-muted hover:text-link xsl:h-6 xsl:w-6',
+    slots: {
+        base: 'pointer-events-none h-4 w-4 text-[12px] font-bold text-muted'
+    },
     variants: {}
 }, {
     responsiveVariants: [

package/dist/components/flexi-cell/components/flexi-cell-circle/flexi-cell-circle.types.d.ts CHANGED Viewed

@@ -1,2 +1,7 @@
 import { type CircleProps } from '../../../../components/index.js';
-export type FlexiCellCircleProps = CircleProps;
+export type FlexiCellCircleProps = {
+    /**
+     * Styling for circle being used to show logo for certain promo tiles
+     */
+    promoCircle?: boolean;
+} & CircleProps;

package/dist/components/flexi-cell/components/flexi-cell-footer/flexi-cell-footer.component.d.ts CHANGED Viewed

@@ -1,6 +1,3 @@
 import { type FlexiCellFooterProps } from './flexi-cell-footer.types.js';
 /** Flexi Cell Footer: Flexi Cell Footer */
-export declare const FlexiCellFooter: {
-    ({ children, className, tag: Tag, ...props }: FlexiCellFooterProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+export declare const FlexiCellFooter: ({ children, className, tag: Tag, ...props }: FlexiCellFooterProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/flexi-cell/components/flexi-cell-footer/flexi-cell-footer.component.js CHANGED Viewed

@@ -21,4 +21,3 @@ export const FlexiCellFooter = ({ children , className , tag: Tag = 'div' , ...p
         })
     }), children);
 };
-FlexiCellFooter.displayName = 'FlexiCell.Footer';

package/dist/components/flexi-cell/components/flexi-cell-footer/flexi-cell-footer.styles.d.ts CHANGED Viewed

@@ -1,3 +1,3 @@
-export declare const styles: import("tailwind-variants").TVReturnType<{}, undefined, "flex-grow-0 pt-2", {
+export declare const styles: import("tailwind-variants").TVReturnType<{}, undefined, "mt-2 flex gap-2", {
     responsiveVariants: string[];
 }, {}, undefined>;

package/dist/components/flexi-cell/components/flexi-cell-footer/flexi-cell-footer.styles.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { tv } from 'tailwind-variants';
 export const styles = tv({
-    base: 'flex-grow-0 pt-2',
+    base: 'mt-2 flex gap-2',
     variants: {}
 }, {
     responsiveVariants: [

package/dist/components/flexi-cell/components/flexi-cell-hint/flexi-cell-hint.component.d.ts CHANGED Viewed

@@ -1,6 +1,3 @@
 import { FlexiCellHintProps } from './flexi-cell-hint.types.js';
 /** Flexi Cell Hint: Flexi Cell Hint */
-export declare const FlexiCellHint: {
-    ({ children, tag: Tag, className, truncateText, ...props }: FlexiCellHintProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+export declare const FlexiCellHint: ({ children, tag: Tag, className, truncateText, ...props }: FlexiCellHintProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/flexi-cell/components/flexi-cell-hint/flexi-cell-hint.component.js CHANGED Viewed

@@ -22,4 +22,3 @@ export const FlexiCellHint = ({ children , tag: Tag = 'p' , className , truncate
         })
     }), children);
 };
-FlexiCellHint.displayName = 'FlexiCell.Hint';

package/dist/components/flexi-cell/components/flexi-cell-hint/flexi-cell-hint.styles.d.ts CHANGED Viewed

@@ -1,13 +1,11 @@
 export declare const styles: import("tailwind-variants").TVReturnType<{
     truncateText: {
         true: string;
-        false: string;
     };
-}, undefined, "typography-body-10 m-0 font-normal text-muted xsl:typography-body-9", {
+}, undefined, "typography-body-10 m-0 font-normal text-muted", {
     responsiveVariants: string[];
 }, {
     truncateText: {
         true: string;
-        false: string;
     };
 }, undefined>;

package/dist/components/flexi-cell/components/flexi-cell-hint/flexi-cell-hint.styles.js CHANGED Viewed

@@ -1,10 +1,9 @@
 import { tv } from 'tailwind-variants';
 export const styles = tv({
-    base: 'typography-body-10 m-0 font-normal text-muted xsl:typography-body-9',
+    base: 'typography-body-10 m-0 font-normal text-muted',
     variants: {
         truncateText: {
-            true: 'truncate',
-            false: ''
+            true: 'truncate whitespace-nowrap'
         }
     }
 }, {

package/dist/components/flexi-cell/components/flexi-cell-label/flexi-cell-label.component.d.ts CHANGED Viewed

@@ -1,6 +1,3 @@
 import { FlexiCellLabelProps } from './flexi-cell-label.types.js';
 /** Flexi Cell Label: Flexi Cell Label */
-export declare const FlexiCellLabel: {
-    ({ children, tag: Tag, truncateText, className, ...props }: FlexiCellLabelProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+export declare const FlexiCellLabel: ({ children, tag: Tag, truncateText, rightLabel, className, ...props }: FlexiCellLabelProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/flexi-cell/components/flexi-cell-label/flexi-cell-label.component.js CHANGED Viewed

@@ -14,12 +14,12 @@ function _extends() {
 }
 import React from 'react';
 import { styles } from './flexi-cell-label.styles.js';
-export const FlexiCellLabel = ({ children , tag: Tag = 'div' , truncateText =false , className , ...props })=>{
+export const FlexiCellLabel = ({ children , tag: Tag = 'div' , truncateText =false , rightLabel =false , className , ...props })=>{
     return React.createElement(Tag, _extends({
         className: styles({
             className,
-            truncateText
+            truncateText,
+            rightLabel
         })
     }, props), children);
 };
-FlexiCellLabel.displayName = 'FlexiCell.Label';

package/dist/components/flexi-cell/components/flexi-cell-label/flexi-cell-label.styles.d.ts CHANGED Viewed

@@ -1,13 +1,19 @@
 export declare const styles: import("tailwind-variants").TVReturnType<{
     truncateText: {
         true: string;
+    };
+    rightLabel: {
+        true: string;
         false: string;
     };
-}, undefined, "typography-body-9 m-0 font-normal text-text transition-colors xsl:typography-body-8 group-hover:text-link", {
+}, undefined, "typography-body-9 mb-0 content-start font-medium text-text transition-colors", {
     responsiveVariants: string[];
 }, {
     truncateText: {
         true: string;
+    };
+    rightLabel: {
+        true: string;
         false: string;
     };
 }, undefined>;

package/dist/components/flexi-cell/components/flexi-cell-label/flexi-cell-label.styles.js CHANGED Viewed

@@ -1,10 +1,13 @@
 import { tv } from 'tailwind-variants';
 export const styles = tv({
-    base: 'typography-body-9 m-0 font-normal text-text transition-colors xsl:typography-body-8 group-hover:text-link',
+    base: 'typography-body-9 mb-0 content-start font-medium text-text transition-colors',
     variants: {
         truncateText: {
-            true: 'truncate',
-            false: ''
+            true: 'truncate whitespace-nowrap'
+        },
+        rightLabel: {
+            true: 'font-normal',
+            false: 'group-hover/dualaction:text-primary group-hover/noborder:text-primary'
         }
     }
 }, {

package/dist/components/flexi-cell/components/flexi-cell-label/flexi-cell-label.types.d.ts CHANGED Viewed

@@ -1,13 +1,14 @@
-import { CSSProperties, type HTMLAttributes, type ReactNode } from 'react';
+import { type HTMLAttributes, type ReactNode } from 'react';
 export type FlexiCellLabelProps = {
     /**
      * Children attribute
      */
     children: ReactNode;
     /**
-     * Label's font weight
+     * Styles to match a label that gets rendered on the right of the flexicell i.e. Amount/Balance/Label
+     * - Can be used for a label that doesn't have hover effect in dualAction
      */
-    fontWeight?: CSSProperties['fontWeight'];
+    rightLabel?: boolean;
     /**
      * Component tag
      */

package/dist/components/flexi-cell/flexi-cell.component.d.ts CHANGED Viewed

@@ -1,12 +1,3 @@
 import React from 'react';
-import { FlexiCellAdornment, FlexiCellBody, FlexiCellButton, FlexiCellCircle, FlexiCellFooter, FlexiCellHint, FlexiCellLabel } from './components/index.js';
 import { type FlexiCellProps } from './flexi-cell.types.js';
-export declare const FlexiCell: React.ForwardRefExoticComponent<FlexiCellProps & React.RefAttributes<unknown>> & {
-    Adornment: typeof FlexiCellAdornment;
-    Body: typeof FlexiCellBody;
-    Button: typeof FlexiCellButton;
-    Circle: typeof FlexiCellCircle;
-    Footer: typeof FlexiCellFooter;
-    Hint: typeof FlexiCellHint;
-    Label: typeof FlexiCellLabel;
-};
+export declare const FlexiCell: React.ForwardRefExoticComponent<FlexiCellProps & React.RefAttributes<unknown>>;

package/dist/components/flexi-cell/flexi-cell.component.js CHANGED Viewed

@@ -16,15 +16,17 @@ function _extends() {
 import React, { forwardRef } from 'react';
 import { mergeProps, useFocusRing } from 'react-aria';
 import { ArrowRightIcon } from '../icon/index.js';
-import { FlexiCellAdornment, FlexiCellBody, FlexiCellButton, FlexiCellCircle, FlexiCellFooter, FlexiCellHint, FlexiCellLabel } from './components/index.js';
+import { FlexiCellAdornment, FlexiCellBody } from './components/index.js';
 import { styles as flexiCellStyles } from './flexi-cell.styles.js';
-function FlexiCellBase({ className , tag: Tag = 'div' , children , badge , badgeZIndex , before , body , after , withArrow , withBorder =false , href , withHoverEffect =false , ...props }, ref) {
+function FlexiCellBase({ className , tag: Tag = 'div' , children , before , after , withArrow , withBorder =false , href , dualAction =false , topBadge: TopBadge , size ='default' , disabled , tabIndex , ...props }, ref) {
     const { isFocusVisible , focusProps  } = useFocusRing();
     const styles = flexiCellStyles({
         className,
         withBorder,
-        isLink: !!href || withHoverEffect,
-        isFocusVisible
+        isLink: !!href,
+        isFocusVisible,
+        shouldHoverEffect: !withBorder && !dualAction,
+        size
     });
     return React.createElement(Tag, _extends({}, {
         ref
@@ -33,14 +35,17 @@ function FlexiCellBase({ className , tag: Tag = 'div' , children , badge , badge
             className
         }),
         href: href
-    }, mergeProps(props, focusProps)), badge && React.createElement("div", {
-        className: styles.badge(),
-        style: {
-            zIndex: badgeZIndex
-        }
-    }, badge), before, React.createElement("div", {
-        className: styles.bodyWrapper()
-    }, body ? React.createElement(FlexiCellBody, null, children) : children), after, withArrow && React.createElement(FlexiCellAdornment, {
+    }, mergeProps(props, focusProps), {
+        tabIndex: disabled ? -1 : tabIndex
+    }), TopBadge && React.createElement("div", {
+        className: styles.topBadgeWrapper()
+    }, React.createElement(TopBadge, {
+        className: styles.topBadge(),
+        color: "hero"
+    })), before, dualAction && href ? React.createElement(FlexiCellBody, {
+        tag: "a",
+        href: href
+    }, children) : React.createElement(FlexiCellBody, null, children), after, withArrow && React.createElement(FlexiCellAdornment, {
         align: "top"
     }, React.createElement(ArrowRightIcon, {
         color: "link",
@@ -48,11 +53,4 @@ function FlexiCellBase({ className , tag: Tag = 'div' , children , badge , badge
     })));
 }
 export const FlexiCell = forwardRef(FlexiCellBase);
-FlexiCell.Body = FlexiCellBody;
-FlexiCell.Footer = FlexiCellFooter;
-FlexiCell.Adornment = FlexiCellAdornment;
-FlexiCell.Hint = FlexiCellHint;
-FlexiCell.Label = FlexiCellLabel;
-FlexiCell.Button = FlexiCellButton;
-FlexiCell.Circle = FlexiCellCircle;
 FlexiCell.displayName = 'FlexiCell';

package/dist/components/flexi-cell/flexi-cell.styles.d.ts CHANGED Viewed

@@ -3,23 +3,39 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
         true: {
             base: string;
         };
-        false: {};
+        false: {
+            base: string;
+        };
     };
     isLink: {
         true: {
             base: string;
         };
-        false: {};
+        false: string;
     };
     isFocusVisible: {
         true: {
             base: string;
         };
+        false: {};
+    };
+    shouldHoverEffect: {
+        true: {
+            base: string;
+        };
+    };
+    size: {
+        default: {
+            base: string;
+        };
+        large: {
+            base: string;
+        };
     };
 }, {
     base: string;
-    bodyWrapper: string;
-    badge: string;
+    topBadgeWrapper: string;
+    topBadge: string;
 }, undefined, {
     responsiveVariants: string[];
 }, {
@@ -27,21 +43,37 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
         true: {
             base: string;
         };
-        false: {};
+        false: {
+            base: string;
+        };
     };
     isLink: {
         true: {
             base: string;
         };
-        false: {};
+        false: string;
     };
     isFocusVisible: {
         true: {
             base: string;
         };
+        false: {};
+    };
+    shouldHoverEffect: {
+        true: {
+            base: string;
+        };
+    };
+    size: {
+        default: {
+            base: string;
+        };
+        large: {
+            base: string;
+        };
     };
 }, {
     base: string;
-    bodyWrapper: string;
-    badge: string;
+    topBadgeWrapper: string;
+    topBadge: string;
 }>;

package/dist/components/flexi-cell/flexi-cell.styles.js CHANGED Viewed

@@ -1,26 +1,42 @@
 import { tv } from 'tailwind-variants';
 export const styles = tv({
     slots: {
-        base: 'relative flex gap-2 bg-white p-2 transition-colors xsl:p-3',
-        bodyWrapper: 'flex flex-1 flex-col',
-        badge: 'absolute right-0 top-0'
+        base: 'relative flex bg-white transition-colors',
+        topBadgeWrapper: 'absolute right-[-1px] top-[-1px]',
+        topBadge: 'rounded-br-none rounded-tl-none'
     },
     variants: {
         withBorder: {
             true: {
                 base: 'rounded border border-borderDark'
             },
-            false: {}
+            false: {
+                base: '!px-0'
+            }
         },
         isLink: {
             true: {
                 base: 'hover:border-hero'
             },
-            false: {}
+            false: ''
         },
         isFocusVisible: {
             true: {
                 base: 'focus-outline'
+            },
+            false: {}
+        },
+        shouldHoverEffect: {
+            true: {
+                base: 'group/noborder'
+            }
+        },
+        size: {
+            default: {
+                base: 'mb-2 gap-2 p-2'
+            },
+            large: {
+                base: 'mb-3 gap-3 p-3'
             }
         }
     }