@pega/cosmos-react-core 5.0.0-dev.1.0 → 5.0.0-dev.2.0

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

@@ -1,17 +1,16 @@
-import { FC } from 'react';
-import { ForwardProps, PropsWithDefaults } from '../../types';
-export interface CountProps {
+import { PropsWithDefaults, WithAttributes } from '../../types';
+export type CountProps = WithAttributes<'span', {
     /** 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<Pick<CountProps, "hidden" | "color" | "style" | "translate" | "prefix" | "slot" | "title" | "children" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "property" | "resource" | "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" | "variant"> & import("react").RefAttributes<HTMLSpanElement>>;
+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":"AAMA,OAAO,EAAE,iBAAiB,EAAc,cAAc,EAAE,MAAM,aAAa,CAAC;AAG5E,MAAM,MAAM,UAAU,GAAG,cAAc,CACrC,MAAM,EACN;IACE;;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,wBASG"}

package/lib/components/Badges/Count.js

@@ -68,9 +68,7 @@ const formatValue = (val) => {
         return `${val}`;
     return `${val < 0 ? '-' : ''}${truncateValue(absVal)}`;
 };
-const Count = forwardRef(function Count(props, ref) {
-    const { variant = 'default', children, ...restProps } = props;
+export default forwardRef(function Count({ variant = 'default', children, ...restProps }, ref) {
     return Number.isInteger(children) ? (_jsx(StyledCount, { variant: variant, ...restProps, ref: ref, children: formatValue(children) })) : null;
 });
-export default Count;
 //# 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":"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","sourcesContent":["import { PropsWithoutRef, forwardRef } from 'react';\nimport styled, { css } from 'styled-components';\nimport { rgba } from 'polished';\n\nimport { defaultThemeProp } from '../../theme';\nimport { tryCatch } from '../../utils';\nimport { PropsWithDefaults, RefElement, WithAttributes } from '../../types';\nimport { calculateFontSize } from '../../styles';\n\nexport type CountProps = WithAttributes<\n  'span',\n  {\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 forwardRef<RefElement<CountProps>, PropsWithoutRef<CountProps>>(function Count(\n  { variant = 'default', children, ...restProps },\n  ref\n) {\n  return Number.isInteger(children) ? (\n    <StyledCount variant={variant} {...restProps} ref={ref}>\n      {formatValue(children as number)}\n    </StyledCount>\n  ) : null;\n});\n"]}

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

@@ -1,9 +1,8 @@
-import { FunctionComponent } from 'react';
-import { ForwardProps, NoChildrenProp } from '../../types';
+import { NoChildrenProp, WithAttributes } 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 & {
     keyName: string;
-}
-declare const Keyboard: FunctionComponent<KeyboardProps & ForwardProps>;
-export default Keyboard;
+}>;
+declare const _default: import("react").ForwardRefExoticComponent<Pick<KeyboardProps, "hidden" | "color" | "style" | "translate" | "prefix" | "slot" | "title" | "children" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "property" | "resource" | "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" | "keyName"> & import("react").RefAttributes<HTMLElement>>;
+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":"AAKA,OAAO,EAAE,cAAc,EAAc,cAAc,EAAE,MAAM,aAAa,CAAC;AA8BzE,eAAO,MAAM,cAAc,yGA+B1B,CAAC;AAGF,MAAM,MAAM,aAAa,GAAG,cAAc,CAAC,KAAK,EAAE,cAAc,GAAG;IAAE,OAAO,EAAE,MAAM,CAAA;CAAE,CAAC,CAAC;;AAExF,wBAaE"}

package/lib/components/Badges/Keyboard.js

@@ -1,4 +1,5 @@
 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';
@@ -50,12 +51,11 @@ export const StyledKeyboard = styled.kbd(({ theme: { base, components: { text: {
     `;
 });
 StyledKeyboard.defaultProps = defaultThemeProp;
-const Keyboard = ({ keyName, ...restProps }) => {
+export default forwardRef(function Keyboard({ keyName, ...restProps }, ref) {
     const { windows: isWindows } = useOS();
-    return (_jsx(StyledKeyboard, { ...restProps, "aria-label": keyName, children: (isWindows && windowsKeyMapper[keyName]) ||
+    return (_jsx(StyledKeyboard, { ...restProps, "aria-label": keyName, ref: ref, children: (isWindows && windowsKeyMapper[keyName]) ||
             osxKeyMapper[keyName] ||
             generalKeyMapper[keyName] ||
             keyName }));
-};
-export default Keyboard;
+});
 //# sourceMappingURL=Keyboard.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Keyboard.js","sourceRoot":"","sources":["../../../src/components/Badges/Keyboard.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,KAAK,MAAM,mBAAmB,CAAC;AAGtC,MAAM,YAAY,GAA8B;IAC9C,OAAO,EAAE,GAAG;IACZ,GAAG,EAAE,GAAG;IACR,MAAM,EAAE,GAAG;IACX,OAAO,EAAE,GAAG;IACZ,MAAM,EAAE,GAAG;IACX,KAAK,EAAE,GAAG;IACV,MAAM,EAAE,KAAK;IACb,gBAAgB,EAAE,GAAG;CACtB,CAAC;AAEF,MAAM,gBAAgB,GAA8B;IAClD,OAAO,EAAE,MAAM;IACf,GAAG,EAAE,KAAK;IACV,MAAM,EAAE,KAAK;IACb,IAAI,EAAE,GAAG;IACT,OAAO,EAAE,GAAG;IACZ,SAAS,EAAE,WAAW;IACtB,gBAAgB,EAAE,MAAM;CACzB,CAAC;AAEF,MAAM,gBAAgB,GAA8B;IAClD,SAAS,EAAE,OAAO;IAClB,WAAW,EAAE,OAAO;IACpB,GAAG,EAAE,QAAQ;IACb,KAAK,EAAE,GAAG;CACX,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CACtC,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EACJ,UAAU,EAAE,EACV,IAAI,EAAE,EAAE,OAAO,EAAE,EACjB,MAAM,EAAE,EAAE,QAAQ,EAAE,EACrB,EACF,EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;0BACY,QAAQ,CAAC,kBAAkB,CAAC;eACvC,IAAI,CAAC,OAAO,CAAC,kBAAkB,CAAC;;;qBAG1B,IAAI,CAAC,aAAa,CAAC;qBACnB,OAAO,CAAC,aAAa,CAAC;;;;gCAIX,QAAQ,CAAC,cAAc,CAAC;4BAC5B,IAAI,CAAC,eAAe,CAAC;;;;;;;;KAQ5C,CAAC;AACJ,CAAC,CACF,CAAC;AACF,cAAc,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAM/C,MAAM,QAAQ,GAAoD,CAAC,EAAE,OAAO,EAAE,GAAG,SAAS,EAAE,EAAE,EAAE;IAC9F,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,CAAC;IAEvC,OAAO,CACL,KAAC,cAAc,OAAK,SAAS,gBAAc,OAAO,YAC/C,CAAC,SAAS,IAAI,gBAAgB,CAAC,OAAO,CAAC,CAAC;YACvC,YAAY,CAAC,OAAO,CAAC;YACrB,gBAAgB,CAAC,OAAO,CAAC;YACzB,OAAO,GACM,CAClB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,QAAQ,CAAC","sourcesContent":["import { FunctionComponent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport useOS from '../../hooks/useOS';\nimport { ForwardProps, NoChildrenProp } from '../../types';\n\nconst osxKeyMapper: { [key: string]: string } = {\n  Command: '⌘',\n  Alt: '⌥',\n  Option: '⌥',\n  Control: '⌃',\n  Return: '↵',\n  Enter: '↵',\n  Delete: 'Del',\n  CommandOrControl: '⌘'\n};\n\nconst windowsKeyMapper: { [key: string]: string } = {\n  Control: 'Ctrl',\n  Alt: 'Alt',\n  Option: 'Alt',\n  Meta: '⊞',\n  Command: '⊞',\n  Backspace: 'Backspace',\n  CommandOrControl: 'Ctrl'\n};\n\nconst generalKeyMapper: { [key: string]: string } = {\n  'Page up': 'Pg up',\n  'Page down': 'Pg dn',\n  Ins: 'Insert',\n  Shift: '⇧'\n};\n\nexport const StyledKeyboard = styled.kbd(\n  ({\n    theme: {\n      base,\n      components: {\n        text: { primary },\n        badges: { keyboard }\n      }\n    }\n  }) => {\n    return css`\n      background-color: ${keyboard['background-color']};\n      color: ${base.palette['foreground-color']};\n      display: inline-block;\n      position: relative;\n      font-family: ${base['font-family']};\n      font-weight: ${primary['font-weight']};\n      overflow: hidden;\n      white-space: nowrap;\n      padding: 0.125rem;\n      border: 0.0125rem solid ${keyboard['border-color']};\n      border-radius: calc(${base['border-radius']} / 4);\n      text-transform: capitalize;\n      text-align: center;\n      min-width: 1.25rem;\n      height: 1.25rem;\n      text-overflow: ellipsis;\n      line-height: 1rem;\n      inset-block-start: calc(1.25rem / 4 - 0.125rem);\n    `;\n  }\n);\nStyledKeyboard.defaultProps = defaultThemeProp;\n\nexport interface KeyboardProps extends NoChildrenProp {\n  keyName: string;\n}\n\nconst Keyboard: FunctionComponent<KeyboardProps & ForwardProps> = ({ keyName, ...restProps }) => {\n  const { windows: isWindows } = useOS();\n\n  return (\n    <StyledKeyboard {...restProps} aria-label={keyName}>\n      {(isWindows && windowsKeyMapper[keyName]) ||\n        osxKeyMapper[keyName] ||\n        generalKeyMapper[keyName] ||\n        keyName}\n    </StyledKeyboard>\n  );\n};\n\nexport default Keyboard;\n"]}
+{"version":3,"file":"Keyboard.js","sourceRoot":"","sources":["../../../src/components/Badges/Keyboard.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAmB,MAAM,OAAO,CAAC;AACpD,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,KAAK,MAAM,mBAAmB,CAAC;AAGtC,MAAM,YAAY,GAA8B;IAC9C,OAAO,EAAE,GAAG;IACZ,GAAG,EAAE,GAAG;IACR,MAAM,EAAE,GAAG;IACX,OAAO,EAAE,GAAG;IACZ,MAAM,EAAE,GAAG;IACX,KAAK,EAAE,GAAG;IACV,MAAM,EAAE,KAAK;IACb,gBAAgB,EAAE,GAAG;CACtB,CAAC;AAEF,MAAM,gBAAgB,GAA8B;IAClD,OAAO,EAAE,MAAM;IACf,GAAG,EAAE,KAAK;IACV,MAAM,EAAE,KAAK;IACb,IAAI,EAAE,GAAG;IACT,OAAO,EAAE,GAAG;IACZ,SAAS,EAAE,WAAW;IACtB,gBAAgB,EAAE,MAAM;CACzB,CAAC;AAEF,MAAM,gBAAgB,GAA8B;IAClD,SAAS,EAAE,OAAO;IAClB,WAAW,EAAE,OAAO;IACpB,GAAG,EAAE,QAAQ;IACb,KAAK,EAAE,GAAG;CACX,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CACtC,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EACJ,UAAU,EAAE,EACV,IAAI,EAAE,EAAE,OAAO,EAAE,EACjB,MAAM,EAAE,EAAE,QAAQ,EAAE,EACrB,EACF,EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;0BACY,QAAQ,CAAC,kBAAkB,CAAC;eACvC,IAAI,CAAC,OAAO,CAAC,kBAAkB,CAAC;;;qBAG1B,IAAI,CAAC,aAAa,CAAC;qBACnB,OAAO,CAAC,aAAa,CAAC;;;;gCAIX,QAAQ,CAAC,cAAc,CAAC;4BAC5B,IAAI,CAAC,eAAe,CAAC;;;;;;;;KAQ5C,CAAC;AACJ,CAAC,CACF,CAAC;AACF,cAAc,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAI/C,eAAe,UAAU,CACvB,SAAS,QAAQ,CAAC,EAAE,OAAO,EAAE,GAAG,SAAS,EAAE,EAAE,GAAG;IAC9C,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,CAAC;IAEvC,OAAO,CACL,KAAC,cAAc,OAAK,SAAS,gBAAc,OAAO,EAAE,GAAG,EAAE,GAAG,YACzD,CAAC,SAAS,IAAI,gBAAgB,CAAC,OAAO,CAAC,CAAC;YACvC,YAAY,CAAC,OAAO,CAAC;YACrB,gBAAgB,CAAC,OAAO,CAAC;YACzB,OAAO,GACM,CAClB,CAAC;AACJ,CAAC,CACF,CAAC","sourcesContent":["import { forwardRef, PropsWithoutRef } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport useOS from '../../hooks/useOS';\nimport { NoChildrenProp, RefElement, WithAttributes } from '../../types';\n\nconst osxKeyMapper: { [key: string]: string } = {\n  Command: '⌘',\n  Alt: '⌥',\n  Option: '⌥',\n  Control: '⌃',\n  Return: '↵',\n  Enter: '↵',\n  Delete: 'Del',\n  CommandOrControl: '⌘'\n};\n\nconst windowsKeyMapper: { [key: string]: string } = {\n  Control: 'Ctrl',\n  Alt: 'Alt',\n  Option: 'Alt',\n  Meta: '⊞',\n  Command: '⊞',\n  Backspace: 'Backspace',\n  CommandOrControl: 'Ctrl'\n};\n\nconst generalKeyMapper: { [key: string]: string } = {\n  'Page up': 'Pg up',\n  'Page down': 'Pg dn',\n  Ins: 'Insert',\n  Shift: '⇧'\n};\n\nexport const StyledKeyboard = styled.kbd(\n  ({\n    theme: {\n      base,\n      components: {\n        text: { primary },\n        badges: { keyboard }\n      }\n    }\n  }) => {\n    return css`\n      background-color: ${keyboard['background-color']};\n      color: ${base.palette['foreground-color']};\n      display: inline-block;\n      position: relative;\n      font-family: ${base['font-family']};\n      font-weight: ${primary['font-weight']};\n      overflow: hidden;\n      white-space: nowrap;\n      padding: 0.125rem;\n      border: 0.0125rem solid ${keyboard['border-color']};\n      border-radius: calc(${base['border-radius']} / 4);\n      text-transform: capitalize;\n      text-align: center;\n      min-width: 1.25rem;\n      height: 1.25rem;\n      text-overflow: ellipsis;\n      line-height: 1rem;\n      inset-block-start: calc(1.25rem / 4 - 0.125rem);\n    `;\n  }\n);\nStyledKeyboard.defaultProps = defaultThemeProp;\n\nexport type KeyboardProps = WithAttributes<'kbd', NoChildrenProp & { keyName: string }>;\n\nexport default forwardRef<RefElement<KeyboardProps>, PropsWithoutRef<KeyboardProps>>(\n  function Keyboard({ keyName, ...restProps }, ref) {\n    const { windows: isWindows } = useOS();\n\n    return (\n      <StyledKeyboard {...restProps} aria-label={keyName} ref={ref}>\n        {(isWindows && windowsKeyMapper[keyName]) ||\n          osxKeyMapper[keyName] ||\n          generalKeyMapper[keyName] ||\n          keyName}\n      </StyledKeyboard>\n    );\n  }\n);\n"]}

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

@@ -1,12 +1,17 @@
-import { FC, ReactText } from 'react';
-import { ForwardProps } from '../../types';
-export interface StatusProps {
+import { ReactText } from 'react';
+import { WithAttributes } from '../../types';
+export type StatusProps = WithAttributes<'span', {
     /** Determines the color to render the Badge as. This color is derived from the Theme. */
     variant: 'success' | 'urgent' | 'warn' | 'pending' | 'info';
     /** The content of the Badge, transformed to uppercase. */
     children: ReactText;
-}
-export declare const StyledStatus: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, StatusProps, never>;
-declare const Status: FC<StatusProps & ForwardProps>;
-export default Status;
+}>;
+export declare const StyledStatus: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {
+    /** Determines the color to render the Badge as. This color is derived from the Theme. */
+    variant: 'success' | 'urgent' | 'warn' | 'pending' | 'info';
+    /** The content of the Badge, transformed to uppercase. */
+    children: ReactText;
+} & Omit<import("../../types").Attributes<"span">, "children" | "variant">, never>;
+declare const _default: import("react").ForwardRefExoticComponent<Pick<StatusProps, "hidden" | "color" | "style" | "translate" | "prefix" | "slot" | "title" | "children" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "property" | "resource" | "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" | "variant"> & import("react").RefAttributes<HTMLSpanElement>>;
+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":"AAAA,OAAO,EAAE,EAAE,EAA+B,SAAS,EAAO,MAAM,OAAO,CAAC;AAMxE,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAG3C,MAAM,WAAW,WAAW;IAC1B,yFAAyF;IACzF,OAAO,EAAE,SAAS,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,GAAG,MAAM,CAAC;IAC5D,0DAA0D;IAC1D,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,eAAO,MAAM,YAAY,mHAqBvB,CAAC;AAIH,QAAA,MAAM,MAAM,EAAE,EAAE,CAAC,WAAW,GAAG,YAAY,CASzC,CAAC;AAMH,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Status.d.ts","sourceRoot":"","sources":["../../../src/components/Badges/Status.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA+B,SAAS,EAAE,MAAM,OAAO,CAAC;AAM/D,OAAO,EAAc,cAAc,EAAE,MAAM,aAAa,CAAC;AAGzD,MAAM,MAAM,WAAW,GAAG,cAAc,CACtC,MAAM,EACN;IACE,yFAAyF;IACzF,OAAO,EAAE,SAAS,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,GAAG,MAAM,CAAC;IAC5D,0DAA0D;IAC1D,QAAQ,EAAE,SAAS,CAAC;CACrB,CACF,CAAC;AACF,eAAO,MAAM,YAAY;IANrB,yFAAyF;aAChF,SAAS,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,GAAG,MAAM;IAC3D,0DAA0D;cAChD,SAAS;kFAwBrB,CAAC;;AAIH,wBASG"}

