@salesforce/webapp-template-app-react-template-b2e-experimental 1.62.0 → 1.63.0

package/dist/.a4drules/webapp.md

@@ -75,8 +75,6 @@ Agents consistently miss these. **You must not leave them default.**
 - **Motion:** Use high-impact motion (e.g. staggered reveals).
 - **Depth:** Add atmosphere/depth in backgrounds.
 
-Follow **webapplications-design-system** expert knowledge for full guidance.
-
 # Development Cycle
 
 - Execute tasks continuously until all planned items complete in the current iteration.

package/dist/CHANGELOG.md

@@ -3,6 +3,33 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.63.0](https://github.com/salesforce-experience-platform-emu/webapps/compare/v1.62.2...v1.63.0) (2026-03-03)
+
+
+### Features
+
+* move shadcn UI into base-react-app ([#188](https://github.com/salesforce-experience-platform-emu/webapps/issues/188)) ([366443f](https://github.com/salesforce-experience-platform-emu/webapps/commit/366443f626c5232ca56c6a5dc6da874bfb955f22))
+
+
+
+
+
+## [1.62.2](https://github.com/salesforce-experience-platform-emu/webapps/compare/v1.62.1...v1.62.2) (2026-03-02)
+
+**Note:** Version bump only for package @salesforce/webapp-template-base-sfdx-project-experimental
+
+
+
+
+
+## [1.62.1](https://github.com/salesforce-experience-platform-emu/webapps/compare/v1.62.0...v1.62.1) (2026-03-02)
+
+**Note:** Version bump only for package @salesforce/webapp-template-base-sfdx-project-experimental
+
+
+
+
+
 # [1.62.0](https://github.com/salesforce-experience-platform-emu/webapps/compare/v1.61.4...v1.62.0) (2026-03-02)
 
 **Note:** Version bump only for package @salesforce/webapp-template-base-sfdx-project-experimental

package/dist/force-app/main/default/webapplications/appreacttemplateb2e/package-lock.json

@@ -8,9 +8,9 @@
       "name": "base-react-app",
       "version": "1.59.0",
       "dependencies": {
-        "@salesforce/agentforce-conversation-client": "^1.61.4",
-        "@salesforce/sdk-data": "^1.11.2",
-        "@salesforce/webapp-experimental": "*",
+        "@salesforce/agentforce-conversation-client": "^1.63.0",
+        "@salesforce/sdk-data": "^1.63.0",
+        "@salesforce/webapp-experimental": "^1.63.0",
         "@tailwindcss/vite": "^4.1.17",
         "@tanstack/react-form": "^1.28.3",
         "class-variance-authority": "^0.7.1",
@@ -21,7 +21,7 @@
         "react-dom": "^19.2.0",
         "react-router": "^7.10.1",
         "shadcn": "^3.8.5",
-        "tailwind-merge": "^3.5.0",
+        "tailwind-merge": "^3.4.0",
         "tailwindcss": "^4.1.17",
         "tw-animate-css": "^1.4.0",
         "zod": "^4.3.6"
@@ -34,7 +34,7 @@
         "@graphql-eslint/eslint-plugin": "^4.1.0",
         "@graphql-tools/utils": "^11.0.0",
         "@playwright/test": "^1.49.0",
-        "@salesforce/vite-plugin-webapp-experimental": "*",
+        "@salesforce/vite-plugin-webapp-experimental": "^1.63.0",
         "@testing-library/jest-dom": "^6.6.3",
         "@testing-library/react": "^16.1.0",
         "@testing-library/user-event": "^14.5.2",
@@ -6027,9 +6027,9 @@
       ]
     },
     "node_modules/@salesforce/agentforce-conversation-client": {
-      "version": "1.61.4",
-      "resolved": "https://registry.npmjs.org/@salesforce/agentforce-conversation-client/-/agentforce-conversation-client-1.61.4.tgz",
-      "integrity": "sha512-ZdEP+4aHG/sKMPXzwQmwIcIYgGckGHs/+WvIXdycrwg33oi3T5ye5VFapD+7zsa6yhonDfhcDQSboRYjY6kKBA==",
+      "version": "1.63.0",
+      "resolved": "https://registry.npmjs.org/@salesforce/agentforce-conversation-client/-/agentforce-conversation-client-1.63.0.tgz",
+      "integrity": "sha512-+gBE2icjaFnd8Y0TUNNavSlcPu2D7wh+UEwMKMgQwDZ3cuh0givmo+tZA2grdNE3v7p8cJTkoGMu8aZMoRRdqQ==",
       "license": "SEE LICENSE IN LICENSE.txt",
       "dependencies": {
         "@lightning-out/application": "2.1.1-rc.2"
@@ -6090,19 +6090,19 @@
       }
     },
     "node_modules/@salesforce/sdk-core": {
-      "version": "1.61.4",
-      "resolved": "https://registry.npmjs.org/@salesforce/sdk-core/-/sdk-core-1.61.4.tgz",
-      "integrity": "sha512-bP3IyVitF00jZlxJjlC/pazMvpkJWsUc4kmDOIVC/0wYvv4MZ3fHcEtwlASKrJi3MCBkhuEoHE2jdPCuPgDt1A==",
+      "version": "1.63.0",
+      "resolved": "https://registry.npmjs.org/@salesforce/sdk-core/-/sdk-core-1.63.0.tgz",
+      "integrity": "sha512-Xsy+yyEv9JC9TcWEvlrZ8oxVCT8zISAvEI3WSwWY0syylmHSQ4N+VrNpenT6L9FTMBUElJs8OAV4wz9Wt0O5EA==",
       "license": "SEE LICENSE IN LICENSE.txt"
     },
     "node_modules/@salesforce/sdk-data": {
-      "version": "1.61.4",
-      "resolved": "https://registry.npmjs.org/@salesforce/sdk-data/-/sdk-data-1.61.4.tgz",
-      "integrity": "sha512-wE07yl9Y+x0340OwWFxxxblLqSB9znxWytjkgU3R99Lu6omsbrd8d9dutbK4KddFpawqiUcJsBSEcmQ3MieTvA==",
+      "version": "1.63.0",
+      "resolved": "https://registry.npmjs.org/@salesforce/sdk-data/-/sdk-data-1.63.0.tgz",
+      "integrity": "sha512-0jLD37AerPJ5Pp0X/jylpQZSo65qsK2D3fyAjo96eKhuo2P35V3CVRQyw/FeP1a+Ug9tWbj9DeNDkufVYisJiA==",
       "license": "SEE LICENSE IN LICENSE.txt",
       "dependencies": {
         "@conduit-client/salesforce-lightning-service-worker": "^3.7.0",
-        "@salesforce/sdk-core": "^1.61.4"
+        "@salesforce/sdk-core": "^1.63.0"
       }
     },
     "node_modules/@salesforce/ts-types": {
@@ -6115,15 +6115,15 @@
       }
     },
     "node_modules/@salesforce/vite-plugin-webapp-experimental": {
-      "version": "1.61.4",
-      "resolved": "https://registry.npmjs.org/@salesforce/vite-plugin-webapp-experimental/-/vite-plugin-webapp-experimental-1.61.4.tgz",
-      "integrity": "sha512-jEaNobrr673c/83yNLMqFw9jThMS9jtx4HUiTCUzWUnkSU611sDlABqyxuQMY+Un5qkR1wLBwvPbtSvkzpBuNQ==",
+      "version": "1.63.0",
+      "resolved": "https://registry.npmjs.org/@salesforce/vite-plugin-webapp-experimental/-/vite-plugin-webapp-experimental-1.63.0.tgz",
+      "integrity": "sha512-93TLZiGMChzMCoHBBP5digBjyh/YJjeyBLPuXTw0iuB3KEhQOnaAeonpRZnow5gtWGJwyARcDLgTPDyP1AA8Vw==",
       "dev": true,
       "license": "SEE LICENSE IN LICENSE.txt",
       "dependencies": {
         "@babel/core": "^7.28.4",
         "@babel/helper-plugin-utils": "^7.28.3",
-        "@salesforce/webapp-experimental": "^1.61.4"
+        "@salesforce/webapp-experimental": "^1.63.0"
       },
       "engines": {
         "node": ">=20.0.0"
@@ -6133,13 +6133,13 @@
       }
     },
     "node_modules/@salesforce/webapp-experimental": {
-      "version": "1.61.4",
-      "resolved": "https://registry.npmjs.org/@salesforce/webapp-experimental/-/webapp-experimental-1.61.4.tgz",
-      "integrity": "sha512-yd5jHjImF/HhBsGC6670zQbX2PP3MVXzIVNbHeqOlSGsU8L4caOPk7AwiugTFhsApfEPAjtTFcdXT0ijol7eUg==",
+      "version": "1.63.0",
+      "resolved": "https://registry.npmjs.org/@salesforce/webapp-experimental/-/webapp-experimental-1.63.0.tgz",
+      "integrity": "sha512-fJn3uprbLs9nC7aq5Yvg7rAdnu7epUzBw/n9KS9hQ40OCYs8b765uCLGCxZzzAJV5b8YVbdTz1x9dWpyV1ceRQ==",
       "license": "SEE LICENSE IN LICENSE.txt",
       "dependencies": {
         "@salesforce/core": "^8.23.4",
-        "@salesforce/sdk-data": "^1.61.4",
+        "@salesforce/sdk-data": "^1.63.0",
         "axios": "^1.7.7",
         "micromatch": "^4.0.8",
         "path-to-regexp": "^8.3.0"
@@ -14731,9 +14731,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.5.6",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
-      "integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==",
+      "version": "8.5.8",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.8.tgz",
+      "integrity": "sha512-OW/rX8O/jXnm82Ey1k44pObPtdblfiuWnrd8X7GJ7emImCOstunGbXUpp7HdBrFQX6rJzn3sPT397Wp5aCwCHg==",
       "funding": [
         {
           "type": "opencollective",

package/dist/force-app/main/default/webapplications/appreacttemplateb2e/package.json

@@ -15,9 +15,9 @@
     "graphql:schema": "node scripts/get-graphql-schema.mjs"
   },
   "dependencies": {
-    "@salesforce/agentforce-conversation-client": "^1.61.4",
-    "@salesforce/sdk-data": "^1.11.2",
-    "@salesforce/webapp-experimental": "*",
+    "@salesforce/agentforce-conversation-client": "^1.63.0",
+    "@salesforce/sdk-data": "^1.63.0",
+    "@salesforce/webapp-experimental": "^1.63.0",
     "@tailwindcss/vite": "^4.1.17",
     "@tanstack/react-form": "^1.28.3",
     "class-variance-authority": "^0.7.1",
@@ -28,7 +28,7 @@
     "react-dom": "^19.2.0",
     "react-router": "^7.10.1",
     "shadcn": "^3.8.5",
-    "tailwind-merge": "^3.5.0",
+    "tailwind-merge": "^3.4.0",
     "tailwindcss": "^4.1.17",
     "tw-animate-css": "^1.4.0",
     "zod": "^4.3.6"
@@ -41,7 +41,7 @@
     "@graphql-eslint/eslint-plugin": "^4.1.0",
     "@graphql-tools/utils": "^11.0.0",
     "@playwright/test": "^1.49.0",
-    "@salesforce/vite-plugin-webapp-experimental": "*",
+    "@salesforce/vite-plugin-webapp-experimental": "^1.63.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.1.0",
     "@testing-library/user-event": "^14.5.2",

package/dist/force-app/main/default/webapplications/appreacttemplateb2e/src/components/ui/alert.tsx

@@ -1,69 +1,76 @@
-import * as React from "react";
-import { cva, type VariantProps } from "class-variance-authority";
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
 
-import { cn } from "../../lib/utils";
+import { cn } from '../../lib/utils';
 
 const alertVariants = cva(
-	"grid gap-0.5 rounded-lg border px-2.5 py-2 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4 w-full relative group/alert",
-	{
-		variants: {
-			variant: {
-				default: "bg-card text-card-foreground",
-				destructive:
-					"text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current",
-			},
-		},
-		defaultVariants: {
-			variant: "default",
-		},
-	},
+  "grid gap-0.5 rounded-lg border px-2.5 py-2 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4 w-full relative group/alert",
+  {
+    variants: {
+      variant: {
+        default: 'bg-card text-card-foreground',
+        destructive:
+          'text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  }
 );
 
 function Alert({
-	className,
-	variant,
-	...props
-}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
-	return (
-		<div
-			data-slot="alert"
-			role="alert"
-			className={cn(alertVariants({ variant }), className)}
-			{...props}
-		/>
-	);
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<'div'> & VariantProps<typeof alertVariants>) {
+  return (
+    <div
+      data-slot="alert"
+      role="alert"
+      className={cn(alertVariants({ variant }), className)}
+      {...props}
+    />
+  );
 }
 
-function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
-	return (
-		<div
-			data-slot="alert-title"
-			className={cn(
-				"font-medium group-has-[>svg]/alert:col-start-2 [&_a]:hover:text-foreground [&_a]:underline [&_a]:underline-offset-3",
-				className,
-			)}
-			{...props}
-		/>
-	);
+function AlertTitle({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn(
+        'font-medium group-has-[>svg]/alert:col-start-2 [&_a]:hover:text-foreground [&_a]:underline [&_a]:underline-offset-3',
+        className
+      )}
+      {...props}
+    />
+  );
 }
 
-function AlertDescription({ className, ...props }: React.ComponentProps<"div">) {
-	return (
-		<div
-			data-slot="alert-description"
-			className={cn(
-				"text-muted-foreground text-sm text-balance md:text-pretty [&_p:not(:last-child)]:mb-4 [&_a]:hover:text-foreground [&_a]:underline [&_a]:underline-offset-3",
-				className,
-			)}
-			{...props}
-		/>
-	);
+function AlertDescription({
+  className,
+  ...props
+}: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn(
+        'text-muted-foreground text-sm text-balance md:text-pretty [&_p:not(:last-child)]:mb-4 [&_a]:hover:text-foreground [&_a]:underline [&_a]:underline-offset-3',
+        className
+      )}
+      {...props}
+    />
+  );
 }
 
-function AlertAction({ className, ...props }: React.ComponentProps<"div">) {
-	return (
-		<div data-slot="alert-action" className={cn("absolute top-2 right-2", className)} {...props} />
-	);
+function AlertAction({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="alert-action"
+      className={cn('absolute top-2 right-2', className)}
+      {...props}
+    />
+  );
 }
 
 export { Alert, AlertTitle, AlertDescription, AlertAction };

package/dist/force-app/main/default/webapplications/appreacttemplateb2e/src/components/ui/button.tsx

@@ -1,67 +1,67 @@
-import * as React from "react";
-import { cva, type VariantProps } from "class-variance-authority";
-import { Slot } from "radix-ui";
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { Slot } from 'radix-ui';
 
-import { cn } from "../../lib/utils";
+import { cn } from '../../lib/utils';
 
 const buttonVariants = cva(
-	"focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-lg border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 aria-invalid:ring-3 [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none",
-	{
-		variants: {
-			variant: {
-				default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
-				outline:
-					"border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground",
-				secondary:
-					"bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
-				ghost:
-					"hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground",
-				destructive:
-					"bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30",
-				link: "text-primary underline-offset-4 hover:underline",
-			},
-			size: {
-				default:
-					"h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
-				xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
-				sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
-				lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3",
-				icon: "size-8",
-				"icon-xs":
-					"size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
-				"icon-sm":
-					"size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
-				"icon-lg": "size-9",
-			},
-		},
-		defaultVariants: {
-			variant: "default",
-			size: "default",
-		},
-	},
+  "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-lg border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 aria-invalid:ring-3 [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none",
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground [a]:hover:bg-primary/80',
+        outline:
+          'border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground',
+        secondary:
+          'bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground',
+        ghost:
+          'hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground',
+        destructive:
+          'bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+      size: {
+        default:
+          'h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',
+        xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+        lg: 'h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3',
+        icon: 'size-8',
+        'icon-xs':
+          "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
+        'icon-sm':
+          'size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg',
+        'icon-lg': 'size-9',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  }
 );
 
 function Button({
-	className,
-	variant = "default",
-	size = "default",
-	asChild = false,
-	...props
-}: React.ComponentProps<"button"> &
-	VariantProps<typeof buttonVariants> & {
-		asChild?: boolean;
-	}) {
-	const Comp = asChild ? Slot.Root : "button";
+  className,
+  variant = 'default',
+  size = 'default',
+  asChild = false,
+  ...props
+}: React.ComponentProps<'button'> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+  }) {
+  const Comp = asChild ? Slot.Root : 'button';
 
-	return (
-		<Comp
-			data-slot="button"
-			data-variant={variant}
-			data-size={size}
-			className={cn(buttonVariants({ variant, size, className }))}
-			{...(props as any)}
-		/>
-	);
+  return (
+    <Comp
+      data-slot="button"
+      data-variant={variant}
+      data-size={size}
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...(props as any)}
+    />
+  );
 }
 
 export { Button, buttonVariants };

package/dist/force-app/main/default/webapplications/appreacttemplateb2e/src/components/ui/card.tsx

@@ -1,92 +1,103 @@
-import * as React from "react";
+import * as React from 'react';
 
-import { cn } from "../../lib/utils";
+import { cn } from '../../lib/utils';
 
 function Card({
-	className,
-	size = "default",
-	...props
-}: React.ComponentProps<"div"> & { size?: "default" | "sm" }) {
-	return (
-		<div
-			data-slot="card"
-			data-size={size}
-			className={cn(
-				"ring-foreground/10 bg-card text-card-foreground gap-4 overflow-hidden rounded-xl py-4 text-sm ring-1 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl group/card flex flex-col",
-				className,
-			)}
-			{...props}
-		/>
-	);
+  className,
+  size = 'default',
+  ...props
+}: React.ComponentProps<'div'> & { size?: 'default' | 'sm' }) {
+  return (
+    <div
+      data-slot="card"
+      data-size={size}
+      className={cn(
+        'ring-foreground/10 bg-card text-card-foreground gap-4 overflow-hidden rounded-xl py-4 text-sm ring-1 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl group/card flex flex-col',
+        className
+      )}
+      {...props}
+    />
+  );
 }
 
-function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
-	return (
-		<div
-			data-slot="card-header"
-			className={cn(
-				"gap-1 rounded-t-xl px-4 group-data-[size=sm]/card:px-3 [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3 group/card-header @container/card-header grid auto-rows-min items-start has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto]",
-				className,
-			)}
-			{...props}
-		/>
-	);
+function CardHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        'gap-1 rounded-t-xl px-4 group-data-[size=sm]/card:px-3 [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3 group/card-header @container/card-header grid auto-rows-min items-start has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto]',
+        className
+      )}
+      {...props}
+    />
+  );
 }
 
