feat: list credit card according to design

components/TempDesignSystem/Button/button.module.css

@@ -13,11 +13,16 @@
   /* TODO: Waiting for variables for buttons from Design team */
   font-family: var(--typography-Body-Bold-fontFamily);
   font-size: var(--typography-Body-Bold-fontSize);
-  font-weight: var(--typography-Body-Bold-fontWeight);
+  font-weight: 500;
   line-height: 24px;
   letter-spacing: 0.6%;
 }
 
+.wrapping {
+  padding-left: 0 !important;
+  padding-right: 0 !important;
+}
+
 /* INTENT */
 .primary,
 a.primary {
@@ -69,7 +74,7 @@ a.default {
 }
 
 .medium {
-  gap: var(--Spacing-x-quarter);
+  gap: var(--Spacing-x-half);
   height: 48px;
   padding: var(--Spacing-x-one-and-half) var(--Spacing-x2);
 }

components/TempDesignSystem/Button/index.tsx

@@ -14,6 +14,7 @@ export default function Button({
   intent,
   size,
   variant,
+  wrapping,
   ...props
 }: ButtonProps) {
   const Comp = asChild ? Slot : "button"
@@ -22,6 +23,7 @@ export default function Button({
     intent,
     size,
     theme,
+    wrapping,
     variant,
   })
   return <Comp className={classNames} disabled={disabled} {...props} />

components/TempDesignSystem/Button/variants.ts

@@ -30,6 +30,9 @@ export const buttonVariants = cva(styles.btn, {
       default: styles.default,
       icon: styles.icon,
     },
+    wrapping: {
+      true: styles.wrapping,
+    },
   },
   defaultVariants: {
     intent: "primary",