@kenpan/zds-r8f3v1 0.1.0

package/dist/components/forms/InputDropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputDropdown.js","sources":["../../../src/components/forms/InputDropdown.tsx"],"sourcesContent":["// src/components/zenith/forms/InputDropdown.tsx - InputDropdown\nimport * as React from 'react'\nimport Select from '@mui/material/Select'\nimport MuiMenuItem from '@mui/material/MenuItem'\nimport FormControl from '@mui/material/FormControl'\nimport OutlinedInput from '@mui/material/OutlinedInput'\nimport Box from '@mui/material/Box'\nimport Typography from '@mui/material/Typography'\nimport type { SxProps, Theme } from '@mui/material/styles'\nimport type { ElementType, RefObject, SyntheticEvent, ReactNode, ChangeEvent } from 'react'\nimport { HelpIcon, type HelpIconTooltipPlacement } from '../HelpIcon'\nimport { Icon, type SupportedIconName } from '../Icon'\nimport { Avatar, type AvatarProps } from '../avatar'\nimport { Checkbox, type CheckboxProps } from './Checkbox'\nimport { Tooltip, type TooltipProps } from '../Tooltip'\nimport { BadgePillColor, type BadgeColor } from '../badge/BadgePillColor'\n\nexport type InputDropdownSize = 'xs' | 'sm' | 'md'\nexport type InputDropdownTypeLeading = 'Icon Leading' | 'Avatar Leading' | 'Dot Leading'\nexport type InputDropdownIconType = 'default' | 'countryIcon' | 'paymentIcon'\nexport type InputDropdownTooltipPlacement = \n  | 'None' | 'Top Left' | 'Top Right' | 'Top Center' \n  | 'Bottom Left' | 'Bottom Right' | 'Bottom Center' | 'Left' | 'Right'\nexport type InputDropdownTooltipVariant = 'light' | 'dark'\n\n/** Country icon code type */\nexport type CountryIconId = string\n\n/** Payment icon ID type */\nexport type PaymentIconId = string\n\n/**\n * Menu item for InputDropdown\n */\nexport interface InputDropdownMenuItem {\n  /** Unique identifier for the menu item */\n  id: string\n  /** Display label/content for the menu item */\n  label: string\n  /** Optional value (defaults to id if not provided) */\n  value?: string\n  /** Supporting text shown below the label */\n  supportingText?: string\n  /** Whether the item is disabled */\n  disabled?: boolean\n  /** Icon name for iconLeading type */\n  iconId?: SupportedIconName\n  /** Custom icon element */\n  icon?: ReactNode\n  /** Country icon ID for countryIcon type */\n  countryIconId?: CountryIconId\n  /** Payment icon ID for paymentIcon type */\n  paymentIconId?: PaymentIconId\n  /** Avatar props for avatarLeading type */\n  avatarProps?: AvatarProps\n  /** Dot color for dotLeading type */\n  dotColor?: string\n  /** Whether text is stacked (supportingText below label) */\n  stacked?: boolean\n  /** Badge props */\n  badgeProps?: {\n    label: string\n    color?: BadgeColor\n    size?: 'xs' | 'sm' | 'md' | 'lg'\n  }\n}\n\nexport interface InputDropdownProps {\n  /**\n   * Menu items for the dropdown\n   */\n  menuItems: InputDropdownMenuItem[]\n\n  /**\n   * Current selected value\n   */\n  value: string\n\n  /**\n   * Callback when value changes\n   */\n  onChange: (event: SyntheticEvent<Element, Event>, newValue: string) => void\n\n  /**\n   * Placeholder text\n   */\n  placeholder?: string\n\n  /**\n   * Label text\n   */\n  label?: string\n\n  /**\n   * Whether the input is required\n   */\n  required?: boolean\n\n  /**\n   * Size variant\n   * @default 'md'\n   */\n  size?: InputDropdownSize\n\n  /**\n   * Whether the input is in destructive/error state\n   */\n  destructive?: boolean\n\n  /**\n   * Whether the input is disabled\n   */\n  disabled?: boolean\n\n  /**\n   * Whether the input is read-only\n   */\n  readOnly?: boolean\n\n  /**\n   * Width of the input\n   */\n  inputWidth?: string | number\n\n  /**\n   * Type of leading element in menu items\n   */\n  typeLeading?: InputDropdownTypeLeading\n\n  /**\n   * Icon type for leading icons\n   * @default 'default'\n   */\n  iconType?: InputDropdownIconType\n\n  /**\n   * Default icon ID used in the input when no value is selected\n   */\n  defaultIconId?: SupportedIconName\n\n  /**\n   * Placeholder icon ID\n   */\n  placeholderIconId?: SupportedIconName\n\n  /**\n   * Custom leading icon element\n   */\n  iconLeadingIcon?: ReactNode\n\n  /**\n   * Avatar placeholder props\n   */\n  avatarPlaceholderProps?: AvatarProps\n\n  /**\n   * Show selected icon (check mark) in the selected item\n   * @default true\n   */\n  isSelectedIcon?: boolean\n\n  /**\n   * Hint text shown below the input\n   */\n  hintText?: string\n\n  /**\n   * Show hint checkbox\n   */\n  hintCheckbox?: boolean\n\n  /**\n   * Props for the hint checkbox\n   */\n  hintCheckboxProps?: CheckboxProps\n\n  /**\n   * Checkbox checked state\n   */\n  checked?: boolean\n\n  /**\n   * Callback when checkbox changes\n   */\n  onChangeCheckbox?: (event: ChangeEvent<HTMLInputElement>) => void\n\n  /**\n   * Show help icon next to input\n   */\n  helpIcon?: boolean\n\n  /**\n   * Input tooltip label\n   */\n  inputTooltipLabel?: string\n\n  /**\n   * Input tooltip description\n   */\n  inputTooltipDescription?: ReactNode\n\n  /**\n   * Input tooltip placement\n   */\n  inputTooltipPlacement?: InputDropdownTooltipPlacement\n\n  /**\n   * Input tooltip variant\n   */\n  inputTooltipVariant?: InputDropdownTooltipVariant\n\n  /**\n   * Label tooltip label\n   */\n  labelTooltipLabel?: string\n\n  /**\n   * Label tooltip description\n   */\n  labelTooltipDescription?: ReactNode\n\n  /**\n   * Label tooltip placement\n   */\n  labelTooltipPlacement?: InputDropdownTooltipPlacement\n\n  /**\n   * Label tooltip variant\n   */\n  labelTooltipVariant?: InputDropdownTooltipVariant\n\n  /**\n   * Show reset to default button\n   */\n  showResetToDefault?: boolean\n\n  /**\n   * Callback when reset to default is clicked\n   */\n  onResetToDefaultClick?: () => void\n\n  /**\n   * Props for reset to default tooltip\n   */\n  resetToDefaultTooltipProps?: Omit<TooltipProps, 'children'>\n\n  /**\n   * Menu max height\n   */\n  menuMaxHeight?: string | number\n\n  /**\n   * Menu width\n   */\n  menuWidth?: string | number\n\n  /**\n   * Custom component type\n   */\n  component?: ElementType<any>\n\n  /**\n   * Ref\n   */\n  ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null\n\n  /**\n   * Additional CSS styles\n   */\n  sx?: SxProps<Theme>\n}\n\n/**\n * Design token colors - from Figma specs\n */\nconst tokens = {\n  // Background colors\n  surfaceContainerLowest: '#FFFFFF', // Default/Filled/Placeholder/Focused/Open\n  surfaceContainerLow: '#FCFCFD', // Read-only\n  onSurfaceOpacity4: 'rgba(54, 65, 82, 0.04)', // #3641520A - Disabled\n  \n  // Border colors\n  outlineVariant: '#D4DCE7', // Default border\n  outline: '#8C96A2', // Hover border\n  primary: '#1570EF', // Focused border\n  error: '#D92D20', // Destructive border\n  \n  // Text colors\n  onSurface: '#364152', // Primary text\n  onSurfaceVariant: '#697586', // Secondary text / placeholder\n  onSurfaceOpacity38: 'rgba(54, 65, 82, 0.38)', // Disabled text #36415261\n}\n\n/**\n * Helper to get onSurfaceOpacity8 token with fallbacks\n */\nconst getOnSurfaceOpacity8 = (theme: Theme): string => {\n  return (\n    theme.palette.dsTokens?.stateLayers?.['state-layers-onsurface-opacity-8'] ??\n    theme.palette.buttonTokens?.stateLayers?.onSurfaceOpacity8 ??\n    'rgba(54, 65, 82, 0.08)'\n  )\n}\n\n/**\n * Map tooltip placement to HelpIcon placement\n */\nconst mapTooltipPlacement = (\n  placement?: InputDropdownTooltipPlacement\n): HelpIconTooltipPlacement | undefined => {\n  if (!placement || placement === 'None') return undefined\n  const map: Record<string, HelpIconTooltipPlacement> = {\n    'Top Left': 'top-left',\n    'Top Right': 'top-right',\n    'Top Center': 'top-center',\n    'Bottom Left': 'bottom-left',\n    'Bottom Right': 'bottom-right',\n    'Bottom Center': 'bottom-center',\n    'Left': 'left',\n    'Right': 'right',\n  }\n  return map[placement] ?? 'top-center'\n}\n\n/**\n * InputDropdown - A dropdown select component for forms\n * \n * UI component that uses MUI TextField component and makes it a dropdown. \n * It allows users to select an option from a list, being used in forms and dialogs.\n */\nexport const InputDropdown = React.forwardRef<HTMLDivElement, InputDropdownProps>(\n  function InputDropdown(props, ref) {\n    const {\n      menuItems,\n      value,\n      onChange,\n      placeholder = '',\n      label,\n      required = false,\n      size = 'md',\n      destructive = false,\n      disabled = false,\n      readOnly = false,\n      inputWidth = '100%',\n      typeLeading,\n      iconType = 'default',\n      defaultIconId,\n      placeholderIconId: _placeholderIconId,\n      iconLeadingIcon,\n      avatarPlaceholderProps,\n      isSelectedIcon = true,\n      hintText,\n      hintCheckbox = false,\n      hintCheckboxProps,\n      checked,\n      onChangeCheckbox,\n      helpIcon = false,\n      inputTooltipLabel,\n      inputTooltipDescription,\n      inputTooltipPlacement,\n      inputTooltipVariant: _inputTooltipVariant = 'light',\n      labelTooltipLabel,\n      labelTooltipDescription,\n      labelTooltipPlacement,\n      labelTooltipVariant: _labelTooltipVariant = 'light',\n      showResetToDefault = false,\n      onResetToDefaultClick,\n      resetToDefaultTooltipProps,\n      menuMaxHeight = 300,\n      menuWidth,\n      sx,\n    } = props\n\n    const isXs = size === 'xs'\n    const isSm = size === 'sm'\n    const isMd = size === 'md'\n\n    // Ref to control Select blur on menu close\n    const selectRef = React.useRef<HTMLDivElement>(null)\n\n    // Size-based input dimensions from design specs\n    // md: paddingTop: 10, paddingBottom: 10 (no explicit horizontal, use 14)\n    // sm: paddingTop: 8, paddingRight: 12, paddingBottom: 8, paddingLeft: 12\n    // xs: paddingTop: 8, paddingRight: 12, paddingBottom: 8, paddingLeft: 12, height: 36 fixed\n    const inputHeight = isXs ? 36 : undefined // only xs has fixed height\n    const inputPaddingY = isMd ? 10 : 8\n    const inputPaddingX = isMd ? 14 : 12\n    const inputTypography = 'text-md-regular'\n    const labelVariant = 'text-sm-medium'\n    const hintVariant = 'text-sm-regular'\n\n    // Handle change\n    const handleChange = (event: any) => {\n      const newValue = event.target.value as string\n      onChange(event, newValue)\n    }\n\n    // Handle menu close - blur the select to return to default state\n    const handleMenuClose = () => {\n      // Use setTimeout to ensure blur happens after menu close animation\n      setTimeout(() => {\n        // Blur any focused element within the select\n        if (selectRef.current) {\n          const focusedElement = selectRef.current.querySelector('[role=\"combobox\"]') as HTMLElement\n          if (focusedElement) {\n            focusedElement.blur()\n          }\n        }\n        // Also try to blur the active element if it's within our component\n        if (document.activeElement instanceof HTMLElement) {\n          document.activeElement.blur()\n        }\n      }, 0)\n    }\n\n    // Render leading element in menu item\n    const renderLeadingElement = (item: InputDropdownMenuItem) => {\n      if (!typeLeading) return null\n\n      if (typeLeading === 'Avatar Leading') {\n        const avatarProps = item.avatarProps || avatarPlaceholderProps\n        if (avatarProps) {\n          return (\n            <Box sx={{ display: 'flex', alignItems: 'center', mr: 1, flexShrink: 0 }}>\n              <Avatar {...avatarProps} size=\"xs\" shape=\"circle\" />\n            </Box>\n          )\n        }\n        return null\n      }\n\n      if (typeLeading === 'Dot Leading') {\n        return (\n          <Box sx={{ display: 'flex', alignItems: 'center', mr: 1, flexShrink: 0 }}>\n            <Box\n              sx={{\n                width: 8,\n                height: 8,\n                borderRadius: '50%',\n                backgroundColor: item.dotColor || '#17B26A',\n              }}\n            />\n          </Box>\n        )\n      }\n\n      if (typeLeading === 'Icon Leading') {\n        // Country icon - load from assets\n        if (iconType === 'countryIcon' && item.countryIconId) {\n          const countryCode = item.countryIconId.toUpperCase()\n          return (\n            <Box sx={{ display: 'flex', alignItems: 'center', mr: 1, flexShrink: 0 }}>\n              <Box\n                component=\"img\"\n                src={`/src/assets/misc-icons/country/${countryCode}.svg`}\n                alt={countryCode}\n                sx={{ width: 20, height: 20, objectFit: 'contain' }}\n                onError={(e: React.SyntheticEvent<HTMLImageElement>) => {\n                  e.currentTarget.style.display = 'none'\n                }}\n              />\n            </Box>\n          )\n        }\n\n        // Payment icon - load from assets\n        if (iconType === 'paymentIcon' && item.paymentIconId) {\n          return (\n            <Box sx={{ display: 'flex', alignItems: 'center', mr: 1, flexShrink: 0 }}>\n              <Box\n                component=\"img\"\n                src={`/src/assets/misc-icons/payment/${item.paymentIconId}.svg`}\n                alt={item.paymentIconId}\n                sx={{ width: 20, height: 20, objectFit: 'contain' }}\n                onError={(e: React.SyntheticEvent<HTMLImageElement>) => {\n                  e.currentTarget.style.display = 'none'\n                }}\n              />\n            </Box>\n          )\n        }\n\n        // Default icon\n        const iconId = item.iconId || defaultIconId\n        const iconElement = item.icon || iconLeadingIcon\n        if (iconId) {\n          return (\n            <Box sx={{ display: 'flex', alignItems: 'center', mr: 1, flexShrink: 0 }}>\n              <Icon name={iconId} size={20} />\n            </Box>\n          )\n        }\n        if (iconElement) {\n          return (\n            <Box sx={{ display: 'flex', alignItems: 'center', mr: 1, flexShrink: 0 }}>\n              {iconElement}\n            </Box>\n          )\n        }\n      }\n\n      return null\n    }\n\n    // Render value in input field\n    const renderValue = (selected: unknown) => {\n      const selectedVal = selected as string\n      if (!selectedVal) {\n        return (\n          <Typography \n            variant={inputTypography} \n            sx={{ \n              color: disabled ? tokens.onSurfaceOpacity38 : tokens.onSurfaceVariant,\n            }}\n          >\n            {placeholder}\n          </Typography>\n        )\n      }\n\n      const item = menuItems.find((i) => (i.value ?? i.id) === selectedVal)\n      if (!item) {\n        return (\n          <Typography \n            variant={inputTypography} \n            sx={{ \n              color: disabled ? tokens.onSurfaceOpacity38 : tokens.onSurfaceVariant,\n            }}\n          >\n            {placeholder}\n          </Typography>\n        )\n      }\n\n      return (\n        <Box sx={{ display: 'flex', alignItems: 'center' }}>\n          {renderLeadingElement(item)}\n          <Typography \n            variant={inputTypography}\n            sx={{\n              color: disabled ? tokens.onSurfaceOpacity38 : tokens.onSurface,\n            }}\n          >\n            {item.label}\n          </Typography>\n        </Box>\n      )\n    }\n\n    return (\n      <Box\n        ref={ref}\n        sx={[\n          {\n            width: inputWidth,\n            display: 'flex',\n            flexDirection: 'column',\n            gap: 0.75, // 6px gap between elements (label, input, hint)\n          },\n          ...(Array.isArray(sx) ? sx : sx ? [sx] : []),\n        ]}\n      >\n        {/* Label */}\n        {label && (\n          <Box\n            sx={{\n              display: 'flex',\n              alignItems: 'center',\n              gap: 0.5, // 4px gap between label and help icon\n            }}\n          >\n            <Typography variant={labelVariant} sx={{ color: 'text.primary' }}>\n              {label}\n              {required && (\n                <Typography component=\"span\" sx={{ color: 'error.main', ml: 0.5 }}>\n                  *\n                </Typography>\n              )}\n            </Typography>\n            {labelTooltipLabel && (\n              <HelpIcon\n                title={labelTooltipLabel}\n                supportingText={\n                  typeof labelTooltipDescription === 'string'\n                    ? labelTooltipDescription\n                    : undefined\n                }\n                tooltipPlacement={mapTooltipPlacement(labelTooltipPlacement)}\n              />\n            )}\n          </Box>\n        )}\n\n        {/* Select Input */}\n        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>\n          <FormControl\n            fullWidth\n            error={destructive}\n            disabled={disabled}\n            sx={() => ({\n              '& .MuiOutlinedInput-root': {\n                // xs has fixed height 36px, others are hug content\n                ...(inputHeight && { height: inputHeight }),\n                minHeight: isXs ? 36 : isSm ? 40 : 44,\n                borderRadius: 2, // 8px\n                // Background colors based on state\n                backgroundColor: disabled\n                  ? tokens.onSurfaceOpacity4 // Disabled: state layers/onSurface/opacity-4\n                  : readOnly\n                  ? tokens.surfaceContainerLow // Read-only: color/surfaceContainerLow\n                  : tokens.surfaceContainerLowest, // Default/Filled/Placeholder/Focused: color/surfaceContainerLowest\n                cursor: readOnly ? 'default' : 'pointer',\n                '& fieldset': {\n                  borderColor: destructive\n                    ? tokens.error\n                    : tokens.outlineVariant, // color/outlineVariant for default border\n                  borderWidth: 1,\n                },\n                '&:hover fieldset': {\n                  borderColor: destructive\n                    ? tokens.error\n                    : disabled || readOnly\n                    ? tokens.outlineVariant\n                    : tokens.outline, // color/outline for hover\n                },\n                '&.Mui-focused fieldset': {\n                  borderColor: destructive ? tokens.error : tokens.primary,\n                  // Use box-shadow inset to add extra 1px border effect without layout shift\n                  boxShadow: `inset 0 0 0 1px ${destructive ? tokens.error : tokens.primary}`,\n                },\n                '& .MuiSelect-select': {\n                  // Padding: same on all sides, icon margin handles right spacing\n                  padding: `${inputPaddingY}px ${inputPaddingX}px`,\n                  // Right padding needs extra space for the dropdown icon (20px icon + gap)\n                  paddingRight: `${inputPaddingX + 28}px !important`,\n                  typography: inputTypography,\n                  cursor: readOnly ? 'default' : 'pointer',\n                  display: 'flex',\n                  alignItems: 'center',\n                  gap: '8px', // Content gap from design: 8px\n                },\n                // Position the icon correctly with proper right margin\n                '& .MuiSelect-icon': {\n                  right: isMd ? 14 : 12, // Same as left padding\n                  // Allow clicks to pass through to Select\n                  pointerEvents: 'none',\n                },\n              },\n            })}\n          >\n            <Select\n              ref={selectRef}\n              value={value}\n              onChange={handleChange}\n              onClose={handleMenuClose}\n              input={<OutlinedInput />}\n              renderValue={renderValue}\n              disabled={disabled || readOnly}\n              displayEmpty\n              IconComponent={() => (\n                <Box\n                  sx={{\n                    display: 'flex',\n                    alignItems: 'center',\n                    gap: 0.5,\n                    // Right margin matches left padding (md: 14px, sm/xs: 12px)\n                    right: isMd ? 14 : 12,\n                    position: 'absolute',\n                    top: 0,\n                    bottom: 0,\n                    // Allow clicks to pass through to the Select underneath\n                    pointerEvents: 'none',\n                  }}\n                >\n                  {showResetToDefault && value && (\n                    <Tooltip\n                      title=\"Reset to default\"\n                      {...resetToDefaultTooltipProps}\n                    >\n                      <Box\n                        component=\"span\"\n                        onClick={(e) => {\n                          e.stopPropagation()\n                          onResetToDefaultClick?.()\n                        }}\n                        sx={{\n                          display: 'inline-flex',\n                          alignItems: 'center',\n                          cursor: 'pointer',\n                          pointerEvents: 'auto',\n                          '&:hover': { opacity: 0.7 },\n                        }}\n                      >\n                        <Icon name=\"XClose\" size={16} color=\"text.secondary\" />\n                      </Box>\n                    </Tooltip>\n                  )}\n                  <Icon\n                    name=\"ChevronDown\"\n                    size={20}\n                    sx={{\n                      color: disabled ? tokens.onSurfaceOpacity38 : tokens.onSurfaceVariant,\n                    }}\n                  />\n                </Box>\n              )}\n              MenuProps={{\n                // Anchor origin - menu appears below the input\n                anchorOrigin: {\n                  vertical: 'bottom',\n                  horizontal: 'left',\n                },\n                transformOrigin: {\n                  vertical: 'top',\n                  horizontal: 'left',\n                },\n                // Smooth open/close transitions\n                transitionDuration: {\n                  enter: 200,\n                  exit: 150,\n                },\n                PaperProps: {\n                  sx: (theme) => ({\n                    marginTop: '4px', // Small gap between input and menu\n                    borderRadius: 2, // 8px radius from design\n                    border: '1px solid',\n                    borderColor: tokens.outlineVariant,\n                    backgroundColor: tokens.surfaceContainerLowest,\n                    boxShadow: theme.shadows[8], // Subtle shadow\n                    maxHeight: menuMaxHeight,\n                    // Menu width matches input width by default\n                    ...(menuWidth ? { width: menuWidth } : { minWidth: '100%' }),\n                    // Menu items container has 4px padding top/bottom, 0 horizontal\n                    '& .MuiList-root': {\n                      paddingTop: '4px',\n                      paddingBottom: '4px',\n                      paddingLeft: 0,\n                      paddingRight: 0,\n                    },\n                  }),\n                },\n              }}\n            >\n              {menuItems.map((item) => {\n                const itemValue = item.value ?? item.id\n                const isSelected = itemValue === value\n                const isStacked = item.stacked ?? false\n\n                return (\n                  <MuiMenuItem\n                    key={item.id}\n                    value={itemValue}\n                    disabled={item.disabled}\n                    sx={(theme) => ({\n                      padding: 0,\n                      minHeight: 'auto',\n                      '&:hover': {\n                        backgroundColor: 'transparent',\n                        '& > div': {\n                          backgroundColor: getOnSurfaceOpacity8(theme),\n                        },\n                      },\n                      '&.Mui-selected': {\n                        backgroundColor: 'transparent',\n                        '&:hover': {\n                          backgroundColor: 'transparent',\n                          '& > div': {\n                            backgroundColor: getOnSurfaceOpacity8(theme),\n                          },\n                        },\n                      },\n                    })}\n                  >\n                    <Box\n                      sx={(theme) => ({\n                        display: 'flex',\n                        alignItems: isStacked ? 'flex-start' : 'center',\n                        gap: '8px', // 8px gap between elements in menu item\n                        width: '100%',\n                        // Menu item inner padding: 10px top/right/bottom, 8px left\n                        padding: '10px 10px 10px 8px',\n                        margin: '0 6px', // 6px horizontal margin for hover background\n                        borderRadius: '6px', // 6px radius for hover state\n                        transition: theme.transitions.create('background-color', {\n                          duration: theme.transitions.duration.shorter,\n                        }),\n                      })}\n                    >\n                      {/* Leading element */}\n                      {renderLeadingElement(item)}\n\n                      {/* Content */}\n                      <Box\n                        sx={{\n                          display: 'flex',\n                          flexDirection: isStacked ? 'column' : 'row',\n                          alignItems: isStacked ? 'flex-start' : 'center',\n                          gap: isStacked ? 0.5 : 1,\n                          flex: 1,\n                          minWidth: 0,\n                        }}\n                      >\n                        <Typography\n                          variant=\"text-md-regular\"\n                          sx={{\n                            color: item.disabled\n                              ? tokens.onSurfaceOpacity38\n                              : tokens.onSurface,\n                          }}\n                        >\n                          {item.label}\n                        </Typography>\n                        {item.supportingText && (\n                          <Typography\n                            variant=\"text-sm-regular\"\n                            sx={{\n                              color: item.disabled\n                                ? tokens.onSurfaceOpacity38\n                                : tokens.onSurfaceVariant,\n                            }}\n                          >\n                            {item.supportingText}\n                          </Typography>\n                        )}\n                      </Box>\n\n                      {/* Badge */}\n                      {item.badgeProps && (\n                        <Box sx={{ flexShrink: 0 }}>\n                          <BadgePillColor\n                            label={item.badgeProps.label}\n                            color={item.badgeProps.color || 'gray'}\n                            size={item.badgeProps.size || 'xs'}\n                          />\n                        </Box>\n                      )}\n\n                      {/* Selected icon */}\n                      {isSelectedIcon && isSelected && (\n                        <Box sx={{ flexShrink: 0, ml: 'auto' }}>\n                          <Icon name=\"Check\" size={16} color=\"primary.main\" />\n                        </Box>\n                      )}\n                    </Box>\n                  </MuiMenuItem>\n                )\n              })}\n            </Select>\n          </FormControl>\n\n          {/* Help icon */}\n          {helpIcon && inputTooltipLabel && (\n            <HelpIcon\n              title={inputTooltipLabel}\n              supportingText={\n                typeof inputTooltipDescription === 'string'\n                  ? inputTooltipDescription\n                  : undefined\n              }\n              tooltipPlacement={mapTooltipPlacement(inputTooltipPlacement)}\n            />\n          )}\n        </Box>\n\n        {/* Hint Text with optional checkbox */}\n        {(hintText || hintCheckbox) && (\n          <Box\n            sx={{\n              display: 'flex',\n              alignItems: 'flex-start',\n              gap: 1,\n            }}\n          >\n            {hintCheckbox && (\n              <Checkbox\n                checked={checked}\n                onChange={onChangeCheckbox}\n                size=\"sm\"\n                {...hintCheckboxProps}\n              />\n            )}\n            {hintText && (\n              <Typography\n                variant={hintVariant}\n                sx={{\n                  color: destructive ? tokens.error : tokens.onSurfaceVariant,\n                }}\n              >\n                {hintText}\n              </Typography>\n            )}\n          </Box>\n        )}\n      </Box>\n    )\n  }\n)\n\nexport default InputDropdown\n\n"],"names":["InputDropdown","MuiMenuItem"],"mappings":"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"}

