@pega/cosmos-react-core 4.1.1 → 5.0.0-dev.10.0

package/lib/components/Avatar/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.js","sourceRoot":"","sources":["../../../src/components/Avatar/Avatar.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  FunctionComponent,\n  forwardRef,\n  Ref,\n  PropsWithoutRef,\n  SyntheticEvent,\n  useState,\n  useEffect,\n  useMemo\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport { readableColor, rgba } from 'polished';\n\nimport Image from '../Image';\nimport {\n  BaseProps,\n  ForwardProps,\n  PropsWithDefaults,\n  NoChildrenProp,\n  OmitStrict\n} from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport Icon, { StyledIcon } from '../Icon';\nimport { Alert } from '../Badges';\nimport { useI18n } from '../../hooks';\nimport { tryCatch } from '../../utils';\n\nexport interface AvatarProps extends BaseProps, NoChildrenProp {\n  /** The name of the identity the Avatar represents. */\n  name: string;\n  /** Content of the Avatar as an image source url. */\n  imageSrc?: string;\n  /** An icon to render as the content of the avatar. imageSrc will take precedence if passed. */\n  icon?: string;\n  /** Optional color for the icon to be rendered */\n  color?: string;\n  /** Optional background color for the avatar. Will be auto computed if not passed */\n  backgroundColor?: string;\n  /**\n   * Shape of the Avatar.\n   * @default 'circle'\n   */\n  shape?: 'circle' | 'squircle';\n  /**\n   * Avatar size.\n   * @default 'm'\n   */\n  size?: 's' | 'm' | 'l' | 'xl';\n  /** If defined, will render status icon on the avatar. */\n  status?: 'active';\n  /** Optional error handler in the event an image fails to load. */\n  onImageError?: (err: SyntheticEvent<HTMLImageElement>) => void;\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLDivElement | HTMLImageElement>;\n}\n\ntype AvatarPropsWithDefaults = PropsWithDefaults<AvatarProps, 'shape' | 'size'>;\n\nconst sizeToRem = {\n  s: 1,\n  m: 2,\n  l: 2.5,\n  xl: 4\n};\n\nconst fontSizeToRem = {\n  s: 0.5625,\n  m: 0.8125,\n  l: 1,\n  xl: 1.5\n};\n\nconst sizeToBorderRadius = {\n  s: 0.25,\n  m: 0.5,\n  l: 1,\n  xl: 1\n};\n\nexport const StyledAvatarImage = styled(Image)`\n  min-height: 100%;\n  min-width: 100%;\n  aspect-ratio: 1 / 1;\n  object-fit: cover;\n  border-radius: inherit;\n  height: fit-content;\n  width: fit-content;\n`;\n\nexport const StyledAvatar = styled.div<\n  OmitStrict<AvatarPropsWithDefaults, 'name' | 'children'> & {\n    hasSrc?: boolean;\n    hasBrokenImage?: boolean;\n  }\n>(\n  ({\n    hasBrokenImage,\n    hasSrc,\n    size,\n    shape,\n    color,\n    backgroundColor,\n    theme: {\n      base: {\n        palette: { 'foreground-color': foregroundColor, 'primary-background': primaryBackground }\n      },\n      components: { avatar }\n    }\n  }) => {\n    const sizeRem = sizeToRem[size];\n    const fontSize = fontSizeToRem[size];\n    let bgColor =\n      hasSrc && !hasBrokenImage ? primaryBackground : backgroundColor || avatar['background-color'];\n    if (color && !backgroundColor && !(hasSrc && !hasBrokenImage))\n      bgColor = tryCatch(\n        () => readableColor(color),\n        () => avatar['background-color']\n      );\n    const shadowColor = tryCatch(() => rgba(foregroundColor, 0.1));\n    const iconColor = color || tryCatch(() => readableColor(bgColor));\n\n    return css`\n      position: relative;\n      flex-shrink: 0;\n      background-color: ${bgColor};\n      color: ${iconColor};\n      width: ${sizeRem}rem;\n      height: ${sizeRem}rem;\n      min-width: ${sizeRem}rem;\n      min-height: ${sizeRem}rem;\n      font-size: ${fontSize}rem;\n      text-transform: uppercase;\n      line-height: ${sizeRem}rem;\n      text-align: center;\n      vertical-align: top;\n      display: inline-block;\n      border-radius: 100%;\n      user-select: none;\n      -webkit-user-select: none;\n\n      ${shape === 'squircle' &&\n      css`\n        border-radius: calc(${sizeToBorderRadius[size]} * ${avatar['border-radius']});\n      `}\n\n      ${StyledIcon} {\n        width: 50%;\n        height: 100%;\n        vertical-align: initial;\n      }\n\n      ::after {\n        content: '';\n        position: absolute;\n        inset: 0;\n        border-radius: inherit;\n        pointer-events: none;\n        box-shadow: inset 0 0 0 0.0625rem ${shadowColor};\n      }\n    `;\n  }\n);\n\nStyledAvatar.defaultProps = defaultThemeProp;\n\nexport const StyledStatus = styled.div<Pick<AvatarPropsWithDefaults, 'size'>>(({ size, theme }) => {\n  /** Scales alert badge dimensions based on size of avatar */\n  const sizeDimensions = (0.625 * sizeToRem[size]) / sizeToRem.m;\n\n  return css`\n    position: absolute;\n    height: ${sizeDimensions}rem;\n    width: ${sizeDimensions}rem;\n    inset-block-end: 0;\n    inset-inline-end: 0;\n    z-index: 1;\n    animation: pop calc(${theme.base.animation.speed} * 2) cubic-bezier(1, 1.65, 0.3, 1.24);\n\n    @keyframes pop {\n      0% {\n        opacity: 0;\n        transform: scale(0);\n      }\n      50% {\n        opacity: 1;\n      }\n      100% {\n        transform: scale(1);\n      }\n    }\n  `;\n});\n\nStyledStatus.defaultProps = defaultThemeProp;\n\n/**\n * Helper function to construct a two or one letter initial from the title prop.\n * This text will be displayed if no valid image source is provided.\n * @param name\n * @param size\n */\nconst getInitials = (name: AvatarProps['name'], size: AvatarProps['size']) => {\n  const words = name.split(' ');\n  const firstInitial = words[0][0];\n\n  return words.length === 1 || size === 's' ? firstInitial : `${firstInitial}${words[1][0]}`;\n};\n\n/**\n * Generally, avatars are used to distinguish between different operators and\n * objects when they are shown in a list or in a small space. Users of applications\n * can upload a custom avatar of their choice.\n */\nconst Avatar: FunctionComponent<AvatarProps & ForwardProps> = forwardRef(function Avatar(\n  props: PropsWithoutRef<AvatarProps>,\n  ref: Ref<HTMLDivElement | HTMLImageElement>\n) {\n  const {\n    shape = 'circle',\n    size = 'm',\n    imageSrc,\n    icon,\n    name,\n    status,\n    onImageError,\n    ...restProps\n  } = props;\n  const [hasBrokenImage, setHasBrokenImage] = useState<undefined | boolean>();\n  const t = useI18n();\n\n  useEffect(() => {\n    setHasBrokenImage(undefined);\n  }, [imageSrc]);\n\n  const content = useMemo(() => {\n    if (icon) {\n      return <Icon name={icon} />;\n    }\n    if (imageSrc && !hasBrokenImage) {\n      return (\n        <StyledAvatarImage\n          src={imageSrc}\n          alt={name}\n          onError={(e: SyntheticEvent<HTMLImageElement>) => {\n            setHasBrokenImage(true);\n            onImageError?.(e);\n          }}\n          onLoad={() => {\n            setHasBrokenImage(false);\n          }}\n        />\n      );\n    }\n    return getInitials(name, size);\n  }, [imageSrc, name, size, icon, hasBrokenImage, onImageError]);\n\n  return (\n    <StyledAvatar\n      role='img'\n      hasSrc={!!imageSrc}\n      hasBrokenImage={hasBrokenImage}\n      shape={shape}\n      size={size}\n      ref={ref}\n      aria-label={`${name}${status ? ` ${t('status')} ${status}` : ''}`}\n      {...restProps}\n    >\n      {content}\n      {status === 'active' && <Alert as={StyledStatus} size={size} variant='success' />}\n    </StyledAvatar>\n  );\n});\n\nexport default Avatar;\n"]}
+{"version":3,"file":"Avatar.js","sourceRoot":"","sources":["../../../src/components/Avatar/Avatar.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useState, useEffect, useMemo } from 'react';\nimport type { FunctionComponent, Ref, PropsWithoutRef, SyntheticEvent } from 'react';\nimport styled, { css } from 'styled-components';\nimport { readableColor, rgba } from 'polished';\n\nimport Image from '../Image';\nimport type {\n  BaseProps,\n  ForwardProps,\n  PropsWithDefaults,\n  NoChildrenProp,\n  OmitStrict,\n  TestIdProp\n} from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport Icon, { StyledIcon } from '../Icon';\nimport { Alert } from '../Badges';\nimport { useI18n, useTestIds } from '../../hooks';\nimport { tryCatch, withTestIds } from '../../utils';\n\nimport { getAvatarTestIds } from './Avatar.test-ids';\n\nexport interface AvatarProps extends BaseProps, NoChildrenProp, TestIdProp {\n  /** The name of the identity the Avatar represents. */\n  name: string;\n  /** Content of the Avatar as an image source url. */\n  imageSrc?: string;\n  /** An icon to render as the content of the avatar. imageSrc will take precedence if passed. */\n  icon?: string;\n  /** Optional color for the icon to be rendered */\n  color?: string;\n  /** Optional background color for the avatar. Will be auto computed if not passed */\n  backgroundColor?: string;\n  /**\n   * Shape of the Avatar.\n   * @default 'circle'\n   */\n  shape?: 'circle' | 'squircle';\n  /**\n   * Avatar size.\n   * @default 'm'\n   */\n  size?: 's' | 'm' | 'l' | 'xl';\n  /** If defined, will render status icon on the avatar. */\n  status?: 'active';\n  /** Optional error handler in the event an image fails to load. */\n  onImageError?: (err: SyntheticEvent<HTMLImageElement>) => void;\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLDivElement | HTMLImageElement>;\n}\n\ntype AvatarPropsWithDefaults = PropsWithDefaults<AvatarProps, 'shape' | 'size'>;\n\nconst sizeToRem = {\n  s: 1,\n  m: 2,\n  l: 2.5,\n  xl: 4\n};\n\nconst fontSizeToRem = {\n  s: 0.5625,\n  m: 0.8125,\n  l: 1,\n  xl: 1.5\n};\n\nexport const StyledAvatarImage = styled(Image)`\n  min-height: 100%;\n  min-width: 100%;\n  aspect-ratio: 1 / 1;\n  object-fit: cover;\n  border-radius: inherit;\n  height: fit-content;\n  width: fit-content;\n`;\n\nexport const StyledAvatar = styled.div<\n  OmitStrict<AvatarPropsWithDefaults, 'name' | 'children'> & {\n    hasSrc?: boolean;\n    hasBrokenImage?: boolean;\n  }\n>(\n  ({\n    hasBrokenImage,\n    hasSrc,\n    size,\n    shape,\n    color,\n    backgroundColor,\n    theme: {\n      base: {\n        palette: { 'foreground-color': foregroundColor, 'primary-background': primaryBackground },\n        'border-radius': baseBorderRadius\n      },\n      components: {\n        avatar: { 'background-color': avatarBackground },\n        icon: { 'border-radius-multiplier': borderRadiusMultiplier }\n      }\n    }\n  }) => {\n    const sizeRem = sizeToRem[size];\n    const fontSize = fontSizeToRem[size];\n    let bgColor =\n      hasSrc && !hasBrokenImage ? primaryBackground : backgroundColor || avatarBackground;\n    if (color && !backgroundColor && !(hasSrc && !hasBrokenImage))\n      bgColor = tryCatch(\n        () => readableColor(color),\n        () => avatarBackground\n      );\n    const shadowColor = tryCatch(() => rgba(foregroundColor, 0.1));\n    const iconColor = color || tryCatch(() => readableColor(bgColor));\n\n    return css`\n      position: relative;\n      flex-shrink: 0;\n      background-color: ${bgColor};\n      color: ${iconColor};\n      width: ${sizeRem}rem;\n      height: ${sizeRem}rem;\n      min-width: ${sizeRem}rem;\n      min-height: ${sizeRem}rem;\n      font-size: ${fontSize}rem;\n      text-transform: uppercase;\n      line-height: ${sizeRem}rem;\n      text-align: center;\n      vertical-align: top;\n      display: inline-block;\n      border-radius: 100%;\n      user-select: none;\n      -webkit-user-select: none;\n\n      ${shape === 'squircle' &&\n      css`\n        border-radius: calc(${borderRadiusMultiplier} * ${baseBorderRadius});\n      `}\n\n      ${StyledIcon} {\n        width: 50%;\n        height: 100%;\n        vertical-align: initial;\n      }\n\n      ::after {\n        content: '';\n        position: absolute;\n        inset: 0;\n        border-radius: inherit;\n        pointer-events: none;\n        box-shadow: inset 0 0 0 0.0625rem ${shadowColor};\n      }\n    `;\n  }\n);\n\nStyledAvatar.defaultProps = defaultThemeProp;\n\nexport const StyledStatus = styled(Alert)<Pick<AvatarPropsWithDefaults, 'size'>>(\n  ({ size, theme }) => {\n    /** Scales alert badge dimensions based on size of avatar */\n    const sizeDimensions = (0.625 * sizeToRem[size]) / sizeToRem.m;\n\n    return css`\n      position: absolute;\n      height: ${sizeDimensions}rem;\n      width: ${sizeDimensions}rem;\n      inset-block-end: 0;\n      inset-inline-end: 0;\n      z-index: 1;\n      animation: pop calc(${theme.base.animation.speed} * 2) cubic-bezier(1, 1.65, 0.3, 1.24);\n\n      @keyframes pop {\n        0% {\n          opacity: 0;\n          transform: scale(0);\n        }\n        50% {\n          opacity: 1;\n        }\n        100% {\n          transform: scale(1);\n        }\n      }\n    `;\n  }\n);\n\nStyledStatus.defaultProps = defaultThemeProp;\n\n/**\n * Helper function to construct a two or one letter initial from the title prop.\n * This text will be displayed if no valid image source is provided.\n * @param name\n * @param size\n */\nconst getInitials = (name: AvatarProps['name'], size: AvatarProps['size']) => {\n  const words = name.split(' ');\n  const firstInitial = words[0][0];\n\n  return words.length === 1 || size === 's' ? firstInitial : `${firstInitial}${words[1][0]}`;\n};\n\n/**\n * Generally, avatars are used to distinguish between different operators and\n * objects when they are shown in a list or in a small space. Users of applications\n * can upload a custom avatar of their choice.\n */\nconst Avatar: FunctionComponent<AvatarProps & ForwardProps> = forwardRef(function Avatar(\n  props: PropsWithoutRef<AvatarProps>,\n  ref: Ref<HTMLDivElement | HTMLImageElement>\n) {\n  const {\n    testId,\n    shape = 'circle',\n    size = 'm',\n    imageSrc,\n    icon,\n    name,\n    status,\n    onImageError,\n    ...restProps\n  } = props;\n  const [hasBrokenImage, setHasBrokenImage] = useState<undefined | boolean>();\n  const t = useI18n();\n  const testIds = useTestIds(testId, getAvatarTestIds);\n\n  useEffect(() => {\n    setHasBrokenImage(undefined);\n  }, [imageSrc]);\n\n  const content = useMemo(() => {\n    if (icon) {\n      return <Icon name={icon} />;\n    }\n    if (imageSrc && !hasBrokenImage) {\n      return (\n        <StyledAvatarImage\n          src={imageSrc}\n          alt={name}\n          onError={(e: SyntheticEvent<HTMLImageElement>) => {\n            setHasBrokenImage(true);\n            onImageError?.(e);\n          }}\n          onLoad={() => {\n            setHasBrokenImage(false);\n          }}\n        />\n      );\n    }\n    return getInitials(name, size);\n  }, [imageSrc, name, size, icon, hasBrokenImage, onImageError]);\n\n  return (\n    <StyledAvatar\n      data-testid={testIds.root}\n      role='img'\n      hasSrc={!!imageSrc}\n      hasBrokenImage={hasBrokenImage}\n      shape={shape}\n      size={size}\n      ref={ref}\n      aria-label={`${name}${status ? ` ${t('status')} ${status}` : ''}`}\n      {...restProps}\n    >\n      {content}\n      {status === 'active' && <StyledStatus size={size} variant='success' />}\n    </StyledAvatar>\n  );\n});\n\nexport default withTestIds(Avatar, getAvatarTestIds);\n"]}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.test-ids.d.ts","sourceRoot":"","sources":["../../../src/components/Avatar/Avatar.test-ids.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,gBAAgB,iFAAuC,CAAC"}

