[sparkle] - refacto: deprecate citation (#9342)

* [sparkle/src/components] - refactor: update Citation component structure and remove CitationNew

 - Refactored Citation component to be more modular, introducing subcomponents for better readability and maintenance
 - Removed the now redundant CitationNew component and related stories in favor of the updated Citation structure
 - Streamlined and condensed citation components into a more cohesive and manageable set of subcomponents
 - Simplified the usage of Citation components in stories by using the new subcomponent architecture
 - Updated class names and ordering for better consistency and to follow naming conventions

[src/stories] - refactor: update stories to reflect changes in Citation components

 - Adapted Citation stories to utilize the new subcomponents introduced in the Citation refactor
 - Removed CitationNew stories as the component has been deprecated and merged with Citation

[src/components/Sheet.tsx] - fix: adjust shadow-tale-white order for sheet header style

 - Modified the ordering of class names to adhere to styling conventions and ensure visual consistency

[src/components] - cleanup: remove deprecated export of CitationNew component

 - Removed the export statement for the now-nonexistent CitationNew component after its deprecation and merge into Citation

* [sparkle] - refactor: remove ZoomableImageCitationWrapper component

 - Deleted the ZoomableImageCitationWrapper to simplify the image citation features
 - Removed the component export from the main index to clean up unused code references

* [sparkle] - refactor: streamline ConversationMessage citations

 - Replace individual Citation components with a more flexible structure including CitationIcons and CitationTitle
 - Remove usage of ZoomableImageCitationWrapper in favor of a unified Citation component structure

* [sparkle] - refactor: update citation components structure in PaginatedCitationsGrid

 - Remove the display name assignment for CitationImage component
 - Restructure Citation items to use composition rather than props in PaginatedCitationsGrid
 - Replace CitationType with icon JSX element for flexibility in citation rendering
 - Update storybook for PaginatedCitationsGrid with the new component design and DocumentIcon usage

* [sparkle] - refactor: update CardButton component padding and alignment

 - Change padding specificity from general to horizontal for small, medium, and large sizes
 - Adjust the button alignment to center justify within its container

* [sparkle] - feature: add compact size option to ConversationMessage component

 - Introduced a 'compact' size property to reduce the visual space taken by agent messages in conversations

* [sparkle] - feature: bump package version to 0.2.341

 - Update `package-lock.json` and `package.json` to reflect the new package version
 - Ensure dependencies are aligned with the upgraded version

* [sparkle] - refactor: update responsive grid and container styles in ConversationMessageContent

 - Removed fixed grid column classes and added responsive grid classes to support various screen sizes
 - Included new container utility class to enhance structure in conversation message layouts

* [sparkle] - fix: adjust responsive grid columns for ConversationMessageContent

 - Change the grid column setup at 'xs' breakpoint to start with 2 columns instead of 1

sparkle/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dust-tt/sparkle",
-  "version": "0.2.340",
+  "version": "0.2.341",
   "scripts": {
     "build": "rm -rf dist && npm run tailwind && npm run build:esm && npm run build:cjs",
     "tailwind": "tailwindcss -i ./src/styles/tailwind.css -o dist/sparkle.css",

sparkle/src/components/CardButton.tsx

@@ -27,13 +27,13 @@ const CARD_BUTTON_SIZES = ["sm", "md", "lg"] as const;
 type CardButtonSizeType = (typeof CARD_BUTTON_SIZES)[number];
 
 const sizeVariants: Record<CardButtonSizeType, string> = {
-  sm: "s-p-3 s-rounded-xl",
-  md: "s-p-4 s-rounded-2xl",
-  lg: "s-p-5 s-rounded-3xl",
+  sm: "s-px-3 s-rounded-xl",
+  md: "s-px-4 s-rounded-2xl",
+  lg: "s-px-5 s-rounded-3xl",
 };
 
 const cardButtonVariants = cva(
-  "s-flex s-text-left s-group s-border s-overflow-hidden s-text-foreground",
+  "s-flex s-text-left  s-justify-center s-group s-border s-overflow-hidden s-text-foreground",
   {
     variants: {
       variant: variantClasses,