package/lib/components/Badges/Status.js

@@ -26,11 +26,7 @@ export const StyledStatus = styled.span(props => {
   `;
 });
 StyledStatus.defaultProps = defaultThemeProp;
-const Status = forwardRef(function Status({ variant, children, ...restProps }, ref) {
+export default forwardRef(function Status({ variant = 'info', children, ...restProps }, ref) {
     return (_jsx(StyledStatus, { ...restProps, variant: variant, ref: ref, children: children }));
 });
-Status.defaultProps = {
-    variant: 'info'
-};
-export default Status;
 //# 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,EAAM,UAAU,EAAmC,MAAM,OAAO,CAAC;AACxE,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,MAAM,aAAa,CAAC;AASvC,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,IAAI,CAAc,KAAK,CAAC,EAAE;IAC3D,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;wBACY,UAAU;iCACD,YAAY;aAChC,UAAU;wCACiB,MAAM;;iBAE7B,QAAQ,CAAC,GAAG;;wBAEL,OAAO;iBACd,OAAO;;GAErB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,YAAY,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE7C,MAAM,MAAM,GAAmC,UAAU,CAAC,SAAS,MAAM,CACvE,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAgC,EACjE,GAAyB;IAEzB,OAAO,CACL,KAAC,YAAY,OAAK,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,GAAG,YACpD,QAAQ,GACI,CAChB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,CAAC,YAAY,GAAG;IACpB,OAAO,EAAE,MAAM;CAChB,CAAC;AAEF,eAAe,MAAM,CAAC","sourcesContent":["import { FC, forwardRef, PropsWithoutRef, ReactText, Ref } from 'react';\nimport styled, { css } from 'styled-components';\nimport { rgba } from 'polished';\n\nimport { calculateFontSize } from '../../styles';\nimport { defaultThemeProp } from '../../theme';\nimport { ForwardProps } from '../../types';\nimport { tryCatch } from '../../utils';\n\nexport interface StatusProps {\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\nexport const StyledStatus = styled.span<StatusProps>(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    background-color: ${background};\n    border-radius: calc(0.25 * ${borderRadius});\n    color: ${foreground};\n    box-shadow: inset 0 0 0 0.0625rem ${shadow};\n    display: inline-block;\n    font-size: ${fontSize.xxs};\n    font-weight: bold;\n    line-height: calc(${spacing} * 2.5);\n    padding: 0 ${spacing};\n    text-transform: uppercase;\n  `;\n});\n\nStyledStatus.defaultProps = defaultThemeProp;\n\nconst Status: FC<StatusProps & ForwardProps> = forwardRef(function Status(\n  { variant, children, ...restProps }: PropsWithoutRef<StatusProps>,\n  ref: Ref<HTMLSpanElement>\n) {\n  return (\n    <StyledStatus {...restProps} variant={variant} ref={ref}>\n      {children}\n    </StyledStatus>\n  );\n});\n\nStatus.defaultProps = {\n  variant: 'info'\n};\n\nexport default Status;\n"]}
