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

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

@@ -37,11 +37,11 @@ export type BackdropProps = WithAttributes<'div', TestIdProp & {
     /** Accepts a callback that gets invoked after closing Backdrop */
     onAfterTransitionOut?: () => void;
 }>;
-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">> & {
+export declare const StyledBackdrop: import("styled-components").StyledComponent<import("../../types").ForwardRefForwardPropsComponent<FlexProps>, import("styled-components").DefaultTheme, Pick<BackdropProps, "hidden" | "color" | "content" | "style" | "translate" | "prefix" | "slot" | "title" | "ref" | "suppressHydrationWarning" | "className" | "id" | "lang" | "role" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "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-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "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" | "onResize" | "onResizeCapture" | "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" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "accessKey" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "nonce" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "testId" | "variant" | "container" | "onBeforeTransitionIn" | "onAfterTransitionIn" | "onBeforeTransitionOut" | "onAfterTransitionOut"> & Required<Pick<BackdropProps, "alpha" | "open" | "position" | "transitionSpeed">> & {
     opacity: 0 | 1;
 }, never>;
 declare const _default: import("react").ForwardRefExoticComponent<Omit<BackdropProps, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
-    getTestIds: (testIdProp?: string | null | undefined) => import("../../types").TestIdsRecord<readonly []>;
+    getTestIds: (testIdProp?: TestIdProp["testId"]) => import("../../types").TestIdsRecord<readonly []>;
 };
 export default _default;
 //# sourceMappingURL=Backdrop.d.ts.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 { 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"]}
