Merge branch 'develop' into feat/SW-185-implement-footer-navigation

components/TempDesignSystem/Button/button.ts

@@ -1,9 +1,20 @@
 import { buttonVariants } from "./variants"
 
 import type { VariantProps } from "class-variance-authority"
+import type { ButtonProps as ReactAriaButtonProps } from "react-aria-components"
 
-export interface ButtonProps
+export interface ButtonPropsRAC
+  extends Omit<ReactAriaButtonProps, "isDisabled">,
+    VariantProps<typeof buttonVariants> {
+  asChild?: false | undefined | never
+  disabled?: ReactAriaButtonProps["isDisabled"]
+  onClick?: ReactAriaButtonProps["onPress"]
+}
+
+export interface ButtonPropsSlot
   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
     VariantProps<typeof buttonVariants> {
-  asChild?: boolean
+  asChild: true
 }
+
+export type ButtonProps = ButtonPropsSlot | ButtonPropsRAC

components/TempDesignSystem/Button/index.tsx

@@ -1,23 +1,16 @@
 "use client"
 
 import { Slot } from "@radix-ui/react-slot"
+import { Button as ButtonRAC } from "react-aria-components"
 
 import { buttonVariants } from "./variants"
 
 import type { ButtonProps } from "./button"
 
-export default function Button({
-  asChild = false,
-  theme,
-  className,
-  disabled,
-  intent,
-  size,
-  variant,
-  wrapping,
-  ...props
-}: ButtonProps) {
-  const Comp = asChild ? Slot : "button"
+export default function Button(props: ButtonProps) {
+  const { className, intent, size, theme, wrapping, variant, ...restProps } =
+    props
+
   const classNames = buttonVariants({
     className,
     intent,
@@ -26,5 +19,19 @@ export default function Button({
     wrapping,
     variant,
   })
-  return <Comp className={classNames} disabled={disabled} {...props} />
+
+  if (restProps.asChild) {
+    const { asChild, ...slotProps } = restProps
+    return <Slot className={classNames} {...slotProps} />
+  }
+
+  const { asChild, onClick, disabled, ...racProps } = restProps
+  return (
+    <ButtonRAC
+      className={classNames}
+      isDisabled={disabled}
+      onPress={onClick}
+      {...racProps}
+    />
+  )
 }

components/TempDesignSystem/LoyaltyCard/loyaltyCard.ts

@@ -2,7 +2,7 @@ import { loyaltyCardVariants } from "./variants"
 
 import type { VariantProps } from "class-variance-authority"
 
-import { ImageVaultAsset } from "@/types/components/imageVaultImage"
+import { ImageVaultAsset } from "@/types/components/imageVault"
 
 export interface LoyaltyCardProps
   extends React.HTMLAttributes<HTMLDivElement>,

components/TempDesignSystem/Toasts/index.tsx

@@ -16,7 +16,7 @@ import { toastVariants } from "./variants"
 import styles from "./toasts.module.css"
 
 export function ToastHandler() {
-  return <Toaster />
+  return <Toaster position="bottom-right" />
 }
 
 function getIcon(variant: ToastsProps["variant"]) {

components/TempDesignSystem/Toasts/toasts.module.css

@@ -31,8 +31,9 @@
 
 .iconContainer {
   display: flex;
-  background-color: var(--icon-background-color);
-  padding: var(--Spacing-x2);
   align-items: center;
   justify-content: center;
+  background-color: var(--icon-background-color);
+  padding: var(--Spacing-x2);
+  height: 100%;
 }