-function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
-	return (
-		<div
-			data-slot="card-title"
-			className={cn(
-				"text-base leading-snug font-medium group-data-[size=sm]/card:text-sm",
-				className,
-			)}
-			{...props}
-		/>
-	);
+function CardTitle({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn(
+        'text-base leading-snug font-medium group-data-[size=sm]/card:text-sm',
+        className
+      )}
+      {...props}
+    />
+  );
 }
 
-function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
-	return (
-		<div
-			data-slot="card-description"
-			className={cn("text-muted-foreground text-sm", className)}
-			{...props}
-		/>
-	);
+function CardDescription({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn('text-muted-foreground text-sm', className)}
+      {...props}
+    />
+  );
 }
 
-function CardAction({ className, ...props }: React.ComponentProps<"div">) {
-	return (
-		<div
-			data-slot="card-action"
-			className={cn("col-start-2 row-span-2 row-start-1 self-start justify-self-end", className)}
-			{...props}
-		/>
-	);
+function CardAction({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        'col-start-2 row-span-2 row-start-1 self-start justify-self-end',
+        className
+      )}
+      {...props}
+    />
+  );
 }
 
-function CardContent({ className, ...props }: React.ComponentProps<"div">) {
-	return (
-		<div
-			data-slot="card-content"
-			className={cn("px-4 group-data-[size=sm]/card:px-3", className)}
-			{...props}
-		/>
-	);
+function CardContent({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn('px-4 group-data-[size=sm]/card:px-3', className)}
+      {...props}
+    />
+  );
 }
 
-function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
-	return (
-		<div
-			data-slot="card-footer"
-			className={cn(
-				"bg-muted/50 rounded-b-xl border-t p-4 group-data-[size=sm]/card:p-3 flex items-center",
-				className,
-			)}
-			{...props}
-		/>
-	);
+function CardFooter({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn(
+        'bg-muted/50 rounded-b-xl border-t p-4 group-data-[size=sm]/card:p-3 flex items-center',
+        className
+      )}
+      {...props}
+    />
+  );
 }
 
-export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent };
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+};