package/dist/components/forms/InputDropdownMultiSelectWithCount.d.ts

@@ -0,0 +1,28 @@
+import { MultiSelectInputDropdownProps } from './MultiSelectInputDropdown';
+import { InputSearchOption } from './InputSearch';
+export interface InputDropdownMultiSelectWithCountProps<T extends InputSearchOption = InputSearchOption> extends Omit<MultiSelectInputDropdownProps<T>, 'renderValue'> {
+    /**
+     * Whether to show the count badge.
+     * @default true
+     */
+    showCount?: boolean;
+    /**
+     * Position of the count display.
+     * - 'input': Show count in the input field (replaces placeholder when items selected)
+     * - 'label': Show count as a badge next to the label
+     * @default 'input'
+     */
+    countPosition?: 'input' | 'label';
+    /**
+     * Custom format function for count display.
+     * Default: (count) => `${count} selected`
+     */
+    countFormat?: (count: number) => string;
+}
+/**
+ * A multi-select dropdown input component with count display.
+ * Extends MultiSelectInputDropdown with count badge functionality.
+ */
+export declare function InputDropdownMultiSelectWithCount<T extends InputSearchOption = InputSearchOption>({ showCount, countPosition, countFormat, value, label, placeholder, ...props }: InputDropdownMultiSelectWithCountProps<T>): import("react/jsx-runtime").JSX.Element;
+export default InputDropdownMultiSelectWithCount;
+//# sourceMappingURL=InputDropdownMultiSelectWithCount.d.ts.map