package/lib/components/Avatar/Avatar.test-ids.js

@@ -0,0 +1,3 @@
+import { createTestIds } from '../../utils';
+export const getAvatarTestIds = createTestIds('avatar', []);
+//# sourceMappingURL=Avatar.test-ids.js.map

package/lib/components/Avatar/Avatar.test-ids.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.test-ids.js","sourceRoot":"","sources":["../../../src/components/Avatar/Avatar.test-ids.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAE5C,MAAM,CAAC,MAAM,gBAAgB,GAAG,aAAa,CAAC,QAAQ,EAAE,EAAW,CAAC,CAAC","sourcesContent":["import { createTestIds } from '../../utils';\n\nexport const getAvatarTestIds = createTestIds('avatar', [] as const);\n"]}

package/lib/components/Backdrop/Backdrop.d.ts

@@ -1,18 +1,11 @@
-import { FunctionComponent, ReactNode, Ref, MouseEvent } from 'react';
-import { BaseProps, ForwardProps, ExcludeStrict } from '../../types';
-import { FlexProps } from '../Flex';
-interface BackdropContextValue {
-    el: HTMLDivElement | null;
-}
-export declare const BackdropContext: import("react").Context<BackdropContextValue>;
-export interface BackdropProps extends BaseProps {
+import type { ExcludeStrict, WithAttributes, TestIdProp } from '../../types';
+import type { FlexProps } from '../Flex';
+export type BackdropProps = WithAttributes<'div', TestIdProp & {
     /**
      * Opacity of the Backdrop.
      * @default 0.4
      */
     alpha?: number;
-    /** Any React Node to be rendered on top of the Backdrop component. */
-    children?: ReactNode;
     /** Props passed to Flex container. */
     container?: ExcludeStrict<FlexProps['container'], true>;
     /**
@@ -35,8 +28,6 @@ export interface BackdropProps extends BaseProps {
      * @default 'fixed'
      */
     position?: 'absolute' | 'fixed';
-    /** Accepts a callback function for click event on Backdrop. */
-    onClick?: (e: MouseEvent<HTMLDivElement>) => void;
     /** Accepts a callback that gets invoked before opening Backdrop. */
     onBeforeTransitionIn?: () => void;
     /** Accepts a callback that gets invoked after opening Backdrop. */
@@ -45,12 +36,12 @@ export interface BackdropProps extends BaseProps {
     onBeforeTransitionOut?: () => void;
     /** Accepts a callback that gets invoked after closing Backdrop */
     onAfterTransitionOut?: () => void;
-    /** Ref for a Backdrop's root div element. */
-    ref?: Ref<HTMLDivElement>;
-}
-export declare const StyledBackdrop: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, Pick<BackdropProps, "children" | "ref" | "className" | "onClick" | "variant" | "container" | "onBeforeTransitionIn" | "onAfterTransitionIn" | "onBeforeTransitionOut" | "onAfterTransitionOut"> & Required<Pick<BackdropProps, "alpha" | "open" | "position" | "transitionSpeed">> & {
+}>;
+export declare const StyledBackdrop: import("styled-components").StyledComponent<import("react").FunctionComponent<FlexProps & import("../../types").ForwardProps>, import("styled-components").DefaultTheme, Pick<BackdropProps, "hidden" | "color" | "content" | "style" | "translate" | "prefix" | "slot" | "title" | "children" | "ref" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoFocus" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "nonce" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "testId" | "variant" | "container" | "onBeforeTransitionIn" | "onAfterTransitionIn" | "onBeforeTransitionOut" | "onAfterTransitionOut"> & Required<Pick<BackdropProps, "alpha" | "open" | "position" | "transitionSpeed">> & {
     opacity: 0 | 1;
 }, never>;
-declare const Backdrop: FunctionComponent<BackdropProps & ForwardProps>;
-export default Backdrop;
+declare const _default: import("react").ForwardRefExoticComponent<Omit<BackdropProps, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
+    getTestIds: (testIdProp?: string | undefined) => import("../../types").TestIdsRecord<readonly []>;
+};
+export default _default;
 //# sourceMappingURL=Backdrop.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Backdrop.d.ts","sourceRoot":"","sources":["../../../src/components/Backdrop/Backdrop.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EACjB,SAAS,EAOT,GAAG,EACH,UAAU,EAEX,MAAM,OAAO,CAAC;AAKf,OAAO,EAAE,SAAS,EAAqB,YAAY,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AACxF,OAAa,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAG1C,UAAU,oBAAoB;IAC5B,EAAE,EAAE,cAAc,GAAG,IAAI,CAAC;CAC3B;AAED,eAAO,MAAM,eAAe,+CAE1B,CAAC;AAEH,MAAM,WAAW,aAAc,SAAQ,SAAS;IAC9C;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sEAAsE;IACtE,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,sCAAsC;IACtC,SAAS,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,WAAW,CAAC,EAAE,IAAI,CAAC,CAAC;IACxD;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC3B;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;IACtD;;;OAGG;IACH,QAAQ,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;IAChC,+DAA+D;IAC/D,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IAClD,oEAAoE;IACpE,oBAAoB,CAAC,EAAE,MAAM,IAAI,CAAC;IAClC,mEAAmE;IACnE,mBAAmB,CAAC,EAAE,MAAM,IAAI,CAAC;IACjC,oEAAoE;IACpE,qBAAqB,CAAC,EAAE,MAAM,IAAI,CAAC;IACnC,kEAAkE;IAClE,oBAAoB,CAAC,EAAE,MAAM,IAAI,CAAC;IAClC,6CAA6C;IAC7C,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAcD,eAAO,MAAM,cAAc;aAAqD,CAAC,GAAG,CAAC;SAmCnF,CAAC;AAMH,QAAA,MAAM,QAAQ,EAAE,iBAAiB,CAAC,aAAa,GAAG,YAAY,CA0F5D,CAAC;AAEH,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Backdrop.d.ts","sourceRoot":"","sources":["../../../src/components/Backdrop/Backdrop.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAEV,aAAa,EACb,cAAc,EAEd,UAAU,EACX,MAAM,aAAa,CAAC;AAGrB,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAKzC,MAAM,MAAM,aAAa,GAAG,cAAc,CACxC,KAAK,EACL,UAAU,GAAG;IACX;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sCAAsC;IACtC,SAAS,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,WAAW,CAAC,EAAE,IAAI,CAAC,CAAC;IACxD;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC3B;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;IACtD;;;OAGG;IACH,QAAQ,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;IAChC,oEAAoE;IACpE,oBAAoB,CAAC,EAAE,MAAM,IAAI,CAAC;IAClC,mEAAmE;IACnE,mBAAmB,CAAC,EAAE,MAAM,IAAI,CAAC;IACjC,oEAAoE;IACpE,qBAAqB,CAAC,EAAE,MAAM,IAAI,CAAC;IACnC,kEAAkE;IAClE,oBAAoB,CAAC,EAAE,MAAM,IAAI,CAAC;CACnC,CACF,CAAC;AAcF,eAAO,MAAM,cAAc;aAAuD,CAAC,GAAG,CAAC;SAqCtF,CAAC;;;;AAMF,wBA6FE"}

