@campxdev/react-blueprint 3.0.0-alpha.7 → 3.0.0-alpha.9

package/src/components/DataDisplay/DataTable/components/TableHeaders/TableActionHeader.tsx

@@ -20,6 +20,7 @@ type TableActionHeaderProps = {
     type: string;
     axios: Axios;
   };
+  hasCardView?: boolean;
 };
 
 const TableActionHeader = ({
@@ -28,6 +29,7 @@ const TableActionHeader = ({
   uniqueId,
   columns,
   viewsProps,
+  hasCardView = false,
 }: TableActionHeaderProps) => {
   const { data: views, isLoading } = useQuery(
     viewsProps.type,
@@ -97,30 +99,31 @@ const TableActionHeader = ({
       <div className="flex items-center gap-2">
         {layoutMode === 'table' && (
           <>
-            {' '}
             {/* Density Selector  */}
             <DensitySelector uniqueId={uniqueId} />
             {/* Column Selector  */}
             <ColumnSelector columns={columns} uniqueId={uniqueId} />
           </>
         )}
-        {/* Layout Switcher */}
-        <div className="flex gap-1 border rounded-md flex-shrink-0 bg-background">
-          <Button
-            variant={layoutMode === 'table' ? 'default' : 'ghost'}
-            size="sm"
-            onClick={() => onLayoutChange('table')}
-          >
-            <Table />
-          </Button>
-          <Button
-            variant={layoutMode === 'card' ? 'default' : 'ghost'}
-            size="sm"
-            onClick={() => onLayoutChange('card')}
-          >
-            <LayoutGrid />
-          </Button>
-        </div>
+        {/* Layout Switcher - Only show if card view is available */}
+        {hasCardView && (
+          <div className="flex gap-1 border rounded-md flex-shrink-0 bg-background">
+            <Button
+              variant={layoutMode === 'table' ? 'default' : 'ghost'}
+              size="sm"
+              onClick={() => onLayoutChange('table')}
+            >
+              <Table />
+            </Button>
+            <Button
+              variant={layoutMode === 'card' ? 'default' : 'ghost'}
+              size="sm"
+              onClick={() => onLayoutChange('card')}
+            >
+              <LayoutGrid />
+            </Button>
+          </div>
+        )}
       </div>
     </Card>
   );

package/src/components/Input/DatePicker/components/DatePickerInput.tsx

@@ -181,7 +181,7 @@ export const DatePickerInput = ({
       {/* Helper Text / Error */}
       {(helperText || error) && (
         <Typography
-          variant="small"
+          variant="muted"
           className={cn('ml-1 mt-1', error && 'text-destructive')}
         >
           {typeof error === 'string' ? error : error?.message || helperText}

package/src/components/Input/DateTimePicker/components/DateTimePickerInput.tsx

@@ -196,9 +196,7 @@ export const DateTimePickerInput = ({
               disabled={disabled}
               {...rest}
             >
-              <span>
-                {value ? formatDateTimeString(value) : placeholder}
-              </span>
+              <span>{value ? formatDateTimeString(value) : placeholder}</span>
               {Icon &&
                 cloneElement(Icon as React.ReactElement, {
                   className: 'ml-2 h-4 w-4 ',
@@ -286,7 +284,7 @@ export const DateTimePickerInput = ({
       {/* Helper Text / Error */}
       {(helperText || error) && (
         <Typography
-          variant="small"
+          variant="muted"
           className={cn('ml-1 mt-1', error && 'text-destructive')}
         >
           {typeof error === 'string' ? error : error?.message || helperText}

package/src/components/Input/MultiSelect/MultiSelect.tsx

@@ -22,6 +22,8 @@ export type MultiSelectProps = {
   name?: string;
   getValue?: (option: any) => any;
   value?: any[];
+  defaultValue?: any[];
+  placeholder?: string;
   dbValueProps?: {
     valueKey: string;
     isObjectId?: boolean;
@@ -70,6 +72,8 @@ export type MultiSelectProps = {
  * @param {boolean} [props.loading] - Whether options are loading
  * @param {boolean} [props.disableClear] - Whether to hide the clear button
  * @param {boolean} [props.fullWidth] - Whether the select takes full width
+ * @param {any[]} [props.defaultValue] - Default values when component is uncontrolled (overridden by value prop)
+ * @param {string} [props.placeholder] - Placeholder text shown when no values are selected
  * @param {'input' | 'filter'} [props.type='input'] - Display type
  * @param {(event: SyntheticEvent) => void} [props.onOpen] - Callback when menu opens
  * @param {(event: SyntheticEvent, reason: string) => void} [props.onClose] - Callback when menu closes
@@ -92,7 +96,9 @@ export const MultiSelect = ({
   optionsApiEndpointParams,
   externalAxios,
   getValue,
-  value = [],
+  value,
+  defaultValue,
+  placeholder,
   onChange,
   dbValueProps = {
     valueKey: 'id',
@@ -110,16 +116,18 @@ export const MultiSelect = ({
   type = 'input',
   ...restProps
 }: MultiSelectProps) => {
+  // Prioritize value over defaultValue (value takes precedence if both exist)
+  const effectiveValue = value !== undefined ? value : defaultValue ?? [];
   const initialState: MultiSelectState = {
     open: false,
     loadingInternalOptions: false,
     loadingInitialInternalOptions: false,
     internalOptions: options ?? [],
     internalOptionsMap: generateOptionsMap(options ?? [], getValue),
-    selectedValues: value,
+    selectedValues: effectiveValue,
     selectedOptionsMap: generateSelectedOptionsMap(
       options ?? [],
-      value,
+      effectiveValue,
       getValue,
     ),
     limit: 10,
@@ -415,7 +423,7 @@ export const MultiSelect = ({
             ...(dbValueProps.isObjectId && { isObjectId: true }),
             ...(dbValueProps.isInt && { isInt: true }),
             ...(dbValueProps.isFloat && { isFloat: true }),
-            selectedValueData: value,
+            selectedValueData: effectiveValue,
             filterBySelectedValues: true,
           },
           dbLabelProps,
@@ -429,7 +437,7 @@ export const MultiSelect = ({
           internalOptionsMap: generateOptionsMap(res.data, getValue),
           selectedOptionsMap: generateSelectedOptionsMap(
             res.data,
-            value,
+            effectiveValue,
             getValue,
           ),
         },
@@ -444,7 +452,7 @@ export const MultiSelect = ({
   };
 
   useEffect(() => {
-    if (value && value.length > 0 && optionsApiEndPoint) {
+    if (effectiveValue && effectiveValue.length > 0 && optionsApiEndPoint) {
       loadSelectedOptions().finally(() => {
         dispatch({
           actionType: MultiSelectActionsTypes.LOAD_SELECTED_OPTIONS_END,
@@ -470,7 +478,8 @@ export const MultiSelect = ({
         state={state}
         optionsApiEndPoint={optionsApiEndPoint}
         getValue={getValue}
-        value={value}
+        value={effectiveValue}
+        placeholder={placeholder}
         dbLabelProps={dbLabelProps}
         {...restProps}
       />
@@ -488,7 +497,8 @@ export const MultiSelect = ({
       state={state}
       optionsApiEndPoint={optionsApiEndPoint}
       getValue={getValue}
-      value={value}
+      value={effectiveValue}
+      placeholder={placeholder}
       dbLabelProps={dbLabelProps}
       {...restProps}
     />

package/src/components/Input/MultiSelect/components/MultiSelectInput.tsx

@@ -43,6 +43,7 @@ export const MultiSelectInput = ({
   name,
   getValue,
   value = [],
+  placeholder = '',
   onChange,
   error,
   helperText,
@@ -155,9 +156,7 @@ export const MultiSelectInput = ({
             >
               <div className="flex items-center gap-2 flex-1 overflow-hidden">
                 {selectedChips.length === 0 ? (
-                  <span className="text-muted-foreground">
-                    Select options...
-                  </span>
+                  <span className="text-muted-foreground">{placeholder}</span>
                 ) : (
                   <>
                     <Badge variant={'default'}>{firstChip.label}</Badge>

package/src/components/Input/PasswordField/PasswordField.tsx

@@ -129,7 +129,10 @@ export const PasswordField = ({
       label={label}
       required={required}
       name={name}
-      containerProps={containerProps}
+      containerProps={{
+        ...(fullWidth && { style: { width: '100%' } }),
+        ...containerProps,
+      }}
     >
       {content}
     </LabelWrapper>

package/src/components/Input/SingleSelect/SingleSelect.tsx

@@ -30,6 +30,8 @@ export type SingleSelectProps = {
   name?: string;
   getValue?: (option: any) => any;
   value?: any;
+  defaultValue?: any;
+  placeholder?: string;
   dbValueProps?: {
     valueKey: string;
     isObjectId?: boolean;
@@ -78,6 +80,8 @@ export type SingleSelectProps = {
  * @param {boolean} [props.loading] - Whether options are loading
  * @param {boolean} [props.disableClear] - Whether to hide the clear button
  * @param {boolean} [props.fullWidth] - Whether the select takes full width
+ * @param {any} [props.defaultValue] - Default value when component is uncontrolled (overridden by value prop)
+ * @param {string} [props.placeholder] - Placeholder text shown when no value is selected
  * @param {'input' | 'filter'} [props.type='input'] - Display type
  * @param {(event: SyntheticEvent) => void} [props.onOpen] - Callback when menu opens
  * @param {(event: SyntheticEvent, reason: string) => void} [props.onClose] - Callback when menu closes
@@ -101,6 +105,8 @@ export const SingleSelect = ({
   externalAxios,
   getValue,
   value,
+  defaultValue,
+  placeholder,
   onChange,
   dbValueProps = {
     valueKey: 'id',
@@ -139,6 +145,9 @@ export const SingleSelect = ({
 
   const internalAxios = externalAxios || axios;
 
+  // Prioritize value over defaultValue (value takes precedence if both exist)
+  const effectiveValue = value !== undefined ? value : defaultValue;
+
   const handleOpen = async (event: SyntheticEvent) => {
     dispatch({
       actionType: SingleSelectActionsTypes.OPEN,
@@ -211,10 +220,10 @@ export const SingleSelect = ({
         actionType: SingleSelectActionsTypes.CLEAR_SEARCH,
         stateChanges: {
           internalOptions: internalOptions.filter(
-            (o: any) => o.value === value,
+            (o: any) => o.value === effectiveValue,
           ),
           internalOptionsMap: generateOptionsMap(
-            internalOptions.filter((o: any) => o.value === value),
+            internalOptions.filter((o: any) => o.value === effectiveValue),
           ),
         },
       });
@@ -246,7 +255,7 @@ export const SingleSelect = ({
               ...(dbValueProps.isObjectId && { isObjectId: true }),
               ...(dbValueProps.isInt && { isInt: true }),
               ...(dbValueProps.isFloat && { isFloat: true }),
-              selectedValueData: value,
+              selectedValueData: effectiveValue,
             },
             dbLabelProps: {
               search: search,
@@ -284,10 +293,10 @@ export const SingleSelect = ({
         actionType: SingleSelectActionsTypes.CLEAR_SEARCH,
         stateChanges: {
           internalOptions: internalOptions.filter(
-            (o: any) => o.value === value,
+            (o: any) => o.value === effectiveValue,
           ),
           internalOptionsMap: generateOptionsMap(
-            internalOptions.filter((o: any) => o.value === value),
+            internalOptions.filter((o: any) => o.value === effectiveValue),
           ),
         },
       });
@@ -307,7 +316,7 @@ export const SingleSelect = ({
                 ...(dbValueProps.isObjectId && { isObjectId: true }),
                 ...(dbValueProps.isInt && { isInt: true }),
                 ...(dbValueProps.isFloat && { isFloat: true }),
-                selectedValueData: value,
+                selectedValueData: effectiveValue,
               },
               dbLabelProps: {
                 search: searchValue,
@@ -324,11 +333,11 @@ export const SingleSelect = ({
           stateChanges: {
             internalOptions: [
               ...options,
-              ...internalOptions.filter((o: any) => o.value === value),
+              ...internalOptions.filter((o: any) => o.value === effectiveValue),
             ],
             internalOptionsMap: generateOptionsMap([
               ...options,
-              ...internalOptions.filter((o: any) => o.value === value),
+              ...internalOptions.filter((o: any) => o.value === effectiveValue),
             ]),
           },
         });
@@ -360,7 +369,7 @@ export const SingleSelect = ({
             ...(dbValueProps.isObjectId && { isObjectId: true }),
             ...(dbValueProps.isInt && { isInt: true }),
             ...(dbValueProps.isFloat && { isFloat: true }),
-            selectedValueData: value,
+            selectedValueData: effectiveValue,
             filterBySelectedValues: true,
           },
           dbLabelProps,
@@ -384,7 +393,7 @@ export const SingleSelect = ({
   };
 
   useEffect(() => {
-    if (value && optionsApiEndPoint) {
+    if (effectiveValue && optionsApiEndPoint) {
       loadSelectedOptions().finally(() => {
         dispatch({
           actionType: SingleSelectActionsTypes.LOAD_SELECTED_OPTIONS_END,
@@ -408,7 +417,8 @@ export const SingleSelect = ({
         state={state}
         optionsApiEndPoint={optionsApiEndPoint}
         getValue={getValue}
-        value={value}
+        value={effectiveValue}
+        placeholder={placeholder}
         dbLabelProps={dbLabelProps}
         {...restProps}
       />
@@ -424,7 +434,8 @@ export const SingleSelect = ({
       state={state}
       optionsApiEndPoint={optionsApiEndPoint}
       getValue={getValue}
-      value={value}
+      value={effectiveValue}
+      placeholder={placeholder}
       dbLabelProps={dbLabelProps}
       {...restProps}
     />

package/src/components/Input/SingleSelect/components/SingleInput.tsx

@@ -39,6 +39,7 @@ export const SingleInput = ({
   name,
   getValue,
   value,
+  placeholder,
   onChange,
   error,
   helperText,
@@ -140,7 +141,7 @@ export const SingleInput = ({
                   'border-destructive focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40',
               )}
             >
-              {selectedOption?.label || 'Select an option...'}
+              {selectedOption?.label || placeholder || 'Select an option...'}
               <ChevronDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
             </Button>
           </span>

package/src/components/Layout/AppLayout/AppLayout.tsx

@@ -15,7 +15,6 @@ import { AppLayoutProps } from './types';
  * @param {SideMenuItemProps[]} menu - Navigation menu items for the sidebar
  * @param {ReactNode | ((params: { collapsed: boolean }) => ReactNode)} [actions] - Optional action elements or function that receives collapsed state
  * @param {string} [mainContainerClassName=''] - Additional CSS classes for the main content container
- * @param {HelpDocsConfig} [helpDocsConfig] - Configuration for context-based help documentation
  * @param {boolean} [initialCollapsed] - Initial state of sidebar collapse (auto-determined on small screens)
  * @param {UserProfilePopupProps} [userProfileParams] - Configuration for user profile popup/menu
  *
@@ -41,7 +40,6 @@ export const AppLayout: React.FC<AppLayoutProps> = ({
   menu,
   actions,
   mainContainerClassName = '',
-  helpDocsConfig,
   initialCollapsed,
   userProfileParams,
 }) => {
@@ -53,7 +51,6 @@ export const AppLayout: React.FC<AppLayoutProps> = ({
         menu={menu}
         actions={actions}
         mainContainerClassName={mainContainerClassName}
-        helpDocsConfig={helpDocsConfig}
         userProfileParams={userProfileParams}
       >
         {children}
@@ -67,7 +64,6 @@ const AppLayoutContent: React.FC<AppLayoutProps> = ({
   menu,
   actions,
   mainContainerClassName = '',
-  helpDocsConfig,
   userProfileParams,
 }) => {
   const { collapsed, setCollapsed } = useSidebar();

package/src/components/Layout/PageContent/PageContent.tsx

@@ -37,7 +37,7 @@ const PageContent = ({ children, className, styles }: PageContentProps) => {
         className,
       )}
       style={{
-        height: isSmallScreen ? 'calc(100vh - 101px)' : `calc(100vh - 80px)`,
+        height: isSmallScreen ? 'calc(100vh - 149px)' : `calc(100vh - 85px)`,
         overflowY: 'auto',
         ...styles,
       }}

package/src/components/Navigation/Dialog/Dialog.tsx

@@ -89,6 +89,7 @@ const Dialog = ({
     lg: 'max-w-lg',
     xl: 'max-w-xl',
     '2xl': 'max-w-2xl',
+    '3xl': 'max-w-3xl',
   };
 
   return (

package/src/components/Navigation/DialogButton/DialogButton.tsx

@@ -102,6 +102,7 @@ export const DialogButton = ({
     lg: 'max-w-lg',
     xl: 'max-w-xl',
     '2xl': 'max-w-2xl',
+    '3xl': 'max-w-3xl',
   };
 
   const onClose = () => {
@@ -134,7 +135,7 @@ export const DialogButton = ({
           showCloseButton={showCloseButton}
         >
           {title && (
-            <DialogHeader className="pl-4 pt-4">
+            <DialogHeader className="pl-4 pt-4 border-b">
               <ShadcnDialogTitle>{title}</ShadcnDialogTitle>
             </DialogHeader>
           )}

package/src/components/Navigation/Stepper/HorizontalStepper.tsx

@@ -10,6 +10,48 @@ import {
   handleStepClick as handleStepClickUtil,
 } from './utils';
 
+/**
+ * Native HTML button component for step indicators
+ * Uses forwardRef to properly expose DOM node for positioning calculations
+ */
+interface StepIndicatorProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: 'default' | 'secondary' | 'inactive';
+  children: React.ReactNode;
+}
+
+const StepIndicator = React.forwardRef<HTMLButtonElement, StepIndicatorProps>(
+  function StepIndicator(
+    { variant = 'default', className, children, ...props },
+    ref,
+  ) {
+    const baseStyles =
+      'inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 outline-none focus-visible:ring-2 focus-visible:ring-offset-2 h-10 w-10 rounded-full duration-200';
+
+    const variantStyles = {
+      default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+      secondary:
+        'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+      inactive: 'bg-muted text-muted-foreground hover:bg-muted/80',
+    };
+
+    return (
+      <button
+        ref={ref}
+        className={cn(
+          baseStyles,
+          variantStyles[variant],
+          'cursor-pointer',
+          className,
+        )}
+        {...props}
+      >
+        {children}
+      </button>
+    );
+  },
+);
+
 const HorizontalStepper: React.FC<StepperVariantProps> = ({
   activeStep,
   steps,
@@ -19,6 +61,7 @@ const HorizontalStepper: React.FC<StepperVariantProps> = ({
 }) => {
   // Refs to track indicator positions
   const indicatorRefs = useRef<(HTMLButtonElement | null)[]>([]);
+  const stepsContainerRef = useRef<HTMLDivElement>(null);
   const [connectorPositions, setConnectorPositions] = useState<
     { left: number; width: number; top: number }[]
   >([]);
@@ -30,8 +73,9 @@ const HorizontalStepper: React.FC<StepperVariantProps> = ({
   // Calculate connector positions based on indicator refs
   useEffect(() => {
     const calculatePositions = () => {
-      if (indicatorRefs.current.length > 0) {
+      if (indicatorRefs.current.length > 1 && stepsContainerRef.current) {
         const spacing = 6; // Spacing in pixels on each side of the connector
+        const containerRect = stepsContainerRef.current.getBoundingClientRect();
 
         const positions = indicatorRefs.current
           .slice(0, -1)
@@ -43,12 +87,6 @@ const HorizontalStepper: React.FC<StepperVariantProps> = ({
             const currentRect = indicator.getBoundingClientRect();
             const nextRect =
               indicatorRefs.current[index + 1]!.getBoundingClientRect();
-            const containerRect =
-              indicator.offsetParent?.getBoundingClientRect();
-
-            if (!containerRect) {
-              return { left: 0, width: 0, top: 0 };
-            }
 
             const left = currentRect.right - containerRect.left + spacing;
             const width = nextRect.left - currentRect.right - spacing * 2;
@@ -62,14 +100,17 @@ const HorizontalStepper: React.FC<StepperVariantProps> = ({
       }
     };
 
-    // Calculate positions initially
-    calculatePositions();
+    // Use requestAnimationFrame to ensure DOM is ready
+    const animationFrameId = requestAnimationFrame(() => {
+      calculatePositions();
+    });
 
-    // Recalculate on window resize
+    // Also recalculate on window resize
     window.addEventListener('resize', calculatePositions);
 
-    // Cleanup listener on unmount
+    // Cleanup listeners on unmount
     return () => {
+      cancelAnimationFrame(animationFrameId);
       window.removeEventListener('resize', calculatePositions);
     };
   }, [steps, activeStep]);
@@ -109,12 +150,9 @@ const HorizontalStepper: React.FC<StepperVariantProps> = ({
               <ChevronLeft className="w-5 h-5" />
             </Button>
             {/* Step Indicator */}
-            <Button
-              variant={currentState === 'inactive' ? 'secondary' : 'default'}
-              className="h-8 w-8 rounded-full  duration-200"
-            >
+            <StepIndicator variant={currentState === 'inactive' ? 'secondary' : 'default'}>
               {activeStep + 1}
-            </Button>
+            </StepIndicator>
 
             {/* Next Button */}
             <Button
@@ -154,33 +192,36 @@ const HorizontalStepper: React.FC<StepperVariantProps> = ({
       </div>
 
       {/* Desktop View - All steps with connectors (md breakpoint and above) */}
-      <div className="hidden md:block">
-        <div className="flex items-start justify-between relative">
-          {steps.map((step, index) => {
-            const state = getStepState(index, activeStep);
-            const isClickable = allowNavigation && onStepClick;
-
-            return (
-              <div key={index} className="flex items-start flex-1">
-                <div className="flex flex-col items-center">
+      <div className="hidden md:block w-full">
+        <div className="relative w-full">
+          {/* Steps Row - flex-shrink-0 prevents content expansion */}
+          <div className="flex justify-between items-start gap-2 relative px-1" ref={stepsContainerRef}>
+            {steps.map((step, index) => {
+              const state = getStepState(index, activeStep);
+              const isClickable = allowNavigation && onStepClick;
+
+              return (
+                <div
+                  key={index}
+                  className="flex flex-col items-center flex-shrink-0"
+                >
                   {/* Step Indicator */}
-                  <Button
+                  <StepIndicator
                     ref={(el) => (indicatorRefs.current[index] = el)}
                     onClick={
                       isClickable ? () => handleStepClick(index) : () => {}
                     }
                     variant={state === 'inactive' ? 'secondary' : 'default'}
-                    className="h-8 w-8 rounded-full duration-200"
                   >
                     {state === 'completed' ? (
-                      <Check className="w-4 h-4" />
+                      <Check className="w-5 h-5" />
                     ) : (
                       index + 1
                     )}
-                  </Button>
+                  </StepIndicator>
 
-                  {/* Step Content */}
-                  <div className="flex flex-col gap-1 mt-3 text-center px-2">
+                  {/* Step Content - Centered below indicator */}
+                  <div className="flex flex-col gap-1 mt-3 text-center whitespace-nowrap">
                     <Typography
                       variant={state === 'inactive' ? 'muted' : 'small'}
                     >
@@ -201,26 +242,28 @@ const HorizontalStepper: React.FC<StepperVariantProps> = ({
                     )}
                   </div>
                 </div>
-              </div>
-            );
-          })}
-
-          {/* Connectors - Positioned absolutely based on calculated positions */}
-          {connectorPositions.map((position, index) => (
-            <div
-              key={`connector-${index}`}
-              className={cn(
-                'absolute h-0.5 rounded-full transition-colors duration-200',
-                getConnectorClasses(index, activeStep),
-              )}
-              style={{
-                left: `${position.left}px`,
-                width: `${position.width}px`,
-                top: `${position.top}px`,
-              }}
-              aria-hidden="true"
-            />
-          ))}
+              );
+            })}
+          </div>
+
+          {/* Connectors - Positioned absolutely based on calculated indicator positions */}
+          <div className="absolute top-0 left-0 right-0 w-full h-full pointer-events-none">
+            {connectorPositions.map((position, index) => (
+              <div
+                key={`connector-${index}`}
+                className={cn(
+                  'absolute h-0.5 rounded-full transition-colors duration-200',
+                  getConnectorClasses(index, activeStep),
+                )}
+                style={{
+                  left: `${position.left}px`,
+                  width: `${position.width}px`,
+                  top: `${position.top}px`,
+                }}
+                aria-hidden="true"
+              />
+            ))}
+          </div>
         </div>
       </div>
     </div>