package/dist/components/forms/InputDropdownMultiSelectWithCount.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputDropdownMultiSelectWithCount.d.ts","sourceRoot":"","sources":["../../../src/components/forms/InputDropdownMultiSelectWithCount.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,6BAA6B,EAAE,MAAM,4BAA4B,CAAA;AAC/E,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAA;AAWtD,MAAM,WAAW,sCAAsC,CAAC,CAAC,SAAS,iBAAiB,GAAG,iBAAiB,CACrG,SAAQ,IAAI,CAAC,6BAA6B,CAAC,CAAC,CAAC,EAAE,aAAa,CAAC;IAC7D;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,OAAO,GAAG,OAAO,CAAA;IACjC;;;OAGG;IACH,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAA;CACxC;AAED;;;GAGG;AACH,wBAAgB,iCAAiC,CAAC,CAAC,SAAS,iBAAiB,GAAG,iBAAiB,EAAE,EACjG,SAAgB,EAChB,aAAuB,EACvB,WAAW,EACX,KAAU,EACV,KAAK,EACL,WAA8B,EAC9B,GAAG,KAAK,EACT,EAAE,sCAAsC,CAAC,CAAC,CAAC,2CAiE3C;AAED,eAAe,iCAAiC,CAAA"}

package/dist/components/forms/InputDropdownMultiSelectWithCount.js

