@pega/cosmos-react-core 8.0.0-build.3.2 → 8.0.0-build.30.0

package/lib/components/File/FileUploadItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileUploadItem.js","sourceRoot":"","sources":["../../../src/components/File/FileUploadItem.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useMemo, useState } from 'react';\nimport type { PropsWithoutRef, FC, Ref, ReactElement, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport Button, { StyledButton } from '../Button';\nimport Icon from '../Icon';\nimport MenuButton from '../MenuButton';\nimport MetaList from '../MetaList';\nimport SummaryItem, {\n  StyledPrimary,\n  StyledSecondary,\n  StyledSummaryItemActions,\n  StyledVisual\n} from '../SummaryItem';\nimport Progress, { StyledProgressRing } from '../Progress';\nimport Text from '../Text';\nimport type { ForwardProps, BaseProps, NoChildrenProp } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport { useI18n } from '../../hooks';\n\nimport FileVisual from './FileVisual';\nimport { getKindFromMimeType, getMimeTypeFromFile } from './utils';\n\nexport interface FileUploadItemProps extends BaseProps, NoChildrenProp {\n  /** Name of the file. */\n  name: string;\n  /** Id applied to upload item */\n  id?: string;\n  /** File blob */\n  File?: File;\n  /** A FileUploadVisual element to represent the file. */\n  visual?: ReactElement;\n  /** Additional information about the file. If progress prop is passed and its value is less than 100, this region is instead used for the upload progress indicator. */\n  meta?: string | string[];\n  /** When passed, will render a single icon button for yet to be or in progress uploads. Use this action to trigger xhr request termination. */\n  onCancel?: (name: FileUploadItemProps['name']) => void;\n  /** When passed, will render a single icon button or within a MenuButton if other actions are defined. */\n  onEdit?: (name: FileUploadItemProps['name']) => void;\n  /** When passed, will render a single icon button or within a MenuButton if other actions are defined. */\n  onPreview?: (name: FileUploadItemProps['name']) => void;\n  /** When passed, will render a single icon button or within a MenuButton if other actions are defined. */\n  onDownload?: (name: FileUploadItemProps['name']) => void;\n  /** When passed, will render a single icon button or within a MenuButton if other actions are defined. */\n  onDelete?: (name: FileUploadItemProps['name']) => void;\n  /**\n   * Set if there is an error uploading or processing the file. Applies error styling to the meta string passed.\n   * @default false\n   */\n  error?: boolean;\n  /** A string to be used as an image src for a attachment thumbnail. Falls back to a provided icon or the default attachment icon. */\n  thumbnail?: string;\n  /** If the attachment is in an upload state, pass progress as a number between 0-100 representing the percentage of progress. */\n  progress?: number;\n  /** The size of the file. */\n  size?: number;\n  /** Determines if upload item will be disabled */\n  disabled?: boolean;\n  /** A ref to the file item's HTMLLIElement. */\n  ref?: Ref<HTMLLIElement>;\n}\n\ninterface FileAction {\n  fn: (name: FileUploadItemProps['name']) => void;\n  text: string;\n  icon: string;\n}\n\nconst StyledFileUploadItem = styled(SummaryItem)<{ hasThumbnail: boolean; disabled: boolean }>(({\n  hasThumbnail,\n  disabled,\n  theme\n}) => {\n  return css`\n    border: 0.0625rem solid ${theme.base.palette['border-line']};\n    border-radius: calc(0.5 * ${theme.base['border-radius']});\n    background-color: ${theme.base.palette['primary-background']};\n    padding: calc(0.5 * ${theme.base.spacing});\n    min-height: 3rem;\n\n    ${disabled &&\n    css`\n      opacity: ${theme.base['disabled-opacity']};\n\n      ${StyledButton}:disabled {\n        opacity: unset;\n      }\n    `}\n\n    ${StyledProgressRing} {\n      height: ${theme.components.input.height};\n      width: ${theme.components.input.height};\n    }\n\n    ${hasThumbnail &&\n    css`\n      height: calc(6rem + ${theme.base.spacing});\n      grid-row: span 2;\n      grid-template-columns: auto minmax(0, 1fr) auto;\n\n      ${StyledVisual} {\n        align-self: auto;\n        width: calc(6rem - 0.125rem);\n        height: calc(6rem - 0.125rem);\n      }\n\n      ${StyledPrimary} {\n        align-self: start;\n        margin-block-start: calc(0.5 * ${theme.base.spacing});\n      }\n\n      ${StyledSecondary} {\n        grid-area: primary;\n        align-self: center;\n        margin-block-start: calc(3 * ${theme.base.spacing});\n      }\n\n      ${StyledSummaryItemActions} {\n        align-self: start;\n      }\n    `}\n  `;\n});\n\nStyledFileUploadItem.defaultProps = defaultThemeProp;\n\n/**\n *  @deprecated\n *  Deprecating in favour of new file components\n */\nconst FileUploadItem: FC<FileUploadItemProps & ForwardProps> = forwardRef(function FileUploadItem(\n  {\n    name,\n    meta,\n    error = false,\n    progress,\n    thumbnail,\n    onCancel,\n    onEdit,\n    onPreview,\n    onDownload,\n    onDelete,\n    size,\n    disabled,\n    ...restProps\n  }: PropsWithoutRef<FileUploadItemProps>,\n  ref: FileUploadItemProps['ref']\n) {\n  const t = useI18n();\n  const [thumbnailError, setThumbnailError] = useState(false);\n\n  const definedActions: FileAction[] = useMemo(\n    () =>\n      [\n        { fn: onCancel, text: t('cancel'), icon: 'times' },\n        { fn: onEdit, text: t('edit'), icon: 'pencil' },\n        { fn: onPreview, text: t('preview'), icon: 'eye' },\n        { fn: onDownload, text: t('download'), icon: 'download' },\n        { fn: onDelete, text: t('delete'), icon: 'trash' }\n      ].filter<FileAction>((action): action is FileAction => !!action.fn),\n    [onCancel, onEdit, onPreview, onDownload, onDelete]\n  );\n\n  let metaContent: ReactNode = meta;\n  let actions: ReactElement | undefined;\n\n  const type = getKindFromMimeType(getMimeTypeFromFile(name) ?? '');\n\n  if (typeof progress === 'number' && progress < 100) {\n    metaContent = `${t('uploading')}…${Math.floor(progress)}%`;\n  }\n\n  if (Array.isArray(metaContent)) {\n    metaContent = (\n      <MetaList\n        items={metaContent.map((item, i) => (\n          // eslint-disable-next-line react/no-array-index-key\n          <Text key={i} variant='secondary' status={error ? 'error' : undefined}>\n            {item}\n          </Text>\n        ))}\n      />\n    );\n  } else if (typeof metaContent === 'string') {\n    metaContent = (\n      <Text variant='secondary' status={error ? 'error' : undefined}>\n        {metaContent}\n      </Text>\n    );\n  }\n\n  if (definedActions.length === 1) {\n    const action = definedActions[0];\n\n    actions = (\n      <Button\n        icon\n        variant='simple'\n        disabled={disabled}\n        onClick={() => action.fn?.(name)}\n        aria-label={`${action.text} ${name}`}\n      >\n        <Icon name={action.icon} />\n      </Button>\n    );\n  } else if (definedActions.length > 1) {\n    actions = (\n      <MenuButton\n        text={t('actions')}\n        iconOnly\n        icon='more'\n        variant='simple'\n        disabled={disabled}\n        menu={{\n          items: definedActions.map(action => ({\n            id: action.text,\n            primary: action.text,\n            onClick: () => {\n              action.fn(name);\n            }\n          }))\n        }}\n      />\n    );\n  }\n\n  const visual = useMemo(() => {\n    if (typeof progress === 'number' && progress !== 100) {\n      return <Progress value={progress} placement='inline' variant='ring' />;\n    }\n\n    return (\n      <FileVisual\n        type={type}\n        thumbnail={thumbnailError ? undefined : thumbnail}\n        onThumbnailError={() => {\n          setThumbnailError(true);\n        }}\n      />\n    );\n  }, [progress, thumbnail, thumbnailError]);\n\n  return (\n    <StyledFileUploadItem\n      {...restProps}\n      forwardedAs='li'\n      hasThumbnail={\n        thumbnail && !thumbnailError && (progress === 100 || progress === undefined) && !error\n      }\n      ref={ref}\n      visual={visual}\n      primary={name}\n      secondary={metaContent}\n      actions={actions}\n      overflowStrategy='ellipsis'\n      disabled={disabled}\n    />\n  );\n});\n\nexport default FileUploadItem;\n"]}
+{"version":3,"file":"FileUploadItem.js","sourceRoot":"","sources":["../../../src/components/File/FileUploadItem.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useMemo, useState } from 'react';\nimport type { PropsWithoutRef, Ref, ReactElement, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport Button, { StyledButton } from '../Button';\nimport Icon from '../Icon';\nimport MenuButton from '../MenuButton';\nimport MetaList from '../MetaList';\nimport SummaryItem, {\n  StyledPrimary,\n  StyledSecondary,\n  StyledSummaryItemActions,\n  StyledVisual\n} from '../SummaryItem';\nimport Progress, { StyledProgressRing } from '../Progress';\nimport Text from '../Text';\nimport type { ForwardRefForwardPropsComponent, BaseProps, NoChildrenProp } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport { useI18n } from '../../hooks';\n\nimport FileVisual from './FileVisual';\nimport { getKindFromMimeType, getMimeTypeFromFile } from './utils';\n\nexport interface FileUploadItemProps extends BaseProps, NoChildrenProp {\n  /** Name of the file. */\n  name: string;\n  /** Id applied to upload item */\n  id?: string;\n  /** File blob */\n  File?: File;\n  /** A FileUploadVisual element to represent the file. */\n  visual?: ReactElement;\n  /** Additional information about the file. If progress prop is passed and its value is less than 100, this region is instead used for the upload progress indicator. */\n  meta?: string | string[];\n  /** When passed, will render a single icon button for yet to be or in progress uploads. Use this action to trigger xhr request termination. */\n  onCancel?: (name: FileUploadItemProps['name']) => void;\n  /** When passed, will render a single icon button or within a MenuButton if other actions are defined. */\n  onEdit?: (name: FileUploadItemProps['name']) => void;\n  /** When passed, will render a single icon button or within a MenuButton if other actions are defined. */\n  onPreview?: (name: FileUploadItemProps['name']) => void;\n  /** When passed, will render a single icon button or within a MenuButton if other actions are defined. */\n  onDownload?: (name: FileUploadItemProps['name']) => void;\n  /** When passed, will render a single icon button or within a MenuButton if other actions are defined. */\n  onDelete?: (name: FileUploadItemProps['name']) => void;\n  /**\n   * Set if there is an error uploading or processing the file. Applies error styling to the meta string passed.\n   * @default false\n   */\n  error?: boolean;\n  /** A string to be used as an image src for a attachment thumbnail. Falls back to a provided icon or the default attachment icon. */\n  thumbnail?: string;\n  /** If the attachment is in an upload state, pass progress as a number between 0-100 representing the percentage of progress. */\n  progress?: number;\n  /** The size of the file. */\n  size?: number;\n  /** Determines if upload item will be disabled */\n  disabled?: boolean;\n  /** A ref to the file item's HTMLLIElement. */\n  ref?: Ref<HTMLLIElement>;\n}\n\ninterface FileAction {\n  fn: (name: FileUploadItemProps['name']) => void;\n  text: string;\n  icon: string;\n}\n\nconst StyledFileUploadItem = styled(SummaryItem)<{ hasThumbnail: boolean; disabled: boolean }>(({\n  hasThumbnail,\n  disabled,\n  theme\n}) => {\n  return css`\n    border: 0.0625rem solid ${theme.base.palette['border-line']};\n    border-radius: calc(0.5 * ${theme.base['border-radius']});\n    background-color: ${theme.base.palette['primary-background']};\n    padding: calc(0.5 * ${theme.base.spacing});\n    min-height: 3rem;\n\n    ${disabled &&\n    css`\n      opacity: ${theme.base['disabled-opacity']};\n\n      ${StyledButton}:disabled {\n        opacity: unset;\n      }\n    `}\n\n    ${StyledProgressRing} {\n      height: ${theme.components.input.height};\n      width: ${theme.components.input.height};\n    }\n\n    ${hasThumbnail &&\n    css`\n      height: calc(6rem + ${theme.base.spacing});\n      grid-row: span 2;\n      grid-template-columns: auto minmax(0, 1fr) auto;\n\n      ${StyledVisual} {\n        align-self: auto;\n        width: calc(6rem - 0.125rem);\n        height: calc(6rem - 0.125rem);\n      }\n\n      ${StyledPrimary} {\n        align-self: start;\n        margin-block-start: calc(0.5 * ${theme.base.spacing});\n      }\n\n      ${StyledSecondary} {\n        grid-area: primary;\n        align-self: center;\n        margin-block-start: calc(3 * ${theme.base.spacing});\n      }\n\n      ${StyledSummaryItemActions} {\n        align-self: start;\n      }\n    `}\n  `;\n});\n\nStyledFileUploadItem.defaultProps = defaultThemeProp;\n\n/**\n *  @deprecated\n *  Deprecating in favour of new file components\n */\nconst FileUploadItem: ForwardRefForwardPropsComponent<FileUploadItemProps> = forwardRef(\n  function FileUploadItem(\n    {\n      name,\n      meta,\n      error = false,\n      progress,\n      thumbnail,\n      onCancel,\n      onEdit,\n      onPreview,\n      onDownload,\n      onDelete,\n      size,\n      disabled,\n      ...restProps\n    }: PropsWithoutRef<FileUploadItemProps>,\n    ref: FileUploadItemProps['ref']\n  ) {\n    const t = useI18n();\n    const [thumbnailError, setThumbnailError] = useState(false);\n\n    const definedActions: FileAction[] = useMemo(\n      () =>\n        [\n          { fn: onCancel, text: t('cancel'), icon: 'times' },\n          { fn: onEdit, text: t('edit'), icon: 'pencil' },\n          { fn: onPreview, text: t('preview'), icon: 'eye' },\n          { fn: onDownload, text: t('download'), icon: 'download' },\n          { fn: onDelete, text: t('delete'), icon: 'trash' }\n        ].filter<FileAction>((action): action is FileAction => !!action.fn),\n      [onCancel, onEdit, onPreview, onDownload, onDelete]\n    );\n\n    let metaContent: ReactNode = meta;\n    let actions: ReactElement | undefined;\n\n    const type = getKindFromMimeType(getMimeTypeFromFile(name) ?? '');\n\n    if (typeof progress === 'number' && progress < 100) {\n      metaContent = `${t('uploading')}…${Math.floor(progress)}%`;\n    }\n\n    if (Array.isArray(metaContent)) {\n      metaContent = (\n        <MetaList\n          items={metaContent.map((item, i) => (\n            // eslint-disable-next-line react/no-array-index-key\n            <Text key={i} variant='secondary' status={error ? 'error' : undefined}>\n              {item}\n            </Text>\n          ))}\n        />\n      );\n    } else if (typeof metaContent === 'string') {\n      metaContent = (\n        <Text variant='secondary' status={error ? 'error' : undefined}>\n          {metaContent}\n        </Text>\n      );\n    }\n\n    if (definedActions.length === 1) {\n      const action = definedActions[0];\n\n      actions = (\n        <Button\n          icon\n          variant='simple'\n          disabled={disabled}\n          onClick={() => action.fn?.(name)}\n          aria-label={`${action.text} ${name}`}\n        >\n          <Icon name={action.icon} />\n        </Button>\n      );\n    } else if (definedActions.length > 1) {\n      actions = (\n        <MenuButton\n          text={t('actions')}\n          iconOnly\n          icon='more'\n          variant='simple'\n          disabled={disabled}\n          menu={{\n            items: definedActions.map(action => ({\n              id: action.text,\n              primary: action.text,\n              onClick: () => {\n                action.fn(name);\n              }\n            }))\n          }}\n        />\n      );\n    }\n\n    const visual = useMemo(() => {\n      if (typeof progress === 'number' && progress !== 100) {\n        return <Progress value={progress} placement='inline' variant='ring' />;\n      }\n\n      return (\n        <FileVisual\n          type={type}\n          thumbnail={thumbnailError ? undefined : thumbnail}\n          onThumbnailError={() => {\n            setThumbnailError(true);\n          }}\n        />\n      );\n    }, [progress, thumbnail, thumbnailError]);\n\n    return (\n      <StyledFileUploadItem\n        {...restProps}\n        forwardedAs='li'\n        hasThumbnail={\n          thumbnail && !thumbnailError && (progress === 100 || progress === undefined) && !error\n        }\n        ref={ref}\n        visual={visual}\n        primary={name}\n        secondary={metaContent}\n        actions={actions}\n        overflowStrategy='ellipsis'\n        disabled={disabled}\n      />\n    );\n  }\n);\n\nexport default FileUploadItem;\n"]}

package/lib/components/File/FileVisual.d.ts

@@ -1,6 +1,6 @@
-import type { FC, Ref, SyntheticEvent } from 'react';
+import type { Ref, SyntheticEvent } from 'react';
 import type { DefaultTheme } from 'styled-components';
-import type { ForwardProps, BaseProps } from '../../types';
+import type { ForwardRefForwardPropsComponent, BaseProps } from '../../types';
 import type { AttachmentType } from './utils';
 export interface FileVisualProps extends BaseProps {
     /** Attachment/File type, it has an impact on background color and icon rendered. */
@@ -14,6 +14,6 @@ export interface FileVisualProps extends BaseProps {
 }
 export declare const StyledFileVisual: import("styled-components").StyledComponent<"div", DefaultTheme, {}, never>;
 export declare const StyledTextFrame: import("styled-components").StyledComponent<"div", DefaultTheme, {}, never>;
-declare const FileVisual: FC<FileVisualProps & ForwardProps>;
+declare const FileVisual: ForwardRefForwardPropsComponent<FileVisualProps>;
 export default FileVisual;
 //# sourceMappingURL=FileVisual.d.ts.map

package/lib/components/File/FileVisual.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FileVisual.d.ts","sourceRoot":"","sources":["../../../src/components/File/FileVisual.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAmB,EAAE,EAAE,GAAG,EAAiB,cAAc,EAAE,MAAM,OAAO,CAAC;AAErF,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAGtD,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAc,MAAM,aAAa,CAAC;AAMvE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAE9C,MAAM,WAAW,eAAgB,SAAQ,SAAS;IAChD,oFAAoF;IACpF,IAAI,EAAE,cAAc,CAAC;IACrB,sEAAsE;IACtE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iEAAiE;IACjE,gBAAgB,CAAC,EAAE,CAAC,CAAC,EAAE,cAAc,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACjE,qCAAqC;IACrC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAmED,eAAO,MAAM,gBAAgB,6EAAe,CAAC;AAE7C,eAAO,MAAM,eAAe,6EA0B1B,CAAC;AAsBH,QAAA,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,GAAG,YAAY,CAmDjD,CAAC;AAEH,eAAe,UAAU,CAAC"}
+{"version":3,"file":"FileVisual.d.ts","sourceRoot":"","sources":["../../../src/components/File/FileVisual.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAmB,GAAG,EAAiB,cAAc,EAAE,MAAM,OAAO,CAAC;AAEjF,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAGtD,OAAO,KAAK,EAAE,+BAA+B,EAAE,SAAS,EAAc,MAAM,aAAa,CAAC;AAM1F,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAE9C,MAAM,WAAW,eAAgB,SAAQ,SAAS;IAChD,oFAAoF;IACpF,IAAI,EAAE,cAAc,CAAC;IACrB,sEAAsE;IACtE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iEAAiE;IACjE,gBAAgB,CAAC,EAAE,CAAC,CAAC,EAAE,cAAc,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACjE,qCAAqC;IACrC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAmED,eAAO,MAAM,gBAAgB,6EAAe,CAAC;AAE7C,eAAO,MAAM,eAAe,6EA0B1B,CAAC;AAsBH,QAAA,MAAM,UAAU,EAAE,+BAA+B,CAAC,eAAe,CAmD/D,CAAC;AAEH,eAAe,UAAU,CAAC"}

package/lib/components/File/FileVisual.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileVisual.js","sourceRoot":"","sources":["../../../src/components/File/FileVisual.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef } from 'react';\nimport type { PropsWithoutRef, FC, Ref, CSSProperties, SyntheticEvent } from 'react';\nimport styled, { css } from 'styled-components';\nimport type { DefaultTheme } from 'styled-components';\n\nimport Icon from '../Icon';\nimport type { ForwardProps, BaseProps, OmitStrict } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport Flex from '../Flex';\nimport Image, { StyledImage } from '../Image';\nimport { useTheme } from '../../hooks';\n\nimport type { AttachmentType } from './utils';\n\nexport interface FileVisualProps extends BaseProps {\n  /** Attachment/File type, it has an impact on background color and icon rendered. */\n  type: AttachmentType;\n  /** A string to be used as an image src for a attachment thumbnail. */\n  thumbnail?: string;\n  /** Called when a thumbnail encounters an error while loading. */\n  onThumbnailError?: (e: SyntheticEvent<HTMLImageElement>) => void;\n  /** Reference to a button element. */\n  ref?: Ref<HTMLDivElement>;\n}\ntype ThemeColor = keyof OmitStrict<DefaultTheme['base']['colors'], 'white' | 'black'>;\ntype ThemeColorVariant = 'extra-light' | 'light' | 'medium' | 'dark' | 'extra-dark';\n\ntype BackgroundColor = `${ThemeColor}.${ThemeColorVariant}`;\n\nconst mapping: Record<\n  AttachmentType,\n  { backgroundColor: BackgroundColor } & (\n    | { iconName: string; text?: never }\n    | { iconName?: never; text: string }\n  )\n> = {\n  generic: {\n    iconName: 'paper-clip',\n    backgroundColor: 'slate.dark'\n  },\n  video: {\n    iconName: 'play-solid',\n    backgroundColor: 'slate.dark'\n  },\n  audio: {\n    iconName: 'speaker-on-solid',\n    backgroundColor: 'slate.dark'\n  },\n  document: {\n    iconName: 'filetype-text',\n    backgroundColor: 'blue.medium'\n  },\n  message: {\n    iconName: 'mail-solid',\n    backgroundColor: 'blue.dark'\n  },\n  pdf: {\n    text: 'PDF',\n    backgroundColor: 'red.medium'\n  },\n  spreadsheet: {\n    iconName: 'grid-solid',\n    backgroundColor: 'green.medium'\n  },\n  presentation: {\n    iconName: 'slideshow-solid',\n    backgroundColor: 'orange.medium'\n  },\n  link: {\n    iconName: 'chain',\n    backgroundColor: 'purple.dark'\n  },\n  archive: {\n    iconName: 'archive-solid',\n    backgroundColor: 'slate.dark'\n  },\n  database: {\n    iconName: 'disc-stack-solid',\n    backgroundColor: 'slate.dark'\n  },\n  image: {\n    iconName: 'picture-solid',\n    backgroundColor: 'slate.dark'\n  },\n  text: {\n    iconName: 'filetype-text',\n    backgroundColor: 'slate.dark'\n  }\n} as const;\n\nexport const StyledFileVisual = styled.div``;\n\nexport const StyledTextFrame = styled(StyledFileVisual)(({ theme }) => {\n  const {\n    base: {\n      palette: { light },\n      'border-radius': baseBorderRadius,\n      'font-size': baseFontSize,\n      'font-weight': { 'semi-bold': semiBoldWeight }\n    },\n    components: {\n      icon: {\n        size: { m: iconSize },\n        'border-radius-multiplier': borderRadiusMultiplier\n      }\n    }\n  } = theme;\n  return css`\n    background-color: var(--bg);\n    color: ${light};\n    height: ${iconSize};\n    width: ${iconSize};\n    border-radius: calc(${borderRadiusMultiplier} * ${baseBorderRadius});\n    font-size: calc(0.7 * ${baseFontSize});\n    font-weight: ${semiBoldWeight};\n    user-select: none;\n    -webkit-user-select: none;\n  `;\n});\n\nStyledTextFrame.defaultProps = defaultThemeProp;\n\nconst StyledThumbnailFrame = styled(StyledFileVisual)(({ theme }) => {\n  return css`\n    background-color: ${theme.base.palette['app-background']};\n    height: 100%;\n    width: 100%;\n\n    ${StyledImage} {\n      margin: auto;\n      height: unset;\n      width: unset;\n      max-height: 100%;\n      max-width: 100%;\n    }\n  `;\n});\n\nStyledThumbnailFrame.defaultProps = defaultThemeProp;\n\nconst FileVisual: FC<FileVisualProps & ForwardProps> = forwardRef(function FileVisual(\n  { type, thumbnail, onThumbnailError, ...restProps }: PropsWithoutRef<FileVisualProps>,\n  ref: FileVisualProps['ref']\n) {\n  const visualConfig = mapping[type];\n\n  const [color, lightness] = visualConfig.backgroundColor.split('.', 2) as [\n    ThemeColor,\n    ThemeColorVariant\n  ];\n\n  const {\n    base: {\n      colors: {\n        [color]: { [lightness]: backgroundColor }\n      },\n      palette: { light: foregroundColor }\n    }\n  } = useTheme();\n\n  if (thumbnail) {\n    return (\n      <Flex {...restProps} as={StyledThumbnailFrame} container>\n        <Image src={thumbnail} onError={onThumbnailError} alt='' />\n      </Flex>\n    );\n  }\n\n  return (\n    <>\n      {visualConfig.iconName ? (\n        <Icon\n          {...restProps}\n          ref={ref}\n          name={visualConfig.iconName}\n          background={backgroundColor}\n          foreground={foregroundColor}\n        />\n      ) : (\n        <Flex\n          {...restProps}\n          as={StyledTextFrame}\n          ref={ref}\n          container={{ justify: 'center', alignItems: 'center' }}\n          style={{ '--bg': backgroundColor } as CSSProperties}\n        >\n          {visualConfig.text}\n        </Flex>\n      )}\n    </>\n  );\n});\n\nexport default FileVisual;\n"]}
+{"version":3,"file":"FileVisual.js","sourceRoot":"","sources":["../../../src/components/File/FileVisual.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef } from 'react';\nimport type { PropsWithoutRef, Ref, CSSProperties, SyntheticEvent } from 'react';\nimport styled, { css } from 'styled-components';\nimport type { DefaultTheme } from 'styled-components';\n\nimport Icon from '../Icon';\nimport type { ForwardRefForwardPropsComponent, BaseProps, OmitStrict } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport Flex from '../Flex';\nimport Image, { StyledImage } from '../Image';\nimport { useTheme } from '../../hooks';\n\nimport type { AttachmentType } from './utils';\n\nexport interface FileVisualProps extends BaseProps {\n  /** Attachment/File type, it has an impact on background color and icon rendered. */\n  type: AttachmentType;\n  /** A string to be used as an image src for a attachment thumbnail. */\n  thumbnail?: string;\n  /** Called when a thumbnail encounters an error while loading. */\n  onThumbnailError?: (e: SyntheticEvent<HTMLImageElement>) => void;\n  /** Reference to a button element. */\n  ref?: Ref<HTMLDivElement>;\n}\ntype ThemeColor = keyof OmitStrict<DefaultTheme['base']['colors'], 'white' | 'black'>;\ntype ThemeColorVariant = 'extra-light' | 'light' | 'medium' | 'dark' | 'extra-dark';\n\ntype BackgroundColor = `${ThemeColor}.${ThemeColorVariant}`;\n\nconst mapping: Record<\n  AttachmentType,\n  { backgroundColor: BackgroundColor } & (\n    | { iconName: string; text?: never }\n    | { iconName?: never; text: string }\n  )\n> = {\n  generic: {\n    iconName: 'paper-clip',\n    backgroundColor: 'slate.dark'\n  },\n  video: {\n    iconName: 'play-solid',\n    backgroundColor: 'slate.dark'\n  },\n  audio: {\n    iconName: 'speaker-on-solid',\n    backgroundColor: 'slate.dark'\n  },\n  document: {\n    iconName: 'filetype-text',\n    backgroundColor: 'blue.medium'\n  },\n  message: {\n    iconName: 'mail-solid',\n    backgroundColor: 'blue.dark'\n  },\n  pdf: {\n    text: 'PDF',\n    backgroundColor: 'red.medium'\n  },\n  spreadsheet: {\n    iconName: 'grid-solid',\n    backgroundColor: 'green.medium'\n  },\n  presentation: {\n    iconName: 'slideshow-solid',\n    backgroundColor: 'orange.medium'\n  },\n  link: {\n    iconName: 'chain',\n    backgroundColor: 'purple.dark'\n  },\n  archive: {\n    iconName: 'archive-solid',\n    backgroundColor: 'slate.dark'\n  },\n  database: {\n    iconName: 'disc-stack-solid',\n    backgroundColor: 'slate.dark'\n  },\n  image: {\n    iconName: 'picture-solid',\n    backgroundColor: 'slate.dark'\n  },\n  text: {\n    iconName: 'filetype-text',\n    backgroundColor: 'slate.dark'\n  }\n} as const;\n\nexport const StyledFileVisual = styled.div``;\n\nexport const StyledTextFrame = styled(StyledFileVisual)(({ theme }) => {\n  const {\n    base: {\n      palette: { light },\n      'border-radius': baseBorderRadius,\n      'font-size': baseFontSize,\n      'font-weight': { 'semi-bold': semiBoldWeight }\n    },\n    components: {\n      icon: {\n        size: { m: iconSize },\n        'border-radius-multiplier': borderRadiusMultiplier\n      }\n    }\n  } = theme;\n  return css`\n    background-color: var(--bg);\n    color: ${light};\n    height: ${iconSize};\n    width: ${iconSize};\n    border-radius: calc(${borderRadiusMultiplier} * ${baseBorderRadius});\n    font-size: calc(0.7 * ${baseFontSize});\n    font-weight: ${semiBoldWeight};\n    user-select: none;\n    -webkit-user-select: none;\n  `;\n});\n\nStyledTextFrame.defaultProps = defaultThemeProp;\n\nconst StyledThumbnailFrame = styled(StyledFileVisual)(({ theme }) => {\n  return css`\n    background-color: ${theme.base.palette['app-background']};\n    height: 100%;\n    width: 100%;\n\n    ${StyledImage} {\n      margin: auto;\n      height: unset;\n      width: unset;\n      max-height: 100%;\n      max-width: 100%;\n    }\n  `;\n});\n\nStyledThumbnailFrame.defaultProps = defaultThemeProp;\n\nconst FileVisual: ForwardRefForwardPropsComponent<FileVisualProps> = forwardRef(function FileVisual(\n  { type, thumbnail, onThumbnailError, ...restProps }: PropsWithoutRef<FileVisualProps>,\n  ref: FileVisualProps['ref']\n) {\n  const visualConfig = mapping[type];\n\n  const [color, lightness] = visualConfig.backgroundColor.split('.', 2) as [\n    ThemeColor,\n    ThemeColorVariant\n  ];\n\n  const {\n    base: {\n      colors: {\n        [color]: { [lightness]: backgroundColor }\n      },\n      palette: { light: foregroundColor }\n    }\n  } = useTheme();\n\n  if (thumbnail) {\n    return (\n      <Flex {...restProps} as={StyledThumbnailFrame} container>\n        <Image src={thumbnail} onError={onThumbnailError} alt='' />\n      </Flex>\n    );\n  }\n\n  return (\n    <>\n      {visualConfig.iconName ? (\n        <Icon\n          {...restProps}\n          ref={ref}\n          name={visualConfig.iconName}\n          background={backgroundColor}\n          foreground={foregroundColor}\n        />\n      ) : (\n        <Flex\n          {...restProps}\n          as={StyledTextFrame}\n          ref={ref}\n          container={{ justify: 'center', alignItems: 'center' }}\n          style={{ '--bg': backgroundColor } as CSSProperties}\n        >\n          {visualConfig.text}\n        </Flex>\n      )}\n    </>\n  );\n});\n\nexport default FileVisual;\n"]}

package/lib/components/Flex/Flex.d.ts

@@ -1,5 +1,5 @@
-import type { FunctionComponent, Ref, ReactNode } from 'react';
-import type { ForwardProps, BaseProps, AsProp, RequireAtLeastOne } from '../../types';
+import type { Ref, ReactNode } from 'react';
+import type { ForwardRefForwardPropsComponent, BaseProps, AsProp, RequireAtLeastOne } from '../../types';
 type PaddingValue = number | undefined;
 export interface FlexContainerProps {
     /** Display as inline-flex. */
@@ -73,7 +73,7 @@ export type FlexProps = RequireAtLeastOne<BaseFlexProps & BaseProps & AsProp & {
     /** Override props at extra large screen sizes and above. */
     xl?: BreakpointFlexProps;
 }, 'container' | 'item' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'>;
-export declare const StyledFlex: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {} & FlexProps, never>;
-declare const Flex: FunctionComponent<FlexProps & ForwardProps>;
+export declare const StyledFlex: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, FlexProps, never>;
+declare const Flex: ForwardRefForwardPropsComponent<FlexProps>;
 export default Flex;
 //# sourceMappingURL=Flex.d.ts.map

package/lib/components/Flex/Flex.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Flex.d.ts","sourceRoot":"","sources":["../../../src/components/Flex/Flex.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Flex.d.ts","sourceRoot":"","sources":["../../../src/components/Flex/Flex.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAmB,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAG7D,OAAO,KAAK,EACV,+BAA+B,EAC/B,SAAS,EACT,MAAM,EACN,iBAAiB,EAClB,MAAM,aAAa,CAAC;AAGrB,KAAK,YAAY,GAAG,MAAM,GAAG,SAAS,CAAC;AAEvC,MAAM,WAAW,kBAAkB;IACjC,8BAA8B;IAC9B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,yHAAyH;IACzH,GAAG,CAAC,EACA,MAAM,GACN,CAAC,WAAW,EAAE,YAAY,CAAC,GAC3B,CAAC,KAAK,EAAE,YAAY,EAAE,MAAM,EAAE,YAAY,CAAC,GAC3C,CAAC,UAAU,EAAE,YAAY,EAAE,MAAM,EAAE,YAAY,EAAE,QAAQ,EAAE,YAAY,CAAC,GACxE;QACE,UAAU,EAAE,YAAY;QACxB,SAAS,EAAE,YAAY;QACvB,WAAW,EAAE,YAAY;QACzB,QAAQ,EAAE,YAAY;KACvB,CAAC;IACN,oFAAoF;IACpF,SAAS,CAAC,EAAE,KAAK,GAAG,aAAa,GAAG,QAAQ,GAAG,gBAAgB,CAAC;IAChE,0FAA0F;IAC1F,OAAO,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,QAAQ,GAAG,SAAS,GAAG,QAAQ,GAAG,QAAQ,GAAG,SAAS,CAAC;IACnF,0EAA0E;IAC1E,IAAI,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,cAAc,CAAC;IAC1C,+EAA+E;IAC/E,UAAU,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,GAAG,UAAU,CAAC;IACjE,kFAAkF;IAClF,YAAY,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,QAAQ,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,CAAC;IAC7E;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,aAAa;IAC5B,4EAA4E;IAC5E,SAAS,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,UAAU,GAAG,QAAQ,GAAG,SAAS,CAAC;IACzE,0EAA0E;IAC1E,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,8EAA8E;IAC9E,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,4EAA4E;IAC5E,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,aAAa;IAC5B,SAAS,CAAC,EAAE,kBAAkB,GAAG,IAAI,CAAC;IACtC,IAAI,CAAC,EAAE,aAAa,CAAC;CACtB;AAED,KAAK,mBAAmB,GAAG,iBAAiB,CAAC,aAAa,EAAE,WAAW,GAAG,MAAM,CAAC,CAAC;AAElF,MAAM,MAAM,SAAS,GAAG,iBAAiB,CACvC,aAAa,GACX,SAAS,GACT,MAAM,GAAG;IACP,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,gCAAgC;IAChC,GAAG,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC,CAAC;IACnB,4DAA4D;IAC5D,EAAE,CAAC,EAAE,mBAAmB,CAAC;IACzB,sDAAsD;IACtD,EAAE,CAAC,EAAE,mBAAmB,CAAC;IACzB,uDAAuD;IACvD,EAAE,CAAC,EAAE,mBAAmB,CAAC;IACzB,sDAAsD;IACtD,EAAE,CAAC,EAAE,mBAAmB,CAAC;IACzB,4DAA4D;IAC5D,EAAE,CAAC,EAAE,mBAAmB,CAAC;CAC1B,EACH,WAAW,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CACxD,CAAC;AAsJF,eAAO,MAAM,UAAU,gHAqCtB,CAAC;AAIF,QAAA,MAAM,IAAI,EAAE,+BAA+B,CAAC,SAAS,CAKnD,CAAC;AAEH,eAAe,IAAI,CAAC"}

package/lib/components/Flex/Flex.js.map

@@ -1 +1 @@
-{"version":3,"file":"Flex.js","sourceRoot":"","sources":["../../../src/components/Flex/Flex.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef } from 'react';\nimport type { FunctionComponent, PropsWithoutRef, Ref, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport type { ForwardProps, BaseProps, AsProp, RequireAtLeastOne } from '../../types';\nimport { defaultThemeProp } from '../../theme';\n\ntype PaddingValue = number | undefined;\n\nexport interface FlexContainerProps {\n  /** Display as inline-flex. */\n  inline?: boolean;\n  /** Padding on the container represented as a multiplier or set of multipliers to the base spacing value in the theme. */\n  pad?:\n    | number\n    | [blockInline: PaddingValue]\n    | [block: PaddingValue, inline: PaddingValue]\n    | [blockStart: PaddingValue, inline: PaddingValue, blockEnd: PaddingValue]\n    | [\n        blockStart: PaddingValue,\n        inlineEnd: PaddingValue,\n        inlineStart: PaddingValue,\n        blockEnd: PaddingValue\n      ];\n  /** [flex-direction](https://css-tricks.com/almanac/properties/f/flex-direction/) */\n  direction?: 'row' | 'row-reverse' | 'column' | 'column-reverse';\n  /** [justify-content](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content) */\n  justify?: 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly' | 'stretch';\n  /** [flex-wrap](https://css-tricks.com/almanac/properties/f/flex-wrap/) */\n  wrap?: 'wrap' | 'nowrap' | 'wrap-reverse';\n  /** [align-items](https://css-tricks.com/almanac/properties/a/align-items/). */\n  alignItems?: 'stretch' | 'start' | 'end' | 'center' | 'baseline';\n  /** [align-content](https://css-tricks.com/almanac/properties/a/align-content/) */\n  alignContent?: 'start' | 'end' | 'center' | 'between' | 'around' | 'stretch';\n  /**\n   * Defines how much equal space to place between items represented as a multiplier to the base spacing value in the theme.\n   * @deprecated\n   */\n  itemGap?: number;\n  /**\n   * Defines how much equal space to place between columns represented as a multiplier to the base spacing value in the theme.\n   * [column-gap](https://css-tricks.com/almanac/properties/c/column-gap/)\n   */\n  colGap?: number;\n  /**\n   * Defines how much equal space to place between rows represented as a multiplier to the base spacing value in the theme.\n   * [row-gap](https://css-tricks.com/almanac/properties/r/row-gap/)\n   */\n  rowGap?: number;\n  /**\n   * Defines how much equal space to place between both rows and columns represented as a multiplier to the base spacing value in the theme.\n   * [gap](https://css-tricks.com/almanac/properties/g/gap/)\n   */\n  gap?: number;\n}\n\nexport interface FlexItemProps {\n  /** [align-self](https://css-tricks.com/almanac/properties/a/align-self/) */\n  alignSelf?: 'auto' | 'start' | 'end' | 'baseline' | 'center' | 'stretch';\n  /** [flex-grow](https://css-tricks.com/almanac/properties/f/flex-grow/) */\n  grow?: number;\n  /** [flex-shrink](https://css-tricks.com/almanac/properties/f/flex-shrink/) */\n  shrink?: number;\n  /** [flex-basis](https://css-tricks.com/almanac/properties/f/flex-basis/) */\n  basis?: string;\n}\n\nexport interface BaseFlexProps {\n  container?: FlexContainerProps | true;\n  item?: FlexItemProps;\n}\n\ntype BreakpointFlexProps = RequireAtLeastOne<BaseFlexProps, 'container' | 'item'>;\n\nexport type FlexProps = RequireAtLeastOne<\n  BaseFlexProps &\n    BaseProps &\n    AsProp & {\n      /** Content for either a container or item. */\n      children?: ReactNode;\n      /** Ref for the flex element. */\n      ref?: Ref<Element>;\n      /** Override props at extra small screen sizes and above. */\n      xs?: BreakpointFlexProps;\n      /** Override props at small screen sizes and above. */\n      sm?: BreakpointFlexProps;\n      /** Override props at medium screen sizes and above. */\n      md?: BreakpointFlexProps;\n      /** Override props at large screen sizes and above. */\n      lg?: BreakpointFlexProps;\n      /** Override props at extra large screen sizes and above. */\n      xl?: BreakpointFlexProps;\n    },\n  'container' | 'item' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'\n>;\n\nconst prefix = (value: string) => {\n  if (['between', 'around', 'evenly'].includes(value)) return `space-${value}`;\n  if (['start', 'end'].includes(value)) return `flex-${value}`;\n  return value;\n};\n\nconst getLogicalPadding = (pad: FlexContainerProps['pad']) => {\n  if (!Array.isArray(pad)) {\n    return [pad, pad, pad, pad];\n  }\n\n  switch (pad.length) {\n    case 1:\n      return [pad[0], pad[0], pad[0], pad[0]];\n    case 2:\n      return [pad[0], pad[1], pad[0], pad[1]];\n    case 3:\n      return [pad[0], pad[1], pad[2], pad[1]];\n    case 4:\n      return pad;\n    default:\n      return [undefined, undefined, undefined, undefined];\n  }\n};\n\nconst getContainerStyles = (container: FlexProps['container'], spacing: string) => {\n  if (!container) return '';\n\n  if (container === true) {\n    return css`\n      display: flex;\n    `;\n  }\n\n  const paddingConfig = getLogicalPadding(container.pad);\n\n  if (container && typeof container === 'object') {\n    const isRow = !container.direction || container.direction.includes('row');\n    const isReverse = container.direction && container.direction.includes('reverse');\n\n    return css`\n      display: ${container.inline ? 'inline-flex' : 'flex'};\n\n      ${paddingConfig[0] !== undefined &&\n      css`\n        padding-block-start: calc(${paddingConfig[0]} * ${spacing});\n      `}\n      ${paddingConfig[1] !== undefined &&\n      css`\n        padding-inline-end: calc(${paddingConfig[1]} * ${spacing});\n      `}\n\n        ${paddingConfig[2] !== undefined &&\n      css`\n        padding-block-end: calc(${paddingConfig[2]} * ${spacing});\n      `}\n\n        ${paddingConfig[3] !== undefined &&\n      css`\n        padding-inline-start: calc(${paddingConfig[3]} * ${spacing});\n      `}\n\n      ${container.direction &&\n      css`\n        flex-direction: ${container.direction};\n      `}\n\n      ${container.justify &&\n      css`\n        justify-content: ${prefix(container.justify)};\n      `}\n\n      ${container.wrap &&\n      css`\n        flex-wrap: ${container.wrap};\n      `}\n\n      ${container.alignItems &&\n      css`\n        align-items: ${prefix(container.alignItems)};\n      `}\n\n      ${container.alignContent &&\n      css`\n        align-content: ${prefix(container.alignContent)};\n      `}\n\n      ${container.itemGap &&\n      css`\n          > * {\n            margin-${isRow ? 'inline-start' : 'block-start'}: calc(${container.itemGap} * ${props =>\n              props.theme.base.spacing});\n            ${isReverse ? ':last-child' : ':first-child'} {\n              margin-${isRow ? 'inline-start' : 'block-start'}: 0;\n            }\n          }\n        `}\n\n      ${container.gap !== undefined &&\n      css`\n        gap: calc(${container.gap} * ${props => props.theme.base.spacing});\n      `}\n\n      ${container.colGap !== undefined &&\n      css`\n        column-gap: calc(${container.colGap} * ${props => props.theme.base.spacing});\n      `}\n\n      ${container.rowGap !== undefined &&\n      css`\n        row-gap: calc(${container.rowGap} * ${props => props.theme.base.spacing});\n      `}\n    `;\n  }\n};\n\nconst getItemStyles = (item: FlexProps['item']) => {\n  return css`\n    ${item &&\n    css`\n      max-width: 100%;\n      min-width: 0;\n\n      ${item.grow !== undefined &&\n      css`\n        flex-grow: ${item.grow};\n      `}\n\n      ${item.shrink !== undefined &&\n      css`\n        flex-shrink: ${item.shrink};\n      `}\n\n      ${item.alignSelf &&\n      css`\n        align-self: ${prefix(item.alignSelf)};\n      `}\n\n      ${item.basis &&\n      css`\n        flex-basis: ${item.basis};\n      `}\n    `}\n  `;\n};\n\nconst breakpointOrder = ['xs', 'sm', 'md', 'lg', 'xl'] as const;\n\nexport const StyledFlex = styled.div<FlexProps>(\n  ({\n    container,\n    item,\n    theme: {\n      base: { breakpoints: themeBreakpoints, spacing }\n    },\n    xs,\n    sm,\n    md,\n    lg,\n    xl\n  }) => {\n    const breakpoints = {\n      xs,\n      sm,\n      md,\n      lg,\n      xl\n    };\n\n    return css`\n      ${getContainerStyles(container, spacing)}\n      ${getItemStyles(item)}\n\n    ${breakpointOrder.map(\n        breakpoint =>\n          breakpoints[breakpoint] &&\n          css`\n            @media screen and (min-width: ${themeBreakpoints[breakpoint]}) {\n              ${getContainerStyles(breakpoints[breakpoint]?.container, spacing)}\n              ${getItemStyles(breakpoints[breakpoint]?.item)}\n            }\n          `\n      )}\n    `;\n  }\n);\n\nStyledFlex.defaultProps = defaultThemeProp;\n\nconst Flex: FunctionComponent<FlexProps & ForwardProps> = forwardRef(function Flex(\n  props: PropsWithoutRef<FlexProps>,\n  ref: FlexProps['ref']\n) {\n  return <StyledFlex {...props} ref={ref} />;\n});\n\nexport default Flex;\n"]}
+{"version":3,"file":"Flex.js","sourceRoot":"","sources":["../../../src/components/Flex/Flex.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAQhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AA2F/C,MAAM,MAAM,GAAG,CAAC,KAAa,EAAE,EAAE;IAC/B,IAAI,CAAC,SAAS,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC;QAAE,OAAO,SAAS,KAAK,EAAE,CAAC;IAC7E,IAAI,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC;QAAE,OAAO,QAAQ,KAAK,EAAE,CAAC;IAC7D,OAAO,KAAK,CAAC;AACf,CAAC,CAAC;AAEF,MAAM,iBAAiB,GAAG,CAAC,GAA8B,EAAE,EAAE;IAC3D,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC;QACxB,OAAO,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC;IAC9B,CAAC;IAED,QAAQ,GAAG,CAAC,MAAM,EAAE,CAAC;QACnB,KAAK,CAAC;YACJ,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;QAC1C,KAAK,CAAC;YACJ,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;QAC1C,KAAK,CAAC;YACJ,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;QAC1C,KAAK,CAAC;YACJ,OAAO,GAAG,CAAC;QACb;YACE,OAAO,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,CAAC,CAAC;IACxD,CAAC;AACH,CAAC,CAAC;AAEF,MAAM,kBAAkB,GAAG,CAAC,SAAiC,EAAE,OAAe,EAAE,EAAE;IAChF,IAAI,CAAC,SAAS;QAAE,OAAO,EAAE,CAAC;IAE1B,IAAI,SAAS,KAAK,IAAI,EAAE,CAAC;QACvB,OAAO,GAAG,CAAA;;KAET,CAAC;IACJ,CAAC;IAED,MAAM,aAAa,GAAG,iBAAiB,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC;IAEvD,IAAI,SAAS,IAAI,OAAO,SAAS,KAAK,QAAQ,EAAE,CAAC;QAC/C,MAAM,KAAK,GAAG,CAAC,SAAS,CAAC,SAAS,IAAI,SAAS,CAAC,SAAS,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;QAC1E,MAAM,SAAS,GAAG,SAAS,CAAC,SAAS,IAAI,SAAS,CAAC,SAAS,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC;QAEjF,OAAO,GAAG,CAAA;iBACG,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,MAAM;;QAElD,aAAa,CAAC,CAAC,CAAC,KAAK,SAAS;YAChC,GAAG,CAAA;oCAC2B,aAAa,CAAC,CAAC,CAAC,MAAM,OAAO;OAC1D;QACC,aAAa,CAAC,CAAC,CAAC,KAAK,SAAS;YAChC,GAAG,CAAA;mCAC0B,aAAa,CAAC,CAAC,CAAC,MAAM,OAAO;OACzD;;UAEG,aAAa,CAAC,CAAC,CAAC,KAAK,SAAS;YAClC,GAAG,CAAA;kCACyB,aAAa,CAAC,CAAC,CAAC,MAAM,OAAO;OACxD;;UAEG,aAAa,CAAC,CAAC,CAAC,KAAK,SAAS;YAClC,GAAG,CAAA;qCAC4B,aAAa,CAAC,CAAC,CAAC,MAAM,OAAO;OAC3D;;QAEC,SAAS,CAAC,SAAS;YACrB,GAAG,CAAA;0BACiB,SAAS,CAAC,SAAS;OACtC;;QAEC,SAAS,CAAC,OAAO;YACnB,GAAG,CAAA;2BACkB,MAAM,CAAC,SAAS,CAAC,OAAO,CAAC;OAC7C;;QAEC,SAAS,CAAC,IAAI;YAChB,GAAG,CAAA;qBACY,SAAS,CAAC,IAAI;OAC5B;;QAEC,SAAS,CAAC,UAAU;YACtB,GAAG,CAAA;uBACc,MAAM,CAAC,SAAS,CAAC,UAAU,CAAC;OAC5C;;QAEC,SAAS,CAAC,YAAY;YACxB,GAAG,CAAA;yBACgB,MAAM,CAAC,SAAS,CAAC,YAAY,CAAC;OAChD;;QAEC,SAAS,CAAC,OAAO;YACnB,GAAG,CAAA;;qBAEY,KAAK,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,aAAa,UAAU,SAAS,CAAC,OAAO,MAAM,KAAK,CAAC,EAAE,CACtF,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO;cACxB,SAAS,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,cAAc;uBACjC,KAAK,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,aAAa;;;SAGpD;;QAED,SAAS,CAAC,GAAG,KAAK,SAAS;YAC7B,GAAG,CAAA;oBACW,SAAS,CAAC,GAAG,MAAM,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO;OACjE;;QAEC,SAAS,CAAC,MAAM,KAAK,SAAS;YAChC,GAAG,CAAA;2BACkB,SAAS,CAAC,MAAM,MAAM,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO;OAC3E;;QAEC,SAAS,CAAC,MAAM,KAAK,SAAS;YAChC,GAAG,CAAA;wBACe,SAAS,CAAC,MAAM,MAAM,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO;OACxE;KACF,CAAC;IACJ,CAAC;AACH,CAAC,CAAC;AAEF,MAAM,aAAa,GAAG,CAAC,IAAuB,EAAE,EAAE;IAChD,OAAO,GAAG,CAAA;MACN,IAAI;QACN,GAAG,CAAA;;;;QAIC,IAAI,CAAC,IAAI,KAAK,SAAS;YACzB,GAAG,CAAA;qBACY,IAAI,CAAC,IAAI;OACvB;;QAEC,IAAI,CAAC,MAAM,KAAK,SAAS;YAC3B,GAAG,CAAA;uBACc,IAAI,CAAC,MAAM;OAC3B;;QAEC,IAAI,CAAC,SAAS;YAChB,GAAG,CAAA;sBACa,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC;OACrC;;QAEC,IAAI,CAAC,KAAK;YACZ,GAAG,CAAA;sBACa,IAAI,CAAC,KAAK;OACzB;KACF;GACF,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,eAAe,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAU,CAAC;AAEhE,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAClC,CAAC,EACC,SAAS,EACT,IAAI,EACJ,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,WAAW,EAAE,gBAAgB,EAAE,OAAO,EAAE,EACjD,EACD,EAAE,EACF,EAAE,EACF,EAAE,EACF,EAAE,EACF,EAAE,EACH,EAAE,EAAE;IACH,MAAM,WAAW,GAAG;QAClB,EAAE;QACF,EAAE;QACF,EAAE;QACF,EAAE;QACF,EAAE;KACH,CAAC;IAEF,OAAO,GAAG,CAAA;QACN,kBAAkB,CAAC,SAAS,EAAE,OAAO,CAAC;QACtC,aAAa,CAAC,IAAI,CAAC;;MAErB,eAAe,CAAC,GAAG,CACjB,UAAU,CAAC,EAAE,CACX,WAAW,CAAC,UAAU,CAAC;QACvB,GAAG,CAAA;4CAC+B,gBAAgB,CAAC,UAAU,CAAC;gBACxD,kBAAkB,CAAC,WAAW,CAAC,UAAU,CAAC,EAAE,SAAS,EAAE,OAAO,CAAC;gBAC/D,aAAa,CAAC,WAAW,CAAC,UAAU,CAAC,EAAE,IAAI,CAAC;;WAEjD,CACJ;KACF,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,UAAU,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE3C,MAAM,IAAI,GAA+C,UAAU,CAAC,SAAS,IAAI,CAC/E,KAAiC,EACjC,GAAqB;IAErB,OAAO,KAAC,UAAU,OAAK,KAAK,EAAE,GAAG,EAAE,GAAG,GAAI,CAAC;AAC7C,CAAC,CAAC,CAAC;AAEH,eAAe,IAAI,CAAC","sourcesContent":["import { forwardRef } from 'react';\nimport type { PropsWithoutRef, Ref, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport type {\n  ForwardRefForwardPropsComponent,\n  BaseProps,\n  AsProp,\n  RequireAtLeastOne\n} from '../../types';\nimport { defaultThemeProp } from '../../theme';\n\ntype PaddingValue = number | undefined;\n\nexport interface FlexContainerProps {\n  /** Display as inline-flex. */\n  inline?: boolean;\n  /** Padding on the container represented as a multiplier or set of multipliers to the base spacing value in the theme. */\n  pad?:\n    | number\n    | [blockInline: PaddingValue]\n    | [block: PaddingValue, inline: PaddingValue]\n    | [blockStart: PaddingValue, inline: PaddingValue, blockEnd: PaddingValue]\n    | [\n        blockStart: PaddingValue,\n        inlineEnd: PaddingValue,\n        inlineStart: PaddingValue,\n        blockEnd: PaddingValue\n      ];\n  /** [flex-direction](https://css-tricks.com/almanac/properties/f/flex-direction/) */\n  direction?: 'row' | 'row-reverse' | 'column' | 'column-reverse';\n  /** [justify-content](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content) */\n  justify?: 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly' | 'stretch';\n  /** [flex-wrap](https://css-tricks.com/almanac/properties/f/flex-wrap/) */\n  wrap?: 'wrap' | 'nowrap' | 'wrap-reverse';\n  /** [align-items](https://css-tricks.com/almanac/properties/a/align-items/). */\n  alignItems?: 'stretch' | 'start' | 'end' | 'center' | 'baseline';\n  /** [align-content](https://css-tricks.com/almanac/properties/a/align-content/) */\n  alignContent?: 'start' | 'end' | 'center' | 'between' | 'around' | 'stretch';\n  /**\n   * Defines how much equal space to place between items represented as a multiplier to the base spacing value in the theme.\n   * @deprecated\n   */\n  itemGap?: number;\n  /**\n   * Defines how much equal space to place between columns represented as a multiplier to the base spacing value in the theme.\n   * [column-gap](https://css-tricks.com/almanac/properties/c/column-gap/)\n   */\n  colGap?: number;\n  /**\n   * Defines how much equal space to place between rows represented as a multiplier to the base spacing value in the theme.\n   * [row-gap](https://css-tricks.com/almanac/properties/r/row-gap/)\n   */\n  rowGap?: number;\n  /**\n   * Defines how much equal space to place between both rows and columns represented as a multiplier to the base spacing value in the theme.\n   * [gap](https://css-tricks.com/almanac/properties/g/gap/)\n   */\n  gap?: number;\n}\n\nexport interface FlexItemProps {\n  /** [align-self](https://css-tricks.com/almanac/properties/a/align-self/) */\n  alignSelf?: 'auto' | 'start' | 'end' | 'baseline' | 'center' | 'stretch';\n  /** [flex-grow](https://css-tricks.com/almanac/properties/f/flex-grow/) */\n  grow?: number;\n  /** [flex-shrink](https://css-tricks.com/almanac/properties/f/flex-shrink/) */\n  shrink?: number;\n  /** [flex-basis](https://css-tricks.com/almanac/properties/f/flex-basis/) */\n  basis?: string;\n}\n\nexport interface BaseFlexProps {\n  container?: FlexContainerProps | true;\n  item?: FlexItemProps;\n}\n\ntype BreakpointFlexProps = RequireAtLeastOne<BaseFlexProps, 'container' | 'item'>;\n\nexport type FlexProps = RequireAtLeastOne<\n  BaseFlexProps &\n    BaseProps &\n    AsProp & {\n      /** Content for either a container or item. */\n      children?: ReactNode;\n      /** Ref for the flex element. */\n      ref?: Ref<Element>;\n      /** Override props at extra small screen sizes and above. */\n      xs?: BreakpointFlexProps;\n      /** Override props at small screen sizes and above. */\n      sm?: BreakpointFlexProps;\n      /** Override props at medium screen sizes and above. */\n      md?: BreakpointFlexProps;\n      /** Override props at large screen sizes and above. */\n      lg?: BreakpointFlexProps;\n      /** Override props at extra large screen sizes and above. */\n      xl?: BreakpointFlexProps;\n    },\n  'container' | 'item' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'\n>;\n\nconst prefix = (value: string) => {\n  if (['between', 'around', 'evenly'].includes(value)) return `space-${value}`;\n  if (['start', 'end'].includes(value)) return `flex-${value}`;\n  return value;\n};\n\nconst getLogicalPadding = (pad: FlexContainerProps['pad']) => {\n  if (!Array.isArray(pad)) {\n    return [pad, pad, pad, pad];\n  }\n\n  switch (pad.length) {\n    case 1:\n      return [pad[0], pad[0], pad[0], pad[0]];\n    case 2:\n      return [pad[0], pad[1], pad[0], pad[1]];\n    case 3:\n      return [pad[0], pad[1], pad[2], pad[1]];\n    case 4:\n      return pad;\n    default:\n      return [undefined, undefined, undefined, undefined];\n  }\n};\n\nconst getContainerStyles = (container: FlexProps['container'], spacing: string) => {\n  if (!container) return '';\n\n  if (container === true) {\n    return css`\n      display: flex;\n    `;\n  }\n\n  const paddingConfig = getLogicalPadding(container.pad);\n\n  if (container && typeof container === 'object') {\n    const isRow = !container.direction || container.direction.includes('row');\n    const isReverse = container.direction && container.direction.includes('reverse');\n\n    return css`\n      display: ${container.inline ? 'inline-flex' : 'flex'};\n\n      ${paddingConfig[0] !== undefined &&\n      css`\n        padding-block-start: calc(${paddingConfig[0]} * ${spacing});\n      `}\n      ${paddingConfig[1] !== undefined &&\n      css`\n        padding-inline-end: calc(${paddingConfig[1]} * ${spacing});\n      `}\n\n        ${paddingConfig[2] !== undefined &&\n      css`\n        padding-block-end: calc(${paddingConfig[2]} * ${spacing});\n      `}\n\n        ${paddingConfig[3] !== undefined &&\n      css`\n        padding-inline-start: calc(${paddingConfig[3]} * ${spacing});\n      `}\n\n      ${container.direction &&\n      css`\n        flex-direction: ${container.direction};\n      `}\n\n      ${container.justify &&\n      css`\n        justify-content: ${prefix(container.justify)};\n      `}\n\n      ${container.wrap &&\n      css`\n        flex-wrap: ${container.wrap};\n      `}\n\n      ${container.alignItems &&\n      css`\n        align-items: ${prefix(container.alignItems)};\n      `}\n\n      ${container.alignContent &&\n      css`\n        align-content: ${prefix(container.alignContent)};\n      `}\n\n      ${container.itemGap &&\n      css`\n          > * {\n            margin-${isRow ? 'inline-start' : 'block-start'}: calc(${container.itemGap} * ${props =>\n              props.theme.base.spacing});\n            ${isReverse ? ':last-child' : ':first-child'} {\n              margin-${isRow ? 'inline-start' : 'block-start'}: 0;\n            }\n          }\n        `}\n\n      ${container.gap !== undefined &&\n      css`\n        gap: calc(${container.gap} * ${props => props.theme.base.spacing});\n      `}\n\n      ${container.colGap !== undefined &&\n      css`\n        column-gap: calc(${container.colGap} * ${props => props.theme.base.spacing});\n      `}\n\n      ${container.rowGap !== undefined &&\n      css`\n        row-gap: calc(${container.rowGap} * ${props => props.theme.base.spacing});\n      `}\n    `;\n  }\n};\n\nconst getItemStyles = (item: FlexProps['item']) => {\n  return css`\n    ${item &&\n    css`\n      max-width: 100%;\n      min-width: 0;\n\n      ${item.grow !== undefined &&\n      css`\n        flex-grow: ${item.grow};\n      `}\n\n      ${item.shrink !== undefined &&\n      css`\n        flex-shrink: ${item.shrink};\n      `}\n\n      ${item.alignSelf &&\n      css`\n        align-self: ${prefix(item.alignSelf)};\n      `}\n\n      ${item.basis &&\n      css`\n        flex-basis: ${item.basis};\n      `}\n    `}\n  `;\n};\n\nconst breakpointOrder = ['xs', 'sm', 'md', 'lg', 'xl'] as const;\n\nexport const StyledFlex = styled.div<FlexProps>(\n  ({\n    container,\n    item,\n    theme: {\n      base: { breakpoints: themeBreakpoints, spacing }\n    },\n    xs,\n    sm,\n    md,\n    lg,\n    xl\n  }) => {\n    const breakpoints = {\n      xs,\n      sm,\n      md,\n      lg,\n      xl\n    };\n\n    return css`\n      ${getContainerStyles(container, spacing)}\n      ${getItemStyles(item)}\n\n    ${breakpointOrder.map(\n        breakpoint =>\n          breakpoints[breakpoint] &&\n          css`\n            @media screen and (min-width: ${themeBreakpoints[breakpoint]}) {\n              ${getContainerStyles(breakpoints[breakpoint]?.container, spacing)}\n              ${getItemStyles(breakpoints[breakpoint]?.item)}\n            }\n          `\n      )}\n    `;\n  }\n);\n\nStyledFlex.defaultProps = defaultThemeProp;\n\nconst Flex: ForwardRefForwardPropsComponent<FlexProps> = forwardRef(function Flex(\n  props: PropsWithoutRef<FlexProps>,\n  ref: FlexProps['ref']\n) {\n  return <StyledFlex {...props} ref={ref} />;\n});\n\nexport default Flex;\n"]}

package/lib/components/Form/Form.d.ts

@@ -1,12 +1,11 @@
-import type { FC } from 'react';
-import type { ForwardProps, OmitStrict, TestIdProp } from '../../types';
+import type { ForwardRefForwardPropsComponent, OmitStrict, TestIdProp } from '../../types';
 import type { BaseFormProps } from '../MultiStepForm/MultiStepForm.types';
 export interface FormProps extends OmitStrict<BaseFormProps, 'content'>, TestIdProp {
     /** The Form content. Recommended composing form elements within a layout template such as Grid or Flex as the only child. */
     children: BaseFormProps['content'];
 }
-declare const _default: FC<FormProps & ForwardProps> & {
-    getTestIds: (testIdProp?: string | null | undefined) => import("../../types").TestIdsRecord<readonly []>;
+declare const _default: ForwardRefForwardPropsComponent<FormProps> & {
+    getTestIds: (testIdProp?: TestIdProp["testId"]) => import("../../types").TestIdsRecord<readonly []>;
 };
 export default _default;
 //# sourceMappingURL=Form.d.ts.map

package/lib/components/Form/Form.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Form.d.ts","sourceRoot":"","sources":["../../../src/components/Form/Form.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAmB,MAAM,OAAO,CAAC;AAEjD,OAAO,KAAK,EAAE,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAGxE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,sCAAsC,CAAC;AAK1E,MAAM,WAAW,SAAU,SAAQ,UAAU,CAAC,aAAa,EAAE,SAAS,CAAC,EAAE,UAAU;IACjF,6HAA6H;IAC7H,QAAQ,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;CACpC;;;;AAyCD,wBAAiD"}
+{"version":3,"file":"Form.d.ts","sourceRoot":"","sources":["../../../src/components/Form/Form.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,+BAA+B,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAG3F,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,sCAAsC,CAAC;AAK1E,MAAM,WAAW,SAAU,SAAQ,UAAU,CAAC,aAAa,EAAE,SAAS,CAAC,EAAE,UAAU;IACjF,6HAA6H;IAC7H,QAAQ,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;CACpC;;;;AAyCD,wBAAiD"}

package/lib/components/Form/Form.js

@@ -7,7 +7,7 @@ import { getFormTestIds } from './Form.test-ids';
 const Form = forwardRef(function Form({ testId, children, actions, progress, heading, description, banners, ...restProps }, ref) {
     const stepId = useUID();
     const testIds = useTestIds(testId, getFormTestIds);
-    return (_jsx(MultiStepForm, { "data-testid": testIds.root, ...restProps, heading: heading, steps: [
+    return (_jsx(MultiStepForm, { "data-testid": testIds.root, autoComplete: '_off', ...restProps, heading: heading, steps: [
             {
                 id: stepId,
                 name: '',
@@ -16,7 +16,7 @@ const Form = forwardRef(function Form({ testId, children, actions, progress, hea
                 description,
                 banners
             }
-        ], currentStepId: stepId, progress: progress, ref: ref, autoComplete: 'off' }));
+        ], currentStepId: stepId, progress: progress, ref: ref }));
 });
 export default withTestIds(Form, getFormTestIds);
 //# sourceMappingURL=Form.js.map

package/lib/components/Form/Form.js.map

@@ -1 +1 @@
-{"version":3,"file":"Form.js","sourceRoot":"","sources":["../../../src/components/Form/Form.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAInC,OAAO,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACjD,OAAO,aAAa,MAAM,kBAAkB,CAAC;AAE7C,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE1C,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAOjD,MAAM,IAAI,GAAiC,UAAU,CAAC,SAAS,IAAI,CACjE,EACE,MAAM,EACN,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,OAAO,EACP,WAAW,EACX,OAAO,EACP,GAAG,SAAS,EACe,EAC7B,GAAqB;IAErB,MAAM,MAAM,GAAG,MAAM,EAAE,CAAC;IACxB,MAAM,OAAO,GAAG,UAAU,CAAC,MAAM,EAAE,cAAc,CAAC,CAAC;IAEnD,OAAO,CACL,KAAC,aAAa,mBACC,OAAO,CAAC,IAAI,KACrB,SAAS,EACb,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE;YACL;gBACE,EAAE,EAAE,MAAM;gBACV,IAAI,EAAE,EAAE;gBACR,OAAO;gBACP,OAAO,EAAE,QAAQ;gBACjB,WAAW;gBACX,OAAO;aACR;SACF,EACD,aAAa,EAAE,MAAM,EACrB,QAAQ,EAAE,QAAQ,EAClB,GAAG,EAAE,GAAG,EACR,YAAY,EAAC,KAAK,GAClB,CACH,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,WAAW,CAAC,IAAI,EAAE,cAAc,CAAC,CAAC","sourcesContent":["import { forwardRef } from 'react';\nimport type { FC, PropsWithoutRef } from 'react';\n\nimport type { ForwardProps, OmitStrict, TestIdProp } from '../../types';\nimport { useTestIds, useUID } from '../../hooks';\nimport MultiStepForm from '../MultiStepForm';\nimport type { BaseFormProps } from '../MultiStepForm/MultiStepForm.types';\nimport { withTestIds } from '../../utils';\n\nimport { getFormTestIds } from './Form.test-ids';\n\nexport interface FormProps extends OmitStrict<BaseFormProps, 'content'>, TestIdProp {\n  /** The Form content. Recommended composing form elements within a layout template such as Grid or Flex as the only child. */\n  children: BaseFormProps['content'];\n}\n\nconst Form: FC<FormProps & ForwardProps> = forwardRef(function Form(\n  {\n    testId,\n    children,\n    actions,\n    progress,\n    heading,\n    description,\n    banners,\n    ...restProps\n  }: PropsWithoutRef<FormProps>,\n  ref: FormProps['ref']\n) {\n  const stepId = useUID();\n  const testIds = useTestIds(testId, getFormTestIds);\n\n  return (\n    <MultiStepForm\n      data-testid={testIds.root}\n      {...restProps}\n      heading={heading}\n      steps={[\n        {\n          id: stepId,\n          name: '',\n          actions,\n          content: children,\n          description,\n          banners\n        }\n      ]}\n      currentStepId={stepId}\n      progress={progress}\n      ref={ref}\n      autoComplete='off'\n    />\n  );\n});\n\nexport default withTestIds(Form, getFormTestIds);\n"]}
+{"version":3,"file":"Form.js","sourceRoot":"","sources":["../../../src/components/Form/Form.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAInC,OAAO,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACjD,OAAO,aAAa,MAAM,kBAAkB,CAAC;AAE7C,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE1C,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAOjD,MAAM,IAAI,GAA+C,UAAU,CAAC,SAAS,IAAI,CAC/E,EACE,MAAM,EACN,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,OAAO,EACP,WAAW,EACX,OAAO,EACP,GAAG,SAAS,EACe,EAC7B,GAAqB;IAErB,MAAM,MAAM,GAAG,MAAM,EAAE,CAAC;IACxB,MAAM,OAAO,GAAG,UAAU,CAAC,MAAM,EAAE,cAAc,CAAC,CAAC;IAEnD,OAAO,CACL,KAAC,aAAa,mBACC,OAAO,CAAC,IAAI,EACzB,YAAY,EAAC,MAAM,KACf,SAAS,EACb,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE;YACL;gBACE,EAAE,EAAE,MAAM;gBACV,IAAI,EAAE,EAAE;gBACR,OAAO;gBACP,OAAO,EAAE,QAAQ;gBACjB,WAAW;gBACX,OAAO;aACR;SACF,EACD,aAAa,EAAE,MAAM,EACrB,QAAQ,EAAE,QAAQ,EAClB,GAAG,EAAE,GAAG,GACR,CACH,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,WAAW,CAAC,IAAI,EAAE,cAAc,CAAC,CAAC","sourcesContent":["import { forwardRef } from 'react';\nimport type { PropsWithoutRef } from 'react';\n\nimport type { ForwardRefForwardPropsComponent, OmitStrict, TestIdProp } from '../../types';\nimport { useTestIds, useUID } from '../../hooks';\nimport MultiStepForm from '../MultiStepForm';\nimport type { BaseFormProps } from '../MultiStepForm/MultiStepForm.types';\nimport { withTestIds } from '../../utils';\n\nimport { getFormTestIds } from './Form.test-ids';\n\nexport interface FormProps extends OmitStrict<BaseFormProps, 'content'>, TestIdProp {\n  /** The Form content. Recommended composing form elements within a layout template such as Grid or Flex as the only child. */\n  children: BaseFormProps['content'];\n}\n\nconst Form: ForwardRefForwardPropsComponent<FormProps> = forwardRef(function Form(\n  {\n    testId,\n    children,\n    actions,\n    progress,\n    heading,\n    description,\n    banners,\n    ...restProps\n  }: PropsWithoutRef<FormProps>,\n  ref: FormProps['ref']\n) {\n  const stepId = useUID();\n  const testIds = useTestIds(testId, getFormTestIds);\n\n  return (\n    <MultiStepForm\n      data-testid={testIds.root}\n      autoComplete='_off'\n      {...restProps}\n      heading={heading}\n      steps={[\n        {\n          id: stepId,\n          name: '',\n          actions,\n          content: children,\n          description,\n          banners\n        }\n      ]}\n      currentStepId={stepId}\n      progress={progress}\n      ref={ref}\n    />\n  );\n});\n\nexport default withTestIds(Form, getFormTestIds);\n"]}

package/lib/components/Form/Form.test-ids.d.ts

@@ -1,2 +1,2 @@
-export declare const getFormTestIds: (testIdProp?: string | null | undefined) => import("../..").TestIdsRecord<readonly []>;
+export declare const getFormTestIds: (testIdProp?: import("../..").TestIdProp["testId"]) => import("../..").TestIdsRecord<readonly []>;
 //# sourceMappingURL=Form.test-ids.d.ts.map

package/lib/components/Form/Form.test-ids.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Form.test-ids.d.ts","sourceRoot":"","sources":["../../../src/components/Form/Form.test-ids.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc,wFAAqC,CAAC"}
+{"version":3,"file":"Form.test-ids.d.ts","sourceRoot":"","sources":["../../../src/components/Form/Form.test-ids.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc,mGAAqC,CAAC"}

package/lib/components/FormControl/FormControl.d.ts

@@ -48,7 +48,7 @@ export interface HandleValue {
     clear: () => void;
 }
 export declare const StyledFormControl: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, Pick<FormControlProps, keyof FormControlProps> & Required<Pick<FormControlProps, never>> & {
-    hasSuggestion?: boolean | undefined;
+    hasSuggestion?: boolean;
 }, never>;
 declare const FormControl: FunctionComponent<FormControlProps & ForwardProps>;
 export default FormControl;

package/lib/components/FormControl/FormControl.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormControl.d.ts","sourceRoot":"","sources":["../../../src/components/FormControl/FormControl.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAwB,SAAS,EAAE,MAAM,OAAO,CAAC;AAIhF,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAqB,MAAM,aAAa,CAAC;AAG9E,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAE7D,MAAM,WAAW,gBAAiB,SAAQ,SAAS;IACjD;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,oDAAoD;IACpD,MAAM,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;IACrD,2DAA2D;IAC3D,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,uCAAuC;IACvC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,6GAA6G;IAC7G,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,wEAAwE;IACxE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iEAAiE;IACjE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sEAAsE;IACtE,cAAc,CAAC,EAAE;QACf,OAAO,CAAC,EAAE,mBAAmB,CAAC,SAAS,CAAC,CAAC;QACzC,OAAO,EAAE,mBAAmB,CAAC,UAAU,CAAC,CAAC;KAC1C,CAAC;IACF;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qFAAqF;IACrF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+FAA+F;IAC/F,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,6DAA6D;IAC7D,mBAAmB,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;CACnD;AAID,MAAM,WAAW,WAAW;IAC1B,4DAA4D;IAC5D,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAED,eAAO,MAAM,iBAAiB;;SA6G7B,CAAC;AAIF,QAAA,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,GAAG,YAAY,CAInE,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"FormControl.d.ts","sourceRoot":"","sources":["../../../src/components/FormControl/FormControl.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAwB,SAAS,EAAE,MAAM,OAAO,CAAC;AAIhF,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAqB,MAAM,aAAa,CAAC;AAG9E,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAE7D,MAAM,WAAW,gBAAiB,SAAQ,SAAS;IACjD;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,oDAAoD;IACpD,MAAM,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;IACrD,2DAA2D;IAC3D,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,uCAAuC;IACvC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,6GAA6G;IAC7G,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,wEAAwE;IACxE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iEAAiE;IACjE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sEAAsE;IACtE,cAAc,CAAC,EAAE;QACf,OAAO,CAAC,EAAE,mBAAmB,CAAC,SAAS,CAAC,CAAC;QACzC,OAAO,EAAE,mBAAmB,CAAC,UAAU,CAAC,CAAC;KAC1C,CAAC;IACF;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qFAAqF;IACrF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+FAA+F;IAC/F,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,6DAA6D;IAC7D,mBAAmB,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;CACnD;AAID,MAAM,WAAW,WAAW;IAC1B,4DAA4D;IAC5D,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAED,eAAO,MAAM,iBAAiB;oBACqB,OAAO;SA4GzD,CAAC;AAIF,QAAA,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,GAAG,YAAY,CAInE,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/lib/components/FormField/FormField.d.ts

@@ -63,6 +63,10 @@ export interface FormFieldProps extends OmitStrict<FormControlProps, 'placeholde
     container?: ExcludeStrict<FlexProps['container'], true>;
     /** Character remaining count. Typically used on Textareas only */
     charLimitDisplay?: ReactNode;
+    /** Id of additional describing element. */
+    'aria-describedby'?: string;
+    /** Callback invoked when the clear button is clicked. If provided will render the clear button. */
+    onClear?: () => void;
 }
 export declare const StyledFormFieldInfo: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, Pick<FormControlProps, "status">, never>;
 export declare const StyledLabelRow: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
@@ -71,7 +75,7 @@ export declare const StyledFormField: import("styled-components").StyledComponen
     showAdditionalInfo: boolean;
 }, never>;
 declare const _default: FC<FormFieldProps & ForwardProps> & {
-    getTestIds: (testIdProp?: string | null | undefined) => import("../../types").TestIdsRecord<readonly ["label", "info", "additional-info", "suggestion-accept", "suggestion-reject"]>;
+    getTestIds: (testIdProp?: TestIdProp["testId"]) => import("../../types").TestIdsRecord<readonly ["label", "info", "additional-info", "suggestion-accept", "suggestion-reject"]>;
 };
 export default _default;
 //# sourceMappingURL=FormField.d.ts.map

package/lib/components/FormField/FormField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormField.d.ts","sourceRoot":"","sources":["../../../src/components/FormField/FormField.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAE,SAAS,EAAE,aAAa,EAAE,YAAY,EAAwB,MAAM,OAAO,CAAC;AAK9F,OAAO,KAAK,EAAE,MAAM,EAAE,aAAa,EAAE,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAE/F,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEzC,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAGvD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAY3C,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAIrD,MAAM,WAAW,cACf,SAAQ,UAAU,CAAC,gBAAgB,EAAE,aAAa,GAAG,OAAO,GAAG,cAAc,CAAC,EAC5E,UAAU,CAAC,OAAO,QAAQ,CAAC;IAC7B,kFAAkF;IAClF,QAAQ,EAAE,YAAY,GAAG,YAAY,EAAE,CAAC;IACxC;;;;;;;;OAQG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;OAGG;IACH,OAAO,CAAC,EAAE,UAAU,CAAC,IAAI,CAAC,CAAC;IAC3B;;;OAGG;IACH,QAAQ,CAAC,EAAE,UAAU,CAAC,SAAS,CAAC,CAAC;IACjC;;;OAGG;IACH,OAAO,CAAC,EAAE,UAAU,CAAC,IAAI,CAAC,CAAC;IAC3B;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;OAGG;IACH,EAAE,CAAC,EAAE,KAAK,GAAG,UAAU,GAAG,aAAa,CAAC,GAAG,CAAC,CAAC;IAC7C;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,8CAA8C;IAC9C,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,gDAAgD;IAChD,SAAS,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,WAAW,CAAC,EAAE,IAAI,CAAC,CAAC;IACxD,kEAAkE;IAClE,gBAAgB,CAAC,EAAE,SAAS,CAAC;CAC9B;AAiBD,eAAO,MAAM,mBAAmB,uIAsB/B,CAAC;AAIF,eAAO,MAAM,cAAc,yGAAe,CAAC;AAE3C,eAAO,MAAM,eAAe;mBACQ,OAAO;wBAAsB,OAAO;SA+EtE,CAAC;;;;AA0QH,wBAA2D"}
+{"version":3,"file":"FormField.d.ts","sourceRoot":"","sources":["../../../src/components/FormField/FormField.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAE,SAAS,EAAE,aAAa,EAAE,YAAY,EAAwB,MAAM,OAAO,CAAC;AAK9F,OAAO,KAAK,EAAE,MAAM,EAAE,aAAa,EAAE,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAE/F,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEzC,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAGvD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAY3C,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAIrD,MAAM,WAAW,cACf,SAAQ,UAAU,CAAC,gBAAgB,EAAE,aAAa,GAAG,OAAO,GAAG,cAAc,CAAC,EAC5E,UAAU,CAAC,OAAO,QAAQ,CAAC;IAC7B,kFAAkF;IAClF,QAAQ,EAAE,YAAY,GAAG,YAAY,EAAE,CAAC;IACxC;;;;;;;;OAQG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;OAGG;IACH,OAAO,CAAC,EAAE,UAAU,CAAC,IAAI,CAAC,CAAC;IAC3B;;;OAGG;IACH,QAAQ,CAAC,EAAE,UAAU,CAAC,SAAS,CAAC,CAAC;IACjC;;;OAGG;IACH,OAAO,CAAC,EAAE,UAAU,CAAC,IAAI,CAAC,CAAC;IAC3B;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;OAGG;IACH,EAAE,CAAC,EAAE,KAAK,GAAG,UAAU,GAAG,aAAa,CAAC,GAAG,CAAC,CAAC;IAC7C;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,8CAA8C;IAC9C,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,gDAAgD;IAChD,SAAS,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,WAAW,CAAC,EAAE,IAAI,CAAC,CAAC;IACxD,kEAAkE;IAClE,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAC7B,2CAA2C;IAC3C,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,mGAAmG;IACnG,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAgCD,eAAO,MAAM,mBAAmB,uIAyB/B,CAAC;AAIF,eAAO,MAAM,cAAc,yGAAe,CAAC;AAE3C,eAAO,MAAM,eAAe;mBACQ,OAAO;wBAAsB,OAAO;SAmFtE,CAAC;;;;AAgTH,wBAA2D"}

package/lib/components/FormField/FormField.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { cloneElement, useEffect, forwardRef, useState, useRef } from 'react';
+import { cloneElement, useEffect, forwardRef, useState, useRef, Children } from 'react';
 import styled, { css } from 'styled-components';
 import { rgba } from 'polished';
 import { defaultThemeProp } from '../../theme';
@@ -7,28 +7,34 @@ import Flex from '../Flex';
 import Actions from '../Actions';
 import { useConsolidatedRef, useI18n, useLiveLog, useTestIds, useUID } from '../../hooks';
 import Label, { StyledLabel } from '../Label';
-import { calculateFontSize, getHoverColors, readableColor } from '../../styles';
+import { calculateFontSize, getHoverColors, readableColor, readableHue } from '../../styles';
 import VisuallyHiddenText from '../VisuallyHiddenText';
 import { getFocusables, tryCatch, withTestIds } from '../../utils';
 import Button from '../Button';
 import Icon, { registerIcon } from '../Icon';
 import * as warnSolidIcon from '../Icon/icons/warn-solid.icon';
-import * as flagWaveSolidIcon from '../Icon/icons/flag-wave-solid.icon';
+import * as diamondMinusIcon from '../Icon/icons/diamond-minus.icon';
 import * as checkIcon from '../Icon/icons/check.icon';
 import AdditionalInfo, { StyledAdditionalInfo } from '../AdditionalInfo';
 import { getFormFieldTestIds } from './FormField.test-ids';
-registerIcon(warnSolidIcon, flagWaveSolidIcon, checkIcon);
+registerIcon(warnSolidIcon, diamondMinusIcon, checkIcon);
 const StyledStatusIcon = styled(Icon)(({ theme, status }) => {
     return css `
     height: 1em;
     width: 1em;
-    color: ${theme.components['form-field'][status]['status-color']};
+    color: ${tryCatch(() => readableHue(theme.components['form-field'][status]['status-color'], theme.base.palette['primary-background']), () => theme.components['form-field'][status]['status-color'])};
     vertical-align: baseline;
-    margin-inline-end: 0.5ch;
   `;
 });
 StyledStatusIcon.defaultProps = defaultThemeProp;
-export const StyledFormFieldInfo = styled.div(({ status, theme: { base: { 'font-size': fontSize, 'font-scale': fontScale, spacing }, components: { 'form-field': formField } } }) => {
+const StyledClearButton = styled(Button)(({ theme }) => {
+    return css `
+    margin-block-start: calc(${theme.base.spacing} / 2);
+    align-self: start;
+  `;
+});
+StyledClearButton.defaultProps = defaultThemeProp;
+export const StyledFormFieldInfo = styled.div(({ status, theme: { base: { 'font-size': fontSize, 'font-scale': fontScale, spacing, palette }, components: { 'form-field': formField } } }) => {
     const { xxs: infoFontSize } = calculateFontSize(fontSize, fontScale);
     return css `
       max-width: max-content;
@@ -38,7 +44,7 @@ export const StyledFormFieldInfo = styled.div(({ status, theme: { base: { 'font-
       ${status &&
         formField[status] &&
         css `
-        color: ${formField[status]['status-color']};
+        color: ${tryCatch(() => readableHue(formField[status]['status-color'], palette['primary-background']), () => formField[status]['status-color'])};
       `}
     `;
 });
@@ -58,8 +64,12 @@ export const StyledFormField = styled.div(props => {
 
     > ${StyledLabel}, > ${StyledLabelRow} {
       &:not(:empty) {
-        margin-bottom: calc(0.25 * ${spacing});
         min-height: ${hitAreaCompact};
+
+        ${!isRadioCheck &&
+        css `
+          margin-block-end: calc(0.25 * ${spacing});
+        `}
       }
     }
 
@@ -109,9 +119,9 @@ export const StyledFormField = styled.div(props => {
   `;
 });
 StyledFormField.defaultProps = defaultThemeProp;
-const StyledSuggestionButton = styled(Button)(({ theme: { base: { 'font-size': fontSize, 'font-scale': fontScale, 'border-radius': baseRadius, spacing }, components: { 'form-control': { 'border-radius': radius, 'border-width': borderWidth }, 'form-field': formField } } }) => {
+const StyledSuggestionButton = styled(Button)(({ theme: { base: { 'font-size': fontSize, 'font-scale': fontScale, 'border-radius': baseRadius, spacing, palette }, components: { 'form-control': { 'border-radius': radius, 'border-width': borderWidth }, 'form-field': formField } } }) => {
     const { xxs: buttonFontSize } = calculateFontSize(fontSize, fontScale);
-    const backgroundColor = formField.pending['status-color'];
+    const backgroundColor = tryCatch(() => readableHue(formField.pending['status-color'], palette['primary-background']), () => formField.pending['status-color']);
     const hoverColors = getHoverColors(backgroundColor);
     const color = tryCatch(() => readableColor(backgroundColor));
     const borderColor = color ? rgba(color, 0.4) : color;
@@ -144,10 +154,10 @@ const StyledSuggestionButton = styled(Button)(({ theme: { base: { 'font-size': f
   `;
 });
 StyledSuggestionButton.defaultProps = defaultThemeProp;
-const statusIconMap = { error: 'warn-solid', warning: 'flag-wave-solid', success: 'check' };
+const statusIconMap = { error: 'warn-solid', warning: 'diamond-minus', success: 'check' };
 const FormField = forwardRef(function FormField(props, ref) {
     const uid = useUID();
-    const { testId, children: controlElement, id = uid, as = 'div', label, labelAs = 'label', labelFor = id, labelId, labelHidden = false, labelAfter = false, info, status, isRadioCheck, charLimitDisplay, required = false, disabled = false, readOnly = false, inline = false, actions, container, additionalInfo, onResolveSuggestion, ...restProps } = props;
+    const { testId, children: controlElement, id = uid, as = 'div', label, labelAs = 'label', labelFor = id, labelId, labelHidden = false, labelAfter = false, info, status, isRadioCheck, charLimitDisplay, required = false, disabled = false, readOnly = false, inline = false, onClear, actions, container, additionalInfo, onResolveSuggestion, 'aria-describedby': ariaDescribedBy, ...restProps } = props;
     const testIds = useTestIds(testId, getFormFieldTestIds);
     const t = useI18n();
     const { announceAssertive } = useLiveLog();
@@ -174,15 +184,21 @@ const FormField = forwardRef(function FormField(props, ref) {
         }
     }, [status, info]);
     // fieldset or single form control element
-    let content = labelAsLegend
-        ? controlElement
-        : cloneElement(controlElement, {
-            'aria-describedby': info && `${id}-info`
+    let content;
+    if (labelAsLegend || Children.count(controlElement) > 1) {
+        content = controlElement;
+    }
+    else {
+        const controlElementAriaDescribedBy = Children.only(controlElement).props['aria-describedby'];
+        content = cloneElement(controlElement, {
+            'aria-describedby': [controlElementAriaDescribedBy, info ? `${id}-info` : undefined].join(' ').trim() ||
+                undefined
         });
+    }
     if (actions) {
         content = (_jsxs(Flex, { container: { alignItems: 'center', gap: 0.5 }, children: [content, _jsx(Actions, { items: actions, menuAt: 3 })] }));
     }
-    let infoContent = (_jsxs(Flex, { id: `${id}-info`, "data-testid": testIds.info, status: status, as: StyledFormFieldInfo, container: { alignItems: 'center' }, children: [status && status !== 'pending' && (_jsxs(_Fragment, { children: [_jsx(StyledStatusIcon, { status: status, name: statusIconMap[status] }), _jsx(VisuallyHiddenText, { children: `${t(status)} ` })] })), info] }));
+    let infoContent = (_jsxs(Flex, { id: `${id}-info`, "data-testid": testIds.info, status: status, as: StyledFormFieldInfo, container: { alignItems: 'center', gap: 0.5 }, children: [status && status !== 'pending' && (_jsxs(_Fragment, { children: [_jsx(Flex, { item: { alignSelf: 'start' }, as: StyledStatusIcon, status: status, name: statusIconMap[status] }), _jsx(VisuallyHiddenText, { children: `${t(status)} ` })] })), info] }));
     if (charLimitDisplay) {
         infoContent = (_jsxs(Flex, { container: { justify: infoContent ? 'between' : 'end', gap: 1 }, children: [infoContent, _jsx(Flex, { item: { shrink: 0 }, children: charLimitDisplay })] }));
     }
@@ -205,11 +221,18 @@ const FormField = forwardRef(function FormField(props, ref) {
             }
         }
     };
+    const descriptionIds = [];
+    if (ariaDescribedBy)
+        descriptionIds.push(ariaDescribedBy);
+    if (labelAsLegend && info)
+        descriptionIds.push(`${id}-info`);
     return (_jsxs(Flex, { "data-testid": testIds.root, ...restProps, container: {
             direction: inline ? 'row' : 'column',
             alignItems: inline ? 'center' : undefined,
             ...container
-        }, as: StyledFormField, labelAsLegend: labelAsLegend, isRadioCheck: isRadioCheck, showAdditionalInfo: showAdditionalInfo, id: `${id}-field`, forwardedAs: as, required: required, disabled: disabled, readOnly: readOnly, onKeyDown: hasSuggestion ? onKeyDown : undefined, "aria-describedby": labelAsLegend && info ? `${id}-info` : undefined, ref: consolidatedRef, children: [(labelAsLegend || !labelAfter) && labelRow, content, !labelAsLegend && labelAfter && labelRow, !readOnly && infoContent] }));
+        }, as: StyledFormField, labelAsLegend: labelAsLegend, isRadioCheck: isRadioCheck, showAdditionalInfo: showAdditionalInfo, id: `${id}-field`, forwardedAs: as, required: required, disabled: disabled, readOnly: readOnly, onKeyDown: hasSuggestion ? onKeyDown : undefined, "aria-describedby": descriptionIds.length ? descriptionIds.join(' ') : undefined, ref: consolidatedRef, children: [(labelAsLegend || !labelAfter) && labelRow, content, !labelAsLegend && labelAfter && labelRow, !readOnly && infoContent, isRadioCheck && onClear && (_jsx(StyledClearButton, { variant: 'link', onClick: () => {
+                    onClear();
+                }, children: t('clear_selection') }))] }));
 });
 export default withTestIds(FormField, getFormFieldTestIds);
 //# sourceMappingURL=FormField.js.map