fix: add 'use client' directives for Next.js SSR compatibility

src/components/BoemlyAccordion/BoemlyAccordion.tsx

@@ -18,7 +18,7 @@ export const BoemlyAccordion: React.FC<BoemlyAccordionProps> = ({
   defaultIndex,
 }: BoemlyAccordionProps) => {
   const textColor = variant === 'black' ? 'gray.500' : 'white';
-  const initialExpandedValues = defaultIndex.map((index) => rows[index].id.toString());
+  const initialExpandedValues = defaultIndex?.map((index) => rows[index].id.toString());
 
   return (
     <Accordion.Root defaultValue={initialExpandedValues} collapsible visual={variant}>

src/components/BoemlyFormControl/BoemlyFormControl.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import React, { ReactNode } from 'react';
 import {
   Checkbox,

src/components/BoemlyTabs/BoemlyTabs.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import React, { useMemo, useState } from 'react';
 import { Box, Flex } from '@chakra-ui/react';
 import LineTabButton from './LineTabButton';

src/components/BoemlyTag/BoemlyTag.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import React, { useState } from 'react';
 import { Tag, TagRootProps } from '@chakra-ui/react';
 

src/components/DatePicker/DatePicker.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import {
   CloseButton,
   Flex,

src/components/Expandable/Expandable.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { Box, Heading, IconButton, Flex, Text, Spinner } from '@chakra-ui/react';
 import { CaretDownIcon, CaretUpIcon } from '@phosphor-icons/react';
 import React, { useEffect } from 'react';

src/components/ForceClientSideRender/ForceClientSideRender.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { useEffect, useState } from 'react';
 
 interface ForceClientSideRenderProps {

src/components/ImageRadioItem/ImageRadioItem.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 import { chakra, useToken } from '@chakra-ui/react';
 import { motion, MotionConfig, useAnimation } from 'framer-motion';

src/components/Layout/Layout.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { Box } from '@chakra-ui/react';
 import { useWindowScroll } from '@reactuses/core';
 import React, { ReactNode, useEffect, useState } from 'react';

src/components/MobileMenuBurger/MobileMenuBurger.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { Flex, IconButton } from '@chakra-ui/react';
 import { useAnimation } from 'framer-motion';
 import React, { useEffect } from 'react';

src/components/OverflownText/OverflownText.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import React, { useRef, useState, useEffect } from 'react';
 import type { TextProps } from '@chakra-ui/react';
 import { Text } from '@chakra-ui/react';

src/components/RichText/RichText.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import React, { useEffect, useRef } from 'react';
 import { Box, Heading, HeadingProps, Link, Text, TextProps } from '@chakra-ui/react';
 import { ImageContainer } from './styles';

src/components/Select/Select.stories.tsx

@@ -102,3 +102,25 @@ SearchableMultiSelect.args = {
     { label: 'Option 4', value: 'option_4' },
   ],
 };
+
+export const NotFullWidth = Template.bind({});
+NotFullWidth.args = {
+  placeholder: 'Select',
+  isFullWidth: false,
+  options: [
+    { label: 'Short', value: 'short' },
+    {
+      label: 'This is a much longer option label that extends beyond the trigger',
+      value: 'long_1',
+    },
+    {
+      label: 'Another very long option with even more text to demonstrate auto width',
+      value: 'long_2',
+    },
+    { label: 'Medium length option', value: 'medium' },
+    {
+      label: 'Extra long option label with a lot of descriptive text for demonstration purposes',
+      value: 'extra_long',
+    },
+  ],
+};

src/components/Select/Select.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import React, { useState, useEffect, useMemo, useCallback, useRef } from 'react';
 import {
   Box,
@@ -81,7 +83,7 @@ export const BoemlySelect: React.FC<BoemlySelectProps> = ({
 
   // Use controlled value if provided, otherwise use internal state
   const isControlled = value !== undefined;
-  const selectedOptions = isControlled ? value : internalSelectedOptions;
+  const selectedOptions = (isControlled ? value : internalSelectedOptions) ?? [];
 
   const filteredOptions = useMemo(() => {
     if (isSearchable && searchTerm) {
@@ -209,7 +211,7 @@ export const BoemlySelect: React.FC<BoemlySelectProps> = ({
             onClose();
           }
         }}
-        positioning={{ placement: 'bottom-start', flip: false, sameWidth: true }}
+        positioning={{ placement: 'bottom-start', flip: false, sameWidth: false }}
       >
         {/* Trigger */}
         <Popover.Trigger asChild>
@@ -284,7 +286,8 @@ export const BoemlySelect: React.FC<BoemlySelectProps> = ({
             maxHeight={dynamicMaxHeight}
             overflowY="auto"
             zIndex="popover"
-            width={dropdownWidth || menuWidth}
+            width={dropdownWidth || 'auto'}
+            minWidth={menuWidth}
           >
             {isSearchable && (
               <InputGroup mb="4" startElement={<MagnifyingGlassIcon color="gray.500" />}>
@@ -356,7 +359,7 @@ export const BoemlySelect: React.FC<BoemlySelectProps> = ({
                         bg: disabled ? undefined : isSelected ? 'primary.200' : 'gray.100',
                       }}
                     >
-                      <Flex justify="space-between" align="center" width="100%">
+                      <Flex justify="space-between" align="center" width="100%" gap="3">
                         <Text
                           fontSize={selectRecipe.variants?.size[size]?.fontSize}
                           fontWeight={isSelected ? 'bold' : 'normal'}

src/components/Slider/Slider.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { Box, Flex, FlexProps, Slider, Text, useMediaQuery } from '@chakra-ui/react';
 import React, { useEffect, useMemo, useState } from 'react';
 import { BoemlyFormControl } from '../BoemlyFormControl';

src/components/SplitScreen/SplitScreen.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { Box, useMediaQuery } from '@chakra-ui/react';
 import React, { ReactNode, useEffect, useRef } from 'react';
 import { useAnimation } from 'framer-motion';

src/components/ui/provider.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import { ChakraProvider, SystemContext } from '@chakra-ui/react';
 import * as React from 'react';
 import defaultTheme from '../../theme';

src/constants/colorPalettes.ts

@@ -1,4 +1,4 @@
-import type { ButtonColorPalettes } from '../types/ButtonColorScheme';
+import type { ButtonColorPalettes } from '../types/ButtonColorPalette';
 
 export const COLOR_PALETTES: ButtonColorPalettes[] = [
   'primary',