@pega/cosmos-react-core 7.0.0-build.22.1 → 7.0.0-build.22.3

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

@@ -1 +1 @@
-{"version":3,"file":"FileInput.js","sourceRoot":"","sources":["../../../src/components/File/FileInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useCallback, useEffect, useRef, useState } from 'react';\nimport type { FunctionComponent, Ref, ChangeEvent, PropsWithoutRef, DragEvent } from 'react';\nimport styled, { css } from 'styled-components';\nimport { hideVisually } from 'polished';\n\nimport type {\n  BaseProps,\n  ForwardProps,\n  NoChildrenProp,\n  PropsWithDefaults,\n  TestIdProp\n} from '../../types';\nimport { useConsolidatedRef, useI18n, useUID, useTestIds, usePrevious } from '../../hooks';\nimport FormControl from '../FormControl';\nimport type { FormControlProps } from '../FormControl';\nimport { defaultThemeProp } from '../../theme';\nimport Flex from '../Flex';\nimport Text from '../Text';\nimport Icon, { registerIcon } from '../Icon';\nimport * as paperClipIcon from '../Icon/icons/paper-clip.icon';\nimport FormField from '../FormField';\nimport Grid from '../Grid';\nimport { getActiveElement, getFocusables, withTestIds } from '../../utils';\n\nimport type { FileItemProps } from './FileItem';\nimport { getFileInputTestIds } from './File.test-ids';\nimport FileList from './FileList';\nimport FileItem from './FileItem';\n\nregisterIcon(paperClipIcon);\n\ntype FileInputPropsWithDefaults = PropsWithDefaults<FileInputProps>;\n\nexport interface FileInputProps extends BaseProps, NoChildrenProp, TestIdProp {\n  /** Called when files are added either via the input or drop zone. */\n  onFilesAdded?: (files: File[]) => void;\n  /**\n   * Allow multiple files to be selected from the OS specific file browser.\n   * NOTE: This does not restrict multiple files from being added via drag and drop.\n   * Restrict multi file drag and drop via onFilesAdded and custom info message.\n   * @default false\n   */\n  multiple?: boolean;\n  /** An array of files that have been uploaded. */\n  files?: FileItemProps[];\n  /**\n   * Specify allowed file types.\n   * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept}\n   */\n  accept?: string | string[];\n  /**\n   * Sets DOM id for the control and associates label element via 'for' attribute.\n   * If an id is not pass, a random id will be generated for any render.\n   */\n  id?: FormControlProps['id'];\n  /** Set visual state based on a validation state. */\n  status?: FormControlProps['status'];\n  /** Pass a string or a fragment with an Icon and string. */\n  label?: FormControlProps['label'];\n  /** Visually hides the label region. */\n  labelHidden?: FormControlProps['labelHidden'];\n  /** It is recommended to pass a simple string to offer guidance. Text will be styled based on status prop. */\n  info?: FormControlProps['info'];\n  /** Indicate if the field is required. The browser defaults to false. */\n  required?: FormControlProps['required'];\n  /** Disable the control. The browser defaults to false. */\n  disabled?: FormControlProps['disabled'];\n  /** Sets html name attribute for the underlying control. Useful for mapping to a data field. */\n  name?: FormControlProps['name'];\n  /** Pass a heading and content to show additional information on the field. */\n  additionalInfo?: FormControlProps['additionalInfo'];\n  /** Ref for the input element within the component's dom structure. */\n  ref?: Ref<HTMLInputElement>;\n}\n\nexport const StyledDropZone = styled(FormControl)(({\n  theme: {\n    base: {\n      'hit-area': { 'finger-min': fingerMin }\n    },\n    components\n  }\n}) => {\n  return css`\n    height: ${components.input.height};\n    border: none;\n    cursor: pointer;\n\n    @media (pointer: coarse) {\n      height: ${fingerMin};\n    }\n  `;\n});\n\nStyledDropZone.defaultProps = defaultThemeProp;\n\nconst StyledTextWrapper = styled(Flex)<{\n  status: FormControlProps['status'];\n  dragOver: boolean;\n}>(({\n  dragOver,\n  status,\n  theme: {\n    base: { 'border-radius': borderRadius },\n    components: {\n      'form-field': formField,\n      'form-control': {\n        'border-color': borderColor,\n        ':hover': { 'border-color': hoverBorderColor }\n      }\n    }\n  }\n}) => {\n  return css`\n    border: 0.0625rem dashed ${borderColor};\n    border-start-start-radius: calc(0.5 * ${borderRadius});\n    border-end-start-radius: calc(0.5 * ${borderRadius});\n\n    ${status &&\n    css`\n      border-color: ${formField[status]['status-color']};\n    `};\n\n    ${dragOver &&\n    css`\n      border-style: solid;\n    `}\n\n    &:hover:not([disabled]):not(:focus, :focus-within) {\n      ${!status &&\n      css`\n        border-color: ${hoverBorderColor};\n      `}\n    }\n  `;\n});\n\nStyledTextWrapper.defaultProps = defaultThemeProp;\n\nconst StyledIconWrapper = styled(Flex)(({\n  theme: {\n    base: { 'border-radius': borderRadius },\n    components\n  }\n}) => {\n  return css`\n    border: 0.0625rem solid ${components['form-control']['border-color']};\n    border-start-end-radius: calc(0.5 * ${borderRadius});\n    border-end-end-radius: calc(0.5 * ${borderRadius});\n    border-inline-start: none;\n    aspect-ratio: 1 / 1;\n  `;\n});\n\nStyledIconWrapper.defaultProps = defaultThemeProp;\n\nexport const StyledFileInput = styled.div<FileInputPropsWithDefaults & ForwardProps>(\n  ({\n    theme: {\n      components: {\n        'form-control': {\n          'border-color': borderColor,\n          ':focus': { 'box-shadow': boxShadow }\n        }\n      }\n    }\n  }) => {\n    return css`\n      position: relative;\n\n      input {\n        ${hideVisually}\n      }\n\n      input:enabled:focus + ${StyledDropZone} {\n        box-shadow: ${boxShadow};\n\n        > ${StyledIconWrapper} {\n          border: none;\n        }\n        > ${StyledTextWrapper} {\n          border-block: none;\n          border-inline-start: none;\n          border-inline-end: 0.0625rem dashed ${borderColor};\n        }\n      }\n    `;\n  }\n);\n\nStyledFileInput.defaultProps = defaultThemeProp;\n\nconst StyledSingleFileWrapper = styled.div`\n  display: contents;\n`;\n\nconst FileInput: FunctionComponent<FileInputProps & ForwardProps> = forwardRef(function FileInput(\n  props: PropsWithoutRef<FileInputProps>,\n  ref: FileInputProps['ref']\n) {\n  const uid = useUID();\n  const {\n    testId,\n    id = uid,\n    label,\n    labelHidden,\n    info,\n    required = false,\n    disabled = false,\n    files,\n    onFilesAdded,\n    multiple = false,\n    status,\n    additionalInfo,\n    accept,\n    ...restProps\n  } = props;\n\n  const testIds = useTestIds(testId, getFileInputTestIds);\n\n  const inputRef = useConsolidatedRef(ref);\n  const fileItemListRef = useRef<HTMLDivElement>();\n  const activeElement = getActiveElement();\n  const activeElementInList = fileItemListRef.current?.contains(activeElement);\n\n  const onChange = useCallback(\n    (e: ChangeEvent<HTMLInputElement>) => {\n      if (e.target.files) {\n        onFilesAdded?.(Array.from(e.target.files));\n      }\n      /**\n       * WHY are we doing this?\n       * We are not working with the \"value\" prop of the input but rather the File instances that are created.\n       * The consumer of this component should manage an array or File(s) and allow for a user to remove a selected file.\n       * Since we can not modify the input value of files for browser security reasons,\n       * and since setting the files property is less than ideal, we reset/toggle the input to a fresh state after a render.\n       * This enables onChange to fire even if the user had just previously selected a file, removed it, and selected it again.\n       */\n      if (inputRef.current) inputRef.current.value = '';\n    },\n    [onFilesAdded]\n  );\n\n  const t = useI18n();\n  const [dragOver, setDragOver] = useState(false);\n  const hideFileInput = !multiple && files && files.length > 0;\n\n  const fileInput = (\n    <StyledFileInput>\n      <input\n        data-testid={testIds.control}\n        {...restProps}\n        ref={inputRef}\n        type='file'\n        id={id}\n        required={required}\n        disabled={disabled}\n        onChange={onChange}\n        multiple={multiple}\n        accept={Array.isArray(accept) ? accept.join(',') : accept}\n      />\n      <Flex\n        container\n        as={StyledDropZone}\n        onClick={() => {\n          inputRef.current?.focus();\n          inputRef.current?.click();\n        }}\n        onDragOver={(e: DragEvent<HTMLDivElement>) => {\n          e.preventDefault();\n        }}\n        onDragEnter={() => setDragOver(true)}\n        onDragLeave={() => setDragOver(false)}\n        onDrop={(e: DragEvent<HTMLDivElement>) => {\n          e.preventDefault();\n          setDragOver(false);\n          onFilesAdded?.(Array.from(e.dataTransfer.files));\n        }}\n      >\n        <StyledTextWrapper\n          item={{ grow: 1 }}\n          container={{ justify: 'center', alignItems: 'center' }}\n          status={status}\n          dragOver={dragOver}\n        >\n          <Text variant='secondary'>\n            {t('file_upload_text_main', [\n              t(multiple ? 'file_upload_text_multiple' : 'file_upload_text_one')\n            ])}\n          </Text>\n        </StyledTextWrapper>\n        <StyledIconWrapper container={{ justify: 'center', alignItems: 'center' }}>\n          <Icon name='paper-clip' />\n        </StyledIconWrapper>\n      </Flex>\n    </StyledFileInput>\n  );\n\n  const fileItemList = hideFileInput ? (\n    <StyledSingleFileWrapper\n      data-testid={testIds.files}\n      ref={element => {\n        if (element) fileItemListRef.current = element;\n      }}\n    >\n      <FileItem {...files[0]} />\n    </StyledSingleFileWrapper>\n  ) : (\n    <FileList\n      type='item'\n      items={files ?? []}\n      data-testid={testIds.files}\n      ref={element => {\n        if (element) fileItemListRef.current = element;\n      }}\n    />\n  );\n\n  const prevFiles = usePrevious(files);\n  useEffect(() => {\n    if (!multiple && prevFiles?.length === 0 && files?.length === 1 && fileItemListRef.current) {\n      getFocusables(fileItemListRef.current)[0]?.focus();\n    }\n\n    if (prevFiles?.length === 1 && files?.length === 0 && activeElementInList) {\n      inputRef.current?.focus();\n    }\n  }, [files]);\n\n  const renderElement = hideFileInput ? fileItemList : fileInput;\n\n  return (\n    <Grid container={{ rowGap: hideFileInput ? undefined : 1 }}>\n      {label ? (\n        <FormField\n          testId={testIds}\n          label={label}\n          labelHidden={labelHidden}\n          id={id}\n          info={info}\n          required={required}\n          disabled={!hideFileInput && disabled}\n          status={status}\n          additionalInfo={additionalInfo}\n        >\n          {renderElement}\n        </FormField>\n      ) : (\n        renderElement\n      )}\n      {!hideFileInput && fileItemList}\n    </Grid>\n  );\n});\n\nexport default withTestIds(FileInput, getFileInputTestIds);\n"]}
+{"version":3,"file":"FileInput.js","sourceRoot":"","sources":["../../../src/components/File/FileInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useCallback, useEffect, useRef, useState } from 'react';\nimport type { FunctionComponent, Ref, ChangeEvent, PropsWithoutRef, DragEvent } from 'react';\nimport styled, { css } from 'styled-components';\nimport { hideVisually } from 'polished';\n\nimport type {\n  BaseProps,\n  ForwardProps,\n  NoChildrenProp,\n  PropsWithDefaults,\n  TestIdProp\n} from '../../types';\nimport { useConsolidatedRef, useI18n, useUID, useTestIds, usePrevious } from '../../hooks';\nimport FormControl from '../FormControl';\nimport type { FormControlProps } from '../FormControl';\nimport { defaultThemeProp } from '../../theme';\nimport Flex from '../Flex';\nimport Text from '../Text';\nimport Icon, { registerIcon } from '../Icon';\nimport * as paperClipIcon from '../Icon/icons/paper-clip.icon';\nimport FormField from '../FormField';\nimport Grid from '../Grid';\nimport { getActiveElement, getFocusables, withTestIds } from '../../utils';\n\nimport type { FileItemProps } from './FileItem';\nimport { getFileInputTestIds } from './File.test-ids';\nimport FileList from './FileList';\nimport FileItem from './FileItem';\n\nregisterIcon(paperClipIcon);\n\ntype FileInputPropsWithDefaults = PropsWithDefaults<FileInputProps>;\n\nexport interface FileInputProps extends BaseProps, NoChildrenProp, TestIdProp {\n  /** Called when files are added either via the input or drop zone. */\n  onFilesAdded?: (files: File[]) => void;\n  /**\n   * Allow multiple files to be selected from the OS specific file browser.\n   * NOTE: This does not restrict multiple files from being added via drag and drop.\n   * Restrict multi file drag and drop via onFilesAdded and custom info message.\n   * @default false\n   */\n  multiple?: boolean;\n  /** An array of files that have been uploaded. */\n  files?: FileItemProps[];\n  /**\n   * Specify allowed file types.\n   * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept}\n   */\n  accept?: string | string[];\n  /**\n   * Sets DOM id for the control and associates label element via 'for' attribute.\n   * If an id is not pass, a random id will be generated for any render.\n   */\n  id?: FormControlProps['id'];\n  /** Set visual state based on a validation state. */\n  status?: FormControlProps['status'];\n  /** Pass a string or a fragment with an Icon and string. */\n  label?: FormControlProps['label'];\n  /** Visually hides the label region. */\n  labelHidden?: FormControlProps['labelHidden'];\n  /** It is recommended to pass a simple string to offer guidance. Text will be styled based on status prop. */\n  info?: FormControlProps['info'];\n  /** Indicate if the field is required. The browser defaults to false. */\n  required?: FormControlProps['required'];\n  /** Disable the control. The browser defaults to false. */\n  disabled?: FormControlProps['disabled'];\n  /** Sets html name attribute for the underlying control. Useful for mapping to a data field. */\n  name?: FormControlProps['name'];\n  /** Pass a heading and content to show additional information on the field. */\n  additionalInfo?: FormControlProps['additionalInfo'];\n  /** Ref for the input element within the component's dom structure. */\n  ref?: Ref<HTMLInputElement>;\n}\n\nexport const StyledDropZone = styled(FormControl)(({\n  theme: {\n    base: {\n      'hit-area': { 'finger-min': fingerMin }\n    },\n    components\n  }\n}) => {\n  return css`\n    height: ${components.input.height};\n    border: none;\n    cursor: pointer;\n\n    @media (pointer: coarse) {\n      height: ${fingerMin};\n    }\n  `;\n});\n\nStyledDropZone.defaultProps = defaultThemeProp;\n\nconst StyledTextWrapper = styled(Flex)<{\n  status: FormControlProps['status'];\n  dragOver: boolean;\n}>(({\n  dragOver,\n  status,\n  theme: {\n    base: { 'border-radius': borderRadius },\n    components: {\n      'form-field': formField,\n      'form-control': {\n        'border-color': borderColor,\n        ':hover': { 'border-color': hoverBorderColor }\n      }\n    }\n  }\n}) => {\n  return css`\n    border: 0.0625rem dashed ${borderColor};\n    border-start-start-radius: calc(0.5 * ${borderRadius});\n    border-end-start-radius: calc(0.5 * ${borderRadius});\n\n    ${status &&\n    css`\n      border-color: ${formField[status]['status-color']};\n    `};\n\n    ${dragOver &&\n    css`\n      border-style: solid;\n    `}\n\n    &:hover:not([disabled]):not(:focus, :focus-within) {\n      ${!status &&\n      css`\n        border-color: ${hoverBorderColor};\n      `}\n    }\n  `;\n});\n\nStyledTextWrapper.defaultProps = defaultThemeProp;\n\nconst StyledIconWrapper = styled(Flex)(({\n  theme: {\n    base: { 'border-radius': borderRadius },\n    components\n  }\n}) => {\n  return css`\n    border: 0.0625rem solid ${components['form-control']['border-color']};\n    border-start-end-radius: calc(0.5 * ${borderRadius});\n    border-end-end-radius: calc(0.5 * ${borderRadius});\n    border-inline-start: none;\n    aspect-ratio: 1 / 1;\n  `;\n});\n\nStyledIconWrapper.defaultProps = defaultThemeProp;\n\nexport const StyledFileInput = styled.div<FileInputPropsWithDefaults & ForwardProps>(\n  ({\n    theme: {\n      components: {\n        'form-control': {\n          'border-color': borderColor,\n          ':focus': { 'box-shadow': boxShadow }\n        }\n      }\n    }\n  }) => {\n    return css`\n      position: relative;\n\n      input {\n        ${hideVisually}\n      }\n\n      input:enabled:focus + ${StyledDropZone} {\n        box-shadow: ${boxShadow};\n\n        > ${StyledIconWrapper} {\n          border: none;\n        }\n        > ${StyledTextWrapper} {\n          border-block: none;\n          border-inline-start: none;\n          border-inline-end: 0.0625rem dashed ${borderColor};\n        }\n      }\n    `;\n  }\n);\n\nStyledFileInput.defaultProps = defaultThemeProp;\n\nconst StyledSingleFileWrapper = styled.div`\n  display: contents;\n`;\n\nconst FileInput: FunctionComponent<FileInputProps & ForwardProps> = forwardRef(function FileInput(\n  props: PropsWithoutRef<FileInputProps>,\n  ref: FileInputProps['ref']\n) {\n  const uid = useUID();\n  const {\n    testId,\n    id = uid,\n    label,\n    labelHidden,\n    info,\n    required = false,\n    disabled = false,\n    files,\n    onFilesAdded,\n    multiple = false,\n    status,\n    additionalInfo,\n    accept,\n    ...restProps\n  } = props;\n\n  const testIds = useTestIds(testId, getFileInputTestIds);\n\n  const inputRef = useConsolidatedRef(ref);\n  const fileItemListRef = useRef<HTMLDivElement>();\n  const activeElement = getActiveElement();\n  const activeElementInList = fileItemListRef.current?.contains(activeElement);\n  const isInputActiveElement = activeElement === inputRef.current;\n\n  const onChange = useCallback(\n    (e: ChangeEvent<HTMLInputElement>) => {\n      if (e.target.files) {\n        onFilesAdded?.(Array.from(e.target.files));\n      }\n      /**\n       * WHY are we doing this?\n       * We are not working with the \"value\" prop of the input but rather the File instances that are created.\n       * The consumer of this component should manage an array or File(s) and allow for a user to remove a selected file.\n       * Since we can not modify the input value of files for browser security reasons,\n       * and since setting the files property is less than ideal, we reset/toggle the input to a fresh state after a render.\n       * This enables onChange to fire even if the user had just previously selected a file, removed it, and selected it again.\n       */\n      if (inputRef.current) inputRef.current.value = '';\n    },\n    [onFilesAdded]\n  );\n\n  const t = useI18n();\n  const [dragOver, setDragOver] = useState(false);\n  const hideFileInput = !multiple && files && files.length > 0;\n\n  const fileInput = (\n    <StyledFileInput>\n      <input\n        data-testid={testIds.control}\n        {...restProps}\n        ref={inputRef}\n        type='file'\n        id={id}\n        required={required}\n        disabled={disabled}\n        onChange={onChange}\n        multiple={multiple}\n        accept={Array.isArray(accept) ? accept.join(',') : accept}\n      />\n      <Flex\n        container\n        as={StyledDropZone}\n        onClick={() => {\n          inputRef.current?.focus();\n          inputRef.current?.click();\n        }}\n        onDragOver={(e: DragEvent<HTMLDivElement>) => {\n          e.preventDefault();\n        }}\n        onDragEnter={() => setDragOver(true)}\n        onDragLeave={() => setDragOver(false)}\n        onDrop={(e: DragEvent<HTMLDivElement>) => {\n          e.preventDefault();\n          setDragOver(false);\n          onFilesAdded?.(Array.from(e.dataTransfer.files));\n        }}\n      >\n        <StyledTextWrapper\n          item={{ grow: 1 }}\n          container={{ justify: 'center', alignItems: 'center' }}\n          status={status}\n          dragOver={dragOver}\n        >\n          <Text variant='secondary'>\n            {t('file_upload_text_main', [\n              t(multiple ? 'file_upload_text_multiple' : 'file_upload_text_one')\n            ])}\n          </Text>\n        </StyledTextWrapper>\n        <StyledIconWrapper container={{ justify: 'center', alignItems: 'center' }}>\n          <Icon name='paper-clip' />\n        </StyledIconWrapper>\n      </Flex>\n    </StyledFileInput>\n  );\n\n  const fileItemList = hideFileInput ? (\n    <StyledSingleFileWrapper\n      data-testid={testIds.files}\n      ref={element => {\n        if (element) fileItemListRef.current = element;\n      }}\n    >\n      <FileItem {...files[0]} />\n    </StyledSingleFileWrapper>\n  ) : (\n    <FileList\n      type='item'\n      items={files ?? []}\n      data-testid={testIds.files}\n      ref={element => {\n        if (element) fileItemListRef.current = element;\n      }}\n    />\n  );\n\n  const prevFiles = usePrevious(files);\n  useEffect(() => {\n    if (\n      !multiple &&\n      prevFiles?.length === 0 &&\n      files?.length === 1 &&\n      fileItemListRef.current &&\n      isInputActiveElement\n    ) {\n      getFocusables(fileItemListRef.current)[0]?.focus();\n    }\n\n    if (prevFiles?.length === 1 && files?.length === 0 && activeElementInList) {\n      inputRef.current?.focus();\n    }\n  }, [files]);\n\n  const renderElement = hideFileInput ? fileItemList : fileInput;\n\n  return (\n    <Grid container={{ rowGap: hideFileInput ? undefined : 1 }}>\n      {label ? (\n        <FormField\n          testId={testIds}\n          label={label}\n          labelHidden={labelHidden}\n          id={id}\n          info={info}\n          required={required}\n          disabled={!hideFileInput && disabled}\n          status={status}\n          additionalInfo={additionalInfo}\n        >\n          {renderElement}\n        </FormField>\n      ) : (\n        renderElement\n      )}\n      {!hideFileInput && fileItemList}\n    </Grid>\n  );\n});\n\nexport default withTestIds(FileInput, getFileInputTestIds);\n"]}

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

