@flipdish/portal-library 7.5.1 → 7.6.0

package/dist/components/molecules/Autocomplete/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/molecules/Autocomplete/index.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nimport MuiAutocomplete, {\n  type AutocompleteChangeDetails,\n  type AutocompleteChangeReason,\n  type AutocompleteInputChangeReason,\n  type AutocompleteProps as MuiAutocompleteProps,\n  type AutocompleteRenderGetTagProps,\n  type AutocompleteRenderInputParams,\n  type AutocompleteRenderOptionState,\n  type AutocompleteValue,\n} from '@mui/material/Autocomplete';\nimport Box from '@mui/material/Box';\nimport { styled } from '@mui/material/styles';\n// TODO: Replace with our own Tooltip component\nimport MuiTooltip from '@mui/material/Tooltip';\n\nimport ArrowDown01Icon from '@fd/icons/ArrowDown01';\nimport ArrowUp01Icon from '@fd/icons/ArrowUp01';\nimport CancelIcon from '@fd/icons/Cancel';\nimport SearchIcon from '@fd/icons/Search';\nimport { truncateWithEllipsis } from '@fd/utilities/stringUtilities';\n\nimport CircularProgress from '../../atoms/CircularProgress';\nimport MenuItem from '../../atoms/MenuItem';\nimport Tag from '../../atoms/Tag';\nimport TextField, { type TextFieldProps } from '../../atoms/TextField';\nimport { useDynamicLimitTags } from './hooks/useDynamicLimitTags';\n\n// Bind flags to MuiAutocomplete\ntype MuiCustomAutocompleteProps<\n  M extends boolean = boolean, // Multiple\n  DC extends boolean = boolean, // DisableClearable\n  FS extends boolean = boolean, // FreeSolo\n> = MuiAutocompleteProps<AutocompleteOption, M, DC, FS>;\n\n/**\n * Represents an option in the Autocomplete dropdown.\n */\nexport interface AutocompleteOption {\n  /** The label to display in the dropdown option. */\n  label: string;\n  /** The value to store in the dropdown option. */\n  value: number | string;\n}\n\n/**\n * Props for the Autocomplete component.\n * Supports both single and multiple selection modes with optional search functionality.\n */\nexport interface AutocompleteProps\n  extends Omit<TextFieldProps, 'endAdornment' | 'multiline' | 'onChange' | 'options' | 'startAdornment'> {\n  /** Shows a loading indicator inside the input (e.g., while fetching). */\n  loading?: boolean;\n  /** Enables selection of multiple options and shows checkboxes and tags for selected values. */\n  multiple?: MuiCustomAutocompleteProps['multiple'];\n  /** Called when the selected value(s) change. */\n  onChange: MuiCustomAutocompleteProps['onChange'];\n  /** Called when the input text changes (typing or programmatic updates). */\n  onInputChange?: MuiCustomAutocompleteProps['onInputChange'];\n  /** Options to display in the dropdown list. */\n  options: AutocompleteOption[];\n  /** UI and accessibility labels used by the component. */\n  translations: {\n    /** Aria-label for the clear button. */\n    clearTextAriaLabel: string;\n    /** Aria-label for the dismiss tag button. */\n    dismissTagAriaLabel: string;\n    /** Text shown while loading options. */\n    loadingText: string;\n    /** Text shown when there are no options to display. */\n    noOptionsText: string;\n    /** Aria-label for the popup indicator button. */\n    openPopupAriaLabel: string;\n  };\n  /** Visual behavior: 'search' shows a leading search icon; 'combobox' shows a popup button. */\n  type?: 'combobox' | 'search';\n  /** Controlled value (single option, array for multiple, or null). */\n  value: MuiCustomAutocompleteProps['value'];\n}\n\n// Bind flags to MuiAutocomplete, see MuiCustomAutocompleteProps for more details\nconst MuiCustomAutocomplete = MuiAutocomplete<AutocompleteOption, boolean, boolean, boolean>;\nconst StyledAutocomplete = styled(MuiCustomAutocomplete, {\n  shouldForwardProp: (prop) => prop !== 'fullWidth',\n})<{ fullWidth?: boolean }>(({ fullWidth = false }) => ({\n  width: fullWidth ? '100%' : 'min(364px, 100%)',\n}));\n\nconst StyledAdornment = styled(Box, {\n  shouldForwardProp: (prop) => !['clickable', 'disabled', 'placement'].includes(prop as string),\n})<{ clickable?: boolean; error?: boolean; disabled?: boolean; placement: 'end' | 'middle' | 'start' }>(\n  ({ theme, clickable = false, disabled = false, placement }) => ({\n    alignItems: 'center',\n    cursor: clickable ? (disabled ? 'not-allowed' : 'pointer') : 'default',\n    display: 'flex',\n    justifyContent: 'center',\n    padding: 0,\n    pointerEvents: clickable ? 'auto' : 'none',\n\n    ...(placement === 'start' && { paddingRight: theme.spacing(1) }),\n    ...(placement === 'middle' && { padding: theme.spacing(0, 1) }),\n\n    '& svg': {\n      color: disabled\n        ? theme.palette.semantic.icon['icon-disabled']\n        : theme.palette.semantic.icon['icon-strong'],\n    },\n  }),\n);\n\nconst StyledLoadingSpinnerContainer = styled(Box, {\n  shouldForwardProp: (prop) => prop !== 'placement',\n})<{ placement?: 'end' | 'middle' | 'start' }>(({ theme, placement }) => ({\n  alignItems: 'center',\n  display: 'flex',\n  justifyContent: 'center',\n  padding: 0,\n\n  ...(placement === 'start' && { paddingRight: theme.spacing(1) }),\n  ...(placement === 'middle' && { padding: theme.spacing(0, 1) }),\n}));\n\n/**\n * A customizable Autocomplete component supporting search and combobox modes.\n * Supports single and multiple selection with dynamic tag rendering and optional loading states.\n *\n * @param props - The component props\n * @returns The rendered Autocomplete component\n */\nexport const Autocomplete = ({\n  className,\n  disabled = false,\n  errorText,\n  fdKey,\n  fullWidth = false,\n  helperText,\n  label,\n  loading = false,\n  multiple = false,\n  placeholder,\n  onChange,\n  onInputChange,\n  options = [],\n  required = false,\n  translations,\n  type = 'search',\n  value,\n}: AutocompleteProps): JSX.Element => {\n  const [isOpen, setIsOpen] = useState<boolean>(false);\n\n  const isSearch = type === 'search';\n  const isCombobox = type === 'combobox';\n\n  const { rootRef, limitTags } = useDynamicLimitTags({\n    chipMax: 130,\n    gap: 4,\n    horizontalPadding: 32,\n    reservedPx: isSearch ? 120 : 90,\n  });\n\n  // Close the dropdown (if open) when the component is dynamically disabled\n  useEffect(() => {\n    if (disabled) {\n      setIsOpen(false);\n    }\n  }, [disabled]);\n\n  /**\n   * Toggles or sets the dropdown open state.\n   * Does nothing when the component is disabled.\n   *\n   * @param open - Optional boolean to explicitly set open state; if undefined, toggles current state\n   */\n  const toggleOpen = (open?: boolean): void => {\n    if (disabled) {\n      return;\n    }\n\n    if (open !== undefined) {\n      setIsOpen(open);\n      return;\n    }\n\n    setIsOpen((prevOpen) => !prevOpen);\n  };\n\n  const renderSearchIcon = (): JSX.Element => {\n    return (\n      <StyledAdornment disabled={disabled} placement=\"start\">\n        <SearchIcon aria-hidden=\"true\" />\n      </StyledAdornment>\n    );\n  };\n\n  const renderPopupIcon = (): JSX.Element => {\n    return (\n      <StyledAdornment clickable disabled={disabled} placement=\"end\">\n        {isOpen ? <ArrowUp01Icon /> : <ArrowDown01Icon />}\n      </StyledAdornment>\n    );\n  };\n\n  const renderLoadingSpinner = (): JSX.Element => {\n    return (\n      <StyledLoadingSpinnerContainer placement={isSearch ? 'end' : 'middle'}>\n        <CircularProgress size=\"small\" />\n      </StyledLoadingSpinnerContainer>\n    );\n  };\n\n  const renderInputField = (params: AutocompleteRenderInputParams): JSX.Element => (\n    <TextField\n      disabled={disabled}\n      errorText={errorText}\n      fdKey={fdKey}\n      fullWidth={fullWidth}\n      helperText={helperText}\n      label={label}\n      placeholder={placeholder}\n      required={required}\n      slotProps={{\n        input: {\n          ...params.InputProps,\n          endAdornment: (\n            <>\n              {loading ? renderLoadingSpinner() : null}\n              {params.InputProps.endAdornment}\n            </>\n          ),\n          startAdornment: (\n            <>\n              {isSearch ? renderSearchIcon() : null}\n              {params.InputProps.startAdornment}\n            </>\n          ),\n        },\n        htmlInput: {\n          ...params.inputProps,\n        },\n      }}\n    />\n  );\n\n  const renderMenuOption = (\n    optionProps: React.HTMLAttributes<HTMLLIElement> & { key: React.Key },\n    option: AutocompleteOption,\n    state: AutocompleteRenderOptionState,\n  ): JSX.Element => {\n    const { key, onClick, ...rest } = optionProps;\n\n    if (multiple) {\n      return (\n        <MenuItem\n          {...rest}\n          key={key}\n          checked={state.selected}\n          label={option.label}\n          onCheckedChange={(_checked, e) => {\n            onClick?.(e as React.MouseEvent<HTMLLIElement, MouseEvent>);\n          }}\n          type=\"checkbox\"\n        />\n      );\n    }\n\n    return (\n      <MenuItem\n        {...rest}\n        key={key}\n        label={option.label}\n        onClick={onClick}\n        selected={state.selected}\n        type=\"text\"\n      />\n    );\n  };\n\n  const renderSelectedTags = (\n    selected: AutocompleteOption[],\n    getTagProps: AutocompleteRenderGetTagProps,\n  ): React.ReactNode =>\n    selected.map((tag, index) => {\n      const { key, onDelete, ...tagProps } = getTagProps({ index });\n      const rawLabel = typeof tag === 'string' ? tag : tag.label;\n      const label = truncateWithEllipsis(rawLabel, 13, { includeEllipsisInLimit: true });\n      const isTruncated = label.endsWith('...');\n      const tagKey = key ?? `tag-${typeof tag === 'string' ? tag : tag.value}`;\n\n      if (isTruncated) {\n        return (\n          <MuiTooltip key={tagKey} arrow placement=\"top\" title={rawLabel}>\n            <span {...tagProps}>\n              <Tag dismissAriaLabel={translations.dismissTagAriaLabel} label={label} onDismiss={onDelete} />\n            </span>\n          </MuiTooltip>\n        );\n      }\n\n      return (\n        <span key={tagKey} {...tagProps}>\n          <Tag dismissAriaLabel={translations.dismissTagAriaLabel} label={label} onDismiss={onDelete} />\n        </span>\n      );\n    });\n\n  const handlePopupIndicatorClick = (event: React.MouseEvent): void => {\n    if (disabled) {\n      return;\n    }\n\n    event.stopPropagation();\n    toggleOpen();\n  };\n\n  const handleChange = (\n    event: React.SyntheticEvent,\n    value: AutocompleteValue<AutocompleteOption, boolean, boolean, boolean>,\n    reason: AutocompleteChangeReason,\n    details?: AutocompleteChangeDetails<AutocompleteOption>,\n  ): void => {\n    if (!onChange) {\n      return;\n    }\n    onChange(event, value, reason, details);\n  };\n\n  const handleInputChange = (\n    event: React.SyntheticEvent,\n    value: string,\n    reason: AutocompleteInputChangeReason,\n  ): void => {\n    if (!onInputChange) {\n      return;\n    }\n    onInputChange(event, value, reason);\n  };\n\n  /**\n   * Returns all options without filtering for search mode.\n   * Disables MUI's built-in client-side filtering when type is 'search'.\n   */\n  const disableClientFilter = (opts: AutocompleteOption[]): AutocompleteOption[] => opts;\n\n  /**\n   * Extracts the display label from an option.\n   * Supports both object options and freeSolo string values.\n   */\n  const getOptionLabel = (option: AutocompleteOption | string): string => {\n    return typeof option === 'string' ? option : option.label;\n  };\n\n  /**\n   * Provides a stable unique key for each option to optimize DOM reconciliation.\n   */\n  const getOptionKey = (option: AutocompleteOption | string): string => {\n    return typeof option === 'string' ? option : String(option.value);\n  };\n\n  /**\n   * Determines equality between an option and the current value.\n   * Handles both freeSolo string values and object options to prevent selection glitches.\n   */\n  const getIsOptionEqualToValue = (a: AutocompleteOption, b: AutocompleteOption): boolean => {\n    if (b === null || b === undefined) {\n      return false;\n    }\n    return typeof b === 'string' ? a.label === b || String(a.value) === b : a.value === b.value;\n  };\n\n  /**\n   * Normalizes the value prop for MUI Autocomplete.\n   * Handles both single and multiple selection modes, ensuring the value\n   * format matches the mode (array for multiple, single value/null for single).\n   *\n   * @returns Normalized value compatible with MUI Autocomplete\n   */\n  const getValue = (): AutocompleteProps['value'] => {\n    // Multiple value selection\n    if (multiple) {\n      if (Array.isArray(value)) return value;\n      if (value === null || value === undefined) return [];\n      return [value as AutocompleteOption];\n    }\n\n    // Single value selection\n    if (Array.isArray(value)) return value.length > 0 ? value[0] : null;\n    return value ?? null;\n  };\n\n  return (\n    <StyledAutocomplete\n      ref={rootRef}\n      className={className}\n      clearIcon={<CancelIcon size=\"md\" />}\n      clearText={translations.clearTextAriaLabel}\n      disableClearable={disabled || loading}\n      disableCloseOnSelect={multiple}\n      disabled={disabled}\n      filterOptions={isSearch ? disableClientFilter : undefined}\n      forcePopupIcon={isCombobox}\n      freeSolo={isSearch}\n      fullWidth={fullWidth}\n      getOptionKey={getOptionKey}\n      getOptionLabel={getOptionLabel}\n      isOptionEqualToValue={getIsOptionEqualToValue}\n      limitTags={limitTags}\n      loading={loading}\n      loadingText={translations.loadingText}\n      multiple={multiple}\n      noOptionsText={translations.noOptionsText}\n      onChange={handleChange}\n      onClose={() => toggleOpen(false)}\n      onInputChange={handleInputChange}\n      onOpen={() => toggleOpen(true)}\n      open={isOpen}\n      openText={translations.openPopupAriaLabel}\n      options={options}\n      popupIcon={isSearch ? null : renderPopupIcon()}\n      renderInput={renderInputField}\n      renderOption={renderMenuOption}\n      renderTags={renderSelectedTags}\n      slotProps={{\n        popupIndicator: {\n          onClick: handlePopupIndicatorClick,\n        },\n      }}\n      value={getValue()}\n    />\n  );\n};\n\nexport default Autocomplete;\n"],"names":["StyledAutocomplete","styled","shouldForwardProp","prop","fullWidth","width","StyledAdornment","Box","includes","theme","clickable","disabled","placement","alignItems","cursor","display","justifyContent","padding","pointerEvents","paddingRight","spacing","color","palette","semantic","icon","StyledLoadingSpinnerContainer","Autocomplete","className","errorText","fdKey","helperText","label","loading","multiple","placeholder","onChange","onInputChange","options","required","translations","type","value","isOpen","setIsOpen","useState","isSearch","isCombobox","rootRef","limitTags","useDynamicLimitTags","chipMax","gap","horizontalPadding","reservedPx","useEffect","toggleOpen","open","undefined","prevOpen","_jsx","ref","clearIcon","CancelIcon","size","clearText","clearTextAriaLabel","disableClearable","disableCloseOnSelect","filterOptions","opts","forcePopupIcon","freeSolo","getOptionKey","option","String","getOptionLabel","isOptionEqualToValue","a","b","loadingText","noOptionsText","event","reason","details","onClose","onOpen","openText","openPopupAriaLabel","popupIcon","children","ArrowUp01Icon","ArrowDown01Icon","renderInput","params","TextField","slotProps","input","InputProps","endAdornment","_jsxs","_Fragment","CircularProgress","startAdornment","SearchIcon","htmlInput","inputProps","renderOption","optionProps","state","key","onClick","rest","_createElement","MenuItem","checked","selected","onCheckedChange","_checked","e","renderTags","getTagProps","map","tag","index","onDelete","tagProps","rawLabel","truncateWithEllipsis","includeEllipsisInLimit","isTruncated","endsWith","tagKey","MuiTooltip","arrow","title","Tag","dismissAriaLabel","dismissTagAriaLabel","onDismiss","popupIndicator","stopPropagation","Array","isArray","length"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/molecules/Autocomplete/index.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nimport MuiAutocomplete, {\n  type AutocompleteChangeDetails,\n  type AutocompleteChangeReason,\n  type AutocompleteInputChangeReason,\n  type AutocompleteProps as MuiAutocompleteProps,\n  type AutocompleteRenderGetTagProps,\n  type AutocompleteRenderInputParams,\n  type AutocompleteRenderOptionState,\n  type AutocompleteValue,\n} from '@mui/material/Autocomplete';\nimport Box from '@mui/material/Box';\nimport { styled } from '@mui/material/styles';\n\nimport Tooltip from '@fd/components/molecules/Tooltip';\nimport ArrowDown01Icon from '@fd/icons/ArrowDown01';\nimport ArrowUp01Icon from '@fd/icons/ArrowUp01';\nimport CancelIcon from '@fd/icons/Cancel';\nimport SearchIcon from '@fd/icons/Search';\nimport { truncateWithEllipsis } from '@fd/utilities/stringUtilities';\n\nimport CircularProgress from '../../atoms/CircularProgress';\nimport MenuItem from '../../atoms/MenuItem';\nimport Tag from '../../atoms/Tag';\nimport TextField, { type TextFieldProps } from '../../atoms/TextField';\nimport { useDynamicLimitTags } from './hooks/useDynamicLimitTags';\n\n// Bind flags to MuiAutocomplete\ntype MuiCustomAutocompleteProps<\n  M extends boolean = boolean, // Multiple\n  DC extends boolean = boolean, // DisableClearable\n  FS extends boolean = boolean, // FreeSolo\n> = MuiAutocompleteProps<AutocompleteOption, M, DC, FS>;\n\n/**\n * Represents an option in the Autocomplete dropdown.\n */\nexport interface AutocompleteOption {\n  /** The label to display in the dropdown option. */\n  label: string;\n  /** The value to store in the dropdown option. */\n  value: number | string;\n}\n\n/**\n * Props for the Autocomplete component.\n * Supports both single and multiple selection modes with optional search functionality.\n */\nexport interface AutocompleteProps\n  extends Omit<TextFieldProps, 'endAdornment' | 'multiline' | 'onChange' | 'options' | 'startAdornment'> {\n  /** Shows a loading indicator inside the input (e.g., while fetching). */\n  loading?: boolean;\n  /** Enables selection of multiple options and shows checkboxes and tags for selected values. */\n  multiple?: MuiCustomAutocompleteProps['multiple'];\n  /** Called when the selected value(s) change. */\n  onChange: MuiCustomAutocompleteProps['onChange'];\n  /** Called when the input text changes (typing or programmatic updates). */\n  onInputChange?: MuiCustomAutocompleteProps['onInputChange'];\n  /** Options to display in the dropdown list. */\n  options: AutocompleteOption[];\n  /** UI and accessibility labels used by the component. */\n  translations: {\n    /** Aria-label for the clear button. */\n    clearTextAriaLabel: string;\n    /** Aria-label for the dismiss tag button. */\n    dismissTagAriaLabel: string;\n    /** Text shown while loading options. */\n    loadingText: string;\n    /** Text shown when there are no options to display. */\n    noOptionsText: string;\n    /** Aria-label for the popup indicator button. */\n    openPopupAriaLabel: string;\n  };\n  /** Visual behavior: 'search' shows a leading search icon; 'combobox' shows a popup button. */\n  type?: 'combobox' | 'search';\n  /** Controlled value (single option, array for multiple, or null). */\n  value: MuiCustomAutocompleteProps['value'];\n}\n\n// Bind flags to MuiAutocomplete, see MuiCustomAutocompleteProps for more details\nconst MuiCustomAutocomplete = MuiAutocomplete<AutocompleteOption, boolean, boolean, boolean>;\nconst StyledAutocomplete = styled(MuiCustomAutocomplete, {\n  shouldForwardProp: (prop) => prop !== 'fullWidth',\n})<{ fullWidth?: boolean }>(({ fullWidth = false }) => ({\n  width: fullWidth ? '100%' : 'min(364px, 100%)',\n}));\n\nconst StyledAdornment = styled(Box, {\n  shouldForwardProp: (prop) => !['clickable', 'disabled', 'placement'].includes(prop as string),\n})<{ clickable?: boolean; error?: boolean; disabled?: boolean; placement: 'end' | 'middle' | 'start' }>(\n  ({ theme, clickable = false, disabled = false, placement }) => ({\n    alignItems: 'center',\n    cursor: clickable ? (disabled ? 'not-allowed' : 'pointer') : 'default',\n    display: 'flex',\n    justifyContent: 'center',\n    padding: 0,\n    pointerEvents: clickable ? 'auto' : 'none',\n\n    ...(placement === 'start' && { paddingRight: theme.spacing(1) }),\n    ...(placement === 'middle' && { padding: theme.spacing(0, 1) }),\n\n    '& svg': {\n      color: disabled\n        ? theme.palette.semantic.icon['icon-disabled']\n        : theme.palette.semantic.icon['icon-strong'],\n    },\n  }),\n);\n\nconst StyledLoadingSpinnerContainer = styled(Box, {\n  shouldForwardProp: (prop) => prop !== 'placement',\n})<{ placement?: 'end' | 'middle' | 'start' }>(({ theme, placement }) => ({\n  alignItems: 'center',\n  display: 'flex',\n  justifyContent: 'center',\n  padding: 0,\n\n  ...(placement === 'start' && { paddingRight: theme.spacing(1) }),\n  ...(placement === 'middle' && { padding: theme.spacing(0, 1) }),\n}));\n\n/**\n * A customizable Autocomplete component supporting search and combobox modes.\n * Supports single and multiple selection with dynamic tag rendering and optional loading states.\n *\n * @param props - The component props\n * @returns The rendered Autocomplete component\n */\nexport const Autocomplete = ({\n  className,\n  disabled = false,\n  errorText,\n  fdKey,\n  fullWidth = false,\n  helperText,\n  label,\n  loading = false,\n  multiple = false,\n  placeholder,\n  onChange,\n  onInputChange,\n  options = [],\n  required = false,\n  translations,\n  type = 'search',\n  value,\n}: AutocompleteProps): JSX.Element => {\n  const [isOpen, setIsOpen] = useState<boolean>(false);\n\n  const isSearch = type === 'search';\n  const isCombobox = type === 'combobox';\n\n  const { rootRef, limitTags } = useDynamicLimitTags({\n    chipMax: 130,\n    gap: 4,\n    horizontalPadding: 32,\n    reservedPx: isSearch ? 120 : 90,\n  });\n\n  // Close the dropdown (if open) when the component is dynamically disabled\n  useEffect(() => {\n    if (disabled) {\n      setIsOpen(false);\n    }\n  }, [disabled]);\n\n  /**\n   * Toggles or sets the dropdown open state.\n   * Does nothing when the component is disabled.\n   *\n   * @param open - Optional boolean to explicitly set open state; if undefined, toggles current state\n   */\n  const toggleOpen = (open?: boolean): void => {\n    if (disabled) {\n      return;\n    }\n\n    if (open !== undefined) {\n      setIsOpen(open);\n      return;\n    }\n\n    setIsOpen((prevOpen) => !prevOpen);\n  };\n\n  const renderSearchIcon = (): JSX.Element => {\n    return (\n      <StyledAdornment disabled={disabled} placement=\"start\">\n        <SearchIcon aria-hidden=\"true\" />\n      </StyledAdornment>\n    );\n  };\n\n  const renderPopupIcon = (): JSX.Element => {\n    return (\n      <StyledAdornment clickable disabled={disabled} placement=\"end\">\n        {isOpen ? <ArrowUp01Icon /> : <ArrowDown01Icon />}\n      </StyledAdornment>\n    );\n  };\n\n  const renderLoadingSpinner = (): JSX.Element => {\n    return (\n      <StyledLoadingSpinnerContainer placement={isSearch ? 'end' : 'middle'}>\n        <CircularProgress size=\"small\" />\n      </StyledLoadingSpinnerContainer>\n    );\n  };\n\n  const renderInputField = (params: AutocompleteRenderInputParams): JSX.Element => (\n    <TextField\n      disabled={disabled}\n      errorText={errorText}\n      fdKey={fdKey}\n      fullWidth={fullWidth}\n      helperText={helperText}\n      label={label}\n      placeholder={placeholder}\n      required={required}\n      slotProps={{\n        input: {\n          ...params.InputProps,\n          endAdornment: (\n            <>\n              {loading ? renderLoadingSpinner() : null}\n              {params.InputProps.endAdornment}\n            </>\n          ),\n          startAdornment: (\n            <>\n              {isSearch ? renderSearchIcon() : null}\n              {params.InputProps.startAdornment}\n            </>\n          ),\n        },\n        htmlInput: {\n          ...params.inputProps,\n        },\n      }}\n    />\n  );\n\n  const renderMenuOption = (\n    optionProps: React.HTMLAttributes<HTMLLIElement> & { key: React.Key },\n    option: AutocompleteOption,\n    state: AutocompleteRenderOptionState,\n  ): JSX.Element => {\n    const { key, onClick, ...rest } = optionProps;\n\n    if (multiple) {\n      return (\n        <MenuItem\n          {...rest}\n          key={key}\n          checked={state.selected}\n          label={option.label}\n          onCheckedChange={(_checked, e) => {\n            onClick?.(e as React.MouseEvent<HTMLLIElement, MouseEvent>);\n          }}\n          type=\"checkbox\"\n        />\n      );\n    }\n\n    return (\n      <MenuItem\n        {...rest}\n        key={key}\n        label={option.label}\n        onClick={onClick}\n        selected={state.selected}\n        type=\"text\"\n      />\n    );\n  };\n\n  const renderSelectedTags = (\n    selected: AutocompleteOption[],\n    getTagProps: AutocompleteRenderGetTagProps,\n  ): React.ReactNode =>\n    selected.map((tag, index) => {\n      const { key, onDelete, ...tagProps } = getTagProps({ index });\n      const rawLabel = typeof tag === 'string' ? tag : tag.label;\n      const label = truncateWithEllipsis(rawLabel, 13, { includeEllipsisInLimit: true });\n      const isTruncated = label.endsWith('...');\n      const tagKey = key ?? `tag-${typeof tag === 'string' ? tag : tag.value}`;\n\n      if (isTruncated) {\n        return (\n          <Tooltip key={tagKey} title={rawLabel}>\n            <span {...tagProps}>\n              <Tag dismissAriaLabel={translations.dismissTagAriaLabel} label={label} onDismiss={onDelete} />\n            </span>\n          </Tooltip>\n        );\n      }\n\n      return (\n        <span key={tagKey} {...tagProps}>\n          <Tag dismissAriaLabel={translations.dismissTagAriaLabel} label={label} onDismiss={onDelete} />\n        </span>\n      );\n    });\n\n  const handlePopupIndicatorClick = (event: React.MouseEvent): void => {\n    if (disabled) {\n      return;\n    }\n\n    event.stopPropagation();\n    toggleOpen();\n  };\n\n  const handleChange = (\n    event: React.SyntheticEvent,\n    value: AutocompleteValue<AutocompleteOption, boolean, boolean, boolean>,\n    reason: AutocompleteChangeReason,\n    details?: AutocompleteChangeDetails<AutocompleteOption>,\n  ): void => {\n    if (!onChange) {\n      return;\n    }\n    onChange(event, value, reason, details);\n  };\n\n  const handleInputChange = (\n    event: React.SyntheticEvent,\n    value: string,\n    reason: AutocompleteInputChangeReason,\n  ): void => {\n    if (!onInputChange) {\n      return;\n    }\n    onInputChange(event, value, reason);\n  };\n\n  /**\n   * Returns all options without filtering for search mode.\n   * Disables MUI's built-in client-side filtering when type is 'search'.\n   */\n  const disableClientFilter = (opts: AutocompleteOption[]): AutocompleteOption[] => opts;\n\n  /**\n   * Extracts the display label from an option.\n   * Supports both object options and freeSolo string values.\n   */\n  const getOptionLabel = (option: AutocompleteOption | string): string => {\n    return typeof option === 'string' ? option : option.label;\n  };\n\n  /**\n   * Provides a stable unique key for each option to optimize DOM reconciliation.\n   */\n  const getOptionKey = (option: AutocompleteOption | string): string => {\n    return typeof option === 'string' ? option : String(option.value);\n  };\n\n  /**\n   * Determines equality between an option and the current value.\n   * Handles both freeSolo string values and object options to prevent selection glitches.\n   */\n  const getIsOptionEqualToValue = (a: AutocompleteOption, b: AutocompleteOption): boolean => {\n    if (b === null || b === undefined) {\n      return false;\n    }\n    return typeof b === 'string' ? a.label === b || String(a.value) === b : a.value === b.value;\n  };\n\n  /**\n   * Normalizes the value prop for MUI Autocomplete.\n   * Handles both single and multiple selection modes, ensuring the value\n   * format matches the mode (array for multiple, single value/null for single).\n   *\n   * @returns Normalized value compatible with MUI Autocomplete\n   */\n  const getValue = (): AutocompleteProps['value'] => {\n    // Multiple value selection\n    if (multiple) {\n      if (Array.isArray(value)) return value;\n      if (value === null || value === undefined) return [];\n      return [value as AutocompleteOption];\n    }\n\n    // Single value selection\n    if (Array.isArray(value)) return value.length > 0 ? value[0] : null;\n    return value ?? null;\n  };\n\n  return (\n    <StyledAutocomplete\n      ref={rootRef}\n      className={className}\n      clearIcon={<CancelIcon size=\"md\" />}\n      clearText={translations.clearTextAriaLabel}\n      disableClearable={disabled || loading}\n      disableCloseOnSelect={multiple}\n      disabled={disabled}\n      filterOptions={isSearch ? disableClientFilter : undefined}\n      forcePopupIcon={isCombobox}\n      freeSolo={isSearch}\n      fullWidth={fullWidth}\n      getOptionKey={getOptionKey}\n      getOptionLabel={getOptionLabel}\n      isOptionEqualToValue={getIsOptionEqualToValue}\n      limitTags={limitTags}\n      loading={loading}\n      loadingText={translations.loadingText}\n      multiple={multiple}\n      noOptionsText={translations.noOptionsText}\n      onChange={handleChange}\n      onClose={() => toggleOpen(false)}\n      onInputChange={handleInputChange}\n      onOpen={() => toggleOpen(true)}\n      open={isOpen}\n      openText={translations.openPopupAriaLabel}\n      options={options}\n      popupIcon={isSearch ? null : renderPopupIcon()}\n      renderInput={renderInputField}\n      renderOption={renderMenuOption}\n      renderTags={renderSelectedTags}\n      slotProps={{\n        popupIndicator: {\n          onClick: handlePopupIndicatorClick,\n        },\n      }}\n      value={getValue()}\n    />\n  );\n};\n\nexport default Autocomplete;\n"],"names":["StyledAutocomplete","styled","shouldForwardProp","prop","fullWidth","width","StyledAdornment","Box","includes","theme","clickable","disabled","placement","alignItems","cursor","display","justifyContent","padding","pointerEvents","paddingRight","spacing","color","palette","semantic","icon","StyledLoadingSpinnerContainer","Autocomplete","className","errorText","fdKey","helperText","label","loading","multiple","placeholder","onChange","onInputChange","options","required","translations","type","value","isOpen","setIsOpen","useState","isSearch","isCombobox","rootRef","limitTags","useDynamicLimitTags","chipMax","gap","horizontalPadding","reservedPx","useEffect","toggleOpen","open","undefined","prevOpen","_jsx","ref","clearIcon","CancelIcon","size","clearText","clearTextAriaLabel","disableClearable","disableCloseOnSelect","filterOptions","opts","forcePopupIcon","freeSolo","getOptionKey","option","String","getOptionLabel","isOptionEqualToValue","a","b","loadingText","noOptionsText","event","reason","details","onClose","onOpen","openText","openPopupAriaLabel","popupIcon","children","ArrowUp01Icon","ArrowDown01Icon","renderInput","params","TextField","slotProps","input","InputProps","endAdornment","_jsxs","_Fragment","CircularProgress","startAdornment","SearchIcon","htmlInput","inputProps","renderOption","optionProps","state","key","onClick","rest","_createElement","MenuItem","checked","selected","onCheckedChange","_checked","e","renderTags","getTagProps","map","tag","index","onDelete","tagProps","rawLabel","truncateWithEllipsis","includeEllipsisInLimit","isTruncated","endsWith","tagKey","Tooltip","title","Tag","dismissAriaLabel","dismissTagAriaLabel","onDismiss","popupIndicator","stopPropagation","Array","isArray","length"],"mappings":"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"}

