fix: minor component fixes

package.json

@@ -109,7 +109,7 @@
   },
   "peerDependencies": {
     "react": "^18 || ^19",
-    "react-dom": "^18"
+    "react-dom": "^18 || ^19"
   },
   "jest": {
     "setupFilesAfterEnv": [

src/components/AvatarWithName/AvatarWithName.tsx

@@ -5,6 +5,8 @@ export interface AvatarWithNameProps {
   name: string;
   description: string;
   imageSrc: string;
+  imageAlt?: string;
+  imageObjectFit?: 'cover' | 'contain' | 'fill' | 'none' | 'scale-down';
   orientation?: 'vertical' | 'horizontal';
   size?: 'sm' | 'md' | 'lg' | 'xl';
 }
@@ -57,6 +59,8 @@ export const AvatarWithName: React.FC<AvatarWithNameProps> = ({
   name,
   description,
   imageSrc,
+  imageAlt,
+  imageObjectFit = 'cover',
   orientation = 'horizontal',
   size = 'md',
 }: AvatarWithNameProps) => {
@@ -68,7 +72,7 @@ export const AvatarWithName: React.FC<AvatarWithNameProps> = ({
     >
       <Avatar.Root shape="square" size={size}>
         <Avatar.Fallback name={name} />
-        <Avatar.Image src={imageSrc} />
+        <Avatar.Image src={imageSrc} alt={imageAlt} style={{ objectFit: imageObjectFit }} />
       </Avatar.Root>
 
       <Text

src/components/BoemlyTag/BoemlyTag.tsx

@@ -24,7 +24,7 @@ export const BoemlyTag = ({
   if (!isVisible) return <></>;
 
   return (
-    <Tag.Root {...props}>
+    <Tag.Root boxShadow="none" {...props}>
       <Tag.Label>{children}</Tag.Label>
       {isClosable && (
         <Tag.EndElement>

src/components/HeroCard/HeroCard.stories.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { StoryFn, Meta } from '@storybook/react-webpack5';
+
+import { HeroCard } from './HeroCard';
+import { storybookCoverUrl } from '../../test/storybookMedia';
+
+export default {
+  title: 'components/HeroCard',
+  component: HeroCard,
+  argTypes: {
+    'link.onClick': { action: 'Link clicked' },
+  },
+} as Meta<typeof HeroCard>;
+
+const Template: StoryFn<typeof HeroCard> = (args) => <HeroCard {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  title: 'Welcome to the Forest',
+  subTitle: 'Discover the beauty of nature and help us plant more trees for a sustainable future.',
+  image: <img src={storybookCoverUrl} alt="Forest cover" style={{ objectFit: 'cover' }} />,
+};
+
+export const WithLink = Template.bind({});
+WithLink.args = {
+  title: 'Welcome to the Forest',
+  subTitle: 'Discover the beauty of nature and help us plant more trees for a sustainable future.',
+  link: {
+    text: 'Learn More',
+    onClick: () => {},
+  },
+  image: <img src={storybookCoverUrl} alt="Forest cover" style={{ objectFit: 'cover' }} />,
+};
+
+export const WithoutImage = Template.bind({});
+WithoutImage.args = {
+  title: 'Welcome to the Forest',
+  subTitle: 'Discover the beauty of nature and help us plant more trees for a sustainable future.',
+  link: {
+    text: 'Get Started',
+    onClick: () => {},
+  },
+};
+WithoutImage.globals = {
+  backgrounds: { value: 'dark' },
+};

src/components/HeroCard/HeroCard.tsx

@@ -1,5 +1,4 @@
 import { Box, Button, Heading, Text } from '@chakra-ui/react';
-import { css } from '@emotion/react';
 import React, { ReactNode } from 'react';
 import { Gradient } from '../Gradient';
 
@@ -24,13 +23,12 @@ export const HeroCard: React.FC<HeroCardProps> = ({
     height="lg"
     textAlign="center"
     borderRadius="2xl"
-    css={css`
-      & span,
-      div,
-      img {
-        border-radius: var(--boemly-radii-2xl);
-      }
-    `}
+    overflow="hidden"
+    css={{
+      '& span, div, img': {
+        borderRadius: 'var(--boemly-radii-2xl)',
+      },
+    }}
   >
     {image && (
       <>

src/components/QuoteCard/QuoteCard.stories.tsx

@@ -18,5 +18,9 @@ Default.args = {
     name: 'Hans',
     description: 'CEO @ a company',
     imageSrc: storybookAvatarUrl,
+    imageAlt: 'Hans',
+    imageObjectFit: 'cover',
+    orientation: 'horizontal',
+    size: 'md',
   },
 };

src/components/QuoteCard/QuoteCard.tsx

@@ -18,6 +18,10 @@ export const QuoteCard: React.FC<QuoteCardProps> = ({ text, avatar }: QuoteCardP
         imageSrc={avatar.imageSrc}
         name={avatar.name}
         description={avatar.description}
+        imageAlt={avatar.imageAlt}
+        imageObjectFit={avatar.imageObjectFit}
+        orientation={avatar.orientation}
+        size={avatar.size}
       />
     </Box>
   </Container>

src/components/RichText/RichText.stories.tsx

@@ -65,8 +65,7 @@ Default.args = {
 
 export const CustomHeading = Template.bind({});
 CustomHeading.args = {
-  content: 
-  `# Heading 1
+  content: `# Heading 1
 ## Heading 2
 ### Heading 3
 #### Heading 4
@@ -78,8 +77,7 @@ Text with *italic* and **bold** text.
 
 export const CustomText = Template.bind({});
 CustomText.args = {
-  content: 
-  `# Heading 1
+  content: `# Heading 1
 ## Heading 2
 ### Heading 3
 #### Heading 4
@@ -91,8 +89,7 @@ Text with *italic* and **bold** text.
 
 export const CustomUnorderedList = Template.bind({});
 CustomUnorderedList.args = {
-  content: 
-  `## Unordered list
+  content: `## Unordered list
 
   * List item 1
   * List item 2
@@ -103,8 +100,7 @@ CustomUnorderedList.args = {
 
 export const CustomOrderedList = Template.bind({});
 CustomOrderedList.args = {
-  content: 
-  `## Ordered list
+  content: `## Ordered list
 
   1. First item
   2. Second item

src/components/RichText/RichText.tsx

@@ -12,28 +12,34 @@ let languagesRegistered = false;
 
 const registerLanguages = async () => {
   if (languagesRegistered) return;
-  
+
   try {
-    const [
-      js,
-      bash,
-      python,
-      yaml,
-      xml,
-    ] = await Promise.all([
+    const [js, bash, python, yaml, xml] = await Promise.all([
       import('react-syntax-highlighter/dist/cjs/languages/hljs/javascript.js'),
       import('react-syntax-highlighter/dist/cjs/languages/hljs/bash.js'),
       import('react-syntax-highlighter/dist/cjs/languages/hljs/python.js'),
       import('react-syntax-highlighter/dist/cjs/languages/hljs/yaml.js'),
       import('react-syntax-highlighter/dist/cjs/languages/hljs/xml.js'),
     ]);
 
-    SyntaxHighlighter.registerLanguage('javascript', js.default);
-    SyntaxHighlighter.registerLanguage('bash', bash.default);
-    SyntaxHighlighter.registerLanguage('python', python.default);
-    SyntaxHighlighter.registerLanguage('yaml', yaml.default);
-    SyntaxHighlighter.registerLanguage('xml', xml.default);
-
+    // Temporarily suppress console.error to prevent highlight.js from logging
+    // when a language is already registered (common in test environments)
+    const originalError = console.error;
+    console.error = () => {};
+
+    try {
+      SyntaxHighlighter.registerLanguage('javascript', js.default);
+      SyntaxHighlighter.registerLanguage('bash', bash.default);
+      SyntaxHighlighter.registerLanguage('python', python.default);
+      SyntaxHighlighter.registerLanguage('yaml', yaml.default);
+      SyntaxHighlighter.registerLanguage('xml', xml.default);
+    } catch {
+      // Silently ignore if languages are already registered
+    } finally {
+      // Restore console.error
+      console.error = originalError;
+    }
+
     languagesRegistered = true;
   } catch (error) {
     console.warn('Failed to register syntax highlighter languages:', error);

src/components/Select/Select.tsx

@@ -20,7 +20,8 @@ interface Option {
   disabled?: boolean;
 }
 
-export interface BoemlySelectProps {
+export interface BoemlySelectProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'color'> {
   borderColor?: string;
   backgroundColor?: string;
   color?: string;
@@ -67,6 +68,7 @@ export const BoemlySelect: React.FC<BoemlySelectProps> = ({
   onChange,
   onClose,
   options,
+  ...rest
 }) => {
   const [isOpen, setIsOpen] = useState(false);
   const [searchTerm, setSearchTerm] = useState('');
@@ -232,6 +234,7 @@ export const BoemlySelect: React.FC<BoemlySelectProps> = ({
             alignItems="center"
             justifyContent="space-between"
             _focusVisible={{ outline: 'none', boxShadow: 'none' }}
+            {...rest}
           >
             <Text
               id="select-label"

src/constants/componentCustomizations.tsx

@@ -214,6 +214,10 @@ export const accordionSlotRecipe = defineSlotRecipe({
   className: 'accordion',
   slots: accordionAnatomy.keys(),
   base: {
+    root: {
+      borderTopWidth: '1px',
+      borderTopColor: 'gray.200',
+    },
     itemIndicator: {
       fontSize: '1rem',
       borderRadius: 'lg',
@@ -235,6 +239,7 @@ export const accordionSlotRecipe = defineSlotRecipe({
       paddingX: '0',
       paddingTop: '6',
       paddingBottom: '5',
+      borderColor: 'gray.200',
     },
     itemContent: {
       paddingX: '0',
@@ -249,8 +254,11 @@ export const accordionSlotRecipe = defineSlotRecipe({
           color: 'primary.700',
           background: 'white',
         },
-        itemContent: {
-          borderColor: 'whiteAlpha.300',
+        root: {
+          borderTopColor: 'whiteAlpha.300 !important',
+        },
+        item: {
+          borderColor: 'whiteAlpha.300 !important',
         },
       },
       black: {