@@ -0,0 +1,73 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { MultiSelectInputDropdown } from "./MultiSelectInputDropdown.js";
+import { BadgePillColor } from "../badge/BadgePillColor.js";
+import Box from "../../packages/zenith-ui/node_modules/@mui/material/esm/Box/Box.js";
+import Typography from "../../packages/zenith-ui/node_modules/@mui/material/esm/Typography/Typography.js";
+const tokens = {
+  onSurface: "#364152",
+  // Primary text
+  onSurfaceVariant: "#697586"
+  // Secondary text / placeholder
+};
+function InputDropdownMultiSelectWithCount({
+  showCount = true,
+  countPosition = "input",
+  countFormat,
+  value = [],
+  label,
+  placeholder = "Select options",
+  ...props
+}) {
+  const selectedCount = value.length;
+  const formatCount = countFormat || ((count) => `${count} selected`);
+  const renderValue = countPosition === "input" && showCount ? (selected) => {
+    if (selected.length === 0) {
+      return /* @__PURE__ */ jsx(Typography, { variant: "text-md-regular", sx: { color: tokens.onSurfaceVariant }, children: placeholder });
+    }
+    return /* @__PURE__ */ jsx(Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: /* @__PURE__ */ jsx(Typography, { variant: "text-md-regular", sx: { color: tokens.onSurface }, children: formatCount(selected.length) }) });
+  } : void 0;
+  return /* @__PURE__ */ jsxs(Box, { sx: { width: "100%" }, children: [
+    label && countPosition === "label" && showCount && selectedCount > 0 && /* @__PURE__ */ jsxs(
+      Box,
+      {
+        sx: {
+          display: "flex",
+          alignItems: "center",
+          gap: 0.5,
+          // 4px gap between label and badge
+          mb: 0.5
+          // 4px margin bottom
+        },
+        children: [
+          /* @__PURE__ */ jsxs(Typography, { variant: "text-sm-medium", sx: { color: "text.primary" }, children: [
+            label,
+            props.required && /* @__PURE__ */ jsx(Typography, { component: "span", sx: { color: "error.main", ml: 0.5 }, children: "*" })
+          ] }),
+          /* @__PURE__ */ jsx(
+            BadgePillColor,
+            {
+              label: String(selectedCount),
+              color: "primary",
+              size: "sm"
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      MultiSelectInputDropdown,
+      {
+        ...props,
+        label: countPosition === "label" && showCount && selectedCount > 0 ? void 0 : label,
+        value,
+        placeholder,
+        renderValue,
+        required: props.required
+      }
+    )
+  ] });
+}
+export {
+  InputDropdownMultiSelectWithCount
+};
+//# sourceMappingURL=InputDropdownMultiSelectWithCount.js.map

package/dist/components/forms/InputDropdownMultiSelectWithCount.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputDropdownMultiSelectWithCount.js","sources":["../../../src/components/forms/InputDropdownMultiSelectWithCount.tsx"],"sourcesContent":["// src/components/zenith/forms/InputDropdownMultiSelectWithCount.tsx - InputDropdownMultiSelectWithCount\nimport Box from '@mui/material/Box'\nimport Typography from '@mui/material/Typography'\nimport { MultiSelectInputDropdown } from './MultiSelectInputDropdown'\nimport type { MultiSelectInputDropdownProps } from './MultiSelectInputDropdown'\nimport type { InputSearchOption } from './InputSearch'\nimport { BadgePillColor } from '../badge/BadgePillColor'\n\n/**\n * Design token colors - from Figma specs\n */\nconst tokens = {\n  onSurface: '#364152', // Primary text\n  onSurfaceVariant: '#697586', // Secondary text / placeholder\n}\n\nexport interface InputDropdownMultiSelectWithCountProps<T extends InputSearchOption = InputSearchOption>\n  extends Omit<MultiSelectInputDropdownProps<T>, 'renderValue'> {\n  /**\n   * Whether to show the count badge.\n   * @default true\n   */\n  showCount?: boolean\n  /**\n   * Position of the count display.\n   * - 'input': Show count in the input field (replaces placeholder when items selected)\n   * - 'label': Show count as a badge next to the label\n   * @default 'input'\n   */\n  countPosition?: 'input' | 'label'\n  /**\n   * Custom format function for count display.\n   * Default: (count) => `${count} selected`\n   */\n  countFormat?: (count: number) => string\n}\n\n/**\n * A multi-select dropdown input component with count display.\n * Extends MultiSelectInputDropdown with count badge functionality.\n */\nexport function InputDropdownMultiSelectWithCount<T extends InputSearchOption = InputSearchOption>({\n  showCount = true,\n  countPosition = 'input',\n  countFormat,\n  value = [],\n  label,\n  placeholder = 'Select options',\n  ...props\n}: InputDropdownMultiSelectWithCountProps<T>) {\n  const selectedCount = value.length\n\n  // Default count format\n  const formatCount = countFormat || ((count: number) => `${count} selected`)\n\n  // Custom renderValue for input position\n  const renderValue = countPosition === 'input' && showCount\n    ? (selected: string[]) => {\n        if (selected.length === 0) {\n          return (\n            <Typography variant=\"text-md-regular\" sx={{ color: tokens.onSurfaceVariant }}>\n              {placeholder}\n            </Typography>\n          )\n        }\n        return (\n          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>\n            <Typography variant=\"text-md-regular\" sx={{ color: tokens.onSurface }}>\n              {formatCount(selected.length)}\n            </Typography>\n          </Box>\n        )\n      }\n    : undefined\n\n  return (\n    <Box sx={{ width: '100%' }}>\n      {/* Label with Count Badge */}\n      {label && countPosition === 'label' && showCount && selectedCount > 0 && (\n        <Box\n          sx={{\n            display: 'flex',\n            alignItems: 'center',\n            gap: 0.5, // 4px gap between label and badge\n            mb: 0.5, // 4px margin bottom\n          }}\n        >\n          <Typography variant=\"text-sm-medium\" sx={{ color: 'text.primary' }}>\n            {label}\n            {props.required && (\n              <Typography component=\"span\" sx={{ color: 'error.main', ml: 0.5 }}>\n                *\n              </Typography>\n            )}\n          </Typography>\n          <BadgePillColor\n            label={String(selectedCount)}\n            color=\"primary\"\n            size=\"sm\"\n          />\n        </Box>\n      )}\n\n      {/* MultiSelectInputDropdown */}\n      <MultiSelectInputDropdown\n        {...props}\n        label={countPosition === 'label' && showCount && selectedCount > 0 ? undefined : label} // Hide label if count badge is shown in label position\n        value={value}\n        placeholder={placeholder}\n        renderValue={renderValue}\n        required={props.required}\n      />\n    </Box>\n  )\n}\n\nexport default InputDropdownMultiSelectWithCount\n\n"],"names":[],"mappings":";;;;;AAWA,MAAM,SAAS;AAAA,EACb,WAAW;AAAA;AAAA,EACX,kBAAkB;AAAA;AACpB;AA2BO,SAAS,kCAAmF;AAAA,EACjG,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB;AAAA,EACA,QAAQ,CAAA;AAAA,EACR;AAAA,EACA,cAAc;AAAA,EACd,GAAG;AACL,GAA8C;AAC5C,QAAM,gBAAgB,MAAM;AAG5B,QAAM,cAAc,gBAAgB,CAAC,UAAkB,GAAG,KAAK;AAG/D,QAAM,cAAc,kBAAkB,WAAW,YAC7C,CAAC,aAAuB;AACtB,QAAI,SAAS,WAAW,GAAG;AACzB,aACE,oBAAC,YAAA,EAAW,SAAQ,mBAAkB,IAAI,EAAE,OAAO,OAAO,iBAAA,GACvD,UAAA,YAAA,CACH;AAAA,IAEJ;AACA,WACE,oBAAC,KAAA,EAAI,IAAI,EAAE,SAAS,QAAQ,YAAY,UAAU,KAAK,EAAA,GACrD,UAAA,oBAAC,cAAW,SAAQ,mBAAkB,IAAI,EAAE,OAAO,OAAO,aACvD,UAAA,YAAY,SAAS,MAAM,EAAA,CAC9B,EAAA,CACF;AAAA,EAEJ,IACA;AAEJ,8BACG,KAAA,EAAI,IAAI,EAAE,OAAO,UAEf,UAAA;AAAA,IAAA,SAAS,kBAAkB,WAAW,aAAa,gBAAgB,KAClE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAI;AAAA,UACF,SAAS;AAAA,UACT,YAAY;AAAA,UACZ,KAAK;AAAA;AAAA,UACL,IAAI;AAAA;AAAA,QAAA;AAAA,QAGN,UAAA;AAAA,UAAA,qBAAC,cAAW,SAAQ,kBAAiB,IAAI,EAAE,OAAO,kBAC/C,UAAA;AAAA,YAAA;AAAA,YACA,MAAM,YACL,oBAAC,YAAA,EAAW,WAAU,QAAO,IAAI,EAAE,OAAO,cAAc,IAAI,IAAA,GAAO,UAAA,IAAA,CAEnE;AAAA,UAAA,GAEJ;AAAA,UACA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,OAAO,OAAO,aAAa;AAAA,cAC3B,OAAM;AAAA,cACN,MAAK;AAAA,YAAA;AAAA,UAAA;AAAA,QACP;AAAA,MAAA;AAAA,IAAA;AAAA,IAKJ;AAAA,MAAC;AAAA,MAAA;AAAA,QACE,GAAG;AAAA,QACJ,OAAO,kBAAkB,WAAW,aAAa,gBAAgB,IAAI,SAAY;AAAA,QACjF;AAAA,QACA;AAAA,QACA;AAAA,QACA,UAAU,MAAM;AAAA,MAAA;AAAA,IAAA;AAAA,EAClB,GACF;AAEJ;"}

package/dist/components/forms/InputField.d.ts

@@ -0,0 +1,88 @@
+import { TextFieldProps } from '@mui/material/TextField';
+import { SxProps, Theme } from '@mui/material/styles';
+export type InputFieldSize = 'xs' | 'sm' | 'md';
+export type InputFieldType = 'default' | 'leading-dropdown';
+export type InputFieldState = 'placeholder' | 'filled' | 'focused' | 'disabled' | 'read-only';
+export interface InputFieldDropdownOption {
+    value: string;
+    label: string;
+}
+export interface InputFieldProps extends Omit<TextFieldProps, 'size' | 'error' | 'disabled' | 'variant' | 'value' | 'defaultValue'> {
+    /**
+     * Size variant: 'xs' (36px height), 'sm' (40px height), or 'md' (44px height).
+     * @default 'md'
+     */
+    size?: InputFieldSize;
+    /**
+     * Input type: 'default' or 'leading-dropdown'.
+     * @default 'default'
+     */
+    type?: InputFieldType;
+    /**
+     * Input state: 'placeholder', 'filled', 'focused', 'disabled', or 'read-only'.
+     * @default 'placeholder'
+     */
+    state?: InputFieldState;
+    /**
+     * Label text shown above the input.
+     */
+    label?: string;
+    /**
+     * Optional help icon tooltip title.
+     */
+    helpTitle?: string;
+    /**
+     * Optional help icon tooltip supporting text.
+     */
+    helpSupportingText?: string;
+    /**
+     * Optional help icon tooltip placement.
+     * @default 'top-center'
+     */
+    helpTooltipPlacement?: 'top-center' | 'top-right' | 'top-left' | 'bottom-center' | 'bottom-right' | 'bottom-left';
+    /**
+     * Hint text shown below the input.
+     */
+    hintText?: string;
+    /**
+     * Whether the input is in an error state.
+     * @default false
+     */
+    error?: boolean;
+    /**
+     * Leading dropdown options (only used when type is 'leading-dropdown').
+     */
+    dropdownOptions?: InputFieldDropdownOption[];
+    /**
+     * Selected dropdown value (only used when type is 'leading-dropdown').
+     */
+    dropdownValue?: string;
+    /**
+     * Callback when dropdown value changes (only used when type is 'leading-dropdown').
+     */
+    onDropdownChange?: (value: string) => void;
+    /**
+     * Input value (controlled).
+     */
+    value?: string;
+    /**
+     * Default input value (uncontrolled).
+     */
+    defaultValue?: string;
+    /**
+     * Additional CSS styles for the root container.
+     */
+    sx?: SxProps<Theme>;
+    /**
+     * Additional CSS class name.
+     */
+    className?: string;
+}
+/**
+ * An input field component that displays a text input with optional label,
+ * help icon, leading dropdown, and hint text.
+ * Supports extra small, small, and medium size variants, and various states.
+ */
+export declare function InputField({ size, type, state, label, helpTitle, helpSupportingText, helpTooltipPlacement, hintText, error, dropdownOptions, dropdownValue, onDropdownChange, value, defaultValue, sx, className, ...textFieldProps }: InputFieldProps): import("react/jsx-runtime").JSX.Element;
+export default InputField;
+//# sourceMappingURL=InputField.d.ts.map

package/dist/components/forms/InputField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputField.d.ts","sourceRoot":"","sources":["../../../src/components/forms/InputField.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAA;AAC7D,OAAO,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAA;AAI1D,MAAM,MAAM,cAAc,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AAC/C,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,kBAAkB,CAAA;AAC3D,MAAM,MAAM,eAAe,GAAG,aAAa,GAAG,QAAQ,GAAG,SAAS,GAAG,UAAU,GAAG,WAAW,CAAA;AAE7F,MAAM,WAAW,wBAAwB;IACvC,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;CACd;AAED,MAAM,WAAW,eACf,SAAQ,IAAI,CAAC,cAAc,EAAE,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,SAAS,GAAG,OAAO,GAAG,cAAc,CAAC;IAClG;;;OAGG;IACH,IAAI,CAAC,EAAE,cAAc,CAAA;IACrB;;;OAGG;IACH,IAAI,CAAC,EAAE,cAAc,CAAA;IACrB;;;OAGG;IACH,KAAK,CAAC,EAAE,eAAe,CAAA;IACvB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B;;;OAGG;IACH,oBAAoB,CAAC,EAAE,YAAY,GAAG,WAAW,GAAG,UAAU,GAAG,eAAe,GAAG,cAAc,GAAG,aAAa,CAAA;IACjH;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAA;IACf;;OAEG;IACH,eAAe,CAAC,EAAE,wBAAwB,EAAE,CAAA;IAC5C;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB;;OAEG;IACH,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAC1C;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB;;OAEG;IACH,EAAE,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,CAAA;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,EACzB,IAAW,EACX,IAAgB,EAChB,KAAqB,EACrB,KAAK,EACL,SAAS,EACT,kBAAkB,EAClB,oBAAmC,EACnC,QAAQ,EACR,KAAa,EACb,eAAoB,EACpB,aAAa,EACb,gBAAgB,EAChB,KAAK,EACL,YAAY,EACZ,EAAE,EACF,SAAS,EACT,GAAG,cAAc,EAClB,EAAE,eAAe,2CAoSjB;AAED,eAAe,UAAU,CAAA"}

package/dist/components/forms/InputField.js

@@ -0,0 +1,291 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { HelpIcon } from "../HelpIcon.js";
+import { Icon } from "../Icon.js";
+import Box from "../../packages/zenith-ui/node_modules/@mui/material/esm/Box/Box.js";
+import Typography from "../../packages/zenith-ui/node_modules/@mui/material/esm/Typography/Typography.js";
+import TextField from "../../packages/zenith-ui/node_modules/@mui/material/esm/TextField/TextField.js";
+import Menu from "../../packages/zenith-ui/node_modules/@mui/material/esm/Menu/Menu.js";
+import MenuItem from "../../packages/zenith-ui/node_modules/@mui/material/esm/MenuItem/MenuItem.js";
+function InputField({
+  size = "md",
+  type = "default",
+  state = "placeholder",
+  label,
+  helpTitle,
+  helpSupportingText,
+  helpTooltipPlacement = "top-center",
+  hintText,
+  error = false,
+  dropdownOptions = [],
+  dropdownValue,
+  onDropdownChange,
+  value,
+  defaultValue,
+  sx,
+  className,
+  ...textFieldProps
+}) {
+  const isXs = size === "xs";
+  const isSm = size === "sm";
+  const isMd = size === "md";
+  const inputHeight = isXs ? 36 : isSm ? 40 : 44;
+  const inputPaddingY = isMd ? 10 : 8;
+  const inputPaddingX = isMd ? 14 : 12;
+  const inputTypography = "text-md-regular";
+  const labelVariant = "text-sm-medium";
+  const hintVariant = "text-sm-regular";
+  const [dropdownAnchorEl, setDropdownAnchorEl] = React.useState(null);
+  const dropdownOpen = Boolean(dropdownAnchorEl);
+  const isDisabled = state === "disabled";
+  const isReadOnly = state === "read-only";
+  const isFocused = state === "focused";
+  const handleDropdownClick = (event) => {
+    if (!isDisabled && !isReadOnly) {
+      setDropdownAnchorEl(event.currentTarget);
+    }
+  };
+  const handleDropdownClose = () => {
+    setDropdownAnchorEl(null);
+  };
+  const handleDropdownSelect = (selectedValue) => {
+    onDropdownChange?.(selectedValue);
+    handleDropdownClose();
+  };
+  const selectedDropdownOption = dropdownOptions.find((opt) => opt.value === dropdownValue);
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      className,
+      sx: [
+        {
+          display: "flex",
+          flexDirection: "column",
+          width: "100%",
+          gap: 0.75
+          // 6px gap between elements
+        },
+        ...Array.isArray(sx) ? sx : sx ? [sx] : []
+      ],
+      children: [
+        label ? /* @__PURE__ */ jsxs(
+          Box,
+          {
+            sx: {
+              display: "flex",
+              flexDirection: "row",
+              alignItems: "center",
+              gap: 0.5
+              // 4px gap between label and help icon
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                Typography,
+                {
+                  variant: labelVariant,
+                  sx: (theme) => ({
+                    color: isDisabled ? theme.palette.gray?.[300] ?? "#D4DCE7" : theme.palette.gray?.[700] ?? "#364152"
+                  }),
+                  children: label
+                }
+              ),
+              helpTitle ? /* @__PURE__ */ jsx(
+                HelpIcon,
+                {
+                  title: helpTitle,
+                  supportingText: helpSupportingText,
+                  tooltipPlacement: helpTooltipPlacement,
+                  iconSize: 16
+                }
+              ) : null
+            ]
+          }
+        ) : null,
+        /* @__PURE__ */ jsxs(
+          Box,
+          {
+            sx: (theme) => {
+              const borderColor = error ? theme.palette.error.main : isFocused ? theme.palette.primary.main : isDisabled ? theme.palette.gray?.[200] ?? "#D4DCE7" : theme.palette.gray?.[300] ?? "#D4DCE7";
+              const borderWidth = isFocused || error ? 2 : 1;
+              const shadowToken = isFocused ? void 0 : theme.shadows[1];
+              return {
+                display: "flex",
+                flexDirection: "row",
+                width: "100%",
+                height: inputHeight,
+                borderRadius: 2,
+                // 8px
+                border: `${borderWidth}px solid ${borderColor}`,
+                boxShadow: shadowToken,
+                backgroundColor: isDisabled ? theme.palette.gray?.[50] ?? "#F8FAFC" : theme.palette.background.paper,
+                overflow: "hidden",
+                "&:focus-within": {
+                  borderColor: error ? theme.palette.error.main : theme.palette.primary.main,
+                  // Use box-shadow inset to add extra 1px border effect without layout shift
+                  boxShadow: `inset 0 0 0 1px ${error ? theme.palette.error.main : theme.palette.primary.main}`
+                }
+              };
+            },
+            children: [
+              type === "leading-dropdown" ? /* @__PURE__ */ jsxs(
+                Box,
+                {
+                  component: "button",
+                  type: "button",
+                  onClick: handleDropdownClick,
+                  disabled: isDisabled || isReadOnly,
+                  sx: (theme) => ({
+                    display: "flex",
+                    flexDirection: "row",
+                    alignItems: "center",
+                    gap: 0.5,
+                    // 4px gap between text and chevron
+                    padding: `${inputPaddingY}px 0px ${inputPaddingY}px ${inputPaddingX}px`,
+                    height: "100%",
+                    border: "none",
+                    background: "transparent",
+                    cursor: isDisabled || isReadOnly ? "not-allowed" : "pointer",
+                    color: isDisabled ? theme.palette.gray?.[300] ?? "#D4DCE7" : theme.palette.gray?.[700] ?? "#364152",
+                    "&:hover:not(:disabled)": {
+                      backgroundColor: theme.palette.dsTokens?.stateLayers?.["state-layers-onsurfacevariant-opacity-8"] ?? "rgba(107, 114, 128, 0.08)"
+                    },
+                    "&:focus-visible": {
+                      outline: "none"
+                      // No focus ring - parent handles focus state
+                    }
+                  }),
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      Typography,
+                      {
+                        variant: inputTypography,
+                        sx: {
+                          color: "inherit"
+                        },
+                        children: selectedDropdownOption?.label ?? dropdownOptions[0]?.label ?? ""
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(Icon, { name: "ChevronDown", size: 16, color: "currentColor" })
+                  ]
+                }
+              ) : null,
+              /* @__PURE__ */ jsx(
+                TextField,
+                {
+                  ...textFieldProps,
+                  value,
+                  defaultValue,
+                  disabled: isDisabled,
+                  InputProps: {
+                    ...textFieldProps.InputProps,
+                    readOnly: isReadOnly
+                  },
+                  variant: "outlined",
+                  sx: (theme) => ({
+                    flex: 1,
+                    height: "100%",
+                    "& .MuiOutlinedInput-root": {
+                      height: "100%",
+                      borderRadius: 0,
+                      paddingLeft: type === "leading-dropdown" ? `${inputPaddingX - 2}px` : `${inputPaddingX}px`,
+                      paddingRight: `${inputPaddingX}px`,
+                      paddingTop: `${inputPaddingY}px`,
+                      paddingBottom: `${inputPaddingY}px`,
+                      backgroundColor: "transparent",
+                      border: "none",
+                      "& fieldset": {
+                        border: "none"
+                      },
+                      "&:hover:not(.Mui-focused):not(.Mui-disabled)": {
+                        backgroundColor: "transparent"
+                      },
+                      "&.Mui-focused:not(.Mui-disabled)": {
+                        backgroundColor: "transparent",
+                        boxShadow: "none"
+                      },
+                      "&.Mui-disabled": {
+                        backgroundColor: "transparent"
+                      }
+                    },
+                    "& .MuiInputBase-input": {
+                      padding: 0,
+                      typography: inputTypography,
+                      color: isDisabled ? theme.palette.gray?.[300] ?? "#D4DCE7" : theme.palette.gray?.[700] ?? "#364152",
+                      "&::placeholder": {
+                        color: theme.palette.gray?.[400] ?? "#8C96A2",
+                        opacity: 1
+                      }
+                    },
+                    "& .MuiOutlinedInput-notchedOutline": {
+                      border: "none"
+                    }
+                  })
+                }
+              )
+            ]
+          }
+        ),
+        type === "leading-dropdown" ? /* @__PURE__ */ jsx(
+          Menu,
+          {
+            anchorEl: dropdownAnchorEl,
+            open: dropdownOpen,
+            onClose: handleDropdownClose,
+            anchorOrigin: { vertical: "bottom", horizontal: "left" },
+            transformOrigin: { vertical: "top", horizontal: "left" },
+            slotProps: {
+              paper: {
+                sx: (theme) => ({
+                  mt: 0.5,
+                  borderRadius: 2,
+                  border: "1px solid",
+                  borderColor: theme.palette.gray?.[200] ?? "#D4DCE7",
+                  boxShadow: theme.shadows[24],
+                  minWidth: 120,
+                  overflow: "hidden"
+                })
+              }
+            },
+            children: dropdownOptions.map((option) => /* @__PURE__ */ jsx(
+              MenuItem,
+              {
+                onClick: () => handleDropdownSelect(option.value),
+                selected: option.value === dropdownValue,
+                sx: (theme) => ({
+                  padding: "8px 12px",
+                  typography: inputTypography,
+                  color: theme.palette.gray?.[700] ?? "#364152",
+                  "&:hover": {
+                    backgroundColor: theme.palette.dsTokens?.stateLayers?.["state-layers-onsurface-opacity-8"] ?? "rgba(54,65,82,0.08)"
+                  },
+                  "&.Mui-selected": {
+                    backgroundColor: "transparent",
+                    "&:hover": {
+                      backgroundColor: theme.palette.dsTokens?.stateLayers?.["state-layers-onsurface-opacity-8"] ?? "rgba(54,65,82,0.08)"
+                    }
+                  }
+                }),
+                children: option.label
+              },
+              option.value
+            ))
+          }
+        ) : null,
+        hintText ? /* @__PURE__ */ jsx(
+          Typography,
+          {
+            variant: hintVariant,
+            sx: (theme) => ({
+              color: error ? theme.palette.error.main : isDisabled ? theme.palette.gray?.[300] ?? "#D4DCE7" : theme.palette.gray?.[500] ?? "#697586"
+            }),
+            children: hintText
+          }
+        ) : null
+      ]
+    }
+  );
+}
+export {
+  InputField
+};
+//# sourceMappingURL=InputField.js.map