package/lib/components/Backdrop/Backdrop.js

@@ -1,52 +1,52 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useState, useCallback, useMemo, forwardRef, createContext } from 'react';
+import { useEffect, useState, useCallback, forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 import { defaultThemeProp } from '../../theme';
-import { reflow } from '../../utils';
+import { reflow, withTestIds } from '../../utils';
+import Configuration from '../Configuration';
 import Flex from '../Flex';
-import { useConsolidatedRef, useElement } from '../../hooks';
-export const BackdropContext = createContext({
-    el: null
-});
+import { useConsolidatedRef, useElement, useTestIds } from '../../hooks';
+import { getBackdropTestIds } from './Backdrop.test-ids';
 const transitionSpeedToTheme = {
     slow: 2,
     medium: 1,
     fast: 0.5,
     none: 0
 };
-export const StyledBackdrop = styled.div(props => {
+export const StyledBackdrop = styled(Flex)(props => {
     const { theme: { base } } = props;
     const { opacity, alpha, variant, position } = props;
     const transitionDuration = `max(calc(${transitionSpeedToTheme[props.transitionSpeed]} * ${base.animation.speed}), 1ms)`;
     return css `
-    position: ${position};
-    z-index: ${position === 'fixed' ? base['z-index'].backdrop : base['z-index'].popover + 1};
-    top: 0;
-    left: 0;
-    height: 100%;
-    width: 100%;
-    border-radius: inherit;
-    opacity: ${opacity};
-    transition-property: opacity;
-    transition-timing-function: ${props.theme.base.animation.timing.ease};
-    /* stylelint-disable declaration-block-no-duplicate-properties */
-    transition-duration: 1ms;
-    transition-duration: ${transitionDuration};
-    /* stylelint-enable declaration-block-no-duplicate-properties */
+      position: ${position};
+      z-index: ${position === 'fixed' ? base['z-index'].backdrop : base['z-index'].popover + 1};
+      top: 0;
+      left: 0;
+      height: 100%;
+      width: 100%;
+      border-radius: inherit;
+      opacity: ${opacity};
+      transition-property: opacity;
+      transition-timing-function: ${props.theme.base.animation.timing.ease};
+      /* stylelint-disable declaration-block-no-duplicate-properties */
+      transition-duration: 1ms;
+      transition-duration: ${transitionDuration};
+      /* stylelint-enable declaration-block-no-duplicate-properties */
 
-    ${variant === 'dark' &&
+      ${variant === 'dark' &&
         css `
-      background: rgba(0, 0, 0, ${alpha});
-    `}
+        background: rgba(0, 0, 0, ${alpha});
+      `}
 
-    ${variant === 'light' &&
+      ${variant === 'light' &&
         css `
-      background: rgba(255, 255, 255, ${alpha});
-    `}
-  `;
+        background: rgba(255, 255, 255, ${alpha});
+      `}
+    `;
 });
 StyledBackdrop.defaultProps = defaultThemeProp;
-const Backdrop = forwardRef(function Backdrop({ children, container, open = false, variant = 'dark', transitionSpeed = 'medium', alpha = 0.6, position = 'fixed', onBeforeTransitionIn, onAfterTransitionIn, onBeforeTransitionOut, onAfterTransitionOut, ...restProps }, ref) {
+export default withTestIds(forwardRef(function Backdrop({ testId, children, container, open = false, variant = 'dark', transitionSpeed = 'medium', alpha = 0.6, position = 'fixed', onBeforeTransitionIn, onAfterTransitionIn, onBeforeTransitionOut, onAfterTransitionOut, ...restProps }, ref) {
+    const testIds = useTestIds(testId, getBackdropTestIds);
     const [state, setState] = useState('closed');
     const [backdropEl, setBackdropEl] = useElement();
     const backdropRef = useConsolidatedRef(ref, setBackdropEl);
@@ -95,8 +95,6 @@ const Backdrop = forwardRef(function Backdrop({ children, container, open = fals
             setState('open');
         }
     }, [state]);
-    const ctxValue = useMemo(() => ({ el: backdropEl }), [backdropEl]);
-    return !open && state === 'closed' ? null : (_jsx(BackdropContext.Provider, { value: ctxValue, children: _jsx(Flex, { container: { justify: 'center', alignItems: 'center', ...container }, as: StyledBackdrop, transitionSpeed: transitionSpeed, opacity: state === 'opening' || state === 'open' ? 1 : 0, alpha: alpha, variant: variant, position: position, onTransitionEnd: onTransitionEnd, ref: backdropRef, ...restProps, children: children }) }));
-});
-export default Backdrop;
+    return !open && state === 'closed' ? null : (_jsx(Configuration, { portalTarget: backdropEl ?? undefined, children: _jsx(StyledBackdrop, { "data-testid": testIds.root, container: { justify: 'center', alignItems: 'center', ...container }, transitionSpeed: transitionSpeed, opacity: state === 'opening' || state === 'open' ? 1 : 0, alpha: alpha, variant: variant, position: position, onTransitionEnd: onTransitionEnd, ref: backdropRef, ...restProps, children: children }) }));
+}), getBackdropTestIds);
 //# sourceMappingURL=Backdrop.js.map

package/lib/components/Backdrop/Backdrop.js.map

@@ -1 +1 @@
-{"version":3,"file":"Backdrop.js","sourceRoot":"","sources":["../../../src/components/Backdrop/Backdrop.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  FunctionComponent,\n  ReactNode,\n  useEffect,\n  useState,\n  useCallback,\n  useMemo,\n  forwardRef,\n  createContext,\n  Ref,\n  MouseEvent,\n  PropsWithoutRef\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport { reflow } from '../../utils';\nimport { BaseProps, PropsWithDefaults, ForwardProps, ExcludeStrict } from '../../types';\nimport Flex, { FlexProps } from '../Flex';\nimport { useConsolidatedRef, useElement } from '../../hooks';\n\ninterface BackdropContextValue {\n  el: HTMLDivElement | null;\n}\n\nexport const BackdropContext = createContext<BackdropContextValue>({\n  el: null\n});\n\nexport interface BackdropProps extends BaseProps {\n  /**\n   * Opacity of the Backdrop.\n   * @default 0.4\n   */\n  alpha?: number;\n  /** Any React Node to be rendered on top of the Backdrop component. */\n  children?: ReactNode;\n  /** Props passed to Flex container. */\n  container?: ExcludeStrict<FlexProps['container'], true>;\n  /**\n   * Toggles visibility of Backdrop.\n   * @default false\n   */\n  open?: boolean;\n  /**\n   * Determines the color of the Backdrop.\n   * @default 'dark'\n   */\n  variant?: 'dark' | 'light';\n  /**\n   * Transition speed of Backdrop animation.\n   * @default 'medium'\n   */\n  transitionSpeed?: 'slow' | 'medium' | 'fast' | 'none';\n  /**\n   * The position of the Backdrop.\n   * @default 'fixed'\n   */\n  position?: 'absolute' | 'fixed';\n  /** Accepts a callback function for click event on Backdrop. */\n  onClick?: (e: MouseEvent<HTMLDivElement>) => void;\n  /** Accepts a callback that gets invoked before opening Backdrop. */\n  onBeforeTransitionIn?: () => void;\n  /** Accepts a callback that gets invoked after opening Backdrop. */\n  onAfterTransitionIn?: () => void;\n  /** Accepts a callback that gets invoked before closing Backdrop. */\n  onBeforeTransitionOut?: () => void;\n  /** Accepts a callback that gets invoked after closing Backdrop */\n  onAfterTransitionOut?: () => void;\n  /** Ref for a Backdrop's root div element. */\n  ref?: Ref<HTMLDivElement>;\n}\n\ntype BackdropPropsWithDefaults = PropsWithDefaults<\n  BackdropProps,\n  'open' | 'transitionSpeed' | 'alpha' | 'position'\n>;\n\nconst transitionSpeedToTheme = {\n  slow: 2,\n  medium: 1,\n  fast: 0.5,\n  none: 0\n} as const;\n\nexport const StyledBackdrop = styled.div<BackdropPropsWithDefaults & { opacity: 0 | 1 }>(props => {\n  const {\n    theme: { base }\n  } = props;\n  const { opacity, alpha, variant, position } = props;\n  const transitionDuration = `max(calc(${transitionSpeedToTheme[props.transitionSpeed]} * ${\n    base.animation.speed\n  }), 1ms)`;\n\n  return css`\n    position: ${position};\n    z-index: ${position === 'fixed' ? base['z-index'].backdrop : base['z-index'].popover + 1};\n    top: 0;\n    left: 0;\n    height: 100%;\n    width: 100%;\n    border-radius: inherit;\n    opacity: ${opacity};\n    transition-property: opacity;\n    transition-timing-function: ${props.theme.base.animation.timing.ease};\n    /* stylelint-disable declaration-block-no-duplicate-properties */\n    transition-duration: 1ms;\n    transition-duration: ${transitionDuration};\n    /* stylelint-enable declaration-block-no-duplicate-properties */\n\n    ${variant === 'dark' &&\n    css`\n      background: rgba(0, 0, 0, ${alpha});\n    `}\n\n    ${variant === 'light' &&\n    css`\n      background: rgba(255, 255, 255, ${alpha});\n    `}\n  `;\n});\n\nStyledBackdrop.defaultProps = defaultThemeProp;\n\ntype State = 'closed' | 'opening' | 'open' | 'closing';\n\nconst Backdrop: FunctionComponent<BackdropProps & ForwardProps> = forwardRef(function Backdrop(\n  {\n    children,\n    container,\n    open = false,\n    variant = 'dark',\n    transitionSpeed = 'medium',\n    alpha = 0.6,\n    position = 'fixed',\n    onBeforeTransitionIn,\n    onAfterTransitionIn,\n    onBeforeTransitionOut,\n    onAfterTransitionOut,\n    ...restProps\n  }: PropsWithoutRef<BackdropProps>,\n  ref: BackdropProps['ref']\n) {\n  const [state, setState] = useState<State>('closed');\n  const [backdropEl, setBackdropEl] = useElement<HTMLDivElement>();\n  const backdropRef = useConsolidatedRef(ref, setBackdropEl);\n\n  const onTransitionEnd = useCallback(\n    (e: TransitionEvent) => {\n      if (e.propertyName !== 'opacity' || e.target !== e.currentTarget) return;\n      let nextState: State;\n\n      if (state === 'closing') {\n        nextState = 'closed';\n        onAfterTransitionOut?.();\n      } else {\n        nextState = 'open';\n        onAfterTransitionIn?.();\n      }\n\n      setState(nextState);\n    },\n    [state, onAfterTransitionOut, onAfterTransitionIn]\n  );\n\n  useEffect(() => {\n    if (open) {\n      if (state === 'closed' || state === 'closing') {\n        onBeforeTransitionIn?.();\n        reflow();\n        setState('opening');\n      }\n    } else if (state === 'open' || state === 'opening') {\n      onBeforeTransitionOut?.();\n      setState('closing');\n    }\n  }, [open]);\n\n  // Using a separate effect instead of combined logic above as it seems more intuitive to mentally manage.\n  useEffect(() => {\n    if (!backdropRef.current) return;\n    const opacity = window.getComputedStyle(backdropRef.current).opacity;\n    // If the opacity is already at the destination value, sync the state value.\n    if (state === 'closing' && opacity === '0') {\n      // Since the transition never ran, we have to pretend it did and call the callback.\n      // TODO: This maybe can be fixed with the animation api\n      onAfterTransitionOut?.();\n      setState('closed');\n    }\n    if (state === 'opening' && opacity === '1') {\n      // ditto, see above...\n      onAfterTransitionIn?.();\n      setState('open');\n    }\n  }, [state]);\n\n  const ctxValue = useMemo(() => ({ el: backdropEl }), [backdropEl]);\n\n  return !open && state === 'closed' ? null : (\n    <BackdropContext.Provider value={ctxValue}>\n      <Flex\n        container={{ justify: 'center', alignItems: 'center', ...container }}\n        as={StyledBackdrop}\n        transitionSpeed={transitionSpeed}\n        opacity={state === 'opening' || state === 'open' ? 1 : 0}\n        alpha={alpha}\n        variant={variant}\n        position={position}\n        onTransitionEnd={onTransitionEnd}\n        ref={backdropRef}\n        {...restProps}\n      >\n        {children}\n      </Flex>\n    </BackdropContext.Provider>\n  );\n});\n\nexport default Backdrop;\n"]}
+{"version":3,"file":"Backdrop.js","sourceRoot":"","sources":["../../../src/components/Backdrop/Backdrop.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useState, useCallback, forwardRef } from 'react';\nimport type { PropsWithoutRef, TransitionEvent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport { reflow, withTestIds } from '../../utils';\nimport type {\n  PropsWithDefaults,\n  ExcludeStrict,\n  WithAttributes,\n  RefElement,\n  TestIdProp\n} from '../../types';\nimport Configuration from '../Configuration';\nimport Flex from '../Flex';\nimport type { FlexProps } from '../Flex';\nimport { useConsolidatedRef, useElement, useTestIds } from '../../hooks';\n\nimport { getBackdropTestIds } from './Backdrop.test-ids';\n\nexport type BackdropProps = WithAttributes<\n  'div',\n  TestIdProp & {\n    /**\n     * Opacity of the Backdrop.\n     * @default 0.4\n     */\n    alpha?: number;\n    /** Props passed to Flex container. */\n    container?: ExcludeStrict<FlexProps['container'], true>;\n    /**\n     * Toggles visibility of Backdrop.\n     * @default false\n     */\n    open?: boolean;\n    /**\n     * Determines the color of the Backdrop.\n     * @default 'dark'\n     */\n    variant?: 'dark' | 'light';\n    /**\n     * Transition speed of Backdrop animation.\n     * @default 'medium'\n     */\n    transitionSpeed?: 'slow' | 'medium' | 'fast' | 'none';\n    /**\n     * The position of the Backdrop.\n     * @default 'fixed'\n     */\n    position?: 'absolute' | 'fixed';\n    /** Accepts a callback that gets invoked before opening Backdrop. */\n    onBeforeTransitionIn?: () => void;\n    /** Accepts a callback that gets invoked after opening Backdrop. */\n    onAfterTransitionIn?: () => void;\n    /** Accepts a callback that gets invoked before closing Backdrop. */\n    onBeforeTransitionOut?: () => void;\n    /** Accepts a callback that gets invoked after closing Backdrop */\n    onAfterTransitionOut?: () => void;\n  }\n>;\n\ntype BackdropPropsWithDefaults = PropsWithDefaults<\n  BackdropProps,\n  'open' | 'transitionSpeed' | 'alpha' | 'position'\n>;\n\nconst transitionSpeedToTheme = {\n  slow: 2,\n  medium: 1,\n  fast: 0.5,\n  none: 0\n} as const;\n\nexport const StyledBackdrop = styled(Flex)<BackdropPropsWithDefaults & { opacity: 0 | 1 }>(\n  props => {\n    const {\n      theme: { base }\n    } = props;\n    const { opacity, alpha, variant, position } = props;\n    const transitionDuration = `max(calc(${transitionSpeedToTheme[props.transitionSpeed]} * ${\n      base.animation.speed\n    }), 1ms)`;\n\n    return css`\n      position: ${position};\n      z-index: ${position === 'fixed' ? base['z-index'].backdrop : base['z-index'].popover + 1};\n      top: 0;\n      left: 0;\n      height: 100%;\n      width: 100%;\n      border-radius: inherit;\n      opacity: ${opacity};\n      transition-property: opacity;\n      transition-timing-function: ${props.theme.base.animation.timing.ease};\n      /* stylelint-disable declaration-block-no-duplicate-properties */\n      transition-duration: 1ms;\n      transition-duration: ${transitionDuration};\n      /* stylelint-enable declaration-block-no-duplicate-properties */\n\n      ${variant === 'dark' &&\n      css`\n        background: rgba(0, 0, 0, ${alpha});\n      `}\n\n      ${variant === 'light' &&\n      css`\n        background: rgba(255, 255, 255, ${alpha});\n      `}\n    `;\n  }\n);\n\nStyledBackdrop.defaultProps = defaultThemeProp;\n\ntype State = 'closed' | 'opening' | 'open' | 'closing';\n\nexport default withTestIds(\n  forwardRef<RefElement<BackdropProps>, PropsWithoutRef<BackdropProps>>(function Backdrop(\n    {\n      testId,\n      children,\n      container,\n      open = false,\n      variant = 'dark',\n      transitionSpeed = 'medium',\n      alpha = 0.6,\n      position = 'fixed',\n      onBeforeTransitionIn,\n      onAfterTransitionIn,\n      onBeforeTransitionOut,\n      onAfterTransitionOut,\n      ...restProps\n    },\n    ref\n  ) {\n    const testIds = useTestIds(testId, getBackdropTestIds);\n    const [state, setState] = useState<State>('closed');\n    const [backdropEl, setBackdropEl] = useElement<HTMLDivElement>();\n    const backdropRef = useConsolidatedRef(ref, setBackdropEl);\n\n    const onTransitionEnd = useCallback(\n      (e: TransitionEvent) => {\n        if (e.propertyName !== 'opacity' || e.target !== e.currentTarget) return;\n        let nextState: State;\n\n        if (state === 'closing') {\n          nextState = 'closed';\n          onAfterTransitionOut?.();\n        } else {\n          nextState = 'open';\n          onAfterTransitionIn?.();\n        }\n\n        setState(nextState);\n      },\n      [state, onAfterTransitionOut, onAfterTransitionIn]\n    );\n\n    useEffect(() => {\n      if (open) {\n        if (state === 'closed' || state === 'closing') {\n          onBeforeTransitionIn?.();\n          reflow();\n          setState('opening');\n        }\n      } else if (state === 'open' || state === 'opening') {\n        onBeforeTransitionOut?.();\n        setState('closing');\n      }\n    }, [open]);\n\n    // Using a separate effect instead of combined logic above as it seems more intuitive to mentally manage.\n    useEffect(() => {\n      if (!backdropRef.current) return;\n      const opacity = window.getComputedStyle(backdropRef.current).opacity;\n      // If the opacity is already at the destination value, sync the state value.\n      if (state === 'closing' && opacity === '0') {\n        // Since the transition never ran, we have to pretend it did and call the callback.\n        // TODO: This maybe can be fixed with the animation api\n        onAfterTransitionOut?.();\n        setState('closed');\n      }\n      if (state === 'opening' && opacity === '1') {\n        // ditto, see above...\n        onAfterTransitionIn?.();\n        setState('open');\n      }\n    }, [state]);\n\n    return !open && state === 'closed' ? null : (\n      <Configuration portalTarget={backdropEl ?? undefined}>\n        <StyledBackdrop\n          data-testid={testIds.root}\n          container={{ justify: 'center', alignItems: 'center', ...container }}\n          transitionSpeed={transitionSpeed}\n          opacity={state === 'opening' || state === 'open' ? 1 : 0}\n          alpha={alpha}\n          variant={variant}\n          position={position}\n          onTransitionEnd={onTransitionEnd}\n          ref={backdropRef}\n          {...restProps}\n        >\n          {children}\n        </StyledBackdrop>\n      </Configuration>\n    );\n  }),\n  getBackdropTestIds\n);\n"]}

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

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

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

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

package/lib/components/Backdrop/Backdrop.test-ids.js

@@ -0,0 +1,3 @@
+import { createTestIds } from '../../utils';
+export const getBackdropTestIds = createTestIds('backdrop', []);
+//# sourceMappingURL=Backdrop.test-ids.js.map

package/lib/components/Backdrop/Backdrop.test-ids.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Backdrop.test-ids.js","sourceRoot":"","sources":["../../../src/components/Backdrop/Backdrop.test-ids.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAE5C,MAAM,CAAC,MAAM,kBAAkB,GAAG,aAAa,CAAC,UAAU,EAAE,EAAW,CAAC,CAAC","sourcesContent":["import { createTestIds } from '../../utils';\n\nexport const getBackdropTestIds = createTestIds('backdrop', [] as const);\n"]}

package/lib/components/Badges/Alert.d.ts

@@ -1,10 +1,14 @@
-import { FC } from 'react';
-import { ForwardProps, NoChildrenProp } from '../../types';
-export interface AlertProps extends NoChildrenProp {
+import type { NoChildrenProp, WithAttributes, TestIdProp } from '../../types';
+export type AlertProps = WithAttributes<'div', NoChildrenProp & TestIdProp & {
     /** Determines the color to render the Badge as. This color is derived from the Theme. */
     variant: 'urgent' | 'success';
-}
-export declare const StyledAlert: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, AlertProps, never>;
-declare const Alert: FC<ForwardProps & AlertProps>;
-export default Alert;
+}>;
+export declare const StyledAlert: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, NoChildrenProp & TestIdProp<undefined> & {
+    /** Determines the color to render the Badge as. This color is derived from the Theme. */
+    variant: 'urgent' | 'success';
+} & Omit<import("../../types").Attributes<"div">, "children" | "testId" | "variant">, never>;
+declare const _default: import("react").ForwardRefExoticComponent<Omit<AlertProps, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
+    getTestIds: (testIdProp?: string | undefined) => import("../../types").TestIdsRecord<readonly []>;
+};
+export default _default;
 //# sourceMappingURL=Alert.d.ts.map

package/lib/components/Badges/Alert.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../../src/components/Badges/Alert.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAoC,MAAM,OAAO,CAAC;AAG7D,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAG3D,MAAM,WAAW,UAAW,SAAQ,cAAc;IAChD,yFAAyF;IACzF,OAAO,EAAE,QAAQ,GAAG,SAAS,CAAC;CAC/B;AAED,eAAO,MAAM,WAAW,iHAYtB,CAAC;AAIH,QAAA,MAAM,KAAK,EAAE,EAAE,CAAC,YAAY,GAAG,UAAU,CAMvC,CAAC;AAEH,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../../src/components/Badges/Alert.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,cAAc,EAAc,cAAc,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAO1F,MAAM,MAAM,UAAU,GAAG,cAAc,CACrC,KAAK,EACL,cAAc,GACZ,UAAU,GAAG;IACX,yFAAyF;IACzF,OAAO,EAAE,QAAQ,GAAG,SAAS,CAAC;CAC/B,CACJ,CAAC;AAEF,eAAO,MAAM,WAAW;IALlB,yFAAyF;aAChF,QAAQ,GAAG,SAAS;4FAgBjC,CAAC;;;;AAIH,wBAUE"}

package/lib/components/Badges/Alert.js

@@ -2,6 +2,9 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 import { defaultThemeProp } from '../../theme';
+import { useTestIds } from '../../hooks';
+import { withTestIds } from '../../utils';
+import { getAlertTestIds } from './Badges.test-ids';
 export const StyledAlert = styled.div(props => {
     const alerts = props.theme.components.badges.alert;
     const { background } = alerts[props.variant];
@@ -16,9 +19,8 @@ export const StyledAlert = styled.div(props => {
   `;
 });
 StyledAlert.defaultProps = defaultThemeProp;
-const Alert = forwardRef(function Alert(props, ref) {
-    const { variant, ...restProps } = props;
-    return _jsx(StyledAlert, { ...restProps, variant: variant, ref: ref });
-});
-export default Alert;
+export default withTestIds(forwardRef(function Alert({ testId, variant, ...restProps }, ref) {
+    const testIds = useTestIds(testId, getAlertTestIds);
+    return _jsx(StyledAlert, { "data-testid": testIds.root, ...restProps, variant: variant, ref: ref });
+}), getAlertTestIds);
 //# sourceMappingURL=Alert.js.map

package/lib/components/Badges/Alert.js.map

@@ -1 +1 @@
-{"version":3,"file":"Alert.js","sourceRoot":"","sources":["../../../src/components/Badges/Alert.tsx"],"names":[],"mappings":";AAAA,OAAO,EAA4B,UAAU,EAAE,MAAM,OAAO,CAAC;AAC7D,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAGhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAO/C,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,GAAG,CAAa,KAAK,CAAC,EAAE;IACxD,MAAM,MAAM,GAAG,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,KAAK,CAAC;IACnD,MAAM,EAAE,UAAU,EAAE,GAAG,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IAC7C,MAAM,EAAE,cAAc,EAAE,WAAW,EAAE,GAAG,MAAM,CAAC,IAAI,CAAC;IACpD,OAAO,GAAG,CAAA;kBACM,UAAU;8BACE,WAAW;;;;;GAKtC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,WAAW,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE5C,MAAM,KAAK,GAAkC,UAAU,CAAC,SAAS,KAAK,CACpE,KAAkC,EAClC,GAAwB;IAExB,MAAM,EAAE,OAAO,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IACxC,OAAO,KAAC,WAAW,OAAK,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,GAAG,GAAI,CAAC;AACpE,CAAC,CAAC,CAAC;AAEH,eAAe,KAAK,CAAC","sourcesContent":["import { FC, PropsWithoutRef, Ref, forwardRef } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { ForwardProps, NoChildrenProp } from '../../types';\nimport { defaultThemeProp } from '../../theme';\n\nexport interface AlertProps extends NoChildrenProp {\n  /** Determines the color to render the Badge as. This color is derived from the Theme. */\n  variant: 'urgent' | 'success';\n}\n\nexport const StyledAlert = styled.div<AlertProps>(props => {\n  const alerts = props.theme.components.badges.alert;\n  const { background } = alerts[props.variant];\n  const { 'border-color': borderColor } = alerts.base;\n  return css`\n    background: ${background};\n    border: 0.0625rem solid ${borderColor};\n    border-radius: 100%;\n    display: inline-block;\n    height: 0.625rem;\n    width: 0.625rem;\n  `;\n});\n\nStyledAlert.defaultProps = defaultThemeProp;\n\nconst Alert: FC<ForwardProps & AlertProps> = forwardRef(function Alert(\n  props: PropsWithoutRef<AlertProps>,\n  ref: Ref<HTMLDivElement>\n) {\n  const { variant, ...restProps } = props;\n  return <StyledAlert {...restProps} variant={variant} ref={ref} />;\n});\n\nexport default Alert;\n"]}
+{"version":3,"file":"Alert.js","sourceRoot":"","sources":["../../../src/components/Badges/Alert.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAGhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AACzC,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE1C,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAWpD,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,GAAG,CAAa,KAAK,CAAC,EAAE;IACxD,MAAM,MAAM,GAAG,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,KAAK,CAAC;IACnD,MAAM,EAAE,UAAU,EAAE,GAAG,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IAC7C,MAAM,EAAE,cAAc,EAAE,WAAW,EAAE,GAAG,MAAM,CAAC,IAAI,CAAC;IACpD,OAAO,GAAG,CAAA;kBACM,UAAU;8BACE,WAAW;;;;;GAKtC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,WAAW,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE5C,eAAe,WAAW,CACxB,UAAU,CAAsD,SAAS,KAAK,CAC5E,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,SAAS,EAAE,EACjC,GAAG;IAEH,MAAM,OAAO,GAAG,UAAU,CAAC,MAAM,EAAE,eAAe,CAAC,CAAC;IAEpD,OAAO,KAAC,WAAW,mBAAc,OAAO,CAAC,IAAI,KAAM,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,GAAG,GAAI,CAAC;AAC/F,CAAC,CAAC,EACF,eAAe,CAChB,CAAC","sourcesContent":["import { forwardRef } from 'react';\nimport type { PropsWithoutRef } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport type { NoChildrenProp, RefElement, WithAttributes, TestIdProp } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport { useTestIds } from '../../hooks';\nimport { withTestIds } from '../../utils';\n\nimport { getAlertTestIds } from './Badges.test-ids';\n\nexport type AlertProps = WithAttributes<\n  'div',\n  NoChildrenProp &\n    TestIdProp & {\n      /** Determines the color to render the Badge as. This color is derived from the Theme. */\n      variant: 'urgent' | 'success';\n    }\n>;\n\nexport const StyledAlert = styled.div<AlertProps>(props => {\n  const alerts = props.theme.components.badges.alert;\n  const { background } = alerts[props.variant];\n  const { 'border-color': borderColor } = alerts.base;\n  return css`\n    background: ${background};\n    border: 0.0625rem solid ${borderColor};\n    border-radius: 100%;\n    display: inline-block;\n    height: 0.625rem;\n    width: 0.625rem;\n  `;\n});\n\nStyledAlert.defaultProps = defaultThemeProp;\n\nexport default withTestIds(\n  forwardRef<RefElement<AlertProps>, PropsWithoutRef<AlertProps>>(function Alert(\n    { testId, variant, ...restProps },\n    ref\n  ) {\n    const testIds = useTestIds(testId, getAlertTestIds);\n\n    return <StyledAlert data-testid={testIds.root} {...restProps} variant={variant} ref={ref} />;\n  }),\n  getAlertTestIds\n);\n"]}

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

@@ -0,0 +1,7 @@
+export declare const getAlertTestIds: (testIdProp?: string | undefined) => import("../..").TestIdsRecord<readonly []>;
+export declare const getCountTestIds: (testIdProp?: string | undefined) => import("../..").TestIdsRecord<readonly []>;
+export declare const getKeyboardTestIds: (testIdProp?: string | undefined) => import("../..").TestIdsRecord<readonly []>;
+export declare const getSelectableTestIds: (testIdProp?: string | undefined) => import("../..").TestIdsRecord<readonly ["remove"]>;
+export declare const getStatusTestIds: (testIdProp?: string | undefined) => import("../..").TestIdsRecord<readonly []>;
+export declare const getTagTestIds: (testIdProp?: string | undefined) => import("../..").TestIdsRecord<readonly []>;
+//# sourceMappingURL=Badges.test-ids.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Badges.test-ids.d.ts","sourceRoot":"","sources":["../../../src/components/Badges/Badges.test-ids.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,eAAe,iFAAsC,CAAC;AACnE,eAAO,MAAM,eAAe,iFAAsC,CAAC;AACnE,eAAO,MAAM,kBAAkB,iFAAyC,CAAC;AACzE,eAAO,MAAM,oBAAoB,yFAAmD,CAAC;AACrF,eAAO,MAAM,gBAAgB,iFAAuC,CAAC;AACrE,eAAO,MAAM,aAAa,iFAAoC,CAAC"}

package/lib/components/Badges/Badges.test-ids.js

@@ -0,0 +1,8 @@
+import { createTestIds } from '../../utils';
+export const getAlertTestIds = createTestIds('alert', []);
+export const getCountTestIds = createTestIds('count', []);
+export const getKeyboardTestIds = createTestIds('keyboard', []);
+export const getSelectableTestIds = createTestIds('selectable', ['remove']);
+export const getStatusTestIds = createTestIds('status', []);
+export const getTagTestIds = createTestIds('tag', []);
+//# sourceMappingURL=Badges.test-ids.js.map

package/lib/components/Badges/Badges.test-ids.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badges.test-ids.js","sourceRoot":"","sources":["../../../src/components/Badges/Badges.test-ids.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAE5C,MAAM,CAAC,MAAM,eAAe,GAAG,aAAa,CAAC,OAAO,EAAE,EAAW,CAAC,CAAC;AACnE,MAAM,CAAC,MAAM,eAAe,GAAG,aAAa,CAAC,OAAO,EAAE,EAAW,CAAC,CAAC;AACnE,MAAM,CAAC,MAAM,kBAAkB,GAAG,aAAa,CAAC,UAAU,EAAE,EAAW,CAAC,CAAC;AACzE,MAAM,CAAC,MAAM,oBAAoB,GAAG,aAAa,CAAC,YAAY,EAAE,CAAC,QAAQ,CAAU,CAAC,CAAC;AACrF,MAAM,CAAC,MAAM,gBAAgB,GAAG,aAAa,CAAC,QAAQ,EAAE,EAAW,CAAC,CAAC;AACrE,MAAM,CAAC,MAAM,aAAa,GAAG,aAAa,CAAC,KAAK,EAAE,EAAW,CAAC,CAAC","sourcesContent":["import { createTestIds } from '../../utils';\n\nexport const getAlertTestIds = createTestIds('alert', [] as const);\nexport const getCountTestIds = createTestIds('count', [] as const);\nexport const getKeyboardTestIds = createTestIds('keyboard', [] as const);\nexport const getSelectableTestIds = createTestIds('selectable', ['remove'] as const);\nexport const getStatusTestIds = createTestIds('status', [] as const);\nexport const getTagTestIds = createTestIds('tag', [] as const);\n"]}

package/lib/components/Badges/Count.d.ts

@@ -1,17 +1,18 @@
-import { FC } from 'react';
-import { ForwardProps, PropsWithDefaults } from '../../types';
-export interface CountProps {
+import type { PropsWithDefaults, WithAttributes, TestIdProp } from '../../types';
+export type CountProps = WithAttributes<'span', TestIdProp & {
     /** Determines the color to render the Badge as. This color is derived from the Theme.
      * @default 'default'
      */
     variant?: 'default' | 'urgent';
     /** The count to be displayed within the Badge. */
     children: number | null;
-}
+}>;
 type CountPropsWithDefaults = PropsWithDefaults<CountProps, 'variant'>;
 export declare const StyledCount: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, Pick<CountPropsWithDefaults, "variant"> & {
     children: string;
 }, never>;
-declare const Count: FC<ForwardProps & CountProps>;
-export default Count;
+declare const _default: import("react").ForwardRefExoticComponent<Omit<CountProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>> & {
+    getTestIds: (testIdProp?: string | undefined) => import("../../types").TestIdsRecord<readonly []>;
+};
+export default _default;
 //# sourceMappingURL=Count.d.ts.map

package/lib/components/Badges/Count.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Count.d.ts","sourceRoot":"","sources":["../../../src/components/Badges/Count.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAoC,MAAM,OAAO,CAAC;AAM7D,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAG9D,MAAM,WAAW,UAAU;IACzB;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC/B,kDAAkD;IAClD,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;CACzB;AAED,KAAK,sBAAsB,GAAG,iBAAiB,CAAC,UAAU,EAAE,SAAS,CAAC,CAAC;AAEvE,eAAO,MAAM,WAAW;cACgC,MAAM;SA4B5D,CAAC;AAwCH,QAAA,MAAM,KAAK,EAAE,EAAE,CAAC,YAAY,GAAG,UAAU,CAUvC,CAAC;AAEH,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Count.d.ts","sourceRoot":"","sources":["../../../src/components/Badges/Count.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,iBAAiB,EAAc,cAAc,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAM7F,MAAM,MAAM,UAAU,GAAG,cAAc,CACrC,MAAM,EACN,UAAU,GAAG;IACX;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC/B,kDAAkD;IAClD,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;CACzB,CACF,CAAC;AAEF,KAAK,sBAAsB,GAAG,iBAAiB,CAAC,UAAU,EAAE,SAAS,CAAC,CAAC;AAEvE,eAAO,MAAM,WAAW;cACgC,MAAM;SA4B5D,CAAC;;;;AAwCH,wBAcE"}

package/lib/components/Badges/Count.js

@@ -3,8 +3,10 @@ import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 import { rgba } from 'polished';
 import { defaultThemeProp } from '../../theme';
-import { tryCatch } from '../../utils';
+import { tryCatch, withTestIds } from '../../utils';
 import { calculateFontSize } from '../../styles';
+import { useTestIds } from '../../hooks';
+import { getCountTestIds } from './Badges.test-ids';
 export const StyledCount = styled.span(({ theme, variant, children }) => {
     const { foreground, background } = theme.components.badges.count[variant];
     const shadow = tryCatch(() => rgba(foreground, 0.1));
@@ -68,9 +70,8 @@ const formatValue = (val) => {
         return `${val}`;
     return `${val < 0 ? '-' : ''}${truncateValue(absVal)}`;
 };
-const Count = forwardRef(function Count(props, ref) {
-    const { variant = 'default', children, ...restProps } = props;
-    return Number.isInteger(children) ? (_jsx(StyledCount, { variant: variant, ...restProps, ref: ref, children: formatValue(children) })) : null;
-});
-export default Count;
+export default withTestIds(forwardRef(function Count({ testId, variant = 'default', children, ...restProps }, ref) {
+    const testIds = useTestIds(testId, getCountTestIds);
+    return Number.isInteger(children) ? (_jsx(StyledCount, { "data-testid": testIds.root, variant: variant, ...restProps, ref: ref, children: formatValue(children) })) : null;
+}), getCountTestIds);
 //# sourceMappingURL=Count.js.map

package/lib/components/Badges/Count.js.map

@@ -1 +1 @@
-{"version":3,"file":"Count.js","sourceRoot":"","sources":["../../../src/components/Badges/Count.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FC, PropsWithoutRef, Ref, forwardRef } from 'react';\nimport styled, { css } from 'styled-components';\nimport { rgba } from 'polished';\n\nimport { defaultThemeProp } from '../../theme';\nimport { tryCatch } from '../../utils';\nimport { ForwardProps, PropsWithDefaults } from '../../types';\nimport { calculateFontSize } from '../../styles';\n\nexport interface CountProps {\n  /** Determines the color to render the Badge as. This color is derived from the Theme.\n   * @default 'default'\n   */\n  variant?: 'default' | 'urgent';\n  /** The count to be displayed within the Badge. */\n  children: number | null;\n}\n\ntype CountPropsWithDefaults = PropsWithDefaults<CountProps, 'variant'>;\n\nexport const StyledCount = styled.span<\n  Pick<CountPropsWithDefaults, 'variant'> & { children: string }\n>(({ theme, variant, children }) => {\n  const { foreground, background } = theme.components.badges.count[variant];\n\n  const shadow = tryCatch(() => rgba(foreground, 0.1));\n  const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n  return css`\n    display: inline-block;\n    block-size: 1rem;\n    flex-shrink: 0;\n    border-radius: calc(9999 * ${theme.base['border-radius']});\n    color: ${foreground};\n    background-color: ${background};\n    box-shadow: inset 0 0 0 0.0625rem ${shadow};\n    font-size: ${fontSize.xxs};\n    font-weight: ${theme.base['font-weight'].bold};\n    line-height: 1rem;\n    text-align: center;\n\n    ${children.length === 1\n      ? css`\n          aspect-ratio: 1 / 1;\n        `\n      : css`\n          padding-inline: ${theme.base.spacing};\n        `}\n  `;\n});\n\nStyledCount.defaultProps = defaultThemeProp;\n\n// Replace this with Intl.NumberFormat when roundingMode is supported.\n/* eslint-disable yoda */\nconst getLabel = (val: number): string => {\n  if (val < 1_000) return '';\n  if (1_000 <= val && val < 1_000_000) return 'K';\n  if (1_000_000 <= val && val < 1_000_000_000) return 'M';\n  if (1_000_000_000 <= val && val < 1_000_000_000_000) return 'B';\n  if (1_000_000_000_000 <= val && val < 1_000_000_000_000_000) return 'T';\n  return '';\n};\n/* eslint-enable yoda */\n\nconst truncateValue = (val: number): string => {\n  for (let magnitude = 3; magnitude < 15; magnitude += 3) {\n    if (val < 10 ** (magnitude + 1)) {\n      return `${`${val}`.slice(0, 1)}.${`${val}`.slice(1, 2)}${getLabel(val)}`;\n    }\n    if (val < 10 ** (magnitude + 2)) {\n      return `${`${val}`.slice(0, 2)}${getLabel(val)}`;\n    }\n    if (val < 10 ** (magnitude + 3)) {\n      return `${`${val}`.slice(0, 3)}${getLabel(val)}`;\n    }\n  }\n\n  return '999T+';\n};\n\nconst formatValue = (val: number): string => {\n  const absVal = Math.abs(val);\n\n  if (absVal < 1_000) return `${val}`;\n\n  return `${val < 0 ? '-' : ''}${truncateValue(absVal)}`;\n};\n\nconst Count: FC<ForwardProps & CountProps> = forwardRef(function Count(\n  props: PropsWithoutRef<CountProps>,\n  ref: Ref<HTMLSpanElement>\n) {\n  const { variant = 'default', children, ...restProps } = props;\n  return Number.isInteger(children) ? (\n    <StyledCount variant={variant} {...restProps} ref={ref}>\n      {formatValue(children as number)}\n    </StyledCount>\n  ) : null;\n});\n\nexport default Count;\n"]}
+{"version":3,"file":"Count.js","sourceRoot":"","sources":["../../../src/components/Badges/Count.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAEhC,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAEpD,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AACjD,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAEzC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAgBpD,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,IAAI,CAEpC,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,EAAE;IACjC,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,GAAG,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IAE1E,MAAM,MAAM,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC,CAAC;IACrD,MAAM,QAAQ,GAAG,iBAAiB,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;IAEtF,OAAO,GAAG,CAAA;;;;iCAIqB,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;aAC/C,UAAU;wBACC,UAAU;wCACM,MAAM;iBAC7B,QAAQ,CAAC,GAAG;mBACV,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,IAAI;;;;MAI3C,QAAQ,CAAC,MAAM,KAAK,CAAC;QACrB,CAAC,CAAC,GAAG,CAAA;;SAEF;QACH,CAAC,CAAC,GAAG,CAAA;4BACiB,KAAK,CAAC,IAAI,CAAC,OAAO;SACrC;GACN,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,WAAW,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE5C,sEAAsE;AACtE,yBAAyB;AACzB,MAAM,QAAQ,GAAG,CAAC,GAAW,EAAU,EAAE;IACvC,IAAI,GAAG,GAAG,IAAK;QAAE,OAAO,EAAE,CAAC;IAC3B,IAAI,IAAK,IAAI,GAAG,IAAI,GAAG,GAAG,OAAS;QAAE,OAAO,GAAG,CAAC;IAChD,IAAI,OAAS,IAAI,GAAG,IAAI,GAAG,GAAG,UAAa;QAAE,OAAO,GAAG,CAAC;IACxD,IAAI,UAAa,IAAI,GAAG,IAAI,GAAG,GAAG,aAAiB;QAAE,OAAO,GAAG,CAAC;IAChE,IAAI,aAAiB,IAAI,GAAG,IAAI,GAAG,GAAG,gBAAqB;QAAE,OAAO,GAAG,CAAC;IACxE,OAAO,EAAE,CAAC;AACZ,CAAC,CAAC;AACF,wBAAwB;AAExB,MAAM,aAAa,GAAG,CAAC,GAAW,EAAU,EAAE;IAC5C,KAAK,IAAI,SAAS,GAAG,CAAC,EAAE,SAAS,GAAG,EAAE,EAAE,SAAS,IAAI,CAAC,EAAE;QACtD,IAAI,GAAG,GAAG,EAAE,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC,EAAE;YAC/B,OAAO,GAAG,GAAG,GAAG,EAAE,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,GAAG,GAAG,EAAE,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC;SAC1E;QACD,IAAI,GAAG,GAAG,EAAE,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC,EAAE;YAC/B,OAAO,GAAG,GAAG,GAAG,EAAE,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC;SAClD;QACD,IAAI,GAAG,GAAG,EAAE,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC,EAAE;YAC/B,OAAO,GAAG,GAAG,GAAG,EAAE,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC;SAClD;KACF;IAED,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,WAAW,GAAG,CAAC,GAAW,EAAU,EAAE;IAC1C,MAAM,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IAE7B,IAAI,MAAM,GAAG,IAAK;QAAE,OAAO,GAAG,GAAG,EAAE,CAAC;IAEpC,OAAO,GAAG,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,aAAa,CAAC,MAAM,CAAC,EAAE,CAAC;AACzD,CAAC,CAAC;AAEF,eAAe,WAAW,CACxB,UAAU,CAAsD,SAAS,KAAK,CAC5E,EAAE,MAAM,EAAE,OAAO,GAAG,SAAS,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAE,EACvD,GAAG;IAEH,MAAM,OAAO,GAAG,UAAU,CAAC,MAAM,EAAE,eAAe,CAAC,CAAC;IAEpD,OAAO,MAAM,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAClC,KAAC,WAAW,mBAAc,OAAO,CAAC,IAAI,EAAE,OAAO,EAAE,OAAO,KAAM,SAAS,EAAE,GAAG,EAAE,GAAG,YAC9E,WAAW,CAAC,QAAkB,CAAC,GACpB,CACf,CAAC,CAAC,CAAC,IAAI,CAAC;AACX,CAAC,CAAC,EACF,eAAe,CAChB,CAAC","sourcesContent":["import { forwardRef } from 'react';\nimport type { PropsWithoutRef } from 'react';\nimport styled, { css } from 'styled-components';\nimport { rgba } from 'polished';\n\nimport { defaultThemeProp } from '../../theme';\nimport { tryCatch, withTestIds } from '../../utils';\nimport type { PropsWithDefaults, RefElement, WithAttributes, TestIdProp } from '../../types';\nimport { calculateFontSize } from '../../styles';\nimport { useTestIds } from '../../hooks';\n\nimport { getCountTestIds } from './Badges.test-ids';\n\nexport type CountProps = WithAttributes<\n  'span',\n  TestIdProp & {\n    /** Determines the color to render the Badge as. This color is derived from the Theme.\n     * @default 'default'\n     */\n    variant?: 'default' | 'urgent';\n    /** The count to be displayed within the Badge. */\n    children: number | null;\n  }\n>;\n\ntype CountPropsWithDefaults = PropsWithDefaults<CountProps, 'variant'>;\n\nexport const StyledCount = styled.span<\n  Pick<CountPropsWithDefaults, 'variant'> & { children: string }\n>(({ theme, variant, children }) => {\n  const { foreground, background } = theme.components.badges.count[variant];\n\n  const shadow = tryCatch(() => rgba(foreground, 0.1));\n  const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n  return css`\n    display: inline-block;\n    block-size: 1rem;\n    flex-shrink: 0;\n    border-radius: calc(9999 * ${theme.base['border-radius']});\n    color: ${foreground};\n    background-color: ${background};\n    box-shadow: inset 0 0 0 0.0625rem ${shadow};\n    font-size: ${fontSize.xxs};\n    font-weight: ${theme.base['font-weight'].bold};\n    line-height: 1rem;\n    text-align: center;\n\n    ${children.length === 1\n      ? css`\n          aspect-ratio: 1 / 1;\n        `\n      : css`\n          padding-inline: ${theme.base.spacing};\n        `}\n  `;\n});\n\nStyledCount.defaultProps = defaultThemeProp;\n\n// Replace this with Intl.NumberFormat when roundingMode is supported.\n/* eslint-disable yoda */\nconst getLabel = (val: number): string => {\n  if (val < 1_000) return '';\n  if (1_000 <= val && val < 1_000_000) return 'K';\n  if (1_000_000 <= val && val < 1_000_000_000) return 'M';\n  if (1_000_000_000 <= val && val < 1_000_000_000_000) return 'B';\n  if (1_000_000_000_000 <= val && val < 1_000_000_000_000_000) return 'T';\n  return '';\n};\n/* eslint-enable yoda */\n\nconst truncateValue = (val: number): string => {\n  for (let magnitude = 3; magnitude < 15; magnitude += 3) {\n    if (val < 10 ** (magnitude + 1)) {\n      return `${`${val}`.slice(0, 1)}.${`${val}`.slice(1, 2)}${getLabel(val)}`;\n    }\n    if (val < 10 ** (magnitude + 2)) {\n      return `${`${val}`.slice(0, 2)}${getLabel(val)}`;\n    }\n    if (val < 10 ** (magnitude + 3)) {\n      return `${`${val}`.slice(0, 3)}${getLabel(val)}`;\n    }\n  }\n\n  return '999T+';\n};\n\nconst formatValue = (val: number): string => {\n  const absVal = Math.abs(val);\n\n  if (absVal < 1_000) return `${val}`;\n\n  return `${val < 0 ? '-' : ''}${truncateValue(absVal)}`;\n};\n\nexport default withTestIds(\n  forwardRef<RefElement<CountProps>, PropsWithoutRef<CountProps>>(function Count(\n    { testId, variant = 'default', children, ...restProps },\n    ref\n  ) {\n    const testIds = useTestIds(testId, getCountTestIds);\n\n    return Number.isInteger(children) ? (\n      <StyledCount data-testid={testIds.root} variant={variant} {...restProps} ref={ref}>\n        {formatValue(children as number)}\n      </StyledCount>\n    ) : null;\n  }),\n  getCountTestIds\n);\n"]}

package/lib/components/Badges/Keyboard.d.ts

@@ -1,9 +1,10 @@
-import { FunctionComponent } from 'react';
-import { ForwardProps, NoChildrenProp } from '../../types';
+import type { NoChildrenProp, WithAttributes, TestIdProp } from '../../types';
 export declare const StyledKeyboard: import("styled-components").StyledComponent<"kbd", import("styled-components").DefaultTheme, {}, never>;
-export interface KeyboardProps extends NoChildrenProp {
+export type KeyboardProps = WithAttributes<'kbd', NoChildrenProp & TestIdProp & {
     keyName: string;
-}
-declare const Keyboard: FunctionComponent<KeyboardProps & ForwardProps>;
-export default Keyboard;
+}>;
+declare const _default: import("react").ForwardRefExoticComponent<Omit<KeyboardProps, "ref"> & import("react").RefAttributes<HTMLElement>> & {
+    getTestIds: (testIdProp?: string | undefined) => import("../../types").TestIdsRecord<readonly []>;
+};
+export default _default;
 //# sourceMappingURL=Keyboard.d.ts.map

package/lib/components/Badges/Keyboard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Keyboard.d.ts","sourceRoot":"","sources":["../../../src/components/Badges/Keyboard.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAK1C,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AA8B3D,eAAO,MAAM,cAAc,yGA+B1B,CAAC;AAGF,MAAM,WAAW,aAAc,SAAQ,cAAc;IACnD,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,QAAA,MAAM,QAAQ,EAAE,iBAAiB,CAAC,aAAa,GAAG,YAAY,CAW7D,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Keyboard.d.ts","sourceRoot":"","sources":["../../../src/components/Badges/Keyboard.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,cAAc,EAAc,cAAc,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAkC1F,eAAO,MAAM,cAAc,yGA+B1B,CAAC;AAGF,MAAM,MAAM,aAAa,GAAG,cAAc,CACxC,KAAK,EACL,cAAc,GAAG,UAAU,GAAG;IAAE,OAAO,EAAE,MAAM,CAAA;CAAE,CAClD,CAAC;;;;AAEF,wBAkBE"}

package/lib/components/Badges/Keyboard.js

@@ -1,7 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 import { defaultThemeProp } from '../../theme';
 import useOS from '../../hooks/useOS';
+import { useTestIds } from '../../hooks';
+import { withTestIds } from '../../utils';
+import { getKeyboardTestIds } from './Badges.test-ids';
 const osxKeyMapper = {
     Command: '⌘',
     Alt: '⌥',
@@ -50,12 +54,12 @@ export const StyledKeyboard = styled.kbd(({ theme: { base, components: { text: {
     `;
 });
 StyledKeyboard.defaultProps = defaultThemeProp;
-const Keyboard = ({ keyName, ...restProps }) => {
+export default withTestIds(forwardRef(function Keyboard({ testId, keyName, ...restProps }, ref) {
     const { windows: isWindows } = useOS();
-    return (_jsx(StyledKeyboard, { ...restProps, "aria-label": keyName, children: (isWindows && windowsKeyMapper[keyName]) ||
+    const testIds = useTestIds(testId, getKeyboardTestIds);
+    return (_jsx(StyledKeyboard, { "data-testid": testIds.root, ...restProps, "aria-label": keyName, ref: ref, children: (isWindows && windowsKeyMapper[keyName]) ||
             osxKeyMapper[keyName] ||
             generalKeyMapper[keyName] ||
             keyName }));
-};
-export default Keyboard;
+}), getKeyboardTestIds);
 //# sourceMappingURL=Keyboard.js.map