@@ -6,7 +6,7 @@ export interface FormProps extends OmitStrict<BaseFormProps, 'content'>, TestIdP
     children: BaseFormProps['content'];
 }
 declare const _default: FC<FormProps & ForwardProps> & {
-    getTestIds: (testIdProp?: string | undefined) => import("../../types").TestIdsRecord<readonly []>;
+    getTestIds: (testIdProp?: string | null | undefined) => import("../../types").TestIdsRecord<readonly []>;
 };
 export default _default;
 //# sourceMappingURL=Form.d.ts.map

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

@@ -1,2 +1,2 @@
-export declare const getFormTestIds: (testIdProp?: string | undefined) => import("../..").TestIdsRecord<readonly []>;
+export declare const getFormTestIds: (testIdProp?: string | null | undefined) => 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,iFAAqC,CAAC"}
+{"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"}

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

@@ -71,7 +71,7 @@ export declare const StyledFormField: import("styled-components").StyledComponen
     showAdditionalInfo: boolean;
 }, never>;
 declare const _default: FC<FormFieldProps & ForwardProps> & {
-    getTestIds: (testIdProp?: string | undefined) => import("../../types").TestIdsRecord<readonly ["label", "info", "additional-info", "suggestion-accept", "suggestion-reject"]>;
+    getTestIds: (testIdProp?: string | null | undefined) => 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.test-ids.d.ts

@@ -1,3 +1,3 @@
 export declare const elements: readonly ["label", "info", "additional-info", "suggestion-accept", "suggestion-reject"];
-export declare const getFormFieldTestIds: (testIdProp?: string | undefined) => import("../..").TestIdsRecord<readonly ["label", "info", "additional-info", "suggestion-accept", "suggestion-reject"]>;
+export declare const getFormFieldTestIds: (testIdProp?: string | null | undefined) => import("../..").TestIdsRecord<readonly ["label", "info", "additional-info", "suggestion-accept", "suggestion-reject"]>;
 //# sourceMappingURL=FormField.test-ids.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"FormField.test-ids.d.ts","sourceRoot":"","sources":["../../../src/components/FormField/FormField.test-ids.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,QAAQ,yFAMX,CAAC;AAEX,eAAO,MAAM,mBAAmB,6JAAwC,CAAC"}
+{"version":3,"file":"FormField.test-ids.d.ts","sourceRoot":"","sources":["../../../src/components/FormField/FormField.test-ids.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,QAAQ,yFAMX,CAAC;AAEX,eAAO,MAAM,mBAAmB,oKAAwC,CAAC"}

package/lib/components/HTML/HTML.d.ts

@@ -11,7 +11,7 @@ export declare const getTableStyles: (theme: DefaultTheme) => import("styled-com
 export declare const getHtmlStyles: (theme: DefaultTheme) => string;
 export declare const StyledHTML: import("styled-components").StyledComponent<"div", DefaultTheme, {}, never>;
 declare const _default: FunctionComponent<HTMLProps & ForwardProps> & {
-    getTestIds: (testIdProp?: string | undefined) => import("../../types").TestIdsRecord<readonly []>;
+    getTestIds: (testIdProp?: string | null | undefined) => import("../../types").TestIdsRecord<readonly []>;
 };
 export default _default;
 //# sourceMappingURL=HTML.d.ts.map

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

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

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

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

package/lib/components/Input/Input.d.ts

@@ -13,7 +13,7 @@ export interface InputProps extends FormControlProps, BaseProps, NoChildrenProp,
     readOnly?: FormControlProps['readOnly'];
 }
 declare const _default: FC<InputProps & ForwardProps> & {
-    getTestIds: (testIdProp?: string | undefined) => import("../../types").TestIdsRecord<readonly ["control", "label", "info", "additional-info", "suggestion-accept", "suggestion-reject"]>;
+    getTestIds: (testIdProp?: string | null | undefined) => import("../../types").TestIdsRecord<readonly ["control", "label", "info", "additional-info", "suggestion-accept", "suggestion-reject"]>;
 };
 export default _default;
 //# sourceMappingURL=Input.d.ts.map

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

@@ -1,2 +1,2 @@
-export declare const getInputTestIds: (testIdProp?: string | undefined) => import("../..").TestIdsRecord<readonly ["control", "label", "info", "additional-info", "suggestion-accept", "suggestion-reject"]>;
+export declare const getInputTestIds: (testIdProp?: string | null | undefined) => import("../..").TestIdsRecord<readonly ["control", "label", "info", "additional-info", "suggestion-accept", "suggestion-reject"]>;
 //# sourceMappingURL=Input.test-ids.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Input.test-ids.d.ts","sourceRoot":"","sources":["../../../src/components/Input/Input.test-ids.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,eAAe,wKAA4D,CAAC"}
+{"version":3,"file":"Input.test-ids.d.ts","sourceRoot":"","sources":["../../../src/components/Input/Input.test-ids.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,eAAe,+KAA4D,CAAC"}

package/lib/components/Lightbox/Lightbox.d.ts

@@ -2,7 +2,7 @@ import type { FunctionComponent } from 'react';
 import type { ForwardProps } from '../../types';
 import type { LightboxProps } from './Lightbox.types';
 declare const _default: FunctionComponent<LightboxProps & ForwardProps> & {
-    getTestIds: (testIdProp?: string | undefined) => import("../../types").TestIdsRecord<readonly ["content", "name", "metadata", "download", "close", "prev", "next", "pagination", "non-previewable-download", "link"]>;
+    getTestIds: (testIdProp?: string | null | undefined) => import("../../types").TestIdsRecord<readonly ["content", "name", "metadata", "download", "close", "prev", "next", "pagination", "non-previewable-download", "link"]>;
 };
 export default _default;
 //# sourceMappingURL=Lightbox.d.ts.map

package/lib/components/Lightbox/Lightbox.styles.d.ts

@@ -8,6 +8,6 @@ export declare const StyledObject: import("styled-components").StyledComponent<"
 export declare const StyledPreviewRegion: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledLiveRegion: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledLightbox: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Omit<import("../Backdrop").BackdropProps, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
-    getTestIds: (testIdProp?: string | undefined) => import("../..").TestIdsRecord<readonly []>;
+    getTestIds: (testIdProp?: string | null | undefined) => import("../..").TestIdsRecord<readonly []>;
 }, import("styled-components").DefaultTheme, {}, never>;
 //# sourceMappingURL=Lightbox.styles.d.ts.map

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

@@ -1,2 +1,2 @@
-export declare const getLightboxTestIds: (testIdProp?: string | undefined) => import("../..").TestIdsRecord<readonly ["content", "name", "metadata", "download", "close", "prev", "next", "pagination", "non-previewable-download", "link"]>;
+export declare const getLightboxTestIds: (testIdProp?: string | null | undefined) => import("../..").TestIdsRecord<readonly ["content", "name", "metadata", "download", "close", "prev", "next", "pagination", "non-previewable-download", "link"]>;
 //# sourceMappingURL=Lightbox.test-ids.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Lightbox.test-ids.d.ts","sourceRoot":"","sources":["../../../src/components/Lightbox/Lightbox.test-ids.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,kBAAkB,qMAWpB,CAAC"}
+{"version":3,"file":"Lightbox.test-ids.d.ts","sourceRoot":"","sources":["../../../src/components/Lightbox/Lightbox.test-ids.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,kBAAkB,4MAWpB,CAAC"}

package/lib/components/Link/Link.d.ts

@@ -34,7 +34,7 @@ export declare const StyledLinkPopoverBtn: import("styled-components").StyledCom
 export declare const StyledLinkPreviewPopoverBtn: import("styled-components").StyledComponent<FunctionComponent<import("../Button/BareButton").BareButtonProps & ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledLink: import("styled-components").StyledComponent<FunctionComponent<ButtonProps & ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
 declare const _default: FunctionComponent<LinkProps & ForwardProps> & {
-    getTestIds: (testIdProp?: string | undefined) => import("../../types").TestIdsRecord<readonly ["preview-popover", "preview", "new-tab"]>;
+    getTestIds: (testIdProp?: string | null | undefined) => import("../../types").TestIdsRecord<readonly ["preview-popover", "preview", "new-tab"]>;
 };
 export default _default;
 //# sourceMappingURL=Link.d.ts.map

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

@@ -1,2 +1,2 @@
-export declare const getLinkTestIds: (testIdProp?: string | undefined) => import("../..").TestIdsRecord<readonly ["preview-popover", "preview", "new-tab"]>;
+export declare const getLinkTestIds: (testIdProp?: string | null | undefined) => import("../..").TestIdsRecord<readonly ["preview-popover", "preview", "new-tab"]>;
 //# sourceMappingURL=Link.test-ids.d.ts.map

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

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

package/lib/components/ListToolbar/ListToolbar.d.ts

@@ -2,7 +2,7 @@ import type { FunctionComponent } from 'react';
 import type { ForwardProps } from '../../types';
 import type { ListToolbarProps } from './ListToolbar.types';
 declare const _default: FunctionComponent<ListToolbarProps & ForwardProps> & {
-    getTestIds: (testIdProp?: string | undefined) => import("../../types").TestIdsRecord<readonly ["view-selector", "count", "heading", "info", "create-new", "search-input", "search-button"]>;
+    getTestIds: (testIdProp?: string | null | undefined) => import("../../types").TestIdsRecord<readonly ["view-selector", "count", "heading", "info", "create-new", "search-input", "search-button"]>;
 };
 export default _default;
 //# sourceMappingURL=ListToolbar.d.ts.map

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

@@ -1,2 +1,2 @@
-export declare const getListToolbarTestIds: (testIdProp?: string | undefined) => import("../..").TestIdsRecord<readonly ["view-selector", "count", "heading", "info", "create-new", "search-input", "search-button"]>;
+export declare const getListToolbarTestIds: (testIdProp?: string | null | undefined) => import("../..").TestIdsRecord<readonly ["view-selector", "count", "heading", "info", "create-new", "search-input", "search-button"]>;
 //# sourceMappingURL=ListToolbar.test-ids.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ListToolbar.test-ids.d.ts","sourceRoot":"","sources":["../../../src/components/ListToolbar/ListToolbar.test-ids.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,qBAAqB,2KAQvB,CAAC"}
+{"version":3,"file":"ListToolbar.test-ids.d.ts","sourceRoot":"","sources":["../../../src/components/ListToolbar/ListToolbar.test-ids.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,qBAAqB,kLAQvB,CAAC"}

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

@@ -1,2 +1,2 @@
-export declare const getLocationInputTestIds: (testIdProp?: string | undefined) => import("../..").TestIdsRecord<readonly ["control", "label", "info", "additional-info", "suggestion-accept", "suggestion-reject"]>;
+export declare const getLocationInputTestIds: (testIdProp?: string | null | undefined) => import("../..").TestIdsRecord<readonly ["control", "label", "info", "additional-info", "suggestion-accept", "suggestion-reject"]>;
 //# sourceMappingURL=Location.test-ids.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Location.test-ids.d.ts","sourceRoot":"","sources":["../../../src/components/Location/Location.test-ids.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,uBAAuB,wKAGzB,CAAC"}
+{"version":3,"file":"Location.test-ids.d.ts","sourceRoot":"","sources":["../../../src/components/Location/Location.test-ids.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,uBAAuB,+KAGzB,CAAC"}

package/lib/components/Location/LocationInput.d.ts

@@ -50,7 +50,7 @@ export interface LocationInputProps extends BaseProps, FormControlProps, TestIdP
     onError?: (error: Error) => void;
 }
 declare const _default: FC<LocationInputProps & ForwardProps> & {
-    getTestIds: (testIdProp?: string | undefined) => import("../../types").TestIdsRecord<readonly ["control", "label", "info", "additional-info", "suggestion-accept", "suggestion-reject"]>;
+    getTestIds: (testIdProp?: string | null | undefined) => import("../../types").TestIdsRecord<readonly ["control", "label", "info", "additional-info", "suggestion-accept", "suggestion-reject"]>;
 };
 export default _default;
 //# sourceMappingURL=LocationInput.d.ts.map

package/lib/components/Location/LocationView.d.ts

@@ -2,7 +2,7 @@ import type { FC } from 'react';
 import type { BaseProps } from '../../types';
 import type { LatLng, Pin } from './Location.types';
 export declare const StyledLocationError: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Omit<import("../Badges").StatusProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>> & {
-    getTestIds: (testIdProp?: string | undefined) => import("../../types").TestIdsRecord<readonly []>;
+    getTestIds: (testIdProp?: string | null | undefined) => import("../../types").TestIdsRecord<readonly []>;
 }, import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledLocationView: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
     height?: string | undefined;

package/lib/components/Menu/Menu.d.ts

@@ -2,7 +2,7 @@ import type { FunctionComponent } from 'react';
 import type { ForwardProps } from '../../types';
 import type { MenuProps } from './Menu.types';
 declare const _default: FunctionComponent<MenuProps & ForwardProps> & {
-    getTestIds: (testIdProp?: string | undefined) => import("../../types").TestIdsRecord<readonly ["create-new"]>;
+    getTestIds: (testIdProp?: string | null | undefined) => import("../../types").TestIdsRecord<readonly ["create-new"]>;
 };
 export default _default;
 //# sourceMappingURL=Menu.d.ts.map

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

@@ -1,3 +1,3 @@
-export declare const getMenuTestIds: (testIdProp?: string | undefined) => import("../..").TestIdsRecord<readonly ["create-new"]>;
-export declare const getMenuItemTestIds: (testIdProp?: string | undefined) => import("../..").TestIdsRecord<readonly []>;
+export declare const getMenuTestIds: (testIdProp?: string | null | undefined) => import("../..").TestIdsRecord<readonly ["create-new"]>;
+export declare const getMenuItemTestIds: (testIdProp?: string | null | undefined) => import("../..").TestIdsRecord<readonly []>;
 //# sourceMappingURL=Menu.test-ids.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Menu.test-ids.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/Menu.test-ids.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc,6FAAiD,CAAC;AAE7E,eAAO,MAAM,kBAAkB,iFAA0C,CAAC"}
+{"version":3,"file":"Menu.test-ids.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/Menu.test-ids.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc,oGAAiD,CAAC;AAE7E,eAAO,MAAM,kBAAkB,wFAA0C,CAAC"}

package/lib/components/Menu/MenuItem.d.ts

@@ -2,7 +2,7 @@ import type { FunctionComponent } from 'react';
 import type { ForwardProps } from '../../types';
 import type { MenuItemProps } from './Menu.types';
 declare const _default: FunctionComponent<MenuItemProps & ForwardProps> & {
-    getTestIds: (testIdProp?: string | undefined) => import("../../types").TestIdsRecord<readonly []>;
+    getTestIds: (testIdProp?: string | null | undefined) => import("../../types").TestIdsRecord<readonly []>;
 };
 export default _default;
 //# sourceMappingURL=MenuItem.d.ts.map

package/lib/components/MenuButton/MenuButton.d.ts

@@ -33,7 +33,7 @@ export interface MenuButtonProps extends BaseProps, NoChildrenProp, TestIdProp {
 }
 export declare const StyledMenuButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {}, never>;
 declare const _default: FunctionComponent<ForwardProps & MenuButtonProps> & {
-    getTestIds: (testIdProp?: string | undefined) => import("../../types").TestIdsRecord<readonly []>;
+    getTestIds: (testIdProp?: string | null | undefined) => import("../../types").TestIdsRecord<readonly []>;
 };
 export default _default;
 //# sourceMappingURL=MenuButton.d.ts.map

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"MenuButton.test-ids.d.ts","sourceRoot":"","sources":["../../../src/components/MenuButton/MenuButton.test-ids.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,oBAAoB,iFAA4C,CAAC"}
+{"version":3,"file":"MenuButton.test-ids.d.ts","sourceRoot":"","sources":["../../../src/components/MenuButton/MenuButton.test-ids.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,oBAAoB,wFAA4C,CAAC"}

package/lib/components/MetaList/MetaList.d.ts

@@ -18,7 +18,7 @@ export declare const StyledMetaListItem: import("styled-components").StyledCompo
     wrapItems: boolean;
 }, never>;
 declare const _default: FunctionComponent<MetaListProps & ForwardProps> & {
-    getTestIds: (testIdProp?: string | undefined) => import("../../types").TestIdsRecord<readonly []>;
+    getTestIds: (testIdProp?: string | null | undefined) => import("../../types").TestIdsRecord<readonly []>;
 };
 export default _default;
 //# sourceMappingURL=MetaList.d.ts.map

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"MetaList.test-ids.d.ts","sourceRoot":"","sources":["../../../src/components/MetaList/MetaList.test-ids.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,kBAAkB,iFAA0C,CAAC"}
+{"version":3,"file":"MetaList.test-ids.d.ts","sourceRoot":"","sources":["../../../src/components/MetaList/MetaList.test-ids.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,kBAAkB,wFAA0C,CAAC"}

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

@@ -1,3 +1,3 @@
-export declare const getNumberInputTestIds: (testIdProp?: string | undefined) => import("../..").TestIdsRecord<readonly ["control", "plus", "minus", "label", "info", "additional-info", "suggestion-accept", "suggestion-reject"]>;
-export declare const getNumberRangeTestIds: (testIdProp?: string | undefined) => import("../..").TestIdsRecord<readonly ["min", "max", "label", "info", "additional-info", "suggestion-accept", "suggestion-reject"]>;
+export declare const getNumberInputTestIds: (testIdProp?: string | null | undefined) => import("../..").TestIdsRecord<readonly ["control", "plus", "minus", "label", "info", "additional-info", "suggestion-accept", "suggestion-reject"]>;
+export declare const getNumberRangeTestIds: (testIdProp?: string | null | undefined) => import("../..").TestIdsRecord<readonly ["min", "max", "label", "info", "additional-info", "suggestion-accept", "suggestion-reject"]>;
 //# sourceMappingURL=Number.test-ids.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Number.test-ids.d.ts","sourceRoot":"","sources":["../../../src/components/Number/Number.test-ids.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,qBAAqB,yLAKvB,CAAC;AAEZ,eAAO,MAAM,qBAAqB,2KAIvB,CAAC"}
+{"version":3,"file":"Number.test-ids.d.ts","sourceRoot":"","sources":["../../../src/components/Number/Number.test-ids.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,qBAAqB,gMAKvB,CAAC;AAEZ,eAAO,MAAM,qBAAqB,kLAIvB,CAAC"}

package/lib/components/Number/NumberInput.d.ts

@@ -2,7 +2,7 @@ import type { FunctionComponent } from 'react';
 import type { ForwardProps } from '../../types';
 import type { NumberInputProps } from './NumberInput.types';
 declare const _default: FunctionComponent<NumberInputProps & ForwardProps> & {
-    getTestIds: (testIdProp?: string | undefined) => import("../../types").TestIdsRecord<readonly ["control", "plus", "minus", "label", "info", "additional-info", "suggestion-accept", "suggestion-reject"]>;
+    getTestIds: (testIdProp?: string | null | undefined) => import("../../types").TestIdsRecord<readonly ["control", "plus", "minus", "label", "info", "additional-info", "suggestion-accept", "suggestion-reject"]>;
 };
 export default _default;
 //# sourceMappingURL=NumberInput.d.ts.map

package/lib/components/Number/NumberRangeInput.d.ts

@@ -2,7 +2,7 @@ import type { FunctionComponent } from 'react';
 import type { ForwardProps } from '../../types';
 import type { NumberRangeInputProps } from './NumberInput.types';
 declare const _default: FunctionComponent<NumberRangeInputProps & ForwardProps> & {
-    getTestIds: (testIdProp?: string | undefined) => import("../../types").TestIdsRecord<readonly ["min", "max", "label", "info", "additional-info", "suggestion-accept", "suggestion-reject"]>;
+    getTestIds: (testIdProp?: string | null | undefined) => import("../../types").TestIdsRecord<readonly ["min", "max", "label", "info", "additional-info", "suggestion-accept", "suggestion-reject"]>;
 };
 export default _default;
 //# sourceMappingURL=NumberRangeInput.d.ts.map

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

@@ -1,2 +1,2 @@
-export declare const getPhoneInputTestIds: (testIdProp?: string | undefined) => import("../..").TestIdsRecord<readonly ["control", "country-code", "label", "info", "additional-info", "suggestion-accept", "suggestion-reject"]>;
+export declare const getPhoneInputTestIds: (testIdProp?: string | null | undefined) => import("../..").TestIdsRecord<readonly ["control", "country-code", "label", "info", "additional-info", "suggestion-accept", "suggestion-reject"]>;
 //# sourceMappingURL=Phone.test-ids.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Phone.test-ids.d.ts","sourceRoot":"","sources":["../../../src/components/Phone/Phone.test-ids.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,oBAAoB,wLAItB,CAAC"}
+{"version":3,"file":"Phone.test-ids.d.ts","sourceRoot":"","sources":["../../../src/components/Phone/Phone.test-ids.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,oBAAoB,+LAItB,CAAC"}

package/lib/components/Phone/PhoneInput.d.ts

@@ -19,7 +19,7 @@ export interface PhoneInputProps extends FormControlProps, BaseProps, NoChildren
     ref?: Ref<HTMLInputElement>;
 }
 declare const _default: FunctionComponent<PhoneInputProps & ForwardProps> & {
-    getTestIds: (testIdProp?: string | undefined) => import("../../types").TestIdsRecord<readonly ["control", "country-code", "label", "info", "additional-info", "suggestion-accept", "suggestion-reject"]>;
+    getTestIds: (testIdProp?: string | null | undefined) => import("../../types").TestIdsRecord<readonly ["control", "country-code", "label", "info", "additional-info", "suggestion-accept", "suggestion-reject"]>;
 };
 export default _default;
 //# sourceMappingURL=PhoneInput.d.ts.map

package/lib/components/Progress/Progress.styles.d.ts

@@ -1,6 +1,6 @@
 import type { ProgressProps } from './Progress.types';
 export declare const StyledProgressBackdrop: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Omit<import("../Backdrop").BackdropProps, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
-    getTestIds: (testIdProp?: string | undefined) => import("../..").TestIdsRecord<readonly []>;
+    getTestIds: (testIdProp?: string | null | undefined) => import("../..").TestIdsRecord<readonly []>;
 }, import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledProgressRing: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, Pick<ProgressProps, "placement"> & {
     determinate: boolean;

package/lib/components/SearchInput/SearchInput.styles.d.ts

@@ -1,10 +1,10 @@
 export declare const StyledSearchButton: import("styled-components").StyledComponent<import("react").FunctionComponent<import("../Button/BareButton").BareButtonProps & import("../..").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledMenuButton: import("styled-components").StyledComponent<import("react").FunctionComponent<import("../..").ForwardProps & import("../MenuButton").MenuButtonProps> & {
-    getTestIds: (testIdProp?: string | undefined) => import("../..").TestIdsRecord<readonly []>;
+    getTestIds: (testIdProp?: string | null | undefined) => import("../..").TestIdsRecord<readonly []>;
 }, import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledCancelButton: import("styled-components").StyledComponent<import("react").FunctionComponent<import("../Button").ButtonProps & import("../..").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledSearchTextInput: import("styled-components").StyledComponent<import("react").FC<import("../Input").InputProps & import("../..").ForwardProps> & {
-    getTestIds: (testIdProp?: string | undefined) => import("../..").TestIdsRecord<readonly ["control", "label", "info", "additional-info", "suggestion-accept", "suggestion-reject"]>;
+    getTestIds: (testIdProp?: string | null | undefined) => import("../..").TestIdsRecord<readonly ["control", "label", "info", "additional-info", "suggestion-accept", "suggestion-reject"]>;
 }, import("styled-components").DefaultTheme, {
     decoupled: boolean;
 }, never>;

package/lib/components/Select/Select.d.ts

@@ -46,7 +46,7 @@ export declare const StyledSelect: import("styled-components").StyledComponent<"
     readOnly: boolean;
 }, never>;
 declare const _default: FunctionComponent<SelectProps & ForwardProps> & {
-    getTestIds: (testIdProp?: string | undefined) => import("../../types").TestIdsRecord<readonly ["control", "label", "info", "additional-info", "suggestion-accept", "suggestion-reject"]>;
+    getTestIds: (testIdProp?: string | null | undefined) => import("../../types").TestIdsRecord<readonly ["control", "label", "info", "additional-info", "suggestion-accept", "suggestion-reject"]>;
 };
 export default _default;
 //# sourceMappingURL=Select.d.ts.map

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

@@ -1,2 +1,2 @@
-export declare const getSelectTestIds: (testIdProp?: string | undefined) => import("../..").TestIdsRecord<readonly ["control", "label", "info", "additional-info", "suggestion-accept", "suggestion-reject"]>;
+export declare const getSelectTestIds: (testIdProp?: string | null | undefined) => import("../..").TestIdsRecord<readonly ["control", "label", "info", "additional-info", "suggestion-accept", "suggestion-reject"]>;
 //# sourceMappingURL=Select.test-ids.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Select.test-ids.d.ts","sourceRoot":"","sources":["../../../src/components/Select/Select.test-ids.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,gBAAgB,wKAA6D,CAAC"}
+{"version":3,"file":"Select.test-ids.d.ts","sourceRoot":"","sources":["../../../src/components/Select/Select.test-ids.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,gBAAgB,+KAA6D,CAAC"}

package/lib/components/Slider/Slider.d.ts

@@ -2,7 +2,7 @@ import type { FunctionComponent } from 'react';
 import type { ForwardProps } from '../../types';
 import type SliderProps from './Slider.types';
 declare const _default: FunctionComponent<SliderProps & ForwardProps> & {
-    getTestIds: (testIdProp?: string | undefined) => import("../../types").TestIdsRecord<readonly ["control", "label", "info", "additional-info", "suggestion-accept", "suggestion-reject"]>;
+    getTestIds: (testIdProp?: string | null | undefined) => import("../../types").TestIdsRecord<readonly ["control", "label", "info", "additional-info", "suggestion-accept", "suggestion-reject"]>;
 };
 export default _default;
 //# sourceMappingURL=Slider.d.ts.map

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

@@ -1,2 +1,2 @@
-export declare const getSliderTestIds: (testIdProp?: string | undefined) => import("../..").TestIdsRecord<readonly ["control", "label", "info", "additional-info", "suggestion-accept", "suggestion-reject"]>;
+export declare const getSliderTestIds: (testIdProp?: string | null | undefined) => import("../..").TestIdsRecord<readonly ["control", "label", "info", "additional-info", "suggestion-accept", "suggestion-reject"]>;
 //# sourceMappingURL=Slider.test-ids.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Slider.test-ids.d.ts","sourceRoot":"","sources":["../../../src/components/Slider/Slider.test-ids.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,gBAAgB,wKAA6D,CAAC"}
+{"version":3,"file":"Slider.test-ids.d.ts","sourceRoot":"","sources":["../../../src/components/Slider/Slider.test-ids.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,gBAAgB,+KAA6D,CAAC"}

package/lib/components/SummaryItem/SummaryItem.d.ts

@@ -33,7 +33,7 @@ export declare const StyledSecondary: import("styled-components").StyledComponen
 export declare const StyledSummaryItemActions: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledSummaryItem: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 declare const _default: FunctionComponent<SummaryItemProps & ForwardProps> & {
-    getTestIds: (testIdProp?: string | undefined) => import("../../types").TestIdsRecord<readonly ["primary", "secondary", "visual", "actions"]>;
+    getTestIds: (testIdProp?: string | null | undefined) => import("../../types").TestIdsRecord<readonly ["primary", "secondary", "visual", "actions"]>;
 };
 export default _default;
 //# sourceMappingURL=SummaryItem.d.ts.map

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

@@ -1,2 +1,2 @@
-export declare const getSummaryItemTestIds: (testIdProp?: string | undefined) => import("../..").TestIdsRecord<readonly ["primary", "secondary", "visual", "actions"]>;
+export declare const getSummaryItemTestIds: (testIdProp?: string | null | undefined) => import("../..").TestIdsRecord<readonly ["primary", "secondary", "visual", "actions"]>;
 //# sourceMappingURL=SummaryItem.test-ids.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"SummaryItem.test-ids.d.ts","sourceRoot":"","sources":["../../../src/components/SummaryItem/SummaryItem.test-ids.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,qBAAqB,4HAKvB,CAAC"}
+{"version":3,"file":"SummaryItem.test-ids.d.ts","sourceRoot":"","sources":["../../../src/components/SummaryItem/SummaryItem.test-ids.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,qBAAqB,mIAKvB,CAAC"}

package/lib/components/Tabs/Tabs.styles.d.ts

@@ -3,7 +3,7 @@ export declare const StyledTabs: import("styled-components").StyledComponent<"di
     hasScrollBar: boolean;
 }, never>;
 export declare const StyledAllTabsButton: import("styled-components").StyledComponent<import("react").FunctionComponent<import("../..").ForwardProps & import("../MenuButton").MenuButtonProps> & {
-    getTestIds: (testIdProp?: string | undefined) => import("../..").TestIdsRecord<readonly []>;
+    getTestIds: (testIdProp?: string | null | undefined) => import("../..").TestIdsRecord<readonly []>;
 }, import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledErrorIcon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../Icon").IconProps>, import("styled-components").DefaultTheme, {}, never>;
 //# sourceMappingURL=Tabs.styles.d.ts.map

package/lib/components/TextArea/TextArea.d.ts

@@ -29,7 +29,7 @@ export interface TextAreaProps extends FormControlProps, BaseProps, NoChildrenPr
     onChange?: ChangeEventHandler<HTMLTextAreaElement>;
 }
 declare const _default: FC<TextAreaProps & ForwardProps> & {
-    getTestIds: (testIdProp?: string | undefined) => import("../../types").TestIdsRecord<readonly ["control", "label", "info", "additional-info", "suggestion-accept", "suggestion-reject"]>;
+    getTestIds: (testIdProp?: string | null | undefined) => import("../../types").TestIdsRecord<readonly ["control", "label", "info", "additional-info", "suggestion-accept", "suggestion-reject"]>;
 };
 export default _default;
 //# sourceMappingURL=TextArea.d.ts.map

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

@@ -1,2 +1,2 @@
-export declare const getTextAreaTestIds: (testIdProp?: string | undefined) => import("../..").TestIdsRecord<readonly ["control", "label", "info", "additional-info", "suggestion-accept", "suggestion-reject"]>;
+export declare const getTextAreaTestIds: (testIdProp?: string | null | undefined) => import("../..").TestIdsRecord<readonly ["control", "label", "info", "additional-info", "suggestion-accept", "suggestion-reject"]>;
 //# sourceMappingURL=TextArea.test-ids.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"TextArea.test-ids.d.ts","sourceRoot":"","sources":["../../../src/components/TextArea/TextArea.test-ids.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,kBAAkB,wKAAgE,CAAC"}
+{"version":3,"file":"TextArea.test-ids.d.ts","sourceRoot":"","sources":["../../../src/components/TextArea/TextArea.test-ids.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,kBAAkB,+KAAgE,CAAC"}

package/lib/components/Toaster/Toaster.d.ts

@@ -8,7 +8,7 @@ declare module '../../init' {
     }
 }
 declare const _default: FunctionComponent<ToasterProps> & {
-    getTestIds: (testIdProp?: string | undefined) => import("../..").TestIdsRecord<readonly ["toast"]>;
+    getTestIds: (testIdProp?: string | null | undefined) => import("../..").TestIdsRecord<readonly ["toast"]>;
 };
 export default _default;
 //# sourceMappingURL=Toaster.d.ts.map

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"Toaster.test-ids.d.ts","sourceRoot":"","sources":["../../../src/components/Toaster/Toaster.test-ids.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,iBAAiB,wFAA+C,CAAC"}
+{"version":3,"file":"Toaster.test-ids.d.ts","sourceRoot":"","sources":["../../../src/components/Toaster/Toaster.test-ids.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,iBAAiB,+FAA+C,CAAC"}