package/dist/components/molecules/RadioGroup/index.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),i=require("@mui/material/FormHelperText"),l=require("@mui/material/FormLabel"),a=require("@mui/material/RadioGroup"),t=require("@mui/material/styles"),n=require("@mui/material/Box");require("@mui/material/FormControlLabel");var o=require("../../../icons/CancelCircle/index.cjs.js");const s=t.styled(n)((({theme:e})=>({marginTop:e.spacing(2),marginBottom:0}))),d=t.styled(n)((({theme:e})=>({display:"flex",flexDirection:"column",marginBottom:e.spacing(.5)}))),c=t.styled(n)((({theme:e})=>({display:"flex",flexDirection:"column",gap:e.spacing(.5),borderLeft:`4px solid ${e.palette.semantic.stroke["stroke-weak"]}`,marginTop:e.spacing(2),marginLeft:e.spacing(1.75),paddingLeft:e.spacing(3.25)}))),m=t.styled("span")((({theme:e})=>({color:e.palette.semantic.text["text-weak"],marginLeft:e.spacing(.5)}))),u=({fdKey:t="radio-default",value:u="",onChange:p,label:x,required:h=!1,helperText:g,errorText:f,children:j,...v})=>{const y=`${t}-label`,b=g?`${t}-helper`:void 0,q=f?`${t}-error`:void 0,C=[b,q].filter(Boolean).join(" ")||void 0;return e.jsxs(n,{children:[e.jsxs(d,{children:[e.jsxs(l,{id:y,children:[x," ",h&&e.jsx(m,{children:" *"})]}),g?e.jsx(i,{id:b,children:g}):null,!!f&&e.jsxs(i,{error:!0,id:q,children:[e.jsx(o,{size:"md"}),f]})]}),e.jsx(a,{"aria-describedby":C,"aria-invalid":!!f||void 0,"aria-labelledby":y,name:t,onChange:(e,r)=>p(e,r),value:u,...v,children:r.Children.map(j,(i=>{if(!r.isValidElement(i))return i;const l=i.props;if(!("value"in l)||!("control"in l))return i;const a=l,n="string"==typeof a.value?a.value:String(a.value??""),o=u===n,d=a.control,m=a.children,p=r.isValidElement(d)?r.cloneElement(d,{...d.props,checked:o,error:!!f,name:t}):d;return e.jsxs(s,{children:[r.cloneElement(i,{...a,children:void 0,control:p}),o&&m&&e.jsx(c,{children:m})]},n)}))})]})};exports.RadioGroup=u,exports.default=u;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),i=require("@mui/material/FormHelperText"),l=require("@mui/material/FormLabel"),a=require("@mui/material/RadioGroup"),n=require("@mui/material/styles"),t=require("@mui/material/Box");require("@mui/material/FormControlLabel");var o=require("../../../icons/CancelCircle/index.cjs.js");const s=n.styled(t)((({theme:e})=>({marginTop:e.spacing(2),marginBottom:0}))),d=n.styled(t)((({theme:e})=>({display:"flex",flexDirection:"column",marginBottom:e.spacing(.5)}))),c=n.styled(t)((({theme:e})=>({display:"flex",flexDirection:"column",gap:e.spacing(.5),borderLeft:`4px solid ${e.palette.semantic.stroke["stroke-weak"]}`,marginTop:e.spacing(2),marginLeft:e.spacing(1.75),paddingLeft:e.spacing(3.25)}))),m=n.styled("span")((({theme:e})=>({color:e.palette.semantic.text["text-weak"],marginLeft:e.spacing(.5)}))),u=({fdKey:n="radio-default",name:u,value:p="",onChange:x,label:h,required:g=!1,helperText:f,errorText:j,children:v,...y})=>{const b=`${n}-label`,q=f?`${n}-helper`:void 0,C=j?`${n}-error`:void 0,L=[q,C].filter(Boolean).join(" ")||void 0;return e.jsxs(t,{children:[e.jsxs(d,{children:[e.jsxs(l,{id:b,children:[h," ",g&&e.jsx(m,{children:" *"})]}),f?e.jsx(i,{id:q,children:f}):null,!!j&&e.jsxs(i,{error:!0,id:C,children:[e.jsx(o,{size:"md"}),j]})]}),e.jsx(a,{"aria-describedby":L,"aria-invalid":!!j||void 0,"aria-labelledby":b,name:u??n,onChange:(e,r)=>x(e,r),value:p,...y,children:r.Children.map(v,(i=>{if(!r.isValidElement(i))return i;const l=i.props;if(!("value"in l)||!("control"in l))return i;const a=l,t="string"==typeof a.value?a.value:String(a.value??""),o=p===t,d=a.control,m=a.children,x=r.isValidElement(d)?r.cloneElement(d,{...d.props,checked:o,error:!!j,name:u??n}):d;return e.jsxs(s,{children:[r.cloneElement(i,{...a,children:void 0,control:x}),o&&m&&e.jsx(c,{children:m})]},t)}))})]})};exports.RadioGroup=u,exports.default=u;
 //# sourceMappingURL=index.cjs.js.map