+{"version":3,"file":"Status.js","sourceRoot":"","sources":["../../../src/components/Badges/Status.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAA8B,MAAM,OAAO,CAAC;AAC/D,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,MAAM,aAAa,CAAC;AAWvC,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,IAAI,CAAc,KAAK,CAAC,EAAE;IAC3D,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;wBACY,UAAU;iCACD,YAAY;aAChC,UAAU;wCACiB,MAAM;;iBAE7B,QAAQ,CAAC,GAAG;;wBAEL,OAAO;iBACd,OAAO;;GAErB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,YAAY,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE7C,eAAe,UAAU,CAAwD,SAAS,MAAM,CAC9F,EAAE,OAAO,GAAG,MAAM,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAE,EAC5C,GAAG;IAEH,OAAO,CACL,KAAC,YAAY,OAAK,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,GAAG,YACpD,QAAQ,GACI,CAChB,CAAC;AACJ,CAAC,CAAC,CAAC","sourcesContent":["import { forwardRef, PropsWithoutRef, ReactText } from 'react';\nimport styled, { css } from 'styled-components';\nimport { rgba } from 'polished';\n\nimport { calculateFontSize } from '../../styles';\nimport { defaultThemeProp } from '../../theme';\nimport { RefElement, WithAttributes } from '../../types';\nimport { tryCatch } from '../../utils';\n\nexport type StatusProps = WithAttributes<\n  'span',\n  {\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>;\nexport const StyledStatus = styled.span<StatusProps>(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    background-color: ${background};\n    border-radius: calc(0.25 * ${borderRadius});\n    color: ${foreground};\n    box-shadow: inset 0 0 0 0.0625rem ${shadow};\n    display: inline-block;\n    font-size: ${fontSize.xxs};\n    font-weight: bold;\n    line-height: calc(${spacing} * 2.5);\n    padding: 0 ${spacing};\n    text-transform: uppercase;\n  `;\n});\n\nStyledStatus.defaultProps = defaultThemeProp;\n\nexport default forwardRef<RefElement<StatusProps>, PropsWithoutRef<StatusProps>>(function Status(\n  { variant = 'info', children, ...restProps },\n  ref\n) {\n  return (\n    <StyledStatus {...restProps} variant={variant} ref={ref}>\n      {children}\n    </StyledStatus>\n  );\n});\n"]}

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

@@ -1,6 +1,5 @@
-import { FunctionComponent, Ref, MouseEventHandler } from 'react';
-import { BaseProps, ForwardProps, HeadingTag, NoChildrenProp } from '../../types';
-import { UnorderedList } from '../List';
+import { Ref, MouseEventHandler } from 'react';
+import { ForwardProps, HeadingTag, NoChildrenProp, WithAttributes } from '../../types';
 export interface BannerHandleValue {
     /** Used to apply focus to the banner via an imperative handle. */
     focus: () => void;
@@ -15,9 +14,8 @@ export interface BannerMessage {
     };
     items?: (BannerMessage | string)[];
 }
-export interface BannerProps extends BaseProps, NoChildrenProp {
-    /** Controls the styling of the Banner. */
-    variant: 'urgent' | 'warning' | 'success' | 'info';
+export type BannerProps = WithAttributes<'div', NoChildrenProp & {
+    /** Controls the styling of the Banner. */ variant: 'urgent' | 'warning' | 'success' | 'info';
     /**
      * The heading tag to render the provided heading as. This is agnostic to the styling of the heading.
      * @default 'h2'
@@ -29,9 +27,7 @@ export interface BannerProps extends BaseProps, NoChildrenProp {
     onDismiss?: MouseEventHandler;
     /** Ref that can be used to access the imperative handle. */
     handle?: Ref<BannerHandleValue>;
-    /** Ref forwarded to the wrapping element. */
-    ref?: Ref<HTMLDivElement>;
-}
+}>;
 export declare const StyledBanner: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
     headingTag: BannerProps['headingTag'];
 }, never>;
@@ -40,8 +36,8 @@ export declare const StyledBannerHeader: import("styled-components").StyledCompo
 export declare const StyledBannerContent: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
     expandable?: boolean | undefined;
 }, never>;
-export declare const StyledBannerMessageList: typeof UnorderedList;
+export declare const StyledBannerMessageList: import("styled-components").StyledComponent<import("react").FC<import("../List").UnorderedListProps & ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledBannerMessage: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
-declare const Banner: FunctionComponent<BannerProps & ForwardProps>;
-export default Banner;
+declare const _default: import("react").ForwardRefExoticComponent<Pick<BannerProps, "hidden" | "color" | "style" | "translate" | "prefix" | "slot" | "title" | "children" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "property" | "resource" | "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" | "variant" | "onDismiss" | "headingTag" | "messages" | "handle"> & import("react").RefAttributes<HTMLDivElement>>;
+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":"AAAA,OAAO,EAGL,iBAAiB,EAEjB,GAAG,EACH,iBAAiB,EAIlB,MAAM,OAAO,CAAC;AAKf,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,UAAU,EAAE,cAAc,EAAc,MAAM,aAAa,CAAC;AAiB9F,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAWxC,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,WAAW,WAAY,SAAQ,SAAS,EAAE,cAAc;IAC5D,0CAA0C;IAC1C,OAAO,EAAE,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,CAAC;IACnD;;;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;IAChC,6CAA6C;IAC7C,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,eAAO,MAAM,YAAY;gBAA4B,WAAW,CAAC,YAAY,CAAC;SAU7E,CAAC;AAIF,eAAO,MAAM,kBAAkB,mIAiB7B,CAAC;AAIH,eAAO,MAAM,kBAAkB,yGAoB7B,CAAC;AAIH,eAAO,MAAM,mBAAmB;;SAW9B,CAAC;AAIH,eAAO,MAAM,uBAAuB,EAAE,OAAO,aAM5C,CAAC;AAIF,eAAO,MAAM,mBAAmB,0GAG/B,CAAC;AAyDF,QAAA,MAAM,MAAM,EAAE,iBAAiB,CAAC,WAAW,GAAG,YAAY,CAqJxD,CAAC;AAEH,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Banner.d.ts","sourceRoot":"","sources":["../../../src/components/Banner/Banner.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,GAAG,EACH,iBAAiB,EAIlB,MAAM,OAAO,CAAC;AAKf,OAAO,EACL,YAAY,EACZ,UAAU,EACV,cAAc,EAGd,cAAc,EACf,MAAM,aAAa,CAAC;AA4BrB,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,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,CACF,CAAC;AAEF,eAAO,MAAM,YAAY;gBAA4B,WAAW,CAAC,YAAY,CAAC;SAU7E,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;;AAyDF,wBA8IG"}

package/lib/components/Banner/Banner.js

@@ -114,7 +114,7 @@ const prepareMessages = (messages) => {
         count
     ];
 };
-const Banner = forwardRef(function Banner({ variant, headingTag = 'h2', messages, onDismiss, handle, ...restProps }, ref) {
+export default forwardRef(function Banner({ variant, headingTag = 'h2', messages, onDismiss, handle, ...restProps }, ref) {
     const [messagesToRender, count] = useMemo(() => prepareMessages(messages), [messages]);
     const t = useI18n();
     const [collapsed, setCollapsed] = useState(count > 2);
@@ -160,5 +160,4 @@ const Banner = forwardRef(function Banner({ variant, headingTag = 'h2', messages
                                         setCollapsed(cur => !cur);
                                     }, label: t(collapsed ? 'expand' : 'collapse'), "aria-expanded": collapsed ? 'false' : 'true', variant: 'simple', icon: true, children: _jsx(Icon, { name: 'caret-right' }) }) }), _jsx(Grid, { item: { area: 'dismiss', alignSelf: 'center' }, children: onDismiss && (_jsx(Button, { onClick: onDismiss, label: t('dismiss'), "aria-label": t('banner_dismiss_button_label_a11y'), variant: 'simple', icon: true, children: _jsx(Icon, { name: 'times' }) })) })] }), _jsx(ExpandCollapse, { collapsed: collapsed, children: _jsx(StyledBannerMessageList, { items: messagesToRender }) })] }))] }));
 });
-export default Banner;
 //# sourceMappingURL=Banner.js.map

