robobyte-front-builder 1.0.19 → 1.0.21

package/src/views/builder/viewer/AdornedLabel.jsx

@@ -0,0 +1,82 @@
+import { Box } from '@mui/material'
+import { resolveIcon } from 'services/builderHelper/iconResolver'
+
+/**
+ * Inline prefix + text + suffix row used by LabelRenderer, HeaderRenderer,
+ * and FieldLabel.
+ *
+ * Props
+ * ─────
+ * prefix / suffix   — MUI icon name OR plain text string
+ * gap               — MUI sx gap between pieces (default 0.5)
+ * sx                — sx applied to the outer wrapper span
+ *
+ * Per-adornment styling (each accepts a full MUI sx object):
+ *   prefixSx / suffixSx — applied to that adornment's wrapper span
+ *
+ * Shorthand helpers (applied to both adornments unless overridden by *Sx):
+ *   iconSize  — MUI fontSize value ('small' | 'medium' | 'large' | 'inherit' | CSS string)
+ *   iconColor — CSS / MUI color token for the icon / text adornment
+ *
+ * When neither adornment is present, children are returned unwrapped so the
+ * caller retains full control over display / text-align.
+ */
+export default function AdornedLabel({
+  prefix,
+  suffix,
+  gap       = 0.5,
+  iconSize  = 'inherit',
+  iconColor,
+  prefixSx,
+  suffixSx,
+  sx,
+  children,
+}) {
+  if (!prefix && !suffix) return children ?? null
+
+  // Base sx shared by both adornments (overrideable per-side via *Sx props)
+  const baseAdornSx = {
+    display:     'inline-flex',
+    alignItems:  'center',
+    flexShrink:  0,
+    ...(iconColor && { color: iconColor }),
+  }
+
+  function Piece({ value, sideSx }) {
+    if (!value) return null
+    const str  = String(value)
+    const Icon = resolveIcon(str)
+    const merged = { ...baseAdornSx, ...sideSx }
+
+    if (Icon) {
+      return (
+        <Box component='span' sx={merged}>
+          <Icon fontSize={sideSx?.fontSize ?? iconSize} />
+        </Box>
+      )
+    }
+    // Plain-text adornment — fontSize/color come from merged sx
+    return (
+      <Box component='span' sx={{ flexShrink: 0, lineHeight: 'inherit', ...merged }}>
+        {str}
+      </Box>
+    )
+  }
+
+  return (
+    <Box
+      component='span'
+      sx={{
+        display:       'inline-flex',
+        alignItems:    'center',
+        gap,
+        verticalAlign: 'middle',
+        ...sx,
+      }}
+    >
+      <Piece value={prefix} sideSx={prefixSx} />
+      {children && <Box component='span'>{children}</Box>}
+      <Piece value={suffix} sideSx={suffixSx} />
+    </Box>
+  )
+}

package/src/views/builder/viewer/ComponentRenderer.jsx

@@ -21,22 +21,46 @@ import MenuRenderer from './renderers/MenuRenderer'
 import ProgressCircleRenderer from './renderers/ProgressCircleRenderer'
 import ProgressLineRenderer from './renderers/ProgressLineRenderer'
 import CardRenderer from './renderers/CardRenderer'
-import ColumnGroupRenderer from './renderers/ColumnGroupRenderer'
-import ColumnRenderer from './renderers/ColumnRenderer'
-import CellRenderer from './renderers/CellRenderer'
-import HeaderCellRenderer from './renderers/HeaderCellRenderer'
 import BreadcrumbRenderer from './renderers/BreadcrumbRenderer'
-import TableRenderer from './renderers/TableRenderer'
-import TabRenderer from './renderers/TabRenderer'
 import WizardRenderer from './renderers/WizardRenderer'
 import WizardStepRenderer from './renderers/WizardStepRenderer'
 import RepeaterRenderer from './renderers/RepeaterRenderer'
 import ReportViewerRenderer from './renderers/ReportViewerRenderer'
+import DataTableViewerRenderer from './renderers/DataTableViewerRenderer'
+import ViewRendererRenderer from './renderers/ViewRendererRenderer'
+import DialogRenderer from './renderers/DialogRenderer'
 import AutoCompleteRenderer from './renderers/AutoCompleteRenderer'
 import LayoutRenderer from './renderers/LayoutRenderer'
 import LayoutCellRenderer from './renderers/LayoutCellRenderer'