+{"version":3,"file":"Backdrop.js","sourceRoot":"","sources":["../../../src/components/Backdrop/Backdrop.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAErE,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAQlD,OAAO,aAAa,MAAM,kBAAkB,CAAC;AAC7C,OAAO,IAAI,MAAM,SAAS,CAAC;AAE3B,OAAO,EAAE,kBAAkB,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAEzE,OAAO,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAgDzD,MAAM,sBAAsB,GAAG;IAC7B,IAAI,EAAE,CAAC;IACP,MAAM,EAAE,CAAC;IACT,IAAI,EAAE,GAAG;IACT,IAAI,EAAE,CAAC;CACC,CAAC;AAEX,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,IAAI,CAAC,CACxC,KAAK,CAAC,EAAE;IACN,MAAM,EACJ,KAAK,EAAE,EAAE,IAAI,EAAE,EAChB,GAAG,KAAK,CAAC;IACV,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IACpD,MAAM,kBAAkB,GAAG,YAAY,sBAAsB,CAAC,KAAK,CAAC,eAAe,CAAC,MAClF,IAAI,CAAC,SAAS,CAAC,KACjB,SAAS,CAAC;IAEV,OAAO,GAAG,CAAA;kBACI,QAAQ;iBACT,QAAQ,KAAK,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,OAAO,GAAG,CAAC;;;;;;iBAM7E,OAAO;;oCAEY,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI;;;6BAG7C,kBAAkB;;;QAGvC,OAAO,KAAK,MAAM;QACpB,GAAG,CAAA;oCAC2B,KAAK;OAClC;;QAEC,OAAO,KAAK,OAAO;QACrB,GAAG,CAAA;0CACiC,KAAK;OACxC;KACF,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,cAAc,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAI/C,eAAe,WAAW,CACxB,UAAU,CAA4D,SAAS,QAAQ,CACrF,EACE,MAAM,EACN,QAAQ,EACR,SAAS,EACT,IAAI,GAAG,KAAK,EACZ,OAAO,GAAG,MAAM,EAChB,eAAe,GAAG,QAAQ,EAC1B,KAAK,GAAG,GAAG,EACX,QAAQ,GAAG,OAAO,EAClB,oBAAoB,EACpB,mBAAmB,EACnB,qBAAqB,EACrB,oBAAoB,EACpB,GAAG,SAAS,EACb,EACD,GAAG;IAEH,MAAM,OAAO,GAAG,UAAU,CAAC,MAAM,EAAE,kBAAkB,CAAC,CAAC;IACvD,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAQ,QAAQ,CAAC,CAAC;IACpD,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,UAAU,EAAkB,CAAC;IACjE,MAAM,WAAW,GAAG,kBAAkB,CAAC,GAAG,EAAE,aAAa,CAAC,CAAC;IAE3D,MAAM,eAAe,GAAG,WAAW,CACjC,CAAC,CAAkB,EAAE,EAAE;QACrB,IAAI,CAAC,CAAC,YAAY,KAAK,SAAS,IAAI,CAAC,CAAC,MAAM,KAAK,CAAC,CAAC,aAAa;YAAE,OAAO;QACzE,IAAI,SAAgB,CAAC;QAErB,IAAI,KAAK,KAAK,SAAS,EAAE,CAAC;YACxB,SAAS,GAAG,QAAQ,CAAC;YACrB,oBAAoB,EAAE,EAAE,CAAC;QAC3B,CAAC;aAAM,CAAC;YACN,SAAS,GAAG,MAAM,CAAC;YACnB,mBAAmB,EAAE,EAAE,CAAC;QAC1B,CAAC;QAED,QAAQ,CAAC,SAAS,CAAC,CAAC;IACtB,CAAC,EACD,CAAC,KAAK,EAAE,oBAAoB,EAAE,mBAAmB,CAAC,CACnD,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,IAAI,EAAE,CAAC;YACT,IAAI,KAAK,KAAK,QAAQ,IAAI,KAAK,KAAK,SAAS,EAAE,CAAC;gBAC9C,oBAAoB,EAAE,EAAE,CAAC;gBACzB,MAAM,EAAE,CAAC;gBACT,QAAQ,CAAC,SAAS,CAAC,CAAC;YACtB,CAAC;QACH,CAAC;aAAM,IAAI,KAAK,KAAK,MAAM,IAAI,KAAK,KAAK,SAAS,EAAE,CAAC;YACnD,qBAAqB,EAAE,EAAE,CAAC;YAC1B,QAAQ,CAAC,SAAS,CAAC,CAAC;QACtB,CAAC;IACH,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAEX,yGAAyG;IACzG,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,WAAW,CAAC,OAAO;YAAE,OAAO;QACjC,MAAM,OAAO,GAAG,MAAM,CAAC,gBAAgB,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC;QACrE,4EAA4E;QAC5E,IAAI,KAAK,KAAK,SAAS,IAAI,OAAO,KAAK,GAAG,EAAE,CAAC;YAC3C,mFAAmF;YACnF,uDAAuD;YACvD,oBAAoB,EAAE,EAAE,CAAC;YACzB,QAAQ,CAAC,QAAQ,CAAC,CAAC;QACrB,CAAC;QACD,IAAI,KAAK,KAAK,SAAS,IAAI,OAAO,KAAK,GAAG,EAAE,CAAC;YAC3C,sBAAsB;YACtB,mBAAmB,EAAE,EAAE,CAAC;YACxB,QAAQ,CAAC,MAAM,CAAC,CAAC;QACnB,CAAC;IACH,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,OAAO,CAAC,IAAI,IAAI,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAC1C,KAAC,aAAa,IAAC,YAAY,EAAE,UAAU,IAAI,SAAS,YAClD,KAAC,cAAc,mBACA,OAAO,CAAC,IAAI,EACzB,SAAS,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAE,EACpE,eAAe,EAAE,eAAe,EAChC,OAAO,EAAE,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EACxD,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,eAAe,EAAE,eAAe,EAChC,GAAG,EAAE,WAAW,KACZ,SAAS,YAEZ,QAAQ,GACM,GACH,CACjB,CAAC;AACJ,CAAC,CAAC,EACF,kBAAkB,CACnB,CAAC","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

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

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

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

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

@@ -3,12 +3,9 @@ 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, 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>;
+export declare const StyledAlert: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, AlertProps, never>;
 declare const _default: import("react").ForwardRefExoticComponent<Omit<AlertProps, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
-    getTestIds: (testIdProp?: string | null | undefined) => import("../../types").TestIdsRecord<readonly []>;
+    getTestIds: (testIdProp?: TestIdProp["testId"]) => 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":"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"}
+{"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,iHAYtB,CAAC;;;;AAIH,wBAUE"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"Badges.test-ids.d.ts","sourceRoot":"","sources":["../../../src/components/Badges/Badges.test-ids.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,eAAe,wFAAsC,CAAC;AACnE,eAAO,MAAM,eAAe,wFAAsC,CAAC;AACnE,eAAO,MAAM,kBAAkB,wFAAyC,CAAC;AACzE,eAAO,MAAM,oBAAoB,gGAAmD,CAAC;AACrF,eAAO,MAAM,gBAAgB,wFAAuC,CAAC;AACrE,eAAO,MAAM,aAAa,wFAAoC,CAAC"}
+{"version":3,"file":"Badges.test-ids.d.ts","sourceRoot":"","sources":["../../../src/components/Badges/Badges.test-ids.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,eAAe,mGAAsC,CAAC;AACnE,eAAO,MAAM,eAAe,mGAAsC,CAAC;AACnE,eAAO,MAAM,kBAAkB,mGAAyC,CAAC;AACzE,eAAO,MAAM,oBAAoB,2GAAmD,CAAC;AACrF,eAAO,MAAM,gBAAgB,mGAAuC,CAAC;AACrE,eAAO,MAAM,aAAa,mGAAoC,CAAC"}

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

@@ -12,7 +12,7 @@ export declare const StyledCount: import("styled-components").StyledComponent<"s
     children: string;
 }, never>;
 declare const _default: import("react").ForwardRefExoticComponent<Omit<CountProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>> & {
-    getTestIds: (testIdProp?: string | null | undefined) => import("../../types").TestIdsRecord<readonly []>;
+    getTestIds: (testIdProp?: TestIdProp["testId"]) => import("../../types").TestIdsRecord<readonly []>;
 };
 export default _default;
 //# sourceMappingURL=Count.d.ts.map

package/lib/components/Badges/Count.js

@@ -37,15 +37,15 @@ StyledCount.defaultProps = defaultThemeProp;
 // Replace this with Intl.NumberFormat when roundingMode is supported.
 /* eslint-disable yoda */
 const getLabel = (val) => {
-    if (val < 1000)
+    if (val < 1_000)
         return '';
-    if (1000 <= val && val < 1000000)
+    if (1_000 <= val && val < 1_000_000)
         return 'K';
-    if (1000000 <= val && val < 1000000000)
+    if (1_000_000 <= val && val < 1_000_000_000)
         return 'M';
-    if (1000000000 <= val && val < 1000000000000)
+    if (1_000_000_000 <= val && val < 1_000_000_000_000)
         return 'B';
-    if (1000000000000 <= val && val < 1000000000000000)
+    if (1_000_000_000_000 <= val && val < 1_000_000_000_000_000)
         return 'T';
     return '';
 };
@@ -66,7 +66,7 @@ const truncateValue = (val) => {
 };
 const formatValue = (val) => {
     const absVal = Math.abs(val);
-    if (absVal < 1000)
+    if (absVal < 1_000)
         return `${val}`;
     return `${val < 0 ? '-' : ''}${truncateValue(absVal)}`;
 };

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 { 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"]}
+{"version":3,"file":"Count.js","sourceRoot":"","sources":["../../../src/components/Badges/Count.tsx"],"names":[],"mappings":"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","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

@@ -4,7 +4,7 @@ export type KeyboardProps = WithAttributes<'kbd', NoChildrenProp & TestIdProp &
     keyName: string;
 }>;
 declare const _default: import("react").ForwardRefExoticComponent<Omit<KeyboardProps, "ref"> & import("react").RefAttributes<HTMLElement>> & {
-    getTestIds: (testIdProp?: string | null | undefined) => import("../../types").TestIdsRecord<readonly []>;
+    getTestIds: (testIdProp?: TestIdProp["testId"]) => import("../../types").TestIdsRecord<readonly []>;
 };
 export default _default;
 //# sourceMappingURL=Keyboard.d.ts.map

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

@@ -16,7 +16,7 @@ export interface SelectableProps extends TestIdProp {
 }
 export declare const StyledSelectable: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {}, never>;
 declare const _default: FC<SelectableProps & ForwardProps> & {
-    getTestIds: (testIdProp?: string | null | undefined) => import("../../types").TestIdsRecord<readonly ["remove"]>;
+    getTestIds: (testIdProp?: TestIdProp["testId"]) => import("../../types").TestIdsRecord<readonly ["remove"]>;
 };
 export default _default;
 //# sourceMappingURL=Selection.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Selection.d.ts","sourceRoot":"","sources":["../../../src/components/Badges/Selection.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAE,UAAU,EAAwB,aAAa,EAAE,MAAM,OAAO,CAAC;AAIjF,OAAO,KAAK,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAa5D,MAAM,WAAW,eAAgB,SAAQ,UAAU;IACjD,sFAAsF;IACtF,EAAE,EAAE,MAAM,CAAC;IACX,gCAAgC;IAChC,QAAQ,EAAE,MAAM,CAAC;IACjB,gGAAgG;IAChG,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,iHAAiH;IACjH,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,sDAAsD;IACtD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACtC,gDAAgD;IAChD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;CAC1C;AAED,eAAO,MAAM,gBAAgB,4GAkE5B,CAAC;;;;AAkEF,wBAA6D"}
+{"version":3,"file":"Selection.d.ts","sourceRoot":"","sources":["../../../src/components/Badges/Selection.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAE,UAAU,EAAwB,aAAa,EAAE,MAAM,OAAO,CAAC;AAIjF,OAAO,KAAK,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAa5D,MAAM,WAAW,eAAgB,SAAQ,UAAU;IACjD,sFAAsF;IACtF,EAAE,EAAE,MAAM,CAAC;IACX,gCAAgC;IAChC,QAAQ,EAAE,MAAM,CAAC;IACjB,gGAAgG;IAChG,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,iHAAiH;IACjH,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,sDAAsD;IACtD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACtC,gDAAgD;IAChD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;CAC1C;AAED,eAAO,MAAM,gBAAgB,4GAmE5B,CAAC;;;;AAkEF,wBAA6D"}

package/lib/components/Badges/Selection.js

@@ -31,10 +31,11 @@ export const StyledSelectable = styled.button(({ theme: { base: { spacing, palet
       line-height: 1;
 
       span {
+        display: flex;
+        align-items: center;
         white-space: nowrap;
         text-overflow: ellipsis;
         overflow: hidden;
-        line-height: normal;
       }
 
       &:hover,

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

@@ -1 +1 @@
-{"version":3,"file":"Selection.js","sourceRoot":"","sources":["../../../src/components/Badges/Selection.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef } from 'react';\nimport type { FC, MouseEvent, PropsWithoutRef, Ref, KeyboardEvent } from 'react';\nimport styled, { css } from 'styled-components';\nimport { mix, readableColor, transparentize } from 'polished';\n\nimport type { ForwardProps, TestIdProp } from '../../types';\nimport { tryCatch, withTestIds } from '../../utils';\nimport BareButton, { StyledBareButton } from '../Button/BareButton';\nimport Icon, { registerIcon, StyledIcon } from '../Icon';\nimport * as timesIcon from '../Icon/icons/times.icon';\nimport { useConsolidatedRef, useI18n, useTestIds } from '../../hooks';\nimport { defaultThemeProp } from '../../theme';\nimport { readableHue } from '../../styles';\n\nimport { getSelectableTestIds } from './Badges.test-ids';\n\nregisterIcon(timesIcon);\n\nexport interface SelectableProps extends TestIdProp {\n  /** An id that is used by the onSelect and onRemove functions if they are provided. */\n  id: string;\n  /** The content of the Badge. */\n  children: string;\n  /** Takes an ID that represents the Badge. This function is called when the Badge is clicked. */\n  onSelect?: (id: string) => void;\n  /** Takes an ID that represents the Badge. This function is called when the Badge is closed by clicking the X. */\n  onRemove?: (id: string) => void;\n  /** Event handler called when the Badge is clicked. */\n  onClick?: (event: MouseEvent) => void;\n  /** Event handler fired on every keyup event. */\n  onKeyUp?: (event: KeyboardEvent) => void;\n}\n\nexport const StyledSelectable = styled.button(\n  ({\n    theme: {\n      base: { spacing, palette, 'border-radius': borderRadius }\n    }\n  }) => {\n    const { dark, 'primary-background': primaryBackground, interactive } = palette;\n\n    const displayBackground = tryCatch(() => mix(0.15, interactive, primaryBackground));\n    const hoverBorder = tryCatch(() => mix(0.3, interactive, primaryBackground));\n    const boxShadowColor = tryCatch(() => transparentize(0.45, dark));\n\n    const height = 1.125;\n    return css`\n      background-color: ${displayBackground};\n      border: 0 solid transparent;\n      border-radius: calc(${height} * ${borderRadius});\n      color: ${tryCatch(() => readableColor(displayBackground!))};\n      cursor: default;\n      display: inline-flex;\n      font-size: 0.75rem;\n      height: ${height}rem;\n      padding: 0 ${spacing};\n      max-width: 100%;\n      line-height: 1;\n\n      span {\n        white-space: nowrap;\n        text-overflow: ellipsis;\n        overflow: hidden;\n        line-height: normal;\n      }\n\n      &:hover,\n      &:focus,\n      [data-active-scope='true'] &[data-current='true'] {\n        color: ${tryCatch(() => readableHue(interactive, displayBackground!))};\n\n        ${StyledBareButton} {\n          color: inherit;\n        }\n      }\n\n      &:hover {\n        box-shadow: inset 0 0 0 0.0625rem ${hoverBorder};\n      }\n\n      &:active {\n        box-shadow: inset 0 0 0 0.0625rem ${interactive};\n      }\n\n      &:focus,\n      [data-active-scope='true'] &[data-current='true'] {\n        box-shadow:\n          0 0 0.5rem -0.125rem ${boxShadowColor},\n          inset 0 0 0 0.125rem ${interactive};\n        outline: none;\n      }\n\n      ${StyledIcon} {\n        margin-inline-start: ${spacing};\n        height: 1em;\n        width: 1em;\n      }\n    `;\n  }\n);\n\nStyledSelectable.defaultProps = defaultThemeProp;\n\nconst Selectable: FC<SelectableProps & ForwardProps> = forwardRef(function Selectable(\n  {\n    testId,\n    id,\n    children,\n    onSelect,\n    onRemove,\n    onClick,\n    onKeyUp,\n    ...restProps\n  }: PropsWithoutRef<SelectableProps>,\n  ref: Ref<HTMLButtonElement>\n) {\n  const consolidatedRef = useConsolidatedRef(ref);\n  const t = useI18n();\n  const testIds = useTestIds(testId, getSelectableTestIds);\n\n  const handleClick = (e: MouseEvent<HTMLButtonElement>) => {\n    onClick?.(e);\n    onSelect?.(id);\n  };\n\n  const handleCloseClick = (e: MouseEvent) => {\n    e.preventDefault();\n    e.stopPropagation();\n    onRemove?.(id);\n  };\n\n  const handleKeyUp = (e: KeyboardEvent) => {\n    onKeyUp?.(e);\n    if (e.key === 'Enter') {\n      onSelect?.(id);\n    }\n\n    if (e.key === 'Backspace' || e.key === 'Delete') {\n      onRemove?.(id);\n    }\n  };\n\n  return (\n    <StyledSelectable\n      data-testid={testIds.root}\n      ref={consolidatedRef}\n      onClick={handleClick}\n      onKeyUp={handleKeyUp}\n      {...restProps}\n    >\n      <span aria-hidden>{children}</span>\n      {onRemove && (\n        <BareButton\n          data-testid={testIds.remove}\n          tabIndex='-1'\n          onClick={handleCloseClick}\n          aria-label={t('remove_noun', [children])}\n        >\n          <Icon name='times' />\n        </BareButton>\n      )}\n    </StyledSelectable>\n  );\n});\n\nexport default withTestIds(Selectable, getSelectableTestIds);\n"]}
+{"version":3,"file":"Selection.js","sourceRoot":"","sources":["../../../src/components/Badges/Selection.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef } from 'react';\nimport type { FC, MouseEvent, PropsWithoutRef, Ref, KeyboardEvent } from 'react';\nimport styled, { css } from 'styled-components';\nimport { mix, readableColor, transparentize } from 'polished';\n\nimport type { ForwardProps, TestIdProp } from '../../types';\nimport { tryCatch, withTestIds } from '../../utils';\nimport BareButton, { StyledBareButton } from '../Button/BareButton';\nimport Icon, { registerIcon, StyledIcon } from '../Icon';\nimport * as timesIcon from '../Icon/icons/times.icon';\nimport { useConsolidatedRef, useI18n, useTestIds } from '../../hooks';\nimport { defaultThemeProp } from '../../theme';\nimport { readableHue } from '../../styles';\n\nimport { getSelectableTestIds } from './Badges.test-ids';\n\nregisterIcon(timesIcon);\n\nexport interface SelectableProps extends TestIdProp {\n  /** An id that is used by the onSelect and onRemove functions if they are provided. */\n  id: string;\n  /** The content of the Badge. */\n  children: string;\n  /** Takes an ID that represents the Badge. This function is called when the Badge is clicked. */\n  onSelect?: (id: string) => void;\n  /** Takes an ID that represents the Badge. This function is called when the Badge is closed by clicking the X. */\n  onRemove?: (id: string) => void;\n  /** Event handler called when the Badge is clicked. */\n  onClick?: (event: MouseEvent) => void;\n  /** Event handler fired on every keyup event. */\n  onKeyUp?: (event: KeyboardEvent) => void;\n}\n\nexport const StyledSelectable = styled.button(\n  ({\n    theme: {\n      base: { spacing, palette, 'border-radius': borderRadius }\n    }\n  }) => {\n    const { dark, 'primary-background': primaryBackground, interactive } = palette;\n\n    const displayBackground = tryCatch(() => mix(0.15, interactive, primaryBackground));\n    const hoverBorder = tryCatch(() => mix(0.3, interactive, primaryBackground));\n    const boxShadowColor = tryCatch(() => transparentize(0.45, dark));\n\n    const height = 1.125;\n    return css`\n      background-color: ${displayBackground};\n      border: 0 solid transparent;\n      border-radius: calc(${height} * ${borderRadius});\n      color: ${tryCatch(() => readableColor(displayBackground!))};\n      cursor: default;\n      display: inline-flex;\n      font-size: 0.75rem;\n      height: ${height}rem;\n      padding: 0 ${spacing};\n      max-width: 100%;\n      line-height: 1;\n\n      span {\n        display: flex;\n        align-items: center;\n        white-space: nowrap;\n        text-overflow: ellipsis;\n        overflow: hidden;\n      }\n\n      &:hover,\n      &:focus,\n      [data-active-scope='true'] &[data-current='true'] {\n        color: ${tryCatch(() => readableHue(interactive, displayBackground!))};\n\n        ${StyledBareButton} {\n          color: inherit;\n        }\n      }\n\n      &:hover {\n        box-shadow: inset 0 0 0 0.0625rem ${hoverBorder};\n      }\n\n      &:active {\n        box-shadow: inset 0 0 0 0.0625rem ${interactive};\n      }\n\n      &:focus,\n      [data-active-scope='true'] &[data-current='true'] {\n        box-shadow:\n          0 0 0.5rem -0.125rem ${boxShadowColor},\n          inset 0 0 0 0.125rem ${interactive};\n        outline: none;\n      }\n\n      ${StyledIcon} {\n        margin-inline-start: ${spacing};\n        height: 1em;\n        width: 1em;\n      }\n    `;\n  }\n);\n\nStyledSelectable.defaultProps = defaultThemeProp;\n\nconst Selectable: FC<SelectableProps & ForwardProps> = forwardRef(function Selectable(\n  {\n    testId,\n    id,\n    children,\n    onSelect,\n    onRemove,\n    onClick,\n    onKeyUp,\n    ...restProps\n  }: PropsWithoutRef<SelectableProps>,\n  ref: Ref<HTMLButtonElement>\n) {\n  const consolidatedRef = useConsolidatedRef(ref);\n  const t = useI18n();\n  const testIds = useTestIds(testId, getSelectableTestIds);\n\n  const handleClick = (e: MouseEvent<HTMLButtonElement>) => {\n    onClick?.(e);\n    onSelect?.(id);\n  };\n\n  const handleCloseClick = (e: MouseEvent) => {\n    e.preventDefault();\n    e.stopPropagation();\n    onRemove?.(id);\n  };\n\n  const handleKeyUp = (e: KeyboardEvent) => {\n    onKeyUp?.(e);\n    if (e.key === 'Enter') {\n      onSelect?.(id);\n    }\n\n    if (e.key === 'Backspace' || e.key === 'Delete') {\n      onRemove?.(id);\n    }\n  };\n\n  return (\n    <StyledSelectable\n      data-testid={testIds.root}\n      ref={consolidatedRef}\n      onClick={handleClick}\n      onKeyUp={handleKeyUp}\n      {...restProps}\n    >\n      <span aria-hidden>{children}</span>\n      {onRemove && (\n        <BareButton\n          data-testid={testIds.remove}\n          tabIndex='-1'\n          onClick={handleCloseClick}\n          aria-label={t('remove_noun', [children])}\n        >\n          <Icon name='times' />\n        </BareButton>\n      )}\n    </StyledSelectable>\n  );\n});\n\nexport default withTestIds(Selectable, getSelectableTestIds);\n"]}

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

@@ -6,9 +6,11 @@ export type StatusProps = WithAttributes<'span', TestIdProp & {
     /** The content of the Badge, transformed to uppercase. */
     children: ReactText;
 }>;
-export declare const StyledStatus: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, Pick<StatusProps, "variant">, never>;
+export declare const StyledStatus: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, Pick<StatusProps, "variant"> & {
+    afterContent: StatusProps["children"];
+}, never>;
 declare const _default: import("react").ForwardRefExoticComponent<Omit<StatusProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>> & {
-    getTestIds: (testIdProp?: string | null | undefined) => import("../../types").TestIdsRecord<readonly []>;
+    getTestIds: (testIdProp?: TestIdProp["testId"]) => import("../../types").TestIdsRecord<readonly []>;
 };
 export default _default;
 //# sourceMappingURL=Status.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Status.d.ts","sourceRoot":"","sources":["../../../src/components/Badges/Status.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAmB,SAAS,EAAE,MAAM,OAAO,CAAC;AAMxD,OAAO,KAAK,EAAc,cAAc,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAO1E,MAAM,MAAM,WAAW,GAAG,cAAc,CACtC,MAAM,EACN,UAAU,GAAG;IACX,yFAAyF;IACzF,OAAO,EAAE,SAAS,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,GAAG,MAAM,CAAC;IAC5D,0DAA0D;IAC1D,QAAQ,EAAE,SAAS,CAAC;CACrB,CACF,CAAC;AAEF,eAAO,MAAM,YAAY,oIAyBvB,CAAC;;;;AAIH,wBAeE"}
+{"version":3,"file":"Status.d.ts","sourceRoot":"","sources":["../../../src/components/Badges/Status.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAmB,SAAS,EAAE,MAAM,OAAO,CAAC;AAMxD,OAAO,KAAK,EAAc,cAAc,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAM1E,MAAM,MAAM,WAAW,GAAG,cAAc,CACtC,MAAM,EACN,UAAU,GAAG;IACX,yFAAyF;IACzF,OAAO,EAAE,SAAS,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,GAAG,MAAM,CAAC;IAC5D,0DAA0D;IAC1D,QAAQ,EAAE,SAAS,CAAC;CACrB,CACF,CAAC;AAEF,eAAO,MAAM,YAAY;kBACwB,WAAW,CAAC,UAAU,CAAC;SAgCtE,CAAC;;;;AAIH,wBAoBE"}

package/lib/components/Badges/Status.js

@@ -1,20 +1,19 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
-import { rgba } from 'polished';
+import { rgba, hideVisually } from 'polished';
 import { calculateFontSize } from '../../styles';
 import { defaultThemeProp } from '../../theme';
 import { tryCatch, withTestIds } from '../../utils';
 import { useTestIds } from '../../hooks';
-import { StyledVisuallyHiddenText } from '../VisuallyHiddenText/VisuallyHiddenText';
 import { getStatusTestIds } from './Badges.test-ids';
-export const StyledStatus = styled.span(props => {
-    const { spacing } = props.theme.base;
-    const borderRadius = props.theme.base['border-radius'];
-    const { status } = props.theme.components.badges;
-    const { background, foreground } = status[props.variant];
+export const StyledStatus = styled.span(({ theme, variant, afterContent }) => {
+    const { spacing } = theme.base;
+    const borderRadius = theme.base['border-radius'];
+    const { 'font-stretch': fontStretch, status } = theme.components.badges;
+    const { background, foreground } = status[variant];
     const shadow = tryCatch(() => rgba(foreground, 0.1));
-    const fontSize = calculateFontSize(props.theme.base['font-size'], props.theme.base['font-scale']);
+    const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);
     return css `
     display: inline-block;
     position: relative;
@@ -24,17 +23,23 @@ export const StyledStatus = styled.span(props => {
     box-shadow: inset 0 0 0 0.0625rem ${shadow};
     font-size: ${fontSize.xxs};
     font-weight: bold;
+    font-stretch: ${fontStretch};
     line-height: 1rem;
     padding-inline: calc(${spacing} / 2);
 
-    & > :first-child {
+    & > * {
       text-transform: uppercase;
     }
+
+    &::after {
+      content: '${afterContent}';
+      ${hideVisually};
+    }
   `;
 });
 StyledStatus.defaultProps = defaultThemeProp;
 export default withTestIds(forwardRef(function Status({ testId, variant = 'info', children, ...restProps }, ref) {
     const testIds = useTestIds(testId, getStatusTestIds);
-    return (_jsxs(StyledStatus, { "data-testid": testIds.root, ...restProps, variant: variant, ref: ref, children: [_jsx("span", { "aria-hidden": true, children: children }), _jsx(StyledVisuallyHiddenText, { children: children })] }));
+    return (_jsx(StyledStatus, { "data-testid": testIds.root, ...restProps, variant: variant, ref: ref, afterContent: children, children: _jsx("span", { "aria-hidden": true, children: children }) }));
 }), getStatusTestIds);
 //# sourceMappingURL=Status.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Status.js","sourceRoot":"","sources":["../../../src/components/Badges/Status.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,iBAAiB,EAAE,MAAM,cAAc,CAAC;AACjD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AACpD,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AACzC,OAAO,EAAE,wBAAwB,EAAE,MAAM,0CAA0C,CAAC;AAEpF,OAAO,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAYrD,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,IAAI,CAA+B,KAAK,CAAC,EAAE;IAC5E,MAAM,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC;IACrC,MAAM,YAAY,GAAG,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;IACvD,MAAM,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC;IAEjD,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,GAAG,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IACzD,MAAM,MAAM,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC,CAAC;IACrD,MAAM,QAAQ,GAAG,iBAAiB,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;IAElG,OAAO,GAAG,CAAA;;;wBAGY,UAAU;iCACD,YAAY;aAChC,UAAU;wCACiB,MAAM;iBAC7B,QAAQ,CAAC,GAAG;;;2BAGF,OAAO;;;;;GAK/B,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,YAAY,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE7C,eAAe,WAAW,CACxB,UAAU,CAAwD,SAAS,MAAM,CAC/E,EAAE,MAAM,EAAE,OAAO,GAAG,MAAM,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAE,EACpD,GAAG;IAEH,MAAM,OAAO,GAAG,UAAU,CAAC,MAAM,EAAE,gBAAgB,CAAC,CAAC;IAErD,OAAO,CACL,MAAC,YAAY,mBAAc,OAAO,CAAC,IAAI,KAAM,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,GAAG,aAChF,8CAAmB,QAAQ,GAAQ,EACnC,KAAC,wBAAwB,cAAE,QAAQ,GAA4B,IAClD,CAChB,CAAC;AACJ,CAAC,CAAC,EACF,gBAAgB,CACjB,CAAC","sourcesContent":["import { forwardRef } from 'react';\nimport type { PropsWithoutRef, ReactText } from 'react';\nimport styled, { css } from 'styled-components';\nimport { rgba } from 'polished';\n\nimport { calculateFontSize } from '../../styles';\nimport { defaultThemeProp } from '../../theme';\nimport type { RefElement, WithAttributes, TestIdProp } from '../../types';\nimport { tryCatch, withTestIds } from '../../utils';\nimport { useTestIds } from '../../hooks';\nimport { StyledVisuallyHiddenText } from '../VisuallyHiddenText/VisuallyHiddenText';\n\nimport { getStatusTestIds } from './Badges.test-ids';\n\nexport type StatusProps = WithAttributes<\n  'span',\n  TestIdProp & {\n    /** Determines the color to render the Badge as. This color is derived from the Theme. */\n    variant: 'success' | 'urgent' | 'warn' | 'pending' | 'info';\n    /** The content of the Badge, transformed to uppercase. */\n    children: ReactText;\n  }\n>;\n\nexport const StyledStatus = styled.span<Pick<StatusProps, 'variant'>>(props => {\n  const { spacing } = props.theme.base;\n  const borderRadius = props.theme.base['border-radius'];\n  const { status } = props.theme.components.badges;\n\n  const { background, foreground } = status[props.variant];\n  const shadow = tryCatch(() => rgba(foreground, 0.1));\n  const fontSize = calculateFontSize(props.theme.base['font-size'], props.theme.base['font-scale']);\n\n  return css`\n    display: inline-block;\n    position: relative;\n    background-color: ${background};\n    border-radius: calc(0.25 * ${borderRadius});\n    color: ${foreground};\n    box-shadow: inset 0 0 0 0.0625rem ${shadow};\n    font-size: ${fontSize.xxs};\n    font-weight: bold;\n    line-height: 1rem;\n    padding-inline: calc(${spacing} / 2);\n\n    & > :first-child {\n      text-transform: uppercase;\n    }\n  `;\n});\n\nStyledStatus.defaultProps = defaultThemeProp;\n\nexport default withTestIds(\n  forwardRef<RefElement<StatusProps>, PropsWithoutRef<StatusProps>>(function Status(\n    { testId, variant = 'info', children, ...restProps },\n    ref\n  ) {\n    const testIds = useTestIds(testId, getStatusTestIds);\n\n    return (\n      <StyledStatus data-testid={testIds.root} {...restProps} variant={variant} ref={ref}>\n        <span aria-hidden>{children}</span>\n        <StyledVisuallyHiddenText>{children}</StyledVisuallyHiddenText>\n      </StyledStatus>\n    );\n  }),\n  getStatusTestIds\n);\n"]}
+{"version":3,"file":"Status.js","sourceRoot":"","sources":["../../../src/components/Badges/Status.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,YAAY,EAAE,MAAM,UAAU,CAAC;AAE9C,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AACjD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AACpD,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAEzC,OAAO,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAYrD,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,IAAI,CAErC,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,YAAY,EAAE,EAAE,EAAE;IACrC,MAAM,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC,IAAI,CAAC;IAC/B,MAAM,YAAY,GAAG,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;IACjD,MAAM,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC;IAExE,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC;IACnD,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;;;wBAGY,UAAU;iCACD,YAAY;aAChC,UAAU;wCACiB,MAAM;iBAC7B,QAAQ,CAAC,GAAG;;oBAET,WAAW;;2BAEJ,OAAO;;;;;;;kBAOhB,YAAY;QACtB,YAAY;;GAEjB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,YAAY,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE7C,eAAe,WAAW,CACxB,UAAU,CAAwD,SAAS,MAAM,CAC/E,EAAE,MAAM,EAAE,OAAO,GAAG,MAAM,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAE,EACpD,GAAG;IAEH,MAAM,OAAO,GAAG,UAAU,CAAC,MAAM,EAAE,gBAAgB,CAAC,CAAC;IAErD,OAAO,CACL,KAAC,YAAY,mBACE,OAAO,CAAC,IAAI,KACrB,SAAS,EACb,OAAO,EAAE,OAAO,EAChB,GAAG,EAAE,GAAG,EACR,YAAY,EAAE,QAAQ,YAEtB,8CAAmB,QAAQ,GAAQ,GACtB,CAChB,CAAC;AACJ,CAAC,CAAC,EACF,gBAAgB,CACjB,CAAC","sourcesContent":["import { forwardRef } from 'react';\nimport type { PropsWithoutRef, ReactText } from 'react';\nimport styled, { css } from 'styled-components';\nimport { rgba, hideVisually } from 'polished';\n\nimport { calculateFontSize } from '../../styles';\nimport { defaultThemeProp } from '../../theme';\nimport type { RefElement, WithAttributes, TestIdProp } from '../../types';\nimport { tryCatch, withTestIds } from '../../utils';\nimport { useTestIds } from '../../hooks';\n\nimport { getStatusTestIds } from './Badges.test-ids';\n\nexport type StatusProps = WithAttributes<\n  'span',\n  TestIdProp & {\n    /** Determines the color to render the Badge as. This color is derived from the Theme. */\n    variant: 'success' | 'urgent' | 'warn' | 'pending' | 'info';\n    /** The content of the Badge, transformed to uppercase. */\n    children: ReactText;\n  }\n>;\n\nexport const StyledStatus = styled.span<\n  Pick<StatusProps, 'variant'> & { afterContent: StatusProps['children'] }\n>(({ theme, variant, afterContent }) => {\n  const { spacing } = theme.base;\n  const borderRadius = theme.base['border-radius'];\n  const { 'font-stretch': fontStretch, status } = theme.components.badges;\n\n  const { background, foreground } = status[variant];\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    position: relative;\n    background-color: ${background};\n    border-radius: calc(0.25 * ${borderRadius});\n    color: ${foreground};\n    box-shadow: inset 0 0 0 0.0625rem ${shadow};\n    font-size: ${fontSize.xxs};\n    font-weight: bold;\n    font-stretch: ${fontStretch};\n    line-height: 1rem;\n    padding-inline: calc(${spacing} / 2);\n\n    & > * {\n      text-transform: uppercase;\n    }\n\n    &::after {\n      content: '${afterContent}';\n      ${hideVisually};\n    }\n  `;\n});\n\nStyledStatus.defaultProps = defaultThemeProp;\n\nexport default withTestIds(\n  forwardRef<RefElement<StatusProps>, PropsWithoutRef<StatusProps>>(function Status(\n    { testId, variant = 'info', children, ...restProps },\n    ref\n  ) {\n    const testIds = useTestIds(testId, getStatusTestIds);\n\n    return (\n      <StyledStatus\n        data-testid={testIds.root}\n        {...restProps}\n        variant={variant}\n        ref={ref}\n        afterContent={children}\n      >\n        <span aria-hidden>{children}</span>\n      </StyledStatus>\n    );\n  }),\n  getStatusTestIds\n);\n"]}

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

@@ -1,5 +1,5 @@
-import type { FC, Ref, MouseEventHandler } from 'react';
-import type { BaseProps, ForwardProps, TestIdProp } from '../../types';
+import type { Ref, MouseEventHandler } from 'react';
+import type { BaseProps, ForwardRefForwardPropsComponent, TestIdProp } from '../../types';
 export interface TagProps extends BaseProps, TestIdProp {
     /** The content of the Badge. */
     children: string;
@@ -11,8 +11,8 @@ export interface TagProps extends BaseProps, TestIdProp {
     ref?: Ref<HTMLSpanElement | HTMLAnchorElement | HTMLButtonElement>;
 }
 export declare const StyledTag: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
-declare const _default: FC<TagProps & ForwardProps> & {
-    getTestIds: (testIdProp?: string | null | undefined) => import("../../types").TestIdsRecord<readonly []>;
+declare const _default: ForwardRefForwardPropsComponent<TagProps> & {
+    getTestIds: (testIdProp?: TestIdProp["testId"]) => import("../../types").TestIdsRecord<readonly []>;
 };
 export default _default;
 //# sourceMappingURL=Tag.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Tag.d.ts","sourceRoot":"","sources":["../../../src/components/Badges/Tag.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAE,GAAG,EAAmB,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAMzE,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAMvE,MAAM,WAAW,QAAS,SAAQ,SAAS,EAAE,UAAU;IACrD,gCAAgC;IAChC,QAAQ,EAAE,MAAM,CAAC;IACjB,wFAAwF;IACxF,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,qGAAqG;IACrG,OAAO,CAAC,EAAE,iBAAiB,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,CAAC;IACnE,6CAA6C;IAC7C,GAAG,CAAC,EAAE,GAAG,CAAC,eAAe,GAAG,iBAAiB,GAAG,iBAAiB,CAAC,CAAC;CACpE;AAED,eAAO,MAAM,SAAS,0GAiCpB,CAAC;;;;AAuBH,wBAA+C"}
+{"version":3,"file":"Tag.d.ts","sourceRoot":"","sources":["../../../src/components/Badges/Tag.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,GAAG,EAAmB,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAMrE,OAAO,KAAK,EAAE,SAAS,EAAE,+BAA+B,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAM1F,MAAM,WAAW,QAAS,SAAQ,SAAS,EAAE,UAAU;IACrD,gCAAgC;IAChC,QAAQ,EAAE,MAAM,CAAC;IACjB,wFAAwF;IACxF,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,qGAAqG;IACrG,OAAO,CAAC,EAAE,iBAAiB,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,CAAC;IACnE,6CAA6C;IAC7C,GAAG,CAAC,EAAE,GAAG,CAAC,eAAe,GAAG,iBAAiB,GAAG,iBAAiB,CAAC,CAAC;CACpE;AAED,eAAO,MAAM,SAAS,0GAiCpB,CAAC;;;;AAuBH,wBAA+C"}

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

@@ -1 +1 @@
-{"version":3,"file":"Tag.js","sourceRoot":"","sources":["../../../src/components/Badges/Tag.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAE/B,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAEpD,OAAO,UAAU,MAAM,sBAAsB,CAAC;AAC9C,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAEzC,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAalD,MAAM,CAAC,MAAM,SAAS,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE;IAC3C,MAAM,YAAY,GAAG,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;IACvD,MAAM,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC;IACrC,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,GAAG,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,GAAG,CAAC;IAErE,MAAM,WAAW,GAAG,QAAQ,CAAC,GAAG,EAAE,CAChC,GAAG,CAAC,IAAI,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC,EAAE,UAAU,CAAC,CACtE,CAAC;IACF,MAAM,SAAS,GAAG,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC;IAEhD,OAAO,GAAG,CAAA;8BACkB,WAAW;iCACR,YAAY;aAChC,UAAU;;;iBAGN,OAAO;;;sBAGF,UAAU;;;;sBAIV,UAAU;oBACZ,SAAS;;;;;gCAKG,WAAW;;;GAGxC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,SAAS,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE1C,MAAM,GAAG,GAAgC,UAAU,CAAC,SAAS,GAAG,CAC9D,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,SAAS,EAA6B,EAC5E,GAAoB;IAEpB,MAAM,OAAO,GAAG,UAAU,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;IAClD,OAAO,CACL,KAAC,SAAS,mBACK,OAAO,CAAC,IAAI,KACrB,SAAS,EACb,EAAE,EAAE,OAAO,IAAI,IAAI,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,EAC5C,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAChB,GAAG,EAAE,GAAG,YAEP,QAAQ,GACC,CACb,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,WAAW,CAAC,GAAG,EAAE,aAAa,CAAC,CAAC","sourcesContent":["import { forwardRef } from 'react';\nimport type { FC, Ref, PropsWithoutRef, MouseEventHandler } from 'react';\nimport styled, { css } from 'styled-components';\nimport { mix } from 'polished';\n\nimport { defaultThemeProp } from '../../theme';\nimport { tryCatch, withTestIds } from '../../utils';\nimport type { BaseProps, ForwardProps, TestIdProp } from '../../types';\nimport BareButton from '../Button/BareButton';\nimport { useTestIds } from '../../hooks';\n\nimport { getTagTestIds } from './Badges.test-ids';\n\nexport interface TagProps extends BaseProps, TestIdProp {\n  /** The content of the Badge. */\n  children: string;\n  /** A location to navigate to. Passing an href will render an anchor styled as a Tag. */\n  href?: string;\n  /** Click handler for the badge. Passing an onClick function will render a button styled as a Tag. */\n  onClick?: MouseEventHandler<HTMLAnchorElement | HTMLButtonElement>;\n  /** Ref forwarded to the wrapping element. */\n  ref?: Ref<HTMLSpanElement | HTMLAnchorElement | HTMLButtonElement>;\n}\n\nexport const StyledTag = styled.span(props => {\n  const borderRadius = props.theme.base['border-radius'];\n  const { spacing } = props.theme.base;\n  const { foreground, background } = props.theme.components.badges.tag;\n\n  const borderColor = tryCatch(() =>\n    mix(0.85, props.theme.base.palette['primary-background'], background)\n  );\n  const boxShadow = props.theme.base.shadow.focus;\n\n  return css`\n    border: 0.0625rem solid ${borderColor};\n    border-radius: calc(0.25 * ${borderRadius});\n    color: ${foreground};\n    display: inline-block;\n    font-size: 0.75rem;\n    padding: 0 ${spacing};\n\n    &:hover {\n      border-color: ${background};\n    }\n\n    &:focus {\n      border-color: ${background};\n      box-shadow: ${boxShadow};\n      outline: none;\n    }\n\n    &:active {\n      border: 0.0625rem solid ${borderColor};\n      box-shadow: none;\n    }\n  `;\n});\n\nStyledTag.defaultProps = defaultThemeProp;\n\nconst Tag: FC<TagProps & ForwardProps> = forwardRef(function Tag(\n  { testId, children, href, onClick, ...restProps }: PropsWithoutRef<TagProps>,\n  ref: TagProps['ref']\n) {\n  const testIds = useTestIds(testId, getTagTestIds);\n  return (\n    <StyledTag\n      data-testid={testIds.root}\n      {...restProps}\n      as={onClick || href ? BareButton : undefined}\n      href={href}\n      onClick={onClick}\n      ref={ref}\n    >\n      {children}\n    </StyledTag>\n  );\n});\n\nexport default withTestIds(Tag, getTagTestIds);\n"]}
+{"version":3,"file":"Tag.js","sourceRoot":"","sources":["../../../src/components/Badges/Tag.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAE/B,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAEpD,OAAO,UAAU,MAAM,sBAAsB,CAAC;AAC9C,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAEzC,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAalD,MAAM,CAAC,MAAM,SAAS,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE;IAC3C,MAAM,YAAY,GAAG,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;IACvD,MAAM,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC;IACrC,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,GAAG,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,GAAG,CAAC;IAErE,MAAM,WAAW,GAAG,QAAQ,CAAC,GAAG,EAAE,CAChC,GAAG,CAAC,IAAI,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC,EAAE,UAAU,CAAC,CACtE,CAAC;IACF,MAAM,SAAS,GAAG,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC;IAEhD,OAAO,GAAG,CAAA;8BACkB,WAAW;iCACR,YAAY;aAChC,UAAU;;;iBAGN,OAAO;;;sBAGF,UAAU;;;;sBAIV,UAAU;oBACZ,SAAS;;;;;gCAKG,WAAW;;;GAGxC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,SAAS,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE1C,MAAM,GAAG,GAA8C,UAAU,CAAC,SAAS,GAAG,CAC5E,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,SAAS,EAA6B,EAC5E,GAAoB;IAEpB,MAAM,OAAO,GAAG,UAAU,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;IAClD,OAAO,CACL,KAAC,SAAS,mBACK,OAAO,CAAC,IAAI,KACrB,SAAS,EACb,EAAE,EAAE,OAAO,IAAI,IAAI,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,EAC5C,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAChB,GAAG,EAAE,GAAG,YAEP,QAAQ,GACC,CACb,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,WAAW,CAAC,GAAG,EAAE,aAAa,CAAC,CAAC","sourcesContent":["import { forwardRef } from 'react';\nimport type { Ref, PropsWithoutRef, MouseEventHandler } from 'react';\nimport styled, { css } from 'styled-components';\nimport { mix } from 'polished';\n\nimport { defaultThemeProp } from '../../theme';\nimport { tryCatch, withTestIds } from '../../utils';\nimport type { BaseProps, ForwardRefForwardPropsComponent, TestIdProp } from '../../types';\nimport BareButton from '../Button/BareButton';\nimport { useTestIds } from '../../hooks';\n\nimport { getTagTestIds } from './Badges.test-ids';\n\nexport interface TagProps extends BaseProps, TestIdProp {\n  /** The content of the Badge. */\n  children: string;\n  /** A location to navigate to. Passing an href will render an anchor styled as a Tag. */\n  href?: string;\n  /** Click handler for the badge. Passing an onClick function will render a button styled as a Tag. */\n  onClick?: MouseEventHandler<HTMLAnchorElement | HTMLButtonElement>;\n  /** Ref forwarded to the wrapping element. */\n  ref?: Ref<HTMLSpanElement | HTMLAnchorElement | HTMLButtonElement>;\n}\n\nexport const StyledTag = styled.span(props => {\n  const borderRadius = props.theme.base['border-radius'];\n  const { spacing } = props.theme.base;\n  const { foreground, background } = props.theme.components.badges.tag;\n\n  const borderColor = tryCatch(() =>\n    mix(0.85, props.theme.base.palette['primary-background'], background)\n  );\n  const boxShadow = props.theme.base.shadow.focus;\n\n  return css`\n    border: 0.0625rem solid ${borderColor};\n    border-radius: calc(0.25 * ${borderRadius});\n    color: ${foreground};\n    display: inline-block;\n    font-size: 0.75rem;\n    padding: 0 ${spacing};\n\n    &:hover {\n      border-color: ${background};\n    }\n\n    &:focus {\n      border-color: ${background};\n      box-shadow: ${boxShadow};\n      outline: none;\n    }\n\n    &:active {\n      border: 0.0625rem solid ${borderColor};\n      box-shadow: none;\n    }\n  `;\n});\n\nStyledTag.defaultProps = defaultThemeProp;\n\nconst Tag: ForwardRefForwardPropsComponent<TagProps> = forwardRef(function Tag(\n  { testId, children, href, onClick, ...restProps }: PropsWithoutRef<TagProps>,\n  ref: TagProps['ref']\n) {\n  const testIds = useTestIds(testId, getTagTestIds);\n  return (\n    <StyledTag\n      data-testid={testIds.root}\n      {...restProps}\n      as={onClick || href ? BareButton : undefined}\n      href={href}\n      onClick={onClick}\n      ref={ref}\n    >\n      {children}\n    </StyledTag>\n  );\n});\n\nexport default withTestIds(Tag, getTagTestIds);\n"]}

package/lib/components/Banner/Banner.d.ts

@@ -1,11 +1,16 @@
 import type { Ref, MouseEventHandler } from 'react';
-import type { ForwardProps, HeadingTag, NoChildrenProp, TestIdProp, WithAttributes } from '../../types';
+import type { HeadingTag, NoChildrenProp, TestIdProp, WithAttributes } from '../../types';
 export interface BannerHandleValue {
     /** Used to apply focus to the banner via an imperative handle. */
     focus: () => void;
 }
+type Label = string | {
+    text: string;
+    onClick?: MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>;
+    href?: string;
+};
 export interface BannerMessage {
-    label: string;
+    label: Label | Label[];
     description?: string;
     action?: {
         text: string;
@@ -15,7 +20,10 @@ export interface BannerMessage {
     items?: (BannerMessage | string)[];
 }
 export type BannerProps = WithAttributes<'div', TestIdProp & NoChildrenProp & {
-    /** Controls the styling of the Banner. */ variant: 'urgent' | 'warning' | 'success' | 'info';
+    /** Controls the styling of the Banner. */
+    variant: 'urgent' | 'warning' | 'success' | 'info' | 'ai';
+    /** Custom heading text. Default varies by variant. */
+    headingText?: string;
     /**
      * The heading tag to render the provided heading as. This is agnostic to the styling of the heading.
      * @default 'h2'
@@ -29,17 +37,17 @@ export type BannerProps = WithAttributes<'div', TestIdProp & NoChildrenProp & {
     handle?: Ref<BannerHandleValue>;
 }>;
 export declare const StyledBanner: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
-    headingTag: BannerProps['headingTag'];
+    headingTag: BannerProps["headingTag"];
 }, never>;
 export declare const StyledBannerStatus: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, Pick<BannerProps, "variant">, never>;
 export declare const StyledBannerHeader: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledBannerContent: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
-    expandable?: boolean | undefined;
+    expandable?: boolean;
 }, never>;
-export declare const StyledBannerMessageList: import("styled-components").StyledComponent<import("react").FC<import("../List").UnorderedListProps & ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledBannerMessageList: import("styled-components").StyledComponent<import("../../types").ForwardRefForwardPropsComponent<import("../List").UnorderedListProps>, import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledBannerMessage: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
 declare const _default: import("react").ForwardRefExoticComponent<Omit<BannerProps, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
-    getTestIds: (testIdProp?: string | null | undefined) => import("../../types").TestIdsRecord<readonly ["heading", "expand-collapse", "dismiss", "message-label", "message-description", "message-action"]>;
+    getTestIds: (testIdProp?: TestIdProp["testId"]) => import("../../types").TestIdsRecord<readonly ["heading", "expand-collapse", "dismiss", "message-label", "message-description", "message-action"]>;
 };
 export default _default;
 //# sourceMappingURL=Banner.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Banner.d.ts","sourceRoot":"","sources":["../../../src/components/Banner/Banner.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAmB,GAAG,EAAE,iBAAiB,EAAa,MAAM,OAAO,CAAC;AAKhF,OAAO,KAAK,EACV,YAAY,EACZ,UAAU,EACV,cAAc,EAGd,UAAU,EACV,cAAc,EACf,MAAM,aAAa,CAAC;AA+BrB,MAAM,WAAW,iBAAiB;IAChC,kEAAkE;IAClE,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAED,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE;QACP,IAAI,EAAE,MAAM,CAAC;QACb,OAAO,CAAC,EAAE,iBAAiB,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,CAAC;QACnE,IAAI,CAAC,EAAE,MAAM,CAAC;KACf,CAAC;IACF,KAAK,CAAC,EAAE,CAAC,aAAa,GAAG,MAAM,CAAC,EAAE,CAAC;CACpC;AAED,MAAM,MAAM,WAAW,GAAG,cAAc,CACtC,KAAK,EACL,UAAU,GACR,cAAc,GAAG;IACf,0CAA0C,CAAC,OAAO,EAAE,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,CAAC;IAC9F;;;OAGG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,gEAAgE;IAChE,QAAQ,EAAE,CAAC,MAAM,GAAG,aAAa,CAAC,EAAE,CAAC;IACrC,0DAA0D;IAC1D,SAAS,CAAC,EAAE,iBAAiB,CAAC;IAC9B,4DAA4D;IAC5D,MAAM,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAC;CACjC,CACJ,CAAC;AAEF,eAAO,MAAM,YAAY;gBAA4B,WAAW,CAAC,YAAY,CAAC;SAY7E,CAAC;AAIF,eAAO,MAAM,kBAAkB,mIAiB7B,CAAC;AAIH,eAAO,MAAM,kBAAkB,yGAoB7B,CAAC;AAIH,eAAO,MAAM,mBAAmB;;SAW9B,CAAC;AAIH,eAAO,MAAM,uBAAuB,2KAMnC,CAAC;AAIF,eAAO,MAAM,mBAAmB,0GAG/B,CAAC;;;;AAoEF,wBA4JE"}
+{"version":3,"file":"Banner.d.ts","sourceRoot":"","sources":["../../../src/components/Banner/Banner.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAmB,GAAG,EAAE,iBAAiB,EAAa,MAAM,OAAO,CAAC;AAKhF,OAAO,KAAK,EAEV,UAAU,EACV,cAAc,EAGd,UAAU,EACV,cAAc,EACf,MAAM,aAAa,CAAC;AAiCrB,MAAM,WAAW,iBAAiB;IAChC,kEAAkE;IAClE,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAED,KAAK,KAAK,GACN,MAAM,GACN;IACE,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,iBAAiB,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,CAAC;IACnE,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEN,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,KAAK,GAAG,KAAK,EAAE,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE;QACP,IAAI,EAAE,MAAM,CAAC;QACb,OAAO,CAAC,EAAE,iBAAiB,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,CAAC;QACnE,IAAI,CAAC,EAAE,MAAM,CAAC;KACf,CAAC;IACF,KAAK,CAAC,EAAE,CAAC,aAAa,GAAG,MAAM,CAAC,EAAE,CAAC;CACpC;AAED,MAAM,MAAM,WAAW,GAAG,cAAc,CACtC,KAAK,EACL,UAAU,GACR,cAAc,GAAG;IACf,0CAA0C;IAC1C,OAAO,EAAE,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,GAAG,IAAI,CAAC;IAC1D,sDAAsD;IACtD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,gEAAgE;IAChE,QAAQ,EAAE,CAAC,MAAM,GAAG,aAAa,CAAC,EAAE,CAAC;IACrC,0DAA0D;IAC1D,SAAS,CAAC,EAAE,iBAAiB,CAAC;IAC9B,4DAA4D;IAC5D,MAAM,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAC;CACjC,CACJ,CAAC;AAEF,eAAO,MAAM,YAAY;gBAA4B,WAAW,CAAC,YAAY,CAAC;SAgB7E,CAAC;AAIF,eAAO,MAAM,kBAAkB,mIAiB7B,CAAC;AAIH,eAAO,MAAM,kBAAkB,yGAoB7B,CAAC;AAIH,eAAO,MAAM,mBAAmB;iBAA6B,OAAO;SAWlE,CAAC;AAIH,eAAO,MAAM,uBAAuB,+LAMnC,CAAC;AAIF,eAAO,MAAM,mBAAmB,0GAG/B,CAAC;;;;AA0EF,wBA4KE"}