package/lib/components/Banner/Banner.js.map

@@ -1 +1 @@
-{"version":3,"file":"Banner.js","sourceRoot":"","sources":["../../../src/components/Banner/Banner.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  useState,\n  forwardRef,\n  FunctionComponent,\n  PropsWithoutRef,\n  Ref,\n  MouseEventHandler,\n  useMemo,\n  ReactNode,\n  useImperativeHandle\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport { getContrast, readableColor } from 'polished';\n\nimport { defaultThemeProp } from '../../theme';\nimport { BaseProps, ForwardProps, HeadingTag, NoChildrenProp, OmitStrict } from '../../types';\nimport Button, { StyledButton } from '../Button';\nimport { focusHeadingOrContainer, tryCatch } from '../../utils';\nimport { useConsolidatedRef, useDirection, useI18n } from '../../hooks';\nimport Flex from '../Flex';\nimport Text from '../Text';\nimport Grid from '../Grid';\nimport ExpandCollapse from '../ExpandCollapse';\nimport { Count } from '../Badges';\nimport Icon, { StyledIcon, registerIcon } from '../Icon';\nimport * as timesIcon from '../Icon/icons/times.icon';\nimport * as caretRightIcon from '../Icon/icons/caret-right.icon';\nimport * as warnSolidIcon from '../Icon/icons/warn-solid.icon';\nimport * as flagWaveSolidIcon from '../Icon/icons/flag-wave-solid.icon';\nimport * as informationSolidIcon from '../Icon/icons/information-solid.icon';\nimport * as checkIcon from '../Icon/icons/check.icon';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\nimport { UnorderedList } from '../List';\n\nregisterIcon(\n  timesIcon,\n  caretRightIcon,\n  warnSolidIcon,\n  flagWaveSolidIcon,\n  informationSolidIcon,\n  checkIcon\n);\n\nexport interface BannerHandleValue {\n  /** Used to apply focus to the banner via an imperative handle. */\n  focus: () => void;\n}\n\nexport interface BannerMessage {\n  label: string;\n  description?: string;\n  action?: {\n    text: string;\n    onClick?: MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>;\n    href?: string;\n  };\n  items?: (BannerMessage | string)[];\n}\n\nexport interface BannerProps extends BaseProps, NoChildrenProp {\n  /** Controls the styling of the Banner. */\n  variant: 'urgent' | 'warning' | 'success' | 'info';\n  /**\n   * The heading tag to render the provided heading as. This is agnostic to the styling of the heading.\n   * @default 'h2'\n   */\n  headingTag?: HeadingTag;\n  /** Pass one or more descriptive messages to inform the user. */\n  messages: (string | BannerMessage)[];\n  /** Callback when user explicitly dismisses the Banner. */\n  onDismiss?: MouseEventHandler;\n  /** Ref that can be used to access the imperative handle. */\n  handle?: Ref<BannerHandleValue>;\n  /** Ref forwarded to the wrapping element. */\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport const StyledBanner = styled.div<{ headingTag: BannerProps['headingTag'] }>(\n  ({ headingTag, theme }) => {\n    return css`\n      border-radius: ${theme.components.card['border-radius']};\n\n      &:has(${headingTag}:focus) {\n        box-shadow: ${theme.base.shadow.focus};\n      }\n    `;\n  }\n);\n\nStyledBanner.defaultProps = defaultThemeProp;\n\nexport const StyledBannerStatus = styled.div<Pick<BannerProps, 'variant'>>(({ variant, theme }) => {\n  const { background } = theme.components.banner[variant];\n  const color = tryCatch(() =>\n    getContrast(background, theme.base.palette['primary-background']) >= 3\n      ? theme.base.palette['primary-background']\n      : readableColor(background)\n  );\n\n  return css`\n    background-color: ${background};\n    color: ${color};\n    border-start-start-radius: inherit;\n    border-end-start-radius: inherit;\n    border: 0.0625rem solid ${theme.base.palette['border-line']};\n    border-inline-end: none;\n    font-size: 1.25rem;\n  `;\n});\n\nStyledBannerStatus.defaultProps = defaultThemeProp;\n\nexport const StyledBannerHeader = styled.div(({ theme }) => {\n  const { rtl } = useDirection();\n\n  return css`\n    min-height: 2.125rem;\n\n    ${StyledButton}[aria-expanded] {\n      ${StyledIcon} {\n        transition: rotate ${theme.base.animation.speed} ${theme.base.animation.timing.ease};\n      }\n\n      &[aria-expanded='true'] ${StyledIcon} {\n        rotate: 90deg;\n      }\n\n      &[aria-expanded='false'] ${StyledIcon} {\n        rotate: ${rtl ? 180 : 0}deg;\n      }\n    }\n  `;\n});\n\nStyledBannerHeader.defaultProps = defaultThemeProp;\n\nexport const StyledBannerContent = styled.div<{ expandable?: boolean }>(({ expandable, theme }) => {\n  return css`\n    background: ${theme.components.card.background};\n    padding-block: calc(0.5 * ${theme.base.spacing});\n    padding-inline-start: calc(${expandable ? 0.5 : 2} * ${theme.base.spacing});\n    padding-inline-end: calc(0.5 * ${theme.base.spacing});\n    border: 0.0625rem solid ${theme.base.palette['border-line']};\n    border-inline-start: none;\n    border-start-end-radius: inherit;\n    border-end-end-radius: inherit;\n  `;\n});\n\nStyledBannerContent.defaultProps = defaultThemeProp;\n\nexport const StyledBannerMessageList: typeof UnorderedList = styled(UnorderedList)(\n  ({ theme }) => css`\n    padding-block-end: calc(0.5 * ${theme.base.spacing});\n    padding-inline-start: calc(5 * ${theme.base.spacing});\n    padding-inline-end: calc(2 * ${theme.base.spacing});\n  `\n);\n\nStyledBannerMessageList.defaultProps = defaultThemeProp;\n\nexport const StyledBannerMessage = styled.span`\n  overflow-wrap: break-word;\n  list-style: none;\n`;\n\nStyledBannerMessage.defaultProps = defaultThemeProp;\n\nconst BannerMessageItem = forwardRef<\n  HTMLLIElement,\n  OmitStrict<BannerMessage, 'items'> & ForwardProps\n>(function BannerMessageItem({ label, description, action, ...restProps }, ref) {\n  return (\n    <StyledBannerMessage {...restProps} ref={ref}>\n      <span>{label}</span>\n      {description && (\n        <>\n          {' '}\n          <Text variant='secondary'>{description}</Text>\n        </>\n      )}\n      {action && (\n        <>\n          {' '}\n          <Text variant='secondary'>\n            <Button variant='link' href={action.href} onClick={action.onClick} {...action}>\n              {action.text}\n            </Button>\n          </Text>\n        </>\n      )}\n    </StyledBannerMessage>\n  );\n});\n\nconst prepareMessages = (\n  messages: (string | BannerMessage)[]\n): [messages: ReactNode[], count: number] => {\n  let count = 0;\n\n  return [\n    messages.flatMap(msg => {\n      count += 1;\n\n      if (typeof msg === 'string') {\n        return [<BannerMessageItem label={msg} />];\n      }\n\n      if (msg.items) {\n        const { items, ...restMsg } = msg;\n        const [subMessages, subCount] = prepareMessages(items);\n        count += subCount;\n        return [<BannerMessageItem {...restMsg} />, subMessages];\n      }\n\n      return [<BannerMessageItem {...msg} />];\n    }),\n    count\n  ];\n};\n\nconst Banner: FunctionComponent<BannerProps & ForwardProps> = forwardRef(function Banner(\n  {\n    variant,\n    headingTag = 'h2',\n    messages,\n    onDismiss,\n    handle,\n    ...restProps\n  }: PropsWithoutRef<BannerProps>,\n  ref: BannerProps['ref']\n) {\n  const [messagesToRender, count] = useMemo(() => prepareMessages(messages), [messages]);\n\n  const t = useI18n();\n  const [collapsed, setCollapsed] = useState(count > 2);\n\n  const bannerRef = useConsolidatedRef(ref);\n\n  let role: string;\n  let icon: string;\n  let heading: string;\n  let ariaLive: string;\n\n  switch (variant) {\n    case 'urgent':\n      heading = t('error');\n      icon = 'warn-solid';\n      role = 'alert';\n      ariaLive = 'assertive';\n      break;\n    case 'warning':\n      heading = t('warning');\n      icon = 'flag-wave-solid';\n      role = 'alert';\n      ariaLive = 'assertive';\n      break;\n    case 'success':\n      heading = t('success');\n      icon = 'check';\n      role = 'none';\n      ariaLive = 'polite';\n      break;\n    case 'info':\n    default:\n      heading = t('information');\n      icon = 'information-solid';\n      role = 'none';\n      ariaLive = 'polite';\n      break;\n  }\n\n  useImperativeHandle(\n    handle,\n    () => ({\n      focus: () => {\n        if (bannerRef.current) focusHeadingOrContainer(bannerRef.current, heading);\n      }\n    }),\n    []\n  );\n\n  return (\n    <Grid\n      {...restProps}\n      as={StyledBanner}\n      container={{ cols: '2rem minmax(0, 1fr)' }}\n      role={role}\n      aria-live={ariaLive}\n      headingTag={headingTag}\n      ref={bannerRef}\n    >\n      <Flex\n        as={StyledBannerStatus}\n        container={{ justify: 'center', alignItems: 'start', pad: [1.5, 0] }}\n        variant={variant}\n      >\n        <Icon name={icon} />\n      </Flex>\n      {count === 1 ? (\n        <Flex container={{ alignItems: 'start' }} as={StyledBannerContent}>\n          <VisuallyHiddenText as={headingTag}>{`${heading} ${count}`}</VisuallyHiddenText>\n          <Flex item={{ alignSelf: 'center', grow: 1 }} as='ul'>\n            {typeof messages[0] === 'string' ? (\n              <BannerMessageItem label={messages[0]} as='li' />\n            ) : (\n              <BannerMessageItem {...messages[0]} as='li' />\n            )}\n          </Flex>\n          {onDismiss && (\n            <Button\n              onClick={onDismiss}\n              label={t('dismiss')}\n              aria-label={t('banner_dismiss_button_label_a11y')}\n              variant='simple'\n              icon\n            >\n              <Icon name='times' />\n            </Button>\n          )}\n        </Flex>\n      ) : (\n        <StyledBannerContent expandable>\n          <Grid\n            as={StyledBannerHeader}\n            container={{ cols: 'auto 1fr auto', areas: '\"toggle heading dismiss\"', gap: 0.5 }}\n          >\n            <Grid\n              container={{ cols: 'min-content min-content', gap: 0.5, alignItems: 'center' }}\n              item={{ area: 'heading', alignSelf: 'center' }}\n              as={Text}\n              forwardedAs={headingTag}\n              variant='h2'\n            >\n              {heading} <Count>{count}</Count>\n            </Grid>\n            <Grid item={{ area: 'toggle', alignSelf: 'center' }}>\n              <Button\n                onClick={() => {\n                  setCollapsed(cur => !cur);\n                }}\n                label={t(collapsed ? 'expand' : 'collapse')}\n                aria-expanded={collapsed ? 'false' : 'true'}\n                variant='simple'\n                icon\n              >\n                <Icon name='caret-right' />\n              </Button>\n            </Grid>\n            <Grid item={{ area: 'dismiss', alignSelf: 'center' }}>\n              {onDismiss && (\n                <Button\n                  onClick={onDismiss}\n                  label={t('dismiss')}\n                  aria-label={t('banner_dismiss_button_label_a11y')}\n                  variant='simple'\n                  icon\n                >\n                  <Icon name='times' />\n                </Button>\n              )}\n            </Grid>\n          </Grid>\n          <ExpandCollapse collapsed={collapsed}>\n            <StyledBannerMessageList items={messagesToRender} />\n          </ExpandCollapse>\n        </StyledBannerContent>\n      )}\n    </Grid>\n  );\n});\n\nexport default Banner;\n"]}
+{"version":3,"file":"Banner.js","sourceRoot":"","sources":["../../../src/components/Banner/Banner.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,QAAQ,EACR,UAAU,EAIV,OAAO,EAEP,mBAAmB,EACpB,MAAM,OAAO,CAAC;AACf,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAEtD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAS/C,OAAO,MAAM,EAAE,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AACjD,OAAO,EAAE,uBAAuB,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAChE,OAAO,EAAE,kBAAkB,EAAE,YAAY,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACxE,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,cAAc,MAAM,mBAAmB,CAAC;AAC/C,OAAO,EAAE,KAAK,EAAE,MAAM,WAAW,CAAC;AAClC,OAAO,IAAI,EAAE,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AACzD,OAAO,KAAK,SAAS,MAAM,0BAA0B,CAAC;AACtD,OAAO,KAAK,cAAc,MAAM,gCAAgC,CAAC;AACjE,OAAO,KAAK,aAAa,MAAM,+BAA+B,CAAC;AAC/D,OAAO,KAAK,iBAAiB,MAAM,oCAAoC,CAAC;AACxE,OAAO,KAAK,oBAAoB,MAAM,sCAAsC,CAAC;AAC7E,OAAO,KAAK,SAAS,MAAM,0BAA0B,CAAC;AACtD,OAAO,kBAAkB,MAAM,uBAAuB,CAAC;AACvD,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAExC,YAAY,CACV,SAAS,EACT,cAAc,EACd,aAAa,EACb,iBAAiB,EACjB,oBAAoB,EACpB,SAAS,CACV,CAAC;AAoCF,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,GAAG,CACpC,CAAC,EAAE,UAAU,EAAE,KAAK,EAAE,EAAE,EAAE;IACxB,OAAO,GAAG,CAAA;uBACS,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,eAAe,CAAC;;cAE/C,UAAU;sBACF,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;;KAExC,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,YAAY,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE7C,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAA+B,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,EAAE;IAChG,MAAM,EAAE,UAAU,EAAE,GAAG,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;IACxD,MAAM,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE,CAC1B,WAAW,CAAC,UAAU,EAAE,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC,CAAC,IAAI,CAAC;QACpE,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC;QAC1C,CAAC,CAAC,aAAa,CAAC,UAAU,CAAC,CAC9B,CAAC;IAEF,OAAO,GAAG,CAAA;wBACY,UAAU;aACrB,KAAK;;;8BAGY,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;;;GAG5D,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACzD,MAAM,EAAE,GAAG,EAAE,GAAG,YAAY,EAAE,CAAC;IAE/B,OAAO,GAAG,CAAA;;;MAGN,YAAY;QACV,UAAU;6BACW,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,IAAI,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI;;;gCAG3D,UAAU;;;;iCAIT,UAAU;kBACzB,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;;;GAG5B,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,MAAM,CAAC,MAAM,mBAAmB,GAAG,MAAM,CAAC,GAAG,CAA2B,CAAC,EAAE,UAAU,EAAE,KAAK,EAAE,EAAE,EAAE;IAChG,OAAO,GAAG,CAAA;kBACM,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,UAAU;gCAClB,KAAK,CAAC,IAAI,CAAC,OAAO;iCACjB,UAAU,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,MAAM,KAAK,CAAC,IAAI,CAAC,OAAO;qCACxC,KAAK,CAAC,IAAI,CAAC,OAAO;8BACzB,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;;;;GAI5D,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,mBAAmB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEpD,MAAM,CAAC,MAAM,uBAAuB,GAAG,MAAM,CAAC,aAAa,CAAC,CAC1D,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;oCACgB,KAAK,CAAC,IAAI,CAAC,OAAO;qCACjB,KAAK,CAAC,IAAI,CAAC,OAAO;mCACpB,KAAK,CAAC,IAAI,CAAC,OAAO;GAClD,CACF,CAAC;AAEF,uBAAuB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAExD,MAAM,CAAC,MAAM,mBAAmB,GAAG,MAAM,CAAC,IAAI,CAAA;;;CAG7C,CAAC;AAEF,mBAAmB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEpD,MAAM,iBAAiB,GAAG,UAAU,CAGlC,SAAS,iBAAiB,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,GAAG,SAAS,EAAE,EAAE,GAAG;IAC5E,OAAO,CACL,MAAC,mBAAmB,OAAK,SAAS,EAAE,GAAG,EAAE,GAAG,aAC1C,yBAAO,KAAK,GAAQ,EACnB,WAAW,IAAI,CACd,8BACG,GAAG,EACJ,KAAC,IAAI,IAAC,OAAO,EAAC,WAAW,YAAE,WAAW,GAAQ,IAC7C,CACJ,EACA,MAAM,IAAI,CACT,8BACG,GAAG,EACJ,KAAC,IAAI,IAAC,OAAO,EAAC,WAAW,YACvB,KAAC,MAAM,IAAC,OAAO,EAAC,MAAM,EAAC,IAAI,EAAE,MAAM,CAAC,IAAI,EAAE,OAAO,EAAE,MAAM,CAAC,OAAO,KAAM,MAAM,YAC1E,MAAM,CAAC,IAAI,GACL,GACJ,IACN,CACJ,IACmB,CACvB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,eAAe,GAAG,CACtB,QAAoC,EACI,EAAE;IAC1C,IAAI,KAAK,GAAG,CAAC,CAAC;IAEd,OAAO;QACL,QAAQ,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE;YACrB,KAAK,IAAI,CAAC,CAAC;YAEX,IAAI,OAAO,GAAG,KAAK,QAAQ,EAAE;gBAC3B,OAAO,CAAC,KAAC,iBAAiB,IAAC,KAAK,EAAE,GAAG,GAAI,CAAC,CAAC;aAC5C;YAED,IAAI,GAAG,CAAC,KAAK,EAAE;gBACb,MAAM,EAAE,KAAK,EAAE,GAAG,OAAO,EAAE,GAAG,GAAG,CAAC;gBAClC,MAAM,CAAC,WAAW,EAAE,QAAQ,CAAC,GAAG,eAAe,CAAC,KAAK,CAAC,CAAC;gBACvD,KAAK,IAAI,QAAQ,CAAC;gBAClB,OAAO,CAAC,KAAC,iBAAiB,OAAK,OAAO,GAAI,EAAE,WAAW,CAAC,CAAC;aAC1D;YAED,OAAO,CAAC,KAAC,iBAAiB,OAAK,GAAG,GAAI,CAAC,CAAC;QAC1C,CAAC,CAAC;QACF,KAAK;KACN,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,UAAU,CAAwD,SAAS,MAAM,CAC9F,EAAE,OAAO,EAAE,UAAU,GAAG,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,EAAE,GAAG,SAAS,EAAE,EACzE,GAAG;IAEH,MAAM,CAAC,gBAAgB,EAAE,KAAK,CAAC,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,eAAe,CAAC,QAAQ,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEvF,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC;IAEtD,MAAM,SAAS,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAC;IAE1C,IAAI,IAAY,CAAC;IACjB,IAAI,IAAY,CAAC;IACjB,IAAI,OAAe,CAAC;IACpB,IAAI,QAAgB,CAAC;IAErB,QAAQ,OAAO,EAAE;QACf,KAAK,QAAQ;YACX,OAAO,GAAG,CAAC,CAAC,OAAO,CAAC,CAAC;YACrB,IAAI,GAAG,YAAY,CAAC;YACpB,IAAI,GAAG,OAAO,CAAC;YACf,QAAQ,GAAG,WAAW,CAAC;YACvB,MAAM;QACR,KAAK,SAAS;YACZ,OAAO,GAAG,CAAC,CAAC,SAAS,CAAC,CAAC;YACvB,IAAI,GAAG,iBAAiB,CAAC;YACzB,IAAI,GAAG,OAAO,CAAC;YACf,QAAQ,GAAG,WAAW,CAAC;YACvB,MAAM;QACR,KAAK,SAAS;YACZ,OAAO,GAAG,CAAC,CAAC,SAAS,CAAC,CAAC;YACvB,IAAI,GAAG,OAAO,CAAC;YACf,IAAI,GAAG,MAAM,CAAC;YACd,QAAQ,GAAG,QAAQ,CAAC;YACpB,MAAM;QACR,KAAK,MAAM,CAAC;QACZ;YACE,OAAO,GAAG,CAAC,CAAC,aAAa,CAAC,CAAC;YAC3B,IAAI,GAAG,mBAAmB,CAAC;YAC3B,IAAI,GAAG,MAAM,CAAC;YACd,QAAQ,GAAG,QAAQ,CAAC;YACpB,MAAM;KACT;IAED,mBAAmB,CACjB,MAAM,EACN,GAAG,EAAE,CAAC,CAAC;QACL,KAAK,EAAE,GAAG,EAAE;YACV,IAAI,SAAS,CAAC,OAAO;gBAAE,uBAAuB,CAAC,SAAS,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;QAC7E,CAAC;KACF,CAAC,EACF,EAAE,CACH,CAAC;IAEF,OAAO,CACL,MAAC,IAAI,OACC,SAAS,EACb,EAAE,EAAE,YAAY,EAChB,SAAS,EAAE,EAAE,IAAI,EAAE,qBAAqB,EAAE,EAC1C,IAAI,EAAE,IAAI,eACC,QAAQ,EACnB,UAAU,EAAE,UAAU,EACtB,GAAG,EAAE,SAAS,aAEd,KAAC,IAAI,IACH,EAAE,EAAE,kBAAkB,EACtB,SAAS,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,EACpE,OAAO,EAAE,OAAO,YAEhB,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,GAAI,GACf,EACN,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,CACb,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,OAAO,EAAE,EAAE,EAAE,EAAE,mBAAmB,aAC/D,KAAC,kBAAkB,IAAC,EAAE,EAAE,UAAU,YAAG,GAAG,OAAO,IAAI,KAAK,EAAE,GAAsB,EAChF,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,EAAC,IAAI,YAClD,OAAO,QAAQ,CAAC,CAAC,CAAC,KAAK,QAAQ,CAAC,CAAC,CAAC,CACjC,KAAC,iBAAiB,IAAC,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,EAAE,EAAE,EAAC,IAAI,GAAG,CAClD,CAAC,CAAC,CAAC,CACF,KAAC,iBAAiB,OAAK,QAAQ,CAAC,CAAC,CAAC,EAAE,EAAE,EAAC,IAAI,GAAG,CAC/C,GACI,EACN,SAAS,IAAI,CACZ,KAAC,MAAM,IACL,OAAO,EAAE,SAAS,EAClB,KAAK,EAAE,CAAC,CAAC,SAAS,CAAC,gBACP,CAAC,CAAC,kCAAkC,CAAC,EACjD,OAAO,EAAC,QAAQ,EAChB,IAAI,kBAEJ,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,GAAG,GACd,CACV,IACI,CACR,CAAC,CAAC,CAAC,CACF,MAAC,mBAAmB,IAAC,UAAU,mBAC7B,MAAC,IAAI,IACH,EAAE,EAAE,kBAAkB,EACtB,SAAS,EAAE,EAAE,IAAI,EAAE,eAAe,EAAE,KAAK,EAAE,0BAA0B,EAAE,GAAG,EAAE,GAAG,EAAE,aAEjF,MAAC,IAAI,IACH,SAAS,EAAE,EAAE,IAAI,EAAE,yBAAyB,EAAE,GAAG,EAAE,GAAG,EAAE,UAAU,EAAE,QAAQ,EAAE,EAC9E,IAAI,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,EAC9C,EAAE,EAAE,IAAI,EACR,WAAW,EAAE,UAAU,EACvB,OAAO,EAAC,IAAI,aAEX,OAAO,OAAE,KAAC,KAAK,cAAE,KAAK,GAAS,IAC3B,EACP,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAAE,YACjD,KAAC,MAAM,IACL,OAAO,EAAE,GAAG,EAAE;wCACZ,YAAY,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC;oCAC5B,CAAC,EACD,KAAK,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,mBAC5B,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,EAC3C,OAAO,EAAC,QAAQ,EAChB,IAAI,kBAEJ,KAAC,IAAI,IAAC,IAAI,EAAC,aAAa,GAAG,GACpB,GACJ,EACP,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,YACjD,SAAS,IAAI,CACZ,KAAC,MAAM,IACL,OAAO,EAAE,SAAS,EAClB,KAAK,EAAE,CAAC,CAAC,SAAS,CAAC,gBACP,CAAC,CAAC,kCAAkC,CAAC,EACjD,OAAO,EAAC,QAAQ,EAChB,IAAI,kBAEJ,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,GAAG,GACd,CACV,GACI,IACF,EACP,KAAC,cAAc,IAAC,SAAS,EAAE,SAAS,YAClC,KAAC,uBAAuB,IAAC,KAAK,EAAE,gBAAgB,GAAI,GACrC,IACG,CACvB,IACI,CACR,CAAC;AACJ,CAAC,CAAC,CAAC","sourcesContent":["import {\n  useState,\n  forwardRef,\n  PropsWithoutRef,\n  Ref,\n  MouseEventHandler,\n  useMemo,\n  ReactNode,\n  useImperativeHandle\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport { getContrast, readableColor } from 'polished';\n\nimport { defaultThemeProp } from '../../theme';\nimport {\n  ForwardProps,\n  HeadingTag,\n  NoChildrenProp,\n  OmitStrict,\n  RefElement,\n  WithAttributes\n} from '../../types';\nimport Button, { StyledButton } from '../Button';\nimport { focusHeadingOrContainer, tryCatch } from '../../utils';\nimport { useConsolidatedRef, useDirection, useI18n } from '../../hooks';\nimport Flex from '../Flex';\nimport Text from '../Text';\nimport Grid from '../Grid';\nimport ExpandCollapse from '../ExpandCollapse';\nimport { Count } from '../Badges';\nimport Icon, { StyledIcon, registerIcon } from '../Icon';\nimport * as timesIcon from '../Icon/icons/times.icon';\nimport * as caretRightIcon from '../Icon/icons/caret-right.icon';\nimport * as warnSolidIcon from '../Icon/icons/warn-solid.icon';\nimport * as flagWaveSolidIcon from '../Icon/icons/flag-wave-solid.icon';\nimport * as informationSolidIcon from '../Icon/icons/information-solid.icon';\nimport * as checkIcon from '../Icon/icons/check.icon';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\nimport { UnorderedList } from '../List';\n\nregisterIcon(\n  timesIcon,\n  caretRightIcon,\n  warnSolidIcon,\n  flagWaveSolidIcon,\n  informationSolidIcon,\n  checkIcon\n);\n\nexport interface BannerHandleValue {\n  /** Used to apply focus to the banner via an imperative handle. */\n  focus: () => void;\n}\n\nexport interface BannerMessage {\n  label: string;\n  description?: string;\n  action?: {\n    text: string;\n    onClick?: MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>;\n    href?: string;\n  };\n  items?: (BannerMessage | string)[];\n}\n\nexport type BannerProps = WithAttributes<\n  'div',\n  NoChildrenProp & {\n    /** Controls the styling of the Banner. */ variant: 'urgent' | 'warning' | 'success' | 'info';\n    /**\n     * The heading tag to render the provided heading as. This is agnostic to the styling of the heading.\n     * @default 'h2'\n     */\n    headingTag?: HeadingTag;\n    /** Pass one or more descriptive messages to inform the user. */\n    messages: (string | BannerMessage)[];\n    /** Callback when user explicitly dismisses the Banner. */\n    onDismiss?: MouseEventHandler;\n    /** Ref that can be used to access the imperative handle. */\n    handle?: Ref<BannerHandleValue>;\n  }\n>;\n\nexport const StyledBanner = styled.div<{ headingTag: BannerProps['headingTag'] }>(\n  ({ headingTag, theme }) => {\n    return css`\n      border-radius: ${theme.components.card['border-radius']};\n\n      &:has(${headingTag}:focus) {\n        box-shadow: ${theme.base.shadow.focus};\n      }\n    `;\n  }\n);\n\nStyledBanner.defaultProps = defaultThemeProp;\n\nexport const StyledBannerStatus = styled.div<Pick<BannerProps, 'variant'>>(({ variant, theme }) => {\n  const { background } = theme.components.banner[variant];\n  const color = tryCatch(() =>\n    getContrast(background, theme.base.palette['primary-background']) >= 3\n      ? theme.base.palette['primary-background']\n      : readableColor(background)\n  );\n\n  return css`\n    background-color: ${background};\n    color: ${color};\n    border-start-start-radius: inherit;\n    border-end-start-radius: inherit;\n    border: 0.0625rem solid ${theme.base.palette['border-line']};\n    border-inline-end: none;\n    font-size: 1.25rem;\n  `;\n});\n\nStyledBannerStatus.defaultProps = defaultThemeProp;\n\nexport const StyledBannerHeader = styled.div(({ theme }) => {\n  const { rtl } = useDirection();\n\n  return css`\n    min-height: 2.125rem;\n\n    ${StyledButton}[aria-expanded] {\n      ${StyledIcon} {\n        transition: rotate ${theme.base.animation.speed} ${theme.base.animation.timing.ease};\n      }\n\n      &[aria-expanded='true'] ${StyledIcon} {\n        rotate: 90deg;\n      }\n\n      &[aria-expanded='false'] ${StyledIcon} {\n        rotate: ${rtl ? 180 : 0}deg;\n      }\n    }\n  `;\n});\n\nStyledBannerHeader.defaultProps = defaultThemeProp;\n\nexport const StyledBannerContent = styled.div<{ expandable?: boolean }>(({ expandable, theme }) => {\n  return css`\n    background: ${theme.components.card.background};\n    padding-block: calc(0.5 * ${theme.base.spacing});\n    padding-inline-start: calc(${expandable ? 0.5 : 2} * ${theme.base.spacing});\n    padding-inline-end: calc(0.5 * ${theme.base.spacing});\n    border: 0.0625rem solid ${theme.base.palette['border-line']};\n    border-inline-start: none;\n    border-start-end-radius: inherit;\n    border-end-end-radius: inherit;\n  `;\n});\n\nStyledBannerContent.defaultProps = defaultThemeProp;\n\nexport const StyledBannerMessageList = styled(UnorderedList)(\n  ({ theme }) => css`\n    padding-block-end: calc(0.5 * ${theme.base.spacing});\n    padding-inline-start: calc(5 * ${theme.base.spacing});\n    padding-inline-end: calc(2 * ${theme.base.spacing});\n  `\n);\n\nStyledBannerMessageList.defaultProps = defaultThemeProp;\n\nexport const StyledBannerMessage = styled.span`\n  overflow-wrap: break-word;\n  list-style: none;\n`;\n\nStyledBannerMessage.defaultProps = defaultThemeProp;\n\nconst BannerMessageItem = forwardRef<\n  HTMLLIElement,\n  OmitStrict<BannerMessage, 'items'> & ForwardProps\n>(function BannerMessageItem({ label, description, action, ...restProps }, ref) {\n  return (\n    <StyledBannerMessage {...restProps} ref={ref}>\n      <span>{label}</span>\n      {description && (\n        <>\n          {' '}\n          <Text variant='secondary'>{description}</Text>\n        </>\n      )}\n      {action && (\n        <>\n          {' '}\n          <Text variant='secondary'>\n            <Button variant='link' href={action.href} onClick={action.onClick} {...action}>\n              {action.text}\n            </Button>\n          </Text>\n        </>\n      )}\n    </StyledBannerMessage>\n  );\n});\n\nconst prepareMessages = (\n  messages: (string | BannerMessage)[]\n): [messages: ReactNode[], count: number] => {\n  let count = 0;\n\n  return [\n    messages.flatMap(msg => {\n      count += 1;\n\n      if (typeof msg === 'string') {\n        return [<BannerMessageItem label={msg} />];\n      }\n\n      if (msg.items) {\n        const { items, ...restMsg } = msg;\n        const [subMessages, subCount] = prepareMessages(items);\n        count += subCount;\n        return [<BannerMessageItem {...restMsg} />, subMessages];\n      }\n\n      return [<BannerMessageItem {...msg} />];\n    }),\n    count\n  ];\n};\n\nexport default forwardRef<RefElement<BannerProps>, PropsWithoutRef<BannerProps>>(function Banner(\n  { variant, headingTag = 'h2', messages, onDismiss, handle, ...restProps },\n  ref\n) {\n  const [messagesToRender, count] = useMemo(() => prepareMessages(messages), [messages]);\n\n  const t = useI18n();\n  const [collapsed, setCollapsed] = useState(count > 2);\n\n  const bannerRef = useConsolidatedRef(ref);\n\n  let role: string;\n  let icon: string;\n  let heading: string;\n  let ariaLive: string;\n\n  switch (variant) {\n    case 'urgent':\n      heading = t('error');\n      icon = 'warn-solid';\n      role = 'alert';\n      ariaLive = 'assertive';\n      break;\n    case 'warning':\n      heading = t('warning');\n      icon = 'flag-wave-solid';\n      role = 'alert';\n      ariaLive = 'assertive';\n      break;\n    case 'success':\n      heading = t('success');\n      icon = 'check';\n      role = 'none';\n      ariaLive = 'polite';\n      break;\n    case 'info':\n    default:\n      heading = t('information');\n      icon = 'information-solid';\n      role = 'none';\n      ariaLive = 'polite';\n      break;\n  }\n\n  useImperativeHandle(\n    handle,\n    () => ({\n      focus: () => {\n        if (bannerRef.current) focusHeadingOrContainer(bannerRef.current, heading);\n      }\n    }),\n    []\n  );\n\n  return (\n    <Grid\n      {...restProps}\n      as={StyledBanner}\n      container={{ cols: '2rem minmax(0, 1fr)' }}\n      role={role}\n      aria-live={ariaLive}\n      headingTag={headingTag}\n      ref={bannerRef}\n    >\n      <Flex\n        as={StyledBannerStatus}\n        container={{ justify: 'center', alignItems: 'start', pad: [1.5, 0] }}\n        variant={variant}\n      >\n        <Icon name={icon} />\n      </Flex>\n      {count === 1 ? (\n        <Flex container={{ alignItems: 'start' }} as={StyledBannerContent}>\n          <VisuallyHiddenText as={headingTag}>{`${heading} ${count}`}</VisuallyHiddenText>\n          <Flex item={{ alignSelf: 'center', grow: 1 }} as='ul'>\n            {typeof messages[0] === 'string' ? (\n              <BannerMessageItem label={messages[0]} as='li' />\n            ) : (\n              <BannerMessageItem {...messages[0]} as='li' />\n            )}\n          </Flex>\n          {onDismiss && (\n            <Button\n              onClick={onDismiss}\n              label={t('dismiss')}\n              aria-label={t('banner_dismiss_button_label_a11y')}\n              variant='simple'\n              icon\n            >\n              <Icon name='times' />\n            </Button>\n          )}\n        </Flex>\n      ) : (\n        <StyledBannerContent expandable>\n          <Grid\n            as={StyledBannerHeader}\n            container={{ cols: 'auto 1fr auto', areas: '\"toggle heading dismiss\"', gap: 0.5 }}\n          >\n            <Grid\n              container={{ cols: 'min-content min-content', gap: 0.5, alignItems: 'center' }}\n              item={{ area: 'heading', alignSelf: 'center' }}\n              as={Text}\n              forwardedAs={headingTag}\n              variant='h2'\n            >\n              {heading} <Count>{count}</Count>\n            </Grid>\n            <Grid item={{ area: 'toggle', alignSelf: 'center' }}>\n              <Button\n                onClick={() => {\n                  setCollapsed(cur => !cur);\n                }}\n                label={t(collapsed ? 'expand' : 'collapse')}\n                aria-expanded={collapsed ? 'false' : 'true'}\n                variant='simple'\n                icon\n              >\n                <Icon name='caret-right' />\n              </Button>\n            </Grid>\n            <Grid item={{ area: 'dismiss', alignSelf: 'center' }}>\n              {onDismiss && (\n                <Button\n                  onClick={onDismiss}\n                  label={t('dismiss')}\n                  aria-label={t('banner_dismiss_button_label_a11y')}\n                  variant='simple'\n                  icon\n                >\n                  <Icon name='times' />\n                </Button>\n              )}\n            </Grid>\n          </Grid>\n          <ExpandCollapse collapsed={collapsed}>\n            <StyledBannerMessageList items={messagesToRender} />\n          </ExpandCollapse>\n        </StyledBannerContent>\n      )}\n    </Grid>\n  );\n});\n"]}

package/lib/components/Boolean/BooleanDisplay.d.ts

@@ -1,8 +1,6 @@
-import { FunctionComponent, Ref } from 'react';
-import { BaseProps, ForwardProps, NoChildrenProp } from '../../types';
-export interface BooleanDisplayProps extends BaseProps, NoChildrenProp {
-    /** Boolean value */
-    value?: boolean;
+import { NoChildrenProp, WithAttributes } from '../../types';
+export type BooleanDisplayProps = WithAttributes<'span', NoChildrenProp & {
+    /** Boolean value */ value?: boolean;
     /** The text to be displayed when value is true.
      * @default 'Yes'
      */
@@ -11,9 +9,7 @@ export interface BooleanDisplayProps extends BaseProps, NoChildrenProp {
      * @default 'No'
      */
     falseLabel?: string;
-    /** Ref for the wrapping element. */
-    ref?: Ref<HTMLSpanElement>;
-}
-declare const BooleanDisplay: FunctionComponent<BooleanDisplayProps & ForwardProps>;
-export default BooleanDisplay;
+}>;
+declare const _default: import("react").ForwardRefExoticComponent<Pick<BooleanDisplayProps, "hidden" | "color" | "style" | "translate" | "prefix" | "slot" | "title" | "children" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "property" | "resource" | "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" | "value" | "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" | "trueLabel" | "falseLabel"> & import("react").RefAttributes<HTMLSpanElement>>;
+export default _default;
 //# sourceMappingURL=BooleanDisplay.d.ts.map

package/lib/components/Boolean/BooleanDisplay.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BooleanDisplay.d.ts","sourceRoot":"","sources":["../../../src/components/Boolean/BooleanDisplay.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AAK5E,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAGtE,MAAM,WAAW,mBAAoB,SAAQ,SAAS,EAAE,cAAc;IACpE,oBAAoB;IACpB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,eAAe,CAAC,CAAC;CAC5B;AAMD,QAAA,MAAM,cAAc,EAAE,iBAAiB,CAAC,mBAAmB,GAAG,YAAY,CAiBzE,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"BooleanDisplay.d.ts","sourceRoot":"","sources":["../../../src/components/Boolean/BooleanDisplay.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,cAAc,EAAc,cAAc,EAAE,MAAM,aAAa,CAAC;AAGzE,MAAM,MAAM,mBAAmB,GAAG,cAAc,CAC9C,MAAM,EACN,cAAc,GAAG;IACf,oBAAoB,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC;IACrC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CACF,CAAC;;AAMF,wBAcE"}

package/lib/components/Boolean/BooleanDisplay.js

@@ -6,12 +6,11 @@ import { defaultThemeProp } from '../../theme';
 import NoValue from '../NoValue/NoValue';
 const StyledBooleanDisplay = styled.span ``;
 StyledBooleanDisplay.defaultProps = defaultThemeProp;
-const BooleanDisplay = forwardRef(function BooleanDisplay({ value, trueLabel, falseLabel, ...restProps }, ref) {
+export default forwardRef(function BooleanDisplay({ value, trueLabel, falseLabel, ...restProps }, ref) {
     const t = useI18n();
     const displayText = value
         ? trueLabel || t('boolean_display_true_label')
         : falseLabel || t('boolean_display_false_label');
     return (_jsx(StyledBooleanDisplay, { ref: ref, ...restProps, children: value !== undefined ? displayText : _jsx(NoValue, {}) }));
 });
-export default BooleanDisplay;
 //# sourceMappingURL=BooleanDisplay.js.map

package/lib/components/Boolean/BooleanDisplay.js.map

@@ -1 +1 @@
-{"version":3,"file":"BooleanDisplay.js","sourceRoot":"","sources":["../../../src/components/Boolean/BooleanDisplay.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAA2C,MAAM,OAAO,CAAC;AAC5E,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACtC,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C,OAAO,OAAO,MAAM,oBAAoB,CAAC;AAiBzC,MAAM,oBAAoB,GAAG,MAAM,CAAC,IAAI,CAAA,EAAE,CAAC;AAE3C,oBAAoB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAErD,MAAM,cAAc,GAA0D,UAAU,CACtF,SAAS,cAAc,CACrB,EAAE,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,GAAG,SAAS,EAAwC,EACpF,GAA+B;IAE/B,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,MAAM,WAAW,GAAG,KAAK;QACvB,CAAC,CAAC,SAAS,IAAI,CAAC,CAAC,4BAA4B,CAAC;QAC9C,CAAC,CAAC,UAAU,IAAI,CAAC,CAAC,6BAA6B,CAAC,CAAC;IAEnD,OAAO,CACL,KAAC,oBAAoB,IAAC,GAAG,EAAE,GAAG,KAAM,SAAS,YAC1C,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,KAAC,OAAO,KAAG,GAC3B,CACxB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, Ref } from 'react';\nimport styled from 'styled-components';\n\nimport { useI18n } from '../../hooks';\nimport { defaultThemeProp } from '../../theme';\nimport { BaseProps, ForwardProps, NoChildrenProp } from '../../types';\nimport NoValue from '../NoValue/NoValue';\n\nexport interface BooleanDisplayProps extends BaseProps, NoChildrenProp {\n  /** Boolean value */\n  value?: boolean;\n  /** The text to be displayed when value is true.\n   * @default 'Yes'\n   */\n  trueLabel?: string;\n  /** The text to be displayed when value is false.\n   * @default 'No'\n   */\n  falseLabel?: string;\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLSpanElement>;\n}\n\nconst StyledBooleanDisplay = styled.span``;\n\nStyledBooleanDisplay.defaultProps = defaultThemeProp;\n\nconst BooleanDisplay: FunctionComponent<BooleanDisplayProps & ForwardProps> = forwardRef(\n  function BooleanDisplay(\n    { value, trueLabel, falseLabel, ...restProps }: PropsWithoutRef<BooleanDisplayProps>,\n    ref: BooleanDisplayProps['ref']\n  ) {\n    const t = useI18n();\n\n    const displayText = value\n      ? trueLabel || t('boolean_display_true_label')\n      : falseLabel || t('boolean_display_false_label');\n\n    return (\n      <StyledBooleanDisplay ref={ref} {...restProps}>\n        {value !== undefined ? displayText : <NoValue />}\n      </StyledBooleanDisplay>\n    );\n  }\n);\n\nexport default BooleanDisplay;\n"]}
+{"version":3,"file":"BooleanDisplay.js","sourceRoot":"","sources":["../../../src/components/Boolean/BooleanDisplay.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAmB,MAAM,OAAO,CAAC;AACpD,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACtC,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C,OAAO,OAAO,MAAM,oBAAoB,CAAC;AAiBzC,MAAM,oBAAoB,GAAG,MAAM,CAAC,IAAI,CAAA,EAAE,CAAC;AAE3C,oBAAoB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAErD,eAAe,UAAU,CACvB,SAAS,cAAc,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,GAAG,SAAS,EAAE,EAAE,GAAG;IACzE,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,MAAM,WAAW,GAAG,KAAK;QACvB,CAAC,CAAC,SAAS,IAAI,CAAC,CAAC,4BAA4B,CAAC;QAC9C,CAAC,CAAC,UAAU,IAAI,CAAC,CAAC,6BAA6B,CAAC,CAAC;IAEnD,OAAO,CACL,KAAC,oBAAoB,IAAC,GAAG,EAAE,GAAG,KAAM,SAAS,YAC1C,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,KAAC,OAAO,KAAG,GAC3B,CACxB,CAAC;AACJ,CAAC,CACF,CAAC","sourcesContent":["import { forwardRef, PropsWithoutRef } from 'react';\nimport styled from 'styled-components';\n\nimport { useI18n } from '../../hooks';\nimport { defaultThemeProp } from '../../theme';\nimport { NoChildrenProp, RefElement, WithAttributes } from '../../types';\nimport NoValue from '../NoValue/NoValue';\n\nexport type BooleanDisplayProps = WithAttributes<\n  'span',\n  NoChildrenProp & {\n    /** Boolean value */ value?: boolean;\n    /** The text to be displayed when value is true.\n     * @default 'Yes'\n     */\n    trueLabel?: string;\n    /** The text to be displayed when value is false.\n     * @default 'No'\n     */\n    falseLabel?: string;\n  }\n>;\n\nconst StyledBooleanDisplay = styled.span``;\n\nStyledBooleanDisplay.defaultProps = defaultThemeProp;\n\nexport default forwardRef<RefElement<BooleanDisplayProps>, PropsWithoutRef<BooleanDisplayProps>>(\n  function BooleanDisplay({ value, trueLabel, falseLabel, ...restProps }, ref) {\n    const t = useI18n();\n\n    const displayText = value\n      ? trueLabel || t('boolean_display_true_label')\n      : falseLabel || t('boolean_display_false_label');\n\n    return (\n      <StyledBooleanDisplay ref={ref} {...restProps}>\n        {value !== undefined ? displayText : <NoValue />}\n      </StyledBooleanDisplay>\n    );\n  }\n);\n"]}

package/lib/components/ComboBox/SingleSelectInput/SingleSelectInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SingleSelectInput.d.ts","sourceRoot":"","sources":["../../../../src/components/ComboBox/SingleSelectInput/SingleSelectInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAwB,MAAM,OAAO,CAAC;AAM5E,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAG9C,OAAO,sBAAsB,MAAM,2BAA2B,CAAC;AAE/D,eAAO,MAAM,uBAAuB,yGAA8B,CAAC;AAuBnE,QAAA,MAAM,iBAAiB,EAAE,iBAAiB,CAAC,sBAAsB,GAAG,YAAY,CAsD/E,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"SingleSelectInput.d.ts","sourceRoot":"","sources":["../../../../src/components/ComboBox/SingleSelectInput/SingleSelectInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAwB,MAAM,OAAO,CAAC;AAO5E,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAG9C,OAAO,sBAAsB,MAAM,2BAA2B,CAAC;AAE/D,eAAO,MAAM,uBAAuB,yGAA8B,CAAC;AAuBnE,QAAA,MAAM,iBAAiB,EAAE,iBAAiB,CAAC,sBAAsB,GAAG,YAAY,CA6D/E,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/lib/components/ComboBox/SingleSelectInput/SingleSelectInput.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
+import { useConsolidatedRef } from '../../../hooks';
 import { defaultThemeProp } from '../../../theme';
 import { StyledFormControl } from '../../FormControl';
 import Flex from '../../Flex';
@@ -18,18 +19,21 @@ const StyledVisualContainer = styled.span(props => {
 StyledVisualContainer.defaultProps = defaultThemeProp;
 const SingleSelectInput = forwardRef(function SingleSelectInput(props, ref) {
     const { value, readOnly, disabled, status, actions, onChange, onResolveSuggestion, selected, visual, ...restProps } = props;
+    const inputRef = useConsolidatedRef(ref);
     return (_jsxs(Flex, { as: StyledSingleSelectInput, forwardedAs: StyledFormControl, hasSuggestion: status === 'pending' && !!onResolveSuggestion, container: { alignItems: 'center', wrap: 'nowrap' }, ...{
             disabled,
             status,
             readOnly
-        }, children: [visual && (_jsx(Flex, { container: { justify: 'center', alignItems: 'center' }, as: StyledVisualContainer, children: visual })), _jsx("input", { ...{
-                    ref,
+        }, children: [visual && (_jsx(Flex, { container: { justify: 'center', alignItems: 'center' }, as: StyledVisualContainer, onClick: () => {
+                    inputRef.current?.focus();
+                    inputRef.current?.click();
+                }, children: visual })), _jsx("input", { ...{
                     disabled,
                     status,
                     readOnly
                 }, size: 1, value: value || selected?.text || '', 
                 // no-op avoids react uncontrolled warning
-                onChange: onChange || (() => { }), readOnly: readOnly || !onChange, autoComplete: 'off', ...restProps }), actions] }));
+                onChange: onChange || (() => { }), readOnly: readOnly || !onChange, autoComplete: 'off', ...restProps, ref: inputRef }), actions] }));
 });
 export default SingleSelectInput;
 //# sourceMappingURL=SingleSelectInput.js.map