package/dist/components/molecules/RadioGroup/index.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":["../../../../src/components/molecules/RadioGroup/index.tsx"],"sourcesContent":["import React, { isValidElement, type ReactElement } from 'react';\n\nimport MuiFormHelperText from '@mui/material/FormHelperText';\nimport FormLabel from '@mui/material/FormLabel';\nimport MuiRadioGroup, { type RadioGroupProps as MuiRadioGroupProps } from '@mui/material/RadioGroup';\nimport { styled } from '@mui/material/styles';\n\nimport Box from '@fd/components/atoms/Box';\nimport { type FormControlLabelProps } from '@fd/components/molecules/FormControlLabel';\nimport CancelCircleIcon from '@fd/icons/CancelCircle';\n\nconst StyledBox = styled(Box)(({ theme }) => ({\n  ...{ marginTop: theme.spacing(2), marginBottom: 0 },\n}));\n\nconst StyledLabelContainer = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  marginBottom: theme.spacing(0.5),\n}));\n\nconst ConditionalContainer = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: theme.spacing(0.5),\n  borderLeft: `4px solid ${theme.palette.semantic.stroke['stroke-weak']}`,\n  marginTop: theme.spacing(2),\n  marginLeft: theme.spacing(1.75),\n  paddingLeft: theme.spacing(3.25),\n}));\n\nconst WeakText = styled('span')(({ theme }) => ({\n  color: theme.palette.semantic.text['text-weak'],\n  marginLeft: theme.spacing(0.5),\n}));\n\n/** Props for a radio group */\nexport interface RadioGroupProps extends Omit<MuiRadioGroupProps, 'name' | 'onChange' | 'value'> {\n  /** Identifier applied to the radio group; also used for the radio name attribute. */\n  fdKey?: string;\n  /** Currently selected option value; use null or undefined when no option should be selected. */\n  value?: string | null;\n  /** Callback fired whenever the selection changes with the event and newly selected value. */\n  onChange: (event: React.ChangeEvent<HTMLInputElement>, value: string) => void;\n  /** Label rendered above the group; accepts plain text or a custom node. */\n  label: React.ReactNode;\n  /** Marks the radio group as required and surfaces the required indicator. */\n  required?: boolean;\n  /** Helper text displayed below the label to provide additional guidance. */\n  helperText?: string;\n  /** Error message shown below the helper text and marks the inputs as invalid. */\n  errorText?: string;\n  /** The children of the radio group. */\n  children?: React.ReactNode;\n}\n\n/**\n * RadioGroup component is a wrapper component for a radio group.\n *\n * @param fdKey - Identifier applied to the radio group; also used for the radio name attribute.\n * @param value - Currently selected option value; use null or undefined when no option should be selected.\n * @param onChange - Callback fired whenever the selection changes with the event and newly selected value.\n * @param label - Label rendered above the group; accepts plain text or a custom node.\n * @param required - Marks the radio group as required and surfaces the required indicator.\n * @param helperText - Helper text displayed below the label to provide additional guidance.\n * @param errorText - Error message shown below the helper text and marks the inputs as invalid.\n * @param children - The children of the radio group.\n * @param groupProps - Additional props to pass to the underlying MUI RadioGroup component.\n * @returns The RadioGroup component.\n */\n\nexport const RadioGroup = ({\n  fdKey = 'radio-default',\n  value = '',\n  onChange,\n  label,\n  required = false,\n  helperText,\n  errorText,\n  children,\n  ...groupProps\n}: RadioGroupProps): React.ReactElement => {\n  const labelId = `${fdKey}-label`;\n  const helperId = helperText ? `${fdKey}-helper` : undefined;\n  const errorId = errorText ? `${fdKey}-error` : undefined;\n  const describedBy = [helperId, errorId].filter(Boolean).join(' ') || undefined;\n\n  const handleChange: MuiRadioGroupProps['onChange'] = (e, newVal) => onChange(e, newVal);\n\n  return (\n    <Box>\n      <StyledLabelContainer>\n        <FormLabel id={labelId}>\n          {label} {required && <WeakText>{' *'}</WeakText>}\n        </FormLabel>\n        {helperText ? <MuiFormHelperText id={helperId}>{helperText}</MuiFormHelperText> : null}\n\n        {!!errorText && (\n          <MuiFormHelperText error id={errorId}>\n            <CancelCircleIcon size={'md'} />\n            {errorText}\n          </MuiFormHelperText>\n        )}\n      </StyledLabelContainer>\n\n      <MuiRadioGroup\n        aria-describedby={describedBy}\n        aria-invalid={errorText ? true : undefined}\n        aria-labelledby={labelId}\n        name={fdKey}\n        onChange={handleChange}\n        value={value}\n        {...groupProps}\n      >\n        {React.Children.map(children, (child) => {\n          if (!isValidElement(child)) {\n            return child;\n          }\n\n          // Check if child has FormControlLabel-specific props (value and control)\n          // This ensures we only process FormControlLabel components, not arbitrary elements like <Box>\n          const childProps = child.props as Partial<FormControlLabelProps>;\n          if (!('value' in childProps) || !('control' in childProps)) {\n            return child;\n          }\n\n          const formControlLabelProps = childProps as FormControlLabelProps;\n          const radioValue =\n            typeof formControlLabelProps.value === 'string'\n              ? formControlLabelProps.value\n              : String(formControlLabelProps.value ?? '');\n          const isSelected = value === radioValue;\n\n          // Extract Radio component from FormControlLabel's control prop\n          const radioControl = formControlLabelProps.control;\n\n          const optionConditionalChildren = formControlLabelProps.children;\n\n          // Clone the Radio component with updated children and checked state\n          const updatedRadio = isValidElement(radioControl)\n            ? React.cloneElement(radioControl, {\n                ...(radioControl.props as Record<string, unknown>),\n                checked: isSelected,\n                error: !!errorText,\n                name: fdKey,\n              } as Partial<unknown>)\n            : radioControl;\n\n          return (\n            <StyledBox key={radioValue}>\n              {React.cloneElement(child as ReactElement<FormControlLabelProps>, {\n                ...formControlLabelProps,\n                children: undefined,\n                control: updatedRadio,\n              })}\n\n              {/* conditional block under the selected option */}\n              {isSelected && optionConditionalChildren && (\n                <ConditionalContainer>{optionConditionalChildren}</ConditionalContainer>\n              )}\n            </StyledBox>\n          );\n        })}\n      </MuiRadioGroup>\n    </Box>\n  );\n};\n\nexport default RadioGroup;\n"],"names":["StyledBox","styled","Box","theme","marginTop","spacing","marginBottom","StyledLabelContainer","display","flexDirection","ConditionalContainer","gap","borderLeft","palette","semantic","stroke","marginLeft","paddingLeft","WeakText","color","text","RadioGroup","fdKey","value","onChange","label","required","helperText","errorText","children","groupProps","labelId","helperId","undefined","errorId","describedBy","filter","Boolean","join","_jsxs","FormLabel","id","_jsx","MuiFormHelperText","error","CancelCircleIcon","size","MuiRadioGroup","name","e","newVal","React","Children","map","child","isValidElement","childProps","props","formControlLabelProps","radioValue","String","isSelected","radioControl","control","optionConditionalChildren","updatedRadio","cloneElement","checked"],"mappings":"oZAWA,MAAMA,EAAYC,EAAAA,OAAOC,EAAPD,EAAY,EAAGE,YAAO,CACjCC,UAAWD,EAAME,QAAQ,GAAIC,aAAc,MAG5CC,EAAuBN,EAAAA,OAAOC,EAAPD,EAAY,EAAGE,YAAO,CACjDK,QAAS,OACTC,cAAe,SACfH,aAAcH,EAAME,QAAQ,QAGxBK,EAAuBT,EAAAA,OAAOC,EAAPD,EAAY,EAAGE,YAAO,CACjDK,QAAS,OACTC,cAAe,SACfE,IAAKR,EAAME,QAAQ,IACnBO,WAAY,aAAaT,EAAMU,QAAQC,SAASC,OAAO,iBACvDX,UAAWD,EAAME,QAAQ,GACzBW,WAAYb,EAAME,QAAQ,MAC1BY,YAAad,EAAME,QAAQ,UAGvBa,EAAWjB,EAAAA,OAAO,OAAPA,EAAe,EAAGE,YAAO,CACxCgB,MAAOhB,EAAMU,QAAQC,SAASM,KAAK,aACnCJ,WAAYb,EAAME,QAAQ,QAsCfgB,EAAa,EACxBC,QAAQ,gBACRC,QAAQ,GACRC,WACAC,QACAC,YAAW,EACXC,aACAC,YACAC,cACGC,MAEH,MAAMC,EAAU,GAAGT,UACbU,EAAWL,EAAa,GAAGL,gBAAiBW,EAC5CC,EAAUN,EAAY,GAAGN,eAAgBW,EACzCE,EAAc,CAACH,EAAUE,GAASE,OAAOC,SAASC,KAAK,WAAQL,EAIrE,OACEM,EAAAA,KAACrC,EAAG,CAAA2B,SAAA,CACFU,EAAAA,KAAChC,EAAoB,CAAAsB,SAAA,CACnBU,EAAAA,KAACC,EAAS,CAACC,GAAIV,EAAOF,SAAA,CACnBJ,EAAK,IAAGC,GAAYgB,MAACxB,EAAQ,CAAAW,SAAE,UAEjCF,EAAae,EAAAA,IAACC,EAAiB,CAACF,GAAIT,EAAQH,SAAGF,IAAkC,OAE/EC,GACDW,EAAAA,KAACI,EAAiB,CAACC,OAAK,EAACH,GAAIP,YAC3BQ,EAAAA,IAACG,EAAgB,CAACC,KAAM,OACvBlB,QAKPc,EAAAA,IAACK,EAAa,CAAA,mBACMZ,EAAW,iBACfP,QAAmBK,EAAS,kBACzBF,EACjBiB,KAAM1B,EACNE,SAvB+C,CAACyB,EAAGC,IAAW1B,EAASyB,EAAGC,GAwB1E3B,MAAOA,KACHO,EAAUD,SAEbsB,EAAMC,SAASC,IAAIxB,GAAWyB,IAC7B,IAAKC,EAAAA,eAAeD,GAClB,OAAOA,EAKT,MAAME,EAAaF,EAAMG,MACzB,KAAM,UAAWD,MAAiB,YAAaA,GAC7C,OAAOF,EAGT,MAAMI,EAAwBF,EACxBG,EACmC,iBAAhCD,EAAsBnC,MACzBmC,EAAsBnC,MACtBqC,OAAOF,EAAsBnC,OAAS,IACtCsC,EAAatC,IAAUoC,EAGvBG,EAAeJ,EAAsBK,QAErCC,EAA4BN,EAAsB7B,SAGlDoC,EAAeV,EAAAA,eAAeO,GAChCX,EAAMe,aAAaJ,EAAc,IAC3BA,EAAaL,MACjBU,QAASN,EACTjB,QAAShB,EACToB,KAAM1B,IAERwC,EAEJ,OACEvB,EAAAA,KAACvC,EAAS,CAAA6B,SAAA,CACPsB,EAAMe,aAAaZ,EAA8C,IAC7DI,EACH7B,cAAUI,EACV8B,QAASE,IAIVJ,GAAcG,GACbtB,EAAAA,IAAChC,EAAoB,CAAAmB,SAAEmC,MATXL"}
+{"version":3,"file":"index.cjs.js","sources":["../../../../src/components/molecules/RadioGroup/index.tsx"],"sourcesContent":["import React, { isValidElement, type ReactElement } from 'react';\n\nimport MuiFormHelperText from '@mui/material/FormHelperText';\nimport FormLabel from '@mui/material/FormLabel';\nimport MuiRadioGroup, { type RadioGroupProps as MuiRadioGroupProps } from '@mui/material/RadioGroup';\nimport { styled } from '@mui/material/styles';\n\nimport Box from '@fd/components/atoms/Box';\nimport { type FormControlLabelProps } from '@fd/components/molecules/FormControlLabel';\nimport CancelCircleIcon from '@fd/icons/CancelCircle';\n\nconst StyledBox = styled(Box)(({ theme }) => ({\n  ...{ marginTop: theme.spacing(2), marginBottom: 0 },\n}));\n\nconst StyledLabelContainer = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  marginBottom: theme.spacing(0.5),\n}));\n\nconst ConditionalContainer = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: theme.spacing(0.5),\n  borderLeft: `4px solid ${theme.palette.semantic.stroke['stroke-weak']}`,\n  marginTop: theme.spacing(2),\n  marginLeft: theme.spacing(1.75),\n  paddingLeft: theme.spacing(3.25),\n}));\n\nconst WeakText = styled('span')(({ theme }) => ({\n  color: theme.palette.semantic.text['text-weak'],\n  marginLeft: theme.spacing(0.5),\n}));\n\n/** Props for a radio group */\nexport interface RadioGroupProps extends Omit<MuiRadioGroupProps, 'name' | 'onChange' | 'value'> {\n  /** Identifier applied to the radio group; also used for the radio name attribute. */\n  fdKey?: string;\n  /** The name used to reference the value of the control. If not provided, falls back to `fdKey`. */\n  name?: string;\n  /** Currently selected option value; use null or undefined when no option should be selected. */\n  value?: string | null;\n  /** Callback fired whenever the selection changes with the event and newly selected value. */\n  onChange: (event: React.ChangeEvent<HTMLInputElement>, value: string) => void;\n  /** Label rendered above the group; accepts plain text or a custom node. */\n  label: React.ReactNode;\n  /** Marks the radio group as required and surfaces the required indicator. */\n  required?: boolean;\n  /** Helper text displayed below the label to provide additional guidance. */\n  helperText?: string;\n  /** Error message shown below the helper text and marks the inputs as invalid. */\n  errorText?: string;\n  /** The children of the radio group. */\n  children?: React.ReactNode;\n}\n\n/**\n * RadioGroup component is a wrapper component for a radio group.\n *\n * @param fdKey - Identifier applied to the radio group; also used for the radio name attribute.\n * @param name - The name used to reference the value of the control. If not provided, falls back to fdKey.\n * @param value - Currently selected option value; use null or undefined when no option should be selected.\n * @param onChange - Callback fired whenever the selection changes with the event and newly selected value.\n * @param label - Label rendered above the group; accepts plain text or a custom node.\n * @param required - Marks the radio group as required and surfaces the required indicator.\n * @param helperText - Helper text displayed below the label to provide additional guidance.\n * @param errorText - Error message shown below the helper text and marks the inputs as invalid.\n * @param children - The children of the radio group.\n * @param groupProps - Additional props to pass to the underlying MUI RadioGroup component.\n * @returns The RadioGroup component.\n */\n\nexport const RadioGroup = ({\n  fdKey = 'radio-default',\n  name,\n  value = '',\n  onChange,\n  label,\n  required = false,\n  helperText,\n  errorText,\n  children,\n  ...groupProps\n}: RadioGroupProps): React.ReactElement => {\n  const labelId = `${fdKey}-label`;\n  const helperId = helperText ? `${fdKey}-helper` : undefined;\n  const errorId = errorText ? `${fdKey}-error` : undefined;\n  const describedBy = [helperId, errorId].filter(Boolean).join(' ') || undefined;\n\n  const handleChange: MuiRadioGroupProps['onChange'] = (e, newVal) => onChange(e, newVal);\n\n  return (\n    <Box>\n      <StyledLabelContainer>\n        <FormLabel id={labelId}>\n          {label} {required && <WeakText>{' *'}</WeakText>}\n        </FormLabel>\n        {helperText ? <MuiFormHelperText id={helperId}>{helperText}</MuiFormHelperText> : null}\n\n        {!!errorText && (\n          <MuiFormHelperText error id={errorId}>\n            <CancelCircleIcon size={'md'} />\n            {errorText}\n          </MuiFormHelperText>\n        )}\n      </StyledLabelContainer>\n\n      <MuiRadioGroup\n        aria-describedby={describedBy}\n        aria-invalid={errorText ? true : undefined}\n        aria-labelledby={labelId}\n        name={name ?? fdKey}\n        onChange={handleChange}\n        value={value}\n        {...groupProps}\n      >\n        {React.Children.map(children, (child) => {\n          if (!isValidElement(child)) {\n            return child;\n          }\n\n          // Check if child has FormControlLabel-specific props (value and control)\n          // This ensures we only process FormControlLabel components, not arbitrary elements like <Box>\n          const childProps = child.props as Partial<FormControlLabelProps>;\n          if (!('value' in childProps) || !('control' in childProps)) {\n            return child;\n          }\n\n          const formControlLabelProps = childProps as FormControlLabelProps;\n          const radioValue =\n            typeof formControlLabelProps.value === 'string'\n              ? formControlLabelProps.value\n              : String(formControlLabelProps.value ?? '');\n          const isSelected = value === radioValue;\n\n          // Extract Radio component from FormControlLabel's control prop\n          const radioControl = formControlLabelProps.control;\n\n          const optionConditionalChildren = formControlLabelProps.children;\n\n          // Clone the Radio component with updated children and checked state\n          const updatedRadio = isValidElement(radioControl)\n            ? React.cloneElement(radioControl, {\n                ...(radioControl.props as Record<string, unknown>),\n                checked: isSelected,\n                error: !!errorText,\n                name: name ?? fdKey,\n              } as Partial<unknown>)\n            : radioControl;\n\n          return (\n            <StyledBox key={radioValue}>\n              {React.cloneElement(child as ReactElement<FormControlLabelProps>, {\n                ...formControlLabelProps,\n                children: undefined,\n                control: updatedRadio,\n              })}\n\n              {/* conditional block under the selected option */}\n              {isSelected && optionConditionalChildren && (\n                <ConditionalContainer>{optionConditionalChildren}</ConditionalContainer>\n              )}\n            </StyledBox>\n          );\n        })}\n      </MuiRadioGroup>\n    </Box>\n  );\n};\n\nexport default RadioGroup;\n"],"names":["StyledBox","styled","Box","theme","marginTop","spacing","marginBottom","StyledLabelContainer","display","flexDirection","ConditionalContainer","gap","borderLeft","palette","semantic","stroke","marginLeft","paddingLeft","WeakText","color","text","RadioGroup","fdKey","name","value","onChange","label","required","helperText","errorText","children","groupProps","labelId","helperId","undefined","errorId","describedBy","filter","Boolean","join","_jsxs","FormLabel","id","_jsx","MuiFormHelperText","error","CancelCircleIcon","size","MuiRadioGroup","e","newVal","React","Children","map","child","isValidElement","childProps","props","formControlLabelProps","radioValue","String","isSelected","radioControl","control","optionConditionalChildren","updatedRadio","cloneElement","checked"],"mappings":"oZAWA,MAAMA,EAAYC,EAAAA,OAAOC,EAAPD,EAAY,EAAGE,YAAO,CACjCC,UAAWD,EAAME,QAAQ,GAAIC,aAAc,MAG5CC,EAAuBN,EAAAA,OAAOC,EAAPD,EAAY,EAAGE,YAAO,CACjDK,QAAS,OACTC,cAAe,SACfH,aAAcH,EAAME,QAAQ,QAGxBK,EAAuBT,EAAAA,OAAOC,EAAPD,EAAY,EAAGE,YAAO,CACjDK,QAAS,OACTC,cAAe,SACfE,IAAKR,EAAME,QAAQ,IACnBO,WAAY,aAAaT,EAAMU,QAAQC,SAASC,OAAO,iBACvDX,UAAWD,EAAME,QAAQ,GACzBW,WAAYb,EAAME,QAAQ,MAC1BY,YAAad,EAAME,QAAQ,UAGvBa,EAAWjB,EAAAA,OAAO,OAAPA,EAAe,EAAGE,YAAO,CACxCgB,MAAOhB,EAAMU,QAAQC,SAASM,KAAK,aACnCJ,WAAYb,EAAME,QAAQ,QAyCfgB,EAAa,EACxBC,QAAQ,gBACRC,OACAC,QAAQ,GACRC,WACAC,QACAC,YAAW,EACXC,aACAC,YACAC,cACGC,MAEH,MAAMC,EAAU,GAAGV,UACbW,EAAWL,EAAa,GAAGN,gBAAiBY,EAC5CC,EAAUN,EAAY,GAAGP,eAAgBY,EACzCE,EAAc,CAACH,EAAUE,GAASE,OAAOC,SAASC,KAAK,WAAQL,EAIrE,OACEM,EAAAA,KAACtC,EAAG,CAAA4B,SAAA,CACFU,EAAAA,KAACjC,EAAoB,CAAAuB,SAAA,CACnBU,EAAAA,KAACC,EAAS,CAACC,GAAIV,EAAOF,SAAA,CACnBJ,EAAK,IAAGC,GAAYgB,MAACzB,EAAQ,CAAAY,SAAE,UAEjCF,EAAae,EAAAA,IAACC,EAAiB,CAACF,GAAIT,EAAQH,SAAGF,IAAkC,OAE/EC,GACDW,EAAAA,KAACI,EAAiB,CAACC,OAAK,EAACH,GAAIP,EAAOL,SAAA,CAClCa,EAAAA,IAACG,EAAgB,CAACC,KAAM,OACvBlB,QAKPc,EAAAA,IAACK,EAAa,CAAA,mBACMZ,EAAW,iBACfP,QAAmBK,EAAS,kBACzBF,EACjBT,KAAMA,GAAQD,EACdG,SAvB+C,CAACwB,EAAGC,IAAWzB,EAASwB,EAAGC,GAwB1E1B,MAAOA,KACHO,EAAUD,SAEbqB,EAAMC,SAASC,IAAIvB,GAAWwB,IAC7B,IAAKC,EAAAA,eAAeD,GAClB,OAAOA,EAKT,MAAME,EAAaF,EAAMG,MACzB,KAAM,UAAWD,MAAiB,YAAaA,GAC7C,OAAOF,EAGT,MAAMI,EAAwBF,EACxBG,EACmC,iBAAhCD,EAAsBlC,MACzBkC,EAAsBlC,MACtBoC,OAAOF,EAAsBlC,OAAS,IACtCqC,EAAarC,IAAUmC,EAGvBG,EAAeJ,EAAsBK,QAErCC,EAA4BN,EAAsB5B,SAGlDmC,EAAeV,EAAAA,eAAeO,GAChCX,EAAMe,aAAaJ,EAAc,IAC3BA,EAAaL,MACjBU,QAASN,EACThB,QAAShB,EACTN,KAAMA,GAAQD,IAEhBwC,EAEJ,OACEtB,EAAAA,KAACxC,EAAS,CAAA8B,SAAA,CACPqB,EAAMe,aAAaZ,EAA8C,IAC7DI,EACH5B,cAAUI,EACV6B,QAASE,IAIVJ,GAAcG,GACbrB,EAAAA,IAACjC,EAAoB,CAAAoB,SAAEkC,MATXL"}

package/dist/components/molecules/RadioGroup/index.d.ts

@@ -5,6 +5,8 @@ import { RadioGroupProps as RadioGroupProps$1 } from '@mui/material/RadioGroup';
 interface RadioGroupProps extends Omit<RadioGroupProps$1, 'name' | 'onChange' | 'value'> {
     /** Identifier applied to the radio group; also used for the radio name attribute. */
     fdKey?: string;
+    /** The name used to reference the value of the control. If not provided, falls back to `fdKey`. */
+    name?: string;
     /** Currently selected option value; use null or undefined when no option should be selected. */
     value?: string | null;
     /** Callback fired whenever the selection changes with the event and newly selected value. */
@@ -24,6 +26,7 @@ interface RadioGroupProps extends Omit<RadioGroupProps$1, 'name' | 'onChange' |
  * RadioGroup component is a wrapper component for a radio group.
  *
  * @param fdKey - Identifier applied to the radio group; also used for the radio name attribute.
+ * @param name - The name used to reference the value of the control. If not provided, falls back to fdKey.
  * @param value - Currently selected option value; use null or undefined when no option should be selected.
  * @param onChange - Callback fired whenever the selection changes with the event and newly selected value.
  * @param label - Label rendered above the group; accepts plain text or a custom node.
@@ -34,7 +37,7 @@ interface RadioGroupProps extends Omit<RadioGroupProps$1, 'name' | 'onChange' |
  * @param groupProps - Additional props to pass to the underlying MUI RadioGroup component.
  * @returns The RadioGroup component.
  */
-declare const RadioGroup: ({ fdKey, value, onChange, label, required, helperText, errorText, children, ...groupProps }: RadioGroupProps) => react__default.ReactElement;
+declare const RadioGroup: ({ fdKey, name, value, onChange, label, required, helperText, errorText, children, ...groupProps }: RadioGroupProps) => react__default.ReactElement;
 
 export { RadioGroup, RadioGroup as default };
 export type { RadioGroupProps };

package/dist/components/molecules/RadioGroup/index.js

@@ -1,2 +1,2 @@
-import{jsxs as e,jsx as r}from"react/jsx-runtime";import i,{isValidElement as o}from"react";import t from"@mui/material/FormHelperText";import a from"@mui/material/FormLabel";import n from"@mui/material/RadioGroup";import{styled as l}from"@mui/material/styles";import m from"@mui/material/Box";import"@mui/material/FormControlLabel";import c from"../../../icons/CancelCircle/index.js";const d=l(m)((({theme:e})=>({marginTop:e.spacing(2),marginBottom:0}))),p=l(m)((({theme:e})=>({display:"flex",flexDirection:"column",marginBottom:e.spacing(.5)}))),s=l(m)((({theme:e})=>({display:"flex",flexDirection:"column",gap:e.spacing(.5),borderLeft:`4px solid ${e.palette.semantic.stroke["stroke-weak"]}`,marginTop:e.spacing(2),marginLeft:e.spacing(1.75),paddingLeft:e.spacing(3.25)}))),u=l("span")((({theme:e})=>({color:e.palette.semantic.text["text-weak"],marginLeft:e.spacing(.5)}))),f=({fdKey:l="radio-default",value:f="",onChange:h,label:g,required:x=!1,helperText:v,errorText:b,children:y,...C})=>{const L=`${l}-label`,k=v?`${l}-helper`:void 0,T=b?`${l}-error`:void 0,B=[k,T].filter(Boolean).join(" ")||void 0;return e(m,{children:[e(p,{children:[e(a,{id:L,children:[g," ",x&&r(u,{children:" *"})]}),v?r(t,{id:k,children:v}):null,!!b&&e(t,{error:!0,id:T,children:[r(c,{size:"md"}),b]})]}),r(n,{"aria-describedby":B,"aria-invalid":!!b||void 0,"aria-labelledby":L,name:l,onChange:(e,r)=>h(e,r),value:f,...C,children:i.Children.map(y,(t=>{if(!o(t))return t;const a=t.props;if(!("value"in a)||!("control"in a))return t;const n=a,m="string"==typeof n.value?n.value:String(n.value??""),c=f===m,p=n.control,u=n.children,h=o(p)?i.cloneElement(p,{...p.props,checked:c,error:!!b,name:l}):p;return e(d,{children:[i.cloneElement(t,{...n,children:void 0,control:h}),c&&u&&r(s,{children:u})]},m)}))})]})};export{f as RadioGroup,f as default};
+import{jsxs as e,jsx as r}from"react/jsx-runtime";import i,{isValidElement as o}from"react";import a from"@mui/material/FormHelperText";import n from"@mui/material/FormLabel";import t from"@mui/material/RadioGroup";import{styled as l}from"@mui/material/styles";import m from"@mui/material/Box";import"@mui/material/FormControlLabel";import c from"../../../icons/CancelCircle/index.js";const d=l(m)((({theme:e})=>({marginTop:e.spacing(2),marginBottom:0}))),p=l(m)((({theme:e})=>({display:"flex",flexDirection:"column",marginBottom:e.spacing(.5)}))),s=l(m)((({theme:e})=>({display:"flex",flexDirection:"column",gap:e.spacing(.5),borderLeft:`4px solid ${e.palette.semantic.stroke["stroke-weak"]}`,marginTop:e.spacing(2),marginLeft:e.spacing(1.75),paddingLeft:e.spacing(3.25)}))),u=l("span")((({theme:e})=>({color:e.palette.semantic.text["text-weak"],marginLeft:e.spacing(.5)}))),f=({fdKey:l="radio-default",name:f,value:h="",onChange:g,label:x,required:v=!1,helperText:b,errorText:y,children:C,...L})=>{const k=`${l}-label`,T=b?`${l}-helper`:void 0,B=y?`${l}-error`:void 0,$=[T,B].filter(Boolean).join(" ")||void 0;return e(m,{children:[e(p,{children:[e(n,{id:k,children:[x," ",v&&r(u,{children:" *"})]}),b?r(a,{id:T,children:b}):null,!!y&&e(a,{error:!0,id:B,children:[r(c,{size:"md"}),y]})]}),r(t,{"aria-describedby":$,"aria-invalid":!!y||void 0,"aria-labelledby":k,name:f??l,onChange:(e,r)=>g(e,r),value:h,...L,children:i.Children.map(C,(a=>{if(!o(a))return a;const n=a.props;if(!("value"in n)||!("control"in n))return a;const t=n,m="string"==typeof t.value?t.value:String(t.value??""),c=h===m,p=t.control,u=t.children,g=o(p)?i.cloneElement(p,{...p.props,checked:c,error:!!y,name:f??l}):p;return e(d,{children:[i.cloneElement(a,{...t,children:void 0,control:g}),c&&u&&r(s,{children:u})]},m)}))})]})};export{f as RadioGroup,f as default};
 //# sourceMappingURL=index.js.map

package/dist/components/molecules/RadioGroup/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/molecules/RadioGroup/index.tsx"],"sourcesContent":["import React, { isValidElement, type ReactElement } from 'react';\n\nimport MuiFormHelperText from '@mui/material/FormHelperText';\nimport FormLabel from '@mui/material/FormLabel';\nimport MuiRadioGroup, { type RadioGroupProps as MuiRadioGroupProps } from '@mui/material/RadioGroup';\nimport { styled } from '@mui/material/styles';\n\nimport Box from '@fd/components/atoms/Box';\nimport { type FormControlLabelProps } from '@fd/components/molecules/FormControlLabel';\nimport CancelCircleIcon from '@fd/icons/CancelCircle';\n\nconst StyledBox = styled(Box)(({ theme }) => ({\n  ...{ marginTop: theme.spacing(2), marginBottom: 0 },\n}));\n\nconst StyledLabelContainer = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  marginBottom: theme.spacing(0.5),\n}));\n\nconst ConditionalContainer = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: theme.spacing(0.5),\n  borderLeft: `4px solid ${theme.palette.semantic.stroke['stroke-weak']}`,\n  marginTop: theme.spacing(2),\n  marginLeft: theme.spacing(1.75),\n  paddingLeft: theme.spacing(3.25),\n}));\n\nconst WeakText = styled('span')(({ theme }) => ({\n  color: theme.palette.semantic.text['text-weak'],\n  marginLeft: theme.spacing(0.5),\n}));\n\n/** Props for a radio group */\nexport interface RadioGroupProps extends Omit<MuiRadioGroupProps, 'name' | 'onChange' | 'value'> {\n  /** Identifier applied to the radio group; also used for the radio name attribute. */\n  fdKey?: string;\n  /** Currently selected option value; use null or undefined when no option should be selected. */\n  value?: string | null;\n  /** Callback fired whenever the selection changes with the event and newly selected value. */\n  onChange: (event: React.ChangeEvent<HTMLInputElement>, value: string) => void;\n  /** Label rendered above the group; accepts plain text or a custom node. */\n  label: React.ReactNode;\n  /** Marks the radio group as required and surfaces the required indicator. */\n  required?: boolean;\n  /** Helper text displayed below the label to provide additional guidance. */\n  helperText?: string;\n  /** Error message shown below the helper text and marks the inputs as invalid. */\n  errorText?: string;\n  /** The children of the radio group. */\n  children?: React.ReactNode;\n}\n\n/**\n * RadioGroup component is a wrapper component for a radio group.\n *\n * @param fdKey - Identifier applied to the radio group; also used for the radio name attribute.\n * @param value - Currently selected option value; use null or undefined when no option should be selected.\n * @param onChange - Callback fired whenever the selection changes with the event and newly selected value.\n * @param label - Label rendered above the group; accepts plain text or a custom node.\n * @param required - Marks the radio group as required and surfaces the required indicator.\n * @param helperText - Helper text displayed below the label to provide additional guidance.\n * @param errorText - Error message shown below the helper text and marks the inputs as invalid.\n * @param children - The children of the radio group.\n * @param groupProps - Additional props to pass to the underlying MUI RadioGroup component.\n * @returns The RadioGroup component.\n */\n\nexport const RadioGroup = ({\n  fdKey = 'radio-default',\n  value = '',\n  onChange,\n  label,\n  required = false,\n  helperText,\n  errorText,\n  children,\n  ...groupProps\n}: RadioGroupProps): React.ReactElement => {\n  const labelId = `${fdKey}-label`;\n  const helperId = helperText ? `${fdKey}-helper` : undefined;\n  const errorId = errorText ? `${fdKey}-error` : undefined;\n  const describedBy = [helperId, errorId].filter(Boolean).join(' ') || undefined;\n\n  const handleChange: MuiRadioGroupProps['onChange'] = (e, newVal) => onChange(e, newVal);\n\n  return (\n    <Box>\n      <StyledLabelContainer>\n        <FormLabel id={labelId}>\n          {label} {required && <WeakText>{' *'}</WeakText>}\n        </FormLabel>\n        {helperText ? <MuiFormHelperText id={helperId}>{helperText}</MuiFormHelperText> : null}\n\n        {!!errorText && (\n          <MuiFormHelperText error id={errorId}>\n            <CancelCircleIcon size={'md'} />\n            {errorText}\n          </MuiFormHelperText>\n        )}\n      </StyledLabelContainer>\n\n      <MuiRadioGroup\n        aria-describedby={describedBy}\n        aria-invalid={errorText ? true : undefined}\n        aria-labelledby={labelId}\n        name={fdKey}\n        onChange={handleChange}\n        value={value}\n        {...groupProps}\n      >\n        {React.Children.map(children, (child) => {\n          if (!isValidElement(child)) {\n            return child;\n          }\n\n          // Check if child has FormControlLabel-specific props (value and control)\n          // This ensures we only process FormControlLabel components, not arbitrary elements like <Box>\n          const childProps = child.props as Partial<FormControlLabelProps>;\n          if (!('value' in childProps) || !('control' in childProps)) {\n            return child;\n          }\n\n          const formControlLabelProps = childProps as FormControlLabelProps;\n          const radioValue =\n            typeof formControlLabelProps.value === 'string'\n              ? formControlLabelProps.value\n              : String(formControlLabelProps.value ?? '');\n          const isSelected = value === radioValue;\n\n          // Extract Radio component from FormControlLabel's control prop\n          const radioControl = formControlLabelProps.control;\n\n          const optionConditionalChildren = formControlLabelProps.children;\n\n          // Clone the Radio component with updated children and checked state\n          const updatedRadio = isValidElement(radioControl)\n            ? React.cloneElement(radioControl, {\n                ...(radioControl.props as Record<string, unknown>),\n                checked: isSelected,\n                error: !!errorText,\n                name: fdKey,\n              } as Partial<unknown>)\n            : radioControl;\n\n          return (\n            <StyledBox key={radioValue}>\n              {React.cloneElement(child as ReactElement<FormControlLabelProps>, {\n                ...formControlLabelProps,\n                children: undefined,\n                control: updatedRadio,\n              })}\n\n              {/* conditional block under the selected option */}\n              {isSelected && optionConditionalChildren && (\n                <ConditionalContainer>{optionConditionalChildren}</ConditionalContainer>\n              )}\n            </StyledBox>\n          );\n        })}\n      </MuiRadioGroup>\n    </Box>\n  );\n};\n\nexport default RadioGroup;\n"],"names":["StyledBox","styled","Box","theme","marginTop","spacing","marginBottom","StyledLabelContainer","display","flexDirection","ConditionalContainer","gap","borderLeft","palette","semantic","stroke","marginLeft","paddingLeft","WeakText","color","text","RadioGroup","fdKey","value","onChange","label","required","helperText","errorText","children","groupProps","labelId","helperId","undefined","errorId","describedBy","filter","Boolean","join","_jsxs","FormLabel","id","_jsx","MuiFormHelperText","error","CancelCircleIcon","size","MuiRadioGroup","name","e","newVal","React","Children","map","child","isValidElement","childProps","props","formControlLabelProps","radioValue","String","isSelected","radioControl","control","optionConditionalChildren","updatedRadio","cloneElement","checked"],"mappings":"iYAWA,MAAMA,EAAYC,EAAOC,EAAPD,EAAY,EAAGE,YAAO,CACjCC,UAAWD,EAAME,QAAQ,GAAIC,aAAc,MAG5CC,EAAuBN,EAAOC,EAAPD,EAAY,EAAGE,YAAO,CACjDK,QAAS,OACTC,cAAe,SACfH,aAAcH,EAAME,QAAQ,QAGxBK,EAAuBT,EAAOC,EAAPD,EAAY,EAAGE,YAAO,CACjDK,QAAS,OACTC,cAAe,SACfE,IAAKR,EAAME,QAAQ,IACnBO,WAAY,aAAaT,EAAMU,QAAQC,SAASC,OAAO,iBACvDX,UAAWD,EAAME,QAAQ,GACzBW,WAAYb,EAAME,QAAQ,MAC1BY,YAAad,EAAME,QAAQ,UAGvBa,EAAWjB,EAAO,OAAPA,EAAe,EAAGE,YAAO,CACxCgB,MAAOhB,EAAMU,QAAQC,SAASM,KAAK,aACnCJ,WAAYb,EAAME,QAAQ,QAsCfgB,EAAa,EACxBC,QAAQ,gBACRC,QAAQ,GACRC,WACAC,QACAC,YAAW,EACXC,aACAC,YACAC,cACGC,MAEH,MAAMC,EAAU,GAAGT,UACbU,EAAWL,EAAa,GAAGL,gBAAiBW,EAC5CC,EAAUN,EAAY,GAAGN,eAAgBW,EACzCE,EAAc,CAACH,EAAUE,GAASE,OAAOC,SAASC,KAAK,WAAQL,EAIrE,OACEM,EAACrC,EAAG,CAAA2B,SAAA,CACFU,EAAChC,EAAoB,CAAAsB,SAAA,CACnBU,EAACC,EAAS,CAACC,GAAIV,EAAOF,SAAA,CACnBJ,EAAK,IAAGC,GAAYgB,EAACxB,EAAQ,CAAAW,SAAE,UAEjCF,EAAae,EAACC,EAAiB,CAACF,GAAIT,EAAQH,SAAGF,IAAkC,OAE/EC,GACDW,EAACI,EAAiB,CAACC,OAAK,EAACH,GAAIP,YAC3BQ,EAACG,EAAgB,CAACC,KAAM,OACvBlB,QAKPc,EAACK,EAAa,CAAA,mBACMZ,EAAW,iBACfP,QAAmBK,EAAS,kBACzBF,EACjBiB,KAAM1B,EACNE,SAvB+C,CAACyB,EAAGC,IAAW1B,EAASyB,EAAGC,GAwB1E3B,MAAOA,KACHO,EAAUD,SAEbsB,EAAMC,SAASC,IAAIxB,GAAWyB,IAC7B,IAAKC,EAAeD,GAClB,OAAOA,EAKT,MAAME,EAAaF,EAAMG,MACzB,KAAM,UAAWD,MAAiB,YAAaA,GAC7C,OAAOF,EAGT,MAAMI,EAAwBF,EACxBG,EACmC,iBAAhCD,EAAsBnC,MACzBmC,EAAsBnC,MACtBqC,OAAOF,EAAsBnC,OAAS,IACtCsC,EAAatC,IAAUoC,EAGvBG,EAAeJ,EAAsBK,QAErCC,EAA4BN,EAAsB7B,SAGlDoC,EAAeV,EAAeO,GAChCX,EAAMe,aAAaJ,EAAc,IAC3BA,EAAaL,MACjBU,QAASN,EACTjB,QAAShB,EACToB,KAAM1B,IAERwC,EAEJ,OACEvB,EAACvC,EAAS,CAAA6B,SAAA,CACPsB,EAAMe,aAAaZ,EAA8C,IAC7DI,EACH7B,cAAUI,EACV8B,QAASE,IAIVJ,GAAcG,GACbtB,EAAChC,EAAoB,CAAAmB,SAAEmC,MATXL"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/molecules/RadioGroup/index.tsx"],"sourcesContent":["import React, { isValidElement, type ReactElement } from 'react';\n\nimport MuiFormHelperText from '@mui/material/FormHelperText';\nimport FormLabel from '@mui/material/FormLabel';\nimport MuiRadioGroup, { type RadioGroupProps as MuiRadioGroupProps } from '@mui/material/RadioGroup';\nimport { styled } from '@mui/material/styles';\n\nimport Box from '@fd/components/atoms/Box';\nimport { type FormControlLabelProps } from '@fd/components/molecules/FormControlLabel';\nimport CancelCircleIcon from '@fd/icons/CancelCircle';\n\nconst StyledBox = styled(Box)(({ theme }) => ({\n  ...{ marginTop: theme.spacing(2), marginBottom: 0 },\n}));\n\nconst StyledLabelContainer = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  marginBottom: theme.spacing(0.5),\n}));\n\nconst ConditionalContainer = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: theme.spacing(0.5),\n  borderLeft: `4px solid ${theme.palette.semantic.stroke['stroke-weak']}`,\n  marginTop: theme.spacing(2),\n  marginLeft: theme.spacing(1.75),\n  paddingLeft: theme.spacing(3.25),\n}));\n\nconst WeakText = styled('span')(({ theme }) => ({\n  color: theme.palette.semantic.text['text-weak'],\n  marginLeft: theme.spacing(0.5),\n}));\n\n/** Props for a radio group */\nexport interface RadioGroupProps extends Omit<MuiRadioGroupProps, 'name' | 'onChange' | 'value'> {\n  /** Identifier applied to the radio group; also used for the radio name attribute. */\n  fdKey?: string;\n  /** The name used to reference the value of the control. If not provided, falls back to `fdKey`. */\n  name?: string;\n  /** Currently selected option value; use null or undefined when no option should be selected. */\n  value?: string | null;\n  /** Callback fired whenever the selection changes with the event and newly selected value. */\n  onChange: (event: React.ChangeEvent<HTMLInputElement>, value: string) => void;\n  /** Label rendered above the group; accepts plain text or a custom node. */\n  label: React.ReactNode;\n  /** Marks the radio group as required and surfaces the required indicator. */\n  required?: boolean;\n  /** Helper text displayed below the label to provide additional guidance. */\n  helperText?: string;\n  /** Error message shown below the helper text and marks the inputs as invalid. */\n  errorText?: string;\n  /** The children of the radio group. */\n  children?: React.ReactNode;\n}\n\n/**\n * RadioGroup component is a wrapper component for a radio group.\n *\n * @param fdKey - Identifier applied to the radio group; also used for the radio name attribute.\n * @param name - The name used to reference the value of the control. If not provided, falls back to fdKey.\n * @param value - Currently selected option value; use null or undefined when no option should be selected.\n * @param onChange - Callback fired whenever the selection changes with the event and newly selected value.\n * @param label - Label rendered above the group; accepts plain text or a custom node.\n * @param required - Marks the radio group as required and surfaces the required indicator.\n * @param helperText - Helper text displayed below the label to provide additional guidance.\n * @param errorText - Error message shown below the helper text and marks the inputs as invalid.\n * @param children - The children of the radio group.\n * @param groupProps - Additional props to pass to the underlying MUI RadioGroup component.\n * @returns The RadioGroup component.\n */\n\nexport const RadioGroup = ({\n  fdKey = 'radio-default',\n  name,\n  value = '',\n  onChange,\n  label,\n  required = false,\n  helperText,\n  errorText,\n  children,\n  ...groupProps\n}: RadioGroupProps): React.ReactElement => {\n  const labelId = `${fdKey}-label`;\n  const helperId = helperText ? `${fdKey}-helper` : undefined;\n  const errorId = errorText ? `${fdKey}-error` : undefined;\n  const describedBy = [helperId, errorId].filter(Boolean).join(' ') || undefined;\n\n  const handleChange: MuiRadioGroupProps['onChange'] = (e, newVal) => onChange(e, newVal);\n\n  return (\n    <Box>\n      <StyledLabelContainer>\n        <FormLabel id={labelId}>\n          {label} {required && <WeakText>{' *'}</WeakText>}\n        </FormLabel>\n        {helperText ? <MuiFormHelperText id={helperId}>{helperText}</MuiFormHelperText> : null}\n\n        {!!errorText && (\n          <MuiFormHelperText error id={errorId}>\n            <CancelCircleIcon size={'md'} />\n            {errorText}\n          </MuiFormHelperText>\n        )}\n      </StyledLabelContainer>\n\n      <MuiRadioGroup\n        aria-describedby={describedBy}\n        aria-invalid={errorText ? true : undefined}\n        aria-labelledby={labelId}\n        name={name ?? fdKey}\n        onChange={handleChange}\n        value={value}\n        {...groupProps}\n      >\n        {React.Children.map(children, (child) => {\n          if (!isValidElement(child)) {\n            return child;\n          }\n\n          // Check if child has FormControlLabel-specific props (value and control)\n          // This ensures we only process FormControlLabel components, not arbitrary elements like <Box>\n          const childProps = child.props as Partial<FormControlLabelProps>;\n          if (!('value' in childProps) || !('control' in childProps)) {\n            return child;\n          }\n\n          const formControlLabelProps = childProps as FormControlLabelProps;\n          const radioValue =\n            typeof formControlLabelProps.value === 'string'\n              ? formControlLabelProps.value\n              : String(formControlLabelProps.value ?? '');\n          const isSelected = value === radioValue;\n\n          // Extract Radio component from FormControlLabel's control prop\n          const radioControl = formControlLabelProps.control;\n\n          const optionConditionalChildren = formControlLabelProps.children;\n\n          // Clone the Radio component with updated children and checked state\n          const updatedRadio = isValidElement(radioControl)\n            ? React.cloneElement(radioControl, {\n                ...(radioControl.props as Record<string, unknown>),\n                checked: isSelected,\n                error: !!errorText,\n                name: name ?? fdKey,\n              } as Partial<unknown>)\n            : radioControl;\n\n          return (\n            <StyledBox key={radioValue}>\n              {React.cloneElement(child as ReactElement<FormControlLabelProps>, {\n                ...formControlLabelProps,\n                children: undefined,\n                control: updatedRadio,\n              })}\n\n              {/* conditional block under the selected option */}\n              {isSelected && optionConditionalChildren && (\n                <ConditionalContainer>{optionConditionalChildren}</ConditionalContainer>\n              )}\n            </StyledBox>\n          );\n        })}\n      </MuiRadioGroup>\n    </Box>\n  );\n};\n\nexport default RadioGroup;\n"],"names":["StyledBox","styled","Box","theme","marginTop","spacing","marginBottom","StyledLabelContainer","display","flexDirection","ConditionalContainer","gap","borderLeft","palette","semantic","stroke","marginLeft","paddingLeft","WeakText","color","text","RadioGroup","fdKey","name","value","onChange","label","required","helperText","errorText","children","groupProps","labelId","helperId","undefined","errorId","describedBy","filter","Boolean","join","_jsxs","FormLabel","id","_jsx","MuiFormHelperText","error","CancelCircleIcon","size","MuiRadioGroup","e","newVal","React","Children","map","child","isValidElement","childProps","props","formControlLabelProps","radioValue","String","isSelected","radioControl","control","optionConditionalChildren","updatedRadio","cloneElement","checked"],"mappings":"iYAWA,MAAMA,EAAYC,EAAOC,EAAPD,EAAY,EAAGE,YAAO,CACjCC,UAAWD,EAAME,QAAQ,GAAIC,aAAc,MAG5CC,EAAuBN,EAAOC,EAAPD,EAAY,EAAGE,YAAO,CACjDK,QAAS,OACTC,cAAe,SACfH,aAAcH,EAAME,QAAQ,QAGxBK,EAAuBT,EAAOC,EAAPD,EAAY,EAAGE,YAAO,CACjDK,QAAS,OACTC,cAAe,SACfE,IAAKR,EAAME,QAAQ,IACnBO,WAAY,aAAaT,EAAMU,QAAQC,SAASC,OAAO,iBACvDX,UAAWD,EAAME,QAAQ,GACzBW,WAAYb,EAAME,QAAQ,MAC1BY,YAAad,EAAME,QAAQ,UAGvBa,EAAWjB,EAAO,OAAPA,EAAe,EAAGE,YAAO,CACxCgB,MAAOhB,EAAMU,QAAQC,SAASM,KAAK,aACnCJ,WAAYb,EAAME,QAAQ,QAyCfgB,EAAa,EACxBC,QAAQ,gBACRC,OACAC,QAAQ,GACRC,WACAC,QACAC,YAAW,EACXC,aACAC,YACAC,cACGC,MAEH,MAAMC,EAAU,GAAGV,UACbW,EAAWL,EAAa,GAAGN,gBAAiBY,EAC5CC,EAAUN,EAAY,GAAGP,eAAgBY,EACzCE,EAAc,CAACH,EAAUE,GAASE,OAAOC,SAASC,KAAK,WAAQL,EAIrE,OACEM,EAACtC,EAAG,CAAA4B,SAAA,CACFU,EAACjC,EAAoB,CAAAuB,SAAA,CACnBU,EAACC,EAAS,CAACC,GAAIV,EAAOF,SAAA,CACnBJ,EAAK,IAAGC,GAAYgB,EAACzB,EAAQ,CAAAY,SAAE,UAEjCF,EAAae,EAACC,EAAiB,CAACF,GAAIT,EAAQH,SAAGF,IAAkC,OAE/EC,GACDW,EAACI,EAAiB,CAACC,OAAK,EAACH,GAAIP,EAAOL,SAAA,CAClCa,EAACG,EAAgB,CAACC,KAAM,OACvBlB,QAKPc,EAACK,EAAa,CAAA,mBACMZ,EAAW,iBACfP,QAAmBK,EAAS,kBACzBF,EACjBT,KAAMA,GAAQD,EACdG,SAvB+C,CAACwB,EAAGC,IAAWzB,EAASwB,EAAGC,GAwB1E1B,MAAOA,KACHO,EAAUD,SAEbqB,EAAMC,SAASC,IAAIvB,GAAWwB,IAC7B,IAAKC,EAAeD,GAClB,OAAOA,EAKT,MAAME,EAAaF,EAAMG,MACzB,KAAM,UAAWD,MAAiB,YAAaA,GAC7C,OAAOF,EAGT,MAAMI,EAAwBF,EACxBG,EACmC,iBAAhCD,EAAsBlC,MACzBkC,EAAsBlC,MACtBoC,OAAOF,EAAsBlC,OAAS,IACtCqC,EAAarC,IAAUmC,EAGvBG,EAAeJ,EAAsBK,QAErCC,EAA4BN,EAAsB5B,SAGlDmC,EAAeV,EAAeO,GAChCX,EAAMe,aAAaJ,EAAc,IAC3BA,EAAaL,MACjBU,QAASN,EACThB,QAAShB,EACTN,KAAMA,GAAQD,IAEhBwC,EAEJ,OACEtB,EAACxC,EAAS,CAAA8B,SAAA,CACPqB,EAAMe,aAAaZ,EAA8C,IAC7DI,EACH5B,cAAUI,EACV6B,QAASE,IAIVJ,GAAcG,GACbrB,EAACjC,EAAoB,CAAAoB,SAAEkC,MATXL"}

package/dist/components/molecules/Tooltip/index.cjs.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("@mui/material/Box"),i=require("@mui/material/styles"),r=require("@mui/material/Tooltip"),n=require("../../atoms/Button/index.cjs.js"),a=require("../../atoms/Link/index.cjs.js"),o=require("@mui/material/Typography"),s=require("../ButtonGroup/index.cjs.js");const l=e=>({"bottom-right":"top-end","bottom-left":"top-start","bottom-center":"top",left:"left",right:"right"}[e]??"top"),c=i.styled((({className:t,...i})=>e.jsx(r,{...i,classes:{popper:t}})),{shouldForwardProp:e=>"isLarge"!==e})((({theme:e,isLarge:t})=>({"& .MuiTooltip-tooltip":{backgroundColor:e.palette.semantic.background["background-inverse"],color:e.palette.semantic.text["text-weak"],borderRadius:e.radius["radius-8"],paddingLeft:e.spacing(2),paddingRight:e.spacing(2),paddingTop:t?e.spacing(2):e.spacing(1),paddingBottom:t?e.spacing(2):e.spacing(1),width:t?"332px":"auto",boxShadow:e.customShadows?.overlay},"& .MuiTooltip-arrow":{color:e.palette.semantic.background["background-inverse"]}}))),d=i.styled(t)((({theme:e})=>({display:"flex",flexDirection:"column",marginTop:e.spacing(.5),gap:e.spacing(1),alignItems:"flex-start",justifyContent:"center",width:"100%"}))),p=i.styled(t)((()=>({display:"flex",alignItems:"center",width:"100%",justifyContent:"space-between"}))),u=i.styled(o)((({theme:e})=>({color:e.palette.semantic.text["text-inverse-strong"]}))),g=i.styled(o)((({theme:e})=>({color:e.palette.semantic.text["text-inverse-weak"]}))),m=i.styled(t)((()=>({display:"flex",justifyContent:"flex-end",flexGrow:1}))),x=({children:t,title:i,description:r,textLink:o,size:x="small",actionButtons:h,placement:f="bottom-center",...y})=>{const j="large"===x,b=Boolean(o||h),k=e.jsxs(e.Fragment,{children:[e.jsx(u,{variant:j?"captionStrong":"captionWeak",children:i}),j&&r&&e.jsxs(d,{children:[e.jsx(g,{variant:"captionWeak",children:r}),b&&e.jsxs(p,{children:[(()=>{if(o)return e.jsx(a.Link,{fdKey:o.fdKey,href:o.href,iconLeft:o.iconLeft,iconRight:o.iconRight,size:"caption",tone:"Inverse Strong",underline:!1,weight:"bold",children:o.children})})(),(()=>{if(h)return Array.isArray(h)?e.jsx(s,{align:"right",layout:"horizontal",order:"default",size:"small",children:h.map(((t,i)=>{const r=`action-button-${i}`;return e.jsx(n.Button,{fdKey:t.label,onClick:t.onClick,tone:"inverse",variant:t.variant,children:t.label},r)}))}):e.jsx(m,{children:e.jsx(n.Button,{fdKey:h.label,onClick:h.onClick,size:"small",tone:"inverse",variant:h.variant,children:h.label})})})()]})]})]});return e.jsx(c,{...y,arrow:!0,isLarge:j,placement:l(f),title:k,children:t})};exports.Tooltip=x,exports.default=x;
+//# sourceMappingURL=index.cjs.js.map

package/dist/components/molecules/Tooltip/index.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs.js","sources":["../../../../src/components/molecules/Tooltip/index.tsx"],"sourcesContent":["import Box from '@mui/material/Box';\nimport { styled } from '@mui/material/styles';\nimport MUITooltip, { type TooltipProps as MUITooltipProps } from '@mui/material/Tooltip';\n\nimport Button from '@fd/components/atoms/Button';\nimport type { ButtonType } from '@fd/components/atoms/Button/getButtonStyles';\nimport Link, { type StyledLinkProps } from '@fd/components/atoms/Link';\nimport Typography from '@fd/components/atoms/Typography';\nimport ButtonGroup from '@fd/components/molecules/ButtonGroup';\n\ntype TooltipPlacement = 'bottom-center' | 'bottom-left' | 'bottom-right' | 'left' | 'right';\n\n// Map custom placement values to MUI placement values\nconst mapPlacementToMUI = (placement: TooltipPlacement): MUITooltipProps['placement'] => {\n  const placementMap: Record<TooltipPlacement, MUITooltipProps['placement']> = {\n    'bottom-right': 'top-end',\n    'bottom-left': 'top-start',\n    'bottom-center': 'top',\n    left: 'left',\n    right: 'right',\n  };\n\n  return placementMap[placement] ?? 'top';\n};\n\nconst StyledTooltip = styled(\n  ({ className, ...props }: MUITooltipProps) => <MUITooltip {...props} classes={{ popper: className }} />,\n  { shouldForwardProp: (prop) => prop !== 'isLarge' },\n)<{ isLarge: boolean }>(({ theme, isLarge }) => ({\n  '& .MuiTooltip-tooltip': {\n    backgroundColor: theme.palette.semantic.background['background-inverse'],\n    color: theme.palette.semantic.text['text-weak'],\n    borderRadius: theme.radius['radius-8'],\n    paddingLeft: theme.spacing(2),\n    paddingRight: theme.spacing(2),\n    paddingTop: isLarge ? theme.spacing(2) : theme.spacing(1),\n    paddingBottom: isLarge ? theme.spacing(2) : theme.spacing(1),\n    width: isLarge ? '332px' : 'auto',\n    boxShadow: theme.customShadows?.overlay,\n  },\n  '& .MuiTooltip-arrow': {\n    color: theme.palette.semantic.background['background-inverse'],\n  },\n}));\n\nconst StyledTooltipContent = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  marginTop: theme.spacing(0.5),\n  gap: theme.spacing(1),\n  alignItems: 'flex-start',\n  justifyContent: 'center',\n  width: '100%',\n}));\n\nconst StyledTooltipActionContainer = styled(Box)(() => ({\n  display: 'flex',\n  alignItems: 'center',\n  width: '100%',\n  justifyContent: 'space-between',\n}));\n\nconst StyledTitle = styled(Typography)(({ theme }) => ({\n  color: theme.palette.semantic.text['text-inverse-strong'],\n}));\n\nconst StyledDescription = styled(Typography)(({ theme }) => ({\n  color: theme.palette.semantic.text['text-inverse-weak'],\n}));\n\nconst StyledSingleButtonContainer = styled(Box)(() => ({\n  display: 'flex',\n  justifyContent: 'flex-end',\n  flexGrow: 1,\n}));\n\n/** Props for the ActionButton component */\nexport interface ActionButton {\n  /** Text label for the action button */\n  label: string;\n  /** Visual variant of the action button */\n  variant?: ButtonType;\n  /** Callback function when the action button is clicked */\n  onClick: () => void;\n}\n\n/** Props for the Tooltip component */\nexport interface TooltipProps extends Omit<MUITooltipProps, 'arrow' | 'placement'> {\n  /** Placement of the tooltip */\n  placement?: TooltipPlacement;\n  /** Size of the tooltip */\n  size?: 'large' | 'small';\n  /** Description of the tooltip */\n  description?: string;\n  /** Action buttons of the tooltip */\n  actionButtons?: ActionButton | ActionButton[];\n  /** Text link of the tooltip */\n  textLink?: StyledLinkProps;\n}\n\n/**\n * A floating message that’s displayed on hover or press of an interactive element.\n *\n * @param props - The component props\n * @returns A component with a tooltip\n */\nexport const Tooltip = ({\n  children,\n  title,\n  description,\n  textLink,\n  size = 'small',\n  actionButtons,\n  placement = 'bottom-center',\n  ...props\n}: TooltipProps): JSX.Element => {\n  const isLarge = size === 'large';\n\n  const renderTextLink = (): React.ReactNode => {\n    if (!textLink) {\n      return undefined;\n    }\n\n    return (\n      <Link\n        fdKey={textLink.fdKey}\n        href={textLink.href}\n        iconLeft={textLink.iconLeft}\n        iconRight={textLink.iconRight}\n        size=\"caption\"\n        tone=\"Inverse Strong\"\n        underline={false}\n        weight=\"bold\"\n      >\n        {textLink.children}\n      </Link>\n    );\n  };\n\n  const renderActions = (): React.ReactNode => {\n    if (!actionButtons) {\n      return undefined;\n    }\n\n    if (Array.isArray(actionButtons)) {\n      return (\n        <ButtonGroup align=\"right\" layout=\"horizontal\" order=\"default\" size=\"small\">\n          {actionButtons.map((button, index) => {\n            const key = `action-button-${index}`;\n\n            return (\n              <Button\n                key={key}\n                fdKey={button.label}\n                onClick={button.onClick}\n                tone=\"inverse\"\n                variant={button.variant}\n              >\n                {button.label}\n              </Button>\n            );\n          })}\n        </ButtonGroup>\n      );\n    }\n\n    return (\n      <StyledSingleButtonContainer>\n        <Button\n          fdKey={actionButtons.label}\n          onClick={actionButtons.onClick}\n          size=\"small\"\n          tone=\"inverse\"\n          variant={actionButtons.variant}\n        >\n          {actionButtons.label}\n        </Button>\n      </StyledSingleButtonContainer>\n    );\n  };\n\n  const hasActionContent = Boolean(textLink || actionButtons);\n\n  const renderTooltipContent = (\n    <>\n      <StyledTitle variant={!isLarge ? 'captionWeak' : 'captionStrong'}>{title}</StyledTitle>\n      {isLarge && description && (\n        <StyledTooltipContent>\n          <StyledDescription variant=\"captionWeak\">{description}</StyledDescription>\n          {hasActionContent && (\n            <StyledTooltipActionContainer>\n              {renderTextLink()}\n              {renderActions()}\n            </StyledTooltipActionContainer>\n          )}\n        </StyledTooltipContent>\n      )}\n    </>\n  );\n\n  return (\n    <StyledTooltip\n      {...props}\n      arrow\n      isLarge={isLarge}\n      placement={mapPlacementToMUI(placement)}\n      title={renderTooltipContent}\n    >\n      {children}\n    </StyledTooltip>\n  );\n};\n\nexport default Tooltip;\n"],"names":["mapPlacementToMUI","placement","left","right","StyledTooltip","styled","className","props","_jsx","MUITooltip","classes","popper","shouldForwardProp","prop","theme","isLarge","backgroundColor","palette","semantic","background","color","text","borderRadius","radius","paddingLeft","spacing","paddingRight","paddingTop","paddingBottom","width","boxShadow","customShadows","overlay","StyledTooltipContent","Box","display","flexDirection","marginTop","gap","alignItems","justifyContent","StyledTooltipActionContainer","StyledTitle","Typography","StyledDescription","StyledSingleButtonContainer","flexGrow","Tooltip","children","title","description","textLink","size","actionButtons","hasActionContent","Boolean","renderTooltipContent","_jsxs","_Fragment","variant","Link","fdKey","href","iconLeft","iconRight","tone","underline","weight","renderTextLink","Array","isArray","ButtonGroup","align","layout","order","map","button","index","key","Button","label","onClick","renderActions","arrow"],"mappings":"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"}

package/dist/components/molecules/Tooltip/index.d.ts

@@ -0,0 +1,37 @@
+import { TooltipProps as TooltipProps$1 } from '@mui/material/Tooltip';
+import { ButtonType } from '@fd/components/atoms/Button/getButtonStyles';
+import { StyledLinkProps } from '@fd/components/atoms/Link';
+
+type TooltipPlacement = 'bottom-center' | 'bottom-left' | 'bottom-right' | 'left' | 'right';
+/** Props for the ActionButton component */
+interface ActionButton {
+    /** Text label for the action button */
+    label: string;
+    /** Visual variant of the action button */
+    variant?: ButtonType;
+    /** Callback function when the action button is clicked */
+    onClick: () => void;
+}
+/** Props for the Tooltip component */
+interface TooltipProps extends Omit<TooltipProps$1, 'arrow' | 'placement'> {
+    /** Placement of the tooltip */
+    placement?: TooltipPlacement;
+    /** Size of the tooltip */
+    size?: 'large' | 'small';
+    /** Description of the tooltip */
+    description?: string;
+    /** Action buttons of the tooltip */
+    actionButtons?: ActionButton | ActionButton[];
+    /** Text link of the tooltip */
+    textLink?: StyledLinkProps;
+}
+/**
+ * A floating message that’s displayed on hover or press of an interactive element.
+ *
+ * @param props - The component props
+ * @returns A component with a tooltip
+ */
+declare const Tooltip: ({ children, title, description, textLink, size, actionButtons, placement, ...props }: TooltipProps) => JSX.Element;
+
+export { Tooltip, Tooltip as default };
+export type { ActionButton, TooltipProps };

package/dist/components/molecules/Tooltip/index.js

@@ -0,0 +1,2 @@
+import{jsx as t,jsxs as e,Fragment as i}from"react/jsx-runtime";import o from"@mui/material/Box";import{styled as r}from"@mui/material/styles";import n from"@mui/material/Tooltip";import{Button as a}from"../../atoms/Button/index.js";import{Link as l}from"../../atoms/Link/index.js";import s from"@mui/material/Typography";import c from"../ButtonGroup/index.js";const p=t=>({"bottom-right":"top-end","bottom-left":"top-start","bottom-center":"top",left:"left",right:"right"}[t]??"top"),d=r((({className:e,...i})=>t(n,{...i,classes:{popper:e}})),{shouldForwardProp:t=>"isLarge"!==t})((({theme:t,isLarge:e})=>({"& .MuiTooltip-tooltip":{backgroundColor:t.palette.semantic.background["background-inverse"],color:t.palette.semantic.text["text-weak"],borderRadius:t.radius["radius-8"],paddingLeft:t.spacing(2),paddingRight:t.spacing(2),paddingTop:e?t.spacing(2):t.spacing(1),paddingBottom:e?t.spacing(2):t.spacing(1),width:e?"332px":"auto",boxShadow:t.customShadows?.overlay},"& .MuiTooltip-arrow":{color:t.palette.semantic.background["background-inverse"]}}))),m=r(o)((({theme:t})=>({display:"flex",flexDirection:"column",marginTop:t.spacing(.5),gap:t.spacing(1),alignItems:"flex-start",justifyContent:"center",width:"100%"}))),g=r(o)((()=>({display:"flex",alignItems:"center",width:"100%",justifyContent:"space-between"}))),h=r(s)((({theme:t})=>({color:t.palette.semantic.text["text-inverse-strong"]}))),u=r(s)((({theme:t})=>({color:t.palette.semantic.text["text-inverse-weak"]}))),f=r(o)((()=>({display:"flex",justifyContent:"flex-end",flexGrow:1}))),x=({children:o,title:r,description:n,textLink:s,size:x="small",actionButtons:b,placement:y="bottom-center",...k})=>{const v="large"===x,w=Boolean(s||b),C=e(i,{children:[t(h,{variant:v?"captionStrong":"captionWeak",children:r}),v&&n&&e(m,{children:[t(u,{variant:"captionWeak",children:n}),w&&e(g,{children:[(()=>{if(s)return t(l,{fdKey:s.fdKey,href:s.href,iconLeft:s.iconLeft,iconRight:s.iconRight,size:"caption",tone:"Inverse Strong",underline:!1,weight:"bold",children:s.children})})(),(()=>{if(b)return Array.isArray(b)?t(c,{align:"right",layout:"horizontal",order:"default",size:"small",children:b.map(((e,i)=>{const o=`action-button-${i}`;return t(a,{fdKey:e.label,onClick:e.onClick,tone:"inverse",variant:e.variant,children:e.label},o)}))}):t(f,{children:t(a,{fdKey:b.label,onClick:b.onClick,size:"small",tone:"inverse",variant:b.variant,children:b.label})})})()]})]})]});return t(d,{...k,arrow:!0,isLarge:v,placement:p(y),title:C,children:o})};export{x as Tooltip,x as default};
+//# sourceMappingURL=index.js.map

package/dist/components/molecules/Tooltip/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/molecules/Tooltip/index.tsx"],"sourcesContent":["import Box from '@mui/material/Box';\nimport { styled } from '@mui/material/styles';\nimport MUITooltip, { type TooltipProps as MUITooltipProps } from '@mui/material/Tooltip';\n\nimport Button from '@fd/components/atoms/Button';\nimport type { ButtonType } from '@fd/components/atoms/Button/getButtonStyles';\nimport Link, { type StyledLinkProps } from '@fd/components/atoms/Link';\nimport Typography from '@fd/components/atoms/Typography';\nimport ButtonGroup from '@fd/components/molecules/ButtonGroup';\n\ntype TooltipPlacement = 'bottom-center' | 'bottom-left' | 'bottom-right' | 'left' | 'right';\n\n// Map custom placement values to MUI placement values\nconst mapPlacementToMUI = (placement: TooltipPlacement): MUITooltipProps['placement'] => {\n  const placementMap: Record<TooltipPlacement, MUITooltipProps['placement']> = {\n    'bottom-right': 'top-end',\n    'bottom-left': 'top-start',\n    'bottom-center': 'top',\n    left: 'left',\n    right: 'right',\n  };\n\n  return placementMap[placement] ?? 'top';\n};\n\nconst StyledTooltip = styled(\n  ({ className, ...props }: MUITooltipProps) => <MUITooltip {...props} classes={{ popper: className }} />,\n  { shouldForwardProp: (prop) => prop !== 'isLarge' },\n)<{ isLarge: boolean }>(({ theme, isLarge }) => ({\n  '& .MuiTooltip-tooltip': {\n    backgroundColor: theme.palette.semantic.background['background-inverse'],\n    color: theme.palette.semantic.text['text-weak'],\n    borderRadius: theme.radius['radius-8'],\n    paddingLeft: theme.spacing(2),\n    paddingRight: theme.spacing(2),\n    paddingTop: isLarge ? theme.spacing(2) : theme.spacing(1),\n    paddingBottom: isLarge ? theme.spacing(2) : theme.spacing(1),\n    width: isLarge ? '332px' : 'auto',\n    boxShadow: theme.customShadows?.overlay,\n  },\n  '& .MuiTooltip-arrow': {\n    color: theme.palette.semantic.background['background-inverse'],\n  },\n}));\n\nconst StyledTooltipContent = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  marginTop: theme.spacing(0.5),\n  gap: theme.spacing(1),\n  alignItems: 'flex-start',\n  justifyContent: 'center',\n  width: '100%',\n}));\n\nconst StyledTooltipActionContainer = styled(Box)(() => ({\n  display: 'flex',\n  alignItems: 'center',\n  width: '100%',\n  justifyContent: 'space-between',\n}));\n\nconst StyledTitle = styled(Typography)(({ theme }) => ({\n  color: theme.palette.semantic.text['text-inverse-strong'],\n}));\n\nconst StyledDescription = styled(Typography)(({ theme }) => ({\n  color: theme.palette.semantic.text['text-inverse-weak'],\n}));\n\nconst StyledSingleButtonContainer = styled(Box)(() => ({\n  display: 'flex',\n  justifyContent: 'flex-end',\n  flexGrow: 1,\n}));\n\n/** Props for the ActionButton component */\nexport interface ActionButton {\n  /** Text label for the action button */\n  label: string;\n  /** Visual variant of the action button */\n  variant?: ButtonType;\n  /** Callback function when the action button is clicked */\n  onClick: () => void;\n}\n\n/** Props for the Tooltip component */\nexport interface TooltipProps extends Omit<MUITooltipProps, 'arrow' | 'placement'> {\n  /** Placement of the tooltip */\n  placement?: TooltipPlacement;\n  /** Size of the tooltip */\n  size?: 'large' | 'small';\n  /** Description of the tooltip */\n  description?: string;\n  /** Action buttons of the tooltip */\n  actionButtons?: ActionButton | ActionButton[];\n  /** Text link of the tooltip */\n  textLink?: StyledLinkProps;\n}\n\n/**\n * A floating message that’s displayed on hover or press of an interactive element.\n *\n * @param props - The component props\n * @returns A component with a tooltip\n */\nexport const Tooltip = ({\n  children,\n  title,\n  description,\n  textLink,\n  size = 'small',\n  actionButtons,\n  placement = 'bottom-center',\n  ...props\n}: TooltipProps): JSX.Element => {\n  const isLarge = size === 'large';\n\n  const renderTextLink = (): React.ReactNode => {\n    if (!textLink) {\n      return undefined;\n    }\n\n    return (\n      <Link\n        fdKey={textLink.fdKey}\n        href={textLink.href}\n        iconLeft={textLink.iconLeft}\n        iconRight={textLink.iconRight}\n        size=\"caption\"\n        tone=\"Inverse Strong\"\n        underline={false}\n        weight=\"bold\"\n      >\n        {textLink.children}\n      </Link>\n    );\n  };\n\n  const renderActions = (): React.ReactNode => {\n    if (!actionButtons) {\n      return undefined;\n    }\n\n    if (Array.isArray(actionButtons)) {\n      return (\n        <ButtonGroup align=\"right\" layout=\"horizontal\" order=\"default\" size=\"small\">\n          {actionButtons.map((button, index) => {\n            const key = `action-button-${index}`;\n\n            return (\n              <Button\n                key={key}\n                fdKey={button.label}\n                onClick={button.onClick}\n                tone=\"inverse\"\n                variant={button.variant}\n              >\n                {button.label}\n              </Button>\n            );\n          })}\n        </ButtonGroup>\n      );\n    }\n\n    return (\n      <StyledSingleButtonContainer>\n        <Button\n          fdKey={actionButtons.label}\n          onClick={actionButtons.onClick}\n          size=\"small\"\n          tone=\"inverse\"\n          variant={actionButtons.variant}\n        >\n          {actionButtons.label}\n        </Button>\n      </StyledSingleButtonContainer>\n    );\n  };\n\n  const hasActionContent = Boolean(textLink || actionButtons);\n\n  const renderTooltipContent = (\n    <>\n      <StyledTitle variant={!isLarge ? 'captionWeak' : 'captionStrong'}>{title}</StyledTitle>\n      {isLarge && description && (\n        <StyledTooltipContent>\n          <StyledDescription variant=\"captionWeak\">{description}</StyledDescription>\n          {hasActionContent && (\n            <StyledTooltipActionContainer>\n              {renderTextLink()}\n              {renderActions()}\n            </StyledTooltipActionContainer>\n          )}\n        </StyledTooltipContent>\n      )}\n    </>\n  );\n\n  return (\n    <StyledTooltip\n      {...props}\n      arrow\n      isLarge={isLarge}\n      placement={mapPlacementToMUI(placement)}\n      title={renderTooltipContent}\n    >\n      {children}\n    </StyledTooltip>\n  );\n};\n\nexport default Tooltip;\n"],"names":["mapPlacementToMUI","placement","left","right","StyledTooltip","styled","className","props","_jsx","MUITooltip","classes","popper","shouldForwardProp","prop","theme","isLarge","backgroundColor","palette","semantic","background","color","text","borderRadius","radius","paddingLeft","spacing","paddingRight","paddingTop","paddingBottom","width","boxShadow","customShadows","overlay","StyledTooltipContent","Box","display","flexDirection","marginTop","gap","alignItems","justifyContent","StyledTooltipActionContainer","StyledTitle","Typography","StyledDescription","StyledSingleButtonContainer","flexGrow","Tooltip","children","title","description","textLink","size","actionButtons","hasActionContent","Boolean","renderTooltipContent","_jsxs","_Fragment","variant","Link","fdKey","href","iconLeft","iconRight","tone","underline","weight","renderTextLink","Array","isArray","ButtonGroup","align","layout","order","map","button","index","key","Button","label","onClick","renderActions","arrow"],"mappings":"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"}

package/dist/components/organisms/AssetManager/index.cjs.js

@@ -0,0 +1,2 @@
+"use strict";var e=require("react/jsx-runtime"),t=require("react"),i=require("@mui/material/styles"),r=require("@mui/material/Box"),a=require("../../atoms/Card/index.cjs.js"),s=require("@mui/material/Grid2"),l=require("@mui/material/Typography"),o=require("../../molecules/Modal/index.cjs.js"),n=require("../../../icons/CheckmarkCircleSolid/index.cjs.js");const c=i.styled(r)((({theme:e})=>({marginBottom:e.spacing(3)}))),d=i.styled(r,{shouldForwardProp:e=>"selected"!==e})((({theme:e,selected:t})=>({width:"100%",cursor:"pointer",position:"relative","& .MuiCard-root":{borderWidth:"2px",borderColor:t?e.palette.semantic.stroke["stroke-selected"]:"transparent",boxShadow:t?"none":`inset 0 0 0 1px ${e.palette.semantic.stroke["stroke-weak"]}`},"&:hover":{opacity:.9},"&:focus-visible .MuiCard-root":{borderColor:e.palette.semantic.stroke["stroke-selected"],boxShadow:"none"}}))),m=i.styled(n)((({theme:e})=>({position:"absolute",top:e.spacing(2),left:e.spacing(2),zIndex:1,color:e.palette.semantic.icon["icon-primary"],"& circle":{fill:e.palette.common.white}})));module.exports=({open:i,onClose:r,onSelect:n,assets:u,multiSelect:p=!1})=>{const[x,h]=t.useState([]);t.useEffect((()=>{i||h([])}),[i]);const g=()=>{h([]),r()},b=()=>{if(n&&u){const e=u.filter((e=>x.includes(e.id)));n(e)}h([]),r()},j=e=>{h((t=>p?t.includes(e)?t.filter((t=>t!==e)):[...t,e]:t.includes(e)?[]:[e]))};return e.jsxs(o,{actions:[{label:"Cancel",onClick:g,variant:"secondary",tone:"neutral",id:"asset-manager-cancel"},{label:"Select",onClick:b,variant:"primary",disabled:0===x.length,id:"asset-manager-select"}],onClose:g,open:i,size:"large",title:"Select Images",children:[e.jsx(c,{children:e.jsx(l,{variant:"h3Strong",children:"Tabs placeholder text"})}),e.jsx(s,{container:!0,component:"ul",spacing:1,sx:{listStyle:"none",margin:0,padding:0},children:u?.map((t=>{const i=x.includes(t.id);return e.jsx(s,{"aria-selected":i,component:"li",size:{widescreen:3,desktop:3,mobile:6,tablet:4},children:e.jsxs(d,{"aria-label":"Select "+t.fileName,onClick:()=>j(t.id),onKeyDown:e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),j(t.id))},role:"button",selected:i,tabIndex:0,children:[i&&e.jsx(m,{size:"lg"}),e.jsx(a,{content:t.fileName,heading:"",imageAlt:t.metadata.altText,imageSrc:t.url})]})},t.id)}))})]})};
+//# sourceMappingURL=index.cjs.js.map

package/dist/components/organisms/AssetManager/index.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs.js","sources":["../../../../src/components/organisms/AssetManager/index.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\n\nimport { styled } from '@mui/material/styles';\n\nimport Box from '@fd/components/atoms/Box';\nimport Card from '@fd/components/atoms/Card';\nimport Grid from '@fd/components/atoms/Grid';\nimport Typography from '@fd/components/atoms/Typography';\nimport Modal from '@fd/components/molecules/Modal';\nimport CheckmarkCircleSolidIcon from '@fd/icons/CheckmarkCircleSolid';\n\nimport type { Asset } from './types';\n\nconst StyledTabsContainer = styled(Box)(({ theme }) => ({\n  marginBottom: theme.spacing(3),\n}));\n\nconst StyledCardWrapper = styled(Box, {\n  shouldForwardProp: (prop) => prop !== 'selected',\n})<{ selected?: boolean }>(({ theme, selected }) => ({\n  width: '100%',\n  cursor: 'pointer',\n  position: 'relative',\n  '& .MuiCard-root': {\n    // Always use 2px border to prevent layout shift\n    borderWidth: '2px',\n    borderColor: selected ? theme.palette.semantic.stroke['stroke-selected'] : 'transparent',\n    // Use box-shadow to create the visual 1px border when not selected\n    // This prevents layout shift while maintaining the visual appearance\n    boxShadow: selected ? 'none' : `inset 0 0 0 1px ${theme.palette.semantic.stroke['stroke-weak']}`,\n  },\n  '&:hover': {\n    opacity: 0.9,\n  },\n  '&:focus-visible .MuiCard-root': {\n    borderColor: theme.palette.semantic.stroke['stroke-selected'],\n    boxShadow: 'none',\n  },\n}));\n\nconst StyledCheckmarkIcon = styled(CheckmarkCircleSolidIcon)(({ theme }) => ({\n  position: 'absolute',\n  top: theme.spacing(2),\n  left: theme.spacing(2),\n  zIndex: 1,\n  color: theme.palette.semantic.icon['icon-primary'],\n  '& circle': {\n    fill: theme.palette.common.white,\n  },\n}));\n\n/**\n * Props for the AssetManager component.\n * Provides a modal interface for selecting images from a grid display.\n * It supports both single and multiple image selection modes.\n *\n * import AssetManager from '@flipdish/portal-library/components/organisms/AssetManager';\n *\n * ```tsx\n * import AssetManager from '@flipdish/portal-library/components/organisms/AssetManager';\n */\nexport interface AssetManagerProps {\n  /** Whether the asset manager modal is open */\n  open: boolean;\n  /** Callback function when the modal is closed or cancelled */\n  onClose: () => void;\n  /** Callback function when assets are selected */\n  onSelect?: (selectedAssets: Asset[]) => void;\n  /** Assets to display if no api is provided */\n  assets?: Asset[];\n  /** Whether multiple assets can be selected. Defaults to false */\n  multiSelect?: boolean;\n}\n\nconst AssetManager: React.FC<AssetManagerProps> = ({\n  open,\n  onClose,\n  onSelect,\n  assets,\n  multiSelect = false,\n}) => {\n  const [selectedAssetIds, setSelectedAssetIds] = useState<string[]>([]);\n\n  // Reset selection when modal opens/closes\n  useEffect(() => {\n    if (!open) {\n      setSelectedAssetIds([]);\n    }\n  }, [open]);\n\n  const handleCancel = (): void => {\n    setSelectedAssetIds([]);\n    onClose();\n  };\n\n  const handleSelect = (): void => {\n    if (onSelect && assets) {\n      const selectedAssets = assets.filter((asset) => selectedAssetIds.includes(asset.id));\n      onSelect(selectedAssets);\n    }\n    setSelectedAssetIds([]);\n    onClose();\n  };\n\n  const handleAssetClick = (assetId: string): void => {\n    setSelectedAssetIds((prev) => {\n      if (multiSelect) {\n        if (prev.includes(assetId)) {\n          return prev.filter((id) => id !== assetId);\n        }\n        return [...prev, assetId];\n      } else {\n        if (prev.includes(assetId)) {\n          return [];\n        }\n        return [assetId];\n      }\n    });\n  };\n\n  const getActionButtons = (): Array<{\n    disabled?: boolean;\n    id: string;\n    label: string;\n    onClick: () => void;\n    tone?: 'brand' | 'neutral';\n    variant: 'primary' | 'secondary';\n  }> => {\n    return [\n      {\n        label: 'Cancel',\n        onClick: handleCancel,\n        variant: 'secondary',\n        tone: 'neutral',\n        id: 'asset-manager-cancel',\n      },\n      {\n        label: 'Select',\n        onClick: handleSelect,\n        variant: 'primary',\n        disabled: selectedAssetIds.length === 0,\n        id: 'asset-manager-select',\n      },\n    ];\n  };\n\n  const renderBrowseTab = (): React.ReactElement => (\n    <Grid container component=\"ul\" spacing={1} sx={{ listStyle: 'none', margin: 0, padding: 0 }}>\n      {assets?.map((asset: Asset) => {\n        const isSelected = selectedAssetIds.includes(asset.id);\n        return (\n          <Grid\n            key={asset.id}\n            aria-selected={isSelected}\n            component=\"li\"\n            size={{ widescreen: 3, desktop: 3, mobile: 6, tablet: 4 }}\n          >\n            <StyledCardWrapper\n              aria-label={'Select ' + asset.fileName} // TODO: translate this text when translate provider is added\n              onClick={() => handleAssetClick(asset.id)}\n              onKeyDown={(e) => {\n                if (e.key === 'Enter' || e.key === ' ') {\n                  e.preventDefault();\n                  handleAssetClick(asset.id);\n                }\n              }}\n              role=\"button\"\n              selected={isSelected}\n              tabIndex={0}\n            >\n              {isSelected && <StyledCheckmarkIcon size=\"lg\" />}\n              <Card\n                content={asset.fileName}\n                heading=\"\"\n                imageAlt={asset.metadata.altText}\n                imageSrc={asset.url}\n              />\n            </StyledCardWrapper>\n          </Grid>\n        );\n      })}\n    </Grid>\n  );\n\n  return (\n    <Modal\n      actions={getActionButtons()}\n      onClose={handleCancel}\n      open={open}\n      size=\"large\"\n      title={'Select Images'} // TODO: translate this text when translate provider is added\n    >\n      <StyledTabsContainer>\n        {/* TODO: replace this with tabs component when available */}\n        <Typography variant=\"h3Strong\">Tabs placeholder text</Typography>\n      </StyledTabsContainer>\n      {renderBrowseTab()}\n    </Modal>\n  );\n};\n\nexport default AssetManager;\n"],"names":["StyledTabsContainer","styled","Box","theme","marginBottom","spacing","StyledCardWrapper","shouldForwardProp","prop","selected","width","cursor","position","borderWidth","borderColor","palette","semantic","stroke","boxShadow","opacity","StyledCheckmarkIcon","CheckmarkCircleSolidIcon","top","left","zIndex","color","icon","fill","common","white","open","onClose","onSelect","assets","multiSelect","selectedAssetIds","setSelectedAssetIds","useState","useEffect","handleCancel","handleSelect","selectedAssets","filter","asset","includes","id","handleAssetClick","assetId","prev","_jsxs","Modal","actions","label","onClick","variant","tone","disabled","length","size","title","children","_jsx","Typography","Grid","container","component","sx","listStyle","margin","padding","map","isSelected","widescreen","desktop","mobile","tablet","fileName","onKeyDown","e","key","preventDefault","role","tabIndex","Card","content","heading","imageAlt","metadata","altText","imageSrc","url"],"mappings":"oWAaA,MAAMA,EAAsBC,EAAAA,OAAOC,EAAPD,EAAY,EAAGE,YAAO,CAChDC,aAAcD,EAAME,QAAQ,OAGxBC,EAAoBL,EAAAA,OAAOC,EAAK,CACpCK,kBAAoBC,GAAkB,aAATA,GADLP,EAEC,EAAGE,QAAOM,eAAU,CAC7CC,MAAO,OACPC,OAAQ,UACRC,SAAU,WACV,kBAAmB,CAEjBC,YAAa,MACbC,YAAaL,EAAWN,EAAMY,QAAQC,SAASC,OAAO,mBAAqB,cAG3EC,UAAWT,EAAW,OAAS,mBAAmBN,EAAMY,QAAQC,SAASC,OAAO,kBAElF,UAAW,CACTE,QAAS,IAEX,gCAAiC,CAC/BL,YAAaX,EAAMY,QAAQC,SAASC,OAAO,mBAC3CC,UAAW,YAITE,EAAsBnB,EAAAA,OAAOoB,EAAPpB,EAAiC,EAAGE,YAAO,CACrES,SAAU,WACVU,IAAKnB,EAAME,QAAQ,GACnBkB,KAAMpB,EAAME,QAAQ,GACpBmB,OAAQ,EACRC,MAAOtB,EAAMY,QAAQC,SAASU,KAAK,gBACnC,WAAY,CACVC,KAAMxB,EAAMY,QAAQa,OAAOC,0BA2BmB,EAChDC,OACAC,UACAC,WACAC,SACAC,eAAc,MAEd,MAAOC,EAAkBC,GAAuBC,EAAAA,SAAmB,IAGnEC,EAAAA,WAAU,KACHR,GACHM,EAAoB,MAErB,CAACN,IAEJ,MAAMS,EAAe,KACnBH,EAAoB,IACpBL,KAGIS,EAAe,KACnB,GAAIR,GAAYC,EAAQ,CACtB,MAAMQ,EAAiBR,EAAOS,QAAQC,GAAUR,EAAiBS,SAASD,EAAME,MAChFb,EAASS,EACX,CACAL,EAAoB,IACpBL,KAGIe,EAAoBC,IACxBX,GAAqBY,GACfd,EACEc,EAAKJ,SAASG,GACTC,EAAKN,QAAQG,GAAOA,IAAOE,IAE7B,IAAIC,EAAMD,GAEbC,EAAKJ,SAASG,GACT,GAEF,CAACA,MAqEd,OACEE,EAAAA,KAACC,GACCC,QA1DK,CACL,CACEC,MAAO,SACPC,QAASd,EACTe,QAAS,YACTC,KAAM,UACNV,GAAI,wBAEN,CACEO,MAAO,SACPC,QAASb,EACTc,QAAS,UACTE,SAAsC,IAA5BrB,EAAiBsB,OAC3BZ,GAAI,yBA8CNd,QAASQ,EACTT,KAAMA,EACN4B,KAAK,QACLC,MAAO,gBAAeC,SAAA,CAEtBC,EAAAA,IAAC7D,EAAmB,CAAA4D,SAElBC,EAAAA,IAACC,EAAU,CAACR,QAAQ,gDA/CxBO,MAACE,EAAI,CAACC,WAAS,EAACC,UAAU,KAAK5D,QAAS,EAAG6D,GAAI,CAAEC,UAAW,OAAQC,OAAQ,EAAGC,QAAS,GAAGT,SACxF3B,GAAQqC,KAAK3B,IACZ,MAAM4B,EAAapC,EAAiBS,SAASD,EAAME,IACnD,OACEgB,EAAAA,IAACE,EAAI,CAAA,gBAEYQ,EACfN,UAAU,KACVP,KAAM,CAAEc,WAAY,EAAGC,QAAS,EAAGC,OAAQ,EAAGC,OAAQ,GAAGf,SAEzDX,EAAAA,KAAC3C,EAAiB,CAAA,aACJ,UAAYqC,EAAMiC,SAC9BvB,QAAS,IAAMP,EAAiBH,EAAME,IACtCgC,UAAYC,IACI,UAAVA,EAAEC,KAA6B,MAAVD,EAAEC,MACzBD,EAAEE,iBACFlC,EAAiBH,EAAME,MAG3BoC,KAAK,SACLxE,SAAU8D,EACVW,SAAU,EAACtB,SAAA,CAEVW,GAAcV,EAAAA,IAACzC,EAAmB,CAACsC,KAAK,OACzCG,EAAAA,IAACsB,EAAI,CACHC,QAASzC,EAAMiC,SACfS,QAAQ,GACRC,SAAU3C,EAAM4C,SAASC,QACzBC,SAAU9C,EAAM+C,UAvBf/C,EAAME"}

package/dist/components/organisms/AssetManager/index.d.ts

@@ -0,0 +1,29 @@
+import react__default from 'react';
+import { Asset } from './types/index.js';
+
+/**
+ * Props for the AssetManager component.
+ * Provides a modal interface for selecting images from a grid display.
+ * It supports both single and multiple image selection modes.
+ *
+ * import AssetManager from '@flipdish/portal-library/components/organisms/AssetManager';
+ *
+ * ```tsx
+ * import AssetManager from '@flipdish/portal-library/components/organisms/AssetManager';
+ */
+interface AssetManagerProps {
+    /** Whether the asset manager modal is open */
+    open: boolean;
+    /** Callback function when the modal is closed or cancelled */
+    onClose: () => void;
+    /** Callback function when assets are selected */
+    onSelect?: (selectedAssets: Asset[]) => void;
+    /** Assets to display if no api is provided */
+    assets?: Asset[];
+    /** Whether multiple assets can be selected. Defaults to false */
+    multiSelect?: boolean;
+}
+declare const AssetManager: react__default.FC<AssetManagerProps>;
+
+export { AssetManager as default };
+export type { AssetManagerProps };

package/dist/components/organisms/AssetManager/index.js

@@ -0,0 +1,2 @@
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useState as o,useEffect as i}from"react";import{styled as r}from"@mui/material/styles";import a from"@mui/material/Box";import l from"../../atoms/Card/index.js";import n from"@mui/material/Grid2";import s from"@mui/material/Typography";import c from"../../molecules/Modal/index.js";import m from"../../../icons/CheckmarkCircleSolid/index.js";const d=r(a)((({theme:e})=>({marginBottom:e.spacing(3)}))),p=r(a,{shouldForwardProp:e=>"selected"!==e})((({theme:e,selected:t})=>({width:"100%",cursor:"pointer",position:"relative","& .MuiCard-root":{borderWidth:"2px",borderColor:t?e.palette.semantic.stroke["stroke-selected"]:"transparent",boxShadow:t?"none":`inset 0 0 0 1px ${e.palette.semantic.stroke["stroke-weak"]}`},"&:hover":{opacity:.9},"&:focus-visible .MuiCard-root":{borderColor:e.palette.semantic.stroke["stroke-selected"],boxShadow:"none"}}))),u=r(m)((({theme:e})=>({position:"absolute",top:e.spacing(2),left:e.spacing(2),zIndex:1,color:e.palette.semantic.icon["icon-primary"],"& circle":{fill:e.palette.common.white}}))),h=({open:r,onClose:a,onSelect:m,assets:h,multiSelect:f=!1})=>{const[g,b]=o([]);i((()=>{r||b([])}),[r]);const k=()=>{b([]),a()},x=e=>{b((t=>f?t.includes(e)?t.filter((t=>t!==e)):[...t,e]:t.includes(e)?[]:[e]))};return e(c,{actions:[{label:"Cancel",onClick:k,variant:"secondary",tone:"neutral",id:"asset-manager-cancel"},{label:"Select",onClick:()=>{if(m&&h){const e=h.filter((e=>g.includes(e.id)));m(e)}b([]),a()},variant:"primary",disabled:0===g.length,id:"asset-manager-select"}],onClose:k,open:r,size:"large",title:"Select Images",children:[t(d,{children:t(s,{variant:"h3Strong",children:"Tabs placeholder text"})}),t(n,{container:!0,component:"ul",spacing:1,sx:{listStyle:"none",margin:0,padding:0},children:h?.map((o=>{const i=g.includes(o.id);return t(n,{"aria-selected":i,component:"li",size:{widescreen:3,desktop:3,mobile:6,tablet:4},children:e(p,{"aria-label":"Select "+o.fileName,onClick:()=>x(o.id),onKeyDown:e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),x(o.id))},role:"button",selected:i,tabIndex:0,children:[i&&t(u,{size:"lg"}),t(l,{content:o.fileName,heading:"",imageAlt:o.metadata.altText,imageSrc:o.url})]})},o.id)}))})]})};export{h as default};
+//# sourceMappingURL=index.js.map

package/dist/components/organisms/AssetManager/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/organisms/AssetManager/index.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\n\nimport { styled } from '@mui/material/styles';\n\nimport Box from '@fd/components/atoms/Box';\nimport Card from '@fd/components/atoms/Card';\nimport Grid from '@fd/components/atoms/Grid';\nimport Typography from '@fd/components/atoms/Typography';\nimport Modal from '@fd/components/molecules/Modal';\nimport CheckmarkCircleSolidIcon from '@fd/icons/CheckmarkCircleSolid';\n\nimport type { Asset } from './types';\n\nconst StyledTabsContainer = styled(Box)(({ theme }) => ({\n  marginBottom: theme.spacing(3),\n}));\n\nconst StyledCardWrapper = styled(Box, {\n  shouldForwardProp: (prop) => prop !== 'selected',\n})<{ selected?: boolean }>(({ theme, selected }) => ({\n  width: '100%',\n  cursor: 'pointer',\n  position: 'relative',\n  '& .MuiCard-root': {\n    // Always use 2px border to prevent layout shift\n    borderWidth: '2px',\n    borderColor: selected ? theme.palette.semantic.stroke['stroke-selected'] : 'transparent',\n    // Use box-shadow to create the visual 1px border when not selected\n    // This prevents layout shift while maintaining the visual appearance\n    boxShadow: selected ? 'none' : `inset 0 0 0 1px ${theme.palette.semantic.stroke['stroke-weak']}`,\n  },\n  '&:hover': {\n    opacity: 0.9,\n  },\n  '&:focus-visible .MuiCard-root': {\n    borderColor: theme.palette.semantic.stroke['stroke-selected'],\n    boxShadow: 'none',\n  },\n}));\n\nconst StyledCheckmarkIcon = styled(CheckmarkCircleSolidIcon)(({ theme }) => ({\n  position: 'absolute',\n  top: theme.spacing(2),\n  left: theme.spacing(2),\n  zIndex: 1,\n  color: theme.palette.semantic.icon['icon-primary'],\n  '& circle': {\n    fill: theme.palette.common.white,\n  },\n}));\n\n/**\n * Props for the AssetManager component.\n * Provides a modal interface for selecting images from a grid display.\n * It supports both single and multiple image selection modes.\n *\n * import AssetManager from '@flipdish/portal-library/components/organisms/AssetManager';\n *\n * ```tsx\n * import AssetManager from '@flipdish/portal-library/components/organisms/AssetManager';\n */\nexport interface AssetManagerProps {\n  /** Whether the asset manager modal is open */\n  open: boolean;\n  /** Callback function when the modal is closed or cancelled */\n  onClose: () => void;\n  /** Callback function when assets are selected */\n  onSelect?: (selectedAssets: Asset[]) => void;\n  /** Assets to display if no api is provided */\n  assets?: Asset[];\n  /** Whether multiple assets can be selected. Defaults to false */\n  multiSelect?: boolean;\n}\n\nconst AssetManager: React.FC<AssetManagerProps> = ({\n  open,\n  onClose,\n  onSelect,\n  assets,\n  multiSelect = false,\n}) => {\n  const [selectedAssetIds, setSelectedAssetIds] = useState<string[]>([]);\n\n  // Reset selection when modal opens/closes\n  useEffect(() => {\n    if (!open) {\n      setSelectedAssetIds([]);\n    }\n  }, [open]);\n\n  const handleCancel = (): void => {\n    setSelectedAssetIds([]);\n    onClose();\n  };\n\n  const handleSelect = (): void => {\n    if (onSelect && assets) {\n      const selectedAssets = assets.filter((asset) => selectedAssetIds.includes(asset.id));\n      onSelect(selectedAssets);\n    }\n    setSelectedAssetIds([]);\n    onClose();\n  };\n\n  const handleAssetClick = (assetId: string): void => {\n    setSelectedAssetIds((prev) => {\n      if (multiSelect) {\n        if (prev.includes(assetId)) {\n          return prev.filter((id) => id !== assetId);\n        }\n        return [...prev, assetId];\n      } else {\n        if (prev.includes(assetId)) {\n          return [];\n        }\n        return [assetId];\n      }\n    });\n  };\n\n  const getActionButtons = (): Array<{\n    disabled?: boolean;\n    id: string;\n    label: string;\n    onClick: () => void;\n    tone?: 'brand' | 'neutral';\n    variant: 'primary' | 'secondary';\n  }> => {\n    return [\n      {\n        label: 'Cancel',\n        onClick: handleCancel,\n        variant: 'secondary',\n        tone: 'neutral',\n        id: 'asset-manager-cancel',\n      },\n      {\n        label: 'Select',\n        onClick: handleSelect,\n        variant: 'primary',\n        disabled: selectedAssetIds.length === 0,\n        id: 'asset-manager-select',\n      },\n    ];\n  };\n\n  const renderBrowseTab = (): React.ReactElement => (\n    <Grid container component=\"ul\" spacing={1} sx={{ listStyle: 'none', margin: 0, padding: 0 }}>\n      {assets?.map((asset: Asset) => {\n        const isSelected = selectedAssetIds.includes(asset.id);\n        return (\n          <Grid\n            key={asset.id}\n            aria-selected={isSelected}\n            component=\"li\"\n            size={{ widescreen: 3, desktop: 3, mobile: 6, tablet: 4 }}\n          >\n            <StyledCardWrapper\n              aria-label={'Select ' + asset.fileName} // TODO: translate this text when translate provider is added\n              onClick={() => handleAssetClick(asset.id)}\n              onKeyDown={(e) => {\n                if (e.key === 'Enter' || e.key === ' ') {\n                  e.preventDefault();\n                  handleAssetClick(asset.id);\n                }\n              }}\n              role=\"button\"\n              selected={isSelected}\n              tabIndex={0}\n            >\n              {isSelected && <StyledCheckmarkIcon size=\"lg\" />}\n              <Card\n                content={asset.fileName}\n                heading=\"\"\n                imageAlt={asset.metadata.altText}\n                imageSrc={asset.url}\n              />\n            </StyledCardWrapper>\n          </Grid>\n        );\n      })}\n    </Grid>\n  );\n\n  return (\n    <Modal\n      actions={getActionButtons()}\n      onClose={handleCancel}\n      open={open}\n      size=\"large\"\n      title={'Select Images'} // TODO: translate this text when translate provider is added\n    >\n      <StyledTabsContainer>\n        {/* TODO: replace this with tabs component when available */}\n        <Typography variant=\"h3Strong\">Tabs placeholder text</Typography>\n      </StyledTabsContainer>\n      {renderBrowseTab()}\n    </Modal>\n  );\n};\n\nexport default AssetManager;\n"],"names":["StyledTabsContainer","styled","Box","theme","marginBottom","spacing","StyledCardWrapper","shouldForwardProp","prop","selected","width","cursor","position","borderWidth","borderColor","palette","semantic","stroke","boxShadow","opacity","StyledCheckmarkIcon","CheckmarkCircleSolidIcon","top","left","zIndex","color","icon","fill","common","white","AssetManager","open","onClose","onSelect","assets","multiSelect","selectedAssetIds","setSelectedAssetIds","useState","useEffect","handleCancel","handleAssetClick","assetId","prev","includes","filter","id","_jsxs","Modal","actions","label","onClick","variant","tone","selectedAssets","asset","disabled","length","size","title","children","_jsx","Typography","Grid","container","component","sx","listStyle","margin","padding","map","isSelected","widescreen","desktop","mobile","tablet","fileName","onKeyDown","e","key","preventDefault","role","tabIndex","Card","content","heading","imageAlt","metadata","altText","imageSrc","url"],"mappings":"+YAaA,MAAMA,EAAsBC,EAAOC,EAAPD,EAAY,EAAGE,YAAO,CAChDC,aAAcD,EAAME,QAAQ,OAGxBC,EAAoBL,EAAOC,EAAK,CACpCK,kBAAoBC,GAAkB,aAATA,GADLP,EAEC,EAAGE,QAAOM,eAAU,CAC7CC,MAAO,OACPC,OAAQ,UACRC,SAAU,WACV,kBAAmB,CAEjBC,YAAa,MACbC,YAAaL,EAAWN,EAAMY,QAAQC,SAASC,OAAO,mBAAqB,cAG3EC,UAAWT,EAAW,OAAS,mBAAmBN,EAAMY,QAAQC,SAASC,OAAO,kBAElF,UAAW,CACTE,QAAS,IAEX,gCAAiC,CAC/BL,YAAaX,EAAMY,QAAQC,SAASC,OAAO,mBAC3CC,UAAW,YAITE,EAAsBnB,EAAOoB,EAAPpB,EAAiC,EAAGE,YAAO,CACrES,SAAU,WACVU,IAAKnB,EAAME,QAAQ,GACnBkB,KAAMpB,EAAME,QAAQ,GACpBmB,OAAQ,EACRC,MAAOtB,EAAMY,QAAQC,SAASU,KAAK,gBACnC,WAAY,CACVC,KAAMxB,EAAMY,QAAQa,OAAOC,WA2BzBC,EAA4C,EAChDC,OACAC,UACAC,WACAC,SACAC,eAAc,MAEd,MAAOC,EAAkBC,GAAuBC,EAAmB,IAGnEC,GAAU,KACHR,GACHM,EAAoB,MAErB,CAACN,IAEJ,MAAMS,EAAe,KACnBH,EAAoB,IACpBL,KAYIS,EAAoBC,IACxBL,GAAqBM,GACfR,EACEQ,EAAKC,SAASF,GACTC,EAAKE,QAAQC,GAAOA,IAAOJ,IAE7B,IAAIC,EAAMD,GAEbC,EAAKC,SAASF,GACT,GAEF,CAACA,MAqEd,OACEK,EAACC,GACCC,QA1DK,CACL,CACEC,MAAO,SACPC,QAASX,EACTY,QAAS,YACTC,KAAM,UACNP,GAAI,wBAEN,CACEI,MAAO,SACPC,QA3Ce,KACnB,GAAIlB,GAAYC,EAAQ,CACtB,MAAMoB,EAAiBpB,EAAOW,QAAQU,GAAUnB,EAAiBQ,SAASW,EAAMT,MAChFb,EAASqB,EACX,CACAjB,EAAoB,IACpBL,KAsCIoB,QAAS,UACTI,SAAsC,IAA5BpB,EAAiBqB,OAC3BX,GAAI,yBA8CNd,QAASQ,EACTT,KAAMA,EACN2B,KAAK,QACLC,MAAO,gBAAeC,SAAA,CAEtBC,EAAC7D,EAAmB,CAAA4D,SAElBC,EAACC,EAAU,CAACV,QAAQ,gDA/CxBS,EAACE,EAAI,CAACC,WAAS,EAACC,UAAU,KAAK5D,QAAS,EAAG6D,GAAI,CAAEC,UAAW,OAAQC,OAAQ,EAAGC,QAAS,GAAGT,SACxF1B,GAAQoC,KAAKf,IACZ,MAAMgB,EAAanC,EAAiBQ,SAASW,EAAMT,IACnD,OACEe,EAACE,EAAI,CAAA,gBAEYQ,EACfN,UAAU,KACVP,KAAM,CAAEc,WAAY,EAAGC,QAAS,EAAGC,OAAQ,EAAGC,OAAQ,GAAGf,SAEzDb,EAACzC,EAAiB,CAAA,aACJ,UAAYiD,EAAMqB,SAC9BzB,QAAS,IAAMV,EAAiBc,EAAMT,IACtC+B,UAAYC,IACI,UAAVA,EAAEC,KAA6B,MAAVD,EAAEC,MACzBD,EAAEE,iBACFvC,EAAiBc,EAAMT,MAG3BmC,KAAK,SACLxE,SAAU8D,EACVW,SAAU,EAACtB,SAAA,CAEVW,GAAcV,EAACzC,EAAmB,CAACsC,KAAK,OACzCG,EAACsB,EAAI,CACHC,QAAS7B,EAAMqB,SACfS,QAAQ,GACRC,SAAU/B,EAAMgC,SAASC,QACzBC,SAAUlC,EAAMmC,UAvBfnC,EAAMT"}

package/dist/components/organisms/AssetManager/types/index.cjs.js

@@ -0,0 +1,2 @@
+"use strict";var s;exports.AssetType=void 0,(s=exports.AssetType||(exports.AssetType={})).VIDEO="VIDEO",s.IMAGE="IMAGE";
+//# sourceMappingURL=index.cjs.js.map

package/dist/components/organisms/AssetManager/types/index.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs.js","sources":["../../../../../src/components/organisms/AssetManager/types/index.ts"],"sourcesContent":["export enum AssetType {\n  VIDEO = 'VIDEO',\n  IMAGE = 'IMAGE',\n}\n\nexport interface AssetMetadata {\n  altText?: string;\n  tags: string[];\n  dimensions?: {\n    width: number;\n    height: number;\n  };\n}\n\nexport interface Asset {\n  id: string;\n  fileName: string;\n  contentType: string; // MIME type like \"image/jpeg\", \"video/mp4\"\n  createdBy: string;\n  updatedBy: string;\n  updatedAt: string;\n  uploadedAt: string;\n  url: string;\n  orgId: string;\n  brandId: string | null;\n  type: AssetType;\n  metadata: AssetMetadata;\n}\n"],"names":["AssetType"],"mappings":"aAAA,IAAYA,EAAAA,QAAAA,eAAAA,GAAAA,EAAAA,QAAAA,YAAAA,kBAAS,CAAA,IACnB,MAAA,QACAA,EAAA,MAAA"}

package/dist/components/organisms/AssetManager/types/index.d.ts

@@ -0,0 +1,29 @@
+declare enum AssetType {
+    VIDEO = "VIDEO",
+    IMAGE = "IMAGE"
+}
+interface AssetMetadata {
+    altText?: string;
+    tags: string[];
+    dimensions?: {
+        width: number;
+        height: number;
+    };
+}
+interface Asset {
+    id: string;
+    fileName: string;
+    contentType: string;
+    createdBy: string;
+    updatedBy: string;
+    updatedAt: string;
+    uploadedAt: string;
+    url: string;
+    orgId: string;
+    brandId: string | null;
+    type: AssetType;
+    metadata: AssetMetadata;
+}
+
+export { AssetType };
+export type { Asset, AssetMetadata };

package/dist/components/organisms/AssetManager/types/index.js

@@ -0,0 +1,2 @@
+var E;!function(E){E.VIDEO="VIDEO",E.IMAGE="IMAGE"}(E||(E={}));export{E as AssetType};
+//# sourceMappingURL=index.js.map

package/dist/components/organisms/AssetManager/types/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../src/components/organisms/AssetManager/types/index.ts"],"sourcesContent":["export enum AssetType {\n  VIDEO = 'VIDEO',\n  IMAGE = 'IMAGE',\n}\n\nexport interface AssetMetadata {\n  altText?: string;\n  tags: string[];\n  dimensions?: {\n    width: number;\n    height: number;\n  };\n}\n\nexport interface Asset {\n  id: string;\n  fileName: string;\n  contentType: string; // MIME type like \"image/jpeg\", \"video/mp4\"\n  createdBy: string;\n  updatedBy: string;\n  updatedAt: string;\n  uploadedAt: string;\n  url: string;\n  orgId: string;\n  brandId: string | null;\n  type: AssetType;\n  metadata: AssetMetadata;\n}\n"],"names":["AssetType"],"mappings":"IAAYA,GAAZ,SAAYA,GACVA,EAAA,MAAA,QACAA,EAAA,MAAA,OACD,CAHD,CAAYA,IAAAA,EAAS,CAAA"}