+import PopoverRenderer from './renderers/PopoverRenderer'
+import DataGridRenderer from './renderers/DataGridRenderer'
+import ExcelUploadRenderer from './renderers/ExcelUploadRenderer'
+import BannerRenderer from './renderers/BannerRenderer'
+import PageNumberRenderer from './renderers/PageNumberRenderer'
+import TreeViewRenderer from './renderers/TreeViewRenderer'
 import ViewerComponentWrapper from 'views/builder/viewer/ViewerComponentWrapper'
 
+// KPI / data-viz renderers
+import MetricRenderer         from './renderers/MetricRenderer'
+import TrendRenderer          from './renderers/TrendRenderer'
+import BadgeRenderer          from './renderers/BadgeRenderer'
+import StatusDotRenderer      from './renderers/StatusDotRenderer'
+import IconBoxRenderer        from './renderers/IconBoxRenderer'
+import ChartRenderer          from './renderers/ChartRenderer'
+import GaugeRenderer          from './renderers/GaugeRenderer'
+import DonutRenderer          from './renderers/DonutRenderer'
+import FunnelRenderer         from './renderers/FunnelRenderer'
+import BulletChartRenderer    from './renderers/BulletChartRenderer'
+import ComparisonBarsRenderer from './renderers/ComparisonBarsRenderer'
+import TimelineRenderer       from './renderers/TimelineRenderer'
+import TagListRenderer        from './renderers/TagListRenderer'
+import HeatmapGridRenderer    from './renderers/HeatmapGridRenderer'
+import CountdownRenderer      from './renderers/CountdownRenderer'
+import AvatarGroupRenderer    from './renderers/AvatarGroupRenderer'
+import RatingRenderer         from './renderers/RatingRenderer'
+import StepStageRenderer      from './renderers/StepStageRenderer'
+import ColorScaleRenderer     from './renderers/ColorScaleRenderer'
+
 export default function ComponentRenderer({ node, viewerContext }) {
   if (!node) return null
 
@@ -110,27 +134,9 @@ export default function ComponentRenderer({ node, viewerContext }) {
     case 'card':
       return <CardRenderer node={node} viewerContext={viewerContext} />
 
-    case 'column-group':
-      return <ColumnGroupRenderer node={node} viewerContext={viewerContext} />
-
-    case 'column':
-      return <ColumnRenderer node={node} viewerContext={viewerContext} />
-
-    case 'cell':
-      return <CellRenderer node={node} viewerContext={viewerContext} />
-
-    case 'header-cell':
-      return <HeaderCellRenderer node={node} viewerContext={viewerContext} />
-
     case 'breadcrumb':
       return <BreadcrumbRenderer node={node} viewerContext={viewerContext} />
 
-    case 'table':
-      return <TableRenderer node={node} viewerContext={viewerContext} />
-
-    case 'tab':
-      return <TabRenderer node={node} viewerContext={viewerContext} />
-
     case 'wizard':
       return <WizardRenderer node={node} viewerContext={viewerContext} />
 
@@ -142,6 +148,14 @@ export default function ComponentRenderer({ node, viewerContext }) {
 
     case 'reportViewer':
       return <ReportViewerRenderer node={node} viewerContext={viewerContext} />
+    case 'data-table-viewer':
+      return <DataTableViewerRenderer node={node} viewerContext={viewerContext} />
+
+    case 'viewRenderer':
+      return <ViewRendererRenderer node={node} viewerContext={viewerContext} />
+
+    case 'dialog':
+      return <DialogRenderer node={node} viewerContext={viewerContext} />
 
     case 'autocomplete':
       return <AutoCompleteRenderer node={node} viewerContext={viewerContext} />
@@ -152,6 +166,66 @@ export default function ComponentRenderer({ node, viewerContext }) {
     case 'layout-cell':
       return <LayoutCellRenderer node={node} layoutNode={node} viewerContext={viewerContext} />
 
+    case 'popover':
+      return <PopoverRenderer node={node} viewerContext={viewerContext} />
+
+    case 'data-grid':
+      return <DataGridRenderer node={node} viewerContext={viewerContext} />
+
+    case 'excel-upload':
+      return <ExcelUploadRenderer node={node} viewerContext={viewerContext} />
+
+    case 'banner':
+      return <BannerRenderer node={node} viewerContext={viewerContext} />
+
+    case 'pageNumber':
+      return <PageNumberRenderer node={node} viewerContext={viewerContext} />
+
+    case 'treeView':
+      return <TreeViewRenderer node={node} viewerContext={viewerContext} />
+
+    // KPI / data-viz
+    case 'kpi-metric':
+      return <MetricRenderer node={node} viewerContext={viewerContext} />
+    case 'kpi-trend':
+      return <TrendRenderer node={node} viewerContext={viewerContext} />
+    case 'kpi-badge':
+      return <BadgeRenderer node={node} viewerContext={viewerContext} />
+    case 'kpi-status-dot':
+      return <StatusDotRenderer node={node} viewerContext={viewerContext} />
+    case 'kpi-icon-box':
+      return <IconBoxRenderer node={node} viewerContext={viewerContext} />
+    case 'kpi-chart':
+    case 'kpi-sparkline':   // legacy alias
+    case 'kpi-mini-bar':    // legacy alias
+      return <ChartRenderer node={node} viewerContext={viewerContext} />
+    case 'kpi-gauge':
+      return <GaugeRenderer node={node} viewerContext={viewerContext} />
+    case 'kpi-donut':
+      return <DonutRenderer node={node} viewerContext={viewerContext} />
+    case 'kpi-funnel':
+      return <FunnelRenderer node={node} viewerContext={viewerContext} />
+    case 'kpi-bullet':
+      return <BulletChartRenderer node={node} viewerContext={viewerContext} />
+    case 'kpi-comparison':
+      return <ComparisonBarsRenderer node={node} viewerContext={viewerContext} />
+    case 'kpi-timeline':
+      return <TimelineRenderer node={node} viewerContext={viewerContext} />
+    case 'kpi-tag-list':
+      return <TagListRenderer node={node} viewerContext={viewerContext} />
+    case 'kpi-heatmap':
+      return <HeatmapGridRenderer node={node} viewerContext={viewerContext} />
+    case 'kpi-countdown':
+      return <CountdownRenderer node={node} viewerContext={viewerContext} />
+    case 'kpi-avatar-group':
+      return <AvatarGroupRenderer node={node} viewerContext={viewerContext} />
+    case 'kpi-rating':
+      return <RatingRenderer node={node} viewerContext={viewerContext} />
+    case 'kpi-step-stage':
+      return <StepStageRenderer node={node} viewerContext={viewerContext} />
+    case 'kpi-color-scale':
+      return <ColorScaleRenderer node={node} viewerContext={viewerContext} />
+
     case 'widget':
       return <ViewerComponentWrapper node={node} viewerContext={viewerContext} />
 

package/src/views/builder/viewer/DialogsZone.jsx

@@ -0,0 +1,259 @@
+import { useState, useCallback } from 'react'
+import { Box, Typography, Chip, Menu, MenuItem, ListItemIcon, ListItemText, Divider } from '@mui/material'
+import { OpenInBrowserOutlined, KeyboardArrowDown, KeyboardArrowUp, AddOutlined, DeleteOutlined } from '@mui/icons-material'
+import { createNode } from 'services/builderHelper/nodeFactory'
+import { useBuilder } from 'src/context/BuilderContext'
+import DialogRenderer from './renderers/DialogRenderer'
+
+// ── DialogsZone ───────────────────────────────────────────────────────────────
+//
+// Renders at the bottom of the canvas / ProductionViewer.
+//
+// EDIT MODE
+//   • Collapsible panel showing all dialog cards.
+//   • Acts as the ONLY valid drop target for 'dialog' type nodes.
+//   • Right-click on the zone header opens a context menu (add / delete all).
+//   • Right-click on an individual dialog card deletes that dialog.
+//   • Each card is clickable → selects the dialog in the inspector.
+//
+// PRODUCTION MODE
+//   • Invisible — just mounts every <DialogRenderer> so they register themselves
+//     in dialogRefs and are ready to be opened via openDialog(key).
+
+function EditDropZone({ onDrop }) {
+  const [over, setOver] = useState(false)
+
+  return (
+    <Box
+      onDragOver={e => { e.preventDefault(); setOver(true) }}
+      onDragLeave={() => setOver(false)}
+      onDrop={e => { e.preventDefault(); setOver(false); onDrop(e) }}
+      sx={{
+        border: `2px dashed ${over ? '#9c27b0' : '#3a3f4a'}`,
+        borderRadius: 1.5,
+        p: 1.5,
+        textAlign: 'center',
+        color: over ? '#9c27b0' : '#555',
+        fontSize: 11,
+        cursor: 'copy',
+        bgcolor: over ? 'rgba(156,39,176,0.06)' : 'transparent',
+        transition: 'all 0.15s',
+      }}
+    >
+      Drop a Dialog component here
+    </Box>
+  )
+}
+
+// ── Zone-level context menu ───────────────────────────────────────────────────
+
+function ZoneContextMenu({ anchor, onClose, onAddDialog, onDeleteAll, hasDialogs }) {
+  return (
+    <Menu
+      open={Boolean(anchor)}
+      anchorReference='anchorPosition'
+      anchorPosition={anchor ? { top: anchor.mouseY, left: anchor.mouseX } : undefined}
+      onClose={onClose}
+      slotProps={{ paper: { sx: { bgcolor: '#1e1e2e', border: '1px solid #333', minWidth: 180 } } }}
+    >
+      <MenuItem onClick={() => { onAddDialog(); onClose() }}
+        sx={{ color: '#ce93d8', '&:hover': { bgcolor: 'rgba(156,39,176,0.12)' } }}>
+        <ListItemIcon><AddOutlined sx={{ fontSize: 16, color: '#ce93d8' }} /></ListItemIcon>
+        <ListItemText primaryTypographyProps={{ fontSize: 13 }}>Add Dialog</ListItemText>
+      </MenuItem>
+
+      {hasDialogs && [
+        <Divider key='div' sx={{ borderColor: '#333', my: 0.5 }} />,
+        <MenuItem key='del-all' onClick={() => { onDeleteAll(); onClose() }}
+          sx={{ color: '#f44336', '&:hover': { bgcolor: 'rgba(244,67,54,0.12)' } }}>
+          <ListItemIcon><DeleteOutlined sx={{ fontSize: 16, color: '#f44336' }} /></ListItemIcon>
+          <ListItemText primaryTypographyProps={{ fontSize: 13 }}>Delete All Dialogs</ListItemText>
+        </MenuItem>
+      ]}
+    </Menu>
+  )
+}
+
+// ── Dialog card context menu ──────────────────────────────────────────────────
+
+function CardContextMenu({ anchor, onClose, onDelete }) {
+  return (
+    <Menu
+      open={Boolean(anchor)}
+      anchorReference='anchorPosition'
+      anchorPosition={anchor ? { top: anchor.mouseY, left: anchor.mouseX } : undefined}
+      onClose={onClose}
+      slotProps={{ paper: { sx: { bgcolor: '#1e1e2e', border: '1px solid #333', minWidth: 160 } } }}
+    >
+      <MenuItem onClick={() => { onDelete(); onClose() }}
+        sx={{ color: '#f44336', '&:hover': { bgcolor: 'rgba(244,67,54,0.12)' } }}>
+        <ListItemIcon><DeleteOutlined sx={{ fontSize: 16, color: '#f44336' }} /></ListItemIcon>
+        <ListItemText primaryTypographyProps={{ fontSize: 13 }}>Delete Dialog</ListItemText>
+      </MenuItem>
+    </Menu>
+  )
+}
+
+// ── Main component ────────────────────────────────────────────────────────────
+
+export default function DialogsZone({ dialogs = [], viewerContext }) {
+  const isEditMode = viewerContext?.isEditMode
+  const builderContext = viewerContext?.builderContext
+
+  // Edit-mode: collapsible
+  const [open, setOpen] = useState(true)
+
+  // Context menus
+  const [zoneMenuAnchor, setZoneMenuAnchor]   = useState(null)
+  const [cardMenuAnchor, setCardMenuAnchor]   = useState(null)
+  const [cardMenuDialogId, setCardMenuDialogId] = useState(null)
+
+  // ── PRODUCTION MODE — just mount all dialog renderers invisibly ───────────
+  if (!isEditMode) {
+    return (
+      <>
+        {dialogs.map(dialog => (
+          <DialogRenderer key={dialog.id} node={dialog} viewerContext={viewerContext} />
+        ))}
+      </>
+    )
+  }
+
+  // ── EDIT MODE ─────────────────────────────────────────────────────────────
+  const { setSchema } = builderContext ?? {}
+
+  // Add a blank dialog
+  const handleAddDialog = useCallback(() => {
+    if (!setSchema) return
+    const newNode = createNode('dialog', {})
+    setSchema(prev => ({
+      ...prev,
+      dialogs: [...(prev.dialogs ?? []), newNode],
+    }))
+    builderContext.setSelectedId(newNode.id)
+  }, [setSchema, builderContext])
+
+  // Delete a single dialog by id
+  const handleDeleteDialog = useCallback((dialogId) => {
+    if (!setSchema) return
+    setSchema(prev => ({
+      ...prev,
+      dialogs: (prev.dialogs ?? []).filter(d => d.id !== dialogId),
+    }))
+    if (builderContext?.selectedId === dialogId) {
+      builderContext.setSelectedId(null)
+    }
+  }, [setSchema, builderContext])
+
+  // Delete all dialogs
+  const handleDeleteAll = useCallback(() => {
+    if (!setSchema) return
+    setSchema(prev => ({ ...prev, dialogs: [] }))
+    builderContext?.setSelectedId(null)
+  }, [setSchema, builderContext])
+
+  // Drop handler
+  const handleDrop = (e) => {
+    if (!setSchema) return
+    const componentData = e.dataTransfer.getData('application/builder-component')
+    if (!componentData) return
+    try {
+      const component = JSON.parse(componentData)
+      if (component.type !== 'dialog') return
+      const newNode = createNode('dialog', component.value ? JSON.parse(component.value) : {})
+      setSchema(prev => ({
+        ...prev,
+        dialogs: [...(prev.dialogs ?? []), newNode],
+      }))
+      builderContext.setSelectedId(newNode.id)
+    } catch (err) {
+      console.error('[DialogsZone] drop error', err)
+    }
+  }
+
+  // Zone header right-click
+  const handleZoneContextMenu = (e) => {
+    e.preventDefault()
+    setZoneMenuAnchor({ mouseX: e.clientX, mouseY: e.clientY })
+  }
+
+  // Dialog card right-click
+  const handleCardContextMenu = (e, dialogId) => {
+    e.preventDefault()
+    e.stopPropagation()
+    setCardMenuDialogId(dialogId)
+    setCardMenuAnchor({ mouseX: e.clientX, mouseY: e.clientY })
+  }
+
+  return (
+    <Box
+      sx={{
+        borderTop: '2px solid #2a3a4a',
+        bgcolor: '#0f141c',
+        flexShrink: 0,
+      }}
+    >
+      {/* Header — right-click for context menu */}
+      <Box
+        display='flex' alignItems='center' justifyContent='space-between'
+        px={2} py={0.8}
+        onClick={() => setOpen(p => !p)}
+        onContextMenu={handleZoneContextMenu}
+        sx={{ cursor: 'pointer', userSelect: 'none', '&:hover': { bgcolor: '#141a24' } }}
+      >
+        <Box display='flex' alignItems='center' gap={1}>
+          <OpenInBrowserOutlined sx={{ fontSize: 14, color: '#9c27b0' }} />
+          <Typography sx={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: '#9c27b0' }}>
+            Dialogs
+          </Typography>
+          <Chip
+            label={dialogs.length}
+            size='small'
+            sx={{ height: 16, fontSize: 10, bgcolor: '#2a1540', color: '#ce93d8', '.MuiChip-label': { px: 0.8 } }}
+          />
+        </Box>
+        {open
+          ? <KeyboardArrowDown sx={{ fontSize: 16, color: '#555' }} />
+          : <KeyboardArrowUp   sx={{ fontSize: 16, color: '#555' }} />}
+      </Box>
+
+      {/* Content */}
+      {open && (
+        <Box px={2} py={1.5} display='flex' flexDirection='column' gap={1}>
+          {/* Existing dialog cards — each gets its own right-click menu */}
+          {dialogs.length > 0 && (
+            <Box display='flex' flexWrap='wrap' gap={1} mb={1}>
+              {dialogs.map(dialog => (
+                <Box
+                  key={dialog.id}
+                  onContextMenu={e => handleCardContextMenu(e, dialog.id)}
+                >
+                  <DialogRenderer node={dialog} viewerContext={viewerContext} />
+                </Box>
+              ))}
+            </Box>
+          )}
+
+          {/* Drop zone */}
+          <EditDropZone onDrop={handleDrop} />
+        </Box>
+      )}
+
+      {/* Zone-level context menu */}
+      <ZoneContextMenu
+        anchor={zoneMenuAnchor}
+        onClose={() => setZoneMenuAnchor(null)}
+        onAddDialog={handleAddDialog}
+        onDeleteAll={handleDeleteAll}
+        hasDialogs={dialogs.length > 0}
+      />
+
+      {/* Per-card context menu */}
+      <CardContextMenu
+        anchor={cardMenuAnchor}
+        onClose={() => { setCardMenuAnchor(null); setCardMenuDialogId(null) }}
+        onDelete={() => cardMenuDialogId && handleDeleteDialog(cardMenuDialogId)}
+      />
+    </Box>
+  )
+}

package/src/views/builder/viewer/FieldLabel.jsx

@@ -0,0 +1,106 @@
+import { Box, Typography } from '@mui/material'
+import AdornedLabel from './AdornedLabel'
+
+/**
+ * FieldLabel — renders an external label for any input component.
+ *
+ * labelPosition : 'top' | 'left' | 'right' | 'none'
+ *
+ * Styling props (all optional, MUI sx-compatible values):
+ *   labelFontSize    — e.g. '0.75rem', 12
+ *   labelFontWeight  — e.g. 600, 'bold'
+ *   labelColor       — e.g. '#333', 'primary.main'  (overrides default text.secondary)
+ *   labelFontStyle   — e.g. 'italic'
+ *   labelLetterSpacing
+ *
+ * Adornment props forwarded to AdornedLabel:
+ *   prefix / suffix   — icon name or text
+ *   iconSize / iconColor / prefixSx / suffixSx
+ */
+export default function FieldLabel({
+  label,
+  required,
+  labelPosition = 'top',
+  error,
+  // label text styling
+  labelFontSize,
+  labelFontWeight,
+  labelColor,
+  labelFontStyle,
+  labelLetterSpacing,
+  // adornment
+  prefix,
+  suffix,
+  iconSize,
+  iconColor,
+  prefixSx,
+  suffixSx,
+  iconGap,
+  children,
+}) {
+  if (!label || labelPosition === 'none') return children
+
+  const isInline = labelPosition === 'left' || labelPosition === 'right'
+
+  const labelEl = (
+    <Typography
+      component='span'
+      sx={{
+        display:       'flex',
+        alignItems:    'center',
+        gap:           0.5,
+        fontSize:      labelFontSize    ?? '0.8125rem',
+        fontWeight:    labelFontWeight  ?? 500,
+        fontStyle:     labelFontStyle,
+        letterSpacing: labelLetterSpacing,
+        lineHeight:    1.5,
+        color:         error ? 'error.main' : (labelColor ?? 'text.secondary'),
+        userSelect:    'none',
+        whiteSpace:    'nowrap',
+        ...(isInline ? { flexShrink: 0, pt: '8px' } : { mb: 0.5 }),
+      }}
+    >
+      <AdornedLabel
+        prefix={prefix}
+        suffix={suffix}
+        iconSize={iconSize  ?? 'small'}
+        iconColor={iconColor}
+        prefixSx={prefixSx}
+        suffixSx={suffixSx}
+        gap={iconGap ?? 0.5}
+      >
+        {label}
+      </AdornedLabel>
+      {required && (
+        <Box component='span' sx={{ color: 'error.main', ml: 0.25, flexShrink: 0 }}>
+          *
+        </Box>
+      )}
+    </Typography>
+  )
+
+  if (labelPosition === 'left') {
+    return (
+      <Box sx={{ display: 'flex', alignItems: 'flex-start', gap: 1.5, width: '100%' }}>
+        {labelEl}
+        <Box sx={{ flex: 1, minWidth: 0 }}>{children}</Box>
+      </Box>
+    )
+  }
+
+  if (labelPosition === 'right') {
+    return (
+      <Box sx={{ display: 'flex', alignItems: 'flex-start', gap: 1.5, width: '100%' }}>
+        <Box sx={{ flex: 1, minWidth: 0 }}>{children}</Box>
+        {labelEl}
+      </Box>
+    )
+  }
+
+  return (
+    <Box sx={{ display: 'flex', flexDirection: 'column', width: '100%' }}>
+      {labelEl}
+      {children}
+    </Box>
+  )
+}